@saas-ui/forms 2.0.0-next.9 → 2.0.0-rc.23

package/dist/index.mjs

@@ -1,18 +1,18 @@
-import * as React13 from 'react';
-import React13__default, { useState } from 'react';
+import * as React12 from 'react';
+import React12__default, { useState, useMemo } from 'react';
 import { useFormContext as useFormContext$1, useForm, FormProvider as FormProvider$1, useFieldArray, useWatch, get, Controller } from 'react-hook-form';
 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 { StepperProvider, ChevronUpIcon, ChevronDownIcon, useStepper, useStep, useStepperContext, StepperStep, StepperContainer, StepperSteps } 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';
 
 // src/form-context.tsx
-var FormContext = React13.createContext(null);
+var FormContext = React12.createContext(null);
 var useFormContext = () => {
-  const context = React13.useContext(FormContext);
+  const context = React12.useContext(FormContext);
   const hookContext = useFormContext$1();
   if (!context) {
     throw new Error("FormProvider must be used within a Form component");
@@ -26,7 +26,7 @@ var useFieldProps = (name) => {
   var _a;
   const parsedName = name == null ? void 0 : name.replace(/\.[0-9]/g, ".$");
   const context = useFormContext();
-  return (_a = context == null ? void 0 : context.fields) == null ? void 0 : _a[parsedName];
+  return ((_a = context == null ? void 0 : context.fields) == null ? void 0 : _a[parsedName]) || {};
 };
 var FormProvider = (props) => {
   const { children, fieldResolver, schema, fields, ...rest } = props;
@@ -127,15 +127,15 @@ var PasswordInput = forwardRef(
 );
 PasswordInput.displayName = "PasswordInput";
 var mapNestedFields = (name, children) => {
-  return React13.Children.map(children, (child) => {
-    if (React13.isValidElement(child) && child.props.name) {
+  return React12.Children.map(children, (child) => {
+    if (React12.isValidElement(child) && child.props.name) {
       let childName = child.props.name;
       if (childName.includes(".")) {
         childName = childName.replace(/^.*\.(.*)/, "$1");
       } else if (childName.includes(".$")) {
         childName = childName.replace(/^.*\.\$(.*)/, "$1");
       }
-      return React13.cloneElement(child, {
+      return React12.cloneElement(child, {
         ...child.props,
         name: `${name}.${childName}`
       });
@@ -195,14 +195,14 @@ var useSelect = (props) => {
     onChange
   });
   const controlProps = useFormControl({ name });
-  const options = React13__default.useMemo(
+  const options = React12__default.useMemo(
     () => optionsProp && mapOptions(optionsProp),
     [optionsProp]
   );
   const handleChange = (value2) => {
     setCurrentValue(value2);
   };
-  const getDisplayValue = React13__default.useCallback(
+  const getDisplayValue = React12__default.useCallback(
     (value2) => {
       if (!options) {
         return value2;
@@ -216,7 +216,7 @@ var useSelect = (props) => {
     },
     [options]
   );
-  const displayValue = React13__default.useMemo(
+  const displayValue = React12__default.useMemo(
     () => currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
       getDisplayValue
     ) : [],
@@ -280,7 +280,8 @@ var SelectButton = forwardRef(
       MenuButton,
       {
         as: Button,
-        id: id || React13.useId(),
+        id: id || React12.useId(),
+        ...buttonStyles,
         ...rest,
         onFocus,
         onBlur,
@@ -291,7 +292,6 @@ var SelectButton = forwardRef(
         "data-required": dataAttr(isRequired),
         rightIcon,
         ref,
-        sx: buttonStyles,
         children: renderValue(displayValue) || placeholder
       }
     );
@@ -553,7 +553,7 @@ var defaultFieldTypes = {
   pin: PinField,
   "native-select": NativeSelectField
 };
-var FieldsContext = React13__default.createContext(
+var FieldsContext = React12__default.createContext(
   null
 );
 var FieldsProvider = (props) => {
@@ -561,11 +561,11 @@ var FieldsProvider = (props) => {
   return /* @__PURE__ */ jsx(FieldsContext.Provider, { value: fields, children: props.children });
 };
 var useField = (type) => {
-  const context = React13__default.useContext(FieldsContext);
+  const context = React12__default.useContext(FieldsContext);
   return (context == null ? void 0 : context[type]) || InputField;
 };
 var defaultInputType = "text";
-var Field = React13.forwardRef(
+var Field = React12.forwardRef(
   (props, ref) => {
     const { type = defaultInputType, name } = props;
     const overrides = useFieldProps(name);
@@ -592,8 +592,8 @@ var FormLayout = ({ children, ...props }) => {
     {
       ...gridProps,
       className: cx("sui-form__layout", props.className),
-      children: React13.Children.map(children, (child) => {
-        if (React13.isValidElement(child)) {
+      children: React12.Children.map(children, (child) => {
+        if (React12.isValidElement(child)) {
           return /* @__PURE__ */ jsx(FormLayoutItem, { children: child });
         }
         return child;
@@ -632,7 +632,7 @@ var useArrayField = ({
 var useArrayFieldRow = ({ index }) => {
   const { clearErrors } = useFormContext();
   const { name, remove, fields } = useArrayFieldContext();
-  React13.useEffect(() => {
+  React12.useEffect(() => {
     clearErrors(name);
   }, []);
   return {
@@ -640,7 +640,7 @@ var useArrayFieldRow = ({ index }) => {
     isFirst: index === 0,
     isLast: index === fields.length - 1,
     name: `${name}.${index}`,
-    remove: React13.useCallback(() => {
+    remove: React12.useCallback(() => {
       clearErrors(name);
       remove(index);
     }, [index])
@@ -735,7 +735,7 @@ var ArrayFieldRows = ({
   return children(fields);
 };
 ArrayFieldRows.displayName = "ArrayFieldRows";
-var ArrayFieldContainer = React13.forwardRef(
+var ArrayFieldContainer = React12.forwardRef(
   ({
     name,
     defaultValue,
@@ -745,15 +745,16 @@ var ArrayFieldContainer = React13.forwardRef(
     children,
     ...fieldProps
   }, ref) => {
+    const overrides = useFieldProps(name);
     const context = useArrayField({
       name,
       defaultValue,
       keyName,
-      min,
-      max
+      min: min || (overrides == null ? void 0 : overrides.min),
+      max: max || (overrides == null ? void 0 : overrides.max)
     });
-    React13.useImperativeHandle(ref, () => context, [ref, context]);
-    return /* @__PURE__ */ jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsx(BaseField, { name, ...fieldProps, children }) });
+    React12.useImperativeHandle(ref, () => context, [ref, context]);
+    return /* @__PURE__ */ jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsx(BaseField, { name, ...fieldProps, ...overrides, children }) });
   }
 );
 ArrayFieldContainer.displayName = "ArrayFieldContainer";
@@ -762,10 +763,28 @@ var FormLegend = (props) => {
   return /* @__PURE__ */ jsx(FormLabel, { as: "legend", sx: styles, ...props });
 };
 var ObjectField = (props) => {
-  const { name, label, hideLabel, children, columns, spacing, ...fieldProps } = props;
-  return /* @__PURE__ */ jsxs(FormControl, { name, as: "fieldset", ...fieldProps, children: [
-    /* @__PURE__ */ jsx(FormLegend, { display: hideLabel ? "none" : "block", children: label }),
-    /* @__PURE__ */ jsx(FormLayout, { columns, gridGap: spacing, children: mapNestedFields(name, children) })
+  const {
+    name,
+    label,
+    hideLabel: hideLabelProp,
+    children,
+    columns: columnsProp,
+    spacing: spacingProp,
+    ...fieldProps
+  } = props;
+  const { hideLabel, columns, spacing, ...overrides } = useFieldProps(
+    name
+  );
+  return /* @__PURE__ */ jsxs(FormControl, { name, as: "fieldset", ...fieldProps, ...overrides, children: [
+    /* @__PURE__ */ jsx(FormLegend, { display: hideLabelProp || hideLabel ? "none" : "block", children: label }),
+    /* @__PURE__ */ jsx(
+      FormLayout,
+      {
+        columns: columnsProp || columns,
+        gridGap: spacingProp || spacing,
+        children: mapNestedFields(name, children)
+      }
+    )
   ] });
 };
 ObjectField.displayName = "ObjectField";
@@ -792,10 +811,10 @@ var AutoFields = ({
   const context = useFormContext();
   const schema = schemaProp || context.schema;
   const fieldResolver = fieldResolverProp || context.fieldResolver;
-  const resolver = React13.useMemo(() => fieldResolver, [schema, fieldResolver]);
-  const fields = React13.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
+  const resolver = React12.useMemo(() => fieldResolver, [schema, fieldResolver]);
+  const fields = React12.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
   const form = useFormContext();
-  React13.useEffect(() => {
+  React12.useEffect(() => {
     var _a;
     if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
       form.setFocus(fields[0].name);
@@ -870,100 +889,17 @@ var DisplayIf = ({
   return condition(value, context) ? children : null;
 };
 DisplayIf.displayName = "DisplayIf";
-var Form = forwardRef(
-  (props, ref) => {
-    const {
-      mode = "all",
-      resolver,
-      fieldResolver,
-      fields,
-      reValidateMode,
-      shouldFocusError,
-      shouldUnregister,
-      shouldUseNativeValidation,
-      criteriaMode,
-      delayError,
-      schema,
-      defaultValues,
-      values,
-      context,
-      resetOptions,
-      onChange,
-      onSubmit,
-      onError,
-      formRef,
-      children,
-      ...rest
-    } = props;
-    const form = {
-      mode,
-      resolver,
-      defaultValues,
-      values,
-      reValidateMode,
-      shouldFocusError,
-      shouldUnregister,
-      shouldUseNativeValidation,
-      criteriaMode,
-      delayError,
-      context,
-      resetOptions
-    };
-    const methods = useForm(form);
-    const { handleSubmit } = methods;
-    React13.useImperativeHandle(formRef, () => methods, [formRef, methods]);
-    React13.useEffect(() => {
-      let subscription;
-      if (onChange) {
-        subscription = methods.watch(onChange);
-      }
-      return () => subscription == null ? void 0 : subscription.unsubscribe();
-    }, [methods, onChange]);
-    let _children = children;
-    if (!_children && fieldResolver) {
-      _children = /* @__PURE__ */ jsxs(FormLayout, { children: [
-        /* @__PURE__ */ jsx(AutoFields, {}),
-        /* @__PURE__ */ jsx(SubmitButton, { ...fields == null ? void 0 : fields.submit })
-      ] });
-    }
-    return /* @__PURE__ */ jsx(
-      FormProvider,
-      {
-        ...methods,
-        schema,
-        fieldResolver,
-        fields,
-        children: /* @__PURE__ */ jsx(
-          chakra.form,
-          {
-            ref,
-            onSubmit: handleSubmit(onSubmit, onError),
-            ...rest,
-            className: cx("sui-form", props.className),
-            children: runIfFn(_children, {
-              Field,
-              DisplayIf,
-              ArrayField,
-              ObjectField,
-              ...methods
-            })
-          }
-        )
-      }
-    );
-  }
-);
-Form.displayName = "Form";
 var [StepFormProvider, useStepFormContext] = createContext({
   name: "StepFormContext",
   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] = React13.useState({});
-  const onSubmitStep = React13.useCallback(
+  const [steps, updateSteps] = React12.useState({});
+  const onSubmitStep = React12.useCallback(
     async (data) => {
       var _a, _b;
       try {
@@ -984,24 +920,31 @@ function useStepForm(props) {
     },
     [steps, activeStep, isLastStep]
   );
-  const getFormProps = React13.useCallback(() => {
+  const getFormProps = React12.useCallback(() => {
     const step = steps[activeStep];
     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 = React13.useCallback(
+  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,
@@ -1014,7 +957,7 @@ function useFormStep(props) {
   const { name, schema, resolver, onSubmit } = props;
   const step = useStep({ name });
   const { steps, updateStep } = useStepFormContext();
-  React13.useEffect(() => {
+  React12.useEffect(() => {
     updateStep({ name, schema, resolver, onSubmit });
   }, [name, schema]);
   return {
@@ -1022,24 +965,25 @@ function useFormStep(props) {
     ...steps[name] || { name, schema }
   };
 }
-var StepForm = React13.forwardRef(
-  (props, ref) => {
-    const { children, ...rest } = props;
-    const stepper = useStepForm(props);
-    const { getFormProps, ...ctx } = stepper;
-    const context = React13.useMemo(() => ctx, [ctx]);
-    return /* @__PURE__ */ jsx(StepperProvider, { value: context, children: /* @__PURE__ */ jsx(StepFormProvider, { value: context, children: /* @__PURE__ */ jsx(Form, { ref, ...rest, ...getFormProps(), children: runIfFn(children, stepper) }) }) });
-  }
-);
 var FormStepper = (props) => {
   const { activeIndex, setIndex } = useStepperContext();
-  const { children, orientation, variant, colorScheme, size, ...rest } = props;
-  const elements = React13.Children.map(children, (child) => {
-    if (React13.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
+  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,
@@ -1050,11 +994,12 @@ var FormStepper = (props) => {
     }
     return child;
   });
-  const onChange = React13.useCallback((i) => {
+  const onChange = React12.useCallback((i) => {
     setIndex(i);
+    onChangeProp == null ? void 0 : onChangeProp(i);
   }, []);
   return /* @__PURE__ */ jsx(
-    StepperContainer,
+    Steps,
     {
       orientation,
       step: activeIndex,
@@ -1062,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;
 };
@@ -1079,7 +1024,7 @@ var PrevButton = (props) => {
     Button,
     {
       isDisabled: isFirstStep || isCompleted,
-      label: "Back",
+      children: "Back",
       ...props,
       className: cx("sui-form__prev-button", props.className),
       onClick: callAllHandlers(props.onClick, prevStep)
@@ -1138,12 +1083,96 @@ var WatchField = (props) => {
   });
   return props.children(field, form) || null;
 };
+var Form = forwardRef(
+  (props, ref) => {
+    const {
+      mode = "all",
+      resolver,
+      fieldResolver,
+      fields,
+      reValidateMode,
+      shouldFocusError,
+      shouldUnregister,
+      shouldUseNativeValidation,
+      criteriaMode,
+      delayError,
+      schema,
+      defaultValues,
+      values,
+      context,
+      resetOptions,
+      onChange,
+      onSubmit,
+      onError,
+      formRef,
+      children,
+      ...rest
+    } = props;
+    const form = {
+      mode,
+      resolver,
+      defaultValues,
+      values,
+      reValidateMode,
+      shouldFocusError,
+      shouldUnregister,
+      shouldUseNativeValidation,
+      criteriaMode,
+      delayError,
+      context,
+      resetOptions
+    };
+    const methods = useForm(form);
+    const { handleSubmit } = methods;
+    React12.useImperativeHandle(formRef, () => methods, [formRef, methods]);
+    React12.useEffect(() => {
+      let subscription;
+      if (onChange) {
+        subscription = methods.watch(onChange);
+      }
+      return () => subscription == null ? void 0 : subscription.unsubscribe();
+    }, [methods, onChange]);
+    let _children = children;
+    if (!_children && fieldResolver) {
+      _children = /* @__PURE__ */ jsxs(FormLayout, { children: [
+        /* @__PURE__ */ jsx(AutoFields, {}),
+        /* @__PURE__ */ jsx(SubmitButton, { ...fields == null ? void 0 : fields.submit })
+      ] });
+    }
+    return /* @__PURE__ */ jsx(
+      FormProvider,
+      {
+        ...methods,
+        schema,
+        fieldResolver,
+        fields,
+        children: /* @__PURE__ */ jsx(
+          chakra.form,
+          {
+            ref,
+            onSubmit: handleSubmit(onSubmit, onError),
+            ...rest,
+            className: cx("sui-form", props.className),
+            children: runIfFn(_children, {
+              Field,
+              DisplayIf,
+              ArrayField,
+              ObjectField,
+              ...methods
+            })
+          }
+        )
+      }
+    );
+  }
+);
+Form.displayName = "Form";
 function createForm({
   resolver,
   fieldResolver = objectFieldResolver,
   fields
 } = {}) {
-  const CreateForm = forwardRef(
+  const DefaultForm = forwardRef(
     (props, ref) => {
       const { schema, ...rest } = props;
       return /* @__PURE__ */ jsx(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsx(
@@ -1157,10 +1186,35 @@ function createForm({
       ) });
     }
   );
-  return CreateForm;
+  DefaultForm.displayName = "Form";
+  DefaultForm.id = "Form";
+  return DefaultForm;
+}
+function createStepForm({ fields, resolver, fieldResolver } = {}) {
+  const StepForm2 = forwardRef((props, ref) => {
+    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(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsx(Form2, { ref, ...rest, ...getFormProps(), children: runIfFn(children, {
+      ...stepper,
+      Field,
+      FormStep,
+      DisplayIf,
+      ArrayField,
+      ObjectField
+    }) }) }) }) });
+  });
+  StepForm2.displayName = `Step${Form2.displayName || Form2.name}`;
+  return StepForm2;
 }
 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, 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, 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