@salt-ds/lab 1.0.0-alpha.86 → 1.0.0-alpha.88

package/dist-cjs/tree/TreeNode.js

@@ -2,54 +2,98 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var icons = require('@salt-ds/icons');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
-var clsx = require('clsx');
+var react = require('react');
+var TreeContext = require('./TreeContext.js');
 var TreeNode$1 = require('./TreeNode.css.js');
+var TreeNodeLabel = require('./TreeNodeLabel.js');
+var TreeNodeTrigger = require('./TreeNodeTrigger.js');
 
 const withBaseName = core.makePrefixer("saltTreeNode");
-const TreeNode = ({
-  "aria-level": ariaLevel,
-  children,
-  className: classNameProp,
-  description,
-  highlighted,
-  idx,
-  isLeaf = false,
-  label,
-  onMouseEnter,
-  selected,
-  ...props
-}) => {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "salt-tree-node",
-    css: TreeNode$1,
-    window: targetWindow
+function separateChildren(children) {
+  const contentChildren = [];
+  const nodeChildren = [];
+  react.Children.forEach(children, (child) => {
+    if (react.isValidElement(child) && typeof child.props.value === "string") {
+      nodeChildren.push(child);
+    } else if (child != null) {
+      contentChildren.push(child);
+    }
   });
-  const className = clsx.clsx(withBaseName(), classNameProp, {
-    [withBaseName("highlighted")]: highlighted
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs("li", { ...props, className, role: "presentation", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        "aria-level": ariaLevel,
-        "aria-selected": selected || void 0,
-        className: withBaseName("item"),
-        onMouseEnter,
-        role: "treeitem",
-        children: [
-          isLeaf === false ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("toggle"), "data-toggle": true, children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightIcon, {}) }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("label"), children: label }),
-          description !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("description"), children: description }) : null
-        ]
-      }
-    ),
-    children
-  ] });
-};
+  return { contentChildren, nodeChildren };
+}
+const TreeNode = react.forwardRef(
+  function TreeNode2(props, ref) {
+    const {
+      value,
+      label,
+      icon: Icon,
+      disabled: disabledProp,
+      children
+    } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-tree-node",
+      css: TreeNode$1,
+      window: targetWindow
+    });
+    const id = core.useId(value) ?? value;
+    const {
+      expandedState,
+      selectedSet,
+      disabled: treeDisabled,
+      disabledIdsSet,
+      indeterminateState,
+      getElement
+    } = TreeContext.useTreeContext();
+    const parentContext = TreeContext.useTreeNodeContext();
+    const level = ((parentContext == null ? void 0 : parentContext.level) ?? 0) + 1;
+    const disabled = treeDisabled || disabledProp || disabledIdsSet.has(value);
+    const expanded = expandedState.has(value);
+    const selected = selectedSet.has(value);
+    const indeterminate = indeterminateState.has(value);
+    const usesLabelProp = label !== void 0;
+    const { contentChildren, nodeChildren } = react.useMemo(
+      () => usesLabelProp ? { contentChildren: [], nodeChildren: react.Children.toArray(children) } : separateChildren(children),
+      [children, usesLabelProp]
+    );
+    const hasChildren = nodeChildren.length > 0;
+    react.useImperativeHandle(ref, () => getElement(value), [
+      getElement,
+      value
+    ]);
+    const nodeContext = react.useMemo(
+      () => ({
+        value,
+        level,
+        hasChildren,
+        expanded,
+        disabled,
+        id,
+        selected,
+        indeterminate,
+        nodeChildren
+      }),
+      [
+        value,
+        level,
+        hasChildren,
+        expanded,
+        disabled,
+        id,
+        selected,
+        indeterminate,
+        nodeChildren
+      ]
+    );
+    const defaultContent = usesLabelProp ? /* @__PURE__ */ jsxRuntime.jsxs(TreeNodeTrigger.TreeNodeTrigger, { children: [
+      Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": true, className: withBaseName("icon") }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx(TreeNodeLabel.TreeNodeLabel, { children: label })
+    ] }) : null;
+    return /* @__PURE__ */ jsxRuntime.jsx(TreeContext.TreeNodeProvider, { value: nodeContext, children: usesLabelProp ? defaultContent : contentChildren });
+  }
+);
 
 exports.TreeNode = TreeNode;
 //# sourceMappingURL=TreeNode.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TreeNode.js","sources":["../src/tree/TreeNode.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { TriangleRightIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { HTMLAttributes, MouseEventHandler, ReactNode } from \"react\";\n\nimport treeNodeCss from \"./TreeNode.css\";\n\nconst withBaseName = makePrefixer(\"saltTreeNode\");\nexport interface TreeNodeProps\n  extends Omit<HTMLAttributes<HTMLLIElement>, \"onMouseEnter\"> {\n  children?: ReactNode;\n  description?: string;\n  highlighted?: boolean;\n  idx?: number;\n  isLeaf?: boolean;\n  label?: string;\n  onMouseEnter?: MouseEventHandler;\n  selected?: boolean;\n}\n\nexport const TreeNode = ({\n  \"aria-level\": ariaLevel,\n  children,\n  className: classNameProp,\n  description,\n  highlighted,\n  idx,\n  isLeaf = false,\n  label,\n  onMouseEnter,\n  selected,\n  ...props\n}: TreeNodeProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tree-node\",\n    css: treeNodeCss,\n    window: targetWindow,\n  });\n\n  const className = clsx(withBaseName(), classNameProp, {\n    [withBaseName(\"highlighted\")]: highlighted,\n  });\n\n  return (\n    <li {...props} className={className} role=\"presentation\">\n      <div\n        aria-level={ariaLevel}\n        aria-selected={selected || undefined}\n        className={withBaseName(\"item\")}\n        onMouseEnter={onMouseEnter}\n        role=\"treeitem\"\n      >\n        {isLeaf === false ? (\n          <span className={withBaseName(\"toggle\")} data-toggle={true}>\n            <TriangleRightIcon />\n          </span>\n        ) : null}\n        <div className={withBaseName(\"label\")}>\n          {/* {child.icon ? <span className={`${classBase}Node-icon`} /> : null} */}\n          {label}\n        </div>\n        {description !== undefined ? (\n          <div className={withBaseName(\"description\")}>{description}</div>\n        ) : null}\n      </div>\n      {children}\n    </li>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","treeNodeCss","clsx","jsxs","jsx","TriangleRightIcon"],"mappings":";;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA;AAazC,MAAM,WAAW,CAAC;AAAA,EACvB,YAAA,EAAc,SAAA;AAAA,EACd,QAAA;AAAA,EACA,SAAA,EAAW,aAAA;AAAA,EACX,WAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAA;AAAA,EACA,MAAA,GAAS,KAAA;AAAA,EACT,KAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAqB;AACnB,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,gBAAA;AAAA,IACR,GAAA,EAAKC,UAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,SAAA,GAAYC,SAAA,CAAK,YAAA,EAAa,EAAG,aAAA,EAAe;AAAA,IACpD,CAAC,YAAA,CAAa,aAAa,CAAC,GAAG;AAAA,GAChC,CAAA;AAED,EAAA,uCACG,IAAA,EAAA,EAAI,GAAG,KAAA,EAAO,SAAA,EAAsB,MAAK,cAAA,EACxC,QAAA,EAAA;AAAA,oBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,SAAA;AAAA,QACZ,iBAAe,QAAA,IAAY,MAAA;AAAA,QAC3B,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QAC9B,YAAA;AAAA,QACA,IAAA,EAAK,UAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,UAAA,MAAA,KAAW,KAAA,mBACVC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,QAAQ,CAAA,EAAG,aAAA,EAAa,IAAA,EACpD,QAAA,kBAAAA,cAAA,CAACC,uBAAA,EAAA,EAAkB,CAAA,EACrB,CAAA,GACE,IAAA;AAAA,yCACH,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,OAAO,GAEjC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UACC,WAAA,KAAgB,yBACfD,cAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,CAAa,aAAa,CAAA,EAAI,QAAA,EAAA,WAAA,EAAY,CAAA,GACxD;AAAA;AAAA;AAAA,KACN;AAAA,IACC;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TreeNode.js","sources":["../src/tree/TreeNode.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  Children,\n  type ComponentType,\n  forwardRef,\n  isValidElement,\n  type ReactNode,\n  useImperativeHandle,\n  useMemo,\n} from \"react\";\nimport {\n  TreeNodeProvider,\n  useTreeContext,\n  useTreeNodeContext,\n} from \"./TreeContext\";\nimport treeNodeCss from \"./TreeNode.css\";\nimport { TreeNodeLabel } from \"./TreeNodeLabel\";\nimport { TreeNodeTrigger } from \"./TreeNodeTrigger\";\n\nexport interface TreeNodeProps {\n  /**\n   * Unique value representing this node within the tree\n   */\n  value: string;\n  /**\n   * Label for the node. When provided, TreeNode automatically renders a TreeNodeTrigger.\n   */\n  label?: ReactNode;\n  /**\n   * Optional icon to display before the label\n   */\n  icon?: ComponentType<IconProps>;\n  /**\n   * Whether the node is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Child nodes or content.\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltTreeNode\");\n\n// Need to take another look at this because its slightly brittle - alternative could be:\n// TreeNode having a 'content' prop that takes <TreeNodeTrigger> etc. and then `children` is reserved for other <TreeNode>'s\n// or a 'render' prop if we want to pass any state down. Simplifies it massively because then its clear children is for sub trees.\nfunction separateChildren(children: ReactNode): {\n  contentChildren: ReactNode[];\n  nodeChildren: ReactNode[];\n} {\n  const contentChildren: ReactNode[] = [];\n  const nodeChildren: ReactNode[] = [];\n\n  Children.forEach(children, (child) => {\n    if (isValidElement(child) && typeof child.props.value === \"string\") {\n      nodeChildren.push(child);\n    } else if (child != null) {\n      contentChildren.push(child);\n    }\n  });\n\n  return { contentChildren, nodeChildren };\n}\n\nexport const TreeNode = forwardRef<HTMLLIElement, TreeNodeProps>(\n  function TreeNode(props, ref) {\n    const {\n      value,\n      label,\n      icon: Icon,\n      disabled: disabledProp,\n      children,\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tree-node\",\n      css: treeNodeCss,\n      window: targetWindow,\n    });\n\n    const id = useId(value) ?? value;\n\n    const {\n      expandedState,\n      selectedSet,\n      disabled: treeDisabled,\n      disabledIdsSet,\n      indeterminateState,\n      getElement,\n    } = useTreeContext();\n\n    const parentContext = useTreeNodeContext();\n    const level = (parentContext?.level ?? 0) + 1;\n\n    const disabled = treeDisabled || disabledProp || disabledIdsSet.has(value);\n    const expanded = expandedState.has(value);\n    const selected = selectedSet.has(value);\n    const indeterminate = indeterminateState.has(value);\n\n    const usesLabelProp = label !== undefined;\n    const { contentChildren, nodeChildren } = useMemo(\n      () =>\n        usesLabelProp\n          ? { contentChildren: [], nodeChildren: Children.toArray(children) }\n          : separateChildren(children),\n      [children, usesLabelProp],\n    );\n\n    const hasChildren = nodeChildren.length > 0;\n\n    // Forward ref to the <li> element rendered by TreeNodeTrigger\n    useImperativeHandle(ref, () => getElement(value) as HTMLLIElement, [\n      getElement,\n      value,\n    ]);\n\n    const nodeContext = useMemo(\n      () => ({\n        value,\n        level,\n        hasChildren,\n        expanded,\n        disabled,\n        id,\n        selected,\n        indeterminate,\n        nodeChildren,\n      }),\n      [\n        value,\n        level,\n        hasChildren,\n        expanded,\n        disabled,\n        id,\n        selected,\n        indeterminate,\n        nodeChildren,\n      ],\n    );\n\n    const defaultContent = usesLabelProp ? (\n      <TreeNodeTrigger>\n        {Icon ? <Icon aria-hidden className={withBaseName(\"icon\")} /> : null}\n        <TreeNodeLabel>{label}</TreeNodeLabel>\n      </TreeNodeTrigger>\n    ) : null;\n\n    return (\n      <TreeNodeProvider value={nodeContext}>\n        {usesLabelProp ? defaultContent : contentChildren}\n      </TreeNodeProvider>\n    );\n  },\n);\n"],"names":["makePrefixer","Children","isValidElement","forwardRef","TreeNode","useWindow","useComponentCssInjection","treeNodeCss","useId","useTreeContext","useTreeNodeContext","useMemo","useImperativeHandle","jsxs","TreeNodeTrigger","jsx","TreeNodeLabel","TreeNodeProvider"],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltTreeNodeExpansionIcon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--salt-size-selectable);\n  min-width: var(--salt-size-selectable);\n  height: var(--salt-size-selectable);\n  flex-shrink: 0;\n  position: relative;\n}\n\n.saltTreeNodeExpansionIcon-icon {\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltTreeNodeExpansionIcon::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  width: var(--salt-size-base);\n  height: var(--salt-size-base);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=TreeNodeExpansionIcon.css.js.map

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

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

package/dist-cjs/tree/TreeNodeExpansionIcon.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var TreeContext = require('./TreeContext.js');
+var TreeNodeExpansionIcon$1 = require('./TreeNodeExpansionIcon.css.js');
+
+const withBaseName = core.makePrefixer("saltTreeNodeExpansionIcon");
+const TreeNodeExpansionIcon = react.forwardRef(function TreeNodeExpansionIcon2(props, ref) {
+  const { className, onClick, ...rest } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-tree-node-expansion-icon",
+    css: TreeNodeExpansionIcon$1,
+    window: targetWindow
+  });
+  const nodeContext = TreeContext.useTreeNodeContext();
+  if (!nodeContext) {
+    throw new Error("TreeNodeExpansionIcon must be used within a TreeNode");
+  }
+  const { value, hasChildren, expanded, disabled } = nodeContext;
+  const { toggleExpanded } = TreeContext.useTreeContext();
+  const { ExpandGroupIcon, CollapseGroupIcon } = core.useIcon();
+  const handleClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    if (disabled || !hasChildren) return;
+    toggleExpanded(event, value);
+  };
+  if (!hasChildren) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        className: clsx.clsx(withBaseName(), withBaseName("placeholder"), className),
+        "aria-hidden": true,
+        ...rest
+      }
+    );
+  }
+  const Icon = expanded ? CollapseGroupIcon : ExpandGroupIcon;
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: keyboard handled at tree level, same as W3C
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        className: clsx.clsx(withBaseName(), className),
+        onClick: handleClick,
+        "aria-hidden": true,
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: withBaseName("icon") })
+      }
+    )
+  );
+});
+
+exports.TreeNodeExpansionIcon = TreeNodeExpansionIcon;
+//# sourceMappingURL=TreeNodeExpansionIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNodeExpansionIcon.js","sources":["../src/tree/TreeNodeExpansionIcon.tsx"],"sourcesContent":["import { makePrefixer, useIcon } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n} from \"react\";\nimport { useTreeContext, useTreeNodeContext } from \"./TreeContext\";\nimport treeNodeExpansionIconCss from \"./TreeNodeExpansionIcon.css\";\n\nexport interface TreeNodeExpansionIconProps\n  extends ComponentPropsWithoutRef<\"span\"> {}\n\nconst withBaseName = makePrefixer(\"saltTreeNodeExpansionIcon\");\n\nexport const TreeNodeExpansionIcon = forwardRef<\n  HTMLSpanElement,\n  TreeNodeExpansionIconProps\n>(function TreeNodeExpansionIcon(props, ref) {\n  const { className, onClick, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tree-node-expansion-icon\",\n    css: treeNodeExpansionIconCss,\n    window: targetWindow,\n  });\n\n  const nodeContext = useTreeNodeContext();\n  if (!nodeContext) {\n    throw new Error(\"TreeNodeExpansionIcon must be used within a TreeNode\");\n  }\n\n  const { value, hasChildren, expanded, disabled } = nodeContext;\n  const { toggleExpanded } = useTreeContext();\n  const { ExpandGroupIcon, CollapseGroupIcon } = useIcon();\n\n  const handleClick = (event: MouseEvent<HTMLSpanElement>) => {\n    onClick?.(event);\n    if (disabled || !hasChildren) return;\n    toggleExpanded(event, value);\n  };\n\n  if (!hasChildren) {\n    return (\n      <span\n        ref={ref}\n        className={clsx(withBaseName(), withBaseName(\"placeholder\"), className)}\n        aria-hidden\n        {...rest}\n      />\n    );\n  }\n\n  const Icon = expanded ? CollapseGroupIcon : ExpandGroupIcon;\n\n  return (\n    // biome-ignore lint/a11y/useKeyWithClickEvents: keyboard handled at tree level, same as W3C\n    <span\n      ref={ref}\n      className={clsx(withBaseName(), className)}\n      onClick={handleClick}\n      aria-hidden\n      {...rest}\n    >\n      <Icon className={withBaseName(\"icon\")} />\n    </span>\n  );\n});\n"],"names":["makePrefixer","forwardRef","TreeNodeExpansionIcon","useWindow","useComponentCssInjection","treeNodeExpansionIconCss","useTreeNodeContext","useTreeContext","useIcon","jsx","clsx"],"mappings":";;;;;;;;;;;AAeA,MAAM,YAAA,GAAeA,kBAAa,2BAA2B,CAAA;AAEtD,MAAM,qBAAA,GAAwBC,gBAAA,CAGnC,SAASC,sBAAAA,CAAsB,OAAO,GAAA,EAAK;AAC3C,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,GAAG,MAAK,GAAI,KAAA;AAExC,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,+BAAA;AAAA,IACR,GAAA,EAAKC,uBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,cAAcC,8BAAA,EAAmB;AACvC,EAAA,IAAI,CAAC,WAAA,EAAa;AAChB,IAAA,MAAM,IAAI,MAAM,sDAAsD,CAAA;AAAA,EACxE;AAEA,EAAA,MAAM,EAAE,KAAA,EAAO,WAAA,EAAa,QAAA,EAAU,UAAS,GAAI,WAAA;AACnD,EAAA,MAAM,EAAE,cAAA,EAAe,GAAIC,0BAAA,EAAe;AAC1C,EAAA,MAAM,EAAE,eAAA,EAAiB,iBAAA,EAAkB,GAAIC,YAAA,EAAQ;AAEvD,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAuC;AAC1D,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,IAAA,IAAI,QAAA,IAAY,CAAC,WAAA,EAAa;AAC9B,IAAA,cAAA,CAAe,OAAO,KAAK,CAAA;AAAA,EAC7B,CAAA;AAEA,EAAA,IAAI,CAAC,WAAA,EAAa;AAChB,IAAA,uBACEC,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAWC,SAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,aAAa,GAAG,SAAS,CAAA;AAAA,QACtE,aAAA,EAAW,IAAA;AAAA,QACV,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AAEA,EAAA,MAAM,IAAA,GAAO,WAAW,iBAAA,GAAoB,eAAA;AAE5C,EAAA;AAAA;AAAA,oBAEED,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,OAAA,EAAS,WAAA;AAAA,QACT,aAAA,EAAW,IAAA;AAAA,QACV,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAAD,cAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG;AAAA;AAAA;AACzC;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltTreeNodeLabel {\n  flex: 1;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  word-break: break-word;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=TreeNodeLabel.css.js.map

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

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

package/dist-cjs/tree/TreeNodeLabel.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var TreeNodeLabel$1 = require('./TreeNodeLabel.css.js');
+
+const withBaseName = core.makePrefixer("saltTreeNodeLabel");
+const TreeNodeLabel = react.forwardRef(
+  function TreeNodeLabel2(props, ref) {
+    const { children, className, ...rest } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-tree-node-label",
+      css: TreeNodeLabel$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: clsx.clsx(withBaseName(), className), ...rest, children });
+  }
+);
+
+exports.TreeNodeLabel = TreeNodeLabel;
+//# sourceMappingURL=TreeNodeLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNodeLabel.js","sources":["../src/tree/TreeNodeLabel.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport treeNodeLabelCss from \"./TreeNodeLabel.css\";\n\nexport interface TreeNodeLabelProps extends ComponentPropsWithoutRef<\"span\"> {}\n\nconst withBaseName = makePrefixer(\"saltTreeNodeLabel\");\n\nexport const TreeNodeLabel = forwardRef<HTMLSpanElement, TreeNodeLabelProps>(\n  function TreeNodeLabel(props, ref) {\n    const { children, className, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tree-node-label\",\n      css: treeNodeLabelCss,\n      window: targetWindow,\n    });\n\n    return (\n      <span ref={ref} className={clsx(withBaseName(), className)} {...rest}>\n        {children}\n      </span>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","TreeNodeLabel","useWindow","useComponentCssInjection","treeNodeLabelCss","jsx","clsx"],"mappings":";;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAA,GAAgBC,gBAAA;AAAA,EAC3B,SAASC,cAAAA,CAAc,KAAA,EAAO,GAAA,EAAK;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAEzC,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,eAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAAC,MAAA,EAAA,EAAK,GAAA,EAAU,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAI,GAAG,IAAA,EAC7D,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltTreeNodeTrigger {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  gap: var(--salt-spacing-100);\n  width: 100%;\n  min-height: var(--salt-size-base);\n\n  padding-top: calc((var(--salt-size-base) - var(--salt-size-selectable)) / 2);\n  padding-bottom: calc((var(--salt-size-base) - var(--salt-size-selectable)) / 2);\n  padding-right: var(--salt-spacing-100);\n  /* Base padding for level-1 nodes, plus one indent step per additional level.\n   Each indent step = (selectable element width + gap).\n   Level-1 nodes get no extra indent; level-2 gets 1 step, level-3 gets 2, etc.\n   --saltTreeNodeTrigger-indentStep is overridden in multiselect to account\n   for the wider spacing around the checkbox. */\n  --saltTreeNodeTrigger-indentStep: calc(var(--salt-size-selectable) + var(--salt-spacing-100));\n  padding-left: calc(var(--salt-spacing-100) + (var(--saltTreeNodeTrigger-indentStep) * (var(--saltTreeNode-level, 1) - 1)));\n  background: var(--salt-selectable-background);\n  color: var(--salt-content-primary-foreground);\n}\n\n[aria-multiselectable=\"true\"] .saltTreeNodeTrigger {\n  --saltTreeNodeTrigger-indentStep: calc(var(--salt-size-selectable) + var(--salt-spacing-150));\n}\n\n.saltTreeNodeTrigger:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltTreeNode:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltTreeNode-selected > .saltTreeNodeTrigger {\n  background: var(--salt-selectable-background-selected);\n  box-shadow:\n    0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected),\n    0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n  position: relative;\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltTreeNode-selected:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltTreeNode-disabled > .saltTreeNodeTrigger,\n.saltTreeNode-disabled:hover > .saltTreeNodeTrigger {\n  opacity: 0.4;\n  cursor: var(--salt-cursor-disabled);\n\n  background: var(--salt-selectable-background);\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltTreeNodeTrigger > .saltIcon {\n  width: var(--salt-size-selectable);\n  height: var(--salt-size-selectable);\n  min-width: var(--salt-size-selectable);\n  flex-shrink: 0;\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltTreeNodeTrigger > .saltTreeNode-checkbox {\n  margin-left: calc(var(--salt-spacing-150) - var(--salt-spacing-100));\n  margin-right: calc(var(--salt-spacing-150) - var(--salt-spacing-100));\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=TreeNodeTrigger.css.js.map

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

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

package/dist-cjs/tree/TreeNodeTrigger.js

@@ -0,0 +1,152 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var TreeContext = require('./TreeContext.js');
+var TreeNodeExpansionIcon = require('./TreeNodeExpansionIcon.js');
+var TreeNodeTrigger$1 = require('./TreeNodeTrigger.css.js');
+
+const withBaseName = core.makePrefixer("saltTreeNodeTrigger");
+const withNodeBaseName = core.makePrefixer("saltTreeNode");
+const TreeNodeTrigger = react.forwardRef(function TreeNodeTrigger2(props, ref) {
+  const {
+    className,
+    children,
+    style,
+    onClick,
+    onFocus,
+    onBlur,
+    onMouseDown,
+    onKeyDown,
+    ...rest
+  } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-tree-node-trigger",
+    css: TreeNodeTrigger$1,
+    window: targetWindow
+  });
+  const nodeContext = TreeContext.useTreeNodeContext();
+  if (!nodeContext) {
+    throw new Error("TreeNodeTrigger must be used within a TreeNode");
+  }
+  const {
+    value,
+    level,
+    hasChildren,
+    expanded,
+    disabled,
+    id,
+    selected,
+    indeterminate,
+    nodeChildren
+  } = nodeContext;
+  const {
+    multiselect,
+    activeNode,
+    setActiveNode,
+    select,
+    tabbableNodeId,
+    registerElement
+  } = TreeContext.useTreeContext();
+  const nodeRef = react.useRef(null);
+  const triggerContentRef = core.useForkRef(react.useRef(null), ref);
+  const wasMouseDownRef = react.useRef(false);
+  const [focusVisible, setFocusVisible] = react.useState(false);
+  const isActive = activeNode === value;
+  const isTabbable = tabbableNodeId === value;
+  react.useEffect(() => {
+    if (nodeRef.current) {
+      return registerElement(value, nodeRef.current);
+    }
+  }, [value, registerElement]);
+  const handleClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    if (disabled) return;
+    const target = event.target;
+    if (target.closest(".saltTreeNodeExpansionIcon")) return;
+    const nestedTreeItem = target.closest('[role="treeitem"]');
+    if (nestedTreeItem && nestedTreeItem !== nodeRef.current) {
+      return;
+    }
+    setActiveNode(value);
+    select(event, value);
+  };
+  const handleFocus = (event) => {
+    onFocus == null ? void 0 : onFocus(event);
+    if (event.target !== event.currentTarget) return;
+    if (!wasMouseDownRef.current) {
+      setFocusVisible(true);
+    }
+    wasMouseDownRef.current = false;
+    setActiveNode(value);
+  };
+  const handleBlur = (event) => {
+    onBlur == null ? void 0 : onBlur(event);
+    if (event.target !== event.currentTarget) return;
+    setFocusVisible(false);
+  };
+  const handleMouseDown = (event) => {
+    wasMouseDownRef.current = true;
+    onMouseDown == null ? void 0 : onMouseDown(event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      ref: nodeRef,
+      id,
+      role: "treeitem",
+      "aria-expanded": hasChildren ? expanded : void 0,
+      "aria-selected": multiselect ? void 0 : selected,
+      "aria-checked": multiselect ? indeterminate ? "mixed" : selected : void 0,
+      "aria-level": level,
+      "aria-disabled": disabled || void 0,
+      tabIndex: isTabbable ? 0 : -1,
+      className: clsx.clsx(
+        withNodeBaseName(),
+        {
+          [withNodeBaseName("expanded")]: expanded,
+          [withNodeBaseName("selected")]: selected && !multiselect,
+          [withNodeBaseName("active")]: isActive,
+          [withNodeBaseName("disabled")]: disabled,
+          [withNodeBaseName("hasChildren")]: hasChildren,
+          [withNodeBaseName("focusVisible")]: focusVisible
+        },
+        className
+      ),
+      style: {
+        "--saltTreeNode-level": level,
+        ...style
+      },
+      onClick: handleClick,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onMouseDown: handleMouseDown,
+      onKeyDown,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { ref: triggerContentRef, className: withBaseName(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TreeNodeExpansionIcon.TreeNodeExpansionIcon, {}),
+          multiselect && /* @__PURE__ */ jsxRuntime.jsx(
+            core.CheckboxIcon,
+            {
+              checked: selected,
+              indeterminate,
+              disabled,
+              className: withNodeBaseName("checkbox")
+            }
+          ),
+          children
+        ] }),
+        hasChildren && expanded && /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "group", className: withNodeBaseName("group"), children: nodeChildren })
+      ]
+    }
+  );
+});
+
+exports.TreeNodeTrigger = TreeNodeTrigger;
+//# sourceMappingURL=TreeNodeTrigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNodeTrigger.js","sources":["../src/tree/TreeNodeTrigger.tsx"],"sourcesContent":["import { CheckboxIcon, makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type FocusEvent,\n  forwardRef,\n  type MouseEvent,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useTreeContext, useTreeNodeContext } from \"./TreeContext\";\nimport { TreeNodeExpansionIcon } from \"./TreeNodeExpansionIcon\";\nimport treeNodeTriggerCss from \"./TreeNodeTrigger.css\";\n\nexport interface TreeNodeTriggerProps extends ComponentPropsWithoutRef<\"li\"> {}\n\nconst withBaseName = makePrefixer(\"saltTreeNodeTrigger\");\nconst withNodeBaseName = makePrefixer(\"saltTreeNode\");\n\n/**\n * The forwarded ref points to the inner trigger content span (for tooltip positioning),\n * while the <li> handles focus, ARIA, and event handling.\n */\nexport const TreeNodeTrigger = forwardRef<\n  HTMLSpanElement,\n  TreeNodeTriggerProps\n>(function TreeNodeTrigger(props, ref) {\n  const {\n    className,\n    children,\n    style,\n    onClick,\n    onFocus,\n    onBlur,\n    onMouseDown,\n    onKeyDown,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tree-node-trigger\",\n    css: treeNodeTriggerCss,\n    window: targetWindow,\n  });\n\n  const nodeContext = useTreeNodeContext();\n  if (!nodeContext) {\n    throw new Error(\"TreeNodeTrigger must be used within a TreeNode\");\n  }\n\n  const {\n    value,\n    level,\n    hasChildren,\n    expanded,\n    disabled,\n    id,\n    selected,\n    indeterminate,\n    nodeChildren,\n  } = nodeContext;\n\n  const {\n    multiselect,\n    activeNode,\n    setActiveNode,\n    select,\n    tabbableNodeId,\n    registerElement,\n  } = useTreeContext();\n\n  const nodeRef = useRef<HTMLLIElement>(null);\n  const triggerContentRef = useForkRef(useRef<HTMLSpanElement>(null), ref);\n  const wasMouseDownRef = useRef(false);\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const isActive = activeNode === value;\n\n  const isTabbable = tabbableNodeId === value;\n\n  useEffect(() => {\n    if (nodeRef.current) {\n      return registerElement(value, nodeRef.current);\n    }\n  }, [value, registerElement]);\n\n  const handleClick = (event: MouseEvent<HTMLLIElement>) => {\n    onClick?.(event);\n    if (disabled) return;\n    const target = event.target as HTMLElement;\n    if (target.closest(\".saltTreeNodeExpansionIcon\")) return;\n    const nestedTreeItem = target.closest('[role=\"treeitem\"]');\n    if (nestedTreeItem && nestedTreeItem !== nodeRef.current) {\n      return;\n    }\n    setActiveNode(value);\n    select(event, value);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLLIElement>) => {\n    onFocus?.(event);\n    if (event.target !== event.currentTarget) return;\n    if (!wasMouseDownRef.current) {\n      setFocusVisible(true);\n    }\n    wasMouseDownRef.current = false;\n    setActiveNode(value);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLLIElement>) => {\n    onBlur?.(event);\n    if (event.target !== event.currentTarget) return;\n    setFocusVisible(false);\n  };\n\n  const handleMouseDown = (event: MouseEvent<HTMLLIElement>) => {\n    wasMouseDownRef.current = true;\n    onMouseDown?.(event);\n  };\n\n  return (\n    <li\n      ref={nodeRef}\n      id={id}\n      role=\"treeitem\"\n      aria-expanded={hasChildren ? expanded : undefined}\n      aria-selected={multiselect ? undefined : selected}\n      aria-checked={\n        multiselect ? (indeterminate ? \"mixed\" : selected) : undefined\n      }\n      aria-level={level}\n      aria-disabled={disabled || undefined}\n      tabIndex={isTabbable ? 0 : -1}\n      className={clsx(\n        withNodeBaseName(),\n        {\n          [withNodeBaseName(\"expanded\")]: expanded,\n          [withNodeBaseName(\"selected\")]: selected && !multiselect,\n          [withNodeBaseName(\"active\")]: isActive,\n          [withNodeBaseName(\"disabled\")]: disabled,\n          [withNodeBaseName(\"hasChildren\")]: hasChildren,\n          [withNodeBaseName(\"focusVisible\")]: focusVisible,\n        },\n        className,\n      )}\n      style={\n        {\n          \"--saltTreeNode-level\": level,\n          ...style,\n        } as CSSProperties\n      }\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseDown={handleMouseDown}\n      onKeyDown={onKeyDown}\n      {...rest}\n    >\n      <span ref={triggerContentRef} className={withBaseName()}>\n        <TreeNodeExpansionIcon />\n        {multiselect && (\n          <CheckboxIcon\n            checked={selected}\n            indeterminate={indeterminate}\n            disabled={disabled}\n            className={withNodeBaseName(\"checkbox\")}\n          />\n        )}\n        {children}\n      </span>\n\n      {hasChildren && expanded && (\n        <ul role=\"group\" className={withNodeBaseName(\"group\")}>\n          {nodeChildren}\n        </ul>\n      )}\n    </li>\n  );\n});\n"],"names":["makePrefixer","forwardRef","TreeNodeTrigger","useWindow","useComponentCssInjection","treeNodeTriggerCss","useTreeNodeContext","useTreeContext","useRef","useForkRef","useState","useEffect","jsxs","clsx","jsx","TreeNodeExpansionIcon","CheckboxIcon"],"mappings":"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"}