remix-forms - npm Package Compare versions

Comparing version 1.5.3 to 1.5.4

dist/index.js

@@ -720,4 +720,10 @@ "use strict";
     const actionValues = actionData == null ? void 0 : actionData.values;
-    const errors = { ...errorsProp, ...actionErrors };
-    const values = { ...valuesProp, ...actionValues };
+    const errors = React3.useMemo(
+      () => ({ ...errorsProp, ...actionErrors }),
+      [errorsProp, actionErrors]
+    );
+    const values = React3.useMemo(
+      () => ({ ...valuesProp, ...actionValues }),
+      [valuesProp, actionValues]
+    );
     const schemaShape = objectFromSchema(schema).shape;
@@ -783,7 +789,10 @@ const defaultValues = mapObject(schemaShape, (key, fieldShape) => {
     );
-    const fieldErrors = (key) => {
-      var _a;
-      const message = (_a = formErrors[key]) == null ? void 0 : _a.message;
-      return browser() ? message && [message] : errors && errors[key];
-    };
+    const fieldErrors = React3.useCallback(
+      (key) => {
+        var _a;
+        const message = (_a = formErrors[key]) == null ? void 0 : _a.message;
+        return browser() ? message && [message] : errors && errors[key];
+      },
+      [errors, formErrors]
+    );
     const firstErroredField = () => Object.keys(schemaShape).find((key) => {
@@ -819,20 +828,27 @@ var _a;
     };
-    const hiddenFieldsErrorsToGlobal = (globalErrors2 = []) => {
-      const deepHiddenFieldsErrors = hiddenFields == null ? void 0 : hiddenFields.map((hiddenField) => {
-        const hiddenFieldErrors = fieldErrors(hiddenField);
-        if (hiddenFieldErrors instanceof Array) {
-          const hiddenFieldLabel = labels && labels[hiddenField] || inferLabel(String(hiddenField));
-          return hiddenFieldErrors.map(
-            (error) => `${hiddenFieldLabel}: ${error}`
-          );
-        } else
-          return [];
-      });
-      const hiddenFieldsErrors = (deepHiddenFieldsErrors == null ? void 0 : deepHiddenFieldsErrors.flat()) || [];
-      const allGlobalErrors = [].concat(globalErrors2, hiddenFieldsErrors).filter((error) => typeof error === "string");
-      return allGlobalErrors.length > 0 ? allGlobalErrors : void 0;
-    };
-    let globalErrors = hiddenFieldsErrorsToGlobal(errors == null ? void 0 : errors._global);
+    const hiddenFieldsErrorsToGlobal = React3.useCallback(
+      (globalErrors2 = []) => {
+        const deepHiddenFieldsErrors = hiddenFields == null ? void 0 : hiddenFields.map((hiddenField) => {
+          const hiddenFieldErrors = fieldErrors(hiddenField);
+          if (hiddenFieldErrors instanceof Array) {
+            const hiddenFieldLabel = labels && labels[hiddenField] || inferLabel(String(hiddenField));
+            return hiddenFieldErrors.map(
+              (error) => `${hiddenFieldLabel}: ${error}`
+            );
+          } else
+            return [];
+        });
+        const hiddenFieldsErrors = (deepHiddenFieldsErrors == null ? void 0 : deepHiddenFieldsErrors.flat()) || [];
+        const allGlobalErrors = [].concat(globalErrors2, hiddenFieldsErrors).filter((error) => typeof error === "string");
+        return allGlobalErrors.length > 0 ? allGlobalErrors : void 0;
+      },
+      [fieldErrors, hiddenFields, labels]
+    );
+    const globalErrors = React3.useMemo(
+      () => hiddenFieldsErrorsToGlobal(errors == null ? void 0 : errors._global),
+      [errors == null ? void 0 : errors._global, hiddenFieldsErrorsToGlobal]
+    );
     const buttonLabel = transition.state === "submitting" ? pendingButtonLabel : rawButtonLabel;
     const [disabled, setDisabled] = React3.useState(false);
+    const [globalErrorsState, setGlobalErrorsState] = React3.useState(globalErrors);
     const customChildren = mapChildren(
@@ -875,5 +891,5 @@ childrenFn == null ? void 0 : childrenFn({
         } else if (child.type === Errors) {
-          if (!child.props.children && !(globalErrors == null ? void 0 : globalErrors.length))
+          if (!child.props.children && !(globalErrorsState == null ? void 0 : globalErrorsState.length))
             return null;
-          if (child.props.children || !(globalErrors == null ? void 0 : globalErrors.length)) {
+          if (child.props.children || !(globalErrorsState == null ? void 0 : globalErrorsState.length)) {
             return React3.cloneElement(child, {
@@ -886,3 +902,3 @@ role: "alert",
             role: "alert",
-            children: globalErrors.map((error) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Error2, {
+            children: globalErrorsState.map((error) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Error2, {
               children: error
@@ -907,5 +923,5 @@ }, error)),
         Object.keys(schemaShape).map(makeField).map((field) => renderField({ Field, ...field })),
-        (globalErrors == null ? void 0 : globalErrors.length) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Errors, {
+        (globalErrorsState == null ? void 0 : globalErrorsState.length) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Errors, {
           role: "alert",
-          children: globalErrors.map((error) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Error2, {
+          children: globalErrorsState.map((error) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Error2, {
             children: error
@@ -951,3 +967,9 @@ }, error))
     React3.useEffect(() => {
+      setGlobalErrorsState(globalErrors);
+    }, [globalErrors]);
+    React3.useEffect(() => {
       onTransition && onTransition(form);
+      if (transition.state === "submitting") {
+        setGlobalErrorsState(void 0);
+      }
     }, [transition.state]);
@@ -954,0 +976,0 @@ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_hook_form.FormProvider, {

package.json

 {
   "name": "remix-forms",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "description": "The full-stack form library for Remix and React Router",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

77544

increased by1.94%

Lines of code

2253

increased by1.99%

No dependency changes