@react-md/core 6.3.1 → 6.3.2

package/dist/dialog/Dialog.js

@@ -79,6 +79,10 @@ const noopBool = ()=>false;
     const { eventHandlers, transitionOptions } = useFocusContainer({
         nodeRef: ref,
         activate: visible,
+        onEnter (appearing) {
+            onEnter(appearing);
+            setChildVisible(type !== "full-page");
+        },
         onEntered (appear) {
             onEntered(appear);
             // this needs to be called onEnter and onEntered just in case the
@@ -86,6 +90,10 @@ const noopBool = ()=>false;
             setChildVisible(type !== "full-page");
         },
         onEntering,
+        onExit () {
+            onExit();
+            setChildVisible(false);
+        },
         onExiting,
         onExited () {
             onExited();
@@ -120,14 +128,6 @@ const noopBool = ()=>false;
         appear: appear && !disableTransition && !ssr,
         enter: enter && !disableTransition,
         exit: exit && !disableTransition,
-        onEnter (appearing) {
-            onEnter(appearing);
-            setChildVisible(type !== "full-page");
-        },
-        onExit () {
-            onExit();
-            setChildVisible(false);
-        },
         temporary,
         exitedHidden,
         disablePortal: propDisablePortal,

package/dist/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  type FocusContainerComponentProps,\n  useFocusContainer,\n} from \"../focus/useFocusContainer.js\";\nimport { Overlay } from \"../overlay/Overlay.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  type ConfigurableDialogContainerProps,\n  DialogContainer,\n} from \"./DialogContainer.js\";\nimport {\n  NestedDialogProvider,\n  useNestedDialogContext,\n} from \"./NestedDialogProvider.js\";\nimport {\n  DEFAULT_DIALOG_CLASSNAMES,\n  DEFAULT_DIALOG_TIMEOUT,\n  type DialogType,\n  type DialogWidth,\n  dialog,\n} from \"./styles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nconst noopBool = (): boolean => false;\n\nexport interface BaseDialogProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CSSTransitionComponentProps,\n    TransitionActions,\n    FocusContainerComponentProps {\n  /**\n   * @defaultValue `\"dialog-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * @defaultValue `\"centered\"`\n   */\n  type?: DialogType;\n\n  /**\n   * @see {@link DialogWidth}\n   * @defaultValue `\"auto\"`\n   */\n  width?: DialogWidth;\n\n  /**\n   * @defaultValue `\"dialog\"`\n   */\n  role?: \"dialog\" | \"alertdialog\" | \"menu\" | \"none\";\n\n  /**\n   * This value controls the visibility of the dialog.\n   */\n  visible: boolean;\n\n  /**\n   * This function should set the {@link visible} prop to false to hide the\n   * modal when:\n   * - the {@link modal} and {@link disableEscapeClose} props are `false` and\n   *   the user presses the `\"Escape\"` key.\n   * - The overlay element is clicked\n   */\n  onRequestClose: () => void;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /** @defaultValue `-1` */\n  tabIndex?: number;\n\n  /**\n   * Set this value to `true` if the dialog should behave as a modal which\n   * prevents the modal from being closed by pressing the `\"Escape\"` key or\n   * clicking the overlay. The user **must** click one of the actions within the\n   * dialog instead.\n   *\n   * @defaultValue `false`\n   */\n  modal?: boolean;\n\n  /**\n   * Set this to `true` if the dialog should no longer use the `Portal`\n   * behavior.\n   *\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * Set this to `true` if you want the page to still be scrollable while the\n   * dialog is visible. This should normally be `true` for popovers/fixed\n   * dialogs.\n   *\n   * @defaultValue `type === \"custom\"`\n   */\n  disableScrollLock?: boolean;\n\n  /**\n   * Set this to `true` to prevent the dialog from being closed when the\n   * `\"Escape\"` key is pressed. This is `true` by default when the {@link modal}\n   * prop is `true`\n   *\n   * @defaultValue `modal`\n   */\n  disableEscapeClose?: boolean;\n\n  /**\n   * Set this to `true` if an overlay should not appear behind the dialog.\n   *\n   * Note: this was changed from `type === \"full-page\"` to `false` so that you\n   * can change between full-page and centered based on media queries. If the\n   * type changes the overlay would end up rendering above the dialog instead of\n   * behind.\n   *\n   * @see {@link overlayHidden}\n   * @defaultValue `false`\n   */\n  disableOverlay?: boolean;\n\n  /**\n   * Set this to `true` if an overlay should be appear behind the dialog but\n   * have an `opacity: 0`. This is useful if you want to prevent other elements\n   * on the page from being clicked while the dialog is visible, but don't want\n   * a dark background. i.e. popovers/fixed dialogs.\n   *\n   * @defaultValue `false`\n   */\n  overlayHidden?: boolean;\n\n  /**\n   * Any additional props that should be passed to the overlay element if it is\n   * rendered.\n   */\n  overlayProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * Any additional props that should be passed to the container element when\n   * the `type !== \"custom\"`.\n   */\n  containerProps?: PropsWithRef<ConfigurableDialogContainerProps>;\n\n  /**\n   * @see {@link DEFAULT_DIALOG_TIMEOUT}\n   * @defaultValue `DEFAULT_DIALOG_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   * @see {@link DEFAULT_DIALOG_CLASSNAMES}\n   * @defaultValue `DEFAULT_DIALOG_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n\n  /**\n   * Set this to `true` if the `Dialog` should not gain the normal focus box\n   * shadow while it is focused. The `Dialog` should normally only gain focus\n   * when it becomes visible and no child elements have `autoFocus` enabled.\n   *\n   * @since 6.0.0\n   * @defaultValue `type === \"full-page\"`\n   */\n  disableFocusOutline?: boolean;\n}\n\nexport type DialogProps = LabelRequiredForA11y<BaseDialogProps>;\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Dialog } from \"@react-md/core/dialog/Dialog\";\n * import { DialogContent } from \"@react-md/core/dialog/DialogContent\";\n * import { DialogFooter } from \"@react-md/core/dialog/DialogFooter\";\n * import { DialogHeader } from \"@react-md/core/dialog/DialogHeader\";\n * import { DialogTitle } from \"@react-md/core/dialog/DialogTitle\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const {\n *     toggle,\n *     disable: onRequestClose,\n *     toggled: visible,\n *   } = useToggle(false);\n *\n *   return (\n *     <>\n *       <Button onClick={toggle}>Toggle</Button>\n *       <Dialog\n *         aria-labelledby=\"dialog-title\"\n *         visible={visible}\n *         onRequestClose={onRequestClose}\n *       >\n *         <DialogHeader>\n *           <DialogTitle id=\"dialog-title\">Simple Dialog</DialogTitle>\n *         </DialogHeader>\n *         <DialogContent>\n *           <Typography margin=\"none\">This is some text in a dialog.</Typography>\n *         </DialogContent>\n *         <DialogFooter>\n *           <Button onClick={onRequestClose}>\n *             Close\n *           </Button>\n *         </DialogFooter>\n *       </Dialog>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/dialog | Dialog Demos}\n * @since 6.0.0 The `Dialog` no longer supports focusing elements\n * within once it becomes visible. You must manually add `autoFocus` to a\n * element instead.\n */\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n  function Dialog(props, ref) {\n    const {\n      id: propId,\n      modal = false,\n      role = modal ? \"alertdialog\" : \"dialog\",\n      type = \"centered\",\n      width,\n      tabIndex = -1,\n      visible,\n      onRequestClose,\n      containerProps,\n      temporary = true,\n      className,\n      timeout = DEFAULT_DIALOG_TIMEOUT,\n      classNames = DEFAULT_DIALOG_CLASSNAMES,\n      disableTransition = false,\n      appear = false,\n      enter = true,\n      exit = true,\n      onEnter = noop,\n      onEntering = noop,\n      onEntered = noop,\n      onExit = noop,\n      onExiting = noop,\n      onExited = noop,\n      exitedHidden = true,\n      disableOverlay = false,\n      overlayProps,\n      overlayHidden,\n      onKeyDown = noop,\n      isFocusTypeDisabled = noopBool,\n      disablePortal: propDisablePortal,\n      disableScrollLock = false,\n      disableEscapeClose = modal,\n      disableFocusOutline = type === \"full-page\",\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"dialog\");\n\n    const ssr = useSsr();\n    const setChildVisible = useNestedDialogContext();\n\n    // this makes it so that as more non-full page dialogs become visible, the\n    // overlay does not become darker as more and more overlays are stacked upon\n    // each other. only the top-most overlay will have and active background\n    // color.\n    const [isChildVisible, setIsChildVisible] = useState(false);\n    const { eventHandlers, transitionOptions } = useFocusContainer({\n      nodeRef: ref,\n      activate: visible,\n      onEntered(appear) {\n        onEntered(appear);\n        // this needs to be called onEnter and onEntered just in case the\n        // transition is disabled\n        setChildVisible(type !== \"full-page\");\n      },\n      onEntering,\n      onExiting,\n      onExited() {\n        onExited();\n        // this needs to be called onExit and onExited just in case the\n        // transition is disabled\n        setChildVisible(false);\n      },\n      disableTransition,\n      onKeyDown(event) {\n        onKeyDown(event);\n        if (\n          event.isPropagationStopped() ||\n          modal ||\n          disableEscapeClose ||\n          event.key !== \"Escape\"\n        ) {\n          return;\n        }\n\n        // prevent parent dialogs from closing as well\n        event.stopPropagation();\n        onRequestClose();\n      },\n      isFocusTypeDisabled,\n    });\n    const { elementProps, stage, rendered, disablePortal } = useCSSTransition({\n      transitionIn: visible,\n      timeout,\n      classNames,\n      className: dialog({\n        type,\n        width,\n        fixed: type === \"custom\",\n        outline: !disableFocusOutline,\n        disableBoxShadow: isChildVisible,\n        className,\n      }),\n      appear: appear && !disableTransition && !ssr,\n      enter: enter && !disableTransition,\n      exit: exit && !disableTransition,\n      onEnter(appearing) {\n        onEnter(appearing);\n        setChildVisible(type !== \"full-page\");\n      },\n      onExit() {\n        onExit();\n        setChildVisible(false);\n      },\n      temporary,\n      exitedHidden,\n      disablePortal: propDisablePortal,\n      ...transitionOptions,\n    });\n    useScrollLock(!disableScrollLock && visible);\n\n    return (\n      <NestedDialogProvider value={setIsChildVisible}>\n        {!disableOverlay && (\n          <Overlay\n            visible={visible}\n            disableTransition={disableTransition}\n            temporary={temporary}\n            disablePortal={disablePortal}\n            {...overlayProps}\n            onClick={modal ? noop : onRequestClose}\n            clickable={!modal}\n            noOpacity={overlayHidden || isChildVisible}\n          />\n        )}\n        <Portal disabled={disablePortal}>\n          {rendered && (\n            <DialogContainer\n              enabled={type !== \"custom\"}\n              {...containerProps}\n              centered={type === \"centered\"}\n              displayNone={!temporary && exitedHidden && stage === \"exited\"}\n            >\n              <div\n                aria-modal={modal || undefined}\n                {...remaining}\n                {...elementProps}\n                {...eventHandlers}\n                id={id}\n                role={role}\n                tabIndex={tabIndex}\n              >\n                {children}\n              </div>\n            </DialogContainer>\n          )}\n        </Portal>\n      </NestedDialogProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useState","useSsr","useFocusContainer","Overlay","Portal","useScrollLock","useCSSTransition","useEnsuredId","DialogContainer","NestedDialogProvider","useNestedDialogContext","DEFAULT_DIALOG_CLASSNAMES","DEFAULT_DIALOG_TIMEOUT","dialog","noop","noopBool","Dialog","props","ref","id","propId","modal","role","type","width","tabIndex","visible","onRequestClose","containerProps","temporary","className","timeout","classNames","disableTransition","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disableOverlay","overlayProps","overlayHidden","onKeyDown","isFocusTypeDisabled","disablePortal","propDisablePortal","disableScrollLock","disableEscapeClose","disableFocusOutline","children","remaining","ssr","setChildVisible","isChildVisible","setIsChildVisible","eventHandlers","transitionOptions","nodeRef","activate","event","isPropagationStopped","key","stopPropagation","elementProps","stage","rendered","transitionIn","fixed","outline","disableBoxShadow","appearing","value","onClick","clickable","noOpacity","disabled","enabled","centered","displayNone","div","aria-modal","undefined"],"mappings":"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"}
+{"version":3,"sources":["../../src/dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  type FocusContainerComponentProps,\n  useFocusContainer,\n} from \"../focus/useFocusContainer.js\";\nimport { Overlay } from \"../overlay/Overlay.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  type ConfigurableDialogContainerProps,\n  DialogContainer,\n} from \"./DialogContainer.js\";\nimport {\n  NestedDialogProvider,\n  useNestedDialogContext,\n} from \"./NestedDialogProvider.js\";\nimport {\n  DEFAULT_DIALOG_CLASSNAMES,\n  DEFAULT_DIALOG_TIMEOUT,\n  type DialogType,\n  type DialogWidth,\n  dialog,\n} from \"./styles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nconst noopBool = (): boolean => false;\n\nexport interface BaseDialogProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CSSTransitionComponentProps,\n    TransitionActions,\n    FocusContainerComponentProps {\n  /**\n   * @defaultValue `\"dialog-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * @defaultValue `\"centered\"`\n   */\n  type?: DialogType;\n\n  /**\n   * @see {@link DialogWidth}\n   * @defaultValue `\"auto\"`\n   */\n  width?: DialogWidth;\n\n  /**\n   * @defaultValue `\"dialog\"`\n   */\n  role?: \"dialog\" | \"alertdialog\" | \"menu\" | \"none\";\n\n  /**\n   * This value controls the visibility of the dialog.\n   */\n  visible: boolean;\n\n  /**\n   * This function should set the {@link visible} prop to false to hide the\n   * modal when:\n   * - the {@link modal} and {@link disableEscapeClose} props are `false` and\n   *   the user presses the `\"Escape\"` key.\n   * - The overlay element is clicked\n   */\n  onRequestClose: () => void;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /** @defaultValue `-1` */\n  tabIndex?: number;\n\n  /**\n   * Set this value to `true` if the dialog should behave as a modal which\n   * prevents the modal from being closed by pressing the `\"Escape\"` key or\n   * clicking the overlay. The user **must** click one of the actions within the\n   * dialog instead.\n   *\n   * @defaultValue `false`\n   */\n  modal?: boolean;\n\n  /**\n   * Set this to `true` if the dialog should no longer use the `Portal`\n   * behavior.\n   *\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * Set this to `true` if you want the page to still be scrollable while the\n   * dialog is visible. This should normally be `true` for popovers/fixed\n   * dialogs.\n   *\n   * @defaultValue `type === \"custom\"`\n   */\n  disableScrollLock?: boolean;\n\n  /**\n   * Set this to `true` to prevent the dialog from being closed when the\n   * `\"Escape\"` key is pressed. This is `true` by default when the {@link modal}\n   * prop is `true`\n   *\n   * @defaultValue `modal`\n   */\n  disableEscapeClose?: boolean;\n\n  /**\n   * Set this to `true` if an overlay should not appear behind the dialog.\n   *\n   * Note: this was changed from `type === \"full-page\"` to `false` so that you\n   * can change between full-page and centered based on media queries. If the\n   * type changes the overlay would end up rendering above the dialog instead of\n   * behind.\n   *\n   * @see {@link overlayHidden}\n   * @defaultValue `false`\n   */\n  disableOverlay?: boolean;\n\n  /**\n   * Set this to `true` if an overlay should be appear behind the dialog but\n   * have an `opacity: 0`. This is useful if you want to prevent other elements\n   * on the page from being clicked while the dialog is visible, but don't want\n   * a dark background. i.e. popovers/fixed dialogs.\n   *\n   * @defaultValue `false`\n   */\n  overlayHidden?: boolean;\n\n  /**\n   * Any additional props that should be passed to the overlay element if it is\n   * rendered.\n   */\n  overlayProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * Any additional props that should be passed to the container element when\n   * the `type !== \"custom\"`.\n   */\n  containerProps?: PropsWithRef<ConfigurableDialogContainerProps>;\n\n  /**\n   * @see {@link DEFAULT_DIALOG_TIMEOUT}\n   * @defaultValue `DEFAULT_DIALOG_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   * @see {@link DEFAULT_DIALOG_CLASSNAMES}\n   * @defaultValue `DEFAULT_DIALOG_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n\n  /**\n   * Set this to `true` if the `Dialog` should not gain the normal focus box\n   * shadow while it is focused. The `Dialog` should normally only gain focus\n   * when it becomes visible and no child elements have `autoFocus` enabled.\n   *\n   * @since 6.0.0\n   * @defaultValue `type === \"full-page\"`\n   */\n  disableFocusOutline?: boolean;\n}\n\nexport type DialogProps = LabelRequiredForA11y<BaseDialogProps>;\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Dialog } from \"@react-md/core/dialog/Dialog\";\n * import { DialogContent } from \"@react-md/core/dialog/DialogContent\";\n * import { DialogFooter } from \"@react-md/core/dialog/DialogFooter\";\n * import { DialogHeader } from \"@react-md/core/dialog/DialogHeader\";\n * import { DialogTitle } from \"@react-md/core/dialog/DialogTitle\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const {\n *     toggle,\n *     disable: onRequestClose,\n *     toggled: visible,\n *   } = useToggle(false);\n *\n *   return (\n *     <>\n *       <Button onClick={toggle}>Toggle</Button>\n *       <Dialog\n *         aria-labelledby=\"dialog-title\"\n *         visible={visible}\n *         onRequestClose={onRequestClose}\n *       >\n *         <DialogHeader>\n *           <DialogTitle id=\"dialog-title\">Simple Dialog</DialogTitle>\n *         </DialogHeader>\n *         <DialogContent>\n *           <Typography margin=\"none\">This is some text in a dialog.</Typography>\n *         </DialogContent>\n *         <DialogFooter>\n *           <Button onClick={onRequestClose}>\n *             Close\n *           </Button>\n *         </DialogFooter>\n *       </Dialog>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/dialog | Dialog Demos}\n * @since 6.0.0 The `Dialog` no longer supports focusing elements\n * within once it becomes visible. You must manually add `autoFocus` to a\n * element instead.\n */\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n  function Dialog(props, ref) {\n    const {\n      id: propId,\n      modal = false,\n      role = modal ? \"alertdialog\" : \"dialog\",\n      type = \"centered\",\n      width,\n      tabIndex = -1,\n      visible,\n      onRequestClose,\n      containerProps,\n      temporary = true,\n      className,\n      timeout = DEFAULT_DIALOG_TIMEOUT,\n      classNames = DEFAULT_DIALOG_CLASSNAMES,\n      disableTransition = false,\n      appear = false,\n      enter = true,\n      exit = true,\n      onEnter = noop,\n      onEntering = noop,\n      onEntered = noop,\n      onExit = noop,\n      onExiting = noop,\n      onExited = noop,\n      exitedHidden = true,\n      disableOverlay = false,\n      overlayProps,\n      overlayHidden,\n      onKeyDown = noop,\n      isFocusTypeDisabled = noopBool,\n      disablePortal: propDisablePortal,\n      disableScrollLock = false,\n      disableEscapeClose = modal,\n      disableFocusOutline = type === \"full-page\",\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"dialog\");\n\n    const ssr = useSsr();\n    const setChildVisible = useNestedDialogContext();\n\n    // this makes it so that as more non-full page dialogs become visible, the\n    // overlay does not become darker as more and more overlays are stacked upon\n    // each other. only the top-most overlay will have and active background\n    // color.\n    const [isChildVisible, setIsChildVisible] = useState(false);\n    const { eventHandlers, transitionOptions } = useFocusContainer({\n      nodeRef: ref,\n      activate: visible,\n      onEnter(appearing) {\n        onEnter(appearing);\n        setChildVisible(type !== \"full-page\");\n      },\n      onEntered(appear) {\n        onEntered(appear);\n        // this needs to be called onEnter and onEntered just in case the\n        // transition is disabled\n        setChildVisible(type !== \"full-page\");\n      },\n      onEntering,\n      onExit() {\n        onExit();\n        setChildVisible(false);\n      },\n      onExiting,\n      onExited() {\n        onExited();\n        // this needs to be called onExit and onExited just in case the\n        // transition is disabled\n        setChildVisible(false);\n      },\n      disableTransition,\n      onKeyDown(event) {\n        onKeyDown(event);\n        if (\n          event.isPropagationStopped() ||\n          modal ||\n          disableEscapeClose ||\n          event.key !== \"Escape\"\n        ) {\n          return;\n        }\n\n        // prevent parent dialogs from closing as well\n        event.stopPropagation();\n        onRequestClose();\n      },\n      isFocusTypeDisabled,\n    });\n    const { elementProps, stage, rendered, disablePortal } = useCSSTransition({\n      transitionIn: visible,\n      timeout,\n      classNames,\n      className: dialog({\n        type,\n        width,\n        fixed: type === \"custom\",\n        outline: !disableFocusOutline,\n        disableBoxShadow: isChildVisible,\n        className,\n      }),\n      appear: appear && !disableTransition && !ssr,\n      enter: enter && !disableTransition,\n      exit: exit && !disableTransition,\n      temporary,\n      exitedHidden,\n      disablePortal: propDisablePortal,\n      ...transitionOptions,\n    });\n    useScrollLock(!disableScrollLock && visible);\n\n    return (\n      <NestedDialogProvider value={setIsChildVisible}>\n        {!disableOverlay && (\n          <Overlay\n            visible={visible}\n            disableTransition={disableTransition}\n            temporary={temporary}\n            disablePortal={disablePortal}\n            {...overlayProps}\n            onClick={modal ? noop : onRequestClose}\n            clickable={!modal}\n            noOpacity={overlayHidden || isChildVisible}\n          />\n        )}\n        <Portal disabled={disablePortal}>\n          {rendered && (\n            <DialogContainer\n              enabled={type !== \"custom\"}\n              {...containerProps}\n              centered={type === \"centered\"}\n              displayNone={!temporary && exitedHidden && stage === \"exited\"}\n            >\n              <div\n                aria-modal={modal || undefined}\n                {...remaining}\n                {...elementProps}\n                {...eventHandlers}\n                id={id}\n                role={role}\n                tabIndex={tabIndex}\n              >\n                {children}\n              </div>\n            </DialogContainer>\n          )}\n        </Portal>\n      </NestedDialogProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useState","useSsr","useFocusContainer","Overlay","Portal","useScrollLock","useCSSTransition","useEnsuredId","DialogContainer","NestedDialogProvider","useNestedDialogContext","DEFAULT_DIALOG_CLASSNAMES","DEFAULT_DIALOG_TIMEOUT","dialog","noop","noopBool","Dialog","props","ref","id","propId","modal","role","type","width","tabIndex","visible","onRequestClose","containerProps","temporary","className","timeout","classNames","disableTransition","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disableOverlay","overlayProps","overlayHidden","onKeyDown","isFocusTypeDisabled","disablePortal","propDisablePortal","disableScrollLock","disableEscapeClose","disableFocusOutline","children","remaining","ssr","setChildVisible","isChildVisible","setIsChildVisible","eventHandlers","transitionOptions","nodeRef","activate","appearing","event","isPropagationStopped","key","stopPropagation","elementProps","stage","rendered","transitionIn","fixed","outline","disableBoxShadow","value","onClick","clickable","noOpacity","disabled","enabled","centered","displayNone","div","aria-modal","undefined"],"mappings":"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"}

package/dist/focus/useFocusContainer.d.ts

@@ -17,10 +17,17 @@ import { type TransitionCallbacks } from "../transition/types.js";
  * @since 6.0.0
  */
 export type FocusType = "mount" | "unmount" | "keyboard";
-/** @since 6.0.0 */
-export type FocusContainerTransitionCallbacks = Pick<TransitionCallbacks, "onEntering" | "onEntered" | "onExiting" | "onExited">;
-/** @since 6.0.0 */
-export interface FocusContainerTransitionOptions<E extends HTMLElement> extends FocusContainerTransitionCallbacks {
+/**
+ * @since 6.0.0
+ * @deprecated Use `TransitionCallbacks` instead.
+ */
+export type FocusContainerTransitionCallbacks = TransitionCallbacks;
+/**
+ * @since 6.0.0
+ * @since 6.3.2 Fixed by extending `TransitionCallbacks` after the
+ * `onEnteredOnce` and `onExitedOnce` support was added to CSS transitions.
+ */
+export interface FocusContainerTransitionOptions<E extends HTMLElement> extends TransitionCallbacks {
     /**
      * An optional ref that will be merged with the
      * {@link FocusContainerImplementation.nodeRef}

package/dist/focus/useFocusContainer.js

@@ -50,7 +50,7 @@ const noop = ()=>{
  *
  * @since 6.0.0
  */ export function useFocusContainer(options) {
-    const { nodeRef, activate, onEntering = noop, onEntered = noop, onExiting = noop, onExited = noop, onKeyDown = noop, programmatic = false, disableTransition = false, isFocusTypeDisabled = noop } = options;
+    const { nodeRef, activate, onEnter, onEntering, onEntered, onExit, onExiting, onExited, onKeyDown = noop, programmatic = false, disableTransition = false, isFocusTypeDisabled = noop } = options;
     const [ref, refCallback] = useEnsuredRef(nodeRef);
     const prevFocus = useRef(null);
     useEffect(()=>{
@@ -66,6 +66,7 @@ const noop = ()=>{
         transitionOptions: {
             nodeRef: refCallback,
             ...getTransitionCallbacks({
+                onEnter,
                 onEnterOnce: ()=>{
                     const instance = ref.current;
                     if (instance && !isFocusTypeDisabled("mount") && (!document.activeElement || !instance.contains(document.activeElement))) {
@@ -84,6 +85,7 @@ const noop = ()=>{
                         prevFocus.current?.focus();
                     });
                 },
+                onExit,
                 onExiting,
                 onExited,
                 disableTransition

package/dist/focus/useFocusContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/focus/useFocusContainer.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type KeyboardEventHandler,\n  type Ref,\n  type RefObject,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { getTransitionCallbacks } from \"../transition/getTransitionCallbacks.js\";\nimport { type TransitionCallbacks } from \"../transition/types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport {\n  type FocusElementWithinType,\n  focusElementWithin,\n  getFocusableElements,\n} from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * `\"mount\"` - this will attempt to focus the container element if:\n * - there is no `document.activeElement`\n * - the container element does not contain the `document.activeElement`\n *\n * `\"unmount\"` - attempts to re-focus the element that was focused before the\n * focus container became active. The previous focus element is captured\n * whenever the `activate` option on the `useFocusContainer` hook is set to\n * `true`. This is normally when an element becomes `visible`.\n *\n * `\"keyboard\"` - refocuses the first focusable element if pressing `Tab` would\n * move the focus outside of the container element. If `Shift + Tab` was used,\n * the last focusable element will be used instead.\n *\n * @since 6.0.0\n */\nexport type FocusType = \"mount\" | \"unmount\" | \"keyboard\";\n\n/** @since 6.0.0 */\nexport type FocusContainerTransitionCallbacks = Pick<\n  TransitionCallbacks,\n  \"onEntering\" | \"onEntered\" | \"onExiting\" | \"onExited\"\n>;\n\n/** @since 6.0.0 */\nexport interface FocusContainerTransitionOptions<E extends HTMLElement>\n  extends FocusContainerTransitionCallbacks {\n  /**\n   * An optional ref that will be merged with the\n   * {@link FocusContainerImplementation.nodeRef}\n   */\n  nodeRef?: Ref<E>;\n}\n\n/** @since 6.0.0 */\nexport interface FocusContainerEventHandlers<E extends HTMLElement> {\n  onKeyDown?: KeyboardEventHandler<E>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type IsFocusTypeDisabled = (type: FocusType) => boolean;\n\nexport interface FocusContainerComponentProps {\n  /**\n   * @defaultValue `() => false`\n   */\n  isFocusTypeDisabled?: IsFocusTypeDisabled;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface FocusContainerOptions<E extends HTMLElement>\n  extends FocusContainerTransitionOptions<E>,\n    FocusContainerComponentProps {\n  onKeyDown?: KeyboardEventHandler<E>;\n  /**\n   * This to `true` will capture the current focused element as a focus target\n   * once the `onExited` hook is fired. This should usually be set to the\n   * `transitionIn` prop for `useTransition`.\n   */\n  activate: boolean;\n\n  /**\n   * Set this to true if elements that can be programmatically focused should be\n   * included. These would be elements with a `tabIndex={-1}`.\n   *\n   * @defaultValue `false`\n   */\n  programmatic?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface FocusContainerImplementation<E extends HTMLElement> {\n  nodeRef: RefObject<E>;\n  eventHandlers: Required<FocusContainerEventHandlers<E>>;\n  transitionOptions: Required<FocusContainerTransitionOptions<E>>;\n}\n\n/**\n * This hook is mostly for internal use only for dialog accessibility behavior\n * to prevent the focus from moving outside of the dialog while it is visible.\n * This API was developed to be used with the `useCSSTransition`/`useTransition`\n * hooks as well.\n *\n * @example Main Usage\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\"\n * import { useFocusContainer } from \"@react-md/core/focus/useFocusContainer\"\n * import { useScaleTransition } from \"@react-md/core/transition/useScaleTransition\"\n * import { useToggle } from \"@react-md/core/useToggle\"\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { toggled, enable, disable } = useToggle(false);\n *\n *   const { eventHandlers, transitionOptions } = useFocusContainer({\n *     activate: toggled,\n *   });\n *   const { elementProps, rendered } = useScaleTransition({\n *     transitionIn: toggled,\n *     temporary: true,\n *     ...transitionOptions,\n *   });\n *\n *   return (\n *     <>\n *       <Button onClick={enable}>Toggle</Button>\n *       {rendered && (\n *         <div {...eventHandlers} {...elementProps}>\n *           <Button onClick={disable}>Button 1</Button>\n *           <Button onClick={disable}>Button 2</Button>\n *           <Button onClick={disable}>Button 3</Button>\n *           <Button onClick={disable}>Button 4</Button>\n *         </div>\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useFocusContainer<E extends HTMLElement>(\n  options: FocusContainerOptions<E>\n): FocusContainerImplementation<E> {\n  const {\n    nodeRef,\n    activate,\n    onEntering = noop,\n    onEntered = noop,\n    onExiting = noop,\n    onExited = noop,\n    onKeyDown = noop,\n    programmatic = false,\n    disableTransition = false,\n    isFocusTypeDisabled = noop,\n  } = options;\n\n  const [ref, refCallback] = useEnsuredRef(nodeRef);\n  const prevFocus = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!activate || !(document.activeElement instanceof HTMLElement)) {\n      return;\n    }\n\n    prevFocus.current = document.activeElement;\n  }, [activate]);\n\n  return {\n    nodeRef: ref,\n    transitionOptions: {\n      nodeRef: refCallback,\n      ...getTransitionCallbacks({\n        onEnterOnce: () => {\n          const instance = ref.current;\n          if (\n            instance &&\n            !isFocusTypeDisabled(\"mount\") &&\n            (!document.activeElement ||\n              !instance.contains(document.activeElement))\n          ) {\n            instance.focus();\n          }\n        },\n        onEntering,\n        onEntered,\n        onExitOnce: () => {\n          if (isFocusTypeDisabled(\"unmount\")) {\n            return;\n          }\n\n          // For some reason, the `\"Enter\"` keydown event fires at a different timing\n          // than the Space  keydown event.\n          window.requestAnimationFrame(() => {\n            prevFocus.current?.focus();\n          });\n        },\n        onExiting,\n        onExited,\n        disableTransition,\n      }),\n    },\n    eventHandlers: {\n      onKeyDown(event) {\n        onKeyDown(event);\n        if (\n          event.isPropagationStopped() ||\n          event.key !== \"Tab\" ||\n          isFocusTypeDisabled(\"keyboard\")\n        ) {\n          return;\n        }\n\n        const { target, shiftKey, currentTarget } = event;\n        const elements = getFocusableElements(currentTarget, programmatic);\n        const count = elements.length;\n        if (count === 0) {\n          event.preventDefault();\n          return;\n        }\n\n        // if the container element is the current focus, need to either focus\n        // the first or last element so focus doesn't escape\n        let type: FocusElementWithinType | undefined;\n        if (\n          count === 1 ||\n          (!shiftKey &&\n            (target === currentTarget || target === elements[count - 1]))\n        ) {\n          type = \"first\";\n        } else if (\n          shiftKey &&\n          (target === currentTarget || target === elements[0])\n        ) {\n          type = \"last\";\n        }\n\n        if (type) {\n          event.preventDefault();\n          focusElementWithin({\n            type,\n            elements,\n            container: currentTarget,\n          });\n        }\n      },\n    },\n  };\n}\n"],"names":["useEffect","useRef","getTransitionCallbacks","useEnsuredRef","focusElementWithin","getFocusableElements","noop","useFocusContainer","options","nodeRef","activate","onEntering","onEntered","onExiting","onExited","onKeyDown","programmatic","disableTransition","isFocusTypeDisabled","ref","refCallback","prevFocus","document","activeElement","HTMLElement","current","transitionOptions","onEnterOnce","instance","contains","focus","onExitOnce","window","requestAnimationFrame","eventHandlers","event","isPropagationStopped","key","target","shiftKey","currentTarget","elements","count","length","preventDefault","type","container"],"mappings":"AAAA;AAEA,SAIEA,SAAS,EACTC,MAAM,QACD,QAAQ;AAEf,SAASC,sBAAsB,QAAQ,0CAA0C;AAEjF,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAEEC,kBAAkB,EAClBC,oBAAoB,QACf,aAAa;AAEpB,MAAMC,OAAO;AACX,aAAa;AACf;AAsFA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CC,GACD,OAAO,SAASC,kBACdC,OAAiC;IAEjC,MAAM,EACJC,OAAO,EACPC,QAAQ,EACRC,aAAaL,IAAI,EACjBM,YAAYN,IAAI,EAChBO,YAAYP,IAAI,EAChBQ,WAAWR,IAAI,EACfS,YAAYT,IAAI,EAChBU,eAAe,KAAK,EACpBC,oBAAoB,KAAK,EACzBC,sBAAsBZ,IAAI,EAC3B,GAAGE;IAEJ,MAAM,CAACW,KAAKC,YAAY,GAAGjB,cAAcM;IACzC,MAAMY,YAAYpB,OAA2B;IAE7CD,UAAU;QACR,IAAI,CAACU,YAAY,CAAEY,CAAAA,SAASC,aAAa,YAAYC,WAAU,GAAI;YACjE;QACF;QAEAH,UAAUI,OAAO,GAAGH,SAASC,aAAa;IAC5C,GAAG;QAACb;KAAS;IAEb,OAAO;QACLD,SAASU;QACTO,mBAAmB;YACjBjB,SAASW;YACT,GAAGlB,uBAAuB;gBACxByB,aAAa;oBACX,MAAMC,WAAWT,IAAIM,OAAO;oBAC5B,IACEG,YACA,CAACV,oBAAoB,YACpB,CAAA,CAACI,SAASC,aAAa,IACtB,CAACK,SAASC,QAAQ,CAACP,SAASC,aAAa,CAAA,GAC3C;wBACAK,SAASE,KAAK;oBAChB;gBACF;gBACAnB;gBACAC;gBACAmB,YAAY;oBACV,IAAIb,oBAAoB,YAAY;wBAClC;oBACF;oBAEA,2EAA2E;oBAC3E,iCAAiC;oBACjCc,OAAOC,qBAAqB,CAAC;wBAC3BZ,UAAUI,OAAO,EAAEK;oBACrB;gBACF;gBACAjB;gBACAC;gBACAG;YACF,EAAE;QACJ;QACAiB,eAAe;YACbnB,WAAUoB,KAAK;gBACbpB,UAAUoB;gBACV,IACEA,MAAMC,oBAAoB,MAC1BD,MAAME,GAAG,KAAK,SACdnB,oBAAoB,aACpB;oBACA;gBACF;gBAEA,MAAM,EAAEoB,MAAM,EAAEC,QAAQ,EAAEC,aAAa,EAAE,GAAGL;gBAC5C,MAAMM,WAAWpC,qBAAqBmC,eAAexB;gBACrD,MAAM0B,QAAQD,SAASE,MAAM;gBAC7B,IAAID,UAAU,GAAG;oBACfP,MAAMS,cAAc;oBACpB;gBACF;gBAEA,sEAAsE;gBACtE,oDAAoD;gBACpD,IAAIC;gBACJ,IACEH,UAAU,KACT,CAACH,YACCD,CAAAA,WAAWE,iBAAiBF,WAAWG,QAAQ,CAACC,QAAQ,EAAE,AAAD,GAC5D;oBACAG,OAAO;gBACT,OAAO,IACLN,YACCD,CAAAA,WAAWE,iBAAiBF,WAAWG,QAAQ,CAAC,EAAE,AAAD,GAClD;oBACAI,OAAO;gBACT;gBAEA,IAAIA,MAAM;oBACRV,MAAMS,cAAc;oBACpBxC,mBAAmB;wBACjByC;wBACAJ;wBACAK,WAAWN;oBACb;gBACF;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/focus/useFocusContainer.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type KeyboardEventHandler,\n  type Ref,\n  type RefObject,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { getTransitionCallbacks } from \"../transition/getTransitionCallbacks.js\";\nimport { type TransitionCallbacks } from \"../transition/types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport {\n  type FocusElementWithinType,\n  focusElementWithin,\n  getFocusableElements,\n} from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * `\"mount\"` - this will attempt to focus the container element if:\n * - there is no `document.activeElement`\n * - the container element does not contain the `document.activeElement`\n *\n * `\"unmount\"` - attempts to re-focus the element that was focused before the\n * focus container became active. The previous focus element is captured\n * whenever the `activate` option on the `useFocusContainer` hook is set to\n * `true`. This is normally when an element becomes `visible`.\n *\n * `\"keyboard\"` - refocuses the first focusable element if pressing `Tab` would\n * move the focus outside of the container element. If `Shift + Tab` was used,\n * the last focusable element will be used instead.\n *\n * @since 6.0.0\n */\nexport type FocusType = \"mount\" | \"unmount\" | \"keyboard\";\n\n/**\n * @since 6.0.0\n * @deprecated Use `TransitionCallbacks` instead.\n */\nexport type FocusContainerTransitionCallbacks = TransitionCallbacks;\n\n/**\n * @since 6.0.0\n * @since 6.3.2 Fixed by extending `TransitionCallbacks` after the\n * `onEnteredOnce` and `onExitedOnce` support was added to CSS transitions.\n */\nexport interface FocusContainerTransitionOptions<E extends HTMLElement>\n  extends TransitionCallbacks {\n  /**\n   * An optional ref that will be merged with the\n   * {@link FocusContainerImplementation.nodeRef}\n   */\n  nodeRef?: Ref<E>;\n}\n\n/** @since 6.0.0 */\nexport interface FocusContainerEventHandlers<E extends HTMLElement> {\n  onKeyDown?: KeyboardEventHandler<E>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type IsFocusTypeDisabled = (type: FocusType) => boolean;\n\nexport interface FocusContainerComponentProps {\n  /**\n   * @defaultValue `() => false`\n   */\n  isFocusTypeDisabled?: IsFocusTypeDisabled;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface FocusContainerOptions<E extends HTMLElement>\n  extends FocusContainerTransitionOptions<E>,\n    FocusContainerComponentProps {\n  onKeyDown?: KeyboardEventHandler<E>;\n  /**\n   * This to `true` will capture the current focused element as a focus target\n   * once the `onExited` hook is fired. This should usually be set to the\n   * `transitionIn` prop for `useTransition`.\n   */\n  activate: boolean;\n\n  /**\n   * Set this to true if elements that can be programmatically focused should be\n   * included. These would be elements with a `tabIndex={-1}`.\n   *\n   * @defaultValue `false`\n   */\n  programmatic?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface FocusContainerImplementation<E extends HTMLElement> {\n  nodeRef: RefObject<E>;\n  eventHandlers: Required<FocusContainerEventHandlers<E>>;\n  transitionOptions: Required<FocusContainerTransitionOptions<E>>;\n}\n\n/**\n * This hook is mostly for internal use only for dialog accessibility behavior\n * to prevent the focus from moving outside of the dialog while it is visible.\n * This API was developed to be used with the `useCSSTransition`/`useTransition`\n * hooks as well.\n *\n * @example Main Usage\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\"\n * import { useFocusContainer } from \"@react-md/core/focus/useFocusContainer\"\n * import { useScaleTransition } from \"@react-md/core/transition/useScaleTransition\"\n * import { useToggle } from \"@react-md/core/useToggle\"\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { toggled, enable, disable } = useToggle(false);\n *\n *   const { eventHandlers, transitionOptions } = useFocusContainer({\n *     activate: toggled,\n *   });\n *   const { elementProps, rendered } = useScaleTransition({\n *     transitionIn: toggled,\n *     temporary: true,\n *     ...transitionOptions,\n *   });\n *\n *   return (\n *     <>\n *       <Button onClick={enable}>Toggle</Button>\n *       {rendered && (\n *         <div {...eventHandlers} {...elementProps}>\n *           <Button onClick={disable}>Button 1</Button>\n *           <Button onClick={disable}>Button 2</Button>\n *           <Button onClick={disable}>Button 3</Button>\n *           <Button onClick={disable}>Button 4</Button>\n *         </div>\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useFocusContainer<E extends HTMLElement>(\n  options: FocusContainerOptions<E>\n): FocusContainerImplementation<E> {\n  const {\n    nodeRef,\n    activate,\n    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExiting,\n    onExited,\n    onKeyDown = noop,\n    programmatic = false,\n    disableTransition = false,\n    isFocusTypeDisabled = noop,\n  } = options;\n\n  const [ref, refCallback] = useEnsuredRef(nodeRef);\n  const prevFocus = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!activate || !(document.activeElement instanceof HTMLElement)) {\n      return;\n    }\n\n    prevFocus.current = document.activeElement;\n  }, [activate]);\n\n  return {\n    nodeRef: ref,\n    transitionOptions: {\n      nodeRef: refCallback,\n      ...getTransitionCallbacks({\n        onEnter,\n        onEnterOnce: () => {\n          const instance = ref.current;\n          if (\n            instance &&\n            !isFocusTypeDisabled(\"mount\") &&\n            (!document.activeElement ||\n              !instance.contains(document.activeElement))\n          ) {\n            instance.focus();\n          }\n        },\n        onEntering,\n        onEntered,\n        onExitOnce: () => {\n          if (isFocusTypeDisabled(\"unmount\")) {\n            return;\n          }\n\n          // For some reason, the `\"Enter\"` keydown event fires at a different timing\n          // than the Space  keydown event.\n          window.requestAnimationFrame(() => {\n            prevFocus.current?.focus();\n          });\n        },\n        onExit,\n        onExiting,\n        onExited,\n        disableTransition,\n      }),\n    },\n    eventHandlers: {\n      onKeyDown(event) {\n        onKeyDown(event);\n        if (\n          event.isPropagationStopped() ||\n          event.key !== \"Tab\" ||\n          isFocusTypeDisabled(\"keyboard\")\n        ) {\n          return;\n        }\n\n        const { target, shiftKey, currentTarget } = event;\n        const elements = getFocusableElements(currentTarget, programmatic);\n        const count = elements.length;\n        if (count === 0) {\n          event.preventDefault();\n          return;\n        }\n\n        // if the container element is the current focus, need to either focus\n        // the first or last element so focus doesn't escape\n        let type: FocusElementWithinType | undefined;\n        if (\n          count === 1 ||\n          (!shiftKey &&\n            (target === currentTarget || target === elements[count - 1]))\n        ) {\n          type = \"first\";\n        } else if (\n          shiftKey &&\n          (target === currentTarget || target === elements[0])\n        ) {\n          type = \"last\";\n        }\n\n        if (type) {\n          event.preventDefault();\n          focusElementWithin({\n            type,\n            elements,\n            container: currentTarget,\n          });\n        }\n      },\n    },\n  };\n}\n"],"names":["useEffect","useRef","getTransitionCallbacks","useEnsuredRef","focusElementWithin","getFocusableElements","noop","useFocusContainer","options","nodeRef","activate","onEnter","onEntering","onEntered","onExit","onExiting","onExited","onKeyDown","programmatic","disableTransition","isFocusTypeDisabled","ref","refCallback","prevFocus","document","activeElement","HTMLElement","current","transitionOptions","onEnterOnce","instance","contains","focus","onExitOnce","window","requestAnimationFrame","eventHandlers","event","isPropagationStopped","key","target","shiftKey","currentTarget","elements","count","length","preventDefault","type","container"],"mappings":"AAAA;AAEA,SAIEA,SAAS,EACTC,MAAM,QACD,QAAQ;AAEf,SAASC,sBAAsB,QAAQ,0CAA0C;AAEjF,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAEEC,kBAAkB,EAClBC,oBAAoB,QACf,aAAa;AAEpB,MAAMC,OAAO;AACX,aAAa;AACf;AA0FA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CC,GACD,OAAO,SAASC,kBACdC,OAAiC;IAEjC,MAAM,EACJC,OAAO,EACPC,QAAQ,EACRC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,YAAYX,IAAI,EAChBY,eAAe,KAAK,EACpBC,oBAAoB,KAAK,EACzBC,sBAAsBd,IAAI,EAC3B,GAAGE;IAEJ,MAAM,CAACa,KAAKC,YAAY,GAAGnB,cAAcM;IACzC,MAAMc,YAAYtB,OAA2B;IAE7CD,UAAU;QACR,IAAI,CAACU,YAAY,CAAEc,CAAAA,SAASC,aAAa,YAAYC,WAAU,GAAI;YACjE;QACF;QAEAH,UAAUI,OAAO,GAAGH,SAASC,aAAa;IAC5C,GAAG;QAACf;KAAS;IAEb,OAAO;QACLD,SAASY;QACTO,mBAAmB;YACjBnB,SAASa;YACT,GAAGpB,uBAAuB;gBACxBS;gBACAkB,aAAa;oBACX,MAAMC,WAAWT,IAAIM,OAAO;oBAC5B,IACEG,YACA,CAACV,oBAAoB,YACpB,CAAA,CAACI,SAASC,aAAa,IACtB,CAACK,SAASC,QAAQ,CAACP,SAASC,aAAa,CAAA,GAC3C;wBACAK,SAASE,KAAK;oBAChB;gBACF;gBACApB;gBACAC;gBACAoB,YAAY;oBACV,IAAIb,oBAAoB,YAAY;wBAClC;oBACF;oBAEA,2EAA2E;oBAC3E,iCAAiC;oBACjCc,OAAOC,qBAAqB,CAAC;wBAC3BZ,UAAUI,OAAO,EAAEK;oBACrB;gBACF;gBACAlB;gBACAC;gBACAC;gBACAG;YACF,EAAE;QACJ;QACAiB,eAAe;YACbnB,WAAUoB,KAAK;gBACbpB,UAAUoB;gBACV,IACEA,MAAMC,oBAAoB,MAC1BD,MAAME,GAAG,KAAK,SACdnB,oBAAoB,aACpB;oBACA;gBACF;gBAEA,MAAM,EAAEoB,MAAM,EAAEC,QAAQ,EAAEC,aAAa,EAAE,GAAGL;gBAC5C,MAAMM,WAAWtC,qBAAqBqC,eAAexB;gBACrD,MAAM0B,QAAQD,SAASE,MAAM;gBAC7B,IAAID,UAAU,GAAG;oBACfP,MAAMS,cAAc;oBACpB;gBACF;gBAEA,sEAAsE;gBACtE,oDAAoD;gBACpD,IAAIC;gBACJ,IACEH,UAAU,KACT,CAACH,YACCD,CAAAA,WAAWE,iBAAiBF,WAAWG,QAAQ,CAACC,QAAQ,EAAE,AAAD,GAC5D;oBACAG,OAAO;gBACT,OAAO,IACLN,YACCD,CAAAA,WAAWE,iBAAiBF,WAAWG,QAAQ,CAAC,EAAE,AAAD,GAClD;oBACAI,OAAO;gBACT;gBAEA,IAAIA,MAAM;oBACRV,MAAMS,cAAc;oBACpB1C,mBAAmB;wBACjB2C;wBACAJ;wBACAK,WAAWN;oBACb;gBACF;YACF;QACF;IACF;AACF"}

package/dist/hoverMode/useHoverModeProvider.d.ts

@@ -93,7 +93,15 @@ export interface HoverModeContext extends SimpleHoverModeContext {
  */
 export interface CreateHoverModeContextOptions {
     /**
-     * TODO: I think this has something to do with how I implemented the MenuBar.
+     * This should only be used if creating nested hover mode behavior where the
+     * hover mode should default to being enabled if a parent element is hovered.
+     * So set this to an element's `id` if a parent element is being hovered when
+     * the component **mounts**.
+     *
+     * The use case for this is the `MenuBar` component since after clicking a
+     * menu button or hovering it long enough to enable the hover mode, all child
+     * menus should also be in the hover mode until the top-most element is
+     * closed.
      *
      * @defaultValue `""`
      */

package/dist/hoverMode/useHoverModeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hoverMode/useHoverModeProvider.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { type NonNullMutableRef, type NonNullRef } from \"../types.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 6.0.0 */\nexport interface SimpleHoverModeContext {\n  /**\n   * @example Main Usage\n   * ```ts\n   * onMouseEnter(event) {\n   *   const hoverTimeout = hoverTimeoutRef.current;\n   *   if (typeof hoverTimeout !== \"number\" || mode === \"touch\") {\n   *     return;\n   *   }\n   *\n   *   const { id } = event.currentTarget;\n   *   clearDisableTimer();\n   *   window.clearTimeout(visibilityTimeout.current);\n   *   visibilityTimeout.current = window.setTimeout(() => {\n   *     enableHoverMode(id);\n   *     setVisible(true);\n   *   }, hoverTimeout);\n   * }\n   * ```\n   */\n  hoverTimeoutRef: NonNullRef<number | undefined>;\n\n  /**\n   * @example Main Usage\n   * ```ts\n   * onMouseLeave() {\n   *   if (mode === \"touch\") {\n   *     return\n   *   }\n   *\n   *   startDisableTimer();\n   *   window.clearTimeout(visibilityTimeout.current);\n   *   visibilityTimeout.current = window.setTimeout(() => {\n   *     setVisible(false)\n   *   }, leaveTimeoutRef.current);\n   * }\n   * ```\n   */\n  leaveTimeoutRef: NonNullRef<number>;\n\n  /**\n   * When this is called, the {@link hoverTimeoutRef} will be set to `0` and the\n   * {@link HoverModeContext.activeId} will be set to this `activeId` value.\n   *\n   * @see {@link hoverTimeoutRef} for an example.\n   */\n  enableHoverMode: (activeId: string) => void;\n\n  /**\n   * Disables all hover mode behavior by clearing all timeouts and resetting\n   * internal state.\n   */\n  disableHoverMode: () => void;\n\n  /**\n   * @see {@link leaveTimeoutRef} for an example.\n   */\n  startDisableTimer: () => void;\n\n  /**\n   * @see {@link hoverTimeoutRef} for an example.\n   */\n  clearDisableTimer: () => void;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Uses refs to increase performance by preventing unneeded\n * re-renders of the entire hover mode provider's component tree. The API also\n * changed to support custom hover mode providers.\n */\nexport interface HoverModeContext extends SimpleHoverModeContext {\n  /**\n   * This will only be updated if {@link HoverModeConfiguration.forceRerender} is `true`\n   */\n  activeId: string;\n\n  /**\n   * This ref contains the current DOM `id` for the element that is being\n   * hovered within the `HoverModeProvider`. This will be an empty string\n   * when the hover mode is not active.\n   */\n  activeIdRef: NonNullMutableRef<string>;\n\n  /**\n   * This ref can be used to disable transitions for a group of components using\n   * the same hover mode provider. The general flow would be:\n   *\n   * - set `disableTransition: animatedOnceRef.current` on hover mode components\n   * - set `animatedOnceRef.current = true` when the `onEntered` transition callback fires\n   * - set `animatedOnceRef.current = false` when the hover mode behavior is\n   *   disabled. This would normally be after a timeout for the `onExited`\n   *   callback\n   */\n  animatedOnceRef: NonNullMutableRef<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CreateHoverModeContextOptions {\n  /**\n   * TODO: I think this has something to do with how I implemented the MenuBar.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultActiveId?: string;\n\n  /**\n   * When this is `undefined`, the hover mode behavior will be disabled.\n   * Otherwise, this will be the amount of time to wait on a `mouseenter` event\n   * before setting the visibility to `true`.\n   *\n   * @defaultValue `undefined`\n   */\n  hoverTimeout?: number;\n\n  /**\n   * The amount of time to wait after a `mouseleave` event before setting the\n   * visibility to `false`.\n   *\n   * @defaultValue `0`\n   * @since 6.0.0 This was renamed from `exitVisibilityDelay` and the\n   * default value changed from `300` to `0`.\n   */\n  leaveTimeout?: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport function createHoverModeContext(\n  options: CreateHoverModeContextOptions = {}\n): Readonly<HoverModeContext> {\n  const { defaultActiveId = \"\", hoverTimeout, leaveTimeout = 0 } = options;\n\n  return {\n    activeId: defaultActiveId,\n    activeIdRef: { current: defaultActiveId },\n    hoverTimeoutRef: { current: hoverTimeout },\n    leaveTimeoutRef: { current: leaveTimeout },\n    animatedOnceRef: { current: false },\n    enableHoverMode: noop,\n    disableHoverMode: noop,\n    startDisableTimer: noop,\n    clearDisableTimer: noop,\n  };\n}\n\n/** @since 6.0.0 */\nexport interface HoverModeConfiguration extends CreateHoverModeContextOptions {\n  /**\n   * The amount of time to wait before disabling the hover mode behavior if none\n   * of the components are being hovered.\n   *\n   * If this is `undefined`, {@link HoverModeContext.startDisableTimer} will do\n   * nothing. You must manually call {@link HoverModeContext.disableHoverMode}\n   * to disable the hover mode instead.\n   */\n  disableTimeout?: number;\n\n  /**\n   * @defaultValue `false`\n   */\n  forceRerender?: boolean;\n}\n\n/**\n * @example Creating a Hover Mode Group\n * ```tsx\n * import {\n *   type HoverModeContext,\n *   createHoverModeContext,\n *   useHoverModeProvider,\n * } from \"@react-md/core/hoverMode/useHoverModeProvider\";\n * import {\n *   type ReactElement,\n *   type ReactNode,\n *   createContext,\n *   useContext,\n * } from \"react\";\n *\n * export interface CustomHoverContext extends HoverModeContext {\n *   // any additional fields in the context\n * }\n *\n * const context = createContext<CustomHoverContext>(\n *   createHoverModeContext()\n *   // you can also provide default values if needed when the context provider\n *   // isn't a parent component. the following are the defaults\n *   // createHoverModeContext({\n *   //    hoverTimeout: undefined,\n *   //    leaveTimeout: 0,\n *   //    defaultActiveId: \"\",\n *   // })\n * );\n * const { Provider } = context;\n *\n * interface Props extends HoverModeConfiguration {\n *   children: ReactNode;\n * }\n *\n * export function CustomHoverModeProvider({\n *   children,\n *   // change to whatever defaults you want\n *   hoverTimeout = 3000,\n *   leaveTimeout = 3000,\n *   defaultActiveId = \"\",\n *   disableTimeout = 5000,\n * }: Props): ReactElement {\n *   const context = useHoverModeProvider({\n *     hoverTimeout,\n *     leaveTimeout,\n *     defaultActiveId,\n *     disableTimeout,\n *   });\n *\n *   return <Provider value={context}>{children}</Provider>;\n * }\n * ```\n *\n * @see {@link CreateHoverModeContextOptions}\n * @see {@link useHoverMode}\n * @since 6.0.0 The `HoverModeProvider` component was replaced by this\n * hook implementation. After developing the `MenuBar`, I realized the hover\n * mode should normally be grouped by related components or types instead of a\n * top-level catch all.\n */\nexport function useHoverModeProvider(\n  options: HoverModeConfiguration\n): Readonly<HoverModeContext> {\n  const {\n    hoverTimeout,\n    leaveTimeout = 0,\n    forceRerender = false,\n    defaultActiveId = \"\",\n    disableTimeout,\n  } = options;\n\n  const [activeId, setActiveId] = useState(defaultActiveId);\n  const activeIdRef = useRef(defaultActiveId);\n  const hoverTimeoutRef = useRef(hoverTimeout);\n  const leaveTimeoutRef = useRef(leaveTimeout);\n  const animatedOnceRef = useRef(!!defaultActiveId);\n  const disableHoverModeTimeout = useRef<number | undefined>();\n  const clearDisableTimer = useCallback(() => {\n    window.clearTimeout(disableHoverModeTimeout.current);\n  }, []);\n  const enableHoverMode = useCallback(\n    (activeId: string) => {\n      clearDisableTimer();\n      activeIdRef.current = activeId;\n      hoverTimeoutRef.current = 0;\n\n      if (forceRerender) {\n        setActiveId(activeId);\n      }\n    },\n    [clearDisableTimer, forceRerender]\n  );\n  const disableHoverMode = useCallback(() => {\n    clearDisableTimer();\n    activeIdRef.current = \"\";\n    hoverTimeoutRef.current = hoverTimeout;\n    animatedOnceRef.current = false;\n    if (forceRerender) {\n      setActiveId(\"\");\n    }\n  }, [clearDisableTimer, forceRerender, hoverTimeout]);\n  const startDisableTimer = useCallback(() => {\n    if (typeof disableTimeout !== \"number\") {\n      return;\n    }\n\n    clearDisableTimer();\n    disableHoverModeTimeout.current = window.setTimeout(() => {\n      disableHoverMode();\n    }, disableTimeout);\n  }, [clearDisableTimer, disableHoverMode, disableTimeout]);\n\n  useEffect(() => {\n    hoverTimeoutRef.current = hoverTimeout;\n    return () => {\n      window.clearTimeout(disableHoverModeTimeout.current);\n    };\n  }, [hoverTimeout]);\n\n  return useMemo<HoverModeContext>(\n    () => ({\n      activeId,\n      activeIdRef,\n      hoverTimeoutRef,\n      leaveTimeoutRef,\n      animatedOnceRef,\n      enableHoverMode,\n      disableHoverMode,\n      startDisableTimer,\n      clearDisableTimer,\n    }),\n    [\n      activeId,\n      enableHoverMode,\n      disableHoverMode,\n      startDisableTimer,\n      clearDisableTimer,\n    ]\n  );\n}\n"],"names":["useCallback","useEffect","useMemo","useRef","useState","noop","createHoverModeContext","options","defaultActiveId","hoverTimeout","leaveTimeout","activeId","activeIdRef","current","hoverTimeoutRef","leaveTimeoutRef","animatedOnceRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","useHoverModeProvider","forceRerender","disableTimeout","setActiveId","disableHoverModeTimeout","window","clearTimeout","setTimeout"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAI1E,MAAMC,OAAO;AACX,aAAa;AACf;AAmIA;;CAEC,GACD,OAAO,SAASC,uBACdC,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,kBAAkB,EAAE,EAAEC,YAAY,EAAEC,eAAe,CAAC,EAAE,GAAGH;IAEjE,OAAO;QACLI,UAAUH;QACVI,aAAa;YAAEC,SAASL;QAAgB;QACxCM,iBAAiB;YAAED,SAASJ;QAAa;QACzCM,iBAAiB;YAAEF,SAASH;QAAa;QACzCM,iBAAiB;YAAEH,SAAS;QAAM;QAClCI,iBAAiBZ;QACjBa,kBAAkBb;QAClBc,mBAAmBd;QACnBe,mBAAmBf;IACrB;AACF;AAoBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DC,GACD,OAAO,SAASgB,qBACdd,OAA+B;IAE/B,MAAM,EACJE,YAAY,EACZC,eAAe,CAAC,EAChBY,gBAAgB,KAAK,EACrBd,kBAAkB,EAAE,EACpBe,cAAc,EACf,GAAGhB;IAEJ,MAAM,CAACI,UAAUa,YAAY,GAAGpB,SAASI;IACzC,MAAMI,cAAcT,OAAOK;IAC3B,MAAMM,kBAAkBX,OAAOM;IAC/B,MAAMM,kBAAkBZ,OAAOO;IAC/B,MAAMM,kBAAkBb,OAAO,CAAC,CAACK;IACjC,MAAMiB,0BAA0BtB;IAChC,MAAMiB,oBAAoBpB,YAAY;QACpC0B,OAAOC,YAAY,CAACF,wBAAwBZ,OAAO;IACrD,GAAG,EAAE;IACL,MAAMI,kBAAkBjB,YACtB,CAACW;QACCS;QACAR,YAAYC,OAAO,GAAGF;QACtBG,gBAAgBD,OAAO,GAAG;QAE1B,IAAIS,eAAe;YACjBE,YAAYb;QACd;IACF,GACA;QAACS;QAAmBE;KAAc;IAEpC,MAAMJ,mBAAmBlB,YAAY;QACnCoB;QACAR,YAAYC,OAAO,GAAG;QACtBC,gBAAgBD,OAAO,GAAGJ;QAC1BO,gBAAgBH,OAAO,GAAG;QAC1B,IAAIS,eAAe;YACjBE,YAAY;QACd;IACF,GAAG;QAACJ;QAAmBE;QAAeb;KAAa;IACnD,MAAMU,oBAAoBnB,YAAY;QACpC,IAAI,OAAOuB,mBAAmB,UAAU;YACtC;QACF;QAEAH;QACAK,wBAAwBZ,OAAO,GAAGa,OAAOE,UAAU,CAAC;YAClDV;QACF,GAAGK;IACL,GAAG;QAACH;QAAmBF;QAAkBK;KAAe;IAExDtB,UAAU;QACRa,gBAAgBD,OAAO,GAAGJ;QAC1B,OAAO;YACLiB,OAAOC,YAAY,CAACF,wBAAwBZ,OAAO;QACrD;IACF,GAAG;QAACJ;KAAa;IAEjB,OAAOP,QACL,IAAO,CAAA;YACLS;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACET;QACAM;QACAC;QACAC;QACAC;KACD;AAEL"}
+{"version":3,"sources":["../../src/hoverMode/useHoverModeProvider.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { type NonNullMutableRef, type NonNullRef } from \"../types.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 6.0.0 */\nexport interface SimpleHoverModeContext {\n  /**\n   * @example Main Usage\n   * ```ts\n   * onMouseEnter(event) {\n   *   const hoverTimeout = hoverTimeoutRef.current;\n   *   if (typeof hoverTimeout !== \"number\" || mode === \"touch\") {\n   *     return;\n   *   }\n   *\n   *   const { id } = event.currentTarget;\n   *   clearDisableTimer();\n   *   window.clearTimeout(visibilityTimeout.current);\n   *   visibilityTimeout.current = window.setTimeout(() => {\n   *     enableHoverMode(id);\n   *     setVisible(true);\n   *   }, hoverTimeout);\n   * }\n   * ```\n   */\n  hoverTimeoutRef: NonNullRef<number | undefined>;\n\n  /**\n   * @example Main Usage\n   * ```ts\n   * onMouseLeave() {\n   *   if (mode === \"touch\") {\n   *     return\n   *   }\n   *\n   *   startDisableTimer();\n   *   window.clearTimeout(visibilityTimeout.current);\n   *   visibilityTimeout.current = window.setTimeout(() => {\n   *     setVisible(false)\n   *   }, leaveTimeoutRef.current);\n   * }\n   * ```\n   */\n  leaveTimeoutRef: NonNullRef<number>;\n\n  /**\n   * When this is called, the {@link hoverTimeoutRef} will be set to `0` and the\n   * {@link HoverModeContext.activeId} will be set to this `activeId` value.\n   *\n   * @see {@link hoverTimeoutRef} for an example.\n   */\n  enableHoverMode: (activeId: string) => void;\n\n  /**\n   * Disables all hover mode behavior by clearing all timeouts and resetting\n   * internal state.\n   */\n  disableHoverMode: () => void;\n\n  /**\n   * @see {@link leaveTimeoutRef} for an example.\n   */\n  startDisableTimer: () => void;\n\n  /**\n   * @see {@link hoverTimeoutRef} for an example.\n   */\n  clearDisableTimer: () => void;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Uses refs to increase performance by preventing unneeded\n * re-renders of the entire hover mode provider's component tree. The API also\n * changed to support custom hover mode providers.\n */\nexport interface HoverModeContext extends SimpleHoverModeContext {\n  /**\n   * This will only be updated if {@link HoverModeConfiguration.forceRerender} is `true`\n   */\n  activeId: string;\n\n  /**\n   * This ref contains the current DOM `id` for the element that is being\n   * hovered within the `HoverModeProvider`. This will be an empty string\n   * when the hover mode is not active.\n   */\n  activeIdRef: NonNullMutableRef<string>;\n\n  /**\n   * This ref can be used to disable transitions for a group of components using\n   * the same hover mode provider. The general flow would be:\n   *\n   * - set `disableTransition: animatedOnceRef.current` on hover mode components\n   * - set `animatedOnceRef.current = true` when the `onEntered` transition callback fires\n   * - set `animatedOnceRef.current = false` when the hover mode behavior is\n   *   disabled. This would normally be after a timeout for the `onExited`\n   *   callback\n   */\n  animatedOnceRef: NonNullMutableRef<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CreateHoverModeContextOptions {\n  /**\n   * This should only be used if creating nested hover mode behavior where the\n   * hover mode should default to being enabled if a parent element is hovered.\n   * So set this to an element's `id` if a parent element is being hovered when\n   * the component **mounts**.\n   *\n   * The use case for this is the `MenuBar` component since after clicking a\n   * menu button or hovering it long enough to enable the hover mode, all child\n   * menus should also be in the hover mode until the top-most element is\n   * closed.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultActiveId?: string;\n\n  /**\n   * When this is `undefined`, the hover mode behavior will be disabled.\n   * Otherwise, this will be the amount of time to wait on a `mouseenter` event\n   * before setting the visibility to `true`.\n   *\n   * @defaultValue `undefined`\n   */\n  hoverTimeout?: number;\n\n  /**\n   * The amount of time to wait after a `mouseleave` event before setting the\n   * visibility to `false`.\n   *\n   * @defaultValue `0`\n   * @since 6.0.0 This was renamed from `exitVisibilityDelay` and the\n   * default value changed from `300` to `0`.\n   */\n  leaveTimeout?: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport function createHoverModeContext(\n  options: CreateHoverModeContextOptions = {}\n): Readonly<HoverModeContext> {\n  const { defaultActiveId = \"\", hoverTimeout, leaveTimeout = 0 } = options;\n\n  return {\n    activeId: defaultActiveId,\n    activeIdRef: { current: defaultActiveId },\n    hoverTimeoutRef: { current: hoverTimeout },\n    leaveTimeoutRef: { current: leaveTimeout },\n    animatedOnceRef: { current: false },\n    enableHoverMode: noop,\n    disableHoverMode: noop,\n    startDisableTimer: noop,\n    clearDisableTimer: noop,\n  };\n}\n\n/** @since 6.0.0 */\nexport interface HoverModeConfiguration extends CreateHoverModeContextOptions {\n  /**\n   * The amount of time to wait before disabling the hover mode behavior if none\n   * of the components are being hovered.\n   *\n   * If this is `undefined`, {@link HoverModeContext.startDisableTimer} will do\n   * nothing. You must manually call {@link HoverModeContext.disableHoverMode}\n   * to disable the hover mode instead.\n   */\n  disableTimeout?: number;\n\n  /**\n   * @defaultValue `false`\n   */\n  forceRerender?: boolean;\n}\n\n/**\n * @example Creating a Hover Mode Group\n * ```tsx\n * import {\n *   type HoverModeContext,\n *   createHoverModeContext,\n *   useHoverModeProvider,\n * } from \"@react-md/core/hoverMode/useHoverModeProvider\";\n * import {\n *   type ReactElement,\n *   type ReactNode,\n *   createContext,\n *   useContext,\n * } from \"react\";\n *\n * export interface CustomHoverContext extends HoverModeContext {\n *   // any additional fields in the context\n * }\n *\n * const context = createContext<CustomHoverContext>(\n *   createHoverModeContext()\n *   // you can also provide default values if needed when the context provider\n *   // isn't a parent component. the following are the defaults\n *   // createHoverModeContext({\n *   //    hoverTimeout: undefined,\n *   //    leaveTimeout: 0,\n *   //    defaultActiveId: \"\",\n *   // })\n * );\n * const { Provider } = context;\n *\n * interface Props extends HoverModeConfiguration {\n *   children: ReactNode;\n * }\n *\n * export function CustomHoverModeProvider({\n *   children,\n *   // change to whatever defaults you want\n *   hoverTimeout = 3000,\n *   leaveTimeout = 3000,\n *   defaultActiveId = \"\",\n *   disableTimeout = 5000,\n * }: Props): ReactElement {\n *   const context = useHoverModeProvider({\n *     hoverTimeout,\n *     leaveTimeout,\n *     defaultActiveId,\n *     disableTimeout,\n *   });\n *\n *   return <Provider value={context}>{children}</Provider>;\n * }\n * ```\n *\n * @see {@link CreateHoverModeContextOptions}\n * @see {@link useHoverMode}\n * @since 6.0.0 The `HoverModeProvider` component was replaced by this\n * hook implementation. After developing the `MenuBar`, I realized the hover\n * mode should normally be grouped by related components or types instead of a\n * top-level catch all.\n */\nexport function useHoverModeProvider(\n  options: HoverModeConfiguration\n): Readonly<HoverModeContext> {\n  const {\n    hoverTimeout,\n    leaveTimeout = 0,\n    forceRerender = false,\n    defaultActiveId = \"\",\n    disableTimeout,\n  } = options;\n\n  const [activeId, setActiveId] = useState(defaultActiveId);\n  const activeIdRef = useRef(defaultActiveId);\n  const hoverTimeoutRef = useRef(hoverTimeout);\n  const leaveTimeoutRef = useRef(leaveTimeout);\n  const animatedOnceRef = useRef(!!defaultActiveId);\n  const disableHoverModeTimeout = useRef<number | undefined>();\n  const clearDisableTimer = useCallback(() => {\n    window.clearTimeout(disableHoverModeTimeout.current);\n  }, []);\n  const enableHoverMode = useCallback(\n    (activeId: string) => {\n      clearDisableTimer();\n      activeIdRef.current = activeId;\n      hoverTimeoutRef.current = 0;\n\n      if (forceRerender) {\n        setActiveId(activeId);\n      }\n    },\n    [clearDisableTimer, forceRerender]\n  );\n  const disableHoverMode = useCallback(() => {\n    clearDisableTimer();\n    activeIdRef.current = \"\";\n    hoverTimeoutRef.current = hoverTimeout;\n    animatedOnceRef.current = false;\n    if (forceRerender) {\n      setActiveId(\"\");\n    }\n  }, [clearDisableTimer, forceRerender, hoverTimeout]);\n  const startDisableTimer = useCallback(() => {\n    if (typeof disableTimeout !== \"number\") {\n      return;\n    }\n\n    clearDisableTimer();\n    disableHoverModeTimeout.current = window.setTimeout(() => {\n      disableHoverMode();\n    }, disableTimeout);\n  }, [clearDisableTimer, disableHoverMode, disableTimeout]);\n\n  useEffect(() => {\n    hoverTimeoutRef.current = hoverTimeout;\n    return () => {\n      window.clearTimeout(disableHoverModeTimeout.current);\n    };\n  }, [hoverTimeout]);\n\n  return useMemo<HoverModeContext>(\n    () => ({\n      activeId,\n      activeIdRef,\n      hoverTimeoutRef,\n      leaveTimeoutRef,\n      animatedOnceRef,\n      enableHoverMode,\n      disableHoverMode,\n      startDisableTimer,\n      clearDisableTimer,\n    }),\n    [\n      activeId,\n      enableHoverMode,\n      disableHoverMode,\n      startDisableTimer,\n      clearDisableTimer,\n    ]\n  );\n}\n"],"names":["useCallback","useEffect","useMemo","useRef","useState","noop","createHoverModeContext","options","defaultActiveId","hoverTimeout","leaveTimeout","activeId","activeIdRef","current","hoverTimeoutRef","leaveTimeoutRef","animatedOnceRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","useHoverModeProvider","forceRerender","disableTimeout","setActiveId","disableHoverModeTimeout","window","clearTimeout","setTimeout"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAI1E,MAAMC,OAAO;AACX,aAAa;AACf;AA2IA;;CAEC,GACD,OAAO,SAASC,uBACdC,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,kBAAkB,EAAE,EAAEC,YAAY,EAAEC,eAAe,CAAC,EAAE,GAAGH;IAEjE,OAAO;QACLI,UAAUH;QACVI,aAAa;YAAEC,SAASL;QAAgB;QACxCM,iBAAiB;YAAED,SAASJ;QAAa;QACzCM,iBAAiB;YAAEF,SAASH;QAAa;QACzCM,iBAAiB;YAAEH,SAAS;QAAM;QAClCI,iBAAiBZ;QACjBa,kBAAkBb;QAClBc,mBAAmBd;QACnBe,mBAAmBf;IACrB;AACF;AAoBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DC,GACD,OAAO,SAASgB,qBACdd,OAA+B;IAE/B,MAAM,EACJE,YAAY,EACZC,eAAe,CAAC,EAChBY,gBAAgB,KAAK,EACrBd,kBAAkB,EAAE,EACpBe,cAAc,EACf,GAAGhB;IAEJ,MAAM,CAACI,UAAUa,YAAY,GAAGpB,SAASI;IACzC,MAAMI,cAAcT,OAAOK;IAC3B,MAAMM,kBAAkBX,OAAOM;IAC/B,MAAMM,kBAAkBZ,OAAOO;IAC/B,MAAMM,kBAAkBb,OAAO,CAAC,CAACK;IACjC,MAAMiB,0BAA0BtB;IAChC,MAAMiB,oBAAoBpB,YAAY;QACpC0B,OAAOC,YAAY,CAACF,wBAAwBZ,OAAO;IACrD,GAAG,EAAE;IACL,MAAMI,kBAAkBjB,YACtB,CAACW;QACCS;QACAR,YAAYC,OAAO,GAAGF;QACtBG,gBAAgBD,OAAO,GAAG;QAE1B,IAAIS,eAAe;YACjBE,YAAYb;QACd;IACF,GACA;QAACS;QAAmBE;KAAc;IAEpC,MAAMJ,mBAAmBlB,YAAY;QACnCoB;QACAR,YAAYC,OAAO,GAAG;QACtBC,gBAAgBD,OAAO,GAAGJ;QAC1BO,gBAAgBH,OAAO,GAAG;QAC1B,IAAIS,eAAe;YACjBE,YAAY;QACd;IACF,GAAG;QAACJ;QAAmBE;QAAeb;KAAa;IACnD,MAAMU,oBAAoBnB,YAAY;QACpC,IAAI,OAAOuB,mBAAmB,UAAU;YACtC;QACF;QAEAH;QACAK,wBAAwBZ,OAAO,GAAGa,OAAOE,UAAU,CAAC;YAClDV;QACF,GAAGK;IACL,GAAG;QAACH;QAAmBF;QAAkBK;KAAe;IAExDtB,UAAU;QACRa,gBAAgBD,OAAO,GAAGJ;QAC1B,OAAO;YACLiB,OAAOC,YAAY,CAACF,wBAAwBZ,OAAO;QACrD;IACF,GAAG;QAACJ;KAAa;IAEjB,OAAOP,QACL,IAAO,CAAA;YACLS;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACET;QACAM;QACAC;QACAC;QACAC;KACD;AAEL"}

package/dist/menu/Menu.js

@@ -96,6 +96,7 @@ const noop = ()=>{
                     break;
             }
         },
+        onEnter,
         onEntering (appearing) {
             onEntering(appearing);
             entered.current = true;
@@ -106,11 +107,12 @@ const noop = ()=>{
             cancelUnmountFocus.current = false;
             animatedOnceRef.current = true;
         },
+        onExit,
+        onExiting,
         onExited () {
             onExited();
             entered.current = false;
         },
-        onExiting,
         disableTransition,
         isFocusTypeDisabled (type) {
             if (role === "listbox") {
@@ -129,7 +131,6 @@ const noop = ()=>{
     const { ref, style, callbacks, updateStyle } = useFixedPositioning({
         ...transitionOptions,
         disabled: disableFixedPositioning,
-        onEnter,
         style: isSheet ? propStyle : menuStyle,
         fixedTo,
         anchor: getDefaultAnchor({
@@ -159,7 +160,6 @@ const noop = ()=>{
         }
     });
     const { rendered, disablePortal, elementProps } = useScaleTransition({
-        nodeRef: ref,
         className: cnb(!isSheet && menuClassName, className),
         transitionIn: visible,
         vertical: !horizontal,
@@ -169,10 +169,12 @@ const noop = ()=>{
         appear,
         enter,
         exit,
-        onExit,
-        onExiting: transitionOptions.onExiting,
         exitedHidden: true,
-        ...callbacks
+        // merge the transition callbacks
+        ...transitionOptions,
+        ...callbacks,
+        // but prefer the latest defined ref
+        nodeRef: ref
     });
     useScrollLock(visible && preventScroll);
     // need to make sure that the useEffect does not refire for hiding on click

package/dist/menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/menu/Menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  forwardRef,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { type FloatingActionButtonPosition } from \"../button/FloatingActionButton.js\";\nimport { useFocusContainer } from \"../focus/useFocusContainer.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { 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  type FixedPositioningOptions,\n  useFixedPositioning,\n} from \"../positioning/useFixedPositioning.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n  type ScaleTransitionHookOptions,\n  useScaleTransition,\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  type MenuConfiguration,\n  MenuConfigurationProvider,\n  type MenuOrientationProps,\n  useMenuConfiguration,\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\n// NOTE: The augmentation is in this file since no types are imported from the\n// `styles` file at this time\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-menu-background-color\"?: string;\n    \"--rmd-menu-color\"?: string;\n    \"--rmd-menu-min-width\"?: string | number;\n    \"--rmd-menu-spacing\"?: string | number;\n  }\n}\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 5.0.0 */\nexport type MenuTransitionProps = Omit<\n  ScaleTransitionHookOptions<HTMLDivElement>,\n  \"transitionIn\" | \"vertical\" | \"nodeRef\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface MenuConfigurationProps extends CalculateFixedPositionOptions {\n  /**\n   * @see {@link ScaleTransitionHookOptions.temporary}\n   * @defaultValue `true`\n   */\n  temporary?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * Boolean if the menu should not gain the elevation styles and should only be\n   * set to `true` when rendering within a `Sheet`.\n   *\n   * @defaultValue `false`\n   */\n  disableElevation?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @see {@link FixedPositioningOptions.transformOrigin}\n   * @defaultValue `true`\n   */\n  transformOrigin?: boolean;\n\n  /**\n   * Boolean if the menu should close if the page is scrolled. The default\n   * behavior is to just update the position of the menu relative to the menu\n   * button until it can no longer be visible within the viewport.\n   *\n   * @defaultValue `false`\n   */\n  closeOnScroll?: boolean;\n\n  /**\n   * Boolean if the page should no longer be scrollable while the menu is\n   * visible.\n   *\n   * @defaultValue `false`\n   */\n  preventScroll?: boolean;\n\n  /**\n   * Boolean if the menu should close instead of repositioning itself if the\n   * browser window is resized.\n   *\n   * @defaultValue `false`\n   */\n  closeOnResize?: boolean;\n\n  /** @see {@link FixedPositioningOptions.getFixedPositionOptions} */\n  getFixedPositionOptions?: () => CalculateFixedPositionOptions;\n\n  /**\n   * @defaultValue `false`\n   * @see {@link FixedPositioningOptions.disabled}\n   */\n  disableFixedPositioning?: boolean;\n}\n\n/**\n * @since 5.1.0\n * @since 6.0.0 Renamed from `MenuListProps` to `MenuListConvenienceProps`\n */\nexport interface MenuListConvenienceProps {\n  /**\n   * An optional style to provide to the `List` component that surrounds the\n   * `MenuItem` within a `Menu`.\n   */\n  listStyle?: CSSProperties;\n\n  /**\n   * An optional className to provide to the `List` component that surrounds the\n   * `MenuItem` within a `Menu`.\n   */\n  listClassName?: string;\n\n  /**\n   * Any additional props to pass to the `List` component that surrounds the\n   * `Menu`'s `MenuItem`s.\n   */\n  listProps?: PropsWithRef<Omit<ListProps, \"horizontal\">>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface MenuConvenienceProps extends MenuConfigurationProps {\n  /**\n   * This can be used to apply additional props to the `Menu` component.\n   *\n   * Note: You can override the `style` and `className` using\n   * {@link menuStyle} and {@link menuClassName} instead for convenience.\n   *\n   * @example\n   * ```tsx\n   * <DropdownMenu\n   *   {...props}\n   *   menuProps={{\n   *     style: {\n   *       // custom inline style\n   *     },\n   *     className: \"come-class-name\",\n   *     getFixedPositionOptions: () => ({\n   *       preventOverlap: true,\n   *     }),\n   *   }}\n   * />\n   * ```\n   */\n  menuProps?: PropsWithRef<\n    Omit<\n      MenuProps,\n      | \"children\"\n      | \"fixedTo\"\n      | \"visible\"\n      | \"onRequestClose\"\n      | \"getDefaultFocusedIndex\"\n    >\n  >;\n\n  /**\n   * Convenience prop to apply custom style to the `Menu` component.\n   */\n  menuStyle?: CSSProperties;\n\n  /**\n   * Convenience prop to apply custom class name to the `Menu` component.\n   */\n  menuClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport type MenuFixedPositioningOptions = Omit<\n  FixedPositioningOptions<HTMLElement, HTMLDivElement>,\n  \"onScroll\" | \"onResize\" | \"nodeRef\" | \"disabled\"\n>;\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Updated to use the latest Menu, Transition, and Portal API.\n */\nexport interface MenuProps\n  extends HTMLAttributes<HTMLDivElement>,\n    MenuConfiguration,\n    MenuConfigurationProps,\n    MenuFixedPositioningOptions,\n    MenuOrientationProps,\n    MenuTransitionProps,\n    MenuListConvenienceProps,\n    MenuSheetConvenienceProps {\n  visible: boolean;\n  onRequestClose: () => void;\n\n  /**\n   * @defaultValue `\"menu-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * This is used to set the default focus index when the menu is visible.\n   *\n   * @internal\n   */\n  getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n\n  /**\n   * Custom style that should be applied to the menu only while not rendered\n   * within a sheet since the {@link style} would be applied to both versions.\n   */\n  menuStyle?: CSSProperties;\n\n  /**\n   * Custom class name that should be applied only while not rendered within a\n   * sheet.\n   */\n  menuClassName?: string;\n\n  /**\n   * @internal\n   *\n   * This is only used to update the default anchor when the DropdownMenu's\n   * toggle is a floating action button.\n   */\n  floating?: FloatingActionButtonPosition;\n}\n\n/**\n * **Client Component**\n *\n * This component should generally only be used to implement context menus with\n * the `useContextMenu` hook. Otherwise, the `DropdownMenu` component should be\n * used.\n *\n * @see The `useContextMenu` hook for an example.\n *\n * @see {@link https://react-md.dev/components/menu | Menu Demos}\n * @since 5.0.0\n * @since 6.0.0 Updated this component to implement all the `Menu`\n * functionality instead of requiring the `useMenu` hook and `MenuWidget`\n * component. In addition, the `renderAsSheet` behavior has been moved into this\n * implementation so that the `MenuRenderer` is no longer required and context\n * menus can appear as a `Sheet`.\n */\nexport const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(\n  function Menu(props, propRef) {\n    const {\n      id: propId,\n      style: propStyle,\n      role = \"menu\",\n      children,\n      horizontal: _horizontal,\n      sheetHeader: _sheetHeader,\n      sheetFooter: _sheetFooter,\n      renderAsSheet: _renderAsSheet,\n      sheetPosition: _sheetPosition,\n      sheetVerticalSize: _sheetVerticalSize,\n      sheetProps,\n      sheetStyle,\n      sheetClassName,\n      menuStyle,\n      menuClassName,\n      disableElevation = false,\n      temporary = true,\n      tabIndex = -1,\n      fixedTo,\n      className,\n      classNames,\n      timeout,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering = noop,\n      onEntered = noop,\n      onExit,\n      onExiting,\n      onExited = noop,\n      onKeyDown = noop,\n      listProps,\n      listStyle,\n      listClassName,\n      visible,\n      onRequestClose,\n      floating,\n      anchor,\n      closeOnResize = false,\n      closeOnScroll = false,\n      preventScroll = false,\n      vwMargin,\n      vhMargin,\n      xMargin,\n      yMargin,\n      width,\n      transformOrigin = true,\n      preventOverlap,\n      disableSwapping,\n      disableVHBounds,\n      initialX,\n      initialY,\n      disableFixedPositioning,\n      getFixedPositionOptions,\n      disablePortal: propDisablePortal,\n      disableTransition,\n      ...remaining\n    } = props;\n    const { \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy } =\n      props;\n\n    const id = useEnsuredId(propId, \"menu\");\n    const {\n      root,\n      menubar,\n      menuitem,\n      activeId,\n      animatedOnceRef,\n      hoverTimeoutRef,\n      disableHoverMode,\n    } = useMenuBarContext();\n    const {\n      horizontal,\n      sheetHeader,\n      sheetFooter,\n      renderAsSheet,\n      sheetPosition,\n      sheetVerticalSize,\n    } = useMenuConfiguration(props);\n    const { isPhone } = useAppSize();\n    const isSheet =\n      renderAsSheet === true || (renderAsSheet === \"phone\" && isPhone);\n\n    const entered = useRef(false);\n    const cancelUnmountFocus = useRef(false);\n    const hideWithoutRefocus = (): void => {\n      cancelUnmountFocus.current = true;\n      onRequestClose();\n    };\n    const mode = useUserInteractionMode();\n    const mouse = mode === \"mouse\";\n\n    const { eventHandlers, transitionOptions } = useFocusContainer({\n      nodeRef: propRef,\n      activate: visible,\n      onKeyDown(event) {\n        onKeyDown(event);\n\n        // when a menu is within a sheet, it should not trigger the custom\n        // keyboard behavior\n        if (isSheet) {\n          return;\n        }\n\n        switch (event.key) {\n          case \"Escape\":\n            // prevent parent components that have an \"Escape\" keypress event\n            // from being triggered as well\n            event.stopPropagation();\n            disableHoverMode();\n            onRequestClose();\n            break;\n          case \"Tab\":\n            // since menus are portalled, tab index is kinda broke so just close\n            // the menu instead of doing default tab behavior\n            event.preventDefault();\n\n            if (!menuitem) {\n              // pressing the tab key should still cascade close all menus\n              event.stopPropagation();\n            }\n            disableHoverMode();\n            onRequestClose();\n            break;\n          case \"ArrowUp\":\n            if (!root && menuitem && horizontal) {\n              event.stopPropagation();\n              event.preventDefault();\n              onRequestClose();\n            }\n            break;\n          case \"ArrowLeft\":\n            if (!root && menuitem && !horizontal) {\n              event.stopPropagation();\n              event.preventDefault();\n              onRequestClose();\n            }\n            break;\n        }\n      },\n      onEntering(appearing) {\n        onEntering(appearing);\n        entered.current = true;\n      },\n      onEntered(appearing) {\n        onEntered(appearing);\n        entered.current = true;\n        cancelUnmountFocus.current = false;\n        animatedOnceRef.current = true;\n      },\n      onExited() {\n        onExited();\n        entered.current = false;\n      },\n      onExiting,\n      disableTransition,\n      isFocusTypeDisabled(type) {\n        if (role === \"listbox\") {\n          return !isSheet;\n        }\n\n        if (type === \"keyboard\") {\n          return isSheet;\n        }\n\n        const isHoverDisabled = mouse && hoverTimeoutRef.current === 0;\n        if (type === \"mount\") {\n          return isHoverDisabled;\n        }\n\n        return (\n          isHoverDisabled ||\n          cancelUnmountFocus.current ||\n          (root && !!activeId && id !== activeId)\n        );\n      },\n    });\n\n    const { ref, style, callbacks, updateStyle } = useFixedPositioning({\n      ...transitionOptions,\n      disabled: disableFixedPositioning,\n      onEnter,\n      style: isSheet ? propStyle : menuStyle,\n      fixedTo,\n      anchor: getDefaultAnchor({\n        anchor,\n        menubar,\n        floating,\n        menuitem: !root && menuitem,\n        horizontal,\n      }),\n      vwMargin,\n      vhMargin,\n      xMargin,\n      yMargin,\n      width,\n      transformOrigin,\n      preventOverlap,\n      disableSwapping,\n      disableVHBounds,\n      initialX,\n      initialY,\n      getFixedPositionOptions,\n      onResize: closeOnResize ? hideWithoutRefocus : undefined,\n      onScroll(_event, data) {\n        if (!data.visible || closeOnScroll) {\n          hideWithoutRefocus();\n        }\n      },\n    });\n    const { rendered, disablePortal, elementProps } = useScaleTransition({\n      nodeRef: ref,\n      className: cnb(!isSheet && menuClassName, className),\n      transitionIn: visible,\n      vertical: !horizontal,\n      temporary,\n      timeout: isSheet || disableTransition ? 0 : timeout,\n      classNames,\n      appear,\n      enter,\n      exit,\n      onExit,\n      onExiting: transitionOptions.onExiting,\n      exitedHidden: true,\n      ...callbacks,\n    });\n    useScrollLock(visible && preventScroll);\n\n    // need to make sure that the useEffect does not refire for hiding on click\n    // events because of the `window.requestAnimationFrame`. It'll make it so\n    // that menu items that update state are unable to close when clicked\n    const hide = useRef(onRequestClose);\n    useEffect(() => {\n      hide.current = onRequestClose;\n    });\n    useEffect(() => {\n      if (!visible) {\n        return;\n      }\n\n      const callback = (event: globalThis.MouseEvent): void => {\n        // this is required for when the transition is disabled\n        if (!entered.current) {\n          return;\n        }\n\n        // if the user clicks outside of the menu to close it, the toggle button\n        // should not be focused. instead the nearest focusable element from the\n        // click event should be focused when Tab or Shift + tab is pressed\n        cancelUnmountFocus.current =\n          !(event.target instanceof HTMLElement) ||\n          !event.target.closest(`[role=\"${role}\"]`);\n\n        // this won't be called if `event.stopPropagation()` is called\n        hide.current();\n        disableHoverMode();\n      };\n\n      // wait an animation frame so the initial click event that caused the menu\n      // to become visible does not immediately close the menu\n      const frame = window.requestAnimationFrame(() => {\n        window.addEventListener(\"click\", callback);\n      });\n\n      return () => {\n        window.cancelAnimationFrame(frame);\n        window.removeEventListener(\"click\", callback);\n      };\n    }, [disableHoverMode, role, visible]);\n    useIsomorphicLayoutEffect(() => {\n      if (!visible) {\n        return;\n      }\n\n      updateStyle();\n    }, [updateStyle, children, visible]);\n\n    return (\n      <MenuConfigurationProvider\n        horizontal={horizontal}\n        renderAsSheet={renderAsSheet}\n        sheetFooter={sheetFooter}\n        sheetHeader={sheetHeader}\n        sheetPosition={sheetPosition}\n        sheetVerticalSize={sheetVerticalSize}\n      >\n        <MenuSheet\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy as string}\n          header={sheetHeader}\n          footer={sheetFooter}\n          position={sheetPosition}\n          verticalSize={sheetVerticalSize}\n          visible={visible}\n          enabled={isSheet}\n          onRequestClose={onRequestClose}\n          style={sheetStyle}\n          className={sheetClassName}\n          disablePortal={propDisablePortal}\n          temporary={temporary}\n          disableTransition={disableTransition}\n          {...sheetProps}\n        >\n          <Portal disabled={isSheet || (propDisablePortal ?? disablePortal)}>\n            {(rendered || isSheet) && (\n              <MenuWidget\n                {...remaining}\n                {...elementProps}\n                {...eventHandlers}\n                id={id}\n                role={role}\n                style={isSheet ? propStyle : style}\n                isSheet={isSheet}\n                tabIndex={tabIndex}\n                horizontal={horizontal}\n                listProps={listProps}\n                listStyle={listStyle}\n                listClassName={listClassName}\n                disableElevation={disableElevation}\n                cancelUnmountFocus={cancelUnmountFocus}\n              >\n                {children}\n              </MenuWidget>\n            )}\n          </Portal>\n        </MenuSheet>\n      </MenuConfigurationProvider>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useEffect","useRef","useFocusContainer","useUserInteractionMode","useAppSize","Portal","useFixedPositioning","useScrollLock","useScaleTransition","useEnsuredId","useIsomorphicLayoutEffect","MenuConfigurationProvider","useMenuConfiguration","MenuSheet","MenuWidget","useMenuBarContext","getDefaultAnchor","noop","Menu","props","propRef","id","propId","style","propStyle","role","children","horizontal","_horizontal","sheetHeader","_sheetHeader","sheetFooter","_sheetFooter","renderAsSheet","_renderAsSheet","sheetPosition","_sheetPosition","sheetVerticalSize","_sheetVerticalSize","sheetProps","sheetStyle","sheetClassName","menuStyle","menuClassName","disableElevation","temporary","tabIndex","fixedTo","className","classNames","timeout","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","onKeyDown","listProps","listStyle","listClassName","visible","onRequestClose","floating","anchor","closeOnResize","closeOnScroll","preventScroll","vwMargin","vhMargin","xMargin","yMargin","width","transformOrigin","preventOverlap","disableSwapping","disableVHBounds","initialX","initialY","disableFixedPositioning","getFixedPositionOptions","disablePortal","propDisablePortal","disableTransition","remaining","ariaLabel","ariaLabelledBy","root","menubar","menuitem","activeId","animatedOnceRef","hoverTimeoutRef","disableHoverMode","isPhone","isSheet","entered","cancelUnmountFocus","hideWithoutRefocus","current","mode","mouse","eventHandlers","transitionOptions","nodeRef","activate","event","key","stopPropagation","preventDefault","appearing","isFocusTypeDisabled","type","isHoverDisabled","ref","callbacks","updateStyle","disabled","onResize","undefined","onScroll","_event","data","rendered","elementProps","transitionIn","vertical","exitedHidden","hide","callback","target","HTMLElement","closest","frame","window","requestAnimationFrame","addEventListener","cancelAnimationFrame","removeEventListener","aria-label","aria-labelledby","header","footer","position","verticalSize","enabled"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAGEC,UAAU,EACVC,SAAS,EACTC,MAAM,QACD,QAAQ;AAGf,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,sBAAsB,QAAQ,gDAAgD;AAEvF,SAASC,UAAU,QAAQ,sCAAsC;AAEjE,SAASC,MAAM,QAAQ,sBAAsB;AAE7C,SAEEC,mBAAmB,QACd,wCAAwC;AAC/C,SAASC,aAAa,QAAQ,6BAA6B;AAC3D,SAEEC,kBAAkB,QACb,sCAAsC;AAE7C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,yBAAyB,QAAQ,kCAAkC;AAC5E,SAEEC,yBAAyB,EAEzBC,oBAAoB,QACf,iCAAiC;AACxC,SAASC,SAAS,QAAwC,iBAAiB;AAC3E,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,gBAAgB,QAAQ,aAAa;AAa9C,MAAMC,OAAO;AACX,aAAa;AACf;AA8MA;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,qBAAOnB,WAClB,SAASmB,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,uBAAuB,EACvBC,eAAeC,iBAAiB,EAChCC,iBAAiB,EACjB,GAAGC,WACJ,GAAGpE;IACJ,MAAM,EAAE,cAAcqE,SAAS,EAAE,mBAAmBC,cAAc,EAAE,GAClEtE;IAEF,MAAME,KAAKZ,aAAaa,QAAQ;IAChC,MAAM,EACJoE,IAAI,EACJC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EACfC,eAAe,EACfC,gBAAgB,EACjB,GAAGjF;IACJ,MAAM,EACJY,UAAU,EACVE,WAAW,EACXE,WAAW,EACXE,aAAa,EACbE,aAAa,EACbE,iBAAiB,EAClB,GAAGzB,qBAAqBO;IACzB,MAAM,EAAE8E,OAAO,EAAE,GAAG7F;IACpB,MAAM8F,UACJjE,kBAAkB,QAASA,kBAAkB,WAAWgE;IAE1D,MAAME,UAAUlG,OAAO;IACvB,MAAMmG,qBAAqBnG,OAAO;IAClC,MAAMoG,qBAAqB;QACzBD,mBAAmBE,OAAO,GAAG;QAC7BrC;IACF;IACA,MAAMsC,OAAOpG;IACb,MAAMqG,QAAQD,SAAS;IAEvB,MAAM,EAAEE,aAAa,EAAEC,iBAAiB,EAAE,GAAGxG,kBAAkB;QAC7DyG,SAASvF;QACTwF,UAAU5C;QACVJ,WAAUiD,KAAK;YACbjD,UAAUiD;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;oBACA/B;oBACA;gBACF,KAAK;oBACH,oEAAoE;oBACpE,iDAAiD;oBACjD4C,MAAMG,cAAc;oBAEpB,IAAI,CAACpB,UAAU;wBACb,4DAA4D;wBAC5DiB,MAAME,eAAe;oBACvB;oBACAf;oBACA/B;oBACA;gBACF,KAAK;oBACH,IAAI,CAACyB,QAAQE,YAAYjE,YAAY;wBACnCkF,MAAME,eAAe;wBACrBF,MAAMG,cAAc;wBACpB/C;oBACF;oBACA;gBACF,KAAK;oBACH,IAAI,CAACyB,QAAQE,YAAY,CAACjE,YAAY;wBACpCkF,MAAME,eAAe;wBACrBF,MAAMG,cAAc;wBACpB/C;oBACF;oBACA;YACJ;QACF;QACAV,YAAW0D,SAAS;YAClB1D,WAAW0D;YACXd,QAAQG,OAAO,GAAG;QACpB;QACA9C,WAAUyD,SAAS;YACjBzD,UAAUyD;YACVd,QAAQG,OAAO,GAAG;YAClBF,mBAAmBE,OAAO,GAAG;YAC7BR,gBAAgBQ,OAAO,GAAG;QAC5B;QACA3C;YACEA;YACAwC,QAAQG,OAAO,GAAG;QACpB;QACA5C;QACA4B;QACA4B,qBAAoBC,IAAI;YACtB,IAAI1F,SAAS,WAAW;gBACtB,OAAO,CAACyE;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,YAAYxE,OAAOwE;QAElC;IACF;IAEA,MAAM,EAAEwB,GAAG,EAAE9F,KAAK,EAAE+F,SAAS,EAAEC,WAAW,EAAE,GAAGjH,oBAAoB;QACjE,GAAGoG,iBAAiB;QACpBc,UAAUtC;QACV5B;QACA/B,OAAO2E,UAAU1E,YAAYkB;QAC7BK;QACAoB,QAAQnD,iBAAiB;YACvBmD;YACAwB;YACAzB;YACA0B,UAAU,CAACF,QAAQE;YACnBjE;QACF;QACA4C;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAsC,UAAUrD,gBAAgBiC,qBAAqBqB;QAC/CC,UAASC,MAAM,EAAEC,IAAI;YACnB,IAAI,CAACA,KAAK7D,OAAO,IAAIK,eAAe;gBAClCgC;YACF;QACF;IACF;IACA,MAAM,EAAEyB,QAAQ,EAAE1C,aAAa,EAAE2C,YAAY,EAAE,GAAGvH,mBAAmB;QACnEmG,SAASU;QACTrE,WAAWlD,IAAI,CAACoG,WAAWvD,eAAeK;QAC1CgF,cAAchE;QACdiE,UAAU,CAACtG;QACXkB;QACAK,SAASgD,WAAWZ,oBAAoB,IAAIpC;QAC5CD;QACAE;QACAC;QACAC;QACAI;QACAC,WAAWgD,kBAAkBhD,SAAS;QACtCwE,cAAc;QACd,GAAGZ,SAAS;IACd;IACA/G,cAAcyD,WAAWM;IAEzB,2EAA2E;IAC3E,yEAAyE;IACzE,qEAAqE;IACrE,MAAM6D,OAAOlI,OAAOgE;IACpBjE,UAAU;QACRmI,KAAK7B,OAAO,GAAGrC;IACjB;IACAjE,UAAU;QACR,IAAI,CAACgE,SAAS;YACZ;QACF;QAEA,MAAMoE,WAAW,CAACvB;YAChB,uDAAuD;YACvD,IAAI,CAACV,QAAQG,OAAO,EAAE;gBACpB;YACF;YAEA,wEAAwE;YACxE,wEAAwE;YACxE,mEAAmE;YACnEF,mBAAmBE,OAAO,GACxB,CAAEO,CAAAA,MAAMwB,MAAM,YAAYC,WAAU,KACpC,CAACzB,MAAMwB,MAAM,CAACE,OAAO,CAAC,CAAC,OAAO,EAAE9G,KAAK,EAAE,CAAC;YAE1C,8DAA8D;YAC9D0G,KAAK7B,OAAO;YACZN;QACF;QAEA,0EAA0E;QAC1E,wDAAwD;QACxD,MAAMwC,QAAQC,OAAOC,qBAAqB,CAAC;YACzCD,OAAOE,gBAAgB,CAAC,SAASP;QACnC;QAEA,OAAO;YACLK,OAAOG,oBAAoB,CAACJ;YAC5BC,OAAOI,mBAAmB,CAAC,SAAST;QACtC;IACF,GAAG;QAACpC;QAAkBvE;QAAMuC;KAAQ;IACpCtD,0BAA0B;QACxB,IAAI,CAACsD,SAAS;YACZ;QACF;QAEAuD;IACF,GAAG;QAACA;QAAa7F;QAAUsC;KAAQ;IAEnC,qBACE,KAACrD;QACCgB,YAAYA;QACZM,eAAeA;QACfF,aAAaA;QACbF,aAAaA;QACbM,eAAeA;QACfE,mBAAmBA;kBAEnB,cAAA,KAACxB;YACCiI,cAAYtD;YACZuD,mBAAiBtD;YACjBuD,QAAQnH;YACRoH,QAAQlH;YACRmH,UAAU/G;YACVgH,cAAc9G;YACd2B,SAASA;YACToF,SAASlD;YACTjC,gBAAgBA;YAChB1C,OAAOiB;YACPQ,WAAWP;YACX2C,eAAeC;YACfxC,WAAWA;YACXyC,mBAAmBA;YAClB,GAAG/C,UAAU;sBAEd,cAAA,KAAClC;gBAAOmH,UAAUtB,WAAYb,CAAAA,qBAAqBD,aAAY;0BAC5D,AAAC0C,CAAAA,YAAY5B,OAAM,mBAClB,KAACpF;oBACE,GAAGyE,SAAS;oBACZ,GAAGwC,YAAY;oBACf,GAAGtB,aAAa;oBACjBpF,IAAIA;oBACJI,MAAMA;oBACNF,OAAO2E,UAAU1E,YAAYD;oBAC7B2E,SAASA;oBACTpD,UAAUA;oBACVnB,YAAYA;oBACZkC,WAAWA;oBACXC,WAAWA;oBACXC,eAAeA;oBACfnB,kBAAkBA;oBAClBwD,oBAAoBA;8BAEnB1E;;;;;AAOf,GACA"}
+{"version":3,"sources":["../../src/menu/Menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  forwardRef,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { type FloatingActionButtonPosition } from \"../button/FloatingActionButton.js\";\nimport { useFocusContainer } from \"../focus/useFocusContainer.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { 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  type FixedPositioningOptions,\n  useFixedPositioning,\n} from \"../positioning/useFixedPositioning.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n  type ScaleTransitionHookOptions,\n  useScaleTransition,\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  type MenuConfiguration,\n  MenuConfigurationProvider,\n  type MenuOrientationProps,\n  useMenuConfiguration,\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\n// NOTE: The augmentation is in this file since no types are imported from the\n// `styles` file at this time\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-menu-background-color\"?: string;\n    \"--rmd-menu-color\"?: string;\n    \"--rmd-menu-min-width\"?: string | number;\n    \"--rmd-menu-spacing\"?: string | number;\n  }\n}\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 5.0.0 */\nexport type MenuTransitionProps = Omit<\n  ScaleTransitionHookOptions<HTMLDivElement>,\n  \"transitionIn\" | \"vertical\" | \"nodeRef\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface MenuConfigurationProps extends CalculateFixedPositionOptions {\n  /**\n   * @see {@link ScaleTransitionHookOptions.temporary}\n   * @defaultValue `true`\n   */\n  temporary?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * Boolean if the menu should not gain the elevation styles and should only be\n   * set to `true` when rendering within a `Sheet`.\n   *\n   * @defaultValue `false`\n   */\n  disableElevation?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @see {@link FixedPositioningOptions.transformOrigin}\n   * @defaultValue `true`\n   */\n  transformOrigin?: boolean;\n\n  /**\n   * Boolean if the menu should close if the page is scrolled. The default\n   * behavior is to just update the position of the menu relative to the menu\n   * button until it can no longer be visible within the viewport.\n   *\n   * @defaultValue `false`\n   */\n  closeOnScroll?: boolean;\n\n  /**\n   * Boolean if the page should no longer be scrollable while the menu is\n   * visible.\n   *\n   * @defaultValue `false`\n   */\n  preventScroll?: boolean;\n\n  /**\n   * Boolean if the menu should close instead of repositioning itself if the\n   * browser window is resized.\n   *\n   * @defaultValue `false`\n   */\n  closeOnResize?: boolean;\n\n  /** @see {@link FixedPositioningOptions.getFixedPositionOptions} */\n  getFixedPositionOptions?: () => CalculateFixedPositionOptions;\n\n  /**\n   * @defaultValue `false`\n   * @see {@link FixedPositioningOptions.disabled}\n   */\n  disableFixedPositioning?: boolean;\n}\n\n/**\n * @since 5.1.0\n * @since 6.0.0 Renamed from `MenuListProps` to `MenuListConvenienceProps`\n */\nexport interface MenuListConvenienceProps {\n  /**\n   * An optional style to provide to the `List` component that surrounds the\n   * `MenuItem` within a `Menu`.\n   */\n  listStyle?: CSSProperties;\n\n  /**\n   * An optional className to provide to the `List` component that surrounds the\n   * `MenuItem` within a `Menu`.\n   */\n  listClassName?: string;\n\n  /**\n   * Any additional props to pass to the `List` component that surrounds the\n   * `Menu`'s `MenuItem`s.\n   */\n  listProps?: PropsWithRef<Omit<ListProps, \"horizontal\">>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface MenuConvenienceProps extends MenuConfigurationProps {\n  /**\n   * This can be used to apply additional props to the `Menu` component.\n   *\n   * Note: You can override the `style` and `className` using\n   * {@link menuStyle} and {@link menuClassName} instead for convenience.\n   *\n   * @example\n   * ```tsx\n   * <DropdownMenu\n   *   {...props}\n   *   menuProps={{\n   *     style: {\n   *       // custom inline style\n   *     },\n   *     className: \"come-class-name\",\n   *     getFixedPositionOptions: () => ({\n   *       preventOverlap: true,\n   *     }),\n   *   }}\n   * />\n   * ```\n   */\n  menuProps?: PropsWithRef<\n    Omit<\n      MenuProps,\n      | \"children\"\n      | \"fixedTo\"\n      | \"visible\"\n      | \"onRequestClose\"\n      | \"getDefaultFocusedIndex\"\n    >\n  >;\n\n  /**\n   * Convenience prop to apply custom style to the `Menu` component.\n   */\n  menuStyle?: CSSProperties;\n\n  /**\n   * Convenience prop to apply custom class name to the `Menu` component.\n   */\n  menuClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport type MenuFixedPositioningOptions = Omit<\n  FixedPositioningOptions<HTMLElement, HTMLDivElement>,\n  \"onScroll\" | \"onResize\" | \"nodeRef\" | \"disabled\"\n>;\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Updated to use the latest Menu, Transition, and Portal API.\n */\nexport interface MenuProps\n  extends HTMLAttributes<HTMLDivElement>,\n    MenuConfiguration,\n    MenuConfigurationProps,\n    MenuFixedPositioningOptions,\n    MenuOrientationProps,\n    MenuTransitionProps,\n    MenuListConvenienceProps,\n    MenuSheetConvenienceProps {\n  visible: boolean;\n  onRequestClose: () => void;\n\n  /**\n   * @defaultValue `\"menu-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * This is used to set the default focus index when the menu is visible.\n   *\n   * @internal\n   */\n  getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n\n  /**\n   * Custom style that should be applied to the menu only while not rendered\n   * within a sheet since the {@link style} would be applied to both versions.\n   */\n  menuStyle?: CSSProperties;\n\n  /**\n   * Custom class name that should be applied only while not rendered within a\n   * sheet.\n   */\n  menuClassName?: string;\n\n  /**\n   * @internal\n   *\n   * This is only used to update the default anchor when the DropdownMenu's\n   * toggle is a floating action button.\n   */\n  floating?: FloatingActionButtonPosition;\n}\n\n/**\n * **Client Component**\n *\n * This component should generally only be used to implement context menus with\n * the `useContextMenu` hook. Otherwise, the `DropdownMenu` component should be\n * used.\n *\n * @see The `useContextMenu` hook for an example.\n *\n * @see {@link https://react-md.dev/components/menu | Menu Demos}\n * @since 5.0.0\n * @since 6.0.0 Updated this component to implement all the `Menu`\n * functionality instead of requiring the `useMenu` hook and `MenuWidget`\n * component. In addition, the `renderAsSheet` behavior has been moved into this\n * implementation so that the `MenuRenderer` is no longer required and context\n * menus can appear as a `Sheet`.\n */\nexport const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(\n  function Menu(props, propRef) {\n    const {\n      id: propId,\n      style: propStyle,\n      role = \"menu\",\n      children,\n      horizontal: _horizontal,\n      sheetHeader: _sheetHeader,\n      sheetFooter: _sheetFooter,\n      renderAsSheet: _renderAsSheet,\n      sheetPosition: _sheetPosition,\n      sheetVerticalSize: _sheetVerticalSize,\n      sheetProps,\n      sheetStyle,\n      sheetClassName,\n      menuStyle,\n      menuClassName,\n      disableElevation = false,\n      temporary = true,\n      tabIndex = -1,\n      fixedTo,\n      className,\n      classNames,\n      timeout,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering = noop,\n      onEntered = noop,\n      onExit,\n      onExiting,\n      onExited = noop,\n      onKeyDown = noop,\n      listProps,\n      listStyle,\n      listClassName,\n      visible,\n      onRequestClose,\n      floating,\n      anchor,\n      closeOnResize = false,\n      closeOnScroll = false,\n      preventScroll = false,\n      vwMargin,\n      vhMargin,\n      xMargin,\n      yMargin,\n      width,\n      transformOrigin = true,\n      preventOverlap,\n      disableSwapping,\n      disableVHBounds,\n      initialX,\n      initialY,\n      disableFixedPositioning,\n      getFixedPositionOptions,\n      disablePortal: propDisablePortal,\n      disableTransition,\n      ...remaining\n    } = props;\n    const { \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy } =\n      props;\n\n    const id = useEnsuredId(propId, \"menu\");\n    const {\n      root,\n      menubar,\n      menuitem,\n      activeId,\n      animatedOnceRef,\n      hoverTimeoutRef,\n      disableHoverMode,\n    } = useMenuBarContext();\n    const {\n      horizontal,\n      sheetHeader,\n      sheetFooter,\n      renderAsSheet,\n      sheetPosition,\n      sheetVerticalSize,\n    } = useMenuConfiguration(props);\n    const { isPhone } = useAppSize();\n    const isSheet =\n      renderAsSheet === true || (renderAsSheet === \"phone\" && isPhone);\n\n    const entered = useRef(false);\n    const cancelUnmountFocus = useRef(false);\n    const hideWithoutRefocus = (): void => {\n      cancelUnmountFocus.current = true;\n      onRequestClose();\n    };\n    const mode = useUserInteractionMode();\n    const mouse = mode === \"mouse\";\n\n    const { eventHandlers, transitionOptions } = useFocusContainer({\n      nodeRef: propRef,\n      activate: visible,\n      onKeyDown(event) {\n        onKeyDown(event);\n\n        // when a menu is within a sheet, it should not trigger the custom\n        // keyboard behavior\n        if (isSheet) {\n          return;\n        }\n\n        switch (event.key) {\n          case \"Escape\":\n            // prevent parent components that have an \"Escape\" keypress event\n            // from being triggered as well\n            event.stopPropagation();\n            disableHoverMode();\n            onRequestClose();\n            break;\n          case \"Tab\":\n            // since menus are portalled, tab index is kinda broke so just close\n            // the menu instead of doing default tab behavior\n            event.preventDefault();\n\n            if (!menuitem) {\n              // pressing the tab key should still cascade close all menus\n              event.stopPropagation();\n            }\n            disableHoverMode();\n            onRequestClose();\n            break;\n          case \"ArrowUp\":\n            if (!root && menuitem && horizontal) {\n              event.stopPropagation();\n              event.preventDefault();\n              onRequestClose();\n            }\n            break;\n          case \"ArrowLeft\":\n            if (!root && menuitem && !horizontal) {\n              event.stopPropagation();\n              event.preventDefault();\n              onRequestClose();\n            }\n            break;\n        }\n      },\n      onEnter,\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      onExit,\n      onExiting,\n      onExited() {\n        onExited();\n        entered.current = false;\n      },\n      disableTransition,\n      isFocusTypeDisabled(type) {\n        if (role === \"listbox\") {\n          return !isSheet;\n        }\n\n        if (type === \"keyboard\") {\n          return isSheet;\n        }\n\n        const isHoverDisabled = mouse && hoverTimeoutRef.current === 0;\n        if (type === \"mount\") {\n          return isHoverDisabled;\n        }\n\n        return (\n          isHoverDisabled ||\n          cancelUnmountFocus.current ||\n          (root && !!activeId && id !== activeId)\n        );\n      },\n    });\n\n    const { ref, style, callbacks, updateStyle } = useFixedPositioning({\n      ...transitionOptions,\n      disabled: disableFixedPositioning,\n      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      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      exitedHidden: true,\n      // merge the transition callbacks\n      ...transitionOptions,\n      ...callbacks,\n      // but prefer the latest defined ref\n      nodeRef: ref,\n    });\n    useScrollLock(visible && preventScroll);\n\n    // need to make sure that the useEffect does not refire for hiding on click\n    // events because of the `window.requestAnimationFrame`. It'll make it so\n    // that menu items that update state are unable to close when clicked\n    const hide = useRef(onRequestClose);\n    useEffect(() => {\n      hide.current = onRequestClose;\n    });\n    useEffect(() => {\n      if (!visible) {\n        return;\n      }\n\n      const callback = (event: globalThis.MouseEvent): void => {\n        // this is required for when the transition is disabled\n        if (!entered.current) {\n          return;\n        }\n\n        // if the user clicks outside of the menu to close it, the toggle button\n        // should not be focused. instead the nearest focusable element from the\n        // click event should be focused when Tab or Shift + tab is pressed\n        cancelUnmountFocus.current =\n          !(event.target instanceof HTMLElement) ||\n          !event.target.closest(`[role=\"${role}\"]`);\n\n        // this won't be called if `event.stopPropagation()` is called\n        hide.current();\n        disableHoverMode();\n      };\n\n      // wait an animation frame so the initial click event that caused the menu\n      // to become visible does not immediately close the menu\n      const frame = window.requestAnimationFrame(() => {\n        window.addEventListener(\"click\", callback);\n      });\n\n      return () => {\n        window.cancelAnimationFrame(frame);\n        window.removeEventListener(\"click\", callback);\n      };\n    }, [disableHoverMode, role, visible]);\n    useIsomorphicLayoutEffect(() => {\n      if (!visible) {\n        return;\n      }\n\n      updateStyle();\n    }, [updateStyle, children, visible]);\n\n    return (\n      <MenuConfigurationProvider\n        horizontal={horizontal}\n        renderAsSheet={renderAsSheet}\n        sheetFooter={sheetFooter}\n        sheetHeader={sheetHeader}\n        sheetPosition={sheetPosition}\n        sheetVerticalSize={sheetVerticalSize}\n      >\n        <MenuSheet\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy as string}\n          header={sheetHeader}\n          footer={sheetFooter}\n          position={sheetPosition}\n          verticalSize={sheetVerticalSize}\n          visible={visible}\n          enabled={isSheet}\n          onRequestClose={onRequestClose}\n          style={sheetStyle}\n          className={sheetClassName}\n          disablePortal={propDisablePortal}\n          temporary={temporary}\n          disableTransition={disableTransition}\n          {...sheetProps}\n        >\n          <Portal disabled={isSheet || (propDisablePortal ?? disablePortal)}>\n            {(rendered || isSheet) && (\n              <MenuWidget\n                {...remaining}\n                {...elementProps}\n                {...eventHandlers}\n                id={id}\n                role={role}\n                style={isSheet ? propStyle : style}\n                isSheet={isSheet}\n                tabIndex={tabIndex}\n                horizontal={horizontal}\n                listProps={listProps}\n                listStyle={listStyle}\n                listClassName={listClassName}\n                disableElevation={disableElevation}\n                cancelUnmountFocus={cancelUnmountFocus}\n              >\n                {children}\n              </MenuWidget>\n            )}\n          </Portal>\n        </MenuSheet>\n      </MenuConfigurationProvider>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useEffect","useRef","useFocusContainer","useUserInteractionMode","useAppSize","Portal","useFixedPositioning","useScrollLock","useScaleTransition","useEnsuredId","useIsomorphicLayoutEffect","MenuConfigurationProvider","useMenuConfiguration","MenuSheet","MenuWidget","useMenuBarContext","getDefaultAnchor","noop","Menu","props","propRef","id","propId","style","propStyle","role","children","horizontal","_horizontal","sheetHeader","_sheetHeader","sheetFooter","_sheetFooter","renderAsSheet","_renderAsSheet","sheetPosition","_sheetPosition","sheetVerticalSize","_sheetVerticalSize","sheetProps","sheetStyle","sheetClassName","menuStyle","menuClassName","disableElevation","temporary","tabIndex","fixedTo","className","classNames","timeout","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","onKeyDown","listProps","listStyle","listClassName","visible","onRequestClose","floating","anchor","closeOnResize","closeOnScroll","preventScroll","vwMargin","vhMargin","xMargin","yMargin","width","transformOrigin","preventOverlap","disableSwapping","disableVHBounds","initialX","initialY","disableFixedPositioning","getFixedPositionOptions","disablePortal","propDisablePortal","disableTransition","remaining","ariaLabel","ariaLabelledBy","root","menubar","menuitem","activeId","animatedOnceRef","hoverTimeoutRef","disableHoverMode","isPhone","isSheet","entered","cancelUnmountFocus","hideWithoutRefocus","current","mode","mouse","eventHandlers","transitionOptions","nodeRef","activate","event","key","stopPropagation","preventDefault","appearing","isFocusTypeDisabled","type","isHoverDisabled","ref","callbacks","updateStyle","disabled","onResize","undefined","onScroll","_event","data","rendered","elementProps","transitionIn","vertical","exitedHidden","hide","callback","target","HTMLElement","closest","frame","window","requestAnimationFrame","addEventListener","cancelAnimationFrame","removeEventListener","aria-label","aria-labelledby","header","footer","position","verticalSize","enabled"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAGEC,UAAU,EACVC,SAAS,EACTC,MAAM,QACD,QAAQ;AAGf,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,sBAAsB,QAAQ,gDAAgD;AAEvF,SAASC,UAAU,QAAQ,sCAAsC;AAEjE,SAASC,MAAM,QAAQ,sBAAsB;AAE7C,SAEEC,mBAAmB,QACd,wCAAwC;AAC/C,SAASC,aAAa,QAAQ,6BAA6B;AAC3D,SAEEC,kBAAkB,QACb,sCAAsC;AAE7C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,yBAAyB,QAAQ,kCAAkC;AAC5E,SAEEC,yBAAyB,EAEzBC,oBAAoB,QACf,iCAAiC;AACxC,SAASC,SAAS,QAAwC,iBAAiB;AAC3E,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,gBAAgB,QAAQ,aAAa;AAa9C,MAAMC,OAAO;AACX,aAAa;AACf;AA8MA;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,qBAAOnB,WAClB,SAASmB,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,uBAAuB,EACvBC,eAAeC,iBAAiB,EAChCC,iBAAiB,EACjB,GAAGC,WACJ,GAAGpE;IACJ,MAAM,EAAE,cAAcqE,SAAS,EAAE,mBAAmBC,cAAc,EAAE,GAClEtE;IAEF,MAAME,KAAKZ,aAAaa,QAAQ;IAChC,MAAM,EACJoE,IAAI,EACJC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EACfC,eAAe,EACfC,gBAAgB,EACjB,GAAGjF;IACJ,MAAM,EACJY,UAAU,EACVE,WAAW,EACXE,WAAW,EACXE,aAAa,EACbE,aAAa,EACbE,iBAAiB,EAClB,GAAGzB,qBAAqBO;IACzB,MAAM,EAAE8E,OAAO,EAAE,GAAG7F;IACpB,MAAM8F,UACJjE,kBAAkB,QAASA,kBAAkB,WAAWgE;IAE1D,MAAME,UAAUlG,OAAO;IACvB,MAAMmG,qBAAqBnG,OAAO;IAClC,MAAMoG,qBAAqB;QACzBD,mBAAmBE,OAAO,GAAG;QAC7BrC;IACF;IACA,MAAMsC,OAAOpG;IACb,MAAMqG,QAAQD,SAAS;IAEvB,MAAM,EAAEE,aAAa,EAAEC,iBAAiB,EAAE,GAAGxG,kBAAkB;QAC7DyG,SAASvF;QACTwF,UAAU5C;QACVJ,WAAUiD,KAAK;YACbjD,UAAUiD;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;oBACA/B;oBACA;gBACF,KAAK;oBACH,oEAAoE;oBACpE,iDAAiD;oBACjD4C,MAAMG,cAAc;oBAEpB,IAAI,CAACpB,UAAU;wBACb,4DAA4D;wBAC5DiB,MAAME,eAAe;oBACvB;oBACAf;oBACA/B;oBACA;gBACF,KAAK;oBACH,IAAI,CAACyB,QAAQE,YAAYjE,YAAY;wBACnCkF,MAAME,eAAe;wBACrBF,MAAMG,cAAc;wBACpB/C;oBACF;oBACA;gBACF,KAAK;oBACH,IAAI,CAACyB,QAAQE,YAAY,CAACjE,YAAY;wBACpCkF,MAAME,eAAe;wBACrBF,MAAMG,cAAc;wBACpB/C;oBACF;oBACA;YACJ;QACF;QACAX;QACAC,YAAW0D,SAAS;YAClB1D,WAAW0D;YACXd,QAAQG,OAAO,GAAG;QACpB;QACA9C,WAAUyD,SAAS;YACjBzD,UAAUyD;YACVd,QAAQG,OAAO,GAAG;YAClBF,mBAAmBE,OAAO,GAAG;YAC7BR,gBAAgBQ,OAAO,GAAG;QAC5B;QACA7C;QACAC;QACAC;YACEA;YACAwC,QAAQG,OAAO,GAAG;QACpB;QACAhB;QACA4B,qBAAoBC,IAAI;YACtB,IAAI1F,SAAS,WAAW;gBACtB,OAAO,CAACyE;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,YAAYxE,OAAOwE;QAElC;IACF;IAEA,MAAM,EAAEwB,GAAG,EAAE9F,KAAK,EAAE+F,SAAS,EAAEC,WAAW,EAAE,GAAGjH,oBAAoB;QACjE,GAAGoG,iBAAiB;QACpBc,UAAUtC;QACV3D,OAAO2E,UAAU1E,YAAYkB;QAC7BK;QACAoB,QAAQnD,iBAAiB;YACvBmD;YACAwB;YACAzB;YACA0B,UAAU,CAACF,QAAQE;YACnBjE;QACF;QACA4C;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAsC,UAAUrD,gBAAgBiC,qBAAqBqB;QAC/CC,UAASC,MAAM,EAAEC,IAAI;YACnB,IAAI,CAACA,KAAK7D,OAAO,IAAIK,eAAe;gBAClCgC;YACF;QACF;IACF;IACA,MAAM,EAAEyB,QAAQ,EAAE1C,aAAa,EAAE2C,YAAY,EAAE,GAAGvH,mBAAmB;QACnEwC,WAAWlD,IAAI,CAACoG,WAAWvD,eAAeK;QAC1CgF,cAAchE;QACdiE,UAAU,CAACtG;QACXkB;QACAK,SAASgD,WAAWZ,oBAAoB,IAAIpC;QAC5CD;QACAE;QACAC;QACAC;QACA6E,cAAc;QACd,iCAAiC;QACjC,GAAGxB,iBAAiB;QACpB,GAAGY,SAAS;QACZ,oCAAoC;QACpCX,SAASU;IACX;IACA9G,cAAcyD,WAAWM;IAEzB,2EAA2E;IAC3E,yEAAyE;IACzE,qEAAqE;IACrE,MAAM6D,OAAOlI,OAAOgE;IACpBjE,UAAU;QACRmI,KAAK7B,OAAO,GAAGrC;IACjB;IACAjE,UAAU;QACR,IAAI,CAACgE,SAAS;YACZ;QACF;QAEA,MAAMoE,WAAW,CAACvB;YAChB,uDAAuD;YACvD,IAAI,CAACV,QAAQG,OAAO,EAAE;gBACpB;YACF;YAEA,wEAAwE;YACxE,wEAAwE;YACxE,mEAAmE;YACnEF,mBAAmBE,OAAO,GACxB,CAAEO,CAAAA,MAAMwB,MAAM,YAAYC,WAAU,KACpC,CAACzB,MAAMwB,MAAM,CAACE,OAAO,CAAC,CAAC,OAAO,EAAE9G,KAAK,EAAE,CAAC;YAE1C,8DAA8D;YAC9D0G,KAAK7B,OAAO;YACZN;QACF;QAEA,0EAA0E;QAC1E,wDAAwD;QACxD,MAAMwC,QAAQC,OAAOC,qBAAqB,CAAC;YACzCD,OAAOE,gBAAgB,CAAC,SAASP;QACnC;QAEA,OAAO;YACLK,OAAOG,oBAAoB,CAACJ;YAC5BC,OAAOI,mBAAmB,CAAC,SAAST;QACtC;IACF,GAAG;QAACpC;QAAkBvE;QAAMuC;KAAQ;IACpCtD,0BAA0B;QACxB,IAAI,CAACsD,SAAS;YACZ;QACF;QAEAuD;IACF,GAAG;QAACA;QAAa7F;QAAUsC;KAAQ;IAEnC,qBACE,KAACrD;QACCgB,YAAYA;QACZM,eAAeA;QACfF,aAAaA;QACbF,aAAaA;QACbM,eAAeA;QACfE,mBAAmBA;kBAEnB,cAAA,KAACxB;YACCiI,cAAYtD;YACZuD,mBAAiBtD;YACjBuD,QAAQnH;YACRoH,QAAQlH;YACRmH,UAAU/G;YACVgH,cAAc9G;YACd2B,SAASA;YACToF,SAASlD;YACTjC,gBAAgBA;YAChB1C,OAAOiB;YACPQ,WAAWP;YACX2C,eAAeC;YACfxC,WAAWA;YACXyC,mBAAmBA;YAClB,GAAG/C,UAAU;sBAEd,cAAA,KAAClC;gBAAOmH,UAAUtB,WAAYb,CAAAA,qBAAqBD,aAAY;0BAC5D,AAAC0C,CAAAA,YAAY5B,OAAM,mBAClB,KAACpF;oBACE,GAAGyE,SAAS;oBACZ,GAAGwC,YAAY;oBACf,GAAGtB,aAAa;oBACjBpF,IAAIA;oBACJI,MAAMA;oBACNF,OAAO2E,UAAU1E,YAAYD;oBAC7B2E,SAASA;oBACTpD,UAAUA;oBACVnB,YAAYA;oBACZkC,WAAWA;oBACXC,WAAWA;oBACXC,eAAeA;oBACfnB,kBAAkBA;oBAClBwD,oBAAoBA;8BAEnB1E;;;;;AAOf,GACA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-md/core",
-  "version": "6.3.1",
+  "version": "6.3.2",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -28,7 +28,6 @@
     },
     "./autocomplete/AutocompleteListboxChildren": null,
     "./autocomplete/utils": null,
-    "./draggable/utils": null,
     "./error-boundary/context": null,
     "./form/InputToggleIcon": null,
     "./form/ResizingTextAreaWrapper": null,
@@ -81,13 +80,12 @@
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
-    "@microsoft/api-extractor": "^7.52.8",
-    "@mlaursen/eslint-config": "^8.0.1",
+    "@microsoft/api-extractor": "^7.52.9",
     "@swc/cli": "^0.6.0",
-    "@swc/core": "^1.12.11",
+    "@swc/core": "^1.13.2",
     "@swc/jest": "^0.2.39",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
@@ -96,8 +94,8 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "chokidar": "^4.0.3",
-    "eslint": "^9.30.1",
-    "filesize": "^10.1.6",
+    "eslint": "^9.32.0",
+    "filesize": "^11.0.2",
     "glob": "11.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -106,7 +104,7 @@
     "lz-string": "^1.5.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.6.2",
-    "stylelint": "^16.21.1",
+    "stylelint": "^16.22.0",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-recommended-scss": "^15.0.1",
     "stylelint-order": "^7.0.0",
@@ -115,7 +113,8 @@
     "ts-node": "^10.9.2",
     "tsx": "^4.20.3",
     "typescript": "^5.8.3",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "@react-md/eslint-config": "1.0.0"
   },
   "peerDependencies": {
     "@jest/globals": "^29.7.0",

package/src/dialog/Dialog.tsx

@@ -287,6 +287,10 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
     const { eventHandlers, transitionOptions } = useFocusContainer({
       nodeRef: ref,
       activate: visible,
+      onEnter(appearing) {
+        onEnter(appearing);
+        setChildVisible(type !== "full-page");
+      },
       onEntered(appear) {
         onEntered(appear);
         // this needs to be called onEnter and onEntered just in case the
@@ -294,6 +298,10 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
         setChildVisible(type !== "full-page");
       },
       onEntering,
+      onExit() {
+        onExit();
+        setChildVisible(false);
+      },
       onExiting,
       onExited() {
         onExited();
@@ -334,14 +342,6 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
       appear: appear && !disableTransition && !ssr,
       enter: enter && !disableTransition,
       exit: exit && !disableTransition,
-      onEnter(appearing) {
-        onEnter(appearing);
-        setChildVisible(type !== "full-page");
-      },
-      onExit() {
-        onExit();
-        setChildVisible(false);
-      },
       temporary,
       exitedHidden,
       disablePortal: propDisablePortal,

package/src/focus/useFocusContainer.ts

@@ -39,15 +39,19 @@ const noop = (): void => {
  */
 export type FocusType = "mount" | "unmount" | "keyboard";
 
-/** @since 6.0.0 */
-export type FocusContainerTransitionCallbacks = Pick<
-  TransitionCallbacks,
-  "onEntering" | "onEntered" | "onExiting" | "onExited"
->;
+/**
+ * @since 6.0.0
+ * @deprecated Use `TransitionCallbacks` instead.
+ */
+export type FocusContainerTransitionCallbacks = TransitionCallbacks;
 
-/** @since 6.0.0 */
+/**
+ * @since 6.0.0
+ * @since 6.3.2 Fixed by extending `TransitionCallbacks` after the
+ * `onEnteredOnce` and `onExitedOnce` support was added to CSS transitions.
+ */
 export interface FocusContainerTransitionOptions<E extends HTMLElement>
-  extends FocusContainerTransitionCallbacks {
+  extends TransitionCallbacks {
   /**
    * An optional ref that will be merged with the
    * {@link FocusContainerImplementation.nodeRef}
@@ -155,10 +159,12 @@ export function useFocusContainer<E extends HTMLElement>(
   const {
     nodeRef,
     activate,
-    onEntering = noop,
-    onEntered = noop,
-    onExiting = noop,
-    onExited = noop,
+    onEnter,
+    onEntering,
+    onEntered,
+    onExit,
+    onExiting,
+    onExited,
     onKeyDown = noop,
     programmatic = false,
     disableTransition = false,
@@ -181,6 +187,7 @@ export function useFocusContainer<E extends HTMLElement>(
     transitionOptions: {
       nodeRef: refCallback,
       ...getTransitionCallbacks({
+        onEnter,
         onEnterOnce: () => {
           const instance = ref.current;
           if (
@@ -205,6 +212,7 @@ export function useFocusContainer<E extends HTMLElement>(
             prevFocus.current?.focus();
           });
         },
+        onExit,
         onExiting,
         onExited,
         disableTransition,

package/src/hoverMode/useHoverModeProvider.ts

@@ -111,7 +111,15 @@ export interface HoverModeContext extends SimpleHoverModeContext {
  */
 export interface CreateHoverModeContextOptions {
   /**
-   * TODO: I think this has something to do with how I implemented the MenuBar.
+   * This should only be used if creating nested hover mode behavior where the
+   * hover mode should default to being enabled if a parent element is hovered.
+   * So set this to an element's `id` if a parent element is being hovered when
+   * the component **mounts**.
+   *
+   * The use case for this is the `MenuBar` component since after clicking a
+   * menu button or hovering it long enough to enable the hover mode, all child
+   * menus should also be in the hover mode until the top-most element is
+   * closed.
    *
    * @defaultValue `""`
    */

package/src/menu/Menu.tsx

@@ -420,6 +420,7 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
             break;
         }
       },
+      onEnter,
       onEntering(appearing) {
         onEntering(appearing);
         entered.current = true;
@@ -430,11 +431,12 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
         cancelUnmountFocus.current = false;
         animatedOnceRef.current = true;
       },
+      onExit,
+      onExiting,
       onExited() {
         onExited();
         entered.current = false;
       },
-      onExiting,
       disableTransition,
       isFocusTypeDisabled(type) {
         if (role === "listbox") {
@@ -461,7 +463,6 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
     const { ref, style, callbacks, updateStyle } = useFixedPositioning({
       ...transitionOptions,
       disabled: disableFixedPositioning,
-      onEnter,
       style: isSheet ? propStyle : menuStyle,
       fixedTo,
       anchor: getDefaultAnchor({
@@ -491,7 +492,6 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
       },
     });
     const { rendered, disablePortal, elementProps } = useScaleTransition({
-      nodeRef: ref,
       className: cnb(!isSheet && menuClassName, className),
       transitionIn: visible,
       vertical: !horizontal,
@@ -501,10 +501,12 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
       appear,
       enter,
       exit,
-      onExit,
-      onExiting: transitionOptions.onExiting,
       exitedHidden: true,
+      // merge the transition callbacks
+      ...transitionOptions,
       ...callbacks,
+      // but prefer the latest defined ref
+      nodeRef: ref,
     });
     useScrollLock(visible && preventScroll);