@multiplatform.one/forms 6.1.0 → 6.4.0

package/src/fields/Select/index.tsx

@@ -11,14 +11,16 @@ import {
   FloatingFocusManager,
 } from "@floating-ui/react";
 import type { AnyFormApi } from "../../types";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { menuRowFrame, useResolvedKnobs } from "@multiplatform.one/theme";
 import type { LabelProps, SizeTokens } from "tamagui";
+import { Pressable as RNPressable } from "react-native";
 import { Paragraph, Text, View, YStack, isWeb, styled } from "tamagui";
 import { Chip, type ChipProps } from "../../Chip";
 import { Skeleton } from "../../Skeleton";
-import { Field, FieldLayout } from "../../fieldLayout";
+import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps";
+import { warnSelectTooFewOptions } from "../../shared/devWarn";
 import {
   getFieldError,
   getFieldHeight,
@@ -37,6 +39,7 @@ import {
 import { zIndex } from "../../shared/zIndex";
 import { useDragScroll } from "../../shared/useDragScroll";
 import { useIsInTableCell } from "../../shared/tableCellContext";
+import { t } from "../../shared/t";
 
 // ── Types ─────────────────────────────────────────────────────
 
@@ -62,6 +65,12 @@ export interface SelectProps {
   id?: string;
   value?: string | string[];
   defaultValue?: string | string[];
+  /**
+   * Canonical change handler, consistent with the rest of the field family.
+   * Prefer this over `onValueChange`.
+   */
+  onChange?: (value: string | string[]) => void;
+  /** @deprecated Use `onChange` instead. Kept as an alias for the tamagui/Radix name. */
   onValueChange?: (value: string | string[]) => void;
   onBlur?: (...args: any[]) => void;
   options: SelectOption[];
@@ -78,15 +87,15 @@ export interface SelectProps {
 }
 
 // ── Lightweight item row (replaces heavy ListItem-based DropdownItem) ──
+// Geometry comes from the shared LC-16 `menuRowFrame` recipe (theme) — the
+// same frame DropdownMenu items and MentionInput suggestions use. Listbox
+// concerns stay local: `default` cursor, gap, and the form-input color ramp.
 
 const SelectRow = styled(View, {
   name: "SelectRow",
-  flexDirection: "row",
-  alignItems: "center",
+  ...menuRowFrame,
   gap: "$2",
-  paddingHorizontal: "$3",
   cursor: "default",
-  outlineStyle: "none" as any,
   hoverStyle: { backgroundColor: formInputColors.background.focus },
   focusStyle: { outlineStyle: "none" as any },
   focusVisibleStyle: { outlineStyle: "none" as any },
@@ -278,6 +287,12 @@ const SelectItem = memo(function SelectItem({
       aria-selected={isSelected}
       data-state={isSelected ? "active" : "inactive"}
       size={ctx.knobProps.sizeToken}
+      // LC-18 KNOB-TOTALITY (UX-021): menu rows re-rhythm with the space knob —
+      // horizontal inset from the panelPadding token (SP-EDGE, sidebar-row
+      // precedent) over menuRowFrame's static $3; in-row gap rides the gap
+      // fragment.
+      paddingHorizontal={ctx.knobProps.panelPadding.padding}
+      {...ctx.knobProps.gap}
       onMouseEnter={() => setActiveIndex(index)}
       {...(suppressHover
         ? {
@@ -322,6 +337,9 @@ interface FloatingSelectCoreProps {
   placeholder: string;
   disabled?: boolean;
   id?: string;
+  "aria-label"?: string;
+  /** When true, FieldLayout rendered `${id}-label` — wire aria-labelledby. */
+  hasLabel?: boolean;
   knobProps: ReturnType<typeof useResolvedKnobs>["knobProps"];
   groupLabel?: string;
   multiple?: boolean;
@@ -335,12 +353,15 @@ function FloatingSelectCore({
   placeholder,
   disabled,
   id,
+  "aria-label": ariaLabel,
+  hasLabel,
   knobProps,
   groupLabel,
   multiple,
   dismissible,
 }: FloatingSelectCoreProps) {
   const inTableCell = useIsInTableCell();
+  const describedBy = useFieldDescribedBy();
   const [open, setOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
   const [controlledScrolling, setControlledScrolling] = useState(false);
@@ -772,6 +793,12 @@ function FloatingSelectCore({
   boxEventProps["aria-haspopup"] = "listbox";
   boxEventProps["aria-expanded"] = open;
   boxEventProps["aria-autocomplete"] = "none";
+  if (id) boxEventProps.id = id;
+  if (ariaLabel) boxEventProps["aria-label"] = ariaLabel;
+  else if (hasLabel && id) boxEventProps["aria-labelledby"] = `${id}-label`;
+  // Standalone triggers (no label prop) still need a name (axe button-name)
+  else if (placeholder) boxEventProps["aria-label"] = placeholder;
+  if (describedBy) boxEventProps["aria-describedby"] = describedBy;
 
   const handleScroll = useCallback(
     (event: UIEvent) => {
@@ -813,7 +840,8 @@ function FloatingSelectCore({
         disabled={disabled}
         size={knobProps.sizeToken}
         {...(inTableCell
-          ? {}
+          ? // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
+            { minHeight: 44 }
           : {
               borderRadius: knobProps.borderRadius.borderRadius,
               borderWidth: knobProps.borderRadius.borderWidth,
@@ -822,9 +850,10 @@ function FloatingSelectCore({
         <SyncFocusToOpen open={open} />
         <View
           flex={1}
-          paddingHorizontal="$3"
+          // LC-18 (UX-021): trigger inset rides the space knob so trigger text
+          // stays column-aligned with the menu rows at every density.
+          paddingHorizontal={knobProps.panelPadding.padding}
           paddingVertical="$2"
-          id={id}
           justifyContent={multiple && selectedValues.length > 0 ? "center" : "flex-start"}
           alignItems={multiple && selectedValues.length > 0 ? "center" : "flex-start"}
         >
@@ -864,7 +893,7 @@ function FloatingSelectCore({
             </Text>
           )}
         </View>
-        <View paddingRight="$2" alignSelf="center">
+        <View paddingInlineEnd="$2" alignSelf="center">
           <CaretDownIcon size={16} />
         </View>
       </InputParts.Box>
@@ -938,7 +967,11 @@ function FloatingSelectCore({
                 visible={panel.arrowUp}
                 arrowScrollDirRef={panel.arrowScrollDirRef}
               />
-              {groupLabel && <GroupHeader color={textColor}>{groupLabel}</GroupHeader>}
+              {groupLabel && (
+                <GroupHeader color={textColor} paddingHorizontal={knobProps.panelPadding.padding}>
+                  {groupLabel}
+                </GroupHeader>
+              )}
               {multiple
                 ? sortedOptionsRef.current.map((option, i) => (
                     <SelectItem
@@ -956,7 +989,11 @@ function FloatingSelectCore({
                   ))
                 : groupedItems.map((item) =>
                     item.type === "header" ? (
-                      <GroupHeader key={`header-${item.label}`} color={textColor}>
+                      <GroupHeader
+                        key={`header-${item.label}`}
+                        color={textColor}
+                        paddingHorizontal={knobProps.panelPadding.padding}
+                      >
                         {item.label}
                       </GroupHeader>
                     ) : (
@@ -998,11 +1035,15 @@ function NativeSelectCore({
   placeholder,
   disabled,
   id,
+  "aria-label": ariaLabel,
+  hasLabel,
   knobProps,
   groupLabel,
   multiple,
   dismissible,
 }: FloatingSelectCoreProps) {
+  const describedBy = useFieldDescribedBy();
+  const fieldA11y = useFieldA11y();
   const inTableCell = useIsInTableCell();
   const [open, setOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState<number | null>(0);
@@ -1099,16 +1140,20 @@ function NativeSelectCore({
   );
 
   const listContent = (
+    // Native sheet path: do NOT set flex={1} — inside FloatingPanel's
+    // RNScrollView (flexGrow:0) flex:1 resolves to ~0 height and collapses
+    // every option row except a stray fragment of the selected one.
+    // tabIndex/onKeyDown are web-only: on iOS tabIndex makes the container an
+    // accessibility element, which merges every option into one unactionable
+    // VoiceOver blob.
     <View
       ref={listRef as any}
-      tabIndex={0}
-      onKeyDown={handleListKeyDown}
+      {...(isWeb ? { tabIndex: 0, onKeyDown: handleListKeyDown } : undefined)}
       outlineStyle="none"
-      flex={1}
     >
       {groupLabel && (
         <Text
-          paddingHorizontal="$3"
+          paddingHorizontal={knobProps.panelPadding.padding}
           paddingVertical="$2"
           fontFamily={knobProps.body.fontFamily}
           fontWeight="700"
@@ -1122,15 +1167,17 @@ function NativeSelectCore({
       {options.map((option, i) => {
         const selected = isSelectedFn(option.value);
         const active = i === activeIndex;
-        return (
+        const row = (
           <View
-            key={option.value}
+            key={isWeb ? option.value : undefined}
             flexDirection="row"
             alignItems="center"
-            gap="$2"
-            paddingHorizontal="$3"
+            // LC-18 (UX-021): sheet rows ride the space knob like the floating
+            // menu rows — panelPadding inset + gap fragment.
+            {...knobProps.gap}
+            paddingHorizontal={knobProps.panelPadding.padding}
             height={knobProps.sizeToken}
-            onPress={() => handleSelect(option.value)}
+            onPress={isWeb ? () => handleSelect(option.value) : undefined}
             onMouseEnter={() => setActiveIndex(i)}
             hoverStyle={
               activeIndex != null
@@ -1155,6 +1202,8 @@ function NativeSelectCore({
                   : "transparent"
             }
             pressStyle={{ backgroundColor: formInputColors.background.focus }}
+            // Native: parent RNPressable owns the hit; disable child stealing.
+            pointerEvents={isWeb ? undefined : "none"}
           >
             <Text
               fontFamily={knobProps.body.fontFamily}
@@ -1168,10 +1217,29 @@ function NativeSelectCore({
             {selected && <CheckIcon size={14} />}
           </View>
         );
+        if (isWeb) return row;
+        // Fabric: Tamagui View onPress does not fire — core Pressable commits.
+        return (
+          <RNPressable
+            key={option.value}
+            onPress={() => handleSelect(option.value)}
+            accessibilityRole="button"
+            accessibilityLabel={option.label}
+            accessibilityState={{ selected }}
+          >
+            {row}
+          </RNPressable>
+        );
       })}
     </View>
   );
 
+  const triggerValueText = multiple
+    ? selectedValues.length > 0
+      ? selectedValues.map(getLabel).join(", ")
+      : placeholder
+    : (selectedOption?.label ?? placeholder);
+
   return (
     <FloatingPanel
       open={open}
@@ -1180,18 +1248,48 @@ function NativeSelectCore({
         if (!val) onBlur?.();
       }}
       sheet
+      triggerA11y={{
+        label: ariaLabel ?? fieldA11y?.label,
+        value: triggerValueText,
+        hint: fieldA11y?.description,
+      }}
       trigger={
         <InputParts.Box
           disabled={disabled}
           size={knobProps.sizeToken}
           {...(inTableCell
-            ? {}
+            ? // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
+              { minHeight: 44 }
             : {
                 borderRadius: knobProps.borderRadius.borderRadius,
                 borderWidth: knobProps.borderRadius.borderWidth,
               })}
           data-testid="select-trigger"
-          tabIndex={disabled ? -1 : 0}
+          id={id}
+          // Web: the box is the combobox control (ARIA + keyboard). Native:
+          // FloatingPanel's trigger Pressable (triggerA11y) is the single
+          // accessible node — role/aria props here surface the box as a
+          // duplicate TalkBack stop on Android, so exclude it from the tree
+          // (descendants stay reachable; "no", not "no-hide-descendants").
+          {...(isWeb
+            ? {
+                role: "combobox" as const,
+                "aria-haspopup": "listbox",
+                "aria-expanded": open,
+                "aria-autocomplete": "none",
+                // Standalone (no label): fall back to placeholder so the
+                // trigger still has a name (axe button-name)
+                "aria-label": ariaLabel ?? (!hasLabel ? placeholder : undefined),
+                "aria-labelledby": !ariaLabel && hasLabel && id ? `${id}-label` : undefined,
+                "aria-describedby": describedBy,
+                tabIndex: disabled ? -1 : 0,
+              }
+            : { importantForAccessibility: "no" as const })}
+          // Web: trigger owns toggle. Native: FloatingPanel.native owns the
+          // open gesture (pointerEvents="none" on the trigger) — a second
+          // setOpen(prev => !prev) here double-toggles and the sheet never
+          // appears (batched true then !prev → false).
+          onPress={isWeb && !disabled ? () => setOpen((prev) => !prev) : undefined}
           onKeyDown={(e: KeyboardEvent) => {
             if (
               ["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) ||
@@ -1204,9 +1302,10 @@ function NativeSelectCore({
         >
           <View
             flex={1}
-            paddingHorizontal="$3"
+            // LC-18 (UX-021): trigger inset rides the space knob (matches the
+            // floating trigger and sheet rows).
+            paddingHorizontal={knobProps.panelPadding.padding}
             paddingVertical="$2"
-            id={id}
             justifyContent={multiple && selectedValues.length > 0 ? "center" : "flex-start"}
             alignItems={multiple && selectedValues.length > 0 ? "center" : "flex-start"}
           >
@@ -1245,7 +1344,7 @@ function NativeSelectCore({
               </Text>
             )}
           </View>
-          <View paddingRight="$2" alignSelf="center">
+          <View paddingInlineEnd="$2" alignSelf="center">
             <CaretDownIcon size={16} />
           </View>
         </InputParts.Box>
@@ -1277,19 +1376,42 @@ export function Select({
   id: idProp,
   value,
   defaultValue,
+  onChange,
   onValueChange,
   onBlur,
   options,
-  placeholder = "Select an option",
+  placeholder = t("Select an option"),
   groupLabel,
   multiple,
   dismissible,
   skeleton,
   compact,
+  "aria-label": ariaLabel,
   ...rest
 }: SelectProps) {
+  // Canonical `onChange` and the alias `onValueChange` both fire from the
+  // single emit site in renderSelectContent (same reconciliation as Switch).
+  const emitValueChange = (val: string | string[]) => {
+    onChange?.(val);
+    onValueChange?.(val);
+  };
   const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  // Uncontrolled (no `value` prop, no form) still must reflect selections in
+  // the trigger — callbacks alone leave the display frozen on the placeholder.
+  const [uncontrolledValue, setUncontrolledValue] = useState<string | string[] | undefined>(
+    defaultValue,
+  );
+  const isControlled = value !== undefined;
+  const hasLabel = Boolean(label);
+
+  // DG-CTRL-01 / DG-CTRL-05 — short single-select lists prefer RadioGroup.
+  warnSelectTooFewOptions({
+    count: options?.length ?? 0,
+    multiple,
+    component: "Select",
+    id,
+  });
   const viewportGtSm = useViewportGtSm();
   // Sheet on native and sm (viewport ≤860px). Floating on desktop.
   const effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : false;
@@ -1315,7 +1437,7 @@ export function Select({
           fontSize={knobProps.sizeToken}
           color={knobProps.textAccentColor}
           paddingVertical="$2"
-          paddingHorizontal="$3"
+          paddingHorizontal={knobProps.panelPadding.padding}
           fontFamily={knobProps.body.fontFamily}
           fontWeight={knobProps.body.fontWeight}
           aria-readonly="true"
@@ -1332,7 +1454,7 @@ export function Select({
         fontSize={knobProps.sizeToken}
         color={knobProps.textAccentColor}
         paddingVertical="$2"
-        paddingHorizontal="$3"
+        paddingHorizontal={knobProps.panelPadding.padding}
         fontFamily={knobProps.body.fontFamily}
         fontWeight={knobProps.body.fontWeight}
         borderRadius={knobProps.borderRadius.borderRadius}
@@ -1359,12 +1481,14 @@ export function Select({
         onValueChange={(val) => {
           if (disabled) return;
           handleValueChange?.(val);
-          onValueChange?.(val);
+          emitValueChange(val);
         }}
         onBlur={handleBlur}
         placeholder={placeholder}
         disabled={disabled}
         id={id}
+        aria-label={ariaLabel}
+        hasLabel={hasLabel}
         knobProps={knobProps}
         groupLabel={groupLabel}
         multiple={multiple}
@@ -1384,10 +1508,17 @@ export function Select({
         required={required}
         size={sizeProp}
         knobProps={knobProps as any}
+        // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
+        // the sibling label/helper readable) — it needs the disabled state.
+        disabled={disabled}
         {...rest}
       >
         <InputParts size={sizeProp || knobProps.sizeToken}>
-          {renderSelectContent(value ?? defaultValue, undefined, onBlur)}
+          {renderSelectContent(
+            value ?? uncontrolledValue,
+            isControlled ? undefined : setUncontrolledValue,
+            onBlur,
+          )}
         </InputParts>
       </FieldLayout>
     );
@@ -1412,6 +1543,8 @@ export function Select({
             required={required}
             size={sizeProp}
             knobProps={knobProps as any}
+            // LC-40: see standalone branch — FieldLayout carries dimWhole.
+            disabled={disabled}
             {...rest}
           >
             <InputParts size={sizeProp || knobProps.sizeToken}>

package/src/fields/Signature/Signature.stories.tsx

@@ -167,3 +167,9 @@ export const CustomSize: Story = {
   },
   render: (args) => <Signature {...args} clearIcon={<EraserIcon size={16} />} />,
 };
+
+/** Loading placeholder — the skeleton mirrors the canvas anatomy (LC-20 / DG-ST-02). */
+export const SkeletonState: Story = {
+  args: { label: "Sign Here", skeleton: true },
+  render: (args) => <Signature {...args} clearIcon={<EraserIcon size={16} />} />,
+};

package/src/fields/Signature/index.tsx

@@ -10,6 +10,7 @@ import { Button } from "../../Button";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { Skeleton } from "../../Skeleton";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps";
+import { t } from "../../shared/t";
 import {
   clampRadiusForLargeComponent,
   getFieldError,
@@ -468,22 +469,21 @@ function SignatureCanvasImpl({
           <Path key={i} d={d} fill={penColor} stroke={penColor} strokeWidth={1} />
         ))}
       </Svg>
-      {!readOnly && (
+      {/* DG-ST-03 hide arm (UX-P19): with nothing drawn (or the field
+          disabled) clearing is irrelevant — hide the action instead of
+          rendering a bare-disabled button. The overlay is absolutely
+          positioned, so appearing at first stroke shifts no layout. */}
+      {!readOnly && !disabled && strokes.length > 0 && (
         <XStack
           position="absolute"
           bottom="$2"
-          right="$2"
+          insetInlineEnd="$2"
           pointerEvents="box-none"
           alignItems="flex-end"
           justifyContent="flex-end"
         >
-          <Button
-            size="$2"
-            disabled={disabled || strokes.length === 0}
-            onPress={handleClear}
-            icon={clearIcon}
-          >
-            <Button.Text>Clear</Button.Text>
+          <Button size="$2" onPress={handleClear} icon={clearIcon}>
+            <Button.Text>{t("Clear")}</Button.Text>
           </Button>
         </XStack>
       )}
@@ -592,6 +592,9 @@ export function Signature({
         size={size}
         knobProps={knobProps}
         onBlur={onBlur}
+        // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
+        // the sibling label/helper readable) — it needs the disabled state.
+        disabled={disabled}
       >
         <SignatureCanvasImpl
           {...canvasProps}
@@ -625,6 +628,8 @@ export function Signature({
             size={size}
             knobProps={knobProps}
             onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
+            // LC-40: see standalone branch — FieldLayout carries dimWhole.
+            disabled={disabled}
           >
             <SignatureCanvasImpl
               {...canvasProps}