@kopexa/filter 0.0.17 → 0.0.19

package/dist/{chunk-WUUOSJHW.mjs → chunk-3ZBNWXRA.mjs}

@@ -15,7 +15,11 @@ import { useSafeIntl } from "@kopexa/i18n";
 import { Input } from "@kopexa/input";
 import { Select } from "@kopexa/select";
 import { jsx, jsxs } from "react/jsx-runtime";
-function FilterValueEditor({ filter, field }) {
+function FilterValueEditor({
+  filter,
+  field,
+  hideOperator
+}) {
   var _a;
   const { styles, updateFilter, setEditingFilterId } = useFilterContext();
   const t = useSafeIntl();
@@ -40,7 +44,7 @@ function FilterValueEditor({ filter, field }) {
   const needsValue = filter.operator !== "is_empty" && filter.operator !== "is_not_empty";
   return /* @__PURE__ */ jsxs("div", { "data-slot": "filter-value-editor", children: [
     /* @__PURE__ */ jsx("div", { className: styles.editorHeader(), children: /* @__PURE__ */ jsx("span", { className: styles.editorTitle(), children: field.label }) }),
-    operators.length > 1 && /* @__PURE__ */ jsx("div", { className: styles.editorOperator(), children: /* @__PURE__ */ jsxs(
+    !hideOperator && operators.length > 1 && /* @__PURE__ */ jsx("div", { className: styles.editorOperator(), children: /* @__PURE__ */ jsxs(
       Select,
       {
         value: filter.operator,

package/dist/chunk-45QJL74L.mjs

@@ -0,0 +1,283 @@
+"use client";
+import {
+  FilterValueEditor
+} from "./chunk-3ZBNWXRA.mjs";
+import {
+  messages
+} from "./chunk-URDCG5NI.mjs";
+import {
+  useFilterContext
+} from "./chunk-I3Z2T4N2.mjs";
+import {
+  DEFAULT_OPERATORS
+} from "./chunk-PHESMHTT.mjs";
+
+// src/filter-active.tsx
+import { useSafeIntl } from "@kopexa/i18n";
+import { ChevronDownIcon, CloseIcon } from "@kopexa/icons";
+import { Popover } from "@kopexa/popover";
+import { cn } from "@kopexa/shared-utils";
+import { Switch } from "@kopexa/switch";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FilterActive(props) {
+  const { showClearAll = true, className, ...rest } = props;
+  const { value, styles, clearFilters } = useFilterContext();
+  const t = useSafeIntl();
+  if (value.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "filter-active",
+      className: cn(styles.active(), className),
+      ...rest,
+      children: [
+        value.map((filter) => /* @__PURE__ */ jsx(FilterField, { filter }, filter.id)),
+        showClearAll && value.length > 1 && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: styles.clearAll(),
+            onClick: clearFilters,
+            children: t.formatMessage(messages.clear_all)
+          }
+        )
+      ]
+    }
+  );
+}
+FilterActive.displayName = "FilterActive";
+function FilterField({ filter }) {
+  var _a;
+  const { fields, styles, removeFilter, updateFilter } = useFilterContext();
+  const t = useSafeIntl();
+  const field = fields.get(filter.fieldId);
+  if (!field) return null;
+  const availableOperators = (_a = field.operators) != null ? _a : DEFAULT_OPERATORS[field.type];
+  const getOperatorLabel = (op) => {
+    const opKey = `op_${op}`;
+    return messages[opKey] ? t.formatMessage(messages[opKey]) : op;
+  };
+  const handleOperatorChange = (e) => {
+    const newOperator = e.target.value;
+    if (newOperator === "is_empty" || newOperator === "is_not_empty") {
+      updateFilter(filter.id, { operator: newOperator, value: void 0 });
+    } else {
+      updateFilter(filter.id, { operator: newOperator });
+    }
+  };
+  const isEmptyOperator = filter.operator === "is_empty" || filter.operator === "is_not_empty";
+  const hasCustomEditor = !!field.renderEditor;
+  const useInlineInput = !hasCustomEditor && (field.type === "text" || field.type === "number");
+  const useInlineSwitch = !hasCustomEditor && field.type === "boolean" && !isEmptyOperator;
+  const usePopover = !useInlineInput && !useInlineSwitch && !isEmptyOperator;
+  const currentOperatorLabel = getOperatorLabel(filter.operator);
+  const operatorWidth = `${currentOperatorLabel.length + 2}ch`;
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "filter-field", className: styles.field(), children: [
+    /* @__PURE__ */ jsxs("span", { className: styles.fieldLabel(), children: [
+      field.icon && /* @__PURE__ */ jsx("span", { className: "size-4 flex-shrink-0", children: field.icon }),
+      /* @__PURE__ */ jsx("span", { children: field.label })
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: styles.fieldOperator(), children: [
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          className: styles.fieldOperatorSelect(),
+          value: filter.operator,
+          onChange: handleOperatorChange,
+          title: currentOperatorLabel,
+          style: { width: operatorWidth },
+          children: availableOperators.map((op) => /* @__PURE__ */ jsx("option", { value: op, children: getOperatorLabel(op) }, op))
+        }
+      ),
+      /* @__PURE__ */ jsx(ChevronDownIcon, { className: styles.fieldOperatorIcon() })
+    ] }),
+    useInlineInput && /* @__PURE__ */ jsx(InlineValueInput, { filter, field }),
+    useInlineSwitch && /* @__PURE__ */ jsx("span", { className: styles.fieldValue(), children: /* @__PURE__ */ jsx(
+      Switch,
+      {
+        size: "sm",
+        checked: Boolean(filter.value),
+        onCheckedChange: (checked) => {
+          updateFilter(filter.id, { value: checked });
+        },
+        "aria-label": field.label
+      }
+    ) }),
+    usePopover && /* @__PURE__ */ jsx(PopoverValueEditor, { filter, field }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: styles.fieldRemove(),
+        onClick: () => removeFilter(filter.id),
+        "aria-label": "Remove filter",
+        children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-3" })
+      }
+    )
+  ] });
+}
+function getInputWidth(value, placeholder, minWidth = 4) {
+  const displayValue = value !== void 0 && value !== null && value !== "" ? String(value) : placeholder;
+  const width = Math.max(displayValue.length + 1, minWidth);
+  return `${width}ch`;
+}
+function InlineValueInput({
+  filter,
+  field
+}) {
+  var _a;
+  const { styles, updateFilter } = useFilterContext();
+  const t = useSafeIntl();
+  const handleChange = (e) => {
+    const val = e.target.value;
+    if (field.type === "number") {
+      updateFilter(filter.id, { value: val ? Number(val) : void 0 });
+    } else {
+      updateFilter(filter.id, { value: val });
+    }
+  };
+  const placeholder = (_a = field.placeholder) != null ? _a : t.formatMessage(messages.enter_value);
+  if (filter.operator === "between") {
+    const [min, max] = Array.isArray(filter.value) ? filter.value : [void 0, void 0];
+    return /* @__PURE__ */ jsxs("span", { className: cn(styles.fieldValue(), "gap-1"), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          className: styles.fieldValueInput(),
+          value: min != null ? min : "",
+          onChange: (e) => {
+            const val = e.target.value ? Number(e.target.value) : void 0;
+            updateFilter(filter.id, { value: [val, max] });
+          },
+          placeholder: "Min",
+          style: { width: getInputWidth(min, "Min", 3) },
+          min: field.min,
+          max: field.max,
+          step: field.step
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2013" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          className: styles.fieldValueInput(),
+          value: max != null ? max : "",
+          onChange: (e) => {
+            const val = e.target.value ? Number(e.target.value) : void 0;
+            updateFilter(filter.id, { value: [min, val] });
+          },
+          placeholder: "Max",
+          style: { width: getInputWidth(max, "Max", 3) },
+          min: field.min,
+          max: field.max,
+          step: field.step
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx("span", { className: styles.fieldValue(), children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: field.type === "number" ? "number" : "text",
+      className: styles.fieldValueInput(),
+      value: filter.value !== void 0 && filter.value !== null ? String(filter.value) : "",
+      onChange: handleChange,
+      placeholder,
+      style: { width: getInputWidth(filter.value, placeholder, 6) },
+      min: field.min,
+      max: field.max,
+      step: field.step
+    }
+  ) });
+}
+function PopoverValueEditor({
+  filter,
+  field
+}) {
+  const { styles, updateFilter } = useFilterContext();
+  const valueDisplay = field.renderValue ? field.renderValue({ filter, field }) : getValueDisplay(filter, field);
+  const hasValue = filter.value !== void 0 && filter.value !== null && filter.value !== "" && !(Array.isArray(filter.value) && filter.value.length === 0);
+  const handleCustomChange = (value) => {
+    updateFilter(filter.id, { value });
+  };
+  return /* @__PURE__ */ jsxs(Popover.Root, { children: [
+    /* @__PURE__ */ jsxs(
+      Popover.Trigger,
+      {
+        className: cn(styles.fieldValue(), "cursor-pointer hover:bg-muted/30"),
+        render: /* @__PURE__ */ jsx("div", {}),
+        nativeButton: false,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: styles.fieldValueText(), children: hasValue ? valueDisplay : "Select..." }),
+          /* @__PURE__ */ jsx(ChevronDownIcon, { className: styles.fieldValueIcon() })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover.Content,
+      {
+        "data-slot": "filter-editor",
+        className: styles.editor(),
+        align: "start",
+        showArrow: false,
+        children: field.renderEditor ? (
+          // Use custom editor if provided
+          field.renderEditor({
+            filter,
+            field,
+            onChange: handleCustomChange
+          })
+        ) : (
+          // Default editor
+          /* @__PURE__ */ jsx(FilterValueEditor, { filter, field, hideOperator: true })
+        )
+      }
+    )
+  ] });
+}
+function getValueDisplay(filter, field) {
+  var _a, _b, _c, _d;
+  const { value, operator } = filter;
+  if (operator === "is_empty" || operator === "is_not_empty") {
+    return null;
+  }
+  if (value === void 0 || value === null || value === "") {
+    return null;
+  }
+  if (field.type === "boolean") {
+    return value ? "Yes" : "No";
+  }
+  if (field.type === "select" && field.options) {
+    const option = field.options.find((o) => o.value === value);
+    return (_a = option == null ? void 0 : option.label) != null ? _a : String(value);
+  }
+  if (field.type === "multiselect" && Array.isArray(value)) {
+    if (value.length === 0) return null;
+    if (value.length === 1 && field.options) {
+      const option = field.options.find((o) => o.value === value[0]);
+      return (_b = option == null ? void 0 : option.label) != null ? _b : String(value[0]);
+    }
+    return `${value.length} selected`;
+  }
+  if (field.type === "date" && value instanceof Date) {
+    return value.toLocaleDateString();
+  }
+  if (field.type === "daterange" && Array.isArray(value)) {
+    const [start, end] = value;
+    const startStr = start instanceof Date ? start.toLocaleDateString() : "...";
+    const endStr = end instanceof Date ? end.toLocaleDateString() : "...";
+    return `${startStr} \u2013 ${endStr}`;
+  }
+  if (operator === "between" && Array.isArray(value)) {
+    return `${(_c = value[0]) != null ? _c : "..."} \u2013 ${(_d = value[1]) != null ? _d : "..."}`;
+  }
+  return String(value);
+}
+
+export {
+  FilterActive
+};

package/dist/{chunk-TBHYZZSX.mjs → chunk-RFCPJLIQ.mjs}

@@ -85,7 +85,9 @@ function FilterItem(props) {
     max,
     step,
     searchable,
-    disabled
+    disabled,
+    renderEditor,
+    renderValue
   } = props;
   const { registerField, unregisterField } = useFilterContext();
   const group = useFilterGroup();
@@ -103,7 +105,9 @@ function FilterItem(props) {
       step,
       searchable,
       group,
-      disabled
+      disabled,
+      renderEditor,
+      renderValue
     });
     return () => unregisterField(id);
   }, [
@@ -120,6 +124,8 @@ function FilterItem(props) {
     searchable,
     group,
     disabled,
+    renderEditor,
+    renderValue,
     registerField,
     unregisterField
   ]);

package/dist/filter-active.js

@@ -39,12 +39,6 @@ var [FilterProvider, useFilterContext] = (0, import_react_utils.createContext)({
   errorMessage: "useFilterContext must be used within a Filter component. Make sure to wrap your FilterMenu, FilterTrigger, etc. inside a <Filter> component."
 });
 
-// src/filter-value-editor.tsx
-var import_checkbox = require("@kopexa/checkbox");
-var import_i18n2 = require("@kopexa/i18n");
-var import_input = require("@kopexa/input");
-var import_select = require("@kopexa/select");
-
 // src/filter-types.ts
 var DEFAULT_OPERATORS = {
   text: [
@@ -65,6 +59,12 @@ var DEFAULT_OPERATORS = {
   boolean: ["equals", "not_equals", "is_empty", "is_not_empty"]
 };
 
+// src/filter-value-editor.tsx
+var import_checkbox = require("@kopexa/checkbox");
+var import_i18n2 = require("@kopexa/i18n");
+var import_input = require("@kopexa/input");
+var import_select = require("@kopexa/select");
+
 // src/messages.ts
 var import_i18n = require("@kopexa/i18n");
 var messages = (0, import_i18n.defineMessages)({
@@ -173,7 +173,11 @@ var messages = (0, import_i18n.defineMessages)({
 
 // src/filter-value-editor.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function FilterValueEditor({ filter, field }) {
+function FilterValueEditor({
+  filter,
+  field,
+  hideOperator
+}) {
   var _a;
   const { styles, updateFilter, setEditingFilterId } = useFilterContext();
   const t = (0, import_i18n2.useSafeIntl)();
@@ -198,7 +202,7 @@ function FilterValueEditor({ filter, field }) {
   const needsValue = filter.operator !== "is_empty" && filter.operator !== "is_not_empty";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-slot": "filter-value-editor", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.editorHeader(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.editorTitle(), children: field.label }) }),
-    operators.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.editorOperator(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    !hideOperator && operators.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.editorOperator(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_select.Select,
       {
         value: filter.operator,
@@ -448,81 +452,195 @@ function FilterActive(props) {
 }
 FilterActive.displayName = "FilterActive";
 function FilterField({ filter }) {
-  const {
-    fields,
-    styles,
-    removeFilter,
-    editingFilterId,
-    setEditingFilterId,
-    updateFilter
-  } = useFilterContext();
+  var _a;
+  const { fields, styles, removeFilter, updateFilter } = useFilterContext();
   const t = (0, import_i18n3.useSafeIntl)();
   const field = fields.get(filter.fieldId);
   if (!field) return null;
-  const isEditing = editingFilterId === filter.id;
-  const operatorKey = `op_${filter.operator}`;
-  const operatorLabel = messages[operatorKey] ? t.formatMessage(messages[operatorKey]) : filter.operator;
-  const isBooleanWithValue = field.type === "boolean" && filter.operator !== "is_empty" && filter.operator !== "is_not_empty";
-  const valueDisplay = isBooleanWithValue ? null : getValueDisplay(filter, field);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    import_popover.Popover.Root,
+  const availableOperators = (_a = field.operators) != null ? _a : DEFAULT_OPERATORS[field.type];
+  const getOperatorLabel = (op) => {
+    const opKey = `op_${op}`;
+    return messages[opKey] ? t.formatMessage(messages[opKey]) : op;
+  };
+  const handleOperatorChange = (e) => {
+    const newOperator = e.target.value;
+    if (newOperator === "is_empty" || newOperator === "is_not_empty") {
+      updateFilter(filter.id, { operator: newOperator, value: void 0 });
+    } else {
+      updateFilter(filter.id, { operator: newOperator });
+    }
+  };
+  const isEmptyOperator = filter.operator === "is_empty" || filter.operator === "is_not_empty";
+  const hasCustomEditor = !!field.renderEditor;
+  const useInlineInput = !hasCustomEditor && (field.type === "text" || field.type === "number");
+  const useInlineSwitch = !hasCustomEditor && field.type === "boolean" && !isEmptyOperator;
+  const usePopover = !useInlineInput && !useInlineSwitch && !isEmptyOperator;
+  const currentOperatorLabel = getOperatorLabel(filter.operator);
+  const operatorWidth = `${currentOperatorLabel.length + 2}ch`;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { "data-slot": "filter-field", className: styles.field(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: styles.fieldLabel(), children: [
+      field.icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "size-4 flex-shrink-0", children: field.icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: field.label })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: styles.fieldOperator(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "select",
+        {
+          className: styles.fieldOperatorSelect(),
+          value: filter.operator,
+          onChange: handleOperatorChange,
+          title: currentOperatorLabel,
+          style: { width: operatorWidth },
+          children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: op, children: getOperatorLabel(op) }, op))
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.ChevronDownIcon, { className: styles.fieldOperatorIcon() })
+    ] }),
+    useInlineInput && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(InlineValueInput, { filter, field }),
+    useInlineSwitch && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.fieldValue(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_switch.Switch,
+      {
+        size: "sm",
+        checked: Boolean(filter.value),
+        onCheckedChange: (checked) => {
+          updateFilter(filter.id, { value: checked });
+        },
+        "aria-label": field.label
+      }
+    ) }),
+    usePopover && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PopoverValueEditor, { filter, field }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "button",
+        className: styles.fieldRemove(),
+        onClick: () => removeFilter(filter.id),
+        "aria-label": "Remove filter",
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.CloseIcon, { className: "size-3" })
+      }
+    )
+  ] });
+}
+function getInputWidth(value, placeholder, minWidth = 4) {
+  const displayValue = value !== void 0 && value !== null && value !== "" ? String(value) : placeholder;
+  const width = Math.max(displayValue.length + 1, minWidth);
+  return `${width}ch`;
+}
+function InlineValueInput({
+  filter,
+  field
+}) {
+  var _a;
+  const { styles, updateFilter } = useFilterContext();
+  const t = (0, import_i18n3.useSafeIntl)();
+  const handleChange = (e) => {
+    const val = e.target.value;
+    if (field.type === "number") {
+      updateFilter(filter.id, { value: val ? Number(val) : void 0 });
+    } else {
+      updateFilter(filter.id, { value: val });
+    }
+  };
+  const placeholder = (_a = field.placeholder) != null ? _a : t.formatMessage(messages.enter_value);
+  if (filter.operator === "between") {
+    const [min, max] = Array.isArray(filter.value) ? filter.value : [void 0, void 0];
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: (0, import_shared_utils.cn)(styles.fieldValue(), "gap-1"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          type: "number",
+          className: styles.fieldValueInput(),
+          value: min != null ? min : "",
+          onChange: (e) => {
+            const val = e.target.value ? Number(e.target.value) : void 0;
+            updateFilter(filter.id, { value: [val, max] });
+          },
+          placeholder: "Min",
+          style: { width: getInputWidth(min, "Min", 3) },
+          min: field.min,
+          max: field.max,
+          step: field.step
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-muted-foreground", children: "\u2013" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          type: "number",
+          className: styles.fieldValueInput(),
+          value: max != null ? max : "",
+          onChange: (e) => {
+            const val = e.target.value ? Number(e.target.value) : void 0;
+            updateFilter(filter.id, { value: [min, val] });
+          },
+          placeholder: "Max",
+          style: { width: getInputWidth(max, "Max", 3) },
+          min: field.min,
+          max: field.max,
+          step: field.step
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.fieldValue(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "input",
     {
-      open: isEditing,
-      onOpenChange: (open) => setEditingFilterId(open ? filter.id : null),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          import_popover.Popover.Trigger,
-          {
-            "data-slot": "filter-field",
-            className: styles.field(),
-            render: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {}),
-            nativeButton: false,
-            children: [
-              field.icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.menuItemIcon(), children: field.icon }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.fieldLabel(), children: field.label }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.fieldOperator(), children: operatorLabel }),
-              isBooleanWithValue && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                import_switch.Switch,
-                {
-                  size: "sm",
-                  checked: Boolean(filter.value),
-                  onCheckedChange: (checked) => {
-                    updateFilter(filter.id, { value: checked });
-                  },
-                  onClick: (e) => e.stopPropagation(),
-                  "aria-label": field.label
-                }
-              ),
-              valueDisplay && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.fieldValue(), children: valueDisplay }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: styles.fieldRemove(),
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    removeFilter(filter.id);
-                  },
-                  "aria-label": "Remove filter",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.CloseIcon, { className: "size-3" })
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          import_popover.Popover.Content,
-          {
-            "data-slot": "filter-editor",
-            className: styles.editor(),
-            align: "start",
-            showArrow: false,
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FilterValueEditor, { filter, field })
-          }
-        )
-      ]
+      type: field.type === "number" ? "number" : "text",
+      className: styles.fieldValueInput(),
+      value: filter.value !== void 0 && filter.value !== null ? String(filter.value) : "",
+      onChange: handleChange,
+      placeholder,
+      style: { width: getInputWidth(filter.value, placeholder, 6) },
+      min: field.min,
+      max: field.max,
+      step: field.step
     }
-  );
+  ) });
+}
+function PopoverValueEditor({
+  filter,
+  field
+}) {
+  const { styles, updateFilter } = useFilterContext();
+  const valueDisplay = field.renderValue ? field.renderValue({ filter, field }) : getValueDisplay(filter, field);
+  const hasValue = filter.value !== void 0 && filter.value !== null && filter.value !== "" && !(Array.isArray(filter.value) && filter.value.length === 0);
+  const handleCustomChange = (value) => {
+    updateFilter(filter.id, { value });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_popover.Popover.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_popover.Popover.Trigger,
+      {
+        className: (0, import_shared_utils.cn)(styles.fieldValue(), "cursor-pointer hover:bg-muted/30"),
+        render: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {}),
+        nativeButton: false,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.fieldValueText(), children: hasValue ? valueDisplay : "Select..." }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.ChevronDownIcon, { className: styles.fieldValueIcon() })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_popover.Popover.Content,
+      {
+        "data-slot": "filter-editor",
+        className: styles.editor(),
+        align: "start",
+        showArrow: false,
+        children: field.renderEditor ? (
+          // Use custom editor if provided
+          field.renderEditor({
+            filter,
+            field,
+            onChange: handleCustomChange
+          })
+        ) : (
+          // Default editor
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FilterValueEditor, { filter, field, hideOperator: true })
+        )
+      }
+    )
+  ] });
 }
 function getValueDisplay(filter, field) {
   var _a, _b, _c, _d;
@@ -531,7 +649,7 @@ function getValueDisplay(filter, field) {
     return null;
   }
   if (value === void 0 || value === null || value === "") {
-    return "...";
+    return null;
   }
   if (field.type === "boolean") {
     return value ? "Yes" : "No";
@@ -541,7 +659,7 @@ function getValueDisplay(filter, field) {
     return (_a = option == null ? void 0 : option.label) != null ? _a : String(value);
   }
   if (field.type === "multiselect" && Array.isArray(value)) {
-    if (value.length === 0) return "...";
+    if (value.length === 0) return null;
     if (value.length === 1 && field.options) {
       const option = field.options.find((o) => o.value === value[0]);
       return (_b = option == null ? void 0 : option.label) != null ? _b : String(value[0]);
@@ -555,10 +673,10 @@ function getValueDisplay(filter, field) {
     const [start, end] = value;
     const startStr = start instanceof Date ? start.toLocaleDateString() : "...";
     const endStr = end instanceof Date ? end.toLocaleDateString() : "...";
-    return `${startStr} - ${endStr}`;
+    return `${startStr} \u2013 ${endStr}`;
   }
   if (operator === "between" && Array.isArray(value)) {
-    return `${(_c = value[0]) != null ? _c : "..."} - ${(_d = value[1]) != null ? _d : "..."}`;
+    return `${(_c = value[0]) != null ? _c : "..."} \u2013 ${(_d = value[1]) != null ? _d : "..."}`;
   }
   return String(value);
 }