@multiplatform.one/table 6.6.0 → 7.0.0

package/src/components/DataTableToolbar/DataTableToolbar.spec.tsx

@@ -54,6 +54,15 @@ describe("DataTableToolbar", () => {
       expect(searchInput).toBeDefined();
     });
 
+    it("shows a toolbar spinner while isFetching without hiding search", () => {
+      const { container, getByRole } = renderWithProviders(
+        <DataTableToolbar {...defaultProps} isFetching />,
+      );
+
+      expect(getByRole("searchbox")).toBeDefined();
+      expect(container.querySelector("[data-table-fetching='true']")).toBeTruthy();
+    });
+
     it("should not render search input when enableGlobalSearch is false", () => {
       const { container } = renderWithProviders(
         <DataTableToolbar {...defaultProps} enableGlobalSearch={false} />,
@@ -191,45 +200,60 @@ describe("DataTableToolbar", () => {
 
   describe("views functionality", () => {
     it("should not render view selector when enableViews is false", () => {
-      const { container } = renderWithProviders(
+      const { queryByRole } = renderWithProviders(
         <DataTableToolbar {...defaultProps} enableViews={false} />,
       );
 
-      expect(container).toBeDefined();
+      expect(queryByRole("button", { name: "Saved views" })).toBeNull();
+      expect(queryByRole("button", { name: "Save view" })).toBeNull();
     });
 
     it("should render view selector when enableViews is true", () => {
-      const { container } = renderWithProviders(
+      const { getByRole } = renderWithProviders(
         <DataTableToolbar {...defaultProps} enableViews={true} views={sampleViews} />,
       );
 
-      expect(container).toBeDefined();
+      expect(getByRole("button", { name: "Saved views" })).toBeDefined();
     });
 
-    it("should display available views", () => {
-      const { container } = renderWithProviders(
-        <DataTableToolbar {...defaultProps} enableViews={true} views={sampleViews} />,
+    it("should display the active view name on the picker", () => {
+      const { getByRole } = renderWithProviders(
+        <DataTableToolbar
+          {...defaultProps}
+          enableViews={true}
+          views={sampleViews}
+          activeViewId="view1"
+        />,
       );
 
-      expect(container).toBeDefined();
+      expect(getByRole("button", { name: "Saved views" }).textContent).toContain("Default View");
     });
 
-    it("should call onLoadView when a view is selected", () => {
+    it("should call onLoadView when a view is selected", async () => {
       const onLoadView = vi.fn();
-      const { container } = renderWithProviders(
+      const { getByRole, getAllByRole } = renderWithProviders(
         <DataTableToolbar
           {...defaultProps}
           enableViews={true}
           views={sampleViews}
+          activeViewId="view1"
           onLoadView={onLoadView}
         />,
       );
 
-      expect(container).toBeDefined();
+      fireEvent.click(getByRole("button", { name: "Saved views" }));
+      await waitFor(
+        () => {
+          expect(getAllByRole("menuitemcheckbox").length).toBeGreaterThan(0);
+        },
+        { timeout: 3000 },
+      );
+      fireEvent.click(getAllByRole("menuitemcheckbox")[1]);
+      expect(onLoadView).toHaveBeenCalledWith("view2");
     });
 
     it("should highlight active view", () => {
-      const { container } = renderWithProviders(
+      const { getByRole } = renderWithProviders(
         <DataTableToolbar
           {...defaultProps}
           enableViews={true}
@@ -238,24 +262,30 @@ describe("DataTableToolbar", () => {
         />,
       );
 
-      expect(container).toBeDefined();
+      expect(getByRole("button", { name: "Saved views" }).textContent).toContain("Default View");
     });
 
     it("should show save view dialog", () => {
-      const { container } = renderWithProviders(
+      const { getByRole } = renderWithProviders(
         <DataTableToolbar {...defaultProps} enableViews={true} views={sampleViews} />,
       );
 
-      expect(container).toBeDefined();
+      expect(getByRole("button", { name: "Save view" })).toBeDefined();
     });
 
-    it("should call onSaveView when saving a new view", () => {
+    it("should call onSaveView when saving a new view", async () => {
       const onSaveView = vi.fn();
-      const { container } = renderWithProviders(
+      const { getByRole } = renderWithProviders(
         <DataTableToolbar {...defaultProps} enableViews={true} onSaveView={onSaveView} />,
       );
 
-      expect(container).toBeDefined();
+      fireEvent.click(getByRole("button", { name: "Save view" }));
+      const nameField = await waitFor(() => getByRole("textbox", { name: "View name" }), {
+        timeout: 3000,
+      });
+      fireEvent.change(nameField, { target: { value: "My view" } });
+      fireEvent.click(getByRole("button", { name: "Save" }));
+      expect(onSaveView).toHaveBeenCalledWith("My view");
     });
   });
 

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

@@ -2,7 +2,7 @@ import { action } from "@multiplatform.one/storybook";
 import type { Meta } from "@storybook/react-native-web-vite";
 import { useState } from "react";
 import { Button } from "@multiplatform.one/forms";
-import { Text, XStack, YStack } from "tamagui";
+import { XStack, YStack } from "tamagui";
 import type { DataTableColumn, TableView } from "../../types";
 import { DataTable } from "../DataTable";
 import { DataTableToolbar } from "./index";
@@ -12,12 +12,6 @@ const meta: Meta<typeof DataTableToolbar> = {
   component: DataTableToolbar,
   parameters: {
     status: { type: "stable" },
-    docs: {
-      description: {
-        component:
-          "The DataTableToolbar integrates with DataTable to provide search, filters, and view options. It consumes DataTableStateContext when mounted inside a DataTable (compound pattern) or can be driven standalone through explicit props.",
-      },
-    },
   },
 };
 
@@ -68,21 +62,14 @@ const sampleViews: TableView[] = [
   },
 ];
 
-/**
- * Full toolbar mounted over a live DataTable: typing in the search box
- * filters the rows below, the save-view popover persists views into the
- * table state, and the custom actions slot carries an Export button.
- */
 const MainStory = () => {
   return (
-    <YStack padding="$4" gap="$3">
+    <YStack padding="$4">
       <DataTable
         data={employees}
         columns={employeeColumns}
         enableGlobalSearch
         enableViews
-        // Rest mid-page so the footer nav renders live — single-page rest
-        // bare-disables prev/next and trips the `[theme]` guardrail (UX-P19).
         initialState={{ pagination: { pageIndex: 1, pageSize: 3 } }}
         renderToolbar={(props) => (
           <DataTableToolbar
@@ -104,32 +91,17 @@ const MainStory = () => {
 export const Default = {
   name: "Main",
   render: () => <MainStory />,
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Toolbar wired into a DataTable through renderToolbar: global search filters rows live, views can be saved from the popover, and customActions adds an Export button.",
-      },
-    },
-  },
 };
 
-/**
- * Default anatomy when used standalone: just the global search section,
- * controlled through explicit props (no DataTable context required).
- */
 const SearchOnlyStory = () => {
   const [search, setSearch] = useState("");
   return (
-    <YStack padding="$4" gap="$3" maxWidth={560}>
+    <YStack padding="$4" maxWidth={560}>
       <DataTableToolbar
         globalFilter={search}
         onGlobalFilterChange={setSearch}
         onClearFilters={() => setSearch("")}
       />
-      <Text fontSize="$2" color="$color10">
-        {search ? `Searching for "${search}"` : "Type to search — value is controlled by the story"}
-      </Text>
     </YStack>
   );
 };
@@ -138,17 +110,12 @@ export const SearchOnly = {
   render: () => <SearchOnlyStory />,
 };
 
-/**
- * Views section enabled: floppy-disk button opens the save-view popover,
- * saved views append to the list, and the active view indicator shows the
- * currently loaded view.
- */
 const WithViewsStory = () => {
   const [search, setSearch] = useState("");
   const [views, setViews] = useState<TableView[]>(sampleViews);
   const [activeViewId, setActiveViewId] = useState("view-engineering");
   return (
-    <YStack padding="$4" gap="$3" maxWidth={640}>
+    <YStack padding="$4" maxWidth={640}>
       <DataTableToolbar
         globalFilter={search}
         onGlobalFilterChange={setSearch}
@@ -177,9 +144,6 @@ const WithViewsStory = () => {
           action("load-view")(viewId);
         }}
       />
-      <Text fontSize="$2" color="$color10">
-        Saved views: {views.map((view) => view.name).join(", ")}
-      </Text>
     </YStack>
   );
 };
@@ -188,14 +152,10 @@ export const WithViews = {
   render: () => <WithViewsStory />,
 };
 
-/**
- * The customActions slot renders inside the roving-focus action section on
- * the right, separated from search by the toolbar divider.
- */
 const WithCustomActionsStory = () => {
   const [search, setSearch] = useState("");
   return (
-    <YStack padding="$4" gap="$3" maxWidth={640}>
+    <YStack padding="$4" maxWidth={640}>
       <DataTableToolbar
         globalFilter={search}
         onGlobalFilterChange={setSearch}

package/src/components/DataTableToolbar/index.tsx

@@ -1,10 +1,12 @@
-import { EyeIcon, FloppyDiskIcon } from "@phosphor-icons/react";
-import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
+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 { RovingFocusGroup } from "@tamagui/roving-focus";
 import type React from "react";
 import { useState } from "react";
-import { Button, Input, SearchInput } from "@multiplatform.one/forms";
-import { Popover, Text, View, XStack, YStack, styled } from "tamagui";
+import { Popover, XStack, YStack } from "tamagui";
+import { t } from "../../shared/t";
 import type { TableView } from "../../types";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
 import { DataTableFilterButton } from "../DataTableFilterButton";
@@ -34,30 +36,27 @@ export interface DataTableToolbarProps {
   showFilterCount?: boolean;
   showViewSelector?: boolean;
   customActions?: React.ReactNode;
+  /** Subtle refetch indicator — must not unmount the table body. */
+  isFetching?: boolean;
 
   // Sizing
   size?: string;
   compact?: boolean;
 }
 
-// Toolbar separator
-const ToolbarDividerFrame = styled(View, {
-  name: "DataTableToolbarDividerFrame",
-  width: 1,
-  alignSelf: "stretch",
-  backgroundColor: "$color6",
-});
+// 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) {
-  // Try to consume from DataTableStateContext (compound component pattern)
   const ctx = useDataTableState();
 
-  // Resolve values: explicit props override context values
   const globalFilter = props.globalFilter ?? ctx?.state.globalFilter ?? "";
   const onGlobalFilterChange =
     props.onGlobalFilterChange ?? ctx?.actions.setGlobalFilter ?? (() => {});
   const onClearFilters = props.onClearFilters ?? ctx?.actions.clearFilters ?? (() => {});
   const onSaveView = props.onSaveView ?? ctx?.actions.saveView ?? (() => {});
+  const onLoadView = props.onLoadView ?? ctx?.actions.loadView ?? (() => {});
   const views = props.views ?? ctx?.state.views ?? [];
   const activeViewId = props.activeViewId ?? ctx?.state.activeViewId;
 
@@ -70,7 +69,9 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
     customActions,
     size,
     compact: _compact = true,
+    isFetching: isFetchingProp,
   } = props;
+  const isFetching = isFetchingProp ?? ctx?.state.isFetching ?? false;
 
   // Toolbar Filter surface (hidden-column filtering). Needs the compound
   // context — DataTableFilterButton reads fields/actions from it.
@@ -91,139 +92,167 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
   };
 
   const { knobProps } = useResolvedKnobs({ size, compact: true });
+  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 showViewPicker = enableViews && showViewSelector && views.length > 0;
+  const showSave = enableViews && showViewSelector;
+  const showActionCluster = Boolean(
+    customActions || showFilterButton || showViewPicker || showSave,
+  );
+  const hasTrailing = showActionCluster || isFetching;
 
   return (
     <XStack
-      alignItems="stretch"
-      backgroundColor="$color3"
-      borderWidth={1}
-      borderBottomWidth={0}
-      borderColor="$color6"
-      borderTopLeftRadius={knobProps.borderRadius.borderRadius}
-      borderTopRightRadius={knobProps.borderRadius.borderRadius}
-      overflow="hidden"
+      alignItems="center"
+      // LC-39: flush band — no painted panel, so no horizontal inset.
+      paddingVertical={knobProps.panelPadding.padding}
+      paddingHorizontal={0}
+      {...knobProps.gap}
+      {...hairline.bottom}
+      borderColor="$borderColor"
+      flexWrap="nowrap"
+      justifyContent={enableGlobalSearch && hasTrailing ? "space-between" : "flex-start"}
       role="toolbar"
-      aria-label="Table toolbar"
+      aria-label={t("Table toolbar")}
+      aria-busy={isFetching || undefined}
     >
-      {/* Search Section - fills available space. Consumes the catalog
-          SearchInput (census item 6) instead of re-composing the
-          icon + field + clear anatomy locally. */}
       {enableGlobalSearch && (
-        <XStack flex={1} alignItems="center" paddingHorizontal="$2" paddingVertical="$2">
-          <View flex={1}>
-            <SearchInput
-              value={globalFilter}
-              onChange={onGlobalFilterChange}
-              // Clear-X semantics follow filter ownership: when the toolbar
-              // owns a filter surface (enableFiltering) the X clears search
-              // AND filters (explicit clear intent). When the filter chrome
-              // is suppressed (enableFiltering=false — an outer surface owns
-              // filtering and injects tuples via initialState/state), the X
-              // must not mutate those injected filters; SearchInput already
-              // clears the text through onChange("").
-              onClear={enableFiltering ? onClearFilters : undefined}
-              aria-label="Search table data"
-              compact
-              size="$3"
-            />
-          </View>
+        <XStack flex={1} minWidth={160} maxWidth={searchMaxWidth} flexShrink={1}>
+          <SearchInput
+            value={globalFilter}
+            onChange={onGlobalFilterChange}
+            // Clear-X semantics follow filter ownership: when the toolbar
+            // owns a filter surface (enableFiltering) the X clears search
+            // AND filters (explicit clear intent). When the filter chrome
+            // is suppressed (enableFiltering=false — an outer surface owns
+            // filtering and injects tuples via initialState/state), the X
+            // must not mutate those injected filters; SearchInput already
+            // clears the text through onChange("").
+            onClear={enableFiltering ? onClearFilters : undefined}
+            placeholder={t("Search")}
+            aria-label={t("Search table data")}
+            compact
+            size={searchSize}
+          />
         </XStack>
       )}
 
-      {/* Right Section - Actions with roving focus for keyboard navigation */}
-      {(customActions || enableViews || showFilterButton) && (
-        <>
-          <ToolbarDividerFrame />
-          <RovingFocusGroup orientation="horizontal" loop asChild>
-            <XStack
-              alignItems="center"
-              paddingHorizontal="$2"
-              gap="$1"
-              // DG-A11Y-01: the roving group container is a focusable tab
-              // entry point that forwards focus to its current item — paint
-              // the ring synchronously while focus is WITHIN (CellWrapper
-              // focusWithin pattern) and on its own :focus.
-              focusStyle={ensureFocusVisibleRing()}
-              focusVisibleStyle={ensureFocusVisibleRing()}
-              focusWithinStyle={ensureFocusVisibleRing()}
-            >
-              {/* Filter surface — filters any field, incl. hidden columns */}
-              {showFilterButton && <DataTableFilterButton />}
-
-              {/* Custom Actions */}
-              {customActions}
-
-              {/* View Management */}
-              {enableViews && showViewSelector && (
-                <>
-                  {/* Save View Button. The roving item must wrap the Button
-                      (not the Popover): RovingFocusGroup collects item refs as
-                      focus candidates and calls `.focus()` on them — Popover's
-                      ref is its imperative handle, not an element, which threw
-                      `candidate.focus is not a function` on arrow-key nav. */}
+      {hasTrailing && (
+        <XStack
+          alignItems="center"
+          {...knobProps.gap}
+          flexShrink={0}
+          marginInlineStart={enableGlobalSearch ? "auto" : 0}
+        >
+          {showActionCluster && (
+            <RovingFocusGroup orientation="horizontal" loop asChild>
+              <XStack alignItems="center" {...knobProps.gap}>
+                {showFilterButton && <DataTableFilterButton />}
+
+                {customActions}
+
+                {showViewPicker && (
+                  <DropdownMenu closeOnSelect placement="bottom-end">
+                    <DropdownMenu.Trigger asChild>
+                      <RovingFocusGroup.Item focusable asChild>
+                        <Button
+                          chromeless
+                          size={controlSize}
+                          iconAfter={<CaretDownIcon size={iconPx} />}
+                          aria-label={t("Saved views")}
+                          aria-haspopup="menu"
+                        >
+                          {activeView?.name ?? t("Views")}
+                        </Button>
+                      </RovingFocusGroup.Item>
+                    </DropdownMenu.Trigger>
+                    <DropdownMenu.Content>
+                      {views.map((view) => (
+                        <DropdownMenu.CheckboxItem
+                          key={view.id}
+                          checked={view.id === activeViewId}
+                          closeOnSelect
+                          onSelect={() => onLoadView(view.id)}
+                        >
+                          {view.name}
+                        </DropdownMenu.CheckboxItem>
+                      ))}
+                    </DropdownMenu.Content>
+                  </DropdownMenu>
+                )}
+
+                {showSave && (
                   <Popover open={showSaveViewDialog} onOpenChange={setShowSaveViewDialog}>
                     <Popover.Trigger asChild>
                       <RovingFocusGroup.Item focusable asChild>
                         <Button
                           chromeless
-                          size="$2"
-                          icon={<FloppyDiskIcon size={16} />}
-                          aria-label="Save view"
-                          focusStyle={{ outlineColor: "$accentBackground", outlineWidth: 2 }}
+                          size={controlSize}
+                          icon={<FloppyDiskIcon size={iconPx} />}
+                          aria-label={t("Save view")}
                         />
                       </RovingFocusGroup.Item>
                     </Popover.Trigger>
                     <Popover.Content
+                      {...knobProps.elevatedSurface}
                       {...knobProps.borderRadius}
                       borderColor="$color6"
+                      // LC-24: enter/exitStyle need a `transition` driver on the
+                      // same element ({...string} spread set nothing).
                       transition={knobProps.transition}
                       enterStyle={{ x: 0, y: -10, opacity: 0 }}
                       exitStyle={{ x: 0, y: -10, opacity: 0 }}
+                      data-dismiss-class="compose"
                     >
-                      <YStack {...knobProps.gap} {...knobProps.panelPadding} minWidth={250}>
-                        <Text fontWeight="600">Save Current View</Text>
+                      <YStack {...knobProps.gap} {...knobProps.panelPadding} minWidth={240}>
                         <Input
-                          placeholder="Enter view name..."
+                          placeholder={t("View name")}
                           value={newViewName}
                           onChangeText={setNewViewName}
-                          size="$3"
+                          size={searchSize}
                           compact
                           inputProps={{
+                            "aria-label": t("View name"),
                             onKeyDown: (e: React.KeyboardEvent) => {
                               if (e.key === "Enter") handleSaveView();
                             },
                           }}
                         />
-                        <XStack gap="$2" justifyContent="flex-end">
+                        <XStack {...knobProps.gap} justifyContent="flex-end">
                           <Button
                             size="$2"
                             variant="outlined"
                             onPress={() => setShowSaveViewDialog(false)}
                           >
-                            Cancel
+                            {t("Cancel")}
                           </Button>
-                          <Button size="$2" onPress={handleSaveView} disabled={!newViewName.trim()}>
-                            Save
+                          <Button
+                            size="$2"
+                            onPress={handleSaveView}
+                            disabled={!newViewName.trim()}
+                            disabledReason={t("Enter a view name")}
+                          >
+                            {t("Save")}
                           </Button>
                         </XStack>
                       </YStack>
                     </Popover.Content>
                   </Popover>
+                )}
+              </XStack>
+            </RovingFocusGroup>
+          )}
 
-                  {/* Active View Indicator */}
-                  {activeView && (
-                    <XStack alignItems="center" gap="$1" paddingHorizontal="$2">
-                      <EyeIcon size={14} />
-                      <Text fontSize="$2" color="$color10">
-                        {activeView.name}
-                      </Text>
-                    </XStack>
-                  )}
-                </>
-              )}
+          {isFetching && (
+            <XStack alignItems="center" aria-live="polite" data-table-fetching="true">
+              <Spinner size="small" />
             </XStack>
-          </RovingFocusGroup>
-        </>
+          )}
+        </XStack>
       )}
     </XStack>
   );

package/src/components/DataTableViewOptions/index.tsx

@@ -5,7 +5,7 @@ import {
   FloppyDiskIcon,
   GearIcon,
 } from "@phosphor-icons/react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { getGroupPosition, stackRadiusProps, useResolvedKnobs } from "@multiplatform.one/theme";
 import React, { useState } from "react";
 import { Button, Input, Slider, Switch } from "@multiplatform.one/forms";
 import { DropdownMenu } from "@multiplatform.one/components";
@@ -469,28 +469,35 @@ function ViewManagementSection({
 
       {/* Saved Views List */}
       {views.length > 0 && (
-        <YStack gap="$1">
-          {views.map((view) => (
-            <XStack
-              key={view.id}
-              alignItems="center"
-              justifyContent="space-between"
-              padding="$2"
-              backgroundColor={activeViewId === view.id ? "$color2" : "transparent"}
-              borderRadius="$2"
-              hoverStyle={{ backgroundColor: "$color1" }}
-            >
-              <Text fontSize="$3">{view.name}</Text>
-              <Button
-                size="$2"
-                variant="outlined"
-                onPress={() => onLoadView(view.id)}
-                disabled={activeViewId === view.id}
+        <YStack>
+          {views.map((view, index) => {
+            const corners = stackRadiusProps(
+              getGroupPosition(index, views.length),
+              knobProps.borderRadius.borderRadius,
+            );
+            return (
+              <XStack
+                key={view.id}
+                alignItems="center"
+                justifyContent="space-between"
+                padding="$2"
+                overflow="hidden"
+                {...corners}
+                backgroundColor={activeViewId === view.id ? "$color2" : "transparent"}
+                hoverStyle={{ backgroundColor: "$color1", ...corners }}
               >
-                {t("Load")}
-              </Button>
-            </XStack>
-          ))}
+                <Text fontSize="$3">{view.name}</Text>
+                <Button
+                  size="$2"
+                  variant="outlined"
+                  onPress={() => onLoadView(view.id)}
+                  disabled={activeViewId === view.id}
+                >
+                  {t("Load")}
+                </Button>
+              </XStack>
+            );
+          })}
         </YStack>
       )}
     </YStack>