@dnb/eufemia 10.23.0 → 10.24.0

package/es/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/es/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":"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"}
+{"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/es/extensions/forms/Form/Appearance/Appearance.js

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

package/es/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/es/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/es/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/es/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/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 { 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/es/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,23 @@ function StepsLayout(props) {
     }
     return onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(index, mode);
   }, [onStepChange]);
-  const handlePrevious = useCallback(() => {
+  const handleStepChange = useCallback(({
+    index,
+    skipErrorCheck,
+    mode
+  }) => {
     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 (!skipErrorCheck) {
+          setShowAllErrors(errorOnStepRef.current[index]);
         }
-        if (scrollTopOnStepChange) {
-          scrollToTop();
-        }
-        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,32 +80,75 @@ 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 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
   }) => {
-    activeIndexRef.current = current_step;
-    setShowAllErrors(errorOnStepRef.current[current_step]);
-    forceUpdate();
-  }, [setShowAllErrors]);
+    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", {
@@ -122,26 +158,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

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

@@ -1 +1 @@
-{"version":3,"file":"StepsLayout.js","names":["React","useContext","useCallback","useRef","useReducer","classnames","Space","StepIndicator","warn","isAsync","useId","DataContext","Step","StepsContext","NextButton","PreviousButton","Buttons","Provider","StepsLayout","props","className","id","_id","mode","scrollTopOnStepChange","initialActiveIndex","onStepChange","children","noAnimation","variant","sidebarId","rest","_objectWithoutProperties","_excluded","dataContext","hasContext","setFormState","handleSubmitCall","setShowAllErrors","showAllErrors","scrollToTop","forceUpdate","activeIndexRef","errorOnStepRef","current","callOnStepChange","index","handlePrevious","skipFieldValidation","skipErrorCheck","enableAsyncBehaviour","onSubmit","result","Error","handleNext","stepIndicatorData","Children","map","child","_child$props$title","isValidElement","type","title","handleChange","current_step","createElement","_extends","value","activeIndex","Sidebar","sidebar_id","bottom","data","no_animation","on_change","i","cloneElement","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/StepsLayout/StepsLayout.tsx"],"sourcesContent":["import React, { useContext, useCallback, useRef, useReducer } 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 from './StepsContext'\nimport NextButton from './NextButton'\nimport PreviousButton from './PreviousButton'\nimport Buttons from './Buttons'\nimport Provider from '../DataContext/Provider'\nimport { ComponentProps, EventReturnWithStateObject } from '../types'\n\nexport type Props = ComponentProps & {\n  id?: string\n  mode?: 'static' | 'strict' | 'loose'\n  scrollTopOnStepChange?: boolean\n  initialActiveIndex?: number\n  onStepChange?: (\n    index: number,\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  const dataContext = useContext(DataContext)\n  const {\n    hasContext,\n    setFormState,\n    handleSubmitCall,\n    setShowAllErrors,\n    showAllErrors,\n    scrollToTop,\n  } = dataContext\n\n  const id = useId(_id)\n  const [, forceUpdate] = useReducer(() => ({}), {})\n  const activeIndexRef = useRef<number>(initialActiveIndex)\n  const errorOnStepRef = useRef<Record<number, boolean>>({})\n\n  // Store the current state of showAllErrors\n  errorOnStepRef.current[activeIndexRef.current] = showAllErrors\n\n  const callOnStepChange = useCallback(\n    async (index: number, 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 handlePrevious = useCallback(() => {\n    handleSubmitCall({\n      skipFieldValidation: true,\n      skipErrorCheck: true,\n      enableAsyncBehaviour: isAsync(onStepChange),\n      onSubmit: async () => {\n        const result = await callOnStepChange(\n          activeIndexRef.current - 1,\n          'previous'\n        )\n\n        // Hide async indicator\n        setFormState('abort')\n\n        if (!(result instanceof Error)) {\n          activeIndexRef.current = activeIndexRef.current - 1\n          forceUpdate()\n        }\n\n        if (scrollTopOnStepChange) {\n          scrollToTop()\n        }\n\n        return result\n      },\n    })\n  }, [\n    callOnStepChange,\n    handleSubmitCall,\n    onStepChange,\n    scrollToTop,\n    scrollTopOnStepChange,\n    setFormState,\n  ])\n\n  const handleNext = useCallback(() => {\n    handleSubmitCall({\n      enableAsyncBehaviour: isAsync(onStepChange),\n      onSubmit: async () => {\n        const result = await callOnStepChange(\n          activeIndexRef.current + 1,\n          'next'\n        )\n\n        // Hide async indicator\n        setFormState('abort')\n\n        // Set the showAllErrors to the step we got to\n        setShowAllErrors(\n          errorOnStepRef.current[activeIndexRef.current + 1]\n        )\n\n        if (!(result instanceof Error)) {\n          activeIndexRef.current = activeIndexRef.current + 1\n          forceUpdate()\n        }\n\n        if (scrollTopOnStepChange) {\n          scrollToTop()\n        }\n\n        return result\n      },\n    })\n  }, [\n    callOnStepChange,\n    handleSubmitCall,\n    onStepChange,\n    scrollToTop,\n    scrollTopOnStepChange,\n    setFormState,\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(\n    ({ current_step }) => {\n      activeIndexRef.current = current_step\n\n      // Set the showAllErrors to the step we got to\n      setShowAllErrors(errorOnStepRef.current[current_step])\n\n      forceUpdate()\n    },\n    [setShowAllErrors]\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: activeIndexRef.current,\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={activeIndexRef.current}\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/useStep.d.ts

@@ -0,0 +1,3 @@
+import { StepsContextState } from './StepsContext';
+import { Identifier } from '../types';
+export declare function useStep(id?: Identifier): StepsContextState;

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

@@ -0,0 +1,12 @@
+"use client";
+
+import { useContext, useRef } from 'react';
+import StepsContext from './StepsContext';
+import { useSharedState } from '../../../shared/helpers/useSharedState';
+export function useStep(id = null) {
+  const sharedDataRef = useRef(null);
+  sharedDataRef.current = useSharedState(id ? id + '-steps' : undefined);
+  const context = useContext(StepsContext);
+  return sharedDataRef.current.data || context;
+}
+//# sourceMappingURL=useStep.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useStep.js","names":["useContext","useRef","StepsContext","useSharedState","useStep","id","sharedDataRef","current","undefined","context","data"],"sources":["../../../../../src/extensions/forms/StepsLayout/useStep.tsx"],"sourcesContent":["import { useContext, useRef } from 'react'\nimport StepsContext, { StepsContextState } from './StepsContext'\nimport { Identifier } from '../types'\nimport { useSharedState } from '../../../shared/helpers/useSharedState'\n\nexport function useStep(id: Identifier = null) {\n  const sharedDataRef =\n    useRef<ReturnType<typeof useSharedState<StepsContextState>>>(null)\n  sharedDataRef.current = useSharedState<StepsContextState>(\n    id ? id + '-steps' : undefined\n  )\n\n  const context = useContext(StepsContext)\n  return sharedDataRef.current.data || context\n}\n"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,MAAM,QAAQ,OAAO;AAC1C,OAAOC,YAAY,MAA6B,gBAAgB;AAEhE,SAASC,cAAc,QAAQ,wCAAwC;AAEvE,OAAO,SAASC,OAAOA,CAACC,EAAc,GAAG,IAAI,EAAE;EAC7C,MAAMC,aAAa,GACjBL,MAAM,CAAuD,IAAI,CAAC;EACpEK,aAAa,CAACC,OAAO,GAAGJ,cAAc,CACpCE,EAAE,GAAGA,EAAE,GAAG,QAAQ,GAAGG,SACvB,CAAC;EAED,MAAMC,OAAO,GAAGT,UAAU,CAACE,YAAY,CAAC;EACxC,OAAOI,aAAa,CAACC,OAAO,CAACG,IAAI,IAAID,OAAO;AAC9C"}

package/es/extensions/forms/style/dnb-forms.css

@@ -402,8 +402,8 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .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);