@multiplatform.one/forms 7.63.4 → 7.64.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/forms",
-  "version": "7.63.4",
+  "version": "7.64.0",
   "description": "Cross-platform form components with URL state management",
   "keywords": [
     "cross-platform",
@@ -57,10 +57,10 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
-    "@multiplatform.one/platform": "^7.63.4",
-    "@multiplatform.one/router": "^7.63.4",
-    "@multiplatform.one/table-primitives": "^7.63.4",
-    "@multiplatform.one/theme": "^7.63.4",
+    "@multiplatform.one/platform": "^7.64.0",
+    "@multiplatform.one/router": "^7.64.0",
+    "@multiplatform.one/table-primitives": "^7.64.0",
+    "@multiplatform.one/theme": "^7.64.0",
     "@phosphor-icons/react": "^2.1.10",
     "@tamagui/get-font-sized": "2.7.6",
     "@tamagui/get-token": "2.7.6",
@@ -79,9 +79,10 @@
     "tamagui": "2.7.6"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.63.4",
-    "@multiplatform.one/storybook": "7.63.4",
-    "@multiplatform.one/test-utils": "7.63.4",
+    "@expo/ui": "~55.0.17",
+    "@multiplatform.one/config": "7.64.0",
+    "@multiplatform.one/storybook": "7.64.0",
+    "@multiplatform.one/test-utils": "7.64.0",
     "@tamagui/build": "2.7.6",
     "@tamagui/config": "2.7.6",
     "@tamagui/vite-plugin": "2.7.6",
@@ -103,6 +104,7 @@
     "vitest": "^4.1.5"
   },
   "peerDependencies": {
+    "@expo/ui": "*",
     "@react-native-community/datetimepicker": ">=8.0.1",
     "expo-document-picker": "*",
     "expo-haptics": "55.0.17",
@@ -117,6 +119,9 @@
     "react-native-safe-area-context": "*"
   },
   "peerDependenciesMeta": {
+    "@expo/ui": {
+      "optional": true
+    },
     "@react-native-community/datetimepicker": {
       "optional": true
     },

package/src/AdaptivePopup/index.tsx

@@ -12,6 +12,7 @@ import {
   OVERLAY_BREAKPOINT,
   Surface,
   ensureFocusVisibleRing,
+  focusOnOpen,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
 import {
@@ -192,9 +193,9 @@ function focusFirstField(event: Event) {
   const field = root?.querySelector<HTMLElement>(
     "input, textarea, select, [contenteditable='true']",
   );
-  if (!field) return;
+  if (!root || !field) return;
   event.preventDefault();
-  field.focus({ preventScroll: true });
+  focusOnOpen(field, root);
 }
 
 export function AdaptivePopup({
@@ -401,7 +402,7 @@ export function AdaptivePopup({
           borderTopLeftRadius: free,
           borderBottomLeftRadius: free,
         };
-    const slideFromEnd = rtl ? -24 : 24;
+    const slideFromEnd = rtl ? -16 : 16;
     return (
       <Dialog modal open={open} onOpenChange={onOpenChange}>
         {trigger && (

package/src/Button/index.tsx

@@ -30,6 +30,7 @@ import {
   solidButtonIntents,
   solidPaletteThemes,
   useAccentOnSurface,
+  ensureKeyboardModalityTracking,
   useBarSurface,
   useElevatedSurface,
   useIdentityInkOnSurface,
@@ -487,6 +488,9 @@ export function Button({
   const grouped = useControlGrouped();
   // LC-153 CONTROL-TIERS: a bar paints its neutral buttons plain; content
   // paints them tinted. The scheme picks the wash step.
+  // A Button is most overlays' trigger: the modality must be known before its
+  // opening key press, or the open focus cannot tell keyboard from pointer.
+  if (isWeb) ensureKeyboardModalityTracking();
   const barSurface = useBarSurface();
   const elevatedGround = useElevatedSurface();
   const darkScheme = isDarkThemeName(useThemeName());

package/src/fields/ColorPicker/SystemColorField.tsx

@@ -0,0 +1,101 @@
+import { isDarkThemeName, useResolvedKnobs } from "@multiplatform.one/theme";
+import { type ComponentType, type ReactNode, useState } from "react";
+import { ScrollView, View, YStack, useThemeName } from "tamagui";
+
+import { useIsInTableCell } from "../../shared/tableCellContext";
+import { t } from "../../shared/t";
+import { PresetSwatches, hexAlphaByte, parseHex, rgbToHex } from "./parts";
+import type { SystemColorWellProps } from "./systemColorWell";
+
+export interface SystemColorFieldProps {
+  Well: ComponentType<SystemColorWellProps>;
+  /** The MPO trigger row: swatch, hex and clear button. */
+  trigger: ReactNode;
+  selectedColor: string;
+  alpha: number;
+  showAlpha: boolean;
+  presetColors: string[];
+  disabled?: boolean;
+  a11yLabel?: string;
+  onPick: (hex: string, alpha?: number) => void;
+  onSelectPreset: (hex: string) => void;
+}
+
+/**
+ * LC-266 on iOS: the field opens the system colour picker; the theme swatches
+ * stay one tap away in a row under it, because the system picker cannot show
+ * them. With a value, the trailing clear button stays outside the well.
+ */
+export function SystemColorField({
+  Well,
+  trigger,
+  selectedColor,
+  alpha,
+  showAlpha,
+  presetColors,
+  disabled,
+  a11yLabel,
+  onPick,
+  onSelectPreset,
+}: SystemColorFieldProps) {
+  const { knobProps } = useResolvedKnobs();
+  const inTableCell = useIsInTableCell();
+  const scheme = isDarkThemeName(useThemeName()) ? "dark" : "light";
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const clearInset = selectedColor ? size.height : 0;
+
+  return (
+    <YStack {...knobProps.gap}>
+      <View
+        position="relative"
+        testID="color-picker-system-field"
+        onLayout={(e) => {
+          const { width, height } = e.nativeEvent.layout;
+          if (width !== size.width || height !== size.height) setSize({ width, height });
+        }}
+      >
+        {trigger}
+        {!disabled ? (
+          <Well
+            selection={
+              selectedColor && showAlpha ? `${selectedColor}${hexAlphaByte(alpha)}` : selectedColor
+            }
+            supportsOpacity={showAlpha}
+            label={a11yLabel || t("Color")}
+            colorScheme={scheme}
+            width={Math.max(0, size.width - clearInset)}
+            height={size.height}
+            onSelectionChange={(picked) => {
+              const parsed = parseHex(picked);
+              if (!parsed) return;
+              onPick(rgbToHex(parsed.r, parsed.g, parsed.b), showAlpha ? parsed.alpha : undefined);
+            }}
+            style={{
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: 0,
+              right: clearInset,
+              overflow: "hidden",
+            }}
+          />
+        ) : null}
+      </View>
+      {!inTableCell && presetColors.length > 0 ? (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          testID="color-picker-system-presets"
+        >
+          <PresetSwatches
+            presetColors={presetColors}
+            selectedColor={selectedColor}
+            onSelect={(color) => {
+              if (color !== null && !disabled) onSelectPreset(color);
+            }}
+          />
+        </ScrollView>
+      ) : null}
+    </YStack>
+  );
+}

package/src/fields/ColorPicker/index.tsx

@@ -40,6 +40,8 @@ import {
   parseHex,
   rgbToHex,
 } from "./parts";
+import { SystemColorField } from "./SystemColorField";
+import { useSystemColorWell } from "./systemColorWell";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -475,6 +477,7 @@ function ColorPickerControl({
   onBlurControl,
 }: ColorPickerControlProps) {
   const { knobProps } = useResolvedKnobs();
+  const SystemWell = useSystemColorWell();
   const [open, setOpen] = useState(false);
   const parsedInitial = parseColorValue(value, format);
   const initialColor = parsedInitial.hex;
@@ -620,6 +623,50 @@ function ColorPickerControl({
     );
   }
 
+  const triggerAria = {
+    // Labelled: the sibling Label wires `aria-labelledby` onto this id
+    // itself — naming it here too doubles the spoken name.
+    "aria-label": hasLabel ? undefined : t("Color"),
+    "aria-describedby":
+      [
+        helperText && id ? `${id}-description` : undefined,
+        hasError && id ? `${id}-error` : undefined,
+      ]
+        .filter(Boolean)
+        .join(" ") || undefined,
+    "aria-required": required || undefined,
+    "aria-invalid": hasError || undefined,
+  };
+
+  if (SystemWell) {
+    return (
+      <SystemColorField
+        Well={SystemWell}
+        selectedColor={selectedColor}
+        alpha={alpha}
+        showAlpha={showAlpha}
+        presetColors={presetColors}
+        disabled={disabled}
+        a11yLabel={a11yLabel}
+        onPick={handleHexInput}
+        onSelectPreset={handleSelectPreset}
+        trigger={
+          <ColorPickerInputTrigger
+            value={value || selectedColor}
+            placeholder={placeholder}
+            disabled={disabled}
+            onReset={handleClear}
+            onButtonPress={() => {}}
+            error={hasError}
+            id={id}
+            {...triggerAria}
+            inputProps={inputProps}
+          />
+        }
+      />
+    );
+  }
+
   return (
     <ColorPickerPopoverShell
       open={open}
@@ -652,19 +699,7 @@ function ColorPickerControl({
           }}
           error={hasError}
           id={id}
-          // Labelled: the sibling Label wires `aria-labelledby` onto this id
-          // itself — naming it here too doubles the spoken name.
-          aria-label={hasLabel ? undefined : t("Color")}
-          aria-describedby={
-            [
-              helperText && id ? `${id}-description` : undefined,
-              hasError && id ? `${id}-error` : undefined,
-            ]
-              .filter(Boolean)
-              .join(" ") || undefined
-          }
-          aria-required={required || undefined}
-          aria-invalid={hasError || undefined}
+          {...triggerAria}
           inputProps={inputProps}
         />
       }

package/src/fields/ColorPicker/systemColorWell.gnome.ts

@@ -0,0 +1,7 @@
+import type { ComponentType } from "react";
+import type { SystemColorWellProps } from "./systemColorWell";
+
+/** GNOME: the MPO picker is the platform form (LC-266). */
+export function useSystemColorWell(): ComponentType<SystemColorWellProps> | null {
+  return null;
+}

package/src/fields/ColorPicker/systemColorWell.native.spec.tsx

@@ -0,0 +1,266 @@
+/**
+ * LC-266 (FZ-8121): on iOS the Color field opens the system colour picker
+ * when the binary carries @expo/ui, and keeps the MPO picker when it does not,
+ * so an OTA on an older binary never crashes.
+ */
+import { act, cleanup, fireEvent, render, within } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { createElement } from "react";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import type { SystemColorWellProps } from "./systemColorWell";
+import {
+  type SwiftUiColorModule,
+  type SwiftUiModifiers,
+  type SystemColorWellSources,
+  expoUiNativeModule,
+  makeSystemColorWell,
+  resolveSystemColorWell,
+  wellOpacity,
+  wellScale,
+} from "./systemColorWell.native";
+
+vi.mock("@tamagui/lucide-icons-2", () => ({
+  Palette: () => null,
+  X: () => null,
+  Check: () => null,
+  Pipette: () => null,
+}));
+
+const wellState = vi.hoisted(() => ({
+  present: false,
+  last: undefined as SystemColorWellProps | undefined,
+}));
+
+vi.mock("./systemColorWell", () => ({
+  useSystemColorWell: () =>
+    wellState.present
+      ? (props: SystemColorWellProps) => {
+          wellState.last = props;
+          return createElement("div", {
+            "data-testid": "system-color-well",
+            "data-selection": props.selection,
+            "data-scheme": props.colorScheme,
+          });
+        }
+      : null,
+}));
+
+afterEach(() => {
+  cleanup();
+  wellState.present = false;
+  wellState.last = undefined;
+});
+
+const FakeHost: SwiftUiColorModule["Host"] = ({ children, colorScheme }) =>
+  createElement("div", { "data-testid": "host", "data-scheme": colorScheme }, children);
+
+const FakePicker: SwiftUiColorModule["ColorPicker"] = (props) =>
+  createElement("button", {
+    "data-testid": "swiftui-color-picker",
+    "aria-label": props.label,
+    "data-selection": props.selection ?? "",
+    "data-modifiers": JSON.stringify(props.modifiers),
+    onClick: () => props.onSelectionChange?.("#3366FF"),
+  });
+
+const fakeModifiers: SwiftUiModifiers = {
+  labelsHidden: () => ({ $type: "labelsHidden" }),
+  scaleEffect: (scale) => ({ $type: "scaleEffect", x: scale, y: scale }),
+  opacity: (value) => ({ $type: "opacity", value }),
+};
+
+function sources(
+  nativeModule: unknown,
+  ui: SystemColorWellSources["ui"] = () => ({ Host: FakeHost, ColorPicker: FakePicker }),
+): SystemColorWellSources {
+  return {
+    core: () => ({ requireOptionalNativeModule: () => nativeModule }),
+    ui,
+    modifiers: () => fakeModifiers,
+  };
+}
+
+describe("system colour well detection", () => {
+  it("draws @expo/ui's ColorPicker on iOS when the binary registers ExpoUI", () => {
+    const probe = vi.fn((name: string) => (name === expoUiNativeModule ? {} : null));
+    const well = resolveSystemColorWell(
+      {
+        core: () => ({ requireOptionalNativeModule: probe }),
+        ui: () => ({ Host: FakeHost, ColorPicker: FakePicker }),
+        modifiers: () => fakeModifiers,
+      },
+      "ios",
+    );
+    expect(well).toBeTypeOf("function");
+    expect(probe).toHaveBeenCalledWith("ExpoUI");
+  });
+
+  it("never requires @expo/ui on a binary without ExpoUI (the OTA case)", () => {
+    const ui = vi.fn(() => ({ Host: FakeHost, ColorPicker: FakePicker }));
+    expect(resolveSystemColorWell(sources(null, ui), "ios")).toBeNull();
+    expect(ui).not.toHaveBeenCalled();
+  });
+
+  it("keeps the MPO picker on Android and web", () => {
+    expect(resolveSystemColorWell(sources({}), "android")).toBeNull();
+    expect(resolveSystemColorWell(sources({}), "web")).toBeNull();
+  });
+
+  it("falls back when the probe or the require throws, or an export is missing", () => {
+    const throwing = () => {
+      throw new Error("no native view");
+    };
+    expect(
+      resolveSystemColorWell(
+        { core: throwing, ui: () => ({}), modifiers: () => fakeModifiers },
+        "ios",
+      ),
+    ).toBeNull();
+    expect(resolveSystemColorWell(sources({}, throwing), "ios")).toBeNull();
+    expect(
+      resolveSystemColorWell(
+        sources({}, () => ({ Host: FakeHost })),
+        "ios",
+      ),
+    ).toBeNull();
+  });
+
+  it("covers the field with a near-transparent well scaled past its bounds", () => {
+    const Well = makeSystemColorWell({ Host: FakeHost, ColorPicker: FakePicker }, fakeModifiers);
+    const onSelectionChange = vi.fn();
+    const result = render(
+      createElement(Well, {
+        selection: "#EF4444",
+        supportsOpacity: false,
+        label: "Accent",
+        colorScheme: "dark",
+        width: 358,
+        height: 44,
+        onSelectionChange,
+      }),
+    );
+    expect(result.getByTestId("host").getAttribute("data-scheme")).toBe("dark");
+    const picker = result.getByTestId("swiftui-color-picker");
+    expect(picker.getAttribute("aria-label")).toBe("Accent");
+    expect(picker.getAttribute("data-selection")).toBe("#EF4444");
+    const modifiers = JSON.parse(picker.getAttribute("data-modifiers") ?? "[]");
+    expect(modifiers).toEqual([
+      { $type: "labelsHidden" },
+      { $type: "scaleEffect", x: wellScale(358, 44), y: wellScale(358, 44) },
+      { $type: "opacity", value: wellOpacity },
+    ]);
+    expect(wellScale(358, 44) * 28).toBeGreaterThanOrEqual(358 * 2);
+    expect(wellScale(0, 0)).toBe(1);
+    expect(wellOpacity).toBeGreaterThan(0.01);
+    fireEvent.click(picker);
+    expect(onSelectionChange).toHaveBeenCalledWith("#3366FF");
+  });
+});
+
+async function loadColorPicker() {
+  return (await import("./index")).ColorPicker;
+}
+
+beforeAll(async () => {
+  const ColorPicker = await loadColorPicker();
+  wellState.present = true;
+  renderWithProviders(<ColorPicker label="Accent" value="#EF4444" />);
+  cleanup();
+  wellState.present = false;
+  wellState.last = undefined;
+}, 120_000);
+
+describe("ColorPicker with the system colour well (iOS)", () => {
+  it("renders the system well over the field and the theme swatches under it", async () => {
+    wellState.present = true;
+    const ColorPicker = await loadColorPicker();
+    const result = renderWithProviders(
+      <ColorPicker label="Accent" value="#EF4444" presetColors={["#EF4444", "#22C55E"]} />,
+    );
+    const field = result.getByTestId("color-picker-system-field");
+    expect(field.querySelector('[data-testid="system-color-well"]')).toBeTruthy();
+    expect(field.querySelector('[data-testid="color-picker-trigger-swatch"]')).toBeTruthy();
+    expect(result.getByTestId("color-picker-system-presets")).toBeTruthy();
+    expect(document.body.querySelector('[data-testid="color-picker-panel"]')).toBeNull();
+  });
+
+  it("writes the hex the system picker returns", async () => {
+    wellState.present = true;
+    const ColorPicker = await loadColorPicker();
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <ColorPicker label="Accent" value="#EF4444" onChange={onChange} />,
+    );
+    expect(result.container.querySelectorAll('[data-testid="system-color-well"]')).toHaveLength(1);
+    const well = wellState.last;
+    expect(well?.selection).toBe("#EF4444");
+    expect(well?.label).toBe("Accent");
+    expect(well?.supportsOpacity).toBe(false);
+    await act(async () => well?.onSelectionChange("#3366ff"));
+    expect(onChange).toHaveBeenLastCalledWith("#3366FF");
+  });
+
+  it("carries opacity through when showAlpha is on", async () => {
+    wellState.present = true;
+    const ColorPicker = await loadColorPicker();
+    const onChange = vi.fn();
+    renderWithProviders(
+      <ColorPicker label="Accent" value="#EF444480" showAlpha onChange={onChange} />,
+    );
+    expect(wellState.last?.supportsOpacity).toBe(true);
+    expect(wellState.last?.selection).toBe("#EF444480");
+    await act(async () => wellState.last?.onSelectionChange("#3366FF40"));
+    expect(onChange).toHaveBeenLastCalledWith("#3366FF40");
+  });
+
+  it("picks a theme swatch from the row under the field", async () => {
+    wellState.present = true;
+    const ColorPicker = await loadColorPicker();
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <ColorPicker
+        label="Accent"
+        value="#EF4444"
+        presetColors={["#EF4444", "#22C55E"]}
+        onChange={onChange}
+      />,
+    );
+    await act(async () => {
+      fireEvent.click(within(result.container).getByRole("radio", { name: "Color #22C55E" }));
+    });
+    expect(onChange).toHaveBeenLastCalledWith("#22C55E");
+  });
+
+  it("keeps the clear button outside the well", async () => {
+    wellState.present = true;
+    const ColorPicker = await loadColorPicker();
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <ColorPicker label="Accent" value="#EF4444" onChange={onChange} />,
+    );
+    await act(async () => {
+      fireEvent.click(within(result.container).getByRole("button", { name: "Clear color" }));
+    });
+    expect(onChange).toHaveBeenLastCalledWith("");
+  });
+
+  it("draws no well while disabled", async () => {
+    wellState.present = true;
+    const ColorPicker = await loadColorPicker();
+    renderWithProviders(<ColorPicker label="Accent" value="#EF4444" disabled />);
+    expect(wellState.last).toBeUndefined();
+  });
+});
+
+describe("ColorPicker without @expo/ui (older binary)", () => {
+  it("opens the MPO picker and does not crash", async () => {
+    const ColorPicker = await loadColorPicker();
+    const result = renderWithProviders(<ColorPicker label="Accent" value="#EF4444" />);
+    expect(result.queryByTestId("color-picker-system-field")).toBeNull();
+    const input = result.container.querySelector("input");
+    await act(async () => {
+      if (input) fireEvent.click(input);
+    });
+    expect(document.body.querySelector('[data-testid="color-picker-panel"]')).toBeTruthy();
+  });
+});