@tangle-network/ui 11.51.7 → 11.51.8

package/src/primitives/segmented-control.test.tsx

@@ -1,451 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
-import { render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { SegmentedControl, type SegmentedControlOption } from "./segmented-control"
-
-const options: SegmentedControlOption[] = [
-  { value: "all", label: "All" },
-  { value: "personal", label: "Personal" },
-  { value: "team", label: "Team" },
-]
-
-describe("SegmentedControl", () => {
-  it("renders all options as radio buttons", () => {
-    render(
-      <SegmentedControl value="all" onValueChange={vi.fn()} options={options} />,
-    )
-    const radios = screen.getAllByRole("radio")
-    expect(radios).toHaveLength(3)
-    expect(screen.getByText("All")).toBeInTheDocument()
-    expect(screen.getByText("Personal")).toBeInTheDocument()
-    expect(screen.getByText("Team")).toBeInTheDocument()
-  })
-
-  it("marks the active option with aria-checked", () => {
-    render(
-      <SegmentedControl value="personal" onValueChange={vi.fn()} options={options} />,
-    )
-    const personalRadio = screen.getByRole("radio", { name: "Personal" })
-    const allRadio = screen.getByRole("radio", { name: "All" })
-
-    expect(personalRadio).toHaveAttribute("aria-checked", "true")
-    expect(allRadio).toHaveAttribute("aria-checked", "false")
-  })
-
-  it("sets tabIndex 0 on active option and -1 on inactive options", () => {
-    render(
-      <SegmentedControl value="all" onValueChange={vi.fn()} options={options} />,
-    )
-    const radios = screen.getAllByRole("radio")
-    expect(radios[0]).toHaveAttribute("tabindex", "0")
-    expect(radios[1]).toHaveAttribute("tabindex", "-1")
-    expect(radios[2]).toHaveAttribute("tabindex", "-1")
-  })
-
-  it("calls onValueChange when clicking an inactive option", async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-    render(
-      <SegmentedControl value="all" onValueChange={onChange} options={options} />,
-    )
-
-    await user.click(screen.getByRole("radio", { name: "Team" }))
-    expect(onChange).toHaveBeenCalledWith("team")
-  })
-
-  it("does not call onValueChange when clicking the already-active option", async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-    render(
-      <SegmentedControl value="all" onValueChange={onChange} options={options} />,
-    )
-
-    await user.click(screen.getByRole("radio", { name: "All" }))
-    expect(onChange).not.toHaveBeenCalled()
-  })
-
-  it("renders adornment when provided", () => {
-    const withAdornment: SegmentedControlOption[] = [
-      { value: "all", label: "All", adornment: <span data-testid="count">42</span> },
-      { value: "personal", label: "Personal" },
-    ]
-    render(
-      <SegmentedControl value="all" onValueChange={vi.fn()} options={withAdornment} />,
-    )
-    expect(screen.getByTestId("count")).toBeInTheDocument()
-    expect(screen.getByText("42")).toBeInTheDocument()
-  })
-
-  // --- Keyboard navigation ---
-
-  it("navigates to next option on ArrowRight", async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-    render(
-      <SegmentedControl value="all" onValueChange={onChange} options={options} />,
-    )
-
-    screen.getByRole("radio", { name: "All" }).focus()
-    await user.keyboard("{ArrowRight}")
-
-    expect(onChange).toHaveBeenCalledWith("personal")
-  })
-
-  it("moves DOM focus to the target option on arrow key", async () => {
-    const user = userEvent.setup()
-    render(
-      <SegmentedControl value="all" onValueChange={vi.fn()} options={options} />,
-    )
-
-    const personalRadio = screen.getByRole("radio", { name: "Personal" })
-    screen.getByRole("radio", { name: "All" }).focus()
-    await user.keyboard("{ArrowRight}")
-
-    expect(document.activeElement).toBe(personalRadio)
-  })
-
-  it("navigates to previous option on ArrowLeft", async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-    render(
-      <SegmentedControl value="personal" onValueChange={onChange} options={options} />,
-    )
-
-    screen.getByRole("radio", { name: "Personal" }).focus()
-    await user.keyboard("{ArrowLeft}")
-
-    expect(onChange).toHaveBeenCalledWith("all")
-  })
-
-  it("wraps around on ArrowRight from last option", async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-    render(
-      <SegmentedControl value="team" onValueChange={onChange} options={options} />,
-    )
-
-    screen.getByRole("radio", { name: "Team" }).focus()
-    await user.keyboard("{ArrowRight}")
-
-    expect(onChange).toHaveBeenCalledWith("all")
-  })
-
-  it("wraps around on ArrowLeft from first option", async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-    render(
-      <SegmentedControl value="all" onValueChange={onChange} options={options} />,
-    )
-
-    screen.getByRole("radio", { name: "All" }).focus()
-    await user.keyboard("{ArrowLeft}")
-
-    expect(onChange).toHaveBeenCalledWith("team")
-  })
-
-  it("navigates to first option on Home", async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-    render(
-      <SegmentedControl value="team" onValueChange={onChange} options={options} />,
-    )
-
-    screen.getByRole("radio", { name: "Team" }).focus()
-    await user.keyboard("{Home}")
-
-    expect(onChange).toHaveBeenCalledWith("all")
-  })
-
-  it("navigates to last option on End", async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-    render(
-      <SegmentedControl value="all" onValueChange={onChange} options={options} />,
-    )
-
-    screen.getByRole("radio", { name: "All" }).focus()
-    await user.keyboard("{End}")
-
-    expect(onChange).toHaveBeenCalledWith("team")
-  })
-
-  it("does not fire onValueChange when Home is pressed on first option", async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-    render(
-      <SegmentedControl value="all" onValueChange={onChange} options={options} />,
-    )
-
-    screen.getByRole("radio", { name: "All" }).focus()
-    await user.keyboard("{Home}")
-
-    expect(onChange).not.toHaveBeenCalled()
-  })
-
-  it("does not fire onValueChange when End is pressed on last option", async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-    render(
-      <SegmentedControl value="team" onValueChange={onChange} options={options} />,
-    )
-
-    screen.getByRole("radio", { name: "Team" }).focus()
-    await user.keyboard("{End}")
-
-    expect(onChange).not.toHaveBeenCalled()
-  })
-
-  // --- Edge cases ---
-
-  it("does not crash on keyboard input when options array is empty", async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-    const { container } = render(
-      <SegmentedControl value="all" onValueChange={onChange} options={[]} />,
-    )
-
-    const radiogroup = container.querySelector("[role='radiogroup']") as HTMLElement
-    radiogroup.focus()
-    await user.keyboard("{ArrowRight}")
-    await user.keyboard("{Home}")
-    await user.keyboard("{End}")
-
-    expect(onChange).not.toHaveBeenCalled()
-  })
-
-  it("gives first option tabIndex 0 when value does not match any option", () => {
-    render(
-      <SegmentedControl value={"unknown" as string} onValueChange={vi.fn()} options={options} />,
-    )
-    const radios = screen.getAllByRole("radio")
-    expect(radios[0]).toHaveAttribute("tabindex", "0")
-    expect(radios[1]).toHaveAttribute("tabindex", "-1")
-    expect(radios[2]).toHaveAttribute("tabindex", "-1")
-  })
-
-  it("navigates from first option when value does not match any option", async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-    render(
-      <SegmentedControl value={"unknown" as string} onValueChange={onChange} options={options} />,
-    )
-
-    screen.getByRole("radio", { name: "All" }).focus()
-    await user.keyboard("{ArrowRight}")
-
-    expect(onChange).toHaveBeenCalledWith("personal")
-  })
-
-  it("supports ArrowDown as alias for ArrowRight", async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-    render(
-      <SegmentedControl value="all" onValueChange={onChange} options={options} />,
-    )
-
-    screen.getByRole("radio", { name: "All" }).focus()
-    await user.keyboard("{ArrowDown}")
-
-    expect(onChange).toHaveBeenCalledWith("personal")
-  })
-
-  it("supports ArrowUp as alias for ArrowLeft", async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-    render(
-      <SegmentedControl value="personal" onValueChange={onChange} options={options} />,
-    )
-
-    screen.getByRole("radio", { name: "Personal" }).focus()
-    await user.keyboard("{ArrowUp}")
-
-    expect(onChange).toHaveBeenCalledWith("all")
-  })
-
-  // --- Variants ---
-
-  it("applies row variant classes by default", () => {
-    render(
-      <SegmentedControl value="all" onValueChange={vi.fn()} options={options} />,
-    )
-    const radiogroup = screen.getByRole("radiogroup")
-    expect(radiogroup.className).toContain("flex-wrap")
-    expect(radiogroup.className).toContain("rounded-lg")
-    // The row track is one quiet well: the hairline border, not a field's strong border.
-    expect(radiogroup.className).toContain("bg-[var(--well)]")
-    expect(radiogroup.className).toContain("border-border")
-    expect(radiogroup.className).not.toContain("border-[var(--field-border)]")
-  })
-
-  it("applies tabs variant classes with nowrap", () => {
-    render(
-      <SegmentedControl
-        value="all"
-        onValueChange={vi.fn()}
-        options={options}
-        variant="tabs"
-      />,
-    )
-    const radiogroup = screen.getByRole("radiogroup")
-    expect(radiogroup.className).toContain("flex-nowrap")
-    expect(radiogroup.className).toContain("overflow-x-auto")
-    expect(radiogroup.className).toContain("border-b")
-    expect(radiogroup.className).not.toContain("bg-[var(--well)]")
-  })
-
-  it("passes aria-label to the radiogroup", () => {
-    render(
-      <SegmentedControl
-        value="all"
-        onValueChange={vi.fn()}
-        options={options}
-        aria-label="Scope filter"
-      />,
-    )
-    expect(screen.getByRole("radiogroup")).toHaveAttribute("aria-label", "Scope filter")
-  })
-
-  it("passes aria-labelledby to the radiogroup", () => {
-    render(
-      <SegmentedControl
-        value="all"
-        onValueChange={vi.fn()}
-        options={options}
-        aria-labelledby="heading-id"
-      />,
-    )
-    expect(screen.getByRole("radiogroup")).toHaveAttribute("aria-labelledby", "heading-id")
-  })
-
-  it("passes id to the radiogroup", () => {
-    render(
-      <SegmentedControl
-        value="all"
-        onValueChange={vi.fn()}
-        options={options}
-        id="scope-control"
-      />,
-    )
-    expect(screen.getByRole("radiogroup")).toHaveAttribute("id", "scope-control")
-  })
-})
-
-describe("SegmentedControl test ids", () => {
-  it("renders option and group test ids for end-to-end selectors", () => {
-    render(
-      <SegmentedControl
-        aria-label="Workbench view"
-        data-testid="workbench-tabs"
-        value="code"
-        onValueChange={vi.fn()}
-        options={[
-          { value: "code", label: "Code", testId: "workbench-tab-code" },
-          { value: "preview", label: "Preview", testId: "workbench-tab-preview" },
-        ]}
-      />,
-    )
-    expect(screen.getByTestId("workbench-tabs")).toHaveAttribute("role", "radiogroup")
-    expect(screen.getByTestId("workbench-tab-preview")).toHaveAttribute("aria-checked", "false")
-    expect(screen.getByTestId("workbench-tab-code")).toHaveAttribute("aria-checked", "true")
-  })
-})
-
-describe("SegmentedControl tabs on a narrow strip", () => {
-  // jsdom has no layout. Model a 250px strip holding six 100px tabs, so the
-  // strip scrolls and some tabs sit past its edges.
-  const STRIP = 250
-  const TAB = 100
-  const scroll = new WeakMap<Element, number>()
-  const overrides: Array<[object, string, PropertyDescriptor | undefined]> = []
-  const define = (proto: object, key: string, descriptor: PropertyDescriptor) => {
-    overrides.push([proto, key, Object.getOwnPropertyDescriptor(proto, key)])
-    Object.defineProperty(proto, key, { configurable: true, ...descriptor })
-  }
-  const isStrip = (el: Element) => el.getAttribute("role") === "radiogroup"
-  // Options sit side by side; the edge chevrons take no room in the row.
-  const index = (el: Element) => Array.from(el.parentElement?.querySelectorAll(':scope > [role="radio"]') ?? []).indexOf(el)
-
-  beforeEach(() => {
-    define(HTMLElement.prototype, "offsetLeft", { get(this: HTMLElement) { return isStrip(this) ? 0 : index(this) * TAB } })
-    define(HTMLElement.prototype, "offsetWidth", { get(this: HTMLElement) { return isStrip(this) ? STRIP : TAB } })
-    define(Element.prototype, "clientWidth", { get(this: Element) { return isStrip(this) ? STRIP : TAB } })
-    define(Element.prototype, "scrollWidth", { get(this: Element) { return isStrip(this) ? this.querySelectorAll(':scope > [role="radio"]').length * TAB : TAB } })
-    define(Element.prototype, "scrollLeft", {
-      get(this: Element) { return scroll.get(this) ?? 0 },
-      set(this: Element, v: number) { scroll.set(this, v) },
-    })
-  })
-  afterEach(() => {
-    for (const [proto, key, original] of overrides.reverse()) {
-      if (original) Object.defineProperty(proto, key, original)
-      else delete (proto as Record<string, unknown>)[key]
-    }
-    overrides.length = 0
-  })
-
-  const work: SegmentedControlOption[] = ["Today", "Messages", "Tasks", "Operations", "Payments", "People"].map(
-    (label) => ({ value: label.toLowerCase(), label }),
-  )
-
-  it("scrolls the strip, not the page, so the selected tab is in view", () => {
-    const { rerender } = render(
-      <SegmentedControl aria-label="Work" variant="tabs" value="payments" onValueChange={vi.fn()} options={work} />,
-    )
-    const strip = screen.getByRole("radiogroup")
-    // Payments spans 400-500px: its right edge clears the 32px chevron, plus a 4px gap, in the 250px view.
-    expect(strip.scrollLeft).toBe(500 - STRIP + 32 + 4)
-
-    rerender(<SegmentedControl aria-label="Work" variant="tabs" value="today" onValueChange={vi.fn()} options={work} />)
-    expect(strip.scrollLeft).toBe(0)
-  })
-
-  it("shows a chevron at the edge that has more tabs past it", () => {
-    const { rerender } = render(
-      <SegmentedControl aria-label="Work" variant="tabs" value="today" onValueChange={vi.fn()} options={work} />,
-    )
-    const strip = screen.getByRole("radiogroup")
-    expect(strip).toHaveAttribute("data-overflow-end", "true")
-    expect(strip).not.toHaveAttribute("data-overflow-start")
-    expect(strip.querySelector('[data-scroll-cue="end"]')).not.toBeNull()
-    expect(strip.querySelector('[data-scroll-cue="start"]')).toBeNull()
-
-    rerender(<SegmentedControl aria-label="Work" variant="tabs" value="people" onValueChange={vi.fn()} options={work} />)
-    expect(strip).toHaveAttribute("data-overflow-start", "true")
-    expect(strip).not.toHaveAttribute("data-overflow-end")
-    expect(strip.querySelector('[data-scroll-cue="start"]')).not.toBeNull()
-    expect(strip.querySelector('[data-scroll-cue="end"]')).toBeNull()
-  })
-
-  it("keeps the chevrons out of the radio group and the tab order", () => {
-    render(<SegmentedControl aria-label="Work" variant="tabs" value="today" onValueChange={vi.fn()} options={work} />)
-    expect(screen.getAllByRole("radio")).toHaveLength(work.length)
-    const cue = screen.getByRole("radiogroup").querySelector('[data-scroll-cue="end"]')
-    expect(cue).toHaveAttribute("aria-hidden", "true")
-    expect(cue).toHaveAttribute("tabindex", "-1")
-  })
-
-  it("leaves a strip that fits without chevrons", () => {
-    render(<SegmentedControl aria-label="Work" variant="tabs" value="all" onValueChange={vi.fn()} options={options.slice(0, 2)} />)
-    const strip = screen.getByRole("radiogroup")
-    expect(strip).not.toHaveAttribute("data-overflow-start")
-    expect(strip).not.toHaveAttribute("data-overflow-end")
-    expect(strip.querySelector("[data-scroll-cue]")).toBeNull()
-  })
-})
-
-describe("SegmentedControl stable labels and touch targets", () => {
-  it.each(["row", "tabs"] as const)("keeps one label weight whichever %s option is selected", (variant) => {
-    render(<SegmentedControl aria-label="Scope" variant={variant} value="personal" onValueChange={vi.fn()} options={options} />)
-    for (const radio of screen.getAllByRole("radio")) {
-      expect(radio.className).toContain("font-medium")
-      expect(radio.className).not.toMatch(/font-(semibold|bold)/)
-    }
-  })
-
-  it("gives each tab a 44px hit height on a coarse pointer", () => {
-    render(<SegmentedControl aria-label="Scope" variant="tabs" value="all" onValueChange={vi.fn()} options={options} />)
-    for (const radio of screen.getAllByRole("radio")) {
-      expect(radio.className).toContain("pointer-coarse:min-h-11")
-    }
-  })
-})

package/src/primitives/table.test.tsx

@@ -1,72 +0,0 @@
-import { createRef } from "react";
-import { render, screen, within } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TableProps } from "./table";
-
-function UsageTable(props: TableProps) {
-  return <Table {...props}>
-    <TableCaption>Usage</TableCaption>
-    <TableHeader><TableRow><TableHead scope="col" id="resource">Resource</TableHead><TableHead scope="col" id="count">Count</TableHead></TableRow></TableHeader>
-    <TableBody><TableRow><TableHead scope="row" id="builds">Builds</TableHead><TableCell headers="builds count">3</TableCell></TableRow></TableBody>
-    <TableFooter><TableRow><TableCell colSpan={2}>One resource</TableCell></TableRow></TableFooter>
-  </Table>;
-}
-
-describe("Table", () => {
-  it("preserves the default wrapper without imposing an unnamed region or tab stop", () => {
-    render(<UsageTable />);
-    const table = screen.getByRole("table", { name: "Usage" });
-    expect(table.parentElement?.tagName).toBe("DIV");
-    expect(table.parentElement).toHaveClass("relative", "w-full", "overflow-auto");
-    expect(table.parentElement).not.toHaveAttribute("role");
-    expect(table.parentElement).not.toHaveAttribute("tabindex");
-  });
-
-  it("retains native caption, table sections, headers, scope and spans", () => {
-    render(<UsageTable />);
-    const table = screen.getByRole("table", { name: "Usage" });
-    expect(Array.from(table.children).map((node) => node.tagName)).toEqual(["CAPTION", "THEAD", "TBODY", "TFOOT"]);
-    expect(screen.getByRole("columnheader", { name: "Resource" })).toHaveAttribute("scope", "col");
-    expect(screen.getByRole("rowheader", { name: "Builds" })).toHaveAttribute("scope", "row");
-    expect(screen.getByRole("cell", { name: "3" })).toHaveAttribute("headers", "builds count");
-    expect(screen.getByRole("cell", { name: "One resource" })).toHaveAttribute("colspan", "2");
-    expect(screen.queryByRole("grid")).toBeNull();
-  });
-
-  it("allows a caller-named keyboard-focusable wrapper separately from table attributes", async () => {
-    const user = userEvent.setup();
-    render(<><h2 id="usage-title">Resource usage</h2><UsageTable id="usage-table" className="min-w-[40rem]" wrapperProps={{ role: "region", "aria-labelledby": "usage-title", tabIndex: 0, className: "max-h-80" }} /></>);
-    const region = screen.getByRole("region", { name: "Resource usage" });
-    const table = within(region).getByRole("table", { name: "Usage" });
-    expect(region).toHaveClass("max-h-80", "overflow-auto");
-    expect(table).toHaveAttribute("id", "usage-table");
-    expect(table).not.toHaveAttribute("tabindex");
-    expect(table).not.toHaveClass("max-h-80");
-    await user.tab();
-    expect(region).toHaveFocus();
-  });
-
-  it("returns a bare table for a caller-owned scroll region, without leaking wrapper props", () => {
-    render(<div role="region" aria-label="Outer" className="overflow-auto">
-      <UsageTable wrapper={false} wrapperProps={{ id: "unused-wrapper" }} />
-    </div>);
-    const outer = screen.getByRole("region", { name: "Outer" });
-    const table = screen.getByRole("table", { name: "Usage" });
-    expect(outer.firstElementChild).toBe(table);
-    expect(outer.querySelectorAll(".overflow-auto")).toHaveLength(0);
-    expect(table).not.toHaveAttribute("wrapper");
-    expect(table).not.toHaveAttribute("wrapperProps");
-    expect(table).not.toHaveAttribute("id", "unused-wrapper");
-  });
-
-  it("keeps the public ref and native attributes/handlers on the table", async () => {
-    const ref = createRef<HTMLTableElement>();
-    const onClick = vi.fn();
-    render(<Table ref={ref} cellPadding={0} onClick={onClick} aria-label="Details"><TableBody><TableRow><TableCell>Open</TableCell></TableRow></TableBody></Table>);
-    expect(ref.current).toBe(screen.getByRole("table", { name: "Details" }));
-    expect(ref.current).toHaveAttribute("cellpadding", "0");
-    await userEvent.setup().click(screen.getByRole("cell", { name: "Open" }));
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-});