@multiplatform.one/table 7.11.0 → 7.16.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,11 +1,11 @@
 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";
@@ -158,8 +158,12 @@ function ToolbarLayout({
       viewPickerContent
     );
   const saveView = showSave && (
-    <Popover open={showSaveViewDialog} onOpenChange={setShowSaveViewDialog}>
-      <Popover.Trigger asChild>
+    <FloatingPanel
+      open={showSaveViewDialog}
+      onOpenChange={setShowSaveViewDialog}
+      triggerSizing="content"
+      widthMode="fit-content"
+      trigger={
         <RovingFocusGroup.Item focusable asChild>
           <Button
             chromeless
@@ -168,48 +172,37 @@ function ToolbarLayout({
             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>
+      }
+    >
+      <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;
 

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>
+  );
+};

package/src/components/DataTableViewOptions/index.tsx

@@ -7,9 +7,9 @@ import {
 } from "@phosphor-icons/react";
 import { getGroupPosition, stackRadiusProps, useResolvedKnobs } from "@multiplatform.one/theme";
 import React, { useState } from "react";
-import { Button, Input, Slider, Switch } from "@multiplatform.one/forms";
+import { Button, FloatingPanel, 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 { ScrollView, Separator, Text, View, XStack, YStack, useTheme } from "tamagui";
 import type { TableView } from "../../types";
 import { t } from "../../shared/t";
 import { iconSizeForToken } from "../../utils/chromeIcons";
@@ -415,47 +415,39 @@ function ViewManagementSection({
       </Text>
 
       {/* Save Current View */}
-      <Popover open={showSaveDialog} onOpenChange={setShowSaveDialog}>
-        <Popover.Trigger asChild>
+      <FloatingPanel
+        open={showSaveDialog}
+        onOpenChange={setShowSaveDialog}
+        trigger={
           <Button size={knobProps.sizeToken} icon={<FloppyDiskIcon size={iconPx} />}>
             {t("Save Current View")}
           </Button>
-        </Popover.Trigger>
-        <Popover.Content
-          {...knobProps.elevatedSurface}
-          enterStyle={{ x: 0, y: -10, opacity: 0 }}
-          exitStyle={{ x: 0, y: -10, opacity: 0 }}
-          transition={knobProps.transition}
-        >
-          <YStack {...knobProps.panelPadding} gap="$3" minWidth={250}>
-            <Text {...knobProps.label} fontWeight="400">
-              {t("Save View")}
-            </Text>
-            <Input
-              placeholder={t("Enter view name...")}
-              value={viewName}
-              onChangeText={setViewName}
-              inputProps={{
-                onKeyDown: (e: React.KeyboardEvent) => {
-                  if (e.key === "Enter" && viewName.trim()) handleSaveView();
-                },
-              }}
-            />
-            <XStack gap="$2" justifyContent="flex-end">
-              <Button size={knobProps.sizeToken} onPress={() => setShowSaveDialog(false)}>
-                {t("Cancel")}
-              </Button>
-              <Button
-                size={knobProps.sizeToken}
-                onPress={handleSaveView}
-                disabled={!viewName.trim()}
-              >
-                {t("Save")}
-              </Button>
-            </XStack>
-          </YStack>
-        </Popover.Content>
-      </Popover>
+        }
+      >
+        <YStack gap="$3" minWidth={250} data-dismiss-class="compose">
+          <Text {...knobProps.label} fontWeight="400">
+            {t("Save View")}
+          </Text>
+          <Input
+            placeholder={t("Enter view name...")}
+            value={viewName}
+            onChangeText={setViewName}
+            inputProps={{
+              onKeyDown: (e: React.KeyboardEvent) => {
+                if (e.key === "Enter" && viewName.trim()) handleSaveView();
+              },
+            }}
+          />
+          <XStack gap="$2" justifyContent="flex-end">
+            <Button size={knobProps.sizeToken} onPress={() => setShowSaveDialog(false)}>
+              {t("Cancel")}
+            </Button>
+            <Button size={knobProps.sizeToken} onPress={handleSaveView} disabled={!viewName.trim()}>
+              {t("Save")}
+            </Button>
+          </XStack>
+        </YStack>
+      </FloatingPanel>
 
       {/* Saved Views List */}
       {views.length > 0 && (

package/src/components/FilterOperatorValueEditor/FilterOperatorValueEditor.spec.tsx

@@ -7,6 +7,7 @@
 
 import { fireEvent, screen, waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { type Knobs, Preset } from "@multiplatform.one/theme";
 import React, { useState } from "react";
 import { describe, expect, it, vi } from "vitest";
 import type { DataTableColumnType, FilterOperator } from "../../types";
@@ -28,14 +29,16 @@ const selectTriggers = (container: HTMLElement) =>
 const textInputs = (container: HTMLElement) =>
   Array.from(container.querySelectorAll("input")) as HTMLInputElement[];
 
+/** The listbox portals out to the page (MPO-335, LC-90), so options are read from it. */
 async function openSelect(container: HTMLElement, trigger: HTMLElement) {
+  const page = container.ownerDocument.body;
   fireEvent.pointerDown(trigger);
   fireEvent.mouseDown(trigger);
   fireEvent.click(trigger);
   await waitFor(() => {
-    expect(container.querySelectorAll('[role="option"]').length).toBeGreaterThan(0);
+    expect(page.querySelectorAll('[role="option"]').length).toBeGreaterThan(0);
   });
-  return Array.from(container.querySelectorAll('[role="option"]')) as HTMLElement[];
+  return Array.from(page.querySelectorAll('[role="option"]')) as HTMLElement[];
 }
 
 /**
@@ -258,4 +261,63 @@ describe("FilterOperatorValueEditor", () => {
       await waitFor(() => expect(onValue).toHaveBeenLastCalledWith("in-progress"));
     });
   });
+  describe("knob laws (MPO-118)", () => {
+    const valueBox = (container: HTMLElement) =>
+      container.querySelector("[data-mp-input-field='true']") as HTMLElement;
+
+    const padX = (el: Element) =>
+      String((el as HTMLElement).className || "")
+        .split(" ")
+        .filter((c) => c.startsWith("_px-") || c.startsWith("_pl-") || c.startsWith("_pr-"))
+        .sort();
+
+    function renderAtKnobs(overrides: Partial<Knobs>) {
+      return renderWithProviders(
+        <Preset overrides={overrides}>
+          <FilterOperatorValueEditor
+            fieldType="text"
+            operator="contains"
+            value=""
+            onOperatorChange={vi.fn()}
+            onValueChange={vi.fn()}
+          />
+        </Preset>,
+      );
+    }
+
+    it("size small: Condition and Value both paint the small recipe", () => {
+      const { container } = renderAtKnobs({ size: "small" });
+      const box = valueBox(container);
+      expect(box.getAttribute("data-size")).toBe("$3");
+      expect(box.getAttribute("data-visual-height")).toBe("36");
+      expect(selectTriggers(container)[0].getAttribute("data-visual-height")).toBe("36");
+    });
+
+    it("size large: the Value input follows the knob instead of a pinned $3", () => {
+      const { container } = renderAtKnobs({ size: "large" });
+      const box = valueBox(container);
+      expect(box.getAttribute("data-size")).toBe("$5");
+      expect(box.getAttribute("data-visual-height")).toBe("52");
+      expect(selectTriggers(container)[0].getAttribute("data-visual-height")).toBe("52");
+    });
+
+    it("density comfortable: compact is not forced on the inner fields", () => {
+      const { container } = renderAtKnobs({ density: "comfortable" });
+      expect(valueBox(container).getAttribute("data-density")).toBe("comfortable");
+    });
+
+    it("density compact: the inner fields step with the density knob and keep their height", () => {
+      const comfortable = renderAtKnobs({ density: "comfortable", size: "medium" });
+      const comfortablePad = padX(selectTriggers(comfortable.container)[0]);
+      const comfortableHeight = valueBox(comfortable.container).getAttribute("data-visual-height");
+      comfortable.unmount();
+
+      const { container } = renderAtKnobs({ density: "compact", size: "medium" });
+      const box = valueBox(container);
+      expect(box.getAttribute("data-density")).toBe("compact");
+      expect(box.getAttribute("data-visual-height")).toBe(comfortableHeight);
+      expect(comfortablePad.length).toBeGreaterThan(0);
+      expect(padX(selectTriggers(container)[0])).not.toEqual(comfortablePad);
+    });
+  });
 });

package/src/components/FilterOperatorValueEditor/index.tsx

@@ -72,8 +72,6 @@ export function FilterOperatorValueEditor({
           }
         }}
         options={operatorOptions}
-        size="$3"
-        compact
       />
 
       {needsValueInput && (
@@ -89,8 +87,6 @@ export function FilterOperatorValueEditor({
               }}
               options={booleanOptions}
               placeholder={t("Select...")}
-              size="$3"
-              compact
             />
           ) : fieldType === "select" && options ? (
             <Select
@@ -103,8 +99,6 @@ export function FilterOperatorValueEditor({
               }}
               options={selectOptions}
               placeholder={t("Select...")}
-              size="$3"
-              compact
             />
           ) : (
             <Input
@@ -118,8 +112,6 @@ export function FilterOperatorValueEditor({
                     ? t("0.00")
                     : t("Enter value...")
               }
-              size="$3"
-              compact
               {...((fieldType === "number" || fieldType === "money") && {
                 keyboardType: "numeric",
               })}