@flytedan/flytebot-design-system 0.32.0 → 0.33.0

package/README.md

@@ -81,7 +81,8 @@ pnpm run docs
 pnpm run build       # tsup — emits dist/{index.js,index.cjs,index.d.ts}
 pnpm run typecheck   # tsc --noEmit
 pnpm run lint        # eslint .
-pnpm run test        # tsup, then vitest run (some tests check the built dist/)
+pnpm run test        # vitest run — needs no build
+pnpm run test:dist   # tsup, then the checks of the built dist/ (scripts/vitest.dist.config.ts)
 ```
 
 ## Releasing
@@ -112,9 +113,10 @@ bash scripts/release.sh <new-version> "<summary>"
 - fetches `origin` and checks out `origin/main`'s exact tip — never unmerged
   work;
 - installs with `pnpm install --frozen-lockfile`;
-- runs the gates: `tsup` (first, since some tests check the built `dist/`),
-  `vitest run`, `tsc --noEmit`, `tsc --noEmit -p tsconfig.docs.json`, the docs
-  `vite build`, and `lint` if the repo has that script;
+- runs the gates: `tsup`, then straight away the checks of that build
+  (`vitest run --config scripts/vitest.dist.config.ts`), then `vitest run`,
+  `tsc --noEmit`, `tsc --noEmit -p tsconfig.docs.json`, the docs `vite build`,
+  and `lint` if the repo has that script;
 - refuses `<new-version>` unless it is greater than both the working
   checkout's `package.json` version and npm's currently published `latest`;
 - bumps `package.json`, commits `chore(release): <new-version> — <summary>`,

package/dist/index.cjs

@@ -3217,7 +3217,8 @@ function NumberInput({
         )
       ] })
     ] }),
-    shownError ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { id: errorId, className: "fd-field-error", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { id: errorId, className: "fd-sr", role: "status", children: shownError ?? "" }),
+    shownError ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "fd-field-error", "aria-hidden": "true", children: [
       /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("i", { className: "ph ph-warning-circle", "aria-hidden": "true" }),
       shownError
     ] }) : help ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "fd-field-help", children: help }) : null
@@ -3658,9 +3659,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);
@@ -3741,7 +3740,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;
@@ -3878,6 +3881,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,
@@ -3887,19 +3918,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__ */ (0, import_jsx_runtime45.jsx)(
     Popover,
@@ -3924,7 +3958,7 @@ function RangePanel({
             integer: field.integer,
             placeholder: field.minPlaceholder,
             onChange: (e) => apply({ min: e.target.value }),
-            onValidityChange: setMinTextValid
+            onValidityChange: validity.report("min")
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
@@ -3939,7 +3973,7 @@ function RangePanel({
             error: comboError,
             placeholder: field.maxPlaceholder,
             onChange: (e) => apply({ max: e.target.value }),
-            onValidityChange: setMaxTextValid
+            onValidityChange: validity.report("max")
           }
         )
       ] })
@@ -3955,34 +3989,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__ */ (0, import_jsx_runtime45.jsx)(
@@ -4019,7 +4066,7 @@ function DatePanel({
             integer: true,
             value: daysDraft ?? "",
             onChange: (e) => applyWithinDays(e.target.value),
-            onValidityChange: setDaysTextValid
+            onValidityChange: validity.report("days")
           }
         ) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           DatePicker,
@@ -4044,7 +4091,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" };