@multiplatform.one/table-primitives 7.11.0 → 7.16.0

package/src/table.spec.tsx

@@ -247,6 +247,32 @@ describe("Table Primitives", () => {
     expect(bouncy.querySelector("td")?.getAttribute("data-animation")).toBe("on");
   });
 
+  it("survives the animation knob flipping live from none to bouncy (MPO-327)", () => {
+    const Flip = ({ animation }: { animation: "none" | "bouncy" }) => (
+      <Preset overrides={{ animation }}>
+        <Table>
+          <Table.Head>
+            <Table.Row>
+              <Table.HeaderCell>H</Table.HeaderCell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>C</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </Preset>
+    );
+    const { container, rerender } = renderWithProviders(<Flip animation="none" />);
+    expect(container.querySelector("table")?.getAttribute("data-animation")).toBe("none");
+
+    expect(() => rerender(<Flip animation="bouncy" />)).not.toThrow();
+    expect(container.querySelector("table")?.getAttribute("data-animation")).toBe("on");
+    expect(container.querySelector("tr")?.getAttribute("data-animation")).toBe("on");
+    expect(container.querySelector("td")?.getAttribute("data-animation")).toBe("on");
+  });
+
   it("honours textAccent on header labels and leaves body cells as T-VALUE", () => {
     const { container: high } = renderWithProviders(
       <Preset overrides={{ textAccent: "high" }}>
@@ -291,4 +317,75 @@ describe("Table Primitives", () => {
     expect(high.querySelector("td [data-text-accent]")).toBeNull();
     expect(low.querySelector("td [data-text-accent]")).toBeNull();
   });
+
+  function bodyTable(overrides: Record<string, string>, props: Record<string, unknown> = {}) {
+    return renderWithProviders(
+      <Preset overrides={overrides as any}>
+        <Table {...props}>
+          <Table.Head>
+            <Table.Row>
+              <Table.HeaderCell>Name</Table.HeaderCell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Plain</Table.Cell>
+            </Table.Row>
+            <Table.Row onPress={() => {}}>
+              <Table.Cell>Pressable</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </Preset>,
+    ).container;
+  }
+
+  // Token values render as atomic classes (`_h-t-size-3`), which jsdom's
+  // computed style cannot resolve, so the knob is read off the class list.
+  const atomic = (el: Element | null | undefined, prefix: string) =>
+    Array.from(el?.classList ?? []).filter((name) => name.startsWith(`_${prefix}-`));
+
+  it("carries the size knob to the row in the table composition, where min-height is inert", () => {
+    const heights = (["small", "medium", "large"] as const).map((size) => {
+      const cell = bodyTable({ size }).querySelector("tbody td");
+      const minHeight = atomic(cell, "mih");
+      expect(minHeight).toHaveLength(1);
+      expect(atomic(cell, "h")).toEqual([minHeight[0]?.replace("_mih-", "_h-")]);
+      return minHeight[0];
+    });
+    expect(heights).toEqual(["_mih-t-size-3", "_mih-t-size-4", "_mih-t-size-5"]);
+  });
+
+  it("floors a pressable row at the 44px press target and leaves a plain row to the size knob", () => {
+    const rows = bodyTable({ size: "small", space: "small" }).querySelectorAll("tbody tr");
+    const [plain, pressable] = Array.from(rows).map((row) => getComputedStyle(row));
+    expect(pressable?.height).toBe("44px");
+    expect(pressable?.minHeight).toBe("44px");
+    expect(plain?.height).toBe("");
+  });
+
+  it("gives the flex composition the same floors through min-height alone", () => {
+    const container = bodyTable({ size: "small" }, { displayMode: "flex" });
+    const cell = container.querySelector("tbody td");
+    expect(atomic(cell, "mih")).toEqual(["_mih-t-size-3"]);
+    expect(atomic(cell, "h")).toEqual([]);
+    const pressable = getComputedStyle(container.querySelectorAll("tbody tr")[1] as Element);
+    expect(pressable.minHeight).toBe("44px");
+    expect(pressable.height).toBe("");
+  });
+
+  it("keeps the frame fill at outlined, the same answer the card list gives (SF-CARD)", () => {
+    const frame = (fillStyle: string) =>
+      atomic(bodyTable({ fillStyle }).querySelector("table"), "bg");
+    expect(frame("filled")).toEqual(["_bg-background"]);
+    expect(frame("outlined")).toEqual(frame("filled"));
+
+    const card = (fillStyle: string) =>
+      atomic(
+        bodyTable({ fillStyle }, { layout: "cards" }).querySelector('[data-testid="table-card"]'),
+        "bg",
+      );
+    expect(card("filled")).toHaveLength(1);
+    expect(card("outlined")).toEqual(card("filled"));
+  });
 });

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}