@dnb/eufemia 10.23.0 → 10.24.0

package/extensions/forms/DataContext/Provider/ProviderDocs.js

@@ -57,17 +57,17 @@ export const ProviderProperties = {
 };
 export const ProviderEvents = {
   onChange: {
-    doc: "Will be called when a value of any input component inside was changed by the user, with the data set (including the changed value) as argument. When an async function is provided, it will show an indicator on the current label during a field change. Related props: `minimumAsyncBehaviorTime` and `asyncBehaviorTimeout`. You can return an error or an object with these keys `{ info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` in addition to { success: 'saved' } indicate the field was saved.",
+    doc: "Will be called when a value of a field was changed by the user, with the data set (including the changed value) as argument. When an async function is provided, it will show an indicator on the current label during a field change. Related props: `minimumAsyncBehaviorTime` and `asyncBehaviorTimeout`. You can return an error or an object with these keys `{ info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` in addition to { success: 'saved' } indicate the field was saved. Will emit unvalidated by default and validated when an async function is provided.",
     type: 'function',
     status: 'optional'
   },
   onPathChange: {
-    doc: 'Will be called when a value of any input component inside was changed by the user, with the `path` (JSON Pointer) and new `value` as arguments. Can be an async function.',
+    doc: 'Will be called when a value of a field was changed by the user, with the `path` (JSON Pointer) and new `value` as arguments. Can be an async function. Will emit unvalidated by default and validated when `onChange` is an async function.',
     type: 'function',
     status: 'optional'
   },
   onSubmit: {
-    doc: "Will be called when the user submit the form (i.e by clicking a [SubmitButton](/uilib/extensions/forms/extended-features/Form/SubmitButton) component inside), with the data set as 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 props: `minimumAsyncBehaviorTime` and `asyncBehaviorTimeout`. You can return an error or an object with these keys `{ status: 'pending', info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` to be shown in a [FormStatus](/uilib/components/form-status).",
+    doc: "Will be called (on validation success) when the user submit the form (i.e by clicking a [SubmitButton](/uilib/extensions/forms/extended-features/Form/SubmitButton) component inside), with the data set as 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 props: `minimumAsyncBehaviorTime` and `asyncBehaviorTimeout`. You can return an error or an object with these keys `{ status: 'pending', info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` to be shown in a [FormStatus](/uilib/components/form-status). Will only emit when every validation has passed.",
     type: 'function',
     status: 'optional'
   },

package/extensions/forms/DataContext/Provider/ProviderDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProviderDocs.js","names":["ProviderProperties","defaultData","doc","type","status","data","schema","errorMessages","minimumAsyncBehaviorTime","asyncBehaviorTimeout","scrollTopOnSubmit","sessionStorageId","ajvInstance","filterData","children","ProviderEvents","onChange","onPathChange","onSubmit","onSubmitRequest","onSubmitComplete"],"sources":["../../../../../../src/extensions/forms/DataContext/Provider/ProviderDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const ProviderProperties: PropertiesTableProps = {\n  defaultData: {\n    doc: 'Default source data, only used if no other source is available, and not leading to updates if changed after mount.',\n    type: 'object',\n    status: 'required',\n  },\n  data: {\n    doc: 'Dynamic source data used as both initial data, and updates internal data if changed after mount.',\n    type: 'object',\n    status: 'required',\n  },\n  schema: {\n    doc: 'JSON Schema for validation of the data set.',\n    type: 'object',\n    status: 'optional',\n  },\n  errorMessages: {\n    doc: 'Object containing error messages by either type of JSON Pointer path and type.',\n    type: 'object',\n    status: 'optional',\n  },\n  minimumAsyncBehaviorTime: {\n    doc: 'Minimum time to display the submit indicator. Default is 1s.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  asyncBehaviorTimeout: {\n    doc: 'The maximum time to display the submit indicator before it changes back to normal. In case something went wrong during submission. Default is 30s.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  scrollTopOnSubmit: {\n    doc: 'True for the UI to scroll to the top of the page when data is submitted.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  sessionStorageId: {\n    doc: 'Key for saving active data to session storage and loading it on mount.',\n    type: 'string',\n    status: 'optional',\n  },\n  ajvInstance: {\n    doc: 'Provide your own custom Ajv instance. More info in the <a href=\"/uilib/extensions/forms/extended-features/Form/schema-validation/#custom-ajv-instance-and-keywords\">Schema validation</a> section.',\n    type: 'ajv',\n    status: 'optional',\n  },\n  filterData: {\n    doc: 'Filter the internal data context based on your criteria: `(path, value, props) => !props?.disabled`. It will iterate on each data entry.',\n    type: 'function',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n}\n\nexport const ProviderEvents: PropertiesTableProps = {\n  onChange: {\n    doc: \"Will be called when a value of any input component inside was changed by the user, with the data set (including the changed value) as argument. When an async function is provided, it will show an indicator on the current label during a field change. Related props: `minimumAsyncBehaviorTime` and `asyncBehaviorTimeout`. You can return an error or an object with these keys `{ info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` in addition to { success: 'saved' } indicate the field was saved.\",\n    type: 'function',\n    status: 'optional',\n  },\n  onPathChange: {\n    doc: 'Will be called when a value of any input component inside was changed by the user, with the `path` (JSON Pointer) and new `value` as arguments. Can be an async function.',\n    type: 'function',\n    status: 'optional',\n  },\n  onSubmit: {\n    doc: \"Will be called when the user submit the form (i.e by clicking a [SubmitButton](/uilib/extensions/forms/extended-features/Form/SubmitButton) component inside), with the data set as 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 props: `minimumAsyncBehaviorTime` and `asyncBehaviorTimeout`. You can return an error or an object with these keys `{ status: 'pending', info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` to be shown in a [FormStatus](/uilib/components/form-status).\",\n    type: 'function',\n    status: 'optional',\n  },\n  onSubmitRequest: {\n    doc: 'Will be called when the user tries to submit, but errors stop the data from being submitted.',\n    type: 'function',\n    status: 'optional',\n  },\n  onSubmitComplete: {\n    doc: 'Will be called after onSubmit has finished and had not errors. It supports the same return values as `onSubmit` and will be merged together.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,kBAAwC,GAAG;EACtDC,WAAW,EAAE;IACXC,GAAG,EAAE,oHAAoH;IACzHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,6CAA6C;IAClDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,aAAa,EAAE;IACbL,GAAG,EAAE,gFAAgF;IACrFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,wBAAwB,EAAE;IACxBN,GAAG,EAAE,8DAA8D;IACnEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,oBAAoB,EAAE;IACpBP,GAAG,EAAE,oJAAoJ;IACzJC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,iBAAiB,EAAE;IACjBR,GAAG,EAAE,0EAA0E;IAC/EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,gBAAgB,EAAE;IAChBT,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,WAAW,EAAE;IACXV,GAAG,EAAE,oMAAoM;IACzMC,IAAI,EAAE,KAAK;IACXC,MAAM,EAAE;EACV,CAAC;EACDS,UAAU,EAAE;IACVX,GAAG,EAAE,0IAA0I;IAC/IC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDU,QAAQ,EAAE;IACRZ,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMW,cAAoC,GAAG;EAClDC,QAAQ,EAAE;IACRd,GAAG,EAAE,khBAAkhB;IACvhBC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDa,YAAY,EAAE;IACZf,GAAG,EAAE,2KAA2K;IAChLC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDc,QAAQ,EAAE;IACRhB,GAAG,EAAE,4rBAA4rB;IACjsBC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDe,eAAe,EAAE;IACfjB,GAAG,EAAE,8FAA8F;IACnGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDgB,gBAAgB,EAAE;IAChBlB,GAAG,EAAE,8IAA8I;IACnJC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"ProviderDocs.js","names":["ProviderProperties","defaultData","doc","type","status","data","schema","errorMessages","minimumAsyncBehaviorTime","asyncBehaviorTimeout","scrollTopOnSubmit","sessionStorageId","ajvInstance","filterData","children","ProviderEvents","onChange","onPathChange","onSubmit","onSubmitRequest","onSubmitComplete"],"sources":["../../../../../../src/extensions/forms/DataContext/Provider/ProviderDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const ProviderProperties: PropertiesTableProps = {\n  defaultData: {\n    doc: 'Default source data, only used if no other source is available, and not leading to updates if changed after mount.',\n    type: 'object',\n    status: 'required',\n  },\n  data: {\n    doc: 'Dynamic source data used as both initial data, and updates internal data if changed after mount.',\n    type: 'object',\n    status: 'required',\n  },\n  schema: {\n    doc: 'JSON Schema for validation of the data set.',\n    type: 'object',\n    status: 'optional',\n  },\n  errorMessages: {\n    doc: 'Object containing error messages by either type of JSON Pointer path and type.',\n    type: 'object',\n    status: 'optional',\n  },\n  minimumAsyncBehaviorTime: {\n    doc: 'Minimum time to display the submit indicator. Default is 1s.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  asyncBehaviorTimeout: {\n    doc: 'The maximum time to display the submit indicator before it changes back to normal. In case something went wrong during submission. Default is 30s.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  scrollTopOnSubmit: {\n    doc: 'True for the UI to scroll to the top of the page when data is submitted.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  sessionStorageId: {\n    doc: 'Key for saving active data to session storage and loading it on mount.',\n    type: 'string',\n    status: 'optional',\n  },\n  ajvInstance: {\n    doc: 'Provide your own custom Ajv instance. More info in the <a href=\"/uilib/extensions/forms/extended-features/Form/schema-validation/#custom-ajv-instance-and-keywords\">Schema validation</a> section.',\n    type: 'ajv',\n    status: 'optional',\n  },\n  filterData: {\n    doc: 'Filter the internal data context based on your criteria: `(path, value, props) => !props?.disabled`. It will iterate on each data entry.',\n    type: 'function',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n}\n\nexport const ProviderEvents: PropertiesTableProps = {\n  onChange: {\n    doc: \"Will be called when a value of a field was changed by the user, with the data set (including the changed value) as argument. When an async function is provided, it will show an indicator on the current label during a field change. Related props: `minimumAsyncBehaviorTime` and `asyncBehaviorTimeout`. You can return an error or an object with these keys `{ info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` in addition to { success: 'saved' } indicate the field was saved. Will emit unvalidated by default and validated when an async function is provided.\",\n    type: 'function',\n    status: 'optional',\n  },\n  onPathChange: {\n    doc: 'Will be called when a value of a field was changed by the user, with the `path` (JSON Pointer) and new `value` as arguments. Can be an async function. Will emit unvalidated by default and validated when `onChange` is an async function.',\n    type: 'function',\n    status: 'optional',\n  },\n  onSubmit: {\n    doc: \"Will be called (on validation success) when the user submit the form (i.e by clicking a [SubmitButton](/uilib/extensions/forms/extended-features/Form/SubmitButton) component inside), with the data set as 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 props: `minimumAsyncBehaviorTime` and `asyncBehaviorTimeout`. You can return an error or an object with these keys `{ status: 'pending', info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` to be shown in a [FormStatus](/uilib/components/form-status). Will only emit when every validation has passed.\",\n    type: 'function',\n    status: 'optional',\n  },\n  onSubmitRequest: {\n    doc: 'Will be called when the user tries to submit, but errors stop the data from being submitted.',\n    type: 'function',\n    status: 'optional',\n  },\n  onSubmitComplete: {\n    doc: 'Will be called after onSubmit has finished and had not errors. It supports the same return values as `onSubmit` and will be merged together.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,kBAAwC,GAAG;EACtDC,WAAW,EAAE;IACXC,GAAG,EAAE,oHAAoH;IACzHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,6CAA6C;IAClDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,aAAa,EAAE;IACbL,GAAG,EAAE,gFAAgF;IACrFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,wBAAwB,EAAE;IACxBN,GAAG,EAAE,8DAA8D;IACnEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,oBAAoB,EAAE;IACpBP,GAAG,EAAE,oJAAoJ;IACzJC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,iBAAiB,EAAE;IACjBR,GAAG,EAAE,0EAA0E;IAC/EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,gBAAgB,EAAE;IAChBT,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,WAAW,EAAE;IACXV,GAAG,EAAE,oMAAoM;IACzMC,IAAI,EAAE,KAAK;IACXC,MAAM,EAAE;EACV,CAAC;EACDS,UAAU,EAAE;IACVX,GAAG,EAAE,0IAA0I;IAC/IC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDU,QAAQ,EAAE;IACRZ,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMW,cAAoC,GAAG;EAClDC,QAAQ,EAAE;IACRd,GAAG,EAAE,klBAAklB;IACvlBC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDa,YAAY,EAAE;IACZf,GAAG,EAAE,6OAA6O;IAClPC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDc,QAAQ,EAAE;IACRhB,GAAG,EAAE,qwBAAqwB;IAC1wBC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDe,eAAe,EAAE;IACfjB,GAAG,EAAE,8FAA8F;IACnGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDgB,gBAAgB,EAAE;IAChBlB,GAAG,EAAE,8IAA8I;IACnJC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}

package/extensions/forms/Field/String/String.d.ts

@@ -13,22 +13,22 @@ interface ErrorMessages extends CustomErrorMessages {
 }
 export type Props = FieldHelpProps & FieldProps<string, undefined | string, ErrorMessages> & {
     multiline?: boolean;
-    mask?: InputMaskedProps['mask'];
-    leftIcon?: string;
-    rightIcon?: string;
     inputClassName?: string;
     innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>;
-    submitElement?: InputProps['submit_element'];
     width?: false | 'small' | 'medium' | 'large' | 'stretch';
+    size?: InputProps['size'] | TextareaProps['size'];
+    keepPlaceholder?: InputProps['keep_placeholder'];
     minLength?: number;
     maxLength?: number;
     pattern?: string;
     type?: InputProps['type'];
-    size?: InputProps['size'];
     align?: InputProps['align'];
     selectall?: InputProps['selectall'];
     clear?: boolean;
-    keepPlaceholder?: InputProps['keep_placeholder'];
+    mask?: InputMaskedProps['mask'];
+    leftIcon?: string;
+    rightIcon?: string;
+    submitElement?: InputProps['submit_element'];
     rows?: TextareaProps['rows'];
     autoresizeMaxRows?: TextareaProps['autoresize_max_rows'];
     autoresize?: TextareaProps['autoresize'];

package/extensions/forms/Field/String/String.js

@@ -141,12 +141,19 @@ function StringComponent(props) {
     status: hasError ? 'error' : undefined,
     value: transformInstantly((_value$toString = value === null || value === void 0 ? void 0 : value.toString()) !== null && _value$toString !== void 0 ? _value$toString : '')
   });
+  const textareaProps = {
+    keepPlaceholder,
+    rows,
+    autoresize_max_rows: autoresizeMaxRows,
+    autoresize,
+    characterCounter
+  };
   const inputProps = {
-    type,
-    clear,
-    size,
-    align,
-    selectall,
+    type: type,
+    clear: clear,
+    size: size,
+    align: align,
+    selectall: selectall,
     icon: leftIcon !== null && leftIcon !== void 0 ? leftIcon : rightIcon,
     icon_position: rightIcon && !leftIcon ? 'right' : undefined,
     submit_element: submitElement,
@@ -165,12 +172,7 @@ function StringComponent(props) {
     width: width === 'stretch' || fieldBlockContext !== null && fieldBlockContext !== void 0 && fieldBlockContext.composition ? width : undefined,
     contentWidth: width !== false ? width : undefined
   }, pickSpacingProps(props));
-  return React.createElement(FieldBlock, fieldBlockProps, multiline ? React.createElement(Textarea, _extends({}, sharedProps, {
-    rows: rows,
-    autoresize_max_rows: autoresizeMaxRows,
-    autoresize: autoresize,
-    characterCounter: characterCounter
-  })) : mask ? React.createElement(InputMasked, _extends({}, sharedProps, inputProps, {
+  return React.createElement(FieldBlock, fieldBlockProps, multiline ? React.createElement(Textarea, _extends({}, sharedProps, textareaProps)) : mask ? React.createElement(InputMasked, _extends({}, sharedProps, inputProps, {
     mask: mask
   })) : React.createElement(Input, _extends({}, sharedProps, inputProps)));
 }

package/extensions/forms/Field/String/String.js.map

@@ -1 +1 @@
-{"version":3,"file":"String.js","names":["React","useContext","useMemo","useCallback","classnames","HelpButton","Input","Textarea","InputMasked","SharedContext","FieldBlockContext","FieldBlock","useFieldProps","pickSpacingProps","toCapitalized","useErrorMessage","StringComponent","props","_props$width","_value$toString","fieldBlockContext","sharedContext","tr","translation","Forms","errorMessages","path","required","inputErrorRequired","minLength","stringInputErrorMinLength","maxLength","stringInputErrorMaxLength","pattern","inputErrorPattern","schema","_props$schema","type","fromInput","event","_event","_event$cleanedValue","_event2","_event3","value","emptyValue","cleanedValue","toEvent","trim","spaces","RegExp","test","replace","handleChange","transformValue","capitalize","String","preparedProps","_objectSpread","width","composition","id","name","className","innerRef","inputClassName","layout","placeholder","label","labelDescription","info","warning","error","hasError","disabled","help","multiline","mask","leftIcon","rightIcon","htmlAttributes","submitElement","clear","align","size","selectall","keepPlaceholder","rows","autoresizeMaxRows","autoresize","characterCounter","autoComplete","inputMode","autoCorrect","spellCheck","autoFocus","autoCapitalize","handleFocus","handleBlur","transformInstantly","cn","sharedProps","suffix","createElement","title","content","undefined","on_focus","on_blur","on_change","stretch","Boolean","inner_ref","status","toString","inputProps","icon","icon_position","submit_element","keep_placeholder","fieldBlockProps","forId","contentWidth","_extends","autoresize_max_rows","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/String/String.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { HelpButton, Input, Textarea } from '../../../../components'\nimport { InputProps } from '../../../../components/input/Input'\nimport InputMasked, {\n  InputMaskedProps,\n} from '../../../../components/InputMasked'\nimport { TextareaProps } from '../../../../components/Textarea'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { toCapitalized } from '../../../../shared/component-helper'\nimport type { TextCounterProps } from '../../../../fragments/TextCounter'\nimport type {\n  FieldProps,\n  FieldHelpProps,\n  CustomErrorMessages,\n  AllJSONSchemaVersions,\n} from '../../types'\nimport useErrorMessage from '../../hooks/useErrorMessage'\n\ninterface ErrorMessages extends CustomErrorMessages {\n  required?: string\n  schema?: string\n  minLength?: string\n  maxLength?: string\n  pattern?: string\n}\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string, ErrorMessages> & {\n    // - String props\n    multiline?: boolean\n    mask?: InputMaskedProps['mask']\n    leftIcon?: string\n    rightIcon?: string\n    inputClassName?: string\n    innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>\n    submitElement?: InputProps['submit_element']\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n\n    // - Validation\n    minLength?: number\n    maxLength?: number\n    pattern?: string\n\n    // - Input props\n    type?: InputProps['type']\n    size?: InputProps['size']\n    align?: InputProps['align']\n    selectall?: InputProps['selectall']\n    clear?: boolean\n    keepPlaceholder?: InputProps['keep_placeholder']\n\n    // - Textarea props\n    rows?: TextareaProps['rows']\n    autoresizeMaxRows?: TextareaProps['autoresize_max_rows']\n    autoresize?: TextareaProps['autoresize']\n    characterCounter?: Omit<TextCounterProps, 'text'> | number\n\n    // - Html props\n    autoComplete?: HTMLInputElement['autocomplete']\n    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode']\n    autoCorrect?: React.HTMLAttributes<HTMLInputElement>['autoCorrect']\n    spellCheck?: React.HTMLAttributes<HTMLInputElement>['spellCheck']\n    autoFocus?: React.HTMLAttributes<HTMLInputElement>['autoFocus']\n    autoCapitalize?: React.HTMLAttributes<HTMLInputElement>['autoCapitalize']\n  }\n\nfunction StringComponent(props: Props) {\n  const fieldBlockContext = useContext(FieldBlockContext)\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: tr.inputErrorRequired,\n    minLength: tr.stringInputErrorMinLength,\n    maxLength: tr.stringInputErrorMaxLength,\n    pattern: tr.inputErrorPattern,\n  })\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        minLength: props.minLength,\n        maxLength: props.maxLength,\n        pattern: props.pattern,\n      },\n    [props.schema, props.minLength, props.maxLength, props.pattern]\n  )\n  const fromInput = useCallback(\n    (event: { value: string; cleanedValue?: string }) => {\n      if (typeof event === 'string') {\n        event = { value: event }\n      }\n      if (event?.value === '') {\n        return props.emptyValue\n      }\n      // Cleaned value for masked\n      return event?.cleanedValue ?? event?.value\n    },\n    [props.emptyValue]\n  )\n  const toEvent = useCallback(\n    (value: string, type: string) => {\n      if (props.trim && type === 'onBlur') {\n        const spaces = '[\\\\s ]'\n        if (new RegExp(`^${spaces}|${spaces}$`).test(value)) {\n          value = value.replace(\n            new RegExp(`^${spaces}+|${spaces}+$`, 'g'),\n            ''\n          )\n          handleChange(value)\n        }\n      }\n      return value\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.trim]\n  )\n  const transformValue = useCallback(\n    (value: string) => {\n      if (props.capitalize) {\n        value = toCapitalized(String(value || ''))\n      }\n      return value\n    },\n    [props.capitalize]\n  )\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    fromInput,\n    toEvent,\n    transformValue,\n    width:\n      props.width ??\n      (fieldBlockContext?.composition ? 'stretch' : 'large'),\n  }\n\n  const {\n    id,\n    name,\n    className,\n\n    innerRef,\n    inputClassName,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    multiline,\n    mask,\n    leftIcon,\n    rightIcon,\n    width,\n    htmlAttributes,\n    submitElement,\n\n    // - Input props\n    type,\n    clear,\n    align,\n    size,\n    selectall,\n    keepPlaceholder,\n\n    // - Textarea props\n    rows,\n    // formId,\n    autoresizeMaxRows = 6,\n    autoresize = true,\n    characterCounter,\n\n    // - Html props\n\n    autoComplete,\n    inputMode,\n    autoCorrect,\n    spellCheck,\n    autoFocus,\n    autoCapitalize,\n\n    // - Events\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useFieldProps(preparedProps)\n\n  const transformInstantly = useCallback(\n    (value: string) => (props.capitalize ? toCapitalized(value) : value),\n    [props.capitalize]\n  )\n\n  const cn = classnames('dnb-forms-field-string__input', inputClassName)\n\n  const sharedProps: InputProps & TextareaProps = {\n    id,\n    name,\n    autoComplete,\n    autoCorrect,\n    spellCheck,\n    autoFocus,\n    autoCapitalize,\n    inputMode,\n    className: cn,\n    placeholder: placeholder,\n    suffix: help ? (\n      <HelpButton title={help.title}>{help.content}</HelpButton>\n    ) : undefined,\n    on_focus: handleFocus,\n    on_blur: handleBlur,\n    on_change: handleChange,\n    disabled,\n    ...htmlAttributes,\n    stretch: Boolean(\n      width !== undefined || fieldBlockContext?.composition\n    ),\n    inner_ref: innerRef,\n    status: hasError ? 'error' : undefined,\n    value: transformInstantly(value?.toString() ?? ''),\n  }\n\n  const inputProps: InputProps = {\n    type,\n    clear,\n    size,\n    align,\n    selectall,\n    icon: leftIcon ?? rightIcon,\n    icon_position: rightIcon && !leftIcon ? 'right' : undefined,\n    submit_element: submitElement,\n    keep_placeholder: keepPlaceholder,\n  }\n\n  const fieldBlockProps = {\n    className: classnames('dnb-forms-field-string', className),\n    forId: id,\n    layout,\n    label,\n    labelDescription,\n    info,\n    warning,\n    error,\n    disabled,\n    width:\n      width === 'stretch' || fieldBlockContext?.composition\n        ? width\n        : undefined,\n    contentWidth: width !== false ? width : undefined,\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      {multiline ? (\n        <Textarea\n          {...sharedProps}\n          rows={rows}\n          autoresize_max_rows={autoresizeMaxRows}\n          autoresize={autoresize}\n          characterCounter={characterCounter}\n        />\n      ) : mask ? (\n        <InputMasked {...sharedProps} {...inputProps} mask={mask} />\n      ) : (\n        <Input {...sharedProps} {...inputProps} />\n      )}\n    </FieldBlock>\n  )\n}\n\nStringComponent._supportsSpacingProps = true\nexport default StringComponent\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,EAAEC,WAAW,QAAQ,OAAO;AAC/D,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,UAAU,EAAEC,KAAK,EAAEC,QAAQ,QAAQ,wBAAwB;AAEpE,OAAOC,WAAW,MAEX,oCAAoC;AAE3C,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,iBAAiB,MAAM,oCAAoC;AAClE,OAAOC,UAAU,MAAM,kBAAkB;AACzC,SAASC,aAAa,QAAQ,aAAa;AAC3C,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,SAASC,aAAa,QAAQ,qCAAqC;AAQnE,OAAOC,eAAe,MAAM,6BAA6B;AAiDzD,SAASC,eAAeA,CAACC,KAAY,EAAE;EAAA,IAAAC,YAAA,EAAAC,eAAA;EACrC,MAAMC,iBAAiB,GAAGnB,UAAU,CAACS,iBAAiB,CAAC;EACvD,MAAMW,aAAa,GAAGpB,UAAU,CAACQ,aAAa,CAAC;EAC/C,MAAMa,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAE3C,MAAMC,aAAa,GAAGV,eAAe,CAACE,KAAK,CAACS,IAAI,EAAET,KAAK,CAACQ,aAAa,EAAE;IACrEE,QAAQ,EAAEL,EAAE,CAACM,kBAAkB;IAC/BC,SAAS,EAAEP,EAAE,CAACQ,yBAAyB;IACvCC,SAAS,EAAET,EAAE,CAACU,yBAAyB;IACvCC,OAAO,EAAEX,EAAE,CAACY;EACd,CAAC,CAAC;EAEF,MAAMC,MAAM,GAAGjC,OAAO,CACpB;IAAA,IAAAkC,aAAA;IAAA,QAAAA,aAAA,GACEnB,KAAK,CAACkB,MAAM,cAAAC,aAAA,cAAAA,aAAA,GAAI;MACdC,IAAI,EAAE,QAAQ;MACdR,SAAS,EAAEZ,KAAK,CAACY,SAAS;MAC1BE,SAAS,EAAEd,KAAK,CAACc,SAAS;MAC1BE,OAAO,EAAEhB,KAAK,CAACgB;IACjB,CAAC;EAAA,GACH,CAAChB,KAAK,CAACkB,MAAM,EAAElB,KAAK,CAACY,SAAS,EAAEZ,KAAK,CAACc,SAAS,EAAEd,KAAK,CAACgB,OAAO,CAChE,CAAC;EACD,MAAMK,SAAS,GAAGnC,WAAW,CAC1BoC,KAA+C,IAAK;IAAA,IAAAC,MAAA,EAAAC,mBAAA,EAAAC,OAAA,EAAAC,OAAA;IACnD,IAAI,OAAOJ,KAAK,KAAK,QAAQ,EAAE;MAC7BA,KAAK,GAAG;QAAEK,KAAK,EAAEL;MAAM,CAAC;IAC1B;IACA,IAAI,EAAAC,MAAA,GAAAD,KAAK,cAAAC,MAAA,uBAALA,MAAA,CAAOI,KAAK,MAAK,EAAE,EAAE;MACvB,OAAO3B,KAAK,CAAC4B,UAAU;IACzB;IAEA,QAAAJ,mBAAA,IAAAC,OAAA,GAAOH,KAAK,cAAAG,OAAA,uBAALA,OAAA,CAAOI,YAAY,cAAAL,mBAAA,cAAAA,mBAAA,IAAAE,OAAA,GAAIJ,KAAK,cAAAI,OAAA,uBAALA,OAAA,CAAOC,KAAK;EAC5C,CAAC,EACD,CAAC3B,KAAK,CAAC4B,UAAU,CACnB,CAAC;EACD,MAAME,OAAO,GAAG5C,WAAW,CACzB,CAACyC,KAAa,EAAEP,IAAY,KAAK;IAC/B,IAAIpB,KAAK,CAAC+B,IAAI,IAAIX,IAAI,KAAK,QAAQ,EAAE;MACnC,MAAMY,MAAM,GAAG,QAAQ;MACvB,IAAI,IAAIC,MAAM,CAAE,IAAGD,MAAO,IAAGA,MAAO,GAAE,CAAC,CAACE,IAAI,CAACP,KAAK,CAAC,EAAE;QACnDA,KAAK,GAAGA,KAAK,CAACQ,OAAO,CACnB,IAAIF,MAAM,CAAE,IAAGD,MAAO,KAAIA,MAAO,IAAG,EAAE,GAAG,CAAC,EAC1C,EACF,CAAC;QACDI,YAAY,CAACT,KAAK,CAAC;MACrB;IACF;IACA,OAAOA,KAAK;EACd,CAAC,EAED,CAAC3B,KAAK,CAAC+B,IAAI,CACb,CAAC;EACD,MAAMM,cAAc,GAAGnD,WAAW,CAC/ByC,KAAa,IAAK;IACjB,IAAI3B,KAAK,CAACsC,UAAU,EAAE;MACpBX,KAAK,GAAG9B,aAAa,CAAC0C,MAAM,CAACZ,KAAK,IAAI,EAAE,CAAC,CAAC;IAC5C;IACA,OAAOA,KAAK;EACd,CAAC,EACD,CAAC3B,KAAK,CAACsC,UAAU,CACnB,CAAC;EAED,MAAME,aAAoB,GAAAC,aAAA,CAAAA,aAAA,KACrBzC,KAAK;IACRQ,aAAa;IACbU,MAAM;IACNG,SAAS;IACTS,OAAO;IACPO,cAAc;IACdK,KAAK,GAAAzC,YAAA,GACHD,KAAK,CAAC0C,KAAK,cAAAzC,YAAA,cAAAA,YAAA,GACVE,iBAAiB,aAAjBA,iBAAiB,eAAjBA,iBAAiB,CAAEwC,WAAW,GAAG,SAAS,GAAG;EAAQ,EACzD;EAED,MAAM;IACJC,EAAE;IACFC,IAAI;IACJC,SAAS;IAETC,QAAQ;IACRC,cAAc;IACdC,MAAM;IACNC,WAAW;IACXC,KAAK;IACLC,gBAAgB;IAChBzB,KAAK;IACL0B,IAAI;IACJC,OAAO;IACPC,KAAK;IACLC,QAAQ;IACRC,QAAQ;IACRC,IAAI;IACJC,SAAS;IACTC,IAAI;IACJC,QAAQ;IACRC,SAAS;IACTpB,KAAK;IACLqB,cAAc;IACdC,aAAa;IAGb5C,IAAI;IACJ6C,KAAK;IACLC,KAAK;IACLC,IAAI;IACJC,SAAS;IACTC,eAAe;IAGfC,IAAI;IAEJC,iBAAiB,GAAG,CAAC;IACrBC,UAAU,GAAG,IAAI;IACjBC,gBAAgB;IAIhBC,YAAY;IACZC,SAAS;IACTC,WAAW;IACXC,UAAU;IACVC,SAAS;IACTC,cAAc;IAGdC,WAAW;IACXC,UAAU;IACV7C;EACF,CAAC,GAAGzC,aAAa,CAAC6C,aAAa,CAAC;EAEhC,MAAM0C,kBAAkB,GAAGhG,WAAW,CACnCyC,KAAa,IAAM3B,KAAK,CAACsC,UAAU,GAAGzC,aAAa,CAAC8B,KAAK,CAAC,GAAGA,KAAM,EACpE,CAAC3B,KAAK,CAACsC,UAAU,CACnB,CAAC;EAED,MAAM6C,EAAE,GAAGhG,UAAU,CAAC,+BAA+B,EAAE6D,cAAc,CAAC;EAEtE,MAAMoC,WAAuC,GAAA3C,aAAA,CAAAA,aAAA;IAC3CG,EAAE;IACFC,IAAI;IACJ6B,YAAY;IACZE,WAAW;IACXC,UAAU;IACVC,SAAS;IACTC,cAAc;IACdJ,SAAS;IACT7B,SAAS,EAAEqC,EAAE;IACbjC,WAAW,EAAEA,WAAW;IACxBmC,MAAM,EAAE3B,IAAI,GACV3E,KAAA,CAAAuG,aAAA,CAAClG,UAAU;MAACmG,KAAK,EAAE7B,IAAI,CAAC6B;IAAM,GAAE7B,IAAI,CAAC8B,OAAoB,CAAC,GACxDC,SAAS;IACbC,QAAQ,EAAEV,WAAW;IACrBW,OAAO,EAAEV,UAAU;IACnBW,SAAS,EAAExD,YAAY;IACvBqB;EAAQ,GACLM,cAAc;IACjB8B,OAAO,EAAEC,OAAO,CACdpD,KAAK,KAAK+C,SAAS,KAAItF,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAEwC,WAAW,CACvD,CAAC;IACDoD,SAAS,EAAEhD,QAAQ;IACnBiD,MAAM,EAAExC,QAAQ,GAAG,OAAO,GAAGiC,SAAS;IACtC9D,KAAK,EAAEuD,kBAAkB,EAAAhF,eAAA,GAACyB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEsE,QAAQ,CAAC,CAAC,cAAA/F,eAAA,cAAAA,eAAA,GAAI,EAAE;EAAC,EACnD;EAED,MAAMgG,UAAsB,GAAG;IAC7B9E,IAAI;IACJ6C,KAAK;IACLE,IAAI;IACJD,KAAK;IACLE,SAAS;IACT+B,IAAI,EAAEtC,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIC,SAAS;IAC3BsC,aAAa,EAAEtC,SAAS,IAAI,CAACD,QAAQ,GAAG,OAAO,GAAG4B,SAAS;IAC3DY,cAAc,EAAErC,aAAa;IAC7BsC,gBAAgB,EAAEjC;EACpB,CAAC;EAED,MAAMkC,eAAe,GAAA9D,aAAA;IACnBK,SAAS,EAAE3D,UAAU,CAAC,wBAAwB,EAAE2D,SAAS,CAAC;IAC1D0D,KAAK,EAAE5D,EAAE;IACTK,MAAM;IACNE,KAAK;IACLC,gBAAgB;IAChBC,IAAI;IACJC,OAAO;IACPC,KAAK;IACLE,QAAQ;IACRf,KAAK,EACHA,KAAK,KAAK,SAAS,IAAIvC,iBAAiB,aAAjBA,iBAAiB,eAAjBA,iBAAiB,CAAEwC,WAAW,GACjDD,KAAK,GACL+C,SAAS;IACfgB,YAAY,EAAE/D,KAAK,KAAK,KAAK,GAAGA,KAAK,GAAG+C;EAAS,GAC9C7F,gBAAgB,CAACI,KAAK,CAAC,CAC3B;EAED,OACEjB,KAAA,CAAAuG,aAAA,CAAC5F,UAAU,EAAK6G,eAAe,EAC5B5C,SAAS,GACR5E,KAAA,CAAAuG,aAAA,CAAChG,QAAQ,EAAAoH,QAAA,KACHtB,WAAW;IACfd,IAAI,EAAEA,IAAK;IACXqC,mBAAmB,EAAEpC,iBAAkB;IACvCC,UAAU,EAAEA,UAAW;IACvBC,gBAAgB,EAAEA;EAAiB,EACpC,CAAC,GACAb,IAAI,GACN7E,KAAA,CAAAuG,aAAA,CAAC/F,WAAW,EAAAmH,QAAA,KAAKtB,WAAW,EAAMc,UAAU;IAAEtC,IAAI,EAAEA;EAAK,EAAE,CAAC,GAE5D7E,KAAA,CAAAuG,aAAA,CAACjG,KAAK,EAAAqH,QAAA,KAAKtB,WAAW,EAAMc,UAAU,CAAG,CAEjC,CAAC;AAEjB;AAEAnG,eAAe,CAAC6G,qBAAqB,GAAG,IAAI;AAC5C,eAAe7G,eAAe"}
+{"version":3,"file":"String.js","names":["React","useContext","useMemo","useCallback","classnames","HelpButton","Input","Textarea","InputMasked","SharedContext","FieldBlockContext","FieldBlock","useFieldProps","pickSpacingProps","toCapitalized","useErrorMessage","StringComponent","props","_props$width","_value$toString","fieldBlockContext","sharedContext","tr","translation","Forms","errorMessages","path","required","inputErrorRequired","minLength","stringInputErrorMinLength","maxLength","stringInputErrorMaxLength","pattern","inputErrorPattern","schema","_props$schema","type","fromInput","event","_event","_event$cleanedValue","_event2","_event3","value","emptyValue","cleanedValue","toEvent","trim","spaces","RegExp","test","replace","handleChange","transformValue","capitalize","String","preparedProps","_objectSpread","width","composition","id","name","className","innerRef","inputClassName","layout","placeholder","label","labelDescription","info","warning","error","hasError","disabled","help","multiline","mask","leftIcon","rightIcon","htmlAttributes","submitElement","clear","align","size","selectall","keepPlaceholder","rows","autoresizeMaxRows","autoresize","characterCounter","autoComplete","inputMode","autoCorrect","spellCheck","autoFocus","autoCapitalize","handleFocus","handleBlur","transformInstantly","cn","sharedProps","suffix","createElement","title","content","undefined","on_focus","on_blur","on_change","stretch","Boolean","inner_ref","status","toString","textareaProps","autoresize_max_rows","inputProps","icon","icon_position","submit_element","keep_placeholder","fieldBlockProps","forId","contentWidth","_extends","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/String/String.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { HelpButton, Input, Textarea } from '../../../../components'\nimport { InputProps } from '../../../../components/input/Input'\nimport InputMasked, {\n  InputMaskedProps,\n} from '../../../../components/InputMasked'\nimport { TextareaProps } from '../../../../components/Textarea'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { toCapitalized } from '../../../../shared/component-helper'\nimport type { TextCounterProps } from '../../../../fragments/TextCounter'\nimport type {\n  FieldProps,\n  FieldHelpProps,\n  CustomErrorMessages,\n  AllJSONSchemaVersions,\n} from '../../types'\nimport useErrorMessage from '../../hooks/useErrorMessage'\n\ninterface ErrorMessages extends CustomErrorMessages {\n  required?: string\n  schema?: string\n  minLength?: string\n  maxLength?: string\n  pattern?: string\n}\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string, ErrorMessages> & {\n    // - Shared props\n    multiline?: boolean\n    inputClassName?: string\n    innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n    size?: InputProps['size'] | TextareaProps['size']\n    keepPlaceholder?: InputProps['keep_placeholder']\n\n    // - Validation\n    minLength?: number\n    maxLength?: number\n    pattern?: string\n\n    // - Input props\n    type?: InputProps['type']\n    align?: InputProps['align']\n    selectall?: InputProps['selectall']\n    clear?: boolean\n    mask?: InputMaskedProps['mask']\n    leftIcon?: string\n    rightIcon?: string\n    submitElement?: InputProps['submit_element']\n\n    // - Textarea props\n    rows?: TextareaProps['rows']\n    autoresizeMaxRows?: TextareaProps['autoresize_max_rows']\n    autoresize?: TextareaProps['autoresize']\n    characterCounter?: Omit<TextCounterProps, 'text'> | number\n\n    // - Html props\n    autoComplete?: HTMLInputElement['autocomplete']\n    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode']\n    autoCorrect?: React.HTMLAttributes<HTMLInputElement>['autoCorrect']\n    spellCheck?: React.HTMLAttributes<HTMLInputElement>['spellCheck']\n    autoFocus?: React.HTMLAttributes<HTMLInputElement>['autoFocus']\n    autoCapitalize?: React.HTMLAttributes<HTMLInputElement>['autoCapitalize']\n  }\n\nfunction StringComponent(props: Props) {\n  const fieldBlockContext = useContext(FieldBlockContext)\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: tr.inputErrorRequired,\n    minLength: tr.stringInputErrorMinLength,\n    maxLength: tr.stringInputErrorMaxLength,\n    pattern: tr.inputErrorPattern,\n  })\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        minLength: props.minLength,\n        maxLength: props.maxLength,\n        pattern: props.pattern,\n      },\n    [props.schema, props.minLength, props.maxLength, props.pattern]\n  )\n  const fromInput = useCallback(\n    (event: { value: string; cleanedValue?: string }) => {\n      if (typeof event === 'string') {\n        event = { value: event }\n      }\n      if (event?.value === '') {\n        return props.emptyValue\n      }\n      // Cleaned value for masked\n      return event?.cleanedValue ?? event?.value\n    },\n    [props.emptyValue]\n  )\n  const toEvent = useCallback(\n    (value: string, type: string) => {\n      if (props.trim && type === 'onBlur') {\n        const spaces = '[\\\\s ]'\n        if (new RegExp(`^${spaces}|${spaces}$`).test(value)) {\n          value = value.replace(\n            new RegExp(`^${spaces}+|${spaces}+$`, 'g'),\n            ''\n          )\n          handleChange(value)\n        }\n      }\n      return value\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.trim]\n  )\n  const transformValue = useCallback(\n    (value: string) => {\n      if (props.capitalize) {\n        value = toCapitalized(String(value || ''))\n      }\n      return value\n    },\n    [props.capitalize]\n  )\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    fromInput,\n    toEvent,\n    transformValue,\n    width:\n      props.width ??\n      (fieldBlockContext?.composition ? 'stretch' : 'large'),\n  }\n\n  const {\n    id,\n    name,\n    className,\n\n    innerRef,\n    inputClassName,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    multiline,\n    mask,\n    leftIcon,\n    rightIcon,\n    width,\n    htmlAttributes,\n    submitElement,\n\n    // - Input props\n    type,\n    clear,\n    align,\n    size,\n    selectall,\n    keepPlaceholder,\n\n    // - Textarea props\n    rows,\n    // formId,\n    autoresizeMaxRows = 6,\n    autoresize = true,\n    characterCounter,\n\n    // - Html props\n\n    autoComplete,\n    inputMode,\n    autoCorrect,\n    spellCheck,\n    autoFocus,\n    autoCapitalize,\n\n    // - Events\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useFieldProps(preparedProps)\n\n  const transformInstantly = useCallback(\n    (value: string) => (props.capitalize ? toCapitalized(value) : value),\n    [props.capitalize]\n  )\n\n  const cn = classnames('dnb-forms-field-string__input', inputClassName)\n\n  const sharedProps: InputProps & TextareaProps = {\n    id,\n    name,\n    autoComplete,\n    autoCorrect,\n    spellCheck,\n    autoFocus,\n    autoCapitalize,\n    inputMode,\n    className: cn,\n    placeholder: placeholder,\n    suffix: help ? (\n      <HelpButton title={help.title}>{help.content}</HelpButton>\n    ) : undefined,\n    on_focus: handleFocus,\n    on_blur: handleBlur,\n    on_change: handleChange,\n    disabled,\n    ...htmlAttributes,\n    stretch: Boolean(\n      width !== undefined || fieldBlockContext?.composition\n    ),\n    inner_ref: innerRef,\n    status: hasError ? 'error' : undefined,\n    value: transformInstantly(value?.toString() ?? ''),\n  }\n\n  const textareaProps: TextareaProps = {\n    keepPlaceholder,\n    rows,\n    autoresize_max_rows: autoresizeMaxRows,\n    autoresize,\n    characterCounter,\n  }\n\n  const inputProps: InputProps = {\n    type: type,\n    clear: clear,\n    size: size,\n    align: align,\n    selectall: selectall,\n    icon: leftIcon ?? rightIcon,\n    icon_position: rightIcon && !leftIcon ? 'right' : undefined,\n    submit_element: submitElement,\n    keep_placeholder: keepPlaceholder,\n  }\n\n  const fieldBlockProps = {\n    className: classnames('dnb-forms-field-string', className),\n    forId: id,\n    layout,\n    label,\n    labelDescription,\n    info,\n    warning,\n    error,\n    disabled,\n    width:\n      width === 'stretch' || fieldBlockContext?.composition\n        ? width\n        : undefined,\n    contentWidth: width !== false ? width : undefined,\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      {multiline ? (\n        <Textarea {...sharedProps} {...textareaProps} />\n      ) : mask ? (\n        <InputMasked {...sharedProps} {...inputProps} mask={mask} />\n      ) : (\n        <Input {...sharedProps} {...inputProps} />\n      )}\n    </FieldBlock>\n  )\n}\n\nStringComponent._supportsSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}

package/extensions/forms/Form/Appearance/Appearance.js

@@ -15,6 +15,9 @@ function FormAppearance(_ref) {
     Input: {
       size
     },
+    Textarea: {
+      size
+    },
     DatePicker: {
       size
     },

package/extensions/forms/Form/Appearance/Appearance.js.map

@@ -1 +1 @@
-{"version":3,"file":"Appearance.js","names":["React","Provider","FormAppearance","_ref","children","size","rest","_objectWithoutProperties","_excluded","createElement","_extends","Input","DatePicker","Autocomplete","Dropdown"],"sources":["../../../../../../src/extensions/forms/Form/Appearance/Appearance.tsx"],"sourcesContent":["import React from 'react'\nimport Provider from '../../../../shared/Provider'\n\nexport type Props = {\n  size?: 'medium' | 'large'\n  children: React.ReactNode\n}\n\nfunction FormAppearance({ children, size = null, ...rest }: Props) {\n  return (\n    <Provider\n      Input={{ size }}\n      DatePicker={{ size }}\n      Autocomplete={{ size }}\n      Dropdown={{ size }}\n      {...rest}\n    >\n      {children}\n    </Provider>\n  )\n}\n\nexport default FormAppearance\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,6BAA6B;AAOlD,SAASC,cAAcA,CAAAC,IAAA,EAA4C;EAAA,IAA3C;MAAEC,QAAQ;MAAEC,IAAI,GAAG;IAAqB,CAAC,GAAAF,IAAA;IAAbG,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACtD,OACER,KAAA,CAAAS,aAAA,CAACR,QAAQ,EAAAS,QAAA;IACPC,KAAK,EAAE;MAAEN;IAAK,CAAE;IAChBO,UAAU,EAAE;MAAEP;IAAK,CAAE;IACrBQ,YAAY,EAAE;MAAER;IAAK,CAAE;IACvBS,QAAQ,EAAE;MAAET;IAAK;EAAE,GACfC,IAAI,GAEPF,QACO,CAAC;AAEf;AAEA,eAAeF,cAAc"}
+{"version":3,"file":"Appearance.js","names":["React","Provider","FormAppearance","_ref","children","size","rest","_objectWithoutProperties","_excluded","createElement","_extends","Input","Textarea","DatePicker","Autocomplete","Dropdown"],"sources":["../../../../../../src/extensions/forms/Form/Appearance/Appearance.tsx"],"sourcesContent":["import React from 'react'\nimport Provider from '../../../../shared/Provider'\n\nexport type Props = {\n  size?: 'medium' | 'large'\n  children: React.ReactNode\n}\n\nfunction FormAppearance({ children, size = null, ...rest }: Props) {\n  return (\n    <Provider\n      Input={{ size }}\n      Textarea={{ size }}\n      DatePicker={{ size }}\n      Autocomplete={{ size }}\n      Dropdown={{ size }}\n      {...rest}\n    >\n      {children}\n    </Provider>\n  )\n}\n\nexport default FormAppearance\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,6BAA6B;AAOlD,SAASC,cAAcA,CAAAC,IAAA,EAA4C;EAAA,IAA3C;MAAEC,QAAQ;MAAEC,IAAI,GAAG;IAAqB,CAAC,GAAAF,IAAA;IAAbG,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACtD,OACER,KAAA,CAAAS,aAAA,CAACR,QAAQ,EAAAS,QAAA;IACPC,KAAK,EAAE;MAAEN;IAAK,CAAE;IAChBO,QAAQ,EAAE;MAAEP;IAAK,CAAE;IACnBQ,UAAU,EAAE;MAAER;IAAK,CAAE;IACrBS,YAAY,EAAE;MAAET;IAAK,CAAE;IACvBU,QAAQ,EAAE;MAAEV;IAAK;EAAE,GACfC,IAAI,GAEPF,QACO,CAAC;AAEf;AAEA,eAAeF,cAAc"}

package/extensions/forms/Form/ButtonRow/style/dnb-form-button-row.css

@@ -4,8 +4,8 @@
 .dnb-forms-button-row {
   display: flex;
   flex-flow: row;
-  -moz-column-gap: var(--spacing-small);
-       column-gap: var(--spacing-small);
+  flex-wrap: wrap;
+  gap: var(--spacing-small);
 }
 .dnb-card + .dnb-forms-button-row:not([class*=space__top]) {
   margin-top: var(--spacing-small);

package/extensions/forms/Form/ButtonRow/style/dnb-form-button-row.min.css

@@ -1 +1 @@
-.dnb-forms-button-row{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-card+.dnb-forms-button-row:not([class*=space__top]){margin-top:var(--spacing-small)}.dnb-card+.dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top]{margin-top:0}@media screen and (min-width:40em){.dnb-card+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}
+.dnb-forms-button-row{display:flex;flex-flow:row;flex-wrap:wrap;gap:var(--spacing-small)}.dnb-card+.dnb-forms-button-row:not([class*=space__top]){margin-top:var(--spacing-small)}.dnb-card+.dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top]{margin-top:0}@media screen and (min-width:40em){.dnb-card+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}

package/extensions/forms/Form/ButtonRow/style/dnb-form-button-row.scss

@@ -3,7 +3,8 @@
 .dnb-forms-button-row {
   display: flex;
   flex-flow: row;
-  column-gap: var(--spacing-small);
+  flex-wrap: wrap;
+  gap: var(--spacing-small);
 
   .dnb-card + & {
     &:not([class*='space__top']) {

package/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/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/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/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/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/extensions/forms/StepsLayout/StepsLayout.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
+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, mode: 'previous' | 'next') => EventReturnWithStateObject | void | Promise<EventReturnWithStateObject | 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/extensions/forms/StepsLayout/StepsLayout.js

@@ -1,9 +1,12 @@
 "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, useCallback, useRef, useReducer } 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';
@@ -16,6 +19,8 @@ import NextButton from './NextButton';
 import PreviousButton from './PreviousButton';
 import Buttons from './Buttons';
 import Provider from '../DataContext/Provider';
+import { useSharedState } from '../../../shared/helpers/useSharedState';
+import { useStep } from './useStep';
 function StepsLayout(props) {
   const {
       className,
@@ -30,7 +35,6 @@ function StepsLayout(props) {
       sidebarId
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
-  const dataContext = useContext(DataContext);
   const {
     hasContext,
     setFormState,
@@ -38,7 +42,7 @@ function StepsLayout(props) {
     setShowAllErrors,
     showAllErrors,
     scrollToTop
-  } = dataContext;
+  } = useContext(DataContext);
   const id = useId(_id);
   const [, forceUpdate] = useReducer(() => ({}), {});
   const activeIndexRef = useRef(initialActiveIndex);
@@ -50,34 +54,24 @@ function StepsLayout(props) {
     }
     return onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(index, mode);
   }, [onStepChange]);
-  const handlePrevious = useCallback(() => {
+  const handleStepChange = useCallback(_ref => {
+    let {
+      index,
+      skipErrorCheck,
+      mode
+    } = _ref;
     handleSubmitCall({
-      skipFieldValidation: true,
-      skipErrorCheck: true,
+      skipErrorCheck,
+      skipFieldValidation: skipErrorCheck,
       enableAsyncBehaviour: isAsync(onStepChange),
       onSubmit: async () => {
-        const result = await callOnStepChange(activeIndexRef.current - 1, 'previous');
+        const result = await callOnStepChange(index, mode);
         setFormState('abort');
-        if (!(result instanceof Error)) {
-          activeIndexRef.current = activeIndexRef.current - 1;
-          forceUpdate();
-        }
-        if (scrollTopOnStepChange) {
-          scrollToTop();
+        if (!skipErrorCheck) {
+          setShowAllErrors(errorOnStepRef.current[index]);
         }
-        return result;
-      }
-    });
-  }, [callOnStepChange, handleSubmitCall, onStepChange, scrollToTop, scrollTopOnStepChange, setFormState]);
-  const handleNext = useCallback(() => {
-    handleSubmitCall({
-      enableAsyncBehaviour: isAsync(onStepChange),
-      onSubmit: async () => {
-        const result = await callOnStepChange(activeIndexRef.current + 1, 'next');
-        setFormState('abort');
-        setShowAllErrors(errorOnStepRef.current[activeIndexRef.current + 1]);
         if (!(result instanceof Error)) {
-          activeIndexRef.current = activeIndexRef.current + 1;
+          activeIndexRef.current = index;
           forceUpdate();
         }
         if (scrollTopOnStepChange) {
@@ -87,33 +81,76 @@ function StepsLayout(props) {
       }
     });
   }, [callOnStepChange, handleSubmitCall, onStepChange, scrollToTop, scrollTopOnStepChange, setFormState, 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');
+  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 handleChange = useCallback(_ref => {
+    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(_ref2 => {
     let {
       current_step
-    } = _ref;
-    activeIndexRef.current = current_step;
-    setShowAllErrors(errorOnStepRef.current[current_step]);
-    forceUpdate();
-  }, [setShowAllErrors]);
+    } = _ref2;
+    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: activeIndexRef.current,
-      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", {
@@ -123,26 +160,20 @@ function StepsLayout(props) {
   }), React.createElement(StepIndicator, {
     bottom: true,
     current_step: activeIndexRef.current,
-    data: stepIndicatorData,
+    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