@multiplatform.one/table 7.4.1 → 7.6.0

package/src/components/ChildTable/ChildTable.stories.tsx

@@ -0,0 +1,144 @@
+/**
+ * ChildTable — FieldLayout wrapper around TableInput (Frappe child-table field).
+ *
+ * Stories cover the forms field contract D/R/E/Q/S/C: disabled, read-only,
+ * error, required, skeleton, compact — plus standalone onChange and form bind.
+ * Table chrome and cell editors belong to TableInput / DataTableCell.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { fn } from "storybook/test";
+import { useForm } from "@tanstack/react-form";
+import React from "react";
+import { Text, View, YStack } from "tamagui";
+import type { DataTableColumn, DataTableData } from "../../types";
+import { ChildTable } from "./index";
+
+interface LineItem extends DataTableData {
+  id: string;
+  item: string;
+  qty: number;
+}
+
+const initialRows: LineItem[] = [
+  { id: "row-1", item: "Steel bracket", qty: 12 },
+  { id: "row-2", item: "M6 bolts (100pk)", qty: 3 },
+];
+
+const columns: DataTableColumn<LineItem>[] = [
+  { accessorKey: "item", header: "Item", field: "input" },
+  { accessorKey: "qty", header: "Qty", field: "stepper", fieldProps: { min: 0 } },
+];
+
+const meta: Meta<typeof ChildTable> = {
+  title: "Table/ChildTable",
+  component: ChildTable,
+  parameters: {
+    status: { type: "stable" },
+    layout: "fullscreen",
+  },
+  args: {
+    onChange: fn(),
+    columns,
+    label: "Line items",
+    helperText: "Child table field — every cell is a form field.",
+  },
+  argTypes: {
+    disabled: { control: "boolean" },
+    readOnly: { control: "boolean" },
+    skeleton: { control: "boolean" },
+    compact: { control: "boolean" },
+    required: { control: "boolean" },
+  },
+  decorators: [
+    (Story) => (
+      <View flex={1} padding="$4" width="100%">
+        <Story />
+      </View>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ChildTable>;
+
+interface HarnessProps {
+  rows?: LineItem[];
+  onChange?: (rows: LineItem[]) => void;
+  [key: string]: unknown;
+}
+
+const ControlledChildTable = ({ rows = initialRows, onChange, ...rest }: HarnessProps) => {
+  const [data, setData] = React.useState<LineItem[]>(rows);
+  return (
+    <YStack gap="$3">
+      <ChildTable<LineItem>
+        value={data}
+        columns={columns}
+        onChange={(next) => {
+          setData(next);
+          onChange?.(next);
+        }}
+        {...rest}
+      />
+      <Text testID="childtable-data" fontSize="$2" color="$color10" fontFamily="$mono">
+        rows: {data.length}
+      </Text>
+    </YStack>
+  );
+};
+
+export const Default: Story = {
+  name: "Main",
+  render: (args) => <ControlledChildTable {...args} />,
+};
+
+export const SkeletonLoading: Story = {
+  args: { skeleton: true },
+  render: (args) => <ControlledChildTable {...args} rows={[]} />,
+};
+
+export const Compact: Story = {
+  args: { compact: true },
+  render: (args) => <ControlledChildTable {...args} />,
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+  render: (args) => <ControlledChildTable {...args} />,
+};
+
+export const ReadOnly: Story = {
+  args: { readOnly: true },
+  render: (args) => <ControlledChildTable {...args} />,
+};
+
+export const ErrorState: Story = {
+  args: { error: "At least one line item is required", required: true },
+  render: (args) => <ControlledChildTable {...args} rows={[]} />,
+};
+
+const InsideFormStory = () => {
+  const form = useForm({
+    defaultValues: { lineItems: initialRows },
+  });
+  return (
+    <YStack gap="$4" maxWidth={900}>
+      <ChildTable<LineItem>
+        form={form as any}
+        name="lineItems"
+        columns={columns}
+        label="Line items"
+        required
+        helperText="Rows bind through the form field; validators surface in the error slot."
+      />
+      <Text testID="form-value" fontSize="$2" color="$color10" fontFamily="$mono">
+        form.lineItems: {JSON.stringify(form.state.values.lineItems?.map((row) => row.item))}
+      </Text>
+    </YStack>
+  );
+};
+
+export const InsideForm: Story = {
+  render: () => <InsideFormStory />,
+};

package/src/components/ChildTable/childTable.reorder.spec.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { ChildTable } from "./index";
+import type { DataTableColumn, DataTableData } from "../../types";
+
+interface TaskRow extends DataTableData {
+  id: string;
+  task: string;
+  idx: number;
+}
+
+const columns: DataTableColumn<TaskRow>[] = [
+  { accessorKey: "task", header: "Task", field: "input" },
+];
+
+const initial: TaskRow[] = [
+  { id: "a", task: "Provision runner", idx: 1 },
+  { id: "b", task: "Rotate signing key", idx: 2 },
+  { id: "c", task: "Update mirrors", idx: 3 },
+];
+
+function Harness({ onChange }: { onChange: (rows: TaskRow[]) => void }) {
+  const [value, setValue] = React.useState(initial);
+  return (
+    <ChildTable<TaskRow>
+      value={value}
+      columns={columns}
+      onChange={(rows) => {
+        setValue(rows);
+        onChange(rows);
+      }}
+    />
+  );
+}
+
+describe("ChildTable idx reorder (MPO-22)", () => {
+  it("keyboard-reorders a row and writes idx 1..n on the change payload", () => {
+    const onChange = vi.fn();
+    renderWithProviders(<Harness onChange={onChange} />);
+
+    const handle = () => screen.getByRole("button", { name: /Rotate signing key/i });
+    handle().focus();
+    fireEvent.keyDown(handle(), { key: " " });
+    fireEvent.keyDown(handle(), { key: "ArrowDown" });
+    fireEvent.keyDown(handle(), { key: " " });
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    const next = onChange.mock.calls[0][0] as TaskRow[];
+    expect(next.map((r) => ({ id: r.id, idx: r.idx, task: r.task }))).toEqual([
+      { id: "a", idx: 1, task: "Provision runner" },
+      { id: "c", idx: 2, task: "Update mirrors" },
+      { id: "b", idx: 3, task: "Rotate signing key" },
+    ]);
+  });
+
+  it("hides reorder handles when readOnly", () => {
+    renderWithProviders(
+      <ChildTable<TaskRow> value={initial} columns={columns} onChange={vi.fn()} readOnly />,
+    );
+    expect(screen.queryByRole("button", { name: /Reorder/i })).toBeNull();
+    expect(screen.queryByRole("button", { name: /Rotate signing key/i })).toBeNull();
+  });
+});

package/src/components/ChildTable/childTable.spec.tsx

@@ -0,0 +1,108 @@
+/**
+ * ChildTable field-contract tests (D/R/E/Q/S/C).
+ *
+ * ChildTable is the FieldLayout wrapper around TableInput. Label / helper /
+ * error / required / form-bind coverage lives in TableInput's spec; this file
+ * locks the remaining field-contract knobs the edge-cases ledger called a GAP:
+ * skeleton, compact, disabled, and readOnly.
+ */
+
+import React from "react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Form, useForm } from "@multiplatform.one/forms";
+
+vi.mock("@multiplatform.one/router", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return { ...actual, useUrlState: () => [{}, () => {}] };
+});
+
+import { screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { DataTableColumn, DataTableData } from "../../types";
+import { ChildTable } from "./index";
+
+interface Row extends DataTableData {
+  id: string;
+  item: string;
+}
+
+const rows: Row[] = [
+  { id: "row-a", item: "Bracket" },
+  { id: "row-b", item: "Bolts" },
+];
+
+const columns: DataTableColumn<Row>[] = [{ accessorKey: "item", header: "Item", field: "input" }];
+
+describe("ChildTable — D/R/E/Q/S/C", () => {
+  it("skeleton branch: TableInput placeholders, no add/delete, aria-busy", () => {
+    const { container } = renderWithProviders(
+      <ChildTable<Row>
+        label="Line items"
+        skeleton
+        value={rows}
+        onChange={vi.fn()}
+        columns={columns}
+      />,
+    );
+    expect(container.querySelectorAll("input").length).toBe(0);
+    expect(screen.queryByRole("button", { name: "Add Row" })).toBeNull();
+    expect(screen.queryByRole("button", { name: /Delete row/ })).toBeNull();
+    expect(container.querySelector('[aria-busy="true"]')).toBeTruthy();
+    expect(screen.getByText("Line items")).toBeTruthy();
+  });
+
+  it("compact forwards into the field (useFormField + TableInput)", () => {
+    renderWithProviders(
+      <ChildTable<Row>
+        label="Line items"
+        compact
+        value={rows}
+        onChange={vi.fn()}
+        columns={columns}
+      />,
+    );
+    expect(screen.getByRole("group", { name: /Line items/ })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Add Row" })).toBeTruthy();
+  });
+
+  it("disabled hides add/delete and does not expose editors", () => {
+    renderWithProviders(
+      <ChildTable<Row>
+        label="Line items"
+        disabled
+        value={rows}
+        onChange={vi.fn()}
+        columns={columns}
+      />,
+    );
+    expect(screen.queryByRole("button", { name: "Add Row" })).toBeNull();
+    expect(screen.queryByRole("button", { name: /Delete row/ })).toBeNull();
+  });
+
+  it("readOnly hides add/delete", () => {
+    renderWithProviders(
+      <ChildTable<Row>
+        label="Line items"
+        readOnly
+        value={rows}
+        onChange={vi.fn()}
+        columns={columns}
+      />,
+    );
+    expect(screen.queryByRole("button", { name: "Add Row" })).toBeNull();
+    expect(screen.queryByRole("button", { name: /Delete row/ })).toBeNull();
+  });
+
+  it("required + form context still associates the label with the named group", () => {
+    function Harness() {
+      const form = useForm({ defaultValues: { items: rows } });
+      return (
+        <Form form={form as any}>
+          <ChildTable<Row> name="items" label="Line items" required columns={columns} />
+        </Form>
+      );
+    }
+    renderWithProviders(<Harness />);
+    expect(screen.getByRole("group", { name: /Line items/ })).toBeTruthy();
+  });
+});

package/src/components/ChildTable/index.tsx

@@ -1,4 +1,5 @@
-import type { ReactNode } from "react";
+import { useCallback, type ReactNode } from "react";
+import { renumberIdx } from "@multiplatform.one/components";
 import { FieldLayout, useFormField, type AnyFormApi } from "@multiplatform.one/forms";
 import { useProps, YStack } from "tamagui";
 import { TableInput } from "../TableInput";
@@ -26,6 +27,11 @@ export type ChildTableProps<TRow extends DataTableData = DataTableData> = {
   helperText?: string;
   required?: boolean;
   id?: string;
+  /**
+   * Leading grab handle + keyboard reorder. Default on unless the field is
+   * read-only or disabled. A committed drop rewrites `idx` 1..n (MPO-22).
+   */
+  enableReorder?: boolean;
 };
 
 /**
@@ -77,11 +83,23 @@ export function ChildTable<TRow extends DataTableData = DataTableData>(
     helperText,
     required,
     id: idProp,
+    enableReorder: enableReorderProp,
   } = useProps(props);
 
   const { knobProps, id, resolvedForm } = useFormField({ form, id: idProp, compact });
   const formBound = !!resolvedForm && !!name;
   const hasLayout = label || error || helperText || required;
+  const enableReorder = enableReorderProp ?? !(readOnly || disabled);
+
+  const emitChange = useCallback(
+    (rows: TRow[]) => {
+      const next = rows.some((row) => typeof (row as { idx?: number }).idx === "number")
+        ? renumberIdx(rows)
+        : rows;
+      onChange?.(next);
+    },
+    [onChange],
+  );
 
   // Generic JSX (`<TableInput<TRow> …/>`) breaks one-dev's source annotation
   // transform; instantiate the type argument outside JSX instead.
@@ -95,7 +113,7 @@ export function ChildTable<TRow extends DataTableData = DataTableData>(
       required={required}
       skeleton={skeleton}
       data={value ?? []}
-      onChange={onChange}
+      onChange={emitChange}
       columns={columns ?? []}
       defaultRow={defaultRow}
       readOnly={readOnly || disabled}
@@ -105,6 +123,7 @@ export function ChildTable<TRow extends DataTableData = DataTableData>(
       showAddRow={showAddRow && !readOnly && !disabled}
       showDeleteRow={showDeleteRow && !readOnly && !disabled}
       compact={compact}
+      enableReorder={enableReorder && !readOnly && !disabled}
     />
   );
 

package/src/components/ColumnHeaderFilter/index.tsx

@@ -16,6 +16,7 @@ import { Tooltip } from "@multiplatform.one/components";
 import { Popover, Text, View, XStack, YStack } from "tamagui";
 import { t } from "../../shared/t";
 import type { FilterOperator } from "../../types";
+import { iconSizeForToken } from "../../utils/chromeIcons";
 import { operatorNeedsNoValue } from "../../utils/filterFields";
 import { FilterOperatorValueEditor } from "../FilterOperatorValueEditor";
 
@@ -54,6 +55,7 @@ export function ColumnHeaderFilter({
   isFiltered,
 }: ColumnHeaderFilterProps) {
   const { knobProps } = useResolvedKnobs();
+  const iconPx = iconSizeForToken(String(knobProps.sizeToken));
   const [open, setOpen] = useState(false);
   const [operator, setOperator] = useState<FilterOperator>("contains");
   const [value, setValue] = useState<string>("");
@@ -116,7 +118,7 @@ export function ColumnHeaderFilter({
               hoverStyle={{ backgroundColor: "$color4" }}
             >
               <FunnelIcon
-                size={14}
+                size={iconPx}
                 color={isFiltered ? "var(--accentColor)" : "var(--color10)"}
                 weight={isFiltered ? "fill" : "regular"}
               />
@@ -126,24 +128,17 @@ export function ColumnHeaderFilter({
       </Tooltip>
 
       <Popover.Content
-        {...knobProps.borderRadius}
-        borderWidth={1}
-        borderColor="$color6"
-        backgroundColor="$background"
+        {...knobProps.elevatedSurface}
         {...knobProps.panelPadding}
         minWidth={240}
         transition={knobProps.transition}
         enterStyle={{ y: -5, opacity: 0 }}
         exitStyle={{ y: -5, opacity: 0 }}
-        // Knob elevation channel, not `elevate`: Popover.Content has no such
-        // variant in tamagui 2.0, so the bare boolean leaked to the DOM
-        // (LC-46 class) and painted no shadow.
-        elevation={knobProps.elevation}
       >
-        <Popover.Arrow borderWidth={1} borderColor="$color6" />
+        <Popover.Arrow borderColor="$borderColor" backgroundColor="$color1" />
 
         <YStack {...knobProps.gap}>
-          <Text fontSize={knobProps.sizeToken} fontWeight="600" color="$color11">
+          <Text {...knobProps.label} fontWeight="400" color="$color11">
             {t("Filter: {{column}}", { column: columnLabel })}
           </Text>
 
@@ -158,13 +153,13 @@ export function ColumnHeaderFilter({
           />
 
           {/* Actions */}
-          <XStack gap="$2" justifyContent="flex-end">
+          <XStack {...knobProps.gap} justifyContent="flex-end">
             {isFiltered && (
-              <Button size="$2" variant="outlined" onPress={handleClear}>
+              <Button size={knobProps.sizeToken} variant="outlined" onPress={handleClear}>
                 {t("Clear")}
               </Button>
             )}
-            <Button size="$2" onPress={handleApply}>
+            <Button size={knobProps.sizeToken} onPress={handleApply}>
               {t("Apply")}
             </Button>
           </XStack>

package/src/components/DataTable/DataTableCardControls.tsx

@@ -20,6 +20,7 @@ import { useTranslation } from "react-i18next";
 import type { DataTableColumnType, FacetedFilterOption } from "../../types";
 import { withInterp } from "../../utils/withInterp";
 import { DataTableFilters } from "../DataTableFilters";
+import { dataTableChrome } from "./dataTableChrome";
 
 export interface DataTableCardControlsProps {
   /** TanStack table instance (from useDataTable). */
@@ -52,7 +53,8 @@ export function DataTableCardControls({
   disabled = false,
 }: DataTableCardControlsProps) {
   const { t } = useTranslation();
-  const { knobProps, disabledState } = useResolvedKnobs({ compact });
+  const { knobProps, disabledState } = useResolvedKnobs({ component: "DataTable", compact });
+  const chrome = dataTableChrome(String(knobProps.sizeToken));
   const [sortMenuOpen, setSortMenuOpen] = useState(false);
 
   const sortableColumns = enableSorting
@@ -88,7 +90,7 @@ export function DataTableCardControls({
             <Button
               size={knobProps.sizeToken}
               variant="outlined"
-              icon={<CaretUpDownIcon size={16} />}
+              icon={<CaretUpDownIcon size={chrome.iconPx} />}
               aria-label={t("Sort rows")}
               disabled={disabled}
             >
@@ -105,11 +107,11 @@ export function DataTableCardControls({
                   closeOnSelect={false}
                   icon={
                     sorted === "asc" ? (
-                      <CaretDownIcon size={14} />
+                      <CaretDownIcon size={chrome.iconPx} />
                     ) : sorted === "desc" ? (
-                      <CaretDownIcon size={14} style={{ transform: "rotate(180deg)" }} />
+                      <CaretDownIcon size={chrome.iconPx} style={{ transform: "rotate(180deg)" }} />
                     ) : (
-                      <CaretUpDownIcon size={14} />
+                      <CaretUpDownIcon size={chrome.iconPx} />
                     )
                   }
                   aria-label={withInterp(
@@ -132,17 +134,18 @@ export function DataTableCardControls({
           </DropdownMenu.Content>
         </DropdownMenu>
       )}
-      {enableFiltering && availableColumns.length > 0 && (
-        // DataTableFilters (chrome) has no disabled API — the wrapper is the
-        // LC-40 carrier and interaction gate for the disabled table.
-        <View
-          {...(disabled
-            ? { ...disabledState.chromeKnobProps, pointerEvents: "none" as const }
-            : {})}
-        >
-          <DataTableFilters compact availableColumns={availableColumns} />
-        </View>
-      )}
+      {enableFiltering &&
+        availableColumns.length > 0 && (
+          // DataTableFilters (chrome) has no disabled API — the wrapper is the
+          // LC-40 carrier and interaction gate for the disabled table.
+          <View
+            {...(disabled
+              ? { ...disabledState.chromeKnobProps, pointerEvents: "none" as const }
+              : {})}
+          >
+            <DataTableFilters compact availableColumns={availableColumns} />
+          </View>
+        )}
     </XStack>
   );
 }

package/src/components/DataTable/DataTableDocumentList.tsx

@@ -24,6 +24,7 @@ import { View, XStack, YStack } from "tamagui";
 import type { DataTableColumn } from "../../types";
 import { withInterp } from "../../utils/withInterp";
 import { partitionDocumentListCells } from "./documentListSlots";
+import { dataTableChrome, rowIntentProps } from "./dataTableChrome";
 import { tableRowStateProps } from "./rowStateChrome";
 
 /** Subject cell: explicit title role, else first non-action / non-`_` column. */
@@ -68,7 +69,8 @@ export function DataTableDocumentList<TData extends Record<string, any>>({
   queryInFlight = false,
 }: DataTableDocumentListProps<TData>) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useResolvedKnobs({ component: "DataTable", compact });
+  const chrome = dataTableChrome(String(knobProps.sizeToken));
   const tableZebraOn = knobProps.tableZebra === "on";
   const rowPad = knobProps.panelPadding.padding;
 
@@ -79,7 +81,7 @@ export function DataTableDocumentList<TData extends Record<string, any>>({
       const titleCell = pickDocumentListTitleCell(visibleCells);
       const { indicators, metas, actions } = partitionDocumentListCells(visibleCells, titleCell);
       const position = getGroupPosition(index, tableRows.length);
-      const corners = stackRadiusProps(position, knobProps.borderRadius.borderRadius);
+      const corners = stackRadiusProps(position, knobProps.borderRadiusOuter.borderRadius);
       const selected = Boolean(enableRowSelection && row.getIsSelected?.());
       const rowState = tableRowStateProps({
         selected,
@@ -96,7 +98,7 @@ export function DataTableDocumentList<TData extends Record<string, any>>({
             gap="$3"
             paddingHorizontal={rowPad}
             paddingVertical="$2"
-            minHeight={44}
+            minHeight={chrome.rowPx}
             overflow="hidden"
             display="flex"
             flexDirection="row"
@@ -110,6 +112,7 @@ export function DataTableDocumentList<TData extends Record<string, any>>({
               ...corners,
             }}
             {...(getRowPressProps ? (getRowPressProps(row, index, "row") as any) : {})}
+            {...(rowIntentProps(rowData) as any)}
           >
             {enableRowSelection && (
               <Checkbox
@@ -188,7 +191,7 @@ export function DataTableDocumentList<TData extends Record<string, any>>({
       disabled,
       enableRowSelection,
       getRowPressProps,
-      knobProps.borderRadius.borderRadius,
+      knobProps.borderRadiusOuter.borderRadius,
       renderCellContent,
       rowPad,
       selectRowLabel,

package/src/components/DataTable/DataTableMobileCards.tsx

@@ -26,6 +26,7 @@ import { useTranslation } from "react-i18next";
 import { TableCellContext } from "@multiplatform.one/table-primitives";
 import type { DataTableColumn } from "../../types";
 import { withInterp } from "../../utils/withInterp";
+import { rowIntentProps } from "./dataTableChrome";
 
 /**
  * Resolve the human label for a column: `meta.label` → string header →
@@ -94,7 +95,7 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
   queryInFlight = false,
 }: DataTableMobileCardsProps<TData>) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useResolvedKnobs({ component: "DataTable", compact });
   const tableZebraOn = knobProps.tableZebra === "on";
 
   const renderMobileCard = useCallback(
@@ -117,6 +118,7 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
             "data-table-zebra": tableZebraOn ? (index % 2 === 0 ? "even" : "odd") : "off",
           } as any)}
           {...(getRowPressProps ? (getRowPressProps(row, index, "card") as any) : {})}
+          {...(rowIntentProps(rowData) as any)}
         >
           {/* Card header: selection + primary-column title + row number + delete */}
           <XStack