@d4gger/design-system 3.0.1 → 4.0.1

package/dist/components/treeView/TreeView.cjs

@@ -37,7 +37,7 @@ module.exports = __toCommonJS(TreeView_exports);
 var React = __toESM(require("react"), 1);
 var import_classnames = __toESM(require("classnames"), 1);
 var import_react_slot = require("@radix-ui/react-slot");
-var import_lucide_react = require("lucide-react");
+var import_Icon = require("../icon/Icon");
 var import_extractProps = require("../../_internal/helpers/extractProps");
 var import_treeView = require("./treeView.props");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -52,8 +52,34 @@ function useTreeViewContext() {
 const TreeViewRoot = React.forwardRef((props, forwardedRef) => {
   const { asChild, children, className, size = "md", ...restProps } = (0, import_extractProps.extractProps)(props, import_treeView.treeViewPropDefs);
   const Comp = asChild ? import_react_slot.Slot : "div";
+  const rootRef = React.useRef(null);
   const [expandedItems, setExpandedItems] = React.useState(/* @__PURE__ */ new Set());
   const [selectedId, setSelectedId] = React.useState();
+  const [focusedId, setFocusedId] = React.useState();
+  const typeahead = React.useRef({ text: "", time: 0 });
+  const getNodes = React.useCallback(() => Array.from(rootRef.current?.querySelectorAll('[data-slot="tree-node"]') ?? []).filter((node) => node.closest('[role="tree"]') === rootRef.current), []);
+  const setRootRef = React.useCallback((node) => {
+    rootRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  }, [forwardedRef]);
+  React.useLayoutEffect(() => {
+    const nodes = getNodes();
+    if (!nodes.some((node) => node.dataset.treeId === focusedId)) {
+      setFocusedId(nodes.find((node) => node.dataset.treeId === selectedId)?.dataset.treeId ?? nodes[0]?.dataset.treeId);
+    }
+    for (const node of nodes) {
+      const wrapper = node.parentElement;
+      const siblings = Array.from(wrapper.parentElement?.children ?? []).filter((child) => child.matches('[data-slot="tree-item"]'));
+      let level = 1;
+      for (let parent = wrapper.parentElement; parent && parent !== rootRef.current; parent = parent.parentElement) {
+        if (parent.matches('[data-slot="tree-children"]')) level += 1;
+      }
+      node.setAttribute("aria-level", String(level));
+      node.setAttribute("aria-posinset", String(siblings.indexOf(wrapper) + 1));
+      node.setAttribute("aria-setsize", String(siblings.length));
+    }
+  }, [children, expandedItems, focusedId, selectedId, getNodes]);
   const toggleItem = React.useCallback((id) => {
     setExpandedItems((prev) => {
       const next = new Set(prev);
@@ -69,18 +95,18 @@ const TreeViewRoot = React.forwardRef((props, forwardedRef) => {
     setSelectedId(id);
   }, []);
   const contextValue = React.useMemo(
-    () => ({ expandedItems, toggleItem, selectedId, selectItem }),
-    [expandedItems, toggleItem, selectedId, selectItem]
+    () => ({ expandedItems, toggleItem, selectedId, selectItem, focusedId, setFocusedId, getNodes, typeahead }),
+    [expandedItems, toggleItem, selectedId, selectItem, focusedId, getNodes]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TreeViewContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Comp,
     {
       ...restProps,
-      ref: forwardedRef,
+      ref: setRootRef,
       className: (0, import_classnames.default)("dsx-tree-view", className),
       "data-size": size,
       role: "tree",
-      "aria-label": "Tree view",
+      "aria-label": restProps["aria-label"] ?? (restProps["aria-labelledby"] ? void 0 : "Tree view"),
       "data-slot": "tree-view",
       children
     }
@@ -88,35 +114,54 @@ const TreeViewRoot = React.forwardRef((props, forwardedRef) => {
 });
 TreeViewRoot.displayName = "TreeView";
 const TreeItem = React.forwardRef((props, forwardedRef) => {
-  const { className, id, label, isFolder = false, children, ...restProps } = props;
-  const { expandedItems, toggleItem, selectedId, selectItem } = useTreeViewContext();
+  const { className, id, label, isFolder = false, children, onClick, onKeyDown, onFocus, ...restProps } = props;
+  const { expandedItems, toggleItem, selectedId, selectItem, focusedId, setFocusedId, getNodes, typeahead } = useTreeViewContext();
+  const groupId = React.useId();
   const isExpanded = expandedItems.has(id);
   const isSelected = selectedId === id;
   const hasChildren = React.Children.count(children) > 0;
-  const handleClick = React.useCallback(() => {
+  const handleClick = React.useCallback((event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    event.currentTarget.focus();
     selectItem(id);
     if (isFolder || hasChildren) {
       toggleItem(id);
     }
-  }, [id, isFolder, hasChildren, selectItem, toggleItem]);
+  }, [id, isFolder, hasChildren, selectItem, toggleItem, onClick]);
   const handleKeyDown = React.useCallback(
     (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
+      const nodes = getNodes();
+      const index = nodes.indexOf(e.currentTarget);
+      const focus = (node) => node?.focus();
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
-        handleClick();
-      }
-      if (e.key === "ArrowRight" && !isExpanded) {
+        selectItem(id);
+        if (isFolder || hasChildren) toggleItem(id);
+      } else if (e.key === "ArrowRight" && (isFolder || hasChildren)) {
         e.preventDefault();
-        toggleItem(id);
-      }
-      if (e.key === "ArrowLeft" && isExpanded) {
+        if (!isExpanded) toggleItem(id);
+        else if (hasChildren) focus(nodes[index + 1]);
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        if (isExpanded && (isFolder || hasChildren)) toggleItem(id);
+        else focus(e.currentTarget.parentElement?.parentElement?.closest('[data-slot="tree-item"]')?.querySelector('[data-slot="tree-node"]'));
+      } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) {
         e.preventDefault();
-        toggleItem(id);
+        focus(nodes[e.key === "Home" ? 0 : e.key === "End" ? nodes.length - 1 : Math.max(0, Math.min(nodes.length - 1, index + (e.key === "ArrowDown" ? 1 : -1)))]);
+      } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        const now = Date.now();
+        const text = (now - typeahead.current.time < 500 ? typeahead.current.text : "") + e.key.toLocaleLowerCase();
+        typeahead.current = { text, time: now };
+        const search = [...nodes.slice(index + 1), ...nodes.slice(0, index + 1)];
+        focus(search.find((node) => node.getAttribute("aria-label")?.toLocaleLowerCase().startsWith(text)));
       }
     },
-    [handleClick, isExpanded, id, toggleItem]
+    [isExpanded, isFolder, hasChildren, id, toggleItem, selectItem, getNodes, onKeyDown, typeahead]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-tree-view__item", role: "treeitem", "aria-expanded": hasChildren ? isExpanded : void 0, "data-slot": "tree-item", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-tree-view__item", "data-slot": "tree-item", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
@@ -129,15 +174,25 @@ const TreeItem = React.forwardRef((props, forwardedRef) => {
         ),
         onClick: handleClick,
         onKeyDown: handleKeyDown,
-        tabIndex: 0,
+        onFocus: (event) => {
+          setFocusedId(id);
+          onFocus?.(event);
+        },
+        tabIndex: focusedId === id ? 0 : -1,
+        role: "treeitem",
+        "aria-label": label,
+        "aria-expanded": isFolder || hasChildren ? isExpanded : void 0,
+        "aria-selected": isSelected,
+        "aria-owns": hasChildren && isExpanded ? groupId : void 0,
+        "data-tree-id": id,
         "data-slot": "tree-node",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsx-tree-view__icon", "data-slot": "tree-icon", children: isFolder || hasChildren ? isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronRight, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.File, { size: 14 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsx-tree-view__icon", "data-slot": "tree-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: isFolder || hasChildren ? isExpanded ? "chevron-down" : "chevron-right" : "file", size: "sm" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsx-tree-view__label", children: label })
         ]
       }
     ),
-    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsx-tree-view__children", role: "group", "data-slot": "tree-children", children })
+    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: groupId, className: "dsx-tree-view__children", role: "group", "data-slot": "tree-children", children })
   ] });
 });
 TreeItem.displayName = "TreeItem";

package/dist/components/treeView/TreeView.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/treeView/TreeView.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { ChevronRight, ChevronDown, File } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { treeViewPropDefs } from './treeView.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype TreeViewOwnProps = GetPropDefTypes<typeof treeViewPropDefs>\n\ninterface TreeViewProps extends React.ComponentPropsWithoutRef<'div'>, TreeViewOwnProps {}\n\ntype TreeViewContextValue = {\n  expandedItems: Set<string>\n  toggleItem: (id: string) => void\n  selectedId: string | undefined\n  selectItem: (id: string) => void\n}\n\nconst TreeViewContext = React.createContext<TreeViewContextValue | null>(null)\n\nfunction useTreeViewContext() {\n  const context = React.useContext(TreeViewContext)\n  if (!context) {\n    throw new Error('TreeView compound components must be used within TreeView')\n  }\n  return context\n}\n\nconst TreeViewRoot = React.forwardRef<HTMLDivElement, TreeViewProps>((props, forwardedRef) => {\n  const { asChild, children, className, size = 'md', ...restProps } = extractProps(props, treeViewPropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const [expandedItems, setExpandedItems] = React.useState<Set<string>>(new Set())\n  const [selectedId, setSelectedId] = React.useState<string | undefined>()\n\n  const toggleItem = React.useCallback((id: string) => {\n    setExpandedItems((prev) => {\n      const next = new Set(prev)\n      if (next.has(id)) {\n        next.delete(id)\n      } else {\n        next.add(id)\n      }\n      return next\n    })\n  }, [])\n\n  const selectItem = React.useCallback((id: string) => {\n    setSelectedId(id)\n  }, [])\n\n  const contextValue = React.useMemo(\n    () => ({ expandedItems, toggleItem, selectedId, selectItem }),\n    [expandedItems, toggleItem, selectedId, selectItem],\n  )\n\n  return (\n    <TreeViewContext.Provider value={contextValue}>\n      <Comp\n        {...restProps}\n        ref={forwardedRef}\n        className={classNames('dsx-tree-view', className)}\n        data-size={size}\n        role=\"tree\"\n        aria-label=\"Tree view\"\n        data-slot=\"tree-view\"\n      >\n        {children}\n      </Comp>\n    </TreeViewContext.Provider>\n  )\n})\nTreeViewRoot.displayName = 'TreeView'\n\ninterface TreeItemProps extends React.ComponentPropsWithoutRef<'div'> {\n  id: string\n  label: string\n  isFolder?: boolean\n  children?: React.ReactNode\n}\n\nconst TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>((props, forwardedRef) => {\n  const { className, id, label, isFolder = false, children, ...restProps } = props\n  const { expandedItems, toggleItem, selectedId, selectItem } = useTreeViewContext()\n  const isExpanded = expandedItems.has(id)\n  const isSelected = selectedId === id\n  const hasChildren = React.Children.count(children) > 0\n\n  const handleClick = React.useCallback(() => {\n    selectItem(id)\n    if (isFolder || hasChildren) {\n      toggleItem(id)\n    }\n  }, [id, isFolder, hasChildren, selectItem, toggleItem])\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        handleClick()\n      }\n      if (e.key === 'ArrowRight' && !isExpanded) {\n        e.preventDefault()\n        toggleItem(id)\n      }\n      if (e.key === 'ArrowLeft' && isExpanded) {\n        e.preventDefault()\n        toggleItem(id)\n      }\n    },\n    [handleClick, isExpanded, id, toggleItem],\n  )\n\n  return (\n    <div className=\"dsx-tree-view__item\" role=\"treeitem\" aria-expanded={hasChildren ? isExpanded : undefined} data-slot=\"tree-item\">\n      <div\n        {...restProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-tree-view__node',\n          isSelected && 'dsx-tree-view__node--selected',\n          className,\n        )}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        tabIndex={0}\n        data-slot=\"tree-node\"\n      >\n        <span className=\"dsx-tree-view__icon\" data-slot=\"tree-icon\">\n          {isFolder || hasChildren ? (\n            isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />\n          ) : (\n            <File size={14} />\n          )}\n        </span>\n        <span className=\"dsx-tree-view__label\">{label}</span>\n      </div>\n      {hasChildren && isExpanded && (\n        <div className=\"dsx-tree-view__children\" role=\"group\" data-slot=\"tree-children\">\n          {children}\n        </div>\n      )}\n    </div>\n  )\n})\nTreeItem.displayName = 'TreeItem'\n\nconst TreeView: typeof TreeViewRoot & {\n  Item: typeof TreeItem\n} = Object.assign(TreeViewRoot, {\n  Item: TreeItem,\n})\n\nexport { TreeView, TreeItem, TreeViewRoot }\nexport type { TreeItemProps, TreeViewOwnProps, TreeViewProps }\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { Icon } from '../icon/Icon'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { treeViewPropDefs } from './treeView.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype TreeViewOwnProps = GetPropDefTypes<typeof treeViewPropDefs>\n\ninterface TreeViewProps extends React.ComponentPropsWithoutRef<'div'>, TreeViewOwnProps {}\n\ntype TreeViewContextValue = {\n  expandedItems: Set<string>\n  toggleItem: (id: string) => void\n  selectedId: string | undefined\n  selectItem: (id: string) => void\n  focusedId: string | undefined\n  setFocusedId: (id: string) => void\n  getNodes: () => HTMLDivElement[]\n  typeahead: React.MutableRefObject<{ text: string; time: number }>\n}\n\nconst TreeViewContext = React.createContext<TreeViewContextValue | null>(null)\n\nfunction useTreeViewContext() {\n  const context = React.useContext(TreeViewContext)\n  if (!context) {\n    throw new Error('TreeView compound components must be used within TreeView')\n  }\n  return context\n}\n\nconst TreeViewRoot = React.forwardRef<HTMLDivElement, TreeViewProps>((props, forwardedRef) => {\n  const { asChild, children, className, size = 'md', ...restProps } = extractProps(props, treeViewPropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const rootRef = React.useRef<HTMLDivElement | null>(null)\n  const [expandedItems, setExpandedItems] = React.useState<Set<string>>(new Set())\n  const [selectedId, setSelectedId] = React.useState<string | undefined>()\n  const [focusedId, setFocusedId] = React.useState<string>()\n  const typeahead = React.useRef({ text: '', time: 0 })\n  const getNodes = React.useCallback(() => Array.from(rootRef.current?.querySelectorAll<HTMLDivElement>('[data-slot=\"tree-node\"]') ?? [])\n    .filter((node) => node.closest('[role=\"tree\"]') === rootRef.current), [])\n  const setRootRef = React.useCallback((node: HTMLDivElement | null) => {\n    rootRef.current = node\n    if (typeof forwardedRef === 'function') forwardedRef(node)\n    else if (forwardedRef) forwardedRef.current = node\n  }, [forwardedRef])\n\n  React.useLayoutEffect(() => {\n    const nodes = getNodes()\n    if (!nodes.some((node) => node.dataset.treeId === focusedId)) {\n      setFocusedId(nodes.find((node) => node.dataset.treeId === selectedId)?.dataset.treeId ?? nodes[0]?.dataset.treeId)\n    }\n    for (const node of nodes) {\n      const wrapper = node.parentElement!\n      const siblings = Array.from(wrapper.parentElement?.children ?? []).filter((child) => child.matches('[data-slot=\"tree-item\"]'))\n      let level = 1\n      for (let parent = wrapper.parentElement; parent && parent !== rootRef.current; parent = parent.parentElement) {\n        if (parent.matches('[data-slot=\"tree-children\"]')) level += 1\n      }\n      node.setAttribute('aria-level', String(level))\n      node.setAttribute('aria-posinset', String(siblings.indexOf(wrapper) + 1))\n      node.setAttribute('aria-setsize', String(siblings.length))\n    }\n  }, [children, expandedItems, focusedId, selectedId, getNodes])\n\n  const toggleItem = React.useCallback((id: string) => {\n    setExpandedItems((prev) => {\n      const next = new Set(prev)\n      if (next.has(id)) {\n        next.delete(id)\n      } else {\n        next.add(id)\n      }\n      return next\n    })\n  }, [])\n\n  const selectItem = React.useCallback((id: string) => {\n    setSelectedId(id)\n  }, [])\n\n  const contextValue = React.useMemo(\n    () => ({ expandedItems, toggleItem, selectedId, selectItem, focusedId, setFocusedId, getNodes, typeahead }),\n    [expandedItems, toggleItem, selectedId, selectItem, focusedId, getNodes],\n  )\n\n  return (\n    <TreeViewContext.Provider value={contextValue}>\n      <Comp\n        {...restProps}\n        ref={setRootRef}\n        className={classNames('dsx-tree-view', className)}\n        data-size={size}\n        role=\"tree\"\n        aria-label={restProps['aria-label'] ?? (restProps['aria-labelledby'] ? undefined : 'Tree view')}\n        data-slot=\"tree-view\"\n      >\n        {children}\n      </Comp>\n    </TreeViewContext.Provider>\n  )\n})\nTreeViewRoot.displayName = 'TreeView'\n\ninterface TreeItemProps extends React.ComponentPropsWithoutRef<'div'> {\n  id: string\n  label: string\n  isFolder?: boolean\n  children?: React.ReactNode\n}\n\nconst TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>((props, forwardedRef) => {\n  const { className, id, label, isFolder = false, children, onClick, onKeyDown, onFocus, ...restProps } = props\n  const { expandedItems, toggleItem, selectedId, selectItem, focusedId, setFocusedId, getNodes, typeahead } = useTreeViewContext()\n  const groupId = React.useId()\n  const isExpanded = expandedItems.has(id)\n  const isSelected = selectedId === id\n  const hasChildren = React.Children.count(children) > 0\n\n  const handleClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onClick?.(event)\n    if (event.defaultPrevented) return\n    event.currentTarget.focus()\n    selectItem(id)\n    if (isFolder || hasChildren) {\n      toggleItem(id)\n    }\n  }, [id, isFolder, hasChildren, selectItem, toggleItem, onClick])\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(e)\n      if (e.defaultPrevented) return\n      const nodes = getNodes()\n      const index = nodes.indexOf(e.currentTarget)\n      const focus = (node: HTMLElement | undefined | null) => node?.focus()\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        selectItem(id)\n        if (isFolder || hasChildren) toggleItem(id)\n      } else if (e.key === 'ArrowRight' && (isFolder || hasChildren)) {\n        e.preventDefault()\n        if (!isExpanded) toggleItem(id)\n        else if (hasChildren) focus(nodes[index + 1])\n      } else if (e.key === 'ArrowLeft') {\n        e.preventDefault()\n        if (isExpanded && (isFolder || hasChildren)) toggleItem(id)\n        else focus(e.currentTarget.parentElement?.parentElement?.closest('[data-slot=\"tree-item\"]')?.querySelector<HTMLElement>('[data-slot=\"tree-node\"]'))\n      } else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {\n        e.preventDefault()\n        focus(nodes[e.key === 'Home' ? 0 : e.key === 'End' ? nodes.length - 1 : Math.max(0, Math.min(nodes.length - 1, index + (e.key === 'ArrowDown' ? 1 : -1)))])\n      } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n        const now = Date.now()\n        const text = (now - typeahead.current.time < 500 ? typeahead.current.text : '') + e.key.toLocaleLowerCase()\n        typeahead.current = { text, time: now }\n        const search = [...nodes.slice(index + 1), ...nodes.slice(0, index + 1)]\n        focus(search.find((node) => node.getAttribute('aria-label')?.toLocaleLowerCase().startsWith(text)))\n      }\n    },\n    [isExpanded, isFolder, hasChildren, id, toggleItem, selectItem, getNodes, onKeyDown, typeahead],\n  )\n\n  return (\n    <div className=\"dsx-tree-view__item\" data-slot=\"tree-item\">\n      <div\n        {...restProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-tree-view__node',\n          isSelected && 'dsx-tree-view__node--selected',\n          className,\n        )}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onFocus={(event) => { setFocusedId(id); onFocus?.(event) }}\n        tabIndex={focusedId === id ? 0 : -1}\n        role=\"treeitem\"\n        aria-label={label}\n        aria-expanded={isFolder || hasChildren ? isExpanded : undefined}\n        aria-selected={isSelected}\n        aria-owns={hasChildren && isExpanded ? groupId : undefined}\n        data-tree-id={id}\n        data-slot=\"tree-node\"\n      >\n        <span className=\"dsx-tree-view__icon\" data-slot=\"tree-icon\" aria-hidden=\"true\">\n          <Icon name={isFolder || hasChildren ? (isExpanded ? 'chevron-down' : 'chevron-right') : 'file'} size=\"sm\" />\n        </span>\n        <span className=\"dsx-tree-view__label\">{label}</span>\n      </div>\n      {hasChildren && isExpanded && (\n        <div id={groupId} className=\"dsx-tree-view__children\" role=\"group\" data-slot=\"tree-children\">\n          {children}\n        </div>\n      )}\n    </div>\n  )\n})\nTreeItem.displayName = 'TreeItem'\n\nconst TreeView: typeof TreeViewRoot & {\n  Item: typeof TreeItem\n} = Object.assign(TreeViewRoot, {\n  Item: TreeItem,\n})\n\nexport { TreeView, TreeItem, TreeViewRoot }\nexport type { TreeItemProps, TreeViewOwnProps, TreeViewProps }\n"],
+  "mappings": "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",
   "names": ["classNames"]
 }

package/dist/components/treeView/TreeView.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeView.d.cts","sourceRoot":"","sources":["../../../src/components/treeView/TreeView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,gBAAgB,GAAG,eAAe,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEhE,UAAU,aAAc,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,gBAAgB;CAAG;AAmB1F,QAAA,MAAM,YAAY,sFA0ChB,CAAA;AAGF,UAAU,aAAc,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACnE,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,QAAQ,sFA+DZ,CAAA;AAGF,QAAA,MAAM,QAAQ,EAAE,OAAO,YAAY,GAAG;IACpC,IAAI,EAAE,OAAO,QAAQ,CAAA;CAGrB,CAAA;AAEF,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAA;AAC3C,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"TreeView.d.cts","sourceRoot":"","sources":["../../../src/components/treeView/TreeView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,gBAAgB,GAAG,eAAe,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEhE,UAAU,aAAc,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,gBAAgB;CAAG;AAuB1F,QAAA,MAAM,YAAY,sFAsEhB,CAAA;AAGF,UAAU,aAAc,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACnE,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,QAAQ,sFAqFZ,CAAA;AAGF,QAAA,MAAM,QAAQ,EAAE,OAAO,YAAY,GAAG;IACpC,IAAI,EAAE,OAAO,QAAQ,CAAA;CAGrB,CAAA;AAEF,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAA;AAC3C,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/treeView/TreeView.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeView.d.mts","sourceRoot":"","sources":["../../../src/components/treeView/TreeView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,gBAAgB,GAAG,eAAe,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEhE,UAAU,aAAc,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,gBAAgB;CAAG;AAmB1F,QAAA,MAAM,YAAY,sFA0ChB,CAAA;AAGF,UAAU,aAAc,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACnE,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,QAAQ,sFA+DZ,CAAA;AAGF,QAAA,MAAM,QAAQ,EAAE,OAAO,YAAY,GAAG;IACpC,IAAI,EAAE,OAAO,QAAQ,CAAA;CAGrB,CAAA;AAEF,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAA;AAC3C,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"TreeView.d.mts","sourceRoot":"","sources":["../../../src/components/treeView/TreeView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,gBAAgB,GAAG,eAAe,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEhE,UAAU,aAAc,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,gBAAgB;CAAG;AAuB1F,QAAA,MAAM,YAAY,sFAsEhB,CAAA;AAGF,UAAU,aAAc,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACnE,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,QAAQ,sFAqFZ,CAAA;AAGF,QAAA,MAAM,QAAQ,EAAE,OAAO,YAAY,GAAG;IACpC,IAAI,EAAE,OAAO,QAAQ,CAAA;CAGrB,CAAA;AAEF,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAA;AAC3C,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/treeView/TreeView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../../src/components/treeView/TreeView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,gBAAgB,GAAG,eAAe,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEhE,UAAU,aAAc,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,gBAAgB;CAAG;AAmB1F,QAAA,MAAM,YAAY,sFA0ChB,CAAA;AAGF,UAAU,aAAc,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACnE,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,QAAQ,sFA+DZ,CAAA;AAGF,QAAA,MAAM,QAAQ,EAAE,OAAO,YAAY,GAAG;IACpC,IAAI,EAAE,OAAO,QAAQ,CAAA;CAGrB,CAAA;AAEF,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAA;AAC3C,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../../src/components/treeView/TreeView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,gBAAgB,GAAG,eAAe,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEhE,UAAU,aAAc,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,gBAAgB;CAAG;AAuB1F,QAAA,MAAM,YAAY,sFAsEhB,CAAA;AAGF,UAAU,aAAc,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACnE,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,QAAQ,sFAqFZ,CAAA;AAGF,QAAA,MAAM,QAAQ,EAAE,OAAO,YAAY,GAAG;IACpC,IAAI,EAAE,OAAO,QAAQ,CAAA;CAGrB,CAAA;AAEF,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAA;AAC3C,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/treeView/TreeView.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import classNames from "classnames";
 import { Slot } from "@radix-ui/react-slot";
-import { ChevronRight, ChevronDown, File } from "lucide-react";
+import { Icon } from "../icon/Icon.js";
 import { extractProps } from "../../_internal/helpers/extractProps.js";
 import { treeViewPropDefs } from "./treeView.props.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -17,8 +17,34 @@ function useTreeViewContext() {
 const TreeViewRoot = React.forwardRef((props, forwardedRef) => {
   const { asChild, children, className, size = "md", ...restProps } = extractProps(props, treeViewPropDefs);
   const Comp = asChild ? Slot : "div";
+  const rootRef = React.useRef(null);
   const [expandedItems, setExpandedItems] = React.useState(/* @__PURE__ */ new Set());
   const [selectedId, setSelectedId] = React.useState();
+  const [focusedId, setFocusedId] = React.useState();
+  const typeahead = React.useRef({ text: "", time: 0 });
+  const getNodes = React.useCallback(() => Array.from(rootRef.current?.querySelectorAll('[data-slot="tree-node"]') ?? []).filter((node) => node.closest('[role="tree"]') === rootRef.current), []);
+  const setRootRef = React.useCallback((node) => {
+    rootRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  }, [forwardedRef]);
+  React.useLayoutEffect(() => {
+    const nodes = getNodes();
+    if (!nodes.some((node) => node.dataset.treeId === focusedId)) {
+      setFocusedId(nodes.find((node) => node.dataset.treeId === selectedId)?.dataset.treeId ?? nodes[0]?.dataset.treeId);
+    }
+    for (const node of nodes) {
+      const wrapper = node.parentElement;
+      const siblings = Array.from(wrapper.parentElement?.children ?? []).filter((child) => child.matches('[data-slot="tree-item"]'));
+      let level = 1;
+      for (let parent = wrapper.parentElement; parent && parent !== rootRef.current; parent = parent.parentElement) {
+        if (parent.matches('[data-slot="tree-children"]')) level += 1;
+      }
+      node.setAttribute("aria-level", String(level));
+      node.setAttribute("aria-posinset", String(siblings.indexOf(wrapper) + 1));
+      node.setAttribute("aria-setsize", String(siblings.length));
+    }
+  }, [children, expandedItems, focusedId, selectedId, getNodes]);
   const toggleItem = React.useCallback((id) => {
     setExpandedItems((prev) => {
       const next = new Set(prev);
@@ -34,18 +60,18 @@ const TreeViewRoot = React.forwardRef((props, forwardedRef) => {
     setSelectedId(id);
   }, []);
   const contextValue = React.useMemo(
-    () => ({ expandedItems, toggleItem, selectedId, selectItem }),
-    [expandedItems, toggleItem, selectedId, selectItem]
+    () => ({ expandedItems, toggleItem, selectedId, selectItem, focusedId, setFocusedId, getNodes, typeahead }),
+    [expandedItems, toggleItem, selectedId, selectItem, focusedId, getNodes]
   );
   return /* @__PURE__ */ jsx(TreeViewContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     Comp,
     {
       ...restProps,
-      ref: forwardedRef,
+      ref: setRootRef,
       className: classNames("dsx-tree-view", className),
       "data-size": size,
       role: "tree",
-      "aria-label": "Tree view",
+      "aria-label": restProps["aria-label"] ?? (restProps["aria-labelledby"] ? void 0 : "Tree view"),
       "data-slot": "tree-view",
       children
     }
@@ -53,35 +79,54 @@ const TreeViewRoot = React.forwardRef((props, forwardedRef) => {
 });
 TreeViewRoot.displayName = "TreeView";
 const TreeItem = React.forwardRef((props, forwardedRef) => {
-  const { className, id, label, isFolder = false, children, ...restProps } = props;
-  const { expandedItems, toggleItem, selectedId, selectItem } = useTreeViewContext();
+  const { className, id, label, isFolder = false, children, onClick, onKeyDown, onFocus, ...restProps } = props;
+  const { expandedItems, toggleItem, selectedId, selectItem, focusedId, setFocusedId, getNodes, typeahead } = useTreeViewContext();
+  const groupId = React.useId();
   const isExpanded = expandedItems.has(id);
   const isSelected = selectedId === id;
   const hasChildren = React.Children.count(children) > 0;
-  const handleClick = React.useCallback(() => {
+  const handleClick = React.useCallback((event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    event.currentTarget.focus();
     selectItem(id);
     if (isFolder || hasChildren) {
       toggleItem(id);
     }
-  }, [id, isFolder, hasChildren, selectItem, toggleItem]);
+  }, [id, isFolder, hasChildren, selectItem, toggleItem, onClick]);
   const handleKeyDown = React.useCallback(
     (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
+      const nodes = getNodes();
+      const index = nodes.indexOf(e.currentTarget);
+      const focus = (node) => node?.focus();
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
-        handleClick();
-      }
-      if (e.key === "ArrowRight" && !isExpanded) {
+        selectItem(id);
+        if (isFolder || hasChildren) toggleItem(id);
+      } else if (e.key === "ArrowRight" && (isFolder || hasChildren)) {
         e.preventDefault();
-        toggleItem(id);
-      }
-      if (e.key === "ArrowLeft" && isExpanded) {
+        if (!isExpanded) toggleItem(id);
+        else if (hasChildren) focus(nodes[index + 1]);
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        if (isExpanded && (isFolder || hasChildren)) toggleItem(id);
+        else focus(e.currentTarget.parentElement?.parentElement?.closest('[data-slot="tree-item"]')?.querySelector('[data-slot="tree-node"]'));
+      } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) {
         e.preventDefault();
-        toggleItem(id);
+        focus(nodes[e.key === "Home" ? 0 : e.key === "End" ? nodes.length - 1 : Math.max(0, Math.min(nodes.length - 1, index + (e.key === "ArrowDown" ? 1 : -1)))]);
+      } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        const now = Date.now();
+        const text = (now - typeahead.current.time < 500 ? typeahead.current.text : "") + e.key.toLocaleLowerCase();
+        typeahead.current = { text, time: now };
+        const search = [...nodes.slice(index + 1), ...nodes.slice(0, index + 1)];
+        focus(search.find((node) => node.getAttribute("aria-label")?.toLocaleLowerCase().startsWith(text)));
       }
     },
-    [handleClick, isExpanded, id, toggleItem]
+    [isExpanded, isFolder, hasChildren, id, toggleItem, selectItem, getNodes, onKeyDown, typeahead]
   );
-  return /* @__PURE__ */ jsxs("div", { className: "dsx-tree-view__item", role: "treeitem", "aria-expanded": hasChildren ? isExpanded : void 0, "data-slot": "tree-item", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "dsx-tree-view__item", "data-slot": "tree-item", children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -94,15 +139,25 @@ const TreeItem = React.forwardRef((props, forwardedRef) => {
         ),
         onClick: handleClick,
         onKeyDown: handleKeyDown,
-        tabIndex: 0,
+        onFocus: (event) => {
+          setFocusedId(id);
+          onFocus?.(event);
+        },
+        tabIndex: focusedId === id ? 0 : -1,
+        role: "treeitem",
+        "aria-label": label,
+        "aria-expanded": isFolder || hasChildren ? isExpanded : void 0,
+        "aria-selected": isSelected,
+        "aria-owns": hasChildren && isExpanded ? groupId : void 0,
+        "data-tree-id": id,
         "data-slot": "tree-node",
         children: [
-          /* @__PURE__ */ jsx("span", { className: "dsx-tree-view__icon", "data-slot": "tree-icon", children: isFolder || hasChildren ? isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14 }) : /* @__PURE__ */ jsx(File, { size: 14 }) }),
+          /* @__PURE__ */ jsx("span", { className: "dsx-tree-view__icon", "data-slot": "tree-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { name: isFolder || hasChildren ? isExpanded ? "chevron-down" : "chevron-right" : "file", size: "sm" }) }),
           /* @__PURE__ */ jsx("span", { className: "dsx-tree-view__label", children: label })
         ]
       }
     ),
-    hasChildren && isExpanded && /* @__PURE__ */ jsx("div", { className: "dsx-tree-view__children", role: "group", "data-slot": "tree-children", children })
+    hasChildren && isExpanded && /* @__PURE__ */ jsx("div", { id: groupId, className: "dsx-tree-view__children", role: "group", "data-slot": "tree-children", children })
   ] });
 });
 TreeItem.displayName = "TreeItem";

package/dist/components/treeView/TreeView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/treeView/TreeView.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { ChevronRight, ChevronDown, File } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { treeViewPropDefs } from './treeView.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype TreeViewOwnProps = GetPropDefTypes<typeof treeViewPropDefs>\n\ninterface TreeViewProps extends React.ComponentPropsWithoutRef<'div'>, TreeViewOwnProps {}\n\ntype TreeViewContextValue = {\n  expandedItems: Set<string>\n  toggleItem: (id: string) => void\n  selectedId: string | undefined\n  selectItem: (id: string) => void\n}\n\nconst TreeViewContext = React.createContext<TreeViewContextValue | null>(null)\n\nfunction useTreeViewContext() {\n  const context = React.useContext(TreeViewContext)\n  if (!context) {\n    throw new Error('TreeView compound components must be used within TreeView')\n  }\n  return context\n}\n\nconst TreeViewRoot = React.forwardRef<HTMLDivElement, TreeViewProps>((props, forwardedRef) => {\n  const { asChild, children, className, size = 'md', ...restProps } = extractProps(props, treeViewPropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const [expandedItems, setExpandedItems] = React.useState<Set<string>>(new Set())\n  const [selectedId, setSelectedId] = React.useState<string | undefined>()\n\n  const toggleItem = React.useCallback((id: string) => {\n    setExpandedItems((prev) => {\n      const next = new Set(prev)\n      if (next.has(id)) {\n        next.delete(id)\n      } else {\n        next.add(id)\n      }\n      return next\n    })\n  }, [])\n\n  const selectItem = React.useCallback((id: string) => {\n    setSelectedId(id)\n  }, [])\n\n  const contextValue = React.useMemo(\n    () => ({ expandedItems, toggleItem, selectedId, selectItem }),\n    [expandedItems, toggleItem, selectedId, selectItem],\n  )\n\n  return (\n    <TreeViewContext.Provider value={contextValue}>\n      <Comp\n        {...restProps}\n        ref={forwardedRef}\n        className={classNames('dsx-tree-view', className)}\n        data-size={size}\n        role=\"tree\"\n        aria-label=\"Tree view\"\n        data-slot=\"tree-view\"\n      >\n        {children}\n      </Comp>\n    </TreeViewContext.Provider>\n  )\n})\nTreeViewRoot.displayName = 'TreeView'\n\ninterface TreeItemProps extends React.ComponentPropsWithoutRef<'div'> {\n  id: string\n  label: string\n  isFolder?: boolean\n  children?: React.ReactNode\n}\n\nconst TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>((props, forwardedRef) => {\n  const { className, id, label, isFolder = false, children, ...restProps } = props\n  const { expandedItems, toggleItem, selectedId, selectItem } = useTreeViewContext()\n  const isExpanded = expandedItems.has(id)\n  const isSelected = selectedId === id\n  const hasChildren = React.Children.count(children) > 0\n\n  const handleClick = React.useCallback(() => {\n    selectItem(id)\n    if (isFolder || hasChildren) {\n      toggleItem(id)\n    }\n  }, [id, isFolder, hasChildren, selectItem, toggleItem])\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        handleClick()\n      }\n      if (e.key === 'ArrowRight' && !isExpanded) {\n        e.preventDefault()\n        toggleItem(id)\n      }\n      if (e.key === 'ArrowLeft' && isExpanded) {\n        e.preventDefault()\n        toggleItem(id)\n      }\n    },\n    [handleClick, isExpanded, id, toggleItem],\n  )\n\n  return (\n    <div className=\"dsx-tree-view__item\" role=\"treeitem\" aria-expanded={hasChildren ? isExpanded : undefined} data-slot=\"tree-item\">\n      <div\n        {...restProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-tree-view__node',\n          isSelected && 'dsx-tree-view__node--selected',\n          className,\n        )}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        tabIndex={0}\n        data-slot=\"tree-node\"\n      >\n        <span className=\"dsx-tree-view__icon\" data-slot=\"tree-icon\">\n          {isFolder || hasChildren ? (\n            isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />\n          ) : (\n            <File size={14} />\n          )}\n        </span>\n        <span className=\"dsx-tree-view__label\">{label}</span>\n      </div>\n      {hasChildren && isExpanded && (\n        <div className=\"dsx-tree-view__children\" role=\"group\" data-slot=\"tree-children\">\n          {children}\n        </div>\n      )}\n    </div>\n  )\n})\nTreeItem.displayName = 'TreeItem'\n\nconst TreeView: typeof TreeViewRoot & {\n  Item: typeof TreeItem\n} = Object.assign(TreeViewRoot, {\n  Item: TreeItem,\n})\n\nexport { TreeView, TreeItem, TreeViewRoot }\nexport type { TreeItemProps, TreeViewOwnProps, TreeViewProps }\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { Icon } from '../icon/Icon'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { treeViewPropDefs } from './treeView.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype TreeViewOwnProps = GetPropDefTypes<typeof treeViewPropDefs>\n\ninterface TreeViewProps extends React.ComponentPropsWithoutRef<'div'>, TreeViewOwnProps {}\n\ntype TreeViewContextValue = {\n  expandedItems: Set<string>\n  toggleItem: (id: string) => void\n  selectedId: string | undefined\n  selectItem: (id: string) => void\n  focusedId: string | undefined\n  setFocusedId: (id: string) => void\n  getNodes: () => HTMLDivElement[]\n  typeahead: React.MutableRefObject<{ text: string; time: number }>\n}\n\nconst TreeViewContext = React.createContext<TreeViewContextValue | null>(null)\n\nfunction useTreeViewContext() {\n  const context = React.useContext(TreeViewContext)\n  if (!context) {\n    throw new Error('TreeView compound components must be used within TreeView')\n  }\n  return context\n}\n\nconst TreeViewRoot = React.forwardRef<HTMLDivElement, TreeViewProps>((props, forwardedRef) => {\n  const { asChild, children, className, size = 'md', ...restProps } = extractProps(props, treeViewPropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const rootRef = React.useRef<HTMLDivElement | null>(null)\n  const [expandedItems, setExpandedItems] = React.useState<Set<string>>(new Set())\n  const [selectedId, setSelectedId] = React.useState<string | undefined>()\n  const [focusedId, setFocusedId] = React.useState<string>()\n  const typeahead = React.useRef({ text: '', time: 0 })\n  const getNodes = React.useCallback(() => Array.from(rootRef.current?.querySelectorAll<HTMLDivElement>('[data-slot=\"tree-node\"]') ?? [])\n    .filter((node) => node.closest('[role=\"tree\"]') === rootRef.current), [])\n  const setRootRef = React.useCallback((node: HTMLDivElement | null) => {\n    rootRef.current = node\n    if (typeof forwardedRef === 'function') forwardedRef(node)\n    else if (forwardedRef) forwardedRef.current = node\n  }, [forwardedRef])\n\n  React.useLayoutEffect(() => {\n    const nodes = getNodes()\n    if (!nodes.some((node) => node.dataset.treeId === focusedId)) {\n      setFocusedId(nodes.find((node) => node.dataset.treeId === selectedId)?.dataset.treeId ?? nodes[0]?.dataset.treeId)\n    }\n    for (const node of nodes) {\n      const wrapper = node.parentElement!\n      const siblings = Array.from(wrapper.parentElement?.children ?? []).filter((child) => child.matches('[data-slot=\"tree-item\"]'))\n      let level = 1\n      for (let parent = wrapper.parentElement; parent && parent !== rootRef.current; parent = parent.parentElement) {\n        if (parent.matches('[data-slot=\"tree-children\"]')) level += 1\n      }\n      node.setAttribute('aria-level', String(level))\n      node.setAttribute('aria-posinset', String(siblings.indexOf(wrapper) + 1))\n      node.setAttribute('aria-setsize', String(siblings.length))\n    }\n  }, [children, expandedItems, focusedId, selectedId, getNodes])\n\n  const toggleItem = React.useCallback((id: string) => {\n    setExpandedItems((prev) => {\n      const next = new Set(prev)\n      if (next.has(id)) {\n        next.delete(id)\n      } else {\n        next.add(id)\n      }\n      return next\n    })\n  }, [])\n\n  const selectItem = React.useCallback((id: string) => {\n    setSelectedId(id)\n  }, [])\n\n  const contextValue = React.useMemo(\n    () => ({ expandedItems, toggleItem, selectedId, selectItem, focusedId, setFocusedId, getNodes, typeahead }),\n    [expandedItems, toggleItem, selectedId, selectItem, focusedId, getNodes],\n  )\n\n  return (\n    <TreeViewContext.Provider value={contextValue}>\n      <Comp\n        {...restProps}\n        ref={setRootRef}\n        className={classNames('dsx-tree-view', className)}\n        data-size={size}\n        role=\"tree\"\n        aria-label={restProps['aria-label'] ?? (restProps['aria-labelledby'] ? undefined : 'Tree view')}\n        data-slot=\"tree-view\"\n      >\n        {children}\n      </Comp>\n    </TreeViewContext.Provider>\n  )\n})\nTreeViewRoot.displayName = 'TreeView'\n\ninterface TreeItemProps extends React.ComponentPropsWithoutRef<'div'> {\n  id: string\n  label: string\n  isFolder?: boolean\n  children?: React.ReactNode\n}\n\nconst TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>((props, forwardedRef) => {\n  const { className, id, label, isFolder = false, children, onClick, onKeyDown, onFocus, ...restProps } = props\n  const { expandedItems, toggleItem, selectedId, selectItem, focusedId, setFocusedId, getNodes, typeahead } = useTreeViewContext()\n  const groupId = React.useId()\n  const isExpanded = expandedItems.has(id)\n  const isSelected = selectedId === id\n  const hasChildren = React.Children.count(children) > 0\n\n  const handleClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onClick?.(event)\n    if (event.defaultPrevented) return\n    event.currentTarget.focus()\n    selectItem(id)\n    if (isFolder || hasChildren) {\n      toggleItem(id)\n    }\n  }, [id, isFolder, hasChildren, selectItem, toggleItem, onClick])\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(e)\n      if (e.defaultPrevented) return\n      const nodes = getNodes()\n      const index = nodes.indexOf(e.currentTarget)\n      const focus = (node: HTMLElement | undefined | null) => node?.focus()\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        selectItem(id)\n        if (isFolder || hasChildren) toggleItem(id)\n      } else if (e.key === 'ArrowRight' && (isFolder || hasChildren)) {\n        e.preventDefault()\n        if (!isExpanded) toggleItem(id)\n        else if (hasChildren) focus(nodes[index + 1])\n      } else if (e.key === 'ArrowLeft') {\n        e.preventDefault()\n        if (isExpanded && (isFolder || hasChildren)) toggleItem(id)\n        else focus(e.currentTarget.parentElement?.parentElement?.closest('[data-slot=\"tree-item\"]')?.querySelector<HTMLElement>('[data-slot=\"tree-node\"]'))\n      } else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {\n        e.preventDefault()\n        focus(nodes[e.key === 'Home' ? 0 : e.key === 'End' ? nodes.length - 1 : Math.max(0, Math.min(nodes.length - 1, index + (e.key === 'ArrowDown' ? 1 : -1)))])\n      } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n        const now = Date.now()\n        const text = (now - typeahead.current.time < 500 ? typeahead.current.text : '') + e.key.toLocaleLowerCase()\n        typeahead.current = { text, time: now }\n        const search = [...nodes.slice(index + 1), ...nodes.slice(0, index + 1)]\n        focus(search.find((node) => node.getAttribute('aria-label')?.toLocaleLowerCase().startsWith(text)))\n      }\n    },\n    [isExpanded, isFolder, hasChildren, id, toggleItem, selectItem, getNodes, onKeyDown, typeahead],\n  )\n\n  return (\n    <div className=\"dsx-tree-view__item\" data-slot=\"tree-item\">\n      <div\n        {...restProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-tree-view__node',\n          isSelected && 'dsx-tree-view__node--selected',\n          className,\n        )}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onFocus={(event) => { setFocusedId(id); onFocus?.(event) }}\n        tabIndex={focusedId === id ? 0 : -1}\n        role=\"treeitem\"\n        aria-label={label}\n        aria-expanded={isFolder || hasChildren ? isExpanded : undefined}\n        aria-selected={isSelected}\n        aria-owns={hasChildren && isExpanded ? groupId : undefined}\n        data-tree-id={id}\n        data-slot=\"tree-node\"\n      >\n        <span className=\"dsx-tree-view__icon\" data-slot=\"tree-icon\" aria-hidden=\"true\">\n          <Icon name={isFolder || hasChildren ? (isExpanded ? 'chevron-down' : 'chevron-right') : 'file'} size=\"sm\" />\n        </span>\n        <span className=\"dsx-tree-view__label\">{label}</span>\n      </div>\n      {hasChildren && isExpanded && (\n        <div id={groupId} className=\"dsx-tree-view__children\" role=\"group\" data-slot=\"tree-children\">\n          {children}\n        </div>\n      )}\n    </div>\n  )\n})\nTreeItem.displayName = 'TreeItem'\n\nconst TreeView: typeof TreeViewRoot & {\n  Item: typeof TreeItem\n} = Object.assign(TreeViewRoot, {\n  Item: TreeItem,\n})\n\nexport { TreeView, TreeItem, TreeViewRoot }\nexport type { TreeItemProps, TreeViewOwnProps, TreeViewProps }\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components.css

@@ -9,6 +9,7 @@
 @import 'components/avatar.css';
 @import 'components/badge.css';
 @import 'components/banner.css';
+@import 'components/bottom-dock.css';
 @import 'components/button.css';
 @import 'components/card.css';
 @import 'components/carousel.css';
@@ -20,6 +21,7 @@
 @import 'components/color-swatch.css';
 @import 'components/dropdown-menu.css';
 @import 'components/empty-state.css';
+@import 'components/environment-ribbon.css';
 @import 'components/editable.css';
 @import 'components/em.css';
 @import 'components/menu.css';

package/dist/docs/README.md

@@ -71,6 +71,7 @@ They describe public intent and contracts; TypeScript declarations remain the ex
 - [AlertDialog](./components/alert-dialog.md)
 - [ArticleNodes](./components/article-nodes.md)
 - [Banner](./components/banner.md)
+- [BottomDock](./components/bottom-dock.md)
 - [Breadcrumb](./components/breadcrumb.md)
 - [ButtonGroup](./components/button-group.md)
 - [Calendar](./components/calendar.md)
@@ -96,6 +97,7 @@ They describe public intent and contracts; TypeScript declarations remain the ex
 - [DropdownMenu](./components/dropdown-menu.md)
 - [Editable](./components/editable.md)
 - [EmptyState](./components/empty-state.md)
+- [EnvironmentRibbon](./components/environment-ribbon.md)
 - [Field](./components/field.md)
 - [FileUpload](./components/file-upload.md)
 - [FilterBar](./components/filter-bar.md)

package/dist/docs/component-contract.md

@@ -49,6 +49,7 @@ from the closest RT category (see legend).
 | Badge | RT Badge | ✓ | ✓ | ✓ | ✓ | ✓ | Full set |
 | Banner | Custom → none | ✓ | — | — | — | — | Hero mass; wash/fill variant |
 | Blockquote | RT Blockquote | — | — | — | — | — | Typographic; no styling props in RT |
+| BottomDock | Custom → none | — | — | — | — | — | Floating phone-width nav; `placement` / `labels` are not tracked styling attrs |
 | Box | RT Box (layout) | — | — | — | — | — | Layout; no styling attrs |
 | Breadcrumb | Custom → none | — | ✓ | — | — | — | Size only; no RT counterpart |
 | Button | RT Button | ✓ | ✓ | ✓ | ✓ | ✓ | Reference implementation ✓ done |
@@ -84,6 +85,7 @@ from the closest RT category (see legend).
 | Editable | Custom → TextField | ✓ | ✓ | — | ✓ | — | Inline edit; variant+size+radius |
 | Em | RT Em | — | — | — | — | — | Typographic; no props in RT |
 | EmptyState | Custom → none | ✓ | ✓ | — | — | — | Size + variant (`default`/`unavailable`) |
+| EnvironmentRibbon | Custom → none | — | — | — | — | — | Floating non-production pill; `placement` / `haze` are not tracked styling attrs |
 | Field | Custom → none | — | ✓ | — | — | — | Form field wrapper; size only |
 | FileUpload | Custom → TextField | — | ✓ | — | — | — | Input-like; size only |
 | FilterBar | Custom → none | — | ✓ | — | — | — | Toolbar composition; size only on the root (Rules/Rule/Builder/Search write no V/C/R/H attrs) |
@@ -116,7 +118,7 @@ from the closest RT category (see legend).
 | PasswordInput | Custom → TextField | ✓ | ✓ | — | ✓ | — | Input-like; variant+size+radius |
 | PhoneInput | Custom → TextField | ✓ | ✓ | — | — | — | Input-like; variant+size (density writes data-size); no accent/radius/high-contrast |
 | PageContent | Custom → none | — | — | — | — | — | Padding is represented by classes, not tracked attributes |
-| PageHeader | Custom → none | — | — | — | — | — | Structural page composition; no styling attrs |
+| PageHeader | Custom → none | ✓ | — | — | — | — | Variant only (`default`, `floating`); one fixed height, no size or accent attrs |
 | Pills | Custom → Badge | ✓ | ✓ | ✓ | ✓ | — | Badge-like chip list; V+S+C+R |
 | Popover | Primitive → Dialog | — | ✓ | — | — | — | Content size by Dialog analogy |
 | Progress | RT Progress | ✓ | ✓ | ✓ | — | ✓ | RT Progress: no radius |
@@ -137,7 +139,7 @@ from the closest RT category (see legend).
 | Select | RT Select | ✓ | ✓ | — | — | — | RT Select.Trigger: V+S, no C/R/H |
 | Separator | RT Separator | — | ✓ | ✓ | — | — | RT Separator: size+color, no V/R/H |
 | Sheet | Custom → Dialog | — | ✓ | — | — | — | Dialog side-panel variant; size only |
-| Sidebar | Custom → variant | ✓ | — | — | — | — | Layout shell; ring `MenuBadge` emits `data-variant="ring"` |
+| Sidebar | Custom → variant | ✓ | — | — | — | — | Layout shell; `Provider` and root emit `data-variant` (`default` \| `floating`); ring `MenuBadge` emits `data-variant="ring"` |
 | Skeleton | RT Skeleton | — | — | — | — | — | No styling props in RT |
 | Slider | RT Slider | ✓ | ✓ | ✓ | ✓ | ✓ | Full set |
 | Slot | Radix Slot (utility) | — | — | — | — | — | Pure slot; no styling |
@@ -187,13 +189,14 @@ from the closest RT category (see legend).
 | V+S+R | Editable, NumberInput, PasswordInput, SearchBar, TagsInput | 5 |
 | V+S+H | Toggle, ToggleGroup | 2 |
 | V+S | Card, DataList, NativeSelect, SegmentedControl, Select, StatCard, Table, TabNav, Tabs, Toast | 10 |
+| V only | PageHeader | 1 |
 | S+C+H | Heading, Link, Text | 3 |
 | S+C | SegmentedMeter, Separator, Status | 3 |
 | S+R | InputOtp, ScrollArea | 2 |
 | S only | AlertDialog, Breadcrumb, ButtonGroup, Calendar (see above), Carousel, CodeInput,<br>ColorPicker, ColorSwatch, Command, Container, ContextMenu, CopyField, DataTable,<br>DatePicker, Dialog, Drawer, DropdownMenu, EmptyState, Field, FileUpload, FilterBar,<br>FloatingPanel, HoverCard, Icon, InputGroup, Kbd, Label, Menu, Menubar, Metric,<br>NavigationMenu, Pagination, Popover, QrCode, Section, Sheet, Spinner, Stepper,<br>Timeline, TimePicker, ToggleTip, Toolbar, TreeView | 43 |
-| None | AccessibleIcon, Accordion, ArticleNodes, AspectRatio, Banner, Blockquote, Box, Chart,<br>Collapsible, CommentThread, ConfigDrawer, DirectionProvider, Em, Flex, FontProvider,<br>Form, Grid, Inset, Item, Marquee, NotificationCenter, PageContent, PageHeader, Prose, Quote,<br>Resizable, Result, RichTextEditor, Sidebar, Skeleton, Slot, Sonner, SortableList, Stack, Strong,<br>TableOfContents, Theme, ThemePanel, ThemeProvider, Tooltip, VisuallyHidden | 41 |
+| None | AccessibleIcon, Accordion, ArticleNodes, AspectRatio, Banner, Blockquote, BottomDock, Box, Chart,<br>Collapsible, CommentThread, ConfigDrawer, DirectionProvider, Em, EnvironmentRibbon, Flex, FontProvider,<br>Form, Grid, Inset, Item, Marquee, NotificationCenter, PageContent, Prose, Quote,<br>Resizable, Result, RichTextEditor, Sidebar, Skeleton, Slot, Sonner, SortableList, Stack, Strong,<br>TableOfContents, Theme, ThemePanel, ThemeProvider, Tooltip, VisuallyHidden | 41 |
 
-**Total components covered: 131**
+**Total components covered: 133**
 
 ---
 

package/dist/docs/component-index.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "packageVersion": "3.0.1",
+  "packageVersion": "4.0.1",
   "generatedFrom": "docs/design-system",
   "components": [
     {
@@ -443,6 +443,14 @@
       "status": "canonical",
       "documentation": "./components/banner.md"
     },
+    {
+      "name": "BottomDock",
+      "slug": "bottom-dock",
+      "category": "Components",
+      "archetype": "composite",
+      "status": "canonical",
+      "documentation": "./components/bottom-dock.md"
+    },
     {
       "name": "Breadcrumb",
       "slug": "breadcrumb",
@@ -643,6 +651,14 @@
       "status": "canonical",
       "documentation": "./components/empty-state.md"
     },
+    {
+      "name": "EnvironmentRibbon",
+      "slug": "environment-ribbon",
+      "category": "Components",
+      "archetype": "primitive",
+      "status": "canonical",
+      "documentation": "./components/environment-ribbon.md"
+    },
     {
       "name": "Field",
       "slug": "field",