@react-md/core 1.0.0-next.0 → 1.0.0-next.1

package/dist/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, useState, type HTMLAttributes } from \"react\";\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  useFocusContainer,\n  type FocusContainerComponentProps,\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 } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\nimport { DialogContainer } from \"./DialogContainer.js\";\nimport {\n  NestedDialogProvider,\n  useNestedDialogContext,\n} from \"./NestedDialogProvider.js\";\nimport { dialog, type DialogType } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-dialog-background-color\"?: string;\n    \"--rmd-dialog-color\"?: string;\n    \"--rmd-dialog-min-width\"?: string | number;\n    \"--rmd-dialog-horizontal-margin\"?: string | number;\n    \"--rmd-dialog-vertical-margin\"?: string | number;\n    \"--rmd-dialog-z-index\"?: string | number;\n    \"--rmd-dialog-header-padding\"?: string | number;\n    \"--rmd-dialog-header-padding-bottom\"?: string | number;\n    \"--rmd-dialog-content-padding\"?: string | number;\n    \"--rmd-dialog-footer-padding\"?: string | number;\n  }\n}\n\n/** @remarks \\@since 4.0.0 */\nexport const DEFAULT_DIALOG_CLASSNAMES: Readonly<CSSTransitionClassNames> = {\n  appear: \"rmd-dialog--enter\",\n  appearActive: \"rmd-dialog--enter-active\",\n  enter: \"rmd-dialog--enter\",\n  enterActive: \"rmd-dialog--enter-active\",\n  exit: \"rmd-dialog--exit\",\n  exitActive: \"rmd-dialog--exit-active\",\n};\n\n/** @remarks \\@since 4.0.0 */\nexport const DEFAULT_DIALOG_TIMEOUT: Readonly<TransitionTimeout> = {\n  enter: 200,\n  exit: 150,\n};\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 `useEnsuredId('dialog')`\n   */\n  id?: string;\n\n  /**\n   * @defaultValue `\"centered\"`\n   */\n  type?: DialogType;\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   * @internal\n   * @defaultValue `false`\n   */\n  fixed?: 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 === \"centered\"`.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n\n  /**\n   * @see {@link DEFAULT_DIALOG_TIMEOUT}\n   * @defaultValue `DEFAULT_DIALOG_TIMEOUT`\n   */\n  timeout?: CSSTransitionComponentProps[\"timeout\"];\n\n  /**\n   * @see {@link DEFAULT_DIALOG_CLASSNAMES}\n   * @defaultValue `DEFAULT_DIALOG_CLASSNAMES`\n   */\n  classNames?: CSSTransitionComponentProps[\"classNames\"];\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   * @remarks \\@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\n * Simple Example\n * ```tsx\n * import {\n *   Button,\n *   Dialog,\n *   DialogHeader,\n *   DialogTitle,\n *   DialogContent,\n *   DialogFooter,\n *   Typography,\n *   useToggle,\n * } from \"@react-md/core\";\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 * @remarks \\@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      role = \"dialog\",\n      type = \"centered\",\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,\n      enter,\n      exit,\n      onEnter = noop,\n      onEntering = noop,\n      onEntered,\n      onExit = noop,\n      onExiting = noop,\n      onExited,\n      exitedHidden = true,\n      fixed = false,\n      modal = false,\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    const { eventHandlers, transitionOptions } = useFocusContainer({\n      nodeRef: ref,\n      activate: visible,\n      onEntered,\n      onEntering,\n      onExiting,\n      onExited,\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        fixed,\n        outline: !disableFocusOutline,\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    // 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\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              {...containerProps}\n              className={cnb(\n                containerProps?.className,\n                !temporary &&\n                  exitedHidden &&\n                  stage === \"exited\" &&\n                  DISPLAY_NONE_CLASS\n              )}\n              enabled={type === \"centered\"}\n            >\n              <div\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":["cnb","forwardRef","useState","useSsr","useFocusContainer","Overlay","Portal","useScrollLock","useCSSTransition","useEnsuredId","DISPLAY_NONE_CLASS","DialogContainer","NestedDialogProvider","useNestedDialogContext","dialog","DEFAULT_DIALOG_CLASSNAMES","appear","appearActive","enter","enterActive","exit","exitActive","DEFAULT_DIALOG_TIMEOUT","noop","noopBool","Dialog","props","ref","id","propId","role","type","tabIndex","visible","onRequestClose","containerProps","temporary","className","timeout","classNames","disableTransition","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","fixed","modal","disableOverlay","overlayProps","overlayHidden","onKeyDown","isFocusTypeDisabled","disablePortal","propDisablePortal","disableScrollLock","disableEscapeClose","disableFocusOutline","children","remaining","ssr","setChildVisible","eventHandlers","transitionOptions","nodeRef","activate","event","isPropagationStopped","key","stopPropagation","elementProps","stage","rendered","transitionIn","outline","appearing","isChildVisible","setIsChildVisible","value","onClick","clickable","noOpacity","disabled","enabled","div"],"mappings":"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"}
+{"version":3,"sources":["../../src/dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, useState, type HTMLAttributes } from \"react\";\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  useFocusContainer,\n  type FocusContainerComponentProps,\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 } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\nimport { DialogContainer } from \"./DialogContainer.js\";\nimport {\n  NestedDialogProvider,\n  useNestedDialogContext,\n} from \"./NestedDialogProvider.js\";\nimport { dialog, type DialogType } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-dialog-background-color\"?: string;\n    \"--rmd-dialog-color\"?: string;\n    \"--rmd-dialog-min-width\"?: string | number;\n    \"--rmd-dialog-horizontal-margin\"?: string | number;\n    \"--rmd-dialog-vertical-margin\"?: string | number;\n    \"--rmd-dialog-z-index\"?: string | number;\n    \"--rmd-dialog-header-padding\"?: string | number;\n    \"--rmd-dialog-header-padding-bottom\"?: string | number;\n    \"--rmd-dialog-content-padding\"?: string | number;\n    \"--rmd-dialog-footer-padding\"?: string | number;\n  }\n}\n\n/** @remarks \\@since 4.0.0 */\nexport const DEFAULT_DIALOG_CLASSNAMES: Readonly<CSSTransitionClassNames> = {\n  appear: \"rmd-dialog--enter\",\n  appearActive: \"rmd-dialog--enter-active\",\n  enter: \"rmd-dialog--enter\",\n  enterActive: \"rmd-dialog--enter-active\",\n  exit: \"rmd-dialog--exit\",\n  exitActive: \"rmd-dialog--exit-active\",\n};\n\n/** @remarks \\@since 4.0.0 */\nexport const DEFAULT_DIALOG_TIMEOUT: Readonly<TransitionTimeout> = {\n  enter: 200,\n  exit: 150,\n};\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   * @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   * @internal\n   * @defaultValue `false`\n   */\n  fixed?: 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 === \"centered\"`.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n\n  /**\n   * @see {@link DEFAULT_DIALOG_TIMEOUT}\n   * @defaultValue `DEFAULT_DIALOG_TIMEOUT`\n   */\n  timeout?: CSSTransitionComponentProps[\"timeout\"];\n\n  /**\n   * @see {@link DEFAULT_DIALOG_CLASSNAMES}\n   * @defaultValue `DEFAULT_DIALOG_CLASSNAMES`\n   */\n  classNames?: CSSTransitionComponentProps[\"classNames\"];\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   * @remarks \\@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\n * Simple Example\n * ```tsx\n * import {\n *   Button,\n *   Dialog,\n *   DialogHeader,\n *   DialogTitle,\n *   DialogContent,\n *   DialogFooter,\n *   Typography,\n *   useToggle,\n * } from \"@react-md/core\";\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 * @remarks \\@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      fixed = false,\n      modal = false,\n      role = modal ? \"alertdialog\" : \"dialog\",\n      type = \"centered\",\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,\n      enter,\n      exit,\n      onEnter = noop,\n      onEntering = noop,\n      onEntered,\n      onExit = noop,\n      onExiting = noop,\n      onExited,\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    const { eventHandlers, transitionOptions } = useFocusContainer({\n      nodeRef: ref,\n      activate: visible,\n      onEntered,\n      onEntering,\n      onExiting,\n      onExited,\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        fixed,\n        outline: !disableFocusOutline,\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    // 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\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              {...containerProps}\n              className={cnb(\n                containerProps?.className,\n                !temporary &&\n                  exitedHidden &&\n                  stage === \"exited\" &&\n                  DISPLAY_NONE_CLASS\n              )}\n              enabled={type === \"centered\"}\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":["cnb","forwardRef","useState","useSsr","useFocusContainer","Overlay","Portal","useScrollLock","useCSSTransition","useEnsuredId","DISPLAY_NONE_CLASS","DialogContainer","NestedDialogProvider","useNestedDialogContext","dialog","DEFAULT_DIALOG_CLASSNAMES","appear","appearActive","enter","enterActive","exit","exitActive","DEFAULT_DIALOG_TIMEOUT","noop","noopBool","Dialog","props","ref","id","propId","fixed","modal","role","type","tabIndex","visible","onRequestClose","containerProps","temporary","className","timeout","classNames","disableTransition","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disableOverlay","overlayProps","overlayHidden","onKeyDown","isFocusTypeDisabled","disablePortal","propDisablePortal","disableScrollLock","disableEscapeClose","disableFocusOutline","children","remaining","ssr","setChildVisible","eventHandlers","transitionOptions","nodeRef","activate","event","isPropagationStopped","key","stopPropagation","elementProps","stage","rendered","transitionIn","outline","appearing","isChildVisible","setIsChildVisible","value","onClick","clickable","noOpacity","disabled","enabled","div","aria-modal","undefined"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,EAAEC,QAAQ,QAA6B,QAAQ;AAClE,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SACEC,iBAAiB,QAEZ,gCAAgC;AACvC,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,aAAa,QAAQ,6BAA6B;AAO3D,SAASC,gBAAgB,QAAQ,oCAAoC;AAErE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,kBAAkB,QAAQ,+BAA+B;AAClE,SAASC,eAAe,QAAQ,uBAAuB;AACvD,SACEC,oBAAoB,EACpBC,sBAAsB,QACjB,4BAA4B;AACnC,SAASC,MAAM,QAAyB,cAAc;AAiBtD,2BAA2B,GAC3B,OAAO,MAAMC,4BAA+D;IAC1EC,QAAQ;IACRC,cAAc;IACdC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;AACd,EAAE;AAEF,2BAA2B,GAC3B,OAAO,MAAMC,yBAAsD;IACjEJ,OAAO;IACPE,MAAM;AACR,EAAE;AAEF,MAAMG,OAAO;AACX,aAAa;AACf;AAEA,MAAMC,WAAW,IAAe;AAgJhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDC,GACD,OAAO,MAAMC,uBAASxB,WACpB,SAASwB,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,IAAIC,MAAM,EACVC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,OAAOD,QAAQ,gBAAgB,QAAQ,EACvCE,OAAO,UAAU,EACjBC,WAAW,CAAC,CAAC,EACbC,OAAO,EACPC,cAAc,EACdC,cAAc,EACdC,YAAY,IAAI,EAChBC,SAAS,EACTC,UAAUlB,sBAAsB,EAChCmB,aAAa1B,yBAAyB,EACtC2B,oBAAoB,KAAK,EACzB1B,MAAM,EACNE,KAAK,EACLE,IAAI,EACJuB,UAAUpB,IAAI,EACdqB,aAAarB,IAAI,EACjBsB,SAAS,EACTC,SAASvB,IAAI,EACbwB,YAAYxB,IAAI,EAChByB,QAAQ,EACRC,eAAe,IAAI,EACnBC,iBAAiB,KAAK,EACtBC,YAAY,EACZC,aAAa,EACbC,YAAY9B,IAAI,EAChB+B,sBAAsB9B,QAAQ,EAC9B+B,eAAeC,iBAAiB,EAChCC,oBAAoB,KAAK,EACzBC,qBAAqB3B,KAAK,EAC1B4B,sBAAsB1B,SAAS,WAAW,EAC1C2B,QAAQ,EACR,GAAGC,WACJ,GAAGnC;IACJ,MAAME,KAAKnB,aAAaoB,QAAQ;IAEhC,MAAMiC,MAAM3D;IACZ,MAAM4D,kBAAkBlD;IACxB,MAAM,EAAEmD,aAAa,EAAEC,iBAAiB,EAAE,GAAG7D,kBAAkB;QAC7D8D,SAASvC;QACTwC,UAAUhC;QACVU;QACAD;QACAG;QACAC;QACAN;QACAW,WAAUe,KAAK;YACbf,UAAUe;YACV,IACEA,MAAMC,oBAAoB,MAC1BtC,SACA2B,sBACAU,MAAME,GAAG,KAAK,UACd;gBACA;YACF;YAEA,8CAA8C;YAC9CF,MAAMG,eAAe;YACrBnC;QACF;QACAkB;IACF;IACA,MAAM,EAAEkB,YAAY,EAAEC,KAAK,EAAEC,QAAQ,EAAEnB,aAAa,EAAE,GAAG/C,iBAAiB;QACxEmE,cAAcxC;QACdK;QACAC;QACAF,WAAWzB,OAAO;YAChBmB;YACAH;YACA8C,SAAS,CAACjB;YACVpB;QACF;QACAvB,QAAQA,UAAU,CAAC0B,qBAAqB,CAACoB;QACzC5C,OAAOA,SAAS,CAACwB;QACjBtB,MAAMA,QAAQ,CAACsB;QACfC,SAAQkC,SAAS;YACflC,QAAQkC;YACRd,gBAAgB9B,SAAS;QAC3B;QACAa;YACEA;YACAiB,gBAAgB;QAClB;QACAzB;QACAW;QACAM,eAAeC;QACf,GAAGS,iBAAiB;IACtB;IACA1D,cAAc,CAACkD,qBAAqBtB;IAEpC,0EAA0E;IAC1E,4EAA4E;IAC5E,wEAAwE;IACxE,SAAS;IACT,MAAM,CAAC2C,gBAAgBC,kBAAkB,GAAG7E,SAAS;IAErD,qBACE,MAACU;QAAqBoE,OAAOD;;YAC1B,CAAC7B,gCACA,KAAC7C;gBACC8B,SAASA;gBACTO,mBAAmBA;gBACnBJ,WAAWA;gBACXiB,eAAeA;gBACd,GAAGJ,YAAY;gBAChB8B,SAASlD,QAAQR,OAAOa;gBACxB8C,WAAW,CAACnD;gBACZoD,WAAW/B,iBAAiB0B;;0BAGhC,KAACxE;gBAAO8E,UAAU7B;0BACfmB,0BACC,KAAC/D;oBACE,GAAG0B,cAAc;oBAClBE,WAAWvC,IACTqC,gBAAgBE,WAChB,CAACD,aACCW,gBACAwB,UAAU,YACV/D;oBAEJ2E,SAASpD,SAAS;8BAElB,cAAA,KAACqD;wBACCC,cAAYxD,SAASyD;wBACpB,GAAG3B,SAAS;wBACZ,GAAGW,YAAY;wBACf,GAAGR,aAAa;wBACjBpC,IAAIA;wBACJI,MAAMA;wBACNE,UAAUA;kCAET0B;;;;;;AAOf,GACA"}

package/dist/focus/useFocusContainer.d.ts

@@ -86,26 +86,26 @@ export interface FocusContainerImplementation<E extends HTMLElement> {
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
- *   const { toggled, toggle } = useToggle(false);
+ *   const { toggled, enable, disable } = useToggle(false);
  *
  *   const { eventHandlers, transitionOptions } = useFocusContainer({
- *     activate: visible,
+ *     activate: toggled,
  *   });
  *   const { elementProps, rendered } = useScaleTransition({
- *     transitionIn: visible,
+ *     transitionIn: toggled,
  *     temporary: true,
  *     ...transitionOptions,
  *   });
  *
  *   return (
  *     <>
- *       <Button onClick={toggle}>Toggle</Button>
+ *       <Button onClick={enable}>Toggle</Button>
  *       {rendered && (
  *         <div {...eventHandlers} {...elementProps}>
- *           <Button>Button 1</Button>
- *           <Button>Button 2</Button>
- *           <Button>Button 3</Button>
- *           <Button>Button 4</Button>
+ *           <Button onClick={disable}>Button 1</Button>
+ *           <Button onClick={disable}>Button 2</Button>
+ *           <Button onClick={disable}>Button 3</Button>
+ *           <Button onClick={disable}>Button 4</Button>
  *         </div>
  *       )}
  *     </>

package/dist/focus/useFocusContainer.js

@@ -1,5 +1,6 @@
 "use client";
 import { useEffect, useRef } from "react";
+import { TRANSITION_CONFIG } from "../transition/config.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { focusElementWithin, getFocusableElements } from "./utils.js";
 const noop = ()=>{
@@ -23,26 +24,26 @@ const noop = ()=>{
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
- *   const { toggled, toggle } = useToggle(false);
+ *   const { toggled, enable, disable } = useToggle(false);
  *
  *   const { eventHandlers, transitionOptions } = useFocusContainer({
- *     activate: visible,
+ *     activate: toggled,
  *   });
  *   const { elementProps, rendered } = useScaleTransition({
- *     transitionIn: visible,
+ *     transitionIn: toggled,
  *     temporary: true,
  *     ...transitionOptions,
  *   });
  *
  *   return (
  *     <>
- *       <Button onClick={toggle}>Toggle</Button>
+ *       <Button onClick={enable}>Toggle</Button>
  *       {rendered && (
  *         <div {...eventHandlers} {...elementProps}>
- *           <Button>Button 1</Button>
- *           <Button>Button 2</Button>
- *           <Button>Button 3</Button>
- *           <Button>Button 4</Button>
+ *           <Button onClick={disable}>Button 1</Button>
+ *           <Button onClick={disable}>Button 2</Button>
+ *           <Button onClick={disable}>Button 3</Button>
+ *           <Button onClick={disable}>Button 4</Button>
  *         </div>
  *       )}
  *     </>
@@ -86,9 +87,9 @@ const noop = ()=>{
         transitionOptions: {
             nodeRef: refCallback,
             onEntering: handleMountFocus(onEntering, false),
-            onEntered: handleMountFocus(onEntered, !disableTransition),
+            onEntered: handleMountFocus(onEntered, !disableTransition && !TRANSITION_CONFIG.disabled),
             onExiting: handleUnmountFocus(onExiting, false),
-            onExited: handleUnmountFocus(onExited, !disableTransition)
+            onExited: handleUnmountFocus(onExited, !disableTransition && !TRANSITION_CONFIG.disabled)
         },
         eventHandlers: {
             onKeyDown (event) {

package/dist/focus/useFocusContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/focus/useFocusContainer.ts"],"sourcesContent":["\"use client\";\nimport type { KeyboardEventHandler, Ref, RefObject } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport type {\n  TransitionCallbacks,\n  TransitionEnterHandler,\n  TransitionExitHandler,\n} from \"../transition/types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport type { FocusElementWithinType } from \"./utils.js\";\nimport { focusElementWithin, getFocusableElements } 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 * @remarks \\@since 6.0.0\n */\nexport type FocusType = \"mount\" | \"unmount\" | \"keyboard\";\n\n/** @remarks \\@since 6.0.0 */\nexport type FocusContainerTransitionCallbacks = Pick<\n  TransitionCallbacks,\n  \"onEntering\" | \"onEntered\" | \"onExiting\" | \"onExited\"\n>;\n\n/** @remarks \\@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/** @remarks \\@since 6.0.0 */\nexport interface FocusContainerEventHandlers<E extends HTMLElement> {\n  onKeyDown?: KeyboardEventHandler<E>;\n}\n\n/**\n * @remarks \\@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/** @remarks \\@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/** @remarks \\@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\n * Main Usage\n * ```tsx\n * import {\n *   Button,\n *   useFocusContainer,\n *   useScaleTransition,\n *   useToggle,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { toggled, toggle } = useToggle(false);\n *\n *   const { eventHandlers, transitionOptions } = useFocusContainer({\n *     activate: visible,\n *   });\n *   const { elementProps, rendered } = useScaleTransition({\n *     transitionIn: visible,\n *     temporary: true,\n *     ...transitionOptions,\n *   });\n *\n *   return (\n *     <>\n *       <Button onClick={toggle}>Toggle</Button>\n *       {rendered && (\n *         <div {...eventHandlers} {...elementProps}>\n *           <Button>Button 1</Button>\n *           <Button>Button 2</Button>\n *           <Button>Button 3</Button>\n *           <Button>Button 4</Button>\n *         </div>\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@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  const handleMountFocus =\n    (callback: TransitionEnterHandler, skipped: boolean) =>\n    (appearing: boolean) => {\n      callback(appearing);\n      const instance = ref.current;\n      if (\n        instance &&\n        !skipped &&\n        !isFocusTypeDisabled(\"mount\") &&\n        (!document.activeElement || !instance.contains(document.activeElement))\n      ) {\n        instance.focus();\n      }\n    };\n\n  const handleUnmountFocus =\n    (callback: TransitionExitHandler, skipped: boolean) => (): void => {\n      callback();\n      if (skipped || 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\n  return {\n    nodeRef: ref,\n    transitionOptions: {\n      nodeRef: refCallback,\n      onEntering: handleMountFocus(onEntering, false),\n      onEntered: handleMountFocus(onEntered, !disableTransition),\n      onExiting: handleUnmountFocus(onExiting, false),\n      onExited: handleUnmountFocus(onExited, !disableTransition),\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","useEnsuredRef","focusElementWithin","getFocusableElements","noop","useFocusContainer","options","nodeRef","activate","onEntering","onEntered","onExiting","onExited","onKeyDown","programmatic","disableTransition","isFocusTypeDisabled","ref","refCallback","prevFocus","document","activeElement","HTMLElement","current","handleMountFocus","callback","skipped","appearing","instance","contains","focus","handleUnmountFocus","window","requestAnimationFrame","transitionOptions","eventHandlers","event","isPropagationStopped","key","target","shiftKey","currentTarget","elements","count","length","preventDefault","type","container"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAM1C,SAASC,aAAa,QAAQ,sBAAsB;AAEpD,SAASC,kBAAkB,EAAEC,oBAAoB,QAAQ,aAAa;AAEtE,MAAMC,OAAO;AACX,aAAa;AACf;AAsFA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CC,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,YAAYnB,OAA2B;IAE7CD,UAAU;QACR,IAAI,CAACS,YAAY,CAAEY,CAAAA,SAASC,aAAa,YAAYC,WAAU,GAAI;YACjE;QACF;QAEAH,UAAUI,OAAO,GAAGH,SAASC,aAAa;IAC5C,GAAG;QAACb;KAAS;IAEb,MAAMgB,mBACJ,CAACC,UAAkCC,UACnC,CAACC;YACCF,SAASE;YACT,MAAMC,WAAWX,IAAIM,OAAO;YAC5B,IACEK,YACA,CAACF,WACD,CAACV,oBAAoB,YACpB,CAAA,CAACI,SAASC,aAAa,IAAI,CAACO,SAASC,QAAQ,CAACT,SAASC,aAAa,CAAA,GACrE;gBACAO,SAASE,KAAK;YAChB;QACF;IAEF,MAAMC,qBACJ,CAACN,UAAiCC,UAAqB;YACrDD;YACA,IAAIC,WAAWV,oBAAoB,YAAY;gBAC7C;YACF;YAEA,2EAA2E;YAC3E,iCAAiC;YACjCgB,OAAOC,qBAAqB,CAAC;gBAC3Bd,UAAUI,OAAO,EAAEO;YACrB;QACF;IAEF,OAAO;QACLvB,SAASU;QACTiB,mBAAmB;YACjB3B,SAASW;YACTT,YAAYe,iBAAiBf,YAAY;YACzCC,WAAWc,iBAAiBd,WAAW,CAACK;YACxCJ,WAAWoB,mBAAmBpB,WAAW;YACzCC,UAAUmB,mBAAmBnB,UAAU,CAACG;QAC1C;QACAoB,eAAe;YACbtB,WAAUuB,KAAK;gBACbvB,UAAUuB;gBACV,IACEA,MAAMC,oBAAoB,MAC1BD,MAAME,GAAG,KAAK,SACdtB,oBAAoB,aACpB;oBACA;gBACF;gBAEA,MAAM,EAAEuB,MAAM,EAAEC,QAAQ,EAAEC,aAAa,EAAE,GAAGL;gBAC5C,MAAMM,WAAWvC,qBAAqBsC,eAAe3B;gBACrD,MAAM6B,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;oBACpB3C,mBAAmB;wBACjB4C;wBACAJ;wBACAK,WAAWN;oBACb;gBACF;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/focus/useFocusContainer.ts"],"sourcesContent":["\"use client\";\nimport type { KeyboardEventHandler, Ref, RefObject } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport { TRANSITION_CONFIG } from \"../transition/config.js\";\nimport type {\n  TransitionCallbacks,\n  TransitionEnterHandler,\n  TransitionExitHandler,\n} from \"../transition/types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport type { FocusElementWithinType } from \"./utils.js\";\nimport { focusElementWithin, getFocusableElements } 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 * @remarks \\@since 6.0.0\n */\nexport type FocusType = \"mount\" | \"unmount\" | \"keyboard\";\n\n/** @remarks \\@since 6.0.0 */\nexport type FocusContainerTransitionCallbacks = Pick<\n  TransitionCallbacks,\n  \"onEntering\" | \"onEntered\" | \"onExiting\" | \"onExited\"\n>;\n\n/** @remarks \\@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/** @remarks \\@since 6.0.0 */\nexport interface FocusContainerEventHandlers<E extends HTMLElement> {\n  onKeyDown?: KeyboardEventHandler<E>;\n}\n\n/**\n * @remarks \\@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/** @remarks \\@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/** @remarks \\@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\n * Main Usage\n * ```tsx\n * import {\n *   Button,\n *   useFocusContainer,\n *   useScaleTransition,\n *   useToggle,\n * } from \"@react-md/core\";\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 * @remarks \\@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  const handleMountFocus =\n    (callback: TransitionEnterHandler, skipped: boolean) =>\n    (appearing: boolean) => {\n      callback(appearing);\n      const instance = ref.current;\n      if (\n        instance &&\n        !skipped &&\n        !isFocusTypeDisabled(\"mount\") &&\n        (!document.activeElement || !instance.contains(document.activeElement))\n      ) {\n        instance.focus();\n      }\n    };\n\n  const handleUnmountFocus =\n    (callback: TransitionExitHandler, skipped: boolean) => (): void => {\n      callback();\n      if (skipped || 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\n  return {\n    nodeRef: ref,\n    transitionOptions: {\n      nodeRef: refCallback,\n      onEntering: handleMountFocus(onEntering, false),\n      onEntered: handleMountFocus(\n        onEntered,\n        !disableTransition && !TRANSITION_CONFIG.disabled\n      ),\n      onExiting: handleUnmountFocus(onExiting, false),\n      onExited: handleUnmountFocus(\n        onExited,\n        !disableTransition && !TRANSITION_CONFIG.disabled\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","TRANSITION_CONFIG","useEnsuredRef","focusElementWithin","getFocusableElements","noop","useFocusContainer","options","nodeRef","activate","onEntering","onEntered","onExiting","onExited","onKeyDown","programmatic","disableTransition","isFocusTypeDisabled","ref","refCallback","prevFocus","document","activeElement","HTMLElement","current","handleMountFocus","callback","skipped","appearing","instance","contains","focus","handleUnmountFocus","window","requestAnimationFrame","transitionOptions","disabled","eventHandlers","event","isPropagationStopped","key","target","shiftKey","currentTarget","elements","count","length","preventDefault","type","container"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAC1C,SAASC,iBAAiB,QAAQ,0BAA0B;AAM5D,SAASC,aAAa,QAAQ,sBAAsB;AAEpD,SAASC,kBAAkB,EAAEC,oBAAoB,QAAQ,aAAa;AAEtE,MAAMC,OAAO;AACX,aAAa;AACf;AAsFA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CC,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,MAAMgB,mBACJ,CAACC,UAAkCC,UACnC,CAACC;YACCF,SAASE;YACT,MAAMC,WAAWX,IAAIM,OAAO;YAC5B,IACEK,YACA,CAACF,WACD,CAACV,oBAAoB,YACpB,CAAA,CAACI,SAASC,aAAa,IAAI,CAACO,SAASC,QAAQ,CAACT,SAASC,aAAa,CAAA,GACrE;gBACAO,SAASE,KAAK;YAChB;QACF;IAEF,MAAMC,qBACJ,CAACN,UAAiCC,UAAqB;YACrDD;YACA,IAAIC,WAAWV,oBAAoB,YAAY;gBAC7C;YACF;YAEA,2EAA2E;YAC3E,iCAAiC;YACjCgB,OAAOC,qBAAqB,CAAC;gBAC3Bd,UAAUI,OAAO,EAAEO;YACrB;QACF;IAEF,OAAO;QACLvB,SAASU;QACTiB,mBAAmB;YACjB3B,SAASW;YACTT,YAAYe,iBAAiBf,YAAY;YACzCC,WAAWc,iBACTd,WACA,CAACK,qBAAqB,CAACf,kBAAkBmC,QAAQ;YAEnDxB,WAAWoB,mBAAmBpB,WAAW;YACzCC,UAAUmB,mBACRnB,UACA,CAACG,qBAAqB,CAACf,kBAAkBmC,QAAQ;QAErD;QACAC,eAAe;YACbvB,WAAUwB,KAAK;gBACbxB,UAAUwB;gBACV,IACEA,MAAMC,oBAAoB,MAC1BD,MAAME,GAAG,KAAK,SACdvB,oBAAoB,aACpB;oBACA;gBACF;gBAEA,MAAM,EAAEwB,MAAM,EAAEC,QAAQ,EAAEC,aAAa,EAAE,GAAGL;gBAC5C,MAAMM,WAAWxC,qBAAqBuC,eAAe5B;gBACrD,MAAM8B,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;oBACpB5C,mBAAmB;wBACjB6C;wBACAJ;wBACAK,WAAWN;oBACb;gBACF;YACF;QACF;IACF;AACF"}

package/dist/form/MenuItemInputToggle.js

@@ -38,8 +38,8 @@ const styles = bem("rmd-menu-item-input-toggle");
         if (type === "switch") {
             icon = /*#__PURE__*/ _jsx(SwitchTrack, {
                 style: trackStyle,
-                className: trackClassName,
                 ...trackProps,
+                className: cnb(styles("track"), trackClassName, trackProps?.className),
                 active: checked,
                 ballProps: ballProps,
                 ballStyle: ballStyle,
@@ -89,7 +89,6 @@ const styles = bem("rmd-menu-item-input-toggle");
     }
     return /*#__PURE__*/ _jsx(ListItem, {
         ...remaining,
-        "aria-disabled": disabled || undefined,
         // I'm not actually sure if this is correct
         "aria-checked": indeterminate && checked ? "mixed" : checked,
         id: id,
@@ -106,6 +105,7 @@ const styles = bem("rmd-menu-item-input-toggle");
             type,
             className
         }),
+        disabled: disabled,
         tabIndex: tabIndex,
         leftAddon: leftAddon,
         leftAddonType: leftAddonType,

package/dist/form/MenuItemInputToggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/MenuItemInputToggle.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from \"react\";\nimport { ListItem } from \"../list/ListItem.js\";\nimport {\n  type ListItemAddonPosition,\n  type ListItemAddonType,\n  type ListItemHeight,\n} from \"../list/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  type IndeterminateCheckboxProps,\n  type InputToggleIconProps,\n} from \"./InputToggle.js\";\nimport { InputToggleIcon } from \"./InputToggleIcon.js\";\nimport { SwitchTrack } from \"./SwitchTrack.js\";\nimport { type InputToggleSize } from \"./inputToggleStyles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\nconst styles = bem(\"rmd-menu-item-input-toggle\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface MenuItemInputToggleClassNameOptions {\n  className?: string;\n  type: \"radio\" | \"checkbox\" | \"switch\";\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function menuItemInputToggle(\n  options: MenuItemInputToggleClassNameOptions\n): string {\n  const { className, type } = options;\n  return cnb(\n    `rmd-${type}-menu-item`,\n    styles({ switch: type === \"switch\" }),\n    className\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type MenuItemInputToggleCheckedCallback = (\n  checked: boolean,\n  event: MouseEvent<HTMLLIElement>\n) => void;\n\n/** @remarks \\@since 2.8.0 */\nexport interface BaseMenuItemInputToggleProps\n  extends HTMLAttributes<HTMLLIElement>,\n    InputToggleIconProps {\n  checked: boolean;\n  onCheckedChange: MenuItemInputToggleCheckedCallback;\n\n  /**\n   * @defaultValue `\"menu-item-\" + useId()`\n   */\n  id?: string;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` if the `Menu` should not close when the input toggle is\n   * clicked. This can be useful when interacting with a checkbox group within a\n   * menu or allowing the user to select multiple options before closing the\n   * menu.\n   *\n   * @defaultValue `false`\n   */\n  preventMenuHideOnClick?: boolean;\n\n  /**\n   * This is set to `\"auto\"` by default so the icon shrinks back down to the\n   * default icon size instead of relative to the current font size. You\n   * probably don't want to change this since it'll also modify the height of\n   * the menu item\n   *\n   * @defaultValue `\"auto\"`\n   */\n  size?: InputToggleSize;\n\n  /** @defaultValue `\"auto\"` */\n  height?: ListItemHeight;\n\n  /** @defaultValue `false` */\n  threeLines?: boolean;\n\n  /** @defaultValue `false` */\n  disableTextChildren?: boolean;\n\n  /** @defaultValue `false` */\n  iconAfter?: boolean;\n\n  addon?: ReactNode;\n  addonType?: ListItemAddonType;\n  addonPosition?: ListItemAddonPosition;\n\n  /** @defaultValue `false` */\n  addonForceWrap?: boolean;\n\n  /** @defaultValue `false` */\n  disableAddonCenteredMedia?: boolean;\n}\n\nexport interface MenuItemCheckboxProps\n  extends BaseMenuItemInputToggleProps,\n    IndeterminateCheckboxProps {}\n\nexport type MenuItemRadioProps = BaseMenuItemInputToggleProps;\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Added additional props for styling the track and ball.\n */\nexport interface MenuItemSwitchProps extends BaseMenuItemInputToggleProps {\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n  trackStyle?: CSSProperties;\n  trackClassName?: string;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Updated to be a union of the different props to enforce the\n * correct props based on `type`\n */\nexport type MenuItemInputToggleProps =\n  | (MenuItemCheckboxProps & { type: \"checkbox\" })\n  | (MenuItemRadioProps & { type: \"radio\" })\n  | (MenuItemSwitchProps & { type: \"switch\" });\n\n/**\n * **Client Component**\n *\n * This is a low-level component that should probably not be used externally and\n * instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should\n * be used instead.\n *\n * @see {@link MenuItemCheckbox} for checkbox examples\n * @see {@link MenuItemRadio} for radio examples\n * @see {@link MenuItemSwitch} for switch examples\n * @remarks \\@since 2.8.0\n */\nexport const MenuItemInputToggle = forwardRef<\n  HTMLLIElement,\n  MenuItemInputToggleProps\n>(function MenuItemInputToggle(props, ref) {\n  const {\n    id: propId,\n    type,\n    disabled = false,\n    checked,\n    onCheckedChange,\n    preventMenuHideOnClick = false,\n    onClick = noop,\n    className,\n    tabIndex = -1,\n    children,\n    size = \"auto\",\n    icon: propIcon,\n    iconAfter = false,\n    iconProps,\n    iconStyle,\n    iconClassName,\n    checkedIcon,\n    indeterminate,\n    indeterminateIcon,\n    addon,\n    addonType,\n    addonPosition,\n    addonForceWrap,\n    disableAddonCenteredMedia,\n    ballProps,\n    ballStyle,\n    ballClassName,\n    trackProps,\n    trackStyle,\n    trackClassName,\n    ...remaining\n  } = props as MenuItemSwitchProps &\n    MenuItemCheckboxProps & { type: \"checkbox\" | \"radio\" | \"switch\" };\n  const id = useEnsuredId(propId, \"menu-item\");\n\n  let icon = propIcon;\n  if (typeof propIcon === \"undefined\") {\n    if (type === \"switch\") {\n      icon = (\n        <SwitchTrack\n          style={trackStyle}\n          className={trackClassName}\n          {...trackProps}\n          active={checked}\n          ballProps={ballProps}\n          ballStyle={ballStyle}\n          ballClassName={cnb(styles(\"ball\"), ballClassName)}\n        />\n      );\n    } else {\n      icon = (\n        <InputToggleIcon\n          style={iconStyle}\n          disableEm\n          {...iconProps}\n          className={cnb(styles(\"icon\"), iconClassName, iconProps?.className)}\n          size={size}\n          type={type}\n          checked={checked}\n          disabled={disabled}\n          icon={propIcon}\n          checkedIcon={checkedIcon}\n          indeterminate={indeterminate}\n          indeterminateIcon={indeterminateIcon}\n        />\n      );\n    }\n  }\n\n  let leftAddon: ReactNode;\n  let leftAddonType: ListItemAddonType | undefined;\n  let leftAddonPosition: ListItemAddonPosition | undefined;\n  let leftAddonForceWrap: boolean | undefined;\n  let disableLeftAddonCenteredMedia: boolean | undefined;\n  let rightAddon: ReactNode;\n  let rightAddonType: ListItemAddonType | undefined;\n  let rightAddonPosition: ListItemAddonPosition | undefined;\n  let rightAddonForceWrap: boolean | undefined;\n  let disableRightAddonCenteredMedia: boolean | undefined;\n  if (iconAfter) {\n    leftAddon = addon;\n    leftAddonType = addonType;\n    leftAddonPosition = addonPosition;\n    leftAddonForceWrap = addonForceWrap;\n    disableLeftAddonCenteredMedia = disableAddonCenteredMedia;\n    rightAddon = icon;\n  } else {\n    leftAddon = icon;\n    rightAddon = addon;\n    rightAddonType = addonType;\n    rightAddonPosition = addonPosition;\n    rightAddonForceWrap = addonForceWrap;\n    disableRightAddonCenteredMedia = disableAddonCenteredMedia;\n  }\n\n  return (\n    <ListItem\n      {...remaining}\n      aria-disabled={disabled || undefined}\n      // I'm not actually sure if this is correct\n      aria-checked={indeterminate && checked ? \"mixed\" : checked}\n      id={id}\n      role={type === \"radio\" ? \"menuitemradio\" : \"menuitemcheckbox\"}\n      onClick={(event) => {\n        onClick(event);\n        onCheckedChange(!checked, event);\n\n        if (preventMenuHideOnClick) {\n          event.stopPropagation();\n        }\n      }}\n      ref={ref}\n      className={menuItemInputToggle({ type, className })}\n      tabIndex={tabIndex}\n      leftAddon={leftAddon}\n      leftAddonType={leftAddonType}\n      leftAddonPosition={leftAddonPosition}\n      leftAddonForceWrap={leftAddonForceWrap}\n      disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n      rightAddon={rightAddon}\n      rightAddonType={rightAddonType}\n      rightAddonPosition={rightAddonPosition}\n      rightAddonForceWrap={rightAddonForceWrap}\n      disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n    >\n      {children}\n    </ListItem>\n  );\n});\n"],"names":["cnb","forwardRef","ListItem","useEnsuredId","bem","InputToggleIcon","SwitchTrack","noop","styles","menuItemInputToggle","options","className","type","switch","MenuItemInputToggle","props","ref","id","propId","disabled","checked","onCheckedChange","preventMenuHideOnClick","onClick","tabIndex","children","size","icon","propIcon","iconAfter","iconProps","iconStyle","iconClassName","checkedIcon","indeterminate","indeterminateIcon","addon","addonType","addonPosition","addonForceWrap","disableAddonCenteredMedia","ballProps","ballStyle","ballClassName","trackProps","trackStyle","trackClassName","remaining","style","active","disableEm","leftAddon","leftAddonType","leftAddonPosition","leftAddonForceWrap","disableLeftAddonCenteredMedia","rightAddon","rightAddonType","rightAddonPosition","rightAddonForceWrap","disableRightAddonCenteredMedia","aria-disabled","undefined","aria-checked","role","event","stopPropagation"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/MenuItemInputToggle.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from \"react\";\nimport { ListItem } from \"../list/ListItem.js\";\nimport {\n  type ListItemAddonPosition,\n  type ListItemAddonType,\n  type ListItemHeight,\n} from \"../list/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  type IndeterminateCheckboxProps,\n  type InputToggleIconProps,\n} from \"./InputToggle.js\";\nimport { InputToggleIcon } from \"./InputToggleIcon.js\";\nimport { SwitchTrack } from \"./SwitchTrack.js\";\nimport { type InputToggleSize } from \"./inputToggleStyles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\nconst styles = bem(\"rmd-menu-item-input-toggle\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface MenuItemInputToggleClassNameOptions {\n  className?: string;\n  type: \"radio\" | \"checkbox\" | \"switch\";\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function menuItemInputToggle(\n  options: MenuItemInputToggleClassNameOptions\n): string {\n  const { className, type } = options;\n  return cnb(\n    `rmd-${type}-menu-item`,\n    styles({ switch: type === \"switch\" }),\n    className\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type MenuItemInputToggleCheckedCallback = (\n  checked: boolean,\n  event: MouseEvent<HTMLLIElement>\n) => void;\n\n/** @remarks \\@since 2.8.0 */\nexport interface BaseMenuItemInputToggleProps\n  extends HTMLAttributes<HTMLLIElement>,\n    InputToggleIconProps {\n  checked: boolean;\n  onCheckedChange: MenuItemInputToggleCheckedCallback;\n\n  /**\n   * @defaultValue `\"menu-item-\" + useId()`\n   */\n  id?: string;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` if the `Menu` should not close when the input toggle is\n   * clicked. This can be useful when interacting with a checkbox group within a\n   * menu or allowing the user to select multiple options before closing the\n   * menu.\n   *\n   * @defaultValue `false`\n   */\n  preventMenuHideOnClick?: boolean;\n\n  /**\n   * This is set to `\"auto\"` by default so the icon shrinks back down to the\n   * default icon size instead of relative to the current font size. You\n   * probably don't want to change this since it'll also modify the height of\n   * the menu item\n   *\n   * @defaultValue `\"auto\"`\n   */\n  size?: InputToggleSize;\n\n  /** @defaultValue `\"auto\"` */\n  height?: ListItemHeight;\n\n  /** @defaultValue `false` */\n  threeLines?: boolean;\n\n  /** @defaultValue `false` */\n  disableTextChildren?: boolean;\n\n  /** @defaultValue `false` */\n  iconAfter?: boolean;\n\n  addon?: ReactNode;\n  addonType?: ListItemAddonType;\n  addonPosition?: ListItemAddonPosition;\n\n  /** @defaultValue `false` */\n  addonForceWrap?: boolean;\n\n  /** @defaultValue `false` */\n  disableAddonCenteredMedia?: boolean;\n}\n\nexport interface MenuItemCheckboxProps\n  extends BaseMenuItemInputToggleProps,\n    IndeterminateCheckboxProps {}\n\nexport type MenuItemRadioProps = BaseMenuItemInputToggleProps;\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Added additional props for styling the track and ball.\n */\nexport interface MenuItemSwitchProps extends BaseMenuItemInputToggleProps {\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n  trackStyle?: CSSProperties;\n  trackClassName?: string;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Updated to be a union of the different props to enforce the\n * correct props based on `type`\n */\nexport type MenuItemInputToggleProps =\n  | (MenuItemCheckboxProps & { type: \"checkbox\" })\n  | (MenuItemRadioProps & { type: \"radio\" })\n  | (MenuItemSwitchProps & { type: \"switch\" });\n\n/**\n * **Client Component**\n *\n * This is a low-level component that should probably not be used externally and\n * instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should\n * be used instead.\n *\n * @see {@link MenuItemCheckbox} for checkbox examples\n * @see {@link MenuItemRadio} for radio examples\n * @see {@link MenuItemSwitch} for switch examples\n * @remarks \\@since 2.8.0\n */\nexport const MenuItemInputToggle = forwardRef<\n  HTMLLIElement,\n  MenuItemInputToggleProps\n>(function MenuItemInputToggle(props, ref) {\n  const {\n    id: propId,\n    type,\n    disabled = false,\n    checked,\n    onCheckedChange,\n    preventMenuHideOnClick = false,\n    onClick = noop,\n    className,\n    tabIndex = -1,\n    children,\n    size = \"auto\",\n    icon: propIcon,\n    iconAfter = false,\n    iconProps,\n    iconStyle,\n    iconClassName,\n    checkedIcon,\n    indeterminate,\n    indeterminateIcon,\n    addon,\n    addonType,\n    addonPosition,\n    addonForceWrap,\n    disableAddonCenteredMedia,\n    ballProps,\n    ballStyle,\n    ballClassName,\n    trackProps,\n    trackStyle,\n    trackClassName,\n    ...remaining\n  } = props as MenuItemSwitchProps &\n    MenuItemCheckboxProps & { type: \"checkbox\" | \"radio\" | \"switch\" };\n  const id = useEnsuredId(propId, \"menu-item\");\n\n  let icon = propIcon;\n  if (typeof propIcon === \"undefined\") {\n    if (type === \"switch\") {\n      icon = (\n        <SwitchTrack\n          style={trackStyle}\n          {...trackProps}\n          className={cnb(\n            styles(\"track\"),\n            trackClassName,\n            trackProps?.className\n          )}\n          active={checked}\n          ballProps={ballProps}\n          ballStyle={ballStyle}\n          ballClassName={cnb(styles(\"ball\"), ballClassName)}\n        />\n      );\n    } else {\n      icon = (\n        <InputToggleIcon\n          style={iconStyle}\n          disableEm\n          {...iconProps}\n          className={cnb(styles(\"icon\"), iconClassName, iconProps?.className)}\n          size={size}\n          type={type}\n          checked={checked}\n          disabled={disabled}\n          icon={propIcon}\n          checkedIcon={checkedIcon}\n          indeterminate={indeterminate}\n          indeterminateIcon={indeterminateIcon}\n        />\n      );\n    }\n  }\n\n  let leftAddon: ReactNode;\n  let leftAddonType: ListItemAddonType | undefined;\n  let leftAddonPosition: ListItemAddonPosition | undefined;\n  let leftAddonForceWrap: boolean | undefined;\n  let disableLeftAddonCenteredMedia: boolean | undefined;\n  let rightAddon: ReactNode;\n  let rightAddonType: ListItemAddonType | undefined;\n  let rightAddonPosition: ListItemAddonPosition | undefined;\n  let rightAddonForceWrap: boolean | undefined;\n  let disableRightAddonCenteredMedia: boolean | undefined;\n  if (iconAfter) {\n    leftAddon = addon;\n    leftAddonType = addonType;\n    leftAddonPosition = addonPosition;\n    leftAddonForceWrap = addonForceWrap;\n    disableLeftAddonCenteredMedia = disableAddonCenteredMedia;\n    rightAddon = icon;\n  } else {\n    leftAddon = icon;\n    rightAddon = addon;\n    rightAddonType = addonType;\n    rightAddonPosition = addonPosition;\n    rightAddonForceWrap = addonForceWrap;\n    disableRightAddonCenteredMedia = disableAddonCenteredMedia;\n  }\n\n  return (\n    <ListItem\n      {...remaining}\n      // I'm not actually sure if this is correct\n      aria-checked={indeterminate && checked ? \"mixed\" : checked}\n      id={id}\n      role={type === \"radio\" ? \"menuitemradio\" : \"menuitemcheckbox\"}\n      onClick={(event) => {\n        onClick(event);\n        onCheckedChange(!checked, event);\n\n        if (preventMenuHideOnClick) {\n          event.stopPropagation();\n        }\n      }}\n      ref={ref}\n      className={menuItemInputToggle({ type, className })}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      leftAddon={leftAddon}\n      leftAddonType={leftAddonType}\n      leftAddonPosition={leftAddonPosition}\n      leftAddonForceWrap={leftAddonForceWrap}\n      disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n      rightAddon={rightAddon}\n      rightAddonType={rightAddonType}\n      rightAddonPosition={rightAddonPosition}\n      rightAddonForceWrap={rightAddonForceWrap}\n      disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n    >\n      {children}\n    </ListItem>\n  );\n});\n"],"names":["cnb","forwardRef","ListItem","useEnsuredId","bem","InputToggleIcon","SwitchTrack","noop","styles","menuItemInputToggle","options","className","type","switch","MenuItemInputToggle","props","ref","id","propId","disabled","checked","onCheckedChange","preventMenuHideOnClick","onClick","tabIndex","children","size","icon","propIcon","iconAfter","iconProps","iconStyle","iconClassName","checkedIcon","indeterminate","indeterminateIcon","addon","addonType","addonPosition","addonForceWrap","disableAddonCenteredMedia","ballProps","ballStyle","ballClassName","trackProps","trackStyle","trackClassName","remaining","style","active","disableEm","leftAddon","leftAddonType","leftAddonPosition","leftAddonForceWrap","disableLeftAddonCenteredMedia","rightAddon","rightAddonType","rightAddonPosition","rightAddonForceWrap","disableRightAddonCenteredMedia","aria-checked","role","event","stopPropagation"],"mappings":"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"}

package/dist/form/MenuItemTextField.d.ts

@@ -9,6 +9,8 @@ export interface MenuItemTextFieldProps extends TextFieldProps {
      * Any additional props or a `ref` to apply to the surrounding `<li>` element.
      */
     liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+    /** @defaultValue `true` */
+    stretch?: boolean;
 }
 /**
  * **Client Component**

package/dist/form/MenuItemTextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/MenuItemTextField.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TextField, type TextFieldProps } from \"./TextField.js\";\n\n/**\n * @remarks \\@since 5.0.0\n */\nexport interface MenuItemTextFieldProps extends TextFieldProps {\n  /**\n   * Any additional props or a `ref` to apply to the surrounding `<li>` element.\n   */\n  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n}\n\n/**\n * **Client Component**\n *\n * This is a wrapper for the `TextField` component that can be used within\n * `Menu`s by updating the `onKeyDown` and `onClick` behavior.\n *\n * Note: This is **not** the `TextFieldWithMessage` since the message part is\n * hard to style nicely within menus. You'd most likely want to use another menu\n * for displaying errors.\n *\n * @remarks \\@since 5.0.0\n */\nexport const MenuItemTextField = forwardRef<\n  HTMLInputElement,\n  MenuItemTextFieldProps\n>(function MenuItemTextField(props, ref) {\n  const { liProps, onKeyDown, stretch = true, ...remaining } = props;\n  return (\n    <li\n      role=\"none\"\n      {...liProps}\n      onClick={(event) => {\n        liProps?.onClick?.(event);\n        event.stopPropagation();\n      }}\n      className={cnb(\"rmd-list-item rmd-menu-item\", liProps?.className)}\n    >\n      <TextField\n        {...remaining}\n        ref={ref}\n        stretch={stretch}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          switch (event.key) {\n            case \"Tab\":\n            case \"Escape\":\n            case \" \":\n              // do default behavior\n              break;\n            default:\n              if (event.key.length === 1 || event.currentTarget.value) {\n                event.stopPropagation();\n              }\n          }\n        }}\n      />\n    </li>\n  );\n});\n"],"names":["cnb","forwardRef","TextField","MenuItemTextField","props","ref","liProps","onKeyDown","stretch","remaining","li","role","onClick","event","stopPropagation","className","key","length","currentTarget","value"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AAExD,SAASC,SAAS,QAA6B,iBAAiB;AAYhE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,kCAAoBF,WAG/B,SAASE,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAEC,UAAU,IAAI,EAAE,GAAGC,WAAW,GAAGL;IAC7D,qBACE,KAACM;QACCC,MAAK;QACJ,GAAGL,OAAO;QACXM,SAAS,CAACC;YACRP,SAASM,UAAUC;YACnBA,MAAMC,eAAe;QACvB;QACAC,WAAWf,IAAI,+BAA+BM,SAASS;kBAEvD,cAAA,KAACb;YACE,GAAGO,SAAS;YACbJ,KAAKA;YACLG,SAASA;YACTD,WAAW,CAACM;gBACVN,YAAYM;gBACZ,OAAQA,MAAMG,GAAG;oBACf,KAAK;oBACL,KAAK;oBACL,KAAK;wBAEH;oBACF;wBACE,IAAIH,MAAMG,GAAG,CAACC,MAAM,KAAK,KAAKJ,MAAMK,aAAa,CAACC,KAAK,EAAE;4BACvDN,MAAMC,eAAe;wBACvB;gBACJ;YACF;;;AAIR,GAAG"}
+{"version":3,"sources":["../../src/form/MenuItemTextField.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TextField, type TextFieldProps } from \"./TextField.js\";\n\n/**\n * @remarks \\@since 5.0.0\n */\nexport interface MenuItemTextFieldProps extends TextFieldProps {\n  /**\n   * Any additional props or a `ref` to apply to the surrounding `<li>` element.\n   */\n  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n\n  /** @defaultValue `true` */\n  stretch?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This is a wrapper for the `TextField` component that can be used within\n * `Menu`s by updating the `onKeyDown` and `onClick` behavior.\n *\n * Note: This is **not** the `TextFieldWithMessage` since the message part is\n * hard to style nicely within menus. You'd most likely want to use another menu\n * for displaying errors.\n *\n * @remarks \\@since 5.0.0\n */\nexport const MenuItemTextField = forwardRef<\n  HTMLInputElement,\n  MenuItemTextFieldProps\n>(function MenuItemTextField(props, ref) {\n  const { liProps, onKeyDown, stretch = true, ...remaining } = props;\n  return (\n    <li\n      role=\"none\"\n      {...liProps}\n      onClick={(event) => {\n        liProps?.onClick?.(event);\n        event.stopPropagation();\n      }}\n      className={cnb(\"rmd-list-item rmd-menu-item\", liProps?.className)}\n    >\n      <TextField\n        {...remaining}\n        ref={ref}\n        stretch={stretch}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          switch (event.key) {\n            case \"Tab\":\n            case \"Escape\":\n            case \" \":\n              // do default behavior\n              break;\n            default:\n              if (event.key.length === 1 || event.currentTarget.value) {\n                event.stopPropagation();\n              }\n          }\n        }}\n      />\n    </li>\n  );\n});\n"],"names":["cnb","forwardRef","TextField","MenuItemTextField","props","ref","liProps","onKeyDown","stretch","remaining","li","role","onClick","event","stopPropagation","className","key","length","currentTarget","value"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AAExD,SAASC,SAAS,QAA6B,iBAAiB;AAehE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,kCAAoBF,WAG/B,SAASE,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAEC,UAAU,IAAI,EAAE,GAAGC,WAAW,GAAGL;IAC7D,qBACE,KAACM;QACCC,MAAK;QACJ,GAAGL,OAAO;QACXM,SAAS,CAACC;YACRP,SAASM,UAAUC;YACnBA,MAAMC,eAAe;QACvB;QACAC,WAAWf,IAAI,+BAA+BM,SAASS;kBAEvD,cAAA,KAACb;YACE,GAAGO,SAAS;YACbJ,KAAKA;YACLG,SAASA;YACTD,WAAW,CAACM;gBACVN,YAAYM;gBACZ,OAAQA,MAAMG,GAAG;oBACf,KAAK;oBACL,KAAK;oBACL,KAAK;wBAEH;oBACF;wBACE,IAAIH,MAAMG,GAAG,CAACC,MAAM,KAAK,KAAKJ,MAAMK,aAAa,CAACC,KAAK,EAAE;4BACvDN,MAAMC,eAAe;wBACvB;gBACJ;YACF;;;AAIR,GAAG"}

package/dist/form/Slider.d.ts

@@ -74,6 +74,24 @@ export interface SliderProps extends BaseSliderProps, SliderState {
      * be useful for applying additional styling.
      */
     thumbProps?: HTMLAttributes<HTMLSpanElement>;
+    /**
+     * This can be used to update the discrete slider's tooltip props.
+     *
+     * @example
+     * Custom Styles
+     * ```tsx
+     * <Slider
+     *   {...slider}
+     *   discrete
+     *   getTooltipProps={(value) => ({
+     *     className: cssUtils({
+     *       backgroundColor: value < 30 ? "warning" : undefined,
+     *     }),
+     *   })}
+     * />
+     * ```
+     */
+    getTooltipProps?(value: number): Partial<TooltipProps>;
     /**
      * This can be used to update the discrete slider's value tooltip.
      *
@@ -150,6 +168,24 @@ export interface RangeSliderProps extends BaseSliderProps, RangeSliderState {
      * accessibility.
      */
     maxThumbLabelledBy?: string;
+    /**
+     * This can be used to update the discrete slider's tooltip props.
+     *
+     * @example
+     * Custom Styles
+     * ```tsx
+     * <Slider
+     *   {...slider}
+     *   discrete
+     *   getTooltipProps={(value, isFirstThumb) => ({
+     *     className: cssUtils({
+     *       backgroundColor: value < 30 && isFirstThumb ? "warning" : undefined,
+     *     }),
+     *   })}
+     * />
+     * ```
+     */
+    getTooltipProps?(value: number, isFirstThumb: boolean): Partial<TooltipProps>;
     /**
      * This can be used to update the discrete slider's value tooltip.
      *
@@ -157,12 +193,12 @@ export interface RangeSliderProps extends BaseSliderProps, RangeSliderState {
      * More Value Information
      * ```tsx
      * <Slider
-     *   {...slider}
+     *   {...rangeSlider}
      *   discrete
-     *   getTooltipChildren={(value, isMinValue) => (
+     *   getTooltipChildren={(value, isFirstThumb) => (
      *     <TextIconSpacing
-     *       icon={isMinValue ? <FavoriteIcon /> : <CloseIcon /}
-     *       iconAfter={!isMinValue}
+     *       icon={isFirstThumb ? <FavoriteIcon /> : <CloseIcon /}
+     *       iconAfter={!isFirstValue}
      *     >
      *       {value}
      *     </TextIconSpacing>
@@ -174,7 +210,7 @@ export interface RangeSliderProps extends BaseSliderProps, RangeSliderState {
      *
      * @defaultValue `(value) => value`
      */
-    getTooltipChildren?(value: number, isMinValue: boolean): ReactNode;
+    getTooltipChildren?(value: number, isFirstThumb: boolean): ReactNode;
 }
 /**
  * **Client Component**

package/dist/form/Slider.js

@@ -15,7 +15,7 @@ const noop = ()=>{
 // do nothing
 };
 export function Slider(props) {
-    const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id: propId, min = 0, max = 100, step = 1, jump: propJump, vertical = false, discrete = false, disabled = false, getValueText = emptyString, children, marks = false, value, setValue, rangeValue, setRangeValue, trackProps, thumbProps, minThumbProps, minThumbLabel, minThumbLabelledBy, maxThumbProps, maxThumbLabel, maxThumbLabelledBy, tooltipProps, containerRef, getMarkProps = noop, getMarkLabelProps = noop, tooltipVisibility = "auto", getTooltipChildren = identity, disableSmoothDragging = !!marks, ...remaining } = props;
+    const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id: propId, min = 0, max = 100, step = 1, jump: propJump, vertical = false, discrete = false, disabled = false, getValueText = emptyString, children, marks = false, value, setValue, rangeValue, setRangeValue, trackProps, thumbProps, minThumbProps, minThumbLabel, minThumbLabelledBy, maxThumbProps, maxThumbLabel, maxThumbLabelledBy, tooltipProps, containerRef, getMarkProps = noop, getMarkLabelProps = noop, tooltipVisibility = "auto", getTooltipProps = noop, getTooltipChildren = identity, disableSmoothDragging = !!marks, ...remaining } = props;
     const jump = getJumpValue({
         min,
         max,
@@ -156,6 +156,7 @@ export function Slider(props) {
         vertical,
         getValueText,
         tooltipProps,
+        getTooltipProps,
         getTooltipChildren,
         tooltipVisibility,
         disableSmoothDragging

package/dist/form/Slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Slider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { useDraggable } from \"../draggable/useDraggable.js\";\nimport { type TooltipProps } from \"../tooltip/Tooltip.js\";\nimport {\n  type LabelRequiredForA11y,\n  type PropsWithRef,\n  type UseStateSetter,\n} from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { identity } from \"../utils/identity.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\nimport { SliderContainer, type SliderAddonProps } from \"./SliderContainer.js\";\nimport {\n  SliderThumb,\n  type SliderThumbPresentation,\n  type SliderThumbProps,\n} from \"./SliderThumb.js\";\nimport { SliderTrack } from \"./SliderTrack.js\";\nimport {\n  SliderValueMarks,\n  type SliderMarksOptions,\n} from \"./SliderValueMarks.js\";\nimport { getJumpValue } from \"./sliderUtils.js\";\nimport { type RangeSliderState } from \"./useRangeSlider.js\";\nimport { type SliderState, type SliderValueOptions } from \"./useSlider.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-slider-color\"?: string;\n    \"--rmd-slider-active-color\"?: string;\n    \"--rmd-slider-inactive-color\"?: string;\n    \"--rmd-slider-size\"?: string | number;\n    \"--rmd-slider-active-size\"?: string | number;\n    \"--rmd-slider-inactive-size\"?: string | number;\n    \"--rmd-slider-vertical-size\"?: string | number;\n    \"--rmd-slider-offset-1\"?: string;\n    \"--rmd-slider-offset-2\"?: string;\n    \"--rmd-slider-tooltip-scale\"?: string | number;\n    \"--rmd-slider-tooltip-translate\"?: string | number;\n    \"--rmd-slider-mark-offset\"?: string;\n  }\n}\n\nconst emptyString = (): string => \"\";\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 2.5.0\n */\nexport interface BaseSliderProps\n  extends HTMLAttributes<HTMLDivElement>,\n    SliderThumbPresentation,\n    SliderValueOptions,\n    SliderAddonProps,\n    SliderMarksOptions {\n  /**\n   * This can be used to apply a ref to the container element since this\n   * component does not use `forwardRef`.\n   */\n  containerRef?: Ref<HTMLDivElement>;\n\n  /**\n   * The amount to jump the slider's value when the `PageUp` or `PageDown`\n   * key is pressed.\n   *\n   * The default value is 1/10th of the range.\n   *\n   * @defaultValue `(numberOfSteps / 10) * step`\n   */\n  jump?: number;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  vertical?: boolean;\n\n  /**\n   * This can be used to apply custom styles or a `ref` to the track element if\n   * needed.\n   */\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n\n  /**\n   * This can be used to configure any additional tooltip props like the\n   * CSS transition `classNames`, styles, etc.\n   *\n   * This will only be used when {@link discrete} is `true`.\n   *\n   * Note: The `position` will always be `\"above\"` for horizontal sliders and\n   * `\"left\"` for vertical sliders.\n   */\n  tooltipProps?: Omit<Partial<TooltipProps>, \"position\">;\n}\n\n/**\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 Only requires `value` and `setValue` props instead of all the\n * slider controls.\n * \\@since 6.0.0 The `thumbLabel` and `thumbLabelledBy` props were removed. Use\n * the `aria-label` or `aria-labelledby` props instead.\n */\nexport interface SliderProps extends BaseSliderProps, SliderState {\n  /**\n   * Any additional props that should be provided to the thumb element. This can\n   * be useful for applying additional styling.\n   */\n  thumbProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * This can be used to update the discrete slider's value tooltip.\n   *\n   * @example\n   * More Value Information\n   * ```tsx\n   * <Slider\n   *   {...slider}\n   *   discrete\n   *   getTooltipChildren={(value) => (\n   *     <TextIconSpacing icon={<FavoriteIcon />}>\n   *       {value}\n   *     </TextIconSpacing>\n   *   )}\n   * />\n   * ```\n   *\n   * This will only be used when {@link discrete} is `true`.\n   *\n   * @defaultValue `(value) => value`\n   */\n  getTooltipChildren?(value: number): ReactNode;\n}\n\n/**\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 Only requires `rangeValue` and `setRangeValue` props instead of\n * all the slider controls.\n * \\@since 6.0.0 The `thumb1Label`, `thumb1LabelledBy`, `thumb1Props`,\n * `thumb2Label`, `thumb2LabelledBy` and `thumb2Props` were renamed to\n * `minThumbLabel`, `minThumbLabelledBy`, `minThumbProps`, `maxThumbLabel`,\n * `maxThumbLabelledBy`, and `maxThumbProps` respectively.\n */\nexport interface RangeSliderProps extends BaseSliderProps, RangeSliderState {\n  /**\n   * Any additional props that should be provided to the min value thumb\n   * element. This can be useful for applying additional styling.\n   */\n  minThumbProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * Any additional props that should be provided to the max value thumb\n   * element. This can be useful for applying additional styling.\n   */\n  maxThumbProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * The `aria-label` to apply to the min value.\n   *\n   * Note: Either this prop or the {@link minThumbLabelledBy} are required for\n   * accessibility.\n   *\n   * @defaultValue `\"Min\"`\n   */\n  minThumbLabel?: string;\n\n  /**\n   * Set this to an element's id that labels the min value.\n   *\n   * Note: Either this prop or the {@link minThumbLabel} are required for\n   * accessibility.\n   */\n  minThumbLabelledBy?: string;\n\n  /**\n   * The `aria-label` to apply to the max value.\n   *\n   * Note: Either this prop or the {@link maxThumbLabelledBy} are required for\n   * accessibility.\n   *\n   * @defaultValue `\"Max\"`\n   */\n  maxThumbLabel?: string;\n\n  /**\n   * Set this to an element's id that labels the max value.\n   *\n   * Note: Either this prop or the {@link maxThumbLabel} are required for\n   * accessibility.\n   */\n  maxThumbLabelledBy?: string;\n\n  /**\n   * This can be used to update the discrete slider's value tooltip.\n   *\n   * @example\n   * More Value Information\n   * ```tsx\n   * <Slider\n   *   {...slider}\n   *   discrete\n   *   getTooltipChildren={(value, isMinValue) => (\n   *     <TextIconSpacing\n   *       icon={isMinValue ? <FavoriteIcon /> : <CloseIcon /}\n   *       iconAfter={!isMinValue}\n   *     >\n   *       {value}\n   *     </TextIconSpacing>\n   *   )}\n   * />\n   * ```\n   *\n   * This will only be used when {@link discrete} is `true`.\n   *\n   * @defaultValue `(value) => value`\n   */\n  getTooltipChildren?(value: number, isMinValue: boolean): ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Form, Slider, useSlider } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const slider = useSlider({\n *     // these are the defaults and can be changed\n *     min: 0,\n *     max: 100,\n *     step: 1,\n *     defaultValue: 50,\n *   });\n *\n *   // if you need access to the current value or manually change the value\n *   // yourself.\n *   const { value, setValue } = slider;\n *\n *   return (\n *     <Form>\n *       <Slider {...slider} aria-label=\"Volume\" />\n *     </Form>\n *   );\n * }\n * ```\n *\n * @example\n * Range Slider Example\n * ```tsx\n * import { Fieldset, Form, Legend, Slider, useRangeSlider } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useId } from \"react\";\n *\n * function Example(): ReactElement {\n *   const slider = useRangeSlider({\n *     // these are the defaults and can be changed\n *     min: 0,\n *     max: 100,\n *     step: 1,\n *     defaultValue: [0, 100],\n *   });\n *\n *   // if you need access to the current value or manually change the value\n *   // yourself.\n *   const { rangeValue, setRangeValue } = slider;\n *   const [minPrice, maxPrice] = rangeValue;\n *\n *   return (\n *     <Form>\n *       <Fieldset>\n *         <Legend>Price Range</Legend>\n *         <Slider {...slider} />\n *       </Fieldset>\n *     </Form>\n *   );\n * }\n * ```\n *\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 The `Slider` and `RangeSlider` have been combined into the\n * single `Slider` component and removed the `label` support.\n * \\@since 6.0.0 Each thumb includes an invisible `<input type=\"range\">` instead\n * of an `<input type=\"hidden\">`.\n */\nexport function Slider(props: LabelRequiredForA11y<SliderProps>): ReactElement;\nexport function Slider(props: RangeSliderProps): ReactElement;\nexport function Slider(\n  props: LabelRequiredForA11y<SliderProps> | RangeSliderProps\n): ReactElement {\n  const {\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    id: propId,\n    min = 0,\n    max = 100,\n    step = 1,\n    jump: propJump,\n    vertical = false,\n    discrete = false,\n    disabled = false,\n    getValueText = emptyString,\n    children,\n    marks = false,\n    value,\n    setValue,\n    rangeValue,\n    setRangeValue,\n    trackProps,\n    thumbProps,\n    minThumbProps,\n    minThumbLabel,\n    minThumbLabelledBy,\n    maxThumbProps,\n    maxThumbLabel,\n    maxThumbLabelledBy,\n    tooltipProps,\n    containerRef,\n    getMarkProps = noop,\n    getMarkLabelProps = noop,\n    tooltipVisibility = \"auto\",\n    getTooltipChildren = identity,\n    disableSmoothDragging = !!marks,\n    ...remaining\n  } = props as SliderProps & RangeSliderProps;\n\n  const jump = getJumpValue({ min, max, step, jump: propJump });\n  const isRangeSlider = typeof value !== \"number\";\n\n  const thumb1Id = useEnsuredId(propId, \"slider\");\n  const thumb2Id = `${thumb1Id}-2`;\n  const thumb1Ref = useRef<HTMLSpanElement>(null);\n  const thumb2Ref = useRef<HTMLSpanElement>(null);\n\n  let thumb1Max = max;\n  let thumb2Min = min;\n  let thumb1Label: string | undefined;\n  let thumb1LabelledBy: string | undefined;\n  let thumb2Label: string | undefined;\n  let thumb2LabelledBy: string | undefined;\n  let thumb1Value: number;\n  let thumb2Value: number;\n  let setThumb1Value: UseStateSetter<number>;\n  let setThumb2Value: UseStateSetter<number>;\n  if (!isRangeSlider) {\n    thumb1Value = value;\n    setThumb1Value = setValue;\n    thumb2Value = max;\n    setThumb2Value = noop;\n    thumb1Label = ariaLabel;\n    thumb1LabelledBy = ariaLabelledBy;\n  } else {\n    thumb1LabelledBy = minThumbLabelledBy;\n    thumb1Label = minThumbLabel || (minThumbLabelledBy ? undefined : \"Min\");\n    thumb2LabelledBy = maxThumbLabelledBy;\n    thumb2Label = maxThumbLabel || (maxThumbLabelledBy ? undefined : \"max\");\n\n    [thumb1Value, thumb2Value] = rangeValue;\n\n    thumb1Max = thumb2Value - step;\n    thumb2Min = thumb1Value + step;\n\n    setThumb1Value = (valueOrSetter) => {\n      setRangeValue((prevRangeValue) => {\n        const value =\n          typeof valueOrSetter === \"number\"\n            ? valueOrSetter\n            : valueOrSetter(prevRangeValue[0]);\n\n        return [value, prevRangeValue[1]];\n      });\n    };\n    setThumb2Value = (valueOrSetter) => {\n      setRangeValue((prevRangeValue) => {\n        const value =\n          typeof valueOrSetter === \"number\"\n            ? valueOrSetter\n            : valueOrSetter(prevRangeValue[1]);\n\n        return [prevRangeValue[0], value];\n      });\n    };\n  }\n\n  const [thumb1Dragging, setThumb1Dragging] = useState(false);\n  const {\n    onKeyDown: thumb1OnKeyDown,\n    onMouseUp: thumb1OnMouseUp,\n    onMouseDown: thumb1OnMouseDown,\n    onMouseMove: thumb1OnMouseMove,\n    onTouchStart: thumb1OnTouchStart,\n    onTouchMove: thumb1OnTouchMove,\n    dragPercentage: thumb1DragPercentage,\n    draggableRef: thumb1DraggableRef,\n  } = useDraggable({\n    ref: thumb1Ref,\n    min,\n    max: thumb1Max,\n    rangeMax: max,\n    step,\n    value: thumb1Value,\n    setValue: setThumb1Value,\n    dragging: thumb1Dragging,\n    setDragging: setThumb1Dragging,\n    disabled,\n    vertical,\n    withinOffsetParent: true,\n    disableDraggingCursorClassName: true,\n    onKeyDown(event) {\n      switch (event.key) {\n        case \"PageUp\":\n          event.preventDefault();\n          event.stopPropagation();\n          setThumb1Value((prevValue) =>\n            withinRange({\n              min,\n              max: thumb1Max,\n              value: prevValue + jump,\n            })\n          );\n          break;\n        case \"PageDown\":\n          event.preventDefault();\n          event.stopPropagation();\n          setThumb1Value((prevValue) =>\n            withinRange({\n              min,\n              max: thumb1Max,\n              value: prevValue - jump,\n            })\n          );\n          break;\n      }\n    },\n  });\n\n  const [thumb2Dragging, setThumb2Dragging] = useState(false);\n  const {\n    onKeyDown: thumb2OnKeyDown,\n    onMouseUp: thumb2OnMouseUp,\n    onMouseDown: thumb2OnMouseDown,\n    onMouseMove: thumb2OnMouseMove,\n    onTouchStart: thumb2OnTouchStart,\n    onTouchMove: thumb2OnTouchMove,\n    dragPercentage: thumb2DragPercentage,\n    draggableRef: thumb2DraggableRef,\n  } = useDraggable({\n    ref: thumb2Ref,\n    min: thumb2Min,\n    max,\n    rangeMin: min,\n    step,\n    value: thumb2Value,\n    setValue: setThumb2Value,\n    dragging: thumb2Dragging,\n    setDragging: setThumb2Dragging,\n    vertical,\n    disabled,\n    withinOffsetParent: true,\n    disableDraggingCursorClassName: true,\n    onKeyDown(event) {\n      switch (event.key) {\n        case \"PageUp\":\n          event.preventDefault();\n          event.stopPropagation();\n          setThumb2Value((prevValue) =>\n            withinRange({\n              min: thumb2Min,\n              max,\n              value: prevValue + jump,\n            })\n          );\n          break;\n        case \"PageDown\":\n          event.preventDefault();\n          event.stopPropagation();\n          setThumb2Value((prevValue) =>\n            withinRange({\n              min: thumb2Min,\n              max,\n              value: prevValue - jump,\n            })\n          );\n          break;\n      }\n    },\n  });\n\n  const dragging = thumb1Dragging || thumb2Dragging;\n  const sharedThumbProps = {\n    step,\n    animate: !dragging,\n    discrete,\n    disabled,\n    vertical,\n    getValueText,\n    tooltipProps,\n    getTooltipChildren,\n    tooltipVisibility,\n    disableSmoothDragging,\n  } as const satisfies Partial<SliderThumbProps>;\n\n  return (\n    <SliderContainer {...remaining} ref={containerRef} vertical={vertical}>\n      <SliderTrack\n        {...trackProps}\n        min={min}\n        max={max}\n        thumb1Ref={thumb1Ref}\n        thumb1Value={thumb1Value}\n        thumb1Dragging={!disableSmoothDragging && thumb1Dragging}\n        thumb1DragPercentage={thumb1DragPercentage}\n        thumb1OnMouseUp={thumb1OnMouseUp}\n        thumb1OnMouseDown={thumb1OnMouseDown}\n        thumb1OnMouseMove={thumb1OnMouseMove}\n        thumb1OnTouchStart={thumb1OnTouchStart}\n        thumb1OnTouchMove={thumb1OnTouchMove}\n        thumb2Ref={thumb2Ref}\n        thumb2Value={thumb2Value}\n        thumb2Dragging={!disableSmoothDragging && thumb2Dragging}\n        thumb2DragPercentage={thumb2DragPercentage}\n        thumb2OnMouseUp={thumb2OnMouseUp}\n        thumb2OnMouseDown={thumb2OnMouseDown}\n        thumb2OnMouseMove={thumb2OnMouseMove}\n        thumb2OnTouchStart={thumb2OnTouchStart}\n        thumb2OnTouchMove={thumb2OnTouchMove}\n        animate={!disableSmoothDragging && !dragging}\n        disabled={disabled}\n        vertical={vertical}\n        isRangeSlider={isRangeSlider}\n      >\n        <SliderThumb\n          aria-label={thumb1Label as string}\n          aria-labelledby={thumb1LabelledBy}\n          id={thumb1Id}\n          {...thumbProps}\n          {...minThumbProps}\n          {...sharedThumbProps}\n          ref={thumb1DraggableRef}\n          min={min}\n          max={thumb1Max}\n          value={thumb1Value}\n          index={1}\n          active={thumb1Dragging}\n          onChange={(event) =>\n            setThumb1Value(event.currentTarget.valueAsNumber)\n          }\n          onKeyDown={thumb1OnKeyDown}\n        />\n        {isRangeSlider && (\n          <SliderThumb\n            aria-label={thumb2Label as string}\n            aria-labelledby={thumb2LabelledBy}\n            id={thumb2Id}\n            {...maxThumbProps}\n            {...sharedThumbProps}\n            ref={thumb2DraggableRef}\n            min={thumb2Min}\n            max={max}\n            value={thumb2Value}\n            index={2}\n            active={thumb2Dragging}\n            onChange={(event) =>\n              setThumb2Value(event.currentTarget.valueAsNumber)\n            }\n            onKeyDown={thumb2OnKeyDown}\n          />\n        )}\n        {marks && (\n          <SliderValueMarks\n            min={min}\n            max={max}\n            step={step}\n            marks={marks}\n            vertical={vertical}\n            thumb1Value={thumb1Value}\n            thumb2Value={thumb2Value}\n            isRangeSlider={isRangeSlider}\n            getMarkProps={getMarkProps}\n            getMarkLabelProps={getMarkLabelProps}\n          />\n        )}\n        {children}\n      </SliderTrack>\n    </SliderContainer>\n  );\n}\n"],"names":["useRef","useState","useDraggable","useEnsuredId","identity","withinRange","SliderContainer","SliderThumb","SliderTrack","SliderValueMarks","getJumpValue","emptyString","noop","Slider","props","ariaLabel","ariaLabelledBy","id","propId","min","max","step","jump","propJump","vertical","discrete","disabled","getValueText","children","marks","value","setValue","rangeValue","setRangeValue","trackProps","thumbProps","minThumbProps","minThumbLabel","minThumbLabelledBy","maxThumbProps","maxThumbLabel","maxThumbLabelledBy","tooltipProps","containerRef","getMarkProps","getMarkLabelProps","tooltipVisibility","getTooltipChildren","disableSmoothDragging","remaining","isRangeSlider","thumb1Id","thumb2Id","thumb1Ref","thumb2Ref","thumb1Max","thumb2Min","thumb1Label","thumb1LabelledBy","thumb2Label","thumb2LabelledBy","thumb1Value","thumb2Value","setThumb1Value","setThumb2Value","undefined","valueOrSetter","prevRangeValue","thumb1Dragging","setThumb1Dragging","onKeyDown","thumb1OnKeyDown","onMouseUp","thumb1OnMouseUp","onMouseDown","thumb1OnMouseDown","onMouseMove","thumb1OnMouseMove","onTouchStart","thumb1OnTouchStart","onTouchMove","thumb1OnTouchMove","dragPercentage","thumb1DragPercentage","draggableRef","thumb1DraggableRef","ref","rangeMax","dragging","setDragging","withinOffsetParent","disableDraggingCursorClassName","event","key","preventDefault","stopPropagation","prevValue","thumb2Dragging","setThumb2Dragging","thumb2OnKeyDown","thumb2OnMouseUp","thumb2OnMouseDown","thumb2OnMouseMove","thumb2OnTouchStart","thumb2OnTouchMove","thumb2DragPercentage","thumb2DraggableRef","rangeMin","sharedThumbProps","animate","aria-label","aria-labelledby","index","active","onChange","currentTarget","valueAsNumber"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/Slider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { useDraggable } from \"../draggable/useDraggable.js\";\nimport { type TooltipProps } from \"../tooltip/Tooltip.js\";\nimport {\n  type LabelRequiredForA11y,\n  type PropsWithRef,\n  type UseStateSetter,\n} from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { identity } from \"../utils/identity.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\nimport { SliderContainer, type SliderAddonProps } from \"./SliderContainer.js\";\nimport {\n  SliderThumb,\n  type SliderThumbPresentation,\n  type SliderThumbProps,\n} from \"./SliderThumb.js\";\nimport { SliderTrack } from \"./SliderTrack.js\";\nimport {\n  SliderValueMarks,\n  type SliderMarksOptions,\n} from \"./SliderValueMarks.js\";\nimport { getJumpValue } from \"./sliderUtils.js\";\nimport { type RangeSliderState } from \"./useRangeSlider.js\";\nimport { type SliderState, type SliderValueOptions } from \"./useSlider.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-slider-color\"?: string;\n    \"--rmd-slider-active-color\"?: string;\n    \"--rmd-slider-inactive-color\"?: string;\n    \"--rmd-slider-size\"?: string | number;\n    \"--rmd-slider-active-size\"?: string | number;\n    \"--rmd-slider-inactive-size\"?: string | number;\n    \"--rmd-slider-vertical-size\"?: string | number;\n    \"--rmd-slider-offset-1\"?: string;\n    \"--rmd-slider-offset-2\"?: string;\n    \"--rmd-slider-tooltip-scale\"?: string | number;\n    \"--rmd-slider-tooltip-translate\"?: string | number;\n    \"--rmd-slider-mark-offset\"?: string;\n  }\n}\n\nconst emptyString = (): string => \"\";\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 2.5.0\n */\nexport interface BaseSliderProps\n  extends HTMLAttributes<HTMLDivElement>,\n    SliderThumbPresentation,\n    SliderValueOptions,\n    SliderAddonProps,\n    SliderMarksOptions {\n  /**\n   * This can be used to apply a ref to the container element since this\n   * component does not use `forwardRef`.\n   */\n  containerRef?: Ref<HTMLDivElement>;\n\n  /**\n   * The amount to jump the slider's value when the `PageUp` or `PageDown`\n   * key is pressed.\n   *\n   * The default value is 1/10th of the range.\n   *\n   * @defaultValue `(numberOfSteps / 10) * step`\n   */\n  jump?: number;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  vertical?: boolean;\n\n  /**\n   * This can be used to apply custom styles or a `ref` to the track element if\n   * needed.\n   */\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n\n  /**\n   * This can be used to configure any additional tooltip props like the\n   * CSS transition `classNames`, styles, etc.\n   *\n   * This will only be used when {@link discrete} is `true`.\n   *\n   * Note: The `position` will always be `\"above\"` for horizontal sliders and\n   * `\"left\"` for vertical sliders.\n   */\n  tooltipProps?: Omit<Partial<TooltipProps>, \"position\">;\n}\n\n/**\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 Only requires `value` and `setValue` props instead of all the\n * slider controls.\n * \\@since 6.0.0 The `thumbLabel` and `thumbLabelledBy` props were removed. Use\n * the `aria-label` or `aria-labelledby` props instead.\n */\nexport interface SliderProps extends BaseSliderProps, SliderState {\n  /**\n   * Any additional props that should be provided to the thumb element. This can\n   * be useful for applying additional styling.\n   */\n  thumbProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * This can be used to update the discrete slider's tooltip props.\n   *\n   * @example\n   * Custom Styles\n   * ```tsx\n   * <Slider\n   *   {...slider}\n   *   discrete\n   *   getTooltipProps={(value) => ({\n   *     className: cssUtils({\n   *       backgroundColor: value < 30 ? \"warning\" : undefined,\n   *     }),\n   *   })}\n   * />\n   * ```\n   */\n  getTooltipProps?(value: number): Partial<TooltipProps>;\n\n  /**\n   * This can be used to update the discrete slider's value tooltip.\n   *\n   * @example\n   * More Value Information\n   * ```tsx\n   * <Slider\n   *   {...slider}\n   *   discrete\n   *   getTooltipChildren={(value) => (\n   *     <TextIconSpacing icon={<FavoriteIcon />}>\n   *       {value}\n   *     </TextIconSpacing>\n   *   )}\n   * />\n   * ```\n   *\n   * This will only be used when {@link discrete} is `true`.\n   *\n   * @defaultValue `(value) => value`\n   */\n  getTooltipChildren?(value: number): ReactNode;\n}\n\n/**\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 Only requires `rangeValue` and `setRangeValue` props instead of\n * all the slider controls.\n * \\@since 6.0.0 The `thumb1Label`, `thumb1LabelledBy`, `thumb1Props`,\n * `thumb2Label`, `thumb2LabelledBy` and `thumb2Props` were renamed to\n * `minThumbLabel`, `minThumbLabelledBy`, `minThumbProps`, `maxThumbLabel`,\n * `maxThumbLabelledBy`, and `maxThumbProps` respectively.\n */\nexport interface RangeSliderProps extends BaseSliderProps, RangeSliderState {\n  /**\n   * Any additional props that should be provided to the min value thumb\n   * element. This can be useful for applying additional styling.\n   */\n  minThumbProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * Any additional props that should be provided to the max value thumb\n   * element. This can be useful for applying additional styling.\n   */\n  maxThumbProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * The `aria-label` to apply to the min value.\n   *\n   * Note: Either this prop or the {@link minThumbLabelledBy} are required for\n   * accessibility.\n   *\n   * @defaultValue `\"Min\"`\n   */\n  minThumbLabel?: string;\n\n  /**\n   * Set this to an element's id that labels the min value.\n   *\n   * Note: Either this prop or the {@link minThumbLabel} are required for\n   * accessibility.\n   */\n  minThumbLabelledBy?: string;\n\n  /**\n   * The `aria-label` to apply to the max value.\n   *\n   * Note: Either this prop or the {@link maxThumbLabelledBy} are required for\n   * accessibility.\n   *\n   * @defaultValue `\"Max\"`\n   */\n  maxThumbLabel?: string;\n\n  /**\n   * Set this to an element's id that labels the max value.\n   *\n   * Note: Either this prop or the {@link maxThumbLabel} are required for\n   * accessibility.\n   */\n  maxThumbLabelledBy?: string;\n\n  /**\n   * This can be used to update the discrete slider's tooltip props.\n   *\n   * @example\n   * Custom Styles\n   * ```tsx\n   * <Slider\n   *   {...slider}\n   *   discrete\n   *   getTooltipProps={(value, isFirstThumb) => ({\n   *     className: cssUtils({\n   *       backgroundColor: value < 30 && isFirstThumb ? \"warning\" : undefined,\n   *     }),\n   *   })}\n   * />\n   * ```\n   */\n  getTooltipProps?(value: number, isFirstThumb: boolean): Partial<TooltipProps>;\n\n  /**\n   * This can be used to update the discrete slider's value tooltip.\n   *\n   * @example\n   * More Value Information\n   * ```tsx\n   * <Slider\n   *   {...rangeSlider}\n   *   discrete\n   *   getTooltipChildren={(value, isFirstThumb) => (\n   *     <TextIconSpacing\n   *       icon={isFirstThumb ? <FavoriteIcon /> : <CloseIcon /}\n   *       iconAfter={!isFirstValue}\n   *     >\n   *       {value}\n   *     </TextIconSpacing>\n   *   )}\n   * />\n   * ```\n   *\n   * This will only be used when {@link discrete} is `true`.\n   *\n   * @defaultValue `(value) => value`\n   */\n  getTooltipChildren?(value: number, isFirstThumb: boolean): ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Form, Slider, useSlider } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const slider = useSlider({\n *     // these are the defaults and can be changed\n *     min: 0,\n *     max: 100,\n *     step: 1,\n *     defaultValue: 50,\n *   });\n *\n *   // if you need access to the current value or manually change the value\n *   // yourself.\n *   const { value, setValue } = slider;\n *\n *   return (\n *     <Form>\n *       <Slider {...slider} aria-label=\"Volume\" />\n *     </Form>\n *   );\n * }\n * ```\n *\n * @example\n * Range Slider Example\n * ```tsx\n * import { Fieldset, Form, Legend, Slider, useRangeSlider } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useId } from \"react\";\n *\n * function Example(): ReactElement {\n *   const slider = useRangeSlider({\n *     // these are the defaults and can be changed\n *     min: 0,\n *     max: 100,\n *     step: 1,\n *     defaultValue: [0, 100],\n *   });\n *\n *   // if you need access to the current value or manually change the value\n *   // yourself.\n *   const { rangeValue, setRangeValue } = slider;\n *   const [minPrice, maxPrice] = rangeValue;\n *\n *   return (\n *     <Form>\n *       <Fieldset>\n *         <Legend>Price Range</Legend>\n *         <Slider {...slider} />\n *       </Fieldset>\n *     </Form>\n *   );\n * }\n * ```\n *\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 The `Slider` and `RangeSlider` have been combined into the\n * single `Slider` component and removed the `label` support.\n * \\@since 6.0.0 Each thumb includes an invisible `<input type=\"range\">` instead\n * of an `<input type=\"hidden\">`.\n */\nexport function Slider(props: LabelRequiredForA11y<SliderProps>): ReactElement;\nexport function Slider(props: RangeSliderProps): ReactElement;\nexport function Slider(\n  props: LabelRequiredForA11y<SliderProps> | RangeSliderProps\n): ReactElement {\n  const {\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    id: propId,\n    min = 0,\n    max = 100,\n    step = 1,\n    jump: propJump,\n    vertical = false,\n    discrete = false,\n    disabled = false,\n    getValueText = emptyString,\n    children,\n    marks = false,\n    value,\n    setValue,\n    rangeValue,\n    setRangeValue,\n    trackProps,\n    thumbProps,\n    minThumbProps,\n    minThumbLabel,\n    minThumbLabelledBy,\n    maxThumbProps,\n    maxThumbLabel,\n    maxThumbLabelledBy,\n    tooltipProps,\n    containerRef,\n    getMarkProps = noop,\n    getMarkLabelProps = noop,\n    tooltipVisibility = \"auto\",\n    getTooltipProps = noop,\n    getTooltipChildren = identity,\n    disableSmoothDragging = !!marks,\n    ...remaining\n  } = props as SliderProps & RangeSliderProps;\n\n  const jump = getJumpValue({ min, max, step, jump: propJump });\n  const isRangeSlider = typeof value !== \"number\";\n\n  const thumb1Id = useEnsuredId(propId, \"slider\");\n  const thumb2Id = `${thumb1Id}-2`;\n  const thumb1Ref = useRef<HTMLSpanElement>(null);\n  const thumb2Ref = useRef<HTMLSpanElement>(null);\n\n  let thumb1Max = max;\n  let thumb2Min = min;\n  let thumb1Label: string | undefined;\n  let thumb1LabelledBy: string | undefined;\n  let thumb2Label: string | undefined;\n  let thumb2LabelledBy: string | undefined;\n  let thumb1Value: number;\n  let thumb2Value: number;\n  let setThumb1Value: UseStateSetter<number>;\n  let setThumb2Value: UseStateSetter<number>;\n  if (!isRangeSlider) {\n    thumb1Value = value;\n    setThumb1Value = setValue;\n    thumb2Value = max;\n    setThumb2Value = noop;\n    thumb1Label = ariaLabel;\n    thumb1LabelledBy = ariaLabelledBy;\n  } else {\n    thumb1LabelledBy = minThumbLabelledBy;\n    thumb1Label = minThumbLabel || (minThumbLabelledBy ? undefined : \"Min\");\n    thumb2LabelledBy = maxThumbLabelledBy;\n    thumb2Label = maxThumbLabel || (maxThumbLabelledBy ? undefined : \"max\");\n\n    [thumb1Value, thumb2Value] = rangeValue;\n\n    thumb1Max = thumb2Value - step;\n    thumb2Min = thumb1Value + step;\n\n    setThumb1Value = (valueOrSetter) => {\n      setRangeValue((prevRangeValue) => {\n        const value =\n          typeof valueOrSetter === \"number\"\n            ? valueOrSetter\n            : valueOrSetter(prevRangeValue[0]);\n\n        return [value, prevRangeValue[1]];\n      });\n    };\n    setThumb2Value = (valueOrSetter) => {\n      setRangeValue((prevRangeValue) => {\n        const value =\n          typeof valueOrSetter === \"number\"\n            ? valueOrSetter\n            : valueOrSetter(prevRangeValue[1]);\n\n        return [prevRangeValue[0], value];\n      });\n    };\n  }\n\n  const [thumb1Dragging, setThumb1Dragging] = useState(false);\n  const {\n    onKeyDown: thumb1OnKeyDown,\n    onMouseUp: thumb1OnMouseUp,\n    onMouseDown: thumb1OnMouseDown,\n    onMouseMove: thumb1OnMouseMove,\n    onTouchStart: thumb1OnTouchStart,\n    onTouchMove: thumb1OnTouchMove,\n    dragPercentage: thumb1DragPercentage,\n    draggableRef: thumb1DraggableRef,\n  } = useDraggable({\n    ref: thumb1Ref,\n    min,\n    max: thumb1Max,\n    rangeMax: max,\n    step,\n    value: thumb1Value,\n    setValue: setThumb1Value,\n    dragging: thumb1Dragging,\n    setDragging: setThumb1Dragging,\n    disabled,\n    vertical,\n    withinOffsetParent: true,\n    disableDraggingCursorClassName: true,\n    onKeyDown(event) {\n      switch (event.key) {\n        case \"PageUp\":\n          event.preventDefault();\n          event.stopPropagation();\n          setThumb1Value((prevValue) =>\n            withinRange({\n              min,\n              max: thumb1Max,\n              value: prevValue + jump,\n            })\n          );\n          break;\n        case \"PageDown\":\n          event.preventDefault();\n          event.stopPropagation();\n          setThumb1Value((prevValue) =>\n            withinRange({\n              min,\n              max: thumb1Max,\n              value: prevValue - jump,\n            })\n          );\n          break;\n      }\n    },\n  });\n\n  const [thumb2Dragging, setThumb2Dragging] = useState(false);\n  const {\n    onKeyDown: thumb2OnKeyDown,\n    onMouseUp: thumb2OnMouseUp,\n    onMouseDown: thumb2OnMouseDown,\n    onMouseMove: thumb2OnMouseMove,\n    onTouchStart: thumb2OnTouchStart,\n    onTouchMove: thumb2OnTouchMove,\n    dragPercentage: thumb2DragPercentage,\n    draggableRef: thumb2DraggableRef,\n  } = useDraggable({\n    ref: thumb2Ref,\n    min: thumb2Min,\n    max,\n    rangeMin: min,\n    step,\n    value: thumb2Value,\n    setValue: setThumb2Value,\n    dragging: thumb2Dragging,\n    setDragging: setThumb2Dragging,\n    vertical,\n    disabled,\n    withinOffsetParent: true,\n    disableDraggingCursorClassName: true,\n    onKeyDown(event) {\n      switch (event.key) {\n        case \"PageUp\":\n          event.preventDefault();\n          event.stopPropagation();\n          setThumb2Value((prevValue) =>\n            withinRange({\n              min: thumb2Min,\n              max,\n              value: prevValue + jump,\n            })\n          );\n          break;\n        case \"PageDown\":\n          event.preventDefault();\n          event.stopPropagation();\n          setThumb2Value((prevValue) =>\n            withinRange({\n              min: thumb2Min,\n              max,\n              value: prevValue - jump,\n            })\n          );\n          break;\n      }\n    },\n  });\n\n  const dragging = thumb1Dragging || thumb2Dragging;\n  const sharedThumbProps = {\n    step,\n    animate: !dragging,\n    discrete,\n    disabled,\n    vertical,\n    getValueText,\n    tooltipProps,\n    getTooltipProps,\n    getTooltipChildren,\n    tooltipVisibility,\n    disableSmoothDragging,\n  } as const satisfies Partial<SliderThumbProps>;\n\n  return (\n    <SliderContainer {...remaining} ref={containerRef} vertical={vertical}>\n      <SliderTrack\n        {...trackProps}\n        min={min}\n        max={max}\n        thumb1Ref={thumb1Ref}\n        thumb1Value={thumb1Value}\n        thumb1Dragging={!disableSmoothDragging && thumb1Dragging}\n        thumb1DragPercentage={thumb1DragPercentage}\n        thumb1OnMouseUp={thumb1OnMouseUp}\n        thumb1OnMouseDown={thumb1OnMouseDown}\n        thumb1OnMouseMove={thumb1OnMouseMove}\n        thumb1OnTouchStart={thumb1OnTouchStart}\n        thumb1OnTouchMove={thumb1OnTouchMove}\n        thumb2Ref={thumb2Ref}\n        thumb2Value={thumb2Value}\n        thumb2Dragging={!disableSmoothDragging && thumb2Dragging}\n        thumb2DragPercentage={thumb2DragPercentage}\n        thumb2OnMouseUp={thumb2OnMouseUp}\n        thumb2OnMouseDown={thumb2OnMouseDown}\n        thumb2OnMouseMove={thumb2OnMouseMove}\n        thumb2OnTouchStart={thumb2OnTouchStart}\n        thumb2OnTouchMove={thumb2OnTouchMove}\n        animate={!disableSmoothDragging && !dragging}\n        disabled={disabled}\n        vertical={vertical}\n        isRangeSlider={isRangeSlider}\n      >\n        <SliderThumb\n          aria-label={thumb1Label as string}\n          aria-labelledby={thumb1LabelledBy}\n          id={thumb1Id}\n          {...thumbProps}\n          {...minThumbProps}\n          {...sharedThumbProps}\n          ref={thumb1DraggableRef}\n          min={min}\n          max={thumb1Max}\n          value={thumb1Value}\n          index={1}\n          active={thumb1Dragging}\n          onChange={(event) =>\n            setThumb1Value(event.currentTarget.valueAsNumber)\n          }\n          onKeyDown={thumb1OnKeyDown}\n        />\n        {isRangeSlider && (\n          <SliderThumb\n            aria-label={thumb2Label as string}\n            aria-labelledby={thumb2LabelledBy}\n            id={thumb2Id}\n            {...maxThumbProps}\n            {...sharedThumbProps}\n            ref={thumb2DraggableRef}\n            min={thumb2Min}\n            max={max}\n            value={thumb2Value}\n            index={2}\n            active={thumb2Dragging}\n            onChange={(event) =>\n              setThumb2Value(event.currentTarget.valueAsNumber)\n            }\n            onKeyDown={thumb2OnKeyDown}\n          />\n        )}\n        {marks && (\n          <SliderValueMarks\n            min={min}\n            max={max}\n            step={step}\n            marks={marks}\n            vertical={vertical}\n            thumb1Value={thumb1Value}\n            thumb2Value={thumb2Value}\n            isRangeSlider={isRangeSlider}\n            getMarkProps={getMarkProps}\n            getMarkLabelProps={getMarkLabelProps}\n          />\n        )}\n        {children}\n      </SliderTrack>\n    </SliderContainer>\n  );\n}\n"],"names":["useRef","useState","useDraggable","useEnsuredId","identity","withinRange","SliderContainer","SliderThumb","SliderTrack","SliderValueMarks","getJumpValue","emptyString","noop","Slider","props","ariaLabel","ariaLabelledBy","id","propId","min","max","step","jump","propJump","vertical","discrete","disabled","getValueText","children","marks","value","setValue","rangeValue","setRangeValue","trackProps","thumbProps","minThumbProps","minThumbLabel","minThumbLabelledBy","maxThumbProps","maxThumbLabel","maxThumbLabelledBy","tooltipProps","containerRef","getMarkProps","getMarkLabelProps","tooltipVisibility","getTooltipProps","getTooltipChildren","disableSmoothDragging","remaining","isRangeSlider","thumb1Id","thumb2Id","thumb1Ref","thumb2Ref","thumb1Max","thumb2Min","thumb1Label","thumb1LabelledBy","thumb2Label","thumb2LabelledBy","thumb1Value","thumb2Value","setThumb1Value","setThumb2Value","undefined","valueOrSetter","prevRangeValue","thumb1Dragging","setThumb1Dragging","onKeyDown","thumb1OnKeyDown","onMouseUp","thumb1OnMouseUp","onMouseDown","thumb1OnMouseDown","onMouseMove","thumb1OnMouseMove","onTouchStart","thumb1OnTouchStart","onTouchMove","thumb1OnTouchMove","dragPercentage","thumb1DragPercentage","draggableRef","thumb1DraggableRef","ref","rangeMax","dragging","setDragging","withinOffsetParent","disableDraggingCursorClassName","event","key","preventDefault","stopPropagation","prevValue","thumb2Dragging","setThumb2Dragging","thumb2OnKeyDown","thumb2OnMouseUp","thumb2OnMouseDown","thumb2OnMouseMove","thumb2OnTouchStart","thumb2OnTouchMove","thumb2DragPercentage","thumb2DraggableRef","rangeMin","sharedThumbProps","animate","aria-label","aria-labelledby","index","active","onChange","currentTarget","valueAsNumber"],"mappings":"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"}

package/dist/form/SliderThumb.d.ts

@@ -2,6 +2,10 @@ import { type ChangeEventHandler, type HTMLAttributes, type ReactNode } from "re
 import { type TooltipProps } from "../tooltip/Tooltip.js";
 import { type LabelRequiredForA11y } from "../types.js";
 import { type SliderValueOptions } from "./useSlider.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export type SliderTooltipVisibility = "auto" | "hover" | "always";
 /**
  * @remarks \@since 2.5.0
  */
@@ -51,7 +55,7 @@ export interface SliderThumbPresentation {
      *
      * @defaultValue `"auto"`
      */
-    tooltipVisibility?: "auto" | "hover" | "always";
+    tooltipVisibility?: SliderTooltipVisibility;
 }
 /**
  * @internal
@@ -70,7 +74,8 @@ export interface SliderThumbProps extends Omit<HTMLAttributes<HTMLSpanElement>,
     vertical: boolean;
     onChange: ChangeEventHandler<HTMLInputElement>;
     tooltipProps?: Partial<TooltipProps>;
-    getTooltipChildren(value: number, isMinValue: boolean): ReactNode;
+    getTooltipProps(value: number, isFirstThumb: boolean): Partial<TooltipProps> | void;
+    getTooltipChildren(value: number, isFirstThumb: boolean): ReactNode;
 }
 /**
  * **Client Component**