@multiplatform.one/forms 7.80.0 → 7.81.1

package/src/FloatingPanel/index.tsx

@@ -1,4 +1,9 @@
-import { transitionProps } from "@multiplatform.one/theme";
+import {
+  transitionProps,
+  overlayScrim,
+  sheetGrabber,
+  sheetGrabberClearance,
+} from "@multiplatform.one/theme";
 import type { ReactNode, RefObject, UIEvent } from "react";
 import {
   cloneElement,
@@ -15,7 +20,6 @@ import {
   OVERLAY_ATTACH_GAP,
   OVERLAY_BREAKPOINT,
   Surface,
-  SurfaceContext,
   useResolvedKnobs,
   wasKeyboardFocus,
   ensureKeyboardModalityTracking,
@@ -41,14 +45,8 @@ import { OverlayStackProvider, useInsideOverlay, useOverlayZIndex } from "../sha
 import { resolveCompactFace, type CompactFace } from "./compactFace";
 import { isNestedPanelAction, type PanelActionEvent } from "./nestedAction";
 import { PanelPortal } from "./PanelPortal";
-import {
-  echoHeaderBox,
-  PanelIconEchoBoxContext,
-  sameEchoBox,
-  type PanelIconEchoBox,
-} from "./echoContext";
-import { iconEchoElement, iconEchoOverlays, type IconEcho } from "./iconEcho";
-import { echoInCover, iconCoverRect } from "./coverRect";
+import { PanelSheetContext } from "./echoContext";
+import { iconCoverRect } from "./coverRect";
 import { groupSurfaceOf, paintedTriggerBox } from "./paintedBox";
 import {
   contextMenuPoint,
@@ -103,14 +101,23 @@ export interface FloatingPanelProps {
    */
   coverAlign?: "start" | "auto";
   /**
-   * An icon-only trigger's covering panel draws the pressed button again in
-   * its own spot as an X, same size and plate, the way iOS morphs a + into an
-   * X (LC-112, FZ-8480 Round 37). `"close"` lays the X over the content's
-   * header row; `"menu"` gives it its own band above the rows. It closes the
-   * panel and reads "Close". The panel never slides off the button: it opens
-   * down from the button's top edge, or up from its bottom edge.
+   * The trigger is an icon-only button (LC-112, FZ-8665 Round 45). Its panel
+   * covers the surface the button is seen on, a glass capsule or its press
+   * target, and repeats nothing: the content starts at the panel's top edge,
+   * and a press outside it closes it. The panel never slides off the button:
+   * it opens down from the button's top edge, or up from its bottom edge.
+   */
+  iconCover?: boolean;
+  /**
+   * Native only: the panel opens the way a macOS pop-up does (LC-112, FZ-8655).
+   * `row` is the row that sits on the trigger, its offset and height in the
+   * panel's content, `null` until the caller has measured it. There's no
+   * trigger echo, a list that fits the safe edges shows whole, and a taller one
+   * scrolls under opaque arrow bands (`placeCheckedOnField`). At regular width
+   * this is the panel's face at every list length, so a Select never takes
+   * RegularPanel's echo or a sheet there.
    */
-  iconEcho?: IconEcho;
+  popUp?: { row: { top: number; height: number } | null };
   /**
    * Optional control rendered beside the trigger but OUTSIDE the native press
    * capture (e.g. DatePicker/ColorPicker clear). On native the trigger subtree
@@ -410,7 +417,6 @@ export function TriggerEchoRow({
       const stretched = grown > rect.width;
       row.style.width = `${stretched ? grown : rect.width}px`;
       row.style.height = `${rect.height}px`;
-      const rtl = isRtl(source);
       row.style.alignSelf = "flex-start";
       const frameStyle = row.parentElement ? getComputedStyle(row.parentElement) : null;
       row.style.position = "sticky";
@@ -419,12 +425,10 @@ export function TriggerEchoRow({
       row.style.zIndex = "1";
       // Sticky over a scrolled body, so it carries the panel's own fill.
       row.style.backgroundColor = frameStyle?.backgroundColor ?? "";
-      row.style.marginLeft = rtl
-        ? ""
-        : `${-(parseFloat(frameStyle?.borderLeftWidth || "0") || 0)}px`;
-      row.style.marginRight = rtl
-        ? `${-(parseFloat(frameStyle?.borderRightWidth || "0") || 0)}px`
-        : "";
+      // Both sides overlap the frame's border, so a trigger-wide row fits a
+      // trigger-wide panel instead of pushing it a border wider (FZ-8557).
+      row.style.marginLeft = `${-(parseFloat(frameStyle?.borderLeftWidth || "0") || 0)}px`;
+      row.style.marginRight = `${-(parseFloat(frameStyle?.borderRightWidth || "0") || 0)}px`;
       const snapshot =
         children == null ? (source.cloneNode(true) as HTMLElement) : visualRef.current;
       if (!snapshot) return;
@@ -521,97 +525,6 @@ export function placeEchoOverTrigger(
   }
 }
 
-/**
- * The band an icon trigger's echo rides (LC-112, FZ-8480): as tall as the
- * trigger, sticky on the panel's top edge (or its bottom edge when the panel
- * opened upward), filled with the panel's surface so scrolled rows pass under
- * it. It comes last in the document, so a keyboard open lands on the panel's
- * content and the echo is the last tab stop; CSS order draws it first.
- */
-function IconEchoRow({ children }: { children: ReactNode }) {
-  return (
-    <View
-      data-fp-icon-echo=""
-      flexShrink={0}
-      alignSelf="stretch"
-      pointerEvents="box-none"
-      style={{ order: -1, position: "sticky", zIndex: 1 }}
-    >
-      <View data-fp-icon-echo-box="" alignItems="flex-start" justifyContent="flex-start">
-        {children}
-      </View>
-    </View>
-  );
-}
-
-/**
- * Lay the icon echo on the trigger's measured box: the band is the trigger's
- * height on the edge the panel shares with it, and the box sits `offset` in
- * from the panel's start edge, pulled back over the frame's border so the
- * button lands exactly where the trigger is. An overlaid echo (an X) takes no
- * height of its own and lets the content show beside it.
- */
-function placeIconEcho(
-  panelElement: HTMLElement,
-  {
-    offset,
-    width,
-    height,
-    up,
-    overlay,
-    group = null,
-  }: {
-    offset: number;
-    width: number;
-    height: number;
-    up: boolean;
-    overlay: boolean;
-    /**
-     * The surface the panel covers when it is not the trigger's own box (a
-     * grouped capsule, or the 44pt target of a smaller avatar): the band
-     * covers all of it, and only the pressed trigger shows, at its own spot.
-     */
-    group?: { top: number; height: number } | null;
-  },
-) {
-  const row = panelElement.querySelector<HTMLElement>("[data-fp-icon-echo]");
-  const box = row?.querySelector<HTMLElement>("[data-fp-icon-echo-box]");
-  if (!row || !box) return;
-  const frame = getComputedStyle(panelElement);
-  const border = (side: "Top" | "Bottom" | "Left" | "Right") =>
-    parseFloat(frame[`border${side}Width`] || "0") || 0;
-  const rtl = panelElement.dir === "rtl";
-  row.style.order = up ? "1" : "-1";
-  row.style.height = `${height}px`;
-  row.style.backgroundColor = overlay ? "transparent" : frame.backgroundColor;
-  if (up) {
-    row.style.top = "";
-    row.style.marginTop = "";
-    row.style.marginBottom = `${-border("Bottom")}px`;
-    row.style.bottom = row.style.marginBottom;
-  } else {
-    row.style.bottom = "";
-    row.style.marginTop = `${-border("Top")}px`;
-    row.style.marginBottom = overlay ? `${-(height - border("Top"))}px` : "";
-    row.style.top = row.style.marginTop;
-  }
-  row.setAttribute("data-fp-icon-echo", overlay ? "overlay" : "band");
-  if (group) {
-    row.style.height = `${group.height}px`;
-    if (!up && overlay) row.style.marginBottom = `${-(group.height - border("Top"))}px`;
-  }
-  row.style.marginLeft = `${-border("Left")}px`;
-  row.style.marginRight = `${-border("Right")}px`;
-  box.style.width = `${width}px`;
-  box.style.height = `${height}px`;
-  box.style.marginLeft = rtl ? "" : `${offset}px`;
-  box.style.marginRight = rtl ? `${offset}px` : "";
-  box.style.alignSelf = "flex-start";
-  box.style.marginTop = group ? `${group.top}px` : "";
-  box.style.position = "relative";
-  box.style.zIndex = "1";
-}
-
 /** The box that lays an element out, past any `display: contents` wrappers. */
 function layoutParentOf(element: HTMLElement | null): HTMLElement | null {
   let parent = element?.parentElement ?? null;
@@ -815,11 +728,11 @@ function FloatingPanelSheet({
       >
         <Sheet.Overlay
           {...transitionProps(scrimMotion)}
-          backgroundColor="$shadow6"
+          backgroundColor={overlayScrim}
           enterStyle={{ opacity: 0 }}
           exitStyle={{ opacity: 0 }}
         />
-        <Sheet.Handle />
+        <Sheet.Handle {...sheetGrabber} aria-label="Resize" />
         <Sheet.Frame
           data-testid="floating-panel-sheet"
           // Sheet.Frame forwards its ref at runtime; the styled prop type
@@ -829,19 +742,32 @@ function FloatingPanelSheet({
           {...knobProps.elevatedSurface}
           borderBottomLeftRadius={0}
           borderBottomRightRadius={0}
+          // A sheet spans the screen: only its top edge meets the page, so the
+          // sides and bottom draw no border beside a full-width row (FZ-8557).
+          borderLeftWidth={0}
+          borderRightWidth={0}
+          borderBottomWidth={0}
           {...panelChromeFocus}
           padding={framePadding}
+          {...(contentPadding === "none" ? { paddingTop: sheetGrabberClearance } : null)}
           gap={frameGap}
         >
           <OverlayStackProvider zIndex={sheetZIndex}>
-            {header}
-            {scrollable ? (
-              <Sheet.ScrollView flex={header ? 1 : undefined} {...scrollViewProps}>
-                {children}
-              </Sheet.ScrollView>
-            ) : (
-              children
-            )}
+            <PanelSheetContext.Provider value>
+              {header}
+              {scrollable ? (
+                <Sheet.ScrollView flex={header ? 1 : undefined} {...scrollViewProps}>
+                  {children}
+                </Sheet.ScrollView>
+              ) : (
+                children
+              )}
+              {contentPadding === "none" ? (
+                // An edge-to-edge list clears the home indicator (HIG); a padded
+                // frame's own padding already does.
+                <View style={{ height: "env(safe-area-inset-bottom)" }} flexShrink={0} />
+              ) : null}
+            </PanelSheetContext.Provider>
           </OverlayStackProvider>
         </Sheet.Frame>
       </Sheet>
@@ -867,7 +793,7 @@ function FloatingPanelWeb({
   cover = true,
   triggerEcho = true,
   coverAlign = "start",
-  iconEcho,
+  iconCover,
   triggerRow,
   anchorRect,
   clampCollisions = false,
@@ -880,10 +806,8 @@ function FloatingPanelWeb({
   // A context menu anchored on its trigger (a bar button's long-press menu)
   // covers the trigger like any other menu; only a free one opens at the point.
   const pointMenu = isContextMenu && sheetProps.anchorMode !== "cover-trigger";
-  const showIconEcho = cover && !pointMenu && iconEcho != null;
-  const triggerSurface = SurfaceContext.useStyledContext();
-  const iconEchoUpRef = useRef(false);
-  const [echoBox, setEchoBox] = useState<PanelIconEchoBox | null>(null);
+  const coversIcon = cover && !pointMenu && iconCover === true;
+  const openedUpRef = useRef(false);
   const overlayStyleRef = useRef<{ top: number; left?: number; maxHeight: number } | null>(null);
   const pinnedTopRef = useRef(0);
   const pinnedHeightRef = useRef(0);
@@ -996,11 +920,10 @@ function FloatingPanelWeb({
       const viewportBottom = viewportTop + (viewport?.height ?? window.innerHeight);
       dropdownElement.style.left = `${viewportLeft - containingBlock.left}px`;
       // LC-112 (FZ-8480 Round 37): a grouped icon trigger's surface is the
-      // group's plate, so the panel covers the whole plate; only the pressed
-      // trigger shows, as its X.
-      const groupSurface = showIconEcho ? groupSurfaceOf(trig) : null;
+      // group's plate, so the panel covers the whole plate.
+      const groupSurface = coversIcon ? groupSurfaceOf(trig) : null;
       const groupBox = groupSurface?.getBoundingClientRect() ?? null;
-      if (showIconEcho) dropdownElement.style.minWidth = groupBox ? `${groupBox.width}px` : "";
+      if (coversIcon) dropdownElement.style.minWidth = groupBox ? `${groupBox.width}px` : "";
       const layoutStyle = getComputedStyle(dropdownElement);
       const scale =
         layoutStyle.transform &&
@@ -1069,7 +992,7 @@ function FloatingPanelWeb({
         : totalContentHeight;
       // LC-112 (FZ-8480): an icon trigger's panel covers the surface the
       // trigger is seen on: its capsule, else its press target.
-      const painted = showIconEcho ? paintedTriggerBox(trig, measured) : null;
+      const painted = coversIcon ? paintedTriggerBox(trig, measured) : null;
       const coverRect = painted
         ? iconCoverRect(
             {
@@ -1088,20 +1011,14 @@ function FloatingPanelWeb({
               : null,
           )
         : null;
-      const echoCover = coverRect
-        ? echoInCover(
-            { x: measured.left, y: measured.top, width: measured.width, height: measured.height },
-            coverRect,
-          )
-        : null;
       let placedTop = measured.top;
       let placedLeft = left;
       let placedMaxHeight: number | null = null;
-      iconEchoUpRef.current = false;
+      openedUpRef.current = false;
       if (coverRect && measured.width > 0 && measured.height > 0) {
-        // LC-112 (FZ-8480): the button is drawn again in its own spot, so the
-        // panel stays on it: down from its top edge, or up from its bottom.
-        // It covers the button's plate and press box where they reach past it.
+        // LC-112 (FZ-8480): the panel stays on its button: down from its top
+        // edge, or up from its bottom. It covers the button's plate and press
+        // box where they reach past it.
         const placed = placeOverTrigger({
           trigger: coverRect,
           width,
@@ -1120,7 +1037,7 @@ function FloatingPanelWeb({
         if (!slides) placedLeft = placed.left;
         alignEnd = placed.end;
         placedMaxHeight = placed.maxHeight;
-        iconEchoUpRef.current = placed.up;
+        openedUpRef.current = placed.up;
       } else if (
         measured.width > 0 &&
         measured.height > 0 &&
@@ -1162,33 +1079,9 @@ function FloatingPanelWeb({
         alignEnd = placed.end;
       }
       coverAlignEndRef.current = alignEnd;
-      const echoStart = echoOffset({
-        triggerLeft: measured.left,
-        triggerRight: measured.right,
-        panelLeft: placedLeft,
-        panelWidth: width,
-        rtl,
-      });
-      const echoOverlays = iconEcho != null && iconEchoOverlays(iconEcho, iconEchoUpRef.current);
-      const nextEchoBox =
-        showIconEcho && echoOverlays
-          ? echoHeaderBox({
-              offset: echoStart,
-              width: measured.width,
-              height: echoCover?.height ?? measured.height,
-              panelWidth: width,
-              rtl,
-            })
-          : null;
-      setEchoBox((previous) => (sameEchoBox(previous, nextEchoBox) ? previous : nextEchoBox));
-      placeIconEcho(dropdownElement, {
-        offset: echoStart,
-        width: measured.width,
-        height: measured.height,
-        up: iconEchoUpRef.current,
-        overlay: echoOverlays,
-        group: echoCover,
-      });
+      // A whole-pixel start edge: at a half pixel the rows paint a device
+      // pixel short of the panel's far edge, a gutter of panel fill (FZ-8557).
+      placedLeft = Math.round(placedLeft);
       placeEchoOverTrigger(
         dropdownElement,
         {
@@ -1208,7 +1101,7 @@ function FloatingPanelWeb({
       dropdownElement.style.left = `${cssLeft}px`;
       dropdownElement.style.maxHeight = `${maxHeight}px`;
       dropdownElement.dir = rtl ? "rtl" : "ltr";
-      dropdownElement.style.transformOrigin = `${iconEchoUpRef.current ? "bottom" : "top"} ${rtl !== alignEnd ? "right" : "left"}`;
+      dropdownElement.style.transformOrigin = `${openedUpRef.current ? "bottom" : "top"} ${rtl !== alignEnd ? "right" : "left"}`;
       dropdownElement.style.visibility = "visible";
       overlayStyleRef.current = { top, left: cssLeft, maxHeight };
       panel.initializingRef.current = false;
@@ -1369,7 +1262,7 @@ function FloatingPanelWeb({
     isFill,
     isContextMenu,
     pointMenu,
-    showIconEcho,
+    coversIcon,
     cover,
     anchorRect,
     clampCollisions,
@@ -1644,7 +1537,7 @@ function FloatingPanelWeb({
                   transition: webTransition,
                   transformOrigin:
                     cover && !pointMenu
-                      ? `${iconEchoUpRef.current ? "bottom" : "top"} ${
+                      ? `${openedUpRef.current ? "bottom" : "top"} ${
                           isRtl(panel.triggerRef.current) !== coverAlignEndRef.current
                             ? "right"
                             : "left"
@@ -1680,7 +1573,7 @@ function FloatingPanelWeb({
               paddingVertical={0}
               paddingBottom={panel.coverCornerInset || 0}
             >
-              {pointMenu || !cover || !triggerEcho || showIconEcho ? null : (
+              {pointMenu || !cover || !triggerEcho || coversIcon ? null : (
                 <TriggerEchoRow
                   sourceRef={panel.triggerRef}
                   source={trigger}
@@ -1701,11 +1594,7 @@ function FloatingPanelWeb({
                 {...(contentPadding !== "none" ? panel.knobProps.panelPadding : undefined)}
                 {...(contentPadding !== "none" ? panel.knobProps.gapLg : undefined)}
               >
-                <OverlayStackProvider zIndex={panelZIndex}>
-                  <PanelIconEchoBoxContext.Provider value={echoBox}>
-                    {children}
-                  </PanelIconEchoBoxContext.Provider>
-                </OverlayStackProvider>
+                <OverlayStackProvider zIndex={panelZIndex}>{children}</OverlayStackProvider>
               </View>
               <ScrollArrow
                 direction="down"
@@ -1713,11 +1602,6 @@ function FloatingPanelWeb({
                 visible={panel.arrowDown}
                 arrowScrollDirRef={panel.arrowScrollDirRef}
               />
-              {showIconEcho && iconEcho ? (
-                <IconEchoRow>
-                  {iconEchoElement(trigger, iconEcho, () => onOpenChange(false), triggerSurface)}
-                </IconEchoRow>
-              ) : null}
             </YStack>
           </Theme>
         </PanelPortal>

package/src/FloatingPanel/pointAnchor.spec.ts

@@ -277,7 +277,7 @@ describe("placeOverTrigger (FZ-7830, LC-112 where no sheet may take it)", () =>
   });
 });
 
-describe("placeOverTrigger pinned: an echoed icon trigger stays in its spot (LC-112, FZ-8480)", () => {
+describe("placeOverTrigger pinned: a panel stays on its icon trigger (LC-112, FZ-8480)", () => {
   const phone: PanelBounds = { top: 57, left: 10, right: 380, bottom: 800 };
 
   it("opens down from the button's top edge where the menu fits", () => {

package/src/FloatingPanel/pointAnchor.ts

@@ -169,10 +169,10 @@ export function placeOverTrigger({
    */
   align?: "start" | "auto";
   /**
-   * The menu echoes its icon trigger in the button's own spot (LC-112,
-   * FZ-8480), so it never slides off the button vertically: it opens down
-   * from the button's top edge, or up from its bottom edge where there is
-   * more room above, and scrolls what still does not fit.
+   * The menu covers its icon trigger (LC-112, FZ-8480), so it never slides
+   * off the button vertically: it opens down from the button's top edge, or
+   * up from its bottom edge where there is more room above, and scrolls what
+   * still does not fit.
    */
   pinned?: boolean;
 }): TriggerPlacement {

package/src/FloatingPanel/sheetGrabber.spec.tsx

@@ -0,0 +1,53 @@
+/**
+ * FZ-8648: one grabber. A FloatingPanel's phone sheet draws the theme's
+ * `sheetGrabber` on the web and on native, with nothing local on top, so it
+ * can't drift from SheetModal's (whose spec holds it to the same recipe).
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { sheetGrabber } from "@multiplatform.one/theme";
+import { describe, expect, it, vi } from "vitest";
+import { Text, View } from "tamagui";
+import { FloatingPanel as NativePanel } from "./index.native";
+import { FloatingPanel } from "./index";
+
+vi.mock("react-native-web", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-native")>()),
+  ActionSheetIOS: undefined,
+  Modal: ({ children }: { children: import("react").ReactNode }) => children,
+  useWindowDimensions: () => ({ width: 390, height: 844, scale: 3, fontScale: 1 }),
+}));
+
+const atoms = (node: Element) => String(node.className).split(/\s+/).filter(Boolean);
+
+function recipeAtoms() {
+  const view = renderWithProviders(<View testID="recipe" {...sheetGrabber} />);
+  const list = atoms(view.getByTestId("recipe"));
+  view.unmount();
+  return list;
+}
+
+describe("FloatingPanel sheet grabber (FZ-8648)", () => {
+  it("draws the recipe in the native sheet", () => {
+    const recipe = recipeAtoms();
+    const result = renderWithProviders(
+      <NativePanel open onOpenChange={() => {}} trigger={<Text>Open</Text>}>
+        <Text>Row</Text>
+      </NativePanel>,
+    );
+    const capsule = result.getByTestId("floating-panel-grabber").firstElementChild as Element;
+    expect(atoms(capsule)).toEqual(expect.arrayContaining(recipe));
+  });
+
+  it("draws the recipe in the web sheet, with no transform", async () => {
+    const recipe = recipeAtoms();
+    const result = renderWithProviders(
+      <FloatingPanel open sheet onOpenChange={() => {}} trigger={<Text>Open</Text>}>
+        <Text>Row</Text>
+      </FloatingPanel>,
+    );
+    await result.findByTestId("floating-panel-sheet");
+    const handle = result.getByLabelText("Resize");
+    expect(atoms(handle)).toEqual(expect.arrayContaining(recipe));
+    expect(handle.getAttribute("style") ?? "").not.toMatch(/transform/);
+  });
+});

package/src/fields/Combobox/index.tsx

@@ -1,4 +1,5 @@
 import { useTouchSurface } from "@multiplatform.one/theme";
+import { CheckGlyph } from "../../shared/CheckGlyph";
 import type { ReactNode } from "react";
 import {
   Fragment,
@@ -11,13 +12,7 @@ import {
   memo,
 } from "react";
 import { useTranslation } from "../../shared/i18n";
-import {
-  CaretDownIcon,
-  CheckIcon,
-  MagnifyingGlassIcon,
-  PlusIcon,
-  XIcon,
-} from "@phosphor-icons/react";
+import { CaretDownIcon, MagnifyingGlassIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
 import {
   useClick,
   useDismiss,
@@ -427,7 +422,7 @@ const ComboboxItem = memo(function ComboboxItem({
           {option.label}
         </Text>
       )}
-      {isSelected && <CheckIcon size={14} weight="bold" color={ctx.markColor} />}
+      {isSelected && <CheckGlyph />}
     </ComboboxRow>
   );
 });
@@ -2237,7 +2232,7 @@ function NativeComboboxCore({
                     {option.label}
                   </Text>
                 )}
-                {selected && <CheckIcon size={14} weight="bold" color={markColor} />}
+                {selected && <CheckGlyph />}
               </View>
             );
             return (

package/src/fields/Select/InlineChoices.tsx

@@ -1,5 +1,5 @@
 import { hairline, IconSlot, keyboardFocusRingProps } from "@multiplatform.one/theme";
-import { CheckIcon } from "@phosphor-icons/react";
+import { CheckGlyph } from "../../shared/CheckGlyph";
 import { useRef, type KeyboardEvent, type ReactNode } from "react";
 import { Pressable } from "react-native";
 import { isWeb, Text, View, XStack, YStack } from "tamagui";
@@ -100,7 +100,7 @@ export function InlineChoices({
       >
         {option.label}
       </Text>
-      {selected ? <CheckIcon size={14} weight="bold" color={markColor} /> : null}
+      {selected ? <CheckGlyph /> : null}
     </XStack>
   );