@douglasneuroinformatics/libui 3.7.5 → 3.8.0

package/dist/components.d.ts

@@ -1247,9 +1247,10 @@ type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<T
     resetBtn?: boolean;
     revalidateOnBlur?: boolean;
     submitBtnLabel?: string;
+    suspendWhileSubmitting?: boolean;
     validationSchema: z.ZodType<TData>;
 };
-declare const Form: <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>>({ additionalButtons, className, content, fieldsFooter, id, initialValues, onError, onSubmit, preventResetValuesOnReset, readOnly, resetBtn, revalidateOnBlur, submitBtnLabel, validationSchema, ...props }: FormProps<TSchema, TData>) => react_jsx_runtime.JSX.Element;
+declare const Form: <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>>({ additionalButtons, className, content, fieldsFooter, id, initialValues, onError, onSubmit, preventResetValuesOnReset, readOnly, resetBtn, revalidateOnBlur, submitBtnLabel, suspendWhileSubmitting, validationSchema, ...props }: FormProps<TSchema, TData>) => react_jsx_runtime.JSX.Element;
 
 type HeadingProps = {
     children: string;

package/dist/components.js

@@ -2633,12 +2633,17 @@ var NumberRecordField = ({
   setValue: setRecordValue,
   value: recordValue
 }) => {
-  const isFirstRenderRef = useRef3(true);
+  const optionsRef = useRef3(options);
   useEffect4(() => {
-    if (isFirstRenderRef.current && !recordValue || !isFirstRenderRef.current) {
+    if (!recordValue) {
       setRecordValue({});
     }
-    isFirstRenderRef.current = false;
+  }, []);
+  useEffect4(() => {
+    if (optionsRef.current !== options) {
+      setRecordValue({});
+      optionsRef.current = options;
+    }
   }, [options]);
   if (!recordValue) {
     return null;
@@ -2784,7 +2789,7 @@ var isValidDateString = (s) => /^(\d{4})-((0[1-9])|(1[0-2]))-((0[1-9])|([12])[0-
 var DateField = ({ disabled, error, label, name, readOnly, setValue, value }) => {
   const [isDatePickerOpen, setIsDatePickerOpen] = useState5(false);
   const [isInputFocused, setIsInputFocused] = useState5(false);
-  const [inputValue, setInputValue] = useState5("");
+  const [inputValue, setInputValue] = useState5(value ? toBasicISOString2(value) : "");
   useEffect5(() => {
     const isSelecting = isDatePickerOpen || isInputFocused;
     if (isSelecting) {
@@ -3227,14 +3232,19 @@ var RecordArrayField = memo(function RecordArrayField2({
   setValue: setArrayValue,
   value: arrayValue
 }) {
-  const isFirstRenderRef = useRef4(true);
+  const fieldsetRef = useRef4(fieldset);
   const { t } = useTranslation("libui");
   const createNewRecord = () => Object.fromEntries(Object.keys(fieldset).map((fieldName) => [fieldName, void 0]));
   useEffect8(() => {
-    if (isFirstRenderRef.current && !arrayValue || !isFirstRenderRef.current) {
+    if (!arrayValue) {
+      setArrayValue([createNewRecord()]);
+    }
+  }, []);
+  useEffect8(() => {
+    if (fieldsetRef.current !== fieldset) {
       setArrayValue([createNewRecord()]);
+      fieldsetRef.current = fieldset;
     }
-    isFirstRenderRef.current = false;
   }, [fieldset]);
   if (!arrayValue) {
     return null;
@@ -3435,6 +3445,7 @@ var Form = ({
   resetBtn,
   revalidateOnBlur,
   submitBtnLabel,
+  suspendWhileSubmitting,
   validationSchema,
   ...props
 }) => {
@@ -3444,6 +3455,7 @@ var Form = ({
   const [values, setValues] = useState8(
     initialValues ? getInitialValues(initialValues) : {}
   );
+  const [isSubmitting, setIsSubmitting] = useState8(false);
   const handleError = (error) => {
     const fieldErrors = {};
     for (const issue of error.issues) {
@@ -3471,14 +3483,21 @@ var Form = ({
     }
   };
   const handleSubmit = async (event) => {
-    event.preventDefault();
-    const result = await validationSchema.safeParseAsync(values);
-    if (result.success) {
-      reset();
-      await onSubmit(result.data);
-    } else {
-      console.error(result.error.issues);
-      handleError(result.error);
+    const minSubmitTime = new Promise((resolve) => setTimeout(resolve, 500));
+    try {
+      setIsSubmitting(true);
+      event.preventDefault();
+      const result = await validationSchema.safeParseAsync(values);
+      if (result.success) {
+        reset();
+        await onSubmit(result.data);
+      } else {
+        console.error(result.error.issues);
+        handleError(result.error);
+      }
+    } finally {
+      await minSubmitTime;
+      setIsSubmitting(false);
     }
   };
   const isGrouped = Array.isArray(content);
@@ -3495,6 +3514,7 @@ var Form = ({
   useEffect10(() => {
     revalidate();
   }, [resolvedLanguage]);
+  const isSuspended = Boolean(suspendWhileSubmitting && isSubmitting);
   return /* @__PURE__ */ jsxs47(
     "form",
     {
@@ -3537,7 +3557,35 @@ var Form = ({
         fieldsFooter,
         /* @__PURE__ */ jsxs47("div", { className: "flex w-full gap-3", children: [
           additionalButtons?.left,
-          /* @__PURE__ */ jsx136(Button, { "aria-label": "Submit", className: "block w-full", disabled: readOnly, type: "submit", variant: "primary", children: submitBtnLabel ?? t("form.submit") }),
+          /* @__PURE__ */ jsxs47(
+            Button,
+            {
+              "aria-label": "Submit",
+              className: "flex w-32 items-center justify-center gap-2",
+              disabled: readOnly || isSuspended,
+              type: "submit",
+              variant: "primary",
+              children: [
+                submitBtnLabel ?? t("form.submit"),
+                /* @__PURE__ */ jsx136(
+                  "svg",
+                  {
+                    className: cn("hidden h-4 w-4 animate-spin", isSuspended && "block"),
+                    fill: "none",
+                    height: "24",
+                    stroke: "currentColor",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: "2",
+                    viewBox: "0 0 24 24",
+                    width: "24",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ jsx136("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+                  }
+                )
+              ]
+            }
+          ),
           resetBtn && /* @__PURE__ */ jsx136(
             Button,
             {