@multiplatform.one/forms 7.65.2 → 7.67.0

package/src/FloatingPanel/index.tsx

@@ -32,6 +32,7 @@ import { OverlayStackProvider, useInsideOverlay, useOverlayZIndex } from "../sha
 import { resolveCompactFace, type CompactFace } from "./compactFace";
 import { isNestedPanelAction, type PanelActionEvent } from "./nestedAction";
 import { PanelPortal } from "./PanelPortal";
+import { fixedContainingBlockOrigin } from "./containingBlock";
 import {
   contextMenuPoint,
   placeOverTrigger,
@@ -246,39 +247,6 @@ function useKeyboardFocusIntoPanel(
   }, [open, frameRef, keyboardOpenRef]);
 }
 
-/**
- * Viewport origin of the box a `position: fixed` panel is laid out against.
- * The top/left math is in viewport coordinates, which is only right while that
- * box is the viewport. An ancestor with a transform, filter, perspective,
- * paint containment or container query becomes the containing block instead.
- * PanelPortal lifts the panel out of scroll views, but a panel hosted in a
- * transformed dialog still lays out against that dialog. A `display: contents`
- * node has no box, so its computed `contain` (Tamagui's theme span) is ignored.
- */
-function fixedContainingBlockOrigin(element: HTMLElement): { top: number; left: number } {
-  for (let node = element.parentElement; node; node = node.parentElement) {
-    const cs = getComputedStyle(node);
-    if (cs.display === "contents") continue;
-    const set = (value: string | undefined, initial: string) => !!value && value !== initial;
-    const captures =
-      set(cs.transform, "none") ||
-      set(cs.perspective, "none") ||
-      set(cs.filter, "none") ||
-      set(cs.backdropFilter, "none") ||
-      set(cs.containerType, "normal") ||
-      /transform|perspective|filter/.test(cs.willChange) ||
-      /paint|layout|strict|content/.test(cs.contain);
-    if (captures) {
-      const rect = node.getBoundingClientRect();
-      return {
-        top: rect.top + node.clientTop - node.scrollTop,
-        left: rect.left + node.clientLeft - node.scrollLeft,
-      };
-    }
-  }
-  return { top: 0, left: 0 };
-}
-
 function isRtl(element?: HTMLElement | null): boolean {
   if (!isWeb || typeof document === "undefined") return false;
   const direction = element ? getComputedStyle(element).direction : "";

package/src/FloatingPanel/pointAnchor.spec.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from "vitest";
 import {
   contextMenuPoint,
   placeAtPoint,
+  placeBesideTrigger,
   placeOverTrigger,
   pointOpensUp,
   pointPanelLeft,
@@ -219,3 +220,31 @@ describe("placeOverTrigger (FZ-7830, LC-112 where no sheet may take it)", () =>
     expect(placed.left).toBe(10);
   });
 });
+
+describe("placeBesideTrigger (FZ-7830 round 3, LC-262: beside the trigger, never over it)", () => {
+  const phone: PanelBounds = { top: 57, left: 10, right: 380, bottom: 800 };
+  const field = { x: 16, y: 300, width: 358, height: 44 };
+
+  it("opens under the trigger when it fits", () => {
+    const placed = placeBesideTrigger({ trigger: field, width: 200, height: 180, bounds: phone });
+    expect(placed).toEqual({ left: 16, top: 344, width: 358, maxHeight: 180, shifted: false });
+  });
+
+  it("opens above the trigger when there is more room there, its bottom on the trigger's top", () => {
+    const low = { ...field, y: 700 };
+    const placed = placeBesideTrigger({ trigger: low, width: 200, height: 220, bounds: phone });
+    expect(placed.top + placed.maxHeight).toBe(700);
+    expect(placed.maxHeight).toBe(220);
+  });
+
+  it("never overlaps the trigger, scrolling what does not fit", () => {
+    for (const y of [60, 300, 500, 740]) {
+      const trigger = { ...field, y };
+      const placed = placeBesideTrigger({ trigger, width: 200, height: 2000, bounds: phone });
+      const overlaps = placed.top < y + field.height && placed.top + placed.maxHeight > y;
+      expect(overlaps, `trigger at ${y}`).toBe(false);
+      expect(placed.top).toBeGreaterThanOrEqual(phone.top);
+      expect(placed.top + placed.maxHeight).toBeLessThanOrEqual(phone.bottom);
+    }
+  });
+});

package/src/FloatingPanel/pointAnchor.ts

@@ -172,3 +172,33 @@ export function placeOverTrigger({
     shifted: left !== wantLeft || top !== trigger.y,
   };
 }
+
+/**
+ * A menu attached to its trigger (an icon trigger, or a short list inside a
+ * sheet, LC-262): under the trigger when it fits, above it when that side has
+ * more room, and never over it. What still does not fit scrolls.
+ */
+export function placeBesideTrigger({
+  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 below = Math.max(0, bounds.bottom - (trigger.y + trigger.height));
+  const above = Math.max(0, trigger.y - bounds.top);
+  const opensUp = height > below && above > below;
+  const maxHeight = Math.min(height, opensUp ? above : below);
+  const top = opensUp ? trigger.y - maxHeight : trigger.y + trigger.height;
+  return { left, top, width: w, maxHeight, shifted: left !== wantLeft || opensUp };
+}

package/src/FloatingPanel/regularPlacement.spec.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+import { placeRegularPanel } from "./regularPlacement";
+
+const bounds = { top: 20, left: 12, right: 808, bottom: 1160 };
+const trigger = { x: 40, y: 300, width: 360, height: 44 };
+
+describe("placeRegularPanel (FZ-8116)", () => {
+  it("covers the field from its top start corner (LC-105)", () => {
+    const p = placeRegularPanel({
+      trigger,
+      width: 200,
+      height: 240,
+      bounds,
+      widthMode: "at-least-trigger",
+    });
+    expect(p).toMatchObject({ left: 40, top: 300, width: 360, shifted: false });
+  });
+
+  it("is the field's width for match-trigger even when the content is wider", () => {
+    const p = placeRegularPanel({
+      trigger,
+      width: 500,
+      height: 240,
+      bounds,
+      widthMode: "match-trigger",
+    });
+    expect(p.width).toBe(360);
+  });
+
+  it("is the content's width for fit-content", () => {
+    const p = placeRegularPanel({
+      trigger,
+      width: 300,
+      height: 320,
+      bounds,
+      widthMode: "fit-content",
+    });
+    expect(p).toMatchObject({ left: 40, width: 300 });
+  });
+
+  it("hangs a fit-content panel from the field's end edge in RTL", () => {
+    const p = placeRegularPanel({
+      trigger,
+      width: 300,
+      height: 320,
+      bounds,
+      widthMode: "fit-content",
+      rtl: true,
+    });
+    expect(p.left).toBe(40 + 360 - 300);
+  });
+
+  it("slides up inside the bounds near the bottom of the window", () => {
+    const low = { ...trigger, y: 1080 };
+    const p = placeRegularPanel({
+      trigger: low,
+      width: 360,
+      height: 300,
+      bounds,
+      widthMode: "at-least-trigger",
+    });
+    expect(p.top + 300).toBeLessThanOrEqual(bounds.bottom);
+    expect(p.shifted).toBe(true);
+  });
+});

package/src/FloatingPanel/regularPlacement.ts

@@ -0,0 +1,40 @@
+import {
+  placeOverTrigger,
+  type PanelBounds,
+  type TriggerPlacement,
+  type TriggerRect,
+} from "./pointAnchor";
+import type { PanelWidthMode } from "./useFloatingPanel";
+
+/** Height of a regular-width panel whose list fills it (`sheetFill`): a search list. */
+export const regularFillHeight = 480;
+
+/**
+ * Where a FloatingPanel opens at regular width (FZ-8116): over its field, the
+ * web float's cover-trigger placement (LC-105), at the width its `widthMode`
+ * declares. `at-least-trigger` is never narrower than the field,
+ * `match-trigger` is the field's width, `fit-content` is the content's own
+ * width from the field's start edge.
+ */
+export function placeRegularPanel({
+  trigger,
+  width,
+  height,
+  bounds,
+  widthMode,
+  rtl = false,
+}: {
+  trigger: TriggerRect;
+  width: number;
+  height: number;
+  bounds: PanelBounds;
+  widthMode: PanelWidthMode;
+  rtl?: boolean;
+}): TriggerPlacement {
+  if (widthMode === "at-least-trigger") {
+    return placeOverTrigger({ trigger, width, height, bounds, rtl });
+  }
+  const w = widthMode === "match-trigger" ? trigger.width : width;
+  const box = { ...trigger, x: rtl ? trigger.x + trigger.width - w : trigger.x, width: w };
+  return placeOverTrigger({ trigger: box, width: w, height, bounds, rtl });
+}

package/src/fields/Combobox/Combobox.regularWidth.native.spec.tsx

@@ -0,0 +1,94 @@
+/**
+ * FZ-8116 (LC-266): on native the Link picker (Combobox) takes the window's
+ * size class like Select and ColorPicker do. At regular width (an iPad) it
+ * opens over its field with its search inside; at compact width (iPhone,
+ * Slide Over) it keeps the bottom sheet.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { authorOptions } from "./authorOptions";
+import { Combobox } from "./index";
+
+const screen = vi.hoisted(() => ({ width: 820, height: 1180 }));
+const sheetProps = vi.hoisted(() => [] as unknown[]);
+
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+vi.mock("react-native-web", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-native")>()),
+  ActionSheetIOS: undefined,
+  Modal: ({ children, visible }: { children: ReactNode; visible: boolean }) =>
+    visible ? children : null,
+  useWindowDimensions: () => ({ ...screen, scale: 2, fontScale: 1 }),
+}));
+vi.mock("../../FloatingPanel", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../FloatingPanel")>();
+  const native = await import("../../FloatingPanel/index.native");
+  return {
+    ...actual,
+    FloatingPanel: (props: Parameters<typeof native.FloatingPanel>[0]) => {
+      sheetProps.push(props.sheet);
+      return <native.FloatingPanel {...props} />;
+    },
+  };
+});
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  sheetProps.length = 0;
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+  screen.width = 820;
+  screen.height = 1180;
+});
+
+function tap(target: Element) {
+  act(() => {
+    target.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, button: 0 }));
+    target.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, button: 0 }));
+    target.dispatchEvent(new MouseEvent("click", { bubbles: true, button: 0 }));
+  });
+  act(() => {
+    vi.advanceTimersByTime(1);
+  });
+}
+
+function open() {
+  const view = renderWithProviders(<Combobox options={authorOptions} aria-label="Author" />);
+  tap(view.getByRole("button", { name: "Author" }));
+  return view;
+}
+
+const regular = () => document.querySelector('[data-testid="floating-panel-regular"]');
+const sheet = () => document.querySelector('[data-testid="floating-panel-sheet"]');
+
+describe("Combobox native at regular width (FZ-8116)", () => {
+  it("leaves the overlay form to the size class instead of forcing the sheet", () => {
+    renderWithProviders(<Combobox options={authorOptions} aria-label="Author" />);
+    expect(sheetProps.length).toBeGreaterThan(0);
+    expect(sheetProps.every((value) => value !== true)).toBe(true);
+  });
+
+  it("opens over its field on an iPad-wide window", () => {
+    open();
+    expect(regular()).not.toBeNull();
+    expect(sheet()).toBeNull();
+  });
+
+  it.each([
+    ["an iPhone", 390, 844],
+    ["iPad Slide Over", 320, 1180],
+  ])("keeps the bottom sheet on %s", (_name, width, height) => {
+    screen.width = width;
+    screen.height = height;
+    open();
+    expect(regular()).toBeNull();
+    expect(sheet()).not.toBeNull();
+  });
+});

package/src/fields/Combobox/index.tsx

@@ -31,6 +31,7 @@ import {
   ensureFocusVisibleRing,
   ensureKeyboardModalityTracking,
   keyboardFocusRingProps,
+  menuRowChecked,
   menuRowFrame,
   useGlyphColor,
   useResolvedKnobs,
@@ -87,7 +88,7 @@ const ComboboxRow = styled(View, {
   focusVisibleStyle: ensureFocusVisibleRing({ outlineOffset: -2 }),
   variants: {
     selected: {
-      true: { backgroundColor: formInputColors.background.base },
+      true: menuRowChecked,
       false: { backgroundColor: "transparent" },
     },
     active: {
@@ -385,24 +386,12 @@ const ComboboxItem = memo(function ComboboxItem({
       {...(suppressHover
         ? {
             hoverStyle: {
-              backgroundColor: isActive
-                ? formInputColors.background.focus
-                : isSelected
-                  ? formInputColors.background.base
-                  : "transparent",
+              backgroundColor: isActive ? formInputColors.background.focus : "transparent",
             },
-            backgroundColor: isActive
-              ? formInputColors.background.focus
-              : isSelected
-                ? formInputColors.background.base
-                : undefined,
+            backgroundColor: isActive ? formInputColors.background.focus : undefined,
           }
         : {
-            hoverStyle: {
-              backgroundColor: isSelected
-                ? formInputColors.background.base
-                : formInputColors.background.focus,
-            },
+            hoverStyle: { backgroundColor: formInputColors.background.focus },
           })}
       {...(option.description
         ? // Two-line rows need to grow past the size-variant height.
@@ -2211,25 +2200,11 @@ function NativeComboboxCore({
                 hoverStyle={
                   activeIndex != null
                     ? {
-                        backgroundColor: active
-                          ? formInputColors.background.focus
-                          : selected
-                            ? formInputColors.background.base
-                            : "transparent",
+                        backgroundColor: active ? formInputColors.background.focus : "transparent",
                       }
-                    : {
-                        backgroundColor: selected
-                          ? formInputColors.background.base
-                          : formInputColors.background.focus,
-                      }
-                }
-                backgroundColor={
-                  active
-                    ? formInputColors.background.focus
-                    : selected
-                      ? formInputColors.background.base
-                      : "transparent"
+                    : { backgroundColor: formInputColors.background.focus }
                 }
+                backgroundColor={active ? formInputColors.background.focus : "transparent"}
                 pressStyle={{ backgroundColor: formInputColors.background.focus }}
               >
                 {option.description ? (
@@ -2534,7 +2509,9 @@ function NativeComboboxCore({
     <FloatingPanel
       open={open}
       onOpenChange={handleOpenChange}
-      sheet
+      // Native leaves the form to the window's size class (FZ-8116): a sheet
+      // when compact, a panel over the field at regular width.
+      sheet={isWeb}
       // Search-driven comboboxes open the sheet tall: results stream in as
       // the user types, so a content-fit sheet would open as a sliver.
       sheetFill={Boolean(onSearch)}

package/src/fields/DatePicker/parts.tsx

@@ -948,6 +948,9 @@ export function DatePickerInputTrigger({
         // on the closed text-field trigger.
         elevation={undefined}
         data-testid="date-picker-trigger"
+        // The touch input is laid absolutely over this box; without a
+        // positioning context it covers the whole page and takes every tap.
+        position={touchInput ? "relative" : undefined}
         id={touchInput ? undefined : id}
         onPress={isWeb && !disabled && !touchInput ? onButtonPress : undefined}
         {...(disabled ? { opacity: 0.5, pointerEvents: "none" } : undefined)}

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

@@ -243,3 +243,16 @@ describe("Time on touch web (FZ-8114)", () => {
     expect(result.container.querySelector('input[type="time"]')).toBeNull();
   });
 });
+
+describe("the touch input stays inside its box (FZ-8114)", () => {
+  it.each([
+    ["date", <DatePicker key="d" label="Due" name="due" />],
+    ["datetime-local", <DatetimePicker key="dt" label="Starts" name="starts" />],
+    ["time", <TimePicker key="t" label="At" name="at" />],
+  ] as const)("the %s input's box is its positioning context", (type, field) => {
+    coarse = true;
+    const result = renderWithProviders(field);
+    const box = touchInput(result.container, type).parentElement as HTMLElement;
+    expect(getComputedStyle(box).position).toBe("relative");
+  });
+});

package/src/fields/Input/Input.formName.spec.tsx

@@ -0,0 +1,53 @@
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Theme } from "tamagui";
+import { Input } from "./index";
+
+function SignIn({ scheme }: { scheme: "light" | "dark" }) {
+  return (
+    <Theme name={scheme}>
+      <form id="sign-in" action="/login" method="post">
+        <Input id="username" name="username" label="Username" labelHidden />
+        <Input id="password" name="password" label="Password" labelHidden secureTextEntry />
+        <input type="hidden" name="credentialId" value="" />
+      </form>
+    </Theme>
+  );
+}
+
+const field = (container: HTMLElement, id: string) =>
+  container.querySelector<HTMLInputElement>(`input#${id}`)!;
+
+describe("Input posts under its name in a native form (FZ-8159)", () => {
+  it("keeps name through typing and a scheme change, so FormData carries both fields", async () => {
+    const user = userEvent.setup();
+    const view = renderWithProviders(<SignIn scheme="light" />);
+    const username = field(view.container, "username");
+    const password = field(view.container, "password");
+
+    await user.type(username, "ash");
+    await user.type(password, "pikachu");
+    expect(username.getAttribute("name")).toBe("username");
+    expect(password.getAttribute("name")).toBe("password");
+
+    view.rerender(<SignIn scheme="dark" />);
+    await user.type(field(view.container, "username"), "!");
+
+    const form = view.container.querySelector<HTMLFormElement>("form#sign-in")!;
+    const posted = new FormData(form);
+    expect(posted.get("username")).toBe("ash!");
+    expect(posted.get("password")).toBe("pikachu");
+    expect(posted.get("credentialId")).toBe("");
+  });
+
+  it("a read-only field still posts under its name", () => {
+    const view = renderWithProviders(
+      <form>
+        <Input id="realm" name="realm" label="Realm" readOnly value="pokemon" />
+      </form>,
+    );
+    const posted = new FormData(view.container.querySelector("form")!);
+    expect(posted.get("realm")).toBe("pokemon");
+  });
+});

package/src/fields/Input/index.tsx

@@ -11,7 +11,7 @@ import type {
   SizeTokens,
   TamaguiElement,
 } from "tamagui";
-import { Text } from "tamagui";
+import { Text, isWeb } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { resolveFieldInputProps } from "../../fieldDefaults";
 import { Field, FieldLayout } from "../../fieldLayout";
@@ -241,6 +241,9 @@ export function Input({
 
   const areaName =
     visibleLabel || !resolvedAriaLabel ? undefined : { "aria-label": resolvedAriaLabel };
+  // A native <form> posts the field under its name, and React DOM drops a
+  // `name` it doesn't own on every update, so the Area carries it as a prop.
+  const domName = isWeb && name ? { name } : undefined;
 
   const handleCopy = useCallback(
     async (text: string) => {
@@ -332,6 +335,7 @@ export function Input({
               value={inputValue ?? ""}
               readOnly
               id={id}
+              {...domName}
               aria-readonly="true"
               aria-required={required || undefined}
               aria-invalid={hasError || undefined}
@@ -364,6 +368,7 @@ export function Input({
             {...(placeholder !== undefined ? { placeholder } : undefined)}
             disabled={disabled}
             id={id}
+            {...domName}
             {...(handleChange || value !== undefined
               ? { value: inputValue ?? "" }
               : { defaultValue: inputValue })}

package/src/fields/Select/InlineChoices.tsx

@@ -55,6 +55,7 @@ export function InlineChoices({
   const textColor = knobProps.textAccentColor;
   const selectedIndex = options.findIndex((option) => option.value === value);
   const tabStop = selectedIndex >= 0 ? selectedIndex : 0;
+  const glyphed = options.some((option) => option.icon != null);
 
   const choose = (index: number) => {
     const option = options[index];
@@ -85,9 +86,11 @@ export function InlineChoices({
       borderColor={formCommonColors.divider}
       pointerEvents="none"
     >
-      <View flexShrink={0} alignItems="center" justifyContent="center" minWidth={18}>
-        <IconSlot icon={option.icon} color={textColor} />
-      </View>
+      {glyphed ? (
+        <View flexShrink={0} alignItems="center" justifyContent="center" minWidth={18}>
+          <IconSlot icon={option.icon} color={textColor} />
+        </View>
+      ) : null}
       <Text
         fontFamily={knobProps.body.fontFamily}
         fontWeight={knobProps.body.fontWeight}