@saas-ui/forms 2.0.2 → 2.0.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @saas-ui/forms
 
+## 2.0.4
+
+### Patch Changes
+
+- 3b5567c6: Fixed issue where StepForm would not render custom fields
+
+## 2.0.3
+
+### Patch Changes
+
+- 8c7ee0be: Fixed issue where custom StepForm field types would not propagate.
+
 ## 2.0.2
 
 ### Patch Changes

package/dist/index.d.ts

@@ -3,10 +3,10 @@ import React__default from 'react';
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, FieldPath, UseFieldArrayReturn, RegisterOptions, UseFormReturn as UseFormReturn$1, 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 { StepsProps, StepsItemProps, UseStepperReturn, UseStepperProps } from '@saas-ui/core';
 import { NumberInputProps as NumberInputProps$1, InputProps, RadioProps, RadioGroupProps, SystemProps, StackDirection, MenuProps, ThemingProps, ButtonProps, MenuListProps, MenuItemOptionProps, SelectProps as SelectProps$1, TextareaProps, SwitchProps, CheckboxProps, UsePinInputProps, ResponsiveValue, FormLabelProps, SimpleGridProps, FormControlProps, HTMLChakraProps } from '@chakra-ui/react';
+import { UseStepperReturn, UseStepperProps, StepsProps, StepsItemProps } from '@saas-ui/core';
 import { FocusableElement } from '@chakra-ui/utils';
+import { MaybeRenderProp } from '@chakra-ui/react-utils';
 import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
 
 interface NumberInputOptions {
@@ -494,6 +494,13 @@ type WithFields<TFormProps extends FormProps<any, any, any, any>, FieldDefs, Ext
         submit?: SubmitButtonProps;
     } & ExtraOverrides;
 } : never;
+type StepFormChildren<FieldDefs, TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object> = MaybeRenderProp<StepFormRenderContext<TSteps, TFieldValues, TContext, MergeFieldProps<FieldDefs extends never ? DefaultFields : ShallowMerge<DefaultFields, FieldDefs>, TFieldValues>>>;
+type WithStepFields<TStepFormProps extends UseStepFormProps<any, any, any>, FieldDefs, ExtraOverrides = object> = TStepFormProps extends UseStepFormProps<infer TSteps, infer TFieldValues, infer TContext> ? Omit<TStepFormProps, 'children' | 'fields'> & {
+    children?: StepFormChildren<FieldDefs, TSteps, TFieldValues, TContext>;
+    fields?: FieldOverrides<FieldDefs, TFieldValues> & {
+        submit?: SubmitButtonProps;
+    } & ExtraOverrides;
+} : never;
 
 type FieldResolver = {
     getFields(): BaseFieldProps[];
@@ -580,6 +587,56 @@ type FormComponent = (<TSchema = unknown, TFieldValues extends FieldValues = Fie
 };
 type GetResolver = <TFieldValues extends FieldValues, TContext extends object>(schema: unknown) => (values: TFieldValues, context: TContext | undefined, options: ResolverOptions<TFieldValues>) => Promise<ResolverResult<TFieldValues>>;
 
+interface StepState {
+    name: string;
+    schema?: any;
+    resolver?: any;
+    isActive?: boolean;
+    isCompleted?: boolean;
+    onSubmit?: FormStepSubmitHandler;
+}
+type FormStepSubmitHandler<TFieldValues extends FieldValues = FieldValues> = (data: TFieldValues, stepper: UseStepperReturn) => Promise<void>;
+interface StepFormContext extends UseStepperReturn {
+    updateStep(state: StepState): void;
+    steps: Record<string, StepState>;
+}
+declare const StepFormProvider: React$1.Provider<StepFormContext>;
+declare const useStepFormContext: () => StepFormContext;
+
+type StepName<T extends {
+    [k: number]: {
+        readonly name: string;
+    };
+}> = T[number]['name'];
+interface StepFormRenderContext<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseStepFormReturn<TFieldValues> {
+    Field: React$1.FC<TFieldTypes & React$1.RefAttributes<FocusableElement>>;
+    FormStep: React$1.FC<FormStepProps<StepName<TSteps>>>;
+    DisplayIf: React$1.FC<DisplayIfProps<TFieldValues>>;
+    ArrayField: React$1.FC<ArrayFieldProps<TFieldValues> & React$1.RefAttributes<UseArrayFieldReturn>>;
+    ObjectField: React$1.FC<ObjectFieldProps<TFieldValues>>;
+}
+interface UseStepFormProps<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object> extends Omit<UseStepperProps, 'onChange'>, Omit<FormProps<any, TFieldValues, TContext>, 'children'> {
+    steps?: TSteps;
+    children: StepFormChildren<any, TSteps, TFieldValues, TContext>;
+}
+interface UseStepFormReturn<TFieldValues extends FieldValues = FieldValues> extends UseStepperReturn {
+    getFormProps(): {
+        onSubmit: SubmitHandler<TFieldValues>;
+        schema?: any;
+        resolver?: any;
+    };
+    updateStep(step: any): void;
+    steps: Record<string, any>;
+}
+declare function useStepForm<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object>(props: UseStepFormProps<TSteps, TFieldValues, TContext>): UseStepFormReturn<TFieldValues>;
+interface UseFormStepProps {
+    name: string;
+    schema?: any;
+    resolver?: any;
+    onSubmit?: FormStepSubmitHandler;
+}
+declare function useFormStep(props: UseFormStepProps): StepState;
+
 type StepsOptions<TSchema, TName extends string = string> = {
     /**
      * The step name
@@ -590,7 +647,7 @@ type StepsOptions<TSchema, TName extends string = string> = {
      */
     schema?: TSchema;
 }[];
-interface StepFormProps<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes> {
+interface StepFormProps<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object> extends UseStepFormProps<TSteps, TFieldValues, TContext> {
 }
 interface FormStepOptions<TName extends string = string> {
     /**
@@ -644,57 +701,20 @@ interface NextButtonProps extends Omit<ButtonProps, 'children'> {
  */
 declare const NextButton: React$1.FC<NextButtonProps>;
 
-interface StepState {
-    name: string;
-    schema?: any;
-    resolver?: any;
-    isActive?: boolean;
-    isCompleted?: boolean;
-    onSubmit?: FormStepSubmitHandler;
-}
-type FormStepSubmitHandler<TFieldValues extends FieldValues = FieldValues> = (data: TFieldValues, stepper: UseStepperReturn) => Promise<void>;
-interface StepFormContext extends UseStepperReturn {
-    updateStep(state: StepState): void;
-    steps: Record<string, StepState>;
-}
-declare const StepFormProvider: React$1.Provider<StepFormContext>;
-declare const useStepFormContext: () => StepFormContext;
-
-type StepName<T extends {
-    [k: number]: {
-        readonly name: string;
-    };
-}> = T[number]['name'];
-interface StepFormRenderContext<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseStepFormReturn<TFieldValues> {
-    Field: React$1.FC<TFieldTypes & React$1.RefAttributes<FocusableElement>>;
-    FormStep: React$1.FC<FormStepProps<StepName<TSteps>>>;
-    DisplayIf: React$1.FC<DisplayIfProps<TFieldValues>>;
-    ArrayField: React$1.FC<ArrayFieldProps<TFieldValues> & React$1.RefAttributes<UseArrayFieldReturn>>;
-    ObjectField: React$1.FC<ObjectFieldProps<TFieldValues>>;
-}
-interface UseStepFormProps<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends Omit<UseStepperProps, 'onChange'>, Omit<FormProps<any, TFieldValues, TContext, TFieldTypes>, 'children'> {
-    steps?: TSteps;
-    children: MaybeRenderProp<StepFormRenderContext<TSteps, TFieldValues, TContext, TFieldTypes>>;
-}
-interface UseStepFormReturn<TFieldValues extends FieldValues = FieldValues> extends UseStepperReturn {
-    getFormProps(): {
-        onSubmit: SubmitHandler<TFieldValues>;
-        schema?: any;
-        resolver?: any;
-    };
-    updateStep(step: any): void;
-    steps: Record<string, any>;
-}
-declare function useStepForm<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>>(props: UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes>): UseStepFormReturn<TFieldValues>;
-interface UseFormStepProps {
-    name: string;
-    schema?: any;
-    resolver?: any;
-    onSubmit?: FormStepSubmitHandler;
+type StepFormType<FieldDefs, ExtraProps = object, ExtraOverrides = object> = (<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>>(props: WithStepFields<UseStepFormProps<TSteps, TFieldValues, TContext>, FieldDefs, ExtraOverrides> & {
+    ref?: React__default.ForwardedRef<HTMLFormElement>;
+} & ExtraProps) => React__default.ReactElement) & {
+    displayName?: string;
+    id?: string;
+};
+interface CreateStepFormProps<FieldDefs> {
+    resolver?: GetResolver;
+    fieldResolver?: GetFieldResolver;
+    fields?: FieldDefs extends Record<string, React__default.FC<any>> ? FieldDefs : never;
 }
-declare function useFormStep(props: UseFormStepProps): StepState;
+declare function createStepForm<FieldDefs, ExtraProps = object, ExtraOverrides = object>({ fields, resolver, fieldResolver }?: CreateStepFormProps<FieldDefs>): StepFormType<FieldDefs, ExtraProps, ExtraOverrides>;
 
-interface CreateFormProps$1<FieldDefs> {
+interface CreateFormProps<FieldDefs> {
     resolver?: GetResolver;
     fieldResolver?: GetFieldResolver;
     fields?: FieldDefs extends Record<string, React__default.FC<any>> ? FieldDefs : never;
@@ -705,7 +725,7 @@ type FormType<FieldDefs, ExtraProps = object, ExtraOverrides = object> = (<TSche
     displayName?: string;
     id?: string;
 };
-declare function createForm<FieldDefs>({ resolver, fieldResolver, fields, }?: CreateFormProps$1<FieldDefs>): FormType<FieldDefs, object, object>;
+declare function createForm<FieldDefs>({ resolver, fieldResolver, fields, }?: CreateFormProps<FieldDefs>): FormType<FieldDefs, object, object>;
 
 interface DisplayFieldProps extends FormControlProps, Omit<FieldProps, 'type' | 'label'> {
 }
@@ -819,19 +839,6 @@ interface CreateFieldOptions {
  */
 declare const createField: <TProps extends object>(component: React$1.FC<TProps>, options?: CreateFieldOptions) => React$1.FC<TProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
 
-type StepFormType<FieldDefs, ExtraProps = object, ExtraOverrides = object> = (<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>>(props: UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes> & {
-    ref?: React__default.ForwardedRef<HTMLFormElement>;
-}) => React__default.ReactElement) & {
-    displayName?: string;
-    id?: string;
-};
-interface CreateFormProps<FieldDefs> {
-    resolver?: GetResolver;
-    fieldResolver?: GetFieldResolver;
-    fields?: FieldDefs extends Record<string, React__default.FC<any>> ? FieldDefs : never;
-}
-declare function createStepForm<FieldDefs = any, ExtraProps = object, ExtraOverrides = object>({ fields, resolver, fieldResolver }?: CreateFormProps<FieldDefs>): StepFormType<FieldDefs, ExtraProps, ExtraOverrides>;
-
 /**
  * Form component.
  *
@@ -844,11 +851,6 @@ declare const Form: FormType<unknown, object, object>;
  *
  * @see Docs https://saas-ui.dev/docs/components/forms/step-form
  */
-declare const StepForm: (<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>>(props: UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes> & {
-    ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
-}) => React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>>) & {
-    displayName?: string | undefined;
-    id?: string | undefined;
-};
+declare const StepForm: StepFormType<unknown, object, object>;
 
-export { ArrayField, ArrayFieldAddButton, ArrayFieldButtonProps, ArrayFieldContainer, ArrayFieldContainerProps, ArrayFieldOptions, ArrayFieldProps, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, ArrayFieldRowFieldsProps, ArrayFieldRowProvider, ArrayFieldRows, ArrayFieldRowsProps, AutoFields, BaseField, BaseFieldProps, Form$1 as BaseForm, CheckboxField, CreateFieldOptions, CreateFormProps$1 as CreateFormProps, DefaultFieldOverrides, DefaultFields, DisplayField, DisplayFieldProps, DisplayIf, DisplayIfProps, Field, FieldOptions, FieldProps, FieldResolver, FieldRules, FieldsProps, FieldsProvider, Form, FormComponent, FormLayout, FormLayoutProps, FormLegend, FormProps, FormProvider, FormRenderContext, FormStep, FormStepOptions, FormStepProps, FormStepSubmitHandler, FormStepper, FormStepperProps, FormType, FormValue, GetFieldResolver, InputField, InputFieldProps, InputRightButton, InputRightButtonProps, NativeSelect, NativeSelectField, NativeSelectProps, NextButton, NextButtonProps, NumberInputField, NumberInputFieldProps, ObjectField, ObjectFieldProps, ObjectSchema, Option, PasswordInput, PasswordInputField, PasswordInputProps, PinField, PinFieldProps, PrevButton, RadioField, RadioInput, RadioInputProps, RadioOption, RadioOptions, Select, SelectButton, SelectButtonProps, SelectField, SelectList, SelectListProps, SelectOption, SelectProps, StepForm, StepFormContext, StepFormProps, StepFormProvider, StepState, StepsOptions, SubmitButton, SubmitButtonProps, SwitchField, TextareaField, UseArrayFieldReturn, UseArrayFieldRowProps, UseArrayFieldRowReturn, UseFormStepProps, UseStepFormProps, UseStepFormReturn, WatchField, WatchFieldProps, WithFields, createField, createForm, createStepForm, defaultFieldTypes, objectFieldResolver, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useField, useFormContext, useFormStep, useStepForm, useStepFormContext };
+export { ArrayField, ArrayFieldAddButton, ArrayFieldButtonProps, ArrayFieldContainer, ArrayFieldContainerProps, ArrayFieldOptions, ArrayFieldProps, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, ArrayFieldRowFieldsProps, ArrayFieldRowProvider, ArrayFieldRows, ArrayFieldRowsProps, AutoFields, BaseField, BaseFieldProps, Form$1 as BaseForm, CheckboxField, CreateFieldOptions, CreateFormProps, CreateStepFormProps, DefaultFieldOverrides, DefaultFields, DisplayField, DisplayFieldProps, DisplayIf, DisplayIfProps, Field, FieldOptions, FieldProps, FieldResolver, FieldRules, FieldsProps, FieldsProvider, Form, FormComponent, FormLayout, FormLayoutProps, FormLegend, FormProps, FormProvider, FormRenderContext, FormStep, FormStepOptions, FormStepProps, FormStepSubmitHandler, FormStepper, FormStepperProps, FormType, FormValue, GetFieldResolver, InputField, InputFieldProps, InputRightButton, InputRightButtonProps, NativeSelect, NativeSelectField, NativeSelectProps, NextButton, NextButtonProps, NumberInputField, NumberInputFieldProps, ObjectField, ObjectFieldProps, ObjectSchema, Option, PasswordInput, PasswordInputField, PasswordInputProps, PinField, PinFieldProps, PrevButton, RadioField, RadioInput, RadioInputProps, RadioOption, RadioOptions, Select, SelectButton, SelectButtonProps, SelectField, SelectList, SelectListProps, SelectOption, SelectProps, StepForm, StepFormContext, StepFormProps, StepFormProvider, StepFormRenderContext, StepState, StepsOptions, SubmitButton, SubmitButtonProps, SwitchField, TextareaField, UseArrayFieldReturn, UseArrayFieldRowProps, UseArrayFieldRowReturn, UseFormStepProps, UseStepFormProps, UseStepFormReturn, WatchField, WatchFieldProps, WithFields, WithStepFields, createField, createForm, createStepForm, defaultFieldTypes, objectFieldResolver, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useField, useFormContext, useFormStep, useStepForm, useStepFormContext };

package/dist/index.js

@@ -1236,7 +1236,7 @@ function createStepForm({ fields, resolver, fieldResolver } = {}) {
     });
     const { getFormProps, ...ctx } = stepper;
     const context = React11.useMemo(() => ctx, [ctx]);
-    return /* @__PURE__ */ jsxRuntime.jsx(core.StepperProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(StepFormProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsxRuntime.jsx(Form2, { ref, ...rest, ...getFormProps(), children: utils.runIfFn(children, {
+    return /* @__PURE__ */ jsxRuntime.jsx(core.StepperProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(StepFormProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsxRuntime.jsx(Form, { ref, ...rest, ...getFormProps(), children: utils.runIfFn(children, {
       ...stepper,
       Field,
       FormStep,
@@ -1245,7 +1245,7 @@ function createStepForm({ fields, resolver, fieldResolver } = {}) {
       ObjectField
     }) }) }) }) });
   });
-  StepForm2.displayName = `Step${Form2.displayName || Form2.name}`;
+  StepForm2.displayName = `Step${Form.displayName || Form.name}`;
   return StepForm2;
 }
 var Form2 = createForm();