@dnb/eufemia 10.69.0 → 10.69.1

package/extensions/forms/Wizard/Container/useCollectStepsData.js

@@ -0,0 +1,60 @@
+"use client";
+
+import { useCallback, useContext } from 'react';
+import { convertJsxToString } from '../../../../shared/component-helper';
+import WizardContext from '../Context/WizardContext';
+import { useTranslation } from '../../hooks';
+export function useCollectStepsData() {
+  const {
+    activeIndexRef,
+    hasErrorInOtherStepRef,
+    stepsRef,
+    submitCountRef,
+    writeStepsState,
+    hasInvalidStepsState
+  } = useContext(WizardContext) || {};
+  const translations = useTranslation();
+  const collectStepsData = useCallback(_ref => {
+    let {
+      id,
+      index,
+      inactive,
+      title
+    } = _ref;
+    if (!hasInvalidStepsState) {
+      return;
+    }
+    writeStepsState(index);
+    const stringifiedTitle = title !== undefined ? convertJsxToString(title) : 'Title missing';
+    let status = undefined;
+    let statusState = undefined;
+    if (index !== activeIndexRef.current && !inactive) {
+      if (hasInvalidStepsState(index, ['error'])) {
+        status = translations.Step.stepHasError;
+        statusState = 'error';
+      } else if (submitCountRef.current > 0 && hasInvalidStepsState(index, ['unknown'])) {
+        status = 'Unknown state';
+        statusState = 'warn';
+      }
+    }
+    if (status) {
+      hasErrorInOtherStepRef.current = true;
+    }
+    stepsRef.current.set(index, {
+      index,
+      id,
+      title,
+      stringifiedTitle,
+      inactive,
+      status,
+      statusState
+    });
+    return {
+      title
+    };
+  }, [activeIndexRef, hasErrorInOtherStepRef, hasInvalidStepsState, stepsRef, submitCountRef, translations.Step.stepHasError, writeStepsState]);
+  return {
+    collectStepsData
+  };
+}
+//# sourceMappingURL=useCollectStepsData.js.map

package/extensions/forms/Wizard/Container/useCollectStepsData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCollectStepsData.js","names":["useCallback","useContext","convertJsxToString","WizardContext","useTranslation","useCollectStepsData","activeIndexRef","hasErrorInOtherStepRef","stepsRef","submitCountRef","writeStepsState","hasInvalidStepsState","translations","collectStepsData","_ref","id","index","inactive","title","stringifiedTitle","undefined","status","statusState","current","Step","stepHasError","set"],"sources":["../../../../../../src/extensions/forms/Wizard/Container/useCollectStepsData.tsx"],"sourcesContent":["import { useCallback, useContext } from 'react'\nimport { convertJsxToString } from '../../../../shared/component-helper'\nimport WizardContext from '../Context/WizardContext'\nimport { useTranslation } from '../../hooks'\n\nexport function useCollectStepsData() {\n  const {\n    activeIndexRef,\n    hasErrorInOtherStepRef,\n    stepsRef,\n    submitCountRef,\n    writeStepsState,\n    hasInvalidStepsState,\n  } = useContext(WizardContext) || {}\n\n  const translations = useTranslation()\n\n  const collectStepsData = useCallback(\n    ({ id, index, inactive, title }) => {\n      if (!hasInvalidStepsState) {\n        return // stop here\n      }\n\n      writeStepsState(index)\n\n      const stringifiedTitle =\n        title !== undefined ? convertJsxToString(title) : 'Title missing'\n\n      let status = undefined\n      let statusState = undefined\n      if (index !== activeIndexRef.current && !inactive) {\n        if (hasInvalidStepsState(index, ['error'])) {\n          status = translations.Step.stepHasError\n          statusState = 'error'\n        } else if (\n          submitCountRef.current > 0 &&\n          hasInvalidStepsState(index, ['unknown'])\n        ) {\n          status = 'Unknown state'\n          statusState = 'warn'\n        }\n      }\n\n      if (status) {\n        hasErrorInOtherStepRef.current = true\n      }\n\n      stepsRef.current.set(index, {\n        index,\n        id,\n        title,\n        stringifiedTitle,\n        inactive,\n        status,\n        statusState,\n      })\n\n      return { title }\n    },\n    [\n      activeIndexRef,\n      hasErrorInOtherStepRef,\n      hasInvalidStepsState,\n      stepsRef,\n      submitCountRef,\n      translations.Step.stepHasError,\n      writeStepsState,\n    ]\n  )\n\n  return { collectStepsData }\n}\n"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,UAAU,QAAQ,OAAO;AAC/C,SAASC,kBAAkB,QAAQ,qCAAqC;AACxE,OAAOC,aAAa,MAAM,0BAA0B;AACpD,SAASC,cAAc,QAAQ,aAAa;AAE5C,OAAO,SAASC,mBAAmBA,CAAA,EAAG;EACpC,MAAM;IACJC,cAAc;IACdC,sBAAsB;IACtBC,QAAQ;IACRC,cAAc;IACdC,eAAe;IACfC;EACF,CAAC,GAAGV,UAAU,CAACE,aAAa,CAAC,IAAI,CAAC,CAAC;EAEnC,MAAMS,YAAY,GAAGR,cAAc,CAAC,CAAC;EAErC,MAAMS,gBAAgB,GAAGb,WAAW,CAClCc,IAAA,IAAoC;IAAA,IAAnC;MAAEC,EAAE;MAAEC,KAAK;MAAEC,QAAQ;MAAEC;IAAM,CAAC,GAAAJ,IAAA;IAC7B,IAAI,CAACH,oBAAoB,EAAE;MACzB;IACF;IAEAD,eAAe,CAACM,KAAK,CAAC;IAEtB,MAAMG,gBAAgB,GACpBD,KAAK,KAAKE,SAAS,GAAGlB,kBAAkB,CAACgB,KAAK,CAAC,GAAG,eAAe;IAEnE,IAAIG,MAAM,GAAGD,SAAS;IACtB,IAAIE,WAAW,GAAGF,SAAS;IAC3B,IAAIJ,KAAK,KAAKV,cAAc,CAACiB,OAAO,IAAI,CAACN,QAAQ,EAAE;MACjD,IAAIN,oBAAoB,CAACK,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE;QAC1CK,MAAM,GAAGT,YAAY,CAACY,IAAI,CAACC,YAAY;QACvCH,WAAW,GAAG,OAAO;MACvB,CAAC,MAAM,IACLb,cAAc,CAACc,OAAO,GAAG,CAAC,IAC1BZ,oBAAoB,CAACK,KAAK,EAAE,CAAC,SAAS,CAAC,CAAC,EACxC;QACAK,MAAM,GAAG,eAAe;QACxBC,WAAW,GAAG,MAAM;MACtB;IACF;IAEA,IAAID,MAAM,EAAE;MACVd,sBAAsB,CAACgB,OAAO,GAAG,IAAI;IACvC;IAEAf,QAAQ,CAACe,OAAO,CAACG,GAAG,CAACV,KAAK,EAAE;MAC1BA,KAAK;MACLD,EAAE;MACFG,KAAK;MACLC,gBAAgB;MAChBF,QAAQ;MACRI,MAAM;MACNC;IACF,CAAC,CAAC;IAEF,OAAO;MAAEJ;IAAM,CAAC;EAClB,CAAC,EACD,CACEZ,cAAc,EACdC,sBAAsB,EACtBI,oBAAoB,EACpBH,QAAQ,EACRC,cAAc,EACdG,YAAY,CAACY,IAAI,CAACC,YAAY,EAC9Bf,eAAe,CAEnB,CAAC;EAED,OAAO;IAAEG;EAAiB,CAAC;AAC7B","ignoreList":[]}

package/extensions/forms/Wizard/Context/WizardContext.d.ts

@@ -1,7 +1,13 @@
 import React from 'react';
 import { Path } from '../../types';
 import { VisibleWhen } from '../../Form/Visibility';
-import { InternalStepStatus, InternalStepStatuses, SetActiveIndexOptions, StepIndex, Steps } from './types';
+import { InternalStepStatus, SetActiveIndexOptions, StepIndex, Steps } from './types';
+export type HandleStatusArgs = {
+    id: string;
+    index: StepIndex;
+    inactive: boolean;
+    titleProp: React.ReactNode;
+};
 export interface WizardContextState {
     id?: string;
     totalSteps?: number;
@@ -11,8 +17,9 @@ export interface WizardContextState {
     stepsRef?: React.MutableRefObject<Steps>;
     updateTitlesRef?: React.MutableRefObject<() => void>;
     activeIndexRef?: React.MutableRefObject<StepIndex>;
+    stepIndexRef?: React.MutableRefObject<StepIndex>;
     totalStepsRef?: React.MutableRefObject<number>;
-    stepStatusRef?: React.MutableRefObject<InternalStepStatuses>;
+    submitCountRef?: React.MutableRefObject<number>;
     prerenderFieldPropsRef?: React.MutableRefObject<Record<string, () => React.ReactElement>>;
     hasErrorInOtherStepRef?: React.MutableRefObject<boolean>;
     prerenderFieldProps?: boolean;
@@ -21,11 +28,17 @@ export interface WizardContextState {
     handleNext?: () => void;
     setActiveIndex?: (index: StepIndex, { skipStepChangeCall, skipStepChangeCallBeforeMounted, skipStepChangeCallFromHook, }?: SetActiveIndexOptions) => void;
     setFormError?: (error: Error) => void;
-    revealError?: (index: StepIndex, path: Path, hasError: boolean) => void;
-    hasInvalidStepsState?: (forStates?: Array<InternalStepStatus>) => boolean;
+    setFieldError?: (index: StepIndex, path: Path, hasError: boolean) => void;
+    writeStepsState?: (index?: StepIndex, forStates?: Array<InternalStepStatus>) => void;
+    hasInvalidStepsState?: (index?: StepIndex, forStates?: Array<InternalStepStatus>) => boolean;
     check?: ({ visibleWhen }: {
         visibleWhen: VisibleWhen;
     }) => boolean;
+    collectStepsData?: (args: HandleStatusArgs) => {
+        title: string;
+    };
+    enableMapOverChildren?: () => void;
+    mapOverChildrenRef?: React.MutableRefObject<boolean>;
 }
 declare const WizardContext: React.Context<WizardContextState>;
 export default WizardContext;

package/extensions/forms/Wizard/Context/WizardContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardContext.js","names":["React","WizardContext","createContext","undefined"],"sources":["../../../../../../src/extensions/forms/Wizard/Context/WizardContext.ts"],"sourcesContent":["import React from 'react'\nimport { Path } from '../../types'\nimport { VisibleWhen } from '../../Form/Visibility'\nimport {\n  InternalStepStatus,\n  InternalStepStatuses,\n  SetActiveIndexOptions,\n  StepIndex,\n  Steps,\n} from './types'\n\nexport interface WizardContextState {\n  id?: string\n  totalSteps?: number\n  activeIndex?: StepIndex\n  initialActiveIndex?: StepIndex\n  stepElementRef?: React.MutableRefObject<HTMLElement>\n  stepsRef?: React.MutableRefObject<Steps>\n  updateTitlesRef?: React.MutableRefObject<() => void>\n  activeIndexRef?: React.MutableRefObject<StepIndex>\n  totalStepsRef?: React.MutableRefObject<number>\n  stepStatusRef?: React.MutableRefObject<InternalStepStatuses>\n  prerenderFieldPropsRef?: React.MutableRefObject<\n    Record<string, () => React.ReactElement>\n  >\n  hasErrorInOtherStepRef?: React.MutableRefObject<boolean>\n  prerenderFieldProps?: boolean\n  keepInDOM?: boolean\n  handlePrevious?: () => void\n  handleNext?: () => void\n  setActiveIndex?: (\n    index: StepIndex,\n    {\n      skipStepChangeCall,\n      skipStepChangeCallBeforeMounted,\n      skipStepChangeCallFromHook,\n    }?: SetActiveIndexOptions\n  ) => void\n  setFormError?: (error: Error) => void\n  revealError?: (index: StepIndex, path: Path, hasError: boolean) => void\n  hasInvalidStepsState?: (forStates?: Array<InternalStepStatus>) => boolean\n  check?: ({ visibleWhen }: { visibleWhen: VisibleWhen }) => boolean\n}\n\nconst WizardContext = React.createContext<WizardContextState | undefined>(\n  undefined\n)\n\nexport default WizardContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AA4CzB,MAAMC,aAAa,GAAGD,KAAK,CAACE,aAAa,CACvCC,SACF,CAAC;AAED,eAAeF,aAAa","ignoreList":[]}
+{"version":3,"file":"WizardContext.js","names":["React","WizardContext","createContext","undefined"],"sources":["../../../../../../src/extensions/forms/Wizard/Context/WizardContext.ts"],"sourcesContent":["import React from 'react'\nimport { Path } from '../../types'\nimport { VisibleWhen } from '../../Form/Visibility'\nimport {\n  InternalStepStatus,\n  SetActiveIndexOptions,\n  StepIndex,\n  Steps,\n} from './types'\n\nexport type HandleStatusArgs = {\n  id: string\n  index: StepIndex\n  inactive: boolean\n  titleProp: React.ReactNode\n}\n\nexport interface WizardContextState {\n  id?: string\n  totalSteps?: number\n  activeIndex?: StepIndex\n  initialActiveIndex?: StepIndex\n  stepElementRef?: React.MutableRefObject<HTMLElement>\n  stepsRef?: React.MutableRefObject<Steps>\n  updateTitlesRef?: React.MutableRefObject<() => void>\n  activeIndexRef?: React.MutableRefObject<StepIndex>\n  stepIndexRef?: React.MutableRefObject<StepIndex>\n  totalStepsRef?: React.MutableRefObject<number>\n  submitCountRef?: React.MutableRefObject<number>\n  prerenderFieldPropsRef?: React.MutableRefObject<\n    Record<string, () => React.ReactElement>\n  >\n  hasErrorInOtherStepRef?: React.MutableRefObject<boolean>\n  prerenderFieldProps?: boolean\n  keepInDOM?: boolean\n  handlePrevious?: () => void\n  handleNext?: () => void\n  setActiveIndex?: (\n    index: StepIndex,\n    {\n      skipStepChangeCall,\n      skipStepChangeCallBeforeMounted,\n      skipStepChangeCallFromHook,\n    }?: SetActiveIndexOptions\n  ) => void\n  setFormError?: (error: Error) => void\n  setFieldError?: (index: StepIndex, path: Path, hasError: boolean) => void\n  writeStepsState?: (\n    index?: StepIndex,\n    forStates?: Array<InternalStepStatus>\n  ) => void\n  hasInvalidStepsState?: (\n    index?: StepIndex,\n    forStates?: Array<InternalStepStatus>\n  ) => boolean\n  check?: ({ visibleWhen }: { visibleWhen: VisibleWhen }) => boolean\n  collectStepsData?: (args: HandleStatusArgs) => { title: string }\n  enableMapOverChildren?: () => void\n  mapOverChildrenRef?: React.MutableRefObject<boolean>\n}\n\nconst WizardContext = React.createContext<WizardContextState | undefined>(\n  undefined\n)\n\nexport default WizardContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AA6DzB,MAAMC,aAAa,GAAGD,KAAK,CAACE,aAAa,CACvCC,SACF,CAAC;AAED,eAAeF,aAAa","ignoreList":[]}

package/extensions/forms/Wizard/Context/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { StepIndicatorStatusState } from '../../../../components/step-indicator/StepIndicatorItem';
 import { EventReturnWithStateObject, Path } from '../../types';
 export type OnStepsChangeMode = 'previous' | 'next' | 'stepListModified';
@@ -11,9 +12,11 @@ export type OnStepChangeOptions = {
 };
 export type OnStepChange = (index: StepIndex, mode: OnStepsChangeMode, options: OnStepChangeOptions) => EventReturnWithStateObject | void | Promise<EventReturnWithStateObject | void>;
 export type StepIndex = number;
-export type Steps = Record<string, {
-    title: string;
+export type Steps = Map<StepIndex, {
+    index: StepIndex;
     id: string;
+    title: React.ReactNode;
+    stringifiedTitle: string;
     inactive?: boolean;
     /** Used internally to set the status */
     status?: string;
@@ -26,10 +29,10 @@ export type SetActiveIndexOptions = {
     skipStepChangeCallFromHook?: boolean;
     skipErrorCheck?: boolean;
 };
-export type InternalStepStatus = 'error' | 'valid' | 'unknown' | undefined;
-export type InternalStepStatuses = Record<StepIndex, InternalStepStatus>;
-export type InternalVisitedSteps = Record<StepIndex, boolean>;
-export type InternalFieldError = Record<Path, {
+export type InternalStepStatus = 'error' | 'unknown' | undefined;
+export type InternalStepStatuses = Map<StepIndex, InternalStepStatus>;
+export type InternalVisitedSteps = Map<StepIndex, boolean>;
+export type InternalFieldError = Map<Path, {
     index: StepIndex;
     hasError: boolean;
 }>;

package/extensions/forms/Wizard/Context/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../../../src/extensions/forms/Wizard/Context/types.ts"],"sourcesContent":["import { StepIndicatorStatusState } from '../../../../components/step-indicator/StepIndicatorItem'\nimport { EventReturnWithStateObject, Path } from '../../types'\n\nexport type OnStepsChangeMode = 'previous' | 'next' | 'stepListModified'\nexport type OnStepChangeOptions = {\n  preventNavigation: (shouldPrevent?: boolean) => void\n  id?: string\n  previousStep: {\n    index: StepIndex\n    id?: string\n  }\n}\nexport type OnStepChange = (\n  index: StepIndex,\n  mode: OnStepsChangeMode,\n  options: OnStepChangeOptions\n) =>\n  | EventReturnWithStateObject\n  | void\n  | Promise<EventReturnWithStateObject | void>\n\nexport type StepIndex = number\nexport type Steps = Record<\n  string,\n  {\n    title: string\n    id: string\n    inactive?: boolean\n\n    /** Used internally to set the status */\n    status?: string\n\n    /** Used internally to set the statusState */\n    statusState?: StepIndicatorStatusState\n  }\n>\nexport type SetActiveIndexOptions = {\n  skipStepChangeCall?: boolean\n  skipStepChangeCallBeforeMounted?: boolean\n  skipStepChangeCallFromHook?: boolean\n  skipErrorCheck?: boolean\n}\n\nexport type InternalStepStatus = 'error' | 'valid' | 'unknown' | undefined\nexport type InternalStepStatuses = Record<StepIndex, InternalStepStatus>\nexport type InternalVisitedSteps = Record<StepIndex, boolean>\nexport type InternalFieldError = Record<\n  Path,\n  {\n    index: StepIndex\n    hasError: boolean\n  }\n>\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../../src/extensions/forms/Wizard/Context/types.ts"],"sourcesContent":["import { StepIndicatorStatusState } from '../../../../components/step-indicator/StepIndicatorItem'\nimport { EventReturnWithStateObject, Path } from '../../types'\n\nexport type OnStepsChangeMode = 'previous' | 'next' | 'stepListModified'\nexport type OnStepChangeOptions = {\n  preventNavigation: (shouldPrevent?: boolean) => void\n  id?: string\n  previousStep: {\n    index: StepIndex\n    id?: string\n  }\n}\nexport type OnStepChange = (\n  index: StepIndex,\n  mode: OnStepsChangeMode,\n  options: OnStepChangeOptions\n) =>\n  | EventReturnWithStateObject\n  | void\n  | Promise<EventReturnWithStateObject | void>\n\nexport type StepIndex = number\nexport type Steps = Map<\n  StepIndex,\n  {\n    index: StepIndex\n    id: string\n    title: React.ReactNode\n    stringifiedTitle: string\n    inactive?: boolean\n\n    /** Used internally to set the status */\n    status?: string\n\n    /** Used internally to set the statusState */\n    statusState?: StepIndicatorStatusState\n  }\n>\nexport type SetActiveIndexOptions = {\n  skipStepChangeCall?: boolean\n  skipStepChangeCallBeforeMounted?: boolean\n  skipStepChangeCallFromHook?: boolean\n  skipErrorCheck?: boolean\n}\n\nexport type InternalStepStatus = 'error' | 'unknown' | undefined\nexport type InternalStepStatuses = Map<StepIndex, InternalStepStatus>\nexport type InternalVisitedSteps = Map<StepIndex, boolean>\nexport type InternalFieldError = Map<\n  Path,\n  {\n    index: StepIndex\n    hasError: boolean\n  }\n>\n"],"mappings":"","ignoreList":[]}

package/extensions/forms/Wizard/Step/Step.d.ts

@@ -4,7 +4,7 @@ import { Props as FlexContainerProps } from '../../../../components/flex/Contain
 import type { VisibleWhen } from '../../Form/Visibility';
 export type Props = ComponentProps & FlexContainerProps & {
     /**
-     * A title that will be displayed in the indicator.
+     * An unique title of the step.
      */
     title?: React.ReactNode;
     /**

package/extensions/forms/Wizard/Step/Step.js

@@ -3,19 +3,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _Fragment;
+var _Fragment, _Fragment2, _Fragment3;
 const _excluded = ["active", "activeWhen", "include", "includeWhen"],
-  _excluded2 = ["className", "title", "inactive", "index", "include", "includeWhen", "required", "keepInDOM", "prerenderFieldProps", "children"];
+  _excluded2 = ["id", "className", "title", "index", "inactive", "include", "includeWhen", "required", "keepInDOM", "prerenderFieldProps", "children"];
+import "core-js/modules/web.dom-collections.iterator.js";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useContext, useMemo, useRef } from 'react';
+import React, { useContext, useMemo } from 'react';
 import classnames from 'classnames';
 import WizardContext from '../Context/WizardContext';
 import WizardStepContext from './StepContext';
 import Flex from '../../../../components/flex/Flex';
 import { convertJsxToString, warn } from '../../../../shared/component-helper';
 import FieldProvider from '../../Field/Provider';
-const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 export function handleDeprecatedProps(_ref) {
   let {
       active,
@@ -32,10 +32,11 @@ export function handleDeprecatedProps(_ref) {
 function Step(props) {
   const _handleDeprecatedProp = handleDeprecatedProps(props),
     {
+      id,
       className,
       title,
+      index: indexProp,
       inactive,
-      index,
       include = true,
       includeWhen,
       required,
@@ -46,33 +47,76 @@ function Step(props) {
     restProps = _objectWithoutProperties(_handleDeprecatedProp, _excluded2);
   const {
     check,
+    enableMapOverChildren,
     activeIndex,
     initialActiveIndex,
-    stepsRef,
+    totalStepsRef,
     stepElementRef,
+    stepIndexRef,
+    stepsRef,
     keepInDOM
   } = useContext(WizardContext) || {};
-  const ariaLabel = useMemo(() => {
-    var _ref2, _stepsRef$current, _stepsRef$current$ind, _stepsRef$current2;
-    return (_ref2 = !prerenderFieldProps && ((stepsRef === null || stepsRef === void 0 ? void 0 : (_stepsRef$current = stepsRef.current) === null || _stepsRef$current === void 0 ? void 0 : (_stepsRef$current$ind = _stepsRef$current[index]) === null || _stepsRef$current$ind === void 0 ? void 0 : _stepsRef$current$ind.title) || (stepsRef === null || stepsRef === void 0 ? void 0 : (_stepsRef$current2 = stepsRef.current) === null || _stepsRef$current2 === void 0 ? void 0 : _stepsRef$current2[index]))) !== null && _ref2 !== void 0 ? _ref2 : convertJsxToString(title);
-  }, [index, prerenderFieldProps, title, stepsRef]);
-  const currentElementRef = useRef();
-  useLayoutEffect(() => {
-    if (!prerenderFieldProps && typeof stepElementRef !== 'undefined') {
-      if (currentElementRef.current) {
-        stepElementRef.current = currentElementRef.current;
+  const wizardStepContext = useContext(WizardStepContext) || {};
+  const indexFromContext = wizardStepContext.index;
+  const totalSteps = totalStepsRef === null || totalStepsRef === void 0 ? void 0 : totalStepsRef.current;
+  const ariaLabel = useMemo(() => convertJsxToString(title), [title]);
+  const index = useMemo(() => {
+    if (indexProp !== undefined) {
+      return indexProp;
+    }
+    if (indexFromContext !== undefined) {
+      return indexFromContext;
+    }
+    if (stepsRef !== null && stepsRef !== void 0 && stepsRef.current) {
+      const {
+        index
+      } = Array.from(stepsRef.current.values()).find(_ref2 => {
+        var _originalTitleProp$pr;
+        let {
+          id: currentId,
+          title: originalTitleProp,
+          stringifiedTitle
+        } = _ref2;
+        if (id !== undefined) {
+          return id === currentId;
+        }
+        const translationId = originalTitleProp === null || originalTitleProp === void 0 ? void 0 : (_originalTitleProp$pr = originalTitleProp['props']) === null || _originalTitleProp$pr === void 0 ? void 0 : _originalTitleProp$pr.id;
+        if (translationId) {
+          var _title$props;
+          return translationId === (title === null || title === void 0 ? void 0 : (_title$props = title['props']) === null || _title$props === void 0 ? void 0 : _title$props.id);
+        }
+        if (stringifiedTitle) {
+          return stringifiedTitle === ariaLabel;
+        }
+        return originalTitleProp === title;
+      }) || {};
+      if (index !== undefined) {
+        return index;
       }
-      return () => {
-        stepElementRef.current = null;
-      };
     }
-  }, [prerenderFieldProps, stepElementRef]);
+    if (totalSteps && stepIndexRef) {
+      stepIndexRef.current += 1;
+    }
+    return stepIndexRef === null || stepIndexRef === void 0 ? void 0 : stepIndexRef.current;
+  }, [indexProp, stepsRef, totalSteps, stepIndexRef, indexFromContext, title, id, ariaLabel]);
+  if (index >= totalSteps) {
+    enableMapOverChildren();
+  }
   if (prerenderFieldProps) {
     return children;
   }
+  if (include === false) {
+    return _Fragment || (_Fragment = React.createElement(React.Fragment, null));
+  }
+  if (includeWhen && !check({
+    visibleWhen: includeWhen
+  })) {
+    return _Fragment2 || (_Fragment2 = React.createElement(React.Fragment, null));
+  }
   const fieldProps = typeof required === 'boolean' ? {
     required
   } : undefined;
+  const innerRef = !prerenderFieldProps && activeIndex === index ? stepElementRef : null;
   const content = React.createElement(WizardStepContext.Provider, {
     value: {
       index
@@ -81,10 +125,10 @@ function Step(props) {
     className: classnames('dnb-forms-step', className),
     element: "section",
     "aria-label": ariaLabel,
-    innerRef: currentElementRef,
+    innerRef: innerRef,
     tabIndex: -1
   }, restProps), fieldProps ? React.createElement(FieldProvider, fieldProps, children) : children));
-  if (activeIndex !== index || include === false || includeWhen && !check({
+  if (activeIndex !== index || includeWhen && !check({
     visibleWhen: includeWhen
   })) {
     if (keepInDOMProp !== null && keepInDOMProp !== void 0 ? keepInDOMProp : keepInDOM) {
@@ -97,7 +141,7 @@ function Step(props) {
         warn(`initialActiveIndex={${initialActiveIndex}} is used. Fields of previews steps may not validate. You can use "keepInDOM" to always run validation.`);
       }
     }
-    return _Fragment || (_Fragment = React.createElement(React.Fragment, null));
+    return _Fragment3 || (_Fragment3 = React.createElement(React.Fragment, null));
   }
   return React.createElement(React.Fragment, null, content);
 }

package/extensions/forms/Wizard/Step/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","names":["React","useContext","useMemo","useRef","classnames","WizardContext","WizardStepContext","Flex","convertJsxToString","warn","FieldProvider","useLayoutEffect","window","useEffect","handleDeprecatedProps","_ref","active","activeWhen","include","includeWhen","rest","_objectWithoutProperties","_excluded","_objectSpread","Step","props","_handleDeprecatedProp","className","title","inactive","index","required","keepInDOM","keepInDOMProp","prerenderFieldProps","children","restProps","_excluded2","check","activeIndex","initialActiveIndex","stepsRef","stepElementRef","ariaLabel","_ref2","_stepsRef$current","_stepsRef$current$ind","_stepsRef$current2","current","currentElementRef","fieldProps","undefined","content","createElement","Provider","value","Stack","_extends","element","innerRef","tabIndex","visibleWhen","hidden","_Fragment","Fragment","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Wizard/Step/Step.tsx"],"sourcesContent":["import React, { useContext, useMemo, useRef } from 'react'\nimport classnames from 'classnames'\nimport { ComponentProps } from '../../types'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\nimport WizardContext from '../Context/WizardContext'\nimport WizardStepContext from './StepContext'\nimport Flex from '../../../../components/flex/Flex'\nimport {\n  convertJsxToString,\n  warn,\n} from '../../../../shared/component-helper'\nimport FieldProvider from '../../Field/Provider'\nimport type { VisibleWhen } from '../../Form/Visibility'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type Props = ComponentProps &\n  FlexContainerProps & {\n    /**\n     * A title that will be displayed in the indicator.\n     */\n    title?: React.ReactNode\n    /**\n     * Will treat the step as non-navigable if set to `true`.\n     */\n    inactive?: boolean\n\n    /**\n     * To determine if the step should be rendered.\n     * Used internally by the WizardContainer.\n     */\n    index?: number\n\n    /**\n     * Will make all the fields inside the step to be required.\n     */\n    required?: boolean\n\n    /**\n     * If set to `false`, the step will not be rendered.\n     * @deprecated use `include` instead\n     */\n    active?: boolean\n\n    /**\n     * Provide a `path` and a `hasValue` property with the expected value in order to enable the step. You can alternatively provide a `hasValue` function that returns a boolean. The first parameter is the value of the path.\n     * @deprecated use `includeWhen` instead\n     */\n    activeWhen?: VisibleWhen\n\n    /**\n     * If set to `false`, the step will not be rendered.\n     */\n\n    include?: boolean\n    /**\n     * Provide a `path` and a `hasValue` property with the expected value in order to enable the step. You can alternatively provide a `hasValue` function that returns a boolean. The first parameter is the value of the path.\n     */\n    includeWhen?: VisibleWhen\n\n    /**\n     * Determines if the step should be kept in the DOM. Defaults to `false`.\n     */\n    keepInDOM?: boolean\n\n    /**\n     * If set to `true`, the step will always be rendered.\n     * For internal use only.\n     */\n    prerenderFieldProps?: boolean\n  }\n\nexport function handleDeprecatedProps({\n  active,\n  activeWhen,\n  include,\n  includeWhen,\n  ...rest\n}: Props): Omit<Props, 'active' | 'activeWhen'> {\n  return {\n    include: include ?? active,\n    includeWhen: includeWhen ?? activeWhen,\n    ...rest,\n  }\n}\nfunction Step(props: Props): JSX.Element {\n  const {\n    className,\n    title,\n    inactive, // eslint-disable-line\n    index,\n    include = true,\n    includeWhen,\n    required,\n    keepInDOM: keepInDOMProp,\n    prerenderFieldProps,\n    children,\n    ...restProps\n  } = handleDeprecatedProps(props)\n  const {\n    check,\n    activeIndex,\n    initialActiveIndex,\n    stepsRef,\n    stepElementRef,\n    keepInDOM,\n  } = useContext(WizardContext) || {}\n\n  const ariaLabel = useMemo(() => {\n    return (\n      (!prerenderFieldProps &&\n        (stepsRef?.current?.[index]?.title ||\n          stepsRef?.current?.[index])) ??\n      convertJsxToString(title)\n    )\n  }, [index, prerenderFieldProps, title, stepsRef])\n\n  const currentElementRef = useRef<HTMLElement>()\n  useLayoutEffect(() => {\n    if (!prerenderFieldProps && typeof stepElementRef !== 'undefined') {\n      if (currentElementRef.current) {\n        stepElementRef.current = currentElementRef.current\n      }\n      return () => {\n        stepElementRef.current = null\n      }\n    }\n  }, [prerenderFieldProps, stepElementRef])\n\n  if (prerenderFieldProps) {\n    return children as JSX.Element\n  }\n\n  const fieldProps =\n    typeof required === 'boolean' ? { required } : undefined\n\n  const content = (\n    <WizardStepContext.Provider value={{ index }}>\n      <Flex.Stack\n        className={classnames('dnb-forms-step', className)}\n        element=\"section\"\n        aria-label={ariaLabel}\n        innerRef={currentElementRef}\n        tabIndex={-1}\n        {...restProps}\n      >\n        {fieldProps ? (\n          <FieldProvider {...fieldProps}>{children}</FieldProvider>\n        ) : (\n          children\n        )}\n      </Flex.Stack>\n    </WizardStepContext.Provider>\n  )\n\n  if (\n    activeIndex !== index ||\n    include === false ||\n    (includeWhen && !check({ visibleWhen: includeWhen }))\n  ) {\n    if (keepInDOMProp ?? keepInDOM) {\n      return (\n        <div title=\"Wizard Step\" hidden>\n          {content}\n        </div>\n      )\n    } else {\n      if (initialActiveIndex > 0) {\n        warn(\n          `initialActiveIndex={${initialActiveIndex}} is used. Fields of previews steps may not validate. You can use \"keepInDOM\" to always run validation.`\n        )\n      }\n    }\n\n    // Another step is active\n    return <></>\n  }\n\n  return <>{content}</>\n}\n\nStep._supportsSpacingProps = true\nexport default Step\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAC1D,OAAOC,UAAU,MAAM,YAAY;AAGnC,OAAOC,aAAa,MAAM,0BAA0B;AACpD,OAAOC,iBAAiB,MAAM,eAAe;AAC7C,OAAOC,IAAI,MAAM,kCAAkC;AACnD,SACEC,kBAAkB,EAClBC,IAAI,QACC,qCAAqC;AAC5C,OAAOC,aAAa,MAAM,sBAAsB;AAIhD,MAAMC,eAAe,GACnB,OAAOC,MAAM,KAAK,WAAW,GAAGZ,KAAK,CAACa,SAAS,GAAGb,KAAK,CAACW,eAAe;AA0DzE,OAAO,SAASG,qBAAqBA,CAAAC,IAAA,EAMW;EAAA,IANV;MACpCC,MAAM;MACNC,UAAU;MACVC,OAAO;MACPC;IAEK,CAAC,GAAAJ,IAAA;IADHK,IAAI,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA;EAEP,OAAAC,aAAA;IACEL,OAAO,EAAEA,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIF,MAAM;IAC1BG,WAAW,EAAEA,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAIF;EAAU,GACnCG,IAAI;AAEX;AACA,SAASI,IAAIA,CAACC,KAAY,EAAe;EACvC,MAAAC,qBAAA,GAYIZ,qBAAqB,CAACW,KAAK,CAAC;IAZ1B;MACJE,SAAS;MACTC,KAAK;MACLC,QAAQ;MACRC,KAAK;MACLZ,OAAO,GAAG,IAAI;MACdC,WAAW;MACXY,QAAQ;MACRC,SAAS,EAAEC,aAAa;MACxBC,mBAAmB;MACnBC;IAEF,CAAC,GAAAT,qBAAA;IADIU,SAAS,GAAAf,wBAAA,CAAAK,qBAAA,EAAAW,UAAA;EAEd,MAAM;IACJC,KAAK;IACLC,WAAW;IACXC,kBAAkB;IAClBC,QAAQ;IACRC,cAAc;IACdV;EACF,CAAC,GAAG/B,UAAU,CAACI,aAAa,CAAC,IAAI,CAAC,CAAC;EAEnC,MAAMsC,SAAS,GAAGzC,OAAO,CAAC,MAAM;IAAA,IAAA0C,KAAA,EAAAC,iBAAA,EAAAC,qBAAA,EAAAC,kBAAA;IAC9B,QAAAH,KAAA,GACG,CAACV,mBAAmB,KAClB,CAAAO,QAAQ,aAARA,QAAQ,wBAAAI,iBAAA,GAARJ,QAAQ,CAAEO,OAAO,cAAAH,iBAAA,wBAAAC,qBAAA,GAAjBD,iBAAA,CAAoBf,KAAK,CAAC,cAAAgB,qBAAA,uBAA1BA,qBAAA,CAA4BlB,KAAK,MAChCa,QAAQ,aAARA,QAAQ,wBAAAM,kBAAA,GAARN,QAAQ,CAAEO,OAAO,cAAAD,kBAAA,uBAAjBA,kBAAA,CAAoBjB,KAAK,CAAC,EAAC,cAAAc,KAAA,cAAAA,KAAA,GAC/BpC,kBAAkB,CAACoB,KAAK,CAAC;EAE7B,CAAC,EAAE,CAACE,KAAK,EAAEI,mBAAmB,EAAEN,KAAK,EAAEa,QAAQ,CAAC,CAAC;EAEjD,MAAMQ,iBAAiB,GAAG9C,MAAM,CAAc,CAAC;EAC/CQ,eAAe,CAAC,MAAM;IACpB,IAAI,CAACuB,mBAAmB,IAAI,OAAOQ,cAAc,KAAK,WAAW,EAAE;MACjE,IAAIO,iBAAiB,CAACD,OAAO,EAAE;QAC7BN,cAAc,CAACM,OAAO,GAAGC,iBAAiB,CAACD,OAAO;MACpD;MACA,OAAO,MAAM;QACXN,cAAc,CAACM,OAAO,GAAG,IAAI;MAC/B,CAAC;IACH;EACF,CAAC,EAAE,CAACd,mBAAmB,EAAEQ,cAAc,CAAC,CAAC;EAEzC,IAAIR,mBAAmB,EAAE;IACvB,OAAOC,QAAQ;EACjB;EAEA,MAAMe,UAAU,GACd,OAAOnB,QAAQ,KAAK,SAAS,GAAG;IAAEA;EAAS,CAAC,GAAGoB,SAAS;EAE1D,MAAMC,OAAO,GACXpD,KAAA,CAAAqD,aAAA,CAAC/C,iBAAiB,CAACgD,QAAQ;IAACC,KAAK,EAAE;MAAEzB;IAAM;EAAE,GAC3C9B,KAAA,CAAAqD,aAAA,CAAC9C,IAAI,CAACiD,KAAK,EAAAC,QAAA;IACT9B,SAAS,EAAEvB,UAAU,CAAC,gBAAgB,EAAEuB,SAAS,CAAE;IACnD+B,OAAO,EAAC,SAAS;IACjB,cAAYf,SAAU;IACtBgB,QAAQ,EAAEV,iBAAkB;IAC5BW,QAAQ,EAAE,CAAC;EAAE,GACTxB,SAAS,GAEZc,UAAU,GACTlD,KAAA,CAAAqD,aAAA,CAAC3C,aAAa,EAAKwC,UAAU,EAAGf,QAAwB,CAAC,GAEzDA,QAEQ,CACc,CAC7B;EAED,IACEI,WAAW,KAAKT,KAAK,IACrBZ,OAAO,KAAK,KAAK,IAChBC,WAAW,IAAI,CAACmB,KAAK,CAAC;IAAEuB,WAAW,EAAE1C;EAAY,CAAC,CAAE,EACrD;IACA,IAAIc,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAID,SAAS,EAAE;MAC9B,OACEhC,KAAA,CAAAqD,aAAA;QAAKzB,KAAK,EAAC,aAAa;QAACkC,MAAM;MAAA,GAC5BV,OACE,CAAC;IAEV,CAAC,MAAM;MACL,IAAIZ,kBAAkB,GAAG,CAAC,EAAE;QAC1B/B,IAAI,CACF,uBAAuB+B,kBAAkB,yGAC3C,CAAC;MACH;IACF;IAGA,OAAAuB,SAAA,KAAAA,SAAA,GAAO/D,KAAA,CAAAqD,aAAA,CAAArD,KAAA,CAAAgE,QAAA,MAAI,CAAC;EACd;EAEA,OAAOhE,KAAA,CAAAqD,aAAA,CAAArD,KAAA,CAAAgE,QAAA,QAAGZ,OAAU,CAAC;AACvB;AAEA5B,IAAI,CAACyC,qBAAqB,GAAG,IAAI;AACjC,eAAezC,IAAI","ignoreList":[]}
+{"version":3,"file":"Step.js","names":["React","useContext","useMemo","classnames","WizardContext","WizardStepContext","Flex","convertJsxToString","warn","FieldProvider","handleDeprecatedProps","_ref","active","activeWhen","include","includeWhen","rest","_objectWithoutProperties","_excluded","_objectSpread","Step","props","_handleDeprecatedProp","id","className","title","index","indexProp","inactive","required","keepInDOM","keepInDOMProp","prerenderFieldProps","children","restProps","_excluded2","check","enableMapOverChildren","activeIndex","initialActiveIndex","totalStepsRef","stepElementRef","stepIndexRef","stepsRef","wizardStepContext","indexFromContext","totalSteps","current","ariaLabel","undefined","Array","from","values","find","_ref2","_originalTitleProp$pr","currentId","originalTitleProp","stringifiedTitle","translationId","_title$props","_Fragment","createElement","Fragment","visibleWhen","_Fragment2","fieldProps","innerRef","content","Provider","value","Stack","_extends","element","tabIndex","hidden","_Fragment3","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Wizard/Step/Step.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { ComponentProps } from '../../types'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\nimport WizardContext from '../Context/WizardContext'\nimport WizardStepContext from './StepContext'\nimport Flex from '../../../../components/flex/Flex'\nimport {\n  convertJsxToString,\n  warn,\n} from '../../../../shared/component-helper'\nimport FieldProvider from '../../Field/Provider'\nimport type { VisibleWhen } from '../../Form/Visibility'\n\nexport type Props = ComponentProps &\n  FlexContainerProps & {\n    /**\n     * An unique title of the step.\n     */\n    title?: React.ReactNode\n\n    /**\n     * Will treat the step as non-navigable if set to `true`.\n     */\n    inactive?: boolean\n\n    /**\n     * To determine if the step should be rendered.\n     * Used internally by the WizardContainer.\n     */\n    index?: number\n\n    /**\n     * Will make all the fields inside the step to be required.\n     */\n    required?: boolean\n\n    /**\n     * If set to `false`, the step will not be rendered.\n     * @deprecated use `include` instead\n     */\n    active?: boolean\n\n    /**\n     * Provide a `path` and a `hasValue` property with the expected value in order to enable the step. You can alternatively provide a `hasValue` function that returns a boolean. The first parameter is the value of the path.\n     * @deprecated use `includeWhen` instead\n     */\n    activeWhen?: VisibleWhen\n\n    /**\n     * If set to `false`, the step will not be rendered.\n     */\n\n    include?: boolean\n    /**\n     * Provide a `path` and a `hasValue` property with the expected value in order to enable the step. You can alternatively provide a `hasValue` function that returns a boolean. The first parameter is the value of the path.\n     */\n    includeWhen?: VisibleWhen\n\n    /**\n     * Determines if the step should be kept in the DOM. Defaults to `false`.\n     */\n    keepInDOM?: boolean\n\n    /**\n     * If set to `true`, the step will always be rendered.\n     * For internal use only.\n     */\n    prerenderFieldProps?: boolean\n  }\n\nexport function handleDeprecatedProps({\n  active,\n  activeWhen,\n  include,\n  includeWhen,\n  ...rest\n}: Props): Omit<Props, 'active' | 'activeWhen'> {\n  return {\n    include: include ?? active,\n    includeWhen: includeWhen ?? activeWhen,\n    ...rest,\n  }\n}\n\nfunction Step(props: Props): JSX.Element {\n  const {\n    id,\n    className,\n    title,\n    index: indexProp,\n    inactive, // eslint-disable-line\n    include = true,\n    includeWhen,\n    required,\n    keepInDOM: keepInDOMProp,\n    prerenderFieldProps,\n    children,\n    ...restProps\n  } = handleDeprecatedProps(props)\n\n  const {\n    check,\n    enableMapOverChildren,\n    activeIndex,\n    initialActiveIndex,\n    totalStepsRef,\n    stepElementRef,\n    stepIndexRef,\n    stepsRef,\n    keepInDOM,\n  } = useContext(WizardContext) || {}\n\n  const wizardStepContext = useContext(WizardStepContext) || {}\n  const indexFromContext = wizardStepContext.index\n\n  const totalSteps = totalStepsRef?.current\n  const ariaLabel = useMemo(() => convertJsxToString(title), [title])\n  const index = useMemo(() => {\n    if (indexProp !== undefined) {\n      return indexProp\n    }\n\n    // Try to use the index from the step context\n    if (indexFromContext !== undefined) {\n      return indexFromContext\n    }\n\n    if (stepsRef?.current) {\n      // Try different ways to find the step index\n      const { index } =\n        Array.from(stepsRef.current.values()).find(\n          ({\n            id: currentId,\n            title: originalTitleProp,\n            stringifiedTitle,\n          }) => {\n            // Try to find the step by id\n            if (id !== undefined) {\n              return id === currentId\n            }\n\n            // Try to find the step by <Translation id=\"...\" />\n            const translationId = originalTitleProp?.['props']?.id\n            if (translationId) {\n              return translationId === title?.['props']?.id\n            }\n\n            // Try to find the step by a string (with convertJsxToString) title\n            if (stringifiedTitle) {\n              return stringifiedTitle === ariaLabel\n            }\n\n            // Try to find the step by a JSX title\n            return originalTitleProp === title\n          }\n        ) || {}\n\n      if (index !== undefined) {\n        return index\n      }\n    }\n\n    if (\n      totalSteps && // Is only used to make the deps ESLint happy.\n      stepIndexRef\n    ) {\n      stepIndexRef.current += 1\n    }\n\n    return stepIndexRef?.current\n  }, [\n    indexProp,\n    stepsRef,\n    totalSteps, // \"totalSteps\" is needed to make dynamic steps work.\n    stepIndexRef,\n    indexFromContext,\n    title,\n    id,\n    ariaLabel,\n  ])\n\n  // If the index is greater than the total steps,\n  // its a sign that e.g. React.StrictMode is used.\n  // And if no title or id is given,\n  // we need to force an re-render and use an alternative render method,\n  // using React.Children.map(children, ...).\n  if (index >= totalSteps) {\n    enableMapOverChildren()\n  }\n\n  if (prerenderFieldProps) {\n    return children as JSX.Element\n  }\n\n  if (include === false) {\n    return <></>\n  }\n\n  if (\n    includeWhen &&\n    !check({\n      visibleWhen: includeWhen,\n    })\n  ) {\n    return <></>\n  }\n\n  const fieldProps =\n    typeof required === 'boolean' ? { required } : undefined\n  const innerRef =\n    !prerenderFieldProps && activeIndex === index ? stepElementRef : null\n\n  const content = (\n    <WizardStepContext.Provider value={{ index }}>\n      <Flex.Stack\n        className={classnames('dnb-forms-step', className)}\n        element=\"section\"\n        aria-label={ariaLabel}\n        innerRef={innerRef}\n        tabIndex={-1}\n        {...restProps}\n      >\n        {fieldProps ? (\n          <FieldProvider {...fieldProps}>{children}</FieldProvider>\n        ) : (\n          children\n        )}\n      </Flex.Stack>\n    </WizardStepContext.Provider>\n  )\n\n  if (\n    activeIndex !== index ||\n    (includeWhen && !check({ visibleWhen: includeWhen }))\n  ) {\n    if (keepInDOMProp ?? keepInDOM) {\n      return (\n        <div title=\"Wizard Step\" hidden>\n          {content}\n        </div>\n      )\n    } else {\n      if (initialActiveIndex > 0) {\n        warn(\n          `initialActiveIndex={${initialActiveIndex}} is used. Fields of previews steps may not validate. You can use \"keepInDOM\" to always run validation.`\n        )\n      }\n    }\n\n    // Another step is active\n    return <></>\n  }\n\n  return <>{content}</>\n}\n\nStep._supportsSpacingProps = true\nexport default Step\n"],"mappings":";;;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,UAAU,MAAM,YAAY;AAGnC,OAAOC,aAAa,MAAM,0BAA0B;AACpD,OAAOC,iBAAiB,MAAM,eAAe;AAC7C,OAAOC,IAAI,MAAM,kCAAkC;AACnD,SACEC,kBAAkB,EAClBC,IAAI,QACC,qCAAqC;AAC5C,OAAOC,aAAa,MAAM,sBAAsB;AA4DhD,OAAO,SAASC,qBAAqBA,CAAAC,IAAA,EAMW;EAAA,IANV;MACpCC,MAAM;MACNC,UAAU;MACVC,OAAO;MACPC;IAEK,CAAC,GAAAJ,IAAA;IADHK,IAAI,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA;EAEP,OAAAC,aAAA;IACEL,OAAO,EAAEA,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIF,MAAM;IAC1BG,WAAW,EAAEA,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAIF;EAAU,GACnCG,IAAI;AAEX;AAEA,SAASI,IAAIA,CAACC,KAAY,EAAe;EACvC,MAAAC,qBAAA,GAaIZ,qBAAqB,CAACW,KAAK,CAAC;IAb1B;MACJE,EAAE;MACFC,SAAS;MACTC,KAAK;MACLC,KAAK,EAAEC,SAAS;MAChBC,QAAQ;MACRd,OAAO,GAAG,IAAI;MACdC,WAAW;MACXc,QAAQ;MACRC,SAAS,EAAEC,aAAa;MACxBC,mBAAmB;MACnBC;IAEF,CAAC,GAAAX,qBAAA;IADIY,SAAS,GAAAjB,wBAAA,CAAAK,qBAAA,EAAAa,UAAA;EAGd,MAAM;IACJC,KAAK;IACLC,qBAAqB;IACrBC,WAAW;IACXC,kBAAkB;IAClBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,QAAQ;IACRb;EACF,CAAC,GAAG7B,UAAU,CAACG,aAAa,CAAC,IAAI,CAAC,CAAC;EAEnC,MAAMwC,iBAAiB,GAAG3C,UAAU,CAACI,iBAAiB,CAAC,IAAI,CAAC,CAAC;EAC7D,MAAMwC,gBAAgB,GAAGD,iBAAiB,CAAClB,KAAK;EAEhD,MAAMoB,UAAU,GAAGN,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEO,OAAO;EACzC,MAAMC,SAAS,GAAG9C,OAAO,CAAC,MAAMK,kBAAkB,CAACkB,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EACnE,MAAMC,KAAK,GAAGxB,OAAO,CAAC,MAAM;IAC1B,IAAIyB,SAAS,KAAKsB,SAAS,EAAE;MAC3B,OAAOtB,SAAS;IAClB;IAGA,IAAIkB,gBAAgB,KAAKI,SAAS,EAAE;MAClC,OAAOJ,gBAAgB;IACzB;IAEA,IAAIF,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAEI,OAAO,EAAE;MAErB,MAAM;QAAErB;MAAM,CAAC,GACbwB,KAAK,CAACC,IAAI,CAACR,QAAQ,CAACI,OAAO,CAACK,MAAM,CAAC,CAAC,CAAC,CAACC,IAAI,CACxCC,KAAA,IAIM;QAAA,IAAAC,qBAAA;QAAA,IAJL;UACChC,EAAE,EAAEiC,SAAS;UACb/B,KAAK,EAAEgC,iBAAiB;UACxBC;QACF,CAAC,GAAAJ,KAAA;QAEC,IAAI/B,EAAE,KAAK0B,SAAS,EAAE;UACpB,OAAO1B,EAAE,KAAKiC,SAAS;QACzB;QAGA,MAAMG,aAAa,GAAGF,iBAAiB,aAAjBA,iBAAiB,wBAAAF,qBAAA,GAAjBE,iBAAiB,CAAG,OAAO,CAAC,cAAAF,qBAAA,uBAA5BA,qBAAA,CAA8BhC,EAAE;QACtD,IAAIoC,aAAa,EAAE;UAAA,IAAAC,YAAA;UACjB,OAAOD,aAAa,MAAKlC,KAAK,aAALA,KAAK,wBAAAmC,YAAA,GAALnC,KAAK,CAAG,OAAO,CAAC,cAAAmC,YAAA,uBAAhBA,YAAA,CAAkBrC,EAAE;QAC/C;QAGA,IAAImC,gBAAgB,EAAE;UACpB,OAAOA,gBAAgB,KAAKV,SAAS;QACvC;QAGA,OAAOS,iBAAiB,KAAKhC,KAAK;MACpC,CACF,CAAC,IAAI,CAAC,CAAC;MAET,IAAIC,KAAK,KAAKuB,SAAS,EAAE;QACvB,OAAOvB,KAAK;MACd;IACF;IAEA,IACEoB,UAAU,IACVJ,YAAY,EACZ;MACAA,YAAY,CAACK,OAAO,IAAI,CAAC;IAC3B;IAEA,OAAOL,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEK,OAAO;EAC9B,CAAC,EAAE,CACDpB,SAAS,EACTgB,QAAQ,EACRG,UAAU,EACVJ,YAAY,EACZG,gBAAgB,EAChBpB,KAAK,EACLF,EAAE,EACFyB,SAAS,CACV,CAAC;EAOF,IAAItB,KAAK,IAAIoB,UAAU,EAAE;IACvBT,qBAAqB,CAAC,CAAC;EACzB;EAEA,IAAIL,mBAAmB,EAAE;IACvB,OAAOC,QAAQ;EACjB;EAEA,IAAInB,OAAO,KAAK,KAAK,EAAE;IACrB,OAAA+C,SAAA,KAAAA,SAAA,GAAO7D,KAAA,CAAA8D,aAAA,CAAA9D,KAAA,CAAA+D,QAAA,MAAI,CAAC;EACd;EAEA,IACEhD,WAAW,IACX,CAACqB,KAAK,CAAC;IACL4B,WAAW,EAAEjD;EACf,CAAC,CAAC,EACF;IACA,OAAAkD,UAAA,KAAAA,UAAA,GAAOjE,KAAA,CAAA8D,aAAA,CAAA9D,KAAA,CAAA+D,QAAA,MAAI,CAAC;EACd;EAEA,MAAMG,UAAU,GACd,OAAOrC,QAAQ,KAAK,SAAS,GAAG;IAAEA;EAAS,CAAC,GAAGoB,SAAS;EAC1D,MAAMkB,QAAQ,GACZ,CAACnC,mBAAmB,IAAIM,WAAW,KAAKZ,KAAK,GAAGe,cAAc,GAAG,IAAI;EAEvE,MAAM2B,OAAO,GACXpE,KAAA,CAAA8D,aAAA,CAACzD,iBAAiB,CAACgE,QAAQ;IAACC,KAAK,EAAE;MAAE5C;IAAM;EAAE,GAC3C1B,KAAA,CAAA8D,aAAA,CAACxD,IAAI,CAACiE,KAAK,EAAAC,QAAA;IACThD,SAAS,EAAErB,UAAU,CAAC,gBAAgB,EAAEqB,SAAS,CAAE;IACnDiD,OAAO,EAAC,SAAS;IACjB,cAAYzB,SAAU;IACtBmB,QAAQ,EAAEA,QAAS;IACnBO,QAAQ,EAAE,CAAC;EAAE,GACTxC,SAAS,GAEZgC,UAAU,GACTlE,KAAA,CAAA8D,aAAA,CAACrD,aAAa,EAAKyD,UAAU,EAAGjC,QAAwB,CAAC,GAEzDA,QAEQ,CACc,CAC7B;EAED,IACEK,WAAW,KAAKZ,KAAK,IACpBX,WAAW,IAAI,CAACqB,KAAK,CAAC;IAAE4B,WAAW,EAAEjD;EAAY,CAAC,CAAE,EACrD;IACA,IAAIgB,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAID,SAAS,EAAE;MAC9B,OACE9B,KAAA,CAAA8D,aAAA;QAAKrC,KAAK,EAAC,aAAa;QAACkD,MAAM;MAAA,GAC5BP,OACE,CAAC;IAEV,CAAC,MAAM;MACL,IAAI7B,kBAAkB,GAAG,CAAC,EAAE;QAC1B/B,IAAI,CACF,uBAAuB+B,kBAAkB,yGAC3C,CAAC;MACH;IACF;IAGA,OAAAqC,UAAA,KAAAA,UAAA,GAAO5E,KAAA,CAAA8D,aAAA,CAAA9D,KAAA,CAAA+D,QAAA,MAAI,CAAC;EACd;EAEA,OAAO/D,KAAA,CAAA8D,aAAA,CAAA9D,KAAA,CAAA+D,QAAA,QAAGK,OAAU,CAAC;AACvB;AAEAhD,IAAI,CAACyD,qBAAqB,GAAG,IAAI;AACjC,eAAezD,IAAI","ignoreList":[]}

package/extensions/forms/Wizard/Step/StepDocs.js

@@ -1,8 +1,8 @@
 export const StepProperties = {
   title: {
-    doc: 'Title of the step.',
+    doc: 'An unique title of the step.',
     type: 'React.Node',
-    status: 'optional'
+    status: 'required'
   },
   inactive: {
     doc: 'Will treat the step as non-navigable if set to `true`.',

package/extensions/forms/Wizard/Step/StepDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepDocs.js","names":["StepProperties","title","doc","type","status","inactive","required","include","includeWhen","keepInDOM","children","active","activeWhen","StepEvents"],"sources":["../../../../../../src/extensions/forms/Wizard/Step/StepDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const StepProperties: PropertiesTableProps = {\n  title: {\n    doc: 'Title of the step.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  inactive: {\n    doc: 'Will treat the step as non-navigable if set to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  required: {\n    doc: 'Will make all nested form fields required.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  include: {\n    doc: 'If set to `false`, the step will not be rendered.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  includeWhen: {\n    doc: 'Provide a `path` and a `hasValue` property with the expected value in order to enable the step. You can alternatively provide a `hasValue` function that returns a boolean. The first parameter is the value of the path.',\n    type: 'object',\n    status: 'optional',\n  },\n  keepInDOM: {\n    doc: 'Determines if the step should be kept in the DOM. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n  '[Flex.Container](/uilib/layout/flex/container/properties)': {\n    doc: 'Flex.Container properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n  active: {\n    doc: 'Deprecated, use `include`. Old docs: If set to `false`, the step will not be rendered.',\n    type: 'boolean',\n    status: 'deprecated',\n  },\n  activeWhen: {\n    doc: 'Deprecated, use `includeWhen`. Old docs: Provide a `path` and a `hasValue` property with the expected value in order to enable the step. You can alternatively provide a `hasValue` function that returns a boolean. The first parameter is the value of the path.',\n    type: 'object',\n    status: 'deprecated',\n  },\n}\n\nexport const StepEvents: PropertiesTableProps = {}\n"],"mappings":"AAEA,OAAO,MAAMA,cAAoC,GAAG;EAClDC,KAAK,EAAE;IACLC,GAAG,EAAE,oBAAoB;IACzBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,QAAQ,EAAE;IACRJ,GAAG,EAAE,4CAA4C;IACjDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,OAAO,EAAE;IACPL,GAAG,EAAE,mDAAmD;IACxDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDI,WAAW,EAAE;IACXN,GAAG,EAAE,2NAA2N;IAChOC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,SAAS,EAAE;IACTP,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD,2DAA2D,EAAE;IAC3DF,GAAG,EAAE,4BAA4B;IACjCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDO,MAAM,EAAE;IACNT,GAAG,EAAE,wFAAwF;IAC7FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDQ,UAAU,EAAE;IACVV,GAAG,EAAE,oQAAoQ;IACzQC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMS,UAAgC,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"StepDocs.js","names":["StepProperties","title","doc","type","status","inactive","required","include","includeWhen","keepInDOM","children","active","activeWhen","StepEvents"],"sources":["../../../../../../src/extensions/forms/Wizard/Step/StepDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const StepProperties: PropertiesTableProps = {\n  title: {\n    doc: 'An unique title of the step.',\n    type: 'React.Node',\n    status: 'required',\n  },\n  inactive: {\n    doc: 'Will treat the step as non-navigable if set to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  required: {\n    doc: 'Will make all nested form fields required.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  include: {\n    doc: 'If set to `false`, the step will not be rendered.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  includeWhen: {\n    doc: 'Provide a `path` and a `hasValue` property with the expected value in order to enable the step. You can alternatively provide a `hasValue` function that returns a boolean. The first parameter is the value of the path.',\n    type: 'object',\n    status: 'optional',\n  },\n  keepInDOM: {\n    doc: 'Determines if the step should be kept in the DOM. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n  '[Flex.Container](/uilib/layout/flex/container/properties)': {\n    doc: 'Flex.Container properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n  active: {\n    doc: 'Deprecated, use `include`. Old docs: If set to `false`, the step will not be rendered.',\n    type: 'boolean',\n    status: 'deprecated',\n  },\n  activeWhen: {\n    doc: 'Deprecated, use `includeWhen`. Old docs: Provide a `path` and a `hasValue` property with the expected value in order to enable the step. You can alternatively provide a `hasValue` function that returns a boolean. The first parameter is the value of the path.',\n    type: 'object',\n    status: 'deprecated',\n  },\n}\n\nexport const StepEvents: PropertiesTableProps = {}\n"],"mappings":"AAEA,OAAO,MAAMA,cAAoC,GAAG;EAClDC,KAAK,EAAE;IACLC,GAAG,EAAE,8BAA8B;IACnCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,QAAQ,EAAE;IACRJ,GAAG,EAAE,4CAA4C;IACjDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,OAAO,EAAE;IACPL,GAAG,EAAE,mDAAmD;IACxDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDI,WAAW,EAAE;IACXN,GAAG,EAAE,2NAA2N;IAChOC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,SAAS,EAAE;IACTP,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD,2DAA2D,EAAE;IAC3DF,GAAG,EAAE,4BAA4B;IACjCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDO,MAAM,EAAE;IACNT,GAAG,EAAE,wFAAwF;IAC7FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDQ,UAAU,EAAE;IACVV,GAAG,EAAE,oQAAoQ;IACzQC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMS,UAAgC,GAAG,CAAC,CAAC","ignoreList":[]}

package/extensions/forms/Wizard/hooks/useStep.js

@@ -10,11 +10,11 @@ export default function useStep() {
     onStepChange
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const setFormError = useCallback(() => null, []);
-  const context = useContext(WizardContext) || {
+  const wizardContext = useContext(WizardContext) || {
     setFormError
   };
-  if (onStepChange && !id && context.id) {
-    id = context.id;
+  if (onStepChange && !id && wizardContext.id) {
+    id = wizardContext.id;
   }
   const sharedDataRef = useRef(null);
   sharedDataRef.current = useSharedState(id ? createReferenceKey(id, 'wizard') : undefined);
@@ -27,22 +27,14 @@ export default function useStep() {
   if (data && !data.setFormError) {
     data.setFormError = setFormError;
   }
-  const value = data || context;
+  const context = data || wizardContext;
   const {
-    stepsRef
-  } = value || {};
-  const setTotalSteps = useCallback(() => {
-    const totalSteps = Object.keys((stepsRef === null || stepsRef === void 0 ? void 0 : stepsRef.current) || {}).length || 0;
-    if (value.totalSteps !== totalSteps) {
-      value.totalSteps = totalSteps;
-    }
-  }, [stepsRef, value]);
-  if (data) {
-    setTotalSteps();
+    totalStepsRef
+  } = context || {};
+  const totalSteps = (totalStepsRef === null || totalStepsRef === void 0 ? void 0 : totalStepsRef.current) || 0;
+  if (context && context.totalSteps !== totalSteps) {
+    context.totalSteps = totalSteps;
   }
-  useLayoutEffect(() => {
-    setTotalSteps();
-  }, [setTotalSteps, stepsRef, value]);
-  return value;
+  return context;
 }
 //# sourceMappingURL=useStep.js.map

package/extensions/forms/Wizard/hooks/useStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStep.js","names":["React","useCallback","useContext","useRef","WizardContext","createReferenceKey","useSharedState","useLayoutEffect","window","useEffect","useStep","id","arguments","length","undefined","onStepChange","setFormError","context","sharedDataRef","current","extend","data","value","stepsRef","setTotalSteps","totalSteps","Object","keys"],"sources":["../../../../../../src/extensions/forms/Wizard/hooks/useStep.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef } from 'react'\nimport WizardContext, {\n  WizardContextState,\n} from '../Context/WizardContext'\nimport type { OnStepChange } from '../Context/types'\nimport {\n  SharedStateId,\n  createReferenceKey,\n  useSharedState,\n} from '../../../../shared/helpers/useSharedState'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport default function useStep(\n  id: SharedStateId = null,\n  { onStepChange }: { onStepChange?: OnStepChange } = {}\n) {\n  const setFormError = useCallback(() => null, [])\n  const context = useContext(WizardContext) || { setFormError }\n\n  // In order to make it possible to add a \"onStepChange\" handler without an id,\n  // we at least check if there is one from the context.\n  if (onStepChange && !id && context.id) {\n    id = context.id\n  }\n\n  const sharedDataRef =\n    useRef<ReturnType<typeof useSharedState<WizardContextState>>>(null)\n  sharedDataRef.current = useSharedState<WizardContextState>(\n    id ? createReferenceKey(id, 'wizard') : undefined\n  )\n\n  useLayoutEffect(() => {\n    sharedDataRef.current.extend({\n      onStepChange,\n    } as unknown as WizardContextState) // Internal type\n  }, [onStepChange])\n\n  const data = sharedDataRef.current.data\n  if (data && !data.setFormError) {\n    data.setFormError = setFormError\n  }\n\n  const value = data || context\n  const { stepsRef } = value || {}\n  const setTotalSteps = useCallback(() => {\n    const totalSteps = Object.keys(stepsRef?.current || {}).length || 0\n    if (value.totalSteps !== totalSteps) {\n      value.totalSteps = totalSteps\n    }\n  }, [stepsRef, value])\n  if (data) {\n    setTotalSteps()\n  }\n  useLayoutEffect(() => {\n    setTotalSteps()\n  }, [setTotalSteps, stepsRef, value])\n\n  return value\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,MAAM,QAAQ,OAAO;AAC9D,OAAOC,aAAa,MAEb,0BAA0B;AAEjC,SAEEC,kBAAkB,EAClBC,cAAc,QACT,2CAA2C;AAGlD,MAAMC,eAAe,GACnB,OAAOC,MAAM,KAAK,WAAW,GAAGR,KAAK,CAACS,SAAS,GAAGT,KAAK,CAACO,eAAe;AAEzE,eAAe,SAASG,OAAOA,CAAA,EAG7B;EAAA,IAFAC,EAAiB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,IAAI;EAAA,IACxB;IAAEG;EAA8C,CAAC,GAAAH,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EAEtD,MAAMI,YAAY,GAAGf,WAAW,CAAC,MAAM,IAAI,EAAE,EAAE,CAAC;EAChD,MAAMgB,OAAO,GAAGf,UAAU,CAACE,aAAa,CAAC,IAAI;IAAEY;EAAa,CAAC;EAI7D,IAAID,YAAY,IAAI,CAACJ,EAAE,IAAIM,OAAO,CAACN,EAAE,EAAE;IACrCA,EAAE,GAAGM,OAAO,CAACN,EAAE;EACjB;EAEA,MAAMO,aAAa,GACjBf,MAAM,CAAwD,IAAI,CAAC;EACrEe,aAAa,CAACC,OAAO,GAAGb,cAAc,CACpCK,EAAE,GAAGN,kBAAkB,CAACM,EAAE,EAAE,QAAQ,CAAC,GAAGG,SAC1C,CAAC;EAEDP,eAAe,CAAC,MAAM;IACpBW,aAAa,CAACC,OAAO,CAACC,MAAM,CAAC;MAC3BL;IACF,CAAkC,CAAC;EACrC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,MAAMM,IAAI,GAAGH,aAAa,CAACC,OAAO,CAACE,IAAI;EACvC,IAAIA,IAAI,IAAI,CAACA,IAAI,CAACL,YAAY,EAAE;IAC9BK,IAAI,CAACL,YAAY,GAAGA,YAAY;EAClC;EAEA,MAAMM,KAAK,GAAGD,IAAI,IAAIJ,OAAO;EAC7B,MAAM;IAAEM;EAAS,CAAC,GAAGD,KAAK,IAAI,CAAC,CAAC;EAChC,MAAME,aAAa,GAAGvB,WAAW,CAAC,MAAM;IACtC,MAAMwB,UAAU,GAAGC,MAAM,CAACC,IAAI,CAAC,CAAAJ,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEJ,OAAO,KAAI,CAAC,CAAC,CAAC,CAACN,MAAM,IAAI,CAAC;IACnE,IAAIS,KAAK,CAACG,UAAU,KAAKA,UAAU,EAAE;MACnCH,KAAK,CAACG,UAAU,GAAGA,UAAU;IAC/B;EACF,CAAC,EAAE,CAACF,QAAQ,EAAED,KAAK,CAAC,CAAC;EACrB,IAAID,IAAI,EAAE;IACRG,aAAa,CAAC,CAAC;EACjB;EACAjB,eAAe,CAAC,MAAM;IACpBiB,aAAa,CAAC,CAAC;EACjB,CAAC,EAAE,CAACA,aAAa,EAAED,QAAQ,EAAED,KAAK,CAAC,CAAC;EAEpC,OAAOA,KAAK;AACd","ignoreList":[]}
+{"version":3,"file":"useStep.js","names":["React","useCallback","useContext","useRef","WizardContext","createReferenceKey","useSharedState","useLayoutEffect","window","useEffect","useStep","id","arguments","length","undefined","onStepChange","setFormError","wizardContext","sharedDataRef","current","extend","data","context","totalStepsRef","totalSteps"],"sources":["../../../../../../src/extensions/forms/Wizard/hooks/useStep.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef } from 'react'\nimport WizardContext, {\n  WizardContextState,\n} from '../Context/WizardContext'\nimport type { OnStepChange } from '../Context/types'\nimport {\n  SharedStateId,\n  createReferenceKey,\n  useSharedState,\n} from '../../../../shared/helpers/useSharedState'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport default function useStep(\n  id: SharedStateId = null,\n  { onStepChange }: { onStepChange?: OnStepChange } = {}\n) {\n  const setFormError = useCallback(() => null, [])\n  const wizardContext = useContext(WizardContext) || { setFormError }\n\n  // In order to make it possible to add a \"onStepChange\" handler without an id,\n  // we at least check if there is one from the context.\n  if (onStepChange && !id && wizardContext.id) {\n    id = wizardContext.id\n  }\n\n  const sharedDataRef =\n    useRef<ReturnType<typeof useSharedState<WizardContextState>>>(null)\n  sharedDataRef.current = useSharedState<WizardContextState>(\n    id ? createReferenceKey(id, 'wizard') : undefined\n  )\n\n  useLayoutEffect(() => {\n    sharedDataRef.current.extend({\n      onStepChange,\n    } as unknown as WizardContextState) // Internal type\n  }, [onStepChange])\n\n  const data = sharedDataRef.current.data\n  if (data && !data.setFormError) {\n    data.setFormError = setFormError\n  }\n\n  const context = data || wizardContext\n  const { totalStepsRef } = context || {}\n  const totalSteps = totalStepsRef?.current || 0\n  if (context && context.totalSteps !== totalSteps) {\n    context.totalSteps = totalSteps\n  }\n\n  return context\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,MAAM,QAAQ,OAAO;AAC9D,OAAOC,aAAa,MAEb,0BAA0B;AAEjC,SAEEC,kBAAkB,EAClBC,cAAc,QACT,2CAA2C;AAGlD,MAAMC,eAAe,GACnB,OAAOC,MAAM,KAAK,WAAW,GAAGR,KAAK,CAACS,SAAS,GAAGT,KAAK,CAACO,eAAe;AAEzE,eAAe,SAASG,OAAOA,CAAA,EAG7B;EAAA,IAFAC,EAAiB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,IAAI;EAAA,IACxB;IAAEG;EAA8C,CAAC,GAAAH,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EAEtD,MAAMI,YAAY,GAAGf,WAAW,CAAC,MAAM,IAAI,EAAE,EAAE,CAAC;EAChD,MAAMgB,aAAa,GAAGf,UAAU,CAACE,aAAa,CAAC,IAAI;IAAEY;EAAa,CAAC;EAInE,IAAID,YAAY,IAAI,CAACJ,EAAE,IAAIM,aAAa,CAACN,EAAE,EAAE;IAC3CA,EAAE,GAAGM,aAAa,CAACN,EAAE;EACvB;EAEA,MAAMO,aAAa,GACjBf,MAAM,CAAwD,IAAI,CAAC;EACrEe,aAAa,CAACC,OAAO,GAAGb,cAAc,CACpCK,EAAE,GAAGN,kBAAkB,CAACM,EAAE,EAAE,QAAQ,CAAC,GAAGG,SAC1C,CAAC;EAEDP,eAAe,CAAC,MAAM;IACpBW,aAAa,CAACC,OAAO,CAACC,MAAM,CAAC;MAC3BL;IACF,CAAkC,CAAC;EACrC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,MAAMM,IAAI,GAAGH,aAAa,CAACC,OAAO,CAACE,IAAI;EACvC,IAAIA,IAAI,IAAI,CAACA,IAAI,CAACL,YAAY,EAAE;IAC9BK,IAAI,CAACL,YAAY,GAAGA,YAAY;EAClC;EAEA,MAAMM,OAAO,GAAGD,IAAI,IAAIJ,aAAa;EACrC,MAAM;IAAEM;EAAc,CAAC,GAAGD,OAAO,IAAI,CAAC,CAAC;EACvC,MAAME,UAAU,GAAG,CAAAD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEJ,OAAO,KAAI,CAAC;EAC9C,IAAIG,OAAO,IAAIA,OAAO,CAACE,UAAU,KAAKA,UAAU,EAAE;IAChDF,OAAO,CAACE,UAAU,GAAGA,UAAU;EACjC;EAEA,OAAOF,OAAO;AAChB","ignoreList":[]}

package/extensions/forms/hooks/useFieldProps.js

@@ -110,8 +110,10 @@ export default function useFieldProps(localProps) {
     setMountedField: setMountedFieldSnapshot
   } = useContext(SnapshotContext) || {};
   const {
-    isVisible
+    isVisible,
+    keepInDOM
   } = useContext(VisibilityContext) || {};
+  const handleFieldAsVisible = isVisible || keepInDOM;
   const {
     getValueByPath,
     getSourceValue
@@ -165,7 +167,7 @@ export default function useFieldProps(localProps) {
     activeIndex,
     activeIndexRef,
     prerenderFieldProps,
-    revealError: revealErrorWizard
+    setFieldError: setFieldErrorWizard
   } = wizardContext || {};
   const {
     index: wizardIndex
@@ -393,10 +395,10 @@ export default function useFieldProps(localProps) {
   }, [setFieldStateDataContext, identifier, setFieldStateFieldBlock, validateInitially]);
   const setErrorState = useCallback(hasError => {
     showFieldErrorFieldBlock === null || showFieldErrorFieldBlock === void 0 ? void 0 : showFieldErrorFieldBlock(identifier, hasError);
-    revealErrorWizard === null || revealErrorWizard === void 0 ? void 0 : revealErrorWizard(wizardIndex, identifier, hasError);
     revealErrorBoundary === null || revealErrorBoundary === void 0 ? void 0 : revealErrorBoundary(identifier, hasError);
     revealErrorDataContext === null || revealErrorDataContext === void 0 ? void 0 : revealErrorDataContext(identifier, hasError);
-  }, [identifier, revealErrorBoundary, revealErrorDataContext, revealErrorWizard, showFieldErrorFieldBlock, wizardIndex]);
+    setFieldErrorWizard === null || setFieldErrorWizard === void 0 ? void 0 : setFieldErrorWizard(wizardIndex, identifier, handleFieldAsVisible !== false ? hasError : undefined);
+  }, [identifier, handleFieldAsVisible, revealErrorBoundary, revealErrorDataContext, setFieldErrorWizard, showFieldErrorFieldBlock, wizardIndex]);
   const revealError = useCallback(() => {
     if (validateInitially === false && revealErrorRef.current === false) {
       revealErrorRef.current = undefined;
@@ -630,6 +632,7 @@ export default function useFieldProps(localProps) {
     localErrorRef.current = error;
     setFieldErrorDataContext === null || setFieldErrorDataContext === void 0 ? void 0 : setFieldErrorDataContext(identifier, error);
     setFieldErrorBoundary === null || setFieldErrorBoundary === void 0 ? void 0 : setFieldErrorBoundary(identifier, error);
+    setFieldErrorWizard === null || setFieldErrorWizard === void 0 ? void 0 : setFieldErrorWizard(wizardIndex, identifier, handleFieldAsVisible !== false ? Boolean(error) : undefined);
     setBlockRecord === null || setBlockRecord === void 0 ? void 0 : setBlockRecord({
       stateId,
       identifier,
@@ -639,7 +642,7 @@ export default function useFieldProps(localProps) {
     });
     setFieldStateDataContext === null || setFieldStateDataContext === void 0 ? void 0 : setFieldStateDataContext(identifier, error ? 'error' : undefined);
     forceUpdate();
-  }, [identifier, inFieldBlock, prepareError, setFieldErrorBoundary, setFieldErrorDataContext, setFieldStateDataContext, setBlockRecord, stateId, validateInitially]);
+  }, [handleFieldAsVisible, identifier, inFieldBlock, prepareError, setBlockRecord, setFieldErrorBoundary, setFieldErrorDataContext, setFieldErrorWizard, setFieldStateDataContext, stateId, validateInitially, wizardIndex]);
   const clearErrorState = useCallback(() => {
     var _schemaValidatorRef$c;
     persistErrorState('wipe', undefined);
@@ -1195,7 +1198,12 @@ export default function useFieldProps(localProps) {
       setFieldErrorBoundary === null || setFieldErrorBoundary === void 0 ? void 0 : setFieldErrorBoundary(identifier, undefined);
       localErrorRef.current = undefined;
     };
-  }, [identifier, setFieldErrorBoundary, setFieldErrorDataContext, setMountedFieldStateDataContext, wizardIndex]);
+  }, [identifier, setFieldErrorBoundary, setFieldErrorDataContext]);
+  useEffect(() => {
+    return () => {
+      setFieldErrorWizard === null || setFieldErrorWizard === void 0 ? void 0 : setFieldErrorWizard(wizardIndex, identifier, undefined);
+    };
+  }, [identifier, setFieldErrorWizard, wizardIndex]);
   useEffect(() => {
     validateValue();
   }, [validateValue]);
@@ -1405,7 +1413,7 @@ export default function useFieldProps(localProps) {
       });
       return () => {
         if (mountedFieldsRefFieldBlock) {
-          mountedFieldsRefFieldBlock.current[identifier] = true;
+          mountedFieldsRefFieldBlock.current.set(identifier, true);
         }
       };
     }
@@ -1442,7 +1450,7 @@ export default function useFieldProps(localProps) {
   if (inFieldBlock) {
     var _fieldBlockContext$fi;
     if (mountedFieldsRefFieldBlock) {
-      mountedFieldsRefFieldBlock.current[identifier] = true;
+      mountedFieldsRefFieldBlock.current.set(identifier, true);
     }
     const stateIds = (_fieldBlockContext$fi = fieldBlockContext.fieldStateIdsRef) === null || _fieldBlockContext$fi === void 0 ? void 0 : _fieldBlockContext$fi.current;
     if (stateIds) {