@multiplatform.one/forms 7.71.0 → 7.73.0

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

@@ -1,7 +1,11 @@
 /**
- * FZ-8114 (LC-266): Date, Time and Datetime on a coarse-pointer web viewport
- * hand the pick to the browser's own control, and a fine pointer keeps the
- * MPO calendar. Both paths must commit the same value.
+ * Date, Time and Datetime on touch web. FZ-8114 handed these to the browser's
+ * own popover; FZ-8438 replaces it with MPO's cover panel, because Safari's
+ * popover cannot lie over the field, match its arc or repeat its content
+ * (LC-112 seamless cover, Clay's rv_a07d4308a6c445b6 notes).
+ *
+ * FZ-8114's invariant still holds: a blank tap opens nothing, only the tapped
+ * field opens, and its clear ✕ clears without opening.
  */
 import { formatCalendarDate } from "@multiplatform.one/theme";
 import { useForm } from "@tanstack/react-form";
@@ -13,8 +17,15 @@ import { Form } from "../../Form";
 import { TimePicker } from "../TimePicker";
 import { DatePicker, DatetimePicker } from "./index";
 
-let coarse = false;
 const originalMatchMedia = window.matchMedia;
+const originalWidth = window.innerWidth;
+
+function setWidth(width: number) {
+  Object.defineProperty(window, "innerWidth", { configurable: true, value: width });
+  act(() => {
+    window.dispatchEvent(new Event("resize"));
+  });
+}
 
 beforeEach(() => {
   Object.defineProperty(window, "matchMedia", {
@@ -22,7 +33,7 @@ beforeEach(() => {
     writable: true,
     value: (media: string) => ({
       media,
-      matches: media === "(pointer: coarse)" ? coarse : false,
+      matches: media === "(pointer: coarse)" || media === "(hover: none)",
       onchange: null,
       addEventListener: () => {},
       removeEventListener: () => {},
@@ -31,23 +42,30 @@ beforeEach(() => {
       dispatchEvent: () => false,
     }),
   });
+  setWidth(390);
 });
 
 afterEach(() => {
-  coarse = false;
   Object.defineProperty(window, "matchMedia", {
     configurable: true,
     writable: true,
     value: originalMatchMedia,
   });
+  setWidth(originalWidth);
 });
 
-function touchInput(root: ParentNode, type: string): HTMLInputElement {
-  const input = root.querySelector(`input[type="${type}"]`) as HTMLInputElement | null;
-  expect(input).not.toBeNull();
-  return input as HTMLInputElement;
+/** A finger tap as mobile Safari delivers it: pointer, compat mouse, click. */
+function tap(el: Element) {
+  fireEvent.pointerDown(el, { pointerType: "touch", button: 0 });
+  fireEvent.mouseDown(el, { button: 0, detail: 1 });
+  fireEvent.pointerUp(el, { pointerType: "touch", button: 0 });
+  fireEvent.mouseUp(el, { button: 0, detail: 1 });
+  fireEvent.click(el, { button: 0, detail: 1 });
 }
 
+const panels = () => document.querySelectorAll('[data-testid="floating-panel-viewport"]');
+const sheets = () => document.querySelectorAll('[data-testid="floating-panel-sheet"]');
+
 function dayButton(root: ParentNode, day: string): HTMLElement {
   const match = Array.from(root.querySelectorAll('button, [role="button"]')).find(
     (el) => el.textContent?.trim() === day && el.getAttribute("aria-disabled") !== "true",
@@ -56,100 +74,74 @@ function dayButton(root: ParentNode, day: string): HTMLElement {
   return match as HTMLElement;
 }
 
-describe("Date on touch web (FZ-8114)", () => {
-  it("a coarse pointer renders the browser's date input, labelled by the field", () => {
-    coarse = true;
-    const result = renderWithProviders(<DatePicker label="Due" name="due" />);
-    const input = touchInput(result.container, "date");
-    const label = result.container.querySelector("label");
-    expect(label?.getAttribute("for")).toBe(input.id);
-    expect(result.container.querySelector('[role="combobox"]')).toBeNull();
-  });
+function Page() {
+  return (
+    <>
+      <div data-testid="blank" style={{ height: 200 }} />
+      <DatePicker label="Date" name="date" value={new Date(2026, 2, 5)} />
+      <TimePicker label="Time" name="time" value="14:30" />
+      <DatetimePicker label="Date and time" name="starts" />
+    </>
+  );
+}
 
-  it("a fine pointer keeps the MPO combobox and no date input", () => {
-    const result = renderWithProviders(<DatePicker label="Due" name="due" />);
-    expect(result.container.querySelector('input[type="date"]')).toBeNull();
-    expect(result.container.querySelector('[role="combobox"]')).not.toBeNull();
+describe("touch web opens MPO's cover panel, never the browser's popover (FZ-8438)", () => {
+  it.each([
+    ["date", "date-picker-trigger", <DatePicker key="d" label="Due" name="due" />],
+    ["time", "time-picker-trigger", <TimePicker key="t" label="At" name="at" />],
+    [
+      "date and time",
+      "date-picker-trigger",
+      <DatetimePicker key="dt" label="Starts" name="starts" />,
+    ],
+  ] as const)("a tap on the %s field opens the MPO panel over it", async (_, testId, field) => {
+    const result = renderWithProviders(field);
+    expect(result.container.querySelector("input[type=date], input[type=time]")).toBeNull();
+    expect(result.container.querySelector('input[type="datetime-local"]')).toBeNull();
+    tap(result.getByTestId(testId));
+    await waitFor(() => expect(panels().length).toBe(1));
+    expect(sheets().length).toBe(0);
+    expect(document.querySelector("[data-fp-trigger-row]")).not.toBeNull();
   });
 
-  it("the picked string shows in the MPO box and emits the calendar's Date", async () => {
-    coarse = true;
-    const onChange = vi.fn();
-    const result = renderWithProviders(<DatePicker label="Due" name="due" onChange={onChange} />);
+  it("a blank tap opens nothing", async () => {
+    const result = renderWithProviders(<Page />);
+    tap(result.getByTestId("blank"));
+    tap(document.body);
     await act(async () => {
-      fireEvent.change(touchInput(result.container, "date"), { target: { value: "2026-03-05" } });
+      await new Promise((resolve) => setTimeout(resolve, 50));
     });
-    expect(onChange).toHaveBeenCalledTimes(1);
-    const picked = onChange.mock.calls[0][0] as Date;
-    expect(picked.getTime()).toBe(new Date(2026, 2, 5).getTime());
-    expect(result.container.querySelector('input[value="Mar 5, 2026"]')).not.toBeNull();
-    expect(touchInput(result.container, "date").value).toBe("2026-03-05");
+    expect(panels().length).toBe(0);
+    expect(sheets().length).toBe(0);
   });
 
-  it("both paths commit the same value for the same day", async () => {
-    const fine = vi.fn();
-    const desktop = renderWithProviders(
-      <DatePicker label="Due" name="due" value="2026-03-01" onChange={fine} />,
-    );
-    await act(async () => {
-      fireEvent.click(desktop.container.querySelector('[role="combobox"]') as HTMLElement);
-    });
-    await waitFor(() => dayButton(document.body, "5"));
-    await act(async () => {
-      fireEvent.click(dayButton(document.body, "5"));
-    });
-    desktop.unmount();
-
-    coarse = true;
-    const touch = vi.fn();
-    const phone = renderWithProviders(
-      <DatePicker label="Due" name="due" value="2026-03-01" onChange={touch} />,
-    );
-    expect(touchInput(phone.container, "date").value).toBe("2026-03-01");
-    await act(async () => {
-      fireEvent.change(touchInput(phone.container, "date"), { target: { value: "2026-03-05" } });
-    });
-
-    expect(fine).toHaveBeenCalledTimes(1);
-    expect(touch).toHaveBeenCalledTimes(1);
-    expect((touch.mock.calls[0][0] as Date).getTime()).toBe(
-      (fine.mock.calls[0][0] as Date).getTime(),
-    );
+  it("only the tapped field opens", async () => {
+    const result = renderWithProviders(<Page />);
+    tap(result.getByTestId("time-picker-trigger"));
+    await waitFor(() => expect(panels().length).toBe(1));
+    const panel = panels()[0] as HTMLElement;
+    expect(panel.querySelector('[data-testid="time-picker-panel"]')).not.toBeNull();
+    expect(panel.textContent).not.toContain("March");
   });
 
-  it("clearing in the browser's control clears the field", async () => {
-    coarse = true;
+  it("the clear ✕ clears without opening", async () => {
     const onChange = vi.fn();
     const result = renderWithProviders(
-      <DatePicker label="Due" name="due" value="2026-03-05" onChange={onChange} />,
+      <DatePicker label="Due" name="due" value={new Date(2026, 2, 5)} onChange={onChange} />,
     );
+    tap(result.getByTestId("date-picker-clear"));
     await act(async () => {
-      fireEvent.change(touchInput(result.container, "date"), { target: { value: "" } });
+      await new Promise((resolve) => setTimeout(resolve, 50));
     });
     expect(onChange).toHaveBeenLastCalledWith(null);
+    expect(panels().length).toBe(0);
   });
 
-  it("min and max ride the input as local calendar days", () => {
-    coarse = true;
-    const result = renderWithProviders(
-      <DatePicker
-        label="Due"
-        name="due"
-        minDate={new Date(2026, 0, 2)}
-        maxDate={new Date(2026, 11, 30)}
-      />,
-    );
-    const input = touchInput(result.container, "date");
-    expect(input.min).toBe("2026-01-02");
-    expect(input.max).toBe("2026-12-30");
-  });
-
-  it("commits into form state", async () => {
-    coarse = true;
+  it("a day picked in the panel commits the calendar's Date into form state", async () => {
     const onSubmit = vi.fn();
     const Fixture = () => {
       const form = useForm({
-        defaultValues: { due: null as Date | null },
+        defaultValues: { due: new Date(2026, 2, 1) as Date | null },
         onSubmit: async ({ value }) => onSubmit(value),
       });
       return (
@@ -160,99 +152,49 @@ describe("Date on touch web (FZ-8114)", () => {
       );
     };
     const result = renderWithProviders(<Fixture />);
+    tap(result.getByTestId("date-picker-trigger"));
+    await waitFor(() => expect(panels().length).toBe(1));
     await act(async () => {
-      fireEvent.change(touchInput(result.container, "date"), { target: { value: "2026-08-15" } });
+      fireEvent.click(dayButton(panels()[0] as HTMLElement, "15"));
     });
+    await waitFor(() => expect(panels().length).toBe(0));
     await act(async () => {
       fireEvent.click(result.getSubmitButton() as HTMLElement);
     });
     await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
-    expect(formatCalendarDate(onSubmit.mock.calls[0][0].due, "date")).toBe("2026-08-15");
-  });
-});
-
-describe("Datetime on touch web (FZ-8114)", () => {
-  it("a coarse pointer renders datetime-local and emits the local wall clock", async () => {
-    coarse = true;
-    const onChange = vi.fn();
-    const result = renderWithProviders(
-      <DatetimePicker label="Starts" name="starts" onChange={onChange} />,
-    );
-    await act(async () => {
-      fireEvent.change(touchInput(result.container, "datetime-local"), {
-        target: { value: "2026-03-05T14:30" },
-      });
-    });
-    const picked = onChange.mock.calls[0][0] as Date;
-    expect(formatCalendarDate(picked, "datetime")).toBe("2026-03-05 14:30:00");
-    expect(touchInput(result.container, "datetime-local").value).toBe("2026-03-05T14:30");
-  });
-
-  it("seconds widen the input's step and survive the round trip", () => {
-    coarse = true;
-    const result = renderWithProviders(
-      <DatetimePicker
-        label="Starts"
-        name="starts"
-        showSeconds
-        value={new Date(2026, 2, 5, 14, 30, 15)}
-      />,
-    );
-    const input = touchInput(result.container, "datetime-local");
-    expect(input.step).toBe("1");
-    expect(input.value).toBe("2026-03-05T14:30:15");
-  });
-
-  it("a fine pointer keeps the MPO panel trigger", () => {
-    const result = renderWithProviders(<DatetimePicker label="Starts" name="starts" />);
-    expect(result.container.querySelector('input[type="datetime-local"]')).toBeNull();
-    expect(result.container.querySelector('[role="combobox"]')).not.toBeNull();
+    expect(formatCalendarDate(onSubmit.mock.calls[0][0].due, "date")).toBe("2026-03-15");
   });
 });
 
-describe("Time on touch web (FZ-8114)", () => {
-  it("a coarse pointer renders the time input and emits TimePicker's string", async () => {
-    coarse = true;
-    const onChange = vi.fn();
-    const result = renderWithProviders(
-      <TimePicker label="At" name="at" value="09:15" onChange={onChange} />,
+describe("a field too low for the panel (LC-105 collision)", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("takes MPO's bottom sheet, still never a native input", async () => {
+    const field = { x: 16, y: window.innerHeight - 60, width: 358, height: 44 };
+    const original = HTMLElement.prototype.getBoundingClientRect;
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+      function (this: HTMLElement) {
+        if (!this.hasAttribute("data-fp-reference")) return original.call(this);
+        return {
+          ...field,
+          top: field.y,
+          left: field.x,
+          right: field.x + field.width,
+          bottom: field.y + field.height,
+          toJSON: () => ({}),
+        } as DOMRect;
+      },
     );
-    const input = touchInput(result.container, "time");
-    expect(input.value).toBe("09:15");
-    await act(async () => {
-      fireEvent.change(input, { target: { value: "14:30" } });
-    });
-    expect(onChange).toHaveBeenLastCalledWith("14:30");
-    expect(result.container.querySelector('input[value="2:30 PM"]')).not.toBeNull();
-  });
-
-  it("showSeconds emits HH:mm:ss even when the browser drops :00", async () => {
-    coarse = true;
-    const onChange = vi.fn();
-    const result = renderWithProviders(
-      <TimePicker label="At" name="at" showSeconds onChange={onChange} />,
+    vi.spyOn(HTMLElement.prototype, "scrollHeight", "get").mockImplementation(
+      function (this: HTMLElement) {
+        return this.hasAttribute("data-fp-panel") ? 350 : 0;
+      },
     );
-    await act(async () => {
-      fireEvent.change(touchInput(result.container, "time"), { target: { value: "14:30" } });
-    });
-    expect(onChange).toHaveBeenLastCalledWith("14:30:00");
-  });
-
-  it("a fine pointer keeps the MPO wheels trigger", () => {
-    const result = renderWithProviders(<TimePicker label="At" name="at" />);
-    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");
+    const result = renderWithProviders(<DatePicker label="Due" name="due" />);
+    tap(result.getByTestId("date-picker-trigger"));
+    await waitFor(() => expect(sheets().length).toBe(1));
+    expect(document.querySelector("input[type=date], input[type=time]")).toBeNull();
   });
 });

package/src/fields/Select/Select.containingBlock.spec.tsx

@@ -0,0 +1,191 @@
+/**
+ * FZ-8438 (Clay's rv_0ea65e640a0ef261, an iPad Select inside a sheet): the
+ * listbox is `position: fixed`, and inside a transformed sheet it lays out
+ * against that sheet, not the viewport. Its top is offset by the sheet's
+ * origin so the panel still lands on its field.
+ */
+import { fireEvent, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { OverlayStackProvider } from "../../shared/overlayStack";
+import { Select, type SelectOption } from "./index";
+
+const options: SelectOption[] = [
+  { value: "hel", label: "Helsinki" },
+  { value: "fsn", label: "Falkenstein" },
+  { value: "nbg", label: "Nuremberg" },
+];
+
+async function openTop(result: ReturnType<typeof renderWithProviders>) {
+  fireEvent.keyDown(result.getByTestId("select-trigger"), { key: "Enter" });
+  const dropdown = await result.findByTestId("select-dropdown");
+  await waitFor(() => expect(dropdown.style.top).not.toBe(""));
+  return { dropdown, top: parseFloat(dropdown.style.top) };
+}
+
+describe("Select inside a transformed sheet (FZ-8438)", () => {
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: 1200,
+    });
+  });
+
+  it("offsets its top by the sheet it lays out against", async () => {
+    const plain = renderWithProviders(<Select options={options} value="hel" />);
+    const { top: viewportTop } = await openTop(plain);
+    plain.unmount();
+
+    const result = renderWithProviders(
+      <div
+        role="dialog"
+        data-testid="sheet"
+        style={{ transform: "translateY(0px)", overflowY: "auto", height: 100 }}
+      >
+        <Select options={options} value="hel" />
+      </div>,
+    );
+    const sheet = result.getByTestId("sheet");
+    sheet.scrollTop = 40;
+    const { dropdown, top } = await openTop(result);
+    expect(sheet.contains(dropdown)).toBe(true);
+    expect(top).toBe(viewportTop + 40);
+  });
+});
+
+describe("Select seamless cover (LC-112, FZ-8438)", () => {
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: 1200,
+    });
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("opens on the field's top edge with the field echoed as a hidden first row", async () => {
+    const original = HTMLElement.prototype.getBoundingClientRect;
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+      function (this: HTMLElement) {
+        const field = this.querySelector('[data-testid="select-trigger"]');
+        if (this.dataset.testid === "select-trigger" || field) {
+          return {
+            x: 16,
+            y: 200,
+            top: 200,
+            left: 16,
+            right: 416,
+            bottom: 240,
+            width: 400,
+            height: 40,
+            toJSON: () => ({}),
+          } as DOMRect;
+        }
+        return original.call(this);
+      },
+    );
+    const result = renderWithProviders(<Select options={options} value="nbg" />);
+    const { dropdown, top } = await openTop(result);
+    expect(top).toBe(200);
+    const echo = dropdown.querySelector<HTMLElement>("[data-fp-trigger-row]");
+    expect(echo).not.toBeNull();
+    expect(dropdown.firstElementChild).toBe(echo);
+    expect(echo?.getAttribute("aria-hidden")).toBe("true");
+    expect(echo?.getAttribute("role")).toBeNull();
+  });
+});
+
+describe("Select drop-up (LC-112, FZ-8438 r3)", () => {
+  const field = (top: number) => ({
+    x: 16,
+    y: top,
+    top,
+    left: 16,
+    right: 416,
+    bottom: top + 40,
+    width: 400,
+    height: 40,
+    toJSON: () => ({}),
+  });
+  let fieldTop = 700;
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: 1024,
+    });
+    Object.defineProperty(window, "innerHeight", {
+      configurable: true,
+      writable: true,
+      value: 768,
+    });
+    const original = HTMLElement.prototype.getBoundingClientRect;
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+      function (this: HTMLElement) {
+        if (
+          this.dataset.testid === "select-trigger" ||
+          this.querySelector('[data-testid="select-trigger"]')
+        ) {
+          return field(fieldTop) as DOMRect;
+        }
+        return original.call(this);
+      },
+    );
+    vi.spyOn(HTMLElement.prototype, "scrollHeight", "get").mockImplementation(
+      function (this: HTMLElement) {
+        return this.dataset.testid === "select-dropdown" ? 300 : 0;
+      },
+    );
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("a field too low for its list opens upward, its bottom edge on the field's", async () => {
+    fieldTop = 700;
+    const result = renderWithProviders(<Select options={options} value="hel" />);
+    const { dropdown } = await openTop(result);
+    // The panel's bottom edge is the field's (740): the 300 list plus the
+    // frame's borders, above it.
+    await waitFor(() => expect(parseFloat(dropdown.style.top)).toBeLessThan(700));
+    expect(parseFloat(dropdown.style.top) + parseFloat(dropdown.style.maxHeight)).toBe(740);
+    expect(parseFloat(dropdown.style.maxHeight)).toBeGreaterThanOrEqual(300);
+    const echo = dropdown.querySelector<HTMLElement>("[data-fp-trigger-row]");
+    await waitFor(() => expect(echo?.style.order).toBe("1"));
+    expect(echo?.style.top).toBe("");
+    expect(echo?.style.bottom).not.toBe("");
+  });
+
+  it("a field with room below keeps the echo on top, opening down", async () => {
+    fieldTop = 120;
+    const result = renderWithProviders(<Select options={options} value="hel" />);
+    const { dropdown, top } = await openTop(result);
+    expect(top).toBe(120);
+    const echo = dropdown.querySelector<HTMLElement>("[data-fp-trigger-row]");
+    expect(echo?.style.order).toBe("");
+  });
+});
+
+describe("Select beside its field in a sheet (LC-262, FZ-8438)", () => {
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: 1200,
+    });
+  });
+
+  it("draws no trigger echo row when it opens beside the field", async () => {
+    const result = renderWithProviders(
+      <OverlayStackProvider zIndex={100000}>
+        <Select options={options} value="hel" />
+      </OverlayStackProvider>,
+    );
+    const { dropdown } = await openTop(result);
+    expect(dropdown.querySelector("[data-fp-trigger-row]")).toBeNull();
+    expect(dropdown.textContent?.match(/Helsinki/g)?.length ?? 0).toBe(1);
+  });
+});

package/src/fields/Select/Select.stories.tsx

@@ -496,3 +496,46 @@ export const NativeIos: Story = {
     native: true,
   },
 };
+
+const zoneOptions: SelectOption[] = [
+  { value: "hst", label: "Hawaii" },
+  { value: "akst", label: "Alaska" },
+  { value: "pt", label: "Pacific Time (US and Canada)" },
+  { value: "mt", label: "Mountain Time (US and Canada)" },
+  { value: "ct", label: "Central Time (US and Canada)" },
+  { value: "et", label: "Eastern Time (US and Canada)" },
+  { value: "gmt", label: "London" },
+  { value: "cet", label: "Berlin" },
+  { value: "eet", label: "Helsinki" },
+  { value: "ist", label: "Kolkata" },
+  { value: "jst", label: "Tokyo" },
+  { value: "aest", label: "Sydney" },
+];
+
+/**
+ * LC-112 width setting (FZ-8438 r3): the same field opened four ways. Each
+ * panel's top edge sits on its field; only the width changes.
+ */
+export const PanelWidths: Story = {
+  render: () => (
+    <YStack gap="$4" width={260}>
+      <Select label="Content" options={zoneOptions} defaultValue="pt" panelWidth="content" />
+      <Select label="Trigger" options={zoneOptions} defaultValue="pt" panelWidth="trigger" />
+      <Select label="Screen" options={zoneOptions} defaultValue="pt" panelWidth="screen" />
+      <Select label="Fixed 360" options={zoneOptions} defaultValue="pt" panelWidth={360} />
+    </YStack>
+  ),
+};
+
+/**
+ * Phone width (LC-112, FZ-7830): a long list opens its sheet at page level and
+ * a short one (seven or fewer options) opens as a menu over its field.
+ */
+export const PhoneLists: Story = {
+  render: () => (
+    <YStack gap="$4">
+      <Select label="Time zone" options={zoneOptions} defaultValue="pt" />
+      <Select label="Country" options={countryOptions} defaultValue="us" />
+    </YStack>
+  ),
+};