@sproutsocial/seeds-react-tree 0.4.0 → 0.4.3

package/src/TreeCombobox.tsx

@@ -1,71 +1,12 @@
 import * as React from "react";
-import styled from "styled-components";
 import { Icon } from "@sproutsocial/seeds-react-icon";
-import { focusRing } from "@sproutsocial/seeds-react-mixins";
 import { Tree, type TreeProps } from "./Tree";
 import { TreeItem } from "./TreeItem";
+import { cn } from "./cn";
 import { filterTree } from "./Common/filterTree";
 import { computeTreeNavigation, treeItemDomId } from "./Common/treeNavigation";
 import type { TreeItemData } from "./Common/types";
 
-const Root = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-`;
-
-const SearchSection = styled.div`
-  padding: ${({ theme }) => theme.space[300]};
-  border-bottom: 1px solid ${({ theme }) => theme.colors.container.border.base};
-  flex-shrink: 0;
-`;
-
-const InputGroup = styled.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}
-  }
-`;
-
-const ComboboxInput = styled.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};
-  }
-`;
-
-const ListSection = styled.div`
-  padding: ${({ theme }) => theme.space[200]};
-  overflow: auto;
-  flex: 1;
-  min-height: 0;
-`;
-
-const EmptyState = styled.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};
-`;
-
 const NAV_KEYS = new Set([
   "ArrowDown",
   "ArrowUp",
@@ -256,11 +197,12 @@ export function TreeCombobox(props: TreeComboboxProps) {
   const showEmpty = visibleItems.length === 0;
 
   return (
-    <Root className={className}>
-      <SearchSection>
-        <InputGroup>
+    <div className={cn("seeds-tree-combobox", className)}>
+      <div className="seeds-tree-combobox-search">
+        <div className="seeds-tree-combobox-input-group">
           <Icon name="magnifying-glass-outline" size="small" aria-hidden />
-          <ComboboxInput
+          <input
+            className="seeds-tree-combobox-input"
             type="text"
             role="combobox"
             id={id}
@@ -278,10 +220,10 @@ export function TreeCombobox(props: TreeComboboxProps) {
             onChange={(e) => setQuery(e.target.value)}
             onKeyDown={handleInputKeyDown}
           />
-        </InputGroup>
-      </SearchSection>
+        </div>
+      </div>
 
-      <ListSection>
+      <div className="seeds-tree-combobox-list">
         <Tree
           ref={treeRef}
           aria-label={ariaLabel}
@@ -305,12 +247,16 @@ export function TreeCombobox(props: TreeComboboxProps) {
         </Tree>
 
         {showEmpty ? (
-          <EmptyState role="status" aria-live="polite">
+          <div
+            className="seeds-tree-combobox-empty"
+            role="status"
+            aria-live="polite"
+          >
             {emptyText}
-          </EmptyState>
+          </div>
         ) : null}
-      </ListSection>
-    </Root>
+      </div>
+    </div>
   );
 }
 

package/src/TreeItem.tsx

@@ -3,14 +3,7 @@ import { Icon } from "@sproutsocial/seeds-react-icon";
 import { TreeItemContext, useTreeContext } from "./Common/treeContext";
 import { useTreeKeyboard } from "./Common/useTreeKeyboard";
 import { treeItemDomId } from "./Common/treeNavigation";
-import {
-  TreeItemChevron,
-  TreeItemEl,
-  TreeItemGroup,
-  TreeItemIcon,
-  TreeItemLabel,
-  TreeItemRow,
-} from "./TreeStyles";
+import { cn } from "./cn";
 
 export type TreeItemProps = {
   id: string;
@@ -127,8 +120,9 @@ export function TreeItem(props: TreeItemProps) {
   const labelId = `${id}__label`;
 
   return (
-    <TreeItemEl
+    <li
       ref={itemRef}
+      className="seeds-tree-item"
       id={treeItemDomId(id)}
       role="treeitem"
       data-treeitem-id={id}
@@ -174,11 +168,13 @@ export function TreeItem(props: TreeItemProps) {
         if (ctx.focusedId !== id) ctx.setFocusedId(id);
       }}
     >
-      <TreeItemRow
+      <div
         data-treeitem-row
-        $level={level}
-        $selected={isSelected}
-        $disabled={disabled}
+        className={cn("seeds-tree-item-row", {
+          selected: isSelected,
+          disabled,
+        })}
+        style={{ "--tree-level": level } as React.CSSProperties}
       >
         {ctx.renderSelectionIndicator &&
         !(ctx.selectableNodes === "leaves" && hasChildren)
@@ -189,29 +185,44 @@ export function TreeItem(props: TreeItemProps) {
             })
           : null}
 
-        {icon != null ? <TreeItemIcon aria-hidden>{icon}</TreeItemIcon> : null}
-        <TreeItemLabel id={labelId}>{label}</TreeItemLabel>
+        {icon != null ? (
+          <span className="seeds-tree-item-icon" aria-hidden>
+            {icon}
+          </span>
+        ) : null}
+        <span className="seeds-tree-item-label" id={labelId}>
+          {label}
+        </span>
 
         {hasChildren ? (
-          <TreeItemChevron
+          <button
+            type="button"
+            tabIndex={-1}
             data-tree-chevron
             aria-hidden
-            $expanded={isExpanded}
+            className={cn("seeds-tree-item-chevron", {
+              expanded: isExpanded,
+            })}
             onClick={handleChevronClick}
           >
             <Icon name="chevron-down-outline" size="small" />
-          </TreeItemChevron>
+          </button>
         ) : null}
-      </TreeItemRow>
+      </div>
 
       {hasChildren ? (
-        <TreeItemGroup role="group" id={groupId} hidden={!isExpanded}>
+        <ul
+          className="seeds-tree-item-group"
+          role="group"
+          id={groupId}
+          hidden={!isExpanded}
+        >
           <TreeItemContext.Provider value={{ level: level + 1 }}>
             {children}
           </TreeItemContext.Provider>
-        </TreeItemGroup>
+        </ul>
       ) : null}
-    </TreeItemEl>
+    </li>
   );
 }
 

package/src/__tests__/Tree.test.tsx

@@ -197,3 +197,64 @@ describe("Tree", () => {
     await runA11yCheck();
   });
 });
+
+describe("Tree CSS-class rendering (Tailwind migration)", () => {
+  it("renders Seeds CSS classes on the root and item elements", () => {
+    renderBasicTree();
+
+    const root = screen.getByRole("tree", { name: "Files" });
+    expect(root).toHaveClass("seeds-tree");
+
+    const srcItem = screen.getByRole("treeitem", { name: /src/ });
+    expect(srcItem).toHaveClass("seeds-tree-item");
+
+    const row = srcItem.querySelector(".seeds-tree-item-row");
+    expect(row).not.toBeNull();
+    expect(srcItem.querySelector(".seeds-tree-item-label")).not.toBeNull();
+
+    // Expanded branches expose a chevron button with the `expanded` modifier.
+    const chevron = row!.querySelector(".seeds-tree-item-chevron");
+    expect(chevron).toHaveClass("expanded");
+  });
+
+  it("merges a consumer className onto the root without dropping seeds-tree", () => {
+    renderBasicTree({ className: "my-tree" });
+    const root = screen.getByRole("tree", { name: "Files" });
+    expect(root).toHaveClass("seeds-tree");
+    expect(root).toHaveClass("my-tree");
+  });
+
+  it("sets the --tree-level custom property per depth for indentation", () => {
+    renderBasicTree();
+    const rootRow = screen
+      .getByRole("treeitem", { name: /src/ })
+      .querySelector<HTMLElement>(".seeds-tree-item-row");
+    const childRow = screen
+      .getByRole("treeitem", { name: /Button\.tsx/ })
+      .querySelector<HTMLElement>(".seeds-tree-item-row");
+    expect(rootRow!.style.getPropertyValue("--tree-level")).toBe("1");
+    expect(childRow!.style.getPropertyValue("--tree-level")).toBe("2");
+  });
+
+  it("applies the `selected` modifier class on a selected row", async () => {
+    const { user } = render(
+      <Tree aria-label="Files" selectionMode="single">
+        <TreeItem id="a" label="A" />
+      </Tree>
+    );
+    const a = screen.getByRole("treeitem", { name: "A" });
+    a.focus();
+    await user.keyboard("{Enter}");
+    expect(a.querySelector(".seeds-tree-item-row")).toHaveClass("selected");
+  });
+
+  it("applies the `disabled` modifier class on a disabled row", () => {
+    render(
+      <Tree aria-label="Files">
+        <TreeItem id="a" label="A" disabled />
+      </Tree>
+    );
+    const a = screen.getByRole("treeitem", { name: "A" });
+    expect(a.querySelector(".seeds-tree-item-row")).toHaveClass("disabled");
+  });
+});

package/src/cn.ts

@@ -0,0 +1,28 @@
+/**
+ * Local className merge helper.
+ *
+ * `cn` is intentionally NOT imported from `@sproutsocial/seeds-react-utilities`
+ * (it isn't exported there); each Tailwind/CSS-class Seeds component keeps its
+ * own copy, matching the `seeds-react-button` reference.
+ */
+export function cn(
+  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]
+): string {
+  const classes: string[] = [];
+
+  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(" ");
+}

package/src/tree.css

@@ -0,0 +1,318 @@
+/**
+ * Seeds Tree component classes
+ * CSS-class mirror of the styled-components that previously styled the tree
+ * package (TreeStyles.tsx, TreeCombobox.tsx, Common/TreeSearchableSelectBase.tsx).
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Rules live in @layer components so consumer Tailwind utilities (which sit in
+ * the later `utilities` layer) can override component styles on equal
+ * specificity. Without the layer, these unlayered rules would out-rank any
+ * utility class.
+ *
+ * Usage:
+ *   <ul class="seeds-tree" role="tree">
+ *     <li class="seeds-tree-item" role="treeitem">
+ *       <div class="seeds-tree-item-row" style="--tree-level: 1">…</div>
+ *     </li>
+ *   </ul>
+ */
+
+@layer components {
+  /* ---------------------------------------------------------------------- */
+  /* Tree / TreeItem (mirror of TreeStyles.tsx)                             */
+  /* ---------------------------------------------------------------------- */
+
+  .seeds-tree {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-family: var(--font-family);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    color: var(--color-text-body);
+  }
+
+  .seeds-tree-item {
+    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.
+   */
+  .seeds-tree-item:focus-visible > .seeds-tree-item-row,
+  .seeds-tree-item[data-treeitem-active] > .seeds-tree-item-row {
+    outline: 2px solid var(--color-button-primary-bg-base);
+    outline-offset: -2px;
+  }
+
+  .seeds-tree-item-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-300);
+    padding: var(--space-300);
+    /* Indentation per depth: --tree-level is set inline on each row. */
+    padding-left: calc(
+      var(--space-300) + (var(--tree-level) - 1) * var(--space-400)
+    );
+    border-radius: var(--radius-400);
+    cursor: pointer;
+    user-select: none;
+    background: transparent;
+    transition: background-color var(--duration-fast) var(--ease-ease_in);
+  }
+
+  .seeds-tree-item-row:hover {
+    background: var(--color-listItem-bg-hover);
+  }
+
+  .seeds-tree-item-row.selected {
+    background: var(--color-listItem-bg-hover);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .seeds-tree-item-row.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .seeds-tree-item-group {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .seeds-tree-item-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .seeds-tree-item-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .seeds-tree-item-chevron {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--space-500);
+    height: var(--space-500);
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--color-icon-base);
+    cursor: pointer;
+    border-radius: var(--radius-300);
+    transition: transform var(--duration-fast) var(--ease-ease_in);
+    transform: rotate(-90deg);
+  }
+
+  .seeds-tree-item-chevron.expanded {
+    transform: rotate(0deg);
+  }
+
+  .seeds-tree-item-chevron:hover {
+    background: var(--color-listItem-bg-hover);
+  }
+
+  /* ---------------------------------------------------------------------- */
+  /* TreeCombobox (mirror of TreeCombobox.tsx)                              */
+  /* ---------------------------------------------------------------------- */
+
+  .seeds-tree-combobox {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .seeds-tree-combobox-search {
+    padding: var(--space-300);
+    border-bottom: 1px solid var(--color-container-border-base);
+    flex-shrink: 0;
+  }
+
+  .seeds-tree-combobox-input-group {
+    display: flex;
+    align-items: center;
+    gap: var(--space-200);
+    padding: var(--space-200) var(--space-300);
+    border-radius: var(--radius-500);
+    border: 1px solid var(--color-container-border-base);
+    background: var(--color-container-bg-base);
+    color: var(--color-icon-base);
+  }
+
+  .seeds-tree-combobox-input-group:focus-within {
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0px 0px 4px
+        color-mix(
+          in srgb,
+          var(--color-button-primary-bg-base),
+          transparent 70%
+        );
+    outline: none;
+  }
+
+  .seeds-tree-combobox-input {
+    flex: 1;
+    border: none;
+    background: transparent;
+    outline: none;
+    font-family: var(--font-family);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    color: var(--color-text-body);
+  }
+
+  .seeds-tree-combobox-input::placeholder {
+    color: var(--color-text-subtext);
+  }
+
+  .seeds-tree-combobox-list {
+    padding: var(--space-200);
+    overflow: auto;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .seeds-tree-combobox-empty {
+    padding: var(--space-300) var(--space-350);
+    text-align: center;
+    color: var(--color-text-subtext);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+  }
+
+  /* ---------------------------------------------------------------------- */
+  /* TreeSearchableSelect (mirror of Common/TreeSearchableSelectBase.tsx)   */
+  /* ---------------------------------------------------------------------- */
+
+  .seeds-tree-select-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-300);
+    padding: var(--space-200) var(--space-350);
+    min-width: 160px;
+    width: auto;
+    border-radius: var(--radius-500);
+    border: 1px solid var(--color-form-border-base);
+    background: var(--color-form-bg-base);
+    font-family: var(--font-family);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    color: var(--color-text-body);
+    text-align: left;
+    cursor: default;
+    outline: none;
+    user-select: none;
+    transition:
+      border-color var(--duration-fast) var(--ease-ease_in),
+      box-shadow var(--duration-fast) var(--ease-ease_in);
+  }
+
+  .seeds-tree-select-trigger.full-width {
+    width: 100%;
+  }
+
+  .seeds-tree-select-trigger:focus-visible {
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0px 0px 4px
+        color-mix(
+          in srgb,
+          var(--color-button-primary-bg-base),
+          transparent 70%
+        );
+    outline: none;
+  }
+
+  .seeds-tree-select-trigger::-moz-focus-inner {
+    border: 0;
+  }
+
+  .seeds-tree-select-trigger[aria-disabled="true"],
+  .seeds-tree-select-trigger:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .seeds-tree-select-trigger.invalid {
+    border-color: var(--color-form-border-error);
+  }
+
+  .seeds-tree-select-trigger-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .seeds-tree-select-placeholder {
+    color: var(--color-text-subtext);
+  }
+
+  .seeds-tree-select-chevron {
+    display: inline-flex;
+    align-items: center;
+    color: var(--color-icon-base);
+    transition: transform var(--duration-fast) var(--ease-ease_in);
+  }
+
+  .seeds-tree-select-chevron.open {
+    transform: rotate(-180deg);
+  }
+
+  /*
+   * Visually-hidden input that mirrors the combobox's selected value into a
+   * form-submittable element. Matches Base UI's pattern (used by v3
+   * SearchableSelect): the input stays in the DOM so HTML forms pick up the
+   * value, but it's removed from view and from the accessibility tree.
+   */
+  .seeds-tree-select-hidden-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;
+  }
+
+  .seeds-tree-select-popout {
+    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 is set inline via --tree-select-width (defaults to max-content). */
+    width: var(--tree-select-width, max-content);
+  }
+}