@flytedan/flytebot-design-system 0.35.0 → 0.37.0

package/dist/index.cjs

@@ -3728,16 +3728,12 @@ function MultiSelectPanel({
   const [unmatchedTokens, setUnmatchedTokens] = React25.useState([]);
   const [pasteError, setPasteError] = React25.useState(null);
   const pasteWrapRef = React25.useRef(null);
-  const [resolvedAt, setResolvedAt] = React25.useState(0);
   React25.useEffect(() => {
     if (mode2 === "paste") pasteWrapRef.current?.querySelector("textarea")?.focus();
   }, [mode2]);
-  React25.useLayoutEffect(() => {
-    if (resolvedAt === 0) return;
-    pasteWrapRef.current?.querySelector("textarea")?.focus();
-  }, [resolvedAt]);
   const doResolve = () => {
     if (!field.resolve) return;
+    if (pasteLoading) return;
     const tokens = Array.from(new Set(pasteText.split(/[\n,]/).map((t) => t.trim()).filter(Boolean)));
     if (!tokens.length) return;
     setPasteLoading(true);
@@ -3758,7 +3754,6 @@ function MultiSelectPanel({
         return;
       }
       setPasteText("");
-      setResolvedAt((n) => n + 1);
     }, (err) => {
       if (!mountedRef.current) return;
       setPasteLoading(false);
@@ -3821,7 +3816,8 @@ function MultiSelectPanel({
         rows: 4,
         placeholder: field.pastePlaceholder || field.placeholder || "Paste names, one per line or comma-separated",
         value: pasteText,
-        disabled: pasteLoading,
+        readOnly: pasteLoading,
+        "aria-busy": pasteLoading || void 0,
         onChange: (e) => setPasteText(e.target.value),
         onKeyDown: (e) => {
           if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
@@ -3877,7 +3873,28 @@ function MultiSelectPanel({
       );
     }) }) : null
   ] });
-  const footer = mode2 === "paste" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { size: "sm", variant: "secondary", onClick: doResolve, disabled: pasteLoading || !pasteText.trim(), children: pasteLoading ? "Resolving\u2026" : "Resolve" }) : void 0;
+  const resolveDisabled = pasteLoading || !pasteText.trim();
+  const footer = mode2 === "paste" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    Button,
+    {
+      size: "sm",
+      variant: "secondary",
+      "aria-disabled": resolveDisabled,
+      onClick: (e) => {
+        if (resolveDisabled) {
+          e.preventDefault();
+          return;
+        }
+        doResolve();
+      },
+      onKeyDown: (e) => {
+        if (resolveDisabled && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+        }
+      },
+      children: pasteLoading ? "Resolving\u2026" : "Resolve"
+    }
+  ) : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     Popover,
     {
@@ -3946,17 +3963,25 @@ function useReseedFromProps(value, applies, reseed) {
     if (!sameValue(value, applies())) reseed(value);
   }, [value, applies, reseed]);
 }
-function usePreserveFocusAcrossRemount(seed) {
-  const pendingId = React25.useRef(null);
-  const capture = (ids) => {
+function usePreserveFocusAcrossRemount(seed, fields) {
+  const pendingName = React25.useRef(null);
+  const fieldsRef = useLatest(fields);
+  const capture = () => {
     const active = document.activeElement;
-    pendingId.current = active instanceof HTMLElement && ids.includes(active.id) ? active.id : null;
+    pendingName.current = null;
+    if (!(active instanceof HTMLElement)) return;
+    for (const [name, ref] of Object.entries(fieldsRef.current)) {
+      if (ref.current?.contains(active)) {
+        pendingName.current = name;
+        break;
+      }
+    }
   };
   React25.useLayoutEffect(() => {
-    const id = pendingId.current;
-    if (!id) return;
-    pendingId.current = null;
-    document.getElementById(id)?.focus();
+    const name = pendingName.current;
+    if (!name) return;
+    pendingName.current = null;
+    fieldsRef.current[name]?.current?.querySelector("input,textarea,select,button")?.focus();
   }, [seed]);
   return capture;
 }
@@ -3970,9 +3995,11 @@ function RangePanel({
 }) {
   const [draft, setDraft] = React25.useState(() => rangeDraft(value));
   const [seed, setSeed] = React25.useState(0);
-  const preserveFocus = usePreserveFocusAcrossRemount(seed);
-  const minId = field.key + "-min";
-  const maxId = field.key + "-max";
+  const minId = React25.useId();
+  const maxId = React25.useId();
+  const minWrapRef = React25.useRef(null);
+  const maxWrapRef = React25.useRef(null);
+  const preserveFocus = usePreserveFocusAcrossRemount(seed, { min: minWrapRef, max: maxWrapRef });
   const draftRef = React25.useRef(draft);
   const shown = () => {
     const { min, max } = draftRef.current;
@@ -3983,7 +4010,7 @@ function RangePanel({
   };
   const validity = useTextValidity(publish);
   useReseedFromProps(value, shown, (next) => {
-    preserveFocus([minId, maxId]);
+    preserveFocus();
     draftRef.current = rangeDraft(next);
     setDraft(draftRef.current);
     validity.reset();
@@ -4001,6 +4028,16 @@ function RangePanel({
     setDraft(next);
     publish();
   };
+  const doneClick = (e) => {
+    if (doneDisabled) {
+      e.preventDefault();
+      return;
+    }
+    onClose();
+  };
+  const doneKeyDown = (e) => {
+    if (doneDisabled && (e.key === "Enter" || e.key === " ")) e.preventDefault();
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     Popover,
     {
@@ -4011,9 +4048,9 @@ function RangePanel({
       offset: 6,
       width: PANEL_WIDTH.range,
       label: field.label,
-      footer: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { size: "sm", variant: "secondary", onClick: onClose, disabled: doneDisabled, children: "Done" }),
+      footer: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { size: "sm", variant: "secondary", "aria-disabled": doneDisabled, onClick: doneClick, onKeyDown: doneKeyDown, children: "Done" }),
       children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "fd-stack fd-gap-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { ref: minWrapRef, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           NumberInput,
           {
             id: minId,
@@ -4028,8 +4065,8 @@ function RangePanel({
             onValidityChange: validity.report("min")
           },
           "min-" + seed
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { ref: maxWrapRef, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           NumberInput,
           {
             id: maxId,
@@ -4045,7 +4082,7 @@ function RangePanel({
             onValidityChange: validity.report("max")
           },
           "max-" + seed
-        )
+        ) })
       ] })
     }
   );
@@ -4072,8 +4109,9 @@ function DatePanel({
   const daysConfirmed = React25.useRef(value?.kind === "withinDays");
   const [between, setBetween] = React25.useState(initial.between);
   const [seed, setSeed] = React25.useState(0);
-  const preserveFocus = usePreserveFocusAcrossRemount(seed);
-  const daysId = field.key + "-days";
+  const daysId = React25.useId();
+  const daysWrapRef = React25.useRef(null);
+  const preserveFocus = usePreserveFocusAcrossRemount(seed, { days: daysWrapRef });
   const shownWithinDays = () => {
     const days = daysRef.current;
     return applicable(field, days == null ? void 0 : { kind: "withinDays", days }, validity.allValid());
@@ -4089,7 +4127,7 @@ function DatePanel({
     return daysConfirmed.current ? shownWithinDays() : void 0;
   };
   useReseedFromProps(value, applies, (next) => {
-    preserveFocus([daysId]);
+    preserveFocus();
     const d = dateDraft(field, next);
     setKind(d.kind);
     daysRef.current = d.days;
@@ -4132,6 +4170,9 @@ function DatePanel({
     }
     onClose();
   };
+  const doneKeyDown = (e) => {
+    if (doneDisabled && (e.key === "Enter" || e.key === " ")) e.preventDefault();
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     Popover,
     {
@@ -4142,7 +4183,7 @@ function DatePanel({
       offset: 6,
       width: PANEL_WIDTH.date,
       label: field.label,
-      footer: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { size: "sm", variant: "secondary", onClick: confirm, disabled: doneDisabled, children: "Done" }),
+      footer: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { size: "sm", variant: "secondary", "aria-disabled": doneDisabled, onClick: confirm, onKeyDown: doneKeyDown, children: "Done" }),
       children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "fd-stack fd-gap-sm", children: [
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           SegmentedControl,
@@ -4156,7 +4197,7 @@ function DatePanel({
             onChange: (k) => switchKind(k)
           }
         ),
-        kind === "withinDays" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        kind === "withinDays" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { ref: daysWrapRef, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           NumberInput,
           {
             id: daysId,
@@ -4170,7 +4211,7 @@ function DatePanel({
             onValidityChange: validity.report("days")
           },
           "days-" + seed
-        ) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        ) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           DatePicker,
           {
             range: true,