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

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React13 = require('react');
+var React12 = require('react');
 var reactHookForm = require('react-hook-form');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@chakra-ui/react');
@@ -27,12 +27,12 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React13__namespace = /*#__PURE__*/_interopNamespace(React13);
+var React12__namespace = /*#__PURE__*/_interopNamespace(React12);
 
 // src/form-context.tsx
-var FormContext = React13__namespace.createContext(null);
+var FormContext = React12__namespace.createContext(null);
 var useFormContext = () => {
-  const context = React13__namespace.useContext(FormContext);
+  const context = React12__namespace.useContext(FormContext);
   const hookContext = reactHookForm.useFormContext();
   if (!context) {
     throw new Error("FormProvider must be used within a Form component");
@@ -46,7 +46,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;
@@ -108,7 +108,7 @@ var PasswordInput = react.forwardRef(
       leftAddon,
       ...inputProps
     } = props;
-    const [show, setShow] = React13.useState(false);
+    const [show, setShow] = React12.useState(false);
     const handleClick = () => setShow(!show);
     const label = show ? "Hide password" : "Show password";
     let icon;
@@ -147,15 +147,15 @@ var PasswordInput = react.forwardRef(
 );
 PasswordInput.displayName = "PasswordInput";
 var mapNestedFields = (name, children) => {
-  return React13__namespace.Children.map(children, (child) => {
-    if (React13__namespace.isValidElement(child) && child.props.name) {
+  return React12__namespace.Children.map(children, (child) => {
+    if (React12__namespace.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__namespace.cloneElement(child, {
+      return React12__namespace.cloneElement(child, {
         ...child.props,
         name: `${name}.${childName}`
       });
@@ -215,14 +215,14 @@ var useSelect = (props) => {
     onChange
   });
   const controlProps = react.useFormControl({ name });
-  const options = React13__namespace.default.useMemo(
+  const options = React12__namespace.default.useMemo(
     () => optionsProp && mapOptions(optionsProp),
     [optionsProp]
   );
   const handleChange = (value2) => {
     setCurrentValue(value2);
   };
-  const getDisplayValue = React13__namespace.default.useCallback(
+  const getDisplayValue = React12__namespace.default.useCallback(
     (value2) => {
       if (!options) {
         return value2;
@@ -236,7 +236,7 @@ var useSelect = (props) => {
     },
     [options]
   );
-  const displayValue = React13__namespace.default.useMemo(
+  const displayValue = React12__namespace.default.useMemo(
     () => currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
       getDisplayValue
     ) : [],
@@ -300,7 +300,8 @@ var SelectButton = react.forwardRef(
       react.MenuButton,
       {
         as: react.Button,
-        id: id || React13__namespace.useId(),
+        id: id || React12__namespace.useId(),
+        ...buttonStyles,
         ...rest,
         onFocus,
         onBlur,
@@ -311,7 +312,6 @@ var SelectButton = react.forwardRef(
         "data-required": utils.dataAttr(isRequired),
         rightIcon,
         ref,
-        sx: buttonStyles,
         children: renderValue(displayValue) || placeholder
       }
     );
@@ -573,7 +573,7 @@ var defaultFieldTypes = {
   pin: PinField,
   "native-select": NativeSelectField
 };
-var FieldsContext = React13__namespace.default.createContext(
+var FieldsContext = React12__namespace.default.createContext(
   null
 );
 var FieldsProvider = (props) => {
@@ -581,11 +581,11 @@ var FieldsProvider = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(FieldsContext.Provider, { value: fields, children: props.children });
 };
 var useField = (type) => {
-  const context = React13__namespace.default.useContext(FieldsContext);
+  const context = React12__namespace.default.useContext(FieldsContext);
   return (context == null ? void 0 : context[type]) || InputField;
 };
 var defaultInputType = "text";
-var Field = React13__namespace.forwardRef(
+var Field = React12__namespace.forwardRef(
   (props, ref) => {
     const { type = defaultInputType, name } = props;
     const overrides = useFieldProps(name);
@@ -612,8 +612,8 @@ var FormLayout = ({ children, ...props }) => {
     {
       ...gridProps,
       className: utils.cx("sui-form__layout", props.className),
-      children: React13__namespace.Children.map(children, (child) => {
-        if (React13__namespace.isValidElement(child)) {
+      children: React12__namespace.Children.map(children, (child) => {
+        if (React12__namespace.isValidElement(child)) {
           return /* @__PURE__ */ jsxRuntime.jsx(FormLayoutItem, { children: child });
         }
         return child;
@@ -652,7 +652,7 @@ var useArrayField = ({
 var useArrayFieldRow = ({ index }) => {
   const { clearErrors } = useFormContext();
   const { name, remove, fields } = useArrayFieldContext();
-  React13__namespace.useEffect(() => {
+  React12__namespace.useEffect(() => {
     clearErrors(name);
   }, []);
   return {
@@ -660,7 +660,7 @@ var useArrayFieldRow = ({ index }) => {
     isFirst: index === 0,
     isLast: index === fields.length - 1,
     name: `${name}.${index}`,
-    remove: React13__namespace.useCallback(() => {
+    remove: React12__namespace.useCallback(() => {
       clearErrors(name);
       remove(index);
     }, [index])
@@ -755,7 +755,7 @@ var ArrayFieldRows = ({
   return children(fields);
 };
 ArrayFieldRows.displayName = "ArrayFieldRows";
-var ArrayFieldContainer = React13__namespace.forwardRef(
+var ArrayFieldContainer = React12__namespace.forwardRef(
   ({
     name,
     defaultValue,
@@ -765,15 +765,16 @@ var ArrayFieldContainer = React13__namespace.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__namespace.useImperativeHandle(ref, () => context, [ref, context]);
-    return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(BaseField, { name, ...fieldProps, children }) });
+    React12__namespace.useImperativeHandle(ref, () => context, [ref, context]);
+    return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(BaseField, { name, ...fieldProps, ...overrides, children }) });
   }
 );
 ArrayFieldContainer.displayName = "ArrayFieldContainer";
@@ -782,10 +783,28 @@ var FormLegend = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.FormLabel, { as: "legend", sx: styles, ...props });
 };
 var ObjectField = (props) => {
-  const { name, label, hideLabel, children, columns, spacing, ...fieldProps } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.FormControl, { name, as: "fieldset", ...fieldProps, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(FormLegend, { display: hideLabel ? "none" : "block", children: label }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(react.FormControl, { name, as: "fieldset", ...fieldProps, ...overrides, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FormLegend, { display: hideLabelProp || hideLabel ? "none" : "block", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FormLayout,
+      {
+        columns: columnsProp || columns,
+        gridGap: spacingProp || spacing,
+        children: mapNestedFields(name, children)
+      }
+    )
   ] });
 };
 ObjectField.displayName = "ObjectField";
@@ -812,10 +831,10 @@ var AutoFields = ({
   const context = useFormContext();
   const schema = schemaProp || context.schema;
   const fieldResolver = fieldResolverProp || context.fieldResolver;
-  const resolver = React13__namespace.useMemo(() => fieldResolver, [schema, fieldResolver]);
-  const fields = React13__namespace.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
+  const resolver = React12__namespace.useMemo(() => fieldResolver, [schema, fieldResolver]);
+  const fields = React12__namespace.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
   const form = useFormContext();
-  React13__namespace.useEffect(() => {
+  React12__namespace.useEffect(() => {
     var _a;
     if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
       form.setFocus(fields[0].name);
@@ -890,100 +909,17 @@ var DisplayIf = ({
   return condition(value, context) ? children : null;
 };
 DisplayIf.displayName = "DisplayIf";
-var Form = react.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 = reactHookForm.useForm(form);
-    const { handleSubmit } = methods;
-    React13__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
-    React13__namespace.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__ */ jsxRuntime.jsxs(FormLayout, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AutoFields, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, { ...fields == null ? void 0 : fields.submit })
-      ] });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      FormProvider,
-      {
-        ...methods,
-        schema,
-        fieldResolver,
-        fields,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          react.chakra.form,
-          {
-            ref,
-            onSubmit: handleSubmit(onSubmit, onError),
-            ...rest,
-            className: utils.cx("sui-form", props.className),
-            children: utils.runIfFn(_children, {
-              Field,
-              DisplayIf,
-              ArrayField,
-              ObjectField,
-              ...methods
-            })
-          }
-        )
-      }
-    );
-  }
-);
-Form.displayName = "Form";
 var [StepFormProvider, useStepFormContext] = reactUtils.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 = core.useStepper(rest);
+  const [options, setOptions] = React12__namespace.useState(stepsOptions);
   const { activeStep, isLastStep, nextStep } = stepper;
-  const [steps, updateSteps] = React13__namespace.useState({});
-  const onSubmitStep = React13__namespace.useCallback(
+  const [steps, updateSteps] = React12__namespace.useState({});
+  const onSubmitStep = React12__namespace.useCallback(
     async (data) => {
       var _a, _b;
       try {
@@ -1004,24 +940,31 @@ function useStepForm(props) {
     },
     [steps, activeStep, isLastStep]
   );
-  const getFormProps = React13__namespace.useCallback(() => {
+  const getFormProps = React12__namespace.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__namespace.useCallback(
+  const updateStep = React12__namespace.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,
@@ -1034,7 +977,7 @@ function useFormStep(props) {
   const { name, schema, resolver, onSubmit } = props;
   const step = core.useStep({ name });
   const { steps, updateStep } = useStepFormContext();
-  React13__namespace.useEffect(() => {
+  React12__namespace.useEffect(() => {
     updateStep({ name, schema, resolver, onSubmit });
   }, [name, schema]);
   return {
@@ -1042,24 +985,25 @@ function useFormStep(props) {
     ...steps[name] || { name, schema }
   };
 }
-var StepForm = React13__namespace.forwardRef(
-  (props, ref) => {
-    const { children, ...rest } = props;
-    const stepper = useStepForm(props);
-    const { getFormProps, ...ctx } = stepper;
-    const context = React13__namespace.useMemo(() => ctx, [ctx]);
-    return /* @__PURE__ */ jsxRuntime.jsx(core.StepperProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(StepFormProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(Form, { ref, ...rest, ...getFormProps(), children: utils.runIfFn(children, stepper) }) }) });
-  }
-);
 var FormStepper = (props) => {
   const { activeIndex, setIndex } = core.useStepperContext();
-  const { children, orientation, variant, colorScheme, size, ...rest } = props;
-  const elements = React13__namespace.Children.map(children, (child) => {
-    if (React13__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
+  const {
+    children,
+    orientation,
+    variant,
+    colorScheme,
+    size,
+    onChange: onChangeProp,
+    render,
+    ...rest
+  } = props;
+  const elements = React12__namespace.Children.map(children, (child) => {
+    if (React12__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
       const { isCompleted } = useFormStep(child.props);
       return /* @__PURE__ */ jsxRuntime.jsx(
-        core.StepperStep,
+        core.StepsItem,
         {
+          render,
           name: child.props.name,
           title: child.props.title,
           isCompleted,
@@ -1070,11 +1014,12 @@ var FormStepper = (props) => {
     }
     return child;
   });
-  const onChange = React13__namespace.useCallback((i) => {
+  const onChange = React12__namespace.useCallback((i) => {
     setIndex(i);
+    onChangeProp == null ? void 0 : onChangeProp(i);
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    core.StepperContainer,
+    core.Steps,
     {
       orientation,
       step: activeIndex,
@@ -1082,13 +1027,13 @@ var FormStepper = (props) => {
       colorScheme,
       size,
       onChange,
-      children: /* @__PURE__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsx(react.chakra.div, { ...rest, className: utils.cx("sui-form__step", className), children }) : null;
 };
@@ -1099,7 +1044,7 @@ var PrevButton = (props) => {
     react.Button,
     {
       isDisabled: isFirstStep || isCompleted,
-      label: "Back",
+      children: "Back",
       ...props,
       className: utils.cx("sui-form__prev-button", props.className),
       onClick: utils.callAllHandlers(props.onClick, prevStep)
@@ -1158,12 +1103,96 @@ var WatchField = (props) => {
   });
   return props.children(field, form) || null;
 };
+var Form = react.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 = reactHookForm.useForm(form);
+    const { handleSubmit } = methods;
+    React12__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
+    React12__namespace.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__ */ jsxRuntime.jsxs(FormLayout, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AutoFields, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, { ...fields == null ? void 0 : fields.submit })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      FormProvider,
+      {
+        ...methods,
+        schema,
+        fieldResolver,
+        fields,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          react.chakra.form,
+          {
+            ref,
+            onSubmit: handleSubmit(onSubmit, onError),
+            ...rest,
+            className: utils.cx("sui-form", props.className),
+            children: utils.runIfFn(_children, {
+              Field,
+              DisplayIf,
+              ArrayField,
+              ObjectField,
+              ...methods
+            })
+          }
+        )
+      }
+    );
+  }
+);
+Form.displayName = "Form";
 function createForm({
   resolver,
   fieldResolver = objectFieldResolver,
   fields
 } = {}) {
-  const CreateForm = react.forwardRef(
+  const DefaultForm = react.forwardRef(
     (props, ref) => {
       const { schema, ...rest } = props;
       return /* @__PURE__ */ jsxRuntime.jsx(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1177,9 +1206,34 @@ function createForm({
       ) });
     }
   );
-  return CreateForm;
+  DefaultForm.displayName = "Form";
+  DefaultForm.id = "Form";
+  return DefaultForm;
+}
+function createStepForm({ fields, resolver, fieldResolver } = {}) {
+  const StepForm2 = react.forwardRef((props, ref) => {
+    const { children, steps, ...rest } = props;
+    const stepper = useStepForm({
+      resolver,
+      fieldResolver,
+      ...props
+    });
+    const { getFormProps, ...ctx } = stepper;
+    const context = React12.useMemo(() => ctx, [ctx]);
+    return /* @__PURE__ */ jsxRuntime.jsx(core.StepperProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(StepFormProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsxRuntime.jsx(Form2, { ref, ...rest, ...getFormProps(), children: utils.runIfFn(children, {
+      ...stepper,
+      Field,
+      FormStep,
+      DisplayIf,
+      ArrayField,
+      ObjectField
+    }) }) }) }) });
+  });
+  StepForm2.displayName = `Step${Form2.displayName || Form2.name}`;
+  return StepForm2;
 }
 var Form2 = createForm();
+var StepForm = createStepForm();
 
 Object.defineProperty(exports, 'Controller', {
   enumerable: true,
@@ -1260,6 +1314,7 @@ exports.TextareaField = TextareaField;
 exports.WatchField = WatchField;
 exports.createField = createField;
 exports.createForm = createForm;
+exports.createStepForm = createStepForm;
 exports.defaultFieldTypes = defaultFieldTypes;
 exports.objectFieldResolver = objectFieldResolver;
 exports.useArrayField = useArrayField;