@react-md/core 1.0.0-next.16 → 1.0.0-next.18

package/dist/tree/useTreeExpansion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/useTreeExpansion.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useState } from \"react\";\nimport { type UseStateSetter } from \"../types.js\";\nimport { type TreeDefaultIds, type TreeItemIdSet } from \"./types.js\";\n\n/**\n * @since 6.0.0 Renamed from `TreeItemExpansion` and uses a Set\n * instead of a list to increase performance. Also renamed `onItemExpansion` to\n * `toggleTreeItemExpansion` and `onMultiItemExpansion` to\n * `expandMultipleTreeItems`.\n */\nexport interface TreeExpansion {\n  expandedIds: TreeItemIdSet;\n  toggleTreeItemExpansion(itemId: string): void;\n  expandMultipleTreeItems: UseStateSetter<TreeItemIdSet>;\n}\n\n/**\n * @since 6.0.0 Renamed from `useTreeItemExpansion` and uses a Set\n * instead of a list to increase performance.\n */\nexport function useTreeExpansion(\n  defaultExpandedIds?: TreeDefaultIds\n): TreeExpansion {\n  const [expandedIds, setExpandedIds] = useState<TreeItemIdSet>(() => {\n    const defaultIds =\n      typeof defaultExpandedIds === \"function\"\n        ? defaultExpandedIds()\n        : defaultExpandedIds;\n\n    return new Set(defaultIds);\n  });\n\n  const toggleTreeItemExpansion = useCallback((itemId: string) => {\n    setExpandedIds((prevExpandedIds) => {\n      const expandedIds = new Set(prevExpandedIds);\n      if (expandedIds.has(itemId)) {\n        expandedIds.delete(itemId);\n      } else {\n        expandedIds.add(itemId);\n      }\n\n      return expandedIds;\n    });\n  }, []);\n\n  return {\n    expandedIds,\n    toggleTreeItemExpansion,\n    expandMultipleTreeItems: setExpandedIds,\n  };\n}\n"],"names":["useCallback","useState","useTreeExpansion","defaultExpandedIds","expandedIds","setExpandedIds","defaultIds","Set","toggleTreeItemExpansion","itemId","prevExpandedIds","has","delete","add","expandMultipleTreeItems"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAgB9C;;;CAGC,GACD,OAAO,SAASC,iBACdC,kBAAmC;IAEnC,MAAM,CAACC,aAAaC,eAAe,GAAGJ,SAAwB;QAC5D,MAAMK,aACJ,OAAOH,uBAAuB,aAC1BA,uBACAA;QAEN,OAAO,IAAII,IAAID;IACjB;IAEA,MAAME,0BAA0BR,YAAY,CAACS;QAC3CJ,eAAe,CAACK;YACd,MAAMN,cAAc,IAAIG,IAAIG;YAC5B,IAAIN,YAAYO,GAAG,CAACF,SAAS;gBAC3BL,YAAYQ,MAAM,CAACH;YACrB,OAAO;gBACLL,YAAYS,GAAG,CAACJ;YAClB;YAEA,OAAOL;QACT;IACF,GAAG,EAAE;IAEL,OAAO;QACLA;QACAI;QACAM,yBAAyBT;IAC3B;AACF"}
+{"version":3,"sources":["../../src/tree/useTreeExpansion.ts"],"sourcesContent":["\"use client\";\nimport { type UseStateSetter } from \"../types.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\nimport { type TreeDefaultIds, type TreeItemIdSet } from \"./types.js\";\n\n/**\n * @since 6.0.0 Renamed from `TreeItemExpansion` and uses a Set\n * instead of a list to increase performance. Also renamed `onItemExpansion` to\n * `toggleTreeItemExpansion` and `onMultiItemExpansion` to\n * `expandMultipleTreeItems`.\n */\nexport interface TreeExpansion {\n  expandedIds: TreeItemIdSet;\n  toggleTreeItemExpansion: (itemId: string) => void;\n  expandMultipleTreeItems: UseStateSetter<TreeItemIdSet>;\n}\n\n/**\n * @since 6.0.0 Renamed from `useTreeItemExpansion` and uses a Set\n * instead of a list to increase performance.\n */\nexport function useTreeExpansion(\n  defaultExpandedIds?: TreeDefaultIds\n): TreeExpansion {\n  const { value, setValue, toggleValue } = useReadonlySet({\n    defaultValue: defaultExpandedIds,\n  });\n\n  return {\n    expandedIds: value,\n    toggleTreeItemExpansion: toggleValue,\n    expandMultipleTreeItems: setValue,\n  };\n}\n"],"names":["useReadonlySet","useTreeExpansion","defaultExpandedIds","value","setValue","toggleValue","defaultValue","expandedIds","toggleTreeItemExpansion","expandMultipleTreeItems"],"mappings":"AAAA;AAEA,SAASA,cAAc,QAAQ,uBAAuB;AAetD;;;CAGC,GACD,OAAO,SAASC,iBACdC,kBAAmC;IAEnC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGL,eAAe;QACtDM,cAAcJ;IAChB;IAEA,OAAO;QACLK,aAAaJ;QACbK,yBAAyBH;QACzBI,yBAAyBL;IAC3B;AACF"}

package/dist/tree/useTreeSelection.d.ts

@@ -10,7 +10,7 @@ export interface TreeSelection {
     /** @defaultValue `false` */
     multiSelect?: boolean;
     selectedIds: ReadonlySet<string>;
-    toggleTreeItemSelection(itemId: string): void;
+    toggleTreeItemSelection: (itemId: string) => void;
     selectMultipleTreeItems: UseStateSetter<TreeItemIdSet>;
 }
 /**

package/dist/tree/useTreeSelection.js

@@ -1,36 +1,18 @@
 "use client";
-import { useCallback, useState } from "react";
+import { useReadonlySet } from "../useReadonlySet.js";
 /**
  * @since 6.0.0 Renamed from `useTreeItemSelection` and uses a Set
  * instead of a list to increase performance.
  */ export function useTreeSelection(defaultSelectedIds, multiSelect = false) {
-    const [selectedIds, setSelectedIds] = useState(()=>{
-        const defaultIds = typeof defaultSelectedIds === "function" ? defaultSelectedIds() : defaultSelectedIds;
-        return new Set(defaultIds);
+    const { value, setValue, toggleValue } = useReadonlySet({
+        toggleType: multiSelect ? "multiple" : "single-select",
+        defaultValue: defaultSelectedIds
     });
-    const toggleTreeItemSelection = useCallback((itemId)=>{
-        setSelectedIds((selectedIds)=>{
-            if (!multiSelect) {
-                return selectedIds.has(itemId) ? selectedIds : new Set([
-                    itemId
-                ]);
-            }
-            const nextSelectedIds = new Set(selectedIds);
-            if (selectedIds.has(itemId)) {
-                nextSelectedIds.delete(itemId);
-            } else {
-                nextSelectedIds.add(itemId);
-            }
-            return nextSelectedIds;
-        });
-    }, [
-        multiSelect
-    ]);
     return {
-        selectedIds,
         multiSelect,
-        toggleTreeItemSelection,
-        selectMultipleTreeItems: setSelectedIds
+        selectedIds: value,
+        toggleTreeItemSelection: toggleValue,
+        selectMultipleTreeItems: setValue
     };
 }
 

package/dist/tree/useTreeSelection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/useTreeSelection.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useState } from \"react\";\nimport { type UseStateSetter } from \"../types.js\";\nimport { type TreeDefaultIds, type TreeItemIdSet } from \"./types.js\";\n\n/**\n * @since 6.0.0 Renamed from `TreeItemSelection` and uses a Set\n * instead of a list to increase performance. Also renamed `onItemSelect` to\n * `toggleTreeItemSelection` and `onMultiItemSelect` to\n * `selectMultipleTreeItems`.\n */\nexport interface TreeSelection {\n  /** @defaultValue `false` */\n  multiSelect?: boolean;\n  selectedIds: ReadonlySet<string>;\n  toggleTreeItemSelection(itemId: string): void;\n  selectMultipleTreeItems: UseStateSetter<TreeItemIdSet>;\n}\n\n/**\n * @since 6.0.0 Renamed from `useTreeItemSelection` and uses a Set\n * instead of a list to increase performance.\n */\nexport function useTreeSelection(\n  defaultSelectedIds?: TreeDefaultIds,\n  multiSelect = false\n): Required<TreeSelection> {\n  const [selectedIds, setSelectedIds] = useState<TreeItemIdSet>(() => {\n    const defaultIds =\n      typeof defaultSelectedIds === \"function\"\n        ? defaultSelectedIds()\n        : defaultSelectedIds;\n\n    return new Set(defaultIds);\n  });\n\n  const toggleTreeItemSelection = useCallback(\n    (itemId: string) => {\n      setSelectedIds((selectedIds) => {\n        if (!multiSelect) {\n          return selectedIds.has(itemId) ? selectedIds : new Set([itemId]);\n        }\n\n        const nextSelectedIds = new Set(selectedIds);\n        if (selectedIds.has(itemId)) {\n          nextSelectedIds.delete(itemId);\n        } else {\n          nextSelectedIds.add(itemId);\n        }\n\n        return nextSelectedIds;\n      });\n    },\n    [multiSelect]\n  );\n\n  return {\n    selectedIds,\n    multiSelect,\n    toggleTreeItemSelection,\n    selectMultipleTreeItems: setSelectedIds,\n  };\n}\n"],"names":["useCallback","useState","useTreeSelection","defaultSelectedIds","multiSelect","selectedIds","setSelectedIds","defaultIds","Set","toggleTreeItemSelection","itemId","has","nextSelectedIds","delete","add","selectMultipleTreeItems"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAkB9C;;;CAGC,GACD,OAAO,SAASC,iBACdC,kBAAmC,EACnCC,cAAc,KAAK;IAEnB,MAAM,CAACC,aAAaC,eAAe,GAAGL,SAAwB;QAC5D,MAAMM,aACJ,OAAOJ,uBAAuB,aAC1BA,uBACAA;QAEN,OAAO,IAAIK,IAAID;IACjB;IAEA,MAAME,0BAA0BT,YAC9B,CAACU;QACCJ,eAAe,CAACD;YACd,IAAI,CAACD,aAAa;gBAChB,OAAOC,YAAYM,GAAG,CAACD,UAAUL,cAAc,IAAIG,IAAI;oBAACE;iBAAO;YACjE;YAEA,MAAME,kBAAkB,IAAIJ,IAAIH;YAChC,IAAIA,YAAYM,GAAG,CAACD,SAAS;gBAC3BE,gBAAgBC,MAAM,CAACH;YACzB,OAAO;gBACLE,gBAAgBE,GAAG,CAACJ;YACtB;YAEA,OAAOE;QACT;IACF,GACA;QAACR;KAAY;IAGf,OAAO;QACLC;QACAD;QACAK;QACAM,yBAAyBT;IAC3B;AACF"}
+{"version":3,"sources":["../../src/tree/useTreeSelection.ts"],"sourcesContent":["\"use client\";\nimport { type UseStateSetter } from \"../types.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\nimport { type TreeDefaultIds, type TreeItemIdSet } from \"./types.js\";\n\n/**\n * @since 6.0.0 Renamed from `TreeItemSelection` and uses a Set\n * instead of a list to increase performance. Also renamed `onItemSelect` to\n * `toggleTreeItemSelection` and `onMultiItemSelect` to\n * `selectMultipleTreeItems`.\n */\nexport interface TreeSelection {\n  /** @defaultValue `false` */\n  multiSelect?: boolean;\n  selectedIds: ReadonlySet<string>;\n  toggleTreeItemSelection: (itemId: string) => void;\n  selectMultipleTreeItems: UseStateSetter<TreeItemIdSet>;\n}\n\n/**\n * @since 6.0.0 Renamed from `useTreeItemSelection` and uses a Set\n * instead of a list to increase performance.\n */\nexport function useTreeSelection(\n  defaultSelectedIds?: TreeDefaultIds,\n  multiSelect = false\n): Required<TreeSelection> {\n  const { value, setValue, toggleValue } = useReadonlySet({\n    toggleType: multiSelect ? \"multiple\" : \"single-select\",\n    defaultValue: defaultSelectedIds,\n  });\n\n  return {\n    multiSelect,\n    selectedIds: value,\n    toggleTreeItemSelection: toggleValue,\n    selectMultipleTreeItems: setValue,\n  };\n}\n"],"names":["useReadonlySet","useTreeSelection","defaultSelectedIds","multiSelect","value","setValue","toggleValue","toggleType","defaultValue","selectedIds","toggleTreeItemSelection","selectMultipleTreeItems"],"mappings":"AAAA;AAEA,SAASA,cAAc,QAAQ,uBAAuB;AAiBtD;;;CAGC,GACD,OAAO,SAASC,iBACdC,kBAAmC,EACnCC,cAAc,KAAK;IAEnB,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGN,eAAe;QACtDO,YAAYJ,cAAc,aAAa;QACvCK,cAAcN;IAChB;IAEA,OAAO;QACLC;QACAM,aAAaL;QACbM,yBAAyBJ;QACzBK,yBAAyBN;IAC3B;AACF"}

package/dist/tree/utils.d.ts

@@ -1,4 +1,4 @@
-import type { TreeItemNode, TreeData, DefaultTreeItemNode } from "./types.js";
+import { type DefaultTreeItemNode, type TreeData, type TreeItemNode } from "./types.js";
 /**
  * This will get all the items from the provided itemId up to the root of the
  * tree that can be used for drag and drop behavior or building a breadcrumb

package/dist/tree/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/utils.ts"],"sourcesContent":["import type { TreeItemNode, TreeData, DefaultTreeItemNode } from \"./types.js\";\n\n/**\n * This will get all the items from the provided itemId up to the root of the\n * tree that can be used for drag and drop behavior or building a breadcrumb\n * list.\n *\n * @param data - The flattened tree data to navigate.\n * @param itemId - The item id to start the search at.\n * @returns an ordered list of the current item followed by all the direct\n * parents of that item.\n * @since 6.0.0 Renamed from `getItemsFrom` to `getTreeItemsFrom`.\n */\nexport function getTreeItemsFrom<T extends TreeItemNode = DefaultTreeItemNode>(\n  data: TreeData<T>,\n  itemId: string | null\n): readonly T[] {\n  const items: T[] = [];\n  let currentId = itemId;\n  while (currentId) {\n    const item = data[currentId];\n    currentId = item?.parentId ?? null;\n    if (item) {\n      items.push(item);\n    }\n  }\n\n  return items;\n}\n\n/**\n * Gets all the child items for a specific parent item id. If the `recursive`\n * argument is enabled, all children of the items will also be returned instead\n * of only the top level items.\n *\n * @param data - Either the flattened tree data or a list of all the tree data\n * to iterate over\n * @param parentId - The parent id to get children of\n * @param recursive - Boolean if the children's children should also be returned\n * @returns a list of all the items for a specific parent item id. Note: if the\n * recursive param is enabled, the list will be ordered so that the children of\n * a item will appear before the next item at the same level. So you either need\n * to sort by `parentId` or something else if you want a specific order.\n * @since 6.0.0 Renamed from `getChildItems` to `getChildTreeItems`.\n */\nexport function getChildTreeItems<T extends TreeItemNode = DefaultTreeItemNode>(\n  data: TreeData<T> | readonly T[],\n  parentId: string | null,\n  recursive = false\n): readonly T[] {\n  const items = Array.isArray(data) ? data : Object.values(data);\n\n  return items.reduce<T[]>((list, item) => {\n    if (parentId !== item.parentId) {\n      return list;\n    }\n\n    return [\n      ...list,\n      item,\n      ...(recursive ? getChildTreeItems(items, item.itemId, recursive) : []),\n    ];\n  }, []);\n}\n"],"names":["getTreeItemsFrom","data","itemId","items","currentId","item","parentId","push","getChildTreeItems","recursive","Array","isArray","Object","values","reduce","list"],"mappings":"AAEA;;;;;;;;;;CAUC,GACD,OAAO,SAASA,iBACdC,IAAiB,EACjBC,MAAqB;IAErB,MAAMC,QAAa,EAAE;IACrB,IAAIC,YAAYF;IAChB,MAAOE,UAAW;QAChB,MAAMC,OAAOJ,IAAI,CAACG,UAAU;QAC5BA,YAAYC,MAAMC,YAAY;QAC9B,IAAID,MAAM;YACRF,MAAMI,IAAI,CAACF;QACb;IACF;IAEA,OAAOF;AACT;AAEA;;;;;;;;;;;;;;CAcC,GACD,OAAO,SAASK,kBACdP,IAAgC,EAChCK,QAAuB,EACvBG,YAAY,KAAK;IAEjB,MAAMN,QAAQO,MAAMC,OAAO,CAACV,QAAQA,OAAOW,OAAOC,MAAM,CAACZ;IAEzD,OAAOE,MAAMW,MAAM,CAAM,CAACC,MAAMV;QAC9B,IAAIC,aAAaD,KAAKC,QAAQ,EAAE;YAC9B,OAAOS;QACT;QAEA,OAAO;eACFA;YACHV;eACII,YAAYD,kBAAkBL,OAAOE,KAAKH,MAAM,EAAEO,aAAa,EAAE;SACtE;IACH,GAAG,EAAE;AACP"}
+{"version":3,"sources":["../../src/tree/utils.ts"],"sourcesContent":["import {\n  type DefaultTreeItemNode,\n  type TreeData,\n  type TreeItemNode,\n} from \"./types.js\";\n\n/**\n * This will get all the items from the provided itemId up to the root of the\n * tree that can be used for drag and drop behavior or building a breadcrumb\n * list.\n *\n * @param data - The flattened tree data to navigate.\n * @param itemId - The item id to start the search at.\n * @returns an ordered list of the current item followed by all the direct\n * parents of that item.\n * @since 6.0.0 Renamed from `getItemsFrom` to `getTreeItemsFrom`.\n */\nexport function getTreeItemsFrom<T extends TreeItemNode = DefaultTreeItemNode>(\n  data: TreeData<T>,\n  itemId: string | null\n): readonly T[] {\n  const items: T[] = [];\n  let currentId = itemId;\n  while (currentId) {\n    const item = data[currentId];\n    currentId = item?.parentId ?? null;\n    if (item) {\n      items.push(item);\n    }\n  }\n\n  return items;\n}\n\n/**\n * Gets all the child items for a specific parent item id. If the `recursive`\n * argument is enabled, all children of the items will also be returned instead\n * of only the top level items.\n *\n * @param data - Either the flattened tree data or a list of all the tree data\n * to iterate over\n * @param parentId - The parent id to get children of\n * @param recursive - Boolean if the children's children should also be returned\n * @returns a list of all the items for a specific parent item id. Note: if the\n * recursive param is enabled, the list will be ordered so that the children of\n * a item will appear before the next item at the same level. So you either need\n * to sort by `parentId` or something else if you want a specific order.\n * @since 6.0.0 Renamed from `getChildItems` to `getChildTreeItems`.\n */\nexport function getChildTreeItems<T extends TreeItemNode = DefaultTreeItemNode>(\n  data: TreeData<T> | readonly T[],\n  parentId: string | null,\n  recursive = false\n): readonly T[] {\n  const items: readonly T[] = Array.isArray(data) ? data : Object.values(data);\n\n  return items.reduce<T[]>((list, item) => {\n    if (parentId !== item.parentId) {\n      return list;\n    }\n\n    return [\n      ...list,\n      item,\n      ...(recursive ? getChildTreeItems(items, item.itemId, recursive) : []),\n    ];\n  }, []);\n}\n"],"names":["getTreeItemsFrom","data","itemId","items","currentId","item","parentId","push","getChildTreeItems","recursive","Array","isArray","Object","values","reduce","list"],"mappings":"AAMA;;;;;;;;;;CAUC,GACD,OAAO,SAASA,iBACdC,IAAiB,EACjBC,MAAqB;IAErB,MAAMC,QAAa,EAAE;IACrB,IAAIC,YAAYF;IAChB,MAAOE,UAAW;QAChB,MAAMC,OAAOJ,IAAI,CAACG,UAAU;QAC5BA,YAAYC,MAAMC,YAAY;QAC9B,IAAID,MAAM;YACRF,MAAMI,IAAI,CAACF;QACb;IACF;IAEA,OAAOF;AACT;AAEA;;;;;;;;;;;;;;CAcC,GACD,OAAO,SAASK,kBACdP,IAAgC,EAChCK,QAAuB,EACvBG,YAAY,KAAK;IAEjB,MAAMN,QAAsBO,MAAMC,OAAO,CAACV,QAAQA,OAAOW,OAAOC,MAAM,CAACZ;IAEvE,OAAOE,MAAMW,MAAM,CAAM,CAACC,MAAMV;QAC9B,IAAIC,aAAaD,KAAKC,QAAQ,EAAE;YAC9B,OAAOS;QACT;QAEA,OAAO;eACFA;YACHV;eACII,YAAYD,kBAAkBL,OAAOE,KAAKH,MAAM,EAAEO,aAAa,EAAE;SACtE;IACH,GAAG,EAAE;AACP"}

package/dist/types.d.ts

@@ -3,7 +3,7 @@ import type { Dispatch, ReactElement, Ref, SetStateAction } from "react";
  * A helper type that allows an optional `ref` to also be applied with a props
  * object even though a `ref` isn't a real prop.
  */
-export type PropsWithRef<Props extends {}, Element extends HTMLElement> = Props & {
+export type PropsWithRef<Props extends object, Element extends HTMLElement> = Props & {
     /**
      * An optional ref that can be applied.
      */
@@ -13,7 +13,7 @@ export type PropsWithRef<Props extends {}, Element extends HTMLElement> = Props
  * A simple type that can be used for different components that clone a
  * `className` into a child component.
  */
-export type ClassNameCloneableChild<T = {}> = ReactElement<T & {
+export type ClassNameCloneableChild<T = object> = ReactElement<T & {
     className?: string;
 }>;
 /**
@@ -145,13 +145,21 @@ export type CssPosition = "fixed" | "sticky" | "static";
 /**
  * @since 6.0.0
  */
-export type AnyFunction = (...args: any[]) => any | void;
+export type AnyFunction = (...args: any[]) => any;
 /**
  * @since 6.0.0
  */
 export type CancelableFunction<F extends AnyFunction> = F & {
-    cancel(): void;
+    cancel: () => void;
 };
+/**
+ * @since 6.0.0
+ */
+export type DebouncedFunction<F extends AnyFunction> = CancelableFunction<(...args: Parameters<F>) => void>;
+/**
+ * @since 6.0.0
+ */
+export type ThrottledFunction<F extends AnyFunction> = CancelableFunction<(...args: Parameters<F>) => ReturnType<F>>;
 /**
  * @since 6.0.0
  */

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { Dispatch, ReactElement, Ref, SetStateAction } from \"react\";\n\n/**\n * A helper type that allows an optional `ref` to also be applied with a props\n * object even though a `ref` isn't a real prop.\n */\nexport type PropsWithRef<\n  Props extends {},\n  Element extends HTMLElement,\n> = Props & {\n  /**\n   * An optional ref that can be applied.\n   */\n  ref?: Ref<Element>;\n};\n\n/**\n * A simple type that can be used for different components that clone a\n * `className` into a child component.\n */\nexport type ClassNameCloneableChild<T = {}> = ReactElement<\n  T & { className?: string }\n>;\n\n/**\n * This type allows you to require at least one of the provided keys. This is\n * super helpful for things like `aria-label` or `aria-labelledby` when it's\n * required for a11y.\n *\n * @see https://stackoverflow.com/questions/40510611/typescript-interface-require-one-of-two-properties-to-exist/49725198#49725198\n */\nexport type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<\n  T,\n  Exclude<keyof T, Keys>\n> &\n  {\n    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;\n  }[Keys];\n\nexport interface LabelA11y {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\n/**\n * A small accessibility helper to ensure that either `aria-label` or\n * `aria-labelledby` have been provided to a component.\n *\n * @example Simple Example\n * ```ts\n * import type { HTMLAttributes, ReactElement } from \"react\";\n * import type { LabelRequiredForA11y } from \"@react-md/core\";\n *\n * type Props = LabelRequiredForA11y<HTMLAttributes<HTMLDivElement>>;\n *\n * function Component(props: Props): ReactElement {\n *   return <div {...props} />;\n * }\n *\n * const test1 = <Component />\n * //            ^ type error\n * const test2 = <Component aria-label=\"Label\" />\n * const test3 = <Component aria-labelledby=\"some-other-id\" />\n * ```\n */\nexport type LabelRequiredForA11y<Props extends LabelA11y> = RequireAtLeastOne<\n  Props,\n  keyof LabelA11y\n>;\n\n/**\n * @since 5.0.0\n * @internal\n */\nexport interface NonNullRef<T> {\n  readonly current: T;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface NonNullMutableRef<T> {\n  current: T;\n}\n\n/** @since 6.0.0 */\nexport type HtmlTagName = keyof JSX.IntrinsicElements;\n\n/**\n * A function to get a string from a generic item.\n *\n * @example Simple Example\n * ```ts\n * interface Item {\n *   name: string;\n * }\n *\n * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n *\n * const extractor: TextExtractor<Item> = (item) => item.name;\n * ```\n * @since 6.0.0\n */\nexport type TextExtractor<T> = (item: T) => string;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type UseStateSetter<T> = Dispatch<SetStateAction<T>>;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type UseStateInitializer<T> = T | (() => T);\n\n/**\n * @example\n * ```ts\n * type Visibility = UseStateObject<\"visible\", boolean>;\n * // type Visibility = {\n * //   visible: boolean;\n * //   setVisible: UseStateSetter<boolean>\n * // }\n *\n * type AnotherOne = UseStateObject<\"renderAsSheet\", RenderMenuAsSheet>;\n * // type AnotherOne = {\n * //   renderAsSheet: RenderMenuAsSheet;\n * //   setRenderAsSheet: UseStateSetter<RenderMenuAsSheet>;\n * // }\n * ```\n * @since 6.0.0\n * @internal\n */\nexport type UseStateObject<Name extends string, Value> = {\n  [key in Name]: Value;\n} & {\n  [key in `set${Capitalize<Name>}`]: UseStateSetter<Value>;\n};\n\n/**\n * @example\n * ```ts\n * interface Example {\n *   value: number;\n *   setValue: UseStateSetter<number>;\n * }\n *\n * type WithPrefix = RenameKeysWithPrefix<Example, \"thumb1\">;\n * // type WithPrefix = {\n * //   thumb1Value: number;\n * //   thumb1SetValue: UseStateSetter<number>;\n * // }\n * ```\n *\n * @since 6.0.0\n * @internal\n */\nexport type RenameKeysWithPrefix<T, Prefix extends string> = {\n  [Key in keyof T & string as `${Prefix}${Capitalize<Key>}`]: T[Key];\n};\n\n/**\n * @since 6.0.0\n */\nexport type CssPosition = \"fixed\" | \"sticky\" | \"static\";\n\n/**\n * @since 6.0.0\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyFunction = (...args: any[]) => any | void;\n\n/**\n * @since 6.0.0\n */\nexport type CancelableFunction<F extends AnyFunction> = F & { cancel(): void };\n\n/**\n * @since 6.0.0\n */\nexport interface ElementSize {\n  height: number;\n  width: number;\n}\n"],"names":[],"mappings":"AAoLA;;CAEC,GACD,WAGC"}
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { Dispatch, ReactElement, Ref, SetStateAction } from \"react\";\n\n/**\n * A helper type that allows an optional `ref` to also be applied with a props\n * object even though a `ref` isn't a real prop.\n */\nexport type PropsWithRef<\n  Props extends object,\n  Element extends HTMLElement,\n> = Props & {\n  /**\n   * An optional ref that can be applied.\n   */\n  ref?: Ref<Element>;\n};\n\n/**\n * A simple type that can be used for different components that clone a\n * `className` into a child component.\n */\nexport type ClassNameCloneableChild<T = object> = ReactElement<\n  T & { className?: string }\n>;\n\n/**\n * This type allows you to require at least one of the provided keys. This is\n * super helpful for things like `aria-label` or `aria-labelledby` when it's\n * required for a11y.\n *\n * @see https://stackoverflow.com/questions/40510611/typescript-interface-require-one-of-two-properties-to-exist/49725198#49725198\n */\nexport type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<\n  T,\n  Exclude<keyof T, Keys>\n> &\n  {\n    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;\n  }[Keys];\n\nexport interface LabelA11y {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\n/**\n * A small accessibility helper to ensure that either `aria-label` or\n * `aria-labelledby` have been provided to a component.\n *\n * @example Simple Example\n * ```ts\n * import type { HTMLAttributes, ReactElement } from \"react\";\n * import type { LabelRequiredForA11y } from \"@react-md/core\";\n *\n * type Props = LabelRequiredForA11y<HTMLAttributes<HTMLDivElement>>;\n *\n * function Component(props: Props): ReactElement {\n *   return <div {...props} />;\n * }\n *\n * const test1 = <Component />\n * //            ^ type error\n * const test2 = <Component aria-label=\"Label\" />\n * const test3 = <Component aria-labelledby=\"some-other-id\" />\n * ```\n */\nexport type LabelRequiredForA11y<Props extends LabelA11y> = RequireAtLeastOne<\n  Props,\n  keyof LabelA11y\n>;\n\n/**\n * @since 5.0.0\n * @internal\n */\nexport interface NonNullRef<T> {\n  readonly current: T;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface NonNullMutableRef<T> {\n  current: T;\n}\n\n/** @since 6.0.0 */\nexport type HtmlTagName = keyof JSX.IntrinsicElements;\n\n/**\n * A function to get a string from a generic item.\n *\n * @example Simple Example\n * ```ts\n * interface Item {\n *   name: string;\n * }\n *\n * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n *\n * const extractor: TextExtractor<Item> = (item) => item.name;\n * ```\n * @since 6.0.0\n */\nexport type TextExtractor<T> = (item: T) => string;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type UseStateSetter<T> = Dispatch<SetStateAction<T>>;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type UseStateInitializer<T> = T | (() => T);\n\n/**\n * @example\n * ```ts\n * type Visibility = UseStateObject<\"visible\", boolean>;\n * // type Visibility = {\n * //   visible: boolean;\n * //   setVisible: UseStateSetter<boolean>\n * // }\n *\n * type AnotherOne = UseStateObject<\"renderAsSheet\", RenderMenuAsSheet>;\n * // type AnotherOne = {\n * //   renderAsSheet: RenderMenuAsSheet;\n * //   setRenderAsSheet: UseStateSetter<RenderMenuAsSheet>;\n * // }\n * ```\n * @since 6.0.0\n * @internal\n */\nexport type UseStateObject<Name extends string, Value> = {\n  [key in Name]: Value;\n} & {\n  [key in `set${Capitalize<Name>}`]: UseStateSetter<Value>;\n};\n\n/**\n * @example\n * ```ts\n * interface Example {\n *   value: number;\n *   setValue: UseStateSetter<number>;\n * }\n *\n * type WithPrefix = RenameKeysWithPrefix<Example, \"thumb1\">;\n * // type WithPrefix = {\n * //   thumb1Value: number;\n * //   thumb1SetValue: UseStateSetter<number>;\n * // }\n * ```\n *\n * @since 6.0.0\n * @internal\n */\nexport type RenameKeysWithPrefix<T, Prefix extends string> = {\n  [Key in keyof T & string as `${Prefix}${Capitalize<Key>}`]: T[Key];\n};\n\n/**\n * @since 6.0.0\n */\nexport type CssPosition = \"fixed\" | \"sticky\" | \"static\";\n\n/**\n * @since 6.0.0\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyFunction = (...args: any[]) => any;\n\n/**\n * @since 6.0.0\n */\nexport type CancelableFunction<F extends AnyFunction> = F & {\n  cancel: () => void;\n};\n\n/**\n * @since 6.0.0\n */\nexport type DebouncedFunction<F extends AnyFunction> = CancelableFunction<\n  (...args: Parameters<F>) => void\n>;\n\n/**\n * @since 6.0.0\n */\nexport type ThrottledFunction<F extends AnyFunction> = CancelableFunction<\n  (...args: Parameters<F>) => ReturnType<F>\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ElementSize {\n  height: number;\n  width: number;\n}\n"],"names":[],"mappings":"AAoMA;;CAEC,GACD,WAGC"}

package/dist/typography/WritingDirectionProvider.d.ts

@@ -17,7 +17,7 @@ export interface WritingDirectionContext {
     /**
      * Toggles the current writing direction for the first parent `Dir` component.
      */
-    toggleDir(): void;
+    toggleDir: () => void;
 }
 /**
  * Gets the writing direction context which provides access to the current `dir`

package/dist/typography/WritingDirectionProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/WritingDirectionProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { type UseStateInitializer } from \"../types.js\";\n\n/**\n * Note: unlike the `dir` DOM attribute, the `\"auto\"` value is not supported.\n *\n * @since 6.0.0\n */\nexport type Dir = \"ltr\" | \"rtl\";\n\n/** @since 6.0.0 */\nexport type DefaultDir = UseStateInitializer<Dir>;\n\n/** @since 2.3.0 */\nexport interface WritingDirectionContext {\n  /**\n   * The current writing direction that is being inherited.\n   */\n  dir: Dir;\n\n  /**\n   * Toggles the current writing direction for the first parent `Dir` component.\n   */\n  toggleDir(): void;\n}\n\n/** @internal */\ninterface InheritableContext extends WritingDirectionContext {\n  root: boolean;\n}\n\nconst context = createContext<InheritableContext>({\n  root: true,\n  dir: \"ltr\",\n  toggleDir: () => {\n    if (process.env.NODE_ENV !== \"production\") {\n      throw new Error(\n        \"Tried to toggle the current writing direction without initializing the `Dir` component.\"\n      );\n    }\n  },\n});\ncontext.displayName = \"WritingDirection\";\nconst { Provider } = context;\n\n/**\n * Gets the writing direction context which provides access to the current `dir`\n * and a `toggleDir` function.\n *\n * @example Manually Changing the Writing Direction\n * ```tsx\n * import { useDir } from \"@react-md/core\";\n *\n * function Example() {\n *   const { dir, toggleDir } = useDir();\n *\n *   return (\n *     <>\n *       <p>{`The current dir is: \"${dir}\"`}</p>\n *       <button type=\"button\" onClick={toggleDir}>Toggle</button>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useDir(): Readonly<WritingDirectionContext> {\n  const { root: _root, ...current } = useContext(context);\n  return current;\n}\n\n/** @since 6.0.0 */\nexport interface WritingDirectionProviderProps {\n  /**\n   * A single ReactElement child. If the `WritingDirection` has a parent\n   * `WritingDirection`, the child will have the `dir` prop cloned into this\n   * element.\n   */\n  children: ReactElement<{ dir?: Dir }> | ReactNode;\n\n  /**\n   * The default writing direction for your app or a subtree. To change the\n   * current writing direction, use the `useDir` hook to get access to the\n   * current `dir` and the `toggleDir` function.\n   *\n   * @defaultValue `\"ltr\"`\n   * @see {@link DEFAULT_WRITING_DIRECTION}\n   */\n  defaultDir?: DefaultDir;\n}\n\n/**\n * In the browser, this will default to the `<html>`'s `dir` value if one\n * exists. If the `dir` attribute does not exist, it will default to `\"ltr\"`.\n *\n * In node environments, this will default to `\"ltr\"`.\n *\n * @since 6.0.0 Renamed from `DEFAULT_DIR`\n */\nexport const DEFAULT_WRITING_DIRECTION = (): Dir => {\n  let dir: Dir = \"ltr\";\n  if (typeof document !== \"undefined\") {\n    const rootDir = document.documentElement.getAttribute(\"dir\");\n    dir = rootDir === \"rtl\" ? \"rtl\" : \"ltr\";\n  }\n\n  return dir;\n};\n\n/**\n * **Client Component**\n *\n * The `WritingDirection` component is used to handle the current writing\n * direction within your app as well as conditionally updating the writing\n * direction for small sections in your app. When this component is used for the\n * first time near the root of your React component tree, the current direction\n * will be applied to the root `<html>` element. Otherwise the current dir will\n * be cloned into the child element so it can be passed as a prop.\n *\n * Note: Since the `dir` is cloned into the child element, you need to make sure\n * that the child is either a DOM element or the `dir` prop is passed from your\n * custom component.\n *\n * @example Root Setup\n * ```tsx\n * import { createRoot } from \"react-dom/client\";\n * import { WritingDirection } from \"@react-md/core\";\n * import App from \"./App.js\":\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * root.render(\n *   <WritingDirection>\n *     <App />\n *   </WritingDirection>\n * );\n * ```\n *\n * @example Supporting RTL Languages\n * ```tsx\n * import { createRoot } from \"react-dom/client\";\n * import { WritingDirection } from \"@react-md/core\";\n * import type { Dir } from \"@react-md/core\";\n * import App from \"./App.js\":\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * // see https://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code\n * const SUPPORTED_RTL_LANGUAGES = [\n *   \"ar\",\n *   \"arc\",\n *   \"ckb\",\n *   \"dv\",\n *   \"fa\",\n *   \"ha\",\n *   \"he\",\n *   \"khw\",\n *   \"ks\",\n *   \"ps\",\n *   \"sd\",\n *   \"ur\",\n *   \"uz_AF\",\n *   \"ti\",\n * ];\n *\n * const defaultDir = (): Dir => {\n *   if (SUPPORTED_RTL_LANGUAGES.includes(navigator.language)) {\n *     return \"rtl\"\n *   }\n *\n *   return \"ltr\";\n * }\n *\n * root.render(\n *   <WritingDirection defaultDir={defaultDir}>\n *     <App />\n *   </WritingDirection>\n * );\n * ```\n *\n * @since 6.0.0 Renamed from `Dir`\n */\nexport function WritingDirectionProvider(\n  props: WritingDirectionProviderProps\n): ReactElement {\n  const { children, defaultDir = DEFAULT_WRITING_DIRECTION } = props;\n  const { root } = useContext(context);\n  const [dir, setDir] = useState(defaultDir);\n  useEffect(() => {\n    if (!root || typeof document === \"undefined\") {\n      return;\n    }\n\n    document.documentElement.setAttribute(\"dir\", dir);\n\n    return () => {\n      document.documentElement.removeAttribute(\"dir\");\n    };\n  }, [dir, root]);\n\n  const toggleDir = useCallback(() => {\n    setDir((prevDir) => (prevDir === \"ltr\" ? \"rtl\" : \"ltr\"));\n  }, []);\n\n  const value = useMemo<InheritableContext>(\n    () => ({ root: false, dir, toggleDir }),\n    [dir, toggleDir]\n  );\n  let child = Children.only(children);\n  if (!root && isValidElement<{ dir: Dir }>(child)) {\n    child = cloneElement(child, { dir });\n  }\n\n  return <Provider value={value}>{child}</Provider>;\n}\n"],"names":["Children","cloneElement","createContext","isValidElement","useCallback","useContext","useEffect","useMemo","useState","context","root","dir","toggleDir","process","env","NODE_ENV","Error","displayName","Provider","useDir","_root","current","DEFAULT_WRITING_DIRECTION","document","rootDir","documentElement","getAttribute","WritingDirectionProvider","props","children","defaultDir","setDir","setAttribute","removeAttribute","prevDir","value","child","only"],"mappings":"AAAA;;AACA,SACEA,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,QAGH,QAAQ;AA+Bf,MAAMC,wBAAUP,cAAkC;IAChDQ,MAAM;IACNC,KAAK;IACLC,WAAW;QACT,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,MAAM,IAAIC,MACR;QAEJ;IACF;AACF;AACAP,QAAQQ,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGT;AAErB;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,SAASU;IACd,MAAM,EAAET,MAAMU,KAAK,EAAE,GAAGC,SAAS,GAAGhB,WAAWI;IAC/C,OAAOY;AACT;AAsBA;;;;;;;CAOC,GACD,OAAO,MAAMC,4BAA4B;IACvC,IAAIX,MAAW;IACf,IAAI,OAAOY,aAAa,aAAa;QACnC,MAAMC,UAAUD,SAASE,eAAe,CAACC,YAAY,CAAC;QACtDf,MAAMa,YAAY,QAAQ,QAAQ;IACpC;IAEA,OAAOb;AACT,EAAE;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EC,GACD,OAAO,SAASgB,yBACdC,KAAoC;IAEpC,MAAM,EAAEC,QAAQ,EAAEC,aAAaR,yBAAyB,EAAE,GAAGM;IAC7D,MAAM,EAAElB,IAAI,EAAE,GAAGL,WAAWI;IAC5B,MAAM,CAACE,KAAKoB,OAAO,GAAGvB,SAASsB;IAC/BxB,UAAU;QACR,IAAI,CAACI,QAAQ,OAAOa,aAAa,aAAa;YAC5C;QACF;QAEAA,SAASE,eAAe,CAACO,YAAY,CAAC,OAAOrB;QAE7C,OAAO;YACLY,SAASE,eAAe,CAACQ,eAAe,CAAC;QAC3C;IACF,GAAG;QAACtB;QAAKD;KAAK;IAEd,MAAME,YAAYR,YAAY;QAC5B2B,OAAO,CAACG,UAAaA,YAAY,QAAQ,QAAQ;IACnD,GAAG,EAAE;IAEL,MAAMC,QAAQ5B,QACZ,IAAO,CAAA;YAAEG,MAAM;YAAOC;YAAKC;QAAU,CAAA,GACrC;QAACD;QAAKC;KAAU;IAElB,IAAIwB,QAAQpC,SAASqC,IAAI,CAACR;IAC1B,IAAI,CAACnB,sBAAQP,eAA6BiC,QAAQ;QAChDA,sBAAQnC,aAAamC,OAAO;YAAEzB;QAAI;IACpC;IAEA,qBAAO,KAACO;QAASiB,OAAOA;kBAAQC;;AAClC"}
+{"version":3,"sources":["../../src/typography/WritingDirectionProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { type UseStateInitializer } from \"../types.js\";\n\n/**\n * Note: unlike the `dir` DOM attribute, the `\"auto\"` value is not supported.\n *\n * @since 6.0.0\n */\nexport type Dir = \"ltr\" | \"rtl\";\n\n/** @since 6.0.0 */\nexport type DefaultDir = UseStateInitializer<Dir>;\n\n/** @since 2.3.0 */\nexport interface WritingDirectionContext {\n  /**\n   * The current writing direction that is being inherited.\n   */\n  dir: Dir;\n\n  /**\n   * Toggles the current writing direction for the first parent `Dir` component.\n   */\n  toggleDir: () => void;\n}\n\n/** @internal */\ninterface InheritableContext extends WritingDirectionContext {\n  root: boolean;\n}\n\nconst context = createContext<InheritableContext>({\n  root: true,\n  dir: \"ltr\",\n  toggleDir: () => {\n    if (process.env.NODE_ENV !== \"production\") {\n      throw new Error(\n        \"Tried to toggle the current writing direction without initializing the `Dir` component.\"\n      );\n    }\n  },\n});\ncontext.displayName = \"WritingDirection\";\nconst { Provider } = context;\n\n/**\n * Gets the writing direction context which provides access to the current `dir`\n * and a `toggleDir` function.\n *\n * @example Manually Changing the Writing Direction\n * ```tsx\n * import { useDir } from \"@react-md/core\";\n *\n * function Example() {\n *   const { dir, toggleDir } = useDir();\n *\n *   return (\n *     <>\n *       <p>{`The current dir is: \"${dir}\"`}</p>\n *       <button type=\"button\" onClick={toggleDir}>Toggle</button>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useDir(): Readonly<WritingDirectionContext> {\n  const { root: _root, ...current } = useContext(context);\n  return current;\n}\n\n/** @since 6.0.0 */\nexport interface WritingDirectionProviderProps {\n  /**\n   * A single ReactElement child. If the `WritingDirection` has a parent\n   * `WritingDirection`, the child will have the `dir` prop cloned into this\n   * element.\n   */\n  children: ReactElement<{ dir?: Dir }> | ReactNode;\n\n  /**\n   * The default writing direction for your app or a subtree. To change the\n   * current writing direction, use the `useDir` hook to get access to the\n   * current `dir` and the `toggleDir` function.\n   *\n   * @defaultValue `\"ltr\"`\n   * @see {@link DEFAULT_WRITING_DIRECTION}\n   */\n  defaultDir?: DefaultDir;\n}\n\n/**\n * In the browser, this will default to the `<html>`'s `dir` value if one\n * exists. If the `dir` attribute does not exist, it will default to `\"ltr\"`.\n *\n * In node environments, this will default to `\"ltr\"`.\n *\n * @since 6.0.0 Renamed from `DEFAULT_DIR`\n */\nexport const DEFAULT_WRITING_DIRECTION = (): Dir => {\n  let dir: Dir = \"ltr\";\n  if (typeof document !== \"undefined\") {\n    const rootDir = document.documentElement.getAttribute(\"dir\");\n    dir = rootDir === \"rtl\" ? \"rtl\" : \"ltr\";\n  }\n\n  return dir;\n};\n\n/**\n * **Client Component**\n *\n * The `WritingDirection` component is used to handle the current writing\n * direction within your app as well as conditionally updating the writing\n * direction for small sections in your app. When this component is used for the\n * first time near the root of your React component tree, the current direction\n * will be applied to the root `<html>` element. Otherwise the current dir will\n * be cloned into the child element so it can be passed as a prop.\n *\n * Note: Since the `dir` is cloned into the child element, you need to make sure\n * that the child is either a DOM element or the `dir` prop is passed from your\n * custom component.\n *\n * @example Root Setup\n * ```tsx\n * import { createRoot } from \"react-dom/client\";\n * import { WritingDirection } from \"@react-md/core\";\n * import App from \"./App.js\":\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * root.render(\n *   <WritingDirection>\n *     <App />\n *   </WritingDirection>\n * );\n * ```\n *\n * @example Supporting RTL Languages\n * ```tsx\n * import { createRoot } from \"react-dom/client\";\n * import { WritingDirection } from \"@react-md/core\";\n * import type { Dir } from \"@react-md/core\";\n * import App from \"./App.js\":\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * // see https://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code\n * const SUPPORTED_RTL_LANGUAGES = [\n *   \"ar\",\n *   \"arc\",\n *   \"ckb\",\n *   \"dv\",\n *   \"fa\",\n *   \"ha\",\n *   \"he\",\n *   \"khw\",\n *   \"ks\",\n *   \"ps\",\n *   \"sd\",\n *   \"ur\",\n *   \"uz_AF\",\n *   \"ti\",\n * ];\n *\n * const defaultDir = (): Dir => {\n *   if (SUPPORTED_RTL_LANGUAGES.includes(navigator.language)) {\n *     return \"rtl\"\n *   }\n *\n *   return \"ltr\";\n * }\n *\n * root.render(\n *   <WritingDirection defaultDir={defaultDir}>\n *     <App />\n *   </WritingDirection>\n * );\n * ```\n *\n * @since 6.0.0 Renamed from `Dir`\n */\nexport function WritingDirectionProvider(\n  props: WritingDirectionProviderProps\n): ReactElement {\n  const { children, defaultDir = DEFAULT_WRITING_DIRECTION } = props;\n  const { root } = useContext(context);\n  const [dir, setDir] = useState(defaultDir);\n  useEffect(() => {\n    if (!root || typeof document === \"undefined\") {\n      return;\n    }\n\n    document.documentElement.setAttribute(\"dir\", dir);\n\n    return () => {\n      document.documentElement.removeAttribute(\"dir\");\n    };\n  }, [dir, root]);\n\n  const toggleDir = useCallback(() => {\n    setDir((prevDir) => (prevDir === \"ltr\" ? \"rtl\" : \"ltr\"));\n  }, []);\n\n  const value = useMemo<InheritableContext>(\n    () => ({ root: false, dir, toggleDir }),\n    [dir, toggleDir]\n  );\n  let child = Children.only(children);\n  if (!root && isValidElement<{ dir: Dir }>(child)) {\n    child = cloneElement(child, { dir });\n  }\n\n  return <Provider value={value}>{child}</Provider>;\n}\n"],"names":["Children","cloneElement","createContext","isValidElement","useCallback","useContext","useEffect","useMemo","useState","context","root","dir","toggleDir","process","env","NODE_ENV","Error","displayName","Provider","useDir","_root","current","DEFAULT_WRITING_DIRECTION","document","rootDir","documentElement","getAttribute","WritingDirectionProvider","props","children","defaultDir","setDir","setAttribute","removeAttribute","prevDir","value","child","only"],"mappings":"AAAA;;AACA,SACEA,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,QAGH,QAAQ;AA+Bf,MAAMC,wBAAUP,cAAkC;IAChDQ,MAAM;IACNC,KAAK;IACLC,WAAW;QACT,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,MAAM,IAAIC,MACR;QAEJ;IACF;AACF;AACAP,QAAQQ,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGT;AAErB;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,SAASU;IACd,MAAM,EAAET,MAAMU,KAAK,EAAE,GAAGC,SAAS,GAAGhB,WAAWI;IAC/C,OAAOY;AACT;AAsBA;;;;;;;CAOC,GACD,OAAO,MAAMC,4BAA4B;IACvC,IAAIX,MAAW;IACf,IAAI,OAAOY,aAAa,aAAa;QACnC,MAAMC,UAAUD,SAASE,eAAe,CAACC,YAAY,CAAC;QACtDf,MAAMa,YAAY,QAAQ,QAAQ;IACpC;IAEA,OAAOb;AACT,EAAE;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EC,GACD,OAAO,SAASgB,yBACdC,KAAoC;IAEpC,MAAM,EAAEC,QAAQ,EAAEC,aAAaR,yBAAyB,EAAE,GAAGM;IAC7D,MAAM,EAAElB,IAAI,EAAE,GAAGL,WAAWI;IAC5B,MAAM,CAACE,KAAKoB,OAAO,GAAGvB,SAASsB;IAC/BxB,UAAU;QACR,IAAI,CAACI,QAAQ,OAAOa,aAAa,aAAa;YAC5C;QACF;QAEAA,SAASE,eAAe,CAACO,YAAY,CAAC,OAAOrB;QAE7C,OAAO;YACLY,SAASE,eAAe,CAACQ,eAAe,CAAC;QAC3C;IACF,GAAG;QAACtB;QAAKD;KAAK;IAEd,MAAME,YAAYR,YAAY;QAC5B2B,OAAO,CAACG,UAAaA,YAAY,QAAQ,QAAQ;IACnD,GAAG,EAAE;IAEL,MAAMC,QAAQ5B,QACZ,IAAO,CAAA;YAAEG,MAAM;YAAOC;YAAKC;QAAU,CAAA,GACrC;QAACD;QAAKC;KAAU;IAElB,IAAIwB,QAAQpC,SAASqC,IAAI,CAACR;IAC1B,IAAI,CAACnB,sBAAQP,eAA6BiC,QAAQ;QAChDA,sBAAQnC,aAAamC,OAAO;YAAEzB;QAAI;IACpC;IAEA,qBAAO,KAACO;QAASiB,OAAOA;kBAAQC;;AAClC"}

package/dist/typography/_typography.scss

@@ -3,43 +3,56 @@
 @use "../media-queries/media-queries";
 @use "../utils";
 
+// Set this to `true` to disable the styles for the `TextContainer` component
 $disable-text-container: false !default;
+
+// Set this to `true` to disable the `headline-1` typography styles
 $disable-headline-1: false !default;
+
+// Set this to `true` to disable the `headline-2` typography styles
 $disable-headline-2: false !default;
+
+// Set this to `true` to disable the `headline-3` typography styles
 $disable-headline-3: false !default;
+
+// Set this to `true` to disable the `headline-4` typography styles
 $disable-headline-4: false !default;
+
+// Set this to `true` to disable the `headline-5` typography styles
 $disable-headline-5: false !default;
+
+// Set this to `true` to disable the `headline-6` typography styles
 $disable-headline-6: false !default;
+
+// Set this to `true` to disable the `subtitle-1` typography styles
 $disable-subtitle-1: false !default;
+
+// Set this to `true` to disable the `subtitle-2` typography styles
 $disable-subtitle-2: false !default;
+
+// Set this to `true` to disable the `body-1` typography styles
 $disable-body-1: false !default;
+
+// Set this to `true` to disable the `body-2` typography styles
 $disable-body-2: false !default;
+
+// Set this to `true` to disable the `caption` typography styles
 $disable-caption: false !default;
+
+// Set this to `true` to disable the `overline` typography styles
 $disable-overline: false !default;
 
-/// A small utility function to get the letter spacing based on tracking and
-/// font-size
-///
-/// @access private
-/// @param {Number} tracking - The tracking to use
-/// @param {Number} font-size - The font size to use
-/// @return {Number} the letter spacing value in em
+// A small utility function to get the letter spacing based on tracking and
+// font-size
+//
+// @internal
+// @param {number} tracking - The tracking to use
+// @param {number} font-size - The font size to use
+// @returns {number} the letter spacing value in em
 @function get-letter-spacing($tracking, $font-size) {
   @return math.div($tracking, $font-size * 16) * 1em;
 }
 
-/// The font family to use throughout the entire application.
-///
-/// @example scss - Changing the Font
-///   @use "react-md" with (
-///     $font-family: string.unquote("'Open Sans', Koulen, 'Roboto Flex', sans-serif")
-///   ):
-///
-///   @include react-md.typography;
-///
-/// @type String
-$font-family: Roboto, sans-serif !default;
-
 $font-weight-thin: 100 !default;
 $font-weight-light: 300 !default;
 $font-weight-regular: 400 !default;
@@ -48,19 +61,19 @@ $font-weight-bold: 700 !default;
 $font-weight-semi-bold: 800 !default;
 $font-weight-black: 900 !default;
 
-/// A Map of all the font weights.
-///
-/// @type Map
-/// @prop {Number} thin [$font-weight-thin] - The thin font weight value.
-/// @prop {Number} light [$font-weight-light] - The light font weight value.
-/// @prop {Number} regular [$font-weight-regular] - The regular font weight
-/// value.
-/// @prop {Number} medium [$font-weight-medium] - The medium font weight
-/// value.
-/// @prop {Number} bold [$font-weight-bold] - The bold font weight value.
-/// @prop {Number} semi-bold [$font-weight-semi-bold] - The semi-bold font
-/// weight value.
-/// @prop {Number} black [$font-weight-black] - The black font weight value.
+// A Map of all the font weights.
+//
+// @type Map
+// @prop {number} thin [$font-weight-thin] - The thin font weight value.
+// @prop {number} light [$font-weight-light] - The light font weight value.
+// @prop {number} regular [$font-weight-regular] - The regular font weight
+// value.
+// @prop {number} medium [$font-weight-medium] - The medium font weight
+// value.
+// @prop {number} bold [$font-weight-bold] - The bold font weight value.
+// @prop {number} semi-bold [$font-weight-semi-bold] - The semi-bold font
+// weight value.
+// @prop {number} black [$font-weight-black] - The black font weight value.
 $font-weights: (
   thin: $font-weight-thin,
   light: $font-weight-light,
@@ -68,7 +81,7 @@ $font-weights: (
   medium: $font-weight-medium,
   bold: $font-weight-bold,
   semi-bold: $font-weight-semi-bold,
-  black: $font-weight-black,
+  "black": $font-weight-black,
 ) !default;
 
 $text-alignments: left center right !default;
@@ -76,10 +89,27 @@ $text-decorations: underline overline line-through none !default;
 $text-transforms: capitalize uppercase lowercase !default;
 $font-styles: normal italic oblique !default;
 
-/// The base styles for typography.
-/// @type Map
+// The font family to use throughout the entire application.
+//
+// @example Changing the Font
+// ```scss
+// @use "react-md" with (
+//   $font-family: string.unquote("'Open Sans', Koulen, 'Roboto Flex', sans-serif")
+// ):
+//
+// @include react-md.typography;
+// ```
+//
+// @type string
+$font-family: Roboto, sans-serif !default;
+$font-size: 1rem !default;
+$font-weight: $font-weight-regular !default;
+$line-height: 1.5rem !default;
+
+// The base styles for typography.
+// @type Map
 $base-recommended-font-styles: (
-  font-family: $font-family,
+  font-family: var(--rmd-font-family),
   overflow: inherit,
   overflow-wrap: break-word,
   text-overflow: inherit,
@@ -248,7 +278,14 @@ $text-container-padding: 1rem !default;
 // characters + left and right padding so the text is _really_ 65ch
 $text-line-length: calc(65ch + $text-container-padding * 2) !default;
 
-$typography-variables: (line-length, text-container-padding);
+$typography-variables: (
+  line-length,
+  text-container-padding,
+  font-size,
+  font-family,
+  font-weight,
+  line-height
+);
 
 @function typography-get-var($name, $fallback: null) {
   $var: utils.get-var-name($typography-variables, $name, "typography");
@@ -382,6 +419,19 @@ $typography-variables: (line-length, text-container-padding);
 }
 
 @mixin typography-variables {
+  @include typography-set-var(font-family, $font-family);
+  @if $font-size {
+    @include typography-set-var(font-size, $font-size);
+  }
+
+  @if $font-weight {
+    @include typography-set-var(font-weight, $font-weight);
+  }
+
+  @if $line-height {
+    @include typography-set-var(line-height, $line-height);
+  }
+
   @if not $disable-text-container {
     @include typography-set-var(line-length, $text-line-length);
     @include typography-set-var(
@@ -391,6 +441,13 @@ $typography-variables: (line-length, text-container-padding);
   }
 }
 
+@mixin typography-html-body-styles {
+  @include typography-use-var(font-family);
+  @include typography-use-var(font-size);
+  @include typography-use-var(font-weight);
+  @include typography-use-var(line-height);
+}
+
 @mixin typography-styles($disable-layer: false) {
   @include utils.optional-layer(typography, $disable-layer) {
     @include typography-text-container-styles($disable-layer: true);

package/dist/typography/typographyStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/typographyStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils, type TextCssUtilsOptions } from \"../cssUtils.js\";\n\n/**\n * A union of all the material design provided typography styles. When used with\n * the Typography component, this will generate the correct typography className\n * to apply and determine what component to be rendered as if none was provided.\n *\n * @since 4.0.0\n */\nexport type TypographyType =\n  | \"headline-1\"\n  | \"headline-2\"\n  | \"headline-3\"\n  | \"headline-4\"\n  | \"headline-5\"\n  | \"headline-6\"\n  | \"subtitle-1\"\n  | \"subtitle-2\"\n  | \"body-1\"\n  | \"body-2\"\n  | \"caption\"\n  | \"overline\";\n\n/** @since 6.0.0 */\nexport interface TypographyClassNameOptions extends TextCssUtilsOptions {\n  className?: string;\n\n  /**\n   * @see {@link TypographyType}\n   * @defaultValue `\"body-1\"`\n   */\n  type?: TypographyType;\n}\n\n/** @since 6.0.0 */\nexport type NullableTypographyClassNameOptions = Omit<\n  TypographyClassNameOptions,\n  \"type\"\n> & {\n  /**\n   * When using the {@link typography} class name utility, the `type` can be set\n   * to `null` to inherit font.\n   *\n   * @see {@link TypographyType}\n   * @defaultValue `\"body-1\"`\n   */\n  type?: TypographyType | null;\n};\n\n/**\n * Get a typography class name based on different typography options. This is\n * only useful if you are unable to use the {@link Typography} component for\n * some reason.\n *\n * @example Simple Example\n * ```ts\n * import { typography } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <>\n *       <h1 className={typography({ type: \"headline-1\" })} />\n *       <h2 className={typography({ type: \"headline-2\" })} />\n *       <h3 className={typography({ type: \"headline-3\" })} />\n *       <h4 className={typography({ type: \"headline-4\" })} />\n *       <h5 className={typography({ type: \"headline-5\" })} />\n *       <h6 className={typography({ type: \"headline-6\" })} />\n *       <h5 className={typography({ type: \"subtitle-1\" })} />\n *       <h6 className={typography({ type: \"subtitle-2\" })} />\n *       <p className={typography()} />\n *       <p className={typography({ type \"body-1\" })} />\n *       <p className={typography({ type \"body-1\" })} />\n *       <caption className={typography({ type: \"caption\" })} />\n *       <span className={typography({ type: \"overline\" })} />\n *     </>\n *   );\n * }\n * ```\n *\n * @example Applying Additional Styles\n * ```ts\n * import { typography } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <>\n *       <h1\n *         // only maintain the default margin-bottom\n *         className={typography({\n *           type: \"headline-1\",\n *           margin: \"bottom\",\n *         })}\n *        />\n *\n *       <h2\n *         // remove all default margin\n *         className={typography({\n *           type: \"headline-2\",\n *           margin: \"none\",\n *         })}\n *       />\n *\n *       <h3\n *         // only maintain the default margin-top\n *         className={typography({\n *           type: \"headline-3\",\n *           margin: \"top\",\n *         })}\n *       />\n *\n *       <p\n *         // center the text, set to bold, and only maintain default margin-bottom\n *         className={typography({\n *           type \"subtitle-1\",\n *           align: \"center\",\n *           margin: \"bottom\",\n *         })}\n *       />\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link Typography}\n * @param options - An optional object of options used to create the typography\n * class name.\n * @returns a typography class name string\n * @since 6.0.0\n */\nexport function typography(\n  options: NullableTypographyClassNameOptions = {}\n): string {\n  const { type = \"body-1\" } = options;\n\n  // using `&&` instead of `bem` since the latest version of typescript does not\n  // support setting the same object key (empty string)\n  return cnb(\n    \"rmd-typography\",\n    type && `rmd-typography--${type}`,\n    cssUtils(options)\n  );\n}\n"],"names":["cnb","cssUtils","typography","options","type"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAkC,iBAAiB;AAiDpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+EC,GACD,OAAO,SAASC,WACdC,UAA8C,CAAC,CAAC;IAEhD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGD;IAE5B,8EAA8E;IAC9E,qDAAqD;IACrD,OAAOH,IACL,kBACAI,QAAQ,CAAC,gBAAgB,EAAEA,KAAK,CAAC,EACjCH,SAASE;AAEb"}
+{"version":3,"sources":["../../src/typography/typographyStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils, type TextCssUtilsOptions } from \"../cssUtils.js\";\n\n/**\n * A union of all the material design provided typography styles. When used with\n * the Typography component, this will generate the correct typography className\n * to apply and determine what component to be rendered as if none was provided.\n *\n * @since 4.0.0\n */\nexport type TypographyType =\n  | \"headline-1\"\n  | \"headline-2\"\n  | \"headline-3\"\n  | \"headline-4\"\n  | \"headline-5\"\n  | \"headline-6\"\n  | \"subtitle-1\"\n  | \"subtitle-2\"\n  | \"body-1\"\n  | \"body-2\"\n  | \"caption\"\n  | \"overline\";\n\n/** @since 6.0.0 */\nexport interface TypographyClassNameOptions extends TextCssUtilsOptions {\n  className?: string;\n\n  /**\n   * @see {@link TypographyType}\n   * @defaultValue `\"body-1\"`\n   */\n  type?: TypographyType;\n}\n\n/** @since 6.0.0 */\nexport type NullableTypographyClassNameOptions = Omit<\n  TypographyClassNameOptions,\n  \"type\"\n> & {\n  /**\n   * When using the {@link typography} class name utility, the `type` can be set\n   * to `null` to inherit font.\n   *\n   * @see {@link TypographyType}\n   * @defaultValue `\"body-1\"`\n   */\n  type?: TypographyType | null;\n};\n\n/**\n * Get a typography class name based on different typography options. This is\n * only useful if you are unable to use the {@link Typography} component for\n * some reason.\n *\n * @example Simple Example\n * ```ts\n * import { typography } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <>\n *       <h1 className={typography({ type: \"headline-1\" })} />\n *       <h2 className={typography({ type: \"headline-2\" })} />\n *       <h3 className={typography({ type: \"headline-3\" })} />\n *       <h4 className={typography({ type: \"headline-4\" })} />\n *       <h5 className={typography({ type: \"headline-5\" })} />\n *       <h6 className={typography({ type: \"headline-6\" })} />\n *       <h5 className={typography({ type: \"subtitle-1\" })} />\n *       <h6 className={typography({ type: \"subtitle-2\" })} />\n *       <p className={typography()} />\n *       <p className={typography({ type \"body-1\" })} />\n *       <p className={typography({ type \"body-1\" })} />\n *       <caption className={typography({ type: \"caption\" })} />\n *       <span className={typography({ type: \"overline\" })} />\n *     </>\n *   );\n * }\n * ```\n *\n * @example Applying Additional Styles\n * ```ts\n * import { typography } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <>\n *       <h1\n *         // only maintain the default margin-bottom\n *         className={typography({\n *           type: \"headline-1\",\n *           margin: \"bottom\",\n *         })}\n *        />\n *\n *       <h2\n *         // remove all default margin\n *         className={typography({\n *           type: \"headline-2\",\n *           margin: \"none\",\n *         })}\n *       />\n *\n *       <h3\n *         // only maintain the default margin-top\n *         className={typography({\n *           type: \"headline-3\",\n *           margin: \"top\",\n *         })}\n *       />\n *\n *       <p\n *         // center the text, set to bold, and only maintain default margin-bottom\n *         className={typography({\n *           type \"subtitle-1\",\n *           align: \"center\",\n *           margin: \"bottom\",\n *         })}\n *       />\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link Typography}\n * @param options - An optional object of options used to create the typography\n * class name.\n * @returns a typography class name string\n * @since 6.0.0\n */\nexport function typography(\n  options: NullableTypographyClassNameOptions = {}\n): string {\n  const { type = \"body-1\" } = options;\n\n  // using `&&` instead of `bem` since the latest version of typescript does not\n  // support setting the same object key (empty string)\n  return cnb(\n    \"rmd-typography\",\n    type && `rmd-typography--${type}`,\n    cssUtils(options)\n  );\n}\n"],"names":["cnb","cssUtils","typography","options","type"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAkC,iBAAiB;AAiDpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+EC,GACD,OAAO,SAASC,WACdC,UAA8C,CAAC,CAAC;IAEhD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGD;IAE5B,8EAA8E;IAC9E,qDAAqD;IACrD,OAAOH,IACL,kBACAI,QAAQ,CAAC,gBAAgB,EAAEA,MAAM,EACjCH,SAASE;AAEb"}

package/dist/useDebouncedFunction.d.ts

@@ -1,8 +1,4 @@
-import { type CancelableFunction, type AnyFunction } from "./types.js";
-/**
- * @since 6.0.0
- */
-export type DebouncedFunction<F extends AnyFunction> = CancelableFunction<(...args: Parameters<F>) => void>;
+import { type AnyFunction, type DebouncedFunction } from "./types.js";
 /**
  * Creates a function that will only be called if it has not been called again
  * for X milliseconds.

package/dist/useDebouncedFunction.js

@@ -94,7 +94,9 @@ import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
                 funcRef.current(...args);
             }, wait);
         };
-        debounced.cancel = ()=>window.clearTimeout(timeout.current);
+        debounced.cancel = ()=>{
+            window.clearTimeout(timeout.current);
+        };
         return debounced;
     }, [
         wait

package/dist/useDebouncedFunction.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useDebouncedFunction.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { type CancelableFunction, type AnyFunction } from \"./types.js\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect.js\";\n\n/**\n * @since 6.0.0\n */\nexport type DebouncedFunction<F extends AnyFunction> = CancelableFunction<\n  (...args: Parameters<F>) => void\n>;\n\n/**\n * Creates a function that will only be called if it has not been called again\n * for X milliseconds.\n *\n * @example Debounced Search API Requests\n * ```tsx\n * import { TextField, useDebouncedFunction, useUnmounted } from \"@react-md/core\";\n * import { useState } from \"react\";\n * import type { ReactElement } from \"react\";\n *\n * interface State {\n *   error?: unknown\n *   loading: boolean;\n *   results?: {\n *     // pretend some search results\n *     id: string;\n *     name: string;\n *   }[];\n * }\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState<State>({\n *     loading: false,\n *   });\n *   // this is only required for async actions\n *   const unmounted = useUnmounted();\n *\n *   // A new search request will be fired once every 500ms as the user types.\n *   // can't use the event here since React uses synthetic events\n *   const search = useDebouncedFunction(async (q: string) => {\n *     setState({\n *       loading: true,\n *       error: undefined,\n *       results: undefined,\n *     });\n *\n *     try {\n *       const response = await fetch('/search', {\n *         method: 'POST',\n *         headers: {\n *           'Content-Type': 'application/json',\n *         },\n *         body: JSON.stringify({ q }),\n *       });\n *       const json = await response.json();\n *\n *       if (!unmounted.current) {\n *         setState({\n *           loading: false,\n *           results: json,\n *         });\n *       }\n *     } catch (error) {\n *       if (!unmounted.current) {\n *         setState({\n *           error,\n *           loading: false,\n *         });\n *       }\n *     }\n *   }, 500);\n *\n *   return (\n *     <TextField\n *       type=\"search\"\n *       label=\"Search\"\n *       onChange={(event) => search(event.currentTarget.value)}\n *     />\n *   );\n * }\n * ```\n *\n * @see `useThrottledFunction` for throttle behavior instead. (Call a\n * function at most once every X milliseconds).\n * @since 6.0.0\n */\nexport function useDebouncedFunction<F extends AnyFunction>(\n  func: F,\n  wait: number\n): DebouncedFunction<F> {\n  const timeout = useRef<number | undefined>();\n  const funcRef = useRef(func);\n  useIsomorphicLayoutEffect(() => {\n    funcRef.current = func;\n  });\n\n  useEffect(() => {\n    return () => {\n      window.clearTimeout(timeout.current);\n    };\n  }, []);\n\n  return useMemo(() => {\n    const debounced: DebouncedFunction<F> = (...args) => {\n      window.clearTimeout(timeout.current);\n      timeout.current = window.setTimeout(() => {\n        funcRef.current(...args);\n      }, wait);\n    };\n    debounced.cancel = () => window.clearTimeout(timeout.current);\n\n    return debounced;\n  }, [wait]);\n}\n"],"names":["useEffect","useMemo","useRef","useIsomorphicLayoutEffect","useDebouncedFunction","func","wait","timeout","funcRef","current","window","clearTimeout","debounced","args","setTimeout","cancel"],"mappings":"AAAA;AACA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAEnD,SAASC,yBAAyB,QAAQ,iCAAiC;AAS3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EC,GACD,OAAO,SAASC,qBACdC,IAAO,EACPC,IAAY;IAEZ,MAAMC,UAAUL;IAChB,MAAMM,UAAUN,OAAOG;IACvBF,0BAA0B;QACxBK,QAAQC,OAAO,GAAGJ;IACpB;IAEAL,UAAU;QACR,OAAO;YACLU,OAAOC,YAAY,CAACJ,QAAQE,OAAO;QACrC;IACF,GAAG,EAAE;IAEL,OAAOR,QAAQ;QACb,MAAMW,YAAkC,CAAC,GAAGC;YAC1CH,OAAOC,YAAY,CAACJ,QAAQE,OAAO;YACnCF,QAAQE,OAAO,GAAGC,OAAOI,UAAU,CAAC;gBAClCN,QAAQC,OAAO,IAAII;YACrB,GAAGP;QACL;QACAM,UAAUG,MAAM,GAAG,IAAML,OAAOC,YAAY,CAACJ,QAAQE,OAAO;QAE5D,OAAOG;IACT,GAAG;QAACN;KAAK;AACX"}
+{"version":3,"sources":["../src/useDebouncedFunction.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { type AnyFunction, type DebouncedFunction } from \"./types.js\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect.js\";\n\n/**\n * Creates a function that will only be called if it has not been called again\n * for X milliseconds.\n *\n * @example Debounced Search API Requests\n * ```tsx\n * import { TextField, useDebouncedFunction, useUnmounted } from \"@react-md/core\";\n * import { useState } from \"react\";\n * import type { ReactElement } from \"react\";\n *\n * interface State {\n *   error?: unknown\n *   loading: boolean;\n *   results?: {\n *     // pretend some search results\n *     id: string;\n *     name: string;\n *   }[];\n * }\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState<State>({\n *     loading: false,\n *   });\n *   // this is only required for async actions\n *   const unmounted = useUnmounted();\n *\n *   // A new search request will be fired once every 500ms as the user types.\n *   // can't use the event here since React uses synthetic events\n *   const search = useDebouncedFunction(async (q: string) => {\n *     setState({\n *       loading: true,\n *       error: undefined,\n *       results: undefined,\n *     });\n *\n *     try {\n *       const response = await fetch('/search', {\n *         method: 'POST',\n *         headers: {\n *           'Content-Type': 'application/json',\n *         },\n *         body: JSON.stringify({ q }),\n *       });\n *       const json = await response.json();\n *\n *       if (!unmounted.current) {\n *         setState({\n *           loading: false,\n *           results: json,\n *         });\n *       }\n *     } catch (error) {\n *       if (!unmounted.current) {\n *         setState({\n *           error,\n *           loading: false,\n *         });\n *       }\n *     }\n *   }, 500);\n *\n *   return (\n *     <TextField\n *       type=\"search\"\n *       label=\"Search\"\n *       onChange={(event) => search(event.currentTarget.value)}\n *     />\n *   );\n * }\n * ```\n *\n * @see `useThrottledFunction` for throttle behavior instead. (Call a\n * function at most once every X milliseconds).\n * @since 6.0.0\n */\nexport function useDebouncedFunction<F extends AnyFunction>(\n  func: F,\n  wait: number\n): DebouncedFunction<F> {\n  const timeout = useRef<number | undefined>();\n  const funcRef = useRef(func);\n  useIsomorphicLayoutEffect(() => {\n    funcRef.current = func;\n  });\n\n  useEffect(() => {\n    return () => {\n      window.clearTimeout(timeout.current);\n    };\n  }, []);\n\n  return useMemo(() => {\n    const debounced: DebouncedFunction<F> = (...args) => {\n      window.clearTimeout(timeout.current);\n      timeout.current = window.setTimeout(() => {\n        funcRef.current(...args);\n      }, wait);\n    };\n    debounced.cancel = () => {\n      window.clearTimeout(timeout.current);\n    };\n\n    return debounced;\n  }, [wait]);\n}\n"],"names":["useEffect","useMemo","useRef","useIsomorphicLayoutEffect","useDebouncedFunction","func","wait","timeout","funcRef","current","window","clearTimeout","debounced","args","setTimeout","cancel"],"mappings":"AAAA;AACA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAEnD,SAASC,yBAAyB,QAAQ,iCAAiC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EC,GACD,OAAO,SAASC,qBACdC,IAAO,EACPC,IAAY;IAEZ,MAAMC,UAAUL;IAChB,MAAMM,UAAUN,OAAOG;IACvBF,0BAA0B;QACxBK,QAAQC,OAAO,GAAGJ;IACpB;IAEAL,UAAU;QACR,OAAO;YACLU,OAAOC,YAAY,CAACJ,QAAQE,OAAO;QACrC;IACF,GAAG,EAAE;IAEL,OAAOR,QAAQ;QACb,MAAMW,YAAkC,CAAC,GAAGC;YAC1CH,OAAOC,YAAY,CAACJ,QAAQE,OAAO;YACnCF,QAAQE,OAAO,GAAGC,OAAOI,UAAU,CAAC;gBAClCN,QAAQC,OAAO,IAAII;YACrB,GAAGP;QACL;QACAM,UAAUG,MAAM,GAAG;YACjBL,OAAOC,YAAY,CAACJ,QAAQE,OAAO;QACrC;QAEA,OAAOG;IACT,GAAG;QAACN;KAAK;AACX"}

package/dist/useDropzone.d.ts

@@ -5,10 +5,10 @@ import type { DragEvent } from "react";
  * instead of the `DropzoneHandlers` type.
  */
 export interface DropzoneHandlers {
-    onDrop<E extends HTMLElement>(event: DragEvent<E>): void;
-    onDragEnter?<E extends HTMLElement>(event: DragEvent<E>): void;
-    onDragOver?<E extends HTMLElement>(event: DragEvent<E>): void;
-    onDragLeave?<E extends HTMLElement>(event: DragEvent<E>): void;
+    onDrop: <E extends HTMLElement>(event: DragEvent<E>) => void;
+    onDragEnter?: <E extends HTMLElement>(event: DragEvent<E>) => void;
+    onDragOver?: <E extends HTMLElement>(event: DragEvent<E>) => void;
+    onDragLeave?: <E extends HTMLElement>(event: DragEvent<E>) => void;
 }
 /**
  * @since 6.0.0

package/dist/useDropzone.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useDropzone.ts"],"sourcesContent":["\"use client\";\nimport type { DragEvent } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 5.1.3\n * @since 6.0.0 The element type is dynamically inferred on each handler\n * instead of the `DropzoneHandlers` type.\n */\nexport interface DropzoneHandlers {\n  onDrop<E extends HTMLElement>(event: DragEvent<E>): void;\n  onDragEnter?<E extends HTMLElement>(event: DragEvent<E>): void;\n  onDragOver?<E extends HTMLElement>(event: DragEvent<E>): void;\n  onDragLeave?<E extends HTMLElement>(event: DragEvent<E>): void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface DropzoneOptions extends DropzoneHandlers {\n  /**\n   * Set this to `true` if you do not need to capture drag events from outside\n   * the window. i.e. Dragging files into the dropzone.\n   *\n   * @defaultValue `false`\n   * @see {@link DropzoneHookReturnValue.isDragging}\n   */\n  disableDragging?: boolean;\n}\n\n/**\n * @since 2.9.0\n * @since 6.0.0 Returns an object instead of an ordered array of\n * `[isOver: boolean, dropzoneHandlers: DropzoneHandlers]`. Also returns a new\n * `isDragging` state.\n */\nexport interface DropzoneHookReturnValue {\n  /**\n   * This will be `true` when the user is dragging something over the dropzone\n   * target.\n   */\n  isOver: boolean;\n\n  /**\n   * This will be `true` when the user is dragging anything within the document.\n   * The main use case for this is detecting when a user is dragging a file into\n   * the document so you can help highlight the dropzone area.\n   *\n   * This will always be `false` if {@link DropzoneOptions.disableDragging} is\n   * `true`.\n   */\n  isDragging: boolean;\n\n  /**\n   * The event handlers that should be passed to the dropzone target.\n   */\n  dropzoneHandlers: Required<DropzoneHandlers>;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { useDropzone, useFileUpload } from \"@react-md/core\"\n * import type { CSSProperties, ReactElement } from \"react\";\n *\n * const style: CSSProperties = {\n *   border: '1px solid blue',\n * };\n *\n * function Example(): ReactElement {\n *   const { onDrop } = useFileUpload()\n *   const { isOver, dropzoneHandlers } = useDropzone({\n *     onDrop(event) {\n *       // normally use the `onDrop` behavior from `useFileUpload` to upload\n *       // files:\n *       // onDrop(event);\n *     },\n *     disableDragging: true,\n *   });\n *\n *   return (\n *     <div {...dropzoneHandlers} style={isOver ? style : {}}>\n *       Drag and drop some files!\n *       {isOver && <UploadSVGIcon />}\n *     </div>\n *   );\n * }\n * ```\n *\n * @example Dragging Example\n * ```tsx\n * import { useDropzone, useFileUpload } from \"@react-md/core\"\n * import type { CSSProperties, ReactElement } from \"react\";\n *\n * const draggingStyle: CSSProperties = {\n *   backgroundColor: \"orange\",\n * };\n * const overStyle: CSSProperties = {\n *   border: '1px solid blue',\n * };\n *\n * function Example(): ReactElement {\n *   const { onDrop } = useFileUpload()\n *   const { isOver, isDragging, dropzoneHandlers } = useDropzone({\n *     onDrop(event) {\n *       // normally use the `onDrop` behavior from `useFileUpload` to upload\n *       // files:\n *       // onDrop(event);\n *     },\n *   });\n *\n *   return (\n *     <div\n *       {...dropzoneHandlers}\n *       style={{\n *         ...(isDragging && draggingStyle),\n *         ...(isOver && overStyle),\n *       }}\n *     >\n *       Drag and drop some files!\n *       {isOver && <UploadSVGIcon />}\n *     </div>\n *   );\n * }\n * ```\n *\n * @since 2.9.0\n * @since 6.0.0 Supports document-level dragging flag;\n */\nexport function useDropzone(options: DropzoneOptions): DropzoneHookReturnValue {\n  const {\n    onDrop,\n    onDragOver = noop,\n    onDragEnter = noop,\n    onDragLeave = noop,\n    disableDragging = false,\n  } = options;\n\n  const [isOver, setOver] = useState(false);\n  const [isDragging, setDragging] = useState(false);\n  const draggingTimeout = useRef<number | undefined>();\n\n  useEffect(() => {\n    if (disableDragging) {\n      return;\n    }\n\n    const startDragging = (): void => {\n      setDragging(true);\n    };\n\n    // Browsers sometimes don't trigger a dragleave event for the entire\n    // document, so we have to work around that by using the `dragover` event\n    // instead. The `dragover` event will continually fire within the window\n    // until the user drops the file or moves the file outside of the window.\n    //\n    // So we can consider the\n    const handler = (): void => {\n      window.clearTimeout(draggingTimeout.current);\n      draggingTimeout.current = window.setTimeout(() => {\n        setDragging(false);\n      }, 100);\n    };\n\n    window.addEventListener(\"dragenter\", startDragging);\n    window.addEventListener(\"dragover\", handler);\n    return () => {\n      window.clearTimeout(draggingTimeout.current);\n      window.removeEventListener(\"dragenter\", startDragging);\n      window.removeEventListener(\"dragover\", handler);\n    };\n  }, [disableDragging]);\n\n  return {\n    isOver,\n    isDragging,\n    dropzoneHandlers: {\n      // Note: need to call `event.stopPropagation()` and\n      // `event.preventDefault())` for each of these handlers to prevent the\n      // default browser behavior when dropping. Only calling within `onDrop`\n      // does not work.\n      //\n      // i.e. dropping an image would preview that image in the current\n      // window/tab instead of triggering the drop event.\n      onDrop(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        window.clearTimeout(draggingTimeout.current);\n        onDrop(event);\n        setOver(false);\n        setDragging(false);\n      },\n      onDragOver(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        window.clearTimeout(draggingTimeout.current);\n        onDragOver(event);\n        setOver(true);\n      },\n      onDragEnter(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        onDragEnter(event);\n        setOver(true);\n      },\n      onDragLeave(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        onDragLeave(event);\n        setOver(false);\n      },\n    },\n  };\n}\n"],"names":["useEffect","useRef","useState","noop","useDropzone","options","onDrop","onDragOver","onDragEnter","onDragLeave","disableDragging","isOver","setOver","isDragging","setDragging","draggingTimeout","startDragging","handler","window","clearTimeout","current","setTimeout","addEventListener","removeEventListener","dropzoneHandlers","event","preventDefault","stopPropagation"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAEpD,MAAMC,OAAO;AACX,aAAa;AACf;AAyDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqEC,GACD,OAAO,SAASC,YAAYC,OAAwB;IAClD,MAAM,EACJC,MAAM,EACNC,aAAaJ,IAAI,EACjBK,cAAcL,IAAI,EAClBM,cAAcN,IAAI,EAClBO,kBAAkB,KAAK,EACxB,GAAGL;IAEJ,MAAM,CAACM,QAAQC,QAAQ,GAAGV,SAAS;IACnC,MAAM,CAACW,YAAYC,YAAY,GAAGZ,SAAS;IAC3C,MAAMa,kBAAkBd;IAExBD,UAAU;QACR,IAAIU,iBAAiB;YACnB;QACF;QAEA,MAAMM,gBAAgB;YACpBF,YAAY;QACd;QAEA,oEAAoE;QACpE,yEAAyE;QACzE,wEAAwE;QACxE,yEAAyE;QACzE,EAAE;QACF,yBAAyB;QACzB,MAAMG,UAAU;YACdC,OAAOC,YAAY,CAACJ,gBAAgBK,OAAO;YAC3CL,gBAAgBK,OAAO,GAAGF,OAAOG,UAAU,CAAC;gBAC1CP,YAAY;YACd,GAAG;QACL;QAEAI,OAAOI,gBAAgB,CAAC,aAAaN;QACrCE,OAAOI,gBAAgB,CAAC,YAAYL;QACpC,OAAO;YACLC,OAAOC,YAAY,CAACJ,gBAAgBK,OAAO;YAC3CF,OAAOK,mBAAmB,CAAC,aAAaP;YACxCE,OAAOK,mBAAmB,CAAC,YAAYN;QACzC;IACF,GAAG;QAACP;KAAgB;IAEpB,OAAO;QACLC;QACAE;QACAW,kBAAkB;YAChB,mDAAmD;YACnD,sEAAsE;YACtE,uEAAuE;YACvE,iBAAiB;YACjB,EAAE;YACF,iEAAiE;YACjE,mDAAmD;YACnDlB,QAAOmB,KAAK;gBACVA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBT,OAAOC,YAAY,CAACJ,gBAAgBK,OAAO;gBAC3Cd,OAAOmB;gBACPb,QAAQ;gBACRE,YAAY;YACd;YACAP,YAAWkB,KAAK;gBACdA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBT,OAAOC,YAAY,CAACJ,gBAAgBK,OAAO;gBAC3Cb,WAAWkB;gBACXb,QAAQ;YACV;YACAJ,aAAYiB,KAAK;gBACfA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBnB,YAAYiB;gBACZb,QAAQ;YACV;YACAH,aAAYgB,KAAK;gBACfA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBlB,YAAYgB;gBACZb,QAAQ;YACV;QACF;IACF;AACF"}
+{"version":3,"sources":["../src/useDropzone.ts"],"sourcesContent":["\"use client\";\nimport type { DragEvent } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 5.1.3\n * @since 6.0.0 The element type is dynamically inferred on each handler\n * instead of the `DropzoneHandlers` type.\n */\nexport interface DropzoneHandlers {\n  onDrop: <E extends HTMLElement>(event: DragEvent<E>) => void;\n  onDragEnter?: <E extends HTMLElement>(event: DragEvent<E>) => void;\n  onDragOver?: <E extends HTMLElement>(event: DragEvent<E>) => void;\n  onDragLeave?: <E extends HTMLElement>(event: DragEvent<E>) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface DropzoneOptions extends DropzoneHandlers {\n  /**\n   * Set this to `true` if you do not need to capture drag events from outside\n   * the window. i.e. Dragging files into the dropzone.\n   *\n   * @defaultValue `false`\n   * @see {@link DropzoneHookReturnValue.isDragging}\n   */\n  disableDragging?: boolean;\n}\n\n/**\n * @since 2.9.0\n * @since 6.0.0 Returns an object instead of an ordered array of\n * `[isOver: boolean, dropzoneHandlers: DropzoneHandlers]`. Also returns a new\n * `isDragging` state.\n */\nexport interface DropzoneHookReturnValue {\n  /**\n   * This will be `true` when the user is dragging something over the dropzone\n   * target.\n   */\n  isOver: boolean;\n\n  /**\n   * This will be `true` when the user is dragging anything within the document.\n   * The main use case for this is detecting when a user is dragging a file into\n   * the document so you can help highlight the dropzone area.\n   *\n   * This will always be `false` if {@link DropzoneOptions.disableDragging} is\n   * `true`.\n   */\n  isDragging: boolean;\n\n  /**\n   * The event handlers that should be passed to the dropzone target.\n   */\n  dropzoneHandlers: Required<DropzoneHandlers>;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { useDropzone, useFileUpload } from \"@react-md/core\"\n * import type { CSSProperties, ReactElement } from \"react\";\n *\n * const style: CSSProperties = {\n *   border: '1px solid blue',\n * };\n *\n * function Example(): ReactElement {\n *   const { onDrop } = useFileUpload()\n *   const { isOver, dropzoneHandlers } = useDropzone({\n *     onDrop(event) {\n *       // normally use the `onDrop` behavior from `useFileUpload` to upload\n *       // files:\n *       // onDrop(event);\n *     },\n *     disableDragging: true,\n *   });\n *\n *   return (\n *     <div {...dropzoneHandlers} style={isOver ? style : {}}>\n *       Drag and drop some files!\n *       {isOver && <UploadSVGIcon />}\n *     </div>\n *   );\n * }\n * ```\n *\n * @example Dragging Example\n * ```tsx\n * import { useDropzone, useFileUpload } from \"@react-md/core\"\n * import type { CSSProperties, ReactElement } from \"react\";\n *\n * const draggingStyle: CSSProperties = {\n *   backgroundColor: \"orange\",\n * };\n * const overStyle: CSSProperties = {\n *   border: '1px solid blue',\n * };\n *\n * function Example(): ReactElement {\n *   const { onDrop } = useFileUpload()\n *   const { isOver, isDragging, dropzoneHandlers } = useDropzone({\n *     onDrop(event) {\n *       // normally use the `onDrop` behavior from `useFileUpload` to upload\n *       // files:\n *       // onDrop(event);\n *     },\n *   });\n *\n *   return (\n *     <div\n *       {...dropzoneHandlers}\n *       style={{\n *         ...(isDragging && draggingStyle),\n *         ...(isOver && overStyle),\n *       }}\n *     >\n *       Drag and drop some files!\n *       {isOver && <UploadSVGIcon />}\n *     </div>\n *   );\n * }\n * ```\n *\n * @since 2.9.0\n * @since 6.0.0 Supports document-level dragging flag;\n */\nexport function useDropzone(options: DropzoneOptions): DropzoneHookReturnValue {\n  const {\n    onDrop,\n    onDragOver = noop,\n    onDragEnter = noop,\n    onDragLeave = noop,\n    disableDragging = false,\n  } = options;\n\n  const [isOver, setOver] = useState(false);\n  const [isDragging, setDragging] = useState(false);\n  const draggingTimeout = useRef<number | undefined>();\n\n  useEffect(() => {\n    if (disableDragging) {\n      return;\n    }\n\n    const startDragging = (): void => {\n      setDragging(true);\n    };\n\n    // Browsers sometimes don't trigger a dragleave event for the entire\n    // document, so we have to work around that by using the `dragover` event\n    // instead. The `dragover` event will continually fire within the window\n    // until the user drops the file or moves the file outside of the window.\n    //\n    // So we can consider the\n    const handler = (): void => {\n      window.clearTimeout(draggingTimeout.current);\n      draggingTimeout.current = window.setTimeout(() => {\n        setDragging(false);\n      }, 100);\n    };\n\n    window.addEventListener(\"dragenter\", startDragging);\n    window.addEventListener(\"dragover\", handler);\n    return () => {\n      window.clearTimeout(draggingTimeout.current);\n      window.removeEventListener(\"dragenter\", startDragging);\n      window.removeEventListener(\"dragover\", handler);\n    };\n  }, [disableDragging]);\n\n  return {\n    isOver,\n    isDragging,\n    dropzoneHandlers: {\n      // Note: need to call `event.stopPropagation()` and\n      // `event.preventDefault())` for each of these handlers to prevent the\n      // default browser behavior when dropping. Only calling within `onDrop`\n      // does not work.\n      //\n      // i.e. dropping an image would preview that image in the current\n      // window/tab instead of triggering the drop event.\n      onDrop(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        window.clearTimeout(draggingTimeout.current);\n        onDrop(event);\n        setOver(false);\n        setDragging(false);\n      },\n      onDragOver(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        window.clearTimeout(draggingTimeout.current);\n        onDragOver(event);\n        setOver(true);\n      },\n      onDragEnter(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        onDragEnter(event);\n        setOver(true);\n      },\n      onDragLeave(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        onDragLeave(event);\n        setOver(false);\n      },\n    },\n  };\n}\n"],"names":["useEffect","useRef","useState","noop","useDropzone","options","onDrop","onDragOver","onDragEnter","onDragLeave","disableDragging","isOver","setOver","isDragging","setDragging","draggingTimeout","startDragging","handler","window","clearTimeout","current","setTimeout","addEventListener","removeEventListener","dropzoneHandlers","event","preventDefault","stopPropagation"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAEpD,MAAMC,OAAO;AACX,aAAa;AACf;AAyDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqEC,GACD,OAAO,SAASC,YAAYC,OAAwB;IAClD,MAAM,EACJC,MAAM,EACNC,aAAaJ,IAAI,EACjBK,cAAcL,IAAI,EAClBM,cAAcN,IAAI,EAClBO,kBAAkB,KAAK,EACxB,GAAGL;IAEJ,MAAM,CAACM,QAAQC,QAAQ,GAAGV,SAAS;IACnC,MAAM,CAACW,YAAYC,YAAY,GAAGZ,SAAS;IAC3C,MAAMa,kBAAkBd;IAExBD,UAAU;QACR,IAAIU,iBAAiB;YACnB;QACF;QAEA,MAAMM,gBAAgB;YACpBF,YAAY;QACd;QAEA,oEAAoE;QACpE,yEAAyE;QACzE,wEAAwE;QACxE,yEAAyE;QACzE,EAAE;QACF,yBAAyB;QACzB,MAAMG,UAAU;YACdC,OAAOC,YAAY,CAACJ,gBAAgBK,OAAO;YAC3CL,gBAAgBK,OAAO,GAAGF,OAAOG,UAAU,CAAC;gBAC1CP,YAAY;YACd,GAAG;QACL;QAEAI,OAAOI,gBAAgB,CAAC,aAAaN;QACrCE,OAAOI,gBAAgB,CAAC,YAAYL;QACpC,OAAO;YACLC,OAAOC,YAAY,CAACJ,gBAAgBK,OAAO;YAC3CF,OAAOK,mBAAmB,CAAC,aAAaP;YACxCE,OAAOK,mBAAmB,CAAC,YAAYN;QACzC;IACF,GAAG;QAACP;KAAgB;IAEpB,OAAO;QACLC;QACAE;QACAW,kBAAkB;YAChB,mDAAmD;YACnD,sEAAsE;YACtE,uEAAuE;YACvE,iBAAiB;YACjB,EAAE;YACF,iEAAiE;YACjE,mDAAmD;YACnDlB,QAAOmB,KAAK;gBACVA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBT,OAAOC,YAAY,CAACJ,gBAAgBK,OAAO;gBAC3Cd,OAAOmB;gBACPb,QAAQ;gBACRE,YAAY;YACd;YACAP,YAAWkB,KAAK;gBACdA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBT,OAAOC,YAAY,CAACJ,gBAAgBK,OAAO;gBAC3Cb,WAAWkB;gBACXb,QAAQ;YACV;YACAJ,aAAYiB,KAAK;gBACfA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBnB,YAAYiB;gBACZb,QAAQ;YACV;YACAH,aAAYgB,KAAK;gBACfA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBlB,YAAYgB;gBACZb,QAAQ;YACV;QACF;IACF;AACF"}

package/dist/useEnsuredId.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useEnsuredId.ts"],"sourcesContent":["import { useId } from \"react\";\n\n/**\n * This hook is used to ensure that an `id` has been provided to a component\n * either through props or use the `useId` hook.\n *\n * @example Simple Example\n * ```tsx\n * import type { HTMLAttributes, ReactElement } from \"react\";\n * import { useEnsuredId } from \"@react-md/core\";\n *\n * export function MaterialDesignComponent(props: HTMLAttributes<HTMLDivElement>): ReactElement {\n *   const id = useEnsuredId(props.id, \"component-name\");\n *\n *   return <div {...props} id={id} />;\n * }\n * ```\n *\n * @since 6.0.0\n * @internal\n */\nexport function useEnsuredId(\n  propId: string | undefined,\n  prefix: string\n): string {\n  const id = useId();\n\n  return propId ?? `${prefix}-${id}`;\n}\n"],"names":["useId","useEnsuredId","propId","prefix","id"],"mappings":"AAAA,SAASA,KAAK,QAAQ,QAAQ;AAE9B;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASC,aACdC,MAA0B,EAC1BC,MAAc;IAEd,MAAMC,KAAKJ;IAEX,OAAOE,UAAU,CAAC,EAAEC,OAAO,CAAC,EAAEC,GAAG,CAAC;AACpC"}
+{"version":3,"sources":["../src/useEnsuredId.ts"],"sourcesContent":["import { useId } from \"react\";\n\n/**\n * This hook is used to ensure that an `id` has been provided to a component\n * either through props or use the `useId` hook.\n *\n * @example Simple Example\n * ```tsx\n * import type { HTMLAttributes, ReactElement } from \"react\";\n * import { useEnsuredId } from \"@react-md/core\";\n *\n * export function MaterialDesignComponent(props: HTMLAttributes<HTMLDivElement>): ReactElement {\n *   const id = useEnsuredId(props.id, \"component-name\");\n *\n *   return <div {...props} id={id} />;\n * }\n * ```\n *\n * @since 6.0.0\n * @internal\n */\nexport function useEnsuredId(\n  propId: string | undefined,\n  prefix: string\n): string {\n  const id = useId();\n\n  return propId ?? `${prefix}-${id}`;\n}\n"],"names":["useId","useEnsuredId","propId","prefix","id"],"mappings":"AAAA,SAASA,KAAK,QAAQ,QAAQ;AAE9B;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASC,aACdC,MAA0B,EAC1BC,MAAc;IAEd,MAAMC,KAAKJ;IAEX,OAAOE,UAAU,GAAGC,OAAO,CAAC,EAAEC,IAAI;AACpC"}