@ostack.tech/ui-kform 0.6.4 → 0.7.0

package/dist/ostack-ui-kform.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { usePrefix as usePrefix$1, useControllableState, useLatestValues, combineEventHandlers, LocalizationProvider as LocalizationProvider$1, usePrinting, useConstant, useSpacing, useCssVars, NATIVE_CONTROLS, useResponsiveValues, useCombinedRef, cx, useIsInRoot, warnOnce, usePrintInProgress, PrefixProvider, Root, computed, TabContent, ErrorBoundary, DocumentTitle, Spinner, useToastManager, useStartPrintingTask, Tabs, useErrorReporter, EMPTY_STORE, Field, Feedback, FeedbackList, FeedbackPopover, useMediaBreakpointUp, DropdownMenu, DropdownMenuTrigger, Button, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuItem, useAlertDialog, DropdownMenuRadioItem, controlStatusToAccent, VisuallyHidden, IconButton, Tab, boolDataAttr, TabList, useIsInTableCell, useDataTableColumnLabel, useOnFieldLabelChange, Checkbox, OptionsGroup, Option, CheckboxGroup, useDateTransformer, DateInput, DateRangeInput, usePrintClassNames, Input, Dialog, Tooltip, DialogTrigger, ControlAddon, Icon, DialogContent, DialogHeader, DialogTitle, DialogBody, Alert, Stack, Popover, PopoverTrigger, PopoverContent, useMeasure, Container, Select, MenuListItem, MenuList, StepContent, Step, StepList, Stepper, CloseButton, useScrollPosition, setBoolDataAttr, Card, CardHeader, CardTitle, CardBody, useIntersectionObserver, useKeyboardShortcut, NumericInput, Link, usePrint, usePrinterDocumentTitle, PrinterTrigger, RadioGroup, Radio, ButtonGroup, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogBody, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, DataTableCell, DataTableRow, useDataTableApiRef, DataTable, Slot, DataTableContent, DataTablePagination, DataTableRowsPerPage, TextArea, PortalContext } from "@ostack.tech/ui";
 import { AbsolutePath, AbsolutePathFragment, PathMultimap, sliceTable, listableSize, Path, ValidationFailure, nullableSchemaInnerSchema, compareSchemaPaths, PromiseCancellationException, arrayToTable, indexOfTableRowId, isComputedSchema } from "@ostack.tech/kform";
-import { useResolvedPath, equals, useFormController, useForm, FormContext, CurrentPath, useCurrentPath, useFormManager, useFormattedValue, InvalidPathError, AtPathError, useIssuesTracker, useFormContext, useInput, useListableInput, formatTemporalAsString, useTemporalInput, useFileInput, useController, useNumericInput, formatNumericAsString, useFormatter } from "@ostack.tech/kform-react";
+import { useResolvedPath, equals, useFormController, useForm, FormContext, CurrentPath, useCurrentPath, useFormManager, useFormattedValue, InvalidPathError, AtPathError, useIssuesTracker, useFormContext, useInput, useListableInput, formatTemporalAsString, useTemporalInput, useFileInput, toFileList, useController, useNumericInput, formatNumericAsString, useFormatter } from "@ostack.tech/kform-react";
 import { createContext, useContext, useCallback, useMemo, useRef, useEffect, forwardRef, useState, useImperativeHandle, startTransition, Suspense, useDeferredValue, Children, isValidElement, createElement, memo } from "react";
 import { createStore, useStore } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
@@ -150,7 +150,7 @@ function pathSpecificity(path) {
   }
   return specificity;
 }
-const INITIAL = Symbol();
+const INITIAL = /* @__PURE__ */ Symbol();
 function useEqualityFn(selector, equalityFn = Object.is) {
   const latest = useRef(INITIAL);
   return (state) => {
@@ -2283,7 +2283,7 @@ function AnnexesMenuItem({
               circle: true,
               disabled: formIsDisabled,
               onClick: handleRemoveButtonClick,
-              "aria-hidden": "true"
+              "aria-hidden": true
             }
           )
         ] })
@@ -2618,14 +2618,13 @@ function useRegisterControl({
   const { useState: useState2, usePath, useInitialized, useDisplayStatus } = controller;
   const path = usePath();
   const formIsDisabled = useFormIsDisabled();
-  const displayDisabled = useState2((state) => !state.initialized || !state.exists) || formIsDisabled;
+  const displayDisabled = useState2((state) => state.initialized && !state.exists) || formIsDisabled;
   const displayReadOnly = useFormIsReadOnly();
-  const deferredIsValidating = useDeferredValue(
-    useState2((state) => state.validationStatus === "validating")
-  );
   const initialized = useInitialized();
-  const displayLoading = !initialized || deferredIsValidating;
   const displayStatusToDisplay = useDeferredValue(useDisplayStatus());
+  const displayValidating = useDeferredValue(
+    useState2((state) => state.validationStatus === "validating")
+  );
   const issuesToDisplay = useDeferredValue(
     useState2((state) => state.touched ? state.issues : [], {
       equalityFn: shallow
@@ -2662,21 +2661,23 @@ function useRegisterControl({
   );
   return useMemo(
     () => ({
-      displayLoading: printing ? false : displayLoading,
+      displayLoading: printing ? false : !initialized,
       displayDisabled: printing ? false : displayDisabled,
       displayReadOnly: printing ? false : displayReadOnly,
       displayStatusToDisplay: printing ? void 0 : displayStatusToDisplay,
+      displayValidating: printing ? false : displayValidating,
       issuesToDisplay: printing ? [] : issuesToDisplay,
       autofocusRef,
       handleFocus
     }),
     [
       autofocusRef,
+      displayValidating,
       displayDisabled,
-      displayLoading,
       displayReadOnly,
       displayStatusToDisplay,
       handleFocus,
+      initialized,
       issuesToDisplay,
       printing
     ]
@@ -2715,6 +2716,7 @@ const CheckboxControl = forwardRef(function CheckboxControl2({
   onTouchedStatusChange,
   required,
   loading,
+  showSpinner,
   disabled,
   readOnly,
   onFocus,
@@ -2746,6 +2748,7 @@ const CheckboxControl = forwardRef(function CheckboxControl2({
     displayDisabled,
     displayReadOnly,
     displayStatusToDisplay,
+    displayValidating,
     issuesToDisplay,
     autofocusRef,
     handleFocus
@@ -2783,6 +2786,7 @@ const CheckboxControl = forwardRef(function CheckboxControl2({
         name: inputProps.name,
         required: required ?? restrictions.required === true,
         loading: displayLoading || loading,
+        showSpinner: displayValidating || showSpinner,
         disabled: displayDisabled || disabled,
         readOnly: displayReadOnly || readOnly || inputProps.readOnly,
         status: displayStatusToControlStatus(displayStatusToDisplay),
@@ -2861,6 +2865,7 @@ const CheckboxGroupControl = forwardRef(function CheckboxGroupControl2({
   onTouchedStatusChange,
   required,
   loading,
+  showSpinner,
   disabled,
   readOnly,
   onFocus,
@@ -2913,6 +2918,7 @@ const CheckboxGroupControl = forwardRef(function CheckboxGroupControl2({
     displayDisabled,
     displayReadOnly,
     displayStatusToDisplay,
+    displayValidating,
     issuesToDisplay,
     autofocusRef,
     handleFocus
@@ -2954,6 +2960,7 @@ const CheckboxGroupControl = forwardRef(function CheckboxGroupControl2({
         name: inputProps.name,
         required: required ?? restrictions.required === true,
         loading: displayLoading || loading,
+        showSpinner: displayValidating || showSpinner,
         disabled: displayDisabled || disabled,
         readOnly: displayReadOnly || readOnly || inputProps.readOnly,
         status: displayStatusToControlStatus(displayStatusToDisplay),
@@ -3045,6 +3052,7 @@ const DateControl = forwardRef(function DateControl2({
   minDate,
   maxDate,
   loading,
+  showSpinner,
   disabled,
   readOnly,
   onFocus,
@@ -3087,6 +3095,7 @@ const DateControl = forwardRef(function DateControl2({
     displayDisabled,
     displayReadOnly,
     displayStatusToDisplay,
+    displayValidating,
     issuesToDisplay,
     autofocusRef,
     handleFocus
@@ -3130,6 +3139,7 @@ const DateControl = forwardRef(function DateControl2({
         minDate: minDate ?? minDateRestriction(schema),
         maxDate: maxDate ?? maxDateRestriction(schema),
         loading: displayLoading || loading,
+        showSpinner: displayValidating || showSpinner,
         disabled: displayDisabled || disabled,
         readOnly: displayReadOnly || readOnly || inputProps.readOnly,
         status: displayStatusToControlStatus(displayStatusToDisplay),
@@ -3166,8 +3176,10 @@ const DateRangeControl = forwardRef(function DateRangeControl2({
   required,
   minDate,
   maxDate,
-  startLoading,
-  endLoading,
+  loading,
+  showSpinners = loading,
+  showStartSpinner = showSpinners,
+  showEndSpinner = showSpinners,
   disabled,
   readOnly,
   startInputProps,
@@ -3263,6 +3275,7 @@ const DateRangeControl = forwardRef(function DateRangeControl2({
     displayDisabled: displayStartDisabled,
     displayReadOnly: displayStartReadOnly,
     displayStatusToDisplay: startDisplayStatusToDisplay,
+    displayValidating: displayStartValidating,
     issuesToDisplay: startIssuesToDisplay,
     autofocusRef: startAutofocusRef,
     handleFocus: handleStartFocus
@@ -3279,6 +3292,7 @@ const DateRangeControl = forwardRef(function DateRangeControl2({
     displayDisabled: displayEndDisabled,
     displayReadOnly: displayEndReadOnly,
     displayStatusToDisplay: endDisplayStatusToDisplay,
+    displayValidating: displayEndValidating,
     issuesToDisplay: endIssuesToDisplay,
     autofocusRef: endAutofocusRef,
     handleFocus: handleEndFocus
@@ -3330,8 +3344,9 @@ const DateRangeControl = forwardRef(function DateRangeControl2({
         required: required ?? (startRestrictions.required === true || endRestrictions.required === true),
         minDate: minDate ?? minDateRestriction(startSchema),
         maxDate: maxDate ?? maxDateRestriction(endSchema),
-        startLoading: displayStartLoading || startLoading,
-        endLoading: displayEndLoading || endLoading,
+        loading: displayStartLoading || displayEndLoading || loading,
+        showStartSpinner: displayStartValidating || showStartSpinner,
+        showEndSpinner: displayEndValidating || showEndSpinner,
         disabled: displayStartDisabled && displayEndDisabled || disabled,
         readOnly: displayStartReadOnly && displayEndReadOnly || readOnly || startInputProps?.readOnly && endInputProps?.readOnly,
         status: startDisplayStatusToDisplay === "error" || endDisplayStatusToDisplay === "error" ? "invalid" : startDisplayStatusToDisplay === "warning" || endDisplayStatusToDisplay === "warning" ? "warned" : void 0,
@@ -3402,6 +3417,7 @@ const FileControl = forwardRef(function FileControl2({
   required,
   accept,
   loading,
+  showSpinner,
   disabled,
   readOnly,
   showClearButton,
@@ -3419,17 +3435,17 @@ const FileControl = forwardRef(function FileControl2({
   downloadFileButtonLabel ??= locale7.FileControl.downloadFileButtonLabel;
   fallbackText ??= locale7.FileControl.fallbackText;
   const { printHidden } = usePrintClassNames();
-  const latestFileList = useRef(null);
+  const latestFile = useRef(null);
   const [file, setFile] = useState(null);
   const controller = useFileInput(
     path,
     {
       enabled: !useFormIsLoading(),
       formManager,
-      formatFromFileList: useCallback((fileList) => {
-        setFile(fileList.length === 0 ? null : fileList[0]);
-        latestFileList.current = fileList;
-        return fileList;
+      formatFromJsFile: useCallback((fileValue) => {
+        setFile(fileValue);
+        latestFile.current = fileValue;
+        return fileValue;
       }, []),
       onInitialized,
       onFormManagerEvent,
@@ -3448,6 +3464,7 @@ const FileControl = forwardRef(function FileControl2({
     displayDisabled,
     displayReadOnly,
     displayStatusToDisplay,
+    displayValidating,
     issuesToDisplay,
     autofocusRef,
     handleFocus
@@ -3470,7 +3487,7 @@ const FileControl = forwardRef(function FileControl2({
         onChange?.(evt);
         inputProps.onChange(evt);
       } else {
-        evt.target.files = latestFileList.current;
+        evt.target.files = toFileList(latestFile.current);
       }
     },
     [inputProps, onChange]
@@ -3507,6 +3524,7 @@ const FileControl = forwardRef(function FileControl2({
         required: required ?? restrictions.required == true,
         accept: accept ?? (Array.isArray(restrictions.acceptedFileTypes) ? restrictions.acceptedFileTypes.join() : void 0),
         loading: displayLoading || loading,
+        showSpinner: displayValidating || showSpinner,
         disabled: displayDisabled || disabled,
         readOnly: displayReadOnly || readOnly || inputProps.readOnly,
         showClearButton,
@@ -4858,7 +4876,7 @@ function IssuesPanelControls({
           ),
           children: [
             paginationLabel && currentPageIndex !== -1 && /* @__PURE__ */ jsx(VisuallyHidden, { children: paginationLabel(currentPageIndex + 1, nPages) }),
-            /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsxs("span", { "aria-hidden": true, children: [
               currentPageIndex === -1 ? "-" : currentPageIndex + 1,
               " / ",
               nPages
@@ -5546,7 +5564,6 @@ function LoadAction({
   label,
   keybinds,
   loading,
-  enabledWhenLoading,
   disabled,
   onClick,
   decode,
@@ -5580,10 +5597,9 @@ function LoadAction({
   });
   const formIsDisabled = useFormIsDisabled();
   const formIsLoading = useFormIsLoading();
-  const shouldDisable = disabled || loading && !enabledWhenLoading || formIsDisabled || formIsLoading;
   const formAppEl = useFormAppElement();
   useKeyboardShortcut(keybinds, () => load(), {
-    enabled: !shouldDisable,
+    enabled: !disabled && !loading && !formIsDisabled && !formIsLoading,
     target: formAppEl,
     preventDefault: true
   });
@@ -5595,9 +5611,8 @@ function LoadAction({
       icon: faFolderOpen,
       ...otherProps,
       onClick: combineEventHandlers(() => load(), onClick),
-      disabled: shouldDisable,
+      disabled: disabled || formIsDisabled,
       loading: loading || formIsLoading,
-      enabledWhenLoading,
       children: label
     }
   );
@@ -5627,6 +5642,7 @@ const NumericControl = forwardRef(function NumericControl2({
   exclusiveMin,
   exclusiveMax,
   loading,
+  showSpinner,
   disabled,
   readOnly,
   endAdornment,
@@ -5656,6 +5672,7 @@ const NumericControl = forwardRef(function NumericControl2({
     displayDisabled,
     displayReadOnly,
     displayStatusToDisplay,
+    displayValidating,
     issuesToDisplay,
     autofocusRef,
     handleFocus
@@ -5711,6 +5728,7 @@ const NumericControl = forwardRef(function NumericControl2({
         exclusiveMin: exclusiveMin ?? (restrictions.exclusiveMin == null ? void 0 : formatNumericAsString(restrictions.exclusiveMin, schema)),
         exclusiveMax: exclusiveMax ?? (restrictions.exclusiveMax == null ? void 0 : formatNumericAsString(restrictions.exclusiveMax, schema)),
         loading: displayLoading || loading,
+        showSpinner: displayValidating || showSpinner,
         disabled: displayDisabled || disabled,
         readOnly: displayReadOnly || readOnly || inputProps.readOnly,
         status: displayStatusToControlStatus(displayStatusToDisplay),
@@ -5760,7 +5778,6 @@ function PrintAction({
   keybinds,
   disabled,
   loading,
-  enabledWhenLoading,
   onClick,
   ...otherProps
 }) {
@@ -5770,11 +5787,10 @@ function PrintAction({
   const printInProgress = usePrintInProgress();
   const formIsDisabled = useFormIsDisabled();
   const formIsLoading = useFormIsLoading();
-  const shouldDisable = disabled || loading && !enabledWhenLoading || formIsDisabled || formIsLoading || printInProgress;
   const formAppEl = useFormAppElement();
   const formTitle = useFormTitle();
   const print = usePrint();
-  const printerHasDocumentTitle = !!usePrinterDocumentTitle();
+  const printerHasDocumentTitle = Boolean(usePrinterDocumentTitle());
   const handlePrint = (evt) => {
     evt.preventDefault();
     void print(
@@ -5782,7 +5798,7 @@ function PrintAction({
     );
   };
   useKeyboardShortcut(keybinds, handlePrint, {
-    enabled: !shouldDisable,
+    enabled: !disabled && !loading && !formIsDisabled && !formIsLoading && !printInProgress,
     target: formAppEl,
     preventDefault: true
   });
@@ -5800,7 +5816,7 @@ function PrintAction({
           icon: faPrint,
           ...otherProps,
           loading: loading || printInProgress,
-          disabled: shouldDisable,
+          disabled: disabled || formIsDisabled || formIsLoading,
           children: label
         }
       )
@@ -5830,6 +5846,7 @@ const RadioGroupControl = forwardRef(function RadioGroupControl2({
   onTouchedStatusChange,
   required,
   loading,
+  showSpinner,
   disabled,
   readOnly,
   showClearButton = false,
@@ -5887,6 +5904,7 @@ const RadioGroupControl = forwardRef(function RadioGroupControl2({
     displayDisabled,
     displayReadOnly,
     displayStatusToDisplay,
+    displayValidating,
     issuesToDisplay,
     autofocusRef,
     handleFocus
@@ -5930,6 +5948,7 @@ const RadioGroupControl = forwardRef(function RadioGroupControl2({
         name: inputProps.name,
         required: required ?? restrictions.required === true,
         loading: displayLoading || loading,
+        showSpinner: displayValidating || showSpinner,
         disabled: displayDisabled || disabled,
         readOnly: displayReadOnly || readOnly || inputProps.readOnly,
         status: displayStatusToControlStatus(displayStatusToDisplay),
@@ -6109,7 +6128,6 @@ function SaveAction({
   saveAsLabel,
   saveAsKeybinds,
   loading,
-  enabledWhenLoading,
   disabled,
   onClick,
   variant = "subtle",
@@ -6150,15 +6168,15 @@ function SaveAction({
   });
   const formIsSaving = useFormIsSaving();
   const formIsLoading = useFormIsLoading();
-  const shouldDisable = disabled || loading && !enabledWhenLoading || formIsSaving || formIsLoading;
   const formAppEl = useFormAppElement();
+  const shortcutsEnabled = !disabled && !loading && !formIsSaving && !formIsLoading;
   useKeyboardShortcut(keybinds, () => save({ overwrite: !disableOverwrite }), {
-    enabled: !shouldDisable,
+    enabled: shortcutsEnabled,
     target: formAppEl,
     preventDefault: true
   });
   useKeyboardShortcut(saveAsKeybinds, () => save(), {
-    enabled: !shouldDisable,
+    enabled: shortcutsEnabled,
     target: formAppEl,
     preventDefault: true
   });
@@ -6174,9 +6192,8 @@ function SaveAction({
         () => save({ overwrite: !disableOverwrite }),
         onClick
       ),
-      disabled: shouldDisable,
+      disabled: disabled || formIsLoading,
       loading: loading || formIsSaving,
-      enabledWhenLoading,
       children: label
     }
   );
@@ -6191,11 +6208,19 @@ function SaveAction({
           icon: faCaretDown,
           ...saveOptionsProps,
           label: saveOptionsLabel,
-          disabled: shouldDisable || saveOptionsProps?.disabled,
+          disabled: disabled || formIsLoading || saveOptionsProps?.disabled,
           style: { minWidth: 20, ...saveOptionsProps?.style }
         }
       ) }),
-      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", ...dropdownMenuProps, children: /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => save(), disabled: shouldDisable, children: saveAsLabel }) })
+      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", ...dropdownMenuProps, children: /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          onClick: () => save(),
+          disabled: disabled || formIsLoading,
+          loading: loading || formIsSaving,
+          children: saveAsLabel
+        }
+      ) })
     ] })
   ] }) : saveButton;
 }
@@ -6218,6 +6243,7 @@ const SelectControl = forwardRef(function SelectControl2({
   onTouchedStatusChange,
   required,
   loading,
+  showSpinner,
   disabled,
   readOnly,
   showClearButton,
@@ -6284,6 +6310,7 @@ const SelectControl = forwardRef(function SelectControl2({
     displayDisabled,
     displayReadOnly,
     displayStatusToDisplay,
+    displayValidating,
     issuesToDisplay,
     autofocusRef,
     handleFocus
@@ -6336,6 +6363,7 @@ const SelectControl = forwardRef(function SelectControl2({
         name: inputProps.name,
         required: required ?? restrictions.required === true,
         loading: displayLoading || loading,
+        showSpinner: displayValidating || showSpinner,
         disabled: displayDisabled || disabled,
         readOnly: displayReadOnly || readOnly || inputProps.readOnly,
         status: displayStatusToControlStatus(displayStatusToDisplay),
@@ -6380,6 +6408,7 @@ const SelectMultipleControl = forwardRef(function SelectMultipleControl2({
   onTouchedStatusChange,
   required,
   loading,
+  showSpinner,
   disabled,
   readOnly,
   endAdornment,
@@ -6444,6 +6473,7 @@ const SelectMultipleControl = forwardRef(function SelectMultipleControl2({
     displayDisabled,
     displayReadOnly,
     displayStatusToDisplay,
+    displayValidating,
     issuesToDisplay,
     autofocusRef,
     handleFocus
@@ -6490,6 +6520,7 @@ const SelectMultipleControl = forwardRef(function SelectMultipleControl2({
         name: inputProps.name,
         required: required ?? restrictions.required === true,
         loading: displayLoading || loading,
+        showSpinner: displayValidating || showSpinner,
         disabled: displayDisabled || disabled,
         readOnly: displayReadOnly || readOnly || inputProps.readOnly,
         status: displayStatusToControlStatus(displayStatusToDisplay),
@@ -6527,7 +6558,6 @@ function SubmitAction({
   keybinds,
   confirmWarnings = true,
   loading,
-  enabledWhenLoading,
   disabled,
   onClick,
   dialogTitle,
@@ -6575,7 +6605,6 @@ function SubmitAction({
   const formIsDisabled = useFormIsDisabled();
   const formIsLoading = useFormIsLoading();
   const formAppEl = useFormAppElement();
-  const shouldDisable = disabled || loading && !enabledWhenLoading || formIsDisabled || formIsLoading || submitting;
   const [submissionInfo, setSubmissionInfo] = useState(null);
   const [checkedWarnings, setCheckedWarnings] = useState([]);
   const allWarningsChecked = !submissionInfo?.warnings || submissionInfo.warnings.every(
@@ -6653,7 +6682,7 @@ function SubmitAction({
     convertExternalIssuesTableRowIndicesToIds
   });
   useKeyboardShortcut(keybinds, handleAction, {
-    enabled: !shouldDisable,
+    enabled: !disabled && !loading && !formIsDisabled && !formIsLoading && !submitting,
     target: formAppEl,
     preventDefault: true
   });
@@ -6667,9 +6696,8 @@ function SubmitAction({
         iconPlacement: "end",
         ...otherProps,
         onClick: combineEventHandlers(handleAction, onClick),
-        disabled: shouldDisable,
+        disabled: disabled || formIsDisabled || formIsLoading,
         loading: loading || submitting,
-        enabledWhenLoading,
         children: label
       }
     ) }),
@@ -7259,6 +7287,7 @@ const TextControl = forwardRef(function TextControl2({
   maxLength,
   pattern,
   loading,
+  showSpinner,
   disabled,
   readOnly,
   endAdornment,
@@ -7294,6 +7323,7 @@ const TextControl = forwardRef(function TextControl2({
     displayDisabled,
     displayReadOnly,
     displayStatusToDisplay,
+    displayValidating,
     issuesToDisplay,
     autofocusRef,
     handleFocus
@@ -7327,6 +7357,7 @@ const TextControl = forwardRef(function TextControl2({
     maxLength: maxLength ?? (typeof restrictions.maxLength === "number" ? restrictions.maxLength : void 0),
     pattern: pattern ?? (typeof restrictions.pattern === "string" ? restrictions.pattern : void 0),
     loading: displayLoading || loading,
+    showSpinner: displayValidating || showSpinner,
     disabled: displayDisabled || disabled,
     readOnly: displayReadOnly || readOnly || inputProps.readOnly,
     status: displayStatusToControlStatus(displayStatusToDisplay),
@@ -7407,7 +7438,6 @@ function ValidateAction({
   label,
   keybinds,
   loading,
-  enabledWhenLoading,
   disabled,
   onClick,
   ...otherProps
@@ -7416,14 +7446,15 @@ function ValidateAction({
   label ??= locale7.ValidateAction.label;
   keybinds ??= locale7.ValidateAction.keybinds;
   const { validate } = useFormValidator();
-  const { validatingAutomatically, validatingManually, validating } = useFormIsValidating();
-  const deferredValidating = useDeferredValue(validating);
+  const { validatingAutomatically, validatingManually } = useFormIsValidating();
+  const deferredValidatingAutomatically = useDeferredValue(
+    validatingAutomatically
+  );
   const formIsDisabled = useFormIsDisabled();
   const formIsLoading = useFormIsLoading();
-  const shouldDisable = disabled || loading && !enabledWhenLoading || formIsDisabled || formIsLoading || validatingManually;
   const formAppEl = useFormAppElement();
   useKeyboardShortcut(keybinds, validate, {
-    enabled: !shouldDisable,
+    enabled: !disabled && !loading && !formIsDisabled && !formIsLoading && !validatingManually,
     target: formAppEl,
     preventDefault: true
   });
@@ -7435,9 +7466,9 @@ function ValidateAction({
       vertical: true,
       ...otherProps,
       onClick: combineEventHandlers(validate, onClick),
-      disabled: shouldDisable,
-      loading: loading || deferredValidating,
-      enabledWhenLoading: enabledWhenLoading || validatingAutomatically,
+      loading: loading || validatingManually,
+      disabled: disabled || formIsDisabled || formIsLoading,
+      showSpinner: deferredValidatingAutomatically,
       children: label
     }
   );