@react-md/core 1.0.0-next.16 → 1.0.0-next.17

package/dist/menu/Menu.d.ts

@@ -70,7 +70,12 @@ export interface MenuConfigurationProps extends CalculateFixedPositionOptions {
      */
     closeOnResize?: boolean;
     /** @see {@link FixedPositioningOptions.getFixedPositionOptions} */
-    getFixedPositionOptions?(): CalculateFixedPositionOptions;
+    getFixedPositionOptions?: () => CalculateFixedPositionOptions;
+    /**
+     * @defaultValue `false`
+     * @see {@link FixedPositioningOptions.disabled}
+     */
+    disableFixedPositioning?: boolean;
 }
 /**
  * @since 5.1.0
@@ -132,14 +137,14 @@ export interface MenuConvenienceProps extends MenuConfigurationProps {
 /**
  * @since 6.0.0
  */
-export type MenuFixedPositioningOptions = Omit<FixedPositioningOptions<HTMLElement, HTMLDivElement>, "onScroll" | "onResize">;
+export type MenuFixedPositioningOptions = Omit<FixedPositioningOptions<HTMLElement, HTMLDivElement>, "onScroll" | "onResize" | "nodeRef" | "disabled">;
 /**
  * @since 5.0.0
  * @since 6.0.0 Updated to use the latest Menu, Transition, and Portal API.
  */
 export interface MenuProps extends HTMLAttributes<HTMLDivElement>, MenuConfiguration, MenuConfigurationProps, MenuFixedPositioningOptions, MenuOrientationProps, MenuTransitionProps, MenuListConvenienceProps, MenuSheetConvenienceProps {
     visible: boolean;
-    onRequestClose(): void;
+    onRequestClose: () => void;
     /**
      * @defaultValue `"menu-" + useId()`
      */

package/dist/menu/Menu.js

@@ -35,7 +35,7 @@ const noop = ()=>{
  * implementation so that the `MenuRenderer` is no longer required and context
  * menus can appear as a `Sheet`.
  */ export const Menu = /*#__PURE__*/ forwardRef(function Menu(props, propRef) {
-    const { id: propId, style: propStyle, role = "menu", children, horizontal: _horizontal, sheetHeader: _sheetHeader, sheetFooter: _sheetFooter, renderAsSheet: _renderAsSheet, sheetPosition: _sheetPosition, sheetVerticalSize: _sheetVerticalSize, sheetProps, sheetStyle, sheetClassName, menuStyle, menuClassName, disableElevation = false, temporary = true, tabIndex = -1, fixedTo, className, classNames, timeout, appear, enter, exit, onEnter, onEntering = noop, onEntered = noop, onExit, onExiting, onExited = noop, onKeyDown = noop, listProps, listStyle, listClassName, visible, onRequestClose, floating, anchor, closeOnResize = false, closeOnScroll = false, preventScroll = false, vwMargin, vhMargin, xMargin, yMargin, width, transformOrigin = true, preventOverlap, disableSwapping, disableVHBounds, initialX, initialY, getFixedPositionOptions, disablePortal: propDisablePortal, disableTransition, ...remaining } = props;
+    const { id: propId, style: propStyle, role = "menu", children, horizontal: _horizontal, sheetHeader: _sheetHeader, sheetFooter: _sheetFooter, renderAsSheet: _renderAsSheet, sheetPosition: _sheetPosition, sheetVerticalSize: _sheetVerticalSize, sheetProps, sheetStyle, sheetClassName, menuStyle, menuClassName, disableElevation = false, temporary = true, tabIndex = -1, fixedTo, className, classNames, timeout, appear, enter, exit, onEnter, onEntering = noop, onEntered = noop, onExit, onExiting, onExited = noop, onKeyDown = noop, listProps, listStyle, listClassName, visible, onRequestClose, floating, anchor, closeOnResize = false, closeOnScroll = false, preventScroll = false, vwMargin, vhMargin, xMargin, yMargin, width, transformOrigin = true, preventOverlap, disableSwapping, disableVHBounds, initialX, initialY, disableFixedPositioning, getFixedPositionOptions, disablePortal: propDisablePortal, disableTransition, ...remaining } = props;
     const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = props;
     const id = useEnsuredId(propId, "menu");
     const { root, menubar, menuitem, activeId, animatedOnceRef, hoverTimeoutRef, disableHoverMode } = useMenuBarContext();
@@ -127,6 +127,7 @@ const noop = ()=>{
     });
     const { ref, style, callbacks, updateStyle } = useFixedPositioning({
         ...transitionOptions,
+        disabled: disableFixedPositioning,
         onEnter,
         style: isSheet ? propStyle : menuStyle,
         fixedTo,

package/dist/menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/menu/Menu.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n} from \"react\";\nimport { type FloatingActionButtonPosition } from \"../button/FloatingActionButton.js\";\nimport { useFocusContainer } from \"../focus/useFocusContainer.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { type ListElement, type ListProps } from \"../list/List.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { type GetDefaultFocusedIndex } from \"../movement/types.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { type CalculateFixedPositionOptions } from \"../positioning/types.js\";\nimport {\n  useFixedPositioning,\n  type FixedPositioningOptions,\n} from \"../positioning/useFixedPositioning.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n  useScaleTransition,\n  type ScaleTransitionHookOptions,\n} from \"../transition/useScaleTransition.js\";\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport {\n  MenuConfigurationProvider,\n  useMenuConfiguration,\n  type MenuConfiguration,\n  type MenuOrientationProps,\n} from \"./MenuConfigurationProvider.js\";\nimport { MenuSheet, type MenuSheetConvenienceProps } from \"./MenuSheet.js\";\nimport { MenuWidget } from \"./MenuWidget.js\";\nimport { useMenuBarContext } from \"./useMenuBarProvider.js\";\nimport { getDefaultAnchor } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-menu-background-color\"?: string;\n    \"--rmd-menu-color\"?: string;\n    \"--rmd-menu-min-width\"?: string | number;\n    \"--rmd-menu-spacing\"?: string | number;\n  }\n}\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 5.0.0 */\nexport type MenuTransitionProps = Omit<\n  ScaleTransitionHookOptions<HTMLDivElement>,\n  \"transitionIn\" | \"vertical\" | \"nodeRef\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface MenuConfigurationProps extends CalculateFixedPositionOptions {\n  /**\n   * @see {@link ScaleTransitionHookOptions.temporary}\n   * @defaultValue `true`\n   */\n  temporary?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * Boolean if the menu should not gain the elevation styles and should only be\n   * set to `true` when rendering within a `Sheet`.\n   *\n   * @defaultValue `false`\n   */\n  disableElevation?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @see {@link FixedPositioningOptions.transformOrigin}\n   * @defaultValue `true`\n   */\n  transformOrigin?: boolean;\n\n  /**\n   * Boolean if the menu should close if the page is scrolled. The default\n   * behavior is to just update the position of the menu relative to the menu\n   * button until it can no longer be visible within the viewport.\n   *\n   * @defaultValue `false`\n   */\n  closeOnScroll?: boolean;\n\n  /**\n   * Boolean if the page should no longer be scrollable while the menu is\n   * visible.\n   *\n   * @defaultValue `false`\n   */\n  preventScroll?: boolean;\n\n  /**\n   * Boolean if the menu should close instead of repositioning itself if the\n   * browser window is resized.\n   *\n   * @defaultValue `false`\n   */\n  closeOnResize?: boolean;\n\n  /** @see {@link FixedPositioningOptions.getFixedPositionOptions} */\n  getFixedPositionOptions?(): CalculateFixedPositionOptions;\n}\n\n/**\n * @since 5.1.0\n * @since 6.0.0 Renamed from `MenuListProps` to `MenuListConvenienceProps`\n */\nexport interface MenuListConvenienceProps {\n  /**\n   * An optional style to provide to the `List` component that surrounds the\n   * `MenuItem` within a `Menu`.\n   */\n  listStyle?: CSSProperties;\n\n  /**\n   * An optional className to provide to the `List` component that surrounds the\n   * `MenuItem` within a `Menu`.\n   */\n  listClassName?: string;\n\n  /**\n   * Any additional props to pass to the `List` component that surrounds the\n   * `Menu`'s `MenuItem`s.\n   */\n  listProps?: PropsWithRef<Omit<ListProps, \"horizontal\">, ListElement>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface MenuConvenienceProps extends MenuConfigurationProps {\n  /**\n   * This can be used to apply additional props to the `Menu` component.\n   *\n   * Note: You can override the `style` and `className` using\n   * {@link menuStyle} and {@link menuClassName} instead for convenience.\n   *\n   * @example\n   * ```tsx\n   * <DropdownMenu\n   *   {...props}\n   *   menuProps={{\n   *     style: {\n   *       // custom inline style\n   *     },\n   *     className: \"come-class-name\",\n   *     getFixedPositionOptions: () => ({\n   *       preventOverlap: true,\n   *     }),\n   *   }}\n   * />\n   * ```\n   */\n  menuProps?: PropsWithRef<\n    Omit<\n      MenuProps,\n      | \"children\"\n      | \"fixedTo\"\n      | \"visible\"\n      | \"onRequestClose\"\n      | \"getDefaultFocusedIndex\"\n    >,\n    HTMLDivElement\n  >;\n\n  /**\n   * Convenience prop to apply custom style to the `Menu` component.\n   */\n  menuStyle?: CSSProperties;\n\n  /**\n   * Convenience prop to apply custom class name to the `Menu` component.\n   */\n  menuClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport type MenuFixedPositioningOptions = Omit<\n  FixedPositioningOptions<HTMLElement, HTMLDivElement>,\n  \"onScroll\" | \"onResize\"\n>;\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Updated to use the latest Menu, Transition, and Portal API.\n */\nexport interface MenuProps\n  extends HTMLAttributes<HTMLDivElement>,\n    MenuConfiguration,\n    MenuConfigurationProps,\n    MenuFixedPositioningOptions,\n    MenuOrientationProps,\n    MenuTransitionProps,\n    MenuListConvenienceProps,\n    MenuSheetConvenienceProps {\n  visible: boolean;\n  onRequestClose(): void;\n\n  /**\n   * @defaultValue `\"menu-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * This is used to set the default focus index when the menu is visible.\n   *\n   * @internal\n   */\n  getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n\n  /**\n   * Custom style that should be applied to the menu only while not rendered\n   * within a sheet since the {@link style} would be applied to both versions.\n   */\n  menuStyle?: CSSProperties;\n\n  /**\n   * Custom class name that should be applied only while not rendered within a\n   * sheet.\n   */\n  menuClassName?: string;\n\n  /**\n   * @internal\n   *\n   * This is only used to update the default anchor when the DropdownMenu's\n   * toggle is a floating action button.\n   */\n  floating?: FloatingActionButtonPosition;\n}\n\n/**\n * **Client Component**\n *\n * This component should generally only be used to implement context menus with\n * the `useContextMenu` hook. Otherwise, the `DropdownMenu` component should be\n * used.\n *\n * @see The `useContextMenu` hook for an example.\n *\n * @since 5.0.0\n * @since 6.0.0 Updated this component to implement all the `Menu`\n * functionality instead of requiring the `useMenu` hook and `MenuWidget`\n * component. In addition, the `renderAsSheet` behavior has been moved into this\n * implementation so that the `MenuRenderer` is no longer required and context\n * menus can appear as a `Sheet`.\n */\nexport const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(\n  function Menu(props, propRef) {\n    const {\n      id: propId,\n      style: propStyle,\n      role = \"menu\",\n      children,\n      horizontal: _horizontal,\n      sheetHeader: _sheetHeader,\n      sheetFooter: _sheetFooter,\n      renderAsSheet: _renderAsSheet,\n      sheetPosition: _sheetPosition,\n      sheetVerticalSize: _sheetVerticalSize,\n      sheetProps,\n      sheetStyle,\n      sheetClassName,\n      menuStyle,\n      menuClassName,\n      disableElevation = false,\n      temporary = true,\n      tabIndex = -1,\n      fixedTo,\n      className,\n      classNames,\n      timeout,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering = noop,\n      onEntered = noop,\n      onExit,\n      onExiting,\n      onExited = noop,\n      onKeyDown = noop,\n      listProps,\n      listStyle,\n      listClassName,\n      visible,\n      onRequestClose,\n      floating,\n      anchor,\n      closeOnResize = false,\n      closeOnScroll = false,\n      preventScroll = false,\n      vwMargin,\n      vhMargin,\n      xMargin,\n      yMargin,\n      width,\n      transformOrigin = true,\n      preventOverlap,\n      disableSwapping,\n      disableVHBounds,\n      initialX,\n      initialY,\n      getFixedPositionOptions,\n      disablePortal: propDisablePortal,\n      disableTransition,\n      ...remaining\n    } = props;\n    const { \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy } =\n      props;\n\n    const id = useEnsuredId(propId, \"menu\");\n    const {\n      root,\n      menubar,\n      menuitem,\n      activeId,\n      animatedOnceRef,\n      hoverTimeoutRef,\n      disableHoverMode,\n    } = useMenuBarContext();\n    const {\n      horizontal,\n      sheetHeader,\n      sheetFooter,\n      renderAsSheet,\n      sheetPosition,\n      sheetVerticalSize,\n    } = useMenuConfiguration(props);\n    const { isPhone } = useAppSize();\n    const isSheet =\n      renderAsSheet === true || (renderAsSheet === \"phone\" && isPhone);\n\n    const entered = useRef(false);\n    const cancelUnmountFocus = useRef(false);\n    const hideWithoutRefocus = (): void => {\n      cancelUnmountFocus.current = true;\n      onRequestClose();\n    };\n    const mode = useUserInteractionMode();\n    const mouse = mode === \"mouse\";\n\n    const { eventHandlers, transitionOptions } = useFocusContainer({\n      nodeRef: propRef,\n      activate: visible,\n      onKeyDown(event) {\n        onKeyDown(event);\n\n        // when a menu is within a sheet, it should not trigger the custom\n        // keyboard behavior\n        if (isSheet) {\n          return;\n        }\n\n        switch (event.key) {\n          case \"Escape\":\n            // prevent parent components that have an \"Escape\" keypress event\n            // from being triggered as well\n            event.stopPropagation();\n            disableHoverMode();\n            onRequestClose();\n            break;\n          case \"Tab\":\n            // since menus are portalled, tab index is kinda broke so just close\n            // the menu instead of doing default tab behavior\n            event.preventDefault();\n\n            if (!menuitem) {\n              // pressing the tab key should still cascade close all menus\n              event.stopPropagation();\n            }\n            disableHoverMode();\n            onRequestClose();\n            break;\n          case \"ArrowUp\":\n            if (!root && menuitem && horizontal) {\n              event.stopPropagation();\n              event.preventDefault();\n              onRequestClose();\n            }\n            break;\n          case \"ArrowLeft\":\n            if (!root && menuitem && !horizontal) {\n              event.stopPropagation();\n              event.preventDefault();\n              onRequestClose();\n            }\n            break;\n        }\n      },\n      onEntering(appearing) {\n        onEntering(appearing);\n        entered.current = true;\n      },\n      onEntered(appearing) {\n        onEntered(appearing);\n        entered.current = true;\n        cancelUnmountFocus.current = false;\n        animatedOnceRef.current = true;\n      },\n      onExited() {\n        onExited();\n        entered.current = false;\n      },\n      onExiting,\n      disableTransition,\n      isFocusTypeDisabled(type) {\n        if (role === \"listbox\") {\n          return !isSheet;\n        }\n\n        if (type === \"keyboard\") {\n          return isSheet;\n        }\n\n        const isHoverDisabled = mouse && hoverTimeoutRef.current === 0;\n        if (type === \"mount\") {\n          return isHoverDisabled;\n        }\n\n        return (\n          isHoverDisabled ||\n          cancelUnmountFocus.current ||\n          (root && !!activeId && id !== activeId)\n        );\n      },\n    });\n\n    const { ref, style, callbacks, updateStyle } = useFixedPositioning({\n      ...transitionOptions,\n      onEnter,\n      style: isSheet ? propStyle : menuStyle,\n      fixedTo,\n      anchor: getDefaultAnchor({\n        anchor,\n        menubar,\n        floating,\n        menuitem: !root && menuitem,\n        horizontal,\n      }),\n      vwMargin,\n      vhMargin,\n      xMargin,\n      yMargin,\n      width,\n      transformOrigin,\n      preventOverlap,\n      disableSwapping,\n      disableVHBounds,\n      initialX,\n      initialY,\n      getFixedPositionOptions,\n      onResize: closeOnResize ? hideWithoutRefocus : undefined,\n      onScroll(_event, data) {\n        if (!data.visible || closeOnScroll) {\n          hideWithoutRefocus();\n        }\n      },\n    });\n    const { rendered, disablePortal, elementProps } = useScaleTransition({\n      nodeRef: ref,\n      className: cnb(!isSheet && menuClassName, className),\n      transitionIn: visible,\n      vertical: !horizontal,\n      temporary,\n      timeout: isSheet || disableTransition ? 0 : timeout,\n      classNames,\n      appear,\n      enter,\n      exit,\n      onExit,\n      onExiting: transitionOptions.onExiting,\n      exitedHidden: true,\n      ...callbacks,\n    });\n    useScrollLock(visible && preventScroll);\n\n    // need to make sure that the useEffect does not refire for hiding on click\n    // events because of the `window.requestAnimationFrame`. It'll make it so\n    // that menu items that update state are unable to close when clicked\n    const hide = useRef(onRequestClose);\n    useEffect(() => {\n      hide.current = onRequestClose;\n    });\n    useEffect(() => {\n      if (!visible) {\n        return;\n      }\n\n      const callback = (event: globalThis.MouseEvent): void => {\n        // this is required for when the transition is disabled\n        if (!entered.current) {\n          return;\n        }\n\n        // if the user clicks outside of the menu to close it, the toggle button\n        // should not be focused. instead the nearest focusable element from the\n        // click event should be focused when Tab or Shift + tab is pressed\n        cancelUnmountFocus.current =\n          !(event.target instanceof HTMLElement) ||\n          !event.target.closest(`[role=\"${role}\"]`);\n\n        // this won't be called if `event.stopPropagation()` is called\n        hide.current();\n        disableHoverMode();\n      };\n\n      // wait an animation frame so the initial click event that caused the menu\n      // to become visible does not immediately close the menu\n      const frame = window.requestAnimationFrame(() => {\n        window.addEventListener(\"click\", callback);\n      });\n\n      return () => {\n        window.cancelAnimationFrame(frame);\n        window.removeEventListener(\"click\", callback);\n      };\n    }, [disableHoverMode, role, visible]);\n    useIsomorphicLayoutEffect(() => {\n      if (!visible) {\n        return;\n      }\n\n      updateStyle();\n    }, [updateStyle, children, visible]);\n\n    return (\n      <MenuConfigurationProvider\n        horizontal={horizontal}\n        renderAsSheet={renderAsSheet}\n        sheetFooter={sheetFooter}\n        sheetHeader={sheetHeader}\n        sheetPosition={sheetPosition}\n        sheetVerticalSize={sheetVerticalSize}\n      >\n        <MenuSheet\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy as string}\n          header={sheetHeader}\n          footer={sheetFooter}\n          position={sheetPosition}\n          verticalSize={sheetVerticalSize}\n          visible={visible}\n          enabled={isSheet}\n          onRequestClose={onRequestClose}\n          style={sheetStyle}\n          className={sheetClassName}\n          disablePortal={propDisablePortal}\n          temporary={temporary}\n          disableTransition={disableTransition}\n          {...sheetProps}\n        >\n          <Portal disabled={isSheet || (propDisablePortal ?? disablePortal)}>\n            {(rendered || isSheet) && (\n              <MenuWidget\n                {...remaining}\n                {...elementProps}\n                {...eventHandlers}\n                id={id}\n                role={role}\n                style={isSheet ? propStyle : style}\n                isSheet={isSheet}\n                tabIndex={tabIndex}\n                horizontal={horizontal}\n                listProps={listProps}\n                listStyle={listStyle}\n                listClassName={listClassName}\n                disableElevation={disableElevation}\n                cancelUnmountFocus={cancelUnmountFocus}\n              >\n                {children}\n              </MenuWidget>\n            )}\n          </Portal>\n        </MenuSheet>\n      </MenuConfigurationProvider>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useEffect","useRef","useFocusContainer","useUserInteractionMode","useAppSize","Portal","useFixedPositioning","useScrollLock","useScaleTransition","useEnsuredId","useIsomorphicLayoutEffect","MenuConfigurationProvider","useMenuConfiguration","MenuSheet","MenuWidget","useMenuBarContext","getDefaultAnchor","noop","Menu","props","propRef","id","propId","style","propStyle","role","children","horizontal","_horizontal","sheetHeader","_sheetHeader","sheetFooter","_sheetFooter","renderAsSheet","_renderAsSheet","sheetPosition","_sheetPosition","sheetVerticalSize","_sheetVerticalSize","sheetProps","sheetStyle","sheetClassName","menuStyle","menuClassName","disableElevation","temporary","tabIndex","fixedTo","className","classNames","timeout","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","onKeyDown","listProps","listStyle","listClassName","visible","onRequestClose","floating","anchor","closeOnResize","closeOnScroll","preventScroll","vwMargin","vhMargin","xMargin","yMargin","width","transformOrigin","preventOverlap","disableSwapping","disableVHBounds","initialX","initialY","getFixedPositionOptions","disablePortal","propDisablePortal","disableTransition","remaining","ariaLabel","ariaLabelledBy","root","menubar","menuitem","activeId","animatedOnceRef","hoverTimeoutRef","disableHoverMode","isPhone","isSheet","entered","cancelUnmountFocus","hideWithoutRefocus","current","mode","mouse","eventHandlers","transitionOptions","nodeRef","activate","event","key","stopPropagation","preventDefault","appearing","isFocusTypeDisabled","type","isHoverDisabled","ref","callbacks","updateStyle","onResize","undefined","onScroll","_event","data","rendered","elementProps","transitionIn","vertical","exitedHidden","hide","callback","target","HTMLElement","closest","frame","window","requestAnimationFrame","addEventListener","cancelAnimationFrame","removeEventListener","aria-label","aria-labelledby","header","footer","position","verticalSize","enabled","disabled"],"mappings":"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"}
+{"version":3,"sources":["../../src/menu/Menu.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n} from \"react\";\nimport { type FloatingActionButtonPosition } from \"../button/FloatingActionButton.js\";\nimport { useFocusContainer } from \"../focus/useFocusContainer.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { type ListElement, type ListProps } from \"../list/List.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { type GetDefaultFocusedIndex } from \"../movement/types.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { type CalculateFixedPositionOptions } from \"../positioning/types.js\";\nimport {\n  useFixedPositioning,\n  type FixedPositioningOptions,\n} from \"../positioning/useFixedPositioning.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n  useScaleTransition,\n  type ScaleTransitionHookOptions,\n} from \"../transition/useScaleTransition.js\";\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport {\n  MenuConfigurationProvider,\n  useMenuConfiguration,\n  type MenuConfiguration,\n  type MenuOrientationProps,\n} from \"./MenuConfigurationProvider.js\";\nimport { MenuSheet, type MenuSheetConvenienceProps } from \"./MenuSheet.js\";\nimport { MenuWidget } from \"./MenuWidget.js\";\nimport { useMenuBarContext } from \"./useMenuBarProvider.js\";\nimport { getDefaultAnchor } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-menu-background-color\"?: string;\n    \"--rmd-menu-color\"?: string;\n    \"--rmd-menu-min-width\"?: string | number;\n    \"--rmd-menu-spacing\"?: string | number;\n  }\n}\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 5.0.0 */\nexport type MenuTransitionProps = Omit<\n  ScaleTransitionHookOptions<HTMLDivElement>,\n  \"transitionIn\" | \"vertical\" | \"nodeRef\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface MenuConfigurationProps extends CalculateFixedPositionOptions {\n  /**\n   * @see {@link ScaleTransitionHookOptions.temporary}\n   * @defaultValue `true`\n   */\n  temporary?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * Boolean if the menu should not gain the elevation styles and should only be\n   * set to `true` when rendering within a `Sheet`.\n   *\n   * @defaultValue `false`\n   */\n  disableElevation?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @see {@link FixedPositioningOptions.transformOrigin}\n   * @defaultValue `true`\n   */\n  transformOrigin?: boolean;\n\n  /**\n   * Boolean if the menu should close if the page is scrolled. The default\n   * behavior is to just update the position of the menu relative to the menu\n   * button until it can no longer be visible within the viewport.\n   *\n   * @defaultValue `false`\n   */\n  closeOnScroll?: boolean;\n\n  /**\n   * Boolean if the page should no longer be scrollable while the menu is\n   * visible.\n   *\n   * @defaultValue `false`\n   */\n  preventScroll?: boolean;\n\n  /**\n   * Boolean if the menu should close instead of repositioning itself if the\n   * browser window is resized.\n   *\n   * @defaultValue `false`\n   */\n  closeOnResize?: boolean;\n\n  /** @see {@link FixedPositioningOptions.getFixedPositionOptions} */\n  getFixedPositionOptions?: () => CalculateFixedPositionOptions;\n\n  /**\n   * @defaultValue `false`\n   * @see {@link FixedPositioningOptions.disabled}\n   */\n  disableFixedPositioning?: boolean;\n}\n\n/**\n * @since 5.1.0\n * @since 6.0.0 Renamed from `MenuListProps` to `MenuListConvenienceProps`\n */\nexport interface MenuListConvenienceProps {\n  /**\n   * An optional style to provide to the `List` component that surrounds the\n   * `MenuItem` within a `Menu`.\n   */\n  listStyle?: CSSProperties;\n\n  /**\n   * An optional className to provide to the `List` component that surrounds the\n   * `MenuItem` within a `Menu`.\n   */\n  listClassName?: string;\n\n  /**\n   * Any additional props to pass to the `List` component that surrounds the\n   * `Menu`'s `MenuItem`s.\n   */\n  listProps?: PropsWithRef<Omit<ListProps, \"horizontal\">, ListElement>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface MenuConvenienceProps extends MenuConfigurationProps {\n  /**\n   * This can be used to apply additional props to the `Menu` component.\n   *\n   * Note: You can override the `style` and `className` using\n   * {@link menuStyle} and {@link menuClassName} instead for convenience.\n   *\n   * @example\n   * ```tsx\n   * <DropdownMenu\n   *   {...props}\n   *   menuProps={{\n   *     style: {\n   *       // custom inline style\n   *     },\n   *     className: \"come-class-name\",\n   *     getFixedPositionOptions: () => ({\n   *       preventOverlap: true,\n   *     }),\n   *   }}\n   * />\n   * ```\n   */\n  menuProps?: PropsWithRef<\n    Omit<\n      MenuProps,\n      | \"children\"\n      | \"fixedTo\"\n      | \"visible\"\n      | \"onRequestClose\"\n      | \"getDefaultFocusedIndex\"\n    >,\n    HTMLDivElement\n  >;\n\n  /**\n   * Convenience prop to apply custom style to the `Menu` component.\n   */\n  menuStyle?: CSSProperties;\n\n  /**\n   * Convenience prop to apply custom class name to the `Menu` component.\n   */\n  menuClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport type MenuFixedPositioningOptions = Omit<\n  FixedPositioningOptions<HTMLElement, HTMLDivElement>,\n  \"onScroll\" | \"onResize\" | \"nodeRef\" | \"disabled\"\n>;\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Updated to use the latest Menu, Transition, and Portal API.\n */\nexport interface MenuProps\n  extends HTMLAttributes<HTMLDivElement>,\n    MenuConfiguration,\n    MenuConfigurationProps,\n    MenuFixedPositioningOptions,\n    MenuOrientationProps,\n    MenuTransitionProps,\n    MenuListConvenienceProps,\n    MenuSheetConvenienceProps {\n  visible: boolean;\n  onRequestClose: () => void;\n\n  /**\n   * @defaultValue `\"menu-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * This is used to set the default focus index when the menu is visible.\n   *\n   * @internal\n   */\n  getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n\n  /**\n   * Custom style that should be applied to the menu only while not rendered\n   * within a sheet since the {@link style} would be applied to both versions.\n   */\n  menuStyle?: CSSProperties;\n\n  /**\n   * Custom class name that should be applied only while not rendered within a\n   * sheet.\n   */\n  menuClassName?: string;\n\n  /**\n   * @internal\n   *\n   * This is only used to update the default anchor when the DropdownMenu's\n   * toggle is a floating action button.\n   */\n  floating?: FloatingActionButtonPosition;\n}\n\n/**\n * **Client Component**\n *\n * This component should generally only be used to implement context menus with\n * the `useContextMenu` hook. Otherwise, the `DropdownMenu` component should be\n * used.\n *\n * @see The `useContextMenu` hook for an example.\n *\n * @since 5.0.0\n * @since 6.0.0 Updated this component to implement all the `Menu`\n * functionality instead of requiring the `useMenu` hook and `MenuWidget`\n * component. In addition, the `renderAsSheet` behavior has been moved into this\n * implementation so that the `MenuRenderer` is no longer required and context\n * menus can appear as a `Sheet`.\n */\nexport const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(\n  function Menu(props, propRef) {\n    const {\n      id: propId,\n      style: propStyle,\n      role = \"menu\",\n      children,\n      horizontal: _horizontal,\n      sheetHeader: _sheetHeader,\n      sheetFooter: _sheetFooter,\n      renderAsSheet: _renderAsSheet,\n      sheetPosition: _sheetPosition,\n      sheetVerticalSize: _sheetVerticalSize,\n      sheetProps,\n      sheetStyle,\n      sheetClassName,\n      menuStyle,\n      menuClassName,\n      disableElevation = false,\n      temporary = true,\n      tabIndex = -1,\n      fixedTo,\n      className,\n      classNames,\n      timeout,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering = noop,\n      onEntered = noop,\n      onExit,\n      onExiting,\n      onExited = noop,\n      onKeyDown = noop,\n      listProps,\n      listStyle,\n      listClassName,\n      visible,\n      onRequestClose,\n      floating,\n      anchor,\n      closeOnResize = false,\n      closeOnScroll = false,\n      preventScroll = false,\n      vwMargin,\n      vhMargin,\n      xMargin,\n      yMargin,\n      width,\n      transformOrigin = true,\n      preventOverlap,\n      disableSwapping,\n      disableVHBounds,\n      initialX,\n      initialY,\n      disableFixedPositioning,\n      getFixedPositionOptions,\n      disablePortal: propDisablePortal,\n      disableTransition,\n      ...remaining\n    } = props;\n    const { \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy } =\n      props;\n\n    const id = useEnsuredId(propId, \"menu\");\n    const {\n      root,\n      menubar,\n      menuitem,\n      activeId,\n      animatedOnceRef,\n      hoverTimeoutRef,\n      disableHoverMode,\n    } = useMenuBarContext();\n    const {\n      horizontal,\n      sheetHeader,\n      sheetFooter,\n      renderAsSheet,\n      sheetPosition,\n      sheetVerticalSize,\n    } = useMenuConfiguration(props);\n    const { isPhone } = useAppSize();\n    const isSheet =\n      renderAsSheet === true || (renderAsSheet === \"phone\" && isPhone);\n\n    const entered = useRef(false);\n    const cancelUnmountFocus = useRef(false);\n    const hideWithoutRefocus = (): void => {\n      cancelUnmountFocus.current = true;\n      onRequestClose();\n    };\n    const mode = useUserInteractionMode();\n    const mouse = mode === \"mouse\";\n\n    const { eventHandlers, transitionOptions } = useFocusContainer({\n      nodeRef: propRef,\n      activate: visible,\n      onKeyDown(event) {\n        onKeyDown(event);\n\n        // when a menu is within a sheet, it should not trigger the custom\n        // keyboard behavior\n        if (isSheet) {\n          return;\n        }\n\n        switch (event.key) {\n          case \"Escape\":\n            // prevent parent components that have an \"Escape\" keypress event\n            // from being triggered as well\n            event.stopPropagation();\n            disableHoverMode();\n            onRequestClose();\n            break;\n          case \"Tab\":\n            // since menus are portalled, tab index is kinda broke so just close\n            // the menu instead of doing default tab behavior\n            event.preventDefault();\n\n            if (!menuitem) {\n              // pressing the tab key should still cascade close all menus\n              event.stopPropagation();\n            }\n            disableHoverMode();\n            onRequestClose();\n            break;\n          case \"ArrowUp\":\n            if (!root && menuitem && horizontal) {\n              event.stopPropagation();\n              event.preventDefault();\n              onRequestClose();\n            }\n            break;\n          case \"ArrowLeft\":\n            if (!root && menuitem && !horizontal) {\n              event.stopPropagation();\n              event.preventDefault();\n              onRequestClose();\n            }\n            break;\n        }\n      },\n      onEntering(appearing) {\n        onEntering(appearing);\n        entered.current = true;\n      },\n      onEntered(appearing) {\n        onEntered(appearing);\n        entered.current = true;\n        cancelUnmountFocus.current = false;\n        animatedOnceRef.current = true;\n      },\n      onExited() {\n        onExited();\n        entered.current = false;\n      },\n      onExiting,\n      disableTransition,\n      isFocusTypeDisabled(type) {\n        if (role === \"listbox\") {\n          return !isSheet;\n        }\n\n        if (type === \"keyboard\") {\n          return isSheet;\n        }\n\n        const isHoverDisabled = mouse && hoverTimeoutRef.current === 0;\n        if (type === \"mount\") {\n          return isHoverDisabled;\n        }\n\n        return (\n          isHoverDisabled ||\n          cancelUnmountFocus.current ||\n          (root && !!activeId && id !== activeId)\n        );\n      },\n    });\n\n    const { ref, style, callbacks, updateStyle } = useFixedPositioning({\n      ...transitionOptions,\n      disabled: disableFixedPositioning,\n      onEnter,\n      style: isSheet ? propStyle : menuStyle,\n      fixedTo,\n      anchor: getDefaultAnchor({\n        anchor,\n        menubar,\n        floating,\n        menuitem: !root && menuitem,\n        horizontal,\n      }),\n      vwMargin,\n      vhMargin,\n      xMargin,\n      yMargin,\n      width,\n      transformOrigin,\n      preventOverlap,\n      disableSwapping,\n      disableVHBounds,\n      initialX,\n      initialY,\n      getFixedPositionOptions,\n      onResize: closeOnResize ? hideWithoutRefocus : undefined,\n      onScroll(_event, data) {\n        if (!data.visible || closeOnScroll) {\n          hideWithoutRefocus();\n        }\n      },\n    });\n    const { rendered, disablePortal, elementProps } = useScaleTransition({\n      nodeRef: ref,\n      className: cnb(!isSheet && menuClassName, className),\n      transitionIn: visible,\n      vertical: !horizontal,\n      temporary,\n      timeout: isSheet || disableTransition ? 0 : timeout,\n      classNames,\n      appear,\n      enter,\n      exit,\n      onExit,\n      onExiting: transitionOptions.onExiting,\n      exitedHidden: true,\n      ...callbacks,\n    });\n    useScrollLock(visible && preventScroll);\n\n    // need to make sure that the useEffect does not refire for hiding on click\n    // events because of the `window.requestAnimationFrame`. It'll make it so\n    // that menu items that update state are unable to close when clicked\n    const hide = useRef(onRequestClose);\n    useEffect(() => {\n      hide.current = onRequestClose;\n    });\n    useEffect(() => {\n      if (!visible) {\n        return;\n      }\n\n      const callback = (event: globalThis.MouseEvent): void => {\n        // this is required for when the transition is disabled\n        if (!entered.current) {\n          return;\n        }\n\n        // if the user clicks outside of the menu to close it, the toggle button\n        // should not be focused. instead the nearest focusable element from the\n        // click event should be focused when Tab or Shift + tab is pressed\n        cancelUnmountFocus.current =\n          !(event.target instanceof HTMLElement) ||\n          !event.target.closest(`[role=\"${role}\"]`);\n\n        // this won't be called if `event.stopPropagation()` is called\n        hide.current();\n        disableHoverMode();\n      };\n\n      // wait an animation frame so the initial click event that caused the menu\n      // to become visible does not immediately close the menu\n      const frame = window.requestAnimationFrame(() => {\n        window.addEventListener(\"click\", callback);\n      });\n\n      return () => {\n        window.cancelAnimationFrame(frame);\n        window.removeEventListener(\"click\", callback);\n      };\n    }, [disableHoverMode, role, visible]);\n    useIsomorphicLayoutEffect(() => {\n      if (!visible) {\n        return;\n      }\n\n      updateStyle();\n    }, [updateStyle, children, visible]);\n\n    return (\n      <MenuConfigurationProvider\n        horizontal={horizontal}\n        renderAsSheet={renderAsSheet}\n        sheetFooter={sheetFooter}\n        sheetHeader={sheetHeader}\n        sheetPosition={sheetPosition}\n        sheetVerticalSize={sheetVerticalSize}\n      >\n        <MenuSheet\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy as string}\n          header={sheetHeader}\n          footer={sheetFooter}\n          position={sheetPosition}\n          verticalSize={sheetVerticalSize}\n          visible={visible}\n          enabled={isSheet}\n          onRequestClose={onRequestClose}\n          style={sheetStyle}\n          className={sheetClassName}\n          disablePortal={propDisablePortal}\n          temporary={temporary}\n          disableTransition={disableTransition}\n          {...sheetProps}\n        >\n          <Portal disabled={isSheet || (propDisablePortal ?? disablePortal)}>\n            {(rendered || isSheet) && (\n              <MenuWidget\n                {...remaining}\n                {...elementProps}\n                {...eventHandlers}\n                id={id}\n                role={role}\n                style={isSheet ? propStyle : style}\n                isSheet={isSheet}\n                tabIndex={tabIndex}\n                horizontal={horizontal}\n                listProps={listProps}\n                listStyle={listStyle}\n                listClassName={listClassName}\n                disableElevation={disableElevation}\n                cancelUnmountFocus={cancelUnmountFocus}\n              >\n                {children}\n              </MenuWidget>\n            )}\n          </Portal>\n        </MenuSheet>\n      </MenuConfigurationProvider>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useEffect","useRef","useFocusContainer","useUserInteractionMode","useAppSize","Portal","useFixedPositioning","useScrollLock","useScaleTransition","useEnsuredId","useIsomorphicLayoutEffect","MenuConfigurationProvider","useMenuConfiguration","MenuSheet","MenuWidget","useMenuBarContext","getDefaultAnchor","noop","Menu","props","propRef","id","propId","style","propStyle","role","children","horizontal","_horizontal","sheetHeader","_sheetHeader","sheetFooter","_sheetFooter","renderAsSheet","_renderAsSheet","sheetPosition","_sheetPosition","sheetVerticalSize","_sheetVerticalSize","sheetProps","sheetStyle","sheetClassName","menuStyle","menuClassName","disableElevation","temporary","tabIndex","fixedTo","className","classNames","timeout","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","onKeyDown","listProps","listStyle","listClassName","visible","onRequestClose","floating","anchor","closeOnResize","closeOnScroll","preventScroll","vwMargin","vhMargin","xMargin","yMargin","width","transformOrigin","preventOverlap","disableSwapping","disableVHBounds","initialX","initialY","disableFixedPositioning","getFixedPositionOptions","disablePortal","propDisablePortal","disableTransition","remaining","ariaLabel","ariaLabelledBy","root","menubar","menuitem","activeId","animatedOnceRef","hoverTimeoutRef","disableHoverMode","isPhone","isSheet","entered","cancelUnmountFocus","hideWithoutRefocus","current","mode","mouse","eventHandlers","transitionOptions","nodeRef","activate","event","key","stopPropagation","preventDefault","appearing","isFocusTypeDisabled","type","isHoverDisabled","ref","callbacks","updateStyle","disabled","onResize","undefined","onScroll","_event","data","rendered","elementProps","transitionIn","vertical","exitedHidden","hide","callback","target","HTMLElement","closest","frame","window","requestAnimationFrame","addEventListener","cancelAnimationFrame","removeEventListener","aria-label","aria-labelledby","header","footer","position","verticalSize","enabled"],"mappings":"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"}

package/dist/menu/MenuItemButton.js

@@ -23,7 +23,7 @@ const noop = ()=>{
  * @internal
  * @since 5.0.0
  */ export const MenuItemButton = /*#__PURE__*/ forwardRef(function MenuItemButton(props, ref) {
-    const { id: propId, children, onClick = noop, onKeyDown = noop, onMouseEnter = noop, onMouseLeave = noop, rightAddon: propRightAddon, iconRotatorProps, disableDropdownIcon = typeof propRightAddon !== "undefined", ...remaining } = props;
+    const { id: propId, children, height: propHeight, onClick = noop, onKeyDown = noop, onMouseEnter = noop, onMouseLeave = noop, rightAddon: propRightAddon, iconRotatorProps, disableDropdownIcon = typeof propRightAddon !== "undefined", ...remaining } = props;
     const { disabled } = props;
     const id = useEnsuredId(propId, "menuitem");
     const mode = useUserInteractionMode();
@@ -51,9 +51,13 @@ const noop = ()=>{
         menubar,
         setVisible
     ]);
-    const dropdownIcon = getIcon(root ? "dropdown" : "forward");
+    let height = propHeight;
     let rightAddon = propRightAddon;
+    const dropdownIcon = getIcon(root ? "dropdown" : "forward");
     if (!disableDropdownIcon) {
+        if (!height && !props.leftAddon) {
+            height = "normal";
+        }
         rightAddon = /*#__PURE__*/ _jsx(IconRotator, {
             ...iconRotatorProps,
             rotated: visible,

package/dist/menu/MenuItemButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/menu/MenuItemButton.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, useEffect } from \"react\";\nimport { useHoverMode } from \"../hoverMode/useHoverMode.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { type BaseMenuButtonProps } from \"./MenuButton.js\";\nimport { useMenuConfiguration } from \"./MenuConfigurationProvider.js\";\nimport { MenuItem, type MenuItemProps } from \"./MenuItem.js\";\nimport { useMenuVisibility } from \"./MenuVisibilityProvider.js\";\nimport { useMenuBarContext } from \"./useMenuBarProvider.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @internal\n * @since 5.0.0\n */\nexport interface MenuItemButtonProps\n  extends BaseMenuButtonProps,\n    MenuItemProps {}\n\n/**\n * **Client Component**\n *\n * This is just an internal component that handles rendering a submenu as a\n * menuitem for a `DropdownMenu` with a conditional dropdown icon.\n *\n * @internal\n * @since 5.0.0\n */\nexport const MenuItemButton = forwardRef<HTMLLIElement, MenuItemButtonProps>(\n  function MenuItemButton(props, ref) {\n    const {\n      id: propId,\n      children,\n      onClick = noop,\n      onKeyDown = noop,\n      onMouseEnter = noop,\n      onMouseLeave = noop,\n      rightAddon: propRightAddon,\n      iconRotatorProps,\n      disableDropdownIcon = typeof propRightAddon !== \"undefined\",\n      ...remaining\n    } = props;\n    const { disabled } = props;\n\n    const id = useEnsuredId(propId, \"menuitem\");\n    const mode = useUserInteractionMode();\n    const { renderAsSheet } = useMenuConfiguration();\n    const { isPhone } = useAppSize();\n    const isSheet =\n      renderAsSheet === true || (renderAsSheet === \"phone\" && isPhone);\n    const {\n      root,\n      menubar,\n      activeId,\n      enableHoverMode,\n      disableHoverMode,\n      startDisableTimer,\n      clearDisableTimer,\n      leaveTimeoutRef,\n      hoverTimeoutRef,\n    } = useMenuBarContext();\n    const { visible, setVisible, defaultFocusIndex } = useMenuVisibility();\n    const { startShowFlow, clearVisibilityTimeout } = useHoverMode({\n      setVisible,\n      enableHoverMode,\n      disableHoverMode,\n      startDisableTimer,\n      leaveTimeoutRef,\n      hoverTimeoutRef,\n      clearDisableTimer,\n    });\n    const { horizontal } = useMenuConfiguration();\n\n    useEffect(() => {\n      setVisible(id === activeId);\n    }, [activeId, defaultFocusIndex, id, menubar, setVisible]);\n\n    const dropdownIcon = getIcon(root ? \"dropdown\" : \"forward\");\n    let rightAddon = propRightAddon;\n    if (!disableDropdownIcon) {\n      rightAddon = (\n        <IconRotator {...iconRotatorProps} rotated={visible}>\n          {dropdownIcon}\n        </IconRotator>\n      );\n    }\n\n    const updateVisibility = (nextVisible: boolean, focusIndex = 0): void => {\n      defaultFocusIndex.current = focusIndex;\n      setVisible(nextVisible);\n      if (!menubar) {\n        return;\n      }\n\n      if (nextVisible) {\n        enableHoverMode(id);\n      } else {\n        disableHoverMode();\n      }\n    };\n\n    return (\n      <MenuItem\n        {...remaining}\n        aria-haspopup={isSheet ? \"dialog\" : \"menu\"}\n        aria-expanded={visible || undefined}\n        id={id}\n        ref={ref}\n        rightAddon={rightAddon}\n        onClick={(event) => {\n          onClick(event);\n\n          event.stopPropagation();\n          updateVisibility(!visible);\n        }}\n        onKeyDown={(event) => {\n          onKeyDown(event);\n\n          switch (event.key) {\n            case \"ArrowDown\":\n              if (horizontal || root) {\n                event.preventDefault();\n                event.stopPropagation();\n                updateVisibility(true);\n              }\n              break;\n            case \"ArrowRight\":\n              if (!horizontal && !root) {\n                event.preventDefault();\n                event.stopPropagation();\n                updateVisibility(true);\n              }\n              break;\n          }\n        }}\n        onMouseEnter={(event) => {\n          onMouseEnter(event);\n          if (mode === \"touch\" || disabled || !menubar) {\n            return;\n          }\n\n          defaultFocusIndex.current = 0;\n          startShowFlow(id);\n        }}\n        onMouseLeave={(event) => {\n          onMouseLeave(event);\n          if (mode === \"touch\" || disabled || !menubar) {\n            return;\n          }\n\n          clearVisibilityTimeout();\n        }}\n      >\n        {children}\n      </MenuItem>\n    );\n  }\n);\n"],"names":["forwardRef","useEffect","useHoverMode","IconRotator","getIcon","useUserInteractionMode","useAppSize","useEnsuredId","useMenuConfiguration","MenuItem","useMenuVisibility","useMenuBarContext","noop","MenuItemButton","props","ref","id","propId","children","onClick","onKeyDown","onMouseEnter","onMouseLeave","rightAddon","propRightAddon","iconRotatorProps","disableDropdownIcon","remaining","disabled","mode","renderAsSheet","isPhone","isSheet","root","menubar","activeId","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","leaveTimeoutRef","hoverTimeoutRef","visible","setVisible","defaultFocusIndex","startShowFlow","clearVisibilityTimeout","horizontal","dropdownIcon","rotated","updateVisibility","nextVisible","focusIndex","current","aria-haspopup","aria-expanded","undefined","event","stopPropagation","key","preventDefault"],"mappings":"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"}
+{"version":3,"sources":["../../src/menu/MenuItemButton.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, useEffect } from \"react\";\nimport { useHoverMode } from \"../hoverMode/useHoverMode.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { type BaseMenuButtonProps } from \"./MenuButton.js\";\nimport { useMenuConfiguration } from \"./MenuConfigurationProvider.js\";\nimport { MenuItem, type MenuItemProps } from \"./MenuItem.js\";\nimport { useMenuVisibility } from \"./MenuVisibilityProvider.js\";\nimport { useMenuBarContext } from \"./useMenuBarProvider.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @internal\n * @since 5.0.0\n */\nexport interface MenuItemButtonProps\n  extends BaseMenuButtonProps,\n    MenuItemProps {}\n\n/**\n * **Client Component**\n *\n * This is just an internal component that handles rendering a submenu as a\n * menuitem for a `DropdownMenu` with a conditional dropdown icon.\n *\n * @internal\n * @since 5.0.0\n */\nexport const MenuItemButton = forwardRef<HTMLLIElement, MenuItemButtonProps>(\n  function MenuItemButton(props, ref) {\n    const {\n      id: propId,\n      children,\n      height: propHeight,\n      onClick = noop,\n      onKeyDown = noop,\n      onMouseEnter = noop,\n      onMouseLeave = noop,\n      rightAddon: propRightAddon,\n      iconRotatorProps,\n      disableDropdownIcon = typeof propRightAddon !== \"undefined\",\n      ...remaining\n    } = props;\n    const { disabled } = props;\n\n    const id = useEnsuredId(propId, \"menuitem\");\n    const mode = useUserInteractionMode();\n    const { renderAsSheet } = useMenuConfiguration();\n    const { isPhone } = useAppSize();\n    const isSheet =\n      renderAsSheet === true || (renderAsSheet === \"phone\" && isPhone);\n    const {\n      root,\n      menubar,\n      activeId,\n      enableHoverMode,\n      disableHoverMode,\n      startDisableTimer,\n      clearDisableTimer,\n      leaveTimeoutRef,\n      hoverTimeoutRef,\n    } = useMenuBarContext();\n    const { visible, setVisible, defaultFocusIndex } = useMenuVisibility();\n    const { startShowFlow, clearVisibilityTimeout } = useHoverMode({\n      setVisible,\n      enableHoverMode,\n      disableHoverMode,\n      startDisableTimer,\n      leaveTimeoutRef,\n      hoverTimeoutRef,\n      clearDisableTimer,\n    });\n    const { horizontal } = useMenuConfiguration();\n\n    useEffect(() => {\n      setVisible(id === activeId);\n    }, [activeId, defaultFocusIndex, id, menubar, setVisible]);\n\n    let height = propHeight;\n    let rightAddon = propRightAddon;\n    const dropdownIcon = getIcon(root ? \"dropdown\" : \"forward\");\n    if (!disableDropdownIcon) {\n      if (!height && !props.leftAddon) {\n        height = \"normal\";\n      }\n\n      rightAddon = (\n        <IconRotator {...iconRotatorProps} rotated={visible}>\n          {dropdownIcon}\n        </IconRotator>\n      );\n    }\n\n    const updateVisibility = (nextVisible: boolean, focusIndex = 0): void => {\n      defaultFocusIndex.current = focusIndex;\n      setVisible(nextVisible);\n      if (!menubar) {\n        return;\n      }\n\n      if (nextVisible) {\n        enableHoverMode(id);\n      } else {\n        disableHoverMode();\n      }\n    };\n\n    return (\n      <MenuItem\n        {...remaining}\n        aria-haspopup={isSheet ? \"dialog\" : \"menu\"}\n        aria-expanded={visible || undefined}\n        id={id}\n        ref={ref}\n        rightAddon={rightAddon}\n        onClick={(event) => {\n          onClick(event);\n\n          event.stopPropagation();\n          updateVisibility(!visible);\n        }}\n        onKeyDown={(event) => {\n          onKeyDown(event);\n\n          switch (event.key) {\n            case \"ArrowDown\":\n              if (horizontal || root) {\n                event.preventDefault();\n                event.stopPropagation();\n                updateVisibility(true);\n              }\n              break;\n            case \"ArrowRight\":\n              if (!horizontal && !root) {\n                event.preventDefault();\n                event.stopPropagation();\n                updateVisibility(true);\n              }\n              break;\n          }\n        }}\n        onMouseEnter={(event) => {\n          onMouseEnter(event);\n          if (mode === \"touch\" || disabled || !menubar) {\n            return;\n          }\n\n          defaultFocusIndex.current = 0;\n          startShowFlow(id);\n        }}\n        onMouseLeave={(event) => {\n          onMouseLeave(event);\n          if (mode === \"touch\" || disabled || !menubar) {\n            return;\n          }\n\n          clearVisibilityTimeout();\n        }}\n      >\n        {children}\n      </MenuItem>\n    );\n  }\n);\n"],"names":["forwardRef","useEffect","useHoverMode","IconRotator","getIcon","useUserInteractionMode","useAppSize","useEnsuredId","useMenuConfiguration","MenuItem","useMenuVisibility","useMenuBarContext","noop","MenuItemButton","props","ref","id","propId","children","height","propHeight","onClick","onKeyDown","onMouseEnter","onMouseLeave","rightAddon","propRightAddon","iconRotatorProps","disableDropdownIcon","remaining","disabled","mode","renderAsSheet","isPhone","isSheet","root","menubar","activeId","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","leaveTimeoutRef","hoverTimeoutRef","visible","setVisible","defaultFocusIndex","startShowFlow","clearVisibilityTimeout","horizontal","dropdownIcon","leftAddon","rotated","updateVisibility","nextVisible","focusIndex","current","aria-haspopup","aria-expanded","undefined","event","stopPropagation","key","preventDefault"],"mappings":"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"}

package/dist/menu/useContextMenu.d.ts

@@ -8,7 +8,7 @@ export interface ContextMenuProps extends InitialCoords {
     fixedTo: RefObject<HTMLElement>;
     visible: boolean;
     preventScroll: boolean;
-    onRequestClose(): void;
+    onRequestClose: () => void;
 }
 /**
  * @since 5.0.0
@@ -30,7 +30,7 @@ export interface ContextMenuHookOptions {
      * @defaultValue `true`
      */
     preventScroll?: boolean;
-    onContextMenu?<E extends HTMLElement>(event: MouseEvent<E>): void;
+    onContextMenu?: <E extends HTMLElement>(event: MouseEvent<E>) => void;
 }
 /**
  * @since 5.0.0
@@ -40,7 +40,7 @@ export interface ContextMenuHookOptions {
  */
 export interface ContextMenuImplementation extends UseStateObject<"visible", boolean> {
     menuProps: ContextMenuProps;
-    onContextMenu<E extends HTMLElement>(event: MouseEvent<E>): void;
+    onContextMenu: <E extends HTMLElement>(event: MouseEvent<E>) => void;
 }
 /**
  * This hook controls the visibility and positioning for a context menu.

package/dist/menu/useContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/menu/useContextMenu.ts"],"sourcesContent":["\"use client\";\nimport type { MouseEvent, RefObject } from \"react\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { BELOW_INNER_LEFT_ANCHOR } from \"../positioning/constants.js\";\nimport type { InitialCoords, PositionAnchor } from \"../positioning/types.js\";\nimport type { UseStateObject } from \"../types.js\";\n\n/** @since 6.0.0 */\nexport interface ContextMenuProps extends InitialCoords {\n  \"aria-label\": string;\n  anchor: PositionAnchor;\n  fixedTo: RefObject<HTMLElement>;\n  visible: boolean;\n  preventScroll: boolean;\n  onRequestClose(): void;\n}\n\n/**\n * @since 5.0.0\n * @since 6.0.0  Dropped most options since they are no longer required for the\n * context menu to work. Apply any `Menu` props directly to the `Menu` component\n * instead.\n */\nexport interface ContextMenuHookOptions {\n  /**\n   * @defaultValue `BELOW_INNER_LEFT_ANCHOR`\n   * @see {@link BELOW_INNER_LEFT_ANCHOR}\n   */\n  anchor?: PositionAnchor;\n\n  /**\n   * @defaultValue `\"Context Menu\"`\n   */\n  menuLabel?: string;\n\n  /**\n   * @defaultValue `true`\n   */\n  preventScroll?: boolean;\n  onContextMenu?<E extends HTMLElement>(event: MouseEvent<E>): void;\n}\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Renamed from `ContextMenuHookReturnValue` to\n * `ContextMenuImplementation` and dropped the `menuRef` and `menuNodeRef`\n * fields.\n */\nexport interface ContextMenuImplementation\n  extends UseStateObject<\"visible\", boolean> {\n  menuProps: ContextMenuProps;\n  onContextMenu<E extends HTMLElement>(event: MouseEvent<E>): void;\n}\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This hook controls the visibility and positioning for a context menu.\n *\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import [ Menu, MenuItem, useContextMenu ] from \"@react-md/core\":\n *\n * function Example(): ReactElement {\n *   const { menuProps, onContextMenu } = useContextMenu();\n *\n *   return (\n *     <>\n *       <textarea onContextMenu={onContextMenu} />\n *       <Menu {...menuProps}>\n *         <MenuItem>Cut</MenuItem>\n *         <MenuItem>Copy</MenuItem>\n *         <MenuItem>Paste</MenuItem>\n *         <MenuItem>Undo</MenuItem>\n *       </Menu>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 5.0.0\n * @since 6.0.0 No longer supports overriding most of the `Menu` props. The\n * props must be passed to the `Menu` component manually.\n */\nexport function useContextMenu(\n  options: ContextMenuHookOptions = {}\n): ContextMenuImplementation {\n  const {\n    anchor = BELOW_INNER_LEFT_ANCHOR,\n    menuLabel = \"Context Menu\",\n    onContextMenu = noop,\n    preventScroll = true,\n  } = options;\n  const [coords, setCoords] = useState<InitialCoords>({});\n  const [visible, setVisible] = useState(false);\n  const fixedTo = useRef<HTMLElement>(null);\n  const onRequestClose = useCallback(() => {\n    setVisible(false);\n  }, []);\n\n  return {\n    visible,\n    setVisible,\n    menuProps: {\n      \"aria-label\": menuLabel,\n      anchor,\n      ...coords,\n      fixedTo,\n      visible,\n      onRequestClose,\n      preventScroll,\n    },\n    onContextMenu(event) {\n      onContextMenu(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n      setCoords({\n        initialX: event.clientX,\n        initialY: event.clientY,\n      });\n      setVisible(true);\n    },\n  };\n}\n"],"names":["useCallback","useRef","useState","BELOW_INNER_LEFT_ANCHOR","noop","useContextMenu","options","anchor","menuLabel","onContextMenu","preventScroll","coords","setCoords","visible","setVisible","fixedTo","onRequestClose","menuProps","event","isPropagationStopped","preventDefault","stopPropagation","initialX","clientX","initialY","clientY"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AACtD,SAASC,uBAAuB,QAAQ,8BAA8B;AAmDtE,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,SAASC,eACdC,UAAkC,CAAC,CAAC;IAEpC,MAAM,EACJC,SAASJ,uBAAuB,EAChCK,YAAY,cAAc,EAC1BC,gBAAgBL,IAAI,EACpBM,gBAAgB,IAAI,EACrB,GAAGJ;IACJ,MAAM,CAACK,QAAQC,UAAU,GAAGV,SAAwB,CAAC;IACrD,MAAM,CAACW,SAASC,WAAW,GAAGZ,SAAS;IACvC,MAAMa,UAAUd,OAAoB;IACpC,MAAMe,iBAAiBhB,YAAY;QACjCc,WAAW;IACb,GAAG,EAAE;IAEL,OAAO;QACLD;QACAC;QACAG,WAAW;YACT,cAAcT;YACdD;YACA,GAAGI,MAAM;YACTI;YACAF;YACAG;YACAN;QACF;QACAD,eAAcS,KAAK;YACjBT,cAAcS;YACd,IAAIA,MAAMC,oBAAoB,IAAI;gBAChC;YACF;YAEAD,MAAME,cAAc;YACpBF,MAAMG,eAAe;YACrBT,UAAU;gBACRU,UAAUJ,MAAMK,OAAO;gBACvBC,UAAUN,MAAMO,OAAO;YACzB;YACAX,WAAW;QACb;IACF;AACF"}
+{"version":3,"sources":["../../src/menu/useContextMenu.ts"],"sourcesContent":["\"use client\";\nimport type { MouseEvent, RefObject } from \"react\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { BELOW_INNER_LEFT_ANCHOR } from \"../positioning/constants.js\";\nimport type { InitialCoords, PositionAnchor } from \"../positioning/types.js\";\nimport type { UseStateObject } from \"../types.js\";\n\n/** @since 6.0.0 */\nexport interface ContextMenuProps extends InitialCoords {\n  \"aria-label\": string;\n  anchor: PositionAnchor;\n  fixedTo: RefObject<HTMLElement>;\n  visible: boolean;\n  preventScroll: boolean;\n  onRequestClose: () => void;\n}\n\n/**\n * @since 5.0.0\n * @since 6.0.0  Dropped most options since they are no longer required for the\n * context menu to work. Apply any `Menu` props directly to the `Menu` component\n * instead.\n */\nexport interface ContextMenuHookOptions {\n  /**\n   * @defaultValue `BELOW_INNER_LEFT_ANCHOR`\n   * @see {@link BELOW_INNER_LEFT_ANCHOR}\n   */\n  anchor?: PositionAnchor;\n\n  /**\n   * @defaultValue `\"Context Menu\"`\n   */\n  menuLabel?: string;\n\n  /**\n   * @defaultValue `true`\n   */\n  preventScroll?: boolean;\n  onContextMenu?: <E extends HTMLElement>(event: MouseEvent<E>) => void;\n}\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Renamed from `ContextMenuHookReturnValue` to\n * `ContextMenuImplementation` and dropped the `menuRef` and `menuNodeRef`\n * fields.\n */\nexport interface ContextMenuImplementation\n  extends UseStateObject<\"visible\", boolean> {\n  menuProps: ContextMenuProps;\n  onContextMenu: <E extends HTMLElement>(event: MouseEvent<E>) => void;\n}\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This hook controls the visibility and positioning for a context menu.\n *\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import [ Menu, MenuItem, useContextMenu ] from \"@react-md/core\":\n *\n * function Example(): ReactElement {\n *   const { menuProps, onContextMenu } = useContextMenu();\n *\n *   return (\n *     <>\n *       <textarea onContextMenu={onContextMenu} />\n *       <Menu {...menuProps}>\n *         <MenuItem>Cut</MenuItem>\n *         <MenuItem>Copy</MenuItem>\n *         <MenuItem>Paste</MenuItem>\n *         <MenuItem>Undo</MenuItem>\n *       </Menu>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 5.0.0\n * @since 6.0.0 No longer supports overriding most of the `Menu` props. The\n * props must be passed to the `Menu` component manually.\n */\nexport function useContextMenu(\n  options: ContextMenuHookOptions = {}\n): ContextMenuImplementation {\n  const {\n    anchor = BELOW_INNER_LEFT_ANCHOR,\n    menuLabel = \"Context Menu\",\n    onContextMenu = noop,\n    preventScroll = true,\n  } = options;\n  const [coords, setCoords] = useState<InitialCoords>({});\n  const [visible, setVisible] = useState(false);\n  const fixedTo = useRef<HTMLElement>(null);\n  const onRequestClose = useCallback(() => {\n    setVisible(false);\n  }, []);\n\n  return {\n    visible,\n    setVisible,\n    menuProps: {\n      \"aria-label\": menuLabel,\n      anchor,\n      ...coords,\n      fixedTo,\n      visible,\n      onRequestClose,\n      preventScroll,\n    },\n    onContextMenu(event) {\n      onContextMenu(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n      setCoords({\n        initialX: event.clientX,\n        initialY: event.clientY,\n      });\n      setVisible(true);\n    },\n  };\n}\n"],"names":["useCallback","useRef","useState","BELOW_INNER_LEFT_ANCHOR","noop","useContextMenu","options","anchor","menuLabel","onContextMenu","preventScroll","coords","setCoords","visible","setVisible","fixedTo","onRequestClose","menuProps","event","isPropagationStopped","preventDefault","stopPropagation","initialX","clientX","initialY","clientY"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AACtD,SAASC,uBAAuB,QAAQ,8BAA8B;AAmDtE,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,SAASC,eACdC,UAAkC,CAAC,CAAC;IAEpC,MAAM,EACJC,SAASJ,uBAAuB,EAChCK,YAAY,cAAc,EAC1BC,gBAAgBL,IAAI,EACpBM,gBAAgB,IAAI,EACrB,GAAGJ;IACJ,MAAM,CAACK,QAAQC,UAAU,GAAGV,SAAwB,CAAC;IACrD,MAAM,CAACW,SAASC,WAAW,GAAGZ,SAAS;IACvC,MAAMa,UAAUd,OAAoB;IACpC,MAAMe,iBAAiBhB,YAAY;QACjCc,WAAW;IACb,GAAG,EAAE;IAEL,OAAO;QACLD;QACAC;QACAG,WAAW;YACT,cAAcT;YACdD;YACA,GAAGI,MAAM;YACTI;YACAF;YACAG;YACAN;QACF;QACAD,eAAcS,KAAK;YACjBT,cAAcS;YACd,IAAIA,MAAMC,oBAAoB,IAAI;gBAChC;YACF;YAEAD,MAAME,cAAc;YACpBF,MAAMG,eAAe;YACrBT,UAAU;gBACRU,UAAUJ,MAAMK,OAAO;gBACvBC,UAAUN,MAAMO,OAAO;YACzB;YACAX,WAAW;QACb;IACF;AACF"}

package/dist/movement/types.d.ts

@@ -163,8 +163,8 @@ export type KeyboardMovementFocusChangeEventHandler = (event: KeyboardMovementFo
 export interface KeyboardMovementExtensionData<E extends HTMLElement> extends KeyboardMovementContext {
     event: KeyboardEvent<E>;
     currentFocusIndex: NonNullMutableRef<number>;
-    setFocusIndex(index: number, focusables: readonly HTMLElement[]): void;
-    setActiveDescendantId(id: string): void;
+    setFocusIndex: (index: number, focusables: readonly HTMLElement[]) => void;
+    setActiveDescendantId: (id: string) => void;
 }
 /**
  * @since 6.0.0
@@ -173,9 +173,9 @@ export interface KeyboardMovementExtensionData<E extends HTMLElement> extends Ke
 export interface KeyboardMovementProviderOptions<E extends HTMLElement> extends KeyboardMovementBehavior, KeyboardMovementConfiguration {
     /** @see {@link TabIndexBehavior} */
     tabIndexBehavior?: TabIndexBehavior;
-    onClick?(event: MouseEvent<E>): void;
-    onFocus?(event: FocusEvent<E>): void;
-    onKeyDown?(event: KeyboardEvent<E>): void;
+    onClick?: (event: MouseEvent<E>) => void;
+    onFocus?: (event: FocusEvent<E>) => void;
+    onKeyDown?: (event: KeyboardEvent<E>) => void;
     /** @defaultValue `false` */
     disabled?: boolean;
     /**

package/dist/movement/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/movement/types.ts"],"sourcesContent":["import type {\n  FocusEvent,\n  FocusEventHandler,\n  KeyboardEvent,\n  KeyboardEventHandler,\n  MouseEvent,\n  MouseEventHandler,\n} from \"react\";\nimport type {\n  NonNullMutableRef,\n  NonNullRef,\n  UseStateSetter,\n} from \"../types.js\";\n\n/**\n * Set this to `\"roving\"` when:\n * - there are a group of focusable elements that have a `tabIndex={-1}`\n * - the container element defaults to having a `tabIndex={0}`\n * - if the container is focused, it should no longer be included in the normal\n *   tab flow. Instead, the current focused element should be included instead\n *   by changing its `tabIndex` from `-1` to `0`\n *\n * Set this to `\"virtual\"` when:\n * - the container element should never lose focus\n * - the \"focused\" element only gains focus styles instead of being focused\n * - the container element specifies an `aria-activedescendant` pointing to one\n *   of the ids for the child \"focusable\" elements\n *\n * @since 6.0.0\n */\nexport type TabIndexBehavior = \"roving\" | \"virtual\";\n\n/**\n * This should be used for specific widgets that should not include all\n * focusable elements and instead only specific elements.\n *\n * @example\n * ```ts\n * const getExpansionPanelsOnly: GetFocusableElements = (container) =>\n *   [...container.querySelectorAll(\".rmd-expansion-panel__button\")];\n *\n * const getTreeItemsOnly: GetFocusableElements = (container) =>\n *   [...container.querySelectorAll(\"[role='treeitem']\")];\n * ```\n *\n * @defaultValue `getFocusableElements`\n * @see the default `getFocusableElements` function.\n */\nexport type GetFocusableElements = (\n  container: HTMLElement,\n  programmatic: boolean\n) => readonly HTMLElement[];\n\n/**\n * @since 5.0.0\n */\nexport interface KeyboardMovementConfiguration {\n  /**\n   * A list of keys that will attempt to increment the focus index by 1.\n   *\n   * @defaultValue `[\"ArrowDown\"]`\n   */\n  incrementKeys?: readonly string[];\n\n  /**\n   * A list of keys that will attempt to decrement the focus index by 1.\n   *\n   * @defaultValue `[\"ArrowUp\"]`\n   */\n  decrementKeys?: readonly string[];\n\n  /**\n   * A list of keys that will set the focus index to `0`.\n   *\n   * @defaultValue `[\"Home\"]`\n   */\n  jumpToFirstKeys?: readonly string[];\n\n  /**\n   * A list of keys that will set the focus index to the last focusable index.\n   *\n   * @defaultValue `[\"End\"]`\n   */\n  jumpToLastKeys?: readonly string[];\n}\n\n/**\n * The defined {@link KeyboardMovementConfiguration} that should be used for\n * custom keyboard focus behavior.\n *\n * @since 5.0.0\n */\nexport type KeyboardMovementConfig = Required<KeyboardMovementConfiguration>;\n\n/**\n * @since 5.0.0\n */\nexport interface KeyboardMovementBehavior {\n  /**\n   * Boolean if pressing a letter will focus the next item in the\n   * {@link KeyboardMovementProvider} that starts with the same letter.\n   *\n   * @defaultValue `false`\n   */\n  searchable?: boolean;\n\n  /**\n   * Boolean if the {@link KeyboardMovementProvider} should allow the focus behavior\n   * to loop from the first to last or last to first item instead of preventing\n   * any new focus behavior. In other words... if the last item is focused and\n   * the user presses a key that should advance the focus to the next focusable\n   * element, should the focus stay on the current element or loop back and\n   * focus the first focusable item.\n   *\n   * @defaultValue `false`\n   */\n  loopable?: boolean;\n\n  /**\n   * Boolean if elements that are `aria-disabled` or `disabled` should still be\n   * able to gain focus.\n   *\n   * @defaultValue `false`\n   */\n  includeDisabled?: boolean;\n\n  /**\n   * Boolean if the keyboard movement is horizontal instead of vertical. This\n   * updates the default keyboard config to use `ArrowRight` and `ArrowLeft`\n   * instead of `ArrowDown` and `ArrowUp`,\n   *\n   * @since 5.1.2\n   * @defaultValue `false`\n   */\n  horizontal?: boolean;\n}\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Removed `attach`, `detach` and `watching`\n * @internal\n */\nexport interface KeyboardMovementContext\n  extends Required<KeyboardMovementBehavior> {\n  /** {@inheritDoc KeyboardMovementConfig} */\n  config: NonNullRef<KeyboardMovementConfig>;\n\n  /** @see {@link TabIndexBehavior} */\n  tabIndexBehavior: TabIndexBehavior | undefined;\n\n  /**\n   * Note: This will only update if the {@link KeyboardMovementProviderOptions.tabIndexBehavior}\n   * has been set to `\"roving\"` or `\"virtual\"`.\n   */\n  activeDescendantId: string;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface FocusableIndexOptions {\n  focusables: readonly HTMLElement[];\n  includeDisabled: boolean;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type GetDefaultFocusedIndex = (options: FocusableIndexOptions) => number;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type ExtendKeyDown<E extends HTMLElement> = (\n  movementData: KeyboardMovementExtensionData<E>\n) => void;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface KeyboardMovementFocusChangeEvent {\n  index: number;\n  element: HTMLElement;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type KeyboardMovementFocusChangeEventHandler = (\n  event: KeyboardMovementFocusChangeEvent\n) => void;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface KeyboardMovementExtensionData<E extends HTMLElement>\n  extends KeyboardMovementContext {\n  event: KeyboardEvent<E>;\n  currentFocusIndex: NonNullMutableRef<number>;\n  setFocusIndex(index: number, focusables: readonly HTMLElement[]): void;\n  setActiveDescendantId(id: string): void;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface KeyboardMovementProviderOptions<E extends HTMLElement>\n  extends KeyboardMovementBehavior,\n    KeyboardMovementConfiguration {\n  /** @see {@link TabIndexBehavior} */\n  tabIndexBehavior?: TabIndexBehavior;\n\n  onClick?(event: MouseEvent<E>): void;\n  onFocus?(event: FocusEvent<E>): void;\n  onKeyDown?(event: KeyboardEvent<E>): void;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * This is used to implement custom keyboard movement for the `keydown` event.\n   */\n  extendKeyDown?: ExtendKeyDown<E>;\n\n  /**\n   * Triggered whenever the focus changes.\n   */\n  onFocusChange?: KeyboardMovementFocusChangeEventHandler;\n\n  /**\n   * From what I've understood so far, programmatically focusable elements\n   * should only be included when disabled elements via `aria-disabled` are\n   * allowed.\n   *\n   * @defaultValue `includeDisabled`\n   */\n  programmatic?: boolean;\n\n  /** @see {@link GetFocusableElements} */\n  getFocusableElements?: GetFocusableElements;\n\n  /**\n   * This can be used to set the initial focus index whenever the container\n   * element is first focused or the focus index is `-1` on other focus events.\n   */\n  getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n\n  /**\n   * This was added to support editable combobox behavior. As the user types or\n   * uses native input keyboard behavior, the focus index should be reset to\n   * `-1` so that the next \"ArrowDown\" event focuses the first option again\n   * instead of the last selected one.\n   *\n   * @defaultValue `false`\n   */\n  isNegativeOneAllowed?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface KeyboardMovementProps<E extends HTMLElement> {\n  /**\n   * This will only be provided if the {@link KeyboardMovementContext.tabIndexBehavior}\n   * is set to `\"virtual\"`.\n   */\n  \"aria-activedescendant\"?: string;\n\n  /**\n   * This will not be provided if the {@link KeyboardMovementContext.tabIndexBehavior}\n   * is `undefined`. Otherwise:\n   * - `0` when `\"virtual\"`\n   * - `0` when `\"roving\"` and the container element has not been focused at\n   *   least once\n   * - `-1` when `\"roving\"` and the container has been focused at least once\n   *   - a child element **should** have a `tabIndex={0}` instead\n   */\n  tabIndex?: number;\n  onClick: MouseEventHandler<E>;\n  onFocus: FocusEventHandler<E>;\n  onKeyDown: KeyboardEventHandler<E>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface KeyboardMovementProviderImplementation<E extends HTMLElement> {\n  movementProps: Readonly<KeyboardMovementProps<E>>;\n  movementContext: Readonly<KeyboardMovementContext>;\n  currentFocusIndex: NonNullMutableRef<number>;\n  activeDescendantId: string;\n  setActiveDescendantId: UseStateSetter<string>;\n}\n"],"names":[],"mappings":"AAmSA;;;CAGC,GACD,WAMC"}
+{"version":3,"sources":["../../src/movement/types.ts"],"sourcesContent":["import type {\n  FocusEvent,\n  FocusEventHandler,\n  KeyboardEvent,\n  KeyboardEventHandler,\n  MouseEvent,\n  MouseEventHandler,\n} from \"react\";\nimport type {\n  NonNullMutableRef,\n  NonNullRef,\n  UseStateSetter,\n} from \"../types.js\";\n\n/**\n * Set this to `\"roving\"` when:\n * - there are a group of focusable elements that have a `tabIndex={-1}`\n * - the container element defaults to having a `tabIndex={0}`\n * - if the container is focused, it should no longer be included in the normal\n *   tab flow. Instead, the current focused element should be included instead\n *   by changing its `tabIndex` from `-1` to `0`\n *\n * Set this to `\"virtual\"` when:\n * - the container element should never lose focus\n * - the \"focused\" element only gains focus styles instead of being focused\n * - the container element specifies an `aria-activedescendant` pointing to one\n *   of the ids for the child \"focusable\" elements\n *\n * @since 6.0.0\n */\nexport type TabIndexBehavior = \"roving\" | \"virtual\";\n\n/**\n * This should be used for specific widgets that should not include all\n * focusable elements and instead only specific elements.\n *\n * @example\n * ```ts\n * const getExpansionPanelsOnly: GetFocusableElements = (container) =>\n *   [...container.querySelectorAll(\".rmd-expansion-panel__button\")];\n *\n * const getTreeItemsOnly: GetFocusableElements = (container) =>\n *   [...container.querySelectorAll(\"[role='treeitem']\")];\n * ```\n *\n * @defaultValue `getFocusableElements`\n * @see the default `getFocusableElements` function.\n */\nexport type GetFocusableElements = (\n  container: HTMLElement,\n  programmatic: boolean\n) => readonly HTMLElement[];\n\n/**\n * @since 5.0.0\n */\nexport interface KeyboardMovementConfiguration {\n  /**\n   * A list of keys that will attempt to increment the focus index by 1.\n   *\n   * @defaultValue `[\"ArrowDown\"]`\n   */\n  incrementKeys?: readonly string[];\n\n  /**\n   * A list of keys that will attempt to decrement the focus index by 1.\n   *\n   * @defaultValue `[\"ArrowUp\"]`\n   */\n  decrementKeys?: readonly string[];\n\n  /**\n   * A list of keys that will set the focus index to `0`.\n   *\n   * @defaultValue `[\"Home\"]`\n   */\n  jumpToFirstKeys?: readonly string[];\n\n  /**\n   * A list of keys that will set the focus index to the last focusable index.\n   *\n   * @defaultValue `[\"End\"]`\n   */\n  jumpToLastKeys?: readonly string[];\n}\n\n/**\n * The defined {@link KeyboardMovementConfiguration} that should be used for\n * custom keyboard focus behavior.\n *\n * @since 5.0.0\n */\nexport type KeyboardMovementConfig = Required<KeyboardMovementConfiguration>;\n\n/**\n * @since 5.0.0\n */\nexport interface KeyboardMovementBehavior {\n  /**\n   * Boolean if pressing a letter will focus the next item in the\n   * {@link KeyboardMovementProvider} that starts with the same letter.\n   *\n   * @defaultValue `false`\n   */\n  searchable?: boolean;\n\n  /**\n   * Boolean if the {@link KeyboardMovementProvider} should allow the focus behavior\n   * to loop from the first to last or last to first item instead of preventing\n   * any new focus behavior. In other words... if the last item is focused and\n   * the user presses a key that should advance the focus to the next focusable\n   * element, should the focus stay on the current element or loop back and\n   * focus the first focusable item.\n   *\n   * @defaultValue `false`\n   */\n  loopable?: boolean;\n\n  /**\n   * Boolean if elements that are `aria-disabled` or `disabled` should still be\n   * able to gain focus.\n   *\n   * @defaultValue `false`\n   */\n  includeDisabled?: boolean;\n\n  /**\n   * Boolean if the keyboard movement is horizontal instead of vertical. This\n   * updates the default keyboard config to use `ArrowRight` and `ArrowLeft`\n   * instead of `ArrowDown` and `ArrowUp`,\n   *\n   * @since 5.1.2\n   * @defaultValue `false`\n   */\n  horizontal?: boolean;\n}\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Removed `attach`, `detach` and `watching`\n * @internal\n */\nexport interface KeyboardMovementContext\n  extends Required<KeyboardMovementBehavior> {\n  /** {@inheritDoc KeyboardMovementConfig} */\n  config: NonNullRef<KeyboardMovementConfig>;\n\n  /** @see {@link TabIndexBehavior} */\n  tabIndexBehavior: TabIndexBehavior | undefined;\n\n  /**\n   * Note: This will only update if the {@link KeyboardMovementProviderOptions.tabIndexBehavior}\n   * has been set to `\"roving\"` or `\"virtual\"`.\n   */\n  activeDescendantId: string;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface FocusableIndexOptions {\n  focusables: readonly HTMLElement[];\n  includeDisabled: boolean;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type GetDefaultFocusedIndex = (options: FocusableIndexOptions) => number;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type ExtendKeyDown<E extends HTMLElement> = (\n  movementData: KeyboardMovementExtensionData<E>\n) => void;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface KeyboardMovementFocusChangeEvent {\n  index: number;\n  element: HTMLElement;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type KeyboardMovementFocusChangeEventHandler = (\n  event: KeyboardMovementFocusChangeEvent\n) => void;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface KeyboardMovementExtensionData<E extends HTMLElement>\n  extends KeyboardMovementContext {\n  event: KeyboardEvent<E>;\n  currentFocusIndex: NonNullMutableRef<number>;\n  setFocusIndex: (index: number, focusables: readonly HTMLElement[]) => void;\n  setActiveDescendantId: (id: string) => void;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface KeyboardMovementProviderOptions<E extends HTMLElement>\n  extends KeyboardMovementBehavior,\n    KeyboardMovementConfiguration {\n  /** @see {@link TabIndexBehavior} */\n  tabIndexBehavior?: TabIndexBehavior;\n\n  onClick?: (event: MouseEvent<E>) => void;\n  onFocus?: (event: FocusEvent<E>) => void;\n  onKeyDown?: (event: KeyboardEvent<E>) => void;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * This is used to implement custom keyboard movement for the `keydown` event.\n   */\n  extendKeyDown?: ExtendKeyDown<E>;\n\n  /**\n   * Triggered whenever the focus changes.\n   */\n  onFocusChange?: KeyboardMovementFocusChangeEventHandler;\n\n  /**\n   * From what I've understood so far, programmatically focusable elements\n   * should only be included when disabled elements via `aria-disabled` are\n   * allowed.\n   *\n   * @defaultValue `includeDisabled`\n   */\n  programmatic?: boolean;\n\n  /** @see {@link GetFocusableElements} */\n  getFocusableElements?: GetFocusableElements;\n\n  /**\n   * This can be used to set the initial focus index whenever the container\n   * element is first focused or the focus index is `-1` on other focus events.\n   */\n  getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n\n  /**\n   * This was added to support editable combobox behavior. As the user types or\n   * uses native input keyboard behavior, the focus index should be reset to\n   * `-1` so that the next \"ArrowDown\" event focuses the first option again\n   * instead of the last selected one.\n   *\n   * @defaultValue `false`\n   */\n  isNegativeOneAllowed?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface KeyboardMovementProps<E extends HTMLElement> {\n  /**\n   * This will only be provided if the {@link KeyboardMovementContext.tabIndexBehavior}\n   * is set to `\"virtual\"`.\n   */\n  \"aria-activedescendant\"?: string;\n\n  /**\n   * This will not be provided if the {@link KeyboardMovementContext.tabIndexBehavior}\n   * is `undefined`. Otherwise:\n   * - `0` when `\"virtual\"`\n   * - `0` when `\"roving\"` and the container element has not been focused at\n   *   least once\n   * - `-1` when `\"roving\"` and the container has been focused at least once\n   *   - a child element **should** have a `tabIndex={0}` instead\n   */\n  tabIndex?: number;\n  onClick: MouseEventHandler<E>;\n  onFocus: FocusEventHandler<E>;\n  onKeyDown: KeyboardEventHandler<E>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface KeyboardMovementProviderImplementation<E extends HTMLElement> {\n  movementProps: Readonly<KeyboardMovementProps<E>>;\n  movementContext: Readonly<KeyboardMovementContext>;\n  currentFocusIndex: NonNullMutableRef<number>;\n  activeDescendantId: string;\n  setActiveDescendantId: UseStateSetter<string>;\n}\n"],"names":[],"mappings":"AAmSA;;;CAGC,GACD,WAMC"}

package/dist/navigation/CollapsibleNavGroup.d.ts

@@ -1,6 +1,7 @@
 import { type LiHTMLAttributes, type ReactNode } from "react";
 import { type ButtonProps } from "../button/Button.js";
-import { type PropsWithRef, type UseStateInitializer } from "../types.js";
+import { type CollapseTransitionHookOptions } from "../transition/useCollapseTransition.js";
+import { type PropsWithRef } from "../types.js";
 import { type NavGroupProps } from "./NavGroup.js";
 import { type NavItemButtonRotatorProps } from "./NavItemButton.js";
 /**
@@ -9,6 +10,7 @@ import { type NavItemButtonRotatorProps } from "./NavItemButton.js";
 export interface CollapsibleNavGroupProps extends NavGroupProps, NavItemButtonRotatorProps {
     liProps?: PropsWithRef<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
     buttonProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;
+    collapseOptions?: Omit<CollapseTransitionHookOptions<HTMLUListElement>, "nodeRef" | "className" | "transitionIn">;
     /**
      * The children to render in the {@link NavItemButton} that toggles the
      * collapsed state
@@ -18,8 +20,8 @@ export interface CollapsibleNavGroupProps extends NavGroupProps, NavItemButtonRo
      * The content that should be rendered in the non-collapsed {@link NavGroup}.
      */
     children: ReactNode;
-    /** @defaultValue `false` */
-    defaultCollapsed?: UseStateInitializer<boolean>;
+    collapsed: boolean;
+    toggleCollapsed: () => void;
 }
 /**
  * **Client Component**

package/dist/navigation/CollapsibleNavGroup.js

@@ -2,7 +2,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useCollapseTransition } from "../transition/useCollapseTransition.js";
-import { useToggle } from "../useToggle.js";
 import { NavGroup } from "./NavGroup.js";
 import { NavItem } from "./NavItem.js";
 import { NavItemButton } from "./NavItemButton.js";
@@ -14,9 +13,9 @@ const noop = ()=>{
  *
  * @since 6.0.0
  */ export const CollapsibleNavGroup = /*#__PURE__*/ forwardRef(function CollapsibleNavGroup(props, ref) {
-    const { liProps, buttonProps, buttonChildren, icon, iconRotatorProps, disableIconRotator, className, children, defaultCollapsed, ...remaining } = props;
-    const { toggled: collapsed, toggle } = useToggle(defaultCollapsed);
+    const { liProps, buttonProps, buttonChildren, icon, iconRotatorProps, disableIconRotator, className, children, collapsed, toggleCollapsed, collapseOptions, ...remaining } = props;
     const { rendered, elementProps } = useCollapseTransition({
+        ...collapseOptions,
         nodeRef: ref,
         className,
         transitionIn: !collapsed
@@ -29,7 +28,7 @@ const noop = ()=>{
                 ...buttonProps,
                 onClick: (event)=>{
                     onButtonClick(event);
-                    toggle();
+                    toggleCollapsed();
                 },
                 collapsed: collapsed,
                 icon: icon,

package/dist/navigation/CollapsibleNavGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/CollapsibleNavGroup.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type LiHTMLAttributes, type ReactNode } from \"react\";\nimport { type ButtonProps } from \"../button/Button.js\";\nimport { useCollapseTransition } from \"../transition/useCollapseTransition.js\";\nimport { type PropsWithRef, type UseStateInitializer } from \"../types.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport { NavGroup, type NavGroupProps } from \"./NavGroup.js\";\nimport { NavItem } from \"./NavItem.js\";\nimport {\n  NavItemButton,\n  type NavItemButtonRotatorProps,\n} from \"./NavItemButton.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport interface CollapsibleNavGroupProps\n  extends NavGroupProps,\n    NavItemButtonRotatorProps {\n  liProps?: PropsWithRef<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n  buttonProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;\n\n  /**\n   * The children to render in the {@link NavItemButton} that toggles the\n   * collapsed state\n   */\n  buttonChildren: ReactNode;\n\n  /**\n   * The content that should be rendered in the non-collapsed {@link NavGroup}.\n   */\n  children: ReactNode;\n\n  /** @defaultValue `false` */\n  defaultCollapsed?: UseStateInitializer<boolean>;\n}\n\n/**\n * **Client Component**\n *\n * @since 6.0.0\n */\nexport const CollapsibleNavGroup = forwardRef<\n  HTMLUListElement,\n  CollapsibleNavGroupProps\n>(function CollapsibleNavGroup(props, ref) {\n  const {\n    liProps,\n    buttonProps,\n    buttonChildren,\n    icon,\n    iconRotatorProps,\n    disableIconRotator,\n    className,\n    children,\n    defaultCollapsed,\n    ...remaining\n  } = props;\n\n  const { toggled: collapsed, toggle } = useToggle(defaultCollapsed);\n  const { rendered, elementProps } = useCollapseTransition({\n    nodeRef: ref,\n    className,\n    transitionIn: !collapsed,\n  });\n  const onButtonClick = buttonProps?.onClick ?? noop;\n\n  return (\n    <NavItem {...liProps}>\n      <NavItemButton\n        {...buttonProps}\n        onClick={(event) => {\n          onButtonClick(event);\n          toggle();\n        }}\n        collapsed={collapsed}\n        icon={icon}\n        iconRotatorProps={iconRotatorProps}\n        disableIconRotator={disableIconRotator}\n      >\n        {buttonChildren}\n      </NavItemButton>\n      {rendered && (\n        <NavGroup {...remaining} {...elementProps}>\n          {children}\n        </NavGroup>\n      )}\n    </NavItem>\n  );\n});\n"],"names":["forwardRef","useCollapseTransition","useToggle","NavGroup","NavItem","NavItemButton","noop","CollapsibleNavGroup","props","ref","liProps","buttonProps","buttonChildren","icon","iconRotatorProps","disableIconRotator","className","children","defaultCollapsed","remaining","toggled","collapsed","toggle","rendered","elementProps","nodeRef","transitionIn","onButtonClick","onClick","event"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA+C,QAAQ;AAE1E,SAASC,qBAAqB,QAAQ,yCAAyC;AAE/E,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,QAAQ,QAA4B,gBAAgB;AAC7D,SAASC,OAAO,QAAQ,eAAe;AACvC,SACEC,aAAa,QAER,qBAAqB;AAE5B,MAAMC,OAAO;AACX,aAAa;AACf;AA0BA;;;;CAIC,GACD,OAAO,MAAMC,oCAAsBP,WAGjC,SAASO,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJC,OAAO,EACPC,WAAW,EACXC,cAAc,EACdC,IAAI,EACJC,gBAAgB,EAChBC,kBAAkB,EAClBC,SAAS,EACTC,QAAQ,EACRC,gBAAgB,EAChB,GAAGC,WACJ,GAAGX;IAEJ,MAAM,EAAEY,SAASC,SAAS,EAAEC,MAAM,EAAE,GAAGpB,UAAUgB;IACjD,MAAM,EAAEK,QAAQ,EAAEC,YAAY,EAAE,GAAGvB,sBAAsB;QACvDwB,SAAShB;QACTO;QACAU,cAAc,CAACL;IACjB;IACA,MAAMM,gBAAgBhB,aAAaiB,WAAWtB;IAE9C,qBACE,MAACF;QAAS,GAAGM,OAAO;;0BAClB,KAACL;gBACE,GAAGM,WAAW;gBACfiB,SAAS,CAACC;oBACRF,cAAcE;oBACdP;gBACF;gBACAD,WAAWA;gBACXR,MAAMA;gBACNC,kBAAkBA;gBAClBC,oBAAoBA;0BAEnBH;;YAEFW,0BACC,KAACpB;gBAAU,GAAGgB,SAAS;gBAAG,GAAGK,YAAY;0BACtCP;;;;AAKX,GAAG"}
+{"version":3,"sources":["../../src/navigation/CollapsibleNavGroup.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type LiHTMLAttributes, type ReactNode } from \"react\";\nimport { type ButtonProps } from \"../button/Button.js\";\nimport {\n  type CollapseTransitionHookOptions,\n  useCollapseTransition,\n} from \"../transition/useCollapseTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { NavGroup, type NavGroupProps } from \"./NavGroup.js\";\nimport { NavItem } from \"./NavItem.js\";\nimport {\n  NavItemButton,\n  type NavItemButtonRotatorProps,\n} from \"./NavItemButton.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport interface CollapsibleNavGroupProps\n  extends NavGroupProps,\n    NavItemButtonRotatorProps {\n  liProps?: PropsWithRef<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n  buttonProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;\n  collapseOptions?: Omit<\n    CollapseTransitionHookOptions<HTMLUListElement>,\n    \"nodeRef\" | \"className\" | \"transitionIn\"\n  >;\n\n  /**\n   * The children to render in the {@link NavItemButton} that toggles the\n   * collapsed state\n   */\n  buttonChildren: ReactNode;\n\n  /**\n   * The content that should be rendered in the non-collapsed {@link NavGroup}.\n   */\n  children: ReactNode;\n\n  collapsed: boolean;\n  toggleCollapsed: () => void;\n}\n\n/**\n * **Client Component**\n *\n * @since 6.0.0\n */\nexport const CollapsibleNavGroup = forwardRef<\n  HTMLUListElement,\n  CollapsibleNavGroupProps\n>(function CollapsibleNavGroup(props, ref) {\n  const {\n    liProps,\n    buttonProps,\n    buttonChildren,\n    icon,\n    iconRotatorProps,\n    disableIconRotator,\n    className,\n    children,\n    collapsed,\n    toggleCollapsed,\n    collapseOptions,\n    ...remaining\n  } = props;\n\n  const { rendered, elementProps } = useCollapseTransition({\n    ...collapseOptions,\n    nodeRef: ref,\n    className,\n    transitionIn: !collapsed,\n  });\n  const onButtonClick = buttonProps?.onClick ?? noop;\n\n  return (\n    <NavItem {...liProps}>\n      <NavItemButton\n        {...buttonProps}\n        onClick={(event) => {\n          onButtonClick(event);\n          toggleCollapsed();\n        }}\n        collapsed={collapsed}\n        icon={icon}\n        iconRotatorProps={iconRotatorProps}\n        disableIconRotator={disableIconRotator}\n      >\n        {buttonChildren}\n      </NavItemButton>\n      {rendered && (\n        <NavGroup {...remaining} {...elementProps}>\n          {children}\n        </NavGroup>\n      )}\n    </NavItem>\n  );\n});\n"],"names":["forwardRef","useCollapseTransition","NavGroup","NavItem","NavItemButton","noop","CollapsibleNavGroup","props","ref","liProps","buttonProps","buttonChildren","icon","iconRotatorProps","disableIconRotator","className","children","collapsed","toggleCollapsed","collapseOptions","remaining","rendered","elementProps","nodeRef","transitionIn","onButtonClick","onClick","event"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA+C,QAAQ;AAE1E,SAEEC,qBAAqB,QAChB,yCAAyC;AAEhD,SAASC,QAAQ,QAA4B,gBAAgB;AAC7D,SAASC,OAAO,QAAQ,eAAe;AACvC,SACEC,aAAa,QAER,qBAAqB;AAE5B,MAAMC,OAAO;AACX,aAAa;AACf;AA8BA;;;;CAIC,GACD,OAAO,MAAMC,oCAAsBN,WAGjC,SAASM,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJC,OAAO,EACPC,WAAW,EACXC,cAAc,EACdC,IAAI,EACJC,gBAAgB,EAChBC,kBAAkB,EAClBC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,eAAe,EACfC,eAAe,EACf,GAAGC,WACJ,GAAGb;IAEJ,MAAM,EAAEc,QAAQ,EAAEC,YAAY,EAAE,GAAGrB,sBAAsB;QACvD,GAAGkB,eAAe;QAClBI,SAASf;QACTO;QACAS,cAAc,CAACP;IACjB;IACA,MAAMQ,gBAAgBf,aAAagB,WAAWrB;IAE9C,qBACE,MAACF;QAAS,GAAGM,OAAO;;0BAClB,KAACL;gBACE,GAAGM,WAAW;gBACfgB,SAAS,CAACC;oBACRF,cAAcE;oBACdT;gBACF;gBACAD,WAAWA;gBACXL,MAAMA;gBACNC,kBAAkBA;gBAClBC,oBAAoBA;0BAEnBH;;YAEFU,0BACC,KAACnB;gBAAU,GAAGkB,SAAS;gBAAG,GAAGE,YAAY;0BACtCN;;;;AAKX,GAAG"}

package/dist/navigation/DefaultNavigationRenderer.d.ts

@@ -4,8 +4,7 @@ import { type NavigationItem, type NavigationRenderData } from "./types.js";
 /**
  * @since 6.0.0
  */
-export interface DefaultNavigationRendererProps<Item extends NavigationItem = NavigationItem, Data extends NavigationRenderData = NavigationRenderData> extends RenderRecursiveItemsProps<Item, Data> {
-}
+export type DefaultNavigationRendererProps<Item extends NavigationItem = NavigationItem, Data extends NavigationRenderData = NavigationRenderData> = RenderRecursiveItemsProps<Item, Data>;
 /**
  * **Client Component**
  *

package/dist/navigation/DefaultNavigationRenderer.js

@@ -3,7 +3,7 @@ import { Divider } from "../divider/Divider.js";
 import { CollapsibleNavGroup } from "./CollapsibleNavGroup.js";
 import { NavItemLink } from "./NavItemLink.js";
 import { NavSubheader } from "./NavSubheader.js";
-import { getHrefFromParents } from "./getHrefFromParents.js";
+import { getHrefFromParents, getNavigationGroupId } from "./utils.js";
 /**
  * **Client Component**
  *
@@ -39,10 +39,14 @@ import { getHrefFromParents } from "./getHrefFromParents.js";
             item,
             ...parents
         ];
+        const id = getNavigationGroupId(item, nextParents);
         return /*#__PURE__*/ _jsx(CollapsibleNavGroup, {
             depth: nextParents.length,
-            defaultCollapsed: ()=>!data?.pathname.includes(getHrefFromParents(nextParents)),
+            collapsed: !data?.expandedItems.has(id),
             buttonChildren: item.children,
+            toggleCollapsed: ()=>{
+                data?.toggleExpandedItem(id);
+            },
             children: children
         });
     }

package/dist/navigation/DefaultNavigationRenderer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/DefaultNavigationRenderer.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport { Divider } from \"../divider/Divider.js\";\nimport { type RenderRecursiveItemsProps } from \"../utils/RenderRecursively.js\";\nimport { CollapsibleNavGroup } from \"./CollapsibleNavGroup.js\";\nimport { NavItemLink } from \"./NavItemLink.js\";\nimport { NavSubheader } from \"./NavSubheader.js\";\nimport { getHrefFromParents } from \"./getHrefFromParents.js\";\nimport { type NavigationItem, type NavigationRenderData } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface DefaultNavigationRendererProps<\n  Item extends NavigationItem = NavigationItem,\n  Data extends NavigationRenderData = NavigationRenderData,\n> extends RenderRecursiveItemsProps<Item, Data> {}\n\n/**\n * **Client Component**\n *\n * The default behavior is attempt to render in order:\n * - `const { type, items, ...props } = item`\n * - `type === \"divider\"` - `<Divider {...props} />`\n * - `type === \"subheader\"` - `<NavSubheader {...props} />`\n * - `type === \"group\"` - `<><NavSubheader {...props} />{children}</>`\n * - `!!items` - `<CollapsibleNavGroup />`\n * - `<NavItemLink {...item} as={linkComponent} active={pathname === href} />`\n *\n * @since 6.0.0\n */\nexport function DefaultNavigationRenderer<\n  Item extends NavigationItem,\n  Data extends NavigationRenderData,\n>(props: DefaultNavigationRendererProps<Item, Data>): ReactElement {\n  const { item, data, children, parents } = props;\n  switch (item.type) {\n    case \"divider\": {\n      const { type: _type, items: _items, ...divider } = item;\n      return <Divider {...divider} />;\n    }\n    case \"subheader\": {\n      const { type: _type, items: _items, ...subheader } = item;\n      return <NavSubheader {...subheader} />;\n    }\n  }\n\n  if (item.items) {\n    const nextParents = [item, ...parents];\n    return (\n      <CollapsibleNavGroup\n        depth={nextParents.length}\n        defaultCollapsed={() =>\n          !data?.pathname.includes(getHrefFromParents(nextParents))\n        }\n        buttonChildren={item.children}\n      >\n        {children}\n      </CollapsibleNavGroup>\n    );\n  }\n\n  const href = `${getHrefFromParents(parents)}${item.href}`;\n  return (\n    <NavItemLink\n      {...item}\n      as={data?.linkComponent}\n      active={(\"active\" in item && !!item.active) || data?.pathname === href}\n      href={href}\n    />\n  );\n}\n"],"names":["Divider","CollapsibleNavGroup","NavItemLink","NavSubheader","getHrefFromParents","DefaultNavigationRenderer","props","item","data","children","parents","type","_type","items","_items","divider","subheader","nextParents","depth","length","defaultCollapsed","pathname","includes","buttonChildren","href","as","linkComponent","active"],"mappings":";AACA,SAASA,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,mBAAmB,QAAQ,2BAA2B;AAC/D,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAASC,kBAAkB,QAAQ,0BAA0B;AAW7D;;;;;;;;;;;;CAYC,GACD,OAAO,SAASC,0BAGdC,KAAiD;IACjD,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGJ;IAC1C,OAAQC,KAAKI,IAAI;QACf,KAAK;YAAW;gBACd,MAAM,EAAEA,MAAMC,KAAK,EAAEC,OAAOC,MAAM,EAAE,GAAGC,SAAS,GAAGR;gBACnD,qBAAO,KAACP;oBAAS,GAAGe,OAAO;;YAC7B;QACA,KAAK;YAAa;gBAChB,MAAM,EAAEJ,MAAMC,KAAK,EAAEC,OAAOC,MAAM,EAAE,GAAGE,WAAW,GAAGT;gBACrD,qBAAO,KAACJ;oBAAc,GAAGa,SAAS;;YACpC;IACF;IAEA,IAAIT,KAAKM,KAAK,EAAE;QACd,MAAMI,cAAc;YAACV;eAASG;SAAQ;QACtC,qBACE,KAACT;YACCiB,OAAOD,YAAYE,MAAM;YACzBC,kBAAkB,IAChB,CAACZ,MAAMa,SAASC,SAASlB,mBAAmBa;YAE9CM,gBAAgBhB,KAAKE,QAAQ;sBAE5BA;;IAGP;IAEA,MAAMe,OAAO,CAAC,EAAEpB,mBAAmBM,SAAS,EAAEH,KAAKiB,IAAI,CAAC,CAAC;IACzD,qBACE,KAACtB;QACE,GAAGK,IAAI;QACRkB,IAAIjB,MAAMkB;QACVC,QAAQ,AAAC,YAAYpB,QAAQ,CAAC,CAACA,KAAKoB,MAAM,IAAKnB,MAAMa,aAAaG;QAClEA,MAAMA;;AAGZ"}
+{"version":3,"sources":["../../src/navigation/DefaultNavigationRenderer.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport { Divider } from \"../divider/Divider.js\";\nimport { type RenderRecursiveItemsProps } from \"../utils/RenderRecursively.js\";\nimport { CollapsibleNavGroup } from \"./CollapsibleNavGroup.js\";\nimport { NavItemLink } from \"./NavItemLink.js\";\nimport { NavSubheader } from \"./NavSubheader.js\";\nimport { type NavigationItem, type NavigationRenderData } from \"./types.js\";\nimport { getHrefFromParents, getNavigationGroupId } from \"./utils.js\";\n\n/**\n * @since 6.0.0\n */\nexport type DefaultNavigationRendererProps<\n  Item extends NavigationItem = NavigationItem,\n  Data extends NavigationRenderData = NavigationRenderData,\n> = RenderRecursiveItemsProps<Item, Data>;\n\n/**\n * **Client Component**\n *\n * The default behavior is attempt to render in order:\n * - `const { type, items, ...props } = item`\n * - `type === \"divider\"` - `<Divider {...props} />`\n * - `type === \"subheader\"` - `<NavSubheader {...props} />`\n * - `type === \"group\"` - `<><NavSubheader {...props} />{children}</>`\n * - `!!items` - `<CollapsibleNavGroup />`\n * - `<NavItemLink {...item} as={linkComponent} active={pathname === href} />`\n *\n * @since 6.0.0\n */\nexport function DefaultNavigationRenderer<\n  Item extends NavigationItem,\n  Data extends NavigationRenderData,\n>(props: DefaultNavigationRendererProps<Item, Data>): ReactElement {\n  const { item, data, children, parents } = props;\n  switch (item.type) {\n    case \"divider\": {\n      const { type: _type, items: _items, ...divider } = item;\n      return <Divider {...divider} />;\n    }\n    case \"subheader\": {\n      const { type: _type, items: _items, ...subheader } = item;\n      return <NavSubheader {...subheader} />;\n    }\n  }\n\n  if (item.items) {\n    const nextParents = [item, ...parents];\n    const id = getNavigationGroupId(item, nextParents);\n    return (\n      <CollapsibleNavGroup\n        depth={nextParents.length}\n        collapsed={!data?.expandedItems.has(id)}\n        buttonChildren={item.children}\n        toggleCollapsed={() => {\n          data?.toggleExpandedItem(id);\n        }}\n      >\n        {children}\n      </CollapsibleNavGroup>\n    );\n  }\n\n  const href = `${getHrefFromParents(parents)}${item.href}`;\n  return (\n    <NavItemLink\n      {...item}\n      as={data?.linkComponent}\n      active={(\"active\" in item && !!item.active) || data?.pathname === href}\n      href={href}\n    />\n  );\n}\n"],"names":["Divider","CollapsibleNavGroup","NavItemLink","NavSubheader","getHrefFromParents","getNavigationGroupId","DefaultNavigationRenderer","props","item","data","children","parents","type","_type","items","_items","divider","subheader","nextParents","id","depth","length","collapsed","expandedItems","has","buttonChildren","toggleCollapsed","toggleExpandedItem","href","as","linkComponent","active","pathname"],"mappings":";AACA,SAASA,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,mBAAmB,QAAQ,2BAA2B;AAC/D,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,YAAY,QAAQ,oBAAoB;AAEjD,SAASC,kBAAkB,EAAEC,oBAAoB,QAAQ,aAAa;AAUtE;;;;;;;;;;;;CAYC,GACD,OAAO,SAASC,0BAGdC,KAAiD;IACjD,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGJ;IAC1C,OAAQC,KAAKI,IAAI;QACf,KAAK;YAAW;gBACd,MAAM,EAAEA,MAAMC,KAAK,EAAEC,OAAOC,MAAM,EAAE,GAAGC,SAAS,GAAGR;gBACnD,qBAAO,KAACR;oBAAS,GAAGgB,OAAO;;YAC7B;QACA,KAAK;YAAa;gBAChB,MAAM,EAAEJ,MAAMC,KAAK,EAAEC,OAAOC,MAAM,EAAE,GAAGE,WAAW,GAAGT;gBACrD,qBAAO,KAACL;oBAAc,GAAGc,SAAS;;YACpC;IACF;IAEA,IAAIT,KAAKM,KAAK,EAAE;QACd,MAAMI,cAAc;YAACV;eAASG;SAAQ;QACtC,MAAMQ,KAAKd,qBAAqBG,MAAMU;QACtC,qBACE,KAACjB;YACCmB,OAAOF,YAAYG,MAAM;YACzBC,WAAW,CAACb,MAAMc,cAAcC,IAAIL;YACpCM,gBAAgBjB,KAAKE,QAAQ;YAC7BgB,iBAAiB;gBACfjB,MAAMkB,mBAAmBR;YAC3B;sBAECT;;IAGP;IAEA,MAAMkB,OAAO,GAAGxB,mBAAmBO,WAAWH,KAAKoB,IAAI,EAAE;IACzD,qBACE,KAAC1B;QACE,GAAGM,IAAI;QACRqB,IAAIpB,MAAMqB;QACVC,QAAQ,AAAC,YAAYvB,QAAQ,CAAC,CAACA,KAAKuB,MAAM,IAAKtB,MAAMuB,aAAaJ;QAClEA,MAAMA;;AAGZ"}

package/dist/navigation/NavItemButton.d.ts

@@ -8,7 +8,7 @@ import { type NavItemContentProps } from "./types.js";
 export interface NavItemButtonRotatorProps {
     /** @defaultValue `getIcon("dropdown")` */
     icon?: ReactNode;
-    iconRotatorProps?: IconRotatorBaseProps;
+    iconRotatorProps?: Omit<IconRotatorBaseProps, "rotated">;
     disableIconRotator?: boolean;
 }
 /**

package/dist/navigation/NavItemButton.js

@@ -29,6 +29,7 @@ import { navItemContent } from "./navItemStyles.js";
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsxs(Button, {
+                "aria-expanded": !collapsed,
                 ...remaining,
                 ...elementProps,
                 ref: ref,

package/dist/navigation/NavItemButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/NavItemButton.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type MouseEventHandler, type ReactNode } from \"react\";\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { IconRotator, type IconRotatorBaseProps } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { Tooltip } from \"../tooltip/Tooltip.js\";\nimport { useTooltip } from \"../tooltip/useTooltip.js\";\nimport { navItemContent } from \"./navItemStyles.js\";\nimport { type NavItemContentProps } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemButtonRotatorProps {\n  /** @defaultValue `getIcon(\"dropdown\")` */\n  icon?: ReactNode;\n  iconRotatorProps?: IconRotatorBaseProps;\n  disableIconRotator?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemButtonProps\n  extends Omit<ButtonProps, \"children\">,\n    NavItemButtonRotatorProps,\n    NavItemContentProps {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  collapsed: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @since 6.0.0\n */\nexport const NavItemButton = forwardRef<HTMLButtonElement, NavItemButtonProps>(\n  function NavItemButton(props, ref) {\n    const {\n      className,\n      collapsed,\n      icon,\n      iconRotatorProps,\n      disableIconRotator,\n      children,\n      beforeAddon,\n      afterAddon,\n      spanProps,\n      onBlur,\n      onContextMenu,\n      onFocus,\n      onMouseEnter,\n      onMouseLeave,\n      onTouchEnd,\n      onTouchStart,\n      tooltipOptions,\n      ...remaining\n    } = props;\n\n    const { elementProps, tooltipProps, overflowRef } = useTooltip({\n      overflowOnly: true,\n      defaultPosition: \"right\",\n      ...tooltipOptions,\n      onBlur,\n      onContextMenu,\n      onFocus,\n      onMouseEnter,\n      onMouseLeave,\n      onTouchEnd,\n      onTouchStart,\n    });\n\n    return (\n      <>\n        <Button\n          {...remaining}\n          {...elementProps}\n          ref={ref}\n          className={navItemContent({ className })}\n        >\n          {beforeAddon}\n          <span\n            {...spanProps}\n            ref={overflowRef}\n            className={cssUtils({\n              className: spanProps?.className,\n              textOverflow: \"ellipsis\",\n            })}\n          >\n            {children}\n          </span>\n          {afterAddon}\n          {!disableIconRotator && (\n            <IconRotator {...iconRotatorProps} rotated={!collapsed}>\n              {getIcon(\"dropdown\", icon)}\n            </IconRotator>\n          )}\n        </Button>\n        <Tooltip {...tooltipProps}>{children}</Tooltip>\n      </>\n    );\n  }\n);\n"],"names":["forwardRef","Button","cssUtils","IconRotator","getIcon","Tooltip","useTooltip","navItemContent","NavItemButton","props","ref","className","collapsed","icon","iconRotatorProps","disableIconRotator","children","beforeAddon","afterAddon","spanProps","onBlur","onContextMenu","onFocus","onMouseEnter","onMouseLeave","onTouchEnd","onTouchStart","tooltipOptions","remaining","elementProps","tooltipProps","overflowRef","overflowOnly","defaultPosition","span","textOverflow","rotated"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAgD,QAAQ;AAC3E,SAASC,MAAM,QAA0B,sBAAsB;AAC/D,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,WAAW,QAAmC,yBAAyB;AAChF,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,cAAc,QAAQ,qBAAqB;AAwBpD;;;;CAIC,GACD,OAAO,MAAMC,8BAAgBR,WAC3B,SAASQ,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,IAAI,EACJC,gBAAgB,EAChBC,kBAAkB,EAClBC,QAAQ,EACRC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,aAAa,EACbC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,UAAU,EACVC,YAAY,EACZC,cAAc,EACd,GAAGC,WACJ,GAAGnB;IAEJ,MAAM,EAAEoB,YAAY,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAGzB,WAAW;QAC7D0B,cAAc;QACdC,iBAAiB;QACjB,GAAGN,cAAc;QACjBP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE;;0BACE,MAACzB;gBACE,GAAG2B,SAAS;gBACZ,GAAGC,YAAY;gBAChBnB,KAAKA;gBACLC,WAAWJ,eAAe;oBAAEI;gBAAU;;oBAErCM;kCACD,KAACiB;wBACE,GAAGf,SAAS;wBACbT,KAAKqB;wBACLpB,WAAWT,SAAS;4BAClBS,WAAWQ,WAAWR;4BACtBwB,cAAc;wBAChB;kCAECnB;;oBAEFE;oBACA,CAACH,oCACA,KAACZ;wBAAa,GAAGW,gBAAgB;wBAAEsB,SAAS,CAACxB;kCAC1CR,QAAQ,YAAYS;;;;0BAI3B,KAACR;gBAAS,GAAGyB,YAAY;0BAAGd;;;;AAGlC,GACA"}
+{"version":3,"sources":["../../src/navigation/NavItemButton.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type MouseEventHandler, type ReactNode } from \"react\";\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { IconRotator, type IconRotatorBaseProps } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { Tooltip } from \"../tooltip/Tooltip.js\";\nimport { useTooltip } from \"../tooltip/useTooltip.js\";\nimport { navItemContent } from \"./navItemStyles.js\";\nimport { type NavItemContentProps } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemButtonRotatorProps {\n  /** @defaultValue `getIcon(\"dropdown\")` */\n  icon?: ReactNode;\n  iconRotatorProps?: Omit<IconRotatorBaseProps, \"rotated\">;\n  disableIconRotator?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemButtonProps\n  extends Omit<ButtonProps, \"children\">,\n    NavItemButtonRotatorProps,\n    NavItemContentProps {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  collapsed: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @since 6.0.0\n */\nexport const NavItemButton = forwardRef<HTMLButtonElement, NavItemButtonProps>(\n  function NavItemButton(props, ref) {\n    const {\n      className,\n      collapsed,\n      icon,\n      iconRotatorProps,\n      disableIconRotator,\n      children,\n      beforeAddon,\n      afterAddon,\n      spanProps,\n      onBlur,\n      onContextMenu,\n      onFocus,\n      onMouseEnter,\n      onMouseLeave,\n      onTouchEnd,\n      onTouchStart,\n      tooltipOptions,\n      ...remaining\n    } = props;\n\n    const { elementProps, tooltipProps, overflowRef } = useTooltip({\n      overflowOnly: true,\n      defaultPosition: \"right\",\n      ...tooltipOptions,\n      onBlur,\n      onContextMenu,\n      onFocus,\n      onMouseEnter,\n      onMouseLeave,\n      onTouchEnd,\n      onTouchStart,\n    });\n\n    return (\n      <>\n        <Button\n          aria-expanded={!collapsed}\n          {...remaining}\n          {...elementProps}\n          ref={ref}\n          className={navItemContent({ className })}\n        >\n          {beforeAddon}\n          <span\n            {...spanProps}\n            ref={overflowRef}\n            className={cssUtils({\n              className: spanProps?.className,\n              textOverflow: \"ellipsis\",\n            })}\n          >\n            {children}\n          </span>\n          {afterAddon}\n          {!disableIconRotator && (\n            <IconRotator {...iconRotatorProps} rotated={!collapsed}>\n              {getIcon(\"dropdown\", icon)}\n            </IconRotator>\n          )}\n        </Button>\n        <Tooltip {...tooltipProps}>{children}</Tooltip>\n      </>\n    );\n  }\n);\n"],"names":["forwardRef","Button","cssUtils","IconRotator","getIcon","Tooltip","useTooltip","navItemContent","NavItemButton","props","ref","className","collapsed","icon","iconRotatorProps","disableIconRotator","children","beforeAddon","afterAddon","spanProps","onBlur","onContextMenu","onFocus","onMouseEnter","onMouseLeave","onTouchEnd","onTouchStart","tooltipOptions","remaining","elementProps","tooltipProps","overflowRef","overflowOnly","defaultPosition","aria-expanded","span","textOverflow","rotated"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAgD,QAAQ;AAC3E,SAASC,MAAM,QAA0B,sBAAsB;AAC/D,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,WAAW,QAAmC,yBAAyB;AAChF,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,cAAc,QAAQ,qBAAqB;AAwBpD;;;;CAIC,GACD,OAAO,MAAMC,8BAAgBR,WAC3B,SAASQ,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,IAAI,EACJC,gBAAgB,EAChBC,kBAAkB,EAClBC,QAAQ,EACRC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,aAAa,EACbC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,UAAU,EACVC,YAAY,EACZC,cAAc,EACd,GAAGC,WACJ,GAAGnB;IAEJ,MAAM,EAAEoB,YAAY,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAGzB,WAAW;QAC7D0B,cAAc;QACdC,iBAAiB;QACjB,GAAGN,cAAc;QACjBP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE;;0BACE,MAACzB;gBACCiC,iBAAe,CAACtB;gBACf,GAAGgB,SAAS;gBACZ,GAAGC,YAAY;gBAChBnB,KAAKA;gBACLC,WAAWJ,eAAe;oBAAEI;gBAAU;;oBAErCM;kCACD,KAACkB;wBACE,GAAGhB,SAAS;wBACbT,KAAKqB;wBACLpB,WAAWT,SAAS;4BAClBS,WAAWQ,WAAWR;4BACtByB,cAAc;wBAChB;kCAECpB;;oBAEFE;oBACA,CAACH,oCACA,KAACZ;wBAAa,GAAGW,gBAAgB;wBAAEuB,SAAS,CAACzB;kCAC1CR,QAAQ,YAAYS;;;;0BAI3B,KAACR;gBAAS,GAAGyB,YAAY;0BAAGd;;;;AAGlC,GACA"}

package/dist/navigation/NavItemLink.d.ts

@@ -1,10 +1,11 @@
 import { type AnchorHTMLAttributes, type LiHTMLAttributes } from "react";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { type PropsWithRef } from "../types.js";
 import { type NavItemContentProps, type NavigationLinkComponent } from "./types.js";
 /**
  * @since 6.0.0
  */
-export interface NavItemLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children">, NavItemContentProps {
+export interface NavItemLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children">, NavItemContentProps, ComponentWithRippleProps {
     /** @defaultValue `"a"` */
     as?: NavigationLinkComponent;
     href: string;
@@ -24,7 +25,7 @@ export interface NavItemLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorEl
     disabled?: boolean;
     /**
      * Set this to `true` to prevent this item from scrolling into view when it
-     * becomes active. It is generally recommended to keep this `true` unless a
+     * becomes active. It is generally recommended to keep this `false` unless a
      * custom implementation has been added so that when the temporary navigation
      * will show the active route.
      *