@charcuterie/ui 2.2.0 → 2.4.0

package/src/Overlay/useAnchoredOverlay.ts

@@ -14,7 +14,8 @@ import {
   useInteractions,
   useRole,
 } from "@floating-ui/react"
-import type { ReactElement } from "react"
+import type { ReactElement, RefObject } from "react"
+import { createElement, useEffect } from "react"
 
 /**
  * The floating-ui block every anchored overlay — `Popover`, `Menu`,
@@ -67,6 +68,15 @@ export type AnchoredOverlayRole =
   | "menu"
 
 export type UseAnchoredOverlayOptions = {
+  /**
+   * Anchor the panel to a **pre-existing** element the consumer already
+   * rendered, instead of cloning a `trigger`. For the attached-input
+   * `Combobox`, whose reference is the consumer's own `<input>` (both the
+   * value and the query) — there is nothing to clone. Supply exactly one
+   * of `anchorRef` / `trigger`; with `anchorRef`, `clonedTrigger` is
+   * `null`.
+   */
+  anchorRef?: RefObject<HTMLElement | null>
   /**
    * Both default **on** — Escape and outside-press are what makes an
    * overlay an overlay. Switch one off for the honest exception (a
@@ -86,11 +96,21 @@ export type UseAnchoredOverlayOptions = {
   onDismiss: () => void
   placement?: Placement
   role: AnchoredOverlayRole
-  /** The control the panel hangs off. **Cloned, not wrapped.** */
-  trigger: ReactElement
+  /**
+   * The control the panel hangs off. **Cloned, not wrapped.** Omit only
+   * when `anchorRef` is supplied instead.
+   */
+  trigger?: ReactElement
 }
 
+// `useClonedChild` insists on exactly one element, and hooks cannot be
+// called conditionally — so in `anchorRef` mode we still call it, on this
+// throwaway, and discard the result. It is never rendered and never
+// receives the floating reference (that goes to `anchorRef`).
+const PLACEHOLDER_TRIGGER = createElement("span")
+
 export const useAnchoredOverlay = ({
+  anchorRef,
   isEscapeDismissable = true,
   isOutsidePressDismissable = true,
   isTriggerWidthMatched = false,
@@ -128,6 +148,8 @@ export const useAnchoredOverlay = ({
     )
   }
 
+  const isAnchored = anchorRef !== undefined
+
   const { context, floatingStyles, refs } = useFloating({
     // Read-only. Charcuterie remains the sole owner; floating-ui is
     // told what is true and never decides it.
@@ -180,11 +202,30 @@ export const useAnchoredOverlay = ({
     (referenceProps.id as string | undefined) ??
     generatedTriggerId
 
-  const clonedTrigger = useClonedChild(trigger, {
-    ...referenceProps,
-    id: triggerId,
-    ref: refs.setReference,
-  })
+  // In anchor mode floating-ui's reference is the consumer's element, set
+  // imperatively — there is no cloned trigger to carry `refs.setReference`.
+  // `setReference` is stable; re-running on `isVisible` re-applies it when
+  // the panel opens (and after the anchor element mounts).
+  useEffect(() => {
+    if (!isAnchored) {
+      return
+    }
+
+    refs.setReference(anchorRef.current)
+  }, [isAnchored, anchorRef, refs])
+
+  const clonedChild = useClonedChild(
+    trigger ?? PLACEHOLDER_TRIGGER,
+    {
+      ...referenceProps,
+      id: triggerId,
+      // The anchor element already exists; the clone (a discarded
+      // placeholder here) must not also claim the floating reference.
+      ...(isAnchored ? {} : { ref: refs.setReference }),
+    },
+  )
+
+  const clonedTrigger = isAnchored ? null : clonedChild
 
   return {
     clonedTrigger,

package/src/Select/Select.tsx

@@ -5,10 +5,7 @@ import type {
   ReactNode,
 } from "react"
 
-import {
-  CONTROL_SIZE_CLASS,
-  MIN_TOUCH_TARGET_CLASS,
-} from "../controlStyles.ts"
+import { CONTROL_SIZE_CLASS } from "../controlStyles.ts"
 import {
   DISABLED_CLASS,
   FOCUS_RING_CLASS,
@@ -139,8 +136,12 @@ export const Select = ({
         // removes, and forgetting to put one back leaves a control
         // that looks exactly like a text input.
         "pe-9",
+        // Height comes from the shared control-size/density system ONLY —
+        // no per-component touch-target floor. Touch is the density axis's
+        // job (`[data-density]` scales `--control-height-*` past 44px on a
+        // kiosk), so forcing 44px here made Select taller than Button et al.
+        // at desktop density. See the controls-share-one-height decision.
         CONTROL_SIZE_CLASS[size],
-        MIN_TOUCH_TARGET_CLASS,
         "hover:border-border-strong",
         FOCUS_RING_CLASS,
         DISABLED_CLASS,

package/src/controlStyles.ts

@@ -46,6 +46,14 @@ export const ICON_CONTROL_SIZE_CLASS: Record<
  * density — a finger does not get smaller because the list is
  * dense — so this is opt-in per control rather than baked into the
  * size classes, which would make `compact` a lie.
+ *
+ * **Do NOT add this to a control that shares a form row** (`Button`,
+ * `Select`, a `Listbox`/`Combobox` trigger, `SegmentedControl`, …). It
+ * overrides the shared `CONTROL_SIZE_CLASS` height and makes that one
+ * control taller than its neighbours at desktop density — touch sizing is
+ * the density axis's job. Reserve this for a genuinely standalone tap
+ * target. See
+ * `docs/decisions/2026-08-05-controls-share-one-height-no-per-component-touch-floor.md`.
  */
 export const MIN_TOUCH_TARGET_CLASS =
   "min-h-(--control-min-touch-target) min-w-(--control-min-touch-target)"