@charcuterie/ui 4.20.1 → 4.21.0

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/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")

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"