@dnb/eufemia 10.44.0 → 10.46.0

package/extensions/forms/Value/SelectCountry/SelectCountry.js

@@ -0,0 +1,44 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["value", "className", "label"];
+import React, { useContext, useMemo } from 'react';
+import classnames from 'classnames';
+import { useTranslation, useValueProps } from '../../hooks';
+import ValueBlock from '../../ValueBlock';
+import SharedContext from '../../../../shared/Context';
+import { getCountryData } from '../../Field/SelectCountry';
+function SelectCountry(props) {
+  const {
+    locale
+  } = useContext(SharedContext);
+  const translations = useTranslation().SelectCountry;
+  const _useValueProps = useValueProps(props),
+    {
+      value,
+      className,
+      label = translations.label
+    } = _useValueProps,
+    rest = _objectWithoutProperties(_useValueProps, _excluded);
+  const countryName = useMemo(() => {
+    var _getCountryData$at;
+    if (!value) {
+      return null;
+    }
+    const lang = locale === null || locale === void 0 ? void 0 : locale.split('-')[0];
+    return (_getCountryData$at = getCountryData({
+      lang,
+      filter: country => {
+        return country.iso === value;
+      }
+    }).at(0)) === null || _getCountryData$at === void 0 ? void 0 : _getCountryData$at.content;
+  }, [locale, value]);
+  return React.createElement(ValueBlock, _extends({
+    label: label,
+    className: classnames('dnb-forms-value-select-country', className)
+  }, rest), countryName);
+}
+SelectCountry._supportsSpacingProps = true;
+export default SelectCountry;
+//# sourceMappingURL=SelectCountry.js.map

package/extensions/forms/Value/SelectCountry/SelectCountry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectCountry.js","names":["React","useContext","useMemo","classnames","useTranslation","useValueProps","ValueBlock","SharedContext","getCountryData","SelectCountry","props","locale","translations","_useValueProps","value","className","label","rest","_objectWithoutProperties","_excluded","countryName","_getCountryData$at","lang","split","filter","country","iso","at","content","createElement","_extends","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/SelectCountry/SelectCountry.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { useTranslation, useValueProps } from '../../hooks'\nimport { ValueProps } from '../../types'\nimport ValueBlock from '../../ValueBlock'\nimport SharedContext from '../../../../shared/Context'\nimport { getCountryData } from '../../Field/SelectCountry'\nimport { CountryLang } from '../../constants/countries'\n\nexport type Props = ValueProps<string>\n\nfunction SelectCountry(props: Props) {\n  const { locale } = useContext(SharedContext)\n  const translations = useTranslation().SelectCountry\n  const {\n    value,\n    className,\n    label = translations.label,\n    ...rest\n  } = useValueProps(props)\n\n  const countryName = useMemo(() => {\n    if (!value) {\n      return null\n    }\n\n    const lang = locale?.split('-')[0] as CountryLang\n    return getCountryData({\n      lang,\n      filter: (country) => {\n        return country.iso === value\n      },\n    }).at(0)?.content\n  }, [locale, value])\n\n  return (\n    <ValueBlock\n      label={label}\n      className={classnames('dnb-forms-value-select-country', className)}\n      {...rest}\n    >\n      {countryName}\n    </ValueBlock>\n  )\n}\n\nSelectCountry._supportsSpacingProps = true\nexport default SelectCountry\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,cAAc,EAAEC,aAAa,QAAQ,aAAa;AAE3D,OAAOC,UAAU,MAAM,kBAAkB;AACzC,OAAOC,aAAa,MAAM,4BAA4B;AACtD,SAASC,cAAc,QAAQ,2BAA2B;AAK1D,SAASC,aAAaA,CAACC,KAAY,EAAE;EACnC,MAAM;IAAEC;EAAO,CAAC,GAAGV,UAAU,CAACM,aAAa,CAAC;EAC5C,MAAMK,YAAY,GAAGR,cAAc,CAAC,CAAC,CAACK,aAAa;EACnD,MAAAI,cAAA,GAKIR,aAAa,CAACK,KAAK,CAAC;IALlB;MACJI,KAAK;MACLC,SAAS;MACTC,KAAK,GAAGJ,YAAY,CAACI;IAEvB,CAAC,GAAAH,cAAA;IADII,IAAI,GAAAC,wBAAA,CAAAL,cAAA,EAAAM,SAAA;EAGT,MAAMC,WAAW,GAAGlB,OAAO,CAAC,MAAM;IAAA,IAAAmB,kBAAA;IAChC,IAAI,CAACP,KAAK,EAAE;MACV,OAAO,IAAI;IACb;IAEA,MAAMQ,IAAI,GAAGX,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEY,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAgB;IACjD,QAAAF,kBAAA,GAAOb,cAAc,CAAC;MACpBc,IAAI;MACJE,MAAM,EAAGC,OAAO,IAAK;QACnB,OAAOA,OAAO,CAACC,GAAG,KAAKZ,KAAK;MAC9B;IACF,CAAC,CAAC,CAACa,EAAE,CAAC,CAAC,CAAC,cAAAN,kBAAA,uBALDA,kBAAA,CAKGO,OAAO;EACnB,CAAC,EAAE,CAACjB,MAAM,EAAEG,KAAK,CAAC,CAAC;EAEnB,OACEd,KAAA,CAAA6B,aAAA,CAACvB,UAAU,EAAAwB,QAAA;IACTd,KAAK,EAAEA,KAAM;IACbD,SAAS,EAAEZ,UAAU,CAAC,gCAAgC,EAAEY,SAAS;EAAE,GAC/DE,IAAI,GAEPG,WACS,CAAC;AAEjB;AAEAX,aAAa,CAACsB,qBAAqB,GAAG,IAAI;AAC1C,eAAetB,aAAa"}

package/extensions/forms/Value/SelectCountry/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './SelectCountry';
+export * from './SelectCountry';

package/extensions/forms/Value/SelectCountry/index.js

@@ -0,0 +1,3 @@
+export { default } from './SelectCountry';
+export * from './SelectCountry';
+//# sourceMappingURL=index.js.map

package/extensions/forms/Value/SelectCountry/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../../../../src/extensions/forms/Value/SelectCountry/index.ts"],"sourcesContent":["export { default } from './SelectCountry'\nexport * from './SelectCountry'\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,iBAAiB;AACzC,cAAc,iBAAiB"}

package/extensions/forms/Value/Selection/Selection.d.ts

@@ -0,0 +1,9 @@
+import { Path, ValueProps } from '../../types';
+export type Props = ValueProps<string> & {
+    dataPath?: Path;
+};
+declare function Selection(props: Props): import("react/jsx-runtime").JSX.Element;
+declare namespace Selection {
+    var _supportsSpacingProps: boolean;
+}
+export default Selection;

package/extensions/forms/Value/Selection/Selection.js

@@ -0,0 +1,48 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["path", "dataPath", "value"];
+import React, { useContext, useMemo } from 'react';
+import StringValue from '../String';
+import { useValueProps } from '../../hooks';
+import useDataValue from '../../hooks/useDataValue';
+import Context from '../../DataContext/Context';
+import { convertJsxToString } from '../../../../shared/component-helper';
+function Selection(props) {
+  const {
+    fieldPropsRef
+  } = useContext(Context) || {};
+  const _useValueProps = useValueProps(props),
+    {
+      path,
+      dataPath,
+      value
+    } = _useValueProps,
+    rest = _objectWithoutProperties(_useValueProps, _excluded);
+  const {
+    getValueByPath
+  } = useDataValue();
+  const valueToDisplay = useMemo(() => {
+    var _fieldPropsRef$curren;
+    const fieldProp = fieldPropsRef === null || fieldPropsRef === void 0 ? void 0 : (_fieldPropsRef$curren = fieldPropsRef.current) === null || _fieldPropsRef$curren === void 0 ? void 0 : _fieldPropsRef$curren[path];
+    if (path || dataPath) {
+      var _getValueByPath, _getValueByPath$map, _list, _list$find, _list$find$call, _list$find$call$props;
+      let list = (_getValueByPath = getValueByPath(dataPath)) === null || _getValueByPath === void 0 ? void 0 : (_getValueByPath$map = _getValueByPath.map) === null || _getValueByPath$map === void 0 ? void 0 : _getValueByPath$map.call(_getValueByPath, props => ({
+        props
+      }));
+      if (!list) {
+        list = fieldProp === null || fieldProp === void 0 ? void 0 : fieldProp['children'];
+      }
+      const title = (_list = list) === null || _list === void 0 ? void 0 : (_list$find = _list.find) === null || _list$find === void 0 ? void 0 : (_list$find$call = _list$find.call(_list, child => child.props.value === value)) === null || _list$find$call === void 0 ? void 0 : (_list$find$call$props = _list$find$call.props) === null || _list$find$call$props === void 0 ? void 0 : _list$find$call$props.title;
+      return title ? convertJsxToString(title) : value;
+    }
+    return value;
+  }, [dataPath, fieldPropsRef, getValueByPath, path, value]);
+  return React.createElement(StringValue, _extends({
+    value: valueToDisplay
+  }, rest));
+}
+Selection._supportsSpacingProps = true;
+export default Selection;
+//# sourceMappingURL=Selection.js.map

package/extensions/forms/Value/Selection/Selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Selection.js","names":["React","useContext","useMemo","StringValue","useValueProps","useDataValue","Context","convertJsxToString","Selection","props","fieldPropsRef","_useValueProps","path","dataPath","value","rest","_objectWithoutProperties","_excluded","getValueByPath","valueToDisplay","_fieldPropsRef$curren","fieldProp","current","_getValueByPath","_getValueByPath$map","_list","_list$find","_list$find$call","_list$find$call$props","list","map","call","title","find","child","createElement","_extends","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/Selection/Selection.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport StringValue from '../String'\nimport { Path, ValueProps } from '../../types'\nimport { useValueProps } from '../../hooks'\nimport useDataValue from '../../hooks/useDataValue'\nimport Context from '../../DataContext/Context'\nimport { convertJsxToString } from '../../../../shared/component-helper'\nimport { Data } from '../../Field/Selection'\n\nexport type Props = ValueProps<string> & {\n  dataPath?: Path\n}\n\nfunction Selection(props: Props) {\n  const { fieldPropsRef } = useContext(Context) || {}\n  const { path, dataPath, value, ...rest } = useValueProps(props)\n  const { getValueByPath } = useDataValue()\n\n  const valueToDisplay = useMemo<string | undefined>(() => {\n    const fieldProp = fieldPropsRef?.current?.[path]\n\n    if (path || dataPath) {\n      let list = getValueByPath(dataPath)?.map?.((props) => ({ props }))\n\n      if (!list) {\n        list = fieldProp?.['children'] as Array<\n          Omit<JSX.Element, 'props'> & { props: Data[number] }\n        >\n      }\n\n      const title = list?.find?.((child) => child.props.value === value)\n        ?.props?.title\n\n      return title ? convertJsxToString(title) : value\n    }\n\n    return value\n  }, [dataPath, fieldPropsRef, getValueByPath, path, value])\n\n  return <StringValue value={valueToDisplay} {...rest} />\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,WAAW,MAAM,WAAW;AAEnC,SAASC,aAAa,QAAQ,aAAa;AAC3C,OAAOC,YAAY,MAAM,0BAA0B;AACnD,OAAOC,OAAO,MAAM,2BAA2B;AAC/C,SAASC,kBAAkB,QAAQ,qCAAqC;AAOxE,SAASC,SAASA,CAACC,KAAY,EAAE;EAC/B,MAAM;IAAEC;EAAc,CAAC,GAAGT,UAAU,CAACK,OAAO,CAAC,IAAI,CAAC,CAAC;EACnD,MAAAK,cAAA,GAA2CP,aAAa,CAACK,KAAK,CAAC;IAAzD;MAAEG,IAAI;MAAEC,QAAQ;MAAEC;IAAe,CAAC,GAAAH,cAAA;IAANI,IAAI,GAAAC,wBAAA,CAAAL,cAAA,EAAAM,SAAA;EACtC,MAAM;IAAEC;EAAe,CAAC,GAAGb,YAAY,CAAC,CAAC;EAEzC,MAAMc,cAAc,GAAGjB,OAAO,CAAqB,MAAM;IAAA,IAAAkB,qBAAA;IACvD,MAAMC,SAAS,GAAGX,aAAa,aAAbA,aAAa,wBAAAU,qBAAA,GAAbV,aAAa,CAAEY,OAAO,cAAAF,qBAAA,uBAAtBA,qBAAA,CAAyBR,IAAI,CAAC;IAEhD,IAAIA,IAAI,IAAIC,QAAQ,EAAE;MAAA,IAAAU,eAAA,EAAAC,mBAAA,EAAAC,KAAA,EAAAC,UAAA,EAAAC,eAAA,EAAAC,qBAAA;MACpB,IAAIC,IAAI,IAAAN,eAAA,GAAGL,cAAc,CAACL,QAAQ,CAAC,cAAAU,eAAA,wBAAAC,mBAAA,GAAxBD,eAAA,CAA0BO,GAAG,cAAAN,mBAAA,uBAA7BA,mBAAA,CAAAO,IAAA,CAAAR,eAAA,EAAiCd,KAAK,KAAM;QAAEA;MAAM,CAAC,CAAC,CAAC;MAElE,IAAI,CAACoB,IAAI,EAAE;QACTA,IAAI,GAAGR,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAG,UAAU,CAE5B;MACH;MAEA,MAAMW,KAAK,IAAAP,KAAA,GAAGI,IAAI,cAAAJ,KAAA,wBAAAC,UAAA,GAAJD,KAAA,CAAMQ,IAAI,cAAAP,UAAA,wBAAAC,eAAA,GAAVD,UAAA,CAAAK,IAAA,CAAAN,KAAA,EAAcS,KAAK,IAAKA,KAAK,CAACzB,KAAK,CAACK,KAAK,KAAKA,KAAK,CAAC,cAAAa,eAAA,wBAAAC,qBAAA,GAApDD,eAAA,CACVlB,KAAK,cAAAmB,qBAAA,uBADKA,qBAAA,CACHI,KAAK;MAEhB,OAAOA,KAAK,GAAGzB,kBAAkB,CAACyB,KAAK,CAAC,GAAGlB,KAAK;IAClD;IAEA,OAAOA,KAAK;EACd,CAAC,EAAE,CAACD,QAAQ,EAAEH,aAAa,EAAEQ,cAAc,EAAEN,IAAI,EAAEE,KAAK,CAAC,CAAC;EAE1D,OAAOd,KAAA,CAAAmC,aAAA,CAAChC,WAAW,EAAAiC,QAAA;IAACtB,KAAK,EAAEK;EAAe,GAAKJ,IAAI,CAAG,CAAC;AACzD;AAEAP,SAAS,CAAC6B,qBAAqB,GAAG,IAAI;AACtC,eAAe7B,SAAS"}

package/extensions/forms/Value/Selection/SelectionDocs.d.ts

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

package/extensions/forms/Value/Selection/SelectionDocs.js

@@ -0,0 +1,8 @@
+export const SelectionProperties = {
+  dataPath: {
+    doc: 'The path to the context data (Form.Handler). The context data object needs to have a `value` and a `title` property. The generated options will be placed above given JSX based children.',
+    type: 'string',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=SelectionDocs.js.map

package/extensions/forms/Value/Selection/SelectionDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionDocs.js","names":["SelectionProperties","dataPath","doc","type","status"],"sources":["../../../../../../src/extensions/forms/Value/Selection/SelectionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const SelectionProperties: PropertiesTableProps = {\n  dataPath: {\n    doc: 'The path to the context data (Form.Handler). The context data object needs to have a `value` and a `title` property. The generated options will be placed above given JSX based children.',\n    type: 'string',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,mBAAyC,GAAG;EACvDC,QAAQ,EAAE;IACRC,GAAG,EAAE,2LAA2L;IAChMC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AACF,CAAC"}

package/extensions/forms/Value/Selection/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Selection';
+export * from './Selection';

package/extensions/forms/Value/Selection/index.js

@@ -0,0 +1,3 @@
+export { default } from './Selection';
+export * from './Selection';
+//# sourceMappingURL=index.js.map

package/extensions/forms/Value/Selection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../../../../src/extensions/forms/Value/Selection/index.ts"],"sourcesContent":["export { default } from './Selection'\nexport * from './Selection'\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,aAAa;AACrC,cAAc,aAAa"}

package/extensions/forms/Value/ValueDocs.js

@@ -10,10 +10,15 @@ export const ValueProperties = {
     status: 'optional'
   },
   label: {
-    doc: 'Field label to show above the data value.',
+    doc: 'Field label to show above the displayed value.',
     type: 'string',
     status: 'optional'
   },
+  inheritLabel: {
+    doc: 'Use `true` to inherit the label from a visible (rendered) field with the same path.',
+    type: 'boolean',
+    status: 'optional'
+  },
   showEmpty: {
     doc: 'Shows the value even if it is empty.',
     type: 'boolean',

package/extensions/forms/Value/ValueDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValueDocs.js","names":["ValueProperties","value","doc","type","status","defaultValue","label","showEmpty","placeholder","path","inline","maxWidth","transformIn"],"sources":["../../../../../src/extensions/forms/Value/ValueDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../shared/types'\n\nexport const ValueProperties: PropertiesTableProps = {\n  value: {\n    doc: 'Value for the value component. Will take precedence over the path value given in the data context.',\n    type: '{valueType}',\n    status: 'optional',\n  },\n  defaultValue: {\n    doc: 'Default value for the value component. Will not take precedence over the path value given in the data context.',\n    type: '{valueType}',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Field label to show above the data value.',\n    type: 'string',\n    status: 'optional',\n  },\n  showEmpty: {\n    doc: 'Shows the value even if it is empty.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  placeholder: {\n    doc: 'Text showing in place of the value if no value is given.',\n    type: 'string',\n    status: 'optional',\n  },\n  path: {\n    doc: 'JSON Pointer for where the data for this input is located in the source dataset.',\n    type: 'string',\n    status: 'optional',\n  },\n  inline: {\n    doc: 'For showing the value inline (not as a block element).',\n    type: 'boolean',\n    status: 'optional',\n  },\n  maxWidth: {\n    doc: 'Use `auto` for no max-width (use browser default), `small`, `medium` or `large` for predefined standard max widths. Defaults to `large`.',\n    type: 'string',\n    status: 'optional',\n  },\n  transformIn: {\n    doc: 'Transforms the `value` before its displayed in the value component.',\n    type: 'function',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,eAAqC,GAAG;EACnDC,KAAK,EAAE;IACLC,GAAG,EAAE,oGAAoG;IACzGC,IAAI,EAAE,aAAa;IACnBC,MAAM,EAAE;EACV,CAAC;EACDC,YAAY,EAAE;IACZH,GAAG,EAAE,gHAAgH;IACrHC,IAAI,EAAE,aAAa;IACnBC,MAAM,EAAE;EACV,CAAC;EACDE,KAAK,EAAE;IACLJ,GAAG,EAAE,2CAA2C;IAChDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,SAAS,EAAE;IACTL,GAAG,EAAE,sCAAsC;IAC3CC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDI,WAAW,EAAE;IACXN,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,IAAI,EAAE;IACJP,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,MAAM,EAAE;IACNR,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,QAAQ,EAAE;IACRT,GAAG,EAAE,0IAA0I;IAC/IC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,WAAW,EAAE;IACXV,GAAG,EAAE,qEAAqE;IAC1EC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"ValueDocs.js","names":["ValueProperties","value","doc","type","status","defaultValue","label","inheritLabel","showEmpty","placeholder","path","inline","maxWidth","transformIn"],"sources":["../../../../../src/extensions/forms/Value/ValueDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../shared/types'\n\nexport const ValueProperties: PropertiesTableProps = {\n  value: {\n    doc: 'Value for the value component. Will take precedence over the path value given in the data context.',\n    type: '{valueType}',\n    status: 'optional',\n  },\n  defaultValue: {\n    doc: 'Default value for the value component. Will not take precedence over the path value given in the data context.',\n    type: '{valueType}',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Field label to show above the displayed value.',\n    type: 'string',\n    status: 'optional',\n  },\n  inheritLabel: {\n    doc: 'Use `true` to inherit the label from a visible (rendered) field with the same path.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  showEmpty: {\n    doc: 'Shows the value even if it is empty.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  placeholder: {\n    doc: 'Text showing in place of the value if no value is given.',\n    type: 'string',\n    status: 'optional',\n  },\n  path: {\n    doc: 'JSON Pointer for where the data for this input is located in the source dataset.',\n    type: 'string',\n    status: 'optional',\n  },\n  inline: {\n    doc: 'For showing the value inline (not as a block element).',\n    type: 'boolean',\n    status: 'optional',\n  },\n  maxWidth: {\n    doc: 'Use `auto` for no max-width (use browser default), `small`, `medium` or `large` for predefined standard max widths. Defaults to `large`.',\n    type: 'string',\n    status: 'optional',\n  },\n  transformIn: {\n    doc: 'Transforms the `value` before its displayed in the value component.',\n    type: 'function',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,eAAqC,GAAG;EACnDC,KAAK,EAAE;IACLC,GAAG,EAAE,oGAAoG;IACzGC,IAAI,EAAE,aAAa;IACnBC,MAAM,EAAE;EACV,CAAC;EACDC,YAAY,EAAE;IACZH,GAAG,EAAE,gHAAgH;IACrHC,IAAI,EAAE,aAAa;IACnBC,MAAM,EAAE;EACV,CAAC;EACDE,KAAK,EAAE;IACLJ,GAAG,EAAE,gDAAgD;IACrDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,YAAY,EAAE;IACZL,GAAG,EAAE,qFAAqF;IAC1FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDI,SAAS,EAAE;IACTN,GAAG,EAAE,sCAAsC;IAC3CC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,WAAW,EAAE;IACXP,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,IAAI,EAAE;IACJR,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,MAAM,EAAE;IACNT,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDQ,QAAQ,EAAE;IACRV,GAAG,EAAE,0IAA0I;IAC/IC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDS,WAAW,EAAE;IACXX,GAAG,EAAE,qEAAqE;IAC1EC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC"}

package/extensions/forms/Value/index.d.ts

@@ -12,3 +12,6 @@ export { default as BankAccountNumber } from './BankAccountNumber';
 export { default as OrganizationNumber } from './OrganizationNumber';
 export { default as SummaryList } from './SummaryList';
 export { default as Composition } from './Composition';
+export { default as SelectCountry } from './SelectCountry';
+export { default as ArraySelection } from './ArraySelection';
+export { default as Selection } from './Selection';

package/extensions/forms/Value/index.js

@@ -12,4 +12,7 @@ export { default as BankAccountNumber } from './BankAccountNumber';
 export { default as OrganizationNumber } from './OrganizationNumber';
 export { default as SummaryList } from './SummaryList';
 export { default as Composition } from './Composition';
+export { default as SelectCountry } from './SelectCountry';
+export { default as ArraySelection } from './ArraySelection';
+export { default as Selection } from './Selection';
 //# sourceMappingURL=index.js.map

package/extensions/forms/Value/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","String","Number","Boolean","Currency","Date","Email","Name","NationalIdentityNumber","PostalCodeAndCity","PhoneNumber","BankAccountNumber","OrganizationNumber","SummaryList","Composition"],"sources":["../../../../../src/extensions/forms/Value/index.ts"],"sourcesContent":["export { default as String } from './String'\nexport { default as Number } from './Number'\nexport { default as Boolean } from './Boolean'\nexport { default as Currency } from './Currency'\nexport { default as Date } from './Date'\nexport { default as Email } from './Email'\nexport { default as Name } from './Name'\nexport { default as NationalIdentityNumber } from './NationalIdentityNumber'\nexport { default as PostalCodeAndCity } from './PostalCodeAndCity'\nexport { default as PhoneNumber } from './PhoneNumber'\nexport { default as BankAccountNumber } from './BankAccountNumber'\nexport { default as OrganizationNumber } from './OrganizationNumber'\nexport { default as SummaryList } from './SummaryList'\nexport { default as Composition } from './Composition'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAAM,QAAQ,UAAU;AAC5C,SAASD,OAAO,IAAIE,MAAM,QAAQ,UAAU;AAC5C,SAASF,OAAO,IAAIG,OAAO,QAAQ,WAAW;AAC9C,SAASH,OAAO,IAAII,QAAQ,QAAQ,YAAY;AAChD,SAASJ,OAAO,IAAIK,IAAI,QAAQ,QAAQ;AACxC,SAASL,OAAO,IAAIM,KAAK,QAAQ,SAAS;AAC1C,SAASN,OAAO,IAAIO,IAAI,QAAQ,QAAQ;AACxC,SAASP,OAAO,IAAIQ,sBAAsB,QAAQ,0BAA0B;AAC5E,SAASR,OAAO,IAAIS,iBAAiB,QAAQ,qBAAqB;AAClE,SAAST,OAAO,IAAIU,WAAW,QAAQ,eAAe;AACtD,SAASV,OAAO,IAAIW,iBAAiB,QAAQ,qBAAqB;AAClE,SAASX,OAAO,IAAIY,kBAAkB,QAAQ,sBAAsB;AACpE,SAASZ,OAAO,IAAIa,WAAW,QAAQ,eAAe;AACtD,SAASb,OAAO,IAAIc,WAAW,QAAQ,eAAe"}
+{"version":3,"file":"index.js","names":["default","String","Number","Boolean","Currency","Date","Email","Name","NationalIdentityNumber","PostalCodeAndCity","PhoneNumber","BankAccountNumber","OrganizationNumber","SummaryList","Composition","SelectCountry","ArraySelection","Selection"],"sources":["../../../../../src/extensions/forms/Value/index.ts"],"sourcesContent":["export { default as String } from './String'\nexport { default as Number } from './Number'\nexport { default as Boolean } from './Boolean'\nexport { default as Currency } from './Currency'\nexport { default as Date } from './Date'\nexport { default as Email } from './Email'\nexport { default as Name } from './Name'\nexport { default as NationalIdentityNumber } from './NationalIdentityNumber'\nexport { default as PostalCodeAndCity } from './PostalCodeAndCity'\nexport { default as PhoneNumber } from './PhoneNumber'\nexport { default as BankAccountNumber } from './BankAccountNumber'\nexport { default as OrganizationNumber } from './OrganizationNumber'\nexport { default as SummaryList } from './SummaryList'\nexport { default as Composition } from './Composition'\nexport { default as SelectCountry } from './SelectCountry'\nexport { default as ArraySelection } from './ArraySelection'\nexport { default as Selection } from './Selection'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAAM,QAAQ,UAAU;AAC5C,SAASD,OAAO,IAAIE,MAAM,QAAQ,UAAU;AAC5C,SAASF,OAAO,IAAIG,OAAO,QAAQ,WAAW;AAC9C,SAASH,OAAO,IAAII,QAAQ,QAAQ,YAAY;AAChD,SAASJ,OAAO,IAAIK,IAAI,QAAQ,QAAQ;AACxC,SAASL,OAAO,IAAIM,KAAK,QAAQ,SAAS;AAC1C,SAASN,OAAO,IAAIO,IAAI,QAAQ,QAAQ;AACxC,SAASP,OAAO,IAAIQ,sBAAsB,QAAQ,0BAA0B;AAC5E,SAASR,OAAO,IAAIS,iBAAiB,QAAQ,qBAAqB;AAClE,SAAST,OAAO,IAAIU,WAAW,QAAQ,eAAe;AACtD,SAASV,OAAO,IAAIW,iBAAiB,QAAQ,qBAAqB;AAClE,SAASX,OAAO,IAAIY,kBAAkB,QAAQ,sBAAsB;AACpE,SAASZ,OAAO,IAAIa,WAAW,QAAQ,eAAe;AACtD,SAASb,OAAO,IAAIc,WAAW,QAAQ,eAAe;AACtD,SAASd,OAAO,IAAIe,aAAa,QAAQ,iBAAiB;AAC1D,SAASf,OAAO,IAAIgB,cAAc,QAAQ,kBAAkB;AAC5D,SAAShB,OAAO,IAAIiB,SAAS,QAAQ,aAAa"}

package/extensions/forms/ValueBlock/ValueBlock.js

@@ -13,16 +13,16 @@ import SummaryListContext from '../Value/SummaryList/SummaryListContext';
 import ValueBlockContext from './ValueBlockContext';
 import DataContext from '../DataContext/Context';
 import { pickSpacingProps } from '../../../components/flex/utils';
-import IterateElementContext from '../Iterate/IterateElementContext';
+import IterateElementContext from '../Iterate/IterateItemContext';
 import { convertJsxToString } from '../../../shared/component-helper';
 function ValueBlock(props) {
   const summaryListContext = useContext(SummaryListContext);
   const valueBlockContext = useContext(ValueBlockContext);
   const dataContext = useContext(DataContext);
-  const iterateElementContext = useContext(IterateElementContext);
+  const iterateItemContext = useContext(IterateElementContext);
   const {
     index: iterateIndex
-  } = iterateElementContext !== null && iterateElementContext !== void 0 ? iterateElementContext : {};
+  } = iterateItemContext !== null && iterateItemContext !== void 0 ? iterateItemContext : {};
   const {
     className,
     label: labelProp,
@@ -50,12 +50,13 @@ function ValueBlock(props) {
   }
   let content = null;
   const compositionClass = composition && `dnb-forms-value-block__composition--${composition === true ? 'horizontal' : composition}`;
+  const defaultClass = `dnb-forms-value-block__content dnb-forms-value-block__content--gap-${gap === false ? 'none' : gap}`;
   if (summaryListContext) {
     const Item = summaryListContext.isNested ? Dl : summaryListContext.layout === 'horizontal' ? Dl.Item : Fragment;
     if (!label && valueBlockContext !== null && valueBlockContext !== void 0 && valueBlockContext.composition) {
       var _span;
       content = (_span = React.createElement("span", {
-        className: 'dnb-forms-value-block__content' + (gap ? ` dnb-forms-value-block__content--gap-${gap}` : "")
+        className: defaultClass
       }, children)) !== null && _span !== void 0 ? _span : React.createElement("span", {
         className: "dnb-forms-value-block__placeholder"
       }, placeholder);
@@ -69,7 +70,7 @@ function ValueBlock(props) {
       }, label && React.createElement("strong", null, label)), React.createElement(Dd, {
         className: classnames(compositionClass, summaryListContext.layout !== 'grid' && !summaryListContext.isNested && maxWidth && `dnb-forms-value-block--max-width-${maxWidth}`)
       }, children ? React.createElement("span", {
-        className: 'dnb-forms-value-block__content' + (gap ? ` dnb-forms-value-block__content--gap-${gap}` : "")
+        className: defaultClass
       }, children) : React.createElement("span", {
         className: "dnb-forms-value-block__placeholder"
       }, placeholder))));
@@ -83,7 +84,7 @@ function ValueBlock(props) {
       className: "dnb-forms-value-block__label",
       labelDirection: inline ? 'horizontal' : 'vertical'
     }, label), children ? React.createElement("span", {
-      className: 'dnb-forms-value-block__content' + (gap ? ` dnb-forms-value-block__content--gap-${gap}` : "")
+      className: defaultClass
     }, children) : React.createElement("span", {
       className: "dnb-forms-value-block__placeholder"
     }, placeholder));

package/extensions/forms/ValueBlock/ValueBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValueBlock.js","names":["React","Fragment","useContext","useEffect","useMemo","useRef","classnames","warn","Dd","Dl","Dt","Span","FormLabel","SummaryListContext","ValueBlockContext","DataContext","pickSpacingProps","IterateElementContext","convertJsxToString","ValueBlock","props","summaryListContext","valueBlockContext","dataContext","iterateElementContext","index","iterateIndex","className","label","labelProp","inline","maxWidth","composition","placeholder","showEmpty","children","gap","undefined","replace","String","ref","useNotInSummaryList","prerenderFieldProps","content","compositionClass","Item","isNested","layout","_span","createElement","Provider","value","_objectSpread","_extends","element","labelDirection","current","sibling","previousElementSibling","classList","contains","closest","apply","filter","Boolean","error","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/ValueBlock/ValueBlock.tsx"],"sourcesContent":["import React, {\n  Fragment,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport { warn } from '../../../shared/helpers'\nimport { Dd, Dl, Dt, Span } from '../../../elements'\nimport { FormLabel } from '../../../components'\nimport SummaryListContext from '../Value/SummaryList/SummaryListContext'\nimport ValueBlockContext from './ValueBlockContext'\nimport DataContext from '../DataContext/Context'\nimport { ValueProps } from '../types'\nimport { pickSpacingProps } from '../../../components/flex/utils'\nimport IterateElementContext from '../Iterate/IterateElementContext'\nimport { convertJsxToString } from '../../../shared/component-helper'\n\n/**\n * Props are documented in ValueDocs.ts\n */\nexport type Props = Omit<ValueProps<unknown>, 'value'> & {\n  children?: React.ReactNode\n\n  /**\n   * Used internally by the Composition component\n   */\n  composition?: boolean\n\n  /**\n   * Used internally by the Composition component\n   */\n  gap?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | false\n}\n\nfunction ValueBlock(props: Props) {\n  const summaryListContext = useContext(SummaryListContext)\n  const valueBlockContext = useContext(ValueBlockContext)\n  const dataContext = useContext(DataContext)\n  const iterateElementContext = useContext(IterateElementContext)\n  const { index: iterateIndex } = iterateElementContext ?? {}\n\n  const {\n    className,\n    label: labelProp,\n    inline,\n    maxWidth = props.composition ? props.maxWidth : 'large',\n    placeholder,\n    showEmpty,\n    children,\n    composition,\n    gap = 'xx-small',\n  } = props\n\n  const label = useMemo(() => {\n    if (inline) {\n      return null\n    }\n    if (iterateIndex !== undefined) {\n      return convertJsxToString(labelProp).replace(\n        '{itemNr}',\n        String(iterateIndex + 1)\n      )\n    }\n    return labelProp\n  }, [inline, iterateIndex, labelProp])\n\n  const ref = useRef<HTMLElement>(null)\n  useNotInSummaryList(valueBlockContext?.composition ? null : ref, label)\n\n  if (\n    ((children === undefined || children === null || children === false) &&\n      !showEmpty &&\n      !placeholder) ||\n    dataContext?.prerenderFieldProps\n  ) {\n    return null\n  }\n\n  let content = null\n\n  const compositionClass =\n    composition &&\n    classnames(\n      `dnb-forms-value-block__composition--${\n        composition === true ? 'horizontal' : composition\n      }`\n    )\n\n  if (summaryListContext) {\n    const Item = summaryListContext.isNested\n      ? Dl\n      : summaryListContext.layout === 'horizontal'\n      ? Dl.Item\n      : Fragment\n\n    if (!label && valueBlockContext?.composition) {\n      content = (\n        <span\n          className={classnames(\n            'dnb-forms-value-block__content',\n            gap && `dnb-forms-value-block__content--gap-${gap}`\n          )}\n        >\n          {children}\n        </span>\n      ) ?? (\n        <span className=\"dnb-forms-value-block__placeholder\">\n          {placeholder}\n        </span>\n      )\n    } else {\n      content = (\n        <SummaryListContext.Provider\n          value={{ ...summaryListContext, isNested: true }}\n        >\n          <Item>\n            <Dt className=\"dnb-forms-value-block__label\">\n              {label && <strong>{label}</strong>}\n            </Dt>\n            <Dd\n              className={classnames(\n                summaryListContext.layout !== 'grid' &&\n                  !summaryListContext.isNested &&\n                  maxWidth &&\n                  `dnb-forms-value-block--max-width-${maxWidth}`,\n                compositionClass\n              )}\n            >\n              {children ? (\n                <span\n                  className={classnames(\n                    'dnb-forms-value-block__content',\n                    gap && `dnb-forms-value-block__content--gap-${gap}`\n                  )}\n                >\n                  {children}\n                </span>\n              ) : (\n                <span className=\"dnb-forms-value-block__placeholder\">\n                  {placeholder}\n                </span>\n              )}\n            </Dd>\n          </Item>\n        </SummaryListContext.Provider>\n      )\n    }\n  } else {\n    content = (\n      <Span\n        ref={ref}\n        className={classnames(\n          'dnb-forms-value-block',\n          inline && 'dnb-forms-value-block--inline',\n          maxWidth && `dnb-forms-value-block--max-width-${maxWidth}`,\n          compositionClass,\n          className\n        )}\n        {...pickSpacingProps(props)}\n      >\n        {label && (\n          <FormLabel\n            element=\"strong\" // enhance a11y: https://www.w3.org/WAI/WCAG21/Techniques/html/H49\n            className=\"dnb-forms-value-block__label\"\n            labelDirection={inline ? 'horizontal' : 'vertical'}\n          >\n            {label}\n          </FormLabel>\n        )}\n        {children ? (\n          <span\n            className={classnames(\n              'dnb-forms-value-block__content',\n              gap && `dnb-forms-value-block__content--gap-${gap}`\n            )}\n          >\n            {children}\n          </span>\n        ) : (\n          <span className=\"dnb-forms-value-block__placeholder\">\n            {placeholder}\n          </span>\n        )}\n      </Span>\n    )\n  }\n\n  return (\n    <ValueBlockContext.Provider value={props}>\n      {content}\n    </ValueBlockContext.Provider>\n  )\n}\n\nfunction useNotInSummaryList(\n  ref: React.RefObject<HTMLElement>,\n  label?: React.ReactNode\n) {\n  useEffect(() => {\n    if (ref?.current) {\n      try {\n        const sibling = ref.current.previousElementSibling\n\n        if (\n          sibling?.classList.contains('dnb-forms-value-block') &&\n          !ref.current.closest('.dnb-forms-summary-list')\n        ) {\n          warn.apply(\n            warn,\n            [\n              'Value components as siblings should be wrapped inside a Value.SummaryList!',\n              label,\n            ].filter(Boolean)\n          )\n        }\n      } catch (error) {\n        //\n      }\n    }\n  }, [label, ref])\n}\n\nValueBlock._supportsSpacingProps = true\nexport default ValueBlock\n"],"mappings":"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"}
+{"version":3,"file":"ValueBlock.js","names":["React","Fragment","useContext","useEffect","useMemo","useRef","classnames","warn","Dd","Dl","Dt","Span","FormLabel","SummaryListContext","ValueBlockContext","DataContext","pickSpacingProps","IterateElementContext","convertJsxToString","ValueBlock","props","summaryListContext","valueBlockContext","dataContext","iterateItemContext","index","iterateIndex","className","label","labelProp","inline","maxWidth","composition","placeholder","showEmpty","children","gap","undefined","replace","String","ref","useNotInSummaryList","prerenderFieldProps","content","compositionClass","defaultClass","Item","isNested","layout","_span","createElement","Provider","value","_objectSpread","_extends","element","labelDirection","current","sibling","previousElementSibling","classList","contains","closest","apply","filter","Boolean","error","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/ValueBlock/ValueBlock.tsx"],"sourcesContent":["import React, {\n  Fragment,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport { warn } from '../../../shared/helpers'\nimport { Dd, Dl, Dt, Span } from '../../../elements'\nimport { FormLabel } from '../../../components'\nimport SummaryListContext from '../Value/SummaryList/SummaryListContext'\nimport ValueBlockContext from './ValueBlockContext'\nimport DataContext from '../DataContext/Context'\nimport { ValueProps } from '../types'\nimport { pickSpacingProps } from '../../../components/flex/utils'\nimport IterateElementContext from '../Iterate/IterateItemContext'\nimport { convertJsxToString } from '../../../shared/component-helper'\n\n/**\n * Props are documented in ValueDocs.ts\n */\nexport type Props = Omit<ValueProps<unknown>, 'value'> & {\n  children?: React.ReactNode\n\n  /**\n   * Used internally by the Composition component\n   */\n  composition?: boolean\n\n  /**\n   * Used internally by the Composition component\n   */\n  gap?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | false\n}\n\nfunction ValueBlock(props: Props) {\n  const summaryListContext = useContext(SummaryListContext)\n  const valueBlockContext = useContext(ValueBlockContext)\n  const dataContext = useContext(DataContext)\n  const iterateItemContext = useContext(IterateElementContext)\n  const { index: iterateIndex } = iterateItemContext ?? {}\n\n  const {\n    className,\n    label: labelProp,\n    inline,\n    maxWidth = props.composition ? props.maxWidth : 'large',\n    placeholder,\n    showEmpty,\n    children,\n    composition,\n    gap = 'xx-small',\n  } = props\n\n  const label = useMemo(() => {\n    if (inline) {\n      return null\n    }\n    if (iterateIndex !== undefined) {\n      return convertJsxToString(labelProp).replace(\n        '{itemNr}',\n        String(iterateIndex + 1)\n      )\n    }\n    return labelProp\n  }, [inline, iterateIndex, labelProp])\n\n  const ref = useRef<HTMLElement>(null)\n  useNotInSummaryList(valueBlockContext?.composition ? null : ref, label)\n\n  if (\n    ((children === undefined || children === null || children === false) &&\n      !showEmpty &&\n      !placeholder) ||\n    dataContext?.prerenderFieldProps\n  ) {\n    return null\n  }\n\n  let content = null\n\n  const compositionClass =\n    composition &&\n    classnames(\n      `dnb-forms-value-block__composition--${\n        composition === true ? 'horizontal' : composition\n      }`\n    )\n  const defaultClass = classnames(\n    'dnb-forms-value-block__content',\n    `dnb-forms-value-block__content--gap-${gap === false ? 'none' : gap}`\n  )\n\n  if (summaryListContext) {\n    const Item = summaryListContext.isNested\n      ? Dl\n      : summaryListContext.layout === 'horizontal'\n      ? Dl.Item\n      : Fragment\n\n    if (!label && valueBlockContext?.composition) {\n      content = <span className={defaultClass}>{children}</span> ?? (\n        <span className=\"dnb-forms-value-block__placeholder\">\n          {placeholder}\n        </span>\n      )\n    } else {\n      content = (\n        <SummaryListContext.Provider\n          value={{ ...summaryListContext, isNested: true }}\n        >\n          <Item>\n            <Dt className=\"dnb-forms-value-block__label\">\n              {label && <strong>{label}</strong>}\n            </Dt>\n            <Dd\n              className={classnames(\n                summaryListContext.layout !== 'grid' &&\n                  !summaryListContext.isNested &&\n                  maxWidth &&\n                  `dnb-forms-value-block--max-width-${maxWidth}`,\n                compositionClass\n              )}\n            >\n              {children ? (\n                <span className={defaultClass}>{children}</span>\n              ) : (\n                <span className=\"dnb-forms-value-block__placeholder\">\n                  {placeholder}\n                </span>\n              )}\n            </Dd>\n          </Item>\n        </SummaryListContext.Provider>\n      )\n    }\n  } else {\n    content = (\n      <Span\n        ref={ref}\n        className={classnames(\n          'dnb-forms-value-block',\n          inline && 'dnb-forms-value-block--inline',\n          maxWidth && `dnb-forms-value-block--max-width-${maxWidth}`,\n          compositionClass,\n          className\n        )}\n        {...pickSpacingProps(props)}\n      >\n        {label && (\n          <FormLabel\n            element=\"strong\" // enhance a11y: https://www.w3.org/WAI/WCAG21/Techniques/html/H49\n            className=\"dnb-forms-value-block__label\"\n            labelDirection={inline ? 'horizontal' : 'vertical'}\n          >\n            {label}\n          </FormLabel>\n        )}\n        {children ? (\n          <span className={defaultClass}>{children}</span>\n        ) : (\n          <span className=\"dnb-forms-value-block__placeholder\">\n            {placeholder}\n          </span>\n        )}\n      </Span>\n    )\n  }\n\n  return (\n    <ValueBlockContext.Provider value={props}>\n      {content}\n    </ValueBlockContext.Provider>\n  )\n}\n\nfunction useNotInSummaryList(\n  ref: React.RefObject<HTMLElement>,\n  label?: React.ReactNode\n) {\n  useEffect(() => {\n    if (ref?.current) {\n      try {\n        const sibling = ref.current.previousElementSibling\n\n        if (\n          sibling?.classList.contains('dnb-forms-value-block') &&\n          !ref.current.closest('.dnb-forms-summary-list')\n        ) {\n          warn.apply(\n            warn,\n            [\n              'Value components as siblings should be wrapped inside a Value.SummaryList!',\n              label,\n            ].filter(Boolean)\n          )\n        }\n      } catch (error) {\n        //\n      }\n    }\n  }, [label, ref])\n}\n\nValueBlock._supportsSpacingProps = true\nexport default ValueBlock\n"],"mappings":"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"}

package/extensions/forms/ValueBlock/style/dnb-value-block.css

@@ -55,6 +55,9 @@
   /* stylelint-disable */
   /* stylelint-enable */
 }
+.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-none {
+  --column-gap: 0;
+}
 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-xx-small {
   --column-gap: var(--spacing-xx-small);
 }

package/extensions/forms/ValueBlock/style/dnb-value-block.min.css

@@ -1 +1 @@
-@charset "UTF-8";.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt,.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not([class*=dnb-space])>.dnb-dd>.dnb-dl,.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal)>.dnb-dd>.dnb-dl{margin:0}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid)>.dnb-dd{margin-bottom:var(--spacing-medium)}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid)>.dnb-dd:last-of-type{margin-bottom:0}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline:not([class*=__composition]){display:inline-block;font-size:inherit}.dnb-forms-value-block--inline:not([class*=__composition]):after,.dnb-forms-value-block--inline:not([class*=__composition]):before{content:" "}.dnb-forms-value-block+.dnb-forms-value-block--inline:not([class*=__composition]):before{content:none}.dnb-forms-value-block__label,.dnb-forms-value-block__label strong{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:var(--color-black-80)}.dnb-forms-value-block--max-width-stretch{width:100%}@media screen and (min-width:25em){.dnb-forms-value-block--max-width-small{max-width:var(--forms-field-width--small)}.dnb-forms-value-block--max-width-medium{max-width:var(--forms-field-width--medium)}.dnb-forms-value-block--max-width-large{max-width:var(--forms-field-width--large)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{-moz-column-gap:var(--column-gap,0);column-gap:var(--column-gap,0);display:flex;flex-flow:row;row-gap:var(--row-gap,var(--spacing-medium))}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-xx-small{--column-gap:var(--spacing-xx-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-x-small{--column-gap:var(--spacing-x-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-small{--column-gap:var(--spacing-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-medium{--column-gap:var(--spacing-medium)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-large{--column-gap:var(--spacing-large)}@media screen and (min-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{align-items:flex-start}}@media screen and (max-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{flex-flow:column}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not(:has(.dnb-forms-value-block__label)){--row-gap:var(--spacing-x-small)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space])>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dd,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dt{margin:0}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl>.dnb-dd{margin-bottom:0}
+@charset "UTF-8";.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt,.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not([class*=dnb-space])>.dnb-dd>.dnb-dl,.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal)>.dnb-dd>.dnb-dl{margin:0}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid)>.dnb-dd{margin-bottom:var(--spacing-medium)}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid)>.dnb-dd:last-of-type{margin-bottom:0}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline:not([class*=__composition]){display:inline-block;font-size:inherit}.dnb-forms-value-block--inline:not([class*=__composition]):after,.dnb-forms-value-block--inline:not([class*=__composition]):before{content:" "}.dnb-forms-value-block+.dnb-forms-value-block--inline:not([class*=__composition]):before{content:none}.dnb-forms-value-block__label,.dnb-forms-value-block__label strong{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:var(--color-black-80)}.dnb-forms-value-block--max-width-stretch{width:100%}@media screen and (min-width:25em){.dnb-forms-value-block--max-width-small{max-width:var(--forms-field-width--small)}.dnb-forms-value-block--max-width-medium{max-width:var(--forms-field-width--medium)}.dnb-forms-value-block--max-width-large{max-width:var(--forms-field-width--large)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{-moz-column-gap:var(--column-gap,0);column-gap:var(--column-gap,0);display:flex;flex-flow:row;row-gap:var(--row-gap,var(--spacing-medium))}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-none{--column-gap:0}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-xx-small{--column-gap:var(--spacing-xx-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-x-small{--column-gap:var(--spacing-x-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-small{--column-gap:var(--spacing-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-medium{--column-gap:var(--spacing-medium)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-large{--column-gap:var(--spacing-large)}@media screen and (min-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{align-items:flex-start}}@media screen and (max-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{flex-flow:column}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not(:has(.dnb-forms-value-block__label)){--row-gap:var(--spacing-x-small)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space])>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dd,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dt{margin:0}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl>.dnb-dd{margin-bottom:0}

package/extensions/forms/ValueBlock/style/dnb-value-block.scss

@@ -67,6 +67,9 @@
     row-gap: var(--row-gap, var(--spacing-medium));
     column-gap: var(--column-gap, 0);
 
+    &--gap-none {
+      --column-gap: 0;
+    }
     &--gap-xx-small {
       --column-gap: var(--spacing-xx-small);
     }

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

@@ -22,6 +22,7 @@ import useHandleLayoutEffect from './useHandleLayoutEffect';
 import useVisibility from '../../Form/Visibility/useVisibility';
 const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 function WizardContainer(props) {
+  var _dataContext$setHandl;
   const {
       className,
       id: idProp,
@@ -37,6 +38,7 @@ function WizardContainer(props) {
       sidebarId
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
+  const dataContext = useContext(DataContext);
   const {
     hasContext,
     setFormState,
@@ -44,10 +46,11 @@ function WizardContainer(props) {
     setShowAllErrors,
     showAllErrors,
     setSubmitState
-  } = useContext(DataContext);
+  } = dataContext;
   const id = useId(idProp);
   const [, forceUpdate] = useReducer(() => ({}), {});
   const activeIndexRef = useRef(initialActiveIndex);
+  const totalStepsRef = useRef(NaN);
   const errorOnStepRef = useRef({});
   const stepElementRef = useRef();
   const sharedStateRef = useRef();
@@ -137,6 +140,16 @@ function WizardContainer(props) {
       error
     });
   }, [setSubmitState]);
+  const handleSubmit = useCallback(_ref3 => {
+    let {
+      preventSubmit
+    } = _ref3;
+    if (activeIndexRef.current + 1 < totalStepsRef.current) {
+      handleNext();
+      preventSubmit();
+    }
+  }, [handleNext]);
+  (_dataContext$setHandl = dataContext.setHandleSubmit) === null || _dataContext$setHandl === void 0 ? void 0 : _dataContext$setHandl.call(dataContext, handleSubmit);
   const titlesRef = useRef({});
   const updateTitlesRef = useRef();
   const prerenderFieldPropsRef = useRef({});
@@ -152,6 +165,7 @@ function WizardContainer(props) {
       titlesRef,
       updateTitlesRef,
       activeIndexRef,
+      totalStepsRef,
       prerenderFieldProps,
       prerenderFieldPropsRef,
       check,
@@ -193,14 +207,14 @@ function WizardContainer(props) {
     prerenderFieldPropsRef: prerenderFieldPropsRef
   }));
 }
-function DisplaySteps(_ref3) {
+function DisplaySteps(_ref4) {
   let {
     mode,
     variant,
     noAnimation,
     handleChange,
     sidebarId
-  } = _ref3;
+  } = _ref4;
   const [, forceUpdate] = useReducer(() => ({}), {});
   const {
     id,
@@ -226,14 +240,15 @@ function DisplaySteps(_ref3) {
     sidebar_id: sidebar_id
   }));
 }
-function IterateOverSteps(_ref4) {
+function IterateOverSteps(_ref5) {
   let {
     children
-  } = _ref4;
+  } = _ref5;
   const {
     check,
     titlesRef,
     activeIndexRef,
+    totalStepsRef,
     prerenderFieldProps,
     prerenderFieldPropsRef
   } = useContext(WizardContext);
@@ -284,12 +299,13 @@ function IterateOverSteps(_ref4) {
   } else if ((childrenArray === null || childrenArray === void 0 ? void 0 : childrenArray.length) < activeIndexRef.current + 1) {
     activeIndexRef.current = childrenArray.length - 1;
   }
+  totalStepsRef.current = childrenArray === null || childrenArray === void 0 ? void 0 : childrenArray.length;
   return childrenArray;
 }
-function PrerenderFieldPropsOfOtherSteps(_ref5) {
+function PrerenderFieldPropsOfOtherSteps(_ref6) {
   let {
     prerenderFieldPropsRef
-  } = _ref5;
+  } = _ref6;
   const hasRenderedRef = useRef(true);
   if (!hasRenderedRef.current) {
     return null;
@@ -302,18 +318,18 @@ function PrerenderFieldPropsOfOtherSteps(_ref5) {
     key: i
   })))));
 }
-function WizardPortal(_ref6) {
+function WizardPortal(_ref7) {
   let {
     children
-  } = _ref6;
+  } = _ref7;
   if (typeof document !== 'undefined') {
     return ReactDOM.createPortal(children, document.body);
   }
 }
-function PrerenderFieldPropsProvider(_ref7) {
+function PrerenderFieldPropsProvider(_ref8) {
   let {
     children
-  } = _ref7;
+  } = _ref8;
   const {
     data,
     setFieldProps,