@flytedan/flytebot-design-system 0.37.0 → 0.38.0

package/dist/index.d.cts

@@ -19,8 +19,18 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     loading?: boolean;
     block?: boolean;
     as?: "button" | "a";
-}
-declare function Button({ children, variant, size, icon, trailingIcon, arrow, loading, disabled, block, as, className, ...rest }: ButtonProps): React.JSX.Element;
+    /** When `disabled` (or `loading`), stay in the tab order instead of going natively
+     *  `disabled`: renders `aria-disabled="true"` rather than the `disabled` attribute,
+     *  keeps the `:focus-visible` ring, and swallows click/Enter/Space without ever
+     *  submitting a form. Use whenever a button's disabled state can flip while it holds
+     *  focus (e.g. a controlled panel re-seeding mid-edit) — a native `disabled` drops focus
+     *  to `<body>` the instant it applies, and nothing can intercept or redirect that.
+     *  Also makes `aria-disabled` always explicit ("true"/"false", never absent): since the
+     *  browser can no longer tell assistive tech this button's state from `disabled` itself,
+     *  the ARIA state has to say so on its own at every render, not only while disabled. */
+    focusableWhenDisabled?: boolean;
+}
+declare function Button({ children, variant, size, icon, trailingIcon, arrow, loading, disabled, focusableWhenDisabled, block, as, className, onClick, onKeyDown, ...rest }: ButtonProps): React.JSX.Element;
 
 /** A square action carrying only a Phosphor glyph. Always needs a label for a11y. */
 interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -2239,12 +2249,19 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
     error?: string;
     required?: boolean;
     rows?: number;
+    /** Read-only plus `aria-busy`, with the same visible look as `disabled` (the
+     *  `.fd-input-disabled` tokens) — for a value an in-flight request is about to replace
+     *  while the field stays reachable. Unlike `disabled`, `busy` never sets the native
+     *  `disabled` attribute: `readOnly` blocks editing without removing the control from the
+     *  tab order or dropping focus that was already on it, so a keyboard user's in-progress
+     *  action (e.g. Ctrl+Enter to resolve) still reaches it while busy. */
+    busy?: boolean;
     /** Applied to the outer .fd-field element — this is where width belongs. */
     style?: React.CSSProperties;
     /** Applied to the outer .fd-field element, like `style` — the same rule as Input. */
     className?: string;
 }
-declare function Textarea({ label, help, error, required, rows, disabled, id, className, style, ...rest }: TextareaProps): React.JSX.Element;
+declare function Textarea({ label, help, error, required, rows, disabled, busy, readOnly, id, className, style, ...rest }: TextareaProps): React.JSX.Element;
 
 /** Numeric field with thousands formatting while unfocused, +/- steppers (press once for
  *  one step, press and hold to repeat with acceleration), ArrowUp/ArrowDown (Shift for

package/dist/index.d.ts

@@ -19,8 +19,18 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     loading?: boolean;
     block?: boolean;
     as?: "button" | "a";
-}
-declare function Button({ children, variant, size, icon, trailingIcon, arrow, loading, disabled, block, as, className, ...rest }: ButtonProps): React.JSX.Element;
+    /** When `disabled` (or `loading`), stay in the tab order instead of going natively
+     *  `disabled`: renders `aria-disabled="true"` rather than the `disabled` attribute,
+     *  keeps the `:focus-visible` ring, and swallows click/Enter/Space without ever
+     *  submitting a form. Use whenever a button's disabled state can flip while it holds
+     *  focus (e.g. a controlled panel re-seeding mid-edit) — a native `disabled` drops focus
+     *  to `<body>` the instant it applies, and nothing can intercept or redirect that.
+     *  Also makes `aria-disabled` always explicit ("true"/"false", never absent): since the
+     *  browser can no longer tell assistive tech this button's state from `disabled` itself,
+     *  the ARIA state has to say so on its own at every render, not only while disabled. */
+    focusableWhenDisabled?: boolean;
+}
+declare function Button({ children, variant, size, icon, trailingIcon, arrow, loading, disabled, focusableWhenDisabled, block, as, className, onClick, onKeyDown, ...rest }: ButtonProps): React.JSX.Element;
 
 /** A square action carrying only a Phosphor glyph. Always needs a label for a11y. */
 interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -2239,12 +2249,19 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
     error?: string;
     required?: boolean;
     rows?: number;
+    /** Read-only plus `aria-busy`, with the same visible look as `disabled` (the
+     *  `.fd-input-disabled` tokens) — for a value an in-flight request is about to replace
+     *  while the field stays reachable. Unlike `disabled`, `busy` never sets the native
+     *  `disabled` attribute: `readOnly` blocks editing without removing the control from the
+     *  tab order or dropping focus that was already on it, so a keyboard user's in-progress
+     *  action (e.g. Ctrl+Enter to resolve) still reaches it while busy. */
+    busy?: boolean;
     /** Applied to the outer .fd-field element — this is where width belongs. */
     style?: React.CSSProperties;
     /** Applied to the outer .fd-field element, like `style` — the same rule as Input. */
     className?: string;
 }
-declare function Textarea({ label, help, error, required, rows, disabled, id, className, style, ...rest }: TextareaProps): React.JSX.Element;
+declare function Textarea({ label, help, error, required, rows, disabled, busy, readOnly, id, className, style, ...rest }: TextareaProps): React.JSX.Element;
 
 /** Numeric field with thousands formatting while unfocused, +/- steppers (press once for
  *  one step, press and hold to repeat with acceleration), ArrowUp/ArrowDown (Shift for

package/dist/index.js

@@ -8,6 +8,9 @@ var VARIANTS = {
   danger: "fd-btn-danger",
   link: "fd-btn-link"
 };
+function isActivationKey(key) {
+  return key === "Enter" || key === " ";
+}
 function Button({
   children,
   variant = "primary",
@@ -17,12 +20,16 @@ function Button({
   arrow = false,
   loading = false,
   disabled = false,
+  focusableWhenDisabled = false,
   block = false,
   as = "button",
   className = "",
+  onClick,
+  onKeyDown,
   ...rest
 }) {
   const Tag2 = as;
+  const inert = (disabled || loading) && focusableWhenDisabled;
   const cls = [
     "fd-btn",
     VARIANTS[variant] || VARIANTS.primary,
@@ -35,9 +42,16 @@ function Button({
     Tag2,
     {
       className: cls,
-      disabled: Tag2 === "button" ? disabled || loading : void 0,
-      "aria-disabled": disabled || loading ? "true" : void 0,
+      disabled: Tag2 === "button" ? (disabled || loading) && !focusableWhenDisabled : void 0,
+      "aria-disabled": focusableWhenDisabled ? String(disabled || loading) : disabled || loading ? "true" : void 0,
       "aria-busy": loading ? "true" : void 0,
+      onClick: inert ? (e) => {
+        e.preventDefault();
+      } : onClick,
+      onKeyDown: inert ? (e) => {
+        if (isActivationKey(e.key)) e.preventDefault();
+        onKeyDown?.(e);
+      } : onKeyDown,
       ...rest,
       children: [
         icon && !loading ? /* @__PURE__ */ jsx("i", { className: "ph ph-" + icon, "aria-hidden": "true" }) : null,
@@ -3196,12 +3210,23 @@ function DatePicker({ label, help, error, required = false, disabled = false, ra
 
 // src/components/forms/Textarea.tsx
 import { jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
-function Textarea({ label, help, error, required = false, rows = 4, disabled = false, id, className = "", style, ...rest }) {
+function Textarea({ label, help, error, required = false, rows = 4, disabled = false, busy = false, readOnly, id, className = "", style, ...rest }) {
   const fieldId = useFieldId(id);
-  const box = ["fd-input", "fd-input-textarea", error ? "fd-input-error" : "", disabled ? "fd-input-disabled" : ""].filter(Boolean).join(" ");
+  const box = ["fd-input", "fd-input-textarea", error ? "fd-input-error" : "", disabled || busy ? "fd-input-disabled" : ""].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs38("div", { className: ["fd-field", className].filter(Boolean).join(" "), style, children: [
     label ? /* @__PURE__ */ jsx44(FieldLabel, { htmlFor: fieldId, required, children: label }) : null,
-    /* @__PURE__ */ jsx44("div", { className: box, children: /* @__PURE__ */ jsx44("textarea", { id: fieldId, rows, disabled, "aria-invalid": error ? "true" : void 0, ...rest }) }),
+    /* @__PURE__ */ jsx44("div", { className: box, children: /* @__PURE__ */ jsx44(
+      "textarea",
+      {
+        id: fieldId,
+        rows,
+        disabled,
+        readOnly: busy || readOnly,
+        "aria-busy": busy || void 0,
+        "aria-invalid": error ? "true" : void 0,
+        ...rest
+      }
+    ) }),
     error ? /* @__PURE__ */ jsxs38("span", { className: "fd-field-error", children: [
       /* @__PURE__ */ jsx44("i", { className: "ph ph-warning-circle", "aria-hidden": "true" }),
       error
@@ -3576,8 +3601,7 @@ function MultiSelectPanel({
         rows: 4,
         placeholder: field.pastePlaceholder || field.placeholder || "Paste names, one per line or comma-separated",
         value: pasteText,
-        readOnly: pasteLoading,
-        "aria-busy": pasteLoading || void 0,
+        busy: pasteLoading,
         onChange: (e) => setPasteText(e.target.value),
         onKeyDown: (e) => {
           if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
@@ -3639,19 +3663,9 @@ function MultiSelectPanel({
     {
       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();
-        }
-      },
+      disabled: resolveDisabled,
+      focusableWhenDisabled: true,
+      onClick: doResolve,
       children: pasteLoading ? "Resolving\u2026" : "Resolve"
     }
   ) : void 0;
@@ -3788,16 +3802,6 @@ 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__ */ jsx45(
     Popover,
     {
@@ -3808,7 +3812,7 @@ function RangePanel({
       offset: 6,
       width: PANEL_WIDTH.range,
       label: field.label,
-      footer: /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "secondary", "aria-disabled": doneDisabled, onClick: doneClick, onKeyDown: doneKeyDown, children: "Done" }),
+      footer: /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "secondary", disabled: doneDisabled, focusableWhenDisabled: true, onClick: onClose, children: "Done" }),
       children: /* @__PURE__ */ jsxs39("span", { className: "fd-stack fd-gap-sm", children: [
         /* @__PURE__ */ jsx45("span", { ref: minWrapRef, children: /* @__PURE__ */ jsx45(
           NumberInput,
@@ -3923,16 +3927,12 @@ function DatePanel({
   };
   const doneDisabled = kind === "withinDays" && !validity.allValid();
   const confirm = () => {
-    if (doneDisabled) return;
     if (kind === "withinDays") {
       const shown = shownWithinDays();
       if (shown) onCommit(shown);
     }
     onClose();
   };
-  const doneKeyDown = (e) => {
-    if (doneDisabled && (e.key === "Enter" || e.key === " ")) e.preventDefault();
-  };
   return /* @__PURE__ */ jsx45(
     Popover,
     {
@@ -3943,7 +3943,7 @@ function DatePanel({
       offset: 6,
       width: PANEL_WIDTH.date,
       label: field.label,
-      footer: /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "secondary", "aria-disabled": doneDisabled, onClick: confirm, onKeyDown: doneKeyDown, children: "Done" }),
+      footer: /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "secondary", disabled: doneDisabled, focusableWhenDisabled: true, onClick: confirm, children: "Done" }),
       children: /* @__PURE__ */ jsxs39("span", { className: "fd-stack fd-gap-sm", children: [
         /* @__PURE__ */ jsx45(
           SegmentedControl,