@saas-ui/forms 2.1.3 → 2.2.0

package/dist/index.mjs

@@ -90,10 +90,13 @@ var NumberInput = forwardRef((props, ref) => {
     hideStepper,
     incrementIcon = /* @__PURE__ */ jsx3(ChevronUpIcon, {}),
     decrementIcon = /* @__PURE__ */ jsx3(ChevronDownIcon, {}),
+    placeholder,
+    fieldProps: _fieldProps,
     ...rest
   } = props;
+  const fieldProps = { placeholder, ..._fieldProps };
   return /* @__PURE__ */ jsxs2(ChakraNumberInput, { ...rest, ref, children: [
-    /* @__PURE__ */ jsx3(NumberInputField, {}),
+    /* @__PURE__ */ jsx3(NumberInputField, { ...fieldProps }),
     !hideStepper && /* @__PURE__ */ jsxs2(NumberInputStepper, { children: [
       /* @__PURE__ */ jsx3(NumberIncrementStepper, { children: incrementIcon }),
       /* @__PURE__ */ jsx3(NumberDecrementStepper, { children: decrementIcon })
@@ -553,6 +556,7 @@ var withControlledInput = (InputComponent) => {
   return forwardRef7(
     ({ name, rules, ...inputProps }, ref) => {
       const { control } = useFormContext();
+      const onChange = inputProps.onChange;
       return /* @__PURE__ */ jsx10(
         Controller,
         {
@@ -564,7 +568,7 @@ var withControlledInput = (InputComponent) => {
             {
               ...field,
               ...inputProps,
-              onChange: callAllHandlers(inputProps.onChange, field.onChange),
+              onChange: callAllHandlers(onChange, field.onChange),
               onBlur: callAllHandlers(inputProps.onBlur, field.onBlur),
               ref: useMergeRefs(ref, _ref)
             }
@@ -579,12 +583,13 @@ var withUncontrolledInput = (InputComponent) => {
     ({ name, rules, ...inputProps }, ref) => {
       const { register } = useFormContext();
       const { ref: _ref, ...field } = register(name, rules);
+      const onChange = inputProps.onChange;
       return /* @__PURE__ */ jsx10(
         InputComponent,
         {
           ...field,
           ...inputProps,
-          onChange: callAllHandlers(inputProps.onChange, field.onChange),
+          onChange: callAllHandlers(onChange, field.onChange),
           onBlur: callAllHandlers(inputProps.onBlur, field.onBlur),
           ref: useMergeRefs(ref, _ref)
         }
@@ -643,9 +648,10 @@ var SwitchField = createField(
 );
 var SelectField = createField(
   forwardRef8((props, ref) => {
-    return /* @__PURE__ */ jsxs6(Select, { ref, ...props, children: [
-      /* @__PURE__ */ jsx11(SelectButton, {}),
-      /* @__PURE__ */ jsx11(SelectList, {})
+    const { buttonProps, listProps, ...rest } = props;
+    return /* @__PURE__ */ jsxs6(Select, { ref, ...rest, children: [
+      /* @__PURE__ */ jsx11(SelectButton, { ...buttonProps }),
+      /* @__PURE__ */ jsx11(SelectList, { ...listProps })
     ] });
   }),
   {
@@ -722,15 +728,10 @@ var Field = React6.forwardRef(
 );
 
 // src/fields.tsx
-import * as React10 from "react";
+import * as React9 from "react";
 
 // src/layout.tsx
-import * as React7 from "react";
-import {
-  chakra as chakra2,
-  SimpleGrid,
-  useTheme
-} from "@chakra-ui/react";
+import { chakra as chakra2, SimpleGrid, useTheme } from "@chakra-ui/react";
 import { cx as cx2 } from "@chakra-ui/utils";
 import { jsx as jsx14 } from "react/jsx-runtime";
 var FormLayoutItem = ({ children }) => {
@@ -752,19 +753,14 @@ var FormLayout = ({ children, ...props }) => {
     {
       ...gridProps,
       className: cx2("sui-form__layout", props.className),
-      children: React7.Children.map(children, (child) => {
-        if (React7.isValidElement(child)) {
-          return /* @__PURE__ */ jsx14(FormLayoutItem, { children: child });
-        }
-        return child;
-      })
+      children
     }
   );
 };
 FormLayout.displayName = "FormLayout";
 
 // src/array-field.tsx
-import * as React9 from "react";
+import * as React8 from "react";
 import {
   chakra as chakra3,
   forwardRef as forwardRef11,
@@ -773,7 +769,7 @@ import {
 import { PlusIcon, MinusIcon } from "@saas-ui/core/icons";
 
 // src/use-array-field.tsx
-import * as React8 from "react";
+import * as React7 from "react";
 import {
   useFieldArray
 } from "react-hook-form";
@@ -808,7 +804,7 @@ var useArrayField = ({
 var useArrayFieldRow = ({ index }) => {
   const { clearErrors } = useFormContext();
   const { name, remove, fields } = useArrayFieldContext();
-  React8.useEffect(() => {
+  React7.useEffect(() => {
     clearErrors(name);
   }, []);
   return {
@@ -816,7 +812,7 @@ var useArrayFieldRow = ({ index }) => {
     isFirst: index === 0,
     isLast: index === fields.length - 1,
     name: `${name}.${index}`,
-    remove: React8.useCallback(() => {
+    remove: React7.useCallback(() => {
       clearErrors(name);
       remove(index);
     }, [index])
@@ -915,7 +911,7 @@ var ArrayFieldRows = ({
   return children(fields);
 };
 ArrayFieldRows.displayName = "ArrayFieldRows";
-var ArrayFieldContainer = React9.forwardRef(
+var ArrayFieldContainer = React8.forwardRef(
   ({
     name,
     defaultValue,
@@ -933,7 +929,7 @@ var ArrayFieldContainer = React9.forwardRef(
       min: min || (overrides == null ? void 0 : overrides.min),
       max: max || (overrides == null ? void 0 : overrides.max)
     });
-    React9.useImperativeHandle(ref, () => context, [ref, context]);
+    React8.useImperativeHandle(ref, () => context, [ref, context]);
     return /* @__PURE__ */ jsx15(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsx15(BaseField, { name, ...fieldProps, ...overrides, children }) });
   }
 );
@@ -1002,10 +998,10 @@ var AutoFields = ({
   const context = useFormContext();
   const schema = schemaProp || context.schema;
   const fieldResolver = fieldResolverProp || context.fieldResolver;
-  const resolver = React10.useMemo(() => fieldResolver, [schema, fieldResolver]);
-  const fields = React10.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
+  const resolver = React9.useMemo(() => fieldResolver, [schema, fieldResolver]);
+  const fields = React9.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
   const form = useFormContext();
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     var _a;
     if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
       form.setFocus(fields[0].name);
@@ -1026,7 +1022,16 @@ var AutoFields = ({
       } else if (type === "object") {
         return /* @__PURE__ */ jsx17(ObjectField, { name, ...fieldProps, children: mapNestedFields2(resolver, name) }, name);
       }
-      return /* @__PURE__ */ jsx17(Field, { name, type, ...fieldProps }, name);
+      return /* @__PURE__ */ jsx17(
+        Field,
+        {
+          name,
+          type,
+          defaultValue,
+          ...fieldProps
+        },
+        name
+      );
     }
   ) });
 };
@@ -1092,7 +1097,7 @@ var DisplayIf = ({
 DisplayIf.displayName = "DisplayIf";
 
 // src/step-form.tsx
-import * as React12 from "react";
+import * as React11 from "react";
 import {
   chakra as chakra4,
   Button as Button5
@@ -1105,7 +1110,7 @@ import {
 } from "@saas-ui/core";
 
 // src/use-step-form.tsx
-import * as React11 from "react";
+import * as React10 from "react";
 import { createContext as createContext4 } from "@chakra-ui/react-utils";
 import {
   useStepper,
@@ -1116,18 +1121,29 @@ var [StepFormProvider, useStepFormContext] = createContext4({
   errorMessage: "useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`"
 });
 function useStepForm(props) {
-  const { onChange, steps: stepsOptions, resolver, ...rest } = props;
+  const {
+    onChange,
+    steps: stepsOptions,
+    resolver,
+    fieldResolver,
+    ...rest
+  } = props;
   const stepper = useStepper(rest);
-  const [options, setOptions] = React11.useState(stepsOptions);
+  const [options, setOptions] = React10.useState(stepsOptions);
   const { activeStep, isLastStep, nextStep } = stepper;
-  const [steps, updateSteps] = React11.useState({});
-  const onSubmitStep = React11.useCallback(
+  const [steps, updateSteps] = React10.useState({});
+  const mergedData = React10.useRef({});
+  const onSubmitStep = React10.useCallback(
     async (data) => {
       var _a, _b;
       try {
         const step = steps[activeStep];
+        mergedData.current = {
+          ...mergedData.current,
+          ...data
+        };
         if (isLastStep) {
-          await ((_a = props.onSubmit) == null ? void 0 : _a.call(props, data));
+          await ((_a = props.onSubmit) == null ? void 0 : _a.call(props, mergedData.current));
           updateStep({
             ...step,
             isCompleted: true
@@ -1140,9 +1156,9 @@ function useStepForm(props) {
       } catch (e) {
       }
     },
-    [steps, activeStep, isLastStep]
+    [steps, activeStep, isLastStep, mergedData]
   );
-  const getFormProps = React11.useCallback(() => {
+  const getFormProps = React10.useCallback(() => {
     const step = steps[activeStep];
     return {
       onSubmit: onSubmitStep,
@@ -1150,10 +1166,11 @@ function useStepForm(props) {
       resolver: (step == null ? void 0 : step.schema) ? (
         /* @todo fix resolver type */
         resolver == null ? void 0 : resolver(step.schema)
-      ) : void 0
+      ) : void 0,
+      fieldResolver: (step == null ? void 0 : step.schema) ? fieldResolver == null ? void 0 : fieldResolver(step.schema) : void 0
     };
-  }, [steps, onSubmitStep, activeStep]);
-  const updateStep = React11.useCallback(
+  }, [steps, onSubmitStep, activeStep, resolver, fieldResolver]);
+  const updateStep = React10.useCallback(
     (step) => {
       const stepOptions = options == null ? void 0 : options.find((s) => s.name === step.name);
       updateSteps((steps2) => {
@@ -1179,7 +1196,7 @@ function useFormStep(props) {
   const { name, schema, resolver, onSubmit } = props;
   const step = useStep({ name });
   const { steps, updateStep } = useStepFormContext();
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     updateStep({ name, schema, resolver, onSubmit });
   }, [name, schema]);
   return {
@@ -1202,8 +1219,8 @@ var FormStepper = (props) => {
     render,
     ...rest
   } = props;
-  const elements = React12.Children.map(children, (child) => {
-    if (React12.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
+  const elements = React11.Children.map(children, (child) => {
+    if (React11.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
       const { isCompleted } = useFormStep(child.props);
       return /* @__PURE__ */ jsx19(
         StepsItem,
@@ -1219,7 +1236,7 @@ var FormStepper = (props) => {
     }
     return child;
   });
-  const onChange = React12.useCallback((i) => {
+  const onChange = React11.useCallback((i) => {
     setIndex(i);
     onChangeProp == null ? void 0 : onChangeProp(i);
   }, []);
@@ -1316,7 +1333,7 @@ var WatchField = (props) => {
 };
 
 // src/form.tsx
-import * as React13 from "react";
+import * as React12 from "react";
 import { chakra as chakra5, forwardRef as forwardRef13 } from "@chakra-ui/react";
 import { cx as cx4, runIfFn } from "@chakra-ui/utils";
 import {
@@ -1364,8 +1381,8 @@ var Form = forwardRef13(
     };
     const methods = useForm(form);
     const { handleSubmit } = methods;
-    React13.useImperativeHandle(formRef, () => methods, [formRef, methods]);
-    React13.useEffect(() => {
+    React12.useImperativeHandle(formRef, () => methods, [formRef, methods]);
+    React12.useEffect(() => {
       let subscription;
       if (onChange) {
         subscription = methods.watch(onChange);