@sproutsocial/seeds-react-tree 0.3.1 → 0.4.0

package/src/__tests__/MultiTreeSearchableSelect.test.tsx

@@ -0,0 +1,194 @@
+import * as React from "react";
+import { axe } from "jest-axe";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import { MultiTreeSearchableSelect } from "../MultiTreeSearchableSelect";
+import type { TreeItemData } from "../Common/types";
+
+/*
+ * `<button role="combobox">` is the de facto select-style combobox pattern
+ * used by Base UI (v3 SearchableSelect), Radix UI, Headless UI, and others.
+ * It works correctly with screen readers, but axe's strict element-to-role
+ * mapping (`aria-allowed-role`) flags the override. Run axe with that rule
+ * disabled so the rest of the a11y checks still apply.
+ */
+const axeOpts = { rules: { "aria-allowed-role": { enabled: false } } };
+
+const data: TreeItemData[] = [
+  {
+    id: "src",
+    label: "src",
+    children: [
+      { id: "Button.tsx", label: "Button.tsx" },
+      { id: "Modal.tsx", label: "Modal.tsx" },
+      { id: "Tree.tsx", label: "Tree.tsx" },
+    ],
+  },
+  {
+    id: "tests",
+    label: "tests",
+    children: [{ id: "Button.test.tsx", label: "Button.test.tsx" }],
+  },
+];
+
+function getTrigger() {
+  return screen.getByRole("combobox", { name: /Pick files/ });
+}
+
+describe("MultiTreeSearchableSelect", () => {
+  it("stays open after selecting an item and accumulates selections", async () => {
+    const onChange = jest.fn();
+    const { user } = render(
+      <MultiTreeSearchableSelect
+        aria-label="Pick files"
+        items={data}
+        placeholder="Pick files"
+        defaultExpanded={["src"]}
+        onSelectedItemIdsChange={onChange}
+      />
+    );
+    await user.click(getTrigger());
+    const input = screen.getByPlaceholderText("Search...");
+    await user.click(input);
+    await user.keyboard("{ArrowDown}{ArrowDown}"); // src → Button.tsx
+    await user.keyboard("{Enter}");
+    expect(onChange).toHaveBeenLastCalledWith(["Button.tsx"]);
+    // Stays open.
+    expect(getTrigger()).toHaveAttribute("aria-expanded", "true");
+
+    await user.keyboard("{ArrowDown}"); // → Modal.tsx
+    await user.keyboard("{Enter}");
+    expect(onChange).toHaveBeenLastCalledWith(
+      expect.arrayContaining(["Button.tsx", "Modal.tsx"])
+    );
+    expect(getTrigger()).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("shows a comma-separated trigger label up to 3 selections", async () => {
+    const { user } = render(
+      <MultiTreeSearchableSelect
+        aria-label="Pick files"
+        items={data}
+        placeholder="Pick files"
+        defaultSelectedItemIds={["Button.tsx", "Modal.tsx"]}
+        defaultExpanded={["src"]}
+      />
+    );
+    expect(getTrigger()).toHaveTextContent("Button.tsx, Modal.tsx");
+
+    await user.click(getTrigger());
+    const treeTree = screen.getByRole("treeitem", { name: /Tree\.tsx/ });
+    await user.click(treeTree);
+    // Three selections → still comma list.
+    expect(getTrigger()).toHaveTextContent("Button.tsx, Modal.tsx, Tree.tsx");
+  });
+
+  it("collapses to 'N selected' beyond 3 items", () => {
+    render(
+      <MultiTreeSearchableSelect
+        aria-label="Pick files"
+        items={data}
+        placeholder="Pick files"
+        defaultSelectedItemIds={[
+          "Button.tsx",
+          "Modal.tsx",
+          "Tree.tsx",
+          "Button.test.tsx",
+        ]}
+      />
+    );
+    expect(getTrigger()).toHaveTextContent("4 selected");
+  });
+
+  it("uses placeholder when nothing is selected", () => {
+    render(
+      <MultiTreeSearchableSelect
+        aria-label="Pick files"
+        items={data}
+        placeholder="Pick files"
+      />
+    );
+    expect(getTrigger()).toHaveTextContent("Pick files");
+  });
+
+  it("renderTrigger overrides the default label", () => {
+    render(
+      <MultiTreeSearchableSelect
+        aria-label="Pick files"
+        items={data}
+        placeholder="Pick files"
+        defaultSelectedItemIds={["Button.tsx", "Modal.tsx"]}
+        renderTrigger={(sel) => `Picked: ${sel.length}`}
+      />
+    );
+    expect(getTrigger()).toHaveTextContent("Picked: 2");
+  });
+
+  it("clicking a treeitem in the open popout toggles selection without closing", async () => {
+    const onChange = jest.fn();
+    const { user } = render(
+      <MultiTreeSearchableSelect
+        aria-label="Pick files"
+        items={data}
+        placeholder="Pick files"
+        defaultExpanded={["src"]}
+        onSelectedItemIdsChange={onChange}
+      />
+    );
+    await user.click(getTrigger());
+    const button = screen.getByRole("treeitem", { name: /Button\.tsx/ });
+    await user.click(button);
+    expect(onChange).toHaveBeenLastCalledWith(["Button.tsx"]);
+    expect(getTrigger()).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("renders one hidden form input per selected value", () => {
+    const { container, rerender } = render(
+      <MultiTreeSearchableSelect
+        aria-label="Pick files"
+        items={data}
+        placeholder="Pick files"
+        name="files"
+        selectedItemIds={[]}
+      />
+    );
+    // Nothing selected → no `type="hidden"` per-value inputs; the primary
+    // (visually-hidden) input is still in the DOM but has no name in
+    // multi-select mode, so the form receives nothing under "files".
+    expect(container.querySelectorAll('input[name="files"]')).toHaveLength(0);
+
+    rerender(
+      <MultiTreeSearchableSelect
+        aria-label="Pick files"
+        items={data}
+        placeholder="Pick files"
+        name="files"
+        selectedItemIds={["Button.tsx", "Modal.tsx"]}
+      />
+    );
+    const inputs = container.querySelectorAll<HTMLInputElement>(
+      'input[name="files"]'
+    );
+    expect(inputs).toHaveLength(2);
+    expect(Array.from(inputs).map((i) => i.value)).toEqual([
+      "Button.tsx",
+      "Modal.tsx",
+    ]);
+    inputs.forEach((input) => {
+      expect(input).toHaveAttribute("type", "hidden");
+    });
+  });
+
+  it("passes axe a11y check (closed and open)", async () => {
+    const { container, user } = render(
+      <MultiTreeSearchableSelect
+        aria-label="Pick files"
+        items={data}
+        placeholder="Pick files"
+        defaultExpanded={["src"]}
+      />
+    );
+    expect(await axe(container, axeOpts)).toHaveNoViolations();
+    await user.click(getTrigger());
+    expect(await axe(container, axeOpts)).toHaveNoViolations();
+  });
+});

package/src/__tests__/SingleTreeSearchableSelect.test.tsx

@@ -0,0 +1,210 @@
+import * as React from "react";
+import { axe } from "jest-axe";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import { SingleTreeSearchableSelect } from "../SingleTreeSearchableSelect";
+import type { TreeItemData } from "../Common/types";
+
+/*
+ * `<button role="combobox">` is the de facto select-style combobox pattern
+ * used by Base UI (v3 SearchableSelect), Radix UI, Headless UI, and others.
+ * It works correctly with screen readers, but axe's strict element-to-role
+ * mapping (`aria-allowed-role`) flags the override. Run axe with that rule
+ * disabled so the rest of the a11y checks still apply.
+ */
+const axeOpts = { rules: { "aria-allowed-role": { enabled: false } } };
+
+const data: TreeItemData[] = [
+  {
+    id: "src",
+    label: "src",
+    children: [
+      { id: "Button.tsx", label: "Button.tsx" },
+      { id: "Modal.tsx", label: "Modal.tsx" },
+    ],
+  },
+  {
+    id: "tests",
+    label: "tests",
+    children: [{ id: "Button.test.tsx", label: "Button.test.tsx" }],
+  },
+];
+
+function getTrigger() {
+  return screen.getByRole("combobox", { name: /Pick a file/ });
+}
+
+describe("SingleTreeSearchableSelect", () => {
+  it("renders a closed combobox trigger with placeholder and aria-haspopup=dialog", () => {
+    render(
+      <SingleTreeSearchableSelect
+        aria-label="Pick a file"
+        items={data}
+        placeholder="Pick a file"
+      />
+    );
+    const trigger = getTrigger();
+    expect(trigger).toHaveAttribute("role", "combobox");
+    expect(trigger).toHaveAttribute("aria-haspopup", "dialog");
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(trigger).not.toHaveAttribute("aria-controls");
+    expect(trigger).toHaveTextContent("Pick a file");
+    // Tree is not in the DOM while closed.
+    expect(screen.queryByRole("tree")).not.toBeInTheDocument();
+  });
+
+  it("opens the popout on trigger click and wires aria-controls to the popup", async () => {
+    const { user } = render(
+      <SingleTreeSearchableSelect
+        aria-label="Pick a file"
+        items={data}
+        placeholder="Pick a file"
+        defaultExpanded={["src"]}
+      />
+    );
+    await user.click(getTrigger());
+    const trigger = getTrigger();
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+    const controlsId = trigger.getAttribute("aria-controls");
+    expect(controlsId).toBeTruthy();
+    expect(document.getElementById(controlsId!)).toBeInTheDocument();
+
+    expect(screen.getByRole("tree")).toBeInTheDocument();
+  });
+
+  it("closes the popout when a single-select item is chosen", async () => {
+    const onChange = jest.fn();
+    const { user } = render(
+      <SingleTreeSearchableSelect
+        aria-label="Pick a file"
+        items={data}
+        placeholder="Pick a file"
+        defaultExpanded={["src"]}
+        onSelectedItemIdChange={onChange}
+      />
+    );
+    await user.click(getTrigger());
+    const input = screen.getByPlaceholderText("Search...");
+    await user.click(input);
+    await user.keyboard("{ArrowDown}{ArrowDown}"); // src → Button.tsx
+    await user.keyboard("{Enter}");
+
+    expect(onChange).toHaveBeenLastCalledWith("Button.tsx");
+    expect(getTrigger()).toHaveAttribute("aria-expanded", "false");
+    expect(screen.queryByRole("tree")).not.toBeInTheDocument();
+  });
+
+  it("renders the selected item's label on the trigger", async () => {
+    const { user, rerender } = render(
+      <SingleTreeSearchableSelect
+        aria-label="Pick a file"
+        items={data}
+        placeholder="Pick a file"
+        selectedItemId={null}
+      />
+    );
+    expect(getTrigger()).toHaveTextContent("Pick a file");
+
+    rerender(
+      <SingleTreeSearchableSelect
+        aria-label="Pick a file"
+        items={data}
+        placeholder="Pick a file"
+        selectedItemId="Modal.tsx"
+      />
+    );
+    expect(getTrigger()).toHaveTextContent("Modal.tsx");
+
+    // Trigger still works after selection.
+    await user.click(getTrigger());
+    expect(getTrigger()).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("Escape with empty query closes the popout", async () => {
+    const { user } = render(
+      <SingleTreeSearchableSelect
+        aria-label="Pick a file"
+        items={data}
+        placeholder="Pick a file"
+      />
+    );
+    await user.click(getTrigger());
+    await user.keyboard("{Escape}");
+    expect(getTrigger()).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("Escape with a non-empty query clears the query and stays open", async () => {
+    const { user } = render(
+      <SingleTreeSearchableSelect
+        aria-label="Pick a file"
+        items={data}
+        placeholder="Pick a file"
+      />
+    );
+    await user.click(getTrigger());
+    const input = screen.getByPlaceholderText("Search...");
+    await user.type(input, "But");
+    expect(input).toHaveValue("But");
+
+    await user.keyboard("{Escape}");
+    expect(input).toHaveValue("");
+    expect(getTrigger()).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("renders a hidden form input mirroring the selected value", () => {
+    const { container, rerender } = render(
+      <SingleTreeSearchableSelect
+        aria-label="Pick a file"
+        items={data}
+        placeholder="Pick a file"
+        name="file"
+        selectedItemId={null}
+      />
+    );
+    const hidden =
+      container.querySelector<HTMLInputElement>('input[name="file"]');
+    expect(hidden).toBeInTheDocument();
+    expect(hidden).toHaveAttribute("tabindex", "-1");
+    expect(hidden).toHaveAttribute("aria-hidden", "true");
+    expect(hidden).toHaveValue("");
+
+    rerender(
+      <SingleTreeSearchableSelect
+        aria-label="Pick a file"
+        items={data}
+        placeholder="Pick a file"
+        name="file"
+        selectedItemId="Modal.tsx"
+      />
+    );
+    expect(
+      container.querySelector<HTMLInputElement>('input[name="file"]')
+    ).toHaveValue("Modal.tsx");
+  });
+
+  it("uses an ${id}-hidden-input id when no name is provided", () => {
+    const { container } = render(
+      <SingleTreeSearchableSelect
+        id="my-field"
+        aria-label="Pick a file"
+        items={data}
+        placeholder="Pick a file"
+      />
+    );
+    expect(container.querySelector("#my-field-hidden-input")).toBeTruthy();
+  });
+
+  it("passes axe a11y check (closed and open)", async () => {
+    const { container, user } = render(
+      <SingleTreeSearchableSelect
+        aria-label="Pick a file"
+        items={data}
+        placeholder="Pick a file"
+        defaultExpanded={["src"]}
+      />
+    );
+    expect(await axe(container, axeOpts)).toHaveNoViolations();
+    await user.click(getTrigger());
+    expect(await axe(container, axeOpts)).toHaveNoViolations();
+  });
+});

package/src/index.ts

@@ -1,6 +1,14 @@
 export { Tree, type TreeProps } from "./Tree";
 export { TreeItem, type TreeItemProps } from "./TreeItem";
 export { TreeCombobox, type TreeComboboxProps } from "./TreeCombobox";
+export {
+  SingleTreeSearchableSelect,
+  type SingleTreeSearchableSelectProps,
+} from "./SingleTreeSearchableSelect";
+export {
+  MultiTreeSearchableSelect,
+  type MultiTreeSearchableSelectProps,
+} from "./MultiTreeSearchableSelect";
 export type {
   TreeItemData,
   TreeSelectionMode,