Fix dropdown icon rotation by reading dropdown open state (#4503)

Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>

packages/gitbook/src/components/PageActions/PageActionsDropdown.tsx

@@ -24,8 +24,13 @@ import {
     type PageActionAssistantContext,
 } from './PageActions';
 import { Button, ButtonGroup } from '@/components/primitives/Button';
-import { DropdownMenu, DropdownMenuSeparator } from '@/components/primitives/DropdownMenu';
+import {
+    DropdownMenu,
+    DropdownMenuSeparator,
+    useDropdownMenuOpen,
+} from '@/components/primitives/DropdownMenu';
 import { tString, useLanguage } from '@/intl/client';
+import type { ClassValue } from '@/lib/tailwind';
 
 /**
  * Type of a built-in page action that can be displayed in the page actions menu.
@@ -137,7 +142,7 @@ export function PageActionsDropdown(props: PageActionsDropdownProps) {
                     className="!min-w-60 max-w-max"
                     button={
                         <Button
-                            icon={<ToggleChevron className="size-text-sm" />}
+                            icon={<MoreActionsChevron className="size-text-sm" />}
                             label={tString(language, defaultAction ? 'more' : 'actions')}
                             iconOnly={!!defaultAction}
                             size="xsmall"
@@ -153,6 +158,15 @@ export function PageActionsDropdown(props: PageActionsDropdownProps) {
     ) : null;
 }
 
+/**
+ * Chevron for the "more" button, driven by the dropdown's real open state to avoid colliding
+ * with the shared `data-popup-open` attribute set by the button's own Tooltip.
+ */
+function MoreActionsChevron(props: { className?: ClassValue }) {
+    const open = useDropdownMenuOpen();
+    return <ToggleChevron open={open} className={props.className} />;
+}
+
 /**
  * Whether an action type can be rendered given the available URLs and assistants.
  */

packages/gitbook/src/components/primitives/DropdownMenu.tsx

@@ -242,3 +242,10 @@ export function useDropdownMenuClose() {
     assert(context, 'DropdownMenuContext not found');
     return useCallback(() => context.setOpen(false), [context]);
 }
+
+/**
+ * Hook to read whether the dropdown menu is open.
+ */
+export function useDropdownMenuOpen() {
+    return useContext(DropdownMenuContext).open;
+}

packages/gitbook/src/components/primitives/ToggleChevron.tsx

@@ -37,7 +37,7 @@ export function ToggleChevron(props: {
             icon={classes[orientation].icon as IconName}
             className={tcls(
                 'shrink-0',
-                open ? classes[orientation].animation : classes[orientation].autoAnimation,
+                getRotationClassName(open, classes[orientation]),
                 'size-3',
                 'transition-all',
                 className
@@ -45,3 +45,16 @@ export function ToggleChevron(props: {
         />
     );
 }
+
+function getRotationClassName(
+    open: boolean | undefined,
+    classes: { animation: string; autoAnimation: string }
+): string {
+    if (open === undefined) {
+        return classes.autoAnimation;
+    }
+    if (open) {
+        return classes.animation;
+    }
+    return '';
+}