@multiplatform.one/table 7.10.0 → 7.15.0

package/src/components/DataTable/DataTableRoot.tsx

@@ -43,7 +43,7 @@ import type {
 } from "../../types";
 import { DataTableColumnPinning } from "../DataTableColumnPinning";
 import { DataTablePagination } from "../DataTablePagination";
-import { DataTableToolbar } from "../DataTableToolbar";
+import { DataTableCardToolbar, DataTableToolbar } from "../DataTableToolbar";
 import { DataTableBulkActions } from "../DataTableBulkActions";
 import { DataTableCell } from "../DataTableCell";
 import { ColumnHeaderFilter } from "../ColumnHeaderFilter";
@@ -56,7 +56,7 @@ import type {
   DataTableStateContextValue,
   FilterEditTarget,
 } from "./DataTableStateContext";
-import { DataTableCardControls } from "./DataTableCardControls";
+import { DataTableCardControls, DataTableCardSortControl } from "./DataTableCardControls";
 import { DataTableMobileCards } from "./DataTableMobileCards";
 import { DataTableDocumentList } from "./DataTableDocumentList";
 import { DataTableVirtualized } from "./DataTableVirtualized";
@@ -334,6 +334,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
           flexBasis: "auto" as const,
         };
       }
+      if (columnLayout === "equal" && !enableColumnResizing) return {};
       // Scroll layout needs one concrete width per column (from the column
       // def, TanStack default otherwise) so independent flex rows stay
       // aligned while the table grows past its container.
@@ -461,13 +462,13 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
       // flexBasis auto, not the `flex: 0` shorthand: RN expands `flex: 0` to
       // basis 0, which overrides per-column widths and crushes every cell to
       // the minWidth floor (contents then overflow and get clipped).
-      return { flexGrow: 0, flexShrink: 0, flexBasis: "auto" as const, minWidth: 80 };
+      return { flexGrow: 0, flexShrink: 0, flexBasis: "auto" as const, minWidth: 0 };
     }
     // Same flexBasis trap as the scroll branch above: `flex: 0` expands to
     // basis 0 and the per-column width from getColSizeProps loses, crushing
     // every resizable cell to the min-width floor (content then overlaps).
     if (enableColumnResizing) {
-      return { flexGrow: 0, flexShrink: 0, flexBasis: "auto" as const };
+      return { flexGrow: 0, flexShrink: 0, flexBasis: "auto" as const, minWidth: 0 };
     }
     return { flex: 1, flexShrink: 1, flexGrow: 1, flexBasis: 0, minWidth: 0 };
   }, [isFlexLayout, columnLayout, enableColumnResizing]);
@@ -1124,6 +1125,12 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
     [table, state, actions, computed, selectAllScope, filterUi],
   );
 
+  const hasCardSort =
+    showCards &&
+    enableSorting &&
+    table.getVisibleLeafColumns().some((column) => column.getCanSort());
+  const defaultCardToolbar = showCards && !renderToolbar;
+  const ToolbarComponent = defaultCardToolbar ? DataTableCardToolbar : DataTableToolbar;
   const renderToolbarComponent = () => {
     const activeFilterCount = table.getState().columnFilters?.length || 0;
 
@@ -1143,10 +1150,20 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
     }
 
     return (
-      <DataTableToolbar
+      <ToolbarComponent
         globalFilter={state.globalFilter || ""}
         onGlobalFilterChange={actions.setGlobalFilter}
         onClearFilters={actions.clearFilters}
+        customActions={
+          defaultCardToolbar && hasCardSort ? (
+            <DataTableCardSortControl
+              table={table}
+              compact={isCompact}
+              disabled={disabled}
+              contained
+            />
+          ) : undefined
+        }
         activeFilterCount={activeFilterCount}
         onSaveView={actions.saveView}
         onLoadView={actions.loadView}
@@ -1192,7 +1209,8 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
       newValue: any,
     ) => Promise<void>,
   ) => {
-    const hasToolbar = enableGlobalSearch || enableFiltering || enableViews;
+    const hasToolbar =
+      enableGlobalSearch || enableFiltering || enableViews || (defaultCardToolbar && hasCardSort);
     const scrollContainerRef = useRef<HTMLDivElement>(null);
 
     // DF-12 / Axiom 6 HONEST STATE — a height-constrained body clips rows
@@ -1347,14 +1365,16 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
               <>
                 {/* Header affordances (sort / per-column filter) live in the
                     grid headers; the card list restores them here. */}
-                <DataTableCardControls
-                  table={table}
-                  enableSorting={enableSorting}
-                  enableFiltering={enableFiltering}
-                  availableColumns={cardFilterColumns}
-                  compact={isCompact}
-                  disabled={disabled}
-                />
+                {!defaultCardToolbar && (
+                  <DataTableCardControls
+                    table={table}
+                    enableSorting={enableSorting}
+                    enableFiltering={enableFiltering}
+                    availableColumns={cardFilterColumns}
+                    compact={isCompact}
+                    disabled={disabled}
+                  />
+                )}
                 <DataTableMobileCards
                   tableRows={displayRows}
                   enableRowSelection={enableRowSelection}
@@ -1638,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(
@@ -1670,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}
@@ -1694,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}
@@ -2085,7 +2128,31 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                     <Table.Foot>
                       {footerGroups.map((footerGroup: any) => (
                         <Table.Row key={footerGroup.id}>
+                          {enableRowSelection && (
+                            <Table.Cell
+                              cellWidth={selectionColWidth}
+                              cellHeight={cellHeight as any}
+                              cellLocation="first"
+                            />
+                          )}
+                          {showRowNumbers && (
+                            <Table.Cell
+                              cellWidth={chrome.rowNumberCol}
+                              cellHeight={cellHeight as any}
+                              cellLocation={enableRowSelection ? "middle" : "first"}
+                            />
+                          )}
+                          {enableRowExpansion && (
+                            <Table.Cell
+                              cellWidth={chrome.expandCol}
+                              cellHeight={cellHeight as any}
+                              cellLocation={
+                                enableRowSelection || showRowNumbers ? "middle" : "first"
+                              }
+                            />
+                          )}
                           {footerGroup.headers.map((header: any) => {
+                            const stickyStyle = getStickyStyle(header.column.id);
                             const columnAlign = resolveColumnAlign({
                               ...(header.column.columnDef as DataTableColumn),
                               id: header.column.id,
@@ -2093,6 +2160,23 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                             return (
                               <Table.Cell
                                 key={header.id}
+                                {...cellFlexProps}
+                                {...getColSizeProps(header.column)}
+                                {...(isWeb && stickyStyle
+                                  ? {
+                                      style: {
+                                        position: "sticky",
+                                        ...("insetInlineStart" in stickyStyle && {
+                                          insetInlineStart: stickyStyle.insetInlineStart,
+                                        }),
+                                        ...("insetInlineEnd" in stickyStyle && {
+                                          insetInlineEnd: stickyStyle.insetInlineEnd,
+                                        }),
+                                        zIndex: 2,
+                                        backgroundColor: "var(--color2)",
+                                      } as React.CSSProperties,
+                                    }
+                                  : {})}
                                 justifyContent={alignToFlex(columnAlign)}
                                 data-align={columnAlign}
                               >
@@ -2115,6 +2199,13 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                               </Table.Cell>
                             );
                           })}
+                          {showDeleteRow && !readOnly && (
+                            <Table.Cell
+                              cellWidth={chrome.deleteCol}
+                              cellHeight={cellHeight as any}
+                              cellLocation="last"
+                            />
+                          )}
                         </Table.Row>
                       ))}
                     </Table.Foot>

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

@@ -283,11 +283,12 @@ describe("DataTable card layout", () => {
       expect(titles).toEqual(["John"]);
     });
 
-    it("renders the filter chrome (Add Filter) in card layout", () => {
-      const { getByText } = renderWithProviders(
+    it("renders the canonical Filter in card layout", () => {
+      const { getByRole, queryByText } = renderWithProviders(
         <DataTable data={sampleData} columns={columns} onStateChange={vi.fn()} />,
       );
-      expect(getByText("Add Filter")).toBeDefined();
+      expect(getByRole("button", { name: "Filter" })).toBeDefined();
+      expect(queryByText("Add Filter")).toBeNull();
     });
 
     it("hides sort/filter chrome when sorting and filtering are disabled", () => {

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

@@ -0,0 +1,238 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor, within } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { DataTableColumn, FilterableField } from "../../types";
+import { DataTableCardToolbar, DataTableToolbar } from "../DataTableToolbar";
+import { DataTableCardSortControl } from "./DataTableCardControls";
+import { useDataTableState } from "./DataTableStateContext";
+import { DataTable } from "./index";
+
+const filings = [
+  { id: "a", form: "Alpha", entity: "personal", year: 2023 },
+  { id: "b", form: "Beta", entity: "business", year: 2024 },
+  { id: "c", form: "Gamma", entity: "personal", year: 2023 },
+];
+const columns: DataTableColumn<(typeof filings)[number]>[] = [
+  { accessorKey: "form", header: "Form" },
+  { accessorKey: "entity", header: "Entity" },
+];
+const filterableFields: FilterableField[] = [{ id: "year", label: "Year", type: "number" }];
+
+function Cards(props: Record<string, any>) {
+  return (
+    <DataTable
+      data={filings}
+      columns={columns}
+      filterableFields={filterableFields}
+      layout="cards"
+      enableGlobalSearch={false}
+      onStateChange={vi.fn()}
+      {...props}
+    />
+  );
+}
+
+function cardTitles(container: HTMLElement) {
+  return [...container.querySelectorAll('[data-card-slot="title"]')].map((el) => el.textContent);
+}
+
+function AllCardActionsToolbar(props: Record<string, any>) {
+  const { table } = useDataTableState()!;
+  return (
+    <DataTableCardToolbar
+      {...props}
+      enableExport
+      enableViews
+      isFetching
+      customActions={<DataTableCardSortControl table={table} contained />}
+    />
+  );
+}
+
+describe("default card toolbar", () => {
+  it("owns Filter and Sort in one primary row with no duplicate controls", () => {
+    const { container } = renderWithProviders(<Cards />);
+    const toolbar = screen.getByRole("toolbar", { name: "Table toolbar" });
+    expect(screen.getAllByRole("toolbar")).toHaveLength(1);
+    const primary = container.querySelector<HTMLElement>("[data-table-card-primary]")!;
+    expect(toolbar.contains(primary)).toBe(true);
+    expect(primary.contains(screen.getByRole("button", { name: "Filter" }))).toBe(true);
+    expect(primary.contains(screen.getByLabelText("Sort rows"))).toBe(true);
+    expect(screen.queryByText("Add Filter")).toBeNull();
+  });
+
+  it("keeps search and secondary view/fetching controls outside the primary pair", () => {
+    const { container } = renderWithProviders(<Cards enableGlobalSearch enableViews isFetching />);
+    const primary = container.querySelector<HTMLElement>("[data-table-card-primary]")!;
+    const secondary = container.querySelector<HTMLElement>("[data-table-card-secondary]")!;
+    expect(primary).not.toBeNull();
+    expect(secondary).not.toBeNull();
+    expect(primary.contains(screen.getByLabelText("Search table data"))).toBe(false);
+    expect(secondary.contains(screen.getByLabelText("Save view"))).toBe(true);
+    expect(secondary.querySelector("[data-table-fetching]")).not.toBeNull();
+    expect(primary.contains(secondary)).toBe(false);
+  });
+
+  it("keeps a sort-only toolbar when search, filtering and views are all off", () => {
+    renderWithProviders(<Cards enableFiltering={false} enableViews={false} />);
+    const toolbar = screen.getByRole("toolbar", { name: "Table toolbar" });
+    expect(within(toolbar).getByLabelText("Sort rows")).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Filter" })).toBeNull();
+  });
+
+  it("does not create an empty toolbar for unsortable columns", () => {
+    renderWithProviders(
+      <Cards
+        enableFiltering={false}
+        columns={columns.map((column) => ({ ...column, enableSorting: false }))}
+      />,
+    );
+    expect(screen.queryByRole("toolbar")).toBeNull();
+  });
+
+  it("exposes the full active sorting identity without replacing the button label recipe", () => {
+    const longHeader = "Form with a deliberately long distinguishing classification suffix";
+    renderWithProviders(
+      <Cards
+        columns={[{ accessorKey: "form", header: longHeader }]}
+        initialState={{ sorting: [{ id: "form", desc: true }] }}
+      />,
+    );
+    const trigger = screen.getByLabelText("Sort rows");
+    expect(trigger.getAttribute("aria-description")).toBe(`${longHeader} ↓`);
+    expect(trigger.textContent).toContain(`${longHeader} ↓`);
+  });
+
+  it("retains hidden Year filtering, chip edit and removal in readOnly cards", async () => {
+    const { container } = renderWithProviders(<Cards readOnly />);
+    expect(screen.queryByText("Add Filter")).toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: "Filter" }));
+    fireEvent.click(await screen.findByRole("option", { name: "Year" }));
+    fireEvent.change(await screen.findByPlaceholderText("Enter value..."), {
+      target: { value: "2023" },
+    });
+    await waitFor(() => expect(cardTitles(container)).toEqual(["Alpha", "Gamma"]));
+    fireEvent.keyDown(document, { key: "Escape" });
+    await waitFor(() => expect(screen.queryByPlaceholderText("Enter value...")).toBeNull());
+    fireEvent.click(await screen.findByRole("button", { name: /Edit filter.*Year/ }));
+    const value = await screen.findByPlaceholderText("Enter value...");
+    expect((value as HTMLInputElement).value).toBe("2023");
+    fireEvent.change(value, { target: { value: "2024" } });
+    await waitFor(() => expect(cardTitles(container)).toEqual(["Beta"]));
+    fireEvent.keyDown(document, { key: "Escape" });
+    await waitFor(() => expect(screen.queryByPlaceholderText("Enter value...")).toBeNull());
+    fireEvent.click(screen.getByRole("button", { name: "Remove" }));
+    await waitFor(() => expect(cardTitles(container)).toEqual(["Alpha", "Beta", "Gamma"]));
+  });
+
+  it("keeps the custom-toolbar fallback and clears its active filter", async () => {
+    const { container } = renderWithProviders(
+      <Cards
+        renderToolbar={() => <div>Custom actions</div>}
+        initialState={{
+          filters: [{ id: "f", columnId: "form", value: { operator: "contains", value: "Alpha" } }],
+        }}
+      />,
+    );
+    expect(screen.getByText("Custom actions")).toBeTruthy();
+    const fallback = screen.getByRole("toolbar", { name: "Card list controls" });
+    expect(within(fallback).getByRole("button", { name: /Add Filter/ })).toBeTruthy();
+    expect(cardTitles(container)).toEqual(["Alpha"]);
+    fireEvent.click(within(fallback).getByRole("button", { name: "Clear" }));
+    await waitFor(() => expect(cardTitles(container)).toEqual(["Alpha", "Beta", "Gamma"]));
+    fireEvent.click(within(fallback).getByRole("button", { name: "Add Filter" }));
+    expect(await screen.findByText("Select column")).toBeTruthy();
+  });
+
+  it("leaves an explicitly supplied canonical custom toolbar intact", () => {
+    renderWithProviders(<Cards renderToolbar={(props: any) => <DataTableToolbar {...props} />} />);
+    expect(screen.getByRole("button", { name: "Filter" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Add Filter" })).toBeTruthy();
+    expect(screen.getByRole("toolbar", { name: "Card list controls" })).toBeTruthy();
+  });
+
+  it("partitions actual export, long saved view, save and fetching from Filter and Sort", () => {
+    const name = "Saved view with a deliberately long distinguishing classification suffix";
+    const { container } = renderWithProviders(
+      <Cards
+        enableGlobalSearch
+        initialState={{
+          activeViewId: "long",
+          views: [
+            {
+              id: "long",
+              name,
+              columns: {},
+              filters: [],
+              sorting: [],
+              pagination: { pageIndex: 0, pageSize: 10 },
+            },
+          ],
+        }}
+        renderToolbar={(props: any) => <AllCardActionsToolbar {...props} />}
+      />,
+    );
+    const primary = container.querySelector<HTMLElement>("[data-table-card-primary]")!;
+    const secondary = container.querySelector<HTMLElement>("[data-table-card-secondary]")!;
+    expect(within(primary).getByLabelText("Sort rows")).toBeTruthy();
+    expect(within(primary).getByRole("button", { name: "Filter" })).toBeTruthy();
+    expect(within(secondary).getByRole("button", { name: /Export as CSV/ })).toBeTruthy();
+    expect(within(secondary).getByLabelText("Saved views").textContent).toContain(name);
+    expect(within(secondary).getByLabelText("Save view")).toBeTruthy();
+    expect(secondary.querySelector("[data-table-fetching]")).not.toBeNull();
+    expect(within(primary).queryByLabelText("Saved views")).toBeNull();
+    const sort = primary.querySelector("[data-table-card-sort]")!;
+    expect(sort.contains(within(primary).getByLabelText("Sort rows"))).toBe(true);
+  });
+
+  it("retains hidden filters and sort order when cards change to grid and back", () => {
+    const initialState = {
+      filters: [{ id: "year", columnId: "year", value: { operator: "is", value: "2023" } }],
+      sorting: [{ id: "form", desc: true }],
+    };
+    const { container, rerender } = renderWithProviders(<Cards initialState={initialState} />);
+    expect(cardTitles(container)).toEqual(["Gamma", "Alpha"]);
+    rerender(<Cards initialState={initialState} layout="table" />);
+    expect(cardTitles(container)).toEqual([]);
+    expect(screen.queryByLabelText("Sort rows")).toBeNull();
+    expect(screen.getByText("Gamma")).toBeTruthy();
+    expect(screen.queryByText("Beta")).toBeNull();
+    rerender(<Cards initialState={initialState} />);
+    expect(cardTitles(container)).toEqual(["Gamma", "Alpha"]);
+    expect(screen.getByLabelText("Sort rows").getAttribute("aria-description")).toBe("Form ↓");
+    expect(screen.getAllByRole("button", { name: "Filter" })).toHaveLength(1);
+    expect(screen.queryByPlaceholderText("Enter value...")).toBeNull();
+  });
+
+  it("clears hidden and visible advanced filters together without clearing plain column filters", async () => {
+    const { container } = renderWithProviders(
+      <Cards
+        initialState={{
+          filters: [
+            { id: "year", columnId: "year", value: { operator: "is", value: "2023" } },
+            { id: "form", columnId: "form", value: { operator: "contains", value: "Alpha" } },
+          ],
+          columnFilters: [{ id: "entity", value: "personal" }],
+        }}
+      />,
+    );
+    expect(cardTitles(container)).toEqual(["Alpha"]);
+    fireEvent.click(screen.getByRole("button", { name: "Clear all" }));
+    await waitFor(() => expect(cardTitles(container)).toEqual(["Alpha", "Gamma"]));
+    expect(screen.queryByRole("button", { name: /Edit filter/ })).toBeNull();
+  });
+
+  it("leaves the public standalone toolbar in its original layout", () => {
+    const { container } = renderWithProviders(
+      <DataTableToolbar
+        enableGlobalSearch
+        enableViews
+        customActions={<button type="button">Custom action</button>}
+      />,
+    );
+    expect(container.querySelector<HTMLElement>("[data-table-card-primary]")).toBeNull();
+    expect(container.querySelector<HTMLElement>("[data-table-card-secondary]")).toBeNull();
+    expect(screen.getByLabelText("Search table data")).toBeTruthy();
+    expect(screen.getByText("Custom action")).toBeTruthy();
+  });
+});

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

@@ -204,8 +204,11 @@ describe("chrome interplay: Search × injected filters × enableFiltering", () =
     expect(screen.getByLabelText("Search table data")).toBeInTheDocument();
   });
 
-  it("enableFiltering=false suppresses the card layout's Add Filter control too", () => {
+  it("enableFiltering=false suppresses the card layout's filter control too", () => {
     // auto layout renders cards below sm (the test env default).
+    // MPO-300: the default card path owns the canonical all-field Filter in
+    // the toolbar; the lower Card list controls toolbar and its Add Filter
+    // builder only mount behind a custom toolbar now.
     const control = renderWithProviders(
       <DataTable
         data={rows}
@@ -214,10 +217,8 @@ describe("chrome interplay: Search × injected filters × enableFiltering", () =
         initialState={{ filters: injectedReadyFilter }}
       />,
     );
-    // The control renders its active-filter count in the label text
-    // ("Add Filter (1)"), so an exact getByText no longer matches. The
-    // aria-label is the stable handle, as the sibling arms above use.
-    expect(screen.getByLabelText("Add Filter")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Filter" })).toBeInTheDocument();
+    expect(screen.queryByText("Add Filter")).not.toBeInTheDocument();
     control.unmount();
 
     renderWithProviders(
@@ -228,6 +229,7 @@ describe("chrome interplay: Search × injected filters × enableFiltering", () =
         initialState={{ filters: injectedReadyFilter }}
       />,
     );
+    expect(screen.queryByRole("button", { name: "Filter" })).not.toBeInTheDocument();
     expect(screen.queryByText("Add Filter")).not.toBeInTheDocument();
     // Injected filters still scope the card list.
     expect(screen.getByText("Alpha")).toBeInTheDocument();