@salt-ds/core 1.62.0 → 1.63.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @salt-ds/core
 
+## 1.63.0
+
+### Minor Changes
+
+- fcf295b: Added `Tree`, `TreeNode`, `TreeNodeTrigger`, and `TreeNodeLabel`.
+
+  `Tree` displays hierarchical data as an expandable and collapsible structure. Users can navigate nested items and optionally select one or more nodes.
+
+  ```tsx
+  <Tree aria-label="File browser" defaultExpanded={["documents"]}>
+    <TreeNode value="documents" label="Documents">
+      <TreeNode value="reports" label="Reports">
+        <TreeNode value="annual-report" label="Annual Report" />
+      </TreeNode>
+    </TreeNode>
+  </Tree>
+  ```
+
 ## 1.62.0
 
 ### Minor Changes

package/css/salt-core.css

@@ -5558,6 +5558,165 @@ label.saltText small,
   --tooltip-status-borderColor: var(--salt-status-success-borderColor);
 }
 
+/* src/tree/Tree.css */
+.saltTree {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-fixed-100);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+.saltTree-disabled {
+  cursor: var(--salt-cursor-disabled);
+}
+
+/* src/tree/TreeNode.css */
+.saltTreeNode {
+  list-style: none;
+  position: relative;
+  cursor: var(--salt-cursor-hover);
+}
+.saltTreeNode:focus {
+  outline: none;
+}
+.saltTreeNode:focus-visible > .saltTreeNodeTrigger,
+.saltTreeNode-focusVisible > .saltTreeNodeTrigger {
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-size-fixed-100) * -2);
+  position: relative;
+  z-index: calc(var(--salt-zIndex-default) + 1);
+}
+.saltTreeNode-selected:focus-visible > .saltTreeNodeTrigger,
+.saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-size-fixed-100) * -2);
+  z-index: calc(var(--salt-zIndex-default) + 1);
+}
+.saltTreeNode-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-fixed-100);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding-top: var(--salt-spacing-fixed-100);
+}
+.saltTreeNode-checkbox {
+  flex-shrink: 0;
+  height: var(--salt-size-selectable);
+}
+.saltTreeNode-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--saltTreeNodeTrigger-iconSize);
+  min-width: var(--saltTreeNodeTrigger-iconSize);
+  height: var(--saltTreeNodeTrigger-iconSize);
+  flex-shrink: 0;
+}
+.saltTreeNode-icon > * {
+  color: var(--salt-content-primary-foreground);
+}
+
+/* src/tree/TreeNodeExpansionIcon.css */
+.saltTreeNodeExpansionIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--saltTreeNodeTrigger-iconSize);
+  min-width: var(--saltTreeNodeTrigger-iconSize);
+  height: var(--saltTreeNodeTrigger-iconSize);
+  flex-shrink: 0;
+  position: relative;
+}
+.saltTreeNodeExpansionIcon-icon {
+  color: var(--salt-content-primary-foreground);
+}
+.saltTreeNodeExpansionIcon::before {
+  content: "";
+  display: block;
+  position: absolute;
+  width: var(--salt-size-base);
+  height: var(--salt-size-base);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* src/tree/TreeNodeLabel.css */
+.saltTreeNodeLabel {
+  flex: 1;
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
+  word-break: break-word;
+}
+
+/* src/tree/TreeNodeTrigger.css */
+.saltTreeNodeTrigger {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--salt-spacing-100);
+  width: 100%;
+  padding-top: calc(var(--salt-spacing-75) + var(--salt-spacing-50));
+  padding-bottom: calc(var(--salt-spacing-75) + var(--salt-spacing-50));
+  padding-right: var(--salt-spacing-100);
+  --saltTreeNodeTrigger-iconSize: max(var(--salt-size-icon), 12px);
+  --saltTreeNodeTrigger-indentStep: calc(var(--saltTreeNodeTrigger-iconSize) + var(--salt-spacing-100));
+  --saltTreeNodeTrigger-iconOffsetY: calc((var(--salt-text-lineHeight) - var(--saltTreeNodeTrigger-iconSize)) / 2);
+  --saltTreeNodeTrigger-checkboxOffsetY: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);
+  padding-left: calc(var(--salt-spacing-100) + (var(--saltTreeNodeTrigger-indentStep) * (var(--saltTreeNode-level, 1) - 1)));
+  background: var(--salt-selectable-background);
+  color: var(--salt-content-primary-foreground);
+}
+.saltTree-multiselect .saltTreeNodeTrigger {
+  --saltTreeNodeTrigger-indentStep: calc(((var(--saltTreeNodeTrigger-iconSize) + var(--salt-size-selectable)) / 2) + var(--salt-spacing-100));
+}
+.saltTreeNodeTrigger:hover {
+  background: var(--salt-selectable-background-hover);
+}
+.saltTreeNode:focus-visible > .saltTreeNodeTrigger,
+.saltTreeNode-focusVisible > .saltTreeNodeTrigger {
+  background: var(--salt-selectable-background-hover);
+}
+.saltTreeNode-selected > .saltTreeNodeTrigger {
+  background: var(--salt-selectable-background-selected);
+  box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
+  position: relative;
+  z-index: var(--salt-zIndex-default);
+}
+.saltTreeNode-selected:focus-visible > .saltTreeNodeTrigger,
+.saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {
+  background: var(--salt-selectable-background-selected);
+}
+.saltTreeNode-disabled > .saltTreeNodeTrigger,
+.saltTreeNode-disabled:hover > .saltTreeNodeTrigger {
+  opacity: 0.4;
+  cursor: var(--salt-cursor-disabled);
+  background: var(--salt-selectable-background);
+  color: var(--salt-content-primary-foreground);
+}
+.saltTreeNodeTrigger > .saltTreeNode-checkbox {
+  margin-top: var(--saltTreeNodeTrigger-checkboxOffsetY);
+  margin-bottom: 0;
+}
+.saltTreeNodeTrigger > .saltTreeNodeExpansionIcon,
+.saltTreeNodeTrigger > .saltTreeNode-icon {
+  margin-top: var(--saltTreeNodeTrigger-iconOffsetY);
+}
+.saltTreeNodeTrigger > .saltIcon {
+  margin-top: var(--saltTreeNodeTrigger-iconOffsetY);
+  flex-shrink: 0;
+  color: var(--salt-content-primary-foreground);
+}
+
 /* src/vertical-navigation/VerticalNavigation.css */
 .saltVerticalNavigation ol {
   display: flex;
@@ -6329,4 +6488,4 @@ label.saltText small,
   box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
 }
 
-/* src/e5e7d410-cd0b-435a-a247-782117a31674.css */
+/* src/714e3603-33e8-458e-a737-6975a2f26ebd.css */

package/dist-cjs/index.js

@@ -155,6 +155,10 @@ var ToggletipPanel = require('./toggletip/ToggletipPanel.js');
 var ToggletipTrigger = require('./toggletip/ToggletipTrigger.js');
 var Tooltip = require('./tooltip/Tooltip.js');
 var useTooltip = require('./tooltip/useTooltip.js');
+var Tree = require('./tree/Tree.js');
+var TreeNode = require('./tree/TreeNode.js');
+var TreeNodeLabel = require('./tree/TreeNodeLabel.js');
+var TreeNodeTrigger = require('./tree/TreeNodeTrigger.js');
 var capitalize = require('./utils/capitalize.js');
 var createChainedFunction = require('./utils/createChainedFunction.js');
 var createContext = require('./utils/createContext.js');
@@ -379,6 +383,10 @@ exports.ToggletipPanel = ToggletipPanel.ToggletipPanel;
 exports.ToggletipTrigger = ToggletipTrigger.ToggletipTrigger;
 exports.Tooltip = Tooltip.Tooltip;
 exports.useTooltip = useTooltip.useTooltip;
+exports.Tree = Tree.Tree;
+exports.TreeNode = TreeNode.TreeNode;
+exports.TreeNodeLabel = TreeNodeLabel.TreeNodeLabel;
+exports.TreeNodeTrigger = TreeNodeTrigger.TreeNodeTrigger;
 exports.capitalize = capitalize.capitalize;
 exports.createChainedFunction = createChainedFunction.createChainedFunction;
 exports.createContext = createContext.createContext;

package/dist-cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-cjs/tree/Tree.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltTree {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-fixed-100);\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  outline: none;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.saltTree-disabled {\n  cursor: var(--salt-cursor-disabled);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=Tree.css.js.map

package/dist-cjs/tree/Tree.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/tree/Tree.js

@@ -0,0 +1,308 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var React = require('react');
+var makePrefixer = require('../utils/makePrefixer.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+var useForkRef = require('../utils/useForkRef.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var Tree$1 = require('./Tree.css.js');
+var TreeContext = require('./TreeContext.js');
+var useTree = require('./useTree.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltTree");
+const Tree = React.forwardRef(
+  function Tree2(props, ref) {
+    const {
+      children,
+      className,
+      defaultExpanded,
+      expanded,
+      onExpandedChange,
+      defaultSelected,
+      selected,
+      onSelectionChange,
+      multiselect = false,
+      disabled = false,
+      onKeyDown,
+      onBlur,
+      ...rest
+    } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-tree",
+      css: Tree$1,
+      window: targetWindow
+    });
+    const treeState = useTree.useTree({
+      defaultExpanded,
+      expanded,
+      onExpandedChange,
+      defaultSelected,
+      selected,
+      onSelectionChange,
+      multiselect,
+      disabled,
+      children
+    });
+    const {
+      activeNode,
+      setActiveNode,
+      expandedArray,
+      setExpandedArray,
+      expandedState,
+      toggleExpanded,
+      select,
+      selectedSet,
+      setVisibleSelectionState,
+      visibleNodes,
+      getNodeMeta,
+      getElement,
+      getParent,
+      getChildren,
+      treeModel,
+      disabledIdsSet
+    } = treeState;
+    const lastKeypressRef = React.useRef("");
+    const keypressTimeoutRef = React.useRef(
+      null
+    );
+    const treeRef = React.useRef(null);
+    React.useEffect(() => {
+      return () => {
+        if (keypressTimeoutRef.current) {
+          clearTimeout(keypressTimeoutRef.current);
+        }
+      };
+    }, []);
+    const handleBlur = (event) => {
+      var _a;
+      onBlur == null ? void 0 : onBlur(event);
+      const relatedTarget = event.relatedTarget;
+      if (!((_a = treeRef.current) == null ? void 0 : _a.contains(relatedTarget))) {
+        setActiveNode(void 0);
+      }
+    };
+    const focusNode = (value) => {
+      const element = getElement(value);
+      if (!element) {
+        return "missing";
+      }
+      const activeEl = targetWindow == null ? void 0 : targetWindow.document.activeElement;
+      if (activeEl === element) {
+        return "already-focused";
+      }
+      element.focus();
+      element.scrollIntoView({ block: "nearest", inline: "nearest" });
+      return "focused";
+    };
+    const handleKeyDown = (event) => {
+      var _a, _b;
+      onKeyDown == null ? void 0 : onKeyDown(event);
+      if (disabled) return;
+      if (visibleNodes.length === 0) return;
+      const currentIndex = activeNode ? visibleNodes.indexOf(activeNode) : -1;
+      let newActiveNode;
+      let handled = false;
+      switch (event.key) {
+        case "ArrowDown": {
+          handled = true;
+          const nextIndex = currentIndex + 1;
+          if (nextIndex < visibleNodes.length) {
+            newActiveNode = visibleNodes[nextIndex];
+          }
+          break;
+        }
+        case "ArrowUp": {
+          handled = true;
+          const prevIndex = currentIndex - 1;
+          if (prevIndex >= 0) {
+            newActiveNode = visibleNodes[prevIndex];
+          }
+          break;
+        }
+        case "ArrowRight": {
+          handled = true;
+          if (activeNode) {
+            const nodeMeta = getNodeMeta(activeNode);
+            const isDisabled = disabledIdsSet.has(activeNode);
+            const hasChildren = Boolean(nodeMeta == null ? void 0 : nodeMeta.hasChildren);
+            const isExpanded = expandedState.has(activeNode);
+            if (!isDisabled && hasChildren) {
+              if (!isExpanded) {
+                toggleExpanded(event, activeNode);
+              } else {
+                const firstChild = visibleNodes.find(
+                  (visibleNode) => getParent(visibleNode) === activeNode
+                );
+                if (firstChild) {
+                  newActiveNode = firstChild;
+                }
+              }
+            }
+          }
+          break;
+        }
+        case "ArrowLeft": {
+          handled = true;
+          if (activeNode) {
+            const isDisabled = disabledIdsSet.has(activeNode);
+            if (!isDisabled) {
+              const isExpanded = expandedState.has(activeNode);
+              if (isExpanded) {
+                toggleExpanded(event, activeNode);
+              } else {
+                const parent = getParent(activeNode);
+                if (parent) {
+                  newActiveNode = parent;
+                }
+              }
+            }
+          }
+          break;
+        }
+        case "Home": {
+          handled = true;
+          newActiveNode = visibleNodes[0];
+          break;
+        }
+        case "End": {
+          handled = true;
+          newActiveNode = visibleNodes[visibleNodes.length - 1];
+          break;
+        }
+        case "Enter": {
+          handled = true;
+          if (activeNode) {
+            select(event, activeNode);
+          }
+          break;
+        }
+        case " ": {
+          handled = true;
+          if (activeNode) {
+            select(event, activeNode);
+          }
+          break;
+        }
+        case "*": {
+          handled = true;
+          if (activeNode) {
+            const parent = getParent(activeNode);
+            const siblings = parent ? getChildren(parent) : treeModel.rootValues;
+            const toExpand = siblings.filter((sibling) => {
+              const siblingMeta = getNodeMeta(sibling);
+              return (siblingMeta == null ? void 0 : siblingMeta.hasChildren) && !expandedState.has(sibling) && !disabledIdsSet.has(sibling);
+            });
+            if (toExpand.length > 0) {
+              const newExpanded = [...expandedArray, ...toExpand];
+              setExpandedArray(newExpanded);
+              onExpandedChange == null ? void 0 : onExpandedChange(event, newExpanded);
+            }
+          }
+          break;
+        }
+        default: {
+          if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+            handled = true;
+            if (keypressTimeoutRef.current) {
+              clearTimeout(keypressTimeoutRef.current);
+            }
+            lastKeypressRef.current += event.key.toLowerCase();
+            const searchString = lastKeypressRef.current;
+            keypressTimeoutRef.current = setTimeout(() => {
+              lastKeypressRef.current = "";
+            }, 500);
+            const currentIndex2 = activeNode ? visibleNodes.indexOf(activeNode) : -1;
+            let found = false;
+            for (let i = currentIndex2 + 1; i < visibleNodes.length; i++) {
+              const element = getElement(visibleNodes[i]);
+              if ((_a = element == null ? void 0 : element.textContent) == null ? void 0 : _a.toLowerCase().startsWith(searchString)) {
+                newActiveNode = visibleNodes[i];
+                found = true;
+                break;
+              }
+            }
+            if (!found) {
+              for (let i = 0; i <= currentIndex2; i++) {
+                const element = getElement(visibleNodes[i]);
+                if ((_b = element == null ? void 0 : element.textContent) == null ? void 0 : _b.toLowerCase().startsWith(searchString)) {
+                  newActiveNode = visibleNodes[i];
+                  break;
+                }
+              }
+            }
+          }
+          break;
+        }
+      }
+      if ((event.ctrlKey || event.metaKey) && event.key === "a" && multiselect) {
+        handled = true;
+        event.preventDefault();
+        const allVisibleValues = visibleNodes.filter(
+          (visibleNode) => !disabledIdsSet.has(visibleNode)
+        );
+        const allSelected = allVisibleValues.every(
+          (visible) => selectedSet.has(visible)
+        );
+        const newSelected = allSelected ? [] : allVisibleValues;
+        setVisibleSelectionState(newSelected);
+        onSelectionChange == null ? void 0 : onSelectionChange(event, newSelected);
+        return;
+      }
+      if (event.shiftKey && (event.key === "ArrowUp" || event.key === "ArrowDown") && multiselect) {
+        handled = true;
+        const isDown = event.key === "ArrowDown";
+        const currentIndex2 = activeNode ? visibleNodes.indexOf(activeNode) : -1;
+        const nextIndex = isDown ? currentIndex2 + 1 : currentIndex2 - 1;
+        if (nextIndex >= 0 && nextIndex < visibleNodes.length) {
+          const nextValue = visibleNodes[nextIndex];
+          if (!disabledIdsSet.has(nextValue)) {
+            select(event, nextValue);
+            newActiveNode = nextValue;
+          }
+        }
+      }
+      if (handled) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      if (newActiveNode !== void 0) {
+        const focusResult = focusNode(newActiveNode);
+        if (focusResult !== "focused") {
+          setActiveNode(newActiveNode);
+        }
+      }
+    };
+    const handleRef = useForkRef.useForkRef(treeRef, ref);
+    return /* @__PURE__ */ jsxRuntime.jsx(TreeContext.TreeProvider, { value: treeState, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        ref: handleRef,
+        role: "tree",
+        "aria-multiselectable": multiselect ? true : void 0,
+        "aria-disabled": disabled || void 0,
+        className: clsx.clsx(
+          withBaseName(),
+          {
+            [withBaseName("disabled")]: disabled,
+            [withBaseName("multiselect")]: multiselect
+          },
+          className
+        ),
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+
+exports.Tree = Tree;
+//# sourceMappingURL=Tree.js.map

package/dist-cjs/tree/Tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.js","sources":["../src/tree/Tree.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  forwardRef,\n  type KeyboardEvent,\n  type SyntheticEvent,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { makePrefixer, useForkRef } from \"../utils\";\nimport treeCss from \"./Tree.css\";\nimport { TreeProvider } from \"./TreeContext\";\nimport { useTree } from \"./useTree\";\n\nexport interface TreeProps extends ComponentPropsWithoutRef<\"ul\"> {\n  /**\n   * Default expanded nodes (uncontrolled)\n   */\n  defaultExpanded?: string[];\n  /**\n   * Expanded nodes (controlled)\n   */\n  expanded?: string[];\n  /**\n   * Callback on expanded nodes change\n   */\n  onExpandedChange?: (event: SyntheticEvent, expanded: string[]) => void;\n  /**\n   * Default selected nodes (uncontrolled)\n   */\n  defaultSelected?: string[];\n  /**\n   * Selected nodes\n   */\n  selected?: string[];\n  /**\n   * Callback on selected nodes change\n   */\n  onSelectionChange?: (event: SyntheticEvent, selected: string[]) => void;\n  /**\n   * Sets multiselect mode with checkboxes and allows for multiple node selection\n   */\n  multiselect?: boolean;\n  /**\n   * Sets tree to disabled state, preventing all interaction\n   */\n  disabled?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltTree\");\n\nexport const Tree = forwardRef<HTMLUListElement, TreeProps>(\n  function Tree(props, ref) {\n    const {\n      children,\n      className,\n      defaultExpanded,\n      expanded,\n      onExpandedChange,\n      defaultSelected,\n      selected,\n      onSelectionChange,\n      multiselect = false,\n      disabled = false,\n      onKeyDown,\n      onBlur,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tree\",\n      css: treeCss,\n      window: targetWindow,\n    });\n\n    const treeState = useTree({\n      defaultExpanded,\n      expanded,\n      onExpandedChange,\n      defaultSelected,\n      selected,\n      onSelectionChange,\n      multiselect,\n      disabled,\n      children,\n    });\n\n    const {\n      activeNode,\n      setActiveNode,\n      expandedArray,\n      setExpandedArray,\n      expandedState,\n      toggleExpanded,\n      select,\n      selectedSet,\n      setVisibleSelectionState,\n      visibleNodes,\n      getNodeMeta,\n      getElement,\n      getParent,\n      getChildren,\n      treeModel,\n      disabledIdsSet,\n    } = treeState;\n\n    const lastKeypressRef = useRef<string>(\"\");\n    const keypressTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(\n      null,\n    );\n    const treeRef = useRef<HTMLUListElement>(null);\n\n    useEffect(() => {\n      return () => {\n        if (keypressTimeoutRef.current) {\n          clearTimeout(keypressTimeoutRef.current);\n        }\n      };\n    }, []);\n\n    const handleBlur = (event: FocusEvent<HTMLUListElement>) => {\n      onBlur?.(event);\n      const relatedTarget = event.relatedTarget as Node | null;\n      if (!treeRef.current?.contains(relatedTarget)) {\n        setActiveNode(undefined);\n      }\n    };\n\n    const focusNode = (\n      value: string,\n    ): \"focused\" | \"already-focused\" | \"missing\" => {\n      const element = getElement(value);\n      if (!element) {\n        return \"missing\";\n      }\n\n      const activeEl = targetWindow?.document.activeElement;\n      if (activeEl === element) {\n        return \"already-focused\";\n      }\n\n      element.focus();\n      element.scrollIntoView({ block: \"nearest\", inline: \"nearest\" });\n      return \"focused\";\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLUListElement>) => {\n      onKeyDown?.(event);\n\n      if (disabled) return;\n\n      if (visibleNodes.length === 0) return;\n\n      const currentIndex = activeNode ? visibleNodes.indexOf(activeNode) : -1;\n\n      let newActiveNode: string | undefined;\n      let handled = false;\n\n      switch (event.key) {\n        case \"ArrowDown\": {\n          handled = true;\n          const nextIndex = currentIndex + 1;\n          if (nextIndex < visibleNodes.length) {\n            newActiveNode = visibleNodes[nextIndex];\n          }\n          break;\n        }\n        case \"ArrowUp\": {\n          handled = true;\n          const prevIndex = currentIndex - 1;\n          if (prevIndex >= 0) {\n            newActiveNode = visibleNodes[prevIndex];\n          }\n          break;\n        }\n        case \"ArrowRight\": {\n          handled = true;\n          if (activeNode) {\n            const nodeMeta = getNodeMeta(activeNode);\n            const isDisabled = disabledIdsSet.has(activeNode);\n            const hasChildren = Boolean(nodeMeta?.hasChildren);\n            const isExpanded = expandedState.has(activeNode);\n            if (!isDisabled && hasChildren) {\n              if (!isExpanded) {\n                toggleExpanded(event, activeNode);\n              } else {\n                const firstChild = visibleNodes.find(\n                  (visibleNode) => getParent(visibleNode) === activeNode,\n                );\n                if (firstChild) {\n                  newActiveNode = firstChild;\n                }\n              }\n            }\n          }\n          break;\n        }\n        case \"ArrowLeft\": {\n          handled = true;\n          if (activeNode) {\n            const isDisabled = disabledIdsSet.has(activeNode);\n            if (!isDisabled) {\n              const isExpanded = expandedState.has(activeNode);\n              if (isExpanded) {\n                toggleExpanded(event, activeNode);\n              } else {\n                const parent = getParent(activeNode);\n                if (parent) {\n                  newActiveNode = parent;\n                }\n              }\n            }\n          }\n          break;\n        }\n        case \"Home\": {\n          handled = true;\n          newActiveNode = visibleNodes[0];\n          break;\n        }\n        case \"End\": {\n          handled = true;\n          newActiveNode = visibleNodes[visibleNodes.length - 1];\n          break;\n        }\n        case \"Enter\": {\n          handled = true;\n          if (activeNode) {\n            select(event, activeNode);\n          }\n          break;\n        }\n        case \" \": {\n          handled = true;\n          if (activeNode) {\n            select(event, activeNode);\n          }\n          break;\n        }\n        case \"*\": {\n          handled = true;\n          if (activeNode) {\n            const parent = getParent(activeNode);\n            // Get siblings: either children of parent, or root nodes if no parent\n            const siblings = parent\n              ? getChildren(parent)\n              : treeModel.rootValues;\n\n            const toExpand = siblings.filter((sibling) => {\n              const siblingMeta = getNodeMeta(sibling);\n              return (\n                siblingMeta?.hasChildren &&\n                !expandedState.has(sibling) &&\n                !disabledIdsSet.has(sibling)\n              );\n            });\n\n            if (toExpand.length > 0) {\n              const newExpanded = [...expandedArray, ...toExpand];\n              setExpandedArray(newExpanded);\n              onExpandedChange?.(event, newExpanded);\n            }\n          }\n          break;\n        }\n        default: {\n          // Type-ahead\n          if (\n            event.key.length === 1 &&\n            !event.ctrlKey &&\n            !event.metaKey &&\n            !event.altKey\n          ) {\n            handled = true;\n\n            if (keypressTimeoutRef.current) {\n              clearTimeout(keypressTimeoutRef.current);\n            }\n\n            lastKeypressRef.current += event.key.toLowerCase();\n            const searchString = lastKeypressRef.current;\n\n            keypressTimeoutRef.current = setTimeout(() => {\n              lastKeypressRef.current = \"\";\n            }, 500);\n\n            const currentIndex = activeNode\n              ? visibleNodes.indexOf(activeNode)\n              : -1;\n            let found = false;\n\n            for (let i = currentIndex + 1; i < visibleNodes.length; i++) {\n              const element = getElement(visibleNodes[i]);\n              if (\n                element?.textContent?.toLowerCase().startsWith(searchString)\n              ) {\n                newActiveNode = visibleNodes[i];\n                found = true;\n                break;\n              }\n            }\n\n            if (!found) {\n              for (let i = 0; i <= currentIndex; i++) {\n                const element = getElement(visibleNodes[i]);\n                if (\n                  element?.textContent?.toLowerCase().startsWith(searchString)\n                ) {\n                  newActiveNode = visibleNodes[i];\n                  break;\n                }\n              }\n            }\n          }\n          break;\n        }\n      }\n\n      if (\n        (event.ctrlKey || event.metaKey) &&\n        event.key === \"a\" &&\n        multiselect\n      ) {\n        handled = true;\n        event.preventDefault();\n\n        const allVisibleValues = visibleNodes.filter(\n          (visibleNode) => !disabledIdsSet.has(visibleNode),\n        );\n        const allSelected = allVisibleValues.every((visible) =>\n          selectedSet.has(visible),\n        );\n\n        const newSelected = allSelected ? [] : allVisibleValues;\n\n        setVisibleSelectionState(newSelected);\n        onSelectionChange?.(event, newSelected);\n        return;\n      }\n\n      if (\n        event.shiftKey &&\n        (event.key === \"ArrowUp\" || event.key === \"ArrowDown\") &&\n        multiselect\n      ) {\n        handled = true;\n        const isDown = event.key === \"ArrowDown\";\n        const currentIndex = activeNode ? visibleNodes.indexOf(activeNode) : -1;\n        const nextIndex = isDown ? currentIndex + 1 : currentIndex - 1;\n\n        if (nextIndex >= 0 && nextIndex < visibleNodes.length) {\n          const nextValue = visibleNodes[nextIndex];\n\n          if (!disabledIdsSet.has(nextValue)) {\n            select(event, nextValue);\n            newActiveNode = nextValue;\n          }\n        }\n      }\n\n      if (handled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      if (newActiveNode !== undefined) {\n        const focusResult = focusNode(newActiveNode);\n        if (focusResult !== \"focused\") {\n          setActiveNode(newActiveNode);\n        }\n      }\n    };\n\n    const handleRef = useForkRef(treeRef, ref);\n\n    return (\n      <TreeProvider value={treeState}>\n        <ul\n          ref={handleRef}\n          role=\"tree\"\n          aria-multiselectable={multiselect ? true : undefined}\n          aria-disabled={disabled || undefined}\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(\"disabled\")]: disabled,\n              [withBaseName(\"multiselect\")]: multiselect,\n            },\n            className,\n          )}\n          onKeyDown={handleKeyDown}\n          onBlur={handleBlur}\n          {...rest}\n        >\n          {children}\n        </ul>\n      </TreeProvider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Tree","useWindow","useComponentCssInjection","treeCss","useTree","useRef","useEffect","currentIndex","useForkRef","jsx","TreeProvider","clsx"],"mappings":"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"}

package/dist-cjs/tree/TreeContext.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var React = require('react');
+var createContext = require('../utils/createContext.js');
+require('clsx');
+require('react/jsx-runtime');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+
+const TreeContext = createContext.createContext(
+  "Tree Context",
+  void 0
+);
+const TreeProvider = TreeContext.Provider;
+function useTreeContext() {
+  const context = React.useContext(TreeContext);
+  if (!context) {
+    throw new Error("useTreeContext must be used within a TreeProvider");
+  }
+  return context;
+}
+const TreeNodeContext = createContext.createContext(
+  "TreeNodeContext",
+  void 0
+);
+const TreeNodeProvider = TreeNodeContext.Provider;
+function useTreeNodeContext() {
+  return React.useContext(TreeNodeContext);
+}
+
+exports.TreeNodeProvider = TreeNodeProvider;
+exports.TreeProvider = TreeProvider;
+exports.useTreeContext = useTreeContext;
+exports.useTreeNodeContext = useTreeNodeContext;
+//# sourceMappingURL=TreeContext.js.map

package/dist-cjs/tree/TreeContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeContext.js","sources":["../src/tree/TreeContext.ts"],"sourcesContent":["import {\n  type Dispatch,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  useContext,\n} from \"react\";\nimport { createContext } from \"../utils\";\nimport type { TreeModel, TreeNodeMeta } from \"./useTree\";\n\nexport interface TreeContextValue {\n  expandedState: Set<string>;\n  /** Toggle a node expansion state */\n  toggleExpanded: (event: SyntheticEvent, value: string) => void;\n\n  /** Selected node values */\n  selectedState: string[];\n  /** Selected node values as Set for O(1) lookups */\n  selectedSet: Set<string>;\n  /** Set selected state directly */\n  setSelectedState: Dispatch<SetStateAction<string[]>>;\n  /** Set selected state without expanding selection through hidden descendants */\n  setVisibleSelectionState: (selected: string[]) => void;\n  /** Select node */\n  select: (event: SyntheticEvent, value: string) => void;\n\n  /** Whether multiselect mode with checkboxes is enabled */\n  multiselect: boolean;\n  /** Disabled state of the tree */\n  disabled: boolean;\n  /** Set of disabled node IDs */\n  disabledIdsSet: Set<string>;\n\n  /** Tree model for traversal */\n  treeModel: TreeModel;\n  /** Get node metadata from tree model */\n  getNodeMeta: (value: string) => TreeNodeMeta | undefined;\n  /** Get parent of a node */\n  getParent: (value: string) => string | undefined;\n  /** Get children of a node */\n  getChildren: (value: string) => string[];\n  /** Get all descendants of a node */\n  getDescendants: (value: string) => string[];\n  /** Get all ancestors of a node */\n  getAncestors: (value: string) => string[];\n  /** Memoized visible (navigable) nodes in tree order */\n  visibleNodes: string[];\n  /** Memoized tabbable node ID for roving tabindex (computed once at tree level) */\n  tabbableNodeId: string | undefined;\n  /** Register a DOM element for focus management */\n  registerElement: (value: string, element: HTMLElement) => () => void;\n  /** Get DOM element for a node (if mounted) */\n  getElement: (value: string) => HTMLElement | undefined;\n  /** Active node value */\n  activeNode: string | undefined;\n  /** Set the active node */\n  setActiveNode: Dispatch<SetStateAction<string | undefined>>;\n\n  /** Set of indeterminate (partially selected) node IDs */\n  indeterminateState: Set<string>;\n}\n\nconst TreeContext = createContext<TreeContextValue | undefined>(\n  \"Tree Context\",\n  undefined,\n);\n\nexport const TreeProvider = TreeContext.Provider;\n\nexport function useTreeContext(): TreeContextValue {\n  const context = useContext(TreeContext);\n  if (!context) {\n    throw new Error(\"useTreeContext must be used within a TreeProvider\");\n  }\n  return context;\n}\n\nexport interface TreeNodeContextValue {\n  /** Current node value */\n  value: string;\n  /** Current depth level */\n  level: number;\n  /** Whether node has children */\n  hasChildren: boolean;\n  /** Whether node is expanded */\n  expanded: boolean;\n  /** Whether node is disabled */\n  disabled: boolean;\n  /** Node id for the li element */\n  id: string;\n  /** Ref for the li element rendered by TreeNodeTrigger */\n  nodeRef: RefObject<HTMLLIElement>;\n  /** Callback ref that connects TreeNode's forwarded ref to the li element */\n  setNodeRef: Ref<HTMLLIElement> | null;\n  /** Whether node is selected */\n  selected: boolean;\n  /** Whether node is in indeterminate state (partially selected children) */\n  indeterminate: boolean;\n  /** Child TreeNode elements to be rendered inside the group */\n  nodeChildren: ReactNode;\n}\n\nconst TreeNodeContext = createContext<TreeNodeContextValue | undefined>(\n  \"TreeNodeContext\",\n  undefined,\n);\n\nexport const TreeNodeProvider = TreeNodeContext.Provider;\n\nexport function useTreeNodeContext(): TreeNodeContextValue | undefined {\n  return useContext(TreeNodeContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;AAgEA,MAAM,WAAA,GAAcA,2BAAA;AAAA,EAClB,cAAA;AAAA,EACA;AACF,CAAA;AAEO,MAAM,eAAe,WAAA,CAAY;AAEjC,SAAS,cAAA,GAAmC;AACjD,EAAA,MAAM,OAAA,GAAUC,iBAAW,WAAW,CAAA;AACtC,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,mDAAmD,CAAA;AAAA,EACrE;AACA,EAAA,OAAO,OAAA;AACT;AA2BA,MAAM,eAAA,GAAkBD,2BAAA;AAAA,EACtB,iBAAA;AAAA,EACA;AACF,CAAA;AAEO,MAAM,mBAAmB,eAAA,CAAgB;AAEzC,SAAS,kBAAA,GAAuD;AACrE,EAAA,OAAOC,iBAAW,eAAe,CAAA;AACnC;;;;;;;"}

package/dist-cjs/tree/TreeNode.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltTreeNode {\n  list-style: none;\n  position: relative;\n  cursor: var(--salt-cursor-hover);\n}\n\n.saltTreeNode:focus {\n  outline: none;\n}\n\n/* Focus visible styles - applied when keyboard navigation is used */\n.saltTreeNode:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n  position: relative;\n  z-index: calc(var(--salt-zIndex-default) + 1);\n}\n\n/* Selected + focus visible */\n.saltTreeNode-selected:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n  z-index: calc(var(--salt-zIndex-default) + 1);\n}\n\n.saltTreeNode-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-fixed-100);\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  padding-top: var(--salt-spacing-fixed-100);\n}\n\n.saltTreeNode-checkbox {\n  flex-shrink: 0;\n  height: var(--salt-size-selectable);\n}\n\n.saltTreeNode-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--saltTreeNodeTrigger-iconSize);\n  min-width: var(--saltTreeNodeTrigger-iconSize);\n  height: var(--saltTreeNodeTrigger-iconSize);\n  flex-shrink: 0;\n}\n\n.saltTreeNode-icon > * {\n  color: var(--salt-content-primary-foreground);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=TreeNode.css.js.map

package/dist-cjs/tree/TreeNode.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNode.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}