@saas-ui/forms 2.0.0-next.14 → 2.0.0-next.16

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, StepperStep, StepperContainer, StepperSteps, 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");
@@ -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,7 @@ var SelectButton = forwardRef(
       MenuButton,
       {
         as: Button,
-        id: id || React13.useId(),
+        id: id || React12.useId(),
         ...buttonStyles,
         ...rest,
         onFocus,
@@ -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,
@@ -753,7 +753,7 @@ var ArrayFieldContainer = React13.forwardRef(
       min: min || (overrides == null ? void 0 : overrides.min),
       max: max || (overrides == null ? void 0 : overrides.max)
     });
-    React13.useImperativeHandle(ref, () => context, [ref, context]);
+    React12.useImperativeHandle(ref, () => context, [ref, context]);
     return /* @__PURE__ */ jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsx(BaseField, { name, ...fieldProps, ...overrides, children }) });
   }
 );
@@ -811,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);
@@ -889,90 +889,6 @@ 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 />`"
@@ -981,8 +897,8 @@ function useStepForm(props) {
   const { onChange, ...rest } = props;
   const stepper = useStepper(rest);
   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 {
@@ -1003,7 +919,7 @@ function useStepForm(props) {
     },
     [steps, activeStep, isLastStep]
   );
-  const getFormProps = React13.useCallback(() => {
+  const getFormProps = React12.useCallback(() => {
     const step = steps[activeStep];
     return {
       onSubmit: onSubmitStep,
@@ -1011,7 +927,7 @@ function useStepForm(props) {
       resolver: step == null ? void 0 : step.resolver
     };
   }, [steps, onSubmitStep, activeStep]);
-  const updateStep = React13.useCallback(
+  const updateStep = React12.useCallback(
     (step) => {
       updateSteps((steps2) => {
         return {
@@ -1033,7 +949,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 {
@@ -1041,20 +957,11 @@ 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 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,
@@ -1069,7 +976,7 @@ var FormStepper = (props) => {
     }
     return child;
   });
-  const onChange = React13.useCallback((i) => {
+  const onChange = React12.useCallback((i) => {
     setIndex(i);
   }, []);
   return /* @__PURE__ */ jsx(
@@ -1098,7 +1005,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)
@@ -1157,12 +1064,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(
@@ -1176,10 +1167,30 @@ function createForm({
       ) });
     }
   );
-  return CreateForm;
+  DefaultForm.displayName = "Form";
+  DefaultForm.id = "Form";
+  return DefaultForm;
+}
+function createStepForm(Form4) {
+  const StepForm2 = forwardRef((props, ref) => {
+    const { children, ...rest } = props;
+    const stepper = useStepForm(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, {
+      ...stepper,
+      Field,
+      DisplayIf,
+      ArrayField,
+      ObjectField
+    }) }) }) });
+  });
+  StepForm2.displayName = `Step${Form4.displayName || Form4.name}`;
+  return StepForm2;
 }
-var Form2 = createForm();
+var Form3 = createForm();
+var StepForm = createStepForm(Form3);
 
-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, 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 };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map