@saas-ui/forms 2.0.0-rc.26 → 2.0.0-rc.28

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @saas-ui/forms
 
+## 2.0.0-rc.28
+
+### Minor Changes
+
+- 046e42b8: Updated to Chakra UI 2.7
+
+### Patch Changes
+
+- Updated dependencies [6193c47c]
+- Updated dependencies [046e42b8]
+- Updated dependencies [6236e117]
+  - @saas-ui/core@2.0.0-rc.25
+
+## 2.0.0-rc.27
+
+### Patch Changes
+
+- d6e9a39d: Form fields overries types now support array and object type props
+- Updated dependencies [b895e5bd]
+  - @saas-ui/core@2.0.0-rc.24
+
 ## 2.0.0-rc.26
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 import * as React$1 from 'react';
 import React__default from 'react';
 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';
+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, ButtonProps, MenuListProps, MenuItemOptionProps, SelectProps as SelectProps$1, TextareaProps, SwitchProps, CheckboxProps, UsePinInputProps, FormControlProps, SimpleGridProps, ResponsiveValue, FormLabelProps, HTMLChakraProps, ThemingProps } from '@chakra-ui/react';
+import { NumberInputProps as NumberInputProps$1, InputProps, RadioProps, RadioGroupProps, SystemProps, StackDirection, MenuProps, ButtonProps, MenuListProps, MenuItemOptionProps, SelectProps as SelectProps$1, TextareaProps, SwitchProps, CheckboxProps, UsePinInputProps, ResponsiveValue, FormLabelProps, SimpleGridProps, FormControlProps, HTMLChakraProps, ThemingProps } from '@chakra-ui/react';
 import { FocusableElement } from '@chakra-ui/utils';
 import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
 
@@ -197,101 +197,19 @@ interface SubmitButtonProps extends ButtonProps {
  */
 declare const SubmitButton: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", SubmitButtonProps>;
 
-type FieldOption = {
-    label?: string;
-    value: string;
-};
-type FieldOptions<TOption extends FieldOption = FieldOption> = Array<string> | Array<TOption>;
-type ValueOf<T> = T[keyof T];
-type ShallowMerge<A, B> = Omit<A, keyof B> & B;
-type Split<S extends string, D extends string> = string extends S ? string[] : S extends '' ? [] : S extends `${infer T}${D}${infer U}` ? [T, ...Split<U, D>] : [S];
-type MapPath<T extends string[]> = T extends [infer U, ...infer R] ? U extends string ? `${U extends `${number}` ? '$' : U}${R[0] extends string ? '.' : ''}${R extends string[] ? MapPath<R> : ''}` : '' : '';
-type TransformPath<T extends string> = MapPath<Split<T, '.'>>;
-type ArrayFieldPath<Name extends string> = Name extends string ? TransformPath<Name> : never;
-interface BaseFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<FormControlProps, 'label' | 'type'> {
-    /**
-     * The field name
-     */
-    name: TName | ArrayFieldPath<TName>;
-    /**
-     * The field label
-     */
-    label?: string;
-    /**
-     * Hide the field label
-     */
-    hideLabel?: boolean;
-    /**
-     * Field help text
-     */
-    help?: string;
-    /**
-     * React hook form rules
-     */
-    rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
-    /**
-     * Build-in types:
-     * text, number, password, textarea, select, native-select, checkbox, radio, switch, pin
-     *
-     * Will default to a text field if there is no matching type.
-     */
-    type?: string;
-    /**
-     * The input placeholder
-     */
-    placeholder?: string;
-}
-type FieldPathWithArray<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = TName | ArrayFieldPath<TName>;
-type MergeFieldProps<FieldDefs, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = ValueOf<{
-    [K in keyof FieldDefs]: FieldDefs[K] extends React.FC<infer Props> ? {
-        type?: K;
-    } & ShallowMerge<Props, BaseFieldProps<TFieldValues, TName>> : never;
-}>;
-type FieldProps<TFieldValues extends FieldValues = FieldValues> = MergeFieldProps<DefaultFields, TFieldValues>;
-type FormChildren<FieldDefs, TFieldValues extends FieldValues = FieldValues, TContext extends object = object> = MaybeRenderProp<FormRenderContext<TFieldValues, TContext, MergeFieldProps<FieldDefs extends never ? DefaultFields : ShallowMerge<DefaultFields, FieldDefs>, TFieldValues>>>;
-type DefaultFieldOverrides = {
-    submit?: SubmitButtonProps;
-    [key: string]: any;
-};
-type FieldOverrides<FieldDefs, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
-    [K in FieldPathWithArray<TFieldValues, TName>]?: Omit<MergeFieldProps<FieldDefs extends never ? DefaultFields : ShallowMerge<DefaultFields, FieldDefs>, TFieldValues>, 'name'>;
-};
-type WithFields<TFormProps extends FormProps<any, any, any, any>, FieldDefs, ExtraOverrides = object> = TFormProps extends FormProps<infer TSchema, infer TFieldValues, infer TContext> ? Omit<TFormProps, 'children' | 'fields'> & {
-    children?: FormChildren<FieldDefs, TFieldValues, TContext>;
-    fields?: FieldOverrides<FieldDefs, TFieldValues> & {
-        submit?: SubmitButtonProps;
-    } & ExtraOverrides;
-} : never;
-
-type FieldResolver = {
-    getFields(): BaseFieldProps[];
-    getNestedFields(name: string): BaseFieldProps[];
-};
-type GetFieldResolver<TSchema = any> = (schema: TSchema) => FieldResolver;
-interface SchemaField extends BaseFieldProps {
-    items?: SchemaField[];
-    properties?: Record<string, SchemaField>;
-}
-type ObjectSchema = Record<string, SchemaField>;
-declare const objectFieldResolver: GetFieldResolver<ObjectSchema>;
-
-interface DisplayIfProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
-    children: React$1.ReactElement;
+interface ObjectFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends BaseFieldProps {
     name: TName;
-    defaultValue?: unknown;
-    isDisabled?: boolean;
-    isExact?: boolean;
-    condition?: (value: unknown, context: UseFormReturn$1<TFieldValues>) => boolean;
+    children: React$1.ReactNode;
+    columns?: ResponsiveValue<number>;
+    spacing?: ResponsiveValue<string | number>;
 }
+declare const FormLegend: (props: FormLabelProps) => JSX.Element;
 /**
- * Conditionally render parts of a form.
+ * The object field component.
  *
- * @see Docs https://saas-ui.dev/docs/components/forms/form
+ * @see Docs https://saas-ui.dev/docs/components/forms/object-field
  */
-declare const DisplayIf: {
-    <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ children, name, defaultValue, isDisabled, isExact, condition, }: DisplayIfProps<TFieldValues, TName>): React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
-    displayName: string;
-};
+declare const ObjectField: React$1.FC<ObjectFieldProps>;
 
 interface FormLayoutProps extends SimpleGridProps {
 }
@@ -502,19 +420,110 @@ interface ArrayFieldContainerProps extends Omit<ArrayFieldProps, 'children'> {
  */
 declare const ArrayFieldContainer: React$1.ForwardRefExoticComponent<ArrayFieldContainerProps & React$1.RefAttributes<UseArrayFieldReturn>>;
 
-interface ObjectFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends BaseFieldProps {
+type FieldOption = {
+    label?: string;
+    value: string;
+};
+type FieldOptions<TOption extends FieldOption = FieldOption> = Array<string> | Array<TOption>;
+type ValueOf<T> = T[keyof T];
+type ShallowMerge<A, B> = Omit<A, keyof B> & B;
+type Split<S extends string, D extends string> = string extends S ? string[] : S extends '' ? [] : S extends `${infer T}${D}${infer U}` ? [T, ...Split<U, D>] : [S];
+type MapPath<T extends string[]> = T extends [infer U, ...infer R] ? U extends string ? `${U extends `${number}` ? '$' : U}${R[0] extends string ? '.' : ''}${R extends string[] ? MapPath<R> : ''}` : '' : '';
+type TransformPath<T extends string> = MapPath<Split<T, '.'>>;
+type ArrayFieldPath<Name extends string> = Name extends string ? TransformPath<Name> : never;
+interface BaseFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<FormControlProps, 'label' | 'type'> {
+    /**
+     * The field name
+     */
+    name: TName | ArrayFieldPath<TName>;
+    /**
+     * The field label
+     */
+    label?: string;
+    /**
+     * Hide the field label
+     */
+    hideLabel?: boolean;
+    /**
+     * Field help text
+     */
+    help?: string;
+    /**
+     * React hook form rules
+     */
+    rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
+    /**
+     * Build-in types:
+     * text, number, password, textarea, select, native-select, checkbox, radio, switch, pin
+     *
+     * Will default to a text field if there is no matching type.
+     */
+    type?: string;
+    /**
+     * The input placeholder
+     */
+    placeholder?: string;
+}
+type FieldPathWithArray<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = TName | ArrayFieldPath<TName>;
+type MergeFieldProps<FieldDefs, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = ValueOf<{
+    [K in keyof FieldDefs]: FieldDefs[K] extends React.FC<infer Props> ? {
+        type?: K;
+    } & ShallowMerge<Props, BaseFieldProps<TFieldValues, TName>> : never;
+}>;
+type FieldProps<TFieldValues extends FieldValues = FieldValues> = MergeFieldProps<DefaultFields, TFieldValues>;
+type FormChildren<FieldDefs, TFieldValues extends FieldValues = FieldValues, TContext extends object = object> = MaybeRenderProp<FormRenderContext<TFieldValues, TContext, MergeFieldProps<FieldDefs extends never ? DefaultFields : ShallowMerge<DefaultFields, FieldDefs>, TFieldValues>>>;
+type DefaultFieldOverrides = {
+    submit?: SubmitButtonProps;
+    [key: string]: any;
+};
+type MergeOverrideFieldProps<FieldDefs, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = ValueOf<{
+    [K in keyof FieldDefs]: FieldDefs[K] extends React.FC<infer Props> ? {
+        type?: K;
+    } & Omit<ShallowMerge<Props, BaseFieldProps<TFieldValues, TName>>, 'name'> : never;
+}>;
+type FieldOverrides<FieldDefs, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    [K in FieldPathWithArray<TFieldValues, TName>]?: MergeOverrideFieldProps<FieldDefs extends never ? DefaultFields : ShallowMerge<DefaultFields, FieldDefs>, TFieldValues> | ({
+        type?: 'object';
+    } & Omit<ObjectFieldProps<TFieldValues>, 'name' | 'children'>) | ({
+        type?: 'array';
+    } & Omit<ArrayFieldProps<TFieldValues>, 'name' | 'children'>);
+};
+type WithFields<TFormProps extends FormProps<any, any, any, any>, FieldDefs, ExtraOverrides = object> = TFormProps extends FormProps<infer TSchema, infer TFieldValues, infer TContext> ? Omit<TFormProps, 'children' | 'fields'> & {
+    children?: FormChildren<FieldDefs, TFieldValues, TContext>;
+    fields?: FieldOverrides<FieldDefs, TFieldValues> & {
+        submit?: SubmitButtonProps;
+    } & ExtraOverrides;
+} : never;
+
+type FieldResolver = {
+    getFields(): BaseFieldProps[];
+    getNestedFields(name: string): BaseFieldProps[];
+};
+type GetFieldResolver<TSchema = any> = (schema: TSchema) => FieldResolver;
+interface SchemaField extends BaseFieldProps {
+    items?: SchemaField[];
+    properties?: Record<string, SchemaField>;
+}
+type ObjectSchema = Record<string, SchemaField>;
+declare const objectFieldResolver: GetFieldResolver<ObjectSchema>;
+
+interface DisplayIfProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
+    children: React$1.ReactElement;
     name: TName;
-    children: React$1.ReactNode;
-    columns?: ResponsiveValue<number>;
-    spacing?: ResponsiveValue<string | number>;
+    defaultValue?: unknown;
+    isDisabled?: boolean;
+    isExact?: boolean;
+    condition?: (value: unknown, context: UseFormReturn$1<TFieldValues>) => boolean;
 }
-declare const FormLegend: (props: FormLabelProps) => JSX.Element;
 /**
- * The object field component.
+ * Conditionally render parts of a form.
  *
- * @see Docs https://saas-ui.dev/docs/components/forms/object-field
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
  */
-declare const ObjectField: React$1.FC<ObjectFieldProps>;
+declare const DisplayIf: {
+    <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ children, name, defaultValue, isDisabled, isExact, condition, }: DisplayIfProps<TFieldValues, TName>): React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
+    displayName: string;
+};
 
 interface FormRenderContext<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseFormReturn$1<TFieldValues, TContext> {
     Field: React$1.FC<TFieldTypes & React$1.RefAttributes<FocusableElement>>;
@@ -768,7 +777,7 @@ declare const useFormContext: <TFieldValues extends FieldValues = FieldValues, T
     formState: react_hook_form.FormState<FieldValues>;
     resetField: react_hook_form.UseFormResetField<FieldValues>;
     reset: react_hook_form.UseFormReset<FieldValues>;
-    handleSubmit: react_hook_form.UseFormHandleSubmit<FieldValues>;
+    handleSubmit: react_hook_form.UseFormHandleSubmit<FieldValues, undefined>;
     unregister: react_hook_form.UseFormUnregister<FieldValues>;
     control: react_hook_form.Control<FieldValues, any>;
     register: react_hook_form.UseFormRegister<FieldValues>;