@sproutsocial/seeds-react-tree 0.3.1 → 0.4.0

package/src/MultiTreeSearchableSelect.tsx

@@ -0,0 +1,92 @@
+import * as React from "react";
+import {
+  TreeSearchableSelectBase,
+  type RenderTrigger,
+} from "./Common/TreeSearchableSelectBase";
+import type {
+  TreeItemData,
+  TreeSelectableNodes,
+  TreeSelectionIndicator,
+} from "./Common/types";
+
+export type MultiTreeSearchableSelectProps = {
+  items: ReadonlyArray<TreeItemData>;
+  selectableNodes?: TreeSelectableNodes;
+
+  selectedItemIds?: ReadonlyArray<string>;
+  defaultSelectedItemIds?: ReadonlyArray<string>;
+  onSelectedItemIdsChange?: (ids: string[]) => void;
+
+  /** Accessible name for the trigger. One of label / labelledby is required. */
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  "aria-describedby"?: string;
+
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+
+  /** Render override for the trigger label area. */
+  renderTrigger?: RenderTrigger;
+
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+
+  disabled?: boolean;
+  isInvalid?: boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  /**
+   * Name for the form inputs. Renders one `<input type="hidden">` per selected
+   * id under this name so `formData.getAll(name)` returns every selection.
+   */
+  name?: string;
+  fullWidth?: boolean;
+  contentWidth?: number | string;
+
+  renderSelectionIndicator?: TreeSelectionIndicator;
+  defaultExpanded?: ReadonlyArray<string>;
+  expanded?: ReadonlyArray<string>;
+  onExpandedChange?: (expanded: string[]) => void;
+
+  id?: string;
+  className?: string;
+};
+
+/**
+ * Multi-select tree inside a popout, following the same shape as
+ * `MultiSearchableSelect`. Picks accumulate; the popout stays open until the
+ * user dismisses it (Escape on empty query, outside click, or trigger click).
+ */
+export function MultiTreeSearchableSelect(
+  props: MultiTreeSearchableSelectProps
+) {
+  const {
+    selectedItemIds: selectedItemIdsProp,
+    defaultSelectedItemIds,
+    onSelectedItemIdsChange,
+    ...rest
+  } = props;
+
+  const isControlled = selectedItemIdsProp !== undefined;
+  const [internalIds, setInternalIds] = React.useState<string[]>(() => [
+    ...(defaultSelectedItemIds ?? []),
+  ]);
+  const selectedIds = isControlled ? selectedItemIdsProp ?? [] : internalIds;
+
+  const handleSelectedIdsChange = (ids: string[]) => {
+    if (!isControlled) setInternalIds(ids);
+    onSelectedItemIdsChange?.(ids);
+  };
+
+  return (
+    <TreeSearchableSelectBase
+      {...rest}
+      selectionMode="multiple"
+      selectedIds={selectedIds}
+      onSelectedIdsChange={handleSelectedIdsChange}
+      closeOnSelect={false}
+    />
+  );
+}

package/src/SingleTreeSearchableSelect.stories.tsx

@@ -0,0 +1,217 @@
+import React from "react";
+import styled from "styled-components";
+import type { Meta, StoryObj } from "@storybook/react";
+import { SingleTreeSearchableSelect } from "./SingleTreeSearchableSelect";
+import {
+  collections,
+  fileTree,
+  pokedex,
+  radioIndicator,
+  SelectionReadout,
+} from "./storyData";
+
+const meta: Meta<typeof SingleTreeSearchableSelect> = {
+  title: "Really Under Development/Tree/SingleTreeSearchableSelect",
+  component: SingleTreeSearchableSelect,
+};
+
+export default meta;
+type Story = StoryObj<typeof SingleTreeSearchableSelect>;
+
+const Stage = styled.div`
+  padding: ${({ theme }) => theme.space[500]};
+`;
+
+const Field = styled.div`
+  width: 300px;
+`;
+
+const TwoColumn = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: ${({ theme }) => theme.space[500]};
+  align-items: start;
+  max-width: 640px;
+`;
+
+const FieldLabel = styled.div`
+  ${({ theme }) => theme.typography[200]}
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  margin-bottom: ${({ theme }) => theme.space[200]};
+`;
+
+export const Basic: Story = {
+  name: "Basic",
+  render: () => (
+    <Stage>
+      <Field>
+        <SingleTreeSearchableSelect
+          aria-label="Pick a collection"
+          items={collections}
+          placeholder="Pick a collection"
+          renderSelectionIndicator={radioIndicator}
+          defaultExpanded={["customer-care"]}
+        />
+      </Field>
+    </Stage>
+  ),
+};
+
+export const Preselected: Story = {
+  name: "Pre-selected (uncontrolled default)",
+  render: () => (
+    <Stage>
+      <Field>
+        <SingleTreeSearchableSelect
+          aria-label="Pick a collection"
+          items={collections}
+          placeholder="Pick a collection"
+          renderSelectionIndicator={radioIndicator}
+          defaultExpanded={["customer-care"]}
+          defaultSelectedItemId="questions"
+        />
+      </Field>
+    </Stage>
+  ),
+};
+
+export const Controlled: Story = {
+  name: "Controlled selection",
+  render: () => {
+    const [selected, setSelected] = React.useState<string | null>("questions");
+    return (
+      <Stage>
+        <Field>
+          <SingleTreeSearchableSelect
+            aria-label="Pick a collection"
+            items={collections}
+            placeholder="Pick a collection"
+            renderSelectionIndicator={radioIndicator}
+            defaultExpanded={["customer-care"]}
+            selectedItemId={selected}
+            onSelectedItemIdChange={setSelected}
+          />
+          <SelectionReadout selected={selected ? [selected] : []} />
+        </Field>
+      </Stage>
+    );
+  },
+};
+
+export const LeavesOnly: Story = {
+  name: "Leaves-only selection",
+  render: () => (
+    <Stage>
+      <Field>
+        <SingleTreeSearchableSelect
+          aria-label="Pick a file"
+          items={fileTree}
+          placeholder="Pick a file"
+          selectableNodes="leaves"
+          renderSelectionIndicator={radioIndicator}
+        />
+      </Field>
+    </Stage>
+  ),
+};
+
+export const FullWidth: Story = {
+  name: "Full width",
+  render: () => (
+    <Stage>
+      <div style={{ width: 600 }}>
+        <SingleTreeSearchableSelect
+          aria-label="Pick a collection"
+          items={collections}
+          placeholder="Pick a collection"
+          renderSelectionIndicator={radioIndicator}
+          defaultExpanded={["customer-care"]}
+          fullWidth
+        />
+      </div>
+    </Stage>
+  ),
+};
+
+export const DisabledAndInvalid: Story = {
+  name: "Disabled & invalid states",
+  render: () => (
+    <Stage>
+      <TwoColumn>
+        <div>
+          <FieldLabel>Disabled</FieldLabel>
+          <SingleTreeSearchableSelect
+            aria-label="Disabled select"
+            items={collections}
+            placeholder="Pick a collection"
+            renderSelectionIndicator={radioIndicator}
+            disabled
+          />
+        </div>
+        <div>
+          <FieldLabel>Invalid</FieldLabel>
+          <SingleTreeSearchableSelect
+            aria-label="Invalid select"
+            items={collections}
+            placeholder="Pick a collection"
+            renderSelectionIndicator={radioIndicator}
+            isInvalid
+          />
+        </div>
+      </TwoColumn>
+    </Stage>
+  ),
+};
+
+export const DeepTree: Story = {
+  name: "Deep tree (7 levels)",
+  render: () => (
+    <Stage>
+      <Field>
+        <SingleTreeSearchableSelect
+          aria-label="Pick a Pokémon form"
+          items={pokedex}
+          placeholder="Pick a Pokémon form"
+          searchPlaceholder="Search the Pokédex..."
+          selectableNodes="leaves"
+          renderSelectionIndicator={radioIndicator}
+          defaultExpanded={[
+            "gen-1",
+            "kanto",
+            "kanto-fire",
+            "charmander-line",
+            "charm-stage-3",
+            "charizard",
+          ]}
+        />
+      </Field>
+    </Stage>
+  ),
+};
+
+export const CustomRenderTrigger: Story = {
+  name: "Custom renderTrigger",
+  render: () => (
+    <Stage>
+      <Field>
+        <SingleTreeSearchableSelect
+          aria-label="Pick a collection"
+          items={collections}
+          placeholder="Pick a collection"
+          renderSelectionIndicator={radioIndicator}
+          defaultExpanded={["customer-care"]}
+          defaultSelectedItemId="bug-reports"
+          renderTrigger={(selected) =>
+            selected.length === 0 ? (
+              <em style={{ color: "#888" }}>Nothing selected yet</em>
+            ) : (
+              <span>
+                <strong>Selected:</strong> {selected[0]?.label}
+              </span>
+            )
+          }
+        />
+      </Field>
+    </Stage>
+  ),
+};

package/src/SingleTreeSearchableSelect.tsx

@@ -0,0 +1,95 @@
+import * as React from "react";
+import {
+  TreeSearchableSelectBase,
+  type RenderTrigger,
+} from "./Common/TreeSearchableSelectBase";
+import type {
+  TreeItemData,
+  TreeSelectableNodes,
+  TreeSelectionIndicator,
+} from "./Common/types";
+
+export type SingleTreeSearchableSelectProps = {
+  items: ReadonlyArray<TreeItemData>;
+  selectableNodes?: TreeSelectableNodes;
+
+  selectedItemId?: string | null;
+  defaultSelectedItemId?: string | null;
+  onSelectedItemIdChange?: (id: string | null) => void;
+
+  /** Accessible name for the trigger. One of label / labelledby is required. */
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  "aria-describedby"?: string;
+
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+
+  /** Render override for the trigger label area. */
+  renderTrigger?: RenderTrigger;
+
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+
+  disabled?: boolean;
+  isInvalid?: boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  /** Name for the hidden form input, enabling participation in native form submission. */
+  name?: string;
+  fullWidth?: boolean;
+  contentWidth?: number | string;
+
+  renderSelectionIndicator?: TreeSelectionIndicator;
+  defaultExpanded?: ReadonlyArray<string>;
+  expanded?: ReadonlyArray<string>;
+  onExpandedChange?: (expanded: string[]) => void;
+
+  id?: string;
+  className?: string;
+};
+
+/**
+ * Single-select tree inside a popout, following the same shape as
+ * `SingleSearchableSelect`. Picks close the popout and return focus to the
+ * trigger.
+ */
+export function SingleTreeSearchableSelect(
+  props: SingleTreeSearchableSelectProps
+) {
+  const {
+    selectedItemId: selectedItemIdProp,
+    defaultSelectedItemId = null,
+    onSelectedItemIdChange,
+    ...rest
+  } = props;
+
+  const isControlled = selectedItemIdProp !== undefined;
+  const [internalId, setInternalId] = React.useState<string | null>(
+    defaultSelectedItemId
+  );
+  const selectedItemId = isControlled ? selectedItemIdProp ?? null : internalId;
+
+  const selectedIds = React.useMemo(
+    () => (selectedItemId ? [selectedItemId] : []),
+    [selectedItemId]
+  );
+
+  const handleSelectedIdsChange = (ids: string[]) => {
+    const next = ids[0] ?? null;
+    if (!isControlled) setInternalId(next);
+    onSelectedItemIdChange?.(next);
+  };
+
+  return (
+    <TreeSearchableSelectBase
+      {...rest}
+      selectionMode="single"
+      selectedIds={selectedIds}
+      onSelectedIdsChange={handleSelectedIdsChange}
+      closeOnSelect
+    />
+  );
+}

package/src/TreeCombobox.tsx

@@ -11,7 +11,14 @@ import type { TreeItemData } from "./Common/types";
 const Root = styled.div`
   display: flex;
   flex-direction: column;
-  gap: ${({ theme }) => theme.space[300]};
+  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`
@@ -20,8 +27,8 @@ const InputGroup = styled.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 {
@@ -35,7 +42,8 @@ const ComboboxInput = styled.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 {
@@ -43,11 +51,19 @@ const ComboboxInput = styled.input`
   }
 `;
 
+const ListSection = styled.div`
+  padding: ${({ theme }) => theme.space[200]};
+  overflow: auto;
+  flex: 1;
+  min-height: 0;
+`;
+
 const EmptyState = styled.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};
 `;
 
 const NAV_KEYS = new Set([
@@ -218,59 +234,82 @@ export function TreeCombobox(props: TreeComboboxProps) {
   // We accept that and don't reset focusedId on filter ourselves — clearing
   // happens explicitly on Escape.
 
+  // Keep the active treeitem visible as the user navigates with the
+  // keyboard. In DOM-focus mode the browser auto-scrolls on `.focus()`, but
+  // combobox mode skips that call (focus stays on the input), so we have to
+  // scroll explicitly to meet the WAI-ARIA combobox/treeview expectation
+  // that the active option stays in view. `block: "nearest"` only scrolls
+  // when the row is actually off-screen.
+  React.useLayoutEffect(() => {
+    if (!focusedId) return;
+    const itemEl = findTreeItemEl(focusedId);
+    const row =
+      itemEl?.querySelector<HTMLElement>("[data-treeitem-row]") ?? itemEl;
+    // jsdom doesn't implement scrollIntoView; bail there.
+    if (row && typeof row.scrollIntoView === "function") {
+      row.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
+    // findTreeItemEl is read from a ref so it doesn't need to be a dep.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [focusedId]);
+
   const showEmpty = visibleItems.length === 0;
 
   return (
     <Root className={className}>
-      <InputGroup>
-        <Icon name="magnifying-glass-outline" size="small" aria-hidden />
-        <ComboboxInput
-          type="text"
-          role="combobox"
-          id={id}
+      <SearchSection>
+        <InputGroup>
+          <Icon name="magnifying-glass-outline" size="small" aria-hidden />
+          <ComboboxInput
+            type="text"
+            role="combobox"
+            id={id}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            aria-expanded={!showEmpty}
+            aria-controls={treeDomId}
+            aria-haspopup="tree"
+            aria-autocomplete="list"
+            aria-activedescendant={
+              focusedId ? treeItemDomId(focusedId) : undefined
+            }
+            placeholder={placeholder}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={handleInputKeyDown}
+          />
+        </InputGroup>
+      </SearchSection>
+
+      <ListSection>
+        <Tree
+          ref={treeRef}
           aria-label={ariaLabel}
           aria-labelledby={ariaLabelledBy}
-          aria-expanded={!showEmpty}
-          aria-controls={treeDomId}
-          aria-haspopup="tree"
-          aria-autocomplete="list"
-          aria-activedescendant={
-            focusedId ? treeItemDomId(focusedId) : undefined
-          }
-          placeholder={placeholder}
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          onKeyDown={handleInputKeyDown}
-        />
-      </InputGroup>
-
-      <Tree
-        ref={treeRef}
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledBy}
-        id={treeDomId}
-        manageDomFocus={false}
-        selectionMode={selectionMode}
-        selectableNodes={selectableNodes}
-        expanded={effectiveExpanded}
-        onExpandedChange={handleExpandedChange}
-        selected={selectedProp}
-        defaultSelected={defaultSelected}
-        onSelectionChange={onSelectionChange}
-        renderSelectionIndicator={renderSelectionIndicator}
-        focusedId={focusedId}
-        onFocusedIdChange={setFocusedId}
-      >
-        {visibleItems.map((item) => (
-          <TreeNode key={item.id} item={item} />
-        ))}
-      </Tree>
+          id={treeDomId}
+          manageDomFocus={false}
+          selectionMode={selectionMode}
+          selectableNodes={selectableNodes}
+          expanded={effectiveExpanded}
+          onExpandedChange={handleExpandedChange}
+          selected={selectedProp}
+          defaultSelected={defaultSelected}
+          onSelectionChange={onSelectionChange}
+          renderSelectionIndicator={renderSelectionIndicator}
+          focusedId={focusedId}
+          onFocusedIdChange={setFocusedId}
+        >
+          {visibleItems.map((item) => (
+            <TreeNode key={item.id} item={item} />
+          ))}
+        </Tree>
 
-      {showEmpty ? (
-        <EmptyState role="status" aria-live="polite">
-          {emptyText}
-        </EmptyState>
-      ) : null}
+        {showEmpty ? (
+          <EmptyState role="status" aria-live="polite">
+            {emptyText}
+          </EmptyState>
+        ) : null}
+      </ListSection>
     </Root>
   );
 }

package/src/TreeStyles.tsx

@@ -5,7 +5,8 @@ export const TreeRoot = styled.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};
 `;
 
@@ -19,7 +20,7 @@ export const TreeItemRow = styled.div<{
   gap: ${({ theme }) => theme.space[300]};
   padding: ${({ theme }) => theme.space[300]};
   padding-left: ${({ theme, $level }) =>
-    `calc(${theme.space[300]} + ${$level - 1} * ${theme.space[500]})`};
+    `calc(${theme.space[300]} + ${$level - 1} * ${theme.space[400]})`};
   border-radius: ${({ theme }) => theme.radii[400]};
   cursor: pointer;
   user-select: none;