@trackunit/react-form-wizard 0.1.182 → 0.1.184

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 CHANGED
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var jsxRuntime = require('react/jsx-runtime');
6
4
  var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
7
5
  var reactRouter = require('@tanstack/react-router');
@@ -156,37 +154,7 @@ const getStateIcon = (state) => {
156
154
  */
157
155
  const FormWizardSidebarStep = ({ stepNumber, state, basePath, title, subTitle, path, dataTestId, onNavigate, isSubStep, }) => {
158
156
  const stateIcon = getStateIcon(state);
159
- return (jsxRuntime.jsx(reactRouter.Link, { className: cvaFormWizardSidebarStep({ state, isSubStep }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : `form-wizard-sidebar-step-${path}`, onClick: () => onNavigate(), params: prev => (Object.assign(Object.assign({}, prev), { stepPath: path })), search: prev => (Object.assign({}, prev)), to: basePath, children: jsxRuntime.jsxs("div", { className: cvaSectionHeaderContainer(), children: [jsxRuntime.jsx("div", { children: stateIcon !== null && stateIcon !== void 0 ? stateIcon : jsxRuntime.jsx("span", { className: cvaStepNumber({ state, isSubStep }), children: stepNumber }) }), jsxRuntime.jsxs("div", { className: cvaTitleAndDescription(), children: [jsxRuntime.jsx("h1", { className: cvaHeader(), children: title }), subTitle ? jsxRuntime.jsx("p", { className: cvaSubtitle(), children: subTitle }) : null] })] }) }));
160
- };
161
-
162
- /******************************************************************************
163
- Copyright (c) Microsoft Corporation.
164
-
165
- Permission to use, copy, modify, and/or distribute this software for any
166
- purpose with or without fee is hereby granted.
167
-
168
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
169
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
170
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
171
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
172
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
173
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
174
- PERFORMANCE OF THIS SOFTWARE.
175
- ***************************************************************************** */
176
-
177
- function __awaiter(thisArg, _arguments, P, generator) {
178
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
179
- return new (P || (P = Promise))(function (resolve, reject) {
180
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
181
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
182
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
183
- step((generator = generator.apply(thisArg, _arguments || [])).next());
184
- });
185
- }
186
-
187
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
188
- var e = new Error(message);
189
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
157
+ return (jsxRuntime.jsx(reactRouter.Link, { className: cvaFormWizardSidebarStep({ state, isSubStep }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : `form-wizard-sidebar-step-${path}`, onClick: () => onNavigate(), params: prev => ({ ...prev, stepPath: path }), search: prev => ({ ...prev }), to: basePath, children: jsxRuntime.jsxs("div", { className: cvaSectionHeaderContainer(), children: [jsxRuntime.jsx("div", { children: stateIcon !== null && stateIcon !== void 0 ? stateIcon : jsxRuntime.jsx("span", { className: cvaStepNumber({ state, isSubStep }), children: stepNumber }) }), jsxRuntime.jsxs("div", { className: cvaTitleAndDescription(), children: [jsxRuntime.jsx("h1", { className: cvaHeader(), children: title }), subTitle ? jsxRuntime.jsx("p", { className: cvaSubtitle(), children: subTitle }) : null] })] }) }));
190
158
  };
191
159
 
192
160
  const cvaFooterContainer = cssClassVarianceUtilities.cvaMerge([
@@ -253,24 +221,24 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
253
221
  control: form.control,
254
222
  });
255
223
  react.useEffect(() => {
256
- setFullFormState(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: watchedValue })));
224
+ setFullFormState(prev => ({ ...prev, [stepKey]: watchedValue }));
257
225
  }, [setFullFormState, stepKey, watchedValue]);
258
226
  react.useEffect(() => {
259
- setStepForms(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: form })));
227
+ setStepForms(prev => ({ ...prev, [stepKey]: form }));
260
228
  }, [form, setStepForms, stepKey]);
261
229
  react.useEffect(() => {
262
- setStepStates(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: form.formState.isValid ? "valid" : "invalid" })));
230
+ setStepStates(prev => ({ ...prev, [stepKey]: form.formState.isValid ? "valid" : "invalid" }));
263
231
  }, [form.formState.isValid, setStepStates, stepKey]);
264
232
  const isLastStep = nextStepPath === null;
265
233
  const handleCancel = react.useCallback(() => {
266
234
  return onCancel ? onCancel() : navigate({ to: "../../" });
267
235
  }, [onCancel, navigate]);
268
236
  const setSubmitHandler = react.useCallback(callback => {
269
- const wrappedCallbackFunction = (fullFormStateInner) => __awaiter(void 0, void 0, void 0, function* () {
237
+ const wrappedCallbackFunction = async (fullFormStateInner) => {
270
238
  setIsSubmitting(true);
271
- yield callback(fullFormStateInner);
239
+ await callback(fullFormStateInner);
272
240
  setIsSubmitting(false);
273
- });
241
+ };
274
242
  setSubmitHandlerInternal(() => wrappedCallbackFunction);
275
243
  }, [setSubmitHandlerInternal]);
276
244
  const isEmptyStep = sharedUtils.objectKeys(form.getValues()).length === 0;
@@ -283,18 +251,18 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
283
251
  navigate({ to: basePath, params: { stepPath: nextStepPath } });
284
252
  }
285
253
  }, [basePath, fullFormState, isLastStep, navigate, nextStepPath, submitHandlerInternal]);
286
- const stepSubmitHandler = react.useMemo(() => form.handleSubmit((data) => __awaiter(void 0, void 0, void 0, function* () {
254
+ const stepSubmitHandler = react.useMemo(() => form.handleSubmit(async (data) => {
287
255
  //? This state is not updated for the submit handler below; therefore, there is duplication.
288
- setFullFormState(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: data })));
256
+ setFullFormState(prev => ({ ...prev, [stepKey]: data }));
289
257
  if (isLastStep) {
290
258
  //? This state is not updated for the submit handler below; therefore, there is duplication.
291
- yield (submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(Object.assign(Object.assign({}, fullFormState), { [stepKey]: data })));
259
+ await (submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal({ ...fullFormState, [stepKey]: data }));
292
260
  }
293
261
  else if (nextStepPath) {
294
262
  // eslint-disable-next-line local-rules/no-typescript-assertion
295
263
  navigate({ to: basePath, params: { stepPath: nextStepPath } });
296
264
  }
297
- })), [
265
+ }), [
298
266
  basePath,
299
267
  form,
300
268
  fullFormState,
@@ -324,11 +292,11 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
324
292
  return (jsxRuntime.jsxs("form", { className: cvaFormWizardComponentStepForm(), noValidate: true, onSubmit: e => {
325
293
  e.preventDefault();
326
294
  handleSubmit();
327
- }, children: [jsxRuntime.jsx(FormWizardHeader, { title, description }), jsxRuntime.jsx("div", { className: cvaFormWizardComponentContainer({ className: containerClassName }), children: jsxRuntime.jsx(reactHookForm.FormProvider, Object.assign({}, form, { children: component({
295
+ }, children: [jsxRuntime.jsx(FormWizardHeader, { title, description }), jsxRuntime.jsx("div", { className: cvaFormWizardComponentContainer({ className: containerClassName }), children: jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: component({
328
296
  form,
329
297
  fullForm,
330
298
  setSubmitHandler: isLastStep ? setSubmitHandler : null,
331
- }) })) }), jsxRuntime.jsx(FormWizardFooter, { stepForms,
299
+ }) }) }), jsxRuntime.jsx(FormWizardFooter, { stepForms,
332
300
  onBack: previousStepPath
333
301
  ? // eslint-disable-next-line local-rules/no-typescript-assertion
334
302
  () => navigate({ to: basePath, params: { stepPath: previousStepPath } })
@@ -405,7 +373,10 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
405
373
  }
406
374
  //If the step has a default value, it is considered valid, so we set it to valid in order to show the green checkmark
407
375
  if (hasDefaultValue && stepStates[key] === undefined && isEdit) {
408
- setStepStates(prev => (Object.assign(Object.assign({}, prev), { [key]: "valid" })));
376
+ setStepStates(prev => ({
377
+ ...prev,
378
+ [key]: "valid",
379
+ }));
409
380
  }
410
381
  //If the step has a default value, we return done, so we can navigate to that step
411
382
  if (hasDefaultValue && isEdit && stepStates[key] === "valid") {
@@ -429,21 +400,23 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
429
400
  }
430
401
  return "ready";
431
402
  };
432
- return (jsxRuntime.jsx(FormWizardSidebarStep, { key: String(key),
433
- state: stepState(),
403
+ return (jsxRuntime.jsx(FormWizardSidebarStep, { state: stepState(),
434
404
  stepNumber: isSubStep ? undefined : rootSteps.indexOf(key) + 1,
435
405
  title,
436
406
  onNavigate: () => {
437
407
  previousStepKey &&
438
408
  setFullFormState(prev => {
439
409
  var _a;
440
- return (Object.assign(Object.assign({}, prev), { [previousStepKey]: (_a = stepForms[previousStepKey]) === null || _a === void 0 ? void 0 : _a.getValues() }));
410
+ return ({
411
+ ...prev,
412
+ [previousStepKey]: (_a = stepForms[previousStepKey]) === null || _a === void 0 ? void 0 : _a.getValues(),
413
+ });
441
414
  });
442
415
  },
443
416
  basePath,
444
417
  path: String(key),
445
418
  subTitle: sidebarDescription,
446
- isSubStep }));
419
+ isSubStep }, String(key)));
447
420
  }) }), jsxRuntime.jsx("div", { className: cvaStepContainer(), children: sharedUtils.objectEntries(steps)
448
421
  .filter(([_, step]) => { var _a; return (hasShouldRenderProperty(step) ? (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState) : true); })
449
422
  .map(([stepKey, props], index) => {
@@ -453,7 +426,8 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
453
426
  const step = stepEntry[1];
454
427
  return hasShouldRenderProperty(step) ? (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState) : true;
455
428
  });
456
- return currentVisibleStepKey === stepKey ? (jsxRuntime.jsx(FormWizardStepWrapper, Object.assign({}, props, { basePath,
429
+ return currentVisibleStepKey === stepKey ? (jsxRuntime.jsx(FormWizardStepWrapper, { ...props,
430
+ basePath,
457
431
  stepKey: stepKey.toString(), // TODO: .toString() is a workaround
458
432
  stepForms,
459
433
  setStepForms,
@@ -464,7 +438,7 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
464
438
  fullFormSchema,
465
439
  lastStepPrimaryActionLabel,
466
440
  nextStepPath: (_b = (_a = entriesOfRenderableSteps[index + 1]) === null || _a === void 0 ? void 0 : _a[0].toString()) !== null && _b !== void 0 ? _b : null,
467
- previousStepPath: (_d = (_c = entriesOfRenderableSteps[index - 1]) === null || _c === void 0 ? void 0 : _c[0].toString()) !== null && _d !== void 0 ? _d : null }), stepKey.toString())) : null;
441
+ previousStepPath: (_d = (_c = entriesOfRenderableSteps[index - 1]) === null || _c === void 0 ? void 0 : _c[0].toString()) !== null && _d !== void 0 ? _d : null }, stepKey.toString())) : null;
468
442
  }) })] }) }));
469
443
  };
470
444
 
@@ -518,9 +492,11 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
518
492
  });
519
493
  */
520
494
  const useFormWizard = (props) => {
521
- return react.useMemo(() => (Object.assign(Object.assign({}, props), {
495
+ return react.useMemo(() => ({
496
+ ...props,
522
497
  // eslint-disable-next-line local-rules/no-typescript-assertion
523
- steps: sharedUtils.objectFromEntries(sharedUtils.objectEntries(props.steps).map(([key, step]) => [key, Object.assign(Object.assign({}, step), { formSchema: props.fullFormSchema.shape[key] })])) })), [props]);
498
+ steps: sharedUtils.objectFromEntries(sharedUtils.objectEntries(props.steps).map(([key, step]) => [key, { ...step, formSchema: props.fullFormSchema.shape[key] }])), // TODO: find a work around for string | number | symbol,
499
+ }), [props]);
524
500
  };
525
501
 
526
502
  /**
@@ -538,7 +514,7 @@ const TestHelperFormWizardStep = ({ stepKey, fullFormSchema, defaultValues, chil
538
514
  mode: "all",
539
515
  defaultValues: defaultValues,
540
516
  });
541
- return jsxRuntime.jsx("div", { "data-testid": stepKey, children: children(Object.assign({ form, fullForm, setSubmitHandler: () => { } }, overrides)) });
517
+ return jsxRuntime.jsx("div", { "data-testid": stepKey, children: children({ form, fullForm, setSubmitHandler: () => { }, ...overrides }) });
542
518
  };
543
519
 
544
520
  /*
package/index.esm.js CHANGED
@@ -152,37 +152,7 @@ const getStateIcon = (state) => {
152
152
  */
153
153
  const FormWizardSidebarStep = ({ stepNumber, state, basePath, title, subTitle, path, dataTestId, onNavigate, isSubStep, }) => {
154
154
  const stateIcon = getStateIcon(state);
155
- return (jsx(Link, { className: cvaFormWizardSidebarStep({ state, isSubStep }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : `form-wizard-sidebar-step-${path}`, onClick: () => onNavigate(), params: prev => (Object.assign(Object.assign({}, prev), { stepPath: path })), search: prev => (Object.assign({}, prev)), to: basePath, children: jsxs("div", { className: cvaSectionHeaderContainer(), children: [jsx("div", { children: stateIcon !== null && stateIcon !== void 0 ? stateIcon : jsx("span", { className: cvaStepNumber({ state, isSubStep }), children: stepNumber }) }), jsxs("div", { className: cvaTitleAndDescription(), children: [jsx("h1", { className: cvaHeader(), children: title }), subTitle ? jsx("p", { className: cvaSubtitle(), children: subTitle }) : null] })] }) }));
156
- };
157
-
158
- /******************************************************************************
159
- Copyright (c) Microsoft Corporation.
160
-
161
- Permission to use, copy, modify, and/or distribute this software for any
162
- purpose with or without fee is hereby granted.
163
-
164
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
165
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
166
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
167
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
168
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
169
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
170
- PERFORMANCE OF THIS SOFTWARE.
171
- ***************************************************************************** */
172
-
173
- function __awaiter(thisArg, _arguments, P, generator) {
174
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
175
- return new (P || (P = Promise))(function (resolve, reject) {
176
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
177
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
178
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
179
- step((generator = generator.apply(thisArg, _arguments || [])).next());
180
- });
181
- }
182
-
183
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
184
- var e = new Error(message);
185
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
155
+ return (jsx(Link, { className: cvaFormWizardSidebarStep({ state, isSubStep }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : `form-wizard-sidebar-step-${path}`, onClick: () => onNavigate(), params: prev => ({ ...prev, stepPath: path }), search: prev => ({ ...prev }), to: basePath, children: jsxs("div", { className: cvaSectionHeaderContainer(), children: [jsx("div", { children: stateIcon !== null && stateIcon !== void 0 ? stateIcon : jsx("span", { className: cvaStepNumber({ state, isSubStep }), children: stepNumber }) }), jsxs("div", { className: cvaTitleAndDescription(), children: [jsx("h1", { className: cvaHeader(), children: title }), subTitle ? jsx("p", { className: cvaSubtitle(), children: subTitle }) : null] })] }) }));
186
156
  };
187
157
 
188
158
  const cvaFooterContainer = cvaMerge([
@@ -249,24 +219,24 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
249
219
  control: form.control,
250
220
  });
251
221
  useEffect(() => {
252
- setFullFormState(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: watchedValue })));
222
+ setFullFormState(prev => ({ ...prev, [stepKey]: watchedValue }));
253
223
  }, [setFullFormState, stepKey, watchedValue]);
254
224
  useEffect(() => {
255
- setStepForms(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: form })));
225
+ setStepForms(prev => ({ ...prev, [stepKey]: form }));
256
226
  }, [form, setStepForms, stepKey]);
257
227
  useEffect(() => {
258
- setStepStates(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: form.formState.isValid ? "valid" : "invalid" })));
228
+ setStepStates(prev => ({ ...prev, [stepKey]: form.formState.isValid ? "valid" : "invalid" }));
259
229
  }, [form.formState.isValid, setStepStates, stepKey]);
260
230
  const isLastStep = nextStepPath === null;
261
231
  const handleCancel = useCallback(() => {
262
232
  return onCancel ? onCancel() : navigate({ to: "../../" });
263
233
  }, [onCancel, navigate]);
264
234
  const setSubmitHandler = useCallback(callback => {
265
- const wrappedCallbackFunction = (fullFormStateInner) => __awaiter(void 0, void 0, void 0, function* () {
235
+ const wrappedCallbackFunction = async (fullFormStateInner) => {
266
236
  setIsSubmitting(true);
267
- yield callback(fullFormStateInner);
237
+ await callback(fullFormStateInner);
268
238
  setIsSubmitting(false);
269
- });
239
+ };
270
240
  setSubmitHandlerInternal(() => wrappedCallbackFunction);
271
241
  }, [setSubmitHandlerInternal]);
272
242
  const isEmptyStep = objectKeys(form.getValues()).length === 0;
@@ -279,18 +249,18 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
279
249
  navigate({ to: basePath, params: { stepPath: nextStepPath } });
280
250
  }
281
251
  }, [basePath, fullFormState, isLastStep, navigate, nextStepPath, submitHandlerInternal]);
282
- const stepSubmitHandler = useMemo(() => form.handleSubmit((data) => __awaiter(void 0, void 0, void 0, function* () {
252
+ const stepSubmitHandler = useMemo(() => form.handleSubmit(async (data) => {
283
253
  //? This state is not updated for the submit handler below; therefore, there is duplication.
284
- setFullFormState(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: data })));
254
+ setFullFormState(prev => ({ ...prev, [stepKey]: data }));
285
255
  if (isLastStep) {
286
256
  //? This state is not updated for the submit handler below; therefore, there is duplication.
287
- yield (submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(Object.assign(Object.assign({}, fullFormState), { [stepKey]: data })));
257
+ await (submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal({ ...fullFormState, [stepKey]: data }));
288
258
  }
289
259
  else if (nextStepPath) {
290
260
  // eslint-disable-next-line local-rules/no-typescript-assertion
291
261
  navigate({ to: basePath, params: { stepPath: nextStepPath } });
292
262
  }
293
- })), [
263
+ }), [
294
264
  basePath,
295
265
  form,
296
266
  fullFormState,
@@ -320,11 +290,11 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
320
290
  return (jsxs("form", { className: cvaFormWizardComponentStepForm(), noValidate: true, onSubmit: e => {
321
291
  e.preventDefault();
322
292
  handleSubmit();
323
- }, children: [jsx(FormWizardHeader, { title, description }), jsx("div", { className: cvaFormWizardComponentContainer({ className: containerClassName }), children: jsx(FormProvider, Object.assign({}, form, { children: component({
293
+ }, children: [jsx(FormWizardHeader, { title, description }), jsx("div", { className: cvaFormWizardComponentContainer({ className: containerClassName }), children: jsx(FormProvider, { ...form, children: component({
324
294
  form,
325
295
  fullForm,
326
296
  setSubmitHandler: isLastStep ? setSubmitHandler : null,
327
- }) })) }), jsx(FormWizardFooter, { stepForms,
297
+ }) }) }), jsx(FormWizardFooter, { stepForms,
328
298
  onBack: previousStepPath
329
299
  ? // eslint-disable-next-line local-rules/no-typescript-assertion
330
300
  () => navigate({ to: basePath, params: { stepPath: previousStepPath } })
@@ -401,7 +371,10 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
401
371
  }
402
372
  //If the step has a default value, it is considered valid, so we set it to valid in order to show the green checkmark
403
373
  if (hasDefaultValue && stepStates[key] === undefined && isEdit) {
404
- setStepStates(prev => (Object.assign(Object.assign({}, prev), { [key]: "valid" })));
374
+ setStepStates(prev => ({
375
+ ...prev,
376
+ [key]: "valid",
377
+ }));
405
378
  }
406
379
  //If the step has a default value, we return done, so we can navigate to that step
407
380
  if (hasDefaultValue && isEdit && stepStates[key] === "valid") {
@@ -425,21 +398,23 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
425
398
  }
426
399
  return "ready";
427
400
  };
428
- return (jsx(FormWizardSidebarStep, { key: String(key),
429
- state: stepState(),
401
+ return (jsx(FormWizardSidebarStep, { state: stepState(),
430
402
  stepNumber: isSubStep ? undefined : rootSteps.indexOf(key) + 1,
431
403
  title,
432
404
  onNavigate: () => {
433
405
  previousStepKey &&
434
406
  setFullFormState(prev => {
435
407
  var _a;
436
- return (Object.assign(Object.assign({}, prev), { [previousStepKey]: (_a = stepForms[previousStepKey]) === null || _a === void 0 ? void 0 : _a.getValues() }));
408
+ return ({
409
+ ...prev,
410
+ [previousStepKey]: (_a = stepForms[previousStepKey]) === null || _a === void 0 ? void 0 : _a.getValues(),
411
+ });
437
412
  });
438
413
  },
439
414
  basePath,
440
415
  path: String(key),
441
416
  subTitle: sidebarDescription,
442
- isSubStep }));
417
+ isSubStep }, String(key)));
443
418
  }) }), jsx("div", { className: cvaStepContainer(), children: objectEntries(steps)
444
419
  .filter(([_, step]) => { var _a; return (hasShouldRenderProperty(step) ? (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState) : true); })
445
420
  .map(([stepKey, props], index) => {
@@ -449,7 +424,8 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
449
424
  const step = stepEntry[1];
450
425
  return hasShouldRenderProperty(step) ? (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState) : true;
451
426
  });
452
- return currentVisibleStepKey === stepKey ? (jsx(FormWizardStepWrapper, Object.assign({}, props, { basePath,
427
+ return currentVisibleStepKey === stepKey ? (jsx(FormWizardStepWrapper, { ...props,
428
+ basePath,
453
429
  stepKey: stepKey.toString(), // TODO: .toString() is a workaround
454
430
  stepForms,
455
431
  setStepForms,
@@ -460,7 +436,7 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
460
436
  fullFormSchema,
461
437
  lastStepPrimaryActionLabel,
462
438
  nextStepPath: (_b = (_a = entriesOfRenderableSteps[index + 1]) === null || _a === void 0 ? void 0 : _a[0].toString()) !== null && _b !== void 0 ? _b : null,
463
- previousStepPath: (_d = (_c = entriesOfRenderableSteps[index - 1]) === null || _c === void 0 ? void 0 : _c[0].toString()) !== null && _d !== void 0 ? _d : null }), stepKey.toString())) : null;
439
+ previousStepPath: (_d = (_c = entriesOfRenderableSteps[index - 1]) === null || _c === void 0 ? void 0 : _c[0].toString()) !== null && _d !== void 0 ? _d : null }, stepKey.toString())) : null;
464
440
  }) })] }) }));
465
441
  };
466
442
 
@@ -514,9 +490,11 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
514
490
  });
515
491
  */
516
492
  const useFormWizard = (props) => {
517
- return useMemo(() => (Object.assign(Object.assign({}, props), {
493
+ return useMemo(() => ({
494
+ ...props,
518
495
  // eslint-disable-next-line local-rules/no-typescript-assertion
519
- steps: objectFromEntries(objectEntries(props.steps).map(([key, step]) => [key, Object.assign(Object.assign({}, step), { formSchema: props.fullFormSchema.shape[key] })])) })), [props]);
496
+ steps: objectFromEntries(objectEntries(props.steps).map(([key, step]) => [key, { ...step, formSchema: props.fullFormSchema.shape[key] }])), // TODO: find a work around for string | number | symbol,
497
+ }), [props]);
520
498
  };
521
499
 
522
500
  /**
@@ -534,7 +512,7 @@ const TestHelperFormWizardStep = ({ stepKey, fullFormSchema, defaultValues, chil
534
512
  mode: "all",
535
513
  defaultValues: defaultValues,
536
514
  });
537
- return jsx("div", { "data-testid": stepKey, children: children(Object.assign({ form, fullForm, setSubmitHandler: () => { } }, overrides)) });
515
+ return jsx("div", { "data-testid": stepKey, children: children({ form, fullForm, setSubmitHandler: () => { }, ...overrides }) });
538
516
  };
539
517
 
540
518
  /*
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@trackunit/react-form-wizard",
3
- "version": "0.1.182",
3
+ "version": "0.1.184",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "dependencies": {
7
- "react": "^18.2.0",
7
+ "react": "18.3.1",
8
8
  "zod": "3.22.4",
9
9
  "@trackunit/css-class-variance-utilities": "*",
10
10
  "@trackunit/react-components": "*",
@@ -19,5 +19,6 @@
19
19
  "yarn": "3.8.2"
20
20
  },
21
21
  "module": "./index.esm.js",
22
- "main": "./index.cjs.js"
23
- }
22
+ "main": "./index.cjs.js",
23
+ "types": "./index.esm.d.ts"
24
+ }
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { UseFormReturn } from "react-hook-form";
3
2
  import { AnyZodObject, z } from "zod";
4
3
  import { FromWizardComponentProps, StepDefinitions } from "./useFormWizard";
@@ -9,4 +8,4 @@ export type FormWizardStepFormReturnMap<TFullSchema extends AnyZodObject> = Part
9
8
  * The FormWizard component is used for forms in multiple steps.
10
9
  * Use the useFormWizard hook to generate the props for this component.
11
10
  */
12
- export declare const FormWizard: <TFullSchema extends AnyZodObject, TComponentStepDefinitions extends StepDefinitions<TFullSchema>>({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }: FromWizardComponentProps<TFullSchema, TComponentStepDefinitions>) => JSX.Element;
11
+ export declare const FormWizard: <TFullSchema extends AnyZodObject, TComponentStepDefinitions extends StepDefinitions<TFullSchema>>({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }: FromWizardComponentProps<TFullSchema, TComponentStepDefinitions>) => import("react/jsx-runtime").JSX.Element;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { CommonProps } from "@trackunit/react-components";
3
2
  interface FormWizardFooterProps extends CommonProps {
4
3
  primaryActionLabel?: string;
@@ -10,5 +9,5 @@ interface FormWizardFooterProps extends CommonProps {
10
9
  * The footer component for the FormWizard.
11
10
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
12
11
  */
13
- export declare const FormWizardFooter: ({ disablePrimaryAction, onBack, onCancel, primaryActionLabel, }: FormWizardFooterProps) => JSX.Element;
12
+ export declare const FormWizardFooter: ({ disablePrimaryAction, onBack, onCancel, primaryActionLabel, }: FormWizardFooterProps) => import("react/jsx-runtime").JSX.Element;
14
13
  export {};
@@ -8,5 +8,5 @@ interface FormWizardHeaderProps extends CommonProps {
8
8
  * The header component for the FormWizard.
9
9
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
10
10
  */
11
- export declare const FormWizardHeader: ({ title, description, className, dataTestId }: FormWizardHeaderProps) => JSX.Element;
11
+ export declare const FormWizardHeader: ({ title, description, className, dataTestId }: FormWizardHeaderProps) => import("react/jsx-runtime").JSX.Element;
12
12
  export {};
@@ -10,5 +10,5 @@ interface FormWizardSidebarProps extends CommonProps {
10
10
  * Displays the sidebar with steps for the wizard.
11
11
  * Prefer using the FormWizard component instead of this directly.
12
12
  */
13
- export declare function FormWizardSidebar({ dataTestId, children, className }: FormWizardSidebarProps): JSX.Element;
13
+ export declare function FormWizardSidebar({ dataTestId, children, className }: FormWizardSidebarProps): import("react/jsx-runtime").JSX.Element;
14
14
  export {};
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { RegisteredRouter, RouteIds } from "@tanstack/react-router";
3
2
  import { CommonProps } from "@trackunit/react-components";
4
3
  import { StepState, StringWithStepKey } from "../FormWizard/useFormWizard";
@@ -16,5 +15,5 @@ interface FormWizardSidebarStepProps extends CommonProps {
16
15
  * A sidebar step component used by the FormWizard component to render each step.
17
16
  * This component is generally used internally by the FormWizard component.
18
17
  */
19
- export declare const FormWizardSidebarStep: ({ stepNumber, state, basePath, title, subTitle, path, dataTestId, onNavigate, isSubStep, }: FormWizardSidebarStepProps) => JSX.Element;
18
+ export declare const FormWizardSidebarStep: ({ stepNumber, state, basePath, title, subTitle, path, dataTestId, onNavigate, isSubStep, }: FormWizardSidebarStepProps) => import("react/jsx-runtime").JSX.Element;
20
19
  export {};
@@ -27,4 +27,4 @@ export interface FormWizardStepWrapperProps<TStepKey extends keyof z.TypeOf<TFul
27
27
  * A wrapper component used by the FormWizard component to render each step.
28
28
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
29
29
  */
30
- export declare const FormWizardStepWrapper: <TFullSchema extends AnyZodObject, TStepKey extends keyof z.TypeOf<TFullSchema>>({ stepKey, onCancel, description, title, component, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, stepForms, setStepForms, setStepStates, basePath, containerClassName, }: FormWizardStepWrapperProps<TStepKey, TFullSchema>) => JSX.Element;
30
+ export declare const FormWizardStepWrapper: <TFullSchema extends AnyZodObject, TStepKey extends keyof z.TypeOf<TFullSchema>>({ stepKey, onCancel, description, title, component, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, stepForms, setStepForms, setStepStates, basePath, containerClassName, }: FormWizardStepWrapperProps<TStepKey, TFullSchema>) => import("react/jsx-runtime").JSX.Element;
@@ -14,4 +14,4 @@ export interface TestHelperFormWizardStepProps<TStepKey extends keyof z.infer<TF
14
14
  * This component is not intended to be used in production code.
15
15
  * It is used to test the individual steps of a form wizard.
16
16
  */
17
- export declare const TestHelperFormWizardStep: <TStepKey extends keyof z.TypeOf<TFullSchema>, TFullSchema extends AnyZodObject>({ stepKey, fullFormSchema, defaultValues, children, overrides, }: TestHelperFormWizardStepProps<TStepKey, TFullSchema>) => JSX.Element;
17
+ export declare const TestHelperFormWizardStep: <TStepKey extends keyof z.infer<TFullSchema>, TFullSchema extends AnyZodObject>({ stepKey, fullFormSchema, defaultValues, children, overrides, }: TestHelperFormWizardStepProps<TStepKey, TFullSchema>) => import("react/jsx-runtime").JSX.Element;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { NamespaceTransProps, TransForLibs, TranslationResource } from "@trackunit/i18n-library-translation";
3
2
  import defaultTranslations from "./locales/en/translation.json";
4
3
  /** A type for all available translation keys in this library */
@@ -27,7 +26,7 @@ export type TranslationFunction = TransForLibs<TranslationKeys>;
27
26
  /**
28
27
  * Trans for this specific library.
29
28
  */
30
- export declare const Trans: (props: NamespaceTransProps<TranslationKeys>) => JSX.Element;
29
+ export declare const Trans: (props: NamespaceTransProps<TranslationKeys>) => import("react/jsx-runtime").JSX.Element;
31
30
  /**
32
31
  * Registers the translations for this library
33
32
  */
@@ -6,4 +6,4 @@ var translation = {
6
6
  "wizard.defaults.next": "Weiter"
7
7
  };
8
8
 
9
- exports["default"] = translation;
9
+ exports.default = translation;
@@ -6,4 +6,4 @@ var translation = {
6
6
  "wizard.defaults.next": "Dalej"
7
7
  };
8
8
 
9
- exports["default"] = translation;
9
+ exports.default = translation;
@@ -6,4 +6,4 @@ var translation = {
6
6
  "wizard.defaults.next": "Próximo"
7
7
  };
8
8
 
9
- exports["default"] = translation;
9
+ exports.default = translation;
@@ -6,4 +6,4 @@ var translation = {
6
6
  "wizard.defaults.next": "Далее"
7
7
  };
8
8
 
9
- exports["default"] = translation;
9
+ exports.default = translation;
@@ -6,4 +6,4 @@ var translation = {
6
6
  "wizard.defaults.next": "Înainte"
7
7
  };
8
8
 
9
- exports["default"] = translation;
9
+ exports.default = translation;
@@ -6,4 +6,4 @@ var translation = {
6
6
  "wizard.defaults.next": "Siguiente"
7
7
  };
8
8
 
9
- exports["default"] = translation;
9
+ exports.default = translation;
@@ -6,4 +6,4 @@ var translation = {
6
6
  "wizard.defaults.next": "Nästa"
7
7
  };
8
8
 
9
- exports["default"] = translation;
9
+ exports.default = translation;
@@ -6,4 +6,4 @@ var translation = {
6
6
  "wizard.defaults.next": "次へ"
7
7
  };
8
8
 
9
- exports["default"] = translation;
9
+ exports.default = translation;
@@ -6,4 +6,4 @@ var translation = {
6
6
  "wizard.defaults.next": "ถัดไป"
7
7
  };
8
8
 
9
- exports["default"] = translation;
9
+ exports.default = translation;
@@ -6,4 +6,4 @@ var translation = {
6
6
  "wizard.defaults.next": "Næste"
7
7
  };
8
8
 
9
- exports["default"] = translation;
9
+ exports.default = translation;
@@ -6,4 +6,4 @@ var translation = {
6
6
  "wizard.defaults.next": "Další"
7
7
  };
8
8
 
9
- exports["default"] = translation;
9
+ exports.default = translation;
@@ -6,4 +6,4 @@ var translation = {
6
6
  "wizard.defaults.next": "Volgende"
7
7
  };
8
8
 
9
- exports["default"] = translation;
9
+ exports.default = translation;
@@ -6,4 +6,4 @@ var translation = {
6
6
  "wizard.defaults.next": "Suivant"
7
7
  };
8
8
 
9
- exports["default"] = translation;
9
+ exports.default = translation;
@@ -6,4 +6,4 @@ var translation = {
6
6
  "wizard.defaults.next": "Seuraava"
7
7
  };
8
8
 
9
- exports["default"] = translation;
9
+ exports.default = translation;
@@ -6,4 +6,4 @@ var translation = {
6
6
  "wizard.defaults.next": "Következő"
7
7
  };
8
8
 
9
- exports["default"] = translation;
9
+ exports.default = translation;
@@ -6,4 +6,4 @@ var translation = {
6
6
  "wizard.defaults.next": "Avanti"
7
7
  };
8
8
 
9
- exports["default"] = translation;
9
+ exports.default = translation;
@@ -6,4 +6,4 @@ var translation = {
6
6
  "wizard.defaults.next": "Neste"
7
7
  };
8
8
 
9
- exports["default"] = translation;
9
+ exports.default = translation;