@dnb/eufemia 10.55.0 → 10.56.0

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{--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)}}
+:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}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;--max-width:var(--forms-field-width--large)}.dnb-forms-field-block__grid{display:grid;grid-template-areas:"label" "help" "contents" "indicator" "status";grid-template-columns:minmax(min-content,var(--block-content-width,auto))}.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:not([class*="--content-width"]){--max-width:60ch}.dnb-forms-field-block__label,.dnb-forms-field-block__label.dnb-form-label{align-items:center;display:flex;grid-area:label;margin-right:0;max-width:var(--max-width)}.dnb-forms-field-block__label.dnb-form-label__description,.dnb-forms-field-block__label__description{margin-left:.3em}.dnb-forms-field-block__label.dnb-form-label__content:has(+.dnb-help-button),.dnb-forms-field-block__label.dnb-form-label__description:has(+.dnb-help-button),.dnb-forms-field-block__label__content:has(+.dnb-help-button),.dnb-forms-field-block__label__description:has(+.dnb-help-button){margin-right:.5rem}.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{margin-bottom:.5rem}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label{margin-right:1rem}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal>.dnb-form-label{margin-bottom:var(--label-margin);margin-top:var(--label-margin)}@media screen and (max-width:40em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal>.dnb-form-label{margin-bottom:calc(var(--label-margin) + .5rem)}}@media screen and (min-width:40.00625em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" ". help" ". indicator" ". 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-help-button__content{--help-button-indent-width:0}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content .dnb-section{--rounded-corner:0.25rem;align-self:flex-start}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__contents{align-self:end}}.dnb-forms-field-block__indicator{grid-area:indicator}.dnb-forms-field-block__help{display:flex;flex-flow:column;grid-area:help}.dnb-forms-field-block__help .dnb-section{margin-bottom:1rem}.dnb-forms-field-block__help .dnb-section>.dnb-p--lead{margin-bottom:.5rem}@media screen and (min-width:40.00625em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__help .dnb-section{margin-bottom:0;margin-top:.5rem}}.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

@@ -9,16 +9,6 @@ $breakpoints: map.merge(
   )
 );
 
-// Ensure inputs to not overflow on xx-small (defined above), but exclude e.g. Autocomplete
-.dnb-forms-field-string,
-.dnb-forms-field-number {
-  @include allBelow(xx-small) {
-    .dnb-input__shell {
-      width: 90%;
-    }
-  }
-}
-
 fieldset.dnb-forms-field-block {
   @include fieldsetReset();
 }
@@ -34,48 +24,12 @@ fieldset.dnb-forms-field-block {
     );
     grid-template-areas:
       'label'
+      'help'
       'contents'
+      'indicator'
       'status';
   }
 
-  &__grid#{&}--layout-vertical {
-    flex-wrap: wrap;
-    & > .dnb-form-label,
-    & > .dnb-forms-field-block__label > .dnb-form-label {
-      margin-bottom: 0.5rem;
-    }
-  }
-
-  // Horizontal layout
-  &__grid#{&}--layout-horizontal {
-    @include allBelow(small) {
-      & > .dnb-form-label,
-      & > .dnb-forms-field-block__label > .dnb-form-label {
-        margin-bottom: 0.5rem;
-      }
-    }
-    @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';
-
-      .dnb-forms-field-block__contents {
-        align-self: end;
-      }
-    }
-  }
-
   // Align label vertically with the content (input etc.)
   --label-margin: 0.25rem;
   &--label-height-small {
@@ -108,17 +62,109 @@ fieldset.dnb-forms-field-block {
     }
   }
 
-  // Elements
-  &__label {
+  --max-width: var(--forms-field-width--large);
+  &:not([class*='--content-width']) {
+    --max-width: 60ch;
+  }
+
+  &__label,
+  &__label.dnb-form-label {
     grid-area: label;
     display: flex;
-    flex-flow: row;
-    justify-content: space-between;
+    max-width: var(--max-width); // to enhance readability
     align-items: center;
+
+    margin-right: 0;
+
+    &__description {
+      margin-left: 0.3em;
+    }
+
+    &__content:has(+ .dnb-help-button),
+    &__description:has(+ .dnb-help-button) {
+      margin-right: 0.5rem;
+    }
+  }
+
+  &__grid#{&}--layout-vertical {
+    flex-wrap: wrap;
+    & > .dnb-form-label {
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  // Horizontal layout
+  &__grid#{&}--layout-horizontal &__label {
+    margin-right: 1rem;
   }
+  &__grid#{&}--layout-horizontal {
+    & > .dnb-form-label {
+      margin-top: var(--label-margin);
+      margin-bottom: var(--label-margin);
+    }
+
+    @include allBelow(small) {
+      & > .dnb-form-label {
+        margin-bottom: calc(var(--label-margin) + 0.5rem);
+      }
+    }
+    @include allAbove(small) {
+      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;
+
+      // When stretching the "help" over two columns,
+      // it influences the "label" width when shown,
+      // and there is not layoutOptions defined.
+      grid-template-areas:
+        'label contents'
+        '. help'
+        '. indicator'
+        '. status';
 
-  &__label-description {
-    margin-left: 0.3em;
+      .dnb-help-button__content {
+        --help-button-indent-width: 0;
+
+        // Align to how the FormStatus looks
+        .dnb-section {
+          --rounded-corner: 0.25rem;
+          align-self: flex-start; // Do not stretch the content
+        }
+      }
+
+      .dnb-forms-field-block__contents {
+        align-self: end;
+      }
+    }
+  }
+
+  &__indicator {
+    grid-area: indicator;
+  }
+
+  &__help {
+    grid-area: help;
+    display: flex;
+    flex-flow: column;
+
+    .dnb-section {
+      margin-bottom: 1rem;
+
+      & > .dnb-p--lead {
+        margin-bottom: 0.5rem;
+      }
+    }
+  }
+  &__grid#{&}--layout-horizontal &__help {
+    @include allAbove(small) {
+      .dnb-section {
+        margin-top: 0.5rem;
+        margin-bottom: 0;
+      }
+    }
   }
 
   &__status {

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

@@ -1,4 +1,4 @@
-.dnb-forms-field-block__label-description {
+.dnb-forms-field-block__label__description {
   color: var(--sb-color-gray-dark);
   font-size: var(--font-size-small);
 }

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

@@ -1 +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}
+.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

@@ -1,5 +1,5 @@
 .dnb-forms-field-block {
-  &__label-description {
+  &__label__description {
     color: var(--sb-color-gray-dark);
     font-size: var(--font-size-small);
   }

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

@@ -1,4 +1,4 @@
-.dnb-forms-field-block__label-description {
+.dnb-forms-field-block__label__description {
   color: var(--color-black-55);
   font-size: var(--font-size-small);
 }

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

@@ -1 +1 @@
-.dnb-forms-field-block__label-description{color:var(--color-black-55);font-size:var(--font-size-small)}
+.dnb-forms-field-block__label__description{color:var(--color-black-55);font-size:var(--font-size-small)}

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

@@ -1,5 +1,5 @@
 .dnb-forms-field-block {
-  &__label-description {
+  &__label__description {
     color: var(--color-black-55);
     font-size: var(--font-size-small);
   }

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

@@ -1,8 +1,10 @@
 import React from 'react';
+import { HelpProps } from '../../../../components/help-button/HelpButtonInline';
 import type { HeadingLevel } from '../../../../components/heading/Heading';
 import type { ComponentProps } from '../../types';
 export type Props = ComponentProps & {
     level?: HeadingLevel;
+    help?: HelpProps;
     children?: React.ReactNode;
 } & Omit<React.HTMLProps<HTMLElement>, 'size'>;
 declare function MainHeading({ level, ...props }: Props): import("react/jsx-runtime").JSX.Element;

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

@@ -1,26 +1,39 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["level"],
-  _excluded2 = ["className", "children"];
+  _excluded2 = ["help", "className", "children"];
 import React from 'react';
 import classnames from 'classnames';
+import useId from '../../../../shared/helpers/useId';
 import Heading from '../../../../components/heading/Heading';
+import HelpButtonInline, { HelpButtonInlineContent } from '../../../../components/help-button/HelpButtonInline';
 function MainHeading(_ref) {
   let {
       level
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
+      help,
       className,
       children
     } = props,
     rest = _objectWithoutProperties(props, _excluded2);
-  return React.createElement(Heading, _extends({
-    className: classnames('dnb-forms-main-heading', className),
+  const helpId = useId();
+  const hasHelp = (help === null || help === void 0 ? void 0 : help.title) || (help === null || help === void 0 ? void 0 : help.content);
+  return React.createElement(React.Fragment, null, React.createElement(Heading, _extends({
+    className: classnames("dnb-forms-main-heading dnb-card--auto-indent", className),
     level: level || 2,
     skip_correction: true,
     size: "large"
-  }, rest), children);
+  }, rest), children, hasHelp && React.createElement(HelpButtonInline, {
+    left: "x-small",
+    contentId: helpId,
+    help: help
+  })), hasHelp && React.createElement(HelpButtonInlineContent, {
+    top: "x-small",
+    contentId: helpId,
+    help: help
+  }));
 }
 MainHeading._supportsSpacingProps = true;
 MainHeading._isHeadingElement = true;

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

@@ -1 +1 @@
-{"version":3,"file":"MainHeading.js","names":["React","classnames","Heading","MainHeading","_ref","level","props","_objectWithoutProperties","_excluded","className","children","rest","_excluded2","createElement","_extends","skip_correction","size","_supportsSpacingProps","_isHeadingElement"],"sources":["../../../../../../src/extensions/forms/Form/MainHeading/MainHeading.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Heading from '../../../../components/heading/Heading'\nimport type { HeadingLevel } from '../../../../components/heading/Heading'\nimport type { ComponentProps } from '../../types'\n\nexport type Props = ComponentProps & {\n  level?: HeadingLevel\n  children?: React.ReactNode\n} & Omit<React.HTMLProps<HTMLElement>, 'size'>\n\nfunction MainHeading({ level, ...props }: Props) {\n  const { className, children, ...rest } = props\n  return (\n    <Heading\n      className={classnames('dnb-forms-main-heading', className)}\n      level={level || 2}\n      skip_correction\n      size=\"large\"\n      {...rest}\n    >\n      {children}\n    </Heading>\n  )\n}\n\nMainHeading._supportsSpacingProps = true\nMainHeading._isHeadingElement = true\n\nexport default MainHeading\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,wCAAwC;AAS5D,SAASC,WAAWA,CAAAC,IAAA,EAA6B;EAAA,IAA5B;MAAEC;IAAuB,CAAC,GAAAD,IAAA;IAAdE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EACpC,MAAM;MAAEC,SAAS;MAAEC;IAAkB,CAAC,GAAGJ,KAAK;IAAdK,IAAI,GAAAJ,wBAAA,CAAKD,KAAK,EAAAM,UAAA;EAC9C,OACEZ,KAAA,CAAAa,aAAA,CAACX,OAAO,EAAAY,QAAA;IACNL,SAAS,EAAER,UAAU,CAAC,wBAAwB,EAAEQ,SAAS,CAAE;IAC3DJ,KAAK,EAAEA,KAAK,IAAI,CAAE;IAClBU,eAAe;IACfC,IAAI,EAAC;EAAO,GACRL,IAAI,GAEPD,QACM,CAAC;AAEd;AAEAP,WAAW,CAACc,qBAAqB,GAAG,IAAI;AACxCd,WAAW,CAACe,iBAAiB,GAAG,IAAI;AAEpC,eAAef,WAAW"}
+{"version":3,"file":"MainHeading.js","names":["React","classnames","useId","Heading","HelpButtonInline","HelpButtonInlineContent","MainHeading","_ref","level","props","_objectWithoutProperties","_excluded","help","className","children","rest","_excluded2","helpId","hasHelp","title","content","createElement","Fragment","_extends","skip_correction","size","left","contentId","top","_supportsSpacingProps","_isHeadingElement"],"sources":["../../../../../../src/extensions/forms/Form/MainHeading/MainHeading.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport useId from '../../../../shared/helpers/useId'\nimport Heading from '../../../../components/heading/Heading'\nimport HelpButtonInline, {\n  HelpButtonInlineContent,\n  HelpProps,\n} from '../../../../components/help-button/HelpButtonInline'\nimport type { HeadingLevel } from '../../../../components/heading/Heading'\nimport type { ComponentProps } from '../../types'\n\nexport type Props = ComponentProps & {\n  level?: HeadingLevel\n  help?: HelpProps\n  children?: React.ReactNode\n} & Omit<React.HTMLProps<HTMLElement>, 'size'>\n\nfunction MainHeading({ level, ...props }: Props) {\n  const { help, className, children, ...rest } = props\n  const helpId = useId()\n  const hasHelp = help?.title || help?.content\n\n  return (\n    <>\n      <Heading\n        className={classnames(\n          'dnb-forms-main-heading',\n          'dnb-card--auto-indent',\n          className\n        )}\n        level={level || 2}\n        skip_correction\n        size=\"large\"\n        {...rest}\n      >\n        {children}\n        {hasHelp && (\n          <HelpButtonInline\n            left=\"x-small\"\n            contentId={helpId}\n            help={help}\n          />\n        )}\n      </Heading>\n\n      {hasHelp && (\n        <HelpButtonInlineContent\n          top=\"x-small\"\n          contentId={helpId}\n          help={help}\n        />\n      )}\n    </>\n  )\n}\n\nMainHeading._supportsSpacingProps = true\nMainHeading._isHeadingElement = true\n\nexport default MainHeading\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,kCAAkC;AACpD,OAAOC,OAAO,MAAM,wCAAwC;AAC5D,OAAOC,gBAAgB,IACrBC,uBAAuB,QAElB,qDAAqD;AAU5D,SAASC,WAAWA,CAAAC,IAAA,EAA6B;EAAA,IAA5B;MAAEC;IAAuB,CAAC,GAAAD,IAAA;IAAdE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EACpC,MAAM;MAAEC,IAAI;MAAEC,SAAS;MAAEC;IAAkB,CAAC,GAAGL,KAAK;IAAdM,IAAI,GAAAL,wBAAA,CAAKD,KAAK,EAAAO,UAAA;EACpD,MAAMC,MAAM,GAAGf,KAAK,CAAC,CAAC;EACtB,MAAMgB,OAAO,GAAG,CAAAN,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEO,KAAK,MAAIP,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEQ,OAAO;EAE5C,OACEpB,KAAA,CAAAqB,aAAA,CAAArB,KAAA,CAAAsB,QAAA,QACEtB,KAAA,CAAAqB,aAAA,CAAClB,OAAO,EAAAoB,QAAA;IACNV,SAAS,EAAEZ,UAAU,iDAGnBY,SACF,CAAE;IACFL,KAAK,EAAEA,KAAK,IAAI,CAAE;IAClBgB,eAAe;IACfC,IAAI,EAAC;EAAO,GACRV,IAAI,GAEPD,QAAQ,EACRI,OAAO,IACNlB,KAAA,CAAAqB,aAAA,CAACjB,gBAAgB;IACfsB,IAAI,EAAC,SAAS;IACdC,SAAS,EAAEV,MAAO;IAClBL,IAAI,EAAEA;EAAK,CACZ,CAEI,CAAC,EAETM,OAAO,IACNlB,KAAA,CAAAqB,aAAA,CAAChB,uBAAuB;IACtBuB,GAAG,EAAC,SAAS;IACbD,SAAS,EAAEV,MAAO;IAClBL,IAAI,EAAEA;EAAK,CACZ,CAEH,CAAC;AAEP;AAEAN,WAAW,CAACuB,qBAAqB,GAAG,IAAI;AACxCvB,WAAW,CAACwB,iBAAiB,GAAG,IAAI;AAEpC,eAAexB,WAAW"}

package/es/extensions/forms/Form/MainHeading/style/dnb-form-main-heading.css

@@ -4,11 +4,7 @@
 .dnb-spacing .dnb-forms-main-heading.dnb-h--large:not([class*=space__]) {
   margin: 0;
 }
-@media screen and (min-width: 40.00625em) {
-  .dnb-forms-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__left]) {
-    margin-left: var(--spacing-medium);
-  }
-}
-.dnb-forms-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
-  margin-bottom: var(--spacing-small);
+
+.dnb-forms-main-heading + .dnb-help-button__content .dnb-section {
+  margin-top: 1rem;
 }

package/es/extensions/forms/Form/MainHeading/style/dnb-form-main-heading.min.css

@@ -1 +1 @@
-.dnb-spacing .dnb-forms-main-heading.dnb-h--large:not([class*=space__]){margin:0}@media screen and (min-width:40.00625em){.dnb-forms-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-forms-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}
+.dnb-spacing .dnb-forms-main-heading.dnb-h--large:not([class*=space__]){margin:0}.dnb-forms-main-heading+.dnb-help-button__content .dnb-section{margin-top:1rem}

package/es/extensions/forms/Form/MainHeading/style/dnb-form-main-heading.scss

@@ -7,16 +7,10 @@
       margin: 0;
     }
   }
+}
 
-  &:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card) {
-    &:not([class*='space__left']) {
-      @include allAbove(small) {
-        margin-left: var(--spacing-medium);
-      }
-    }
-
-    &:not([class*='space__bottom']) {
-      margin-bottom: var(--spacing-small);
-    }
+.dnb-forms-main-heading + .dnb-help-button__content {
+  .dnb-section {
+    margin-top: 1rem;
   }
 }

package/es/extensions/forms/Form/Section/style/dnb-form-section.css

@@ -11,6 +11,9 @@
 .dnb-forms-section-block--variant-basic {
   --border-color: transparent;
 }
+.dnb-forms-section-block--variant-basic .dnb-card {
+  --card-outline-color: transparent;
+}
 .dnb-forms-section-block__inner {
   flex: 1;
   outline: none;

package/es/extensions/forms/Form/Section/style/dnb-form-section.min.css

@@ -1 +1 @@
-.dnb-forms-section-block{--block-outline-color:var(--outline-color,var(--color-lavender))}.dnb-forms-section-block--error:has(.dnb-form-status--error){--block-outline-color:var(--color-fire-red)}.dnb-forms-section-block:not(.dnb-height-animation--hidden){display:flex;flex-direction:column}.dnb-forms-section-block--variant-basic{--border-color:transparent}.dnb-forms-section-block__inner{flex:1;margin-bottom:var(--space);outline:none;transform:translateY(-2.5rem);transition:transform .4s var(--easing-default) 50ms,box-shadow .8s var(--easing-default)}.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-small){--space:var(--spacing-small)}.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-medium){--space:var(--spacing-medium)}.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-large){--space:var(--spacing-large)}.dnb-forms-section-block__inner .dnb-dl .dnb-dd{margin-bottom:0}.dnb-forms-section-block--no-animation .dnb-forms-section-block__inner{transform:translateY(0)}.dnb-forms-section-block.dnb-height-animation--is-visible .dnb-forms-section-block__inner{transform:translateY(-.5rem)}.dnb-forms-section-block.dnb-height-animation--parallax .dnb-forms-section-block__inner{transform:translateY(0)}
+.dnb-forms-section-block{--block-outline-color:var(--outline-color,var(--color-lavender))}.dnb-forms-section-block--error:has(.dnb-form-status--error){--block-outline-color:var(--color-fire-red)}.dnb-forms-section-block:not(.dnb-height-animation--hidden){display:flex;flex-direction:column}.dnb-forms-section-block--variant-basic{--border-color:transparent}.dnb-forms-section-block--variant-basic .dnb-card{--card-outline-color:transparent}.dnb-forms-section-block__inner{flex:1;margin-bottom:var(--space);outline:none;transform:translateY(-2.5rem);transition:transform .4s var(--easing-default) 50ms,box-shadow .8s var(--easing-default)}.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-small){--space:var(--spacing-small)}.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-medium){--space:var(--spacing-medium)}.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-large){--space:var(--spacing-large)}.dnb-forms-section-block__inner .dnb-dl .dnb-dd{margin-bottom:0}.dnb-forms-section-block--no-animation .dnb-forms-section-block__inner{transform:translateY(0)}.dnb-forms-section-block.dnb-height-animation--is-visible .dnb-forms-section-block__inner{transform:translateY(-.5rem)}.dnb-forms-section-block.dnb-height-animation--parallax .dnb-forms-section-block__inner{transform:translateY(0)}

package/es/extensions/forms/Form/Section/style/dnb-form-section.scss

@@ -13,6 +13,9 @@
 
     &--variant-basic {
       --border-color: transparent;
+      .dnb-card {
+        --card-outline-color: transparent;
+      }
     }
 
     &__inner {

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

@@ -1,8 +1,10 @@
 import React from 'react';
+import { HelpProps } from '../../../../components/help-button/HelpButtonInline';
 import type { HeadingLevel } from '../../../../components/heading/Heading';
 import type { ComponentProps } from '../../types';
 export type Props = ComponentProps & {
     level?: HeadingLevel;
+    help?: HelpProps;
     children?: React.ReactNode;
 } & Omit<React.HTMLProps<HTMLElement>, 'size'>;
 declare function SubHeading({ level, ...props }: Props): import("react/jsx-runtime").JSX.Element;

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

@@ -1,26 +1,39 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["level"],
-  _excluded2 = ["className", "children"];
+  _excluded2 = ["help", "className", "children"];
 import React from 'react';
 import classnames from 'classnames';
+import useId from '../../../../shared/helpers/useId';
 import Heading from '../../../../components/heading/Heading';
+import HelpButtonInline, { HelpButtonInlineContent } from '../../../../components/help-button/HelpButtonInline';
 function SubHeading(_ref) {
   let {
       level
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
+      help,
       className,
       children
     } = props,
     rest = _objectWithoutProperties(props, _excluded2);
-  return React.createElement(Heading, _extends({
-    className: classnames('dnb-forms-sub-heading', className),
+  const helpId = useId();
+  const hasHelp = (help === null || help === void 0 ? void 0 : help.title) || (help === null || help === void 0 ? void 0 : help.content);
+  return React.createElement(React.Fragment, null, React.createElement(Heading, _extends({
+    className: classnames("dnb-forms-sub-heading dnb-card--auto-indent", className),
     level: level || 3,
     skip_correction: true,
     size: "medium"
-  }, rest), children);
+  }, rest), children, hasHelp && React.createElement(HelpButtonInline, {
+    left: "x-small",
+    contentId: helpId,
+    help: help
+  })), hasHelp && React.createElement(HelpButtonInlineContent, {
+    top: "x-small",
+    contentId: helpId,
+    help: help
+  }));
 }
 SubHeading._supportsSpacingProps = true;
 SubHeading._isHeadingElement = true;

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

@@ -1 +1 @@
-{"version":3,"file":"SubHeading.js","names":["React","classnames","Heading","SubHeading","_ref","level","props","_objectWithoutProperties","_excluded","className","children","rest","_excluded2","createElement","_extends","skip_correction","size","_supportsSpacingProps","_isHeadingElement"],"sources":["../../../../../../src/extensions/forms/Form/SubHeading/SubHeading.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Heading from '../../../../components/heading/Heading'\nimport type { HeadingLevel } from '../../../../components/heading/Heading'\nimport type { ComponentProps } from '../../types'\n\nexport type Props = ComponentProps & {\n  level?: HeadingLevel\n  children?: React.ReactNode\n} & Omit<React.HTMLProps<HTMLElement>, 'size'>\n\nfunction SubHeading({ level, ...props }: Props) {\n  const { className, children, ...rest } = props\n  return (\n    <Heading\n      className={classnames('dnb-forms-sub-heading', className)}\n      level={level || 3}\n      skip_correction\n      size=\"medium\"\n      {...rest}\n    >\n      {children}\n    </Heading>\n  )\n}\n\nSubHeading._supportsSpacingProps = true\nSubHeading._isHeadingElement = true\n\nexport default SubHeading\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,wCAAwC;AAS5D,SAASC,UAAUA,CAAAC,IAAA,EAA6B;EAAA,IAA5B;MAAEC;IAAuB,CAAC,GAAAD,IAAA;IAAdE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EACnC,MAAM;MAAEC,SAAS;MAAEC;IAAkB,CAAC,GAAGJ,KAAK;IAAdK,IAAI,GAAAJ,wBAAA,CAAKD,KAAK,EAAAM,UAAA;EAC9C,OACEZ,KAAA,CAAAa,aAAA,CAACX,OAAO,EAAAY,QAAA;IACNL,SAAS,EAAER,UAAU,CAAC,uBAAuB,EAAEQ,SAAS,CAAE;IAC1DJ,KAAK,EAAEA,KAAK,IAAI,CAAE;IAClBU,eAAe;IACfC,IAAI,EAAC;EAAQ,GACTL,IAAI,GAEPD,QACM,CAAC;AAEd;AAEAP,UAAU,CAACc,qBAAqB,GAAG,IAAI;AACvCd,UAAU,CAACe,iBAAiB,GAAG,IAAI;AAEnC,eAAef,UAAU"}
+{"version":3,"file":"SubHeading.js","names":["React","classnames","useId","Heading","HelpButtonInline","HelpButtonInlineContent","SubHeading","_ref","level","props","_objectWithoutProperties","_excluded","help","className","children","rest","_excluded2","helpId","hasHelp","title","content","createElement","Fragment","_extends","skip_correction","size","left","contentId","top","_supportsSpacingProps","_isHeadingElement"],"sources":["../../../../../../src/extensions/forms/Form/SubHeading/SubHeading.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport useId from '../../../../shared/helpers/useId'\nimport Heading from '../../../../components/heading/Heading'\nimport HelpButtonInline, {\n  HelpButtonInlineContent,\n  HelpProps,\n} from '../../../../components/help-button/HelpButtonInline'\nimport type { HeadingLevel } from '../../../../components/heading/Heading'\nimport type { ComponentProps } from '../../types'\n\nexport type Props = ComponentProps & {\n  level?: HeadingLevel\n  help?: HelpProps\n  children?: React.ReactNode\n} & Omit<React.HTMLProps<HTMLElement>, 'size'>\n\nfunction SubHeading({ level, ...props }: Props) {\n  const { help, className, children, ...rest } = props\n  const helpId = useId()\n  const hasHelp = help?.title || help?.content\n\n  return (\n    <>\n      <Heading\n        className={classnames(\n          'dnb-forms-sub-heading',\n          'dnb-card--auto-indent',\n          className\n        )}\n        level={level || 3}\n        skip_correction\n        size=\"medium\"\n        {...rest}\n      >\n        {children}\n        {hasHelp && (\n          <HelpButtonInline\n            left=\"x-small\"\n            contentId={helpId}\n            help={help}\n          />\n        )}\n      </Heading>\n\n      {hasHelp && (\n        <HelpButtonInlineContent\n          top=\"x-small\"\n          contentId={helpId}\n          help={help}\n        />\n      )}\n    </>\n  )\n}\n\nSubHeading._supportsSpacingProps = true\nSubHeading._isHeadingElement = true\n\nexport default SubHeading\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,kCAAkC;AACpD,OAAOC,OAAO,MAAM,wCAAwC;AAC5D,OAAOC,gBAAgB,IACrBC,uBAAuB,QAElB,qDAAqD;AAU5D,SAASC,UAAUA,CAAAC,IAAA,EAA6B;EAAA,IAA5B;MAAEC;IAAuB,CAAC,GAAAD,IAAA;IAAdE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EACnC,MAAM;MAAEC,IAAI;MAAEC,SAAS;MAAEC;IAAkB,CAAC,GAAGL,KAAK;IAAdM,IAAI,GAAAL,wBAAA,CAAKD,KAAK,EAAAO,UAAA;EACpD,MAAMC,MAAM,GAAGf,KAAK,CAAC,CAAC;EACtB,MAAMgB,OAAO,GAAG,CAAAN,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEO,KAAK,MAAIP,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEQ,OAAO;EAE5C,OACEpB,KAAA,CAAAqB,aAAA,CAAArB,KAAA,CAAAsB,QAAA,QACEtB,KAAA,CAAAqB,aAAA,CAAClB,OAAO,EAAAoB,QAAA;IACNV,SAAS,EAAEZ,UAAU,gDAGnBY,SACF,CAAE;IACFL,KAAK,EAAEA,KAAK,IAAI,CAAE;IAClBgB,eAAe;IACfC,IAAI,EAAC;EAAQ,GACTV,IAAI,GAEPD,QAAQ,EACRI,OAAO,IACNlB,KAAA,CAAAqB,aAAA,CAACjB,gBAAgB;IACfsB,IAAI,EAAC,SAAS;IACdC,SAAS,EAAEV,MAAO;IAClBL,IAAI,EAAEA;EAAK,CACZ,CAEI,CAAC,EAETM,OAAO,IACNlB,KAAA,CAAAqB,aAAA,CAAChB,uBAAuB;IACtBuB,GAAG,EAAC,SAAS;IACbD,SAAS,EAAEV,MAAO;IAClBL,IAAI,EAAEA;EAAK,CACZ,CAEH,CAAC;AAEP;AAEAN,UAAU,CAACuB,qBAAqB,GAAG,IAAI;AACvCvB,UAAU,CAACwB,iBAAiB,GAAG,IAAI;AAEnC,eAAexB,UAAU"}

package/es/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.css

@@ -6,4 +6,8 @@
 }
 .dnb-forms-sub-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
   margin-bottom: var(--spacing-small);
+}
+
+.dnb-forms-sub-heading + .dnb-help-button__content .dnb-section {
+  margin-top: 1rem;
 }

package/es/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.min.css

@@ -1 +1 @@
-.dnb-spacing .dnb-forms-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-forms-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}
+.dnb-spacing .dnb-forms-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-forms-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-forms-sub-heading+.dnb-help-button__content .dnb-section{margin-top:1rem}

package/es/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.scss

@@ -14,3 +14,9 @@
     }
   }
 }
+
+.dnb-forms-sub-heading + .dnb-help-button__content {
+  .dnb-section {
+    margin-top: 1rem;
+  }
+}

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

@@ -1 +1 @@
-{"version":3,"file":"SubmitButton.js","names":["React","useCallback","useContext","classnames","DataContext","Button","SubmitIndicator","useTranslation","send","SubmitButton","props","translations","variant","className","showIndicator","children","text","rest","_objectWithoutProperties","_excluded","content","sendText","formState","handleSubmit","isInsideFormElement","dataContextProps","isolate","onClickHandler","createElement","_extends","onClick","type","icon","state","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/SubmitButton/SubmitButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../../types'\nimport DataContext from '../../DataContext/Context'\nimport Button, { ButtonProps } from '../../../../components/button/Button'\nimport SubmitIndicator from '../SubmitIndicator'\nimport useTranslation from '../../hooks/useTranslation'\nimport { send } from '../../../../icons'\n\nexport type Props = {\n  /**\n   * Show the submit indicator\n   */\n  showIndicator?: boolean\n} & ComponentProps &\n  Omit<ButtonProps, 'variant'> &\n  Partial<React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>> & {\n    variant?: 'send'\n  }\n\nfunction SubmitButton(props: Props) {\n  const translations = useTranslation().SubmitButton\n\n  const { variant, className, showIndicator, children, text, ...rest } =\n    props\n\n  const content =\n    text ||\n    children ||\n    (variant === 'send' ? translations.sendText : translations.text)\n\n  const {\n    formState,\n    handleSubmit,\n    isInsideFormElement,\n    props: dataContextProps,\n  } = useContext(DataContext) || {}\n  const { isolate } = dataContextProps || {}\n\n  const onClickHandler = useCallback(() => {\n    if (!isInsideFormElement) {\n      handleSubmit?.()\n    }\n  }, [isInsideFormElement, handleSubmit])\n\n  return (\n    <Button\n      className={classnames('dnb-forms-submit-button', className)}\n      onClick={onClickHandler}\n      type={isolate ? 'button' : 'submit'}\n      icon={variant === 'send' ? send : null}\n      {...rest}\n    >\n      {content}\n\n      <SubmitIndicator\n        state={\n          showIndicator ? 'pending' : formState // will be enabled in a follow-up PR\n        }\n      />\n    </Button>\n  )\n}\n\nSubmitButton._supportsSpacingProps = true\nexport default SubmitButton\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,WAAW,MAAM,2BAA2B;AACnD,OAAOC,MAAM,MAAuB,sCAAsC;AAC1E,OAAOC,eAAe,MAAM,oBAAoB;AAChD,OAAOC,cAAc,MAAM,4BAA4B;AACvD,SAASC,IAAI,QAAQ,mBAAmB;AAaxC,SAASC,YAAYA,CAACC,KAAY,EAAE;EAClC,MAAMC,YAAY,GAAGJ,cAAc,CAAC,CAAC,CAACE,YAAY;EAElD,MAAM;MAAEG,OAAO;MAAEC,SAAS;MAAEC,aAAa;MAAEC,QAAQ;MAAEC;IAAc,CAAC,GAClEN,KAAK;IADuDO,IAAI,GAAAC,wBAAA,CAChER,KAAK,EAAAS,SAAA;EAEP,MAAMC,OAAO,GACXJ,IAAI,IACJD,QAAQ,KACPH,OAAO,KAAK,MAAM,GAAGD,YAAY,CAACU,QAAQ,GAAGV,YAAY,CAACK,IAAI,CAAC;EAElE,MAAM;IACJM,SAAS;IACTC,YAAY;IACZC,mBAAmB;IACnBd,KAAK,EAAEe;EACT,CAAC,GAAGvB,UAAU,CAACE,WAAW,CAAC,IAAI,CAAC,CAAC;EACjC,MAAM;IAAEsB;EAAQ,CAAC,GAAGD,gBAAgB,IAAI,CAAC,CAAC;EAE1C,MAAME,cAAc,GAAG1B,WAAW,CAAC,MAAM;IACvC,IAAI,CAACuB,mBAAmB,EAAE;MACxBD,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG,CAAC;IAClB;EACF,CAAC,EAAE,CAACC,mBAAmB,EAAED,YAAY,CAAC,CAAC;EAEvC,OACEvB,KAAA,CAAA4B,aAAA,CAACvB,MAAM,EAAAwB,QAAA;IACLhB,SAAS,EAAEV,UAAU,CAAC,yBAAyB,EAAEU,SAAS,CAAE;IAC5DiB,OAAO,EAAEH,cAAe;IACxBI,IAAI,EAAEL,OAAO,GAAG,QAAQ,GAAG,QAAS;IACpCM,IAAI,EAAEpB,OAAO,KAAK,MAAM,GAAGJ,IAAI,GAAG;EAAK,GACnCS,IAAI,GAEPG,OAAO,EAERpB,KAAA,CAAA4B,aAAA,CAACtB,eAAe;IACd2B,KAAK,EACHnB,aAAa,GAAG,SAAS,GAAGQ;EAC7B,CACF,CACK,CAAC;AAEb;AAEAb,YAAY,CAACyB,qBAAqB,GAAG,IAAI;AACzC,eAAezB,YAAY"}
+{"version":3,"file":"SubmitButton.js","names":["React","useCallback","useContext","classnames","DataContext","Button","SubmitIndicator","useTranslation","send","SubmitButton","props","translations","variant","className","showIndicator","children","text","rest","_objectWithoutProperties","_excluded","content","sendText","formState","handleSubmit","isInsideFormElement","dataContextProps","isolate","onClickHandler","createElement","_extends","onClick","type","icon","state","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/SubmitButton/SubmitButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../../types'\nimport DataContext from '../../DataContext/Context'\nimport Button, { ButtonProps } from '../../../../components/button/Button'\nimport SubmitIndicator from '../SubmitIndicator'\nimport useTranslation from '../../hooks/useTranslation'\nimport { send } from '../../../../icons'\n\nexport type Props = {\n  /**\n   * Show the submit indicator\n   */\n  showIndicator?: boolean\n} & ComponentProps &\n  Omit<ButtonProps, 'variant'> &\n  Partial<React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>> & {\n    variant?: 'send'\n  }\n\nfunction SubmitButton(props: Props) {\n  const translations = useTranslation().SubmitButton\n\n  const { variant, className, showIndicator, children, text, ...rest } =\n    props\n\n  const content =\n    text ||\n    children ||\n    (variant === 'send' ? translations.sendText : translations.text)\n\n  const {\n    formState,\n    handleSubmit,\n    isInsideFormElement,\n    props: dataContextProps,\n  } = useContext(DataContext) || {}\n  const { isolate } = dataContextProps || {}\n\n  const onClickHandler = useCallback(() => {\n    if (!isInsideFormElement) {\n      handleSubmit?.()\n    }\n  }, [isInsideFormElement, handleSubmit])\n\n  return (\n    <Button\n      className={classnames('dnb-forms-submit-button', className)}\n      onClick={onClickHandler}\n      type={isolate ? 'button' : 'submit'}\n      icon={variant === 'send' ? send : null}\n      {...rest}\n    >\n      {content}\n\n      <SubmitIndicator state={showIndicator ? 'pending' : formState} />\n    </Button>\n  )\n}\n\nSubmitButton._supportsSpacingProps = true\nexport default SubmitButton\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,WAAW,MAAM,2BAA2B;AACnD,OAAOC,MAAM,MAAuB,sCAAsC;AAC1E,OAAOC,eAAe,MAAM,oBAAoB;AAChD,OAAOC,cAAc,MAAM,4BAA4B;AACvD,SAASC,IAAI,QAAQ,mBAAmB;AAaxC,SAASC,YAAYA,CAACC,KAAY,EAAE;EAClC,MAAMC,YAAY,GAAGJ,cAAc,CAAC,CAAC,CAACE,YAAY;EAElD,MAAM;MAAEG,OAAO;MAAEC,SAAS;MAAEC,aAAa;MAAEC,QAAQ;MAAEC;IAAc,CAAC,GAClEN,KAAK;IADuDO,IAAI,GAAAC,wBAAA,CAChER,KAAK,EAAAS,SAAA;EAEP,MAAMC,OAAO,GACXJ,IAAI,IACJD,QAAQ,KACPH,OAAO,KAAK,MAAM,GAAGD,YAAY,CAACU,QAAQ,GAAGV,YAAY,CAACK,IAAI,CAAC;EAElE,MAAM;IACJM,SAAS;IACTC,YAAY;IACZC,mBAAmB;IACnBd,KAAK,EAAEe;EACT,CAAC,GAAGvB,UAAU,CAACE,WAAW,CAAC,IAAI,CAAC,CAAC;EACjC,MAAM;IAAEsB;EAAQ,CAAC,GAAGD,gBAAgB,IAAI,CAAC,CAAC;EAE1C,MAAME,cAAc,GAAG1B,WAAW,CAAC,MAAM;IACvC,IAAI,CAACuB,mBAAmB,EAAE;MACxBD,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG,CAAC;IAClB;EACF,CAAC,EAAE,CAACC,mBAAmB,EAAED,YAAY,CAAC,CAAC;EAEvC,OACEvB,KAAA,CAAA4B,aAAA,CAACvB,MAAM,EAAAwB,QAAA;IACLhB,SAAS,EAAEV,UAAU,CAAC,yBAAyB,EAAEU,SAAS,CAAE;IAC5DiB,OAAO,EAAEH,cAAe;IACxBI,IAAI,EAAEL,OAAO,GAAG,QAAQ,GAAG,QAAS;IACpCM,IAAI,EAAEpB,OAAO,KAAK,MAAM,GAAGJ,IAAI,GAAG;EAAK,GACnCS,IAAI,GAEPG,OAAO,EAERpB,KAAA,CAAA4B,aAAA,CAACtB,eAAe;IAAC2B,KAAK,EAAEnB,aAAa,GAAG,SAAS,GAAGQ;EAAU,CAAE,CAC1D,CAAC;AAEb;AAEAb,YAAY,CAACyB,qBAAqB,GAAG,IAAI;AACzC,eAAezB,YAAY"}

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

@@ -7,7 +7,7 @@ var _b, _span;
 const _excluded = ["className", "children", "state", "successLabel"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { Icon, Space, Tooltip } from '../../../../components';
 import { check } from '../../../../icons';
@@ -27,11 +27,18 @@ function SubmitIndicator(props) {
   const childrenRef = useRef(null);
   const [willWrap, setWillWrap] = useState(false);
   const key = useMemo(() => convertJsxToString(children), [children]);
+  const recalculate = useCallback(() => {
+    setWillWrap(willWordWrap(childrenRef.current, '. . . '));
+  }, [childrenRef]);
   useLayoutEffect(() => {
-    if (children && state) {
-      setWillWrap(willWordWrap(childrenRef.current, '. . . '));
+    if (key) {
+      recalculate();
+      window.addEventListener('resize', recalculate);
+      return () => {
+        window.removeEventListener('resize', recalculate);
+      };
     }
-  }, [children, state]);
+  }, [key, recalculate]);
   const params = _objectSpread({
     className: classnames('dnb-forms-submit-indicator', className, state && `dnb-forms-submit-indicator--state-${state}`, willWrap && 'dnb-forms-submit-indicator--inline-wrap')
   }, pickSpacingProps(rest));
@@ -39,7 +46,9 @@ function SubmitIndicator(props) {
     role: 'status',
     'aria-busy': true,
     'aria-label': translation.ProgressIndicator.indicator_label
-  } : {};
+  } : {
+    'aria-hidden': true
+  };
   const dot = _b || (_b = React.createElement("b", null, "."));
   const indicator = React.createElement("span", _extends({
     className: "dnb-forms-submit-indicator__content"
@@ -56,6 +65,7 @@ function SubmitIndicator(props) {
   }, children), indicator);
 }
 function willWordWrap(element, word) {
+  var _element$parentElemen;
   if (!element) {
     return;
   }
@@ -63,9 +73,12 @@ function willWordWrap(element, word) {
     offsetHeight,
     innerHTML
   } = element;
-  element.innerHTML += word;
-  const height = element.offsetHeight;
-  element.innerHTML = innerHTML;
+  const clone = element.cloneNode(true);
+  (_element$parentElemen = element.parentElement) === null || _element$parentElemen === void 0 ? void 0 : _element$parentElemen.insertBefore(clone, element);
+  clone.innerHTML += word;
+  const height = clone.offsetHeight;
+  clone.innerHTML = innerHTML;
+  clone.remove();
   return height > offsetHeight;
 }
 SubmitIndicator._supportsSpacingProps = true;

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

@@ -1 +1 @@
-{"version":3,"file":"SubmitIndicator.js","names":["React","useMemo","useRef","useState","classnames","Icon","Space","Tooltip","check","omitSpacingProps","pickSpacingProps","useTranslation","convertJsxToString","useLayoutEffect","window","useEffect","SubmitIndicator","props","className","children","state","successLabel","rest","_objectWithoutProperties","_excluded","translation","childrenRef","willWrap","setWillWrap","key","willWordWrap","current","params","_objectSpread","ariaAttributes","role","ProgressIndicator","indicator_label","dot","_b","createElement","indicator","_extends","targetElement","_span","icon","Fragment","element","ref","word","offsetHeight","innerHTML","height","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/SubmitIndicator/SubmitIndicator.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react'\nimport classnames from 'classnames'\nimport { Icon, Space, Tooltip } from '../../../../components'\nimport type { SpaceProps } from '../../../../components/Space'\nimport { check } from '../../../../icons'\nimport type { SubmitState } from '../../types'\nimport {\n  omitSpacingProps,\n  pickSpacingProps,\n} from '../../../../components/flex/utils'\nimport { useTranslation } from '../../../../shared'\nimport { convertJsxToString } from '../../../../shared/component-helper'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type Props = {\n  state: SubmitState\n  className?: string\n  successLabel?: string\n  children?: React.ReactNode\n} & SpaceProps\n\nfunction SubmitIndicator(props: Props) {\n  const {\n    className,\n    children,\n    state,\n    successLabel = 'Saved',\n    ...rest\n  } = props\n  const translation = useTranslation()\n  const childrenRef = useRef<HTMLSpanElement>(null)\n  const [willWrap, setWillWrap] = useState(false)\n  const key = useMemo(() => convertJsxToString(children), [children])\n\n  useLayoutEffect(() => {\n    if (children && state) {\n      setWillWrap(willWordWrap(childrenRef.current, '. . . '))\n    }\n  }, [children, state])\n\n  const params = {\n    className: classnames(\n      'dnb-forms-submit-indicator',\n      state && `dnb-forms-submit-indicator--state-${state}`,\n      willWrap && 'dnb-forms-submit-indicator--inline-wrap',\n      className\n    ),\n    ...pickSpacingProps(rest),\n  } as SpaceProps\n\n  const ariaAttributes =\n    state === 'pending'\n      ? {\n          role: 'status',\n          'aria-busy': true,\n          'aria-label': translation.ProgressIndicator.indicator_label,\n        }\n      : {}\n\n  const dot = <b>.</b>\n  const indicator = (\n    <span\n      className=\"dnb-forms-submit-indicator__content\"\n      {...ariaAttributes}\n      {...omitSpacingProps(rest)}\n    >\n      {state === 'success' && (\n        <Tooltip\n          targetElement={\n            <span>\n              <Icon icon={check} />\n            </span>\n          }\n        >\n          {successLabel}\n        </Tooltip>\n      )}\n      {state && state !== 'success' && state !== 'abort' && (\n        <>\n          {dot}\n          {dot}\n          {dot}\n        </>\n      )}\n    </span>\n  )\n\n  return (\n    <Space {...params} element=\"span\">\n      {children && (\n        <span ref={childrenRef} key={key}>\n          {children}\n        </span>\n      )}\n      {indicator}\n    </Space>\n  )\n}\n\nfunction willWordWrap(element: HTMLElement, word: string) {\n  if (!element) {\n    return\n  }\n\n  const { offsetHeight, innerHTML } = element\n\n  element.innerHTML += word\n  const height = element.offsetHeight\n  element.innerHTML = innerHTML\n\n  return height > offsetHeight\n}\n\nSubmitIndicator._supportsSpacingProps = true\nexport default SubmitIndicator\n"],"mappings":"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"}
+{"version":3,"file":"SubmitIndicator.js","names":["React","useCallback","useMemo","useRef","useState","classnames","Icon","Space","Tooltip","check","omitSpacingProps","pickSpacingProps","useTranslation","convertJsxToString","useLayoutEffect","window","useEffect","SubmitIndicator","props","className","children","state","successLabel","rest","_objectWithoutProperties","_excluded","translation","childrenRef","willWrap","setWillWrap","key","recalculate","willWordWrap","current","addEventListener","removeEventListener","params","_objectSpread","ariaAttributes","role","ProgressIndicator","indicator_label","dot","_b","createElement","indicator","_extends","targetElement","_span","icon","Fragment","element","ref","word","_element$parentElemen","offsetHeight","innerHTML","clone","cloneNode","parentElement","insertBefore","height","remove","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/SubmitIndicator/SubmitIndicator.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from 'react'\nimport classnames from 'classnames'\nimport { Icon, Space, Tooltip } from '../../../../components'\nimport type { SpaceProps } from '../../../../components/Space'\nimport { check } from '../../../../icons'\nimport type { SubmitState } from '../../types'\nimport {\n  omitSpacingProps,\n  pickSpacingProps,\n} from '../../../../components/flex/utils'\nimport { useTranslation } from '../../../../shared'\nimport { convertJsxToString } from '../../../../shared/component-helper'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type Props = {\n  state: SubmitState\n  className?: string\n  successLabel?: string\n  children?: React.ReactNode\n} & SpaceProps\n\nfunction SubmitIndicator(props: Props) {\n  const {\n    className,\n    children,\n    state,\n    successLabel = 'Saved',\n    ...rest\n  } = props\n  const translation = useTranslation()\n  const childrenRef = useRef<HTMLSpanElement>(null)\n  const [willWrap, setWillWrap] = useState(false)\n  const key = useMemo(() => convertJsxToString(children), [children])\n\n  const recalculate = useCallback(() => {\n    setWillWrap(willWordWrap(childrenRef.current, '. . . '))\n  }, [childrenRef])\n\n  useLayoutEffect(() => {\n    if (key) {\n      recalculate()\n\n      window.addEventListener('resize', recalculate)\n      return () => {\n        window.removeEventListener('resize', recalculate)\n      }\n    }\n  }, [key, recalculate])\n\n  const params = {\n    className: classnames(\n      'dnb-forms-submit-indicator',\n      state && `dnb-forms-submit-indicator--state-${state}`,\n      willWrap && 'dnb-forms-submit-indicator--inline-wrap',\n      className\n    ),\n    ...pickSpacingProps(rest),\n  } as SpaceProps\n\n  const ariaAttributes =\n    state === 'pending'\n      ? {\n          role: 'status',\n          'aria-busy': true,\n          'aria-label': translation.ProgressIndicator.indicator_label,\n        }\n      : {\n          'aria-hidden': true,\n        }\n\n  const dot = <b>.</b>\n  const indicator = (\n    <span\n      className=\"dnb-forms-submit-indicator__content\"\n      {...ariaAttributes}\n      {...omitSpacingProps(rest)}\n    >\n      {state === 'success' && (\n        <Tooltip\n          targetElement={\n            <span>\n              <Icon icon={check} />\n            </span>\n          }\n        >\n          {successLabel}\n        </Tooltip>\n      )}\n      {state && state !== 'success' && state !== 'abort' && (\n        <>\n          {dot}\n          {dot}\n          {dot}\n        </>\n      )}\n    </span>\n  )\n\n  return (\n    <Space {...params} element=\"span\">\n      {children && (\n        <span ref={childrenRef} key={key}>\n          {children}\n        </span>\n      )}\n      {indicator}\n    </Space>\n  )\n}\n\nfunction willWordWrap(element: HTMLElement, word: string) {\n  if (!element) {\n    return\n  }\n\n  const { offsetHeight, innerHTML } = element\n\n  const clone = element.cloneNode(true) as HTMLElement\n  element.parentElement?.insertBefore(clone, element)\n\n  clone.innerHTML += word\n  const height = clone.offsetHeight\n  clone.innerHTML = innerHTML\n\n  clone.remove()\n\n  return height > offsetHeight\n}\n\nSubmitIndicator._supportsSpacingProps = true\nexport default SubmitIndicator\n"],"mappings":"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"}