@multiplatform.one/forms 7.71.0 → 7.73.0

package/src/fields/DatePicker/DatetimePicker.catalog.tsx

@@ -7,6 +7,7 @@ import { Text, View, useProps, isWeb } from "tamagui";
 
 import { Field, FieldLayout } from "../../fieldLayout";
 import { FloatingPanel } from "../../FloatingPanel";
+import type { PanelWidth } from "../../FloatingPanel/panelWidth";
 import { t } from "../../shared/t";
 import { TimeWheels } from "../../shared/TimeColumn";
 import {
@@ -19,12 +20,6 @@ import type { FormFieldProps } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
 import { Skeleton } from "../../Skeleton";
 import type { FieldComponentProps, Validator } from "../../types";
-import {
-  fromNativeDateValue,
-  toDatetimeLocalValue,
-  TouchWebPickerInput,
-  useCoarsePointer,
-} from "../../shared/touchWebPicker";
 
 import {
   CalendarDays,
@@ -87,6 +82,11 @@ export type DatetimePickerProps<
     onValueChange?: (value: Date | null) => void;
     /** Native only. `false` keeps the catalog overlay; omit for the OS picker. */
     native?: boolean;
+    /**
+     * How wide the open picker is (LC-112, FZ-8438 r3): `"content"`,
+     * `"trigger"`, `"screen"` or a fixed width. Unset: at least the field.
+     */
+    panelWidth?: PanelWidth;
   };
 
 // ---------------------------------------------------------------------------
@@ -273,8 +273,10 @@ function DatetimePickerBody({
               justifyContent="center"
               cursor={tabDisabled ? "default" : "pointer"}
               opacity={tabDisabled ? 0.5 : 1}
-              theme={active ? ("accent" as any) : undefined}
-              backgroundColor={active ? "$background" : "transparent"}
+              // LC-131 / FZ-8355: the chosen tab is the selection tint with a
+              // rounded arc, not an inverted accent slab (FZ-8438 critique).
+              backgroundColor={active ? "$selectedBackground" : "transparent"}
+              borderRadius={knobProps.borderRadius.borderRadius}
               onPress={() => {
                 if (!tabDisabled) setActiveTab(tab);
               }}
@@ -381,12 +383,12 @@ export function DatetimePicker<
     showSeconds = false,
     skeleton,
     id: idProp,
+    panelWidth,
     ..._restProps
   } = useProps(props);
 
   const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
-  const touchWeb = useCoarsePointer();
 
   const [open, setOpen] = useState(false);
   const [selectedDatetime, setSelectedDatetime] = useState<Date | null>(() =>
@@ -470,40 +472,6 @@ export function DatetimePicker<
     />
   );
 
-  const renderTouchTrigger = (
-    hasError?: boolean,
-    blurHandler?: (...args: any[]) => void,
-    fieldChange?: (value: any) => void,
-  ) => (
-    <DatePickerInputTrigger
-      value={displayValue}
-      placeholder={placeholder}
-      disabled={disabled}
-      onReset={() => handleClearDatetime(fieldChange)}
-      onButtonPress={() => {}}
-      touchInput={
-        <TouchWebPickerInput
-          kind="datetime-local"
-          id={id}
-          value={toDatetimeLocalValue(selectedDatetime, showSeconds)}
-          min={toDatetimeLocalValue(minDate, showSeconds)}
-          max={toDatetimeLocalValue(maxDate, showSeconds)}
-          showSeconds={showSeconds}
-          disabled={disabled}
-          required={required}
-          invalid={hasError}
-          aria-label={label ? undefined : t("Date and time")}
-          onValue={(next) => {
-            const date = fromNativeDateValue(next);
-            if (date) handleDatetimeSelect(date, fieldChange);
-            else handleClearDatetime(fieldChange);
-          }}
-          onBlur={blurHandler}
-        />
-      }
-    />
-  );
-
   const renderPopover = (
     hasError?: boolean,
     blurHandler?: (...args: any[]) => void,
@@ -521,7 +489,6 @@ export function DatetimePicker<
         />
       );
     }
-    if (touchWeb) return renderTouchTrigger(hasError, blurHandler, fieldChange);
     const handleOpenChange = (isOpen: boolean) => {
       // Re-seed the visible month from the current value on every open.
       if (isOpen && selectedDatetimeRef.current) setDisplayDate(selectedDatetimeRef.current);
@@ -544,7 +511,12 @@ export function DatetimePicker<
         disabled={disabled}
         sizing="grow"
         contentPadding="none"
-        widthMode="fit-content"
+        widthMode="at-least-trigger"
+        panelWidth={panelWidth}
+        // LC-112 seamless cover (FZ-8438): touch and narrow web open the same
+        // panel over the field, never the browser's own popover; a field too
+        // low for the panel takes MPO's bottom sheet (LC-105 collision).
+        compactFace={isWeb ? "menu" : undefined}
       >
         {pickerContent(fieldChange)}
       </FloatingPanel>

package/src/fields/DatePicker/DatetimePicker.native.tsx

@@ -2,6 +2,7 @@
  * Native DatetimePicker — iOS calendar then time wheel; Android date then time.
  */
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
+import type { PanelWidth } from "../../FloatingPanel/panelWidth";
 import { formatAbsoluteDateTime } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Pressable as RNPressable } from "react-native";
@@ -56,6 +57,8 @@ export type DatetimePickerProps<
     onChange?: (value: Date | null) => void;
     onValueChange?: (value: Date | null) => void;
     native?: boolean;
+    /** How wide the catalog picker opens (`native={false}`), LC-112. */
+    panelWidth?: PanelWidth;
   };
 
 function formatDatetimeDisplay(

package/src/fields/DatePicker/catalog.tsx

@@ -16,12 +16,6 @@ import type { FormFieldProps } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
 import { Skeleton } from "../../Skeleton";
 import type { FieldComponentProps, Validator } from "../../types";
-import {
-  fromNativeDateValue,
-  toDateInputValue,
-  TouchWebPickerInput,
-  useCoarsePointer,
-} from "../../shared/touchWebPicker";
 
 import {
   CalendarDays,
@@ -39,6 +33,7 @@ import {
 } from "./parts";
 
 import type { ViewMode } from "./parts";
+import type { PanelWidth } from "../../FloatingPanel/panelWidth";
 
 export type { ViewMode } from "./parts";
 
@@ -84,6 +79,11 @@ export type DatePickerProps<
     onValueChange?: (value: Date | null) => void;
     /** Native only. `false` keeps the catalog calendar; omit for the OS picker. */
     native?: boolean;
+    /**
+     * How wide the open picker is (LC-112, FZ-8438 r3): `"content"`,
+     * `"trigger"`, `"screen"` or a fixed width. Unset: at least the field.
+     */
+    panelWidth?: PanelWidth;
   };
 
 // ---------------------------------------------------------------------------
@@ -211,13 +211,13 @@ export function DatePicker<
     onBlur,
     skeleton,
     id: idProp,
+    panelWidth,
     ..._restProps
   } = useProps(props);
 
   const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const hasLabel = Boolean(label);
-  const touchWeb = useCoarsePointer();
 
   const [open, setOpen] = useState(false);
   const [selectedDate, setSelectedDate] = useState<Date | null>(() =>
@@ -308,38 +308,6 @@ export function DatePicker<
         .filter(Boolean)
         .join(" ") || undefined;
 
-    if (touchWeb) {
-      return (
-        <DatePickerInputTrigger
-          value={formatDateDisplay(selectedDate)}
-          placeholder={placeholder}
-          disabled={disabled}
-          onReset={() => handleClearDate(fieldChange)}
-          onButtonPress={() => {}}
-          touchInput={
-            <TouchWebPickerInput
-              kind="date"
-              id={id}
-              value={toDateInputValue(selectedDate)}
-              min={toDateInputValue(minDate)}
-              max={toDateInputValue(maxDate)}
-              disabled={disabled}
-              required={required}
-              invalid={hasError}
-              aria-label={hasLabel ? undefined : t("Date")}
-              aria-describedby={describedBy}
-              onValue={(next) => {
-                const date = fromNativeDateValue(next);
-                if (date) handleDateSelect(date, fieldChange);
-                else handleClearDate(fieldChange);
-              }}
-              onBlur={blurHandler}
-            />
-          }
-        />
-      );
-    }
-
     const handleOpenChange = (isOpen: boolean) => {
       // Re-seed the visible month from the current value on every open —
       // the value may have changed (externally or by a pick) since mount.
@@ -361,6 +329,7 @@ export function DatePicker<
         // TimePicker already pass it.
         disabled={disabled}
         popoverRef={popoverRef}
+        panelWidth={panelWidth}
         // "Date, Jul 15 2026": VO gets the field name + current value on the
         // native trigger (the web trigger announces via aria on the Area).
         triggerA11y={{

package/src/fields/DatePicker/index.native.tsx

@@ -5,6 +5,7 @@
  * calendar) stay the catalog implementations.
  */
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
+import type { PanelWidth } from "../../FloatingPanel/panelWidth";
 import { useCallback, useEffect, useState } from "react";
 import { Pressable as RNPressable } from "react-native";
 import { useProps } from "tamagui";
@@ -58,6 +59,8 @@ export type DatePickerProps<
      * native is the OS picker (iOS calendar / time wheel).
      */
     native?: boolean;
+    /** How wide the catalog picker opens (`native={false}`), LC-112. */
+    panelWidth?: PanelWidth;
   };
 
 export type { ViewMode } from "./parts";

package/src/fields/DatePicker/parts.tsx

@@ -27,6 +27,7 @@ import { AnimatePresence, SizableText, Text, View, isWeb } from "tamagui";
 
 import { FloatingPanel, floatingPanelActionProps, isNestedPanelAction } from "../../FloatingPanel";
 import type { PanelActionEvent } from "../../FloatingPanel/nestedAction";
+import type { PanelWidth } from "../../FloatingPanel/panelWidth";
 import { Input as InputParts } from "../../InputParts";
 import { formCommonColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
@@ -861,11 +862,6 @@ interface DatePickerInputTriggerProps {
   "aria-describedby"?: string;
   "aria-required"?: boolean;
   "aria-invalid"?: boolean;
-  /**
-   * Touch web (LC-266): the browser's own picker input, laid over the box.
-   * The input then owns the tap, the focus and the field's a11y name.
-   */
-  touchInput?: ReactNode;
 }
 
 export function DatePickerClearButton({
@@ -905,7 +901,6 @@ export function DatePickerInputTrigger({
   "aria-describedby": ariaDescribedBy,
   "aria-required": ariaRequired,
   "aria-invalid": ariaInvalid,
-  touchInput,
 }: DatePickerInputTriggerProps) {
   const handleTriggerKey = (
     e: PanelActionEvent & { key?: string; code?: string; preventDefault?: () => void },
@@ -948,13 +943,10 @@ 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}
+        id={id}
+        onPress={isWeb && !disabled ? onButtonPress : undefined}
         {...(disabled ? { opacity: 0.5, pointerEvents: "none" } : undefined)}
-        {...(isWeb && !touchInput
+        {...(isWeb
           ? {
               role: "combobox" as const,
               "aria-haspopup": "dialog",
@@ -969,7 +961,6 @@ export function DatePickerInputTrigger({
             }
           : undefined)}
       >
-        {touchInput}
         <InputParts.Section data-testid="date-picker-glyph">
           <InputParts.Icon adornment="leading" color={formCommonColors.muted}>
             <Glyph />
@@ -980,7 +971,6 @@ export function DatePickerInputTrigger({
             readOnly
             pointerEvents="none"
             tabIndex={-1}
-            aria-hidden={touchInput ? true : undefined}
             value={value}
             placeholder={placeholder}
             disabled={disabled}
@@ -990,14 +980,7 @@ export function DatePickerInputTrigger({
         </InputParts.Section>
         {value && isWeb ? (
           <InputParts.Section>
-            {touchInput ? (
-              // Above the touch input, so Clear stays reachable on the box.
-              <View zIndex={2}>
-                <DatePickerClearButton onReset={onReset} disabled={disabled} />
-              </View>
-            ) : (
-              <DatePickerClearButton onReset={onReset} disabled={disabled} />
-            )}
+            <DatePickerClearButton onReset={onReset} disabled={disabled} />
           </InputParts.Section>
         ) : null}
       </InputParts.Box>
@@ -1078,6 +1061,8 @@ interface DatePickerPopoverShellProps {
   /** When set, native hosts render Clear outside the pointerEvents-none trigger. */
   clearValue?: string;
   onClear?: () => void;
+  /** How wide the open picker is (LC-112, FZ-8438 r3). Unset: at least the field. */
+  panelWidth?: PanelWidth;
 }
 
 export function DatePickerPopoverShell({
@@ -1090,6 +1075,7 @@ export function DatePickerPopoverShell({
   triggerA11y,
   clearValue,
   onClear,
+  panelWidth,
 }: DatePickerPopoverShellProps) {
   const nativeClear =
     !isWeb && clearValue && onClear ? (
@@ -1104,7 +1090,11 @@ export function DatePickerPopoverShell({
       disabled={disabled}
       sizing="grow"
       contentPadding="none"
-      widthMode="fit-content"
+      // LC-112 seamless cover (FZ-8438): the panel is the field grown open,
+      // at least its width, on every web width and pointer.
+      widthMode="at-least-trigger"
+      panelWidth={panelWidth}
+      compactFace={isWeb ? "menu" : undefined}
       triggerA11y={triggerA11y}
     >
       {children}

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

@@ -0,0 +1,180 @@
+/**
+ * LC-112 seamless cover for the DatePicker family (FZ-8438). Clay rated deck
+ * rv_a07d4308a6c445b6 0 good: the date, time and date-and-time panels must
+ * open as one surface exactly over their field, at desktop and phone width,
+ * on a fine pointer and on touch alike.
+ *
+ * The browser half is emulated where happy-dom has no layout: the field's
+ * rect, and the arc its Box draws (read off the Box's own radius atom, the
+ * value a browser would compute from it).
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { getTokens, getVariableValue } from "tamagui";
+import type { ReactElement } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { TimePicker } from "../TimePicker";
+import { DatePicker, DatetimePicker } from "./index";
+
+type Rect = { x: number; y: number; width: number; height: number };
+
+const viewports: Record<string, { width: number; height: number; field: Rect }> = {
+  "1440": { width: 1440, height: 900, field: { x: 16, y: 42, width: 400, height: 40 } },
+  "390": { width: 390, height: 844, field: { x: 16, y: 42, width: 358, height: 44 } },
+};
+
+const pickers: [string, () => ReactElement][] = [
+  ["DatePicker", () => <DatePicker label="Date" name="date" value={new Date(2026, 2, 5)} />],
+  ["TimePicker", () => <TimePicker label="Time" name="time" value="14:30" />],
+  [
+    "DatetimePicker",
+    () => (
+      <DatetimePicker label="Date and time" name="starts" value={new Date(2026, 2, 5, 14, 30)} />
+    ),
+  ],
+];
+
+const originalWidth = window.innerWidth;
+const originalHeight = window.innerHeight;
+
+function setViewport(width: number, height: number) {
+  Object.defineProperty(window, "innerWidth", { configurable: true, value: width });
+  Object.defineProperty(window, "innerHeight", { configurable: true, value: height });
+  act(() => {
+    window.dispatchEvent(new Event("resize"));
+  });
+}
+
+/** The painted Box of each picker's trigger (the field the user sees). */
+function isFieldBox(el: Element): boolean {
+  return (
+    el.matches('[data-testid="date-picker-trigger"]') ||
+    !!el.parentElement?.matches('[data-testid="time-picker-trigger"]')
+  );
+}
+
+function atomRadius(el: Element): number {
+  for (const c of Array.from(el.classList)) {
+    const px = c.match(/^_btlr-(\d+(?:\.\d+)?)px$/);
+    if (px) return Number(px[1]);
+    const token = c.match(/^_btlr-t-radius-(.+)$/);
+    if (token) {
+      const value = (getTokens().radius as Record<string, unknown>)[`$${token[1]}`];
+      return Number(getVariableValue(value));
+    }
+  }
+  return 0;
+}
+
+function emulateBrowser(field: Rect) {
+  const rect = {
+    ...field,
+    top: field.y,
+    left: field.x,
+    right: field.x + field.width,
+    bottom: field.y + field.height,
+    toJSON: () => ({}),
+  };
+  const originalRect = HTMLElement.prototype.getBoundingClientRect;
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+    function (this: HTMLElement) {
+      if (this.hasAttribute("data-fp-reference") || isFieldBox(this)) return rect;
+      return originalRect.call(this);
+    },
+  );
+  const original = globalThis.getComputedStyle.bind(globalThis);
+  const computed = (el: Element, pseudo?: string | null) => {
+    const style = original(el, pseudo);
+    if (!isFieldBox(el)) return style;
+    const radius = `${atomRadius(el)}px`;
+    return new Proxy(style, {
+      get(target, key) {
+        if (key === "borderTopLeftRadius") return radius;
+        const value = Reflect.get(target, key, target);
+        return typeof value === "function" ? value.bind(target) : value;
+      },
+    });
+  };
+  vi.spyOn(globalThis, "getComputedStyle").mockImplementation(computed as typeof getComputedStyle);
+  if ((window as unknown) !== globalThis) {
+    vi.spyOn(window, "getComputedStyle").mockImplementation(computed as typeof getComputedStyle);
+  }
+}
+
+function fieldBox(root: ParentNode): HTMLElement {
+  const box = Array.from(root.querySelectorAll<HTMLElement>("*")).find(isFieldBox);
+  expect(box).toBeTruthy();
+  return box as HTMLElement;
+}
+
+const corners = (el: Element) =>
+  Array.from(el.classList)
+    .filter((c) => /^_b[tb][lr]r-/.test(c))
+    .sort();
+
+beforeEach(() => {
+  setViewport(1440, 900);
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  setViewport(originalWidth, originalHeight);
+});
+
+describe("DatePicker family: one surface over the field (LC-112, FZ-8438)", () => {
+  for (const [size, viewport] of Object.entries(viewports)) {
+    for (const [name, render] of pickers) {
+      it(`${name} at ${size}: top, start, width and all four arcs are the field's`, async () => {
+        setViewport(viewport.width, viewport.height);
+        emulateBrowser(viewport.field);
+        const result = renderWithProviders(render());
+        const box = fieldBox(result.container);
+        const drawn = Math.min(atomRadius(box), viewport.field.height / 2);
+        expect(drawn).toBeGreaterThan(0);
+
+        fireEvent.click(box, { detail: 0 });
+        const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
+        expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
+        expect(document.querySelector('input[type="date"], input[type="time"]')).toBeNull();
+
+        await waitFor(() => expect(panel.style.top).toBe(`${viewport.field.y}px`));
+        expect(panel.style.left).toBe(`${viewport.field.x}px`);
+        await waitFor(() =>
+          expect(parseFloat(panel.style.minWidth)).toBeGreaterThanOrEqual(viewport.field.width),
+        );
+        await waitFor(() =>
+          expect(corners(panel)).toEqual(
+            [`_bblr-${drawn}px`, `_bbrr-${drawn}px`, `_btlr-${drawn}px`, `_btrr-${drawn}px`].sort(),
+          ),
+        );
+      });
+
+      it(`${name} at ${size}: the echo draws no border or divider and sits above the field`, async () => {
+        setViewport(viewport.width, viewport.height);
+        emulateBrowser(viewport.field);
+        const result = renderWithProviders(render());
+        const live = fieldBox(result.container);
+        fireEvent.click(live, { detail: 0 });
+        const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
+        const frame = await waitFor(() => {
+          const found = panel.querySelector<HTMLElement>("[data-fp-echo-frame]");
+          expect(found).not.toBeNull();
+          return found as HTMLElement;
+        });
+        for (const property of ["border-color", "background-color"]) {
+          expect(frame.style.getPropertyValue(property)).toBe("transparent");
+          expect(frame.style.getPropertyPriority(property)).toBe("important");
+        }
+        expect(frame.style.getPropertyValue("box-shadow")).toBe("none");
+        const row = panel.querySelector<HTMLElement>("[data-fp-trigger-row]") as HTMLElement;
+        expect(row.style.width).toBe(`${viewport.field.width}px`);
+        expect(row.style.height).toBe(`${viewport.field.height}px`);
+        expect(row.style.backgroundColor).toBe(getComputedStyle(panel).backgroundColor);
+        expect(panel.style.position).toBe("fixed");
+        expect(Number(panel.style.zIndex)).toBeGreaterThan(0);
+        expect(live.compareDocumentPosition(panel) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+        expect(live.contains(panel)).toBe(false);
+      });
+    }
+  }
+});