@flytedan/flytebot-design-system 0.30.0 → 0.31.0

package/dist/index.d.cts

@@ -1138,6 +1138,10 @@ interface FilterFieldRange extends FilterFieldBase {
     min?: number;
     max?: number;
     step?: number;
+    /** Requires whole numbers for both bounds. Off by default, the same opt-in NumberInput
+     *  itself takes — a range field with a whole-number step (e.g. 10) may still want
+     *  decimal bounds, so this is a deliberate choice, not inferred from `step`. */
+    integer?: boolean;
     minLabel?: string;
     maxLabel?: string;
     minPlaceholder?: string;
@@ -1154,11 +1158,15 @@ type FilterDateValue = {
 interface FilterFieldDate extends FilterFieldBase {
     type: "date";
     /** Default days shown the first time "within the last N days" is picked — shown, not
-     *  written: nothing is set until the user changes it or confirms it. */
+     *  written: nothing is set until the user changes it or confirms it. Must be a whole
+     *  number from 1 to `maxDays`; FilterBar throws a clear, field-naming error in
+     *  development if it isn't. */
     defaultDays?: number;
     /** Upper bound enforced on the "within the last N days" input. Default 3650 (ten
      *  years) — generous enough for any real "recent activity" window while still
-     *  guaranteeing a plausible, in-range value ever reaches `onFilterChange`. */
+     *  guaranteeing a plausible, in-range value ever reaches `onFilterChange`. Must be a
+     *  whole number from 1 to 3650; FilterBar throws a clear, field-naming error in
+     *  development if it isn't. */
     maxDays?: number;
 }
 /** A declared filter field. Add a variant here (and a branch below) for a new value
@@ -2192,7 +2200,10 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
 }
 declare function Textarea({ label, help, error, required, rows, disabled, id, className, style, ...rest }: TextareaProps): React.JSX.Element;
 
-/** Numeric field with thousands formatting on blur, +/- steppers with hold-to-repeat acceleration, arrow keys (shift = bigStep), and min/max clamping. */
+/** Numeric field with thousands formatting on blur, +/- steppers with hold-to-repeat
+ *  acceleration and arrow keys (shift = bigStep) that snap to the step grid within
+ *  [min, max], and inline min/max/integer validation that keeps an invalid typed value
+ *  from ever reaching `onChange`. */
 interface NumberInputProps {
     label?: string;
     help?: string;
@@ -2214,6 +2225,12 @@ interface NumberInputProps {
     step?: number;
     /** Larger step used while holding the steppers or shift+arrows. */
     bigStep?: number;
+    /** Requires a whole number. Off by default — a field with a whole-number `step` (e.g.
+     *  cents in steps of 10) may still want decimal input, so this is a deliberate opt-in
+     *  rather than inferred from `step`. When set, typed text, blur, the steppers and arrow
+     *  keys all reject or snap away from a fractional value; a fractional value can never
+     *  reach `onChange`. */
+    integer?: boolean;
     /** Thousands-format the display when not editing. Default true. */
     format?: boolean;
     value?: number | string;
@@ -2222,11 +2239,17 @@ interface NumberInputProps {
      *  (e.g. FilterBar's range/date panels) tells an unset bound apart from a typed
      *  zero by this, not by testing for `0` itself. */
     onChange?: (e: any) => void;
+    /** Called with the field's current validity every time it changes — true once the
+     *  typed text is empty or a legal number, false while it is out of bounds, non-integer
+     *  (when `integer` is set), or otherwise unparseable. Lets a parent (e.g. a panel with
+     *  its own Done button) know a value is mid-edit-and-invalid even though nothing has
+     *  been (or ever will be) passed to `onChange` for it. */
+    onValidityChange?: (valid: boolean) => void;
     placeholder?: string;
     style?: any;
     className?: string;
 }
-declare function NumberInput({ label, help, error, prefix, suffix, required, disabled, min, max, step, bigStep, value, onChange, format, className, style, placeholder, id, "aria-label": ariaLabel }: NumberInputProps): React.JSX.Element;
+declare function NumberInput({ label, help, error, prefix, suffix, required, disabled, min, max, step, bigStep, integer, value, onChange, onValidityChange, format, className, style, placeholder, id, "aria-label": ariaLabel }: NumberInputProps): React.JSX.Element;
 
 /** Rich popover select: animated listbox, keyboard nav + type-ahead, search over 8 options, option icons, descriptions, meta and groups. API-compatible with the old native select. */
 interface SelectOption {

package/dist/index.d.ts

@@ -1138,6 +1138,10 @@ interface FilterFieldRange extends FilterFieldBase {
     min?: number;
     max?: number;
     step?: number;
+    /** Requires whole numbers for both bounds. Off by default, the same opt-in NumberInput
+     *  itself takes — a range field with a whole-number step (e.g. 10) may still want
+     *  decimal bounds, so this is a deliberate choice, not inferred from `step`. */
+    integer?: boolean;
     minLabel?: string;
     maxLabel?: string;
     minPlaceholder?: string;
@@ -1154,11 +1158,15 @@ type FilterDateValue = {
 interface FilterFieldDate extends FilterFieldBase {
     type: "date";
     /** Default days shown the first time "within the last N days" is picked — shown, not
-     *  written: nothing is set until the user changes it or confirms it. */
+     *  written: nothing is set until the user changes it or confirms it. Must be a whole
+     *  number from 1 to `maxDays`; FilterBar throws a clear, field-naming error in
+     *  development if it isn't. */
     defaultDays?: number;
     /** Upper bound enforced on the "within the last N days" input. Default 3650 (ten
      *  years) — generous enough for any real "recent activity" window while still
-     *  guaranteeing a plausible, in-range value ever reaches `onFilterChange`. */
+     *  guaranteeing a plausible, in-range value ever reaches `onFilterChange`. Must be a
+     *  whole number from 1 to 3650; FilterBar throws a clear, field-naming error in
+     *  development if it isn't. */
     maxDays?: number;
 }
 /** A declared filter field. Add a variant here (and a branch below) for a new value
@@ -2192,7 +2200,10 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
 }
 declare function Textarea({ label, help, error, required, rows, disabled, id, className, style, ...rest }: TextareaProps): React.JSX.Element;
 
-/** Numeric field with thousands formatting on blur, +/- steppers with hold-to-repeat acceleration, arrow keys (shift = bigStep), and min/max clamping. */
+/** Numeric field with thousands formatting on blur, +/- steppers with hold-to-repeat
+ *  acceleration and arrow keys (shift = bigStep) that snap to the step grid within
+ *  [min, max], and inline min/max/integer validation that keeps an invalid typed value
+ *  from ever reaching `onChange`. */
 interface NumberInputProps {
     label?: string;
     help?: string;
@@ -2214,6 +2225,12 @@ interface NumberInputProps {
     step?: number;
     /** Larger step used while holding the steppers or shift+arrows. */
     bigStep?: number;
+    /** Requires a whole number. Off by default — a field with a whole-number `step` (e.g.
+     *  cents in steps of 10) may still want decimal input, so this is a deliberate opt-in
+     *  rather than inferred from `step`. When set, typed text, blur, the steppers and arrow
+     *  keys all reject or snap away from a fractional value; a fractional value can never
+     *  reach `onChange`. */
+    integer?: boolean;
     /** Thousands-format the display when not editing. Default true. */
     format?: boolean;
     value?: number | string;
@@ -2222,11 +2239,17 @@ interface NumberInputProps {
      *  (e.g. FilterBar's range/date panels) tells an unset bound apart from a typed
      *  zero by this, not by testing for `0` itself. */
     onChange?: (e: any) => void;
+    /** Called with the field's current validity every time it changes — true once the
+     *  typed text is empty or a legal number, false while it is out of bounds, non-integer
+     *  (when `integer` is set), or otherwise unparseable. Lets a parent (e.g. a panel with
+     *  its own Done button) know a value is mid-edit-and-invalid even though nothing has
+     *  been (or ever will be) passed to `onChange` for it. */
+    onValidityChange?: (valid: boolean) => void;
     placeholder?: string;
     style?: any;
     className?: string;
 }
-declare function NumberInput({ label, help, error, prefix, suffix, required, disabled, min, max, step, bigStep, value, onChange, format, className, style, placeholder, id, "aria-label": ariaLabel }: NumberInputProps): React.JSX.Element;
+declare function NumberInput({ label, help, error, prefix, suffix, required, disabled, min, max, step, bigStep, integer, value, onChange, onValidityChange, format, className, style, placeholder, id, "aria-label": ariaLabel }: NumberInputProps): React.JSX.Element;
 
 /** Rich popover select: animated listbox, keyboard nav + type-ahead, search over 8 options, option icons, descriptions, meta and groups. API-compatible with the old native select. */
 interface SelectOption {

package/dist/index.js

@@ -2769,8 +2769,10 @@ function NumberInput({
   max = Infinity,
   step = 1,
   bigStep,
+  integer = false,
   value,
   onChange,
+  onValidityChange,
   format = true,
   className = "",
   style,
@@ -2786,9 +2788,8 @@ function NumberInput({
     const n = Number(s);
     return isNaN(n) ? null : n;
   };
-  const requiresInteger = Number.isInteger(step);
   const validationMessage = (n) => {
-    if (requiresInteger && !Number.isInteger(n)) return "Enter a whole number";
+    if (integer && !Number.isInteger(n)) return "Enter a whole number";
     if (n < min) return "Must be \u2265 " + min;
     if (n > max) return "Must be \u2264 " + max;
     return null;
@@ -2803,11 +2804,17 @@ function NumberInput({
       setInvalidMessage(null);
     }
   }, [value, editing]);
+  React21.useEffect(() => {
+    onValidityChange && onValidityChange(invalidMessage == null);
+  }, [invalidMessage]);
   const clamp = (n) => Math.min(max, Math.max(min, n));
   const fire = (n) => onChange && onChange({ target: { value: n } });
   const bump = (dir, mult = 1) => {
-    const cur = num(text) ?? num(value) ?? (min === -Infinity ? 0 : min);
-    const next = clamp(cur + dir * (bigStep && mult > 1 ? bigStep : step) * (bigStep ? 1 : mult));
+    const cur = (invalidMessage ? null : num(text)) ?? num(value) ?? (min === -Infinity ? 0 : min);
+    const amount = (bigStep && mult > 1 ? bigStep : step) * (bigStep ? 1 : mult);
+    let next = cur + dir * amount;
+    if (integer) next = Math.round(next);
+    next = clamp(next);
     setInvalidMessage(null);
     setText(String(next));
     fire(next);
@@ -3194,6 +3201,91 @@ function isFieldSet(field, value) {
     }
   }
 }
+function validateFilterValue(field, value) {
+  switch (field.type) {
+    case "text":
+    case "select":
+      return { ok: true };
+    case "multiSelect": {
+      const v = value;
+      if (!v || !Array.isArray(v.values) || v.values.length === 0) {
+        return { ok: false, reason: "Select at least one value" };
+      }
+      if (!operatorsFor(field).includes(v.operator)) {
+        return { ok: false, reason: "That operator isn't allowed for " + field.label };
+      }
+      return { ok: true };
+    }
+    case "range": {
+      const v = value;
+      if (!v || v.min == null && v.max == null) {
+        return { ok: false, reason: "Enter at least one bound" };
+      }
+      const lo = field.min ?? -Infinity;
+      const hi = field.max ?? Infinity;
+      for (const n of [v.min, v.max]) {
+        if (n == null) continue;
+        if (field.integer && !Number.isInteger(n)) return { ok: false, reason: "Enter a whole number" };
+        if (n < lo) return { ok: false, reason: "Must be \u2265 " + lo };
+        if (n > hi) return { ok: false, reason: "Must be \u2264 " + hi };
+      }
+      if (v.min != null && v.max != null && v.min > v.max) {
+        return { ok: false, reason: "Must be \u2265 " + v.min };
+      }
+      return { ok: true };
+    }
+    case "date": {
+      const v = value;
+      if (!v) return { ok: false, reason: "Pick a date value" };
+      if (v.kind === "withinDays") {
+        const maxDays = field.maxDays ?? 3650;
+        if (v.days == null) return { ok: false, reason: "Enter a number of days" };
+        if (!Number.isInteger(v.days)) return { ok: false, reason: "Enter a whole number" };
+        if (v.days < 1) return { ok: false, reason: "Must be \u2265 1" };
+        if (v.days > maxDays) return { ok: false, reason: "Must be \u2264 " + maxDays };
+        return { ok: true };
+      }
+      if (!v.from || !v.to) return { ok: false, reason: "Pick both dates" };
+      if (v.from > v.to) return { ok: false, reason: "The start date must be on or before the end date" };
+      return { ok: true };
+    }
+  }
+}
+function isEmptyCandidate(field, candidate) {
+  switch (field.type) {
+    case "text":
+    case "select":
+      return false;
+    case "multiSelect": {
+      const v = candidate;
+      return !v || !Array.isArray(v.values) || v.values.length === 0;
+    }
+    case "range": {
+      const v = candidate;
+      return !v || v.min == null && v.max == null;
+    }
+    case "date": {
+      const v = candidate;
+      if (!v) return true;
+      return v.kind === "withinDays" ? v.days == null : !(v.from && v.to);
+    }
+  }
+}
+function assertValidDateField(field) {
+  if (process.env.NODE_ENV === "production") return;
+  const defaultDays = field.defaultDays ?? 30;
+  const maxDays = field.maxDays ?? 3650;
+  if (!Number.isInteger(maxDays) || maxDays < 1 || maxDays > 3650) {
+    throw new Error(
+      'FilterBar: date field "' + field.key + '" has an invalid maxDays (' + field.maxDays + ") \u2014 must be a whole number from 1 to 3650."
+    );
+  }
+  if (!Number.isInteger(defaultDays) || defaultDays < 1 || defaultDays > maxDays) {
+    throw new Error(
+      'FilterBar: date field "' + field.key + '" has an invalid defaultDays (' + field.defaultDays + ") \u2014 must be a whole number from 1 to maxDays (" + maxDays + ")."
+    );
+  }
+}
 function chipLabel(field, value) {
   switch (field.type) {
     case "text":
@@ -3246,8 +3338,7 @@ function MultiSelectPanel({
   field,
   value,
   anchorRef,
-  onChange,
-  onRemove,
+  onCommit,
   onClose
 }) {
   const allowedOps = operatorsFor(field);
@@ -3256,9 +3347,17 @@ function MultiSelectPanel({
   const selected = value?.values ?? [];
   const selectedRef = React24.useRef(selected);
   selectedRef.current = selected;
+  const operatorRef = React24.useRef(operator);
+  operatorRef.current = operator;
+  const mountedRef = React24.useRef(true);
+  React24.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
   const commit = (nextValues, nextOperator = operator) => {
-    if (nextValues.length === 0) onRemove();
-    else onChange({ operator: nextOperator, values: nextValues });
+    onCommit({ operator: nextOperator, values: nextValues });
   };
   const setOperator = (op) => {
     setDraftOperator(op);
@@ -3329,13 +3428,15 @@ function MultiSelectPanel({
     setPasteLoading(true);
     setPasteError(null);
     field.resolve(tokens).then((result) => {
+      if (!mountedRef.current) return;
       setPasteLoading(false);
       setUnmatchedTokens(result.unmatched);
       const merged = new Map(selectedRef.current.map((s) => [s.value, s]));
       for (const m of result.matched) merged.set(m.value, { value: m.value, label: m.label });
-      commit(Array.from(merged.values()));
+      commit(Array.from(merged.values()), operatorRef.current);
       setPasteText("");
     }).catch((err) => {
+      if (!mountedRef.current) return;
       setPasteLoading(false);
       setPasteError(err instanceof Error ? err.message : "Could not resolve the pasted list.");
     });
@@ -3471,22 +3572,21 @@ function RangePanel({
   field,
   value,
   anchorRef,
-  onChange,
-  onRemove,
+  onCommit,
   onClose
 }) {
   const [draftMin, setDraftMin] = React24.useState(value?.min);
   const [draftMax, setDraftMax] = React24.useState(value?.max);
-  const invalid = draftMin != null && draftMax != null && draftMin > draftMax;
+  const [minTextValid, setMinTextValid] = React24.useState(true);
+  const [maxTextValid, setMaxTextValid] = React24.useState(true);
+  const isEmpty = draftMin == null && draftMax == null;
+  const validation = isEmpty ? { ok: true } : validateFilterValue(field, { min: draftMin, max: draftMax });
+  const comboError = !isEmpty && !validation.ok ? validation.reason : void 0;
+  const doneDisabled = !minTextValid || !maxTextValid || !!comboError;
   const apply = (nextMin, nextMax) => {
     setDraftMin(nextMin);
     setDraftMax(nextMax);
-    if (nextMin == null && nextMax == null) {
-      onRemove();
-      return;
-    }
-    if (nextMin != null && nextMax != null && nextMin > nextMax) return;
-    onChange({ min: nextMin, max: nextMax });
+    onCommit(nextMin == null && nextMax == null ? void 0 : { min: nextMin, max: nextMax });
   };
   return /* @__PURE__ */ jsx45(
     Popover,
@@ -3498,7 +3598,7 @@ function RangePanel({
       offset: 6,
       width: PANEL_WIDTH.range,
       label: field.label,
-      footer: /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "secondary", onClick: onClose, disabled: invalid, children: "Done" }),
+      footer: /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "secondary", onClick: onClose, disabled: doneDisabled, children: "Done" }),
       children: /* @__PURE__ */ jsxs39("span", { className: "fd-stack fd-gap-sm", children: [
         /* @__PURE__ */ jsx45(
           NumberInput,
@@ -3508,8 +3608,10 @@ function RangePanel({
             min: field.min,
             max: field.max,
             step: field.step,
+            integer: field.integer,
             placeholder: field.minPlaceholder,
-            onChange: (e) => apply(e.target.value, draftMax)
+            onChange: (e) => apply(e.target.value, draftMax),
+            onValidityChange: setMinTextValid
           }
         ),
         /* @__PURE__ */ jsx45(
@@ -3520,9 +3622,11 @@ function RangePanel({
             min: field.min,
             max: field.max,
             step: field.step,
-            error: invalid ? "Must be \u2265 " + draftMin : void 0,
+            integer: field.integer,
+            error: comboError,
             placeholder: field.maxPlaceholder,
-            onChange: (e) => apply(draftMin, e.target.value)
+            onChange: (e) => apply(draftMin, e.target.value),
+            onValidityChange: setMaxTextValid
           }
         )
       ] })
@@ -3533,8 +3637,7 @@ function DatePanel({
   field,
   value,
   anchorRef,
-  onChange,
-  onRemove,
+  onCommit,
   onClose
 }) {
   const defaultDays = field.defaultDays ?? 30;
@@ -3546,42 +3649,23 @@ function DatePanel({
   const [between, setBetween] = React24.useState(
     value?.kind === "between" ? { from: value.from, to: value.to } : { from: "", to: "" }
   );
-  const committedRef = React24.useRef(!!value);
   const applyWithinDays = (days) => {
     setDaysDraft(days);
-    if (days != null) {
-      committedRef.current = true;
-      onChange({ kind: "withinDays", days });
-    } else if (committedRef.current) {
-      committedRef.current = false;
-      onRemove();
-    }
+    onCommit(days == null ? void 0 : { kind: "withinDays", days });
   };
   const applyBetween = (from, to) => {
     setBetween({ from, to });
-    if (from && to) {
-      committedRef.current = true;
-      onChange({ kind: "between", from, to });
-    } else if (committedRef.current) {
-      committedRef.current = false;
-      onRemove();
-    }
+    onCommit(from && to ? { kind: "between", from, to } : void 0);
   };
   const switchKind = (next) => {
+    if (next === kind) return;
     setKind(next);
-    if (next === "between") {
-      setBetween({ from: "", to: "" });
-      if (committedRef.current) {
-        committedRef.current = false;
-        onRemove();
-      }
-    }
+    if (next === "between") setBetween({ from: "", to: "" });
+    else setDaysDraft(defaultDays);
+    onCommit(void 0);
   };
   const confirm = () => {
-    if (kind === "withinDays" && daysDraft != null) {
-      committedRef.current = true;
-      onChange({ kind: "withinDays", days: daysDraft });
-    }
+    if (kind === "withinDays" && daysDraft != null) onCommit({ kind: "withinDays", days: daysDraft });
     onClose();
   };
   return /* @__PURE__ */ jsx45(
@@ -3608,7 +3692,7 @@ function DatePanel({
             onChange: (k) => switchKind(k)
           }
         ),
-        kind === "withinDays" ? /* @__PURE__ */ jsx45(NumberInput, { label: "Days", min: 1, max: maxDays, step: 1, value: daysDraft ?? "", onChange: (e) => applyWithinDays(e.target.value) }) : /* @__PURE__ */ jsx45(
+        kind === "withinDays" ? /* @__PURE__ */ jsx45(NumberInput, { label: "Days", min: 1, max: maxDays, step: 1, integer: true, value: daysDraft ?? "", onChange: (e) => applyWithinDays(e.target.value) }) : /* @__PURE__ */ jsx45(
           DatePicker,
           {
             range: true,
@@ -3627,6 +3711,21 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
   const addAnchorRef = React24.useRef(null);
   const textInputRef = React24.useRef(null);
   const optionsRef = React24.useRef(null);
+  if (process.env.NODE_ENV !== "production") {
+    for (const f of fields) if (f.type === "date") assertValidDateField(f);
+  }
+  const commit = (field, candidate) => {
+    if (isEmptyCandidate(field, candidate)) {
+      removeField(field);
+      return { ok: true };
+    }
+    const result = validateFilterValue(field, candidate);
+    if (result.ok) onFilterChange(field.key, candidate);
+    return result;
+  };
+  const removeField = (field) => {
+    if (isFieldSet(field, filters[field.key])) onFilterRemove(field.key);
+  };
   const editingField = panel && panel.kind === "edit" ? fields.find((f) => f.key === panel.key) : void 0;
   const startEditing = (key) => setPanel({ kind: "edit", key });
   const closeEditing = () => setPanel(null);
@@ -3658,7 +3757,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
               value: value ?? "",
               placeholder: field.placeholder || field.label,
               "aria-label": field.label,
-              onChange: (e) => onFilterChange(field.key, e.target.value),
+              onChange: (e) => commit(field, e.target.value),
               onKeyDown: (e) => {
                 if (e.key === "Enter") setPanel(null);
                 else if (e.key === "Escape") {
@@ -3677,7 +3776,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
               "aria-label": "Remove " + field.label,
               onClick: (e) => {
                 e.stopPropagation();
-                onFilterRemove(field.key);
+                removeField(field);
                 setPanel(null);
               },
               children: /* @__PURE__ */ jsx45("i", { className: "ph ph-x", "aria-hidden": "true" })
@@ -3690,7 +3789,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
       const chipRef = editing ? editAnchorRef : void 0;
       const toggleOrClose = () => editing ? closeEditing() : startEditing(field.key);
       const remove = () => {
-        if (set) onFilterRemove(field.key);
+        removeField(field);
         closeEditing();
       };
       const chipText = field.label + (set ? ": " + chipLabel(field, value) : "");
@@ -3720,7 +3819,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
                     "aria-selected": on,
                     className: ["fd-opt", on ? "is-selected" : ""].filter(Boolean).join(" "),
                     onClick: () => {
-                      onFilterChange(field.key, o.value);
+                      commit(field, o.value);
                       setPanel(null);
                     },
                     children: /* @__PURE__ */ jsx45("span", { className: "fd-opt-label", children: o.label })
@@ -3741,8 +3840,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
               field,
               value,
               anchorRef: editAnchorRef,
-              onChange: (v) => onFilterChange(field.key, v),
-              onRemove: () => onFilterRemove(field.key),
+              onCommit: (v) => commit(field, v),
               onClose: closeEditing
             }
           ) : null
@@ -3757,8 +3855,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
               field,
               value,
               anchorRef: editAnchorRef,
-              onChange: (v) => onFilterChange(field.key, v),
-              onRemove: () => onFilterRemove(field.key),
+              onCommit: (v) => commit(field, v),
               onClose: closeEditing
             }
           ) : null
@@ -3773,8 +3870,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
               field,
               value,
               anchorRef: editAnchorRef,
-              onChange: (v) => onFilterChange(field.key, v),
-              onRemove: () => onFilterRemove(field.key),
+              onCommit: (v) => commit(field, v),
               onClose: closeEditing
             }
           ) : null