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

package/dist/expansion-panel/useExpansionPanels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/expansion-panel/useExpansionPanels.ts"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport type { ExpansionPanelProps } from \"./ExpansionPanel.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface ExpansionPanelHookOptions {\n  /**\n   * An optional id to prefix each panel with.\n   *\n   * @defaultValue `\"expansion-panel-\" + useId()`\n   */\n  baseId?: string;\n\n  /**\n   * Set this to `true` if multiple panels can be open at the same time.\n   *\n   * @defaultValue `false`\n   */\n  multiple?: boolean;\n\n  /**\n   * Set this to `true` to enforce that at least one panel must always be\n   * expanded.\n   *\n   * @defaultValue `false`\n   */\n  preventAllClosed?: boolean;\n\n  /**\n   * This is a convenience option to disable the expansion transition for all\n   * panels.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @defaultValue `preventAllClosed ? [\"expansion-panel-\" + useId() + \"-1\"] : []`\n   */\n  defaultExpandedIds?: UseStateInitializer<string[]>;\n\n  /**\n   * This can only be used if the {@link defaultExpandedIds} was not provided\n   * and using index based panels.\n   *\n   * @example\n   * ```tsx\n   * const { getPanelProps } = useExpansionPanels({\n   *   defaultExpandedIndex: 2,\n   * });\n   *\n   * return (\n   *   <ExpansionPanel {...getPanelProps(0)} />\n   *   <ExpansionPanel {...getPanelProps(1)} />\n   *   // expanded on first render\n   *   <ExpansionPanel {...getPanelProps(2)} />\n   *   <ExpansionPanel {...getPanelProps(3)} />\n   * );\n   * ```\n   */\n  defaultExpandedIndex?: number;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableContentPadding?: boolean;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type ProvidedExpansionPanelProps = Pick<\n  Required<ExpansionPanelProps>,\n  | \"id\"\n  | \"disabled\"\n  | \"expanded\"\n  | \"onExpandClick\"\n  | \"disableTransition\"\n  | \"disableContentPadding\"\n>;\n\n/**\n * @param indexOrPanelId - This should either be a DOM id to use for the panel\n * or the panel's index.\n * @returns Props to pass to an `ExpansionPanel` for it to work correctly.\n * @remarks \\@since 6.0.0\n */\nexport type GetExpansionPanelProps = (\n  indexOrPanelId: string | number\n) => ProvidedExpansionPanelProps;\n\n/** @remarks \\@since 6.0.0 */\nexport interface ExpansionPanelImplementation {\n  /**\n   * The current set of expanded panel ids if you need this for some reason.\n   */\n  expandedIds: ReadonlySet<string>;\n\n  /**\n   * This can be used to manually control which panels are expanded if the\n   * default behavior does not work for your use case.\n   */\n  setExpandedIds: UseStateSetter<ReadonlySet<string>>;\n\n  /**\n   * @example\n   * Index Based Panels\n   * ```tsx\n   * <ExpansionPanel {...getPanelProps(0)} />\n   * <ExpansionPanel {...getPanelProps(1)} />\n   * <ExpansionPanel {...getPanelProps(2)} />\n   * ```\n   *\n   * @example\n   * Custom Panel Ids\n   * ```tsx\n   * <ExpansionPanel {...getPanelProps(\"address-panel\")} />\n   * <ExpansionPanel {...getPanelProps(\"billing-panel\")} />\n   * <ExpansionPanel {...getPanelProps(\"confirmation-panel\")} />\n   * ```\n   */\n  getPanelProps: GetExpansionPanelProps;\n}\n\n/**\n * Use this hook to control the expanded state for a group of `ExpansionPanel`.\n *\n * @example\n * Index Based Panels\n * ```tsx\n * import {\n *   ExpansionList,\n *   ExpansionPanel,\n *   useExpansionPanels,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { getPanelProps } = useExpansionPanels();\n *\n *   return (\n *     <ExpansionList>\n *       <ExpansionPanel {...getPanelProps(0)} headerChildren=\"Panel 1\">\n *         Panel 1 Contents\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(1)} headerChildren=\"Panel 2\">\n *         Panel 2 Contents\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(2)} headerChildren=\"Panel 3\">\n *         Panel 3 Contents\n *       </ExpansionPanel>\n *     </ExpansionList>\n *   );\n * }\n * ```\n *\n * @example\n * Custom Panel Ids and Expand All Panels by Default\n * ```tsx\n * import {\n *   ExpansionList,\n *   ExpansionPanel,\n *   useExpansionPanels,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * import { BillingAddress } from \"./BillingAddress\";\n * import { BillingInformation } from \"./BillingInformation\";\n * import { PersonalInformation } from \"./PersonalInformation\";\n *\n * const panel1Id = \"personal-information-panel\";\n * const panel2Id = \"billing-information-panel\";\n * const panel3Id = \"billing-address-panel\";\n *\n * function Example(): ReactElement {\n *   const { getPanelProps } = useExpansionPanels({\n *     multiple: true,\n *     defaultExpandedIds: () => [panel1Id, panel2Id, panel3Id],\n *   });\n *\n *   return (\n *     <ExpansionList>\n *       <ExpansionPanel {...getPanelProps(panel1Id)} headerChildren=\"Personal Information\">\n *         <PersonalInformation />\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(panel2Id)} headerChildren=\"Billing Information\">\n *         <BillingInformation />\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(panel3Id)} headerChildren=\"Billing Address\">\n *         <BillingAddress />\n *       </ExpansionPanel>\n *     </ExpansionList>\n *   );\n * }\n * ```\n *\n *\n * @remarks\n * \\@since 6.0.0 The hook was renamed from `usePanels` to `useExpansionPanels`,\n * the API changed to return `getPanelProps` instead of a generated list of\n * panel props based on the provided `count`, and the hook no longer supports\n * having all panels expanded by default.\n */\nexport function useExpansionPanels(\n  options: ExpansionPanelHookOptions = {}\n): ExpansionPanelImplementation {\n  const {\n    baseId: propBaseId,\n    multiple = false,\n    preventAllClosed = false,\n    disableTransition = false,\n    defaultExpandedIds,\n    defaultExpandedIndex,\n    disableContentPadding = false,\n  } = options;\n\n  const baseId = useEnsuredId(propBaseId, \"expansion-panel\");\n  const createId = (index: number): string => `${baseId}-${index + 1}`;\n  const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(() => {\n    if (typeof defaultExpandedIds === \"undefined\") {\n      const initialList: string[] = [];\n      if (typeof defaultExpandedIndex === \"number\" || preventAllClosed) {\n        initialList.push(createId(defaultExpandedIndex ?? 0));\n      }\n\n      return new Set(initialList);\n    }\n\n    const ids =\n      typeof defaultExpandedIds === \"function\"\n        ? defaultExpandedIds()\n        : defaultExpandedIds;\n    return new Set(ids);\n  });\n\n  return {\n    expandedIds,\n    setExpandedIds,\n    getPanelProps(indexOrPanelId) {\n      const id =\n        typeof indexOrPanelId === \"string\"\n          ? indexOrPanelId\n          : createId(indexOrPanelId);\n\n      const expanded = expandedIds.has(id);\n      const disabled = expanded && preventAllClosed && expandedIds.size === 1;\n      return {\n        id,\n        disabled,\n        expanded,\n        onExpandClick() {\n          if (disabled) {\n            return;\n          }\n\n          setExpandedIds((prevIds) => {\n            const expanded = prevIds.has(id);\n            if (!multiple) {\n              return new Set(expanded ? [] : [id]);\n            }\n\n            const nextIds = new Set(prevIds);\n            if (expanded) {\n              nextIds.delete(id);\n            } else {\n              nextIds.add(id);\n            }\n\n            return nextIds;\n          });\n        },\n        disableTransition,\n        disableContentPadding,\n      };\n    },\n  };\n}\n"],"names":["useState","useEnsuredId","useExpansionPanels","options","baseId","propBaseId","multiple","preventAllClosed","disableTransition","defaultExpandedIds","defaultExpandedIndex","disableContentPadding","createId","index","expandedIds","setExpandedIds","initialList","push","Set","ids","getPanelProps","indexOrPanelId","id","expanded","has","disabled","size","onExpandClick","prevIds","nextIds","delete","add"],"mappings":"AAAA;AACA,SAASA,QAAQ,QAAQ,QAAQ;AAEjC,SAASC,YAAY,QAAQ,qBAAqB;AAyHlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EC,GACD,OAAO,SAASC,mBACdC,UAAqC,CAAC,CAAC;IAEvC,MAAM,EACJC,QAAQC,UAAU,EAClBC,WAAW,KAAK,EAChBC,mBAAmB,KAAK,EACxBC,oBAAoB,KAAK,EACzBC,kBAAkB,EAClBC,oBAAoB,EACpBC,wBAAwB,KAAK,EAC9B,GAAGR;IAEJ,MAAMC,SAASH,aAAaI,YAAY;IACxC,MAAMO,WAAW,CAACC,QAA0B,CAAC,EAAET,OAAO,CAAC,EAAES,QAAQ,EAAE,CAAC;IACpE,MAAM,CAACC,aAAaC,eAAe,GAAGf,SAA8B;QAClE,IAAI,OAAOS,uBAAuB,aAAa;YAC7C,MAAMO,cAAwB,EAAE;YAChC,IAAI,OAAON,yBAAyB,YAAYH,kBAAkB;gBAChES,YAAYC,IAAI,CAACL,SAASF,wBAAwB;YACpD;YAEA,OAAO,IAAIQ,IAAIF;QACjB;QAEA,MAAMG,MACJ,OAAOV,uBAAuB,aAC1BA,uBACAA;QACN,OAAO,IAAIS,IAAIC;IACjB;IAEA,OAAO;QACLL;QACAC;QACAK,eAAcC,cAAc;YAC1B,MAAMC,KACJ,OAAOD,mBAAmB,WACtBA,iBACAT,SAASS;YAEf,MAAME,WAAWT,YAAYU,GAAG,CAACF;YACjC,MAAMG,WAAWF,YAAYhB,oBAAoBO,YAAYY,IAAI,KAAK;YACtE,OAAO;gBACLJ;gBACAG;gBACAF;gBACAI;oBACE,IAAIF,UAAU;wBACZ;oBACF;oBAEAV,eAAe,CAACa;wBACd,MAAML,WAAWK,QAAQJ,GAAG,CAACF;wBAC7B,IAAI,CAAChB,UAAU;4BACb,OAAO,IAAIY,IAAIK,WAAW,EAAE,GAAG;gCAACD;6BAAG;wBACrC;wBAEA,MAAMO,UAAU,IAAIX,IAAIU;wBACxB,IAAIL,UAAU;4BACZM,QAAQC,MAAM,CAACR;wBACjB,OAAO;4BACLO,QAAQE,GAAG,CAACT;wBACd;wBAEA,OAAOO;oBACT;gBACF;gBACArB;gBACAG;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/expansion-panel/useExpansionPanels.ts"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport type { ExpansionPanelProps } from \"./ExpansionPanel.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface ExpansionPanelHookOptions {\n  /**\n   * An optional id to prefix each panel with.\n   *\n   * @defaultValue `\"expansion-panel-\" + useId()`\n   */\n  baseId?: string;\n\n  /**\n   * Set this to `true` if multiple panels can be open at the same time.\n   *\n   * @defaultValue `false`\n   */\n  multiple?: boolean;\n\n  /**\n   * Set this to `true` to enforce that at least one panel must always be\n   * expanded.\n   *\n   * @defaultValue `false`\n   */\n  preventAllCollapsed?: boolean;\n\n  /**\n   * This is a convenience option to disable the expansion transition for all\n   * panels.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @defaultValue `preventAllCollapsed ? [\"expansion-panel-\" + useId() + \"-1\"] : []`\n   */\n  defaultExpandedIds?: UseStateInitializer<string[]>;\n\n  /**\n   * This can only be used if the {@link defaultExpandedIds} was not provided\n   * and using index based panels.\n   *\n   * @example\n   * ```tsx\n   * const { getPanelProps } = useExpansionPanels({\n   *   defaultExpandedIndex: 2,\n   * });\n   *\n   * return (\n   *   <ExpansionPanel {...getPanelProps(0)} />\n   *   <ExpansionPanel {...getPanelProps(1)} />\n   *   // expanded on first render\n   *   <ExpansionPanel {...getPanelProps(2)} />\n   *   <ExpansionPanel {...getPanelProps(3)} />\n   * );\n   * ```\n   */\n  defaultExpandedIndex?: number;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableContentPadding?: boolean;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type ProvidedExpansionPanelProps = Pick<\n  Required<ExpansionPanelProps>,\n  | \"disabled\"\n  | \"expanded\"\n  | \"onExpandClick\"\n  | \"disableTransition\"\n  | \"disableContentPadding\"\n> & { id?: string };\n\n/**\n * @param indexOrPanelId - This should either be a DOM id to use for the panel\n * or the panel's index.\n * @returns Props to pass to an `ExpansionPanel` for it to work correctly.\n * @remarks \\@since 6.0.0\n */\nexport type GetExpansionPanelProps = (\n  indexOrPanelId: string | number\n) => ProvidedExpansionPanelProps;\n\n/** @remarks \\@since 6.0.0 */\nexport interface ExpansionPanelImplementation {\n  /**\n   * The current set of expanded panel ids if you need this for some reason.\n   */\n  expandedIds: ReadonlySet<string>;\n\n  /**\n   * This can be used to manually control which panels are expanded if the\n   * default behavior does not work for your use case.\n   */\n  setExpandedIds: UseStateSetter<ReadonlySet<string>>;\n\n  /**\n   * @example\n   * Index Based Panels\n   * ```tsx\n   * <ExpansionPanel {...getPanelProps(0)} />\n   * <ExpansionPanel {...getPanelProps(1)} />\n   * <ExpansionPanel {...getPanelProps(2)} />\n   * ```\n   *\n   * @example\n   * Custom Panel Ids\n   * ```tsx\n   * <ExpansionPanel {...getPanelProps(\"address-panel\")} />\n   * <ExpansionPanel {...getPanelProps(\"billing-panel\")} />\n   * <ExpansionPanel {...getPanelProps(\"confirmation-panel\")} />\n   * ```\n   */\n  getPanelProps: GetExpansionPanelProps;\n}\n\n/**\n * Use this hook to control the expanded state for a group of `ExpansionPanel`.\n *\n * @example\n * Index Based Panels\n * ```tsx\n * import {\n *   ExpansionList,\n *   ExpansionPanel,\n *   useExpansionPanels,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { getPanelProps } = useExpansionPanels();\n *\n *   return (\n *     <ExpansionList>\n *       <ExpansionPanel {...getPanelProps(0)} headerChildren=\"Panel 1\">\n *         Panel 1 Contents\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(1)} headerChildren=\"Panel 2\">\n *         Panel 2 Contents\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(2)} headerChildren=\"Panel 3\">\n *         Panel 3 Contents\n *       </ExpansionPanel>\n *     </ExpansionList>\n *   );\n * }\n * ```\n *\n * @example\n * Custom Panel Ids and Expand All Panels by Default\n * ```tsx\n * import {\n *   ExpansionList,\n *   ExpansionPanel,\n *   useExpansionPanels,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * import { BillingAddress } from \"./BillingAddress\";\n * import { BillingInformation } from \"./BillingInformation\";\n * import { PersonalInformation } from \"./PersonalInformation\";\n *\n * const panel1Id = \"personal-information-panel\";\n * const panel2Id = \"billing-information-panel\";\n * const panel3Id = \"billing-address-panel\";\n *\n * function Example(): ReactElement {\n *   const { getPanelProps } = useExpansionPanels({\n *     multiple: true,\n *     defaultExpandedIds: () => [panel1Id, panel2Id, panel3Id],\n *   });\n *\n *   return (\n *     <ExpansionList>\n *       <ExpansionPanel {...getPanelProps(panel1Id)} headerChildren=\"Personal Information\">\n *         <PersonalInformation />\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(panel2Id)} headerChildren=\"Billing Information\">\n *         <BillingInformation />\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(panel3Id)} headerChildren=\"Billing Address\">\n *         <BillingAddress />\n *       </ExpansionPanel>\n *     </ExpansionList>\n *   );\n * }\n * ```\n *\n *\n * @remarks\n * \\@since 6.0.0 The hook was renamed from `usePanels` to `useExpansionPanels`,\n * the API changed to return `getPanelProps` instead of a generated list of\n * panel props based on the provided `count`, and the hook no longer supports\n * having all panels expanded by default.\n */\nexport function useExpansionPanels(\n  options: ExpansionPanelHookOptions = {}\n): ExpansionPanelImplementation {\n  const {\n    baseId: propBaseId,\n    multiple = false,\n    preventAllCollapsed = false,\n    disableTransition = false,\n    defaultExpandedIds,\n    defaultExpandedIndex,\n    disableContentPadding = false,\n  } = options;\n\n  const baseId = useEnsuredId(propBaseId, \"expansion-panel\");\n  const createId = (index: number): string => `${baseId}-${index + 1}`;\n  const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(() => {\n    if (typeof defaultExpandedIds === \"undefined\") {\n      const initialList: string[] = [];\n      if (typeof defaultExpandedIndex === \"number\" || preventAllCollapsed) {\n        initialList.push(createId(defaultExpandedIndex ?? 0));\n      }\n\n      return new Set(initialList);\n    }\n\n    const ids =\n      typeof defaultExpandedIds === \"function\"\n        ? defaultExpandedIds()\n        : defaultExpandedIds;\n    return new Set(ids);\n  });\n\n  return {\n    expandedIds,\n    setExpandedIds,\n    getPanelProps(indexOrPanelId) {\n      let id: string | undefined;\n      let panelId: string;\n      if (typeof indexOrPanelId === \"number\") {\n        id = createId(indexOrPanelId);\n        panelId = id;\n      } else {\n        panelId = indexOrPanelId;\n      }\n\n      const expanded = expandedIds.has(panelId);\n      const disabled =\n        expanded && preventAllCollapsed && expandedIds.size === 1;\n      return {\n        id,\n        disabled,\n        expanded,\n        onExpandClick() {\n          if (disabled) {\n            return;\n          }\n\n          setExpandedIds((prevIds) => {\n            const expanded = prevIds.has(panelId);\n            if (!multiple) {\n              return new Set(expanded ? [] : [panelId]);\n            }\n\n            const nextIds = new Set(prevIds);\n            if (expanded) {\n              nextIds.delete(panelId);\n            } else {\n              nextIds.add(panelId);\n            }\n\n            return nextIds;\n          });\n        },\n        disableTransition,\n        disableContentPadding,\n      };\n    },\n  };\n}\n"],"names":["useState","useEnsuredId","useExpansionPanels","options","baseId","propBaseId","multiple","preventAllCollapsed","disableTransition","defaultExpandedIds","defaultExpandedIndex","disableContentPadding","createId","index","expandedIds","setExpandedIds","initialList","push","Set","ids","getPanelProps","indexOrPanelId","id","panelId","expanded","has","disabled","size","onExpandClick","prevIds","nextIds","delete","add"],"mappings":"AAAA;AACA,SAASA,QAAQ,QAAQ,QAAQ;AAEjC,SAASC,YAAY,QAAQ,qBAAqB;AAwHlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EC,GACD,OAAO,SAASC,mBACdC,UAAqC,CAAC,CAAC;IAEvC,MAAM,EACJC,QAAQC,UAAU,EAClBC,WAAW,KAAK,EAChBC,sBAAsB,KAAK,EAC3BC,oBAAoB,KAAK,EACzBC,kBAAkB,EAClBC,oBAAoB,EACpBC,wBAAwB,KAAK,EAC9B,GAAGR;IAEJ,MAAMC,SAASH,aAAaI,YAAY;IACxC,MAAMO,WAAW,CAACC,QAA0B,CAAC,EAAET,OAAO,CAAC,EAAES,QAAQ,EAAE,CAAC;IACpE,MAAM,CAACC,aAAaC,eAAe,GAAGf,SAA8B;QAClE,IAAI,OAAOS,uBAAuB,aAAa;YAC7C,MAAMO,cAAwB,EAAE;YAChC,IAAI,OAAON,yBAAyB,YAAYH,qBAAqB;gBACnES,YAAYC,IAAI,CAACL,SAASF,wBAAwB;YACpD;YAEA,OAAO,IAAIQ,IAAIF;QACjB;QAEA,MAAMG,MACJ,OAAOV,uBAAuB,aAC1BA,uBACAA;QACN,OAAO,IAAIS,IAAIC;IACjB;IAEA,OAAO;QACLL;QACAC;QACAK,eAAcC,cAAc;YAC1B,IAAIC;YACJ,IAAIC;YACJ,IAAI,OAAOF,mBAAmB,UAAU;gBACtCC,KAAKV,SAASS;gBACdE,UAAUD;YACZ,OAAO;gBACLC,UAAUF;YACZ;YAEA,MAAMG,WAAWV,YAAYW,GAAG,CAACF;YACjC,MAAMG,WACJF,YAAYjB,uBAAuBO,YAAYa,IAAI,KAAK;YAC1D,OAAO;gBACLL;gBACAI;gBACAF;gBACAI;oBACE,IAAIF,UAAU;wBACZ;oBACF;oBAEAX,eAAe,CAACc;wBACd,MAAML,WAAWK,QAAQJ,GAAG,CAACF;wBAC7B,IAAI,CAACjB,UAAU;4BACb,OAAO,IAAIY,IAAIM,WAAW,EAAE,GAAG;gCAACD;6BAAQ;wBAC1C;wBAEA,MAAMO,UAAU,IAAIZ,IAAIW;wBACxB,IAAIL,UAAU;4BACZM,QAAQC,MAAM,CAACR;wBACjB,OAAO;4BACLO,QAAQE,GAAG,CAACT;wBACd;wBAEA,OAAOO;oBACT;gBACF;gBACAtB;gBACAG;YACF;QACF;IACF;AACF"}

package/dist/focus/useFocusContainer.d.ts

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

package/dist/focus/useFocusContainer.js

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

package/dist/focus/useFocusContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/focus/useFocusContainer.ts"],"sourcesContent":["\"use client\";\nimport type { KeyboardEventHandler, Ref, RefObject } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport type {\n  TransitionCallbacks,\n  TransitionEnterHandler,\n  TransitionExitHandler,\n} from \"../transition/types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport type { FocusElementWithinType } from \"./utils.js\";\nimport { focusElementWithin, getFocusableElements } from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * `\"mount\"` - this will attempt to focus the container element if:\n * - there is no `document.activeElement`\n * - the container element does not contain the `document.activeElement`\n *\n * `\"unmount\"` - attempts to re-focus the element that was focused before the\n * focus container became active. The previous focus element is captured\n * whenever the `activate` option on the `useFocusContainer` hook is set to\n * `true`. This is normally when an element becomes `visible`.\n *\n * `\"keyboard\"` - refocuses the first focusable element if pressing `Tab` would\n * move the focus outside of the container element. If `Shift + Tab` was used,\n * the last focusable element will be used instead.\n *\n * @remarks \\@since 6.0.0\n */\nexport type FocusType = \"mount\" | \"unmount\" | \"keyboard\";\n\n/** @remarks \\@since 6.0.0 */\nexport type FocusContainerTransitionCallbacks = Pick<\n  TransitionCallbacks,\n  \"onEntering\" | \"onEntered\" | \"onExiting\" | \"onExited\"\n>;\n\n/** @remarks \\@since 6.0.0 */\nexport interface FocusContainerTransitionOptions<E extends HTMLElement>\n  extends FocusContainerTransitionCallbacks {\n  /**\n   * An optional ref that will be merged with the\n   * {@link FocusContainerImplementation.nodeRef}\n   */\n  nodeRef?: Ref<E>;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface FocusContainerEventHandlers<E extends HTMLElement> {\n  onKeyDown?: KeyboardEventHandler<E>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type IsFocusTypeDisabled = (type: FocusType) => boolean;\n\nexport interface FocusContainerComponentProps {\n  /**\n   * @defaultValue `() => false`\n   */\n  isFocusTypeDisabled?: IsFocusTypeDisabled;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface FocusContainerOptions<E extends HTMLElement>\n  extends FocusContainerTransitionOptions<E>,\n    FocusContainerComponentProps {\n  onKeyDown?: KeyboardEventHandler<E>;\n  /**\n   * This to `true` will capture the current focused element as a focus target\n   * once the `onExited` hook is fired. This should usually be set to the\n   * `transitionIn` prop for `useTransition`.\n   */\n  activate: boolean;\n\n  /**\n   * Set this to true if elements that can be programmatically focused should be\n   * included. These would be elements with a `tabIndex={-1}`.\n   *\n   * @defaultValue `false`\n   */\n  programmatic?: boolean;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface FocusContainerImplementation<E extends HTMLElement> {\n  nodeRef: RefObject<E>;\n  eventHandlers: Required<FocusContainerEventHandlers<E>>;\n  transitionOptions: Required<FocusContainerTransitionOptions<E>>;\n}\n\n/**\n * This hook is mostly for internal use only for dialog accessibility behavior\n * to prevent the focus from moving outside of the dialog while it is visible.\n * This API was developed to be used with the `useCSSTransition`/`useTransition`\n * hooks as well.\n *\n * @example\n * Main Usage\n * ```tsx\n * import {\n *   Button,\n *   useFocusContainer,\n *   useScaleTransition,\n *   useToggle,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { toggled, toggle } = useToggle(false);\n *\n *   const { eventHandlers, transitionOptions } = useFocusContainer({\n *     activate: visible,\n *   });\n *   const { elementProps, rendered } = useScaleTransition({\n *     transitionIn: visible,\n *     temporary: true,\n *     ...transitionOptions,\n *   });\n *\n *   return (\n *     <>\n *       <Button onClick={toggle}>Toggle</Button>\n *       {rendered && (\n *         <div {...eventHandlers} {...elementProps}>\n *           <Button>Button 1</Button>\n *           <Button>Button 2</Button>\n *           <Button>Button 3</Button>\n *           <Button>Button 4</Button>\n *         </div>\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useFocusContainer<E extends HTMLElement>(\n  options: FocusContainerOptions<E>\n): FocusContainerImplementation<E> {\n  const {\n    nodeRef,\n    activate,\n    onEntering = noop,\n    onEntered = noop,\n    onExiting = noop,\n    onExited = noop,\n    onKeyDown = noop,\n    programmatic = false,\n    disableTransition = false,\n    isFocusTypeDisabled = noop,\n  } = options;\n\n  const [ref, refCallback] = useEnsuredRef(nodeRef);\n  const prevFocus = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!activate || !(document.activeElement instanceof HTMLElement)) {\n      return;\n    }\n\n    prevFocus.current = document.activeElement;\n  }, [activate]);\n\n  const handleMountFocus =\n    (callback: TransitionEnterHandler, skipped: boolean) =>\n    (appearing: boolean) => {\n      callback(appearing);\n      const instance = ref.current;\n      if (\n        instance &&\n        !skipped &&\n        !isFocusTypeDisabled(\"mount\") &&\n        (!document.activeElement || !instance.contains(document.activeElement))\n      ) {\n        instance.focus();\n      }\n    };\n\n  const handleUnmountFocus =\n    (callback: TransitionExitHandler, skipped: boolean) => (): void => {\n      callback();\n      if (skipped || isFocusTypeDisabled(\"unmount\")) {\n        return;\n      }\n\n      // For some reason, the `\"Enter\"` keydown event fires at a different timing\n      // than the Space  keydown event.\n      window.requestAnimationFrame(() => {\n        prevFocus.current?.focus();\n      });\n    };\n\n  return {\n    nodeRef: ref,\n    transitionOptions: {\n      nodeRef: refCallback,\n      onEntering: handleMountFocus(onEntering, false),\n      onEntered: handleMountFocus(onEntered, !disableTransition),\n      onExiting: handleUnmountFocus(onExiting, false),\n      onExited: handleUnmountFocus(onExited, !disableTransition),\n    },\n    eventHandlers: {\n      onKeyDown(event) {\n        onKeyDown(event);\n        if (\n          event.isPropagationStopped() ||\n          event.key !== \"Tab\" ||\n          isFocusTypeDisabled(\"keyboard\")\n        ) {\n          return;\n        }\n\n        const { target, shiftKey, currentTarget } = event;\n        const elements = getFocusableElements(currentTarget, programmatic);\n        const count = elements.length;\n        if (count === 0) {\n          event.preventDefault();\n          return;\n        }\n\n        // if the container element is the current focus, need to either focus\n        // the first or last element so focus doesn't escape\n        let type: FocusElementWithinType | undefined;\n        if (\n          count === 1 ||\n          (!shiftKey &&\n            (target === currentTarget || target === elements[count - 1]))\n        ) {\n          type = \"first\";\n        } else if (\n          shiftKey &&\n          (target === currentTarget || target === elements[0])\n        ) {\n          type = \"last\";\n        }\n\n        if (type) {\n          event.preventDefault();\n          focusElementWithin({\n            type,\n            elements,\n            container: currentTarget,\n          });\n        }\n      },\n    },\n  };\n}\n"],"names":["useEffect","useRef","useEnsuredRef","focusElementWithin","getFocusableElements","noop","useFocusContainer","options","nodeRef","activate","onEntering","onEntered","onExiting","onExited","onKeyDown","programmatic","disableTransition","isFocusTypeDisabled","ref","refCallback","prevFocus","document","activeElement","HTMLElement","current","handleMountFocus","callback","skipped","appearing","instance","contains","focus","handleUnmountFocus","window","requestAnimationFrame","transitionOptions","eventHandlers","event","isPropagationStopped","key","target","shiftKey","currentTarget","elements","count","length","preventDefault","type","container"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAM1C,SAASC,aAAa,QAAQ,sBAAsB;AAEpD,SAASC,kBAAkB,EAAEC,oBAAoB,QAAQ,aAAa;AAEtE,MAAMC,OAAO;AACX,aAAa;AACf;AAsFA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CC,GACD,OAAO,SAASC,kBACdC,OAAiC;IAEjC,MAAM,EACJC,OAAO,EACPC,QAAQ,EACRC,aAAaL,IAAI,EACjBM,YAAYN,IAAI,EAChBO,YAAYP,IAAI,EAChBQ,WAAWR,IAAI,EACfS,YAAYT,IAAI,EAChBU,eAAe,KAAK,EACpBC,oBAAoB,KAAK,EACzBC,sBAAsBZ,IAAI,EAC3B,GAAGE;IAEJ,MAAM,CAACW,KAAKC,YAAY,GAAGjB,cAAcM;IACzC,MAAMY,YAAYnB,OAA2B;IAE7CD,UAAU;QACR,IAAI,CAACS,YAAY,CAAEY,CAAAA,SAASC,aAAa,YAAYC,WAAU,GAAI;YACjE;QACF;QAEAH,UAAUI,OAAO,GAAGH,SAASC,aAAa;IAC5C,GAAG;QAACb;KAAS;IAEb,MAAMgB,mBACJ,CAACC,UAAkCC,UACnC,CAACC;YACCF,SAASE;YACT,MAAMC,WAAWX,IAAIM,OAAO;YAC5B,IACEK,YACA,CAACF,WACD,CAACV,oBAAoB,YACpB,CAAA,CAACI,SAASC,aAAa,IAAI,CAACO,SAASC,QAAQ,CAACT,SAASC,aAAa,CAAA,GACrE;gBACAO,SAASE,KAAK;YAChB;QACF;IAEF,MAAMC,qBACJ,CAACN,UAAiCC,UAAqB;YACrDD;YACA,IAAIC,WAAWV,oBAAoB,YAAY;gBAC7C;YACF;YAEA,2EAA2E;YAC3E,iCAAiC;YACjCgB,OAAOC,qBAAqB,CAAC;gBAC3Bd,UAAUI,OAAO,EAAEO;YACrB;QACF;IAEF,OAAO;QACLvB,SAASU;QACTiB,mBAAmB;YACjB3B,SAASW;YACTT,YAAYe,iBAAiBf,YAAY;YACzCC,WAAWc,iBAAiBd,WAAW,CAACK;YACxCJ,WAAWoB,mBAAmBpB,WAAW;YACzCC,UAAUmB,mBAAmBnB,UAAU,CAACG;QAC1C;QACAoB,eAAe;YACbtB,WAAUuB,KAAK;gBACbvB,UAAUuB;gBACV,IACEA,MAAMC,oBAAoB,MAC1BD,MAAME,GAAG,KAAK,SACdtB,oBAAoB,aACpB;oBACA;gBACF;gBAEA,MAAM,EAAEuB,MAAM,EAAEC,QAAQ,EAAEC,aAAa,EAAE,GAAGL;gBAC5C,MAAMM,WAAWvC,qBAAqBsC,eAAe3B;gBACrD,MAAM6B,QAAQD,SAASE,MAAM;gBAC7B,IAAID,UAAU,GAAG;oBACfP,MAAMS,cAAc;oBACpB;gBACF;gBAEA,sEAAsE;gBACtE,oDAAoD;gBACpD,IAAIC;gBACJ,IACEH,UAAU,KACT,CAACH,YACCD,CAAAA,WAAWE,iBAAiBF,WAAWG,QAAQ,CAACC,QAAQ,EAAE,AAAD,GAC5D;oBACAG,OAAO;gBACT,OAAO,IACLN,YACCD,CAAAA,WAAWE,iBAAiBF,WAAWG,QAAQ,CAAC,EAAE,AAAD,GAClD;oBACAI,OAAO;gBACT;gBAEA,IAAIA,MAAM;oBACRV,MAAMS,cAAc;oBACpB3C,mBAAmB;wBACjB4C;wBACAJ;wBACAK,WAAWN;oBACb;gBACF;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/focus/useFocusContainer.ts"],"sourcesContent":["\"use client\";\nimport type { KeyboardEventHandler, Ref, RefObject } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport { TRANSITION_CONFIG } from \"../transition/config.js\";\nimport type {\n  TransitionCallbacks,\n  TransitionEnterHandler,\n  TransitionExitHandler,\n} from \"../transition/types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport type { FocusElementWithinType } from \"./utils.js\";\nimport { focusElementWithin, getFocusableElements } from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * `\"mount\"` - this will attempt to focus the container element if:\n * - there is no `document.activeElement`\n * - the container element does not contain the `document.activeElement`\n *\n * `\"unmount\"` - attempts to re-focus the element that was focused before the\n * focus container became active. The previous focus element is captured\n * whenever the `activate` option on the `useFocusContainer` hook is set to\n * `true`. This is normally when an element becomes `visible`.\n *\n * `\"keyboard\"` - refocuses the first focusable element if pressing `Tab` would\n * move the focus outside of the container element. If `Shift + Tab` was used,\n * the last focusable element will be used instead.\n *\n * @remarks \\@since 6.0.0\n */\nexport type FocusType = \"mount\" | \"unmount\" | \"keyboard\";\n\n/** @remarks \\@since 6.0.0 */\nexport type FocusContainerTransitionCallbacks = Pick<\n  TransitionCallbacks,\n  \"onEntering\" | \"onEntered\" | \"onExiting\" | \"onExited\"\n>;\n\n/** @remarks \\@since 6.0.0 */\nexport interface FocusContainerTransitionOptions<E extends HTMLElement>\n  extends FocusContainerTransitionCallbacks {\n  /**\n   * An optional ref that will be merged with the\n   * {@link FocusContainerImplementation.nodeRef}\n   */\n  nodeRef?: Ref<E>;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface FocusContainerEventHandlers<E extends HTMLElement> {\n  onKeyDown?: KeyboardEventHandler<E>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type IsFocusTypeDisabled = (type: FocusType) => boolean;\n\nexport interface FocusContainerComponentProps {\n  /**\n   * @defaultValue `() => false`\n   */\n  isFocusTypeDisabled?: IsFocusTypeDisabled;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface FocusContainerOptions<E extends HTMLElement>\n  extends FocusContainerTransitionOptions<E>,\n    FocusContainerComponentProps {\n  onKeyDown?: KeyboardEventHandler<E>;\n  /**\n   * This to `true` will capture the current focused element as a focus target\n   * once the `onExited` hook is fired. This should usually be set to the\n   * `transitionIn` prop for `useTransition`.\n   */\n  activate: boolean;\n\n  /**\n   * Set this to true if elements that can be programmatically focused should be\n   * included. These would be elements with a `tabIndex={-1}`.\n   *\n   * @defaultValue `false`\n   */\n  programmatic?: boolean;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface FocusContainerImplementation<E extends HTMLElement> {\n  nodeRef: RefObject<E>;\n  eventHandlers: Required<FocusContainerEventHandlers<E>>;\n  transitionOptions: Required<FocusContainerTransitionOptions<E>>;\n}\n\n/**\n * This hook is mostly for internal use only for dialog accessibility behavior\n * to prevent the focus from moving outside of the dialog while it is visible.\n * This API was developed to be used with the `useCSSTransition`/`useTransition`\n * hooks as well.\n *\n * @example\n * Main Usage\n * ```tsx\n * import {\n *   Button,\n *   useFocusContainer,\n *   useScaleTransition,\n *   useToggle,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { toggled, enable, disable } = useToggle(false);\n *\n *   const { eventHandlers, transitionOptions } = useFocusContainer({\n *     activate: toggled,\n *   });\n *   const { elementProps, rendered } = useScaleTransition({\n *     transitionIn: toggled,\n *     temporary: true,\n *     ...transitionOptions,\n *   });\n *\n *   return (\n *     <>\n *       <Button onClick={enable}>Toggle</Button>\n *       {rendered && (\n *         <div {...eventHandlers} {...elementProps}>\n *           <Button onClick={disable}>Button 1</Button>\n *           <Button onClick={disable}>Button 2</Button>\n *           <Button onClick={disable}>Button 3</Button>\n *           <Button onClick={disable}>Button 4</Button>\n *         </div>\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useFocusContainer<E extends HTMLElement>(\n  options: FocusContainerOptions<E>\n): FocusContainerImplementation<E> {\n  const {\n    nodeRef,\n    activate,\n    onEntering = noop,\n    onEntered = noop,\n    onExiting = noop,\n    onExited = noop,\n    onKeyDown = noop,\n    programmatic = false,\n    disableTransition = false,\n    isFocusTypeDisabled = noop,\n  } = options;\n\n  const [ref, refCallback] = useEnsuredRef(nodeRef);\n  const prevFocus = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!activate || !(document.activeElement instanceof HTMLElement)) {\n      return;\n    }\n\n    prevFocus.current = document.activeElement;\n  }, [activate]);\n\n  const handleMountFocus =\n    (callback: TransitionEnterHandler, skipped: boolean) =>\n    (appearing: boolean) => {\n      callback(appearing);\n      const instance = ref.current;\n      if (\n        instance &&\n        !skipped &&\n        !isFocusTypeDisabled(\"mount\") &&\n        (!document.activeElement || !instance.contains(document.activeElement))\n      ) {\n        instance.focus();\n      }\n    };\n\n  const handleUnmountFocus =\n    (callback: TransitionExitHandler, skipped: boolean) => (): void => {\n      callback();\n      if (skipped || isFocusTypeDisabled(\"unmount\")) {\n        return;\n      }\n\n      // For some reason, the `\"Enter\"` keydown event fires at a different timing\n      // than the Space  keydown event.\n      window.requestAnimationFrame(() => {\n        prevFocus.current?.focus();\n      });\n    };\n\n  return {\n    nodeRef: ref,\n    transitionOptions: {\n      nodeRef: refCallback,\n      onEntering: handleMountFocus(onEntering, false),\n      onEntered: handleMountFocus(\n        onEntered,\n        !disableTransition && !TRANSITION_CONFIG.disabled\n      ),\n      onExiting: handleUnmountFocus(onExiting, false),\n      onExited: handleUnmountFocus(\n        onExited,\n        !disableTransition && !TRANSITION_CONFIG.disabled\n      ),\n    },\n    eventHandlers: {\n      onKeyDown(event) {\n        onKeyDown(event);\n        if (\n          event.isPropagationStopped() ||\n          event.key !== \"Tab\" ||\n          isFocusTypeDisabled(\"keyboard\")\n        ) {\n          return;\n        }\n\n        const { target, shiftKey, currentTarget } = event;\n        const elements = getFocusableElements(currentTarget, programmatic);\n        const count = elements.length;\n        if (count === 0) {\n          event.preventDefault();\n          return;\n        }\n\n        // if the container element is the current focus, need to either focus\n        // the first or last element so focus doesn't escape\n        let type: FocusElementWithinType | undefined;\n        if (\n          count === 1 ||\n          (!shiftKey &&\n            (target === currentTarget || target === elements[count - 1]))\n        ) {\n          type = \"first\";\n        } else if (\n          shiftKey &&\n          (target === currentTarget || target === elements[0])\n        ) {\n          type = \"last\";\n        }\n\n        if (type) {\n          event.preventDefault();\n          focusElementWithin({\n            type,\n            elements,\n            container: currentTarget,\n          });\n        }\n      },\n    },\n  };\n}\n"],"names":["useEffect","useRef","TRANSITION_CONFIG","useEnsuredRef","focusElementWithin","getFocusableElements","noop","useFocusContainer","options","nodeRef","activate","onEntering","onEntered","onExiting","onExited","onKeyDown","programmatic","disableTransition","isFocusTypeDisabled","ref","refCallback","prevFocus","document","activeElement","HTMLElement","current","handleMountFocus","callback","skipped","appearing","instance","contains","focus","handleUnmountFocus","window","requestAnimationFrame","transitionOptions","disabled","eventHandlers","event","isPropagationStopped","key","target","shiftKey","currentTarget","elements","count","length","preventDefault","type","container"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAC1C,SAASC,iBAAiB,QAAQ,0BAA0B;AAM5D,SAASC,aAAa,QAAQ,sBAAsB;AAEpD,SAASC,kBAAkB,EAAEC,oBAAoB,QAAQ,aAAa;AAEtE,MAAMC,OAAO;AACX,aAAa;AACf;AAsFA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CC,GACD,OAAO,SAASC,kBACdC,OAAiC;IAEjC,MAAM,EACJC,OAAO,EACPC,QAAQ,EACRC,aAAaL,IAAI,EACjBM,YAAYN,IAAI,EAChBO,YAAYP,IAAI,EAChBQ,WAAWR,IAAI,EACfS,YAAYT,IAAI,EAChBU,eAAe,KAAK,EACpBC,oBAAoB,KAAK,EACzBC,sBAAsBZ,IAAI,EAC3B,GAAGE;IAEJ,MAAM,CAACW,KAAKC,YAAY,GAAGjB,cAAcM;IACzC,MAAMY,YAAYpB,OAA2B;IAE7CD,UAAU;QACR,IAAI,CAACU,YAAY,CAAEY,CAAAA,SAASC,aAAa,YAAYC,WAAU,GAAI;YACjE;QACF;QAEAH,UAAUI,OAAO,GAAGH,SAASC,aAAa;IAC5C,GAAG;QAACb;KAAS;IAEb,MAAMgB,mBACJ,CAACC,UAAkCC,UACnC,CAACC;YACCF,SAASE;YACT,MAAMC,WAAWX,IAAIM,OAAO;YAC5B,IACEK,YACA,CAACF,WACD,CAACV,oBAAoB,YACpB,CAAA,CAACI,SAASC,aAAa,IAAI,CAACO,SAASC,QAAQ,CAACT,SAASC,aAAa,CAAA,GACrE;gBACAO,SAASE,KAAK;YAChB;QACF;IAEF,MAAMC,qBACJ,CAACN,UAAiCC,UAAqB;YACrDD;YACA,IAAIC,WAAWV,oBAAoB,YAAY;gBAC7C;YACF;YAEA,2EAA2E;YAC3E,iCAAiC;YACjCgB,OAAOC,qBAAqB,CAAC;gBAC3Bd,UAAUI,OAAO,EAAEO;YACrB;QACF;IAEF,OAAO;QACLvB,SAASU;QACTiB,mBAAmB;YACjB3B,SAASW;YACTT,YAAYe,iBAAiBf,YAAY;YACzCC,WAAWc,iBACTd,WACA,CAACK,qBAAqB,CAACf,kBAAkBmC,QAAQ;YAEnDxB,WAAWoB,mBAAmBpB,WAAW;YACzCC,UAAUmB,mBACRnB,UACA,CAACG,qBAAqB,CAACf,kBAAkBmC,QAAQ;QAErD;QACAC,eAAe;YACbvB,WAAUwB,KAAK;gBACbxB,UAAUwB;gBACV,IACEA,MAAMC,oBAAoB,MAC1BD,MAAME,GAAG,KAAK,SACdvB,oBAAoB,aACpB;oBACA;gBACF;gBAEA,MAAM,EAAEwB,MAAM,EAAEC,QAAQ,EAAEC,aAAa,EAAE,GAAGL;gBAC5C,MAAMM,WAAWxC,qBAAqBuC,eAAe5B;gBACrD,MAAM8B,QAAQD,SAASE,MAAM;gBAC7B,IAAID,UAAU,GAAG;oBACfP,MAAMS,cAAc;oBACpB;gBACF;gBAEA,sEAAsE;gBACtE,oDAAoD;gBACpD,IAAIC;gBACJ,IACEH,UAAU,KACT,CAACH,YACCD,CAAAA,WAAWE,iBAAiBF,WAAWG,QAAQ,CAACC,QAAQ,EAAE,AAAD,GAC5D;oBACAG,OAAO;gBACT,OAAO,IACLN,YACCD,CAAAA,WAAWE,iBAAiBF,WAAWG,QAAQ,CAAC,EAAE,AAAD,GAClD;oBACAI,OAAO;gBACT;gBAEA,IAAIA,MAAM;oBACRV,MAAMS,cAAc;oBACpB5C,mBAAmB;wBACjB6C;wBACAJ;wBACAK,WAAWN;oBACb;gBACF;YACF;QACF;IACF;AACF"}

package/dist/form/Form.d.ts

@@ -10,7 +10,7 @@ export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
     disablePreventDefault?: boolean;
 }
 /**
- * **Server Component**
+ * **Client Component**
  *
  * This is probably one of the least useful components available as it doesn't
  * do much styling or logic. All this form component will do is add basic flex

package/dist/form/Form.js

@@ -1,10 +1,11 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const noop = ()=>{
 // do nothing
 };
 /**
- * **Server Component**
+ * **Client Component**
  *
  * This is probably one of the least useful components available as it doesn't
  * do much styling or logic. All this form component will do is add basic flex

package/dist/form/Form.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Form.tsx"],"sourcesContent":["import { forwardRef, type FormHTMLAttributes } from \"react\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nexport interface FormProps extends FormHTMLAttributes<HTMLFormElement> {\n  /**\n   * Boolean if the form should no longer prevent default submit behavior. If\n   * you enable this prop you should honestly just use a `<form>` element\n   * instead\n   *\n   * @defaultValue `false`\n   */\n  disablePreventDefault?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * This is probably one of the least useful components available as it doesn't\n * do much styling or logic. All this form component will do is add basic flex\n * behavior and prevent the default form submit behavior.\n */\nexport const Form = forwardRef<HTMLFormElement, FormProps>(\n  function Form(props, ref) {\n    const {\n      children,\n      onSubmit = noop,\n      disablePreventDefault = false,\n      ...remaining\n    } = props;\n\n    return (\n      <form\n        {...remaining}\n        onSubmit={(event) => {\n          if (!disablePreventDefault) {\n            event.preventDefault();\n          }\n\n          onSubmit(event);\n        }}\n        ref={ref}\n      >\n        {children}\n      </form>\n    );\n  }\n);\n"],"names":["forwardRef","noop","Form","props","ref","children","onSubmit","disablePreventDefault","remaining","form","event","preventDefault"],"mappings":";AAAA,SAASA,UAAU,QAAiC,QAAQ;AAE5D,MAAMC,OAAO;AACX,aAAa;AACf;AAaA;;;;;;CAMC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,QAAQ,EACRC,WAAWL,IAAI,EACfM,wBAAwB,KAAK,EAC7B,GAAGC,WACJ,GAAGL;IAEJ,qBACE,KAACM;QACE,GAAGD,SAAS;QACbF,UAAU,CAACI;YACT,IAAI,CAACH,uBAAuB;gBAC1BG,MAAMC,cAAc;YACtB;YAEAL,SAASI;QACX;QACAN,KAAKA;kBAEJC;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/Form.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type FormHTMLAttributes } from \"react\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nexport interface FormProps extends FormHTMLAttributes<HTMLFormElement> {\n  /**\n   * Boolean if the form should no longer prevent default submit behavior. If\n   * you enable this prop you should honestly just use a `<form>` element\n   * instead\n   *\n   * @defaultValue `false`\n   */\n  disablePreventDefault?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This is probably one of the least useful components available as it doesn't\n * do much styling or logic. All this form component will do is add basic flex\n * behavior and prevent the default form submit behavior.\n */\nexport const Form = forwardRef<HTMLFormElement, FormProps>(\n  function Form(props, ref) {\n    const {\n      children,\n      onSubmit = noop,\n      disablePreventDefault = false,\n      ...remaining\n    } = props;\n\n    return (\n      <form\n        {...remaining}\n        onSubmit={(event) => {\n          if (!disablePreventDefault) {\n            event.preventDefault();\n          }\n\n          onSubmit(event);\n        }}\n        ref={ref}\n      >\n        {children}\n      </form>\n    );\n  }\n);\n"],"names":["forwardRef","noop","Form","props","ref","children","onSubmit","disablePreventDefault","remaining","form","event","preventDefault"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAiC,QAAQ;AAE5D,MAAMC,OAAO;AACX,aAAa;AACf;AAaA;;;;;;CAMC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,QAAQ,EACRC,WAAWL,IAAI,EACfM,wBAAwB,KAAK,EAC7B,GAAGC,WACJ,GAAGL;IAEJ,qBACE,KAACM;QACE,GAAGD,SAAS;QACbF,UAAU,CAACI;YACT,IAAI,CAACH,uBAAuB;gBAC1BG,MAAMC,cAAc;YACtB;YAEAL,SAASI;QACX;QACAN,KAAKA;kBAEJC;;AAGP,GACA"}

package/dist/form/Label.d.ts

@@ -2,11 +2,11 @@
 import { type LabelClassNameOptions, type LabelProps } from "./types.js";
 declare module "react" {
     interface CSSProperties {
-        "--rmd-form-label-floating-top"?: string | number;
-        "--rmd-form-label-left-offset"?: string | number;
-        "--rmd-form-label-top-offset"?: string | number;
-        "--rmd-form-label-active-padding"?: string | number;
-        "--rmd-form-label-active-background-color"?: string;
+        "--rmd-label-floating-top"?: string | number;
+        "--rmd-label-left-offset"?: string | number;
+        "--rmd-label-top-offset"?: string | number;
+        "--rmd-label-active-padding"?: string | number;
+        "--rmd-label-active-background-color"?: string;
     }
 }
 /**

package/dist/form/Label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Label.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type LabelClassNameOptions, type LabelProps } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-form-label-floating-top\"?: string | number;\n    \"--rmd-form-label-left-offset\"?: string | number;\n    \"--rmd-form-label-top-offset\"?: string | number;\n    \"--rmd-form-label-active-padding\"?: string | number;\n    \"--rmd-form-label-active-background-color\"?: string;\n  }\n}\n\nconst labelStyles = bem(\"rmd-label\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function label(options: LabelClassNameOptions): string {\n  const {\n    className,\n    gap = false,\n    error = false,\n    dense = false,\n    active = false,\n    stacked = false,\n    reversed = false,\n    disabled = false,\n    floating = false,\n    inactive = false,\n    floatingActive = active,\n  } = options;\n\n  let textColor: TextColor | ThemeColor | undefined;\n  if (disabled) {\n    textColor = \"text-disabled\";\n  } else if (error) {\n    textColor = \"error\";\n  } else if (floating && inactive) {\n    textColor = \"text-secondary\";\n  }\n\n  return cnb(\n    labelStyles({\n      gap,\n      error,\n      dense,\n      active,\n      disabled,\n      floating,\n      stacked: stacked && !reversed,\n      reversed: !stacked && reversed,\n      \"stacked-reversed\": stacked && reversed,\n      \"floating-dense\": floating && dense,\n      \"floating-active\": floating && floatingActive,\n    }),\n    cssUtils({\n      textColor,\n    }),\n    className\n  );\n}\n\n/**\n * **Server Component**\n *\n * Most of the form components already use this `Label` internally when a\n * `label` prop has been provided. You should generally use this component if\n * you need to separate the label from an existing form component or you need to\n * create a custom implementation of a form component.\n *\n * @remarks \\@since 6.0.0 Updated to be usable externally and combines the\n * floating label styles instead of having separate components.\n */\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  function Label(props, ref) {\n    const {\n      gap = false,\n      error = false,\n      dense = false,\n      active = false,\n      stacked = false,\n      reversed = false,\n      disabled = false,\n      floating = false,\n      inactive = false,\n      floatingActive = active,\n      className,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <label\n        ref={ref}\n        {...remaining}\n        className={label({\n          gap,\n          error,\n          dense,\n          active,\n          stacked,\n          reversed,\n          disabled,\n          floating,\n          floatingActive,\n          inactive,\n          className,\n        })}\n      >\n        {children}\n      </label>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","bem","labelStyles","label","options","className","gap","error","dense","active","stacked","reversed","disabled","floating","inactive","floatingActive","textColor","Label","props","ref","children","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AACnC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAatC,MAAMC,cAAcD,IAAI;AAExB;;CAEC,GACD,OAAO,SAASE,MAAMC,OAA8B;IAClD,MAAM,EACJC,SAAS,EACTC,MAAM,KAAK,EACXC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,iBAAiBN,MAAM,EACxB,GAAGL;IAEJ,IAAIY;IACJ,IAAIJ,UAAU;QACZI,YAAY;IACd,OAAO,IAAIT,OAAO;QAChBS,YAAY;IACd,OAAO,IAAIH,YAAYC,UAAU;QAC/BE,YAAY;IACd;IAEA,OAAOlB,IACLI,YAAY;QACVI;QACAC;QACAC;QACAC;QACAG;QACAC;QACAH,SAASA,WAAW,CAACC;QACrBA,UAAU,CAACD,WAAWC;QACtB,oBAAoBD,WAAWC;QAC/B,kBAAkBE,YAAYL;QAC9B,mBAAmBK,YAAYE;IACjC,IACAf,SAAS;QACPgB;IACF,IACAX;AAEJ;AAEA;;;;;;;;;;CAUC,GACD,OAAO,MAAMY,sBAAQlB,WACnB,SAASkB,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJb,MAAM,KAAK,EACXC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,iBAAiBN,MAAM,EACvBJ,SAAS,EACTe,QAAQ,EACR,GAAGC,WACJ,GAAGH;IAEJ,qBACE,KAACf;QACCgB,KAAKA;QACJ,GAAGE,SAAS;QACbhB,WAAWF,MAAM;YACfG;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAD;YACAT;QACF;kBAECe;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/Label.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type LabelClassNameOptions, type LabelProps } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-label-floating-top\"?: string | number;\n    \"--rmd-label-left-offset\"?: string | number;\n    \"--rmd-label-top-offset\"?: string | number;\n    \"--rmd-label-active-padding\"?: string | number;\n    \"--rmd-label-active-background-color\"?: string;\n  }\n}\n\nconst labelStyles = bem(\"rmd-label\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function label(options: LabelClassNameOptions): string {\n  const {\n    className,\n    gap = false,\n    error = false,\n    dense = false,\n    active = false,\n    stacked = false,\n    reversed = false,\n    disabled = false,\n    floating = false,\n    inactive = false,\n    floatingActive = active,\n  } = options;\n\n  let textColor: TextColor | ThemeColor | undefined;\n  if (disabled) {\n    textColor = \"text-disabled\";\n  } else if (error) {\n    textColor = \"error\";\n  } else if (floating && inactive) {\n    textColor = \"text-secondary\";\n  }\n\n  return cnb(\n    labelStyles({\n      gap,\n      error,\n      dense,\n      active,\n      disabled,\n      floating,\n      stacked: stacked && !reversed,\n      reversed: !stacked && reversed,\n      \"stacked-reversed\": stacked && reversed,\n      \"floating-dense\": floating && dense,\n      \"floating-active\": floating && floatingActive,\n    }),\n    cssUtils({\n      textColor,\n    }),\n    className\n  );\n}\n\n/**\n * **Server Component**\n *\n * Most of the form components already use this `Label` internally when a\n * `label` prop has been provided. You should generally use this component if\n * you need to separate the label from an existing form component or you need to\n * create a custom implementation of a form component.\n *\n * @remarks \\@since 6.0.0 Updated to be usable externally and combines the\n * floating label styles instead of having separate components.\n */\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  function Label(props, ref) {\n    const {\n      gap = false,\n      error = false,\n      dense = false,\n      active = false,\n      stacked = false,\n      reversed = false,\n      disabled = false,\n      floating = false,\n      inactive = false,\n      floatingActive = active,\n      className,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <label\n        ref={ref}\n        {...remaining}\n        className={label({\n          gap,\n          error,\n          dense,\n          active,\n          stacked,\n          reversed,\n          disabled,\n          floating,\n          floatingActive,\n          inactive,\n          className,\n        })}\n      >\n        {children}\n      </label>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","bem","labelStyles","label","options","className","gap","error","dense","active","stacked","reversed","disabled","floating","inactive","floatingActive","textColor","Label","props","ref","children","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AACnC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAatC,MAAMC,cAAcD,IAAI;AAExB;;CAEC,GACD,OAAO,SAASE,MAAMC,OAA8B;IAClD,MAAM,EACJC,SAAS,EACTC,MAAM,KAAK,EACXC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,iBAAiBN,MAAM,EACxB,GAAGL;IAEJ,IAAIY;IACJ,IAAIJ,UAAU;QACZI,YAAY;IACd,OAAO,IAAIT,OAAO;QAChBS,YAAY;IACd,OAAO,IAAIH,YAAYC,UAAU;QAC/BE,YAAY;IACd;IAEA,OAAOlB,IACLI,YAAY;QACVI;QACAC;QACAC;QACAC;QACAG;QACAC;QACAH,SAASA,WAAW,CAACC;QACrBA,UAAU,CAACD,WAAWC;QACtB,oBAAoBD,WAAWC;QAC/B,kBAAkBE,YAAYL;QAC9B,mBAAmBK,YAAYE;IACjC,IACAf,SAAS;QACPgB;IACF,IACAX;AAEJ;AAEA;;;;;;;;;;CAUC,GACD,OAAO,MAAMY,sBAAQlB,WACnB,SAASkB,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJb,MAAM,KAAK,EACXC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,iBAAiBN,MAAM,EACvBJ,SAAS,EACTe,QAAQ,EACR,GAAGC,WACJ,GAAGH;IAEJ,qBACE,KAACf;QACCgB,KAAKA;QACJ,GAAGE,SAAS;QACbhB,WAAWF,MAAM;YACfG;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAD;YACAT;QACF;kBAECe;;AAGP,GACA"}

package/dist/form/MenuItemInputToggle.d.ts

@@ -1,23 +1,14 @@
 import { type CSSProperties, type HTMLAttributes, type MouseEvent, type ReactNode } from "react";
-import { type ListItemAddonPosition, type ListItemAddonType, type ListItemHeight } from "../list/types.js";
+import { type ListItemAddonPosition, type ListItemAddonType, type ListItemChildrenTextProps, type ListItemHeight } from "../list/types.js";
 import { type PropsWithRef } from "../types.js";
 import { type IndeterminateCheckboxProps, type InputToggleIconProps } from "./InputToggle.js";
 import { type InputToggleSize } from "./inputToggleStyles.js";
-/** @remarks \@since 6.0.0 */
-export interface MenuItemInputToggleClassNameOptions {
-    className?: string;
-    type: "radio" | "checkbox" | "switch";
-}
-/**
- * @remarks \@since 6.0.0
- */
-export declare function menuItemInputToggle(options: MenuItemInputToggleClassNameOptions): string;
 /**
  * @remarks \@since 6.0.0
  */
 export type MenuItemInputToggleCheckedCallback = (checked: boolean, event: MouseEvent<HTMLLIElement>) => void;
 /** @remarks \@since 2.8.0 */
-export interface BaseMenuItemInputToggleProps extends HTMLAttributes<HTMLLIElement>, InputToggleIconProps {
+export interface BaseMenuItemInputToggleProps extends HTMLAttributes<HTMLLIElement>, InputToggleIconProps, ListItemChildrenTextProps {
     checked: boolean;
     onCheckedChange: MenuItemInputToggleCheckedCallback;
     /**
@@ -47,10 +38,6 @@ export interface BaseMenuItemInputToggleProps extends HTMLAttributes<HTMLLIEleme
     /** @defaultValue `"auto"` */
     height?: ListItemHeight;
     /** @defaultValue `false` */
-    threeLines?: boolean;
-    /** @defaultValue `false` */
-    disableTextChildren?: boolean;
-    /** @defaultValue `false` */
     iconAfter?: boolean;
     addon?: ReactNode;
     addonType?: ListItemAddonType;

package/dist/form/MenuItemInputToggle.js

@@ -4,21 +4,12 @@ import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
 import { ListItem } from "../list/ListItem.js";
 import { useEnsuredId } from "../useEnsuredId.js";
-import { bem } from "../utils/bem.js";
 import { InputToggleIcon } from "./InputToggleIcon.js";
 import { SwitchTrack } from "./SwitchTrack.js";
+import { menuItemInputToggle, menuItemInputToggleBall, menuItemInputToggleIcon, menuItemInputToggleTrack } from "./menuItemInputToggleStyles.js";
 const noop = ()=>{
 // do nothing
 };
-const styles = bem("rmd-menu-item-input-toggle");
-/**
- * @remarks \@since 6.0.0
- */ export function menuItemInputToggle(options) {
-    const { className, type } = options;
-    return cnb(`rmd-${type}-menu-item`, styles({
-        switch: type === "switch"
-    }), className);
-}
 /**
  * **Client Component**
  *
@@ -34,33 +25,31 @@ const styles = bem("rmd-menu-item-input-toggle");
     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;
     const id = useEnsuredId(propId, "menu-item");
     let icon = propIcon;
-    if (typeof propIcon === "undefined") {
-        if (type === "switch") {
-            icon = /*#__PURE__*/ _jsx(SwitchTrack, {
-                style: trackStyle,
-                className: trackClassName,
-                ...trackProps,
-                active: checked,
-                ballProps: ballProps,
-                ballStyle: ballStyle,
-                ballClassName: cnb(styles("ball"), ballClassName)
-            });
-        } else {
-            icon = /*#__PURE__*/ _jsx(InputToggleIcon, {
-                style: iconStyle,
-                disableEm: true,
-                ...iconProps,
-                className: cnb(styles("icon"), iconClassName, iconProps?.className),
-                size: size,
-                type: type,
-                checked: checked,
-                disabled: disabled,
-                icon: propIcon,
-                checkedIcon: checkedIcon,
-                indeterminate: indeterminate,
-                indeterminateIcon: indeterminateIcon
-            });
-        }
+    if (type === "switch") {
+        icon = /*#__PURE__*/ _jsx(SwitchTrack, {
+            style: trackStyle,
+            ...trackProps,
+            className: cnb(menuItemInputToggleTrack(), trackClassName, trackProps?.className),
+            active: checked,
+            ballProps: ballProps,
+            ballStyle: ballStyle,
+            ballClassName: cnb(menuItemInputToggleBall(), ballClassName)
+        });
+    } else {
+        icon = /*#__PURE__*/ _jsx(InputToggleIcon, {
+            style: iconStyle,
+            disableEm: true,
+            ...iconProps,
+            className: cnb(menuItemInputToggleIcon(), iconClassName, iconProps?.className),
+            size: size,
+            type: type,
+            checked: checked,
+            disabled: disabled,
+            icon: propIcon,
+            checkedIcon: checkedIcon,
+            indeterminate: indeterminate,
+            indeterminateIcon: indeterminateIcon
+        });
     }
     let leftAddon;
     let leftAddonType;
@@ -89,7 +78,6 @@ const styles = bem("rmd-menu-item-input-toggle");
     }
     return /*#__PURE__*/ _jsx(ListItem, {
         ...remaining,
-        "aria-disabled": disabled || undefined,
         // I'm not actually sure if this is correct
         "aria-checked": indeterminate && checked ? "mixed" : checked,
         id: id,
@@ -106,6 +94,7 @@ const styles = bem("rmd-menu-item-input-toggle");
             type,
             className
         }),
+        disabled: disabled,
         tabIndex: tabIndex,
         leftAddon: leftAddon,
         leftAddonType: leftAddonType,

package/dist/form/MenuItemInputToggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/MenuItemInputToggle.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from \"react\";\nimport { ListItem } from \"../list/ListItem.js\";\nimport {\n  type ListItemAddonPosition,\n  type ListItemAddonType,\n  type ListItemHeight,\n} from \"../list/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  type IndeterminateCheckboxProps,\n  type InputToggleIconProps,\n} from \"./InputToggle.js\";\nimport { InputToggleIcon } from \"./InputToggleIcon.js\";\nimport { SwitchTrack } from \"./SwitchTrack.js\";\nimport { type InputToggleSize } from \"./inputToggleStyles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\nconst styles = bem(\"rmd-menu-item-input-toggle\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface MenuItemInputToggleClassNameOptions {\n  className?: string;\n  type: \"radio\" | \"checkbox\" | \"switch\";\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function menuItemInputToggle(\n  options: MenuItemInputToggleClassNameOptions\n): string {\n  const { className, type } = options;\n  return cnb(\n    `rmd-${type}-menu-item`,\n    styles({ switch: type === \"switch\" }),\n    className\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type MenuItemInputToggleCheckedCallback = (\n  checked: boolean,\n  event: MouseEvent<HTMLLIElement>\n) => void;\n\n/** @remarks \\@since 2.8.0 */\nexport interface BaseMenuItemInputToggleProps\n  extends HTMLAttributes<HTMLLIElement>,\n    InputToggleIconProps {\n  checked: boolean;\n  onCheckedChange: MenuItemInputToggleCheckedCallback;\n\n  /**\n   * @defaultValue `\"menu-item-\" + useId()`\n   */\n  id?: string;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` if the `Menu` should not close when the input toggle is\n   * clicked. This can be useful when interacting with a checkbox group within a\n   * menu or allowing the user to select multiple options before closing the\n   * menu.\n   *\n   * @defaultValue `false`\n   */\n  preventMenuHideOnClick?: boolean;\n\n  /**\n   * This is set to `\"auto\"` by default so the icon shrinks back down to the\n   * default icon size instead of relative to the current font size. You\n   * probably don't want to change this since it'll also modify the height of\n   * the menu item\n   *\n   * @defaultValue `\"auto\"`\n   */\n  size?: InputToggleSize;\n\n  /** @defaultValue `\"auto\"` */\n  height?: ListItemHeight;\n\n  /** @defaultValue `false` */\n  threeLines?: boolean;\n\n  /** @defaultValue `false` */\n  disableTextChildren?: boolean;\n\n  /** @defaultValue `false` */\n  iconAfter?: boolean;\n\n  addon?: ReactNode;\n  addonType?: ListItemAddonType;\n  addonPosition?: ListItemAddonPosition;\n\n  /** @defaultValue `false` */\n  addonForceWrap?: boolean;\n\n  /** @defaultValue `false` */\n  disableAddonCenteredMedia?: boolean;\n}\n\nexport interface MenuItemCheckboxProps\n  extends BaseMenuItemInputToggleProps,\n    IndeterminateCheckboxProps {}\n\nexport type MenuItemRadioProps = BaseMenuItemInputToggleProps;\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Added additional props for styling the track and ball.\n */\nexport interface MenuItemSwitchProps extends BaseMenuItemInputToggleProps {\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n  trackStyle?: CSSProperties;\n  trackClassName?: string;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Updated to be a union of the different props to enforce the\n * correct props based on `type`\n */\nexport type MenuItemInputToggleProps =\n  | (MenuItemCheckboxProps & { type: \"checkbox\" })\n  | (MenuItemRadioProps & { type: \"radio\" })\n  | (MenuItemSwitchProps & { type: \"switch\" });\n\n/**\n * **Client Component**\n *\n * This is a low-level component that should probably not be used externally and\n * instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should\n * be used instead.\n *\n * @see {@link MenuItemCheckbox} for checkbox examples\n * @see {@link MenuItemRadio} for radio examples\n * @see {@link MenuItemSwitch} for switch examples\n * @remarks \\@since 2.8.0\n */\nexport const MenuItemInputToggle = forwardRef<\n  HTMLLIElement,\n  MenuItemInputToggleProps\n>(function MenuItemInputToggle(props, ref) {\n  const {\n    id: propId,\n    type,\n    disabled = false,\n    checked,\n    onCheckedChange,\n    preventMenuHideOnClick = false,\n    onClick = noop,\n    className,\n    tabIndex = -1,\n    children,\n    size = \"auto\",\n    icon: propIcon,\n    iconAfter = false,\n    iconProps,\n    iconStyle,\n    iconClassName,\n    checkedIcon,\n    indeterminate,\n    indeterminateIcon,\n    addon,\n    addonType,\n    addonPosition,\n    addonForceWrap,\n    disableAddonCenteredMedia,\n    ballProps,\n    ballStyle,\n    ballClassName,\n    trackProps,\n    trackStyle,\n    trackClassName,\n    ...remaining\n  } = props as MenuItemSwitchProps &\n    MenuItemCheckboxProps & { type: \"checkbox\" | \"radio\" | \"switch\" };\n  const id = useEnsuredId(propId, \"menu-item\");\n\n  let icon = propIcon;\n  if (typeof propIcon === \"undefined\") {\n    if (type === \"switch\") {\n      icon = (\n        <SwitchTrack\n          style={trackStyle}\n          className={trackClassName}\n          {...trackProps}\n          active={checked}\n          ballProps={ballProps}\n          ballStyle={ballStyle}\n          ballClassName={cnb(styles(\"ball\"), ballClassName)}\n        />\n      );\n    } else {\n      icon = (\n        <InputToggleIcon\n          style={iconStyle}\n          disableEm\n          {...iconProps}\n          className={cnb(styles(\"icon\"), iconClassName, iconProps?.className)}\n          size={size}\n          type={type}\n          checked={checked}\n          disabled={disabled}\n          icon={propIcon}\n          checkedIcon={checkedIcon}\n          indeterminate={indeterminate}\n          indeterminateIcon={indeterminateIcon}\n        />\n      );\n    }\n  }\n\n  let leftAddon: ReactNode;\n  let leftAddonType: ListItemAddonType | undefined;\n  let leftAddonPosition: ListItemAddonPosition | undefined;\n  let leftAddonForceWrap: boolean | undefined;\n  let disableLeftAddonCenteredMedia: boolean | undefined;\n  let rightAddon: ReactNode;\n  let rightAddonType: ListItemAddonType | undefined;\n  let rightAddonPosition: ListItemAddonPosition | undefined;\n  let rightAddonForceWrap: boolean | undefined;\n  let disableRightAddonCenteredMedia: boolean | undefined;\n  if (iconAfter) {\n    leftAddon = addon;\n    leftAddonType = addonType;\n    leftAddonPosition = addonPosition;\n    leftAddonForceWrap = addonForceWrap;\n    disableLeftAddonCenteredMedia = disableAddonCenteredMedia;\n    rightAddon = icon;\n  } else {\n    leftAddon = icon;\n    rightAddon = addon;\n    rightAddonType = addonType;\n    rightAddonPosition = addonPosition;\n    rightAddonForceWrap = addonForceWrap;\n    disableRightAddonCenteredMedia = disableAddonCenteredMedia;\n  }\n\n  return (\n    <ListItem\n      {...remaining}\n      aria-disabled={disabled || undefined}\n      // I'm not actually sure if this is correct\n      aria-checked={indeterminate && checked ? \"mixed\" : checked}\n      id={id}\n      role={type === \"radio\" ? \"menuitemradio\" : \"menuitemcheckbox\"}\n      onClick={(event) => {\n        onClick(event);\n        onCheckedChange(!checked, event);\n\n        if (preventMenuHideOnClick) {\n          event.stopPropagation();\n        }\n      }}\n      ref={ref}\n      className={menuItemInputToggle({ type, className })}\n      tabIndex={tabIndex}\n      leftAddon={leftAddon}\n      leftAddonType={leftAddonType}\n      leftAddonPosition={leftAddonPosition}\n      leftAddonForceWrap={leftAddonForceWrap}\n      disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n      rightAddon={rightAddon}\n      rightAddonType={rightAddonType}\n      rightAddonPosition={rightAddonPosition}\n      rightAddonForceWrap={rightAddonForceWrap}\n      disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n    >\n      {children}\n    </ListItem>\n  );\n});\n"],"names":["cnb","forwardRef","ListItem","useEnsuredId","bem","InputToggleIcon","SwitchTrack","noop","styles","menuItemInputToggle","options","className","type","switch","MenuItemInputToggle","props","ref","id","propId","disabled","checked","onCheckedChange","preventMenuHideOnClick","onClick","tabIndex","children","size","icon","propIcon","iconAfter","iconProps","iconStyle","iconClassName","checkedIcon","indeterminate","indeterminateIcon","addon","addonType","addonPosition","addonForceWrap","disableAddonCenteredMedia","ballProps","ballStyle","ballClassName","trackProps","trackStyle","trackClassName","remaining","style","active","disableEm","leftAddon","leftAddonType","leftAddonPosition","leftAddonForceWrap","disableLeftAddonCenteredMedia","rightAddon","rightAddonType","rightAddonPosition","rightAddonForceWrap","disableRightAddonCenteredMedia","aria-disabled","undefined","aria-checked","role","event","stopPropagation"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAKL,QAAQ;AACf,SAASC,QAAQ,QAAQ,sBAAsB;AAO/C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AAKtC,SAASC,eAAe,QAAQ,uBAAuB;AACvD,SAASC,WAAW,QAAQ,mBAAmB;AAG/C,MAAMC,OAAO;AACX,aAAa;AACf;AACA,MAAMC,SAASJ,IAAI;AAQnB;;CAEC,GACD,OAAO,SAASK,oBACdC,OAA4C;IAE5C,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAE,GAAGF;IAC5B,OAAOV,IACL,CAAC,IAAI,EAAEY,KAAK,UAAU,CAAC,EACvBJ,OAAO;QAAEK,QAAQD,SAAS;IAAS,IACnCD;AAEJ;AAmGA;;;;;;;;;;;CAWC,GACD,OAAO,MAAMG,oCAAsBb,WAGjC,SAASa,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJC,IAAIC,MAAM,EACVN,IAAI,EACJO,WAAW,KAAK,EAChBC,OAAO,EACPC,eAAe,EACfC,yBAAyB,KAAK,EAC9BC,UAAUhB,IAAI,EACdI,SAAS,EACTa,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,GAAGhC;IAEJ,MAAME,KAAKd,aAAae,QAAQ;IAEhC,IAAIS,OAAOC;IACX,IAAI,OAAOA,aAAa,aAAa;QACnC,IAAIhB,SAAS,UAAU;YACrBe,qBACE,KAACrB;gBACC0C,OAAOH;gBACPlC,WAAWmC;gBACV,GAAGF,UAAU;gBACdK,QAAQ7B;gBACRqB,WAAWA;gBACXC,WAAWA;gBACXC,eAAe3C,IAAIQ,OAAO,SAASmC;;QAGzC,OAAO;YACLhB,qBACE,KAACtB;gBACC2C,OAAOjB;gBACPmB,SAAS;gBACR,GAAGpB,SAAS;gBACbnB,WAAWX,IAAIQ,OAAO,SAASwB,eAAeF,WAAWnB;gBACzDe,MAAMA;gBACNd,MAAMA;gBACNQ,SAASA;gBACTD,UAAUA;gBACVQ,MAAMC;gBACNK,aAAaA;gBACbC,eAAeA;gBACfC,mBAAmBA;;QAGzB;IACF;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,KAACtC;QACE,GAAG6C,SAAS;QACbc,iBAAe1C,YAAY2C;QAC3B,2CAA2C;QAC3CC,gBAAc7B,iBAAiBd,UAAU,UAAUA;QACnDH,IAAIA;QACJ+C,MAAMpD,SAAS,UAAU,kBAAkB;QAC3CW,SAAS,CAAC0C;YACR1C,QAAQ0C;YACR5C,gBAAgB,CAACD,SAAS6C;YAE1B,IAAI3C,wBAAwB;gBAC1B2C,MAAMC,eAAe;YACvB;QACF;QACAlD,KAAKA;QACLL,WAAWF,oBAAoB;YAAEG;YAAMD;QAAU;QACjDa,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,GAAG"}
+{"version":3,"sources":["../../src/form/MenuItemInputToggle.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from \"react\";\nimport { ListItem } from \"../list/ListItem.js\";\nimport {\n  type ListItemAddonPosition,\n  type ListItemAddonType,\n  type ListItemChildrenTextProps,\n  type ListItemHeight,\n} from \"../list/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  type IndeterminateCheckboxProps,\n  type InputToggleIconProps,\n} from \"./InputToggle.js\";\nimport { InputToggleIcon } from \"./InputToggleIcon.js\";\nimport { SwitchTrack } from \"./SwitchTrack.js\";\nimport { type InputToggleSize } from \"./inputToggleStyles.js\";\nimport {\n  menuItemInputToggle,\n  menuItemInputToggleBall,\n  menuItemInputToggleIcon,\n  menuItemInputToggleTrack,\n} from \"./menuItemInputToggleStyles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type MenuItemInputToggleCheckedCallback = (\n  checked: boolean,\n  event: MouseEvent<HTMLLIElement>\n) => void;\n\n/** @remarks \\@since 2.8.0 */\nexport interface BaseMenuItemInputToggleProps\n  extends HTMLAttributes<HTMLLIElement>,\n    InputToggleIconProps,\n    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,\n    IndeterminateCheckboxProps {}\n\nexport type MenuItemRadioProps = BaseMenuItemInputToggleProps;\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Added additional props for styling the track and ball.\n */\nexport interface MenuItemSwitchProps extends BaseMenuItemInputToggleProps {\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n  trackStyle?: CSSProperties;\n  trackClassName?: string;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Updated to be a union of the different props to enforce the\n * correct props based on `type`\n */\nexport type MenuItemInputToggleProps =\n  | (MenuItemCheckboxProps & { type: \"checkbox\" })\n  | (MenuItemRadioProps & { type: \"radio\" })\n  | (MenuItemSwitchProps & { type: \"switch\" });\n\n/**\n * **Client Component**\n *\n * This is a low-level component that should probably not be used externally and\n * instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should\n * be used instead.\n *\n * @see {@link MenuItemCheckbox} for checkbox examples\n * @see {@link MenuItemRadio} for radio examples\n * @see {@link MenuItemSwitch} for switch examples\n * @remarks \\@since 2.8.0\n */\nexport const MenuItemInputToggle = forwardRef<\n  HTMLLIElement,\n  MenuItemInputToggleProps\n>(function MenuItemInputToggle(props, ref) {\n  const {\n    id: propId,\n    type,\n    disabled = false,\n    checked,\n    onCheckedChange,\n    preventMenuHideOnClick = false,\n    onClick = noop,\n    className,\n    tabIndex = -1,\n    children,\n    size = \"auto\",\n    icon: propIcon,\n    iconAfter = false,\n    iconProps,\n    iconStyle,\n    iconClassName,\n    checkedIcon,\n    indeterminate,\n    indeterminateIcon,\n    addon,\n    addonType,\n    addonPosition,\n    addonForceWrap,\n    disableAddonCenteredMedia,\n    ballProps,\n    ballStyle,\n    ballClassName,\n    trackProps,\n    trackStyle,\n    trackClassName,\n    ...remaining\n  } = props as MenuItemSwitchProps &\n    MenuItemCheckboxProps & { type: \"checkbox\" | \"radio\" | \"switch\" };\n  const id = useEnsuredId(propId, \"menu-item\");\n\n  let icon = propIcon;\n  if (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","ListItem","useEnsuredId","InputToggleIcon","SwitchTrack","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;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAKL,QAAQ;AACf,SAASC,QAAQ,QAAQ,sBAAsB;AAQ/C,SAASC,YAAY,QAAQ,qBAAqB;AAKlD,SAASC,eAAe,QAAQ,uBAAuB;AACvD,SAASC,WAAW,QAAQ,mBAAmB;AAE/C,SACEC,mBAAmB,EACnBC,uBAAuB,EACvBC,uBAAuB,EACvBC,wBAAwB,QACnB,iCAAiC;AAExC,MAAMC,OAAO;AACX,aAAa;AACf;AA8FA;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,oCAAsBV,WAGjC,SAASU,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJC,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,KAAKX,aAAaY,QAAQ;IAEhC,IAAIW,OAAOC;IACX,IAAIX,SAAS,UAAU;QACrBU,qBACE,KAACrB;YACC0C,OAAOH;YACN,GAAGD,UAAU;YACdrB,WAAWtB,IACTS,4BACAoC,gBACAF,YAAYrB;YAEd0B,QAAQ9B;YACRsB,WAAWA;YACXC,WAAWA;YACXC,eAAe1C,IAAIO,2BAA2BmC;;IAGpD,OAAO;QACLhB,qBACE,KAACtB;YACC2C,OAAOjB;YACPmB,SAAS;YACR,GAAGpB,SAAS;YACbP,WAAWtB,IACTQ,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,KAACrC;QACE,GAAG4C,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,GAAG"}

package/dist/form/MenuItemTextField.d.ts

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

package/dist/form/MenuItemTextField.js.map

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

package/dist/form/NativeSelect.d.ts

@@ -1,7 +1,10 @@
 import { type CSSProperties, type HTMLAttributes, type ReactNode, type SelectHTMLAttributes } from "react";
 import { type PropsWithRef } from "../types.js";
-import { type FormFieldOptions, type UserAgentAutoCompleteProps } from "./types.js";
-export interface NativeSelectProps extends SelectHTMLAttributes<HTMLSelectElement>, UserAgentAutoCompleteProps, FormFieldOptions {
+import { type FormFieldOptions, type UserAgentAutocompleteProps } from "./types.js";
+/**
+ * @remarks \@since 6.0.0 Added support for {@link UserAgentAutocompleteProps}
+ */
+export interface NativeSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "autoComplete">, UserAgentAutocompleteProps, FormFieldOptions {
     /**
      * A custom dropdown icon to use instead of the browser's default select
      * dropdown icon.

package/dist/form/NativeSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/NativeSelect.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  type SelectHTMLAttributes,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { nativeSelect, nativeSelectContainer } from \"./nativeSelectStyles.js\";\nimport {\n  type FormFieldOptions,\n  type UserAgentAutoCompleteProps,\n} from \"./types.js\";\n\nexport interface NativeSelectProps\n  extends SelectHTMLAttributes<HTMLSelectElement>,\n    UserAgentAutoCompleteProps,\n    FormFieldOptions {\n  /**\n   * A custom dropdown icon to use instead of the browser's default select\n   * dropdown icon.\n   *\n   * Set this to `null` if the browser's default icon should be used instead.\n   *\n   * @defaultValue `getIcon(\"dropdown\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * This applies custom inline styles to the `<select>` element since the\n   * `style` prop is applied to the container element instead.\n   */\n  selectStyle?: CSSProperties;\n\n  /**\n   * This applies custom className to the `<select>` element since the\n   * `className` prop is applied to the container element instead.\n   */\n  selectClassName?: string;\n\n  /**\n   * This should be a list of `<option>` elements for specific values within the\n   * `<select>`.\n   *\n   * Check out the {@link NativeSelect} for examples around using \"placeholder\"\n   * text and requiring a value to be selected.\n   */\n  children: ReactNode;\n\n  /**\n   * Optional props to provide to the {@link TextFieldContainer} component.\n   * There probably isn't any real use for this prop other than if you need to\n   * add a `ref` for some DOM behavior.\n   */\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n}\n\n/**\n * **Server Component**\n *\n * This component is a wrapper for the native `<select>` field that applies the\n * same theming as `TextField` and `TextArea` components. This component might\n * not be used much since the `Select` offers more styling options.\n *\n * @example\n * Simple Example\n * ```tsx\n * <NativeSelect label=\"Label\">\n *   <option value=\"a\">Value 1</option>\n *   <option value=\"b\">Value 2</option>\n *   <option value=\"c\">Value 3</option>\n *   <option value=\"d\">Value 4</option>\n * </NativeSelect>\n * ```\n *\n * @example\n * Required Value Example\n * ```tsx\n * function Example(): ReactElement {\n *   // using `defaultValue=\"\"` makes it so the first option selected by default\n *   // and considered an \"invalid\" value since it is `disabled`\n *   //\n *   // a `name` must be set with `required` so that the form validation will\n *   // fire if the value is still the empty string when the form is submitted\n *   //\n *   // the first `<option>` is kind of like placeholder text since it doesn't\n *   // have a value and is disabled by default\n *\n *   return (\n *     <NativeSelect\n *       label=\"State\"\n *       name=\"state\"\n *       required\n *       defaultValue=\"\"\n *     >\n *       <option value=\"\" disabled>Choose a state</option>\n *       {states.map(({ name, code }) => (\n *         <option key={code} value={code}>{name}</option>\n *       ))}\n *     </NativeSelect>\n *   );\n * }\n * ```\n */\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n  function NativeSelect(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      icon: propIcon,\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      selectStyle,\n      selectClassName,\n      autoCompleteValue,\n      autoComplete = autoCompleteValue,\n      name = autoCompleteValue,\n      dense = false,\n      error = false,\n      active = false,\n      inline = false,\n      stretch = false,\n      leftAddon,\n      rightAddon: propRightAddon,\n      leftAddonProps,\n      rightAddonProps,\n      disableLeftAddonStyles = false,\n      disableRightAddonStyles = false,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      children,\n      ...remaining\n    } = props;\n    const { disabled = false, readOnly = false, multiple = false } = props;\n    const id = useEnsuredId(propId, \"select\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n    const icon = getIcon(\"dropdown\", propIcon);\n    const underlined = theme === \"underline\" || theme === \"filled\";\n\n    let rightAddon = propRightAddon;\n    if (typeof propRightAddon === \"undefined\" && !multiple) {\n      rightAddon = icon;\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <TextFieldContainer\n          {...containerProps}\n          style={style}\n          className={nativeSelectContainer({\n            label: !!label,\n            multiple,\n            underlined,\n            className,\n          })}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          stretch={stretch}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          leftAddonProps={leftAddonProps}\n          rightAddon={rightAddon}\n          rightAddonProps={rightAddonProps}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n        >\n          <select\n            {...remaining}\n            id={id}\n            ref={ref}\n            autoComplete={autoComplete}\n            name={name}\n            disabled={disabled}\n            style={selectStyle}\n            className={nativeSelect({\n              icon: !!icon,\n              className: selectClassName,\n            })}\n          >\n            {children}\n          </select>\n          {label && (\n            <Label\n              {...labelProps}\n              htmlFor={id}\n              style={labelProps?.style ?? labelStyle}\n              className={labelProps?.className ?? labelClassName}\n              floating\n              dense={dense}\n              error={error}\n              active={active}\n              disabled={disabled}\n            >\n              {label}\n            </Label>\n          )}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["forwardRef","getIcon","useEnsuredId","FormMessageContainer","Label","TextFieldContainer","getFormConfig","nativeSelect","nativeSelectContainer","NativeSelect","props","ref","id","propId","style","className","icon","propIcon","label","labelProps","labelStyle","labelClassName","selectStyle","selectClassName","autoCompleteValue","autoComplete","name","dense","error","active","inline","stretch","leftAddon","rightAddon","propRightAddon","leftAddonProps","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","children","remaining","disabled","readOnly","multiple","underlined","select","htmlFor","floating"],"mappings":";AAAA,SACEA,UAAU,QAKL,QAAQ;AACf,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,YAAY,EAAEC,qBAAqB,QAAQ,0BAA0B;AAiD9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CC,GACD,OAAO,MAAMC,6BAAeT,WAC1B,SAASS,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,MAAMC,QAAQ,EACdC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,WAAW,EACXC,eAAe,EACfC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,SAAS,EACTC,YAAYC,cAAc,EAC1BC,cAAc,EACdC,eAAe,EACfC,yBAAyB,KAAK,EAC9BC,0BAA0B,KAAK,EAC/BC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1CC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACdC,QAAQ,EACR,GAAGC,WACJ,GAAGrC;IACJ,MAAM,EAAEsC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGxC;IACjE,MAAME,KAAKV,aAAaW,QAAQ;IAChC,MAAM0B,QAAQjC,cAAc,SAASkC;IACrC,MAAMC,qBAAqBnC,cACzB,sBACAoC;IAEF,MAAM1B,OAAOf,QAAQ,YAAYgB;IACjC,MAAMkC,aAAaZ,UAAU,eAAeA,UAAU;IAEtD,IAAIN,aAAaC;IACjB,IAAI,OAAOA,mBAAmB,eAAe,CAACgB,UAAU;QACtDjB,aAAajB;IACf;IAEA,qBACE,KAACb;QACE,GAAGyC,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACtC;YACE,GAAGwC,cAAc;YAClB/B,OAAOA;YACPC,WAAWP,sBAAsB;gBAC/BU,OAAO,CAAC,CAACA;gBACTgC;gBACAC;gBACApC;YACF;YACAwB,OAAOA;YACPrB,OAAO,CAAC,CAACA;YACTU,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRE,SAASA;YACTkB,UAAUA;YACVD,UAAUA;YACVhB,WAAWA;YACXG,gBAAgBA;YAChBF,YAAYA;YACZG,iBAAiBA;YACjBK,oBAAoBA;YACpBJ,wBAAwBA;YACxBC,yBAAyBA;;8BAEzB,KAACc;oBACE,GAAGL,SAAS;oBACbnC,IAAIA;oBACJD,KAAKA;oBACLc,cAAcA;oBACdC,MAAMA;oBACNsB,UAAUA;oBACVlC,OAAOQ;oBACPP,WAAWR,aAAa;wBACtBS,MAAM,CAAC,CAACA;wBACRD,WAAWQ;oBACb;8BAECuB;;gBAEF5B,uBACC,KAACd;oBACE,GAAGe,UAAU;oBACdkC,SAASzC;oBACTE,OAAOK,YAAYL,SAASM;oBAC5BL,WAAWI,YAAYJ,aAAaM;oBACpCiC,QAAQ;oBACR3B,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRmB,UAAUA;8BAET9B;;;;;AAMb,GACA"}
+{"version":3,"sources":["../../src/form/NativeSelect.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  type SelectHTMLAttributes,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { nativeSelect, nativeSelectContainer } from \"./nativeSelectStyles.js\";\nimport {\n  type FormFieldOptions,\n  type UserAgentAutocompleteProps,\n} from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0 Added support for {@link UserAgentAutocompleteProps}\n */\nexport interface NativeSelectProps\n  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, \"autoComplete\">,\n    UserAgentAutocompleteProps,\n    FormFieldOptions {\n  /**\n   * A custom dropdown icon to use instead of the browser's default select\n   * dropdown icon.\n   *\n   * Set this to `null` if the browser's default icon should be used instead.\n   *\n   * @defaultValue `getIcon(\"dropdown\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * This applies custom inline styles to the `<select>` element since the\n   * `style` prop is applied to the container element instead.\n   */\n  selectStyle?: CSSProperties;\n\n  /**\n   * This applies custom className to the `<select>` element since the\n   * `className` prop is applied to the container element instead.\n   */\n  selectClassName?: string;\n\n  /**\n   * This should be a list of `<option>` elements for specific values within the\n   * `<select>`.\n   *\n   * Check out the {@link NativeSelect} for examples around using \"placeholder\"\n   * text and requiring a value to be selected.\n   */\n  children: ReactNode;\n\n  /**\n   * Optional props to provide to the {@link TextFieldContainer} component.\n   * There probably isn't any real use for this prop other than if you need to\n   * add a `ref` for some DOM behavior.\n   */\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n}\n\n/**\n * **Server Component**\n *\n * This component is a wrapper for the native `<select>` field that applies the\n * same theming as `TextField` and `TextArea` components. This component might\n * not be used much since the `Select` offers more styling options.\n *\n * @example\n * Simple Example\n * ```tsx\n * <NativeSelect label=\"Label\">\n *   <option value=\"a\">Value 1</option>\n *   <option value=\"b\">Value 2</option>\n *   <option value=\"c\">Value 3</option>\n *   <option value=\"d\">Value 4</option>\n * </NativeSelect>\n * ```\n *\n * @example\n * Required Value Example\n * ```tsx\n * function Example(): ReactElement {\n *   // using `defaultValue=\"\"` makes it so the first option selected by default\n *   // and considered an \"invalid\" value since it is `disabled`\n *   //\n *   // a `name` must be set with `required` so that the form validation will\n *   // fire if the value is still the empty string when the form is submitted\n *   //\n *   // the first `<option>` is kind of like placeholder text since it doesn't\n *   // have a value and is disabled by default\n *\n *   return (\n *     <NativeSelect\n *       label=\"State\"\n *       name=\"state\"\n *       required\n *       defaultValue=\"\"\n *     >\n *       <option value=\"\" disabled>Choose a state</option>\n *       {states.map(({ name, code }) => (\n *         <option key={code} value={code}>{name}</option>\n *       ))}\n *     </NativeSelect>\n *   );\n * }\n * ```\n */\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n  function NativeSelect(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      icon: propIcon,\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      selectStyle,\n      selectClassName,\n      autoCompleteValue,\n      autoComplete = autoCompleteValue,\n      name = autoCompleteValue,\n      dense = false,\n      error = false,\n      active = false,\n      inline = false,\n      stretch = false,\n      leftAddon,\n      rightAddon: propRightAddon,\n      leftAddonProps,\n      rightAddonProps,\n      disableLeftAddonStyles = false,\n      disableRightAddonStyles = false,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      children,\n      ...remaining\n    } = props;\n    const { disabled = false, readOnly = false, multiple = false } = props;\n    const id = useEnsuredId(propId, \"select\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n    const icon = getIcon(\"dropdown\", propIcon);\n    const underlined = theme === \"underline\" || theme === \"filled\";\n\n    let rightAddon = propRightAddon;\n    if (typeof propRightAddon === \"undefined\" && !multiple) {\n      rightAddon = icon;\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <TextFieldContainer\n          {...containerProps}\n          style={style}\n          className={nativeSelectContainer({\n            label: !!label,\n            multiple,\n            underlined,\n            className,\n          })}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          stretch={stretch}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          leftAddonProps={leftAddonProps}\n          rightAddon={rightAddon}\n          rightAddonProps={rightAddonProps}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n        >\n          <select\n            {...remaining}\n            id={id}\n            ref={ref}\n            autoComplete={autoComplete}\n            name={name}\n            disabled={disabled}\n            style={selectStyle}\n            className={nativeSelect({\n              icon: !!icon,\n              className: selectClassName,\n            })}\n          >\n            {children}\n          </select>\n          {label && (\n            <Label\n              {...labelProps}\n              htmlFor={id}\n              style={labelProps?.style ?? labelStyle}\n              className={labelProps?.className ?? labelClassName}\n              floating\n              dense={dense}\n              error={error}\n              active={active}\n              disabled={disabled}\n            >\n              {label}\n            </Label>\n          )}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["forwardRef","getIcon","useEnsuredId","FormMessageContainer","Label","TextFieldContainer","getFormConfig","nativeSelect","nativeSelectContainer","NativeSelect","props","ref","id","propId","style","className","icon","propIcon","label","labelProps","labelStyle","labelClassName","selectStyle","selectClassName","autoCompleteValue","autoComplete","name","dense","error","active","inline","stretch","leftAddon","rightAddon","propRightAddon","leftAddonProps","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","children","remaining","disabled","readOnly","multiple","underlined","select","htmlFor","floating"],"mappings":";AAAA,SACEA,UAAU,QAKL,QAAQ;AACf,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,YAAY,EAAEC,qBAAqB,QAAQ,0BAA0B;AAoD9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CC,GACD,OAAO,MAAMC,6BAAeT,WAC1B,SAASS,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,MAAMC,QAAQ,EACdC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,WAAW,EACXC,eAAe,EACfC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,SAAS,EACTC,YAAYC,cAAc,EAC1BC,cAAc,EACdC,eAAe,EACfC,yBAAyB,KAAK,EAC9BC,0BAA0B,KAAK,EAC/BC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1CC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACdC,QAAQ,EACR,GAAGC,WACJ,GAAGrC;IACJ,MAAM,EAAEsC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGxC;IACjE,MAAME,KAAKV,aAAaW,QAAQ;IAChC,MAAM0B,QAAQjC,cAAc,SAASkC;IACrC,MAAMC,qBAAqBnC,cACzB,sBACAoC;IAEF,MAAM1B,OAAOf,QAAQ,YAAYgB;IACjC,MAAMkC,aAAaZ,UAAU,eAAeA,UAAU;IAEtD,IAAIN,aAAaC;IACjB,IAAI,OAAOA,mBAAmB,eAAe,CAACgB,UAAU;QACtDjB,aAAajB;IACf;IAEA,qBACE,KAACb;QACE,GAAGyC,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACtC;YACE,GAAGwC,cAAc;YAClB/B,OAAOA;YACPC,WAAWP,sBAAsB;gBAC/BU,OAAO,CAAC,CAACA;gBACTgC;gBACAC;gBACApC;YACF;YACAwB,OAAOA;YACPrB,OAAO,CAAC,CAACA;YACTU,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRE,SAASA;YACTkB,UAAUA;YACVD,UAAUA;YACVhB,WAAWA;YACXG,gBAAgBA;YAChBF,YAAYA;YACZG,iBAAiBA;YACjBK,oBAAoBA;YACpBJ,wBAAwBA;YACxBC,yBAAyBA;;8BAEzB,KAACc;oBACE,GAAGL,SAAS;oBACbnC,IAAIA;oBACJD,KAAKA;oBACLc,cAAcA;oBACdC,MAAMA;oBACNsB,UAAUA;oBACVlC,OAAOQ;oBACPP,WAAWR,aAAa;wBACtBS,MAAM,CAAC,CAACA;wBACRD,WAAWQ;oBACb;8BAECuB;;gBAEF5B,uBACC,KAACd;oBACE,GAAGe,UAAU;oBACdkC,SAASzC;oBACTE,OAAOK,YAAYL,SAASM;oBAC5BL,WAAWI,YAAYJ,aAAaM;oBACpCiC,QAAQ;oBACR3B,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRmB,UAAUA;8BAET9B;;;;;AAMb,GACA"}

package/dist/form/Option.js

@@ -36,9 +36,10 @@ const noop = ()=>{
  * \@since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
  * `selectedIconAfter`, and `iconSpacingProps` props.
  */ export const Option = /*#__PURE__*/ forwardRef(function Option(props, ref) {
-    const { id: propId, role = "option", value, children: propChildren, onClick = noop, className, selectedIcon: propSelectedIcon, unselectedIcon: propUnselectedIcon, selectedIconAfter = false, textIconSpacingProps, leftAddon: propLeftAddon, leftAddonType, leftAddonClassName, rightAddon: propRightAddon, rightAddonType, rightAddonClassName, secondaryText, height: propHeight, disableTextChildren: propDisableTextChildren, ...remaining } = props;
+    const { id: propId, role = "option", value, children: propChildren, onClick = noop, className, selectedIcon: propSelectedIcon, unselectedIcon: propUnselectedIcon, selectedIconAfter: propSelectedIconAfter, textIconSpacingProps, leftAddon: propLeftAddon, leftAddonType, leftAddonClassName, rightAddon: propRightAddon, rightAddonType, rightAddonClassName, secondaryText, height: propHeight, disableTextChildren: propDisableTextChildren, ...remaining } = props;
     const id = useEnsuredId(propId, "option");
-    const { inputRef, currentValue, disableSelectedIcon } = useListboxContext();
+    const { inputRef, currentValue, disableSelectedIcon, selectedIconAfter: contextSelectedIconAfter } = useListboxContext();
+    const selectedIconAfter = propSelectedIconAfter ?? contextSelectedIconAfter;
     const selected = value === currentValue;
     const selectedIcon = getIcon("selected", disableSelectedIcon ? null : propSelectedIcon);
     const unselectedIcon = disableSelectedIcon ? null : propUnselectedIcon ?? DEFAULT_OPTION_UNSELECTED_ICON;