@flytedan/flytebot-design-system 0.32.0 → 0.33.0

package/dist/index.d.cts

@@ -1190,12 +1190,17 @@ interface FilterBarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "on
     fields: FilterField[];
     /** Straight off useServerTable — a value of undefined/""/false reads as "not set",
      *  same convention that hook already uses for activeFilterCount. multiSelect/range/
-     *  date values are objects instead (see isFieldSet). */
+     *  date values are objects instead (see isFieldSet). Pass a new object whenever the
+     *  filters change (as a state update does): FilterBar re-reads this record only when
+     *  its identity changes, so a parent that re-renders before applying an emission
+     *  doesn't make FilterBar forget it. */
     filters: Record<string, unknown>;
     /** Fires on every value edit. Maps 1:1 onto useServerTable's setFilter(id, value).
      *  FilterBar only ever calls this with a COMPLETE, valid value for the field — an
-     *  emptied selection, a one-sided date range, an invalid numeric range or a cleared
-     *  bound go through onFilterRemove (or nothing) instead. */
+     *  emptied selection, a one-sided date range, an invalid numeric range, number text
+     *  that isn't a valid value, or a cleared bound go through onFilterRemove (or nothing,
+     *  when the filter isn't set) instead. Number fields emit on every keystroke that
+     *  leaves them valid, so debounce the request this triggers. */
     onFilterChange: (key: string, value: unknown) => void;
     /** Fires when a chip's × is clicked, or when an edit leaves a field with no valid
      *  value. Maps 1:1 onto useServerTable's clearFilter(id). */

package/dist/index.d.ts

@@ -1190,12 +1190,17 @@ interface FilterBarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "on
     fields: FilterField[];
     /** Straight off useServerTable — a value of undefined/""/false reads as "not set",
      *  same convention that hook already uses for activeFilterCount. multiSelect/range/
-     *  date values are objects instead (see isFieldSet). */
+     *  date values are objects instead (see isFieldSet). Pass a new object whenever the
+     *  filters change (as a state update does): FilterBar re-reads this record only when
+     *  its identity changes, so a parent that re-renders before applying an emission
+     *  doesn't make FilterBar forget it. */
     filters: Record<string, unknown>;
     /** Fires on every value edit. Maps 1:1 onto useServerTable's setFilter(id, value).
      *  FilterBar only ever calls this with a COMPLETE, valid value for the field — an
-     *  emptied selection, a one-sided date range, an invalid numeric range or a cleared
-     *  bound go through onFilterRemove (or nothing) instead. */
+     *  emptied selection, a one-sided date range, an invalid numeric range, number text
+     *  that isn't a valid value, or a cleared bound go through onFilterRemove (or nothing,
+     *  when the filter isn't set) instead. Number fields emit on every keystroke that
+     *  leaves them valid, so debounce the request this triggers. */
     onFilterChange: (key: string, value: unknown) => void;
     /** Fires when a chip's × is clicked, or when an edit leaves a field with no valid
      *  value. Maps 1:1 onto useServerTable's clearFilter(id). */

package/dist/index.js

@@ -2977,7 +2977,8 @@ function NumberInput({
         )
       ] })
     ] }),
-    shownError ? /* @__PURE__ */ jsxs36("span", { id: errorId, className: "fd-field-error", children: [
+    /* @__PURE__ */ jsx42("span", { id: errorId, className: "fd-sr", role: "status", children: shownError ?? "" }),
+    shownError ? /* @__PURE__ */ jsxs36("span", { className: "fd-field-error", "aria-hidden": "true", children: [
       /* @__PURE__ */ jsx42("i", { className: "ph ph-warning-circle", "aria-hidden": "true" }),
       shownError
     ] }) : help ? /* @__PURE__ */ jsx42("span", { className: "fd-field-help", children: help }) : null
@@ -3418,9 +3419,7 @@ function MultiSelectPanel({
       mountedRef.current = false;
     };
   }, []);
-  const commit = (nextValues, nextOperator = operator) => {
-    onCommit({ operator: nextOperator, values: nextValues });
-  };
+  const commit = (nextValues, nextOperator = operator) => onCommit({ operator: nextOperator, values: nextValues });
   const setOperator = (op) => {
     setDraftOperator(op);
     if (selectedRef.current.length > 0) commit(selectedRef.current, op);
@@ -3501,7 +3500,11 @@ function MultiSelectPanel({
         setPasteError("This filter allows at most " + field.maxValues + " values; adding this list would make " + merged.size + ".");
         return;
       }
-      commit(Array.from(merged.values()), operatorRef.current);
+      const applied = commit(Array.from(merged.values()), operatorRef.current);
+      if (!applied.ok) {
+        setPasteError(applied.reason);
+        return;
+      }
       setPasteText("");
     }, (err) => {
       if (!mountedRef.current) return;
@@ -3638,6 +3641,34 @@ function MultiSelectPanel({
     }
   );
 }
+function useTextValidity(onFlip) {
+  const invalidRef = React24.useRef(/* @__PURE__ */ new Set());
+  const [, rerender] = React24.useReducer((n) => n + 1, 0);
+  const onFlipRef = React24.useRef(onFlip);
+  onFlipRef.current = onFlip;
+  const record = (name, valid) => {
+    const invalid = invalidRef.current;
+    if (valid !== invalid.has(name)) return false;
+    if (valid) invalid.delete(name);
+    else invalid.add(name);
+    rerender();
+    return true;
+  };
+  return {
+    allValid: () => invalidRef.current.size === 0,
+    report: (name) => (valid) => {
+      if (record(name, valid)) onFlipRef.current();
+    },
+    /** For an input that is about to unmount: it has nothing left to show. */
+    forget: (name) => {
+      record(name, true);
+    }
+  };
+}
+function applicable(field, candidate, textValid) {
+  if (!textValid || candidate === void 0) return void 0;
+  return validateFilterValue(field, candidate).ok ? candidate : void 0;
+}
 function RangePanel({
   field,
   value,
@@ -3647,19 +3678,22 @@ function RangePanel({
 }) {
   const [draft, setDraft] = React24.useState({ min: value?.min, max: value?.max });
   const draftRef = React24.useRef(draft);
-  const [minTextValid, setMinTextValid] = React24.useState(true);
-  const [maxTextValid, setMaxTextValid] = React24.useState(true);
+  const publish = () => {
+    const { min, max } = draftRef.current;
+    onCommit(applicable(field, min == null && max == null ? void 0 : { min, max }, validity.allValid()));
+  };
+  const validity = useTextValidity(publish);
   const draftMin = draft.min;
   const draftMax = draft.max;
   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 doneDisabled = !validity.allValid() || !!comboError;
   const apply = (patch) => {
     const next = { ...draftRef.current, ...patch };
     draftRef.current = next;
     setDraft(next);
-    onCommit(next.min == null && next.max == null ? void 0 : next);
+    publish();
   };
   return /* @__PURE__ */ jsx45(
     Popover,
@@ -3684,7 +3718,7 @@ function RangePanel({
             integer: field.integer,
             placeholder: field.minPlaceholder,
             onChange: (e) => apply({ min: e.target.value }),
-            onValidityChange: setMinTextValid
+            onValidityChange: validity.report("min")
           }
         ),
         /* @__PURE__ */ jsx45(
@@ -3699,7 +3733,7 @@ function RangePanel({
             error: comboError,
             placeholder: field.maxPlaceholder,
             onChange: (e) => apply({ max: e.target.value }),
-            onValidityChange: setMaxTextValid
+            onValidityChange: validity.report("max")
           }
         )
       ] })
@@ -3715,34 +3749,47 @@ function DatePanel({
 }) {
   const defaultDays = field.defaultDays ?? 30;
   const maxDays = effectiveMaxDays(field);
-  const [daysTextValid, setDaysTextValid] = React24.useState(true);
   const [kind, setKind] = React24.useState(value?.kind ?? "withinDays");
   const [daysDraft, setDaysDraft] = React24.useState(
     value?.kind === "withinDays" ? value.days : defaultDays
   );
+  const daysRef = React24.useRef(daysDraft);
   const [between, setBetween] = React24.useState(
     value?.kind === "between" ? { from: value.from, to: value.to } : { from: "", to: "" }
   );
+  const shownWithinDays = () => {
+    const days = daysRef.current;
+    return applicable(field, days == null ? void 0 : { kind: "withinDays", days }, validity.allValid());
+  };
+  const validity = useTextValidity(() => onCommit(shownWithinDays()));
   const applyWithinDays = (days) => {
+    daysRef.current = days;
     setDaysDraft(days);
-    onCommit(days == null ? void 0 : { kind: "withinDays", days });
+    onCommit(shownWithinDays());
   };
   const applyBetween = (from, to) => {
     setBetween({ from, to });
-    onCommit(from && to ? { kind: "between", from, to } : void 0);
+    onCommit(applicable(field, from && to ? { kind: "between", from, to } : void 0, true));
   };
   const switchKind = (next) => {
     if (next === kind) return;
     setKind(next);
-    if (next === "between") setBetween({ from: "", to: "" });
-    else setDaysDraft(defaultDays);
-    setDaysTextValid(true);
+    if (next === "between") {
+      setBetween({ from: "", to: "" });
+      validity.forget("days");
+    } else {
+      daysRef.current = defaultDays;
+      setDaysDraft(defaultDays);
+    }
     onCommit(void 0);
   };
-  const doneDisabled = kind === "withinDays" && !daysTextValid;
+  const doneDisabled = kind === "withinDays" && !validity.allValid();
   const confirm = () => {
     if (doneDisabled) return;
-    if (kind === "withinDays" && daysDraft != null) onCommit({ kind: "withinDays", days: daysDraft });
+    if (kind === "withinDays") {
+      const shown = shownWithinDays();
+      if (shown) onCommit(shown);
+    }
     onClose();
   };
   return /* @__PURE__ */ jsx45(
@@ -3779,7 +3826,7 @@ function DatePanel({
             integer: true,
             value: daysDraft ?? "",
             onChange: (e) => applyWithinDays(e.target.value),
-            onValidityChange: setDaysTextValid
+            onValidityChange: validity.report("days")
           }
         ) : /* @__PURE__ */ jsx45(
           DatePicker,
@@ -3804,7 +3851,14 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
     for (const f of fields) assertValidFieldDefinition(f);
   }
   const latest = React24.useRef({ fields, filters, onFilterChange, onFilterRemove });
-  latest.current = { fields, filters, onFilterChange, onFilterRemove };
+  const filtersProp = React24.useRef(filters);
+  if (filters !== filtersProp.current) {
+    filtersProp.current = filters;
+    latest.current.filters = filters;
+  }
+  latest.current.fields = fields;
+  latest.current.onFilterChange = onFilterChange;
+  latest.current.onFilterRemove = onFilterRemove;
   const commit = (field, candidate) => {
     const current2 = latest.current.fields.find((f) => f.key === field.key);
     if (!current2) return { ok: false, reason: "This filter is no longer available" };