@multiplatform.one/forms 8.3.0 → 8.5.0

package/src/FloatingPanel/index.native.tsx

@@ -124,10 +124,12 @@ import {
   scrollArrowBand,
   scrollArrowThreshold,
 } from "../shared/checkedOnField";
+import { holdCueScale, useHoldCue } from "../hooks/useHoldCue";
 import { useInsideOverlay, useOverlayZIndex } from "../shared/overlayStack";
 import { OverlayWindow } from "../shared/OverlayWindow";
 import { t } from "../shared/t";
 import { overlaySizeClass } from "../shared/overlaySizeClass";
+import { minSheetHeight, resolveSheetDetents, sheetDismissThreshold } from "../shared/sheetDetents";
 import { useKeyboardInset } from "../shared/useKeyboardInset";
 import type { FloatingPanelProps } from "./index";
 import { MENU_MIN_WIDTH, resolveCompactFace } from "./compactFace";
@@ -176,14 +178,6 @@ const bottomInset = Platform.OS === "ios" ? 24 : 16;
 // Backdrop left visible above the sheet: the scrim has to stay tappable, and a
 // sheet flush with the status bar reads as a page, not a sheet.
 const backdropStrip = 48;
-// Never collapse to nothing on a landscape phone with the keyboard up.
-const minSheetHeight = 180;
-// Half-open detent for a sheet that owns a scrollport, as a fraction of its
-// full height. The web path hands Tamagui's Sheet [92, 50, 25]; on a phone one
-// intermediate stop is the only one worth having.
-const mediumDetent = 0.55;
-// Released more than this far below the smallest detent, the sheet dismisses.
-const dismissThreshold = 56;
 
 export function FloatingPanel({
   open,
@@ -194,6 +188,7 @@ export function FloatingPanel({
   triggerSizing = "stretch",
   children: panelChildren,
   scrollable,
+  detents,
   disabled,
   contentPadding = "default",
   header,
@@ -244,8 +239,10 @@ export function FloatingPanel({
   const handleTriggerPress = useCallback(() => {
     if (!disabled) onOpenChange(!open);
   }, [disabled, onOpenChange, open]);
+  const hold = useHoldCue();
   const handleTriggerLongPress = useCallback(
     (event?: GestureResponderEvent) => {
+      hold.stop();
       if (disabled) return;
       const { pageX, pageY } = event?.nativeEvent ?? {};
       setPressPoint(
@@ -253,7 +250,7 @@ export function FloatingPanel({
       );
       onOpenChange(true);
     },
-    [disabled, onOpenChange],
+    [disabled, onOpenChange, hold.stop],
   );
   const isContextMenu = openOn === "contextmenu";
   // A long-press menu never eats its trigger's tap: the web lets the primary
@@ -369,13 +366,10 @@ export function FloatingPanel({
   // A content-sized picker has exactly one useful resting height; only a sheet
   // that owns a scrollport can meaningfully sit half-open.
   const isSheet = !!scrollable || !!sheetFill;
-  const detents = useMemo(() => {
-    if (!isSheet) return [travel];
-    const points = [travel, Math.round(travel * mediumDetent)].filter(
-      (h) => h >= Math.min(minSheetHeight, travel),
-    );
-    return Array.from(new Set(points)).sort((a, b) => b - a);
-  }, [isSheet, travel]);
+  const detentHeights = useMemo(
+    () => resolveSheetDetents({ travel, detents, scrollable: isSheet }),
+    [detents, isSheet, travel],
+  );
 
   // Start OFF-SCREEN. `0` is "fully expanded", so a 0 default paints the
   // sheet at rest for one frame, then onShow jumps it to `travel` and
@@ -385,9 +379,9 @@ export function FloatingPanel({
   // callbacks are created once and must not close over a stale value.
   const restRef = useRef(10000);
   const travelRef = useRef(travel);
-  const detentsRef = useRef(detents);
+  const detentsRef = useRef(detentHeights);
   travelRef.current = travel;
-  detentsRef.current = detents;
+  detentsRef.current = detentHeights;
 
   // Async callbacks belong to one committed presentation, never its successor.
   const presentationRef = useRef(0);
@@ -518,7 +512,7 @@ export function FloatingPanel({
           // so a fast short flick still changes detent.
           const projected = current + g.vy * 120;
           const smallestRest = t - points[points.length - 1];
-          if (projected > smallestRest + dismissThreshold || g.vy > 1.1) {
+          if (projected > smallestRest + sheetDismissThreshold || g.vy > 1.1) {
             dismiss(g.vy);
             return;
           }
@@ -629,6 +623,10 @@ export function FloatingPanel({
             ? {
                 onLongPress: handleTriggerLongPress,
                 delayLongPress: 500,
+                ...(disabled
+                  ? undefined
+                  : { delayPressIn: 0, onPressIn: hold.start, onPressOut: hold.stop }),
+                ...(hold.holding ? { dataSet: { hold: "progress" } } : undefined),
                 ...(triggerOwn?.onPress && !disabled ? { onPress: triggerOwn.onPress } : undefined),
               }
             : { onPress: handleTriggerPress })}
@@ -648,6 +646,7 @@ export function FloatingPanel({
             alignSelf: "stretch",
             width: triggerSizing === "content" ? undefined : "100%",
             opacity: disabled ? 0.5 : 1,
+            ...(hold.holding ? { transform: [{ scale: holdCueScale }] } : undefined),
           }}
         >
           {/* Own the hit target — see file header for why pointerEvents="none". */}

package/src/FloatingPanel/index.tsx

@@ -11,6 +11,7 @@ import {
   useCallback,
   useEffect,
   useLayoutEffect,
+  useMemo,
   useRef,
   useState,
   useSyncExternalStore,
@@ -31,6 +32,7 @@ import { ScrollArrow } from "../shared/floatingList";
 import { TrailingActionOverlay, TriggerWithTrailingAction } from "./trailingAction";
 import { useReturnFocusOnClose, useSheetModalFocus } from "../shared/focusManagement";
 import { useSheetEscapeDismiss } from "../shared/useSheetEscapeDismiss";
+import { resolveDetentPercents } from "../shared/sheetDetents";
 import { useFloatingPanel, panelViewportPadding, paintedCornerBox } from "./useFloatingPanel";
 import { fixedContainingBlockOrigin } from "./containingBlock";
 import type { PanelWidthMode } from "./useFloatingPanel";
@@ -48,6 +50,12 @@ import { PanelPortal } from "./PanelPortal";
 import { PanelSheetContext } from "./echoContext";
 import { iconCoverRect } from "./coverRect";
 import { groupSurfaceOf, paintedTriggerBox } from "./paintedBox";
+
+/**
+ * The scrollable sheet face's shipped stops. A caller's `detents` replaces
+ * them; nothing else does, so no existing sheet changes shape (FZ-455).
+ */
+const defaultSheetSnapPoints = [92, 50, 25];
 import {
   contextMenuPoint,
   placeOverTrigger,
@@ -135,6 +143,15 @@ export interface FloatingPanelProps {
    * overflow/scroll is for non-interactive lists.
    */
   scrollable?: boolean;
+  /**
+   * The rest positions the sheet face may settle at, as percents of its full
+   * height (FZ-455), the way `UISheetPresentationController.detents` takes an
+   * array. A finger on the grabber drags between them and releases onto the
+   * nearest. Order does not matter and `sheetDetent.medium` / `.large` name
+   * the HIG rungs. Omitted, a scrollable sheet keeps its three default stops
+   * and a content-sized panel its single height, so no existing panel moves.
+   */
+  detents?: number[];
   disabled?: boolean;
   /**
    * Force Sheet mode (slide-up panel) even on desktop.
@@ -619,6 +636,7 @@ function FloatingPanelSheet({
   triggerSizing = "stretch",
   children,
   scrollable,
+  detents,
   disabled,
   contentPadding = "default",
   transition: transitionProp,
@@ -639,6 +657,10 @@ function FloatingPanelSheet({
     transition: transitionProp ?? knobProps.motion.scrim.transition,
   };
   const [position, setPosition] = useState(0);
+  const sheetSnapPoints = useMemo(() => {
+    if (detents?.length) return resolveDetentPercents({ detents });
+    return scrollable ? defaultSheetSnapPoints : undefined;
+  }, [detents, scrollable]);
 
   const handleOpenChange = (next: boolean) => {
     if (disabled) return;
@@ -719,8 +741,8 @@ function FloatingPanelSheet({
         modal
         open={open}
         onOpenChange={handleOpenChange}
-        snapPoints={scrollable ? [92, 50, 25] : undefined}
-        snapPointsMode={scrollable ? "percent" : "fit"}
+        snapPoints={sheetSnapPoints}
+        snapPointsMode={sheetSnapPoints ? "percent" : "fit"}
         dismissOnSnapToBottom
         position={position}
         onPositionChange={setPosition}

package/src/InputParts/index.tsx

@@ -634,6 +634,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
           {...(knobProps.elevation == null ? { elevation: undefined } : knobProps.elevationChrome)}
           {...knobProps.borderRadius}
           borderWidth={knobProps.fieldEdge.borderWidth}
+          borderColor={formInputColors.border.base}
           {...hiddenEdge}
           {...sizeTableRadius}
           {...transitionProps(knobProps.motion.control)}

package/src/Wheel/Wheel.edgeFade.spec.tsx

@@ -0,0 +1,74 @@
+/**
+ * The web wheel's edge fade (FZ-8080): a LinearGradient veil of the surface the
+ * wheel sits on, never a CSS mask on the drum.
+ */
+import { SurfaceContext } from "@multiplatform.one/theme";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { createElement } from "react";
+import { Theme, useTheme } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Wheel } from "./index";
+
+vi.mock("tamagui/linear-gradient", () => ({
+  LinearGradient: (props: Record<string, unknown>) =>
+    createElement("span", {
+      "data-testid": props["data-testid"],
+      "data-colors": JSON.stringify(props.colors),
+      "data-locations": JSON.stringify(props.locations),
+      "data-opacity": props.opacity,
+      "data-pointer-events": props.pointerEvents,
+    }),
+}));
+
+afterEach(cleanup);
+
+const items = Array.from({ length: 24 }, (_, i) => i);
+const seen = { background: "" };
+
+function Probe() {
+  seen.background = String(useTheme().background?.val);
+  return null;
+}
+
+describe("web Wheel edge fade (FZ-8080)", () => {
+  it("paints no CSS mask on the drum", () => {
+    renderWithProviders(<Wheel items={items} value={6} onChange={() => {}} />);
+    const drum = screen.getByTestId("wheel-wrapper");
+    expect(drum.style.maskImage).toBe("");
+    expect(drum.style.getPropertyValue("-webkit-mask-image")).toBe("");
+  });
+
+  it("veils both ends in the page surface and leaves the selection band clear", () => {
+    renderWithProviders(
+      <>
+        <Probe />
+        <Wheel items={items} value={6} onChange={() => {}} />
+      </>,
+    );
+    const fade = screen.getByTestId("wheel-fade");
+    expect(JSON.parse(fade.getAttribute("data-colors")!)).toEqual([
+      seen.background,
+      "transparent",
+      "transparent",
+      seen.background,
+    ]);
+    expect(JSON.parse(fade.getAttribute("data-locations")!)).toEqual([0, 0.32, 0.68, 1]);
+    expect(fade.getAttribute("data-opacity")).toBe("0.72");
+    expect(fade.getAttribute("data-pointer-events")).toBe("none");
+  });
+
+  it("veils in the elevated surface on a dark overlay", () => {
+    renderWithProviders(
+      <Theme name="dark">
+        <SurfaceContext.Provider elevated>
+          <Probe />
+          <Wheel items={items} value={6} onChange={() => {}} />
+        </SurfaceContext.Provider>
+      </Theme>,
+    );
+    const colors = JSON.parse(screen.getByTestId("wheel-fade").getAttribute("data-colors")!);
+    expect(colors[0]).not.toBe(seen.background);
+    expect(colors[0]).toBe(colors[3]);
+  });
+});

package/src/Wheel/index.tsx

@@ -1,7 +1,8 @@
-import type { CSSProperties } from "react";
+import { useElevatedSurface } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { GetProps } from "tamagui";
-import { View, isWeb, styled, Text } from "tamagui";
+import { View, isWeb, styled, Text, useTheme } from "tamagui";
+import { LinearGradient } from "tamagui/linear-gradient";
 import { t } from "../shared/t";
 import { fireSelectionHaptic } from "./haptic";
 import { NativeWheel } from "./NativeWheel";
@@ -49,14 +50,8 @@ function ensureWheelFocusStyles() {
   document.head.appendChild(style);
 }
 
-const wheelMaskStyle: CSSProperties | undefined = isWeb
-  ? {
-      WebkitMaskImage:
-        "linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, #000 32%, #000 68%, rgba(0,0,0,0.28) 100%)",
-      maskImage:
-        "linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, #000 32%, #000 68%, rgba(0,0,0,0.28) 100%)",
-    }
-  : undefined;
+const wheelFadeStops = [0, 0.32, 0.68, 1];
+const wheelFadeOpacity = 0.72;
 
 // ── Styled components ─────────────────────────────────────────
 
@@ -164,6 +159,12 @@ function WebWheel<T = string | number>(props: WheelProps<T>) {
     highlightClassName,
   } = useWheelLayout(props);
   const columnWidth = widthProp ?? defaultColumnWidth;
+  const theme = useTheme();
+  const elevatedGround = useElevatedSurface();
+  const fadeKey = (
+    elevatedGround ? knobProps.elevatedSurface.backgroundColor : "$background"
+  ) as string;
+  const fadeSurface = String(theme[fadeKey.replace(/^\$/, "") as "background"]?.val ?? fadeKey);
   ensureWheelFocusStyles();
   const containerRef = useRef<HTMLDivElement>(null);
   const [scrollOffset, setScrollOffset] = useState(0);
@@ -714,7 +715,6 @@ function WebWheel<T = string | number>(props: WheelProps<T>) {
           userSelect: "none",
           touchAction: "none",
           cursor: disabled ? "not-allowed" : "grab",
-          ...wheelMaskStyle,
         }}
         onPointerDown={handlePointerDown as any}
         onPointerMove={handlePointerMove as any}
@@ -757,6 +757,20 @@ function WebWheel<T = string | number>(props: WheelProps<T>) {
           );
         })}
       </div>
+      <LinearGradient
+        data-testid="wheel-fade"
+        pointerEvents="none"
+        position="absolute"
+        top={0}
+        right={0}
+        bottom={0}
+        left={0}
+        opacity={wheelFadeOpacity}
+        colors={[fadeSurface, "transparent", "transparent", fadeSurface]}
+        locations={wheelFadeStops}
+        start={[0, 0]}
+        end={[0, 1]}
+      />
     </WheelContainer>
   );
 }

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

@@ -0,0 +1,154 @@
+import { CalendarBlankIcon, ClockIcon } from "@phosphor-icons/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import {
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+} from "@multiplatform.one/theme";
+import { configWithoutAnimations } from "@tamagui/config";
+import { animationsCSS } from "@tamagui/config/v5-css";
+import { render } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { TamaguiProvider, createTamagui } from "tamagui";
+import { describe, expect, it, vi } from "vitest";
+import { Input } from "../Input";
+import { TimePicker } from "../TimePicker";
+import { DatePicker, DatetimePicker } from "./index";
+import { CalendarDays, MonthGrid, YearGrid, isSameDay, useCalendarData } from "./parts";
+
+vi.mock("@multiplatform.one/storybook", () => ({ action: () => () => {} }));
+vi.mock("@multiplatform.one/table", () => ({ DataTable: () => null }));
+
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+const houseConfig = createTamagui({
+  ...configWithoutAnimations,
+  animations: animationsCSS,
+  themes: houseThemes as never,
+});
+
+function placeholderInk(node: ReactElement) {
+  const { container, unmount } = renderWithProviders(node);
+  const input = container.querySelector("input");
+  expect(input).toBeTruthy();
+  const ink = input!.style.getPropertyValue("--t_placeholderColor");
+  unmount();
+  return ink;
+}
+
+function pathOf(icon: ReactElement) {
+  return renderToStaticMarkup(icon).match(/ d="([^"]+)"/)![1];
+}
+
+function June() {
+  const calendarData = useCalendarData(new Date(2024, 5, 15));
+  return (
+    <CalendarDays
+      calendarData={calendarData}
+      isSelected={(day) => isSameDay(day, new Date(2024, 5, 15))}
+      onSelect={() => {}}
+    />
+  );
+}
+
+function selectedCell(node: ReactElement, scheme: "light" | "dark") {
+  const { container } = render(
+    <TamaguiProvider config={houseConfig} defaultTheme={scheme} disableInjectCSS>
+      {node}
+    </TamaguiProvider>,
+  );
+  const cell = container.querySelector<HTMLElement>("[aria-pressed='true']");
+  expect(cell).toBeTruthy();
+  return cell!;
+}
+
+describe("date and time fields read empty, name their kind and mark the pick (FZ-8433)", () => {
+  const stock = placeholderInk(<Input label="Name" placeholder="Your name" />);
+
+  it.each([
+    ["DatePicker", <DatePicker key="d" label="Date" placeholder="Pick a date" />],
+    ["DatetimePicker", <DatetimePicker key="dt" label="When" placeholder="Pick a time" />],
+    ["TimePicker", <TimePicker key="t" label="Time" placeholder="Select time" />],
+  ])("an empty %s draws its placeholder in the theme's placeholder ink", (_name, node) => {
+    const ink = placeholderInk(node);
+    expect(stock).not.toBe("");
+    expect(ink).toBe(stock);
+    expect(ink).not.toBe("var(--color11)");
+  });
+
+  it.each([
+    [
+      "DatetimePicker",
+      <DatetimePicker key="dt" label="When" />,
+      "date-picker-glyph",
+      CalendarBlankIcon,
+    ],
+    ["DatePicker", <DatePicker key="d" label="Date" />, "date-picker-glyph", CalendarBlankIcon],
+    ["TimePicker", <TimePicker key="t" label="Time" />, "time-picker-glyph", ClockIcon],
+    [
+      "a read-only DatetimePicker",
+      <DatetimePicker key="ro" label="When" value={new Date(2026, 9, 31, 9, 30)} readOnly />,
+      "date-picker-glyph",
+      CalendarBlankIcon,
+    ],
+  ] as const)("%s draws one glyph, on the input's right", (_name, node, testId, Icon) => {
+    const { container, unmount } = renderWithProviders(node);
+    const glyphs = container.querySelectorAll(`[data-testid='${testId}']`);
+    expect(glyphs).toHaveLength(1);
+    const paths = Array.from(glyphs[0]!.querySelectorAll("svg path")).map((p) =>
+      p.getAttribute("d"),
+    );
+    expect(paths).toEqual([pathOf(<Icon />)]);
+    const input = container.querySelector("input")!;
+    expect(
+      input.compareDocumentPosition(glyphs[0]!) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+    unmount();
+  });
+
+  it("a filled web field swaps its glyph for the clear action, so the right holds one icon", () => {
+    const { container } = renderWithProviders(
+      <DatetimePicker label="When" value={new Date(2026, 9, 31, 9, 30)} />,
+    );
+    expect(container.querySelector("[data-testid='date-picker-glyph']")).toBeNull();
+    expect(container.querySelector("[data-testid='date-picker-clear']")).toBeTruthy();
+  });
+
+  it.each(
+    (["light", "dark"] as const).flatMap((scheme) => [
+      ["day", scheme, <June key="d" />],
+      [
+        "month",
+        scheme,
+        <MonthGrid key="m" currentYear={2024} selectedMonth={5} onSelectMonth={() => {}} />,
+      ],
+      [
+        "year",
+        scheme,
+        <YearGrid
+          key="y"
+          yearPageStart={2020}
+          selectedYear={2024}
+          onSelectYear={() => {}}
+          onPrevPage={() => {}}
+          onNextPage={() => {}}
+        />,
+      ],
+    ]) as [string, "light" | "dark", ReactElement][],
+  )(
+    "the picked %s fills with the accent mark in %s, inked for that fill",
+    (_name, scheme, node) => {
+      const cell = selectedCell(node, scheme);
+      expect(cell.className).toMatch(/(?:^|\s)_bg-accentBackg/);
+      expect(cell.className).not.toMatch(/t_accent/);
+      const ink = cell.querySelector<HTMLElement>("span")!.className;
+      expect(ink).toMatch(/(?:^|\s)_col-(?:hsla?|rgba?)/);
+    },
+  );
+});