@multiplatform.one/table 7.7.6 → 7.10.0

package/src/components/DataTableGrouping/DataTableGrouping.stories.tsx

@@ -366,7 +366,6 @@ export const WithGroupingControls = () => {
       <XStack gap="$3" flexWrap="wrap">
         <Button
           size="$3"
-          variant="outlined"
           onPress={() =>
             setGroupingConfig({
               columns: ["region"],
@@ -378,7 +377,6 @@ export const WithGroupingControls = () => {
         </Button>
         <Button
           size="$3"
-          variant="outlined"
           onPress={() =>
             setGroupingConfig({
               columns: ["category"],
@@ -390,7 +388,6 @@ export const WithGroupingControls = () => {
         </Button>
         <Button
           size="$3"
-          variant="outlined"
           onPress={() =>
             setGroupingConfig({
               columns: ["region", "category"],
@@ -405,7 +402,6 @@ export const WithGroupingControls = () => {
         </Button>
         <Button
           size="$3"
-          variant="outlined"
           onPress={() =>
             setGroupingConfig({
               columns: [],

package/src/components/DataTableGrouping/index.tsx

@@ -637,7 +637,6 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
       <Popover.Trigger asChild>
         <Button
           size={knobProps.sizeToken}
-          variant="outlined"
           icon={<GearIcon size={iconSize} />}
           disabled={disabled}
           aria-label="Grouping configuration"
@@ -716,7 +715,6 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
                         </Text>
                         <Button
                           size={knobProps.sizeToken}
-                          variant="outlined"
                           icon={<ArrowUpIcon size={iconSize} />}
                           disabled={disabled || index === 0}
                           onPress={() => handleMoveGroupBy(index, -1)}
@@ -724,7 +722,6 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
                         />
                         <Button
                           size={knobProps.sizeToken}
-                          variant="outlined"
                           icon={<ArrowDownIcon size={iconSize} />}
                           disabled={disabled || index === currentConfig.columns.length - 1}
                           onPress={() => handleMoveGroupBy(index, 1)}
@@ -732,7 +729,6 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
                         />
                         <Button
                           size={knobProps.sizeToken}
-                          variant="outlined"
                           icon={<MinusIcon size={iconSize} />}
                           disabled={disabled}
                           onPress={() => handleRemoveGroupBy(columnKey)}
@@ -756,7 +752,6 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
                       <Button
                         key={key}
                         size={knobProps.sizeToken}
-                        variant="outlined"
                         onPress={() => handleAddGroupBy(key)}
                       >
                         {column.header || key}
@@ -803,7 +798,6 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
                         </Text>
                         <Button
                           size={knobProps.sizeToken}
-                          variant="outlined"
                           icon={<MinusIcon size={iconSize} />}
                           disabled={disabled}
                           onPress={() => handleRemoveAggregation(index)}
@@ -828,7 +822,6 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
                 <Separator />
                 <Button
                   size={knobProps.sizeToken}
-                  variant="outlined"
                   error
                   onPress={() => onConfigChange({ columns: [], aggregations: [] })}
                   aria-label="Clear all grouping and aggregation"
@@ -946,12 +939,7 @@ function AggregationSelector<T = any>({ columns, onAddAggregation }: Aggregation
           />
         </View>
 
-        <Button
-          size={knobProps.sizeToken}
-          variant="outlined"
-          disabled={!selectedColumn}
-          onPress={handleAdd}
-        >
+        <Button size={knobProps.sizeToken} disabled={!selectedColumn} onPress={handleAdd}>
           Add
         </Button>
       </XStack>

package/src/components/DataTablePagination/DataTablePagination.stories.tsx

@@ -1,5 +1,6 @@
 import { action } from "@multiplatform.one/storybook";
 import type { GuardrailSpecimenParameter } from "@multiplatform.one/theme";
+import { Preset } from "@multiplatform.one/theme";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import React from "react";
 // Catalog Button + Input (LC-56 STORY-HONESTY — no raw interactive primitives).
@@ -782,7 +783,7 @@ export const InfiniteVirtualized: Story = {
 };
 
 export const NarrowPanel: Story = {
-  render: () => {
+  render: (args) => {
     const [pagination, setPagination] = React.useState({ pageIndex: 0, pageSize: 25 });
     return (
       <YStack width={249}>
@@ -794,8 +795,20 @@ export const NarrowPanel: Story = {
             totalPages: Math.ceil(1000 / pagination.pageSize),
           }}
           onPaginationChange={setPagination}
+          {...args}
         />
       </YStack>
     );
   },
 };
+
+export const LargeSpaceNarrow: Story = {
+  ...NarrowPanel,
+  decorators: [
+    (Story) => (
+      <Preset overrides={{ space: "large" }}>
+        <Story />
+      </Preset>
+    ),
+  ],
+};

package/src/components/DataTablePagination/DataTablePagination.width.spec.tsx

@@ -3,16 +3,22 @@ import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { act, fireEvent, screen, within } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import type { LayoutChangeEvent } from "react-native";
+import { Preset } from "@multiplatform.one/theme";
 
 const observed = vi.hoisted(() => ({
   onLayout: undefined as undefined | ((event: LayoutChangeEvent) => void),
   change: vi.fn(),
+  sizeWidth: 0,
 }));
 vi.mock("tamagui", async (importOriginal) => {
   const actual = await importOriginal<typeof import("tamagui")>();
   return {
     ...actual,
     useMedia: () => ({ sm: true }),
+    View: forwardRef((props: any, ref) => {
+      if (props["data-pagination-control"] === "size") observed.sizeWidth = props.width;
+      return createElement(actual.View, { ...props, ref });
+    }),
     XStack: forwardRef((props: any, ref) => {
       if (props["aria-label"] === "Table pagination") observed.onLayout = props.onLayout;
       return createElement(actual.XStack, { ...props, ref });
@@ -42,6 +48,26 @@ beforeEach(() => {
 });
 
 describe("bounded compact table pagination", () => {
+  it("preserves the default footprint and grows for wide numeric options", () => {
+    const { rerender } = renderWithProviders(<DataTablePagination compact />);
+    expect(observed.sizeWidth).toBe(80);
+    rerender(<DataTablePagination compact pageSizeOptions={[10, 25, 1000000]} />);
+    expect(observed.sizeWidth).toBeGreaterThan(80);
+  });
+
+  it("budgets the always-compact Select independently from footer spacing", () => {
+    const renderPager = (compact: boolean) => (
+      <Preset overrides={{ space: "large" }}>
+        <DataTablePagination compact={compact} />
+      </Preset>
+    );
+    const { rerender } = renderWithProviders(renderPager(false));
+    const width = observed.sizeWidth;
+    expect(width).toBeGreaterThan(80);
+    rerender(renderPager(true));
+    expect(observed.sizeWidth).toBe(width);
+  });
+
   it("starts safely and responds to container width even on a desktop viewport", () => {
     renderWithProviders(<DataTablePagination compact />);
     const pager = () => within(screen.getByRole("navigation", { name: "Page" }));
@@ -55,4 +81,29 @@ describe("bounded compact table pagination", () => {
     fireEvent.click(pager().getByLabelText("Go to next page"));
     expect(observed.change).toHaveBeenCalledExactlyOnceWith({ pageIndex: 1, pageSize: 25 });
   });
+
+  it("preserves the presentation when a container reports its width again", () => {
+    renderWithProviders(<DataTablePagination compact />);
+    measure(249);
+    const pager = screen.getByRole("navigation", { name: "Page" });
+    const buttons = within(pager).getAllByRole("button");
+    measure(249);
+    expect(within(pager).getAllByRole("button")).toEqual(buttons);
+    expect(observed.change).not.toHaveBeenCalled();
+  });
+
+  it("resets to the first page when rows per page changes in a narrow table", async () => {
+    renderWithProviders(
+      <DataTablePagination
+        compact
+        pagination={{ pageIndex: 5, pageSize: 25, totalPages: 40, totalCount: 1000 }}
+      />,
+    );
+    measure(249);
+    fireEvent.click(screen.getByLabelText("Select rows per page"));
+    fireEvent.keyDown(await screen.findByRole("option", { name: "50" }), {
+      key: "Enter",
+    });
+    expect(observed.change).toHaveBeenCalledExactlyOnceWith({ pageIndex: 0, pageSize: 50 });
+  });
 });

package/src/components/DataTablePagination/index.tsx

@@ -1,6 +1,9 @@
 import {
   ensureCompositeFocusRing,
+  isTouchSurface,
   MIN_PRESS_TARGET,
+  sizeRecipeForToken,
+  textFieldInset,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
 import { Pagination, getPaginationItems } from "@multiplatform.one/components";
@@ -28,8 +31,10 @@ export interface DataTablePaginationProps {
   compact?: boolean;
 }
 
-function controlWidth(chars: number, chrome: number) {
-  return Math.max(48, chars * 12 + chrome);
+function controlWidth(chars: number, fontSize: number, inset: number, trailingChrome = 0) {
+  // Conservative $body digit width, checked against rendered ink in Storybook.
+  // Include the Box's two hairline borders after its single horizontal inset.
+  return Math.ceil(chars * fontSize * 0.65) + inset * 2 + trailingChrome + 2;
 }
 
 function formatRange(start: number, end: number, total: number) {
@@ -87,7 +92,14 @@ export function DataTablePagination(props: DataTablePaginationProps) {
 
   const { sm } = useMedia();
   const { knobProps } = useResolvedKnobs(compact === undefined ? undefined : { compact });
+  // The fields are always compact, independently of the footer's layout.
+  const { knobProps: fieldKnobs } = useResolvedKnobs({ compact: true });
+  const fieldRecipe = sizeRecipeForToken(knobProps.sizeToken, { touch: isTouchSurface() });
+  const selectInset = Number(
+    getTokenValue(fieldKnobs.panelPadding.padding as Parameters<typeof getTokenValue>[0], "space"),
+  );
   const isMobile = !sm;
+  const packed = compact && insideTable;
   const [availableWidth, setAvailableWidth] = useState<number | undefined>();
   const measureWidth = (event: import("react-native").LayoutChangeEvent) => {
     const width = event.nativeEvent.layout.width;
@@ -132,9 +144,14 @@ export function DataTablePagination(props: DataTablePaginationProps) {
   const gapPixels = Number(
     getTokenValue(knobProps.gap.gap as Parameters<typeof getTokenValue>[0], "space"),
   );
-  const paddingPixels = Number(
-    getTokenValue(knobProps.panelPadding.padding as Parameters<typeof getTokenValue>[0], "space"),
-  );
+  const paddingPixels = packed
+    ? 0
+    : Number(
+        getTokenValue(
+          knobProps.panelPadding.padding as Parameters<typeof getTokenValue>[0],
+          "space",
+        ),
+      );
   const measuredBudget =
     pageControls * controlBudget + Math.max(0, pageControls - 1) * gapPixels + paddingPixels * 2;
   const numberedBudget = Number.isFinite(measuredBudget) ? measuredBudget : Infinity;
@@ -166,15 +183,30 @@ export function DataTablePagination(props: DataTablePaginationProps) {
 
   const helperText = {
     ...knobProps.label,
-    color: "$color10" as const,
+    color: knobProps.textAccentColor,
     userSelect: "none" as const,
   };
 
   const sizeControl = showSize ? (
-    <XStack alignItems="center" gap="$2" flexShrink={0}>
+    <XStack
+      alignItems="center"
+      gap="$2"
+      flexShrink={0}
+      flexWrap="wrap"
+      minWidth={0}
+      maxWidth="100%"
+    >
       <Text {...helperText}>Rows per page:</Text>
       <View
-        width={controlWidth(Math.max(2, ...sizeOptions.map((n) => String(n).length)), 44)}
+        width={Math.max(
+          80,
+          controlWidth(
+            Math.max(2, ...sizeOptions.map((n) => String(n).length)),
+            fieldKnobs.controlType.fontSize,
+            selectInset,
+            fieldRecipe.gap + 16, // Select's fixed 16px caret.
+          ),
+        )}
         overflow="visible"
         flexShrink={0}
         {...({ "data-pagination-control": "size" } as object)}
@@ -206,6 +238,7 @@ export function DataTablePagination(props: DataTablePaginationProps) {
       onPageChange={(page) => handlePageChange(page - 1)}
       showFirstLast={!simplePager && !compact && !isMobile}
       aria-label="Page"
+      padding={0}
     />
   ) : null;
 
@@ -213,7 +246,14 @@ export function DataTablePagination(props: DataTablePaginationProps) {
     <XStack alignItems="center" gap="$2" flexShrink={0} aria-label="Jump to page">
       <Text {...helperText}>Go to page:</Text>
       <View
-        width={controlWidth(String(totalPages).length, 28)}
+        width={Math.max(
+          48,
+          controlWidth(
+            String(totalPages).length,
+            fieldRecipe.fontSize,
+            textFieldInset(fieldRecipe),
+          ),
+        )}
         overflow="visible"
         flexShrink={0}
         {...({ "data-pagination-control": "jump" } as object)}
@@ -249,8 +289,6 @@ export function DataTablePagination(props: DataTablePaginationProps) {
     </Text>
   ) : null;
 
-  const packed = compact && insideTable;
-
   if (packed) {
     return (
       <XStack
@@ -273,9 +311,9 @@ export function DataTablePagination(props: DataTablePaginationProps) {
   }
 
   return (
-    // UX-P08 / LC-10 + Axiom 15 (G-03): side clusters grow equally so the
-    // pager stays on the true centerline; when the row wraps each cluster
-    // keeps its own alignment line. rowGap stays on the within-group rhythm.
+    // LC-10: intrinsic cluster widths participate in wrapping. Zero flex
+    // bases let the controls overlap while the footer itself still fits.
+    // A constrained size cluster can also wrap its label above the field.
     <XStack
       role="group"
       aria-label="Table pagination"
@@ -290,7 +328,14 @@ export function DataTablePagination(props: DataTablePaginationProps) {
       paddingHorizontal={knobProps.panelPadding.padding}
       paddingVertical="$2"
     >
-      <XStack alignItems="center" flexGrow={1} flexBasis={0} justifyContent="flex-start">
+      <XStack
+        alignItems="center"
+        flexGrow={1}
+        flexShrink={1}
+        minWidth={0}
+        maxWidth="100%"
+        justifyContent="flex-start"
+      >
         {sizeControl}
       </XStack>
 
@@ -305,7 +350,6 @@ export function DataTablePagination(props: DataTablePaginationProps) {
           alignItems="center"
           {...knobProps.gap}
           flexGrow={1}
-          flexBasis={0}
           flexShrink={0}
           justifyContent="flex-end"
         >

package/src/components/DataTableSearch/index.tsx

@@ -253,7 +253,6 @@ function SearchOptionsPopover({
       <Popover.Trigger asChild>
         <Button
           size={knobProps.sizeToken}
-          variant="outlined"
           accent={optionsActive}
           icon={<SlidersHorizontalIcon size={iconPx} weight={optionsActive ? "fill" : "regular"} />}
           disabled={disabled}
@@ -326,10 +325,10 @@ function SearchOptionsPopover({
               </XStack>
 
               <XStack {...knobProps.gap}>
-                <Button size="$2" compact variant="outlined" onPress={handleSelectAllColumns}>
+                <Button size="$2" compact onPress={handleSelectAllColumns}>
                   {t("All")}
                 </Button>
-                <Button size="$2" compact variant="outlined" onPress={handleSelectNoColumns}>
+                <Button size="$2" compact onPress={handleSelectNoColumns}>
                   {t("None")}
                 </Button>
               </XStack>

package/src/components/DataTableToolbar/DataTableToolbar.stories.tsx

@@ -71,9 +71,7 @@ const MainStory = () => {
         enableGlobalSearch
         enableViews
         initialState={{ pagination: { pageIndex: 1, pageSize: 3 } }}
-        renderToolbar={(props) => (
-          <DataTableToolbar {...props} enableViews enableExport />
-        )}
+        renderToolbar={(props) => <DataTableToolbar {...props} enableViews enableExport />}
         aria-label="Employee table with toolbar"
       />
     </YStack>
@@ -154,7 +152,7 @@ const WithCustomActionsStory = () => {
         onClearFilters={() => setSearch("")}
         customActions={
           <XStack gap="$2">
-            <Button size="$2" variant="outlined" onPress={() => action("refresh")()}>
+            <Button size="$2" onPress={() => action("refresh")()}>
               Refresh
             </Button>
             <Button size="$2" onPress={() => action("export")()}>

package/src/components/DataTableToolbar/index.tsx

@@ -228,11 +228,7 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
                           }}
                         />
                         <XStack {...knobProps.gap} justifyContent="flex-end">
-                          <Button
-                            size={controlSize}
-                            variant="outlined"
-                            onPress={() => setShowSaveViewDialog(false)}
-                          >
+                          <Button size={controlSize} onPress={() => setShowSaveViewDialog(false)}>
                             {t("Cancel")}
                           </Button>
                           <Button

package/src/components/DataTableViewOptions/index.tsx

@@ -119,7 +119,6 @@ export function DataTableViewOptions(props: DataTableViewOptionsProps) {
         <DropdownMenu.Trigger asChild>
           <Button
             size={knobProps.sizeToken}
-            variant="outlined"
             icon={<GearIcon size={iconPx} />}
             aria-label={t("Open table view options")}
           >
@@ -176,7 +175,6 @@ export function DataTableViewOptions(props: DataTableViewOptionsProps) {
 
         <Button
           size={knobProps.sizeToken}
-          variant="outlined"
           onPress={onResetToDefault}
           icon={<ArrowCounterClockwiseIcon size={iconPx} />}
         >
@@ -419,11 +417,7 @@ function ViewManagementSection({
       {/* Save Current View */}
       <Popover open={showSaveDialog} onOpenChange={setShowSaveDialog}>
         <Popover.Trigger asChild>
-          <Button
-            size={knobProps.sizeToken}
-            variant="outlined"
-            icon={<FloppyDiskIcon size={iconPx} />}
-          >
+          <Button size={knobProps.sizeToken} icon={<FloppyDiskIcon size={iconPx} />}>
             {t("Save Current View")}
           </Button>
         </Popover.Trigger>
@@ -448,11 +442,7 @@ function ViewManagementSection({
               }}
             />
             <XStack gap="$2" justifyContent="flex-end">
-              <Button
-                size={knobProps.sizeToken}
-                variant="outlined"
-                onPress={() => setShowSaveDialog(false)}
-              >
+              <Button size={knobProps.sizeToken} onPress={() => setShowSaveDialog(false)}>
                 {t("Cancel")}
               </Button>
               <Button
@@ -489,7 +479,6 @@ function ViewManagementSection({
                 <Text fontSize="$3">{view.name}</Text>
                 <Button
                   size={knobProps.sizeToken}
-                  variant="outlined"
                   onPress={() => onLoadView(view.id)}
                   disabled={activeViewId === view.id}
                 >

package/src/components/FilterManager.tsx

@@ -136,9 +136,7 @@ export function FilterManager({
         <XStack gap="$3" justifyContent="flex-end">
           <KnobDialogClose asChild>
             {/* DG-ACT-05: the cancel action never renders disabled. */}
-            <Button size={knobProps.sizeToken} variant="outlined">
-              {t("Cancel")}
-            </Button>
+            <Button size={knobProps.sizeToken}>{t("Cancel")}</Button>
           </KnobDialogClose>
           {/* Stays pressable on an empty name — handleSave surfaces the
               inline "Filter name is required" instead of a bare-disabled

package/src/components/FilterOperatorValueEditor/FilterOperatorValueEditor.spec.tsx

@@ -19,7 +19,7 @@ const statusOptions = [
   { label: "Done", value: "done" },
 ];
 
-const fieldTypes: DataTableColumnType[] = ["text", "number", "date", "boolean", "select"];
+const fieldTypes: DataTableColumnType[] = ["text", "number", "money", "date", "boolean", "select"];
 
 /** Every forms Select trigger in the tree, in render order (Condition first). */
 const selectTriggers = (container: HTMLElement) =>

package/src/components/FilterOperatorValueEditor/FilterOperatorValueEditor.stories.tsx

@@ -44,6 +44,7 @@ const statusOptions = [
 const fieldTypeLabels: Record<DataTableColumnType, string> = {
   text: "Text",
   number: "Number",
+  money: "Money",
   date: "Date",
   boolean: "Boolean",
   select: "Select",

package/src/components/FilterOperatorValueEditor/index.tsx

@@ -111,10 +111,18 @@ export function FilterOperatorValueEditor({
               label={t("Value")}
               value={value}
               onChangeText={onValueChange}
-              placeholder={fieldType === "date" ? t("YYYY-MM-DD") : t("Enter value...")}
+              placeholder={
+                fieldType === "date"
+                  ? t("YYYY-MM-DD")
+                  : fieldType === "money"
+                    ? t("0.00")
+                    : t("Enter value...")
+              }
               size="$3"
               compact
-              {...(fieldType === "number" && { keyboardType: "numeric" })}
+              {...((fieldType === "number" || fieldType === "money") && {
+                keyboardType: "numeric",
+              })}
             />
           )}
         </YStack>

package/src/components/TableInput/index.native.tsx

@@ -23,7 +23,7 @@ import { TrashIcon, PlusIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 import { getTableCellPadding } from "@multiplatform.one/table-primitives";
 import { hairline, useResolvedKnobs } from "@multiplatform.one/theme";
-import { Text, View, XStack, YStack } from "tamagui";
+import { Text, View, XStack, YStack, useTheme } from "tamagui";
 import type {
   DataTableColumn,
   DataTableData,
@@ -212,6 +212,7 @@ function TableInputInner<TData extends DataTableData>({
   compact,
   t,
 }: TableInputInnerProps<TData>) {
+  const theme = useTheme();
   const { knobProps } = useResolvedKnobs({ compact });
   const cellPad = getTableCellPadding(knobProps.space);
   const chromePx = knobProps.nestedControl.px;
@@ -332,7 +333,7 @@ function TableInputInner<TData extends DataTableData>({
                 row: index + 1,
               })}
             >
-              <TrashIcon size={16} color="$red10" />
+              <TrashIcon size={16} color={theme.red10?.val ?? "currentColor"} />
             </Button>
           </View>
         )}

package/src/components/TableInput/index.tsx

@@ -38,7 +38,7 @@ import { TrashIcon, PlusIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 import { Table, getTableCellPadding } from "@multiplatform.one/table-primitives";
 import { hairline, useResolvedKnobs } from "@multiplatform.one/theme";
-import { Text, View, XStack, YStack, isWeb } from "tamagui";
+import { Text, View, XStack, YStack, isWeb, useTheme } from "tamagui";
 import type {
   DataTableColumn,
   DataTableData,
@@ -240,6 +240,7 @@ function TableInputInner<TData extends DataTableData>({
   enableReorder,
   t,
 }: TableInputInnerProps<TData>) {
+  const theme = useTheme();
   const { knobProps } = useResolvedKnobs({ compact });
   const cellPad = getTableCellPadding(knobProps.space);
   const chromePx = knobProps.nestedControl.px;
@@ -471,7 +472,7 @@ function TableInputInner<TData extends DataTableData>({
                 row: row.index + 1,
               })}
             >
-              <TrashIcon size={16} color="$red10" />
+              <TrashIcon size={16} color={theme.red10?.val ?? "currentColor"} />
             </Button>
           );
         },