@multiplatform.one/table 7.10.0 → 7.15.0

package/src/components/DataTable/columnWidthLayout.spec.tsx

@@ -11,12 +11,34 @@
  * render. The combination warns instead, naming `columnLayout` as the reason.
  */
 
+import { fireEvent, waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { DataTableColumn } from "../../types";
 import { __resetTableDevWarnSeen, warnColumnWidthIgnored } from "../../shared/devWarn";
 import { DataTable } from "./index";
 
+vi.mock("@tanstack/react-virtual", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@tanstack/react-virtual")>();
+  return {
+    ...actual,
+    useVirtualizer: (options: Parameters<typeof actual.useVirtualizer>[0]) =>
+      actual.useVirtualizer({
+        ...options,
+        initialRect: { width: 800, height: 240 },
+        observeElementRect: (_instance, callback) => {
+          callback({ width: 800, height: 240 });
+          return () => {};
+        },
+        observeElementOffset: (_instance, callback) => {
+          callback(0, false);
+          return () => {};
+        },
+        scrollToFn: () => {},
+      }),
+  };
+});
+
 type Pokemon = { id: number; name: string; xp: number };
 
 const sampleData: Pokemon[] = [
@@ -193,3 +215,170 @@ describe("DataTable columnLayout=equal with per-column widths", () => {
     expect(widthWarnings()).toHaveLength(0);
   });
 });
+
+function hasSizingStyle(element: HTMLElement, property: string, value: string, token: string) {
+  return (
+    element.style.getPropertyValue(property) === value || String(element.className).includes(token)
+  );
+}
+
+function expectCellWidth(element: HTMLElement | null, width: number) {
+  expect(element).not.toBeNull();
+  expect(hasSizingStyle(element!, "width", `${width}px`, `_w-${width}px`)).toBe(true);
+}
+
+describe("DataTable declared column sizes", () => {
+  beforeEach(startCapture);
+  afterEach(stopCapture);
+
+  it.each(["alias", "canonical"])(
+    "applies %s widths to scroll headers, body and footer below the old floor",
+    (spelling) => {
+      const sizingColumns = plainColumns.map((column, index) => ({
+        ...column,
+        [spelling === "alias" ? "width" : "size"]: index === 0 ? 320 : 48,
+        footer: index === 0 ? "Totals" : "126",
+      }));
+      const { container } = renderTable(sizingColumns, "scroll");
+      expectCellWidth(container.querySelector("#name-header"), 320);
+      expectCellWidth(container.querySelector("#xp-header"), 48);
+      const cells = container.querySelectorAll('[aria-label="Table data"] [role="cell"]');
+      expect(cells.length).toBeGreaterThanOrEqual(4);
+      expectCellWidth(cells[0] as HTMLElement, 320);
+      expectCellWidth(cells[1] as HTMLElement, 48);
+      expect(hasSizingStyle(cells[1] as HTMLElement, "min-width", "0px", "_miw-0px")).toBe(true);
+      const footer = container.querySelectorAll('tfoot [role="cell"]');
+      expect(footer).toHaveLength(2);
+      expectCellWidth(footer[0] as HTMLElement, 320);
+      expectCellWidth(footer[1] as HTMLElement, 48);
+      expect(widthWarnings()).toHaveLength(0);
+    },
+  );
+
+  it("gives unpinned equal cells the same flex policy for canonical and alias declarations", () => {
+    const canonical = plainColumns.map((column, index) => ({
+      ...column,
+      size: index === 0 ? 320 : 80,
+    }));
+    const withSizes = renderTable(canonical);
+    const sizeMarkup = stripGeneratedIds(withSizes.container.innerHTML);
+    withSizes.unmount();
+    const withoutSizes = renderTable(plainColumns);
+    expect(stripGeneratedIds(withoutSizes.container.innerHTML)).toBe(sizeMarkup);
+  });
+
+  it("lets resizing use aliases in equal mode while preserving the fixed flex basis", () => {
+    const { container } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={widthColumns}
+        columnLayout="equal"
+        layout="table"
+        enableColumnResizing
+        enablePagination={false}
+        readOnly
+      />,
+    );
+    const header = container.querySelector("#name-header") as HTMLElement;
+    expectCellWidth(header, 320);
+    expect(hasSizingStyle(header, "flex-basis", "auto", "_fb-auto")).toBe(true);
+    expect(hasSizingStyle(header, "flex-grow", "0", "_fg-0")).toBe(true);
+    expect(widthWarnings()).toHaveLength(0);
+  });
+
+  it("does not inflate a 48px resizable equal-layout cell with the primitive width floor", () => {
+    const { container } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={[{ accessorKey: "xp", header: "XP", width: 48 }]}
+        columnLayout="equal"
+        layout="table"
+        enableColumnResizing
+        enablePagination={false}
+        readOnly
+      />,
+    );
+    const header = container.querySelector("#xp-header") as HTMLElement;
+    expectCellWidth(header, 48);
+    expect(hasSizingStyle(header, "min-width", "0px", "_miw-0px")).toBe(true);
+  });
+
+  it("passes size inputs to auto layout without changing its table algorithm", () => {
+    const { container } = renderTable(widthColumns, "auto");
+    expectCellWidth(container.querySelector("#name-header"), 320);
+    expect((container.querySelector('[role="table"]') as HTMLElement).style.tableLayout).toBe(
+      "fixed",
+    );
+  });
+
+  it("resizes an aliased column through the real header handle within its bounds", () => {
+    const columns = widthColumns.map((column) => ({ ...column, minWidth: 50, maxWidth: 350 }));
+    const { container, getByRole } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={columns}
+        columnLayout="scroll"
+        layout="table"
+        enableColumnResizing
+        enablePagination={false}
+        readOnly
+      />,
+    );
+    const handle = getByRole("separator", { name: "Resize Name column" });
+    expect(handle.getAttribute("aria-valuenow")).toBe("320");
+    fireEvent.mouseDown(handle, { clientX: 100 });
+    fireEvent.mouseMove(document, { clientX: 120 });
+    fireEvent.mouseUp(document, { clientX: 120 });
+    expectCellWidth(container.querySelector("#name-header"), 340);
+    fireEvent.mouseDown(handle, { clientX: 100 });
+    fireEvent.mouseMove(document, { clientX: 300 });
+    fireEvent.mouseUp(document, { clientX: 300 });
+    expectCellWidth(container.querySelector("#name-header"), 350);
+    expect(handle.getAttribute("aria-valuenow")).toBe("350");
+    const cell = container.querySelector<HTMLElement>('[aria-label="Table data"] [role="cell"]');
+    expectCellWidth(cell, 350);
+  });
+
+  it("exposes the normalized size to the view-options display on mount", async () => {
+    const { getByText } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={widthColumns}
+        columnLayout="scroll"
+        layout="table"
+        enableColumnResizing
+        enablePagination={false}
+        readOnly
+      >
+        <DataTable.ViewOptions showColumnResizing showColumnVisibility={false} />
+      </DataTable>,
+    );
+    await waitFor(() => expect(getByText("320px")).toBeDefined());
+    expect(getByText("80px")).toBeDefined();
+  });
+
+  it("uses the real virtual row renderer with the same declared widths", async () => {
+    const { container } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={widthColumns}
+        columnLayout="scroll"
+        layout="table"
+        enableVirtualization
+        virtualizationHeight={240}
+        enablePagination={false}
+        readOnly
+      />,
+    );
+    await waitFor(() => {
+      const virtualBody = container.querySelector('tbody[role="presentation"] [role="rowgroup"]');
+      expect(virtualBody).not.toBeNull();
+      expect(virtualBody!.querySelectorAll('[role="row"]')).toHaveLength(2);
+      const cells = virtualBody!.querySelectorAll('[role="cell"]');
+      expect(cells.length).toBeGreaterThanOrEqual(4);
+      expectCellWidth(cells[0] as HTMLElement, 320);
+      expectCellWidth(cells[1] as HTMLElement, 80);
+    });
+    expectCellWidth(container.querySelector("#name-header"), 320);
+  });
+});

package/src/components/DataTable/dataTableCardControls.spec.tsx

@@ -42,7 +42,7 @@ function renderCards(props: Record<string, any> = {}) {
 describe("DataTableCardControls", () => {
   it("is a labelled toolbar above the card list", () => {
     renderCards({ enableSorting: true, enableFiltering: true });
-    const toolbar = screen.getByRole("toolbar", { name: "Card list controls" });
+    const toolbar = screen.getByRole("toolbar", { name: "Table toolbar" });
     expect(toolbar).toBeTruthy();
     expect(screen.getByLabelText("Sort rows")).toBeTruthy();
   });
@@ -61,7 +61,8 @@ describe("DataTableCardControls", () => {
   it("filtering only: the filter chrome is there, the sort menu is not", () => {
     renderCards({ enableSorting: false, enableFiltering: true });
     expect(screen.queryByLabelText("Sort rows")).toBeNull();
-    expect(screen.getByText("Add Filter")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Filter" })).toBeTruthy();
+    expect(screen.queryByText("Add Filter")).toBeNull();
   });
 
   it("with no sort applied the trigger reads the neutral label", () => {

package/src/components/DataTable/dataTableMobileCards.spec.tsx

@@ -102,12 +102,9 @@ describe("DataTableMobileCards", () => {
   });
 
   it("a control keeps a row of its own and prints no label", () => {
-    // Explicit id on BOTH columns: DataTable seeds columnOrder from
-    // `col.id || ""`, so an id-less accessor column beside an id'd one would
-    // put `_actions` first and make the control the card title instead.
     const { container } = renderCards({
       columns: [
-        { id: "firstName", accessorKey: "firstName", header: "First Name" },
+        { accessorKey: "firstName", header: "First Name" },
         { id: "_actions", accessorKey: "lastName", header: "Actions", meta: { role: "actions" } },
       ],
     });

package/src/components/DataTable/footerLayout.spec.tsx

@@ -0,0 +1,250 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { fireEvent, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { DataTableColumn } from "../../types";
+import { DataTable } from "./index";
+
+// Happy DOM has no viewport measurements. Keep the actual virtualizer and row renderer.
+vi.mock("@tanstack/react-virtual", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@tanstack/react-virtual")>();
+  return {
+    ...actual,
+    useVirtualizer: (options: Parameters<typeof actual.useVirtualizer>[0]) =>
+      actual.useVirtualizer({
+        ...options,
+        initialRect: { width: 800, height: 240 },
+        observeElementRect: (_instance, callback) => {
+          callback({ width: 800, height: 240 });
+          return () => {};
+        },
+        observeElementOffset: (_instance, callback) => {
+          callback(0, false);
+          return () => {};
+        },
+        scrollToFn: () => {},
+      }),
+  };
+});
+
+const data = [{ id: "1", account: "Account 1", balance: "10.00" }];
+const columns: DataTableColumn<(typeof data)[number]>[] = [
+  { accessorKey: "account", header: "Account", size: 320, footer: "Totals" },
+  { accessorKey: "balance", header: "Balance", size: 80, footer: "10.00" },
+];
+const allAuxiliaries = {
+  enableRowSelection: true,
+  showRowNumbers: true,
+  enableRowExpansion: true,
+  showDeleteRow: true,
+};
+
+function renderTable(props = {}, size: "small" | "medium" | "large" = "medium") {
+  return renderWithProviders(
+    <Preset overrides={{ size }}>
+      <DataTable
+        data={data}
+        columns={columns}
+        layout="table"
+        columnLayout="scroll"
+        enablePagination={false}
+        {...props}
+      />
+    </Preset>,
+  );
+}
+
+function cells(row: Element): HTMLElement[] {
+  return [...row.children].filter((element) =>
+    ["cell", "columnheader"].includes(element.getAttribute("role") ?? ""),
+  ) as HTMLElement[];
+}
+
+function width(cell: HTMLElement): number {
+  return Number.parseFloat(
+    cell.style.width || /(?:^| )_w-([\d.]+)px(?: |$)/.exec(cell.className)?.[1] || "NaN",
+  );
+}
+
+function rows(container: HTMLElement) {
+  const header = container.querySelector('thead [role="row"]')!;
+  const body = container.querySelector('[aria-label="Row 1"]')!;
+  const footer = container.querySelector('tfoot [role="row"]')!;
+  expect(header).not.toBeNull();
+  expect(body).not.toBeNull();
+  expect(footer).not.toBeNull();
+  return { header: cells(header), body: cells(body), footer: cells(footer) };
+}
+
+function expectPinned(cell: HTMLElement, side: "start" | "end", offset: number) {
+  expect(cell.style.position).toBe("sticky");
+  expect(cell.style[side === "start" ? "insetInlineStart" : "insetInlineEnd"]).toBe(`${offset}px`);
+  expect(cell.style.zIndex).toBe("2");
+  expect(cell.style.backgroundColor).toBe("var(--color2)");
+}
+
+let previousDirection: string | null;
+beforeEach(() => {
+  previousDirection = document.documentElement.getAttribute("dir");
+});
+afterEach(() => {
+  if (previousDirection === null) document.documentElement.removeAttribute("dir");
+  else document.documentElement.setAttribute("dir", previousDirection);
+});
+
+describe.each(["ltr", "rtl"])("footer layout in %s", (direction) => {
+  beforeEach(() => document.documentElement.setAttribute("dir", direction));
+
+  it.each([
+    { name: "no auxiliaries", props: {}, leading: 0, trailing: 0 },
+    { name: "selection", props: { enableRowSelection: true }, leading: 1, trailing: 0 },
+    { name: "row numbers", props: { showRowNumbers: true }, leading: 1, trailing: 0 },
+    { name: "expansion", props: { enableRowExpansion: true }, leading: 1, trailing: 0 },
+    { name: "delete", props: { showDeleteRow: true }, leading: 0, trailing: 1 },
+    { name: "all auxiliaries", props: allAuxiliaries, leading: 3, trailing: 1 },
+    {
+      name: "read-only auxiliaries",
+      props: { ...allAuxiliaries, readOnly: true },
+      leading: 3,
+      trailing: 0,
+    },
+    {
+      name: "read-only delete suppressed",
+      props: { showDeleteRow: true, readOnly: true },
+      leading: 0,
+      trailing: 0,
+    },
+    {
+      name: "compact auxiliaries",
+      props: { ...allAuxiliaries, compact: true },
+      leading: 3,
+      trailing: 1,
+    },
+  ])("matches resolved header/body slots with $name", ({ props, leading, trailing }) => {
+    const { container } = renderTable(props);
+    const row = rows(container);
+    const headerWidths = row.header.map(width);
+    expect(row.header).toHaveLength(leading + 2 + trailing);
+    expect(headerWidths.every((value) => Number.isFinite(value) && value > 0)).toBe(true);
+    expect(headerWidths.slice(leading, leading + 2)).toEqual([320, 80]);
+    expect(row.body.map(width)).toEqual(headerWidths);
+    expect(row.footer.map(width)).toEqual(headerWidths);
+    expect(row.footer[leading]).toHaveTextContent("Totals");
+    expect(row.footer[leading + 1]).toHaveTextContent("10.00");
+    const auxiliaryCells = [...row.footer.slice(0, leading), ...row.footer.slice(leading + 2)];
+    for (const cell of auxiliaryCells) {
+      expect(cell.textContent).toBe("");
+      expect(cell.tabIndex).toBe(-1);
+      expect(
+        cell.querySelector('button, input, [role="button"], [role="checkbox"], [tabindex]'),
+      ).toBeNull();
+    }
+  });
+
+  it.each(["left", "right"] as const)(
+    "resolves pinned %s footer paint like header/body",
+    async (side) => {
+      const utils = renderTable({ enableColumnPinning: true });
+      fireEvent.click(utils.getByLabelText("Pin Account column left"));
+      if (side === "right") fireEvent.click(utils.getByLabelText("Pin Account column right"));
+      await waitFor(() =>
+        expect(
+          (utils.container.querySelector("#account-header") as HTMLElement).style.position,
+        ).toBe("sticky"),
+      );
+      const row = rows(utils.container);
+      const index = row.header.findIndex((cell) => cell.id === "account-header");
+      const logicalSide = side === "left" ? "start" : "end";
+      expectPinned(row.header[index], logicalSide, 0);
+      expectPinned(row.body[index], logicalSide, 0);
+      expectPinned(row.footer[index], logicalSide, 0);
+      expect(row.footer[1 - index].style.position).not.toBe("sticky");
+    },
+  );
+
+  it("follows resolved auxiliary widths at small and large preset sizes", () => {
+    const widthsBySize = ["small", "large"].map((size) => {
+      const utils = renderTable(allAuxiliaries, size as "small" | "large");
+      const row = rows(utils.container);
+      const headerWidths = row.header.map(width);
+      expect(headerWidths).toHaveLength(6);
+      expect(headerWidths.slice(3, 5)).toEqual([320, 80]);
+      expect(row.body.map(width)).toEqual(headerWidths);
+      expect(row.footer.map(width)).toEqual(headerWidths);
+      utils.unmount();
+      return headerWidths;
+    });
+    for (const index of [0, 1, 2, 5]) {
+      expect(widthsBySize[0][index]).toBeLessThan(widthsBySize[1][index]);
+    }
+  });
+
+  it.each([false, true])(
+    "reserves auxiliary flow around both pin sides, readOnly=%s",
+    async (readOnly) => {
+      const utils = renderTable({ ...allAuxiliaries, readOnly, enableColumnPinning: true });
+      fireEvent.click(utils.getByLabelText("Pin Account column left"));
+      fireEvent.click(utils.getByLabelText("Pin Balance column left"));
+      fireEvent.click(utils.getByLabelText("Pin Balance column right"));
+      await waitFor(() => expect(rows(utils.container).header[3].style.position).toBe("sticky"));
+      const row = rows(utils.container);
+      const headerWidths = row.header.map(width);
+      const leadingWidth = headerWidths.slice(0, 3).reduce((sum, value) => sum + value, 0);
+      const trailingWidth = readOnly ? 0 : headerWidths[5];
+      expect(leadingWidth).toBeGreaterThan(0);
+      expect(row.body.map(width)).toEqual(headerWidths);
+      expect(row.footer.map(width)).toEqual(headerWidths);
+      for (const section of [row.header, row.body, row.footer]) {
+        expectPinned(section[3], "start", leadingWidth);
+        expectPinned(section[4], "end", trailingWidth);
+      }
+    },
+  );
+
+  it("keeps actual virtual rows and auxiliary footer slots aligned after pinned resize", async () => {
+    const utils = renderWithProviders(
+      <DataTable
+        data={[
+          { id: "1", rank: 1, label: "Record 1" },
+          { id: "2", rank: 2, label: "Record 2" },
+        ]}
+        columns={[
+          { accessorKey: "rank", header: "Rank", size: 48, minSize: 32, maxSize: 64, footer: "2" },
+          { accessorKey: "label", header: "Label", size: 320, footer: "Total" },
+        ]}
+        layout="table"
+        columnLayout="scroll"
+        enableColumnResizing
+        enableColumnPinning
+        enableVirtualization
+        virtualizationHeight={240}
+        enablePagination={false}
+        {...allAuxiliaries}
+      />,
+    );
+    const virtualRows = () =>
+      utils.container.querySelectorAll('tbody[role="presentation"] [role="rowgroup"] [role="row"]');
+    await waitFor(() => expect(virtualRows()).toHaveLength(2));
+    fireEvent.click(utils.getByLabelText("Pin Rank column left"));
+    fireEvent.click(utils.getByLabelText("Pin Label column left"));
+    const header = () => cells(utils.container.querySelector('thead [role="row"]')!);
+    const leadingWidth = header()
+      .slice(0, 3)
+      .reduce((sum, cell) => sum + width(cell), 0);
+    expect(width(header()[3])).toBe(48);
+    expectPinned(header()[4], "start", leadingWidth + 48);
+    const handle = utils.getByRole("separator", { name: "Resize Rank column" });
+    fireEvent.mouseDown(handle, { clientX: 100 });
+    fireEvent.mouseMove(document, { clientX: 130 });
+    fireEvent.mouseUp(document, { clientX: 130 });
+    expect(width(header()[3])).toBe(64);
+    expectPinned(header()[4], "start", leadingWidth + 64);
+    const footer = cells(utils.container.querySelector('tfoot [role="row"]')!);
+    expect(virtualRows()).toHaveLength(2);
+    for (const section of [...virtualRows()].map(cells).concat([footer])) {
+      expect(section.map(width)).toEqual(header().map(width));
+      expectPinned(section[3], "start", leadingWidth);
+      expectPinned(section[4], "start", leadingWidth + 64);
+    }
+  });
+});

package/src/components/DataTable/headerContainment.spec.tsx

@@ -0,0 +1,91 @@
+/**
+ * MPO-336 / LC-10 FRAME-CONTAINMENT at the header grain.
+ *
+ * A header label wider than its column painted over the next column: the
+ * label run would not shrink below its max-content width, so a start-aligned
+ * label pushed its sort and filter glyphs into the neighbour and an
+ * end-aligned (number) label spilled left over the previous column. The
+ * label is now the part that yields: it shrinks to the column and wraps,
+ * breaking a long word if it must, while the glyphs keep their size.
+ *
+ * happy-dom does no layout, so this pins the flex contract that produces the
+ * containment. The painted geometry is measured in Storybook by the LC-10
+ * probe (`table-datatable--narrow-headers`, scripts/storybook-rubric).
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it } from "vitest";
+import type { DataTableColumn } from "../../types";
+import { DataTable } from "./index";
+
+type Row = { id: string; account: string; quantity: number };
+
+const rows: Row[] = [
+  { id: "1", account: "acme-website", quantity: 142 },
+  { id: "2", account: "tamagui-docs", quantity: 89 },
+];
+
+const columns: DataTableColumn<Row>[] = [
+  { id: "account", accessorKey: "account", header: "Customer account (input)", width: 96 },
+  {
+    id: "quantity",
+    accessorKey: "quantity",
+    header: "Quantity (stepper)",
+    align: "right",
+    width: 96,
+  },
+];
+
+function style(el: Element, prop: "flexShrink" | "minWidth" | "overflowWrap"): string {
+  const inline = (el as HTMLElement).style[prop];
+  return inline || getComputedStyle(el)[prop];
+}
+
+function renderNarrow() {
+  return renderWithProviders(
+    <DataTable<Row>
+      data={rows}
+      columns={columns}
+      layout="table"
+      columnLayout="scroll"
+      enableSorting
+      enableFiltering
+      enablePagination={false}
+      readOnly
+    />,
+  );
+}
+
+describe("DataTable header labels stay inside their column (MPO-336)", () => {
+  it.each(["account", "quantity"])("the %s label shrinks and wraps", (id) => {
+    const { container } = renderNarrow();
+    const header = container.querySelector(`#${id}-header`) as HTMLElement;
+    expect(header).toBeTruthy();
+    const label = header.querySelector("[data-header-label]");
+    expect(label, "header label run is marked").not.toBeNull();
+    expect(style(label!, "flexShrink")).toBe("1");
+    expect(style(label!, "minWidth")).toMatch(/^0(px)?$/);
+    expect(style(label!, "overflowWrap")).toBe("anywhere");
+    // Every ancestor between the label and the cell yields too, or the
+    // label's min-content width comes back through its parent.
+    for (let node = label!.parentElement; node && node !== header; node = node.parentElement) {
+      if (getComputedStyle(node).display === "contents") continue;
+      expect(style(node, "minWidth"), "ancestor min-width").toMatch(/^0(px)?$/);
+    }
+  });
+
+  it("the sort and filter glyphs keep their size", () => {
+    const { container } = renderNarrow();
+    const header = container.querySelector("#account-header") as HTMLElement;
+    const label = header.querySelector("[data-header-label]")!;
+    const glyphs = [...header.querySelectorAll("svg")];
+    expect(glyphs.length).toBeGreaterThanOrEqual(2);
+    for (const svg of glyphs) {
+      let node: Element | null = svg;
+      while (node && node.parentElement && !node.parentElement.contains(label)) {
+        node = node.parentElement;
+      }
+      expect(style(node!, "flexShrink"), "glyph slot").toBe("0");
+    }
+  });
+});

package/src/components/DataTable/pinningGeometry.spec.tsx

@@ -16,7 +16,7 @@
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { fireEvent, waitFor } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import type { DataTableColumn } from "../../types";
 import { DataTable } from "./index";
 
@@ -142,3 +142,68 @@ describe("column pinning geometry", () => {
     });
   });
 });
+
+afterEach(() => document.documentElement.removeAttribute("dir"));
+
+it.each(["ltr", "rtl"])(
+  "keeps declared small pinned boxes and logical offsets aligned in %s",
+  async (direction) => {
+    document.documentElement.setAttribute("dir", direction);
+    const utils = renderPinned({
+      columns: columns.map((column, index) => ({
+        ...column,
+        footer: String(column.header),
+        width: index === 0 ? 48 : 320,
+      })),
+    });
+    await pinIdColumn(utils);
+    fireEvent.click(utils.getByLabelText("Pin First Name column left"));
+    await waitFor(() => {
+      const first = utils.container.querySelector("#id-header") as HTMLElement;
+      const second = utils.container.querySelector("#firstName-header") as HTMLElement;
+      expect(hasStyle(first, "width", "48px", "_w-48px")).toBe(true);
+      expect(hasStyle(first, "minWidth", "48px", "_miw-48px")).toBe(true);
+      expect(hasStyle(first, "maxWidth", "48px", "_maw-48px")).toBe(true);
+      expect(second.style.insetInlineStart).toBe("48px");
+      const body = utils.container.querySelector('[role="row"][aria-label="Row 1"]')!;
+      const cells = body.querySelectorAll('[role="cell"]');
+      expect(hasStyle(cells[0] as HTMLElement, "width", "48px", "_w-48px")).toBe(true);
+      expect((cells[1] as HTMLElement).style.insetInlineStart).toBe("48px");
+      const footer = utils.container.querySelectorAll('tfoot [role="cell"]');
+      expect(hasStyle(footer[0] as HTMLElement, "width", "48px", "_w-48px")).toBe(true);
+      expect((footer[1] as HTMLElement).style.insetInlineStart).toBe("48px");
+    });
+  },
+);
+
+it.each(["ltr", "rtl"])(
+  "aligns right-pinned headers, rows and footers in %s",
+  async (direction) => {
+    document.documentElement.setAttribute("dir", direction);
+    const utils = renderPinned({
+      columns: columns.map((column, index) => ({
+        ...column,
+        footer: String(column.header),
+        width: index === 3 ? 76 : 320,
+      })),
+    });
+    for (const label of ["Last Name", "Age"]) {
+      fireEvent.click(utils.getByLabelText(`Pin ${label} column left`));
+      fireEvent.click(utils.getByLabelText(`Pin ${label} column right`));
+    }
+    await waitFor(() => {
+      const last = utils.container.querySelector("#age-header") as HTMLElement;
+      const previous = utils.container.querySelector("#lastName-header") as HTMLElement;
+      expect(hasStyle(last, "width", "76px", "_w-76px")).toBe(true);
+      expect(last.style.insetInlineEnd).toBe("0px");
+      expect(previous.style.insetInlineEnd).toBe("76px");
+      const body = utils.container.querySelector('[role="row"][aria-label="Row 1"]')!;
+      const cells = body.querySelectorAll('[role="cell"]');
+      expect(hasStyle(cells[3] as HTMLElement, "width", "76px", "_w-76px")).toBe(true);
+      expect((cells[2] as HTMLElement).style.insetInlineEnd).toBe("76px");
+      const footer = utils.container.querySelectorAll('tfoot [role="cell"]');
+      expect(hasStyle(footer[3] as HTMLElement, "width", "76px", "_w-76px")).toBe(true);
+      expect((footer[2] as HTMLElement).style.insetInlineEnd).toBe("76px");
+    });
+  },
+);

package/src/components/DataTable/rowPress.spec.tsx

@@ -31,13 +31,9 @@ const sampleData: Person[] = [
   { id: 3, firstName: "Carol", age: 20 },
 ];
 
-// Explicit ids: DataTable seeds columnOrder from `col.id || ""`, so mixing
-// id-less accessor columns with an id'd display column would reorder the
-// display column first (and identity fallbacks would read it as the "first
-// visible cell").
 const columns: DataTableColumn<Person>[] = [
-  { id: "firstName", accessorKey: "firstName", header: "First Name" },
-  { id: "age", accessorKey: "age", header: "Age" },
+  { accessorKey: "firstName", header: "First Name" },
+  { accessorKey: "age", header: "Age" },
 ];
 
 function pressRows(container: HTMLElement): HTMLElement[] {