@react-md/core 1.0.0-next.0

package/dist/tree/TreeItem.js

@@ -0,0 +1,176 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useElementInteraction } from "../interaction/useElementInteraction.js";
+import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
+import { useLink } from "../link/LinkProvider.js";
+import { ListItemChildren } from "../list/ListItemChildren.js";
+import { useKeyboardMovementContext } from "../movement/useKeyboardMovementProvider.js";
+import { useEnsuredId } from "../useEnsuredId.js";
+import { TreeGroup } from "./TreeGroup.js";
+import { TreeItemExpander } from "./TreeItemExpander.js";
+import { useTreeContext } from "./TreeProvider.js";
+import { treeItem, treeItemContent, treeItemMedia } from "./styles.js";
+/**
+ * **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 function TreeItem(props) {
+    const { id: propId, depth, liProps, disabled = false, disabledOpacity = false, 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, threeLines, childItems, contentClassName, temporaryChildItems, disableTransition: propDisableTransition, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, contentRef, ...remaining } = props;
+    const id = useEnsuredId(propId, "tree-item");
+    const children = useHigherContrastChildren(propChildren);
+    if (disabled) {
+        // you can't really disable a link other than removing the href, so
+        // unset these props
+        remaining.to = undefined;
+        remaining.href = undefined;
+    }
+    const { metadataLookup, expandedIds, selectedIds, expanderLeft, expansionMode, toggleTreeItemSelection, toggleTreeItemExpansion, disableTransition: contextDisableTransition } = useTreeContext();
+    const { activeDescendantId } = useKeyboardMovementContext();
+    const isLeafNode = !childItems;
+    const focused = activeDescendantId === id;
+    const expanded = expandedIds.has(itemId);
+    const selected = selectedIds.has(itemId);
+    const disableTransition = propDisableTransition ?? contextDisableTransition;
+    useEffect(()=>{
+        const lookup = metadataLookup.current;
+        lookup.expandable[itemId] = !isLeafNode;
+        lookup.disabledItems[itemId] = disabled;
+        lookup.elementToItem[id] = itemId;
+        lookup.itemToElement[itemId] = id;
+        return ()=>{
+            delete lookup.disabledItems[itemId];
+            delete lookup.expandable[itemId];
+            delete lookup.elementToItem[id];
+            delete lookup.itemToElement[itemId];
+        };
+    }, [
+        id,
+        metadataLookup,
+        itemId,
+        isLeafNode,
+        disabled,
+        depth
+    ]);
+    const { pressedClassName, ripples, handlers } = useElementInteraction({
+        onBlur,
+        onClick (event) {
+            onClick?.(event);
+            toggleTreeItemSelection(itemId);
+            if (!isLeafNode && expansionMode !== "manual") {
+                toggleTreeItemExpansion(itemId);
+            }
+        },
+        onKeyDown,
+        onKeyUp,
+        onMouseDown,
+        onMouseUp,
+        onMouseLeave,
+        onDragStart,
+        onTouchStart,
+        onTouchEnd,
+        onTouchMove,
+        disabled
+    });
+    const isLink = !!(remaining.to || remaining.href);
+    const Link = useLink();
+    // cheating a bit so there are type errors around the event handlers
+    const ContentComponent = isLink ? Link : "span";
+    const leftAddonType = propLeftAddonType ?? (expanderLeft && leftAddon) ? "media" : undefined;
+    const isMediaLeftAddon = typeof propLeftAddonType === "undefined" && leftAddonType === "media";
+    const disableLeftAddonCenteredMedia = propDisableLeftAddonCenteredMedia ?? isMediaLeftAddon;
+    return /*#__PURE__*/ _jsxs("li", {
+        ...liProps,
+        role: "none",
+        className: treeItem({
+            className,
+            expander: !!childItems,
+            expanderLeft
+        }),
+        children: [
+            /*#__PURE__*/ _jsxs(ContentComponent, {
+                ...remaining,
+                // nodes with children should always apply the `aria-expanded` to show
+                // that it is expandable while leaf nodes should remain omitted
+                "aria-expanded": isLeafNode ? undefined : expanded,
+                "aria-selected": selected,
+                "aria-disabled": disabled || undefined,
+                id: id,
+                ref: contentRef,
+                role: "treeitem",
+                tabIndex: -1,
+                ...handlers,
+                className: treeItemContent({
+                    link: isLink,
+                    padded: depth > 0,
+                    focused,
+                    selected,
+                    disabled,
+                    disabledOpacity,
+                    className: contentClassName,
+                    pressedClassName
+                }),
+                children: [
+                    /*#__PURE__*/ _jsx(ListItemChildren, {
+                        threeLines: threeLines,
+                        textClassName: textClassName,
+                        secondaryTextClassName: secondaryTextClassName,
+                        disableTextChildren: disableTextChildren,
+                        primaryText: primaryText,
+                        textProps: textProps,
+                        secondaryText: secondaryText,
+                        secondaryTextProps: secondaryTextProps,
+                        leftAddon: /*#__PURE__*/ _jsx(TreeItemExpander, {
+                            isLeft: true,
+                            itemId: itemId,
+                            addon: leftAddon,
+                            expanded: expanded,
+                            disabled: disabled,
+                            isLeafNode: isLeafNode
+                        }),
+                        leftAddonType: leftAddonType,
+                        leftAddonPosition: leftAddonPosition,
+                        leftAddonClassName: treeItemMedia({
+                            isLeafNode,
+                            isMediaLeftAddon,
+                            className: leftAddonClassName
+                        }),
+                        leftAddonForceWrap: leftAddonForceWrap,
+                        rightAddon: /*#__PURE__*/ _jsx(TreeItemExpander, {
+                            itemId: itemId,
+                            addon: rightAddon,
+                            expanded: expanded,
+                            disabled: disabled,
+                            isLeafNode: isLeafNode
+                        }),
+                        rightAddonType: rightAddonType,
+                        rightAddonPosition: rightAddonPosition,
+                        rightAddonClassName: rightAddonClassName,
+                        rightAddonForceWrap: rightAddonForceWrap,
+                        disableLeftAddonCenteredMedia: disableLeftAddonCenteredMedia,
+                        disableRightAddonCenteredMedia: disableRightAddonCenteredMedia,
+                        children: children
+                    }),
+                    ripples
+                ]
+            }),
+            /*#__PURE__*/ _jsx(TreeGroup, {
+                id: `${id}-group`,
+                temporary: temporaryChildItems,
+                disableTransition: disableTransition,
+                ...groupProps,
+                depth: depth - 1,
+                collapsed: isLeafNode || !expanded,
+                children: childItems
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=TreeItem.js.map

package/dist/tree/TreeItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tree/TreeItem.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useEffect,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { useLink } from \"../link/LinkProvider.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 { TreeGroup, type OverridableTreeGroupProps } 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 * @remarks \\@since 6.0.0  Added the `groupProps` prop.\n */\nexport interface TreeItemProps\n  extends Omit<DefaultTreeItemNode, \"parentId\">,\n    HTMLAttributes<HTMLLIElement> {\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 * @remarks\n * \\@since 6.0.0 The wrapping `<li>` element will always be `role=\"none\"` and\n * the `<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    threeLines,\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    ...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    metadataLookup,\n    expandedIds,\n    selectedIds,\n    expanderLeft,\n    expansionMode,\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      delete lookup.disabledItems[itemId];\n      delete lookup.expandable[itemId];\n      delete lookup.elementToItem[id];\n      delete lookup.itemToElement[itemId];\n    };\n  }, [id, metadataLookup, itemId, isLeafNode, disabled, depth]);\n\n  const { pressedClassName, ripples, handlers } =\n    useElementInteraction<HTMLLIElement>({\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  const Link = useLink();\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          padded: depth > 0,\n          focused,\n          selected,\n          disabled,\n          disabledOpacity,\n          className: contentClassName,\n          pressedClassName,\n        })}\n      >\n        <ListItemChildren\n          threeLines={threeLines}\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","useLink","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","threeLines","childItems","contentClassName","temporaryChildItems","disableTransition","propDisableTransition","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","contentRef","remaining","to","undefined","href","metadataLookup","expandedIds","selectedIds","expanderLeft","expansionMode","toggleTreeItemSelection","toggleTreeItemExpansion","contextDisableTransition","activeDescendantId","isLeafNode","focused","expanded","has","selected","lookup","current","expandable","disabledItems","elementToItem","itemToElement","pressedClassName","ripples","handlers","event","isLink","Link","ContentComponent","isMediaLeftAddon","li","role","expander","aria-expanded","aria-selected","aria-disabled","ref","tabIndex","link","padded","isLeft","addon","temporary","collapsed"],"mappings":"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"}

package/dist/tree/TreeItemExpander.d.ts

@@ -0,0 +1,22 @@
+import { type ReactElement, type ReactNode } from "react";
+/**
+ * @internal
+ * @remarks \@since 6.0.0 Updated to use the latest API
+ */
+export interface TreeItemExpanderProps {
+    /** @defaultValue `false` */
+    isLeft?: boolean;
+    itemId: string;
+    addon: ReactNode;
+    disabled: boolean;
+    expanded: boolean;
+    isLeafNode: boolean;
+    className?: string;
+}
+/**
+ * **Client Component**
+ *
+ * @internal
+ * @remarks \@since 6.0.0 Updated to support the new `expansionMode` behavior.
+ */
+export declare function TreeItemExpander(props: TreeItemExpanderProps): ReactElement;

package/dist/tree/TreeItemExpander.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { cloneElement, isValidElement } from "react";
+import { getIcon } from "../icon/iconConfig.js";
+import { IconRotator } from "../icon/IconRotator.js";
+import { useTreeContext } from "./TreeProvider.js";
+/**
+ * **Client Component**
+ *
+ * @internal
+ * @remarks \@since 6.0.0 Updated to support the new `expansionMode` behavior.
+ */ export function TreeItemExpander(props) {
+    const { itemId, isLeft = false, addon, expanded, disabled, isLeafNode, className } = props;
+    const { expanderIcon, expanderLeft, expansionMode, disableTransition, toggleTreeItemExpansion } = useTreeContext();
+    const icon = getIcon("dropdown", expanderIcon);
+    if (isLeafNode || expanderLeft !== isLeft) {
+        if (/*#__PURE__*/ isValidElement(addon)) {
+            return /*#__PURE__*/ cloneElement(addon, {
+                className
+            });
+        }
+        return /*#__PURE__*/ _jsx(_Fragment, {
+            children: addon
+        });
+    }
+    const isCloneable = /*#__PURE__*/ isValidElement(icon);
+    let clickProps;
+    if (expansionMode === "manual" && !disabled) {
+        clickProps = {
+            onClick (event) {
+                // do not select the tree item if the icon is clicked
+                event.stopPropagation();
+                event.preventDefault();
+                toggleTreeItemExpansion(itemId);
+            }
+        };
+    }
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(IconRotator, {
+                className: cnb(!addon && className),
+                ...!isCloneable ? clickProps : undefined,
+                rotated: expanded,
+                forceIconWrap: !isCloneable,
+                disableTransition: disableTransition,
+                children: clickProps && isCloneable ? /*#__PURE__*/ cloneElement(icon, clickProps) : icon
+            }),
+            addon
+        ]
+    });
+}
+
+//# sourceMappingURL=TreeItemExpander.js.map

package/dist/tree/TreeItemExpander.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tree/TreeItemExpander.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  cloneElement,\n  isValidElement,\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { useTreeContext } from \"./TreeProvider.js\";\n\n/**\n * @internal\n * @remarks \\@since 6.0.0 Updated to use the latest API\n */\nexport interface TreeItemExpanderProps {\n  /** @defaultValue `false` */\n  isLeft?: boolean;\n  itemId: string;\n  addon: ReactNode;\n  disabled: boolean;\n  expanded: boolean;\n  isLeafNode: boolean;\n  className?: string;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @remarks \\@since 6.0.0 Updated to support the new `expansionMode` behavior.\n */\nexport function TreeItemExpander(props: TreeItemExpanderProps): ReactElement {\n  const {\n    itemId,\n    isLeft = false,\n    addon,\n    expanded,\n    disabled,\n    isLeafNode,\n    className,\n  } = props;\n  const {\n    expanderIcon,\n    expanderLeft,\n    expansionMode,\n    disableTransition,\n    toggleTreeItemExpansion,\n  } = useTreeContext();\n\n  const icon = getIcon(\"dropdown\", expanderIcon);\n  if (isLeafNode || expanderLeft !== isLeft) {\n    if (isValidElement<{ className?: string }>(addon)) {\n      return cloneElement(addon, { className });\n    }\n\n    return <>{addon}</>;\n  }\n\n  const isCloneable = isValidElement(icon);\n  let clickProps: { onClick: MouseEventHandler<Element> } | undefined;\n  if (expansionMode === \"manual\" && !disabled) {\n    clickProps = {\n      onClick(event) {\n        // do not select the tree item if the icon is clicked\n        event.stopPropagation();\n        event.preventDefault();\n\n        toggleTreeItemExpansion(itemId);\n      },\n    };\n  }\n\n  return (\n    <>\n      <IconRotator\n        className={cnb(!addon && className)}\n        {...(!isCloneable ? clickProps : undefined)}\n        rotated={expanded}\n        forceIconWrap={!isCloneable}\n        disableTransition={disableTransition}\n      >\n        {clickProps && isCloneable ? cloneElement(icon, clickProps) : icon}\n      </IconRotator>\n      {addon}\n    </>\n  );\n}\n"],"names":["cnb","cloneElement","isValidElement","getIcon","IconRotator","useTreeContext","TreeItemExpander","props","itemId","isLeft","addon","expanded","disabled","isLeafNode","className","expanderIcon","expanderLeft","expansionMode","disableTransition","toggleTreeItemExpansion","icon","isCloneable","clickProps","onClick","event","stopPropagation","preventDefault","undefined","rotated","forceIconWrap"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,YAAY,EACZC,cAAc,QAIT,QAAQ;AACf,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,cAAc,QAAQ,oBAAoB;AAiBnD;;;;;CAKC,GACD,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EACJC,MAAM,EACNC,SAAS,KAAK,EACdC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACVC,SAAS,EACV,GAAGP;IACJ,MAAM,EACJQ,YAAY,EACZC,YAAY,EACZC,aAAa,EACbC,iBAAiB,EACjBC,uBAAuB,EACxB,GAAGd;IAEJ,MAAMe,OAAOjB,QAAQ,YAAYY;IACjC,IAAIF,cAAcG,iBAAiBP,QAAQ;QACzC,kBAAIP,eAAuCQ,QAAQ;YACjD,qBAAOT,aAAaS,OAAO;gBAAEI;YAAU;QACzC;QAEA,qBAAO;sBAAGJ;;IACZ;IAEA,MAAMW,4BAAcnB,eAAekB;IACnC,IAAIE;IACJ,IAAIL,kBAAkB,YAAY,CAACL,UAAU;QAC3CU,aAAa;YACXC,SAAQC,KAAK;gBACX,qDAAqD;gBACrDA,MAAMC,eAAe;gBACrBD,MAAME,cAAc;gBAEpBP,wBAAwBX;YAC1B;QACF;IACF;IAEA,qBACE;;0BACE,KAACJ;gBACCU,WAAWd,IAAI,CAACU,SAASI;gBACxB,GAAI,CAACO,cAAcC,aAAaK,SAAS;gBAC1CC,SAASjB;gBACTkB,eAAe,CAACR;gBAChBH,mBAAmBA;0BAElBI,cAAcD,4BAAcpB,aAAamB,MAAME,cAAcF;;YAE/DV;;;AAGP"}

package/dist/tree/TreeProvider.d.ts

@@ -0,0 +1,94 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type NonNullRef } from "../types.js";
+import { type DefaultTreeItemNode, type TreeData, type TreeItemNode } from "./types.js";
+import { type TreeExpansion } from "./useTreeExpansion.js";
+import { type TreeSelection } from "./useTreeSelection.js";
+/**
+ * When this is set to `"auto"`, clicking on a tree item with a mouse or with
+ * the Enter/Space keys will select and expand/collapse the tree item. The user
+ * can still use the ArrowLeft and ArrowRight keys to expand/collapse nested
+ * tree items.
+ *
+ * When this is set to `"manual"`, clicking on a tree item with a mouse or with
+ * the Enter/Space keys will only select that tree item. The user must use the
+ * ArrowLeft and ArrowRight keys to expand/collapse nested tree items.
+ *
+ * The main use-case for the `"manual"` setting is creating a navigation tree
+ * that requires the user to click on an icon or a button to expand the child
+ * items.
+ *
+ * @remarks \@since 6.0.0
+ */
+export type TreeExpansionMode = "auto" | "manual";
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export interface TreeItemMetadataLookup {
+    /**
+     * This is used for the keyboard movement behavior for trees that allow the
+     * `ArrowRight` key for tree items that have children.
+     */
+    expandable: Record<string, boolean>;
+    /**
+     * This is a quick lookup if a tree item is disabled since it's possible the
+     * custom `renderer` sets the `disabled` state and not the `TreeData`.
+     */
+    disabledItems: Record<string, boolean>;
+    /**
+     * A lookup of element `id` (DOM id) for each tree item to the `itemId`. This
+     * is a quick way to figure out which item is being interacted with from a
+     * keyboard event without needed to add `data-*` attributes.
+     */
+    elementToItem: Record<string, string>;
+    /**
+     * A lookup of tree item `itemId` to the element `id` (DOM id). This is used
+     * to be able to find a parent tree item when the `ArrowLeft` key is pressed
+     * to focus that parent item.
+     */
+    itemToElement: Record<string, string>;
+}
+/**
+ * The tree context is mostly a convenience API for implementing a custom tree
+ * item that requires the {@link TreeExpansion}, {@link TreeSelection} and
+ * {@link TreeData} to work.
+ *
+ * The other properties on the context are most likely for internal use only.
+ *
+ * @remarks \@since 6.0.0
+ */
+export interface TreeContext<T extends TreeItemNode = DefaultTreeItemNode> extends TreeExpansion, TreeSelection {
+    data: TreeData<T>;
+    rootId: string | null;
+    disableTransition: boolean;
+    temporaryChildItems: boolean;
+    /** @internal */
+    expanderLeft: boolean;
+    /** @internal */
+    expanderIcon: ReactNode;
+    /** @internal */
+    expansionMode: TreeExpansionMode;
+    /** @internal */
+    metadataLookup: NonNullRef<TreeItemMetadataLookup>;
+}
+/**
+ * This can be used for a custom tree item renderer.
+ *
+ * @see The `Tree` component for an example.
+ * @remarks \@since 6.0.0
+ */
+export declare function useTreeContext<T extends TreeItemNode = DefaultTreeItemNode>(): TreeContext<T>;
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export interface TreeProviderProps<T extends TreeItemNode = DefaultTreeItemNode> extends TreeContext<T> {
+    children: ReactNode;
+}
+/**
+ * **Client Component**
+ *
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export declare function TreeProvider<T extends TreeItemNode = DefaultTreeItemNode>(props: TreeProviderProps<T>): ReactElement;

package/dist/tree/TreeProvider.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+// Allow the hook to correct typecast this instead
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const context = /*#__PURE__*/ createContext(undefined);
+context.displayName = "Tree";
+const { Provider } = context;
+/**
+ * This can be used for a custom tree item renderer.
+ *
+ * @see The `Tree` component for an example.
+ * @remarks \@since 6.0.0
+ */ export function useTreeContext() {
+    const value = useContext(context);
+    if (!value) {
+        throw new Error("Cannot find a parent Tree component");
+    }
+    return value;
+}
+/**
+ * **Client Component**
+ *
+ * @internal
+ * @remarks \@since 6.0.0
+ */ export function TreeProvider(props) {
+    const { children, data, rootId, multiSelect, expanderIcon, expanderLeft, expansionMode, metadataLookup, disableTransition, temporaryChildItems, expandedIds, selectedIds, expandMultipleTreeItems, toggleTreeItemExpansion, selectMultipleTreeItems, toggleTreeItemSelection } = props;
+    const value = useMemo(()=>({
+            data,
+            rootId,
+            multiSelect,
+            expanderIcon,
+            expanderLeft,
+            expansionMode,
+            metadataLookup,
+            disableTransition,
+            temporaryChildItems,
+            expandedIds,
+            selectedIds,
+            expandMultipleTreeItems,
+            toggleTreeItemExpansion,
+            selectMultipleTreeItems,
+            toggleTreeItemSelection
+        }), [
+        data,
+        disableTransition,
+        expandMultipleTreeItems,
+        expandedIds,
+        expanderIcon,
+        expanderLeft,
+        expansionMode,
+        metadataLookup,
+        multiSelect,
+        rootId,
+        selectMultipleTreeItems,
+        selectedIds,
+        temporaryChildItems,
+        toggleTreeItemExpansion,
+        toggleTreeItemSelection
+    ]);
+    return /*#__PURE__*/ _jsx(Provider, {
+        value: value,
+        children: children
+    });
+}
+
+//# sourceMappingURL=TreeProvider.js.map

package/dist/tree/TreeProvider.js.map

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

package/dist/tree/_tree.scss

@@ -0,0 +1,174 @@
+@use "sass:list" as sassList;
+@use "sass:map";
+@use "../utils";
+@use "../icon/icon";
+@use "../list/list";
+@use "../typography/typography";
+@use "../interaction/interaction";
+
+$disable-expander-left: false !default;
+$disable-expander-left-as-media: false !default;
+$disable-expander-left-as-media-offset: false !default;
+$disable-selected-background-color: false !default;
+
+$padding-incrementor: list.$item-horizontal-padding * 1.5 !default;
+$padding-base: list.get-var(item-keyline) !default;
+$expander-right-from: icon.$rotate-from !default;
+$expander-right-to: 90deg !default;
+$expander-left-from: 0deg !default;
+$expander-left-to: -90deg !default;
+
+$selected-styles: (
+  font-weight: typography.$font-weight-bold,
+) !default;
+
+$var-lookup: (
+  depth: (
+    var: --rmd-tree-depth,
+    value: -1,
+  ),
+  item-padding: (
+    var: --rmd-tree-item-padding,
+    value: 0,
+  ),
+  padding-base: (
+    var: --rmd-tree-item-padding-base,
+    value: $padding-base,
+  ),
+  padding-incrementor: (
+    var: --rmd-tree-item-padding-incrementor,
+    value: $padding-incrementor,
+  ),
+);
+
+@function get-var($name, $fallback: null) {
+  $found: utils.validate($var-lookup, $name, "tree var");
+  $var: map.get($found, var);
+  $value: if($fallback, $fallback, map.get($found, value));
+
+  @if $value {
+    @return var(#{$var}, #{$value});
+  }
+
+  @return var(#{$var});
+}
+
+@mixin set-var($name, $value) {
+  $var: map.get(utils.validate($var-lookup, $name, "tree var"), var);
+
+  #{$var}: #{$value};
+}
+
+@mixin use-var($property, $name: $property, $fallback: null) {
+  #{$property}: get-var($name, $fallback);
+}
+
+@mixin styles {
+  .rmd-tree {
+    display: block;
+    height: 100%;
+    outline-style: none;
+    overflow: auto;
+    // this is mostly for firefox. moving the mouse even 1px while clicking will
+    // select the current item and all items to the tree root
+    user-select: none;
+    width: 100%;
+  }
+
+  .rmd-tree-item {
+    @include icon.set-var(rotate-from, $expander-right-from);
+    @include icon.set-var(rotate-to, $expander-right-to);
+    @include set-var(
+      item-padding,
+      calc(
+        get-var(depth) * get-var(padding-incrementor) + get-var(padding-base)
+      )
+    );
+
+    list-style: none;
+
+    @if not $disable-expander-left {
+      &--expander-left {
+        @include icon.set-var(rotate-from, $expander-left-from);
+        @include icon.set-var(rotate-to, $expander-left-to);
+      }
+    }
+
+    &__content {
+      &--disabled {
+        cursor: auto;
+
+        &:hover::before {
+          @include interaction.set-var(background-color, transparent);
+        }
+      }
+
+      &--link {
+        color: inherit;
+        text-decoration: none;
+      }
+
+      &--padded {
+        @include utils.auto-rtl(
+          padding-left,
+          get-var(item-padding),
+          list.get-var(item-horizontal-padding)
+        );
+      }
+
+      &--focused::before {
+        .rmd-tree:focus-within & {
+          @include utils.keyboard-only {
+            @include interaction.focus-styles;
+          }
+        }
+      }
+
+      @if $selected-styles {
+        &--selected {
+          @if not $disable-selected-background-color {
+            @include interaction.set-var(
+              background-color,
+              interaction.get-var(selected-background-color)
+            );
+
+            @include utils.touch-only {
+              &:hover::before {
+                @include interaction.set-var(
+                  background-color,
+                  interaction.get-var(selected-background-color)
+                );
+              }
+            }
+          }
+          @include utils.map-to-styles($selected-styles);
+        }
+      }
+    }
+
+    @if not $disable-expander-left-as-media {
+      &__media {
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+
+        @if not $disable-expander-left-as-media-offset {
+          &--single {
+            justify-content: flex-end;
+          }
+        }
+      }
+    }
+  }
+
+  .rmd-tree-group {
+    background-color: inherit;
+    color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+
+    // remove the list padding to make it more condensed
+    padding-bottom: 0;
+    padding-top: 0;
+  }
+}