@multiplatform.one/components 7.7.0 → 7.7.2

package/src/AnimateHeight/AnimateHeight.stories.spec.tsx

@@ -0,0 +1,37 @@
+/**
+ * The story file itself is the artifact under test here: MPO-193 landed
+ * AnimateHeight's first Kitchen Sink title, and a story that never mounts is
+ * the failure mode the previous wave shipped. These render every exported
+ * story through the real providers so a broken import or a bad arg fails the
+ * package tests instead of the gallery.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import meta, { AlwaysOpen, Default, FollowsContent } from "./AnimateHeight.stories";
+
+afterEach(cleanup);
+
+describe("AnimateHeight stories", () => {
+  it("declares the Components/AnimateHeight title against the component", () => {
+    expect(meta.title).toBe("Components/AnimateHeight");
+    expect(meta.component).toBeDefined();
+  });
+
+  it("Main mounts collapsed with the expand affordance", () => {
+    renderWithProviders(<>{Default.render?.({} as never, {} as never)}</>);
+    expect(screen.getByText("Expand")).toBeTruthy();
+  });
+
+  it("Follower mode mounts with content already visible", () => {
+    renderWithProviders(<>{FollowsContent.render?.({} as never, {} as never)}</>);
+    expect(screen.getByText("Height is measured, not guessed.")).toBeTruthy();
+  });
+
+  it("Open renders its children when open is true", () => {
+    renderWithProviders(
+      <>{AlwaysOpen.render?.(AlwaysOpen.args as never, { args: AlwaysOpen.args } as never)}</>,
+    );
+    expect(screen.getByText("Toggle `open` in the controls panel.")).toBeTruthy();
+  });
+});

package/src/AnimateHeight/AnimateHeight.stories.tsx

@@ -0,0 +1,95 @@
+import { Button } from "@multiplatform.one/forms";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { Paragraph, SizableText, YStack } from "tamagui";
+import { Card } from "../surfaces";
+import { AnimateHeight } from "./index";
+
+const lines = [
+  "Height is measured, not guessed.",
+  "CSS cannot transition to height: auto, so the box drives a numeric height.",
+  "Web measures with a ResizeObserver; native measures with onLayout.",
+  "Padding belongs inside the children, never on the container.",
+];
+
+function Collapsible() {
+  const [open, setOpen] = useState(false);
+  return (
+    <YStack gap="$3" maxWidth={420}>
+      <Button onPress={() => setOpen((value) => !value)}>{open ? "Collapse" : "Expand"}</Button>
+      <AnimateHeight open={open}>
+        <Card>
+          <YStack gap="$2">
+            {lines.map((line) => (
+              <Paragraph key={line}>{line}</Paragraph>
+            ))}
+          </YStack>
+        </Card>
+      </AnimateHeight>
+    </YStack>
+  );
+}
+
+function Follower() {
+  const [count, setCount] = useState(1);
+  return (
+    <YStack gap="$3" maxWidth={420}>
+      <Button onPress={() => setCount((value) => (value >= lines.length ? 1 : value + 1))}>
+        {`Add a line (${count}/${lines.length})`}
+      </Button>
+      <AnimateHeight>
+        <Card>
+          <YStack gap="$2">
+            {lines.slice(0, count).map((line) => (
+              <Paragraph key={line}>{line}</Paragraph>
+            ))}
+          </YStack>
+        </Card>
+      </AnimateHeight>
+    </YStack>
+  );
+}
+
+const meta: Meta<typeof AnimateHeight> = {
+  title: "Components/AnimateHeight",
+  component: AnimateHeight,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          'Auto-height container. CSS never interpolates `height: auto`, so this measures the content (ResizeObserver on web, onLayout on native) and tweens a numeric height through the knob `transition`. Two modes: omit `open` for follower (height tracks content while mounted), pass `open` for collapsible (children unmount once the collapse settles). Under reduced motion or `animation="none"` the knob transition is undefined and heights apply instantly, so state changes still land.',
+      },
+    },
+  },
+  argTypes: {
+    open: { control: "boolean" },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof AnimateHeight>;
+
+export const Default: Story = {
+  name: "Main",
+  render: () => <Collapsible />,
+};
+
+export const FollowsContent: Story = {
+  name: "Follower mode",
+  render: () => <Follower />,
+};
+
+export const AlwaysOpen: Story = {
+  name: "Open",
+  args: { open: true },
+  render: (args) => (
+    <YStack maxWidth={420}>
+      <AnimateHeight {...args}>
+        <Card>
+          <SizableText>Toggle `open` in the controls panel.</SizableText>
+        </Card>
+      </AnimateHeight>
+    </YStack>
+  ),
+};

package/src/Avatar/Avatar.spec.tsx

@@ -67,7 +67,10 @@ describe("Avatar", () => {
     const compact = renderWithProviders(<Avatar name="Ada Lovelace" compact />);
     expect(pxOf(page.container)).toBe(36);
     expect(pxOf(nested.container)).toBe(32);
-    expect(pxOf(compact.container)).toBe(28);
+    // LC-76: density is not size. `compact` steps SPACE only (see
+    // resolveKnobs.applyDensity / compactSpaceMap) — it must not shrink a
+    // painted control. Only `nested` and an explicit size token move the face.
+    expect(pxOf(compact.container)).toBe(36);
     expect(
       nested.container.querySelector("[data-avatar-nested]")?.getAttribute("data-avatar-nested"),
     ).toBe("true");

package/src/Button.spec.tsx

@@ -119,21 +119,32 @@ describe("components Button — elevation and size knobs reach the frame", () =>
     expect(screen.getByRole("button").className).toMatch(/_bxsh-/);
   });
 
-  it("size knob drives the frame height token", () => {
-    renderWithProviders(
-      <Preset overrides={{ size: "small" }}>
-        <Button>Save</Button>
-      </Preset>,
-    );
-    expect(screen.getByRole("button").className).toContain("_h-t-size-3");
-    cleanup();
-
-    renderWithProviders(
-      <Preset overrides={{ size: "large" }}>
-        <Button>Save</Button>
-      </Preset>,
-    );
-    expect(screen.getByRole("button").className).toContain("_h-t-size-5");
+  it("size knob drives the frame height", () => {
+    // The generated size recipes resolve a control height to a concrete px
+    // atom, not a `$size` token class — asserting `_h-t-size-N` tested the
+    // pre-recipe emission shape, not the knob. Read the height back instead:
+    // small/medium/large must be three distinct, ascending heights.
+    const heightOf = () => {
+      const atom = screen
+        .getByRole("button")
+        .className.split(" ")
+        .find((c) => /^_h-\d+px$/.test(c));
+      expect(atom).toBeDefined();
+      return Number(atom!.replace(/^_h-|px$/g, ""));
+    };
+
+    const heights: number[] = [];
+    for (const size of ["small", "medium", "large"] as const) {
+      renderWithProviders(
+        <Preset overrides={{ size }}>
+          <Button>Save</Button>
+        </Preset>,
+      );
+      heights.push(heightOf());
+      cleanup();
+    }
+    expect(heights[0]).toBeLessThan(heights[1]);
+    expect(heights[1]).toBeLessThan(heights[2]);
   });
 });
 

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

@@ -0,0 +1,54 @@
+/**
+ * SheetModal was the harness inside SheetFrame.stories and had no title of its
+ * own, so the gallery listed the frame and not the sheet (MPO-193). These
+ * mount every exported story so an unrenderable one fails here, not in the
+ * Kitchen Sink.
+ *
+ * Presence is asserted by accessible NAME, not by counting dialogs: tamagui's
+ * Sheet keeps its portal in the tree either side of `open`, and happy-dom runs
+ * no animation, so `role="dialog"` matches more than one node whatever the
+ * open state is.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import meta, { Default, OpenOnMount, Scrollable, TallDetent } from "./SheetModal.stories";
+
+afterEach(cleanup);
+
+describe("SheetModal stories", () => {
+  it("declares the Components/SheetModal title against the component", () => {
+    expect(meta.title).toBe("Components/SheetModal");
+    expect(meta.component).toBeDefined();
+  });
+
+  it("every exported story mounts its trigger", () => {
+    for (const story of [Default, Scrollable, TallDetent, OpenOnMount]) {
+      renderWithProviders(<>{story.render?.({} as never, {} as never)}</>);
+      expect(screen.getAllByText("Open sheet").length).toBeGreaterThan(0);
+      cleanup();
+    }
+  });
+
+  it("the sheet frame is a labelled modal dialog", () => {
+    renderWithProviders(<>{OpenOnMount.render?.({} as never, {} as never)}</>);
+    // tamagui renders the sheet through a portal AND inline, so the frame
+    // appears more than once with the same accessible name; every copy has to
+    // carry the modal semantics.
+    const frames = screen.getAllByRole("dialog", { name: "Move to project" });
+    expect(frames.length).toBeGreaterThan(0);
+    for (const frame of frames) expect(frame.getAttribute("aria-modal")).toBe("true");
+  });
+
+  it("the action row inside the sheet carries cancel and primary", () => {
+    renderWithProviders(<>{OpenOnMount.render?.({} as never, {} as never)}</>);
+    expect(screen.getAllByText("Cancel").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Move").length).toBeGreaterThan(0);
+  });
+
+  it("the scrollable story fills the body with rows", () => {
+    renderWithProviders(<>{Scrollable.render?.({} as never, {} as never)}</>);
+    expect(screen.getAllByText("Project 1").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Project 30").length).toBeGreaterThan(0);
+  });
+});

package/src/SheetModal/SheetModal.stories.tsx

@@ -0,0 +1,109 @@
+import { Button } from "@multiplatform.one/forms";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { Paragraph, SizableText, YStack } from "tamagui";
+import { ActionBar } from "../actions/ActionBar";
+import { SheetModal } from "./index";
+
+function Harness({
+  scrollable = false,
+  snapPoint,
+  startOpen = false,
+}: {
+  scrollable?: boolean;
+  snapPoint?: number;
+  startOpen?: boolean;
+}) {
+  const [open, setOpen] = useState(startOpen);
+  return (
+    <YStack minHeight={480} gap="$3">
+      <Button onPress={() => setOpen(true)}>Open sheet</Button>
+      <Paragraph size="$2">
+        Dismiss by tapping the scrim, dragging to the bottom, or pressing Escape.
+      </Paragraph>
+      <SheetModal
+        open={open}
+        onOpenChange={setOpen}
+        scrollable={scrollable}
+        {...(snapPoint === undefined ? {} : { snapPoint })}
+        header={<SizableText fontWeight="600">Move to project</SizableText>}
+      >
+        {scrollable ? (
+          <YStack gap="$2">
+            {Array.from({ length: 30 }).map((_, index) => (
+              <Paragraph key={index}>Project {index + 1}</Paragraph>
+            ))}
+          </YStack>
+        ) : (
+          <YStack gap="$3">
+            <Paragraph>
+              The sheet is a dialog region, so the action row inside it caps at two actions.
+            </Paragraph>
+            <ActionBar
+              cancel={
+                <Button chromeless onPress={() => setOpen(false)}>
+                  Cancel
+                </Button>
+              }
+              primary={
+                <Button accent onPress={() => setOpen(false)}>
+                  Move
+                </Button>
+              }
+            />
+          </YStack>
+        )}
+      </SheetModal>
+    </YStack>
+  );
+}
+
+const meta: Meta<typeof SheetModal> = {
+  title: "Components/SheetModal",
+  component: SheetModal,
+  parameters: {
+    status: { type: "beta" },
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Modal bottom sheet. Anatomy follows the Apple HIG sheet (grabber, percent detent, swipe to dismiss) with Radix Dialog semantics: `role=dialog`, `aria-modal`, focus moved in, trapped, and returned on close, and Escape dismissal wired here because tamagui's Sheet has no key handling of its own. The frame opens a dialog region, so an ActionBar inside it inherits the two-action cap. Web renders tamagui's Sheet; the native twin is an RN Modal, because a raw Sheet cannot re-present from a trigger tap on device.",
+      },
+    },
+  },
+  argTypes: {
+    snapPoint: { control: { type: "range", min: 30, max: 95, step: 5 } },
+    scrollable: { control: "boolean" },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof SheetModal>;
+
+export const Default: Story = {
+  name: "Main",
+  render: () => <Harness />,
+};
+
+export const Scrollable: Story = {
+  name: "Scrollable body",
+  render: () => <Harness scrollable />,
+};
+
+export const TallDetent: Story = {
+  name: "Tall detent",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "`snapPoint` is a percent of travel. 92 is the tallest height real callers pass (the command palette); every one of those was a no-op on device until the detent resolver landed.",
+      },
+    },
+  },
+  render: () => <Harness snapPoint={92} />,
+};
+
+export const OpenOnMount: Story = {
+  name: "Open",
+  render: () => <Harness startOpen />,
+};

package/src/actions/ActionBar.stories.spec.tsx

@@ -0,0 +1,45 @@
+/**
+ * ActionBar was rendered inside DestructiveAction.stories but had no title of
+ * its own, so the gallery never listed it (MPO-193). These mount every
+ * exported story so an unrenderable one fails here, not in the Kitchen Sink.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import meta, { Alignments, CancelNeverDisabled, Default, WithSecondary } from "./ActionBar.stories";
+
+afterEach(cleanup);
+
+describe("ActionBar stories", () => {
+  it("declares the Components/ActionBar title against the component", () => {
+    expect(meta.title).toBe("Components/ActionBar");
+    expect(meta.component).toBeDefined();
+  });
+
+  it("Main renders the cancel and primary slots", () => {
+    renderWithProviders(
+      <>{Default.render?.(Default.args as never, { args: Default.args } as never)}</>,
+    );
+    expect(screen.getByText("Cancel")).toBeTruthy();
+    expect(screen.getByText("Save changes")).toBeTruthy();
+  });
+
+  it("Cancel + secondary + primary renders every slot", () => {
+    renderWithProviders(<>{WithSecondary.render?.({} as never, {} as never)}</>);
+    expect(screen.getByText("Cancel")).toBeTruthy();
+    expect(screen.getByText("Save draft")).toBeTruthy();
+    expect(screen.getByText("Preview")).toBeTruthy();
+    expect(screen.getByText("Publish")).toBeTruthy();
+  });
+
+  it("Alignments renders one bar per align value", () => {
+    renderWithProviders(<>{Alignments.render?.({} as never, {} as never)}</>);
+    expect(screen.getAllByText("Confirm")).toHaveLength(3);
+    expect(screen.getByText('align="between"')).toBeTruthy();
+  });
+
+  it("the cancel-disabled story still paints a reachable cancel", () => {
+    renderWithProviders(<>{CancelNeverDisabled.render?.({} as never, {} as never)}</>);
+    expect(screen.getByText("Cancel")).toBeTruthy();
+  });
+});

package/src/actions/ActionBar.stories.tsx

@@ -0,0 +1,161 @@
+import { Button } from "@multiplatform.one/forms";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { Paragraph, YStack } from "tamagui";
+import { Card } from "../surfaces";
+import { ActionBar, type ActionBarProps } from "./ActionBar";
+
+/**
+ * Presses land in the story itself rather than the Actions panel: the panel's
+ * `action()` pulls the Storybook preview runtime into the module graph, which
+ * the package's own vitest run cannot load, and the colocated spec mounts
+ * these stories for real.
+ */
+function useLastPressed() {
+  const [last, setLast] = useState<string | null>(null);
+  return {
+    last,
+    press: (label: string) => () => setLast(label),
+    readout: (
+      <Paragraph size="$2" color="$color11">
+        {last === null ? "No action pressed yet." : `Last pressed: ${last}`}
+      </Paragraph>
+    ),
+  };
+}
+
+const meta: Meta<typeof ActionBar> = {
+  title: "Components/ActionBar",
+  component: ActionBar,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "The action row. Slots (`primary`, `secondary`, `cancel`) keep the primary singular by construction and order the row cancel → secondary → primary, so the trailing default lands under the thumb. `align` picks the justification: `end` for dialogs and toolbars, `start` for page-level forms. DG-ACT-05 strips `disabled` off the cancel slot and DEV-warns; DG-ACT-01 DEV-warns on a second primary, including one composed into free children; DG-OVL-04 DEV-warns past two actions inside a dialog region unless `allowManyActions` ejects.",
+      },
+    },
+  },
+  argTypes: {
+    align: { control: "radio", options: ["start", "end", "between"] },
+    allowManyActions: { control: "boolean" },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ActionBar>;
+
+function Basic(args: Partial<ActionBarProps>) {
+  const { press, readout } = useLastPressed();
+  return (
+    <Card maxWidth={480}>
+      <YStack gap="$3">
+        {readout}
+        <ActionBar
+          {...args}
+          cancel={
+            <Button chromeless onPress={press("Cancel")}>
+              Cancel
+            </Button>
+          }
+          primary={
+            <Button accent onPress={press("Save changes")}>
+              Save changes
+            </Button>
+          }
+        />
+      </YStack>
+    </Card>
+  );
+}
+
+function FullRow() {
+  const { press, readout } = useLastPressed();
+  return (
+    <Card maxWidth={520}>
+      <YStack gap="$3">
+        {readout}
+        <ActionBar
+          cancel={
+            <Button chromeless onPress={press("Cancel")}>
+              Cancel
+            </Button>
+          }
+          secondary={[
+            <Button key="draft" onPress={press("Save draft")}>
+              Save draft
+            </Button>,
+            <Button key="preview" onPress={press("Preview")}>
+              Preview
+            </Button>,
+          ]}
+          primary={
+            <Button accent onPress={press("Publish")}>
+              Publish
+            </Button>
+          }
+        />
+      </YStack>
+    </Card>
+  );
+}
+
+export const Default: Story = {
+  name: "Main",
+  args: { align: "end" },
+  render: (args) => <Basic {...args} />,
+};
+
+export const WithSecondary: Story = {
+  name: "Cancel + secondary + primary",
+  render: () => <FullRow />,
+};
+
+export const Alignments: Story = {
+  render: () => (
+    <YStack gap="$4" maxWidth={520}>
+      {(["start", "end", "between"] as const).map((align) => (
+        <Card key={align}>
+          <YStack gap="$2">
+            <Paragraph size="$2">{`align="${align}"`}</Paragraph>
+            <ActionBar
+              align={align}
+              cancel={<Button chromeless>Cancel</Button>}
+              primary={<Button accent>Confirm</Button>}
+            />
+          </YStack>
+        </Card>
+      ))}
+    </YStack>
+  ),
+};
+
+export const CancelNeverDisabled: Story = {
+  name: "Cancel is never disabled",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "DG-ACT-05: the cancel slot is handed `disabled`, the prop is stripped, and DEV logs `[actions] cancel-disabled`. A dismissal a user cannot reach is a trap, so the escape hatch stays live even while the primary is blocked. Open the console to see the warn.",
+      },
+    },
+  },
+  render: () => {
+    return (
+      <Card maxWidth={480}>
+        <ActionBar
+          cancel={
+            <Button chromeless disabled>
+              Cancel
+            </Button>
+          }
+          primary={
+            <Button accent disabled>
+              Save changes
+            </Button>
+          }
+        />
+      </Card>
+    );
+  },
+};

package/src/actions/ActionBar.tsx

@@ -10,6 +10,7 @@
 
 import {
   Children,
+  Fragment,
   cloneElement,
   isValidElement,
   useEffect,
@@ -194,10 +195,16 @@ export function ActionBar({
       width="100%"
       {...stackProps}
     >
+      {/* `secondaryItems` is a plain array (asArray), so rendering it bare made
+          React warn "Each child in a list should have a unique key" and name
+          the CALLER — the screen that passed a single element into the slot —
+          instead of this file. Key it here, where the array is built. */}
       {hasSlots ? (
         <>
           {cancelItems}
-          {secondaryItems}
+          {secondaryItems.map((node, index) => (
+            <Fragment key={`mp-action-secondary-${index}`}>{node}</Fragment>
+          ))}
           {primary}
         </>
       ) : null}

package/src/charts/Axis.stories.spec.tsx

@@ -0,0 +1,86 @@
+/**
+ * XAxis and YAxis are exported from the charts barrel but had no title of
+ * their own — only the composed charts had stories (MPO-193). happy-dom runs
+ * no layout, so a measured ChartSurface stays at width 0 and draws nothing;
+ * these specs render the same axis frame at an explicit pixel size so the
+ * marks the stories show are actually asserted.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { ChartSurface } from "./ChartSurface";
+import { XAxis, YAxis } from "./Axis";
+import { computeCartesianPlot } from "./composeChart";
+import { createBandScale, createLinearScale } from "./math";
+import meta, { AxisLineAndTicks, Default, LabelTruncation, WideValueRange } from "./Axis.stories";
+
+afterEach(cleanup);
+
+const categories = ["Mon", "Tue", "Wed", "Thu", "Fri"];
+
+function Frame({ showGrid = true }: { showGrid?: boolean }) {
+  return (
+    <ChartSurface label="Axis frame" width={400} height={200}>
+      {(size) => {
+        const plot = computeCartesianPlot(size, {
+          showXAxis: true,
+          showYAxis: true,
+          yTickLabels: ["0", "25", "50", "75", "100"],
+          fontSize: 12,
+        });
+        const xScale = createBandScale({
+          domain: categories,
+          range: [plot.x, plot.x + plot.width],
+        });
+        const yScale = createLinearScale({
+          domain: [0, 100],
+          range: [plot.y + plot.height, plot.y],
+        });
+        return (
+          <>
+            <YAxis plot={plot} scale={yScale} ticks={4} showGrid={showGrid} />
+            <XAxis plot={plot} scale={xScale} />
+          </>
+        );
+      }}
+    </ChartSurface>
+  );
+}
+
+describe("Axis stories", () => {
+  it("declares the Components/Axis title against the component", () => {
+    expect(meta.title).toBe("Components/Axis");
+    expect(meta.component).toBeDefined();
+  });
+
+  it("every exported story mounts", () => {
+    for (const story of [Default, AxisLineAndTicks, LabelTruncation, WideValueRange]) {
+      renderWithProviders(<>{story.render?.({} as never, {} as never)}</>);
+      cleanup();
+    }
+    expect(true).toBe(true);
+  });
+
+  it("Long labels truncate renders both container widths", () => {
+    renderWithProviders(<>{LabelTruncation.render?.({} as never, {} as never)}</>);
+    expect(screen.getByText("520px container")).toBeTruthy();
+    expect(screen.getByText("280px container")).toBeTruthy();
+  });
+
+  it("draws one x label per category and the y grid lines at a fixed size", () => {
+    const { container } = renderWithProviders(<Frame />);
+    const labels = Array.from(container.querySelectorAll("text")).map((node) => node.textContent);
+    for (const category of categories) expect(labels).toContain(category);
+    // 4-tick hint, plus the x baseline and one tick mark per category.
+    expect(container.querySelectorAll("line").length).toBeGreaterThan(categories.length);
+  });
+
+  it("showGrid=false drops the horizontal rules", () => {
+    const withGrid = renderWithProviders(<Frame />).container.querySelectorAll("line").length;
+    cleanup();
+    const withoutGrid = renderWithProviders(<Frame showGrid={false} />).container.querySelectorAll(
+      "line",
+    ).length;
+    expect(withoutGrid).toBeLessThan(withGrid);
+  });
+});