@sproutsocial/seeds-react-tree 0.3.1 → 0.4.0

package/dist/index.js

@@ -30,6 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  MultiTreeSearchableSelect: () => MultiTreeSearchableSelect,
+  SingleTreeSearchableSelect: () => SingleTreeSearchableSelect,
   Tree: () => Tree,
   TreeCombobox: () => TreeCombobox,
   TreeItem: () => TreeItem
@@ -143,7 +145,8 @@ var TreeRoot = import_styled_components.default.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 = import_styled_components.default.div`
@@ -151,7 +154,7 @@ var TreeItemRow = import_styled_components.default.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;
@@ -721,7 +724,13 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var Root = import_styled_components2.default.div`
   display: flex;
   flex-direction: column;
-  gap: ${({ theme }) => theme.space[300]};
+  flex: 1;
+  min-height: 0;
+`;
+var SearchSection = import_styled_components2.default.div`
+  padding: ${({ theme }) => theme.space[300]};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.container.border.base};
+  flex-shrink: 0;
 `;
 var InputGroup = import_styled_components2.default.div`
   display: flex;
@@ -729,8 +738,8 @@ var InputGroup = import_styled_components2.default.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 {
@@ -743,18 +752,26 @@ var ComboboxInput = import_styled_components2.default.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 = import_styled_components2.default.div`
+  padding: ${({ theme }) => theme.space[200]};
+  overflow: auto;
+  flex: 1;
+  min-height: 0;
+`;
 var EmptyState = import_styled_components2.default.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",
@@ -857,9 +874,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__ */ (0, import_jsx_runtime3.jsxs)(Root, { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(InputGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SearchSection, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(InputGroup, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_icon2.Icon, { name: "magnifying-glass-outline", size: "small", "aria-hidden": true }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         ComboboxInput,
@@ -880,29 +905,31 @@ function TreeCombobox(props) {
           onKeyDown: handleInputKeyDown
         }
       )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      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__ */ (0, import_jsx_runtime3.jsx)(TreeNode, { item }, item.id))
-      }
-    ),
-    showEmpty ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EmptyState, { role: "status", "aria-live": "polite", children: emptyText }) : null
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(ListSection, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        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__ */ (0, import_jsx_runtime3.jsx)(TreeNode, { item }, item.id))
+        }
+      ),
+      showEmpty ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EmptyState, { role: "status", "aria-live": "polite", children: emptyText }) : null
+    ] })
   ] });
 }
 function TreeNode({ item }) {
@@ -917,8 +944,340 @@ function TreeNode({ item }) {
     }
   );
 }
+
+// src/SingleTreeSearchableSelect.tsx
+var React5 = __toESM(require("react"));
+
+// src/Common/TreeSearchableSelectBase.tsx
+var React4 = __toESM(require("react"));
+var import_styled_components3 = __toESM(require("styled-components"));
+var import_seeds_react_icon3 = require("@sproutsocial/seeds-react-icon");
+var import_seeds_react_mixins2 = require("@sproutsocial/seeds-react-mixins");
+var import_v2 = require("@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
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var invalidStyles = import_styled_components3.css`
+  border-color: ${({ theme }) => theme.colors.form.border.error};
+`;
+var Trigger = import_styled_components3.default.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 {
+    ${import_seeds_react_mixins2.focusRing}
+  }
+
+  &[aria-disabled="true"],
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  ${({ $isInvalid }) => $isInvalid && invalidStyles}
+`;
+var TriggerLabel = import_styled_components3.default.span`
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var PlaceholderText = import_styled_components3.default.span`
+  color: ${({ theme }) => theme.colors.text.subtext};
+`;
+var Chevron = import_styled_components3.default.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 && import_styled_components3.css`
+      transform: rotate(-180deg);
+    `}
+`;
+var HiddenInput = import_styled_components3.default.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 = import_styled_components3.default.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__ */ (0, import_jsx_runtime4.jsx)(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__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      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__ */ (0, import_jsx_runtime4.jsx)(
+      "input",
+      {
+        type: "hidden",
+        name,
+        value: selectedId
+      },
+      selectedId
+    )) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_v2.Popout,
+      {
+        open,
+        onOpenChange: setOpen,
+        side: "bottom",
+        align: "start",
+        style: { padding: 0 },
+        onEscapeKeyDown: (event) => {
+          if (query.length > 0) {
+            event.preventDefault();
+          }
+        },
+        content: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PopoutContent, { id: popupId, $width: contentWidth, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          TreeCombobox,
+          {
+            "aria-label": "Search",
+            items,
+            placeholder: searchPlaceholder,
+            emptyText,
+            query,
+            onQueryChange: setQuery,
+            selectionMode,
+            selectableNodes,
+            selected: selectedIds,
+            onSelectionChange: handleSelectionChange,
+            renderSelectionIndicator,
+            defaultExpanded,
+            expanded,
+            onExpandedChange
+          }
+        ) }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          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__ */ (0, import_jsx_runtime4.jsx)(TriggerLabel, { children: triggerContent }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chevron, { $open: open, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_icon3.Icon, { name: "chevron-down-outline", size: "small" }) })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/SingleTreeSearchableSelect.tsx
+var import_jsx_runtime5 = require("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__ */ (0, import_jsx_runtime5.jsx)(
+    TreeSearchableSelectBase,
+    {
+      ...rest,
+      selectionMode: "single",
+      selectedIds,
+      onSelectedIdsChange: handleSelectedIdsChange,
+      closeOnSelect: true
+    }
+  );
+}
+
+// src/MultiTreeSearchableSelect.tsx
+var React6 = __toESM(require("react"));
+var import_jsx_runtime6 = require("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__ */ (0, import_jsx_runtime6.jsx)(
+    TreeSearchableSelectBase,
+    {
+      ...rest,
+      selectionMode: "multiple",
+      selectedIds,
+      onSelectedIdsChange: handleSelectedIdsChange,
+      closeOnSelect: false
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  MultiTreeSearchableSelect,
+  SingleTreeSearchableSelect,
   Tree,
   TreeCombobox,
   TreeItem