@salt-ds/lab 1.0.0-alpha.90 → 1.0.0-alpha.92

package/dist-es/side-panel/internal/useSidePanelTabOrder.js

@@ -0,0 +1,212 @@
+import { useEffect } from 'react';
+import { tabbable } from 'tabbable';
+
+const ORIGINAL_TABINDEX_ATTR = "data-salt-original-tabindex";
+function isPlainTabKey(event) {
+  return event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
+}
+function getPanelTabbableElements(panel) {
+  const win = panel.ownerDocument.defaultView;
+  const managed = Array.from(
+    panel.querySelectorAll(`[${ORIGINAL_TABINDEX_ATTR}]`)
+  ).filter((element) => {
+    if (element.hasAttribute("disabled")) return false;
+    if (element.getAttribute("aria-hidden") === "true") return false;
+    return !(element.offsetParent === null && (win == null ? void 0 : win.getComputedStyle(element).display) === "none");
+  });
+  if (managed.length > 0) {
+    return managed;
+  }
+  return tabbable(panel, { displayCheck: "none" });
+}
+function focusFirstPanelElement(panel) {
+  const [firstTabbableElement] = getPanelTabbableElements(panel);
+  (firstTabbableElement ?? panel).focus();
+}
+function focusLastPanelElement(panel) {
+  const tabbableElements = getPanelTabbableElements(panel);
+  (tabbableElements[tabbableElements.length - 1] ?? panel).focus();
+}
+function containsTarget(container, target) {
+  const targetWindow = container.ownerDocument.defaultView;
+  return Boolean(
+    (targetWindow == null ? void 0 : targetWindow.Node) && target instanceof targetWindow.Node && container.contains(target)
+  );
+}
+function getNextTabbableAfterReference(reference, panel) {
+  const { body } = reference.ownerDocument;
+  if (!body) return void 0;
+  const tabbableElements = tabbable(body).filter(
+    (element) => !panel.contains(element)
+  );
+  const referenceIndex = tabbableElements.findIndex(
+    (element) => element === reference || reference.contains(element)
+  );
+  if (referenceIndex === -1) {
+    return void 0;
+  }
+  return tabbableElements[referenceIndex + 1];
+}
+function detachElement(element) {
+  if (!element.hasAttribute(ORIGINAL_TABINDEX_ATTR)) {
+    const original = element.getAttribute("tabindex");
+    element.setAttribute(ORIGINAL_TABINDEX_ATTR, original ?? "");
+  }
+  if (element.getAttribute("tabindex") !== "-1") {
+    element.setAttribute("tabindex", "-1");
+  }
+}
+function reattachElement(element) {
+  if (!element.hasAttribute(ORIGINAL_TABINDEX_ATTR)) return;
+  const original = element.getAttribute(ORIGINAL_TABINDEX_ATTR);
+  element.removeAttribute(ORIGINAL_TABINDEX_ATTR);
+  if (original === null || original === "") {
+    element.removeAttribute("tabindex");
+  } else {
+    element.setAttribute("tabindex", original);
+  }
+}
+function detachPanelFromTabOrder(panel) {
+  const win = panel.ownerDocument.defaultView ?? window;
+  const detach = () => {
+    for (const element of tabbable(panel, { displayCheck: "none" })) {
+      detachElement(element);
+    }
+    const managed = panel.querySelectorAll(
+      `[${ORIGINAL_TABINDEX_ATTR}]`
+    );
+    for (const element of Array.from(managed)) {
+      if (element.getAttribute("tabindex") !== "-1") {
+        element.setAttribute("tabindex", "-1");
+      }
+    }
+  };
+  detach();
+  let scheduled = 0;
+  const scheduleDetach = () => {
+    if (scheduled) return;
+    scheduled = win.requestAnimationFrame(() => {
+      scheduled = 0;
+      detach();
+    });
+  };
+  const observer = new MutationObserver(scheduleDetach);
+  observer.observe(panel, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    attributeFilter: ["tabindex", "disabled", "contenteditable", "hidden"]
+  });
+  return () => {
+    if (scheduled) {
+      win.cancelAnimationFrame(scheduled);
+    }
+    observer.disconnect();
+    const managed = panel.querySelectorAll(
+      `[${ORIGINAL_TABINDEX_ATTR}]`
+    );
+    for (const element of Array.from(managed)) {
+      reattachElement(element);
+    }
+  };
+}
+function useSidePanelTabOrder(props) {
+  const { floating, open, reference } = props;
+  useEffect(() => {
+    if (!open || !reference || !floating) {
+      return;
+    }
+    const { ownerDocument } = reference;
+    let redirectTriggerTab = true;
+    let programmaticReferenceFocus = false;
+    const releaseDetachment = detachPanelFromTabOrder(floating);
+    const onReferenceFocus = (event) => {
+      if (programmaticReferenceFocus) {
+        programmaticReferenceFocus = false;
+        return;
+      }
+      const relatedTarget = event.relatedTarget;
+      if (relatedTarget && relatedTarget instanceof Node && !(reference.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_PRECEDING)) {
+        redirectTriggerTab = false;
+        return;
+      }
+      redirectTriggerTab = true;
+    };
+    const onReferenceKeyDown = (event) => {
+      if (event.defaultPrevented || !isPlainTabKey(event) || event.shiftKey) {
+        return;
+      }
+      if (!redirectTriggerTab) {
+        return;
+      }
+      event.preventDefault();
+      redirectTriggerTab = false;
+      focusFirstPanelElement(floating);
+    };
+    const onFloatingKeyDown = (event) => {
+      if (event.defaultPrevented || !isPlainTabKey(event)) {
+        return;
+      }
+      const panelTabbableElements = getPanelTabbableElements(floating);
+      const activeElement = floating.ownerDocument.activeElement;
+      const currentIndex = activeElement ? panelTabbableElements.indexOf(activeElement) : -1;
+      if (event.shiftKey) {
+        if (currentIndex <= 0) {
+          event.preventDefault();
+          redirectTriggerTab = true;
+          programmaticReferenceFocus = true;
+          reference.focus();
+          return;
+        }
+        event.preventDefault();
+        panelTabbableElements[currentIndex - 1].focus();
+        return;
+      }
+      const atLast = currentIndex === panelTabbableElements.length - 1 || currentIndex === -1 && panelTabbableElements.length === 0;
+      if (atLast) {
+        event.preventDefault();
+        const nextElement = getNextTabbableAfterReference(reference, floating);
+        if (nextElement) {
+          nextElement.focus();
+        } else {
+          redirectTriggerTab = false;
+          programmaticReferenceFocus = true;
+          reference.focus();
+        }
+        return;
+      }
+      if (currentIndex === -1) {
+        event.preventDefault();
+        panelTabbableElements[0].focus();
+        return;
+      }
+      event.preventDefault();
+      panelTabbableElements[currentIndex + 1].focus();
+    };
+    const onDocumentKeyDown = (event) => {
+      if (event.defaultPrevented || !isPlainTabKey(event) || !event.shiftKey) {
+        return;
+      }
+      const nextElement = getNextTabbableAfterReference(reference, floating);
+      if (!nextElement || !containsTarget(nextElement, event.target)) {
+        return;
+      }
+      event.preventDefault();
+      focusLastPanelElement(floating);
+    };
+    reference.addEventListener("focus", onReferenceFocus);
+    reference.addEventListener("keydown", onReferenceKeyDown);
+    floating.addEventListener("keydown", onFloatingKeyDown);
+    ownerDocument.addEventListener("keydown", onDocumentKeyDown);
+    return () => {
+      reference.removeEventListener("focus", onReferenceFocus);
+      reference.removeEventListener("keydown", onReferenceKeyDown);
+      floating.removeEventListener("keydown", onFloatingKeyDown);
+      ownerDocument.removeEventListener("keydown", onDocumentKeyDown);
+      releaseDetachment();
+    };
+  }, [floating, open, reference]);
+}
+
+export { useSidePanelTabOrder };
+//# sourceMappingURL=useSidePanelTabOrder.js.map

package/dist-es/side-panel/internal/useSidePanelTabOrder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSidePanelTabOrder.js","sources":["../src/side-panel/internal/useSidePanelTabOrder.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { tabbable } from \"tabbable\";\n\ninterface UseSidePanelTabOrderProps {\n  floating: HTMLElement | null;\n  open: boolean;\n  reference: HTMLElement | null;\n}\n\nconst ORIGINAL_TABINDEX_ATTR = \"data-salt-original-tabindex\";\n\nfunction isPlainTabKey(event: KeyboardEvent) {\n  return (\n    event.key === \"Tab\" && !event.altKey && !event.ctrlKey && !event.metaKey\n  );\n}\n\n/**\n * Returns the panel's logical tab sequence. While the panel is open we\n * strip tabindex on descendants, so the sequence is discovered via the\n * data-salt-original-tabindex markers; falls back to a fresh tabbable()\n * scan before detachment runs.\n */\nfunction getPanelTabbableElements(panel: HTMLElement): HTMLElement[] {\n  const win = panel.ownerDocument.defaultView;\n  const managed = Array.from(\n    panel.querySelectorAll<HTMLElement>(`[${ORIGINAL_TABINDEX_ATTR}]`),\n  ).filter((element) => {\n    if (element.hasAttribute(\"disabled\")) return false;\n    if (element.getAttribute(\"aria-hidden\") === \"true\") return false;\n    // null offsetParent is also true for fixed/SVG; the display check\n    // disambiguates.\n    return !(\n      element.offsetParent === null &&\n      win?.getComputedStyle(element).display === \"none\"\n    );\n  });\n\n  if (managed.length > 0) {\n    return managed;\n  }\n\n  return tabbable(panel, { displayCheck: \"none\" }) as HTMLElement[];\n}\n\nfunction focusFirstPanelElement(panel: HTMLElement) {\n  const [firstTabbableElement] = getPanelTabbableElements(panel);\n  (firstTabbableElement ?? panel).focus();\n}\n\nfunction focusLastPanelElement(panel: HTMLElement) {\n  const tabbableElements = getPanelTabbableElements(panel);\n  (tabbableElements[tabbableElements.length - 1] ?? panel).focus();\n}\n\nfunction containsTarget(container: Element, target: EventTarget | null) {\n  const targetWindow = container.ownerDocument.defaultView;\n\n  return Boolean(\n    targetWindow?.Node &&\n      target instanceof targetWindow.Node &&\n      container.contains(target),\n  );\n}\n\n/**\n * Returns the first tabbable element after `reference` in document order,\n * skipping anything inside `panel`.\n */\nfunction getNextTabbableAfterReference(\n  reference: HTMLElement,\n  panel: HTMLElement,\n) {\n  const { body } = reference.ownerDocument;\n  if (!body) return undefined;\n  const tabbableElements = tabbable(body).filter(\n    (element) => !panel.contains(element),\n  );\n  const referenceIndex = tabbableElements.findIndex(\n    (element) => element === reference || reference.contains(element),\n  );\n\n  if (referenceIndex === -1) {\n    return undefined;\n  }\n\n  return tabbableElements[referenceIndex + 1];\n}\n\n/**\n * Detaches an element from the natural tab sequence, remembering its\n * original tabindex (or its absence) on a data attribute for restoration.\n */\nfunction detachElement(element: HTMLElement) {\n  if (!element.hasAttribute(ORIGINAL_TABINDEX_ATTR)) {\n    const original = element.getAttribute(\"tabindex\");\n    element.setAttribute(ORIGINAL_TABINDEX_ATTR, original ?? \"\");\n  }\n  // Force re-apply: React may have rewritten the attribute on re-render.\n  if (element.getAttribute(\"tabindex\") !== \"-1\") {\n    element.setAttribute(\"tabindex\", \"-1\");\n  }\n}\n\nfunction reattachElement(element: HTMLElement) {\n  if (!element.hasAttribute(ORIGINAL_TABINDEX_ATTR)) return;\n  const original = element.getAttribute(ORIGINAL_TABINDEX_ATTR);\n  element.removeAttribute(ORIGINAL_TABINDEX_ATTR);\n  if (original === null || original === \"\") {\n    element.removeAttribute(\"tabindex\");\n  } else {\n    element.setAttribute(\"tabindex\", original);\n  }\n}\n\n/**\n * Removes every tabbable descendant of `panel` from the natural tab order.\n * Returns a cleanup function that restores original tabindex values and\n * disconnects the observer used to track dynamically-added focusables.\n */\nfunction detachPanelFromTabOrder(panel: HTMLElement) {\n  const win = panel.ownerDocument.defaultView ?? window;\n\n  const detach = () => {\n    for (const element of tabbable(panel, { displayCheck: \"none\" })) {\n      detachElement(element as HTMLElement);\n    }\n    // Re-assert tabindex=\"-1\" on already-managed elements (React may\n    // have written its prop value back).\n    const managed = panel.querySelectorAll<HTMLElement>(\n      `[${ORIGINAL_TABINDEX_ATTR}]`,\n    );\n    for (const element of Array.from(managed)) {\n      if (element.getAttribute(\"tabindex\") !== \"-1\") {\n        element.setAttribute(\"tabindex\", \"-1\");\n      }\n    }\n  };\n\n  detach();\n\n  // Coalesce mutation bursts into one frame to avoid a feedback loop\n  // between detach()'s tabindex writes and the observer's tabindex filter.\n  let scheduled = 0;\n  const scheduleDetach = () => {\n    if (scheduled) return;\n    scheduled = win.requestAnimationFrame(() => {\n      scheduled = 0;\n      detach();\n    });\n  };\n\n  const observer = new MutationObserver(scheduleDetach);\n\n  observer.observe(panel, {\n    subtree: true,\n    childList: true,\n    attributes: true,\n    attributeFilter: [\"tabindex\", \"disabled\", \"contenteditable\", \"hidden\"],\n  });\n\n  return () => {\n    if (scheduled) {\n      win.cancelAnimationFrame(scheduled);\n    }\n    observer.disconnect();\n    const managed = panel.querySelectorAll<HTMLElement>(\n      `[${ORIGINAL_TABINDEX_ATTR}]`,\n    );\n    for (const element of Array.from(managed)) {\n      reattachElement(element);\n    }\n  };\n}\n\nexport function useSidePanelTabOrder(props: UseSidePanelTabOrderProps) {\n  const { floating, open, reference } = props;\n\n  useEffect(() => {\n    if (!open || !reference || !floating) {\n      return;\n    }\n\n    const { ownerDocument } = reference;\n\n    // True when Tab on the trigger should walk into the panel (a \"fresh\n    // entry\": focus arrived from before the trigger, or from nowhere).\n    // Set false when focus arrives from inside / after the panel, so the\n    // user can keep tabbing forward without getting trapped.\n    let redirectTriggerTab = true;\n\n    // Set true just before we programmatically focus the trigger, so the\n    // focusin handler can preserve our explicit redirect intent instead\n    // of overwriting it from the relatedTarget heuristic.\n    let programmaticReferenceFocus = false;\n\n    // Make panel content unreachable via natural Tab — only the trigger\n    // flow below can enter.\n    const releaseDetachment = detachPanelFromTabOrder(floating);\n\n    const onReferenceFocus = (event: FocusEvent) => {\n      if (programmaticReferenceFocus) {\n        programmaticReferenceFocus = false;\n        return;\n      }\n\n      const relatedTarget = event.relatedTarget as Node | null;\n\n      // Focus arrived from inside / after the panel — disable redirect\n      // so Tab moves forward naturally and doesn't trap the user.\n      if (\n        relatedTarget &&\n        relatedTarget instanceof Node &&\n        !(\n          reference.compareDocumentPosition(relatedTarget) &\n          Node.DOCUMENT_POSITION_PRECEDING\n        )\n      ) {\n        redirectTriggerTab = false;\n        return;\n      }\n\n      redirectTriggerTab = true;\n    };\n\n    const onReferenceKeyDown = (event: KeyboardEvent) => {\n      if (event.defaultPrevented || !isPlainTabKey(event) || event.shiftKey) {\n        return;\n      }\n\n      // Only redirect on a fresh entry; otherwise let the browser advance\n      // to the next focusable element naturally.\n      if (!redirectTriggerTab) {\n        return;\n      }\n\n      event.preventDefault();\n      redirectTriggerTab = false;\n      focusFirstPanelElement(floating);\n    };\n\n    const onFloatingKeyDown = (event: KeyboardEvent) => {\n      if (event.defaultPrevented || !isPlainTabKey(event)) {\n        return;\n      }\n\n      const panelTabbableElements = getPanelTabbableElements(floating);\n      const activeElement = floating.ownerDocument\n        .activeElement as HTMLElement | null;\n      const currentIndex = activeElement\n        ? panelTabbableElements.indexOf(activeElement)\n        : -1;\n\n      if (event.shiftKey) {\n        // At the start of the panel (or on the panel container itself):\n        // exit backwards to the trigger and arm the redirect so the next\n        // forward Tab walks back in.\n        if (currentIndex <= 0) {\n          event.preventDefault();\n          redirectTriggerTab = true;\n          programmaticReferenceFocus = true;\n          reference.focus();\n          return;\n        }\n\n        event.preventDefault();\n        panelTabbableElements[currentIndex - 1].focus();\n        return;\n      }\n\n      // At the end of the panel: exit forwards to the element after the\n      // trigger. Also handles focus on the panel container itself when\n      // the panel has no tabbable items.\n      const atLast =\n        currentIndex === panelTabbableElements.length - 1 ||\n        (currentIndex === -1 && panelTabbableElements.length === 0);\n\n      if (atLast) {\n        event.preventDefault();\n        const nextElement = getNextTabbableAfterReference(reference, floating);\n        if (nextElement) {\n          nextElement.focus();\n        } else {\n          // Nothing after the trigger — hand focus back to the trigger\n          // but disable redirect so the next Tab moves naturally.\n          redirectTriggerTab = false;\n          programmaticReferenceFocus = true;\n          reference.focus();\n        }\n        return;\n      }\n\n      // Focus on the panel container or an unmanaged ancestor — route\n      // forward into the first managed element.\n      if (currentIndex === -1) {\n        event.preventDefault();\n        panelTabbableElements[0].focus();\n        return;\n      }\n\n      event.preventDefault();\n      panelTabbableElements[currentIndex + 1].focus();\n    };\n\n    const onDocumentKeyDown = (event: KeyboardEvent) => {\n      if (event.defaultPrevented || !isPlainTabKey(event) || !event.shiftKey) {\n        return;\n      }\n\n      const nextElement = getNextTabbableAfterReference(reference, floating);\n      if (!nextElement || !containsTarget(nextElement, event.target)) {\n        return;\n      }\n\n      event.preventDefault();\n      focusLastPanelElement(floating);\n    };\n\n    reference.addEventListener(\"focus\", onReferenceFocus);\n    reference.addEventListener(\"keydown\", onReferenceKeyDown);\n    floating.addEventListener(\"keydown\", onFloatingKeyDown);\n    ownerDocument.addEventListener(\"keydown\", onDocumentKeyDown);\n\n    return () => {\n      reference.removeEventListener(\"focus\", onReferenceFocus);\n      reference.removeEventListener(\"keydown\", onReferenceKeyDown);\n      floating.removeEventListener(\"keydown\", onFloatingKeyDown);\n      ownerDocument.removeEventListener(\"keydown\", onDocumentKeyDown);\n      releaseDetachment();\n    };\n  }, [floating, open, reference]);\n}\n"],"names":[],"mappings":"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"}

package/dist-es/side-panel/useSidePanel.js

@@ -1,21 +1,24 @@
-import { useCallback } from 'react';
+import { useEventCallback } from '@salt-ds/core';
 import { useSidePanelContext } from './internal/SidePanelContext.js';
+import 'react';
+import 'tabbable';
 
 function useSidePanel() {
   const { openState, setOpen, setReference, panelId } = useSidePanelContext();
-  const getTriggerProps = useCallback(
+  const getTriggerProps = useEventCallback(
     (userProps) => {
       const userOnClick = userProps == null ? void 0 : userProps.onClick;
+      const userRef = userProps == null ? void 0 : userProps.ref;
       return {
         "aria-expanded": openState,
         "aria-controls": openState ? panelId : void 0,
         ...userProps,
-        onClick: (e) => {
-          userOnClick == null ? void 0 : userOnClick(e);
+        onClick: (event) => {
+          userOnClick == null ? void 0 : userOnClick(event);
+          setOpen(!openState);
         },
         ref: (node) => {
           setReference(node);
-          const userRef = userProps == null ? void 0 : userProps.ref;
           if (typeof userRef === "function") {
             userRef(node);
           } else if (userRef && typeof userRef === "object" && "current" in userRef) {
@@ -23,8 +26,7 @@ function useSidePanel() {
           }
         }
       };
-    },
-    [openState, panelId, setReference]
+    }
   );
   return {
     openState,

package/dist-es/side-panel/useSidePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSidePanel.js","sources":["../src/side-panel/useSidePanel.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useSidePanelContext } from \"./internal\";\n\nexport interface SidePanelValue {\n  /**\n   * Whether the side panel is currently open.\n   */\n  openState: boolean;\n  /**\n   * Sets the open state of the panel.\n   */\n  setOpen: (open: boolean) => void;\n  /**\n   * Props getter for a single trigger element.\n   * Merges `aria-expanded`, `aria-controls`, a `ref` callback (to register\n   * the trigger for focus-return), and user-provided props.\n   * Best for the common case where one button toggles one panel.\n   *\n   * For multi-trigger scenarios (e.g. table rows), use `setTriggerRef` and\n   * manage ARIA attributes yourself instead.\n   */\n  getTriggerProps: (\n    userProps?: Record<string, unknown>,\n  ) => Record<string, unknown>;\n  /**\n   * Registers the element that should receive focus when the panel closes.\n   * Use this in multi-trigger scenarios (e.g. table rows) where each trigger\n   * needs explicit control over which element is the reference.\n   */\n  setTriggerRef: (element: HTMLElement | null) => void;\n  /**\n   * The panel's DOM id. Use this for `aria-controls` in multi-trigger\n   * scenarios where you manage ARIA attributes yourself.\n   */\n  panelId: string | undefined;\n}\n\nexport function useSidePanel(): SidePanelValue {\n  const { openState, setOpen, setReference, panelId } = useSidePanelContext();\n\n  const getTriggerProps = useCallback(\n    (userProps?: Record<string, unknown>) => {\n      const userOnClick = userProps?.onClick as\n        | ((e: React.MouseEvent<HTMLElement>) => void)\n        | undefined;\n\n      return {\n        \"aria-expanded\": openState,\n        \"aria-controls\": openState ? panelId : undefined,\n        ...userProps,\n        onClick: (e: React.MouseEvent<HTMLElement>) => {\n          userOnClick?.(e);\n        },\n        ref: (node: HTMLElement | null) => {\n          // Register this element as the trigger for focus return\n          setReference(node);\n          // Forward the consumer's ref if provided\n          const userRef = userProps?.ref;\n          if (typeof userRef === \"function\") {\n            userRef(node);\n          } else if (\n            userRef &&\n            typeof userRef === \"object\" &&\n            \"current\" in userRef\n          ) {\n            (userRef as React.MutableRefObject<HTMLElement | null>).current =\n              node;\n          }\n        },\n      };\n    },\n    [openState, panelId, setReference],\n  );\n\n  return {\n    openState,\n    setOpen,\n    getTriggerProps,\n    setTriggerRef: setReference,\n    panelId,\n  };\n}\n"],"names":[],"mappings":";;;AAqCO,SAAS,YAAA,GAA+B;AAC7C,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,YAAA,EAAc,OAAA,KAAY,mBAAA,EAAoB;AAE1E,EAAA,MAAM,eAAA,GAAkB,WAAA;AAAA,IACtB,CAAC,SAAA,KAAwC;AACvC,MAAA,MAAM,cAAc,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,OAAA;AAI/B,MAAA,OAAO;AAAA,QACL,eAAA,EAAiB,SAAA;AAAA,QACjB,eAAA,EAAiB,YAAY,OAAA,GAAU,MAAA;AAAA,QACvC,GAAG,SAAA;AAAA,QACH,OAAA,EAAS,CAAC,CAAA,KAAqC;AAC7C,UAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,CAAA,CAAA;AAAA,QAChB,CAAA;AAAA,QACA,GAAA,EAAK,CAAC,IAAA,KAA6B;AAEjC,UAAA,YAAA,CAAa,IAAI,CAAA;AAEjB,UAAA,MAAM,UAAU,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,GAAA;AAC3B,UAAA,IAAI,OAAO,YAAY,UAAA,EAAY;AACjC,YAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,UACd,WACE,OAAA,IACA,OAAO,OAAA,KAAY,QAAA,IACnB,aAAa,OAAA,EACb;AACA,YAAC,QAAuD,OAAA,GACtD,IAAA;AAAA,UACJ;AAAA,QACF;AAAA,OACF;AAAA,IACF,CAAA;AAAA,IACA,CAAC,SAAA,EAAW,OAAA,EAAS,YAAY;AAAA,GACnC;AAEA,EAAA,OAAO;AAAA,IACL,SAAA;AAAA,IACA,OAAA;AAAA,IACA,eAAA;AAAA,IACA,aAAA,EAAe,YAAA;AAAA,IACf;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useSidePanel.js","sources":["../src/side-panel/useSidePanel.ts"],"sourcesContent":["import { useEventCallback } from \"@salt-ds/core\";\nimport type {\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  MutableRefObject,\n  RefCallback,\n} from \"react\";\nimport { useSidePanelContext } from \"./internal\";\n\nexport interface SidePanelTriggerExtraProps {\n  /**\n   * Optional ref to forward alongside the focus-return registration.\n   */\n  ref?:\n    | RefCallback<HTMLElement | null>\n    | MutableRefObject<HTMLElement | null>\n    | null;\n  /**\n   * Click handler. Runs before the built-in toggle so consumers can\n   * preventDefault to skip the toggle.\n   */\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport type SidePanelTriggerPropsResult = ComponentPropsWithoutRef<\"button\"> & {\n  \"aria-expanded\": boolean;\n  \"aria-controls\": string | undefined;\n  ref: RefCallback<HTMLElement | null>;\n};\n\nexport interface SidePanelValue {\n  /**\n   * Whether the side panel is currently open.\n   */\n  openState: boolean;\n  /**\n   * Sets the open state of the panel.\n   */\n  setOpen: (open: boolean) => void;\n  /**\n   * Props getter for a trigger element outside of `SidePanelTrigger`.\n   * Returns `aria-expanded`, `aria-controls`, a `ref` (for focus-return),\n   * and an `onClick` that toggles the panel.\n   *\n   * Spread the result onto a Button to get full trigger behavior:\n   * ```tsx\n   * <Button {...getTriggerProps()}>Toggle panel</Button>\n   * ```\n   *\n   * You can pass additional props which are merged in. If you provide your\n   * own `onClick`, it runs before the built-in toggle. If you provide your\n   * own `ref`, it is forwarded alongside the internal focus-return ref.\n   *\n   * For multi-trigger scenarios (e.g. table rows), use `setTriggerRef` and\n   * manage ARIA attributes yourself instead.\n   */\n  getTriggerProps: (\n    userProps?: SidePanelTriggerExtraProps,\n  ) => SidePanelTriggerPropsResult;\n  /**\n   * Registers the element that should receive focus when the panel closes.\n   * Use this in multi-trigger scenarios (e.g. table rows) where each trigger\n   * needs explicit control over which element is the reference. Pass `null`\n   * to clear the previously-registered trigger.\n   */\n  setTriggerRef: (element: HTMLElement | null) => void;\n  /**\n   * The panel's DOM id. Use this for `aria-controls` in multi-trigger\n   * scenarios where you manage ARIA attributes yourself.\n   */\n  panelId: string | undefined;\n}\n\nexport function useSidePanel(): SidePanelValue {\n  const { openState, setOpen, setReference, panelId } = useSidePanelContext();\n\n  // useEventCallback gives a stable identity so consumers can memoise\n  // around getTriggerProps without it churning on open/close.\n  const getTriggerProps = useEventCallback(\n    (userProps?: SidePanelTriggerExtraProps): SidePanelTriggerPropsResult => {\n      const userOnClick = userProps?.onClick;\n      const userRef = userProps?.ref;\n\n      return {\n        \"aria-expanded\": openState,\n        \"aria-controls\": openState ? panelId : undefined,\n        ...userProps,\n        onClick: (event: MouseEvent<HTMLButtonElement>) => {\n          userOnClick?.(event);\n          setOpen(!openState);\n        },\n        ref: (node: HTMLElement | null) => {\n          setReference(node);\n          if (typeof userRef === \"function\") {\n            userRef(node);\n          } else if (\n            userRef &&\n            typeof userRef === \"object\" &&\n            \"current\" in userRef\n          ) {\n            userRef.current = node;\n          }\n        },\n      };\n    },\n  );\n\n  return {\n    openState,\n    setOpen,\n    getTriggerProps,\n    setTriggerRef: setReference,\n    panelId,\n  };\n}\n"],"names":[],"mappings":";;;;;AAyEO,SAAS,YAAA,GAA+B;AAC7C,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,YAAA,EAAc,OAAA,KAAY,mBAAA,EAAoB;AAI1E,EAAA,MAAM,eAAA,GAAkB,gBAAA;AAAA,IACtB,CAAC,SAAA,KAAwE;AACvE,MAAA,MAAM,cAAc,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,OAAA;AAC/B,MAAA,MAAM,UAAU,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,GAAA;AAE3B,MAAA,OAAO;AAAA,QACL,eAAA,EAAiB,SAAA;AAAA,QACjB,eAAA,EAAiB,YAAY,OAAA,GAAU,MAAA;AAAA,QACvC,GAAG,SAAA;AAAA,QACH,OAAA,EAAS,CAAC,KAAA,KAAyC;AACjD,UAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,KAAA,CAAA;AACd,UAAA,OAAA,CAAQ,CAAC,SAAS,CAAA;AAAA,QACpB,CAAA;AAAA,QACA,GAAA,EAAK,CAAC,IAAA,KAA6B;AACjC,UAAA,YAAA,CAAa,IAAI,CAAA;AACjB,UAAA,IAAI,OAAO,YAAY,UAAA,EAAY;AACjC,YAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,UACd,WACE,OAAA,IACA,OAAO,OAAA,KAAY,QAAA,IACnB,aAAa,OAAA,EACb;AACA,YAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAAA,UACpB;AAAA,QACF;AAAA,OACF;AAAA,IACF;AAAA,GACF;AAEA,EAAA,OAAO;AAAA,IACL,SAAA;AAAA,IACA,OAAA;AAAA,IACA,eAAA;AAAA,IACA,aAAA,EAAe,YAAA;AAAA,IACf;AAAA,GACF;AACF;;;;"}

package/dist-es/tree/Tree.js

@@ -52,7 +52,7 @@ const Tree = forwardRef(
       toggleExpanded,
       select,
       selectedSet,
-      setSelectedState,
+      setVisibleSelectionState,
       visibleNodes,
       getNodeMeta,
       getElement,
@@ -124,8 +124,10 @@ const Tree = forwardRef(
           if (activeNode) {
             const nodeMeta = getNodeMeta(activeNode);
             const isDisabled = disabledIdsSet.has(activeNode);
-            if (!isDisabled && (nodeMeta == null ? void 0 : nodeMeta.hasChildren)) {
-              if (!expandedState.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(
@@ -144,7 +146,8 @@ const Tree = forwardRef(
           if (activeNode) {
             const isDisabled = disabledIdsSet.has(activeNode);
             if (!isDisabled) {
-              if (expandedState.has(activeNode)) {
+              const isExpanded = expandedState.has(activeNode);
+              if (isExpanded) {
                 toggleExpanded(event, activeNode);
               } else {
                 const parent = getParent(activeNode);
@@ -241,7 +244,7 @@ const Tree = forwardRef(
           (visible) => selectedSet.has(visible)
         );
         const newSelected = allSelected ? [] : allVisibleValues;
-        setSelectedState(newSelected);
+        setVisibleSelectionState(newSelected);
         onSelectionChange == null ? void 0 : onSelectionChange(event, newSelected);
         return;
       }

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

@@ -1 +1 @@
-{"version":3,"file":"Tree.js","sources":["../src/tree/Tree.tsx"],"sourcesContent":["import { 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 FocusEvent,\n  forwardRef,\n  type KeyboardEvent,\n  type SyntheticEvent,\n  useEffect,\n  useRef,\n} from \"react\";\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      setSelectedState,\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            if (!isDisabled && nodeMeta?.hasChildren) {\n              if (!expandedState.has(activeNode)) {\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              if (expandedState.has(activeNode)) {\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        setSelectedState(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            { [withBaseName(\"disabled\")]: disabled },\n            className,\n          )}\n          onKeyDown={handleKeyDown}\n          onBlur={handleBlur}\n          {...rest}\n        >\n          {children}\n        </ul>\n      </TreeProvider>\n    );\n  },\n);\n"],"names":["Tree","treeCss","currentIndex"],"mappings":"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"}
+{"version":3,"file":"Tree.js","sources":["../src/tree/Tree.tsx"],"sourcesContent":["import { 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 FocusEvent,\n  forwardRef,\n  type KeyboardEvent,\n  type SyntheticEvent,\n  useEffect,\n  useRef,\n} from \"react\";\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            { [withBaseName(\"disabled\")]: disabled },\n            className,\n          )}\n          onKeyDown={handleKeyDown}\n          onBlur={handleBlur}\n          {...rest}\n        >\n          {children}\n        </ul>\n      </TreeProvider>\n    );\n  },\n);\n"],"names":["Tree","treeCss","currentIndex"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"TreeContext.js","sources":["../src/tree/TreeContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport {\n  type Dispatch,\n  type ReactNode,\n  type SetStateAction,\n  type SyntheticEvent,\n  useContext,\n} from \"react\";\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  /** 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  /** 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":[],"mappings":";;;AA4DA,MAAM,WAAA,GAAc,aAAA;AAAA,EAClB,cAAA;AAAA,EACA;AACF,CAAA;AAEO,MAAM,eAAe,WAAA,CAAY;AAEjC,SAAS,cAAA,GAAmC;AACjD,EAAA,MAAM,OAAA,GAAU,WAAW,WAAW,CAAA;AACtC,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,mDAAmD,CAAA;AAAA,EACrE;AACA,EAAA,OAAO,OAAA;AACT;AAuBA,MAAM,eAAA,GAAkB,aAAA;AAAA,EACtB,iBAAA;AAAA,EACA;AACF,CAAA;AAEO,MAAM,mBAAmB,eAAA,CAAgB;AAEzC,SAAS,kBAAA,GAAuD;AACrE,EAAA,OAAO,WAAW,eAAe,CAAA;AACnC;;;;"}
+{"version":3,"file":"TreeContext.js","sources":["../src/tree/TreeContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport {\n  type Dispatch,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  useContext,\n} from \"react\";\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":[],"mappings":";;;AAgEA,MAAM,WAAA,GAAc,aAAA;AAAA,EAClB,cAAA;AAAA,EACA;AACF,CAAA;AAEO,MAAM,eAAe,WAAA,CAAY;AAEjC,SAAS,cAAA,GAAmC;AACjD,EAAA,MAAM,OAAA,GAAU,WAAW,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,GAAkB,aAAA;AAAA,EACtB,iBAAA;AAAA,EACA;AACF,CAAA;AAEO,MAAM,mBAAmB,eAAA,CAAgB;AAEzC,SAAS,kBAAA,GAAuD;AACrE,EAAA,OAAO,WAAW,eAAe,CAAA;AACnC;;;;"}

package/dist-es/tree/TreeNode.js

@@ -1,24 +1,25 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer, useId } from '@salt-ds/core';
+import { makePrefixer, useIdMemo, useForkRef } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import { forwardRef, useMemo, Children, useImperativeHandle, isValidElement } from 'react';
+import { forwardRef, useMemo, useRef } from 'react';
 import { useTreeContext, useTreeNodeContext, TreeNodeProvider } from './TreeContext.js';
 import css_248z from './TreeNode.css.js';
 import { TreeNodeLabel } from './TreeNodeLabel.js';
 import { TreeNodeTrigger } from './TreeNodeTrigger.js';
+import { flattenTreeNodeChildren, isTreeNodeElement } from './treeModel.js';
 
 const withBaseName = makePrefixer("saltTreeNode");
 function separateChildren(children) {
   const contentChildren = [];
   const nodeChildren = [];
-  Children.forEach(children, (child) => {
-    if (isValidElement(child) && typeof child.props.value === "string") {
+  for (const child of flattenTreeNodeChildren(children)) {
+    if (isTreeNodeElement(child)) {
       nodeChildren.push(child);
-    } else if (child != null) {
+    } else {
       contentChildren.push(child);
     }
-  });
+  }
   return { contentChildren, nodeChildren };
 }
 const TreeNode = forwardRef(
@@ -36,31 +37,31 @@ const TreeNode = forwardRef(
       css: css_248z,
       window: targetWindow
     });
-    const id = useId(value) ?? value;
+    const id = useIdMemo();
     const {
       expandedState,
       selectedSet,
       disabled: treeDisabled,
       disabledIdsSet,
-      indeterminateState,
-      getElement
+      indeterminateState
     } = useTreeContext();
     const parentContext = useTreeNodeContext();
     const level = ((parentContext == null ? void 0 : parentContext.level) ?? 0) + 1;
-    const disabled = treeDisabled || disabledProp || disabledIdsSet.has(value);
+    const disabled = treeDisabled || (parentContext == null ? void 0 : parentContext.disabled) || 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 } = useMemo(
-      () => usesLabelProp ? { contentChildren: [], nodeChildren: Children.toArray(children) } : separateChildren(children),
+      () => usesLabelProp ? {
+        contentChildren: [],
+        nodeChildren: flattenTreeNodeChildren(children)
+      } : separateChildren(children),
       [children, usesLabelProp]
     );
-    const hasChildren = nodeChildren.length > 0;
-    useImperativeHandle(ref, () => getElement(value), [
-      getElement,
-      value
-    ]);
+    const hasChildren = nodeChildren.some(isTreeNodeElement);
+    const nodeRef = useRef(null);
+    const setNodeRef = useForkRef(nodeRef, ref);
     const nodeContext = useMemo(
       () => ({
         value,
@@ -69,6 +70,8 @@ const TreeNode = forwardRef(
         expanded,
         disabled,
         id,
+        nodeRef,
+        setNodeRef,
         selected,
         indeterminate,
         nodeChildren
@@ -80,6 +83,7 @@ const TreeNode = forwardRef(
         expanded,
         disabled,
         id,
+        setNodeRef,
         selected,
         indeterminate,
         nodeChildren

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

@@ -1 +1 @@
-{"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 ? (\n          <span className={withBaseName(\"icon\")}>\n            <Icon aria-hidden />\n          </span>\n        ) : 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":["TreeNode","treeNodeCss"],"mappings":"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"}
+{"version":3,"file":"TreeNode.js","sources":["../src/tree/TreeNode.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useIdMemo } 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  type ComponentType,\n  forwardRef,\n  type ReactNode,\n  useMemo,\n  useRef,\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\";\nimport { flattenTreeNodeChildren, isTreeNodeElement } from \"./treeModel\";\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  for (const child of flattenTreeNodeChildren(children)) {\n    if (isTreeNodeElement(child)) {\n      nodeChildren.push(child);\n    } else {\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 = useIdMemo();\n\n    const {\n      expandedState,\n      selectedSet,\n      disabled: treeDisabled,\n      disabledIdsSet,\n      indeterminateState,\n    } = useTreeContext();\n\n    const parentContext = useTreeNodeContext();\n    const level = (parentContext?.level ?? 0) + 1;\n\n    const disabled =\n      treeDisabled ||\n      parentContext?.disabled ||\n      disabledProp ||\n      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          ? {\n              contentChildren: [],\n              nodeChildren: flattenTreeNodeChildren(children),\n            }\n          : separateChildren(children),\n      [children, usesLabelProp],\n    );\n\n    const hasChildren = nodeChildren.some(isTreeNodeElement);\n\n    const nodeRef = useRef<HTMLLIElement>(null);\n    const setNodeRef = useForkRef(nodeRef, ref);\n\n    const nodeContext = useMemo(\n      () => ({\n        value,\n        level,\n        hasChildren,\n        expanded,\n        disabled,\n        id,\n        nodeRef,\n        setNodeRef,\n        selected,\n        indeterminate,\n        nodeChildren,\n      }),\n      [\n        value,\n        level,\n        hasChildren,\n        expanded,\n        disabled,\n        id,\n        setNodeRef,\n        selected,\n        indeterminate,\n        nodeChildren,\n      ],\n    );\n\n    const defaultContent = usesLabelProp ? (\n      <TreeNodeTrigger>\n        {Icon ? (\n          <span className={withBaseName(\"icon\")}>\n            <Icon aria-hidden />\n          </span>\n        ) : 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":["TreeNode","treeNodeCss"],"mappings":"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"}