@charcuterie/ui 4.22.0 → 4.22.1

package/dist/Picker/Picker.d.ts

@@ -84,6 +84,21 @@ export type PickerProps = Omit<ComponentPropsWithRef<"button">, "disabled" | "on
  * mux-magic both moved to it while `id` was still being replaced — but
  * `id` is no longer a trap. Everything else on the button (`data-*`,
  * `onClick`, `form`, …) passes straight through.
+ *
+ * ### A stretched trigger reads like a select, not a button
+ *
+ * `Button` centers its content, which is right for an action and wrong
+ * for a value. Inside a `Field` (a `flex-col`, so the child stretches)
+ * or under `w-full`, the trigger used to become a bar with the value
+ * floating in the middle and the chevron beside it. The value now sits
+ * at the inline start, in a span that grows into the spare width and
+ * ends in an ellipsis when there is too little, and the chevron sits at
+ * the inline end. `justify-between` is passed through `className`, which
+ * `toClassName` merges over `Button`'s `justify-center` rather than
+ * leaving the two to stylesheet order — and the growing span makes the
+ * result correct even if a caller's `className` overrides it. A trigger
+ * at its content width has no spare width to distribute, so it renders
+ * exactly as it did before.
  */
 export declare const Picker: ({ appearance, className, iconEnd, intent, isDisabled, label, onChange, options, placement, placeholder, size, value, ...buttonProps }: PickerProps) => ReactNode;
 //# sourceMappingURL=Picker.d.ts.map

package/dist/Picker/Picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../src/Picker/Picker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACX,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAGzD,MAAM,MAAM,YAAY,GAAG,WAAW,CAAA;AAwBtC,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,GAAG,UAAU,GAAG,OAAO,CAClC,GAAG;IACF,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;IAChC,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,eAAO,MAAM,MAAM,GAAI,uIAcpB,WAAW,KAAG,SAoDhB,CAAA"}
+{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../src/Picker/Picker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACX,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAIzD,MAAM,MAAM,YAAY,GAAG,WAAW,CAAA;AAwBtC,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,GAAG,UAAU,GAAG,OAAO,CAClC,GAAG;IACF,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;IAChC,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,eAAO,MAAM,MAAM,GAAI,uIAcpB,WAAW,KAAG,SA2EhB,CAAA"}

package/dist/Picker/Picker.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useVisibility } from "@charcuterie/logic";
 import { Button } from "../Button/Button.js";
 import { Listbox } from "../Listbox/Listbox.js";
+import { toClassName } from "../toClassName.js";
 /**
  * A constant element rather than a component, for the same reason
  * `Select` inlines its own: a second component in this file trips the
@@ -62,6 +63,21 @@ const CHEVRON_DOWN = (_jsx("svg", { "aria-hidden": "true", className: "size-4",
  * mux-magic both moved to it while `id` was still being replaced — but
  * `id` is no longer a trap. Everything else on the button (`data-*`,
  * `onClick`, `form`, …) passes straight through.
+ *
+ * ### A stretched trigger reads like a select, not a button
+ *
+ * `Button` centers its content, which is right for an action and wrong
+ * for a value. Inside a `Field` (a `flex-col`, so the child stretches)
+ * or under `w-full`, the trigger used to become a bar with the value
+ * floating in the middle and the chevron beside it. The value now sits
+ * at the inline start, in a span that grows into the spare width and
+ * ends in an ellipsis when there is too little, and the chevron sits at
+ * the inline end. `justify-between` is passed through `className`, which
+ * `toClassName` merges over `Button`'s `justify-center` rather than
+ * leaving the two to stylesheet order — and the growing span makes the
+ * result correct even if a caller's `className` overrides it. A trigger
+ * at its content width has no spare width to distribute, so it renders
+ * exactly as it did before.
  */
 export const Picker = ({ appearance = "outline", className, iconEnd = CHEVRON_DOWN, intent = "neutral", isDisabled = false, label, onChange, options, placement, placeholder, size, value, ...buttonProps }) => {
     const { hide, isVisible, toggle } = useVisibility();
@@ -73,6 +89,14 @@ export const Picker = ({ appearance = "outline", className, iconEnd = CHEVRON_DO
                 ? currentOption.label
                 : undefined));
     const triggerText = currentText ?? placeholder ?? "";
+    const triggerContent = currentOption === undefined
+        ? placeholder
+        : currentOption.label;
+    // No content, no span: an empty flex item would still earn a `gap`
+    // before the chevron and widen a content-width trigger.
+    const hasTriggerContent = triggerContent !== undefined &&
+        triggerContent !== null &&
+        triggerContent !== "";
     return (_jsx(Listbox
     // A disabled control must not open, and hiding the panel is a
     // truer way to say that than trusting the trigger's click alone —
@@ -81,11 +105,9 @@ export const Picker = ({ appearance = "outline", className, iconEnd = CHEVRON_DO
         // A disabled control must not open, and hiding the panel is a
         // truer way to say that than trusting the trigger's click alone —
         // Escape and outside-press both route through `onDismiss`.
-        isVisible: isVisible && !isDisabled, onDismiss: hide, onSelect: onChange, options: options, placement: placement, selectedValue: value, trigger: _jsx(Button, { ...buttonProps, appearance: appearance, "aria-label": `${label}: ${triggerText}`, className: className, iconEnd: iconEnd, intent: intent, isDisabled: isDisabled, onClick: (clickEvent) => {
+        isVisible: isVisible && !isDisabled, onDismiss: hide, onSelect: onChange, options: options, placement: placement, selectedValue: value, trigger: _jsx(Button, { ...buttonProps, appearance: appearance, "aria-label": `${label}: ${triggerText}`, className: toClassName("justify-between", className), iconEnd: iconEnd, intent: intent, isDisabled: isDisabled, onClick: (clickEvent) => {
                 buttonProps.onClick?.(clickEvent);
                 toggle();
-            }, size: size, type: "button", children: currentOption === undefined
-                ? placeholder
-                : currentOption.label }) }));
+            }, size: size, type: "button", children: hasTriggerContent ? (_jsx("span", { className: "-mx-1 min-w-0 grow overflow-x-clip px-1 text-start text-ellipsis whitespace-nowrap", children: triggerContent })) : null }) }));
 };
 //# sourceMappingURL=Picker.js.map

package/dist/Picker/Picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../src/Picker/Picker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAWlD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAsB,CAAA;AAG7C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAwB,CAAA;AAIhD;;;;GAIG;AACH,MAAM,YAAY,GAAG,CACnB,6BACc,MAAM,EAClB,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,KAAK,EAChB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,IAAI,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,YAElC,eAAM,CAAC,EAAC,cAAc,GAAG,GACrB,CACP,CAAA;AAgCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,UAAU,GAAG,SAAS,EACtB,SAAS,EACT,OAAO,GAAG,YAAY,EACtB,MAAM,GAAG,SAAS,EAClB,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,WAAW,EACX,IAAI,EACJ,KAAK,EACL,GAAG,WAAW,EACF,EAAa,EAAE;IAC3B,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAEnD,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAChC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,CACnC,CAAA;IAED,MAAM,WAAW,GACf,aAAa,KAAK,SAAS;QACzB,CAAC,CAAC,WAAW;QACb,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS;YACxB,CAAC,OAAO,aAAa,CAAC,KAAK,KAAK,QAAQ;gBACtC,CAAC,CAAC,aAAa,CAAC,KAAK;gBACrB,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;IAErB,MAAM,WAAW,GAAG,WAAW,IAAI,WAAW,IAAI,EAAE,CAAA;IAEpD,OAAO,CACL,KAAC,OAAO;IACN,8DAA8D;IAC9D,kEAAkE;IAClE,2DAA2D;;QAF3D,8DAA8D;QAC9D,kEAAkE;QAClE,2DAA2D;QAC3D,SAAS,EAAE,SAAS,IAAI,CAAC,UAAU,EACnC,SAAS,EAAE,IAAI,EACf,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,KAAK,EACpB,OAAO,EACL,KAAC,MAAM,OACD,WAAW,EACf,UAAU,EAAE,UAAU,gBACV,GAAG,KAAK,KAAK,WAAW,EAAE,EACtC,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,CAAC,UAAU,EAAE,EAAE;gBACtB,WAAW,CAAC,OAAO,EAAE,CAAC,UAAU,CAAC,CAAA;gBAEjC,MAAM,EAAE,CAAA;YACV,CAAC,EACD,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,QAAQ,YAEZ,aAAa,KAAK,SAAS;gBAC1B,CAAC,CAAC,WAAW;gBACb,CAAC,CAAC,aAAa,CAAC,KAAK,GAChB,GAEX,CACH,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../src/Picker/Picker.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "4.22.0",
+  "version": "4.22.1",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",

package/src/Picker/Picker.mdx

@@ -77,6 +77,20 @@ all flush; they are all the same trap.
 
 <Canvas of={PickerStories.NextToText} />
 
+## A stretched trigger reads like a select
+
+`Picker` is a `Button`, and a `Button` centers its content. Inside a `Field` — a `flex-col`,
+so the trigger stretches to the column — or under `w-full`, that used to give a full-width bar
+with the value floating in the middle. The trigger now lays its value out at the **inline
+start** and the chevron at the **inline end**, and a value wider than the trigger truncates
+with an ellipsis rather than pushing the chevron out. The full value stays in the accessible
+name and in the open list.
+
+The width still comes from the container: a trigger the parent does not stretch keeps its
+content width and renders exactly as before.
+
+<Canvas of={PickerStories.Responsive} />
+
 ## `id` does not survive; `data-testid` does
 
 `useAnchoredOverlay` overwrites the trigger's `id` with a generated one so the portalled

package/src/Picker/Picker.stories.tsx

@@ -10,6 +10,7 @@ import {
 } from "../argTypes.storyHelpers.ts"
 import { Badge } from "../Badge/Badge.tsx"
 import {
+  ContainerBoard,
   StoryRow,
   StorySection,
 } from "../board.storyHelpers.tsx"
@@ -258,3 +259,48 @@ export const NextToText: Story = {
     </div>
   ),
 }
+
+/**
+ * One value long enough to outgrow the narrowest container, so the
+ * board shows the truncation as well as the stretch.
+ */
+const SUBTITLES: PickerOption[] = [
+  { label: "Off", value: "off" },
+  {
+    label: "English (SDH, signs and songs, full dialogue)",
+    value: "eng-sdh",
+  },
+]
+
+/**
+ * Inside a `Field` the trigger stretches to the container, the way a
+ * select does: the value sits at the inline start, the chevron at the
+ * inline end, and a value wider than the container truncates rather
+ * than pushing the chevron out.
+ */
+export const Responsive: Story = {
+  render: () => (
+    <ContainerBoard>
+      {(width) => (
+        <div className="flex flex-col gap-4">
+          <Field label={`Language at ${width}`}>
+            <Picker
+              label={`Language at ${width}`}
+              onChange={() => undefined}
+              options={LANGUAGES}
+              value="eng"
+            />
+          </Field>
+          <Field label={`Subtitles at ${width}`}>
+            <Picker
+              label={`Subtitles at ${width}`}
+              onChange={() => undefined}
+              options={SUBTITLES}
+              value="eng-sdh"
+            />
+          </Field>
+        </div>
+      )}
+    </ContainerBoard>
+  ),
+}

package/src/Picker/Picker.test.tsx

@@ -7,8 +7,13 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Picker.stories.tsx"
 
-const { AllStates, Playground, Interactive, NextToText } =
-  composeStories(stories)
+const {
+  AllStates,
+  Playground,
+  Interactive,
+  NextToText,
+  Responsive,
+} = composeStories(stories)
 
 test("the trigger's accessible name carries the current value", async () => {
   const { canvas, canvasElement } =
@@ -108,3 +113,87 @@ test("a rich option label keeps a plain-string trigger via textValue", async ()
 
   await expectNoAxeViolations(canvasElement)
 })
+
+test("a stretched trigger puts the value at the start and the chevron at the end", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(Responsive)
+
+  const trigger = expectAgentDrivable(canvas, {
+    name: "Language at 34rem: English",
+    role: "button",
+  })
+
+  const valueElement = canvas
+    .getAllByText("English")
+    .find((element: HTMLElement) =>
+      trigger.contains(element),
+    ) as HTMLElement
+
+  // The text's own box, not the span's: the span grows to fill the
+  // trigger, so its box would sit at the start even with centered text.
+  const valueRange = document.createRange()
+
+  valueRange.selectNodeContents(valueElement)
+
+  const valueBox = valueRange.getBoundingClientRect()
+  const triggerBox = trigger.getBoundingClientRect()
+  const chevronBox = (
+    trigger.querySelector("svg") as SVGElement
+  ).getBoundingClientRect()
+
+  const triggerStyle = getComputedStyle(trigger)
+  const contentStart =
+    triggerBox.left +
+    Number.parseFloat(triggerStyle.borderInlineStartWidth) +
+    Number.parseFloat(triggerStyle.paddingInlineStart)
+  const contentEnd =
+    triggerBox.right -
+    Number.parseFloat(triggerStyle.borderInlineEndWidth) -
+    Number.parseFloat(triggerStyle.paddingInlineEnd)
+
+  // The `Field` stretched the trigger well past its content, so a
+  // centered value would start far from the inline start.
+  await expect(
+    triggerBox.width - valueBox.width - chevronBox.width,
+  ).toBeGreaterThan(200)
+  await expect(
+    Math.abs(valueBox.left - contentStart),
+  ).toBeLessThan(1)
+  await expect(
+    Math.abs(chevronBox.right - contentEnd),
+  ).toBeLessThan(1)
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("a value wider than the trigger truncates and keeps the chevron inside", async () => {
+  const { canvas } = await mountStory(Responsive)
+
+  const trigger = expectAgentDrivable(canvas, {
+    name: "Subtitles at 15rem: English (SDH, signs and songs, full dialogue)",
+    role: "button",
+  })
+
+  const valueElement = canvas
+    .getAllByText(
+      "English (SDH, signs and songs, full dialogue)",
+    )
+    .find((element: HTMLElement) =>
+      trigger.contains(element),
+    ) as HTMLElement
+
+  const triggerBox = trigger.getBoundingClientRect()
+  const chevronBox = (
+    trigger.querySelector("svg") as SVGElement
+  ).getBoundingClientRect()
+
+  await expect(valueElement.scrollWidth).toBeGreaterThan(
+    valueElement.clientWidth,
+  )
+  await expect(trigger.scrollWidth).toBe(
+    trigger.clientWidth,
+  )
+  await expect(chevronBox.right).toBeLessThanOrEqual(
+    triggerBox.right,
+  )
+})

package/src/Picker/Picker.tsx

@@ -13,6 +13,7 @@ import { Button } from "../Button/Button.tsx"
 import type { IntentAppearance } from "../intentStyles.ts"
 import type { ListboxItem } from "../Listbox/Listbox.tsx"
 import { Listbox } from "../Listbox/Listbox.tsx"
+import { toClassName } from "../toClassName.ts"
 
 export type PickerOption = ListboxItem
 
@@ -122,6 +123,21 @@ export type PickerProps = Omit<
  * mux-magic both moved to it while `id` was still being replaced — but
  * `id` is no longer a trap. Everything else on the button (`data-*`,
  * `onClick`, `form`, …) passes straight through.
+ *
+ * ### A stretched trigger reads like a select, not a button
+ *
+ * `Button` centers its content, which is right for an action and wrong
+ * for a value. Inside a `Field` (a `flex-col`, so the child stretches)
+ * or under `w-full`, the trigger used to become a bar with the value
+ * floating in the middle and the chevron beside it. The value now sits
+ * at the inline start, in a span that grows into the spare width and
+ * ends in an ellipsis when there is too little, and the chevron sits at
+ * the inline end. `justify-between` is passed through `className`, which
+ * `toClassName` merges over `Button`'s `justify-center` rather than
+ * leaving the two to stylesheet order — and the growing span makes the
+ * result correct even if a caller's `className` overrides it. A trigger
+ * at its content width has no spare width to distribute, so it renders
+ * exactly as it did before.
  */
 export const Picker = ({
   appearance = "outline",
@@ -154,6 +170,18 @@ export const Picker = ({
 
   const triggerText = currentText ?? placeholder ?? ""
 
+  const triggerContent =
+    currentOption === undefined
+      ? placeholder
+      : currentOption.label
+
+  // No content, no span: an empty flex item would still earn a `gap`
+  // before the chevron and widen a content-width trigger.
+  const hasTriggerContent =
+    triggerContent !== undefined &&
+    triggerContent !== null &&
+    triggerContent !== ""
+
   return (
     <Listbox
       // A disabled control must not open, and hiding the panel is a
@@ -170,7 +198,10 @@ export const Picker = ({
           {...buttonProps}
           appearance={appearance}
           aria-label={`${label}: ${triggerText}`}
-          className={className}
+          className={toClassName(
+            "justify-between",
+            className,
+          )}
           iconEnd={iconEnd}
           intent={intent}
           isDisabled={isDisabled}
@@ -182,9 +213,17 @@ export const Picker = ({
           size={size}
           type="button"
         >
-          {currentOption === undefined
-            ? placeholder
-            : currentOption.label}
+          {hasTriggerContent ? (
+            // Not `truncate`. Its `overflow: hidden` clips the
+            // anti-aliased edge pixels of glyphs and a rich label's
+            // badge, so a content-width trigger stopped rendering
+            // pixel-identically to the unwrapped one. `overflow-x-clip`
+            // leaves the block axis alone, and `-mx-1 px-1` moves the
+            // inline clip edge 4px outward without moving the text.
+            <span className="-mx-1 min-w-0 grow overflow-x-clip px-1 text-start text-ellipsis whitespace-nowrap">
+              {triggerContent}
+            </span>
+          ) : null}
         </Button>
       }
     />