@multiplatform.one/table 7.11.0 → 7.16.0

package/src/components/DataTable/DataTable.stories.tsx

@@ -605,6 +605,36 @@ export const WithColumnPinning: Story = {
   },
 };
 
+function RtlDocument({ children }: { children: React.ReactNode }) {
+  React.useEffect(() => {
+    const previous = document.documentElement.getAttribute("dir");
+    document.documentElement.setAttribute("dir", "rtl");
+    return () => {
+      if (previous === null) document.documentElement.removeAttribute("dir");
+      else document.documentElement.setAttribute("dir", previous);
+    };
+  }, []);
+  return <>{children}</>;
+}
+
+export const WithColumnPinningRTL: Story = {
+  name: "With Column Pinning RTL",
+  args: WithColumnPinning.args,
+  render: (args) => (
+    <RtlDocument>
+      <DataTable {...args} />
+    </RtlDocument>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "WithColumnPinning under a right-to-left document. Pinned columns stick to the inline start and end, which are the right and left edges here, and each sticky inset is the summed width of the pinned cells before it (MPO-236).",
+      },
+    },
+  },
+};
+
 export const WithKeyboardNavigation: Story = {
   args: {
     data: sampleData,
@@ -2951,15 +2981,11 @@ export const CompoundComposition: Story = {
  */
 const RowPressStory = () => {
   const data = useMemo(() => generateUsers(8), []);
-  // Explicit ids on every column: DataTable seeds columnOrder from
-  // `col.id || ""`, so mixing id-less accessor columns with id'd display
-  // columns would reorder the id'd ones first.
   const rowPressColumns = useMemo<DataTableColumn<User>[]>(
     () => [
-      { id: "firstName", accessorKey: "firstName", header: "First Name" },
-      { id: "department", accessorKey: "department", header: "Department" },
+      { accessorKey: "firstName", header: "First Name" },
+      { accessorKey: "department", header: "Department" },
       {
-        id: "salary",
         accessorKey: "salary",
         header: "Salary",
         align: "right",
@@ -3321,3 +3347,42 @@ export const ColumnWidthContract: Story = {
     );
   },
 };
+
+const narrowHeaderRows = [
+  { id: "1", account: "acme-website", quantity: 142, status: "Live", owner: "Rivera" },
+  { id: "2", account: "tamagui-docs", quantity: 89, status: "Draft", owner: "Okafor" },
+  { id: "3", account: "mobile-app", quantity: 34, status: "Live", owner: "Lindqvist" },
+];
+
+const narrowHeaderColumns: DataTableColumn<(typeof narrowHeaderRows)[number]>[] = [
+  { id: "account", accessorKey: "account", header: "Customer account (input)", width: 104 },
+  {
+    id: "quantity",
+    accessorKey: "quantity",
+    header: "Quantity (stepper)",
+    align: "right",
+    width: 104,
+  },
+  { id: "status", accessorKey: "status", header: "Status (select)", width: 104 },
+  { id: "owner", accessorKey: "owner", header: "Responsibilities", width: 104 },
+];
+
+/**
+ * MPO-336 / LC-10: every column is narrower than its header label plus the
+ * sort and filter glyphs. Each label wraps inside its own header cell, a
+ * single long word breaks rather than overflowing, and the glyphs stay in
+ * their column. Quantity is right-aligned (numbers, DG-TBL-01), the case
+ * that used to spill left over the previous column.
+ */
+export const NarrowHeaders: Story = {
+  args: {
+    data: narrowHeaderRows,
+    columns: narrowHeaderColumns as DataTableColumn<Record<string, any>>[],
+    layout: "table",
+    columnLayout: "scroll",
+    enableSorting: true,
+    enableFiltering: true,
+    enablePagination: false,
+    readOnly: true,
+  },
+};

package/src/components/DataTable/DataTableRoot.tsx

@@ -1658,21 +1658,39 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                     }
                                   : {})}
                               >
+                                {/* LC-10 (MPO-336): only the label yields
+                                    to a narrow column; the glyphs keep their
+                                    size or they paint into the next one. The
+                                    filter cluster wraps under the label first,
+                                    so the label keeps the column's width. */}
                                 <View
                                   flexDirection="row"
+                                  flexWrap="wrap"
                                   gap="$2"
                                   alignItems="center"
                                   justifyContent={isRightAligned ? "flex-end" : "space-between"}
                                   flex={1}
+                                  minWidth={0}
                                 >
                                   <View
                                     flexDirection="row"
                                     gap="$2"
                                     alignItems="center"
-                                    flex={isRightAligned ? undefined : 1}
+                                    flexGrow={isRightAligned ? 0 : 1}
+                                    flexShrink={1}
+                                    flexBasis="auto"
+                                    minWidth={0}
                                     justifyContent={isRightAligned ? "flex-end" : undefined}
                                   >
-                                    <Text fontSize={knobProps.sizeToken} userSelect="none">
+                                    <Text
+                                      fontSize={knobProps.sizeToken}
+                                      userSelect="none"
+                                      flexShrink={1}
+                                      minWidth={0}
+                                      textAlign={isRightAligned ? "right" : undefined}
+                                      data-header-label=""
+                                      {...(isWeb ? { style: { overflowWrap: "anywhere" } } : {})}
+                                    >
                                       {header.isPlaceholder
                                         ? null
                                         : flexRender(
@@ -1690,7 +1708,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                               : t("Click to sort (Shift+click for multi-sort)")
                                         }
                                       >
-                                        <View aria-hidden={true} role="presentation">
+                                        <View aria-hidden={true} role="presentation" flexShrink={0}>
                                           {sortDirection === "asc" && (
                                             <CaretDownIcon
                                               size={chrome.iconPx}
@@ -1714,7 +1732,12 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                       </Tooltip>
                                     )}
                                   </View>
-                                  <View flexDirection="row" gap="$1" alignItems="center">
+                                  <View
+                                    flexDirection="row"
+                                    gap="$1"
+                                    alignItems="center"
+                                    flexShrink={0}
+                                  >
                                     {enableFiltering && header.column.getCanFilter() && (
                                       <ColumnHeaderFilter
                                         columnId={header.column.id}

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/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/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[] {

package/src/components/DataTableBulkActions/DataTableBulkActions.stories.tsx

@@ -1,6 +1,7 @@
+import { Checkbox } from "@multiplatform.one/forms";
 import { action } from "@multiplatform.one/storybook";
 import React from "react";
-import { Checkbox, Text, XStack, YStack } from "tamagui";
+import { Text, XStack, YStack } from "tamagui";
 import { type BulkAction, DataTableBulkActions, useRowSelection } from "./index";
 
 // Define the data type
@@ -309,7 +310,7 @@ export const WithRowSelectionHook = () => {
           >
             <Checkbox
               checked={selection.isSelected(task)}
-              onCheckedChange={() => {}} // Handled by onPress
+              onChange={() => {}} // Handled by onPress
             />
             <YStack flex={1}>
               <Text fontWeight="500">{task.title}</Text>
@@ -324,9 +325,9 @@ export const WithRowSelectionHook = () => {
       <XStack gap="$3" alignItems="center">
         <Checkbox
           checked={selection.isAllSelected || selection.isIndeterminate}
-          onCheckedChange={() => selection.toggleAll()}
+          onChange={() => selection.toggleAll()}
+          label="Select All"
         />
-        <Text>Select All</Text>
         <Text fontSize="$2" color="$gray11">
           ({selection.selectedItems.length} selected)
         </Text>

package/src/components/DataTableBulkActions/index.tsx

@@ -172,7 +172,7 @@ export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T
             <Button
               key={action.id}
               size={knobProps.sizeToken}
-              theme={action.variant === "destructive" ? "red" : undefined}
+              error={action.variant === "destructive"}
               disabled={action.disabled}
               // DG-ST-03: reason renders via the Button explain affordance;
               // executing is derived busy state (spinner), not a bare disable.

package/src/components/DataTableCell/CellModalEditor.tsx

@@ -1,23 +1,30 @@
 /**
  * CellModalEditor — wraps tall field types (FileUpload, Signature, RichText,
- * etc.) in a Tamagui Dialog that opens on cell click. Cell shows a compact
- * `FieldDisplay` summary; click opens a centered modal with the full editor.
+ * etc.) in a forms FloatingPanel that opens on cell click. The cell shows a
+ * compact `FieldDisplay` summary; a click opens the full editor in a panel
+ * that attaches to the cell it was opened from (MPO-38 cover contract), the
+ * same FloatingPanel the native variant uses (a sheet there and at 640 and
+ * below). It never grows the row (LC-06).
  *
- * The modal is a staging buffer (UX-023 / Axiom 7 AGENCY): the inner editor
+ * The panel is a staging buffer (UX-023 / Axiom 7 AGENCY): the inner editor
  * is wired to a local draft seeded from the committed value on open — nothing
- * reaches the row while the modal is open. "Done" commits the draft once via
+ * reaches the row while the panel is open. "Done" commits the draft once via
  * `onCommit`; an outside click also commits (LC-21: a cell editor's draft
  * still commits on the outside-click close); "Cancel" and Escape discard the
  * draft and leave the row untouched. Cancel is never disabled (LC-30) and the
- * footer stays within the two-action dialog budget (LC-31).
+ * footer stays within the two-action budget (LC-31).
  */
 
-import { DialogContent, DialogOverlay } from "@multiplatform.one/components";
-import { Button, FieldDisplay, type FieldDisplayType } from "@multiplatform.one/forms";
+import {
+  Button,
+  FieldDisplay,
+  FloatingPanel,
+  type FieldDisplayType,
+} from "@multiplatform.one/forms";
 import { TableCellContext } from "@multiplatform.one/table-primitives";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useCallback, useRef, useState, type ReactNode } from "react";
-import { Dialog, View, XStack, YStack, isWeb } from "tamagui";
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import { Text, View, XStack, YStack, isWeb } from "tamagui";
 import { t } from "../../shared/t";
 
 export interface CellModalEditorProps {
@@ -29,12 +36,12 @@ export interface CellModalEditorProps {
   /** Commits the staged draft to the row. Fires at most once per session. */
   onCommit: (value: any) => void;
   /**
-   * Full editor mounted inside the modal, wired to the staged draft: render
+   * Full editor mounted inside the panel, wired to the staged draft: render
    * with `draftValue` and report edits through `onDraftChange` — never
    * straight to the row.
    */
   children: (draftValue: any, onDraftChange: (value: any) => void) => ReactNode;
-  /** Title shown in the modal header. */
+  /** Title shown in the panel header. */
   title?: string;
   /**
    * Accessible name for the chromeless cell trigger (column header).
@@ -56,7 +63,7 @@ export function CellModalEditor({
 }: CellModalEditorProps) {
   const { knobProps } = useResolvedKnobs();
   const [open, setOpen] = useState(false);
-  // Draft session: exists only while the modal is open, seeded from the
+  // Draft session: exists only while the panel is open, seeded from the
   // committed value so the editor starts at the cell's current value
   // (Axiom 11 VALUE IS DATA).
   const [draft, setDraft] = useState<{ value: any } | null>(null);
@@ -67,7 +74,7 @@ export function CellModalEditor({
   const onCommitRef = useRef(onCommit);
   onCommitRef.current = onCommit;
   // Escape / Cancel flag the close as a discard before onOpenChange(false)
-  // lands; every other close path (Done, overlay/outside click) commits.
+  // lands; every other close path (Done, outside click) commits.
   const discardRef = useRef(false);
 
   const handleOpen = useCallback(() => {
@@ -97,6 +104,18 @@ export function CellModalEditor({
     [handleOpen],
   );
 
+  // FloatingPanel reports every close as onOpenChange(false). Escape is a
+  // dismissal, not a confirm, so it is flagged in the capture phase, before
+  // the panel's own Escape listener closes it.
+  useEffect(() => {
+    if (!open || !isWeb || typeof document === "undefined") return;
+    const flagEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") discardRef.current = true;
+    };
+    document.addEventListener("keydown", flagEscape, true);
+    return () => document.removeEventListener("keydown", flagEscape, true);
+  }, [open]);
+
   const handleCancel = useCallback(() => {
     discardRef.current = true;
     handleOpenChange(false);
@@ -108,76 +127,77 @@ export function CellModalEditor({
   }, []);
 
   const triggerLocked = disabled || readOnly;
-  const handleTriggerKeyDown = (event: { key?: string; preventDefault?: () => void }) => {
+  const handleTriggerKeyDown = (event: {
+    key?: string;
+    preventDefault?: () => void;
+    stopPropagation?: () => void;
+  }) => {
     if (triggerLocked) return;
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault?.();
+      event.stopPropagation?.();
       handleOpen();
     }
   };
 
+  const trigger = (
+    <View
+      cursor={triggerLocked ? "default" : "pointer"}
+      opacity={disabled ? 0.5 : 1}
+      flexDirection="row"
+      alignItems="center"
+      width="100%"
+      paddingHorizontal="$1"
+      paddingVertical="$1"
+      hoverStyle={!triggerLocked ? { backgroundColor: "$backgroundHover" } : undefined}
+      // LC-71: parent CellWrapper paints the one ring on the cell boundary.
+      outlineWidth={0}
+      focusVisibleStyle={{ outlineWidth: 0 }}
+      {...(isWeb && !triggerLocked
+        ? {
+            role: "button" as const,
+            tabIndex: 0,
+            "aria-label": label,
+            "aria-haspopup": "dialog" as const,
+            "aria-expanded": open,
+            onKeyDown: handleTriggerKeyDown,
+          }
+        : undefined)}
+    >
+      <FieldDisplay field={field} value={value} fieldProps={fieldProps} />
+    </View>
+  );
+
   return (
-    <>
-      <View
-        onPress={handleOpen}
-        cursor={triggerLocked ? "default" : "pointer"}
-        opacity={disabled ? 0.5 : 1}
-        flexDirection="row"
-        alignItems="center"
-        width="100%"
-        paddingHorizontal="$1"
-        paddingVertical="$1"
-        hoverStyle={!triggerLocked ? { backgroundColor: "$backgroundHover" } : undefined}
-        // LC-71: parent CellWrapper paints the one ring on the cell boundary.
-        outlineWidth={0}
-        focusVisibleStyle={{ outlineWidth: 0 }}
-        {...(isWeb && !triggerLocked
-          ? {
-              role: "button" as const,
-              tabIndex: 0,
-              "aria-label": label,
-              "aria-haspopup": "dialog" as const,
-              "aria-expanded": open,
-              onKeyDown: handleTriggerKeyDown,
-            }
-          : undefined)}
+    <FloatingPanel
+      open={open}
+      onOpenChange={handleOpenChange}
+      disabled={triggerLocked}
+      trigger={trigger}
+    >
+      <YStack
+        {...knobProps.gap}
+        width={720}
+        maxWidth="90vw"
+        data-testid="cell-modal-editor-panel"
+        data-dismiss-class="compose"
       >
-        <FieldDisplay field={field} value={value} fieldProps={fieldProps} />
-      </View>
-      <Dialog open={open} onOpenChange={handleOpenChange} modal>
-        <Dialog.Portal>
-          <DialogOverlay opacity={0.5} />
-          <DialogContent
-            maxWidth={720}
-            maxHeight="80vh"
-            width="90vw"
-            // Escape is a dismissal, not a confirm: mark the pending close as
-            // a discard, then let the Dialog close itself.
-            onEscapeKeyDown={() => {
-              discardRef.current = true;
-            }}
-          >
-            <Dialog.Title {...knobProps.heading}>{title ?? t("Edit")}</Dialog.Title>
-            {/* flexShrink (not flex-basis 0): in the auto-height dialog a
-                basis-0 wrapper collapses and its children paint over the
-                footer / past the dialog frame (LC-10). The context reset
-                restores full field chrome — the modal is not a table cell,
-                but React context flows through the Dialog portal. */}
-            <YStack flexShrink={1} minHeight={0}>
-              <TableCellContext.Provider value={{ inTableCell: false }}>
-                {children(draft ? draft.value : value, handleDraftChange)}
-              </TableCellContext.Provider>
-            </YStack>
-            <XStack {...knobProps.gap} justifyContent="flex-end">
-              {/* LC-30 CANCEL-ALWAYS-LIVE: the discard exit never disables. */}
-              <Button onPress={handleCancel}>{t("Cancel")}</Button>
-              <Button theme="accent" onPress={() => handleOpenChange(false)}>
-                {t("Done")}
-              </Button>
-            </XStack>
-          </DialogContent>
-        </Dialog.Portal>
-      </Dialog>
-    </>
+        <Text {...knobProps.heading}>{title ?? t("Edit")}</Text>
+        {/* The panel is not a table cell: restore full field chrome. React
+            context flows in because the panel renders inline (no portal). */}
+        <YStack flexShrink={1} minHeight={0}>
+          <TableCellContext.Provider value={{ inTableCell: false }}>
+            {children(draft ? draft.value : value, handleDraftChange)}
+          </TableCellContext.Provider>
+        </YStack>
+        <XStack {...knobProps.gap} justifyContent="flex-end">
+          {/* LC-30 CANCEL-ALWAYS-LIVE: the discard exit never disables. */}
+          <Button onPress={handleCancel}>{t("Cancel")}</Button>
+          <Button theme="accent" onPress={() => handleOpenChange(false)}>
+            {t("Done")}
+          </Button>
+        </XStack>
+      </YStack>
+    </FloatingPanel>
   );
 }

package/src/components/DataTableCell/cellDraftPolicy.spec.tsx

@@ -153,7 +153,8 @@ function MockRadioGroup({ value, onValueChange, options }: any) {
 
 /**
  * Functional FloatingPanel fake: trigger toggles open; children render only
- * while open (mirrors the popover/sheet contract CellOptionsEditor relies on).
+ * while open; Escape inside closes it (mirrors the popover/sheet contract
+ * CellOptionsEditor and CellModalEditor rely on).
  */
 function MockFloatingPanel({ open, onOpenChange, trigger, children, disabled }: any) {
   return (
@@ -166,7 +167,16 @@ function MockFloatingPanel({ open, onOpenChange, trigger, children, disabled }:
       >
         {trigger}
       </div>
-      {open ? <div data-testid="floating-panel-content">{children}</div> : null}
+      {open ? (
+        <div
+          data-testid="floating-panel-content"
+          onKeyDown={(event) => {
+            if (event.key === "Escape") onOpenChange?.(false);
+          }}
+        >
+          {children}
+        </div>
+      ) : null}
     </div>
   );
 }