@sproutsocial/seeds-react-tree 0.3.1

package/dist/esm/index.js

@@ -0,0 +1,887 @@
+// src/Tree.tsx
+import * as React from "react";
+
+// src/Common/treeContext.ts
+import { createContext, useContext } from "react";
+var TreeContext = createContext(null);
+function useTreeContext() {
+  const ctx = useContext(TreeContext);
+  if (!ctx) {
+    throw new Error("TreeItem must be rendered inside a <Tree>.");
+  }
+  return ctx;
+}
+var TreeItemContext = createContext({
+  level: 1
+});
+
+// src/Common/useTreeState.ts
+import { useCallback, useMemo, useState } from "react";
+function useTreeState(opts) {
+  const {
+    selectionMode,
+    selectableNodes,
+    defaultExpanded,
+    expanded: expandedProp,
+    onExpandedChange,
+    defaultSelected,
+    selected: selectedProp,
+    onSelectionChange
+  } = opts;
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(
+    () => new Set(defaultExpanded ?? [])
+  );
+  const [uncontrolledSelected, setUncontrolledSelected] = useState(
+    () => new Set(defaultSelected ?? [])
+  );
+  const expanded = useMemo(
+    () => expandedProp ? new Set(expandedProp) : uncontrolledExpanded,
+    [expandedProp, uncontrolledExpanded]
+  );
+  const selected = useMemo(
+    () => selectedProp ? new Set(selectedProp) : uncontrolledSelected,
+    [selectedProp, uncontrolledSelected]
+  );
+  const toggleExpanded = useCallback(
+    (id, next) => {
+      const current = expandedProp ? new Set(expandedProp) : uncontrolledExpanded;
+      const willOpen = next ?? !current.has(id);
+      const updated = new Set(current);
+      if (willOpen) {
+        updated.add(id);
+      } else {
+        updated.delete(id);
+      }
+      if (!expandedProp) {
+        setUncontrolledExpanded(updated);
+      }
+      onExpandedChange?.(Array.from(updated));
+    },
+    [expandedProp, uncontrolledExpanded, onExpandedChange]
+  );
+  const toggleSelected = useCallback(
+    (id, hasChildren) => {
+      if (selectionMode === "none") return;
+      if (selectableNodes === "leaves" && hasChildren) return;
+      const current = selectedProp ? new Set(selectedProp) : uncontrolledSelected;
+      const updated = /* @__PURE__ */ new Set();
+      if (selectionMode === "single") {
+        if (!current.has(id)) {
+          updated.add(id);
+        }
+      } else {
+        current.forEach((v) => updated.add(v));
+        if (updated.has(id)) {
+          updated.delete(id);
+        } else {
+          updated.add(id);
+        }
+      }
+      if (!selectedProp) {
+        setUncontrolledSelected(updated);
+      }
+      onSelectionChange?.(Array.from(updated));
+    },
+    [
+      selectionMode,
+      selectableNodes,
+      selectedProp,
+      uncontrolledSelected,
+      onSelectionChange
+    ]
+  );
+  return {
+    expanded,
+    toggleExpanded,
+    selected,
+    toggleSelected
+  };
+}
+
+// src/TreeStyles.tsx
+import styled, { css } from "styled-components";
+var TreeRoot = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-family: ${({ theme }) => theme.fontFamily};
+  ${({ theme }) => theme.typography[300]}
+  color: ${({ theme }) => theme.colors.text.body};
+`;
+var TreeItemRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+  padding: ${({ theme }) => theme.space[300]};
+  padding-left: ${({ theme, $level }) => `calc(${theme.space[300]} + ${$level - 1} * ${theme.space[500]})`};
+  border-radius: ${({ theme }) => theme.radii[400]};
+  cursor: pointer;
+  user-select: none;
+  background: transparent;
+  transition: background-color ${({ theme }) => theme.duration.fast}
+    ${({ theme }) => theme.easing.ease_in};
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.listItem.background.hover};
+  }
+
+  ${({ $selected, theme }) => $selected && css`
+      background: ${theme.colors.listItem.background.hover};
+      font-weight: ${theme.fontWeights.semibold};
+    `}
+
+  ${({ $disabled }) => $disabled && css`
+      opacity: 0.4;
+      cursor: not-allowed;
+      pointer-events: none;
+    `}
+`;
+var TreeItemEl = styled.li`
+  list-style: none;
+  outline: none;
+
+  /*
+   * Tree rows stack tightly, so the standard outset Seeds focusRing bleeds
+   * into adjacent rows. Use an inset outline so the ring is drawn just inside
+   * the row's edge and never overlaps siblings or children.
+   *
+   * The same ring is drawn when [data-treeitem-active] is set so combobox
+   * hosts that drive the tree via aria-activedescendant (no real DOM focus)
+   * still get a visible "active" indicator on the row.
+   */
+  &:focus-visible > ${TreeItemRow}, &[data-treeitem-active] > ${TreeItemRow} {
+    outline: 2px solid
+      ${({ theme }) => theme.colors.button.primary.background.base};
+    outline-offset: -2px;
+  }
+`;
+var TreeItemGroup = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+var TreeItemLabel = styled.span`
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var TreeItemIcon = styled.span`
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+`;
+var TreeItemChevron = styled.button.attrs({
+  type: "button",
+  tabIndex: -1
+})`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: ${({ theme }) => theme.space[500]};
+  height: ${({ theme }) => theme.space[500]};
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: ${({ theme }) => theme.colors.icon.base};
+  cursor: pointer;
+  border-radius: ${({ theme }) => theme.radii[300]};
+  transition: transform ${({ theme }) => theme.duration.fast}
+    ${({ theme }) => theme.easing.ease_in};
+  transform: ${({ $expanded }) => $expanded ? "rotate(0deg)" : "rotate(-90deg)"};
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.listItem.background.hover};
+  }
+`;
+
+// src/Tree.tsx
+import { jsx } from "react/jsx-runtime";
+var Tree = React.forwardRef(function Tree2(props, forwardedRef) {
+  const {
+    children,
+    selectionMode = "none",
+    selectableNodes = "all",
+    defaultExpanded,
+    expanded: expandedProp,
+    onExpandedChange,
+    defaultSelected,
+    selected: selectedProp,
+    onSelectionChange,
+    renderSelectionIndicator,
+    defaultFocusedId,
+    focusedId: focusedIdProp,
+    onFocusedIdChange,
+    manageDomFocus = true,
+    className,
+    id
+  } = props;
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
+  const innerRef = React.useRef(null);
+  React.useImperativeHandle(forwardedRef, () => innerRef.current, []);
+  const { expanded, toggleExpanded, selected, toggleSelected } = useTreeState({
+    selectionMode,
+    selectableNodes,
+    defaultExpanded,
+    expanded: expandedProp,
+    onExpandedChange,
+    defaultSelected,
+    selected: selectedProp,
+    onSelectionChange
+  });
+  const isFocusedControlled = focusedIdProp !== void 0;
+  const [internalFocusedId, setInternalFocusedId] = React.useState(defaultFocusedId ?? null);
+  const focusedId = isFocusedControlled ? focusedIdProp ?? null : internalFocusedId;
+  const setFocusedId = React.useCallback(
+    (nextId) => {
+      if (!isFocusedControlled) setInternalFocusedId(nextId);
+      onFocusedIdChange?.(nextId);
+    },
+    [isFocusedControlled, onFocusedIdChange]
+  );
+  const [hasFocused, setHasFocused] = React.useState(false);
+  React.useLayoutEffect(() => {
+    const root = innerRef.current;
+    if (!root || focusedId === null) return;
+    const stillExists = root.querySelector(
+      `[role="treeitem"][data-treeitem-id="${CSS.escape(focusedId)}"]`
+    );
+    if (stillExists) return;
+    const firstVisible = root.querySelector('[role="treeitem"]');
+    setFocusedId(firstVisible?.dataset.treeitemId ?? null);
+  });
+  const ctxValue = React.useMemo(
+    () => ({
+      focusedId,
+      setFocusedId,
+      expanded,
+      toggleExpanded,
+      selected,
+      toggleSelected,
+      selectionMode,
+      selectableNodes,
+      renderSelectionIndicator,
+      rootRef: innerRef,
+      hasFocused,
+      setHasFocused,
+      manageDomFocus
+    }),
+    [
+      focusedId,
+      setFocusedId,
+      expanded,
+      toggleExpanded,
+      selected,
+      toggleSelected,
+      selectionMode,
+      selectableNodes,
+      renderSelectionIndicator,
+      hasFocused,
+      manageDomFocus
+    ]
+  );
+  return /* @__PURE__ */ jsx(TreeContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(TreeItemContext.Provider, { value: { level: 1 }, children: /* @__PURE__ */ jsx(
+    TreeRoot,
+    {
+      ref: innerRef,
+      role: "tree",
+      id,
+      className,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-multiselectable": selectionMode === "multiple" ? true : void 0,
+      children
+    }
+  ) }) });
+});
+
+// src/TreeItem.tsx
+import * as React2 from "react";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+
+// src/Common/useTreeKeyboard.ts
+import { useCallback as useCallback3, useRef as useRef2 } from "react";
+
+// src/Common/treeNavigation.ts
+function getVisibleTreeItems(root) {
+  if (!root) return [];
+  const all = Array.from(
+    root.querySelectorAll('[role="treeitem"]')
+  );
+  return all.filter((el) => {
+    if (el.getAttribute("aria-disabled") === "true") return false;
+    let parent = el.parentElement;
+    while (parent && parent !== root) {
+      if (parent.getAttribute("role") === "group" && parent.hasAttribute("hidden")) {
+        return false;
+      }
+      parent = parent.parentElement;
+    }
+    return true;
+  });
+}
+function getTreeItemId(el) {
+  return el.dataset.treeitemId ?? null;
+}
+function treeItemDomId(itemId) {
+  return `${itemId}__item`;
+}
+function computeTreeNavigation(root, currentEl, key, meta) {
+  const visible = getVisibleTreeItems(root);
+  if (visible.length === 0) return { preventDefault: false };
+  const idOf = (el) => {
+    if (!el) return void 0;
+    return getTreeItemId(el) ?? void 0;
+  };
+  if (!currentEl || !meta) {
+    if (key === "ArrowDown" || key === "Home") {
+      return { preventDefault: true, nextFocusedId: idOf(visible[0]) };
+    }
+    if (key === "ArrowUp" || key === "End") {
+      return {
+        preventDefault: true,
+        nextFocusedId: idOf(visible[visible.length - 1])
+      };
+    }
+    return { preventDefault: false };
+  }
+  const currentIndex = visible.indexOf(currentEl);
+  if (currentIndex === -1) return { preventDefault: false };
+  const clamp = (i) => Math.max(0, Math.min(visible.length - 1, i));
+  switch (key) {
+    case "ArrowDown":
+      return {
+        preventDefault: true,
+        nextFocusedId: idOf(visible[clamp(currentIndex + 1)])
+      };
+    case "ArrowUp":
+      return {
+        preventDefault: true,
+        nextFocusedId: idOf(visible[clamp(currentIndex - 1)])
+      };
+    case "ArrowRight": {
+      if (meta.hasChildren && !meta.isExpanded) {
+        return {
+          preventDefault: true,
+          expandToggle: { id: meta.id, next: true }
+        };
+      }
+      if (meta.hasChildren && meta.isExpanded) {
+        return {
+          preventDefault: true,
+          nextFocusedId: idOf(visible[clamp(currentIndex + 1)])
+        };
+      }
+      return { preventDefault: true };
+    }
+    case "ArrowLeft": {
+      if (meta.hasChildren && meta.isExpanded) {
+        return {
+          preventDefault: true,
+          expandToggle: { id: meta.id, next: false }
+        };
+      }
+      let parent = currentEl.parentElement;
+      while (parent && parent !== root) {
+        if (parent.getAttribute("role") === "group") {
+          const parentItem = parent.parentElement;
+          if (parentItem?.getAttribute("role") === "treeitem") {
+            return {
+              preventDefault: true,
+              nextFocusedId: idOf(parentItem)
+            };
+          }
+        }
+        parent = parent.parentElement;
+      }
+      return { preventDefault: true };
+    }
+    case "Home":
+      return { preventDefault: true, nextFocusedId: idOf(visible[0]) };
+    case "End":
+      return {
+        preventDefault: true,
+        nextFocusedId: idOf(visible[visible.length - 1])
+      };
+    case "Enter":
+    case " ":
+      return {
+        preventDefault: true,
+        selectToggle: { id: meta.id, hasChildren: meta.hasChildren }
+      };
+    case "*": {
+      const siblings = Array.from(
+        currentEl.parentElement?.children ?? []
+      ).filter(
+        (el) => el instanceof HTMLElement && el.getAttribute("role") === "treeitem"
+      );
+      const toExpand = siblings.filter((s) => s.getAttribute("aria-expanded") === "false").map((s) => getTreeItemId(s)).filter((id) => id !== null);
+      return { preventDefault: true, expandSiblings: toExpand };
+    }
+  }
+  return { preventDefault: false };
+}
+
+// src/Common/useTreeKeyboard.ts
+var TYPEAHEAD_TIMEOUT_MS = 500;
+function focusItem(el) {
+  if (!el) return;
+  el.focus();
+}
+function useTreeKeyboard(ctx) {
+  const typeaheadBufferRef = useRef2("");
+  const typeaheadTimerRef = useRef2(null);
+  const handleTypeahead = useCallback3(
+    (char, current, visible) => {
+      if (typeaheadTimerRef.current) clearTimeout(typeaheadTimerRef.current);
+      typeaheadBufferRef.current = (typeaheadBufferRef.current + char).toLowerCase();
+      typeaheadTimerRef.current = setTimeout(() => {
+        typeaheadBufferRef.current = "";
+      }, TYPEAHEAD_TIMEOUT_MS);
+      const buffer = typeaheadBufferRef.current;
+      const currentIndex = visible.indexOf(current);
+      const ordered = [
+        ...visible.slice(currentIndex + 1),
+        ...visible.slice(0, currentIndex + 1)
+      ];
+      const match = ordered.find(
+        (el) => (el.textContent ?? "").trim().toLowerCase().startsWith(buffer)
+      );
+      if (match) {
+        const id = getTreeItemId(match);
+        if (id) ctx.setFocusedId(id);
+        focusItem(match);
+      }
+    },
+    [ctx]
+  );
+  return useCallback3(
+    (e, itemMeta) => {
+      if (itemMeta.isDisabled) return;
+      if (e.target !== e.currentTarget) return;
+      const root = ctx.rootRef.current;
+      const current = e.currentTarget;
+      const result = computeTreeNavigation(root, current, e.key, {
+        id: itemMeta.id,
+        hasChildren: itemMeta.hasChildren,
+        isExpanded: itemMeta.isExpanded,
+        level: itemMeta.level
+      });
+      if (result.preventDefault) e.preventDefault();
+      if (result.expandToggle) {
+        ctx.toggleExpanded(result.expandToggle.id, result.expandToggle.next);
+      }
+      if (result.selectToggle) {
+        ctx.toggleSelected(
+          result.selectToggle.id,
+          result.selectToggle.hasChildren
+        );
+      }
+      if (result.expandSiblings) {
+        result.expandSiblings.forEach((id) => ctx.toggleExpanded(id, true));
+      }
+      if (result.nextFocusedId) {
+        ctx.setFocusedId(result.nextFocusedId);
+        if (ctx.manageDomFocus) {
+          const next = root?.querySelector(
+            `[data-treeitem-id="${CSS.escape(result.nextFocusedId)}"]`
+          );
+          focusItem(next ?? void 0);
+        }
+      }
+      if (!result.preventDefault && ctx.manageDomFocus && e.key.length === 1 && /\S/.test(e.key) && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        handleTypeahead(e.key, current, getVisibleTreeItems(root));
+      }
+    },
+    [ctx, handleTypeahead]
+  );
+}
+
+// src/TreeItem.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function hasTreeItemChildren(children) {
+  let found = false;
+  React2.Children.forEach(children, (child) => {
+    if (found) return;
+    if (!React2.isValidElement(child)) return;
+    const childType = child.type;
+    if (childType === React2.Fragment) {
+      found = hasTreeItemChildren(
+        child.props.children
+      );
+      return;
+    }
+    found = true;
+  });
+  return found;
+}
+function TreeItem(props) {
+  const { id, label, icon, disabled = false, children } = props;
+  const ctx = useTreeContext();
+  const { level } = React2.useContext(TreeItemContext);
+  const hasChildren = React2.useMemo(
+    () => hasTreeItemChildren(children),
+    [children]
+  );
+  const isExpanded = ctx.expanded.has(id);
+  const isSelected = ctx.selected.has(id);
+  const selectionMode = ctx.selectionMode;
+  const itemRef = React2.useRef(null);
+  const isTabbable = ctx.manageDomFocus && ctx.focusedId === id;
+  React2.useEffect(() => {
+    if (!ctx.manageDomFocus) return;
+    if (ctx.focusedId !== null) return;
+    const root = ctx.rootRef.current;
+    if (!root) return;
+    const first = root.querySelector('[role="treeitem"]');
+    if (first === itemRef.current) {
+      ctx.setFocusedId(id);
+    }
+  }, []);
+  const handleKeyDown = useTreeKeyboard(ctx);
+  const handleRowClick = (e) => {
+    if (disabled) return;
+    const target = e.target;
+    if (target.closest("[data-tree-chevron]")) return;
+    ctx.setFocusedId(id);
+    if (ctx.manageDomFocus) itemRef.current?.focus();
+    if (hasChildren && selectionMode === "none") {
+      ctx.toggleExpanded(id);
+      return;
+    }
+    if (hasChildren && ctx.selectableNodes === "leaves") {
+      ctx.toggleExpanded(id);
+      return;
+    }
+    if (selectionMode !== "none") {
+      ctx.toggleSelected(id, hasChildren);
+    }
+  };
+  const handleChevronClick = (e) => {
+    e.stopPropagation();
+    if (disabled) return;
+    ctx.setFocusedId(id);
+    if (ctx.manageDomFocus) itemRef.current?.focus();
+    ctx.toggleExpanded(id);
+  };
+  const ariaSelected = selectionMode === "single" && ctx.selectableNodes !== "leaves" ? isSelected : void 0;
+  const ariaChecked = selectionMode === "multiple" ? isSelected : selectionMode === "single" && ctx.selectableNodes === "leaves" ? isSelected : void 0;
+  const groupId = `${id}__group`;
+  const labelId = `${id}__label`;
+  return /* @__PURE__ */ jsxs(
+    TreeItemEl,
+    {
+      ref: itemRef,
+      id: treeItemDomId(id),
+      role: "treeitem",
+      "data-treeitem-id": id,
+      "data-treeitem-active": !ctx.manageDomFocus && ctx.focusedId === id ? true : void 0,
+      "aria-level": level,
+      "aria-expanded": hasChildren ? isExpanded : void 0,
+      "aria-selected": ariaSelected,
+      "aria-checked": ariaChecked,
+      "aria-disabled": disabled || void 0,
+      "aria-labelledby": labelId,
+      "aria-owns": hasChildren && isExpanded ? groupId : void 0,
+      tabIndex: isTabbable ? 0 : -1,
+      onKeyDown: (e) => {
+        if (!ctx.manageDomFocus) return;
+        handleKeyDown(e, {
+          id,
+          hasChildren,
+          isExpanded,
+          isDisabled: disabled,
+          level
+        });
+      },
+      onClick: (e) => {
+        const target = e.target;
+        const nearestTreeitem = target.closest('[role="treeitem"]');
+        if (nearestTreeitem !== e.currentTarget) return;
+        handleRowClick(e);
+      },
+      onMouseDown: (e) => {
+        if (!ctx.manageDomFocus) e.preventDefault();
+      },
+      onFocus: () => {
+        if (!ctx.manageDomFocus) return;
+        if (!ctx.hasFocused) ctx.setHasFocused(true);
+        if (ctx.focusedId !== id) ctx.setFocusedId(id);
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          TreeItemRow,
+          {
+            "data-treeitem-row": true,
+            $level: level,
+            $selected: isSelected,
+            $disabled: disabled,
+            children: [
+              ctx.renderSelectionIndicator && !(ctx.selectableNodes === "leaves" && hasChildren) ? ctx.renderSelectionIndicator({
+                selected: isSelected,
+                disabled,
+                selectionMode
+              }) : null,
+              icon != null ? /* @__PURE__ */ jsx2(TreeItemIcon, { "aria-hidden": true, children: icon }) : null,
+              /* @__PURE__ */ jsx2(TreeItemLabel, { id: labelId, children: label }),
+              hasChildren ? /* @__PURE__ */ jsx2(
+                TreeItemChevron,
+                {
+                  "data-tree-chevron": true,
+                  "aria-hidden": true,
+                  $expanded: isExpanded,
+                  onClick: handleChevronClick,
+                  children: /* @__PURE__ */ jsx2(Icon, { name: "chevron-down-outline", size: "small" })
+                }
+              ) : null
+            ]
+          }
+        ),
+        hasChildren ? /* @__PURE__ */ jsx2(TreeItemGroup, { role: "group", id: groupId, hidden: !isExpanded, children: /* @__PURE__ */ jsx2(TreeItemContext.Provider, { value: { level: level + 1 }, children }) }) : null
+      ]
+    }
+  );
+}
+TreeItem.displayName = "TreeItem";
+
+// src/TreeCombobox.tsx
+import * as React3 from "react";
+import styled2 from "styled-components";
+import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
+
+// src/Common/filterTree.ts
+function filterTree(items, query) {
+  const normalized = query.trim().toLowerCase();
+  if (!normalized) {
+    return { items: [...items], forceExpanded: [] };
+  }
+  const forceExpanded = /* @__PURE__ */ new Set();
+  const walk = (node) => {
+    const matches = node.label.toLowerCase().includes(normalized);
+    const filteredChildren = (node.children ?? []).map(walk).filter((c) => c !== null);
+    if (filteredChildren.length > 0 && node.children) {
+      forceExpanded.add(node.id);
+    }
+    if (matches || filteredChildren.length > 0) {
+      return {
+        ...node,
+        children: node.children ? filteredChildren : void 0
+      };
+    }
+    return null;
+  };
+  const filtered = items.map(walk).filter((n) => n !== null);
+  return { items: filtered, forceExpanded: Array.from(forceExpanded) };
+}
+
+// src/TreeCombobox.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Root = styled2.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.space[300]};
+`;
+var InputGroup = styled2.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[200]};
+  padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[300]};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  border: 1px solid ${({ theme }) => theme.colors.form.border.base};
+  background: ${({ theme }) => theme.colors.form.background.base};
+  color: ${({ theme }) => theme.colors.icon.base};
+
+  &:focus-within {
+    ${focusRing}
+  }
+`;
+var ComboboxInput = styled2.input`
+  flex: 1;
+  border: none;
+  background: transparent;
+  outline: none;
+  font-family: ${({ theme }) => theme.fontFamily};
+  ${({ theme }) => theme.typography[300]}
+  color: ${({ theme }) => theme.colors.text.body};
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.text.subtext};
+  }
+`;
+var EmptyState = styled2.div`
+  padding: ${({ theme }) => theme.space[400]};
+  text-align: center;
+  color: ${({ theme }) => theme.colors.text.subtext};
+  ${({ theme }) => theme.typography[300]}
+`;
+var NAV_KEYS = /* @__PURE__ */ new Set([
+  "ArrowDown",
+  "ArrowUp",
+  "ArrowLeft",
+  "ArrowRight",
+  "Home",
+  "End",
+  "Enter"
+]);
+function TreeCombobox(props) {
+  const {
+    items,
+    placeholder = "Search...",
+    emptyText = "No results found.",
+    query: queryProp,
+    defaultQuery = "",
+    onQueryChange,
+    selectionMode = "none",
+    selectableNodes = "all",
+    defaultExpanded,
+    expanded: expandedProp,
+    onExpandedChange,
+    defaultSelected,
+    selected: selectedProp,
+    onSelectionChange,
+    renderSelectionIndicator,
+    id,
+    className
+  } = props;
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
+  const [uncontrolledQuery, setUncontrolledQuery] = React3.useState(defaultQuery);
+  const query = queryProp ?? uncontrolledQuery;
+  const setQuery = (next) => {
+    if (queryProp === void 0) setUncontrolledQuery(next);
+    onQueryChange?.(next);
+  };
+  const [userExpanded, setUserExpanded] = React3.useState(() => [
+    ...defaultExpanded ?? expandedProp ?? []
+  ]);
+  const { items: visibleItems, forceExpanded } = React3.useMemo(
+    () => filterTree([...items], query),
+    [items, query]
+  );
+  const isFiltering = query.trim().length > 0;
+  const effectiveExpanded = isFiltering ? Array.from(/* @__PURE__ */ new Set([...userExpanded, ...forceExpanded])) : expandedProp ?? userExpanded;
+  const handleExpandedChange = (next) => {
+    if (!isFiltering) {
+      setUserExpanded(next);
+    }
+    onExpandedChange?.(next);
+  };
+  const [focusedId, setFocusedId] = React3.useState(null);
+  const treeRef = React3.useRef(null);
+  const reactId = React3.useId();
+  const treeDomId = id ? `${id}-tree` : `${reactId}-tree`;
+  const findTreeItemEl = (itemId) => treeRef.current?.querySelector(
+    `[role="treeitem"][data-treeitem-id="${CSS.escape(itemId)}"]`
+  ) ?? null;
+  const handleInputKeyDown = (e) => {
+    if (e.key === "Escape") {
+      if (query.length > 0) {
+        e.preventDefault();
+        setQuery("");
+        setFocusedId(null);
+      }
+      return;
+    }
+    if (!NAV_KEYS.has(e.key)) return;
+    const currentEl = focusedId ? findTreeItemEl(focusedId) : null;
+    const meta = currentEl && focusedId ? {
+      id: focusedId,
+      hasChildren: currentEl.getAttribute("aria-expanded") !== null,
+      isExpanded: currentEl.getAttribute("aria-expanded") === "true",
+      level: parseInt(currentEl.getAttribute("aria-level") ?? "1", 10)
+    } : null;
+    if (e.key === "Enter") {
+      if (!currentEl) return;
+      e.preventDefault();
+      const row = currentEl.querySelector("[data-treeitem-row]");
+      row?.click();
+      return;
+    }
+    const result = computeTreeNavigation(
+      treeRef.current,
+      currentEl,
+      e.key,
+      meta
+    );
+    if (result.preventDefault) e.preventDefault();
+    if (result.expandToggle) {
+      const current = new Set(effectiveExpanded);
+      const willOpen = result.expandToggle.next ?? !current.has(result.expandToggle.id);
+      if (willOpen) current.add(result.expandToggle.id);
+      else current.delete(result.expandToggle.id);
+      handleExpandedChange(Array.from(current));
+    }
+    if (result.nextFocusedId) {
+      setFocusedId(result.nextFocusedId);
+    }
+  };
+  const showEmpty = visibleItems.length === 0;
+  return /* @__PURE__ */ jsxs2(Root, { className, children: [
+    /* @__PURE__ */ jsxs2(InputGroup, { children: [
+      /* @__PURE__ */ jsx3(Icon2, { name: "magnifying-glass-outline", size: "small", "aria-hidden": true }),
+      /* @__PURE__ */ jsx3(
+        ComboboxInput,
+        {
+          type: "text",
+          role: "combobox",
+          id,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-expanded": !showEmpty,
+          "aria-controls": treeDomId,
+          "aria-haspopup": "tree",
+          "aria-autocomplete": "list",
+          "aria-activedescendant": focusedId ? treeItemDomId(focusedId) : void 0,
+          placeholder,
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          onKeyDown: handleInputKeyDown
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx3(
+      Tree,
+      {
+        ref: treeRef,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        id: treeDomId,
+        manageDomFocus: false,
+        selectionMode,
+        selectableNodes,
+        expanded: effectiveExpanded,
+        onExpandedChange: handleExpandedChange,
+        selected: selectedProp,
+        defaultSelected,
+        onSelectionChange,
+        renderSelectionIndicator,
+        focusedId,
+        onFocusedIdChange: setFocusedId,
+        children: visibleItems.map((item) => /* @__PURE__ */ jsx3(TreeNode, { item }, item.id))
+      }
+    ),
+    showEmpty ? /* @__PURE__ */ jsx3(EmptyState, { role: "status", "aria-live": "polite", children: emptyText }) : null
+  ] });
+}
+function TreeNode({ item }) {
+  return /* @__PURE__ */ jsx3(
+    TreeItem,
+    {
+      id: item.id,
+      label: item.label,
+      icon: item.icon,
+      disabled: item.disabled,
+      children: item.children?.map((child) => /* @__PURE__ */ jsx3(TreeNode, { item: child }, child.id))
+    }
+  );
+}
+export {
+  Tree,
+  TreeCombobox,
+  TreeItem
+};
+//# sourceMappingURL=index.js.map