@astryxdesign/core 0.5.2-canary.c9c8564 → 0.5.2-canary.e4f8e4e

package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx

@@ -10,9 +10,11 @@ import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {useState} from 'react';
 import {render, screen, waitFor, fireEvent, act} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import * as stylex from '@stylexjs/stylex';
 import {DropdownMenu} from './DropdownMenu';
 import {DropdownMenuItem} from './DropdownMenuItem';
 import {DropdownMenuSubMenu} from './DropdownMenuSubMenu';
+import {rtlStyles} from '../utils';
 
 beforeEach(() => {
   HTMLElement.prototype.showPopover = vi.fn(function (this: HTMLElement) {
@@ -81,6 +83,82 @@ describe('DropdownMenuSubMenu', () => {
     ).toBeInTheDocument();
   });
 
+  it('caps the flyout width and height to the available viewport', async () => {
+    const user = userEvent.setup();
+    render(
+      <DropdownMenu button={{label: 'Actions'}}>
+        <DropdownMenuSubMenu label="Move to" menuWidth={640}>
+          <DropdownMenuItem label="Folder A" onClick={() => {}} />
+        </DropdownMenuSubMenu>
+      </DropdownMenu>,
+    );
+    await user.click(screen.getByRole('button', {name: /Actions/}));
+    const trigger = screen.getByRole('menuitem', {
+      name: /Move to/,
+      hidden: true,
+    });
+    await user.click(trigger);
+
+    const flyout = screen.getByRole('menu', {name: /Move to/, hidden: true});
+    const popover = flyout.closest('[popover]');
+    expect(popover?.className).toContain(
+      'DropdownMenuSubMenu__flyoutStyles.popoverViewport',
+    );
+    expect(popover).not.toHaveStyle(
+      'margin-inline-start: max(var(--spacing-2),env(safe-area-inset-left,0px))',
+    );
+    expect(popover).not.toHaveStyle(
+      'margin-inline-end: max(var(--spacing-2),env(safe-area-inset-right,0px))',
+    );
+    expect(popover).toHaveStyle({minWidth: 'var(--x-minWidth)'});
+    expect(popover?.getAttribute('style')).toContain('min(640px, calc(100vw');
+    expect(flyout).toHaveStyle(
+      'max-height: min(300px,calc(100dvb - max(var(--spacing-4),env(safe-area-inset-top,0px)) - max(var(--spacing-4),env(safe-area-inset-bottom,0px))))',
+    );
+    expect(flyout).not.toHaveStyle({overflowY: 'auto'});
+    expect(flyout).toHaveAttribute('tabindex', '-1');
+
+    Object.defineProperties(flyout, {
+      clientHeight: {configurable: true, value: 300},
+      scrollHeight: {configurable: true, value: 480},
+    });
+    fireEvent(window, new Event('resize'));
+
+    await waitFor(() => {
+      expect(flyout).toHaveStyle({overflowY: 'auto'});
+      expect(flyout).toHaveAttribute('tabindex', '0');
+    });
+  });
+
+  it.each(['max-content', 'fit-content', 'auto'])(
+    'preserves the valid %s flyout width while retaining the viewport cap',
+    async menuWidth => {
+      const user = userEvent.setup();
+      render(
+        <DropdownMenu button={{label: 'Actions'}}>
+          <DropdownMenuSubMenu label="Move to" menuWidth={menuWidth}>
+            <DropdownMenuItem label="Folder A" onClick={() => {}} />
+          </DropdownMenuSubMenu>
+        </DropdownMenu>,
+      );
+      await user.click(screen.getByRole('button', {name: /Actions/}));
+      await user.click(
+        screen.getByRole('menuitem', {name: /Move to/, hidden: true}),
+      );
+
+      const flyout = screen.getByRole('menu', {name: /Move to/, hidden: true});
+      const popover = flyout.closest('[popover]');
+      expect(popover?.className).toContain(
+        'DropdownMenuSubMenu__flyoutStyles.popoverCustomIntrinsicWidth',
+      );
+      expect(popover?.getAttribute('style')).toContain(menuWidth);
+      expect(popover?.className).toContain(
+        'DropdownMenuSubMenu__flyoutStyles.popoverViewport',
+      );
+      expect(popover?.getAttribute('style')).not.toContain(`min(${menuWidth},`);
+    },
+  );
+
   it('opens on ArrowRight and returns focus to the trigger on ArrowLeft', async () => {
     const user = userEvent.setup();
     render(<MoveMenu />);
@@ -115,6 +193,52 @@ describe('DropdownMenuSubMenu', () => {
     expect(trigger).toHaveFocus();
   });
 
+  it('mirrors its indicator and keyboard directions under RTL', async () => {
+    const user = userEvent.setup();
+    const {className: mirrorClassName} = stylex.props(rtlStyles.mirror);
+    const mirrorClasses = mirrorClassName?.split(' ') ?? [];
+    expect(mirrorClasses.length).toBeGreaterThan(0);
+    render(
+      <div dir="rtl" style={{direction: 'rtl'}}>
+        <MoveMenu />
+      </div>,
+    );
+
+    await user.click(screen.getByRole('button', {name: /Actions/}));
+    const trigger = screen.getByRole('menuitem', {
+      name: /Move to/,
+      hidden: true,
+    });
+    const indicator = trigger.querySelector('.astryx-icon');
+    expect(indicator).not.toBeNull();
+    for (const className of mirrorClasses) {
+      expect(indicator).toHaveClass(className);
+    }
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('menu', {name: 'Actions', hidden: true}),
+      ).toHaveFocus();
+    });
+    // jsdom does not propagate the ancestor's computed direction, so set the
+    // same RTL direction directly on each keyboard event owner.
+    trigger.style.direction = 'rtl';
+    trigger.focus();
+    await user.keyboard('{ArrowLeft}');
+    const flyout = screen.getByRole('menu', {name: /Move to/, hidden: true});
+    flyout.style.direction = 'rtl';
+    await waitFor(() => {
+      expect(
+        screen.getByRole('menuitem', {name: 'Folder A', hidden: true}),
+      ).toHaveFocus();
+    });
+    await user.keyboard('{ArrowRight}');
+    await waitFor(() => {
+      expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    });
+    expect(trigger).toHaveFocus();
+  });
+
   it('names the flyout from its trigger via aria-labelledby', async () => {
     const user = userEvent.setup();
     render(<MoveMenu />);

package/src/DropdownMenu/DropdownMenuSubMenu.tsx

@@ -5,7 +5,8 @@
 /**
  * @file DropdownMenuSubMenu.tsx
  * @input React, stylex, useLayer (context mode), useListFocus, useMenuHover,
- *   useTypeahead, Item, Icon, Spinner, DropdownMenu context + item roles.
+ *   useTypeahead, the shared viewport-safe menu-width resolver, Item, Icon,
+ *   Spinner, and DropdownMenu context + item roles
  * @output Exports DropdownMenuSubMenu — a single menu row that reveals a nested
  *   flyout menu of its own children/items.
  * @position Sub-component; place inside a DropdownMenu (or ContextMenu)
@@ -56,6 +57,8 @@ import {layerAnimations} from '../Layer/layerAnimations.stylex';
 import {useListFocus} from '../hooks/useListFocus';
 import {useMenuHover} from '../hooks/useMenuHover';
 import {useTypeahead} from '../hooks/useTypeahead';
+import {useMenuOverflow} from './useMenuOverflow';
+import {resolveMenuWidth} from './menuWidth';
 import {
   colorVars,
   spacingVars,
@@ -66,7 +69,7 @@ import {
   typographyVars,
   typeScaleVars,
 } from '../theme/tokens.stylex';
-import {mergeProps} from '../utils';
+import {mergeProps, rtlStyles} from '../utils';
 import {themeProps} from '../utils/themeProps';
 import type {BaseProps} from '../BaseProps';
 import {
@@ -81,6 +84,14 @@ import {
 } from './DropdownMenuContext';
 import {focusMenuItemOnHover} from './menuItemHover';
 
+const MENU_VIEWPORT_GUTTER = spacingVars['--spacing-4'];
+// `useLayer` adds 4px of anchor clearance. An 8px collision margin resolves
+// to a 4px visible gap after the browser flips the flyout.
+const MENU_MAX_INLINE_SIZE = `calc(100vi - max(${MENU_VIEWPORT_GUTTER}, env(safe-area-inset-left, 0px)) - max(${MENU_VIEWPORT_GUTTER}, env(safe-area-inset-right, 0px)))`;
+const MENU_MAX_INLINE_SIZE_FALLBACK = `calc(100vw - ${MENU_VIEWPORT_GUTTER} - ${MENU_VIEWPORT_GUTTER})`;
+const MENU_MAX_BLOCK_SIZE = `min(300px, calc(100dvb - max(${MENU_VIEWPORT_GUTTER}, env(safe-area-inset-top, 0px)) - max(${MENU_VIEWPORT_GUTTER}, env(safe-area-inset-bottom, 0px))))`;
+const MENU_MAX_BLOCK_SIZE_FALLBACK = `min(300px, calc(100vh - ${MENU_VIEWPORT_GUTTER} - ${MENU_VIEWPORT_GUTTER}))`;
+
 const triggerStyles = stylex.create({
   root: {
     boxSizing: 'border-box',
@@ -135,8 +146,14 @@ const flyoutStyles = stylex.create({
     display: 'flex',
     flexDirection: 'column',
     gap: spacingVars['--spacing-0-5'],
-    maxHeight: '300px',
-    overflowY: 'auto',
+    maxInlineSize: stylex.firstThatWorks(
+      MENU_MAX_INLINE_SIZE,
+      MENU_MAX_INLINE_SIZE_FALLBACK,
+    ),
+    maxHeight: stylex.firstThatWorks(
+      MENU_MAX_BLOCK_SIZE,
+      MENU_MAX_BLOCK_SIZE_FALLBACK,
+    ),
     '--_dropdown-menu-radius': radiusVars['--radius-container'],
     '--_dropdown-menu-padding': spacingVars['--spacing-1'],
     padding: spacingVars['--spacing-1'],
@@ -148,11 +165,33 @@ const flyoutStyles = stylex.create({
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
   },
+  scrollable: {
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    overscrollBehavior: 'contain',
+  },
+  popoverViewport: {
+    boxSizing: 'border-box',
+    // Keep the inline viewport cap on the menu surface above. Applying it to
+    // the anchor-positioned popover itself prevents Chromium from selecting
+    // `flip-inline` and instead shifts the flyout back across its parent.
+    maxBlockSize: stylex.firstThatWorks(
+      MENU_MAX_BLOCK_SIZE,
+      MENU_MAX_BLOCK_SIZE_FALLBACK,
+    ),
+  },
   popover: {
-    minWidth: '160px',
+    minWidth: stylex.firstThatWorks(
+      `min(160px, ${MENU_MAX_INLINE_SIZE})`,
+      `min(160px, ${MENU_MAX_INLINE_SIZE_FALLBACK})`,
+      '160px',
+    ),
   },
-  popoverCustomWidth: (width: string | number) => ({
-    minWidth: typeof width === 'number' ? `${width}px` : width,
+  popoverCustomWidth: (width: string) => ({
+    minWidth: width,
+  }),
+  popoverCustomIntrinsicWidth: (width: string) => ({
+    inlineSize: width,
   }),
 });
 
@@ -178,7 +217,10 @@ interface DropdownMenuSubMenuBaseProps extends Pick<
    * @default false
    */
   hasSpinner?: boolean;
-  /** Fixed flyout width. Defaults to sizing to its content (min 160px). */
+  /**
+   * Minimum flyout width. The flyout may grow for its content but is capped to
+   * the available viewport space. Defaults to intrinsic sizing (min 160px).
+   */
   menuWidth?: number | string;
   /** Called when the flyout opens or closes. */
   onOpenChange?: (isOpen: boolean) => void;
@@ -289,6 +331,7 @@ export function DropdownMenuSubMenu(
     wrap: false,
     onEscape: () => close({focusTrigger: true}),
   });
+  const hasOverflow = useMenuOverflow(menuRef, children, isOpen);
 
   const typeahead = useTypeahead({
     getItemLabels: () => getItems().map(el => el.textContent),
@@ -485,13 +528,19 @@ export function DropdownMenuSubMenu(
         icon="chevronRight"
         size="sm"
         color="secondary"
+        xstyle={rtlStyles.mirror}
         {...themeProps('dropdown-menu-indicator-icon')}
       />
     </span>
   );
 
-  const popoverXstyle = menuWidth
-    ? flyoutStyles.popoverCustomWidth(menuWidth)
+  const resolvedMenuWidth = menuWidth
+    ? resolveMenuWidth(menuWidth, MENU_MAX_INLINE_SIZE_FALLBACK)
+    : null;
+  const popoverXstyle = resolvedMenuWidth
+    ? resolvedMenuWidth.property === 'inlineSize'
+      ? flyoutStyles.popoverCustomIntrinsicWidth(resolvedMenuWidth.value)
+      : flyoutStyles.popoverCustomWidth(resolvedMenuWidth.value)
     : flyoutStyles.popover;
 
   return (
@@ -537,11 +586,10 @@ export function DropdownMenuSubMenu(
           ref={menuRef}
           id={contentId}
           role="menu"
-          // Focusable as a fallback target so an empty/loading flyout (e.g.
-          // hasSpinner with only a disabled row) can still receive keyboard
-          // focus and own arrow/Escape keys instead of leaving focus on the
-          // parent list.
-          tabIndex={-1}
+          // Focusable as a fallback target so an empty/loading flyout can own
+          // arrow/Escape keys. An overflowing flyout joins the Tab order so its
+          // scrollable region is keyboard-accessible.
+          tabIndex={hasOverflow ? 0 : -1}
           aria-labelledby={triggerId}
           onKeyDown={handleContentKeyDown}
           onMouseEnter={contentProps.onMouseEnter}
@@ -549,7 +597,10 @@ export function DropdownMenuSubMenu(
           data-testid={menuDataTestId}
           {...mergeProps(
             themeProps('dropdown-menu'),
-            stylex.props(flyoutStyles.menu),
+            stylex.props(
+              flyoutStyles.menu,
+              hasOverflow && flyoutStyles.scrollable,
+            ),
           )}>
           <DropdownMenuContext value={nestedMenuContext}>
             {children}
@@ -559,7 +610,11 @@ export function DropdownMenuSubMenu(
           placement: 'end',
           alignment: 'start',
           offset: spacingVars['--spacing-1'],
-          xstyle: [popoverXstyle, layerAnimations.end],
+          xstyle: [
+            flyoutStyles.popoverViewport,
+            popoverXstyle,
+            layerAnimations.end,
+          ],
         },
       )}
     </>

package/src/DropdownMenu/MenuBottomSheet.tsx

@@ -0,0 +1,46 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file MenuBottomSheet.tsx
+ * @input Uses BottomSheet and Section
+ * @output Internal action-sheet host for menu content
+ * @position Shared by DropdownMenu and ContextMenu adaptive presentations
+ */
+
+import type {ReactNode, RefObject} from 'react';
+import {BottomSheet} from '../BottomSheet/BottomSheet';
+import {Section} from '../Section/Section';
+
+interface MenuBottomSheetProps {
+  finalFocusRef?: RefObject<HTMLElement | null>;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  label: string;
+  children: ReactNode;
+}
+
+export function MenuBottomSheet({
+  finalFocusRef,
+  isOpen,
+  onOpenChange,
+  label,
+  children,
+}: MenuBottomSheetProps) {
+  return (
+    <BottomSheet
+      finalFocusRef={finalFocusRef}
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      label={label}
+      height="hug"
+      purpose="info">
+      <Section paddingBlockStart={4} paddingBlockEnd={0} paddingInline={1}>
+        {children}
+      </Section>
+    </BottomSheet>
+  );
+}
+
+MenuBottomSheet.displayName = 'MenuBottomSheet';

package/src/DropdownMenu/MenuBottomSheetActionList.tsx

@@ -0,0 +1,141 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file MenuBottomSheetActionList.tsx
+ * @input Uses menu data entries and callbacks for selection and drill-in
+ * @output Internal touch-friendly action list shared by DropdownMenu and ContextMenu
+ * @position Shared implementation for menu bottom-sheet presentations
+ */
+
+import type {ReactElement} from 'react';
+import * as stylex from '@stylexjs/stylex';
+import {Divider} from '../Divider';
+import {Heading} from '../Heading';
+import {Icon, renderIconSlot} from '../Icon';
+import {List, ListItem} from '../List';
+import {colorVars, spacingVars} from '../theme/tokens.stylex';
+import {rtlStyles} from '../utils';
+import {getInteractionModality} from '../utils/interactionModality';
+import type {DropdownMenuItemData, DropdownMenuOption} from './DropdownMenu';
+
+const styles = stylex.create({
+  destructiveAction: {
+    '--_item-label-color': colorVars['--color-error'],
+    '--_item-description-color': colorVars['--color-error'],
+    color: colorVars['--color-error'],
+  },
+  structuralItem: {
+    listStyleType: 'none',
+  },
+  divider: {
+    marginBlock: spacingVars['--spacing-1'],
+  },
+  section: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacingVars['--spacing-1'],
+  },
+});
+
+function getItemKey(item: DropdownMenuItemData, index: number): string {
+  return `item-${item.id ?? index}`;
+}
+
+export function MenuBottomSheetActionList({
+  items,
+  onSelect,
+  onOpenSubmenu,
+}: {
+  items: DropdownMenuOption[];
+  onSelect: (item: DropdownMenuItemData) => void;
+  onOpenSubmenu: (item: DropdownMenuItemData) => void;
+}) {
+  const renderItem = (
+    item: DropdownMenuItemData,
+    index: number,
+  ): ReactElement => {
+    const isSubmenu = item.items != null && item.items.length > 0;
+    const isDestructive = item.variant === 'destructive';
+
+    return (
+      <ListItem
+        key={getItemKey(item, index)}
+        label={item.label}
+        description={item.description}
+        startContent={
+          item.icon
+            ? renderIconSlot(item.icon, {
+                size: 'sm',
+                color: isDestructive ? 'error' : 'secondary',
+              })
+            : undefined
+        }
+        endContent={
+          isSubmenu ? (
+            <Icon
+              icon="chevronRight"
+              size="sm"
+              color="secondary"
+              xstyle={rtlStyles.mirror}
+            />
+          ) : (
+            item.endContent
+          )
+        }
+        isDisabled={item.isDisabled}
+        onClick={event => {
+          if (getInteractionModality() === 'pointer') {
+            (event.currentTarget as HTMLElement).blur();
+          }
+          if (isSubmenu) {
+            onOpenSubmenu(item);
+          } else {
+            onSelect(item);
+          }
+        }}
+        xstyle={isDestructive && styles.destructiveAction}
+      />
+    );
+  };
+
+  return (
+    <List density="spacious">
+      {items.map((option, index) => {
+        if ('type' in option && option.type === 'divider') {
+          return (
+            <li
+              // eslint-disable-next-line @eslint-react/no-array-index-key
+              key={`divider-${index}`}
+              role="presentation"
+              {...stylex.props(styles.structuralItem)}>
+              <Divider xstyle={styles.divider} />
+            </li>
+          );
+        }
+
+        if ('type' in option && option.type === 'section') {
+          return (
+            <li
+              key={`section-${option.id ?? index}`}
+              role="presentation"
+              {...stylex.props(styles.structuralItem)}>
+              <div
+                role="group"
+                aria-label={option.title}
+                {...stylex.props(styles.section)}>
+                {option.title && <Heading level={4}>{option.title}</Heading>}
+                <List density="spacious">{option.items.map(renderItem)}</List>
+              </div>
+            </li>
+          );
+        }
+
+        return renderItem(option, index);
+      })}
+    </List>
+  );
+}
+
+MenuBottomSheetActionList.displayName = 'MenuBottomSheetActionList';

package/src/DropdownMenu/index.ts

@@ -20,12 +20,14 @@
 export {
   DropdownMenu,
   type DropdownMenuProps,
+  type DropdownMenuPresentation,
   type DropdownMenuButtonProps,
   type DropdownMenuItemData,
   type DropdownMenuDividerData,
   type DropdownMenuSection,
   type DropdownMenuOption,
 } from './DropdownMenu';
+export type {AdaptivePresentation as MenuPresentation} from '../hooks/useAdaptivePresentation';
 
 export {DropdownMenuItem, type DropdownMenuItemProps} from './DropdownMenuItem';
 

package/src/DropdownMenu/menuWidth.ts

@@ -0,0 +1,51 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file menuWidth.ts
+ * @input Accepts the public DropdownMenu menuWidth value and a viewport limit
+ * @output Resolves whether the value belongs on min-width or inline-size
+ * @position Shared width compatibility logic for root menus and submenu flyouts
+ */
+
+const INTRINSIC_AND_CSS_WIDE_WIDTHS = new Set([
+  'auto',
+  'contain',
+  'fit-content',
+  'inherit',
+  'initial',
+  'max-content',
+  'min-content',
+  'revert',
+  'revert-layer',
+  'stretch',
+  'unset',
+]);
+
+export type ResolvedMenuWidth =
+  | {property: 'inlineSize'; value: string}
+  | {property: 'minWidth'; value: string};
+
+/**
+ * CSS intrinsic and CSS-wide keywords cannot be arguments to `min()`. Apply
+ * those values as the preferred inline size so max-inline-size can still cap
+ * the menu. Lengths retain the existing minimum-width growth contract.
+ */
+export function resolveMenuWidth(
+  menuWidth: number | string,
+  maximum: string,
+): ResolvedMenuWidth {
+  if (typeof menuWidth === 'number') {
+    return {property: 'minWidth', value: `min(${menuWidth}px, ${maximum})`};
+  }
+
+  const width = menuWidth.trim();
+  const normalizedWidth = width.toLowerCase();
+  if (
+    INTRINSIC_AND_CSS_WIDE_WIDTHS.has(normalizedWidth) ||
+    normalizedWidth.startsWith('fit-content(')
+  ) {
+    return {property: 'inlineSize', value: width};
+  }
+
+  return {property: 'minWidth', value: `min(${width}, ${maximum})`};
+}

package/src/DropdownMenu/useMenuOverflow.ts

@@ -0,0 +1,77 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useMenuOverflow.ts
+ * @input Menu element ref, rendered content, and open state
+ * @output Returns whether the open menu overflows its block-size constraint
+ * @position Shared responsive helper for DropdownMenu and DropdownMenuSubMenu
+ */
+
+import {useCallback, useState, type ReactNode, type RefObject} from 'react';
+import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
+
+/** Detect block-axis overflow without making a fitting menu a scroll container. */
+export function useMenuOverflow(
+  menuRef: RefObject<HTMLElement | null>,
+  content: ReactNode,
+  isOpen: boolean,
+): boolean {
+  const [hasOverflow, setHasOverflow] = useState(false);
+
+  const measureOverflow = useCallback(() => {
+    const menu = menuRef.current;
+    if (!menu) {
+      return;
+    }
+    const nextHasOverflow = menu.scrollHeight > menu.clientHeight + 1;
+    // eslint-disable-next-line @eslint-react/set-state-in-effect -- DOM overflow measurement controls whether this menu becomes a scroll container
+    setHasOverflow(current =>
+      current === nextHasOverflow ? current : nextHasOverflow,
+    );
+  }, [menuRef]);
+
+  useIsomorphicLayoutEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    const menu = menuRef.current;
+    if (!menu) {
+      return;
+    }
+    measureOverflow();
+    const resizeObserver =
+      typeof ResizeObserver === 'undefined'
+        ? null
+        : new ResizeObserver(measureOverflow);
+    const mutationObserver =
+      typeof MutationObserver === 'undefined'
+        ? null
+        : new MutationObserver(measureOverflow);
+    resizeObserver?.observe(menu);
+    mutationObserver?.observe(menu, {
+      childList: true,
+      characterData: true,
+      subtree: true,
+    });
+    menu.addEventListener('load', measureOverflow, true);
+    window.addEventListener('resize', measureOverflow);
+    window.visualViewport?.addEventListener('resize', measureOverflow);
+    return () => {
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
+      menu.removeEventListener('load', measureOverflow, true);
+      window.removeEventListener('resize', measureOverflow);
+      window.visualViewport?.removeEventListener('resize', measureOverflow);
+    };
+  }, [isOpen, measureOverflow, menuRef]);
+
+  useIsomorphicLayoutEffect(() => {
+    if (isOpen) {
+      measureOverflow();
+    }
+  }, [content, isOpen, measureOverflow]);
+
+  return hasOverflow;
+}