rhf-stepper 0.2.5 → 1.0.1

package/dist/index.mjs

@@ -1,92 +1,10 @@
-import { createContext, forwardRef, useState, useRef, useMemo, useCallback, useEffect, useContext } from 'react';
-import { Controller as Controller$1 } from 'react-hook-form';
+import { createContext, useState, useRef, useMemo, useCallback, useContext, useEffect } from 'react';
+import { useFormContext, Controller as Controller$1, useController as useController$1 } from 'react-hook-form';
 import { jsx } from 'react/jsx-runtime';
 
 // src/controller.tsx
-var StepContext = createContext(null);
-function useStep() {
-  return useContext(StepContext);
-}
-function Step({ children }) {
-  const stepContext = useStep();
-  const formContext = useInternalFormContext();
-  const {
-    registerStep: registerStepFromParent,
-    step: stepFromParent,
-    rebuildSteps: rebuildStepsFromParent,
-    changeStepAtIndex: changeStepAtIndexFromParent,
-    registrationKey: registrationKeyFromParent
-  } = stepContext != null ? stepContext : formContext;
-  const isRoot = useMemo(() => {
-    if (!stepContext) return true;
-    return false;
-  }, [stepContext]);
-  const stepRef = useRef(void 0);
-  const [steps, setSteps] = useState([]);
-  const [registrationKey, setRegistrationKey] = useState(0);
-  const changeStepAtIndex = useCallback((steps2, index) => {
-    setSteps((prevSteps) => {
-      const newSteps = [...prevSteps];
-      newSteps[index] = steps2;
-      return newSteps;
-    });
-  }, []);
-  useEffect(() => {
-    if (isRoot && steps.length === 0) return;
-    const stepList = steps.length ? steps : [""];
-    if (stepRef.current !== void 0) {
-      changeStepAtIndexFromParent(stepList, stepRef.current);
-    } else {
-      registerStepFromParent(stepList, stepRef);
-    }
-  }, [registrationKeyFromParent, steps, isRoot]);
-  useEffect(() => {
-    if (stepFromParent !== void 0) {
-      rebuildStepsFromParent();
-    }
-    return () => {
-      rebuildStepsFromParent();
-    };
-  }, []);
-  const registerField = useCallback(
-    (elements) => {
-      setSteps((prevSteps) => {
-        return [...prevSteps, ...elements];
-      });
-    },
-    [steps]
-  );
-  const registerStep = useCallback(
-    (elements, stepRef2, step) => {
-      setSteps((prevSteps) => {
-        const stepNumber = step != null ? step : prevSteps.length;
-        stepRef2.current = stepNumber;
-        const newSteps = [...prevSteps];
-        newSteps.splice(stepNumber, 0, elements);
-        return newSteps;
-      });
-    },
-    [steps]
-  );
-  const rebuildSteps = useCallback(() => {
-    setSteps([]);
-    setRegistrationKey((prev) => prev + 1);
-  }, []);
-  const contextValue = useMemo(
-    () => ({
-      // eslint-disable-next-line react-hooks/refs
-      step: stepRef.current,
-      registrationKey,
-      changeStepAtIndex,
-      registerField,
-      registerStep,
-      rebuildSteps
-    }),
-    [registrationKey, changeStepAtIndex, registerField, registerStep, rebuildSteps]
-  );
-  return /* @__PURE__ */ jsx(StepContext.Provider, { value: contextValue, children });
-}
-Step.displayName = "Step";
+
+// src/helper.ts
 function buildNestedValues(fields, values) {
   const result = {};
   for (let i = 0; i < fields.length; i++) {
@@ -105,243 +23,182 @@ function buildNestedValues(fields, values) {
   }
   return result;
 }
-function comparePaths(a, b) {
-  var _a, _b;
-  for (let i = 0; i < Math.max(a.length, b.length); i++) {
-    const ai = (_a = a[i]) != null ? _a : -1;
-    const bi = (_b = b[i]) != null ? _b : -1;
-    if (ai !== bi) return ai - bi;
-  }
-  return 0;
-}
-function getNodeAtPath(tree, path) {
-  let current = tree;
-  for (const index of path) {
-    if (!Array.isArray(current) || index >= current.length) return void 0;
-    current = current[index];
+function generateGUID() {
+  function s4() {
+    return Math.floor((1 + Math.random()) * 65536).toString(16).substring(1);
   }
-  return current;
+  return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4();
 }
-function isLeafParent(node) {
-  return Array.isArray(node) && node.length > 0 && node.every((child) => typeof child === "string");
-}
-function getFirstLeafParentPath(tree, path) {
-  const node = getNodeAtPath(tree, path);
-  if (node === void 0) return null;
-  if (isLeafParent(node)) return path;
-  if (Array.isArray(node) && node.length > 0) {
-    for (let i = 0; i < node.length; i++) {
-      const found = getFirstLeafParentPath(tree, [...path, i]);
-      if (found) return found;
-    }
-  }
-  return null;
-}
-function getLastLeafParentPath(tree, path) {
-  const node = getNodeAtPath(tree, path);
-  if (node === void 0) return null;
-  if (isLeafParent(node)) return path;
-  if (Array.isArray(node) && node.length > 0) {
-    for (let i = node.length - 1; i >= 0; i--) {
-      const found = getLastLeafParentPath(tree, [...path, i]);
-      if (found) return found;
-    }
-  }
-  return null;
-}
-function getPrevLeafParentPath(tree, path) {
-  const current = [...path];
-  while (current.length > 0) {
-    const lastIndex = current[current.length - 1];
-    const parentPath = current.slice(0, -1);
-    const parent = getNodeAtPath(tree, parentPath);
-    if (Array.isArray(parent)) {
-      for (let i = lastIndex - 1; i >= 0; i--) {
-        const found = getLastLeafParentPath(tree, [...parentPath, i]);
-        if (found) return found;
-      }
-    }
-    current.pop();
-  }
-  return null;
-}
-function getNextLeafParentPath(tree, path) {
-  const current = [...path];
-  while (current.length > 0) {
-    const lastIndex = current[current.length - 1];
-    const parentPath = current.slice(0, -1);
-    const parent = getNodeAtPath(tree, parentPath);
-    if (Array.isArray(parent)) {
-      for (let i = lastIndex + 1; i < parent.length; i++) {
-        const found = getFirstLeafParentPath(tree, [...parentPath, i]);
-        if (found) return found;
-      }
-    }
-    current.pop();
-  }
-  return null;
-}
-var FormContext = createContext(null);
-var InternalFormContext = createContext(null);
-function useFormContext() {
-  const context = useContext(FormContext);
-  if (!context) {
-    throw new Error("useFormContext must be used within a <Form>");
-  }
-  return context;
-}
-function useInternalFormContext() {
-  const context = useContext(InternalFormContext);
-  if (!context) {
-    throw new Error("useInternalFormContext must be used within a <Form>");
-  }
+var StepperContext = createContext(null);
+var InternalStepperContext = createContext(null);
+function useInternalStepperContext() {
+  const context = useContext(InternalStepperContext);
   return context;
 }
-function FormInner({ form, onSubmit, stepValidationMode = "forward", children, ...props }, ref) {
-  const [steps, setSteps] = useState([]);
-  const [currentStep, setCurrentStep] = useState(null);
-  const [validatedFields, setValidatedFields] = useState([]);
+function Stepper({
+  form: formProps,
+  stepValidationMode = "forward",
+  children
+}) {
+  const formContext = useFormContext();
+  const form = formProps != null ? formProps : formContext;
+  const [steps, setSteps] = useState({});
+  const [stepOrder, setStepOrder] = useState([]);
+  const [activeStep, setActiveStep] = useState(-1);
+  const [validSteps, setValidSteps] = useState([]);
   const [registrationKey, setRegistrationKey] = useState(0);
   const stepRef = useRef(void 0);
-  const _currentStep = useMemo(() => {
-    if (!currentStep) return null;
-    const sliced = currentStep.slice(1);
-    return sliced.length === 1 ? sliced[0] : sliced;
-  }, [currentStep]);
-  const currentStepNode = useMemo(
-    () => currentStep ? getNodeAtPath(steps, currentStep) : void 0,
-    [steps, currentStep]
-  );
-  const currentStepArr = useMemo(() => {
-    if (!currentStepNode) return null;
-    return isLeafParent(currentStepNode) ? currentStepNode : null;
-  }, [currentStepNode]);
-  const _setCurrentStep = useCallback(
-    async (step, beforeStepChange) => {
-      const path = typeof step === "number" ? [0, step] : [0, ...step];
-      if (currentStep && currentStepArr && stepValidationMode !== "none") {
-        const isForward = comparePaths(path, currentStep) > 0;
+  const fields = useMemo(() => {
+    if (activeStep === -1 || !steps[stepOrder[activeStep]]) return null;
+    return Array.from(new Set(steps[stepOrder[activeStep]]));
+  }, [steps, stepOrder, activeStep]);
+  const jumpTo = useCallback(
+    async (step, onLeave) => {
+      if (activeStep !== -1 && fields && stepValidationMode !== "none") {
+        const isForward = step > activeStep;
         const shouldValidate = stepValidationMode === "all" || stepValidationMode === "forward" && isForward;
         if (shouldValidate) {
-          const isValid = await form.trigger(currentStepArr);
+          const isValid = await form.trigger(fields);
           if (!isValid) {
-            setValidatedFields((prev2) => prev2.filter((field) => !currentStepArr.includes(field)));
+            setValidSteps((prev2) => prev2.filter((s) => s !== activeStep));
             return false;
           }
-          setValidatedFields((prev2) => [.../* @__PURE__ */ new Set([...prev2, ...currentStepArr])]);
+          setValidSteps((prev2) => [.../* @__PURE__ */ new Set([...prev2, activeStep])]);
         }
       }
-      if (beforeStepChange && currentStepArr) {
-        const watchedValues = form.watch(currentStepArr);
-        const values = buildNestedValues(currentStepArr, watchedValues);
-        await beforeStepChange(values);
+      if (onLeave && fields) {
+        const watchedValues = form.watch(fields);
+        const values = buildNestedValues(
+          fields,
+          watchedValues
+        );
+        await onLeave(values);
       }
-      setCurrentStep(path);
+      setActiveStep(step);
       return true;
     },
-    [currentStep, currentStepArr, form, stepValidationMode]
+    [activeStep, fields, form, stepValidationMode]
   );
   const isFirstStep = useMemo(
-    () => currentStep ? getPrevLeafParentPath(steps, currentStep) === null : true,
-    [steps, currentStep]
+    () => activeStep === -1 || activeStep === 0,
+    [activeStep]
   );
   const isLastStep = useMemo(
-    () => currentStep ? getNextLeafParentPath(steps, currentStep) === null : true,
-    [steps, currentStep]
+    () => activeStep === -1 || activeStep === stepOrder.length - 1,
+    [activeStep, stepOrder.length]
   );
-  const next = useCallback(async (beforeStepChange) => {
-    if (!currentStep) return false;
-    const nextPath = getNextLeafParentPath(steps, currentStep);
-    if (currentStepArr && stepValidationMode !== "none") {
-      const isValid = await form.trigger(currentStepArr);
-      if (!isValid) {
-        setValidatedFields((prev2) => prev2.filter((field) => !currentStepArr.includes(field)));
-        return false;
+  const next = useCallback(
+    async (onLeave) => {
+      const callback = typeof onLeave === "function" ? onLeave : void 0;
+      if (activeStep === -1 || activeStep >= stepOrder.length - 1) return false;
+      if (fields && stepValidationMode !== "none") {
+        const isValid = await form.trigger(fields);
+        if (!isValid) {
+          setValidSteps((prev2) => prev2.filter((s) => s !== activeStep));
+          return false;
+        }
+        setValidSteps((prev2) => [.../* @__PURE__ */ new Set([...prev2, activeStep])]);
       }
-      setValidatedFields((prev2) => [.../* @__PURE__ */ new Set([...prev2, ...currentStepArr])]);
-    }
-    if (nextPath) {
-      if (beforeStepChange && currentStepArr) {
-        const watchedValues = form.watch(currentStepArr);
-        const values = buildNestedValues(currentStepArr, watchedValues);
-        await beforeStepChange(values);
+      if (callback && fields) {
+        const watchedValues = form.watch(fields);
+        const values = buildNestedValues(
+          fields,
+          watchedValues
+        );
+        await callback(values);
       }
-      setCurrentStep(nextPath);
+      setActiveStep(activeStep + 1);
       return true;
-    }
-    return false;
-  }, [steps, currentStep, currentStepArr, form, stepValidationMode]);
-  const prev = useCallback(async (beforeStepChange) => {
-    if (!currentStep) return false;
-    const prevPath = getPrevLeafParentPath(steps, currentStep);
-    if (currentStepArr && stepValidationMode === "all") {
-      const isValid = await form.trigger(currentStepArr);
-      if (!isValid) {
-        setValidatedFields((prev2) => prev2.filter((field) => !currentStepArr.includes(field)));
-        return false;
+    },
+    [stepOrder.length, activeStep, fields, form, stepValidationMode]
+  );
+  const prev = useCallback(
+    async (onLeave) => {
+      const callback = typeof onLeave === "function" ? onLeave : void 0;
+      if (activeStep === -1 || activeStep <= 0) return false;
+      if (fields && stepValidationMode === "all") {
+        const isValid = await form.trigger(fields);
+        if (!isValid) {
+          setValidSteps((prev2) => prev2.filter((s) => s !== activeStep));
+          return false;
+        }
+        setValidSteps((prev2) => [.../* @__PURE__ */ new Set([...prev2, activeStep])]);
       }
-      setValidatedFields((prev2) => [.../* @__PURE__ */ new Set([...prev2, ...currentStepArr])]);
-    }
-    if (prevPath) {
-      if (beforeStepChange && currentStepArr) {
-        const watchedValues = form.watch(currentStepArr);
-        const values = buildNestedValues(currentStepArr, watchedValues);
-        await beforeStepChange(values);
+      if (callback && fields) {
+        const watchedValues = form.watch(fields);
+        const values = buildNestedValues(
+          fields,
+          watchedValues
+        );
+        await callback(values);
       }
-      setCurrentStep(prevPath);
+      setActiveStep(activeStep - 1);
       return true;
-    }
-    return false;
-  }, [steps, currentStep, currentStepArr, form, stepValidationMode]);
+    },
+    [activeStep, fields, form, stepValidationMode]
+  );
   const registerStep = useCallback(
-    (elements, stepRef2, step) => {
+    (elements, id) => {
       setSteps((prevSteps) => {
-        const stepNumber = step != null ? step : Array.isArray(prevSteps) ? prevSteps.length : 0;
-        stepRef2.current = stepNumber;
-        const newSteps = Array.isArray(prevSteps) ? [...prevSteps] : [prevSteps];
-        newSteps.splice(stepNumber, 0, elements);
-        if (currentStep === null) {
-          const firstLeafParent = getFirstLeafParentPath(newSteps, [0]);
-          if (firstLeafParent) {
-            setCurrentStep(firstLeafParent);
-          }
+        stepRef.current = id;
+        const newSteps = { ...prevSteps };
+        newSteps[id] = elements;
+        if (activeStep === -1 && Object.keys(newSteps).length > 0) {
+          setActiveStep(0);
         }
         return newSteps;
       });
     },
-    [currentStep]
+    [activeStep]
+  );
+  const registerStepOrder = useCallback(
+    (id) => {
+      setStepOrder((prevSteps) => {
+        return Array.from(/* @__PURE__ */ new Set([...prevSteps, id]));
+      });
+    },
+    [activeStep]
+  );
+  useCallback(
+    (id) => {
+      setSteps((prevSteps) => {
+        const newSteps = { ...prevSteps };
+        delete newSteps[id];
+        return newSteps;
+      });
+    },
+    [activeStep]
   );
   const rebuildSteps = useCallback(() => {
-    setSteps([]);
+    setStepOrder([]);
     setRegistrationKey((prev2) => prev2 + 1);
   }, []);
-  const changeStepAtIndex = useCallback((steps2, index) => {
-    setSteps((prevSteps) => {
-      const newSteps = Array.isArray(prevSteps) ? [...prevSteps] : [prevSteps];
-      newSteps[index] = steps2;
-      return newSteps;
-    });
-  }, []);
+  const changeStepAtIndex = useCallback(
+    (elements, index) => {
+      setSteps((prevSteps) => {
+        const newSteps = { ...prevSteps };
+        prevSteps[index] = elements;
+        return newSteps;
+      });
+    },
+    []
+  );
   const publicContextValue = useMemo(
     () => ({
-      currentStep: _currentStep,
-      setCurrentStep: _setCurrentStep,
-      currentStepNode,
-      currentStepArr,
-      validatedFields,
+      activeStep,
+      jumpTo,
+      fields,
+      validSteps,
       isFirstStep,
       isLastStep,
-      form,
       next,
       prev
     }),
     [
-      form,
-      _currentStep,
-      _setCurrentStep,
-      currentStepNode,
-      currentStepArr,
-      validatedFields,
+      activeStep,
+      jumpTo,
+      fields,
+      validSteps,
       isFirstStep,
       isLastStep,
       next,
@@ -354,29 +211,100 @@ function FormInner({ form, onSubmit, stepValidationMode = "forward", children, .
       step: stepRef.current,
       registrationKey,
       rebuildSteps,
+      registerStepOrder,
       registerStep,
       changeStepAtIndex
     }),
-    [registrationKey, rebuildSteps, registerStep, changeStepAtIndex]
+    [
+      registrationKey,
+      rebuildSteps,
+      registerStepOrder,
+      registerStep,
+      changeStepAtIndex
+    ]
   );
   const resolvedChildren = (
     // eslint-disable-next-line react-hooks/refs
-    typeof children === "function" ? children(publicContextValue) : children
+    typeof children === "function" ? children(
+      publicContextValue
+    ) : children
   );
   return (
     // eslint-disable-next-line react-hooks/refs
-    /* @__PURE__ */ jsx(FormContext.Provider, { value: publicContextValue, children: /* @__PURE__ */ jsx(InternalFormContext.Provider, { value: internalContextValue, children: /* @__PURE__ */ jsx("form", { ref, onSubmit: form.handleSubmit(onSubmit), ...props, children: /* @__PURE__ */ jsx(Step, { children: resolvedChildren }) }) }) })
+    /* @__PURE__ */ jsx(StepperContext.Provider, { value: publicContextValue, children: /* @__PURE__ */ jsx(InternalStepperContext.Provider, { value: internalContextValue, children: resolvedChildren }) })
   );
 }
-var Form = forwardRef(FormInner);
-Form.displayName = "Form";
-function Controller({ name, control, ...rest }) {
-  const formContext = useFormContext();
+function useStepper() {
+  const context = useContext(StepperContext);
+  return context;
+}
+var StepContext = createContext(null);
+function useStep() {
+  return useContext(StepContext);
+}
+function Step({ children }) {
+  const formContext = useInternalStepperContext();
+  const {
+    registerStep: registerStepFromParent,
+    step: stepFromParent,
+    rebuildSteps: rebuildStepsFromParent,
+    registerStepOrder,
+    changeStepAtIndex: changeStepAtIndexFromParent,
+    registrationKey: registrationKeyFromParent
+  } = formContext;
+  const stepRef = useRef(void 0);
+  const [id] = useState(generateGUID());
+  const [steps, setSteps] = useState([]);
+  const [registrationKey, setRegistrationKey] = useState(0);
+  useEffect(() => {
+    const stepList = steps.length ? steps : [""];
+    registerStepFromParent(stepList, id);
+    registerStepOrder(id);
+  }, [steps]);
+  useEffect(() => {
+    if (registrationKeyFromParent) {
+      registerStepOrder(id);
+    }
+  }, [registrationKeyFromParent]);
+  useEffect(() => {
+    if (stepFromParent !== void 0) {
+      rebuildStepsFromParent();
+    }
+    return () => {
+      rebuildStepsFromParent();
+    };
+  }, []);
+  const registerField = useCallback(
+    (element) => {
+      setSteps((prevSteps) => {
+        return Array.from(/* @__PURE__ */ new Set([...prevSteps, element]));
+      });
+    },
+    [steps]
+  );
+  const rebuildSteps = useCallback(() => {
+    stepRef.current = void 0;
+    setSteps([]);
+    setRegistrationKey((prev) => prev + 1);
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      // eslint-disable-next-line react-hooks/refs
+      step: stepRef.current,
+      registrationKey,
+      registerField,
+      rebuildSteps
+    }),
+    [registrationKey, registerField, rebuildSteps]
+  );
+  return /* @__PURE__ */ jsx(StepContext.Provider, { value: contextValue, children });
+}
+Step.displayName = "Step";
+function Controller({ name, ...rest }) {
   const stepContext = useStep();
-  const resolvedControl = control != null ? control : formContext.form.control;
   useEffect(() => {
     if (stepContext) {
-      stepContext.registerField([name]);
+      stepContext.registerField(name);
     }
   }, [stepContext == null ? void 0 : stepContext.registrationKey]);
   useEffect(() => {
@@ -387,10 +315,27 @@ function Controller({ name, control, ...rest }) {
       stepContext == null ? void 0 : stepContext.rebuildSteps();
     };
   }, []);
-  return /* @__PURE__ */ jsx(Controller$1, { name, control: resolvedControl, ...rest });
+  return /* @__PURE__ */ jsx(Controller$1, { name, ...rest });
 }
 Controller.displayName = "Controller";
+function useController(props) {
+  const stepContext = useStep();
+  useEffect(() => {
+    if (stepContext) {
+      stepContext.registerField(props.name);
+    }
+  }, [stepContext == null ? void 0 : stepContext.registrationKey]);
+  useEffect(() => {
+    if ((stepContext == null ? void 0 : stepContext.step) !== void 0) {
+      stepContext == null ? void 0 : stepContext.rebuildSteps();
+    }
+    return () => {
+      stepContext == null ? void 0 : stepContext.rebuildSteps();
+    };
+  }, []);
+  return useController$1({ ...props });
+}
 
-export { Controller, Form, Step, useFormContext };
+export { Controller, Step, Stepper, useController, useStepper };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map