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

package/dist/tree/Tree.d.ts

@@ -79,12 +79,10 @@ export interface TreeProps<T extends TreeItemNode> extends TreeHTMLAttributes, T
     /**
      * @example Custom Tree Item Renderer
      * ```tsx
-     * import {
-     *   TreeItem,
-     *   useKeyboardMovementContext,
-     *   useTreeContext,
-     *   type TreeItemRendererProps,
-     * } from "@react-md/core";
+     * import { useTreeContext } from "@react-md/core/movement/TreeProvider"
+     * import { useKeyboardMovementContext } from "@react-md/core/movement/useKeyboardMovementProvider"
+     * import { TreeItem } from "@react-md/core/tree/TreeItem";
+     * import { type TreeItemRendererProps } from "@react-md/core/tree/types";
      * import FolderIcon from "@react-md/material-icons/FolderIcon";
      * import FolderOpenIcon from "@react-md/material-icons/FolderOpenIcon";
      * import { type ReactElement } from "react";
@@ -138,8 +136,9 @@ export interface TreeProps<T extends TreeItemNode> extends TreeHTMLAttributes, T
  *
  * @example Simple Tree
  * ```tsx
- * import type { TreeData } from "@react-md/core";
- * import { Tree, useTree } from "@react-md/core";
+ * import { Tree } from "@react-md/core/tree/Tree";
+ * import { type TreeData } from "@react-md/core/tree/types";
+ * import { useTree } from "@react-md/core/tree/useTree";
  * import type { ReactElement } from "react";
  *
  * const data: TreeData = {
@@ -180,8 +179,8 @@ export interface TreeProps<T extends TreeItemNode> extends TreeHTMLAttributes, T
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @see {@link TreeProps.renderer} for a custom tree item example.
- *
  * @since 6.0.0 There was a major API change and the `id` is now `optional`.
  * In addition, the following props were removed:
  * - `itemRenderer`

package/dist/tree/Tree.js

@@ -15,8 +15,9 @@ import { useTreeMovement } from "./useTreeMovement.js";
  *
  * @example Simple Tree
  * ```tsx
- * import type { TreeData } from "@react-md/core";
- * import { Tree, useTree } from "@react-md/core";
+ * import { Tree } from "@react-md/core/tree/Tree";
+ * import { type TreeData } from "@react-md/core/tree/types";
+ * import { useTree } from "@react-md/core/tree/useTree";
  * import type { ReactElement } from "react";
  *
  * const data: TreeData = {
@@ -57,8 +58,8 @@ import { useTreeMovement } from "./useTreeMovement.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @see {@link TreeProps.renderer} for a custom tree item example.
- *
  * @since 6.0.0 There was a major API change and the `id` is now `optional`.
  * In addition, the following props were removed:
  * - `itemRenderer`

package/dist/tree/Tree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/Tree.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ComponentType,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { List } from \"../list/List.js\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { RenderRecursively } from \"../utils/RenderRecursively.js\";\nimport { identity } from \"../utils/identity.js\";\nimport { DefaultTreeItemRenderer } from \"./DefaultTreeItemRenderer.js\";\nimport { type TreeExpansionMode, TreeProvider } from \"./TreeProvider.js\";\nimport { tree } from \"./styles.js\";\nimport {\n  type TreeData,\n  type TreeItemNode,\n  type TreeItemRendererProps,\n  type TreeItemSorter,\n} from \"./types.js\";\nimport { type TreeExpansion } from \"./useTreeExpansion.js\";\nimport { useTreeItems } from \"./useTreeItems.js\";\nimport { useTreeMovement } from \"./useTreeMovement.js\";\nimport { type TreeSelection } from \"./useTreeSelection.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tree-depth\"?: number;\n    \"--rmd-tree-item-padding\"?: string | number;\n    \"--rmd-tree-item-padding-base\"?: string | number;\n    \"--rmd-tree-item-padding-incrementor\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport type TreeHTMLAttributes = Omit<\n  HTMLAttributes<HTMLUListElement>,\n  \"role\" | \"tabIndex\" | \"children\"\n>;\n\n/**\n * @since 6.0.0 There was a major API change and the `id` is now `optional`.\n * In addition, the following props were removed:\n * - `itemRenderer`\n * - `labelKey`\n * - `valueKey`\n * - `getItemLabel`\n * - `getItemValue`\n * - `getItemProps`\n */\nexport interface TreeProps<T extends TreeItemNode>\n  extends TreeHTMLAttributes,\n    TreeExpansion,\n    TreeSelection {\n  /** @see {@link TreeData} */\n  data: TreeData<T>;\n\n  /**\n   * An optional ref to pass to the tree element.\n   *\n   * @since 6.0.0\n   */\n  treeRef?: Ref<HTMLUListElement>;\n\n  /** @defaultValue `identity` */\n  sort?: TreeItemSorter<T>;\n\n  /**\n   * Any nodes in the {@link data} that have a `parentId` set to this value will\n   * appear at the root of the tree.\n   *\n   * @defaultValue `null`\n   */\n  rootId?: string | null;\n\n  /**\n   * @defaultValue `\"auto\"`\n   * @see {@link TreeExpansionMode}\n   */\n  expansionMode?: TreeExpansionMode;\n\n  /**\n   * Set this to `true` to display the expander icon to the left instead of the\n   * right. This will also update the styles slightly so you can still provide a\n   * `leftAddon`.\n   *\n   * @defaultValue `false`\n   */\n  expanderLeft?: boolean;\n\n  /**\n   * @defaultValue `getIcon(\"expander\")`\n   */\n  expanderIcon?: ReactNode;\n\n  /**\n   * Set this to `true` to disable the collapse transition for all tree items.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * Set this to `true` if the collapsed tree items should be removed from the\n   * DOM instead of hidden using `display: none`. This _might_ improve\n   * performance for large trees.\n   *\n   * @defaultValue `false`\n   */\n  temporaryChildItems?: boolean;\n\n  /**\n   * @example Custom Tree Item Renderer\n   * ```tsx\n   * import {\n   *   TreeItem,\n   *   useKeyboardMovementContext,\n   *   useTreeContext,\n   *   type TreeItemRendererProps,\n   * } from \"@react-md/core\";\n   * import FolderIcon from \"@react-md/material-icons/FolderIcon\";\n   * import FolderOpenIcon from \"@react-md/material-icons/FolderOpenIcon\";\n   * import { type ReactElement } from \"react\";\n   *\n   * export function CustomTreeItem(props: TreeItemRendererProps): ReactElement {\n   *   const { item, ...remaining  } = props;\n   *   const id = useId();\n   *   const { itemId } = item;\n   *   const {\n   *     data,\n   *     expandedIds,\n   *     selectedIds,\n   *     toggleTreeItemExpansion,\n   *     toggleTreeItemSelection,\n   *   } = useTreeContext()\n   *   const { activeDescendantId } = useKeyboardMovementContext();\n   *\n   *   const focused = id === activeDescendantId;\n   *   const expanded = expandedIds.has(itemId);\n   *   const selected = selectedIds.has(itemId);\n   *   const children = ...; // do whatever\n   *\n   *   return (\n   *     <TreeItem\n   *       {...remaining}\n   *       id={id}\n   *       itemId={itemId}\n   *       leftAddon={expanded ? <FolderOpenIcon /> : <FolderIcon />}\n   *     >\n   *       {children}\n   *     </TreeItem>\n   *   );\n   * }\n   * ```\n   *\n   * @see {@link DefaultTreeItemRenderer}\n   * @defaultValue `DefaultTreeItemRenderer`\n   */\n  renderer?: ComponentType<TreeItemRendererProps<T>>;\n\n  /**\n   * The link component to use for any tree item nodes that have a `to` or\n   * `href`.\n   *\n   * @see {@link CustomLinkComponent}\n   * @defaultValue `Link`\n   */\n  linkComponent?: CustomLinkComponent;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Tree\n * ```tsx\n * import type { TreeData } from \"@react-md/core\";\n * import { Tree, useTree } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * const data: TreeData = {\n *   \"item-1\": {\n *     itemId: \"item-1\",\n *     parentId: null,\n *     name: \"Root Level Item 1\",\n *   },\n *   \"item-2\": {\n *     itemId: \"item-2\",\n *     parentId: \"item-1\",\n *     name: \"A child for the first item\",\n *   },\n *   \"item-3\": {\n *     itemId: \"item-3\",\n *     parentId: \"item-1\",\n *     children: \"Another child for the first item\",\n *   },\n * };\n *\n * function Example(): ReactElement {\n *   const tree = useTree({\n *     // can enable multiple selected items\n *     // multiSelect: true,\n *\n *     // can set default expanded and selected items\n *     // defaultSelectedIds: [\"item-1\"],\n *     // defaultExpandedIds: [\"item-1\"],\n *   });\n *\n *   return (\n *     <Tree\n *       {...tree}\n *       aria-label=\"Tree\"\n *       data={data}\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link TreeProps.renderer} for a custom tree item example.\n *\n * @since 6.0.0 There was a major API change and the `id` is now `optional`.\n * In addition, the following props were removed:\n * - `itemRenderer`\n * - `labelKey`\n * - `valueKey`\n * - `getItemLabel`\n * - `getItemValue`\n * - `getItemProps`\n */\nexport function Tree<T extends TreeItemNode>(\n  props: LabelRequiredForA11y<TreeProps<T>>\n): ReactElement {\n  const {\n    id,\n    data,\n    sort = identity,\n    rootId = null,\n    treeRef,\n    className,\n    expandedIds,\n    selectedIds,\n    toggleTreeItemSelection,\n    selectMultipleTreeItems,\n    toggleTreeItemExpansion,\n    expandMultipleTreeItems,\n    onClick,\n    onFocus,\n    onKeyDown,\n    renderer: TreeItemRenderer = DefaultTreeItemRenderer,\n    multiSelect = false,\n    expansionMode = \"auto\",\n    expanderIcon,\n    expanderLeft = false,\n    linkComponent = \"a\",\n    disableTransition = false,\n    temporaryChildItems = false,\n    ...remaining\n  } = props;\n  const treeId = useEnsuredId(id, \"tree\");\n  const { items, treeItemChildIds } = useTreeItems({\n    data,\n    sort,\n    rootId,\n  });\n\n  const { metadataLookup, movementContext, movementProps } = useTreeMovement({\n    onClick,\n    onFocus,\n    onKeyDown,\n    data,\n    expandedIds,\n    selectedIds,\n    treeItemChildIds,\n    toggleTreeItemExpansion,\n    expandMultipleTreeItems,\n  });\n\n  return (\n    <TreeProvider\n      data={data}\n      rootId={rootId}\n      multiSelect={multiSelect}\n      linkComponent={linkComponent}\n      selectedIds={selectedIds}\n      expandedIds={expandedIds}\n      expanderIcon={expanderIcon}\n      expanderLeft={expanderLeft}\n      expansionMode={expansionMode}\n      metadataLookup={metadataLookup}\n      disableTransition={disableTransition}\n      temporaryChildItems={temporaryChildItems}\n      toggleTreeItemSelection={toggleTreeItemSelection}\n      toggleTreeItemExpansion={toggleTreeItemExpansion}\n      selectMultipleTreeItems={selectMultipleTreeItems}\n      expandMultipleTreeItems={expandMultipleTreeItems}\n    >\n      <KeyboardMovementProvider value={movementContext}>\n        <List\n          {...remaining}\n          {...movementProps}\n          id={treeId}\n          ref={treeRef}\n          role=\"tree\"\n          tabIndex={0}\n          className={tree({ className })}\n        >\n          <RenderRecursively\n            items={items}\n            render={TreeItemRenderer}\n            getItemKey={(options) => options.item.itemId}\n          />\n        </List>\n      </KeyboardMovementProvider>\n    </TreeProvider>\n  );\n}\n"],"names":["List","KeyboardMovementProvider","useEnsuredId","RenderRecursively","identity","DefaultTreeItemRenderer","TreeProvider","tree","useTreeItems","useTreeMovement","Tree","props","id","data","sort","rootId","treeRef","className","expandedIds","selectedIds","toggleTreeItemSelection","selectMultipleTreeItems","toggleTreeItemExpansion","expandMultipleTreeItems","onClick","onFocus","onKeyDown","renderer","TreeItemRenderer","multiSelect","expansionMode","expanderIcon","expanderLeft","linkComponent","disableTransition","temporaryChildItems","remaining","treeId","items","treeItemChildIds","metadataLookup","movementContext","movementProps","value","ref","role","tabIndex","render","getItemKey","options","item","itemId"],"mappings":"AAAA;;AAWA,SAASA,IAAI,QAAQ,kBAAkB;AACvC,SAASC,wBAAwB,QAAQ,6CAA6C;AAEtF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,uBAAuB,QAAQ,+BAA+B;AACvE,SAAiCC,YAAY,QAAQ,oBAAoB;AACzE,SAASC,IAAI,QAAQ,cAAc;AAQnC,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAASC,eAAe,QAAQ,uBAAuB;AAsJvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDC,GACD,OAAO,SAASC,KACdC,KAAyC;IAEzC,MAAM,EACJC,EAAE,EACFC,IAAI,EACJC,OAAOV,QAAQ,EACfW,SAAS,IAAI,EACbC,OAAO,EACPC,SAAS,EACTC,WAAW,EACXC,WAAW,EACXC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,UAAUC,mBAAmBvB,uBAAuB,EACpDwB,cAAc,KAAK,EACnBC,gBAAgB,MAAM,EACtBC,YAAY,EACZC,eAAe,KAAK,EACpBC,gBAAgB,GAAG,EACnBC,oBAAoB,KAAK,EACzBC,sBAAsB,KAAK,EAC3B,GAAGC,WACJ,GAAGzB;IACJ,MAAM0B,SAASnC,aAAaU,IAAI;IAChC,MAAM,EAAE0B,KAAK,EAAEC,gBAAgB,EAAE,GAAG/B,aAAa;QAC/CK;QACAC;QACAC;IACF;IAEA,MAAM,EAAEyB,cAAc,EAAEC,eAAe,EAAEC,aAAa,EAAE,GAAGjC,gBAAgB;QACzEe;QACAC;QACAC;QACAb;QACAK;QACAC;QACAoB;QACAjB;QACAC;IACF;IAEA,qBACE,KAACjB;QACCO,MAAMA;QACNE,QAAQA;QACRc,aAAaA;QACbI,eAAeA;QACfd,aAAaA;QACbD,aAAaA;QACba,cAAcA;QACdC,cAAcA;QACdF,eAAeA;QACfU,gBAAgBA;QAChBN,mBAAmBA;QACnBC,qBAAqBA;QACrBf,yBAAyBA;QACzBE,yBAAyBA;QACzBD,yBAAyBA;QACzBE,yBAAyBA;kBAEzB,cAAA,KAACtB;YAAyB0C,OAAOF;sBAC/B,cAAA,KAACzC;gBACE,GAAGoC,SAAS;gBACZ,GAAGM,aAAa;gBACjB9B,IAAIyB;gBACJO,KAAK5B;gBACL6B,MAAK;gBACLC,UAAU;gBACV7B,WAAWV,KAAK;oBAAEU;gBAAU;0BAE5B,cAAA,KAACd;oBACCmC,OAAOA;oBACPS,QAAQnB;oBACRoB,YAAY,CAACC,UAAYA,QAAQC,IAAI,CAACC,MAAM;;;;;AAMxD"}
+{"version":3,"sources":["../../src/tree/Tree.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ComponentType,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { List } from \"../list/List.js\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { RenderRecursively } from \"../utils/RenderRecursively.js\";\nimport { identity } from \"../utils/identity.js\";\nimport { DefaultTreeItemRenderer } from \"./DefaultTreeItemRenderer.js\";\nimport { type TreeExpansionMode, TreeProvider } from \"./TreeProvider.js\";\nimport { tree } from \"./styles.js\";\nimport {\n  type TreeData,\n  type TreeItemNode,\n  type TreeItemRendererProps,\n  type TreeItemSorter,\n} from \"./types.js\";\nimport { type TreeExpansion } from \"./useTreeExpansion.js\";\nimport { useTreeItems } from \"./useTreeItems.js\";\nimport { useTreeMovement } from \"./useTreeMovement.js\";\nimport { type TreeSelection } from \"./useTreeSelection.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tree-depth\"?: number;\n    \"--rmd-tree-item-padding\"?: string | number;\n    \"--rmd-tree-item-padding-base\"?: string | number;\n    \"--rmd-tree-item-padding-incrementor\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport type TreeHTMLAttributes = Omit<\n  HTMLAttributes<HTMLUListElement>,\n  \"role\" | \"tabIndex\" | \"children\"\n>;\n\n/**\n * @since 6.0.0 There was a major API change and the `id` is now `optional`.\n * In addition, the following props were removed:\n * - `itemRenderer`\n * - `labelKey`\n * - `valueKey`\n * - `getItemLabel`\n * - `getItemValue`\n * - `getItemProps`\n */\nexport interface TreeProps<T extends TreeItemNode>\n  extends TreeHTMLAttributes,\n    TreeExpansion,\n    TreeSelection {\n  /** @see {@link TreeData} */\n  data: TreeData<T>;\n\n  /**\n   * An optional ref to pass to the tree element.\n   *\n   * @since 6.0.0\n   */\n  treeRef?: Ref<HTMLUListElement>;\n\n  /** @defaultValue `identity` */\n  sort?: TreeItemSorter<T>;\n\n  /**\n   * Any nodes in the {@link data} that have a `parentId` set to this value will\n   * appear at the root of the tree.\n   *\n   * @defaultValue `null`\n   */\n  rootId?: string | null;\n\n  /**\n   * @defaultValue `\"auto\"`\n   * @see {@link TreeExpansionMode}\n   */\n  expansionMode?: TreeExpansionMode;\n\n  /**\n   * Set this to `true` to display the expander icon to the left instead of the\n   * right. This will also update the styles slightly so you can still provide a\n   * `leftAddon`.\n   *\n   * @defaultValue `false`\n   */\n  expanderLeft?: boolean;\n\n  /**\n   * @defaultValue `getIcon(\"expander\")`\n   */\n  expanderIcon?: ReactNode;\n\n  /**\n   * Set this to `true` to disable the collapse transition for all tree items.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * Set this to `true` if the collapsed tree items should be removed from the\n   * DOM instead of hidden using `display: none`. This _might_ improve\n   * performance for large trees.\n   *\n   * @defaultValue `false`\n   */\n  temporaryChildItems?: boolean;\n\n  /**\n   * @example Custom Tree Item Renderer\n   * ```tsx\n   * import { useTreeContext } from \"@react-md/core/movement/TreeProvider\"\n   * import { useKeyboardMovementContext } from \"@react-md/core/movement/useKeyboardMovementProvider\"\n   * import { TreeItem } from \"@react-md/core/tree/TreeItem\";\n   * import { type TreeItemRendererProps } from \"@react-md/core/tree/types\";\n   * import FolderIcon from \"@react-md/material-icons/FolderIcon\";\n   * import FolderOpenIcon from \"@react-md/material-icons/FolderOpenIcon\";\n   * import { type ReactElement } from \"react\";\n   *\n   * export function CustomTreeItem(props: TreeItemRendererProps): ReactElement {\n   *   const { item, ...remaining  } = props;\n   *   const id = useId();\n   *   const { itemId } = item;\n   *   const {\n   *     data,\n   *     expandedIds,\n   *     selectedIds,\n   *     toggleTreeItemExpansion,\n   *     toggleTreeItemSelection,\n   *   } = useTreeContext()\n   *   const { activeDescendantId } = useKeyboardMovementContext();\n   *\n   *   const focused = id === activeDescendantId;\n   *   const expanded = expandedIds.has(itemId);\n   *   const selected = selectedIds.has(itemId);\n   *   const children = ...; // do whatever\n   *\n   *   return (\n   *     <TreeItem\n   *       {...remaining}\n   *       id={id}\n   *       itemId={itemId}\n   *       leftAddon={expanded ? <FolderOpenIcon /> : <FolderIcon />}\n   *     >\n   *       {children}\n   *     </TreeItem>\n   *   );\n   * }\n   * ```\n   *\n   * @see {@link DefaultTreeItemRenderer}\n   * @defaultValue `DefaultTreeItemRenderer`\n   */\n  renderer?: ComponentType<TreeItemRendererProps<T>>;\n\n  /**\n   * The link component to use for any tree item nodes that have a `to` or\n   * `href`.\n   *\n   * @see {@link CustomLinkComponent}\n   * @defaultValue `Link`\n   */\n  linkComponent?: CustomLinkComponent;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Tree\n * ```tsx\n * import { Tree } from \"@react-md/core/tree/Tree\";\n * import { type TreeData } from \"@react-md/core/tree/types\";\n * import { useTree } from \"@react-md/core/tree/useTree\";\n * import type { ReactElement } from \"react\";\n *\n * const data: TreeData = {\n *   \"item-1\": {\n *     itemId: \"item-1\",\n *     parentId: null,\n *     name: \"Root Level Item 1\",\n *   },\n *   \"item-2\": {\n *     itemId: \"item-2\",\n *     parentId: \"item-1\",\n *     name: \"A child for the first item\",\n *   },\n *   \"item-3\": {\n *     itemId: \"item-3\",\n *     parentId: \"item-1\",\n *     children: \"Another child for the first item\",\n *   },\n * };\n *\n * function Example(): ReactElement {\n *   const tree = useTree({\n *     // can enable multiple selected items\n *     // multiSelect: true,\n *\n *     // can set default expanded and selected items\n *     // defaultSelectedIds: [\"item-1\"],\n *     // defaultExpandedIds: [\"item-1\"],\n *   });\n *\n *   return (\n *     <Tree\n *       {...tree}\n *       aria-label=\"Tree\"\n *       data={data}\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/tree | Tree Demos}\n * @see {@link TreeProps.renderer} for a custom tree item example.\n * @since 6.0.0 There was a major API change and the `id` is now `optional`.\n * In addition, the following props were removed:\n * - `itemRenderer`\n * - `labelKey`\n * - `valueKey`\n * - `getItemLabel`\n * - `getItemValue`\n * - `getItemProps`\n */\nexport function Tree<T extends TreeItemNode>(\n  props: LabelRequiredForA11y<TreeProps<T>>\n): ReactElement {\n  const {\n    id,\n    data,\n    sort = identity,\n    rootId = null,\n    treeRef,\n    className,\n    expandedIds,\n    selectedIds,\n    toggleTreeItemSelection,\n    selectMultipleTreeItems,\n    toggleTreeItemExpansion,\n    expandMultipleTreeItems,\n    onClick,\n    onFocus,\n    onKeyDown,\n    renderer: TreeItemRenderer = DefaultTreeItemRenderer,\n    multiSelect = false,\n    expansionMode = \"auto\",\n    expanderIcon,\n    expanderLeft = false,\n    linkComponent = \"a\",\n    disableTransition = false,\n    temporaryChildItems = false,\n    ...remaining\n  } = props;\n  const treeId = useEnsuredId(id, \"tree\");\n  const { items, treeItemChildIds } = useTreeItems({\n    data,\n    sort,\n    rootId,\n  });\n\n  const { metadataLookup, movementContext, movementProps } = useTreeMovement({\n    onClick,\n    onFocus,\n    onKeyDown,\n    data,\n    expandedIds,\n    selectedIds,\n    treeItemChildIds,\n    toggleTreeItemExpansion,\n    expandMultipleTreeItems,\n  });\n\n  return (\n    <TreeProvider\n      data={data}\n      rootId={rootId}\n      multiSelect={multiSelect}\n      linkComponent={linkComponent}\n      selectedIds={selectedIds}\n      expandedIds={expandedIds}\n      expanderIcon={expanderIcon}\n      expanderLeft={expanderLeft}\n      expansionMode={expansionMode}\n      metadataLookup={metadataLookup}\n      disableTransition={disableTransition}\n      temporaryChildItems={temporaryChildItems}\n      toggleTreeItemSelection={toggleTreeItemSelection}\n      toggleTreeItemExpansion={toggleTreeItemExpansion}\n      selectMultipleTreeItems={selectMultipleTreeItems}\n      expandMultipleTreeItems={expandMultipleTreeItems}\n    >\n      <KeyboardMovementProvider value={movementContext}>\n        <List\n          {...remaining}\n          {...movementProps}\n          id={treeId}\n          ref={treeRef}\n          role=\"tree\"\n          tabIndex={0}\n          className={tree({ className })}\n        >\n          <RenderRecursively\n            items={items}\n            render={TreeItemRenderer}\n            getItemKey={(options) => options.item.itemId}\n          />\n        </List>\n      </KeyboardMovementProvider>\n    </TreeProvider>\n  );\n}\n"],"names":["List","KeyboardMovementProvider","useEnsuredId","RenderRecursively","identity","DefaultTreeItemRenderer","TreeProvider","tree","useTreeItems","useTreeMovement","Tree","props","id","data","sort","rootId","treeRef","className","expandedIds","selectedIds","toggleTreeItemSelection","selectMultipleTreeItems","toggleTreeItemExpansion","expandMultipleTreeItems","onClick","onFocus","onKeyDown","renderer","TreeItemRenderer","multiSelect","expansionMode","expanderIcon","expanderLeft","linkComponent","disableTransition","temporaryChildItems","remaining","treeId","items","treeItemChildIds","metadataLookup","movementContext","movementProps","value","ref","role","tabIndex","render","getItemKey","options","item","itemId"],"mappings":"AAAA;;AAWA,SAASA,IAAI,QAAQ,kBAAkB;AACvC,SAASC,wBAAwB,QAAQ,6CAA6C;AAEtF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,uBAAuB,QAAQ,+BAA+B;AACvE,SAAiCC,YAAY,QAAQ,oBAAoB;AACzE,SAASC,IAAI,QAAQ,cAAc;AAQnC,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAASC,eAAe,QAAQ,uBAAuB;AAoJvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DC,GACD,OAAO,SAASC,KACdC,KAAyC;IAEzC,MAAM,EACJC,EAAE,EACFC,IAAI,EACJC,OAAOV,QAAQ,EACfW,SAAS,IAAI,EACbC,OAAO,EACPC,SAAS,EACTC,WAAW,EACXC,WAAW,EACXC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,UAAUC,mBAAmBvB,uBAAuB,EACpDwB,cAAc,KAAK,EACnBC,gBAAgB,MAAM,EACtBC,YAAY,EACZC,eAAe,KAAK,EACpBC,gBAAgB,GAAG,EACnBC,oBAAoB,KAAK,EACzBC,sBAAsB,KAAK,EAC3B,GAAGC,WACJ,GAAGzB;IACJ,MAAM0B,SAASnC,aAAaU,IAAI;IAChC,MAAM,EAAE0B,KAAK,EAAEC,gBAAgB,EAAE,GAAG/B,aAAa;QAC/CK;QACAC;QACAC;IACF;IAEA,MAAM,EAAEyB,cAAc,EAAEC,eAAe,EAAEC,aAAa,EAAE,GAAGjC,gBAAgB;QACzEe;QACAC;QACAC;QACAb;QACAK;QACAC;QACAoB;QACAjB;QACAC;IACF;IAEA,qBACE,KAACjB;QACCO,MAAMA;QACNE,QAAQA;QACRc,aAAaA;QACbI,eAAeA;QACfd,aAAaA;QACbD,aAAaA;QACba,cAAcA;QACdC,cAAcA;QACdF,eAAeA;QACfU,gBAAgBA;QAChBN,mBAAmBA;QACnBC,qBAAqBA;QACrBf,yBAAyBA;QACzBE,yBAAyBA;QACzBD,yBAAyBA;QACzBE,yBAAyBA;kBAEzB,cAAA,KAACtB;YAAyB0C,OAAOF;sBAC/B,cAAA,KAACzC;gBACE,GAAGoC,SAAS;gBACZ,GAAGM,aAAa;gBACjB9B,IAAIyB;gBACJO,KAAK5B;gBACL6B,MAAK;gBACLC,UAAU;gBACV7B,WAAWV,KAAK;oBAAEU;gBAAU;0BAE5B,cAAA,KAACd;oBACCmC,OAAOA;oBACPS,QAAQnB;oBACRoB,YAAY,CAACC,UAAYA,QAAQC,IAAI,CAACC,MAAM;;;;;AAMxD"}

package/dist/tree/TreeItem.d.ts

@@ -57,6 +57,7 @@ export interface TreeItemProps extends Omit<DefaultTreeItemNode, "parentId">, HT
 /**
  * **Client Component**
  *
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/treeview/}
  * @since 6.0.0 No longer forwards refs. The ref must be provided using
  * `contentRef` instead.

package/dist/tree/TreeItem.js

@@ -13,6 +13,7 @@ import { treeItem, treeItemContent, treeItemMedia } from "./styles.js";
 /**
  * **Client Component**
  *
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/treeview/}
  * @since 6.0.0 No longer forwards refs. The ref must be provided using
  * `contentRef` instead.

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 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>, HTMLLIElement>;\n\n  /**\n   * Any additional props to pass to the `TreeGroup` component.\n   */\n  groupProps?: PropsWithRef<OverridableTreeGroupProps, HTMLUListElement>;\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://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 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>, HTMLLIElement>;\n\n  /**\n   * Any additional props to pass to the `TreeGroup` component.\n   */\n  groupProps?: PropsWithRef<OverridableTreeGroupProps, HTMLUListElement>;\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://next.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":"AAAA;;AAEA,SAKEA,SAAS,QACJ,QAAQ;AAGf,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,0BAA0B,QAAQ,6CAA6C;AAExF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAAyCC,SAAS,QAAQ,iBAAiB;AAC3E,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,QAAQ,EAAEC,eAAe,EAAEC,aAAa,QAAQ,cAAc;AAkEvE;;;;;;;;;;;;;CAaC,GACD,OAAO,SAASC,SAASC,KAAoB;IAC3C,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,OAAO,EACPC,WAAW,KAAK,EAChBC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,UAAUC,YAAY,EACtBC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,eAAeC,iBAAiB,EAChCC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,EAClBC,UAAU,EACVC,cAAc,EACdC,kBAAkB,EAClBC,mBAAmB,EACnBC,mBAAmB,EACnBC,mBAAmB,EACnBC,+BAA+BC,iCAAiC,EAChEC,8BAA8B,EAC9BC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,aAAa,EACbC,kBAAkB,EAClBC,sBAAsB,EACtBC,SAAS,EACTC,UAAU,EACVC,gBAAgB,EAChBC,mBAAmB,EACnBC,mBAAmBC,qBAAqB,EACxCC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,UAAU,EACVC,aAAa,EACb,GAAGC,WACJ,GAAGpD;IAEJ,MAAMC,KAAKT,aAAaU,QAAQ;IAChC,MAAMM,WAAWnB,0BAA0BoB;IAC3C,IAAIJ,UAAU;QACZ,mEAAmE;QACnE,oBAAoB;QACpB+C,UAAUC,EAAE,GAAGC;QACfF,UAAUG,IAAI,GAAGD;IACnB;IAEA,MAAM,EACJE,WAAW,EACXC,WAAW,EACXC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,eAAeC,IAAI,EACnBC,uBAAuB,EACvBC,uBAAuB,EACvB3B,mBAAmB4B,wBAAwB,EAC5C,GAAGtE;IACJ,MAAM,EAAEuE,kBAAkB,EAAE,GAAG3E;IAE/B,MAAM4E,aAAa,CAACjC;IACpB,MAAMkC,UAAUF,uBAAuBjE;IACvC,MAAMoE,WAAWb,YAAYc,GAAG,CAAC3D;IACjC,MAAM4D,WAAWd,YAAYa,GAAG,CAAC3D;IACjC,MAAM0B,oBAAoBC,yBAAyB2B;IAEnD9E,UAAU;QACR,MAAMqF,SAASZ,eAAea,OAAO;QACrCD,OAAOE,UAAU,CAAC/D,OAAO,GAAG,CAACwD;QAC7BK,OAAOG,aAAa,CAAChE,OAAO,GAAGN;QAC/BmE,OAAOI,aAAa,CAAC3E,GAAG,GAAGU;QAC3B6D,OAAOK,aAAa,CAAClE,OAAO,GAAGV;QAE/B,OAAO;YACL,uDAAuD,GACvD,OAAOuE,OAAOG,aAAa,CAAChE,OAAO;YACnC,OAAO6D,OAAOE,UAAU,CAAC/D,OAAO;YAChC,OAAO6D,OAAOI,aAAa,CAAC3E,GAAG;YAC/B,OAAOuE,OAAOK,aAAa,CAAClE,OAAO;QACnC,sDAAsD,GACxD;IACF,GAAG;QAACV;QAAI2D;QAAgBjD;QAAQwD;QAAY9D;QAAUF;KAAM;IAE5D,MAAM,EAAE2E,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAC3C5F,sBAAqC;QACnC6F,MAAM9B,gBAAgB,SAASG;QAC/Bf;QACAC,SAAQ0C,KAAK;YACX1C,UAAU0C;YACVnB,wBAAwBpD;YACxB,IAAI,CAACwD,cAAcR,kBAAkB,UAAU;gBAC7CK,wBAAwBrD;YAC1B;QACF;QACA8B;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACA5C;IACF;IAEF,MAAM8E,SAAS,CAAC,CAAE/B,CAAAA,UAAUC,EAAE,IAAID,UAAUG,IAAI,AAAD;IAE/C,oEAAoE;IACpE,MAAM6B,mBAAoBD,SAASrB,OAAO;IAC1C,MAAMjD,gBACJ,AAACC,qBAAsB4C,CAAAA,gBAAgB9C,SAAQ,IAAM,UAAU0C;IACjE,MAAM+B,mBACJ,OAAOvE,sBAAsB,eAAeD,kBAAkB;IAChE,MAAMW,gCACJC,qCAAqC4D;IAEvC,qBACE,MAACC;QACE,GAAGlF,OAAO;QACXmF,MAAK;QACL7E,WAAWd,SAAS;YAClBc;YACA8E,UAAU,CAAC,CAACtD;YACZwB;QACF;;0BAEA,MAAC0B;gBACE,GAAGhC,SAAS;gBACb,sEAAsE;gBACtE,+DAA+D;gBAC/DqC,iBAAetB,aAAab,YAAYe;gBACxCqB,iBAAenB;gBACfoB,iBAAetF,YAAYiD;gBAC3BrD,IAAIA;gBACJ2F,KAAK1C;gBACLqC,MAAK;gBACLM,UAAU,CAAC;gBACV,GAAGb,QAAQ;gBACZtE,WAAWb,gBAAgB;oBACzBiG,MAAMX;oBACNf;oBACAG;oBACAlE;oBACAC;oBACAI,WAAWyB;oBACX2C;gBACF;;kCAEA,KAACxF;wBACC2C,WAAWA;wBACXL,eAAeA;wBACfI,wBAAwBA;wBACxBT,qBAAqBA;wBACrBM,aAAaA;wBACbF,WAAWA;wBACXG,eAAeA;wBACfC,oBAAoBA;wBACpBnB,yBACE,KAAClB;4BACCqG,MAAM;4BACNpF,QAAQA;4BACRqF,OAAOpF;4BACPyD,UAAUA;4BACVhE,UAAUA;4BACV8D,YAAYA;;wBAGhBtD,eAAeA;wBACfE,mBAAmBA;wBACnBC,oBAAoBlB,cAAc;4BAChCqE;4BACAkB;4BACA3E,WAAWM;wBACb;wBACAC,oBAAoBA;wBACpBC,0BACE,KAACxB;4BACCiB,QAAQA;4BACRqF,OAAO9E;4BACPmD,UAAUA;4BACVhE,UAAUA;4BACV8D,YAAYA;;wBAGhBhD,gBAAgBA;wBAChBC,oBAAoBA;wBACpBC,qBAAqBA;wBACrBC,qBAAqBA;wBACrBE,+BAA+BA;wBAC/BE,gCAAgCA;kCAE/BlB;;oBAEFuE;;;0BAEH,KAACtF;gBACCQ,IAAI,GAAGA,GAAG,MAAM,CAAC;gBACjBgG,WAAW7D;gBACXC,mBAAmBA;gBAClB,GAAG9B,UAAU;gBACdJ,OAAOA,QAAQ;gBACf+F,WAAW/B,cAAc,CAACE;0BAEzBnC;;;;AAIT"}

package/dist/tree/_tree.scss

@@ -1,3 +1,7 @@
+////
+/// @group tree
+////
+
 @use "sass:map";
 @use "../utils";
 @use "../icon/icon";
@@ -5,25 +9,76 @@
 @use "../typography/typography";
 @use "../interaction/interaction";
 
+/// Set to `true` to disable all the styles
+/// @type Boolean
 $disable-everything: false !default;
+
+/// Set to `true` to disable displaying the `TreeItem` expander to the left
+/// instead of the right.
+/// @type Boolean
 $disable-expander-left: false !default;
+
+/// Set to `true` to disable displaying the `TreeItem` expander to the left
+/// instead of the right.
+/// @type Boolean
 $disable-expander-left-as-media: false !default;
+
+/// Set to `true` if the `TreeItem` will never need to set the `leftAddonType`
+/// to `media` or `large-media`.
+/// @type Boolean
 $disable-expander-left-as-media-offset: false !default;
+
+/// Set to `true` to disable applying the default interaction selected
+/// background color while a `TreeItem` is selected.
+///
+/// @type Boolean
 $disable-selected-background-color: false !default;
 
+/// The default horizontal padding to apply to a `TreeItem`
+/// @type Number
 $item-padding-base: list.$item-horizontal-padding !default;
+
+/// The additional amount of padding to apply to each `TreeItem` that is not
+/// rendered at the root.
+///
+/// @see $item-padding
+/// @type Number
 $item-padding-incrementor: list.$item-horizontal-padding * 1.5 !default;
+
+/// The default `TreeItemExpander` rotation starting position when rendered as
+/// a `rightAddon`.
+/// @type Number
 $expander-right-from: icon.$rotate-from !default;
+
+/// The default `TreeItemExpander` rotation ending position when rendered as a
+/// `rightAddon`.
+/// @type Number
 $expander-right-to: 90deg !default;
+
+/// The default `TreeItemExpander` rotation starting position when rendered as
+/// a `leftAddon`.
+/// @type Number
 $expander-left-from: 0deg !default;
+
+/// The default `TreeItemExpander` rotation ending position when rendered as a
+/// `leftAddon`.
+/// @type Number
 $expander-left-to: -90deg !default;
 
+/// The default styles to apply when a `TreeItem` has been selected.
+/// @type Map
 $selected-styles: (
   font-weight: typography.$font-weight-bold,
 ) !default;
 
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
 $variables: (depth, item-padding, item-padding-base, item-padding-incrementor);
 
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value
+/// @returns {String} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "tree");
   @if $fallback {
@@ -33,22 +88,33 @@ $variables: (depth, item-padding, item-padding-base, item-padding-incrementor);
   @return var(#{$var});
 }
 
+/// @param {String} name - The supported variable name
+/// @param {any} value - The value to set the variable to. Supports `null` which
+/// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "tree")}: #{$value};
   }
 }
 
+/// @param {String} property - The css property to apply the variable to
+/// @param {String} name [$property] - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value if the variable
+/// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
-// must be defined after the `get-var` function
+/// The padding-left to apply to each `TreeItem`.
+///
+/// @ignore Must be defined after the `get-var` function
+/// @type String
 $item-padding: calc(
   get-var(depth) * get-var(item-padding-incrementor) +
     get-var(item-padding-base)
 ) !default;
 
+/// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(depth, 0);
@@ -58,6 +124,10 @@ $item-padding: calc(
   }
 }
 
+/// Generates all the styles based on feature flags.
+///
+/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
+/// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
     @include utils.optional-layer(tree, $disable-layer) {

package/dist/tree/types.d.ts

@@ -57,7 +57,7 @@ export interface DefaultTreeItemNode extends TreeItemNode, ListItemChildrenProps
 /**
  * @example Default Structure
  * ```tsx
- * import type { TreeData } from "@react-md/core";
+ * import { type TreeData } from "@react-md/core/tree/types";
  * import FolderIcon from "@react-md/material-icons/FolderIcon";
  *
  * export const MY_DATA: TreeData = {

package/dist/tree/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/types.ts"],"sourcesContent":["import { type ReactNode } from \"react\";\n\nimport { type ListItemChildrenProps } from \"../list/types.js\";\nimport { type UseStateInitializer } from \"../types.js\";\nimport { type RenderRecursiveItemsProps } from \"../utils/RenderRecursively.js\";\n\n/**\n * @since 6.0.0 This was renamed from `TreeItemIds`\n */\nexport interface TreeItemNode {\n  itemId: string;\n  parentId: string | null;\n}\n\n/**\n * The default tree item node allows for any props for rendering children within\n * list items and rendering links.\n *\n * @since 6.0.0\n */\nexport interface DefaultTreeItemNode\n  extends TreeItemNode,\n    ListItemChildrenProps {\n  /**\n   * If this is defined, the `TreeItem` will render the content within a `Link`\n   * instead of a `<span>`.\n   */\n  to?: string;\n\n  /**\n   * If this is defined, the `TreeItem` will render the content within a `Link`\n   * instead of a `<span>`.\n   */\n  href?: string;\n\n  /**\n   * This should only be provided if {@link to} or {@link href} exist on the\n   * node.\n   */\n  rel?: string;\n\n  /**\n   * This should only be provided if {@link to} or {@link href} exist on the\n   * node.\n   */\n  target?: string;\n\n  /**\n   * An alias for the {@link children} within a tree item. This will be used\n   * over the {@link children} if both exist.\n   */\n  name?: ReactNode;\n\n  /**\n   * The children to display in the tree item.\n   *\n   * @see {@link name}\n   */\n  children?: ReactNode;\n\n  /** @see {@link ListItemProps.disabled} */\n  disabled?: boolean;\n\n  /** @see {@link ListItemProps.disabledOpacity} */\n  disabledOpacity?: boolean;\n\n  className?: string;\n  contentClassName?: string;\n}\n\n/**\n * @example Default Structure\n * ```tsx\n * import type { TreeData } from \"@react-md/core\";\n * import FolderIcon from \"@react-md/material-icons/FolderIcon\";\n *\n * export const MY_DATA: TreeData = {\n *   \"item-1\": {\n *     itemId: \"item-1\",\n *     parentId: null,\n *     name: \"Root Level Item 1\",\n *   },\n *   \"item-2\": {\n *     itemId: \"item-2\",\n *     parentId: \"item-1\",\n *     name: \"A child for the first item\",\n *     leftAddon: <FolderIcon />,\n *   },\n *   \"item-3\": {\n *     itemId: \"item-3\",\n *     parentId: \"item-1\",\n *     children: \"Another child for the first item\",\n *     leftAddon: <FolderIcon />,\n *     rightAddon: <span>Something custom</span>,\n *   },\n * };\n * ```\n *\n * @since 6.0.0 Updated the default types\n * @see {@link DefaultTreeItemNode}\n */\nexport type TreeData<T extends TreeItemNode = DefaultTreeItemNode> = Record<\n  string,\n  T\n>;\n\n/**\n * @since 6.0.0 This used to be `ExpandedIds`/`SelectedIds` but was converted to\n * a `Set` to increase performance for large trees.\n */\nexport type TreeItemIdSet = ReadonlySet<string>;\n\n/**\n * @since 6.0.0\n */\nexport type TreeDefaultIds = UseStateInitializer<\n  readonly string[] | ReadonlySet<string>\n>;\n\n/**\n * A function to call that will sort the items within the tree for each unique\n * `parentId`. If you have a tree like:\n *\n * ```\n * a\n * ├── a1\n * b\n * ├── b1\n * ├── b2\n * │   └── b2.1\n * c\n * ├── c1\n * ├── c2\n * └── c3\n * ```\n *\n * This function will be called with:\n *\n * - `[a1]`\n * - `[b2.1]`\n * - `[b1, b2]`\n * - `[c1, c2, c3]`\n * - `[a, b, c]`\n *\n * Note: This **should be memoized** to prevent rerendering the entire tree each\n * render.\n */\nexport type TreeItemSorter<T extends TreeItemNode = DefaultTreeItemNode> = (\n  items: readonly T[]\n) => readonly T[];\n\n/**\n * @since 6.0.0\n */\nexport type TreeItemRendererProps<\n  T extends TreeItemNode = DefaultTreeItemNode,\n> = RenderRecursiveItemsProps<T, TreeData<T>>;\n"],"names":[],"mappings":"AAuJA;;CAEC,GACD,WAE8C"}
+{"version":3,"sources":["../../src/tree/types.ts"],"sourcesContent":["import { type ReactNode } from \"react\";\n\nimport { type ListItemChildrenProps } from \"../list/types.js\";\nimport { type UseStateInitializer } from \"../types.js\";\nimport { type RenderRecursiveItemsProps } from \"../utils/RenderRecursively.js\";\n\n/**\n * @since 6.0.0 This was renamed from `TreeItemIds`\n */\nexport interface TreeItemNode {\n  itemId: string;\n  parentId: string | null;\n}\n\n/**\n * The default tree item node allows for any props for rendering children within\n * list items and rendering links.\n *\n * @since 6.0.0\n */\nexport interface DefaultTreeItemNode\n  extends TreeItemNode,\n    ListItemChildrenProps {\n  /**\n   * If this is defined, the `TreeItem` will render the content within a `Link`\n   * instead of a `<span>`.\n   */\n  to?: string;\n\n  /**\n   * If this is defined, the `TreeItem` will render the content within a `Link`\n   * instead of a `<span>`.\n   */\n  href?: string;\n\n  /**\n   * This should only be provided if {@link to} or {@link href} exist on the\n   * node.\n   */\n  rel?: string;\n\n  /**\n   * This should only be provided if {@link to} or {@link href} exist on the\n   * node.\n   */\n  target?: string;\n\n  /**\n   * An alias for the {@link children} within a tree item. This will be used\n   * over the {@link children} if both exist.\n   */\n  name?: ReactNode;\n\n  /**\n   * The children to display in the tree item.\n   *\n   * @see {@link name}\n   */\n  children?: ReactNode;\n\n  /** @see {@link ListItemProps.disabled} */\n  disabled?: boolean;\n\n  /** @see {@link ListItemProps.disabledOpacity} */\n  disabledOpacity?: boolean;\n\n  className?: string;\n  contentClassName?: string;\n}\n\n/**\n * @example Default Structure\n * ```tsx\n * import { type TreeData } from \"@react-md/core/tree/types\";\n * import FolderIcon from \"@react-md/material-icons/FolderIcon\";\n *\n * export const MY_DATA: TreeData = {\n *   \"item-1\": {\n *     itemId: \"item-1\",\n *     parentId: null,\n *     name: \"Root Level Item 1\",\n *   },\n *   \"item-2\": {\n *     itemId: \"item-2\",\n *     parentId: \"item-1\",\n *     name: \"A child for the first item\",\n *     leftAddon: <FolderIcon />,\n *   },\n *   \"item-3\": {\n *     itemId: \"item-3\",\n *     parentId: \"item-1\",\n *     children: \"Another child for the first item\",\n *     leftAddon: <FolderIcon />,\n *     rightAddon: <span>Something custom</span>,\n *   },\n * };\n * ```\n *\n * @since 6.0.0 Updated the default types\n * @see {@link DefaultTreeItemNode}\n */\nexport type TreeData<T extends TreeItemNode = DefaultTreeItemNode> = Record<\n  string,\n  T\n>;\n\n/**\n * @since 6.0.0 This used to be `ExpandedIds`/`SelectedIds` but was converted to\n * a `Set` to increase performance for large trees.\n */\nexport type TreeItemIdSet = ReadonlySet<string>;\n\n/**\n * @since 6.0.0\n */\nexport type TreeDefaultIds = UseStateInitializer<\n  readonly string[] | ReadonlySet<string>\n>;\n\n/**\n * A function to call that will sort the items within the tree for each unique\n * `parentId`. If you have a tree like:\n *\n * ```\n * a\n * ├── a1\n * b\n * ├── b1\n * ├── b2\n * │   └── b2.1\n * c\n * ├── c1\n * ├── c2\n * └── c3\n * ```\n *\n * This function will be called with:\n *\n * - `[a1]`\n * - `[b2.1]`\n * - `[b1, b2]`\n * - `[c1, c2, c3]`\n * - `[a, b, c]`\n *\n * Note: This **should be memoized** to prevent rerendering the entire tree each\n * render.\n */\nexport type TreeItemSorter<T extends TreeItemNode = DefaultTreeItemNode> = (\n  items: readonly T[]\n) => readonly T[];\n\n/**\n * @since 6.0.0\n */\nexport type TreeItemRendererProps<\n  T extends TreeItemNode = DefaultTreeItemNode,\n> = RenderRecursiveItemsProps<T, TreeData<T>>;\n"],"names":[],"mappings":"AAuJA;;CAEC,GACD,WAE8C"}

package/dist/tree/useTree.d.ts

@@ -29,8 +29,9 @@ export interface TreeImplementation extends TreeSelection, TreeExpansion {
  *
  * @example Simple Example
  * ```tsx
- * import type { TreeData } from "@react-md/core";
- * import { Tree, useTree } from "@react-md/core";
+ * import { Tree } from "@react-md/core/tree/Tree";
+ * import { type TreeData } from "@react-md/core/tree/types";
+ * import { useTree } from "@react-md/core/tree/useTree";
  * import type { ReactElement } from "react";
  *
  * const data: TreeData = {
@@ -44,6 +45,7 @@ export interface TreeImplementation extends TreeSelection, TreeExpansion {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @since 6.0.0
  */
 export declare function useTree(options?: TreeHookOptions): TreeImplementation;

package/dist/tree/useTree.js

@@ -7,8 +7,9 @@ import { useTreeSelection } from "./useTreeSelection.js";
  *
  * @example Simple Example
  * ```tsx
- * import type { TreeData } from "@react-md/core";
- * import { Tree, useTree } from "@react-md/core";
+ * import { Tree } from "@react-md/core/tree/Tree";
+ * import { type TreeData } from "@react-md/core/tree/types";
+ * import { useTree } from "@react-md/core/tree/useTree";
  * import type { ReactElement } from "react";
  *
  * const data: TreeData = {
@@ -22,6 +23,7 @@ import { useTreeSelection } from "./useTreeSelection.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @since 6.0.0
  */ export function useTree(options = {}) {
     const { multiSelect = false, defaultExpandedIds, defaultSelectedIds } = options;

package/dist/tree/useTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/useTree.ts"],"sourcesContent":["\"use client\";\n\nimport { type TreeDefaultIds } from \"./types.js\";\nimport { type TreeExpansion, useTreeExpansion } from \"./useTreeExpansion.js\";\nimport { type TreeSelection, useTreeSelection } from \"./useTreeSelection.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface TreeHookOptions {\n  /**\n   * @defaultValue `false`\n   */\n  multiSelect?: boolean;\n\n  /**\n   * @defaultValue `[]`\n   */\n  defaultExpandedIds?: TreeDefaultIds;\n\n  /**\n   * @defaultValue `[]`\n   */\n  defaultSelectedIds?: TreeDefaultIds;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TreeImplementation extends TreeSelection, TreeExpansion {}\n\n/**\n * This is a convenience wrapper for the {@link useTreeExpansion} and\n * {@link useTreeSelection} hooks since they will almost always be used together.\n *\n * @example Simple Example\n * ```tsx\n * import type { TreeData } from \"@react-md/core\";\n * import { Tree, useTree } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * const data: TreeData = {\n *   // pretend data\n * };\n *\n * function Example(): ReactElement {\n *   const tree = useTree();\n *\n *   return <Tree {...tree} data={data} aria-label=\"Tree\" />;\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useTree(options: TreeHookOptions = {}): TreeImplementation {\n  const {\n    multiSelect = false,\n    defaultExpandedIds,\n    defaultSelectedIds,\n  } = options;\n\n  return {\n    ...useTreeExpansion(defaultExpandedIds),\n    ...useTreeSelection(defaultSelectedIds, multiSelect),\n  };\n}\n"],"names":["useTreeExpansion","useTreeSelection","useTree","options","multiSelect","defaultExpandedIds","defaultSelectedIds"],"mappings":"AAAA;AAGA,SAA6BA,gBAAgB,QAAQ,wBAAwB;AAC7E,SAA6BC,gBAAgB,QAAQ,wBAAwB;AA2B7E;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASC,QAAQC,UAA2B,CAAC,CAAC;IACnD,MAAM,EACJC,cAAc,KAAK,EACnBC,kBAAkB,EAClBC,kBAAkB,EACnB,GAAGH;IAEJ,OAAO;QACL,GAAGH,iBAAiBK,mBAAmB;QACvC,GAAGJ,iBAAiBK,oBAAoBF,YAAY;IACtD;AACF"}
+{"version":3,"sources":["../../src/tree/useTree.ts"],"sourcesContent":["\"use client\";\n\nimport { type TreeDefaultIds } from \"./types.js\";\nimport { type TreeExpansion, useTreeExpansion } from \"./useTreeExpansion.js\";\nimport { type TreeSelection, useTreeSelection } from \"./useTreeSelection.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface TreeHookOptions {\n  /**\n   * @defaultValue `false`\n   */\n  multiSelect?: boolean;\n\n  /**\n   * @defaultValue `[]`\n   */\n  defaultExpandedIds?: TreeDefaultIds;\n\n  /**\n   * @defaultValue `[]`\n   */\n  defaultSelectedIds?: TreeDefaultIds;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TreeImplementation extends TreeSelection, TreeExpansion {}\n\n/**\n * This is a convenience wrapper for the {@link useTreeExpansion} and\n * {@link useTreeSelection} hooks since they will almost always be used together.\n *\n * @example Simple Example\n * ```tsx\n * import { Tree } from \"@react-md/core/tree/Tree\";\n * import { type TreeData } from \"@react-md/core/tree/types\";\n * import { useTree } from \"@react-md/core/tree/useTree\";\n * import type { ReactElement } from \"react\";\n *\n * const data: TreeData = {\n *   // pretend data\n * };\n *\n * function Example(): ReactElement {\n *   const tree = useTree();\n *\n *   return <Tree {...tree} data={data} aria-label=\"Tree\" />;\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/tree | Tree Demos}\n * @since 6.0.0\n */\nexport function useTree(options: TreeHookOptions = {}): TreeImplementation {\n  const {\n    multiSelect = false,\n    defaultExpandedIds,\n    defaultSelectedIds,\n  } = options;\n\n  return {\n    ...useTreeExpansion(defaultExpandedIds),\n    ...useTreeSelection(defaultSelectedIds, multiSelect),\n  };\n}\n"],"names":["useTreeExpansion","useTreeSelection","useTree","options","multiSelect","defaultExpandedIds","defaultSelectedIds"],"mappings":"AAAA;AAGA,SAA6BA,gBAAgB,QAAQ,wBAAwB;AAC7E,SAA6BC,gBAAgB,QAAQ,wBAAwB;AA2B7E;;;;;;;;;;;;;;;;;;;;;;;;CAwBC,GACD,OAAO,SAASC,QAAQC,UAA2B,CAAC,CAAC;IACnD,MAAM,EACJC,cAAc,KAAK,EACnBC,kBAAkB,EAClBC,kBAAkB,EACnB,GAAGH;IAEJ,OAAO;QACL,GAAGH,iBAAiBK,mBAAmB;QACvC,GAAGJ,iBAAiBK,oBAAoBF,YAAY;IACtD;AACF"}

package/dist/tree/useTreeExpansion.d.ts

@@ -12,6 +12,7 @@ export interface TreeExpansion {
     expandMultipleTreeItems: UseStateSetter<TreeItemIdSet>;
 }
 /**
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @since 6.0.0 Renamed from `useTreeItemExpansion` and uses a Set
  * instead of a list to increase performance.
  */

package/dist/tree/useTreeExpansion.js

@@ -1,6 +1,7 @@
 "use client";
 import { useReadonlySet } from "../useReadonlySet.js";
 /**
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @since 6.0.0 Renamed from `useTreeItemExpansion` and uses a Set
  * instead of a list to increase performance.
  */ export function useTreeExpansion(defaultExpandedIds) {

package/dist/tree/useTreeExpansion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/useTreeExpansion.ts"],"sourcesContent":["\"use client\";\n\nimport { type UseStateSetter } from \"../types.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\nimport { type TreeDefaultIds, type TreeItemIdSet } from \"./types.js\";\n\n/**\n * @since 6.0.0 Renamed from `TreeItemExpansion` and uses a Set\n * instead of a list to increase performance. Also renamed `onItemExpansion` to\n * `toggleTreeItemExpansion` and `onMultiItemExpansion` to\n * `expandMultipleTreeItems`.\n */\nexport interface TreeExpansion {\n  expandedIds: TreeItemIdSet;\n  toggleTreeItemExpansion: (itemId: string) => void;\n  expandMultipleTreeItems: UseStateSetter<TreeItemIdSet>;\n}\n\n/**\n * @since 6.0.0 Renamed from `useTreeItemExpansion` and uses a Set\n * instead of a list to increase performance.\n */\nexport function useTreeExpansion(\n  defaultExpandedIds?: TreeDefaultIds\n): TreeExpansion {\n  const { value, setValue, toggleValue } = useReadonlySet({\n    defaultValue: defaultExpandedIds,\n  });\n\n  return {\n    expandedIds: value,\n    toggleTreeItemExpansion: toggleValue,\n    expandMultipleTreeItems: setValue,\n  };\n}\n"],"names":["useReadonlySet","useTreeExpansion","defaultExpandedIds","value","setValue","toggleValue","defaultValue","expandedIds","toggleTreeItemExpansion","expandMultipleTreeItems"],"mappings":"AAAA;AAGA,SAASA,cAAc,QAAQ,uBAAuB;AAetD;;;CAGC,GACD,OAAO,SAASC,iBACdC,kBAAmC;IAEnC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGL,eAAe;QACtDM,cAAcJ;IAChB;IAEA,OAAO;QACLK,aAAaJ;QACbK,yBAAyBH;QACzBI,yBAAyBL;IAC3B;AACF"}
+{"version":3,"sources":["../../src/tree/useTreeExpansion.ts"],"sourcesContent":["\"use client\";\n\nimport { type UseStateSetter } from \"../types.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\nimport { type TreeDefaultIds, type TreeItemIdSet } from \"./types.js\";\n\n/**\n * @since 6.0.0 Renamed from `TreeItemExpansion` and uses a Set\n * instead of a list to increase performance. Also renamed `onItemExpansion` to\n * `toggleTreeItemExpansion` and `onMultiItemExpansion` to\n * `expandMultipleTreeItems`.\n */\nexport interface TreeExpansion {\n  expandedIds: TreeItemIdSet;\n  toggleTreeItemExpansion: (itemId: string) => void;\n  expandMultipleTreeItems: UseStateSetter<TreeItemIdSet>;\n}\n\n/**\n * @see {@link https://next.react-md.dev/components/tree | Tree Demos}\n * @since 6.0.0 Renamed from `useTreeItemExpansion` and uses a Set\n * instead of a list to increase performance.\n */\nexport function useTreeExpansion(\n  defaultExpandedIds?: TreeDefaultIds\n): TreeExpansion {\n  const { value, setValue, toggleValue } = useReadonlySet({\n    defaultValue: defaultExpandedIds,\n  });\n\n  return {\n    expandedIds: value,\n    toggleTreeItemExpansion: toggleValue,\n    expandMultipleTreeItems: setValue,\n  };\n}\n"],"names":["useReadonlySet","useTreeExpansion","defaultExpandedIds","value","setValue","toggleValue","defaultValue","expandedIds","toggleTreeItemExpansion","expandMultipleTreeItems"],"mappings":"AAAA;AAGA,SAASA,cAAc,QAAQ,uBAAuB;AAetD;;;;CAIC,GACD,OAAO,SAASC,iBACdC,kBAAmC;IAEnC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGL,eAAe;QACtDM,cAAcJ;IAChB;IAEA,OAAO;QACLK,aAAaJ;QACbK,yBAAyBH;QACzBI,yBAAyBL;IAC3B;AACF"}

package/dist/tree/useTreeItems.d.ts

@@ -52,6 +52,7 @@ export interface TreeItems<T extends TreeItemNode> {
  * This is mostly an internal hook, but can be used to build tree-like
  * data structures without the need of the `Tree` component.
  *
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @since 6.0.0 converted to use an object argument instead of
  * multiple arguments. Also logs any orphaned items that do not have a parent
  */

package/dist/tree/useTreeItems.js

@@ -44,6 +44,7 @@ import { useMemo } from "react";
  * This is mostly an internal hook, but can be used to build tree-like
  * data structures without the need of the `Tree` component.
  *
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @since 6.0.0 converted to use an object argument instead of
  * multiple arguments. Also logs any orphaned items that do not have a parent
  */ export function useTreeItems(options) {

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 * @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;;;;;;CAMC,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) {\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://next.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"}

package/dist/tree/useTreeSelection.d.ts

@@ -14,6 +14,7 @@ export interface TreeSelection {
     selectMultipleTreeItems: UseStateSetter<TreeItemIdSet>;
 }
 /**
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @since 6.0.0 Renamed from `useTreeItemSelection` and uses a Set
  * instead of a list to increase performance.
  */

package/dist/tree/useTreeSelection.js

@@ -1,6 +1,7 @@
 "use client";
 import { useReadonlySet } from "../useReadonlySet.js";
 /**
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @since 6.0.0 Renamed from `useTreeItemSelection` and uses a Set
  * instead of a list to increase performance.
  */ export function useTreeSelection(defaultSelectedIds, multiSelect = false) {

package/dist/tree/useTreeSelection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/useTreeSelection.ts"],"sourcesContent":["\"use client\";\n\nimport { type UseStateSetter } from \"../types.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\nimport { type TreeDefaultIds, type TreeItemIdSet } from \"./types.js\";\n\n/**\n * @since 6.0.0 Renamed from `TreeItemSelection` and uses a Set\n * instead of a list to increase performance. Also renamed `onItemSelect` to\n * `toggleTreeItemSelection` and `onMultiItemSelect` to\n * `selectMultipleTreeItems`.\n */\nexport interface TreeSelection {\n  /** @defaultValue `false` */\n  multiSelect?: boolean;\n  selectedIds: ReadonlySet<string>;\n  toggleTreeItemSelection: (itemId: string) => void;\n  selectMultipleTreeItems: UseStateSetter<TreeItemIdSet>;\n}\n\n/**\n * @since 6.0.0 Renamed from `useTreeItemSelection` and uses a Set\n * instead of a list to increase performance.\n */\nexport function useTreeSelection(\n  defaultSelectedIds?: TreeDefaultIds,\n  multiSelect = false\n): Required<TreeSelection> {\n  const { value, setValue, toggleValue } = useReadonlySet({\n    toggleType: multiSelect ? \"multiple\" : \"single-select\",\n    defaultValue: defaultSelectedIds,\n  });\n\n  return {\n    multiSelect,\n    selectedIds: value,\n    toggleTreeItemSelection: toggleValue,\n    selectMultipleTreeItems: setValue,\n  };\n}\n"],"names":["useReadonlySet","useTreeSelection","defaultSelectedIds","multiSelect","value","setValue","toggleValue","toggleType","defaultValue","selectedIds","toggleTreeItemSelection","selectMultipleTreeItems"],"mappings":"AAAA;AAGA,SAASA,cAAc,QAAQ,uBAAuB;AAiBtD;;;CAGC,GACD,OAAO,SAASC,iBACdC,kBAAmC,EACnCC,cAAc,KAAK;IAEnB,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGN,eAAe;QACtDO,YAAYJ,cAAc,aAAa;QACvCK,cAAcN;IAChB;IAEA,OAAO;QACLC;QACAM,aAAaL;QACbM,yBAAyBJ;QACzBK,yBAAyBN;IAC3B;AACF"}
+{"version":3,"sources":["../../src/tree/useTreeSelection.ts"],"sourcesContent":["\"use client\";\n\nimport { type UseStateSetter } from \"../types.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\nimport { type TreeDefaultIds, type TreeItemIdSet } from \"./types.js\";\n\n/**\n * @since 6.0.0 Renamed from `TreeItemSelection` and uses a Set\n * instead of a list to increase performance. Also renamed `onItemSelect` to\n * `toggleTreeItemSelection` and `onMultiItemSelect` to\n * `selectMultipleTreeItems`.\n */\nexport interface TreeSelection {\n  /** @defaultValue `false` */\n  multiSelect?: boolean;\n  selectedIds: ReadonlySet<string>;\n  toggleTreeItemSelection: (itemId: string) => void;\n  selectMultipleTreeItems: UseStateSetter<TreeItemIdSet>;\n}\n\n/**\n * @see {@link https://next.react-md.dev/components/tree | Tree Demos}\n * @since 6.0.0 Renamed from `useTreeItemSelection` and uses a Set\n * instead of a list to increase performance.\n */\nexport function useTreeSelection(\n  defaultSelectedIds?: TreeDefaultIds,\n  multiSelect = false\n): Required<TreeSelection> {\n  const { value, setValue, toggleValue } = useReadonlySet({\n    toggleType: multiSelect ? \"multiple\" : \"single-select\",\n    defaultValue: defaultSelectedIds,\n  });\n\n  return {\n    multiSelect,\n    selectedIds: value,\n    toggleTreeItemSelection: toggleValue,\n    selectMultipleTreeItems: setValue,\n  };\n}\n"],"names":["useReadonlySet","useTreeSelection","defaultSelectedIds","multiSelect","value","setValue","toggleValue","toggleType","defaultValue","selectedIds","toggleTreeItemSelection","selectMultipleTreeItems"],"mappings":"AAAA;AAGA,SAASA,cAAc,QAAQ,uBAAuB;AAiBtD;;;;CAIC,GACD,OAAO,SAASC,iBACdC,kBAAmC,EACnCC,cAAc,KAAK;IAEnB,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGN,eAAe;QACtDO,YAAYJ,cAAc,aAAa;QACvCK,cAAcN;IAChB;IAEA,OAAO;QACLC;QACAM,aAAaL;QACbM,yBAAyBJ;QACzBK,yBAAyBN;IAC3B;AACF"}

package/dist/types.d.ts

@@ -37,7 +37,7 @@ export interface LabelA11y {
  * @example Simple Example
  * ```ts
  * import type { HTMLAttributes, ReactElement } from "react";
- * import type { LabelRequiredForA11y } from "@react-md/core";
+ * import type { LabelRequiredForA11y } from "@react-md/core/types";
  *
  * type Props = LabelRequiredForA11y<HTMLAttributes<HTMLDivElement>>;
  *

package/dist/types.js.map

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