@trackunit/react-form-wizard 0.0.26 → 0.0.27

package/index.cjs.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
+var sharedUtils = require('@trackunit/shared-utils');
 var react = require('react');
 var reactRouterDom = require('react-router-dom');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
@@ -12,7 +13,9 @@ var zod = require('@hookform/resolvers/zod');
 var reactHookForm = require('react-hook-form');
 
 var defaultTranslations = {
-	
+	"wizard.defaults.back": "Back",
+	"wizard.defaults.cancel": "Cancel",
+	"wizard.defaults.next": "Next"
 };
 
 /** The translation namespace for this library */
@@ -46,6 +49,10 @@ const translations = {
         th: () => Promise.resolve().then(function () { return require('./translation.cjs17.js'); }),
     },
 };
+/**
+ *  Local useTranslation for this specific library
+ */
+const useTranslation = () => i18nLibraryTranslation.useNamespaceTranslation(namespace);
 /**
  * Registers the translations for this library
  */
@@ -53,43 +60,6 @@ const setupLibraryTranslations = () => {
     i18nLibraryTranslation.registerTranslations(translations);
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
 const cvaFillSection = cssClassVarianceUtilities.cvaMerge(["flex-grow", "p-0"]);
 const cvaSidebar = cssClassVarianceUtilities.cvaMerge([
     "flex",
@@ -167,6 +137,31 @@ const FormWizardSidebarStep = ({ stepNumber, state, title, subTitle, path, dataT
     return (jsxRuntime.jsx(reactRouterDom.NavLink, { className: cvaFormWizardSidebarStep({ state }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : `form-wizard-sidebar-step-${path}`, onClick: () => onBeforeNavigate(), to: path, children: jsxRuntime.jsxs("div", { className: cvaSectionHeaderContainer(), children: [jsxRuntime.jsx("div", { children: stateIcon !== null && stateIcon !== void 0 ? stateIcon : jsxRuntime.jsx("span", { className: cvaStepNumber({ state }), children: stepNumber }) }), jsxRuntime.jsxs("div", { className: cvaTitleAndDescription(), children: [jsxRuntime.jsx("h1", { className: cvaHeader(), children: title }), subTitle ? jsxRuntime.jsx("p", { className: cvaSubtitle(), children: subTitle }) : null] })] }) }));
 };
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
 const cvaFooterContainer = cssClassVarianceUtilities.cvaMerge([
     "flex-grow-0",
     "flex",
@@ -184,7 +179,8 @@ const cvaNavigationContainer = cssClassVarianceUtilities.cvaMerge(["flex", "gap-
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
  */
 const FormWizardFooter = ({ onBack, onCancel, isValid, primaryActionLabel = "Next" }) => {
-    return (jsxRuntime.jsxs("div", { className: cvaFooterContainer(), children: [jsxRuntime.jsx(reactComponents.Button, { dataTestId: "wizard-cancel", onClick: onCancel, variant: "ghost-neutral", children: "Cancel" }), jsxRuntime.jsxs("div", { className: cvaNavigationContainer(), children: [onBack ? (jsxRuntime.jsx(reactComponents.Button, { dataTestId: "wizard-back", onClick: onBack, variant: "secondary", children: "Back" })) : null, jsxRuntime.jsx(reactComponents.Button, { dataTestId: "wizard-next", disabled: !isValid, type: "submit", children: primaryActionLabel ? primaryActionLabel : "Next" })] })] }));
+    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: !isValid, type: "submit", children: primaryActionLabel ? primaryActionLabel : t("wizard.defaults.next") })] })] }));
 };
 
 const cvaFormWizardHeader = cssClassVarianceUtilities.cvaMerge([
@@ -238,7 +234,7 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
     const setSubmitHandler = react.useCallback(callback => {
         setSubmitHandlerInternal(() => callback);
     }, [setSubmitHandlerInternal]);
-    const isEmptyStep = Object.keys(form.getValues()).length === 0;
+    const isEmptyStep = sharedUtils.objectKeys(form.getValues()).length === 0;
     const emptyStepSubmitHandler = react.useCallback((e) => {
         e === null || e === void 0 ? void 0 : e.preventDefault();
         submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(fullFormState);
@@ -296,14 +292,13 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
     const [stepStates, setStepStates] = react.useState({});
     const [stepForms, setStepForms] = react.useState({});
     const [fullFormState, setFullFormState] = react.useState({});
-    const currentVisibleStepKey = (_a = Object.entries(steps).find(([, { path }]) => location.pathname === basePath + path)) === null || _a === void 0 ? void 0 : _a[0];
-    const currentVisibleStepIndex = Object.keys(steps).findIndex(key => key === currentVisibleStepKey);
-    return (jsxRuntime.jsx("div", { className: cvaFormWizardContainer({ className }), "data-testid": dataTestId, children: jsxRuntime.jsxs("div", { className: cvaFormWizardLayout(), children: [jsxRuntime.jsx(FormWizardSidebar, { children: Object.entries(steps).map(([key, { path, title, sidebarDescription }], index) => {
+    const currentVisibleStepKey = (_a = sharedUtils.objectEntries(steps).find(([, { path }]) => location.pathname === basePath + path)) === null || _a === void 0 ? void 0 : _a[0];
+    const currentVisibleStepIndex = sharedUtils.objectKeys(steps).findIndex(key => key === currentVisibleStepKey);
+    return (jsxRuntime.jsx("div", { className: cvaFormWizardContainer({ className }), "data-testid": dataTestId, children: jsxRuntime.jsxs("div", { className: cvaFormWizardLayout(), children: [jsxRuntime.jsx(FormWizardSidebar, { children: sharedUtils.objectEntries(steps).map(([key, { path, title, sidebarDescription }], index) => {
                         const isPastStep = index < currentVisibleStepIndex;
                         const isFutureStep = index > currentVisibleStepIndex;
                         const isCurrentStep = key === currentVisibleStepKey;
-                        // eslint-disable-next-line local-rules/no-typescript-assertion
-                        const previousStepKey = Object.keys(steps)[index - 1];
+                        const previousStepKey = sharedUtils.objectKeys(steps)[index - 1];
                         const stepState = () => {
                             if (isCurrentStep) {
                                 return "active";
@@ -312,7 +307,7 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                                 return stepStates[key] === "valid" ? "done" : "invalid";
                             }
                             if (isFutureStep) {
-                                return Object.keys(steps)
+                                return sharedUtils.objectKeys(steps)
                                     .filter((_, stepIndex) => stepIndex < index)
                                     .every((pastStepKey) => stepStates[pastStepKey] === "valid")
                                     ? "ready"
@@ -333,11 +328,10 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                             },
                             path: basePath + path,
                             subTitle: sidebarDescription }));
-                    }) }), jsxRuntime.jsx("div", { className: cvaStepContainer(), children: jsxRuntime.jsx(reactRouterDom.Routes, { children: Object.entries(steps).map((_a, index) => {
-                            var _b, _c, _d, _e;
-                            var [stepKey, _f] = _a, { path } = _f, rest = __rest(_f, ["path"]);
-                            return (jsxRuntime.jsx(reactRouterDom.Route, { index: false, path, key: stepKey, element: jsxRuntime.jsx(FormWizardStepWrapper, Object.assign({}, rest, { basePath,
-                                    stepKey,
+                    }) }), jsxRuntime.jsx("div", { className: cvaStepContainer(), children: jsxRuntime.jsx(reactRouterDom.Routes, { children: sharedUtils.objectEntries(steps).map(([stepKey, props], index) => {
+                            var _a, _b, _c, _d;
+                            return (jsxRuntime.jsx(reactRouterDom.Route, { index: false, path: props.path, key: stepKey.toString(), element: jsxRuntime.jsx(FormWizardStepWrapper, Object.assign({}, props, { basePath,
+                                    stepKey: stepKey.toString(),
                                     stepForms,
                                     setStepForms,
                                     onCancel,
@@ -346,8 +340,8 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                                     setStepStates,
                                     fullFormSchema,
                                     lastStepPrimaryActionLabel,
-                                    nextStepPath: (_c = (_b = Object.values(steps)[index + 1]) === null || _b === void 0 ? void 0 : _b.path) !== null && _c !== void 0 ? _c : null,
-                                    previousStepPath: (_e = (_d = Object.values(steps)[index - 1]) === null || _d === void 0 ? void 0 : _d.path) !== null && _e !== void 0 ? _e : null }), stepKey) }));
+                                    nextStepPath: (_b = (_a = sharedUtils.objectValues(steps)[index + 1]) === null || _a === void 0 ? void 0 : _a.path) !== null && _b !== void 0 ? _b : null,
+                                    previousStepPath: (_d = (_c = sharedUtils.objectValues(steps)[index - 1]) === null || _c === void 0 ? void 0 : _c.path) !== null && _d !== void 0 ? _d : null }), stepKey.toString()) }));
                         }) }) })] }) }));
 };
 
@@ -358,7 +352,7 @@ const useFormWizard = (props) => {
     return react.useMemo(() => (Object.assign(Object.assign({}, props), { 
         // Object.fromEntries is not super type safe... This is a workaround...
         // eslint-disable-next-line local-rules/no-typescript-assertion
-        steps: Object.fromEntries(Object.entries(props.steps).map(([key, step]) => [
+        steps: sharedUtils.objectFromEntries(Object.entries(props.steps).map(([key, step]) => [
             key,
             Object.assign(Object.assign({}, step), { formSchema: props.fullFormSchema.shape[key] }),
         ])) })), [props]);

package/index.esm.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { registerTranslations } from '@trackunit/i18n-library-translation';
+import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
+import { objectKeys, objectEntries, objectValues, objectFromEntries } from '@trackunit/shared-utils';
 import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { NavLink, useNavigate, useLocation, Routes, Route } from 'react-router-dom';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
@@ -8,7 +9,9 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 
 var defaultTranslations = {
-	
+	"wizard.defaults.back": "Back",
+	"wizard.defaults.cancel": "Cancel",
+	"wizard.defaults.next": "Next"
 };
 
 /** The translation namespace for this library */
@@ -42,6 +45,10 @@ const translations = {
         th: () => import('./translation.esm17.js'),
     },
 };
+/**
+ *  Local useTranslation for this specific library
+ */
+const useTranslation = () => useNamespaceTranslation(namespace);
 /**
  * Registers the translations for this library
  */
@@ -49,43 +56,6 @@ const setupLibraryTranslations = () => {
     registerTranslations(translations);
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
 const cvaFillSection = cvaMerge(["flex-grow", "p-0"]);
 const cvaSidebar = cvaMerge([
     "flex",
@@ -163,6 +133,31 @@ const FormWizardSidebarStep = ({ stepNumber, state, title, subTitle, path, dataT
     return (jsx(NavLink, { className: cvaFormWizardSidebarStep({ state }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : `form-wizard-sidebar-step-${path}`, onClick: () => onBeforeNavigate(), to: path, children: jsxs("div", { className: cvaSectionHeaderContainer(), children: [jsx("div", { children: stateIcon !== null && stateIcon !== void 0 ? stateIcon : jsx("span", { className: cvaStepNumber({ state }), children: stepNumber }) }), jsxs("div", { className: cvaTitleAndDescription(), children: [jsx("h1", { className: cvaHeader(), children: title }), subTitle ? jsx("p", { className: cvaSubtitle(), children: subTitle }) : null] })] }) }));
 };
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
 const cvaFooterContainer = cvaMerge([
     "flex-grow-0",
     "flex",
@@ -180,7 +175,8 @@ const cvaNavigationContainer = cvaMerge(["flex", "gap-responsive-space"]);
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
  */
 const FormWizardFooter = ({ onBack, onCancel, isValid, primaryActionLabel = "Next" }) => {
-    return (jsxs("div", { className: cvaFooterContainer(), children: [jsx(Button, { dataTestId: "wizard-cancel", onClick: onCancel, variant: "ghost-neutral", children: "Cancel" }), jsxs("div", { className: cvaNavigationContainer(), children: [onBack ? (jsx(Button, { dataTestId: "wizard-back", onClick: onBack, variant: "secondary", children: "Back" })) : null, jsx(Button, { dataTestId: "wizard-next", disabled: !isValid, type: "submit", children: primaryActionLabel ? primaryActionLabel : "Next" })] })] }));
+    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: !isValid, type: "submit", children: primaryActionLabel ? primaryActionLabel : t("wizard.defaults.next") })] })] }));
 };
 
 const cvaFormWizardHeader = cvaMerge([
@@ -234,7 +230,7 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
     const setSubmitHandler = useCallback(callback => {
         setSubmitHandlerInternal(() => callback);
     }, [setSubmitHandlerInternal]);
-    const isEmptyStep = Object.keys(form.getValues()).length === 0;
+    const isEmptyStep = objectKeys(form.getValues()).length === 0;
     const emptyStepSubmitHandler = useCallback((e) => {
         e === null || e === void 0 ? void 0 : e.preventDefault();
         submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(fullFormState);
@@ -292,14 +288,13 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
     const [stepStates, setStepStates] = useState({});
     const [stepForms, setStepForms] = useState({});
     const [fullFormState, setFullFormState] = useState({});
-    const currentVisibleStepKey = (_a = Object.entries(steps).find(([, { path }]) => location.pathname === basePath + path)) === null || _a === void 0 ? void 0 : _a[0];
-    const currentVisibleStepIndex = Object.keys(steps).findIndex(key => key === currentVisibleStepKey);
-    return (jsx("div", { className: cvaFormWizardContainer({ className }), "data-testid": dataTestId, children: jsxs("div", { className: cvaFormWizardLayout(), children: [jsx(FormWizardSidebar, { children: Object.entries(steps).map(([key, { path, title, sidebarDescription }], index) => {
+    const currentVisibleStepKey = (_a = objectEntries(steps).find(([, { path }]) => location.pathname === basePath + path)) === null || _a === void 0 ? void 0 : _a[0];
+    const currentVisibleStepIndex = objectKeys(steps).findIndex(key => key === currentVisibleStepKey);
+    return (jsx("div", { className: cvaFormWizardContainer({ className }), "data-testid": dataTestId, children: jsxs("div", { className: cvaFormWizardLayout(), children: [jsx(FormWizardSidebar, { children: objectEntries(steps).map(([key, { path, title, sidebarDescription }], index) => {
                         const isPastStep = index < currentVisibleStepIndex;
                         const isFutureStep = index > currentVisibleStepIndex;
                         const isCurrentStep = key === currentVisibleStepKey;
-                        // eslint-disable-next-line local-rules/no-typescript-assertion
-                        const previousStepKey = Object.keys(steps)[index - 1];
+                        const previousStepKey = objectKeys(steps)[index - 1];
                         const stepState = () => {
                             if (isCurrentStep) {
                                 return "active";
@@ -308,7 +303,7 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                                 return stepStates[key] === "valid" ? "done" : "invalid";
                             }
                             if (isFutureStep) {
-                                return Object.keys(steps)
+                                return objectKeys(steps)
                                     .filter((_, stepIndex) => stepIndex < index)
                                     .every((pastStepKey) => stepStates[pastStepKey] === "valid")
                                     ? "ready"
@@ -329,11 +324,10 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                             },
                             path: basePath + path,
                             subTitle: sidebarDescription }));
-                    }) }), jsx("div", { className: cvaStepContainer(), children: jsx(Routes, { children: Object.entries(steps).map((_a, index) => {
-                            var _b, _c, _d, _e;
-                            var [stepKey, _f] = _a, { path } = _f, rest = __rest(_f, ["path"]);
-                            return (jsx(Route, { index: false, path, key: stepKey, element: jsx(FormWizardStepWrapper, Object.assign({}, rest, { basePath,
-                                    stepKey,
+                    }) }), jsx("div", { className: cvaStepContainer(), children: jsx(Routes, { children: objectEntries(steps).map(([stepKey, props], index) => {
+                            var _a, _b, _c, _d;
+                            return (jsx(Route, { index: false, path: props.path, key: stepKey.toString(), element: jsx(FormWizardStepWrapper, Object.assign({}, props, { basePath,
+                                    stepKey: stepKey.toString(),
                                     stepForms,
                                     setStepForms,
                                     onCancel,
@@ -342,8 +336,8 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                                     setStepStates,
                                     fullFormSchema,
                                     lastStepPrimaryActionLabel,
-                                    nextStepPath: (_c = (_b = Object.values(steps)[index + 1]) === null || _b === void 0 ? void 0 : _b.path) !== null && _c !== void 0 ? _c : null,
-                                    previousStepPath: (_e = (_d = Object.values(steps)[index - 1]) === null || _d === void 0 ? void 0 : _d.path) !== null && _e !== void 0 ? _e : null }), stepKey) }));
+                                    nextStepPath: (_b = (_a = objectValues(steps)[index + 1]) === null || _a === void 0 ? void 0 : _a.path) !== null && _b !== void 0 ? _b : null,
+                                    previousStepPath: (_d = (_c = objectValues(steps)[index - 1]) === null || _c === void 0 ? void 0 : _c.path) !== null && _d !== void 0 ? _d : null }), stepKey.toString()) }));
                         }) }) })] }) }));
 };
 
@@ -354,7 +348,7 @@ const useFormWizard = (props) => {
     return useMemo(() => (Object.assign(Object.assign({}, props), { 
         // Object.fromEntries is not super type safe... This is a workaround...
         // eslint-disable-next-line local-rules/no-typescript-assertion
-        steps: Object.fromEntries(Object.entries(props.steps).map(([key, step]) => [
+        steps: objectFromEntries(Object.entries(props.steps).map(([key, step]) => [
             key,
             Object.assign(Object.assign({}, step), { formSchema: props.fullFormSchema.shape[key] }),
         ])) })), [props]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-wizard",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -11,7 +11,8 @@
     "@trackunit/react-components": "*",
     "@hookform/resolvers": "^3.3.4",
     "react-hook-form": "7.40.0",
-    "@trackunit/i18n-library-translation": "*"
+    "@trackunit/i18n-library-translation": "*",
+    "@trackunit/shared-utils": "*"
   },
   "engines": {
     "node": ">=18.x",

package/src/FormWizardHeader/FormWizardHeader.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 import { CommonProps } from "@trackunit/react-components";
+import { ReactNode } from "react";
 interface FormWizardHeaderProps extends CommonProps {
     title: string;
-    description?: string;
+    description?: string | ReactNode;
 }
 /**
  * The header component for the FormWizard.

package/src/FormWizardStepWrapper/FormWizardStepWrapper.d.ts

@@ -1,10 +1,11 @@
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, ReactNode, SetStateAction } from "react";
 import { UseFormReturn } from "react-hook-form";
 import { ZodTypeAny, z } from "zod";
 import { FormWizardStepFormReturnMap } from "../FormWizard/FormWizard";
-import { SimpleStepProps, StepComponentPropsInner, StepState } from "../FormWizard/useFormWizard";
+import { ComponentStepDefinitions, SimpleStepProps, StepComponentPropsInner } from "../FormWizard/useFormWizard";
+export type StepFormValidity = "valid" | "invalid";
 export interface FormWizardStepWrapperProps<TStepKey extends keyof z.infer<TFullSchema>, TFullSchema extends ZodTypeAny> extends SimpleStepProps {
-    description: string;
+    description: string | ReactNode;
     lastStepPrimaryActionLabel: string;
     nextStepPath: string | null;
     basePath: string;
@@ -15,8 +16,8 @@ export interface FormWizardStepWrapperProps<TStepKey extends keyof z.infer<TFull
     setFullFormState: Dispatch<SetStateAction<Partial<z.TypeOf<TFullSchema>>>>;
     stepKey: TStepKey;
     formSchema: z.infer<TFullSchema>[TStepKey];
-    setStepStates: Dispatch<SetStateAction<Partial<Record<TStepKey, StepState>>>>;
-    component: (props: StepComponentPropsInner<z.infer<TFullSchema>[TStepKey], TFullSchema>) => React.ReactNode;
+    setStepStates: Dispatch<SetStateAction<Partial<Record<keyof ComponentStepDefinitions<TFullSchema>, StepFormValidity>>>>;
+    component: (props: StepComponentPropsInner<z.infer<TFullSchema>[TStepKey], TFullSchema>) => ReactNode;
     stepForms: FormWizardStepFormReturnMap<TFullSchema>;
     setStepForms: Dispatch<SetStateAction<Partial<{
         [TStepKey2 in keyof z.TypeOf<TFullSchema>]: UseFormReturn<z.TypeOf<TFullSchema>[TStepKey2]>;

package/src/translation.d.ts

@@ -15,8 +15,8 @@ export declare const translations: TranslationResource<TranslationKeys>;
 /**
  *  Local useTranslation for this specific library
  */
-export declare const useTranslation: () => [TransForLibs<never>, import("i18next").i18n, boolean] & {
-    t: TransForLibs<never>;
+export declare const useTranslation: () => [TransForLibs<"wizard.defaults.back" | "wizard.defaults.cancel" | "wizard.defaults.next">, import("i18next").i18n, boolean] & {
+    t: TransForLibs<"wizard.defaults.back" | "wizard.defaults.cancel" | "wizard.defaults.next">;
     i18n: import("i18next").i18n;
     ready: boolean;
 };