@saas-ui/forms 1.0.0-rc.6 → 1.0.0-rc.9
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +37 -0
- package/README.md +29 -0
- package/dist/ajv/index.js +95 -95
- package/dist/ajv/index.js.map +1 -1
- package/dist/ajv/index.modern.mjs +94 -94
- package/dist/ajv/index.modern.mjs.map +1 -1
- package/dist/array-field.d.ts +14 -3
- package/dist/array-field.d.ts.map +1 -1
- package/dist/field.d.ts +81 -26
- package/dist/field.d.ts.map +1 -1
- package/dist/form.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.modern.mjs +1 -1
- package/dist/index.modern.mjs.map +1 -1
- package/dist/step-form.d.ts +1 -2
- package/dist/step-form.d.ts.map +1 -1
- package/dist/use-step-form.d.ts +2 -1
- package/dist/use-step-form.d.ts.map +1 -1
- package/package.json +10 -10
- package/src/array-field.tsx +21 -22
- package/src/field.tsx +185 -70
- package/src/form.tsx +0 -1
- package/src/step-form.tsx +7 -3
- package/src/submit-button.tsx +1 -1
- package/src/use-step-form.tsx +2 -4
package/dist/array-field.d.ts
CHANGED
@@ -1,13 +1,14 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { ResponsiveValue } from '@chakra-ui/system';
|
3
3
|
import { ButtonProps } from '@saas-ui/button';
|
4
|
+
import { FormLayoutProps } from './layout';
|
4
5
|
import { FieldProps } from './field';
|
5
6
|
import { ArrayFieldOptions, UseArrayFieldReturn } from './use-array-field';
|
6
7
|
interface ArrayField {
|
7
8
|
id: string;
|
8
9
|
[key: string]: unknown;
|
9
10
|
}
|
10
|
-
interface ArrayFieldRowProps {
|
11
|
+
interface ArrayFieldRowProps extends FormLayoutProps {
|
11
12
|
/**
|
12
13
|
* Amount of field columns
|
13
14
|
*/
|
@@ -20,10 +21,13 @@ interface ArrayFieldRowProps {
|
|
20
21
|
* The array index
|
21
22
|
*/
|
22
23
|
index: number;
|
24
|
+
/**
|
25
|
+
* The fields
|
26
|
+
*/
|
23
27
|
children: React.ReactNode;
|
24
28
|
}
|
25
29
|
export declare const ArrayFieldRow: React.FC<ArrayFieldRowProps>;
|
26
|
-
export interface ArrayFieldRowFieldsProps {
|
30
|
+
export interface ArrayFieldRowFieldsProps extends FormLayoutProps {
|
27
31
|
/**
|
28
32
|
* Amount of field columns
|
29
33
|
*/
|
@@ -32,6 +36,9 @@ export interface ArrayFieldRowFieldsProps {
|
|
32
36
|
* Spacing between fields
|
33
37
|
*/
|
34
38
|
spacing?: ResponsiveValue<string | number>;
|
39
|
+
/**
|
40
|
+
* The fields
|
41
|
+
*/
|
35
42
|
children: React.ReactNode;
|
36
43
|
}
|
37
44
|
export declare const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps>;
|
@@ -40,7 +47,11 @@ export declare const ArrayFieldRemoveButton: React.FC<ButtonProps>;
|
|
40
47
|
export declare const ArrayFieldAddButton: React.FC<ButtonProps>;
|
41
48
|
export interface ArrayFieldProps extends ArrayFieldOptions, Omit<FieldProps, 'defaultValue'> {
|
42
49
|
}
|
43
|
-
export declare const ArrayField:
|
50
|
+
export declare const ArrayField: ((props: ArrayFieldProps & {
|
51
|
+
ref?: React.ForwardedRef<UseArrayFieldReturn>;
|
52
|
+
}) => React.ReactElement) & {
|
53
|
+
displayName: string;
|
54
|
+
};
|
44
55
|
export interface ArrayFieldRowsProps {
|
45
56
|
children: (fields: ArrayField[]) => React.ReactElement | null;
|
46
57
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"array-field.d.ts","sourceRoot":"","sources":["../src/array-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAU,eAAe,
|
1
|
+
{"version":3,"file":"array-field.d.ts","sourceRoot":"","sources":["../src/array-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAU,eAAe,EAAc,MAAM,mBAAmB,CAAA;AAGvE,OAAO,EAAc,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAEzD,OAAO,EAAc,eAAe,EAAE,MAAM,UAAU,CAAA;AACtD,OAAO,EAAa,UAAU,EAAE,MAAM,SAAS,CAAA;AAI/C,OAAO,EAKL,iBAAiB,EAKjB,mBAAmB,EACpB,MAAM,mBAAmB,CAAA;AAE1B,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED,UAAU,kBAAmB,SAAQ,eAAe;IAClD;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IAC1C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAWtD,CAAA;AAMD,MAAM,WAAW,wBAAyB,SAAQ,eAAe;IAC/D;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IAC1C;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAUlE,CAAA;AAMD,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmB/D,CAAA;AAMD,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CASxD,CAAA;AAMD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAUrD,CAAA;AAMD,MAAM,WAAW,eACf,SAAQ,iBAAiB,EACvB,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC;CAAG;AAEvC,eAAO,MAAM,UAAU,WAsBd,eAAe,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,YAAY,CAAC,mBAAmB,CAAC,CAAA;CAC9C,KACE,MAAM,YAAY;iBACR,MAAM;CACpB,CAAA;AAMD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;CAC9D;AAED,eAAO,MAAM,cAAc;oBAExB,mBAAmB,GAAG,MAAM,YAAY,GAAG,IAAI;;CAGjD,CAAA;AAMD,eAAO,MAAM,mBAAmB,6FAgC/B,CAAA"}
|
package/dist/field.d.ts
CHANGED
@@ -1,6 +1,10 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { RegisterOptions, FieldValues, FieldPath } from 'react-hook-form';
|
3
|
-
import { FormControlProps } from '@chakra-ui/react';
|
3
|
+
import { FormControlProps, InputProps, TextareaProps, SwitchProps, CheckboxProps, UsePinInputProps, SystemProps } from '@chakra-ui/react';
|
4
|
+
import { NumberInputProps } from '@saas-ui/number-input';
|
5
|
+
import { PasswordInputProps } from '@saas-ui/password-input';
|
6
|
+
import { RadioInputProps } from '@saas-ui/radio';
|
7
|
+
import { SelectProps, NativeSelectProps } from '@saas-ui/select';
|
4
8
|
import { FocusableElement } from '@chakra-ui/utils';
|
5
9
|
export interface Option {
|
6
10
|
value: string;
|
@@ -8,7 +12,6 @@ export interface Option {
|
|
8
12
|
[key: string]: unknown;
|
9
13
|
}
|
10
14
|
export declare type FieldRules = Pick<RegisterOptions, 'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'>;
|
11
|
-
export declare type FieldTypes = 'text' | 'number' | 'password' | 'textarea' | 'select' | 'native-select' | 'checkbox' | 'radio' | 'switch' | 'pin' | string;
|
12
15
|
export interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<FormControlProps, 'label' | 'type'> {
|
13
16
|
/**
|
14
17
|
* The field name
|
@@ -31,11 +34,6 @@ export interface FieldProps<TFieldValues extends FieldValues = FieldValues, TNam
|
|
31
34
|
*/
|
32
35
|
rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
|
33
36
|
/**
|
34
|
-
* Options used for selects and radio fields
|
35
|
-
*/
|
36
|
-
options?: Option[];
|
37
|
-
/**
|
38
|
-
* The field type
|
39
37
|
* Build-in types:
|
40
38
|
* - text
|
41
39
|
* - number
|
@@ -49,22 +47,40 @@ export interface FieldProps<TFieldValues extends FieldValues = FieldValues, TNam
|
|
49
47
|
* - pin
|
50
48
|
*
|
51
49
|
* Will default to a text field if there is no matching type.
|
52
|
-
* @default 'text'
|
53
50
|
*/
|
54
|
-
type?:
|
51
|
+
type?: string;
|
55
52
|
/**
|
56
53
|
* The input placeholder
|
57
54
|
*/
|
58
55
|
placeholder?: string;
|
59
56
|
}
|
60
57
|
export declare const BaseField: React.FC<FieldProps>;
|
61
|
-
export declare
|
62
|
-
|
63
|
-
|
58
|
+
export declare type As<Props = any> = React.ElementType<Props>;
|
59
|
+
export declare type PropsOf<T extends As> = React.ComponentPropsWithoutRef<T> & {
|
60
|
+
type?: FieldTypes;
|
61
|
+
};
|
62
|
+
/**
|
63
|
+
* Build-in types:
|
64
|
+
* - text
|
65
|
+
* - number
|
66
|
+
* - password
|
67
|
+
* - textarea
|
68
|
+
* - select
|
69
|
+
* - native-select
|
70
|
+
* - checkbox
|
71
|
+
* - radio
|
72
|
+
* - switch
|
73
|
+
* - pin
|
74
|
+
*
|
75
|
+
* Will default to a text field if there is no matching type.
|
76
|
+
*/
|
77
|
+
export declare const Field: (<TFieldValues extends FieldValues>(props: FieldProps<TFieldValues, import("react-hook-form").Path<TFieldValues>> & FieldTypeProps & {
|
64
78
|
ref?: React.ForwardedRef<FocusableElement> | undefined;
|
65
|
-
}) => React.ReactElement
|
66
|
-
|
67
|
-
|
79
|
+
}) => React.ReactElement) & {
|
80
|
+
displayName?: string | undefined;
|
81
|
+
};
|
82
|
+
export declare const withControlledInput: (InputComponent: React.FC<any>) => import("@chakra-ui/react").ComponentWithAs<React.FC<any>, FieldProps<FieldValues, string>>;
|
83
|
+
export declare const withUncontrolledInput: (InputComponent: React.FC<any>) => import("@chakra-ui/react").ComponentWithAs<React.FC<any>, FieldProps<FieldValues, string>>;
|
68
84
|
export interface RegisterFieldTypeOptions {
|
69
85
|
isControlled?: boolean;
|
70
86
|
hideLabel?: boolean;
|
@@ -78,15 +94,54 @@ export interface RegisterFieldTypeOptions {
|
|
78
94
|
* @param options.isControlled Set this to true if this is a controlled field.
|
79
95
|
* @param options.hideLabel Hide the field label, for example for the checkbox field.
|
80
96
|
*/
|
81
|
-
export declare const registerFieldType: (type: string, component: React.FC<
|
82
|
-
export
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
export declare const
|
88
|
-
export
|
89
|
-
|
90
|
-
|
91
|
-
export declare const
|
97
|
+
export declare const registerFieldType: <T extends object>(type: string, component: React.FC<T>, options?: RegisterFieldTypeOptions) => React.FC<T & FieldProps<FieldValues, string>>;
|
98
|
+
export interface InputFieldProps extends InputProps {
|
99
|
+
type?: string;
|
100
|
+
leftAddon?: React.ReactNode;
|
101
|
+
rightAddon?: React.ReactNode;
|
102
|
+
}
|
103
|
+
export declare const InputField: React.FC<InputFieldProps & FieldProps<FieldValues, string>>;
|
104
|
+
export interface NumberInputFieldProps extends NumberInputProps {
|
105
|
+
type: 'number';
|
106
|
+
}
|
107
|
+
export declare const NumberInputField: React.FC<NumberInputFieldProps & FieldProps<FieldValues, string>>;
|
108
|
+
export declare const PasswordInputField: React.FC<PasswordInputProps & FieldProps<FieldValues, string>>;
|
109
|
+
export declare const TextareaField: React.FC<TextareaProps & FieldProps<FieldValues, string>>;
|
110
|
+
export declare const SwitchField: React.FC<SwitchProps & FieldProps<FieldValues, string>>;
|
111
|
+
export declare const SelectField: React.FC<SelectProps & FieldProps<FieldValues, string>>;
|
112
|
+
export declare const CheckboxField: React.FC<CheckboxProps & FieldProps<FieldValues, string>>;
|
113
|
+
export declare const RadioField: React.FC<RadioInputProps & FieldProps<FieldValues, string>>;
|
114
|
+
export declare const NativeSelectField: React.FC<NativeSelectProps & FieldProps<FieldValues, string>>;
|
115
|
+
export interface PinFieldProps extends Omit<UsePinInputProps, 'type'> {
|
116
|
+
pinLength?: number;
|
117
|
+
pinType?: 'alphanumeric' | 'number';
|
118
|
+
spacing?: SystemProps['margin'];
|
119
|
+
}
|
120
|
+
export declare const PinField: React.FC<PinFieldProps & FieldProps<FieldValues, string>>;
|
121
|
+
declare const fieldTypes: {
|
122
|
+
text: React.FC<InputFieldProps & FieldProps<FieldValues, string>>;
|
123
|
+
email: React.FC<InputFieldProps & FieldProps<FieldValues, string>>;
|
124
|
+
url: React.FC<InputFieldProps & FieldProps<FieldValues, string>>;
|
125
|
+
phone: React.FC<InputFieldProps & FieldProps<FieldValues, string>>;
|
126
|
+
number: React.FC<NumberInputFieldProps & FieldProps<FieldValues, string>>;
|
127
|
+
password: React.FC<PasswordInputProps & FieldProps<FieldValues, string>>;
|
128
|
+
textarea: React.FC<TextareaProps & FieldProps<FieldValues, string>>;
|
129
|
+
switch: React.FC<SwitchProps & FieldProps<FieldValues, string>>;
|
130
|
+
checkbox: React.FC<CheckboxProps & FieldProps<FieldValues, string>>;
|
131
|
+
radio: React.FC<RadioInputProps & FieldProps<FieldValues, string>>;
|
132
|
+
pin: React.FC<PinFieldProps & FieldProps<FieldValues, string>>;
|
133
|
+
select: React.FC<SelectProps & FieldProps<FieldValues, string>>;
|
134
|
+
'native-select': React.FC<NativeSelectProps & FieldProps<FieldValues, string>>;
|
135
|
+
};
|
136
|
+
declare type FieldTypes = typeof fieldTypes;
|
137
|
+
declare type FieldType<Props = any> = React.ElementType<Props>;
|
138
|
+
declare type TypeProps<P extends FieldType, T> = React.ComponentPropsWithoutRef<P> & {
|
139
|
+
type: T;
|
140
|
+
};
|
141
|
+
declare type FieldTypeProps = {
|
142
|
+
[Property in keyof FieldTypes]: TypeProps<FieldTypes[Property], Property>;
|
143
|
+
}[keyof FieldTypes] | {
|
144
|
+
type?: string;
|
145
|
+
};
|
146
|
+
export {};
|
92
147
|
//# sourceMappingURL=field.d.ts.map
|
package/dist/field.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../src/field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAKL,eAAe,EACf,WAAW,EACX,SAAS,EACV,MAAM,iBAAiB,CAAA;AAExB,OAAO,EAIL,gBAAgB,
|
1
|
+
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../src/field.tsx"],"names":[],"mappings":"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"}
|
package/dist/form.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../src/form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAU,eAAe,EAAc,MAAM,kBAAkB,CAAA;AAGtE,OAAO,EAGL,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,iBAAiB,EACjB,eAAe,EACf,cAAc,EACf,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAuB,aAAa,EAAE,MAAM,kBAAkB,CAAA;
|
1
|
+
{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../src/form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAU,eAAe,EAAc,MAAM,kBAAkB,CAAA;AAGtE,OAAO,EAGL,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,iBAAiB,EACjB,eAAe,EACf,cAAc,EACf,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAuB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAErE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,CAAA;AAEzD,UAAU,WAAW,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW;IAClE;;OAEG;IACH,MAAM,CAAC,EAAE,GAAG,CAAA;IACZ;;OAEG;IACH,QAAQ,EAAE,aAAa,CAAC,YAAY,CAAC,CAAA;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAA;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAA;CAClD;AAED;;;GAGG;AACH,MAAM,WAAW,SAAS,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CACvE,SAAQ,YAAY,CAAC,YAAY,CAAC,EAChC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,EACrD,WAAW,CAAC,YAAY,CAAC;CAAG;AAEhC,eAAO,MAAM,IAAI;;MA8DZ,MAAM,YAAY;;;sBAGH,gBAAgB;CACnC,CAAA;AAQD,oBAAY,WAAW,GAAG,CACxB,MAAM,EAAE,GAAG,KACR,CAAC,YAAY,SAAS,WAAW,EAAE,QAAQ,EAC9C,MAAM,EAAE,iBAAiB,CAAC,YAAY,CAAC,EACvC,OAAO,EAAE,QAAQ,GAAG,SAAS,EAC7B,OAAO,EAAE,eAAe,CAAC,YAAY,CAAC,KACnC,OAAO,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAA;AAE1C,oBAAY,gBAAgB,GAAG,CAAC,MAAM,EAAE,GAAG,KAAK,aAAa,CAAA"}
|
package/dist/index.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
var e=require("react"),r=require("@chakra-ui/utils"),t=require("react-hook-form"),n=require("@chakra-ui/react"),a=require("@saas-ui/number-input"),l=require("@saas-ui/password-input"),i=require("@saas-ui/radio"),o=require("@saas-ui/pin-input"),s=require("@saas-ui/select"),u=require("@chakra-ui/system"),d=require("@chakra-ui/icons"),m=require("@saas-ui/button"),c=require("@chakra-ui/react-utils"),p=require("@saas-ui/stepper"),f=require("@saas-ui/input-right-button");function v(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}}),r.default=e,r}var x=/*#__PURE__*/v(e);function h(){return h=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},h.apply(this,arguments)}function F(e,r){if(null==e)return{};var t,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)r.indexOf(t=l[n])>=0||(a[t]=e[t]);return a}var y=["name","label","placeholder"],b=function(e){var r=e.name,t=e.label,a=F(e,y);/*#__PURE__*/return x.createElement(n.FormControl,a,t?/*#__PURE__*/x.createElement(n.FormLabel,{htmlFor:r},t):null,/*#__PURE__*/x.createElement(n.Text,{fontSize:"md"},/*#__PURE__*/x.createElement(E,{name:r})))};r.__DEV__&&(b.displayName="DisplayField");var E=function(e){var r=e.name;return(0,t.useFormContext().getValues)(r)||null};r.__DEV__&&(E.displayName="FormValue");var _=["name","label","help","variant","hideLabel","children"],C=["id","name","label","help","isDisabled","isInvalid","isReadOnly","isRequired","rules","variant"],g=["name","rules"],S=["ref"],N=["name","rules"],R=["ref"],V=["type"],w=["type"],D=["label","type"],k={},A=function(e){var r=e.name,a=e.label,l=e.help,i=e.variant,o=e.hideLabel,s=e.children,u=F(e,_),d=function(e,r){return t.get(r.errors,e)}(r,t.useFormContext().formState);/*#__PURE__*/return x.createElement(n.FormControl,h({variant:i},u,{isInvalid:!!d}),a&&!o?/*#__PURE__*/x.createElement(n.FormLabel,{variant:i},a):null,/*#__PURE__*/x.createElement(n.Box,null,s,!l||null!=d&&d.message?null:/*#__PURE__*/x.createElement(n.FormHelperText,null,l),(null==d?void 0:d.message)&&/*#__PURE__*/x.createElement(n.FormErrorMessage,null,null==d?void 0:d.message)))};r.__DEV__&&(A.displayName="BaseField");var I=n.forwardRef(function(e,r){var t=e.type;/*#__PURE__*/return x.createElement(k[void 0===t?"text":t]||k.text,h({ref:r},e))}),L=function(e){return n.forwardRef(function(r,a){var l=r.name,i=r.rules,o=F(r,g),s=t.useFormContext();/*#__PURE__*/return x.createElement(t.Controller,{name:l,control:s.control,rules:i,render:function(r){var t=r.field,l=t.ref,i=F(t,S);/*#__PURE__*/return x.createElement(e,h({},i,o,{ref:n.useMergeRefs(a,l)}))}})})},P=function(e){return n.forwardRef(function(r,a){var l=r.name,i=r.rules,o=F(r,N),s=(0,t.useFormContext().register)(l,i),u=s.ref,d=F(s,R);/*#__PURE__*/return x.createElement(e,h({},d,o,{ref:n.useMergeRefs(a,u)}))})},B=function(e,r,t){var a=function(e,r){var t=r.displayName,a=r.hideLabel,l=r.BaseField,i=n.forwardRef(function(r,t){var n=r.id,i=r.name,o=r.label,s=r.help,u=r.isDisabled,d=r.isInvalid,m=r.isReadOnly,c=r.isRequired,p=r.rules,f=r.variant,v=F(r,C),y=h({required:c},p);/*#__PURE__*/return x.createElement(l,{id:n,name:i,label:o,help:s,hideLabel:a,isDisabled:u,isInvalid:d,isReadOnly:m,isRequired:c,variant:f},/*#__PURE__*/x.createElement(e,h({ref:t,id:n,name:i,label:a?o:void 0,rules:y},v)))});return i.displayName=t,i}(null!=t&&t.isControlled?L(r):P(r),{displayName:e.split("-").map(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}).join("")+"Field",hideLabel:null==t?void 0:t.hideLabel,BaseField:(null==t?void 0:t.BaseField)||A});return k[e]=a,a},O=B("text",n.forwardRef(function(e,r){var t=e.type,a=void 0===t?"text":t,l=F(e,V);/*#__PURE__*/return x.createElement(n.Input,h({type:a},l,{ref:r}))})),j=B("number",a.NumberInput,{isControlled:!0}),q=B("password",l.PasswordInput),M=B("textarea",n.Textarea),U=B("switch",n.forwardRef(function(e,r){var t=F(e,w);/*#__PURE__*/return x.createElement(n.Switch,h({},t,{ref:r}))}),{isControlled:!0}),T=B("select",s.Select,{isControlled:!0}),H=B("checkbox",n.forwardRef(function(e,r){var t=e.label,a=F(e,D);/*#__PURE__*/return x.createElement(n.Checkbox,h({ref:r},a),t)}),{hideLabel:!0}),G=B("radio",i.RadioInput,{isControlled:!0}),z=B("pin",o.PinInput,{isControlled:!0}),W=B("native-select",s.NativeSelect,{isControlled:!0}),J=["items"],K=function(e){return e&&Object.entries(e).map(function(e){var r=e[0];return h({},F(e[1],J),{name:r})})},Q=function(e){return{getFields:function(){return K(e)},getNestedFields:function(t){var n,a=r.get(e,t);return a?"object"===(null==(n=a.items)?void 0:n.type)?K(a.items.properties):"object"===a.type?K(a.properties):[a.items]:[]}}},X=["mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","schema","defaultValues","onSubmit","onError","formRef","children"],Y=n.forwardRef(function(e,a){var l=e.mode,i=void 0===l?"all":l,o=e.resolver,s=e.reValidateMode,u=e.shouldFocusError,d=e.shouldUnregister,m=e.shouldUseNativeValidation,c=e.criteriaMode,p=e.delayError,f=e.schema,v=e.defaultValues,y=e.onSubmit,b=e.onError,E=e.formRef,_=e.children,C=F(e,X),g={mode:i,resolver:o,defaultValues:v,reValidateMode:s,shouldFocusError:u,shouldUnregister:d,shouldUseNativeValidation:m,criteriaMode:c,delayError:p};f&&!o&&(g.resolver=null==Y.getResolver?void 0:Y.getResolver(f));var S=t.useForm(g),N=S.handleSubmit;return x.useImperativeHandle(a,function(){return S},[a,S]),/*#__PURE__*/x.createElement(t.FormProvider,S,/*#__PURE__*/x.createElement(n.chakra.form,h({ref:E,onSubmit:N(y,b)},C,{className:r.cx("saas-form",e.className)}),_))});Y.getFieldResolver=Q,r.__DEV__&&(Y.displayName="Form");var Z=["children"],$=function(e){/*#__PURE__*/return x.createElement(n.chakra.div,null,e.children)};r.__DEV__&&($.displayName="FormLayoutItem");var ee=function(e){var t,a,l,i=e.children,o=F(e,Z),s=h({},null!=(t=null==(a=n.useTheme().components)||null==(l=a.FormLayout)?void 0:l.defaultProps)?t:{spacing:4},o);/*#__PURE__*/return x.createElement(n.SimpleGrid,h({},s,{className:r.cx("saas-form__layout",o.className)}),x.Children.map(i,function(e){return x.isValidElement(e)?/*#__PURE__*/x.createElement($,null,e):e}))};r.__DEV__&&(ee.displayName="FormLayout");var re=function(e,r){return x.Children.map(r,function(r){return x.isValidElement(r)&&r.props.name?x.cloneElement(r,h({},r.props,{name:e+"."+r.props.name})):r})},te=c.createContext({name:"ArrayFieldContext"}),ne=te[0],ae=te[1],le=c.createContext({name:"ArrayFieldRowContext"}),ie=le[0],oe=le[1],se=function(e){var r=e.name,n=e.defaultValue,a=void 0===n?{}:n,l=e.keyName,i=e.min,o=e.max,s=t.useFormContext();return h({},t.useFieldArray({control:s.control,name:r,keyName:l}),{name:r,defaultValue:a,min:i,max:o})},ue=function(e){var r=e.index,n=t.useFormContext().clearErrors,a=ae(),l=a.name,i=a.remove,o=a.fields;return x.useEffect(function(){n(l)},[]),{index:r,isFirst:0===r,isLast:r===o.length-1,name:l+"."+r,remove:x.useCallback(function(){n(l),i(r)},[r])}},de=function(){var e=oe(),r=e.isFirst,t=e.remove,n=ae(),a=n.min;return{onClick:function(){return t()},isDisabled:r&&!!(a&&n.fields.length<=a)}},me=function(){var e=ae(),r=e.append,t=e.defaultValue,n=e.max;return{onClick:function(){return r(t,{shouldFocus:!1})},isDisabled:!!(n&&e.fields.length>=n)}},ce=["children","columns","spacing"],pe=["children"],fe=["name","defaultValue","keyName","min","max","children"],ve=function(e){/*#__PURE__*/return x.createElement(he,{index:e.index},/*#__PURE__*/x.createElement(xe,{columns:e.columns,spacing:e.spacing},e.children),/*#__PURE__*/x.createElement(Fe,null))};r.__DEV__&&(ve.displayName="ArrayFieldRow");var xe=function(e){var r=e.children,t=e.columns,n=e.spacing,a=F(e,ce),l=oe().name;/*#__PURE__*/return x.createElement(ee,h({flex:"1",columns:t,gridGap:n,mr:"2"},a),re(l,r))};r.__DEV__&&(xe.displayName="ArrayFieldRowFields");var he=function(e){var r=e.children,t=ue({index:e.index});/*#__PURE__*/return x.createElement(ie,{value:t},/*#__PURE__*/x.createElement(u.chakra.div,{__css:{display:"flex",flexDirection:"row",alignItems:"flex-end",width:"100%",mb:4}},r))};r.__DEV__&&(he.displayName="ArrayFieldRowContainer");var Fe=function(e){/*#__PURE__*/return x.createElement(m.IconButton,h({icon:/*#__PURE__*/x.createElement(d.MinusIcon,null),"aria-label":"Remove row"},de(),e))};r.__DEV__&&(Fe.displayName="ArrayFieldRemoveButton");var ye=function(e){/*#__PURE__*/return x.createElement(m.IconButton,h({icon:/*#__PURE__*/x.createElement(d.AddIcon,null),"aria-label":"Add row",float:"right"},me(),e))};r.__DEV__&&(ye.displayName="ArrayFieldAddButton");var be=x.forwardRef(function(e,r){var t=e.children,n=F(e,pe);/*#__PURE__*/return x.createElement(_e,h({ref:r},n),/*#__PURE__*/x.createElement(Ee,null,function(e){/*#__PURE__*/return x.createElement(x.Fragment,null,e.map(function(e,r){/*#__PURE__*/return x.createElement(ve,{key:e.id,index:r},t)}))}),/*#__PURE__*/x.createElement(ye,null))});r.__DEV__&&(be.displayName="ArrayField");var Ee=function(e){return(0,e.children)(ae().fields)};r.__DEV__&&(Ee.displayName="ArrayFieldRows");var _e=x.forwardRef(function(e,r){var t=e.name,n=e.defaultValue,a=e.keyName,l=e.min,i=e.max,o=e.children,s=F(e,fe),u=se({name:t,defaultValue:n,keyName:a,min:l,max:i});return x.useImperativeHandle(r,function(){return u},[r,u]),/*#__PURE__*/x.createElement(ne,{value:u},/*#__PURE__*/x.createElement(A,h({name:t},s),o))});r.__DEV__&&(_e.displayName="ArrayFieldContainer");var Ce=["name","label","hideLabel","children","columns","spacing"],ge=function(e){var r=n.useStyleConfig("FormLegend");/*#__PURE__*/return x.createElement(n.FormLabel,h({as:"legend",sx:r},e))},Se=function(e){var r=e.name,t=e.label,a=e.hideLabel,l=e.children,i=e.columns,o=e.spacing,s=F(e,Ce);/*#__PURE__*/return x.createElement(n.FormControl,h({name:r,as:"fieldset"},s),/*#__PURE__*/x.createElement(ge,{display:a?"none":"block"},t),/*#__PURE__*/x.createElement(ee,{columns:i,gridGap:o},re(r,l)))};r.__DEV__&&(Se.displayName="ObjectField");var Ne=["name","type"],Re=["schema","fieldResolver"],Ve=["name","type","defaultValue"],we=function(e,r){var t;return null==(t=e.getNestedFields(r))?void 0:t.map(function(e,r){var t=e.name,n=e.type,a=F(e,Ne);/*#__PURE__*/return x.createElement(I,h({key:t||r,name:t,type:n},a))})},De=function(e){var r=e.schema,t=e.fieldResolver,n=F(e,Re),a=x.useMemo(function(){return t||Y.getFieldResolver(r)},[r,t]);/*#__PURE__*/return x.createElement(ee,n,a.getFields().map(function(e){var r=e.name,t=e.type,n=F(e,Ve);return"array"===t?/*#__PURE__*/x.createElement(be,h({key:r,name:r},n),we(a,r)):"object"===t?/*#__PURE__*/x.createElement(Se,h({key:r,name:r},n),we(a,r)):/*#__PURE__*/x.createElement(I,h({key:r,name:r,type:t},n))}))};r.__DEV__&&(De.displayName="Fields");var ke=["children","disableIfUntouched","disableIfInvalid"],Ae=u.forwardRef(function(e,r){var n=e.children,a=e.disableIfUntouched,l=e.disableIfInvalid,i=F(e,ke),o=t.useFormContext().formState;/*#__PURE__*/return x.createElement(m.Button,h({type:"submit",isLoading:o.isSubmitting,isPrimary:!0,ref:r,isDisabled:a&&!o.isDirty||l&&!o.isValid},i),n)});Ae.defaultProps={label:"Submit",disableIfUntouched:!1,disableIfInvalid:!1},r.__DEV__&&(Ae.displayName="SubmitButton");var Ie=["schema","submitLabel","fieldResolver","children"],Le=n.forwardRef(function(e,r){var t=e.schema,n=e.submitLabel,a=void 0===n?"Submit":n,l=e.fieldResolver,i=e.children,o=F(e,Ie);/*#__PURE__*/return x.createElement(Y,h({},o,{schema:t,ref:r}),/*#__PURE__*/x.createElement(ee,null,/*#__PURE__*/x.createElement(De,{schema:t,fieldResolver:l}),a&&/*#__PURE__*/x.createElement(Ae,{label:a}),i))});r.__DEV__&&(Le.displayName="AutoForm");var Pe=function(e){var r=e.children,n=e.condition;return(void 0===n?function(e){return!!e}:n)(t.useWatch({name:e.name,defaultValue:e.defaultValue,disabled:e.isDisabled,exact:e.isExact}),t.useFormContext())?r:null};r.__DEV__&&(Pe.displayName="DisplayIf");var Be=["onChange"],Oe=c.createContext({name:"StepFormContext",errorMessage:"useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`"}),je=Oe[0],qe=Oe[1];function Me(e){var r=F(e,Be),t=p.useStepper(r),n=t.activeStep,a=t.isLastStep,l=t.nextStep,i=x.useState({}),o=i[0],s=i[1],u=x.useCallback(function(r){try{return a?Promise.resolve(null==e.onSubmit?void 0:e.onSubmit(r).then(function(){m(h({},o[n],{isCompleted:!0}))}).then(l)):(l(),Promise.resolve())}catch(e){return Promise.reject(e)}},[n,a]),d=x.useCallback(function(){var e=o[n];return{onSubmit:u,schema:null==e?void 0:e.schema,resolver:null==e?void 0:e.resolver}},[o,u,n]),m=x.useCallback(function(e){s(function(r){var t;return h({},r,((t={})[e.name]=e,t))})},[o]);return h({getFormProps:d,updateStep:m,steps:o},t)}function Ue(e){var r=e.name,t=e.schema,n=e.resolver,a=p.useStep({name:r}),l=qe(),i=l.steps,o=l.updateStep;return x.useEffect(function(){o({name:r,schema:t,resolver:n})},[r,t]),h({},a,i[r]||{name:r,schema:t})}var Te=["children"],He=["getFormProps"],Ge=["name","schema","resolver","children","className"],ze=["label","submitLabel"],We=x.forwardRef(function(e,t){var n=e.children,a=F(e,Te),l=Me(e),i=l.getFormProps,o=F(l,He),s=x.useMemo(function(){return o},[o]);/*#__PURE__*/return x.createElement(p.StepperProvider,{value:s},/*#__PURE__*/x.createElement(je,{value:s},/*#__PURE__*/x.createElement(Y,h({ref:t},a,i()),r.runIfFn(n,l))))}),Je=function(e){var t=e.name,n=e.schema,a=e.resolver,l=e.children,i=e.className,o=F(e,Ge);return Ue({name:t,schema:n,resolver:a}).isActive?/*#__PURE__*/x.createElement(u.chakra.div,h({},o,{className:r.cx("saas-form__step",i)}),l):null};r.__DEV__&&(Je.displayName="FormStep");var Ke=function(e){var t=p.useStepperContext(),n=t.prevStep;/*#__PURE__*/return x.createElement(m.Button,h({isDisabled:t.isFirstStep||t.isCompleted,label:"Back"},e,{className:r.cx("saas-form__prev-button",e.className),onClick:r.callAllHandlers(e.onClick,n)}))};r.__DEV__&&(Ke.displayName="PrevButton");var Qe=function(e){var t=e.label,n=void 0===t?"Next":t,a=e.submitLabel,l=void 0===a?"Complete":a,i=F(e,ze),o=p.useStepperContext(),s=o.isCompleted;/*#__PURE__*/return x.createElement(Ae,h({isDisabled:s,label:o.isLastStep||s?l:n},i,{className:r.cx("saas-form__next-button",e.className)}))};r.__DEV__&&(Qe.displayName="NextButton"),exports.ArrayField=be,exports.ArrayFieldAddButton=ye,exports.ArrayFieldContainer=_e,exports.ArrayFieldProvider=ne,exports.ArrayFieldRemoveButton=Fe,exports.ArrayFieldRow=ve,exports.ArrayFieldRowContainer=he,exports.ArrayFieldRowFields=xe,exports.ArrayFieldRowProvider=ie,exports.ArrayFieldRows=Ee,exports.AutoForm=Le,exports.BaseField=A,exports.CheckboxField=H,exports.DisplayField=b,exports.DisplayIf=Pe,exports.Field=I,exports.Fields=De,exports.Form=Y,exports.FormLayout=ee,exports.FormLegend=ge,exports.FormStep=Je,exports.FormStepper=function(e){var r=p.useStepperContext(),t=r.activeIndex,n=r.setIndex,a=x.Children.map(e.children,function(e){if(x.isValidElement(e)&&(null==e?void 0:e.type)===Je){var r=Ue(e.props);/*#__PURE__*/return x.createElement(p.StepperStep,{name:e.props.name,title:e.props.title,isCompleted:r.isCompleted},e.props.children)}return e}),l=x.useCallback(function(e){n(e)},[]);/*#__PURE__*/return x.createElement(p.StepperContainer,{step:t,onChange:l},/*#__PURE__*/x.createElement(p.StepperSteps,h({mb:"4"},e),a))},exports.FormValue=E,exports.InputField=O,exports.NativeSelectField=W,exports.NextButton=Qe,exports.NumberInputField=j,exports.ObjectField=Se,exports.PasswordInputFIeld=q,exports.PinField=z,exports.PrevButton=Ke,exports.RadioField=G,exports.SelectField=T,exports.StepForm=We,exports.StepFormProvider=je,exports.SubmitButton=Ae,exports.SwitchField=U,exports.TextareaField=M,exports.objectFieldResolver=Q,exports.registerFieldType=B,exports.useArrayField=se,exports.useArrayFieldAddButton=me,exports.useArrayFieldContext=ae,exports.useArrayFieldRemoveButton=de,exports.useArrayFieldRow=ue,exports.useArrayFieldRowContext=oe,exports.useFormStep=Ue,exports.useStepForm=Me,exports.useStepFormContext=qe,exports.withControlledInput=L,exports.withUncontrolledInput=P,Object.keys(f).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return f[e]}})});
|
1
|
+
var e=require("react"),r=require("@chakra-ui/utils"),t=require("react-hook-form"),n=require("@chakra-ui/react"),a=require("@saas-ui/number-input"),l=require("@saas-ui/password-input"),i=require("@saas-ui/radio"),o=require("@saas-ui/select"),s=require("@chakra-ui/system"),u=require("@chakra-ui/icons"),d=require("@saas-ui/button"),c=require("@chakra-ui/react-utils"),m=require("@saas-ui/stepper"),p=require("@saas-ui/input-right-button");function f(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}}),r.default=e,r}var v=/*#__PURE__*/f(e);function h(){return h=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},h.apply(this,arguments)}function x(e,r){if(null==e)return{};var t,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)r.indexOf(t=l[n])>=0||(a[t]=e[t]);return a}var y=["name","label","placeholder"],F=function(e){var r=e.name,t=e.label,a=x(e,y);/*#__PURE__*/return v.createElement(n.FormControl,a,t?/*#__PURE__*/v.createElement(n.FormLabel,{htmlFor:r},t):null,/*#__PURE__*/v.createElement(n.Text,{fontSize:"md"},/*#__PURE__*/v.createElement(E,{name:r})))};r.__DEV__&&(F.displayName="DisplayField");var E=function(e){var r=e.name;return(0,t.useFormContext().getValues)(r)||null};r.__DEV__&&(E.displayName="FormValue");var b=["name","label","help","variant","hideLabel","children"],_=["id","name","label","help","isDisabled","isInvalid","isReadOnly","isRequired","isOptional","rules","variant"],C=["name","rules"],g=["ref"],S=["name","rules"],N=["ref"],R=["type","leftAddon","rightAddon","size"],V=["type"],w=["label","type"],A=["pinLength","pinType","spacing"],k={},D=function(e){var r=e.name,a=e.label,l=e.help,i=e.variant,o=e.hideLabel,s=e.children,u=x(e,b),d=function(e,r){return t.get(r.errors,e)}(r,t.useFormContext().formState);/*#__PURE__*/return v.createElement(n.FormControl,h({variant:i},u,{isInvalid:!!d}),a&&!o?/*#__PURE__*/v.createElement(n.FormLabel,{variant:i},a):null,/*#__PURE__*/v.createElement(n.Box,null,s,!l||null!=d&&d.message?null:/*#__PURE__*/v.createElement(n.FormHelperText,null,l),(null==d?void 0:d.message)&&/*#__PURE__*/v.createElement(n.FormErrorMessage,null,null==d?void 0:d.message)))};r.__DEV__&&(D.displayName="BaseField");var I=v.forwardRef(function(e,r){var t=e.type;/*#__PURE__*/return v.createElement(k[void 0===t?"text":t]||k.text,h({ref:r},e))}),L=function(e){return n.forwardRef(function(r,a){var l=r.name,i=r.rules,o=x(r,C),s=t.useFormContext();/*#__PURE__*/return v.createElement(t.Controller,{name:l,control:s.control,rules:i,render:function(r){var t=r.field,l=t.ref,i=x(t,g);/*#__PURE__*/return v.createElement(e,h({},i,o,{ref:n.useMergeRefs(a,l)}))}})})},P=function(e){return n.forwardRef(function(r,a){var l=r.name,i=r.rules,o=x(r,S),s=(0,t.useFormContext().register)(l,i),u=s.ref,d=x(s,N);/*#__PURE__*/return v.createElement(e,h({},d,o,{ref:n.useMergeRefs(a,u)}))})},B=function(e,r,t){var a=function(e,r){var t=r.displayName,a=r.hideLabel,l=r.BaseField,i=n.forwardRef(function(r,t){var n=r.id,i=r.name,o=r.label,s=r.help,u=r.isDisabled,d=r.isInvalid,c=r.isReadOnly,m=r.isRequired,p=r.isOptional,f=r.rules,y=r.variant,F=x(r,_),E=h({required:m},f);/*#__PURE__*/return v.createElement(l,{id:n,name:i,label:o,help:s,hideLabel:a,isDisabled:u,isInvalid:d,isReadOnly:c,isRequired:m,isOptional:p,variant:y},/*#__PURE__*/v.createElement(e,h({ref:t,id:n,name:i,label:a?o:void 0,rules:E},F)))});return i.displayName=t,i}(null!=t&&t.isControlled?L(r):P(r),{displayName:e.split("-").map(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}).join("")+"Field",hideLabel:null==t?void 0:t.hideLabel,BaseField:(null==t?void 0:t.BaseField)||D});return k[e]=a,a},O=B("text",n.forwardRef(function(e,r){var t=e.type,a=void 0===t?"text":t,l=e.leftAddon,i=e.rightAddon,o=e.size,s=x(e,R),u=/*#__PURE__*/v.createElement(n.Input,h({type:a,size:o},s,{ref:r}));return l||i?/*#__PURE__*/v.createElement(n.InputGroup,{size:o},l,u,i):u})),j=B("number",a.NumberInput,{isControlled:!0}),q=B("password",n.forwardRef(function(e,r){/*#__PURE__*/return v.createElement(l.PasswordInput,h({ref:r},e))})),M=B("textarea",n.Textarea),U=B("switch",n.forwardRef(function(e,r){var t=x(e,V);/*#__PURE__*/return v.createElement(n.Switch,h({},t,{ref:r}))}),{isControlled:!0}),T=B("select",o.Select,{isControlled:!0}),z=B("checkbox",n.forwardRef(function(e,r){var t=e.label,a=x(e,w);/*#__PURE__*/return v.createElement(n.Checkbox,h({ref:r},a),t)}),{hideLabel:!0}),H=B("radio",i.RadioInput,{isControlled:!0}),G=B("native-select",o.NativeSelect,{isControlled:!0}),W=B("pin",n.forwardRef(function(e,r){for(var t=e.pinLength,a=void 0===t?4:t,l=e.pinType,i=e.spacing,o=x(e,A),s=[],u=0;u<a;u++)s.push(/*#__PURE__*/v.createElement(n.PinInputField,{key:u,ref:r}));/*#__PURE__*/return v.createElement(n.HStack,{spacing:i},/*#__PURE__*/v.createElement(n.PinInput,h({},o,{type:l}),s))}),{isControlled:!0}),J=["items"],K=function(e){return e&&Object.entries(e).map(function(e){var r=e[0];return h({},x(e[1],J),{name:r})})},Q=function(e){return{getFields:function(){return K(e)},getNestedFields:function(t){var n,a=r.get(e,t);return a?"object"===(null==(n=a.items)?void 0:n.type)?K(a.items.properties):"object"===a.type?K(a.properties):[a.items]:[]}}},X=["mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","schema","defaultValues","onSubmit","onError","formRef","children"],Y=n.forwardRef(function(e,a){var l=e.mode,i=void 0===l?"all":l,o=e.resolver,s=e.reValidateMode,u=e.shouldFocusError,d=e.shouldUnregister,c=e.shouldUseNativeValidation,m=e.criteriaMode,p=e.delayError,f=e.schema,y=e.defaultValues,F=e.onSubmit,E=e.onError,b=e.formRef,_=e.children,C=x(e,X),g={mode:i,resolver:o,defaultValues:y,reValidateMode:s,shouldFocusError:u,shouldUnregister:d,shouldUseNativeValidation:c,criteriaMode:m,delayError:p};f&&!o&&(g.resolver=null==Y.getResolver?void 0:Y.getResolver(f));var S=t.useForm(g),N=S.handleSubmit;return v.useImperativeHandle(a,function(){return S},[a,S]),/*#__PURE__*/v.createElement(t.FormProvider,S,/*#__PURE__*/v.createElement(n.chakra.form,h({ref:b,onSubmit:N(F,E)},C,{className:r.cx("saas-form",e.className)}),_))});Y.getFieldResolver=Q,r.__DEV__&&(Y.displayName="Form");var Z=["children"],$=function(e){/*#__PURE__*/return v.createElement(n.chakra.div,null,e.children)};r.__DEV__&&($.displayName="FormLayoutItem");var ee=function(e){var t,a,l,i=e.children,o=x(e,Z),s=h({},null!=(t=null==(a=n.useTheme().components)||null==(l=a.FormLayout)?void 0:l.defaultProps)?t:{spacing:4},o);/*#__PURE__*/return v.createElement(n.SimpleGrid,h({},s,{className:r.cx("saas-form__layout",o.className)}),v.Children.map(i,function(e){return v.isValidElement(e)?/*#__PURE__*/v.createElement($,null,e):e}))};r.__DEV__&&(ee.displayName="FormLayout");var re=function(e,r){return v.Children.map(r,function(r){return v.isValidElement(r)&&r.props.name?v.cloneElement(r,h({},r.props,{name:e+"."+r.props.name})):r})},te=c.createContext({name:"ArrayFieldContext"}),ne=te[0],ae=te[1],le=c.createContext({name:"ArrayFieldRowContext"}),ie=le[0],oe=le[1],se=function(e){var r=e.name,n=e.defaultValue,a=void 0===n?{}:n,l=e.keyName,i=e.min,o=e.max,s=t.useFormContext();return h({},t.useFieldArray({control:s.control,name:r,keyName:l}),{name:r,defaultValue:a,min:i,max:o})},ue=function(e){var r=e.index,n=t.useFormContext().clearErrors,a=ae(),l=a.name,i=a.remove,o=a.fields;return v.useEffect(function(){n(l)},[]),{index:r,isFirst:0===r,isLast:r===o.length-1,name:l+"."+r,remove:v.useCallback(function(){n(l),i(r)},[r])}},de=function(){var e=oe(),r=e.isFirst,t=e.remove,n=ae(),a=n.min;return{onClick:function(){return t()},isDisabled:r&&!!(a&&n.fields.length<=a)}},ce=function(){var e=ae(),r=e.append,t=e.defaultValue,n=e.max;return{onClick:function(){return r(t,{shouldFocus:!1})},isDisabled:!!(n&&e.fields.length>=n)}},me=["children","index"],pe=["children"],fe=["children"],ve=["name","defaultValue","keyName","min","max","children"],he=function(e){var r=e.children,t=e.index,n=x(e,me);/*#__PURE__*/return v.createElement(ye,{index:t},/*#__PURE__*/v.createElement(xe,n,r),/*#__PURE__*/v.createElement(Fe,null))};r.__DEV__&&(he.displayName="ArrayFieldRow");var xe=function(e){var r=e.children,t=x(e,pe),n=oe().name;/*#__PURE__*/return v.createElement(ee,h({flex:"1",mr:"2"},t),re(n,r))};r.__DEV__&&(xe.displayName="ArrayFieldRowFields");var ye=function(e){var r=e.children,t=ue({index:e.index});/*#__PURE__*/return v.createElement(ie,{value:t},/*#__PURE__*/v.createElement(s.chakra.div,{__css:{display:"flex",flexDirection:"row",alignItems:"flex-end",width:"100%",mb:4}},r))};r.__DEV__&&(ye.displayName="ArrayFieldRowContainer");var Fe=function(e){/*#__PURE__*/return v.createElement(d.IconButton,h({icon:/*#__PURE__*/v.createElement(u.MinusIcon,null),"aria-label":"Remove row"},de(),e))};r.__DEV__&&(Fe.displayName="ArrayFieldRemoveButton");var Ee=function(e){/*#__PURE__*/return v.createElement(d.IconButton,h({icon:/*#__PURE__*/v.createElement(u.AddIcon,null),"aria-label":"Add row",float:"right"},ce(),e))};r.__DEV__&&(Ee.displayName="ArrayFieldAddButton");var be=s.forwardRef(function(e,r){var t=e.children,n=x(e,fe);/*#__PURE__*/return v.createElement(Ce,h({ref:r},n),/*#__PURE__*/v.createElement(_e,null,function(e){/*#__PURE__*/return v.createElement(v.Fragment,null,e.map(function(e,r){/*#__PURE__*/return v.createElement(he,{key:e.id,index:r},t)}))}),/*#__PURE__*/v.createElement(Ee,null))});r.__DEV__&&(be.displayName="ArrayField");var _e=function(e){return(0,e.children)(ae().fields)};r.__DEV__&&(_e.displayName="ArrayFieldRows");var Ce=v.forwardRef(function(e,r){var t=e.name,n=e.defaultValue,a=e.keyName,l=e.min,i=e.max,o=e.children,s=x(e,ve),u=se({name:t,defaultValue:n,keyName:a,min:l,max:i});return v.useImperativeHandle(r,function(){return u},[r,u]),/*#__PURE__*/v.createElement(ne,{value:u},/*#__PURE__*/v.createElement(D,h({name:t},s),o))});r.__DEV__&&(Ce.displayName="ArrayFieldContainer");var ge=["name","label","hideLabel","children","columns","spacing"],Se=function(e){var r=n.useStyleConfig("FormLegend");/*#__PURE__*/return v.createElement(n.FormLabel,h({as:"legend",sx:r},e))},Ne=function(e){var r=e.name,t=e.label,a=e.hideLabel,l=e.children,i=e.columns,o=e.spacing,s=x(e,ge);/*#__PURE__*/return v.createElement(n.FormControl,h({name:r,as:"fieldset"},s),/*#__PURE__*/v.createElement(Se,{display:a?"none":"block"},t),/*#__PURE__*/v.createElement(ee,{columns:i,gridGap:o},re(r,l)))};r.__DEV__&&(Ne.displayName="ObjectField");var Re=["name","type"],Ve=["schema","fieldResolver"],we=["name","type","defaultValue"],Ae=function(e,r){var t;return null==(t=e.getNestedFields(r))?void 0:t.map(function(e,r){var t=e.name,n=e.type,a=x(e,Re);/*#__PURE__*/return v.createElement(I,h({key:t||r,name:t,type:n},a))})},ke=function(e){var r=e.schema,t=e.fieldResolver,n=x(e,Ve),a=v.useMemo(function(){return t||Y.getFieldResolver(r)},[r,t]);/*#__PURE__*/return v.createElement(ee,n,a.getFields().map(function(e){var r=e.name,t=e.type,n=x(e,we);return"array"===t?/*#__PURE__*/v.createElement(be,h({key:r,name:r},n),Ae(a,r)):"object"===t?/*#__PURE__*/v.createElement(Ne,h({key:r,name:r},n),Ae(a,r)):/*#__PURE__*/v.createElement(I,h({key:r,name:r,type:t},n))}))};r.__DEV__&&(ke.displayName="Fields");var De=["children","disableIfUntouched","disableIfInvalid"],Ie=s.forwardRef(function(e,r){var n=e.children,a=e.disableIfUntouched,l=e.disableIfInvalid,i=x(e,De),o=t.useFormContext().formState;/*#__PURE__*/return v.createElement(d.Button,h({type:"submit",isLoading:o.isSubmitting,colorScheme:"primary",ref:r,isDisabled:a&&!o.isDirty||l&&!o.isValid},i),n)});Ie.defaultProps={label:"Submit",disableIfUntouched:!1,disableIfInvalid:!1},r.__DEV__&&(Ie.displayName="SubmitButton");var Le=["schema","submitLabel","fieldResolver","children"],Pe=n.forwardRef(function(e,r){var t=e.schema,n=e.submitLabel,a=void 0===n?"Submit":n,l=e.fieldResolver,i=e.children,o=x(e,Le);/*#__PURE__*/return v.createElement(Y,h({},o,{schema:t,ref:r}),/*#__PURE__*/v.createElement(ee,null,/*#__PURE__*/v.createElement(ke,{schema:t,fieldResolver:l}),a&&/*#__PURE__*/v.createElement(Ie,{label:a}),i))});r.__DEV__&&(Pe.displayName="AutoForm");var Be=function(e){var r=e.children,n=e.condition;return(void 0===n?function(e){return!!e}:n)(t.useWatch({name:e.name,defaultValue:e.defaultValue,disabled:e.isDisabled,exact:e.isExact}),t.useFormContext())?r:null};r.__DEV__&&(Be.displayName="DisplayIf");var Oe=["onChange"],je=c.createContext({name:"StepFormContext",errorMessage:"useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`"}),qe=je[0],Me=je[1];function Ue(e){var r=x(e,Oe),t=m.useStepper(r),n=t.activeStep,a=t.isLastStep,l=t.nextStep,i=v.useState({}),o=i[0],s=i[1],u=v.useCallback(function(r){try{return a?Promise.resolve(null==e.onSubmit?void 0:e.onSubmit(r).then(function(){c(h({},o[n],{isCompleted:!0}))}).then(l)):(l(),Promise.resolve())}catch(e){return Promise.reject(e)}},[n,a]),d=v.useCallback(function(){var e=o[n];return{onSubmit:u,schema:null==e?void 0:e.schema,resolver:null==e?void 0:e.resolver}},[o,u,n]),c=v.useCallback(function(e){s(function(r){var t;return h({},r,((t={})[e.name]=e,t))})},[o]);return h({getFormProps:d,updateStep:c,steps:o},t)}function Te(e){var r=e.name,t=e.schema,n=e.resolver,a=m.useStep({name:r}),l=Me(),i=l.steps,o=l.updateStep;return v.useEffect(function(){o({name:r,schema:t,resolver:n})},[r,t]),h({},a,i[r]||{name:r,schema:t})}var ze=["children"],He=["getFormProps"],Ge=["name","schema","resolver","children","className"],We=["label","submitLabel"],Je=v.forwardRef(function(e,t){var n=e.children,a=x(e,ze),l=Ue(e),i=l.getFormProps,o=x(l,He),s=v.useMemo(function(){return o},[o]);/*#__PURE__*/return v.createElement(m.StepperProvider,{value:s},/*#__PURE__*/v.createElement(qe,{value:s},/*#__PURE__*/v.createElement(Y,h({ref:t},a,i()),r.runIfFn(n,l))))}),Ke=function(e){var t=e.name,n=e.schema,a=e.resolver,l=e.children,i=e.className,o=x(e,Ge);return Te({name:t,schema:n,resolver:a}).isActive?/*#__PURE__*/v.createElement(s.chakra.div,h({},o,{className:r.cx("saas-form__step",i)}),l):null};r.__DEV__&&(Ke.displayName="FormStep");var Qe=function(e){var t=m.useStepperContext(),n=t.prevStep;/*#__PURE__*/return v.createElement(d.Button,h({isDisabled:t.isFirstStep||t.isCompleted,label:"Back"},e,{className:r.cx("saas-form__prev-button",e.className),onClick:r.callAllHandlers(e.onClick,n)}))};r.__DEV__&&(Qe.displayName="PrevButton");var Xe=function(e){var t=e.label,n=void 0===t?"Next":t,a=e.submitLabel,l=void 0===a?"Complete":a,i=x(e,We),o=m.useStepperContext(),s=o.isCompleted;/*#__PURE__*/return v.createElement(Ie,h({isDisabled:s,label:o.isLastStep||s?l:n},i,{className:r.cx("saas-form__next-button",e.className)}))};r.__DEV__&&(Xe.displayName="NextButton"),exports.ArrayField=be,exports.ArrayFieldAddButton=Ee,exports.ArrayFieldContainer=Ce,exports.ArrayFieldProvider=ne,exports.ArrayFieldRemoveButton=Fe,exports.ArrayFieldRow=he,exports.ArrayFieldRowContainer=ye,exports.ArrayFieldRowFields=xe,exports.ArrayFieldRowProvider=ie,exports.ArrayFieldRows=_e,exports.AutoForm=Pe,exports.BaseField=D,exports.CheckboxField=z,exports.DisplayField=F,exports.DisplayIf=Be,exports.Field=I,exports.Fields=ke,exports.Form=Y,exports.FormLayout=ee,exports.FormLegend=Se,exports.FormStep=Ke,exports.FormStepper=function(e){var r=m.useStepperContext(),t=r.activeIndex,n=r.setIndex,a=e.orientation,l=v.Children.map(e.children,function(e){if(v.isValidElement(e)&&(null==e?void 0:e.type)===Ke){var r=Te(e.props);/*#__PURE__*/return v.createElement(m.StepperStep,{name:e.props.name,title:e.props.title,isCompleted:r.isCompleted},e.props.children)}return e}),i=v.useCallback(function(e){n(e)},[]);/*#__PURE__*/return v.createElement(m.StepperContainer,{orientation:a,step:t,onChange:i},/*#__PURE__*/v.createElement(m.StepperSteps,h({mb:"4"},e),l))},exports.FormValue=E,exports.InputField=O,exports.NativeSelectField=G,exports.NextButton=Xe,exports.NumberInputField=j,exports.ObjectField=Ne,exports.PasswordInputField=q,exports.PinField=W,exports.PrevButton=Qe,exports.RadioField=H,exports.SelectField=T,exports.StepForm=Je,exports.StepFormProvider=qe,exports.SubmitButton=Ie,exports.SwitchField=U,exports.TextareaField=M,exports.objectFieldResolver=Q,exports.registerFieldType=B,exports.useArrayField=se,exports.useArrayFieldAddButton=ce,exports.useArrayFieldContext=ae,exports.useArrayFieldRemoveButton=de,exports.useArrayFieldRow=ue,exports.useArrayFieldRowContext=oe,exports.useFormStep=Te,exports.useStepForm=Ue,exports.useStepFormContext=Me,exports.withControlledInput=L,exports.withUncontrolledInput=P,Object.keys(p).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return p[e]}})});
|
2
2
|
//# sourceMappingURL=index.js.map
|