@saas-ui/forms 2.0.0-next.19 → 2.0.0-next.20

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { useFormContext as useFormContext$1, useForm, FormProvider as FormProvid
 export { Controller, appendErrors, useController, useFieldArray, useForm, useFormState, useWatch } from 'react-hook-form';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { forwardRef, NumberInput as NumberInput$1, NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper, InputRightElement, Button, InputGroup, Input, RadioGroup, Stack, Radio, useMultiStyleConfig, useFormControlContext, MenuButton, omitThemingProps, Menu, chakra, MenuItemOption, Select as Select$1, Switch, Checkbox, HStack, PinInput, FormControl, FormLabel, Text, useControllableState, useFormControl, MenuList, MenuOptionGroup, Box, FormHelperText, FormErrorMessage, PinInputField, useTheme, SimpleGrid, useStyleConfig, useMergeRefs, Textarea } from '@chakra-ui/react';
-import { ChevronUpIcon, ChevronDownIcon, useStepper, useStep, useStepperContext, StepperStep, StepperContainer, StepperSteps, StepperProvider } from '@saas-ui/core';
+import { ChevronUpIcon, ChevronDownIcon, useStepper, useStep, useStepperContext, StepsItem, Steps, StepperProvider } from '@saas-ui/core';
 import { ViewIcon, ViewOffIcon, MinusIcon, PlusIcon } from '@saas-ui/core/icons';
 import { dataAttr, cx, isFunction, runIfFn, callAllHandlers, get as get$1 } from '@chakra-ui/utils';
 import { createContext } from '@chakra-ui/react-utils';
@@ -894,8 +894,9 @@ var [StepFormProvider, useStepFormContext] = createContext({
   errorMessage: "useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`"
 });
 function useStepForm(props) {
-  const { onChange, ...rest } = props;
+  const { onChange, steps: stepsOptions, resolver, ...rest } = props;
   const stepper = useStepper(rest);
+  const [options, setOptions] = React12.useState(stepsOptions);
   const { activeStep, isLastStep, nextStep } = stepper;
   const [steps, updateSteps] = React12.useState({});
   const onSubmitStep = React12.useCallback(
@@ -924,19 +925,26 @@ function useStepForm(props) {
     return {
       onSubmit: onSubmitStep,
       schema: step == null ? void 0 : step.schema,
-      resolver: step == null ? void 0 : step.resolver
+      resolver: (step == null ? void 0 : step.schema) ? (
+        /* @todo fix resolver type */
+        resolver == null ? void 0 : resolver(step.schema)
+      ) : void 0
     };
   }, [steps, onSubmitStep, activeStep]);
   const updateStep = React12.useCallback(
     (step) => {
+      const stepOptions = options == null ? void 0 : options.find((s) => s.name === step.name);
       updateSteps((steps2) => {
         return {
           ...steps2,
-          [step.name]: step
+          [step.name]: {
+            ...step,
+            schema: stepOptions == null ? void 0 : stepOptions.schema
+          }
         };
       });
     },
-    [steps]
+    [steps, options]
   );
   return {
     getFormProps,
@@ -959,13 +967,23 @@ function useFormStep(props) {
 }
 var FormStepper = (props) => {
   const { activeIndex, setIndex } = useStepperContext();
-  const { children, orientation, variant, colorScheme, size, ...rest } = props;
+  const {
+    children,
+    orientation,
+    variant,
+    colorScheme,
+    size,
+    onChange: onChangeProp,
+    render,
+    ...rest
+  } = props;
   const elements = React12.Children.map(children, (child) => {
     if (React12.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
       const { isCompleted } = useFormStep(child.props);
       return /* @__PURE__ */ jsx(
-        StepperStep,
+        StepsItem,
         {
+          render,
           name: child.props.name,
           title: child.props.title,
           isCompleted,
@@ -978,9 +996,10 @@ var FormStepper = (props) => {
   });
   const onChange = React12.useCallback((i) => {
     setIndex(i);
+    onChangeProp == null ? void 0 : onChangeProp(i);
   }, []);
   return /* @__PURE__ */ jsx(
-    StepperContainer,
+    Steps,
     {
       orientation,
       step: activeIndex,
@@ -988,13 +1007,13 @@ var FormStepper = (props) => {
       colorScheme,
       size,
       onChange,
-      children: /* @__PURE__ */ jsx(StepperSteps, { mb: "4", ...props, children: elements })
+      children: elements
     }
   );
 };
 var FormStep = (props) => {
-  const { name, schema, resolver, children, className, onSubmit, ...rest } = props;
-  const step = useFormStep({ name, schema, resolver, onSubmit });
+  const { name, children, className, onSubmit, ...rest } = props;
+  const step = useFormStep({ name, onSubmit });
   const { isActive } = step;
   return isActive ? /* @__PURE__ */ jsx(chakra.div, { ...rest, className: cx("sui-form__step", className), children }) : null;
 };
@@ -1171,26 +1190,31 @@ function createForm({
   DefaultForm.id = "Form";
   return DefaultForm;
 }
-function createStepForm(Form4) {
+function createStepForm({ fields, resolver, fieldResolver } = {}) {
   const StepForm2 = forwardRef((props, ref) => {
-    const { children, ...rest } = props;
-    const stepper = useStepForm(props);
+    const { children, steps, ...rest } = props;
+    const stepper = useStepForm({
+      resolver,
+      fieldResolver,
+      ...props
+    });
     const { getFormProps, ...ctx } = stepper;
     const context = useMemo(() => ctx, [ctx]);
-    return /* @__PURE__ */ jsx(StepperProvider, { value: context, children: /* @__PURE__ */ jsx(StepFormProvider, { value: context, children: /* @__PURE__ */ jsx(Form4, { ref, ...rest, ...getFormProps(), children: runIfFn(children, {
+    return /* @__PURE__ */ jsx(StepperProvider, { value: context, children: /* @__PURE__ */ jsx(StepFormProvider, { value: context, children: /* @__PURE__ */ jsx(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsx(Form2, { ref, ...rest, ...getFormProps(), children: runIfFn(children, {
       ...stepper,
       Field,
+      FormStep,
       DisplayIf,
       ArrayField,
       ObjectField
-    }) }) }) });
+    }) }) }) }) });
   });
-  StepForm2.displayName = `Step${Form4.displayName || Form4.name}`;
+  StepForm2.displayName = `Step${Form2.displayName || Form2.name}`;
   return StepForm2;
 }
-var Form3 = createForm();
-var StepForm = createStepForm(Form3);
+var Form2 = createForm();
+var StepForm = createStepForm();
 
-export { ArrayField, ArrayFieldAddButton, ArrayFieldContainer, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, ArrayFieldRowProvider, ArrayFieldRows, AutoFields, BaseField, Form as BaseForm, CheckboxField, DisplayField, DisplayIf, Field, FieldsProvider, Form3 as Form, FormLayout, FormLegend, FormProvider, FormStep, FormStepper, FormValue, InputField, InputRightButton, NativeSelect, NativeSelectField, NextButton, NumberInputField2 as NumberInputField, ObjectField, PasswordInput, PasswordInputField, PinField, PrevButton, RadioField, RadioInput, Select, SelectButton, SelectField, SelectList, SelectOption, StepForm, StepFormProvider, SubmitButton, SwitchField, TextareaField, WatchField, createField, createForm, defaultFieldTypes, objectFieldResolver, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useField, useFormContext, useFormStep, useStepForm, useStepFormContext };
+export { ArrayField, ArrayFieldAddButton, ArrayFieldContainer, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, ArrayFieldRowProvider, ArrayFieldRows, AutoFields, BaseField, Form as BaseForm, CheckboxField, DisplayField, DisplayIf, Field, FieldsProvider, Form2 as Form, FormLayout, FormLegend, FormProvider, FormStep, FormStepper, FormValue, InputField, InputRightButton, NativeSelect, NativeSelectField, NextButton, NumberInputField2 as NumberInputField, ObjectField, PasswordInput, PasswordInputField, PinField, PrevButton, RadioField, RadioInput, Select, SelectButton, SelectField, SelectList, SelectOption, StepForm, StepFormProvider, SubmitButton, SwitchField, TextareaField, WatchField, createField, createForm, createStepForm, defaultFieldTypes, objectFieldResolver, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useField, useFormContext, useFormStep, useStepForm, useStepFormContext };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map