npm - @react-md/core - Versions diffs - 1.0.0-next.7 → 1.0.0-next.9 - Mend

@react-md/core 1.0.0-next.7 → 1.0.0-next.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (713) hide show

package/dist/menu/Menu.js CHANGED Viewed

@@ -10,6 +10,7 @@ import { useFixedPositioning } from "../positioning/useFixedPositioning.js";
 import { useScrollLock } from "../scroll/useScrollLock.js";
 import { useScaleTransition } from "../transition/useScaleTransition.js";
 import { useEnsuredId } from "../useEnsuredId.js";
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect.js";
 import { MenuConfigurationProvider, useMenuConfiguration } from "./MenuConfigurationProvider.js";
 import { MenuSheet } from "./MenuSheet.js";
 import { MenuWidget } from "./MenuWidget.js";
@@ -125,7 +126,7 @@ const noop = ()=>{
             return isHoverDisabled || cancelUnmountFocus.current || root && !!activeId && id !== activeId;
         }
     });
-    const { ref, style, callbacks } = useFixedPositioning({
+    const { ref, style, callbacks, updateStyle } = useFixedPositioning({
         ...transitionOptions,
         onEnter,
         style: isSheet ? propStyle : menuStyle,
@@ -211,6 +212,16 @@ const noop = ()=>{
         role,
         visible
     ]);
+    useIsomorphicLayoutEffect(()=>{
+        if (!visible) {
+            return;
+        }
+        updateStyle();
+    }, [
+        updateStyle,
+        children,
+        visible
+    ]);
     return /*#__PURE__*/ _jsx(MenuConfigurationProvider, {
         horizontal: horizontal,
         renderAsSheet: renderAsSheet,

package/dist/menu/Menu.js.map CHANGED Viewed

	@@ -1 +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 {\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/** @remarks \\@since 5.0.0 /\nexport type MenuTransitionProps = Omit<\n ScaleTransitionHookOptions<HTMLDivElement>,\n \"transitionIn\" \| \"vertical\" \| \"nodeRef\"\n>;\n\n/\n @remarks \\@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 @remarks\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 @remarks \\@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 @remarks \\@since 6.0.0\n /\nexport type MenuFixedPositioningOptions = Omit<\n FixedPositioningOptions<HTMLElement, HTMLDivElement>,\n \"onScroll\" \| \"onResize\"\n>;\n\n/\n @remarks\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 @remarks\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 } = 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\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","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","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":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,EACVC,SAAS,EACTC,MAAM,QAGD,QAAQ;AAEf,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,sBAAsB,QAAQ,gDAAgD;AAEvF,SAASC,UAAU,QAAQ,sCAAsC;AAEjE,SAASC,MAAM,QAAQ,sBAAsB;AAE7C,SACEC,mBAAmB,QAEd,wCAAwC;AAC/C,SAASC,aAAa,QAAQ,6BAA6B;AAC3D,SACEC,kBAAkB,QAEb,sCAAsC;AAE7C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SACEC,yBAAyB,EACzBC,oBAAoB,QAGf,iCAAiC;AACxC,SAASC,SAAS,QAAwC,iBAAiB;AAC3E,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,gBAAgB,QAAQ,aAAa;AAW9C,MAAMC,OAAO;AACX,aAAa;AACf;AA2MA;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,qBAAOlB,WAClB,SAASkB,KAAKC,KAAK,EAAEC,OAAO;IAC1B,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAOC,SAAS,EAChBC,OAAO,MAAM,EACbC,QAAQ,EACRC,YAAYC,WAAW,EACvBC,aAAaC,YAAY,EACzBC,aAAaC,YAAY,EACzBC,eAAeC,cAAc,EAC7BC,eAAeC,cAAc,EAC7BC,mBAAmBC,kBAAkB,EACrCC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,SAAS,EACTC,aAAa,EACbC,mBAAmB,KAAK,EACxBC,YAAY,IAAI,EAChBC,WAAW,CAAC,CAAC,EACbC,OAAO,EACPC,SAAS,EACTC,UAAU,EACVC,OAAO,EACPC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,aAAatC,IAAI,EACjBuC,YAAYvC,IAAI,EAChBwC,MAAM,EACNC,SAAS,EACTC,WAAW1C,IAAI,EACf2C,YAAY3C,IAAI,EAChB4C,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,OAAO,EACPC,cAAc,EACdC,QAAQ,EACRC,MAAM,EACNC,gBAAgB,KAAK,EACrBC,gBAAgB,KAAK,EACrBC,gBAAgB,KAAK,EACrBC,QAAQ,EACRC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,KAAK,EACLC,kBAAkB,IAAI,EACtBC,cAAc,EACdC,eAAe,EACfC,eAAe,EACfC,QAAQ,EACRC,QAAQ,EACRC,uBAAuB,EACvBC,eAAeC,iBAAiB,EAChCC,iBAAiB,EACjB,GAAGC,WACJ,GAAGnE;IACJ,MAAM,EAAE,cAAcoE,SAAS,EAAE,mBAAmBC,cAAc,EAAE,GAClErE;IAEF,MAAME,KAAKX,aAAaY,QAAQ;IAChC,MAAM,EACJmE,IAAI,EACJC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EACfC,eAAe,EACfC,gBAAgB,EACjB,GAAGhF;IACJ,MAAM,EACJY,UAAU,EACVE,WAAW,EACXE,WAAW,EACXE,aAAa,EACbE,aAAa,EACbE,iBAAiB,EAClB,GAAGzB,qBAAqBO;IACzB,MAAM,EAAE6E,OAAO,EAAE,GAAG3F;IACpB,MAAM4F,UACJhE,kBAAkB,QAASA,kBAAkB,WAAW+D;IAE1D,MAAME,UAAUhG,OAAO;IACvB,MAAMiG,qBAAqBjG,OAAO;IAClC,MAAMkG,qBAAqB;QACzBD,mBAAmBE,OAAO,GAAG;QAC7BpC;IACF;IACA,MAAMqC,OAAOlG;IACb,MAAMmG,QAAQD,SAAS;IAEvB,MAAM,EAAEE,aAAa,EAAEC,iBAAiB,EAAE,GAAGtG,kBAAkB;QAC7DuG,SAAStF;QACTuF,UAAU3C;QACVJ,WAAUgD,KAAK;YACbhD,UAAUgD;YAEV,kEAAkE;YAClE,oBAAoB;YACpB,IAAIX,SAAS;gBACX;YACF;YAEA,OAAQW,MAAMC,GAAG;gBACf,KAAK;oBACH,iEAAiE;oBACjE,+BAA+B;oBAC/BD,MAAME,eAAe;oBACrBf;oBACA9B;oBACA;gBACF,KAAK;oBACH,oEAAoE;oBACpE,iDAAiD;oBACjD2C,MAAMG,cAAc;oBAEpB,IAAI,CAACpB,UAAU;wBACb,4DAA4D;wBAC5DiB,MAAME,eAAe;oBACvB;oBACAf;oBACA9B;oBACA;gBACF,KAAK;oBACH,IAAI,CAACwB,QAAQE,YAAYhE,YAAY;wBACnCiF,MAAME,eAAe;wBACrBF,MAAMG,cAAc;wBACpB9C;oBACF;oBACA;gBACF,KAAK;oBACH,IAAI,CAACwB,QAAQE,YAAY,CAAChE,YAAY;wBACpCiF,MAAME,eAAe;wBACrBF,MAAMG,cAAc;wBACpB9C;oBACF;oBACA;YACJ;QACF;QACAV,YAAWyD,SAAS;YAClBzD,WAAWyD;YACXd,QAAQG,OAAO,GAAG;QACpB;QACA7C,WAAUwD,SAAS;YACjBxD,UAAUwD;YACVd,QAAQG,OAAO,GAAG;YAClBF,mBAAmBE,OAAO,GAAG;YAC7BR,gBAAgBQ,OAAO,GAAG;QAC5B;QACA1C;YACEA;YACAuC,QAAQG,OAAO,GAAG;QACpB;QACA3C;QACA2B;QACA4B,qBAAoBC,IAAI;YACtB,IAAIzF,SAAS,WAAW;gBACtB,OAAO,CAACwE;YACV;YAEA,IAAIiB,SAAS,YAAY;gBACvB,OAAOjB;YACT;YAEA,MAAMkB,kBAAkBZ,SAAST,gBAAgBO,OAAO,KAAK;YAC7D,IAAIa,SAAS,SAAS;gBACpB,OAAOC;YACT;YAEA,OACEA,mBACAhB,mBAAmBE,OAAO,IACzBZ,QAAQ,CAAC,CAACG,YAAYvE,OAAOuE;QAElC;IACF;IAEA,MAAM,EAAEwB,GAAG,EAAE7F,KAAK,EAAE8F,SAAS,EAAE,GAAG9G,oBAAoB;QACpD,GAAGkG,iBAAiB;QACpBnD;QACA/B,OAAO0E,UAAUzE,YAAYkB;QAC7BK;QACAoB,QAAQnD,iBAAiB;YACvBmD;YACAuB;YACAxB;YACAyB,UAAU,CAACF,QAAQE;YACnBhE;QACF;QACA4C;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAoC,UAAUlD,gBAAgBgC,qBAAqBmB;QAC/CC,UAASC,MAAM,EAAEC,IAAI;YACnB,IAAI,CAACA,KAAK1D,OAAO,IAAIK,eAAe;gBAClC+B;YACF;QACF;IACF;IACA,MAAM,EAAEuB,QAAQ,EAAExC,aAAa,EAAEyC,YAAY,EAAE,GAAGnH,mBAAmB;QACnEiG,SAASU;QACTpE,WAAWjD,IAAI,CAACkG,WAAWtD,eAAeK;QAC1C6E,cAAc7D;QACd8D,UAAU,CAACnG;QACXkB;QACAK,SAAS+C,WAAWZ,oBAAoB,IAAInC;QAC5CD;QACAE;QACAC;QACAC;QACAI;QACAC,WAAW+C,kBAAkB/C,SAAS;QACtCqE,cAAc;QACd,GAAGV,SAAS;IACd;IACA7G,cAAcwD,WAAWM;IAEzB,2EAA2E;IAC3E,yEAAyE;IACzE,qEAAqE;IACrE,MAAM0D,OAAO9H,OAAO+D;IACpBhE,UAAU;QACR+H,KAAK3B,OAAO,GAAGpC;IACjB;IACAhE,UAAU;QACR,IAAI,CAAC+D,SAAS;YACZ;QACF;QAEA,MAAMiE,WAAW,CAACrB;YAChB,uDAAuD;YACvD,IAAI,CAACV,QAAQG,OAAO,EAAE;gBACpB;YACF;YAEA,wEAAwE;YACxE,wEAAwE;YACxE,mEAAmE;YACnEF,mBAAmBE,OAAO,GACxB,CAAEO,CAAAA,MAAMsB,MAAM,YAAYC,WAAU,KACpC,CAACvB,MAAMsB,MAAM,CAACE,OAAO,CAAC,CAAC,OAAO,EAAE3G,KAAK,EAAE,CAAC;YAE1C,8DAA8D;YAC9DuG,KAAK3B,OAAO;YACZN;QACF;QAEA,0EAA0E;QAC1E,wDAAwD;QACxD,MAAMsC,QAAQC,OAAOC,qBAAqB,CAAC;YACzCD,OAAOE,gBAAgB,CAAC,SAASP;QACnC;QAEA,OAAO;YACLK,OAAOG,oBAAoB,CAACJ;YAC5BC,OAAOI,mBAAmB,CAAC,SAAST;QACtC;IACF,GAAG;QAAClC;QAAkBtE;QAAMuC;KAAQ;IAEpC,qBACE,KAACrD;QACCgB,YAAYA;QACZM,eAAeA;QACfF,aAAaA;QACbF,aAAaA;QACbM,eAAeA;QACfE,mBAAmBA;kBAEnB,cAAA,KAACxB;YACC8H,cAAYpD;YACZqD,mBAAiBpD;YACjBqD,QAAQhH;YACRiH,QAAQ/G;YACRgH,UAAU5G;YACV6G,cAAc3G;YACd2B,SAASA;YACTiF,SAAShD;YACThC,gBAAgBA;YAChB1C,OAAOiB;YACPQ,WAAWP;YACX0C,eAAeC;YACfvC,WAAWA;YACXwC,mBAAmBA;YAClB,GAAG9C,UAAU;sBAEd,cAAA,KAACjC;gBAAO4I,UAAUjD,WAAYb,CAAAA,qBAAqBD,aAAY;0BAC5D,AAACwC,CAAAA,YAAY1B,OAAM,mBAClB,KAACnF;oBACE,GAAGwE,SAAS;oBACZ,GAAGsC,YAAY;oBACf,GAAGpB,aAAa;oBACjBnF,IAAIA;oBACJI,MAAMA;oBACNF,OAAO0E,UAAUzE,YAAYD;oBAC7B0E,SAASA;oBACTnD,UAAUA;oBACVnB,YAAYA;oBACZkC,WAAWA;oBACXC,WAAWA;oBACXC,eAAeA;oBACfnB,kBAAkBA;oBAClBuD,oBAAoBA;8BAEnBzE;;;;;AAOf,GACA"}
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/** @remarks \\@since 5.0.0 /\nexport type MenuTransitionProps = Omit<\n ScaleTransitionHookOptions<HTMLDivElement>,\n \"transitionIn\" \| \"vertical\" \| \"nodeRef\"\n>;\n\n/\n @remarks \\@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 @remarks\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 @remarks \\@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 @remarks \\@since 6.0.0\n /\nexport type MenuFixedPositioningOptions = Omit<\n FixedPositioningOptions<HTMLElement, HTMLDivElement>,\n \"onScroll\" \| \"onResize\"\n>;\n\n/\n @remarks\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 @remarks\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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"}

package/dist/menu/_menu.scss CHANGED Viewed

@@ -44,6 +44,7 @@ $variables: (background-color, color, min-width, spacing);
   .rmd-menu {
     outline: none;
     overflow: auto;
+    overflow-wrap: anywhere;
     &--elevated {
       @include box-shadows.box-shadow(

package/dist/menu/useContextMenu.d.ts CHANGED Viewed

@@ -57,15 +57,15 @@ export interface ContextMenuImplementation extends UseStateObject<"visible", boo
  *   const { menuProps, onContextMenu } = useContextMenu();
  *
  *   return (
- *     <div onContextMenu={onContextMenu}>
- *       <textarea />
+ *     <>
+ *       <textarea onContextMenu={onContextMenu} />
  *       <Menu {...menuProps}>
  *         <MenuItem>Cut</MenuItem>
  *         <MenuItem>Copy</MenuItem>
  *         <MenuItem>Paste</MenuItem>
  *         <MenuItem>Undo</MenuItem>
  *       </Menu>
- *     </div>
+ *     </>
  *   );
  * }
  * ```

package/dist/menu/useContextMenu.js CHANGED Viewed

@@ -17,15 +17,15 @@ const noop = ()=>{
  *   const { menuProps, onContextMenu } = useContextMenu();
  *
  *   return (
- *     <div onContextMenu={onContextMenu}>
- *       <textarea />
+ *     <>
+ *       <textarea onContextMenu={onContextMenu} />
  *       <Menu {...menuProps}>
  *         <MenuItem>Cut</MenuItem>
  *         <MenuItem>Copy</MenuItem>
  *         <MenuItem>Paste</MenuItem>
  *         <MenuItem>Undo</MenuItem>
  *       </Menu>
- *     </div>
+ *     </>
  *   );
  * }
  * ```

package/dist/menu/useContextMenu.js.map CHANGED Viewed

	@@ -1 +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/** @remarks \\@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 @remarks\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 @remarks\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\n * 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 * <~~div~~ onContextMenu={onContextMenu}~~>\n~~ * <textarea />\n * <Menu {...menuProps}>\n * <MenuItem>Cut</MenuItem>\n * <MenuItem>Copy</MenuItem>\n * <MenuItem>Paste</MenuItem>\n * <MenuItem>Undo</MenuItem>\n * </Menu>\n * ~~</div>\~~n * );\n * }\n * ```\n \n @remarks\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;AAqDtE,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,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"}
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/** @remarks \\@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 @remarks\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 @remarks\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\n * 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 @remarks\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;AAqDtE,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,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 CHANGED Viewed

@@ -17,6 +17,23 @@ import type { NonNullMutableRef, NonNullRef, UseStateSetter } from "../types.js"
  * @remarks \@since 6.0.0
  */
 export type TabIndexBehavior = "roving" | "virtual";
+/**
+ * This should be used for specific widgets that should not include all
+ * focusable elements and instead only specific elements.
+ *
+ * @example
+ * ```ts
+ * const getExpansionPanelsOnly: GetFocusableElements = (container) =>
+ *   [...container.querySelectorAll(".rmd-expansion-panel__button")];
+ *
+ * const getTreeItemsOnly: GetFocusableElements = (container) =>
+ *   [...container.querySelectorAll("[role='treeitem']")];
+ * ```
+ *
+ * @defaultValue `getFocusableElements`
+ * @see the default `getFocusableElements` function.
+ */
+export type GetFocusableElements = (container: HTMLElement, programmatic: boolean) => readonly HTMLElement[];
 /**
  * @remarks \@since 5.0.0
  */
@@ -126,7 +143,12 @@ export type GetDefaultFocusedIndex = (options: FocusableIndexOptions) => number;
  * @remarks \@since 6.0.0
  * @internal
  */
-export interface FocusChangeEvent {
+export type ExtendKeyDown<E extends HTMLElement> = (movementData: KeyboardMovementExtensionData<E>) => void;
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export interface KeyboardMovementFocusChangeEvent {
     index: number;
     element: HTMLElement;
 }
@@ -134,7 +156,7 @@ export interface FocusChangeEvent {
  * @remarks \@since 6.0.0
  * @internal
  */
-export type KeyboardMovementFocusChangeEvent = (event: FocusChangeEvent) => void;
+export type KeyboardMovementFocusChangeEventHandler = (event: KeyboardMovementFocusChangeEvent) => void;
 /**
  * @remarks \@since 6.0.0
  * @internal
@@ -155,14 +177,16 @@ export interface KeyboardMovementProviderOptions<E extends HTMLElement> extends
     onClick?(event: MouseEvent<E>): void;
     onFocus?(event: FocusEvent<E>): void;
     onKeyDown?(event: KeyboardEvent<E>): void;
+    /** @defaultValue `false` */
+    disabled?: boolean;
     /**
      * This is used to implement custom keyboard movement for the `keydown` event.
      */
-    extendKeyDown?(movementData: KeyboardMovementExtensionData<E>): void;
+    extendKeyDown?: ExtendKeyDown<E>;
     /**
      * Triggered whenever the focus changes.
      */
-    onFocusChange?: KeyboardMovementFocusChangeEvent;
+    onFocusChange?: KeyboardMovementFocusChangeEventHandler;
     /**
      * From what I've understood so far, programmatically focusable elements
      * should only be included when disabled elements via `aria-disabled` are
@@ -171,28 +195,22 @@ export interface KeyboardMovementProviderOptions<E extends HTMLElement> extends
      * @defaultValue `includeDisabled`
      */
     programmatic?: boolean;
-    /**
-     * This should be used for specific widgets that should not include all
-     * focusable elements and instead only specific elements.
-     *
-     * @example
-     * ```ts
-     * const getExpansionPanelsOnly = (container: HTMLElement): readonly HTMLElement[] =>
-     *   container.querySelectorAll(".rmd-expansion-panel__button");
-     *
-     * const getTreeItemsOnly = (container: HTMLElement): readonly HTMLElement[] =>
-     *   container.querySelectorAll("[role='treeitem']");
-     * ```
-     *
-     * @defaultValue `getFocusableElements`
-     * @see the default `getFocusableElements` function.
-     */
-    getFocusableElements?(container: HTMLElement, programmatic: boolean): readonly HTMLElement[];
+    /** @see {@link GetFocusableElements} */
+    getFocusableElements?: GetFocusableElements;
     /**
      * This can be used to set the initial focus index whenever the container
      * element is first focused or the focus index is `-1` on other focus events.
      */
     getDefaultFocusedIndex?: GetDefaultFocusedIndex;
+    /**
+     * This was added to support editable combobox behavior. As the user types or
+     * uses native input keyboard behavior, the focus index should be reset to
+     * `-1` so that the next "ArrowDown" event focuses the first option again
+     * instead of the last selected one.
+     *
+     * @defaultValue `false`
+     */
+    isNegativeOneAllowed?: boolean;
 }
 /**
  * @remarks \@since 6.0.0
@@ -226,5 +244,6 @@ export interface KeyboardMovementProviderImplementation<E extends HTMLElement> {
     movementProps: Readonly<KeyboardMovementProps<E>>;
     movementContext: Readonly<KeyboardMovementContext>;
     currentFocusIndex: NonNullMutableRef<number>;
+    activeDescendantId: string;
     setActiveDescendantId: UseStateSetter<string>;
 }

package/dist/movement/types.js.map CHANGED Viewed

	@@ -1 +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 @remarks \\@since 6.0.0\n /\nexport type TabIndexBehavior = \"roving\" \| \"virtual\";\n\n/\n @remarks \\@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 @remarks \\@since 5.0.0\n /\nexport type KeyboardMovementConfig = Required<KeyboardMovementConfiguration>;\n\n/\n @remarks \\@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 @remarks \\@since 5.1.2\n * @defaultValue `false`\n /\n horizontal?: boolean;\n}\n\n/\n @remarks\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 @remarks \\@since 6.0.0\n * @internal\n /\nexport interface FocusableIndexOptions {\n focusables: readonly HTMLElement[];\n includeDisabled: boolean;\n}\n\n/\n @remarks \\@since 6.0.0\n * @internal\n /\nexport type GetDefaultFocusedIndex = (options: FocusableIndexOptions) => number;\n\n/\n @remarks \\@since 6.0.0\n * @internal\n /\nexport interface ~~FocusChangeEvent~~ {\n index: number;\n element: HTMLElement;\n}\n\n/\n @remarks \\@since 6.0.0\n * @internal\n /\nexport type ~~KeyboardMovementFocusChangeEvent~~ = (\n event: ~~FocusChangeEvent~~\n) => void;\n\n/\n @remarks \\@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 @remarks \\@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 /\n This is used to implement custom keyboard movement for the `keydown` event.\n /\n extendKeyDown~~?(movementData:~~ ~~KeyboardMovementExtensionData~~<E~~>): void;\~~n\n /\n Triggered whenever the focus changes.\n /\n onFocusChange?: ~~KeyboardMovementFocusChangeEvent~~;\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 /\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~~ = ~~(container:~~ ~~HTMLElement):~~ ~~readonly~~ ~~HTMLElement[]~~ ~~=>\n * container~~.querySelectorAll(\".rmd-expansion-panel__button\");\n \n ~~const~~ ~~getTreeItemsOnly~~ = ~~(container:~~ ~~HTMLElement): readonly HTMLElement[] =>\n * container.querySelectorAll(~~\~~"[role='treeitem']\");\~~n * ```\n \n ~~@defaultValue~~ `getFocusableElements`\n * ~~@see~~ the ~~default~~ ~~`getFocusableElements`~~ ~~function.\n /\n getFocusableElements?(\n container:~~ ~~HTMLElement,\n programmatic:~~ ~~boolean\n ):~~ ~~readonly HTMLElement[];\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/\n @remarks \\@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 @remarks \\@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 setActiveDescendantId: UseStateSetter<string>;\n}\n"],"names":[],"mappings":"~~AA4QA~~;;;CAGC,GACD,~~WAKC~~"}
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 @remarks \\@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 @remarks \\@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 @remarks \\@since 5.0.0\n /\nexport type KeyboardMovementConfig = Required<KeyboardMovementConfiguration>;\n\n/\n @remarks \\@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 @remarks \\@since 5.1.2\n * @defaultValue `false`\n /\n horizontal?: boolean;\n}\n\n/\n @remarks\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 @remarks \\@since 6.0.0\n * @internal\n /\nexport interface FocusableIndexOptions {\n focusables: readonly HTMLElement[];\n includeDisabled: boolean;\n}\n\n/\n @remarks \\@since 6.0.0\n * @internal\n /\nexport type GetDefaultFocusedIndex = (options: FocusableIndexOptions) => number;\n\n/\n @remarks \\@since 6.0.0\n * @internal\n /\nexport type ExtendKeyDown<E extends HTMLElement> = (\n movementData: KeyboardMovementExtensionData<E>\n) => void;\n\n/\n @remarks \\@since 6.0.0\n * @internal\n /\nexport interface KeyboardMovementFocusChangeEvent {\n index: number;\n element: HTMLElement;\n}\n\n/\n @remarks \\@since 6.0.0\n * @internal\n /\nexport type KeyboardMovementFocusChangeEventHandler = (\n event: KeyboardMovementFocusChangeEvent\n) => void;\n\n/\n @remarks \\@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 @remarks \\@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 @remarks \\@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 @remarks \\@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":"AAoSA;;;CAGC,GACD,WAMC"}

package/dist/movement/useKeyboardMovementProvider.js CHANGED Viewed

@@ -157,7 +157,7 @@ const returnNegative1 = ()=>-1;
  * @remarks \@since 6.0.0
  * @internal
  */ export function useKeyboardMovementProvider(options = {}) {
-    const { onClick = noop, onFocus = noop, onKeyDown = noop, loopable = false, searchable = false, horizontal = false, includeDisabled = false, tabIndexBehavior, extendKeyDown = noop, onFocusChange = noop, programmatic = includeDisabled, incrementKeys: propIncrementKeys, decrementKeys: propDecrementKeys, jumpToFirstKeys: propJumpToFirstKeys, jumpToLastKeys: propJumpToLastKeys, getFocusableElements = defaultGetFocusableElements, getDefaultFocusedIndex = returnNegative1 } = options;
+    const { onClick = noop, onFocus = noop, onKeyDown = noop, loopable = false, disabled, searchable = false, horizontal = false, includeDisabled = false, tabIndexBehavior, extendKeyDown = noop, onFocusChange = noop, programmatic = includeDisabled, incrementKeys: propIncrementKeys, decrementKeys: propDecrementKeys, jumpToFirstKeys: propJumpToFirstKeys, jumpToLastKeys: propJumpToLastKeys, getFocusableElements = defaultGetFocusableElements, getDefaultFocusedIndex = returnNegative1, isNegativeOneAllowed = false } = options;
     const isRTL = useDir().dir === "rtl";
     let defaults;
     if (horizontal) {
@@ -208,14 +208,21 @@ const returnNegative1 = ()=>-1;
             };
         }, []);
     }
+    let tabIndex;
+    if (tabIndexBehavior) {
+        tabIndex = disabled || tabIndexBehavior === "roving" && activeDescendantId ? -1 : 0;
+    }
     return {
         movementProps: {
             "aria-activedescendant": tabIndexBehavior === "virtual" ? activeDescendantId : undefined,
-            tabIndex: tabIndexBehavior === "roving" ? activeDescendantId ? -1 : 0 : undefined,
+            tabIndex,
             // Note: This used to be on the `onFocus` event, but this causes issues in
             // Chromium browsers for drag and drop behavior
             onClick (event) {
                 onClick(event);
+                if (disabled) {
+                    return;
+                }
                 // This makes it so you can click an element with a mouse and then
                 // keyboard navigate from that element instead of the last keyboard focus
                 // element
@@ -264,7 +271,7 @@ const returnNegative1 = ()=>-1;
                 // This allows my custom `getDefaultFocusedIndex` implementations to
                 // have a nice fallback without having to re-implement the "focus
                 // first" behavior
-                if (defaultFocusIndex === -1) {
+                if (!isNegativeOneAllowed && defaultFocusIndex === -1) {
                     if (tabIndexBehavior === "virtual") {
                         // virtual keyboard navigation **must** always focus at least one element
                         defaultFocusIndex = getVirtualFocusDefaultIndex({
@@ -301,6 +308,9 @@ const returnNegative1 = ()=>-1;
             },
             onKeyDown (event) {
                 onKeyDown(event);
+                if (disabled) {
+                    return;
+                }
                 const { currentTarget } = event;
                 const setFocusIndex = (index, focusables)=>{
                     event.preventDefault();
@@ -338,7 +348,7 @@ const returnNegative1 = ()=>-1;
                 // TODO: Figure this part out. This is currently required for the tree
                 // movement when the asterisk key is pressed. There might be other cases
                 // as well.
-                if (currentFocusIndex.current === -1) {
+                if (!isNegativeOneAllowed && currentFocusIndex.current === -1) {
                     currentFocusIndex.current = recalculateFocusIndex({
                         focusables: getFocusableElements(currentTarget, programmatic),
                         includeDisabled,
@@ -403,6 +413,7 @@ const returnNegative1 = ()=>-1;
         },
         movementContext,
         currentFocusIndex,
+        activeDescendantId,
         setActiveDescendantId
     };
 }

package/dist/movement/useKeyboardMovementProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/movement/useKeyboardMovementProvider.ts"],"sourcesContent":["\"use client\";\nimport {\n createContext,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { getFocusableElements as defaultGetFocusableElements } from \"../focus/utils.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport {\n DEFAULT_KEYBOARD_MOVEMENT,\n DEFAULT_LTR_KEYBOARD_MOVEMENT,\n DEFAULT_RTL_KEYBOARD_MOVEMENT,\n} from \"./constants.js\";\nimport { findMatchIndex } from \"./findMatchIndex.js\";\nimport type {\n KeyboardMovementConfig,\n KeyboardMovementConfiguration,\n KeyboardMovementContext,\n KeyboardMovementProviderImplementation,\n KeyboardMovementProviderOptions,\n} from \"./types.js\";\nimport {\n getFirstFocusableIndex,\n getLastFocusableIndex,\n getNextFocusableIndex,\n getSearchText,\n getVirtualFocusDefaultIndex,\n isElementDisabled,\n isNotFocusable,\n isSearchableEvent,\n recalculateFocusIndex,\n} from \"./utils.js\";\n\n/*\n @remarks \\@since 5.0.0\n * @internal\n /\nconst context = createContext<KeyboardMovementContext>({\n config: { current: DEFAULT_KEYBOARD_MOVEMENT },\n loopable: false,\n searchable: false,\n horizontal: false,\n includeDisabled: false,\n tabIndexBehavior: undefined,\n activeDescendantId: \"\",\n});\ncontext.displayName = \"KeyboardMovement\";\nexport const { Provider: KeyboardMovementProvider } = context;\n\n/\n @remarks \\@since 5.0.0\n * @internal\n /\nexport function useKeyboardMovementContext(): Readonly<KeyboardMovementContext> {\n return useContext(context);\n}\n\nconst noop = (): void => {\n // do nothing\n};\n\nconst returnNegative1 = (): number => -1;\n\n/\n Implements the custom keyboard movement behavior throughout react-md. Using\n * the \"Find References\" will be the best way to see example usage.\n \n @example\n * Default Keyboard Movement for any Focusable Element\n * ```tsx\n * import {\n * KeyboardMovementProvider,\n * useKeyboardMovementProvider,\n * } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n \n function Example({ children }: { children: ReactNode }): ReactElement {\n * const { movementContext, movementProps } = useKeyboardMovementProvider();\n \n // any focusable element child can be focused with the arrow , home, and\n * // end keys\n * return (\n * <KeyboardMovementProvider value={movementContext}>\n * <div {...movementProps}>\n * {children}\n * </div>\n * </KeyboardMovementProvider>\n * );\n * }\n * ```\n \n @example\n * Active Descendant Movement\n * ```tsx\n * import {\n * KeyboardMovementProvider,\n * useKeyboardMovementContext,\n * useKeyboardMovementProvider,\n * } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useId } from \"react\";\n \n function Child(): ReactElement {\n * const id = useId()\n * const { activeDescendantId } = useKeyboardMovementContext();\n \n return (\n * <div\n * {...props}\n * id={id}\n * className={cnb(id === activeDescendantId && \"focused-class-name\")}\n * >\n * Some Content\n * </div>\n * );\n * }\n \n function Example({ children }: { children: ReactNode }): ReactElement {\n * const { movementContext, movementProps } = useKeyboardMovementProvider({\n * loopable: true,\n * searchable: true,\n * tabIndexBehavior: \"virtual\",\n * });\n \n // any focusable element child can be focused with the arrow , home, and\n * // end keys\n * return (\n * <KeyboardMovementProvider value={movementContext}>\n * <div {...movementProps}>\n * <Child />\n * <Child />\n * <Child />\n * </div>\n * </KeyboardMovementProvider>\n * );\n * }\n * ```\n \n @example\n * Roving Tab Index\n * ```tsx\n * import {\n * KeyboardMovementProvider,\n * useKeyboardMovementContext,\n * useKeyboardMovementProvider,\n * } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useId } from \"react\";\n \n function Child(): ReactElement {\n * const id = useId()\n * const { activeDescendantId } = useKeyboardMovementContext();\n \n return (\n * <div\n * {...props}\n * id={id}\n * tabIndex={id === activeDescendantId ? 0 : -1}\n * >\n * Some Content\n * </div>\n * );\n * }\n \n function Example({ children }: { children: ReactNode }): ReactElement {\n * const { movementContext, movementProps } = useKeyboardMovementProvider({\n * loopable: true,\n * searchable: true,\n * tabIndexBehavior: \"roving\",\n * });\n \n // any focusable element child can be focused with the arrow , home, and\n * // end keys\n * return (\n * <KeyboardMovementProvider value={movementContext}>\n * <div {...movementProps}>\n * <Child />\n * <Child />\n * <Child />\n * </div>\n * </KeyboardMovementProvider>\n * );\n * }\n * ```\n * @remarks \\@since 6.0.0\n * @internal\n /\nexport function useKeyboardMovementProvider<E extends HTMLElement>(\n options: KeyboardMovementProviderOptions<E> = {}\n): KeyboardMovementProviderImplementation<E> {\n const {\n onClick = noop,\n onFocus = noop,\n onKeyDown = noop,\n loopable = false,\n searchable = false,\n horizontal = false,\n includeDisabled = false,\n tabIndexBehavior,\n extendKeyDown = noop,\n onFocusChange = noop,\n programmatic = includeDisabled,\n incrementKeys: propIncrementKeys,\n decrementKeys: propDecrementKeys,\n jumpToFirstKeys: propJumpToFirstKeys,\n jumpToLastKeys: propJumpToLastKeys,\n getFocusableElements = defaultGetFocusableElements,\n getDefaultFocusedIndex = returnNegative1,\n } = options;\n\n const isRTL = useDir().dir === \"rtl\";\n let defaults: Readonly<Required<KeyboardMovementConfiguration>>;\n if (horizontal) {\n defaults = isRTL\n ? DEFAULT_RTL_KEYBOARD_MOVEMENT\n : DEFAULT_LTR_KEYBOARD_MOVEMENT;\n } else {\n defaults = DEFAULT_KEYBOARD_MOVEMENT;\n }\n\n const incrementKeys = propIncrementKeys \|\| defaults.incrementKeys;\n const decrementKeys = propDecrementKeys \|\| defaults.decrementKeys;\n const jumpToFirstKeys = propJumpToFirstKeys \|\| defaults.jumpToFirstKeys;\n const jumpToLastKeys = propJumpToLastKeys \|\| defaults.jumpToLastKeys;\n\n const configuration: KeyboardMovementConfig = {\n incrementKeys,\n decrementKeys,\n jumpToFirstKeys,\n jumpToLastKeys,\n };\n const config = useRef(configuration);\n useIsomorphicLayoutEffect(() => {\n config.current = configuration;\n });\n\n const [activeDescendantId, setActiveDescendantId] = useState(\"\");\n const movementContext = useMemo<KeyboardMovementContext>(\n () => ({\n config,\n loopable,\n searchable,\n horizontal,\n includeDisabled,\n tabIndexBehavior,\n activeDescendantId,\n }),\n [\n activeDescendantId,\n horizontal,\n includeDisabled,\n loopable,\n searchable,\n tabIndexBehavior,\n ]\n );\n const currentFocusIndex = useRef(-1);\n const mode = useUserInteractionMode();\n const refocus = useRef(false);\n\n if (process.env.NODE_ENV !== \"production\") {\n // this fixes issues during hot reloading and using the `useId()` hook\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n return () => {\n setActiveDescendantId(\"\");\n };\n }, []);\n }\n\n return {\n movementProps: {\n \"aria-activedescendant\":\n tabIndexBehavior === \"virtual\" ? activeDescendantId : undefined,\n tabIndex:\n tabIndexBehavior === \"roving\"\n ? activeDescendantId\n ? -1\n : 0\n : undefined,\n\n // Note: This used to be on the `onFocus` event, but this causes issues in\n // Chromium browsers for drag and drop behavior\n onClick(event) {\n onClick(event);\n\n // This makes it so you can click an element with a mouse and then\n // keyboard navigate from that element instead of the last keyboard focus\n // element\n const { currentTarget, target } = event;\n if (target === currentTarget \|\| !(target instanceof HTMLElement)) {\n return;\n }\n\n const focusables = getFocusableElements(currentTarget, programmatic);\n const focusedIndex = focusables.findIndex(\n (element) => element === target \|\| element.contains(target)\n );\n if (focusedIndex === -1 \|\| !focusables.length) {\n return;\n }\n\n currentFocusIndex.current = focusedIndex;\n const focused = focusables[focusedIndex];\n if (tabIndexBehavior) {\n setActiveDescendantId(focused.id);\n }\n\n // need to force focus back to the container element when using\n // aria activedescendant\n if (tabIndexBehavior === \"virtual\") {\n refocus.current = true;\n currentTarget.focus();\n }\n\n onFocusChange({\n index: focusedIndex,\n element: focused,\n });\n },\n onFocus(event) {\n onFocus(event);\n if (event.isPropagationStopped() \|\| refocus.current) {\n refocus.current = false;\n return;\n }\n\n if (\n (mode !== \"keyboard\" && tabIndexBehavior !== \"virtual\") \|\|\n event.target !== event.currentTarget\n ) {\n return;\n }\n\n const focusables = getFocusableElements(\n event.currentTarget,\n programmatic\n );\n if (!focusables.length) {\n return;\n }\n\n let defaultFocusIndex = getDefaultFocusedIndex({\n focusables,\n includeDisabled,\n });\n\n // This allows my custom `getDefaultFocusedIndex` implementations to\n // have a nice fallback without having to re-implement the \"focus\n // first\" behavior\n if (defaultFocusIndex === -1) {\n if (tabIndexBehavior === \"virtual\") {\n // virtual keyboard navigation must* always focus at least one element\n defaultFocusIndex = getVirtualFocusDefaultIndex({\n focusables,\n includeDisabled,\n activeDescendantId,\n });\n } else {\n defaultFocusIndex = getFirstFocusableIndex({\n focusables,\n includeDisabled,\n });\n }\n }\n\n if (defaultFocusIndex === -1) {\n return;\n }\n\n currentFocusIndex.current = defaultFocusIndex;\n const focused = focusables[defaultFocusIndex];\n if (tabIndexBehavior) {\n setActiveDescendantId(focused.id);\n }\n\n if (tabIndexBehavior !== \"virtual\") {\n focused.focus();\n } else {\n focused.scrollIntoView({ block: \"nearest\" });\n }\n\n onFocusChange({\n index: defaultFocusIndex,\n element: focused,\n });\n },\n onKeyDown(event) {\n onKeyDown(event);\n const { currentTarget } = event;\n\n const setFocusIndex = (\n index: number,\n focusables: readonly HTMLElement[]\n ): void => {\n event.preventDefault();\n event.stopPropagation();\n if (currentFocusIndex.current === index \|\| index === -1) {\n return;\n }\n\n currentFocusIndex.current = index;\n const focused = focusables[index];\n if (tabIndexBehavior) {\n focused.scrollIntoView({\n block: \"nearest\",\n inline: \"nearest\",\n });\n setActiveDescendantId(focused.id);\n }\n\n if (tabIndexBehavior !== \"virtual\") {\n focused.focus();\n }\n\n onFocusChange({\n index,\n element: focused,\n });\n };\n\n extendKeyDown({\n event,\n setFocusIndex,\n currentFocusIndex,\n setActiveDescendantId,\n ...movementContext,\n });\n\n if (event.isPropagationStopped()) {\n return;\n }\n\n // TODO: Figure this part out. This is currently required for the tree\n // movement when the asterisk key is pressed. There might be other cases\n // as well.\n if (currentFocusIndex.current === -1) {\n currentFocusIndex.current = recalculateFocusIndex({\n focusables: getFocusableElements(currentTarget, programmatic),\n includeDisabled,\n tabIndexBehavior,\n activeDescendantId,\n });\n }\n\n const { key, shiftKey } = event;\n if (\n tabIndexBehavior === \"virtual\" &&\n activeDescendantId &&\n (key === \" \" \|\| key === \"Enter\")\n ) {\n if (key === \" \") {\n event.preventDefault();\n }\n\n const focusables = getFocusableElements(currentTarget, programmatic);\n const activeElement = focusables[currentFocusIndex.current];\n if (!activeElement \|\| isElementDisabled(activeElement)) {\n return;\n }\n\n activeElement.click();\n return;\n }\n\n const {\n incrementKeys,\n decrementKeys,\n jumpToFirstKeys,\n jumpToLastKeys,\n } = config.current;\n\n if (searchable && isSearchableEvent(event)) {\n const focusables = getFocusableElements(currentTarget, programmatic);\n const index = findMatchIndex({\n value: key,\n values: focusables.map((element) =>\n getSearchText(element, !isNotFocusable(element, includeDisabled))\n ),\n startIndex: shiftKey ? -1 : currentFocusIndex.current,\n });\n setFocusIndex(index, focusables);\n return;\n }\n\n const jumpToFirst = jumpToFirstKeys.includes(key);\n const jumpToLast = !jumpToFirst && jumpToLastKeys.includes(key);\n const increment =\n !jumpToFirst && !jumpToLast && incrementKeys.includes(key);\n const decrement =\n !jumpToFirst &&\n !jumpToLast &&\n !increment &&\n decrementKeys.includes(key);\n\n if (!jumpToFirst && !jumpToLast && !increment && !decrement) {\n return;\n }\n const focusables = getFocusableElements(currentTarget, programmatic);\n\n let index: number;\n if (jumpToFirst) {\n index = getFirstFocusableIndex({\n focusables,\n includeDisabled,\n });\n } else if (jumpToLast) {\n index = getLastFocusableIndex({\n focusables,\n includeDisabled,\n });\n } else {\n index = getNextFocusableIndex({\n loopable,\n increment,\n focusables,\n includeDisabled,\n currentFocusIndex: currentFocusIndex.current,\n });\n }\n\n setFocusIndex(index, focusables);\n },\n },\n movementContext,\n currentFocusIndex,\n setActiveDescendantId,\n };\n}\n"],"names":["createContext","useContext","useEffect","useMemo","useRef","useState","getFocusableElements","defaultGetFocusableElements","useUserInteractionMode","useDir","useIsomorphicLayoutEffect","DEFAULT_KEYBOARD_MOVEMENT","DEFAULT_LTR_KEYBOARD_MOVEMENT","DEFAULT_RTL_KEYBOARD_MOVEMENT","findMatchIndex","getFirstFocusableIndex","getLastFocusableIndex","getNextFocusableIndex","getSearchText","getVirtualFocusDefaultIndex","isElementDisabled","isNotFocusable","isSearchableEvent","recalculateFocusIndex","context","config","current","loopable","searchable","horizontal","includeDisabled","tabIndexBehavior","undefined","activeDescendantId","displayName","Provider","KeyboardMovementProvider","useKeyboardMovementContext","noop","returnNegative1","useKeyboardMovementProvider","options","onClick","onFocus","onKeyDown","extendKeyDown","onFocusChange","programmatic","incrementKeys","propIncrementKeys","decrementKeys","propDecrementKeys","jumpToFirstKeys","propJumpToFirstKeys","jumpToLastKeys","propJumpToLastKeys","getDefaultFocusedIndex","isRTL","dir","defaults","configuration","setActiveDescendantId","movementContext","currentFocusIndex","mode","refocus","process","env","NODE_ENV","movementProps","tabIndex","event","currentTarget","target","HTMLElement","focusables","focusedIndex","findIndex","element","contains","length","focused","id","focus","index","isPropagationStopped","defaultFocusIndex","scrollIntoView","block","setFocusIndex","preventDefault","stopPropagation","inline","key","shiftKey","activeElement","click","value","values","map","startIndex","jumpToFirst","includes","jumpToLast","increment","decrement"],"mappings":"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"}
1	+ {"version":3,"sources":["../../src/movement/useKeyboardMovementProvider.ts"],"sourcesContent":["\"use client\";\nimport {\n createContext,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { getFocusableElements as defaultGetFocusableElements } from \"../focus/utils.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport {\n DEFAULT_KEYBOARD_MOVEMENT,\n DEFAULT_LTR_KEYBOARD_MOVEMENT,\n DEFAULT_RTL_KEYBOARD_MOVEMENT,\n} from \"./constants.js\";\nimport { findMatchIndex } from \"./findMatchIndex.js\";\nimport type {\n KeyboardMovementConfig,\n KeyboardMovementConfiguration,\n KeyboardMovementContext,\n KeyboardMovementProviderImplementation,\n KeyboardMovementProviderOptions,\n} from \"./types.js\";\nimport {\n getFirstFocusableIndex,\n getLastFocusableIndex,\n getNextFocusableIndex,\n getSearchText,\n getVirtualFocusDefaultIndex,\n isElementDisabled,\n isNotFocusable,\n isSearchableEvent,\n recalculateFocusIndex,\n} from \"./utils.js\";\n\n/*\n @remarks \\@since 5.0.0\n * @internal\n /\nconst context = createContext<KeyboardMovementContext>({\n config: { current: DEFAULT_KEYBOARD_MOVEMENT },\n loopable: false,\n searchable: false,\n horizontal: false,\n includeDisabled: false,\n tabIndexBehavior: undefined,\n activeDescendantId: \"\",\n});\ncontext.displayName = \"KeyboardMovement\";\nexport const { Provider: KeyboardMovementProvider } = context;\n\n/\n @remarks \\@since 5.0.0\n * @internal\n /\nexport function useKeyboardMovementContext(): Readonly<KeyboardMovementContext> {\n return useContext(context);\n}\n\nconst noop = (): void => {\n // do nothing\n};\n\nconst returnNegative1 = (): number => -1;\n\n/\n Implements the custom keyboard movement behavior throughout react-md. Using\n * the \"Find References\" will be the best way to see example usage.\n \n @example\n * Default Keyboard Movement for any Focusable Element\n * ```tsx\n * import {\n * KeyboardMovementProvider,\n * useKeyboardMovementProvider,\n * } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n \n function Example({ children }: { children: ReactNode }): ReactElement {\n * const { movementContext, movementProps } = useKeyboardMovementProvider();\n \n // any focusable element child can be focused with the arrow , home, and\n * // end keys\n * return (\n * <KeyboardMovementProvider value={movementContext}>\n * <div {...movementProps}>\n * {children}\n * </div>\n * </KeyboardMovementProvider>\n * );\n * }\n * ```\n \n @example\n * Active Descendant Movement\n * ```tsx\n * import {\n * KeyboardMovementProvider,\n * useKeyboardMovementContext,\n * useKeyboardMovementProvider,\n * } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useId } from \"react\";\n \n function Child(): ReactElement {\n * const id = useId()\n * const { activeDescendantId } = useKeyboardMovementContext();\n \n return (\n * <div\n * {...props}\n * id={id}\n * className={cnb(id === activeDescendantId && \"focused-class-name\")}\n * >\n * Some Content\n * </div>\n * );\n * }\n \n function Example({ children }: { children: ReactNode }): ReactElement {\n * const { movementContext, movementProps } = useKeyboardMovementProvider({\n * loopable: true,\n * searchable: true,\n * tabIndexBehavior: \"virtual\",\n * });\n \n // any focusable element child can be focused with the arrow , home, and\n * // end keys\n * return (\n * <KeyboardMovementProvider value={movementContext}>\n * <div {...movementProps}>\n * <Child />\n * <Child />\n * <Child />\n * </div>\n * </KeyboardMovementProvider>\n * );\n * }\n * ```\n \n @example\n * Roving Tab Index\n * ```tsx\n * import {\n * KeyboardMovementProvider,\n * useKeyboardMovementContext,\n * useKeyboardMovementProvider,\n * } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useId } from \"react\";\n \n function Child(): ReactElement {\n * const id = useId()\n * const { activeDescendantId } = useKeyboardMovementContext();\n \n return (\n * <div\n * {...props}\n * id={id}\n * tabIndex={id === activeDescendantId ? 0 : -1}\n * >\n * Some Content\n * </div>\n * );\n * }\n \n function Example({ children }: { children: ReactNode }): ReactElement {\n * const { movementContext, movementProps } = useKeyboardMovementProvider({\n * loopable: true,\n * searchable: true,\n * tabIndexBehavior: \"roving\",\n * });\n \n // any focusable element child can be focused with the arrow , home, and\n * // end keys\n * return (\n * <KeyboardMovementProvider value={movementContext}>\n * <div {...movementProps}>\n * <Child />\n * <Child />\n * <Child />\n * </div>\n * </KeyboardMovementProvider>\n * );\n * }\n * ```\n * @remarks \\@since 6.0.0\n * @internal\n /\nexport function useKeyboardMovementProvider<E extends HTMLElement>(\n options: KeyboardMovementProviderOptions<E> = {}\n): KeyboardMovementProviderImplementation<E> {\n const {\n onClick = noop,\n onFocus = noop,\n onKeyDown = noop,\n loopable = false,\n disabled,\n searchable = false,\n horizontal = false,\n includeDisabled = false,\n tabIndexBehavior,\n extendKeyDown = noop,\n onFocusChange = noop,\n programmatic = includeDisabled,\n incrementKeys: propIncrementKeys,\n decrementKeys: propDecrementKeys,\n jumpToFirstKeys: propJumpToFirstKeys,\n jumpToLastKeys: propJumpToLastKeys,\n getFocusableElements = defaultGetFocusableElements,\n getDefaultFocusedIndex = returnNegative1,\n isNegativeOneAllowed = false,\n } = options;\n\n const isRTL = useDir().dir === \"rtl\";\n let defaults: Readonly<Required<KeyboardMovementConfiguration>>;\n if (horizontal) {\n defaults = isRTL\n ? DEFAULT_RTL_KEYBOARD_MOVEMENT\n : DEFAULT_LTR_KEYBOARD_MOVEMENT;\n } else {\n defaults = DEFAULT_KEYBOARD_MOVEMENT;\n }\n\n const incrementKeys = propIncrementKeys \|\| defaults.incrementKeys;\n const decrementKeys = propDecrementKeys \|\| defaults.decrementKeys;\n const jumpToFirstKeys = propJumpToFirstKeys \|\| defaults.jumpToFirstKeys;\n const jumpToLastKeys = propJumpToLastKeys \|\| defaults.jumpToLastKeys;\n\n const configuration: KeyboardMovementConfig = {\n incrementKeys,\n decrementKeys,\n jumpToFirstKeys,\n jumpToLastKeys,\n };\n const config = useRef(configuration);\n useIsomorphicLayoutEffect(() => {\n config.current = configuration;\n });\n\n const [activeDescendantId, setActiveDescendantId] = useState(\"\");\n const movementContext = useMemo<KeyboardMovementContext>(\n () => ({\n config,\n loopable,\n searchable,\n horizontal,\n includeDisabled,\n tabIndexBehavior,\n activeDescendantId,\n }),\n [\n activeDescendantId,\n horizontal,\n includeDisabled,\n loopable,\n searchable,\n tabIndexBehavior,\n ]\n );\n const currentFocusIndex = useRef(-1);\n const mode = useUserInteractionMode();\n const refocus = useRef(false);\n\n if (process.env.NODE_ENV !== \"production\") {\n // this fixes issues during hot reloading and using the `useId()` hook\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n return () => {\n setActiveDescendantId(\"\");\n };\n }, []);\n }\n\n let tabIndex: number \| undefined;\n if (tabIndexBehavior) {\n tabIndex =\n disabled \|\| (tabIndexBehavior === \"roving\" && activeDescendantId)\n ? -1\n : 0;\n }\n\n return {\n movementProps: {\n \"aria-activedescendant\":\n tabIndexBehavior === \"virtual\" ? activeDescendantId : undefined,\n tabIndex,\n\n // Note: This used to be on the `onFocus` event, but this causes issues in\n // Chromium browsers for drag and drop behavior\n onClick(event) {\n onClick(event);\n if (disabled) {\n return;\n }\n\n // This makes it so you can click an element with a mouse and then\n // keyboard navigate from that element instead of the last keyboard focus\n // element\n const { currentTarget, target } = event;\n if (target === currentTarget \|\| !(target instanceof HTMLElement)) {\n return;\n }\n\n const focusables = getFocusableElements(currentTarget, programmatic);\n const focusedIndex = focusables.findIndex(\n (element) => element === target \|\| element.contains(target)\n );\n if (focusedIndex === -1 \|\| !focusables.length) {\n return;\n }\n\n currentFocusIndex.current = focusedIndex;\n const focused = focusables[focusedIndex];\n if (tabIndexBehavior) {\n setActiveDescendantId(focused.id);\n }\n\n // need to force focus back to the container element when using\n // aria activedescendant\n if (tabIndexBehavior === \"virtual\") {\n refocus.current = true;\n currentTarget.focus();\n }\n\n onFocusChange({\n index: focusedIndex,\n element: focused,\n });\n },\n onFocus(event) {\n onFocus(event);\n if (event.isPropagationStopped() \|\| refocus.current) {\n refocus.current = false;\n return;\n }\n\n if (\n (mode !== \"keyboard\" && tabIndexBehavior !== \"virtual\") \|\|\n event.target !== event.currentTarget\n ) {\n return;\n }\n\n const focusables = getFocusableElements(\n event.currentTarget,\n programmatic\n );\n if (!focusables.length) {\n return;\n }\n\n let defaultFocusIndex = getDefaultFocusedIndex({\n focusables,\n includeDisabled,\n });\n\n // This allows my custom `getDefaultFocusedIndex` implementations to\n // have a nice fallback without having to re-implement the \"focus\n // first\" behavior\n if (!isNegativeOneAllowed && defaultFocusIndex === -1) {\n if (tabIndexBehavior === \"virtual\") {\n // virtual keyboard navigation must* always focus at least one element\n defaultFocusIndex = getVirtualFocusDefaultIndex({\n focusables,\n includeDisabled,\n activeDescendantId,\n });\n } else {\n defaultFocusIndex = getFirstFocusableIndex({\n focusables,\n includeDisabled,\n });\n }\n }\n\n if (defaultFocusIndex === -1) {\n return;\n }\n\n currentFocusIndex.current = defaultFocusIndex;\n const focused = focusables[defaultFocusIndex];\n if (tabIndexBehavior) {\n setActiveDescendantId(focused.id);\n }\n\n if (tabIndexBehavior !== \"virtual\") {\n focused.focus();\n } else {\n focused.scrollIntoView({ block: \"nearest\" });\n }\n\n onFocusChange({\n index: defaultFocusIndex,\n element: focused,\n });\n },\n onKeyDown(event) {\n onKeyDown(event);\n if (disabled) {\n return;\n }\n\n const { currentTarget } = event;\n\n const setFocusIndex = (\n index: number,\n focusables: readonly HTMLElement[]\n ): void => {\n event.preventDefault();\n event.stopPropagation();\n if (currentFocusIndex.current === index \|\| index === -1) {\n return;\n }\n\n currentFocusIndex.current = index;\n const focused = focusables[index];\n if (tabIndexBehavior) {\n focused.scrollIntoView({\n block: \"nearest\",\n inline: \"nearest\",\n });\n setActiveDescendantId(focused.id);\n }\n\n if (tabIndexBehavior !== \"virtual\") {\n focused.focus();\n }\n\n onFocusChange({\n index,\n element: focused,\n });\n };\n\n extendKeyDown({\n event,\n setFocusIndex,\n currentFocusIndex,\n setActiveDescendantId,\n ...movementContext,\n });\n\n if (event.isPropagationStopped()) {\n return;\n }\n\n // TODO: Figure this part out. This is currently required for the tree\n // movement when the asterisk key is pressed. There might be other cases\n // as well.\n if (!isNegativeOneAllowed && currentFocusIndex.current === -1) {\n currentFocusIndex.current = recalculateFocusIndex({\n focusables: getFocusableElements(currentTarget, programmatic),\n includeDisabled,\n tabIndexBehavior,\n activeDescendantId,\n });\n }\n\n const { key, shiftKey } = event;\n if (\n tabIndexBehavior === \"virtual\" &&\n activeDescendantId &&\n (key === \" \" \|\| key === \"Enter\")\n ) {\n if (key === \" \") {\n event.preventDefault();\n }\n\n const focusables = getFocusableElements(currentTarget, programmatic);\n const activeElement = focusables[currentFocusIndex.current];\n if (!activeElement \|\| isElementDisabled(activeElement)) {\n return;\n }\n\n activeElement.click();\n return;\n }\n\n const {\n incrementKeys,\n decrementKeys,\n jumpToFirstKeys,\n jumpToLastKeys,\n } = config.current;\n\n if (searchable && isSearchableEvent(event)) {\n const focusables = getFocusableElements(currentTarget, programmatic);\n const index = findMatchIndex({\n value: key,\n values: focusables.map((element) =>\n getSearchText(element, !isNotFocusable(element, includeDisabled))\n ),\n startIndex: shiftKey ? -1 : currentFocusIndex.current,\n });\n setFocusIndex(index, focusables);\n return;\n }\n\n const jumpToFirst = jumpToFirstKeys.includes(key);\n const jumpToLast = !jumpToFirst && jumpToLastKeys.includes(key);\n const increment =\n !jumpToFirst && !jumpToLast && incrementKeys.includes(key);\n const decrement =\n !jumpToFirst &&\n !jumpToLast &&\n !increment &&\n decrementKeys.includes(key);\n\n if (!jumpToFirst && !jumpToLast && !increment && !decrement) {\n return;\n }\n const focusables = getFocusableElements(currentTarget, programmatic);\n\n let index: number;\n if (jumpToFirst) {\n index = getFirstFocusableIndex({\n focusables,\n includeDisabled,\n });\n } else if (jumpToLast) {\n index = getLastFocusableIndex({\n focusables,\n includeDisabled,\n });\n } else {\n index = getNextFocusableIndex({\n loopable,\n increment,\n focusables,\n includeDisabled,\n currentFocusIndex: currentFocusIndex.current,\n });\n }\n\n setFocusIndex(index, focusables);\n },\n },\n movementContext,\n currentFocusIndex,\n activeDescendantId,\n setActiveDescendantId,\n };\n}\n"],"names":["createContext","useContext","useEffect","useMemo","useRef","useState","getFocusableElements","defaultGetFocusableElements","useUserInteractionMode","useDir","useIsomorphicLayoutEffect","DEFAULT_KEYBOARD_MOVEMENT","DEFAULT_LTR_KEYBOARD_MOVEMENT","DEFAULT_RTL_KEYBOARD_MOVEMENT","findMatchIndex","getFirstFocusableIndex","getLastFocusableIndex","getNextFocusableIndex","getSearchText","getVirtualFocusDefaultIndex","isElementDisabled","isNotFocusable","isSearchableEvent","recalculateFocusIndex","context","config","current","loopable","searchable","horizontal","includeDisabled","tabIndexBehavior","undefined","activeDescendantId","displayName","Provider","KeyboardMovementProvider","useKeyboardMovementContext","noop","returnNegative1","useKeyboardMovementProvider","options","onClick","onFocus","onKeyDown","disabled","extendKeyDown","onFocusChange","programmatic","incrementKeys","propIncrementKeys","decrementKeys","propDecrementKeys","jumpToFirstKeys","propJumpToFirstKeys","jumpToLastKeys","propJumpToLastKeys","getDefaultFocusedIndex","isNegativeOneAllowed","isRTL","dir","defaults","configuration","setActiveDescendantId","movementContext","currentFocusIndex","mode","refocus","process","env","NODE_ENV","tabIndex","movementProps","event","currentTarget","target","HTMLElement","focusables","focusedIndex","findIndex","element","contains","length","focused","id","focus","index","isPropagationStopped","defaultFocusIndex","scrollIntoView","block","setFocusIndex","preventDefault","stopPropagation","inline","key","shiftKey","activeElement","click","value","values","map","startIndex","jumpToFirst","includes","jumpToLast","increment","decrement"],"mappings":"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"}

package/dist/movement/utils.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import type { KeyboardEvent } from "react";
-import type { FocusableIndexOptions, TabIndexBehavior } from "./types.js";
+import { type KeyboardEvent } from "react";
+import { type FocusableIndexOptions, type TabIndexBehavior } from "./types.js";
 /**
  * @remarks \@since 6.0.0
  * @internal
@@ -86,4 +86,9 @@ export declare function recalculateFocusIndex(options: RecalculateOptions): numb
  * @internal
  */
 export declare function isSearchableEvent(event: KeyboardEvent): boolean;
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export declare function isTypeEvent(event: KeyboardEvent): boolean;
 export {};

package/dist/movement/utils.js CHANGED Viewed

@@ -155,5 +155,15 @@ import { loop } from "../utils/loop.js";
     return key.length === 1 && // can't search with space since it is generally a click event
     key !== " " && !altKey && !ctrlKey && !metaKey;
 }
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */ export function isTypeEvent(event) {
+    return isSearchableEvent(event) || [
+        "Backspace",
+        "Delete",
+        " "
+    ].includes(event.key);
+}
 //# sourceMappingURL=utils.js.map