@multiplatform.one/table 6.1.0 → 6.4.0

package/src/components/DataTableViewOptions/index.tsx

@@ -8,9 +8,11 @@ import {
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import React, { useState } from "react";
 import { Button, Input, Slider, Switch } from "@multiplatform.one/forms";
-import { Popover, ScrollView, Separator, Text, View, XStack, YStack } from "tamagui";
+import { DropdownMenu } from "@multiplatform.one/components";
+import { Popover, ScrollView, Separator, Text, View, XStack, YStack, useTheme } from "tamagui";
 import type { TableView } from "../../types";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
+import { t } from "../../shared/t";
 
 export interface DataTableViewOptionsProps {
   // Column Management
@@ -108,75 +110,65 @@ export function DataTableViewOptions(props: DataTableViewOptionsProps) {
   const hiddenColumns = columns.filter((col) => !col.visible);
 
   if (compact) {
+    // Compact mode is a column-visibility action menu: canonical DropdownMenu
+    // (roving keyboard, focus restore, edge-to-edge rows) with checkbox items.
     return (
-      <Popover open={showOptions} onOpenChange={setShowOptions}>
-        <Popover.Trigger asChild>
+      <DropdownMenu open={showOptions} onOpenChange={setShowOptions}>
+        <DropdownMenu.Trigger asChild>
           <Button
             size={knobProps.sizeToken}
             variant="outlined"
             icon={<GearIcon size={16} />}
-            aria-label="Open table view options"
-            aria-expanded={showOptions}
-            aria-haspopup="dialog"
+            aria-label={t("Open table view options")}
           >
-            View
+            {t("View")}
           </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 }}
-          transition={[
-            "quick",
-            {
-              opacity: {
-                overshootClamping: true,
-              },
-            },
-          ]}
-          maxWidth={popoverMaxWidth}
-        >
-          <ViewOptionsContent
-            columns={columns}
-            visibleColumns={visibleColumns}
-            hiddenColumns={hiddenColumns}
-            columnWidths={columnWidths}
-            views={views}
-            activeViewId={activeViewId}
-            onColumnVisibilityChange={onColumnVisibilityChange}
-            onColumnWidthChange={handleColumnWidthChange}
-            onColumnOrderChange={onColumnOrderChange}
-            onColumnSizingChange={onColumnSizingChange}
-            onSaveView={onSaveView}
-            onLoadView={onLoadView}
-            onResetToDefault={onResetToDefault}
-            showColumnVisibility={showColumnVisibility}
-            showColumnOrdering={showColumnOrdering}
-            showColumnResizing={showColumnResizing}
-            showViewManagement={showViewManagement}
-            onClose={() => setShowOptions(false)}
-          />
-        </Popover.Content>
-      </Popover>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content maxHeight={scrollMaxHeight} maxWidth={popoverMaxWidth}>
+          {showColumnVisibility && (
+            <>
+              <DropdownMenu.Label>{t("Column Visibility")}</DropdownMenu.Label>
+              {columns.map((column) => (
+                <DropdownMenu.CheckboxItem
+                  key={column.id}
+                  checked={column.visible}
+                  onCheckedChange={(checked) => onColumnVisibilityChange(column.id, checked)}
+                >
+                  {column.label}
+                </DropdownMenu.CheckboxItem>
+              ))}
+              <DropdownMenu.Separator />
+            </>
+          )}
+          <DropdownMenu.Item
+            icon={<ArrowCounterClockwiseIcon size={16} />}
+            closeOnSelect={false}
+            onSelect={onResetToDefault}
+          >
+            {t("Reset to Default")}
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>
     );
   }
 
   return (
     <YStack
       {...knobProps.borderRadius}
+      // Axiom 1 CLIP / radius-clamping: padded containers cap radius at their
+      // own padding so the corner curve never sweeps through child rows.
+      {...knobProps.containerRadius}
       {...knobProps.panelPadding}
+      {...knobProps.gap}
       {...{ backgroundColor: "$background" }}
       borderColor="$borderColor"
-      aria-label="Table view options"
-      aria-live="polite"
+      aria-label={t("Table view options")}
     >
       <XStack alignItems="center" justifyContent="space-between">
         <XStack alignItems="center" gap="$2">
           <GearIcon size={16} />
           <Text fontSize="$4" fontWeight="600">
-            View Options
+            {t("View Options")}
           </Text>
         </XStack>
 
@@ -186,14 +178,17 @@ export function DataTableViewOptions(props: DataTableViewOptionsProps) {
           onPress={onResetToDefault}
           icon={<ArrowCounterClockwiseIcon size={16} />}
         >
-          Reset
+          {t("Reset")}
         </Button>
       </XStack>
 
       <Separator />
 
       <ScrollView maxHeight={scrollMaxHeight}>
-        <YStack gap="$4">
+        {/* gapLg: section gaps exceed field gaps (DG-LAY-03) and follow the
+            space knob (LC-18). paddingRight keeps row controls clear of the
+            overlay scrollbar so toggles are never painted over. */}
+        <YStack {...knobProps.gapLg} paddingRight="$3">
           {/* Column Visibility */}
           {showColumnVisibility && (
             <ColumnVisibilitySection
@@ -227,119 +222,6 @@ export function DataTableViewOptions(props: DataTableViewOptionsProps) {
   );
 }
 
-// View Options Content (for compact popover)
-
-interface ViewOptionsContentProps extends DataTableViewOptionsProps {
-  visibleColumns: Array<{
-    id: string;
-    label: string;
-    visible: boolean;
-    order: number;
-    width?: number;
-    canHide?: boolean;
-    canResize?: boolean;
-    canReorder?: boolean;
-  }>;
-  hiddenColumns: Array<{
-    id: string;
-    label: string;
-    visible: boolean;
-    order: number;
-    width?: number;
-    canHide?: boolean;
-    canResize?: boolean;
-    canReorder?: boolean;
-  }>;
-  columnWidths: Record<string, number>;
-  onColumnWidthChange: (columnId: string, width: number) => void;
-  onClose: () => void;
-}
-
-function ViewOptionsContent({
-  visibleColumns,
-  hiddenColumns,
-  onColumnVisibilityChange,
-  onResetToDefault,
-  showColumnVisibility,
-  onClose,
-}: ViewOptionsContentProps) {
-  const { knobProps } = useResolvedKnobs();
-  const sz = knobProps.sizeToken;
-  const compactScrollMaxHeight = sz === "$3" ? 240 : sz === "$5" ? 360 : 300;
-
-  const handleVisibilityChange = onColumnVisibilityChange ?? (() => {});
-  const handleResetToDefault = onResetToDefault ?? (() => {});
-
-  return (
-    <YStack {...knobProps.panelPadding} gap="$4" minWidth={250}>
-      <Text fontSize="$4" fontWeight="600">
-        View Options
-      </Text>
-
-      <ScrollView maxHeight={compactScrollMaxHeight}>
-        <YStack gap="$4">
-          {/* Column Visibility */}
-          {showColumnVisibility && (
-            <YStack gap="$2">
-              <Text fontSize="$3" fontWeight="500">
-                Column Visibility
-              </Text>
-              <YStack gap="$1">
-                {visibleColumns.map((column) => (
-                  <XStack key={column.id} alignItems="center" justifyContent="space-between">
-                    <XStack alignItems="center" gap="$2">
-                      <EyeIcon size={16} color="$color10" />
-                      <Text fontSize="$3">{column.label}</Text>
-                    </XStack>
-                    <Switch
-                      size="$2"
-                      checked={column.visible}
-                      onCheckedChange={(checked) => handleVisibilityChange(column.id, checked)}
-                    />
-                  </XStack>
-                ))}
-                {hiddenColumns.map((column) => (
-                  <XStack key={column.id} alignItems="center" justifyContent="space-between">
-                    <XStack alignItems="center" gap="$2">
-                      <EyeSlashIcon size={16} color="$color10" />
-                      <Text fontSize="$3" color="$color10">
-                        {column.label}
-                      </Text>
-                    </XStack>
-                    <Switch
-                      size="$2"
-                      checked={column.visible}
-                      onCheckedChange={(checked) => handleVisibilityChange(column.id, checked)}
-                    />
-                  </XStack>
-                ))}
-              </YStack>
-            </YStack>
-          )}
-
-          {/* Quick Actions */}
-          <YStack gap="$2">
-            <Button
-              size={knobProps.sizeToken}
-              variant="outlined"
-              onPress={handleResetToDefault}
-              icon={<ArrowCounterClockwiseIcon size={16} />}
-            >
-              Reset to Default
-            </Button>
-          </YStack>
-        </YStack>
-      </ScrollView>
-
-      <XStack gap="$2" justifyContent="flex-end">
-        <Button size={knobProps.sizeToken} variant="outlined" onPress={onClose}>
-          Close
-        </Button>
-      </XStack>
-    </YStack>
-  );
-}
-
 // Column Visibility Section
 
 interface ColumnVisibilitySectionProps {
@@ -358,34 +240,54 @@ interface ColumnVisibilitySectionProps {
   onColumnVisibilityChange: (columnId: string, visible: boolean) => void;
 }
 
+/**
+ * SP-FIXED touch floor for the per-column visibility toggles: the pressable
+ * frame grows (invisibly) to 44px while the visible track keeps its
+ * knob-derived size, so every toggle is individually hittable and rows
+ * never overlap.
+ */
+const VISIBILITY_TOGGLE_TARGET = 44;
+
 function ColumnVisibilitySection({
   visibleColumns,
   hiddenColumns,
   onColumnVisibilityChange,
 }: ColumnVisibilitySectionProps) {
+  const { knobProps } = useResolvedKnobs();
+  // Phosphor icons are plain SVGs — they need a resolved CSS color, not a
+  // Tamagui token string. Neutral steps only: the switch owns the checked
+  // state, so the glyph never carries a second (hue-coded) state signal
+  // (LC-05 ONE-EMPHASIS).
+  const theme = useTheme();
+  const iconColor = theme.color11?.get();
+  const mutedIconColor = theme.color10?.get();
   return (
-    <YStack gap="$3">
+    <YStack {...knobProps.gap}>
       <Text fontSize="$4" fontWeight="600">
-        Column Visibility
+        {t("Column Visibility")}
       </Text>
 
       {/* Visible Columns */}
       {visibleColumns.length > 0 && (
         <YStack gap="$2">
           <Text fontSize="$3" fontWeight="500" color="$color10">
-            Visible Columns
+            {t("Visible Columns")}
           </Text>
           <YStack gap="$1">
             {visibleColumns.map((column) => (
               <XStack key={column.id} alignItems="center" justifyContent="space-between">
                 <XStack alignItems="center" gap="$2">
-                  <EyeIcon size={16} color="$green10" />
+                  <EyeIcon size={16} color={iconColor} />
                   <Text fontSize="$3">{column.label}</Text>
                 </XStack>
                 <Switch
-                  size="$2"
+                  minTargetHeight={VISIBILITY_TOGGLE_TARGET}
                   checked={column.visible}
-                  onCheckedChange={(checked) => onColumnVisibilityChange(column.id, checked)}
+                  onChange={(checked) => onColumnVisibilityChange(column.id, checked)}
+                  // DG-A11Y-06 / Axiom 12: icon-less toggle needs a per-column name.
+                  switchProps={{
+                    "aria-label": t("Show {{column}} column", { column: column.label }),
+                  }}
                 />
               </XStack>
             ))}
@@ -397,21 +299,24 @@ function ColumnVisibilitySection({
       {hiddenColumns.length > 0 && (
         <YStack gap="$2">
           <Text fontSize="$3" fontWeight="500" color="$color10">
-            Hidden Columns
+            {t("Hidden Columns")}
           </Text>
           <YStack gap="$1">
             {hiddenColumns.map((column) => (
               <XStack key={column.id} alignItems="center" justifyContent="space-between">
                 <XStack alignItems="center" gap="$2">
-                  <EyeSlashIcon size={16} color="$color10" />
+                  <EyeSlashIcon size={16} color={mutedIconColor} />
                   <Text fontSize="$3" color="$color10">
                     {column.label}
                   </Text>
                 </XStack>
                 <Switch
-                  size="$2"
+                  minTargetHeight={VISIBILITY_TOGGLE_TARGET}
                   checked={column.visible}
-                  onCheckedChange={(checked) => onColumnVisibilityChange(column.id, checked)}
+                  onChange={(checked) => onColumnVisibilityChange(column.id, checked)}
+                  switchProps={{
+                    "aria-label": t("Show {{column}} column", { column: column.label }),
+                  }}
                 />
               </XStack>
             ))}
@@ -442,7 +347,7 @@ function ColumnResizingSection({
   return (
     <YStack gap="$3">
       <Text fontSize="$4" fontWeight="600">
-        Column Widths
+        {t("Column Widths")}
       </Text>
 
       <YStack gap="$3">
@@ -459,10 +364,11 @@ function ColumnResizingSection({
                   min={50}
                   max={300}
                   step={10}
+                  aria-label={t("{{column}} column width", { column: column.label })}
                 />
               </View>
               <Text fontSize="$3" color="$color10" minWidth={40} textAlign="right">
-                {columnWidths[column.id] || column.width || 100}px
+                {t("{{width}}px", { width: columnWidths[column.id] || column.width || 100 })}
               </Text>
             </XStack>
           </YStack>
@@ -502,14 +408,14 @@ function ViewManagementSection({
   return (
     <YStack gap="$3">
       <Text fontSize="$4" fontWeight="600">
-        Saved Views
+        {t("Saved Views")}
       </Text>
 
       {/* Save Current View */}
       <Popover open={showSaveDialog} onOpenChange={setShowSaveDialog}>
         <Popover.Trigger asChild>
           <Button size={knobProps.sizeToken} variant="outlined" icon={<FloppyDiskIcon size={16} />}>
-            Save Current View
+            {t("Save Current View")}
           </Button>
         </Popover.Trigger>
         <Popover.Content
@@ -529,10 +435,10 @@ function ViewManagementSection({
         >
           <YStack {...knobProps.panelPadding} gap="$3" minWidth={250}>
             <Text fontSize="$4" fontWeight="500">
-              Save View
+              {t("Save View")}
             </Text>
             <Input
-              placeholder="Enter view name..."
+              placeholder={t("Enter view name...")}
               value={viewName}
               onChangeText={setViewName}
               inputProps={{
@@ -547,14 +453,14 @@ function ViewManagementSection({
                 variant="outlined"
                 onPress={() => setShowSaveDialog(false)}
               >
-                Cancel
+                {t("Cancel")}
               </Button>
               <Button
                 size={knobProps.sizeToken}
                 onPress={handleSaveView}
                 disabled={!viewName.trim()}
               >
-                Save
+                {t("Save")}
               </Button>
             </XStack>
           </YStack>
@@ -581,7 +487,7 @@ function ViewManagementSection({
                 onPress={() => onLoadView(view.id)}
                 disabled={activeViewId === view.id}
               >
-                Load
+                {t("Load")}
               </Button>
             </XStack>
           ))}

package/src/components/FilterManager.spec.tsx

@@ -33,16 +33,19 @@ describe("FilterManager", () => {
     expect(container.querySelector("button")).toBeDefined();
   });
 
-  it("disables save button when no filters are active", () => {
+  it("explains the disabled save trigger when no filters are active (DG-ST-03)", () => {
     const onSave = vi.fn();
 
-    const { container } = renderWithProviders(
+    const { container, getByText } = renderWithProviders(
       <FilterManager currentFilters={[]} onSaveFilter={onSave} />,
     );
 
-    const button = container.querySelector("button");
+    // Explained disable: aria-disabled (focusable, press swallowed) with the
+    // reason rendered as visible adjacent text — never a bare `disabled`.
+    const button = container.querySelector('[aria-label="Save filter"]');
     expect(button).toBeDefined();
-    expect(button?.getAttribute("disabled")).not.toBeNull();
+    expect(button?.getAttribute("aria-disabled")).toBe("true");
+    expect(getByText("Apply filters to save them")).toBeDefined();
   });
 
   it("accepts canCreateGlobal prop without Frappe-specific config", () => {

package/src/components/FilterManager.tsx

@@ -4,6 +4,7 @@ import type React from "react";
 import { useState } from "react";
 import { Button, Checkbox, Input } from "@multiplatform.one/forms";
 import { Text, XStack, YStack } from "tamagui";
+import { t } from "../shared/t";
 import {
   KnobDialog,
   KnobDialogContent,
@@ -17,6 +18,12 @@ export interface FilterManagerProps {
   currentFilters: Array<[string, string, any]>;
   onSaveFilter: (filterName: string, isGlobal: boolean) => Promise<void> | void;
   disabled?: boolean;
+  /**
+   * DG-ST-03 — explains a caller-driven `disabled` (renders as visible
+   * adjacent text + aria-describedby via the Button contract). The built-in
+   * "no filters applied" disable carries its own reason.
+   */
+  disabledReason?: string;
   canCreateGlobal?: boolean;
   trigger?: React.ReactNode;
 }
@@ -25,6 +32,7 @@ export function FilterManager({
   currentFilters,
   onSaveFilter,
   disabled = false,
+  disabledReason,
   canCreateGlobal = false,
   trigger,
 }: FilterManagerProps) {
@@ -68,6 +76,13 @@ export function FilterManager({
             size={knobProps.sizeToken}
             icon={FloppyDiskIcon}
             disabled={disabled || !hasFilters}
+            // DG-ST-03 explain: an unfiltered table is the common RESTING
+            // state, so a bare `disabled` here fired the `[theme]
+            // bare-disabled` guardrail on every list at load. The reason
+            // renders adjacent + aria-describedby (Button contract).
+            disabledReason={
+              disabled ? disabledReason : !hasFilters ? t("Apply filters to save them") : undefined
+            }
             aria-label="Save filter"
           >
             Save Filter
@@ -100,7 +115,7 @@ export function FilterManager({
           )}
 
           {error && (
-            <Text color="$red10" fontSize="$2">
+            <Text color="$red11" fontSize="$2">
               {error}
             </Text>
           )}
@@ -112,18 +127,23 @@ export function FilterManager({
 
         <XStack gap="$3" justifyContent="flex-end">
           <KnobDialogClose asChild>
-            <Button size={knobProps.sizeToken} variant="outlined" disabled={isSaving}>
+            {/* DG-ACT-05: the cancel action never renders disabled. */}
+            <Button size={knobProps.sizeToken} variant="outlined">
               Cancel
             </Button>
           </KnobDialogClose>
+          {/* Stays pressable on an empty name — handleSave surfaces the
+              inline "Filter name is required" instead of a bare-disabled
+              dangle (DG-ST-03); busy is derived state via `loading`.
+              `accent` = the dialog's one primary (LC-05), not theme="active". */}
           <Button
             size={knobProps.sizeToken}
-            theme="active"
+            accent
             icon={FloppyDiskIcon}
             onPress={handleSave}
-            disabled={isSaving || !filterName.trim()}
+            loading={isSaving}
           >
-            {isSaving ? "Saving..." : "Save Filter"}
+            Save Filter
           </Button>
         </XStack>
 

package/src/components/FilterOperatorValueEditor/index.tsx

@@ -0,0 +1,124 @@
+/**
+ * FilterOperatorValueEditor — the ONE fieldtype-aware operator/value editor
+ * (LC-16). Both filter surfaces render it:
+ *   - ColumnHeaderFilter (funnel popover, Apply/Clear commit)
+ *   - DataTableFilterButton (toolbar surface, live commit LC-21)
+ * The surface owns commit semantics; this component only edits operator+value.
+ */
+
+import { Input, Select } from "@multiplatform.one/forms";
+import { useMemo } from "react";
+import { YStack } from "tamagui";
+import { t } from "../../shared/t";
+import type { DataTableColumnType, FilterOperator } from "../../types";
+import {
+  filterOperatorLabel,
+  operatorNeedsNoValue,
+  operatorsForFilterType,
+} from "../../utils/filterFields";
+
+export interface FilterOperatorValueEditorProps {
+  /** Filter editor type of the field being filtered. */
+  fieldType: DataTableColumnType;
+  operator: FilterOperator;
+  value: string;
+  onOperatorChange: (operator: FilterOperator) => void;
+  onValueChange: (value: string) => void;
+  /** Options for select-type fields. */
+  options?: Array<{ label: string; value: any }>;
+}
+
+export function FilterOperatorValueEditor({
+  fieldType,
+  operator,
+  value,
+  onOperatorChange,
+  onValueChange,
+  options,
+}: FilterOperatorValueEditorProps) {
+  const operatorOptions = useMemo(
+    () =>
+      operatorsForFilterType(fieldType).map((op) => ({
+        value: op,
+        label: filterOperatorLabel(op),
+      })),
+    [fieldType],
+  );
+
+  const needsValueInput = !operatorNeedsNoValue(operator);
+
+  const booleanOptions = [
+    { value: "true", label: t("True") },
+    { value: "false", label: t("False") },
+  ];
+
+  const selectOptions = useMemo(
+    () =>
+      options?.map((opt) => ({
+        value: String(opt.value),
+        label: opt.label,
+      })) || [],
+    [options],
+  );
+
+  return (
+    <>
+      <Select
+        label={t("Condition")}
+        value={operator}
+        onValueChange={(v) => {
+          if (typeof v === "string") {
+            onOperatorChange(v as FilterOperator);
+          }
+        }}
+        options={operatorOptions}
+        size="$3"
+        compact
+      />
+
+      {needsValueInput && (
+        <YStack gap="$1">
+          {fieldType === "boolean" ? (
+            <Select
+              label={t("Value")}
+              value={value}
+              onValueChange={(v) => {
+                if (typeof v === "string") {
+                  onValueChange(v);
+                }
+              }}
+              options={booleanOptions}
+              placeholder={t("Select...")}
+              size="$3"
+              compact
+            />
+          ) : fieldType === "select" && options ? (
+            <Select
+              label={t("Value")}
+              value={value}
+              onValueChange={(v) => {
+                if (typeof v === "string") {
+                  onValueChange(v);
+                }
+              }}
+              options={selectOptions}
+              placeholder={t("Select...")}
+              size="$3"
+              compact
+            />
+          ) : (
+            <Input
+              label={t("Value")}
+              value={value}
+              onChangeText={onValueChange}
+              placeholder={fieldType === "date" ? t("YYYY-MM-DD") : t("Enter value...")}
+              size="$3"
+              compact
+              {...(fieldType === "number" && { keyboardType: "numeric" })}
+            />
+          )}
+        </YStack>
+      )}
+    </>
+  );
+}

package/src/components/SavedFilterDropdown.tsx

@@ -22,11 +22,9 @@ export function SavedFilterDropdown({
 }: SavedFilterDropdownProps) {
   const { knobProps } = useResolvedKnobs();
 
-  if (filters.length === 0) {
-    return null;
-  }
-
-  // Convert filters to forms Select options
+  // Convert filters to forms Select options. Hooks must run before the
+  // empty-state return: the first saved filter flipping 0 → 1 otherwise
+  // changes the hook count between renders and crashes the tree.
   const options = useMemo(
     () =>
       filters.map((filter) => ({
@@ -36,6 +34,10 @@ export function SavedFilterDropdown({
     [filters],
   );
 
+  if (filters.length === 0) {
+    return null;
+  }
+
   return (
     <Select
       value={selectedFilter?.name || ""}