@saas-ui/forms 2.0.0-next.6 → 2.0.0-next.8
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 +13 -0
- package/dist/index.js +38 -37
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +42 -41
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
- package/src/form-context.tsx +3 -3
- package/src/select/select.tsx +4 -2
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,18 @@
|
|
1
1
|
# @saas-ui/forms
|
2
2
|
|
3
|
+
## 2.0.0-next.8
|
4
|
+
|
5
|
+
### Patch Changes
|
6
|
+
|
7
|
+
- 6d3f5717: Fix React import
|
8
|
+
|
9
|
+
## 2.0.0-next.7
|
10
|
+
|
11
|
+
### Patch Changes
|
12
|
+
|
13
|
+
- Updated dependencies [7052dad3]
|
14
|
+
- @saas-ui/core@2.0.0-next.6
|
15
|
+
|
3
16
|
## 2.0.0-next.6
|
4
17
|
|
5
18
|
### Major Changes
|
package/dist/index.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
'use strict';
|
2
2
|
|
3
|
-
var
|
3
|
+
var React13 = require('react');
|
4
4
|
var reactHookForm = require('react-hook-form');
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
6
6
|
var react = require('@chakra-ui/react');
|
@@ -27,12 +27,12 @@ function _interopNamespace(e) {
|
|
27
27
|
return Object.freeze(n);
|
28
28
|
}
|
29
29
|
|
30
|
-
var
|
30
|
+
var React13__namespace = /*#__PURE__*/_interopNamespace(React13);
|
31
31
|
|
32
32
|
// src/form-context.tsx
|
33
|
-
var FormContext =
|
33
|
+
var FormContext = React13__namespace.createContext(null);
|
34
34
|
var useFormContext = () => {
|
35
|
-
const context =
|
35
|
+
const context = React13__namespace.useContext(FormContext);
|
36
36
|
const hookContext = reactHookForm.useFormContext();
|
37
37
|
if (!context) {
|
38
38
|
throw new Error("FormProvider must be used within a Form component");
|
@@ -108,7 +108,7 @@ var PasswordInput = react.forwardRef(
|
|
108
108
|
leftAddon,
|
109
109
|
...inputProps
|
110
110
|
} = props;
|
111
|
-
const [show, setShow] =
|
111
|
+
const [show, setShow] = React13.useState(false);
|
112
112
|
const handleClick = () => setShow(!show);
|
113
113
|
const label = show ? "Hide password" : "Show password";
|
114
114
|
let icon;
|
@@ -147,15 +147,15 @@ var PasswordInput = react.forwardRef(
|
|
147
147
|
);
|
148
148
|
PasswordInput.displayName = "PasswordInput";
|
149
149
|
var mapNestedFields = (name, children) => {
|
150
|
-
return
|
151
|
-
if (
|
150
|
+
return React13__namespace.Children.map(children, (child) => {
|
151
|
+
if (React13__namespace.isValidElement(child) && child.props.name) {
|
152
152
|
let childName = child.props.name;
|
153
153
|
if (childName.includes(".")) {
|
154
154
|
childName = childName.replace(/^.*\.(.*)/, "$1");
|
155
155
|
} else if (childName.includes(".$")) {
|
156
156
|
childName = childName.replace(/^.*\.\$(.*)/, "$1");
|
157
157
|
}
|
158
|
-
return
|
158
|
+
return React13__namespace.cloneElement(child, {
|
159
159
|
...child.props,
|
160
160
|
name: `${name}.${childName}`
|
161
161
|
});
|
@@ -215,14 +215,14 @@ var useSelect = (props) => {
|
|
215
215
|
onChange
|
216
216
|
});
|
217
217
|
const controlProps = react.useFormControl({ name });
|
218
|
-
const options =
|
218
|
+
const options = React13__namespace.default.useMemo(
|
219
219
|
() => optionsProp && mapOptions(optionsProp),
|
220
220
|
[optionsProp]
|
221
221
|
);
|
222
222
|
const handleChange = (value2) => {
|
223
223
|
setCurrentValue(value2);
|
224
224
|
};
|
225
|
-
const getDisplayValue =
|
225
|
+
const getDisplayValue = React13__namespace.default.useCallback(
|
226
226
|
(value2) => {
|
227
227
|
if (!options) {
|
228
228
|
return value2;
|
@@ -236,7 +236,7 @@ var useSelect = (props) => {
|
|
236
236
|
},
|
237
237
|
[options]
|
238
238
|
);
|
239
|
-
const displayValue =
|
239
|
+
const displayValue = React13__namespace.default.useMemo(
|
240
240
|
() => currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
|
241
241
|
getDisplayValue
|
242
242
|
) : [],
|
@@ -265,6 +265,7 @@ var SelectButton = react.forwardRef(
|
|
265
265
|
placeholder,
|
266
266
|
isDisabled: isSelectDisabled
|
267
267
|
} = useSelectContext();
|
268
|
+
const context = react.useFormControlContext();
|
268
269
|
const {
|
269
270
|
isInvalid,
|
270
271
|
isReadOnly,
|
@@ -274,7 +275,7 @@ var SelectButton = react.forwardRef(
|
|
274
275
|
id,
|
275
276
|
onBlur,
|
276
277
|
onFocus
|
277
|
-
} =
|
278
|
+
} = context || {};
|
278
279
|
const { rightIcon = /* @__PURE__ */ jsxRuntime.jsx(core.ChevronDownIcon, {}), ...rest } = props;
|
279
280
|
const focusStyles = (_a = styles.field) == null ? void 0 : _a._focusVisible;
|
280
281
|
const readOnlyStyles = (_b = styles.field) == null ? void 0 : _b._readOnly;
|
@@ -299,7 +300,7 @@ var SelectButton = react.forwardRef(
|
|
299
300
|
react.MenuButton,
|
300
301
|
{
|
301
302
|
as: react.Button,
|
302
|
-
id,
|
303
|
+
id: id || React13__namespace.useId(),
|
303
304
|
...rest,
|
304
305
|
onFocus,
|
305
306
|
onBlur,
|
@@ -572,7 +573,7 @@ var defaultFieldTypes = {
|
|
572
573
|
pin: PinField,
|
573
574
|
"native-select": NativeSelectField
|
574
575
|
};
|
575
|
-
var FieldsContext =
|
576
|
+
var FieldsContext = React13__namespace.default.createContext(
|
576
577
|
null
|
577
578
|
);
|
578
579
|
var FieldsProvider = (props) => {
|
@@ -580,11 +581,11 @@ var FieldsProvider = (props) => {
|
|
580
581
|
return /* @__PURE__ */ jsxRuntime.jsx(FieldsContext.Provider, { value: fields, children: props.children });
|
581
582
|
};
|
582
583
|
var useField = (type) => {
|
583
|
-
const context =
|
584
|
+
const context = React13__namespace.default.useContext(FieldsContext);
|
584
585
|
return (context == null ? void 0 : context[type]) || InputField;
|
585
586
|
};
|
586
587
|
var defaultInputType = "text";
|
587
|
-
var Field =
|
588
|
+
var Field = React13__namespace.forwardRef(
|
588
589
|
(props, ref) => {
|
589
590
|
const { type = defaultInputType, name } = props;
|
590
591
|
const overrides = useFieldProps(name);
|
@@ -611,8 +612,8 @@ var FormLayout = ({ children, ...props }) => {
|
|
611
612
|
{
|
612
613
|
...gridProps,
|
613
614
|
className: utils.cx("sui-form__layout", props.className),
|
614
|
-
children:
|
615
|
-
if (
|
615
|
+
children: React13__namespace.Children.map(children, (child) => {
|
616
|
+
if (React13__namespace.isValidElement(child)) {
|
616
617
|
return /* @__PURE__ */ jsxRuntime.jsx(FormLayoutItem, { children: child });
|
617
618
|
}
|
618
619
|
return child;
|
@@ -651,7 +652,7 @@ var useArrayField = ({
|
|
651
652
|
var useArrayFieldRow = ({ index }) => {
|
652
653
|
const { clearErrors } = useFormContext();
|
653
654
|
const { name, remove, fields } = useArrayFieldContext();
|
654
|
-
|
655
|
+
React13__namespace.useEffect(() => {
|
655
656
|
clearErrors(name);
|
656
657
|
}, []);
|
657
658
|
return {
|
@@ -659,7 +660,7 @@ var useArrayFieldRow = ({ index }) => {
|
|
659
660
|
isFirst: index === 0,
|
660
661
|
isLast: index === fields.length - 1,
|
661
662
|
name: `${name}.${index}`,
|
662
|
-
remove:
|
663
|
+
remove: React13__namespace.useCallback(() => {
|
663
664
|
clearErrors(name);
|
664
665
|
remove(index);
|
665
666
|
}, [index])
|
@@ -754,7 +755,7 @@ var ArrayFieldRows = ({
|
|
754
755
|
return children(fields);
|
755
756
|
};
|
756
757
|
ArrayFieldRows.displayName = "ArrayFieldRows";
|
757
|
-
var ArrayFieldContainer =
|
758
|
+
var ArrayFieldContainer = React13__namespace.forwardRef(
|
758
759
|
({
|
759
760
|
name,
|
760
761
|
defaultValue,
|
@@ -771,7 +772,7 @@ var ArrayFieldContainer = React11__namespace.forwardRef(
|
|
771
772
|
min,
|
772
773
|
max
|
773
774
|
});
|
774
|
-
|
775
|
+
React13__namespace.useImperativeHandle(ref, () => context, [ref, context]);
|
775
776
|
return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(BaseField, { name, ...fieldProps, children }) });
|
776
777
|
}
|
777
778
|
);
|
@@ -811,10 +812,10 @@ var AutoFields = ({
|
|
811
812
|
const context = useFormContext();
|
812
813
|
const schema = schemaProp || context.schema;
|
813
814
|
const fieldResolver = fieldResolverProp || context.fieldResolver;
|
814
|
-
const resolver =
|
815
|
-
const fields =
|
815
|
+
const resolver = React13__namespace.useMemo(() => fieldResolver, [schema, fieldResolver]);
|
816
|
+
const fields = React13__namespace.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
|
816
817
|
const form = useFormContext();
|
817
|
-
|
818
|
+
React13__namespace.useEffect(() => {
|
818
819
|
var _a;
|
819
820
|
if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
|
820
821
|
form.setFocus(fields[0].name);
|
@@ -930,8 +931,8 @@ var Form = react.forwardRef(
|
|
930
931
|
};
|
931
932
|
const methods = reactHookForm.useForm(form);
|
932
933
|
const { handleSubmit } = methods;
|
933
|
-
|
934
|
-
|
934
|
+
React13__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
|
935
|
+
React13__namespace.useEffect(() => {
|
935
936
|
let subscription;
|
936
937
|
if (onChange) {
|
937
938
|
subscription = methods.watch(onChange);
|
@@ -981,8 +982,8 @@ function useStepForm(props) {
|
|
981
982
|
const { onChange, ...rest } = props;
|
982
983
|
const stepper = core.useStepper(rest);
|
983
984
|
const { activeStep, isLastStep, nextStep } = stepper;
|
984
|
-
const [steps, updateSteps] =
|
985
|
-
const onSubmitStep =
|
985
|
+
const [steps, updateSteps] = React13__namespace.useState({});
|
986
|
+
const onSubmitStep = React13__namespace.useCallback(
|
986
987
|
async (data) => {
|
987
988
|
var _a, _b;
|
988
989
|
try {
|
@@ -1003,7 +1004,7 @@ function useStepForm(props) {
|
|
1003
1004
|
},
|
1004
1005
|
[steps, activeStep, isLastStep]
|
1005
1006
|
);
|
1006
|
-
const getFormProps =
|
1007
|
+
const getFormProps = React13__namespace.useCallback(() => {
|
1007
1008
|
const step = steps[activeStep];
|
1008
1009
|
return {
|
1009
1010
|
onSubmit: onSubmitStep,
|
@@ -1011,7 +1012,7 @@ function useStepForm(props) {
|
|
1011
1012
|
resolver: step == null ? void 0 : step.resolver
|
1012
1013
|
};
|
1013
1014
|
}, [steps, onSubmitStep, activeStep]);
|
1014
|
-
const updateStep =
|
1015
|
+
const updateStep = React13__namespace.useCallback(
|
1015
1016
|
(step) => {
|
1016
1017
|
updateSteps((steps2) => {
|
1017
1018
|
return {
|
@@ -1033,7 +1034,7 @@ function useFormStep(props) {
|
|
1033
1034
|
const { name, schema, resolver, onSubmit } = props;
|
1034
1035
|
const step = core.useStep({ name });
|
1035
1036
|
const { steps, updateStep } = useStepFormContext();
|
1036
|
-
|
1037
|
+
React13__namespace.useEffect(() => {
|
1037
1038
|
updateStep({ name, schema, resolver, onSubmit });
|
1038
1039
|
}, [name, schema]);
|
1039
1040
|
return {
|
@@ -1041,20 +1042,20 @@ function useFormStep(props) {
|
|
1041
1042
|
...steps[name] || { name, schema }
|
1042
1043
|
};
|
1043
1044
|
}
|
1044
|
-
var StepForm =
|
1045
|
+
var StepForm = React13__namespace.forwardRef(
|
1045
1046
|
(props, ref) => {
|
1046
1047
|
const { children, ...rest } = props;
|
1047
1048
|
const stepper = useStepForm(props);
|
1048
1049
|
const { getFormProps, ...ctx } = stepper;
|
1049
|
-
const context =
|
1050
|
+
const context = React13__namespace.useMemo(() => ctx, [ctx]);
|
1050
1051
|
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) }) }) });
|
1051
1052
|
}
|
1052
1053
|
);
|
1053
1054
|
var FormStepper = (props) => {
|
1054
1055
|
const { activeIndex, setIndex } = core.useStepperContext();
|
1055
1056
|
const { children, orientation, variant, colorScheme, size, ...rest } = props;
|
1056
|
-
const elements =
|
1057
|
-
if (
|
1057
|
+
const elements = React13__namespace.Children.map(children, (child) => {
|
1058
|
+
if (React13__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
|
1058
1059
|
const { isCompleted } = useFormStep(child.props);
|
1059
1060
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
1060
1061
|
core.StepperStep,
|
@@ -1069,7 +1070,7 @@ var FormStepper = (props) => {
|
|
1069
1070
|
}
|
1070
1071
|
return child;
|
1071
1072
|
});
|
1072
|
-
const onChange =
|
1073
|
+
const onChange = React13__namespace.useCallback((i) => {
|
1073
1074
|
setIndex(i);
|
1074
1075
|
}, []);
|
1075
1076
|
return /* @__PURE__ */ jsxRuntime.jsx(
|