@react-md/core 1.0.0-next.9 → 6.0.1

package/dist/tree/useTreeMovement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/useTreeMovement.ts"],"sourcesContent":["\"use client\";\nimport type {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from \"react\";\nimport { useRef } from \"react\";\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 * @remarks \\@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 * @remarks \\@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 * @remarks \\@since 6.0.0\n * @internal\n */\ninterface TreeMovementOptions<T extends TreeItemNode> extends TreeExpansion {\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 * @remarks \\@since 6.0.0\n * @internal\n */\ninterface TreeMovement\n  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 * @remarks \\@since 6.0.0\n * @internal\n */\nexport function useTreeMovement<T extends TreeItemNode>(\n  options: TreeMovementOptions<T>\n): TreeMovement {\n  const {\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    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 end */\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) {\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","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;AAMA,SAASA,MAAM,QAAQ,QAAQ;AAE/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,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,IAAI,EACJC,WAAW,EACXC,WAAW,EACXC,gBAAgB,EAChBC,uBAAuB,EACvBC,uBAAuB,EACxB,GAAGT;IAEJ,MAAMU,iBAAiBzB,OAA+B;QACpD0B,YAAY,CAAC;QACbC,eAAe,CAAC;QAChBC,eAAe,CAAC;QAChBC,eAAe,CAAC;IAClB;IACA,MAAMC,WAAW7B,4BAA4B;QAC3Ce;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,MAAM9B,OAAOe,IAAI,CAACmB,OAAO;YAEzB,mBAAmB,GACnB,IAAI,CAAClC,MAAM;gBACT;YACF;YACA,iBAAiB,GAEjB,MAAMmC,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,IAAIlC,KAAKwC,QAAQ,EAAE;wBACxB,kEAAkE;wBAClE,MAAMA,WAAWf,aAAa,CAACzB,KAAKwC,QAAQ,CAAC;wBAC7C,MAAMC,aAAarC,oBAAoByB,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,aAAarC,oBAAoByB,MAAMa,aAAa;4BAC1D,MAAMC,QAAQ7C,sBAAsB;gCAClCiD,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,CAACnD,KAAKwC,QAAQ;wBAClD,IAAIU,SAAS;4BACX,MAAME,gBAAgB;mCAAIF;6BAAQ,CAAC1C,MAAM,CACvC,CAAC0B,SAAWZ,UAAU,CAACY,OAAO;4BAEhC,IAAIkB,cAAcC,MAAM,EAAE;gCACxBjC,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,sBAAsBxD;QACtByD,wBAAuBlD,OAAO;YAC5B,MAAM,EAAE8B,UAAU,EAAE,GAAG9B;YACvB,MAAM,EAAEa,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} 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  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\n  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    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    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) {\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","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/tree/useTreeSelection.d.ts

@@ -1,7 +1,7 @@
-import type { UseStateSetter } from "../types.js";
-import type { TreeItemDefaultIds, TreeItemIdSet } from "./types.js";
+import { type UseStateSetter } from "../types.js";
+import { type TreeDefaultIds, type TreeItemIdSet } from "./types.js";
 /**
- * @remarks \@since 6.0.0 Renamed from `TreeItemSelection` and uses a Set
+ * @since 6.0.0 Renamed from `TreeItemSelection` and uses a Set
  * instead of a list to increase performance. Also renamed `onItemSelect` to
  * `toggleTreeItemSelection` and `onMultiItemSelect` to
  * `selectMultipleTreeItems`.
@@ -10,11 +10,12 @@ export interface TreeSelection {
     /** @defaultValue `false` */
     multiSelect?: boolean;
     selectedIds: ReadonlySet<string>;
-    toggleTreeItemSelection(itemId: string): void;
+    toggleTreeItemSelection: (itemId: string) => void;
     selectMultipleTreeItems: UseStateSetter<TreeItemIdSet>;
 }
 /**
- * @remarks \@since 6.0.0 Renamed from `useTreeItemSelection` and uses a Set
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
+ * @since 6.0.0 Renamed from `useTreeItemSelection` and uses a Set
  * instead of a list to increase performance.
  */
-export declare function useTreeSelection(defaultSelectedIds?: TreeItemDefaultIds, multiSelect?: boolean): Required<TreeSelection>;
+export declare function useTreeSelection(defaultSelectedIds?: TreeDefaultIds, multiSelect?: boolean): Required<TreeSelection>;

package/dist/tree/useTreeSelection.js

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

package/dist/tree/useTreeSelection.js.map

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

package/dist/tree/utils.d.ts

@@ -1,4 +1,4 @@
-import type { TreeItemNode, TreeData, DefaultTreeItemNode } from "./types.js";
+import { type DefaultTreeItemNode, type TreeData, type TreeItemNode } from "./types.js";
 /**
  * This will get all the items from the provided itemId up to the root of the
  * tree that can be used for drag and drop behavior or building a breadcrumb
@@ -8,7 +8,7 @@ import type { TreeItemNode, TreeData, DefaultTreeItemNode } from "./types.js";
  * @param itemId - The item id to start the search at.
  * @returns an ordered list of the current item followed by all the direct
  * parents of that item.
- * @remarks \@since 6.0.0 Renamed from `getItemsFrom` to `getTreeItemsFrom`.
+ * @since 6.0.0 Renamed from `getItemsFrom` to `getTreeItemsFrom`.
  */
 export declare function getTreeItemsFrom<T extends TreeItemNode = DefaultTreeItemNode>(data: TreeData<T>, itemId: string | null): readonly T[];
 /**
@@ -24,6 +24,6 @@ export declare function getTreeItemsFrom<T extends TreeItemNode = DefaultTreeIte
  * recursive param is enabled, the list will be ordered so that the children of
  * a item will appear before the next item at the same level. So you either need
  * to sort by `parentId` or something else if you want a specific order.
- * @remarks \@since 6.0.0 Renamed from `getChildItems` to `getChildTreeItems`.
+ * @since 6.0.0 Renamed from `getChildItems` to `getChildTreeItems`.
  */
 export declare function getChildTreeItems<T extends TreeItemNode = DefaultTreeItemNode>(data: TreeData<T> | readonly T[], parentId: string | null, recursive?: boolean): readonly T[];

package/dist/tree/utils.js

@@ -7,7 +7,7 @@
  * @param itemId - The item id to start the search at.
  * @returns an ordered list of the current item followed by all the direct
  * parents of that item.
- * @remarks \@since 6.0.0 Renamed from `getItemsFrom` to `getTreeItemsFrom`.
+ * @since 6.0.0 Renamed from `getItemsFrom` to `getTreeItemsFrom`.
  */ export function getTreeItemsFrom(data, itemId) {
     const items = [];
     let currentId = itemId;
@@ -33,7 +33,7 @@
  * recursive param is enabled, the list will be ordered so that the children of
  * a item will appear before the next item at the same level. So you either need
  * to sort by `parentId` or something else if you want a specific order.
- * @remarks \@since 6.0.0 Renamed from `getChildItems` to `getChildTreeItems`.
+ * @since 6.0.0 Renamed from `getChildItems` to `getChildTreeItems`.
  */ export function getChildTreeItems(data, parentId, recursive = false) {
     const items = Array.isArray(data) ? data : Object.values(data);
     return items.reduce((list, item)=>{

package/dist/tree/utils.js.map

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

package/dist/types.d.ts

@@ -3,7 +3,7 @@ import type { Dispatch, ReactElement, Ref, SetStateAction } from "react";
  * A helper type that allows an optional `ref` to also be applied with a props
  * object even though a `ref` isn't a real prop.
  */
-export type PropsWithRef<Props extends {}, Element extends HTMLElement> = Props & {
+export type PropsWithRef<Props extends object, Element extends HTMLElement> = Props & {
     /**
      * An optional ref that can be applied.
      */
@@ -13,7 +13,7 @@ export type PropsWithRef<Props extends {}, Element extends HTMLElement> = Props
  * A simple type that can be used for different components that clone a
  * `className` into a child component.
  */
-export type ClassNameCloneableChild<T = {}> = ReactElement<T & {
+export type ClassNameCloneableChild<T = object> = ReactElement<T & {
     className?: string;
 }>;
 /**
@@ -34,11 +34,10 @@ export interface LabelA11y {
  * A small accessibility helper to ensure that either `aria-label` or
  * `aria-labelledby` have been provided to a component.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```ts
  * import type { HTMLAttributes, ReactElement } from "react";
- * import type { LabelRequiredForA11y } from "@react-md/core";
+ * import type { LabelRequiredForA11y } from "@react-md/core/types";
  *
  * type Props = LabelRequiredForA11y<HTMLAttributes<HTMLDivElement>>;
  *
@@ -54,26 +53,25 @@ export interface LabelA11y {
  */
 export type LabelRequiredForA11y<Props extends LabelA11y> = RequireAtLeastOne<Props, keyof LabelA11y>;
 /**
- * @remarks \@since 5.0.0
+ * @since 5.0.0
  * @internal
  */
 export interface NonNullRef<T> {
     readonly current: T;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export interface NonNullMutableRef<T> {
     current: T;
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type HtmlTagName = keyof JSX.IntrinsicElements;
 /**
  * A function to get a string from a generic item.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```ts
  * interface Item {
  *   name: string;
@@ -83,16 +81,16 @@ export type HtmlTagName = keyof JSX.IntrinsicElements;
  *
  * const extractor: TextExtractor<Item> = (item) => item.name;
  * ```
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type TextExtractor<T> = (item: T) => string;
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export type UseStateSetter<T> = Dispatch<SetStateAction<T>>;
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export type UseStateInitializer<T> = T | (() => T);
@@ -111,7 +109,7 @@ export type UseStateInitializer<T> = T | (() => T);
  * //   setRenderAsSheet: UseStateSetter<RenderMenuAsSheet>;
  * // }
  * ```
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export type UseStateObject<Name extends string, Value> = {
@@ -134,22 +132,36 @@ export type UseStateObject<Name extends string, Value> = {
  * // }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export type RenameKeysWithPrefix<T, Prefix extends string> = {
     [Key in keyof T & string as `${Prefix}${Capitalize<Key>}`]: T[Key];
 };
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type CssPosition = "fixed" | "sticky" | "static";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
+ */
+export type AnyFunction = (...args: any[]) => any;
+/**
+ * @since 6.0.0
+ */
+export type CancelableFunction<F extends AnyFunction> = F & {
+    cancel: () => void;
+};
+/**
+ * @since 6.0.0
+ */
+export type DebouncedFunction<F extends AnyFunction> = CancelableFunction<(...args: Parameters<F>) => void>;
+/**
+ * @since 6.0.0
  */
-export type AnyFunction = (...args: any[]) => any | void;
+export type ThrottledFunction<F extends AnyFunction> = CancelableFunction<(...args: Parameters<F>) => ReturnType<F>>;
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ElementSize {
     height: number;

package/dist/types.js

@@ -1,5 +1,5 @@
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export { };
 
 //# sourceMappingURL=types.js.map

package/dist/types.js.map

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

package/dist/typography/HighlightText.d.ts

@@ -0,0 +1,106 @@
+import { type ComponentType, type ReactElement, type ReactNode } from "react";
+/**
+ * @since 6.0.0
+ */
+export interface HighlightTextMatch {
+    /**
+     * The cleaned query that has diacritics, leading whitespace, and trailing
+     * whitespace removed.
+     */
+    query: string;
+    /**
+     * The raw query string that was provided.
+     */
+    rawQuery: string;
+    /**
+     * The full untouched text content for the HighlightText component.
+     */
+    rawText: string;
+    /**
+     * The current index in the {@link rawText} that is being matched against.
+     */
+    index: number;
+    /**
+     * The last index the query has been matched.
+     */
+    lastIndex: number;
+}
+/**
+ * @since 6.0.0
+ */
+export interface HighlightTextComponentProps {
+    /** {@inheritDoc HighlightTextMatch} */
+    match: HighlightTextMatch;
+    /**
+     * The matched content.
+     */
+    children: string;
+}
+/**
+ * @since 6.0.0
+ */
+export type HighlightTextComponent = ComponentType<HighlightTextComponentProps>;
+/**
+ * @since 6.0.0
+ */
+export interface HighlightTextProps {
+    /**
+     * This prop can be used to provide a custom highlight behavior. It will be
+     * provided the {@link HighlightTextComponentProps}
+     *
+     * @defaultValue `HighlightTextMark`
+     */
+    highlight?: HighlightTextComponent;
+    /**
+     * The query text to highlight in the children. When this is an empty string
+     * or whitespace only, nothing will be highlighted.
+     */
+    query: string;
+    /**
+     * The content to highlight based on the query text where highlighting only
+     * works for text children. The component will attempt to find all child text
+     * using the `React.Children` API, but might be inconsistent.
+     */
+    children: ReactNode;
+    /**
+     * Set to `true` if only the first match should be highlighted instead of all
+     * occurrences.
+     *
+     * @defaultValue `false`
+     */
+    firstMatchOnly?: boolean;
+}
+/**
+ * The `HighlightText` component can be used to highlight text matching the
+ * provided query ignoring case.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { HighlightText } from "@react-md/core/typography/HighlightText";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { type ReactElement } from "react";
+ *
+ * export default function SimpleExample(): ReactElement {
+ *   return (
+ *     <Typography>
+ *       <HighlightText query="lorem ipsum">
+ *         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget metus
+ *         ut mi mattis dapibus. Praesent interdum sapien ut posuere convallis.
+ *         Donec et tristique ex. Aliquam erat volutpat. Donec sit amet dui
+ *         egestas, tempus quam id, hendrerit risus. Nullam tincidunt quam ut dui
+ *         aliquet ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing
+ *         elit. Sed rhoncus, purus vitae tincidunt placerat, quam diam lobortis
+ *         magna, et aliquam ante diam id nunc. Cras blandit leo eu nisi
+ *         elementum, nec gravida ligula pharetra. Etiam molestie luctus orci,
+ *         vel hendrerit lacus eleifend ut. Nullam placerat dolor ac mi congue,
+ *         non auctor metus consectetur. Ut pretium mollis vulputate.
+ *       </HighlightText>
+ *     </Typography>
+ *   );
+ * }
+ *
+ * ```
+ * @see {@link https://next.react-md.dev/components/highlight-text | HighlightText Demos}
+ * @since 6.0.0
+ */
+export declare function HighlightText(props: Readonly<HighlightTextProps>): ReactElement;

package/dist/typography/HighlightText.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Children, useMemo } from "react";
+import { remove as removeAccents } from "remove-accents";
+import { HighlightTextMark } from "./HighlightTextMark.js";
+// https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions#Using_special_characters
+const SPECIAL_CHARACTERS_REGEXP = /[.*+?^${}()|[\]\\]/g;
+/**
+ * The `HighlightText` component can be used to highlight text matching the
+ * provided query ignoring case.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { HighlightText } from "@react-md/core/typography/HighlightText";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { type ReactElement } from "react";
+ *
+ * export default function SimpleExample(): ReactElement {
+ *   return (
+ *     <Typography>
+ *       <HighlightText query="lorem ipsum">
+ *         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget metus
+ *         ut mi mattis dapibus. Praesent interdum sapien ut posuere convallis.
+ *         Donec et tristique ex. Aliquam erat volutpat. Donec sit amet dui
+ *         egestas, tempus quam id, hendrerit risus. Nullam tincidunt quam ut dui
+ *         aliquet ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing
+ *         elit. Sed rhoncus, purus vitae tincidunt placerat, quam diam lobortis
+ *         magna, et aliquam ante diam id nunc. Cras blandit leo eu nisi
+ *         elementum, nec gravida ligula pharetra. Etiam molestie luctus orci,
+ *         vel hendrerit lacus eleifend ut. Nullam placerat dolor ac mi congue,
+ *         non auctor metus consectetur. Ut pretium mollis vulputate.
+ *       </HighlightText>
+ *     </Typography>
+ *   );
+ * }
+ *
+ * ```
+ * @see {@link https://next.react-md.dev/components/highlight-text | HighlightText Demos}
+ * @since 6.0.0
+ */ export function HighlightText(props) {
+    const { query, children, highlight: Highlight = HighlightTextMark, firstMatchOnly } = props;
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: useMemo(()=>Children.map(children, (child)=>{
+                if (!query || !child || typeof child !== "string") {
+                    return child;
+                }
+                const cleanQuery = removeAccents(query).trim();
+                if (!cleanQuery) {
+                    return /*#__PURE__*/ _jsx(_Fragment, {
+                        children: child
+                    });
+                }
+                const parts = [];
+                const text = removeAccents(child).trim();
+                const regex = new RegExp("(" + cleanQuery.replace(SPECIAL_CHARACTERS_REGEXP, "\\$&") + ")", "gi");
+                let match;
+                let lastIndex = 0;
+                while((match = regex.exec(text)) !== null){
+                    const { index } = match;
+                    if (index > lastIndex) {
+                        parts.push(child.slice(lastIndex, index));
+                    }
+                    ({ lastIndex } = regex);
+                    parts.push(/*#__PURE__*/ _jsx(Highlight, {
+                        match: {
+                            index,
+                            lastIndex,
+                            query: cleanQuery,
+                            rawQuery: query,
+                            rawText: child
+                        },
+                        children: child.slice(index, lastIndex)
+                    }, index));
+                    if (firstMatchOnly) {
+                        break;
+                    }
+                }
+                if (lastIndex < child.length) {
+                    parts.push(child.slice(lastIndex));
+                }
+                return parts;
+            }), [
+            Highlight,
+            children,
+            firstMatchOnly,
+            query
+        ])
+    });
+}
+
+//# sourceMappingURL=HighlightText.js.map

package/dist/typography/HighlightText.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/typography/HighlightText.tsx"],"sourcesContent":["import {\n  Children,\n  type ComponentType,\n  type ReactElement,\n  type ReactNode,\n  useMemo,\n} from \"react\";\nimport { remove as removeAccents } from \"remove-accents\";\n\nimport { HighlightTextMark } from \"./HighlightTextMark.js\";\n\n// https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions#Using_special_characters\nconst SPECIAL_CHARACTERS_REGEXP = /[.*+?^${}()|[\\]\\\\]/g;\n\n/**\n * @since 6.0.0\n */\nexport interface HighlightTextMatch {\n  /**\n   * The cleaned query that has diacritics, leading whitespace, and trailing\n   * whitespace removed.\n   */\n  query: string;\n\n  /**\n   * The raw query string that was provided.\n   */\n  rawQuery: string;\n\n  /**\n   * The full untouched text content for the HighlightText component.\n   */\n  rawText: string;\n\n  /**\n   * The current index in the {@link rawText} that is being matched against.\n   */\n  index: number;\n\n  /**\n   * The last index the query has been matched.\n   */\n  lastIndex: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface HighlightTextComponentProps {\n  /** {@inheritDoc HighlightTextMatch} */\n  match: HighlightTextMatch;\n\n  /**\n   * The matched content.\n   */\n  children: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport type HighlightTextComponent = ComponentType<HighlightTextComponentProps>;\n\n/**\n * @since 6.0.0\n */\nexport interface HighlightTextProps {\n  /**\n   * This prop can be used to provide a custom highlight behavior. It will be\n   * provided the {@link HighlightTextComponentProps}\n   *\n   * @defaultValue `HighlightTextMark`\n   */\n  highlight?: HighlightTextComponent;\n\n  /**\n   * The query text to highlight in the children. When this is an empty string\n   * or whitespace only, nothing will be highlighted.\n   */\n  query: string;\n\n  /**\n   * The content to highlight based on the query text where highlighting only\n   * works for text children. The component will attempt to find all child text\n   * using the `React.Children` API, but might be inconsistent.\n   */\n  children: ReactNode;\n\n  /**\n   * Set to `true` if only the first match should be highlighted instead of all\n   * occurrences.\n   *\n   * @defaultValue `false`\n   */\n  firstMatchOnly?: boolean;\n}\n\n/**\n * The `HighlightText` component can be used to highlight text matching the\n * provided query ignoring case.\n *\n * @example Simple Example\n * ```tsx\n * import { HighlightText } from \"@react-md/core/typography/HighlightText\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import { type ReactElement } from \"react\";\n *\n * export default function SimpleExample(): ReactElement {\n *   return (\n *     <Typography>\n *       <HighlightText query=\"lorem ipsum\">\n *         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget metus\n *         ut mi mattis dapibus. Praesent interdum sapien ut posuere convallis.\n *         Donec et tristique ex. Aliquam erat volutpat. Donec sit amet dui\n *         egestas, tempus quam id, hendrerit risus. Nullam tincidunt quam ut dui\n *         aliquet ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing\n *         elit. Sed rhoncus, purus vitae tincidunt placerat, quam diam lobortis\n *         magna, et aliquam ante diam id nunc. Cras blandit leo eu nisi\n *         elementum, nec gravida ligula pharetra. Etiam molestie luctus orci,\n *         vel hendrerit lacus eleifend ut. Nullam placerat dolor ac mi congue,\n *         non auctor metus consectetur. Ut pretium mollis vulputate.\n *       </HighlightText>\n *     </Typography>\n *   );\n * }\n *\n * ```\n * @see {@link https://next.react-md.dev/components/highlight-text | HighlightText Demos}\n * @since 6.0.0\n */\nexport function HighlightText(\n  props: Readonly<HighlightTextProps>\n): ReactElement {\n  const {\n    query,\n    children,\n    highlight: Highlight = HighlightTextMark,\n    firstMatchOnly,\n  } = props;\n\n  return (\n    <>\n      {useMemo<ReactNode>(\n        () =>\n          Children.map(children, (child) => {\n            if (!query || !child || typeof child !== \"string\") {\n              return child;\n            }\n\n            const cleanQuery = removeAccents(query).trim();\n            if (!cleanQuery) {\n              return <>{child}</>;\n            }\n\n            const parts: ReactNode[] = [];\n            const text = removeAccents(child).trim();\n            const regex = new RegExp(\n              \"(\" + cleanQuery.replace(SPECIAL_CHARACTERS_REGEXP, \"\\\\$&\") + \")\",\n              \"gi\"\n            );\n\n            let match: RegExpExecArray | null;\n            let lastIndex = 0;\n            while ((match = regex.exec(text)) !== null) {\n              const { index } = match;\n              if (index > lastIndex) {\n                parts.push(child.slice(lastIndex, index));\n              }\n\n              ({ lastIndex } = regex);\n              parts.push(\n                <Highlight\n                  key={index}\n                  match={{\n                    index,\n                    lastIndex,\n                    query: cleanQuery,\n                    rawQuery: query,\n                    rawText: child,\n                  }}\n                >\n                  {child.slice(index, lastIndex)}\n                </Highlight>\n              );\n\n              if (firstMatchOnly) {\n                break;\n              }\n            }\n\n            if (lastIndex < child.length) {\n              parts.push(child.slice(lastIndex));\n            }\n\n            return parts;\n          }),\n        [Highlight, children, firstMatchOnly, query]\n      )}\n    </>\n  );\n}\n"],"names":["Children","useMemo","remove","removeAccents","HighlightTextMark","SPECIAL_CHARACTERS_REGEXP","HighlightText","props","query","children","highlight","Highlight","firstMatchOnly","map","child","cleanQuery","trim","parts","text","regex","RegExp","replace","match","lastIndex","exec","index","push","slice","rawQuery","rawText","length"],"mappings":";AAAA,SACEA,QAAQ,EAIRC,OAAO,QACF,QAAQ;AACf,SAASC,UAAUC,aAAa,QAAQ,iBAAiB;AAEzD,SAASC,iBAAiB,QAAQ,yBAAyB;AAE3D,0GAA0G;AAC1G,MAAMC,4BAA4B;AAqFlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GACD,OAAO,SAASC,cACdC,KAAmC;IAEnC,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,WAAWC,YAAYP,iBAAiB,EACxCQ,cAAc,EACf,GAAGL;IAEJ,qBACE;kBACGN,QACC,IACED,SAASa,GAAG,CAACJ,UAAU,CAACK;gBACtB,IAAI,CAACN,SAAS,CAACM,SAAS,OAAOA,UAAU,UAAU;oBACjD,OAAOA;gBACT;gBAEA,MAAMC,aAAaZ,cAAcK,OAAOQ,IAAI;gBAC5C,IAAI,CAACD,YAAY;oBACf,qBAAO;kCAAGD;;gBACZ;gBAEA,MAAMG,QAAqB,EAAE;gBAC7B,MAAMC,OAAOf,cAAcW,OAAOE,IAAI;gBACtC,MAAMG,QAAQ,IAAIC,OAChB,MAAML,WAAWM,OAAO,CAAChB,2BAA2B,UAAU,KAC9D;gBAGF,IAAIiB;gBACJ,IAAIC,YAAY;gBAChB,MAAO,AAACD,CAAAA,QAAQH,MAAMK,IAAI,CAACN,KAAI,MAAO,KAAM;oBAC1C,MAAM,EAAEO,KAAK,EAAE,GAAGH;oBAClB,IAAIG,QAAQF,WAAW;wBACrBN,MAAMS,IAAI,CAACZ,MAAMa,KAAK,CAACJ,WAAWE;oBACpC;oBAEC,CAAA,EAAEF,SAAS,EAAE,GAAGJ,KAAI;oBACrBF,MAAMS,IAAI,eACR,KAACf;wBAECW,OAAO;4BACLG;4BACAF;4BACAf,OAAOO;4BACPa,UAAUpB;4BACVqB,SAASf;wBACX;kCAECA,MAAMa,KAAK,CAACF,OAAOF;uBATfE;oBAaT,IAAIb,gBAAgB;wBAClB;oBACF;gBACF;gBAEA,IAAIW,YAAYT,MAAMgB,MAAM,EAAE;oBAC5Bb,MAAMS,IAAI,CAACZ,MAAMa,KAAK,CAACJ;gBACzB;gBAEA,OAAON;YACT,IACF;YAACN;YAAWF;YAAUG;YAAgBJ;SAAM;;AAIpD"}

package/dist/typography/HighlightTextMark.d.ts

@@ -0,0 +1,16 @@
+import { type ReactElement } from "react";
+import { type HighlightTextComponentProps } from "./HighlightText.js";
+import { type MarkProps } from "./Mark.js";
+/**
+ * @since 6.0.0
+ */
+export interface HighlightTextMarkProps extends HighlightTextComponentProps, Omit<MarkProps, "children"> {
+}
+/**
+ * This is the default implementation for the `HighlightText` component that
+ * just omits the `match` prop from {@link HighlightTextComponentProps} and
+ * passes the rest to the {@link Mark}.
+ *
+ * @since 6.0.0
+ */
+export declare function HighlightTextMark(props: Readonly<HighlightTextMarkProps>): ReactElement;

package/dist/typography/HighlightTextMark.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Mark } from "./Mark.js";
+/**
+ * This is the default implementation for the `HighlightText` component that
+ * just omits the `match` prop from {@link HighlightTextComponentProps} and
+ * passes the rest to the {@link Mark}.
+ *
+ * @since 6.0.0
+ */ export function HighlightTextMark(props) {
+    const { match: _match, ...remaining } = props;
+    return /*#__PURE__*/ _jsx(Mark, {
+        ...remaining
+    });
+}
+
+//# sourceMappingURL=HighlightTextMark.js.map

package/dist/typography/HighlightTextMark.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/typography/HighlightTextMark.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\n\nimport { type HighlightTextComponentProps } from \"./HighlightText.js\";\nimport { Mark, type MarkProps } from \"./Mark.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface HighlightTextMarkProps\n  extends HighlightTextComponentProps,\n    Omit<MarkProps, \"children\"> {}\n\n/**\n * This is the default implementation for the `HighlightText` component that\n * just omits the `match` prop from {@link HighlightTextComponentProps} and\n * passes the rest to the {@link Mark}.\n *\n * @since 6.0.0\n */\nexport function HighlightTextMark(\n  props: Readonly<HighlightTextMarkProps>\n): ReactElement {\n  const { match: _match, ...remaining } = props;\n  return <Mark {...remaining} />;\n}\n"],"names":["Mark","HighlightTextMark","props","match","_match","remaining"],"mappings":";AAGA,SAASA,IAAI,QAAwB,YAAY;AASjD;;;;;;CAMC,GACD,OAAO,SAASC,kBACdC,KAAuC;IAEvC,MAAM,EAAEC,OAAOC,MAAM,EAAE,GAAGC,WAAW,GAAGH;IACxC,qBAAO,KAACF;QAAM,GAAGK,SAAS;;AAC5B"}