@sproutsocial/seeds-react-tree 0.4.0 → 0.4.3

package/dist/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);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-tree",
-  "version": "0.4.0",
+  "version": "0.4.3",
   "description": "Seeds React Tree (WAI-ARIA treeview)",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -17,11 +17,12 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/esm/index.js",
       "require": "./dist/index.js"
-    }
+    },
+    "./dist/tree.css": "./dist/tree.css"
   },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/tree.css dist/tree.css",
+    "build:debug": "tsup --dts --metafile && cp src/tree.css dist/tree.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
@@ -30,17 +31,17 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-icon": "^2.4.0",
-    "@sproutsocial/seeds-react-mixins": "^4.3.7",
-    "@sproutsocial/seeds-react-popout": "^2.5.7",
+    "@sproutsocial/seeds-react-icon": "^2.4.2",
+    "@sproutsocial/seeds-react-mixins": "^4.3.9",
+    "@sproutsocial/seeds-react-popout": "^2.5.11",
     "@sproutsocial/seeds-react-system-props": "^3.1.1",
-    "@sproutsocial/seeds-react-theme": "^4.1.0",
+    "@sproutsocial/seeds-react-theme": "^4.2.0",
     "@sproutsocial/seeds-react-utilities": "^4.3.0"
   },
   "devDependencies": {
     "@sproutsocial/eslint-config-seeds": "*",
-    "@sproutsocial/seeds-react-button": "^2.2.1",
-    "@sproutsocial/seeds-react-popout": "^2.5.9",
+    "@sproutsocial/seeds-react-button": "^2.2.3",
+    "@sproutsocial/seeds-react-popout": "^2.5.11",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",
     "@sproutsocial/seeds-tsconfig": "*",

package/src/Common/TreeSearchableSelectBase.tsx

@@ -1,9 +1,8 @@
 import * as React from "react";
-import styled, { css } from "styled-components";
 import { Icon } from "@sproutsocial/seeds-react-icon";
-import { focusRing } from "@sproutsocial/seeds-react-mixins";
 import { Popout } from "@sproutsocial/seeds-react-popout/v2";
 import { TreeCombobox } from "../TreeCombobox";
+import { cn } from "../cn";
 import { flattenTreeItems } from "./flattenTree";
 import type {
   TreeItemData,
@@ -12,113 +11,14 @@ import type {
   TreeSelectionMode,
 } from "./types";
 
-const invalidStyles = css`
-  border-color: ${({ theme }) => theme.colors.form.border.error};
-`;
-
-const Trigger = styled.button<{ $isInvalid?: boolean; $fullWidth: boolean }>`
-  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 {
-    ${focusRing}
-  }
-
-  &[aria-disabled="true"],
-  &:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  ${({ $isInvalid }) => $isInvalid && invalidStyles}
-`;
-
-const TriggerLabel = styled.span`
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const PlaceholderText = styled.span`
-  color: ${({ theme }) => theme.colors.text.subtext};
-`;
-
-const Chevron = styled.span<{ $open: boolean }>`
-  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 &&
-    css`
-      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.
- */
-const HiddenInput = styled.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;
-`;
-
-const PopoutContent = styled.div<{ $width?: number | string }>`
-  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 === undefined
-      ? "max-content"
-      : typeof $width === "number"
-      ? `${$width}px`
-      : $width};
-`;
-
 const MAX_INLINE_LABELS = 3;
 
+/** Resolve the popout width prop to a CSS length for `--tree-select-width`. */
+function popoutWidth(width?: number | string): string | undefined {
+  if (width === undefined) return undefined;
+  return typeof width === "number" ? `${width}px` : width;
+}
+
 export type RenderTrigger = (selected: TreeItemData[]) => React.ReactNode;
 
 type TreeSearchableSelectBaseProps = {
@@ -189,7 +89,9 @@ function defaultRenderTrigger(
   placeholder: string
 ): React.ReactNode {
   if (selected.length === 0) {
-    return <PlaceholderText>{placeholder}</PlaceholderText>;
+    return (
+      <span className="seeds-tree-select-placeholder">{placeholder}</span>
+    );
   }
   if (selected.length <= MAX_INLINE_LABELS) {
     return selected.map((s) => s.label).join(", ");
@@ -284,7 +186,8 @@ export function TreeSearchableSelectBase(props: TreeSearchableSelectBaseProps) {
 
   return (
     <>
-      <HiddenInput
+      <input
+        className="seeds-tree-select-hidden-input"
         type="text"
         id={primaryInputId}
         name={primaryInputName}
@@ -327,7 +230,15 @@ export function TreeSearchableSelectBase(props: TreeSearchableSelectBaseProps) {
           }
         }}
         content={
-          <PopoutContent id={popupId} $width={contentWidth}>
+          <div
+            className="seeds-tree-select-popout"
+            id={popupId}
+            style={
+              {
+                "--tree-select-width": popoutWidth(contentWidth),
+              } as React.CSSProperties
+            }
+          >
             <TreeCombobox
               /*
                * The wrapper's `aria-label` / `aria-labelledby` already names the
@@ -352,15 +263,16 @@ export function TreeSearchableSelectBase(props: TreeSearchableSelectBaseProps) {
               expanded={expanded}
               onExpandedChange={onExpandedChange}
             />
-          </PopoutContent>
+          </div>
         }
       >
-        <Trigger
+        <button
+          className={cn("seeds-tree-select-trigger", className, {
+            "full-width": fullWidth,
+            invalid: !!isInvalid,
+          })}
           type="button"
           id={id}
-          className={className}
-          $isInvalid={isInvalid}
-          $fullWidth={fullWidth}
           disabled={disabled}
           role="combobox"
           aria-haspopup="dialog"
@@ -372,11 +284,16 @@ export function TreeSearchableSelectBase(props: TreeSearchableSelectBaseProps) {
           aria-invalid={isInvalid || undefined}
           aria-required={required || undefined}
         >
-          <TriggerLabel>{triggerContent}</TriggerLabel>
-          <Chevron $open={open} aria-hidden>
+          <span className="seeds-tree-select-trigger-label">
+            {triggerContent}
+          </span>
+          <span
+            className={cn("seeds-tree-select-chevron", { open })}
+            aria-hidden
+          >
             <Icon name="chevron-down-outline" size="small" />
-          </Chevron>
-        </Trigger>
+          </span>
+        </button>
       </Popout>
     </>
   );

package/src/Tree.stories.tsx

@@ -229,3 +229,29 @@ export const DisabledItems: Story = {
     </Wrapper>
   ),
 };
+
+export const TailwindOverrides: Story = {
+  name: "Tailwind utility overrides",
+  render: () => (
+    <Wrapper>
+      {/*
+        The CSS-class path lands a bare `className` directly on the
+        `.seeds-tree` <ul>. `mx-200`, `p-300`, and `inline-flex` come from the
+        Tailwind `utilities` layer and only win over tree.css's `margin: 0`,
+        `padding: 0`, and default `display` because tree.css's rules live in
+        `@layer components`. The border makes the applied margin/padding
+        visible, proving the utilities take effect.
+      */}
+      <Tree
+        aria-label="Tree with Tailwind utility overrides"
+        defaultExpanded={["src"]}
+        className="mx-200 p-300 inline-flex border border-container-border-base rounded-400"
+      >
+        <TreeItem id="src" label="src">
+          <TreeItem id="Button.tsx" label="Button.tsx" />
+          <TreeItem id="Tree.tsx" label="Tree.tsx" />
+        </TreeItem>
+      </Tree>
+    </Wrapper>
+  ),
+};

package/src/Tree.tsx

@@ -10,7 +10,7 @@ import type {
   TreeSelectionIndicator,
   TreeSelectionMode,
 } from "./Common/types";
-import { TreeRoot } from "./TreeStyles";
+import { cn } from "./cn";
 
 export type TreeProps = {
   children: React.ReactNode;
@@ -164,17 +164,17 @@ export const Tree = React.forwardRef<HTMLUListElement, TreeProps>(function Tree(
   return (
     <TreeContext.Provider value={ctxValue}>
       <TreeItemContext.Provider value={{ level: 1 }}>
-        <TreeRoot
+        <ul
           ref={innerRef}
           role="tree"
           id={id}
-          className={className}
+          className={cn("seeds-tree", className)}
           aria-label={ariaLabel}
           aria-labelledby={ariaLabelledBy}
           aria-multiselectable={selectionMode === "multiple" ? true : undefined}
         >
           {children}
-        </TreeRoot>
+        </ul>
       </TreeItemContext.Provider>
     </TreeContext.Provider>
   );