@saas-ui/forms 2.2.0 → 2.3.0
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 +25 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +45 -31
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +45 -31
- package/dist/index.mjs.map +1 -1
- package/dist/yup/index.d.ts +1 -0
- package/dist/zod/index.d.ts +1 -0
- package/package.json +2 -2
- package/src/create-form.tsx +9 -3
- package/src/display-if.tsx +22 -1
- package/src/number-input/number-input.tsx +1 -5
- package/src/pin-input/pin-input.tsx +0 -4
- package/src/submit-button.tsx +4 -8
package/dist/index.mjs
CHANGED
@@ -87,7 +87,7 @@ import { ChevronDownIcon, ChevronUpIcon } from "@saas-ui/core";
|
|
87
87
|
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
88
88
|
var NumberInput = forwardRef((props, ref) => {
|
89
89
|
const {
|
90
|
-
hideStepper,
|
90
|
+
hideStepper = false,
|
91
91
|
incrementIcon = /* @__PURE__ */ jsx3(ChevronUpIcon, {}),
|
92
92
|
decrementIcon = /* @__PURE__ */ jsx3(ChevronDownIcon, {}),
|
93
93
|
placeholder,
|
@@ -103,9 +103,6 @@ var NumberInput = forwardRef((props, ref) => {
|
|
103
103
|
] })
|
104
104
|
] });
|
105
105
|
});
|
106
|
-
NumberInput.defaultProps = {
|
107
|
-
hideStepper: false
|
108
|
-
};
|
109
106
|
NumberInput.displayName = "NumberInput";
|
110
107
|
|
111
108
|
// src/password-input/password-input.tsx
|
@@ -1044,9 +1041,10 @@ import { jsx as jsx18 } from "react/jsx-runtime";
|
|
1044
1041
|
var SubmitButton = forwardRef12(
|
1045
1042
|
(props, ref) => {
|
1046
1043
|
const {
|
1044
|
+
variant = "primary",
|
1047
1045
|
children = "Submit",
|
1048
|
-
disableIfUntouched,
|
1049
|
-
disableIfInvalid,
|
1046
|
+
disableIfUntouched = false,
|
1047
|
+
disableIfInvalid = false,
|
1050
1048
|
isDisabled: isDisabledProp,
|
1051
1049
|
isLoading,
|
1052
1050
|
...rest
|
@@ -1058,6 +1056,7 @@ var SubmitButton = forwardRef12(
|
|
1058
1056
|
{
|
1059
1057
|
...rest,
|
1060
1058
|
ref,
|
1059
|
+
variant,
|
1061
1060
|
type: "submit",
|
1062
1061
|
isLoading: formState.isSubmitting || isLoading,
|
1063
1062
|
isDisabled,
|
@@ -1066,14 +1065,10 @@ var SubmitButton = forwardRef12(
|
|
1066
1065
|
);
|
1067
1066
|
}
|
1068
1067
|
);
|
1069
|
-
SubmitButton.defaultProps = {
|
1070
|
-
variant: "primary",
|
1071
|
-
disableIfUntouched: false,
|
1072
|
-
disableIfInvalid: false
|
1073
|
-
};
|
1074
1068
|
SubmitButton.displayName = "SubmitButton";
|
1075
1069
|
|
1076
1070
|
// src/display-if.tsx
|
1071
|
+
import * as React10 from "react";
|
1077
1072
|
import {
|
1078
1073
|
useWatch
|
1079
1074
|
} from "react-hook-form";
|
@@ -1083,8 +1078,11 @@ var DisplayIf = ({
|
|
1083
1078
|
defaultValue,
|
1084
1079
|
isDisabled,
|
1085
1080
|
isExact,
|
1086
|
-
condition = (value) => !!value
|
1081
|
+
condition = (value) => !!value,
|
1082
|
+
onToggle
|
1087
1083
|
}) => {
|
1084
|
+
const initializedRef = React10.useRef(false);
|
1085
|
+
const matchesRef = React10.useRef(false);
|
1088
1086
|
const value = useWatch({
|
1089
1087
|
name,
|
1090
1088
|
defaultValue,
|
@@ -1092,12 +1090,23 @@ var DisplayIf = ({
|
|
1092
1090
|
exact: isExact
|
1093
1091
|
});
|
1094
1092
|
const context = useFormContext();
|
1095
|
-
|
1093
|
+
const matches = condition(value, context);
|
1094
|
+
React10.useEffect(() => {
|
1095
|
+
if (!initializedRef.current) {
|
1096
|
+
initializedRef.current = true;
|
1097
|
+
return;
|
1098
|
+
}
|
1099
|
+
if (matchesRef.current === matches)
|
1100
|
+
return;
|
1101
|
+
matchesRef.current = matches;
|
1102
|
+
onToggle == null ? void 0 : onToggle(matches, context);
|
1103
|
+
}, [value]);
|
1104
|
+
return matches ? children : null;
|
1096
1105
|
};
|
1097
1106
|
DisplayIf.displayName = "DisplayIf";
|
1098
1107
|
|
1099
1108
|
// src/step-form.tsx
|
1100
|
-
import * as
|
1109
|
+
import * as React12 from "react";
|
1101
1110
|
import {
|
1102
1111
|
chakra as chakra4,
|
1103
1112
|
Button as Button5
|
@@ -1110,7 +1119,7 @@ import {
|
|
1110
1119
|
} from "@saas-ui/core";
|
1111
1120
|
|
1112
1121
|
// src/use-step-form.tsx
|
1113
|
-
import * as
|
1122
|
+
import * as React11 from "react";
|
1114
1123
|
import { createContext as createContext4 } from "@chakra-ui/react-utils";
|
1115
1124
|
import {
|
1116
1125
|
useStepper,
|
@@ -1129,11 +1138,11 @@ function useStepForm(props) {
|
|
1129
1138
|
...rest
|
1130
1139
|
} = props;
|
1131
1140
|
const stepper = useStepper(rest);
|
1132
|
-
const [options, setOptions] =
|
1141
|
+
const [options, setOptions] = React11.useState(stepsOptions);
|
1133
1142
|
const { activeStep, isLastStep, nextStep } = stepper;
|
1134
|
-
const [steps, updateSteps] =
|
1135
|
-
const mergedData =
|
1136
|
-
const onSubmitStep =
|
1143
|
+
const [steps, updateSteps] = React11.useState({});
|
1144
|
+
const mergedData = React11.useRef({});
|
1145
|
+
const onSubmitStep = React11.useCallback(
|
1137
1146
|
async (data) => {
|
1138
1147
|
var _a, _b;
|
1139
1148
|
try {
|
@@ -1158,7 +1167,7 @@ function useStepForm(props) {
|
|
1158
1167
|
},
|
1159
1168
|
[steps, activeStep, isLastStep, mergedData]
|
1160
1169
|
);
|
1161
|
-
const getFormProps =
|
1170
|
+
const getFormProps = React11.useCallback(() => {
|
1162
1171
|
const step = steps[activeStep];
|
1163
1172
|
return {
|
1164
1173
|
onSubmit: onSubmitStep,
|
@@ -1170,7 +1179,7 @@ function useStepForm(props) {
|
|
1170
1179
|
fieldResolver: (step == null ? void 0 : step.schema) ? fieldResolver == null ? void 0 : fieldResolver(step.schema) : void 0
|
1171
1180
|
};
|
1172
1181
|
}, [steps, onSubmitStep, activeStep, resolver, fieldResolver]);
|
1173
|
-
const updateStep =
|
1182
|
+
const updateStep = React11.useCallback(
|
1174
1183
|
(step) => {
|
1175
1184
|
const stepOptions = options == null ? void 0 : options.find((s) => s.name === step.name);
|
1176
1185
|
updateSteps((steps2) => {
|
@@ -1196,7 +1205,7 @@ function useFormStep(props) {
|
|
1196
1205
|
const { name, schema, resolver, onSubmit } = props;
|
1197
1206
|
const step = useStep({ name });
|
1198
1207
|
const { steps, updateStep } = useStepFormContext();
|
1199
|
-
|
1208
|
+
React11.useEffect(() => {
|
1200
1209
|
updateStep({ name, schema, resolver, onSubmit });
|
1201
1210
|
}, [name, schema]);
|
1202
1211
|
return {
|
@@ -1219,8 +1228,8 @@ var FormStepper = (props) => {
|
|
1219
1228
|
render,
|
1220
1229
|
...rest
|
1221
1230
|
} = props;
|
1222
|
-
const elements =
|
1223
|
-
if (
|
1231
|
+
const elements = React12.Children.map(children, (child) => {
|
1232
|
+
if (React12.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
|
1224
1233
|
const { isCompleted } = useFormStep(child.props);
|
1225
1234
|
return /* @__PURE__ */ jsx19(
|
1226
1235
|
StepsItem,
|
@@ -1236,7 +1245,7 @@ var FormStepper = (props) => {
|
|
1236
1245
|
}
|
1237
1246
|
return child;
|
1238
1247
|
});
|
1239
|
-
const onChange =
|
1248
|
+
const onChange = React12.useCallback((i) => {
|
1240
1249
|
setIndex(i);
|
1241
1250
|
onChangeProp == null ? void 0 : onChangeProp(i);
|
1242
1251
|
}, []);
|
@@ -1333,7 +1342,7 @@ var WatchField = (props) => {
|
|
1333
1342
|
};
|
1334
1343
|
|
1335
1344
|
// src/form.tsx
|
1336
|
-
import * as
|
1345
|
+
import * as React13 from "react";
|
1337
1346
|
import { chakra as chakra5, forwardRef as forwardRef13 } from "@chakra-ui/react";
|
1338
1347
|
import { cx as cx4, runIfFn } from "@chakra-ui/utils";
|
1339
1348
|
import {
|
@@ -1381,8 +1390,8 @@ var Form = forwardRef13(
|
|
1381
1390
|
};
|
1382
1391
|
const methods = useForm(form);
|
1383
1392
|
const { handleSubmit } = methods;
|
1384
|
-
|
1385
|
-
|
1393
|
+
React13.useImperativeHandle(formRef, () => methods, [formRef, methods]);
|
1394
|
+
React13.useEffect(() => {
|
1386
1395
|
let subscription;
|
1387
1396
|
if (onChange) {
|
1388
1397
|
subscription = methods.watch(onChange);
|
@@ -1435,13 +1444,18 @@ function createForm({
|
|
1435
1444
|
} = {}) {
|
1436
1445
|
const DefaultForm = forwardRef14(
|
1437
1446
|
(props, ref) => {
|
1438
|
-
const {
|
1447
|
+
const {
|
1448
|
+
schema,
|
1449
|
+
resolver: resolverProp,
|
1450
|
+
fieldResolver: fieldResolverProp,
|
1451
|
+
...rest
|
1452
|
+
} = props;
|
1439
1453
|
return /* @__PURE__ */ jsx21(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsx21(
|
1440
1454
|
Form,
|
1441
1455
|
{
|
1442
1456
|
ref,
|
1443
|
-
resolver: resolver == null ? void 0 : resolver(props.schema),
|
1444
|
-
fieldResolver: fieldResolver == null ? void 0 : fieldResolver(schema),
|
1457
|
+
resolver: resolverProp != null ? resolverProp : resolver == null ? void 0 : resolver(props.schema),
|
1458
|
+
fieldResolver: fieldResolverProp != null ? fieldResolverProp : fieldResolver == null ? void 0 : fieldResolver(schema),
|
1445
1459
|
...rest
|
1446
1460
|
}
|
1447
1461
|
) });
|