@saas-ui/forms 2.0.5 → 2.1.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +17 -0
- package/dist/ajv/index.js +42 -14
- package/dist/ajv/index.js.map +1 -1
- package/dist/ajv/index.mjs +14 -6
- package/dist/ajv/index.mjs.map +1 -1
- package/dist/index.d.ts +5 -4
- package/dist/index.js +542 -324
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +484 -167
- package/dist/index.mjs.map +1 -1
- package/dist/yup/index.d.ts +2 -2
- package/dist/yup/index.js +120 -82
- package/dist/yup/index.js.map +1 -1
- package/dist/yup/index.mjs +132 -38
- package/dist/yup/index.mjs.map +1 -1
- package/dist/zod/index.d.ts +2 -2
- package/dist/zod/index.js +116 -83
- package/dist/zod/index.js.map +1 -1
- package/dist/zod/index.mjs +124 -35
- package/dist/zod/index.mjs.map +1 -1
- package/package.json +7 -7
- package/src/select/select.tsx +2 -1
package/dist/index.js
CHANGED
@@ -1,39 +1,119 @@
|
|
1
|
-
'use
|
2
|
-
|
3
|
-
var
|
4
|
-
var
|
5
|
-
var
|
6
|
-
var
|
7
|
-
var
|
8
|
-
var
|
9
|
-
var
|
10
|
-
var
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
19
|
-
Object.defineProperty(n, k, d.get ? d : {
|
20
|
-
enumerable: true,
|
21
|
-
get: function () { return e[k]; }
|
22
|
-
});
|
23
|
-
}
|
24
|
-
});
|
1
|
+
'use client'
|
2
|
+
"use strict";
|
3
|
+
var __create = Object.create;
|
4
|
+
var __defProp = Object.defineProperty;
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
9
|
+
var __export = (target, all) => {
|
10
|
+
for (var name in all)
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
12
|
+
};
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
15
|
+
for (let key of __getOwnPropNames(from))
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
25
18
|
}
|
26
|
-
|
27
|
-
|
28
|
-
}
|
19
|
+
return to;
|
20
|
+
};
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
27
|
+
mod
|
28
|
+
));
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
29
30
|
|
30
|
-
|
31
|
+
// src/index.ts
|
32
|
+
var src_exports = {};
|
33
|
+
__export(src_exports, {
|
34
|
+
ArrayField: () => ArrayField,
|
35
|
+
ArrayFieldAddButton: () => ArrayFieldAddButton,
|
36
|
+
ArrayFieldContainer: () => ArrayFieldContainer,
|
37
|
+
ArrayFieldProvider: () => ArrayFieldProvider,
|
38
|
+
ArrayFieldRemoveButton: () => ArrayFieldRemoveButton,
|
39
|
+
ArrayFieldRow: () => ArrayFieldRow,
|
40
|
+
ArrayFieldRowContainer: () => ArrayFieldRowContainer,
|
41
|
+
ArrayFieldRowFields: () => ArrayFieldRowFields,
|
42
|
+
ArrayFieldRowProvider: () => ArrayFieldRowProvider,
|
43
|
+
ArrayFieldRows: () => ArrayFieldRows,
|
44
|
+
AutoFields: () => AutoFields,
|
45
|
+
BaseField: () => BaseField,
|
46
|
+
BaseForm: () => Form,
|
47
|
+
CheckboxField: () => CheckboxField,
|
48
|
+
Controller: () => import_react_hook_form9.Controller,
|
49
|
+
DisplayField: () => DisplayField,
|
50
|
+
DisplayIf: () => DisplayIf,
|
51
|
+
Field: () => Field,
|
52
|
+
FieldsProvider: () => FieldsProvider,
|
53
|
+
Form: () => Form2,
|
54
|
+
FormLayout: () => FormLayout,
|
55
|
+
FormLegend: () => FormLegend,
|
56
|
+
FormProvider: () => FormProvider,
|
57
|
+
FormStep: () => FormStep,
|
58
|
+
FormStepper: () => FormStepper,
|
59
|
+
FormValue: () => FormValue,
|
60
|
+
InputField: () => InputField,
|
61
|
+
InputRightButton: () => InputRightButton,
|
62
|
+
NativeSelect: () => NativeSelect,
|
63
|
+
NativeSelectField: () => NativeSelectField,
|
64
|
+
NextButton: () => NextButton,
|
65
|
+
NumberInputField: () => NumberInputField2,
|
66
|
+
ObjectField: () => ObjectField,
|
67
|
+
PasswordInput: () => PasswordInput,
|
68
|
+
PasswordInputField: () => PasswordInputField,
|
69
|
+
PinField: () => PinField,
|
70
|
+
PrevButton: () => PrevButton,
|
71
|
+
RadioField: () => RadioField,
|
72
|
+
RadioInput: () => RadioInput,
|
73
|
+
Select: () => Select,
|
74
|
+
SelectButton: () => SelectButton,
|
75
|
+
SelectField: () => SelectField,
|
76
|
+
SelectList: () => SelectList,
|
77
|
+
SelectOption: () => SelectOption,
|
78
|
+
StepForm: () => StepForm,
|
79
|
+
StepFormProvider: () => StepFormProvider,
|
80
|
+
SubmitButton: () => SubmitButton,
|
81
|
+
SwitchField: () => SwitchField,
|
82
|
+
TextareaField: () => TextareaField,
|
83
|
+
WatchField: () => WatchField,
|
84
|
+
appendErrors: () => import_react_hook_form9.appendErrors,
|
85
|
+
createField: () => createField,
|
86
|
+
createForm: () => createForm,
|
87
|
+
createStepForm: () => createStepForm,
|
88
|
+
defaultFieldTypes: () => defaultFieldTypes,
|
89
|
+
objectFieldResolver: () => objectFieldResolver,
|
90
|
+
useArrayField: () => useArrayField,
|
91
|
+
useArrayFieldAddButton: () => useArrayFieldAddButton,
|
92
|
+
useArrayFieldContext: () => useArrayFieldContext,
|
93
|
+
useArrayFieldRemoveButton: () => useArrayFieldRemoveButton,
|
94
|
+
useArrayFieldRow: () => useArrayFieldRow,
|
95
|
+
useArrayFieldRowContext: () => useArrayFieldRowContext,
|
96
|
+
useController: () => import_react_hook_form9.useController,
|
97
|
+
useField: () => useField,
|
98
|
+
useFieldArray: () => import_react_hook_form9.useFieldArray,
|
99
|
+
useForm: () => import_react_hook_form9.useForm,
|
100
|
+
useFormContext: () => useFormContext,
|
101
|
+
useFormState: () => import_react_hook_form9.useFormState,
|
102
|
+
useFormStep: () => useFormStep,
|
103
|
+
useStepForm: () => useStepForm,
|
104
|
+
useStepFormContext: () => useStepFormContext,
|
105
|
+
useWatch: () => import_react_hook_form9.useWatch
|
106
|
+
});
|
107
|
+
module.exports = __toCommonJS(src_exports);
|
31
108
|
|
32
109
|
// src/form-context.tsx
|
33
|
-
var
|
110
|
+
var React = __toESM(require("react"));
|
111
|
+
var import_react_hook_form = require("react-hook-form");
|
112
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
113
|
+
var FormContext = React.createContext(null);
|
34
114
|
var useFormContext = () => {
|
35
|
-
const context =
|
36
|
-
const hookContext =
|
115
|
+
const context = React.useContext(FormContext);
|
116
|
+
const hookContext = (0, import_react_hook_form.useFormContext)();
|
37
117
|
if (!context) {
|
38
118
|
throw new Error("FormProvider must be used within a Form component");
|
39
119
|
}
|
@@ -50,17 +130,21 @@ var useFieldProps = (name) => {
|
|
50
130
|
};
|
51
131
|
var FormProvider = (props) => {
|
52
132
|
const { children, fieldResolver, schema, fields, ...rest } = props;
|
53
|
-
return /* @__PURE__ */
|
133
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_hook_form.FormProvider, { ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormContext.Provider, { value: { fieldResolver, schema, fields }, children }) });
|
54
134
|
};
|
135
|
+
|
136
|
+
// src/display-field.tsx
|
137
|
+
var import_react = require("@chakra-ui/react");
|
138
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
55
139
|
var DisplayField = ({
|
56
140
|
name,
|
57
141
|
label,
|
58
142
|
placeholder,
|
59
143
|
...props
|
60
144
|
}) => {
|
61
|
-
return /* @__PURE__ */
|
62
|
-
label ? /* @__PURE__ */
|
63
|
-
/* @__PURE__ */
|
145
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.FormControl, { ...props, children: [
|
146
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.FormLabel, { htmlFor: name, children: label }) : null,
|
147
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Text, { fontSize: "md", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FormValue, { name }) })
|
64
148
|
] });
|
65
149
|
};
|
66
150
|
DisplayField.displayName = "DisplayField";
|
@@ -69,18 +153,32 @@ var FormValue = ({ name }) => {
|
|
69
153
|
return getValues(name) || null;
|
70
154
|
};
|
71
155
|
FormValue.displayName = "FormValue";
|
72
|
-
|
156
|
+
|
157
|
+
// src/field.tsx
|
158
|
+
var React6 = __toESM(require("react"));
|
159
|
+
|
160
|
+
// src/fields-context.tsx
|
161
|
+
var import_react14 = __toESM(require("react"));
|
162
|
+
|
163
|
+
// src/default-fields.tsx
|
164
|
+
var import_react13 = require("@chakra-ui/react");
|
165
|
+
|
166
|
+
// src/number-input/number-input.tsx
|
167
|
+
var import_react2 = require("@chakra-ui/react");
|
168
|
+
var import_core = require("@saas-ui/core");
|
169
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
170
|
+
var NumberInput = (0, import_react2.forwardRef)((props, ref) => {
|
73
171
|
const {
|
74
172
|
hideStepper,
|
75
|
-
incrementIcon = /* @__PURE__ */
|
76
|
-
decrementIcon = /* @__PURE__ */
|
173
|
+
incrementIcon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core.ChevronUpIcon, {}),
|
174
|
+
decrementIcon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core.ChevronDownIcon, {}),
|
77
175
|
...rest
|
78
176
|
} = props;
|
79
|
-
return /* @__PURE__ */
|
80
|
-
/* @__PURE__ */
|
81
|
-
!hideStepper && /* @__PURE__ */
|
82
|
-
/* @__PURE__ */
|
83
|
-
/* @__PURE__ */
|
177
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react2.NumberInput, { ...rest, ref, children: [
|
178
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.NumberInputField, {}),
|
179
|
+
!hideStepper && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react2.NumberInputStepper, { children: [
|
180
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.NumberIncrementStepper, { children: incrementIcon }),
|
181
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.NumberDecrementStepper, { children: decrementIcon })
|
84
182
|
] })
|
85
183
|
] });
|
86
184
|
});
|
@@ -88,14 +186,26 @@ NumberInput.defaultProps = {
|
|
88
186
|
hideStepper: false
|
89
187
|
};
|
90
188
|
NumberInput.displayName = "NumberInput";
|
91
|
-
|
189
|
+
|
190
|
+
// src/password-input/password-input.tsx
|
191
|
+
var import_react4 = require("react");
|
192
|
+
var import_react5 = require("@chakra-ui/react");
|
193
|
+
var import_icons = require("@saas-ui/core/icons");
|
194
|
+
|
195
|
+
// src/input-right-button/input-right-button.tsx
|
196
|
+
var import_react3 = require("@chakra-ui/react");
|
197
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
198
|
+
var InputRightButton = (0, import_react3.forwardRef)(
|
92
199
|
(props, ref) => {
|
93
|
-
return /* @__PURE__ */
|
200
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react3.InputRightElement, { w: "auto", px: "1", py: "1", alignItems: "stretch", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react3.Button, { ref, height: "auto", ...props }) });
|
94
201
|
}
|
95
202
|
);
|
96
203
|
InputRightButton.id = "InputRightElement";
|
97
204
|
InputRightButton.displayName = "InputRightButton";
|
98
|
-
|
205
|
+
|
206
|
+
// src/password-input/password-input.tsx
|
207
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
208
|
+
var PasswordInput = (0, import_react5.forwardRef)(
|
99
209
|
(props, ref) => {
|
100
210
|
const {
|
101
211
|
viewIcon,
|
@@ -108,24 +218,24 @@ var PasswordInput = react.forwardRef(
|
|
108
218
|
leftAddon,
|
109
219
|
...inputProps
|
110
220
|
} = props;
|
111
|
-
const [show, setShow] =
|
221
|
+
const [show, setShow] = (0, import_react4.useState)(false);
|
112
222
|
const handleClick = () => setShow(!show);
|
113
223
|
const label = show ? "Hide password" : "Show password";
|
114
224
|
let icon;
|
115
225
|
if (show) {
|
116
|
-
icon = viewIcon || /* @__PURE__ */
|
226
|
+
icon = viewIcon || /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons.ViewIcon, {});
|
117
227
|
} else {
|
118
|
-
icon = viewOffIcon || /* @__PURE__ */
|
228
|
+
icon = viewOffIcon || /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons.ViewOffIcon, {});
|
119
229
|
}
|
120
230
|
const groupProps = {
|
121
231
|
width: w || width,
|
122
232
|
size,
|
123
233
|
variant
|
124
234
|
};
|
125
|
-
return /* @__PURE__ */
|
235
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react5.InputGroup, { ...groupProps, children: [
|
126
236
|
leftAddon,
|
127
|
-
/* @__PURE__ */
|
128
|
-
|
237
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
238
|
+
import_react5.Input,
|
129
239
|
{
|
130
240
|
...inputProps,
|
131
241
|
ref,
|
@@ -133,7 +243,7 @@ var PasswordInput = react.forwardRef(
|
|
133
243
|
autoComplete: show ? "off" : autoComplete
|
134
244
|
}
|
135
245
|
),
|
136
|
-
/* @__PURE__ */
|
246
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
137
247
|
InputRightButton,
|
138
248
|
{
|
139
249
|
onClick: handleClick,
|
@@ -146,16 +256,22 @@ var PasswordInput = react.forwardRef(
|
|
146
256
|
}
|
147
257
|
);
|
148
258
|
PasswordInput.displayName = "PasswordInput";
|
259
|
+
|
260
|
+
// src/radio/radio-input.tsx
|
261
|
+
var import_react6 = require("@chakra-ui/react");
|
262
|
+
|
263
|
+
// src/utils.ts
|
264
|
+
var React3 = __toESM(require("react"));
|
149
265
|
var mapNestedFields = (name, children) => {
|
150
|
-
return
|
151
|
-
if (
|
266
|
+
return React3.Children.map(children, (child) => {
|
267
|
+
if (React3.isValidElement(child) && child.props.name) {
|
152
268
|
let childName = child.props.name;
|
153
269
|
if (childName.includes(".")) {
|
154
270
|
childName = childName.replace(/^.*\.(.*)/, "$1");
|
155
271
|
} else if (childName.includes(".$")) {
|
156
272
|
childName = childName.replace(/^.*\.\$(.*)/, "$1");
|
157
273
|
}
|
158
|
-
return
|
274
|
+
return React3.cloneElement(child, {
|
159
275
|
...child.props,
|
160
276
|
name: `${name}.${childName}`
|
161
277
|
});
|
@@ -174,13 +290,16 @@ var mapOptions = (options) => {
|
|
174
290
|
return option;
|
175
291
|
});
|
176
292
|
};
|
177
|
-
|
293
|
+
|
294
|
+
// src/radio/radio-input.tsx
|
295
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
296
|
+
var RadioInput = (0, import_react6.forwardRef)(
|
178
297
|
({ options: optionsProp, spacing, direction, ...props }, ref) => {
|
179
298
|
const { onBlur, onChange, ...groupProps } = props;
|
180
299
|
const options = mapOptions(optionsProp);
|
181
|
-
return /* @__PURE__ */
|
182
|
-
return /* @__PURE__ */
|
183
|
-
|
300
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react6.RadioGroup, { onChange, ...groupProps, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react6.Stack, { spacing, direction, children: options.map(({ value, label, ...radioProps }, i) => {
|
301
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
302
|
+
import_react6.Radio,
|
184
303
|
{
|
185
304
|
onBlur,
|
186
305
|
value,
|
@@ -194,8 +313,18 @@ var RadioInput = react.forwardRef(
|
|
194
313
|
}
|
195
314
|
);
|
196
315
|
RadioInput.displayName = "RadioInput";
|
197
|
-
|
198
|
-
|
316
|
+
|
317
|
+
// src/select/select.tsx
|
318
|
+
var import_react9 = require("@chakra-ui/react");
|
319
|
+
var import_utils3 = require("@chakra-ui/utils");
|
320
|
+
var import_core2 = require("@saas-ui/core");
|
321
|
+
|
322
|
+
// src/select/select-context.tsx
|
323
|
+
var import_react7 = require("@chakra-ui/react");
|
324
|
+
var import_react_utils = require("@chakra-ui/react-utils");
|
325
|
+
var import_react8 = __toESM(require("react"));
|
326
|
+
var [SelectStylesProvider, useSelectStyles] = (0, import_react7.createStylesContext)("SuiSelect");
|
327
|
+
var [SelectProvider, useSelectContext] = (0, import_react_utils.createContext)({
|
199
328
|
strict: true
|
200
329
|
});
|
201
330
|
var useSelect = (props) => {
|
@@ -210,20 +339,20 @@ var useSelect = (props) => {
|
|
210
339
|
isDisabled,
|
211
340
|
renderValue = (value2) => typeof value2 === "string" ? value2 : value2 == null ? void 0 : value2.join(", ")
|
212
341
|
} = props;
|
213
|
-
const [currentValue, setCurrentValue] =
|
342
|
+
const [currentValue, setCurrentValue] = (0, import_react7.useControllableState)({
|
214
343
|
value,
|
215
344
|
defaultValue,
|
216
345
|
onChange
|
217
346
|
});
|
218
|
-
const controlProps =
|
219
|
-
const options =
|
347
|
+
const controlProps = (0, import_react7.useFormControl)({ name });
|
348
|
+
const options = import_react8.default.useMemo(
|
220
349
|
() => optionsProp && mapOptions(optionsProp),
|
221
350
|
[optionsProp]
|
222
351
|
);
|
223
352
|
const handleChange = (value2) => {
|
224
353
|
setCurrentValue(value2);
|
225
354
|
};
|
226
|
-
const getDisplayValue =
|
355
|
+
const getDisplayValue = import_react8.default.useCallback(
|
227
356
|
(value2) => {
|
228
357
|
if (!options) {
|
229
358
|
return value2;
|
@@ -237,7 +366,7 @@ var useSelect = (props) => {
|
|
237
366
|
},
|
238
367
|
[options]
|
239
368
|
);
|
240
|
-
const displayValue =
|
369
|
+
const displayValue = import_react8.default.useMemo(
|
241
370
|
() => currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
|
242
371
|
getDisplayValue
|
243
372
|
) : [],
|
@@ -256,7 +385,10 @@ var useSelect = (props) => {
|
|
256
385
|
isDisabled
|
257
386
|
};
|
258
387
|
};
|
259
|
-
|
388
|
+
|
389
|
+
// src/select/select.tsx
|
390
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
391
|
+
var SelectButton = (0, import_react9.forwardRef)(
|
260
392
|
(props, ref) => {
|
261
393
|
var _a, _b, _c, _d, _e;
|
262
394
|
const {
|
@@ -265,7 +397,7 @@ var SelectButton = react.forwardRef(
|
|
265
397
|
placeholder,
|
266
398
|
isDisabled: isSelectDisabled
|
267
399
|
} = useSelectContext();
|
268
|
-
const context =
|
400
|
+
const context = (0, import_react9.useFormControlContext)();
|
269
401
|
const styles = useSelectStyles();
|
270
402
|
const {
|
271
403
|
isInvalid,
|
@@ -277,7 +409,7 @@ var SelectButton = react.forwardRef(
|
|
277
409
|
onBlur,
|
278
410
|
onFocus
|
279
411
|
} = context || {};
|
280
|
-
const { rightIcon = /* @__PURE__ */
|
412
|
+
const { rightIcon = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core2.ChevronDownIcon, {}), ...rest } = props;
|
281
413
|
const focusStyles = (_a = styles.field) == null ? void 0 : _a._focusVisible;
|
282
414
|
const readOnlyStyles = (_b = styles.field) == null ? void 0 : _b._readOnly;
|
283
415
|
const invalid = (_c = styles.field) == null ? void 0 : _c._invalid;
|
@@ -296,26 +428,27 @@ var SelectButton = react.forwardRef(
|
|
296
428
|
_invalid: invalid,
|
297
429
|
minW: 0,
|
298
430
|
...styles.field,
|
299
|
-
h: "auto"
|
431
|
+
h: "auto",
|
432
|
+
...props.sx
|
300
433
|
};
|
301
|
-
const buttonProps =
|
302
|
-
return /* @__PURE__ */
|
303
|
-
|
434
|
+
const buttonProps = (0, import_react9.useMenuButton)(rest, ref);
|
435
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
436
|
+
import_react9.Button,
|
304
437
|
{
|
305
438
|
...buttonProps,
|
306
|
-
|
439
|
+
sx: buttonStyles,
|
307
440
|
id: id || buttonProps.id,
|
308
441
|
...rest,
|
309
442
|
onFocus,
|
310
443
|
onBlur,
|
311
444
|
isDisabled: isDisabled || isSelectDisabled,
|
312
|
-
"data-invalid":
|
313
|
-
"data-read-only":
|
314
|
-
"data-focus":
|
315
|
-
"data-required":
|
445
|
+
"data-invalid": (0, import_utils3.dataAttr)(isInvalid),
|
446
|
+
"data-read-only": (0, import_utils3.dataAttr)(isReadOnly),
|
447
|
+
"data-focus": (0, import_utils3.dataAttr)(isFocused),
|
448
|
+
"data-required": (0, import_utils3.dataAttr)(isRequired),
|
316
449
|
rightIcon,
|
317
|
-
children: /* @__PURE__ */
|
318
|
-
|
450
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
451
|
+
import_react9.chakra.span,
|
319
452
|
{
|
320
453
|
__css: {
|
321
454
|
display: "block",
|
@@ -333,16 +466,16 @@ var SelectButton = react.forwardRef(
|
|
333
466
|
}
|
334
467
|
);
|
335
468
|
SelectButton.displayName = "SelectButton";
|
336
|
-
var Select =
|
469
|
+
var Select = (0, import_react9.forwardRef)((props, ref) => {
|
337
470
|
const { name, children, isDisabled, multiple, ...rest } = props;
|
338
|
-
const styles =
|
339
|
-
const menuProps =
|
471
|
+
const styles = (0, import_react9.useMultiStyleConfig)("SuiSelect", props);
|
472
|
+
const menuProps = (0, import_react9.omitThemingProps)(rest);
|
340
473
|
const context = useSelect(props);
|
341
474
|
const { value, controlProps } = context;
|
342
|
-
return /* @__PURE__ */
|
475
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectStylesProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react9.Menu, { ...menuProps, closeOnSelect: !multiple, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react9.chakra.div, { className: (0, import_utils3.cx)("sui-select"), children: [
|
343
476
|
children,
|
344
|
-
/* @__PURE__ */
|
345
|
-
|
477
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
478
|
+
import_react9.chakra.input,
|
346
479
|
{
|
347
480
|
...controlProps,
|
348
481
|
ref,
|
@@ -356,52 +489,69 @@ var Select = react.forwardRef((props, ref) => {
|
|
356
489
|
});
|
357
490
|
var SelectList = (props) => {
|
358
491
|
const { defaultValue, value, options, multiple, onChange } = useSelectContext();
|
359
|
-
return /* @__PURE__ */
|
360
|
-
|
492
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react9.MenuList, { maxH: "100vh", overflowY: "auto", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
493
|
+
import_react9.MenuOptionGroup,
|
361
494
|
{
|
362
495
|
defaultValue: defaultValue || value,
|
363
496
|
value,
|
364
497
|
onChange,
|
365
498
|
type: multiple ? "checkbox" : "radio",
|
366
|
-
children: options ? options.map(({ value: value2, label, ...rest }, i) => /* @__PURE__ */
|
499
|
+
children: options ? options.map(({ value: value2, label, ...rest }, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectOption, { value: value2, ...rest, children: label || value2 }, i)) : props.children
|
367
500
|
}
|
368
501
|
) });
|
369
502
|
};
|
370
503
|
Select.displayName = "Select";
|
371
|
-
var SelectOption =
|
504
|
+
var SelectOption = (0, import_react9.forwardRef)(
|
372
505
|
(props, ref) => {
|
373
|
-
return /* @__PURE__ */
|
506
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react9.MenuItemOption, { ref, ...props });
|
374
507
|
}
|
375
508
|
);
|
376
509
|
SelectOption.id = "MenuItemOption";
|
377
510
|
SelectOption.displayName = "SelectOption";
|
378
|
-
|
511
|
+
|
512
|
+
// src/select/native-select.tsx
|
513
|
+
var import_react10 = require("@chakra-ui/react");
|
514
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
515
|
+
var NativeSelect = (0, import_react10.forwardRef)(
|
379
516
|
({ options, children, ...props }, ref) => {
|
380
|
-
return /* @__PURE__ */
|
381
|
-
return /* @__PURE__ */
|
517
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react10.Select, { ref, ...props, children: children || (options == null ? void 0 : options.map(({ value, label }) => {
|
518
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value, children: label || value }, value);
|
382
519
|
})) });
|
383
520
|
}
|
384
521
|
);
|
385
522
|
NativeSelect.displayName = "NativeSelect";
|
523
|
+
|
524
|
+
// src/create-field.tsx
|
525
|
+
var import_react_hook_form3 = require("react-hook-form");
|
526
|
+
var import_react12 = require("@chakra-ui/react");
|
527
|
+
var import_utils4 = require("@chakra-ui/utils");
|
528
|
+
|
529
|
+
// src/base-field.tsx
|
530
|
+
var import_react_hook_form2 = require("react-hook-form");
|
531
|
+
var import_react11 = require("@chakra-ui/react");
|
532
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
386
533
|
var getError = (name, formState) => {
|
387
|
-
return
|
534
|
+
return (0, import_react_hook_form2.get)(formState.errors, name);
|
388
535
|
};
|
389
536
|
var BaseField = (props) => {
|
390
537
|
const { name, label, help, hideLabel, children, ...controlProps } = props;
|
391
538
|
const { formState } = useFormContext();
|
392
539
|
const error = getError(name, formState);
|
393
|
-
return /* @__PURE__ */
|
394
|
-
label && !hideLabel ? /* @__PURE__ */
|
395
|
-
/* @__PURE__ */
|
540
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react11.FormControl, { ...controlProps, isInvalid: !!error, children: [
|
541
|
+
label && !hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react11.FormLabel, { children: label }) : null,
|
542
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react11.Box, { children: [
|
396
543
|
children,
|
397
|
-
help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */
|
398
|
-
(error == null ? void 0 : error.message) && /* @__PURE__ */
|
544
|
+
help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react11.FormHelperText, { children: help }) : null,
|
545
|
+
(error == null ? void 0 : error.message) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react11.FormErrorMessage, { children: error == null ? void 0 : error.message })
|
399
546
|
] })
|
400
547
|
] });
|
401
548
|
};
|
402
549
|
BaseField.displayName = "BaseField";
|
550
|
+
|
551
|
+
// src/create-field.tsx
|
552
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
403
553
|
var _createField = (InputComponent, { displayName, hideLabel, BaseField: BaseField2 }) => {
|
404
|
-
const Field2 =
|
554
|
+
const Field2 = (0, import_react12.forwardRef)((props, ref) => {
|
405
555
|
const {
|
406
556
|
id,
|
407
557
|
name,
|
@@ -418,7 +568,7 @@ var _createField = (InputComponent, { displayName, hideLabel, BaseField: BaseFie
|
|
418
568
|
required: isRequired,
|
419
569
|
...rules
|
420
570
|
};
|
421
|
-
return /* @__PURE__ */
|
571
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
422
572
|
BaseField2,
|
423
573
|
{
|
424
574
|
id,
|
@@ -430,7 +580,7 @@ var _createField = (InputComponent, { displayName, hideLabel, BaseField: BaseFie
|
|
430
580
|
isInvalid,
|
431
581
|
isReadOnly,
|
432
582
|
isRequired,
|
433
|
-
children: /* @__PURE__ */
|
583
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
434
584
|
InputComponent,
|
435
585
|
{
|
436
586
|
ref,
|
@@ -448,23 +598,23 @@ var _createField = (InputComponent, { displayName, hideLabel, BaseField: BaseFie
|
|
448
598
|
return Field2;
|
449
599
|
};
|
450
600
|
var withControlledInput = (InputComponent) => {
|
451
|
-
return
|
601
|
+
return (0, import_react12.forwardRef)(
|
452
602
|
({ name, rules, ...inputProps }, ref) => {
|
453
603
|
const { control } = useFormContext();
|
454
|
-
return /* @__PURE__ */
|
455
|
-
|
604
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
605
|
+
import_react_hook_form3.Controller,
|
456
606
|
{
|
457
607
|
name,
|
458
608
|
control,
|
459
609
|
rules,
|
460
|
-
render: ({ field: { ref: _ref, ...field } }) => /* @__PURE__ */
|
610
|
+
render: ({ field: { ref: _ref, ...field } }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
461
611
|
InputComponent,
|
462
612
|
{
|
463
613
|
...field,
|
464
614
|
...inputProps,
|
465
|
-
onChange:
|
466
|
-
onBlur:
|
467
|
-
ref:
|
615
|
+
onChange: (0, import_utils4.callAllHandlers)(inputProps.onChange, field.onChange),
|
616
|
+
onBlur: (0, import_utils4.callAllHandlers)(inputProps.onBlur, field.onBlur),
|
617
|
+
ref: (0, import_react12.useMergeRefs)(ref, _ref)
|
468
618
|
}
|
469
619
|
)
|
470
620
|
}
|
@@ -473,18 +623,18 @@ var withControlledInput = (InputComponent) => {
|
|
473
623
|
);
|
474
624
|
};
|
475
625
|
var withUncontrolledInput = (InputComponent) => {
|
476
|
-
return
|
626
|
+
return (0, import_react12.forwardRef)(
|
477
627
|
({ name, rules, ...inputProps }, ref) => {
|
478
628
|
const { register } = useFormContext();
|
479
629
|
const { ref: _ref, ...field } = register(name, rules);
|
480
|
-
return /* @__PURE__ */
|
630
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
481
631
|
InputComponent,
|
482
632
|
{
|
483
633
|
...field,
|
484
634
|
...inputProps,
|
485
|
-
onChange:
|
486
|
-
onBlur:
|
487
|
-
ref:
|
635
|
+
onChange: (0, import_utils4.callAllHandlers)(inputProps.onChange, field.onChange),
|
636
|
+
onBlur: (0, import_utils4.callAllHandlers)(inputProps.onBlur, field.onBlur),
|
637
|
+
ref: (0, import_react12.useMergeRefs)(ref, _ref)
|
488
638
|
}
|
489
639
|
);
|
490
640
|
}
|
@@ -505,11 +655,14 @@ var createField = (component, options) => {
|
|
505
655
|
});
|
506
656
|
return Field2;
|
507
657
|
};
|
658
|
+
|
659
|
+
// src/default-fields.tsx
|
660
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
508
661
|
var InputField = createField(
|
509
|
-
|
510
|
-
const input = /* @__PURE__ */
|
662
|
+
(0, import_react13.forwardRef)(({ type = "text", leftAddon, rightAddon, size, ...rest }, ref) => {
|
663
|
+
const input = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react13.Input, { type, size, ...rest, ref });
|
511
664
|
if (leftAddon || rightAddon) {
|
512
|
-
return /* @__PURE__ */
|
665
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react13.InputGroup, { size, children: [
|
513
666
|
leftAddon,
|
514
667
|
input,
|
515
668
|
rightAddon
|
@@ -525,22 +678,22 @@ var NumberInputField2 = createField(
|
|
525
678
|
}
|
526
679
|
);
|
527
680
|
var PasswordInputField = createField(
|
528
|
-
|
681
|
+
(0, import_react13.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PasswordInput, { ref, ...props }))
|
529
682
|
);
|
530
|
-
var TextareaField = createField(
|
683
|
+
var TextareaField = createField(import_react13.Textarea);
|
531
684
|
var SwitchField = createField(
|
532
|
-
|
533
|
-
return /* @__PURE__ */
|
685
|
+
(0, import_react13.forwardRef)(({ type, value, ...rest }, ref) => {
|
686
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react13.Switch, { isChecked: !!value, ...rest, ref });
|
534
687
|
}),
|
535
688
|
{
|
536
689
|
isControlled: true
|
537
690
|
}
|
538
691
|
);
|
539
692
|
var SelectField = createField(
|
540
|
-
|
541
|
-
return /* @__PURE__ */
|
542
|
-
/* @__PURE__ */
|
543
|
-
/* @__PURE__ */
|
693
|
+
(0, import_react13.forwardRef)((props, ref) => {
|
694
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Select, { ref, ...props, children: [
|
695
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectButton, {}),
|
696
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectList, {})
|
544
697
|
] });
|
545
698
|
}),
|
546
699
|
{
|
@@ -548,8 +701,8 @@ var SelectField = createField(
|
|
548
701
|
}
|
549
702
|
);
|
550
703
|
var CheckboxField = createField(
|
551
|
-
|
552
|
-
return /* @__PURE__ */
|
704
|
+
(0, import_react13.forwardRef)(({ label, type, ...props }, ref) => {
|
705
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react13.Checkbox, { ref, ...props, children: label });
|
553
706
|
}),
|
554
707
|
{
|
555
708
|
hideLabel: true
|
@@ -562,13 +715,13 @@ var NativeSelectField = createField(NativeSelect, {
|
|
562
715
|
isControlled: true
|
563
716
|
});
|
564
717
|
var PinField = createField(
|
565
|
-
|
718
|
+
(0, import_react13.forwardRef)((props, ref) => {
|
566
719
|
const { pinLength = 4, pinType, spacing, ...inputProps } = props;
|
567
720
|
const inputs = [];
|
568
721
|
for (let i = 0; i < pinLength; i++) {
|
569
|
-
inputs.push(/* @__PURE__ */
|
722
|
+
inputs.push(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react13.PinInputField, { ref }, i));
|
570
723
|
}
|
571
|
-
return /* @__PURE__ */
|
724
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react13.HStack, { spacing, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react13.PinInput, { ...inputProps, type: pinType, children: inputs }) });
|
572
725
|
}),
|
573
726
|
{
|
574
727
|
isControlled: true
|
@@ -589,33 +742,48 @@ var defaultFieldTypes = {
|
|
589
742
|
pin: PinField,
|
590
743
|
"native-select": NativeSelectField
|
591
744
|
};
|
592
|
-
|
745
|
+
|
746
|
+
// src/fields-context.tsx
|
747
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
748
|
+
var FieldsContext = import_react14.default.createContext(
|
593
749
|
null
|
594
750
|
);
|
595
751
|
var FieldsProvider = (props) => {
|
596
752
|
const fields = { ...defaultFieldTypes, ...props.value };
|
597
|
-
return /* @__PURE__ */
|
753
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FieldsContext.Provider, { value: fields, children: props.children });
|
598
754
|
};
|
599
755
|
var useField = (type) => {
|
600
|
-
const context =
|
756
|
+
const context = import_react14.default.useContext(FieldsContext);
|
601
757
|
return (context == null ? void 0 : context[type]) || InputField;
|
602
758
|
};
|
759
|
+
|
760
|
+
// src/field.tsx
|
761
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
603
762
|
var defaultInputType = "text";
|
604
|
-
var Field =
|
763
|
+
var Field = React6.forwardRef(
|
605
764
|
(props, ref) => {
|
606
765
|
const { type = defaultInputType, name } = props;
|
607
766
|
const overrides = useFieldProps(name);
|
608
767
|
const InputComponent = useField((overrides == null ? void 0 : overrides.type) || type);
|
609
|
-
return /* @__PURE__ */
|
768
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(InputComponent, { ref, ...props, ...overrides });
|
610
769
|
}
|
611
770
|
);
|
771
|
+
|
772
|
+
// src/fields.tsx
|
773
|
+
var React10 = __toESM(require("react"));
|
774
|
+
|
775
|
+
// src/layout.tsx
|
776
|
+
var React7 = __toESM(require("react"));
|
777
|
+
var import_react15 = require("@chakra-ui/react");
|
778
|
+
var import_utils5 = require("@chakra-ui/utils");
|
779
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
612
780
|
var FormLayoutItem = ({ children }) => {
|
613
|
-
return /* @__PURE__ */
|
781
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react15.chakra.div, { children });
|
614
782
|
};
|
615
783
|
FormLayoutItem.displayName = "FormLayoutItem";
|
616
784
|
var FormLayout = ({ children, ...props }) => {
|
617
785
|
var _a, _b, _c;
|
618
|
-
const theme =
|
786
|
+
const theme = (0, import_react15.useTheme)();
|
619
787
|
const defaultProps = (_c = (_b = (_a = theme.components) == null ? void 0 : _a.SuiFormLayout) == null ? void 0 : _b.defaultProps) != null ? _c : {
|
620
788
|
spacing: 4
|
621
789
|
};
|
@@ -623,14 +791,14 @@ var FormLayout = ({ children, ...props }) => {
|
|
623
791
|
...defaultProps,
|
624
792
|
...props
|
625
793
|
};
|
626
|
-
return /* @__PURE__ */
|
627
|
-
|
794
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
795
|
+
import_react15.SimpleGrid,
|
628
796
|
{
|
629
797
|
...gridProps,
|
630
|
-
className:
|
631
|
-
children:
|
632
|
-
if (
|
633
|
-
return /* @__PURE__ */
|
798
|
+
className: (0, import_utils5.cx)("sui-form__layout", props.className),
|
799
|
+
children: React7.Children.map(children, (child) => {
|
800
|
+
if (React7.isValidElement(child)) {
|
801
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FormLayoutItem, { children: child });
|
634
802
|
}
|
635
803
|
return child;
|
636
804
|
})
|
@@ -638,10 +806,20 @@ var FormLayout = ({ children, ...props }) => {
|
|
638
806
|
);
|
639
807
|
};
|
640
808
|
FormLayout.displayName = "FormLayout";
|
641
|
-
|
809
|
+
|
810
|
+
// src/array-field.tsx
|
811
|
+
var React9 = __toESM(require("react"));
|
812
|
+
var import_react16 = require("@chakra-ui/react");
|
813
|
+
var import_icons2 = require("@saas-ui/core/icons");
|
814
|
+
|
815
|
+
// src/use-array-field.tsx
|
816
|
+
var React8 = __toESM(require("react"));
|
817
|
+
var import_react_hook_form4 = require("react-hook-form");
|
818
|
+
var import_react_utils2 = require("@chakra-ui/react-utils");
|
819
|
+
var [ArrayFieldProvider, useArrayFieldContext] = (0, import_react_utils2.createContext)({
|
642
820
|
name: "ArrayFieldContext"
|
643
821
|
});
|
644
|
-
var [ArrayFieldRowProvider, useArrayFieldRowContext] =
|
822
|
+
var [ArrayFieldRowProvider, useArrayFieldRowContext] = (0, import_react_utils2.createContext)({
|
645
823
|
name: "ArrayFieldRowContext"
|
646
824
|
});
|
647
825
|
var useArrayField = ({
|
@@ -652,7 +830,7 @@ var useArrayField = ({
|
|
652
830
|
max
|
653
831
|
}) => {
|
654
832
|
const { control } = useFormContext();
|
655
|
-
const context =
|
833
|
+
const context = (0, import_react_hook_form4.useFieldArray)({
|
656
834
|
control,
|
657
835
|
name,
|
658
836
|
keyName
|
@@ -668,7 +846,7 @@ var useArrayField = ({
|
|
668
846
|
var useArrayFieldRow = ({ index }) => {
|
669
847
|
const { clearErrors } = useFormContext();
|
670
848
|
const { name, remove, fields } = useArrayFieldContext();
|
671
|
-
|
849
|
+
React8.useEffect(() => {
|
672
850
|
clearErrors(name);
|
673
851
|
}, []);
|
674
852
|
return {
|
@@ -676,7 +854,7 @@ var useArrayFieldRow = ({ index }) => {
|
|
676
854
|
isFirst: index === 0,
|
677
855
|
isLast: index === fields.length - 1,
|
678
856
|
name: `${name}.${index}`,
|
679
|
-
remove:
|
857
|
+
remove: React8.useCallback(() => {
|
680
858
|
clearErrors(name);
|
681
859
|
remove(index);
|
682
860
|
}, [index])
|
@@ -701,14 +879,18 @@ var useArrayFieldAddButton = () => {
|
|
701
879
|
isDisabled
|
702
880
|
};
|
703
881
|
};
|
882
|
+
|
883
|
+
// src/array-field.tsx
|
884
|
+
var import_utils7 = require("@chakra-ui/utils");
|
885
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
704
886
|
var ArrayFieldRow = ({
|
705
887
|
children,
|
706
888
|
index,
|
707
889
|
...rowFieldsProps
|
708
890
|
}) => {
|
709
|
-
return /* @__PURE__ */
|
710
|
-
/* @__PURE__ */
|
711
|
-
/* @__PURE__ */
|
891
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ArrayFieldRowContainer, { index, children: [
|
892
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrayFieldRowFields, { ...rowFieldsProps, children }),
|
893
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrayFieldRemoveButton, {})
|
712
894
|
] });
|
713
895
|
};
|
714
896
|
ArrayFieldRow.displayName = "ArrayFieldRow";
|
@@ -717,7 +899,7 @@ var ArrayFieldRowFields = ({
|
|
717
899
|
...layoutProps
|
718
900
|
}) => {
|
719
901
|
const { name } = useArrayFieldRowContext();
|
720
|
-
return /* @__PURE__ */
|
902
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FormLayout, { flex: "1", mr: "2", ...layoutProps, children: mapNestedFields(name, children) });
|
721
903
|
};
|
722
904
|
ArrayFieldRowFields.displayName = "ArrayFieldRowFields";
|
723
905
|
var ArrayFieldRowContainer = ({
|
@@ -733,33 +915,33 @@ var ArrayFieldRowContainer = ({
|
|
733
915
|
width: "100%",
|
734
916
|
mb: 4
|
735
917
|
};
|
736
|
-
return /* @__PURE__ */
|
918
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrayFieldRowProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react16.chakra.div, { ...rest, __css: styles, children }) });
|
737
919
|
};
|
738
920
|
ArrayFieldRowContainer.displayName = "ArrayFieldRowContainer";
|
739
921
|
var ArrayFieldRemoveButton = (props) => {
|
740
|
-
return /* @__PURE__ */
|
922
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react16.Button, { "aria-label": "Remove row", ...useArrayFieldRemoveButton(), ...props, children: props.children || /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons2.MinusIcon, {}) });
|
741
923
|
};
|
742
924
|
ArrayFieldRemoveButton.displayName = "ArrayFieldRemoveButton";
|
743
925
|
var ArrayFieldAddButton = (props) => {
|
744
|
-
return /* @__PURE__ */
|
745
|
-
|
926
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
927
|
+
import_react16.Button,
|
746
928
|
{
|
747
929
|
"aria-label": "Add row",
|
748
930
|
float: "right",
|
749
931
|
...useArrayFieldAddButton(),
|
750
932
|
...props,
|
751
|
-
children: props.children || /* @__PURE__ */
|
933
|
+
children: props.children || /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons2.PlusIcon, {})
|
752
934
|
}
|
753
935
|
);
|
754
936
|
};
|
755
937
|
ArrayFieldAddButton.displayName = "ArrayFieldAddButton";
|
756
|
-
var ArrayField =
|
938
|
+
var ArrayField = (0, import_react16.forwardRef)(
|
757
939
|
(props, ref) => {
|
758
940
|
const { children, ...containerProps } = props;
|
759
|
-
const rowFn =
|
760
|
-
return /* @__PURE__ */
|
761
|
-
/* @__PURE__ */
|
762
|
-
/* @__PURE__ */
|
941
|
+
const rowFn = (0, import_utils7.isFunction)(children) ? children : (fields) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: fields.map(({ id }, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrayFieldRow, { index, children }, id)) || null });
|
942
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ArrayFieldContainer, { ref, ...containerProps, children: [
|
943
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrayFieldRows, { children: rowFn }),
|
944
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrayFieldAddButton, {})
|
763
945
|
] });
|
764
946
|
}
|
765
947
|
);
|
@@ -771,7 +953,7 @@ var ArrayFieldRows = ({
|
|
771
953
|
return children(fields);
|
772
954
|
};
|
773
955
|
ArrayFieldRows.displayName = "ArrayFieldRows";
|
774
|
-
var ArrayFieldContainer =
|
956
|
+
var ArrayFieldContainer = React9.forwardRef(
|
775
957
|
({
|
776
958
|
name,
|
777
959
|
defaultValue,
|
@@ -789,14 +971,18 @@ var ArrayFieldContainer = React11__namespace.forwardRef(
|
|
789
971
|
min: min || (overrides == null ? void 0 : overrides.min),
|
790
972
|
max: max || (overrides == null ? void 0 : overrides.max)
|
791
973
|
});
|
792
|
-
|
793
|
-
return /* @__PURE__ */
|
974
|
+
React9.useImperativeHandle(ref, () => context, [ref, context]);
|
975
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BaseField, { name, ...fieldProps, ...overrides, children }) });
|
794
976
|
}
|
795
977
|
);
|
796
978
|
ArrayFieldContainer.displayName = "ArrayFieldContainer";
|
979
|
+
|
980
|
+
// src/object-field.tsx
|
981
|
+
var import_react17 = require("@chakra-ui/react");
|
982
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
797
983
|
var FormLegend = (props) => {
|
798
|
-
const styles =
|
799
|
-
return /* @__PURE__ */
|
984
|
+
const styles = (0, import_react17.useStyleConfig)("SuiFormLegend");
|
985
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react17.FormLabel, { as: "legend", sx: styles, ...props });
|
800
986
|
};
|
801
987
|
var ObjectField = (props) => {
|
802
988
|
const {
|
@@ -811,9 +997,9 @@ var ObjectField = (props) => {
|
|
811
997
|
const { hideLabel, columns, spacing, ...overrides } = useFieldProps(
|
812
998
|
name
|
813
999
|
);
|
814
|
-
return /* @__PURE__ */
|
815
|
-
/* @__PURE__ */
|
816
|
-
/* @__PURE__ */
|
1000
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react17.FormControl, { name, as: "fieldset", ...fieldProps, ...overrides, children: [
|
1001
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FormLegend, { display: hideLabelProp || hideLabel ? "none" : "block", children: label }),
|
1002
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
817
1003
|
FormLayout,
|
818
1004
|
{
|
819
1005
|
columns: columnsProp || columns,
|
@@ -824,10 +1010,13 @@ var ObjectField = (props) => {
|
|
824
1010
|
] });
|
825
1011
|
};
|
826
1012
|
ObjectField.displayName = "ObjectField";
|
1013
|
+
|
1014
|
+
// src/fields.tsx
|
1015
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
827
1016
|
var mapNestedFields2 = (resolver, name) => {
|
828
1017
|
var _a;
|
829
1018
|
return (_a = resolver.getNestedFields(name)) == null ? void 0 : _a.map(
|
830
|
-
({ name: name2, type, ...nestedFieldProps }, i) => /* @__PURE__ */
|
1019
|
+
({ name: name2, type, ...nestedFieldProps }, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
831
1020
|
Field,
|
832
1021
|
{
|
833
1022
|
name: name2,
|
@@ -847,10 +1036,10 @@ var AutoFields = ({
|
|
847
1036
|
const context = useFormContext();
|
848
1037
|
const schema = schemaProp || context.schema;
|
849
1038
|
const fieldResolver = fieldResolverProp || context.fieldResolver;
|
850
|
-
const resolver =
|
851
|
-
const fields =
|
1039
|
+
const resolver = React10.useMemo(() => fieldResolver, [schema, fieldResolver]);
|
1040
|
+
const fields = React10.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
|
852
1041
|
const form = useFormContext();
|
853
|
-
|
1042
|
+
React10.useEffect(() => {
|
854
1043
|
var _a;
|
855
1044
|
if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
|
856
1045
|
form.setFocus(fields[0].name);
|
@@ -859,7 +1048,7 @@ var AutoFields = ({
|
|
859
1048
|
if (!resolver) {
|
860
1049
|
return null;
|
861
1050
|
}
|
862
|
-
return /* @__PURE__ */
|
1051
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FormLayout, { ...props, children: fields == null ? void 0 : fields.map(
|
863
1052
|
({
|
864
1053
|
name,
|
865
1054
|
type,
|
@@ -867,16 +1056,21 @@ var AutoFields = ({
|
|
867
1056
|
...fieldProps
|
868
1057
|
}) => {
|
869
1058
|
if (type === "array") {
|
870
|
-
return /* @__PURE__ */
|
1059
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ArrayField, { name, ...fieldProps, children: mapNestedFields2(resolver, name) }, name);
|
871
1060
|
} else if (type === "object") {
|
872
|
-
return /* @__PURE__ */
|
1061
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ObjectField, { name, ...fieldProps, children: mapNestedFields2(resolver, name) }, name);
|
873
1062
|
}
|
874
|
-
return /* @__PURE__ */
|
1063
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Field, { name, type, ...fieldProps }, name);
|
875
1064
|
}
|
876
1065
|
) });
|
877
1066
|
};
|
878
1067
|
AutoFields.displayName = "Fields";
|
879
|
-
|
1068
|
+
|
1069
|
+
// src/submit-button.tsx
|
1070
|
+
var import_react_hook_form5 = require("react-hook-form");
|
1071
|
+
var import_react18 = require("@chakra-ui/react");
|
1072
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
1073
|
+
var SubmitButton = (0, import_react18.forwardRef)(
|
880
1074
|
(props, ref) => {
|
881
1075
|
const {
|
882
1076
|
children = "Submit",
|
@@ -886,10 +1080,10 @@ var SubmitButton = react.forwardRef(
|
|
886
1080
|
isLoading,
|
887
1081
|
...rest
|
888
1082
|
} = props;
|
889
|
-
const { formState } =
|
1083
|
+
const { formState } = (0, import_react_hook_form5.useFormContext)();
|
890
1084
|
const isDisabled = disableIfUntouched && !formState.isDirty || disableIfInvalid && !formState.isValid || isDisabledProp;
|
891
|
-
return /* @__PURE__ */
|
892
|
-
|
1085
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
1086
|
+
import_react18.Button,
|
893
1087
|
{
|
894
1088
|
...rest,
|
895
1089
|
ref,
|
@@ -907,6 +1101,9 @@ SubmitButton.defaultProps = {
|
|
907
1101
|
disableIfInvalid: false
|
908
1102
|
};
|
909
1103
|
SubmitButton.displayName = "SubmitButton";
|
1104
|
+
|
1105
|
+
// src/display-if.tsx
|
1106
|
+
var import_react_hook_form6 = require("react-hook-form");
|
910
1107
|
var DisplayIf = ({
|
911
1108
|
children,
|
912
1109
|
name,
|
@@ -915,7 +1112,7 @@ var DisplayIf = ({
|
|
915
1112
|
isExact,
|
916
1113
|
condition = (value) => !!value
|
917
1114
|
}) => {
|
918
|
-
const value =
|
1115
|
+
const value = (0, import_react_hook_form6.useWatch)({
|
919
1116
|
name,
|
920
1117
|
defaultValue,
|
921
1118
|
disabled: isDisabled,
|
@@ -925,17 +1122,28 @@ var DisplayIf = ({
|
|
925
1122
|
return condition(value, context) ? children : null;
|
926
1123
|
};
|
927
1124
|
DisplayIf.displayName = "DisplayIf";
|
928
|
-
|
1125
|
+
|
1126
|
+
// src/step-form.tsx
|
1127
|
+
var React12 = __toESM(require("react"));
|
1128
|
+
var import_react19 = require("@chakra-ui/react");
|
1129
|
+
var import_utils9 = require("@chakra-ui/utils");
|
1130
|
+
var import_core4 = require("@saas-ui/core");
|
1131
|
+
|
1132
|
+
// src/use-step-form.tsx
|
1133
|
+
var React11 = __toESM(require("react"));
|
1134
|
+
var import_react_utils3 = require("@chakra-ui/react-utils");
|
1135
|
+
var import_core3 = require("@saas-ui/core");
|
1136
|
+
var [StepFormProvider, useStepFormContext] = (0, import_react_utils3.createContext)({
|
929
1137
|
name: "StepFormContext",
|
930
1138
|
errorMessage: "useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`"
|
931
1139
|
});
|
932
1140
|
function useStepForm(props) {
|
933
1141
|
const { onChange, steps: stepsOptions, resolver, ...rest } = props;
|
934
|
-
const stepper =
|
935
|
-
const [options, setOptions] =
|
1142
|
+
const stepper = (0, import_core3.useStepper)(rest);
|
1143
|
+
const [options, setOptions] = React11.useState(stepsOptions);
|
936
1144
|
const { activeStep, isLastStep, nextStep } = stepper;
|
937
|
-
const [steps, updateSteps] =
|
938
|
-
const onSubmitStep =
|
1145
|
+
const [steps, updateSteps] = React11.useState({});
|
1146
|
+
const onSubmitStep = React11.useCallback(
|
939
1147
|
async (data) => {
|
940
1148
|
var _a, _b;
|
941
1149
|
try {
|
@@ -956,7 +1164,7 @@ function useStepForm(props) {
|
|
956
1164
|
},
|
957
1165
|
[steps, activeStep, isLastStep]
|
958
1166
|
);
|
959
|
-
const getFormProps =
|
1167
|
+
const getFormProps = React11.useCallback(() => {
|
960
1168
|
const step = steps[activeStep];
|
961
1169
|
return {
|
962
1170
|
onSubmit: onSubmitStep,
|
@@ -967,7 +1175,7 @@ function useStepForm(props) {
|
|
967
1175
|
) : void 0
|
968
1176
|
};
|
969
1177
|
}, [steps, onSubmitStep, activeStep]);
|
970
|
-
const updateStep =
|
1178
|
+
const updateStep = React11.useCallback(
|
971
1179
|
(step) => {
|
972
1180
|
const stepOptions = options == null ? void 0 : options.find((s) => s.name === step.name);
|
973
1181
|
updateSteps((steps2) => {
|
@@ -991,9 +1199,9 @@ function useStepForm(props) {
|
|
991
1199
|
}
|
992
1200
|
function useFormStep(props) {
|
993
1201
|
const { name, schema, resolver, onSubmit } = props;
|
994
|
-
const step =
|
1202
|
+
const step = (0, import_core3.useStep)({ name });
|
995
1203
|
const { steps, updateStep } = useStepFormContext();
|
996
|
-
|
1204
|
+
React11.useEffect(() => {
|
997
1205
|
updateStep({ name, schema, resolver, onSubmit });
|
998
1206
|
}, [name, schema]);
|
999
1207
|
return {
|
@@ -1001,8 +1209,11 @@ function useFormStep(props) {
|
|
1001
1209
|
...steps[name] || { name, schema }
|
1002
1210
|
};
|
1003
1211
|
}
|
1212
|
+
|
1213
|
+
// src/step-form.tsx
|
1214
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
1004
1215
|
var FormStepper = (props) => {
|
1005
|
-
const { activeIndex, setIndex } =
|
1216
|
+
const { activeIndex, setIndex } = (0, import_core4.useStepperContext)();
|
1006
1217
|
const {
|
1007
1218
|
children,
|
1008
1219
|
orientation,
|
@@ -1013,11 +1224,11 @@ var FormStepper = (props) => {
|
|
1013
1224
|
render,
|
1014
1225
|
...rest
|
1015
1226
|
} = props;
|
1016
|
-
const elements =
|
1017
|
-
if (
|
1227
|
+
const elements = React12.Children.map(children, (child) => {
|
1228
|
+
if (React12.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
|
1018
1229
|
const { isCompleted } = useFormStep(child.props);
|
1019
|
-
return /* @__PURE__ */
|
1020
|
-
|
1230
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
1231
|
+
import_core4.StepsItem,
|
1021
1232
|
{
|
1022
1233
|
render,
|
1023
1234
|
name: child.props.name,
|
@@ -1030,12 +1241,12 @@ var FormStepper = (props) => {
|
|
1030
1241
|
}
|
1031
1242
|
return child;
|
1032
1243
|
});
|
1033
|
-
const onChange =
|
1244
|
+
const onChange = React12.useCallback((i) => {
|
1034
1245
|
setIndex(i);
|
1035
1246
|
onChangeProp == null ? void 0 : onChangeProp(i);
|
1036
1247
|
}, []);
|
1037
|
-
return /* @__PURE__ */
|
1038
|
-
|
1248
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
1249
|
+
import_core4.Steps,
|
1039
1250
|
{
|
1040
1251
|
orientation,
|
1041
1252
|
step: activeIndex,
|
@@ -1051,37 +1262,40 @@ var FormStep = (props) => {
|
|
1051
1262
|
const { name, children, className, onSubmit, ...rest } = props;
|
1052
1263
|
const step = useFormStep({ name, onSubmit });
|
1053
1264
|
const { isActive } = step;
|
1054
|
-
return isActive ? /* @__PURE__ */
|
1265
|
+
return isActive ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react19.chakra.div, { ...rest, className: (0, import_utils9.cx)("sui-form__step", className), children }) : null;
|
1055
1266
|
};
|
1056
1267
|
FormStep.displayName = "FormStep";
|
1057
1268
|
var PrevButton = (props) => {
|
1058
|
-
const { isFirstStep, isCompleted, prevStep } =
|
1059
|
-
return /* @__PURE__ */
|
1060
|
-
|
1269
|
+
const { isFirstStep, isCompleted, prevStep } = (0, import_core4.useStepperContext)();
|
1270
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
1271
|
+
import_react19.Button,
|
1061
1272
|
{
|
1062
1273
|
isDisabled: isFirstStep || isCompleted,
|
1063
1274
|
children: "Back",
|
1064
1275
|
...props,
|
1065
|
-
className:
|
1066
|
-
onClick:
|
1276
|
+
className: (0, import_utils9.cx)("sui-form__prev-button", props.className),
|
1277
|
+
onClick: (0, import_utils9.callAllHandlers)(props.onClick, prevStep)
|
1067
1278
|
}
|
1068
1279
|
);
|
1069
1280
|
};
|
1070
1281
|
PrevButton.displayName = "PrevButton";
|
1071
1282
|
var NextButton = (props) => {
|
1072
1283
|
const { label = "Next", submitLabel = "Complete", ...rest } = props;
|
1073
|
-
const { isLastStep, isCompleted } =
|
1074
|
-
return /* @__PURE__ */
|
1284
|
+
const { isLastStep, isCompleted } = (0, import_core4.useStepperContext)();
|
1285
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
1075
1286
|
SubmitButton,
|
1076
1287
|
{
|
1077
1288
|
...rest,
|
1078
1289
|
isDisabled: isCompleted,
|
1079
|
-
className:
|
1290
|
+
className: (0, import_utils9.cx)("sui-form__next-button", props.className),
|
1080
1291
|
children: isLastStep || isCompleted ? submitLabel : label
|
1081
1292
|
}
|
1082
1293
|
);
|
1083
1294
|
};
|
1084
1295
|
NextButton.displayName = "NextButton";
|
1296
|
+
|
1297
|
+
// src/field-resolver.ts
|
1298
|
+
var import_utils10 = require("@chakra-ui/utils");
|
1085
1299
|
var mapFields = (schema) => schema && Object.entries(schema).map(([name, { items, label, title, ...field }]) => {
|
1086
1300
|
return {
|
1087
1301
|
...field,
|
@@ -1096,7 +1310,7 @@ var objectFieldResolver = (schema) => {
|
|
1096
1310
|
};
|
1097
1311
|
const getNestedFields = (name) => {
|
1098
1312
|
var _a;
|
1099
|
-
const field =
|
1313
|
+
const field = (0, import_utils10.get)(schema, name);
|
1100
1314
|
if (!field)
|
1101
1315
|
return [];
|
1102
1316
|
if (((_a = field.items) == null ? void 0 : _a.type) === "object") {
|
@@ -1108,10 +1322,13 @@ var objectFieldResolver = (schema) => {
|
|
1108
1322
|
};
|
1109
1323
|
return { getFields, getNestedFields };
|
1110
1324
|
};
|
1325
|
+
|
1326
|
+
// src/watch-field.tsx
|
1327
|
+
var import_react_hook_form7 = require("react-hook-form");
|
1111
1328
|
var WatchField = (props) => {
|
1112
1329
|
const { name, defaultValue, isDisabled, isExact } = props;
|
1113
1330
|
const form = useFormContext();
|
1114
|
-
const field =
|
1331
|
+
const field = (0, import_react_hook_form7.useWatch)({
|
1115
1332
|
name,
|
1116
1333
|
defaultValue,
|
1117
1334
|
disabled: isDisabled,
|
@@ -1119,7 +1336,14 @@ var WatchField = (props) => {
|
|
1119
1336
|
});
|
1120
1337
|
return props.children(field, form) || null;
|
1121
1338
|
};
|
1122
|
-
|
1339
|
+
|
1340
|
+
// src/form.tsx
|
1341
|
+
var React13 = __toESM(require("react"));
|
1342
|
+
var import_react20 = require("@chakra-ui/react");
|
1343
|
+
var import_utils11 = require("@chakra-ui/utils");
|
1344
|
+
var import_react_hook_form8 = require("react-hook-form");
|
1345
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
1346
|
+
var Form = (0, import_react20.forwardRef)(
|
1123
1347
|
(props, ref) => {
|
1124
1348
|
const {
|
1125
1349
|
mode = "all",
|
@@ -1158,10 +1382,10 @@ var Form = react.forwardRef(
|
|
1158
1382
|
context,
|
1159
1383
|
resetOptions
|
1160
1384
|
};
|
1161
|
-
const methods =
|
1385
|
+
const methods = (0, import_react_hook_form8.useForm)(form);
|
1162
1386
|
const { handleSubmit } = methods;
|
1163
|
-
|
1164
|
-
|
1387
|
+
React13.useImperativeHandle(formRef, () => methods, [formRef, methods]);
|
1388
|
+
React13.useEffect(() => {
|
1165
1389
|
let subscription;
|
1166
1390
|
if (onChange) {
|
1167
1391
|
subscription = methods.watch(onChange);
|
@@ -1170,26 +1394,26 @@ var Form = react.forwardRef(
|
|
1170
1394
|
}, [methods, onChange]);
|
1171
1395
|
let _children = children;
|
1172
1396
|
if (!_children && fieldResolver) {
|
1173
|
-
_children = /* @__PURE__ */
|
1174
|
-
/* @__PURE__ */
|
1175
|
-
/* @__PURE__ */
|
1397
|
+
_children = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(FormLayout, { children: [
|
1398
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AutoFields, {}),
|
1399
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SubmitButton, { ...fields == null ? void 0 : fields.submit })
|
1176
1400
|
] });
|
1177
1401
|
}
|
1178
|
-
return /* @__PURE__ */
|
1402
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
1179
1403
|
FormProvider,
|
1180
1404
|
{
|
1181
1405
|
...methods,
|
1182
1406
|
schema,
|
1183
1407
|
fieldResolver,
|
1184
1408
|
fields,
|
1185
|
-
children: /* @__PURE__ */
|
1186
|
-
|
1409
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
1410
|
+
import_react20.chakra.form,
|
1187
1411
|
{
|
1188
1412
|
ref,
|
1189
1413
|
onSubmit: handleSubmit(onSubmit, onError),
|
1190
1414
|
...rest,
|
1191
|
-
className:
|
1192
|
-
children:
|
1415
|
+
className: (0, import_utils11.cx)("sui-form", props.className),
|
1416
|
+
children: (0, import_utils11.runIfFn)(_children, {
|
1193
1417
|
Field,
|
1194
1418
|
DisplayIf,
|
1195
1419
|
ArrayField,
|
@@ -1203,15 +1427,19 @@ var Form = react.forwardRef(
|
|
1203
1427
|
}
|
1204
1428
|
);
|
1205
1429
|
Form.displayName = "Form";
|
1430
|
+
|
1431
|
+
// src/create-form.tsx
|
1432
|
+
var import_react21 = require("@chakra-ui/react");
|
1433
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
1206
1434
|
function createForm({
|
1207
1435
|
resolver,
|
1208
1436
|
fieldResolver = objectFieldResolver,
|
1209
1437
|
fields
|
1210
1438
|
} = {}) {
|
1211
|
-
const DefaultForm =
|
1439
|
+
const DefaultForm = (0, import_react21.forwardRef)(
|
1212
1440
|
(props, ref) => {
|
1213
1441
|
const { schema, ...rest } = props;
|
1214
|
-
return /* @__PURE__ */
|
1442
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
1215
1443
|
Form,
|
1216
1444
|
{
|
1217
1445
|
ref,
|
@@ -1226,8 +1454,15 @@ function createForm({
|
|
1226
1454
|
DefaultForm.id = "Form";
|
1227
1455
|
return DefaultForm;
|
1228
1456
|
}
|
1457
|
+
|
1458
|
+
// src/create-step-form.tsx
|
1459
|
+
var import_react22 = require("react");
|
1460
|
+
var import_react23 = require("@chakra-ui/react");
|
1461
|
+
var import_core5 = require("@saas-ui/core");
|
1462
|
+
var import_utils12 = require("@chakra-ui/utils");
|
1463
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
1229
1464
|
function createStepForm({ fields, resolver, fieldResolver } = {}) {
|
1230
|
-
const StepForm2 =
|
1465
|
+
const StepForm2 = (0, import_react23.forwardRef)((props, ref) => {
|
1231
1466
|
const { children, steps, ...rest } = props;
|
1232
1467
|
const stepper = useStepForm({
|
1233
1468
|
resolver,
|
@@ -1235,8 +1470,8 @@ function createStepForm({ fields, resolver, fieldResolver } = {}) {
|
|
1235
1470
|
...props
|
1236
1471
|
});
|
1237
1472
|
const { getFormProps, ...ctx } = stepper;
|
1238
|
-
const context =
|
1239
|
-
return /* @__PURE__ */
|
1473
|
+
const context = (0, import_react22.useMemo)(() => ctx, [ctx]);
|
1474
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core5.StepperProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StepFormProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Form, { ref, ...rest, ...getFormProps(), children: (0, import_utils12.runIfFn)(children, {
|
1240
1475
|
...stepper,
|
1241
1476
|
Field,
|
1242
1477
|
FormStep,
|
@@ -1248,101 +1483,84 @@ function createStepForm({ fields, resolver, fieldResolver } = {}) {
|
|
1248
1483
|
StepForm2.displayName = `Step${Form.displayName || Form.name}`;
|
1249
1484
|
return StepForm2;
|
1250
1485
|
}
|
1486
|
+
|
1487
|
+
// src/index.ts
|
1488
|
+
var import_react_hook_form9 = require("react-hook-form");
|
1251
1489
|
var Form2 = createForm();
|
1252
1490
|
var StepForm = createStepForm();
|
1253
|
-
|
1254
|
-
|
1255
|
-
|
1256
|
-
|
1257
|
-
|
1258
|
-
|
1259
|
-
|
1260
|
-
|
1261
|
-
|
1262
|
-
|
1263
|
-
|
1264
|
-
|
1265
|
-
|
1266
|
-
|
1267
|
-
|
1268
|
-
|
1269
|
-
|
1270
|
-
|
1271
|
-
|
1272
|
-
|
1273
|
-
|
1274
|
-
|
1275
|
-
|
1276
|
-
|
1277
|
-
|
1278
|
-
|
1279
|
-
|
1280
|
-
|
1491
|
+
// Annotate the CommonJS export names for ESM import in node:
|
1492
|
+
0 && (module.exports = {
|
1493
|
+
ArrayField,
|
1494
|
+
ArrayFieldAddButton,
|
1495
|
+
ArrayFieldContainer,
|
1496
|
+
ArrayFieldProvider,
|
1497
|
+
ArrayFieldRemoveButton,
|
1498
|
+
ArrayFieldRow,
|
1499
|
+
ArrayFieldRowContainer,
|
1500
|
+
ArrayFieldRowFields,
|
1501
|
+
ArrayFieldRowProvider,
|
1502
|
+
ArrayFieldRows,
|
1503
|
+
AutoFields,
|
1504
|
+
BaseField,
|
1505
|
+
BaseForm,
|
1506
|
+
CheckboxField,
|
1507
|
+
Controller,
|
1508
|
+
DisplayField,
|
1509
|
+
DisplayIf,
|
1510
|
+
Field,
|
1511
|
+
FieldsProvider,
|
1512
|
+
Form,
|
1513
|
+
FormLayout,
|
1514
|
+
FormLegend,
|
1515
|
+
FormProvider,
|
1516
|
+
FormStep,
|
1517
|
+
FormStepper,
|
1518
|
+
FormValue,
|
1519
|
+
InputField,
|
1520
|
+
InputRightButton,
|
1521
|
+
NativeSelect,
|
1522
|
+
NativeSelectField,
|
1523
|
+
NextButton,
|
1524
|
+
NumberInputField,
|
1525
|
+
ObjectField,
|
1526
|
+
PasswordInput,
|
1527
|
+
PasswordInputField,
|
1528
|
+
PinField,
|
1529
|
+
PrevButton,
|
1530
|
+
RadioField,
|
1531
|
+
RadioInput,
|
1532
|
+
Select,
|
1533
|
+
SelectButton,
|
1534
|
+
SelectField,
|
1535
|
+
SelectList,
|
1536
|
+
SelectOption,
|
1537
|
+
StepForm,
|
1538
|
+
StepFormProvider,
|
1539
|
+
SubmitButton,
|
1540
|
+
SwitchField,
|
1541
|
+
TextareaField,
|
1542
|
+
WatchField,
|
1543
|
+
appendErrors,
|
1544
|
+
createField,
|
1545
|
+
createForm,
|
1546
|
+
createStepForm,
|
1547
|
+
defaultFieldTypes,
|
1548
|
+
objectFieldResolver,
|
1549
|
+
useArrayField,
|
1550
|
+
useArrayFieldAddButton,
|
1551
|
+
useArrayFieldContext,
|
1552
|
+
useArrayFieldRemoveButton,
|
1553
|
+
useArrayFieldRow,
|
1554
|
+
useArrayFieldRowContext,
|
1555
|
+
useController,
|
1556
|
+
useField,
|
1557
|
+
useFieldArray,
|
1558
|
+
useForm,
|
1559
|
+
useFormContext,
|
1560
|
+
useFormState,
|
1561
|
+
useFormStep,
|
1562
|
+
useStepForm,
|
1563
|
+
useStepFormContext,
|
1564
|
+
useWatch
|
1281
1565
|
});
|
1282
|
-
exports.ArrayField = ArrayField;
|
1283
|
-
exports.ArrayFieldAddButton = ArrayFieldAddButton;
|
1284
|
-
exports.ArrayFieldContainer = ArrayFieldContainer;
|
1285
|
-
exports.ArrayFieldProvider = ArrayFieldProvider;
|
1286
|
-
exports.ArrayFieldRemoveButton = ArrayFieldRemoveButton;
|
1287
|
-
exports.ArrayFieldRow = ArrayFieldRow;
|
1288
|
-
exports.ArrayFieldRowContainer = ArrayFieldRowContainer;
|
1289
|
-
exports.ArrayFieldRowFields = ArrayFieldRowFields;
|
1290
|
-
exports.ArrayFieldRowProvider = ArrayFieldRowProvider;
|
1291
|
-
exports.ArrayFieldRows = ArrayFieldRows;
|
1292
|
-
exports.AutoFields = AutoFields;
|
1293
|
-
exports.BaseField = BaseField;
|
1294
|
-
exports.BaseForm = Form;
|
1295
|
-
exports.CheckboxField = CheckboxField;
|
1296
|
-
exports.DisplayField = DisplayField;
|
1297
|
-
exports.DisplayIf = DisplayIf;
|
1298
|
-
exports.Field = Field;
|
1299
|
-
exports.FieldsProvider = FieldsProvider;
|
1300
|
-
exports.Form = Form2;
|
1301
|
-
exports.FormLayout = FormLayout;
|
1302
|
-
exports.FormLegend = FormLegend;
|
1303
|
-
exports.FormProvider = FormProvider;
|
1304
|
-
exports.FormStep = FormStep;
|
1305
|
-
exports.FormStepper = FormStepper;
|
1306
|
-
exports.FormValue = FormValue;
|
1307
|
-
exports.InputField = InputField;
|
1308
|
-
exports.InputRightButton = InputRightButton;
|
1309
|
-
exports.NativeSelect = NativeSelect;
|
1310
|
-
exports.NativeSelectField = NativeSelectField;
|
1311
|
-
exports.NextButton = NextButton;
|
1312
|
-
exports.NumberInputField = NumberInputField2;
|
1313
|
-
exports.ObjectField = ObjectField;
|
1314
|
-
exports.PasswordInput = PasswordInput;
|
1315
|
-
exports.PasswordInputField = PasswordInputField;
|
1316
|
-
exports.PinField = PinField;
|
1317
|
-
exports.PrevButton = PrevButton;
|
1318
|
-
exports.RadioField = RadioField;
|
1319
|
-
exports.RadioInput = RadioInput;
|
1320
|
-
exports.Select = Select;
|
1321
|
-
exports.SelectButton = SelectButton;
|
1322
|
-
exports.SelectField = SelectField;
|
1323
|
-
exports.SelectList = SelectList;
|
1324
|
-
exports.SelectOption = SelectOption;
|
1325
|
-
exports.StepForm = StepForm;
|
1326
|
-
exports.StepFormProvider = StepFormProvider;
|
1327
|
-
exports.SubmitButton = SubmitButton;
|
1328
|
-
exports.SwitchField = SwitchField;
|
1329
|
-
exports.TextareaField = TextareaField;
|
1330
|
-
exports.WatchField = WatchField;
|
1331
|
-
exports.createField = createField;
|
1332
|
-
exports.createForm = createForm;
|
1333
|
-
exports.createStepForm = createStepForm;
|
1334
|
-
exports.defaultFieldTypes = defaultFieldTypes;
|
1335
|
-
exports.objectFieldResolver = objectFieldResolver;
|
1336
|
-
exports.useArrayField = useArrayField;
|
1337
|
-
exports.useArrayFieldAddButton = useArrayFieldAddButton;
|
1338
|
-
exports.useArrayFieldContext = useArrayFieldContext;
|
1339
|
-
exports.useArrayFieldRemoveButton = useArrayFieldRemoveButton;
|
1340
|
-
exports.useArrayFieldRow = useArrayFieldRow;
|
1341
|
-
exports.useArrayFieldRowContext = useArrayFieldRowContext;
|
1342
|
-
exports.useField = useField;
|
1343
|
-
exports.useFormContext = useFormContext;
|
1344
|
-
exports.useFormStep = useFormStep;
|
1345
|
-
exports.useStepForm = useStepForm;
|
1346
|
-
exports.useStepFormContext = useStepFormContext;
|
1347
|
-
//# sourceMappingURL=out.js.map
|
1348
1566
|
//# sourceMappingURL=index.js.map
|