@multiplatform.one/table 6.7.0 → 7.0.0

package/dist/jsx/components/DataTableFilters/index.mjs

@@ -1,16 +1,17 @@
-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.mjs";
+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.mjs";
 import { t } from "../../shared/t.mjs";
 import { useDataTableState } from "../DataTable/DataTableStateContext.mjs";
+import { FilterChip } from "../DataTableFilterChips/index.mjs";
+import { FilterOperatorValueEditor } from "../FilterOperatorValueEditor/index.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 function DataTableFilters(props) {
   const ctx = 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 ?? (() => {});
@@ -20,561 +21,203 @@ function DataTableFilters(props) {
     showFilterCount = true,
     compact = false
   } = props;
-  const [showFilterBuilder, setShowFilterBuilder] = useState(false);
+  const [builderOpen, setBuilderOpen] = useState(false);
+  const [editingId, setEditingId] = useState(null);
   const {
     knobProps
-  } = useResolvedKnobs();
+  } = useResolvedKnobs({
+    compact
+  });
   const canAddMoreFilters = filters.length < maxFilters;
-  const handleAddFilter = filter => {
+  const editingFilter = editingId ? filters.find(f => f.id === editingId) ?? null : null;
+  const triggerName = compact ? t("Add Filter") : 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__ */jsxs(XStack, {
+  const handleOpenChange = next => {
+    setBuilderOpen(next);
+    if (!next) setEditingId(null);
+  };
+  const 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,
-            onCancel: () => setShowFilterBuilder(false)
+            editingFilter,
+            onCommit: handleCommit,
+            onCancel: () => handleOpenChange(false),
+            canAdd: canAddMoreFilters || !!editingFilter
           })
-        })]
-      }), filters.length > 0 && /* @__PURE__ */jsx(Button, {
-        size: knobProps.sizeToken,
-        variant: "outlined",
+        })
+      }), !compact && filters.map(filter => {
+        const column = availableColumns.find(col => col.id === filter.columnId);
+        const label = getFilterChipLabel(column?.label ?? filter.label ?? filter.columnId, filter.value, column?.options);
+        return /* @__PURE__ */jsx(FilterChip, {
+          label,
+          onRemove: () => onRemoveFilter(filter.id),
+          onPress: () => 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: [/* @__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: () => 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, {}), 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((filter, index) => /* @__PURE__ */jsx(ActiveFilter, {
-          filter,
-          availableColumns,
-          onUpdate: updates => handleUpdateFilter(filter.id, updates),
-          onRemove: () => 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({
   availableColumns,
-  onAddFilter,
-  onCancel
+  editingFilter,
+  onCommit,
+  onCancel,
+  canAdd
 }) {
   const {
     knobProps
-  } = useResolvedKnobs();
-  const sz = knobProps.sizeToken;
-  const builderMinWidth = sz === "$3" ? 240 : sz === "$5" ? 360 : 300;
+  } = useResolvedKnobs({
+    compact: true
+  });
   const [selectedColumnId, setSelectedColumnId] = useState("");
-  const [selectedOperator, setSelectedOperator] = useState("is");
+  const [selectedOperator, setSelectedOperator] = useState("contains");
   const [filterValue, setFilterValue] = useState("");
-  const [filterValues, setFilterValues] = useState([]);
   const selectedColumn = availableColumns.find(col => col.id === selectedColumnId);
-  const availableOperators = 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;
+  useEffect(() => {
+    if (editingFilter) {
+      setSelectedColumnId(editingFilter.columnId);
+      setSelectedOperator(editingFilter.value.operator);
+      setFilterValue(String(editingFilter.value.value ?? ""));
+      return;
     }
-  }, [selectedColumn]);
-  const columnOptions = useMemo(() => availableColumns.map(col => ({
+    setSelectedColumnId("");
+    setSelectedOperator("contains");
+    setFilterValue("");
+  }, [editingFilter]);
+  const columnOptions = availableColumns.map(col => ({
     value: col.id,
     label: col.label
-  })), [availableColumns]);
-  const operatorOptions = 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: 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__ */jsxs(XStack, {
-        gap: "$2",
-        children: [/* @__PURE__ */jsx(Input, {
-          placeholder: t("Min value"),
-          value: filterValues[0] || "",
-          onChangeText: text => {
-            const newValues = [...filterValues];
-            newValues[0] = text;
-            setFilterValues(newValues);
-          }
-        }), /* @__PURE__ */jsx(Input, {
-          placeholder: 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__ */jsx(ScrollView, {
-          maxHeight: 120,
-          children: /* @__PURE__ */jsx(YStack, {
-            gap: "$1",
-            children: selectedColumn.options.map(option => /* @__PURE__ */jsxs(XStack, {
-              alignItems: "center",
-              gap: "$2",
-              children: [/* @__PURE__ */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__ */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: text => {
-          setFilterValues(text.split(",").map(v => 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: 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: v => {
-          if (typeof v === "string") {
-            setFilterValue(v);
-          }
-        },
-        options: selectedColumn.options.map(option => ({
-          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")
+      color: "$color12",
+      children: editingFilter ? t("Edit filter") : t("Add filter")
     }), /* @__PURE__ */jsx(Select, {
       label: 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(defaultOperatorForFilterType(col?.type ?? "text"));
+        setFilterValue("");
       },
       options: columnOptions,
-      placeholder: t("Select column")
-    }), selectedColumnId && /* @__PURE__ */jsx(Select, {
-      label: t("Condition"),
-      value: selectedOperator,
-      onValueChange: v => {
-        if (typeof v === "string") {
-          setSelectedOperator(v);
-        }
-      },
-      options: operatorOptions
-    }), selectedColumnId && renderValueInput(), /* @__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({
-  filter,
-  availableColumns,
-  onUpdate: _onUpdate,
-  onRemove,
-  index
-}) {
-  const {
-    knobProps
-  } = useResolvedKnobs();
-  const column = availableColumns.find(col => 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?.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({
-  type,
-  size
-}) {
-  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) {
-  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 ? t(label) : operator;
-}
 export { DataTableFilters };
 //# sourceMappingURL=index.mjs.map