@primitiv-ui/react 0.1.28 → 0.1.30

package/src/MillerColumns/__tests__/MillerColumns.resize.test.tsx

@@ -1,7 +1,27 @@
 import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import { MillerColumns } from "../MillerColumns";
 
+function Resizable({
+  dir,
+  ...handleProps
+}: {
+  dir?: "ltr" | "rtl";
+  minWidth?: number;
+  maxWidth?: number;
+  step?: number;
+}) {
+  return (
+    <MillerColumns.Root dir={dir}>
+      <MillerColumns.Column>
+        <MillerColumns.ResizeHandle aria-label="Resize" {...handleProps} />
+        <MillerColumns.Item value="a">A</MillerColumns.Item>
+      </MillerColumns.Column>
+    </MillerColumns.Root>
+  );
+}
+
 describe("MillerColumns — resize handle", () => {
   it("renders a vertical separator inside a column", () => {
     render(
@@ -19,6 +39,175 @@ describe("MillerColumns — resize handle", () => {
     expect(handle).toHaveAttribute("data-miller-columns-resize-handle");
   });
 
+  it("is a focusable splitter carrying its value range", () => {
+    render(
+      <MillerColumns.Root>
+        <MillerColumns.Column>
+          <MillerColumns.ResizeHandle
+            aria-label="Resize"
+            minWidth={120}
+            maxWidth={400}
+          />
+          <MillerColumns.Item value="a">A</MillerColumns.Item>
+        </MillerColumns.Column>
+      </MillerColumns.Root>,
+    );
+
+    const handle = screen.getByRole("separator", { name: "Resize" });
+
+    expect(handle).toHaveAttribute("tabindex", "0");
+    expect(handle).toHaveAttribute("aria-valuemin", "120");
+    expect(handle).toHaveAttribute("aria-valuemax", "400");
+    expect(handle).toHaveAttribute("aria-valuenow");
+  });
+
+  it("steps the column width with the arrow keys", async () => {
+    const user = userEvent.setup();
+
+    render(<Resizable minWidth={100} maxWidth={400} />);
+
+    const handle = screen.getByRole("separator");
+    const column = screen.getByRole("group");
+
+    // Seed a known width so stepping is measured from something.
+    fireEvent.pointerDown(handle, { clientX: 0 });
+    fireEvent.pointerMove(window, { clientX: 200 });
+    fireEvent.pointerUp(window);
+
+    handle.focus();
+    await user.keyboard("{ArrowRight}");
+    expect(column).toHaveStyle({ width: "210px" });
+
+    await user.keyboard("{ArrowLeft}{ArrowLeft}");
+    expect(column).toHaveStyle({ width: "190px" });
+  });
+
+  it("honours a custom step", async () => {
+    const user = userEvent.setup();
+
+    render(<Resizable minWidth={100} maxWidth={400} step={25} />);
+
+    const handle = screen.getByRole("separator");
+    const column = screen.getByRole("group");
+
+    fireEvent.pointerDown(handle, { clientX: 0 });
+    fireEvent.pointerMove(window, { clientX: 200 });
+    fireEvent.pointerUp(window);
+
+    handle.focus();
+    await user.keyboard("{ArrowRight}");
+
+    expect(column).toHaveStyle({ width: "225px" });
+  });
+
+  it("clamps stepping to the min and max width", async () => {
+    const user = userEvent.setup();
+
+    render(<Resizable minWidth={100} maxWidth={220} />);
+
+    const handle = screen.getByRole("separator");
+    const column = screen.getByRole("group");
+
+    fireEvent.pointerDown(handle, { clientX: 0 });
+    fireEvent.pointerMove(window, { clientX: 215 });
+    fireEvent.pointerUp(window);
+
+    handle.focus();
+    await user.keyboard("{ArrowRight}{ArrowRight}");
+
+    expect(column).toHaveStyle({ width: "220px" });
+    expect(handle).toHaveAttribute("aria-valuenow", "220");
+  });
+
+  it("jumps to the min and max width with Home and End", async () => {
+    const user = userEvent.setup();
+
+    render(<Resizable minWidth={100} maxWidth={400} />);
+
+    const handle = screen.getByRole("separator");
+    const column = screen.getByRole("group");
+
+    handle.focus();
+    await user.keyboard("{End}");
+    expect(column).toHaveStyle({ width: "400px" });
+
+    await user.keyboard("{Home}");
+    expect(column).toHaveStyle({ width: "100px" });
+  });
+
+  it("mirrors the stepping arrows under rtl", async () => {
+    const user = userEvent.setup();
+
+    render(<Resizable dir="rtl" minWidth={100} maxWidth={400} />);
+
+    const handle = screen.getByRole("separator");
+    const column = screen.getByRole("group");
+
+    fireEvent.pointerDown(handle, { clientX: 0 });
+    fireEvent.pointerMove(window, { clientX: 200 });
+    fireEvent.pointerUp(window);
+
+    handle.focus();
+    // The column grows leftwards in rtl, so ArrowLeft widens it.
+    await user.keyboard("{ArrowLeft}");
+
+    expect(column).toHaveStyle({ width: "210px" });
+  });
+
+  it("leaves the width alone for keys it does not handle", async () => {
+    const user = userEvent.setup();
+
+    render(<Resizable minWidth={100} maxWidth={400} />);
+
+    const handle = screen.getByRole("separator");
+    const column = screen.getByRole("group");
+
+    fireEvent.pointerDown(handle, { clientX: 0 });
+    fireEvent.pointerMove(window, { clientX: 200 });
+    fireEvent.pointerUp(window);
+
+    handle.focus();
+    await user.keyboard("{ArrowUp}{ArrowDown}a");
+
+    expect(column).toHaveStyle({ width: "200px" });
+  });
+
+  it("ignores End when no maxWidth bounds the column", async () => {
+    const user = userEvent.setup();
+
+    // Without a maxWidth there is no largest width to jump to, so End
+    // must not resize to Infinity.
+    render(<Resizable minWidth={100} />);
+
+    const handle = screen.getByRole("separator");
+    const column = screen.getByRole("group");
+
+    fireEvent.pointerDown(handle, { clientX: 0 });
+    fireEvent.pointerMove(window, { clientX: 200 });
+    fireEvent.pointerUp(window);
+
+    handle.focus();
+    await user.keyboard("{End}");
+
+    expect(handle).toHaveAttribute("aria-valuenow", "200");
+    expect(column).toHaveStyle({ width: "200px" });
+    expect(handle).not.toHaveAttribute("aria-valuemax");
+  });
+
+  it("clamps a pointer drag to the min and max width", () => {
+    render(<Resizable minWidth={120} maxWidth={260} />);
+
+    const handle = screen.getByRole("separator");
+    const column = screen.getByRole("group");
+
+    fireEvent.pointerDown(handle, { clientX: 0 });
+    fireEvent.pointerMove(window, { clientX: 1000 });
+    expect(column).toHaveStyle({ width: "260px" });
+
+    fireEvent.pointerMove(window, { clientX: -1000 });
+    expect(column).toHaveStyle({ width: "120px" });
+  });
+
   it("throws when ResizeHandle is rendered outside Column", () => {
     expect(() =>
       render(

package/src/MillerColumns/__tests__/MillerColumns.styled-parts.test.tsx

@@ -0,0 +1,143 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Children, type ComponentProps, type ReactNode } from "react";
+
+import { MillerColumns } from "../MillerColumns";
+import { MILLER_COLUMNS_PART } from "../utils";
+
+/**
+ * A stand-in for a styling layer's wrapper — exactly what the registry
+ * `miller-columns` surface renders. `Item` inspects its children *before*
+ * rendering them, so it sees this component, not the `MillerColumns.Column`
+ * it returns.
+ */
+function StyledColumn(props: ComponentProps<typeof MillerColumns.Column>) {
+  return <MillerColumns.Column {...props} />;
+}
+StyledColumn[MILLER_COLUMNS_PART] = "column" as const;
+
+function Tree() {
+  return (
+    <MillerColumns.Root>
+      <MillerColumns.Column>
+        <MillerColumns.Item value="fruit">
+          Fruit
+          <StyledColumn>
+            <MillerColumns.Item value="apple">Apple</MillerColumns.Item>
+          </StyledColumn>
+        </MillerColumns.Item>
+        <MillerColumns.Item value="veg">
+          Veg
+          <StyledColumn>
+            <MillerColumns.Item value="carrot">Carrot</MillerColumns.Item>
+          </StyledColumn>
+        </MillerColumns.Item>
+      </MillerColumns.Column>
+    </MillerColumns.Root>
+  );
+}
+
+describe("MillerColumns — styled wrappers standing in for parts", () => {
+  it("keeps a wrapped child column closed until its branch is selected", async () => {
+    const user = userEvent.setup();
+
+    render(<Tree />);
+
+    // Nothing is selected, so the child column must not be mounted at all.
+    expect(
+      screen.queryByRole("treeitem", { name: "Apple" }),
+    ).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole("treeitem", { name: "Fruit" }));
+
+    expect(screen.getByRole("treeitem", { name: "Apple" })).toBeInTheDocument();
+  });
+
+  it("opens only the selected branch's column, not every sibling's at once", async () => {
+    const user = userEvent.setup();
+
+    render(<Tree />);
+
+    await user.click(screen.getByRole("treeitem", { name: "Fruit" }));
+
+    // Selecting Fruit opens a slot at depth 1. Every unrecognised wrapped
+    // column projects into that slot on sight, so Veg's children ride along.
+    expect(screen.getByRole("treeitem", { name: "Apple" })).toBeInTheDocument();
+    expect(
+      screen.queryByRole("treeitem", { name: "Carrot" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("treats a wrapped child column as the branch's column, not cell content", () => {
+    render(<Tree />);
+
+    // A branch is a branch because it nests a column — even a wrapped one.
+    expect(screen.getByRole("treeitem", { name: "Fruit" })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+    expect(screen.getByRole("treeitem", { name: "Fruit" })).toHaveAttribute(
+      "data-has-children",
+    );
+  });
+});
+
+/**
+ * The registry surface wraps BOTH parts, and its Item maps over `children` to
+ * wrap bare text in a label span before handing them to the headless. That map
+ * sits between the consumer's JSX and `partitionItemChildren`, so it is the
+ * thing most likely to lose a nested column.
+ */
+function wrapRowTextNodes(children: ReactNode): ReactNode {
+  const mapped = Children.map(children, (child) =>
+    typeof child === "string" || typeof child === "number" ? (
+      <span className="label">{child}</span>
+    ) : (
+      child
+    ),
+  );
+  return Array.isArray(mapped) && mapped.length === 1 ? mapped[0] : mapped;
+}
+
+function StyledItem({
+  children,
+  ...props
+}: ComponentProps<typeof MillerColumns.Item>) {
+  return (
+    <MillerColumns.Item {...props}>
+      {wrapRowTextNodes(children)}
+    </MillerColumns.Item>
+  );
+}
+
+describe("MillerColumns — the registry's own composition", () => {
+  it("opens only the selected branch when Item and Column are both wrapped", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <MillerColumns.Root>
+        <MillerColumns.Column>
+          <StyledItem value="fruit">
+            Fruit
+            <StyledColumn>
+              <StyledItem value="apple">Apple</StyledItem>
+            </StyledColumn>
+          </StyledItem>
+          <StyledItem value="veg">
+            Veg
+            <StyledColumn>
+              <StyledItem value="carrot">Carrot</StyledItem>
+            </StyledColumn>
+          </StyledItem>
+        </MillerColumns.Column>
+      </MillerColumns.Root>,
+    );
+
+    await user.click(screen.getByRole("treeitem", { name: "Fruit" }));
+
+    expect(screen.getByRole("treeitem", { name: "Apple" })).toBeInTheDocument();
+    expect(
+      screen.queryByRole("treeitem", { name: "Carrot" }),
+    ).not.toBeInTheDocument();
+  });
+});

package/src/MillerColumns/__tests__/MillerColumns.typeahead.test.tsx

@@ -0,0 +1,104 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { TYPEAHEAD_RESET_MS } from "../constants";
+import { MillerColumns } from "../MillerColumns";
+
+function Tree() {
+  return (
+    <MillerColumns.Root>
+      <MillerColumns.Column>
+        <MillerColumns.Item value="apricot">Apricot</MillerColumns.Item>
+        <MillerColumns.Item value="banana">Banana</MillerColumns.Item>
+        <MillerColumns.Item value="blueberry">Blueberry</MillerColumns.Item>
+        <MillerColumns.Item value="cherry">
+          Cherry
+          <MillerColumns.Column>
+            <MillerColumns.Item value="morello">Morello</MillerColumns.Item>
+            <MillerColumns.Item value="maraschino">
+              Maraschino
+            </MillerColumns.Item>
+          </MillerColumns.Column>
+        </MillerColumns.Item>
+      </MillerColumns.Column>
+    </MillerColumns.Root>
+  );
+}
+
+describe("MillerColumns — typeahead", () => {
+  it("focuses the first item whose label starts with the typed character", async () => {
+    const user = userEvent.setup();
+
+    render(<Tree />);
+    screen.getByRole("treeitem", { name: "Apricot" }).focus();
+
+    await user.keyboard("c");
+
+    expect(screen.getByRole("treeitem", { name: "Cherry" })).toHaveFocus();
+  });
+
+  it("accumulates characters into a prefix query", async () => {
+    const user = userEvent.setup();
+
+    render(<Tree />);
+    screen.getByRole("treeitem", { name: "Apricot" }).focus();
+
+    await user.keyboard("bl");
+
+    expect(screen.getByRole("treeitem", { name: "Blueberry" })).toHaveFocus();
+  });
+
+  it("cycles through matches when the same character repeats", async () => {
+    const user = userEvent.setup();
+
+    render(<Tree />);
+    screen.getByRole("treeitem", { name: "Apricot" }).focus();
+
+    await user.keyboard("b");
+    expect(screen.getByRole("treeitem", { name: "Banana" })).toHaveFocus();
+
+    await user.keyboard("b");
+    expect(screen.getByRole("treeitem", { name: "Blueberry" })).toHaveFocus();
+  });
+
+  it("searches only within the focused column", async () => {
+    const user = userEvent.setup();
+
+    render(<Tree />);
+    await user.click(screen.getByRole("treeitem", { name: "Cherry" }));
+    screen.getByRole("treeitem", { name: "Morello" }).focus();
+
+    // "B" matches Banana and Blueberry, but both are in the parent column.
+    await user.keyboard("b");
+    expect(screen.getByRole("treeitem", { name: "Morello" })).toHaveFocus();
+
+    // Let the query lapse — otherwise the next keys extend it to "bma".
+    await new Promise((resolve) =>
+      setTimeout(resolve, TYPEAHEAD_RESET_MS + 100),
+    );
+
+    await user.keyboard("ma");
+    expect(screen.getByRole("treeitem", { name: "Maraschino" })).toHaveFocus();
+  });
+
+  it("skips disabled items", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <MillerColumns.Root>
+        <MillerColumns.Column>
+          <MillerColumns.Item value="a">Apricot</MillerColumns.Item>
+          <MillerColumns.Item value="b1" disabled>
+            Banana
+          </MillerColumns.Item>
+          <MillerColumns.Item value="b2">Blueberry</MillerColumns.Item>
+        </MillerColumns.Column>
+      </MillerColumns.Root>,
+    );
+    screen.getByRole("treeitem", { name: "Apricot" }).focus();
+
+    await user.keyboard("b");
+
+    expect(screen.getByRole("treeitem", { name: "Blueberry" })).toHaveFocus();
+  });
+});

package/src/MillerColumns/constants.ts

@@ -0,0 +1,2 @@
+/** Milliseconds of typing inactivity after which the typeahead query resets. */
+export const TYPEAHEAD_RESET_MS = 500;

package/src/MillerColumns/hooks/useMillerColumnsColumn.ts

@@ -7,17 +7,20 @@ import type { MillerColumnsColumnContextValue } from "../types";
 import { useMillerColumnsContext } from "./useMillerColumnsContext";
 
 export function useMillerColumnsColumn() {
-  const { slots, columnWidths } = useMillerColumnsContext();
+  const { slots, columnWidths, getColumnItems } = useMillerColumnsContext();
   const parentColumn = useContext(MillerColumnsColumnContext);
   const depth = parentColumn ? parentColumn.depth + 1 : 0;
 
   const slot = slots.get(depth) ?? null;
   const width = columnWidths.get(depth);
+  // Selecting a childless branch opens a column with nothing in it; the
+  // styling layer needs to know so it can say so rather than show a void.
+  const empty = getColumnItems(depth).length === 0;
 
   const columnContextValue = useMemo<MillerColumnsColumnContextValue>(
     () => ({ depth }),
     [depth],
   );
 
-  return { slot, depth, width, columnContextValue };
+  return { slot, depth, width, empty, columnContextValue };
 }

package/src/MillerColumns/hooks/useMillerColumnsItem.ts

@@ -2,7 +2,7 @@ import {
   FocusEvent,
   KeyboardEvent,
   MouseEvent,
-  useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
 } from "react";
@@ -31,6 +31,7 @@ export function useMillerColumnsItem(
   hasChildren: boolean,
 ) {
   const {
+    dir,
     activePath,
     select,
     registerItem,
@@ -40,18 +41,26 @@ export function useMillerColumnsItem(
     requestColumnFocus,
     activeItem,
     setActiveItem,
+    handleTypeahead,
   } = useMillerColumnsContext();
   const { depth } = useMillerColumnsColumnContext();
 
   const selected = activePath[depth] === value;
+  // The deepest selected item — the one the user actually landed on, as
+  // opposed to the ancestors its path passes through. Nothing else in the
+  // DOM distinguishes the two, and styling them alike loses the depth cue.
+  const terminal = selected && depth === activePath.length - 1;
 
   const itemRef = useRef<HTMLDivElement>(null);
   const composedRef = ref ? composeRefs(itemRef, ref) : itemRef;
 
-  useEffect(() => {
-    registerItem(depth, value, itemRef.current, disabled);
-    return () => registerItem(depth, value, null, disabled);
-  }, [depth, value, disabled, registerItem]);
+  // Registration is a *layout* effect so the resulting state update lands
+  // before paint. As a passive effect, a populated column would paint one
+  // frame with `data-empty` before its items registered.
+  useLayoutEffect(() => {
+    registerItem(depth, value, itemRef.current, disabled, hasChildren);
+    return () => registerItem(depth, value, null, disabled, hasChildren);
+  }, [depth, value, disabled, hasChildren, registerItem]);
 
   const enabledValues = getColumnItems(depth)
     .filter((item) => !item.disabled)
@@ -100,10 +109,15 @@ export function useMillerColumnsItem(
     : depth === 0 &&
       getColumnItems(0).find((item) => !item.disabled)?.value === value;
 
+  // Columns run left-to-right under ltr and right-to-left under rtl, so
+  // the key that steps *into* a child column mirrors with the direction.
+  const stepInKey = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+  const stepOutKey = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+
   function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
     onKeyDown?.(event);
 
-    if (event.key === "ArrowRight") {
+    if (event.key === stepInKey) {
       if (!hasChildren || disabled) {
         return;
       }
@@ -117,7 +131,7 @@ export function useMillerColumnsItem(
       return;
     }
 
-    if (event.key === "ArrowLeft") {
+    if (event.key === stepOutKey) {
       if (depth === 0) {
         return;
       }
@@ -129,6 +143,13 @@ export function useMillerColumnsItem(
     }
 
     rovingKeyDown(event);
+
+    // The keymap gets first refusal — it calls preventDefault on every key
+    // it consumes, so only a still-unhandled printable character reaches
+    // typeahead (Space activates, and never falls through).
+    if (!event.defaultPrevented) {
+      handleTypeahead(event);
+    }
   }
 
   const itemProps = {
@@ -139,6 +160,7 @@ export function useMillerColumnsItem(
     "aria-level": depth + 1,
     ...(hasChildren ? { "aria-expanded": selected } : {}),
     "data-state": selected ? "selected" : "unselected",
+    ...(terminal ? { "data-terminal": "" } : {}),
     "data-depth": depth,
     ...(hasChildren ? { "data-has-children": "" } : {}),
     ...(disabled ? { "aria-disabled": true, "data-disabled": "" } : {}),