@react-md/core 6.5.2 → 7.0.0

package/dist/tree/TreeGroup.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { List } from "../list/List.js";
 import { useCollapseTransition } from "../transition/useCollapseTransition.js";
 import { useTreeContext } from "./TreeProvider.js";
@@ -11,8 +10,8 @@ import { treeGroup } from "./styles.js";
  * @internal
  * @since 6.0.0 Removed the collapse options and is no longer a
  * "public" component.
- */ export const TreeGroup = /*#__PURE__*/ forwardRef(function TreeGroup(props, ref) {
-    const { className, collapsed, depth, onClick, onMouseDown, children, temporary: propTemporary, disableTransition = false, ...remaining } = props;
+ */ export function TreeGroup(props) {
+    const { ref, className, collapsed, depth, onClick, onMouseDown, children, temporary: propTemporary, disableTransition = false, ...remaining } = props;
     const style = {
         ...remaining.style,
         "--rmd-tree-depth": depth
@@ -51,6 +50,6 @@ import { treeGroup } from "./styles.js";
         role: "group",
         children: children
     });
-});
+}
 
 //# sourceMappingURL=TreeGroup.js.map

package/dist/tree/TreeGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/TreeGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { type CSSProperties, type ReactNode, forwardRef } from \"react\";\n\nimport { List, type ListProps } from \"../list/List.js\";\nimport { useCollapseTransition } from \"../transition/useCollapseTransition.js\";\nimport { useTreeContext } from \"./TreeProvider.js\";\nimport { treeGroup } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface OverridableTreeGroupProps extends ListProps {\n  /** @defaultValue `false` */\n  temporary?: boolean;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TreeGroupProps extends OverridableTreeGroupProps {\n  children: ReactNode;\n  depth: number;\n  collapsed: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0 Removed the collapse options and is no longer a\n * \"public\" component.\n */\nexport const TreeGroup = forwardRef<HTMLUListElement, TreeGroupProps>(\n  function TreeGroup(props, ref) {\n    const {\n      className,\n      collapsed,\n      depth,\n      onClick,\n      onMouseDown,\n      children,\n      temporary: propTemporary,\n      disableTransition = false,\n      ...remaining\n    } = props;\n\n    const style: CSSProperties = {\n      ...remaining.style,\n      \"--rmd-tree-depth\": depth,\n    };\n\n    const { temporaryChildItems } = useTreeContext();\n    const temporary = propTemporary ?? temporaryChildItems;\n\n    const { elementProps, rendered } = useCollapseTransition({\n      style,\n      nodeRef: ref,\n      enter: !disableTransition,\n      exit: !disableTransition,\n      transitionIn: !collapsed,\n      temporary,\n      className: treeGroup({ className }),\n    });\n\n    if (!rendered || !children) {\n      return null;\n    }\n\n    return (\n      <List\n        {...remaining}\n        onClick={(event) => {\n          onClick?.(event);\n          // always stop propagation for click events and mousedown for groups\n          // so that the parent child item's click and mousedown events aren't\n          // also fired while there are disabled child elementsS or\n          // non-interactable (like dividers or subheader)\n          event.stopPropagation();\n        }}\n        onMouseDown={(event) => {\n          onMouseDown?.(event);\n          event.stopPropagation();\n        }}\n        {...elementProps}\n        role=\"group\"\n      >\n        {children}\n      </List>\n    );\n  }\n);\n"],"names":["forwardRef","List","useCollapseTransition","useTreeContext","treeGroup","TreeGroup","props","ref","className","collapsed","depth","onClick","onMouseDown","children","temporary","propTemporary","disableTransition","remaining","style","temporaryChildItems","elementProps","rendered","nodeRef","enter","exit","transitionIn","event","stopPropagation","role"],"mappings":"AAAA;;AAEA,SAA6CA,UAAU,QAAQ,QAAQ;AAEvE,SAASC,IAAI,QAAwB,kBAAkB;AACvD,SAASC,qBAAqB,QAAQ,yCAAyC;AAC/E,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,SAAS,QAAQ,cAAc;AAuBxC;;;;;;CAMC,GACD,OAAO,MAAMC,0BAAYL,WACvB,SAASK,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,WAAW,EACXC,QAAQ,EACRC,WAAWC,aAAa,EACxBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGX;IAEJ,MAAMY,QAAuB;QAC3B,GAAGD,UAAUC,KAAK;QAClB,oBAAoBR;IACtB;IAEA,MAAM,EAAES,mBAAmB,EAAE,GAAGhB;IAChC,MAAMW,YAAYC,iBAAiBI;IAEnC,MAAM,EAAEC,YAAY,EAAEC,QAAQ,EAAE,GAAGnB,sBAAsB;QACvDgB;QACAI,SAASf;QACTgB,OAAO,CAACP;QACRQ,MAAM,CAACR;QACPS,cAAc,CAAChB;QACfK;QACAN,WAAWJ,UAAU;YAAEI;QAAU;IACnC;IAEA,IAAI,CAACa,YAAY,CAACR,UAAU;QAC1B,OAAO;IACT;IAEA,qBACE,KAACZ;QACE,GAAGgB,SAAS;QACbN,SAAS,CAACe;YACRf,UAAUe;YACV,oEAAoE;YACpE,oEAAoE;YACpE,yDAAyD;YACzD,gDAAgD;YAChDA,MAAMC,eAAe;QACvB;QACAf,aAAa,CAACc;YACZd,cAAcc;YACdA,MAAMC,eAAe;QACvB;QACC,GAAGP,YAAY;QAChBQ,MAAK;kBAEJf;;AAGP,GACA"}
+{"version":3,"sources":["../../src/tree/TreeGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { type CSSProperties, type ReactElement, type ReactNode } from \"react\";\n\nimport { List, type ListProps } from \"../list/List.js\";\nimport { useCollapseTransition } from \"../transition/useCollapseTransition.js\";\nimport { useTreeContext } from \"./TreeProvider.js\";\nimport { treeGroup } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface OverridableTreeGroupProps extends ListProps {\n  /** @defaultValue `false` */\n  temporary?: boolean;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TreeGroupProps extends OverridableTreeGroupProps {\n  children: ReactNode;\n  depth: number;\n  collapsed: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0 Removed the collapse options and is no longer a\n * \"public\" component.\n */\nexport function TreeGroup(props: TreeGroupProps): ReactElement | null {\n  const {\n    ref,\n    className,\n    collapsed,\n    depth,\n    onClick,\n    onMouseDown,\n    children,\n    temporary: propTemporary,\n    disableTransition = false,\n    ...remaining\n  } = props;\n\n  const style: CSSProperties = {\n    ...remaining.style,\n    \"--rmd-tree-depth\": depth,\n  };\n\n  const { temporaryChildItems } = useTreeContext();\n  const temporary = propTemporary ?? temporaryChildItems;\n\n  const { elementProps, rendered } = useCollapseTransition({\n    style,\n    nodeRef: ref,\n    enter: !disableTransition,\n    exit: !disableTransition,\n    transitionIn: !collapsed,\n    temporary,\n    className: treeGroup({ className }),\n  });\n\n  if (!rendered || !children) {\n    return null;\n  }\n\n  return (\n    <List\n      {...remaining}\n      onClick={(event) => {\n        onClick?.(event);\n        // always stop propagation for click events and mousedown for groups\n        // so that the parent child item's click and mousedown events aren't\n        // also fired while there are disabled child elementsS or\n        // non-interactable (like dividers or subheader)\n        event.stopPropagation();\n      }}\n      onMouseDown={(event) => {\n        onMouseDown?.(event);\n        event.stopPropagation();\n      }}\n      {...elementProps}\n      role=\"group\"\n    >\n      {children}\n    </List>\n  );\n}\n"],"names":["List","useCollapseTransition","useTreeContext","treeGroup","TreeGroup","props","ref","className","collapsed","depth","onClick","onMouseDown","children","temporary","propTemporary","disableTransition","remaining","style","temporaryChildItems","elementProps","rendered","nodeRef","enter","exit","transitionIn","event","stopPropagation","role"],"mappings":"AAAA;;AAIA,SAASA,IAAI,QAAwB,kBAAkB;AACvD,SAASC,qBAAqB,QAAQ,yCAAyC;AAC/E,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,SAAS,QAAQ,cAAc;AAuBxC;;;;;;CAMC,GACD,OAAO,SAASC,UAAUC,KAAqB;IAC7C,MAAM,EACJC,GAAG,EACHC,SAAS,EACTC,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,WAAW,EACXC,QAAQ,EACRC,WAAWC,aAAa,EACxBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGX;IAEJ,MAAMY,QAAuB;QAC3B,GAAGD,UAAUC,KAAK;QAClB,oBAAoBR;IACtB;IAEA,MAAM,EAAES,mBAAmB,EAAE,GAAGhB;IAChC,MAAMW,YAAYC,iBAAiBI;IAEnC,MAAM,EAAEC,YAAY,EAAEC,QAAQ,EAAE,GAAGnB,sBAAsB;QACvDgB;QACAI,SAASf;QACTgB,OAAO,CAACP;QACRQ,MAAM,CAACR;QACPS,cAAc,CAAChB;QACfK;QACAN,WAAWJ,UAAU;YAAEI;QAAU;IACnC;IAEA,IAAI,CAACa,YAAY,CAACR,UAAU;QAC1B,OAAO;IACT;IAEA,qBACE,KAACZ;QACE,GAAGgB,SAAS;QACbN,SAAS,CAACe;YACRf,UAAUe;YACV,oEAAoE;YACpE,oEAAoE;YACpE,yDAAyD;YACzD,gDAAgD;YAChDA,MAAMC,eAAe;QACvB;QACAf,aAAa,CAACc;YACZd,cAAcc;YACdA,MAAMC,eAAe;QACvB;QACC,GAAGP,YAAY;QAChBQ,MAAK;kBAEJf;;AAGP"}

package/dist/tree/TreeProvider.d.ts

@@ -1,6 +1,5 @@
-import { type ReactElement, type ReactNode } from "react";
+import { type ReactElement, type ReactNode, type RefObject } from "react";
 import { type CustomLinkComponent } from "../link/Link.js";
-import { type NonNullRef } from "../types.js";
 import { type DefaultTreeItemNode, type TreeData, type TreeItemNode } from "./types.js";
 import { type TreeExpansion } from "./useTreeExpansion.js";
 import { type TreeSelection } from "./useTreeSelection.js";
@@ -71,7 +70,7 @@ export interface TreeContext<T extends TreeItemNode = DefaultTreeItemNode> exten
     /** @internal */
     expansionMode: TreeExpansionMode;
     /** @internal */
-    metadataLookup: NonNullRef<TreeItemMetadataLookup>;
+    metadataLookup: RefObject<TreeItemMetadataLookup>;
 }
 /**
  * This can be used for a custom tree item renderer.

package/dist/tree/TreeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/TreeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  createContext,\n  useContext,\n  useMemo,\n} from \"react\";\n\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { type NonNullRef } from \"../types.js\";\nimport {\n  type DefaultTreeItemNode,\n  type TreeData,\n  type TreeItemNode,\n} from \"./types.js\";\nimport { type TreeExpansion } from \"./useTreeExpansion.js\";\nimport { type TreeSelection } from \"./useTreeSelection.js\";\n\n/**\n * When this is set to `\"auto\"`, clicking on a tree item with a mouse or with\n * the Enter/Space keys will select and expand/collapse the tree item. The user\n * can still use the ArrowLeft and ArrowRight keys to expand/collapse nested\n * tree items.\n *\n * When this is set to `\"manual\"`, clicking on a tree item with a mouse or with\n * the Enter/Space keys will only select that tree item. The user must use the\n * ArrowLeft and ArrowRight keys to expand/collapse nested tree items.\n *\n * The main use-case for the `\"manual\"` setting is creating a navigation tree\n * that requires the user to click on an icon or a button to expand the child\n * items.\n *\n * @since 6.0.0\n */\nexport type TreeExpansionMode = \"auto\" | \"manual\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TreeItemMetadataLookup {\n  /**\n   * This is used for the keyboard movement behavior for trees that allow the\n   * `ArrowRight` key for tree items that have children.\n   */\n  expandable: Record<string, boolean>;\n\n  /**\n   * This is a quick lookup if a tree item is disabled since it's possible the\n   * custom `renderer` sets the `disabled` state and not the `TreeData`.\n   */\n  disabledItems: Record<string, boolean>;\n\n  /**\n   * A lookup of element `id` (DOM id) for each tree item to the `itemId`. This\n   * is a quick way to figure out which item is being interacted with from a\n   * keyboard event without needed to add `data-*` attributes.\n   */\n  elementToItem: Record<string, string>;\n\n  /**\n   * A lookup of tree item `itemId` to the element `id` (DOM id). This is used\n   * to be able to find a parent tree item when the `ArrowLeft` key is pressed\n   * to focus that parent item.\n   */\n  itemToElement: Record<string, string>;\n}\n\n/**\n * The tree context is mostly a convenience API for implementing a custom tree\n * item that requires the {@link TreeExpansion}, {@link TreeSelection} and\n * {@link TreeData} to work.\n *\n * The other properties on the context are most likely for internal use only.\n *\n * @since 6.0.0\n */\nexport interface TreeContext<T extends TreeItemNode = DefaultTreeItemNode>\n  extends TreeExpansion, TreeSelection {\n  data: TreeData<T>;\n  rootId: string | null;\n  disableTransition: boolean;\n  temporaryChildItems: boolean;\n\n  linkComponent: CustomLinkComponent;\n\n  /** @internal */\n  expanderLeft: boolean;\n  /** @internal */\n  expanderIcon: ReactNode;\n  /** @internal */\n  expansionMode: TreeExpansionMode;\n  /** @internal */\n  metadataLookup: NonNullRef<TreeItemMetadataLookup>;\n}\n\n// Allow the hook to correct typecast this instead\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst context = createContext<TreeContext<any> | undefined>(undefined);\ncontext.displayName = \"Tree\";\nconst { Provider } = context;\n\n/**\n * This can be used for a custom tree item renderer.\n *\n * @see The `Tree` component for an example.\n * @since 6.0.0\n */\nexport function useTreeContext<\n  T extends TreeItemNode = DefaultTreeItemNode,\n>(): TreeContext<T> {\n  const value = useContext(context);\n  if (!value) {\n    throw new Error(\"Cannot find a parent Tree component\");\n  }\n\n  return value;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TreeProviderProps<\n  T extends TreeItemNode = DefaultTreeItemNode,\n> extends TreeContext<T> {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport function TreeProvider<T extends TreeItemNode = DefaultTreeItemNode>(\n  props: TreeProviderProps<T>\n): ReactElement {\n  const {\n    children,\n    data,\n    rootId,\n    multiSelect,\n    expanderIcon,\n    expanderLeft,\n    expansionMode,\n    metadataLookup,\n    disableTransition,\n    temporaryChildItems,\n    linkComponent,\n    expandedIds,\n    selectedIds,\n    expandMultipleTreeItems,\n    toggleTreeItemExpansion,\n    selectMultipleTreeItems,\n    toggleTreeItemSelection,\n  } = props;\n  const value = useMemo<TreeContext<T>>(\n    () => ({\n      data,\n      rootId,\n      multiSelect,\n      expanderIcon,\n      expanderLeft,\n      expansionMode,\n      metadataLookup,\n      disableTransition,\n      temporaryChildItems,\n      linkComponent,\n      expandedIds,\n      selectedIds,\n      expandMultipleTreeItems,\n      toggleTreeItemExpansion,\n      selectMultipleTreeItems,\n      toggleTreeItemSelection,\n    }),\n    [\n      data,\n      disableTransition,\n      expandMultipleTreeItems,\n      expandedIds,\n      expanderIcon,\n      expanderLeft,\n      expansionMode,\n      linkComponent,\n      metadataLookup,\n      multiSelect,\n      rootId,\n      selectMultipleTreeItems,\n      selectedIds,\n      temporaryChildItems,\n      toggleTreeItemExpansion,\n      toggleTreeItemSelection,\n    ]\n  );\n\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useMemo","context","undefined","displayName","Provider","useTreeContext","value","Error","TreeProvider","props","children","data","rootId","multiSelect","expanderIcon","expanderLeft","expansionMode","metadataLookup","disableTransition","temporaryChildItems","linkComponent","expandedIds","selectedIds","expandMultipleTreeItems","toggleTreeItemExpansion","selectMultipleTreeItems","toggleTreeItemSelection"],"mappings":"AAAA;;AAEA,SAGEA,aAAa,EACbC,UAAU,EACVC,OAAO,QACF,QAAQ;AA0Ff,kDAAkD;AAClD,8DAA8D;AAC9D,MAAMC,wBAAUH,cAA4CI;AAC5DD,QAAQE,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGH;AAErB;;;;;CAKC,GACD,OAAO,SAASI;IAGd,MAAMC,QAAQP,WAAWE;IACzB,IAAI,CAACK,OAAO;QACV,MAAM,IAAIC,MAAM;IAClB;IAEA,OAAOD;AACT;AAYA;;;;;CAKC,GACD,OAAO,SAASE,aACdC,KAA2B;IAE3B,MAAM,EACJC,QAAQ,EACRC,IAAI,EACJC,MAAM,EACNC,WAAW,EACXC,YAAY,EACZC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,iBAAiB,EACjBC,mBAAmB,EACnBC,aAAa,EACbC,WAAW,EACXC,WAAW,EACXC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACxB,GAAGjB;IACJ,MAAMH,QAAQN,QACZ,IAAO,CAAA;YACLW;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACEf;QACAO;QACAK;QACAF;QACAP;QACAC;QACAC;QACAI;QACAH;QACAJ;QACAD;QACAa;QACAH;QACAH;QACAK;QACAE;KACD;IAGH,qBAAO,KAACtB;QAASE,OAAOA;kBAAQI;;AAClC"}
+{"version":3,"sources":["../../src/tree/TreeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  type RefObject,\n  createContext,\n  useContext,\n  useMemo,\n} from \"react\";\n\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport {\n  type DefaultTreeItemNode,\n  type TreeData,\n  type TreeItemNode,\n} from \"./types.js\";\nimport { type TreeExpansion } from \"./useTreeExpansion.js\";\nimport { type TreeSelection } from \"./useTreeSelection.js\";\n\n/**\n * When this is set to `\"auto\"`, clicking on a tree item with a mouse or with\n * the Enter/Space keys will select and expand/collapse the tree item. The user\n * can still use the ArrowLeft and ArrowRight keys to expand/collapse nested\n * tree items.\n *\n * When this is set to `\"manual\"`, clicking on a tree item with a mouse or with\n * the Enter/Space keys will only select that tree item. The user must use the\n * ArrowLeft and ArrowRight keys to expand/collapse nested tree items.\n *\n * The main use-case for the `\"manual\"` setting is creating a navigation tree\n * that requires the user to click on an icon or a button to expand the child\n * items.\n *\n * @since 6.0.0\n */\nexport type TreeExpansionMode = \"auto\" | \"manual\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TreeItemMetadataLookup {\n  /**\n   * This is used for the keyboard movement behavior for trees that allow the\n   * `ArrowRight` key for tree items that have children.\n   */\n  expandable: Record<string, boolean>;\n\n  /**\n   * This is a quick lookup if a tree item is disabled since it's possible the\n   * custom `renderer` sets the `disabled` state and not the `TreeData`.\n   */\n  disabledItems: Record<string, boolean>;\n\n  /**\n   * A lookup of element `id` (DOM id) for each tree item to the `itemId`. This\n   * is a quick way to figure out which item is being interacted with from a\n   * keyboard event without needed to add `data-*` attributes.\n   */\n  elementToItem: Record<string, string>;\n\n  /**\n   * A lookup of tree item `itemId` to the element `id` (DOM id). This is used\n   * to be able to find a parent tree item when the `ArrowLeft` key is pressed\n   * to focus that parent item.\n   */\n  itemToElement: Record<string, string>;\n}\n\n/**\n * The tree context is mostly a convenience API for implementing a custom tree\n * item that requires the {@link TreeExpansion}, {@link TreeSelection} and\n * {@link TreeData} to work.\n *\n * The other properties on the context are most likely for internal use only.\n *\n * @since 6.0.0\n */\nexport interface TreeContext<T extends TreeItemNode = DefaultTreeItemNode>\n  extends TreeExpansion, TreeSelection {\n  data: TreeData<T>;\n  rootId: string | null;\n  disableTransition: boolean;\n  temporaryChildItems: boolean;\n\n  linkComponent: CustomLinkComponent;\n\n  /** @internal */\n  expanderLeft: boolean;\n  /** @internal */\n  expanderIcon: ReactNode;\n  /** @internal */\n  expansionMode: TreeExpansionMode;\n  /** @internal */\n  metadataLookup: RefObject<TreeItemMetadataLookup>;\n}\n\n// Allow the hook to correct typecast this instead\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst context = createContext<TreeContext<any> | undefined>(undefined);\ncontext.displayName = \"Tree\";\nconst { Provider } = context;\n\n/**\n * This can be used for a custom tree item renderer.\n *\n * @see The `Tree` component for an example.\n * @since 6.0.0\n */\nexport function useTreeContext<\n  T extends TreeItemNode = DefaultTreeItemNode,\n>(): TreeContext<T> {\n  const value = useContext(context);\n  if (!value) {\n    throw new Error(\"Cannot find a parent Tree component\");\n  }\n\n  return value;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TreeProviderProps<\n  T extends TreeItemNode = DefaultTreeItemNode,\n> extends TreeContext<T> {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport function TreeProvider<T extends TreeItemNode = DefaultTreeItemNode>(\n  props: TreeProviderProps<T>\n): ReactElement {\n  const {\n    children,\n    data,\n    rootId,\n    multiSelect,\n    expanderIcon,\n    expanderLeft,\n    expansionMode,\n    metadataLookup,\n    disableTransition,\n    temporaryChildItems,\n    linkComponent,\n    expandedIds,\n    selectedIds,\n    expandMultipleTreeItems,\n    toggleTreeItemExpansion,\n    selectMultipleTreeItems,\n    toggleTreeItemSelection,\n  } = props;\n  const value = useMemo<TreeContext<T>>(\n    () => ({\n      data,\n      rootId,\n      multiSelect,\n      expanderIcon,\n      expanderLeft,\n      expansionMode,\n      metadataLookup,\n      disableTransition,\n      temporaryChildItems,\n      linkComponent,\n      expandedIds,\n      selectedIds,\n      expandMultipleTreeItems,\n      toggleTreeItemExpansion,\n      selectMultipleTreeItems,\n      toggleTreeItemSelection,\n    }),\n    [\n      data,\n      disableTransition,\n      expandMultipleTreeItems,\n      expandedIds,\n      expanderIcon,\n      expanderLeft,\n      expansionMode,\n      linkComponent,\n      metadataLookup,\n      multiSelect,\n      rootId,\n      selectMultipleTreeItems,\n      selectedIds,\n      temporaryChildItems,\n      toggleTreeItemExpansion,\n      toggleTreeItemSelection,\n    ]\n  );\n\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useMemo","context","undefined","displayName","Provider","useTreeContext","value","Error","TreeProvider","props","children","data","rootId","multiSelect","expanderIcon","expanderLeft","expansionMode","metadataLookup","disableTransition","temporaryChildItems","linkComponent","expandedIds","selectedIds","expandMultipleTreeItems","toggleTreeItemExpansion","selectMultipleTreeItems","toggleTreeItemSelection"],"mappings":"AAAA;;AAEA,SAIEA,aAAa,EACbC,UAAU,EACVC,OAAO,QACF,QAAQ;AAyFf,kDAAkD;AAClD,8DAA8D;AAC9D,MAAMC,wBAAUH,cAA4CI;AAC5DD,QAAQE,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGH;AAErB;;;;;CAKC,GACD,OAAO,SAASI;IAGd,MAAMC,QAAQP,WAAWE;IACzB,IAAI,CAACK,OAAO;QACV,MAAM,IAAIC,MAAM;IAClB;IAEA,OAAOD;AACT;AAYA;;;;;CAKC,GACD,OAAO,SAASE,aACdC,KAA2B;IAE3B,MAAM,EACJC,QAAQ,EACRC,IAAI,EACJC,MAAM,EACNC,WAAW,EACXC,YAAY,EACZC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,iBAAiB,EACjBC,mBAAmB,EACnBC,aAAa,EACbC,WAAW,EACXC,WAAW,EACXC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACxB,GAAGjB;IACJ,MAAMH,QAAQN,QACZ,IAAO,CAAA;YACLW;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACEf;QACAO;QACAK;QACAF;QACAP;QACAC;QACAC;QACAI;QACAH;QACAJ;QACAD;QACAa;QACAH;QACAH;QACAK;QACAE;KACD;IAGH,qBAAO,KAACtB;QAASE,OAAOA;kBAAQI;;AAClC"}

package/dist/tree/useTreeMovement.d.ts

@@ -1,10 +1,9 @@
-import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, Ref } from "react";
+import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, Ref, RefObject } from "react";
 import type { KeyboardMovementProviderImplementation } from "../movement/types.js";
-import type { NonNullMutableRef } from "../types.js";
-import type { TreeItemMetadataLookup } from "./TreeProvider.js";
-import type { TreeData, TreeItemNode } from "./types.js";
-import type { TreeExpansion } from "./useTreeExpansion.js";
-import type { TreeItemChildIds } from "./useTreeItems.js";
+import { type TreeItemMetadataLookup } from "./TreeProvider.js";
+import { type TreeData, type TreeItemNode } from "./types.js";
+import { type TreeExpansion } from "./useTreeExpansion.js";
+import { type TreeItemChildIds } from "./useTreeItems.js";
 /**
  * @since 6.0.0
  * @internal
@@ -27,7 +26,7 @@ interface TreeMovement extends KeyboardMovementProviderImplementation<HTMLUListE
      * This will be mutated by the `TreeItem` component and used to handle
      * keyboard movement.
      */
-    metadataLookup: NonNullMutableRef<TreeItemMetadataLookup>;
+    metadataLookup: RefObject<TreeItemMetadataLookup>;
 }
 /**
  * @since 6.0.0

package/dist/tree/useTreeMovement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/useTreeMovement.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  Ref,\n} from \"react\";\nimport { useRef } from \"react\";\n\nimport type { KeyboardMovementProviderImplementation } from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { getNextFocusableIndex } from \"../movement/utils.js\";\nimport type { NonNullMutableRef } from \"../types.js\";\nimport type { TreeItemMetadataLookup } from \"./TreeProvider.js\";\nimport type { TreeData, TreeItemNode } from \"./types.js\";\nimport type { TreeExpansion } from \"./useTreeExpansion.js\";\nimport type { TreeItemChildIds } from \"./useTreeItems.js\";\n\n/**\n * This helps catch the edge case where the collapse transition has occurred for\n * a tree item group, but the user uses the `ArrowDown` key before it has\n * finished. So to do this:\n *\n * - find the parent group of the tree item\n * - find the tree item that controls the group (the element before the group)\n * - check if the `aria-expanded` state is `\"false\"` meaning it is considered\n *   closed\n *\n * @internal\n * @since 6.0.0\n */\nconst isParentItemCollapsing = (item: HTMLElement): boolean =>\n  item\n    .closest(\"[role='group']\")\n    ?.previousElementSibling?.getAttribute(\"aria-expanded\") === \"false\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nconst getVisibleTreeItems = (\n  container: HTMLElement\n): readonly HTMLElement[] => {\n  const items = [\n    ...container.querySelectorAll<HTMLElement>('[role=\"treeitem\"]'),\n  ];\n\n  return items.filter(\n    (item) =>\n      // do not include items that have a `hidden` parent group\n      item.offsetParent &&\n      // do not include items that are about to become hidden\n      !isParentItemCollapsing(item)\n  );\n};\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface TreeMovementOptions<T extends TreeItemNode> extends TreeExpansion {\n  ref?: Ref<HTMLUListElement>;\n  data: TreeData<T>;\n  onClick: MouseEventHandler<HTMLUListElement> | undefined;\n  onFocus: FocusEventHandler<HTMLUListElement> | undefined;\n  onKeyDown: KeyboardEventHandler<HTMLUListElement> | undefined;\n  selectedIds: ReadonlySet<string>;\n  treeItemChildIds: TreeItemChildIds;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface TreeMovement extends KeyboardMovementProviderImplementation<HTMLUListElement> {\n  /**\n   * This will be mutated by the `TreeItem` component and used to handle\n   * keyboard movement.\n   */\n  metadataLookup: NonNullMutableRef<TreeItemMetadataLookup>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function useTreeMovement<T extends TreeItemNode>(\n  options: TreeMovementOptions<T>\n): TreeMovement {\n  const {\n    ref,\n    onClick,\n    onFocus,\n    onKeyDown,\n    data,\n    expandedIds,\n    selectedIds,\n    treeItemChildIds,\n    toggleTreeItemExpansion,\n    expandMultipleTreeItems,\n  } = options;\n\n  const metadataLookup = useRef<TreeItemMetadataLookup>({\n    expandable: {},\n    disabledItems: {},\n    elementToItem: {},\n    itemToElement: {},\n  });\n  const movement = useKeyboardMovementProvider({\n    ref,\n    onClick,\n    onFocus,\n    onKeyDown,\n    extendKeyDown(movementData) {\n      const { event, activeDescendantId, currentFocusIndex, setFocusIndex } =\n        movementData;\n      const { expandable, disabledItems, elementToItem, itemToElement } =\n        metadataLookup.current;\n      const itemId = elementToItem[activeDescendantId];\n      const item = data[itemId];\n\n      /* c8 ignore start */\n      if (!item) {\n        return;\n      }\n      /* c8 ignore stop */\n\n      const disabled = disabledItems[itemId];\n      const expanded = expandedIds.has(itemId);\n\n      let flagged = false;\n      switch (event.key) {\n        case \"ArrowLeft\":\n          if (expanded && !disabled) {\n            flagged = true;\n            toggleTreeItemExpansion(itemId);\n          } else if (item.parentId) {\n            // do not flag for this case since setFocusIndex already does this\n            const parentId = itemToElement[item.parentId];\n            const focusables = getVisibleTreeItems(event.currentTarget);\n            const index = focusables.findIndex(\n              (element) => element.id === parentId\n            );\n            setFocusIndex(index, focusables);\n          }\n\n          break;\n        case \"ArrowRight\":\n          if (expandable[itemId] && !disabled) {\n            if (!expanded) {\n              flagged = true;\n              toggleTreeItemExpansion(itemId);\n            } else {\n              // do not flag for this case since setFocusIndex already does this\n              const focusables = getVisibleTreeItems(event.currentTarget);\n              const index = getNextFocusableIndex({\n                loopable: false,\n                increment: true,\n                focusables,\n                includeDisabled: true,\n                currentFocusIndex: currentFocusIndex.current,\n              });\n\n              setFocusIndex(index, focusables);\n            }\n          }\n\n          break;\n        case \"*\": {\n          flagged = true;\n          const itemIds = treeItemChildIds.get(item.parentId);\n          if (itemIds) {\n            const expandableIds = [...itemIds].filter(\n              (itemId) => expandable[itemId]\n            );\n            if (expandableIds.length > 0) {\n              expandMultipleTreeItems(\n                (prev) => new Set([...prev, ...expandableIds])\n              );\n              currentFocusIndex.current = -1;\n            }\n          }\n          break;\n        }\n      }\n\n      if (flagged) {\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    },\n    searchable: true,\n    tabIndexBehavior: \"virtual\",\n    getFocusableElements: getVisibleTreeItems,\n    getDefaultFocusedIndex(options) {\n      const { focusables } = options;\n      const { elementToItem } = metadataLookup.current;\n\n      return focusables.findIndex((element) =>\n        selectedIds.has(elementToItem[element.id])\n      );\n    },\n  });\n\n  return {\n    metadataLookup,\n    ...movement,\n  };\n}\n"],"names":["useRef","useKeyboardMovementProvider","getNextFocusableIndex","isParentItemCollapsing","item","closest","previousElementSibling","getAttribute","getVisibleTreeItems","container","items","querySelectorAll","filter","offsetParent","useTreeMovement","options","ref","onClick","onFocus","onKeyDown","data","expandedIds","selectedIds","treeItemChildIds","toggleTreeItemExpansion","expandMultipleTreeItems","metadataLookup","expandable","disabledItems","elementToItem","itemToElement","movement","extendKeyDown","movementData","event","activeDescendantId","currentFocusIndex","setFocusIndex","current","itemId","disabled","expanded","has","flagged","key","parentId","focusables","currentTarget","index","findIndex","element","id","loopable","increment","includeDisabled","itemIds","get","expandableIds","length","prev","Set","stopPropagation","preventDefault","searchable","tabIndexBehavior","getFocusableElements","getDefaultFocusedIndex"],"mappings":"AAAA;AAQA,SAASA,MAAM,QAAQ,QAAQ;AAG/B,SAASC,2BAA2B,QAAQ,6CAA6C;AACzF,SAASC,qBAAqB,QAAQ,uBAAuB;AAO7D;;;;;;;;;;;;CAYC,GACD,MAAMC,yBAAyB,CAACC,OAC9BA,KACGC,OAAO,CAAC,mBACPC,wBAAwBC,aAAa,qBAAqB;AAEhE;;;CAGC,GACD,MAAMC,sBAAsB,CAC1BC;IAEA,MAAMC,QAAQ;WACTD,UAAUE,gBAAgB,CAAc;KAC5C;IAED,OAAOD,MAAME,MAAM,CACjB,CAACR,OACC,yDAAyD;QACzDA,KAAKS,YAAY,IACjB,uDAAuD;QACvD,CAACV,uBAAuBC;AAE9B;AA4BA;;;CAGC,GACD,OAAO,SAASU,gBACdC,OAA+B;IAE/B,MAAM,EACJC,GAAG,EACHC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,IAAI,EACJC,WAAW,EACXC,WAAW,EACXC,gBAAgB,EAChBC,uBAAuB,EACvBC,uBAAuB,EACxB,GAAGV;IAEJ,MAAMW,iBAAiB1B,OAA+B;QACpD2B,YAAY,CAAC;QACbC,eAAe,CAAC;QAChBC,eAAe,CAAC;QAChBC,eAAe,CAAC;IAClB;IACA,MAAMC,WAAW9B,4BAA4B;QAC3Ce;QACAC;QACAC;QACAC;QACAa,eAAcC,YAAY;YACxB,MAAM,EAAEC,KAAK,EAAEC,kBAAkB,EAAEC,iBAAiB,EAAEC,aAAa,EAAE,GACnEJ;YACF,MAAM,EAAEN,UAAU,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAE,GAC/DJ,eAAeY,OAAO;YACxB,MAAMC,SAASV,aAAa,CAACM,mBAAmB;YAChD,MAAM/B,OAAOgB,IAAI,CAACmB,OAAO;YAEzB,mBAAmB,GACnB,IAAI,CAACnC,MAAM;gBACT;YACF;YACA,kBAAkB,GAElB,MAAMoC,WAAWZ,aAAa,CAACW,OAAO;YACtC,MAAME,WAAWpB,YAAYqB,GAAG,CAACH;YAEjC,IAAII,UAAU;YACd,OAAQT,MAAMU,GAAG;gBACf,KAAK;oBACH,IAAIH,YAAY,CAACD,UAAU;wBACzBG,UAAU;wBACVnB,wBAAwBe;oBAC1B,OAAO,IAAInC,KAAKyC,QAAQ,EAAE;wBACxB,kEAAkE;wBAClE,MAAMA,WAAWf,aAAa,CAAC1B,KAAKyC,QAAQ,CAAC;wBAC7C,MAAMC,aAAatC,oBAAoB0B,MAAMa,aAAa;wBAC1D,MAAMC,QAAQF,WAAWG,SAAS,CAChC,CAACC,UAAYA,QAAQC,EAAE,KAAKN;wBAE9BR,cAAcW,OAAOF;oBACvB;oBAEA;gBACF,KAAK;oBACH,IAAInB,UAAU,CAACY,OAAO,IAAI,CAACC,UAAU;wBACnC,IAAI,CAACC,UAAU;4BACbE,UAAU;4BACVnB,wBAAwBe;wBAC1B,OAAO;4BACL,kEAAkE;4BAClE,MAAMO,aAAatC,oBAAoB0B,MAAMa,aAAa;4BAC1D,MAAMC,QAAQ9C,sBAAsB;gCAClCkD,UAAU;gCACVC,WAAW;gCACXP;gCACAQ,iBAAiB;gCACjBlB,mBAAmBA,kBAAkBE,OAAO;4BAC9C;4BAEAD,cAAcW,OAAOF;wBACvB;oBACF;oBAEA;gBACF,KAAK;oBAAK;wBACRH,UAAU;wBACV,MAAMY,UAAUhC,iBAAiBiC,GAAG,CAACpD,KAAKyC,QAAQ;wBAClD,IAAIU,SAAS;4BACX,MAAME,gBAAgB;mCAAIF;6BAAQ,CAAC3C,MAAM,CACvC,CAAC2B,SAAWZ,UAAU,CAACY,OAAO;4BAEhC,IAAIkB,cAAcC,MAAM,GAAG,GAAG;gCAC5BjC,wBACE,CAACkC,OAAS,IAAIC,IAAI;2CAAID;2CAASF;qCAAc;gCAE/CrB,kBAAkBE,OAAO,GAAG,CAAC;4BAC/B;wBACF;wBACA;oBACF;YACF;YAEA,IAAIK,SAAS;gBACXT,MAAM2B,eAAe;gBACrB3B,MAAM4B,cAAc;YACtB;QACF;QACAC,YAAY;QACZC,kBAAkB;QAClBC,sBAAsBzD;QACtB0D,wBAAuBnD,OAAO;YAC5B,MAAM,EAAE+B,UAAU,EAAE,GAAG/B;YACvB,MAAM,EAAEc,aAAa,EAAE,GAAGH,eAAeY,OAAO;YAEhD,OAAOQ,WAAWG,SAAS,CAAC,CAACC,UAC3B5B,YAAYoB,GAAG,CAACb,aAAa,CAACqB,QAAQC,EAAE,CAAC;QAE7C;IACF;IAEA,OAAO;QACLzB;QACA,GAAGK,QAAQ;IACb;AACF"}
+{"version":3,"sources":["../../src/tree/useTreeMovement.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  Ref,\n  RefObject,\n} from \"react\";\nimport { useRef } from \"react\";\n\nimport type { KeyboardMovementProviderImplementation } from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { getNextFocusableIndex } from \"../movement/utils.js\";\nimport { type TreeItemMetadataLookup } from \"./TreeProvider.js\";\nimport { type TreeData, type TreeItemNode } from \"./types.js\";\nimport { type TreeExpansion } from \"./useTreeExpansion.js\";\nimport { type TreeItemChildIds } from \"./useTreeItems.js\";\n\n/**\n * This helps catch the edge case where the collapse transition has occurred for\n * a tree item group, but the user uses the `ArrowDown` key before it has\n * finished. So to do this:\n *\n * - find the parent group of the tree item\n * - find the tree item that controls the group (the element before the group)\n * - check if the `aria-expanded` state is `\"false\"` meaning it is considered\n *   closed\n *\n * @internal\n * @since 6.0.0\n */\nconst isParentItemCollapsing = (item: HTMLElement): boolean =>\n  item\n    .closest(\"[role='group']\")\n    ?.previousElementSibling?.getAttribute(\"aria-expanded\") === \"false\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nconst getVisibleTreeItems = (\n  container: HTMLElement\n): readonly HTMLElement[] => {\n  const items = [\n    ...container.querySelectorAll<HTMLElement>('[role=\"treeitem\"]'),\n  ];\n\n  return items.filter(\n    (item) =>\n      // do not include items that have a `hidden` parent group\n      item.offsetParent &&\n      // do not include items that are about to become hidden\n      !isParentItemCollapsing(item)\n  );\n};\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface TreeMovementOptions<T extends TreeItemNode> extends TreeExpansion {\n  ref?: Ref<HTMLUListElement>;\n  data: TreeData<T>;\n  onClick: MouseEventHandler<HTMLUListElement> | undefined;\n  onFocus: FocusEventHandler<HTMLUListElement> | undefined;\n  onKeyDown: KeyboardEventHandler<HTMLUListElement> | undefined;\n  selectedIds: ReadonlySet<string>;\n  treeItemChildIds: TreeItemChildIds;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface TreeMovement extends KeyboardMovementProviderImplementation<HTMLUListElement> {\n  /**\n   * This will be mutated by the `TreeItem` component and used to handle\n   * keyboard movement.\n   */\n  metadataLookup: RefObject<TreeItemMetadataLookup>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function useTreeMovement<T extends TreeItemNode>(\n  options: TreeMovementOptions<T>\n): TreeMovement {\n  const {\n    ref,\n    onClick,\n    onFocus,\n    onKeyDown,\n    data,\n    expandedIds,\n    selectedIds,\n    treeItemChildIds,\n    toggleTreeItemExpansion,\n    expandMultipleTreeItems,\n  } = options;\n\n  const metadataLookup = useRef<TreeItemMetadataLookup>({\n    expandable: {},\n    disabledItems: {},\n    elementToItem: {},\n    itemToElement: {},\n  });\n  const movement = useKeyboardMovementProvider({\n    ref,\n    onClick,\n    onFocus,\n    onKeyDown,\n    extendKeyDown(movementData) {\n      const { event, activeDescendantId, currentFocusIndex, setFocusIndex } =\n        movementData;\n      const { expandable, disabledItems, elementToItem, itemToElement } =\n        metadataLookup.current;\n      const itemId = elementToItem[activeDescendantId];\n      const item = data[itemId];\n\n      /* c8 ignore start */\n      if (!item) {\n        return;\n      }\n      /* c8 ignore stop */\n\n      const disabled = disabledItems[itemId];\n      const expanded = expandedIds.has(itemId);\n\n      let flagged = false;\n      switch (event.key) {\n        case \"ArrowLeft\":\n          if (expanded && !disabled) {\n            flagged = true;\n            toggleTreeItemExpansion(itemId);\n          } else if (item.parentId) {\n            // do not flag for this case since setFocusIndex already does this\n            const parentId = itemToElement[item.parentId];\n            const focusables = getVisibleTreeItems(event.currentTarget);\n            const index = focusables.findIndex(\n              (element) => element.id === parentId\n            );\n            setFocusIndex(index, focusables);\n          }\n\n          break;\n        case \"ArrowRight\":\n          if (expandable[itemId] && !disabled) {\n            if (!expanded) {\n              flagged = true;\n              toggleTreeItemExpansion(itemId);\n            } else {\n              // do not flag for this case since setFocusIndex already does this\n              const focusables = getVisibleTreeItems(event.currentTarget);\n              const index = getNextFocusableIndex({\n                loopable: false,\n                increment: true,\n                focusables,\n                includeDisabled: true,\n                currentFocusIndex: currentFocusIndex.current,\n              });\n\n              setFocusIndex(index, focusables);\n            }\n          }\n\n          break;\n        case \"*\": {\n          flagged = true;\n          const itemIds = treeItemChildIds.get(item.parentId);\n          if (itemIds) {\n            const expandableIds = [...itemIds].filter(\n              (itemId) => expandable[itemId]\n            );\n            if (expandableIds.length > 0) {\n              expandMultipleTreeItems(\n                (prev) => new Set([...prev, ...expandableIds])\n              );\n              currentFocusIndex.current = -1;\n            }\n          }\n          break;\n        }\n      }\n\n      if (flagged) {\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    },\n    searchable: true,\n    tabIndexBehavior: \"virtual\",\n    getFocusableElements: getVisibleTreeItems,\n    getDefaultFocusedIndex(options) {\n      const { focusables } = options;\n      const { elementToItem } = metadataLookup.current;\n\n      return focusables.findIndex((element) =>\n        selectedIds.has(elementToItem[element.id])\n      );\n    },\n  });\n\n  return {\n    metadataLookup,\n    ...movement,\n  };\n}\n"],"names":["useRef","useKeyboardMovementProvider","getNextFocusableIndex","isParentItemCollapsing","item","closest","previousElementSibling","getAttribute","getVisibleTreeItems","container","items","querySelectorAll","filter","offsetParent","useTreeMovement","options","ref","onClick","onFocus","onKeyDown","data","expandedIds","selectedIds","treeItemChildIds","toggleTreeItemExpansion","expandMultipleTreeItems","metadataLookup","expandable","disabledItems","elementToItem","itemToElement","movement","extendKeyDown","movementData","event","activeDescendantId","currentFocusIndex","setFocusIndex","current","itemId","disabled","expanded","has","flagged","key","parentId","focusables","currentTarget","index","findIndex","element","id","loopable","increment","includeDisabled","itemIds","get","expandableIds","length","prev","Set","stopPropagation","preventDefault","searchable","tabIndexBehavior","getFocusableElements","getDefaultFocusedIndex"],"mappings":"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"}

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { type Dispatch, type HTMLAttributes, type ReactElement, type Ref, type SetStateAction } from "react";
+import { type Dispatch, type HTMLAttributes, type JSX, type ReactElement, type Ref, type 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.
@@ -55,20 +55,6 @@ export interface LabelA11y {
  * ```
  */
 export type LabelRequiredForA11y<Props extends LabelA11y> = RequireAtLeastOne<Props, keyof LabelA11y>;
-/**
- * @since 5.0.0
- * @internal
- */
-export interface NonNullRef<T> {
-    readonly current: T;
-}
-/**
- * @since 6.0.0
- * @internal
- */
-export interface NonNullMutableRef<T> {
-    current: T;
-}
 /** @since 6.0.0 */
 export type HtmlTagName = keyof JSX.IntrinsicElements;
 /**

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import {\n  type Dispatch,\n  type HTMLAttributes,\n  type ReactElement,\n  type Ref,\n  type SetStateAction,\n} 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 *\n * @since 6.2.0 Automatically infer the `Element` type param from the provided\n * props.\n */\nexport type PropsWithRef<\n  Props extends object,\n  Element extends HTMLElement = Props extends HTMLAttributes<infer E>\n    ? E extends HTMLElement\n      ? E\n      : never\n    : never,\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/types\";\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 * - `\"some value\"` -&gt; `\"some value\"`\n * - `{ label: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n * - `{ name: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n *\n * @since 6.2.0\n */\nexport type AutomaticTextExtraction =\n  | string\n  | { label: string }\n  | { name: 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\n/**\n * @since 6.3.0\n */\nexport interface Point {\n  x: number;\n  y: number;\n}\n\n/**\n * @since 6.3.0\n */\nexport interface MinMaxRange {\n  min: number;\n  max: number;\n}\n\n/**\n * @since 6.2.0\n */\nexport type OverridableStringUnion<\n  Defaults extends string,\n  Overrides extends Partial<Record<string, boolean>>,\n> =\n  | Exclude<Defaults, { [K in keyof Overrides]: K }[keyof Overrides]>\n  | {\n      [K in keyof Overrides]: Overrides[K] extends false ? never : K;\n    }[keyof Overrides];\n\n/**\n * @since 6.2.0\n */\nexport type IsEmptyObject<T> = keyof T extends never ? true : false;\n"],"names":[],"mappings":"AAiQA;;CAEC,GACD,WAAoE"}
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import {\n  type Dispatch,\n  type HTMLAttributes,\n  type JSX,\n  type ReactElement,\n  type Ref,\n  type SetStateAction,\n} 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 *\n * @since 6.2.0 Automatically infer the `Element` type param from the provided\n * props.\n */\nexport type PropsWithRef<\n  Props extends object,\n  Element extends HTMLElement = Props extends HTMLAttributes<infer E>\n    ? E extends HTMLElement\n      ? E\n      : never\n    : never,\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/types\";\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/** @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 * - `\"some value\"` -&gt; `\"some value\"`\n * - `{ label: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n * - `{ name: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n *\n * @since 6.2.0\n */\nexport type AutomaticTextExtraction =\n  | string\n  | { label: string }\n  | { name: 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\n/**\n * @since 6.3.0\n */\nexport interface Point {\n  x: number;\n  y: number;\n}\n\n/**\n * @since 6.3.0\n */\nexport interface MinMaxRange {\n  min: number;\n  max: number;\n}\n\n/**\n * @since 6.2.0\n */\nexport type OverridableStringUnion<\n  Defaults extends string,\n  Overrides extends Partial<Record<string, boolean>>,\n> =\n  | Exclude<Defaults, { [K in keyof Overrides]: K }[keyof Overrides]>\n  | {\n      [K in keyof Overrides]: Overrides[K] extends false ? never : K;\n    }[keyof Overrides];\n\n/**\n * @since 6.2.0\n */\nexport type IsEmptyObject<T> = keyof T extends never ? true : false;\n"],"names":[],"mappings":"AAkPA;;CAEC,GACD,WAAoE"}

package/dist/typography/Mark.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type ReactNode } from "react";
+import { type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
 import { type MarkClassNameOptions } from "./markStyles.js";
 /**
  * @since 6.0.0
@@ -6,6 +6,7 @@ import { type MarkClassNameOptions } from "./markStyles.js";
  * augmentation.
  */
 export interface MarkProps extends HTMLAttributes<HTMLElement>, MarkClassNameOptions {
+    ref?: Ref<HTMLElement>;
     children: ReactNode;
 }
 /**
@@ -28,4 +29,4 @@ export interface MarkProps extends HTMLAttributes<HTMLElement>, MarkClassNameOpt
  * @see {@link https://react-md.dev/components/mark | Mark Demos}
  * @since 6.0.0
  */
-export declare const Mark: import("react").ForwardRefExoticComponent<MarkProps & import("react").RefAttributes<HTMLElement>>;
+export declare function Mark(props: MarkProps): ReactElement;

package/dist/typography/Mark.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { mark } from "./markStyles.js";
 /**
  * The `Mark` component can be used in place of the `mark` HTMLElement with
@@ -20,8 +19,8 @@ import { mark } from "./markStyles.js";
  *
  * @see {@link https://react-md.dev/components/mark | Mark Demos}
  * @since 6.0.0
- */ export const Mark = /*#__PURE__*/ forwardRef(function Mark(props, ref) {
-    const { children, className, ...remaining } = props;
+ */ export function Mark(props) {
+    const { ref, children, className, ...remaining } = props;
     return /*#__PURE__*/ _jsx("mark", {
         ...remaining,
         ref: ref,
@@ -30,6 +29,6 @@ import { mark } from "./markStyles.js";
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=Mark.js.map

package/dist/typography/Mark.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/Mark.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type MarkClassNameOptions, mark } from \"./markStyles.js\";\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends MarkClassNameOptions for CSSProperties module\n * augmentation.\n */\nexport interface MarkProps\n  extends HTMLAttributes<HTMLElement>, MarkClassNameOptions {\n  children: ReactNode;\n}\n\n/**\n * The `Mark` component can be used in place of the `mark` HTMLElement with\n * some default styles.\n *\n * @example Simple Example\n * ```tsx\n * import { Mark } from \"@react-md/core/typography/Mark\";\n *\n * export function Example() {\n *   return (\n *     <>\n *       Some text <Mark>that has highlights</Mark> and some other text.\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/mark | Mark Demos}\n * @since 6.0.0\n */\nexport const Mark = forwardRef<HTMLElement, MarkProps>(\n  function Mark(props, ref) {\n    const { children, className, ...remaining } = props;\n    return (\n      <mark {...remaining} ref={ref} className={mark({ className })}>\n        {children}\n      </mark>\n    );\n  }\n);\n"],"names":["forwardRef","mark","Mark","props","ref","children","className","remaining"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAAoCC,IAAI,QAAQ,kBAAkB;AAYlE;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAC9C,qBACE,KAACF;QAAM,GAAGM,SAAS;QAAEH,KAAKA;QAAKE,WAAWL,KAAK;YAAEK;QAAU;kBACxDD;;AAGP,GACA"}
+{"version":3,"sources":["../../src/typography/Mark.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { type MarkClassNameOptions, mark } from \"./markStyles.js\";\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends MarkClassNameOptions for CSSProperties module\n * augmentation.\n */\nexport interface MarkProps\n  extends HTMLAttributes<HTMLElement>, MarkClassNameOptions {\n  ref?: Ref<HTMLElement>;\n  children: ReactNode;\n}\n\n/**\n * The `Mark` component can be used in place of the `mark` HTMLElement with\n * some default styles.\n *\n * @example Simple Example\n * ```tsx\n * import { Mark } from \"@react-md/core/typography/Mark\";\n *\n * export function Example() {\n *   return (\n *     <>\n *       Some text <Mark>that has highlights</Mark> and some other text.\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/mark | Mark Demos}\n * @since 6.0.0\n */\nexport function Mark(props: MarkProps): ReactElement {\n  const { ref, children, className, ...remaining } = props;\n\n  return (\n    <mark {...remaining} ref={ref} className={mark({ className })}>\n      {children}\n    </mark>\n  );\n}\n"],"names":["mark","Mark","props","ref","children","className","remaining"],"mappings":";AAOA,SAAoCA,IAAI,QAAQ,kBAAkB;AAalE;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASC,KAAKC,KAAgB;IACnC,MAAM,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAEnD,qBACE,KAACF;QAAM,GAAGM,SAAS;QAAEH,KAAKA;QAAKE,WAAWL,KAAK;YAAEK;QAAU;kBACxDD;;AAGP"}

package/dist/typography/SrOnly.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type CustomTypographyComponent, type TypographyHTMLElement } from "./Typography.js";
 export interface SrOnlyProps extends HTMLAttributes<TypographyHTMLElement> {
+    ref?: Ref<TypographyHTMLElement>;
     /** @defaultValue `"span"` */
     as?: CustomTypographyComponent;
     /**
@@ -43,4 +44,4 @@ export interface SrOnlyProps extends HTMLAttributes<TypographyHTMLElement> {
  *
  * @see {@link https://react-md.dev/components/sr-only | SrOnly Demos}
  */
-export declare const SrOnly: import("react").ForwardRefExoticComponent<SrOnlyProps & import("react").RefAttributes<TypographyHTMLElement>>;
+export declare function SrOnly(props: SrOnlyProps): ReactElement;

package/dist/typography/SrOnly.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cssUtils } from "../cssUtils.js";
 /**
  * The `SrOnly` component is used to render content that is only visible to
@@ -25,8 +24,8 @@ import { cssUtils } from "../cssUtils.js";
  * ```
  *
  * @see {@link https://react-md.dev/components/sr-only | SrOnly Demos}
- */ export const SrOnly = /*#__PURE__*/ forwardRef(function SrOnly(props, ref) {
-    const { as: AsComponent = "span", className, phoneOnly, focusable, children, tabIndex, ...remaining } = props;
+ */ export function SrOnly(props) {
+    const { ref, as: AsComponent = "span", className, phoneOnly, focusable, children, tabIndex, ...remaining } = props;
     // do some type-casting so ref works
     const Component = AsComponent;
     let srOnly = true;
@@ -45,6 +44,6 @@ import { cssUtils } from "../cssUtils.js";
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=SrOnly.js.map

package/dist/typography/SrOnly.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/SrOnly.tsx"],"sourcesContent":["import { type ElementType, type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type SrOnlyBehavior, cssUtils } from \"../cssUtils.js\";\nimport {\n  type CustomTypographyComponent,\n  type TypographyHTMLElement,\n} from \"./Typography.js\";\n\nexport interface SrOnlyProps extends HTMLAttributes<TypographyHTMLElement> {\n  /** @defaultValue `\"span\"` */\n  as?: CustomTypographyComponent;\n\n  /**\n   * Set this to `true` if the content should only be screen reader only text on\n   * phones. This is useful for only displaying an icon on phones when there is\n   * limited space and then displaying an icon and text on larger devices.\n   *\n   * @defaultValue `false`\n   */\n  phoneOnly?: boolean;\n\n  /**\n   * Set this to `true` if the element should be keyboard focusable.\n   *\n   * @defaultValue `false`\n   */\n  focusable?: boolean;\n}\n\n/**\n * The `SrOnly` component is used to render content that is only visible to\n * screen readers.\n *\n * @example Simple Example\n * ```tsx\n * import { SrOnly } from \"@react-md/core/typography/SrOnly\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <SrOnly>\n *         I am only visible to screen readers.\n *       </SrOnly>\n *       <SrOnly focusable>\n *         I am only visible to screen readers but can be focused.\n *       </SrOnly>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/sr-only | SrOnly Demos}\n */\nexport const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(\n  function SrOnly(props, ref) {\n    const {\n      as: AsComponent = \"span\",\n      className,\n      phoneOnly,\n      focusable,\n      children,\n      tabIndex,\n      ...remaining\n    } = props;\n\n    // do some type-casting so ref works\n    const Component = AsComponent as ElementType;\n\n    let srOnly: SrOnlyBehavior = true;\n    if (focusable) {\n      srOnly = \"focusable\";\n    } else if (phoneOnly) {\n      srOnly = \"phone\";\n    }\n\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        tabIndex={tabIndex ?? (focusable ? 0 : undefined)}\n        className={cssUtils({\n          srOnly,\n          className,\n        })}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","cssUtils","SrOnly","props","ref","as","AsComponent","className","phoneOnly","focusable","children","tabIndex","remaining","Component","srOnly","undefined"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAA8BC,QAAQ,QAAQ,iBAAiB;AA2B/D;;;;;;;;;;;;;;;;;;;;;;;;CAwBC,GACD,OAAO,MAAMC,uBAASF,WACpB,SAASE,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,IAAIC,cAAc,MAAM,EACxBC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACJ,GAAGT;IAEJ,oCAAoC;IACpC,MAAMU,YAAYP;IAElB,IAAIQ,SAAyB;IAC7B,IAAIL,WAAW;QACbK,SAAS;IACX,OAAO,IAAIN,WAAW;QACpBM,SAAS;IACX;IAEA,qBACE,KAACD;QACE,GAAGD,SAAS;QACbR,KAAKA;QACLO,UAAUA,YAAaF,CAAAA,YAAY,IAAIM,SAAQ;QAC/CR,WAAWN,SAAS;YAClBa;YACAP;QACF;kBAECG;;AAGP,GACA"}
+{"version":3,"sources":["../../src/typography/SrOnly.tsx"],"sourcesContent":["import {\n  type ElementType,\n  type HTMLAttributes,\n  type ReactElement,\n  type Ref,\n} from \"react\";\n\nimport { type SrOnlyBehavior, cssUtils } from \"../cssUtils.js\";\nimport {\n  type CustomTypographyComponent,\n  type TypographyHTMLElement,\n} from \"./Typography.js\";\n\nexport interface SrOnlyProps extends HTMLAttributes<TypographyHTMLElement> {\n  ref?: Ref<TypographyHTMLElement>;\n\n  /** @defaultValue `\"span\"` */\n  as?: CustomTypographyComponent;\n\n  /**\n   * Set this to `true` if the content should only be screen reader only text on\n   * phones. This is useful for only displaying an icon on phones when there is\n   * limited space and then displaying an icon and text on larger devices.\n   *\n   * @defaultValue `false`\n   */\n  phoneOnly?: boolean;\n\n  /**\n   * Set this to `true` if the element should be keyboard focusable.\n   *\n   * @defaultValue `false`\n   */\n  focusable?: boolean;\n}\n\n/**\n * The `SrOnly` component is used to render content that is only visible to\n * screen readers.\n *\n * @example Simple Example\n * ```tsx\n * import { SrOnly } from \"@react-md/core/typography/SrOnly\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <SrOnly>\n *         I am only visible to screen readers.\n *       </SrOnly>\n *       <SrOnly focusable>\n *         I am only visible to screen readers but can be focused.\n *       </SrOnly>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/sr-only | SrOnly Demos}\n */\nexport function SrOnly(props: SrOnlyProps): ReactElement {\n  const {\n    ref,\n    as: AsComponent = \"span\",\n    className,\n    phoneOnly,\n    focusable,\n    children,\n    tabIndex,\n    ...remaining\n  } = props;\n\n  // do some type-casting so ref works\n  const Component = AsComponent as ElementType;\n\n  let srOnly: SrOnlyBehavior = true;\n  if (focusable) {\n    srOnly = \"focusable\";\n  } else if (phoneOnly) {\n    srOnly = \"phone\";\n  }\n\n  return (\n    <Component\n      {...remaining}\n      ref={ref}\n      tabIndex={tabIndex ?? (focusable ? 0 : undefined)}\n      className={cssUtils({\n        srOnly,\n        className,\n      })}\n    >\n      {children}\n    </Component>\n  );\n}\n"],"names":["cssUtils","SrOnly","props","ref","as","AsComponent","className","phoneOnly","focusable","children","tabIndex","remaining","Component","srOnly","undefined"],"mappings":";AAOA,SAA8BA,QAAQ,QAAQ,iBAAiB;AA6B/D;;;;;;;;;;;;;;;;;;;;;;;;CAwBC,GACD,OAAO,SAASC,OAAOC,KAAkB;IACvC,MAAM,EACJC,GAAG,EACHC,IAAIC,cAAc,MAAM,EACxBC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACJ,GAAGT;IAEJ,oCAAoC;IACpC,MAAMU,YAAYP;IAElB,IAAIQ,SAAyB;IAC7B,IAAIL,WAAW;QACbK,SAAS;IACX,OAAO,IAAIN,WAAW;QACpBM,SAAS;IACX;IAEA,qBACE,KAACD;QACE,GAAGD,SAAS;QACbR,KAAKA;QACLO,UAAUA,YAAaF,CAAAA,YAAY,IAAIM,SAAQ;QAC/CR,WAAWN,SAAS;YAClBa;YACAP;QACF;kBAECG;;AAGP"}

package/dist/typography/TextContainer.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type TextContainerClassNameOptions } from "./textContainerStyles.js";
 /**
  * @since 6.0.0 Removed the `size` option since there is no longer a
@@ -7,6 +7,7 @@ import { type TextContainerClassNameOptions } from "./textContainerStyles.js";
  * behavior. Use the `textContainer` class name utility instead.
  */
 export interface TextContainerProps extends HTMLAttributes<HTMLDivElement>, TextContainerClassNameOptions {
+    ref?: Ref<HTMLDivElement>;
 }
 /**
  * This component should be used to render text based content with an
@@ -41,4 +42,4 @@ export interface TextContainerProps extends HTMLAttributes<HTMLDivElement>, Text
  * @since 6.0.0 Removed the `clone` prop and the children render function
  * behavior. Use the `textContainer` class name utility instead.
  */
-export declare const TextContainer: import("react").ForwardRefExoticComponent<TextContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function TextContainer(props: TextContainerProps): ReactElement;

package/dist/typography/TextContainer.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { textContainer } from "./textContainerStyles.js";
 /**
  * This component should be used to render text based content with an
@@ -33,8 +32,8 @@ import { textContainer } from "./textContainerStyles.js";
  * different line-length for mobile and desktop.
  * @since 6.0.0 Removed the `clone` prop and the children render function
  * behavior. Use the `textContainer` class name utility instead.
- */ export const TextContainer = /*#__PURE__*/ forwardRef(function TextContainer(props, ref) {
-    const { className, children, ...remaining } = props;
+ */ export function TextContainer(props) {
+    const { ref, className, children, ...remaining } = props;
     return /*#__PURE__*/ _jsx("div", {
         ...remaining,
         ref: ref,
@@ -43,6 +42,6 @@ import { textContainer } from "./textContainerStyles.js";
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=TextContainer.js.map

package/dist/typography/TextContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/TextContainer.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport {\n  type TextContainerClassNameOptions,\n  textContainer,\n} from \"./textContainerStyles.js\";\n\n/**\n * @since 6.0.0 Removed the `size` option since there is no longer a\n * different line-length for mobile and desktop.\n * @since 6.0.0 Removed the `clone` prop and the children render function\n * behavior. Use the `textContainer` class name utility instead.\n */\nexport interface TextContainerProps\n  extends HTMLAttributes<HTMLDivElement>, TextContainerClassNameOptions {}\n\n/**\n * This component should be used to render text based content with an\n * appropriate max line length to optimize legibility.\n *\n * @example Simple Example\n * ```tsx\n * import { TextContainer } from \"@react-md/core/typography/TextContainer\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n *\n * function Example() {\n *   return (\n *     <TextContainer>\n *       <Typography type=\"headline-1\">Heading</Typography>\n *       <Typography>\n *         Pretend this is a giant paragraph of text that wraps multiple lines.\n *       </Typography>\n *       <Typography>\n *         Pretend this is another giant paragraph of text that wraps multiple\n *         lines.\n *       </Typography>\n *     </TextContainer>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/text-container | TextContainer Demos}\n * @see {@link textContainer} If you only want to apply this class to an\n * element.\n * @since 6.0.0 Removed the `size` option since there is no longer a\n * different line-length for mobile and desktop.\n * @since 6.0.0 Removed the `clone` prop and the children render function\n * behavior. Use the `textContainer` class name utility instead.\n */\nexport const TextContainer = forwardRef<HTMLDivElement, TextContainerProps>(\n  function TextContainer(props, ref) {\n    const { className, children, ...remaining } = props;\n\n    return (\n      <div {...remaining} ref={ref} className={textContainer({ className })}>\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","textContainer","TextContainer","props","ref","className","children","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAEEC,aAAa,QACR,2BAA2B;AAWlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GACD,OAAO,MAAMC,8BAAgBF,WAC3B,SAASE,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAE9C,qBACE,KAACK;QAAK,GAAGD,SAAS;QAAEH,KAAKA;QAAKC,WAAWJ,cAAc;YAAEI;QAAU;kBAChEC;;AAGP,GACA"}
+{"version":3,"sources":["../../src/typography/TextContainer.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactElement, type Ref } from \"react\";\n\nimport {\n  type TextContainerClassNameOptions,\n  textContainer,\n} from \"./textContainerStyles.js\";\n\n/**\n * @since 6.0.0 Removed the `size` option since there is no longer a\n * different line-length for mobile and desktop.\n * @since 6.0.0 Removed the `clone` prop and the children render function\n * behavior. Use the `textContainer` class name utility instead.\n */\nexport interface TextContainerProps\n  extends HTMLAttributes<HTMLDivElement>, TextContainerClassNameOptions {\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * This component should be used to render text based content with an\n * appropriate max line length to optimize legibility.\n *\n * @example Simple Example\n * ```tsx\n * import { TextContainer } from \"@react-md/core/typography/TextContainer\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n *\n * function Example() {\n *   return (\n *     <TextContainer>\n *       <Typography type=\"headline-1\">Heading</Typography>\n *       <Typography>\n *         Pretend this is a giant paragraph of text that wraps multiple lines.\n *       </Typography>\n *       <Typography>\n *         Pretend this is another giant paragraph of text that wraps multiple\n *         lines.\n *       </Typography>\n *     </TextContainer>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/text-container | TextContainer Demos}\n * @see {@link textContainer} If you only want to apply this class to an\n * element.\n * @since 6.0.0 Removed the `size` option since there is no longer a\n * different line-length for mobile and desktop.\n * @since 6.0.0 Removed the `clone` prop and the children render function\n * behavior. Use the `textContainer` class name utility instead.\n */\nexport function TextContainer(props: TextContainerProps): ReactElement {\n  const { ref, className, children, ...remaining } = props;\n\n  return (\n    <div {...remaining} ref={ref} className={textContainer({ className })}>\n      {children}\n    </div>\n  );\n}\n"],"names":["textContainer","TextContainer","props","ref","className","children","remaining","div"],"mappings":";AAEA,SAEEA,aAAa,QACR,2BAA2B;AAalC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GACD,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EAAEC,GAAG,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAEnD,qBACE,KAACK;QAAK,GAAGD,SAAS;QAAEH,KAAKA;QAAKC,WAAWJ,cAAc;YAAEI;QAAU;kBAChEC;;AAGP"}

package/dist/typography/Typography.d.ts

@@ -1,4 +1,4 @@
-import { type ElementType, type HTMLAttributes } from "react";
+import { type ElementType, type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type TypographyClassNameOptions } from "./typographyStyles.js";
 /**
  * A union of the default supported elements that the `Typography` component can
@@ -18,6 +18,7 @@ export type CustomTypographyComponent = ElementType<HTMLAttributes<TypographyHTM
  * `typography` class name utility instead.
  */
 export interface TypographyProps extends HTMLAttributes<TypographyHTMLElement>, TypographyClassNameOptions {
+    ref?: Ref<TypographyHTMLElement>;
     /**
      * The component to render as when the children are not a render function. If
      * this prop is omitted, the component will be determined by the `type` prop
@@ -83,4 +84,4 @@ export interface TypographyProps extends HTMLAttributes<TypographyHTMLElement>,
  * @since 6.0.0 Removed the children render function behavior . Use the
  * `typography` class name utility instead.
  */
-export declare const Typography: import("react").ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<TypographyHTMLElement>>;
+export declare function Typography(props: TypographyProps): ReactElement;

package/dist/typography/Typography.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { typography } from "./typographyStyles.js";
 /** @internal */ function getComponent(as, type) {
     if (as) {
@@ -71,8 +70,8 @@ import { typography } from "./typographyStyles.js";
  * @see {@link https://react-md.dev/components/typography | Typography Demos}
  * @since 6.0.0 Removed the children render function behavior . Use the
  * `typography` class name utility instead.
- */ export const Typography = /*#__PURE__*/ forwardRef(function Typography(props, ref) {
-    const { as, type = "body-1", className, margin, fontStyle, fontWeight, textAlign, textColor, textDecoration, textTransform, textOverflow, children, ...remaining } = props;
+ */ export function Typography(props) {
+    const { ref, as, type = "body-1", className, margin, fontStyle, fontWeight, textAlign, textColor, textDecoration, textTransform, textOverflow, children, ...remaining } = props;
     const Component = getComponent(as, type);
     return /*#__PURE__*/ _jsx(Component, {
         ...remaining,
@@ -91,6 +90,6 @@ import { typography } from "./typographyStyles.js";
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=Typography.js.map

package/dist/typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/Typography.tsx"],"sourcesContent":["import {\n  type ElementType,\n  type HTMLAttributes,\n  type ReactElement,\n  forwardRef,\n} from \"react\";\n\nimport {\n  type TypographyClassNameOptions,\n  type TypographyType,\n  typography,\n} from \"./typographyStyles.js\";\n\n/**\n * A union of the default supported elements that the `Typography` component can\n * be rendered as. This is mostly used for adding the correct `HTMLAttributes`\n * and enabling the forward ref.\n *\n * @since 4.0.0\n */\nexport type TypographyHTMLElement =\n  | HTMLHeadingElement\n  | HTMLParagraphElement\n  | HTMLSpanElement\n  | HTMLDivElement\n  | HTMLAnchorElement\n  | HTMLBodyElement\n  | HTMLHtmlElement;\n\n/** @since 6.0.0 */\nexport type CustomTypographyComponent = ElementType<\n  HTMLAttributes<TypographyHTMLElement> & { className: string }\n>;\n\n/** @internal */\nfunction getComponent(\n  as: CustomTypographyComponent | undefined,\n  type: TypographyType\n): ElementType {\n  if (as) {\n    return as;\n  }\n\n  switch (type) {\n    case \"headline-1\":\n      return \"h1\";\n    case \"headline-2\":\n      return \"h2\";\n    case \"headline-3\":\n      return \"h3\";\n    case \"headline-4\":\n      return \"h4\";\n    case \"headline-5\":\n      return \"h5\";\n    case \"headline-6\":\n    case \"subtitle-1\":\n    case \"subtitle-2\":\n      return \"h6\";\n    case \"body-1\":\n    case \"body-2\":\n      return \"p\";\n    case \"caption\":\n      return \"caption\";\n    default:\n      return \"span\";\n  }\n}\n\n/**\n * @since 6.0.0 Renamed `component` to `as`.\n * @since 6.0.0 Removed the children render function behavior. Use the\n * `typography` class name utility instead.\n */\nexport interface TypographyProps\n  extends HTMLAttributes<TypographyHTMLElement>, TypographyClassNameOptions {\n  /**\n   * The component to render as when the children are not a render function. If\n   * this prop is omitted, the component will be determined by the `type` prop\n   * where:\n   *\n   * - `\"headline-1\" -> <h1>`\n   * - `\"headline-2\" -> <h2>`\n   * - `\"headline-3\" -> <h3>`\n   * - `\"headline-4\" -> <h4>`\n   * - `\"headline-5\" -> <h5>`\n   * - `\"headline-6\" -> <h6>`\n   * - `\"subtitle-1\" -> <h5>`\n   * - `\"subtitle-2\" -> <h6>`\n   * - `\"body-1\"     -> <p>`\n   * - `\"body-2\"     -> <p>`\n   * - `\"caption\"    -> <caption>`\n   * - `\"overline\"   -> <span>`\n   *\n   * @since 6.0.0 Renamed from `component`\n   */\n  as?: CustomTypographyComponent;\n}\n\n/**\n * Render text with one of the material design typography styles applied and\n * optional styles like font-weight, font-style, text color, etc.\n *\n * @example All Example\n * ```tsx\n * import { Typography } from \"@react-md/core/typography/Typography\":\n *\n * export function Example() {\n *   return (\n *    <>\n *      <Typography type=\"headline-1\">Headline 1</Typography>\n *      <Typography type=\"headline-2\">Headline 2</Typography>\n *      <Typography type=\"headline-3\">Headline 3</Typography>\n *      <Typography type=\"headline-4\">Headline 4</Typography>\n *      <Typography type=\"headline-5\">Headline 5</Typography>\n *      <Typography type=\"headline-6\">Headline 6</Typography>\n *      <Typography type=\"subtitle-1\">Subtitle 1</Typography>\n *      <Typography type=\"subtitle-2\">Subtitle 2</Typography>\n *      <Typography>\n *        A paragraph of text.\n *      </Typography>\n *      <Typography type=\"body-1\">\n *        A paragraph of text.\n *      </Typography>\n *      <Typography type=\"body-2\">\n *        Another paragraph of text.\n *      </Typography>\n *      <Typography type=\"caption\" component=\"h5\">\n *        Caption text\n *      </Typography>\n *      <Typography type=\"overline\" component=\"h5\">\n *        Overline text\n *      </Typography>\n *    </>\n *   ):\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/typography | Typography Demos}\n * @since 6.0.0 Removed the children render function behavior . Use the\n * `typography` class name utility instead.\n */\nexport const Typography = forwardRef<TypographyHTMLElement, TypographyProps>(\n  function Typography(props, ref): ReactElement {\n    const {\n      as,\n      type = \"body-1\",\n      className,\n      margin,\n      fontStyle,\n      fontWeight,\n      textAlign,\n      textColor,\n      textDecoration,\n      textTransform,\n      textOverflow,\n      children,\n      ...remaining\n    } = props;\n\n    const Component = getComponent(as, type);\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        className={typography({\n          type,\n          margin,\n          fontStyle,\n          fontWeight,\n          textAlign,\n          textColor,\n          textDecoration,\n          textTransform,\n          textOverflow,\n          className,\n        })}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","typography","getComponent","as","type","Typography","props","ref","className","margin","fontStyle","fontWeight","textAlign","textColor","textDecoration","textTransform","textOverflow","children","remaining","Component"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAEf,SAGEC,UAAU,QACL,wBAAwB;AAuB/B,cAAc,GACd,SAASC,aACPC,EAAyC,EACzCC,IAAoB;IAEpB,IAAID,IAAI;QACN,OAAOA;IACT;IAEA,OAAQC;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;QACL,KAAK;QACL,KAAK;YACH,OAAO;QACT,KAAK;QACL,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAO;IACX;AACF;AAgCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CC,GACD,OAAO,MAAMC,2BAAaL,WACxB,SAASK,WAAWC,KAAK,EAAEC,GAAG;IAC5B,MAAM,EACJJ,EAAE,EACFC,OAAO,QAAQ,EACfI,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,YAAY,EACZC,QAAQ,EACR,GAAGC,WACJ,GAAGZ;IAEJ,MAAMa,YAAYjB,aAAaC,IAAIC;IACnC,qBACE,KAACe;QACE,GAAGD,SAAS;QACbX,KAAKA;QACLC,WAAWP,WAAW;YACpBG;YACAK;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAR;QACF;kBAECS;;AAGP,GACA"}
+{"version":3,"sources":["../../src/typography/Typography.tsx"],"sourcesContent":["import {\n  type ElementType,\n  type HTMLAttributes,\n  type ReactElement,\n  type Ref,\n} from \"react\";\n\nimport {\n  type TypographyClassNameOptions,\n  type TypographyType,\n  typography,\n} from \"./typographyStyles.js\";\n\n/**\n * A union of the default supported elements that the `Typography` component can\n * be rendered as. This is mostly used for adding the correct `HTMLAttributes`\n * and enabling the forward ref.\n *\n * @since 4.0.0\n */\nexport type TypographyHTMLElement =\n  | HTMLHeadingElement\n  | HTMLParagraphElement\n  | HTMLSpanElement\n  | HTMLDivElement\n  | HTMLAnchorElement\n  | HTMLBodyElement\n  | HTMLHtmlElement;\n\n/** @since 6.0.0 */\nexport type CustomTypographyComponent = ElementType<\n  HTMLAttributes<TypographyHTMLElement> & { className: string }\n>;\n\n/** @internal */\nfunction getComponent(\n  as: CustomTypographyComponent | undefined,\n  type: TypographyType\n): ElementType {\n  if (as) {\n    return as;\n  }\n\n  switch (type) {\n    case \"headline-1\":\n      return \"h1\";\n    case \"headline-2\":\n      return \"h2\";\n    case \"headline-3\":\n      return \"h3\";\n    case \"headline-4\":\n      return \"h4\";\n    case \"headline-5\":\n      return \"h5\";\n    case \"headline-6\":\n    case \"subtitle-1\":\n    case \"subtitle-2\":\n      return \"h6\";\n    case \"body-1\":\n    case \"body-2\":\n      return \"p\";\n    case \"caption\":\n      return \"caption\";\n    default:\n      return \"span\";\n  }\n}\n\n/**\n * @since 6.0.0 Renamed `component` to `as`.\n * @since 6.0.0 Removed the children render function behavior. Use the\n * `typography` class name utility instead.\n */\nexport interface TypographyProps\n  extends HTMLAttributes<TypographyHTMLElement>, TypographyClassNameOptions {\n  ref?: Ref<TypographyHTMLElement>;\n\n  /**\n   * The component to render as when the children are not a render function. If\n   * this prop is omitted, the component will be determined by the `type` prop\n   * where:\n   *\n   * - `\"headline-1\" -> <h1>`\n   * - `\"headline-2\" -> <h2>`\n   * - `\"headline-3\" -> <h3>`\n   * - `\"headline-4\" -> <h4>`\n   * - `\"headline-5\" -> <h5>`\n   * - `\"headline-6\" -> <h6>`\n   * - `\"subtitle-1\" -> <h5>`\n   * - `\"subtitle-2\" -> <h6>`\n   * - `\"body-1\"     -> <p>`\n   * - `\"body-2\"     -> <p>`\n   * - `\"caption\"    -> <caption>`\n   * - `\"overline\"   -> <span>`\n   *\n   * @since 6.0.0 Renamed from `component`\n   */\n  as?: CustomTypographyComponent;\n}\n\n/**\n * Render text with one of the material design typography styles applied and\n * optional styles like font-weight, font-style, text color, etc.\n *\n * @example All Example\n * ```tsx\n * import { Typography } from \"@react-md/core/typography/Typography\":\n *\n * export function Example() {\n *   return (\n *    <>\n *      <Typography type=\"headline-1\">Headline 1</Typography>\n *      <Typography type=\"headline-2\">Headline 2</Typography>\n *      <Typography type=\"headline-3\">Headline 3</Typography>\n *      <Typography type=\"headline-4\">Headline 4</Typography>\n *      <Typography type=\"headline-5\">Headline 5</Typography>\n *      <Typography type=\"headline-6\">Headline 6</Typography>\n *      <Typography type=\"subtitle-1\">Subtitle 1</Typography>\n *      <Typography type=\"subtitle-2\">Subtitle 2</Typography>\n *      <Typography>\n *        A paragraph of text.\n *      </Typography>\n *      <Typography type=\"body-1\">\n *        A paragraph of text.\n *      </Typography>\n *      <Typography type=\"body-2\">\n *        Another paragraph of text.\n *      </Typography>\n *      <Typography type=\"caption\" component=\"h5\">\n *        Caption text\n *      </Typography>\n *      <Typography type=\"overline\" component=\"h5\">\n *        Overline text\n *      </Typography>\n *    </>\n *   ):\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/typography | Typography Demos}\n * @since 6.0.0 Removed the children render function behavior . Use the\n * `typography` class name utility instead.\n */\nexport function Typography(props: TypographyProps): ReactElement {\n  const {\n    ref,\n    as,\n    type = \"body-1\",\n    className,\n    margin,\n    fontStyle,\n    fontWeight,\n    textAlign,\n    textColor,\n    textDecoration,\n    textTransform,\n    textOverflow,\n    children,\n    ...remaining\n  } = props;\n\n  const Component = getComponent(as, type);\n  return (\n    <Component\n      {...remaining}\n      ref={ref}\n      className={typography({\n        type,\n        margin,\n        fontStyle,\n        fontWeight,\n        textAlign,\n        textColor,\n        textDecoration,\n        textTransform,\n        textOverflow,\n        className,\n      })}\n    >\n      {children}\n    </Component>\n  );\n}\n"],"names":["typography","getComponent","as","type","Typography","props","ref","className","margin","fontStyle","fontWeight","textAlign","textColor","textDecoration","textTransform","textOverflow","children","remaining","Component"],"mappings":";AAOA,SAGEA,UAAU,QACL,wBAAwB;AAuB/B,cAAc,GACd,SAASC,aACPC,EAAyC,EACzCC,IAAoB;IAEpB,IAAID,IAAI;QACN,OAAOA;IACT;IAEA,OAAQC;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;QACL,KAAK;QACL,KAAK;YACH,OAAO;QACT,KAAK;QACL,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAO;IACX;AACF;AAkCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CC,GACD,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EACJC,GAAG,EACHJ,EAAE,EACFC,OAAO,QAAQ,EACfI,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,YAAY,EACZC,QAAQ,EACR,GAAGC,WACJ,GAAGZ;IAEJ,MAAMa,YAAYjB,aAAaC,IAAIC;IACnC,qBACE,KAACe;QACE,GAAGD,SAAS;QACbX,KAAKA;QACLC,WAAWP,WAAW;YACpBG;YACAK;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAR;QACF;kBAECS;;AAGP"}

package/dist/useAsyncFunction.d.ts

@@ -1,4 +1,5 @@
-import { type NonNullRef, type UseStateSetter } from "./types.js";
+import { type RefObject } from "react";
+import { type UseStateSetter } from "./types.js";
 /**
  * @since 6.0.0
  */
@@ -39,7 +40,7 @@ export interface AsyncFunctionHookImplementation {
      * );
      * ```
      */
-    unmounted: NonNullRef<boolean>;
+    unmounted: RefObject<boolean>;
     setPending: UseStateSetter<boolean>;
     handleAsync: HandleAsyncFunction;
 }

package/dist/useAsyncFunction.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useAsyncFunction.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useState } from \"react\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type AsyncButton } from \"./button/AsyncButton.js\";\nimport { type NonNullRef, type UseStateSetter } from \"./types.js\";\nimport { useUnmounted } from \"./useUnmounted.js\";\n\n/**\n * @since 6.0.0\n */\nexport type AsyncFunction<Args extends unknown[]> = (\n  ...args: Args\n) => Promise<void>;\n\n/**\n * @since 6.0.0\n */\nexport type HandleAsyncFunction = <Args extends unknown[]>(\n  action: AsyncFunction<Args>\n) => AsyncFunction<Args>;\n\n/**\n * @since 6.0.0\n */\nexport interface AsyncFunctionHookOptions {\n  /** @defaultValue `false` */\n  disabled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AsyncFunctionHookImplementation {\n  pending: boolean;\n\n  /**\n   * This ref can be used to prevent setting state on an unmounted component.\n   * @example\n   * ```tsx\n   * const { handleAsync, pending, unmounted } = useAsyncFunction();\n   *\n   * return (\n   *   <Button\n   *     onClick={async () => {\n   *       await handleAsync(someAsyncTaskThatMightUnmountThisComponent);\n   *       if (!unmounted.current) {\n   *         // set some local state\n   *       }\n   *     }}\n   *  >\n   *    Button\n   *  </Button>\n   * );\n   * ```\n   */\n  unmounted: NonNullRef<boolean>;\n  setPending: UseStateSetter<boolean>;\n  handleAsync: HandleAsyncFunction;\n}\n\n/**\n * A simple utility hook for triggering a pending state while an async function\n * is running. This is really only useful if you aren't using something like\n * `react-query`, `@reduxjs/toolkit/query`, `@apollo/client`, etc for API calls\n * which have a built-in pending state for mutations.\n *\n * @see {@link AsyncButton}\n *\n * @example Confirmation Dialog with Overlay\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Dialog } from \"@react-md/core/dialog/Dialog\";\n * import { DialogContent } from \"@react-md/core/dialog/DialogContent\";\n * import { DialogFooter } from \"@react-md/core/dialog/DialogFooter\";\n * import { DialogHeader } from \"@react-md/core/dialog/DialogHeader\";\n * import { Form } from \"@react-md/core/form/Form\";\n * import { useAsyncFunction } from \"@react-md/core/useAsyncFunction\";\n * import CloseIcon from \"@react-md/material-icons/CloseIcon\";\n * import { type ReactElement, useId } from \"react\";\n *\n * interface ExampleProps {\n *   hide(); void;\n *   submit(): Promise<void>\n * }\n *\n * function Example({ hide, submit }: ExampleProps): ReactElement {\n *   const { handleAsync, pending } = useAsyncFunction();\n *   const formId = useId();\n *\n *   return (\n *     <>\n *       <DialogHeader>\n *         <DialogTitle>Some Title</DialogTitle>\n *         <Button aria-label=\"Close\" onClick={hide} disabled={pending}>\n *           <CloseIcon />\n *         </Button>\n *       </DialogHeader>\n *       <DialogContent>\n *         <Form\n *           id={formId}\n *           onReset={hide}\n *           onSubmit={handleAsync(submit)}\n *         >\n *           // pretend content\n *         </Form>\n *       </DialogContent>\n *       <DialogFooter>\n *         <Button\n *           type=\"reset\"\n *           form={formId}\n *           disabled={pending}\n *         >\n *           Cancel\n *         </Button>\n *         <Button\n *           type=\"submit\"\n *           form={formId}\n *           disabled={pending}\n *         >\n *           Confirm\n *         </Button>\n *       </DialogFooter>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useAsyncFunction(\n  options: AsyncFunctionHookOptions = {}\n): AsyncFunctionHookImplementation {\n  const { disabled } = options;\n\n  const [pending, setPending] = useState(false);\n  const unmounted = useUnmounted();\n\n  const handleAsync = useCallback<HandleAsyncFunction>(\n    (action) =>\n      async (...args) => {\n        if (pending || disabled) {\n          return;\n        }\n\n        setPending(true);\n        try {\n          await action(...args);\n        } finally {\n          if (!unmounted.current) {\n            setPending(false);\n          }\n        }\n      },\n    [disabled, pending, unmounted]\n  );\n\n  return {\n    pending,\n    unmounted,\n    setPending,\n    handleAsync,\n  };\n}\n"],"names":["useCallback","useState","useUnmounted","useAsyncFunction","options","disabled","pending","setPending","unmounted","handleAsync","action","args","current"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAK9C,SAASC,YAAY,QAAQ,oBAAoB;AAuDjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoEC,GACD,OAAO,SAASC,iBACdC,UAAoC,CAAC,CAAC;IAEtC,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,CAACE,SAASC,WAAW,GAAGN,SAAS;IACvC,MAAMO,YAAYN;IAElB,MAAMO,cAAcT,YAClB,CAACU,SACC,OAAO,GAAGC;YACR,IAAIL,WAAWD,UAAU;gBACvB;YACF;YAEAE,WAAW;YACX,IAAI;gBACF,MAAMG,UAAUC;YAClB,SAAU;gBACR,IAAI,CAACH,UAAUI,OAAO,EAAE;oBACtBL,WAAW;gBACb;YACF;QACF,GACF;QAACF;QAAUC;QAASE;KAAU;IAGhC,OAAO;QACLF;QACAE;QACAD;QACAE;IACF;AACF"}
+{"version":3,"sources":["../src/useAsyncFunction.ts"],"sourcesContent":["\"use client\";\n\nimport { type RefObject, useCallback, useState } from \"react\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type AsyncButton } from \"./button/AsyncButton.js\";\nimport { type UseStateSetter } from \"./types.js\";\nimport { useUnmounted } from \"./useUnmounted.js\";\n\n/**\n * @since 6.0.0\n */\nexport type AsyncFunction<Args extends unknown[]> = (\n  ...args: Args\n) => Promise<void>;\n\n/**\n * @since 6.0.0\n */\nexport type HandleAsyncFunction = <Args extends unknown[]>(\n  action: AsyncFunction<Args>\n) => AsyncFunction<Args>;\n\n/**\n * @since 6.0.0\n */\nexport interface AsyncFunctionHookOptions {\n  /** @defaultValue `false` */\n  disabled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AsyncFunctionHookImplementation {\n  pending: boolean;\n\n  /**\n   * This ref can be used to prevent setting state on an unmounted component.\n   * @example\n   * ```tsx\n   * const { handleAsync, pending, unmounted } = useAsyncFunction();\n   *\n   * return (\n   *   <Button\n   *     onClick={async () => {\n   *       await handleAsync(someAsyncTaskThatMightUnmountThisComponent);\n   *       if (!unmounted.current) {\n   *         // set some local state\n   *       }\n   *     }}\n   *  >\n   *    Button\n   *  </Button>\n   * );\n   * ```\n   */\n  unmounted: RefObject<boolean>;\n  setPending: UseStateSetter<boolean>;\n  handleAsync: HandleAsyncFunction;\n}\n\n/**\n * A simple utility hook for triggering a pending state while an async function\n * is running. This is really only useful if you aren't using something like\n * `react-query`, `@reduxjs/toolkit/query`, `@apollo/client`, etc for API calls\n * which have a built-in pending state for mutations.\n *\n * @see {@link AsyncButton}\n *\n * @example Confirmation Dialog with Overlay\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Dialog } from \"@react-md/core/dialog/Dialog\";\n * import { DialogContent } from \"@react-md/core/dialog/DialogContent\";\n * import { DialogFooter } from \"@react-md/core/dialog/DialogFooter\";\n * import { DialogHeader } from \"@react-md/core/dialog/DialogHeader\";\n * import { Form } from \"@react-md/core/form/Form\";\n * import { useAsyncFunction } from \"@react-md/core/useAsyncFunction\";\n * import CloseIcon from \"@react-md/material-icons/CloseIcon\";\n * import { type ReactElement, useId } from \"react\";\n *\n * interface ExampleProps {\n *   hide(); void;\n *   submit(): Promise<void>\n * }\n *\n * function Example({ hide, submit }: ExampleProps): ReactElement {\n *   const { handleAsync, pending } = useAsyncFunction();\n *   const formId = useId();\n *\n *   return (\n *     <>\n *       <DialogHeader>\n *         <DialogTitle>Some Title</DialogTitle>\n *         <Button aria-label=\"Close\" onClick={hide} disabled={pending}>\n *           <CloseIcon />\n *         </Button>\n *       </DialogHeader>\n *       <DialogContent>\n *         <Form\n *           id={formId}\n *           onReset={hide}\n *           onSubmit={handleAsync(submit)}\n *         >\n *           // pretend content\n *         </Form>\n *       </DialogContent>\n *       <DialogFooter>\n *         <Button\n *           type=\"reset\"\n *           form={formId}\n *           disabled={pending}\n *         >\n *           Cancel\n *         </Button>\n *         <Button\n *           type=\"submit\"\n *           form={formId}\n *           disabled={pending}\n *         >\n *           Confirm\n *         </Button>\n *       </DialogFooter>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useAsyncFunction(\n  options: AsyncFunctionHookOptions = {}\n): AsyncFunctionHookImplementation {\n  const { disabled } = options;\n\n  const [pending, setPending] = useState(false);\n  const unmounted = useUnmounted();\n\n  const handleAsync = useCallback<HandleAsyncFunction>(\n    (action) =>\n      async (...args) => {\n        if (pending || disabled) {\n          return;\n        }\n\n        setPending(true);\n        try {\n          await action(...args);\n        } finally {\n          if (!unmounted.current) {\n            setPending(false);\n          }\n        }\n      },\n    [disabled, pending, unmounted]\n  );\n\n  return {\n    pending,\n    unmounted,\n    setPending,\n    handleAsync,\n  };\n}\n"],"names":["useCallback","useState","useUnmounted","useAsyncFunction","options","disabled","pending","setPending","unmounted","handleAsync","action","args","current"],"mappings":"AAAA;AAEA,SAAyBA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAK9D,SAASC,YAAY,QAAQ,oBAAoB;AAuDjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoEC,GACD,OAAO,SAASC,iBACdC,UAAoC,CAAC,CAAC;IAEtC,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,CAACE,SAASC,WAAW,GAAGN,SAAS;IACvC,MAAMO,YAAYN;IAElB,MAAMO,cAAcT,YAClB,CAACU,SACC,OAAO,GAAGC;YACR,IAAIL,WAAWD,UAAU;gBACvB;YACF;YAEAE,WAAW;YACX,IAAI;gBACF,MAAMG,UAAUC;YAClB,SAAU;gBACR,IAAI,CAACH,UAAUI,OAAO,EAAE;oBACtBL,WAAW;gBACb;YACF;QACF,GACF;QAACF;QAAUC;QAASE;KAAU;IAGhC,OAAO;QACLF;QACAE;QACAD;QACAE;IACF;AACF"}

package/dist/useDebouncedFunction.js

@@ -79,7 +79,7 @@ import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
  * function at most once every X milliseconds).
  * @since 6.0.0
  */ export function useDebouncedFunction(func, wait) {
-    const timeout = useRef();
+    const timeout = useRef(undefined);
     const funcRef = useRef(func);
     useIsomorphicLayoutEffect(()=>{
         funcRef.current = func;

package/dist/useDebouncedFunction.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useDebouncedFunction.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef } from \"react\";\n\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 } from \"@react-md/core/form/TextField\";\n * import { useDebouncedFunction } from \"@react-md/core/useDebouncedFunction\";\n * import { useUnmounted } from \"@react-md/core/useUnmounted\";\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<NodeJS.Timeout>();\n  const funcRef = useRef(func);\n  useIsomorphicLayoutEffect(() => {\n    funcRef.current = func;\n  });\n\n  useEffect(() => {\n    return () => {\n      globalThis.clearTimeout(timeout.current);\n    };\n  }, []);\n\n  return useMemo(() => {\n    const debounced: DebouncedFunction<F> = (...args) => {\n      globalThis.clearTimeout(timeout.current);\n      timeout.current = globalThis.setTimeout(() => {\n        funcRef.current(...args);\n      }, wait);\n    };\n    debounced.cancel = () => {\n      globalThis.clearTimeout(timeout.current);\n    };\n\n    return debounced;\n  }, [wait]);\n}\n"],"names":["useEffect","useMemo","useRef","useIsomorphicLayoutEffect","useDebouncedFunction","func","wait","timeout","funcRef","current","globalThis","clearTimeout","debounced","args","setTimeout","cancel"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAGnD,SAASC,yBAAyB,QAAQ,iCAAiC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6EC,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,WAAWC,YAAY,CAACJ,QAAQE,OAAO;QACzC;IACF,GAAG,EAAE;IAEL,OAAOR,QAAQ;QACb,MAAMW,YAAkC,CAAC,GAAGC;YAC1CH,WAAWC,YAAY,CAACJ,QAAQE,OAAO;YACvCF,QAAQE,OAAO,GAAGC,WAAWI,UAAU,CAAC;gBACtCN,QAAQC,OAAO,IAAII;YACrB,GAAGP;QACL;QACAM,UAAUG,MAAM,GAAG;YACjBL,WAAWC,YAAY,CAACJ,QAAQE,OAAO;QACzC;QAEA,OAAOG;IACT,GAAG;QAACN;KAAK;AACX"}
+{"version":3,"sources":["../src/useDebouncedFunction.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef } from \"react\";\n\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 } from \"@react-md/core/form/TextField\";\n * import { useDebouncedFunction } from \"@react-md/core/useDebouncedFunction\";\n * import { useUnmounted } from \"@react-md/core/useUnmounted\";\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<NodeJS.Timeout>(undefined);\n  const funcRef = useRef(func);\n  useIsomorphicLayoutEffect(() => {\n    funcRef.current = func;\n  });\n\n  useEffect(() => {\n    return () => {\n      globalThis.clearTimeout(timeout.current);\n    };\n  }, []);\n\n  return useMemo(() => {\n    const debounced: DebouncedFunction<F> = (...args) => {\n      globalThis.clearTimeout(timeout.current);\n      timeout.current = globalThis.setTimeout(() => {\n        funcRef.current(...args);\n      }, wait);\n    };\n    debounced.cancel = () => {\n      globalThis.clearTimeout(timeout.current);\n    };\n\n    return debounced;\n  }, [wait]);\n}\n"],"names":["useEffect","useMemo","useRef","useIsomorphicLayoutEffect","useDebouncedFunction","func","wait","timeout","undefined","funcRef","current","globalThis","clearTimeout","debounced","args","setTimeout","cancel"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAGnD,SAASC,yBAAyB,QAAQ,iCAAiC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6EC,GACD,OAAO,SAASC,qBACdC,IAAO,EACPC,IAAY;IAEZ,MAAMC,UAAUL,OAAuBM;IACvC,MAAMC,UAAUP,OAAOG;IACvBF,0BAA0B;QACxBM,QAAQC,OAAO,GAAGL;IACpB;IAEAL,UAAU;QACR,OAAO;YACLW,WAAWC,YAAY,CAACL,QAAQG,OAAO;QACzC;IACF,GAAG,EAAE;IAEL,OAAOT,QAAQ;QACb,MAAMY,YAAkC,CAAC,GAAGC;YAC1CH,WAAWC,YAAY,CAACL,QAAQG,OAAO;YACvCH,QAAQG,OAAO,GAAGC,WAAWI,UAAU,CAAC;gBACtCN,QAAQC,OAAO,IAAII;YACrB,GAAGR;QACL;QACAO,UAAUG,MAAM,GAAG;YACjBL,WAAWC,YAAY,CAACL,QAAQG,OAAO;QACzC;QAEA,OAAOG;IACT,GAAG;QAACP;KAAK;AACX"}