@trackunit/react-form-wizard 1.0.15 → 1.0.17
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/index.cjs.js +14 -18
- package/index.esm.js +14 -18
- package/package.json +3 -3
package/index.cjs.js
CHANGED
|
@@ -161,7 +161,7 @@ const getStateIcon = (state) => {
|
|
|
161
161
|
*/
|
|
162
162
|
const FormWizardSidebarStep = ({ stepNumber, state, basePath, title, subTitle, path, dataTestId, onNavigate, isSubStep, }) => {
|
|
163
163
|
const stateIcon = getStateIcon(state);
|
|
164
|
-
return (jsxRuntime.jsx(reactRouter.Link, { className: cvaFormWizardSidebarStep({ state, isSubStep }), "data-testid": dataTestId
|
|
164
|
+
return (jsxRuntime.jsx(reactRouter.Link, { className: cvaFormWizardSidebarStep({ state, isSubStep }), "data-testid": dataTestId ?? `form-wizard-sidebar-step-${path}`, onClick: () => onNavigate(), params: prev => ({ ...prev, stepPath: path }), search: prev => ({ ...prev }), to: basePath, children: jsxRuntime.jsxs("div", { className: cvaSectionHeaderContainer({ state }), children: [jsxRuntime.jsx("div", { className: cvaStepNumberContainer(), children: stateIcon ?? (jsxRuntime.jsx("span", { className: cvaStepNumber({ state, isSubStep }), "data-testid": isSubStep ? `form-wizard-sidebar-substep` : `form-wizard-sidebar-step-number-${stepNumber}`, children: stepNumber })) }), jsxRuntime.jsxs("div", { className: cvaTitleAndDescription(), children: [jsxRuntime.jsx("h3", { className: cvaHeader(), children: title }), subTitle ? jsxRuntime.jsx("p", { className: cvaSubtitle(), children: subTitle }) : null] })] }) }));
|
|
165
165
|
};
|
|
166
166
|
|
|
167
167
|
const cvaFooterContainer = cssClassVarianceUtilities.cvaMerge([
|
|
@@ -262,9 +262,9 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
|
|
|
262
262
|
}, [initialFullFormState, setFullFormState]);
|
|
263
263
|
const isEmptyStep = sharedUtils.objectKeys(form.getValues()).length === 0;
|
|
264
264
|
const emptyStepSubmitHandler = react.useCallback(() => {
|
|
265
|
-
beforeSubmitInternal
|
|
265
|
+
beforeSubmitInternal?.(fullFormState);
|
|
266
266
|
if (isLastStep) {
|
|
267
|
-
submitHandlerInternal
|
|
267
|
+
submitHandlerInternal?.(fullFormState);
|
|
268
268
|
}
|
|
269
269
|
else if (nextStepPath) {
|
|
270
270
|
// eslint-disable-next-line local-rules/no-typescript-assertion
|
|
@@ -274,10 +274,10 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
|
|
|
274
274
|
const stepSubmitHandler = react.useMemo(() => form.handleSubmit(async (data) => {
|
|
275
275
|
//? This state is not updated for the submit handler below; therefore, there is duplication.
|
|
276
276
|
setFullFormState(prev => ({ ...prev, [stepKey]: data }));
|
|
277
|
-
beforeSubmitInternal
|
|
277
|
+
beforeSubmitInternal?.({ ...fullFormState, [stepKey]: data });
|
|
278
278
|
if (isLastStep) {
|
|
279
279
|
//? This state is not updated for the submit handler below; therefore, there is duplication.
|
|
280
|
-
await
|
|
280
|
+
await submitHandlerInternal?.({ ...fullFormState, [stepKey]: data });
|
|
281
281
|
}
|
|
282
282
|
else if (nextStepPath) {
|
|
283
283
|
// eslint-disable-next-line local-rules/no-typescript-assertion
|
|
@@ -314,7 +314,7 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
|
|
|
314
314
|
return (jsxRuntime.jsxs("form", { className: cvaFormWizardComponentStepForm(), noValidate: true, onSubmit: async (e) => {
|
|
315
315
|
e.preventDefault();
|
|
316
316
|
try {
|
|
317
|
-
await
|
|
317
|
+
await onPrimaryAction?.(form);
|
|
318
318
|
}
|
|
319
319
|
catch (error) {
|
|
320
320
|
sharedUtils.doNothing();
|
|
@@ -385,14 +385,13 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
|
|
|
385
385
|
const currentVisibleStepKey = subStepPath ? `${stepPath}/${subStepPath}` : stepPath;
|
|
386
386
|
const currentVisibleStepIndex = react.useMemo(() => sharedUtils.objectKeys(steps)
|
|
387
387
|
.filter(key => {
|
|
388
|
-
var _a;
|
|
389
388
|
const step = steps[key];
|
|
390
|
-
return hasShouldRenderProperty(step) ?
|
|
389
|
+
return hasShouldRenderProperty(step) ? step.shouldRender?.(fullFormState) : true;
|
|
391
390
|
})
|
|
392
391
|
.findIndex(key => key === currentVisibleStepKey), [currentVisibleStepKey, fullFormState, hasShouldRenderProperty, steps]);
|
|
393
392
|
const sidebarSteps = react.useMemo(() => {
|
|
394
393
|
return sharedUtils.objectEntries(steps)
|
|
395
|
-
.filter(([_, step]) =>
|
|
394
|
+
.filter(([_, step]) => (hasShouldRenderProperty(step) ? step.shouldRender?.(fullFormState) : true))
|
|
396
395
|
.map(([key, { title, sidebarDescription, defaultValues }], index) => {
|
|
397
396
|
const isPastStep = index < currentVisibleStepIndex;
|
|
398
397
|
const isFutureStep = index > currentVisibleStepIndex;
|
|
@@ -422,9 +421,8 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
|
|
|
422
421
|
if (isFutureStep) {
|
|
423
422
|
return sharedUtils.objectKeys(steps)
|
|
424
423
|
.filter((stepKey, stepIndex) => {
|
|
425
|
-
var _a;
|
|
426
424
|
const step = steps[stepKey];
|
|
427
|
-
return stepIndex < index && hasShouldRenderProperty(step) ?
|
|
425
|
+
return stepIndex < index && hasShouldRenderProperty(step) ? step.shouldRender?.(fullFormState) : true;
|
|
428
426
|
})
|
|
429
427
|
.every((pastStepKey) => stepStates[pastStepKey] === "valid")
|
|
430
428
|
? "ready"
|
|
@@ -464,13 +462,11 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
|
|
|
464
462
|
]);
|
|
465
463
|
const stepWrapper = react.useMemo(() => {
|
|
466
464
|
return sharedUtils.objectEntries(steps)
|
|
467
|
-
.filter(([_, step]) =>
|
|
465
|
+
.filter(([_, step]) => (hasShouldRenderProperty(step) ? step.shouldRender?.(fullFormState) : true))
|
|
468
466
|
.map(([stepKey, props], index) => {
|
|
469
|
-
var _a, _b, _c, _d;
|
|
470
467
|
const entriesOfRenderableSteps = sharedUtils.objectEntries(steps).filter(stepEntry => {
|
|
471
|
-
var _a;
|
|
472
468
|
const step = stepEntry[1];
|
|
473
|
-
return hasShouldRenderProperty(step) ?
|
|
469
|
+
return hasShouldRenderProperty(step) ? step.shouldRender?.(fullFormState) : true;
|
|
474
470
|
});
|
|
475
471
|
return currentVisibleStepKey === stepKey ? (jsxRuntime.jsx(FormWizardStepWrapper, { ...props,
|
|
476
472
|
basePath,
|
|
@@ -483,8 +479,8 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
|
|
|
483
479
|
setStepStates,
|
|
484
480
|
fullFormSchema,
|
|
485
481
|
lastStepPrimaryActionLabel,
|
|
486
|
-
nextStepPath:
|
|
487
|
-
previousStepPath:
|
|
482
|
+
nextStepPath: entriesOfRenderableSteps[index + 1]?.[0].toString() ?? null,
|
|
483
|
+
previousStepPath: entriesOfRenderableSteps[index - 1]?.[0].toString() ?? null,
|
|
488
484
|
initialFullFormState }, stepKey.toString())) : null;
|
|
489
485
|
});
|
|
490
486
|
}, [
|
|
@@ -568,7 +564,7 @@ const TestHelperFormWizardStep = ({ stepKey, fullFormSchema, defaultValues, chil
|
|
|
568
564
|
const form = reactHookForm.useForm({
|
|
569
565
|
resolver: zod.zodResolver(fullFormSchema.shape[stepKey]),
|
|
570
566
|
mode: "all",
|
|
571
|
-
defaultValues: defaultValues
|
|
567
|
+
defaultValues: defaultValues?.[stepKey],
|
|
572
568
|
});
|
|
573
569
|
const fullForm = reactHookForm.useForm({
|
|
574
570
|
resolver: zod.zodResolver(fullFormSchema),
|
package/index.esm.js
CHANGED
|
@@ -159,7 +159,7 @@ const getStateIcon = (state) => {
|
|
|
159
159
|
*/
|
|
160
160
|
const FormWizardSidebarStep = ({ stepNumber, state, basePath, title, subTitle, path, dataTestId, onNavigate, isSubStep, }) => {
|
|
161
161
|
const stateIcon = getStateIcon(state);
|
|
162
|
-
return (jsx(Link, { className: cvaFormWizardSidebarStep({ state, isSubStep }), "data-testid": dataTestId
|
|
162
|
+
return (jsx(Link, { className: cvaFormWizardSidebarStep({ state, isSubStep }), "data-testid": dataTestId ?? `form-wizard-sidebar-step-${path}`, onClick: () => onNavigate(), params: prev => ({ ...prev, stepPath: path }), search: prev => ({ ...prev }), to: basePath, children: jsxs("div", { className: cvaSectionHeaderContainer({ state }), children: [jsx("div", { className: cvaStepNumberContainer(), children: stateIcon ?? (jsx("span", { className: cvaStepNumber({ state, isSubStep }), "data-testid": isSubStep ? `form-wizard-sidebar-substep` : `form-wizard-sidebar-step-number-${stepNumber}`, children: stepNumber })) }), jsxs("div", { className: cvaTitleAndDescription(), children: [jsx("h3", { className: cvaHeader(), children: title }), subTitle ? jsx("p", { className: cvaSubtitle(), children: subTitle }) : null] })] }) }));
|
|
163
163
|
};
|
|
164
164
|
|
|
165
165
|
const cvaFooterContainer = cvaMerge([
|
|
@@ -260,9 +260,9 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
|
|
|
260
260
|
}, [initialFullFormState, setFullFormState]);
|
|
261
261
|
const isEmptyStep = objectKeys(form.getValues()).length === 0;
|
|
262
262
|
const emptyStepSubmitHandler = useCallback(() => {
|
|
263
|
-
beforeSubmitInternal
|
|
263
|
+
beforeSubmitInternal?.(fullFormState);
|
|
264
264
|
if (isLastStep) {
|
|
265
|
-
submitHandlerInternal
|
|
265
|
+
submitHandlerInternal?.(fullFormState);
|
|
266
266
|
}
|
|
267
267
|
else if (nextStepPath) {
|
|
268
268
|
// eslint-disable-next-line local-rules/no-typescript-assertion
|
|
@@ -272,10 +272,10 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
|
|
|
272
272
|
const stepSubmitHandler = useMemo(() => form.handleSubmit(async (data) => {
|
|
273
273
|
//? This state is not updated for the submit handler below; therefore, there is duplication.
|
|
274
274
|
setFullFormState(prev => ({ ...prev, [stepKey]: data }));
|
|
275
|
-
beforeSubmitInternal
|
|
275
|
+
beforeSubmitInternal?.({ ...fullFormState, [stepKey]: data });
|
|
276
276
|
if (isLastStep) {
|
|
277
277
|
//? This state is not updated for the submit handler below; therefore, there is duplication.
|
|
278
|
-
await
|
|
278
|
+
await submitHandlerInternal?.({ ...fullFormState, [stepKey]: data });
|
|
279
279
|
}
|
|
280
280
|
else if (nextStepPath) {
|
|
281
281
|
// eslint-disable-next-line local-rules/no-typescript-assertion
|
|
@@ -312,7 +312,7 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
|
|
|
312
312
|
return (jsxs("form", { className: cvaFormWizardComponentStepForm(), noValidate: true, onSubmit: async (e) => {
|
|
313
313
|
e.preventDefault();
|
|
314
314
|
try {
|
|
315
|
-
await
|
|
315
|
+
await onPrimaryAction?.(form);
|
|
316
316
|
}
|
|
317
317
|
catch (error) {
|
|
318
318
|
doNothing();
|
|
@@ -383,14 +383,13 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
|
|
|
383
383
|
const currentVisibleStepKey = subStepPath ? `${stepPath}/${subStepPath}` : stepPath;
|
|
384
384
|
const currentVisibleStepIndex = useMemo(() => objectKeys(steps)
|
|
385
385
|
.filter(key => {
|
|
386
|
-
var _a;
|
|
387
386
|
const step = steps[key];
|
|
388
|
-
return hasShouldRenderProperty(step) ?
|
|
387
|
+
return hasShouldRenderProperty(step) ? step.shouldRender?.(fullFormState) : true;
|
|
389
388
|
})
|
|
390
389
|
.findIndex(key => key === currentVisibleStepKey), [currentVisibleStepKey, fullFormState, hasShouldRenderProperty, steps]);
|
|
391
390
|
const sidebarSteps = useMemo(() => {
|
|
392
391
|
return objectEntries(steps)
|
|
393
|
-
.filter(([_, step]) =>
|
|
392
|
+
.filter(([_, step]) => (hasShouldRenderProperty(step) ? step.shouldRender?.(fullFormState) : true))
|
|
394
393
|
.map(([key, { title, sidebarDescription, defaultValues }], index) => {
|
|
395
394
|
const isPastStep = index < currentVisibleStepIndex;
|
|
396
395
|
const isFutureStep = index > currentVisibleStepIndex;
|
|
@@ -420,9 +419,8 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
|
|
|
420
419
|
if (isFutureStep) {
|
|
421
420
|
return objectKeys(steps)
|
|
422
421
|
.filter((stepKey, stepIndex) => {
|
|
423
|
-
var _a;
|
|
424
422
|
const step = steps[stepKey];
|
|
425
|
-
return stepIndex < index && hasShouldRenderProperty(step) ?
|
|
423
|
+
return stepIndex < index && hasShouldRenderProperty(step) ? step.shouldRender?.(fullFormState) : true;
|
|
426
424
|
})
|
|
427
425
|
.every((pastStepKey) => stepStates[pastStepKey] === "valid")
|
|
428
426
|
? "ready"
|
|
@@ -462,13 +460,11 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
|
|
|
462
460
|
]);
|
|
463
461
|
const stepWrapper = useMemo(() => {
|
|
464
462
|
return objectEntries(steps)
|
|
465
|
-
.filter(([_, step]) =>
|
|
463
|
+
.filter(([_, step]) => (hasShouldRenderProperty(step) ? step.shouldRender?.(fullFormState) : true))
|
|
466
464
|
.map(([stepKey, props], index) => {
|
|
467
|
-
var _a, _b, _c, _d;
|
|
468
465
|
const entriesOfRenderableSteps = objectEntries(steps).filter(stepEntry => {
|
|
469
|
-
var _a;
|
|
470
466
|
const step = stepEntry[1];
|
|
471
|
-
return hasShouldRenderProperty(step) ?
|
|
467
|
+
return hasShouldRenderProperty(step) ? step.shouldRender?.(fullFormState) : true;
|
|
472
468
|
});
|
|
473
469
|
return currentVisibleStepKey === stepKey ? (jsx(FormWizardStepWrapper, { ...props,
|
|
474
470
|
basePath,
|
|
@@ -481,8 +477,8 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
|
|
|
481
477
|
setStepStates,
|
|
482
478
|
fullFormSchema,
|
|
483
479
|
lastStepPrimaryActionLabel,
|
|
484
|
-
nextStepPath:
|
|
485
|
-
previousStepPath:
|
|
480
|
+
nextStepPath: entriesOfRenderableSteps[index + 1]?.[0].toString() ?? null,
|
|
481
|
+
previousStepPath: entriesOfRenderableSteps[index - 1]?.[0].toString() ?? null,
|
|
486
482
|
initialFullFormState }, stepKey.toString())) : null;
|
|
487
483
|
});
|
|
488
484
|
}, [
|
|
@@ -566,7 +562,7 @@ const TestHelperFormWizardStep = ({ stepKey, fullFormSchema, defaultValues, chil
|
|
|
566
562
|
const form = useForm({
|
|
567
563
|
resolver: zodResolver(fullFormSchema.shape[stepKey]),
|
|
568
564
|
mode: "all",
|
|
569
|
-
defaultValues: defaultValues
|
|
565
|
+
defaultValues: defaultValues?.[stepKey],
|
|
570
566
|
});
|
|
571
567
|
const fullForm = useForm({
|
|
572
568
|
resolver: zodResolver(fullFormSchema),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-form-wizard",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.17",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"dependencies": {
|
|
@@ -11,8 +11,8 @@
|
|
|
11
11
|
"@tanstack/react-router": "1.47.1",
|
|
12
12
|
"@trackunit/shared-utils": "^1.0.3",
|
|
13
13
|
"@trackunit/css-class-variance-utilities": "^1.0.1",
|
|
14
|
-
"@trackunit/react-components": "^1.0
|
|
15
|
-
"@trackunit/i18n-library-translation": "^1.0.
|
|
14
|
+
"@trackunit/react-components": "^1.1.0",
|
|
15
|
+
"@trackunit/i18n-library-translation": "^1.0.7"
|
|
16
16
|
},
|
|
17
17
|
"engines": {
|
|
18
18
|
"node": ">=20.x",
|