@multiplatform.one/table 7.4.1 → 7.6.0

package/src/components/DataTableToolbar/index.tsx

@@ -1,14 +1,16 @@
 import { CaretDownIcon, FloppyDiskIcon } from "@phosphor-icons/react";
 import { DropdownMenu } from "@multiplatform.one/components";
 import { Button, Input, SearchInput, Spinner } from "@multiplatform.one/forms";
-import { hairline, sizeRecipeForToken, useResolvedKnobs } from "@multiplatform.one/theme";
+import { hairline, useResolvedKnobs } from "@multiplatform.one/theme";
 import { RovingFocusGroup } from "@tamagui/roving-focus";
 import type React from "react";
 import { useState } from "react";
 import { Popover, XStack, YStack } from "tamagui";
 import { t } from "../../shared/t";
 import type { TableView } from "../../types";
+import { iconSizeForToken } from "../../utils/chromeIcons";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
+import { DataTableExport } from "../DataTableExport";
 import { DataTableFilterButton } from "../DataTableFilterButton";
 
 export interface DataTableToolbarProps {
@@ -31,6 +33,8 @@ export interface DataTableToolbarProps {
   enableViews?: boolean;
   enableGlobalSearch?: boolean;
   enableFiltering?: boolean;
+  /** Mount DataTableExport in the action cluster (view-scoped CSV/JSON/print). */
+  enableExport?: boolean;
 
   // Customization
   showFilterCount?: boolean;
@@ -44,10 +48,6 @@ export interface DataTableToolbarProps {
   compact?: boolean;
 }
 
-// Toolbar glyphs are control-internal icons (LC-75/LC-79): the generated
-// recipe's icon channel — no handwritten per-token px map.
-const iconSizeForToken = (token: string): number => sizeRecipeForToken(token).iconSize;
-
 export function DataTableToolbar(props: DataTableToolbarProps) {
   const ctx = useDataTableState();
 
@@ -64,11 +64,12 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
     enableViews = false,
     enableGlobalSearch = true,
     enableFiltering = true,
+    enableExport = false,
     showFilterCount: _showFilterCount = true,
     showViewSelector = true,
     customActions,
     size,
-    compact: _compact = true,
+    compact,
     isFetching: isFetchingProp,
   } = props;
   const isFetching = isFetchingProp ?? ctx?.state.isFetching ?? false;
@@ -91,17 +92,19 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
     }
   };
 
-  const { knobProps } = useResolvedKnobs({ size, compact: true });
+  const { knobProps } = useResolvedKnobs(
+    size === undefined && compact === undefined ? undefined : { size, compact },
+  );
   const sz = knobProps.sizeToken;
   const iconPx = iconSizeForToken(String(sz));
   const searchMaxWidth = sz === "$3" ? 280 : sz === "$5" ? 400 : 320;
-  const controlSize = "$2" as const;
-  const searchSize = "$3" as const;
+  const controlSize = knobProps.sizeToken;
+  const searchSize = knobProps.sizeToken;
 
   const showViewPicker = enableViews && showViewSelector && views.length > 0;
   const showSave = enableViews && showViewSelector;
   const showActionCluster = Boolean(
-    customActions || showFilterButton || showViewPicker || showSave,
+    customActions || showFilterButton || showViewPicker || showSave || enableExport,
   );
   const hasTrailing = showActionCluster || isFetching;
 
@@ -135,7 +138,7 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
             onClear={enableFiltering ? onClearFilters : undefined}
             placeholder={t("Search")}
             aria-label={t("Search table data")}
-            compact
+            {...(compact === undefined ? {} : { compact })}
             size={searchSize}
           />
         </XStack>
@@ -153,6 +156,8 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
               <XStack alignItems="center" {...knobProps.gap}>
                 {showFilterButton && <DataTableFilterButton />}
 
+                {enableExport && <DataTableExport />}
+
                 {customActions}
 
                 {showViewPicker && (
@@ -214,7 +219,7 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
                           value={newViewName}
                           onChangeText={setNewViewName}
                           size={searchSize}
-                          compact
+                          {...(compact === undefined ? {} : { compact })}
                           inputProps={{
                             "aria-label": t("View name"),
                             onKeyDown: (e: React.KeyboardEvent) => {
@@ -224,14 +229,14 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
                         />
                         <XStack {...knobProps.gap} justifyContent="flex-end">
                           <Button
-                            size="$2"
+                            size={controlSize}
                             variant="outlined"
                             onPress={() => setShowSaveViewDialog(false)}
                           >
                             {t("Cancel")}
                           </Button>
                           <Button
-                            size="$2"
+                            size={controlSize}
                             onPress={handleSaveView}
                             disabled={!newViewName.trim()}
                             disabledReason={t("Enter a view name")}

package/src/components/DataTableViewOptions/index.tsx

@@ -11,8 +11,9 @@ import { Button, Input, Slider, Switch } from "@multiplatform.one/forms";
 import { DropdownMenu } from "@multiplatform.one/components";
 import { Popover, ScrollView, Separator, Text, View, XStack, YStack, useTheme } from "tamagui";
 import type { TableView } from "../../types";
-import { useDataTableState } from "../DataTable/DataTableStateContext";
 import { t } from "../../shared/t";
+import { iconSizeForToken } from "../../utils/chromeIcons";
+import { useDataTableState } from "../DataTable/DataTableStateContext";
 
 export interface DataTableViewOptionsProps {
   // Column Management
@@ -88,10 +89,11 @@ export function DataTableViewOptions(props: DataTableViewOptionsProps) {
     showColumnOrdering = false,
     showColumnResizing = false,
     showViewManagement = false,
-    compact = false,
+    compact: menuLayout,
   } = props;
 
   const { knobProps } = useResolvedKnobs();
+  const iconPx = iconSizeForToken(String(knobProps.sizeToken));
   const sz = knobProps.sizeToken;
   const popoverMaxWidth = sz === "$3" ? 240 : sz === "$5" ? 360 : 300;
   const scrollMaxHeight = sz === "$3" ? 320 : sz === "$5" ? 480 : 400;
@@ -109,7 +111,7 @@ export function DataTableViewOptions(props: DataTableViewOptionsProps) {
   const visibleColumns = columns.filter((col) => col.visible);
   const hiddenColumns = columns.filter((col) => !col.visible);
 
-  if (compact) {
+  if (menuLayout) {
     // Compact mode is a column-visibility action menu: canonical DropdownMenu
     // (roving keyboard, focus restore, edge-to-edge rows) with checkbox items.
     return (
@@ -118,7 +120,7 @@ export function DataTableViewOptions(props: DataTableViewOptionsProps) {
           <Button
             size={knobProps.sizeToken}
             variant="outlined"
-            icon={<GearIcon size={16} />}
+            icon={<GearIcon size={iconPx} />}
             aria-label={t("Open table view options")}
           >
             {t("View")}
@@ -141,7 +143,7 @@ export function DataTableViewOptions(props: DataTableViewOptionsProps) {
             </>
           )}
           <DropdownMenu.Item
-            icon={<ArrowCounterClockwiseIcon size={16} />}
+            icon={<ArrowCounterClockwiseIcon size={iconPx} />}
             closeOnSelect={false}
             onSelect={onResetToDefault}
           >
@@ -166,8 +168,8 @@ export function DataTableViewOptions(props: DataTableViewOptionsProps) {
     >
       <XStack alignItems="center" justifyContent="space-between">
         <XStack alignItems="center" gap="$2">
-          <GearIcon size={16} />
-          <Text fontSize="$4" fontWeight="600">
+          <GearIcon size={iconPx} />
+          <Text {...knobProps.label} fontWeight="400">
             {t("View Options")}
           </Text>
         </XStack>
@@ -176,7 +178,7 @@ export function DataTableViewOptions(props: DataTableViewOptionsProps) {
           size={knobProps.sizeToken}
           variant="outlined"
           onPress={onResetToDefault}
-          icon={<ArrowCounterClockwiseIcon size={16} />}
+          icon={<ArrowCounterClockwiseIcon size={iconPx} />}
         >
           {t("Reset")}
         </Button>
@@ -254,6 +256,7 @@ function ColumnVisibilitySection({
   onColumnVisibilityChange,
 }: ColumnVisibilitySectionProps) {
   const { knobProps } = useResolvedKnobs();
+  const iconPx = iconSizeForToken(String(knobProps.sizeToken));
   // Phosphor icons are plain SVGs — they need a resolved CSS color, not a
   // Tamagui token string. Neutral steps only: the switch owns the checked
   // state, so the glyph never carries a second (hue-coded) state signal
@@ -263,21 +266,21 @@ function ColumnVisibilitySection({
   const mutedIconColor = theme.color10?.get();
   return (
     <YStack {...knobProps.gap}>
-      <Text fontSize="$4" fontWeight="600">
+      <Text {...knobProps.label} fontWeight="400">
         {t("Column Visibility")}
       </Text>
 
       {/* Visible Columns */}
       {visibleColumns.length > 0 && (
         <YStack gap="$2">
-          <Text fontSize="$3" fontWeight="500" color="$color10">
+          <Text {...knobProps.label} fontWeight="400" color="$color10">
             {t("Visible Columns")}
           </Text>
           <YStack gap="$1">
             {visibleColumns.map((column) => (
               <XStack key={column.id} alignItems="center" justifyContent="space-between">
                 <XStack alignItems="center" gap="$2">
-                  <EyeIcon size={16} color={iconColor} />
+                  <EyeIcon size={iconPx} color={iconColor} />
                   <Text fontSize="$3">{column.label}</Text>
                 </XStack>
                 <Switch
@@ -298,14 +301,14 @@ function ColumnVisibilitySection({
       {/* Hidden Columns */}
       {hiddenColumns.length > 0 && (
         <YStack gap="$2">
-          <Text fontSize="$3" fontWeight="500" color="$color10">
+          <Text {...knobProps.label} fontWeight="400" color="$color10">
             {t("Hidden Columns")}
           </Text>
           <YStack gap="$1">
             {hiddenColumns.map((column) => (
               <XStack key={column.id} alignItems="center" justifyContent="space-between">
                 <XStack alignItems="center" gap="$2">
-                  <EyeSlashIcon size={16} color={mutedIconColor} />
+                  <EyeSlashIcon size={iconPx} color={mutedIconColor} />
                   <Text fontSize="$3" color="$color10">
                     {column.label}
                   </Text>
@@ -344,16 +347,17 @@ function ColumnResizingSection({
   columnWidths,
   onColumnWidthChange,
 }: ColumnResizingSectionProps) {
+  const { knobProps } = useResolvedKnobs();
   return (
     <YStack gap="$3">
-      <Text fontSize="$4" fontWeight="600">
+      <Text {...knobProps.label} fontWeight="400">
         {t("Column Widths")}
       </Text>
 
       <YStack gap="$3">
         {columns.map((column) => (
           <YStack key={column.id} gap="$2">
-            <Text fontSize="$3" fontWeight="500">
+            <Text {...knobProps.label} fontWeight="400">
               {column.label}
             </Text>
             <XStack alignItems="center" gap="$3">
@@ -394,6 +398,7 @@ function ViewManagementSection({
   onLoadView,
 }: ViewManagementSectionProps) {
   const { knobProps } = useResolvedKnobs();
+  const iconPx = iconSizeForToken(String(knobProps.sizeToken));
   const [showSaveDialog, setShowSaveDialog] = useState(false);
   const [viewName, setViewName] = useState("");
 
@@ -407,34 +412,29 @@ function ViewManagementSection({
 
   return (
     <YStack gap="$3">
-      <Text fontSize="$4" fontWeight="600">
+      <Text {...knobProps.label} fontWeight="400">
         {t("Saved Views")}
       </Text>
 
       {/* Save Current View */}
       <Popover open={showSaveDialog} onOpenChange={setShowSaveDialog}>
         <Popover.Trigger asChild>
-          <Button size={knobProps.sizeToken} variant="outlined" icon={<FloppyDiskIcon size={16} />}>
+          <Button
+            size={knobProps.sizeToken}
+            variant="outlined"
+            icon={<FloppyDiskIcon size={iconPx} />}
+          >
             {t("Save Current View")}
           </Button>
         </Popover.Trigger>
         <Popover.Content
-          {...knobProps.borderRadius}
-          borderWidth={1}
-          borderColor="$borderColor"
+          {...knobProps.elevatedSurface}
           enterStyle={{ x: 0, y: -10, opacity: 0 }}
           exitStyle={{ x: 0, y: -10, opacity: 0 }}
-          transition={[
-            "quick",
-            {
-              opacity: {
-                overshootClamping: true,
-              },
-            },
-          ]}
+          transition={knobProps.transition}
         >
           <YStack {...knobProps.panelPadding} gap="$3" minWidth={250}>
-            <Text fontSize="$4" fontWeight="500">
+            <Text {...knobProps.label} fontWeight="400">
               {t("Save View")}
             </Text>
             <Input
@@ -488,7 +488,7 @@ function ViewManagementSection({
               >
                 <Text fontSize="$3">{view.name}</Text>
                 <Button
-                  size="$2"
+                  size={knobProps.sizeToken}
                   variant="outlined"
                   onPress={() => onLoadView(view.id)}
                   disabled={activeViewId === view.id}

package/src/components/KnobDialog.tsx

@@ -44,9 +44,7 @@ export function KnobDialogContent({ children, minWidth }: KnobDialogContentProps
       />
 
       <Dialog.Content
-        {...knobProps.borderRadius}
-        borderWidth={1}
-        borderColor="$borderColor"
+        {...knobProps.elevatedSurface}
         key="content"
         animateOnly={["transform", "opacity"]}
         transition={[

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

@@ -136,3 +136,16 @@ export const rowPress = () => {
     />
   );
 };
+
+/** Disabled row press: rows stay visible; activation is inert (LC-40). */
+export const disabledRows = () => (
+  <SimpleTable
+    layout="table"
+    disabled
+    data={peopleData}
+    columns={peopleColumns}
+    aria-label="People disabled"
+    onRowPress={() => {}}
+    rowLabel={(row) => row.name}
+  />
+);