@saas-ui/forms 2.0.0-next.3 → 2.0.0-next.6
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 +43 -0
- package/README.md +53 -6
- package/dist/ajv/index.d.ts +358 -11
- package/dist/ajv/index.js +7 -9
- package/dist/ajv/index.js.map +1 -1
- package/dist/ajv/index.mjs +7 -10
- package/dist/ajv/index.mjs.map +1 -1
- package/dist/index.d.ts +448 -247
- package/dist/index.js +707 -682
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +691 -666
- package/dist/index.mjs.map +1 -1
- package/dist/yup/index.d.ts +580 -21
- package/dist/yup/index.js +6 -10
- package/dist/yup/index.js.map +1 -1
- package/dist/yup/index.mjs +4 -8
- package/dist/yup/index.mjs.map +1 -1
- package/dist/zod/index.d.ts +580 -11
- package/dist/zod/index.js +5 -0
- package/dist/zod/index.js.map +1 -1
- package/dist/zod/index.mjs +5 -1
- package/dist/zod/index.mjs.map +1 -1
- package/package.json +19 -10
- package/src/array-field.tsx +82 -45
- package/src/auto-form.tsx +7 -3
- package/src/base-field.tsx +54 -0
- package/src/create-field.tsx +144 -0
- package/src/create-form.tsx +54 -0
- package/src/default-fields.tsx +163 -0
- package/src/display-field.tsx +9 -11
- package/src/display-if.tsx +20 -13
- package/src/field-resolver.ts +10 -8
- package/src/field.tsx +18 -445
- package/src/fields-context.tsx +23 -0
- package/src/fields.tsx +34 -21
- package/src/form-context.tsx +84 -0
- package/src/form.tsx +69 -52
- package/src/index.ts +44 -4
- package/src/input-right-button/input-right-button.stories.tsx +1 -1
- package/src/input-right-button/input-right-button.tsx +0 -2
- package/src/layout.tsx +16 -11
- package/src/number-input/number-input.tsx +9 -5
- package/src/object-field.tsx +13 -8
- package/src/password-input/password-input.stories.tsx +23 -2
- package/src/password-input/password-input.tsx +6 -6
- package/src/pin-input/pin-input.tsx +1 -5
- package/src/radio/radio-input.stories.tsx +1 -1
- package/src/radio/radio-input.tsx +12 -10
- package/src/select/native-select.tsx +1 -4
- package/src/select/select-context.tsx +130 -0
- package/src/select/select.stories.tsx +116 -85
- package/src/select/select.test.tsx +1 -1
- package/src/select/select.tsx +160 -146
- package/src/step-form.tsx +29 -11
- package/src/submit-button.tsx +5 -1
- package/src/types.ts +144 -0
- package/src/use-array-field.tsx +9 -3
- package/src/utils.ts +23 -1
- package/src/watch-field.tsx +2 -6
- /package/src/radio/{radio.test.tsx → radio-input.test.tsx} +0 -0
package/dist/index.js
CHANGED
@@ -1,14 +1,16 @@
|
|
1
1
|
'use strict';
|
2
2
|
|
3
|
-
var
|
4
|
-
var utils = require('@chakra-ui/utils');
|
3
|
+
var React11 = require('react');
|
5
4
|
var reactHookForm = require('react-hook-form');
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
6
6
|
var react = require('@chakra-ui/react');
|
7
|
-
var icons = require('@chakra-ui/icons');
|
8
|
-
var reactUtils = require('@chakra-ui/react-utils');
|
9
7
|
var core = require('@saas-ui/core');
|
8
|
+
var icons = require('@saas-ui/core/icons');
|
9
|
+
var utils = require('@chakra-ui/utils');
|
10
|
+
var reactUtils = require('@chakra-ui/react-utils');
|
10
11
|
|
11
|
-
function
|
12
|
+
function _interopNamespace(e) {
|
13
|
+
if (e && e.__esModule) return e;
|
12
14
|
var n = Object.create(null);
|
13
15
|
if (e) {
|
14
16
|
Object.keys(e).forEach(function (k) {
|
@@ -25,70 +27,74 @@ function _interopNamespaceDefault(e) {
|
|
25
27
|
return Object.freeze(n);
|
26
28
|
}
|
27
29
|
|
28
|
-
var
|
30
|
+
var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
|
29
31
|
|
30
|
-
// src/
|
32
|
+
// src/form-context.tsx
|
33
|
+
var FormContext = React11.createContext(null);
|
34
|
+
var useFormContext = () => {
|
35
|
+
const context = React11.useContext(FormContext);
|
36
|
+
const hookContext = reactHookForm.useFormContext();
|
37
|
+
if (!context) {
|
38
|
+
throw new Error("FormProvider must be used within a Form component");
|
39
|
+
}
|
40
|
+
return {
|
41
|
+
...hookContext,
|
42
|
+
...context
|
43
|
+
};
|
44
|
+
};
|
45
|
+
var useFieldProps = (name) => {
|
46
|
+
var _a;
|
47
|
+
const parsedName = name == null ? void 0 : name.replace(/\.[0-9]/g, ".$");
|
48
|
+
const context = useFormContext();
|
49
|
+
return (_a = context == null ? void 0 : context.fields) == null ? void 0 : _a[parsedName];
|
50
|
+
};
|
51
|
+
var FormProvider = (props) => {
|
52
|
+
const { children, fieldResolver, schema, fields, ...rest } = props;
|
53
|
+
return /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: { fieldResolver, schema, fields }, children }) });
|
54
|
+
};
|
31
55
|
var DisplayField = ({
|
32
56
|
name,
|
33
57
|
label,
|
34
58
|
placeholder,
|
35
59
|
...props
|
36
60
|
}) => {
|
37
|
-
return /* @__PURE__ */
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
}, label) : null, /* @__PURE__ */ React8__namespace.createElement(react.Text, {
|
42
|
-
fontSize: "md"
|
43
|
-
}, /* @__PURE__ */ React8__namespace.createElement(FormValue, {
|
44
|
-
name
|
45
|
-
})));
|
61
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(react.FormControl, { ...props, children: [
|
62
|
+
label ? /* @__PURE__ */ jsxRuntime.jsx(react.FormLabel, { htmlFor: name, children: label }) : null,
|
63
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "md", children: /* @__PURE__ */ jsxRuntime.jsx(FormValue, { name }) })
|
64
|
+
] });
|
46
65
|
};
|
47
|
-
|
48
|
-
DisplayField.displayName = "DisplayField";
|
49
|
-
}
|
66
|
+
DisplayField.displayName = "DisplayField";
|
50
67
|
var FormValue = ({ name }) => {
|
51
|
-
const { getValues } =
|
68
|
+
const { getValues } = useFormContext();
|
52
69
|
return getValues(name) || null;
|
53
70
|
};
|
54
|
-
|
55
|
-
FormValue.displayName = "FormValue";
|
56
|
-
}
|
71
|
+
FormValue.displayName = "FormValue";
|
57
72
|
var NumberInput = react.forwardRef((props, ref) => {
|
58
|
-
const {
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
73
|
+
const {
|
74
|
+
hideStepper,
|
75
|
+
incrementIcon = /* @__PURE__ */ jsxRuntime.jsx(core.ChevronUpIcon, {}),
|
76
|
+
decrementIcon = /* @__PURE__ */ jsxRuntime.jsx(core.ChevronDownIcon, {}),
|
77
|
+
...rest
|
78
|
+
} = props;
|
79
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(react.NumberInput, { ...rest, ref, children: [
|
80
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.NumberInputField, {}),
|
81
|
+
!hideStepper && /* @__PURE__ */ jsxRuntime.jsxs(react.NumberInputStepper, { children: [
|
82
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.NumberIncrementStepper, { children: incrementIcon }),
|
83
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.NumberDecrementStepper, { children: decrementIcon })
|
84
|
+
] })
|
85
|
+
] });
|
67
86
|
});
|
68
87
|
NumberInput.defaultProps = {
|
69
88
|
hideStepper: false
|
70
89
|
};
|
71
|
-
|
72
|
-
NumberInput.displayName = "NumberInput";
|
73
|
-
}
|
90
|
+
NumberInput.displayName = "NumberInput";
|
74
91
|
var InputRightButton = react.forwardRef(
|
75
92
|
(props, ref) => {
|
76
|
-
return /* @__PURE__ */
|
77
|
-
w: "auto",
|
78
|
-
px: "1",
|
79
|
-
py: "1",
|
80
|
-
alignItems: "stretch"
|
81
|
-
}, /* @__PURE__ */ React8__namespace.createElement(react.Button, {
|
82
|
-
ref,
|
83
|
-
height: "auto",
|
84
|
-
...props
|
85
|
-
}));
|
93
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.InputRightElement, { w: "auto", px: "1", py: "1", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsx(react.Button, { ref, height: "auto", ...props }) });
|
86
94
|
}
|
87
95
|
);
|
88
96
|
InputRightButton.id = "InputRightElement";
|
89
97
|
InputRightButton.displayName = "InputRightButton";
|
90
|
-
|
91
|
-
// src/password-input/password-input.tsx
|
92
98
|
var PasswordInput = react.forwardRef(
|
93
99
|
(props, ref) => {
|
94
100
|
const {
|
@@ -99,219 +105,285 @@ var PasswordInput = react.forwardRef(
|
|
99
105
|
width,
|
100
106
|
size,
|
101
107
|
variant,
|
108
|
+
leftAddon,
|
102
109
|
...inputProps
|
103
110
|
} = props;
|
104
|
-
const [show, setShow] =
|
111
|
+
const [show, setShow] = React11.useState(false);
|
105
112
|
const handleClick = () => setShow(!show);
|
106
113
|
const label = show ? "Hide password" : "Show password";
|
107
114
|
let icon;
|
108
115
|
if (show) {
|
109
|
-
icon = viewIcon || /* @__PURE__ */
|
116
|
+
icon = viewIcon || /* @__PURE__ */ jsxRuntime.jsx(icons.ViewIcon, {});
|
110
117
|
} else {
|
111
|
-
icon = viewOffIcon || /* @__PURE__ */
|
118
|
+
icon = viewOffIcon || /* @__PURE__ */ jsxRuntime.jsx(icons.ViewOffIcon, {});
|
112
119
|
}
|
113
120
|
const groupProps = {
|
114
121
|
width: w || width,
|
115
122
|
size,
|
116
123
|
variant
|
117
124
|
};
|
118
|
-
return /* @__PURE__ */
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
125
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(react.InputGroup, { ...groupProps, children: [
|
126
|
+
leftAddon,
|
127
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
128
|
+
react.Input,
|
129
|
+
{
|
130
|
+
...inputProps,
|
131
|
+
ref,
|
132
|
+
type: show ? "text" : "password",
|
133
|
+
autoComplete: show ? "off" : autoComplete
|
134
|
+
}
|
135
|
+
),
|
136
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
137
|
+
InputRightButton,
|
138
|
+
{
|
139
|
+
onClick: handleClick,
|
140
|
+
"aria-label": label,
|
141
|
+
variant: "ghost",
|
142
|
+
children: icon
|
143
|
+
}
|
144
|
+
)
|
145
|
+
] });
|
130
146
|
}
|
131
147
|
);
|
132
|
-
|
133
|
-
|
134
|
-
|
148
|
+
PasswordInput.displayName = "PasswordInput";
|
149
|
+
var mapNestedFields = (name, children) => {
|
150
|
+
return React11__namespace.Children.map(children, (child) => {
|
151
|
+
if (React11__namespace.isValidElement(child) && child.props.name) {
|
152
|
+
let childName = child.props.name;
|
153
|
+
if (childName.includes(".")) {
|
154
|
+
childName = childName.replace(/^.*\.(.*)/, "$1");
|
155
|
+
} else if (childName.includes(".$")) {
|
156
|
+
childName = childName.replace(/^.*\.\$(.*)/, "$1");
|
157
|
+
}
|
158
|
+
return React11__namespace.cloneElement(child, {
|
159
|
+
...child.props,
|
160
|
+
name: `${name}.${childName}`
|
161
|
+
});
|
162
|
+
}
|
163
|
+
return child;
|
164
|
+
});
|
165
|
+
};
|
166
|
+
var mapOptions = (options) => {
|
167
|
+
return options.map((option) => {
|
168
|
+
if (typeof option === "string") {
|
169
|
+
return {
|
170
|
+
label: option,
|
171
|
+
value: option
|
172
|
+
};
|
173
|
+
}
|
174
|
+
return option;
|
175
|
+
});
|
176
|
+
};
|
135
177
|
var RadioInput = react.forwardRef(
|
136
|
-
({ options, spacing, direction, ...props }, ref) => {
|
178
|
+
({ options: optionsProp, spacing, direction, ...props }, ref) => {
|
137
179
|
const { onBlur, onChange, ...groupProps } = props;
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
})));
|
180
|
+
const options = mapOptions(optionsProp);
|
181
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.RadioGroup, { onChange, ...groupProps, children: /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { spacing, direction, children: options.map(({ value, label, ...radioProps }, i) => {
|
182
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
183
|
+
react.Radio,
|
184
|
+
{
|
185
|
+
onBlur,
|
186
|
+
value,
|
187
|
+
ref,
|
188
|
+
...radioProps,
|
189
|
+
children: label || value
|
190
|
+
},
|
191
|
+
i
|
192
|
+
);
|
193
|
+
}) }) });
|
153
194
|
}
|
154
195
|
);
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
var SelectButton = react.forwardRef((props, ref) => {
|
159
|
-
const styles = react.useMultiStyleConfig("Input", props);
|
160
|
-
const focusStyles = styles.field._focusVisible;
|
161
|
-
const height = styles.field.h || styles.field.height;
|
162
|
-
const buttonStyles = {
|
163
|
-
fontWeight: "normal",
|
164
|
-
textAlign: "left",
|
165
|
-
color: "inherit",
|
166
|
-
_active: {
|
167
|
-
bg: "transparent"
|
168
|
-
},
|
169
|
-
minH: height,
|
170
|
-
_focus: focusStyles,
|
171
|
-
_expanded: focusStyles,
|
172
|
-
...styles.field,
|
173
|
-
h: "auto"
|
174
|
-
};
|
175
|
-
return /* @__PURE__ */ React8__namespace.createElement(react.MenuButton, {
|
176
|
-
as: react.Button,
|
177
|
-
...props,
|
178
|
-
ref,
|
179
|
-
sx: buttonStyles
|
180
|
-
});
|
196
|
+
RadioInput.displayName = "RadioInput";
|
197
|
+
var [SelectProvider, useSelectContext] = reactUtils.createContext({
|
198
|
+
strict: true
|
181
199
|
});
|
182
|
-
|
183
|
-
SelectButton.displayName = "SelectButton";
|
184
|
-
}
|
185
|
-
var Select = react.forwardRef((props, ref) => {
|
200
|
+
var useSelect = (props) => {
|
186
201
|
const {
|
187
202
|
name,
|
188
|
-
options,
|
189
|
-
children,
|
190
|
-
onChange,
|
191
|
-
defaultValue,
|
192
203
|
value,
|
204
|
+
defaultValue,
|
205
|
+
onChange,
|
206
|
+
multiple,
|
193
207
|
placeholder,
|
208
|
+
options: optionsProp,
|
194
209
|
isDisabled,
|
195
|
-
|
196
|
-
rightIcon = /* @__PURE__ */ React8__namespace.createElement(icons.ChevronDownIcon, null),
|
197
|
-
multiple,
|
198
|
-
size,
|
199
|
-
variant,
|
200
|
-
menuListProps,
|
201
|
-
renderValue = (value2) => value2 == null ? void 0 : value2.join(", "),
|
202
|
-
...rest
|
210
|
+
renderValue = (value2) => typeof value2 === "string" ? value2 : value2 == null ? void 0 : value2.join(", ")
|
203
211
|
} = props;
|
204
|
-
const
|
205
|
-
|
212
|
+
const [currentValue, setCurrentValue] = react.useControllableState({
|
213
|
+
value,
|
214
|
+
defaultValue,
|
215
|
+
onChange
|
216
|
+
});
|
206
217
|
const controlProps = react.useFormControl({ name });
|
218
|
+
const options = React11__namespace.default.useMemo(
|
219
|
+
() => optionsProp && mapOptions(optionsProp),
|
220
|
+
[optionsProp]
|
221
|
+
);
|
207
222
|
const handleChange = (value2) => {
|
208
223
|
setCurrentValue(value2);
|
209
|
-
onChange == null ? void 0 : onChange(value2);
|
210
224
|
};
|
211
|
-
const
|
212
|
-
isDisabled,
|
213
|
-
leftIcon,
|
214
|
-
rightIcon,
|
215
|
-
size,
|
216
|
-
variant
|
217
|
-
};
|
218
|
-
const getDisplayValue = React8__namespace.useCallback(
|
225
|
+
const getDisplayValue = React11__namespace.default.useCallback(
|
219
226
|
(value2) => {
|
220
227
|
if (!options) {
|
221
228
|
return value2;
|
222
229
|
}
|
223
230
|
for (const option of options) {
|
224
|
-
if (option.
|
225
|
-
return option.label;
|
231
|
+
if (option.value === value2) {
|
232
|
+
return option.label || option.value;
|
226
233
|
}
|
227
234
|
}
|
228
235
|
return value2;
|
229
236
|
},
|
230
237
|
[options]
|
231
238
|
);
|
232
|
-
const displayValue =
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
}, /* @__PURE__ */ React8__namespace.createElement(SelectButton, {
|
241
|
-
ref,
|
242
|
-
...buttonProps
|
243
|
-
}, renderValue(displayValue) || placeholder), /* @__PURE__ */ React8__namespace.createElement(react.MenuList, {
|
244
|
-
maxH: "60vh",
|
245
|
-
overflowY: "auto",
|
246
|
-
...menuListProps
|
247
|
-
}, /* @__PURE__ */ React8__namespace.createElement(react.MenuOptionGroup, {
|
248
|
-
defaultValue: defaultValue || value,
|
249
|
-
onChange: handleChange,
|
250
|
-
type: multiple ? "checkbox" : "radio"
|
251
|
-
}, options ? options.map(({ value: value2, label, ...rest2 }, i) => /* @__PURE__ */ React8__namespace.createElement(react.MenuItemOption, {
|
252
|
-
key: i,
|
253
|
-
value: value2,
|
254
|
-
...rest2
|
255
|
-
}, label || value2)) : children)), /* @__PURE__ */ React8__namespace.createElement(react.chakra.input, {
|
256
|
-
...controlProps,
|
257
|
-
name,
|
258
|
-
type: "hidden",
|
239
|
+
const displayValue = React11__namespace.default.useMemo(
|
240
|
+
() => currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
|
241
|
+
getDisplayValue
|
242
|
+
) : [],
|
243
|
+
[currentValue, getDisplayValue]
|
244
|
+
);
|
245
|
+
return {
|
246
|
+
defaultValue,
|
259
247
|
value: currentValue,
|
260
|
-
|
261
|
-
|
248
|
+
displayValue,
|
249
|
+
renderValue,
|
250
|
+
onChange: handleChange,
|
251
|
+
options,
|
252
|
+
multiple,
|
253
|
+
controlProps,
|
254
|
+
placeholder,
|
255
|
+
isDisabled
|
256
|
+
};
|
257
|
+
};
|
258
|
+
var SelectButton = react.forwardRef(
|
259
|
+
(props, ref) => {
|
260
|
+
var _a, _b, _c, _d, _e;
|
261
|
+
const styles = react.useMultiStyleConfig("SuiSelect", props);
|
262
|
+
const {
|
263
|
+
displayValue,
|
264
|
+
renderValue,
|
265
|
+
placeholder,
|
266
|
+
isDisabled: isSelectDisabled
|
267
|
+
} = useSelectContext();
|
268
|
+
const {
|
269
|
+
isInvalid,
|
270
|
+
isReadOnly,
|
271
|
+
isDisabled,
|
272
|
+
isFocused,
|
273
|
+
isRequired,
|
274
|
+
id,
|
275
|
+
onBlur,
|
276
|
+
onFocus
|
277
|
+
} = react.useFormControlContext();
|
278
|
+
const { rightIcon = /* @__PURE__ */ jsxRuntime.jsx(core.ChevronDownIcon, {}), ...rest } = props;
|
279
|
+
const focusStyles = (_a = styles.field) == null ? void 0 : _a._focusVisible;
|
280
|
+
const readOnlyStyles = (_b = styles.field) == null ? void 0 : _b._readOnly;
|
281
|
+
const invalid = (_c = styles.field) == null ? void 0 : _c._invalid;
|
282
|
+
const height = ((_d = styles.field) == null ? void 0 : _d.h) || ((_e = styles.field) == null ? void 0 : _e.height);
|
283
|
+
const buttonStyles = {
|
284
|
+
fontWeight: "normal",
|
285
|
+
textAlign: "left",
|
286
|
+
color: "inherit",
|
287
|
+
_active: {
|
288
|
+
bg: "transparent"
|
289
|
+
},
|
290
|
+
minH: height,
|
291
|
+
_focus: focusStyles,
|
292
|
+
_expanded: focusStyles,
|
293
|
+
_readOnly: readOnlyStyles,
|
294
|
+
_invalid: invalid,
|
295
|
+
...styles.field,
|
296
|
+
h: "auto"
|
297
|
+
};
|
298
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
299
|
+
react.MenuButton,
|
300
|
+
{
|
301
|
+
as: react.Button,
|
302
|
+
id,
|
303
|
+
...rest,
|
304
|
+
onFocus,
|
305
|
+
onBlur,
|
306
|
+
isDisabled: isDisabled || isSelectDisabled,
|
307
|
+
"data-invalid": utils.dataAttr(isInvalid),
|
308
|
+
"data-read-only": utils.dataAttr(isReadOnly),
|
309
|
+
"data-focus": utils.dataAttr(isFocused),
|
310
|
+
"data-required": utils.dataAttr(isRequired),
|
311
|
+
rightIcon,
|
312
|
+
ref,
|
313
|
+
sx: buttonStyles,
|
314
|
+
children: renderValue(displayValue) || placeholder
|
315
|
+
}
|
316
|
+
);
|
317
|
+
}
|
318
|
+
);
|
319
|
+
SelectButton.displayName = "SelectButton";
|
320
|
+
var Select = react.forwardRef((props, ref) => {
|
321
|
+
const { name, children, isDisabled, multiple, ...rest } = props;
|
322
|
+
const menuProps = react.omitThemingProps(rest);
|
323
|
+
const context = useSelect(props);
|
324
|
+
const { value, controlProps } = context;
|
325
|
+
return /* @__PURE__ */ jsxRuntime.jsx(SelectProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(react.Menu, { ...menuProps, closeOnSelect: !multiple, children: /* @__PURE__ */ jsxRuntime.jsxs(react.chakra.div, { className: utils.cx("sui-select"), children: [
|
326
|
+
children,
|
327
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
328
|
+
react.chakra.input,
|
329
|
+
{
|
330
|
+
...controlProps,
|
331
|
+
ref,
|
332
|
+
name,
|
333
|
+
type: "hidden",
|
334
|
+
value: value || "",
|
335
|
+
className: "saas-select__input"
|
336
|
+
}
|
337
|
+
)
|
338
|
+
] }) }) });
|
262
339
|
});
|
263
|
-
|
264
|
-
|
265
|
-
|
340
|
+
var SelectList = (props) => {
|
341
|
+
const { defaultValue, value, options, multiple, onChange } = useSelectContext();
|
342
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.MenuList, { maxH: "100vh", overflowY: "auto", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
343
|
+
react.MenuOptionGroup,
|
344
|
+
{
|
345
|
+
defaultValue: defaultValue || value,
|
346
|
+
value,
|
347
|
+
onChange,
|
348
|
+
type: multiple ? "checkbox" : "radio",
|
349
|
+
children: options ? options.map(({ value: value2, label, ...rest }, i) => /* @__PURE__ */ jsxRuntime.jsx(SelectOption, { value: value2, ...rest, children: label || value2 }, i)) : props.children
|
350
|
+
}
|
351
|
+
) });
|
352
|
+
};
|
353
|
+
Select.displayName = "Select";
|
354
|
+
var SelectOption = react.forwardRef(
|
355
|
+
(props, ref) => {
|
356
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.MenuItemOption, { ref, ...props });
|
357
|
+
}
|
358
|
+
);
|
359
|
+
SelectOption.id = "MenuItemOption";
|
360
|
+
SelectOption.displayName = "SelectOption";
|
266
361
|
var NativeSelect = react.forwardRef(
|
267
362
|
({ options, children, ...props }, ref) => {
|
268
|
-
return /* @__PURE__ */
|
269
|
-
|
270
|
-
|
271
|
-
}, children || (options == null ? void 0 : options.map(({ value, label }) => {
|
272
|
-
return /* @__PURE__ */ React8__namespace.createElement("option", {
|
273
|
-
key: value,
|
274
|
-
value
|
275
|
-
}, label || value);
|
276
|
-
})));
|
363
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.Select, { ref, ...props, children: children || (options == null ? void 0 : options.map(({ value, label }) => {
|
364
|
+
return /* @__PURE__ */ jsxRuntime.jsx("option", { value, children: label || value }, value);
|
365
|
+
})) });
|
277
366
|
}
|
278
367
|
);
|
279
|
-
|
280
|
-
NativeSelect.displayName = "NativeSelect";
|
281
|
-
}
|
282
|
-
|
283
|
-
// src/field.tsx
|
284
|
-
var inputTypes = {};
|
285
|
-
var defaultInputType = "text";
|
286
|
-
var getInput = (type) => {
|
287
|
-
return inputTypes[type] || inputTypes[defaultInputType];
|
288
|
-
};
|
368
|
+
NativeSelect.displayName = "NativeSelect";
|
289
369
|
var getError = (name, formState) => {
|
290
370
|
return reactHookForm.get(formState.errors, name);
|
291
371
|
};
|
292
372
|
var BaseField = (props) => {
|
293
373
|
const { name, label, help, hideLabel, children, ...controlProps } = props;
|
294
|
-
const { formState } =
|
374
|
+
const { formState } = useFormContext();
|
295
375
|
const error = getError(name, formState);
|
296
|
-
return /* @__PURE__ */
|
297
|
-
|
298
|
-
|
299
|
-
|
376
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(react.FormControl, { ...controlProps, isInvalid: !!error, children: [
|
377
|
+
label && !hideLabel ? /* @__PURE__ */ jsxRuntime.jsx(react.FormLabel, { children: label }) : null,
|
378
|
+
/* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
|
379
|
+
children,
|
380
|
+
help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ jsxRuntime.jsx(react.FormHelperText, { children: help }) : null,
|
381
|
+
(error == null ? void 0 : error.message) && /* @__PURE__ */ jsxRuntime.jsx(react.FormErrorMessage, { children: error == null ? void 0 : error.message })
|
382
|
+
] })
|
383
|
+
] });
|
300
384
|
};
|
301
|
-
|
302
|
-
|
303
|
-
}
|
304
|
-
var Field = React8__namespace.forwardRef(
|
305
|
-
(props, ref) => {
|
306
|
-
const { type = defaultInputType } = props;
|
307
|
-
const InputComponent = getInput(type);
|
308
|
-
return /* @__PURE__ */ React8__namespace.createElement(InputComponent, {
|
309
|
-
ref,
|
310
|
-
...props
|
311
|
-
});
|
312
|
-
}
|
313
|
-
);
|
314
|
-
var createField = (InputComponent, { displayName, hideLabel, BaseField: BaseField2 }) => {
|
385
|
+
BaseField.displayName = "BaseField";
|
386
|
+
var _createField = (InputComponent, { displayName, hideLabel, BaseField: BaseField2 }) => {
|
315
387
|
const Field2 = react.forwardRef((props, ref) => {
|
316
388
|
const {
|
317
389
|
id,
|
@@ -329,24 +401,31 @@ var createField = (InputComponent, { displayName, hideLabel, BaseField: BaseFiel
|
|
329
401
|
required: isRequired,
|
330
402
|
...rules
|
331
403
|
};
|
332
|
-
return /* @__PURE__ */
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
|
404
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
405
|
+
BaseField2,
|
406
|
+
{
|
407
|
+
id,
|
408
|
+
name,
|
409
|
+
label,
|
410
|
+
help,
|
411
|
+
hideLabel,
|
412
|
+
isDisabled,
|
413
|
+
isInvalid,
|
414
|
+
isReadOnly,
|
415
|
+
isRequired,
|
416
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
417
|
+
InputComponent,
|
418
|
+
{
|
419
|
+
ref,
|
420
|
+
id,
|
421
|
+
name,
|
422
|
+
label: hideLabel ? label : void 0,
|
423
|
+
rules: inputRules,
|
424
|
+
...inputProps
|
425
|
+
}
|
426
|
+
)
|
427
|
+
}
|
428
|
+
);
|
350
429
|
});
|
351
430
|
Field2.displayName = displayName;
|
352
431
|
return Field2;
|
@@ -354,298 +433,194 @@ var createField = (InputComponent, { displayName, hideLabel, BaseField: BaseFiel
|
|
354
433
|
var withControlledInput = (InputComponent) => {
|
355
434
|
return react.forwardRef(
|
356
435
|
({ name, rules, ...inputProps }, ref) => {
|
357
|
-
const { control } =
|
358
|
-
return /* @__PURE__ */
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
364
|
-
...
|
365
|
-
|
366
|
-
|
367
|
-
|
368
|
-
|
369
|
-
|
436
|
+
const { control } = useFormContext();
|
437
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
438
|
+
reactHookForm.Controller,
|
439
|
+
{
|
440
|
+
name,
|
441
|
+
control,
|
442
|
+
rules,
|
443
|
+
render: ({ field: { ref: _ref, ...field } }) => /* @__PURE__ */ jsxRuntime.jsx(
|
444
|
+
InputComponent,
|
445
|
+
{
|
446
|
+
...field,
|
447
|
+
...inputProps,
|
448
|
+
onChange: utils.callAllHandlers(inputProps.onChange, field.onChange),
|
449
|
+
onBlur: utils.callAllHandlers(inputProps.onBlur, field.onBlur),
|
450
|
+
ref: react.useMergeRefs(ref, _ref)
|
451
|
+
}
|
452
|
+
)
|
453
|
+
}
|
454
|
+
);
|
370
455
|
}
|
371
456
|
);
|
372
457
|
};
|
373
458
|
var withUncontrolledInput = (InputComponent) => {
|
374
459
|
return react.forwardRef(
|
375
460
|
({ name, rules, ...inputProps }, ref) => {
|
376
|
-
const { register } =
|
461
|
+
const { register } = useFormContext();
|
377
462
|
const { ref: _ref, ...field } = register(name, rules);
|
378
|
-
return /* @__PURE__ */
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
384
|
-
|
463
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
464
|
+
InputComponent,
|
465
|
+
{
|
466
|
+
...field,
|
467
|
+
...inputProps,
|
468
|
+
onChange: utils.callAllHandlers(inputProps.onChange, field.onChange),
|
469
|
+
onBlur: utils.callAllHandlers(inputProps.onBlur, field.onBlur),
|
470
|
+
ref: react.useMergeRefs(ref, _ref)
|
471
|
+
}
|
472
|
+
);
|
385
473
|
}
|
386
474
|
);
|
387
475
|
};
|
388
|
-
var
|
476
|
+
var createField = (component, options) => {
|
477
|
+
var _a;
|
389
478
|
let InputComponent;
|
390
479
|
if (options == null ? void 0 : options.isControlled) {
|
391
480
|
InputComponent = withControlledInput(component);
|
392
481
|
} else {
|
393
482
|
InputComponent = withUncontrolledInput(component);
|
394
483
|
}
|
395
|
-
const Field2 =
|
396
|
-
displayName: `${
|
484
|
+
const Field2 = _createField(InputComponent, {
|
485
|
+
displayName: `${(_a = component.displayName) != null ? _a : "Custom"}Field`,
|
397
486
|
hideLabel: options == null ? void 0 : options.hideLabel,
|
398
487
|
BaseField: (options == null ? void 0 : options.BaseField) || BaseField
|
399
488
|
});
|
400
|
-
inputTypes[type] = Field2;
|
401
489
|
return Field2;
|
402
490
|
};
|
403
|
-
var InputField =
|
404
|
-
"text",
|
491
|
+
var InputField = createField(
|
405
492
|
react.forwardRef(({ type = "text", leftAddon, rightAddon, size, ...rest }, ref) => {
|
406
|
-
const input = /* @__PURE__ */
|
407
|
-
type,
|
408
|
-
size,
|
409
|
-
...rest,
|
410
|
-
ref
|
411
|
-
});
|
493
|
+
const input = /* @__PURE__ */ jsxRuntime.jsx(react.Input, { type, size, ...rest, ref });
|
412
494
|
if (leftAddon || rightAddon) {
|
413
|
-
return /* @__PURE__ */
|
414
|
-
|
415
|
-
|
495
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(react.InputGroup, { size, children: [
|
496
|
+
leftAddon,
|
497
|
+
input,
|
498
|
+
rightAddon
|
499
|
+
] });
|
416
500
|
}
|
417
501
|
return input;
|
418
502
|
})
|
419
503
|
);
|
420
|
-
var NumberInputField2 =
|
421
|
-
"number",
|
504
|
+
var NumberInputField2 = createField(
|
422
505
|
NumberInput,
|
423
506
|
{
|
424
507
|
isControlled: true
|
425
508
|
}
|
426
509
|
);
|
427
|
-
var PasswordInputField =
|
428
|
-
|
429
|
-
react.forwardRef((props, ref) => /* @__PURE__ */ React8__namespace.createElement(PasswordInput, {
|
430
|
-
ref,
|
431
|
-
...props
|
432
|
-
}))
|
433
|
-
);
|
434
|
-
var TextareaField = registerFieldType(
|
435
|
-
"textarea",
|
436
|
-
react.Textarea
|
510
|
+
var PasswordInputField = createField(
|
511
|
+
react.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(PasswordInput, { ref, ...props }))
|
437
512
|
);
|
438
|
-
var
|
439
|
-
|
513
|
+
var TextareaField = createField(react.Textarea);
|
514
|
+
var SwitchField = createField(
|
440
515
|
react.forwardRef(({ type, value, ...rest }, ref) => {
|
441
|
-
return /* @__PURE__ */
|
442
|
-
isChecked: !!value,
|
443
|
-
...rest,
|
444
|
-
ref
|
445
|
-
});
|
516
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.Switch, { isChecked: !!value, ...rest, ref });
|
446
517
|
}),
|
447
518
|
{
|
448
519
|
isControlled: true
|
449
520
|
}
|
450
521
|
);
|
451
|
-
var SelectField =
|
452
|
-
|
453
|
-
|
454
|
-
|
455
|
-
|
456
|
-
|
457
|
-
return /* @__PURE__ */ React8__namespace.createElement(react.Checkbox, {
|
458
|
-
ref,
|
459
|
-
...props
|
460
|
-
}, label);
|
522
|
+
var SelectField = createField(
|
523
|
+
react.forwardRef((props, ref) => {
|
524
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Select, { ref, ...props, children: [
|
525
|
+
/* @__PURE__ */ jsxRuntime.jsx(SelectButton, {}),
|
526
|
+
/* @__PURE__ */ jsxRuntime.jsx(SelectList, {})
|
527
|
+
] });
|
461
528
|
}),
|
462
529
|
{
|
463
|
-
|
530
|
+
isControlled: true
|
464
531
|
}
|
465
532
|
);
|
466
|
-
var
|
467
|
-
|
468
|
-
|
533
|
+
var CheckboxField = createField(
|
534
|
+
react.forwardRef(({ label, type, ...props }, ref) => {
|
535
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox, { ref, ...props, children: label });
|
536
|
+
}),
|
469
537
|
{
|
470
|
-
|
538
|
+
hideLabel: true
|
471
539
|
}
|
472
540
|
);
|
473
|
-
var
|
474
|
-
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
541
|
+
var RadioField = createField(RadioInput, {
|
542
|
+
isControlled: true
|
543
|
+
});
|
544
|
+
var NativeSelectField = createField(NativeSelect, {
|
545
|
+
isControlled: true
|
546
|
+
});
|
547
|
+
var PinField = createField(
|
480
548
|
react.forwardRef((props, ref) => {
|
481
549
|
const { pinLength = 4, pinType, spacing, ...inputProps } = props;
|
482
550
|
const inputs = [];
|
483
551
|
for (let i = 0; i < pinLength; i++) {
|
484
|
-
inputs.push(/* @__PURE__ */
|
485
|
-
key: i,
|
486
|
-
ref
|
487
|
-
}));
|
552
|
+
inputs.push(/* @__PURE__ */ jsxRuntime.jsx(react.PinInputField, { ref }, i));
|
488
553
|
}
|
489
|
-
return /* @__PURE__ */
|
490
|
-
spacing
|
491
|
-
}, /* @__PURE__ */ React8__namespace.createElement(react.PinInput, {
|
492
|
-
...inputProps,
|
493
|
-
type: pinType
|
494
|
-
}, inputs));
|
554
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.HStack, { spacing, children: /* @__PURE__ */ jsxRuntime.jsx(react.PinInput, { ...inputProps, type: pinType, children: inputs }) });
|
495
555
|
}),
|
496
556
|
{
|
497
557
|
isControlled: true
|
498
558
|
}
|
499
559
|
);
|
500
|
-
var
|
501
|
-
|
502
|
-
|
503
|
-
|
504
|
-
|
505
|
-
|
506
|
-
|
507
|
-
|
508
|
-
|
509
|
-
|
510
|
-
|
511
|
-
|
512
|
-
|
513
|
-
|
514
|
-
if (!field)
|
515
|
-
return [];
|
516
|
-
if (((_a = field.items) == null ? void 0 : _a.type) === "object") {
|
517
|
-
return mapFields(field.items.properties);
|
518
|
-
} else if (field.type === "object") {
|
519
|
-
return mapFields(field.properties);
|
520
|
-
}
|
521
|
-
return [field.items];
|
522
|
-
};
|
523
|
-
return { getFields, getNestedFields };
|
560
|
+
var defaultFieldTypes = {
|
561
|
+
text: InputField,
|
562
|
+
email: InputField,
|
563
|
+
url: InputField,
|
564
|
+
phone: InputField,
|
565
|
+
number: NumberInputField2,
|
566
|
+
password: PasswordInputField,
|
567
|
+
textarea: TextareaField,
|
568
|
+
switch: SwitchField,
|
569
|
+
select: SelectField,
|
570
|
+
checkbox: CheckboxField,
|
571
|
+
radio: RadioField,
|
572
|
+
pin: PinField,
|
573
|
+
"native-select": NativeSelectField
|
524
574
|
};
|
525
|
-
|
526
|
-
|
527
|
-
|
575
|
+
var FieldsContext = React11__namespace.default.createContext(
|
576
|
+
null
|
577
|
+
);
|
578
|
+
var FieldsProvider = (props) => {
|
579
|
+
const fields = { ...defaultFieldTypes, ...props.value };
|
580
|
+
return /* @__PURE__ */ jsxRuntime.jsx(FieldsContext.Provider, { value: fields, children: props.children });
|
581
|
+
};
|
582
|
+
var useField = (type) => {
|
583
|
+
const context = React11__namespace.default.useContext(FieldsContext);
|
584
|
+
return (context == null ? void 0 : context[type]) || InputField;
|
585
|
+
};
|
586
|
+
var defaultInputType = "text";
|
587
|
+
var Field = React11__namespace.forwardRef(
|
528
588
|
(props, ref) => {
|
529
|
-
|
530
|
-
const
|
531
|
-
|
532
|
-
|
533
|
-
reValidateMode,
|
534
|
-
shouldFocusError,
|
535
|
-
shouldUnregister,
|
536
|
-
shouldUseNativeValidation,
|
537
|
-
criteriaMode,
|
538
|
-
delayError,
|
539
|
-
schema,
|
540
|
-
defaultValues,
|
541
|
-
values,
|
542
|
-
context,
|
543
|
-
resetOptions,
|
544
|
-
onChange,
|
545
|
-
onSubmit,
|
546
|
-
onError,
|
547
|
-
formRef,
|
548
|
-
children,
|
549
|
-
...rest
|
550
|
-
} = props;
|
551
|
-
const form = {
|
552
|
-
mode,
|
553
|
-
resolver,
|
554
|
-
defaultValues,
|
555
|
-
values,
|
556
|
-
reValidateMode,
|
557
|
-
shouldFocusError,
|
558
|
-
shouldUnregister,
|
559
|
-
shouldUseNativeValidation,
|
560
|
-
criteriaMode,
|
561
|
-
delayError,
|
562
|
-
context,
|
563
|
-
resetOptions
|
564
|
-
};
|
565
|
-
if (schema && !resolver) {
|
566
|
-
form.resolver = (_a = Form.getResolver) == null ? void 0 : _a.call(Form, schema);
|
567
|
-
}
|
568
|
-
const methods = reactHookForm.useForm(form);
|
569
|
-
const { handleSubmit } = methods;
|
570
|
-
React8__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
|
571
|
-
React8__namespace.useEffect(() => {
|
572
|
-
let subscription;
|
573
|
-
if (onChange) {
|
574
|
-
subscription = methods.watch(onChange);
|
575
|
-
}
|
576
|
-
return () => subscription == null ? void 0 : subscription.unsubscribe();
|
577
|
-
}, [methods, onChange]);
|
578
|
-
const Field2 = React8__namespace.useMemo(
|
579
|
-
() => (props2) => /* @__PURE__ */ React8__namespace.createElement(Field, {
|
580
|
-
...props2
|
581
|
-
}),
|
582
|
-
[]
|
583
|
-
);
|
584
|
-
return /* @__PURE__ */ React8__namespace.createElement(reactHookForm.FormProvider, {
|
585
|
-
...methods
|
586
|
-
}, /* @__PURE__ */ React8__namespace.createElement(react.chakra.form, {
|
587
|
-
ref,
|
588
|
-
onSubmit: handleSubmit(onSubmit, onError),
|
589
|
-
...rest,
|
590
|
-
className: utils.cx("sui-form", props.className)
|
591
|
-
}, utils.runIfFn(children, {
|
592
|
-
Field: Field2,
|
593
|
-
...methods
|
594
|
-
})));
|
589
|
+
const { type = defaultInputType, name } = props;
|
590
|
+
const overrides = useFieldProps(name);
|
591
|
+
const InputComponent = useField((overrides == null ? void 0 : overrides.type) || type);
|
592
|
+
return /* @__PURE__ */ jsxRuntime.jsx(InputComponent, { ref, ...props, ...overrides });
|
595
593
|
}
|
596
594
|
);
|
597
|
-
Form.getFieldResolver = objectFieldResolver;
|
598
|
-
Form.displayName = "Form";
|
599
|
-
function createForm({ resolver }) {
|
600
|
-
const CreateForm = (props) => {
|
601
|
-
const { schema, ...rest } = props;
|
602
|
-
return /* @__PURE__ */ React8__namespace.createElement(Form, {
|
603
|
-
resolver: resolver == null ? void 0 : resolver(props.schema),
|
604
|
-
...rest
|
605
|
-
});
|
606
|
-
};
|
607
|
-
return CreateForm;
|
608
|
-
}
|
609
595
|
var FormLayoutItem = ({ children }) => {
|
610
|
-
return /* @__PURE__ */
|
596
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.chakra.div, { children });
|
611
597
|
};
|
612
|
-
|
613
|
-
FormLayoutItem.displayName = "FormLayoutItem";
|
614
|
-
}
|
598
|
+
FormLayoutItem.displayName = "FormLayoutItem";
|
615
599
|
var FormLayout = ({ children, ...props }) => {
|
616
600
|
var _a, _b, _c;
|
617
601
|
const theme = react.useTheme();
|
618
|
-
const defaultProps = (_c = (_b = (_a = theme.components) == null ? void 0 : _a.
|
602
|
+
const defaultProps = (_c = (_b = (_a = theme.components) == null ? void 0 : _a.SuiFormLayout) == null ? void 0 : _b.defaultProps) != null ? _c : {
|
619
603
|
spacing: 4
|
620
604
|
};
|
621
605
|
const gridProps = {
|
622
606
|
...defaultProps,
|
623
607
|
...props
|
624
608
|
};
|
625
|
-
return /* @__PURE__ */
|
626
|
-
|
627
|
-
|
628
|
-
|
629
|
-
|
630
|
-
|
631
|
-
|
632
|
-
|
633
|
-
|
634
|
-
|
635
|
-
|
636
|
-
FormLayout.displayName = "FormLayout";
|
637
|
-
}
|
638
|
-
var mapNestedFields = (name, children) => {
|
639
|
-
return React8__namespace.Children.map(children, (child) => {
|
640
|
-
if (React8__namespace.isValidElement(child) && child.props.name) {
|
641
|
-
return React8__namespace.cloneElement(child, {
|
642
|
-
...child.props,
|
643
|
-
name: `${name}.${child.props.name}`
|
644
|
-
});
|
609
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
610
|
+
react.SimpleGrid,
|
611
|
+
{
|
612
|
+
...gridProps,
|
613
|
+
className: utils.cx("sui-form__layout", props.className),
|
614
|
+
children: React11__namespace.Children.map(children, (child) => {
|
615
|
+
if (React11__namespace.isValidElement(child)) {
|
616
|
+
return /* @__PURE__ */ jsxRuntime.jsx(FormLayoutItem, { children: child });
|
617
|
+
}
|
618
|
+
return child;
|
619
|
+
})
|
645
620
|
}
|
646
|
-
|
647
|
-
});
|
621
|
+
);
|
648
622
|
};
|
623
|
+
FormLayout.displayName = "FormLayout";
|
649
624
|
var [ArrayFieldProvider, useArrayFieldContext] = reactUtils.createContext({
|
650
625
|
name: "ArrayFieldContext"
|
651
626
|
});
|
@@ -659,7 +634,7 @@ var useArrayField = ({
|
|
659
634
|
min,
|
660
635
|
max
|
661
636
|
}) => {
|
662
|
-
const { control } =
|
637
|
+
const { control } = useFormContext();
|
663
638
|
const context = reactHookForm.useFieldArray({
|
664
639
|
control,
|
665
640
|
name,
|
@@ -674,9 +649,9 @@ var useArrayField = ({
|
|
674
649
|
};
|
675
650
|
};
|
676
651
|
var useArrayFieldRow = ({ index }) => {
|
677
|
-
const { clearErrors } =
|
652
|
+
const { clearErrors } = useFormContext();
|
678
653
|
const { name, remove, fields } = useArrayFieldContext();
|
679
|
-
|
654
|
+
React11__namespace.useEffect(() => {
|
680
655
|
clearErrors(name);
|
681
656
|
}, []);
|
682
657
|
return {
|
@@ -684,7 +659,7 @@ var useArrayFieldRow = ({ index }) => {
|
|
684
659
|
isFirst: index === 0,
|
685
660
|
isLast: index === fields.length - 1,
|
686
661
|
name: `${name}.${index}`,
|
687
|
-
remove:
|
662
|
+
remove: React11__namespace.useCallback(() => {
|
688
663
|
clearErrors(name);
|
689
664
|
remove(index);
|
690
665
|
}, [index])
|
@@ -709,39 +684,29 @@ var useArrayFieldAddButton = () => {
|
|
709
684
|
isDisabled
|
710
685
|
};
|
711
686
|
};
|
712
|
-
|
713
|
-
// src/array-field.tsx
|
714
687
|
var ArrayFieldRow = ({
|
715
688
|
children,
|
716
689
|
index,
|
717
690
|
...rowFieldsProps
|
718
691
|
}) => {
|
719
|
-
return /* @__PURE__ */
|
720
|
-
|
721
|
-
|
722
|
-
|
723
|
-
}, children), /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRemoveButton, null));
|
692
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(ArrayFieldRowContainer, { index, children: [
|
693
|
+
/* @__PURE__ */ jsxRuntime.jsx(ArrayFieldRowFields, { ...rowFieldsProps, children }),
|
694
|
+
/* @__PURE__ */ jsxRuntime.jsx(ArrayFieldRemoveButton, {})
|
695
|
+
] });
|
724
696
|
};
|
725
|
-
|
726
|
-
ArrayFieldRow.displayName = "ArrayFieldRow";
|
727
|
-
}
|
697
|
+
ArrayFieldRow.displayName = "ArrayFieldRow";
|
728
698
|
var ArrayFieldRowFields = ({
|
729
699
|
children,
|
730
700
|
...layoutProps
|
731
701
|
}) => {
|
732
702
|
const { name } = useArrayFieldRowContext();
|
733
|
-
return /* @__PURE__ */
|
734
|
-
flex: "1",
|
735
|
-
mr: "2",
|
736
|
-
...layoutProps
|
737
|
-
}, mapNestedFields(name, children));
|
703
|
+
return /* @__PURE__ */ jsxRuntime.jsx(FormLayout, { flex: "1", mr: "2", ...layoutProps, children: mapNestedFields(name, children) });
|
738
704
|
};
|
739
|
-
|
740
|
-
ArrayFieldRowFields.displayName = "ArrayFieldRowFields";
|
741
|
-
}
|
705
|
+
ArrayFieldRowFields.displayName = "ArrayFieldRowFields";
|
742
706
|
var ArrayFieldRowContainer = ({
|
743
707
|
children,
|
744
|
-
index
|
708
|
+
index,
|
709
|
+
...rest
|
745
710
|
}) => {
|
746
711
|
const context = useArrayFieldRow({ index });
|
747
712
|
const styles = {
|
@@ -751,61 +716,45 @@ var ArrayFieldRowContainer = ({
|
|
751
716
|
width: "100%",
|
752
717
|
mb: 4
|
753
718
|
};
|
754
|
-
return /* @__PURE__ */
|
755
|
-
value: context
|
756
|
-
}, /* @__PURE__ */ React8__namespace.createElement(react.chakra.div, {
|
757
|
-
__css: styles
|
758
|
-
}, children));
|
719
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldRowProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(react.chakra.div, { ...rest, __css: styles, children }) });
|
759
720
|
};
|
760
|
-
|
761
|
-
ArrayFieldRowContainer.displayName = "ArrayFieldRowContainer";
|
762
|
-
}
|
721
|
+
ArrayFieldRowContainer.displayName = "ArrayFieldRowContainer";
|
763
722
|
var ArrayFieldRemoveButton = (props) => {
|
764
|
-
return /* @__PURE__ */
|
765
|
-
"aria-label": "Remove row",
|
766
|
-
...useArrayFieldRemoveButton(),
|
767
|
-
...props
|
768
|
-
}, props.children || /* @__PURE__ */ React8__namespace.createElement(icons.MinusIcon, null));
|
723
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.Button, { "aria-label": "Remove row", ...useArrayFieldRemoveButton(), ...props, children: props.children || /* @__PURE__ */ jsxRuntime.jsx(icons.MinusIcon, {}) });
|
769
724
|
};
|
770
|
-
|
771
|
-
ArrayFieldRemoveButton.displayName = "ArrayFieldRemoveButton";
|
772
|
-
}
|
725
|
+
ArrayFieldRemoveButton.displayName = "ArrayFieldRemoveButton";
|
773
726
|
var ArrayFieldAddButton = (props) => {
|
774
|
-
return /* @__PURE__ */
|
775
|
-
|
776
|
-
|
777
|
-
|
778
|
-
|
779
|
-
|
727
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
728
|
+
react.Button,
|
729
|
+
{
|
730
|
+
"aria-label": "Add row",
|
731
|
+
float: "right",
|
732
|
+
...useArrayFieldAddButton(),
|
733
|
+
...props,
|
734
|
+
children: props.children || /* @__PURE__ */ jsxRuntime.jsx(icons.PlusIcon, {})
|
735
|
+
}
|
736
|
+
);
|
780
737
|
};
|
781
|
-
|
782
|
-
ArrayFieldAddButton.displayName = "ArrayFieldAddButton";
|
783
|
-
}
|
738
|
+
ArrayFieldAddButton.displayName = "ArrayFieldAddButton";
|
784
739
|
var ArrayField = react.forwardRef(
|
785
740
|
(props, ref) => {
|
786
741
|
const { children, ...containerProps } = props;
|
787
|
-
|
788
|
-
|
789
|
-
|
790
|
-
|
791
|
-
|
792
|
-
index
|
793
|
-
}, children)))), /* @__PURE__ */ React8__namespace.createElement(ArrayFieldAddButton, null));
|
742
|
+
const rowFn = utils.isFunction(children) ? children : (fields) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fields.map(({ id }, index) => /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldRow, { index, children }, id)) || null });
|
743
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(ArrayFieldContainer, { ref, ...containerProps, children: [
|
744
|
+
/* @__PURE__ */ jsxRuntime.jsx(ArrayFieldRows, { children: rowFn }),
|
745
|
+
/* @__PURE__ */ jsxRuntime.jsx(ArrayFieldAddButton, {})
|
746
|
+
] });
|
794
747
|
}
|
795
748
|
);
|
796
|
-
|
797
|
-
ArrayField.displayName = "ArrayField";
|
798
|
-
}
|
749
|
+
ArrayField.displayName = "ArrayField";
|
799
750
|
var ArrayFieldRows = ({
|
800
751
|
children
|
801
752
|
}) => {
|
802
753
|
const { fields } = useArrayFieldContext();
|
803
754
|
return children(fields);
|
804
755
|
};
|
805
|
-
|
806
|
-
|
807
|
-
}
|
808
|
-
var ArrayFieldContainer = React8__namespace.forwardRef(
|
756
|
+
ArrayFieldRows.displayName = "ArrayFieldRows";
|
757
|
+
var ArrayFieldContainer = React11__namespace.forwardRef(
|
809
758
|
({
|
810
759
|
name,
|
811
760
|
defaultValue,
|
@@ -822,74 +771,59 @@ var ArrayFieldContainer = React8__namespace.forwardRef(
|
|
822
771
|
min,
|
823
772
|
max
|
824
773
|
});
|
825
|
-
|
826
|
-
return /* @__PURE__ */
|
827
|
-
value: context
|
828
|
-
}, /* @__PURE__ */ React8__namespace.createElement(BaseField, {
|
829
|
-
name,
|
830
|
-
...fieldProps
|
831
|
-
}, children));
|
774
|
+
React11__namespace.useImperativeHandle(ref, () => context, [ref, context]);
|
775
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(BaseField, { name, ...fieldProps, children }) });
|
832
776
|
}
|
833
777
|
);
|
834
|
-
|
835
|
-
ArrayFieldContainer.displayName = "ArrayFieldContainer";
|
836
|
-
}
|
778
|
+
ArrayFieldContainer.displayName = "ArrayFieldContainer";
|
837
779
|
var FormLegend = (props) => {
|
838
780
|
const styles = react.useStyleConfig("SuiFormLegend");
|
839
|
-
return /* @__PURE__ */
|
840
|
-
as: "legend",
|
841
|
-
sx: styles,
|
842
|
-
...props
|
843
|
-
});
|
781
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.FormLabel, { as: "legend", sx: styles, ...props });
|
844
782
|
};
|
845
783
|
var ObjectField = (props) => {
|
846
784
|
const { name, label, hideLabel, children, columns, spacing, ...fieldProps } = props;
|
847
|
-
return /* @__PURE__ */
|
848
|
-
|
849
|
-
|
850
|
-
|
851
|
-
}, /* @__PURE__ */ React8__namespace.createElement(FormLegend, {
|
852
|
-
display: hideLabel ? "none" : "block"
|
853
|
-
}, label), /* @__PURE__ */ React8__namespace.createElement(FormLayout, {
|
854
|
-
columns,
|
855
|
-
gridGap: spacing
|
856
|
-
}, mapNestedFields(name, children)));
|
785
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(react.FormControl, { name, as: "fieldset", ...fieldProps, children: [
|
786
|
+
/* @__PURE__ */ jsxRuntime.jsx(FormLegend, { display: hideLabel ? "none" : "block", children: label }),
|
787
|
+
/* @__PURE__ */ jsxRuntime.jsx(FormLayout, { columns, gridGap: spacing, children: mapNestedFields(name, children) })
|
788
|
+
] });
|
857
789
|
};
|
858
|
-
|
859
|
-
ObjectField.displayName = "ObjectField";
|
860
|
-
}
|
790
|
+
ObjectField.displayName = "ObjectField";
|
861
791
|
var mapNestedFields2 = (resolver, name) => {
|
862
792
|
var _a;
|
863
793
|
return (_a = resolver.getNestedFields(name)) == null ? void 0 : _a.map(
|
864
|
-
({ name: name2, type, ...nestedFieldProps }, i) => /* @__PURE__ */
|
865
|
-
|
866
|
-
|
867
|
-
|
868
|
-
|
869
|
-
|
794
|
+
({ name: name2, type, ...nestedFieldProps }, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
795
|
+
Field,
|
796
|
+
{
|
797
|
+
name: name2,
|
798
|
+
type,
|
799
|
+
...nestedFieldProps
|
800
|
+
},
|
801
|
+
name2 || i
|
802
|
+
)
|
870
803
|
);
|
871
804
|
};
|
872
|
-
var
|
873
|
-
schema,
|
874
|
-
fieldResolver,
|
805
|
+
var AutoFields = ({
|
806
|
+
schema: schemaProp,
|
807
|
+
fieldResolver: fieldResolverProp,
|
875
808
|
focusFirstField,
|
876
809
|
...props
|
877
810
|
}) => {
|
878
|
-
const
|
879
|
-
|
880
|
-
|
881
|
-
);
|
882
|
-
const fields =
|
883
|
-
const form =
|
884
|
-
|
811
|
+
const context = useFormContext();
|
812
|
+
const schema = schemaProp || context.schema;
|
813
|
+
const fieldResolver = fieldResolverProp || context.fieldResolver;
|
814
|
+
const resolver = React11__namespace.useMemo(() => fieldResolver, [schema, fieldResolver]);
|
815
|
+
const fields = React11__namespace.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
|
816
|
+
const form = useFormContext();
|
817
|
+
React11__namespace.useEffect(() => {
|
885
818
|
var _a;
|
886
|
-
if (focusFirstField && ((_a = fields[0]) == null ? void 0 : _a.name)) {
|
819
|
+
if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
|
887
820
|
form.setFocus(fields[0].name);
|
888
821
|
}
|
889
822
|
}, [schema, fieldResolver, focusFirstField]);
|
890
|
-
|
891
|
-
|
892
|
-
}
|
823
|
+
if (!resolver) {
|
824
|
+
return null;
|
825
|
+
}
|
826
|
+
return /* @__PURE__ */ jsxRuntime.jsx(FormLayout, { ...props, children: fields == null ? void 0 : fields.map(
|
893
827
|
({
|
894
828
|
name,
|
895
829
|
type,
|
@@ -897,28 +831,15 @@ var Fields = ({
|
|
897
831
|
...fieldProps
|
898
832
|
}) => {
|
899
833
|
if (type === "array") {
|
900
|
-
return /* @__PURE__ */
|
901
|
-
key: name,
|
902
|
-
name,
|
903
|
-
...fieldProps
|
904
|
-
}, mapNestedFields2(resolver, name));
|
834
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ArrayField, { name, ...fieldProps, children: mapNestedFields2(resolver, name) }, name);
|
905
835
|
} else if (type === "object") {
|
906
|
-
return /* @__PURE__ */
|
907
|
-
key: name,
|
908
|
-
name,
|
909
|
-
...fieldProps
|
910
|
-
}, mapNestedFields2(resolver, name));
|
836
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ObjectField, { name, ...fieldProps, children: mapNestedFields2(resolver, name) }, name);
|
911
837
|
}
|
912
|
-
return /* @__PURE__ */
|
913
|
-
key: name,
|
914
|
-
name,
|
915
|
-
type,
|
916
|
-
...fieldProps
|
917
|
-
});
|
838
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Field, { name, type, ...fieldProps }, name);
|
918
839
|
}
|
919
|
-
));
|
840
|
+
) });
|
920
841
|
};
|
921
|
-
|
842
|
+
AutoFields.displayName = "Fields";
|
922
843
|
var SubmitButton = react.forwardRef(
|
923
844
|
(props, ref) => {
|
924
845
|
const {
|
@@ -931,13 +852,17 @@ var SubmitButton = react.forwardRef(
|
|
931
852
|
} = props;
|
932
853
|
const { formState } = reactHookForm.useFormContext();
|
933
854
|
const isDisabled = disableIfUntouched && !formState.isDirty || disableIfInvalid && !formState.isValid || isDisabledProp;
|
934
|
-
return /* @__PURE__ */
|
935
|
-
|
936
|
-
|
937
|
-
|
938
|
-
|
939
|
-
|
940
|
-
|
855
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
856
|
+
react.Button,
|
857
|
+
{
|
858
|
+
...rest,
|
859
|
+
ref,
|
860
|
+
type: "submit",
|
861
|
+
isLoading: formState.isSubmitting || isLoading,
|
862
|
+
isDisabled,
|
863
|
+
children
|
864
|
+
}
|
865
|
+
);
|
941
866
|
}
|
942
867
|
);
|
943
868
|
SubmitButton.defaultProps = {
|
@@ -946,28 +871,6 @@ SubmitButton.defaultProps = {
|
|
946
871
|
disableIfInvalid: false
|
947
872
|
};
|
948
873
|
SubmitButton.displayName = "SubmitButton";
|
949
|
-
|
950
|
-
// src/auto-form.tsx
|
951
|
-
var AutoForm = react.forwardRef(
|
952
|
-
(props, ref) => {
|
953
|
-
const {
|
954
|
-
schema,
|
955
|
-
submitLabel = "Submit",
|
956
|
-
fieldResolver,
|
957
|
-
children,
|
958
|
-
...rest
|
959
|
-
} = props;
|
960
|
-
return /* @__PURE__ */ React8__namespace.createElement(Form, {
|
961
|
-
...rest,
|
962
|
-
schema,
|
963
|
-
ref
|
964
|
-
}, /* @__PURE__ */ React8__namespace.createElement(FormLayout, null, /* @__PURE__ */ React8__namespace.createElement(Fields, {
|
965
|
-
schema,
|
966
|
-
fieldResolver
|
967
|
-
}), submitLabel && /* @__PURE__ */ React8__namespace.createElement(SubmitButton, null, submitLabel), children));
|
968
|
-
}
|
969
|
-
);
|
970
|
-
AutoForm.displayName = "AutoForm";
|
971
874
|
var DisplayIf = ({
|
972
875
|
children,
|
973
876
|
name,
|
@@ -982,12 +885,94 @@ var DisplayIf = ({
|
|
982
885
|
disabled: isDisabled,
|
983
886
|
exact: isExact
|
984
887
|
});
|
985
|
-
const context =
|
888
|
+
const context = useFormContext();
|
986
889
|
return condition(value, context) ? children : null;
|
987
890
|
};
|
988
|
-
|
989
|
-
|
990
|
-
|
891
|
+
DisplayIf.displayName = "DisplayIf";
|
892
|
+
var Form = react.forwardRef(
|
893
|
+
(props, ref) => {
|
894
|
+
const {
|
895
|
+
mode = "all",
|
896
|
+
resolver,
|
897
|
+
fieldResolver,
|
898
|
+
fields,
|
899
|
+
reValidateMode,
|
900
|
+
shouldFocusError,
|
901
|
+
shouldUnregister,
|
902
|
+
shouldUseNativeValidation,
|
903
|
+
criteriaMode,
|
904
|
+
delayError,
|
905
|
+
schema,
|
906
|
+
defaultValues,
|
907
|
+
values,
|
908
|
+
context,
|
909
|
+
resetOptions,
|
910
|
+
onChange,
|
911
|
+
onSubmit,
|
912
|
+
onError,
|
913
|
+
formRef,
|
914
|
+
children,
|
915
|
+
...rest
|
916
|
+
} = props;
|
917
|
+
const form = {
|
918
|
+
mode,
|
919
|
+
resolver,
|
920
|
+
defaultValues,
|
921
|
+
values,
|
922
|
+
reValidateMode,
|
923
|
+
shouldFocusError,
|
924
|
+
shouldUnregister,
|
925
|
+
shouldUseNativeValidation,
|
926
|
+
criteriaMode,
|
927
|
+
delayError,
|
928
|
+
context,
|
929
|
+
resetOptions
|
930
|
+
};
|
931
|
+
const methods = reactHookForm.useForm(form);
|
932
|
+
const { handleSubmit } = methods;
|
933
|
+
React11__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
|
934
|
+
React11__namespace.useEffect(() => {
|
935
|
+
let subscription;
|
936
|
+
if (onChange) {
|
937
|
+
subscription = methods.watch(onChange);
|
938
|
+
}
|
939
|
+
return () => subscription == null ? void 0 : subscription.unsubscribe();
|
940
|
+
}, [methods, onChange]);
|
941
|
+
let _children = children;
|
942
|
+
if (!_children && fieldResolver) {
|
943
|
+
_children = /* @__PURE__ */ jsxRuntime.jsxs(FormLayout, { children: [
|
944
|
+
/* @__PURE__ */ jsxRuntime.jsx(AutoFields, {}),
|
945
|
+
/* @__PURE__ */ jsxRuntime.jsx(SubmitButton, { ...fields == null ? void 0 : fields.submit })
|
946
|
+
] });
|
947
|
+
}
|
948
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
949
|
+
FormProvider,
|
950
|
+
{
|
951
|
+
...methods,
|
952
|
+
schema,
|
953
|
+
fieldResolver,
|
954
|
+
fields,
|
955
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
956
|
+
react.chakra.form,
|
957
|
+
{
|
958
|
+
ref,
|
959
|
+
onSubmit: handleSubmit(onSubmit, onError),
|
960
|
+
...rest,
|
961
|
+
className: utils.cx("sui-form", props.className),
|
962
|
+
children: utils.runIfFn(_children, {
|
963
|
+
Field,
|
964
|
+
DisplayIf,
|
965
|
+
ArrayField,
|
966
|
+
ObjectField,
|
967
|
+
...methods
|
968
|
+
})
|
969
|
+
}
|
970
|
+
)
|
971
|
+
}
|
972
|
+
);
|
973
|
+
}
|
974
|
+
);
|
975
|
+
Form.displayName = "Form";
|
991
976
|
var [StepFormProvider, useStepFormContext] = reactUtils.createContext({
|
992
977
|
name: "StepFormContext",
|
993
978
|
errorMessage: "useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`"
|
@@ -996,8 +981,8 @@ function useStepForm(props) {
|
|
996
981
|
const { onChange, ...rest } = props;
|
997
982
|
const stepper = core.useStepper(rest);
|
998
983
|
const { activeStep, isLastStep, nextStep } = stepper;
|
999
|
-
const [steps, updateSteps] =
|
1000
|
-
const onSubmitStep =
|
984
|
+
const [steps, updateSteps] = React11__namespace.useState({});
|
985
|
+
const onSubmitStep = React11__namespace.useCallback(
|
1001
986
|
async (data) => {
|
1002
987
|
var _a, _b;
|
1003
988
|
try {
|
@@ -1018,7 +1003,7 @@ function useStepForm(props) {
|
|
1018
1003
|
},
|
1019
1004
|
[steps, activeStep, isLastStep]
|
1020
1005
|
);
|
1021
|
-
const getFormProps =
|
1006
|
+
const getFormProps = React11__namespace.useCallback(() => {
|
1022
1007
|
const step = steps[activeStep];
|
1023
1008
|
return {
|
1024
1009
|
onSubmit: onSubmitStep,
|
@@ -1026,7 +1011,7 @@ function useStepForm(props) {
|
|
1026
1011
|
resolver: step == null ? void 0 : step.resolver
|
1027
1012
|
};
|
1028
1013
|
}, [steps, onSubmitStep, activeStep]);
|
1029
|
-
const updateStep =
|
1014
|
+
const updateStep = React11__namespace.useCallback(
|
1030
1015
|
(step) => {
|
1031
1016
|
updateSteps((steps2) => {
|
1032
1017
|
return {
|
@@ -1048,7 +1033,7 @@ function useFormStep(props) {
|
|
1048
1033
|
const { name, schema, resolver, onSubmit } = props;
|
1049
1034
|
const step = core.useStep({ name });
|
1050
1035
|
const { steps, updateStep } = useStepFormContext();
|
1051
|
-
|
1036
|
+
React11__namespace.useEffect(() => {
|
1052
1037
|
updateStep({ name, schema, resolver, onSubmit });
|
1053
1038
|
}, [name, schema]);
|
1054
1039
|
return {
|
@@ -1056,95 +1041,114 @@ function useFormStep(props) {
|
|
1056
1041
|
...steps[name] || { name, schema }
|
1057
1042
|
};
|
1058
1043
|
}
|
1059
|
-
|
1060
|
-
// src/step-form.tsx
|
1061
|
-
var StepForm = React8__namespace.forwardRef(
|
1044
|
+
var StepForm = React11__namespace.forwardRef(
|
1062
1045
|
(props, ref) => {
|
1063
1046
|
const { children, ...rest } = props;
|
1064
1047
|
const stepper = useStepForm(props);
|
1065
1048
|
const { getFormProps, ...ctx } = stepper;
|
1066
|
-
const context =
|
1067
|
-
return /* @__PURE__ */
|
1068
|
-
value: context
|
1069
|
-
}, /* @__PURE__ */ React8__namespace.createElement(StepFormProvider, {
|
1070
|
-
value: context
|
1071
|
-
}, /* @__PURE__ */ React8__namespace.createElement(Form, {
|
1072
|
-
ref,
|
1073
|
-
...rest,
|
1074
|
-
...getFormProps()
|
1075
|
-
}, utils.runIfFn(children, stepper))));
|
1049
|
+
const context = React11__namespace.useMemo(() => ctx, [ctx]);
|
1050
|
+
return /* @__PURE__ */ jsxRuntime.jsx(core.StepperProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(StepFormProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(Form, { ref, ...rest, ...getFormProps(), children: utils.runIfFn(children, stepper) }) }) });
|
1076
1051
|
}
|
1077
1052
|
);
|
1078
1053
|
var FormStepper = (props) => {
|
1079
1054
|
const { activeIndex, setIndex } = core.useStepperContext();
|
1080
1055
|
const { children, orientation, variant, colorScheme, size, ...rest } = props;
|
1081
|
-
const elements =
|
1082
|
-
if (
|
1056
|
+
const elements = React11__namespace.Children.map(children, (child) => {
|
1057
|
+
if (React11__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
|
1083
1058
|
const { isCompleted } = useFormStep(child.props);
|
1084
|
-
return /* @__PURE__ */
|
1085
|
-
|
1086
|
-
|
1087
|
-
|
1088
|
-
|
1089
|
-
|
1059
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
1060
|
+
core.StepperStep,
|
1061
|
+
{
|
1062
|
+
name: child.props.name,
|
1063
|
+
title: child.props.title,
|
1064
|
+
isCompleted,
|
1065
|
+
...rest,
|
1066
|
+
children: child.props.children
|
1067
|
+
}
|
1068
|
+
);
|
1090
1069
|
}
|
1091
1070
|
return child;
|
1092
1071
|
});
|
1093
|
-
const onChange =
|
1072
|
+
const onChange = React11__namespace.useCallback((i) => {
|
1094
1073
|
setIndex(i);
|
1095
1074
|
}, []);
|
1096
|
-
return /* @__PURE__ */
|
1097
|
-
|
1098
|
-
|
1099
|
-
|
1100
|
-
|
1101
|
-
|
1102
|
-
|
1103
|
-
|
1104
|
-
|
1105
|
-
|
1106
|
-
|
1075
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
1076
|
+
core.StepperContainer,
|
1077
|
+
{
|
1078
|
+
orientation,
|
1079
|
+
step: activeIndex,
|
1080
|
+
variant,
|
1081
|
+
colorScheme,
|
1082
|
+
size,
|
1083
|
+
onChange,
|
1084
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(core.StepperSteps, { mb: "4", ...props, children: elements })
|
1085
|
+
}
|
1086
|
+
);
|
1107
1087
|
};
|
1108
1088
|
var FormStep = (props) => {
|
1109
1089
|
const { name, schema, resolver, children, className, onSubmit, ...rest } = props;
|
1110
1090
|
const step = useFormStep({ name, schema, resolver, onSubmit });
|
1111
1091
|
const { isActive } = step;
|
1112
|
-
return isActive ? /* @__PURE__ */
|
1113
|
-
...rest,
|
1114
|
-
className: utils.cx("sui-form__step", className)
|
1115
|
-
}, children) : null;
|
1092
|
+
return isActive ? /* @__PURE__ */ jsxRuntime.jsx(react.chakra.div, { ...rest, className: utils.cx("sui-form__step", className), children }) : null;
|
1116
1093
|
};
|
1117
|
-
|
1118
|
-
FormStep.displayName = "FormStep";
|
1119
|
-
}
|
1094
|
+
FormStep.displayName = "FormStep";
|
1120
1095
|
var PrevButton = (props) => {
|
1121
1096
|
const { isFirstStep, isCompleted, prevStep } = core.useStepperContext();
|
1122
|
-
return /* @__PURE__ */
|
1123
|
-
|
1124
|
-
|
1125
|
-
|
1126
|
-
|
1127
|
-
|
1128
|
-
|
1097
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
1098
|
+
react.Button,
|
1099
|
+
{
|
1100
|
+
isDisabled: isFirstStep || isCompleted,
|
1101
|
+
label: "Back",
|
1102
|
+
...props,
|
1103
|
+
className: utils.cx("sui-form__prev-button", props.className),
|
1104
|
+
onClick: utils.callAllHandlers(props.onClick, prevStep)
|
1105
|
+
}
|
1106
|
+
);
|
1129
1107
|
};
|
1130
|
-
|
1131
|
-
PrevButton.displayName = "PrevButton";
|
1132
|
-
}
|
1108
|
+
PrevButton.displayName = "PrevButton";
|
1133
1109
|
var NextButton = (props) => {
|
1134
1110
|
const { label = "Next", submitLabel = "Complete", ...rest } = props;
|
1135
1111
|
const { isLastStep, isCompleted } = core.useStepperContext();
|
1136
|
-
return /* @__PURE__ */
|
1137
|
-
|
1138
|
-
|
1139
|
-
|
1140
|
-
|
1112
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
1113
|
+
SubmitButton,
|
1114
|
+
{
|
1115
|
+
...rest,
|
1116
|
+
isDisabled: isCompleted,
|
1117
|
+
className: utils.cx("sui-form__next-button", props.className),
|
1118
|
+
children: isLastStep || isCompleted ? submitLabel : label
|
1119
|
+
}
|
1120
|
+
);
|
1121
|
+
};
|
1122
|
+
NextButton.displayName = "NextButton";
|
1123
|
+
var mapFields = (schema) => schema && Object.entries(schema).map(([name, { items, label, title, ...field }]) => {
|
1124
|
+
return {
|
1125
|
+
...field,
|
1126
|
+
name,
|
1127
|
+
label: label || title || name
|
1128
|
+
// json schema compatibility
|
1129
|
+
};
|
1130
|
+
});
|
1131
|
+
var objectFieldResolver = (schema) => {
|
1132
|
+
const getFields = () => {
|
1133
|
+
return mapFields(schema);
|
1134
|
+
};
|
1135
|
+
const getNestedFields = (name) => {
|
1136
|
+
var _a;
|
1137
|
+
const field = utils.get(schema, name);
|
1138
|
+
if (!field)
|
1139
|
+
return [];
|
1140
|
+
if (((_a = field.items) == null ? void 0 : _a.type) === "object") {
|
1141
|
+
return mapFields(field.items.properties);
|
1142
|
+
} else if (field.type === "object") {
|
1143
|
+
return mapFields(field.properties);
|
1144
|
+
}
|
1145
|
+
return [field.items];
|
1146
|
+
};
|
1147
|
+
return { getFields, getNestedFields };
|
1141
1148
|
};
|
1142
|
-
if (utils.__DEV__) {
|
1143
|
-
NextButton.displayName = "NextButton";
|
1144
|
-
}
|
1145
1149
|
var WatchField = (props) => {
|
1146
1150
|
const { name, defaultValue, isDisabled, isExact } = props;
|
1147
|
-
const form =
|
1151
|
+
const form = useFormContext();
|
1148
1152
|
const field = reactHookForm.useWatch({
|
1149
1153
|
name,
|
1150
1154
|
defaultValue,
|
@@ -1153,15 +1157,33 @@ var WatchField = (props) => {
|
|
1153
1157
|
});
|
1154
1158
|
return props.children(field, form) || null;
|
1155
1159
|
};
|
1160
|
+
function createForm({
|
1161
|
+
resolver,
|
1162
|
+
fieldResolver = objectFieldResolver,
|
1163
|
+
fields
|
1164
|
+
} = {}) {
|
1165
|
+
const CreateForm = react.forwardRef(
|
1166
|
+
(props, ref) => {
|
1167
|
+
const { schema, ...rest } = props;
|
1168
|
+
return /* @__PURE__ */ jsxRuntime.jsx(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsxRuntime.jsx(
|
1169
|
+
Form,
|
1170
|
+
{
|
1171
|
+
ref,
|
1172
|
+
resolver: resolver == null ? void 0 : resolver(props.schema),
|
1173
|
+
fieldResolver: fieldResolver == null ? void 0 : fieldResolver(schema),
|
1174
|
+
...rest
|
1175
|
+
}
|
1176
|
+
) });
|
1177
|
+
}
|
1178
|
+
);
|
1179
|
+
return CreateForm;
|
1180
|
+
}
|
1181
|
+
var Form2 = createForm();
|
1156
1182
|
|
1157
1183
|
Object.defineProperty(exports, 'Controller', {
|
1158
1184
|
enumerable: true,
|
1159
1185
|
get: function () { return reactHookForm.Controller; }
|
1160
1186
|
});
|
1161
|
-
Object.defineProperty(exports, 'FormProvider', {
|
1162
|
-
enumerable: true,
|
1163
|
-
get: function () { return reactHookForm.FormProvider; }
|
1164
|
-
});
|
1165
1187
|
Object.defineProperty(exports, 'appendErrors', {
|
1166
1188
|
enumerable: true,
|
1167
1189
|
get: function () { return reactHookForm.appendErrors; }
|
@@ -1178,10 +1200,6 @@ Object.defineProperty(exports, 'useForm', {
|
|
1178
1200
|
enumerable: true,
|
1179
1201
|
get: function () { return reactHookForm.useForm; }
|
1180
1202
|
});
|
1181
|
-
Object.defineProperty(exports, 'useFormContext', {
|
1182
|
-
enumerable: true,
|
1183
|
-
get: function () { return reactHookForm.useFormContext; }
|
1184
|
-
});
|
1185
1203
|
Object.defineProperty(exports, 'useFormState', {
|
1186
1204
|
enumerable: true,
|
1187
1205
|
get: function () { return reactHookForm.useFormState; }
|
@@ -1200,16 +1218,18 @@ exports.ArrayFieldRowContainer = ArrayFieldRowContainer;
|
|
1200
1218
|
exports.ArrayFieldRowFields = ArrayFieldRowFields;
|
1201
1219
|
exports.ArrayFieldRowProvider = ArrayFieldRowProvider;
|
1202
1220
|
exports.ArrayFieldRows = ArrayFieldRows;
|
1203
|
-
exports.
|
1221
|
+
exports.AutoFields = AutoFields;
|
1204
1222
|
exports.BaseField = BaseField;
|
1223
|
+
exports.BaseForm = Form;
|
1205
1224
|
exports.CheckboxField = CheckboxField;
|
1206
1225
|
exports.DisplayField = DisplayField;
|
1207
1226
|
exports.DisplayIf = DisplayIf;
|
1208
1227
|
exports.Field = Field;
|
1209
|
-
exports.
|
1210
|
-
exports.Form =
|
1228
|
+
exports.FieldsProvider = FieldsProvider;
|
1229
|
+
exports.Form = Form2;
|
1211
1230
|
exports.FormLayout = FormLayout;
|
1212
1231
|
exports.FormLegend = FormLegend;
|
1232
|
+
exports.FormProvider = FormProvider;
|
1213
1233
|
exports.FormStep = FormStep;
|
1214
1234
|
exports.FormStepper = FormStepper;
|
1215
1235
|
exports.FormValue = FormValue;
|
@@ -1225,27 +1245,32 @@ exports.PasswordInputField = PasswordInputField;
|
|
1225
1245
|
exports.PinField = PinField;
|
1226
1246
|
exports.PrevButton = PrevButton;
|
1227
1247
|
exports.RadioField = RadioField;
|
1248
|
+
exports.RadioInput = RadioInput;
|
1228
1249
|
exports.Select = Select;
|
1250
|
+
exports.SelectButton = SelectButton;
|
1229
1251
|
exports.SelectField = SelectField;
|
1252
|
+
exports.SelectList = SelectList;
|
1253
|
+
exports.SelectOption = SelectOption;
|
1230
1254
|
exports.StepForm = StepForm;
|
1231
1255
|
exports.StepFormProvider = StepFormProvider;
|
1232
1256
|
exports.SubmitButton = SubmitButton;
|
1233
1257
|
exports.SwitchField = SwitchField;
|
1234
1258
|
exports.TextareaField = TextareaField;
|
1235
1259
|
exports.WatchField = WatchField;
|
1260
|
+
exports.createField = createField;
|
1236
1261
|
exports.createForm = createForm;
|
1262
|
+
exports.defaultFieldTypes = defaultFieldTypes;
|
1237
1263
|
exports.objectFieldResolver = objectFieldResolver;
|
1238
|
-
exports.registerFieldType = registerFieldType;
|
1239
1264
|
exports.useArrayField = useArrayField;
|
1240
1265
|
exports.useArrayFieldAddButton = useArrayFieldAddButton;
|
1241
1266
|
exports.useArrayFieldContext = useArrayFieldContext;
|
1242
1267
|
exports.useArrayFieldRemoveButton = useArrayFieldRemoveButton;
|
1243
1268
|
exports.useArrayFieldRow = useArrayFieldRow;
|
1244
1269
|
exports.useArrayFieldRowContext = useArrayFieldRowContext;
|
1270
|
+
exports.useField = useField;
|
1271
|
+
exports.useFormContext = useFormContext;
|
1245
1272
|
exports.useFormStep = useFormStep;
|
1246
1273
|
exports.useStepForm = useStepForm;
|
1247
1274
|
exports.useStepFormContext = useStepFormContext;
|
1248
|
-
exports.withControlledInput = withControlledInput;
|
1249
|
-
exports.withUncontrolledInput = withUncontrolledInput;
|
1250
1275
|
//# sourceMappingURL=out.js.map
|
1251
1276
|
//# sourceMappingURL=index.js.map
|