@trackunit/react-form-wizard 1.7.116 → 1.7.119

package/index.cjs.js

@@ -74,7 +74,7 @@ const cvaSidebar = cssClassVarianceUtilities.cvaMerge([
  * Displays the sidebar with steps for the wizard.
  * Prefer using the FormWizard component instead of this directly.
  */
-function FormWizardSidebar({ dataTestId, children, className }) {
+function FormWizardSidebar({ "data-testid": dataTestId, children, className }) {
     return (jsxRuntime.jsxs("aside", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [children, jsxRuntime.jsx("div", { className: cvaFillSection() })] }));
 }
 
@@ -169,7 +169,7 @@ 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, dataTestId, onNavigate, isSubStep, }) => {
+const FormWizardSidebarStep = ({ stepNumber, state, basePath, title, subTitle, path, "data-testid": dataTestId, onNavigate, 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] })] }) }));
 };
@@ -193,7 +193,7 @@ const cvaNavigationContainer = cssClassVarianceUtilities.cvaMerge(["flex", "gap-
  */
 const FormWizardFooter = ({ disablePrimaryAction = false, onBack, onCancel, primaryActionLabel, }) => {
     const [t] = useTranslation();
-    return (jsxRuntime.jsxs("div", { className: cvaFooterContainer(), children: [jsxRuntime.jsx(reactComponents.Button, { dataTestId: "wizard-cancel", onClick: onCancel, variant: "ghost-neutral", children: t("wizard.defaults.cancel") }), jsxRuntime.jsxs("div", { className: cvaNavigationContainer(), children: [onBack ? (jsxRuntime.jsx(reactComponents.Button, { dataTestId: "wizard-back", onClick: onBack, variant: "secondary", children: t("wizard.defaults.back") })) : null, jsxRuntime.jsx(reactComponents.Button, { dataTestId: "wizard-next", disabled: disablePrimaryAction, 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: 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, type: "submit", children: primaryActionLabel ? primaryActionLabel : t("wizard.defaults.next") })] })] }));
 };
 
 const cvaFormWizardHeader = cssClassVarianceUtilities.cvaMerge([
@@ -208,7 +208,7 @@ const cvaFormWizardHeader = cssClassVarianceUtilities.cvaMerge([
  * The header component for the FormWizard.
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
  */
-const FormWizardHeader = ({ title, description, className, dataTestId }) => {
+const FormWizardHeader = ({ title, description, className, "data-testid": dataTestId, }) => {
     return (jsxRuntime.jsxs("div", { className: cvaFormWizardHeader({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Heading, { variant: "secondary", children: title }), description ? (jsxRuntime.jsx(reactComponents.Heading, { subtle: true, variant: "subtitle", children: description })) : null] }));
 };
 
@@ -371,7 +371,7 @@ const cvaStepContainer = cssClassVarianceUtilities.cvaMerge(["h-full", "grid", "
  *
  * ** In production code, the schema should be returned from a hook, to allow the use of translations for error messages in the schema. **
  */
-const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }) => {
+const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema, onCancel, className, "data-testid": dataTestId, basePath, }) => {
     const navigate = reactRouter.useNavigate();
     const { stepPath, subStepPath } = reactRouter.useParams({ strict: false });
     const initialFullFormState = react.useMemo(() => sharedUtils.objectFromEntries(sharedUtils.objectEntries(steps)

package/index.esm.js

@@ -72,7 +72,7 @@ const cvaSidebar = cvaMerge([
  * Displays the sidebar with steps for the wizard.
  * Prefer using the FormWizard component instead of this directly.
  */
-function FormWizardSidebar({ dataTestId, children, className }) {
+function FormWizardSidebar({ "data-testid": dataTestId, children, className }) {
     return (jsxs("aside", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [children, jsx("div", { className: cvaFillSection() })] }));
 }
 
@@ -167,7 +167,7 @@ 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, dataTestId, onNavigate, isSubStep, }) => {
+const FormWizardSidebarStep = ({ stepNumber, state, basePath, title, subTitle, path, "data-testid": dataTestId, onNavigate, 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] })] }) }));
 };
@@ -191,7 +191,7 @@ const cvaNavigationContainer = cvaMerge(["flex", "gap-2"]);
  */
 const FormWizardFooter = ({ disablePrimaryAction = false, onBack, onCancel, primaryActionLabel, }) => {
     const [t] = useTranslation();
-    return (jsxs("div", { className: cvaFooterContainer(), children: [jsx(Button, { dataTestId: "wizard-cancel", onClick: onCancel, variant: "ghost-neutral", children: t("wizard.defaults.cancel") }), jsxs("div", { className: cvaNavigationContainer(), children: [onBack ? (jsx(Button, { dataTestId: "wizard-back", onClick: onBack, variant: "secondary", children: t("wizard.defaults.back") })) : null, jsx(Button, { dataTestId: "wizard-next", disabled: disablePrimaryAction, type: "submit", children: primaryActionLabel ? primaryActionLabel : t("wizard.defaults.next") })] })] }));
+    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, type: "submit", children: primaryActionLabel ? primaryActionLabel : t("wizard.defaults.next") })] })] }));
 };
 
 const cvaFormWizardHeader = cvaMerge([
@@ -206,7 +206,7 @@ const cvaFormWizardHeader = cvaMerge([
  * The header component for the FormWizard.
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
  */
-const FormWizardHeader = ({ title, description, className, dataTestId }) => {
+const FormWizardHeader = ({ title, description, className, "data-testid": dataTestId, }) => {
     return (jsxs("div", { className: cvaFormWizardHeader({ className }), "data-testid": dataTestId, children: [jsx(Heading, { variant: "secondary", children: title }), description ? (jsx(Heading, { subtle: true, variant: "subtitle", children: description })) : null] }));
 };
 
@@ -369,7 +369,7 @@ const cvaStepContainer = cvaMerge(["h-full", "grid", "bg-white", "overflow-hidde
  *
  * ** In production code, the schema should be returned from a hook, to allow the use of translations for error messages in the schema. **
  */
-const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }) => {
+const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema, onCancel, className, "data-testid": dataTestId, basePath, }) => {
     const navigate = useNavigate();
     const { stepPath, subStepPath } = useParams({ strict: false });
     const initialFullFormState = useMemo(() => objectFromEntries(objectEntries(steps)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-wizard",
-  "version": "1.7.116",
+  "version": "1.7.119",
   "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.9.75",
-    "@trackunit/css-class-variance-utilities": "1.7.75",
-    "@trackunit/react-components": "1.10.49",
-    "@trackunit/i18n-library-translation": "1.7.92"
+    "@trackunit/shared-utils": "1.9.77",
+    "@trackunit/css-class-variance-utilities": "1.7.77",
+    "@trackunit/react-components": "1.10.52",
+    "@trackunit/i18n-library-translation": "1.7.95"
   },
   "engines": {
     "node": ">=22.x",

package/src/FormWizard/FormWizard.d.ts

@@ -20,4 +20,4 @@ export type FormWizardStepFormReturnMap<TFullSchema extends AnyZodObject> = Part
  *
  * ** In production code, the schema should be returned from a hook, to allow the use of translations for error messages in the schema. **
  */
-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;
+export declare const FormWizard: <TFullSchema extends AnyZodObject, TComponentStepDefinitions extends StepDefinitions<TFullSchema>>({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema, onCancel, className, "data-testid": dataTestId, basePath, }: FromWizardComponentProps<TFullSchema, TComponentStepDefinitions>) => import("react/jsx-runtime").JSX.Element;

package/src/FormWizard/FormWizard.stories.d.ts

@@ -3,7 +3,7 @@ import { ReactElement } from "react";
 import { z } from "zod";
 declare const meta: {
     title: string;
-    component: <TFullSchema extends z.AnyZodObject, TComponentStepDefinitions extends import("./useFormWizard").StepDefinitions<TFullSchema>>({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }: import("./useFormWizard").FromWizardComponentProps<TFullSchema, TComponentStepDefinitions>) => import("react/jsx-runtime").JSX.Element;
+    component: <TFullSchema extends z.AnyZodObject, TComponentStepDefinitions extends import("./useFormWizard").StepDefinitions<TFullSchema>>({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema, onCancel, className, "data-testid": dataTestId, basePath, }: import("./useFormWizard").FromWizardComponentProps<TFullSchema, TComponentStepDefinitions>) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         docs: {

package/src/FormWizardHeader/FormWizardHeader.d.ts

@@ -7,5 +7,5 @@ interface FormWizardHeaderProps extends CommonProps {
  * The header component for the FormWizard.
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
  */
-export declare const FormWizardHeader: ({ title, description, className, dataTestId }: FormWizardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormWizardHeader: ({ title, description, className, "data-testid": dataTestId, }: FormWizardHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/FormWizardSidebar/FormWizardSidebar.d.ts

@@ -10,5 +10,5 @@ interface FormWizardSidebarProps extends CommonProps {
  * Displays the sidebar with steps for the wizard.
  * Prefer using the FormWizard component instead of this directly.
  */
-export declare function FormWizardSidebar({ dataTestId, children, className }: FormWizardSidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormWizardSidebar({ "data-testid": dataTestId, children, className }: FormWizardSidebarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/src/FormWizardSidebarStep/FormWizardSidebarStep.d.ts

@@ -15,5 +15,5 @@ interface FormWizardSidebarStepProps extends CommonProps {
  * 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, dataTestId, onNavigate, isSubStep, }: FormWizardSidebarStepProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormWizardSidebarStep: ({ stepNumber, state, basePath, title, subTitle, path, "data-testid": dataTestId, onNavigate, isSubStep, }: FormWizardSidebarStepProps) => import("react/jsx-runtime").JSX.Element;
 export {};