@react-md/core 1.0.0-next.2 → 1.0.0-next.21

package/dist/expansion-panel/useExpansionPanels.js

@@ -1,17 +1,14 @@
 "use client";
-import { useState } from "react";
 import { useEnsuredId } from "../useEnsuredId.js";
+import { useReadonlySet } from "../useReadonlySet.js";
 /**
  * Use this hook to control the expanded state for a group of `ExpansionPanel`.
  *
- * @example
- * Index Based Panels
+ * @example Index Based Panels
  * ```tsx
- * import {
- *   ExpansionList,
- *   ExpansionPanel,
- *   useExpansionPanels,
- * } from "@react-md/core";
+ * import { ExpansionList } from "@react-md/core/expansion-panel/ExpansionList";
+ * import { ExpansionPanel } from "@react-md/core/expansion-panel/ExpansionPanel";
+ * import { useExpansionPanels } from "@react-md/core/expansion-panel/useExpansionPanels";
  * import { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -33,14 +30,11 @@ import { useEnsuredId } from "../useEnsuredId.js";
  * }
  * ```
  *
- * @example
- * Custom Panel Ids and Expand All Panels by Default
+ * @example Custom Panel Ids and Expand All Panels by Default
  * ```tsx
- * import {
- *   ExpansionList,
- *   ExpansionPanel,
- *   useExpansionPanels,
- * } from "@react-md/core";
+ * import { ExpansionList } from "@react-md/core/expansion-panel/ExpansionList";
+ * import { ExpansionPanel } from "@react-md/core/expansion-panel/ExpansionPanel";
+ * import { useExpansionPanels } from "@react-md/core/expansion-panel/useExpansionPanels";
  * import { type ReactElement } from "react";
  *
  * import { BillingAddress } from "./BillingAddress";
@@ -74,33 +68,42 @@ import { useEnsuredId } from "../useEnsuredId.js";
  * ```
  *
  *
- * @remarks
- * \@since 6.0.0 The hook was renamed from `usePanels` to `useExpansionPanels`,
+ * @see {@link https://next.react-md.dev/components/expansion-panel | ExpansionPanel Demos}
+ * @since 6.0.0 The hook was renamed from `usePanels` to `useExpansionPanels`,
  * the API changed to return `getPanelProps` instead of a generated list of
  * panel props based on the provided `count`, and the hook no longer supports
  * having all panels expanded by default.
  */ export function useExpansionPanels(options = {}) {
-    const { baseId: propBaseId, multiple = false, preventAllClosed = false, disableTransition = false, defaultExpandedIds, defaultExpandedIndex, disableContentPadding = false } = options;
+    const { baseId: propBaseId, multiple = false, preventAllCollapsed = false, disableTransition = false, defaultExpandedIds, defaultExpandedIndex, disableContentPadding = false } = options;
     const baseId = useEnsuredId(propBaseId, "expansion-panel");
     const createId = (index)=>`${baseId}-${index + 1}`;
-    const [expandedIds, setExpandedIds] = useState(()=>{
-        if (typeof defaultExpandedIds === "undefined") {
-            const initialList = [];
-            if (typeof defaultExpandedIndex === "number" || preventAllClosed) {
-                initialList.push(createId(defaultExpandedIndex ?? 0));
+    const { value: expandedIds, setValue: setExpandedIds, toggleValue } = useReadonlySet({
+        toggleType: multiple ? "multiple" : "single",
+        defaultValue: ()=>{
+            if (typeof defaultExpandedIds === "undefined") {
+                const initialList = [];
+                if (typeof defaultExpandedIndex === "number" || preventAllCollapsed) {
+                    initialList.push(createId(defaultExpandedIndex ?? 0));
+                }
+                return new Set(initialList);
             }
-            return new Set(initialList);
+            return typeof defaultExpandedIds === "function" ? defaultExpandedIds() : defaultExpandedIds;
         }
-        const ids = typeof defaultExpandedIds === "function" ? defaultExpandedIds() : defaultExpandedIds;
-        return new Set(ids);
     });
     return {
         expandedIds,
         setExpandedIds,
         getPanelProps (indexOrPanelId) {
-            const id = typeof indexOrPanelId === "string" ? indexOrPanelId : createId(indexOrPanelId);
-            const expanded = expandedIds.has(id);
-            const disabled = expanded && preventAllClosed && expandedIds.size === 1;
+            let id;
+            let panelId;
+            if (typeof indexOrPanelId === "number") {
+                id = createId(indexOrPanelId);
+                panelId = id;
+            } else {
+                panelId = indexOrPanelId;
+            }
+            const expanded = expandedIds.has(panelId);
+            const disabled = expanded && preventAllCollapsed && expandedIds.size === 1;
             return {
                 id,
                 disabled,
@@ -109,21 +112,7 @@ import { useEnsuredId } from "../useEnsuredId.js";
                     if (disabled) {
                         return;
                     }
-                    setExpandedIds((prevIds)=>{
-                        const expanded = prevIds.has(id);
-                        if (!multiple) {
-                            return new Set(expanded ? [] : [
-                                id
-                            ]);
-                        }
-                        const nextIds = new Set(prevIds);
-                        if (expanded) {
-                            nextIds.delete(id);
-                        } else {
-                            nextIds.add(id);
-                        }
-                        return nextIds;
-                    });
+                    toggleValue(panelId);
                 },
                 disableTransition,
                 disableContentPadding

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\";\n\nimport type { UseStateInitializer, UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\nimport type { ExpansionPanelProps } from \"./ExpansionPanel.js\";\n\n/** @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/** @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 * @since 6.0.0\n */\nexport type GetExpansionPanelProps = (\n  indexOrPanelId: string | number\n) => ProvidedExpansionPanelProps;\n\n/** @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 Index Based Panels\n   * ```tsx\n   * <ExpansionPanel {...getPanelProps(0)} />\n   * <ExpansionPanel {...getPanelProps(1)} />\n   * <ExpansionPanel {...getPanelProps(2)} />\n   * ```\n   *\n   * @example 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 Index Based Panels\n * ```tsx\n * import { ExpansionList } from \"@react-md/core/expansion-panel/ExpansionList\";\n * import { ExpansionPanel } from \"@react-md/core/expansion-panel/ExpansionPanel\";\n * import { useExpansionPanels } from \"@react-md/core/expansion-panel/useExpansionPanels\";\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 Custom Panel Ids and Expand All Panels by Default\n * ```tsx\n * import { ExpansionList } from \"@react-md/core/expansion-panel/ExpansionList\";\n * import { ExpansionPanel } from \"@react-md/core/expansion-panel/ExpansionPanel\";\n * import { useExpansionPanels } from \"@react-md/core/expansion-panel/useExpansionPanels\";\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 * @see {@link https://next.react-md.dev/components/expansion-panel | ExpansionPanel Demos}\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 {\n    value: expandedIds,\n    setValue: setExpandedIds,\n    toggleValue,\n  } = useReadonlySet({\n    toggleType: multiple ? \"multiple\" : \"single\",\n    defaultValue: () => {\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      return typeof defaultExpandedIds === \"function\"\n        ? defaultExpandedIds()\n        : defaultExpandedIds;\n    },\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          toggleValue(panelId);\n        },\n        disableTransition,\n        disableContentPadding,\n      };\n    },\n  };\n}\n"],"names":["useEnsuredId","useReadonlySet","useExpansionPanels","options","baseId","propBaseId","multiple","preventAllCollapsed","disableTransition","defaultExpandedIds","defaultExpandedIndex","disableContentPadding","createId","index","value","expandedIds","setValue","setExpandedIds","toggleValue","toggleType","defaultValue","initialList","push","Set","getPanelProps","indexOrPanelId","id","panelId","expanded","has","disabled","size","onExpandClick"],"mappings":"AAAA;AAGA,SAASA,YAAY,QAAQ,qBAAqB;AAClD,SAASC,cAAc,QAAQ,uBAAuB;AAsHtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEC,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,SAASJ,aAAaK,YAAY;IACxC,MAAMO,WAAW,CAACC,QAA0B,GAAGT,OAAO,CAAC,EAAES,QAAQ,GAAG;IACpE,MAAM,EACJC,OAAOC,WAAW,EAClBC,UAAUC,cAAc,EACxBC,WAAW,EACZ,GAAGjB,eAAe;QACjBkB,YAAYb,WAAW,aAAa;QACpCc,cAAc;YACZ,IAAI,OAAOX,uBAAuB,aAAa;gBAC7C,MAAMY,cAAwB,EAAE;gBAChC,IAAI,OAAOX,yBAAyB,YAAYH,qBAAqB;oBACnEc,YAAYC,IAAI,CAACV,SAASF,wBAAwB;gBACpD;gBAEA,OAAO,IAAIa,IAAIF;YACjB;YAEA,OAAO,OAAOZ,uBAAuB,aACjCA,uBACAA;QACN;IACF;IAEA,OAAO;QACLM;QACAE;QACAO,eAAcC,cAAc;YAC1B,IAAIC;YACJ,IAAIC;YACJ,IAAI,OAAOF,mBAAmB,UAAU;gBACtCC,KAAKd,SAASa;gBACdE,UAAUD;YACZ,OAAO;gBACLC,UAAUF;YACZ;YAEA,MAAMG,WAAWb,YAAYc,GAAG,CAACF;YACjC,MAAMG,WACJF,YAAYrB,uBAAuBQ,YAAYgB,IAAI,KAAK;YAC1D,OAAO;gBACLL;gBACAI;gBACAF;gBACAI;oBACE,IAAIF,UAAU;wBACZ;oBACF;oBAEAZ,YAAYS;gBACd;gBACAnB;gBACAG;YACF;QACF;IACF;AACF"}

package/dist/files/FileInput.d.ts

@@ -0,0 +1,103 @@
+import { type InputHTMLAttributes, type LabelHTMLAttributes, type ReactNode } from "react";
+import { type ButtonClassNameThemeOptions } from "../button/styles.js";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
+import { type PropsWithRef } from "../types.js";
+/** @since 6.0.0 */
+export type FileInputHTMLAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, "type">;
+/**
+ * @since 6.0.0 Removed the `disableIconSpacing` prop since it is no
+ * longer required.
+ */
+export interface FileInputProps extends ButtonClassNameThemeOptions, FileInputHTMLAttributes, ComponentWithRippleProps {
+    /**
+     * This is the label text for icon-only file inputs.
+     *
+     * @defaultValue `"Upload"`
+     */
+    srOnlyLabel?: ReactNode;
+    /**
+     * Any additional props to provide to the container `<label>` element since
+     * most props get passed to the `<input type="file">`. So this would be useful
+     * for inline style or click handlers.
+     */
+    labelProps?: PropsWithRef<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
+    /**
+     * An optional icon to display for the file input.
+     *
+     * @defaultValue `getIcon("upload")`
+     */
+    icon?: ReactNode;
+    /**
+     * Boolean if the icon should appear after the children in the label.
+     *
+     * @defaultValue `false`
+     */
+    iconAfter?: boolean;
+    /**
+     * Boolean if the file input should no longer allow the same file to be
+     * selected multiple times and trigger the `onChange` each time it is
+     * selected.
+     *
+     * @defaultValue `false`
+     */
+    disableRepeatableFiles?: boolean;
+    /**
+     * Children should generally be provided when the {@link buttonType} is
+     * set to `"text"`. This defaults to a screen-reader only accessible text.
+     *
+     * @defaultValue `<SrOnly phoneOnly={responsive}>Upload</SrOnly>`
+     */
+    children?: ReactNode;
+}
+/**
+ * **Client Component**
+ * This might be able to become a server component if I remove the getIcon hook
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { FileInput } from "@react-md/core/files/FileInput";
+ * import { Form } from "@react-md/core/form/Form";
+ * import type { ReactElement } from "react";
+ *
+ * const extensions = [
+ *   "svg",
+ *   "jpeg",
+ *   "jpg",
+ *   "png",
+ *   "apng",
+ *   "mkv",
+ *   "mp4",
+ *   "mpeg",
+ *   "mpg",
+ *   "webm",
+ *   "mov",
+ * ] as const;
+ *
+ * const FOUR_HUNDRED_MB = 400 * 1024 * 1024;
+ * const maxFiles = 10;
+ *
+ * function Example(): ReactElement {
+ *   const { stats, errors, onChange, clearErrors, reset, remove, accept } =
+ *     useFileUpload({
+ *       maxFiles,
+ *       maxFileSize: FOUR_HUNDRED_MB,
+ *       extensions,
+ *     });
+ *
+ *   return (
+ *     <Form>
+ *       <FileInput accept={accept} multiple={maxFiles > 1} onChange={onChange} />
+ *       <Button onClick={reset} disabled={!stats.length}>
+ *         Remove all files
+ *       </Button>
+ *     </Form>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link https://next.react-md.dev/components/file-input | FileInput Demos}
+ * @since 6.0.0 Added additional support for `iconSize` and
+ * `responsive`. Also removed the `disableIconSpacing` prop since it is no
+ * longer required.
+ */
+export declare const FileInput: import("react").ForwardRefExoticComponent<FileInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/files/FileInput.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { getIcon } from "../icon/config.js";
+import { useElementInteraction } from "../interaction/useElementInteraction.js";
+import { SrOnly } from "../typography/SrOnly.js";
+import { useEnsuredId } from "../useEnsuredId.js";
+import { fileInput } from "./styles.js";
+/**
+ * **Client Component**
+ * This might be able to become a server component if I remove the getIcon hook
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { FileInput } from "@react-md/core/files/FileInput";
+ * import { Form } from "@react-md/core/form/Form";
+ * import type { ReactElement } from "react";
+ *
+ * const extensions = [
+ *   "svg",
+ *   "jpeg",
+ *   "jpg",
+ *   "png",
+ *   "apng",
+ *   "mkv",
+ *   "mp4",
+ *   "mpeg",
+ *   "mpg",
+ *   "webm",
+ *   "mov",
+ * ] as const;
+ *
+ * const FOUR_HUNDRED_MB = 400 * 1024 * 1024;
+ * const maxFiles = 10;
+ *
+ * function Example(): ReactElement {
+ *   const { stats, errors, onChange, clearErrors, reset, remove, accept } =
+ *     useFileUpload({
+ *       maxFiles,
+ *       maxFileSize: FOUR_HUNDRED_MB,
+ *       extensions,
+ *     });
+ *
+ *   return (
+ *     <Form>
+ *       <FileInput accept={accept} multiple={maxFiles > 1} onChange={onChange} />
+ *       <Button onClick={reset} disabled={!stats.length}>
+ *         Remove all files
+ *       </Button>
+ *     </Form>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link https://next.react-md.dev/components/file-input | FileInput Demos}
+ * @since 6.0.0 Added additional support for `iconSize` and
+ * `responsive`. Also removed the `disableIconSpacing` prop since it is no
+ * longer required.
+ */ export const FileInput = /*#__PURE__*/ forwardRef(function FileInput(props, ref) {
+    const { id: propId, className, children: propChildren, icon: propIcon, iconAfter = false, srOnlyLabel = "Upload", disableRepeatableFiles = false, labelProps, theme = "primary", themeType = "contained", buttonType = propChildren ? "text" : "icon", disabled = false, iconSize, responsive, multiple = false, disableRipple, ...remaining } = props;
+    const id = useEnsuredId(propId, "file-input");
+    const { pressed, pressedClassName, ripples, handlers } = useElementInteraction({
+        ...labelProps,
+        mode: disableRipple ? "none" : undefined,
+        onClick (event) {
+            labelProps?.onClick?.(event);
+            // stop propagation so 2 ripples are not created
+            event.stopPropagation();
+        },
+        disabled
+    });
+    const icon = getIcon("upload", propIcon);
+    let children = propChildren;
+    if (typeof propChildren === "undefined" && !props["aria-label"] && !props["aria-labelledby"]) {
+        children = /*#__PURE__*/ _jsx(SrOnly, {
+            phoneOnly: responsive,
+            children: srOnlyLabel
+        });
+    }
+    return /*#__PURE__*/ _jsxs("label", {
+        ...labelProps,
+        ...handlers,
+        className: fileInput({
+            theme,
+            themeType,
+            buttonType,
+            disabled,
+            iconSize,
+            pressed,
+            responsive,
+            pressedClassName,
+            className: className || labelProps?.className
+        }),
+        children: [
+            !iconAfter && icon,
+            children,
+            iconAfter && icon,
+            /*#__PURE__*/ _jsx("input", {
+                ...remaining,
+                id: id,
+                ref: ref,
+                value: disableRepeatableFiles || !props.onChange ? remaining.value : "",
+                type: "file",
+                className: "rmd-hidden-input",
+                disabled: disabled,
+                multiple: multiple
+            }),
+            ripples
+        ]
+    });
+});
+
+//# sourceMappingURL=FileInput.js.map

package/dist/files/FileInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/files/FileInput.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type ButtonClassNameThemeOptions } from \"../button/styles.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { SrOnly } from \"../typography/SrOnly.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { fileInput } from \"./styles.js\";\n\n/** @since 6.0.0 */\nexport type FileInputHTMLAttributes = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\"\n>;\n\n/**\n * @since 6.0.0 Removed the `disableIconSpacing` prop since it is no\n * longer required.\n */\nexport interface FileInputProps\n  extends ButtonClassNameThemeOptions,\n    FileInputHTMLAttributes,\n    ComponentWithRippleProps {\n  /**\n   * This is the label text for icon-only file inputs.\n   *\n   * @defaultValue `\"Upload\"`\n   */\n  srOnlyLabel?: ReactNode;\n\n  /**\n   * Any additional props to provide to the container `<label>` element since\n   * most props get passed to the `<input type=\"file\">`. So this would be useful\n   * for inline style or click handlers.\n   */\n  labelProps?: PropsWithRef<\n    LabelHTMLAttributes<HTMLLabelElement>,\n    HTMLLabelElement\n  >;\n\n  /**\n   * An optional icon to display for the file input.\n   *\n   * @defaultValue `getIcon(\"upload\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * Boolean if the icon should appear after the children in the label.\n   *\n   * @defaultValue `false`\n   */\n  iconAfter?: boolean;\n\n  /**\n   * Boolean if the file input should no longer allow the same file to be\n   * selected multiple times and trigger the `onChange` each time it is\n   * selected.\n   *\n   * @defaultValue `false`\n   */\n  disableRepeatableFiles?: boolean;\n\n  /**\n   * Children should generally be provided when the {@link buttonType} is\n   * set to `\"text\"`. This defaults to a screen-reader only accessible text.\n   *\n   * @defaultValue `<SrOnly phoneOnly={responsive}>Upload</SrOnly>`\n   */\n  children?: ReactNode;\n}\n\n/**\n * **Client Component**\n * This might be able to become a server component if I remove the getIcon hook\n *\n * @example Simple Example\n * ```tsx\n * import { FileInput } from \"@react-md/core/files/FileInput\";\n * import { Form } from \"@react-md/core/form/Form\";\n * import type { ReactElement } from \"react\";\n *\n * const extensions = [\n *   \"svg\",\n *   \"jpeg\",\n *   \"jpg\",\n *   \"png\",\n *   \"apng\",\n *   \"mkv\",\n *   \"mp4\",\n *   \"mpeg\",\n *   \"mpg\",\n *   \"webm\",\n *   \"mov\",\n * ] as const;\n *\n * const FOUR_HUNDRED_MB = 400 * 1024 * 1024;\n * const maxFiles = 10;\n *\n * function Example(): ReactElement {\n *   const { stats, errors, onChange, clearErrors, reset, remove, accept } =\n *     useFileUpload({\n *       maxFiles,\n *       maxFileSize: FOUR_HUNDRED_MB,\n *       extensions,\n *     });\n *\n *   return (\n *     <Form>\n *       <FileInput accept={accept} multiple={maxFiles > 1} onChange={onChange} />\n *       <Button onClick={reset} disabled={!stats.length}>\n *         Remove all files\n *       </Button>\n *     </Form>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/file-input | FileInput Demos}\n * @since 6.0.0 Added additional support for `iconSize` and\n * `responsive`. Also removed the `disableIconSpacing` prop since it is no\n * longer required.\n */\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(\n  function FileInput(props, ref) {\n    const {\n      id: propId,\n      className,\n      children: propChildren,\n      icon: propIcon,\n      iconAfter = false,\n      srOnlyLabel = \"Upload\",\n      disableRepeatableFiles = false,\n      labelProps,\n      theme = \"primary\",\n      themeType = \"contained\",\n      buttonType = propChildren ? \"text\" : \"icon\",\n      disabled = false,\n      iconSize,\n      responsive,\n      multiple = false,\n      disableRipple,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"file-input\");\n    const { pressed, pressedClassName, ripples, handlers } =\n      useElementInteraction({\n        ...labelProps,\n        mode: disableRipple ? \"none\" : undefined,\n        onClick(event) {\n          labelProps?.onClick?.(event);\n\n          // stop propagation so 2 ripples are not created\n          event.stopPropagation();\n        },\n        disabled,\n      });\n\n    const icon = getIcon(\"upload\", propIcon);\n    let children = propChildren;\n    if (\n      typeof propChildren === \"undefined\" &&\n      !props[\"aria-label\"] &&\n      !props[\"aria-labelledby\"]\n    ) {\n      children = <SrOnly phoneOnly={responsive}>{srOnlyLabel}</SrOnly>;\n    }\n\n    return (\n      <label\n        {...labelProps}\n        {...handlers}\n        className={fileInput({\n          theme,\n          themeType,\n          buttonType,\n          disabled,\n          iconSize,\n          pressed,\n          responsive,\n          pressedClassName,\n          className: className || labelProps?.className,\n        })}\n      >\n        {!iconAfter && icon}\n        {children}\n        {iconAfter && icon}\n        <input\n          {...remaining}\n          id={id}\n          ref={ref}\n          value={\n            disableRepeatableFiles || !props.onChange ? remaining.value : \"\"\n          }\n          type=\"file\"\n          className=\"rmd-hidden-input\"\n          disabled={disabled}\n          multiple={multiple}\n        />\n        {ripples}\n      </label>\n    );\n  }\n);\n"],"names":["forwardRef","getIcon","useElementInteraction","SrOnly","useEnsuredId","fileInput","FileInput","props","ref","id","propId","className","children","propChildren","icon","propIcon","iconAfter","srOnlyLabel","disableRepeatableFiles","labelProps","theme","themeType","buttonType","disabled","iconSize","responsive","multiple","disableRipple","remaining","pressed","pressedClassName","ripples","handlers","mode","undefined","onClick","event","stopPropagation","phoneOnly","label","input","value","onChange","type"],"mappings":"AAAA;;AAEA,SAIEA,UAAU,QACL,QAAQ;AAGf,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,qBAAqB,QAAQ,0CAA0C;AAEhF,SAASC,MAAM,QAAQ,0BAA0B;AACjD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAiExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDC,GACD,OAAO,MAAMC,0BAAYN,WACvB,SAASM,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,UAAUC,YAAY,EACtBC,MAAMC,QAAQ,EACdC,YAAY,KAAK,EACjBC,cAAc,QAAQ,EACtBC,yBAAyB,KAAK,EAC9BC,UAAU,EACVC,QAAQ,SAAS,EACjBC,YAAY,WAAW,EACvBC,aAAaT,eAAe,SAAS,MAAM,EAC3CU,WAAW,KAAK,EAChBC,QAAQ,EACRC,UAAU,EACVC,WAAW,KAAK,EAChBC,aAAa,EACb,GAAGC,WACJ,GAAGrB;IACJ,MAAME,KAAKL,aAAaM,QAAQ;IAChC,MAAM,EAAEmB,OAAO,EAAEC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GACpD9B,sBAAsB;QACpB,GAAGiB,UAAU;QACbc,MAAMN,gBAAgB,SAASO;QAC/BC,SAAQC,KAAK;YACXjB,YAAYgB,UAAUC;YAEtB,gDAAgD;YAChDA,MAAMC,eAAe;QACvB;QACAd;IACF;IAEF,MAAMT,OAAOb,QAAQ,UAAUc;IAC/B,IAAIH,WAAWC;IACf,IACE,OAAOA,iBAAiB,eACxB,CAACN,KAAK,CAAC,aAAa,IACpB,CAACA,KAAK,CAAC,kBAAkB,EACzB;QACAK,yBAAW,KAACT;YAAOmC,WAAWb;sBAAaR;;IAC7C;IAEA,qBACE,MAACsB;QACE,GAAGpB,UAAU;QACb,GAAGa,QAAQ;QACZrB,WAAWN,UAAU;YACnBe;YACAC;YACAC;YACAC;YACAC;YACAK;YACAJ;YACAK;YACAnB,WAAWA,aAAaQ,YAAYR;QACtC;;YAEC,CAACK,aAAaF;YACdF;YACAI,aAAaF;0BACd,KAAC0B;gBACE,GAAGZ,SAAS;gBACbnB,IAAIA;gBACJD,KAAKA;gBACLiC,OACEvB,0BAA0B,CAACX,MAAMmC,QAAQ,GAAGd,UAAUa,KAAK,GAAG;gBAEhEE,MAAK;gBACLhC,WAAU;gBACVY,UAAUA;gBACVG,UAAUA;;YAEXK;;;AAGP,GACA"}

package/dist/files/_files.scss

@@ -0,0 +1,31 @@
+////
+/// @group files
+////
+@use "../utils";
+@use "../interaction/interaction";
+
+/// Set to `true` to disable all the styles
+/// @type Boolean
+$disable-everything: false !default;
+
+/// Generates all the styles based on feature flags.
+///
+/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
+/// layer behavior
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(files, $disable-layer) {
+      @if utils.$disable-has-selectors or utils.$disable-focus-visible {
+        .rmd-file-input:focus-within::before {
+          @include utils.keyboard-only {
+            @include interaction.focus-styles;
+          }
+        }
+      } @else {
+        .rmd-file-input:has(:focus-visible)::before {
+          @include interaction.focus-styles;
+        }
+      }
+    }
+  }
+}

package/dist/files/styles.d.ts

@@ -0,0 +1,5 @@
+import { type ButtonClassNameOptions } from "../button/styles.js";
+/** @since 6.0.0 */
+export type FileInputClassNameOptions = ButtonClassNameOptions;
+/** @since 6.0.0 */
+export declare function fileInput(options?: FileInputClassNameOptions): string;

package/dist/files/styles.js

@@ -0,0 +1,7 @@
+import { cnb } from "cnbuilder";
+import { button } from "../button/styles.js";
+/** @since 6.0.0 */ export function fileInput(options = {}) {
+    return cnb("rmd-file-input", button(options));
+}
+
+//# sourceMappingURL=styles.js.map

package/dist/files/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/files/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type ButtonClassNameOptions, button } from \"../button/styles.js\";\n\n/** @since 6.0.0 */\nexport type FileInputClassNameOptions = ButtonClassNameOptions;\n\n/** @since 6.0.0 */\nexport function fileInput(options: FileInputClassNameOptions = {}): string {\n  return cnb(\"rmd-file-input\", button(options));\n}\n"],"names":["cnb","button","fileInput","options"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAAsCC,MAAM,QAAQ,sBAAsB;AAK1E,iBAAiB,GACjB,OAAO,SAASC,UAAUC,UAAqC,CAAC,CAAC;IAC/D,OAAOH,IAAI,kBAAkBC,OAAOE;AACtC"}

package/dist/files/useFileUpload.d.ts

@@ -0,0 +1,148 @@
+import { type FileUploadHandlers, type FileUploadStats, type GetFileParser } from "./utils.js";
+import { type FileValidationError, type FileValidationOptions, type FilesValidator } from "./validation.js";
+/**
+ *
+ * @typeParam CustomError - An optional error type that gets returned from the
+ * {@link FilesValidator}.
+ * @since 2.9.0
+ */
+export interface FileUploadState<CustomError = never> {
+    /**
+     * All the files that have been validated and are either:
+     * - pending upload
+     * - uploading
+     * - complete
+     *
+     * Each key in this object is the {@link BaseFileUploadStats.key} generated
+     * once the upload starts pending.
+     */
+    stats: Readonly<Record<string, Readonly<FileUploadStats>>>;
+    /**
+     * A list of validation errors that have occurred before starting the upload
+     * process.
+     *
+     * @see {@link FileAccessError}
+     * @see {@link TooManyFilesError}
+     * @see {@link FileValidationError}
+     */
+    errors: readonly FileValidationError<CustomError>[];
+}
+/**
+ *
+ * @typeParam CustomError - An optional error type that gets returned from the
+ * {@link FilesValidator}.
+ * @since 2.9.0
+ * @internal
+ */
+export interface FileUploadHookState<CustomError = never> extends FileUploadState<CustomError> {
+    /**
+     * All the current readers used for uploading files to the browser.
+     *
+     * Note: Once an upload has completed, the reader will be removed.
+     */
+    readers: Readonly<Record<string, FileReader>>;
+}
+/**
+ *
+ * @typeParam E - An optional HTMLElement type that is used for the
+ * {@link FileUploadHandlers}.
+ * @typeParam CustomError - An optional error type that gets returned from the
+ * {@link FilesValidator}.
+ * @since 2.9.0
+ */
+export interface FileUploadOptions<E extends HTMLElement, CustomError = never> extends FileUploadHandlers<E>, FileValidationOptions {
+    /**
+     * Setting this value to a number greater than `0` will update the browser
+     * upload process to queue the uploads in chunks instead of all at once. This
+     * can help prevent the browser from freezing if dealing with large files that
+     * are being converted to data urls.
+     *
+     * @defaultValue `-1`
+     */
+    concurrency?: number;
+    /** {@inheritDoc FilesValidator} */
+    validateFiles?: FilesValidator<CustomError>;
+    /** {@inheritDoc GetFileParser} */
+    getFileParser?: GetFileParser;
+}
+/** @since 2.9.0 */
+export interface FileUploadActions {
+    /**
+     * Reset everything related to uploads ensuring that all file readers have
+     * been aborted.
+     */
+    reset: () => void;
+    /**
+     * Removes all the errors that exist in state without canceling any of the
+     * uploads already in progress.
+     */
+    clearErrors: () => void;
+    /**
+     * This function is used to cancel pending and uploading files or removing
+     * completed files.
+     *
+     * @param keyOrKeys - A single or list of {@link BaseFileUploadStats.key} to
+     * remove from state.
+     */
+    remove: (keyOrKeys: string | readonly string[]) => void;
+}
+/**
+ *
+ * @typeParam E - An optional HTMLElement type that is used for the
+ * {@link FileUploadHandlers}.
+ * @typeParam CustomError - An optional error type that gets returned from the
+ * {@link FilesValidator}.
+ * @since 2.9.0
+ */
+export interface FileUploadHookReturnValue<E extends HTMLElement = HTMLElement, CustomError = never> extends FileUploadActions, Required<FileUploadHandlers<E>> {
+    /** {@inheritDoc FileUploadState.errors} */
+    errors: readonly FileValidationError<CustomError>[];
+    /**
+     * A list of all the {@link FileUploadStats}.
+     *
+     * @see {@link getSplitFileUploads} for separating by status
+     */
+    stats: readonly Readonly<FileUploadStats>[];
+    /**
+     * The total number of bytes for all the files that exist in the
+     * {@link stats} list.
+     */
+    totalBytes: number;
+    /**
+     * The total number of files in the {@link stats} list.
+     */
+    totalFiles: number;
+    /**
+     * An `accept` string that can be passed to the {@link FileInput} component
+     * when the {@link FileValidationOptions.extensions} list has been provided to
+     * limit which files the OS will _attempt_ to allow access to.
+     *
+     * @example Simple example
+     * ```ts
+     * const extensions = ['pdf', 'docx', 'ppt'];
+     * const { accept } = useFileUpload({ extensions, ...others });
+     *
+     * expect(accept).toBe("*.pdf,*.docx,*.ppt")
+     * ```
+     *
+     * @defaultValue `"*"`
+     */
+    accept: string;
+}
+/**
+ * This hook is generally used to upload files **to the browser** in different
+ * formats to be previewed `<img>`, `<video>`, `<embed>`, etc tags. However, it
+ * can also be used to upload the files as an `ArrayBuffer` and then uploaded to
+ * a server.
+ *
+ * @see {@link https://next.react-md.dev/components/file-input | FileInput Demos}
+ * @see {@link https://next.react-md.dev/hooks/use-file-input | useFileInput Demos}
+ * @typeParam E - An optional HTMLElement type that is used for the
+ * {@link FileUploadHandlers}.
+ * @typeParam CustomError - An optional error type that gets returned from the
+ * {@link FilesValidator}.
+ * @param options - All the {@link FileUploadOptions}
+ * @returns the {@link FileUploadHookReturnValue}
+ * @since 2.9.0
+ */
+export declare function useFileUpload<E extends HTMLElement, CustomError = never>(options?: FileUploadOptions<E, CustomError>): Readonly<FileUploadHookReturnValue<E, CustomError>>;