@flytedan/flytebot-design-system 0.34.0 → 0.36.0

package/dist/index.js

@@ -3631,7 +3631,28 @@ function MultiSelectPanel({
       );
     }) }) : null
   ] });
-  const footer = mode2 === "paste" ? /* @__PURE__ */ jsx45(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__ */ jsx45(
+    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__ */ jsx45(
     Popover,
     {
@@ -3700,6 +3721,28 @@ function useReseedFromProps(value, applies, reseed) {
     if (!sameValue(value, applies())) reseed(value);
   }, [value, applies, reseed]);
 }
+function usePreserveFocusAcrossRemount(seed, fields) {
+  const pendingName = React25.useRef(null);
+  const fieldsRef = useLatest(fields);
+  const capture = () => {
+    const active = document.activeElement;
+    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 name = pendingName.current;
+    if (!name) return;
+    pendingName.current = null;
+    fieldsRef.current[name]?.current?.querySelector("input,textarea,select,button")?.focus();
+  }, [seed]);
+  return capture;
+}
 var rangeDraft = (value) => ({ min: value?.min, max: value?.max });
 function RangePanel({
   field,
@@ -3710,6 +3753,11 @@ function RangePanel({
 }) {
   const [draft, setDraft] = React25.useState(() => rangeDraft(value));
   const [seed, setSeed] = React25.useState(0);
+  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;
@@ -3720,6 +3768,7 @@ function RangePanel({
   };
   const validity = useTextValidity(publish);
   useReseedFromProps(value, shown, (next) => {
+    preserveFocus();
     draftRef.current = rangeDraft(next);
     setDraft(draftRef.current);
     validity.reset();
@@ -3749,9 +3798,10 @@ function RangePanel({
       label: field.label,
       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(
+        /* @__PURE__ */ jsx45("span", { ref: minWrapRef, children: /* @__PURE__ */ jsx45(
           NumberInput,
           {
+            id: minId,
             label: field.minLabel || "At least",
             value: draftMin ?? "",
             min: field.min,
@@ -3763,10 +3813,11 @@ function RangePanel({
             onValidityChange: validity.report("min")
           },
           "min-" + seed
-        ),
-        /* @__PURE__ */ jsx45(
+        ) }),
+        /* @__PURE__ */ jsx45("span", { ref: maxWrapRef, children: /* @__PURE__ */ jsx45(
           NumberInput,
           {
+            id: maxId,
             label: field.maxLabel || "At most",
             value: draftMax ?? "",
             min: field.min,
@@ -3779,7 +3830,7 @@ function RangePanel({
             onValidityChange: validity.report("max")
           },
           "max-" + seed
-        )
+        ) })
       ] })
     }
   );
@@ -3806,6 +3857,9 @@ function DatePanel({
   const daysConfirmed = React25.useRef(value?.kind === "withinDays");
   const [between, setBetween] = React25.useState(initial.between);
   const [seed, setSeed] = React25.useState(0);
+  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());
@@ -3821,6 +3875,7 @@ function DatePanel({
     return daysConfirmed.current ? shownWithinDays() : void 0;
   };
   useReseedFromProps(value, applies, (next) => {
+    preserveFocus();
     const d = dateDraft(field, next);
     setKind(d.kind);
     daysRef.current = d.days;
@@ -3887,9 +3942,10 @@ function DatePanel({
             onChange: (k) => switchKind(k)
           }
         ),
-        kind === "withinDays" ? /* @__PURE__ */ jsx45(
+        kind === "withinDays" ? /* @__PURE__ */ jsx45("span", { ref: daysWrapRef, children: /* @__PURE__ */ jsx45(
           NumberInput,
           {
+            id: daysId,
             label: "Days",
             min: 1,
             max: maxDays,
@@ -3900,7 +3956,7 @@ function DatePanel({
             onValidityChange: validity.report("days")
           },
           "days-" + seed
-        ) : /* @__PURE__ */ jsx45(
+        ) }) : /* @__PURE__ */ jsx45(
           DatePicker,
           {
             range: true,