@sproutsocial/seeds-react-tree 0.3.1 → 0.4.0

package/.turbo/turbo-build.log

@@ -1,4 +1,5 @@
 yarn run v1.22.22
+warning package.json: "dependencies" has dependency "@sproutsocial/seeds-react-popout" with range "^2.5.7" that collides with a dependency in "devDependencies" of the same name with version "^2.5.9"
 $ tsup --dts
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
@@ -8,14 +9,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     29.75 KB
-CJS dist/index.js.map 58.64 KB
-CJS ⚡️ Build success in 26ms
-ESM dist/esm/index.js     26.95 KB
-ESM dist/esm/index.js.map 58.29 KB
-ESM ⚡️ Build success in 27ms
+CJS dist/index.js     41.77 KB
+CJS dist/index.js.map 86.20 KB
+CJS ⚡️ Build success in 77ms
+ESM dist/esm/index.js     38.14 KB
+ESM dist/esm/index.js.map 85.67 KB
+ESM ⚡️ Build success in 78ms
 DTS Build start
-DTS ⚡️ Build success in 1655ms
-DTS dist/index.d.ts  4.11 KB
-DTS dist/index.d.mts 4.11 KB
-Done in 2.39s.
+DTS ⚡️ Build success in 2451ms
+DTS dist/index.d.ts  7.37 KB
+DTS dist/index.d.mts 7.37 KB
+Done in 3.32s.

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @sproutsocial/seeds-react-tree
 
+## 0.4.0
+
+### Minor Changes
+
+- 7e1e820: Add `SingleTreeSearchableSelect` and `MultiTreeSearchableSelect` — wrap
+  `TreeCombobox` in a popout-style disclosure that matches the existing
+  `SingleSearchableSelect` / `MultiSearchableSelect` API (`selectedItemId(s)`,
+  `onSelectedItemId(s)Change`, `defaultSelectedItemId(s)`).
+
+  The trigger renders the placeholder when nothing is selected, a comma-
+  separated list of labels for up to 3 selections, and `"N selected"` beyond
+  that. Pass `renderTrigger` to fully override the trigger label content. Pass
+  `contentWidth` to pin the popout width; by default it tracks the trigger via
+  `var(--radix-popover-trigger-width)` with a viewport cap, and expands
+  horizontally for very deep trees so labels never get clipped. The popout
+  height caps at `min(var(--radix-popper-available-height), 400px)` and the
+  tree section scrolls vertically beyond that.
+
+  `SingleTreeSearchableSelect` closes the popout on selection;
+  `MultiTreeSearchableSelect` stays open so users can accumulate picks. Both
+  close on Escape (when the search query is empty), outside click, or trigger
+  toggle.
+
+  `TreeCombobox` internals were restructured to a v3-style search header
+  (padded, with a border-bottom separator) + scrollable list section so the
+  inline appearance lines up with the new popout components.
+
+  `Tree` rows and `TreeCombobox`'s search input dropped from `typography[300]`
+  to `typography[200]` to match the rest of the searchable-select family.
+  `TreeItem` per-level indentation reduced from `space[500]` (20px) to
+  `space[400]` (16px) so deeply nested trees stay readable inside a narrow
+  popout.
+
+  `@sproutsocial/seeds-react-popout` is promoted from a dev dependency to a
+  runtime dependency.
+
 ## 0.3.1
 
 ### Patch Changes

package/dist/esm/index.js

@@ -105,7 +105,8 @@ var TreeRoot = styled.ul`
   margin: 0;
   padding: 0;
   font-family: ${({ theme }) => theme.fontFamily};
-  ${({ theme }) => theme.typography[300]}
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  line-height: ${({ theme }) => theme.typography[200].lineHeight};
   color: ${({ theme }) => theme.colors.text.body};
 `;
 var TreeItemRow = styled.div`
@@ -113,7 +114,7 @@ var TreeItemRow = styled.div`
   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]})`};
+  padding-left: ${({ theme, $level }) => `calc(${theme.space[300]} + ${$level - 1} * ${theme.space[400]})`};
   border-radius: ${({ theme }) => theme.radii[400]};
   cursor: pointer;
   user-select: none;
@@ -683,7 +684,13 @@ 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]};
+  flex: 1;
+  min-height: 0;
+`;
+var SearchSection = styled2.div`
+  padding: ${({ theme }) => theme.space[300]};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.container.border.base};
+  flex-shrink: 0;
 `;
 var InputGroup = styled2.div`
   display: flex;
@@ -691,8 +698,8 @@ var InputGroup = styled2.div`
   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};
+  border: 1px solid ${({ theme }) => theme.colors.container.border.base};
+  background: ${({ theme }) => theme.colors.container.background.base};
   color: ${({ theme }) => theme.colors.icon.base};
 
   &:focus-within {
@@ -705,18 +712,26 @@ var ComboboxInput = styled2.input`
   background: transparent;
   outline: none;
   font-family: ${({ theme }) => theme.fontFamily};
-  ${({ theme }) => theme.typography[300]}
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  line-height: ${({ theme }) => theme.typography[200].lineHeight};
   color: ${({ theme }) => theme.colors.text.body};
 
   &::placeholder {
     color: ${({ theme }) => theme.colors.text.subtext};
   }
 `;
+var ListSection = styled2.div`
+  padding: ${({ theme }) => theme.space[200]};
+  overflow: auto;
+  flex: 1;
+  min-height: 0;
+`;
 var EmptyState = styled2.div`
-  padding: ${({ theme }) => theme.space[400]};
+  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[350]}`};
   text-align: center;
   color: ${({ theme }) => theme.colors.text.subtext};
-  ${({ theme }) => theme.typography[300]}
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  line-height: ${({ theme }) => theme.typography[200].lineHeight};
 `;
 var NAV_KEYS = /* @__PURE__ */ new Set([
   "ArrowDown",
@@ -819,9 +834,17 @@ function TreeCombobox(props) {
       setFocusedId(result.nextFocusedId);
     }
   };
+  React3.useLayoutEffect(() => {
+    if (!focusedId) return;
+    const itemEl = findTreeItemEl(focusedId);
+    const row = itemEl?.querySelector("[data-treeitem-row]") ?? itemEl;
+    if (row && typeof row.scrollIntoView === "function") {
+      row.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
+  }, [focusedId]);
   const showEmpty = visibleItems.length === 0;
   return /* @__PURE__ */ jsxs2(Root, { className, children: [
-    /* @__PURE__ */ jsxs2(InputGroup, { children: [
+    /* @__PURE__ */ jsx3(SearchSection, { children: /* @__PURE__ */ jsxs2(InputGroup, { children: [
       /* @__PURE__ */ jsx3(Icon2, { name: "magnifying-glass-outline", size: "small", "aria-hidden": true }),
       /* @__PURE__ */ jsx3(
         ComboboxInput,
@@ -842,29 +865,31 @@ function TreeCombobox(props) {
           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
+    ] }) }),
+    /* @__PURE__ */ jsxs2(ListSection, { children: [
+      /* @__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 }) {
@@ -879,7 +904,339 @@ function TreeNode({ item }) {
     }
   );
 }
+
+// src/SingleTreeSearchableSelect.tsx
+import * as React5 from "react";
+
+// src/Common/TreeSearchableSelectBase.tsx
+import * as React4 from "react";
+import styled3, { css as css2 } from "styled-components";
+import { Icon as Icon3 } from "@sproutsocial/seeds-react-icon";
+import { focusRing as focusRing2 } from "@sproutsocial/seeds-react-mixins";
+import { Popout } from "@sproutsocial/seeds-react-popout/v2";
+
+// src/Common/flattenTree.ts
+function flattenTreeItems(items) {
+  const out = [];
+  const walk = (nodes) => {
+    for (const node of nodes) {
+      out.push(node);
+      if (node.children) walk(node.children);
+    }
+  };
+  walk(items);
+  return out;
+}
+
+// src/Common/TreeSearchableSelectBase.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var invalidStyles = css2`
+  border-color: ${({ theme }) => theme.colors.form.border.error};
+`;
+var Trigger = styled3.button`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.space[300]};
+  padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[350]};
+  min-width: 160px;
+  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  border: 1px solid ${({ theme }) => theme.colors.form.border.base};
+  background: ${({ theme }) => theme.colors.form.background.base};
+  font-family: ${({ theme }) => theme.fontFamily};
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  line-height: ${({ theme }) => theme.typography[200].lineHeight};
+  color: ${({ theme }) => theme.colors.text.body};
+  text-align: left;
+  cursor: default;
+  outline: none;
+  user-select: none;
+  transition: border-color ${({ theme }) => theme.duration.fast}
+      ${({ theme }) => theme.easing.ease_in},
+    box-shadow ${({ theme }) => theme.duration.fast}
+      ${({ theme }) => theme.easing.ease_in};
+
+  &:focus-visible {
+    ${focusRing2}
+  }
+
+  &[aria-disabled="true"],
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  ${({ $isInvalid }) => $isInvalid && invalidStyles}
+`;
+var TriggerLabel = styled3.span`
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var PlaceholderText = styled3.span`
+  color: ${({ theme }) => theme.colors.text.subtext};
+`;
+var Chevron = styled3.span`
+  display: inline-flex;
+  align-items: center;
+  color: ${({ theme }) => theme.colors.icon.base};
+  transition: transform ${({ theme }) => theme.duration.fast}
+    ${({ theme }) => theme.easing.ease_in};
+  ${({ $open }) => $open && css2`
+      transform: rotate(-180deg);
+    `}
+`;
+var HiddenInput = styled3.input`
+  clip-path: inset(50%);
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  position: fixed;
+  top: 0;
+  left: 0;
+`;
+var PopoutContent = styled3.div`
+  display: flex;
+  flex-direction: column;
+  /* Width sizes to content within bounds: at least the trigger width, never */
+  /* wider than the available viewport space. Shallow popups stay flush with */
+  /* the trigger; deeply nested trees expand horizontally as needed. */
+  min-width: var(--radix-popover-trigger-width);
+  max-width: var(--radix-popper-available-width);
+  /* Height caps at 400px (or available viewport) so a popup with many */
+  /* expanded branches scrolls vertically instead of growing off-screen. */
+  max-height: min(var(--radix-popper-available-height), 400px);
+  width: ${({ $width }) => $width === void 0 ? "max-content" : typeof $width === "number" ? `${$width}px` : $width};
+`;
+var MAX_INLINE_LABELS = 3;
+function defaultRenderTrigger(selected, placeholder) {
+  if (selected.length === 0) {
+    return /* @__PURE__ */ jsx4(PlaceholderText, { children: placeholder });
+  }
+  if (selected.length <= MAX_INLINE_LABELS) {
+    return selected.map((s) => s.label).join(", ");
+  }
+  return `${selected.length} selected`;
+}
+function TreeSearchableSelectBase(props) {
+  const {
+    items,
+    selectionMode,
+    selectableNodes,
+    selectedIds,
+    onSelectedIdsChange,
+    placeholder = "Select...",
+    searchPlaceholder = "Search...",
+    emptyText = "No results found.",
+    renderTrigger,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    closeOnSelect,
+    disabled,
+    isInvalid,
+    required,
+    readOnly,
+    name,
+    fullWidth = true,
+    contentWidth,
+    renderSelectionIndicator,
+    defaultExpanded,
+    expanded,
+    onExpandedChange,
+    id,
+    className
+  } = props;
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
+  const ariaDescribedBy = props["aria-describedby"];
+  const isOpenControlled = openProp !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = React4.useState(defaultOpen);
+  const open = isOpenControlled ? !!openProp : uncontrolledOpen;
+  const setOpen = (next) => {
+    if (!isOpenControlled) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
+  const [query, setQuery] = React4.useState("");
+  const reactId = React4.useId();
+  const popupId = `tree-select-popup-${reactId.replace(/:/g, "")}`;
+  const flat = React4.useMemo(() => flattenTreeItems(items), [items]);
+  const selectedItems = React4.useMemo(() => {
+    const order = new Map(flat.map((it, i) => [it.id, i]));
+    return selectedIds.map((id2) => flat.find((it) => it.id === id2)).filter((it) => it != null).sort((a, b) => (order.get(a.id) ?? 0) - (order.get(b.id) ?? 0));
+  }, [flat, selectedIds]);
+  const handleSelectionChange = (next) => {
+    onSelectedIdsChange(next);
+    if (closeOnSelect) {
+      setOpen(false);
+    }
+  };
+  const triggerContent = renderTrigger ? renderTrigger(selectedItems) : defaultRenderTrigger(selectedItems, placeholder);
+  const isMulti = selectionMode === "multiple";
+  const primaryInputName = isMulti ? void 0 : name;
+  const primaryInputId = id && primaryInputName == null ? `${id}-hidden-input` : void 0;
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx4(
+      HiddenInput,
+      {
+        type: "text",
+        id: primaryInputId,
+        name: primaryInputName,
+        value: isMulti ? "" : selectedIds[0] ?? "",
+        onChange: () => {
+        },
+        disabled,
+        required: required && !isMulti,
+        readOnly,
+        tabIndex: -1,
+        "aria-hidden": "true"
+      }
+    ),
+    isMulti && name ? selectedIds.map((selectedId) => /* @__PURE__ */ jsx4(
+      "input",
+      {
+        type: "hidden",
+        name,
+        value: selectedId
+      },
+      selectedId
+    )) : null,
+    /* @__PURE__ */ jsx4(
+      Popout,
+      {
+        open,
+        onOpenChange: setOpen,
+        side: "bottom",
+        align: "start",
+        style: { padding: 0 },
+        onEscapeKeyDown: (event) => {
+          if (query.length > 0) {
+            event.preventDefault();
+          }
+        },
+        content: /* @__PURE__ */ jsx4(PopoutContent, { id: popupId, $width: contentWidth, children: /* @__PURE__ */ jsx4(
+          TreeCombobox,
+          {
+            "aria-label": "Search",
+            items,
+            placeholder: searchPlaceholder,
+            emptyText,
+            query,
+            onQueryChange: setQuery,
+            selectionMode,
+            selectableNodes,
+            selected: selectedIds,
+            onSelectionChange: handleSelectionChange,
+            renderSelectionIndicator,
+            defaultExpanded,
+            expanded,
+            onExpandedChange
+          }
+        ) }),
+        children: /* @__PURE__ */ jsxs3(
+          Trigger,
+          {
+            type: "button",
+            id,
+            className,
+            $isInvalid: isInvalid,
+            $fullWidth: fullWidth,
+            disabled,
+            role: "combobox",
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            "aria-controls": open ? popupId : void 0,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": ariaDescribedBy,
+            "aria-invalid": isInvalid || void 0,
+            "aria-required": required || void 0,
+            children: [
+              /* @__PURE__ */ jsx4(TriggerLabel, { children: triggerContent }),
+              /* @__PURE__ */ jsx4(Chevron, { $open: open, "aria-hidden": true, children: /* @__PURE__ */ jsx4(Icon3, { name: "chevron-down-outline", size: "small" }) })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/SingleTreeSearchableSelect.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function SingleTreeSearchableSelect(props) {
+  const {
+    selectedItemId: selectedItemIdProp,
+    defaultSelectedItemId = null,
+    onSelectedItemIdChange,
+    ...rest
+  } = props;
+  const isControlled = selectedItemIdProp !== void 0;
+  const [internalId, setInternalId] = React5.useState(
+    defaultSelectedItemId
+  );
+  const selectedItemId = isControlled ? selectedItemIdProp ?? null : internalId;
+  const selectedIds = React5.useMemo(
+    () => selectedItemId ? [selectedItemId] : [],
+    [selectedItemId]
+  );
+  const handleSelectedIdsChange = (ids) => {
+    const next = ids[0] ?? null;
+    if (!isControlled) setInternalId(next);
+    onSelectedItemIdChange?.(next);
+  };
+  return /* @__PURE__ */ jsx5(
+    TreeSearchableSelectBase,
+    {
+      ...rest,
+      selectionMode: "single",
+      selectedIds,
+      onSelectedIdsChange: handleSelectedIdsChange,
+      closeOnSelect: true
+    }
+  );
+}
+
+// src/MultiTreeSearchableSelect.tsx
+import * as React6 from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function MultiTreeSearchableSelect(props) {
+  const {
+    selectedItemIds: selectedItemIdsProp,
+    defaultSelectedItemIds,
+    onSelectedItemIdsChange,
+    ...rest
+  } = props;
+  const isControlled = selectedItemIdsProp !== void 0;
+  const [internalIds, setInternalIds] = React6.useState(() => [
+    ...defaultSelectedItemIds ?? []
+  ]);
+  const selectedIds = isControlled ? selectedItemIdsProp ?? [] : internalIds;
+  const handleSelectedIdsChange = (ids) => {
+    if (!isControlled) setInternalIds(ids);
+    onSelectedItemIdsChange?.(ids);
+  };
+  return /* @__PURE__ */ jsx6(
+    TreeSearchableSelectBase,
+    {
+      ...rest,
+      selectionMode: "multiple",
+      selectedIds,
+      onSelectedIdsChange: handleSelectedIdsChange,
+      closeOnSelect: false
+    }
+  );
+}
 export {
+  MultiTreeSearchableSelect,
+  SingleTreeSearchableSelect,
   Tree,
   TreeCombobox,
   TreeItem