@charcuterie/ui 4.20.1 → 4.22.0

package/src/TableColumns/TableColumns.stories.tsx

@@ -0,0 +1,81 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { ContainerBoard } from "../board.storyHelpers.tsx"
+import { TableColumns } from "./TableColumns.tsx"
+
+const meta = {
+  title: "Components/Data/TableColumns",
+  component: TableColumns,
+  args: {
+    columns: [
+      {
+        key: "name",
+        label: "Name",
+        isVisible: true,
+        isRequired: true,
+      },
+      {
+        key: "duration",
+        label: "Duration",
+        isVisible: true,
+      },
+      { key: "median", label: "Median", isVisible: false },
+    ],
+    onChange: () => {},
+  },
+} satisfies Meta<typeof TableColumns>
+export default meta
+type Story = StoryObj<typeof meta>
+const Controlled = (
+  props: React.ComponentProps<typeof TableColumns>,
+) => {
+  const [columns, setColumns] = useState([...props.columns])
+  return (
+    <>
+      <TableColumns
+        {...props}
+        columns={columns}
+        onChange={setColumns}
+      />
+      <p>
+        {columns
+          .filter((column) => column.isVisible)
+          .map((column) => column.label)
+          .join(", ")}
+      </p>
+    </>
+  )
+}
+export const Playground: Story = {
+  parameters: playgroundParameters,
+  render: (props) => <Controlled {...props} />,
+}
+export const AllVariants: Story = {
+  render: (props) => (
+    <Controlled {...props} label="Choose columns" />
+  ),
+}
+export const AllStates: Story = {
+  args: {
+    columns: [
+      {
+        key: "name",
+        label: "Name",
+        isVisible: true,
+        isRequired: true,
+      },
+    ],
+  },
+  render: (props) => <Controlled {...props} />,
+}
+export const Responsive: Story = {
+  render: (props) => (
+    <ContainerBoard>
+      {() => <Controlled {...props} />}
+    </ContainerBoard>
+  ),
+}
+export const Interactive: Story = {
+  render: (props) => <Controlled {...props} />,
+}

package/src/TableColumns/TableColumns.test.tsx

@@ -0,0 +1,35 @@
+import { composeStories } from "@storybook/react"
+import { expect, userEvent } from "storybook/test"
+import { test } from "vitest"
+import { mountStory } from "../mountStory.testHelpers.ts"
+import { expectAgentDrivable } from "../testing/index.ts"
+import * as stories from "./TableColumns.stories.tsx"
+
+const { Interactive } = composeStories(stories)
+test("column visibility and order can be changed with named controls", async () => {
+  const { canvas, body } = await mountStory(Interactive)
+  await userEvent.click(
+    expectAgentDrivable(canvas, {
+      role: "button",
+      name: "Columns",
+    }),
+  )
+  await userEvent.click(
+    expectAgentDrivable(body, {
+      role: "checkbox",
+      name: "Median",
+    }),
+  )
+  await expect(
+    canvas.getByText("Name, Duration, Median"),
+  ).toBeVisible()
+  await userEvent.click(
+    expectAgentDrivable(body, {
+      role: "button",
+      name: "Move Median earlier",
+    }),
+  )
+  await expect(
+    canvas.getByText("Name, Median, Duration"),
+  ).toBeVisible()
+})

package/src/TableColumns/TableColumns.tsx

@@ -0,0 +1,93 @@
+import { useState } from "react"
+import { Button } from "../Button/Button.tsx"
+import { Checkbox } from "../Checkbox/Checkbox.tsx"
+import { Popover } from "../Popover/Popover.tsx"
+import { ReorderList } from "../ReorderList/ReorderList.tsx"
+
+export type TableColumnChoice = {
+  key: string
+  label: string
+  isVisible: boolean
+  isRequired?: boolean
+}
+export type TableColumnsProps = {
+  columns: readonly TableColumnChoice[]
+  onChange: (columns: TableColumnChoice[]) => void
+  label?: string
+}
+
+/** Column visibility and ordering, with keyboard moves as the primary path. */
+export const TableColumns = ({
+  columns,
+  onChange,
+  label = "Columns",
+}: TableColumnsProps) => {
+  const [isVisible, setIsVisible] = useState(false)
+  return (
+    <Popover
+      heading="Table columns"
+      isVisible={isVisible}
+      onDismiss={() => setIsVisible(false)}
+      trigger={
+        <Button
+          intent="neutral"
+          appearance="soft"
+          onClick={() => setIsVisible(!isVisible)}
+        >
+          {label}
+        </Button>
+      }
+    >
+      <ReorderList
+        label="Column order"
+        items={columns}
+        onReorder={(from, to) => {
+          const next = [...columns]
+          const [column] = next.splice(from, 1)
+          next.splice(to, 0, column)
+          onChange(next)
+        }}
+        renderItem={({ item, isFirst, isLast, moveBy }) => (
+          <div className="flex flex-wrap items-center justify-between gap-2 py-1">
+            <Checkbox
+              label={item.label}
+              isChecked={item.isVisible}
+              isDisabled={item.isRequired}
+              onChange={(isChecked) =>
+                onChange(
+                  columns.map((column) =>
+                    column.key === item.key
+                      ? { ...column, isVisible: isChecked }
+                      : column,
+                  ),
+                )
+              }
+            />
+            <div className="flex gap-1">
+              <Button
+                size="sm"
+                intent="neutral"
+                appearance="ghost"
+                aria-label={`Move ${item.label} earlier`}
+                isDisabled={isFirst}
+                onClick={() => moveBy(-1)}
+              >
+                Earlier
+              </Button>
+              <Button
+                size="sm"
+                intent="neutral"
+                appearance="ghost"
+                aria-label={`Move ${item.label} later`}
+                isDisabled={isLast}
+                onClick={() => moveBy(1)}
+              >
+                Later
+              </Button>
+            </div>
+          </div>
+        )}
+      />
+    </Popover>
+  )
+}

package/src/VirtualizedGrid/VirtualizedGrid.test.tsx

@@ -308,15 +308,28 @@ test("a grid inside a hidden panel mounts nothing and reveals without scrolling"
   // Wait for the revealed grid to have MEASURED, not merely to
   // have mounted — the adjustment, when it happens, happens on the
   // virtualizer's resize path.
+  //
+  // Two signals, because one of them depends on the window. The end
+  // padding stands in for rows below the window, so it is only ever
+  // positive when the list is longer than the window. In a 3440x1440
+  // window all 48 cards fit, the padding is rightly 0, and waiting for
+  // it timed out on a grid that was working. There the signal is the
+  // LAST card drawn with a real height.
   await waitFor(async () => {
-    await expect(
-      Number(
-        getShownList().style.paddingBlockEnd.replace(
-          "px",
-          "",
-        ),
-      ),
-    ).toBeGreaterThan(0)
+    const list = getShownList()
+
+    const isPadded =
+      Number(list.style.paddingBlockEnd.replace("px", "")) >
+      0
+
+    const lastCell = list.querySelector<HTMLElement>(
+      `li[aria-posinset="${list.querySelector("li")?.getAttribute("aria-setsize")}"]`,
+    )
+
+    const isEveryCardDrawn =
+      (lastCell?.getBoundingClientRect().height ?? 0) > 0
+
+    await expect(isPadded || isEveryCardDrawn).toBe(true)
   })
 
   // The symptom, kept as a guard rather than as the proof. It is

package/src/VirtualizedGrid/VirtualizedGrid.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react"
 import { useLayoutEffect, useState } from "react"
 
+import type { GridLayout } from "../AdaptiveGrid/chooseColumns.ts"
 import type { BlockSizeResolver } from "../AdaptiveGrid/useAdaptiveColumns.ts"
 import { useAdaptiveColumns } from "../AdaptiveGrid/useAdaptiveColumns.ts"
 import { toClassName } from "../toClassName.ts"
@@ -62,6 +63,8 @@ export type VirtualizedGridProps<Item> = {
    * is one whose length a reader cannot count for itself.
    */
   label?: string
+  /** Opt in to width-first media layout. */
+  layout?: GridLayout
   /** The most columns the automatic answer will take. */
   maxColumns?: number
   /** The narrowest a column may be, in CSS px. */
@@ -203,6 +206,7 @@ export const VirtualizedGrid = <Item,>({
   itemBlockSize,
   items,
   label,
+  layout: gridLayout,
   maxColumns,
   minColumnInlineSize,
   overscanRows = 4,
@@ -214,6 +218,8 @@ export const VirtualizedGrid = <Item,>({
     chromeBlockSize,
     itemBlockSize,
     itemCount: items.length,
+    gap,
+    layout: gridLayout,
     maxAutoColumns: maxColumns,
     minColumnInlineSize,
     storageKey,

package/src/board.storyHelpers.tsx

@@ -133,7 +133,13 @@ export const ContainerBoard = ({
       },
     ].map((panel) => (
       <div
-        className="flex flex-col gap-2"
+        // `shrink-0`, or the promise above is false: a flex item
+        // shrinks to its line, so in a window narrower than 34rem the
+        // widest panel quietly became the window's width and every
+        // "container, not window" test measured the window after all.
+        // A board wider than the window scrolls, which is the honest
+        // picture of three fixed containers on a phone.
+        className="flex shrink-0 flex-col gap-2"
         key={panel.label}
         style={{ inlineSize: panel.inlineSize }}
       >

package/src/htmlEditor/HtmlEditor.test.tsx

@@ -212,6 +212,35 @@ test("external defaults never overwrite the document; real edits emit HTML and k
   ).not.toHaveTextContent("data-old-format")
 })
 
+/**
+ * A toolbar action wherever the toolbar put it. On the phone the whole
+ * row folds into the overflow panel, so a test that looked for "Bold"
+ * in the row asserted about the window rather than the editor — and a
+ * read-only editor must refuse formatting from the panel too.
+ */
+const findToolbarAction = async (
+  toolbar: HTMLElement,
+  name: string,
+) => {
+  const inRow = within(toolbar).queryByRole("button", {
+    name,
+  })
+
+  if (inRow) {
+    return inRow
+  }
+
+  await userEvent.click(
+    within(toolbar).getByRole("button", {
+      name: "More actions",
+    }),
+  )
+
+  return within(
+    await within(document.body).findByRole("dialog"),
+  ).getByRole("button", { name })
+}
+
 test("read-only and disabled editors refuse typing and formatting", async () => {
   const { canvas } = await mountStory(AllStates)
   const readOnly = await canvas.findByRole("textbox", {
@@ -234,11 +263,12 @@ test("read-only and disabled editors refuse typing and formatting", async () =>
   )
   await expect(disabled).toHaveAttribute("tabindex", "-1")
   await expect(
-    within(
+    await findToolbarAction(
       canvas.getByRole("toolbar", {
         name: "Read-only note formatting",
       }),
-    ).getByRole("button", { name: "Bold" }),
+      "Bold",
+    ),
   ).toBeDisabled()
   const required = canvas.getByRole("textbox", {
     name: "Required notes",

package/src/index.ts

@@ -130,6 +130,8 @@ export type {
 export { ColorSchemeToggle } from "./ColorSchemeToggle/ColorSchemeToggle.tsx"
 export type { ComboboxProps } from "./Combobox/Combobox.tsx"
 export { Combobox } from "./Combobox/Combobox.tsx"
+export type { ComparisonChartProps } from "./ComparisonChart/ComparisonChart.tsx"
+export { ComparisonChart } from "./ComparisonChart/ComparisonChart.tsx"
 export type {
   CopyButtonProps,
   CopyStatus,
@@ -260,7 +262,10 @@ export {
   toBarPlacement,
   toTimelineAxis,
 } from "./LaneTimeline/laneTimelineGeometry.ts"
-export type { LightboxProps } from "./Lightbox/Lightbox.tsx"
+export type {
+  LightboxImage,
+  LightboxProps,
+} from "./Lightbox/Lightbox.tsx"
 export { Lightbox } from "./Lightbox/Lightbox.tsx"
 export type {
   ListboxItem,
@@ -496,6 +501,11 @@ export {
   getConnectionLabel,
   getIsConnectionBusy,
 } from "./statusIntent.ts"
+export type {
+  TableColumnChoice,
+  TableColumnsProps,
+} from "./TableColumns/TableColumns.tsx"
+export { TableColumns } from "./TableColumns/TableColumns.tsx"
 export type { TableViewportProps } from "./TableViewport/TableViewport.tsx"
 export { TableViewport } from "./TableViewport/TableViewport.tsx"
 export type {

package/src/markdownEditorCodeMirror/MarkdownView.test.tsx

@@ -59,14 +59,17 @@ test("it is an article whose headings are headings", async () => {
     "false",
   )
 
+  // `findBy`, not `getBy`: CodeMirror draws its decorations after the
+  // first paint, and with four browser windows sharing the runner the
+  // second heading was not drawn yet when a synchronous query looked.
   await expect(
-    canvas.getByRole("heading", {
+    await canvas.findByRole("heading", {
       name: "Rack move, phase two",
     }),
   ).toHaveAttribute("aria-level", "1")
 
   await expect(
-    canvas.getByRole("heading", {
+    await canvas.findByRole("heading", {
       name: "Before the window",
     }),
   ).toHaveAttribute("aria-level", "2")
@@ -202,7 +205,7 @@ test("a link is a real anchor in the tab order", async () => {
 test("a checkbox is inert until a consumer says where the tick goes", async () => {
   const { canvas } = await mountStory(AllStates)
 
-  const inert = canvas.getByRole("checkbox", {
+  const inert = await canvas.findByRole("checkbox", {
     name: "Photograph the current cabling",
   })
 
@@ -239,9 +242,11 @@ test("hostile markdown renders as characters, not as behaviour", async () => {
   const { canvas, canvasElement } =
     await mountStory(HostileMarkdown)
 
-  const hrefs = canvas
-    .getAllByRole("link")
-    .map((link: HTMLElement) => link.getAttribute("href"))
+  // `findAllBy`: the links are CodeMirror decorations, drawn after the
+  // first paint — the same race as the headings test above.
+  const hrefs = (await canvas.findAllByRole("link")).map(
+    (link: HTMLElement) => link.getAttribute("href"),
+  )
 
   await expect(hrefs).toEqual([
     "https://example.invalid/runbook",
@@ -336,7 +341,7 @@ test("inline markup in link text does not drop the document to raw source", asyn
   // The canary. This heading has nothing to do with links, and it
   // is what stopped rendering when the plugin died.
   await expect(
-    canvas.getByRole("heading", {
+    await canvas.findByRole("heading", {
       name: "Where the fix landed",
     }),
   ).toHaveAttribute("aria-level", "2")
@@ -344,11 +349,16 @@ test("inline markup in link text does not drop the document to raw source", asyn
   // No raw source anywhere in the document.
   const article = canvas.getByRole("article")
 
-  await expect(article.textContent).not.toContain("](")
+  // The heading can paint before lower link decorations finish parsing.
+  // Retry the complete contract rather than treating that partial paint
+  // as the final document; all three source-marker assertions still apply.
+  await waitFor(async () => {
+    await expect(article.textContent).not.toContain("](")
 
-  await expect(article.textContent).not.toContain("**")
+    await expect(article.textContent).not.toContain("**")
 
-  await expect(article.textContent).not.toContain("~~")
+    await expect(article.textContent).not.toContain("~~")
+  })
 })
 
 /**
@@ -415,6 +425,14 @@ test("a code span is smaller than the prose it sits in", async () => {
 
   const article = canvas.getByRole("article")
 
+  // CodeMirror can finish its syntax decorations after the story mounts.
+  // Wait for the measured span itself rather than capturing a stale null.
+  await waitFor(() => {
+    expect(
+      article.querySelector(".cm-md-code"),
+    ).not.toBeNull()
+  })
+
   const code = article.querySelector(".cm-md-code")
 
   await expect(code).not.toBeNull()

package/src/mdxReferences.test.ts

@@ -6,7 +6,7 @@
  * and does not fail `vitest` — MDX resolves `of` at *runtime*, so a
  * renamed story turns into `of={undefined}` and the docs page
  * renders Storybook's "component failed to render" panel instead of
- * the page. `yarn smoke:storybook` catches it, which is good, but
+ * the page. `pnpm smoke:storybook` catches it, which is good, but
  * only after a full Storybook build; this catches it in under a
  * second, which is the difference between noticing during the edit
  * and noticing in CI.

package/src/sourceRules.test.ts

@@ -622,7 +622,8 @@ test("the barrel is the only place components are re-exported", async () => {
   // Chart shares portable SVG geometry with Preact and image consumers.
   // TableViewport owns readable comparisons and full-window expansion.
   // MetricCard shares prominent values and category-coloured icons through Card.
-  expect(componentNames.length).toBe(75)
+  // ComparisonChart and TableColumns share compact comparisons and column controls.
+  expect(componentNames.length).toBe(77)
 
   for (const name of componentNames) {
     expect(barrel).toContain(`export { ${name} }`)

package/src/vitestProvidedContext.d.ts

@@ -0,0 +1,6 @@
+/*
+ * Puts `inject("viewport")`'s type in front of every test in this
+ * package. The augmentation itself lives beside the viewport list in
+ * `@charcuterie/vitest-config`, so the four names are declared once.
+ */
+import "@charcuterie/vitest-config/viewports.js"