@multiplatform.one/table 7.34.4 → 7.36.0

package/src/components/DataTablePagination/index.tsx

@@ -5,12 +5,13 @@ import {
   sizeRecipeForToken,
   textFieldInset,
   useResolvedKnobs,
+  sizeTokenStep,
 } from "@multiplatform.one/theme";
 import { Pagination, getPaginationItems } from "@multiplatform.one/components";
 import { useMemo, useState } from "react";
 import type React from "react";
 import { Input, Select } from "@multiplatform.one/forms";
-import { Text, View, XStack, getTokenValue, useMedia } from "tamagui";
+import { type SizeTokens, Text, View, XStack, getTokenValue, useMedia } from "tamagui";
 import type { TablePagination, TablePaginationState } from "../../types";
 import { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS } from "../../utils/paginationDefaults";
 import { bidiIsolate } from "../../utils/withInterp";
@@ -28,7 +29,13 @@ export interface DataTablePaginationProps {
    * it is hidden by default. Eject to keep the pager chrome visible anyway.
    */
   showPagerWhenSinglePage?: boolean;
-  compact?: boolean;
+  /**
+   * Size token (Tamagui's own `size`). Below `$true` the footer packs: no
+   * page jump, no first/last, and inside a table no range readout. The size
+   * Select and the jumper keep the ambient token: the pager's page controls
+   * hold the 44px press floor, so a smaller field would sit below them.
+   */
+  size?: SizeTokens;
 }
 
 function controlWidth(chars: number, fontSize: number, inset: number, trailingChrome = 0) {
@@ -87,19 +94,18 @@ export function DataTablePagination(props: DataTablePaginationProps) {
     showPageSizeSelector = true,
     showPageJump = true,
     showPagerWhenSinglePage = false,
-    compact,
   } = props;
 
   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 { knobProps } = useResolvedKnobs();
+  const { knobProps: footerKnobs } = useResolvedKnobs({ size: props.size });
+  const small = sizeTokenStep(footerKnobs.sizeToken) < 0;
   const fieldRecipe = sizeRecipeForToken(knobProps.sizeToken, { touch: isTouchSurface() });
   const selectInset = Number(
-    getTokenValue(fieldKnobs.panelPadding.padding as Parameters<typeof getTokenValue>[0], "space"),
+    getTokenValue(knobProps.panelPadding.padding as Parameters<typeof getTokenValue>[0], "space"),
   );
   const isMobile = !sm;
-  const packed = compact && insideTable;
+  const packed = small && insideTable;
   const [availableWidth, setAvailableWidth] = useState<number | undefined>();
   const measureWidth = (event: import("react-native").LayoutChangeEvent) => {
     const width = event.nativeEvent.layout.width;
@@ -136,7 +142,7 @@ export function DataTablePagination(props: DataTablePaginationProps) {
   // Budget the numbered window from the active theme's control geometry.
   // An unmeasured host uses the safe simple presentation, including SSR.
   const pageControls =
-    getPaginationItems(totalPages, currentPage).length + 2 + (!compact && !isMobile ? 2 : 0);
+    getPaginationItems(totalPages, currentPage).length + 2 + (!small && !isMobile ? 2 : 0);
   const controlBudget = Math.max(
     MIN_PRESS_TARGET,
     knobProps.control.height + knobProps.control.paddingHorizontal * 2,
@@ -165,8 +171,8 @@ export function DataTablePagination(props: DataTablePaginationProps) {
 
   const showSize = showPageSizeSelector;
   // Compact-inside-DataTable: the table footer already paints the range.
-  const showRange = showInfo && !(compact && insideTable);
-  const showJump = showPageJump && showPager && !compact && !isMobile && !simplePager;
+  const showRange = showInfo && !(small && insideTable);
+  const showJump = showPageJump && showPager && !small && !isMobile && !simplePager;
 
   const [jumpNonce, setJumpNonce] = useState(0);
 
@@ -202,7 +208,7 @@ export function DataTablePagination(props: DataTablePaginationProps) {
           80,
           controlWidth(
             Math.max(2, ...sizeOptions.map((n) => String(n).length)),
-            fieldKnobs.controlType.fontSize,
+            knobProps.controlType.fontSize,
             selectInset,
             fieldRecipe.gap + 16, // Select's fixed 16px caret.
           ),
@@ -224,7 +230,6 @@ export function DataTablePagination(props: DataTablePaginationProps) {
           }))}
           aria-label="Select rows per page"
           size={knobProps.sizeToken}
-          compact
         />
       </View>
     </XStack>
@@ -236,7 +241,7 @@ export function DataTablePagination(props: DataTablePaginationProps) {
       total={totalPages}
       page={currentPage}
       onPageChange={(page) => handlePageChange(page - 1)}
-      showFirstLast={!simplePager && !compact && !isMobile}
+      showFirstLast={!simplePager && !small && !isMobile}
       aria-label="Page"
       padding={0}
     />
@@ -274,7 +279,6 @@ export function DataTablePagination(props: DataTablePaginationProps) {
           placeholder={`1-${totalPages}`}
           aria-label="Page number"
           size={knobProps.sizeToken}
-          compact
         />
       </View>
       <Text {...helperText} aria-hidden>

package/src/components/DataTableSearch/DataTableSearch.stories.tsx

@@ -33,7 +33,7 @@ export default meta;
 export const Default = {
   name: "Main",
   render: () => (
-    <YStack width={480} padding="$4">
+    <YStack width={480} maxWidth="100%" padding="$4">
       <DataTableSearch
         data={data}
         columns={columns}

package/src/components/DataTableSearch/index.tsx

@@ -283,28 +283,28 @@ function SearchOptionsPanel({
           </Text>
 
           <Checkbox
-            compact
+            size="$3"
             label={t("Case sensitive")}
             checked={searchOptions.caseSensitive}
             onCheckedChange={(checked) => onOptionsChange({ caseSensitive: checked as boolean })}
           />
 
           <Checkbox
-            compact
+            size="$3"
             label={t("Whole word only")}
             checked={searchOptions.wholeWord}
             onCheckedChange={(checked) => onOptionsChange({ wholeWord: checked as boolean })}
           />
 
           <Checkbox
-            compact
+            size="$3"
             label={t("Use regex")}
             checked={searchOptions.regex}
             onCheckedChange={(checked) => onOptionsChange({ regex: checked as boolean })}
           />
 
           <Checkbox
-            compact
+            size="$3"
             label={t("Highlight results")}
             checked={searchOptions.highlightResults}
             onCheckedChange={(checked) => onOptionsChange({ highlightResults: checked as boolean })}
@@ -329,10 +329,10 @@ function SearchOptionsPanel({
           </XStack>
 
           <XStack {...knobProps.gap}>
-            <Button size="$2" compact onPress={handleSelectAllColumns}>
+            <Button size="$2" onPress={handleSelectAllColumns}>
               {t("All")}
             </Button>
-            <Button size="$2" compact onPress={handleSelectNoColumns}>
+            <Button size="$2" onPress={handleSelectNoColumns}>
               {t("None")}
             </Button>
           </XStack>
@@ -343,7 +343,7 @@ function SearchOptionsPanel({
               return (
                 <Checkbox
                   key={key}
-                  compact
+                  size="$3"
                   label={col.header || key}
                   checked={searchOptions.columns.includes(key)}
                   onCheckedChange={(checked) => handleColumnToggle(key, checked as boolean)}

package/src/components/DataTableToolbar/index.tsx

@@ -45,7 +45,6 @@ export interface DataTableToolbarProps {
 
   // Sizing
   size?: string;
-  compact?: boolean;
 }
 
 export function DataTableToolbar(props: DataTableToolbarProps) {
@@ -80,7 +79,6 @@ function ToolbarLayout({
     showViewSelector = true,
     customActions,
     size,
-    compact,
     isFetching: isFetchingProp,
   } = props;
   const isFetching = isFetchingProp ?? ctx?.state.isFetching ?? false;
@@ -103,9 +101,7 @@ function ToolbarLayout({
     }
   };
 
-  const { knobProps } = useResolvedKnobs(
-    size === undefined && compact === undefined ? undefined : { size, compact },
-  );
+  const { knobProps } = useResolvedKnobs(size === undefined ? undefined : { size });
   const sz = knobProps.sizeToken;
   const iconPx = iconSizeForToken(String(sz));
   const searchMaxWidth = sz === "$3" ? 280 : sz === "$5" ? 400 : 320;
@@ -180,7 +176,6 @@ function ToolbarLayout({
           value={newViewName}
           onChangeText={setNewViewName}
           size={searchSize}
-          {...(compact === undefined ? {} : { compact })}
           inputProps={{
             "aria-label": t("View name"),
             onKeyDown: (e: React.KeyboardEvent) => {
@@ -243,7 +238,6 @@ function ToolbarLayout({
             onClear={enableFiltering ? onClearFilters : undefined}
             placeholder={t("Search")}
             aria-label={t("Search table data")}
-            {...(compact === undefined ? {} : { compact })}
             size={searchSize}
           />
         </XStack>

package/src/components/DataTableViewOptions/DataTableViewOptions.spec.tsx

@@ -59,7 +59,7 @@ describe("DataTableViewOptions", () => {
         onSaveView={vi.fn()}
         onLoadView={vi.fn()}
         onResetToDefault={vi.fn()}
-        compact={true}
+        size="$3"
       />,
     );
 
@@ -76,7 +76,7 @@ describe("DataTableViewOptions", () => {
         onSaveView={vi.fn()}
         onLoadView={vi.fn()}
         onResetToDefault={vi.fn()}
-        compact={true}
+        size="$3"
       />,
     );
 
@@ -98,7 +98,7 @@ describe("DataTableViewOptions", () => {
         onSaveView={vi.fn()}
         onLoadView={vi.fn()}
         onResetToDefault={vi.fn()}
-        compact={true}
+        size="$3"
       />,
     );
 
@@ -123,7 +123,7 @@ describe("DataTableViewOptions", () => {
         onSaveView={vi.fn()}
         onLoadView={vi.fn()}
         onResetToDefault={vi.fn()}
-        compact={true}
+        size="$3"
       />,
     );
 
@@ -153,7 +153,7 @@ describe("DataTableViewOptions", () => {
         onSaveView={vi.fn()}
         onLoadView={vi.fn()}
         onResetToDefault={vi.fn()}
-        compact={true}
+        size="$3"
       />,
     );
 

package/src/components/DataTableViewOptions/DataTableViewOptions.stories.tsx

@@ -133,7 +133,7 @@ export const Compact = () => {
       </Text>
 
       <DataTableViewOptions
-        compact
+        size="$3"
         columns={columns}
         onColumnVisibilityChange={(columnId, visible) => {
           setColumns((prev) =>

package/src/components/DataTableViewOptions/index.tsx

@@ -5,11 +5,16 @@ import {
   FloppyDiskIcon,
   GearIcon,
 } from "@phosphor-icons/react";
-import { getGroupPosition, stackRadiusProps, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  getGroupPosition,
+  stackRadiusProps,
+  useResolvedKnobs,
+  sizeTokenStep,
+} from "@multiplatform.one/theme";
 import React, { useState } from "react";
 import { Button, FloatingPanel, Input, Slider, Switch } from "@multiplatform.one/forms";
 import { DropdownMenu, ScrollView } from "@multiplatform.one/components";
-import { Separator, Text, View, XStack, YStack, useTheme } from "tamagui";
+import { Separator, Text, View, XStack, YStack, useTheme, type SizeTokens } from "tamagui";
 import type { TableView } from "../../types";
 import { t } from "../../shared/t";
 import { iconSizeForToken } from "../../utils/chromeIcons";
@@ -43,7 +48,11 @@ export interface DataTableViewOptionsProps {
   showColumnOrdering?: boolean;
   showColumnResizing?: boolean;
   showViewManagement?: boolean;
-  compact?: boolean;
+  /**
+   * Size token (Tamagui's own `size`). Below `$true` the options collapse to
+   * a column-visibility action menu.
+   */
+  size?: SizeTokens;
 }
 
 export function DataTableViewOptions(props: DataTableViewOptionsProps) {
@@ -89,10 +98,10 @@ export function DataTableViewOptions(props: DataTableViewOptionsProps) {
     showColumnOrdering = false,
     showColumnResizing = false,
     showViewManagement = false,
-    compact: menuLayout,
   } = props;
 
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useResolvedKnobs({ size: props.size });
+  const menuLayout = sizeTokenStep(knobProps.sizeToken) < 0;
   const iconPx = iconSizeForToken(String(knobProps.sizeToken));
   const sz = knobProps.sizeToken;
   const popoverMaxWidth = sz === "$3" ? 240 : sz === "$5" ? 360 : 300;
@@ -186,7 +195,7 @@ export function DataTableViewOptions(props: DataTableViewOptionsProps) {
 
       <ScrollView maxHeight={scrollMaxHeight}>
         {/* gapLg: section gaps exceed field gaps (DG-LAY-03) and follow the
-            space knob (LC-18). paddingRight keeps row controls clear of the
+            spacing roles (LC-18). paddingRight keeps row controls clear of the
             overlay scrollbar so toggles are never painted over. */}
         <YStack {...knobProps.gapLg} paddingRight="$3">
           {/* Column Visibility */}

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

@@ -7,7 +7,7 @@
 
 import { fireEvent, screen, waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { type Knobs, Preset } from "@multiplatform.one/theme";
+import { Surface } from "@multiplatform.one/theme";
 import React, { useState } from "react";
 import { describe, expect, it, vi } from "vitest";
 import type { DataTableColumnType, FilterOperator } from "../../types";
@@ -265,15 +265,9 @@ describe("FilterOperatorValueEditor", () => {
     const valueBox = (container: HTMLElement) =>
       container.querySelector("[data-mp-input-field='true']") as HTMLElement;
 
-    const padX = (el: Element) =>
-      String((el as HTMLElement).className || "")
-        .split(" ")
-        .filter((c) => c.startsWith("_px-") || c.startsWith("_pl-") || c.startsWith("_pr-"))
-        .sort();
-
-    function renderAtKnobs(overrides: Partial<Knobs>) {
+    function renderAtSize(size: "$3" | "$5") {
       return renderWithProviders(
-        <Preset overrides={overrides}>
+        <Surface size={size}>
           <FilterOperatorValueEditor
             fieldType="text"
             operator="contains"
@@ -281,43 +275,29 @@ describe("FilterOperatorValueEditor", () => {
             onOperatorChange={vi.fn()}
             onValueChange={vi.fn()}
           />
-        </Preset>,
+        </Surface>,
       );
     }
 
-    it("size small: Condition and Value both paint the small recipe", () => {
-      const { container } = renderAtKnobs({ size: "small" });
+    it("Surface $3: Condition and Value both paint the $3 recipe", () => {
+      const { container } = renderAtSize("$3");
       const box = valueBox(container);
-      expect(box.getAttribute("data-size")).toBe("$3");
-      expect(box.getAttribute("data-visual-height")).toBe("36");
-      expect(selectTriggers(container)[0].getAttribute("data-visual-height")).toBe("36");
+      expect(box.getAttribute("data-size-token")).toBe("$3");
+      expect(box.getAttribute("data-visual-height")).toBe("32");
+      expect(selectTriggers(container)[0].getAttribute("data-visual-height")).toBe("32");
     });
 
-    it("size large: the Value input follows the knob instead of a pinned $3", () => {
-      const { container } = renderAtKnobs({ size: "large" });
+    it("Surface $5: the Value input follows the token instead of a pinned $3", () => {
+      const { container } = renderAtSize("$5");
       const box = valueBox(container);
-      expect(box.getAttribute("data-size")).toBe("$5");
-      expect(box.getAttribute("data-visual-height")).toBe("52");
-      expect(selectTriggers(container)[0].getAttribute("data-visual-height")).toBe("52");
-    });
-
-    it("density comfortable: compact is not forced on the inner fields", () => {
-      const { container } = renderAtKnobs({ density: "comfortable" });
-      expect(valueBox(container).getAttribute("data-density")).toBe("comfortable");
+      expect(box.getAttribute("data-size-token")).toBe("$5");
+      expect(box.getAttribute("data-visual-height")).toBe("48");
+      expect(selectTriggers(container)[0].getAttribute("data-visual-height")).toBe("48");
     });
 
-    it("density compact: the inner fields step with the density knob and keep their height", () => {
-      const comfortable = renderAtKnobs({ density: "comfortable", size: "medium" });
-      const comfortablePad = padX(selectTriggers(comfortable.container)[0]);
-      const comfortableHeight = valueBox(comfortable.container).getAttribute("data-visual-height");
-      comfortable.unmount();
-
-      const { container } = renderAtKnobs({ density: "compact", size: "medium" });
-      const box = valueBox(container);
-      expect(box.getAttribute("data-density")).toBe("compact");
-      expect(box.getAttribute("data-visual-height")).toBe(comfortableHeight);
-      expect(comfortablePad.length).toBeGreaterThan(0);
-      expect(padX(selectTriggers(container)[0])).not.toEqual(comfortablePad);
+    it("publishes no density attribute on the inner fields", () => {
+      const { container } = renderAtSize("$3");
+      expect(valueBox(container).hasAttribute("data-density")).toBe(false);
     });
   });
 });

package/src/components/KnobDialog.tsx

@@ -1,13 +1,5 @@
-/**
- * KnobDialog - Tamagui Dialog wrapped with knob-wired styling.
- *
- * Since no shared Dialog component exists in the codebase, this internal
- * wrapper applies useResolvedKnobs to Tamagui's Dialog for consistent
- * borderRadius, elevation, and sizing across the table package.
- */
-
-import { Dialog, DialogShowFocus } from "@multiplatform.one/components";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Dialog } from "@multiplatform.one/components";
+import { DialogContent, DialogOverlay, useResolvedKnobs } from "@multiplatform.one/theme";
 import type React from "react";
 
 export interface KnobDialogProps {
@@ -35,35 +27,11 @@ export function KnobDialogContent({ children, minWidth }: KnobDialogContentProps
 
   return (
     <Dialog.Portal>
-      <Dialog.Overlay
-        key="overlay"
-        transition="quick"
-        opacity={0.5}
-        enterStyle={{ opacity: 0 }}
-        exitStyle={{ opacity: 0 }}
-      />
+      <DialogOverlay key="overlay" />
 
-      <Dialog.Content
-        {...knobProps.elevatedSurface}
-        key="content"
-        animateOnly={["transform", "opacity"]}
-        transition={[
-          "quick",
-          {
-            opacity: {
-              overshootClamping: true,
-            },
-          },
-        ]}
-        enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
-        exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
-        {...knobProps.gapLg}
-        elevation={knobProps.elevation}
-        {...(minWidth ? { minWidth } : {})}
-      >
+      <DialogContent key="content" {...knobProps.gapLg} {...(minWidth ? { minWidth } : {})}>
         {children}
-        <DialogShowFocus />
-      </Dialog.Content>
+      </DialogContent>
     </Dialog.Portal>
   );
 }

package/src/components/SavedFilterDropdown.tsx

@@ -51,7 +51,6 @@ export function SavedFilterDropdown({
       placeholder={placeholder}
       disabled={disabled}
       size={knobProps.sizeToken}
-      compact
       aria-label="Saved filters"
     />
   );

package/src/components/SimpleTable/ScrollFrame.native.tsx

@@ -0,0 +1,49 @@
+import {
+  cloneElement,
+  createContext,
+  useContext,
+  useRef,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { Animated } from "react-native";
+import type { ViewProps } from "tamagui";
+
+const ScrollOffset = createContext<Animated.Value | null>(null);
+
+export function ScrollFrame({ children }: { children: ReactNode }) {
+  const offset = useRef(new Animated.Value(0)).current;
+  return (
+    <ScrollOffset.Provider value={offset}>
+      <Animated.ScrollView
+        horizontal
+        testID="simple-table-scroll"
+        bounces={false}
+        scrollEventThrottle={16}
+        onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: offset } } }], {
+          useNativeDriver: true,
+        })}
+        style={{ flexGrow: 0, flexShrink: 1 }}
+      >
+        {children}
+      </Animated.ScrollView>
+    </ScrollOffset.Provider>
+  );
+}
+
+export function PinnedCell({
+  children,
+  width,
+}: {
+  children: ReactElement<ViewProps>;
+  width: number;
+}) {
+  const offset = useContext(ScrollOffset);
+  return (
+    <Animated.View
+      style={{ width, flexShrink: 0, zIndex: 1, transform: [{ translateX: offset ?? 0 }] }}
+    >
+      {cloneElement(children, { flexGrow: 1 })}
+    </Animated.View>
+  );
+}

package/src/components/SimpleTable/ScrollFrame.tsx

@@ -0,0 +1,18 @@
+import { cloneElement, type ReactElement, type ReactNode } from "react";
+import { View, type ViewProps } from "tamagui";
+
+export function ScrollFrame({ children }: { children: ReactNode }) {
+  return (
+    <View testID="simple-table-scroll" minWidth={0} maxWidth="100%" overflowX="auto">
+      {children}
+    </View>
+  );
+}
+
+export function PinnedCell({ children }: { children: ReactElement<ViewProps>; width: number }) {
+  return cloneElement(children, {
+    position: "sticky" as ViewProps["position"],
+    left: 0,
+    zIndex: 1,
+  });
+}

package/src/components/SimpleTable/SimpleTable.stories.tsx

@@ -19,6 +19,53 @@ const peopleData = [
   { name: "Sam Lee", age: 41, city: "Chicago" },
 ];
 
+const pokemonData = [
+  { name: "Pikachu", id: 25, weight: 60, height: 4, species: "Mouse Pokemon" },
+  { name: "Raticate", id: 20, weight: 185, height: 7, species: "Mouse Pokemon" },
+  { name: "Pidgeot", id: 18, weight: 395, height: 15, species: "Bird Pokemon" },
+];
+
+export const phoneReport = () => (
+  <SimpleTable
+    layout="table"
+    aria-label="Pokemon report"
+    columns={[
+      { accessorKey: "name", header: "Pokemon Name" },
+      { accessorKey: "id", header: "Poke ID" },
+      { accessorKey: "weight", header: "Weight" },
+    ]}
+    data={pokemonData}
+  />
+);
+
+export const pinnedOverflow = () => (
+  <SimpleTable
+    layout="table"
+    aria-label="Pokemon overflow report"
+    columns={[
+      { accessorKey: "name", header: "Pokemon Name", width: "$14" },
+      { accessorKey: "id", header: "Poke ID", type: "number" },
+      { accessorKey: "weight", header: "Weight", type: "number" },
+      { accessorKey: "height", header: "Height", type: "number" },
+      { accessorKey: "species", header: "Species", width: { flex: 2 } },
+    ]}
+    data={pokemonData}
+  />
+);
+
+export const widthHints = () => (
+  <SimpleTable
+    layout="table"
+    aria-label="Weighted columns"
+    columns={[
+      { accessorKey: "name", header: "Name", width: { flex: 2 } },
+      { accessorKey: "age", header: "Age", width: "$9" },
+      { accessorKey: "city", header: "City", width: { flex: 1 } },
+    ]}
+    data={peopleData}
+  />
+);
+
 export const main = {
   name: "Main",
   args: {