@multiplatform.one/forms 7.71.0 → 7.73.0

package/src/FloatingPanel/paintedBox.spec.ts

@@ -0,0 +1,95 @@
+/**
+ * LC-112 (FZ-8480): a panel covering an icon trigger covers the button as it
+ * is drawn. The 1440 + hung 6px past its layout slot on its press slop, and
+ * the 390 + sat in a lone glass capsule 6px wider on each side; both left a
+ * sliver of the button showing beside the panel.
+ */
+import { afterEach, describe, expect, it } from "vitest";
+import { PAINTED_BOX_REACH, paintedTriggerBox } from "./paintedBox";
+
+type Rect = [left: number, top: number, width: number, height: number];
+
+function el(rect: Rect | null, children: HTMLElement[] = [], style = "") {
+  const node = document.createElement("div");
+  if (style) node.setAttribute("style", style);
+  for (const child of children) node.appendChild(child);
+  const [left, top, width, height] = rect ?? [0, 0, 0, 0];
+  node.getBoundingClientRect = () =>
+    ({
+      left,
+      top,
+      width,
+      height,
+      x: left,
+      y: top,
+      right: left + width,
+      bottom: top + height,
+      toJSON: () => ({}),
+    }) as DOMRect;
+  return node;
+}
+
+const box = ([left, top, width, height]: Rect) => ({
+  left,
+  top,
+  right: left + width,
+  bottom: top + height,
+});
+
+afterEach(() => {
+  document.body.replaceChildren();
+});
+
+describe("paintedTriggerBox (FZ-8480)", () => {
+  it("takes in a bare glyph's press box that hangs past its layout slot", () => {
+    const button = el([1302.5, 61, 40, 40]);
+    const reference = el([1302.5, 61, 34, 40], [el(null, [button], "display: contents")]);
+    document.body.appendChild(el([1302.5, 61, 34, 40], [reference]));
+    expect(paintedTriggerBox(reference, box([1302.5, 61, 34, 40]))).toEqual(
+      box([1302.5, 61, 40, 40]),
+    );
+  });
+
+  it("takes in a lone button's plate, ignoring the plate's absolute face", () => {
+    const reference = el([324, 61, 44, 44]);
+    const face = el([318, 61, 56, 44], [], "position: absolute");
+    const capsule = el([318, 61, 56, 44], [face, reference]);
+    const row = el([16, 61, 358, 44], [el([16, 61, 200, 44]), capsule]);
+    document.body.appendChild(row);
+    expect(paintedTriggerBox(reference, box([324, 61, 44, 44]))).toEqual(box([318, 61, 56, 44]));
+  });
+
+  it("stops at a wrapper shared with other content", () => {
+    const reference = el([290, 0, 44, 44]);
+    const pill = el([214, 0, 160, 44], [el([220, 0, 44, 44]), reference]);
+    document.body.appendChild(pill);
+    expect(paintedTriggerBox(reference, box([290, 0, 44, 44]))).toEqual(box([290, 0, 44, 44]));
+  });
+
+  it("reads a DOMRect layout box, whose sides are prototype getters", () => {
+    const reference = el([324, 61, 44, 44]);
+    document.body.appendChild(el([16, 61, 358, 44], [el([16, 61, 200, 44]), reference]));
+    class Getters {
+      get left() {
+        return 324;
+      }
+      get top() {
+        return 61;
+      }
+      get right() {
+        return 368;
+      }
+      get bottom() {
+        return 105;
+      }
+    }
+    const layout = new Getters();
+    expect(paintedTriggerBox(reference, layout)).toEqual(box([324, 61, 44, 44]));
+  });
+
+  it(`never reaches more than ${PAINTED_BOX_REACH}px past the trigger`, () => {
+    const reference = el([324, 61, 44, 44]);
+    document.body.appendChild(el([0, 61, 390, 44], [reference]));
+    expect(paintedTriggerBox(reference, box([324, 61, 44, 44]))).toEqual(box([324, 61, 44, 44]));
+  });
+});

package/src/FloatingPanel/paintedBox.ts

@@ -0,0 +1,75 @@
+export type Box = { left: number; top: number; right: number; bottom: number };
+
+/** How far a trigger's plate or press box may reach past its layout box. */
+export const PAINTED_BOX_REACH = 12;
+
+function inFlowChildren(element: Element): Element[] {
+  return Array.from(element.children).filter((child) => {
+    const style = getComputedStyle(child);
+    return style.display !== "none" && style.position !== "absolute" && style.position !== "fixed";
+  });
+}
+
+/**
+ * The box an icon trigger is seen in, which a panel covering it has to cover
+ * (LC-112, FZ-8480). A bare glyph's press box can hang past its layout slot
+ * (the trailing press slop), and a lone button's plate can be a wrapper that
+ * holds nothing else (an iOS glass capsule). Both count, up to
+ * {@link PAINTED_BOX_REACH} on any side; a wrapper shared with other content
+ * ends the walk.
+ */
+export function paintedTriggerBox(reference: Element, layout: Box): Box {
+  // A DOMRect's sides are prototype getters, so spreading it copies nothing.
+  const box = { left: layout.left, top: layout.top, right: layout.right, bottom: layout.bottom };
+  const take = (rect: DOMRect) => {
+    if (rect.width <= 0 || rect.height <= 0) return true;
+    const next = {
+      left: Math.min(box.left, rect.left),
+      top: Math.min(box.top, rect.top),
+      right: Math.max(box.right, rect.right),
+      bottom: Math.max(box.bottom, rect.bottom),
+    };
+    if (
+      layout.left - next.left > PAINTED_BOX_REACH ||
+      layout.top - next.top > PAINTED_BOX_REACH ||
+      next.right - layout.right > PAINTED_BOX_REACH ||
+      next.bottom - layout.bottom > PAINTED_BOX_REACH
+    ) {
+      return false;
+    }
+    Object.assign(box, next);
+    return true;
+  };
+  let inner: Element | null = reference;
+  while (inner) {
+    const children = inFlowChildren(inner);
+    if (children.length !== 1) break;
+    inner = children[0]!;
+    if (!take(inner.getBoundingClientRect())) break;
+  }
+  let outer: Element | null = reference.parentElement;
+  let child: Element = reference;
+  while (outer && outer.tagName !== "BODY") {
+    const children = inFlowChildren(outer);
+    if (children.length !== 1 || children[0] !== child) break;
+    if (!take(outer.getBoundingClientRect())) break;
+    child = outer;
+    outer = outer.parentElement;
+  }
+  return box;
+}
+
+/**
+ * A plate several buttons share (an iOS glass capsule around a bar's group).
+ * `data-fp-cover-surface` marks one explicitly.
+ */
+export const GROUP_SURFACE_SELECTOR = "[data-fp-cover-surface], [data-mp-glass-capsule]";
+
+/**
+ * The shared plate an icon trigger sits on, when it sits in a group (LC-112,
+ * FZ-8480 r37): the trigger's surface is the plate under it, so a panel
+ * opening from a grouped button covers the whole group.
+ */
+export function groupSurfaceOf(reference: Element): HTMLElement | null {
+  return reference.parentElement?.closest<HTMLElement>(GROUP_SURFACE_SELECTOR) ?? null;
+}

package/src/FloatingPanel/panelWidth.spec.ts

@@ -0,0 +1,158 @@
+/**
+ * LC-112 width setting (FZ-8438 r3, Clay on the desktop Date shot): "it can
+ * collapse to the content, it can be the full width of the initial input
+ * button, or it can open up to be the full width of the screen, or it can be
+ * a fixed size that it opens to."
+ */
+import { describe, expect, it } from "vitest";
+import { MENU_MIN_WIDTH } from "./compactFace";
+import {
+  echoOffset,
+  panelLeftForWidth,
+  panelWidthBox,
+  screenBounds,
+  slidesAlongScreen,
+} from "./panelWidth";
+
+describe("panelWidthBox", () => {
+  it('"content" floors at an echoed trigger and leaves the width to its rows', () => {
+    expect(panelWidthBox("content", { trigger: 240, available: 1000, echo: true })).toEqual({
+      minWidth: 240,
+      maxWidth: 1000,
+    });
+  });
+
+  it('"content" without an echo has no trigger floor', () => {
+    expect(panelWidthBox("content", { trigger: 44, available: 1000, echo: false }).minWidth).toBe(
+      0,
+    );
+  });
+
+  it('"content" keeps a platform floor (the native 250pt pull-down)', () => {
+    expect(
+      panelWidthBox("content", { trigger: 44, available: 370, echo: false, floor: MENU_MIN_WIDTH })
+        .minWidth,
+    ).toBe(MENU_MIN_WIDTH);
+    expect(
+      panelWidthBox("content", { trigger: 44, available: 220, echo: false, floor: MENU_MIN_WIDTH })
+        .minWidth,
+    ).toBe(220);
+  });
+
+  it('"trigger" pins min, width and max to the trigger', () => {
+    expect(panelWidthBox("trigger", { trigger: 240, available: 1000, echo: true })).toEqual({
+      minWidth: 240,
+      width: 240,
+      maxWidth: 240,
+    });
+  });
+
+  it('"screen" pins the box to the room between the margins', () => {
+    expect(panelWidthBox("screen", { trigger: 240, available: 370, echo: true })).toEqual({
+      minWidth: 370,
+      width: 370,
+      maxWidth: 370,
+    });
+  });
+
+  it("a number is that width, capped at the room", () => {
+    expect(panelWidthBox(320, { trigger: 240, available: 1000, echo: true }).width).toBe(320);
+    expect(panelWidthBox(180, { trigger: 240, available: 1000, echo: true }).width).toBe(180);
+    expect(panelWidthBox(600, { trigger: 240, available: 370, echo: true }).width).toBe(370);
+    expect(panelWidthBox(-5, { trigger: 240, available: 370, echo: true }).width).toBe(0);
+  });
+});
+
+describe("panelLeftForWidth", () => {
+  const bounds = { boundsLeft: 10, boundsRight: 1430 };
+
+  it("keeps the trigger's start edge while the panel fits", () => {
+    expect(panelLeftForWidth({ triggerLeft: 200, triggerRight: 440, width: 320, ...bounds })).toBe(
+      200,
+    );
+  });
+
+  it("slides back inside the end margin", () => {
+    expect(
+      panelLeftForWidth({ triggerLeft: 1300, triggerRight: 1420, width: 320, ...bounds }),
+    ).toBe(1110);
+  });
+
+  it("a screen-wide panel sits on the start margin", () => {
+    expect(panelLeftForWidth({ triggerLeft: 200, triggerRight: 440, width: 1420, ...bounds })).toBe(
+      10,
+    );
+  });
+
+  it("right to left keeps the trigger's right edge", () => {
+    expect(
+      panelLeftForWidth({
+        triggerLeft: 1000,
+        triggerRight: 1240,
+        width: 320,
+        rtl: true,
+        ...bounds,
+      }),
+    ).toBe(920);
+  });
+});
+
+describe("echoOffset", () => {
+  it("is the trigger's distance from the panel's start edge", () => {
+    expect(
+      echoOffset({ triggerLeft: 200, triggerRight: 440, panelLeft: 10, panelWidth: 1420 }),
+    ).toBe(190);
+    expect(
+      echoOffset({ triggerLeft: 200, triggerRight: 440, panelLeft: 200, panelWidth: 320 }),
+    ).toBe(0);
+  });
+
+  it("measures from the right edge in right to left", () => {
+    expect(
+      echoOffset({
+        triggerLeft: 1000,
+        triggerRight: 1240,
+        panelLeft: 10,
+        panelWidth: 1420,
+        rtl: true,
+      }),
+    ).toBe(190);
+  });
+});
+
+describe("slidesAlongScreen", () => {
+  it("is true only for the widths not tied to the trigger's start edge", () => {
+    expect(slidesAlongScreen("screen")).toBe(true);
+    expect(slidesAlongScreen(320)).toBe(true);
+    expect(slidesAlongScreen("content")).toBe(false);
+    expect(slidesAlongScreen("trigger")).toBe(false);
+    expect(slidesAlongScreen(undefined)).toBe(false);
+  });
+});
+
+describe("screenBounds", () => {
+  const bounds = { boundsLeft: 10, boundsRight: 1430 };
+
+  it("a trigger in the page gutter lends its inset to both sides", () => {
+    // Field at the 16pt gutter, margins at 10: the panel spans 16..1424, so
+    // its start edge is the trigger's and the rows line up under the echo.
+    expect(screenBounds({ triggerLeft: 16, triggerRight: 276, ...bounds })).toEqual({
+      left: 16,
+      right: 1424,
+    });
+  });
+
+  it("a trigger deep in the page keeps the safe margins", () => {
+    expect(screenBounds({ triggerLeft: 600, triggerRight: 860, ...bounds })).toEqual({
+      left: 10,
+      right: 1430,
+    });
+  });
+
+  it("right to left measures the gutter from the right edge", () => {
+    expect(screenBounds({ triggerLeft: 1164, triggerRight: 1414, rtl: true, ...bounds })).toEqual({
+      left: 26,
+      right: 1414,
+    });
+  });
+});

package/src/FloatingPanel/panelWidth.ts

@@ -0,0 +1,122 @@
+/**
+ * How wide a panel opens over its trigger (LC-112, FZ-8438 r3). One setting
+ * for every picker and menu, on the web and native:
+ *
+ * - `"content"`: the panel hugs its content. While it echoes its trigger it
+ *   is never narrower than the trigger, so the echo keeps its box.
+ * - `"trigger"`: exactly the trigger's width. Content wraps or scrolls.
+ * - `"screen"`: the room between the screen's safe margins. The top edge
+ *   still sits on the trigger's top edge.
+ * - a number: that many points, capped at the room between the margins.
+ */
+export type PanelWidth = "content" | "trigger" | "screen" | number;
+
+export interface PanelWidthBox {
+  minWidth: number;
+  /** Set for every mode but `"content"`, which leaves the width to its rows. */
+  width?: number;
+  maxWidth: number;
+}
+
+export function panelWidthBox(
+  panelWidth: PanelWidth,
+  {
+    trigger,
+    available,
+    echo,
+    floor = 0,
+  }: {
+    /** The trigger's width. */
+    trigger: number;
+    /** The room between the screen's safe margins. */
+    available: number;
+    /** The panel's first row repeats the trigger. */
+    echo: boolean;
+    /** A platform minimum for `"content"` (the native pull-down's 250pt). */
+    floor?: number;
+  },
+): PanelWidthBox {
+  const room = Math.max(0, available);
+  const pinned = (width: number) => {
+    const w = Math.max(0, Math.min(width, room));
+    return { minWidth: w, width: w, maxWidth: w };
+  };
+  if (panelWidth === "trigger") return pinned(trigger);
+  if (panelWidth === "screen") return pinned(room);
+  if (typeof panelWidth === "number") return pinned(panelWidth);
+  return { minWidth: Math.min(Math.max(echo ? trigger : 0, floor), room), maxWidth: room };
+}
+
+/**
+ * A panel whose width is not tied to its trigger's box (`"screen"`, or a fixed
+ * width wider than the room from the trigger's start edge) slides along the
+ * screen to stay inside the margins. Its echo row is moved back over the
+ * trigger by the returned offset, so the trigger's content stays in place.
+ */
+export function panelLeftForWidth({
+  triggerLeft,
+  triggerRight,
+  width,
+  boundsLeft,
+  boundsRight,
+  rtl = false,
+}: {
+  triggerLeft: number;
+  triggerRight: number;
+  width: number;
+  boundsLeft: number;
+  boundsRight: number;
+  rtl?: boolean;
+}): number {
+  const want = rtl ? triggerRight - width : triggerLeft;
+  return Math.max(boundsLeft, Math.min(want, boundsRight - width));
+}
+
+/** How far the echo row moves from the panel's start edge to sit on its trigger. */
+export function echoOffset({
+  triggerLeft,
+  triggerRight,
+  panelLeft,
+  panelWidth,
+  rtl = false,
+}: {
+  triggerLeft: number;
+  triggerRight: number;
+  panelLeft: number;
+  panelWidth: number;
+  rtl?: boolean;
+}): number {
+  return rtl ? panelLeft + panelWidth - triggerRight : triggerLeft - panelLeft;
+}
+
+/** True for the widths that are not tied to the trigger's start edge. */
+export function slidesAlongScreen(panelWidth: PanelWidth | undefined): boolean {
+  return panelWidth === "screen" || typeof panelWidth === "number";
+}
+
+/**
+ * The bounds a `"screen"` panel spans. A trigger that sits in the page's start
+ * gutter, up to `gutter` points inside the safe margins, lends that inset to
+ * both sides, so the panel's start edge stays on the trigger's start edge and
+ * the rows line up under the echo. A trigger deeper in the page gets the safe
+ * margins as they are.
+ */
+export function screenBounds({
+  triggerLeft,
+  triggerRight,
+  boundsLeft,
+  boundsRight,
+  rtl = false,
+  gutter = 32,
+}: {
+  triggerLeft: number;
+  triggerRight: number;
+  boundsLeft: number;
+  boundsRight: number;
+  rtl?: boolean;
+  gutter?: number;
+}): { left: number; right: number } {
+  const inset = rtl ? boundsRight - triggerRight : triggerLeft - boundsLeft;
+  const margin = inset > 0 && inset <= gutter ? inset : 0;
+  return { left: boundsLeft + margin, right: boundsRight - margin };
+}

package/src/FloatingPanel/panelWidthContract.spec.ts

@@ -7,9 +7,10 @@
  * DatePicker measured 262px of calendar under a 289px trigger purely because
  * the call site said `fitContent`.
  *
- * Calendar grids take fit-content (MPO-262): a full-width field wrapper is
- * unrelated to seven day columns and must not create a mostly empty popup.
- * Text listboxes retain at-least-trigger; icon/button launchers may also hug.
+ * Calendar grids opened from a field are the field grown open (LC-112
+ * seamless cover, FZ-8438): at least the field's width, superseding MPO-262's
+ * fit-content. Text listboxes retain at-least-trigger; icon/button launchers
+ * may hug.
  * The Icon glyph grid pins to its field exactly (match-trigger): fixed 64px
  * cells wrap into more columns on a wider field instead of stretching.
  */
@@ -21,13 +22,16 @@ import { describe, expect, it } from "vitest";
 const fieldsDir = resolve(dirname(fileURLToPath(import.meta.url)), "..", "fields");
 
 /** Pickers whose trigger is a form FIELD: the panel may never be narrower. */
-const fieldShapedPickers = ["TimePicker/catalog.tsx", "ColorPicker/parts.tsx"];
+const fieldShapedPickers = [
+  "TimePicker/catalog.tsx",
+  "ColorPicker/parts.tsx",
+  "DatePicker/parts.tsx",
+  "DatePicker/DatetimePicker.catalog.tsx",
+];
 
 /** Field-triggered pickers pinned to the field's width exactly. */
 const matchTriggerPickers = ["Icon/index.tsx"];
 
-const intrinsicGridPickers = ["DatePicker/parts.tsx", "DatePicker/DatetimePicker.catalog.tsx"];
-
 /** Panels opened from an icon/button trigger, where fit-content is correct. */
 const buttonShapedPickers = ["Geolocation/index.tsx"];
 
@@ -36,10 +40,6 @@ function read(relative: string): string {
 }
 
 describe("FloatingPanel width contract (MPO-38, MPO-262)", () => {
-  it.each(intrinsicGridPickers)("%s hugs its calendar grid", (relative) => {
-    expect(read(relative)).toContain('widthMode="fit-content"');
-  });
-
   it.each(fieldShapedPickers)("%s declares at-least-trigger", (relative) => {
     const source = read(relative);
     expect(source).toContain('widthMode="at-least-trigger"');

package/src/FloatingPanel/pointAnchor.spec.ts

@@ -154,7 +154,15 @@ describe("placeOverTrigger (FZ-7830, LC-112 where no sheet may take it)", () =>
       height: 180,
       bounds: phone,
     });
-    expect(placed).toEqual({ left: 20, top: 200, width: 200, maxHeight: 600, shifted: false });
+    expect(placed).toEqual({
+      left: 20,
+      top: 200,
+      width: 200,
+      maxHeight: 600,
+      shifted: false,
+      end: false,
+      up: false,
+    });
   });
 
   it("is at least the trigger's width", () => {
@@ -209,6 +217,54 @@ describe("placeOverTrigger (FZ-7830, LC-112 where no sheet may take it)", () =>
     expect(placed.maxHeight).toBe(743);
   });
 
+  it("opens an icon menu from the trigger's top trailing corner at the end edge (FZ-8438)", () => {
+    const placed = placeOverTrigger({
+      trigger,
+      width: 200,
+      height: 180,
+      bounds: phone,
+      align: "auto",
+    });
+    expect(placed).toMatchObject({ left: 144, top: 200, end: true, shifted: false });
+  });
+
+  it("keeps a bar button's corner inside the viewport margin (FZ-8438)", () => {
+    const placed = placeOverTrigger({
+      trigger: { x: 342, y: 60, width: 44, height: 44 },
+      width: 250,
+      height: 180,
+      bounds: phone,
+      align: "auto",
+    });
+    expect(placed.left).toBe(342 + 44 - 250);
+    expect(placed.end).toBe(true);
+    expect(placed.shifted).toBe(false);
+  });
+
+  it("mirrors the icon menu in RTL: a leading-edge button opens from its left corner (FZ-8438)", () => {
+    const placed = placeOverTrigger({
+      trigger: { x: 4, y: 60, width: 44, height: 44 },
+      width: 250,
+      height: 180,
+      bounds: phone,
+      rtl: true,
+      align: "auto",
+    });
+    expect(placed.left).toBe(4);
+    expect(placed.end).toBe(true);
+  });
+
+  it("keeps the start corner for an icon menu that fits (FZ-8438)", () => {
+    const placed = placeOverTrigger({
+      trigger: { x: 20, y: 200, width: 44, height: 44 },
+      width: 200,
+      height: 180,
+      bounds: phone,
+      align: "auto",
+    });
+    expect(placed).toMatchObject({ left: 20, end: false, shifted: false });
+  });
+
   it("never grows wider than the bounds", () => {
     const placed = placeOverTrigger({
       trigger: { x: 20, y: 200, width: 120, height: 44 },
@@ -221,13 +277,66 @@ 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)", () => {
+  const phone: PanelBounds = { top: 57, left: 10, right: 380, bottom: 800 };
+
+  it("opens down from the button's top edge where the menu fits", () => {
+    const button = { x: 326, y: 60, width: 44, height: 44 };
+    const placed = placeOverTrigger({
+      trigger: button,
+      width: 250,
+      height: 300,
+      bounds: phone,
+      align: "auto",
+      pinned: true,
+    });
+    expect(placed).toMatchObject({ top: 60, left: 120, end: true, up: false, maxHeight: 740 });
+  });
+
+  it("opens up from the button's bottom edge near the bottom, never sliding off the button", () => {
+    const button = { x: 20, y: 740, width: 44, height: 44 };
+    const placed = placeOverTrigger({
+      trigger: button,
+      width: 250,
+      height: 300,
+      bounds: phone,
+      align: "auto",
+      pinned: true,
+    });
+    expect(placed.up).toBe(true);
+    expect(placed.top + 300).toBe(button.y + button.height);
+    expect(placed.maxHeight).toBe(button.y + button.height - phone.top);
+  });
+
+  it("scrolls from the button rather than covering past the margin when neither side fits", () => {
+    const button = { x: 20, y: 400, width: 44, height: 44 };
+    const placed = placeOverTrigger({
+      trigger: button,
+      width: 250,
+      height: 2000,
+      bounds: phone,
+      align: "auto",
+      pinned: true,
+    });
+    expect(placed).toMatchObject({ top: 400, up: false, maxHeight: 400 });
+  });
+});
+
 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 });
+    expect(placed).toEqual({
+      left: 16,
+      top: 344,
+      width: 358,
+      maxHeight: 180,
+      shifted: false,
+      end: false,
+      up: false,
+    });
   });
 
   it("opens above the trigger when there is more room there, its bottom on the trigger's top", () => {