@multiplatform.one/forms 7.7.4 → 7.8.0

package/src/Button/index.tsx

@@ -1,3 +1,4 @@
+import { pressSlopProps } from "../shared/pressSlopProps";
 import {
   Children,
   createElement,
@@ -20,7 +21,6 @@ import {
   sizeRecipeFromHeight,
   solidButtonIntents,
   useResolvedKnobs,
-  type HitSlopInsets,
   type RecipeFamilyName,
   type SizeRecipe,
   type SizeRecipeRadiusStop,
@@ -56,8 +56,8 @@ import { useControlGrouped } from "../shared/groupContext";
  * Coordinated size recipe (Polaris slim/medium/large, Primer s/m/l, Linear
  * 28/32/40, Spectrum S/M, M3 XS/S). Height, pad, type, icon, gap and radius
  * step together from the size table. The borderRadius knob is an override
- * that retargets both painted radius and inner gap (`resolveControlRadius`).
- * Density is a different axis (pad/gap only).
+ * of painted corners only (`resolveControlRadius`); internal gap keeps the
+ * icon and label grouped. Density selects the same-height compact family.
  *
  * GENERATED (LC-75 / LC-80): Button consumes `recipeFamilies.control` — the
  * handwritten mirror table this file used to carry drifted (md font 13 vs the
@@ -105,40 +105,6 @@ function sizeTokenPx(size: SizeTokens | number | undefined): number {
   return typeof resolved === "number" && Number.isFinite(resolved) ? resolved : MIN_PRESS_TARGET;
 }
 
-const PRESS_SLOP_STYLE_ID = "mp-button-press-slop";
-
-function pressSlopStylesheet(): string {
-  const rules = ["[data-mp-press-slop]{position:relative}"];
-  for (let n = 1; n <= 16; n++) {
-    rules.push(`[data-mp-press-slop="${n}"]::after{content:"";position:absolute;inset:-${n}px}`);
-  }
-  return rules.join("");
-}
-
-function ensureButtonPressSlop(): void {
-  if (!isWeb || typeof document === "undefined") return;
-  if (document.getElementById(PRESS_SLOP_STYLE_ID)) return;
-  const tag = document.createElement("style");
-  tag.id = PRESS_SLOP_STYLE_ID;
-  tag.textContent = pressSlopStylesheet();
-  document.head.appendChild(tag);
-}
-
-function pressSlopProps(
-  visualPx: number,
-  enabled: boolean,
-): { "data-mp-press-slop": string } | { hitSlop: HitSlopInsets } | undefined {
-  if (!enabled || visualPx >= MIN_PRESS_TARGET) return undefined;
-  const hitSlop = pressTargetHitSlop(visualPx);
-  const outset = hitSlop.top;
-  if (outset <= 0) return undefined;
-  if (isWeb) {
-    ensureButtonPressSlop();
-    return { "data-mp-press-slop": String(outset) };
-  }
-  return { hitSlop };
-}
-
 /** DG-ACT-01 role within an ActionBar / action region. */
 export type ButtonActionRole = "primary" | "secondary" | "chrome";
 
@@ -273,7 +239,29 @@ export const ButtonFrame = styled(View, {
   },
 });
 
-export interface ButtonProps extends Omit<TamaguiButtonProps, "form" | "icon" | "iconAfter"> {
+/**
+ * MPO-91: `variant` is Omitted, and that Omit IS the guard.
+ *
+ * `ButtonFrame` is `styled(View)` and declares only an `outlined` BOOLEAN, so
+ * `variant="outlined"` was never read — it landed on the frame as an unread
+ * prop and the button rendered FILLED. Because `TamaguiButtonProps` carries
+ * `variant`, the inherited type advertised a channel this component ignores,
+ * so 75 call sites across 29 files typechecked, rendered wrong, and said
+ * nothing. Declaring the prop and dropping it on the floor is the lying API
+ * MPO-81 refused to ship.
+ *
+ * Omitting it turns every one of those call sites into a compile error instead
+ * of a silent no-op, which is what stops the prop coming back. The house
+ * channel is the `outlined` boolean.
+ *
+ * `@multiplatform.one/components`' Button still accepts `variant` and maps it
+ * onto `outlined` — that shim is the documented raw-tamagui compat hatch, and
+ * it declares the prop itself rather than inheriting it from here.
+ */
+export interface ButtonProps extends Omit<
+  TamaguiButtonProps,
+  "form" | "icon" | "iconAfter" | "variant"
+> {
   action?: "submit" | "reset";
   form?: AnyFormApi;
   loading?: boolean;
@@ -684,7 +672,6 @@ export function Button({
       circular={!nested && isCircular ? true : undefined}
       chromeless={selectedFill ? false : chromeless}
       selected={selectedFill || undefined}
-      {...(outlined ? { variant: "outlined" as const } : undefined)}
       {...(!isCircular || nested
         ? {
             paddingHorizontal: padX,

package/src/Chip/Chip.spec.tsx

@@ -161,7 +161,9 @@ describe("Chip", () => {
 
   it("selected chip renders a leading check when no icon is passed", () => {
     const result = renderWithProviders(<Chip selected>On</Chip>);
-    expect(result.container.querySelector("svg")).not.toBeNull();
+    const fill = result.container.querySelector("svg")?.getAttribute("fill");
+    expect(fill).toBeTruthy();
+    expect(fill?.startsWith("$")).toBe(false);
   });
 
   it("onPress fires from the chip body and does not fire dismiss", () => {

package/src/Chip/index.tsx

@@ -436,11 +436,7 @@ export function Chip({
       ? t("Remove {{label}}", { label: String(children) })
       : t("Remove");
   const leading =
-    icon !== undefined ? (
-      icon
-    ) : selected ? (
-      <CheckIcon size={iconSize} color={textColor as string} />
-    ) : null;
+    icon !== undefined ? icon : selected ? <CheckIcon size={iconSize} color={glyphInk} /> : null;
 
   const onBodyKeyDown = ((e: KeyboardEvent) => {
     if ((e.key === "Enter" || e.key === " ") && onPress) {

package/src/ContextualSaveBar/ContextualSaveBar.spec.tsx

@@ -119,6 +119,39 @@ describe("ContextualSaveBar", () => {
     expect(savebar()).toBeNull();
   });
 
+  it.each([undefined, "Review changes"])(
+    "shows the complete narrow-form refusal with custom status %s",
+    async (message) => {
+      const refusal =
+        "service_identifier_already_exists_012345678901234567890123456789. Choose a different identifier and retry.";
+      const result = renderWithProviders(
+        <div style={{ width: 309 }}>
+          <Form
+            saveBar={{ message }}
+            formOptions={{ defaultValues: { name: "svc" } }}
+            onSubmit={async () => {
+              throw new Error(refusal);
+            }}
+          >
+            <Input name="name" label="Service name" />
+          </Form>
+        </div>,
+      );
+      const input = result.container.querySelector("input")!;
+      await act(async () => typeIn(input, "svc-billing"));
+      await act(async () => fireEvent.click(barButton("Save")));
+      await waitFor(() => expect(savebar()?.textContent).toContain(refusal));
+      const status = savebar()!.querySelector('[role="status"]')!;
+      expect(getComputedStyle(status).whiteSpace).not.toBe("nowrap");
+      expect(getComputedStyle(status).textOverflow).not.toBe("ellipsis");
+      expect(getComputedStyle(status).overflowWrap).toBe("anywhere");
+      expect(getComputedStyle(savebar()!).flexDirection).toBe("column");
+      expect(barButton("Save").getAttribute("aria-disabled")).toBeNull();
+      expect(barButton("Discard").getAttribute("aria-disabled")).toBeNull();
+      expect((input as HTMLInputElement).value).toBe("svc-billing");
+    },
+  );
+
   it("clears after Save and after Discard confirm", async () => {
     const onSubmit = vi.fn();
     const result = renderWithProviders(

package/src/ContextualSaveBar/ContextualSaveBar.stories.tsx

@@ -89,3 +89,22 @@ export const Dirty: Story = {
     </Form>
   ),
 };
+
+export const NarrowRefusal: Story = {
+  name: "Narrow refusal",
+  render: () => (
+    <YStack width={309} maxWidth="100%">
+      <Form
+        saveBar={{ forceVisible: true }}
+        formOptions={{ defaultValues: { name: "service-example" } }}
+        onSubmit={async () => {
+          throw new Error(
+            "service_identifier_already_exists_012345678901234567890123456789. Choose a different identifier and retry.",
+          );
+        }}
+      >
+        <Input name="name" label="Service name" />
+      </Form>
+    </YStack>
+  ),
+};

package/src/ContextualSaveBar/index.tsx

@@ -39,7 +39,7 @@ export interface ContextualSaveBarProps {
    * Form reads this; the bar itself does not.
    */
   onAutoCommit?: (name: string, value: unknown) => void;
-  /** Override the in-bar status line. */
+  /** Override normal dirty-state copy; saving and failures retain their status. */
   message?: string;
 }
 
@@ -83,7 +83,6 @@ function statusCopy(args: {
   dirty: number;
   override?: string;
 }): { text: string; failed: boolean; qualifier?: string } {
-  if (args.override) return { text: args.override, failed: false };
   if (args.isSubmitting) return { text: t("Saving…"), failed: false };
   if (args.saveError) {
     return {
@@ -101,6 +100,7 @@ function statusCopy(args: {
       failed: true,
     };
   }
+  if (args.override) return { text: args.override, failed: false };
   const qualifier =
     args.dirty > 0
       ? args.dirty === 1
@@ -236,11 +236,13 @@ export function ContextualSaveBar({
             data-mp-savebar-bottom-radius="0"
             role="region"
             aria-label={t("Unsaved changes")}
-            position="sticky"
-            bottom={0}
+            // Tamagui maps sticky to absolute on native; keep the dock in flow there.
+            position={isWeb ? "sticky" : "relative"}
+            bottom={isWeb ? 0 : undefined}
             width="100%"
             zIndex={zIndex.sheet}
-            alignItems="center"
+            flexDirection={copy.failed ? "column" : "row"}
+            alignItems={copy.failed ? "stretch" : "center"}
             paddingTop="$2.5"
             paddingHorizontal={padX as never}
             paddingBottom="$2.5"
@@ -266,15 +268,17 @@ export function ContextualSaveBar({
               ...(elevationProps.style as object | undefined),
             }}
           >
-            <XStack flex={1} minWidth={0} alignItems="baseline" gap="$2">
+            <XStack flex={copy.failed ? undefined : 1} minWidth={0} alignItems="baseline" gap="$2">
               <Text
                 role="status"
                 {...knobProps.body}
                 fontSize="$4"
                 lineHeight="$4"
                 color={copy.failed ? formCommonColors.error : "$color"}
-                numberOfLines={1}
-                ellipsizeMode="tail"
+                flexShrink={1}
+                numberOfLines={copy.failed ? undefined : 1}
+                ellipsizeMode={copy.failed ? undefined : "tail"}
+                {...(isWeb && copy.failed ? { style: { overflowWrap: "anywhere" } } : {})}
               >
                 {copy.text}
               </Text>

package/src/ContextualSaveBar/nativeFlow.spec.tsx

@@ -0,0 +1,20 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { expect, it, vi } from "vitest";
+import { Form } from "../Form";
+import { ContextualSaveBar } from "./index";
+
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+it("reserves native layout space instead of mapping a sticky dock to absolute", () => {
+  const view = renderWithProviders(
+    <Form formOptions={{ defaultValues: { name: "example" } }}>
+      <ContextualSaveBar forceVisible />
+    </Form>,
+  );
+  const bar = view.container.querySelector("[data-mp-contextual-savebar]")!;
+  expect(getComputedStyle(bar).position).toBe("relative");
+  expect(getComputedStyle(bar).bottom).not.toBe("0px");
+});

package/src/FieldLayout.stories.tsx

@@ -1,10 +1,14 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Preset } from "@multiplatform.one/theme";
 import { Input as TamaguiInput, Paragraph, YStack, XStack } from "tamagui";
 import { Button } from "./Button";
 import { Form } from "./Form";
 import { Field, FieldLayout } from "./fieldLayout";
+import { Input } from "./fields/Input";
+import { Checkbox } from "./fields/Checkbox";
 
 const meta: Meta<typeof FieldLayout> = {
   title: "Forms/FieldLayout",
@@ -39,6 +43,43 @@ export const Basic: Story = {
   ),
 };
 
+/** Shared message order with real controls, including the inline checkbox row. */
+export const MessageOrder: Story = {
+  render: () => {
+    const Example = () => {
+      const [showErrors, setShowErrors] = useState(false);
+      return (
+        <YStack gap="$4" width="100%" maxWidth={480}>
+          <Input
+            id="message-top"
+            label="Contact"
+            helperText="Use an address where we can reach you"
+            error={showErrors ? "Enter a contact address" : undefined}
+          />
+          <Preset overrides={{ fieldLabelPlacement: "side" }}>
+            <Input
+              id="message-side"
+              label="Office"
+              helperText="Use the office name shown on your account"
+              error={showErrors ? "Enter your office name" : undefined}
+            />
+          </Preset>
+          <Checkbox
+            id="message-inline"
+            label="Accept terms"
+            helperText="Read the terms before continuing"
+            error={showErrors ? "Accept the terms to continue" : undefined}
+          />
+          <Button onPress={() => setShowErrors((shown) => !shown)}>
+            {showErrors ? "Show helpers" : "Show validation"}
+          </Button>
+        </YStack>
+      );
+    };
+    return <Example />;
+  },
+};
+
 export const ErrorStates: Story = {
   render: () => (
     <YStack gap="$6" maxWidth={360}>

package/src/FloatingPanel/FloatingPanel.native.spec.tsx

@@ -57,6 +57,60 @@ function panel(open: boolean) {
 }
 
 describe("FloatingPanel native presentation lifecycle", () => {
+  it("keeps full-field triggers stretched and allows content-sized composite adornments", () => {
+    for (const triggerSizing of [undefined, "content"] as const) {
+      const result = renderWithProviders(
+        <FloatingPanel
+          open={false}
+          onOpenChange={onOpenChange}
+          trigger={<Text>Country</Text>}
+          triggerSizing={triggerSizing}
+          triggerA11y={{ label: "Country code" }}
+        >
+          <Text>row</Text>
+        </FloatingPanel>,
+      );
+      const trigger = result.getByRole("button", { name: "Country code" });
+      expect(getComputedStyle(trigger).width).toBe(triggerSizing === "content" ? "" : "100%");
+      expect(getComputedStyle(trigger).alignSelf).toBe("stretch");
+      expect(getComputedStyle(trigger.parentElement!).width).toBe(
+        triggerSizing === "content" ? "" : "100%",
+      );
+      result.unmount();
+    }
+  });
+
+  it("composes native readiness with entrance and ignores late closed or unmounted events", () => {
+    const onNativeShow = vi.fn();
+    const example = (open: boolean) => (
+      <FloatingPanel
+        open={open}
+        onOpenChange={onOpenChange}
+        onNativeShow={onNativeShow}
+        trigger={<Text>Pick</Text>}
+      >
+        <Text>row</Text>
+      </FloatingPanel>
+    );
+    const result = renderWithProviders(example(true));
+    expect(Animated.timing).toHaveBeenCalledTimes(1);
+    expect(onNativeShow).not.toHaveBeenCalled();
+    const shown = modal.onShow;
+    act(() => shown?.());
+    expect(onNativeShow).toHaveBeenCalledTimes(1);
+    expect(Animated.timing).toHaveBeenCalledTimes(1);
+    result.rerender(example(false));
+    act(() => shown?.());
+    expect(onNativeShow).toHaveBeenCalledTimes(1);
+    result.rerender(example(true));
+    const nextShown = modal.onShow;
+    act(() => nextShown?.());
+    expect(onNativeShow).toHaveBeenCalledTimes(2);
+    result.unmount();
+    act(() => nextShown?.());
+    expect(onNativeShow).toHaveBeenCalledTimes(2);
+  });
+
   it("enters without onShow and ignores onShow for the same presentation", () => {
     renderWithProviders(panel(true));
     expect(Animated.timing).toHaveBeenCalledTimes(1);

package/src/FloatingPanel/FloatingPanel.spec.tsx

@@ -40,12 +40,16 @@ function Harness({
   sheet,
   onOpenChange,
   extra,
+  openOn,
+  sizing,
 }: {
   trigger: ReactNode;
   disabled?: boolean;
   sheet?: boolean;
   onOpenChange?: (open: boolean) => void;
   extra?: ReactNode;
+  openOn?: "press" | "contextmenu";
+  sizing?: "grow" | "fill";
 }) {
   const [open, setOpen] = useState(false);
   return (
@@ -64,6 +68,8 @@ function Harness({
         trigger={trigger}
         disabled={disabled}
         sheet={sheet}
+        openOn={openOn}
+        sizing={sizing}
       >
         <Text>panel body</Text>
         {extra}
@@ -79,6 +85,75 @@ const isOpen = (result: { container: HTMLElement }) =>
 
 const floatingViewport = () => document.querySelector('[data-testid="floating-panel-viewport"]');
 
+describe("FloatingPanel nested actions", () => {
+  it("does not require a marked DOM button to stop propagation", () => {
+    const action = vi.fn();
+    const onOpenChange = vi.fn();
+    const result = renderWithProviders(
+      <Harness
+        onOpenChange={onOpenChange}
+        trigger={
+          <button type="button" data-floating-panel-action="true" onClick={action}>
+            Clear selection
+          </button>
+        }
+      />,
+    );
+    fireEvent.click(result.getByRole("button", { name: "Clear selection" }), { detail: 0 });
+    expect(action).toHaveBeenCalledOnce();
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
+  for (const sheet of [true, false]) {
+    for (const activation of ["pointer", "keyboard"] as const) {
+      it(`lets a marked ${activation} action run without opening ${sheet ? "sheet" : "float"}`, () => {
+        const action = vi.fn();
+        const onOpenChange = vi.fn();
+        const result = renderWithProviders(
+          <Harness
+            sheet={sheet}
+            onOpenChange={onOpenChange}
+            trigger={
+              <Button
+                data-floating-panel-action="true"
+                onPress={(event) => {
+                  event.stopPropagation();
+                  action();
+                }}
+              >
+                Clear selection
+              </Button>
+            }
+          />,
+        );
+        const button = result.getByRole("button", { name: "Clear selection" });
+        if (activation === "pointer") pointerPress(button);
+        else {
+          fireEvent.keyDown(button, { key: "Enter" });
+          fireEvent.keyUp(button, { key: "Enter" });
+        }
+        expect(action).toHaveBeenCalledOnce();
+        expect(onOpenChange).not.toHaveBeenCalled();
+        expect(isOpen(result)).toBe(false);
+      });
+    }
+
+    it(`preserves context-menu opening from a marked action in ${sheet ? "sheet" : "float"}`, () => {
+      const onOpenChange = vi.fn();
+      const result = renderWithProviders(
+        <Harness
+          sheet={sheet}
+          openOn="contextmenu"
+          onOpenChange={onOpenChange}
+          trigger={<Button data-floating-panel-action="true">Context action</Button>}
+        />,
+      );
+      fireEvent.contextMenu(result.getByRole("button", { name: "Context action" }));
+      expect(onOpenChange).toHaveBeenCalledWith(true);
+    });
+  }
+});
+
 /** The DEEPEST node carrying the whole label — several ancestors report the
  *  same `textContent`, and pressing one of those would sidestep the very
  *  swallow these cases exist to catch. */
@@ -260,4 +335,38 @@ describe("FloatingPanel trigger — floating mode", () => {
       expect(document.activeElement).toBe(trigger);
     });
   });
+
+  it("disconnects fill content observation on close and unmount", async () => {
+    const observers: { target: Element; disconnected: boolean }[] = [];
+    class TrackingResizeObserver {
+      private tracked?: { target: Element; disconnected: boolean };
+      observe(target: Element) {
+        if (target.parentElement?.getAttribute("data-testid") !== "floating-panel-viewport") return;
+        this.tracked = { target, disconnected: false };
+        observers.push(this.tracked);
+      }
+      unobserve() {}
+      disconnect() {
+        if (this.tracked) this.tracked.disconnected = true;
+      }
+    }
+    vi.stubGlobal("ResizeObserver", TrackingResizeObserver);
+    const result = renderWithProviders(
+      <Harness sizing="fill" trigger={<Button>Open Panel</Button>} />,
+    );
+    try {
+      const trigger = result.container.querySelector("[role='button']") as HTMLElement;
+      pointerPress(trigger);
+      await waitFor(() => expect(observers.some((observer) => !observer.disconnected)).toBe(true));
+      fireEvent.keyDown(document, { key: "Escape" });
+      await waitFor(() => expect(observers.every((observer) => observer.disconnected)).toBe(true));
+      pointerPress(trigger);
+      await waitFor(() => expect(observers.some((observer) => !observer.disconnected)).toBe(true));
+      result.unmount();
+      expect(observers.every((observer) => observer.disconnected)).toBe(true);
+    } finally {
+      result.unmount();
+      vi.unstubAllGlobals();
+    }
+  });
 });

package/src/FloatingPanel/index.native.tsx

@@ -76,6 +76,7 @@ export {
 } from "./useFloatingPanel";
 export type { UseFloatingPanelOptions, UseFloatingPanelReturn } from "./useFloatingPanel";
 export type { FloatingPanelProps } from "./index";
+export { floatingPanelActionProps, isNestedPanelAction } from "./nestedAction";
 
 /** Native never has a >sm web viewport; AdaptivePopup uses this to pick Sheet mode. */
 export function useViewportGtSm() {
@@ -103,8 +104,10 @@ const enterDuration = 280;
 export function FloatingPanel({
   open,
   onOpenChange,
+  onNativeShow,
   trigger,
   triggerEnd,
+  triggerSizing = "stretch",
   children,
   scrollable,
   disabled,
@@ -355,7 +358,13 @@ export function FloatingPanel({
 
   return (
     <>
-      <RNView style={{ flexDirection: "row", alignItems: "center", width: "100%" }}>
+      <RNView
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          width: triggerSizing === "content" ? undefined : "100%",
+        }}
+      >
         <Pressable
           {...(isContextMenu
             ? { onLongPress: handleTriggerLongPress, delayLongPress: 500 }
@@ -368,18 +377,22 @@ export function FloatingPanel({
             ? { accessibilityValue: { text: triggerA11y.value } }
             : undefined)}
           {...(triggerA11y?.hint ? { accessibilityHint: triggerA11y.hint } : undefined)}
-          // Stretch to the cell/row width — content-sized triggers (~70pt) make
-          // most of the edit box look tappable but miss the Pressable.
+          // Whole-field triggers stretch; composite adornments hug their
+          // content so sibling inputs retain their editable space.
           style={{
-            flex: 1,
+            flex: triggerSizing === "content" ? undefined : 1,
             minWidth: 0,
             alignSelf: "stretch",
-            width: "100%",
+            width: triggerSizing === "content" ? undefined : "100%",
             opacity: disabled ? 0.5 : 1,
           }}
         >
           {/* Own the hit target — see file header for why pointerEvents="none". */}
-          <RNView pointerEvents="none" collapsable={false} style={{ width: "100%" }}>
+          <RNView
+            pointerEvents="none"
+            collapsable={false}
+            style={{ width: triggerSizing === "content" ? undefined : "100%" }}
+          >
             {trigger}
           </RNView>
         </Pressable>
@@ -391,7 +404,11 @@ export function FloatingPanel({
         animationType="fade"
         statusBarTranslucent
         onRequestClose={close}
-        onShow={enter}
+        onShow={() => {
+          if (!activeRef.current) return;
+          enter();
+          onNativeShow?.();
+        }}
       >
         {/*
           A plain padded column, not KeyboardAvoidingView: inside a Modal the