@saas-ui/forms 2.6.9 → 2.6.10

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @saas-ui/forms
 
+## 2.6.10
+
+### Patch Changes
+
+- fc2203a: Fixed issue where custom base field would trigger additional re-render and loose field focus
+
 ## 2.6.9
 
 ### Patch Changes

package/dist/index.js

@@ -153,7 +153,7 @@ var FormValue = ({ name }) => {
 FormValue.displayName = "FormValue";
 
 // src/field.tsx
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 
 // src/fields-context.tsx
 var import_react2 = __toESM(require("react"));
@@ -541,6 +541,7 @@ var NativeSelect = (0, import_react11.forwardRef)(
 NativeSelect.displayName = "NativeSelect";
 
 // src/create-field.tsx
+var React6 = __toESM(require("react"));
 var import_react_hook_form3 = require("react-hook-form");
 var import_react13 = require("@chakra-ui/react");
 var import_utils4 = require("@chakra-ui/utils");
@@ -612,7 +613,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] = (0, import_core4.splitProps)(
       props,
       [
@@ -801,7 +805,7 @@ var defaultFieldTypes = {
 // src/field.tsx
 var import_jsx_runtime13 = require("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);
@@ -811,7 +815,7 @@ var Field = React6.forwardRef(
 );
 
 // src/fields.tsx
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 
 // src/layout.tsx
 var import_react15 = require("@chakra-ui/react");
@@ -848,12 +852,12 @@ var FormLayout = ({ children, ...props }) => {
 FormLayout.displayName = "FormLayout";
 
 // src/array-field.tsx
-var React8 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var import_react16 = require("@chakra-ui/react");
 var import_icons2 = require("@saas-ui/core/icons");
 
 // src/use-array-field.tsx
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var import_react_hook_form4 = require("react-hook-form");
 var import_react_utils2 = require("@chakra-ui/react-utils");
 var [ArrayFieldProvider, useArrayFieldContext] = (0, import_react_utils2.createContext)({
@@ -886,7 +890,7 @@ var useArrayField = ({
 var useArrayFieldRow = ({ index }) => {
   const { clearErrors } = useFormContext();
   const { name, remove, fields } = useArrayFieldContext();
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     clearErrors(name);
   }, []);
   return {
@@ -894,7 +898,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])
@@ -993,7 +997,7 @@ var ArrayFieldRows = ({
   return children(fields);
 };
 ArrayFieldRows.displayName = "ArrayFieldRows";
-var ArrayFieldContainer = React8.forwardRef(
+var ArrayFieldContainer = React9.forwardRef(
   ({
     name,
     defaultValue,
@@ -1011,7 +1015,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__ */ (0, import_jsx_runtime15.jsx)(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BaseField, { name, ...fieldProps, ...overrides, children }) });
   }
 );
@@ -1076,10 +1080,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);
@@ -1158,7 +1162,7 @@ var SubmitButton = (0, import_react18.forwardRef)(
 SubmitButton.displayName = "SubmitButton";
 
 // src/display-if.tsx
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_react_hook_form6 = require("react-hook-form");
 var DisplayIf = ({
   children,
@@ -1169,8 +1173,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 = (0, import_react_hook_form6.useWatch)({
     name,
     defaultValue,
@@ -1179,7 +1183,7 @@ var DisplayIf = ({
   });
   const context = useFormContext();
   const matches = condition(value, context);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (!initializedRef.current) {
       initializedRef.current = true;
       return;
@@ -1193,13 +1197,13 @@ var DisplayIf = ({
 DisplayIf.displayName = "DisplayIf";
 
 // src/step-form.tsx
-var React12 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var import_react19 = require("@chakra-ui/react");
 var import_utils9 = require("@chakra-ui/utils");
 var import_core6 = require("@saas-ui/core");
 
 // src/use-step-form.tsx
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 var import_react_utils3 = require("@chakra-ui/react-utils");
 var import_core5 = require("@saas-ui/core");
 var [StepFormProvider, useStepFormContext] = (0, import_react_utils3.createContext)({
@@ -1215,11 +1219,11 @@ function useStepForm(props) {
     ...rest
   } = props;
   const stepper = (0, import_core5.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 {
@@ -1244,7 +1248,7 @@ function useStepForm(props) {
     },
     [steps, activeStep, isLastStep, mergedData]
   );
-  const getFormProps = React11.useCallback(() => {
+  const getFormProps = React12.useCallback(() => {
     const step = steps[activeStep];
     return {
       onSubmit: onSubmitStep,
@@ -1256,7 +1260,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) => {
@@ -1282,7 +1286,7 @@ function useFormStep(props) {
   const { name, schema, resolver, onSubmit } = props;
   const step = (0, import_core5.useStep)({ name });
   const { steps, updateStep } = useStepFormContext();
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     updateStep({ name, schema, resolver, onSubmit });
   }, [name, schema]);
   return {
@@ -1305,8 +1309,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__ */ (0, import_jsx_runtime19.jsx)(
         import_core6.StepsItem,
@@ -1322,7 +1326,7 @@ var FormStepper = (props) => {
     }
     return child;
   });
-  const onChange = React12.useCallback((i) => {
+  const onChange = React13.useCallback((i) => {
     setIndex(i);
     onChangeProp == null ? void 0 : onChangeProp(i);
   }, []);
@@ -1419,10 +1423,11 @@ var WatchField = (props) => {
 };
 
 // src/create-form.tsx
-var import_react21 = require("@chakra-ui/react");
+var import_react21 = require("react");
+var import_react22 = require("@chakra-ui/react");
 
 // src/form.tsx
-var React13 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 var import_react20 = require("@chakra-ui/react");
 var import_utils11 = require("@chakra-ui/utils");
 var import_react_hook_form8 = require("react-hook-form");
@@ -1468,8 +1473,8 @@ var Form = (0, import_react20.forwardRef)(
     };
     const methods = (0, import_react_hook_form8.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);
@@ -1520,7 +1525,7 @@ function createForm({
   fields,
   getBaseField
 } = {}) {
-  const DefaultForm = (0, import_react21.forwardRef)(
+  const DefaultForm = (0, import_react22.forwardRef)(
     (props, ref) => {
       const {
         schema,
@@ -1528,10 +1533,13 @@ function createForm({
         fieldResolver: fieldResolverProp,
         ...rest
       } = props;
-      const fieldsContext = {
-        fields: { ...defaultFieldTypes, ...fields },
-        getBaseField
-      };
+      const fieldsContext = (0, import_react21.useMemo)(
+        () => ({
+          fields: { ...defaultFieldTypes, ...fields },
+          getBaseField
+        }),
+        [fields, getBaseField]
+      );
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FieldsProvider, { value: fieldsContext, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         Form,
         {
@@ -1549,8 +1557,8 @@ function createForm({
 }
 
 // src/create-step-form.tsx
-var import_react22 = require("react");
-var import_react23 = require("@chakra-ui/react");
+var import_react23 = require("react");
+var import_react24 = require("@chakra-ui/react");
 var import_core7 = require("@saas-ui/core");
 var import_utils12 = require("@chakra-ui/utils");
 var import_jsx_runtime22 = require("react/jsx-runtime");
@@ -1560,7 +1568,7 @@ function createStepForm({
   fieldResolver,
   getBaseField
 } = {}) {
-  const StepForm2 = (0, import_react23.forwardRef)((props, ref) => {
+  const StepForm2 = (0, import_react24.forwardRef)((props, ref) => {
     const { children, steps, ...rest } = props;
     const stepper = useStepForm({
       resolver,
@@ -1568,7 +1576,7 @@ function createStepForm({
       ...props
     });
     const { getFormProps, ...ctx } = stepper;
-    const context = (0, import_react22.useMemo)(() => ctx, [ctx]);
+    const context = (0, import_react23.useMemo)(() => ctx, [ctx]);
     const fieldsContext = {
       fields: {
         ...defaultFieldTypes,