@sproutsocial/seeds-react-tree 0.4.1 → 0.4.4

package/dist/index.js

@@ -138,105 +138,23 @@ function useTreeState(opts) {
   };
 }
 
-// src/TreeStyles.tsx
-var import_styled_components = __toESM(require("styled-components"));
-var TreeRoot = import_styled_components.default.ul`
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  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};
-`;
-var TreeItemRow = import_styled_components.default.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[400]})`};
-  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 && import_styled_components.css`
-      background: ${theme.colors.listItem.background.hover};
-      font-weight: ${theme.fontWeights.semibold};
-    `}
-
-  ${({ $disabled }) => $disabled && import_styled_components.css`
-      opacity: 0.4;
-      cursor: not-allowed;
-      pointer-events: none;
-    `}
-`;
-var TreeItemEl = import_styled_components.default.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 = import_styled_components.default.ul`
-  list-style: none;
-  margin: 0;
-  padding: 0;
-`;
-var TreeItemLabel = import_styled_components.default.span`
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-var TreeItemIcon = import_styled_components.default.span`
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-`;
-var TreeItemChevron = import_styled_components.default.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/cn.ts
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
   }
-`;
+  return classes.join(" ");
+}
 
 // src/Tree.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -325,12 +243,12 @@ var Tree = React.forwardRef(function Tree2(props, forwardedRef) {
     ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TreeContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TreeItemContext.Provider, { value: { level: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    TreeRoot,
+    "ul",
     {
       ref: innerRef,
       role: "tree",
       id,
-      className,
+      className: cn("seeds-tree", className),
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
       "aria-multiselectable": selectionMode === "multiple" ? true : void 0,
@@ -613,9 +531,10 @@ function TreeItem(props) {
   const groupId = `${id}__group`;
   const labelId = `${id}__label`;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    TreeItemEl,
+    "li",
     {
       ref: itemRef,
+      className: "seeds-tree-item",
       id: treeItemDomId(id),
       role: "treeitem",
       "data-treeitem-id": id,
@@ -654,26 +573,32 @@ function TreeItem(props) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          TreeItemRow,
+          "div",
           {
             "data-treeitem-row": true,
-            $level: level,
-            $selected: isSelected,
-            $disabled: disabled,
+            className: cn("seeds-tree-item-row", {
+              selected: isSelected,
+              disabled
+            }),
+            style: { "--tree-level": level },
             children: [
               ctx.renderSelectionIndicator && !(ctx.selectableNodes === "leaves" && hasChildren) ? ctx.renderSelectionIndicator({
                 selected: isSelected,
                 disabled,
                 selectionMode
               }) : null,
-              icon != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TreeItemIcon, { "aria-hidden": true, children: icon }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TreeItemLabel, { id: labelId, children: label }),
+              icon != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "seeds-tree-item-icon", "aria-hidden": true, children: icon }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "seeds-tree-item-label", id: labelId, children: label }),
               hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                TreeItemChevron,
+                "button",
                 {
+                  type: "button",
+                  tabIndex: -1,
                   "data-tree-chevron": true,
                   "aria-hidden": true,
-                  $expanded: isExpanded,
+                  className: cn("seeds-tree-item-chevron", {
+                    expanded: isExpanded
+                  }),
                   onClick: handleChevronClick,
                   children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon.Icon, { name: "chevron-down-outline", size: "small" })
                 }
@@ -681,7 +606,16 @@ function TreeItem(props) {
             ]
           }
         ),
-        hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TreeItemGroup, { role: "group", id: groupId, hidden: !isExpanded, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TreeItemContext.Provider, { value: { level: level + 1 }, children }) }) : null
+        hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "ul",
+          {
+            className: "seeds-tree-item-group",
+            role: "group",
+            id: groupId,
+            hidden: !isExpanded,
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TreeItemContext.Provider, { value: { level: level + 1 }, children })
+          }
+        ) : null
       ]
     }
   );
@@ -690,9 +624,7 @@ TreeItem.displayName = "TreeItem";
 
 // src/TreeCombobox.tsx
 var React3 = __toESM(require("react"));
-var import_styled_components2 = __toESM(require("styled-components"));
 var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
-var import_seeds_react_mixins = require("@sproutsocial/seeds-react-mixins");
 
 // src/Common/filterTree.ts
 function filterTree(items, query) {
@@ -721,58 +653,6 @@ function filterTree(items, query) {
 
 // src/TreeCombobox.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Root = import_styled_components2.default.div`
-  display: flex;
-  flex-direction: column;
-  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;
-  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.container.border.base};
-  background: ${({ theme }) => theme.colors.container.background.base};
-  color: ${({ theme }) => theme.colors.icon.base};
-
-  &:focus-within {
-    ${import_seeds_react_mixins.focusRing}
-  }
-`;
-var ComboboxInput = import_styled_components2.default.input`
-  flex: 1;
-  border: none;
-  background: transparent;
-  outline: none;
-  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};
-
-  &::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[300]} ${theme.space[350]}`};
-  text-align: center;
-  color: ${({ theme }) => theme.colors.text.subtext};
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
-  line-height: ${({ theme }) => theme.typography[200].lineHeight};
-`;
 var NAV_KEYS = /* @__PURE__ */ new Set([
   "ArrowDown",
   "ArrowUp",
@@ -883,12 +763,13 @@ function TreeCombobox(props) {
     }
   }, [focusedId]);
   const showEmpty = visibleItems.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Root, { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SearchSection, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(InputGroup, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("seeds-tree-combobox", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "seeds-tree-combobox-search", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "seeds-tree-combobox-input-group", 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,
+        "input",
         {
+          className: "seeds-tree-combobox-input",
           type: "text",
           role: "combobox",
           id,
@@ -906,7 +787,7 @@ function TreeCombobox(props) {
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(ListSection, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "seeds-tree-combobox-list", children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         Tree,
         {
@@ -928,7 +809,15 @@ function TreeCombobox(props) {
           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
+      showEmpty ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          className: "seeds-tree-combobox-empty",
+          role: "status",
+          "aria-live": "polite",
+          children: emptyText
+        }
+      ) : null
     ] })
   ] });
 }
@@ -950,9 +839,7 @@ 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
@@ -970,95 +857,14 @@ function flattenTreeItems(items) {
 
 // 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 popoutWidth(width) {
+  if (width === void 0) return void 0;
+  return typeof width === "number" ? `${width}px` : width;
+}
 function defaultRenderTrigger(selected, placeholder) {
   if (selected.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PlaceholderText, { children: placeholder });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "seeds-tree-select-placeholder", children: placeholder });
   }
   if (selected.length <= MAX_INLINE_LABELS) {
     return selected.map((s) => s.label).join(", ");
@@ -1124,8 +930,9 @@ function TreeSearchableSelectBase(props) {
   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,
+      "input",
       {
+        className: "seeds-tree-select-hidden-input",
         type: "text",
         id: primaryInputId,
         name: primaryInputName,
@@ -1161,33 +968,44 @@ function TreeSearchableSelectBase(props) {
             event.preventDefault();
           }
         },
-        content: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PopoutContent, { id: popupId, $width: contentWidth, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          TreeCombobox,
+        content: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
           {
-            "aria-label": "Search",
-            items,
-            placeholder: searchPlaceholder,
-            emptyText,
-            query,
-            onQueryChange: setQuery,
-            selectionMode,
-            selectableNodes,
-            selected: selectedIds,
-            onSelectionChange: handleSelectionChange,
-            renderSelectionIndicator,
-            defaultExpanded,
-            expanded,
-            onExpandedChange
+            className: "seeds-tree-select-popout",
+            id: popupId,
+            style: {
+              "--tree-select-width": popoutWidth(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,
+          "button",
           {
+            className: cn("seeds-tree-select-trigger", className, {
+              "full-width": fullWidth,
+              invalid: !!isInvalid
+            }),
             type: "button",
             id,
-            className,
-            $isInvalid: isInvalid,
-            $fullWidth: fullWidth,
             disabled,
             role: "combobox",
             "aria-haspopup": "dialog",
@@ -1199,8 +1017,15 @@ function TreeSearchableSelectBase(props) {
             "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" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "seeds-tree-select-trigger-label", children: triggerContent }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "span",
+                {
+                  className: cn("seeds-tree-select-chevron", { open }),
+                  "aria-hidden": true,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_icon3.Icon, { name: "chevron-down-outline", size: "small" })
+                }
+              )
             ]
           }
         )