@saas-ui/forms 2.6.9 → 2.6.11

package/dist/index.mjs

@@ -53,7 +53,7 @@ var FormValue = ({ name }) => {
 FormValue.displayName = "FormValue";
 
 // src/field.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 
 // src/fields-context.tsx
 import React2 from "react";
@@ -487,6 +487,7 @@ var NativeSelect = forwardRef6(
 NativeSelect.displayName = "NativeSelect";
 
 // src/create-field.tsx
+import * as React6 from "react";
 import { Controller } from "react-hook-form";
 import { forwardRef as forwardRef7, useMergeRefs } from "@chakra-ui/react";
 import { callAllHandlers } from "@chakra-ui/utils";
@@ -564,7 +565,10 @@ var _createField = (InputComponent, { displayName, hideLabel, getBaseField: getB
     };
     const fieldContext = useFieldsContext();
     const getBaseField = (_a = fieldContext == null ? void 0 : fieldContext.getBaseField) != null ? _a : getBaseFieldProp;
-    const { extraProps, BaseField: BaseField2 } = getBaseField();
+    const { extraProps, BaseField: BaseField2 } = React6.useMemo(
+      () => getBaseField(),
+      [getBaseField]
+    );
     const [, inputProps] = splitProps2(
       props,
       [
@@ -753,7 +757,7 @@ var defaultFieldTypes = {
 // src/field.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
 var defaultInputType = "text";
-var Field = React6.forwardRef(
+var Field = React7.forwardRef(
   (props, ref) => {
     const { type = defaultInputType, name } = props;
     const overrides = useFieldProps(name);
@@ -763,7 +767,7 @@ var Field = React6.forwardRef(
 );
 
 // src/fields.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 
 // src/layout.tsx
 import {
@@ -806,7 +810,7 @@ var FormLayout = ({ children, ...props }) => {
 FormLayout.displayName = "FormLayout";
 
 // src/array-field.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import {
   chakra as chakra3,
   forwardRef as forwardRef11,
@@ -815,7 +819,7 @@ import {
 import { PlusIcon, MinusIcon } from "@saas-ui/core/icons";
 
 // src/use-array-field.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import {
   useFieldArray
 } from "react-hook-form";
@@ -850,7 +854,7 @@ var useArrayField = ({
 var useArrayFieldRow = ({ index }) => {
   const { clearErrors } = useFormContext();
   const { name, remove, fields } = useArrayFieldContext();
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     clearErrors(name);
   }, []);
   return {
@@ -858,7 +862,7 @@ var useArrayFieldRow = ({ index }) => {
     isFirst: index === 0,
     isLast: index === fields.length - 1,
     name: `${name}.${index}`,
-    remove: React7.useCallback(() => {
+    remove: React8.useCallback(() => {
       clearErrors(name);
       remove(index);
     }, [index])
@@ -957,7 +961,7 @@ var ArrayFieldRows = ({
   return children(fields);
 };
 ArrayFieldRows.displayName = "ArrayFieldRows";
-var ArrayFieldContainer = React8.forwardRef(
+var ArrayFieldContainer = React9.forwardRef(
   ({
     name,
     defaultValue,
@@ -975,7 +979,7 @@ var ArrayFieldContainer = React8.forwardRef(
       min: min || (overrides == null ? void 0 : overrides.min),
       max: max || (overrides == null ? void 0 : overrides.max)
     });
-    React8.useImperativeHandle(ref, () => context, [ref, context]);
+    React9.useImperativeHandle(ref, () => context, [ref, context]);
     return /* @__PURE__ */ jsx15(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsx15(BaseField, { name, ...fieldProps, ...overrides, children }) });
   }
 );
@@ -1044,10 +1048,10 @@ var AutoFields = ({
   const context = useFormContext();
   const schema = schemaProp || context.schema;
   const fieldResolver = fieldResolverProp || context.fieldResolver;
-  const resolver = React9.useMemo(() => fieldResolver, [schema, fieldResolver]);
-  const fields = React9.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
+  const resolver = React10.useMemo(() => fieldResolver, [schema, fieldResolver]);
+  const fields = React10.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
   const form = useFormContext();
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     var _a;
     if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
       form.setFocus(fields[0].name);
@@ -1126,7 +1130,7 @@ var SubmitButton = forwardRef12(
 SubmitButton.displayName = "SubmitButton";
 
 // src/display-if.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import {
   useWatch
 } from "react-hook-form";
@@ -1139,8 +1143,8 @@ var DisplayIf = ({
   condition = (value) => !!value,
   onToggle
 }) => {
-  const initializedRef = React10.useRef(false);
-  const matchesRef = React10.useRef(false);
+  const initializedRef = React11.useRef(false);
+  const matchesRef = React11.useRef(false);
   const value = useWatch({
     name,
     defaultValue,
@@ -1149,7 +1153,7 @@ var DisplayIf = ({
   });
   const context = useFormContext();
   const matches = condition(value, context);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (!initializedRef.current) {
       initializedRef.current = true;
       return;
@@ -1163,7 +1167,7 @@ var DisplayIf = ({
 DisplayIf.displayName = "DisplayIf";
 
 // src/step-form.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import {
   chakra as chakra4,
   Button as Button5
@@ -1176,7 +1180,7 @@ import {
 } from "@saas-ui/core";
 
 // src/use-step-form.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { createContext as createContext4 } from "@chakra-ui/react-utils";
 import {
   useStepper,
@@ -1195,11 +1199,11 @@ function useStepForm(props) {
     ...rest
   } = props;
   const stepper = useStepper(rest);
-  const [options, setOptions] = React11.useState(stepsOptions);
+  const [options, setOptions] = React12.useState(stepsOptions);
   const { activeStep, isLastStep, nextStep } = stepper;
-  const [steps, updateSteps] = React11.useState({});
-  const mergedData = React11.useRef({});
-  const onSubmitStep = React11.useCallback(
+  const [steps, updateSteps] = React12.useState({});
+  const mergedData = React12.useRef({});
+  const onSubmitStep = React12.useCallback(
     async (data) => {
       var _a, _b;
       try {
@@ -1224,7 +1228,7 @@ function useStepForm(props) {
     },
     [steps, activeStep, isLastStep, mergedData]
   );
-  const getFormProps = React11.useCallback(() => {
+  const getFormProps = React12.useCallback(() => {
     const step = steps[activeStep];
     return {
       onSubmit: onSubmitStep,
@@ -1236,7 +1240,7 @@ function useStepForm(props) {
       fieldResolver: (step == null ? void 0 : step.schema) ? fieldResolver == null ? void 0 : fieldResolver(step.schema) : void 0
     };
   }, [steps, onSubmitStep, activeStep, resolver, fieldResolver]);
-  const updateStep = React11.useCallback(
+  const updateStep = React12.useCallback(
     (step) => {
       const stepOptions = options == null ? void 0 : options.find((s) => s.name === step.name);
       updateSteps((steps2) => {
@@ -1262,7 +1266,7 @@ function useFormStep(props) {
   const { name, schema, resolver, onSubmit } = props;
   const step = useStep({ name });
   const { steps, updateStep } = useStepFormContext();
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     updateStep({ name, schema, resolver, onSubmit });
   }, [name, schema]);
   return {
@@ -1285,8 +1289,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 = React13.Children.map(children, (child) => {
+    if (React13.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
       const { isCompleted } = useFormStep(child.props);
       return /* @__PURE__ */ jsx19(
         StepsItem,
@@ -1302,7 +1306,7 @@ var FormStepper = (props) => {
     }
     return child;
   });
-  const onChange = React12.useCallback((i) => {
+  const onChange = React13.useCallback((i) => {
     setIndex(i);
     onChangeProp == null ? void 0 : onChangeProp(i);
   }, []);
@@ -1399,10 +1403,11 @@ var WatchField = (props) => {
 };
 
 // src/create-form.tsx
+import { useMemo as useMemo3 } from "react";
 import { forwardRef as forwardRef14 } from "@chakra-ui/react";
 
 // src/form.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import { chakra as chakra5, forwardRef as forwardRef13 } from "@chakra-ui/react";
 import { cx as cx4, runIfFn } from "@chakra-ui/utils";
 import {
@@ -1450,8 +1455,8 @@ var Form = forwardRef13(
     };
     const methods = useForm(form);
     const { handleSubmit } = methods;
-    React13.useImperativeHandle(formRef, () => methods, [formRef, methods]);
-    React13.useEffect(() => {
+    React14.useImperativeHandle(formRef, () => methods, [formRef, methods]);
+    React14.useEffect(() => {
       let subscription;
       if (onChange) {
         subscription = methods.watch(onChange);
@@ -1510,10 +1515,13 @@ function createForm({
         fieldResolver: fieldResolverProp,
         ...rest
       } = props;
-      const fieldsContext = {
-        fields: { ...defaultFieldTypes, ...fields },
-        getBaseField
-      };
+      const fieldsContext = useMemo3(
+        () => ({
+          fields: { ...defaultFieldTypes, ...fields },
+          getBaseField
+        }),
+        [fields, getBaseField]
+      );
       return /* @__PURE__ */ jsx21(FieldsProvider, { value: fieldsContext, children: /* @__PURE__ */ jsx21(
         Form,
         {
@@ -1531,7 +1539,7 @@ function createForm({
 }
 
 // src/create-step-form.tsx
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo4 } from "react";
 import { forwardRef as forwardRef15 } from "@chakra-ui/react";
 import { StepperProvider } from "@saas-ui/core";
 import { runIfFn as runIfFn2 } from "@chakra-ui/utils";
@@ -1550,7 +1558,7 @@ function createStepForm({
       ...props
     });
     const { getFormProps, ...ctx } = stepper;
-    const context = useMemo2(() => ctx, [ctx]);
+    const context = useMemo4(() => ctx, [ctx]);
     const fieldsContext = {
       fields: {
         ...defaultFieldTypes,