@dnb/eufemia 10.41.0 → 10.42.0

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.42.0](https://github.com/dnbexperience/eufemia/compare/v10.41.0...v10.42.0) (2024-07-25)
+
+
+### :bug: Bug Fixes
+
+* **forms:** add support for horizontal layout in SummaryList and adjust spacing and alignment ([#3782](https://github.com/dnbexperience/eufemia/issues/3782)) ([59c2839](https://github.com/dnbexperience/eufemia/commit/59c2839b11abce92e9d733d52ee59af8f4e1ee64))
+
+
+### :sparkles: Features
+
+* **Field. ArraySelection:** adds `checkbox-button` variant ([#3783](https://github.com/dnbexperience/eufemia/issues/3783)) ([9deace8](https://github.com/dnbexperience/eufemia/commit/9deace837177ce3127b9e04acb8a49dfe13230fd))
+* **Img:** add support for loading-prop ([#3778](https://github.com/dnbexperience/eufemia/issues/3778)) ([fe339bf](https://github.com/dnbexperience/eufemia/commit/fe339bf0b6eef991b9095887520d1a4f9148010e))
+
 ## [10.41.0](https://github.com/dnbexperience/eufemia/compare/v10.40.1...v10.41.0) (2024-07-23)
 
 

package/cjs/elements/img/Img.d.ts

@@ -13,9 +13,10 @@ export type ImgProps = SpacingProps & React.HTMLProps<HTMLImageElement> & {
     imgClass?: string;
     element?: DynamicElement & 'figure';
     caption?: string;
+    loading?: 'eager' | 'lazy';
 };
 declare const Img: {
-    ({ caption, alt, element, skeleton, imgClass, className, ...p }: ImgProps): import("react/jsx-runtime").JSX.Element;
+    ({ caption, alt, element, skeleton, imgClass, className, loading, ...p }: ImgProps): import("react/jsx-runtime").JSX.Element;
     _supportsSpacingProps: boolean;
 };
 export default Img;

package/cjs/elements/img/Img.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _Element = _interopRequireDefault(require("../Element"));
 var _SpacingHelper = require("../../components/space/SpacingHelper");
 var _classnames = _interopRequireDefault(require("classnames"));
-const _excluded = ["caption", "alt", "element", "skeleton", "imgClass", "className"];
+const _excluded = ["caption", "alt", "element", "skeleton", "imgClass", "className", "loading"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -20,7 +20,8 @@ const Img = _ref => {
       element = 'figure',
       skeleton,
       imgClass,
-      className
+      className,
+      loading = 'eager'
     } = _ref,
     p = _objectWithoutProperties(_ref, _excluded);
   const [hasError, setError] = _react.default.useState(false);
@@ -32,6 +33,7 @@ const Img = _ref => {
     skeletonMethod: "shape"
   }, _react.default.createElement(_Element.default, _extends({
     as: "img",
+    loading: loading,
     alt: alt,
     internalClass: 'dnb-img' + (hasError ? " dnb-img--error" : ""),
     className: imgClass,

package/cjs/elements/img/Img.js.map

@@ -1 +1 @@
-{"version":3,"file":"Img.js","names":["_react","_interopRequireDefault","require","_Element","_SpacingHelper","_classnames","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Img","_ref","caption","alt","element","skeleton","imgClass","className","p","hasError","setError","React","useState","createElement","as","internalClass","classnames","createSpacingClasses","is","skeletonMethod","onError","removeSpaceProps","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/elements/img/Img.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport E from '../Element'\nimport {\n  createSpacingClasses,\n  removeSpaceProps,\n} from '../../components/space/SpacingHelper'\nimport { SpacingProps } from '../../components/space/types'\nimport { SkeletonShow } from '../../components/skeleton/Skeleton'\nimport classnames from 'classnames'\nimport type { DynamicElement } from '../../shared/types'\n\nexport type ImgProps = SpacingProps &\n  React.HTMLProps<HTMLImageElement> & {\n    src: string\n    alt: string\n    skeleton?: SkeletonShow\n    imgClass?: string\n    element?: DynamicElement & 'figure'\n    caption?: string\n  }\n\nconst Img = ({\n  caption,\n  alt,\n  element = 'figure',\n  skeleton,\n  imgClass,\n  className,\n  ...p\n}: ImgProps) => {\n  const [hasError, setError] = React.useState(false)\n\n  return (\n    <E\n      as={element}\n      internalClass=\"dnb-img\"\n      className={classnames(className, createSpacingClasses(p, p.is))}\n      skeleton={skeleton}\n      skeletonMethod=\"shape\"\n    >\n      <E\n        as=\"img\"\n        alt={alt}\n        internalClass={classnames('dnb-img', hasError && 'dnb-img--error')}\n        className={imgClass}\n        skeleton={skeleton}\n        onError={() => setError(true)}\n        {...removeSpaceProps(p as Omit<ImgProps, 'ref'>)}\n      />\n      {caption && <figcaption>{caption}</figcaption>}\n    </E>\n  )\n}\n\nImg._supportsSpacingProps = true\n\nexport default Img\n"],"mappings":"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"}
+{"version":3,"file":"Img.js","names":["_react","_interopRequireDefault","require","_Element","_SpacingHelper","_classnames","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Img","_ref","caption","alt","element","skeleton","imgClass","className","loading","p","hasError","setError","React","useState","createElement","as","internalClass","classnames","createSpacingClasses","is","skeletonMethod","onError","removeSpaceProps","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/elements/img/Img.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport E from '../Element'\nimport {\n  createSpacingClasses,\n  removeSpaceProps,\n} from '../../components/space/SpacingHelper'\nimport { SpacingProps } from '../../components/space/types'\nimport { SkeletonShow } from '../../components/skeleton/Skeleton'\nimport classnames from 'classnames'\nimport type { DynamicElement } from '../../shared/types'\n\nexport type ImgProps = SpacingProps &\n  React.HTMLProps<HTMLImageElement> & {\n    src: string\n    alt: string\n    skeleton?: SkeletonShow\n    imgClass?: string\n    element?: DynamicElement & 'figure'\n    caption?: string\n    loading?: 'eager' | 'lazy'\n  }\n\nconst Img = ({\n  caption,\n  alt,\n  element = 'figure',\n  skeleton,\n  imgClass,\n  className,\n  loading = 'eager',\n  ...p\n}: ImgProps) => {\n  const [hasError, setError] = React.useState(false)\n\n  return (\n    <E\n      as={element}\n      internalClass=\"dnb-img\"\n      className={classnames(className, createSpacingClasses(p, p.is))}\n      skeleton={skeleton}\n      skeletonMethod=\"shape\"\n    >\n      <E\n        as=\"img\"\n        loading={loading}\n        alt={alt}\n        internalClass={classnames('dnb-img', hasError && 'dnb-img--error')}\n        className={imgClass}\n        skeleton={skeleton}\n        onError={() => setError(true)}\n        {...removeSpaceProps(p as Omit<ImgProps, 'ref'>)}\n      />\n      {caption && <figcaption>{caption}</figcaption>}\n    </E>\n  )\n}\n\nImg._supportsSpacingProps = true\n\nexport default Img\n"],"mappings":";;;;;;AAKA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AAMA,IAAAG,WAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAAmC,MAAAI,SAAA;AAAA,SAAAL,uBAAAM,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AAAA,SAAAQ,yBAAAN,MAAA,EAAAO,QAAA,QAAAP,MAAA,yBAAAJ,MAAA,GAAAY,6BAAA,CAAAR,MAAA,EAAAO,QAAA,OAAAN,GAAA,EAAAJ,CAAA,MAAAJ,MAAA,CAAAgB,qBAAA,QAAAC,gBAAA,GAAAjB,MAAA,CAAAgB,qBAAA,CAAAT,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAAa,gBAAA,CAAAX,MAAA,EAAAF,CAAA,MAAAI,GAAA,GAAAS,gBAAA,CAAAb,CAAA,OAAAU,QAAA,CAAAI,OAAA,CAAAV,GAAA,uBAAAR,MAAA,CAAAS,SAAA,CAAAU,oBAAA,CAAAR,IAAA,CAAAJ,MAAA,EAAAC,GAAA,aAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,cAAAL,MAAA;AAAA,SAAAY,8BAAAR,MAAA,EAAAO,QAAA,QAAAP,MAAA,yBAAAJ,MAAA,WAAAiB,UAAA,GAAApB,MAAA,CAAAqB,IAAA,CAAAd,MAAA,OAAAC,GAAA,EAAAJ,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAgB,UAAA,CAAAd,MAAA,EAAAF,CAAA,MAAAI,GAAA,GAAAY,UAAA,CAAAhB,CAAA,OAAAU,QAAA,CAAAI,OAAA,CAAAV,GAAA,kBAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,YAAAL,MAAA;AAcnC,MAAMmB,GAAG,GAAGC,IAAA,IASI;EAAA,IATH;MACXC,OAAO;MACPC,GAAG;MACHC,OAAO,GAAG,QAAQ;MAClBC,QAAQ;MACRC,QAAQ;MACRC,SAAS;MACTC,OAAO,GAAG;IAEF,CAAC,GAAAP,IAAA;IADNQ,CAAC,GAAAlB,wBAAA,CAAAU,IAAA,EAAA5B,SAAA;EAEJ,MAAM,CAACqC,QAAQ,EAAEC,QAAQ,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;EAElD,OACE9C,MAAA,CAAAS,OAAA,CAAAsC,aAAA,CAAC5C,QAAA,CAAAM,OAAC;IACAuC,EAAE,EAAEX,OAAQ;IACZY,aAAa,EAAC,SAAS;IACvBT,SAAS,EAAE,IAAAU,mBAAU,EAACV,SAAS,EAAE,IAAAW,mCAAoB,EAACT,CAAC,EAAEA,CAAC,CAACU,EAAE,CAAC,CAAE;IAChEd,QAAQ,EAAEA,QAAS;IACnBe,cAAc,EAAC;EAAO,GAEtBrD,MAAA,CAAAS,OAAA,CAAAsC,aAAA,CAAC5C,QAAA,CAAAM,OAAC,EAAAC,QAAA;IACAsC,EAAE,EAAC,KAAK;IACRP,OAAO,EAAEA,OAAQ;IACjBL,GAAG,EAAEA,GAAI;IACTa,aAAa,EAAa,SAAS,IAAEN,QAAQ,0BAAsB;IACnEH,SAAS,EAAED,QAAS;IACpBD,QAAQ,EAAEA,QAAS;IACnBgB,OAAO,EAAEA,CAAA,KAAMV,QAAQ,CAAC,IAAI;EAAE,GAC1B,IAAAW,+BAAgB,EAACb,CAA0B,CAAC,CACjD,CAAC,EACDP,OAAO,IAAInC,MAAA,CAAAS,OAAA,CAAAsC,aAAA,qBAAaZ,OAAoB,CAC5C,CAAC;AAER,CAAC;AAEDF,GAAG,CAACuB,qBAAqB,GAAG,IAAI;AAAA,IAAAC,QAAA,GAEjBxB,GAAG;AAAAyB,OAAA,CAAAjD,OAAA,GAAAgD,QAAA"}

package/cjs/elements/lib.d.ts

@@ -131,7 +131,7 @@ export declare const getElements: () => {
         _supportsSpacingProps: boolean;
     };
     Img: {
-        ({ caption, alt, element, skeleton, imgClass, className, ...p }: import("./Img").ImgProps): import("react/jsx-runtime").JSX.Element;
+        ({ caption, alt, element, skeleton, imgClass, className, loading, ...p }: import("./Img").ImgProps): import("react/jsx-runtime").JSX.Element;
         _supportsSpacingProps: boolean;
     };
     Ingress: {

package/cjs/elements/lists/style/lists-mixins.scss

@@ -109,6 +109,9 @@
 }
 
 @mixin dlStyle() {
+  --column-gap: 1rem;
+  --row-gap: 0.5rem;
+
   &:not([class*='dnb-space__top']) {
     margin-top: 0;
   }
@@ -121,13 +124,14 @@
   line-height: var(--line-height-basis);
 
   & dt {
-    margin-top: 1rem;
-
     padding: 0;
     font-weight: var(--font-weight-medium);
   }
   & dd ~ dt {
-    margin-top: 1.5rem;
+    margin-top: var(--row-gap);
+  }
+  & dt:not(:first-of-type) {
+    margin-top: calc(var(--row-gap) + 1rem);
   }
   & dd {
     padding: 0;
@@ -138,7 +142,7 @@
   }
   & > dd > dl,
   &:not([class*='dnb-space']) > dd > dl {
-    margin-top: 1.5rem;
+    margin-top: calc(var(--row-gap) + 0.5rem);
     margin-left: 2rem;
   }
 
@@ -154,18 +158,20 @@
       max-width: 60ch; // to enhance readability
 
       & dt {
-        margin-right: 1rem;
+        margin-top: 0;
+        margin-right: calc(var(--column-gap) - 0.5rem);
         max-width: var(--dt-max-width);
       }
 
       & dd {
         width: var(--dd-max-width);
+        align-self: end;
       }
 
-      & dt,
+      & dt:not(:first-of-type),
       & dd,
-      & dd ~ dt {
-        margin-top: 0.5rem;
+      & dd ~ dt:not(:first-of-type) {
+        margin-top: var(--row-gap);
         margin-bottom: 0;
         &:first-of-type {
           margin-top: 0;
@@ -174,25 +180,32 @@
     }
 
     dd#{&}__item {
-      display: none;
+      visibility: hidden;
+      user-select: none;
       flex-basis: 100%; // ensures we always break to a new line, no matter what the available space is
       height: 0;
       margin: 0;
     }
+    &:not(#{&}__layout--horizontal) dd#{&}__item {
+      display: none;
+    }
 
     &__layout--grid {
       --dt-max-width: 15ch;
-      --dd-max-width: 30ch;
+      --dd-max-width: 40ch;
 
       display: grid;
       grid-template-columns: max-content 1fr;
-      column-gap: 1rem;
-      row-gap: 1rem;
+      column-gap: var(--column-gap);
+      row-gap: var(--row-gap);
 
       /* stylelint-disable */
       & dt {
         max-width: var(--dt-max-width);
       }
+      & dt:not(:first-of-type) {
+        margin-top: 0;
+      }
       & dd {
         max-width: var(--dd-max-width);
         align-self: end;

package/cjs/extensions/forms/Field/ArraySelection/ArraySelection.d.ts

@@ -3,7 +3,7 @@ import { ReturnAdditional } from '../../hooks/useFieldProps';
 import { FieldHelpProps, FieldProps } from '../../types';
 export type Props = FieldHelpProps & FieldProps<Array<string | number> | undefined> & {
     children?: React.ReactNode;
-    variant?: 'checkbox' | 'button';
+    variant?: 'checkbox' | 'button' | 'checkbox-button';
     optionsLayout?: 'horizontal' | 'vertical';
 };
 declare function ArraySelection(props: Props): import("react/jsx-runtime").JSX.Element;

package/cjs/extensions/forms/Field/ArraySelection/ArraySelection.js

@@ -47,7 +47,7 @@ function ArraySelection(props) {
   } = (0, _hooks.useFieldProps)(props);
   const fieldBlockProps = _objectSpread({
     forId: id,
-    className: (0, _classnames.default)(`dnb-forms-field-array-selection dnb-forms-field-array-selection--variant-${variant} dnb-forms-field-array-selection--layout-${layout} dnb-forms-field-array-selection--options-layout-${optionsLayout}`, className),
+    className: (0, _classnames.default)(`dnb-forms-field-array-selection dnb-forms-field-array-selection--variant-${variant === 'checkbox' ? 'checkbox' : 'button'} dnb-forms-field-array-selection--layout-${layout} dnb-forms-field-array-selection--options-layout-${optionsLayout}`, className),
     contentClassName: 'dnb-forms-field-array-selection__options',
     help,
     info,
@@ -75,15 +75,16 @@ function ArraySelection(props) {
     hasError
   });
   switch (variant) {
-    case 'button':
+    case 'checkbox':
+      return _react.default.createElement(_FieldBlock.default, fieldBlockProps, options);
+    default:
       return _react.default.createElement(_FieldBlock.default, fieldBlockProps, _react.default.createElement(_ToggleButtonGroupContext.default.Provider, {
         value: {
           status: hasError ? 'error' : undefined,
-          disabled
+          disabled,
+          variant: variant === 'checkbox-button' ? 'checkbox' : 'default'
         }
       }, options));
-    case 'checkbox':
-      return _react.default.createElement(_FieldBlock.default, fieldBlockProps, options);
   }
 }
 function getCheckboxOrToggleOptions(_ref) {
@@ -125,9 +126,9 @@ function getCheckboxOrToggleOptions(_ref) {
     return _react.default.createElement(Component, _extends({
       id: optionsCount === 1 ? id : undefined,
       key: `option-${i}-${value}`,
-      className: (0, _classnames.default)(`dnb-forms-field-array-selection__${variant}`, className),
+      className: (0, _classnames.default)(`dnb-forms-field-array-selection__${variant === 'checkbox' ? 'checkbox' : 'button'}`, className),
       label: variant === 'checkbox' ? label : undefined,
-      text: variant === 'button' ? label : undefined,
+      text: variant !== 'checkbox' ? label : undefined,
       value: value,
       disabled: disabled,
       checked: value === null || value === void 0 ? void 0 : value.includes(selected),

package/cjs/extensions/forms/Field/ArraySelection/ArraySelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArraySelection.js","names":["_react","_interopRequireDefault","require","_components","_classnames","_Option","_FieldBlock","_hooks","_utils","_Selection","_ToggleButtonGroupContext","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ownKeys","object","enumerableOnly","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","ArraySelection","props","id","className","variant","layout","optionsLayout","label","labelDescription","error","hasError","help","info","warning","disabled","emptyValue","htmlAttributes","handleChange","children","useFieldProps","fieldBlockProps","forId","classnames","contentClassName","createElement","Fragment","HelpButton","size","left","title","content","pickSpacingProps","options","getCheckboxOrToggleOptions","Provider","status","_ref","optionsCount","React","Children","count","Component","Checkbox","ToggleButton","createOption","selected","rest","getStatus","suffix","handleSelect","newValue","includes","text","checked","on_change","mapOptions","toArray","map","child","isValidElement","type","OptionField","nestedChildren","cloneElement","_supportsSpacingProps","_default","exports"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelection.tsx"],"sourcesContent":["import React from 'react'\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport OptionField from '../Option'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { ReturnAdditional } from '../../hooks/useFieldProps'\nimport { FieldHelpProps, FieldProps, FormError } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { getStatus } from '../Selection'\nimport { HelpButtonProps } from '../../../../components/HelpButton'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    value: number | string\n    error: Error | FormError | undefined\n    title: React.ReactNode\n    help: HelpButtonProps\n    className: string\n    children: React.ReactNode\n    handleSelect: () => void\n  }>\n>\n\nexport type Props = FieldHelpProps &\n  FieldProps<Array<string | number> | undefined> & {\n    children?: React.ReactNode\n    variant?: 'checkbox' | 'button'\n    optionsLayout?: 'horizontal' | 'vertical'\n  }\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    label,\n    labelDescription,\n    value,\n    error,\n    hasError,\n    help,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    htmlAttributes,\n    handleChange,\n    children,\n  } = useFieldProps(props)\n\n  const fieldBlockProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--variant-${variant}`,\n      `dnb-forms-field-array-selection--layout-${layout}`,\n      `dnb-forms-field-array-selection--options-layout-${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    help,\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription: (\n      <>\n        {labelDescription}\n        {help ? (\n          <HelpButton\n            size=\"small\"\n            left={labelDescription ? 'x-small' : false}\n            title={help.title}\n          >\n            {help.content}\n          </HelpButton>\n        ) : undefined}\n      </>\n    ),\n    ...pickSpacingProps(props),\n  }\n\n  const options = getCheckboxOrToggleOptions({\n    id,\n    variant,\n    info,\n    warning,\n    emptyValue,\n    htmlAttributes,\n    children,\n    value,\n    disabled,\n    handleChange,\n    hasError,\n  })\n\n  switch (variant) {\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButtonGroupContext.Provider\n            value={{\n              status: hasError ? 'error' : undefined,\n              disabled,\n            }}\n          >\n            {options}\n          </ToggleButtonGroupContext.Provider>\n        </FieldBlock>\n      )\n    case 'checkbox':\n      return <FieldBlock {...fieldBlockProps}>{options}</FieldBlock>\n  }\n}\n\nexport function getCheckboxOrToggleOptions({\n  id,\n  variant = 'checkbox',\n  info,\n  warning,\n  emptyValue,\n  htmlAttributes,\n  children,\n  value,\n  disabled,\n  hasError,\n  handleChange,\n}: {\n  id: Props['id']\n  variant?: Props['variant']\n  info?: Props['info']\n  warning?: Props['warning']\n  emptyValue?: Props['emptyValue']\n  htmlAttributes?: Props['htmlAttributes']\n  children?: Props['children']\n  value?: Props['value']\n  disabled?: Props['disabled']\n  hasError?: ReturnAdditional<Props['value']>['hasError']\n  handleChange?: ReturnAdditional<Props['value']>['handleChange']\n}) {\n  const optionsCount = React.Children.count(children)\n\n  const Component = (\n    variant === 'checkbox' ? Checkbox : ToggleButton\n  ) as typeof Checkbox & typeof ToggleButton\n\n  const createOption = (props: OptionProps, i: number) => {\n    const {\n      value: selected,\n      error,\n      title,\n      help,\n      className,\n      children,\n      ...rest\n    } = props\n\n    const label = title ?? children\n    const status = getStatus(error, info, warning)\n    const suffix = help ? (\n      <HelpButton size=\"small\" title={help.title}>\n        {help.content}\n      </HelpButton>\n    ) : undefined\n    const handleSelect = () => {\n      const newValue = value?.includes(selected)\n        ? value.filter((value) => value !== selected)\n        : [...(value ?? []), selected]\n\n      handleChange?.(\n        newValue.length === 0 ? (emptyValue as typeof value) : newValue\n      )\n    }\n\n    return (\n      <Component\n        id={optionsCount === 1 ? id : undefined}\n        key={`option-${i}-${value}`}\n        className={classnames(\n          `dnb-forms-field-array-selection__${variant}`,\n          className\n        )}\n        label={variant === 'checkbox' ? label : undefined}\n        text={variant === 'button' ? label : undefined}\n        value={value}\n        disabled={disabled}\n        checked={value?.includes(selected)}\n        status={(hasError || status) && 'error'}\n        suffix={suffix}\n        on_change={handleSelect}\n        {...htmlAttributes}\n        {...rest}\n      />\n    )\n  }\n\n  const mapOptions = (children: React.ReactNode) => {\n    return React.Children.toArray(children).map(\n      (child: React.ReactElement<OptionProps>, i) => {\n        if (React.isValidElement(child)) {\n          if (child.type === OptionField) {\n            return createOption(child.props, i)\n          }\n\n          if (child.props.children) {\n            const nestedChildren = mapOptions(child.props.children)\n            return React.cloneElement(child, child.props, nestedChildren)\n          }\n        }\n\n        return child\n      }\n    )\n  }\n\n  return mapOptions(children)\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}
+{"version":3,"file":"ArraySelection.js","names":["_react","_interopRequireDefault","require","_components","_classnames","_Option","_FieldBlock","_hooks","_utils","_Selection","_ToggleButtonGroupContext","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ownKeys","object","enumerableOnly","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","ArraySelection","props","id","className","variant","layout","optionsLayout","label","labelDescription","error","hasError","help","info","warning","disabled","emptyValue","htmlAttributes","handleChange","children","useFieldProps","fieldBlockProps","forId","classnames","contentClassName","createElement","Fragment","HelpButton","size","left","title","content","pickSpacingProps","options","getCheckboxOrToggleOptions","Provider","status","_ref","optionsCount","React","Children","count","Component","Checkbox","ToggleButton","createOption","selected","rest","getStatus","suffix","handleSelect","newValue","includes","text","checked","on_change","mapOptions","toArray","map","child","isValidElement","type","OptionField","nestedChildren","cloneElement","_supportsSpacingProps","_default","exports"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelection.tsx"],"sourcesContent":["import React from 'react'\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport OptionField from '../Option'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { ReturnAdditional } from '../../hooks/useFieldProps'\nimport { FieldHelpProps, FieldProps, FormError } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { getStatus } from '../Selection'\nimport { HelpButtonProps } from '../../../../components/HelpButton'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    value: number | string\n    error: Error | FormError | undefined\n    title: React.ReactNode\n    help: HelpButtonProps\n    className: string\n    children: React.ReactNode\n    handleSelect: () => void\n  }>\n>\n\nexport type Props = FieldHelpProps &\n  FieldProps<Array<string | number> | undefined> & {\n    children?: React.ReactNode\n    variant?: 'checkbox' | 'button' | 'checkbox-button'\n    optionsLayout?: 'horizontal' | 'vertical'\n  }\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    label,\n    labelDescription,\n    value,\n    error,\n    hasError,\n    help,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    htmlAttributes,\n    handleChange,\n    children,\n  } = useFieldProps(props)\n\n  const fieldBlockProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--variant-${\n        variant === 'checkbox' ? 'checkbox' : 'button'\n      }`,\n      `dnb-forms-field-array-selection--layout-${layout}`,\n      `dnb-forms-field-array-selection--options-layout-${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    help,\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription: (\n      <>\n        {labelDescription}\n        {help ? (\n          <HelpButton\n            size=\"small\"\n            left={labelDescription ? 'x-small' : false}\n            title={help.title}\n          >\n            {help.content}\n          </HelpButton>\n        ) : undefined}\n      </>\n    ),\n    ...pickSpacingProps(props),\n  }\n\n  const options = getCheckboxOrToggleOptions({\n    id,\n    variant,\n    info,\n    warning,\n    emptyValue,\n    htmlAttributes,\n    children,\n    value,\n    disabled,\n    handleChange,\n    hasError,\n  })\n\n  switch (variant) {\n    case 'checkbox':\n      return <FieldBlock {...fieldBlockProps}>{options}</FieldBlock>\n    default:\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButtonGroupContext.Provider\n            value={{\n              status: hasError ? 'error' : undefined,\n              disabled,\n              variant:\n                variant === 'checkbox-button' ? 'checkbox' : 'default',\n            }}\n          >\n            {options}\n          </ToggleButtonGroupContext.Provider>\n        </FieldBlock>\n      )\n  }\n}\n\nexport function getCheckboxOrToggleOptions({\n  id,\n  variant = 'checkbox',\n  info,\n  warning,\n  emptyValue,\n  htmlAttributes,\n  children,\n  value,\n  disabled,\n  hasError,\n  handleChange,\n}: {\n  id: Props['id']\n  variant?: Props['variant']\n  info?: Props['info']\n  warning?: Props['warning']\n  emptyValue?: Props['emptyValue']\n  htmlAttributes?: Props['htmlAttributes']\n  children?: Props['children']\n  value?: Props['value']\n  disabled?: Props['disabled']\n  hasError?: ReturnAdditional<Props['value']>['hasError']\n  handleChange?: ReturnAdditional<Props['value']>['handleChange']\n}) {\n  const optionsCount = React.Children.count(children)\n\n  const Component = (\n    variant === 'checkbox' ? Checkbox : ToggleButton\n  ) as typeof Checkbox & typeof ToggleButton\n\n  const createOption = (props: OptionProps, i: number) => {\n    const {\n      value: selected,\n      error,\n      title,\n      help,\n      className,\n      children,\n      ...rest\n    } = props\n\n    const label = title ?? children\n    const status = getStatus(error, info, warning)\n    const suffix = help ? (\n      <HelpButton size=\"small\" title={help.title}>\n        {help.content}\n      </HelpButton>\n    ) : undefined\n    const handleSelect = () => {\n      const newValue = value?.includes(selected)\n        ? value.filter((value) => value !== selected)\n        : [...(value ?? []), selected]\n\n      handleChange?.(\n        newValue.length === 0 ? (emptyValue as typeof value) : newValue\n      )\n    }\n\n    return (\n      <Component\n        id={optionsCount === 1 ? id : undefined}\n        key={`option-${i}-${value}`}\n        className={classnames(\n          `dnb-forms-field-array-selection__${\n            variant === 'checkbox' ? 'checkbox' : 'button'\n          }`,\n          className\n        )}\n        label={variant === 'checkbox' ? label : undefined}\n        text={variant !== 'checkbox' ? label : undefined}\n        value={value}\n        disabled={disabled}\n        checked={value?.includes(selected)}\n        status={(hasError || status) && 'error'}\n        suffix={suffix}\n        on_change={handleSelect}\n        {...htmlAttributes}\n        {...rest}\n      />\n    )\n  }\n\n  const mapOptions = (children: React.ReactNode) => {\n    return React.Children.toArray(children).map(\n      (child: React.ReactElement<OptionProps>, i) => {\n        if (React.isValidElement(child)) {\n          if (child.type === OptionField) {\n            return createOption(child.props, i)\n          }\n\n          if (child.props.children) {\n            const nestedChildren = mapOptions(child.props.children)\n            return React.cloneElement(child, child.props, nestedChildren)\n          }\n        }\n\n        return child\n      }\n    )\n  }\n\n  return mapOptions(children)\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}

package/cjs/extensions/forms/Field/ArraySelection/ArraySelectionDocs.d.ts

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

package/cjs/extensions/forms/Field/ArraySelection/ArraySelectionDocs.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.arraySelectionProperties = void 0;
+const arraySelectionProperties = {
+  variant: {
+    doc: 'Choice of UI feature.',
+    type: [`'checkbox'`, `'button'`, `'checkbox-button'`],
+    defaultValue: `'checkbox'`,
+    status: 'optional'
+  },
+  optionsLayout: {
+    doc: 'Layout for the list of options.',
+    type: [`'horizontal'`, `'vertical'`],
+    defaultValue: `'vertical'`,
+    status: 'optional'
+  },
+  children: {
+    doc: 'For providing `<Field.Option>` components.',
+    type: 'React.Node',
+    status: 'optional'
+  }
+};
+exports.arraySelectionProperties = arraySelectionProperties;
+//# sourceMappingURL=ArraySelectionDocs.js.map

package/cjs/extensions/forms/Field/ArraySelection/ArraySelectionDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArraySelectionDocs.js","names":["arraySelectionProperties","variant","doc","type","defaultValue","status","optionsLayout","children","exports"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelectionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const arraySelectionProperties: PropertiesTableProps = {\n  variant: {\n    doc: 'Choice of UI feature.',\n    type: [`'checkbox'`, `'button'`, `'checkbox-button'`],\n    defaultValue: `'checkbox'`,\n    status: 'optional',\n  },\n  optionsLayout: {\n    doc: 'Layout for the list of options.',\n    type: [`'horizontal'`, `'vertical'`],\n    defaultValue: `'vertical'`,\n    status: 'optional',\n  },\n  children: {\n    doc: 'For providing `<Field.Option>` components.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n}\n"],"mappings":";;;;;;AAEO,MAAMA,wBAA8C,GAAG;EAC5DC,OAAO,EAAE;IACPC,GAAG,EAAE,uBAAuB;IAC5BC,IAAI,EAAE,CAAE,YAAW,EAAG,UAAS,EAAG,mBAAkB,CAAC;IACrDC,YAAY,EAAG,YAAW;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDC,aAAa,EAAE;IACbJ,GAAG,EAAE,iCAAiC;IACtCC,IAAI,EAAE,CAAE,cAAa,EAAG,YAAW,CAAC;IACpCC,YAAY,EAAG,YAAW;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDE,QAAQ,EAAE;IACRL,GAAG,EAAE,4CAA4C;IACjDC,IAAI,EAAE,YAAY;IAClBE,MAAM,EAAE;EACV;AACF,CAAC;AAAAG,OAAA,CAAAR,wBAAA,GAAAA,wBAAA"}

package/cjs/extensions/forms/ValueBlock/ValueBlock.js

@@ -61,7 +61,7 @@ function ValueBlock(props) {
   let content = null;
   const compositionClass = composition && `dnb-forms-value-block__composition--${composition === true ? 'horizontal' : composition}`;
   if (summaryListContext) {
-    const Element = summaryListContext.isNested ? _elements.Dl : summaryListContext.layout === 'horizontal' ? _elements.Dl.Item : _react.Fragment;
+    const Item = summaryListContext.isNested ? _elements.Dl : summaryListContext.layout === 'horizontal' ? _elements.Dl.Item : _react.Fragment;
     if (!label && valueBlockContext !== null && valueBlockContext !== void 0 && valueBlockContext.composition) {
       var _span;
       content = (_span = _react.default.createElement("span", {
@@ -70,13 +70,13 @@ function ValueBlock(props) {
         className: "dnb-forms-value-block__placeholder"
       }, placeholder);
     } else {
-      content = _react.default.createElement(Element, null, _react.default.createElement(_SummaryListContext.default.Provider, {
+      content = _react.default.createElement(_SummaryListContext.default.Provider, {
         value: _objectSpread(_objectSpread({}, summaryListContext), {}, {
           isNested: true
         })
-      }, label && _react.default.createElement(_elements.Dt, {
+      }, _react.default.createElement(Item, null, _react.default.createElement(_elements.Dt, {
         className: "dnb-forms-value-block__label"
-      }, _react.default.createElement("strong", null, label)), _react.default.createElement(_elements.Dd, {
+      }, label && _react.default.createElement("strong", null, label)), _react.default.createElement(_elements.Dd, {
         className: (0, _classnames.default)(compositionClass, summaryListContext.layout !== 'grid' && !summaryListContext.isNested && maxWidth && `dnb-forms-value-block--max-width-${maxWidth}`)
       }, children ? _react.default.createElement("span", {
         className: 'dnb-forms-value-block__content' + (gap ? ` dnb-forms-value-block__content--gap-${gap}` : "")

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

@@ -1 +1 @@
-{"version":3,"file":"ValueBlock.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_helpers","_elements","_components","_SummaryListContext","_ValueBlockContext","_Context","_utils","_IterateElementContext","_componentHelper","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","ValueBlock","props","summaryListContext","useContext","SummaryListContext","valueBlockContext","ValueBlockContext","dataContext","DataContext","iterateElementContext","IterateElementContext","index","iterateIndex","className","label","labelProp","inline","maxWidth","composition","placeholder","showEmpty","children","gap","useMemo","convertJsxToString","replace","ref","useRef","useNotInSummaryList","prerenderFieldProps","content","compositionClass","Element","isNested","Dl","layout","Item","Fragment","_span","createElement","Provider","Dt","Dd","classnames","Span","pickSpacingProps","FormLabel","element","labelDirection","useEffect","current","sibling","previousElementSibling","classList","contains","closest","warn","Boolean","error","_supportsSpacingProps","_default","exports"],"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 Element = 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        <Element>\n          <SummaryListContext.Provider\n            value={{ ...summaryListContext, isNested: true }}\n          >\n            {label && (\n              <Dt className=\"dnb-forms-value-block__label\">\n                <strong>{label}</strong>\n              </Dt>\n            )}\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          </SummaryListContext.Provider>\n        </Element>\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","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_helpers","_elements","_components","_SummaryListContext","_ValueBlockContext","_Context","_utils","_IterateElementContext","_componentHelper","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","ValueBlock","props","summaryListContext","useContext","SummaryListContext","valueBlockContext","ValueBlockContext","dataContext","DataContext","iterateElementContext","IterateElementContext","index","iterateIndex","className","label","labelProp","inline","maxWidth","composition","placeholder","showEmpty","children","gap","useMemo","convertJsxToString","replace","ref","useRef","useNotInSummaryList","prerenderFieldProps","content","compositionClass","Item","isNested","Dl","layout","Fragment","_span","createElement","Provider","Dt","Dd","classnames","Span","pickSpacingProps","FormLabel","element","labelDirection","useEffect","current","sibling","previousElementSibling","classList","contains","closest","warn","Boolean","error","_supportsSpacingProps","_default","exports"],"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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"}

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

@@ -2,18 +2,15 @@
 /*
  * Utilities
  */
-.dnb-forms-summary-list.dnb-dl .dnb-dt, .dnb-forms-summary-list.dnb-dl > .dnb-dd > .dnb-dl, .dnb-forms-summary-list.dnb-dl:not([class*=dnb-space]) > .dnb-dd > .dnb-dl {
+.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt, .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) > .dnb-dd > .dnb-dl, .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not([class*=dnb-space]) > .dnb-dd > .dnb-dl {
   margin: 0;
 }
-.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid) > .dnb-dd {
+.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--grid) > .dnb-dd:last-of-type {
+.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-summary-list.dnb-dl.dnb-dl__layout--grid {
-  row-gap: var(--spacing-medium);
-}
 
 .dnb-forms-value-block {
   display: block;

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

@@ -1 +1 @@
-@charset "UTF-8";.dnb-forms-summary-list.dnb-dl .dnb-dt,.dnb-forms-summary-list.dnb-dl:not([class*=dnb-space])>.dnb-dd>.dnb-dl,.dnb-forms-summary-list.dnb-dl>.dnb-dd>.dnb-dl{margin:0}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid)>.dnb-dd{margin-bottom:var(--spacing-medium)}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid)>.dnb-dd:last-of-type{margin-bottom:0}.dnb-forms-summary-list.dnb-dl.dnb-dl__layout--grid{row-gap:var(--spacing-medium)}.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-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/cjs/extensions/forms/ValueBlock/style/dnb-value-block.scss

@@ -1,6 +1,6 @@
 @import '../../../../style/core/utilities.scss';
 
-.dnb-forms-summary-list.dnb-dl {
+.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) {
   & .dnb-dt,
   & > .dnb-dd > .dnb-dl,
   &:not([class*='dnb-space']) > .dnb-dd > .dnb-dl {
@@ -13,9 +13,6 @@
       margin-bottom: 0;
     }
   }
-  &.dnb-dl__layout--grid {
-    row-gap: var(--spacing-medium);
-  }
 }
 
 .dnb-forms-value-block {

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

@@ -573,18 +573,15 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
 /*
  * Utilities
  */
-.dnb-forms-summary-list.dnb-dl .dnb-dt, .dnb-forms-summary-list.dnb-dl > .dnb-dd > .dnb-dl, .dnb-forms-summary-list.dnb-dl:not([class*=dnb-space]) > .dnb-dd > .dnb-dl {
+.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt, .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) > .dnb-dd > .dnb-dl, .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not([class*=dnb-space]) > .dnb-dd > .dnb-dl {
   margin: 0;
 }
-.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid) > .dnb-dd {
+.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--grid) > .dnb-dd:last-of-type {
+.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-summary-list.dnb-dl.dnb-dl__layout--grid {
-  row-gap: var(--spacing-medium);
-}
 
 .dnb-forms-value-block {
   display: block;