@dnb/eufemia 10.22.0 → 10.24.0

package/es/extensions/forms/Iterate/ArrayRemoveElementButton/ArrayRemoveElementButton.js

@@ -5,7 +5,7 @@ import React, { useCallback, useContext } from 'react';
 import classnames from 'classnames';
 import { Button } from '../../../../components';
 import IterateElementContext from '../IterateElementContext';
-import { useDataValue } from '../../hooks';
+import { useFieldProps } from '../../hooks';
 import { omitDataValueReadWriteProps } from '../../types';
 function ArrayRemoveElementButton(props) {
   const iterateElementContext = useContext(IterateElementContext);
@@ -18,7 +18,7 @@ function ArrayRemoveElementButton(props) {
   const buttonProps = omitDataValueReadWriteProps(props);
   const {
     children
-  } = useDataValue(props);
+  } = useFieldProps(props);
   const handleClick = useCallback(() => {
     handleRemove();
   }, [handleRemove]);

package/es/extensions/forms/Iterate/ArrayRemoveElementButton/ArrayRemoveElementButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArrayRemoveElementButton.js","names":["React","useCallback","useContext","classnames","Button","IterateElementContext","useDataValue","omitDataValueReadWriteProps","ArrayRemoveElementButton","props","iterateElementContext","handleRemove","Error","buttonProps","children","handleClick","createElement","_extends","className","on_click","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/ArrayRemoveElementButton/ArrayRemoveElementButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport classnames from 'classnames'\nimport { Button } from '../../../../components'\nimport { ButtonProps } from '../../../../components/Button'\nimport IterateElementContext from '../IterateElementContext'\nimport { useDataValue } from '../../hooks'\nimport {\n  DataValueReadWriteComponentProps,\n  omitDataValueReadWriteProps,\n} from '../../types'\n\nexport type Props = ButtonProps &\n  DataValueReadWriteComponentProps<unknown[]>\n\nfunction ArrayRemoveElementButton(props: Props) {\n  const iterateElementContext = useContext(IterateElementContext)\n  const { handleRemove } = iterateElementContext ?? {}\n\n  if (!iterateElementContext) {\n    throw new Error(\n      'ArrayRemoveElementButton must be inside an Iterate.Array component.'\n    )\n  }\n\n  const buttonProps = omitDataValueReadWriteProps(props)\n\n  const { children } = useDataValue(props)\n\n  const handleClick = useCallback(() => {\n    handleRemove()\n  }, [handleRemove])\n\n  return (\n    <Button\n      className={classnames(\n        'dnb-forms-array-remove-element-button',\n        props.className\n      )}\n      on_click={handleClick}\n      {...buttonProps}\n    >\n      {children}\n    </Button>\n  )\n}\n\nArrayRemoveElementButton._supportsSpacingProps = true\nexport default ArrayRemoveElementButton\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAOC,qBAAqB,MAAM,0BAA0B;AAC5D,SAASC,YAAY,QAAQ,aAAa;AAC1C,SAEEC,2BAA2B,QACtB,aAAa;AAKpB,SAASC,wBAAwBA,CAACC,KAAY,EAAE;EAC9C,MAAMC,qBAAqB,GAAGR,UAAU,CAACG,qBAAqB,CAAC;EAC/D,MAAM;IAAEM;EAAa,CAAC,GAAGD,qBAAqB,aAArBA,qBAAqB,cAArBA,qBAAqB,GAAI,CAAC,CAAC;EAEpD,IAAI,CAACA,qBAAqB,EAAE;IAC1B,MAAM,IAAIE,KAAK,CACb,qEACF,CAAC;EACH;EAEA,MAAMC,WAAW,GAAGN,2BAA2B,CAACE,KAAK,CAAC;EAEtD,MAAM;IAAEK;EAAS,CAAC,GAAGR,YAAY,CAACG,KAAK,CAAC;EAExC,MAAMM,WAAW,GAAGd,WAAW,CAAC,MAAM;IACpCU,YAAY,CAAC,CAAC;EAChB,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,OACEX,KAAA,CAAAgB,aAAA,CAACZ,MAAM,EAAAa,QAAA;IACLC,SAAS,EAAEf,UAAU,CACnB,uCAAuC,EACvCM,KAAK,CAACS,SACR,CAAE;IACFC,QAAQ,EAAEJ;EAAY,GAClBF,WAAW,GAEdC,QACK,CAAC;AAEb;AAEAN,wBAAwB,CAACY,qBAAqB,GAAG,IAAI;AACrD,eAAeZ,wBAAwB"}
+{"version":3,"file":"ArrayRemoveElementButton.js","names":["React","useCallback","useContext","classnames","Button","IterateElementContext","useFieldProps","omitDataValueReadWriteProps","ArrayRemoveElementButton","props","iterateElementContext","handleRemove","Error","buttonProps","children","handleClick","createElement","_extends","className","on_click","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/ArrayRemoveElementButton/ArrayRemoveElementButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport classnames from 'classnames'\nimport { Button } from '../../../../components'\nimport { ButtonProps } from '../../../../components/Button'\nimport IterateElementContext from '../IterateElementContext'\nimport { useFieldProps } from '../../hooks'\nimport {\n  DataValueReadWriteComponentProps,\n  omitDataValueReadWriteProps,\n} from '../../types'\n\nexport type Props = ButtonProps &\n  DataValueReadWriteComponentProps<unknown[]>\n\nfunction ArrayRemoveElementButton(props: Props) {\n  const iterateElementContext = useContext(IterateElementContext)\n  const { handleRemove } = iterateElementContext ?? {}\n\n  if (!iterateElementContext) {\n    throw new Error(\n      'ArrayRemoveElementButton must be inside an Iterate.Array component.'\n    )\n  }\n\n  const buttonProps = omitDataValueReadWriteProps(props)\n\n  const { children } = useFieldProps(props)\n\n  const handleClick = useCallback(() => {\n    handleRemove()\n  }, [handleRemove])\n\n  return (\n    <Button\n      className={classnames(\n        'dnb-forms-array-remove-element-button',\n        props.className\n      )}\n      on_click={handleClick}\n      {...buttonProps}\n    >\n      {children}\n    </Button>\n  )\n}\n\nArrayRemoveElementButton._supportsSpacingProps = true\nexport default ArrayRemoveElementButton\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAOC,qBAAqB,MAAM,0BAA0B;AAC5D,SAASC,aAAa,QAAQ,aAAa;AAC3C,SAEEC,2BAA2B,QACtB,aAAa;AAKpB,SAASC,wBAAwBA,CAACC,KAAY,EAAE;EAC9C,MAAMC,qBAAqB,GAAGR,UAAU,CAACG,qBAAqB,CAAC;EAC/D,MAAM;IAAEM;EAAa,CAAC,GAAGD,qBAAqB,aAArBA,qBAAqB,cAArBA,qBAAqB,GAAI,CAAC,CAAC;EAEpD,IAAI,CAACA,qBAAqB,EAAE;IAC1B,MAAM,IAAIE,KAAK,CACb,qEACF,CAAC;EACH;EAEA,MAAMC,WAAW,GAAGN,2BAA2B,CAACE,KAAK,CAAC;EAEtD,MAAM;IAAEK;EAAS,CAAC,GAAGR,aAAa,CAACG,KAAK,CAAC;EAEzC,MAAMM,WAAW,GAAGd,WAAW,CAAC,MAAM;IACpCU,YAAY,CAAC,CAAC;EAChB,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,OACEX,KAAA,CAAAgB,aAAA,CAACZ,MAAM,EAAAa,QAAA;IACLC,SAAS,EAAEf,UAAU,CACnB,uCAAuC,EACvCM,KAAK,CAACS,SACR,CAAE;IACFC,QAAQ,EAAEJ;EAAY,GAClBF,WAAW,GAEdC,QACK,CAAC;AAEb;AAEAN,wBAAwB,CAACY,qBAAqB,GAAG,IAAI;AACrD,eAAeZ,wBAAwB"}

package/es/extensions/forms/StepsLayout/NextButton/NextButton.d.ts

@@ -1,8 +1,6 @@
 import type { ComponentProps } from '../../types';
 import { ButtonProps } from '../../../../components/button/Button';
-export type Props = ComponentProps & ButtonProps & {
-    children?: string;
-};
+export type Props = ComponentProps & ButtonProps;
 declare function NextButton(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace NextButton {
     var _supportsSpacingProps: boolean;

package/es/extensions/forms/StepsLayout/NextButton/NextButton.js

@@ -3,10 +3,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
 import classnames from 'classnames';
-import { Button } from '../../../../components';
 import SharedContext from '../../../../shared/Context';
 import StepsContext from '../StepsContext';
 import ButtonRow from '../../Form/ButtonRow';
+import SubmitButton from '../../Form/SubmitButton';
 function NextButton(props) {
   const sharedContext = useContext(SharedContext);
   const {
@@ -17,13 +17,14 @@ function NextButton(props) {
     children = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.stepNext
   } = props;
   const stepsContext = useContext(StepsContext);
-  return React.createElement(ButtonRow, null, React.createElement(Button, _extends({}, props, {
+  return React.createElement(ButtonRow, null, React.createElement(SubmitButton, _extends({
+    type: "button",
     className: classnames('dnb-forms-next-button', className),
     onClick: stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.handleNext,
     variant: variant,
     icon_position: icon_position,
     icon: icon
-  }), children));
+  }, props), children));
 }
 NextButton._supportsSpacingProps = true;
 export default NextButton;

package/es/extensions/forms/StepsLayout/NextButton/NextButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"NextButton.js","names":["React","useContext","classnames","Button","SharedContext","StepsContext","ButtonRow","NextButton","props","sharedContext","className","variant","icon_position","icon","children","translation","Forms","stepNext","stepsContext","createElement","_extends","onClick","handleNext","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/StepsLayout/NextButton/NextButton.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../../types'\nimport { Button } from '../../../../components'\nimport { ButtonProps } from '../../../../components/button/Button'\nimport SharedContext from '../../../../shared/Context'\nimport StepsContext from '../StepsContext'\nimport ButtonRow from '../../Form/ButtonRow'\n\nexport type Props = ComponentProps &\n  ButtonProps & {\n    children?: string\n  }\n\nfunction NextButton(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    className,\n    variant = 'primary',\n    icon_position = 'right',\n    icon = 'chevron_right',\n    children = sharedContext?.translation.Forms.stepNext,\n  } = props\n  const stepsContext = useContext(StepsContext)\n\n  return (\n    <ButtonRow>\n      <Button\n        {...props}\n        className={classnames('dnb-forms-next-button', className)}\n        onClick={stepsContext?.handleNext}\n        variant={variant}\n        icon_position={icon_position}\n        icon={icon}\n      >\n        {children}\n      </Button>\n    </ButtonRow>\n  )\n}\n\nNextButton._supportsSpacingProps = true\nexport default NextButton\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,SAAS,MAAM,sBAAsB;AAO5C,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAMC,aAAa,GAAGR,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAM;IACJM,SAAS;IACTC,OAAO,GAAG,SAAS;IACnBC,aAAa,GAAG,OAAO;IACvBC,IAAI,GAAG,eAAe;IACtBC,QAAQ,GAAGL,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEM,WAAW,CAACC,KAAK,CAACC;EAC9C,CAAC,GAAGT,KAAK;EACT,MAAMU,YAAY,GAAGjB,UAAU,CAACI,YAAY,CAAC;EAE7C,OACEL,KAAA,CAAAmB,aAAA,CAACb,SAAS,QACRN,KAAA,CAAAmB,aAAA,CAAChB,MAAM,EAAAiB,QAAA,KACDZ,KAAK;IACTE,SAAS,EAAER,UAAU,CAAC,uBAAuB,EAAEQ,SAAS,CAAE;IAC1DW,OAAO,EAAEH,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEI,UAAW;IAClCX,OAAO,EAAEA,OAAQ;IACjBC,aAAa,EAAEA,aAAc;IAC7BC,IAAI,EAAEA;EAAK,IAEVC,QACK,CACC,CAAC;AAEhB;AAEAP,UAAU,CAACgB,qBAAqB,GAAG,IAAI;AACvC,eAAehB,UAAU"}
+{"version":3,"file":"NextButton.js","names":["React","useContext","classnames","SharedContext","StepsContext","ButtonRow","SubmitButton","NextButton","props","sharedContext","className","variant","icon_position","icon","children","translation","Forms","stepNext","stepsContext","createElement","_extends","type","onClick","handleNext","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/StepsLayout/NextButton/NextButton.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../../types'\nimport { ButtonProps } from '../../../../components/button/Button'\nimport SharedContext from '../../../../shared/Context'\nimport StepsContext from '../StepsContext'\nimport ButtonRow from '../../Form/ButtonRow'\nimport SubmitButton from '../../Form/SubmitButton'\n\nexport type Props = ComponentProps & ButtonProps\n\nfunction NextButton(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    className,\n    variant = 'primary',\n    icon_position = 'right',\n    icon = 'chevron_right',\n    children = sharedContext?.translation.Forms.stepNext,\n  } = props\n  const stepsContext = useContext(StepsContext)\n\n  return (\n    <ButtonRow>\n      {/* Use SubmitButton to inherit the indicator functionality */}\n      <SubmitButton\n        type=\"button\"\n        className={classnames('dnb-forms-next-button', className)}\n        onClick={stepsContext?.handleNext}\n        variant={variant}\n        icon_position={icon_position}\n        icon={icon}\n        {...props}\n      >\n        {children}\n      </SubmitButton>\n    </ButtonRow>\n  )\n}\n\nNextButton._supportsSpacingProps = true\nexport default NextButton\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AAGnC,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,SAAS,MAAM,sBAAsB;AAC5C,OAAOC,YAAY,MAAM,yBAAyB;AAIlD,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAMC,aAAa,GAAGR,UAAU,CAACE,aAAa,CAAC;EAC/C,MAAM;IACJO,SAAS;IACTC,OAAO,GAAG,SAAS;IACnBC,aAAa,GAAG,OAAO;IACvBC,IAAI,GAAG,eAAe;IACtBC,QAAQ,GAAGL,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEM,WAAW,CAACC,KAAK,CAACC;EAC9C,CAAC,GAAGT,KAAK;EACT,MAAMU,YAAY,GAAGjB,UAAU,CAACG,YAAY,CAAC;EAE7C,OACEJ,KAAA,CAAAmB,aAAA,CAACd,SAAS,QAERL,KAAA,CAAAmB,aAAA,CAACb,YAAY,EAAAc,QAAA;IACXC,IAAI,EAAC,QAAQ;IACbX,SAAS,EAAER,UAAU,CAAC,uBAAuB,EAAEQ,SAAS,CAAE;IAC1DY,OAAO,EAAEJ,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEK,UAAW;IAClCZ,OAAO,EAAEA,OAAQ;IACjBC,aAAa,EAAEA,aAAc;IAC7BC,IAAI,EAAEA;EAAK,GACPL,KAAK,GAERM,QACW,CACL,CAAC;AAEhB;AAEAP,UAAU,CAACiB,qBAAqB,GAAG,IAAI;AACvC,eAAejB,UAAU"}

package/es/extensions/forms/StepsLayout/PreviousButton/PreviousButton.d.ts

@@ -1,8 +1,6 @@
 import type { ComponentProps } from '../../types';
 import { ButtonProps } from '../../../../components/button/Button';
-export type Props = ComponentProps & ButtonProps & {
-    children?: string;
-};
+export type Props = ComponentProps & ButtonProps;
 declare function PreviousButton(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace PreviousButton {
     var _supportsSpacingProps: boolean;

package/es/extensions/forms/StepsLayout/PreviousButton/PreviousButton.js

@@ -17,13 +17,17 @@ function PreviousButton(props) {
     children = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.stepPrevious
   } = props;
   const stepsContext = useContext(StepsContext);
-  return React.createElement(ButtonRow, null, React.createElement(Button, _extends({}, props, {
+  const params = {};
+  if ((stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.activeIndex) === 0) {
+    params.disabled = true;
+  }
+  return React.createElement(ButtonRow, null, React.createElement(Button, _extends({
     className: classnames('dnb-forms-previous-button', className),
     onClick: stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.handlePrevious,
     variant: variant,
     icon_position: icon_position,
     icon: icon
-  }), children));
+  }, params, props), children));
 }
 PreviousButton._supportsSpacingProps = true;
 export default PreviousButton;

package/es/extensions/forms/StepsLayout/PreviousButton/PreviousButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviousButton.js","names":["React","useContext","classnames","Button","SharedContext","StepsContext","ButtonRow","PreviousButton","props","sharedContext","className","variant","icon_position","icon","children","translation","Forms","stepPrevious","stepsContext","createElement","_extends","onClick","handlePrevious","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/StepsLayout/PreviousButton/PreviousButton.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../../types'\nimport { Button } from '../../../../components'\nimport { ButtonProps } from '../../../../components/button/Button'\nimport SharedContext from '../../../../shared/Context'\nimport StepsContext from '../StepsContext'\nimport ButtonRow from '../../Form/ButtonRow'\n\nexport type Props = ComponentProps &\n  ButtonProps & {\n    children?: string\n  }\n\nfunction PreviousButton(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    className,\n    variant = 'tertiary',\n    icon_position = 'left',\n    icon = 'chevron_left',\n    children = sharedContext?.translation.Forms.stepPrevious,\n  } = props\n  const stepsContext = useContext(StepsContext)\n\n  return (\n    <ButtonRow>\n      <Button\n        {...props}\n        className={classnames('dnb-forms-previous-button', className)}\n        onClick={stepsContext?.handlePrevious}\n        variant={variant}\n        icon_position={icon_position}\n        icon={icon}\n      >\n        {children}\n      </Button>\n    </ButtonRow>\n  )\n}\n\nPreviousButton._supportsSpacingProps = true\nexport default PreviousButton\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,SAAS,MAAM,sBAAsB;AAO5C,SAASC,cAAcA,CAACC,KAAY,EAAE;EACpC,MAAMC,aAAa,GAAGR,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAM;IACJM,SAAS;IACTC,OAAO,GAAG,UAAU;IACpBC,aAAa,GAAG,MAAM;IACtBC,IAAI,GAAG,cAAc;IACrBC,QAAQ,GAAGL,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEM,WAAW,CAACC,KAAK,CAACC;EAC9C,CAAC,GAAGT,KAAK;EACT,MAAMU,YAAY,GAAGjB,UAAU,CAACI,YAAY,CAAC;EAE7C,OACEL,KAAA,CAAAmB,aAAA,CAACb,SAAS,QACRN,KAAA,CAAAmB,aAAA,CAAChB,MAAM,EAAAiB,QAAA,KACDZ,KAAK;IACTE,SAAS,EAAER,UAAU,CAAC,2BAA2B,EAAEQ,SAAS,CAAE;IAC9DW,OAAO,EAAEH,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEI,cAAe;IACtCX,OAAO,EAAEA,OAAQ;IACjBC,aAAa,EAAEA,aAAc;IAC7BC,IAAI,EAAEA;EAAK,IAEVC,QACK,CACC,CAAC;AAEhB;AAEAP,cAAc,CAACgB,qBAAqB,GAAG,IAAI;AAC3C,eAAehB,cAAc"}
+{"version":3,"file":"PreviousButton.js","names":["React","useContext","classnames","Button","SharedContext","StepsContext","ButtonRow","PreviousButton","props","sharedContext","className","variant","icon_position","icon","children","translation","Forms","stepPrevious","stepsContext","params","activeIndex","disabled","createElement","_extends","onClick","handlePrevious","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/StepsLayout/PreviousButton/PreviousButton.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../../types'\nimport { Button } from '../../../../components'\nimport { ButtonProps } from '../../../../components/button/Button'\nimport SharedContext from '../../../../shared/Context'\nimport StepsContext from '../StepsContext'\nimport ButtonRow from '../../Form/ButtonRow'\n\nexport type Props = ComponentProps & ButtonProps\n\nfunction PreviousButton(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    className,\n    variant = 'tertiary',\n    icon_position = 'left',\n    icon = 'chevron_left',\n    children = sharedContext?.translation.Forms.stepPrevious,\n  } = props\n  const stepsContext = useContext(StepsContext)\n\n  const params: Props = {}\n  if (stepsContext?.activeIndex === 0) {\n    params.disabled = true\n  }\n\n  return (\n    <ButtonRow>\n      <Button\n        className={classnames('dnb-forms-previous-button', className)}\n        onClick={stepsContext?.handlePrevious}\n        variant={variant}\n        icon_position={icon_position}\n        icon={icon}\n        {...params}\n        {...props}\n      >\n        {children}\n      </Button>\n    </ButtonRow>\n  )\n}\n\nPreviousButton._supportsSpacingProps = true\nexport default PreviousButton\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,SAAS,MAAM,sBAAsB;AAI5C,SAASC,cAAcA,CAACC,KAAY,EAAE;EACpC,MAAMC,aAAa,GAAGR,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAM;IACJM,SAAS;IACTC,OAAO,GAAG,UAAU;IACpBC,aAAa,GAAG,MAAM;IACtBC,IAAI,GAAG,cAAc;IACrBC,QAAQ,GAAGL,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEM,WAAW,CAACC,KAAK,CAACC;EAC9C,CAAC,GAAGT,KAAK;EACT,MAAMU,YAAY,GAAGjB,UAAU,CAACI,YAAY,CAAC;EAE7C,MAAMc,MAAa,GAAG,CAAC,CAAC;EACxB,IAAI,CAAAD,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEE,WAAW,MAAK,CAAC,EAAE;IACnCD,MAAM,CAACE,QAAQ,GAAG,IAAI;EACxB;EAEA,OACErB,KAAA,CAAAsB,aAAA,CAAChB,SAAS,QACRN,KAAA,CAAAsB,aAAA,CAACnB,MAAM,EAAAoB,QAAA;IACLb,SAAS,EAAER,UAAU,CAAC,2BAA2B,EAAEQ,SAAS,CAAE;IAC9Dc,OAAO,EAAEN,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEO,cAAe;IACtCd,OAAO,EAAEA,OAAQ;IACjBC,aAAa,EAAEA,aAAc;IAC7BC,IAAI,EAAEA;EAAK,GACPM,MAAM,EACNX,KAAK,GAERM,QACK,CACC,CAAC;AAEhB;AAEAP,cAAc,CAACmB,qBAAqB,GAAG,IAAI;AAC3C,eAAenB,cAAc"}

package/es/extensions/forms/StepsLayout/Step/Step.js

@@ -16,9 +16,8 @@ function Step(props) {
   if ((stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.activeIndex) !== index) {
     return null;
   }
-  return React.createElement(Flex.Container, _extends({
-    className: classnames('dnb-forms-step', className),
-    direction: "vertical"
+  return React.createElement(Flex.Stack, _extends({
+    className: classnames('dnb-forms-step', className)
   }, pickFlexContainerProps(props)), children);
 }
 Step._supportsSpacingProps = true;

package/es/extensions/forms/StepsLayout/Step/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","names":["React","useContext","classnames","pickFlexContainerProps","StepsContext","Flex","Step","props","className","index","children","stepsContext","activeIndex","createElement","Container","_extends","direction","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/StepsLayout/Step/Step.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport { ComponentProps } from '../../types'\nimport {\n  Props as FlexContainerProps,\n  pickFlexContainerProps,\n} from '../../../../components/flex/Container'\nimport StepsContext from '../StepsContext'\nimport Flex from '../../../../components/flex/Flex'\n\nexport type Props = ComponentProps &\n  FlexContainerProps & {\n    index?: number\n    title?: string\n  }\n\nfunction Step(props: Props) {\n  const { className, index, children } = props\n  const stepsContext = useContext(StepsContext)\n\n  if (stepsContext?.activeIndex !== index) {\n    // Another step is active\n    return null\n  }\n\n  return (\n    <Flex.Container\n      className={classnames('dnb-forms-step', className)}\n      direction=\"vertical\"\n      {...pickFlexContainerProps(props)}\n    >\n      {children}\n    </Flex.Container>\n  )\n}\n\nStep._supportsSpacingProps = true\nexport default Step\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAEEC,sBAAsB,QACjB,uCAAuC;AAC9C,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,IAAI,MAAM,kCAAkC;AAQnD,SAASC,IAAIA,CAACC,KAAY,EAAE;EAC1B,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC;EAAS,CAAC,GAAGH,KAAK;EAC5C,MAAMI,YAAY,GAAGV,UAAU,CAACG,YAAY,CAAC;EAE7C,IAAI,CAAAO,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEC,WAAW,MAAKH,KAAK,EAAE;IAEvC,OAAO,IAAI;EACb;EAEA,OACET,KAAA,CAAAa,aAAA,CAACR,IAAI,CAACS,SAAS,EAAAC,QAAA;IACbP,SAAS,EAAEN,UAAU,CAAC,gBAAgB,EAAEM,SAAS,CAAE;IACnDQ,SAAS,EAAC;EAAU,GAChBb,sBAAsB,CAACI,KAAK,CAAC,GAEhCG,QACa,CAAC;AAErB;AAEAJ,IAAI,CAACW,qBAAqB,GAAG,IAAI;AACjC,eAAeX,IAAI"}
+{"version":3,"file":"Step.js","names":["React","useContext","classnames","pickFlexContainerProps","StepsContext","Flex","Step","props","className","index","children","stepsContext","activeIndex","createElement","Stack","_extends","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/StepsLayout/Step/Step.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport { ComponentProps } from '../../types'\nimport {\n  Props as FlexContainerProps,\n  pickFlexContainerProps,\n} from '../../../../components/flex/Container'\nimport StepsContext from '../StepsContext'\nimport Flex from '../../../../components/flex/Flex'\n\nexport type Props = ComponentProps &\n  FlexContainerProps & {\n    index?: number\n    title?: string\n  }\n\nfunction Step(props: Props) {\n  const { className, index, children } = props\n  const stepsContext = useContext(StepsContext)\n\n  if (stepsContext?.activeIndex !== index) {\n    // Another step is active\n    return null\n  }\n\n  return (\n    <Flex.Stack\n      className={classnames('dnb-forms-step', className)}\n      {...pickFlexContainerProps(props)}\n    >\n      {children}\n    </Flex.Stack>\n  )\n}\n\nStep._supportsSpacingProps = true\nexport default Step\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAEEC,sBAAsB,QACjB,uCAAuC;AAC9C,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,IAAI,MAAM,kCAAkC;AAQnD,SAASC,IAAIA,CAACC,KAAY,EAAE;EAC1B,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC;EAAS,CAAC,GAAGH,KAAK;EAC5C,MAAMI,YAAY,GAAGV,UAAU,CAACG,YAAY,CAAC;EAE7C,IAAI,CAAAO,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEC,WAAW,MAAKH,KAAK,EAAE;IAEvC,OAAO,IAAI;EACb;EAEA,OACET,KAAA,CAAAa,aAAA,CAACR,IAAI,CAACS,KAAK,EAAAC,QAAA;IACTP,SAAS,EAAEN,UAAU,CAAC,gBAAgB,EAAEM,SAAS;EAAE,GAC/CL,sBAAsB,CAACI,KAAK,CAAC,GAEhCG,QACS,CAAC;AAEjB;AAEAJ,IAAI,CAACU,qBAAqB,GAAG,IAAI;AACjC,eAAeV,IAAI"}

package/es/extensions/forms/StepsLayout/StepsContext.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
-interface StepsContextState {
-    activeIndex: number;
-    handlePrevious: () => void;
-    handleNext: () => void;
+export type StepIndex = number;
+export interface StepsContextState {
+    activeIndex?: StepIndex;
+    handlePrevious?: () => void;
+    handleNext?: () => void;
+    setActiveIndex?: (index: StepIndex) => void;
 }
 declare const StepsContext: React.Context<StepsContextState>;
 export default StepsContext;

package/es/extensions/forms/StepsLayout/StepsContext.js

@@ -1,4 +1,9 @@
 import React from 'react';
-const StepsContext = React.createContext(undefined);
+const StepsContext = React.createContext({
+  activeIndex: 0,
+  setActiveIndex: () => null,
+  handlePrevious: () => null,
+  handleNext: () => null
+});
 export default StepsContext;
 //# sourceMappingURL=StepsContext.js.map

package/es/extensions/forms/StepsLayout/StepsContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepsContext.js","names":["React","StepsContext","createContext","undefined"],"sources":["../../../../../src/extensions/forms/StepsLayout/StepsContext.ts"],"sourcesContent":["import React from 'react'\n\ninterface StepsContextState {\n  activeIndex: number\n  handlePrevious: () => void\n  handleNext: () => void\n}\n\nconst StepsContext = React.createContext<StepsContextState | undefined>(\n  undefined\n)\n\nexport default StepsContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAQzB,MAAMC,YAAY,GAAGD,KAAK,CAACE,aAAa,CACtCC,SACF,CAAC;AAED,eAAeF,YAAY"}
+{"version":3,"file":"StepsContext.js","names":["React","StepsContext","createContext","activeIndex","setActiveIndex","handlePrevious","handleNext"],"sources":["../../../../../src/extensions/forms/StepsLayout/StepsContext.ts"],"sourcesContent":["import React from 'react'\n\nexport type StepIndex = number\nexport interface StepsContextState {\n  activeIndex?: StepIndex\n  handlePrevious?: () => void\n  handleNext?: () => void\n  setActiveIndex?: (index: StepIndex) => void\n}\n\nconst StepsContext = React.createContext<StepsContextState | undefined>({\n  activeIndex: 0,\n  setActiveIndex: () => null,\n  handlePrevious: () => null,\n  handleNext: () => null,\n})\n\nexport default StepsContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAUzB,MAAMC,YAAY,GAAGD,KAAK,CAACE,aAAa,CAAgC;EACtEC,WAAW,EAAE,CAAC;EACdC,cAAc,EAAEA,CAAA,KAAM,IAAI;EAC1BC,cAAc,EAAEA,CAAA,KAAM,IAAI;EAC1BC,UAAU,EAAEA,CAAA,KAAM;AACpB,CAAC,CAAC;AAEF,eAAeL,YAAY"}

package/es/extensions/forms/StepsLayout/StepsLayout.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import { ComponentProps } from '../types';
+import { StepIndex } from './StepsContext';
+import { ComponentProps, EventReturnWithStateObject } from '../types';
 export type Props = ComponentProps & {
     id?: string;
     mode?: 'static' | 'strict' | 'loose';
     scrollTopOnStepChange?: boolean;
-    initialActiveIndex?: number;
-    onStepChange?: (index: number) => void;
+    initialActiveIndex?: StepIndex;
+    onStepChange?: (index: StepIndex, mode: 'previous' | 'next') => EventReturnWithStateObject | void | Promise<EventReturnWithStateObject | void>;
     children: React.ReactNode;
     variant?: 'sidebar' | 'drawer';
     noAnimation?: boolean;
@@ -18,5 +19,6 @@ declare namespace StepsLayout {
     var NextButton: typeof import("./NextButton/NextButton").default;
     var PreviousButton: typeof import("./PreviousButton/PreviousButton").default;
     var Buttons: typeof import("./Buttons/Buttons").default;
+    var useStep: typeof import("./useStep").useStep;
 }
 export default StepsLayout;

package/es/extensions/forms/StepsLayout/StepsLayout.js

@@ -1,12 +1,17 @@
 "use client";
 
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["className", "id", "mode", "scrollTopOnStepChange", "initialActiveIndex", "onStepChange", "children", "noAnimation", "variant", "sidebarId"];
-import React, { useContext, useState, useCallback } from 'react';
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useContext, useCallback, useRef, useReducer, useMemo, useEffect } from 'react';
 import classnames from 'classnames';
 import { Space, StepIndicator } from '../../../components';
 import { warn } from '../../../shared/component-helper';
+import { isAsync } from '../../../shared/helpers/isAsync';
+import useId from '../../../shared/helpers/useId';
 import DataContext from '../DataContext/Context';
 import Step from './Step';
 import StepsContext from './StepsContext';
@@ -14,7 +19,8 @@ import NextButton from './NextButton';
 import PreviousButton from './PreviousButton';
 import Buttons from './Buttons';
 import Provider from '../DataContext/Provider';
-import useId from '../hooks/useId';
+import { useSharedState } from '../../../shared/helpers/useSharedState';
+import { useStep } from './useStep';
 function StepsLayout(props) {
   const {
       className,
@@ -29,61 +35,120 @@ function StepsLayout(props) {
       sidebarId
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
-  const dataContext = useContext(DataContext);
   const {
     hasContext,
-    hasErrors,
+    setFormState,
+    handleSubmitCall,
     setShowAllErrors,
+    showAllErrors,
     scrollToTop
-  } = dataContext;
-  const [activeIndex, setActiveIndex] = useState(initialActiveIndex);
+  } = useContext(DataContext);
   const id = useId(_id);
-  const handlePrevious = useCallback(() => {
-    setActiveIndex(activeIndex => {
-      onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(activeIndex - 1);
-      return activeIndex - 1;
-    });
-    if (scrollTopOnStepChange) {
-      scrollToTop();
+  const [, forceUpdate] = useReducer(() => ({}), {});
+  const activeIndexRef = useRef(initialActiveIndex);
+  const errorOnStepRef = useRef({});
+  errorOnStepRef.current[activeIndexRef.current] = showAllErrors;
+  const callOnStepChange = useCallback(async (index, mode) => {
+    if (isAsync(onStepChange)) {
+      return await onStepChange(index, mode);
     }
-  }, [scrollTopOnStepChange, onStepChange, scrollToTop]);
-  const handleNext = useCallback(() => {
-    if (!hasErrors()) {
-      setActiveIndex(activeIndex => {
-        onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(activeIndex + 1);
-        return activeIndex + 1;
-      });
-      if (scrollTopOnStepChange) {
-        scrollToTop();
+    return onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(index, mode);
+  }, [onStepChange]);
+  const handleStepChange = useCallback(({
+    index,
+    skipErrorCheck,
+    mode
+  }) => {
+    handleSubmitCall({
+      skipErrorCheck,
+      skipFieldValidation: skipErrorCheck,
+      enableAsyncBehaviour: isAsync(onStepChange),
+      onSubmit: async () => {
+        const result = await callOnStepChange(index, mode);
+        setFormState('abort');
+        if (!skipErrorCheck) {
+          setShowAllErrors(errorOnStepRef.current[index]);
+        }
+        if (!(result instanceof Error)) {
+          activeIndexRef.current = index;
+          forceUpdate();
+        }
+        if (scrollTopOnStepChange) {
+          scrollToTop();
+        }
+        return result;
       }
-    } else {
-      setShowAllErrors(true);
-    }
-  }, [hasErrors, scrollTopOnStepChange, onStepChange, scrollToTop, setShowAllErrors]);
-  const stepIndicatorData = React.Children.map(children, child => {
-    var _child$props$title;
-    if (!React.isValidElement(child) || child.type !== Step) {
-      throw new Error('Only Step can be children of StepsLayout');
+    });
+  }, [callOnStepChange, handleSubmitCall, onStepChange, scrollToTop, scrollTopOnStepChange, setFormState, setShowAllErrors]);
+  const setActiveIndex = useCallback((index, options) => {
+    if (index === activeIndexRef.current) {
+      return;
     }
-    return (_child$props$title = child.props.title) !== null && _child$props$title !== void 0 ? _child$props$title : 'Title missing';
-  });
+    const mode = index > activeIndexRef.current ? 'next' : 'previous';
+    handleStepChange(_objectSpread({
+      index,
+      skipErrorCheck: mode === 'previous',
+      mode
+    }, options));
+  }, [handleStepChange]);
+  const handlePrevious = useCallback(() => {
+    setActiveIndex(activeIndexRef.current - 1);
+  }, [setActiveIndex]);
+  const handleNext = useCallback(() => {
+    setActiveIndex(activeIndexRef.current + 1);
+  }, [setActiveIndex]);
   const handleChange = useCallback(({
     current_step
   }) => {
-    setActiveIndex(current_step);
-  }, []);
+    setActiveIndex(current_step, {
+      skipErrorCheck: true
+    });
+  }, [setActiveIndex]);
+  const providerValue = useMemo(() => ({
+    activeIndex: activeIndexRef.current,
+    setActiveIndex,
+    handlePrevious,
+    handleNext
+  }), [activeIndexRef.current, setActiveIndex, handlePrevious, handleNext]);
+  const sharedState = useSharedState(hasContext && id ? id + '-steps' : undefined);
+  const {
+    extend
+  } = sharedState;
+  useEffect(() => {
+    if (hasContext && id) {
+      extend(providerValue);
+    }
+  }, [id, extend, providerValue]);
   if (!hasContext) {
     warn('You may wrap StepsLayout in Form.Handler');
     return React.createElement(Provider, null, React.createElement(StepsLayout, _extends({}, props, {
       id: id
     })));
   }
-  return React.createElement(StepsContext.Provider, {
-    value: {
-      activeIndex,
-      handlePrevious,
-      handleNext
+  const titles = [];
+  const contents = React.Children.map(children, (child, i) => {
+    if (React.isValidElement(child)) {
+      var _child, _child2;
+      let step = child;
+      if (((_child = child) === null || _child === void 0 ? void 0 : _child.type) !== Step && typeof child.type === 'function') {
+        var _step;
+        step = child.type.apply(child.type, [child.props]);
+        if (((_step = step) === null || _step === void 0 ? void 0 : _step.type) === Step) {
+          child = step;
+        }
+      }
+      if (((_child2 = child) === null || _child2 === void 0 ? void 0 : _child2.type) === Step) {
+        var _child$props$title;
+        titles.push((_child$props$title = child.props.title) !== null && _child$props$title !== void 0 ? _child$props$title : 'Title missing');
+        return React.cloneElement(child, {
+          index: i
+        });
+      }
     }
+    return child;
+  });
+  return React.createElement(StepsContext.Provider, {
+    value: providerValue
   }, React.createElement(Space, _extends({
     className: classnames('dnb-forms-steps-layout', className, variant === 'drawer' && 'dnb-forms-steps-layout--drawer')
   }, rest), React.createElement("aside", {
@@ -92,27 +157,21 @@ function StepsLayout(props) {
     sidebar_id: id
   }), React.createElement(StepIndicator, {
     bottom: true,
-    current_step: activeIndex,
-    data: stepIndicatorData,
+    current_step: activeIndexRef.current,
+    data: titles,
     mode: mode,
     no_animation: noAnimation,
     on_change: handleChange,
     sidebar_id: variant === 'drawer' && !sidebarId ? '' : sidebarId ? sidebarId : id
   })), React.createElement("div", {
     className: "dnb-forms-steps-layout__contents"
-  }, React.Children.map(children, (child, i) => {
-    if (React.isValidElement(child) && child.type === Step) {
-      return React.cloneElement(child, {
-        index: i
-      });
-    }
-    return child;
-  }))));
+  }, contents)));
 }
 StepsLayout._supportsSpacingProps = true;
 StepsLayout.Step = Step;
 StepsLayout.NextButton = NextButton;
 StepsLayout.PreviousButton = PreviousButton;
 StepsLayout.Buttons = Buttons;
+StepsLayout.useStep = useStep;
 export default StepsLayout;
 //# sourceMappingURL=StepsLayout.js.map

package/es/extensions/forms/StepsLayout/StepsLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepsLayout.js","names":["React","useContext","useState","useCallback","classnames","Space","StepIndicator","warn","DataContext","Step","StepsContext","NextButton","PreviousButton","Buttons","Provider","useId","StepsLayout","props","className","id","_id","mode","scrollTopOnStepChange","initialActiveIndex","onStepChange","children","noAnimation","variant","sidebarId","rest","_objectWithoutProperties","_excluded","dataContext","hasContext","hasErrors","setShowAllErrors","scrollToTop","activeIndex","setActiveIndex","handlePrevious","handleNext","stepIndicatorData","Children","map","child","_child$props$title","isValidElement","type","Error","title","handleChange","current_step","createElement","_extends","value","Sidebar","sidebar_id","bottom","data","no_animation","on_change","i","cloneElement","index","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/StepsLayout/StepsLayout.tsx"],"sourcesContent":["import React, { useContext, useState, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Space, StepIndicator } from '../../../components'\nimport { warn } from '../../../shared/component-helper'\nimport { ComponentProps } from '../types'\nimport DataContext from '../DataContext/Context'\nimport Step, { Props as StepProps } from './Step'\nimport StepsContext from './StepsContext'\nimport NextButton from './NextButton'\nimport PreviousButton from './PreviousButton'\nimport Buttons from './Buttons'\nimport Provider from '../DataContext/Provider'\nimport useId from '../hooks/useId'\n\nexport type Props = ComponentProps & {\n  id?: string\n  mode?: 'static' | 'strict' | 'loose'\n  scrollTopOnStepChange?: boolean\n  initialActiveIndex?: number\n  onStepChange?: (index: number) => void\n  children: React.ReactNode\n  variant?: 'sidebar' | 'drawer'\n  noAnimation?: boolean\n  sidebarId?: string\n}\n\nfunction StepsLayout(props: Props) {\n  const {\n    className,\n    id: _id,\n    mode = 'strict',\n    scrollTopOnStepChange,\n    initialActiveIndex = 0,\n    onStepChange,\n    children,\n    noAnimation = true,\n    variant = 'sidebar',\n    sidebarId,\n    ...rest\n  } = props\n  const dataContext = useContext(DataContext)\n  const { hasContext, hasErrors, setShowAllErrors, scrollToTop } =\n    dataContext\n\n  const [activeIndex, setActiveIndex] =\n    useState<number>(initialActiveIndex)\n\n  const id = useId(_id)\n\n  const handlePrevious = useCallback(() => {\n    setActiveIndex((activeIndex) => {\n      onStepChange?.(activeIndex - 1)\n      return activeIndex - 1\n    })\n    if (scrollTopOnStepChange) {\n      scrollToTop()\n    }\n  }, [scrollTopOnStepChange, onStepChange, scrollToTop])\n\n  const handleNext = useCallback(() => {\n    if (!hasErrors()) {\n      setActiveIndex((activeIndex) => {\n        onStepChange?.(activeIndex + 1)\n        return activeIndex + 1\n      })\n      if (scrollTopOnStepChange) {\n        scrollToTop()\n      }\n    } else {\n      setShowAllErrors(true)\n    }\n  }, [\n    hasErrors,\n    scrollTopOnStepChange,\n    onStepChange,\n    scrollToTop,\n    setShowAllErrors,\n  ])\n\n  const stepIndicatorData = React.Children.map(children, (child) => {\n    if (!React.isValidElement(child) || child.type !== Step) {\n      throw new Error('Only Step can be children of StepsLayout')\n    }\n    return child.props.title ?? 'Title missing'\n  }) as string[]\n\n  const handleChange = useCallback(({ current_step }) => {\n    setActiveIndex(current_step)\n  }, [])\n\n  if (!hasContext) {\n    warn('You may wrap StepsLayout in Form.Handler')\n    return (\n      <Provider>\n        <StepsLayout {...props} id={id} />\n      </Provider>\n    )\n  }\n\n  return (\n    <StepsContext.Provider\n      value={{\n        activeIndex,\n        handlePrevious,\n        handleNext,\n      }}\n    >\n      <Space\n        className={classnames(\n          'dnb-forms-steps-layout',\n          variant === 'drawer' && 'dnb-forms-steps-layout--drawer',\n          className\n        )}\n        {...rest}\n      >\n        <aside className=\"dnb-forms-steps-layout__sidebar\">\n          <StepIndicator.Sidebar sidebar_id={id} />\n          <StepIndicator\n            bottom\n            current_step={activeIndex}\n            data={stepIndicatorData}\n            mode={mode}\n            no_animation={noAnimation}\n            on_change={handleChange}\n            sidebar_id={\n              variant === 'drawer' && !sidebarId\n                ? ''\n                : sidebarId\n                ? sidebarId\n                : id\n            }\n          />\n        </aside>\n        <div className=\"dnb-forms-steps-layout__contents\">\n          {React.Children.map(children, (child, i) => {\n            if (React.isValidElement(child) && child.type === Step) {\n              return React.cloneElement(\n                child as React.ReactElement<StepProps>,\n                {\n                  index: i,\n                }\n              )\n            }\n            return child\n          })}\n        </div>\n      </Space>\n    </StepsContext.Provider>\n  )\n}\n\nStepsLayout._supportsSpacingProps = true\n\nStepsLayout.Step = Step\nStepsLayout.NextButton = NextButton\nStepsLayout.PreviousButton = PreviousButton\nStepsLayout.Buttons = Buttons\n\nexport default StepsLayout\n"],"mappings":"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"}
+{"version":3,"file":"StepsLayout.js","names":["React","useContext","useCallback","useRef","useReducer","useMemo","useEffect","classnames","Space","StepIndicator","warn","isAsync","useId","DataContext","Step","StepsContext","NextButton","PreviousButton","Buttons","Provider","useSharedState","useStep","StepsLayout","props","className","id","_id","mode","scrollTopOnStepChange","initialActiveIndex","onStepChange","children","noAnimation","variant","sidebarId","rest","_objectWithoutProperties","_excluded","hasContext","setFormState","handleSubmitCall","setShowAllErrors","showAllErrors","scrollToTop","forceUpdate","activeIndexRef","errorOnStepRef","current","callOnStepChange","index","handleStepChange","skipErrorCheck","skipFieldValidation","enableAsyncBehaviour","onSubmit","result","Error","setActiveIndex","options","_objectSpread","handlePrevious","handleNext","handleChange","current_step","providerValue","activeIndex","sharedState","undefined","extend","createElement","_extends","titles","contents","Children","map","child","i","isValidElement","_child","_child2","step","type","_step","apply","_child$props$title","push","title","cloneElement","value","Sidebar","sidebar_id","bottom","data","no_animation","on_change","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/StepsLayout/StepsLayout.tsx"],"sourcesContent":["import React, {\n  useContext,\n  useCallback,\n  useRef,\n  useReducer,\n  useMemo,\n  useEffect,\n} from 'react'\nimport classnames from 'classnames'\nimport { Space, StepIndicator } from '../../../components'\nimport { warn } from '../../../shared/component-helper'\nimport { isAsync } from '../../../shared/helpers/isAsync'\nimport useId from '../../../shared/helpers/useId'\nimport DataContext from '../DataContext/Context'\nimport Step, { Props as StepProps } from './Step'\nimport StepsContext, { StepIndex, StepsContextState } from './StepsContext'\nimport NextButton from './NextButton'\nimport PreviousButton from './PreviousButton'\nimport Buttons from './Buttons'\nimport Provider from '../DataContext/Provider'\nimport { useSharedState } from '../../../shared/helpers/useSharedState'\nimport { useStep } from './useStep'\nimport { ComponentProps, EventReturnWithStateObject } from '../types'\n\nexport type Props = ComponentProps & {\n  id?: string\n  mode?: 'static' | 'strict' | 'loose'\n  scrollTopOnStepChange?: boolean\n  initialActiveIndex?: StepIndex\n  onStepChange?: (\n    index: StepIndex,\n    mode: 'previous' | 'next'\n  ) =>\n    | EventReturnWithStateObject\n    | void\n    | Promise<EventReturnWithStateObject | void>\n  children: React.ReactNode\n  variant?: 'sidebar' | 'drawer'\n  noAnimation?: boolean\n  sidebarId?: string\n}\n\nfunction StepsLayout(props: Props) {\n  const {\n    className,\n    id: _id,\n    mode = 'strict',\n    scrollTopOnStepChange,\n    initialActiveIndex = 0,\n    onStepChange,\n    children,\n    noAnimation = true,\n    variant = 'sidebar',\n    sidebarId,\n    ...rest\n  } = props\n\n  const {\n    hasContext,\n    setFormState,\n    handleSubmitCall,\n    setShowAllErrors,\n    showAllErrors,\n    scrollToTop,\n  } = useContext(DataContext)\n\n  const id = useId(_id)\n  const [, forceUpdate] = useReducer(() => ({}), {})\n  const activeIndexRef = useRef<StepIndex>(initialActiveIndex)\n  const errorOnStepRef = useRef<Record<StepIndex, boolean>>({})\n\n  // Store the current state of showAllErrors\n  errorOnStepRef.current[activeIndexRef.current] = showAllErrors\n\n  const callOnStepChange = useCallback(\n    async (index: StepIndex, mode: 'previous' | 'next') => {\n      if (isAsync(onStepChange)) {\n        return await onStepChange(index, mode)\n      }\n\n      return onStepChange?.(index, mode)\n    },\n    [onStepChange]\n  )\n\n  const handleStepChange = useCallback(\n    ({\n      index,\n      skipErrorCheck,\n      mode,\n    }: {\n      index: StepIndex\n      skipErrorCheck: boolean\n      mode: 'previous' | 'next'\n    }) => {\n      handleSubmitCall({\n        skipErrorCheck,\n        skipFieldValidation: skipErrorCheck,\n        enableAsyncBehaviour: isAsync(onStepChange),\n        onSubmit: async () => {\n          const result = await callOnStepChange(index, mode)\n\n          // Hide async indicator\n          setFormState('abort')\n\n          if (!skipErrorCheck) {\n            // Set the showAllErrors to the step we got to\n            setShowAllErrors(errorOnStepRef.current[index])\n          }\n\n          if (!(result instanceof Error)) {\n            activeIndexRef.current = index\n            forceUpdate()\n          }\n\n          if (scrollTopOnStepChange) {\n            scrollToTop()\n          }\n\n          return result\n        },\n      })\n    },\n    [\n      callOnStepChange,\n      handleSubmitCall,\n      onStepChange,\n      scrollToTop,\n      scrollTopOnStepChange,\n      setFormState,\n      setShowAllErrors,\n    ]\n  )\n\n  const setActiveIndex = useCallback(\n    (index: StepIndex, options?: { skipErrorCheck: boolean }) => {\n      if (index === activeIndexRef.current) {\n        return\n      }\n\n      const mode = index > activeIndexRef.current ? 'next' : 'previous'\n\n      handleStepChange({\n        index,\n        skipErrorCheck: mode === 'previous',\n        mode,\n        ...options,\n      })\n    },\n    [handleStepChange]\n  )\n\n  const handlePrevious = useCallback(() => {\n    setActiveIndex(activeIndexRef.current - 1)\n  }, [setActiveIndex])\n\n  const handleNext = useCallback(() => {\n    setActiveIndex(activeIndexRef.current + 1)\n  }, [setActiveIndex])\n\n  const handleChange = useCallback(\n    ({ current_step }) => {\n      setActiveIndex(current_step, { skipErrorCheck: true })\n    },\n    [setActiveIndex]\n  )\n\n  const providerValue = useMemo(\n    () => ({\n      activeIndex: activeIndexRef.current,\n      setActiveIndex,\n      handlePrevious,\n      handleNext,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [activeIndexRef.current, setActiveIndex, handlePrevious, handleNext]\n  )\n\n  // - Handle shared state\n  const sharedState = useSharedState<StepsContextState>(\n    hasContext && id ? id + '-steps' : undefined\n  )\n  const { extend } = sharedState\n  useEffect(() => {\n    if (hasContext && id) {\n      extend(providerValue)\n    }\n  }, [id, extend, providerValue]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  if (!hasContext) {\n    warn('You may wrap StepsLayout in Form.Handler')\n    return (\n      <Provider>\n        <StepsLayout {...props} id={id} />\n      </Provider>\n    )\n  }\n\n  const titles = []\n  const contents = React.Children.map(children, (child, i) => {\n    if (React.isValidElement(child)) {\n      let step = child\n\n      if (child?.type !== Step && typeof child.type === 'function') {\n        step = child.type.apply(child.type, [\n          child.props,\n        ]) as React.ReactElement\n\n        if (step?.type === Step) {\n          child = step\n        }\n      }\n\n      if (child?.type === Step) {\n        titles.push(child.props.title ?? 'Title missing')\n        return React.cloneElement(child as React.ReactElement<StepProps>, {\n          index: i,\n        })\n      }\n    }\n\n    return child\n  })\n\n  return (\n    <StepsContext.Provider value={providerValue}>\n      <Space\n        className={classnames(\n          'dnb-forms-steps-layout',\n          variant === 'drawer' && 'dnb-forms-steps-layout--drawer',\n          className\n        )}\n        {...rest}\n      >\n        <aside className=\"dnb-forms-steps-layout__sidebar\">\n          <StepIndicator.Sidebar sidebar_id={id} />\n          <StepIndicator\n            bottom\n            current_step={activeIndexRef.current}\n            data={titles}\n            mode={mode}\n            no_animation={noAnimation}\n            on_change={handleChange}\n            sidebar_id={\n              variant === 'drawer' && !sidebarId\n                ? ''\n                : sidebarId\n                ? sidebarId\n                : id\n            }\n          />\n        </aside>\n\n        <div className=\"dnb-forms-steps-layout__contents\">{contents}</div>\n      </Space>\n    </StepsContext.Provider>\n  )\n}\n\nStepsLayout._supportsSpacingProps = true\n\nStepsLayout.Step = Step\nStepsLayout.NextButton = NextButton\nStepsLayout.PreviousButton = PreviousButton\nStepsLayout.Buttons = Buttons\nStepsLayout.useStep = useStep\n\nexport default StepsLayout\n"],"mappings":"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"}

package/es/extensions/forms/StepsLayout/StepsLayoutDocs.d.ts

@@ -0,0 +1,3 @@
+import { PropertiesTableProps } from '../../../shared/types';
+export declare const StepsLayoutProperties: PropertiesTableProps;
+export declare const StepsLayoutEvents: PropertiesTableProps;

package/es/extensions/forms/StepsLayout/StepsLayoutDocs.js

@@ -0,0 +1,50 @@
+export const StepsLayoutProperties = {
+  initialActiveIndex: {
+    doc: 'What step should show initially (defaults to 0 for the first one).',
+    type: 'number',
+    status: 'optional'
+  },
+  mode: {
+    doc: 'How to show the steps. Inherited from StepIndicator. Defaults to `strict`.',
+    type: 'string',
+    status: 'optional'
+  },
+  variant: {
+    doc: 'Sets the StepIndicator to be either `sidebar` or `drawer`. Defaults to `sidebar`.',
+    type: 'string',
+    status: 'optional'
+  },
+  noAnimation: {
+    doc: 'Determines if the height animation for step items and the drawer button will run. Inherited from StepIndicator. Defaults to `true`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  sidebarId: {
+    doc: 'Sets the id for `<StepIndicator.Sidebar />` Inherited from StepIndicator.',
+    type: 'string',
+    status: 'required'
+  },
+  scrollTopOnStepChange: {
+    doc: 'True for the UI to scroll to the top of the page when navigating between steps.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  children: {
+    doc: 'Contents (Step components).',
+    type: 'React.Node',
+    status: 'required'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+export const StepsLayoutEvents = {
+  onStepChange: {
+    doc: 'Will be called when the user navigate to a different step, with step `index` as the first argument and `previous` or `next` (string) as the second argument. When an async function is provided, it will show an indicator on the submit button during the form submission. All form elements will be disabled during the submit. The indicator will be shown for minimum 1 second. Related Form.Handler props: `minimumAsyncBehaviorTime` and `asyncBehaviorTimeout`.',
+    type: 'function',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=StepsLayoutDocs.js.map

package/es/extensions/forms/StepsLayout/StepsLayoutDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepsLayoutDocs.js","names":["StepsLayoutProperties","initialActiveIndex","doc","type","status","mode","variant","noAnimation","sidebarId","scrollTopOnStepChange","children","StepsLayoutEvents","onStepChange"],"sources":["../../../../../src/extensions/forms/StepsLayout/StepsLayoutDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../shared/types'\n\nexport const StepsLayoutProperties: PropertiesTableProps = {\n  initialActiveIndex: {\n    doc: 'What step should show initially (defaults to 0 for the first one).',\n    type: 'number',\n    status: 'optional',\n  },\n  mode: {\n    doc: 'How to show the steps. Inherited from StepIndicator. Defaults to `strict`.',\n    type: 'string',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Sets the StepIndicator to be either `sidebar` or `drawer`. Defaults to `sidebar`.',\n    type: 'string',\n    status: 'optional',\n  },\n  noAnimation: {\n    doc: 'Determines if the height animation for step items and the drawer button will run. Inherited from StepIndicator. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  sidebarId: {\n    doc: 'Sets the id for `<StepIndicator.Sidebar />` Inherited from StepIndicator.',\n    type: 'string',\n    status: 'required',\n  },\n  scrollTopOnStepChange: {\n    doc: 'True for the UI to scroll to the top of the page when navigating between steps.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents (Step components).',\n    type: 'React.Node',\n    status: 'required',\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}\n\nexport const StepsLayoutEvents: PropertiesTableProps = {\n  onStepChange: {\n    doc: 'Will be called when the user navigate to a different step, with step `index` as the first argument and `previous` or `next` (string) as the second argument. When an async function is provided, it will show an indicator on the submit button during the form submission. All form elements will be disabled during the submit. The indicator will be shown for minimum 1 second. Related Form.Handler props: `minimumAsyncBehaviorTime` and `asyncBehaviorTimeout`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,qBAA2C,GAAG;EACzDC,kBAAkB,EAAE;IAClBC,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,4EAA4E;IACjFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,OAAO,EAAE;IACPJ,GAAG,EAAE,mFAAmF;IACxFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,WAAW,EAAE;IACXL,GAAG,EAAE,qIAAqI;IAC1IC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDI,SAAS,EAAE;IACTN,GAAG,EAAE,2EAA2E;IAChFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,qBAAqB,EAAE;IACrBP,GAAG,EAAE,iFAAiF;IACtFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,6BAA6B;IAClCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMO,iBAAuC,GAAG;EACrDC,YAAY,EAAE;IACZV,GAAG,EAAE,wcAAwc;IAC7cC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}

package/es/extensions/forms/StepsLayout/style/dnb-steps-layout.css

@@ -17,11 +17,16 @@
   margin-bottom: 2rem;
 }
 .dnb-forms-steps-layout__contents {
-  flex: 1 0 25rem;
+  flex: 1 0 auto;
 }
 .dnb-forms-steps-layout__contents .dnb-card {
   --border-color: var(--color-pistachio);
 }
+@media screen and (min-width: 40em) {
+  .dnb-forms-steps-layout + .dnb-form-status:not([class*=space__left]), .dnb-forms-steps-layout + .dnb-form-status + .dnb-form-status:not([class*=space__left]) {
+    margin-left: var(--spacing-medium);
+  }
+}
 @media screen and (max-width: 60em) {
   .dnb-forms-steps-layout {
     flex-direction: column;

package/es/extensions/forms/StepsLayout/style/dnb-steps-layout.min.css

@@ -1 +1 @@
-.dnb-forms-steps-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-steps-layout--drawer{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-steps-layout__sidebar{flex:0;margin-bottom:2rem}.dnb-forms-steps-layout__contents{flex:1 0 25rem}.dnb-forms-steps-layout__contents .dnb-card{--border-color:var(--color-pistachio)}@media screen and (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-steps-layout__contents{flex-basis:auto}}.dnb-forms-steps-layout .dnb-step-indicator__sidebar{margin-right:0}
+.dnb-forms-steps-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-steps-layout--drawer{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-steps-layout__sidebar{flex:0;margin-bottom:2rem}.dnb-forms-steps-layout__contents{flex:1 0 auto}.dnb-forms-steps-layout__contents .dnb-card{--border-color:var(--color-pistachio)}@media screen and (min-width:40em){.dnb-forms-steps-layout+.dnb-form-status+.dnb-form-status:not([class*=space__left]),.dnb-forms-steps-layout+.dnb-form-status:not([class*=space__left]){margin-left:var(--spacing-medium)}}@media screen and (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-steps-layout__contents{flex-basis:auto}}.dnb-forms-steps-layout .dnb-step-indicator__sidebar{margin-right:0}