@multiplatform.one/table 7.10.0 → 7.15.0

package/src/components/ColumnHeaderFilter/index.tsx

@@ -1,10 +1,10 @@
 /**
- * ColumnHeaderFilter - Filter popover for individual column headers
+ * ColumnHeaderFilter - Filter panel for individual column headers
  * AG Grid style column filtering with operators and value inputs
  */
 
 import { FunnelIcon } from "@phosphor-icons/react";
-import { Button } from "@multiplatform.one/forms";
+import { Button, FloatingPanel } from "@multiplatform.one/forms";
 import {
   ensureCompositeFocusRing,
   MIN_PRESS_TARGET,
@@ -14,9 +14,9 @@ import {
   useResolvedKnobs,
   useGlyphColor,
 } from "@multiplatform.one/theme";
-import { useId, useRef, useState } from "react";
+import { useState } from "react";
 import { Tooltip } from "@multiplatform.one/components";
-import { Popover, Text, View, XStack, YStack, isWeb, type TamaguiElement } from "tamagui";
+import { Text, View, XStack, YStack } from "tamagui";
 import { t } from "../../shared/t";
 import type { DataTableColumnType, FilterOperator } from "../../types";
 import { iconSizeForToken } from "../../utils/chromeIcons";
@@ -67,11 +67,6 @@ export function ColumnHeaderFilter({
   const idleColor = useGlyphColor("$color11");
   const activeColor = useAccentOnSurface();
   const glyphColor = isFiltered ? activeColor : idleColor;
-  // The nested Tooltip has its own Popper context. Keep this trigger and
-  // editor anchored to the same instance rather than its nearest overlay.
-  const popoverScope = useId();
-  const triggerRef = useRef<TamaguiElement | null>(null);
-  const returnFocusRef = useRef(true);
   ensureCompositeFocusRing();
   const iconPx = iconSizeForToken(String(knobProps.sizeToken));
   const [open, setOpen] = useState(false);
@@ -110,118 +105,96 @@ export function ColumnHeaderFilter({
     onFilterChange(undefined);
   };
 
-  return (
-    <Popover scope={popoverScope} open={open} onOpenChange={handleOpenChange} disableFocus>
-      {/* Inherit the nearest Popover before entering Tooltip. An explicit
-          scope makes Tamagui register web anchors only on mouse hover,
-          leaving keyboard opens without a reference. */}
-      <Popover.Anchor>
-        <Tooltip content={isFiltered ? t("Edit filter") : t("Filter this column")}>
-          <Popover.Trigger scope={popoverScope} asChild>
-            {/* LC-54 amendment (2026-08-13): the grown press target NEVER
-              paints — hover/press fills on this box spread across the full
-              44px floor and bled into the neighboring header rows via the
-              negative outsets. Painted hover and keyboard focus feedback
-              ride the glyph-scale ring inside
-              (Chip dismiss anatomy). */}
-            <View
-              ref={triggerRef}
-              cursor="pointer"
-              {...pressTargetStyle()}
-              alignItems="center"
-              justifyContent="center"
-              marginVertical={-FILTER_TRIGGER_OUTSET}
-              marginHorizontal={-FILTER_TRIGGER_OUTSET}
-              hitSlop={pressTargetHitSlop(FILTER_TRIGGER_VISUAL)}
-              // Enabled glyphs keep readable ink; hue and weight distinguish
-              // an applied filter from the secondary-color idle affordance.
-              // Shared unpainted press-floor / painted glyph-ring anatomy.
-              className="mp-chip-dismiss"
-              tabIndex={0}
-              onKeyDown={
-                ((event: { key?: string; preventDefault(): void; stopPropagation(): void }) => {
-                  if (event.key !== "Enter" && event.key !== " ") return;
-                  event.preventDefault();
-                  event.stopPropagation();
-                  handleOpenChange(true);
-                }) as unknown as () => void
-              }
-              onPress={(e) => {
-                e.stopPropagation();
-                handleOpenChange(true);
-              }}
-              role="button"
-              aria-label={`Filter column ${columnLabel}`}
-            >
-              <View
-                className="mp-chip-dismiss-ring"
-                padding="$1"
-                borderRadius="$2"
-                alignItems="center"
-                justifyContent="center"
-                hoverStyle={{ backgroundColor: "$color4" }}
-                pressStyle={{ backgroundColor: "$color5" }}
-              >
-                <FunnelIcon
-                  size={iconPx}
-                  color={glyphColor}
-                  weight={isFiltered ? "fill" : "regular"}
-                />
-              </View>
-            </View>
-          </Popover.Trigger>
-        </Tooltip>
-      </Popover.Anchor>
-
-      <Popover.Content
-        scope={popoverScope}
-        onPointerDownOutside={() => {
-          returnFocusRef.current = false;
-        }}
-        onCloseAutoFocus={(event) => {
-          event.preventDefault();
-          if (isWeb && returnFocusRef.current) {
-            (triggerRef.current as HTMLElement | null)?.focus();
-          }
-          returnFocusRef.current = true;
+  // The panel owns the pointer toggle (mousedown) and the keyboard-synthesized
+  // click. The trigger only stops the click reaching the header's sort press
+  // and opens on Enter/Space, which a role=button div does not synthesize.
+  const trigger = (
+    <Tooltip content={isFiltered ? t("Edit filter") : t("Filter this column")}>
+      {/* LC-54 amendment (2026-08-13): the grown press target NEVER
+        paints — hover/press fills on this box spread across the full
+        44px floor and bled into the neighboring header rows via the
+        negative outsets. Painted hover and keyboard focus feedback
+        ride the glyph-scale ring inside
+        (Chip dismiss anatomy). */}
+      <View
+        cursor="pointer"
+        {...pressTargetStyle()}
+        alignItems="center"
+        justifyContent="center"
+        marginVertical={-FILTER_TRIGGER_OUTSET}
+        marginHorizontal={-FILTER_TRIGGER_OUTSET}
+        hitSlop={pressTargetHitSlop(FILTER_TRIGGER_VISUAL)}
+        // Enabled glyphs keep readable ink; hue and weight distinguish
+        // an applied filter from the secondary-color idle affordance.
+        // Shared unpainted press-floor / painted glyph-ring anatomy.
+        className="mp-chip-dismiss"
+        tabIndex={0}
+        onKeyDown={
+          ((event: { key?: string; preventDefault(): void; stopPropagation(): void }) => {
+            if (event.key !== "Enter" && event.key !== " ") return;
+            event.preventDefault();
+            event.stopPropagation();
+            handleOpenChange(true);
+          }) as unknown as () => void
+        }
+        onPress={(e) => {
+          e.stopPropagation();
         }}
-        {...knobProps.elevatedSurface}
-        {...knobProps.panelPadding}
-        minWidth={240}
-        transition={knobProps.transition}
-        enterStyle={{ y: -5, opacity: 0 }}
-        exitStyle={{ y: -5, opacity: 0 }}
+        role="button"
+        aria-label={`Filter column ${columnLabel}`}
+        aria-haspopup="dialog"
+        aria-expanded={open}
       >
-        <Popover.Arrow scope={popoverScope} borderColor="$borderColor" backgroundColor="$color1" />
+        <View
+          className="mp-chip-dismiss-ring"
+          padding="$1"
+          borderRadius="$2"
+          alignItems="center"
+          justifyContent="center"
+          hoverStyle={{ backgroundColor: "$color4" }}
+          pressStyle={{ backgroundColor: "$color5" }}
+        >
+          <FunnelIcon size={iconPx} color={glyphColor} weight={isFiltered ? "fill" : "regular"} />
+        </View>
+      </View>
+    </Tooltip>
+  );
 
-        <YStack {...knobProps.gap}>
-          <Text {...knobProps.label} fontWeight="400" color="$color11">
-            {t("Filter: {{column}}", { column: columnLabel })}
-          </Text>
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={handleOpenChange}
+      trigger={trigger}
+      triggerSizing="content"
+      widthMode="fit-content"
+    >
+      <YStack {...knobProps.gap} minWidth={240} data-dismiss-class="compose">
+        <Text {...knobProps.label} fontWeight="400" color="$color11">
+          {t("Filter: {{column}}", { column: columnLabel })}
+        </Text>
 
-          {/* Shared operator/value editor (LC-16 — same one the toolbar filter uses) */}
-          <FilterOperatorValueEditor
-            fieldType={columnType}
-            operator={operator}
-            value={value}
-            onOperatorChange={setOperator}
-            onValueChange={setValue}
-            options={options}
-          />
+        {/* Shared operator/value editor (LC-16 — same one the toolbar filter uses) */}
+        <FilterOperatorValueEditor
+          fieldType={columnType}
+          operator={operator}
+          value={value}
+          onOperatorChange={setOperator}
+          onValueChange={setValue}
+          options={options}
+        />
 
-          {/* Actions */}
-          <XStack {...knobProps.gap} justifyContent="flex-end">
-            {isFiltered && (
-              <Button size={knobProps.sizeToken} onPress={handleClear}>
-                {t("Clear")}
-              </Button>
-            )}
-            <Button size={knobProps.sizeToken} onPress={handleApply}>
-              {t("Apply")}
+        {/* Actions */}
+        <XStack {...knobProps.gap} justifyContent="flex-end">
+          {isFiltered && (
+            <Button size={knobProps.sizeToken} onPress={handleClear}>
+              {t("Clear")}
             </Button>
-          </XStack>
-        </YStack>
-      </Popover.Content>
-    </Popover>
+          )}
+          <Button size={knobProps.sizeToken} onPress={handleApply}>
+            {t("Apply")}
+          </Button>
+        </XStack>
+      </YStack>
+    </FloatingPanel>
   );
 }

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",
@@ -3262,3 +3288,101 @@ export const MoneyColumn: Story = {
     },
   },
 };
+
+const widthRows = [
+  { id: "1", rank: 1, label: "A long account label to inspect clipping", score: 92 },
+  { id: "2", rank: 2, label: "Another account", score: 85 },
+];
+const declaredWidthColumns: DataTableColumn<(typeof widthRows)[number]>[] = [
+  { accessorKey: "rank", header: "Rank", width: 48, footer: "2" },
+  {
+    accessorKey: "label",
+    header: "Account",
+    width: 320,
+    minWidth: 200,
+    maxWidth: 400,
+    footer: "Two accounts",
+  },
+  { accessorKey: "score", header: "Score", width: 80, footer: "177" },
+];
+
+export const ColumnWidthContract: Story = {
+  render: function ColumnWidthExample(args) {
+    const [columnLayout, setColumnLayout] = React.useState<"equal" | "scroll" | "auto">("scroll");
+    const [resizing, setResizing] = React.useState(false);
+    return (
+      <YStack gap="$3" width="100%">
+        <Text>Declared widths: Rank 48px, Account 320px (200–400px), Score 80px.</Text>
+        <View flexDirection="row" flexWrap="wrap" gap="$2">
+          {(["equal", "scroll", "auto"] as const).map((mode) => (
+            <Button
+              key={mode}
+              aria-pressed={columnLayout === mode}
+              onPress={() => setColumnLayout(mode)}
+            >
+              {mode}
+            </Button>
+          ))}
+          <Button aria-pressed={resizing} onPress={() => setResizing((enabled) => !enabled)}>
+            Resizing {resizing ? "on" : "off"}
+          </Button>
+        </View>
+        <Text>
+          Pin Rank then Account with their header controls to inspect offsets. Switch to equal with
+          resizing off to compare pinned fixed widths and unpinned equal widths. In scroll, narrow
+          the viewport to inspect horizontal overflow and footer alignment.
+        </Text>
+        <DataTable
+          {...args}
+          data={widthRows}
+          columns={declaredWidthColumns as DataTableColumn<Record<string, any>>[]}
+          layout="table"
+          columnLayout={columnLayout}
+          enableColumnResizing={resizing}
+          enableColumnPinning
+          enablePagination={false}
+          readOnly
+        />
+      </YStack>
+    );
+  },
+};
+
+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/DataTableCardControls.stories.tsx

@@ -4,7 +4,7 @@
  * The grid puts sorting and per-column filtering in the column headers. The
  * card layout has no headers, so this toolbar restores both: a sort menu that
  * cycles none → asc → desc per sortable column (the same cycle as a header
- * click) and the compact DataTableFilters chrome. Both drive the same table
+ * click) and the canonical all-field Filter. Both drive the same table
  * state as the grid — there is no parallel state.
  *
  * It only exists in `layout="cards"`, which is why these stories pin the
@@ -69,7 +69,7 @@ function CardTable(props: Record<string, any>) {
   );
 }
 
-/** Both affordances: Sort menu on the left, Add Filter chrome beside it. */
+/** Default cards keep Filter and Sort together. */
 export const Default = {
   name: "Main",
   render: () => <CardTable enableSorting enableFiltering />,
@@ -114,3 +114,62 @@ export const NoControls = {
     </YStack>
   ),
 };
+
+export const MobileControls = {
+  args: { width: 390, search: true, views: true, fetching: true, longSort: true, disabled: false },
+  argTypes: {
+    width: { control: "select", options: [320, 390] },
+    search: { control: "boolean" },
+    views: { control: "boolean" },
+    fetching: { control: "boolean" },
+    longSort: { control: "boolean" },
+    disabled: { control: "boolean" },
+  },
+  render: (args: {
+    width: number;
+    search: boolean;
+    views: boolean;
+    fetching: boolean;
+    longSort: boolean;
+    disabled: boolean;
+  }) => (
+    <YStack width={args.width} maxWidth="100%" padding="$3">
+      <DataTable
+        key={String(args.longSort)}
+        data={people.map((person) => ({ ...person, year: person.id < 3 ? 2023 : 2024 }))}
+        columns={[
+          {
+            accessorKey: "firstName",
+            header: "Name with a long distinguishing classification suffix",
+          },
+          { accessorKey: "age", header: "Age" },
+        ]}
+        filterableFields={[{ id: "year", label: "Year", type: "number" }]}
+        layout="cards"
+        enableGlobalSearch={args.search}
+        enableViews={args.views}
+        isFetching={args.fetching}
+        disabled={args.disabled}
+        initialState={{
+          filters: [{ id: "year", columnId: "year", value: { operator: "is", value: "2023" } }],
+          sorting: args.longSort ? [{ id: "firstName", desc: false }] : [],
+          activeViewId: "long",
+          views: [
+            {
+              id: "long",
+              name: "Saved view with a long distinguishing classification suffix",
+              columns: {},
+              filters: [],
+              sorting: [],
+              pagination: { pageIndex: 0, pageSize: 10 },
+            },
+          ],
+        }}
+      />
+    </YStack>
+  ),
+};
+
+export const CustomToolbarFallback = {
+  render: () => <CardTable renderToolbar={() => <Paragraph>Custom toolbar</Paragraph>} />,
+};

package/src/components/DataTable/DataTableCardControls.tsx

@@ -44,31 +44,109 @@ function getColumnLabel(column: any): string {
   return typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
 }
 
-export function DataTableCardControls({
+export function DataTableCardSortControl({
   table,
-  enableSorting = false,
-  enableFiltering = false,
-  availableColumns = [],
   compact = false,
   disabled = false,
-}: DataTableCardControlsProps) {
+  contained = false,
+}: Pick<DataTableCardControlsProps, "table" | "compact" | "disabled"> & { contained?: boolean }) {
   const { t } = useTranslation();
-  const { knobProps, disabledState } = useResolvedKnobs({ component: "DataTable", compact });
+  const { knobProps } = useResolvedKnobs({ component: "DataTable", compact });
   const chrome = dataTableChrome(String(knobProps.sizeToken));
   const [sortMenuOpen, setSortMenuOpen] = useState(false);
-
-  const sortableColumns = enableSorting
-    ? table.getVisibleLeafColumns().filter((col: any) => col.getCanSort())
-    : [];
-
+  const sortableColumns = table.getVisibleLeafColumns().filter((col: any) => col.getCanSort());
   const activeSort = table.getState().sorting?.[0];
   const activeSortColumn = activeSort ? table.getColumn(activeSort.id) : undefined;
   const sortLabel = activeSortColumn
     ? `${getColumnLabel(activeSortColumn)} ${activeSort.desc ? "\u2193" : "\u2191"}`
     : t("Sort");
+  if (!sortableColumns.length) return null;
+  const menu = (
+    <DropdownMenu
+      open={disabled ? false : sortMenuOpen}
+      onOpenChange={(open: boolean) => {
+        if (disabled) return;
+        setSortMenuOpen(open);
+      }}
+    >
+      <DropdownMenu.Trigger asChild>
+        <Button
+          size={knobProps.sizeToken}
+          icon={<CaretUpDownIcon size={chrome.iconPx} />}
+          aria-label={t("Sort rows")}
+          {...(contained
+            ? {
+                minWidth: 0,
+                maxWidth: "100%" as const,
+                "aria-description": activeSortColumn ? sortLabel : undefined,
+              }
+            : {})}
+          disabled={disabled}
+        >
+          {sortLabel}
+        </Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Label>{t("Sort by")}</DropdownMenu.Label>
+        {sortableColumns.map((column: any) => {
+          const sorted = column.getIsSorted();
+          return (
+            <DropdownMenu.Item
+              key={column.id}
+              closeOnSelect={false}
+              icon={
+                sorted === "asc" ? (
+                  <CaretDownIcon size={chrome.iconPx} />
+                ) : sorted === "desc" ? (
+                  <CaretDownIcon size={chrome.iconPx} style={{ transform: "rotate(180deg)" }} />
+                ) : (
+                  <CaretUpDownIcon size={chrome.iconPx} />
+                )
+              }
+              aria-label={withInterp(t("Sort by {{column}}", { column: getColumnLabel(column) }), {
+                column: getColumnLabel(column),
+              })}
+              onSelect={() => {
+                // Same cycle as the grid header click: none → asc → desc → none.
+                if (sorted === false) column.toggleSorting(false);
+                else if (sorted === "asc") column.toggleSorting(true);
+                else column.clearSorting();
+              }}
+            >
+              {getColumnLabel(column)}
+            </DropdownMenu.Item>
+          );
+        })}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  );
+  return contained ? (
+    <View
+      data-table-card-sort=""
+      flexBasis="auto"
+      flexGrow={0}
+      flexShrink={1}
+      minWidth={0}
+      maxWidth="50%"
+    >
+      {menu}
+    </View>
+  ) : (
+    menu
+  );
+}
 
+export function DataTableCardControls({
+  table,
+  enableSorting = false,
+  enableFiltering = false,
+  availableColumns = [],
+  compact = false,
+  disabled = false,
+}: DataTableCardControlsProps) {
+  const { t } = useTranslation();
+  const { disabledState } = useResolvedKnobs({ component: "DataTable", compact });
   if (!enableSorting && !enableFiltering) return null;
-
   return (
     <XStack
       alignItems="center"
@@ -78,60 +156,8 @@ export function DataTableCardControls({
       role="toolbar"
       aria-label={t("Card list controls")}
     >
-      {enableSorting && sortableColumns.length > 0 && (
-        <DropdownMenu
-          open={disabled ? false : sortMenuOpen}
-          onOpenChange={(open: boolean) => {
-            if (disabled) return;
-            setSortMenuOpen(open);
-          }}
-        >
-          <DropdownMenu.Trigger asChild>
-            <Button
-              size={knobProps.sizeToken}
-              icon={<CaretUpDownIcon size={chrome.iconPx} />}
-              aria-label={t("Sort rows")}
-              disabled={disabled}
-            >
-              {sortLabel}
-            </Button>
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content>
-            <DropdownMenu.Label>{t("Sort by")}</DropdownMenu.Label>
-            {sortableColumns.map((column: any) => {
-              const sorted = column.getIsSorted();
-              return (
-                <DropdownMenu.Item
-                  key={column.id}
-                  closeOnSelect={false}
-                  icon={
-                    sorted === "asc" ? (
-                      <CaretDownIcon size={chrome.iconPx} />
-                    ) : sorted === "desc" ? (
-                      <CaretDownIcon size={chrome.iconPx} style={{ transform: "rotate(180deg)" }} />
-                    ) : (
-                      <CaretUpDownIcon size={chrome.iconPx} />
-                    )
-                  }
-                  aria-label={withInterp(
-                    t("Sort by {{column}}", { column: getColumnLabel(column) }),
-                    {
-                      column: getColumnLabel(column),
-                    },
-                  )}
-                  onSelect={() => {
-                    // Same cycle as the grid header click: none → asc → desc → none.
-                    if (sorted === false) column.toggleSorting(false);
-                    else if (sorted === "asc") column.toggleSorting(true);
-                    else column.clearSorting();
-                  }}
-                >
-                  {getColumnLabel(column)}
-                </DropdownMenu.Item>
-              );
-            })}
-          </DropdownMenu.Content>
-        </DropdownMenu>
+      {enableSorting && (
+        <DataTableCardSortControl table={table} compact={compact} disabled={disabled} />
       )}
       {enableFiltering && availableColumns.length > 0 && (
         // DataTableFilters (chrome) has no disabled API — the wrapper is the