@juantroconisf/lib 11.6.0 → 11.8.0

package/dist/index.js

@@ -44,11 +44,13 @@ function handleNestedChange({
   value,
   hasNestedValues = false
 }) {
-  if (!hasNestedValues) return { ...state, [id]: value };
-  const propertyDepth = String(id).split("."), newValues = { ...state };
-  let current = newValues;
-  for (let i = 0; i < propertyDepth.length - 1; i++) {
-    const key = propertyDepth[i];
+  const isNested = hasNestedValues || String(id).includes(".");
+  if (!isNested) return { ...state, [id]: value };
+  const keys = String(id).split(".");
+  const newState = { ...state };
+  let current = newState;
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i];
     if (Array.isArray(current[key])) {
       current[key] = [...current[key]];
     } else {
@@ -56,8 +58,8 @@ function handleNestedChange({
     }
     current = current[key];
   }
-  current[propertyDepth[propertyDepth.length - 1]] = value;
-  return { ...newValues };
+  current[keys[keys.length - 1]] = value;
+  return newState;
 }
 function handleArrayItemChange({
   state,
@@ -98,21 +100,6 @@ function removeCompositeKeysByPrefix(map, prefix) {
   }
   return result;
 }
-function setNestedValue(state, dotPath, value) {
-  const keys = dotPath.split(".");
-  const copy = { ...state };
-  let current = copy;
-  for (let i = 0; i < keys.length - 1; i++) {
-    if (Array.isArray(current[keys[i]])) {
-      current[keys[i]] = [...current[keys[i]]];
-    } else {
-      current[keys[i]] = { ...current[keys[i]] };
-    }
-    current = current[keys[i]];
-  }
-  current[keys[keys.length - 1]] = value;
-  return copy;
-}
 
 // src/hooks/useForm.tsx
 var import_react3 = require("@heroui/react");
@@ -407,7 +394,7 @@ function useForm(schema, {
   }, [schema]);
   const [state, setState] = (0, import_react2.useState)(initialState), [metadata, setMetadata] = (0, import_react2.useState)(/* @__PURE__ */ new Map());
   useComponentLanguage();
-  const stateRef = (0, import_react2.useRef)(state), metadataRef = (0, import_react2.useRef)(metadata);
+  const stateRef = (0, import_react2.useRef)(state), metadataRef = (0, import_react2.useRef)(metadata), propsCache = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
   stateRef.current = state;
   metadataRef.current = metadata;
   const indexMap = (0, import_react2.useMemo)(() => {
@@ -441,7 +428,17 @@ function useForm(schema, {
   const indexMapRef = (0, import_react2.useRef)(indexMap);
   indexMapRef.current = indexMap;
   const getIndex = (0, import_react2.useCallback)((arrayKey, itemId) => {
-    return indexMapRef.current.get(arrayKey)?.get(itemId);
+    const map = indexMapRef.current.get(arrayKey);
+    if (!map) return void 0;
+    const index = map.get(itemId);
+    if (index !== void 0) return index;
+    if (typeof itemId === "string") {
+      const num = Number(itemId);
+      if (!isNaN(num)) return map.get(num);
+    } else if (typeof itemId === "number") {
+      return map.get(String(itemId));
+    }
+    return void 0;
   }, []);
   const ruleCache = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
   (0, import_react2.useMemo)(() => {
@@ -468,14 +465,7 @@ function useForm(schema, {
   const runValidation = (0, import_react2.useCallback)(
     (ruleDef, value, compositeKey, realPath, fullState) => {
       if ((0, import_yup2.isSchema)(ruleDef)) {
-        try {
-          if (validationSchema && realPath && fullState !== void 0) {
-            validationSchema.validateSyncAt(realPath, fullState);
-          } else {
-            ruleDef.validateSync(value);
-          }
-          return false;
-        } catch (err) {
+        const updateMetadata = (err) => {
           const error = {
             isInvalid: true,
             errorMessage: err.message || "Invalid"
@@ -490,7 +480,32 @@ function useForm(schema, {
             newMap.set(compositeKey, { ...currentMeta, ...error });
             return newMap;
           });
-          return true;
+        };
+        try {
+          if (validationSchema && realPath && fullState !== void 0) {
+            validationSchema.validateSyncAt(realPath, fullState);
+          } else {
+            ruleDef.validateSync(value);
+          }
+          return false;
+        } catch (err) {
+          if (err.name === "ValidationError") {
+            updateMetadata(err);
+            return true;
+          }
+          return (async () => {
+            try {
+              if (validationSchema && realPath && fullState !== void 0) {
+                await validationSchema.validateAt(realPath, fullState);
+              } else {
+                await ruleDef.validate(value);
+              }
+              return false;
+            } catch (asyncErr) {
+              updateMetadata(asyncErr);
+              return true;
+            }
+          })();
         }
       }
       return false;
@@ -501,35 +516,52 @@ function useForm(schema, {
     (compositeKey, fieldPath, realPath, value, fullState) => {
       let schemaRule = getRule(fieldPath, validationSchema);
       if (schemaRule) {
-        if (runValidation(schemaRule, value, compositeKey, realPath, fullState))
-          return true;
+        const result = runValidation(
+          schemaRule,
+          value,
+          compositeKey,
+          realPath,
+          fullState
+        );
+        if (result === true) return true;
+        if (result instanceof Promise) {
+          return result.then((res) => {
+            if (!res) clearError();
+            return res;
+          });
+        }
       }
-      setMetadata((prev) => {
-        const newMap = new Map(prev);
-        const currentMeta = newMap.get(compositeKey) || {
-          isTouched: false,
-          isInvalid: false,
-          errorMessage: ""
-        };
-        newMap.set(compositeKey, {
-          ...currentMeta,
-          isInvalid: false,
-          errorMessage: ""
+      function clearError() {
+        setMetadata((prev) => {
+          const newMap = new Map(prev);
+          const currentMeta = newMap.get(compositeKey) || {
+            isTouched: false,
+            isInvalid: false,
+            errorMessage: ""
+          };
+          newMap.set(compositeKey, {
+            ...currentMeta,
+            isInvalid: false,
+            errorMessage: ""
+          });
+          return newMap;
         });
-        return newMap;
-      });
+      }
+      clearError();
       return false;
     },
     [getRule, runValidation, validationSchema]
   );
   const validateAll = (0, import_react2.useCallback)(() => {
     if (!validationSchema) return false;
-    let hasError = false;
-    const newMetadata = new Map(metadataRef.current);
-    try {
-      validationSchema.validateSync(state, { abortEarly: false });
-    } catch (err) {
-      hasError = true;
+    const cleanMetadata = new Map(metadataRef.current);
+    cleanMetadata.forEach((value, key) => {
+      if (value.isInvalid) {
+        cleanMetadata.set(key, { ...value, isInvalid: false, errorMessage: "" });
+      }
+    });
+    const handleErrors = (err) => {
+      const newMetadata = new Map(cleanMetadata);
       if (err.inner) {
         err.inner.forEach((validationError) => {
           const yupPath = validationError.path;
@@ -570,9 +602,27 @@ function useForm(schema, {
           });
         });
       }
+      setMetadata(newMetadata);
+      return true;
+    };
+    try {
+      validationSchema.validateSync(state, { abortEarly: false });
+    } catch (err) {
+      if (err.name === "ValidationError") {
+        return handleErrors(err);
+      }
+      return (async () => {
+        try {
+          await validationSchema.validate(state, { abortEarly: false });
+          setMetadata(cleanMetadata);
+          return false;
+        } catch (asyncErr) {
+          return handleErrors(asyncErr);
+        }
+      })();
     }
-    setMetadata(newMetadata);
-    return hasError;
+    setMetadata(cleanMetadata);
+    return false;
   }, [validationSchema, state, arrayIdentifiers]);
   const handleFieldChange = (0, import_react2.useCallback)(
     (resolution, newValue) => {
@@ -657,7 +707,12 @@ function useForm(schema, {
           nextState = { ...nextState, [parentKey]: parentArr };
         }
       } else if (type === "deep" /* Deep */) {
-        nextState = setNestedValue(nextState, resolution.realPath, finalValue);
+        nextState = handleNestedChange({
+          state: nextState,
+          id: resolution.realPath,
+          value: finalValue,
+          hasNestedValues: true
+        });
       }
       setState(nextState);
       validateField(
@@ -713,8 +768,8 @@ function useForm(schema, {
     [validateField, getRule, validationSchema]
   );
   const on = (0, import_react2.useMemo)(
-    () => ({
-      input: (...args) => {
+    () => {
+      const getCachedProps = (method, args, factory) => {
         const data = resolveFieldData(
           args,
           stateRef.current,
@@ -724,117 +779,78 @@ function useForm(schema, {
           validationSchema
         );
         if (!data) return {};
-        return {
+        const meta = metadataRef.current.get(data.compositeKey);
+        const deps = JSON.stringify([
+          data.value,
+          meta?.isInvalid,
+          meta?.errorMessage,
+          meta?.isTouched
+        ]);
+        const cacheKey = `${method}:${JSON.stringify(args)}`;
+        const cached = propsCache.current.get(cacheKey);
+        if (cached && cached.deps === deps) {
+          return cached.props;
+        }
+        const props = factory(data);
+        propsCache.current.set(cacheKey, { props, deps });
+        return props;
+      };
+      return {
+        input: (...args) => getCachedProps("input", args, (data) => ({
           ...createHandlers(data),
           value: data.value === null || data.value === void 0 ? "" : typeof data.value === "boolean" ? data.value : String(data.value),
           onValueChange: (v) => handleFieldChange(data, v)
-        };
-      },
-      select: (...args) => {
-        const data = resolveFieldData(
-          args,
-          stateRef.current,
-          getIndex,
-          getNestedValue,
-          getRule,
-          validationSchema
-        );
-        if (!data) return {};
-        const isArray = Array.isArray(data.value);
-        return {
-          ...createHandlers(data),
-          selectedKeys: data.value === null || data.value === void 0 ? [] : isArray ? data.value.map(String) : [String(data.value)],
-          onSelectionChange: (v) => {
-            const fixed = typeof v === "string" || v === null ? v : isArray ? Array.from(v) : Array.from(v)[0] ?? null;
-            handleFieldChange(data, fixed);
-          }
-        };
-      },
-      autocomplete: (...args) => {
-        const data = resolveFieldData(
-          args,
-          stateRef.current,
-          getIndex,
-          getNestedValue,
-          getRule,
-          validationSchema
-        );
-        if (!data) return {};
-        return {
+        })),
+        select: (...args) => getCachedProps("select", args, (data) => {
+          const isArray = Array.isArray(data.value);
+          return {
+            ...createHandlers(data),
+            selectedKeys: data.value === null || data.value === void 0 ? [] : isArray ? data.value.map(String) : [String(data.value)],
+            onSelectionChange: (v) => {
+              const fixed = typeof v === "string" || v === null ? v : isArray ? Array.from(v) : Array.from(v)[0] ?? null;
+              handleFieldChange(data, fixed);
+            }
+          };
+        }),
+        autocomplete: (...args) => getCachedProps("autocomplete", args, (data) => ({
           ...createHandlers(data),
           selectedKey: data.value === null || data.value === void 0 ? null : String(data.value),
           onSelectionChange: (v) => {
             const fixed = typeof v === "string" || v === null || v === void 0 ? v : String(v);
             handleFieldChange(data, fixed);
           }
-        };
-      },
-      numberInput: (...args) => {
-        const data = resolveFieldData(
-          args,
-          stateRef.current,
-          getIndex,
-          getNestedValue,
-          getRule,
-          validationSchema
-        );
-        if (!data) return {};
-        return {
+        })),
+        numberInput: (...args) => getCachedProps("numberInput", args, (data) => ({
           ...createHandlers(data),
           value: data.value === null || data.value === void 0 ? "" : String(data.value),
           onValueChange: (v) => handleFieldChange(data, v)
-        };
-      },
-      checkbox: (...args) => {
-        const data = resolveFieldData(
-          args,
-          stateRef.current,
-          getIndex,
-          getNestedValue,
-          getRule,
-          validationSchema
-        );
-        if (!data) return {};
-        return {
+        })),
+        checkbox: (...args) => getCachedProps("checkbox", args, (data) => ({
           ...createHandlers(data),
           isSelected: Boolean(data.value),
           onValueChange: (v) => handleFieldChange(data, v)
-        };
-      },
-      switch: (...args) => {
-        const data = resolveFieldData(
-          args,
-          stateRef.current,
-          getIndex,
-          getNestedValue,
-          getRule,
-          validationSchema
-        );
-        if (!data) return {};
-        return {
+        })),
+        switch: (...args) => getCachedProps("switch", args, (data) => ({
           ...createHandlers(data),
           isSelected: Boolean(data.value),
           onValueChange: (v) => handleFieldChange(data, v)
-        };
-      },
-      radio: (...args) => {
-        const data = resolveFieldData(
-          args,
-          stateRef.current,
-          getIndex,
-          getNestedValue,
-          getRule,
-          validationSchema
-        );
-        if (!data) return {};
-        return {
+        })),
+        radio: (...args) => getCachedProps("radio", args, (data) => ({
           ...createHandlers(data),
           value: data.value === null || data.value === void 0 ? "" : String(data.value),
           onValueChange: (v) => handleFieldChange(data, v)
-        };
-      }
-    }),
-    [createHandlers, getIndex, handleFieldChange, getRule, validationSchema]
+        }))
+      };
+    },
+    [
+      createHandlers,
+      getIndex,
+      handleFieldChange,
+      getRule,
+      validationSchema,
+      state,
+      metadata
+    ]
   );
   const helpers = (0, import_react2.useMemo)(
     () => ({
@@ -949,9 +965,86 @@ function useForm(schema, {
         const index = getIndex(arrayKey, itemId);
         if (index === void 0) return void 0;
         return getNestedValue(stateRef.current, arrayKey)[index];
+      },
+      validateItem: async (arrayKey, itemId) => {
+        if (!validationSchema) return false;
+        const index = getIndex(arrayKey, itemId);
+        if (index === void 0) return false;
+        const yupPath = `${String(arrayKey)}[${index}]`;
+        const prefix = `${String(arrayKey)}.${itemId}.`;
+        const cleanMetadata = new Map(metadataRef.current);
+        for (const key of cleanMetadata.keys()) {
+          if (key.startsWith(prefix) || key === `${String(arrayKey)}.${itemId}`) {
+            const meta = cleanMetadata.get(key);
+            cleanMetadata.set(key, {
+              ...meta,
+              isInvalid: false,
+              errorMessage: ""
+            });
+          }
+        }
+        const handleErrors = (err) => {
+          const newMetadata = new Map(cleanMetadata);
+          if (err.inner) {
+            err.inner.forEach((validationError) => {
+              const localDotPath = validationError.path.replace(
+                /\[(\d+)\]/g,
+                ".$1"
+              );
+              const parts = localDotPath.split(".");
+              let current = stateRef.current;
+              const compositeParts = [];
+              for (let i = 0; i < parts.length; i++) {
+                const part = parts[i];
+                if (Array.isArray(current)) {
+                  const idx = parseInt(part, 10);
+                  const item = current[idx];
+                  if (item && typeof item === "object") {
+                    const genericPath = compositeParts.join(".").replace(/\.\d+/g, "");
+                    const idKey = arrayIdentifiers?.[genericPath] || "id";
+                    const id = item[idKey];
+                    compositeParts.push(String(id !== void 0 ? id : idx));
+                  } else {
+                    compositeParts.push(part);
+                  }
+                  current = item;
+                } else {
+                  compositeParts.push(part);
+                  current = current?.[part];
+                }
+              }
+              const compositeKey = compositeParts.join(".");
+              const currentMeta = newMetadata.get(compositeKey) || {
+                isTouched: false,
+                isInvalid: false,
+                errorMessage: ""
+              };
+              newMetadata.set(compositeKey, {
+                ...currentMeta,
+                isTouched: true,
+                isInvalid: true,
+                errorMessage: validationError.message
+              });
+            });
+          }
+          setMetadata(newMetadata);
+          return true;
+        };
+        try {
+          await validationSchema.validateAt(yupPath, stateRef.current, {
+            abortEarly: false
+          });
+          setMetadata(cleanMetadata);
+          return false;
+        } catch (err) {
+          if (err.name === "ValidationError") {
+            return handleErrors(err);
+          }
+          return false;
+        }
       }
     }),
-    [getIndex, arrayIdentifiers]
+    [getIndex, arrayIdentifiers, state, metadata]
   );
   const onBlur = (0, import_react2.useCallback)(
     (id) => {
@@ -1035,9 +1128,9 @@ function useForm(schema, {
     [getIndex, handleFieldChange, getRule, validationSchema]
   );
   const onFormSubmit = (0, import_react2.useCallback)(
-    (fn) => (e) => {
+    (fn) => async (e) => {
       e.preventDefault();
-      if (validateAll()) return;
+      if (await validateAll()) return;
       fn(stateRef.current, e);
     },
     [validateAll]
@@ -1070,9 +1163,9 @@ function useForm(schema, {
   const ControlledForm = (0, import_react2.useMemo)(() => {
     return (props) => {
       const { onSubmit, ...rest } = props;
-      const handleSubmit = (e) => {
+      const handleSubmit = async (e) => {
         e.preventDefault();
-        if (validateAllRef.current()) {
+        if (await validateAllRef.current()) {
           return;
         }
         onFormSubmitPropRef.current?.(stateRef.current, e);