@multiplatform.one/table 6.7.0 → 7.0.0

package/dist/cjs/components/DataTableFilters/index.cjs

@@ -30,14 +30,15 @@ var import_theme = require("@multiplatform.one/theme");
 var import_react2 = require("react");
 var import_forms = require("@multiplatform.one/forms");
 var import_tamagui = require("tamagui");
-var import_filterUtils = require("../../utils/filterUtils.cjs");
+var import_filterFields = require("../../utils/filterFields.cjs");
 var import_t = require("../../shared/t.cjs");
 var import_DataTableStateContext = require("../DataTable/DataTableStateContext.cjs");
+var import_DataTableFilterChips = require("../DataTableFilterChips/index.cjs");
+var import_FilterOperatorValueEditor = require("../FilterOperatorValueEditor/index.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function DataTableFilters(props) {
   const ctx = (0, import_DataTableStateContext.useDataTableState)();
   const filters = props.filters ?? ctx?.state.filters ?? [];
-  const onFiltersChange = props.onFiltersChange ?? ctx?.actions.setFilters ?? (() => {});
   const onAddFilter = props.onAddFilter ?? ctx?.actions.addFilter ?? (() => {});
   const onRemoveFilter = props.onRemoveFilter ?? ctx?.actions.removeFilter ?? (() => {});
   const onClearFilters = props.onClearFilters ?? ctx?.actions.clearFilters ?? (() => {});
@@ -47,559 +48,201 @@ function DataTableFilters(props) {
     showFilterCount = true,
     compact = false
   } = props;
-  const [showFilterBuilder, setShowFilterBuilder] = (0, import_react2.useState)(false);
+  const [builderOpen, setBuilderOpen] = (0, import_react2.useState)(false);
+  const [editingId, setEditingId] = (0, import_react2.useState)(null);
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_theme.useResolvedKnobs)({
+    compact
+  });
   const canAddMoreFilters = filters.length < maxFilters;
-  const handleAddFilter = filter => {
+  const editingFilter = editingId ? filters.find(f => f.id === editingId) ?? null : null;
+  const triggerName = compact ? (0, import_t.t)("Add Filter") : (0, import_t.t)("Filter");
+  const triggerLabel = showFilterCount && filters.length > 0 ? `${triggerName} (${filters.length})` : triggerName;
+  const handleCommit = filter => {
+    if (editingId) {
+      const updated = filters.map(row => row.id === editingId ? {
+        ...row,
+        ...filter
+      } : row);
+      (props.onFiltersChange ?? ctx?.actions.setFilters ?? (() => {}))(updated);
+      setEditingId(null);
+      return;
+    }
     onAddFilter(filter);
   };
-  const handleUpdateFilter = (filterId, updates) => {
-    const updatedFilters = filters.map(filter => filter.id === filterId ? {
-      ...filter,
-      ...updates
-    } : filter);
-    onFiltersChange(updatedFilters);
+  const openBuilder = filterId => {
+    setEditingId(filterId ?? null);
+    setBuilderOpen(true);
   };
-  if (compact) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+  const handleOpenChange = next => {
+    setBuilderOpen(next);
+    if (!next) setEditingId(null);
+  };
+  const trigger = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+    size: "$3",
+    compact: true,
+    ...(filters.length > 0 ? {
+      accent: true
+    } : {
+      variant: "outlined"
+    }),
+    icon: compact ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
+      size: 14
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FunnelIcon, {
+      size: 14,
+      weight: filters.length > 0 ? "fill" : "regular"
+    }),
+    "aria-label": triggerName,
+    "aria-expanded": builderOpen,
+    "aria-haspopup": "dialog",
+    children: triggerLabel
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    "data-testid": "data-table-filters",
+    "aria-label": (0, import_t.t)("Table filters"),
+    "aria-live": "polite",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      flexWrap: "wrap",
       alignItems: "center",
-      gap: "$2",
-      children: [filters.length > 0 && showFilterCount && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        backgroundColor: "$accentBackground",
-        paddingHorizontal: "$2",
-        paddingVertical: "$1",
-        borderRadius: knobProps.borderRadius.borderRadius,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          color: "$accentColor",
-          fontSize: "$2",
-          children: filters.length
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
-        open: showFilterBuilder,
-        onOpenChange: setShowFilterBuilder,
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
-          asChild: true,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-            size: knobProps.sizeToken,
-            variant: "outlined",
-            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
-              size: 16
-            }),
-            disabled: !canAddMoreFilters,
-            children: (0, import_t.t)("Add Filter")
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
-          ...knobProps.borderRadius,
-          borderWidth: 1,
-          borderColor: "$color6",
-          backgroundColor: "$background",
-          enterStyle: {
-            x: 0,
-            y: -10,
-            opacity: 0
-          },
-          exitStyle: {
-            x: 0,
-            y: -10,
-            opacity: 0
-          },
-          transition: ["quick", {
-            opacity: {
-              overshootClamping: true
-            }
-          }],
+      ...knobProps.gap,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        alignSelf: "flex-start",
+        flexShrink: 0,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.FloatingPanel, {
+          open: builderOpen,
+          onOpenChange: handleOpenChange,
+          trigger,
+          fitContent: true,
+          scrollable: false,
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(FilterBuilder, {
             availableColumns,
-            onAddFilter: handleAddFilter,
-            onCancel: () => setShowFilterBuilder(false)
+            editingFilter,
+            onCommit: handleCommit,
+            onCancel: () => handleOpenChange(false),
+            canAdd: canAddMoreFilters || !!editingFilter
           })
-        })]
-      }), filters.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-        size: knobProps.sizeToken,
-        variant: "outlined",
+        })
+      }), !compact && filters.map(filter => {
+        const column = availableColumns.find(col => col.id === filter.columnId);
+        const label = (0, import_filterFields.getFilterChipLabel)(column?.label ?? filter.label ?? filter.columnId, filter.value, column?.options);
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableFilterChips.FilterChip, {
+          label,
+          onRemove: () => onRemoveFilter(filter.id),
+          onPress: () => openBuilder(filter.id)
+        }, filter.id);
+      }), compact && filters.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: "$2",
+        chromeless: true,
+        compact: true,
         onPress: onClearFilters,
-        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
-          size: 16
-        }),
+        "aria-label": (0, import_t.t)("Clear"),
         children: (0, import_t.t)("Clear")
+      }), !compact && filters.length >= 2 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: "$2",
+        chromeless: true,
+        compact: true,
+        onPress: onClearFilters,
+        "aria-label": (0, import_t.t)("Clear all"),
+        children: (0, import_t.t)("Clear all")
       })]
-    });
-  }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    ...knobProps.borderRadius,
-    gap: "$4",
-    padding: "$4",
-    backgroundColor: "$background",
-    borderWidth: 1,
-    borderColor: "$color6",
-    "aria-label": "Table filters",
-    "aria-live": "polite",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-      alignItems: "center",
-      justifyContent: "space-between",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-        alignItems: "center",
-        gap: "$2",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FunnelIcon, {
-          size: 16,
-          "aria-hidden": true
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: "$4",
-          fontWeight: "600",
-          id: "filters-heading",
-          children: (0, import_t.t)("Filters")
-        }), showFilterCount && filters.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-          backgroundColor: "$accentBackground",
-          paddingHorizontal: "$2",
-          paddingVertical: "$1",
-          borderRadius: knobProps.borderRadius.borderRadius,
-          "aria-label": `${filters.length} active filters`,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            color: "$accentColor",
-            fontSize: "$2",
-            children: filters.length
-          })
-        })]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-        ...{
-          render: "fieldset"
-        },
-        borderWidth: 0,
-        margin: 0,
-        padding: 0,
-        minWidth: 0,
-        alignItems: "center",
-        gap: "$2",
-        "aria-label": "Filter management actions",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
-          open: showFilterBuilder,
-          onOpenChange: setShowFilterBuilder,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
-            asChild: true,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-              size: knobProps.sizeToken,
-              variant: "outlined",
-              icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
-                size: 16
-              }),
-              disabled: !canAddMoreFilters,
-              "aria-label": "Add new filter",
-              "aria-expanded": showFilterBuilder,
-              "aria-haspopup": "dialog",
-              children: (0, import_t.t)("Add Filter")
-            })
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
-            ...knobProps.borderRadius,
-            borderWidth: 1,
-            borderColor: "$color6",
-            backgroundColor: "$background",
-            enterStyle: {
-              x: 0,
-              y: -10,
-              opacity: 0
-            },
-            exitStyle: {
-              x: 0,
-              y: -10,
-              opacity: 0
-            },
-            transition: ["quick", {
-              opacity: {
-                opacity: {
-                  overshootClamping: true
-                }
-              }
-            }],
-            maxWidth: 400,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(FilterBuilder, {
-              availableColumns,
-              onAddFilter: handleAddFilter,
-              onCancel: () => setShowFilterBuilder(false)
-            })
-          })]
-        }), filters.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-          size: knobProps.sizeToken,
-          variant: "outlined",
-          onPress: onClearFilters,
-          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
-            size: 16
-          }),
-          "aria-label": "Clear all filters",
-          children: (0, import_t.t)("Clear All")
-        })]
-      })]
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), filters.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
-      maxHeight: 200,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-        ...{
-          render: "ul"
-        },
-        gap: "$2",
-        padding: 0,
-        margin: 0,
-        "aria-label": "Active filters",
-        "aria-describedby": "filters-heading",
-        children: filters.map((filter, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(ActiveFilter, {
-          filter,
-          availableColumns,
-          onUpdate: updates => handleUpdateFilter(filter.id, updates),
-          onRemove: () => onRemoveFilter(filter.id),
-          index
-        }, filter.id))
-      })
-    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      ...{
-        render: "output"
-      },
-      padding: "$4",
-      alignItems: "center",
-      "aria-live": "polite",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        fontSize: "$3",
-        color: "$color10",
-        children: (0, import_t.t)("No filters applied")
-      })
-    })]
+    })
   });
 }
 function FilterBuilder({
   availableColumns,
-  onAddFilter,
-  onCancel
+  editingFilter,
+  onCommit,
+  onCancel,
+  canAdd
 }) {
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  const sz = knobProps.sizeToken;
-  const builderMinWidth = sz === "$3" ? 240 : sz === "$5" ? 360 : 300;
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
   const [selectedColumnId, setSelectedColumnId] = (0, import_react2.useState)("");
-  const [selectedOperator, setSelectedOperator] = (0, import_react2.useState)("is");
+  const [selectedOperator, setSelectedOperator] = (0, import_react2.useState)("contains");
   const [filterValue, setFilterValue] = (0, import_react2.useState)("");
-  const [filterValues, setFilterValues] = (0, import_react2.useState)([]);
   const selectedColumn = availableColumns.find(col => col.id === selectedColumnId);
-  const availableOperators = (0, import_react2.useMemo)(() => {
-    if (!selectedColumn) return [];
-    const baseOperators = ["is", "isNot"];
-    switch (selectedColumn.type) {
-      case "text":
-        return [...baseOperators, "contains", "doesNotContain", "startsWith", "endsWith", "isEmpty", "isNotEmpty"];
-      case "number":
-        return [...baseOperators, "isLessThan", "isGreaterThan", "isLessThanOrEqual", "isGreaterThanOrEqual", "isBetween", "isNotBetween"];
-      case "date":
-        return [...baseOperators, "isBefore", "isAfter", "isOnOrBefore", "isOnOrAfter", "isBetween", "isNotBetween"];
-      case "boolean":
-        return baseOperators;
-      default:
-        return baseOperators;
+  (0, import_react2.useEffect)(() => {
+    if (editingFilter) {
+      setSelectedColumnId(editingFilter.columnId);
+      setSelectedOperator(editingFilter.value.operator);
+      setFilterValue(String(editingFilter.value.value ?? ""));
+      return;
     }
-  }, [selectedColumn]);
-  const columnOptions = (0, import_react2.useMemo)(() => availableColumns.map(col => ({
+    setSelectedColumnId("");
+    setSelectedOperator("contains");
+    setFilterValue("");
+  }, [editingFilter]);
+  const columnOptions = availableColumns.map(col => ({
     value: col.id,
     label: col.label
-  })), [availableColumns]);
-  const operatorOptions = (0, import_react2.useMemo)(() => availableOperators.map(op => ({
-    value: op,
-    label: getOperatorLabel(op)
-  })), [availableOperators]);
-  const handleAddFilter = () => {
+  }));
+  const handleCommit = () => {
     if (!selectedColumnId || !selectedOperator) return;
-    const filterValueObj = {
+    const value = {
       operator: selectedOperator,
-      value: null
+      value: (0, import_filterFields.operatorNeedsNoValue)(selectedOperator) ? null : filterValue
     };
-    if (["isBetween", "isNotBetween"].includes(selectedOperator)) {
-      filterValueObj.values = filterValues;
-    } else if (["isAnyOf", "isNoneOf"].includes(selectedOperator)) {
-      filterValueObj.values = filterValues;
-    } else if (!["isEmpty", "isNotEmpty"].includes(selectedOperator)) {
-      filterValueObj.value = filterValue;
-    }
-    onAddFilter({
+    onCommit({
       columnId: selectedColumnId,
-      value: filterValueObj,
+      value,
       label: selectedColumn?.label
     });
     setSelectedColumnId("");
-    setSelectedOperator("is");
+    setSelectedOperator("contains");
     setFilterValue("");
-    setFilterValues([]);
-  };
-  const renderValueInput = () => {
-    if (!selectedColumn || ["isEmpty", "isNotEmpty"].includes(selectedOperator)) {
-      return null;
-    }
-    if (["isBetween", "isNotBetween"].includes(selectedOperator)) {
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-        gap: "$2",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-          placeholder: (0, import_t.t)("Min value"),
-          value: filterValues[0] || "",
-          onChangeText: text => {
-            const newValues = [...filterValues];
-            newValues[0] = text;
-            setFilterValues(newValues);
-          }
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-          placeholder: (0, import_t.t)("Max value"),
-          value: filterValues[1] || "",
-          onChangeText: text => {
-            const newValues = [...filterValues];
-            newValues[1] = text;
-            setFilterValues(newValues);
-          }
-        })]
-      });
-    }
-    if (["isAnyOf", "isNoneOf"].includes(selectedOperator)) {
-      if (selectedColumn.options) {
-        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
-          maxHeight: 120,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-            gap: "$1",
-            children: selectedColumn.options.map(option => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-              alignItems: "center",
-              gap: "$2",
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("input", {
-                type: "checkbox",
-                checked: filterValues.includes(option.value),
-                onChange: e => {
-                  if (e.target.checked) {
-                    setFilterValues([...filterValues, option.value]);
-                  } else {
-                    setFilterValues(filterValues.filter(v => v !== option.value));
-                  }
-                }
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                fontSize: "$3",
-                children: option.label
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-                backgroundColor: "$color5",
-                paddingHorizontal: "$1",
-                paddingVertical: "$0.5",
-                borderRadius: "$1",
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                  color: "$color10",
-                  fontSize: "$1",
-                  children: option.count
-                })
-              })]
-            }, String(option.value)))
-          })
-        });
-      }
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-        placeholder: (0, import_t.t)("Enter values separated by commas"),
-        value: filterValues.join(", "),
-        onChangeText: text => {
-          setFilterValues(text.split(",").map(v => v.trim()));
-        }
-      });
-    }
-    if (selectedColumn.type === "date") {
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-        label: (0, import_t.t)("Value"),
-        placeholder: (0, import_t.t)("YYYY-MM-DD"),
-        value: filterValue,
-        onChangeText: setFilterValue
-      });
-    }
-    if (selectedColumn.type === "boolean") {
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
-        label: (0, import_t.t)("Value"),
-        value: filterValue,
-        onValueChange: v => {
-          if (typeof v === "string") {
-            setFilterValue(v);
-          }
-        },
-        options: [{
-          value: "true",
-          label: (0, import_t.t)("True")
-        }, {
-          value: "false",
-          label: (0, import_t.t)("False")
-        }],
-        placeholder: (0, import_t.t)("Select value")
-      });
-    }
-    if (selectedColumn.options) {
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
-        label: (0, import_t.t)("Value"),
-        value: filterValue,
-        onValueChange: v => {
-          if (typeof v === "string") {
-            setFilterValue(v);
-          }
-        },
-        options: selectedColumn.options.map(option => ({
-          value: option.value.toString(),
-          label: option.label
-        })),
-        placeholder: (0, import_t.t)("Select value")
-      });
-    }
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-      label: (0, import_t.t)("Value"),
-      placeholder: (0, import_t.t)("Enter value"),
-      value: filterValue,
-      onChangeText: setFilterValue,
-      ...(selectedColumn.type === "number" && {
-        keyboardType: "numeric"
-      })
-    });
   };
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     ...knobProps.panelPadding,
-    gap: "$4",
-    minWidth: builderMinWidth,
+    gap: "$3",
+    minWidth: 280,
+    maxWidth: 360,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$4",
+      fontSize: "$3",
       fontWeight: "600",
-      children: (0, import_t.t)("Add Filter")
+      color: "$color12",
+      children: editingFilter ? (0, import_t.t)("Edit filter") : (0, import_t.t)("Add filter")
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
       label: (0, import_t.t)("Column"),
       value: selectedColumnId,
       onValueChange: v => {
-        if (typeof v === "string") {
-          setSelectedColumnId(v);
-        }
+        if (typeof v !== "string") return;
+        setSelectedColumnId(v);
+        const col = availableColumns.find(c => c.id === v);
+        setSelectedOperator((0, import_filterFields.defaultOperatorForFilterType)(col?.type ?? "text"));
+        setFilterValue("");
       },
       options: columnOptions,
-      placeholder: (0, import_t.t)("Select column")
-    }), selectedColumnId && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
-      label: (0, import_t.t)("Condition"),
-      value: selectedOperator,
-      onValueChange: v => {
-        if (typeof v === "string") {
-          setSelectedOperator(v);
-        }
-      },
-      options: operatorOptions
-    }), selectedColumnId && renderValueInput(), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      placeholder: (0, import_t.t)("Select column"),
+      size: "$3",
+      compact: true
+    }), selectedColumn ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FilterOperatorValueEditor.FilterOperatorValueEditor, {
+      fieldType: selectedColumn.type,
+      operator: selectedOperator,
+      value: filterValue,
+      onOperatorChange: setSelectedOperator,
+      onValueChange: setFilterValue,
+      options: selectedColumn.options
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
       gap: "$2",
       justifyContent: "flex-end",
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-        size: knobProps.sizeToken,
+        size: "$3",
+        compact: true,
         variant: "outlined",
         onPress: onCancel,
         children: (0, import_t.t)("Cancel")
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-        size: knobProps.sizeToken,
-        onPress: handleAddFilter,
-        disabled: !selectedColumnId || !selectedOperator,
-        children: (0, import_t.t)("Add Filter")
-      })]
-    })]
-  });
-}
-function ActiveFilter({
-  filter,
-  availableColumns,
-  onUpdate: _onUpdate,
-  onRemove,
-  index
-}) {
-  const {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  const column = availableColumns.find(col => col.id === filter.columnId);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-    ...{
-      render: "li"
-    },
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: "$3",
-    ...{
-      backgroundColor: "$color2"
-    },
-    ...knobProps.borderRadius,
-    borderColor: "$color6",
-    "aria-label": `Filter ${index + 1}: ${(0, import_filterUtils.getFilterDescription)(filter)}`,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-      alignItems: "center",
-      gap: "$2",
-      flex: 1,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ColumnTypeIcon, {
-        type: column?.type || "text",
-        size: 14
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        fontSize: "$3",
-        color: "$color10",
-        children: (0, import_filterUtils.getFilterDescription)(filter)
+        size: "$3",
+        compact: true,
+        accent: true,
+        onPress: handleCommit,
+        disabled: !selectedColumnId || !selectedOperator || !canAdd,
+        children: editingFilter ? (0, import_t.t)("Update") : (0, import_t.t)("Add filter")
       })]
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-      size: "$2",
-      variant: "outlined",
-      onPress: onRemove,
-      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
-        size: 16
-      }),
-      "aria-label": `Remove filter: ${(0, import_filterUtils.getFilterDescription)(filter)}`
     })]
   });
-}
-function ColumnTypeIcon({
-  type,
-  size
-}) {
-  switch (type) {
-    case "text":
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.TextTIcon, {
-        size,
-        color: "$color10"
-      });
-    case "number":
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HashIcon, {
-        size,
-        color: "$color10"
-      });
-    case "date":
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarBlankIcon, {
-        size,
-        color: "$color10"
-      });
-    case "boolean":
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CheckSquareIcon, {
-        size,
-        color: "$color10"
-      });
-    default:
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.TextTIcon, {
-        size,
-        color: "$color10"
-      });
-  }
-}
-function getOperatorLabel(operator) {
-  const labels = {
-    // Text
-    contains: "Contains",
-    doesNotContain: "Does not contain",
-    is: "Is",
-    isNot: "Is not",
-    startsWith: "Starts with",
-    endsWith: "Ends with",
-    isEmpty: "Is empty",
-    isNotEmpty: "Is not empty",
-    // Number
-    isLessThan: "Is less than",
-    isGreaterThan: "Is greater than",
-    isLessThanOrEqual: "Is less than or equal to",
-    isGreaterThanOrEqual: "Is greater than or equal to",
-    isBetween: "Is between",
-    isNotBetween: "Is not between",
-    // Date
-    isBefore: "Is before",
-    isAfter: "Is after",
-    isOnOrBefore: "Is on or before",
-    isOnOrAfter: "Is on or after",
-    // Option
-    isAnyOf: "Is any of",
-    isNoneOf: "Is none of"
-  };
-  const label = labels[operator];
-  return label ? (0, import_t.t)(label) : operator;
 }