@sproutsocial/seeds-react-tree 0.4.1 → 0.4.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 yarn run v1.22.22
-$ tsup --dts
+$ tsup --dts && cp src/tree.css dist/tree.css
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-ESM dist/esm/index.js     38.14 KB
-ESM dist/esm/index.js.map 85.67 KB
-ESM ⚡️ Build success in 56ms
-CJS dist/index.js     41.77 KB
-CJS dist/index.js.map 86.20 KB
-CJS ⚡️ Build success in 56ms
+CJS dist/index.js     35.40 KB
+CJS dist/index.js.map 75.93 KB
+CJS ⚡️ Build success in 23ms
+ESM dist/esm/index.js     32.47 KB
+ESM dist/esm/index.js.map 75.54 KB
+ESM ⚡️ Build success in 23ms
 DTS Build start
-DTS ⚡️ Build success in 1810ms
+DTS ⚡️ Build success in 982ms
 DTS dist/index.d.ts  7.37 KB
 DTS dist/index.d.mts 7.37 KB
-Done in 2.54s.
+Done in 1.71s.

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @sproutsocial/seeds-react-tree
 
+## 0.4.3
+
+### Patch Changes
+
+- 5172641: Migrate `seeds-react-tree` from styled-components to Tailwind/CSS classes.
+  `Tree`, `TreeItem`, `TreeCombobox`, and the Single/Multi `TreeSearchableSelect`
+  components now render Seeds CSS classes (`tree.css`, scoped under
+  `@layer components`) instead of styled-components. Public component APIs,
+  props, DOM structure, and accessibility behavior are unchanged. Consumers pick
+  up the styles via `@sproutsocial/racine/css/components` (or the package's
+  `./dist/tree.css` export); nothing needs to change in app code.
+
+## 0.4.2
+
+### Patch Changes
+
+- Updated dependencies [85f9728]
+- Updated dependencies [fa7d859]
+  - @sproutsocial/seeds-react-theme@4.2.0
+  - @sproutsocial/seeds-react-icon@2.4.2
+  - @sproutsocial/seeds-react-mixins@4.3.9
+  - @sproutsocial/seeds-react-popout@2.5.11
+
 ## 0.4.1
 
 ### Patch Changes

package/dist/esm/index.js

@@ -98,105 +98,23 @@ function useTreeState(opts) {
   };
 }
 
-// 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};
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
-  line-height: ${({ theme }) => theme.typography[200].lineHeight};
-  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[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 && 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/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
 import { jsx } from "react/jsx-runtime";
@@ -285,12 +203,12 @@ var Tree = React.forwardRef(function Tree2(props, forwardedRef) {
     ]
   );
   return /* @__PURE__ */ jsx(TreeContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(TreeItemContext.Provider, { value: { level: 1 }, children: /* @__PURE__ */ 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,
@@ -573,9 +491,10 @@ function TreeItem(props) {
   const groupId = `${id}__group`;
   const labelId = `${id}__label`;
   return /* @__PURE__ */ jsxs(
-    TreeItemEl,
+    "li",
     {
       ref: itemRef,
+      className: "seeds-tree-item",
       id: treeItemDomId(id),
       role: "treeitem",
       "data-treeitem-id": id,
@@ -614,26 +533,32 @@ function TreeItem(props) {
       },
       children: [
         /* @__PURE__ */ 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__ */ jsx2(TreeItemIcon, { "aria-hidden": true, children: icon }) : null,
-              /* @__PURE__ */ jsx2(TreeItemLabel, { id: labelId, children: label }),
+              icon != null ? /* @__PURE__ */ jsx2("span", { className: "seeds-tree-item-icon", "aria-hidden": true, children: icon }) : null,
+              /* @__PURE__ */ jsx2("span", { className: "seeds-tree-item-label", id: labelId, children: label }),
               hasChildren ? /* @__PURE__ */ jsx2(
-                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__ */ jsx2(Icon, { name: "chevron-down-outline", size: "small" })
                 }
@@ -641,7 +566,16 @@ function TreeItem(props) {
             ]
           }
         ),
-        hasChildren ? /* @__PURE__ */ jsx2(TreeItemGroup, { role: "group", id: groupId, hidden: !isExpanded, children: /* @__PURE__ */ jsx2(TreeItemContext.Provider, { value: { level: level + 1 }, children }) }) : null
+        hasChildren ? /* @__PURE__ */ jsx2(
+          "ul",
+          {
+            className: "seeds-tree-item-group",
+            role: "group",
+            id: groupId,
+            hidden: !isExpanded,
+            children: /* @__PURE__ */ jsx2(TreeItemContext.Provider, { value: { level: level + 1 }, children })
+          }
+        ) : null
       ]
     }
   );
@@ -650,9 +584,7 @@ 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) {
@@ -681,58 +613,6 @@ function filterTree(items, query) {
 
 // src/TreeCombobox.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var Root = styled2.div`
-  display: flex;
-  flex-direction: column;
-  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;
-  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 {
-    ${focusRing}
-  }
-`;
-var ComboboxInput = styled2.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 = styled2.div`
-  padding: ${({ theme }) => theme.space[200]};
-  overflow: auto;
-  flex: 1;
-  min-height: 0;
-`;
-var EmptyState = styled2.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",
@@ -843,12 +723,13 @@ function TreeCombobox(props) {
     }
   }, [focusedId]);
   const showEmpty = visibleItems.length === 0;
-  return /* @__PURE__ */ jsxs2(Root, { className, children: [
-    /* @__PURE__ */ jsx3(SearchSection, { children: /* @__PURE__ */ jsxs2(InputGroup, { children: [
+  return /* @__PURE__ */ jsxs2("div", { className: cn("seeds-tree-combobox", className), children: [
+    /* @__PURE__ */ jsx3("div", { className: "seeds-tree-combobox-search", children: /* @__PURE__ */ jsxs2("div", { className: "seeds-tree-combobox-input-group", children: [
       /* @__PURE__ */ jsx3(Icon2, { name: "magnifying-glass-outline", size: "small", "aria-hidden": true }),
       /* @__PURE__ */ jsx3(
-        ComboboxInput,
+        "input",
         {
+          className: "seeds-tree-combobox-input",
           type: "text",
           role: "combobox",
           id,
@@ -866,7 +747,7 @@ function TreeCombobox(props) {
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxs2(ListSection, { children: [
+    /* @__PURE__ */ jsxs2("div", { className: "seeds-tree-combobox-list", children: [
       /* @__PURE__ */ jsx3(
         Tree,
         {
@@ -888,7 +769,15 @@ function TreeCombobox(props) {
           children: visibleItems.map((item) => /* @__PURE__ */ jsx3(TreeNode, { item }, item.id))
         }
       ),
-      showEmpty ? /* @__PURE__ */ jsx3(EmptyState, { role: "status", "aria-live": "polite", children: emptyText }) : null
+      showEmpty ? /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: "seeds-tree-combobox-empty",
+          role: "status",
+          "aria-live": "polite",
+          children: emptyText
+        }
+      ) : null
     ] })
   ] });
 }
@@ -910,9 +799,7 @@ 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
@@ -930,95 +817,14 @@ function flattenTreeItems(items) {
 
 // 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 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__ */ jsx4(PlaceholderText, { children: placeholder });
+    return /* @__PURE__ */ jsx4("span", { className: "seeds-tree-select-placeholder", children: placeholder });
   }
   if (selected.length <= MAX_INLINE_LABELS) {
     return selected.map((s) => s.label).join(", ");
@@ -1084,8 +890,9 @@ function TreeSearchableSelectBase(props) {
   const primaryInputId = id && primaryInputName == null ? `${id}-hidden-input` : void 0;
   return /* @__PURE__ */ jsxs3(Fragment2, { children: [
     /* @__PURE__ */ jsx4(
-      HiddenInput,
+      "input",
       {
+        className: "seeds-tree-select-hidden-input",
         type: "text",
         id: primaryInputId,
         name: primaryInputName,
@@ -1121,33 +928,44 @@ function TreeSearchableSelectBase(props) {
             event.preventDefault();
           }
         },
-        content: /* @__PURE__ */ jsx4(PopoutContent, { id: popupId, $width: contentWidth, children: /* @__PURE__ */ jsx4(
-          TreeCombobox,
+        content: /* @__PURE__ */ jsx4(
+          "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__ */ 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,
+          "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",
@@ -1159,8 +977,15 @@ function TreeSearchableSelectBase(props) {
             "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" }) })
+              /* @__PURE__ */ jsx4("span", { className: "seeds-tree-select-trigger-label", children: triggerContent }),
+              /* @__PURE__ */ jsx4(
+                "span",
+                {
+                  className: cn("seeds-tree-select-chevron", { open }),
+                  "aria-hidden": true,
+                  children: /* @__PURE__ */ jsx4(Icon3, { name: "chevron-down-outline", size: "small" })
+                }
+              )
             ]
           }
         )