@react-md/core 6.4.0 → 6.5.1

package/dist/tree/TreeItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/TreeItem.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useEffect,\n} from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { ListItemChildren } from \"../list/ListItemChildren.js\";\nimport { useKeyboardMovementContext } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { type OverridableTreeGroupProps, TreeGroup } from \"./TreeGroup.js\";\nimport { TreeItemExpander } from \"./TreeItemExpander.js\";\nimport { useTreeContext } from \"./TreeProvider.js\";\nimport { treeItem, treeItemContent, treeItemMedia } from \"./styles.js\";\nimport { type DefaultTreeItemNode } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added `liProps` and `groupProps`.\n * @since 6.0.0 The `liRef`, `liStyle`, and `liClassName` props were removed in\n * favor of `liProps={{ ref, style, className }}`.\n * @since 6.0.0 The `itemIndex`, `listSize`, `renderChildItems`, `isLink`,\n * `contentComponent`, and `readOnly` props were removed.\n */\nexport interface TreeItemProps\n  extends\n    Omit<DefaultTreeItemNode, \"parentId\">,\n    HTMLAttributes<HTMLLIElement>,\n    ComponentWithRippleProps {\n  /**\n   * @defaultValue `\"tree-item-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * This is used to set the `--rmd-tree-depth` CSS variable which allows the\n   * padding to increase for each nested tree.\n   */\n  depth: number;\n\n  /**\n   * Any additional props that should be passed to the surrounding `<li>`\n   * element. The top-level props are passed to the `<span>` or `<a>` element\n   * instead.\n   */\n  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>>;\n\n  /**\n   * Any additional props to pass to the `TreeGroup` component.\n   */\n  groupProps?: PropsWithRef<OverridableTreeGroupProps>;\n\n  /**\n   * This should normally be the text/content to display within the tree item\n   * and should **not** include nested trees.\n   */\n  children?: ReactNode;\n\n  /**\n   * The nested tree items to render within a `TreeGroup`.\n   */\n  childItems?: ReactNode;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /**\n   * This ref is applied to the `<span>` or `<a>` element and can be used to\n   * implement drag and drop behavior.\n   */\n  contentRef?: Ref<HTMLElement>;\n\n  /**\n   * Set this to `true` if the {@link childItems} should not be rendered while\n   * collapsed.\n   *\n   * @defaultValue `false`\n   */\n  temporaryChildItems?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link https://react-md.dev/components/tree | Tree Demos}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/treeview/}\n * @since 6.0.0 No longer forwards refs. The ref must be provided using\n * `contentRef` instead.\n * @since 6.0.0 The `liRef` was removed in favor of `liProps={{ ref }}`.\n * @since 6.0.0 The wrapping `<li>` element will always be `role=\"none\"` and the\n * `<span>` or `<a>` will gain the `role=\"treeitem\"` instead. This makes it\n * easier to pass event handlers because of the nested behavior of tree items.\n * @since 6.0.0 No longer provides the `aria-level`, `aria-setsize` and\n * `aria-posinset` attributes and allows the browser to compute them instead.\n */\nexport function TreeItem(props: TreeItemProps): ReactElement {\n  const {\n    id: propId,\n    depth,\n    liProps,\n    disabled = false,\n    disabledOpacity = false,\n    groupProps,\n    children: propChildren,\n    className,\n    itemId,\n    leftAddon,\n    leftAddonType: propLeftAddonType,\n    leftAddonPosition,\n    leftAddonClassName,\n    leftAddonForceWrap,\n    rightAddon,\n    rightAddonType,\n    rightAddonPosition,\n    rightAddonClassName,\n    rightAddonForceWrap,\n    disableTextChildren,\n    disableLeftAddonCenteredMedia: propDisableLeftAddonCenteredMedia,\n    disableRightAddonCenteredMedia,\n    textProps,\n    textClassName,\n    primaryText,\n    secondaryText,\n    secondaryTextProps,\n    secondaryTextClassName,\n    multiline,\n    childItems,\n    contentClassName,\n    temporaryChildItems,\n    disableTransition: propDisableTransition,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    contentRef,\n    disableRipple,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"tree-item\");\n  const children = useHigherContrastChildren(propChildren);\n  if (disabled) {\n    // you can't really disable a link other than removing the href, so\n    // unset these props\n    remaining.to = undefined;\n    remaining.href = undefined;\n  }\n\n  const {\n    expandedIds,\n    selectedIds,\n    expanderLeft,\n    expansionMode,\n    metadataLookup,\n    linkComponent: Link,\n    toggleTreeItemSelection,\n    toggleTreeItemExpansion,\n    disableTransition: contextDisableTransition,\n  } = useTreeContext();\n  const { activeDescendantId } = useKeyboardMovementContext();\n\n  const isLeafNode = !childItems;\n  const focused = activeDescendantId === id;\n  const expanded = expandedIds.has(itemId);\n  const selected = selectedIds.has(itemId);\n  const disableTransition = propDisableTransition ?? contextDisableTransition;\n\n  useEffect(() => {\n    const lookup = metadataLookup.current;\n    lookup.expandable[itemId] = !isLeafNode;\n    lookup.disabledItems[itemId] = disabled;\n    lookup.elementToItem[id] = itemId;\n    lookup.itemToElement[itemId] = id;\n\n    return () => {\n      /* eslint-disable @typescript-eslint/no-dynamic-delete */\n      delete lookup.disabledItems[itemId];\n      delete lookup.expandable[itemId];\n      delete lookup.elementToItem[id];\n      delete lookup.itemToElement[itemId];\n      /* eslint-enable @typescript-eslint/no-dynamic-delete */\n    };\n  }, [id, metadataLookup, itemId, isLeafNode, disabled, depth]);\n\n  const { pressedClassName, ripples, handlers } =\n    useElementInteraction<HTMLLIElement>({\n      mode: disableRipple ? \"none\" : undefined,\n      onBlur,\n      onClick(event) {\n        onClick?.(event);\n        toggleTreeItemSelection(itemId);\n        if (!isLeafNode && expansionMode !== \"manual\") {\n          toggleTreeItemExpansion(itemId);\n        }\n      },\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      disabled,\n    });\n\n  const isLink = !!(remaining.to || remaining.href);\n\n  // cheating a bit so there are type errors around the event handlers\n  const ContentComponent = (isLink ? Link : \"span\") as \"span\";\n  const leftAddonType =\n    (propLeftAddonType ?? (expanderLeft && leftAddon)) ? \"media\" : undefined;\n  const isMediaLeftAddon =\n    typeof propLeftAddonType === \"undefined\" && leftAddonType === \"media\";\n  const disableLeftAddonCenteredMedia =\n    propDisableLeftAddonCenteredMedia ?? isMediaLeftAddon;\n\n  return (\n    <li\n      {...liProps}\n      role=\"none\"\n      className={treeItem({\n        className,\n        expander: !!childItems,\n        expanderLeft,\n      })}\n    >\n      <ContentComponent\n        {...remaining}\n        // nodes with children should always apply the `aria-expanded` to show\n        // that it is expandable while leaf nodes should remain omitted\n        aria-expanded={isLeafNode ? undefined : expanded}\n        aria-selected={selected}\n        aria-disabled={disabled || undefined}\n        id={id}\n        ref={contentRef}\n        role=\"treeitem\"\n        tabIndex={-1}\n        {...handlers}\n        className={treeItemContent({\n          link: isLink,\n          focused,\n          selected,\n          disabled,\n          disabledOpacity,\n          className: contentClassName,\n          pressedClassName,\n        })}\n      >\n        <ListItemChildren\n          multiline={multiline}\n          textClassName={textClassName}\n          secondaryTextClassName={secondaryTextClassName}\n          disableTextChildren={disableTextChildren}\n          primaryText={primaryText}\n          textProps={textProps}\n          secondaryText={secondaryText}\n          secondaryTextProps={secondaryTextProps}\n          leftAddon={\n            <TreeItemExpander\n              isLeft\n              itemId={itemId}\n              addon={leftAddon}\n              expanded={expanded}\n              disabled={disabled}\n              isLeafNode={isLeafNode}\n            />\n          }\n          leftAddonType={leftAddonType}\n          leftAddonPosition={leftAddonPosition}\n          leftAddonClassName={treeItemMedia({\n            isLeafNode,\n            isMediaLeftAddon,\n            className: leftAddonClassName,\n          })}\n          leftAddonForceWrap={leftAddonForceWrap}\n          rightAddon={\n            <TreeItemExpander\n              itemId={itemId}\n              addon={rightAddon}\n              expanded={expanded}\n              disabled={disabled}\n              isLeafNode={isLeafNode}\n            />\n          }\n          rightAddonType={rightAddonType}\n          rightAddonPosition={rightAddonPosition}\n          rightAddonClassName={rightAddonClassName}\n          rightAddonForceWrap={rightAddonForceWrap}\n          disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n          disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n        >\n          {children}\n        </ListItemChildren>\n        {ripples}\n      </ContentComponent>\n      <TreeGroup\n        id={`${id}-group`}\n        temporary={temporaryChildItems}\n        disableTransition={disableTransition}\n        {...groupProps}\n        depth={depth + 1}\n        collapsed={isLeafNode || !expanded}\n      >\n        {childItems}\n      </TreeGroup>\n    </li>\n  );\n}\n"],"names":["useEffect","useElementInteraction","useHigherContrastChildren","ListItemChildren","useKeyboardMovementContext","useEnsuredId","TreeGroup","TreeItemExpander","useTreeContext","treeItem","treeItemContent","treeItemMedia","TreeItem","props","id","propId","depth","liProps","disabled","disabledOpacity","groupProps","children","propChildren","className","itemId","leftAddon","leftAddonType","propLeftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableTextChildren","disableLeftAddonCenteredMedia","propDisableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","textProps","textClassName","primaryText","secondaryText","secondaryTextProps","secondaryTextClassName","multiline","childItems","contentClassName","temporaryChildItems","disableTransition","propDisableTransition","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","contentRef","disableRipple","remaining","to","undefined","href","expandedIds","selectedIds","expanderLeft","expansionMode","metadataLookup","linkComponent","Link","toggleTreeItemSelection","toggleTreeItemExpansion","contextDisableTransition","activeDescendantId","isLeafNode","focused","expanded","has","selected","lookup","current","expandable","disabledItems","elementToItem","itemToElement","pressedClassName","ripples","handlers","mode","event","isLink","ContentComponent","isMediaLeftAddon","li","role","expander","aria-expanded","aria-selected","aria-disabled","ref","tabIndex","link","isLeft","addon","temporary","collapsed"],"mappings":"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"}
+{"version":3,"sources":["../../src/tree/TreeItem.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useEffect,\n} from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { ListItemChildren } from \"../list/ListItemChildren.js\";\nimport { useKeyboardMovementContext } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { type OverridableTreeGroupProps, TreeGroup } from \"./TreeGroup.js\";\nimport { TreeItemExpander } from \"./TreeItemExpander.js\";\nimport { useTreeContext } from \"./TreeProvider.js\";\nimport { treeItem, treeItemContent, treeItemMedia } from \"./styles.js\";\nimport { type DefaultTreeItemNode } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added `liProps` and `groupProps`.\n * @since 6.0.0 The `liRef`, `liStyle`, and `liClassName` props were removed in\n * favor of `liProps={{ ref, style, className }}`.\n * @since 6.0.0 The `itemIndex`, `listSize`, `renderChildItems`, `isLink`,\n * `contentComponent`, and `readOnly` props were removed.\n */\nexport interface TreeItemProps\n  extends\n    Omit<DefaultTreeItemNode, \"parentId\">,\n    HTMLAttributes<HTMLLIElement>,\n    ComponentWithRippleProps {\n  /**\n   * @defaultValue `\"tree-item-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * This is used to set the `--rmd-tree-depth` CSS variable which allows the\n   * padding to increase for each nested tree.\n   */\n  depth: number;\n\n  /**\n   * Any additional props that should be passed to the surrounding `<li>`\n   * element. The top-level props are passed to the `<span>` or `<a>` element\n   * instead.\n   */\n  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>>;\n\n  /**\n   * Any additional props to pass to the `TreeGroup` component.\n   */\n  groupProps?: PropsWithRef<OverridableTreeGroupProps>;\n\n  /**\n   * This should normally be the text/content to display within the tree item\n   * and should **not** include nested trees.\n   */\n  children?: ReactNode;\n\n  /**\n   * The nested tree items to render within a `TreeGroup`.\n   */\n  childItems?: ReactNode;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /**\n   * This ref is applied to the `<span>` or `<a>` element and can be used to\n   * implement drag and drop behavior.\n   */\n  contentRef?: Ref<HTMLElement>;\n\n  /**\n   * Set this to `true` if the {@link childItems} should not be rendered while\n   * collapsed.\n   *\n   * @defaultValue `false`\n   */\n  temporaryChildItems?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link https://react-md.dev/components/tree | Tree Demos}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/treeview/}\n * @since 6.0.0 No longer forwards refs. The ref must be provided using\n * `contentRef` instead.\n * @since 6.0.0 The `liRef` was removed in favor of `liProps={{ ref }}`.\n * @since 6.0.0 The wrapping `<li>` element will always be `role=\"none\"` and the\n * `<span>` or `<a>` will gain the `role=\"treeitem\"` instead. This makes it\n * easier to pass event handlers because of the nested behavior of tree items.\n * @since 6.0.0 No longer provides the `aria-level`, `aria-setsize` and\n * `aria-posinset` attributes and allows the browser to compute them instead.\n */\nexport function TreeItem(props: TreeItemProps): ReactElement {\n  const {\n    id: propId,\n    depth,\n    liProps,\n    disabled = false,\n    disabledOpacity = false,\n    groupProps,\n    children: propChildren,\n    className,\n    itemId,\n    leftAddon,\n    leftAddonType: propLeftAddonType,\n    leftAddonPosition,\n    leftAddonClassName,\n    leftAddonForceWrap,\n    rightAddon,\n    rightAddonType,\n    rightAddonPosition,\n    rightAddonClassName,\n    rightAddonForceWrap,\n    disableTextChildren,\n    disableLeftAddonCenteredMedia: propDisableLeftAddonCenteredMedia,\n    disableRightAddonCenteredMedia,\n    textProps,\n    textClassName,\n    primaryText,\n    secondaryText,\n    secondaryTextProps,\n    secondaryTextClassName,\n    multiline,\n    childItems,\n    contentClassName,\n    temporaryChildItems,\n    disableTransition: propDisableTransition,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    contentRef,\n    disableRipple,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"tree-item\");\n  const children = useHigherContrastChildren(propChildren);\n  if (disabled) {\n    // you can't really disable a link other than removing the href, so\n    // unset these props\n    remaining.to = undefined;\n    remaining.href = undefined;\n  }\n\n  const {\n    expandedIds,\n    selectedIds,\n    expanderLeft,\n    expansionMode,\n    metadataLookup,\n    linkComponent: Link,\n    toggleTreeItemSelection,\n    toggleTreeItemExpansion,\n    disableTransition: contextDisableTransition,\n  } = useTreeContext();\n  const { activeDescendantId } = useKeyboardMovementContext();\n\n  const isLeafNode = !childItems;\n  const focused = activeDescendantId === id;\n  const expanded = expandedIds.has(itemId);\n  const selected = selectedIds.has(itemId);\n  const disableTransition = propDisableTransition ?? contextDisableTransition;\n\n  useEffect(() => {\n    const lookup = metadataLookup.current;\n    lookup.expandable[itemId] = !isLeafNode;\n    lookup.disabledItems[itemId] = disabled;\n    lookup.elementToItem[id] = itemId;\n    lookup.itemToElement[itemId] = id;\n\n    return () => {\n      /* eslint-disable @typescript-eslint/no-dynamic-delete */\n      delete lookup.disabledItems[itemId];\n      delete lookup.expandable[itemId];\n      delete lookup.elementToItem[id];\n      delete lookup.itemToElement[itemId];\n      /* eslint-enable @typescript-eslint/no-dynamic-delete */\n    };\n  }, [id, metadataLookup, itemId, isLeafNode, disabled, depth]);\n\n  const { pressedClassName, ripples, handlers } =\n    useElementInteraction<HTMLLIElement>({\n      mode: disableRipple ? \"none\" : undefined,\n      onBlur,\n      onClick(event) {\n        onClick?.(event);\n        toggleTreeItemSelection(itemId);\n        if (!isLeafNode && expansionMode !== \"manual\") {\n          toggleTreeItemExpansion(itemId);\n        }\n      },\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      disabled,\n    });\n\n  const isLink = !!(remaining.to || remaining.href);\n\n  // cheating a bit so there are type errors around the event handlers\n  const ContentComponent = (isLink ? Link : \"span\") as \"span\";\n  const leftAddonType =\n    (propLeftAddonType ?? (expanderLeft && leftAddon)) ? \"media\" : undefined;\n  const isMediaLeftAddon =\n    propLeftAddonType === undefined && leftAddonType === \"media\";\n  const disableLeftAddonCenteredMedia =\n    propDisableLeftAddonCenteredMedia ?? isMediaLeftAddon;\n\n  return (\n    <li\n      {...liProps}\n      role=\"none\"\n      className={treeItem({\n        className,\n        expander: !!childItems,\n        expanderLeft,\n      })}\n    >\n      <ContentComponent\n        {...remaining}\n        // nodes with children should always apply the `aria-expanded` to show\n        // that it is expandable while leaf nodes should remain omitted\n        aria-expanded={isLeafNode ? undefined : expanded}\n        aria-selected={selected}\n        aria-disabled={disabled || undefined}\n        id={id}\n        ref={contentRef}\n        role=\"treeitem\"\n        tabIndex={-1}\n        {...handlers}\n        className={treeItemContent({\n          link: isLink,\n          focused,\n          selected,\n          disabled,\n          disabledOpacity,\n          className: contentClassName,\n          pressedClassName,\n        })}\n      >\n        <ListItemChildren\n          multiline={multiline}\n          textClassName={textClassName}\n          secondaryTextClassName={secondaryTextClassName}\n          disableTextChildren={disableTextChildren}\n          primaryText={primaryText}\n          textProps={textProps}\n          secondaryText={secondaryText}\n          secondaryTextProps={secondaryTextProps}\n          leftAddon={\n            <TreeItemExpander\n              isLeft\n              itemId={itemId}\n              addon={leftAddon}\n              expanded={expanded}\n              disabled={disabled}\n              isLeafNode={isLeafNode}\n            />\n          }\n          leftAddonType={leftAddonType}\n          leftAddonPosition={leftAddonPosition}\n          leftAddonClassName={treeItemMedia({\n            isLeafNode,\n            isMediaLeftAddon,\n            className: leftAddonClassName,\n          })}\n          leftAddonForceWrap={leftAddonForceWrap}\n          rightAddon={\n            <TreeItemExpander\n              itemId={itemId}\n              addon={rightAddon}\n              expanded={expanded}\n              disabled={disabled}\n              isLeafNode={isLeafNode}\n            />\n          }\n          rightAddonType={rightAddonType}\n          rightAddonPosition={rightAddonPosition}\n          rightAddonClassName={rightAddonClassName}\n          rightAddonForceWrap={rightAddonForceWrap}\n          disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n          disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n        >\n          {children}\n        </ListItemChildren>\n        {ripples}\n      </ContentComponent>\n      <TreeGroup\n        id={`${id}-group`}\n        temporary={temporaryChildItems}\n        disableTransition={disableTransition}\n        {...groupProps}\n        depth={depth + 1}\n        collapsed={isLeafNode || !expanded}\n      >\n        {childItems}\n      </TreeGroup>\n    </li>\n  );\n}\n"],"names":["useEffect","useElementInteraction","useHigherContrastChildren","ListItemChildren","useKeyboardMovementContext","useEnsuredId","TreeGroup","TreeItemExpander","useTreeContext","treeItem","treeItemContent","treeItemMedia","TreeItem","props","id","propId","depth","liProps","disabled","disabledOpacity","groupProps","children","propChildren","className","itemId","leftAddon","leftAddonType","propLeftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableTextChildren","disableLeftAddonCenteredMedia","propDisableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","textProps","textClassName","primaryText","secondaryText","secondaryTextProps","secondaryTextClassName","multiline","childItems","contentClassName","temporaryChildItems","disableTransition","propDisableTransition","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","contentRef","disableRipple","remaining","to","undefined","href","expandedIds","selectedIds","expanderLeft","expansionMode","metadataLookup","linkComponent","Link","toggleTreeItemSelection","toggleTreeItemExpansion","contextDisableTransition","activeDescendantId","isLeafNode","focused","expanded","has","selected","lookup","current","expandable","disabledItems","elementToItem","itemToElement","pressedClassName","ripples","handlers","mode","event","isLink","ContentComponent","isMediaLeftAddon","li","role","expander","aria-expanded","aria-selected","aria-disabled","ref","tabIndex","link","isLeft","addon","temporary","collapsed"],"mappings":"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"}

package/dist/tree/useTreeItems.js

@@ -26,18 +26,18 @@ import { useMemo } from "react";
             });
         }
     }
-    if (!childItems.length) {
+    if (childItems.length === 0) {
         return undefined;
     }
     treeItemChildIds.set(parentId, childIds);
-    childItems.forEach((childItem)=>{
+    for (const childItem of childItems){
         childItem.items = buildTree({
             sort,
             nodes,
             parentId: childItem.itemId,
             treeItemChildIds
         });
-    });
+    }
     return sort(childItems);
 }
 /**
@@ -58,9 +58,11 @@ import { useMemo } from "react";
             parentId: rootId,
             treeItemChildIds
         });
-        if (process.env.NODE_ENV !== "production" && values.length) {
+        if (process.env.NODE_ENV !== "production" && values.length > 0) {
             /* eslint-disable no-console */ console.warn("The following tree items are orphaned without a parent:");
-            console.warn(values.slice());
+            console.warn([
+                ...values
+            ]);
         }
         return {
             items: items || [],

package/dist/tree/useTreeItems.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/useTreeItems.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type {\n  DefaultTreeItemNode,\n  TreeData,\n  TreeItemNode,\n  TreeItemSorter,\n} from \"./types.js\";\n\n/**\n * A lookup to find all the child ids for a specific parent. This was added to\n * support the `*` keyboard behavior of opening all tree items at the current\n * level.\n *\n * @since 6.0.0\n * @internal\n */\nexport type TreeItemChildIds = Map<string | null, Set<string>>;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type RenderableTreeItemNode<\n  T extends TreeItemNode = DefaultTreeItemNode,\n> = T & {\n  items?: readonly RenderableTreeItemNode<T>[];\n};\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface BuildTreeOptions<T extends TreeItemNode> {\n  sort: TreeItemSorter<T>;\n  nodes: T[];\n  parentId: string | null;\n  treeItemChildIds: TreeItemChildIds;\n}\n\n/**\n * This util performantly builds a nested list of tree items from a giant flat\n * list of items by linking items together with the provided `parentId`. This\n * will also recursively build the tree and _hopefully_ all items will be added.\n *\n * @since 6.0.0 Updated to include the {@link TreeItemChildIds}\n */\nexport function buildTree<T extends TreeItemNode>(\n  options: BuildTreeOptions<T>\n): readonly RenderableTreeItemNode<T>[] | undefined {\n  const { sort, nodes, parentId, treeItemChildIds } = options;\n  const childIds = treeItemChildIds.get(parentId) || new Set();\n  const childItems: RenderableTreeItemNode<T>[] = [];\n\n  // doing a \"reverse\" order filter/move so that the items array shrinks while\n  // looping. This makes it so that the entire items array doesn't need to\n  // continually be looped through as more items are added to the tree, only the\n  // remaining items will have to be looped\n  let i = nodes.length;\n  while (i > 0) {\n    i -= 1;\n    if (nodes[i] && nodes[i].parentId === parentId) {\n      const [item] = nodes.splice(i, 1);\n      childIds.add(item.itemId);\n      // shallow cloning so childItems doesn't get applied to the original data\n      // set\n      childItems.unshift({ ...item });\n    }\n  }\n\n  if (!childItems.length) {\n    return undefined;\n  }\n\n  treeItemChildIds.set(parentId, childIds);\n  childItems.forEach((childItem) => {\n    childItem.items = buildTree({\n      sort,\n      nodes,\n      parentId: childItem.itemId,\n      treeItemChildIds,\n    });\n  });\n\n  return sort(childItems);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TreeItemOptions<T extends TreeItemNode> {\n  data: TreeData<T>;\n  sort: TreeItemSorter<T>;\n  rootId: string | null;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TreeItems<T extends TreeItemNode> {\n  items: readonly RenderableTreeItemNode<T>[];\n  treeItemChildIds: TreeItemChildIds;\n}\n\n/**\n * This is mostly an internal hook, but can be used to build tree-like\n * data structures without the need of the `Tree` component.\n *\n * @see {@link https://react-md.dev/components/tree | Tree Demos}\n * @since 6.0.0 converted to use an object argument instead of\n * multiple arguments. Also logs any orphaned items that do not have a parent\n */\nexport function useTreeItems<T extends TreeItemNode>(\n  options: TreeItemOptions<T>\n): TreeItems<T> {\n  const { data, sort, rootId } = options;\n\n  return useMemo<TreeItems<T>>(() => {\n    const values = Object.values(data);\n    const treeItemChildIds = new Map<string, Set<string>>();\n    const items = buildTree<T>({\n      sort,\n      nodes: values,\n      parentId: rootId,\n      treeItemChildIds,\n    });\n\n    if (process.env.NODE_ENV !== \"production\" && values.length) {\n      /* eslint-disable no-console */\n      console.warn(\"The following tree items are orphaned without a parent:\");\n      console.warn(values.slice());\n    }\n\n    return {\n      items: items || [],\n      treeItemChildIds,\n    };\n  }, [data, rootId, sort]);\n}\n"],"names":["useMemo","buildTree","options","sort","nodes","parentId","treeItemChildIds","childIds","get","Set","childItems","i","length","item","splice","add","itemId","unshift","undefined","set","forEach","childItem","items","useTreeItems","data","rootId","values","Object","Map","process","env","NODE_ENV","console","warn","slice"],"mappings":"AAAA,SAASA,OAAO,QAAQ,QAAQ;AAwChC;;;;;;CAMC,GACD,OAAO,SAASC,UACdC,OAA4B;IAE5B,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,gBAAgB,EAAE,GAAGJ;IACpD,MAAMK,WAAWD,iBAAiBE,GAAG,CAACH,aAAa,IAAII;IACvD,MAAMC,aAA0C,EAAE;IAElD,4EAA4E;IAC5E,wEAAwE;IACxE,8EAA8E;IAC9E,yCAAyC;IACzC,IAAIC,IAAIP,MAAMQ,MAAM;IACpB,MAAOD,IAAI,EAAG;QACZA,KAAK;QACL,IAAIP,KAAK,CAACO,EAAE,IAAIP,KAAK,CAACO,EAAE,CAACN,QAAQ,KAAKA,UAAU;YAC9C,MAAM,CAACQ,KAAK,GAAGT,MAAMU,MAAM,CAACH,GAAG;YAC/BJ,SAASQ,GAAG,CAACF,KAAKG,MAAM;YACxB,yEAAyE;YACzE,MAAM;YACNN,WAAWO,OAAO,CAAC;gBAAE,GAAGJ,IAAI;YAAC;QAC/B;IACF;IAEA,IAAI,CAACH,WAAWE,MAAM,EAAE;QACtB,OAAOM;IACT;IAEAZ,iBAAiBa,GAAG,CAACd,UAAUE;IAC/BG,WAAWU,OAAO,CAAC,CAACC;QAClBA,UAAUC,KAAK,GAAGrB,UAAU;YAC1BE;YACAC;YACAC,UAAUgB,UAAUL,MAAM;YAC1BV;QACF;IACF;IAEA,OAAOH,KAAKO;AACd;AAmBA;;;;;;;CAOC,GACD,OAAO,SAASa,aACdrB,OAA2B;IAE3B,MAAM,EAAEsB,IAAI,EAAErB,IAAI,EAAEsB,MAAM,EAAE,GAAGvB;IAE/B,OAAOF,QAAsB;QAC3B,MAAM0B,SAASC,OAAOD,MAAM,CAACF;QAC7B,MAAMlB,mBAAmB,IAAIsB;QAC7B,MAAMN,QAAQrB,UAAa;YACzBE;YACAC,OAAOsB;YACPrB,UAAUoB;YACVnB;QACF;QAEA,IAAIuB,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgBL,OAAOd,MAAM,EAAE;YAC1D,6BAA6B,GAC7BoB,QAAQC,IAAI,CAAC;YACbD,QAAQC,IAAI,CAACP,OAAOQ,KAAK;QAC3B;QAEA,OAAO;YACLZ,OAAOA,SAAS,EAAE;YAClBhB;QACF;IACF,GAAG;QAACkB;QAAMC;QAAQtB;KAAK;AACzB"}
+{"version":3,"sources":["../../src/tree/useTreeItems.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type {\n  DefaultTreeItemNode,\n  TreeData,\n  TreeItemNode,\n  TreeItemSorter,\n} from \"./types.js\";\n\n/**\n * A lookup to find all the child ids for a specific parent. This was added to\n * support the `*` keyboard behavior of opening all tree items at the current\n * level.\n *\n * @since 6.0.0\n * @internal\n */\nexport type TreeItemChildIds = Map<string | null, Set<string>>;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type RenderableTreeItemNode<\n  T extends TreeItemNode = DefaultTreeItemNode,\n> = T & {\n  items?: readonly RenderableTreeItemNode<T>[];\n};\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface BuildTreeOptions<T extends TreeItemNode> {\n  sort: TreeItemSorter<T>;\n  nodes: T[];\n  parentId: string | null;\n  treeItemChildIds: TreeItemChildIds;\n}\n\n/**\n * This util performantly builds a nested list of tree items from a giant flat\n * list of items by linking items together with the provided `parentId`. This\n * will also recursively build the tree and _hopefully_ all items will be added.\n *\n * @since 6.0.0 Updated to include the {@link TreeItemChildIds}\n */\nexport function buildTree<T extends TreeItemNode>(\n  options: BuildTreeOptions<T>\n): readonly RenderableTreeItemNode<T>[] | undefined {\n  const { sort, nodes, parentId, treeItemChildIds } = options;\n  const childIds = treeItemChildIds.get(parentId) || new Set();\n  const childItems: RenderableTreeItemNode<T>[] = [];\n\n  // doing a \"reverse\" order filter/move so that the items array shrinks while\n  // looping. This makes it so that the entire items array doesn't need to\n  // continually be looped through as more items are added to the tree, only the\n  // remaining items will have to be looped\n  let i = nodes.length;\n  while (i > 0) {\n    i -= 1;\n    if (nodes[i] && nodes[i].parentId === parentId) {\n      const [item] = nodes.splice(i, 1);\n      childIds.add(item.itemId);\n      // shallow cloning so childItems doesn't get applied to the original data\n      // set\n      childItems.unshift({ ...item });\n    }\n  }\n\n  if (childItems.length === 0) {\n    return undefined;\n  }\n\n  treeItemChildIds.set(parentId, childIds);\n  for (const childItem of childItems) {\n    childItem.items = buildTree({\n      sort,\n      nodes,\n      parentId: childItem.itemId,\n      treeItemChildIds,\n    });\n  }\n\n  return sort(childItems);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TreeItemOptions<T extends TreeItemNode> {\n  data: TreeData<T>;\n  sort: TreeItemSorter<T>;\n  rootId: string | null;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TreeItems<T extends TreeItemNode> {\n  items: readonly RenderableTreeItemNode<T>[];\n  treeItemChildIds: TreeItemChildIds;\n}\n\n/**\n * This is mostly an internal hook, but can be used to build tree-like\n * data structures without the need of the `Tree` component.\n *\n * @see {@link https://react-md.dev/components/tree | Tree Demos}\n * @since 6.0.0 converted to use an object argument instead of\n * multiple arguments. Also logs any orphaned items that do not have a parent\n */\nexport function useTreeItems<T extends TreeItemNode>(\n  options: TreeItemOptions<T>\n): TreeItems<T> {\n  const { data, sort, rootId } = options;\n\n  return useMemo<TreeItems<T>>(() => {\n    const values = Object.values(data);\n    const treeItemChildIds = new Map<string, Set<string>>();\n    const items = buildTree<T>({\n      sort,\n      nodes: values,\n      parentId: rootId,\n      treeItemChildIds,\n    });\n\n    if (process.env.NODE_ENV !== \"production\" && values.length > 0) {\n      /* eslint-disable no-console */\n      console.warn(\"The following tree items are orphaned without a parent:\");\n      console.warn([...values]);\n    }\n\n    return {\n      items: items || [],\n      treeItemChildIds,\n    };\n  }, [data, rootId, sort]);\n}\n"],"names":["useMemo","buildTree","options","sort","nodes","parentId","treeItemChildIds","childIds","get","Set","childItems","i","length","item","splice","add","itemId","unshift","undefined","set","childItem","items","useTreeItems","data","rootId","values","Object","Map","process","env","NODE_ENV","console","warn"],"mappings":"AAAA,SAASA,OAAO,QAAQ,QAAQ;AAwChC;;;;;;CAMC,GACD,OAAO,SAASC,UACdC,OAA4B;IAE5B,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,gBAAgB,EAAE,GAAGJ;IACpD,MAAMK,WAAWD,iBAAiBE,GAAG,CAACH,aAAa,IAAII;IACvD,MAAMC,aAA0C,EAAE;IAElD,4EAA4E;IAC5E,wEAAwE;IACxE,8EAA8E;IAC9E,yCAAyC;IACzC,IAAIC,IAAIP,MAAMQ,MAAM;IACpB,MAAOD,IAAI,EAAG;QACZA,KAAK;QACL,IAAIP,KAAK,CAACO,EAAE,IAAIP,KAAK,CAACO,EAAE,CAACN,QAAQ,KAAKA,UAAU;YAC9C,MAAM,CAACQ,KAAK,GAAGT,MAAMU,MAAM,CAACH,GAAG;YAC/BJ,SAASQ,GAAG,CAACF,KAAKG,MAAM;YACxB,yEAAyE;YACzE,MAAM;YACNN,WAAWO,OAAO,CAAC;gBAAE,GAAGJ,IAAI;YAAC;QAC/B;IACF;IAEA,IAAIH,WAAWE,MAAM,KAAK,GAAG;QAC3B,OAAOM;IACT;IAEAZ,iBAAiBa,GAAG,CAACd,UAAUE;IAC/B,KAAK,MAAMa,aAAaV,WAAY;QAClCU,UAAUC,KAAK,GAAGpB,UAAU;YAC1BE;YACAC;YACAC,UAAUe,UAAUJ,MAAM;YAC1BV;QACF;IACF;IAEA,OAAOH,KAAKO;AACd;AAmBA;;;;;;;CAOC,GACD,OAAO,SAASY,aACdpB,OAA2B;IAE3B,MAAM,EAAEqB,IAAI,EAAEpB,IAAI,EAAEqB,MAAM,EAAE,GAAGtB;IAE/B,OAAOF,QAAsB;QAC3B,MAAMyB,SAASC,OAAOD,MAAM,CAACF;QAC7B,MAAMjB,mBAAmB,IAAIqB;QAC7B,MAAMN,QAAQpB,UAAa;YACzBE;YACAC,OAAOqB;YACPpB,UAAUmB;YACVlB;QACF;QAEA,IAAIsB,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgBL,OAAOb,MAAM,GAAG,GAAG;YAC9D,6BAA6B,GAC7BmB,QAAQC,IAAI,CAAC;YACbD,QAAQC,IAAI,CAAC;mBAAIP;aAAO;QAC1B;QAEA,OAAO;YACLJ,OAAOA,SAAS,EAAE;YAClBf;QACF;IACF,GAAG;QAACiB;QAAMC;QAAQrB;KAAK;AACzB"}

package/dist/tree/useTreeMovement.js

@@ -93,7 +93,7 @@ import { getNextFocusableIndex } from "../movement/utils.js";
                             const expandableIds = [
                                 ...itemIds
                             ].filter((itemId)=>expandable[itemId]);
-                            if (expandableIds.length) {
+                            if (expandableIds.length > 0) {
                                 expandMultipleTreeItems((prev)=>new Set([
                                         ...prev,
                                         ...expandableIds

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) {\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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"}
+{"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":"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"}

package/dist/tree/utils.js

@@ -36,16 +36,13 @@
  * @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)=>{
-        if (parentId !== item.parentId) {
-            return list;
+    const treeItems = [];
+    for (const item of items){
+        if (parentId === item.parentId) {
+            treeItems.push(item, ...recursive ? getChildTreeItems(items, item.itemId, recursive) : []);
         }
-        return [
-            ...list,
-            item,
-            ...recursive ? getChildTreeItems(items, item.itemId, recursive) : []
-        ];
-    }, []);
+    }
+    return treeItems;
 }
 
 //# sourceMappingURL=utils.js.map

package/dist/tree/utils.js.map

@@ -1 +1 @@
-{"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"}
+{"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  const treeItems: T[] = [];\n  for (const item of items) {\n    if (parentId === item.parentId) {\n      treeItems.push(\n        item,\n        ...(recursive ? getChildTreeItems(items, item.itemId, recursive) : [])\n      );\n    }\n  }\n\n  return treeItems;\n}\n"],"names":["getTreeItemsFrom","data","itemId","items","currentId","item","parentId","push","getChildTreeItems","recursive","Array","isArray","Object","values","treeItems"],"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,MAAMa,YAAiB,EAAE;IACzB,KAAK,MAAMT,QAAQF,MAAO;QACxB,IAAIG,aAAaD,KAAKC,QAAQ,EAAE;YAC9BQ,UAAUP,IAAI,CACZF,SACII,YAAYD,kBAAkBL,OAAOE,KAAKH,MAAM,EAAEO,aAAa,EAAE;QAEzE;IACF;IAEA,OAAOK;AACT"}

package/dist/typography/HighlightText.js

@@ -51,7 +51,8 @@ const SPECIAL_CHARACTERS_REGEXP = /[.*+?^${}()|[\]\\]/g;
                 }
                 const parts = [];
                 const text = removeAccents(child).trim();
-                const regex = new RegExp("(" + cleanQuery.replace(SPECIAL_CHARACTERS_REGEXP, "\\$&") + ")", "gi");
+                const escapedQuery = cleanQuery.replaceAll(SPECIAL_CHARACTERS_REGEXP, String.raw`\$&`);
+                const regex = new RegExp(`(${escapedQuery})`, "gi");
                 let match;
                 let lastIndex = 0;
                 while((match = regex.exec(text)) !== null){

package/dist/typography/HighlightText.js.map

@@ -1 +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://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"}
+{"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://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 escapedQuery = cleanQuery.replaceAll(\n              SPECIAL_CHARACTERS_REGEXP,\n              String.raw`\\$&`\n            );\n            const regex = new RegExp(`(${escapedQuery})`, \"gi\");\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","escapedQuery","replaceAll","String","raw","regex","RegExp","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,eAAeJ,WAAWK,UAAU,CACxCf,2BACAgB,OAAOC,GAAG,CAAC,GAAG,CAAC;gBAEjB,MAAMC,QAAQ,IAAIC,OAAO,CAAC,CAAC,EAAEL,aAAa,CAAC,CAAC,EAAE;gBAE9C,IAAIM;gBACJ,IAAIC,YAAY;gBAChB,MAAO,AAACD,CAAAA,QAAQF,MAAMI,IAAI,CAACT,KAAI,MAAO,KAAM;oBAC1C,MAAM,EAAEU,KAAK,EAAE,GAAGH;oBAClB,IAAIG,QAAQF,WAAW;wBACrBT,MAAMY,IAAI,CAACf,MAAMgB,KAAK,CAACJ,WAAWE;oBACpC;oBAEC,CAAA,EAAEF,SAAS,EAAE,GAAGH,KAAI;oBACrBN,MAAMY,IAAI,eACR,KAAClB;wBAECc,OAAO;4BACLG;4BACAF;4BACAlB,OAAOO;4BACPgB,UAAUvB;4BACVwB,SAASlB;wBACX;kCAECA,MAAMgB,KAAK,CAACF,OAAOF;uBATfE;oBAaT,IAAIhB,gBAAgB;wBAClB;oBACF;gBACF;gBAEA,IAAIc,YAAYZ,MAAMmB,MAAM,EAAE;oBAC5BhB,MAAMY,IAAI,CAACf,MAAMgB,KAAK,CAACJ;gBACzB;gBAEA,OAAOT;YACT,IACF;YAACN;YAAWF;YAAUG;YAAgBJ;SAAM;;AAIpD"}

package/dist/typography/SrOnly.js

@@ -29,12 +29,18 @@ import { cssUtils } from "../cssUtils.js";
     const { as: AsComponent = "span", className, phoneOnly, focusable, children, tabIndex, ...remaining } = props;
     // do some type-casting so ref works
     const Component = AsComponent;
+    let srOnly = true;
+    if (focusable) {
+        srOnly = "focusable";
+    } else if (phoneOnly) {
+        srOnly = "phone";
+    }
     return /*#__PURE__*/ _jsx(Component, {
         ...remaining,
         ref: ref,
         tabIndex: tabIndex ?? (focusable ? 0 : undefined),
         className: cssUtils({
-            srOnly: focusable ? "focusable" : phoneOnly ? "phone" : true,
+            srOnly,
             className
         }),
         children: children

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 { 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    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        tabIndex={tabIndex ?? (focusable ? 0 : undefined)}\n        className={cssUtils({\n          srOnly: focusable ? \"focusable\" : phoneOnly ? \"phone\" : true,\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","undefined","srOnly"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAASC,QAAQ,QAAQ,iBAAiB;AA2B1C;;;;;;;;;;;;;;;;;;;;;;;;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,qBACE,KAACO;QACE,GAAGD,SAAS;QACbR,KAAKA;QACLO,UAAUA,YAAaF,CAAAA,YAAY,IAAIK,SAAQ;QAC/CP,WAAWN,SAAS;YAClBc,QAAQN,YAAY,cAAcD,YAAY,UAAU;YACxDD;QACF;kBAECG;;AAGP,GACA"}
+{"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"}

package/dist/useDebouncedFunction.js

@@ -86,18 +86,18 @@ import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
     });
     useEffect(()=>{
         return ()=>{
-            window.clearTimeout(timeout.current);
+            globalThis.clearTimeout(timeout.current);
         };
     }, []);
     return useMemo(()=>{
         const debounced = (...args)=>{
-            window.clearTimeout(timeout.current);
-            timeout.current = window.setTimeout(()=>{
+            globalThis.clearTimeout(timeout.current);
+            timeout.current = globalThis.setTimeout(()=>{
                 funcRef.current(...args);
             }, wait);
         };
         debounced.cancel = ()=>{
-            window.clearTimeout(timeout.current);
+            globalThis.clearTimeout(timeout.current);
         };
         return debounced;
     }, [

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<number | undefined>();\n  const funcRef = useRef(func);\n  useIsomorphicLayoutEffect(() => {\n    funcRef.current = func;\n  });\n\n  useEffect(() => {\n    return () => {\n      window.clearTimeout(timeout.current);\n    };\n  }, []);\n\n  return useMemo(() => {\n    const debounced: DebouncedFunction<F> = (...args) => {\n      window.clearTimeout(timeout.current);\n      timeout.current = window.setTimeout(() => {\n        funcRef.current(...args);\n      }, wait);\n    };\n    debounced.cancel = () => {\n      window.clearTimeout(timeout.current);\n    };\n\n    return debounced;\n  }, [wait]);\n}\n"],"names":["useEffect","useMemo","useRef","useIsomorphicLayoutEffect","useDebouncedFunction","func","wait","timeout","funcRef","current","window","clearTimeout","debounced","args","setTimeout","cancel"],"mappings":"AAAA;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,OAAOC,YAAY,CAACJ,QAAQE,OAAO;QACrC;IACF,GAAG,EAAE;IAEL,OAAOR,QAAQ;QACb,MAAMW,YAAkC,CAAC,GAAGC;YAC1CH,OAAOC,YAAY,CAACJ,QAAQE,OAAO;YACnCF,QAAQE,OAAO,GAAGC,OAAOI,UAAU,CAAC;gBAClCN,QAAQC,OAAO,IAAII;YACrB,GAAGP;QACL;QACAM,UAAUG,MAAM,GAAG;YACjBL,OAAOC,YAAY,CAACJ,QAAQE,OAAO;QACrC;QAEA,OAAOG;IACT,GAAG;QAACN;KAAK;AACX"}
+{"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"}

package/dist/useDropzone.js

@@ -85,8 +85,8 @@ const noop = ()=>{
     // instead. The `dragover` event will continually fire within the window
     // until the user drops the file or moves the file outside of the window.
     const delayedStopDragging = useCallback(()=>{
-        window.clearTimeout(draggingTimeout.current);
-        draggingTimeout.current = window.setTimeout(()=>{
+        globalThis.clearTimeout(draggingTimeout.current);
+        draggingTimeout.current = globalThis.setTimeout(()=>{
             stopDragging();
         }, 100);
     }, [
@@ -96,12 +96,12 @@ const noop = ()=>{
         if (disableDragging) {
             return;
         }
-        window.addEventListener("dragenter", startDragging);
-        window.addEventListener("dragover", delayedStopDragging);
+        globalThis.addEventListener("dragenter", startDragging);
+        globalThis.addEventListener("dragover", delayedStopDragging);
         return ()=>{
-            window.clearTimeout(draggingTimeout.current);
-            window.removeEventListener("dragenter", startDragging);
-            window.removeEventListener("dragover", delayedStopDragging);
+            globalThis.clearTimeout(draggingTimeout.current);
+            globalThis.removeEventListener("dragenter", startDragging);
+            globalThis.removeEventListener("dragover", delayedStopDragging);
         };
     }, [
         delayedStopDragging,
@@ -122,7 +122,7 @@ const noop = ()=>{
             onDrop (event) {
                 event.preventDefault();
                 event.stopPropagation();
-                window.clearTimeout(draggingTimeout.current);
+                globalThis.clearTimeout(draggingTimeout.current);
                 onDrop(event);
                 setOver(false);
                 stopDragging();
@@ -130,7 +130,7 @@ const noop = ()=>{
             onDragOver (event) {
                 event.preventDefault();
                 event.stopPropagation();
-                window.clearTimeout(draggingTimeout.current);
+                globalThis.clearTimeout(draggingTimeout.current);
                 onDragOver(event);
                 setOver(true);
             },

package/dist/useDropzone.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useDropzone.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type DragEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { useToggle } from \"./useToggle.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 5.1.3\n * @since 6.0.0 The element type is dynamically inferred on each handler\n * instead of the `DropzoneHandlers` type.\n */\nexport interface DropzoneHandlers {\n  onDrop: <E extends HTMLElement>(event: DragEvent<E>) => void;\n  onDragEnter?: <E extends HTMLElement>(event: DragEvent<E>) => void;\n  onDragOver?: <E extends HTMLElement>(event: DragEvent<E>) => void;\n  onDragLeave?: <E extends HTMLElement>(event: DragEvent<E>) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface DropzoneOptions extends DropzoneHandlers {\n  /**\n   * By default, the `useDropzone` hook will listen to any `dragenter`/`dragover`\n   * events on the page and enabling the {@link DragHookReturnValue.isDragging}\n   * flag to show that the user is dragging _something_ and they might want to\n   * drag that something into the dropzone.\n   *\n   * So set this option to `true` if that behavior is not required and only\n   * drag events on the dropzone element need to be captured.\n   *\n   * @defaultValue `false`\n   * @see {@link DropzoneImplementation.isDragging}\n   */\n  disableDragging?: boolean;\n}\n\n/**\n * @since 2.9.0\n * @since 6.0.0 Renamed from `DropzoneHookReturnValue` to\n * `DropzoneImplementation` to match other naming conventions. Returns an\n * object instead of an ordered array of `[isOver: boolean, dropzoneHandlers:\n * DropzoneHandlers]`. Also returns a new `isDragging` state.\n */\nexport interface DropzoneImplementation {\n  /**\n   * This will be `true` when the user is dragging something over the dropzone\n   * target.\n   */\n  isOver: boolean;\n\n  /**\n   * This will be `true` when the user is dragging anything within the document.\n   * The main use case for this is detecting when a user is dragging a file into\n   * the document so you can help highlight the dropzone area.\n   *\n   * This will always be `false` if {@link DropzoneOptions.disableDragging} is\n   * `true`.\n   */\n  isDragging: boolean;\n\n  /**\n   * The event handlers that should be passed to the dropzone target.\n   */\n  dropzoneHandlers: Required<DropzoneHandlers>;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { useFileUpload } from \"@react-md/core/files/useFileUpload\";\n * import { useDropzone } from \"@react-md/core/useDropzone\";\n * import { type CSSProperties, type ReactElement } from \"react\";\n *\n * const style: CSSProperties = {\n *   border: '1px solid blue',\n * };\n *\n * function Example(): ReactElement {\n *   const { onDrop } = useFileUpload()\n *   const { isOver, dropzoneHandlers } = useDropzone({\n *     onDrop(event) {\n *       // normally use the `onDrop` behavior from `useFileUpload` to upload\n *       // files:\n *       // onDrop(event);\n *     },\n *     disableDragging: true,\n *   });\n *\n *   return (\n *     <div {...dropzoneHandlers} style={isOver ? style : {}}>\n *       Drag and drop some files!\n *       {isOver && <UploadSVGIcon />}\n *     </div>\n *   );\n * }\n * ```\n *\n * @example Dragging Example\n * ```tsx\n * import { useFileUpload } from \"@react-md/core/files/useFileUpload\";\n * import { useDropzone } from \"@react-md/core/useDropzone\";\n * import { type CSSProperties, type ReactElement } from \"react\";\n *\n * const draggingStyle: CSSProperties = {\n *   backgroundColor: \"orange\",\n * };\n * const overStyle: CSSProperties = {\n *   border: '1px solid blue',\n * };\n *\n * function Example(): ReactElement {\n *   const { onDrop } = useFileUpload()\n *   const { isOver, isDragging, dropzoneHandlers } = useDropzone({\n *     onDrop(event) {\n *       // normally use the `onDrop` behavior from `useFileUpload` to upload\n *       // files:\n *       // onDrop(event);\n *     },\n *   });\n *\n *   return (\n *     <div\n *       {...dropzoneHandlers}\n *       style={{\n *         ...(isDragging && draggingStyle),\n *         ...(isOver && overStyle),\n *       }}\n *     >\n *       Drag and drop some files!\n *       {isOver && <UploadSVGIcon />}\n *     </div>\n *   );\n * }\n * ```\n *\n * @since 2.9.0\n * @since 6.0.0 Supports document-level dragging flag;\n */\nexport function useDropzone(options: DropzoneOptions): DropzoneImplementation {\n  const {\n    onDrop,\n    onDragOver = noop,\n    onDragEnter = noop,\n    onDragLeave = noop,\n    disableDragging = false,\n  } = options;\n\n  const [isOver, setOver] = useState(false);\n  const {\n    toggled: isDragging,\n    enable: startDragging,\n    disable: stopDragging,\n  } = useToggle();\n  const draggingTimeout = useRef<number | undefined>();\n\n  // Browsers sometimes don't trigger a dragleave event for the entire\n  // document, so we have to work around that by using the `dragover` event\n  // instead. The `dragover` event will continually fire within the window\n  // until the user drops the file or moves the file outside of the window.\n  const delayedStopDragging = useCallback(() => {\n    window.clearTimeout(draggingTimeout.current);\n    draggingTimeout.current = window.setTimeout(() => {\n      stopDragging();\n    }, 100);\n  }, [stopDragging]);\n\n  useEffect(() => {\n    if (disableDragging) {\n      return;\n    }\n\n    window.addEventListener(\"dragenter\", startDragging);\n    window.addEventListener(\"dragover\", delayedStopDragging);\n    return () => {\n      window.clearTimeout(draggingTimeout.current);\n      window.removeEventListener(\"dragenter\", startDragging);\n      window.removeEventListener(\"dragover\", delayedStopDragging);\n    };\n  }, [delayedStopDragging, disableDragging, startDragging]);\n\n  return {\n    isOver,\n    isDragging,\n    dropzoneHandlers: {\n      // Note: need to call `event.stopPropagation()` and\n      // `event.preventDefault())` for each of these handlers to prevent the\n      // default browser behavior when dropping. Only calling within `onDrop`\n      // does not work.\n      //\n      // i.e. dropping an image would preview that image in the current\n      // window/tab instead of triggering the drop event.\n      onDrop(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        window.clearTimeout(draggingTimeout.current);\n        onDrop(event);\n        setOver(false);\n        stopDragging();\n      },\n      onDragOver(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        window.clearTimeout(draggingTimeout.current);\n        onDragOver(event);\n        setOver(true);\n      },\n      onDragEnter(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        onDragEnter(event);\n        setOver(true);\n      },\n      onDragLeave(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        onDragLeave(event);\n        setOver(false);\n        // this stops dragging if the user's File Explorer is somewhat above the dropzone\n        // and drags out into the File Explorer\n        delayedStopDragging();\n      },\n    },\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useToggle","noop","useDropzone","options","onDrop","onDragOver","onDragEnter","onDragLeave","disableDragging","isOver","setOver","toggled","isDragging","enable","startDragging","disable","stopDragging","draggingTimeout","delayedStopDragging","window","clearTimeout","current","setTimeout","addEventListener","removeEventListener","dropzoneHandlers","event","preventDefault","stopPropagation"],"mappings":"AAAA;AAEA,SAEEA,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAMC,OAAO;AACX,aAAa;AACf;AA+DA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEC,GACD,OAAO,SAASC,YAAYC,OAAwB;IAClD,MAAM,EACJC,MAAM,EACNC,aAAaJ,IAAI,EACjBK,cAAcL,IAAI,EAClBM,cAAcN,IAAI,EAClBO,kBAAkB,KAAK,EACxB,GAAGL;IAEJ,MAAM,CAACM,QAAQC,QAAQ,GAAGX,SAAS;IACnC,MAAM,EACJY,SAASC,UAAU,EACnBC,QAAQC,aAAa,EACrBC,SAASC,YAAY,EACtB,GAAGhB;IACJ,MAAMiB,kBAAkBnB;IAExB,oEAAoE;IACpE,yEAAyE;IACzE,wEAAwE;IACxE,yEAAyE;IACzE,MAAMoB,sBAAsBtB,YAAY;QACtCuB,OAAOC,YAAY,CAACH,gBAAgBI,OAAO;QAC3CJ,gBAAgBI,OAAO,GAAGF,OAAOG,UAAU,CAAC;YAC1CN;QACF,GAAG;IACL,GAAG;QAACA;KAAa;IAEjBnB,UAAU;QACR,IAAIW,iBAAiB;YACnB;QACF;QAEAW,OAAOI,gBAAgB,CAAC,aAAaT;QACrCK,OAAOI,gBAAgB,CAAC,YAAYL;QACpC,OAAO;YACLC,OAAOC,YAAY,CAACH,gBAAgBI,OAAO;YAC3CF,OAAOK,mBAAmB,CAAC,aAAaV;YACxCK,OAAOK,mBAAmB,CAAC,YAAYN;QACzC;IACF,GAAG;QAACA;QAAqBV;QAAiBM;KAAc;IAExD,OAAO;QACLL;QACAG;QACAa,kBAAkB;YAChB,mDAAmD;YACnD,sEAAsE;YACtE,uEAAuE;YACvE,iBAAiB;YACjB,EAAE;YACF,iEAAiE;YACjE,mDAAmD;YACnDrB,QAAOsB,KAAK;gBACVA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBT,OAAOC,YAAY,CAACH,gBAAgBI,OAAO;gBAC3CjB,OAAOsB;gBACPhB,QAAQ;gBACRM;YACF;YACAX,YAAWqB,KAAK;gBACdA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBT,OAAOC,YAAY,CAACH,gBAAgBI,OAAO;gBAC3ChB,WAAWqB;gBACXhB,QAAQ;YACV;YACAJ,aAAYoB,KAAK;gBACfA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBtB,YAAYoB;gBACZhB,QAAQ;YACV;YACAH,aAAYmB,KAAK;gBACfA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBrB,YAAYmB;gBACZhB,QAAQ;gBACR,iFAAiF;gBACjF,uCAAuC;gBACvCQ;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../src/useDropzone.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type DragEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { useToggle } from \"./useToggle.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 5.1.3\n * @since 6.0.0 The element type is dynamically inferred on each handler\n * instead of the `DropzoneHandlers` type.\n */\nexport interface DropzoneHandlers {\n  onDrop: <E extends HTMLElement>(event: DragEvent<E>) => void;\n  onDragEnter?: <E extends HTMLElement>(event: DragEvent<E>) => void;\n  onDragOver?: <E extends HTMLElement>(event: DragEvent<E>) => void;\n  onDragLeave?: <E extends HTMLElement>(event: DragEvent<E>) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface DropzoneOptions extends DropzoneHandlers {\n  /**\n   * By default, the `useDropzone` hook will listen to any `dragenter`/`dragover`\n   * events on the page and enabling the {@link DragHookReturnValue.isDragging}\n   * flag to show that the user is dragging _something_ and they might want to\n   * drag that something into the dropzone.\n   *\n   * So set this option to `true` if that behavior is not required and only\n   * drag events on the dropzone element need to be captured.\n   *\n   * @defaultValue `false`\n   * @see {@link DropzoneImplementation.isDragging}\n   */\n  disableDragging?: boolean;\n}\n\n/**\n * @since 2.9.0\n * @since 6.0.0 Renamed from `DropzoneHookReturnValue` to\n * `DropzoneImplementation` to match other naming conventions. Returns an\n * object instead of an ordered array of `[isOver: boolean, dropzoneHandlers:\n * DropzoneHandlers]`. Also returns a new `isDragging` state.\n */\nexport interface DropzoneImplementation {\n  /**\n   * This will be `true` when the user is dragging something over the dropzone\n   * target.\n   */\n  isOver: boolean;\n\n  /**\n   * This will be `true` when the user is dragging anything within the document.\n   * The main use case for this is detecting when a user is dragging a file into\n   * the document so you can help highlight the dropzone area.\n   *\n   * This will always be `false` if {@link DropzoneOptions.disableDragging} is\n   * `true`.\n   */\n  isDragging: boolean;\n\n  /**\n   * The event handlers that should be passed to the dropzone target.\n   */\n  dropzoneHandlers: Required<DropzoneHandlers>;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { useFileUpload } from \"@react-md/core/files/useFileUpload\";\n * import { useDropzone } from \"@react-md/core/useDropzone\";\n * import { type CSSProperties, type ReactElement } from \"react\";\n *\n * const style: CSSProperties = {\n *   border: '1px solid blue',\n * };\n *\n * function Example(): ReactElement {\n *   const { onDrop } = useFileUpload()\n *   const { isOver, dropzoneHandlers } = useDropzone({\n *     onDrop(event) {\n *       // normally use the `onDrop` behavior from `useFileUpload` to upload\n *       // files:\n *       // onDrop(event);\n *     },\n *     disableDragging: true,\n *   });\n *\n *   return (\n *     <div {...dropzoneHandlers} style={isOver ? style : {}}>\n *       Drag and drop some files!\n *       {isOver && <UploadSVGIcon />}\n *     </div>\n *   );\n * }\n * ```\n *\n * @example Dragging Example\n * ```tsx\n * import { useFileUpload } from \"@react-md/core/files/useFileUpload\";\n * import { useDropzone } from \"@react-md/core/useDropzone\";\n * import { type CSSProperties, type ReactElement } from \"react\";\n *\n * const draggingStyle: CSSProperties = {\n *   backgroundColor: \"orange\",\n * };\n * const overStyle: CSSProperties = {\n *   border: '1px solid blue',\n * };\n *\n * function Example(): ReactElement {\n *   const { onDrop } = useFileUpload()\n *   const { isOver, isDragging, dropzoneHandlers } = useDropzone({\n *     onDrop(event) {\n *       // normally use the `onDrop` behavior from `useFileUpload` to upload\n *       // files:\n *       // onDrop(event);\n *     },\n *   });\n *\n *   return (\n *     <div\n *       {...dropzoneHandlers}\n *       style={{\n *         ...(isDragging && draggingStyle),\n *         ...(isOver && overStyle),\n *       }}\n *     >\n *       Drag and drop some files!\n *       {isOver && <UploadSVGIcon />}\n *     </div>\n *   );\n * }\n * ```\n *\n * @since 2.9.0\n * @since 6.0.0 Supports document-level dragging flag;\n */\nexport function useDropzone(options: DropzoneOptions): DropzoneImplementation {\n  const {\n    onDrop,\n    onDragOver = noop,\n    onDragEnter = noop,\n    onDragLeave = noop,\n    disableDragging = false,\n  } = options;\n\n  const [isOver, setOver] = useState(false);\n  const {\n    toggled: isDragging,\n    enable: startDragging,\n    disable: stopDragging,\n  } = useToggle();\n  const draggingTimeout = useRef<NodeJS.Timeout>();\n\n  // Browsers sometimes don't trigger a dragleave event for the entire\n  // document, so we have to work around that by using the `dragover` event\n  // instead. The `dragover` event will continually fire within the window\n  // until the user drops the file or moves the file outside of the window.\n  const delayedStopDragging = useCallback(() => {\n    globalThis.clearTimeout(draggingTimeout.current);\n    draggingTimeout.current = globalThis.setTimeout(() => {\n      stopDragging();\n    }, 100);\n  }, [stopDragging]);\n\n  useEffect(() => {\n    if (disableDragging) {\n      return;\n    }\n\n    globalThis.addEventListener(\"dragenter\", startDragging);\n    globalThis.addEventListener(\"dragover\", delayedStopDragging);\n    return () => {\n      globalThis.clearTimeout(draggingTimeout.current);\n      globalThis.removeEventListener(\"dragenter\", startDragging);\n      globalThis.removeEventListener(\"dragover\", delayedStopDragging);\n    };\n  }, [delayedStopDragging, disableDragging, startDragging]);\n\n  return {\n    isOver,\n    isDragging,\n    dropzoneHandlers: {\n      // Note: need to call `event.stopPropagation()` and\n      // `event.preventDefault())` for each of these handlers to prevent the\n      // default browser behavior when dropping. Only calling within `onDrop`\n      // does not work.\n      //\n      // i.e. dropping an image would preview that image in the current\n      // window/tab instead of triggering the drop event.\n      onDrop(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        globalThis.clearTimeout(draggingTimeout.current);\n        onDrop(event);\n        setOver(false);\n        stopDragging();\n      },\n      onDragOver(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        globalThis.clearTimeout(draggingTimeout.current);\n        onDragOver(event);\n        setOver(true);\n      },\n      onDragEnter(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        onDragEnter(event);\n        setOver(true);\n      },\n      onDragLeave(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        onDragLeave(event);\n        setOver(false);\n        // this stops dragging if the user's File Explorer is somewhat above the dropzone\n        // and drags out into the File Explorer\n        delayedStopDragging();\n      },\n    },\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useToggle","noop","useDropzone","options","onDrop","onDragOver","onDragEnter","onDragLeave","disableDragging","isOver","setOver","toggled","isDragging","enable","startDragging","disable","stopDragging","draggingTimeout","delayedStopDragging","globalThis","clearTimeout","current","setTimeout","addEventListener","removeEventListener","dropzoneHandlers","event","preventDefault","stopPropagation"],"mappings":"AAAA;AAEA,SAEEA,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAMC,OAAO;AACX,aAAa;AACf;AA+DA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEC,GACD,OAAO,SAASC,YAAYC,OAAwB;IAClD,MAAM,EACJC,MAAM,EACNC,aAAaJ,IAAI,EACjBK,cAAcL,IAAI,EAClBM,cAAcN,IAAI,EAClBO,kBAAkB,KAAK,EACxB,GAAGL;IAEJ,MAAM,CAACM,QAAQC,QAAQ,GAAGX,SAAS;IACnC,MAAM,EACJY,SAASC,UAAU,EACnBC,QAAQC,aAAa,EACrBC,SAASC,YAAY,EACtB,GAAGhB;IACJ,MAAMiB,kBAAkBnB;IAExB,oEAAoE;IACpE,yEAAyE;IACzE,wEAAwE;IACxE,yEAAyE;IACzE,MAAMoB,sBAAsBtB,YAAY;QACtCuB,WAAWC,YAAY,CAACH,gBAAgBI,OAAO;QAC/CJ,gBAAgBI,OAAO,GAAGF,WAAWG,UAAU,CAAC;YAC9CN;QACF,GAAG;IACL,GAAG;QAACA;KAAa;IAEjBnB,UAAU;QACR,IAAIW,iBAAiB;YACnB;QACF;QAEAW,WAAWI,gBAAgB,CAAC,aAAaT;QACzCK,WAAWI,gBAAgB,CAAC,YAAYL;QACxC,OAAO;YACLC,WAAWC,YAAY,CAACH,gBAAgBI,OAAO;YAC/CF,WAAWK,mBAAmB,CAAC,aAAaV;YAC5CK,WAAWK,mBAAmB,CAAC,YAAYN;QAC7C;IACF,GAAG;QAACA;QAAqBV;QAAiBM;KAAc;IAExD,OAAO;QACLL;QACAG;QACAa,kBAAkB;YAChB,mDAAmD;YACnD,sEAAsE;YACtE,uEAAuE;YACvE,iBAAiB;YACjB,EAAE;YACF,iEAAiE;YACjE,mDAAmD;YACnDrB,QAAOsB,KAAK;gBACVA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBT,WAAWC,YAAY,CAACH,gBAAgBI,OAAO;gBAC/CjB,OAAOsB;gBACPhB,QAAQ;gBACRM;YACF;YACAX,YAAWqB,KAAK;gBACdA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBT,WAAWC,YAAY,CAACH,gBAAgBI,OAAO;gBAC/ChB,WAAWqB;gBACXhB,QAAQ;YACV;YACAJ,aAAYoB,KAAK;gBACfA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBtB,YAAYoB;gBACZhB,QAAQ;YACV;YACAH,aAAYmB,KAAK;gBACfA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBrB,YAAYmB;gBACZhB,QAAQ;gBACR,iFAAiF;gBACjF,uCAAuC;gBACvCQ;YACF;QACF;IACF;AACF"}

package/dist/useEnsuredState.js

@@ -7,18 +7,18 @@
  * @since 6.0.0
  */ export function useEnsuredState(options) {
     const { name = "value", value, setValue, defaultValue } = options;
-    if (typeof value !== "undefined" && typeof setValue !== "undefined") {
+    if (value !== undefined && setValue !== undefined) {
         return [
             value,
             setValue
         ];
     }
-    if (typeof value !== "undefined" || typeof setValue !== "undefined") {
-        const pascalName = name.charAt(0).toUpperCase() + name.substring(1);
+    if (value !== undefined || setValue !== undefined) {
+        const pascalName = name.charAt(0).toUpperCase() + name.slice(1);
         throw new Error(`Both a \`${name}\` and \`set${pascalName}\` must be defined for controlled components.`);
     }
-    if (typeof defaultValue === "undefined") {
-        const pascalName = name.charAt(0).toUpperCase() + name.substring(1);
+    if (defaultValue === undefined) {
+        const pascalName = name.charAt(0).toUpperCase() + name.slice(1);
         throw new Error(`A \`default${pascalName}\` must be defined for uncontrolled components.`);
     }
     return useState(defaultValue);

package/dist/useEnsuredState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useEnsuredState.ts"],"sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport type { Dispatch } from \"react\";\nimport { useState } from \"react\";\n\nimport type { UseStateInitializer, UseStateSetter } from \"./types.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface EnsuredStateOptions<\n  V,\n  Setter extends Dispatch<V> | UseStateSetter<V> = UseStateSetter<V>,\n> {\n  name?: string;\n  value?: V;\n  setValue?: Setter;\n  defaultValue?: UseStateInitializer<V>;\n}\n\n/**\n * This is used to dynamically allow controlling hooks by providing a `value` +\n * `setValue` or defaulting to uncontrolled behavior with local state.\n *\n * @internal\n * @since 6.0.0\n */\nexport function useEnsuredState<\n  V,\n  Setter extends Dispatch<V> | UseStateSetter<V>,\n>(\n  options: EnsuredStateOptions<V, Setter>\n): readonly [value: V, setValue: Setter] {\n  const { name = \"value\", value, setValue, defaultValue } = options;\n  if (typeof value !== \"undefined\" && typeof setValue !== \"undefined\") {\n    return [value, setValue];\n  }\n\n  if (typeof value !== \"undefined\" || typeof setValue !== \"undefined\") {\n    const pascalName = name.charAt(0).toUpperCase() + name.substring(1);\n    throw new Error(\n      `Both a \\`${name}\\` and \\`set${pascalName}\\` must be defined for controlled components.`\n    );\n  }\n\n  if (typeof defaultValue === \"undefined\") {\n    const pascalName = name.charAt(0).toUpperCase() + name.substring(1);\n    throw new Error(\n      `A \\`default${pascalName}\\` must be defined for uncontrolled components.`\n    );\n  }\n\n  return useState(defaultValue) as [value: V, setValue: Setter];\n}\n"],"names":["useState","useEnsuredState","options","name","value","setValue","defaultValue","pascalName","charAt","toUpperCase","substring","Error"],"mappings":"AAAA,6CAA6C,GAE7C,SAASA,QAAQ,QAAQ,QAAQ;AAkBjC;;;;;;CAMC,GACD,OAAO,SAASC,gBAIdC,OAAuC;IAEvC,MAAM,EAAEC,OAAO,OAAO,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGJ;IAC1D,IAAI,OAAOE,UAAU,eAAe,OAAOC,aAAa,aAAa;QACnE,OAAO;YAACD;YAAOC;SAAS;IAC1B;IAEA,IAAI,OAAOD,UAAU,eAAe,OAAOC,aAAa,aAAa;QACnE,MAAME,aAAaJ,KAAKK,MAAM,CAAC,GAAGC,WAAW,KAAKN,KAAKO,SAAS,CAAC;QACjE,MAAM,IAAIC,MACR,CAAC,SAAS,EAAER,KAAK,YAAY,EAAEI,WAAW,6CAA6C,CAAC;IAE5F;IAEA,IAAI,OAAOD,iBAAiB,aAAa;QACvC,MAAMC,aAAaJ,KAAKK,MAAM,CAAC,GAAGC,WAAW,KAAKN,KAAKO,SAAS,CAAC;QACjE,MAAM,IAAIC,MACR,CAAC,WAAW,EAAEJ,WAAW,+CAA+C,CAAC;IAE7E;IAEA,OAAOP,SAASM;AAClB"}
+{"version":3,"sources":["../src/useEnsuredState.ts"],"sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport type { Dispatch } from \"react\";\nimport { useState } from \"react\";\n\nimport type { UseStateInitializer, UseStateSetter } from \"./types.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface EnsuredStateOptions<\n  V,\n  Setter extends Dispatch<V> | UseStateSetter<V> = UseStateSetter<V>,\n> {\n  name?: string;\n  value?: V;\n  setValue?: Setter;\n  defaultValue?: UseStateInitializer<V>;\n}\n\n/**\n * This is used to dynamically allow controlling hooks by providing a `value` +\n * `setValue` or defaulting to uncontrolled behavior with local state.\n *\n * @internal\n * @since 6.0.0\n */\nexport function useEnsuredState<\n  V,\n  Setter extends Dispatch<V> | UseStateSetter<V>,\n>(\n  options: EnsuredStateOptions<V, Setter>\n): readonly [value: V, setValue: Setter] {\n  const { name = \"value\", value, setValue, defaultValue } = options;\n  if (value !== undefined && setValue !== undefined) {\n    return [value, setValue];\n  }\n\n  if (value !== undefined || setValue !== undefined) {\n    const pascalName = name.charAt(0).toUpperCase() + name.slice(1);\n    throw new Error(\n      `Both a \\`${name}\\` and \\`set${pascalName}\\` must be defined for controlled components.`\n    );\n  }\n\n  if (defaultValue === undefined) {\n    const pascalName = name.charAt(0).toUpperCase() + name.slice(1);\n    throw new Error(\n      `A \\`default${pascalName}\\` must be defined for uncontrolled components.`\n    );\n  }\n\n  return useState(defaultValue) as [value: V, setValue: Setter];\n}\n"],"names":["useState","useEnsuredState","options","name","value","setValue","defaultValue","undefined","pascalName","charAt","toUpperCase","slice","Error"],"mappings":"AAAA,6CAA6C,GAE7C,SAASA,QAAQ,QAAQ,QAAQ;AAkBjC;;;;;;CAMC,GACD,OAAO,SAASC,gBAIdC,OAAuC;IAEvC,MAAM,EAAEC,OAAO,OAAO,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGJ;IAC1D,IAAIE,UAAUG,aAAaF,aAAaE,WAAW;QACjD,OAAO;YAACH;YAAOC;SAAS;IAC1B;IAEA,IAAID,UAAUG,aAAaF,aAAaE,WAAW;QACjD,MAAMC,aAAaL,KAAKM,MAAM,CAAC,GAAGC,WAAW,KAAKP,KAAKQ,KAAK,CAAC;QAC7D,MAAM,IAAIC,MACR,CAAC,SAAS,EAAET,KAAK,YAAY,EAAEK,WAAW,6CAA6C,CAAC;IAE5F;IAEA,IAAIF,iBAAiBC,WAAW;QAC9B,MAAMC,aAAaL,KAAKM,MAAM,CAAC,GAAGC,WAAW,KAAKP,KAAKQ,KAAK,CAAC;QAC7D,MAAM,IAAIC,MACR,CAAC,WAAW,EAAEJ,WAAW,+CAA+C,CAAC;IAE7E;IAEA,OAAOR,SAASM;AAClB"}

package/dist/useIntersectionObserver.js

@@ -73,7 +73,7 @@ import { useEnsuredRef } from "./useEnsuredRef.js";
                 element
             ];
         }
-        if (disabled || !targets.length) {
+        if (disabled || targets.length === 0) {
             return;
         }
         let resolvedRoot;
@@ -96,9 +96,9 @@ import { useEnsuredRef } from "./useEnsuredRef.js";
         // - when cleaning up, check if there are any other existing callbacks
         //   - disconnect and remove the observer if there are none left
         const observer = new IntersectionObserver(onUpdate, options);
-        targets.forEach((target)=>{
+        for (const target of targets){
             observer.observe(target);
-        });
+        }
         return ()=>{
             observer.disconnect();
         };