@dnb/eufemia 10.54.0 → 10.55.0

package/es/extensions/forms/FieldBlock/FieldBlockDocs.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-export const fieldBlockSharedProperties = {
+export const FieldBlockSharedProperties = {
   label: {
     doc: 'Field label to show above / before the input feature.',
     type: 'string',
@@ -22,6 +22,11 @@ export const fieldBlockSharedProperties = {
     type: 'string',
     status: 'optional'
   },
+  layoutOptions: {
+    doc: 'Use this to set additional options for the `horizontal` layout. E.g. `{ width: "medium" }`. You can also use a custom width `{number}rem`. Instead of a width, you can use a min/max width. E.g. `{ minWidth: "6rem", maxWidth: "12rem" }`.',
+    type: 'object',
+    status: 'optional'
+  },
   width: {
     doc: 'Will set the width for the whole block. Use `small`, `medium`, `large` for predefined standard widths. You can also set a custom width `{number}rem` or use `stretch` or `false`.',
     type: ['string', 'false'],
@@ -38,12 +43,17 @@ export const fieldBlockSharedProperties = {
     status: 'optional'
   }
 };
-export const fieldBlockProperties = _objectSpread(_objectSpread({}, fieldBlockSharedProperties), {}, {
+export const FieldBlockProperties = _objectSpread(_objectSpread({}, FieldBlockSharedProperties), {}, {
   labelSize: {
     doc: 'Define one of the following [heading sizes](/uilib/elements/heading/): `medium` or `large`.',
     type: ['string', 'false'],
     status: 'optional'
   },
+  labelHeight: {
+    doc: 'Defines the height of an component (size prop), so the label can be aligned correctly. Can be `default`, `small`, `medium`, `large`.',
+    type: 'string',
+    status: 'optional'
+  },
   asFieldset: {
     doc: 'Use `true` when you have several form elements. This way a `fieldset` with a `legend` is used.',
     type: 'boolean',
@@ -54,6 +64,11 @@ export const fieldBlockProperties = _objectSpread(_objectSpread({}, fieldBlockSh
     type: ['string', 'false'],
     status: 'optional'
   },
+  disableStatusSummary: {
+    doc: 'Use `true` to disable the error summary.',
+    type: 'boolean',
+    status: 'optional'
+  },
   composition: {
     doc: 'Use `true` for when you have more than one field wrapped.',
     type: 'string',

package/es/extensions/forms/FieldBlock/FieldBlockDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldBlockDocs.js","names":["fieldBlockSharedProperties","label","doc","type","status","labelDescription","labelSrOnly","layout","width","contentWidth","fieldBlockProperties","_objectSpread","labelSize","asFieldset","align","composition","disabled"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlockDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../shared/types'\n\nexport const fieldBlockSharedProperties: PropertiesTableProps = {\n  label: {\n    doc: 'Field label to show above / before the input feature.',\n    type: 'string',\n    status: 'optional',\n  },\n  labelDescription: {\n    doc: 'A more discreet text displayed beside the label (i.e for \"(optional)\").',\n    type: 'string',\n    status: 'optional',\n  },\n  labelSrOnly: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  layout: {\n    doc: 'Layout for the label and input. Can be `horizontal` or `vertical`.',\n    type: 'string',\n    status: 'optional',\n  },\n  width: {\n    doc: 'Will set the width for the whole block. Use `small`, `medium`, `large` for predefined standard widths. You can also set a custom width `{number}rem` or use `stretch` or `false`.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  contentWidth: {\n    doc: 'Will set the width for its contents. Use `small`, `medium`, `large` for predefined standard widths. You can also set a custom width `{number}rem` or use `stretch` or `false`.',\n    type: ['string', 'false'],\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\nexport const fieldBlockProperties: PropertiesTableProps = {\n  ...fieldBlockSharedProperties,\n  labelSize: {\n    doc: 'Define one of the following [heading sizes](/uilib/elements/heading/): `medium` or `large`.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  asFieldset: {\n    doc: 'Use `true` when you have several form elements. This way a `fieldset` with a `legend` is used.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  align: {\n    doc: '`center` or `bottom` for aligning the contents vertically. Defaults to `bottom`.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  composition: {\n    doc: 'Use `true` for when you have more than one field wrapped.',\n    type: 'string',\n    status: 'optional',\n  },\n  disabled: {\n    doc: 'Set `true` to make the inner [FormLabel](/uilib/components/form-label/) behave as disabled.',\n    type: 'boolean',\n    status: 'optional',\n  },\n}\n"],"mappings":";;;AAEA,OAAO,MAAMA,0BAAgD,GAAG;EAC9DC,KAAK,EAAE;IACLC,GAAG,EAAE,uDAAuD;IAC5DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,gBAAgB,EAAE;IAChBH,GAAG,EAAE,yEAAyE;IAC9EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,WAAW,EAAE;IACXJ,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,MAAM,EAAE;IACNL,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,KAAK,EAAE;IACLN,GAAG,EAAE,mLAAmL;IACxLC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDK,YAAY,EAAE;IACZP,GAAG,EAAE,gLAAgL;IACrLC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMM,oBAA0C,GAAAC,aAAA,CAAAA,aAAA,KAClDX,0BAA0B;EAC7BY,SAAS,EAAE;IACTV,GAAG,EAAE,6FAA6F;IAClGC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDS,UAAU,EAAE;IACVX,GAAG,EAAE,gGAAgG;IACrGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDU,KAAK,EAAE;IACLZ,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDW,WAAW,EAAE;IACXb,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDY,QAAQ,EAAE;IACRd,GAAG,EAAE,6FAA6F;IAClGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AAAC,EACF"}
+{"version":3,"file":"FieldBlockDocs.js","names":["FieldBlockSharedProperties","label","doc","type","status","labelDescription","labelSrOnly","layout","layoutOptions","width","contentWidth","FieldBlockProperties","_objectSpread","labelSize","labelHeight","asFieldset","align","disableStatusSummary","composition","disabled"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlockDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../shared/types'\n\nexport const FieldBlockSharedProperties: PropertiesTableProps = {\n  label: {\n    doc: 'Field label to show above / before the input feature.',\n    type: 'string',\n    status: 'optional',\n  },\n  labelDescription: {\n    doc: 'A more discreet text displayed beside the label (i.e for \"(optional)\").',\n    type: 'string',\n    status: 'optional',\n  },\n  labelSrOnly: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  layout: {\n    doc: 'Layout for the label and input. Can be `horizontal` or `vertical`.',\n    type: 'string',\n    status: 'optional',\n  },\n  layoutOptions: {\n    doc: 'Use this to set additional options for the `horizontal` layout. E.g. `{ width: \"medium\" }`. You can also use a custom width `{number}rem`. Instead of a width, you can use a min/max width. E.g. `{ minWidth: \"6rem\", maxWidth: \"12rem\" }`.',\n    type: 'object',\n    status: 'optional',\n  },\n  width: {\n    doc: 'Will set the width for the whole block. Use `small`, `medium`, `large` for predefined standard widths. You can also set a custom width `{number}rem` or use `stretch` or `false`.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  contentWidth: {\n    doc: 'Will set the width for its contents. Use `small`, `medium`, `large` for predefined standard widths. You can also set a custom width `{number}rem` or use `stretch` or `false`.',\n    type: ['string', 'false'],\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\n/** For internal use only */\nexport const FieldBlockProperties: PropertiesTableProps = {\n  ...FieldBlockSharedProperties,\n  labelSize: {\n    doc: 'Define one of the following [heading sizes](/uilib/elements/heading/): `medium` or `large`.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  labelHeight: {\n    doc: 'Defines the height of an component (size prop), so the label can be aligned correctly. Can be `default`, `small`, `medium`, `large`.',\n    type: 'string',\n    status: 'optional',\n  },\n  asFieldset: {\n    doc: 'Use `true` when you have several form elements. This way a `fieldset` with a `legend` is used.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  align: {\n    doc: '`center` or `bottom` for aligning the contents vertically. Defaults to `bottom`.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  disableStatusSummary: {\n    doc: 'Use `true` to disable the error summary.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  composition: {\n    doc: 'Use `true` for when you have more than one field wrapped.',\n    type: 'string',\n    status: 'optional',\n  },\n  disabled: {\n    doc: 'Set `true` to make the inner [FormLabel](/uilib/components/form-label/) behave as disabled.',\n    type: 'boolean',\n    status: 'optional',\n  },\n}\n"],"mappings":";;;AAEA,OAAO,MAAMA,0BAAgD,GAAG;EAC9DC,KAAK,EAAE;IACLC,GAAG,EAAE,uDAAuD;IAC5DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,gBAAgB,EAAE;IAChBH,GAAG,EAAE,yEAAyE;IAC9EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,WAAW,EAAE;IACXJ,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,MAAM,EAAE;IACNL,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,aAAa,EAAE;IACbN,GAAG,EAAE,6OAA6O;IAClPC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,KAAK,EAAE;IACLP,GAAG,EAAE,mLAAmL;IACxLC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDM,YAAY,EAAE;IACZR,GAAG,EAAE,gLAAgL;IACrLC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,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;AAGD,OAAO,MAAMO,oBAA0C,GAAAC,aAAA,CAAAA,aAAA,KAClDZ,0BAA0B;EAC7Ba,SAAS,EAAE;IACTX,GAAG,EAAE,6FAA6F;IAClGC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDU,WAAW,EAAE;IACXZ,GAAG,EAAE,sIAAsI;IAC3IC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDW,UAAU,EAAE;IACVb,GAAG,EAAE,gGAAgG;IACrGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDY,KAAK,EAAE;IACLd,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDa,oBAAoB,EAAE;IACpBf,GAAG,EAAE,0CAA0C;IAC/CC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDc,WAAW,EAAE;IACXhB,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDe,QAAQ,EAAE;IACRjB,GAAG,EAAE,6FAA6F;IAClGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AAAC,EACF"}

package/es/extensions/forms/FieldBlock/style/dnb-field-block.css

@@ -31,25 +31,46 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   margin-left: 0;
 }
 
+.dnb-forms-field-block {
+  --label-margin: 0.25rem;
+}
 .dnb-forms-field-block__grid {
   display: grid;
+  grid-template-columns: minmax(min-content, var(--block-content-width, auto));
+  grid-template-areas: "label" "contents" "status";
+}
+.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical {
+  flex-wrap: wrap;
+}
+.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical > .dnb-form-label, .dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical > .dnb-forms-field-block__label > .dnb-form-label {
+  margin-bottom: 0.5rem;
 }
 @media screen and (max-width: 40em) {
-  .dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid {
-    flex-wrap: wrap;
-  }
-  .dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid > .dnb-form-label {
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label, .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-forms-field-block__label > .dnb-form-label {
     margin-bottom: 0.5rem;
-    margin-top: 0.5rem;
   }
 }
-.dnb-forms-field-block--layout-vertical {
-  grid-template-columns: auto;
-  grid-template-areas: "label" "contents" "status";
+@media screen and (min-width: 40.00625em) {
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal {
+    grid-template-columns: minmax(var(--dnb-forms-field-block-layout-width-min, min-content), var(--dnb-forms-field-block-layout-width-max, max-content)) auto;
+    grid-template-areas: "label contents" ". status";
+  }
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label, .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-forms-field-block__label > .dnb-form-label {
+    margin-top: var(--label-margin);
+    margin-bottom: var(--label-margin);
+  }
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__contents {
+    align-self: end;
+  }
 }
-.dnb-forms-field-block--layout-horizontal {
-  grid-template-columns: fit-content(100%) auto;
-  grid-template-areas: "label contents" "status status";
+.dnb-forms-field-block--label-height-small {
+  --label-margin: 0;
+}
+.dnb-forms-field-block--label-height-medium {
+  --label-margin: 0.5rem;
+}
+.dnb-forms-field-block--label-height-large {
+  --label-margin: 0.7rem;
 }
 .dnb-forms-field-block--width-stretch {
   flex-grow: 1;
@@ -83,6 +104,7 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 }
 .dnb-forms-field-block__status .dnb-form-status__shell {
   margin-top: 0.5rem;
+  max-width: 60ch;
 }
 @media screen and (max-width: 15em) {
   .dnb-forms-field-block__status {
@@ -91,6 +113,7 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 }
 .dnb-forms-field-block__contents {
   grid-area: contents;
+  display: flex;
   width: 100%;
 }
 .dnb-forms-field-block__contents--width-stretch {

package/es/extensions/forms/FieldBlock/style/dnb-field-block.min.css

@@ -1 +1 @@
-:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}@media screen and (max-width:15em){.dnb-forms-field-number .dnb-input__shell,.dnb-forms-field-string .dnb-input__shell{width:90%}}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:25.00625em){.dnb-forms-field-block--width-custom{width:calc(var(--dnb-forms-field-block-width))}.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__status .dnb-form-status__shell{margin-top:.5rem}@media screen and (max-width:15em){.dnb-forms-field-block__status{width:90%}}.dnb-forms-field-block__contents{grid-area:contents;width:100%}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:25.00625em){.dnb-forms-field-block__contents--width-custom{width:calc(var(--dnb-forms-field-block-content-width))}.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__contents__composition--vertical{display:flex;flex-flow:column;row-gap:var(--spacing-small)}.dnb-forms-field-block__contents__composition--horizontal{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:25.00625em){.dnb-forms-field-block__contents__composition--horizontal{align-items:flex-end}.dnb-forms-field-block__contents__composition--horizontal[class*=align-center]{align-items:center}}@media screen and (max-width:25em){.dnb-forms-field-block__contents__composition--horizontal{flex-flow:column;row-gap:var(--spacing-x-small)}}
+:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}@media screen and (max-width:15em){.dnb-forms-field-number .dnb-input__shell,.dnb-forms-field-string .dnb-input__shell{width:90%}}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block{--label-margin:0.25rem}.dnb-forms-field-block__grid{display:grid;grid-template-areas:"label" "contents" "status";grid-template-columns:minmax(min-content,var(--block-content-width,auto))}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical{flex-wrap:wrap}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical>.dnb-form-label,.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical>.dnb-forms-field-block__label>.dnb-form-label{margin-bottom:.5rem}@media screen and (max-width:40em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal>.dnb-form-label,.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal>.dnb-forms-field-block__label>.dnb-form-label{margin-bottom:.5rem}}@media screen and (min-width:40.00625em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" ". status";grid-template-columns:minmax(var(--dnb-forms-field-block-layout-width-min,min-content),var(--dnb-forms-field-block-layout-width-max,max-content)) auto}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal>.dnb-form-label,.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal>.dnb-forms-field-block__label>.dnb-form-label{margin-bottom:var(--label-margin);margin-top:var(--label-margin)}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__contents{align-self:end}}.dnb-forms-field-block--label-height-small{--label-margin:0}.dnb-forms-field-block--label-height-medium{--label-margin:0.5rem}.dnb-forms-field-block--label-height-large{--label-margin:0.7rem}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:25.00625em){.dnb-forms-field-block--width-custom{width:calc(var(--dnb-forms-field-block-width))}.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__status .dnb-form-status__shell{margin-top:.5rem;max-width:60ch}@media screen and (max-width:15em){.dnb-forms-field-block__status{width:90%}}.dnb-forms-field-block__contents{display:flex;grid-area:contents;width:100%}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:25.00625em){.dnb-forms-field-block__contents--width-custom{width:calc(var(--dnb-forms-field-block-content-width))}.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__contents__composition--vertical{display:flex;flex-flow:column;row-gap:var(--spacing-small)}.dnb-forms-field-block__contents__composition--horizontal{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:25.00625em){.dnb-forms-field-block__contents__composition--horizontal{align-items:flex-end}.dnb-forms-field-block__contents__composition--horizontal[class*=align-center]{align-items:center}}@media screen and (max-width:25em){.dnb-forms-field-block__contents__composition--horizontal{flex-flow:column;row-gap:var(--spacing-x-small)}}

package/es/extensions/forms/FieldBlock/style/dnb-field-block.scss

@@ -20,34 +20,74 @@ $breakpoints: map.merge(
 }
 
 fieldset.dnb-forms-field-block {
-  @include fieldsetReset(true);
+  @include fieldsetReset();
 }
 
 .dnb-forms-field-block {
   &__grid {
     display: grid;
+
+    // Vertical layout
+    grid-template-columns: minmax(
+      min-content,
+      var(--block-content-width, auto)
+    );
+    grid-template-areas:
+      'label'
+      'contents'
+      'status';
   }
 
-  &--layout-vertical &__grid {
-    @include formLabelWrap();
+  &__grid#{&}--layout-vertical {
+    flex-wrap: wrap;
+    & > .dnb-form-label,
+    & > .dnb-forms-field-block__label > .dnb-form-label {
+      margin-bottom: 0.5rem;
+    }
   }
 
-  &--layout {
-    &-vertical {
-      grid-template-columns: auto;
-      grid-template-areas:
-        'label'
-        'contents'
-        'status';
+  // Horizontal layout
+  &__grid#{&}--layout-horizontal {
+    @include allBelow(small) {
+      & > .dnb-form-label,
+      & > .dnb-forms-field-block__label > .dnb-form-label {
+        margin-bottom: 0.5rem;
+      }
     }
-    &-horizontal {
-      grid-template-columns: fit-content(100%) auto;
+    @include allAbove(small) {
+      & > .dnb-form-label,
+      & > .dnb-forms-field-block__label > .dnb-form-label {
+        margin-top: var(--label-margin);
+        margin-bottom: var(--label-margin);
+      }
+      grid-template-columns:
+        minmax(
+          var(--dnb-forms-field-block-layout-width-min, min-content),
+          var(--dnb-forms-field-block-layout-width-max, max-content)
+        )
+        auto;
       grid-template-areas:
         'label contents'
-        'status status';
+        '. status';
+
+      .dnb-forms-field-block__contents {
+        align-self: end;
+      }
     }
   }
 
+  // Align label vertically with the content (input etc.)
+  --label-margin: 0.25rem;
+  &--label-height-small {
+    --label-margin: 0;
+  }
+  &--label-height-medium {
+    --label-margin: 0.5rem;
+  }
+  &--label-height-large {
+    --label-margin: 0.7rem;
+  }
+
   &--width {
     &-stretch {
       flex-grow: 1;
@@ -85,6 +125,7 @@ fieldset.dnb-forms-field-block {
     grid-area: status;
     .dnb-form-status__shell {
       margin-top: 0.5rem; // set margin-top on shell, so we can animate the height
+      max-width: 60ch; // to enhance readability
     }
 
     @include allBelow(xx-small) {
@@ -94,6 +135,8 @@ fieldset.dnb-forms-field-block {
 
   &__contents {
     grid-area: contents;
+
+    display: flex;
     width: 100%;
 
     &--width {

package/es/extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-sbanken.css

@@ -0,0 +1,7 @@
+.dnb-forms-field-block__label-description {
+  color: var(--sb-color-gray-dark);
+  font-size: var(--font-size-small);
+}
+.dnb-forms-field-block:not([class*="--label-height-"]) {
+  --label-margin: 0.5rem;
+}

package/es/extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-sbanken.min.css

@@ -0,0 +1 @@
+.dnb-forms-field-block__label-description{color:var(--sb-color-gray-dark);font-size:var(--font-size-small)}.dnb-forms-field-block:not([class*="--label-height-"]){--label-margin:0.5rem}

package/es/extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-sbanken.scss

@@ -0,0 +1,10 @@
+.dnb-forms-field-block {
+  &__label-description {
+    color: var(--sb-color-gray-dark);
+    font-size: var(--font-size-small);
+  }
+
+  &:not([class*='--label-height-']) {
+    --label-margin: 0.5rem;
+  }
+}

package/es/extensions/forms/Form/Section/EditContainer/CancelButton.d.ts

@@ -0,0 +1 @@
+export default function CancelButton(): import("react/jsx-runtime").JSX.Element;

package/es/extensions/forms/Form/Section/EditContainer/CancelButton.js

@@ -0,0 +1,51 @@
+"use client";
+
+import React, { useCallback, useContext } from 'react';
+import SectionContainerContext from '../containers/SectionContainerContext';
+import ToolbarContext from '../Toolbar/ToolbarContext';
+import { useTranslation } from '../../../hooks';
+import { Button } from '../../../../../components';
+import { close } from '../../../../../icons';
+import useContainerDataStore from './useContainerDataStore';
+import FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext';
+export default function CancelButton() {
+  const {
+    onCancel,
+    setShowError
+  } = useContext(ToolbarContext) || {};
+  const {
+    restoreOriginalData
+  } = useContainerDataStore();
+  const {
+    switchContainerMode,
+    initialContainerMode
+  } = useContext(SectionContainerContext) || {};
+  const {
+    hasVisibleError,
+    hasSubmitError,
+    hasError,
+    setShowBoundaryErrors
+  } = useContext(FieldBoundaryContext) || {};
+  const translation = useTranslation().SectionEditContainer;
+  const cancelHandler = useCallback(() => {
+    if (hasSubmitError || initialContainerMode === 'auto' && hasError) {
+      setShowBoundaryErrors === null || setShowBoundaryErrors === void 0 ? void 0 : setShowBoundaryErrors(true);
+      if (hasVisibleError) {
+        setShowError(true);
+      }
+    } else {
+      setShowError(false);
+      setShowBoundaryErrors === null || setShowBoundaryErrors === void 0 ? void 0 : setShowBoundaryErrors(false);
+      restoreOriginalData();
+      switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('view');
+      onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    }
+  }, [hasError, hasSubmitError, hasVisibleError, initialContainerMode, onCancel, restoreOriginalData, setShowBoundaryErrors, setShowError, switchContainerMode]);
+  return React.createElement(Button, {
+    variant: "tertiary",
+    icon: close,
+    icon_position: "left",
+    on_click: cancelHandler
+  }, translation.cancelButton);
+}
+//# sourceMappingURL=CancelButton.js.map

package/es/extensions/forms/Form/Section/EditContainer/CancelButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CancelButton.js","names":["React","useCallback","useContext","SectionContainerContext","ToolbarContext","useTranslation","Button","close","useContainerDataStore","FieldBoundaryContext","CancelButton","onCancel","setShowError","restoreOriginalData","switchContainerMode","initialContainerMode","hasVisibleError","hasSubmitError","hasError","setShowBoundaryErrors","translation","SectionEditContainer","cancelHandler","createElement","variant","icon","icon_position","on_click","cancelButton"],"sources":["../../../../../../../src/extensions/forms/Form/Section/EditContainer/CancelButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport SectionContainerContext from '../containers/SectionContainerContext'\nimport ToolbarContext from '../Toolbar/ToolbarContext'\nimport { useTranslation } from '../../../hooks'\nimport { Button } from '../../../../../components'\nimport { close } from '../../../../../icons'\nimport useContainerDataStore from './useContainerDataStore'\nimport FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'\n\nexport default function CancelButton() {\n  const { onCancel, setShowError } = useContext(ToolbarContext) || {}\n  const { restoreOriginalData } = useContainerDataStore()\n  const { switchContainerMode, initialContainerMode } =\n    useContext(SectionContainerContext) || {}\n  const {\n    hasVisibleError,\n    hasSubmitError,\n    hasError,\n    setShowBoundaryErrors,\n  } = useContext(FieldBoundaryContext) || {}\n\n  const translation = useTranslation().SectionEditContainer\n\n  const cancelHandler = useCallback(() => {\n    if (hasSubmitError || (initialContainerMode === 'auto' && hasError)) {\n      setShowBoundaryErrors?.(true)\n      if (hasVisibleError) {\n        setShowError(true)\n      }\n    } else {\n      setShowError(false)\n      setShowBoundaryErrors?.(false)\n      restoreOriginalData()\n      switchContainerMode?.('view')\n      onCancel?.()\n    }\n  }, [\n    hasError,\n    hasSubmitError,\n    hasVisibleError,\n    initialContainerMode,\n    onCancel,\n    restoreOriginalData,\n    setShowBoundaryErrors,\n    setShowError,\n    switchContainerMode,\n  ])\n\n  return (\n    <Button\n      variant=\"tertiary\"\n      icon={close}\n      icon_position=\"left\"\n      on_click={cancelHandler}\n    >\n      {translation.cancelButton}\n    </Button>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,uBAAuB,MAAM,uCAAuC;AAC3E,OAAOC,cAAc,MAAM,2BAA2B;AACtD,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SAASC,MAAM,QAAQ,2BAA2B;AAClD,SAASC,KAAK,QAAQ,sBAAsB;AAC5C,OAAOC,qBAAqB,MAAM,yBAAyB;AAC3D,OAAOC,oBAAoB,MAAM,yDAAyD;AAE1F,eAAe,SAASC,YAAYA,CAAA,EAAG;EACrC,MAAM;IAAEC,QAAQ;IAAEC;EAAa,CAAC,GAAGV,UAAU,CAACE,cAAc,CAAC,IAAI,CAAC,CAAC;EACnE,MAAM;IAAES;EAAoB,CAAC,GAAGL,qBAAqB,CAAC,CAAC;EACvD,MAAM;IAAEM,mBAAmB;IAAEC;EAAqB,CAAC,GACjDb,UAAU,CAACC,uBAAuB,CAAC,IAAI,CAAC,CAAC;EAC3C,MAAM;IACJa,eAAe;IACfC,cAAc;IACdC,QAAQ;IACRC;EACF,CAAC,GAAGjB,UAAU,CAACO,oBAAoB,CAAC,IAAI,CAAC,CAAC;EAE1C,MAAMW,WAAW,GAAGf,cAAc,CAAC,CAAC,CAACgB,oBAAoB;EAEzD,MAAMC,aAAa,GAAGrB,WAAW,CAAC,MAAM;IACtC,IAAIgB,cAAc,IAAKF,oBAAoB,KAAK,MAAM,IAAIG,QAAS,EAAE;MACnEC,qBAAqB,aAArBA,qBAAqB,uBAArBA,qBAAqB,CAAG,IAAI,CAAC;MAC7B,IAAIH,eAAe,EAAE;QACnBJ,YAAY,CAAC,IAAI,CAAC;MACpB;IACF,CAAC,MAAM;MACLA,YAAY,CAAC,KAAK,CAAC;MACnBO,qBAAqB,aAArBA,qBAAqB,uBAArBA,qBAAqB,CAAG,KAAK,CAAC;MAC9BN,mBAAmB,CAAC,CAAC;MACrBC,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;MAC7BH,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG,CAAC;IACd;EACF,CAAC,EAAE,CACDO,QAAQ,EACRD,cAAc,EACdD,eAAe,EACfD,oBAAoB,EACpBJ,QAAQ,EACRE,mBAAmB,EACnBM,qBAAqB,EACrBP,YAAY,EACZE,mBAAmB,CACpB,CAAC;EAEF,OACEd,KAAA,CAAAuB,aAAA,CAACjB,MAAM;IACLkB,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAElB,KAAM;IACZmB,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEL;EAAc,GAEvBF,WAAW,CAACQ,YACP,CAAC;AAEb"}

package/es/extensions/forms/Form/Section/EditContainer/DoneButton.d.ts

@@ -0,0 +1 @@
+export default function DoneEditButton(): import("react/jsx-runtime").JSX.Element;

package/es/extensions/forms/Form/Section/EditContainer/DoneButton.js

@@ -0,0 +1,44 @@
+"use client";
+
+import React, { useCallback, useContext } from 'react';
+import SectionContainerContext from '../containers/SectionContainerContext';
+import ToolbarContext from '../Toolbar/ToolbarContext';
+import { useTranslation } from '../../../hooks';
+import { Button } from '../../../../../components';
+import { check } from '../../../../../icons';
+import FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext';
+export default function DoneEditButton() {
+  const {
+    onDone,
+    setShowError
+  } = useContext(ToolbarContext) || {};
+  const {
+    switchContainerMode
+  } = useContext(SectionContainerContext) || {};
+  const {
+    hasError,
+    hasVisibleError,
+    setShowBoundaryErrors
+  } = useContext(FieldBoundaryContext) || {};
+  const translation = useTranslation().SectionEditContainer;
+  const doneHandler = useCallback(() => {
+    if (hasError) {
+      setShowBoundaryErrors === null || setShowBoundaryErrors === void 0 ? void 0 : setShowBoundaryErrors(true);
+      if (hasVisibleError) {
+        setShowError(true);
+      }
+    } else {
+      setShowError(false);
+      setShowBoundaryErrors === null || setShowBoundaryErrors === void 0 ? void 0 : setShowBoundaryErrors(false);
+      switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('view');
+      onDone === null || onDone === void 0 ? void 0 : onDone();
+    }
+  }, [hasError, hasVisibleError, onDone, setShowBoundaryErrors, setShowError, switchContainerMode]);
+  return React.createElement(Button, {
+    variant: "tertiary",
+    icon: check,
+    icon_position: "left",
+    on_click: doneHandler
+  }, translation.doneButton);
+}
+//# sourceMappingURL=DoneButton.js.map

package/es/extensions/forms/Form/Section/EditContainer/DoneButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DoneButton.js","names":["React","useCallback","useContext","SectionContainerContext","ToolbarContext","useTranslation","Button","check","FieldBoundaryContext","DoneEditButton","onDone","setShowError","switchContainerMode","hasError","hasVisibleError","setShowBoundaryErrors","translation","SectionEditContainer","doneHandler","createElement","variant","icon","icon_position","on_click","doneButton"],"sources":["../../../../../../../src/extensions/forms/Form/Section/EditContainer/DoneButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport SectionContainerContext from '../containers/SectionContainerContext'\nimport ToolbarContext from '../Toolbar/ToolbarContext'\nimport { useTranslation } from '../../../hooks'\nimport { Button } from '../../../../../components'\nimport { check } from '../../../../../icons'\nimport FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'\n\nexport default function DoneEditButton() {\n  const { onDone, setShowError } = useContext(ToolbarContext) || {}\n\n  const { switchContainerMode } = useContext(SectionContainerContext) || {}\n  const { hasError, hasVisibleError, setShowBoundaryErrors } =\n    useContext(FieldBoundaryContext) || {}\n\n  const translation = useTranslation().SectionEditContainer\n\n  const doneHandler = useCallback(() => {\n    if (hasError) {\n      setShowBoundaryErrors?.(true)\n      if (hasVisibleError) {\n        setShowError(true)\n      }\n    } else {\n      setShowError(false)\n      setShowBoundaryErrors?.(false)\n      switchContainerMode?.('view')\n      onDone?.()\n    }\n  }, [\n    hasError,\n    hasVisibleError,\n    onDone,\n    setShowBoundaryErrors,\n    setShowError,\n    switchContainerMode,\n  ])\n\n  return (\n    <Button\n      variant=\"tertiary\"\n      icon={check}\n      icon_position=\"left\"\n      on_click={doneHandler}\n    >\n      {translation.doneButton}\n    </Button>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,uBAAuB,MAAM,uCAAuC;AAC3E,OAAOC,cAAc,MAAM,2BAA2B;AACtD,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SAASC,MAAM,QAAQ,2BAA2B;AAClD,SAASC,KAAK,QAAQ,sBAAsB;AAC5C,OAAOC,oBAAoB,MAAM,yDAAyD;AAE1F,eAAe,SAASC,cAAcA,CAAA,EAAG;EACvC,MAAM;IAAEC,MAAM;IAAEC;EAAa,CAAC,GAAGT,UAAU,CAACE,cAAc,CAAC,IAAI,CAAC,CAAC;EAEjE,MAAM;IAAEQ;EAAoB,CAAC,GAAGV,UAAU,CAACC,uBAAuB,CAAC,IAAI,CAAC,CAAC;EACzE,MAAM;IAAEU,QAAQ;IAAEC,eAAe;IAAEC;EAAsB,CAAC,GACxDb,UAAU,CAACM,oBAAoB,CAAC,IAAI,CAAC,CAAC;EAExC,MAAMQ,WAAW,GAAGX,cAAc,CAAC,CAAC,CAACY,oBAAoB;EAEzD,MAAMC,WAAW,GAAGjB,WAAW,CAAC,MAAM;IACpC,IAAIY,QAAQ,EAAE;MACZE,qBAAqB,aAArBA,qBAAqB,uBAArBA,qBAAqB,CAAG,IAAI,CAAC;MAC7B,IAAID,eAAe,EAAE;QACnBH,YAAY,CAAC,IAAI,CAAC;MACpB;IACF,CAAC,MAAM;MACLA,YAAY,CAAC,KAAK,CAAC;MACnBI,qBAAqB,aAArBA,qBAAqB,uBAArBA,qBAAqB,CAAG,KAAK,CAAC;MAC9BH,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;MAC7BF,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAG,CAAC;IACZ;EACF,CAAC,EAAE,CACDG,QAAQ,EACRC,eAAe,EACfJ,MAAM,EACNK,qBAAqB,EACrBJ,YAAY,EACZC,mBAAmB,CACpB,CAAC;EAEF,OACEZ,KAAA,CAAAmB,aAAA,CAACb,MAAM;IACLc,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAEd,KAAM;IACZe,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEL;EAAY,GAErBF,WAAW,CAACQ,UACP,CAAC;AAEb"}

package/es/extensions/forms/Form/Section/EditContainer/EditContainer.d.ts

@@ -9,6 +9,8 @@ export type Props = {
 export type AllProps = Props & SectionContainerProps & FlexContainerProps;
 declare function EditContainer(props: AllProps): import("react/jsx-runtime").JSX.Element;
 declare namespace EditContainer {
+    var DoneButton: typeof import("./DoneButton").default;
+    var CancelButton: typeof import("./CancelButton").default;
     var _supportsSpacingProps: boolean;
 }
 export default EditContainer;

package/es/extensions/forms/Form/Section/EditContainer/EditContainer.js

@@ -2,6 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _DoneButton, _CancelButton;
 const _excluded = ["children", "className", "title", "onDone", "onCancel"];
 import React, { useCallback, useContext, useMemo, useRef } from 'react';
 import classnames from 'classnames';
@@ -10,9 +11,10 @@ import { Flex } from '../../../../../components';
 import { Lead } from '../../../../../elements';
 import FieldBoundaryProvider from '../../../DataContext/FieldBoundary/FieldBoundaryProvider';
 import SectionContainerContext from '../containers/SectionContainerContext';
-import EditToolbarTools from './EditToolbarTools';
+import Toolbar from '../Toolbar/Toolbar';
+import DoneButton from './DoneButton';
+import CancelButton from './CancelButton';
 import SectionContainer from '../containers/SectionContainer';
-import Toolbar from '../containers/Toolbar';
 function EditContainer(props) {
   const _ref = props || {},
     {
@@ -37,6 +39,9 @@ function EditContainer(props) {
       switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('edit');
     }
   }, [containerMode, initialContainerMode, switchContainerMode]);
+  const hasToolbar = React.Children.toArray(children).some(child => {
+    return (child === null || child === void 0 ? void 0 : child['type']) === Toolbar;
+  });
   return React.createElement(FieldBoundaryProvider, {
     showErrors: validateInitially,
     onPathError: onPathError
@@ -47,11 +52,13 @@ function EditContainer(props) {
     className: classnames('dnb-forms-section-edit-block', className)
   }, restProps), React.createElement(Flex.Stack, null, title && React.createElement(Lead, {
     size: "basis"
-  }, title), children, React.createElement(Toolbar, null, React.createElement(EditToolbarTools, {
+  }, title), children, hasToolbar ? null : React.createElement(Toolbar, {
     onDone: onDone,
     onCancel: onCancel
-  })))));
+  }, _DoneButton || (_DoneButton = React.createElement(DoneButton, null)), _CancelButton || (_CancelButton = React.createElement(CancelButton, null))))));
 }
+EditContainer.DoneButton = DoneButton;
+EditContainer.CancelButton = CancelButton;
 EditContainer._supportsSpacingProps = true;
 export default EditContainer;
 //# sourceMappingURL=EditContainer.js.map

package/es/extensions/forms/Form/Section/EditContainer/EditContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditContainer.js","names":["React","useCallback","useContext","useMemo","useRef","classnames","convertJsxToString","Flex","Lead","FieldBoundaryProvider","SectionContainerContext","EditToolbarTools","SectionContainer","Toolbar","EditContainer","props","_ref","children","className","title","onDone","onCancel","restProps","_objectWithoutProperties","_excluded","ariaLabel","containerMode","initialContainerMode","validateInitially","switchContainerMode","omitFocusManagementRef","onPathError","path","error","Error","current","createElement","showErrors","_extends","mode","Stack","size","_supportsSpacingProps"],"sources":["../../../../../../../src/extensions/forms/Form/Section/EditContainer/EditContainer.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } from 'react'\nimport classnames from 'classnames'\nimport { convertJsxToString } from '../../../../../shared/component-helper'\nimport { Flex } from '../../../../../components'\nimport { Props as FlexContainerProps } from '../../../../../components/flex/Container'\nimport { Lead } from '../../../../../elements'\nimport FieldBoundaryProvider from '../../../DataContext/FieldBoundary/FieldBoundaryProvider'\nimport SectionContainerContext from '../containers/SectionContainerContext'\nimport EditToolbarTools from './EditToolbarTools'\nimport SectionContainer, {\n  SectionContainerProps,\n} from '../containers/SectionContainer'\nimport Toolbar from '../containers/Toolbar'\nimport { Path } from '../../../types'\n\nexport type Props = {\n  title?: React.ReactNode\n  onDone?: () => void\n  onCancel?: () => void\n}\n\nexport type AllProps = Props & SectionContainerProps & FlexContainerProps\n\nfunction EditContainer(props: AllProps) {\n  const { children, className, title, onDone, onCancel, ...restProps } =\n    props || {}\n  const ariaLabel = useMemo(() => convertJsxToString(title), [title])\n  const {\n    containerMode,\n    initialContainerMode,\n    validateInitially,\n    switchContainerMode,\n  } = useContext(SectionContainerContext) || {}\n  const omitFocusManagementRef = useRef(false)\n\n  const onPathError = useCallback(\n    (path: Path, error: Error) => {\n      if (\n        initialContainerMode === 'auto' &&\n        containerMode !== 'edit' &&\n        error instanceof Error\n      ) {\n        omitFocusManagementRef.current = true\n        switchContainerMode?.('edit')\n      }\n    },\n    [containerMode, initialContainerMode, switchContainerMode]\n  )\n\n  return (\n    <FieldBoundaryProvider\n      showErrors={validateInitially}\n      onPathError={onPathError}\n    >\n      <SectionContainer\n        mode=\"edit\"\n        ariaLabel={ariaLabel}\n        omitFocusManagementRef={omitFocusManagementRef}\n        className={classnames('dnb-forms-section-edit-block', className)}\n        {...restProps}\n      >\n        <Flex.Stack>\n          {title && <Lead size=\"basis\">{title}</Lead>}\n          {children}\n          <Toolbar>\n            <EditToolbarTools onDone={onDone} onCancel={onCancel} />\n          </Toolbar>\n        </Flex.Stack>\n      </SectionContainer>\n    </FieldBoundaryProvider>\n  )\n}\n\nEditContainer._supportsSpacingProps = true\nexport default EditContainer\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACvE,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,kBAAkB,QAAQ,wCAAwC;AAC3E,SAASC,IAAI,QAAQ,2BAA2B;AAEhD,SAASC,IAAI,QAAQ,yBAAyB;AAC9C,OAAOC,qBAAqB,MAAM,0DAA0D;AAC5F,OAAOC,uBAAuB,MAAM,uCAAuC;AAC3E,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,gBAAgB,MAEhB,gCAAgC;AACvC,OAAOC,OAAO,MAAM,uBAAuB;AAW3C,SAASC,aAAaA,CAACC,KAAe,EAAE;EACtC,MAAAC,IAAA,GACED,KAAK,IAAI,CAAC,CAAC;IADP;MAAEE,QAAQ;MAAEC,SAAS;MAAEC,KAAK;MAAEC,MAAM;MAAEC;IAAuB,CAAC,GAAAL,IAAA;IAAXM,SAAS,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAElE,MAAMC,SAAS,GAAGtB,OAAO,CAAC,MAAMG,kBAAkB,CAACa,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EACnE,MAAM;IACJO,aAAa;IACbC,oBAAoB;IACpBC,iBAAiB;IACjBC;EACF,CAAC,GAAG3B,UAAU,CAACQ,uBAAuB,CAAC,IAAI,CAAC,CAAC;EAC7C,MAAMoB,sBAAsB,GAAG1B,MAAM,CAAC,KAAK,CAAC;EAE5C,MAAM2B,WAAW,GAAG9B,WAAW,CAC7B,CAAC+B,IAAU,EAAEC,KAAY,KAAK;IAC5B,IACEN,oBAAoB,KAAK,MAAM,IAC/BD,aAAa,KAAK,MAAM,IACxBO,KAAK,YAAYC,KAAK,EACtB;MACAJ,sBAAsB,CAACK,OAAO,GAAG,IAAI;MACrCN,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;IAC/B;EACF,CAAC,EACD,CAACH,aAAa,EAAEC,oBAAoB,EAAEE,mBAAmB,CAC3D,CAAC;EAED,OACE7B,KAAA,CAAAoC,aAAA,CAAC3B,qBAAqB;IACpB4B,UAAU,EAAET,iBAAkB;IAC9BG,WAAW,EAAEA;EAAY,GAEzB/B,KAAA,CAAAoC,aAAA,CAACxB,gBAAgB,EAAA0B,QAAA;IACfC,IAAI,EAAC,MAAM;IACXd,SAAS,EAAEA,SAAU;IACrBK,sBAAsB,EAAEA,sBAAuB;IAC/CZ,SAAS,EAAEb,UAAU,CAAC,8BAA8B,EAAEa,SAAS;EAAE,GAC7DI,SAAS,GAEbtB,KAAA,CAAAoC,aAAA,CAAC7B,IAAI,CAACiC,KAAK,QACRrB,KAAK,IAAInB,KAAA,CAAAoC,aAAA,CAAC5B,IAAI;IAACiC,IAAI,EAAC;EAAO,GAAEtB,KAAY,CAAC,EAC1CF,QAAQ,EACTjB,KAAA,CAAAoC,aAAA,CAACvB,OAAO,QACNb,KAAA,CAAAoC,aAAA,CAACzB,gBAAgB;IAACS,MAAM,EAAEA,MAAO;IAACC,QAAQ,EAAEA;EAAS,CAAE,CAChD,CACC,CACI,CACG,CAAC;AAE5B;AAEAP,aAAa,CAAC4B,qBAAqB,GAAG,IAAI;AAC1C,eAAe5B,aAAa"}
+{"version":3,"file":"EditContainer.js","names":["React","useCallback","useContext","useMemo","useRef","classnames","convertJsxToString","Flex","Lead","FieldBoundaryProvider","SectionContainerContext","Toolbar","DoneButton","CancelButton","SectionContainer","EditContainer","props","_ref","children","className","title","onDone","onCancel","restProps","_objectWithoutProperties","_excluded","ariaLabel","containerMode","initialContainerMode","validateInitially","switchContainerMode","omitFocusManagementRef","onPathError","path","error","Error","current","hasToolbar","Children","toArray","some","child","createElement","showErrors","_extends","mode","Stack","size","_DoneButton","_CancelButton","_supportsSpacingProps"],"sources":["../../../../../../../src/extensions/forms/Form/Section/EditContainer/EditContainer.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } from 'react'\nimport classnames from 'classnames'\nimport { convertJsxToString } from '../../../../../shared/component-helper'\nimport { Flex } from '../../../../../components'\nimport { Props as FlexContainerProps } from '../../../../../components/flex/Container'\nimport { Lead } from '../../../../../elements'\nimport FieldBoundaryProvider from '../../../DataContext/FieldBoundary/FieldBoundaryProvider'\nimport SectionContainerContext from '../containers/SectionContainerContext'\nimport Toolbar from '../Toolbar/Toolbar'\nimport DoneButton from './DoneButton'\nimport CancelButton from './CancelButton'\nimport SectionContainer, {\n  SectionContainerProps,\n} from '../containers/SectionContainer'\nimport { Path } from '../../../types'\n\nexport type Props = {\n  title?: React.ReactNode\n  onDone?: () => void\n  onCancel?: () => void\n}\n\nexport type AllProps = Props & SectionContainerProps & FlexContainerProps\n\nfunction EditContainer(props: AllProps) {\n  const { children, className, title, onDone, onCancel, ...restProps } =\n    props || {}\n  const ariaLabel = useMemo(() => convertJsxToString(title), [title])\n  const {\n    containerMode,\n    initialContainerMode,\n    validateInitially,\n    switchContainerMode,\n  } = useContext(SectionContainerContext) || {}\n  const omitFocusManagementRef = useRef(false)\n\n  const onPathError = useCallback(\n    (path: Path, error: Error) => {\n      if (\n        initialContainerMode === 'auto' &&\n        containerMode !== 'edit' &&\n        error instanceof Error\n      ) {\n        omitFocusManagementRef.current = true\n        switchContainerMode?.('edit')\n      }\n    },\n    [containerMode, initialContainerMode, switchContainerMode]\n  )\n\n  const hasToolbar = React.Children.toArray(children).some((child) => {\n    return child?.['type'] === Toolbar\n  })\n\n  return (\n    <FieldBoundaryProvider\n      showErrors={validateInitially}\n      onPathError={onPathError}\n    >\n      <SectionContainer\n        mode=\"edit\"\n        ariaLabel={ariaLabel}\n        omitFocusManagementRef={omitFocusManagementRef}\n        className={classnames('dnb-forms-section-edit-block', className)}\n        {...restProps}\n      >\n        <Flex.Stack>\n          {title && <Lead size=\"basis\">{title}</Lead>}\n          {children}\n          {hasToolbar ? null : (\n            <Toolbar onDone={onDone} onCancel={onCancel}>\n              <DoneButton />\n              <CancelButton />\n            </Toolbar>\n          )}\n        </Flex.Stack>\n      </SectionContainer>\n    </FieldBoundaryProvider>\n  )\n}\n\nEditContainer.DoneButton = DoneButton\nEditContainer.CancelButton = CancelButton\nEditContainer._supportsSpacingProps = true\nexport default EditContainer\n"],"mappings":"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"}

package/es/extensions/forms/Form/Section/EditContainer/EditContainerDocs.js

@@ -9,7 +9,7 @@ export const EditContainerProperties = {
     type: 'string',
     status: 'optional'
   },
-  '[FlexVertical](/uilib/layout/flex/container/)': {
+  '[FlexVertical](/uilib/layout/flex/container/properties)': {
     doc: 'All Flex.Vertical properties.',
     type: 'Various',
     status: 'optional'

package/es/extensions/forms/Form/Section/EditContainer/EditContainerDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditContainerDocs.js","names":["EditContainerProperties","title","doc","type","status","variant","EditContainerEvents","onDone","onCancel"],"sources":["../../../../../../../src/extensions/forms/Form/Section/EditContainer/EditContainerDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../../shared/types'\n\nexport const EditContainerProperties: PropertiesTableProps = {\n  title: {\n    doc: 'The title of the container.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.',\n    type: 'string',\n    status: 'optional',\n  },\n\n  '[FlexVertical](/uilib/layout/flex/container/)': {\n    doc: 'All Flex.Vertical properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n}\n\nexport const EditContainerEvents: PropertiesTableProps = {\n  onDone: {\n    doc: 'Callback for the done button.',\n    type: 'Function',\n    status: 'optional',\n  },\n  onCancel: {\n    doc: 'Callback for the cancel button.',\n    type: 'Function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,uBAA6C,GAAG;EAC3DC,KAAK,EAAE;IACLC,GAAG,EAAE,6BAA6B;IAClCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDC,OAAO,EAAE;IACPH,GAAG,EAAE,2FAA2F;IAChGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EAED,+CAA+C,EAAE;IAC/CF,GAAG,EAAE,+BAA+B;IACpCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAME,mBAAyC,GAAG;EACvDC,MAAM,EAAE;IACNL,GAAG,EAAE,+BAA+B;IACpCC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDI,QAAQ,EAAE;IACRN,GAAG,EAAE,iCAAiC;IACtCC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"EditContainerDocs.js","names":["EditContainerProperties","title","doc","type","status","variant","EditContainerEvents","onDone","onCancel"],"sources":["../../../../../../../src/extensions/forms/Form/Section/EditContainer/EditContainerDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../../shared/types'\n\nexport const EditContainerProperties: PropertiesTableProps = {\n  title: {\n    doc: 'The title of the container.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.',\n    type: 'string',\n    status: 'optional',\n  },\n\n  '[FlexVertical](/uilib/layout/flex/container/properties)': {\n    doc: 'All Flex.Vertical properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n}\n\nexport const EditContainerEvents: PropertiesTableProps = {\n  onDone: {\n    doc: 'Callback for the done button.',\n    type: 'Function',\n    status: 'optional',\n  },\n  onCancel: {\n    doc: 'Callback for the cancel button.',\n    type: 'Function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,uBAA6C,GAAG;EAC3DC,KAAK,EAAE;IACLC,GAAG,EAAE,6BAA6B;IAClCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDC,OAAO,EAAE;IACPH,GAAG,EAAE,2FAA2F;IAChGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EAED,yDAAyD,EAAE;IACzDF,GAAG,EAAE,+BAA+B;IACpCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAME,mBAAyC,GAAG;EACvDC,MAAM,EAAE;IACNL,GAAG,EAAE,+BAA+B;IACpCC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDI,QAAQ,EAAE;IACRN,GAAG,EAAE,iCAAiC;IACtCC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}

package/es/extensions/forms/Form/Section/Section.d.ts

@@ -2,10 +2,11 @@ import React from 'react';
 import { SectionContextState } from './SectionContext';
 import type { Props as DataContextProps } from '../../DataContext/Provider';
 import type { ContainerMode } from './containers/SectionContainer';
-import type { FieldBlockProps, Path, FieldProps } from '../../types';
+import type { Path, FieldProps } from '../../types';
 import type { JsonObject } from '../../utils/json-pointer';
+import type { SharedFieldBlockProps } from '../../FieldBlock';
 export type OverwritePropsDefaults = {
-    [key: Path]: (FieldProps & FieldBlockProps) | OverwritePropsDefaults;
+    [key: Path]: (FieldProps & SharedFieldBlockProps) | OverwritePropsDefaults;
 };
 export type SectionProps<overwriteProps = OverwritePropsDefaults> = {
     /**
@@ -43,6 +44,7 @@ export type LocalProps = SectionProps & {
 };
 declare function SectionComponent(props: LocalProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SectionComponent {
+    var Toolbar: typeof import("./Toolbar").default;
     var ViewContainer: typeof import("./ViewContainer/ViewContainer").default;
     var EditContainer: typeof import("./EditContainer/EditContainer").default;
     var _supportsSpacingProps: any;

package/es/extensions/forms/Form/Section/Section.js

@@ -12,6 +12,7 @@ import FieldPropsProvider from '../../Field/Provider';
 import SectionContainerProvider from './containers/SectionContainerProvider';
 import ViewContainer from './ViewContainer';
 import EditContainer from './EditContainer';
+import Toolbar from './Toolbar';
 function SectionComponent(props) {
   var _path$startsWith, _nestedProps$overwrit;
   const {
@@ -66,6 +67,7 @@ function SectionComponent(props) {
     translations: translations
   }, fieldProps), children)));
 }
+SectionComponent.Toolbar = Toolbar;
 SectionComponent.ViewContainer = ViewContainer;
 SectionComponent.EditContainer = EditContainer;
 SectionComponent._supportsSpacingProps = undefined;

package/es/extensions/forms/Form/Section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","names":["React","useCallback","useContext","useMemo","SectionContext","DataContext","Provider","FieldPropsProvider","SectionContainerProvider","ViewContainer","EditContainer","SectionComponent","props","_path$startsWith","_nestedProps$overwrit","path","overwriteProps","translations","required","data","defaultData","validateInitially","containerMode","onChange","errorPrioritization","children","startsWith","call","Error","hasContext","addOnChangeHandler","nestedPath","nestedProps","handleChange","args","identifier","fieldProps","undefined","createElement","value","_extends","_objectSpread","substring","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Section/Section.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport SectionContext, { SectionContextState } from './SectionContext'\nimport DataContext from '../../DataContext/Context'\nimport Provider from '../../DataContext/Provider/Provider'\nimport FieldPropsProvider from '../../Field/Provider'\nimport SectionContainerProvider from './containers/SectionContainerProvider'\nimport ViewContainer from './ViewContainer'\nimport EditContainer from './EditContainer'\n\nimport type { Props as DataContextProps } from '../../DataContext/Provider'\nimport type { ContainerMode } from './containers/SectionContainer'\nimport type {\n  FieldBlockProps,\n  Path,\n  FieldProps,\n  OnChange,\n} from '../../types'\nimport type { JsonObject } from '../../utils/json-pointer'\n\nexport type OverwritePropsDefaults = {\n  [key: Path]: (FieldProps & FieldBlockProps) | OverwritePropsDefaults\n}\nexport type SectionProps<overwriteProps = OverwritePropsDefaults> = {\n  /**\n   * Path to the section.\n   * When defined, fields inside the section will get this path as a prefix of their own path.\n   */\n  path?: Path\n\n  /**\n   * Overwrite field props for the section.\n   */\n  overwriteProps?: overwriteProps | OverwritePropsDefaults\n\n  /**\n   * Makes all fields inside it required.\n   */\n  required?: boolean\n\n  /**\n   * If set to `true`, the whole section will be validated initially. All fields will then automatically get `validateInitially` and show their error messages. Can be useful in combination with `containerMode=\"auto\"`.\n   */\n  validateInitially?: boolean\n\n  /**\n   * Defines the container mode. Can be `view`, `edit` or `auto`.\n   * When set to `auto`, the mode will initially be \"edit\" if fields contain errors.\n   * Defaults to `auto`.\n   */\n  containerMode?: ContainerMode\n\n  /**\n   * Only for internal use and undocumented for now.\n   * Prioritize error techniques for the section.\n   * Can be `fieldSchema`, `sectionSchema` or `contextSchema.\n   */\n  errorPrioritization?: SectionContextState['errorPrioritization']\n} & Pick<\n  DataContextProps<JsonObject>,\n  'data' | 'defaultData' | 'onChange' | 'translations'\n>\n\nexport type LocalProps = SectionProps & {\n  children: React.ReactNode\n}\n\nfunction SectionComponent(props: LocalProps) {\n  const {\n    path,\n    overwriteProps,\n    translations,\n    required,\n    data,\n    defaultData,\n    validateInitially,\n    containerMode = 'auto',\n    onChange,\n    errorPrioritization = ['contextSchema'],\n    children,\n  } = props\n\n  if (path && !path.startsWith?.('/')) {\n    throw new Error(`path=\"${path}\" must start with a slash`)\n  }\n\n  const { hasContext, addOnChangeHandler } = useContext(DataContext)\n\n  const { path: nestedPath, props: nestedProps } =\n    useContext(SectionContext) || {}\n\n  const handleChange = useCallback<OnChange>(\n    (...args) => onChange?.(...args),\n    [onChange]\n  )\n  addOnChangeHandler?.(handleChange)\n\n  const identifier = useMemo(() => {\n    return `${nestedPath && nestedPath !== '/' ? nestedPath : ''}${\n      path || ''\n    }`\n  }, [path, nestedPath])\n  const fieldProps = required ? { required: true } : undefined\n\n  if (!hasContext) {\n    return (\n      <Provider data={data} defaultData={defaultData}>\n        <SectionComponent {...props} />\n      </Provider>\n    )\n  }\n\n  return (\n    <SectionContext.Provider\n      value={{\n        path: identifier,\n        errorPrioritization,\n        props,\n      }}\n    >\n      <SectionContainerProvider\n        validateInitially={validateInitially}\n        containerMode={containerMode}\n      >\n        <FieldPropsProvider\n          overwriteProps={{\n            ...overwriteProps,\n            ...(nestedProps?.overwriteProps?.[\n              path.substring(1)\n            ] as OverwritePropsDefaults),\n          }}\n          translations={translations}\n          {...fieldProps}\n        >\n          {children}\n        </FieldPropsProvider>\n      </SectionContainerProvider>\n    </SectionContext.Provider>\n  )\n}\n\nSectionComponent.ViewContainer = ViewContainer\nSectionComponent.EditContainer = EditContainer\n\nSectionComponent._supportsSpacingProps = undefined\nexport default SectionComponent\n"],"mappings":"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"}
+{"version":3,"file":"Section.js","names":["React","useCallback","useContext","useMemo","SectionContext","DataContext","Provider","FieldPropsProvider","SectionContainerProvider","ViewContainer","EditContainer","Toolbar","SectionComponent","props","_path$startsWith","_nestedProps$overwrit","path","overwriteProps","translations","required","data","defaultData","validateInitially","containerMode","onChange","errorPrioritization","children","startsWith","call","Error","hasContext","addOnChangeHandler","nestedPath","nestedProps","handleChange","args","identifier","fieldProps","undefined","createElement","value","_extends","_objectSpread","substring","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Section/Section.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport SectionContext, { SectionContextState } from './SectionContext'\nimport DataContext from '../../DataContext/Context'\nimport Provider from '../../DataContext/Provider/Provider'\nimport FieldPropsProvider from '../../Field/Provider'\nimport SectionContainerProvider from './containers/SectionContainerProvider'\nimport ViewContainer from './ViewContainer'\nimport EditContainer from './EditContainer'\n\nimport type { Props as DataContextProps } from '../../DataContext/Provider'\nimport type { ContainerMode } from './containers/SectionContainer'\nimport type { Path, FieldProps, OnChange } from '../../types'\nimport type { JsonObject } from '../../utils/json-pointer'\nimport type { SharedFieldBlockProps } from '../../FieldBlock'\nimport Toolbar from './Toolbar'\n\nexport type OverwritePropsDefaults = {\n  [key: Path]:\n    | (FieldProps & SharedFieldBlockProps)\n    | OverwritePropsDefaults\n}\nexport type SectionProps<overwriteProps = OverwritePropsDefaults> = {\n  /**\n   * Path to the section.\n   * When defined, fields inside the section will get this path as a prefix of their own path.\n   */\n  path?: Path\n\n  /**\n   * Overwrite field props for the section.\n   */\n  overwriteProps?: overwriteProps | OverwritePropsDefaults\n\n  /**\n   * Makes all fields inside it required.\n   */\n  required?: boolean\n\n  /**\n   * If set to `true`, the whole section will be validated initially. All fields will then automatically get `validateInitially` and show their error messages. Can be useful in combination with `containerMode=\"auto\"`.\n   */\n  validateInitially?: boolean\n\n  /**\n   * Defines the container mode. Can be `view`, `edit` or `auto`.\n   * When set to `auto`, the mode will initially be \"edit\" if fields contain errors.\n   * Defaults to `auto`.\n   */\n  containerMode?: ContainerMode\n\n  /**\n   * Only for internal use and undocumented for now.\n   * Prioritize error techniques for the section.\n   * Can be `fieldSchema`, `sectionSchema` or `contextSchema.\n   */\n  errorPrioritization?: SectionContextState['errorPrioritization']\n} & Pick<\n  DataContextProps<JsonObject>,\n  'data' | 'defaultData' | 'onChange' | 'translations'\n>\n\nexport type LocalProps = SectionProps & {\n  children: React.ReactNode\n}\n\nfunction SectionComponent(props: LocalProps) {\n  const {\n    path,\n    overwriteProps,\n    translations,\n    required,\n    data,\n    defaultData,\n    validateInitially,\n    containerMode = 'auto',\n    onChange,\n    errorPrioritization = ['contextSchema'],\n    children,\n  } = props\n\n  if (path && !path.startsWith?.('/')) {\n    throw new Error(`path=\"${path}\" must start with a slash`)\n  }\n\n  const { hasContext, addOnChangeHandler } = useContext(DataContext)\n\n  const { path: nestedPath, props: nestedProps } =\n    useContext(SectionContext) || {}\n\n  const handleChange = useCallback<OnChange>(\n    (...args) => onChange?.(...args),\n    [onChange]\n  )\n  addOnChangeHandler?.(handleChange)\n\n  const identifier = useMemo(() => {\n    return `${nestedPath && nestedPath !== '/' ? nestedPath : ''}${\n      path || ''\n    }`\n  }, [path, nestedPath])\n  const fieldProps = required ? { required: true } : undefined\n\n  if (!hasContext) {\n    return (\n      <Provider data={data} defaultData={defaultData}>\n        <SectionComponent {...props} />\n      </Provider>\n    )\n  }\n\n  return (\n    <SectionContext.Provider\n      value={{\n        path: identifier,\n        errorPrioritization,\n        props,\n      }}\n    >\n      <SectionContainerProvider\n        validateInitially={validateInitially}\n        containerMode={containerMode}\n      >\n        <FieldPropsProvider\n          overwriteProps={{\n            ...overwriteProps,\n            ...(nestedProps?.overwriteProps?.[\n              path.substring(1)\n            ] as OverwritePropsDefaults),\n          }}\n          translations={translations}\n          {...fieldProps}\n        >\n          {children}\n        </FieldPropsProvider>\n      </SectionContainerProvider>\n    </SectionContext.Provider>\n  )\n}\n\nSectionComponent.Toolbar = Toolbar\nSectionComponent.ViewContainer = ViewContainer\nSectionComponent.EditContainer = EditContainer\n\nSectionComponent._supportsSpacingProps = undefined\nexport default SectionComponent\n"],"mappings":"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"}