@multiplatform.one/components 7.8.0 → 7.11.0

package/src/ProgressSteps/index.tsx

@@ -206,7 +206,7 @@ export function ProgressSteps({
           const markerBorder = kind === "upcoming" ? componentColors.indicator.track : markerBg;
           const markerFg =
             kind === "upcoming"
-              ? componentColors.text.muted
+              ? knobProps.textAccentColor
               : kind === "error"
                 ? (onError ?? "$color1")
                 : kind === "completed"
@@ -293,7 +293,7 @@ export function ProgressSteps({
                   kind === "error"
                     ? "$red11"
                     : state === "upcoming"
-                      ? componentColors.text.muted
+                      ? knobProps.textAccentColor
                       : componentColors.text.primary
                 }
                 textAlign={horizontal ? "center" : undefined}
@@ -305,7 +305,7 @@ export function ProgressSteps({
                 <SizableText
                   {...knobProps.body}
                   fontSize="$1"
-                  color={kind === "error" ? "$red11" : componentColors.text.muted}
+                  color={kind === "error" ? "$red11" : knobProps.textAccentColor}
                   textAlign={horizontal ? "center" : undefined}
                   numberOfLines={2}
                 >

package/src/Quote/index.tsx

@@ -66,8 +66,6 @@ export function Quote({ children, cite, compact, ...props }: QuoteProps) {
     compact === undefined ? { component: "Quote" } : { component: "Quote", compact },
   );
   const railWidth = quoteRailWidth(knobProps.borderRadius.borderWidth);
-  const citeColor =
-    knobProps.textAccentColor === "$color" ? componentColors.text.muted : knobProps.textAccentColor;
 
   return (
     <QuoteFrame
@@ -106,7 +104,7 @@ export function Quote({ children, cite, compact, ...props }: QuoteProps) {
                 key={key}
                 render="cite"
                 {...knobProps.label}
-                color={citeColor}
+                color={knobProps.textAccentColor}
                 fontStyle="normal"
               >
                 — {label}

package/src/SheetModal/SheetModal.fill.spec.tsx

@@ -0,0 +1,147 @@
+/**
+ * MPO-299 phase 2 — the `fill` sizing contract.
+ *
+ * Phase 1 measured the failure on device: a consumer-owned flexible body
+ * inside the native sheet was delivered height 0, so a viewport that mounts
+ * on its measurement mounted nothing, while a sibling with a declared 240pt
+ * height got the space it asked for. `fill` opts into the sheet's existing
+ * keyboard-aware cap as a DEFINITE height and opens every link between the
+ * frame and the body, so the owned viewport has something to bootstrap from.
+ *
+ * These are composition checks, not Yoga geometry: happy-dom lays nothing
+ * out. A missing intermediate link has to fail here, because opening only
+ * the outer frame reproduces the measured zero. Device acceptance is the
+ * parent's, on a real run.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Text } from "tamagui";
+import { SheetModal as WebSheetModal, type SheetModalProps } from "./index";
+import { SheetModal as NativeSheetModal } from "./index.native";
+
+vi.mock("react-native-web", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-native")>()),
+  ActionSheetIOS: undefined,
+  Modal: ({ children }: { children: import("react").ReactNode }) => children,
+}));
+
+afterEach(cleanup);
+
+/** Tamagui emits atomic classes; `flex: 1` is grow+shrink+basis together. */
+const flexOne = ["_fg-1", "_fs-1", "_fb-0px"];
+const minZero = "_mih-0px";
+
+function classes(element: HTMLElement) {
+  return element.className.split(/\s+/);
+}
+
+function renderNative(props: Partial<SheetModalProps> = {}) {
+  return renderWithProviders(
+    <NativeSheetModal open onOpenChange={() => {}} header={<Text>Move to project</Text>} {...props}>
+      <Text>row</Text>
+    </NativeSheetModal>,
+  );
+}
+
+describe("native fill allocates the sheet body", () => {
+  it("turns the existing cap into a definite frame height only when filling", () => {
+    const filled = renderNative({ fill: true }).getByTestId("sheet-modal-frame");
+    expect(filled.style.height).not.toBe("");
+    expect(filled.style.height).toBe(filled.style.maxHeight);
+    cleanup();
+    const intrinsic = renderNative().getByTestId("sheet-modal-frame");
+    expect(intrinsic.style.height).toBe("");
+    expect(intrinsic.style.maxHeight).not.toBe("");
+  });
+
+  it("opens every link between the frame and the body, not just the outer one", () => {
+    const view = renderNative({ fill: true });
+    for (const id of ["sheet-modal-surface", "sheet-modal-content"]) {
+      const link = classes(view.getByTestId(id));
+      expect(link, `${id} grows`).toEqual(expect.arrayContaining(flexOne));
+      expect(link, `${id} can collapse`).toContain(minZero);
+    }
+    const body = view.getByTestId("sheet-modal-body");
+    expect(body.style.flexGrow).toBe("1");
+    expect(body.style.minHeight).toBe("0px");
+  });
+
+  it("leaves the default branch intrinsic, and false is the same as absent", () => {
+    for (const props of [{}, { fill: false }]) {
+      const view = renderNative(props);
+      expect(view.queryByTestId("sheet-modal-body")).toBeNull();
+      expect(classes(view.getByTestId("sheet-modal-surface"))).not.toContain("_fg-1");
+      expect(classes(view.getByTestId("sheet-modal-content"))).not.toContain("_fg-1");
+      cleanup();
+    }
+  });
+
+  it("keeps the grabber and header out of the flexible body", () => {
+    const view = renderNative({ fill: true });
+    const body = view.getByTestId("sheet-modal-body");
+    const grabber = view.getByTestId("sheet-modal-grabber");
+    expect(grabber.style.flexShrink).toBe("0");
+    expect(body.contains(grabber)).toBe(false);
+    const header = view.getByText("Move to project");
+    expect(body.contains(header)).toBe(false);
+    expect(view.getByTestId("sheet-modal-content").contains(body)).toBe(true);
+  });
+
+  it("adds no scroll owner when the consumer keeps scrolling, and exactly one when it does not", () => {
+    expect(renderNative({ fill: true }).queryAllByTestId("sheet-modal-scroll")).toHaveLength(0);
+    cleanup();
+    const scrollers = renderNative({ fill: true, scrollable: true }).getAllByTestId(
+      "sheet-modal-scroll",
+    );
+    expect(scrollers).toHaveLength(1);
+    expect(scrollers[0].style.flexGrow).toBe("1");
+  });
+
+  it("keeps the content-sized scroller on the default branch", () => {
+    const scroller = renderNative({ scrollable: true }).getByTestId("sheet-modal-scroll");
+    expect(scroller.style.flexGrow).toBe("0");
+  });
+});
+
+/*
+ * Web already gets a definite percent height from the Sheet's snap point, so
+ * fill only has to open the body chain inside it. tamagui renders the sheet
+ * through a portal AND inline, so every query here is plural on purpose.
+ */
+function renderWeb(props: Partial<SheetModalProps> = {}) {
+  return renderWithProviders(
+    <WebSheetModal open onOpenChange={() => {}} header={<Text>Move to project</Text>} {...props}>
+      <Text>row</Text>
+    </WebSheetModal>,
+  );
+}
+
+describe("web fill opens the body inside the snapped frame", () => {
+  it("mounts a growing body slot only when filling", () => {
+    const filled = renderWeb({ fill: true }).getAllByTestId("sheet-modal-body");
+    expect(filled.length).toBeGreaterThan(0);
+    for (const slot of filled) {
+      expect(classes(slot)).toEqual(expect.arrayContaining(flexOne));
+      expect(classes(slot)).toContain(minZero);
+    }
+    cleanup();
+    expect(renderWeb().queryAllByTestId("sheet-modal-body")).toHaveLength(0);
+  });
+
+  it("hands the body slot to the sheet scroller when the sheet owns scrolling", () => {
+    const view = renderWeb({ fill: true, scrollable: true });
+    const bodies = view.getAllByTestId("sheet-modal-body");
+    const scrollers = view.getAllByTestId("sheet-modal-scroll");
+    expect(scrollers.length).toBe(bodies.length);
+    for (const body of bodies) {
+      expect(body.querySelectorAll('[data-testid="sheet-modal-scroll"]')).toHaveLength(1);
+    }
+  });
+
+  it("keeps one scroll owner and no body slot on the default branch", () => {
+    const view = renderWeb({ scrollable: true });
+    expect(view.queryAllByTestId("sheet-modal-body")).toHaveLength(0);
+    expect(view.getAllByTestId("sheet-modal-scroll").length).toBeGreaterThan(0);
+  });
+});

package/src/SheetModal/SheetModal.ownedBody.spec.tsx

@@ -0,0 +1,200 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import * as stories from "./SheetModal.stories";
+
+const hosts = vi.hoisted(() => ({
+  props: new Map<string, Record<string, any>>(),
+  measurements: [] as Array<{ id: string; callback: (...bounds: number[]) => void }>,
+}));
+vi.mock("@multiplatform.one/components", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@multiplatform.one/components")>();
+  const React = await import("react");
+  function observed(Component: any) {
+    return React.forwardRef((props: Record<string, any>, ref) => {
+      if (props.testID) hosts.props.set(props.testID, props);
+      React.useImperativeHandle(ref, () => {
+        const host = {
+          measureInWindow: (callback: (...bounds: number[]) => void) => {
+            hosts.measurements.push({ id: props.testID, callback });
+          },
+        };
+        return { ...host, getNativeScrollRef: () => host };
+      });
+      return (
+        <Component
+          {...props}
+          onLayout={undefined}
+          onContentSizeChange={undefined}
+          onScroll={undefined}
+        />
+      );
+    });
+  }
+  return {
+    ...actual,
+    YStack: observed(actual.YStack),
+    ScrollView: observed(actual.ScrollView),
+    SheetModal: (props: any) => {
+      hosts.props.set("public-sheet-modal", props);
+      return props.open ? (
+        <>
+          {props.header}
+          {props.children}
+        </>
+      ) : null;
+    },
+  };
+});
+afterEach(() => {
+  cleanup();
+  hosts.props.clear();
+  hosts.measurements = [];
+});
+function sheetProps() {
+  return hosts.props.get("public-sheet-modal")!;
+}
+function renderStory(name: "OwnedMeasuredViewport" | "OwnedScrollView") {
+  const story = (stories as Record<string, any>)[name];
+  expect(story, `${name} is a registered story`).toBeDefined();
+  return renderWithProviders(<>{story.render(story.args ?? {}, {})}</>);
+}
+function layout(id: string, height: number) {
+  act(() =>
+    hosts.props.get(id)!.onLayout({ nativeEvent: { layout: { x: 0, y: 44, width: 300, height } } }),
+  );
+}
+function readings(view: ReturnType<typeof renderStory>) {
+  return JSON.parse(view.getByTestId("owned-sheet-readings").textContent!);
+}
+it("keeps the measured subject unmeasured until a delivered layout and distinguishes zero", () => {
+  const view = renderStory("OwnedMeasuredViewport");
+  fireEvent.click(view.getByText("Open flex subject"));
+  expect(readings(view).viewportLayout).toBe("unmeasured");
+  expect(hosts.props.get("owned-sheet-frame")!.height).toBeUndefined();
+  expect(view.queryByText("Record 60")).toBeNull();
+  layout("owned-sheet-viewport", 0);
+  expect(readings(view).viewportLayout.height).toBe(0);
+  expect(view.queryByText("Record 60")).toBeNull();
+  layout("owned-sheet-viewport", 187.5);
+  expect(readings(view).viewportLayout.height).toBe(187.5);
+  expect(view.getByText("Record 60")).toBeDefined();
+});
+it("provides a named fixed control without treating its declared height as a measurement", () => {
+  const view = renderStory("OwnedMeasuredViewport");
+  fireEvent.click(view.getByText("Open 240pt control"));
+  expect(hosts.props.get("owned-sheet-frame")!.height).toBe(240);
+  expect(readings(view).mode).toBe("control-240");
+  expect(readings(view).frameLayout).toBe("unmeasured");
+  layout("owned-sheet-viewport", 192);
+  expect(view.getByText("Record 60")).toBeDefined();
+  expect(hosts.props.get("owned-sheet-scroll")).toBeDefined();
+});
+it("mounts the owned scroller without a measurement gate and records delivered content and offset", () => {
+  const view = renderStory("OwnedScrollView");
+  fireEvent.click(view.getByText("Open flex subject"));
+  expect(view.getByText("Record 60")).toBeDefined();
+  expect(view.getAllByText(/^Record \d+$/)).toHaveLength(60);
+  expect(readings(view).offset).toBe("unmeasured");
+  const scroll = hosts.props.get("owned-sheet-scroll")!;
+  act(() => {
+    scroll.onContentSizeChange(300, 2500.5);
+    scroll.onScroll({ nativeEvent: { contentOffset: { x: 0, y: 123.25 } } });
+  });
+  expect(readings(view).content).toEqual({ width: 300, height: 2500.5 });
+  expect(readings(view).offset).toEqual({ x: 0, y: 123.25 });
+  fireEvent.click(view.getByText("Activate Record 60"));
+  expect(readings(view).tailPresses).toBe(1);
+});
+it("records public window-bound callbacks and rejects callbacks from a closed presentation", () => {
+  const view = renderStory("OwnedScrollView");
+  fireEvent.click(view.getByText("Open flex subject"));
+  fireEvent.click(view.getByText("Measure bounds"));
+  const pending = [...hosts.measurements];
+  const frame = pending.find((item) => item.id === "owned-sheet-frame")!;
+  expect(frame).toBeDefined();
+  expect(pending.some((item) => item.id === "owned-sheet-scroll")).toBe(true);
+  act(() => frame.callback(18, 300, 354, 240));
+  expect(readings(view).frameWindow).toEqual({ x: 18, y: 300, width: 354, height: 240 });
+  const viewport = pending.find((item) => item.id === "owned-sheet-viewport")!;
+  fireEvent.click(view.getByText("Close fixture"));
+  fireEvent.click(view.getByText("Open 240pt control"));
+  act(() => viewport.callback(18, 344, 354, 196));
+  expect(readings(view).viewportWindow).toBe("unmeasured");
+  expect(readings(view).frameWindow).toBe("unmeasured");
+});
+it("reports invalid readings rather than converting them to zero", () => {
+  const view = renderStory("OwnedScrollView");
+  fireEvent.click(view.getByText("Open flex subject"));
+  layout("owned-sheet-viewport", Number.NaN);
+  expect(readings(view).viewportLayout).toBe("invalid");
+  expect(readings(view).sheetFrameWindow).toBe("unavailable: SheetModal has no public frame ref");
+});
+
+it("keeps an absent measured scroller unavailable and ignores superseded samples", () => {
+  const view = renderStory("OwnedMeasuredViewport");
+  fireEvent.click(view.getByText("Open flex subject"));
+  fireEvent.click(view.getByText("Measure bounds"));
+  expect(readings(view).scrollWindow).toBe("unavailable");
+  expect(readings(view).tailWindow).toBe("unavailable");
+  expect(readings(view).frameWindow).toBe("unmeasured");
+  const old = hosts.measurements.find((item) => item.id === "owned-sheet-frame")!;
+  hosts.measurements = [];
+  fireEvent.click(view.getByText("Measure bounds"));
+  expect(readings(view).sample).toBe(2);
+  act(() => old.callback(18, 300, 354, 240));
+  expect(readings(view).frameWindow).toBe("unmeasured");
+  const current = hosts.measurements.find((item) => item.id === "owned-sheet-frame")!;
+  act(() => current.callback(18, 780, 354, 0));
+  expect(readings(view).frameWindow).toEqual({ x: 18, y: 780, width: 354, height: 0 });
+});
+
+it("retains the closed presentation readings and resets actual tail presses on reopening", () => {
+  const view = renderStory("OwnedScrollView");
+  fireEvent.click(view.getByText("Open 240pt control"));
+  layout("owned-sheet-viewport", 192);
+  fireEvent.click(view.getByText("Activate Record 60"));
+  fireEvent.click(view.getByText("Close fixture"));
+  layout("owned-sheet-viewport", 0);
+  expect(readings(view).viewportLayout.height).toBe(192);
+  expect(readings(view).tailPresses).toBe(1);
+  expect(readings(view).presentation).toBe(1);
+  expect(readings(view).open).toBe(false);
+  fireEvent.click(view.getByText("Open flex subject"));
+  expect(readings(view).viewportLayout).toBe("unmeasured");
+  expect(readings(view).tailPresses).toBe(0);
+  expect(readings(view).presentation).toBe(2);
+  expect(view.getAllByText("Generic detail 1 for this record.")).toHaveLength(60);
+  expect(view.getAllByText("Generic detail 4 for this record.")).toHaveLength(15);
+});
+
+it("hands the chosen fill value to the real public sheet rather than inferring it", () => {
+  const view = renderStory("OwnedMeasuredViewport");
+  fireEvent.click(view.getByText("Open flex subject"));
+  expect(sheetProps().fill).toBe(false);
+  expect(readings(view).fill).toBe(false);
+  fireEvent.click(view.getByText("Close fixture"));
+  fireEvent.click(view.getByText("Open flex subject (fill)"));
+  expect(sheetProps().fill).toBe(true);
+  expect(readings(view).fill).toBe(true);
+  expect(readings(view).mode).toBe("subject");
+  // The fixed control is a diagnostic, not the height contract: it never
+  // asks the sheet to allocate.
+  fireEvent.click(view.getByText("Close fixture"));
+  fireEvent.click(view.getByText("Open 240pt control"));
+  expect(sheetProps().fill).toBe(false);
+});
+
+it("measures the owned toolbar so the parent can subtract it from the body", () => {
+  const view = renderStory("OwnedScrollView");
+  fireEvent.click(view.getByText("Open flex subject (fill)"));
+  expect(readings(view).toolbarLayout).toBe("unmeasured");
+  layout("owned-sheet-toolbar", 44.5);
+  layout("owned-sheet-frame", 400);
+  layout("owned-sheet-viewport", 355.5);
+  const captured = readings(view);
+  expect(captured.toolbarLayout.height).toBe(44.5);
+  expect(captured.frameLayout.height - captured.toolbarLayout.height).toBe(
+    captured.viewportLayout.height,
+  );
+});

package/src/SheetModal/SheetModal.stories.spec.tsx

@@ -10,9 +10,16 @@
  * open state is.
  */
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { cleanup, screen } from "@testing-library/react";
+import { cleanup, fireEvent, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
-import meta, { Default, OpenOnMount, Scrollable, TallDetent } from "./SheetModal.stories";
+import meta, {
+  Default,
+  OpenOnMount,
+  OwnedMeasuredViewport,
+  OwnedScrollView,
+  Scrollable,
+  TallDetent,
+} from "./SheetModal.stories";
 
 afterEach(cleanup);
 
@@ -51,4 +58,18 @@ describe("SheetModal stories", () => {
     expect(screen.getAllByText("Project 1").length).toBeGreaterThan(0);
     expect(screen.getAllByText("Project 30").length).toBeGreaterThan(0);
   });
+
+  it.each([OwnedMeasuredViewport, OwnedScrollView])(
+    "mounts the public owned fixture and its control",
+    (story) => {
+      renderWithProviders(<>{story.render?.({} as never, {} as never)}</>);
+      expect(screen.getByText("Open flex subject")).toBeDefined();
+      fireEvent.click(screen.getByText("Open 240pt control"));
+      expect(screen.getAllByText("Measure bounds").length).toBeGreaterThan(0);
+      expect(screen.getAllByText("Close fixture").length).toBeGreaterThan(0);
+      expect(JSON.parse(screen.getByTestId("owned-sheet-readings").textContent!).mode).toBe(
+        "control-240",
+      );
+    },
+  );
 });