@saas-ui/forms 2.0.0-next.3 → 2.0.0-next.6
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +43 -0
- package/README.md +53 -6
- package/dist/ajv/index.d.ts +358 -11
- package/dist/ajv/index.js +7 -9
- package/dist/ajv/index.js.map +1 -1
- package/dist/ajv/index.mjs +7 -10
- package/dist/ajv/index.mjs.map +1 -1
- package/dist/index.d.ts +448 -247
- package/dist/index.js +707 -682
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +691 -666
- package/dist/index.mjs.map +1 -1
- package/dist/yup/index.d.ts +580 -21
- package/dist/yup/index.js +6 -10
- package/dist/yup/index.js.map +1 -1
- package/dist/yup/index.mjs +4 -8
- package/dist/yup/index.mjs.map +1 -1
- package/dist/zod/index.d.ts +580 -11
- package/dist/zod/index.js +5 -0
- package/dist/zod/index.js.map +1 -1
- package/dist/zod/index.mjs +5 -1
- package/dist/zod/index.mjs.map +1 -1
- package/package.json +19 -10
- package/src/array-field.tsx +82 -45
- package/src/auto-form.tsx +7 -3
- package/src/base-field.tsx +54 -0
- package/src/create-field.tsx +144 -0
- package/src/create-form.tsx +54 -0
- package/src/default-fields.tsx +163 -0
- package/src/display-field.tsx +9 -11
- package/src/display-if.tsx +20 -13
- package/src/field-resolver.ts +10 -8
- package/src/field.tsx +18 -445
- package/src/fields-context.tsx +23 -0
- package/src/fields.tsx +34 -21
- package/src/form-context.tsx +84 -0
- package/src/form.tsx +69 -52
- package/src/index.ts +44 -4
- package/src/input-right-button/input-right-button.stories.tsx +1 -1
- package/src/input-right-button/input-right-button.tsx +0 -2
- package/src/layout.tsx +16 -11
- package/src/number-input/number-input.tsx +9 -5
- package/src/object-field.tsx +13 -8
- package/src/password-input/password-input.stories.tsx +23 -2
- package/src/password-input/password-input.tsx +6 -6
- package/src/pin-input/pin-input.tsx +1 -5
- package/src/radio/radio-input.stories.tsx +1 -1
- package/src/radio/radio-input.tsx +12 -10
- package/src/select/native-select.tsx +1 -4
- package/src/select/select-context.tsx +130 -0
- package/src/select/select.stories.tsx +116 -85
- package/src/select/select.test.tsx +1 -1
- package/src/select/select.tsx +160 -146
- package/src/step-form.tsx +29 -11
- package/src/submit-button.tsx +5 -1
- package/src/types.ts +144 -0
- package/src/use-array-field.tsx +9 -3
- package/src/utils.ts +23 -1
- package/src/watch-field.tsx +2 -6
- /package/src/radio/{radio.test.tsx → radio-input.test.tsx} +0 -0
package/dist/index.d.ts
CHANGED
@@ -1,14 +1,37 @@
|
|
1
1
|
import * as React$1 from 'react';
|
2
2
|
import React__default from 'react';
|
3
|
-
import { NumberInputProps as NumberInputProps$1, InputProps, RadioGroupProps, SystemProps, StackDirection, RadioProps, MenuProps, ButtonProps, MenuOptionGroupProps, MenuListProps, SelectProps as SelectProps$1, FormControlProps, TextareaProps, SwitchProps, CheckboxProps, UsePinInputProps, HTMLChakraProps, SimpleGridProps, ResponsiveValue, FormLabelProps, ThemingProps } from '@chakra-ui/react';
|
4
3
|
import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
|
4
|
+
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';
|
5
5
|
import * as react_hook_form from 'react-hook-form';
|
6
|
-
import {
|
7
|
-
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,
|
8
|
-
import { FocusableElement } from '@chakra-ui/utils';
|
6
|
+
import { FieldValues, FieldPath, RegisterOptions, UseFormReturn as UseFormReturn$1, UseFieldArrayReturn, UseFormProps, WatchObserver, SubmitHandler, SubmitErrorHandler, ResolverOptions, ResolverResult, FormProviderProps as FormProviderProps$1 } from 'react-hook-form';
|
7
|
+
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';
|
9
8
|
import { MaybeRenderProp } from '@chakra-ui/react-utils';
|
9
|
+
import { FocusableElement } from '@chakra-ui/utils';
|
10
10
|
import { UseStepperReturn, UseStepperProps, StepperStepsProps } from '@saas-ui/core';
|
11
11
|
|
12
|
+
interface SubmitButtonProps extends ButtonProps {
|
13
|
+
/**
|
14
|
+
* Disable the submit button if the form is untouched.
|
15
|
+
*
|
16
|
+
* Change the default behavior by updating
|
17
|
+
* `SubmitButton.defaultProps.disableIfUntouched`
|
18
|
+
*/
|
19
|
+
disableIfUntouched?: boolean;
|
20
|
+
/**
|
21
|
+
* Disable the submit button if the form is invalid.
|
22
|
+
*
|
23
|
+
* Change the default behavior by updating
|
24
|
+
* `SubmitButton.defaultProps.disableIfInvalid`
|
25
|
+
*/
|
26
|
+
disableIfInvalid?: boolean;
|
27
|
+
}
|
28
|
+
/**
|
29
|
+
* A button with type submit and default color scheme primary and isLoading state when the form is submitting.
|
30
|
+
*
|
31
|
+
* @see Docs https://saas-ui.dev/docs/components/forms/form
|
32
|
+
*/
|
33
|
+
declare const SubmitButton: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", SubmitButtonProps>;
|
34
|
+
|
12
35
|
interface NumberInputOptions {
|
13
36
|
/**
|
14
37
|
* Hide the stepper.
|
@@ -29,50 +52,99 @@ interface NumberInputProps extends NumberInputProps$1, NumberInputOptions {
|
|
29
52
|
interface PasswordOptions {
|
30
53
|
viewIcon?: React__default.ReactNode;
|
31
54
|
viewOffIcon?: React__default.ReactNode;
|
55
|
+
leftAddon?: React__default.ReactNode;
|
32
56
|
}
|
33
57
|
interface PasswordInputProps extends InputProps, PasswordOptions {
|
34
58
|
}
|
35
59
|
declare const PasswordInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", PasswordInputProps>;
|
36
60
|
|
37
|
-
interface
|
38
|
-
value: string;
|
39
|
-
label?: string;
|
61
|
+
interface RadioOption extends Omit<RadioProps, 'value' | 'label'>, FieldOption {
|
40
62
|
}
|
63
|
+
type RadioOptions = FieldOptions<RadioOption>;
|
41
64
|
interface RadioInputOptions {
|
42
|
-
options:
|
65
|
+
options: RadioOptions;
|
43
66
|
spacing?: SystemProps['margin'];
|
44
67
|
direction?: StackDirection;
|
45
68
|
}
|
46
69
|
interface RadioInputProps extends Omit<RadioGroupProps, 'children'>, RadioInputOptions {
|
47
70
|
}
|
71
|
+
declare const RadioInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", RadioInputProps>;
|
48
72
|
|
49
|
-
interface Option$2 {
|
50
|
-
value: string;
|
51
|
-
label?: string;
|
52
|
-
}
|
53
73
|
interface SelectOptions {
|
54
74
|
/**
|
55
|
-
*
|
56
|
-
|
75
|
+
* The name of the input field in a native form.
|
76
|
+
*/
|
77
|
+
name: string;
|
78
|
+
/**
|
79
|
+
* The value of the select field.
|
80
|
+
*/
|
81
|
+
value?: string | string[];
|
82
|
+
/**
|
83
|
+
* The initial value of the select field.
|
84
|
+
*/
|
85
|
+
defaultValue?: string | string[];
|
86
|
+
/**
|
87
|
+
* The callback invoked when the value of the select field changes.
|
88
|
+
* @param value The value of the select field.
|
57
89
|
*/
|
58
|
-
|
90
|
+
onChange?: (value: string | string[]) => void;
|
59
91
|
/**
|
60
|
-
*
|
92
|
+
* The placeholder text when there's no value.
|
61
93
|
*/
|
62
|
-
|
94
|
+
placeholder?: string;
|
63
95
|
/**
|
64
|
-
*
|
65
|
-
* @type (value?: string[]) => React.ReactElement
|
96
|
+
* If `true`, the select will be disabled.
|
66
97
|
*/
|
67
|
-
|
98
|
+
isDisabled?: boolean;
|
99
|
+
/**
|
100
|
+
* An array of options
|
101
|
+
* If you leave this empty the children prop will be rendered.
|
102
|
+
*/
|
103
|
+
options?: FieldOptions<SelectOption>;
|
68
104
|
/**
|
69
105
|
* Enable multiple select.
|
70
106
|
*/
|
71
107
|
multiple?: boolean;
|
108
|
+
/**
|
109
|
+
* The function used to render the value of the select field.
|
110
|
+
* @param value The value of the select field.
|
111
|
+
* @returns The rendered value.
|
112
|
+
*/
|
113
|
+
renderValue?: (value: string | string[]) => React__default.ReactNode;
|
72
114
|
}
|
73
|
-
|
115
|
+
|
116
|
+
interface SelectProps extends Omit<MenuProps, 'children'>, SelectOptions {
|
117
|
+
}
|
118
|
+
interface SelectButtonProps extends ButtonProps {
|
74
119
|
}
|
120
|
+
/**
|
121
|
+
* Button that opens the select menu and displays the selected value.
|
122
|
+
*
|
123
|
+
* @see https://saas-ui.dev/docs/components/forms/select
|
124
|
+
*/
|
125
|
+
declare const SelectButton: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", SelectButtonProps>;
|
126
|
+
/**
|
127
|
+
* Allow users to select a value from a list of options.
|
128
|
+
*
|
129
|
+
* @see https://saas-ui.dev/docs/components/forms/select
|
130
|
+
*/
|
75
131
|
declare const Select: _chakra_ui_system_dist_system_types.ComponentWithAs<"select", SelectProps>;
|
132
|
+
interface SelectListProps extends MenuListProps {
|
133
|
+
}
|
134
|
+
/**
|
135
|
+
* The list of options to choose from.
|
136
|
+
*
|
137
|
+
* @see https://saas-ui.dev/docs/components/forms/select
|
138
|
+
*/
|
139
|
+
declare const SelectList: React$1.FC<SelectListProps>;
|
140
|
+
interface SelectOption extends Omit<MenuItemOptionProps, 'value'>, FieldOption {
|
141
|
+
}
|
142
|
+
/**
|
143
|
+
* An option in a select list
|
144
|
+
*
|
145
|
+
* @see https://saas-ui.dev/docs/components/forms/select
|
146
|
+
*/
|
147
|
+
declare const SelectOption: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", MenuItemOptionProps>;
|
76
148
|
|
77
149
|
interface Option$1 {
|
78
150
|
value: string;
|
@@ -85,17 +157,62 @@ interface NativeSelectProps extends SelectProps$1, NativeSelectOptions {
|
|
85
157
|
}
|
86
158
|
declare const NativeSelect: _chakra_ui_system_dist_system_types.ComponentWithAs<"select", NativeSelectProps>;
|
87
159
|
|
88
|
-
interface
|
89
|
-
|
90
|
-
|
91
|
-
|
160
|
+
interface InputFieldProps extends InputProps {
|
161
|
+
type?: string;
|
162
|
+
leftAddon?: React$1.ReactNode;
|
163
|
+
rightAddon?: React$1.ReactNode;
|
92
164
|
}
|
93
|
-
|
94
|
-
interface
|
165
|
+
declare const InputField: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
166
|
+
interface NumberInputFieldProps extends NumberInputProps {
|
167
|
+
type: 'number';
|
168
|
+
}
|
169
|
+
declare const NumberInputField: React$1.FC<NumberInputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
170
|
+
declare const PasswordInputField: React$1.FC<PasswordInputProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
171
|
+
declare const TextareaField: React$1.FC<TextareaProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
172
|
+
declare const SwitchField: React$1.FC<SwitchProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
173
|
+
declare const SelectField: React$1.FC<SelectProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
174
|
+
declare const CheckboxField: React$1.FC<CheckboxProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
175
|
+
declare const RadioField: React$1.FC<RadioInputProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
176
|
+
declare const NativeSelectField: React$1.FC<NativeSelectProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
177
|
+
interface PinFieldProps extends Omit<UsePinInputProps, 'type'> {
|
178
|
+
pinLength?: number;
|
179
|
+
pinType?: 'alphanumeric' | 'number';
|
180
|
+
spacing?: SystemProps['margin'];
|
181
|
+
}
|
182
|
+
declare const PinField: React$1.FC<PinFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
183
|
+
declare const defaultFieldTypes: {
|
184
|
+
text: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
185
|
+
email: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
186
|
+
url: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
187
|
+
phone: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
188
|
+
number: React$1.FC<NumberInputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
189
|
+
password: React$1.FC<PasswordInputProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
190
|
+
textarea: React$1.FC<TextareaProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
191
|
+
switch: React$1.FC<SwitchProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
192
|
+
select: React$1.FC<SelectProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
193
|
+
checkbox: React$1.FC<CheckboxProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
194
|
+
radio: React$1.FC<RadioInputProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
195
|
+
pin: React$1.FC<PinFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
196
|
+
'native-select': React$1.FC<NativeSelectProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
197
|
+
};
|
198
|
+
type DefaultFields = typeof defaultFieldTypes;
|
199
|
+
|
200
|
+
type FieldOption = {
|
201
|
+
label?: string;
|
202
|
+
value: string;
|
203
|
+
};
|
204
|
+
type FieldOptions<TOption extends FieldOption = FieldOption> = Array<string> | Array<TOption>;
|
205
|
+
type ValueOf<T> = T[keyof T];
|
206
|
+
type ShallowMerge<A, B> = Omit<A, keyof B> & B;
|
207
|
+
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];
|
208
|
+
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> : ''}` : '' : '';
|
209
|
+
type TransformPath<T extends string> = MapPath<Split<T, '.'>>;
|
210
|
+
type ArrayFieldPath<Name extends string> = Name extends string ? TransformPath<Name> : never;
|
211
|
+
interface BaseFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<FormControlProps, 'label' | 'type'> {
|
95
212
|
/**
|
96
213
|
* The field name
|
97
214
|
*/
|
98
|
-
name: TName
|
215
|
+
name: TName | ArrayFieldPath<TName>;
|
99
216
|
/**
|
100
217
|
* The field label
|
101
218
|
*/
|
@@ -114,16 +231,7 @@ interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName exten
|
|
114
231
|
rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
|
115
232
|
/**
|
116
233
|
* Build-in types:
|
117
|
-
* -
|
118
|
-
* - number
|
119
|
-
* - password
|
120
|
-
* - textarea
|
121
|
-
* - select
|
122
|
-
* - native-select
|
123
|
-
* - checkbox
|
124
|
-
* - radio
|
125
|
-
* - switch
|
126
|
-
* - pin
|
234
|
+
* text, number, password, textarea, select, native-select, checkbox, radio, switch, pin
|
127
235
|
*
|
128
236
|
* Will default to a text field if there is no matching type.
|
129
237
|
*/
|
@@ -133,218 +241,74 @@ interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName exten
|
|
133
241
|
*/
|
134
242
|
placeholder?: string;
|
135
243
|
}
|
136
|
-
|
137
|
-
type
|
138
|
-
|
139
|
-
|
140
|
-
};
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
* - select
|
148
|
-
* - native-select
|
149
|
-
* - checkbox
|
150
|
-
* - radio
|
151
|
-
* - switch
|
152
|
-
* - pin
|
153
|
-
*
|
154
|
-
* Will default to a text field if there is no matching type.
|
155
|
-
*/
|
156
|
-
declare const Field: (<TFieldValues extends FieldValues>(props: FieldProps<TFieldValues, react_hook_form.Path<TFieldValues>> & FieldTypeProps & {
|
157
|
-
ref?: React$1.ForwardedRef<FocusableElement> | undefined;
|
158
|
-
}) => React$1.ReactElement) & {
|
159
|
-
displayName?: string | undefined;
|
160
|
-
};
|
161
|
-
declare const withControlledInput: (InputComponent: React$1.FC<any>) => _chakra_ui_system_dist_system_types.ComponentWithAs<React$1.FC<any>, FieldProps<FieldValues, string>>;
|
162
|
-
declare const withUncontrolledInput: (InputComponent: React$1.FC<any>) => _chakra_ui_system_dist_system_types.ComponentWithAs<React$1.FC<any>, FieldProps<FieldValues, string>>;
|
163
|
-
interface RegisterFieldTypeOptions {
|
164
|
-
isControlled?: boolean;
|
165
|
-
hideLabel?: boolean;
|
166
|
-
BaseField?: React$1.FC<any>;
|
167
|
-
}
|
168
|
-
/**
|
169
|
-
* Register a new field type
|
170
|
-
* @param type The name for this field in kebab-case, eg `email` or `array-field`
|
171
|
-
* @param component The React component
|
172
|
-
* @param options
|
173
|
-
* @param options.isControlled Set this to true if this is a controlled field.
|
174
|
-
* @param options.hideLabel Hide the field label, for example for the checkbox field.
|
175
|
-
*/
|
176
|
-
declare const registerFieldType: <T extends object>(type: string, component: React$1.FC<T>, options?: RegisterFieldTypeOptions) => React$1.FC<T & FieldProps<FieldValues, string>>;
|
177
|
-
interface InputFieldProps extends InputProps {
|
178
|
-
type?: string;
|
179
|
-
leftAddon?: React$1.ReactNode;
|
180
|
-
rightAddon?: React$1.ReactNode;
|
181
|
-
}
|
182
|
-
declare const InputField: React$1.FC<InputFieldProps & FieldProps<FieldValues, string>>;
|
183
|
-
interface NumberInputFieldProps extends NumberInputProps {
|
184
|
-
type: 'number';
|
185
|
-
}
|
186
|
-
declare const NumberInputField: React$1.FC<NumberInputFieldProps & FieldProps<FieldValues, string>>;
|
187
|
-
declare const PasswordInputField: React$1.FC<PasswordInputProps & FieldProps<FieldValues, string>>;
|
188
|
-
declare const TextareaField: React$1.FC<TextareaProps & FieldProps<FieldValues, string>>;
|
189
|
-
declare const SwitchField: React$1.FC<SwitchProps & FieldProps<FieldValues, string>>;
|
190
|
-
declare const SelectField: React$1.FC<SelectProps & FieldProps<FieldValues, string>>;
|
191
|
-
declare const CheckboxField: React$1.FC<CheckboxProps & FieldProps<FieldValues, string>>;
|
192
|
-
declare const RadioField: React$1.FC<RadioInputProps & FieldProps<FieldValues, string>>;
|
193
|
-
declare const NativeSelectField: React$1.FC<NativeSelectProps & FieldProps<FieldValues, string>>;
|
194
|
-
interface PinFieldProps extends Omit<UsePinInputProps, 'type'> {
|
195
|
-
pinLength?: number;
|
196
|
-
pinType?: 'alphanumeric' | 'number';
|
197
|
-
spacing?: SystemProps['margin'];
|
198
|
-
}
|
199
|
-
declare const PinField: React$1.FC<PinFieldProps & FieldProps<FieldValues, string>>;
|
200
|
-
declare const fieldTypes: {
|
201
|
-
text: React$1.FC<InputFieldProps & FieldProps<FieldValues, string>>;
|
202
|
-
email: React$1.FC<InputFieldProps & FieldProps<FieldValues, string>>;
|
203
|
-
url: React$1.FC<InputFieldProps & FieldProps<FieldValues, string>>;
|
204
|
-
phone: React$1.FC<InputFieldProps & FieldProps<FieldValues, string>>;
|
205
|
-
number: React$1.FC<NumberInputFieldProps & FieldProps<FieldValues, string>>;
|
206
|
-
password: React$1.FC<PasswordInputProps & FieldProps<FieldValues, string>>;
|
207
|
-
textarea: React$1.FC<TextareaProps & FieldProps<FieldValues, string>>;
|
208
|
-
switch: React$1.FC<SwitchProps & FieldProps<FieldValues, string>>;
|
209
|
-
checkbox: React$1.FC<CheckboxProps & FieldProps<FieldValues, string>>;
|
210
|
-
radio: React$1.FC<RadioInputProps & FieldProps<FieldValues, string>>;
|
211
|
-
pin: React$1.FC<PinFieldProps & FieldProps<FieldValues, string>>;
|
212
|
-
select: React$1.FC<SelectProps & FieldProps<FieldValues, string>>;
|
213
|
-
'native-select': React$1.FC<NativeSelectProps & FieldProps<FieldValues, string>>;
|
214
|
-
};
|
215
|
-
type FieldTypes = typeof fieldTypes;
|
216
|
-
type FieldType<Props = any> = React$1.ElementType<Props>;
|
217
|
-
type TypeProps<P extends FieldType, T> = React$1.ComponentPropsWithoutRef<P> & {
|
218
|
-
type: T;
|
244
|
+
type FieldPathWithArray<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = TName | ArrayFieldPath<TName>;
|
245
|
+
type MergeFieldProps<FieldDefs, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = ValueOf<{
|
246
|
+
[K in keyof FieldDefs]: FieldDefs[K] extends React.FC<infer Props> ? {
|
247
|
+
type?: K;
|
248
|
+
} & ShallowMerge<Props, BaseFieldProps<TFieldValues, TName>> : never;
|
249
|
+
}>;
|
250
|
+
type FieldProps<TFieldValues extends FieldValues = FieldValues> = MergeFieldProps<DefaultFields, TFieldValues>;
|
251
|
+
type FormChildren<FieldDefs, TFieldValues extends FieldValues = FieldValues, TContext extends object = object> = MaybeRenderProp<FormRenderContext<TFieldValues, TContext, MergeFieldProps<FieldDefs extends never ? DefaultFields : ShallowMerge<DefaultFields, FieldDefs>, TFieldValues>>>;
|
252
|
+
type DefaultFieldOverrides = {
|
253
|
+
submit?: SubmitButtonProps;
|
254
|
+
[key: string]: any;
|
219
255
|
};
|
220
|
-
type
|
221
|
-
[
|
222
|
-
}[keyof FieldTypes] | {
|
223
|
-
type?: string;
|
256
|
+
type FieldOverrides<FieldDefs, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
|
257
|
+
[K in FieldPathWithArray<TFieldValues, TName>]?: Omit<MergeFieldProps<FieldDefs extends never ? DefaultFields : ShallowMerge<DefaultFields, FieldDefs>, TFieldValues>, 'name'>;
|
224
258
|
};
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
}>;
|
259
|
+
type WithFields<TFormProps extends FormProps<any, any, any, any>, FieldDefs> = TFormProps extends FormProps<infer TFieldValues, infer TContext> ? Omit<TFormProps, 'children' | 'fields'> & {
|
260
|
+
children?: FormChildren<FieldDefs, TFieldValues, TContext>;
|
261
|
+
fields?: FieldOverrides<FieldDefs, TFieldValues> & {
|
262
|
+
submit?: SubmitButtonProps;
|
263
|
+
};
|
264
|
+
} : never;
|
232
265
|
|
233
266
|
type FieldResolver = {
|
234
|
-
getFields():
|
235
|
-
getNestedFields(name: string):
|
267
|
+
getFields(): BaseFieldProps[];
|
268
|
+
getNestedFields(name: string): BaseFieldProps[];
|
236
269
|
};
|
237
|
-
|
270
|
+
type GetFieldResolver<TSchema = any> = (schema: TSchema) => FieldResolver;
|
271
|
+
interface SchemaField extends BaseFieldProps {
|
238
272
|
items?: SchemaField[];
|
239
273
|
properties?: Record<string, SchemaField>;
|
240
274
|
}
|
241
275
|
type ObjectSchema = Record<string, SchemaField>;
|
242
|
-
declare const objectFieldResolver:
|
243
|
-
|
244
|
-
interface FieldsProps {
|
245
|
-
schema: any;
|
246
|
-
fieldResolver?: FieldResolver;
|
247
|
-
focusFirstField?: boolean;
|
248
|
-
}
|
249
|
-
declare const Fields: React$1.FC<FieldsProps>;
|
276
|
+
declare const objectFieldResolver: GetFieldResolver<ObjectSchema>;
|
250
277
|
|
251
|
-
interface
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
schema?: TSchema;
|
259
|
-
/**
|
260
|
-
* Triggers when any of the field change.
|
261
|
-
*/
|
262
|
-
onChange?: WatchObserver<TFieldValues>;
|
263
|
-
/**
|
264
|
-
* The submit handler.
|
265
|
-
*/
|
266
|
-
onSubmit: SubmitHandler<TFieldValues>;
|
267
|
-
/**
|
268
|
-
* Triggers when there are validation errors.
|
269
|
-
*/
|
270
|
-
onError?: SubmitErrorHandler<TFieldValues>;
|
271
|
-
/**
|
272
|
-
* The Hook Form state ref.
|
273
|
-
*/
|
274
|
-
formRef?: React$1.RefObject<UseFormReturn<TFieldValues, TContext>>;
|
275
|
-
/**
|
276
|
-
* The form children, can be a render prop or a ReactNode.
|
277
|
-
*/
|
278
|
-
children?: MaybeRenderProp<FormRenderContext<TFieldValues, TContext>>;
|
279
|
-
}
|
280
|
-
interface FormProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any> extends UseFormProps<TFieldValues, TContext>, Omit<HTMLChakraProps<'form'>, 'children' | 'onChange' | 'onSubmit' | 'onError'>, FormOptions<TFieldValues, TContext, TSchema> {
|
278
|
+
interface DisplayIfProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
|
279
|
+
children: React$1.ReactElement;
|
280
|
+
name: TName;
|
281
|
+
defaultValue?: unknown;
|
282
|
+
isDisabled?: boolean;
|
283
|
+
isExact?: boolean;
|
284
|
+
condition?: (value: unknown, context: UseFormReturn$1<TFieldValues>) => boolean;
|
281
285
|
}
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
286
|
+
/**
|
287
|
+
* Conditionally render parts of a form.
|
288
|
+
*
|
289
|
+
* @see Docs https://saas-ui.dev/docs/components/forms/form
|
290
|
+
*/
|
291
|
+
declare const DisplayIf: {
|
292
|
+
<TFieldValues extends FieldValues = FieldValues, TName extends react_hook_form.Path<TFieldValues> = react_hook_form.Path<TFieldValues>>({ children, name, defaultValue, isDisabled, isExact, condition, }: DisplayIfProps<TFieldValues, TName>): React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
|
293
|
+
displayName: string;
|
288
294
|
};
|
289
|
-
type GetResolver = <TFieldValues extends FieldValues, TContext extends object>(schema: any) => (values: TFieldValues, context: TContext | undefined, options: ResolverOptions<TFieldValues>) => Promise<ResolverResult<TFieldValues>>;
|
290
|
-
type GetFieldResolver = (schema: any) => FieldResolver;
|
291
|
-
interface CreateFormProps {
|
292
|
-
resolver?: GetResolver;
|
293
|
-
}
|
294
|
-
declare function createForm<Schema = any>({ resolver }: CreateFormProps): <TFieldValues extends FieldValues, TContext extends object = object, TSchema extends Schema = Schema>(props: FormProps<TFieldValues, TContext, TSchema>) => JSX.Element;
|
295
295
|
|
296
|
-
interface
|
297
|
-
/**
|
298
|
-
* The submit button label.
|
299
|
-
* Pass `null` to render no submit button.
|
300
|
-
*/
|
301
|
-
submitLabel?: React$1.ReactNode;
|
302
|
-
/**
|
303
|
-
* The schema.
|
304
|
-
* Supports object schema, Zod, Yup or Ajv (JSON Schema).
|
305
|
-
* @see https://www.saas-ui.dev/docs/forms/auto-form
|
306
|
-
*/
|
307
|
-
schema: any;
|
308
|
-
/**
|
309
|
-
* The field resolver.
|
310
|
-
*/
|
311
|
-
fieldResolver?: any;
|
312
|
-
}
|
313
|
-
interface AutoFormProps<TFieldValues extends FieldValues, TContext extends object = object> extends Omit<FormProps<TFieldValues, TContext>, 'schema' | 'children'>, AutoFormOptions {
|
314
|
-
children?: React$1.ReactNode;
|
296
|
+
interface FormLayoutProps extends SimpleGridProps {
|
315
297
|
}
|
316
|
-
declare const AutoForm: _chakra_ui_system_dist_system_types.ComponentWithAs<_chakra_ui_system_dist_system_types.As<any>, AutoFormProps<FieldValues, object>>;
|
317
|
-
|
318
|
-
type FormLayoutProps = SimpleGridProps;
|
319
298
|
/**
|
320
|
-
*
|
299
|
+
* Create consistent field spacing and positioning.
|
300
|
+
*
|
321
301
|
*
|
322
302
|
* Renders form items in a `SimpleGrid`
|
323
303
|
* @see https://chakra-ui.com/docs/layout/simple-grid
|
304
|
+
*
|
305
|
+
* @see https://saas-ui.dev/docs/components/forms/form
|
324
306
|
*/
|
325
307
|
declare const FormLayout: {
|
326
308
|
({ children, ...props }: FormLayoutProps): JSX.Element;
|
327
309
|
displayName: string;
|
328
310
|
};
|
329
311
|
|
330
|
-
interface SubmitButtonProps extends ButtonProps {
|
331
|
-
/**
|
332
|
-
* Disable the submit button if the form is untouched.
|
333
|
-
*
|
334
|
-
* Change the default behavior by updating
|
335
|
-
* `SubmitButton.defaultProps.disableIfUntouched`
|
336
|
-
*/
|
337
|
-
disableIfUntouched?: boolean;
|
338
|
-
/**
|
339
|
-
* Disable the submit button if the form is invalid.
|
340
|
-
*
|
341
|
-
* Change the default behavior by updating
|
342
|
-
* `SubmitButton.defaultProps.disableIfInvalid`
|
343
|
-
*/
|
344
|
-
disableIfInvalid?: boolean;
|
345
|
-
}
|
346
|
-
declare const SubmitButton: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", SubmitButtonProps>;
|
347
|
-
|
348
312
|
interface UseArrayFieldReturn extends UseFieldArrayReturn {
|
349
313
|
/**
|
350
314
|
* The array field name
|
@@ -389,11 +353,11 @@ interface UseArrayFieldRowReturn {
|
|
389
353
|
}
|
390
354
|
declare const ArrayFieldRowProvider: React$1.Provider<UseArrayFieldRowReturn>;
|
391
355
|
declare const useArrayFieldRowContext: () => UseArrayFieldRowReturn;
|
392
|
-
interface ArrayFieldOptions {
|
356
|
+
interface ArrayFieldOptions<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
|
393
357
|
/**
|
394
358
|
* The field name
|
395
359
|
*/
|
396
|
-
name:
|
360
|
+
name: TName;
|
397
361
|
/**
|
398
362
|
* Default value for new values in the array
|
399
363
|
*/
|
@@ -413,12 +377,12 @@ declare const useArrayField: ({ name, defaultValue, keyName, min, max, }: ArrayF
|
|
413
377
|
max: number | undefined;
|
414
378
|
swap: react_hook_form.UseFieldArraySwap;
|
415
379
|
move: react_hook_form.UseFieldArrayMove;
|
416
|
-
prepend: react_hook_form.UseFieldArrayPrepend<
|
417
|
-
append: react_hook_form.UseFieldArrayAppend<
|
380
|
+
prepend: react_hook_form.UseFieldArrayPrepend<FieldValues, string>;
|
381
|
+
append: react_hook_form.UseFieldArrayAppend<FieldValues, string>;
|
418
382
|
remove: react_hook_form.UseFieldArrayRemove;
|
419
|
-
insert: react_hook_form.UseFieldArrayInsert<
|
420
|
-
update: react_hook_form.UseFieldArrayUpdate<
|
421
|
-
replace: react_hook_form.UseFieldArrayReplace<
|
383
|
+
insert: react_hook_form.UseFieldArrayInsert<FieldValues, string>;
|
384
|
+
update: react_hook_form.UseFieldArrayUpdate<FieldValues, string>;
|
385
|
+
replace: react_hook_form.UseFieldArrayReplace<FieldValues, string>;
|
422
386
|
fields: Record<string, string>[];
|
423
387
|
};
|
424
388
|
interface UseArrayFieldRowProps {
|
@@ -460,6 +424,11 @@ interface ArrayFieldRowProps extends FormLayoutProps {
|
|
460
424
|
*/
|
461
425
|
children: React$1.ReactNode;
|
462
426
|
}
|
427
|
+
/**
|
428
|
+
* Render prop component, to get access to the internal fields state. Must be a child of ArrayFieldContainer.
|
429
|
+
*
|
430
|
+
* @see Docs https://saas-ui.dev/docs/components/forms/array-field
|
431
|
+
*/
|
463
432
|
declare const ArrayFieldRow: React$1.FC<ArrayFieldRowProps>;
|
464
433
|
interface ArrayFieldRowFieldsProps extends FormLayoutProps {
|
465
434
|
/**
|
@@ -475,16 +444,42 @@ interface ArrayFieldRowFieldsProps extends FormLayoutProps {
|
|
475
444
|
*/
|
476
445
|
children: React$1.ReactNode;
|
477
446
|
}
|
447
|
+
/**
|
448
|
+
* Add the name prefix to the fields and acts as a horizontal form layout by default.
|
449
|
+
*
|
450
|
+
* @see Docs https://saas-ui.dev/docs/components/forms/array-field
|
451
|
+
*/
|
478
452
|
declare const ArrayFieldRowFields: React$1.FC<ArrayFieldRowFieldsProps>;
|
453
|
+
/**
|
454
|
+
* The row container component providers row context.
|
455
|
+
*
|
456
|
+
* @see Docs https://saas-ui.dev/docs/components/forms/array-field
|
457
|
+
*/
|
479
458
|
declare const ArrayFieldRowContainer: React$1.FC<ArrayFieldRowProps>;
|
459
|
+
/**
|
460
|
+
* The default remove button.
|
461
|
+
*
|
462
|
+
* @see Docs https://saas-ui.dev/docs/components/forms/array-field
|
463
|
+
*/
|
480
464
|
declare const ArrayFieldRemoveButton: React$1.FC<ArrayFieldButtonProps>;
|
465
|
+
/**
|
466
|
+
* The default add button.
|
467
|
+
*
|
468
|
+
* @see Docs https://saas-ui.dev/docs/components/forms/array-field
|
469
|
+
*/
|
481
470
|
declare const ArrayFieldAddButton: React$1.FC<ArrayFieldButtonProps>;
|
482
|
-
interface ArrayFieldProps extends ArrayFieldOptions, Omit<
|
471
|
+
interface ArrayFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends ArrayFieldOptions<TFieldValues, TName>, Omit<BaseFieldProps<TFieldValues, TName>, 'name' | 'defaultValue' | 'children'> {
|
472
|
+
children: MaybeRenderProp<ArrayField[]>;
|
483
473
|
}
|
484
474
|
interface ArrayField {
|
485
475
|
id: string;
|
486
476
|
[key: string]: unknown;
|
487
477
|
}
|
478
|
+
/**
|
479
|
+
* The wrapper component that composes the default ArrayField functionality.
|
480
|
+
*
|
481
|
+
* @see Docs https://saas-ui.dev/docs/components/forms/array-field
|
482
|
+
*/
|
488
483
|
declare const ArrayField: ((props: ArrayFieldProps & {
|
489
484
|
ref?: React$1.ForwardedRef<UseArrayFieldReturn>;
|
490
485
|
}) => React$1.ReactElement) & {
|
@@ -497,30 +492,131 @@ declare const ArrayFieldRows: {
|
|
497
492
|
({ children, }: ArrayFieldRowsProps): React$1.ReactElement | null;
|
498
493
|
displayName: string;
|
499
494
|
};
|
500
|
-
|
495
|
+
interface ArrayFieldContainerProps extends Omit<ArrayFieldProps, 'children'> {
|
496
|
+
children: React$1.ReactNode;
|
497
|
+
}
|
498
|
+
/**
|
499
|
+
* The container component provides context and state management.
|
500
|
+
*
|
501
|
+
* @see Docs https://saas-ui.dev/docs/components/forms/array-field
|
502
|
+
*/
|
503
|
+
declare const ArrayFieldContainer: React$1.ForwardRefExoticComponent<ArrayFieldContainerProps & React$1.RefAttributes<UseArrayFieldReturn>>;
|
501
504
|
|
502
|
-
interface ObjectFieldProps extends
|
503
|
-
name:
|
505
|
+
interface ObjectFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends BaseFieldProps {
|
506
|
+
name: TName;
|
504
507
|
children: React$1.ReactNode;
|
505
508
|
columns?: ResponsiveValue<number>;
|
506
509
|
spacing?: ResponsiveValue<string | number>;
|
507
510
|
}
|
508
511
|
declare const FormLegend: (props: FormLabelProps) => JSX.Element;
|
512
|
+
/**
|
513
|
+
* The object field component.
|
514
|
+
*
|
515
|
+
* @see Docs https://saas-ui.dev/docs/components/forms/object-field
|
516
|
+
*/
|
509
517
|
declare const ObjectField: React$1.FC<ObjectFieldProps>;
|
510
518
|
|
511
|
-
interface
|
512
|
-
|
519
|
+
interface FormRenderContext<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseFormReturn$1<TFieldValues, TContext> {
|
520
|
+
Field: React$1.FC<TFieldTypes>;
|
521
|
+
DisplayIf: React$1.FC<DisplayIfProps<TFieldValues>>;
|
522
|
+
ArrayField: React$1.FC<ArrayFieldProps<TFieldValues>>;
|
523
|
+
ObjectField: React$1.FC<ObjectFieldProps<TFieldValues>>;
|
524
|
+
}
|
525
|
+
interface FormOptions<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>> {
|
526
|
+
/**
|
527
|
+
* The form schema.
|
528
|
+
*/
|
529
|
+
schema?: TSchema;
|
530
|
+
/**
|
531
|
+
* Triggers when any of the field change.
|
532
|
+
*/
|
533
|
+
onChange?: WatchObserver<TFieldValues>;
|
534
|
+
/**
|
535
|
+
* The submit handler.
|
536
|
+
*/
|
537
|
+
onSubmit: SubmitHandler<TFieldValues>;
|
538
|
+
/**
|
539
|
+
* Triggers when there are validation errors.
|
540
|
+
*/
|
541
|
+
onError?: SubmitErrorHandler<TFieldValues>;
|
542
|
+
/**
|
543
|
+
* The Hook Form state ref.
|
544
|
+
*/
|
545
|
+
formRef?: React$1.RefObject<UseFormReturn$1<TFieldValues, TContext>>;
|
546
|
+
/**
|
547
|
+
* The form children, can be a render prop or a ReactNode.
|
548
|
+
*/
|
549
|
+
children?: MaybeRenderProp<FormRenderContext<TFieldValues, TContext, TFieldTypes>>;
|
550
|
+
/**
|
551
|
+
* The field resolver, used to resolve the fields from schemas.
|
552
|
+
*/
|
553
|
+
fieldResolver?: FieldResolver;
|
554
|
+
/**
|
555
|
+
* Field overrides
|
556
|
+
*/
|
557
|
+
fields?: DefaultFieldOverrides;
|
558
|
+
}
|
559
|
+
interface FormProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>> extends UseFormProps<TFieldValues, TContext>, Omit<HTMLChakraProps<'form'>, 'children' | 'onChange' | 'onSubmit' | 'onError'>, FormOptions<TFieldValues, TContext, TSchema, TFieldTypes> {
|
560
|
+
}
|
561
|
+
/**
|
562
|
+
* The wrapper component provides context, state, and focus management.
|
563
|
+
*
|
564
|
+
* @see Docs https://saas-ui.dev/docs/components/forms/form
|
565
|
+
*/
|
566
|
+
declare const Form$1: (<TFieldValues extends FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>>(props: FormProps<TFieldValues, TContext, TSchema, TFieldTypes> & {
|
567
|
+
ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
|
568
|
+
}) => React$1.ReactElement) & {
|
569
|
+
displayName?: string | undefined;
|
570
|
+
};
|
571
|
+
type GetResolver = <TFieldValues extends FieldValues, TContext extends object>(schema: any) => (values: TFieldValues, context: TContext | undefined, options: ResolverOptions<TFieldValues>) => Promise<ResolverResult<TFieldValues>>;
|
572
|
+
|
573
|
+
interface DisplayFieldProps extends FormControlProps, Omit<FieldProps, 'type' | 'label'> {
|
574
|
+
}
|
575
|
+
/**
|
576
|
+
*
|
577
|
+
*
|
578
|
+
* @see Docs https://saas-ui.dev/
|
579
|
+
*/
|
580
|
+
declare const DisplayField: React$1.FC<DisplayFieldProps>;
|
581
|
+
declare const FormValue: React$1.FC<{
|
513
582
|
name: string;
|
514
|
-
|
515
|
-
|
516
|
-
|
517
|
-
|
583
|
+
}>;
|
584
|
+
|
585
|
+
interface Option {
|
586
|
+
value: string;
|
587
|
+
label?: string;
|
588
|
+
[key: string]: unknown;
|
518
589
|
}
|
519
|
-
|
520
|
-
|
521
|
-
|
590
|
+
type FieldRules = Pick<RegisterOptions, 'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'>;
|
591
|
+
/**
|
592
|
+
* Form field component.
|
593
|
+
*
|
594
|
+
* Build-in types:
|
595
|
+
* text, number, password, textarea, select, native-select, checkbox, radio, switch, pin
|
596
|
+
*
|
597
|
+
* Will default to a text field if there is no matching type.
|
598
|
+
|
599
|
+
* @see Docs https://saas-ui.dev/docs/components/forms/field
|
600
|
+
*/
|
601
|
+
declare const Field: (<TFieldValues extends FieldValues>(props: FieldProps<TFieldValues> & {
|
602
|
+
ref?: React$1.ForwardedRef<FocusableElement> | undefined;
|
603
|
+
}) => React$1.ReactElement) & {
|
604
|
+
displayName?: string | undefined;
|
522
605
|
};
|
523
606
|
|
607
|
+
interface FieldsProps<TSchema = any> {
|
608
|
+
schema?: TSchema;
|
609
|
+
fieldResolver?: FieldResolver;
|
610
|
+
focusFirstField?: boolean;
|
611
|
+
}
|
612
|
+
declare const AutoFields: React$1.FC<FieldsProps>;
|
613
|
+
|
614
|
+
declare const FieldsProvider: React__default.FC<{
|
615
|
+
value: Record<string, React__default.FC<any>>;
|
616
|
+
children: React__default.ReactNode;
|
617
|
+
}>;
|
618
|
+
declare const useField: (type: string) => React__default.FC<any>;
|
619
|
+
|
524
620
|
interface StepState {
|
525
621
|
name: string;
|
526
622
|
schema?: any;
|
@@ -560,6 +656,11 @@ declare function useFormStep(props: UseFormStepProps): StepState;
|
|
560
656
|
|
561
657
|
interface StepFormProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object> extends UseStepFormProps<TFieldValues> {
|
562
658
|
}
|
659
|
+
/**
|
660
|
+
* The wrapper component provides context, state, and focus management.
|
661
|
+
*
|
662
|
+
* @see Docs https://saas-ui.dev/docs/components/forms/step-form
|
663
|
+
*/
|
563
664
|
declare const StepForm: <TFieldValues extends FieldValues>(props: StepFormProps<TFieldValues, object> & {
|
564
665
|
ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
|
565
666
|
}) => React$1.ReactElement;
|
@@ -579,18 +680,70 @@ interface FormStepOptions {
|
|
579
680
|
}
|
580
681
|
interface FormStepperProps extends StepperStepsProps, ThemingProps<'Stepper'> {
|
581
682
|
}
|
683
|
+
/**
|
684
|
+
* Renders a stepper that displays progress above the form.
|
685
|
+
*
|
686
|
+
* @see Docs https://saas-ui.dev/docs/components/forms/step-form
|
687
|
+
*/
|
582
688
|
declare const FormStepper: React$1.FC<FormStepperProps>;
|
583
689
|
interface FormStepProps extends FormStepOptions, Omit<HTMLChakraProps<'div'>, 'onSubmit'> {
|
584
690
|
onSubmit?: FormStepSubmitHandler;
|
585
691
|
}
|
692
|
+
/**
|
693
|
+
* The form step containing fields for a specific step.
|
694
|
+
*
|
695
|
+
* @see Docs https://saas-ui.dev/docs/components/forms/step-form
|
696
|
+
*/
|
586
697
|
declare const FormStep: React$1.FC<FormStepProps>;
|
698
|
+
/**
|
699
|
+
* A button that this opens the previous step when clicked. Disabled on the first step.
|
700
|
+
*
|
701
|
+
* @see Docs https://saas-ui.dev/docs/components/forms/step-form
|
702
|
+
*/
|
587
703
|
declare const PrevButton: React$1.FC<ButtonProps>;
|
588
704
|
interface NextButtonProps extends Omit<ButtonProps, 'children'> {
|
589
705
|
submitLabel?: string;
|
590
706
|
label?: string;
|
591
707
|
}
|
708
|
+
/**
|
709
|
+
* A button that submits the active step.
|
710
|
+
*
|
711
|
+
* @see Docs https://saas-ui.dev/docs/components/forms/step-form
|
712
|
+
*/
|
592
713
|
declare const NextButton: React$1.FC<NextButtonProps>;
|
593
714
|
|
715
|
+
type FormProviderProps<TFieldValues extends FieldValues = FieldValues, TContext = any, TSchema = any> = FormProviderProps$1<TFieldValues, TContext> & {
|
716
|
+
fieldResolver?: FieldResolver;
|
717
|
+
schema?: TSchema;
|
718
|
+
fields?: {
|
719
|
+
[key: string]: unknown;
|
720
|
+
};
|
721
|
+
};
|
722
|
+
declare const useFormContext: <TFieldValues extends FieldValues = FieldValues, TContext = any, TSchema = any>() => {
|
723
|
+
fieldResolver?: FieldResolver | undefined;
|
724
|
+
schema?: any;
|
725
|
+
fields?: {
|
726
|
+
[key: string]: unknown;
|
727
|
+
} | undefined;
|
728
|
+
watch: react_hook_form.UseFormWatch<FieldValues>;
|
729
|
+
getValues: react_hook_form.UseFormGetValues<FieldValues>;
|
730
|
+
getFieldState: react_hook_form.UseFormGetFieldState<FieldValues>;
|
731
|
+
setError: react_hook_form.UseFormSetError<FieldValues>;
|
732
|
+
clearErrors: react_hook_form.UseFormClearErrors<FieldValues>;
|
733
|
+
setValue: react_hook_form.UseFormSetValue<FieldValues>;
|
734
|
+
trigger: react_hook_form.UseFormTrigger<FieldValues>;
|
735
|
+
formState: react_hook_form.FormState<FieldValues>;
|
736
|
+
resetField: react_hook_form.UseFormResetField<FieldValues>;
|
737
|
+
reset: react_hook_form.UseFormReset<FieldValues>;
|
738
|
+
handleSubmit: react_hook_form.UseFormHandleSubmit<FieldValues>;
|
739
|
+
unregister: react_hook_form.UseFormUnregister<FieldValues>;
|
740
|
+
control: react_hook_form.Control<FieldValues, any>;
|
741
|
+
register: react_hook_form.UseFormRegister<FieldValues>;
|
742
|
+
setFocus: react_hook_form.UseFormSetFocus<FieldValues>;
|
743
|
+
};
|
744
|
+
type UseFormReturn<TFieldValues extends FieldValues = FieldValues, TContext = any, TSchema = any> = ReturnType<typeof useFormContext>;
|
745
|
+
declare const FormProvider: <TFieldValues extends FieldValues = FieldValues, TContext = any, TSchema = any>(props: FormProviderProps<TFieldValues, TContext, TSchema>) => JSX.Element;
|
746
|
+
|
594
747
|
interface WatchFieldProps<Value = unknown, TFieldValues extends FieldValues = FieldValues> {
|
595
748
|
name: string;
|
596
749
|
defaultValue?: Value;
|
@@ -603,4 +756,52 @@ declare const WatchField: <Value = unknown, TFieldValues extends FieldValues = F
|
|
603
756
|
type InputRightButtonProps = ButtonProps;
|
604
757
|
declare const InputRightButton: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", ButtonProps>;
|
605
758
|
|
606
|
-
|
759
|
+
/**
|
760
|
+
* The default BaseField component
|
761
|
+
* Composes the Chakra UI FormControl component, with FormLabel, FormHelperText and FormErrorMessage.
|
762
|
+
*/
|
763
|
+
declare const BaseField: React$1.FC<BaseFieldProps>;
|
764
|
+
|
765
|
+
interface CreateFormProps<FieldDefs> {
|
766
|
+
resolver?: GetResolver;
|
767
|
+
fieldResolver?: GetFieldResolver;
|
768
|
+
fields?: FieldDefs extends Record<string, React__default.FC<any>> ? FieldDefs : never;
|
769
|
+
}
|
770
|
+
declare function createForm<FieldDefs, Schema = any>({ resolver, fieldResolver, fields, }?: CreateFormProps<FieldDefs>): (<TFieldValues extends FieldValues, TContext extends object = object, TSchema extends Schema = Schema>(props: Omit<FormProps<TFieldValues, TContext, TSchema, FieldProps<TFieldValues>>, "children" | "fields"> & {
|
771
|
+
children?: FormChildren<FieldDefs, TFieldValues, TContext>;
|
772
|
+
fields?: (FieldOverrides<FieldDefs, TFieldValues, react_hook_form.Path<TFieldValues>> & {
|
773
|
+
submit?: SubmitButtonProps | undefined;
|
774
|
+
}) | undefined;
|
775
|
+
} & {
|
776
|
+
ref?: React__default.ForwardedRef<HTMLFormElement> | undefined;
|
777
|
+
}) => React__default.ReactElement) & {
|
778
|
+
displayName?: string | undefined;
|
779
|
+
};
|
780
|
+
|
781
|
+
interface CreateFieldOptions {
|
782
|
+
isControlled?: boolean;
|
783
|
+
hideLabel?: boolean;
|
784
|
+
BaseField?: React$1.FC<any>;
|
785
|
+
}
|
786
|
+
/**
|
787
|
+
* Register a new field type
|
788
|
+
* @param type The name for this field in kebab-case, eg `email` or `array-field`
|
789
|
+
* @param component The React component
|
790
|
+
* @param options
|
791
|
+
* @param options.isControlled Set this to true if this is a controlled field.
|
792
|
+
* @param options.hideLabel Hide the field label, for example for the checkbox field.
|
793
|
+
*/
|
794
|
+
declare const createField: <TProps extends object>(component: React$1.FC<TProps>, options?: CreateFieldOptions) => React$1.FC<TProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
|
795
|
+
|
796
|
+
declare const Form: (<TFieldValues extends react_hook_form.FieldValues, TContext extends object = object, TSchema extends any = any>(props: Omit<FormProps<TFieldValues, TContext, TSchema, FieldProps<TFieldValues>>, "children" | "fields"> & {
|
797
|
+
children?: FormChildren<unknown, TFieldValues, TContext>;
|
798
|
+
fields?: (FieldOverrides<unknown, TFieldValues, react_hook_form.Path<TFieldValues>> & {
|
799
|
+
submit?: SubmitButtonProps | undefined;
|
800
|
+
}) | undefined;
|
801
|
+
} & {
|
802
|
+
ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
|
803
|
+
}) => React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>>) & {
|
804
|
+
displayName?: string | undefined;
|
805
|
+
};
|
806
|
+
|
807
|
+
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, DefaultFields, DisplayField, DisplayFieldProps, DisplayIf, DisplayIfProps, Field, FieldOptions, FieldProps, FieldResolver, FieldRules, FieldsProps, FieldsProvider, Form, FormLayout, FormLayoutProps, FormLegend, FormProps, FormProvider, FormRenderContext, FormStep, FormStepOptions, FormStepProps, FormStepSubmitHandler, FormStepper, FormStepperProps, 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, SubmitButton, SubmitButtonProps, SwitchField, TextareaField, UseArrayFieldReturn, UseArrayFieldRowProps, UseArrayFieldRowReturn, UseFormStepProps, UseStepFormProps, UseStepFormReturn, WatchField, WatchFieldProps, WithFields, createField, createForm, defaultFieldTypes, objectFieldResolver, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useField, useFormContext, useFormStep, useStepForm, useStepFormContext };
|