@multiplatform.one/table 6.1.0 → 6.4.0

package/src/components/DataTableSearch/index.tsx

@@ -1,10 +1,13 @@
-import { CaretDownIcon, MagnifyingGlassIcon, GearIcon, XIcon } from "@phosphor-icons/react";
+import { CaretDownIcon, GearIcon } from "@phosphor-icons/react";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Button, Checkbox, Input } from "@multiplatform.one/forms";
+import { PopoverContent } from "@multiplatform.one/components";
+import { Button, Checkbox, SearchInput } from "@multiplatform.one/forms";
 import { Popover, ScrollView, Separator, Text, View, XStack, YStack } from "tamagui";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
+import { t } from "../../shared/t";
+import { bidiIsolate } from "../../utils/withInterp";
 
 export interface SearchOptions {
   searchTerm: string;
@@ -42,7 +45,7 @@ export function DataTableSearch<T = any>(props: DataTableSearchProps<T>) {
 
   const {
     onSearchResults,
-    placeholder = "Search across all columns...",
+    placeholder = t("Search across all columns..."),
     debounceMs = 300,
     showAdvancedOptions = true,
     defaultSearchColumns,
@@ -63,15 +66,6 @@ export function DataTableSearch<T = any>(props: DataTableSearchProps<T>) {
     highlightResults: true,
   });
 
-  // Debounce search term
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDebouncedSearchTerm(searchTerm);
-    }, debounceMs);
-
-    return () => clearTimeout(timer);
-  }, [searchTerm, debounceMs]);
-
   // Perform search when debounced term changes
   useEffect(() => {
     if (debouncedSearchTerm.trim()) {
@@ -92,15 +86,6 @@ export function DataTableSearch<T = any>(props: DataTableSearchProps<T>) {
     }
   }, [debouncedSearchTerm, data, searchOptions, onSearchResults]);
 
-  const handleSearchChange = (value: string) => {
-    setSearchTerm(value);
-  };
-
-  const handleClearSearch = () => {
-    setSearchTerm("");
-    setDebouncedSearchTerm("");
-  };
-
   const handleOptionsChange = (newOptions: Partial<SearchOptions>) => {
     setSearchOptions((prev) => ({ ...prev, ...newOptions }));
   };
@@ -112,27 +97,15 @@ export function DataTableSearch<T = any>(props: DataTableSearchProps<T>) {
   return (
     <XStack gap="$2" alignItems="center" flex={1} maxWidth={searchMaxWidth}>
       <View flex={1}>
-        <Input
+        {/* Catalog SearchInput (census item 6): owns the debounce and the
+            icon + field + clear anatomy this file used to re-compose. */}
+        <SearchInput
           value={searchTerm}
-          onChangeText={handleSearchChange}
+          onChange={setSearchTerm}
+          onSearch={setDebouncedSearchTerm}
+          debounceMs={debounceMs}
           placeholder={placeholder}
           disabled={disabled}
-          leftIcon={<MagnifyingGlassIcon size={16} />}
-          rightIcon={
-            searchTerm ? (
-              <View
-                padding="$1"
-                borderRadius="$2"
-                cursor="pointer"
-                hoverStyle={{ backgroundColor: "$color4" }}
-                pressStyle={{ backgroundColor: "$color5" }}
-                onPress={handleClearSearch}
-                aria-label="Clear search"
-              >
-                <XIcon size={14} />
-              </View>
-            ) : undefined
-          }
         />
       </View>
 
@@ -147,19 +120,18 @@ export function DataTableSearch<T = any>(props: DataTableSearchProps<T>) {
         />
       )}
 
-      {debouncedSearchTerm && (
+      {debouncedSearchTerm ? (
         <View paddingHorizontal="$2">
           <Text fontSize="$2" color="$color10">
-            {
-              performSearch(data, {
+            {t("{{count}} results", {
+              count: performSearch(data, {
                 ...searchOptions,
                 searchTerm: debouncedSearchTerm,
-              }).length
-            }{" "}
-            results
+              }).length,
+            })}
           </Text>
         </View>
-      )}
+      ) : null}
     </XStack>
   );
 }
@@ -222,89 +194,105 @@ function SearchOptionsPopover({
     onOptionsChange({ columns: [] });
   };
 
+  // Same size-derived cap as DataTableViewOptions; `resize` shrinks the
+  // panel further whenever the viewport offers less room than the cap.
+  const sz = knobProps.sizeToken;
+  const panelMaxHeight = sz === "$3" ? 320 : sz === "$5" ? 480 : 400;
+
   return (
-    <Popover>
+    // LC-06: anchored popover with collision handling — flip, shift, and
+    // clamp inside the viewport (`resize` is a no-op on native).
+    <Popover stayInFrame allowFlip resize>
       <Popover.Trigger asChild>
         <Button
           size={knobProps.sizeToken}
           variant="outlined"
           icon={<GearIcon size={16} />}
           disabled={disabled}
-          aria-label="Search options"
+          aria-label={t("Search options")}
         >
           <CaretDownIcon size={16} />
         </Button>
       </Popover.Trigger>
 
-      <Popover.Content
-        {...knobProps.borderRadius}
-        borderWidth={1}
-        borderColor="$borderColor"
-        enterStyle={{ x: 0, y: -10, opacity: 0 }}
-        exitStyle={{ x: 0, y: -10, opacity: 0 }}
-        minWidth={280}
-      >
-        <YStack {...knobProps.panelPadding} {...knobProps.gapLg}>
-          <Text fontSize="$5" fontWeight="600">
-            Search Options
-          </Text>
-
-          {/* Search Settings */}
-          <YStack {...knobProps.gap}>
-            <Text fontSize="$4" fontWeight="500">
-              Search Settings
+      {/* SF-OVERLAY/E-OVERLAY: canonical elevated overlay (complete
+          elevatedSurface knob fragment + transition). The frame owns only
+          its border (inset lives on the panel YStack below); overflow
+          hidden clips the scroll region to the radius knob. */}
+      <PopoverContent padding={0} overflow="hidden" alignItems="stretch" minWidth={280}>
+        {/* LC-10: when clamped below content height the body scrolls
+            internally — rows are never sliced at the frame edge. */}
+        <ScrollView flexShrink={1} maxHeight={panelMaxHeight}>
+          <YStack {...knobProps.panelPadding} {...knobProps.gapLg}>
+            <Text fontSize="$5" fontWeight="600">
+              {t("Search Options")}
             </Text>
 
-            <Checkbox
-              label="Case sensitive"
-              checked={searchOptions.caseSensitive}
-              onCheckedChange={(checked) => onOptionsChange({ caseSensitive: checked as boolean })}
-            />
-
-            <Checkbox
-              label="Whole word only"
-              checked={searchOptions.wholeWord}
-              onCheckedChange={(checked) => onOptionsChange({ wholeWord: checked as boolean })}
-            />
-
-            <Checkbox
-              label="Use regex"
-              checked={searchOptions.regex}
-              onCheckedChange={(checked) => onOptionsChange({ regex: checked as boolean })}
-            />
-
-            <Checkbox
-              label="Highlight results"
-              checked={searchOptions.highlightResults}
-              onCheckedChange={(checked) =>
-                onOptionsChange({ highlightResults: checked as boolean })
-              }
-            />
-          </YStack>
-
-          <Separator />
-
-          {/* Column Selection */}
-          <YStack {...knobProps.gap}>
-            <XStack justifyContent="space-between" alignItems="center">
+            {/* Search Settings */}
+            <YStack {...knobProps.gap}>
               <Text fontSize="$4" fontWeight="500">
-                Search Columns
-              </Text>
-              <Text fontSize="$2" color="$color10">
-                {selectedColumnCount} of {totalColumnCount}
+                {t("Search Settings")}
               </Text>
-            </XStack>
-
-            <XStack gap="$2">
-              <Button size="$2" variant="outlined" onPress={handleSelectAllColumns}>
-                All
-              </Button>
-              <Button size="$2" variant="outlined" onPress={handleSelectNoColumns}>
-                None
-              </Button>
-            </XStack>
-
-            <ScrollView maxHeight={200}>
+
+              <Checkbox
+                label={t("Case sensitive")}
+                checked={searchOptions.caseSensitive}
+                onCheckedChange={(checked) =>
+                  onOptionsChange({ caseSensitive: checked as boolean })
+                }
+              />
+
+              <Checkbox
+                label={t("Whole word only")}
+                checked={searchOptions.wholeWord}
+                onCheckedChange={(checked) => onOptionsChange({ wholeWord: checked as boolean })}
+              />
+
+              <Checkbox
+                label={t("Use regex")}
+                checked={searchOptions.regex}
+                onCheckedChange={(checked) => onOptionsChange({ regex: checked as boolean })}
+              />
+
+              <Checkbox
+                label={t("Highlight results")}
+                checked={searchOptions.highlightResults}
+                onCheckedChange={(checked) =>
+                  onOptionsChange({ highlightResults: checked as boolean })
+                }
+              />
+            </YStack>
+
+            <Separator />
+
+            {/* Column Selection */}
+            <YStack {...knobProps.gap}>
+              <XStack justifyContent="space-between" alignItems="center">
+                <Text fontSize="$4" fontWeight="500">
+                  {t("Search Columns")}
+                </Text>
+                <Text fontSize="$2" color="$color10">
+                  {/* Bidi-isolated so RTL contexts can't reorder the count run */}
+                  {bidiIsolate(
+                    t("{{selected}} of {{total}}", {
+                      selected: selectedColumnCount,
+                      total: totalColumnCount,
+                    }),
+                  )}
+                </Text>
+              </XStack>
+
+              <XStack gap="$2">
+                <Button size="$2" variant="outlined" onPress={handleSelectAllColumns}>
+                  {t("All")}
+                </Button>
+                <Button size="$2" variant="outlined" onPress={handleSelectNoColumns}>
+                  {t("None")}
+                </Button>
+              </XStack>
+
+              {/* One scroll region for the whole panel body (above); a nested
+                column scroller would trap wheel/drag inside 200px. */}
               <YStack gap="$1">
                 {columns.map((col) => {
                   const key = col.accessorKey || col.id || "";
@@ -318,17 +306,17 @@ function SearchOptionsPopover({
                   );
                 })}
               </YStack>
-            </ScrollView>
+            </YStack>
           </YStack>
-        </YStack>
-      </Popover.Content>
+        </ScrollView>
+      </PopoverContent>
     </Popover>
   );
 }
 
 // Search Utilities
 
-export function performSearch<T>(data: T[], options: SearchOptions): T[] {
+function performSearch<T>(data: T[], options: SearchOptions): T[] {
   const { searchTerm, columns, caseSensitive, wholeWord, regex } = options;
 
   if (!searchTerm.trim()) {
@@ -375,7 +363,7 @@ export interface HighlightOptions {
   highlightStyle?: React.CSSProperties;
 }
 
-export function highlightText(text: string, options: HighlightOptions): React.ReactNode {
+function highlightText(text: string, options: HighlightOptions): React.ReactNode {
   const {
     searchTerm,
     caseSensitive = false,

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

@@ -50,7 +50,7 @@ describe("DataTableToolbar", () => {
         <DataTableToolbar {...defaultProps} enableGlobalSearch={true} />,
       );
 
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       expect(searchInput).toBeDefined();
     });
 
@@ -68,7 +68,7 @@ describe("DataTableToolbar", () => {
         <DataTableToolbar {...defaultProps} globalFilter="test search" />,
       );
 
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       expect(searchInput).toHaveValue("test search");
     });
   });
@@ -80,7 +80,7 @@ describe("DataTableToolbar", () => {
         <DataTableToolbar {...defaultProps} onGlobalFilterChange={onGlobalFilterChange} />,
       );
 
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       fireEvent.change(searchInput, { target: { value: "new search" } });
 
       expect(onGlobalFilterChange).toHaveBeenCalledWith("new search");
@@ -96,7 +96,7 @@ describe("DataTableToolbar", () => {
         />,
       );
 
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       fireEvent.change(searchInput, { target: { value: "" } });
 
       expect(onGlobalFilterChange).toHaveBeenCalledWith("");
@@ -147,6 +147,46 @@ describe("DataTableToolbar", () => {
       expect(container).toBeDefined();
       expect(onClearFilters).toBeDefined();
     });
+
+    it("search clear X fires onClearFilters only when the toolbar owns filtering", () => {
+      // enableFiltering=false is the chrome-suppression contract: an outer
+      // surface owns the filter state, so the search X must clear only the
+      // search text (onChange("")) — never the injected filters.
+      const onClearFilters = vi.fn();
+      const onGlobalFilterChange = vi.fn();
+
+      const owned = renderWithProviders(
+        <DataTableToolbar
+          {...defaultProps}
+          globalFilter="abc"
+          enableFiltering={true}
+          onClearFilters={onClearFilters}
+          onGlobalFilterChange={onGlobalFilterChange}
+        />,
+      );
+      const ownedClear = owned.container.querySelector("[aria-label='Clear search']");
+      if (!ownedClear) throw new Error("clear button not rendered");
+      fireEvent.click(ownedClear);
+      expect(onClearFilters).toHaveBeenCalledTimes(1);
+      owned.unmount();
+
+      onClearFilters.mockClear();
+      onGlobalFilterChange.mockClear();
+      const suppressed = renderWithProviders(
+        <DataTableToolbar
+          {...defaultProps}
+          globalFilter="abc"
+          enableFiltering={false}
+          onClearFilters={onClearFilters}
+          onGlobalFilterChange={onGlobalFilterChange}
+        />,
+      );
+      const suppressedClear = suppressed.container.querySelector("[aria-label='Clear search']");
+      if (!suppressedClear) throw new Error("clear button not rendered");
+      fireEvent.click(suppressedClear);
+      expect(onGlobalFilterChange).toHaveBeenCalledWith("");
+      expect(onClearFilters).not.toHaveBeenCalled();
+    });
   });
 
   describe("views functionality", () => {
@@ -297,7 +337,7 @@ describe("DataTableToolbar", () => {
     it("should have proper ARIA labels for search input", () => {
       const { getByRole } = renderWithProviders(<DataTableToolbar {...defaultProps} />);
 
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       expect(searchInput).toBeDefined();
     });
 
@@ -314,7 +354,7 @@ describe("DataTableToolbar", () => {
     it("should support keyboard navigation", () => {
       const { getByRole } = renderWithProviders(<DataTableToolbar {...defaultProps} />);
 
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
 
       // Test keyboard events
       fireEvent.keyDown(searchInput, { key: "Enter" });
@@ -349,7 +389,7 @@ describe("DataTableToolbar", () => {
         <DataTableToolbar {...defaultProps} onGlobalFilterChange={onGlobalFilterChange} />,
       );
 
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       fireEvent.change(searchInput, { target: { value: longSearchTerm } });
 
       expect(onGlobalFilterChange).toHaveBeenCalledWith(longSearchTerm);
@@ -363,7 +403,7 @@ describe("DataTableToolbar", () => {
         <DataTableToolbar {...defaultProps} onGlobalFilterChange={onGlobalFilterChange} />,
       );
 
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       fireEvent.change(searchInput, { target: { value: specialChars } });
 
       expect(onGlobalFilterChange).toHaveBeenCalledWith(specialChars);
@@ -376,7 +416,7 @@ describe("DataTableToolbar", () => {
         <DataTableToolbar {...defaultProps} globalFilter="initial" />,
       );
 
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       expect(searchInput).toHaveValue("initial");
 
       // rerender with updated prop should not crash
@@ -416,7 +456,7 @@ describe("DataTableToolbar", () => {
         <DataTableToolbar {...defaultProps} onGlobalFilterChange={onGlobalFilterChange} />,
       );
 
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
 
       // Simulate typing
       fireEvent.change(searchInput, { target: { value: "test" } });
@@ -435,7 +475,7 @@ describe("DataTableToolbar", () => {
         <DataTableToolbar {...defaultProps} onGlobalFilterChange={undefined as any} />,
       );
 
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       expect(() => {
         fireEvent.change(searchInput, { target: { value: "test" } });
       }).not.toThrow();

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

@@ -1,23 +1,220 @@
+import { action } from "@multiplatform.one/storybook";
 import type { Meta } from "@storybook/react-native-web-vite";
-import { YStack, Text } from "tamagui";
+import { useState } from "react";
+import { Button } from "@multiplatform.one/forms";
+import { Text, XStack, YStack } from "tamagui";
+import type { DataTableColumn, TableView } from "../../types";
+import { DataTable } from "../DataTable";
+import { DataTableToolbar } from "./index";
 
-const meta: Meta = {
+const meta: Meta<typeof DataTableToolbar> = {
   title: "Table/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.",
+      },
+    },
   },
 };
 
 export default meta;
 
+interface Employee {
+  id: number;
+  name: string;
+  role: string;
+  department: string;
+  status: "active" | "inactive";
+}
+
+const employees: Employee[] = [
+  { id: 1, name: "Alice Johnson", role: "Developer", department: "Engineering", status: "active" },
+  { id: 2, name: "Bob Smith", role: "Designer", department: "Design", status: "active" },
+  { id: 3, name: "Carol Davis", role: "Manager", department: "Engineering", status: "inactive" },
+  { id: 4, name: "David Lee", role: "Analyst", department: "Finance", status: "active" },
+  { id: 5, name: "Emma Wilson", role: "Developer", department: "Engineering", status: "active" },
+  { id: 6, name: "Frank Moore", role: "Recruiter", department: "HR", status: "inactive" },
+  { id: 7, name: "Grace Chen", role: "Marketer", department: "Marketing", status: "active" },
+  { id: 8, name: "Henry Patel", role: "Developer", department: "Engineering", status: "active" },
+];
+
+const employeeColumns: DataTableColumn<Employee>[] = [
+  { accessorKey: "name", header: "Name" },
+  { accessorKey: "role", header: "Role" },
+  { accessorKey: "department", header: "Department" },
+  { accessorKey: "status", header: "Status" },
+];
+
+const sampleViews: TableView[] = [
+  {
+    id: "view-all",
+    name: "All Employees",
+    columns: {},
+    filters: [],
+    sorting: [],
+    pagination: { pageIndex: 0, pageSize: 10 },
+  },
+  {
+    id: "view-engineering",
+    name: "Engineering Only",
+    columns: {},
+    filters: [],
+    sorting: [],
+    pagination: { pageIndex: 0, pageSize: 10 },
+  },
+];
+
+/**
+ * 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">
+      <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
+            {...props}
+            enableViews
+            customActions={
+              <Button size="$2" variant="outlined" onPress={() => action("export-csv")()}>
+                Export CSV
+              </Button>
+            }
+          />
+        )}
+        aria-label="Employee table with toolbar"
+      />
+    </YStack>
+  );
+};
+
 export const Default = {
   name: "Main",
-  render: () => (
-    <YStack padding="$4">
-      <Text fontSize="$2" color="$color10" marginBottom="$2">
-        The DataTableToolbar integrates with DataTable to provide search, filters, and view options.
-        See DataTable stories for full integration examples.
+  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}>
+      <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>
-  ),
+  );
+};
+
+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}>
+      <DataTableToolbar
+        globalFilter={search}
+        onGlobalFilterChange={setSearch}
+        onClearFilters={() => setSearch("")}
+        enableViews
+        views={views}
+        activeViewId={activeViewId}
+        onSaveView={(name) => {
+          const id = `view-${Date.now()}`;
+          setViews((prev) => [
+            ...prev,
+            {
+              id,
+              name,
+              columns: {},
+              filters: [],
+              sorting: [],
+              pagination: { pageIndex: 0, pageSize: 10 },
+            },
+          ]);
+          setActiveViewId(id);
+          action("save-view")(name);
+        }}
+        onLoadView={(viewId) => {
+          setActiveViewId(viewId);
+          action("load-view")(viewId);
+        }}
+      />
+      <Text fontSize="$2" color="$color10">
+        Saved views: {views.map((view) => view.name).join(", ")}
+      </Text>
+    </YStack>
+  );
+};
+
+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}>
+      <DataTableToolbar
+        globalFilter={search}
+        onGlobalFilterChange={setSearch}
+        onClearFilters={() => setSearch("")}
+        customActions={
+          <XStack gap="$2">
+            <Button size="$2" variant="outlined" onPress={() => action("refresh")()}>
+              Refresh
+            </Button>
+            <Button size="$2" onPress={() => action("export")()}>
+              Export
+            </Button>
+          </XStack>
+        }
+      />
+    </YStack>
+  );
+};
+
+export const WithCustomActions = {
+  render: () => <WithCustomActionsStory />,
 };