@charcuterie/ui 2.14.0 → 2.15.1

package/src/QueryBuilder/QueryBuilderCombinator.tsx

@@ -1,8 +1,6 @@
-import { useVisibility } from "@charcuterie/logic"
 import type { ReactNode } from "react"
 
-import { Button } from "../Button/Button.tsx"
-import { Listbox } from "../Listbox/Listbox.tsx"
+import { Picker } from "../Picker/Picker.tsx"
 
 export type QueryBuilderCombinatorProps<Combinator> = {
   /** The visible caption above the control, e.g. "Match". */
@@ -18,91 +16,54 @@ export type QueryBuilderCombinatorProps<Combinator> = {
 /**
  * One group's combinator picker.
  *
- * A `Listbox`, not a native `Select`, per
+ * A `Picker` — a `Listbox` with its trigger attached — rather than a
+ * native `Select`, per
  * [the 2026-08-10 demotion](../../../../docs/decisions/2026-08-10-listbox-and-combobox-are-the-default-and-select-is-demoted.md).
- * `QueryBuilder` shipped in #84 with a `Select` the day after that
- * record landed; `charcuterie/prefer-listbox-over-select` did not
- * catch it because the component-choice block is scoped to app
- * packages and exempts this one — right for a primitive, wrong for a
- * composite an app consumes whole.
+ * This file used to assemble the trigger by hand; `Picker` exists
+ * because it was the fourth place in the fleet doing so.
  *
- * ### Why this is its own file
+ * ### What is left here, and why it is still a component
  *
- * `Listbox` needs a visibility state, and a group renders one picker
- * per group inside a recursive `.map`. A hook cannot be called there,
- * so the picker becomes a component — the same member-file case as
- * `QueryBuilderRow`.
- *
- * ### The name, and why it is not a `Field`
- *
- * `Field` wires `<label htmlFor>` by cloning its `id` onto the
- * control. `Listbox`'s trigger cannot take one: `useAnchoredOverlay`
- * overwrites the cloned trigger's `id` with the one the panel points
- * `aria-labelledby` at, so the label would address an element that no
- * longer carries that id — the exact defect `Field` exists to
- * prevent. So the caption is plain text and the trigger is named with
- * `aria-label`.
- *
- * That name is `"<label>: <current value>"` rather than bare
- * `"<label>"` on purpose: the button's visible text is the current
- * combinator, and WCAG 2.5.3 wants the visible text contained in the
- * accessible name. "Match" alone would fail it; "Match: ALL — every
- * condition" reads correctly and keeps each group's control findable
- * by name.
- *
- * The combinator stays opaque here exactly as it is in the rest of
- * the component: `String(value)` bridges it to the string-valued
- * `Listbox`, and a selection is mapped back to the real `Combinator`
- * before it leaves.
+ * Only the bridging. `Combinator` is opaque to `QueryBuilder`, so it
+ * cannot reach `Picker`'s string-valued API directly: `String(value)`
+ * carries it out and the matching option carries it back, so the
+ * generic never leaks. The caption is plain text rather than a
+ * `Field`, because `useAnchoredOverlay` overwrites the trigger's `id`
+ * and a `<label htmlFor>` would then address an element that no longer
+ * carries it — the exact defect `Field` exists to prevent.
  */
 export const QueryBuilderCombinator = <Combinator,>({
   label,
   onChange,
   options,
   value,
-}: QueryBuilderCombinatorProps<Combinator>): ReactNode => {
-  const { hide, isVisible, toggle } = useVisibility()
+}: QueryBuilderCombinatorProps<Combinator>): ReactNode => (
+  <div className="flex flex-col gap-1.5">
+    <span className="font-medium text-content-primary text-sm">
+      {label}
+    </span>
 
-  const currentOption = options.find(
-    (option) => String(option.value) === String(value),
-  )
+    <Picker
+      // No chevron: this is a refactor onto the shared component, and
+      // the trigger that shipped in 2.14.0 had none. Adding the
+      // affordance here is a visual change and belongs in its own PR,
+      // not smuggled in under an extraction.
+      iconEnd={null}
+      label={label}
+      onChange={(nextValue) => {
+        const match = options.find(
+          (option) => String(option.value) === nextValue,
+        )
 
-  const currentLabel = currentOption?.label ?? ""
-
-  return (
-    <div className="flex flex-col gap-1.5">
-      <span className="font-medium text-content-primary text-sm">
-        {label}
-      </span>
-
-      <Listbox
-        isVisible={isVisible}
-        onDismiss={hide}
-        onSelect={(nextValue) => {
-          const match = options.find(
-            (option) => String(option.value) === nextValue,
-          )
-
-          if (match) {
-            onChange(match.value)
-          }
-        }}
-        options={options.map((option) => ({
-          label: option.label,
-          value: String(option.value),
-        }))}
-        selectedValue={String(value)}
-        trigger={
-          <Button
-            appearance="outline"
-            aria-label={`${label}: ${currentLabel}`}
-            intent="neutral"
-            onClick={toggle}
-          >
-            {currentLabel}
-          </Button>
+        if (match) {
+          onChange(match.value)
         }
-      />
-    </div>
-  )
-}
+      }}
+      options={options.map((option) => ({
+        label: option.label,
+        value: String(option.value),
+      }))}
+      value={String(value)}
+    />
+  </div>
+)

package/src/index.ts

@@ -160,6 +160,11 @@ export type {
 export { Menu } from "./Menu/Menu.tsx"
 export type { ModalProps } from "./Modal/Modal.tsx"
 export { Modal } from "./Modal/Modal.tsx"
+export type {
+  PickerOption,
+  PickerProps,
+} from "./Picker/Picker.tsx"
+export { Picker } from "./Picker/Picker.tsx"
 export type { PopoverProps } from "./Popover/Popover.tsx"
 export { Popover } from "./Popover/Popover.tsx"
 export type {

package/src/sourceRules.test.ts

@@ -373,7 +373,13 @@ test("the barrel is the only place components are re-exported", async () => {
   // both are rendered inside a `.map` — and stay out of this count and
   // the barrel by the `<Name>/<Name>.tsx` rule, exactly as
   // `SegmentedOption` and `ListboxOption` do.
-  expect(componentNames.length).toBe(44)
+  //
+  // `Picker` — a `Listbox` with its trigger already attached — is +1 ->
+  // 45. It is a component rather than a recipe in the docs because the
+  // fleet wrote it four separate times (plex-channels' `SelectListbox`,
+  // board-games' `SelectMenu`, mux-magic's `ListboxPicker`, and twice
+  // inside this package), each with its own hand-rolled chevron.
+  expect(componentNames.length).toBe(45)
 
   for (const name of componentNames) {
     expect(barrel).toContain(`export { ${name} }`)
@@ -457,17 +463,22 @@ const ENTRY_POINT_RUNTIMES: Record<
     "./core": [],
     "./jotai": ["jotai"],
     "./preact": ["preact", "preact/hooks"],
-    // The request/response data layer. It reaches react-query, the
-    // two openapi-* primitives it re-exports, and `react` (the
-    // provider's `useState`) — all optional peers, so an app that
-    // never imports `./query` resolves none of them. `react/jsx-runtime`
-    // is added only at emit, so it is not a source specifier here.
-    "./query": [
-      "@tanstack/react-query",
-      "openapi-fetch",
-      "openapi-react-query",
-      "react",
-    ],
+    // The typed OpenAPI seam, split out of `./query` so that only an
+    // app whose backend publishes a spec resolves these two. This
+    // table is the thing that makes that split legible: what the row
+    // costs is the whole argument for it being its own entry point.
+    // See the [split
+    // decision](../../../docs/decisions/2026-08-13-the-openapi-seam-is-its-own-subpath-not-part-of-query.md).
+    "./openapi": ["openapi-fetch", "openapi-react-query"],
+    // The request/response data layer: react-query and `react` (the
+    // provider's `useState`), both optional peers, so an app that
+    // never imports `./query` resolves neither. It deliberately does
+    // NOT reach the openapi-* packages — when it did (via the
+    // re-export this row used to list), the type-only edge above was
+    // enough to force every non-OpenAPI consumer to install both.
+    // `react/jsx-runtime` is added only at emit, so it is not a
+    // source specifier here.
+    "./query": ["@tanstack/react-query", "react"],
     "./signals": ["@preact/signals-core"],
   },
   tokens: {