@saas-ui/forms 2.0.5 → 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|