@multiplatform.one/table 7.10.0 → 7.15.0

package/src/components/DataTableSearch/index.tsx

@@ -2,9 +2,14 @@ import { SlidersHorizontalIcon } from "@phosphor-icons/react";
 import { sizeRecipeForToken, useResolvedKnobs } from "@multiplatform.one/theme";
 import type React from "react";
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
-import { PopoverContent } from "@multiplatform.one/components";
-import { Button, Checkbox, SearchInput, formCommonColors } from "@multiplatform.one/forms";
-import { Popover, ScrollView, Separator, Text, View, XStack, YStack, isWeb } from "tamagui";
+import {
+  Button,
+  Checkbox,
+  FloatingPanel,
+  SearchInput,
+  formCommonColors,
+} from "@multiplatform.one/forms";
+import { Separator, Text, View, XStack, YStack, isWeb } from "tamagui";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
 import { t } from "../../shared/t";
 import { bidiIsolate } from "../../utils/withInterp";
@@ -165,7 +170,7 @@ export function DataTableSearch<T = any>(props: DataTableSearchProps<T>) {
       </View>
 
       {showAdvancedOptions && (
-        <SearchOptionsPopover
+        <SearchOptionsPanel
           searchOptions={searchOptions}
           onOptionsChange={handleOptionsChange}
           columns={searchableColumns}
@@ -201,7 +206,7 @@ export function DataTableSearch<T = any>(props: DataTableSearchProps<T>) {
   );
 }
 
-interface SearchOptionsPopoverProps {
+interface SearchOptionsPanelProps {
   searchOptions: SearchOptions;
   onOptionsChange: (options: Partial<SearchOptions>) => void;
   columns: Array<{
@@ -217,7 +222,7 @@ interface SearchOptionsPopoverProps {
   optionsActive: boolean;
 }
 
-function SearchOptionsPopover({
+function SearchOptionsPanel({
   searchOptions,
   onOptionsChange,
   columns,
@@ -226,7 +231,7 @@ function SearchOptionsPopover({
   disabled,
   iconPx,
   optionsActive,
-}: SearchOptionsPopoverProps) {
+}: SearchOptionsPanelProps) {
   const { knobProps } = useResolvedKnobs();
   const [open, setOpen] = useState(false);
 
@@ -245,113 +250,110 @@ function SearchOptionsPopover({
     onOptionsChange({ columns: [] });
   };
 
-  const sz = knobProps.sizeToken;
-  const panelMaxHeight = sz === "$3" ? 320 : sz === "$5" ? 480 : 400;
+  const trigger = (
+    <Button
+      size={knobProps.sizeToken}
+      accent={optionsActive}
+      icon={<SlidersHorizontalIcon size={iconPx} weight={optionsActive ? "fill" : "regular"} />}
+      disabled={disabled}
+      aria-label={t("Search options")}
+      aria-expanded={open}
+      aria-haspopup="dialog"
+    />
+  );
 
   return (
-    <Popover open={open} onOpenChange={setOpen} stayInFrame allowFlip resize>
-      <Popover.Trigger asChild>
-        <Button
-          size={knobProps.sizeToken}
-          accent={optionsActive}
-          icon={<SlidersHorizontalIcon size={iconPx} weight={optionsActive ? "fill" : "regular"} />}
-          disabled={disabled}
-          aria-label={t("Search options")}
-          aria-expanded={open}
-          aria-haspopup="dialog"
-        />
-      </Popover.Trigger>
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      trigger={trigger}
+      triggerSizing="content"
+      widthMode="fit-content"
+      disabled={disabled}
+      scrollable
+    >
+      <YStack {...knobProps.gapLg} minWidth={280} data-dismiss-class="compose">
+        <Text {...knobProps.heading} {...knobProps.label} fontWeight="400">
+          {t("Search Options")}
+        </Text>
 
-      <PopoverContent padding={0} overflow="hidden" alignItems="stretch" minWidth={280}>
-        <ScrollView flexShrink={1} maxHeight={panelMaxHeight}>
-          <YStack {...knobProps.panelPadding} {...knobProps.gapLg}>
-            <Text {...knobProps.heading} {...knobProps.label} fontWeight="400">
-              {t("Search Options")}
+        <YStack {...knobProps.gap}>
+          <Text {...knobProps.label} fontWeight="400">
+            {t("Search Settings")}
+          </Text>
+
+          <Checkbox
+            compact
+            label={t("Case sensitive")}
+            checked={searchOptions.caseSensitive}
+            onCheckedChange={(checked) => onOptionsChange({ caseSensitive: checked as boolean })}
+          />
+
+          <Checkbox
+            compact
+            label={t("Whole word only")}
+            checked={searchOptions.wholeWord}
+            onCheckedChange={(checked) => onOptionsChange({ wholeWord: checked as boolean })}
+          />
+
+          <Checkbox
+            compact
+            label={t("Use regex")}
+            checked={searchOptions.regex}
+            onCheckedChange={(checked) => onOptionsChange({ regex: checked as boolean })}
+          />
+
+          <Checkbox
+            compact
+            label={t("Highlight results")}
+            checked={searchOptions.highlightResults}
+            onCheckedChange={(checked) => onOptionsChange({ highlightResults: checked as boolean })}
+          />
+        </YStack>
+
+        <Separator />
+
+        <YStack {...knobProps.gap}>
+          <XStack justifyContent="space-between" alignItems="center">
+            <Text {...knobProps.label} fontWeight="400">
+              {t("Search Columns")}
             </Text>
-
-            <YStack {...knobProps.gap}>
-              <Text {...knobProps.label} fontWeight="400">
-                {t("Search Settings")}
-              </Text>
-
-              <Checkbox
-                compact
-                label={t("Case sensitive")}
-                checked={searchOptions.caseSensitive}
-                onCheckedChange={(checked) =>
-                  onOptionsChange({ caseSensitive: checked as boolean })
-                }
-              />
-
-              <Checkbox
-                compact
-                label={t("Whole word only")}
-                checked={searchOptions.wholeWord}
-                onCheckedChange={(checked) => onOptionsChange({ wholeWord: checked as boolean })}
-              />
-
-              <Checkbox
-                compact
-                label={t("Use regex")}
-                checked={searchOptions.regex}
-                onCheckedChange={(checked) => onOptionsChange({ regex: checked as boolean })}
-              />
-
-              <Checkbox
-                compact
-                label={t("Highlight results")}
-                checked={searchOptions.highlightResults}
-                onCheckedChange={(checked) =>
-                  onOptionsChange({ highlightResults: checked as boolean })
-                }
-              />
-            </YStack>
-
-            <Separator />
-
-            <YStack {...knobProps.gap}>
-              <XStack justifyContent="space-between" alignItems="center">
-                <Text {...knobProps.label} fontWeight="400">
-                  {t("Search Columns")}
-                </Text>
-                <Text {...knobProps.label} color={formCommonColors.muted}>
-                  {bidiIsolate(
-                    t("{{selected}} of {{total}}", {
-                      selected: selectedColumnCount,
-                      total: totalColumnCount,
-                    }),
-                  )}
-                </Text>
-              </XStack>
-
-              <XStack {...knobProps.gap}>
-                <Button size="$2" compact onPress={handleSelectAllColumns}>
-                  {t("All")}
-                </Button>
-                <Button size="$2" compact onPress={handleSelectNoColumns}>
-                  {t("None")}
-                </Button>
-              </XStack>
-
-              <YStack gap="$1">
-                {columns.map((col) => {
-                  const key = col.accessorKey || col.id || "";
-                  return (
-                    <Checkbox
-                      key={key}
-                      compact
-                      label={col.header || key}
-                      checked={searchOptions.columns.includes(key)}
-                      onCheckedChange={(checked) => handleColumnToggle(key, checked as boolean)}
-                    />
-                  );
-                })}
-              </YStack>
-            </YStack>
+            <Text {...knobProps.label} color={formCommonColors.muted}>
+              {bidiIsolate(
+                t("{{selected}} of {{total}}", {
+                  selected: selectedColumnCount,
+                  total: totalColumnCount,
+                }),
+              )}
+            </Text>
+          </XStack>
+
+          <XStack {...knobProps.gap}>
+            <Button size="$2" compact onPress={handleSelectAllColumns}>
+              {t("All")}
+            </Button>
+            <Button size="$2" compact onPress={handleSelectNoColumns}>
+              {t("None")}
+            </Button>
+          </XStack>
+
+          <YStack gap="$1">
+            {columns.map((col) => {
+              const key = col.accessorKey || col.id || "";
+              return (
+                <Checkbox
+                  key={key}
+                  compact
+                  label={col.header || key}
+                  checked={searchOptions.columns.includes(key)}
+                  onCheckedChange={(checked) => handleColumnToggle(key, checked as boolean)}
+                />
+              );
+            })}
           </YStack>
-        </ScrollView>
-      </PopoverContent>
-    </Popover>
+        </YStack>
+      </YStack>
+    </FloatingPanel>
   );
 }
 

package/src/components/DataTableToolbar/index.tsx

@@ -1,17 +1,17 @@
 import { CaretDownIcon, FloppyDiskIcon } from "@phosphor-icons/react";
 import { DropdownMenu } from "@multiplatform.one/components";
-import { Button, Input, SearchInput, Spinner } from "@multiplatform.one/forms";
+import { Button, FloatingPanel, Input, SearchInput, Spinner } from "@multiplatform.one/forms";
 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 { 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";
+import { DataTableCardFilterButton, DataTableFilterButton } from "../DataTableFilterButton";
 
 export interface DataTableToolbarProps {
   // Search
@@ -49,6 +49,17 @@ export interface DataTableToolbarProps {
 }
 
 export function DataTableToolbar(props: DataTableToolbarProps) {
+  return <ToolbarLayout {...props} />;
+}
+
+export function DataTableCardToolbar(props: DataTableToolbarProps) {
+  return <ToolbarLayout {...props} cardLayout />;
+}
+
+function ToolbarLayout({
+  cardLayout = false,
+  ...props
+}: DataTableToolbarProps & { cardLayout?: boolean }) {
   const ctx = useDataTableState();
 
   const globalFilter = props.globalFilter ?? ctx?.state.globalFilter ?? "";
@@ -108,9 +119,98 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
   );
   const hasTrailing = showActionCluster || isFetching;
 
+  const viewPickerContent = 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")}
+            {...(cardLayout ? { minWidth: 0, maxWidth: "100%" as const } : {})}
+            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>
+  );
+  const viewPicker =
+    cardLayout && showViewPicker ? (
+      <XStack minWidth={0} maxWidth="100%" flexBasis="auto" flexGrow={0} flexShrink={1}>
+        {viewPickerContent}
+      </XStack>
+    ) : (
+      viewPickerContent
+    );
+  const saveView = showSave && (
+    <FloatingPanel
+      open={showSaveViewDialog}
+      onOpenChange={setShowSaveViewDialog}
+      triggerSizing="content"
+      widthMode="fit-content"
+      trigger={
+        <RovingFocusGroup.Item focusable asChild>
+          <Button
+            chromeless
+            size={controlSize}
+            icon={<FloppyDiskIcon size={iconPx} />}
+            aria-label={t("Save view")}
+          />
+        </RovingFocusGroup.Item>
+      }
+    >
+      <YStack {...knobProps.gap} minWidth={240} data-dismiss-class="compose">
+        <Input
+          placeholder={t("View name")}
+          value={newViewName}
+          onChangeText={setNewViewName}
+          size={searchSize}
+          {...(compact === undefined ? {} : { compact })}
+          inputProps={{
+            "aria-label": t("View name"),
+            onKeyDown: (e: React.KeyboardEvent) => {
+              if (e.key === "Enter") handleSaveView();
+            },
+          }}
+        />
+        <XStack {...knobProps.gap} justifyContent="flex-end">
+          <Button size={controlSize} onPress={() => setShowSaveViewDialog(false)}>
+            {t("Cancel")}
+          </Button>
+          <Button
+            size={controlSize}
+            onPress={handleSaveView}
+            disabled={!newViewName.trim()}
+            disabledReason={t("Enter a view name")}
+          >
+            {t("Save")}
+          </Button>
+        </XStack>
+      </YStack>
+    </FloatingPanel>
+  );
+  const showSecondary = showViewPicker || showSave || enableExport || isFetching;
+
   return (
     <XStack
-      alignItems="center"
+      alignItems={cardLayout ? "stretch" : "center"}
+      flexDirection={cardLayout ? "column" : "row"}
+      {...(cardLayout ? { width: "100%" as const, minWidth: 0 } : {})}
       // LC-39: flush band — no painted panel, so no horizontal inset.
       paddingVertical={knobProps.panelPadding.padding}
       paddingHorizontal={0}
@@ -124,7 +224,12 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
       aria-busy={isFetching || undefined}
     >
       {enableGlobalSearch && (
-        <XStack flex={1} minWidth={160} maxWidth={searchMaxWidth} flexShrink={1}>
+        <XStack
+          flex={cardLayout ? undefined : 1}
+          minWidth={cardLayout ? 0 : 160}
+          maxWidth={cardLayout ? undefined : searchMaxWidth}
+          flexShrink={1}
+        >
           <SearchInput
             value={globalFilter}
             onChange={onGlobalFilterChange}
@@ -144,116 +249,83 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
         </XStack>
       )}
 
-      {hasTrailing && (
-        <XStack
-          alignItems="center"
-          {...knobProps.gap}
-          flexShrink={0}
-          marginInlineStart={enableGlobalSearch ? "auto" : 0}
-        >
-          {showActionCluster && (
+      {cardLayout ? (
+        <>
+          {(showFilterButton || customActions) && (
             <RovingFocusGroup orientation="horizontal" loop asChild>
-              <XStack alignItems="center" {...knobProps.gap}>
-                {showFilterButton && <DataTableFilterButton />}
-
-                {enableExport && <DataTableExport />}
-
+              <XStack
+                data-table-card-primary=""
+                width="100%"
+                minWidth={0}
+                alignItems="center"
+                flexWrap="nowrap"
+                {...knobProps.gap}
+              >
+                {showFilterButton && (
+                  <XStack flexShrink={0}>
+                    <DataTableCardFilterButton />
+                  </XStack>
+                )}
                 {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>
+              </XStack>
+            </RovingFocusGroup>
+          )}
+          {showSecondary && (
+            <RovingFocusGroup orientation="horizontal" loop asChild>
+              <XStack
+                data-table-card-secondary=""
+                width="100%"
+                minWidth={0}
+                flexWrap="wrap"
+                alignItems="center"
+                {...knobProps.gap}
+              >
+                {enableExport && (
+                  <XStack maxWidth="100%" minWidth={0}>
+                    <DataTableExport />
+                  </XStack>
                 )}
-
-                {showSave && (
-                  <Popover open={showSaveViewDialog} onOpenChange={setShowSaveViewDialog}>
-                    <Popover.Trigger asChild>
-                      <RovingFocusGroup.Item focusable asChild>
-                        <Button
-                          chromeless
-                          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={240}>
-                        <Input
-                          placeholder={t("View name")}
-                          value={newViewName}
-                          onChangeText={setNewViewName}
-                          size={searchSize}
-                          {...(compact === undefined ? {} : { compact })}
-                          inputProps={{
-                            "aria-label": t("View name"),
-                            onKeyDown: (e: React.KeyboardEvent) => {
-                              if (e.key === "Enter") handleSaveView();
-                            },
-                          }}
-                        />
-                        <XStack {...knobProps.gap} justifyContent="flex-end">
-                          <Button size={controlSize} onPress={() => setShowSaveViewDialog(false)}>
-                            {t("Cancel")}
-                          </Button>
-                          <Button
-                            size={controlSize}
-                            onPress={handleSaveView}
-                            disabled={!newViewName.trim()}
-                            disabledReason={t("Enter a view name")}
-                          >
-                            {t("Save")}
-                          </Button>
-                        </XStack>
-                      </YStack>
-                    </Popover.Content>
-                  </Popover>
+                {viewPicker}
+                {saveView}
+                {isFetching && (
+                  <XStack alignItems="center" aria-live="polite" data-table-fetching="true">
+                    <Spinner size="small" />
+                  </XStack>
                 )}
               </XStack>
             </RovingFocusGroup>
           )}
+        </>
+      ) : (
+        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 />}
 
-          {isFetching && (
-            <XStack alignItems="center" aria-live="polite" data-table-fetching="true">
-              <Spinner size="small" />
-            </XStack>
-          )}
-        </XStack>
+                  {enableExport && <DataTableExport />}
+
+                  {customActions}
+
+                  {viewPicker}
+                  {saveView}
+                </XStack>
+              </RovingFocusGroup>
+            )}
+
+            {isFetching && (
+              <XStack alignItems="center" aria-live="polite" data-table-fetching="true">
+                <Spinner size="small" />
+              </XStack>
+            )}
+          </XStack>
+        )
       )}
     </XStack>
   );

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

@@ -2,6 +2,7 @@ import { action } from "@multiplatform.one/storybook";
 import React from "react";
 import { formatAbsoluteDate } from "@multiplatform.one/theme";
 import { Card, Text, View, XStack, YStack } from "tamagui";
+import type { TableView } from "../../types";
 import { DataTableViewOptions } from "./index";
 
 // Columns definition
@@ -420,3 +421,54 @@ export const AllOptionsCombined = () => {
     </YStack>
   );
 };
+
+const savedViews: TableView[] = [
+  {
+    id: "all",
+    name: "All products",
+    columns: {},
+    filters: [],
+    sorting: [],
+    pagination: { pageIndex: 0, pageSize: 10 },
+  },
+  {
+    id: "in-stock",
+    name: "In stock",
+    columns: {},
+    filters: [],
+    sorting: [],
+    pagination: { pageIndex: 0, pageSize: 10 },
+  },
+];
+
+export const WithSavedViews = () => {
+  const [views, setViews] = React.useState<TableView[]>(savedViews);
+  const [activeViewId, setActiveViewId] = React.useState("all");
+
+  return (
+    <YStack gap="$4" padding="$4">
+      <Text fontSize="$4" fontWeight="600">
+        Saved Views
+      </Text>
+
+      <DataTableViewOptions
+        columns={transformedColumns}
+        onColumnVisibilityChange={() => {}}
+        views={views}
+        activeViewId={activeViewId}
+        showViewManagement
+        onSaveView={(name) => {
+          const id = name.toLowerCase().replace(/\s+/g, "-");
+          setViews((prev) => [...prev, { ...savedViews[0], id, name }]);
+          setActiveViewId(id);
+          action("save-view")(name);
+        }}
+        onLoadView={(viewId) => {
+          setActiveViewId(viewId);
+          action("load-view")(viewId);
+        }}
+        onResetToDefault={() => {}}
+      />
+    </YStack>
+  );
+};