@redneckz/wildless-cms-uni-blocks 0.14.896 → 0.14.897

package/bundle/bundle.umd.js

@@ -1244,6 +1244,7 @@
 
     function useForm(initialState, { resetOnSubmit, formValidator, normalizer, onChange, onSubmit } = {}) {
         const [formState, setFormState] = useNormalizedFormState(initialState, normalizer, onChange);
+        const fieldRefs = useRef(getRefsObject(initialState));
         const [isDirtyForm, { setTrue: markAsDirty, setFalse: markAsClean }] = useBool(false);
         const dirtyFieldsMap = useRef({});
         const [fieldValidatorsMap, { isValid, errors }] = useFormValidator(formState, formValidator);
@@ -1254,6 +1255,12 @@
             const fieldValidator = options?.validator ?? fieldValidatorsMap[fieldName];
             const fieldErrors = isDirty && fieldValidator ? fieldValidator(value) : [];
             return {
+                setFieldRef: (_) => {
+                    if (fieldRefs.current) {
+                        fieldRefs.current[fieldName] = _;
+                    }
+                },
+                fieldRef: fieldRefs.current?.[fieldName],
                 value: format ? format(value) : value,
                 isDirty,
                 errors: fieldValidator && fieldErrors,
@@ -1283,11 +1290,21 @@
                 onSubmit?.(formState, ev);
             }
             else {
+                const errorFieldName = getErrorFieldName(formState, fieldValidatorsMap);
                 markAsDirty();
+                field(errorFieldName).fieldRef?.scrollIntoView({ behavior: 'smooth' });
             }
         }, [resetOnSubmit, formState, isValid, reset, onSubmit]);
         return [formState, { errors, field, update, reset, onSubmit: handleSubmit }];
     }
+    const getRefsObject = (initialState) => Object.keys(initialState).reduce((acc, key) => ({ ...acc, [key]: null }), {});
+    const getErrorFieldName = (formState, fieldValidatorsMap = {}) => {
+        const [errorFieldName = ''] = Object.entries(formState).find(([fieldName, value]) => {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+            return fieldValidatorsMap[fieldName]?.(value)?.length;
+        }) ?? [];
+        return errorFieldName;
+    };
 
     function copy(source, target) {
         for (const [k, v] of source.entries()) {
@@ -2939,6 +2956,16 @@
 
     const ConsentToReceiveMaterialsField = JSX(({ field, input }) => (jsx(Checkbox, { text: "\u0421\u043E\u0433\u043B\u0430\u0441\u0435\u043D \u043D\u0430 \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u0435 \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u043E\u043D\u043D\u044B\u0445 \u0438 \u0430\u043D\u0430\u043B\u0438\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043C\u0430\u0442\u0435\u0440\u0438\u0430\u043B\u043E\u0432 \u043F\u043E \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u0435", ...field(input?.name ?? '') })));
 
+    const RefWrapper = JSX(({ onFieldRef = noop, children }) => {
+        const ref = useRef(null);
+        useEffect(() => {
+            if (ref.current) {
+                onFieldRef(ref.current);
+            }
+        }, []);
+        return jsx("div", { ref: ref, children: children });
+    });
+
     function shouldRenderField({ input, field, }) {
         const { condition } = input;
         const { value } = field(condition?.name || '');
@@ -2999,7 +3026,7 @@
             ...externalInputs,
         };
         const Component = fieldsRegister[String(input.name)];
-        return shouldRenderField({ input, field }) && Component ? (jsx("div", { children: jsx(Component, { field: field, input: input, params: params }) }, i)) : null;
+        return shouldRenderField({ input, field }) && Component ? (jsx(RefWrapper, { onFieldRef: field(input.name ?? '').setFieldRef, children: jsx(Component, { field: field, input: input, params: params }) }, String(i))) : null;
     };
 
     const inputColumnStyles = (column) => column === 2 ? '@xl:grid-cols-2 gap-x-m' : '@xl:grid-cols-1 gap-x-0';
@@ -11671,7 +11698,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.895";
+    const packageVersion = "0.14.896";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;