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

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");
@@ -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,7 @@ var SelectButton = react.forwardRef(
       react.MenuButton,
       {
         as: react.Button,
-        id: id || React13__namespace.useId(),
+        id: id || React12__namespace.useId(),
         ...buttonStyles,
         ...rest,
         onFocus,
@@ -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,
@@ -773,7 +773,7 @@ var ArrayFieldContainer = React13__namespace.forwardRef(
       min: min || (overrides == null ? void 0 : overrides.min),
       max: max || (overrides == null ? void 0 : overrides.max)
     });
-    React13__namespace.useImperativeHandle(ref, () => context, [ref, context]);
+    React12__namespace.useImperativeHandle(ref, () => context, [ref, context]);
     return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(BaseField, { name, ...fieldProps, ...overrides, children }) });
   }
 );
@@ -831,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);
@@ -909,90 +909,6 @@ 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 />`"
@@ -1001,8 +917,8 @@ function useStepForm(props) {
   const { onChange, ...rest } = props;
   const stepper = core.useStepper(rest);
   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 {
@@ -1023,7 +939,7 @@ function useStepForm(props) {
     },
     [steps, activeStep, isLastStep]
   );
-  const getFormProps = React13__namespace.useCallback(() => {
+  const getFormProps = React12__namespace.useCallback(() => {
     const step = steps[activeStep];
     return {
       onSubmit: onSubmitStep,
@@ -1031,7 +947,7 @@ function useStepForm(props) {
       resolver: step == null ? void 0 : step.resolver
     };
   }, [steps, onSubmitStep, activeStep]);
-  const updateStep = React13__namespace.useCallback(
+  const updateStep = React12__namespace.useCallback(
     (step) => {
       updateSteps((steps2) => {
         return {
@@ -1053,7 +969,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 {
@@ -1061,20 +977,11 @@ 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 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,
@@ -1089,7 +996,7 @@ var FormStepper = (props) => {
     }
     return child;
   });
-  const onChange = React13__namespace.useCallback((i) => {
+  const onChange = React12__namespace.useCallback((i) => {
     setIndex(i);
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1118,7 +1025,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)
@@ -1177,12 +1084,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(
@@ -1196,9 +1187,29 @@ function createForm({
       ) });
     }
   );
-  return CreateForm;
+  DefaultForm.displayName = "Form";
+  DefaultForm.id = "Form";
+  return DefaultForm;
+}
+function createStepForm(Form4) {
+  const StepForm2 = react.forwardRef((props, ref) => {
+    const { children, ...rest } = props;
+    const stepper = useStepForm(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(Form4, { ref, ...rest, ...getFormProps(), children: utils.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);
 
 Object.defineProperty(exports, 'Controller', {
   enumerable: true,
@@ -1246,7 +1257,7 @@ exports.DisplayField = DisplayField;
 exports.DisplayIf = DisplayIf;
 exports.Field = Field;
 exports.FieldsProvider = FieldsProvider;
-exports.Form = Form2;
+exports.Form = Form3;
 exports.FormLayout = FormLayout;
 exports.FormLegend = FormLegend;
 exports.FormProvider = FormProvider;