@react-md/core 1.0.0-next.0

package/dist/tree/DefaultTreeItemRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tree/DefaultTreeItemRenderer.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport { type RenderRecursiveItemsProps } from \"../utils/RenderRecursively.jsx\";\nimport { TreeItem } from \"./TreeItem.js\";\nimport { type DefaultTreeItemNode, type TreeItemNode } from \"./types.js\";\n\n/**\n * **Client Component**\n *\n * A reasonable default for rendering tree items that will extract all the\n * `ListItemChildrenProps` from the item and attempt to pass them into the\n * `TreeItem`.\n *\n * Look at the `Tree` component for an example of creating a custom\n * implementation.\n *\n * @remarks \\@since 6.0.0\n */\nexport function DefaultTreeItemRenderer<\n  T extends TreeItemNode = DefaultTreeItemNode,\n>(props: RenderRecursiveItemsProps<T>): ReactElement {\n  const { item: _item, parents, children: childItems } = props;\n  const item = props.item as DefaultTreeItemNode;\n\n  const {\n    itemId,\n    to,\n    href,\n    disabled,\n    className,\n    contentClassName,\n    leftAddon,\n    leftAddonType,\n    leftAddonPosition,\n    leftAddonClassName,\n    leftAddonForceWrap,\n    rightAddon,\n    rightAddonType,\n    rightAddonPosition,\n    rightAddonClassName,\n    rightAddonForceWrap,\n    disableLeftAddonCenteredMedia,\n    disableRightAddonCenteredMedia,\n  } = item;\n  const children = item.name ?? item.children;\n\n  return (\n    <TreeItem\n      to={to}\n      href={href}\n      depth={parents.length}\n      childItems={childItems}\n      className={className}\n      contentClassName={contentClassName}\n      itemId={itemId}\n      disabled={disabled}\n      leftAddon={leftAddon}\n      leftAddonType={leftAddonType}\n      leftAddonPosition={leftAddonPosition}\n      leftAddonClassName={leftAddonClassName}\n      leftAddonForceWrap={leftAddonForceWrap}\n      rightAddon={rightAddon}\n      rightAddonType={rightAddonType}\n      rightAddonPosition={rightAddonPosition}\n      rightAddonClassName={rightAddonClassName}\n      rightAddonForceWrap={rightAddonForceWrap}\n      disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n      disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n    >\n      {children}\n    </TreeItem>\n  );\n}\n"],"names":["TreeItem","DefaultTreeItemRenderer","props","item","_item","parents","children","childItems","itemId","to","href","disabled","className","contentClassName","leftAddon","leftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","name","depth","length"],"mappings":";AAEA,SAASA,QAAQ,QAAQ,gBAAgB;AAGzC;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,wBAEdC,KAAmC;IACnC,MAAM,EAAEC,MAAMC,KAAK,EAAEC,OAAO,EAAEC,UAAUC,UAAU,EAAE,GAAGL;IACvD,MAAMC,OAAOD,MAAMC,IAAI;IAEvB,MAAM,EACJK,MAAM,EACNC,EAAE,EACFC,IAAI,EACJC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChBC,SAAS,EACTC,aAAa,EACbC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,EAClBC,UAAU,EACVC,cAAc,EACdC,kBAAkB,EAClBC,mBAAmB,EACnBC,mBAAmB,EACnBC,6BAA6B,EAC7BC,8BAA8B,EAC/B,GAAGtB;IACJ,MAAMG,WAAWH,KAAKuB,IAAI,IAAIvB,KAAKG,QAAQ;IAE3C,qBACE,KAACN;QACCS,IAAIA;QACJC,MAAMA;QACNiB,OAAOtB,QAAQuB,MAAM;QACrBrB,YAAYA;QACZK,WAAWA;QACXC,kBAAkBA;QAClBL,QAAQA;QACRG,UAAUA;QACVG,WAAWA;QACXC,eAAeA;QACfC,mBAAmBA;QACnBC,oBAAoBA;QACpBC,oBAAoBA;QACpBC,YAAYA;QACZC,gBAAgBA;QAChBC,oBAAoBA;QACpBC,qBAAqBA;QACrBC,qBAAqBA;QACrBC,+BAA+BA;QAC/BC,gCAAgCA;kBAE/BnB;;AAGP"}

package/dist/tree/Tree.d.ts

@@ -0,0 +1,195 @@
+import { type ComponentType, type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
+import { type CustomLinkComponent } from "../link/LinkProvider.js";
+import { type LabelRequiredForA11y } from "../types.js";
+import { type RenderRecursiveItemsProps } from "../utils/RenderRecursively.js";
+import { type TreeExpansionMode } from "./TreeProvider.js";
+import { type TreeData, type TreeItemNode, type TreeItemSorter } from "./types.js";
+import { type TreeExpansion } from "./useTreeExpansion.js";
+import { type TreeSelection } from "./useTreeSelection.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-tree-depth"?: number;
+        "--rmd-tree-item-padding"?: string | number;
+        "--rmd-tree-item-padding-base"?: string | number;
+        "--rmd-tree-item-padding-incrementor"?: string | number;
+    }
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export type TreeHTMLAttributes = Omit<HTMLAttributes<HTMLUListElement>, "role" | "tabIndex" | "children">;
+/**
+ * @remarks
+ * \@since 6.0.0 There was a major API change and the `id` is now `optional`.
+ * In addition, the following props were removed:
+ * - `itemRenderer`
+ * - `labelKey`
+ * - `valueKey`
+ * - `getItemLabel`
+ * - `getItemValue`
+ * - `getItemProps`
+ */
+export interface TreeProps<T extends TreeItemNode> extends TreeHTMLAttributes, TreeExpansion, TreeSelection {
+    /** @see {@link TreeData} */
+    data: TreeData<T>;
+    /**
+     * An optional ref to pass to the tree element.
+     *
+     * @remarks \@since 6.0.0
+     */
+    treeRef?: Ref<HTMLUListElement>;
+    /** @defaultValue `identity` */
+    sort?: TreeItemSorter<T>;
+    /**
+     * Any nodes in the {@Link data} that have a `parentId` set to this value will
+     * appear at the root of the tree.
+     *
+     * @defaultValue `null`
+     */
+    rootId?: string | null;
+    /**
+     * @defaultValue `"auto"`
+     * @see {@link TreeExpansionMode}
+     */
+    expansionMode?: TreeExpansionMode;
+    /**
+     * Set this to `true` to display the expander icon to the left instead of the
+     * right. This will also update the styles slightly so you can still provide a
+     * `leftAddon`.
+     *
+     * @defaultValue `false`
+     */
+    expanderLeft?: boolean;
+    /**
+     * @defaultValue `getIcon("expander")`
+     */
+    expanderIcon?: ReactNode;
+    /**
+     * Set this to `true` to disable the collapse transition for all tree items.
+     *
+     * @defaultValue `false`
+     */
+    disableTransition?: boolean;
+    /**
+     * Set this to `true` if the collapsed tree items should be removed from the
+     * DOM instead of hidden using `display: none`. This _might_ improve
+     * performance for large trees.
+     *
+     * @defaultValue `false`
+     */
+    temporaryChildItems?: boolean;
+    /**
+     * @example
+     * Custom Tree Item Renderer
+     * ```tsx
+     * import type { TreeItemRendererProps } from "@react-md/core";
+     * import { TreeItem, useKeyboardMovementContext, useTreeContext } from "@react-md/core";
+     * import FolderIcon from "@react-md/material-icons/FolderIcon";
+     * import FolderOpenIcon from "@react-md/material-icons/FolderOpenIcon";
+     * import type { ReactElement } from "react";
+     *
+     * export function CustomTreeItem(props: TreeItemRendererProps): ReactElement {
+     *   const { item, ...remaining  } = props;
+     *   const id = useId();
+     *   const { itemId } = item;
+     *   const {
+     *     data,
+     *     expandedIds,
+     *     selectedIds,
+     *     toggleTreeItemExpansion,
+     *     toggleTreeItemSelection,
+     *   } = useTreeContext()
+     *   const { activeDescendantId } = useKeyboardMovementContext();
+     *
+     *   const focused = id === activeDescendantId;
+     *   const expanded = expandedIds.has(itemId);
+     *   const selected = selectedIds.has(itemId);
+     *   const children = ...; // do whatever
+     *
+     *   return (
+     *     <TreeItem
+     *       {...remaining}
+     *       id={id}
+     *       itemId={itemId}
+     *       leftAddon={expanded ? <FolderOpenIcon /> : <FolderIcon />}
+     *     >
+     *       {children}
+     *     </TreeItem>
+     *   );
+     * }
+     * ```
+     *
+     * @see {@link DefaultTreeItemRenderer}
+     * @defaultValue `DefaultTreeItemRenderer`
+     */
+    renderer?: ComponentType<RenderRecursiveItemsProps<T>>;
+    /**
+     * The link component to use for any tree item nodes that have a `to` or
+     * `href`.
+     *
+     * @see {@link CustomLinkComponent}
+     * @defaultValue `Link`
+     */
+    linkComponent?: CustomLinkComponent;
+}
+/**
+ * **Client Component**
+ *
+ * @example
+ * Simple Tree
+ * ```tsx
+ * import type { TreeData } from "@react-md/core";
+ * import { Tree, useTree } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * const data: TreeData = {
+ *   "item-1": {
+ *     itemId: "item-1",
+ *     parentId: null,
+ *     name: "Root Level Item 1",
+ *   },
+ *   "item-2": {
+ *     itemId: "item-2",
+ *     parentId: "item-1",
+ *     name: "A child for the first item",
+ *   },
+ *   "item-3": {
+ *     itemId: "item-3",
+ *     parentId: "item-1",
+ *     children: "Another child for the first item",
+ *   },
+ * };
+ *
+ * function Example(): ReactElement {
+ *   const tree = useTree({
+ *     // can enable multiple selected items
+ *     // multiSelect: true,
+ *
+ *     // can set default expanded and selected items
+ *     // defaultSelectedIds: ["item-1"],
+ *     // defaultExpandedIds: ["item-1"],
+ *   });
+ *
+ *   return (
+ *     <Tree
+ *       {...tree}
+ *       aria-label="Tree"
+ *       data={data}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link TreeProps.renderer} for a custom tree item example.
+ *
+ * @remarks
+ * \@since 6.0.0 There was a major API change and the `id` is now `optional`.
+ * In addition, the following props were removed:
+ * - `itemRenderer`
+ * - `labelKey`
+ * - `valueKey`
+ * - `getItemLabel`
+ * - `getItemValue`
+ * - `getItemProps`
+ */
+export declare function Tree<T extends TreeItemNode>(props: LabelRequiredForA11y<TreeProps<T>>): ReactElement;

package/dist/tree/Tree.js

@@ -0,0 +1,133 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LinkProvider } from "../link/LinkProvider.js";
+import { List } from "../list/List.js";
+import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
+import { useEnsuredId } from "../useEnsuredId.js";
+import { RenderRecursively } from "../utils/RenderRecursively.js";
+import { identity } from "../utils/identity.js";
+import { DefaultTreeItemRenderer } from "./DefaultTreeItemRenderer.js";
+import { TreeProvider } from "./TreeProvider.js";
+import { tree } from "./styles.js";
+import { useTreeItems } from "./useTreeItems.js";
+import { useTreeMovement } from "./useTreeMovement.js";
+/**
+ * **Client Component**
+ *
+ * @example
+ * Simple Tree
+ * ```tsx
+ * import type { TreeData } from "@react-md/core";
+ * import { Tree, useTree } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * const data: TreeData = {
+ *   "item-1": {
+ *     itemId: "item-1",
+ *     parentId: null,
+ *     name: "Root Level Item 1",
+ *   },
+ *   "item-2": {
+ *     itemId: "item-2",
+ *     parentId: "item-1",
+ *     name: "A child for the first item",
+ *   },
+ *   "item-3": {
+ *     itemId: "item-3",
+ *     parentId: "item-1",
+ *     children: "Another child for the first item",
+ *   },
+ * };
+ *
+ * function Example(): ReactElement {
+ *   const tree = useTree({
+ *     // can enable multiple selected items
+ *     // multiSelect: true,
+ *
+ *     // can set default expanded and selected items
+ *     // defaultSelectedIds: ["item-1"],
+ *     // defaultExpandedIds: ["item-1"],
+ *   });
+ *
+ *   return (
+ *     <Tree
+ *       {...tree}
+ *       aria-label="Tree"
+ *       data={data}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link TreeProps.renderer} for a custom tree item example.
+ *
+ * @remarks
+ * \@since 6.0.0 There was a major API change and the `id` is now `optional`.
+ * In addition, the following props were removed:
+ * - `itemRenderer`
+ * - `labelKey`
+ * - `valueKey`
+ * - `getItemLabel`
+ * - `getItemValue`
+ * - `getItemProps`
+ */ export function Tree(props) {
+    const { id, data, sort = identity, rootId = null, treeRef, className, expandedIds, selectedIds, toggleTreeItemSelection, selectMultipleTreeItems, toggleTreeItemExpansion, expandMultipleTreeItems, onClick, onFocus, onKeyDown, renderer: TreeItemRenderer = DefaultTreeItemRenderer, multiSelect = false, expansionMode = "auto", expanderIcon, expanderLeft = false, linkComponent, disableTransition = false, temporaryChildItems = false, ...remaining } = props;
+    const treeId = useEnsuredId(id, "tree");
+    const { items, treeItemChildIds } = useTreeItems({
+        data,
+        sort,
+        rootId
+    });
+    const { metadataLookup, movementContext, movementProps } = useTreeMovement({
+        onClick,
+        onFocus,
+        onKeyDown,
+        data,
+        expandedIds,
+        selectedIds,
+        treeItemChildIds,
+        toggleTreeItemExpansion,
+        expandMultipleTreeItems
+    });
+    return /*#__PURE__*/ _jsx(TreeProvider, {
+        data: data,
+        rootId: rootId,
+        multiSelect: multiSelect,
+        selectedIds: selectedIds,
+        expandedIds: expandedIds,
+        expanderIcon: expanderIcon,
+        expanderLeft: expanderLeft,
+        expansionMode: expansionMode,
+        metadataLookup: metadataLookup,
+        disableTransition: disableTransition,
+        temporaryChildItems: temporaryChildItems,
+        toggleTreeItemSelection: toggleTreeItemSelection,
+        toggleTreeItemExpansion: toggleTreeItemExpansion,
+        selectMultipleTreeItems: selectMultipleTreeItems,
+        expandMultipleTreeItems: expandMultipleTreeItems,
+        children: /*#__PURE__*/ _jsx(LinkProvider, {
+            value: linkComponent,
+            children: /*#__PURE__*/ _jsx(KeyboardMovementProvider, {
+                value: movementContext,
+                children: /*#__PURE__*/ _jsx(List, {
+                    ...remaining,
+                    ...movementProps,
+                    id: treeId,
+                    ref: treeRef,
+                    role: "tree",
+                    tabIndex: 0,
+                    className: tree({
+                        className
+                    }),
+                    children: /*#__PURE__*/ _jsx(RenderRecursively, {
+                        items: items,
+                        getItemKey: (item)=>item.itemId,
+                        render: TreeItemRenderer
+                    })
+                })
+            })
+        })
+    });
+}
+
+//# sourceMappingURL=Tree.js.map

package/dist/tree/Tree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tree/Tree.tsx"],"sourcesContent":["\"use client\";\nimport {\n  type ComponentType,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport {\n  LinkProvider,\n  type CustomLinkComponent,\n} from \"../link/LinkProvider.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 {\n  RenderRecursively,\n  type RenderRecursiveItemsProps,\n} from \"../utils/RenderRecursively.js\";\nimport { identity } from \"../utils/identity.js\";\nimport { DefaultTreeItemRenderer } from \"./DefaultTreeItemRenderer.js\";\nimport { TreeProvider, type TreeExpansionMode } from \"./TreeProvider.js\";\nimport { tree } from \"./styles.js\";\nimport {\n  type TreeData,\n  type TreeItemNode,\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 * @remarks \\@since 6.0.0\n */\nexport type TreeHTMLAttributes = Omit<\n  HTMLAttributes<HTMLUListElement>,\n  \"role\" | \"tabIndex\" | \"children\"\n>;\n\n/**\n * @remarks\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   * @remarks \\@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\n   * Custom Tree Item Renderer\n   * ```tsx\n   * import type { TreeItemRendererProps } from \"@react-md/core\";\n   * import { TreeItem, useKeyboardMovementContext, useTreeContext } 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<RenderRecursiveItemsProps<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\n * 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 * @remarks\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,\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      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      <LinkProvider value={linkComponent}>\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              getItemKey={(item) => item.itemId}\n              render={TreeItemRenderer}\n            />\n          </List>\n        </KeyboardMovementProvider>\n      </LinkProvider>\n    </TreeProvider>\n  );\n}\n"],"names":["LinkProvider","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","getItemKey","item","itemId","render"],"mappings":"AAAA;;AAQA,SACEA,YAAY,QAEP,0BAA0B;AACjC,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,wBAAwB,QAAQ,6CAA6C;AAEtF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SACEC,iBAAiB,QAEZ,gCAAgC;AACvC,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,uBAAuB,QAAQ,+BAA+B;AACvE,SAASC,YAAY,QAAgC,oBAAoB;AACzE,SAASC,IAAI,QAAQ,cAAc;AAOnC,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAASC,eAAe,QAAQ,uBAAuB;AAoJvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DC,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,aAAa,EACbC,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;QACbV,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,KAACxB;YAAa4C,OAAOV;sBACnB,cAAA,KAAChC;gBAAyB0C,OAAOF;0BAC/B,cAAA,KAACzC;oBACE,GAAGoC,SAAS;oBACZ,GAAGM,aAAa;oBACjB9B,IAAIyB;oBACJO,KAAK5B;oBACL6B,MAAK;oBACLC,UAAU;oBACV7B,WAAWV,KAAK;wBAAEU;oBAAU;8BAE5B,cAAA,KAACd;wBACCmC,OAAOA;wBACPS,YAAY,CAACC,OAASA,KAAKC,MAAM;wBACjCC,QAAQtB;;;;;;AAOtB"}

package/dist/tree/TreeGroup.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+import { type ListProps } from "../list/List.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface OverridableTreeGroupProps extends ListProps {
+    /** @defaultValue `false` */
+    temporary?: boolean;
+    /** @defaultValue `false` */
+    disableTransition?: boolean;
+}
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export interface TreeGroupProps extends OverridableTreeGroupProps {
+    children: ReactNode;
+    depth: number;
+    collapsed: boolean;
+}
+/**
+ * **Client Component**
+ *
+ * @internal
+ * @remarks \@since 6.0.0 Removed the collapse options and is no longer a
+ * "public" component.
+ */
+export declare const TreeGroup: import("react").ForwardRefExoticComponent<TreeGroupProps & import("react").RefAttributes<HTMLUListElement>>;

package/dist/tree/TreeGroup.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { List } from "../list/List.js";
+import { useCollapseTransition } from "../transition/useCollapseTransition.js";
+import { useTreeContext } from "./TreeProvider.js";
+import { treeGroup } from "./styles.js";
+/**
+ * **Client Component**
+ *
+ * @internal
+ * @remarks \@since 6.0.0 Removed the collapse options and is no longer a
+ * "public" component.
+ */ export const TreeGroup = /*#__PURE__*/ forwardRef(function TreeGroup(props, ref) {
+    const { className, collapsed, depth, onClick, onMouseDown, children, temporary: propTemporary, disableTransition = false, ...remaining } = props;
+    const style = {
+        ...remaining.style,
+        "--rmd-tree-depth": depth
+    };
+    const { temporaryChildItems } = useTreeContext();
+    const temporary = propTemporary ?? temporaryChildItems;
+    const { elementProps, rendered } = useCollapseTransition({
+        style,
+        nodeRef: ref,
+        enter: !disableTransition,
+        exit: !disableTransition,
+        transitionIn: !collapsed,
+        temporary,
+        className: treeGroup({
+            className
+        })
+    });
+    if (!rendered || !children) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(List, {
+        ...remaining,
+        onClick: (event)=>{
+            onClick?.(event);
+            // always stop propagation for click events and mousedown for groups
+            // so that the parent child item's click and mousedown events aren't
+            // also fired while there are disabled child elementsS or
+            // non-interactable (like dividers or subheader)
+            event.stopPropagation();
+        },
+        onMouseDown: (event)=>{
+            onMouseDown?.(event);
+            event.stopPropagation();
+        },
+        ...elementProps,
+        role: "group",
+        children: children
+    });
+});
+
+//# sourceMappingURL=TreeGroup.js.map

package/dist/tree/TreeGroup.js.map

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

package/dist/tree/TreeItem.d.ts

@@ -0,0 +1,63 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
+import { type PropsWithRef } from "../types.js";
+import { type OverridableTreeGroupProps } from "./TreeGroup.js";
+import { type DefaultTreeItemNode } from "./types.js";
+/**
+ * @remarks \@since 6.0.0  Added the `groupProps` prop.
+ */
+export interface TreeItemProps extends Omit<DefaultTreeItemNode, "parentId">, HTMLAttributes<HTMLLIElement> {
+    /**
+     * @defaultValue `"tree-item-" + useId()`
+     */
+    id?: string;
+    /**
+     * This is used to set the `--rmd-tree-depth` CSS variable which allows the
+     * padding to increase for each nested tree.
+     */
+    depth: number;
+    /**
+     * Any additional props that should be passed to the surrounding `<li>`
+     * element. The top-level props are passed to the `<span>` or `<a>` element
+     * instead.
+     */
+    liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+    /**
+     * Any additional props to pass to the `TreeGroup` component.
+     */
+    groupProps?: PropsWithRef<OverridableTreeGroupProps, HTMLUListElement>;
+    /**
+     * This should normally be the text/content to display within the tree item
+     * and should **not** include nested trees.
+     */
+    children?: ReactNode;
+    /**
+     * The nested tree items to render within a `TreeGroup`.
+     */
+    childItems?: ReactNode;
+    /** @defaultValue `false` */
+    disableTransition?: boolean;
+    /**
+     * This ref is applied to the `<span>` or `<a>` element and can be used to
+     * implement drag and drop behavior.
+     */
+    contentRef?: Ref<HTMLElement>;
+    /**
+     * Set this to `true` if the {@link childItems} should not be rendered while
+     * collapsed.
+     *
+     * @defaultValue `false`
+     */
+    temporaryChildItems?: boolean;
+}
+/**
+ * **Client Component**
+ *
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/treeview/}
+ * @remarks
+ * \@since 6.0.0 The wrapping `<li>` element will always be `role="none"` and
+ * the `<span>` or `<a>` will gain the `role="treeitem"` instead. This makes it
+ * easier to pass event handlers because of the nested behavior of tree items.
+ * \@since 6.0.0 No longer provides the `aria-level`, `aria-setsize` and
+ * `aria-posinset` attributes and allows the browser to compute them instead.
+ */
+export declare function TreeItem(props: TreeItemProps): ReactElement;