@multiplatform.one/forms 7.57.0 → 7.59.0

package/src/FloatingPanel/index.tsx

@@ -28,11 +28,13 @@ import { useReturnFocusOnClose, useSheetModalFocus } from "../shared/focusManage
 import { useSheetEscapeDismiss } from "../shared/useSheetEscapeDismiss";
 import { useFloatingPanel, panelViewportPadding } from "./useFloatingPanel";
 import type { PanelWidthMode } from "./useFloatingPanel";
-import { OverlayStackProvider, useOverlayZIndex } from "../shared/overlayStack";
+import { OverlayStackProvider, useInsideOverlay, useOverlayZIndex } from "../shared/overlayStack";
+import { resolveCompactFace, type CompactFace } from "./compactFace";
 import { isNestedPanelAction, type PanelActionEvent } from "./nestedAction";
 import { PanelPortal } from "./PanelPortal";
 import {
   contextMenuPoint,
+  placeOverTrigger,
   pointOpensUp,
   pointPanelLeft,
   referenceCornerPoint,
@@ -99,6 +101,15 @@ export interface FloatingPanelProps {
    * OVERLAY_BREAKPOINT), floating panel from `$sm` up.
    */
   sheet?: boolean;
+  /**
+   * What the panel becomes where it would be a bottom sheet (native, and web
+   * at or below 640). `"sheet"` (default) keeps the sheet; `"menu"` opens a
+   * menu over the trigger; `"auto"` keeps the sheet at page level and opens
+   * the menu inside another overlay, so a sheet never stacks on a sheet
+   * (FZ-7830). A menu inside an overlay slides back on screen instead of
+   * taking LC-139's collision sheet. An explicit `sheet` wins on the web.
+   */
+  compactFace?: CompactFace;
   /**
    * Sizing mode for the web floating panel.
    * - `"grow"` (default): opens from the trigger to the nearest viewport
@@ -435,19 +446,25 @@ export function FloatingPanel(props: FloatingPanelProps) {
   // the panel is already classified as keyboard-origin when focus moves in.
   if (isWeb) ensureKeyboardModalityTracking();
   const viewportGtSm = useViewportGtSm();
+  const insideOverlay = useInsideOverlay();
+  const compactMenu = resolveCompactFace(props.compactFace, insideOverlay) === "menu";
   // SSR and the hydration render use the same sheet structure. The viewport
   // snapshot switches to floating after hydration when the browser is wide.
-  const shouldUseSheet = props.sheet ?? (!isWeb || !viewportGtSm);
+  const shouldUseSheet = props.sheet ?? (!isWeb || (!viewportGtSm && !compactMenu));
   // The panel floats over the page: its content never sits on a painted
   // ancestor, so a Card inside it paints as top-level.
   const panelProps = {
     ...props,
     cover: props.anchorMode ? props.anchorMode === "cover-trigger" : props.cover,
-    children: <Surface painted={false}>{props.children}</Surface>,
+    children: (
+      <Surface painted={false} elevated>
+        {props.children}
+      </Surface>
+    ),
   };
 
   if (shouldUseSheet) return <FloatingPanelSheet {...panelProps} />;
-  return <FloatingPanelWeb {...panelProps} />;
+  return <FloatingPanelWeb {...panelProps} clampCollisions={compactMenu && insideOverlay} />;
 }
 
 // ── Sheet (mobile / native / forced) ──────────────────────────
@@ -644,8 +661,9 @@ function FloatingPanelWeb({
   triggerEcho = true,
   triggerRow,
   anchorRect,
+  clampCollisions = false,
   ...sheetProps
-}: FloatingPanelProps) {
+}: FloatingPanelProps & { clampCollisions?: boolean }) {
   const panelZIndex = useOverlayZIndex("dropdown");
   const [collisionSheet, setCollisionSheet] = useState(false);
   const isFill = sizing === "fill";
@@ -783,6 +801,8 @@ function FloatingPanelWeb({
             measured.height + firstActionHeight + bodyPadding + totalBorderWidth,
           )
         : totalContentHeight;
+      let placedTop = measured.top;
+      let placedLeft = left;
       if (
         measured.width > 0 &&
         measured.height > 0 &&
@@ -793,13 +813,36 @@ function FloatingPanelWeb({
           measured.top + Math.max(neededHeight, measured.height) >
             viewportBottom - panelViewportPadding)
       ) {
-        dropdownElement.style.visibility = "hidden";
-        setCollisionSheet(true);
-        return;
+        if (!clampCollisions) {
+          dropdownElement.style.visibility = "hidden";
+          setCollisionSheet(true);
+          return;
+        }
+        // FZ-7830: inside another overlay the collision sheet would stack a
+        // sheet on a sheet, so the menu slides back on screen instead.
+        const placed = placeOverTrigger({
+          trigger: {
+            x: measured.left,
+            y: measured.top,
+            width: measured.width,
+            height: measured.height,
+          },
+          width,
+          height: neededHeight,
+          bounds: {
+            top: viewportTop + panelViewportPadding,
+            left: viewportLeft + panelViewportPadding,
+            right: viewportRight - panelViewportPadding,
+            bottom: viewportBottom - panelViewportPadding,
+          },
+          rtl,
+        });
+        placedTop = placed.top;
+        placedLeft = placed.left;
       }
-      const top = measured.top - containingBlock.top;
-      const cssLeft = left - containingBlock.left;
-      const maxHeight = Math.max(0, viewportBottom - panelViewportPadding - measured.top);
+      const top = placedTop - containingBlock.top;
+      const cssLeft = placedLeft - containingBlock.left;
+      const maxHeight = Math.max(0, viewportBottom - panelViewportPadding - placedTop);
       dropdownElement.style.top = `${top}px`;
       dropdownElement.style.left = `${cssLeft}px`;
       dropdownElement.style.maxHeight = `${maxHeight}px`;
@@ -966,6 +1009,7 @@ function FloatingPanelWeb({
     isContextMenu,
     cover,
     anchorRect,
+    clampCollisions,
     sheetProps.scrollable,
     panel.placement,
     panel.refs,

package/src/FloatingPanel/pointAnchor.spec.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from "vitest";
 import {
   contextMenuPoint,
   placeAtPoint,
+  placeOverTrigger,
   pointOpensUp,
   pointPanelLeft,
   type PanelBounds,
@@ -139,3 +140,82 @@ describe("contextMenuPoint", () => {
     expect(contextMenuPoint({ clientX: 0, clientY: 0, button: 0 }, null)).toBeNull();
   });
 });
+
+describe("placeOverTrigger (FZ-7830, LC-112 where no sheet may take it)", () => {
+  // A 390 x 844 phone inside a 10pt viewport padding.
+  const phone: PanelBounds = { top: 57, left: 10, right: 380, bottom: 800 };
+  const trigger = { x: 300, y: 200, width: 44, height: 44 };
+
+  it("puts the menu's top start corner on the trigger's when it fits", () => {
+    const placed = placeOverTrigger({
+      trigger: { x: 20, y: 200, width: 120, height: 44 },
+      width: 200,
+      height: 180,
+      bounds: phone,
+    });
+    expect(placed).toEqual({ left: 20, top: 200, width: 200, maxHeight: 600, shifted: false });
+  });
+
+  it("is at least the trigger's width", () => {
+    const placed = placeOverTrigger({
+      trigger: { x: 20, y: 200, width: 300, height: 44 },
+      width: 160,
+      height: 180,
+      bounds: phone,
+    });
+    expect(placed.width).toBe(300);
+  });
+
+  it("slides back inside the end edge for a trailing ⋯ trigger", () => {
+    const placed = placeOverTrigger({ trigger, width: 200, height: 180, bounds: phone });
+    expect(placed.left).toBe(180);
+    expect(placed.top).toBe(200);
+    expect(placed.shifted).toBe(true);
+  });
+
+  it("lines its end edge up with the trigger's in RTL", () => {
+    const placed = placeOverTrigger({
+      trigger: { x: 200, y: 200, width: 120, height: 44 },
+      width: 200,
+      height: 180,
+      bounds: phone,
+      rtl: true,
+    });
+    expect(placed.left).toBe(120);
+    expect(placed.shifted).toBe(false);
+  });
+
+  it("slides up rather than running under the bottom edge", () => {
+    const placed = placeOverTrigger({
+      trigger: { x: 20, y: 760, width: 120, height: 44 },
+      width: 200,
+      height: 180,
+      bounds: phone,
+    });
+    expect(placed.top).toBe(620);
+    expect(placed.maxHeight).toBe(180);
+    expect(placed.shifted).toBe(true);
+  });
+
+  it("caps a menu taller than the screen at the bounds, so it scrolls", () => {
+    const placed = placeOverTrigger({
+      trigger: { x: 20, y: 400, width: 120, height: 44 },
+      width: 200,
+      height: 2000,
+      bounds: phone,
+    });
+    expect(placed.top).toBe(57);
+    expect(placed.maxHeight).toBe(743);
+  });
+
+  it("never grows wider than the bounds", () => {
+    const placed = placeOverTrigger({
+      trigger: { x: 20, y: 200, width: 120, height: 44 },
+      width: 900,
+      height: 180,
+      bounds: phone,
+    });
+    expect(placed.width).toBe(370);
+    expect(placed.left).toBe(10);
+  });
+});

package/src/FloatingPanel/pointAnchor.ts

@@ -120,3 +120,55 @@ export function referenceCornerPoint(reference: PointReference, rtl = false): Pa
   const rect = reference.getBoundingClientRect();
   return { x: rtl ? rect.right : rect.left, y: rect.bottom };
 }
+
+/** A trigger's box in the same coordinates as the bounds (window or viewport). */
+export interface TriggerRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface TriggerPlacement {
+  left: number;
+  top: number;
+  width: number;
+  maxHeight: number;
+  /** The menu moved off the trigger's top start corner to stay on screen. */
+  shifted: boolean;
+}
+
+/**
+ * A menu opened over its trigger (LC-112) where no bottom sheet may take it:
+ * on native, and inside another overlay (FZ-7830). Its top start corner sits
+ * on the trigger's, it is at least the trigger's width, and where it would
+ * run off screen it slides back inside the bounds the way a UIMenu does,
+ * scrolling whatever still does not fit.
+ */
+export function placeOverTrigger({
+  trigger,
+  width,
+  height,
+  bounds,
+  rtl = false,
+}: {
+  trigger: TriggerRect;
+  width: number;
+  height: number;
+  bounds: PanelBounds;
+  rtl?: boolean;
+}): TriggerPlacement {
+  const room = Math.max(0, bounds.right - bounds.left);
+  const w = Math.min(Math.max(width, trigger.width), room);
+  const wantLeft = rtl ? trigger.x + trigger.width - w : trigger.x;
+  const left = Math.max(bounds.left, Math.min(wantLeft, bounds.right - w));
+  const h = Math.min(height, Math.max(0, bounds.bottom - bounds.top));
+  const top = Math.max(bounds.top, Math.min(trigger.y, bounds.bottom - h));
+  return {
+    left,
+    top,
+    width: w,
+    maxHeight: Math.max(0, bounds.bottom - top),
+    shifted: left !== wantLeft || top !== trigger.y,
+  };
+}

package/src/InputParts/index.tsx

@@ -485,6 +485,15 @@ const InputGroupImpl = InputGroupFrame.styleable<{
     />
   ) : null;
   const trailingPadProps = trailingOverlay ? { paddingInlineEnd: 0 } : undefined;
+  // FZ-7853 (LC-10): a Box sized by its content (a picker trigger in a row)
+  // is capped at its column, so a phone-width form never pushes the field
+  // past the card inset. A cap, not flexShrink: shrink would also act on the
+  // height axis in a column parent. A Box with its own width (an OTP digit)
+  // keeps it.
+  const columnFitProps =
+    (props as { width?: unknown }).width == null
+      ? { minWidth: 0, maxWidth: "100%" as const }
+      : undefined;
 
   // Chromeless rendering inside table cells
   if (inTableCell) {
@@ -581,6 +590,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
           }}
           focusStyle={FIELD_FOCUS_STYLE}
           focusVisibleStyle={FIELD_FOCUS_STYLE}
+          {...columnFitProps}
           {...props}
           {...passthroughSizeProps}
           {...insetPadProps}
@@ -772,11 +782,12 @@ const InputAreaImpl = InputFrame.styleable<{
   const hugWidth = flexProp === 0 || typeof widthProp === "number";
 
   return (
-    // LC-06/LC-10 (UX-P12): in a table cell the flex wrapper and the raw
-    // input must be allowed to shrink below the <input>'s intrinsic width
-    // (min-width:auto floors flex items at it); width 100% makes the input
-    // adopt the flexed width instead of its size-attribute default. Explicit
-    // consumer widths (OTP digit boxes) still win via the later spread.
+    // LC-06/LC-10 (UX-P12, FZ-7853): in a table cell and in a form column
+    // alike, the flex wrapper and the raw input must be allowed to shrink
+    // below the <input>'s intrinsic width (min-width:auto floors flex items
+    // at it); width 100% makes the input adopt the flexed width instead of
+    // its size-attribute default. Explicit consumer widths (OTP digit boxes,
+    // Duration) still win via the later spread.
     <View
       flex={hugWidth ? 0 : 1}
       {...(hugWidth && typeof widthProp === "number"
@@ -789,7 +800,7 @@ const InputAreaImpl = InputFrame.styleable<{
       {...(heightProp != null
         ? { height: heightProp, minHeight: minHeightProp ?? 0, maxHeight: maxHeightProp }
         : undefined)}
-      {...(inTableCell ? { minWidth: 0 } : undefined)}
+      {...(inTableCell || !hugWidth ? { minWidth: 0 } : undefined)}
     >
       <InputFrame
         touch={hydrationTouch}
@@ -800,7 +811,7 @@ const InputAreaImpl = InputFrame.styleable<{
         {...knobProps.controlType}
         color={knobProps.textAccentColor}
         placeholderTextColor={theme.placeholderColor?.val ?? "$placeholderColor"}
-        {...(inTableCell ? { width: "100%" as const, minWidth: 0 } : undefined)}
+        {...(inTableCell || !hugWidth ? { width: "100%" as const, minWidth: 0 } : undefined)}
         {...knobProps.body}
         type={secureTextEntry ? "password" : props.type}
         padding={0}

package/src/fields/Checkbox/Checkbox.native.spec.tsx

@@ -5,6 +5,7 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { Form } from "../../Form";
 import { Checkbox } from "./Checkbox";
 import { Checkboxes } from "./index";
+import { muteBubbleInputs } from "../../../tests/muteBubbleInputs";
 
 vi.mock("tamagui", async (importOriginal) => ({
   ...(await importOriginal<typeof import("tamagui")>()),
@@ -90,3 +91,46 @@ describe("native Checkbox square tap", () => {
     expect(handlersOnLastFrame()).toEqual([]);
   });
 });
+
+// FZ-7849. Same contract as RadioGroup's row press: the row and the label toggle
+// directly on native instead of through tamagui's focusable registry. A second
+// toggle would undo the first, so every case counts the calls.
+describe("native Checkbox row press", () => {
+  muteBubbleInputs();
+
+  const rowOf = (label: HTMLElement) => label.parentElement as HTMLElement;
+
+  it("toggles once from the row and once from the label, standalone", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<Checkbox label="Accept terms" onChange={onChange} />);
+    const label = result.getByText("Accept terms");
+    expect(label.hasAttribute("for")).toBe(false);
+    fireEvent.click(rowOf(label));
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(true);
+    expect(result.getByRole("checkbox").getAttribute("aria-checked")).toBe("true");
+    fireEvent.click(label);
+    expect(onChange).toHaveBeenCalledTimes(2);
+    expect(onChange).toHaveBeenLastCalledWith(false);
+    expect(result.getByRole("checkbox").getAttribute("aria-checked")).toBe("false");
+  });
+
+  it("toggles a form field once from its label", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<FormCheckbox onChange={onChange} />);
+    fireEvent.click(result.getByText("Accept terms"));
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(true);
+    fireEvent.click(rowOf(result.getByText("Accept terms")));
+    expect(onChange).toHaveBeenLastCalledWith(false);
+  });
+
+  it("leaves a disabled checkbox's row and label dead", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <Checkbox label="Accept terms" onChange={onChange} disabled />,
+    );
+    const label = result.getByText("Accept terms");
+    fireEvent.click(rowOf(label));
+    fireEvent.click(label);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/src/fields/Checkbox/Checkbox.tsx

@@ -42,6 +42,7 @@ import {
   getCheckboxIconSize,
 } from "./CheckboxBox";
 import { CheckboxFieldFrame } from "./CheckboxFieldFrame";
+import { choiceLabelPressProps, choiceRowPressProps } from "../../shared/choiceRowPress";
 
 export interface CheckboxProps {
   name?: string;
@@ -285,6 +286,14 @@ export function Checkbox({
   if (!resolvedForm || !name) {
     const isControlled = checked !== undefined;
     const needsFieldLayout = !!(error || helperText);
+    const currentChecked = checked ?? uncontrolledChecked;
+    const commitChecked = (val: CheckedState) => {
+      if (disabled || readOnly) return;
+      setUncontrolledChecked(val);
+      handleValueChange(val);
+    };
+    // Indeterminate toggles to checked, as tamagui's own press does.
+    const toggle = disabled || readOnly ? undefined : () => commitChecked(currentChecked !== true);
 
     const checkboxEl = (
       <CheckboxFieldFrame
@@ -307,23 +316,23 @@ export function Checkbox({
         // whole assembly via FieldLayout instead.
         {...(disabled ? disabledState.chromeKnobProps : undefined)}
         id={id}
+        // Native rows toggle from outside the frame (FZ-7849), so the frame
+        // follows our state there instead of keeping its own.
         {...(isControlled
           ? { checked }
-          : defaultValue !== undefined
-            ? { defaultChecked: defaultValue as CheckedState }
-            : undefined)}
+          : !isWeb
+            ? { checked: uncontrolledChecked ?? false }
+            : defaultValue !== undefined
+              ? { defaultChecked: defaultValue as CheckedState }
+              : undefined)}
         {...(readOnly ? { pointerEvents: "none" as const } : undefined)}
         {...(readOnly ? { "aria-readonly": true } : undefined)}
         aria-required={required || undefined}
         aria-invalid={!!error || undefined}
         {...nativeCheckboxA11y(typeof error === "string" && error ? error : undefined)}
-        onCheckedChange={(val) => {
-          if (disabled || readOnly) return;
-          setUncontrolledChecked(val);
-          handleValueChange(val);
-        }}
+        onCheckedChange={commitChecked}
       >
-        {renderControlContent(checked ?? uncontrolledChecked)}
+        {renderControlContent(currentChecked)}
       </CheckboxFieldFrame>
     );
 
@@ -340,11 +349,12 @@ export function Checkbox({
         {...(disabled && !needsFieldLayout
           ? { "data-disabled-dimmed": disabledState.style === "dimWhole" ? "true" : "false" }
           : undefined)}
+        {...(label ? choiceRowPressProps(toggle) : undefined)}
       >
         {checkboxEl}
         {label && (
           <Label
-            htmlFor={id}
+            {...choiceLabelPressProps(id, toggle)}
             size={(size || "$true") as FontSizeTokens}
             {...knobProps.textWeight}
             color={baseLabelColor}
@@ -410,6 +420,14 @@ export function Checkbox({
           color: resolvedLabelColor,
           ...text.focusVisibleKnobProps,
         };
+        const commitChecked = (newChecked: CheckedState) => {
+          if (disabled || readOnly) return;
+          const fieldValue = newChecked === "indeterminate" ? false : newChecked === true;
+          field.handleChange(fieldValue as any);
+          handleValueChange(newChecked);
+        };
+        const toggle =
+          disabled || readOnly ? undefined : () => commitChecked(resolvedChecked !== true);
 
         return (
           <FieldLayout
@@ -425,6 +443,7 @@ export function Checkbox({
               gap={inlineGap}
               alignItems="center"
               {...(elevationWrapperProps.elevation && { overflow: "visible" as const })}
+              {...(label ? choiceRowPressProps(toggle) : undefined)}
             >
               {(() => {
                 const checkboxElement = (
@@ -458,13 +477,7 @@ export function Checkbox({
                         ? resolvedError
                         : undefined,
                     )}
-                    onCheckedChange={(newChecked) => {
-                      if (disabled || readOnly) return;
-                      const fieldValue =
-                        newChecked === "indeterminate" ? false : newChecked === true;
-                      field.handleChange(fieldValue as any);
-                      handleValueChange(newChecked);
-                    }}
+                    onCheckedChange={commitChecked}
                   >
                     {renderControlContent(resolvedChecked)}
                   </CheckboxFieldFrame>
@@ -473,7 +486,7 @@ export function Checkbox({
               })()}
               {label && (
                 <Label
-                  htmlFor={id}
+                  {...choiceLabelPressProps(id, toggle)}
                   size={(size || "$true") as FontSizeTokens}
                   {...knobProps.textWeight}
                   color={resolvedLabelColor}

package/src/fields/DatePicker/columnFit.spec.tsx

@@ -0,0 +1,85 @@
+import type { ReactElement } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { YStack } from "tamagui";
+import { Input as InputParts } from "../../InputParts";
+import { Input } from "../Input";
+import { SearchInput } from "../SearchInput";
+import { TimePicker } from "../TimePicker";
+import { DatePicker, DateRangePicker, DatetimePicker, MonthPicker } from "./index";
+
+vi.mock("@tamagui/lucide-icons-2", () => ({
+  Calendar: () => null,
+  ChevronLeft: () => null,
+  ChevronRight: () => null,
+  Clock: () => null,
+  X: () => null,
+}));
+
+// FZ-7853 / LC-10 FRAME-CONTAINMENT. happy-dom has no layout, so this pins the
+// CSS that makes the browser fit: every field Box is capped at its column
+// (max-width 100%, min-width 0), and the raw input inside takes the flexed
+// width (width 100%, min-width 0) instead of its size-attribute width, which
+// floored a clearable date field at 338px in a 324px column. The browser arm
+// (lc-verify LC-10 fieldColumn, 320 and 390 viewports) measures the real box.
+const column = 300;
+
+function inColumn(node: ReactElement) {
+  return renderWithProviders(<YStack width={column}>{node}</YStack>);
+}
+
+function expectFits(root: HTMLElement) {
+  const boxes = [...root.querySelectorAll<HTMLElement>("[data-mp-input-box]")];
+  expect(boxes.length).toBeGreaterThan(0);
+  for (const box of boxes) {
+    const cs = getComputedStyle(box);
+    expect(cs.maxWidth).toBe("100%");
+    expect(cs.minWidth).toBe("0px");
+    for (const input of box.querySelectorAll<HTMLElement>("input[data-mp-input-area]")) {
+      expect(getComputedStyle(input).width).toBe("100%");
+      expect(getComputedStyle(input).minWidth).toBe("0px");
+      expect(getComputedStyle(input.parentElement as HTMLElement).minWidth).toBe("0px");
+    }
+  }
+  return boxes;
+}
+
+describe("FZ-7853 field boxes fit a phone-width column", () => {
+  it("a clearable DatePicker in a 300px column: box capped, input shrinks, clear inside the box", () => {
+    const result = inColumn(<DatePicker label="Due Date" value="2026-10-31" onChange={() => {}} />);
+    const [box] = expectFits(result.container);
+    const clear = result.container.querySelector("[data-testid='date-picker-clear']");
+    expect(clear).toBeTruthy();
+    expect(box.contains(clear)).toBe(true);
+  });
+
+  it.each([
+    ["DatePicker (empty)", <DatePicker key="d" label="Date" />],
+    [
+      "DatetimePicker",
+      <DatetimePicker key="dt" label="When" value={new Date("2026-10-31T09:30:00")} />,
+    ],
+    ["TimePicker", <TimePicker key="t" label="Time" value="09:30" onChange={() => {}} />],
+    ["MonthPicker", <MonthPicker key="m" label="Month" />],
+    ["DateRangePicker", <DateRangePicker key="r" label="Range" />],
+    ["Input", <Input key="i" label="Name" defaultValue="A long enough value to fill" />],
+    ["SearchInput", <SearchInput key="s" value="query" onChange={() => {}} />],
+  ])("%s takes the same column-fit shell", (_name, node) => {
+    expectFits(inColumn(node).container);
+  });
+
+  it("an Area with its own width keeps it (Duration and OTP digits)", () => {
+    const result = renderWithProviders(
+      <InputParts>
+        <InputParts.Box width={48}>
+          <InputParts.Area width={32} />
+        </InputParts.Box>
+      </InputParts>,
+    );
+    const box = result.container.querySelector<HTMLElement>("[data-mp-input-box]");
+    const input = result.container.querySelector<HTMLElement>("input[data-mp-input-area]");
+    expect(getComputedStyle(box as HTMLElement).width).toBe("48px");
+    expect(getComputedStyle(box as HTMLElement).maxWidth).not.toBe("100%");
+    expect(getComputedStyle(input as HTMLElement).width).toBe("32px");
+  });
+});

package/src/fields/RadioGroup/RadioGroup.native.spec.tsx

@@ -1,6 +1,8 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { RadioGroup } from "./index";
+import { muteBubbleInputs } from "../../../tests/muteBubbleInputs";
 
 // MPO-283. Mock tamagui's isWeb so the native branch runs on the test host
 // renderer, then read the React Native prop names back off the DOM. The state
@@ -65,3 +67,66 @@ describe("native RadioGroup accessibility contract", () => {
   // React Native accessibility props off Label entirely — so that one is
   // measured on device instead.
 });
+
+// FZ-7849. On a device a label's press reached the radio only through tamagui's
+// global focusable registry (Label `htmlFor` -> focusFocusable), which can go
+// dead while the radio still works, and the row around the label was no target
+// at all. The row and the label now select directly. This renderer bubbles
+// clicks where React Native gives a tap to the innermost handler alone, so the
+// label consumes its press and the row is clicked on its own.
+describe("native RadioGroup row press", () => {
+  muteBubbleInputs();
+
+  const rowOf = (label: HTMLElement) => label.parentElement as HTMLElement;
+
+  it("selects an option from a press anywhere on its row", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <RadioGroup label="Phase" options={phase} value="DEBITS" onChange={onChange} />,
+    );
+    fireEvent.click(rowOf(result.getByText("CREDITS")));
+    expect(onChange).toHaveBeenCalledExactlyOnceWith("CREDITS");
+  });
+
+  it("selects from the label without the id registry", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <RadioGroup label="Phase" options={phase} defaultValue="DEBITS" onChange={onChange} />,
+    );
+    const label = result.getByText("CREDITS");
+    expect(label.hasAttribute("for")).toBe(false);
+    fireEvent.click(label);
+    expect(onChange).toHaveBeenCalledExactlyOnceWith("CREDITS");
+  });
+
+  it("does not re-emit the option that is already selected", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <RadioGroup label="Phase" options={phase} value="DEBITS" onChange={onChange} />,
+    );
+    fireEvent.click(rowOf(result.getByText("DEBITS")));
+    fireEvent.click(result.getByText("DEBITS"));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("leaves a disabled option's row and label dead", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <RadioGroup label="Phase" options={phase} value="DEBITS" onChange={onChange} />,
+    );
+    const label = result.getByText("DISCRETIONARY");
+    fireEvent.click(rowOf(label));
+    fireEvent.click(label);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("leaves a read-only group's rows dead", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <RadioGroup label="Phase" options={phase} value="DEBITS" onChange={onChange} readOnly />,
+    );
+    fireEvent.click(rowOf(result.getByText("CREDITS")));
+    fireEvent.click(result.getByText("CREDITS"));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});