@charcuterie/ui 3.17.0 → 3.19.1

package/dist/viewport.testHelpers.js

@@ -11,17 +11,23 @@ import { page } from "@vitest/browser/context";
  * fails intermittently — which is the worst possible property for
  * the one gate that says the shell does not scroll sideways.
  *
- * Polling `innerWidth` is the honest wait: it is the same number
- * the media queries and the layout resolved against, so when it
- * matches, the thing under test really is at the width the test
- * claims.
+ * Polling `innerWidth`/`innerHeight` is the honest wait: they are the
+ * same numbers the media queries and the layout resolved against, so
+ * when they match, the thing under test really is at the size the
+ * test claims.
+ *
+ * **Height counts too**, and it did not used to. A panel row's size
+ * steps down under `(height <= 40rem)` (`usePanelItemSize`), so a test
+ * that shrinks only the height would have raced the resize with
+ * nothing to wait on and measured the tall rows about half the time.
  */
 export const setViewport = async ({ height, width, }) => {
     await page.viewport(width, height);
     const deadline = Date.now() + 2000;
-    while (globalThis.innerWidth !== width) {
+    while (globalThis.innerWidth !== width ||
+        globalThis.innerHeight !== height) {
         if (Date.now() > deadline) {
-            throw new Error(`The viewport never reached ${width}px — it is ${globalThis.innerWidth}px. Every width assertion after this point would be measuring the wrong page.`);
+            throw new Error(`The viewport never reached ${width}x${height}px — it is ${globalThis.innerWidth}x${globalThis.innerHeight}px. Every size assertion after this point would be measuring the wrong page.`);
         }
         await new Promise((resolve) => {
             globalThis.requestAnimationFrame(resolve);
@@ -31,4 +37,10 @@ export const setViewport = async ({ height, width, }) => {
 /** A phone in portrait — the width plex-channels scrolls at. */
 export const PHONE = { height: 844, width: 390 };
 export const DESKTOP = { height: 900, width: 1440 };
+/**
+ * A window short enough to trip `usePanelItemSize`'s first step-down
+ * (`height <= 40rem`, so 640px) and wide enough that nothing else
+ * about the layout changes with it.
+ */
+export const SHORT_WINDOW = { height: 600, width: 1440 };
 //# sourceMappingURL=viewport.testHelpers.js.map

package/dist/viewport.testHelpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"viewport.testHelpers.js","sourceRoot":"","sources":["../src/viewport.testHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAE9C;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,EAAE,EAChC,MAAM,EACN,KAAK,GAIN,EAAiB,EAAE;IAClB,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IAElC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAA;IAElC,OAAO,UAAU,CAAC,UAAU,KAAK,KAAK,EAAE,CAAC;QACvC,IAAI,IAAI,CAAC,GAAG,EAAE,GAAG,QAAQ,EAAE,CAAC;YAC1B,MAAM,IAAI,KAAK,CACb,8BAA8B,KAAK,cAAc,UAAU,CAAC,UAAU,+EAA+E,CACtJ,CAAA;QACH,CAAC;QAED,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC5B,UAAU,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAA;QAC3C,CAAC,CAAC,CAAA;IACJ,CAAC;AACH,CAAC,CAAA;AAED,gEAAgE;AAChE,MAAM,CAAC,MAAM,KAAK,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAA;AAEhD,MAAM,CAAC,MAAM,OAAO,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"viewport.testHelpers.js","sourceRoot":"","sources":["../src/viewport.testHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAE9C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,EAAE,EAChC,MAAM,EACN,KAAK,GAIN,EAAiB,EAAE;IAClB,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IAElC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAA;IAElC,OACE,UAAU,CAAC,UAAU,KAAK,KAAK;QAC/B,UAAU,CAAC,WAAW,KAAK,MAAM,EACjC,CAAC;QACD,IAAI,IAAI,CAAC,GAAG,EAAE,GAAG,QAAQ,EAAE,CAAC;YAC1B,MAAM,IAAI,KAAK,CACb,8BAA8B,KAAK,IAAI,MAAM,cAAc,UAAU,CAAC,UAAU,IAAI,UAAU,CAAC,WAAW,8EAA8E,CACzL,CAAA;QACH,CAAC;QAED,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC5B,UAAU,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAA;QAC3C,CAAC,CAAC,CAAA;IACJ,CAAC;AACH,CAAC,CAAA;AAED,gEAAgE;AAChE,MAAM,CAAC,MAAM,KAAK,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAA;AAEhD,MAAM,CAAC,MAAM,OAAO,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,CAAA;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "3.17.0",
+  "version": "3.19.1",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",
@@ -53,7 +53,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@charcuterie/logic": "2.2.0",
+    "@charcuterie/logic": "2.3.0",
     "@charcuterie/tokens": "1.6.0",
     "@floating-ui/react": "^0.27.20",
     "@tanstack/react-virtual": "^3.13.12",

package/src/Combobox/Combobox.mdx

@@ -99,3 +99,29 @@ for a 4,000-item list. Below the threshold the list is plain DOM.
 <Canvas of={ComboboxStories.Virtualized} />
 
 <Canvas of={ComboboxStories.Interactive} />
+
+## One panel, one row size
+
+`itemSize` drives the search field **and** the options together, from the same
+density-aware `--control-height-*` tokens a `Button` reads. It defaults to `md`, so at the
+default a trigger, the search field and every option are all 2.25rem.
+
+Covering the search row is the point rather than a bonus. The report that started this was
+that a `Combobox`'s trigger was bigger than the options under it — but the panel's own
+field was bigger than them too, and **two sizes inside one panel** is the defect rather
+than either number being wrong.
+
+It also retires a hand-picked number. The search row used to carry `px-3` to line its caret
+up with the option labels below it, which worked only while the option padding was a
+hardcoded `px-2`; it is now wrapped in the list's own `p-1` and given the same row-size
+class, so the two cannot drift apart again.
+
+`lg` is the fat one — 2.75rem, the 44px WCAG 2.5.5 target. A window shorter than 40rem
+steps each size down one step on its own.
+
+The virtualizer's `estimateSize` tracks `itemSize` too. Every row is re-measured
+immediately, so the estimate only decides how far the scrollbar lies before the first
+measurement lands — but a `lg` list opening with a scrollbar a third too short and visibly
+settling is exactly the kind of thing nobody files a bug about.
+
+<Canvas of={ComboboxStories.ItemSizes} />

package/src/Combobox/Combobox.stories.tsx

@@ -1,9 +1,15 @@
 import { useVisibility } from "@charcuterie/logic"
+import type { ControlSize } from "@charcuterie/tokens"
 import type { Meta, StoryObj } from "@storybook/react"
 import type { ReactNode } from "react"
 import { useRef, useState } from "react"
 
+import { controlSizeArgType } from "../argTypes.storyHelpers.ts"
 import { Button } from "../Button/Button.tsx"
+import {
+  StoryCell,
+  StoryGrid,
+} from "../board.storyHelpers.tsx"
 import type { ListboxItem } from "../Listbox/Listbox.tsx"
 import { Combobox } from "./Combobox.tsx"
 
@@ -49,6 +55,8 @@ const meta = {
   title: "Components/Controls/Combobox",
   component: Combobox,
   parameters: { layout: "padded" },
+  argTypes: { itemSize: controlSizeArgType },
+  args: { itemSize: "md" },
 } satisfies Meta<typeof Combobox>
 
 export default meta
@@ -65,6 +73,7 @@ const ComboboxHarness = ({
   isLoading,
   isMultiple,
   isVirtualized,
+  itemSize,
   options,
   selectedValue,
   triggerLabel,
@@ -78,6 +87,7 @@ const ComboboxHarness = ({
   isLoading?: boolean
   isMultiple?: boolean
   isVirtualized?: boolean
+  itemSize?: ControlSize
   options: ListboxItem[]
   selectedValue?: readonly string[] | string
   triggerLabel: string
@@ -105,6 +115,7 @@ const ComboboxHarness = ({
         isLoading={isLoading}
         isMultiple={isMultiple}
         isVirtualized={isVirtualized}
+        itemSize={itemSize}
         isVisible={isVisible}
         onDismiss={hide}
         onSelect={(value) => {
@@ -589,3 +600,57 @@ export const VirtualizedChosenValue: Story = {
     />
   ),
 }
+
+/**
+ * The three row sizes — and the fix the owner's screenshot asked for.
+ *
+ * The report was that a `Combobox`'s trigger was visibly bigger than
+ * the options under it. Two things were true at once: the option row
+ * was a hardcoded `px-2 py-1.5 text-sm` that no control shares, and
+ * the panel's **own** search field was bigger than the options it
+ * filters — two sizes inside one panel, which is the defect rather
+ * than either number being wrong.
+ *
+ * `itemSize` now drives the search row and the options together, from
+ * the same `--control-height-*` a `Button` reads. At the `md` default
+ * a trigger, the search field and every option are all 2.25rem.
+ */
+export const ItemSizes: Story = {
+  args: {
+    isVisible: false,
+    onDismiss: () => {},
+    onSelect: () => {},
+    options: LANGUAGES,
+    trigger: <Button>Search languages</Button>,
+  },
+  render: () => (
+    <StoryGrid columns={3}>
+      <StoryCell label="sm — the old option">
+        <ComboboxHarness
+          isInitiallyVisible
+          itemSize="sm"
+          options={LANGUAGES}
+          triggerLabel="Search languages"
+        />
+      </StoryCell>
+
+      <StoryCell label="md — the default, matches the trigger">
+        <ComboboxHarness
+          isInitiallyVisible
+          itemSize="md"
+          options={LANGUAGES}
+          triggerLabel="Search languages"
+        />
+      </StoryCell>
+
+      <StoryCell label="lg — the fat option (44px)">
+        <ComboboxHarness
+          isInitiallyVisible
+          itemSize="lg"
+          options={LANGUAGES}
+          triggerLabel="Search languages"
+        />
+      </StoryCell>
+    </StoryGrid>
+  ),
+}

package/src/Combobox/Combobox.test.tsx

@@ -616,3 +616,138 @@ test("the chosen row is scrolled into view, not merely highlighted", async () =>
     )
   })
 })
+
+test("reopening without picking still lands on the chosen row", async () => {
+  const mounted = await mountStory(ChosenValueOnOpen)
+
+  const trigger = expectAgentDrivable(mounted.canvas, {
+    name: "Search languages",
+    role: "button",
+  })
+
+  const isChosenRowInView = () => {
+    const row = mounted.body.getByRole("option", {
+      name: "Item 58",
+    })
+
+    const list = row.closest(
+      "[role=listbox]",
+    ) as HTMLElement
+
+    const listBox = list.getBoundingClientRect()
+    const rowBox = row.getBoundingClientRect()
+
+    return (
+      rowBox.top >= listBox.top &&
+      rowBox.bottom <= listBox.bottom
+    )
+  }
+
+  await userEvent.click(trigger)
+
+  await waitFor(() => {
+    expect(isChosenRowInView()).toBe(true)
+  })
+
+  // Close it the way a misclick-free dismissal does — no pick, so the
+  // chosen value and therefore the seed index are both unchanged.
+  await userEvent.keyboard("{Escape}")
+
+  await waitFor(() => {
+    expect(mounted.body.queryByRole("combobox")).toBeNull()
+  })
+
+  await userEvent.click(trigger)
+
+  // The seed must run again. It nearly did not: `activeIndex` already
+  // held the seeded index from the first open, so setting it was a no-op
+  // and the re-render the scroll rides on never happened.
+  await waitFor(() => {
+    expect(isChosenRowInView()).toBe(true)
+  })
+})
+
+test("a windowed list reseeds its window on every open, not just the first", async () => {
+  const mounted = await mountStory(VirtualizedChosenValue)
+
+  const trigger = expectAgentDrivable(mounted.canvas, {
+    name: "Search 500 tracks",
+    role: "button",
+  })
+
+  // The story opens already showing the window around Track 400.
+  await waitFor(() => {
+    expect(
+      mounted.body.getByRole("option", {
+        name: "Track 400",
+      }),
+    ).toBeInTheDocument()
+  })
+
+  await userEvent.click(trigger)
+
+  await waitFor(() => {
+    expect(mounted.body.queryByRole("combobox")).toBeNull()
+  })
+
+  await userEvent.click(trigger)
+
+  // Rows 1–12 would be the window if the seed had run only once.
+  await waitFor(() => {
+    expect(
+      mounted.body.getByRole("option", {
+        name: "Track 400",
+      }),
+    ).toBeInTheDocument()
+  })
+
+  await expect(
+    mounted.body.queryByRole("option", { name: "Track 1" }),
+  ).toBeNull()
+})
+
+/**
+ * One panel, one row size.
+ *
+ * The owner's report was that the search field was visibly bigger
+ * than the options it filters — *"the button is huge, but the options
+ * don't match it"* — and two sizes inside one panel is the defect,
+ * not the field being wrong or the option being wrong. `itemSize`
+ * drives both, so this measures the pair rather than either number.
+ */
+test("the search row and an option are the same height", async () => {
+  const { body, canvas } = await mountStory(Interactive)
+
+  await userEvent.click(
+    expectAgentDrivable(canvas, {
+      name: "Search languages",
+      role: "button",
+    }),
+  )
+
+  const input = body.getByRole("combobox")
+
+  await waitFor(() => {
+    expect(input).toHaveFocus()
+  })
+
+  // The row is the input's *parent*: the input itself is a bare
+  // `flex-1` field, and the box that carries the row-size class — the
+  // height, the inline padding, the type — is the wrapper around it.
+  const searchRow = input.closest("div")
+
+  const [option] = body.getAllByRole("option")
+
+  expect(option).toBeDefined()
+
+  expect(searchRow?.getBoundingClientRect().height).toBe(
+    option?.getBoundingClientRect().height,
+  )
+
+  // And the query reads at the size of the options it is filtering,
+  // which is inherited from that wrapper rather than set on the input.
+  expect(globalThis.getComputedStyle(input).fontSize).toBe(
+    globalThis.getComputedStyle(option as HTMLElement)
+      .fontSize,
+  )
+})