@multiplatform.one/table 6.7.0 → 7.0.0

package/dist/esm/components/DataTableFilters/index.native.js

@@ -1,620 +1,247 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CalendarBlankIcon, CheckSquareIcon, FunnelIcon, HashIcon, PlusIcon, TextTIcon, XIcon } from "@phosphor-icons/react";
+import { FunnelIcon, PlusIcon } from "@phosphor-icons/react";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useState, useMemo } from "react";
-import { Button, Input, Select } from "@multiplatform.one/forms";
-import { Popover, ScrollView, Separator, Text, View, XStack, YStack } from "tamagui";
-import { getFilterDescription } from "../../utils/filterUtils.native.js";
+import { useEffect, useState } from "react";
+import { Button, FloatingPanel, Select } from "@multiplatform.one/forms";
+import { Text, View, XStack, YStack } from "tamagui";
+import { defaultOperatorForFilterType, getFilterChipLabel, operatorNeedsNoValue } from "../../utils/filterFields.native.js";
 import { t } from "../../shared/t.native.js";
 import { useDataTableState } from "../DataTable/DataTableStateContext.native.js";
+import { FilterChip } from "../DataTableFilterChips/index.native.js";
+import { FilterOperatorValueEditor } from "../FilterOperatorValueEditor/index.native.js";
 function DataTableFilters(props) {
-  var _ref, _props_filters, _ref1, _props_onFiltersChange, _ref2, _props_onAddFilter, _ref3, _props_onRemoveFilter, _ref4, _props_onClearFilters, _props_availableColumns;
+  var _ref, _props_filters, _ref1, _props_onAddFilter, _ref2, _props_onRemoveFilter, _ref3, _props_onClearFilters, _props_availableColumns, _filters_find;
   var ctx = useDataTableState();
   var filters = (_ref = (_props_filters = props.filters) !== null && _props_filters !== void 0 ? _props_filters : ctx === null || ctx === void 0 ? void 0 : ctx.state.filters) !== null && _ref !== void 0 ? _ref : [];
-  var onFiltersChange = (_ref1 = (_props_onFiltersChange = props.onFiltersChange) !== null && _props_onFiltersChange !== void 0 ? _props_onFiltersChange : ctx === null || ctx === void 0 ? void 0 : ctx.actions.setFilters) !== null && _ref1 !== void 0 ? _ref1 : function () {};
-  var onAddFilter = (_ref2 = (_props_onAddFilter = props.onAddFilter) !== null && _props_onAddFilter !== void 0 ? _props_onAddFilter : ctx === null || ctx === void 0 ? void 0 : ctx.actions.addFilter) !== null && _ref2 !== void 0 ? _ref2 : function () {};
-  var onRemoveFilter = (_ref3 = (_props_onRemoveFilter = props.onRemoveFilter) !== null && _props_onRemoveFilter !== void 0 ? _props_onRemoveFilter : ctx === null || ctx === void 0 ? void 0 : ctx.actions.removeFilter) !== null && _ref3 !== void 0 ? _ref3 : function () {};
-  var onClearFilters = (_ref4 = (_props_onClearFilters = props.onClearFilters) !== null && _props_onClearFilters !== void 0 ? _props_onClearFilters : ctx === null || ctx === void 0 ? void 0 : ctx.actions.clearFilters) !== null && _ref4 !== void 0 ? _ref4 : function () {};
+  var onAddFilter = (_ref1 = (_props_onAddFilter = props.onAddFilter) !== null && _props_onAddFilter !== void 0 ? _props_onAddFilter : ctx === null || ctx === void 0 ? void 0 : ctx.actions.addFilter) !== null && _ref1 !== void 0 ? _ref1 : function () {};
+  var onRemoveFilter = (_ref2 = (_props_onRemoveFilter = props.onRemoveFilter) !== null && _props_onRemoveFilter !== void 0 ? _props_onRemoveFilter : ctx === null || ctx === void 0 ? void 0 : ctx.actions.removeFilter) !== null && _ref2 !== void 0 ? _ref2 : function () {};
+  var onClearFilters = (_ref3 = (_props_onClearFilters = props.onClearFilters) !== null && _props_onClearFilters !== void 0 ? _props_onClearFilters : ctx === null || ctx === void 0 ? void 0 : ctx.actions.clearFilters) !== null && _ref3 !== void 0 ? _ref3 : function () {};
   var availableColumns = (_props_availableColumns = props.availableColumns) !== null && _props_availableColumns !== void 0 ? _props_availableColumns : [];
   var {
     maxFilters = 10,
     showFilterCount = true,
     compact = false
   } = props;
-  var [showFilterBuilder, setShowFilterBuilder] = useState(false);
+  var [builderOpen, setBuilderOpen] = useState(false);
+  var [editingId, setEditingId] = useState(null);
   var {
     knobProps
-  } = useResolvedKnobs();
+  } = useResolvedKnobs({
+    compact
+  });
   var canAddMoreFilters = filters.length < maxFilters;
-  var handleAddFilter = function handleAddFilter2(filter) {
+  var editingFilter = editingId ? (_filters_find = filters.find(function (f) {
+    return f.id === editingId;
+  })) !== null && _filters_find !== void 0 ? _filters_find : null : null;
+  var triggerName = compact ? t("Add Filter") : t("Filter");
+  var triggerLabel = showFilterCount && filters.length > 0 ? `${triggerName} (${filters.length})` : triggerName;
+  var handleCommit = function handleCommit2(filter) {
+    if (editingId) {
+      var _ref4, _props_onFiltersChange;
+      var updated = filters.map(function (row) {
+        return row.id === editingId ? {
+          ...row,
+          ...filter
+        } : row;
+      });
+      ((_ref4 = (_props_onFiltersChange = props.onFiltersChange) !== null && _props_onFiltersChange !== void 0 ? _props_onFiltersChange : ctx === null || ctx === void 0 ? void 0 : ctx.actions.setFilters) !== null && _ref4 !== void 0 ? _ref4 : function () {})(updated);
+      setEditingId(null);
+      return;
+    }
     onAddFilter(filter);
   };
-  var handleUpdateFilter = function handleUpdateFilter2(filterId, updates) {
-    var updatedFilters = filters.map(function (filter) {
-      return filter.id === filterId ? {
-        ...filter,
-        ...updates
-      } : filter;
-    });
-    onFiltersChange(updatedFilters);
+  var openBuilder = function openBuilder2(filterId) {
+    setEditingId(filterId !== null && filterId !== void 0 ? filterId : null);
+    setBuilderOpen(true);
+  };
+  var handleOpenChange = function handleOpenChange2(next) {
+    setBuilderOpen(next);
+    if (!next) setEditingId(null);
   };
-  if (compact) {
-    return /* @__PURE__ */_jsxs(XStack, {
+  var trigger = /* @__PURE__ */_jsx(Button, {
+    size: "$3",
+    compact: true,
+    ...(filters.length > 0 ? {
+      accent: true
+    } : {
+      variant: "outlined"
+    }),
+    icon: compact ? /* @__PURE__ */_jsx(PlusIcon, {
+      size: 14
+    }) : /* @__PURE__ */_jsx(FunnelIcon, {
+      size: 14,
+      weight: filters.length > 0 ? "fill" : "regular"
+    }),
+    "aria-label": triggerName,
+    "aria-expanded": builderOpen,
+    "aria-haspopup": "dialog",
+    children: triggerLabel
+  });
+  return /* @__PURE__ */_jsx(YStack, {
+    "data-testid": "data-table-filters",
+    "aria-label": t("Table filters"),
+    "aria-live": "polite",
+    children: /* @__PURE__ */_jsxs(XStack, {
+      flexWrap: "wrap",
       alignItems: "center",
-      gap: "$2",
-      children: [filters.length > 0 && showFilterCount && /* @__PURE__ */_jsx(View, {
-        backgroundColor: "$accentBackground",
-        paddingHorizontal: "$2",
-        paddingVertical: "$1",
-        borderRadius: knobProps.borderRadius.borderRadius,
-        children: /* @__PURE__ */_jsx(Text, {
-          color: "$accentColor",
-          fontSize: "$2",
-          children: filters.length
-        })
-      }), /* @__PURE__ */_jsxs(Popover, {
-        open: showFilterBuilder,
-        onOpenChange: setShowFilterBuilder,
-        children: [/* @__PURE__ */_jsx(Popover.Trigger, {
-          asChild: true,
-          children: /* @__PURE__ */_jsx(Button, {
-            size: knobProps.sizeToken,
-            variant: "outlined",
-            icon: /* @__PURE__ */_jsx(PlusIcon, {
-              size: 16
-            }),
-            disabled: !canAddMoreFilters,
-            children: t("Add Filter")
-          })
-        }), /* @__PURE__ */_jsx(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__ */_jsx(View, {
+        alignSelf: "flex-start",
+        flexShrink: 0,
+        children: /* @__PURE__ */_jsx(FloatingPanel, {
+          open: builderOpen,
+          onOpenChange: handleOpenChange,
+          trigger,
+          fitContent: true,
+          scrollable: false,
           children: /* @__PURE__ */_jsx(FilterBuilder, {
             availableColumns,
-            onAddFilter: handleAddFilter,
+            editingFilter,
+            onCommit: handleCommit,
             onCancel: function onCancel() {
-              return setShowFilterBuilder(false);
-            }
+              return handleOpenChange(false);
+            },
+            canAdd: canAddMoreFilters || !!editingFilter
           })
-        })]
-      }), filters.length > 0 && /* @__PURE__ */_jsx(Button, {
-        size: knobProps.sizeToken,
-        variant: "outlined",
+        })
+      }), !compact && filters.map(function (filter) {
+        var _ref4, _ref12;
+        var column = availableColumns.find(function (col) {
+          return col.id === filter.columnId;
+        });
+        var label = getFilterChipLabel((_ref4 = (_ref12 = column === null || column === void 0 ? void 0 : column.label) !== null && _ref12 !== void 0 ? _ref12 : filter.label) !== null && _ref4 !== void 0 ? _ref4 : filter.columnId, filter.value, column === null || column === void 0 ? void 0 : column.options);
+        return /* @__PURE__ */_jsx(FilterChip, {
+          label,
+          onRemove: function onRemove() {
+            return onRemoveFilter(filter.id);
+          },
+          onPress: function onPress() {
+            return openBuilder(filter.id);
+          }
+        }, filter.id);
+      }), compact && filters.length > 0 && /* @__PURE__ */_jsx(Button, {
+        size: "$2",
+        chromeless: true,
+        compact: true,
         onPress: onClearFilters,
-        icon: /* @__PURE__ */_jsx(XIcon, {
-          size: 16
-        }),
+        "aria-label": t("Clear"),
         children: t("Clear")
+      }), !compact && filters.length >= 2 && /* @__PURE__ */_jsx(Button, {
+        size: "$2",
+        chromeless: true,
+        compact: true,
+        onPress: onClearFilters,
+        "aria-label": t("Clear all"),
+        children: t("Clear all")
       })]
-    });
-  }
-  return /* @__PURE__ */_jsxs(YStack, {
-    ...knobProps.borderRadius,
-    gap: "$4",
-    padding: "$4",
-    backgroundColor: "$background",
-    borderWidth: 1,
-    borderColor: "$color6",
-    "aria-label": "Table filters",
-    "aria-live": "polite",
-    children: [/* Header */
-    /* @__PURE__ */_jsxs(XStack, {
-      alignItems: "center",
-      justifyContent: "space-between",
-      children: [/* @__PURE__ */_jsxs(XStack, {
-        alignItems: "center",
-        gap: "$2",
-        children: [/* @__PURE__ */_jsx(FunnelIcon, {
-          size: 16,
-          "aria-hidden": true
-        }), /* @__PURE__ */_jsx(Text, {
-          fontSize: "$4",
-          fontWeight: "600",
-          id: "filters-heading",
-          children: t("Filters")
-        }), showFilterCount && filters.length > 0 && /* @__PURE__ */_jsx(View, {
-          backgroundColor: "$accentBackground",
-          paddingHorizontal: "$2",
-          paddingVertical: "$1",
-          borderRadius: knobProps.borderRadius.borderRadius,
-          "aria-label": `${filters.length} active filters`,
-          children: /* @__PURE__ */_jsx(Text, {
-            color: "$accentColor",
-            fontSize: "$2",
-            children: filters.length
-          })
-        })]
-      }), /* @__PURE__ */_jsxs(XStack, {
-        ...{
-          render: "fieldset"
-        },
-        borderWidth: 0,
-        margin: 0,
-        padding: 0,
-        minWidth: 0,
-        alignItems: "center",
-        gap: "$2",
-        "aria-label": "Filter management actions",
-        children: [/* @__PURE__ */_jsxs(Popover, {
-          open: showFilterBuilder,
-          onOpenChange: setShowFilterBuilder,
-          children: [/* @__PURE__ */_jsx(Popover.Trigger, {
-            asChild: true,
-            children: /* @__PURE__ */_jsx(Button, {
-              size: knobProps.sizeToken,
-              variant: "outlined",
-              icon: /* @__PURE__ */_jsx(PlusIcon, {
-                size: 16
-              }),
-              disabled: !canAddMoreFilters,
-              "aria-label": "Add new filter",
-              "aria-expanded": showFilterBuilder,
-              "aria-haspopup": "dialog",
-              children: t("Add Filter")
-            })
-          }), /* @__PURE__ */_jsx(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__ */_jsx(FilterBuilder, {
-              availableColumns,
-              onAddFilter: handleAddFilter,
-              onCancel: function onCancel() {
-                return setShowFilterBuilder(false);
-              }
-            })
-          })]
-        }), filters.length > 0 && /* @__PURE__ */_jsx(Button, {
-          size: knobProps.sizeToken,
-          variant: "outlined",
-          onPress: onClearFilters,
-          icon: /* @__PURE__ */_jsx(XIcon, {
-            size: 16
-          }),
-          "aria-label": "Clear all filters",
-          children: t("Clear All")
-        })]
-      })]
-    }), /* @__PURE__ */_jsx(Separator, {}), /* Active Filters */
-    filters.length > 0 ? /* @__PURE__ */_jsx(ScrollView, {
-      maxHeight: 200,
-      children: /* @__PURE__ */_jsx(YStack, {
-        ...{
-          render: "ul"
-        },
-        gap: "$2",
-        padding: 0,
-        margin: 0,
-        "aria-label": "Active filters",
-        "aria-describedby": "filters-heading",
-        children: filters.map(function (filter, index) {
-          return /* @__PURE__ */_jsx(ActiveFilter, {
-            filter,
-            availableColumns,
-            onUpdate: function onUpdate(updates) {
-              return handleUpdateFilter(filter.id, updates);
-            },
-            onRemove: function onRemove() {
-              return onRemoveFilter(filter.id);
-            },
-            index
-          }, filter.id);
-        })
-      })
-    }) : /* @__PURE__ */_jsx(View, {
-      ...{
-        render: "output"
-      },
-      padding: "$4",
-      alignItems: "center",
-      "aria-live": "polite",
-      children: /* @__PURE__ */_jsx(Text, {
-        fontSize: "$3",
-        color: "$color10",
-        children: t("No filters applied")
-      })
-    })]
+    })
   });
 }
 function FilterBuilder(param) {
   var {
     availableColumns,
-    onAddFilter,
-    onCancel
+    editingFilter,
+    onCommit,
+    onCancel,
+    canAdd
   } = param;
   var {
     knobProps
-  } = useResolvedKnobs();
-  var sz = knobProps.sizeToken;
-  var builderMinWidth = sz === "$3" ? 240 : sz === "$5" ? 360 : 300;
+  } = useResolvedKnobs({
+    compact: true
+  });
   var [selectedColumnId, setSelectedColumnId] = useState("");
-  var [selectedOperator, setSelectedOperator] = useState("is");
+  var [selectedOperator, setSelectedOperator] = useState("contains");
   var [filterValue, setFilterValue] = useState("");
-  var [filterValues, setFilterValues] = useState([]);
   var selectedColumn = availableColumns.find(function (col) {
     return col.id === selectedColumnId;
   });
-  var availableOperators = useMemo(function () {
-    if (!selectedColumn) return [];
-    var 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;
+  useEffect(function () {
+    if (editingFilter) {
+      var _editingFilter_value_value;
+      setSelectedColumnId(editingFilter.columnId);
+      setSelectedOperator(editingFilter.value.operator);
+      setFilterValue(String((_editingFilter_value_value = editingFilter.value.value) !== null && _editingFilter_value_value !== void 0 ? _editingFilter_value_value : ""));
+      return;
     }
-  }, [selectedColumn]);
-  var columnOptions = useMemo(function () {
-    return availableColumns.map(function (col) {
-      return {
-        value: col.id,
-        label: col.label
-      };
-    });
-  }, [availableColumns]);
-  var operatorOptions = useMemo(function () {
-    return availableOperators.map(function (op) {
-      return {
-        value: op,
-        label: getOperatorLabel(op)
-      };
-    });
-  }, [availableOperators]);
-  var handleAddFilter = function handleAddFilter2() {
+    setSelectedColumnId("");
+    setSelectedOperator("contains");
+    setFilterValue("");
+  }, [editingFilter]);
+  var columnOptions = availableColumns.map(function (col) {
+    return {
+      value: col.id,
+      label: col.label
+    };
+  });
+  var handleCommit = function handleCommit2() {
     if (!selectedColumnId || !selectedOperator) return;
-    var filterValueObj = {
+    var value = {
       operator: selectedOperator,
-      value: null
+      value: 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 === null || selectedColumn === void 0 ? void 0 : selectedColumn.label
     });
     setSelectedColumnId("");
-    setSelectedOperator("is");
+    setSelectedOperator("contains");
     setFilterValue("");
-    setFilterValues([]);
-  };
-  var renderValueInput = function renderValueInput2() {
-    if (!selectedColumn || ["isEmpty", "isNotEmpty"].includes(selectedOperator)) {
-      return null;
-    }
-    if (["isBetween", "isNotBetween"].includes(selectedOperator)) {
-      return /* @__PURE__ */_jsxs(XStack, {
-        gap: "$2",
-        children: [/* @__PURE__ */_jsx(Input, {
-          placeholder: t("Min value"),
-          value: filterValues[0] || "",
-          onChangeText: function onChangeText(text) {
-            var newValues = [...filterValues];
-            newValues[0] = text;
-            setFilterValues(newValues);
-          }
-        }), /* @__PURE__ */_jsx(Input, {
-          placeholder: t("Max value"),
-          value: filterValues[1] || "",
-          onChangeText: function onChangeText(text) {
-            var newValues = [...filterValues];
-            newValues[1] = text;
-            setFilterValues(newValues);
-          }
-        })]
-      });
-    }
-    if (["isAnyOf", "isNoneOf"].includes(selectedOperator)) {
-      if (selectedColumn.options) {
-        return /* @__PURE__ */_jsx(ScrollView, {
-          maxHeight: 120,
-          children: /* @__PURE__ */_jsx(YStack, {
-            gap: "$1",
-            children: selectedColumn.options.map(function (option) {
-              return /* @__PURE__ */_jsxs(XStack, {
-                alignItems: "center",
-                gap: "$2",
-                children: [/* @__PURE__ */_jsx("input", {
-                  type: "checkbox",
-                  checked: filterValues.includes(option.value),
-                  onChange: function onChange(e) {
-                    if (e.target.checked) {
-                      setFilterValues([...filterValues, option.value]);
-                    } else {
-                      setFilterValues(filterValues.filter(function (v) {
-                        return v !== option.value;
-                      }));
-                    }
-                  }
-                }), /* @__PURE__ */_jsx(Text, {
-                  fontSize: "$3",
-                  children: option.label
-                }), /* @__PURE__ */_jsx(View, {
-                  backgroundColor: "$color5",
-                  paddingHorizontal: "$1",
-                  paddingVertical: "$0.5",
-                  borderRadius: "$1",
-                  children: /* @__PURE__ */_jsx(Text, {
-                    color: "$color10",
-                    fontSize: "$1",
-                    children: option.count
-                  })
-                })]
-              }, String(option.value));
-            })
-          })
-        });
-      }
-      return /* @__PURE__ */_jsx(Input, {
-        placeholder: t("Enter values separated by commas"),
-        value: filterValues.join(", "),
-        onChangeText: function onChangeText(text) {
-          setFilterValues(text.split(",").map(function (v) {
-            return v.trim();
-          }));
-        }
-      });
-    }
-    if (selectedColumn.type === "date") {
-      return /* @__PURE__ */_jsx(Input, {
-        label: t("Value"),
-        placeholder: t("YYYY-MM-DD"),
-        value: filterValue,
-        onChangeText: setFilterValue
-      });
-    }
-    if (selectedColumn.type === "boolean") {
-      return /* @__PURE__ */_jsx(Select, {
-        label: t("Value"),
-        value: filterValue,
-        onValueChange: function onValueChange(v) {
-          if (typeof v === "string") {
-            setFilterValue(v);
-          }
-        },
-        options: [{
-          value: "true",
-          label: t("True")
-        }, {
-          value: "false",
-          label: t("False")
-        }],
-        placeholder: t("Select value")
-      });
-    }
-    if (selectedColumn.options) {
-      return /* @__PURE__ */_jsx(Select, {
-        label: t("Value"),
-        value: filterValue,
-        onValueChange: function onValueChange(v) {
-          if (typeof v === "string") {
-            setFilterValue(v);
-          }
-        },
-        options: selectedColumn.options.map(function (option) {
-          return {
-            value: option.value.toString(),
-            label: option.label
-          };
-        }),
-        placeholder: t("Select value")
-      });
-    }
-    return /* @__PURE__ */_jsx(Input, {
-      label: t("Value"),
-      placeholder: t("Enter value"),
-      value: filterValue,
-      onChangeText: setFilterValue,
-      ...(selectedColumn.type === "number" && {
-        keyboardType: "numeric"
-      })
-    });
   };
   return /* @__PURE__ */_jsxs(YStack, {
     ...knobProps.panelPadding,
-    gap: "$4",
-    minWidth: builderMinWidth,
+    gap: "$3",
+    minWidth: 280,
+    maxWidth: 360,
     children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$4",
+      fontSize: "$3",
       fontWeight: "600",
-      children: t("Add Filter")
-    }), /* Column Selection */
-    /* @__PURE__ */_jsx(Select, {
+      color: "$color12",
+      children: editingFilter ? t("Edit filter") : t("Add filter")
+    }), /* @__PURE__ */_jsx(Select, {
       label: t("Column"),
       value: selectedColumnId,
       onValueChange: function onValueChange(v) {
-        if (typeof v === "string") {
-          setSelectedColumnId(v);
-        }
+        var _ref;
+        if (typeof v !== "string") return;
+        setSelectedColumnId(v);
+        var col = availableColumns.find(function (c) {
+          return c.id === v;
+        });
+        setSelectedOperator(defaultOperatorForFilterType((_ref = col === null || col === void 0 ? void 0 : col.type) !== null && _ref !== void 0 ? _ref : "text"));
+        setFilterValue("");
       },
       options: columnOptions,
-      placeholder: t("Select column")
-    }), /* Operator Selection */
-    selectedColumnId && /* @__PURE__ */_jsx(Select, {
-      label: t("Condition"),
-      value: selectedOperator,
-      onValueChange: function onValueChange(v) {
-        if (typeof v === "string") {
-          setSelectedOperator(v);
-        }
-      },
-      options: operatorOptions
-    }), /* Value Input */
-    selectedColumnId && renderValueInput(), /* Actions */
-    /* @__PURE__ */_jsxs(XStack, {
+      placeholder: t("Select column"),
+      size: "$3",
+      compact: true
+    }), selectedColumn ? /* @__PURE__ */_jsx(FilterOperatorValueEditor, {
+      fieldType: selectedColumn.type,
+      operator: selectedOperator,
+      value: filterValue,
+      onOperatorChange: setSelectedOperator,
+      onValueChange: setFilterValue,
+      options: selectedColumn.options
+    }) : null, /* @__PURE__ */_jsxs(XStack, {
       gap: "$2",
       justifyContent: "flex-end",
       children: [/* @__PURE__ */_jsx(Button, {
-        size: knobProps.sizeToken,
+        size: "$3",
+        compact: true,
         variant: "outlined",
         onPress: onCancel,
         children: t("Cancel")
       }), /* @__PURE__ */_jsx(Button, {
-        size: knobProps.sizeToken,
-        onPress: handleAddFilter,
-        disabled: !selectedColumnId || !selectedOperator,
-        children: t("Add Filter")
+        size: "$3",
+        compact: true,
+        accent: true,
+        onPress: handleCommit,
+        disabled: !selectedColumnId || !selectedOperator || !canAdd,
+        children: editingFilter ? t("Update") : t("Add filter")
       })]
     })]
   });
 }
-function ActiveFilter(param) {
-  var {
-    filter,
-    availableColumns,
-    onUpdate: _onUpdate,
-    onRemove,
-    index
-  } = param;
-  var {
-    knobProps
-  } = useResolvedKnobs();
-  var column = availableColumns.find(function (col) {
-    return col.id === filter.columnId;
-  });
-  return /* @__PURE__ */_jsxs(XStack, {
-    ...{
-      render: "li"
-    },
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: "$3",
-    backgroundColor: "$color2",
-    ...knobProps.borderRadius,
-    borderColor: "$color6",
-    "aria-label": `Filter ${index + 1}: ${getFilterDescription(filter)}`,
-    children: [/* @__PURE__ */_jsxs(XStack, {
-      alignItems: "center",
-      gap: "$2",
-      flex: 1,
-      children: [/* @__PURE__ */_jsx(ColumnTypeIcon, {
-        type: (column === null || column === void 0 ? void 0 : column.type) || "text",
-        size: 14
-      }), /* @__PURE__ */_jsx(Text, {
-        fontSize: "$3",
-        color: "$color10",
-        children: getFilterDescription(filter)
-      })]
-    }), /* @__PURE__ */_jsx(Button, {
-      size: "$2",
-      variant: "outlined",
-      onPress: onRemove,
-      icon: /* @__PURE__ */_jsx(XIcon, {
-        size: 16
-      }),
-      "aria-label": `Remove filter: ${getFilterDescription(filter)}`
-    })]
-  });
-}
-function ColumnTypeIcon(param) {
-  var {
-    type,
-    size
-  } = param;
-  switch (type) {
-    case "text":
-      return /* @__PURE__ */_jsx(TextTIcon, {
-        size,
-        color: "$color10"
-      });
-    case "number":
-      return /* @__PURE__ */_jsx(HashIcon, {
-        size,
-        color: "$color10"
-      });
-    case "date":
-      return /* @__PURE__ */_jsx(CalendarBlankIcon, {
-        size,
-        color: "$color10"
-      });
-    case "boolean":
-      return /* @__PURE__ */_jsx(CheckSquareIcon, {
-        size,
-        color: "$color10"
-      });
-    default:
-      return /* @__PURE__ */_jsx(TextTIcon, {
-        size,
-        color: "$color10"
-      });
-  }
-}
-function getOperatorLabel(operator) {
-  var 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"
-  };
-  var label = labels[operator];
-  return label ? t(label) : operator;
-}
 export { DataTableFilters };
 //# sourceMappingURL=index.native.js.map