@trackunit/react-form-wizard 1.13.28 → 1.13.29

package/index.cjs.js

@@ -169,9 +169,9 @@ const getStateIcon = (state) => {
  * A sidebar step component used by the FormWizard component to render each step.
  * This component is generally used internally by the FormWizard component.
  */
-const FormWizardSidebarStep = ({ stepNumber, state, basePath, title, subTitle, path, "data-testid": dataTestId, onNavigate, isSubStep, }) => {
+const FormWizardSidebarStep = ({ stepNumber, state, basePath, title, subTitle, path, "data-testid": dataTestId, onClickNavigate, isSubStep, }) => {
     const stateIcon = getStateIcon(state);
-    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] })] }) }));
+    return (jsxRuntime.jsx(reactRouter.Link, { className: cvaFormWizardSidebarStep({ state, isSubStep }), "data-testid": dataTestId ?? `form-wizard-sidebar-step-${path}`, onClick: onClickNavigate, 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] })] }) }));
 };
 
 const cvaFooterContainer = cssClassVarianceUtilities.cvaMerge([
@@ -191,9 +191,9 @@ const cvaNavigationContainer = cssClassVarianceUtilities.cvaMerge(["flex", "gap-
  * The footer component for the FormWizard.
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
  */
-const FormWizardFooter = ({ disablePrimaryAction = false, loading = false, onBack, onCancel, primaryActionLabel, }) => {
+const FormWizardFooter = ({ disablePrimaryAction = false, loading = false, onClickBack, onClickCancel, primaryActionLabel, }) => {
     const [t] = useTranslation();
-    return (jsxRuntime.jsxs("div", { className: cvaFooterContainer(), children: [jsxRuntime.jsx(reactComponents.Button, { "data-testid": "wizard-cancel", onClick: onCancel, variant: "ghost-neutral", children: t("wizard.defaults.cancel") }), jsxRuntime.jsxs("div", { className: cvaNavigationContainer(), children: [onBack ? (jsxRuntime.jsx(reactComponents.Button, { "data-testid": "wizard-back", onClick: onBack, variant: "secondary", children: t("wizard.defaults.back") })) : null, jsxRuntime.jsx(reactComponents.Button, { "data-testid": "wizard-next", disabled: disablePrimaryAction, loading: loading, type: "submit", children: primaryActionLabel ? primaryActionLabel : t("wizard.defaults.next") })] })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaFooterContainer(), children: [jsxRuntime.jsx(reactComponents.Button, { "data-testid": "wizard-cancel", onClick: onClickCancel, variant: "ghost-neutral", children: t("wizard.defaults.cancel") }), jsxRuntime.jsxs("div", { className: cvaNavigationContainer(), children: [onClickBack ? (jsxRuntime.jsx(reactComponents.Button, { "data-testid": "wizard-back", onClick: onClickBack, variant: "secondary", children: t("wizard.defaults.back") })) : null, jsxRuntime.jsx(reactComponents.Button, { "data-testid": "wizard-next", disabled: disablePrimaryAction, loading: loading, type: "submit", children: primaryActionLabel ? primaryActionLabel : t("wizard.defaults.next") })] })] }));
 };
 
 const cvaFormWizardHeader = cssClassVarianceUtilities.cvaMerge([
@@ -335,11 +335,11 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
                         beforeStepSubmit: beforeStepSubmit,
                         resetFullFormState,
                     }) }) }), jsxRuntime.jsx(FormWizardFooter, { stepForms,
-                onBack: previousStepPath
+                onClickBack: previousStepPath
                     ? () => navigate({ to: basePath, params: { stepPath: previousStepPath } })
                     : null,
                 primaryActionLabel: isLastStep ? lastStepPrimaryActionLabel : undefined,
-                onCancel: handleCancel,
+                onClickCancel: handleCancel,
                 loading: isLastStep ? isSubmitting : false,
                 disablePrimaryAction: isSubmitting })] }, String(stepKey)));
 };
@@ -542,7 +542,7 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
             return (jsxRuntime.jsx(FormWizardSidebarStep, { state: stepState(),
                 stepNumber: isSubStep ? undefined : rootSteps.indexOf(key) + 1,
                 title,
-                onNavigate: () => {
+                onClickNavigate: () => {
                     if (previousStepKey) {
                         const previousStepForm = stepForms[previousStepKey];
                         setFullFormState(prev => ({

package/index.esm.js

@@ -167,9 +167,9 @@ const getStateIcon = (state) => {
  * A sidebar step component used by the FormWizard component to render each step.
  * This component is generally used internally by the FormWizard component.
  */
-const FormWizardSidebarStep = ({ stepNumber, state, basePath, title, subTitle, path, "data-testid": dataTestId, onNavigate, isSubStep, }) => {
+const FormWizardSidebarStep = ({ stepNumber, state, basePath, title, subTitle, path, "data-testid": dataTestId, onClickNavigate, isSubStep, }) => {
     const stateIcon = getStateIcon(state);
-    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] })] }) }));
+    return (jsx(Link, { className: cvaFormWizardSidebarStep({ state, isSubStep }), "data-testid": dataTestId ?? `form-wizard-sidebar-step-${path}`, onClick: onClickNavigate, 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] })] }) }));
 };
 
 const cvaFooterContainer = cvaMerge([
@@ -189,9 +189,9 @@ const cvaNavigationContainer = cvaMerge(["flex", "gap-2"]);
  * The footer component for the FormWizard.
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
  */
-const FormWizardFooter = ({ disablePrimaryAction = false, loading = false, onBack, onCancel, primaryActionLabel, }) => {
+const FormWizardFooter = ({ disablePrimaryAction = false, loading = false, onClickBack, onClickCancel, primaryActionLabel, }) => {
     const [t] = useTranslation();
-    return (jsxs("div", { className: cvaFooterContainer(), children: [jsx(Button, { "data-testid": "wizard-cancel", onClick: onCancel, variant: "ghost-neutral", children: t("wizard.defaults.cancel") }), jsxs("div", { className: cvaNavigationContainer(), children: [onBack ? (jsx(Button, { "data-testid": "wizard-back", onClick: onBack, variant: "secondary", children: t("wizard.defaults.back") })) : null, jsx(Button, { "data-testid": "wizard-next", disabled: disablePrimaryAction, loading: loading, type: "submit", children: primaryActionLabel ? primaryActionLabel : t("wizard.defaults.next") })] })] }));
+    return (jsxs("div", { className: cvaFooterContainer(), children: [jsx(Button, { "data-testid": "wizard-cancel", onClick: onClickCancel, variant: "ghost-neutral", children: t("wizard.defaults.cancel") }), jsxs("div", { className: cvaNavigationContainer(), children: [onClickBack ? (jsx(Button, { "data-testid": "wizard-back", onClick: onClickBack, variant: "secondary", children: t("wizard.defaults.back") })) : null, jsx(Button, { "data-testid": "wizard-next", disabled: disablePrimaryAction, loading: loading, type: "submit", children: primaryActionLabel ? primaryActionLabel : t("wizard.defaults.next") })] })] }));
 };
 
 const cvaFormWizardHeader = cvaMerge([
@@ -333,11 +333,11 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
                         beforeStepSubmit: beforeStepSubmit,
                         resetFullFormState,
                     }) }) }), jsx(FormWizardFooter, { stepForms,
-                onBack: previousStepPath
+                onClickBack: previousStepPath
                     ? () => navigate({ to: basePath, params: { stepPath: previousStepPath } })
                     : null,
                 primaryActionLabel: isLastStep ? lastStepPrimaryActionLabel : undefined,
-                onCancel: handleCancel,
+                onClickCancel: handleCancel,
                 loading: isLastStep ? isSubmitting : false,
                 disablePrimaryAction: isSubmitting })] }, String(stepKey)));
 };
@@ -540,7 +540,7 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
             return (jsx(FormWizardSidebarStep, { state: stepState(),
                 stepNumber: isSubStep ? undefined : rootSteps.indexOf(key) + 1,
                 title,
-                onNavigate: () => {
+                onClickNavigate: () => {
                     if (previousStepKey) {
                         const previousStepForm = stepForms[previousStepKey];
                         setFullFormState(prev => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-wizard",
-  "version": "1.13.28",
+  "version": "1.13.29",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -10,10 +10,10 @@
     "react-hook-form": "7.62.0",
     "@tanstack/react-router": "1.114.29",
     "@tanstack/router-core": "1.114.29",
-    "@trackunit/shared-utils": "1.13.43",
-    "@trackunit/css-class-variance-utilities": "1.11.43",
-    "@trackunit/react-components": "1.17.25",
-    "@trackunit/i18n-library-translation": "1.12.28"
+    "@trackunit/shared-utils": "1.13.44",
+    "@trackunit/css-class-variance-utilities": "1.11.44",
+    "@trackunit/react-components": "1.17.26",
+    "@trackunit/i18n-library-translation": "1.12.29"
   },
   "engines": {
     "node": ">=24.x",

package/src/FormWizardFooter/FormWizardFooter.d.ts

@@ -1,9 +1,9 @@
 import { CommonProps } from "@trackunit/react-components";
-import { ReactElement } from "react";
+import { ReactElement, MouseEventHandler } from "react";
 interface FormWizardFooterProps extends CommonProps {
     primaryActionLabel?: string;
-    onCancel: () => void;
-    onBack: (() => void) | null;
+    onClickCancel: MouseEventHandler<HTMLElement>;
+    onClickBack: (() => void) | null;
     disablePrimaryAction?: boolean;
     loading: boolean;
 }
@@ -11,5 +11,5 @@ interface FormWizardFooterProps extends CommonProps {
  * The footer component for the FormWizard.
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
  */
-export declare const FormWizardFooter: ({ disablePrimaryAction, loading, onBack, onCancel, primaryActionLabel, }: FormWizardFooterProps) => ReactElement;
+export declare const FormWizardFooter: ({ disablePrimaryAction, loading, onClickBack, onClickCancel, primaryActionLabel, }: FormWizardFooterProps) => ReactElement;
 export {};

package/src/FormWizardSidebarStep/FormWizardSidebarStep.d.ts

@@ -1,5 +1,6 @@
 import { RegisteredRouter, RouteIds } from "@tanstack/react-router";
 import { CommonProps } from "@trackunit/react-components";
+import { MouseEventHandler } from "react";
 import { StepState, StringWithStepKey } from "../FormWizard/useFormWizard";
 interface FormWizardSidebarStepProps extends CommonProps {
     state: StepState;
@@ -8,12 +9,12 @@ interface FormWizardSidebarStepProps extends CommonProps {
     basePath: StringWithStepKey<`${RouteIds<RegisteredRouter["routeTree"]>}`>;
     subTitle?: string;
     path: string;
-    onNavigate: () => void;
+    onClickNavigate: MouseEventHandler<HTMLElement>;
     isSubStep?: boolean;
 }
 /**
  * A sidebar step component used by the FormWizard component to render each step.
  * This component is generally used internally by the FormWizard component.
  */
-export declare const FormWizardSidebarStep: ({ stepNumber, state, basePath, title, subTitle, path, "data-testid": dataTestId, onNavigate, isSubStep, }: FormWizardSidebarStepProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormWizardSidebarStep: ({ stepNumber, state, basePath, title, subTitle, path, "data-testid": dataTestId, onClickNavigate, isSubStep, }: FormWizardSidebarStepProps) => import("react/jsx-runtime").JSX.Element;
 export {};