@react-md/core 6.5.2 → 7.0.0

package/dist/menu/MenuItemInputToggle.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
-import { forwardRef } from "react";
 import { InputToggleIcon } from "../form/InputToggleIcon.js";
 import { SwitchTrack } from "../form/SwitchTrack.js";
 import { ListItem } from "../list/ListItem.js";
@@ -22,8 +21,8 @@ const noop = ()=>{
  * @see {@link MenuItemRadio} for radio examples
  * @see {@link MenuItemSwitch} for switch examples
  * @since 2.8.0
- */ export const MenuItemInputToggle = /*#__PURE__*/ forwardRef(function MenuItemInputToggle(props, ref) {
-    const { id: propId, type, disabled = false, checked, onCheckedChange, preventMenuHideOnClick = false, onClick = noop, className, tabIndex = -1, children, size = "auto", icon: propIcon, iconAfter = false, iconProps, iconStyle, iconClassName, checkedIcon, indeterminate, indeterminateIcon, addon, addonType, addonPosition, addonForceWrap, disableAddonCenteredMedia, ballProps, ballStyle, ballClassName, trackProps, trackStyle, trackClassName, ...remaining } = props;
+ */ export function MenuItemInputToggle(props) {
+    const { ref, id: propId, type, disabled = false, checked, onCheckedChange, preventMenuHideOnClick = false, onClick = noop, className, tabIndex = -1, children, size = "auto", icon: propIcon, iconAfter = false, iconProps, iconStyle, iconClassName, checkedIcon, indeterminate, indeterminateIcon, addon, addonType, addonPosition, addonForceWrap, disableAddonCenteredMedia, ballProps, ballStyle, ballClassName, trackProps, trackStyle, trackClassName, ...remaining } = props;
     const id = useEnsuredId(propId, "menu-item");
     let icon = propIcon;
     if (type === "switch") {
@@ -109,6 +108,6 @@ const noop = ()=>{
         disableRightAddonCenteredMedia: disableRightAddonCenteredMedia,
         children: children
     });
-});
+}
 
 //# sourceMappingURL=MenuItemInputToggle.js.map

package/dist/menu/MenuItemInputToggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/menu/MenuItemInputToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport {\n  type ConfigurableInputToggleIconProps,\n  type IndeterminateCheckboxProps,\n} from \"../form/InputToggle.js\";\nimport { InputToggleIcon } from \"../form/InputToggleIcon.js\";\nimport { SwitchTrack } from \"../form/SwitchTrack.js\";\nimport { type InputToggleSize } from \"../form/inputToggleStyles.js\";\nimport { ListItem } from \"../list/ListItem.js\";\nimport {\n  type ListItemAddonPosition,\n  type ListItemAddonType,\n  type ListItemChildrenTextProps,\n  type ListItemHeight,\n} from \"../list/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  menuItemInputToggle,\n  menuItemInputToggleBall,\n  menuItemInputToggleIcon,\n  menuItemInputToggleTrack,\n} from \"./styles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type MenuItemInputToggleCheckedCallback = (\n  checked: boolean,\n  event: MouseEvent<HTMLLIElement>\n) => void;\n\n/** @since 2.8.0 */\nexport interface BaseMenuItemInputToggleProps\n  extends\n    HTMLAttributes<HTMLLIElement>,\n    ConfigurableInputToggleIconProps,\n    ListItemChildrenTextProps {\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  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, IndeterminateCheckboxProps {}\n\nexport type MenuItemRadioProps = BaseMenuItemInputToggleProps;\n\n/**\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>>;\n  trackStyle?: CSSProperties;\n  trackClassName?: string;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\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 https://react-md.dev/components/menu | DropdownMenu Demos}\n * @see {@link MenuItemCheckbox} for checkbox examples\n * @see {@link MenuItemRadio} for radio examples\n * @see {@link MenuItemSwitch} for switch examples\n * @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 (type === \"switch\") {\n    icon = (\n      <SwitchTrack\n        style={trackStyle}\n        {...trackProps}\n        className={cnb(\n          menuItemInputToggleTrack(),\n          trackClassName,\n          trackProps?.className\n        )}\n        active={checked}\n        ballProps={ballProps}\n        ballStyle={ballStyle}\n        ballClassName={cnb(menuItemInputToggleBall(), ballClassName)}\n      />\n    );\n  } else {\n    icon = (\n      <InputToggleIcon\n        style={iconStyle}\n        disableEm\n        {...iconProps}\n        className={cnb(\n          menuItemInputToggleIcon(),\n          iconClassName,\n          iconProps?.className\n        )}\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  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","InputToggleIcon","SwitchTrack","ListItem","useEnsuredId","menuItemInputToggle","menuItemInputToggleBall","menuItemInputToggleIcon","menuItemInputToggleTrack","noop","MenuItemInputToggle","props","ref","id","propId","type","disabled","checked","onCheckedChange","preventMenuHideOnClick","onClick","className","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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"}
+{"version":3,"sources":["../../src/menu/MenuItemInputToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport {\n  type ConfigurableInputToggleIconProps,\n  type IndeterminateCheckboxProps,\n} from \"../form/InputToggle.js\";\nimport { InputToggleIcon } from \"../form/InputToggleIcon.js\";\nimport { SwitchTrack } from \"../form/SwitchTrack.js\";\nimport { type InputToggleSize } from \"../form/inputToggleStyles.js\";\nimport { ListItem } from \"../list/ListItem.js\";\nimport {\n  type ListItemAddonPosition,\n  type ListItemAddonType,\n  type ListItemChildrenTextProps,\n  type ListItemHeight,\n} from \"../list/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  menuItemInputToggle,\n  menuItemInputToggleBall,\n  menuItemInputToggleIcon,\n  menuItemInputToggleTrack,\n} from \"./styles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type MenuItemInputToggleCheckedCallback = (\n  checked: boolean,\n  event: MouseEvent<HTMLLIElement>\n) => void;\n\n/** @since 2.8.0 */\nexport interface BaseMenuItemInputToggleProps\n  extends\n    HTMLAttributes<HTMLLIElement>,\n    ConfigurableInputToggleIconProps,\n    ListItemChildrenTextProps {\n  ref?: Ref<HTMLLIElement>;\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  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, IndeterminateCheckboxProps {}\n\nexport type MenuItemRadioProps = BaseMenuItemInputToggleProps;\n\n/**\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>>;\n  trackStyle?: CSSProperties;\n  trackClassName?: string;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\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 https://react-md.dev/components/menu | DropdownMenu Demos}\n * @see {@link MenuItemCheckbox} for checkbox examples\n * @see {@link MenuItemRadio} for radio examples\n * @see {@link MenuItemSwitch} for switch examples\n * @since 2.8.0\n */\nexport function MenuItemInputToggle(\n  props: MenuItemInputToggleProps\n): ReactElement {\n  const {\n    ref,\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 (type === \"switch\") {\n    icon = (\n      <SwitchTrack\n        style={trackStyle}\n        {...trackProps}\n        className={cnb(\n          menuItemInputToggleTrack(),\n          trackClassName,\n          trackProps?.className\n        )}\n        active={checked}\n        ballProps={ballProps}\n        ballStyle={ballStyle}\n        ballClassName={cnb(menuItemInputToggleBall(), ballClassName)}\n      />\n    );\n  } else {\n    icon = (\n      <InputToggleIcon\n        style={iconStyle}\n        disableEm\n        {...iconProps}\n        className={cnb(\n          menuItemInputToggleIcon(),\n          iconClassName,\n          iconProps?.className\n        )}\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  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","InputToggleIcon","SwitchTrack","ListItem","useEnsuredId","menuItemInputToggle","menuItemInputToggleBall","menuItemInputToggleIcon","menuItemInputToggleTrack","noop","MenuItemInputToggle","props","ref","id","propId","type","disabled","checked","onCheckedChange","preventMenuHideOnClick","onClick","className","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":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAchC,SAASC,eAAe,QAAQ,6BAA6B;AAC7D,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,QAAQ,QAAQ,sBAAsB;AAQ/C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SACEC,mBAAmB,EACnBC,uBAAuB,EACvBC,uBAAuB,EACvBC,wBAAwB,QACnB,cAAc;AAErB,MAAMC,OAAO;AACX,aAAa;AACf;AA6FA;;;;;;;;;;;;CAYC,GACD,OAAO,SAASC,oBACdC,KAA+B;IAE/B,MAAM,EACJC,GAAG,EACHC,IAAIC,MAAM,EACVC,IAAI,EACJC,WAAW,KAAK,EAChBC,OAAO,EACPC,eAAe,EACfC,yBAAyB,KAAK,EAC9BC,UAAUX,IAAI,EACdY,SAAS,EACTC,WAAW,CAAC,CAAC,EACbC,QAAQ,EACRC,OAAO,MAAM,EACbC,MAAMC,QAAQ,EACdC,YAAY,KAAK,EACjBC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,aAAa,EACbC,iBAAiB,EACjBC,KAAK,EACLC,SAAS,EACTC,aAAa,EACbC,cAAc,EACdC,yBAAyB,EACzBC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,UAAU,EACVC,UAAU,EACVC,cAAc,EACd,GAAGC,WACJ,GAAGlC;IAEJ,MAAME,KAAKT,aAAaU,QAAQ;IAEhC,IAAIW,OAAOC;IACX,IAAIX,SAAS,UAAU;QACrBU,qBACE,KAACvB;YACC4C,OAAOH;YACN,GAAGD,UAAU;YACdrB,WAAWrB,IACTQ,4BACAoC,gBACAF,YAAYrB;YAEd0B,QAAQ9B;YACRsB,WAAWA;YACXC,WAAWA;YACXC,eAAezC,IAAIM,2BAA2BmC;;IAGpD,OAAO;QACLhB,qBACE,KAACxB;YACC6C,OAAOjB;YACPmB,SAAS;YACR,GAAGpB,SAAS;YACbP,WAAWrB,IACTO,2BACAuB,eACAF,WAAWP;YAEbG,MAAMA;YACNT,MAAMA;YACNE,SAASA;YACTD,UAAUA;YACVS,MAAMC;YACNK,aAAaA;YACbC,eAAeA;YACfC,mBAAmBA;;IAGzB;IAEA,IAAIgB;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAI/B,WAAW;QACbsB,YAAYf;QACZgB,gBAAgBf;QAChBgB,oBAAoBf;QACpBgB,qBAAqBf;QACrBgB,gCAAgCf;QAChCgB,aAAa7B;IACf,OAAO;QACLwB,YAAYxB;QACZ6B,aAAapB;QACbqB,iBAAiBpB;QACjBqB,qBAAqBpB;QACrBqB,sBAAsBpB;QACtBqB,iCAAiCpB;IACnC;IAEA,qBACE,KAACnC;QACE,GAAG0C,SAAS;QACb,2CAA2C;QAC3Cc,gBAAc3B,iBAAiBf,UAAU,UAAUA;QACnDJ,IAAIA;QACJ+C,MAAM7C,SAAS,UAAU,kBAAkB;QAC3CK,SAAS,CAACyC;YACRzC,QAAQyC;YACR3C,gBAAgB,CAACD,SAAS4C;YAE1B,IAAI1C,wBAAwB;gBAC1B0C,MAAMC,eAAe;YACvB;QACF;QACAlD,KAAKA;QACLS,WAAWhB,oBAAoB;YAAEU;YAAMM;QAAU;QACjDL,UAAUA;QACVM,UAAUA;QACV2B,WAAWA;QACXC,eAAeA;QACfC,mBAAmBA;QACnBC,oBAAoBA;QACpBC,+BAA+BA;QAC/BC,YAAYA;QACZC,gBAAgBA;QAChBC,oBAAoBA;QACpBC,qBAAqBA;QACrBC,gCAAgCA;kBAE/BnC;;AAGP"}

package/dist/menu/MenuItemRadio.d.ts

@@ -1,3 +1,5 @@
+import { type ReactElement } from "react";
+import { type MenuItemRadioProps } from "./MenuItemInputToggle.js";
 /**
  * **Client Component**
  *
@@ -99,4 +101,4 @@
  * @see {@link https://react-md.dev/components/menu#menuitemradio-example | DropdownMenu Demos}
  * @since 2.8.0
  */
-export declare const MenuItemRadio: import("react").ForwardRefExoticComponent<import("./MenuItemInputToggle.js").BaseMenuItemInputToggleProps & import("react").RefAttributes<HTMLLIElement>>;
+export declare function MenuItemRadio(props: MenuItemRadioProps): ReactElement;

package/dist/menu/MenuItemRadio.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { MenuItemInputToggle } from "./MenuItemInputToggle.js";
 /**
  * **Client Component**
@@ -102,12 +101,13 @@ import { MenuItemInputToggle } from "./MenuItemInputToggle.js";
  *
  * @see {@link https://react-md.dev/components/menu#menuitemradio-example | DropdownMenu Demos}
  * @since 2.8.0
- */ export const MenuItemRadio = /*#__PURE__*/ forwardRef(function MenuItemRadio(props, ref) {
+ */ export function MenuItemRadio(props) {
+    const { ref, ...remaining } = props;
     return /*#__PURE__*/ _jsx(MenuItemInputToggle, {
-        ...props,
+        ...remaining,
         ref: ref,
         type: "radio"
     });
-});
+}
 
 //# sourceMappingURL=MenuItemRadio.js.map

package/dist/menu/MenuItemRadio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/menu/MenuItemRadio.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type ICON_CONFIG } from \"../icon/config.js\";\nimport {\n  MenuItemInputToggle,\n  type MenuItemRadioProps,\n} from \"./MenuItemInputToggle.js\";\n\n/**\n * **Client Component**\n *\n * This is a simple wrapper for the {@link MenuItemInputToggle} component to\n * render it as a radio and pulling the radio icon from the\n * {@link ICON_CONFIG}.\n *\n * If a menu or menubar contains more than one group of menuitemradio elements,\n * or if the menu contains one group and other, unrelated menu items, authors\n * SHOULD nest each set of related menuitemradio elements in an element using\n * the group role, and authors SHOULD delimit the group from other menu items\n * with an element using the separator role.\n * @see {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio}\n *\n * @example Only Radio Items\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { DropdownMenu } from \"@react-md/core/menu/DropdownMenu\";\n * import { MenuItemRadio } from \"@react-md/core/menu/MenuItemRadio\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"value1\");\n *\n *   return (\n *     <DropdownMenu id=\"dropdown-menu-id\" buttonChildren=\"Button\">\n *       <MenuItemRadio\n *         id=\"radio-1\"\n *         checked={value === \"value1\"}\n *         onCheckedChange={() => setValue(\"value1\")}\n *       >\n *          Radio 1\n *       </MenuItemRadio>\n *       <MenuItemRadio\n *         id=\"radio-2\"\n *         checked={value === \"value2\"}\n *         onCheckedChange={() => setValue(\"value2\")}\n *       >\n *         Radio 2\n *       </MenuItemRadio>\n *       <MenuItemRadio\n *         id=\"radio-3\"\n *         checked={value === \"value3\"}\n *         onCheckedChange={() => setValue(\"value3\")}\n *       >\n *         Radio 3\n *       </MenuItemRadio>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @example With Other Items\n * ```tsx\n * import { DropdownMenu } from \"@react-md/core/menu/DropdownMenu\";\n * import { MenuItemGroup } from \"@react-md/core/menu/MenuItemGroup\";\n * import { MenuItemRadio } from \"@react-md/core/menu/MenuItemRadio\";\n * import { MenuItemSeparator } from \"@react-md/core/menu/MenuItemSeparator\";\n * import { MenuItemSwitch } from \"@react-md/core/menu/MenuItemSwitch\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"value1\");\n *\n *   return (\n *     <DropdownMenu buttonChildren=\"Button\">\n *       <MenuItemSwitch\n *         checked={checked}\n *         onCheckedChange={nextChecked => setChecked(nextChecked)}\n *       >\n *         Light mode\n *       </MenuItemSwitch>\n *       <MenuItemSeparator />\n *       <MenuItemGroup aria-label=\"My Group Label\">\n *         <MenuItemRadio\n *           checked={value === \"value1\"}\n *           onCheckedChange={() => setValue(\"value1\")}\n *         >\n *           Radio 1\n *         </MenuItemRadio>\n *         <MenuItemRadio\n *           checked={value === \"value2\"}\n *           onCheckedChange={() => setValue(\"value2\")}\n *         >\n *           Radio 2\n *         </MenuItemRadio>\n *         <MenuItemRadio\n *           checked={value === \"value3\"}\n *           onCheckedChange={() => setValue(\"value3\")}\n *         >\n *           Radio 3\n *         </MenuItemRadio>\n *       </MenuItemGroup>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/menu#menuitemradio-example | DropdownMenu Demos}\n * @since 2.8.0\n */\nexport const MenuItemRadio = forwardRef<HTMLLIElement, MenuItemRadioProps>(\n  function MenuItemRadio(props, ref) {\n    return <MenuItemInputToggle {...props} ref={ref} type=\"radio\" />;\n  }\n);\n"],"names":["forwardRef","MenuItemInputToggle","MenuItemRadio","props","ref","type"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAInC,SACEC,mBAAmB,QAEd,2BAA2B;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoGC,GACD,OAAO,MAAMC,8BAAgBF,WAC3B,SAASE,cAAcC,KAAK,EAAEC,GAAG;IAC/B,qBAAO,KAACH;QAAqB,GAAGE,KAAK;QAAEC,KAAKA;QAAKC,MAAK;;AACxD,GACA"}
+{"version":3,"sources":["../../src/menu/MenuItemRadio.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement } from \"react\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type ICON_CONFIG } from \"../icon/config.js\";\nimport {\n  MenuItemInputToggle,\n  type MenuItemRadioProps,\n} from \"./MenuItemInputToggle.js\";\n\n/**\n * **Client Component**\n *\n * This is a simple wrapper for the {@link MenuItemInputToggle} component to\n * render it as a radio and pulling the radio icon from the\n * {@link ICON_CONFIG}.\n *\n * If a menu or menubar contains more than one group of menuitemradio elements,\n * or if the menu contains one group and other, unrelated menu items, authors\n * SHOULD nest each set of related menuitemradio elements in an element using\n * the group role, and authors SHOULD delimit the group from other menu items\n * with an element using the separator role.\n * @see {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio}\n *\n * @example Only Radio Items\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { DropdownMenu } from \"@react-md/core/menu/DropdownMenu\";\n * import { MenuItemRadio } from \"@react-md/core/menu/MenuItemRadio\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"value1\");\n *\n *   return (\n *     <DropdownMenu id=\"dropdown-menu-id\" buttonChildren=\"Button\">\n *       <MenuItemRadio\n *         id=\"radio-1\"\n *         checked={value === \"value1\"}\n *         onCheckedChange={() => setValue(\"value1\")}\n *       >\n *          Radio 1\n *       </MenuItemRadio>\n *       <MenuItemRadio\n *         id=\"radio-2\"\n *         checked={value === \"value2\"}\n *         onCheckedChange={() => setValue(\"value2\")}\n *       >\n *         Radio 2\n *       </MenuItemRadio>\n *       <MenuItemRadio\n *         id=\"radio-3\"\n *         checked={value === \"value3\"}\n *         onCheckedChange={() => setValue(\"value3\")}\n *       >\n *         Radio 3\n *       </MenuItemRadio>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @example With Other Items\n * ```tsx\n * import { DropdownMenu } from \"@react-md/core/menu/DropdownMenu\";\n * import { MenuItemGroup } from \"@react-md/core/menu/MenuItemGroup\";\n * import { MenuItemRadio } from \"@react-md/core/menu/MenuItemRadio\";\n * import { MenuItemSeparator } from \"@react-md/core/menu/MenuItemSeparator\";\n * import { MenuItemSwitch } from \"@react-md/core/menu/MenuItemSwitch\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"value1\");\n *\n *   return (\n *     <DropdownMenu buttonChildren=\"Button\">\n *       <MenuItemSwitch\n *         checked={checked}\n *         onCheckedChange={nextChecked => setChecked(nextChecked)}\n *       >\n *         Light mode\n *       </MenuItemSwitch>\n *       <MenuItemSeparator />\n *       <MenuItemGroup aria-label=\"My Group Label\">\n *         <MenuItemRadio\n *           checked={value === \"value1\"}\n *           onCheckedChange={() => setValue(\"value1\")}\n *         >\n *           Radio 1\n *         </MenuItemRadio>\n *         <MenuItemRadio\n *           checked={value === \"value2\"}\n *           onCheckedChange={() => setValue(\"value2\")}\n *         >\n *           Radio 2\n *         </MenuItemRadio>\n *         <MenuItemRadio\n *           checked={value === \"value3\"}\n *           onCheckedChange={() => setValue(\"value3\")}\n *         >\n *           Radio 3\n *         </MenuItemRadio>\n *       </MenuItemGroup>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/menu#menuitemradio-example | DropdownMenu Demos}\n * @since 2.8.0\n */\nexport function MenuItemRadio(props: MenuItemRadioProps): ReactElement {\n  const { ref, ...remaining } = props;\n\n  return <MenuItemInputToggle {...remaining} ref={ref} type=\"radio\" />;\n}\n"],"names":["MenuItemInputToggle","MenuItemRadio","props","ref","remaining","type"],"mappings":"AAAA;;AAMA,SACEA,mBAAmB,QAEd,2BAA2B;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoGC,GACD,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EAAEC,GAAG,EAAE,GAAGC,WAAW,GAAGF;IAE9B,qBAAO,KAACF;QAAqB,GAAGI,SAAS;QAAED,KAAKA;QAAKE,MAAK;;AAC5D"}

package/dist/menu/MenuItemSeparator.d.ts

@@ -1,7 +1,8 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type DividerProps } from "../divider/Divider.js";
 /** @since 5.0.0 */
 export interface MenuItemSeparatorProps extends HTMLAttributes<HTMLLIElement>, Pick<DividerProps, "inset" | "vertical"> {
+    ref?: Ref<HTMLLIElement>;
 }
 /**
  * **Client Component**
@@ -13,4 +14,4 @@ export interface MenuItemSeparatorProps extends HTMLAttributes<HTMLLIElement>, P
  * @see {@link https://react-md.dev/components/menu | Menu Demos}
  * @since 5.0.0 Renders as an `<li>` instead of a `<div>` or `<hr />`.
  */
-export declare const MenuItemSeparator: import("react").ForwardRefExoticComponent<MenuItemSeparatorProps & import("react").RefAttributes<HTMLLIElement>>;
+export declare function MenuItemSeparator(props: MenuItemSeparatorProps): ReactElement;

package/dist/menu/MenuItemSeparator.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { divider } from "../divider/styles.js";
 import { useMenuConfiguration } from "./MenuConfigurationProvider.js";
 /**
@@ -12,8 +11,8 @@ import { useMenuConfiguration } from "./MenuConfigurationProvider.js";
  *
  * @see {@link https://react-md.dev/components/menu | Menu Demos}
  * @since 5.0.0 Renders as an `<li>` instead of a `<div>` or `<hr />`.
- */ export const MenuItemSeparator = /*#__PURE__*/ forwardRef(function MenuItemSeparator(props, ref) {
-    const { className, inset, vertical: propVertical, children, ...remaining } = props;
+ */ export function MenuItemSeparator(props) {
+    const { ref, className, inset, vertical: propVertical, children, ...remaining } = props;
     const horizontal = useMenuConfiguration().horizontal;
     const vertical = propVertical ?? horizontal;
     return /*#__PURE__*/ _jsx("li", {
@@ -28,6 +27,6 @@ import { useMenuConfiguration } from "./MenuConfigurationProvider.js";
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=MenuItemSeparator.js.map

package/dist/menu/MenuItemSeparator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/menu/MenuItemSeparator.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type DividerProps } from \"../divider/Divider.js\";\nimport { divider } from \"../divider/styles.js\";\nimport { useMenuConfiguration } from \"./MenuConfigurationProvider.js\";\n\n/** @since 5.0.0 */\nexport interface MenuItemSeparatorProps\n  extends\n    HTMLAttributes<HTMLLIElement>,\n    Pick<DividerProps, \"inset\" | \"vertical\"> {}\n\n/**\n * **Client Component**\n *\n * This component renders a `<li role=\"separator\">` with the divider styles. It\n * will also automatically render itself vertically instead of horizontally if\n * the menu is rendering horizontally.\n *\n * @see {@link https://react-md.dev/components/menu | Menu Demos}\n * @since 5.0.0 Renders as an `<li>` instead of a `<div>` or `<hr />`.\n */\nexport const MenuItemSeparator = forwardRef<\n  HTMLLIElement,\n  MenuItemSeparatorProps\n>(function MenuItemSeparator(props, ref) {\n  const {\n    className,\n    inset,\n    vertical: propVertical,\n    children,\n    ...remaining\n  } = props;\n\n  const horizontal = useMenuConfiguration().horizontal;\n  const vertical = propVertical ?? horizontal;\n\n  return (\n    <li\n      {...remaining}\n      aria-orientation={vertical ? \"vertical\" : undefined}\n      ref={ref}\n      role=\"separator\"\n      className={divider({ inset: inset && !vertical, vertical, className })}\n    >\n      {children}\n    </li>\n  );\n});\n"],"names":["forwardRef","divider","useMenuConfiguration","MenuItemSeparator","props","ref","className","inset","vertical","propVertical","children","remaining","horizontal","li","aria-orientation","undefined","role"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAGxD,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,SAASC,oBAAoB,QAAQ,iCAAiC;AAQtE;;;;;;;;;CASC,GACD,OAAO,MAAMC,kCAAoBH,WAG/B,SAASG,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EACJC,SAAS,EACTC,KAAK,EACLC,UAAUC,YAAY,EACtBC,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,MAAMQ,aAAaV,uBAAuBU,UAAU;IACpD,MAAMJ,WAAWC,gBAAgBG;IAEjC,qBACE,KAACC;QACE,GAAGF,SAAS;QACbG,oBAAkBN,WAAW,aAAaO;QAC1CV,KAAKA;QACLW,MAAK;QACLV,WAAWL,QAAQ;YAAEM,OAAOA,SAAS,CAACC;YAAUA;YAAUF;QAAU;kBAEnEI;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/menu/MenuItemSeparator.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, type ReactElement, type Ref } from \"react\";\n\nimport { type DividerProps } from \"../divider/Divider.js\";\nimport { divider } from \"../divider/styles.js\";\nimport { useMenuConfiguration } from \"./MenuConfigurationProvider.js\";\n\n/** @since 5.0.0 */\nexport interface MenuItemSeparatorProps\n  extends\n    HTMLAttributes<HTMLLIElement>,\n    Pick<DividerProps, \"inset\" | \"vertical\"> {\n  ref?: Ref<HTMLLIElement>;\n}\n\n/**\n * **Client Component**\n *\n * This component renders a `<li role=\"separator\">` with the divider styles. It\n * will also automatically render itself vertically instead of horizontally if\n * the menu is rendering horizontally.\n *\n * @see {@link https://react-md.dev/components/menu | Menu Demos}\n * @since 5.0.0 Renders as an `<li>` instead of a `<div>` or `<hr />`.\n */\nexport function MenuItemSeparator(props: MenuItemSeparatorProps): ReactElement {\n  const {\n    ref,\n    className,\n    inset,\n    vertical: propVertical,\n    children,\n    ...remaining\n  } = props;\n\n  const horizontal = useMenuConfiguration().horizontal;\n  const vertical = propVertical ?? horizontal;\n\n  return (\n    <li\n      {...remaining}\n      aria-orientation={vertical ? \"vertical\" : undefined}\n      ref={ref}\n      role=\"separator\"\n      className={divider({ inset: inset && !vertical, vertical, className })}\n    >\n      {children}\n    </li>\n  );\n}\n"],"names":["divider","useMenuConfiguration","MenuItemSeparator","props","ref","className","inset","vertical","propVertical","children","remaining","horizontal","li","aria-orientation","undefined","role"],"mappings":"AAAA;;AAKA,SAASA,OAAO,QAAQ,uBAAuB;AAC/C,SAASC,oBAAoB,QAAQ,iCAAiC;AAUtE;;;;;;;;;CASC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EACJC,GAAG,EACHC,SAAS,EACTC,KAAK,EACLC,UAAUC,YAAY,EACtBC,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,MAAMQ,aAAaV,uBAAuBU,UAAU;IACpD,MAAMJ,WAAWC,gBAAgBG;IAEjC,qBACE,KAACC;QACE,GAAGF,SAAS;QACbG,oBAAkBN,WAAW,aAAaO;QAC1CV,KAAKA;QACLW,MAAK;QACLV,WAAWL,QAAQ;YAAEM,OAAOA,SAAS,CAACC;YAAUA;YAAUF;QAAU;kBAEnEI;;AAGP"}

package/dist/menu/MenuItemSwitch.d.ts

@@ -1,3 +1,4 @@
+import { type ReactElement } from "react";
 import { type MenuItemSwitchProps } from "./MenuItemInputToggle.js";
 /**
  * **Client Component**
@@ -30,4 +31,4 @@ import { type MenuItemSwitchProps } from "./MenuItemInputToggle.js";
  * @see {@link https://react-md.dev/components/menu#menuitemswitch-example | DropdownMenu Demos}
  * @since 2.8.0
  */
-export declare const MenuItemSwitch: import("react").ForwardRefExoticComponent<MenuItemSwitchProps & import("react").RefAttributes<HTMLLIElement>>;
+export declare function MenuItemSwitch(props: MenuItemSwitchProps): ReactElement;

package/dist/menu/MenuItemSwitch.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { MenuItemInputToggle } from "./MenuItemInputToggle.js";
 /**
  * **Client Component**
@@ -32,12 +31,13 @@ import { MenuItemInputToggle } from "./MenuItemInputToggle.js";
  *
  * @see {@link https://react-md.dev/components/menu#menuitemswitch-example | DropdownMenu Demos}
  * @since 2.8.0
- */ export const MenuItemSwitch = /*#__PURE__*/ forwardRef(function MenuItemSwitch(props, ref) {
+ */ export function MenuItemSwitch(props) {
+    const { ref, ...remaining } = props;
     return /*#__PURE__*/ _jsx(MenuItemInputToggle, {
-        ...props,
+        ...remaining,
         ref: ref,
         type: "switch"
     });
-});
+}
 
 //# sourceMappingURL=MenuItemSwitch.js.map

package/dist/menu/MenuItemSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/menu/MenuItemSwitch.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport {\n  MenuItemInputToggle,\n  type MenuItemSwitchProps,\n} from \"./MenuItemInputToggle.js\";\n\n/**\n * **Client Component**\n *\n * This is a simple wrapper for the {@link MenuItemInputToggle} component to\n * render it as a switch.\n *\n * @example Simple Example\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { DropdownMenu } from \"@react-md/core/menu/DropdownMenu\";\n * import { MenuItemSwitch } from \"@react-md/core/menu/MenuItemSwitch\";\n *\n * function Example(): ReactElement {\n *   const [checked, setChecked] = useState(false);\n *\n *   return (\n *     <DropdownMenu buttonChildren=\"Button\">\n *       <MenuItemSwitch\n *         checked={checked}\n *         onCheckedChange={(nextChecked) => setChecked(nextChecked)}\n *       >\n *         Switch\n *      </MenuItemSwitch>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/menu#menuitemswitch-example | DropdownMenu Demos}\n * @since 2.8.0\n */\nexport const MenuItemSwitch = forwardRef<HTMLLIElement, MenuItemSwitchProps>(\n  function MenuItemSwitch(props, ref) {\n    return <MenuItemInputToggle {...props} ref={ref} type=\"switch\" />;\n  }\n);\n"],"names":["forwardRef","MenuItemInputToggle","MenuItemSwitch","props","ref","type"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SACEC,mBAAmB,QAEd,2BAA2B;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,MAAMC,+BAAiBF,WAC5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAChC,qBAAO,KAACH;QAAqB,GAAGE,KAAK;QAAEC,KAAKA;QAAKC,MAAK;;AACxD,GACA"}
+{"version":3,"sources":["../../src/menu/MenuItemSwitch.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement } from \"react\";\n\nimport {\n  MenuItemInputToggle,\n  type MenuItemSwitchProps,\n} from \"./MenuItemInputToggle.js\";\n\n/**\n * **Client Component**\n *\n * This is a simple wrapper for the {@link MenuItemInputToggle} component to\n * render it as a switch.\n *\n * @example Simple Example\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { DropdownMenu } from \"@react-md/core/menu/DropdownMenu\";\n * import { MenuItemSwitch } from \"@react-md/core/menu/MenuItemSwitch\";\n *\n * function Example(): ReactElement {\n *   const [checked, setChecked] = useState(false);\n *\n *   return (\n *     <DropdownMenu buttonChildren=\"Button\">\n *       <MenuItemSwitch\n *         checked={checked}\n *         onCheckedChange={(nextChecked) => setChecked(nextChecked)}\n *       >\n *         Switch\n *      </MenuItemSwitch>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/menu#menuitemswitch-example | DropdownMenu Demos}\n * @since 2.8.0\n */\nexport function MenuItemSwitch(props: MenuItemSwitchProps): ReactElement {\n  const { ref, ...remaining } = props;\n\n  return <MenuItemInputToggle {...remaining} ref={ref} type=\"switch\" />;\n}\n"],"names":["MenuItemInputToggle","MenuItemSwitch","props","ref","remaining","type"],"mappings":"AAAA;;AAIA,SACEA,mBAAmB,QAEd,2BAA2B;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,GAAG,EAAE,GAAGC,WAAW,GAAGF;IAE9B,qBAAO,KAACF;QAAqB,GAAGI,SAAS;QAAED,KAAKA;QAAKE,MAAK;;AAC5D"}

package/dist/menu/MenuItemTextField.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement } from "react";
 import { type TextFieldProps } from "../form/TextField.js";
 import { type PropsWithRef } from "../types.js";
 /**
@@ -24,4 +24,4 @@ export interface MenuItemTextFieldProps extends TextFieldProps {
  * @see {@link https://react-md.dev/components/menu#menuitemtextfield-example | DropdownMenu Demos}
  * @since 5.0.0
  */
-export declare const MenuItemTextField: import("react").ForwardRefExoticComponent<MenuItemTextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare function MenuItemTextField(props: MenuItemTextFieldProps): ReactElement;

package/dist/menu/MenuItemTextField.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
-import { forwardRef } from "react";
 import { TextField } from "../form/TextField.js";
 /**
  * **Client Component**
@@ -15,8 +14,8 @@ import { TextField } from "../form/TextField.js";
  *
  * @see {@link https://react-md.dev/components/menu#menuitemtextfield-example | DropdownMenu Demos}
  * @since 5.0.0
- */ export const MenuItemTextField = /*#__PURE__*/ forwardRef(function MenuItemTextField(props, ref) {
-    const { liProps, onKeyDown, ...remaining } = props;
+ */ export function MenuItemTextField(props) {
+    const { ref, liProps, onKeyDown, ...remaining } = props;
     return /*#__PURE__*/ _jsx("li", {
         role: "none",
         ...liProps,
@@ -43,6 +42,6 @@ import { TextField } from "../form/TextField.js";
             }
         })
     });
-});
+}
 
 //# sourceMappingURL=MenuItemTextField.js.map

package/dist/menu/MenuItemTextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/menu/MenuItemTextField.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { TextField, type TextFieldProps } from \"../form/TextField.js\";\nimport { type PropsWithRef } from \"../types.js\";\n\n/**\n * @since 5.0.0\n * @since 6.3.0 Removed the invalid `stretch` prop\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>>;\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 * @see {@link https://react-md.dev/components/menu#menuitemtextfield-example | DropdownMenu Demos}\n * @since 5.0.0\n */\nexport const MenuItemTextField = forwardRef<\n  HTMLInputElement,\n  MenuItemTextFieldProps\n>(function MenuItemTextField(props, ref) {\n  const { liProps, onKeyDown, ...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        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","remaining","li","role","onClick","event","stopPropagation","className","key","length","currentTarget","value"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8BC,UAAU,QAAQ,QAAQ;AAExD,SAASC,SAAS,QAA6B,uBAAuB;AActE;;;;;;;;;;;;CAYC,GACD,OAAO,MAAMC,kCAAoBF,WAG/B,SAASE,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAC7C,qBACE,KAACK;QACCC,MAAK;QACJ,GAAGJ,OAAO;QACXK,SAAS,CAACC;YACRN,SAASK,UAAUC;YACnBA,MAAMC,eAAe;QACvB;QACAC,WAAWd,IAAI,+BAA+BM,SAASQ;kBAEvD,cAAA,KAACZ;YACE,GAAGM,SAAS;YACbH,KAAKA;YACLE,WAAW,CAACK;gBACVL,YAAYK;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/menu/MenuItemTextField.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, type ReactElement } from \"react\";\n\nimport { TextField, type TextFieldProps } from \"../form/TextField.js\";\nimport { type PropsWithRef } from \"../types.js\";\n\n/**\n * @since 5.0.0\n * @since 6.3.0 Removed the invalid `stretch` prop\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>>;\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 * @see {@link https://react-md.dev/components/menu#menuitemtextfield-example | DropdownMenu Demos}\n * @since 5.0.0\n */\nexport function MenuItemTextField(props: MenuItemTextFieldProps): ReactElement {\n  const { ref, liProps, onKeyDown, ...remaining } = props;\n\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        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","TextField","MenuItemTextField","props","ref","liProps","onKeyDown","remaining","li","role","onClick","event","stopPropagation","className","key","length","currentTarget","value"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAGhC,SAASC,SAAS,QAA6B,uBAAuB;AActE;;;;;;;;;;;;CAYC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EAAEC,GAAG,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAElD,qBACE,KAACK;QACCC,MAAK;QACJ,GAAGJ,OAAO;QACXK,SAAS,CAACC;YACRN,SAASK,UAAUC;YACnBA,MAAMC,eAAe;QACvB;QACAC,WAAWb,IAAI,+BAA+BK,SAASQ;kBAEvD,cAAA,KAACZ;YACE,GAAGM,SAAS;YACbH,KAAKA;YACLE,WAAW,CAACK;gBACVL,YAAYK;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"}

package/dist/menu/MenuVisibilityProvider.d.ts

@@ -1,11 +1,11 @@
-import { type ReactElement, type ReactNode } from "react";
-import { type NonNullMutableRef, type UseStateObject } from "../types.js";
+import { type ReactElement, type ReactNode, type RefObject } from "react";
+import { type UseStateObject } from "../types.js";
 /**
  * @since 5.0.0
  * @since 6.0.0 Added the `defaultFocusIndex` ref.
  */
 export interface MenuVisibilityContext extends UseStateObject<"visible", boolean> {
-    defaultFocusIndex: NonNullMutableRef<number>;
+    defaultFocusIndex: RefObject<number>;
 }
 /**
  * This hook allows you control the visibility of a parent menu. The main

package/dist/menu/MenuVisibilityProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/menu/MenuVisibilityProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  createContext,\n  useContext,\n  useMemo,\n} from \"react\";\n\nimport { type NonNullMutableRef, type UseStateObject } from \"../types.js\";\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Added the `defaultFocusIndex` ref.\n */\nexport interface MenuVisibilityContext extends UseStateObject<\n  \"visible\",\n  boolean\n> {\n  defaultFocusIndex: NonNullMutableRef<number>;\n}\n\n/**\n * @internal\n * @since 5.0.0\n */\nconst context = createContext<MenuVisibilityContext>({\n  visible: false,\n  setVisible() {\n    throw new Error('\"MenuVisibilityProvider\" must be a parent component');\n  },\n  defaultFocusIndex: { current: 0 },\n});\ncontext.displayName = \"MenuVisibility\";\n\n/**\n * @internal\n * @since 5.0.0\n */\nconst { Provider } = context;\n\n/**\n * This hook allows you control the visibility of a parent menu. The main\n * use-case for this hook is adding a custom sheet header/footer.\n *\n * @example Simple Example\n * ```tsx\n * function SheetFooter(): ReactElement {\n *   const { setVisible } = useMenuVisibility();\n *\n *   return (\n *     <DialogFooter>\n *       <Button onClick={() => setVisible(false)}>Cancel</Button>\n *     </DialogFooter>\n *   );\n * }\n * ```\n *\n * @returns the {@link MenuVisibilityContext}\n * @since 5.0.0\n */\nexport function useMenuVisibility(): Readonly<MenuVisibilityContext> {\n  return useContext(context);\n}\n\n/**\n * @internal\n * @since 5.0.0\n */\nexport interface MenuVisibilityProviderProps extends MenuVisibilityContext {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 5.0.0\n */\nexport function MenuVisibilityProvider({\n  visible,\n  setVisible,\n  defaultFocusIndex,\n  children,\n}: MenuVisibilityProviderProps): ReactElement {\n  const value = useMemo<MenuVisibilityContext>(\n    () => ({\n      visible,\n      setVisible,\n      defaultFocusIndex,\n    }),\n    [visible, setVisible, defaultFocusIndex]\n  );\n\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useMemo","context","visible","setVisible","Error","defaultFocusIndex","current","displayName","Provider","useMenuVisibility","MenuVisibilityProvider","children","value"],"mappings":"AAAA;;AAEA,SAGEA,aAAa,EACbC,UAAU,EACVC,OAAO,QACF,QAAQ;AAef;;;CAGC,GACD,MAAMC,wBAAUH,cAAqC;IACnDI,SAAS;IACTC;QACE,MAAM,IAAIC,MAAM;IAClB;IACAC,mBAAmB;QAAEC,SAAS;IAAE;AAClC;AACAL,QAAQM,WAAW,GAAG;AAEtB;;;CAGC,GACD,MAAM,EAAEC,QAAQ,EAAE,GAAGP;AAErB;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASQ;IACd,OAAOV,WAAWE;AACpB;AAUA;;;;;CAKC,GACD,OAAO,SAASS,uBAAuB,EACrCR,OAAO,EACPC,UAAU,EACVE,iBAAiB,EACjBM,QAAQ,EACoB;IAC5B,MAAMC,QAAQZ,QACZ,IAAO,CAAA;YACLE;YACAC;YACAE;QACF,CAAA,GACA;QAACH;QAASC;QAAYE;KAAkB;IAG1C,qBAAO,KAACG;QAASI,OAAOA;kBAAQD;;AAClC"}
+{"version":3,"sources":["../../src/menu/MenuVisibilityProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  type RefObject,\n  createContext,\n  useContext,\n  useMemo,\n} from \"react\";\n\nimport { type UseStateObject } from \"../types.js\";\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Added the `defaultFocusIndex` ref.\n */\nexport interface MenuVisibilityContext extends UseStateObject<\n  \"visible\",\n  boolean\n> {\n  defaultFocusIndex: RefObject<number>;\n}\n\n/**\n * @internal\n * @since 5.0.0\n */\nconst context = createContext<MenuVisibilityContext>({\n  visible: false,\n  setVisible() {\n    throw new Error('\"MenuVisibilityProvider\" must be a parent component');\n  },\n  defaultFocusIndex: { current: 0 },\n});\ncontext.displayName = \"MenuVisibility\";\n\n/**\n * @internal\n * @since 5.0.0\n */\nconst { Provider } = context;\n\n/**\n * This hook allows you control the visibility of a parent menu. The main\n * use-case for this hook is adding a custom sheet header/footer.\n *\n * @example Simple Example\n * ```tsx\n * function SheetFooter(): ReactElement {\n *   const { setVisible } = useMenuVisibility();\n *\n *   return (\n *     <DialogFooter>\n *       <Button onClick={() => setVisible(false)}>Cancel</Button>\n *     </DialogFooter>\n *   );\n * }\n * ```\n *\n * @returns the {@link MenuVisibilityContext}\n * @since 5.0.0\n */\nexport function useMenuVisibility(): Readonly<MenuVisibilityContext> {\n  return useContext(context);\n}\n\n/**\n * @internal\n * @since 5.0.0\n */\nexport interface MenuVisibilityProviderProps extends MenuVisibilityContext {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 5.0.0\n */\nexport function MenuVisibilityProvider({\n  visible,\n  setVisible,\n  defaultFocusIndex,\n  children,\n}: MenuVisibilityProviderProps): ReactElement {\n  const value = useMemo<MenuVisibilityContext>(\n    () => ({\n      visible,\n      setVisible,\n      defaultFocusIndex,\n    }),\n    [visible, setVisible, defaultFocusIndex]\n  );\n\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useMemo","context","visible","setVisible","Error","defaultFocusIndex","current","displayName","Provider","useMenuVisibility","MenuVisibilityProvider","children","value"],"mappings":"AAAA;;AAEA,SAIEA,aAAa,EACbC,UAAU,EACVC,OAAO,QACF,QAAQ;AAef;;;CAGC,GACD,MAAMC,wBAAUH,cAAqC;IACnDI,SAAS;IACTC;QACE,MAAM,IAAIC,MAAM;IAClB;IACAC,mBAAmB;QAAEC,SAAS;IAAE;AAClC;AACAL,QAAQM,WAAW,GAAG;AAEtB;;;CAGC,GACD,MAAM,EAAEC,QAAQ,EAAE,GAAGP;AAErB;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASQ;IACd,OAAOV,WAAWE;AACpB;AAUA;;;;;CAKC,GACD,OAAO,SAASS,uBAAuB,EACrCR,OAAO,EACPC,UAAU,EACVE,iBAAiB,EACjBM,QAAQ,EACoB;IAC5B,MAAMC,QAAQZ,QACZ,IAAO,CAAA;YACLE;YACAC;YACAE;QACF,CAAA,GACA;QAACH;QAASC;QAAYE;KAAkB;IAG1C,qBAAO,KAACG;QAASI,OAAOA;kBAAQD;;AAClC"}

package/dist/menu/MenuWidget.d.ts

@@ -1,15 +1,15 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref, type RefObject } from "react";
 import { type GetDefaultFocusedIndex } from "../movement/types.js";
-import { type NonNullMutableRef } from "../types.js";
 import { type MenuListConvenienceProps } from "./Menu.js";
 /**
  * @internal
  */
 export interface MenuWidgetProps extends HTMLAttributes<HTMLDivElement>, MenuListConvenienceProps {
+    ref?: Ref<HTMLDivElement>;
     isSheet: boolean;
     horizontal: boolean;
     disableElevation?: boolean;
-    cancelUnmountFocus: NonNullMutableRef<boolean>;
+    cancelUnmountFocus: RefObject<boolean>;
     getDefaultFocusedIndex?: GetDefaultFocusedIndex;
 }
 /**
@@ -22,4 +22,4 @@ export interface MenuWidgetProps extends HTMLAttributes<HTMLDivElement>, MenuLis
  *
  * @internal
  */
-export declare const MenuWidget: import("react").ForwardRefExoticComponent<MenuWidgetProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function MenuWidget(props: MenuWidgetProps): ReactElement;

package/dist/menu/MenuWidget.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { List } from "../list/List.js";
 import { useKeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
 import { MenuWidgetKeyboardProvider } from "./MenuWidgetKeyboardProvider.js";
@@ -18,8 +18,8 @@ const noop = ()=>{
  * non-existing id
  *
  * @internal
- */ export const MenuWidget = /*#__PURE__*/ forwardRef(function MenuWidget(props, ref) {
-    const { id, role = "menu", className, listStyle, listClassName, listProps, children, onClick, onBlur = noop, onFocus = noop, onKeyDown = noop, tabIndex = -1, isSheet, horizontal, disableElevation, cancelUnmountFocus, getDefaultFocusedIndex, ...remaining } = props;
+ */ export function MenuWidget(props) {
+    const { ref, id, role = "menu", className, listStyle, listClassName, listProps, children, onClick, onBlur = noop, onFocus = noop, onKeyDown = noop, tabIndex = -1, isSheet, horizontal, disableElevation, cancelUnmountFocus, getDefaultFocusedIndex, ...remaining } = props;
     const isListbox = role === "listbox";
     const { menubar } = useMenuBarContext();
     // Since there is the possibility of other tab focusable elements within the
@@ -111,6 +111,6 @@ const noop = ()=>{
             })
         })
     });
-});
+}
 
 //# sourceMappingURL=MenuWidget.js.map

package/dist/menu/MenuWidget.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/menu/MenuWidget.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef, useRef, useState } from \"react\";\n\nimport { List } from \"../list/List.js\";\nimport { type GetDefaultFocusedIndex } from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type NonNullMutableRef } from \"../types.js\";\nimport { type MenuListConvenienceProps } from \"./Menu.js\";\nimport { MenuWidgetKeyboardProvider } from \"./MenuWidgetKeyboardProvider.js\";\nimport { menu } from \"./styles.js\";\nimport {\n  MenuBarProvider,\n  useMenuBarContext,\n  useMenuBarProvider,\n} from \"./useMenuBarProvider.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @internal\n */\nexport interface MenuWidgetProps\n  extends HTMLAttributes<HTMLDivElement>, MenuListConvenienceProps {\n  isSheet: boolean;\n  horizontal: boolean;\n  disableElevation?: boolean;\n  cancelUnmountFocus: NonNullMutableRef<boolean>;\n  getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n}\n\n/**\n * **Client Component**\n *\n * This component was added to support the listbox role and the `useId()` hook.\n * If the `temporary` prop is set, the `MenuItem`'s ids will not be the same the\n * next time the menu opens, so the aria-activedescendant will point to a\n * non-existing id\n *\n * @internal\n */\nexport const MenuWidget = forwardRef<HTMLDivElement, MenuWidgetProps>(\n  function MenuWidget(props, ref) {\n    const {\n      id,\n      role = \"menu\",\n      className,\n      listStyle,\n      listClassName,\n      listProps,\n      children,\n      onClick,\n      onBlur = noop,\n      onFocus = noop,\n      onKeyDown = noop,\n      tabIndex = -1,\n      isSheet,\n      horizontal,\n      disableElevation,\n      cancelUnmountFocus,\n      getDefaultFocusedIndex,\n      ...remaining\n    } = props;\n    const isListbox = role === \"listbox\";\n    const { menubar } = useMenuBarContext();\n\n    // Since there is the possibility of other tab focusable elements within the\n    // sheet and the menu items are programmatically focused, the menu's\n    // tabIndex needs to be set to `-1` while one of the child menu items are\n    // focused. This allows Shift+Tab correctly focuses the previous focusable\n    // element within the sheet. Since `onFocus` and `onBlur` will be bubbled up\n    // to the menu widget each time a new MenuItem is focused, only disable the\n    // focused state if the blur event is fired without another focus event\n    // within an animation frame.\n    const [sheetMenuFocused, setSheetMenuFocused] = useState(false);\n    const sheetBlurredFame = useRef(0);\n    const menuBarContext = useMenuBarProvider({\n      root: false,\n      menubar,\n      hoverTimeout: menubar ? 0 : undefined,\n      defaultActiveId: id,\n    });\n    const { movementProps, movementContext } = useKeyboardMovementProvider({\n      ref,\n      onClick,\n      onFocus(event) {\n        onFocus(event);\n\n        if (!isSheet) {\n          return;\n        }\n\n        globalThis.cancelAnimationFrame(sheetBlurredFame.current);\n        setSheetMenuFocused(true);\n      },\n      onKeyDown,\n      horizontal,\n      loopable: true,\n      searchable: true,\n      programmatic: true,\n      includeDisabled: true,\n      getDefaultFocusedIndex,\n    });\n\n    return (\n      <MenuWidgetKeyboardProvider disabled={isListbox} value={movementContext}>\n        <MenuBarProvider value={menuBarContext}>\n          <div\n            aria-orientation={horizontal ? \"horizontal\" : undefined}\n            {...remaining}\n            {...(isListbox\n              ? { onClick, onFocus, onKeyDown, ref }\n              : movementProps)}\n            id={id}\n            role={role}\n            className={menu({\n              className,\n              elevated: !disableElevation && !isSheet,\n              horizontal,\n            })}\n            tabIndex={isSheet && !sheetMenuFocused ? 0 : tabIndex}\n            onBlur={(event) => {\n              onBlur(event);\n              if (!isSheet) {\n                return;\n              }\n\n              sheetBlurredFame.current = globalThis.requestAnimationFrame(\n                () => {\n                  setSheetMenuFocused(false);\n                }\n              );\n            }}\n          >\n            <List\n              {...listProps}\n              style={listStyle ?? listProps?.style}\n              className={listClassName || listProps?.className}\n              horizontal={horizontal}\n              onClick={(event) => {\n                listProps?.onClick?.(event);\n\n                // this makes it so you can click on the menu/list without\n                // closing the menu\n                if (event.target === event.currentTarget) {\n                  event.stopPropagation();\n                }\n\n                // This might be a test only workaround since clicking links move focus\n                // somewhere else\n                if (event.target instanceof HTMLElement) {\n                  cancelUnmountFocus.current = event.currentTarget.contains(\n                    event.target.closest(\"a\")\n                  );\n                }\n              }}\n            >\n              {children}\n            </List>\n          </div>\n        </MenuBarProvider>\n      </MenuWidgetKeyboardProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useRef","useState","List","useKeyboardMovementProvider","MenuWidgetKeyboardProvider","menu","MenuBarProvider","useMenuBarContext","useMenuBarProvider","noop","MenuWidget","props","ref","id","role","className","listStyle","listClassName","listProps","children","onClick","onBlur","onFocus","onKeyDown","tabIndex","isSheet","horizontal","disableElevation","cancelUnmountFocus","getDefaultFocusedIndex","remaining","isListbox","menubar","sheetMenuFocused","setSheetMenuFocused","sheetBlurredFame","menuBarContext","root","hoverTimeout","undefined","defaultActiveId","movementProps","movementContext","event","globalThis","cancelAnimationFrame","current","loopable","searchable","programmatic","includeDisabled","disabled","value","div","aria-orientation","elevated","requestAnimationFrame","style","target","currentTarget","stopPropagation","HTMLElement","contains","closest"],"mappings":"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"}
+{"version":3,"sources":["../../src/menu/MenuWidget.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type Ref,\n  type RefObject,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { List } from \"../list/List.js\";\nimport { type GetDefaultFocusedIndex } from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type MenuListConvenienceProps } from \"./Menu.js\";\nimport { MenuWidgetKeyboardProvider } from \"./MenuWidgetKeyboardProvider.js\";\nimport { menu } from \"./styles.js\";\nimport {\n  MenuBarProvider,\n  useMenuBarContext,\n  useMenuBarProvider,\n} from \"./useMenuBarProvider.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @internal\n */\nexport interface MenuWidgetProps\n  extends HTMLAttributes<HTMLDivElement>, MenuListConvenienceProps {\n  ref?: Ref<HTMLDivElement>;\n  isSheet: boolean;\n  horizontal: boolean;\n  disableElevation?: boolean;\n  cancelUnmountFocus: RefObject<boolean>;\n  getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n}\n\n/**\n * **Client Component**\n *\n * This component was added to support the listbox role and the `useId()` hook.\n * If the `temporary` prop is set, the `MenuItem`'s ids will not be the same the\n * next time the menu opens, so the aria-activedescendant will point to a\n * non-existing id\n *\n * @internal\n */\nexport function MenuWidget(props: MenuWidgetProps): ReactElement {\n  const {\n    ref,\n    id,\n    role = \"menu\",\n    className,\n    listStyle,\n    listClassName,\n    listProps,\n    children,\n    onClick,\n    onBlur = noop,\n    onFocus = noop,\n    onKeyDown = noop,\n    tabIndex = -1,\n    isSheet,\n    horizontal,\n    disableElevation,\n    cancelUnmountFocus,\n    getDefaultFocusedIndex,\n    ...remaining\n  } = props;\n  const isListbox = role === \"listbox\";\n  const { menubar } = useMenuBarContext();\n\n  // Since there is the possibility of other tab focusable elements within the\n  // sheet and the menu items are programmatically focused, the menu's\n  // tabIndex needs to be set to `-1` while one of the child menu items are\n  // focused. This allows Shift+Tab correctly focuses the previous focusable\n  // element within the sheet. Since `onFocus` and `onBlur` will be bubbled up\n  // to the menu widget each time a new MenuItem is focused, only disable the\n  // focused state if the blur event is fired without another focus event\n  // within an animation frame.\n  const [sheetMenuFocused, setSheetMenuFocused] = useState(false);\n  const sheetBlurredFame = useRef(0);\n  const menuBarContext = useMenuBarProvider({\n    root: false,\n    menubar,\n    hoverTimeout: menubar ? 0 : undefined,\n    defaultActiveId: id,\n  });\n  const { movementProps, movementContext } = useKeyboardMovementProvider({\n    ref,\n    onClick,\n    onFocus(event) {\n      onFocus(event);\n\n      if (!isSheet) {\n        return;\n      }\n\n      globalThis.cancelAnimationFrame(sheetBlurredFame.current);\n      setSheetMenuFocused(true);\n    },\n    onKeyDown,\n    horizontal,\n    loopable: true,\n    searchable: true,\n    programmatic: true,\n    includeDisabled: true,\n    getDefaultFocusedIndex,\n  });\n\n  return (\n    <MenuWidgetKeyboardProvider disabled={isListbox} value={movementContext}>\n      <MenuBarProvider value={menuBarContext}>\n        <div\n          aria-orientation={horizontal ? \"horizontal\" : undefined}\n          {...remaining}\n          {...(isListbox\n            ? { onClick, onFocus, onKeyDown, ref }\n            : movementProps)}\n          id={id}\n          role={role}\n          className={menu({\n            className,\n            elevated: !disableElevation && !isSheet,\n            horizontal,\n          })}\n          tabIndex={isSheet && !sheetMenuFocused ? 0 : tabIndex}\n          onBlur={(event) => {\n            onBlur(event);\n            if (!isSheet) {\n              return;\n            }\n\n            sheetBlurredFame.current = globalThis.requestAnimationFrame(() => {\n              setSheetMenuFocused(false);\n            });\n          }}\n        >\n          <List\n            {...listProps}\n            style={listStyle ?? listProps?.style}\n            className={listClassName || listProps?.className}\n            horizontal={horizontal}\n            onClick={(event) => {\n              listProps?.onClick?.(event);\n\n              // this makes it so you can click on the menu/list without\n              // closing the menu\n              if (event.target === event.currentTarget) {\n                event.stopPropagation();\n              }\n\n              // This might be a test only workaround since clicking links move focus\n              // somewhere else\n              if (event.target instanceof HTMLElement) {\n                cancelUnmountFocus.current = event.currentTarget.contains(\n                  event.target.closest(\"a\")\n                );\n              }\n            }}\n          >\n            {children}\n          </List>\n        </div>\n      </MenuBarProvider>\n    </MenuWidgetKeyboardProvider>\n  );\n}\n"],"names":["useRef","useState","List","useKeyboardMovementProvider","MenuWidgetKeyboardProvider","menu","MenuBarProvider","useMenuBarContext","useMenuBarProvider","noop","MenuWidget","props","ref","id","role","className","listStyle","listClassName","listProps","children","onClick","onBlur","onFocus","onKeyDown","tabIndex","isSheet","horizontal","disableElevation","cancelUnmountFocus","getDefaultFocusedIndex","remaining","isListbox","menubar","sheetMenuFocused","setSheetMenuFocused","sheetBlurredFame","menuBarContext","root","hoverTimeout","undefined","defaultActiveId","movementProps","movementContext","event","globalThis","cancelAnimationFrame","current","loopable","searchable","programmatic","includeDisabled","disabled","value","div","aria-orientation","elevated","requestAnimationFrame","style","target","currentTarget","stopPropagation","HTMLElement","contains","closest"],"mappings":"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"}

package/dist/menu/useContextMenu.d.ts

@@ -1,11 +1,11 @@
-import type { MouseEvent, RefObject } from "react";
-import type { InitialCoords, PositionAnchor } from "../positioning/types.js";
-import type { UseStateObject } from "../types.js";
+import { type MouseEvent, type RefObject } from "react";
+import { type InitialCoords, type PositionAnchor } from "../positioning/types.js";
+import { type UseStateObject } from "../types.js";
 /** @since 6.0.0 */
 export interface ContextMenuProps extends InitialCoords {
     "aria-label": string;
     anchor: PositionAnchor;
-    fixedTo: RefObject<HTMLElement>;
+    fixedTo: RefObject<HTMLElement | null>;
     visible: boolean;
     preventScroll: boolean;
     onRequestClose: () => void;

package/dist/menu/useContextMenu.js.map

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

package/dist/movement/types.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes, type KeyboardEvent, type Ref, type RefCallback, type RefObject } from "react";
-import { type NonNullMutableRef, type NonNullRef, type UseStateSetter } from "../types.js";
+import { type UseStateSetter } from "../types.js";
 /**
  * Set this to `"roving"` when:
  * - there are a group of focusable elements that have a `tabIndex={-1}`
@@ -147,7 +147,7 @@ export interface KeyboardMovementUpdateFocusIndexOptions {
  */
 export interface KeyboardMovementContext extends Required<KeyboardMovementBehavior> {
     /** {@inheritDoc KeyboardMovementConfig} */
-    config: NonNullRef<KeyboardMovementConfig>;
+    config: RefObject<KeyboardMovementConfig>;
     /** @see {@link TabIndexBehavior} */
     tabIndexBehavior: TabIndexBehavior | undefined;
     /**
@@ -221,7 +221,7 @@ export type KeyboardMovementFocusChangeEventHandler = (event: KeyboardMovementFo
  */
 export interface KeyboardMovementExtensionData<E extends HTMLElement> extends KeyboardMovementContext {
     event: KeyboardEvent<E>;
-    currentFocusIndex: NonNullMutableRef<number>;
+    currentFocusIndex: RefObject<number>;
     setFocusIndex: (index: number, focusables: readonly HTMLElement[]) => void;
     setActiveDescendantId: (id: string) => void;
 }
@@ -313,10 +313,10 @@ export interface KeyboardMovementProps<E extends HTMLElement> extends Required<K
  * @internal
  */
 export interface KeyboardMovementProviderImplementation<E extends HTMLElement> {
-    nodeRef: RefObject<E>;
+    nodeRef: RefObject<E | null>;
     movementProps: Readonly<KeyboardMovementProps<E>>;
     movementContext: Readonly<KeyboardMovementContext>;
-    currentFocusIndex: NonNullMutableRef<number>;
+    currentFocusIndex: RefObject<number>;
     activeDescendantId: string;
     setActiveDescendantId: UseStateSetter<string>;
 }

package/dist/movement/types.js.map

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