@multiplatform.one/table 6.1.0 → 6.3.0

package/src/components/DataTableToolbar/index.tsx

@@ -1,12 +1,13 @@
-import { EyeIcon, FloppyDiskIcon, MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { EyeIcon, FloppyDiskIcon } from "@phosphor-icons/react";
+import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
 import { RovingFocusGroup } from "@tamagui/roving-focus";
 import type React from "react";
 import { useState } from "react";
-import { Button, Input } from "@multiplatform.one/forms";
-import { Popover, Separator, Text, View, XStack, YStack, styled } from "tamagui";
+import { Button, Input, SearchInput } from "@multiplatform.one/forms";
+import { Popover, Text, View, XStack, YStack, styled } from "tamagui";
 import type { TableView } from "../../types";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
+import { DataTableFilterButton } from "../DataTableFilterButton";
 
 export interface DataTableToolbarProps {
   // Search
@@ -39,22 +40,6 @@ export interface DataTableToolbarProps {
   compact?: boolean;
 }
 
-// Icon wrapper for the search icon
-const SearchIconWrapperFrame = styled(View, {
-  name: "DataTableSearchIconFrame",
-  paddingLeft: "$3",
-  alignItems: "center",
-  justifyContent: "center",
-});
-
-// Clear button wrapper
-const ClearButtonWrapperFrame = styled(View, {
-  name: "DataTableClearButtonFrame",
-  paddingRight: "$2",
-  alignItems: "center",
-  justifyContent: "center",
-});
-
 // Toolbar separator
 const ToolbarDividerFrame = styled(View, {
   name: "DataTableToolbarDividerFrame",
@@ -79,7 +64,7 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
   const {
     enableViews = false,
     enableGlobalSearch = true,
-    enableFiltering: _enableFiltering = true,
+    enableFiltering = true,
     showFilterCount: _showFilterCount = true,
     showViewSelector = true,
     customActions,
@@ -87,6 +72,11 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
     compact: _compact = true,
   } = props;
 
+  // Toolbar Filter surface (hidden-column filtering). Needs the compound
+  // context — DataTableFilterButton reads fields/actions from it.
+  const showFilterButton =
+    enableFiltering && !!ctx && (ctx.computed?.filterFields?.length ?? 0) > 0;
+
   const [showSaveViewDialog, setShowSaveViewDialog] = useState(false);
   const [newViewName, setNewViewName] = useState("");
 
@@ -115,58 +105,65 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
       role="toolbar"
       aria-label="Table toolbar"
     >
-      {/* Search Section - fills available space */}
+      {/* 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">
-          <SearchIconWrapperFrame>
-            <MagnifyingGlassIcon size={16} />
-          </SearchIconWrapperFrame>
+        <XStack flex={1} alignItems="center" paddingHorizontal="$2" paddingVertical="$2">
           <View flex={1}>
-            <Input
+            <SearchInput
               value={globalFilter}
-              onChangeText={onGlobalFilterChange}
-              placeholder="Search..."
+              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"
-              chromeless
               compact
               size="$3"
             />
           </View>
-          {globalFilter && (
-            <ClearButtonWrapperFrame>
-              <Button
-                chromeless
-                circular
-                size="$2"
-                padding="$1"
-                onPress={() => {
-                  onGlobalFilterChange("");
-                  onClearFilters();
-                }}
-                icon={<XIcon size={14} />}
-                aria-label="Clear search"
-              />
-            </ClearButtonWrapperFrame>
-          )}
         </XStack>
       )}
 
       {/* Right Section - Actions with roving focus for keyboard navigation */}
-      {(customActions || enableViews) && (
+      {(customActions || enableViews || showFilterButton) && (
         <>
           <ToolbarDividerFrame />
           <RovingFocusGroup orientation="horizontal" loop asChild>
-            <XStack alignItems="center" paddingHorizontal="$2" gap="$1">
+            <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 */}
-                  <RovingFocusGroup.Item focusable asChild>
-                    <Popover open={showSaveViewDialog} onOpenChange={setShowSaveViewDialog}>
-                      <Popover.Trigger asChild>
+                  {/* 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. */}
+                  <Popover open={showSaveViewDialog} onOpenChange={setShowSaveViewDialog}>
+                    <Popover.Trigger asChild>
+                      <RovingFocusGroup.Item focusable asChild>
                         <Button
                           chromeless
                           size="$2"
@@ -174,47 +171,43 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
                           aria-label="Save view"
                           focusStyle={{ outlineColor: "$accentBackground", outlineWidth: 2 }}
                         />
-                      </Popover.Trigger>
-                      <Popover.Content
-                        {...knobProps.borderRadius}
-                        borderColor="$color6"
-                        enterStyle={{ x: 0, y: -10, opacity: 0 }}
-                        exitStyle={{ x: 0, y: -10, opacity: 0 }}
-                      >
-                        <YStack {...knobProps.gap} {...knobProps.panelPadding} minWidth={250}>
-                          <Text fontWeight="600">Save Current View</Text>
-                          <Input
-                            placeholder="Enter view name..."
-                            value={newViewName}
-                            onChangeText={setNewViewName}
-                            size="$3"
-                            compact
-                            inputProps={{
-                              onKeyDown: (e: React.KeyboardEvent) => {
-                                if (e.key === "Enter") handleSaveView();
-                              },
-                            }}
-                          />
-                          <XStack gap="$2" justifyContent="flex-end">
-                            <Button
-                              size="$2"
-                              variant="outlined"
-                              onPress={() => setShowSaveViewDialog(false)}
-                            >
-                              Cancel
-                            </Button>
-                            <Button
-                              size="$2"
-                              onPress={handleSaveView}
-                              disabled={!newViewName.trim()}
-                            >
-                              Save
-                            </Button>
-                          </XStack>
-                        </YStack>
-                      </Popover.Content>
-                    </Popover>
-                  </RovingFocusGroup.Item>
+                      </RovingFocusGroup.Item>
+                    </Popover.Trigger>
+                    <Popover.Content
+                      {...knobProps.borderRadius}
+                      borderColor="$color6"
+                      enterStyle={{ x: 0, y: -10, opacity: 0 }}
+                      exitStyle={{ x: 0, y: -10, opacity: 0 }}
+                    >
+                      <YStack {...knobProps.gap} {...knobProps.panelPadding} minWidth={250}>
+                        <Text fontWeight="600">Save Current View</Text>
+                        <Input
+                          placeholder="Enter view name..."
+                          value={newViewName}
+                          onChangeText={setNewViewName}
+                          size="$3"
+                          compact
+                          inputProps={{
+                            onKeyDown: (e: React.KeyboardEvent) => {
+                              if (e.key === "Enter") handleSaveView();
+                            },
+                          }}
+                        />
+                        <XStack gap="$2" justifyContent="flex-end">
+                          <Button
+                            size="$2"
+                            variant="outlined"
+                            onPress={() => setShowSaveViewDialog(false)}
+                          >
+                            Cancel
+                          </Button>
+                          <Button size="$2" onPress={handleSaveView} disabled={!newViewName.trim()}>
+                            Save
+                          </Button>
+                        </XStack>
+                      </YStack>
+                    </Popover.Content>
+                  </Popover>
 
                   {/* Active View Indicator */}
                   {activeView && (
@@ -234,33 +227,3 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
     </XStack>
   );
 }
-
-// Additional Toolbar Components
-
-export interface DataTableToolbarActionsProps {
-  children: React.ReactNode;
-}
-
-export function DataTableToolbarActions({ children }: DataTableToolbarActionsProps) {
-  return (
-    <XStack alignItems="center" gap="$1">
-      {children}
-    </XStack>
-  );
-}
-
-export interface DataTableToolbarSeparatorProps {
-  orientation?: "horizontal" | "vertical";
-}
-
-export function DataTableToolbarSeparator({
-  orientation = "vertical",
-}: DataTableToolbarSeparatorProps) {
-  return (
-    <Separator
-      vertical={orientation === "vertical"}
-      marginHorizontal={orientation === "vertical" ? "$1" : 0}
-      marginVertical={orientation === "horizontal" ? "$1" : 0}
-    />
-  );
-}

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

@@ -133,12 +133,12 @@ describe("DataTableViewOptions", () => {
       expect(screen.getByText("Column Visibility")).toBeInTheDocument();
     });
 
-    // Find the switch for the first column (Name)
-    const switches = screen.getAllByRole("switch");
-    expect(switches.length).toBeGreaterThan(0);
+    // Compact mode renders the canonical DropdownMenu checkbox rows
+    const checkboxItems = screen.getAllByRole("menuitemcheckbox");
+    expect(checkboxItems.length).toBeGreaterThan(0);
 
-    // Click the first switch
-    fireEvent.click(switches[0]);
+    // Click the first checkbox row (Name)
+    fireEvent.click(checkboxItems[0]);
 
     expect(mockOnChange).toHaveBeenCalled();
   });

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

@@ -120,6 +120,38 @@ export const Default = () => {
 };
 
 Default.storyName = "Main";
+
+export const Compact = () => {
+  const [columns, setColumns] = React.useState(transformedColumns);
+
+  return (
+    <YStack gap="$4" padding="$4">
+      <Text fontSize="$4" fontWeight="600">
+        Compact (DropdownMenu)
+      </Text>
+
+      <DataTableViewOptions
+        compact
+        columns={columns}
+        onColumnVisibilityChange={(columnId, visible) => {
+          setColumns((prev) =>
+            prev.map((col) => (col.id === columnId ? { ...col, visible } : col)),
+          );
+          action("column-visibility-changed")({ [columnId]: visible });
+        }}
+        onResetToDefault={() => {
+          setColumns(transformedColumns);
+          action("reset-to-default")();
+        }}
+      />
+
+      <Text fontSize="$2" color="$gray11">
+        Visible: {columns.filter((col) => col.visible).length} of {columns.length}
+      </Text>
+    </YStack>
+  );
+};
+
 export const WithPageSizeControls = () => {
   const [pageSize, _setPageSize] = React.useState(10);
 
@@ -264,11 +296,15 @@ export const DensityOptions = () => {
   );
 };
 
-export const Disabled = () => {
+// Honest rename (LC-40 sweep / SB-M-624): this story was titled "Disabled"
+// but passed no disabled props — DataTableViewOptions has NO `disabled` API
+// yet, so the panel it renders is fully interactive. Keep it as an honest
+// record of that gap until the owner adds a disabled API on demand.
+export const NoDisabledApi = () => {
   return (
     <YStack gap="$4" padding="$4">
       <Text fontSize="$4" fontWeight="600">
-        Disabled State
+        No Disabled API
       </Text>
 
       <DataTableViewOptions
@@ -282,11 +318,13 @@ export const Disabled = () => {
       />
 
       <Text fontSize="$3" color="$gray11">
-        View options are disabled and cannot be interacted with.
+        DataTableViewOptions has no `disabled` prop yet — this panel is fully interactive. When the
+        table itself is disabled, DataTableRoot wraps its chrome in the LC-40 fragment instead.
       </Text>
     </YStack>
   );
 };
+NoDisabledApi.storyName = "No Disabled API";
 
 export const MinimalColumns = () => {
   const minimalColumns = transformedColumns.slice(0, 3);