@saas-ui/forms 2.0.0-next.7 → 2.0.0-next.9

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @saas-ui/forms
 
+## 2.0.0-next.9
+
+### Patch Changes
+
+- 84e59fec: Form render prop Field now supports ref
+- Updated dependencies [189190c6]
+- Updated dependencies [1177329d]
+  - @saas-ui/core@2.0.0-next.7
+
+## 2.0.0-next.8
+
+### Patch Changes
+
+- 6d3f5717: Fix React import
+
 ## 2.0.0-next.7
 
 ### Patch Changes

package/dist/ajv/index.d.ts

@@ -2,6 +2,7 @@ import * as React$1 from 'react';
 import React$1__default from 'react';
 import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
 import { HTMLChakraProps, ButtonProps, TextareaProps, SwitchProps, CheckboxProps, FormControlProps, ResponsiveValue, InputProps, RadioGroupProps, MenuProps, SelectProps as SelectProps$1, UsePinInputProps, SystemProps, NumberInputProps as NumberInputProps$1, StackDirection, MenuItemOptionProps, RadioProps } from '@chakra-ui/react';
+import { FocusableElement } from '@chakra-ui/utils';
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, UseFormProps, FieldPath, UseFormReturn, WatchObserver, SubmitHandler, SubmitErrorHandler, RegisterOptions, UseFieldArrayReturn } from 'react-hook-form';
 import { MaybeRenderProp } from '@chakra-ui/react-utils';
@@ -302,9 +303,9 @@ interface ObjectFieldProps<TFieldValues extends FieldValues = FieldValues, TName
 }
 
 interface FormRenderContext<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseFormReturn<TFieldValues, TContext> {
-    Field: React$1.FC<TFieldTypes>;
+    Field: React$1.FC<TFieldTypes & React$1.RefAttributes<FocusableElement>>;
     DisplayIf: React$1.FC<DisplayIfProps<TFieldValues>>;
-    ArrayField: React$1.FC<ArrayFieldProps<TFieldValues>>;
+    ArrayField: React$1.FC<ArrayFieldProps<TFieldValues> & React$1.RefAttributes<UseArrayFieldReturn>>;
     ObjectField: React$1.FC<ObjectFieldProps<TFieldValues>>;
 }
 interface FormOptions<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>> {

package/dist/index.d.ts

@@ -2,11 +2,11 @@ import * as React$1 from 'react';
 import React__default from 'react';
 import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
 import { ButtonProps, NumberInputProps as NumberInputProps$1, InputProps, RadioProps, RadioGroupProps, SystemProps, StackDirection, MenuProps, MenuListProps, MenuItemOptionProps, SelectProps as SelectProps$1, TextareaProps, SwitchProps, CheckboxProps, UsePinInputProps, FormControlProps, SimpleGridProps, ResponsiveValue, FormLabelProps, HTMLChakraProps, ThemingProps } from '@chakra-ui/react';
+import { FocusableElement } from '@chakra-ui/utils';
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, FieldPath, RegisterOptions, UseFormReturn as UseFormReturn$1, UseFieldArrayReturn, UseFormProps, WatchObserver, SubmitHandler, SubmitErrorHandler, ResolverOptions, ResolverResult, FormProviderProps as FormProviderProps$1 } from 'react-hook-form';
 export { BatchFieldArrayUpdate, ChangeHandler, Control, Controller, ControllerFieldState, ControllerProps, ControllerRenderProps, CriteriaMode, CustomElement, DeepMap, DeepPartial, DeepPartialSkipArrayKey, DefaultValues, DelayCallback, EmptyObject, ErrorOption, EventType, FieldArray, FieldArrayMethodProps, FieldArrayWithId, Field as FieldDef, FieldElement, FieldError, FieldErrors, FieldName, FieldNamesMarkedBoolean, FieldRefs, FieldValue, FieldValues, FormProviderProps, FormState, FormStateProxy, FormStateSubjectRef, GetIsDirty, InternalFieldErrors, InternalFieldName, InternalNameSet, IsAny, IsFlatObject, KeepStateOptions, LiteralUnion, Message, Mode, MultipleFieldErrors, Names, NativeFieldValue, NestedValue, NonUndefined, Noop, Primitive, ReadFormState, Ref, RefCallBack, RegisterOptions, Resolver, ResolverError, ResolverOptions, ResolverResult, ResolverSuccess, SetFieldValue, SetValueConfig, Subjects, SubmitErrorHandler, SubmitHandler, TriggerConfig, UnpackNestedValue, UseControllerProps, UseControllerReturn, UseFieldArrayProps, UseFieldArrayReturn, UseFormClearErrors, UseFormGetValues, UseFormHandleSubmit, UseFormProps, UseFormRegister, UseFormRegisterReturn, UseFormReset, UseFormResetField, UseFormReturn, UseFormSetError, UseFormSetFocus, UseFormSetValue, UseFormStateProps, UseFormStateReturn, UseFormTrigger, UseFormUnregister, UseFormWatch, UseWatchProps, Validate, ValidateResult, ValidationMode, ValidationRule, ValidationValue, ValidationValueMessage, WatchInternal, WatchObserver, appendErrors, useController, useFieldArray, useForm, useFormState, useWatch } from 'react-hook-form';
 import { MaybeRenderProp } from '@chakra-ui/react-utils';
-import { FocusableElement } from '@chakra-ui/utils';
 import { UseStepperReturn, UseStepperProps, StepperStepsProps } from '@saas-ui/core';
 
 interface SubmitButtonProps extends ButtonProps {
@@ -517,9 +517,9 @@ declare const FormLegend: (props: FormLabelProps) => JSX.Element;
 declare const ObjectField: React$1.FC<ObjectFieldProps>;
 
 interface FormRenderContext<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseFormReturn$1<TFieldValues, TContext> {
-    Field: React$1.FC<TFieldTypes>;
+    Field: React$1.FC<TFieldTypes & React$1.RefAttributes<FocusableElement>>;
     DisplayIf: React$1.FC<DisplayIfProps<TFieldValues>>;
-    ArrayField: React$1.FC<ArrayFieldProps<TFieldValues>>;
+    ArrayField: React$1.FC<ArrayFieldProps<TFieldValues> & React$1.RefAttributes<UseArrayFieldReturn>>;
     ObjectField: React$1.FC<ObjectFieldProps<TFieldValues>>;
 }
 interface FormOptions<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>> {

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React12 = require('react');
+var React13 = 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 React12__namespace = /*#__PURE__*/_interopNamespace(React12);
+var React13__namespace = /*#__PURE__*/_interopNamespace(React13);
 
 // src/form-context.tsx
-var FormContext = React12.createContext(null);
+var FormContext = React13__namespace.createContext(null);
 var useFormContext = () => {
-  const context = React12.useContext(FormContext);
+  const context = React13__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] = React12.useState(false);
+    const [show, setShow] = React13.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 React12__namespace.Children.map(children, (child) => {
-    if (React12__namespace.isValidElement(child) && child.props.name) {
+  return React13__namespace.Children.map(children, (child) => {
+    if (React13__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 React12__namespace.cloneElement(child, {
+      return React13__namespace.cloneElement(child, {
         ...child.props,
         name: `${name}.${childName}`
       });
@@ -215,14 +215,14 @@ var useSelect = (props) => {
     onChange
   });
   const controlProps = react.useFormControl({ name });
-  const options = React12__namespace.default.useMemo(
+  const options = React13__namespace.default.useMemo(
     () => optionsProp && mapOptions(optionsProp),
     [optionsProp]
   );
   const handleChange = (value2) => {
     setCurrentValue(value2);
   };
-  const getDisplayValue = React12__namespace.default.useCallback(
+  const getDisplayValue = React13__namespace.default.useCallback(
     (value2) => {
       if (!options) {
         return value2;
@@ -236,7 +236,7 @@ var useSelect = (props) => {
     },
     [options]
   );
-  const displayValue = React12__namespace.default.useMemo(
+  const displayValue = React13__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 || React12__namespace.useId(),
+        id: id || React13__namespace.useId(),
         ...rest,
         onFocus,
         onBlur,
@@ -573,7 +573,7 @@ var defaultFieldTypes = {
   pin: PinField,
   "native-select": NativeSelectField
 };
-var FieldsContext = React12__namespace.default.createContext(
+var FieldsContext = React13__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 = React12__namespace.default.useContext(FieldsContext);
+  const context = React13__namespace.default.useContext(FieldsContext);
   return (context == null ? void 0 : context[type]) || InputField;
 };
 var defaultInputType = "text";
-var Field = React12__namespace.forwardRef(
+var Field = React13__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: React12__namespace.Children.map(children, (child) => {
-        if (React12__namespace.isValidElement(child)) {
+      children: React13__namespace.Children.map(children, (child) => {
+        if (React13__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();
-  React12__namespace.useEffect(() => {
+  React13__namespace.useEffect(() => {
     clearErrors(name);
   }, []);
   return {
@@ -660,7 +660,7 @@ var useArrayFieldRow = ({ index }) => {
     isFirst: index === 0,
     isLast: index === fields.length - 1,
     name: `${name}.${index}`,
-    remove: React12__namespace.useCallback(() => {
+    remove: React13__namespace.useCallback(() => {
       clearErrors(name);
       remove(index);
     }, [index])
@@ -755,7 +755,7 @@ var ArrayFieldRows = ({
   return children(fields);
 };
 ArrayFieldRows.displayName = "ArrayFieldRows";
-var ArrayFieldContainer = React12__namespace.forwardRef(
+var ArrayFieldContainer = React13__namespace.forwardRef(
   ({
     name,
     defaultValue,
@@ -772,7 +772,7 @@ var ArrayFieldContainer = React12__namespace.forwardRef(
       min,
       max
     });
-    React12__namespace.useImperativeHandle(ref, () => context, [ref, context]);
+    React13__namespace.useImperativeHandle(ref, () => context, [ref, context]);
     return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(BaseField, { name, ...fieldProps, children }) });
   }
 );
@@ -812,10 +812,10 @@ var AutoFields = ({
   const context = useFormContext();
   const schema = schemaProp || context.schema;
   const fieldResolver = fieldResolverProp || context.fieldResolver;
-  const resolver = React12__namespace.useMemo(() => fieldResolver, [schema, fieldResolver]);
-  const fields = React12__namespace.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
+  const resolver = React13__namespace.useMemo(() => fieldResolver, [schema, fieldResolver]);
+  const fields = React13__namespace.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
   const form = useFormContext();
-  React12__namespace.useEffect(() => {
+  React13__namespace.useEffect(() => {
     var _a;
     if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
       form.setFocus(fields[0].name);
@@ -931,8 +931,8 @@ var Form = react.forwardRef(
     };
     const methods = reactHookForm.useForm(form);
     const { handleSubmit } = methods;
-    React12__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
-    React12__namespace.useEffect(() => {
+    React13__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
+    React13__namespace.useEffect(() => {
       let subscription;
       if (onChange) {
         subscription = methods.watch(onChange);
@@ -982,8 +982,8 @@ function useStepForm(props) {
   const { onChange, ...rest } = props;
   const stepper = core.useStepper(rest);
   const { activeStep, isLastStep, nextStep } = stepper;
-  const [steps, updateSteps] = React12__namespace.useState({});
-  const onSubmitStep = React12__namespace.useCallback(
+  const [steps, updateSteps] = React13__namespace.useState({});
+  const onSubmitStep = React13__namespace.useCallback(
     async (data) => {
       var _a, _b;
       try {
@@ -1004,7 +1004,7 @@ function useStepForm(props) {
     },
     [steps, activeStep, isLastStep]
   );
-  const getFormProps = React12__namespace.useCallback(() => {
+  const getFormProps = React13__namespace.useCallback(() => {
     const step = steps[activeStep];
     return {
       onSubmit: onSubmitStep,
@@ -1012,7 +1012,7 @@ function useStepForm(props) {
       resolver: step == null ? void 0 : step.resolver
     };
   }, [steps, onSubmitStep, activeStep]);
-  const updateStep = React12__namespace.useCallback(
+  const updateStep = React13__namespace.useCallback(
     (step) => {
       updateSteps((steps2) => {
         return {
@@ -1034,7 +1034,7 @@ function useFormStep(props) {
   const { name, schema, resolver, onSubmit } = props;
   const step = core.useStep({ name });
   const { steps, updateStep } = useStepFormContext();
-  React12__namespace.useEffect(() => {
+  React13__namespace.useEffect(() => {
     updateStep({ name, schema, resolver, onSubmit });
   }, [name, schema]);
   return {
@@ -1042,20 +1042,20 @@ function useFormStep(props) {
     ...steps[name] || { name, schema }
   };
 }
-var StepForm = React12__namespace.forwardRef(
+var StepForm = React13__namespace.forwardRef(
   (props, ref) => {
     const { children, ...rest } = props;
     const stepper = useStepForm(props);
     const { getFormProps, ...ctx } = stepper;
-    const context = React12__namespace.useMemo(() => ctx, [ctx]);
+    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 = React12__namespace.Children.map(children, (child) => {
-    if (React12__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
+  const elements = React13__namespace.Children.map(children, (child) => {
+    if (React13__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
       const { isCompleted } = useFormStep(child.props);
       return /* @__PURE__ */ jsxRuntime.jsx(
         core.StepperStep,
@@ -1070,7 +1070,7 @@ var FormStepper = (props) => {
     }
     return child;
   });
-  const onChange = React12__namespace.useCallback((i) => {
+  const onChange = React13__namespace.useCallback((i) => {
     setIndex(i);
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(