@dnb/eufemia 9.32.1 → 9.34.0

package/cjs/components/accordion/AccordionHeader.d.ts

@@ -129,6 +129,7 @@ export type AccordionHeaderIcon =
 export type AccordionHeaderIconPosition = 'left' | 'right';
 export type AccordionHeaderDisabled = string | boolean;
 export type AccordionHeaderSkeleton = string | boolean;
+export type AccordionHeaderNoAnimation = string | boolean;
 export type AccordionHeaderSpace =
   | string
   | number
@@ -164,6 +165,7 @@ export interface AccordionHeaderProps
   icon_size?: string;
   disabled?: AccordionHeaderDisabled;
   skeleton?: AccordionHeaderSkeleton;
+  no_animation?: AccordionHeaderNoAnimation;
   space?: AccordionHeaderSpace;
   top?: AccordionHeaderTop;
   right?: AccordionHeaderRight;

package/cjs/components/accordion/AccordionHeader.js

@@ -264,7 +264,8 @@ var AccordionHeader = function (_React$PureComponent) {
           icon = props.icon,
           icon_size = props.icon_size,
           disabled = props.disabled,
-          skeleton = props.skeleton;
+          skeleton = props.skeleton,
+          no_animation = props.no_animation;
 
       var _this$props = this.props,
           children = _this$props.children,
@@ -365,7 +366,7 @@ var AccordionHeader = function (_React$PureComponent) {
         'aria-expanded': this.context.expanded,
         role: 'button',
         tabIndex: '0',
-        className: (0, _classnames.default)('dnb-accordion__header', (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, this.context), (0, _SpacingHelper.createSpacingClasses)(rest), className, icon_position && "dnb-accordion__header__icon--".concat(icon_position), hover && hadClick && 'dnb-accordion--hover', !this.canClick() && 'dnb-accordion__header--prevent-click', description && 'dnb-accordion__header--description'),
+        className: (0, _classnames.default)('dnb-accordion__header', (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, this.context), (0, _SpacingHelper.createSpacingClasses)(rest), className, icon_position && "dnb-accordion__header__icon--".concat(icon_position), hover && hadClick && 'dnb-accordion--hover', !this.canClick() && 'dnb-accordion__header--prevent-click', description && 'dnb-accordion__header--description', no_animation && 'dnb-accordion__header--no-animation'),
         disabled: disabled
       }, rest);
 
@@ -419,6 +420,7 @@ _defineProperty(AccordionHeader, "defaultProps", {
   icon_size: 'medium',
   disabled: null,
   skeleton: null,
+  no_animation: null,
   className: null,
   children: null
 });
@@ -445,7 +447,8 @@ process.env.NODE_ENV !== "production" ? AccordionHeader.propTypes = _objectSprea
   icon_position: _propTypes.default.oneOf(['left', 'right']),
   icon_size: _propTypes.default.string,
   disabled: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  skeleton: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
+  skeleton: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  no_animation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
 }, _SpacingHelper.spacingPropTypes), {}, {
   className: _propTypes.default.string,
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func])

package/cjs/components/accordion/AccordionPropTypes.d.ts

@@ -21,6 +21,7 @@ export const accordionPropTypes: {
     prevent_rerender: PropTypes.Requireable<string | boolean>;
     prevent_rerender_conditional: PropTypes.Requireable<string | boolean>;
     remember_state: PropTypes.Requireable<string | boolean>;
+    contentRef: PropTypes.Requireable<object>;
     flush_remembered_state: PropTypes.Requireable<string | boolean>;
     single_container: PropTypes.Requireable<string | boolean>;
     variant: PropTypes.Requireable<string>;
@@ -50,6 +51,7 @@ export namespace accordionDefaultProps {
     export const prevent_rerender: any;
     export const prevent_rerender_conditional: any;
     export const remember_state: any;
+    export const contentRef: any;
     export const flush_remembered_state: any;
     export const single_container: any;
     export const variant: string;

package/cjs/components/accordion/AccordionPropTypes.js

@@ -40,6 +40,7 @@ var accordionPropTypes = _objectSpread(_objectSpread({
   prevent_rerender: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   prevent_rerender_conditional: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   remember_state: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  contentRef: _propTypes.default.object,
   flush_remembered_state: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   single_container: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   variant: _propTypes.default.oneOf(['plain', 'default', 'outlined', 'filled']),
@@ -79,6 +80,7 @@ var accordionDefaultProps = {
   prevent_rerender: null,
   prevent_rerender_conditional: null,
   remember_state: null,
+  contentRef: null,
   flush_remembered_state: null,
   single_container: null,
   variant: 'outlined',

package/cjs/components/accordion/AccordionProvider.d.ts

@@ -57,6 +57,7 @@ export interface AccordionGroupProps extends React.HTMLProps<HTMLElement> {
   prevent_rerender?: AccordionGroupPreventRerender;
   prevent_rerender_conditional?: AccordionGroupPreventRerenderConditional;
   remember_state?: AccordionGroupRememberState;
+  contentRef?: Object;
   flush_remembered_state?: AccordionGroupFlushRememberedState;
   single_container?: AccordionGroupSingleContainer;
   variant?: AccordionGroupVariant;

package/cjs/components/accordion/AccordionProvider.js

@@ -57,7 +57,7 @@ var _Context = _interopRequireDefault(require("../../shared/Context"));
 
 var _AccordionProviderContext = _interopRequireDefault(require("./AccordionProviderContext"));
 
-var _excluded = ["expanded", "expanded_id", "prerender", "prevent_rerender", "single_container", "allow_close_all", "remember_state", "flush_remembered_state", "disabled", "group", "onInit", "className", "class", "id", "children"];
+var _excluded = ["expanded", "expanded_id", "prerender", "prevent_rerender", "single_container", "contentRef", "allow_close_all", "remember_state", "flush_remembered_state", "disabled", "group", "onInit", "className", "class", "id", "children"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -130,6 +130,7 @@ var AccordionGroup = function (_React$PureComponent) {
           prerender = props.prerender,
           prevent_rerender = props.prevent_rerender,
           single_container = props.single_container,
+          contentRef = props.contentRef,
           allow_close_all = props.allow_close_all,
           remember_state = props.remember_state,
           flush_remembered_state = props.flush_remembered_state,

package/cjs/components/accordion/style/_accordion.scss

@@ -7,7 +7,7 @@
   // Props
   --accordion-border-width: 0.0625rem;
   --accordion-border-radius: 0.25rem;
-  --accordion-easing: #{$defaultEasing};
+  --accordion-easing: var(--easing-default);
 }
 
 .dnb-accordion {
@@ -114,44 +114,26 @@
     }
   }
 
-  &--no-animation &__header,
-  html[data-visual-test] &__header {
-    &__icon {
-      transition-duration: 1ms !important;
-    }
-  }
-
   &--expanded > &__header &__header__icon {
     transform: rotate(-180deg);
   }
 
   &__content {
     display: flex;
-    opacity: 1;
-    visibility: visible;
     width: 100%;
 
     will-change: height;
     transition: height 400ms var(--accordion-easing),
       opacity 600ms var(--accordion-easing);
 
-    &--hidden {
-      visibility: hidden;
-      height: 0;
-      opacity: 0;
-    }
-
-    &--is-animating {
-      overflow: hidden; // Is needed in order to have a smooth animation, hiding the content nicely.
-    }
-
     &__inner {
       width: 100%;
       margin-top: 1rem;
+    }
 
-      &--remove-content {
-        display: none;
-      }
+    // When "prerender" prop is true
+    &.dnb-height-animation--hidden &__inner {
+      display: none;
     }
   }
 
@@ -193,10 +175,6 @@
       transform: rotate(-90deg);
     }
   }
-  &--no-animation &__content,
-  html[data-visual-test] &__content {
-    transition-duration: 1ms !important;
-  }
 
   &-group {
     &--single-container & {
@@ -229,6 +207,12 @@
     }
   }
 
+  // stylelint-disable-next-line
+  & > &__header--no-animation &__header__icon,
+  html[data-visual-test] & > &__header--no-animation &__header__icon {
+    transition-duration: 1ms !important;
+  }
+
   // IE fix
   // @media screen and (-ms-high-contrast: none) {
   // }

package/cjs/components/accordion/style/dnb-accordion.css

@@ -167,7 +167,7 @@
 :root {
   --accordion-border-width: 0.0625rem;
   --accordion-border-radius: 0.25rem;
-  --accordion-easing: cubic-bezier(0.42, 0, 0, 1); }
+  --accordion-easing: var(--easing-default); }
 
 .dnb-accordion {
   position: relative;
@@ -281,10 +281,6 @@
       margin-top: 0.25rem; }
     .dnb-accordion__header__description + .dnb-accordion__header__title {
       margin-top: 0.25rem; }
-  .dnb-accordion--no-animation .dnb-accordion__header__icon,
-  html[data-visual-test] .dnb-accordion__header__icon {
-    -webkit-transition-duration: 1ms !important;
-            transition-duration: 1ms !important; }
   .dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__icon {
     -webkit-transform: rotate(-180deg);
             transform: rotate(-180deg); }
@@ -292,25 +288,17 @@
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    opacity: 1;
-    visibility: visible;
     width: 100%;
     will-change: height;
     -webkit-transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 600ms cubic-bezier(0.42, 0, 0, 1);
     transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 600ms cubic-bezier(0.42, 0, 0, 1);
     -webkit-transition: height 400ms var(--accordion-easing), opacity 600ms var(--accordion-easing);
     transition: height 400ms var(--accordion-easing), opacity 600ms var(--accordion-easing); }
-    .dnb-accordion__content--hidden {
-      visibility: hidden;
-      height: 0;
-      opacity: 0; }
-    .dnb-accordion__content--is-animating {
-      overflow: hidden; }
     .dnb-accordion__content__inner {
       width: 100%;
       margin-top: 1rem; }
-      .dnb-accordion__content__inner--remove-content {
-        display: none; }
+    .dnb-accordion__content.dnb-height-animation--hidden .dnb-accordion__content__inner {
+      display: none; }
   .dnb-accordion-group--single-container {
     -webkit-transition: min-height 1s cubic-bezier(0.42, 0, 0, 1);
     transition: min-height 1s cubic-bezier(0.42, 0, 0, 1);
@@ -334,10 +322,6 @@
     .dnb-accordion-group--single-container .dnb-accordion > .dnb-accordion__header .dnb-accordion__header__icon {
       -webkit-transform: rotate(-90deg);
               transform: rotate(-90deg); } }
-  .dnb-accordion--no-animation .dnb-accordion__content,
-  html[data-visual-test] .dnb-accordion__content {
-    -webkit-transition-duration: 1ms !important;
-            transition-duration: 1ms !important; }
   .dnb-accordion-group--single-container .dnb-accordion-group__children {
     max-width: 60rem; }
     @media screen and (min-width: 40em) {
@@ -356,3 +340,7 @@
           top: 0;
           right: 0;
           width: 60%; } }
+  .dnb-accordion > .dnb-accordion__header--no-animation .dnb-accordion__header__icon,
+  html[data-visual-test] .dnb-accordion > .dnb-accordion__header--no-animation .dnb-accordion__header__icon {
+    -webkit-transition-duration: 1ms !important;
+            transition-duration: 1ms !important; }

package/cjs/components/accordion/style/dnb-accordion.min.css

@@ -1 +1 @@
-.dnb-icon{color:inherit;display:inline-block;font-size:1rem;height:1em;line-height:1rem;vertical-align:middle;width:1em}.dnb-icon img,.dnb-icon svg{shape-rendering:geometricPrecision;height:inherit;vertical-align:top;width:inherit}.dnb-icon svg[width="100%"]{width:inherit}.dnb-icon svg[height="100%"]{height:inherit}.dnb-icon--inherit-color svg:not([fill]),.dnb-icon--inherit-color svg [fill]{fill:currentColor}.dnb-icon--inherit-color svg [stroke]{stroke:currentColor}.dnb-icon--small{font-size:.75rem}.dnb-icon--default{font-size:1rem}.dnb-icon--medium{font-size:1.5rem}.dnb-icon--large{font-size:2rem}.dnb-icon--x-large{font-size:2.5rem}.dnb-icon--xx-large{font-size:3rem}.dnb-icon--custom-size{height:auto;width:auto}.dnb-icon--auto{font-size:1em}.dnb-icon--auto>.dnb-icon--wrapper{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;justify-content:center}h1 .dnb-icon,h2 .dnb-icon,h3 .dnb-icon,h4 .dnb-icon,h5 .dnb-icon,h6 .dnb-icon{vertical-align:middle}.dnb-icon.dnb-skeleton{color:#ebebeb!important;color:var(--skeleton-color)!important}.dnb-icon.dnb-skeleton:after,.dnb-icon.dnb-skeleton:before{content:none!important}@media screen and (-ms-high-contrast:none){.dnb-icon{-webkit-box-flex:0;-ms-flex:none;flex:none}}.dnb-accordion{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-accordion *,.dnb-accordion :after,.dnb-accordion :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-accordion :after,.dnb-accordion :before{text-decoration:inherit;vertical-align:inherit}:root{--accordion-border-width:0.0625rem;--accordion-border-radius:0.25rem;--accordion-easing:cubic-bezier(0.42,0,0,1)}.dnb-accordion{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-size:1rem;font-size:var(--font-size-small);line-height:1.5rem;line-height:var(--line-height-basis);position:relative}.dnb-accordion,.dnb-accordion__header{display:-webkit-box;display:-ms-flexbox;display:flex}.dnb-accordion__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:.0625rem solid transparent;border:var(--accordion-border-width) solid transparent;border-radius:.25rem;border-radius:var(--accordion-border-radius);cursor:pointer;outline:none}.dnb-accordion__header:focus{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dnb-accordion__header *{pointer-events:none}.dnb-accordion__header--prevent-click{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dnb-accordion__header__wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:1.5rem 0 1.5rem 2rem;width:100%}.dnb-accordion__header--description .dnb-accordion__header__wrapper{margin:1rem 0 1rem 2rem}.dnb-accordion__header__icon+.dnb-accordion__header__wrapper{margin-left:0;margin-right:2rem}.dnb-accordion__header__container{margin:0 1rem}.dnb-accordion__header__icon{-ms-flex-item-align:start;align-self:flex-start;font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small);margin:1.5rem 1rem;-webkit-transition:-webkit-transform .4s cubic-bezier(.42,0,0,1);transition:-webkit-transform .4s cubic-bezier(.42,0,0,1);transition:transform .4s cubic-bezier(.42,0,0,1);transition:transform .4s cubic-bezier(.42,0,0,1),-webkit-transform .4s cubic-bezier(.42,0,0,1);-webkit-transition:-webkit-transform .4s var(--accordion-easing);transition:-webkit-transform .4s var(--accordion-easing);transition:transform .4s var(--accordion-easing);transition:transform .4s var(--accordion-easing),-webkit-transform .4s var(--accordion-easing)}.dnb-accordion__header--description .dnb-accordion__header__icon{margin-top:1rem}.dnb-accordion__header__icon--right{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.dnb-accordion__header__icon--right .dnb-accordion__header__icon{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.dnb-accordion__header__icon--right .dnb-accordion__header__container{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.dnb-accordion__header__icon--right .dnb-accordion__header__wrapper{-webkit-box-ordinal-group:3;-ms-flex-order:2;margin-left:1rem;margin-right:1rem;order:2}.dnb-accordion__header__icon--right .dnb-accordion__header__wrapper+.dnb-accordion__header__container{margin-right:0}.dnb-accordion__header__icon--right .dnb-accordion__header__container+.dnb-accordion__header__wrapper{margin-left:0}.dnb-accordion__header__title{font-size:1.125rem;font-size:var(--font-size-basis);line-height:1.5rem;line-height:var(--line-height-basis)}.dnb-accordion__header__description{font-size:1rem;font-size:var(--font-size-small);font-weight:400;font-weight:var(--font-weight-basis);line-height:1.25rem;line-height:var(--line-height-small)}.dnb-accordion__header__description+.dnb-accordion__header__title,.dnb-accordion__header__title+.dnb-accordion__header__description{margin-top:.25rem}.dnb-accordion--no-animation .dnb-accordion__header__icon,html[data-visual-test] .dnb-accordion__header__icon{-webkit-transition-duration:1ms!important;transition-duration:1ms!important}.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header__icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.dnb-accordion__content{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;-webkit-transition:height .4s cubic-bezier(.42,0,0,1),opacity .6s cubic-bezier(.42,0,0,1);transition:height .4s cubic-bezier(.42,0,0,1),opacity .6s cubic-bezier(.42,0,0,1);-webkit-transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);visibility:visible;width:100%;will-change:height}.dnb-accordion__content--hidden{height:0;opacity:0;visibility:hidden}.dnb-accordion__content--is-animating{overflow:hidden}.dnb-accordion__content__inner{margin-top:1rem;width:100%}.dnb-accordion__content__inner--remove-content{display:none}.dnb-accordion-group--single-container{-webkit-transition:min-height 1s cubic-bezier(.42,0,0,1);transition:min-height 1s cubic-bezier(.42,0,0,1);-webkit-transition:min-height 1s var(--accordion-easing);transition:min-height 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion{max-width:60rem;position:static}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion__header{width:40%}.dnb-accordion-group--single-container .dnb-accordion__content{margin-left:1rem;-webkit-transition:opacity 1s cubic-bezier(.42,0,0,1);transition:opacity 1s cubic-bezier(.42,0,0,1);-webkit-transition:opacity 1s var(--accordion-easing);transition:opacity 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion__content__inner{margin-top:0}.dnb-accordion-group--single-container .dnb-accordion>.dnb-accordion__header .dnb-accordion__header__icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}}.dnb-accordion--no-animation .dnb-accordion__content,html[data-visual-test] .dnb-accordion__content{-webkit-transition-duration:1ms!important;transition-duration:1ms!important}.dnb-accordion-group--single-container .dnb-accordion-group__children{max-width:60rem}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion-group__children{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative}.dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content{position:absolute;right:0;top:0;width:60%;z-index:10}}
+.dnb-icon{color:inherit;display:inline-block;font-size:1rem;height:1em;line-height:1rem;vertical-align:middle;width:1em}.dnb-icon img,.dnb-icon svg{shape-rendering:geometricPrecision;height:inherit;vertical-align:top;width:inherit}.dnb-icon svg[width="100%"]{width:inherit}.dnb-icon svg[height="100%"]{height:inherit}.dnb-icon--inherit-color svg:not([fill]),.dnb-icon--inherit-color svg [fill]{fill:currentColor}.dnb-icon--inherit-color svg [stroke]{stroke:currentColor}.dnb-icon--small{font-size:.75rem}.dnb-icon--default{font-size:1rem}.dnb-icon--medium{font-size:1.5rem}.dnb-icon--large{font-size:2rem}.dnb-icon--x-large{font-size:2.5rem}.dnb-icon--xx-large{font-size:3rem}.dnb-icon--custom-size{height:auto;width:auto}.dnb-icon--auto{font-size:1em}.dnb-icon--auto>.dnb-icon--wrapper{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;justify-content:center}h1 .dnb-icon,h2 .dnb-icon,h3 .dnb-icon,h4 .dnb-icon,h5 .dnb-icon,h6 .dnb-icon{vertical-align:middle}.dnb-icon.dnb-skeleton{color:#ebebeb!important;color:var(--skeleton-color)!important}.dnb-icon.dnb-skeleton:after,.dnb-icon.dnb-skeleton:before{content:none!important}@media screen and (-ms-high-contrast:none){.dnb-icon{-webkit-box-flex:0;-ms-flex:none;flex:none}}.dnb-accordion{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-accordion *,.dnb-accordion :after,.dnb-accordion :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-accordion :after,.dnb-accordion :before{text-decoration:inherit;vertical-align:inherit}:root{--accordion-border-width:0.0625rem;--accordion-border-radius:0.25rem;--accordion-easing:var(--easing-default)}.dnb-accordion{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-size:1rem;font-size:var(--font-size-small);line-height:1.5rem;line-height:var(--line-height-basis);position:relative}.dnb-accordion,.dnb-accordion__header{display:-webkit-box;display:-ms-flexbox;display:flex}.dnb-accordion__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:.0625rem solid transparent;border:var(--accordion-border-width) solid transparent;border-radius:.25rem;border-radius:var(--accordion-border-radius);cursor:pointer;outline:none}.dnb-accordion__header:focus{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dnb-accordion__header *{pointer-events:none}.dnb-accordion__header--prevent-click{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dnb-accordion__header__wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:1.5rem 0 1.5rem 2rem;width:100%}.dnb-accordion__header--description .dnb-accordion__header__wrapper{margin:1rem 0 1rem 2rem}.dnb-accordion__header__icon+.dnb-accordion__header__wrapper{margin-left:0;margin-right:2rem}.dnb-accordion__header__container{margin:0 1rem}.dnb-accordion__header__icon{-ms-flex-item-align:start;align-self:flex-start;font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small);margin:1.5rem 1rem;-webkit-transition:-webkit-transform .4s cubic-bezier(.42,0,0,1);transition:-webkit-transform .4s cubic-bezier(.42,0,0,1);transition:transform .4s cubic-bezier(.42,0,0,1);transition:transform .4s cubic-bezier(.42,0,0,1),-webkit-transform .4s cubic-bezier(.42,0,0,1);-webkit-transition:-webkit-transform .4s var(--accordion-easing);transition:-webkit-transform .4s var(--accordion-easing);transition:transform .4s var(--accordion-easing);transition:transform .4s var(--accordion-easing),-webkit-transform .4s var(--accordion-easing)}.dnb-accordion__header--description .dnb-accordion__header__icon{margin-top:1rem}.dnb-accordion__header__icon--right{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.dnb-accordion__header__icon--right .dnb-accordion__header__icon{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.dnb-accordion__header__icon--right .dnb-accordion__header__container{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.dnb-accordion__header__icon--right .dnb-accordion__header__wrapper{-webkit-box-ordinal-group:3;-ms-flex-order:2;margin-left:1rem;margin-right:1rem;order:2}.dnb-accordion__header__icon--right .dnb-accordion__header__wrapper+.dnb-accordion__header__container{margin-right:0}.dnb-accordion__header__icon--right .dnb-accordion__header__container+.dnb-accordion__header__wrapper{margin-left:0}.dnb-accordion__header__title{font-size:1.125rem;font-size:var(--font-size-basis);line-height:1.5rem;line-height:var(--line-height-basis)}.dnb-accordion__header__description{font-size:1rem;font-size:var(--font-size-small);font-weight:400;font-weight:var(--font-weight-basis);line-height:1.25rem;line-height:var(--line-height-small)}.dnb-accordion__header__description+.dnb-accordion__header__title,.dnb-accordion__header__title+.dnb-accordion__header__description{margin-top:.25rem}.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header__icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.dnb-accordion__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-transition:height .4s cubic-bezier(.42,0,0,1),opacity .6s cubic-bezier(.42,0,0,1);transition:height .4s cubic-bezier(.42,0,0,1),opacity .6s cubic-bezier(.42,0,0,1);-webkit-transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);width:100%;will-change:height}.dnb-accordion__content__inner{margin-top:1rem;width:100%}.dnb-accordion__content.dnb-height-animation--hidden .dnb-accordion__content__inner{display:none}.dnb-accordion-group--single-container{-webkit-transition:min-height 1s cubic-bezier(.42,0,0,1);transition:min-height 1s cubic-bezier(.42,0,0,1);-webkit-transition:min-height 1s var(--accordion-easing);transition:min-height 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion{max-width:60rem;position:static}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion__header{width:40%}.dnb-accordion-group--single-container .dnb-accordion__content{margin-left:1rem;-webkit-transition:opacity 1s cubic-bezier(.42,0,0,1);transition:opacity 1s cubic-bezier(.42,0,0,1);-webkit-transition:opacity 1s var(--accordion-easing);transition:opacity 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion__content__inner{margin-top:0}.dnb-accordion-group--single-container .dnb-accordion>.dnb-accordion__header .dnb-accordion__header__icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}}.dnb-accordion-group--single-container .dnb-accordion-group__children{max-width:60rem}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion-group__children{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative}.dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content{position:absolute;right:0;top:0;width:60%;z-index:10}}.dnb-accordion>.dnb-accordion__header--no-animation .dnb-accordion__header__icon,html[data-visual-test] .dnb-accordion>.dnb-accordion__header--no-animation .dnb-accordion__header__icon{-webkit-transition-duration:1ms!important;transition-duration:1ms!important}

package/cjs/components/autocomplete/Autocomplete.d.ts

@@ -527,7 +527,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   observer_element?: AutocompleteObserverElement;
 
   /**
-   * If set to true, the HTML body will get locked from scrolling. Defaults to `false`.
+   * If set to true, the HTML body will get locked from scrolling when the Dropdown is open. Defaults to `false`.
    */
   enable_body_lock?: boolean;
   class?: string;

package/cjs/components/autocomplete/Autocomplete.js

@@ -388,7 +388,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
       var args = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       var onStateComplete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
 
-      _this2.context.drawerList.setWrapperElement(_this2._refShell.current).setVisible(args, onStateComplete);
+      _this2.context.drawerList.setWrapperElement(_this2._ref.current).setVisible(args, onStateComplete);
     });
 
     _defineProperty(_assertThisInitialized(_this2), "setHidden", function () {
@@ -1719,7 +1719,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
         'aria-haspopup': 'listbox',
         'aria-expanded': isExpanded,
         'aria-label': !hidden ? submit_button_title : undefined,
-        tooltip: hidden ? submit_button_title : null,
+        tooltip: show_submit_button ? submit_button_title : null,
         className: opened ? 'dnb-button--active' : null
       };
 

package/cjs/components/autocomplete/style/_autocomplete.scss

@@ -25,7 +25,6 @@
   &__inner {
     display: inline-flex;
     flex-direction: column;
-    align-items: flex-start;
 
     margin: 0;
     padding: 0;

package/cjs/components/autocomplete/style/dnb-autocomplete.css

@@ -244,12 +244,16 @@
   opacity: 0;
   visibility: hidden;
   -webkit-transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1);
-  transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
+  transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+  -webkit-transition: opacity 200ms var(--easing-default);
+  transition: opacity 200ms var(--easing-default); }
   .dnb-tooltip--large {
     padding: 0.25rem 1rem; }
   .dnb-tooltip--animate_position {
     -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1);
-    transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
+    transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+    -webkit-transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default);
+    transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); }
   .dnb-tooltip--active {
     visibility: visible;
     /*
@@ -257,14 +261,20 @@
       also, use forwards because of the usage of visibility
     */
     -webkit-animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: show-tooltip 200ms var(--easing-default) forwards;
+            animation: show-tooltip 200ms var(--easing-default) forwards; }
   html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation {
     -webkit-animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: show-tooltip 1ms var(--easing-default) forwards;
+            animation: show-tooltip 1ms var(--easing-default) forwards; }
   .dnb-tooltip--hide {
     visibility: visible;
     -webkit-animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: hide-tooltip 200ms var(--easing-default) forwards;
+            animation: hide-tooltip 200ms var(--easing-default) forwards; }
   .dnb-tooltip--hide.dnb-tooltip--no-animation {
     -webkit-animation: hide-tooltip 1ms linear forwards;
             animation: hide-tooltip 1ms linear forwards; }
@@ -430,7 +440,9 @@
   display: flex;
   opacity: 1;
   -webkit-transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1);
-  transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1); }
+  transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1);
+  -webkit-transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
+  transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); }
   .dnb-form-status--hidden {
     will-change: height, opacity, margin, padding;
     width: 0;
@@ -1003,12 +1015,16 @@ button.dnb-button::-moz-focus-inner {
   opacity: 0;
   visibility: hidden;
   -webkit-transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1);
-  transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
+  transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+  -webkit-transition: opacity 200ms var(--easing-default);
+  transition: opacity 200ms var(--easing-default); }
   .dnb-tooltip--large {
     padding: 0.25rem 1rem; }
   .dnb-tooltip--animate_position {
     -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1);
-    transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
+    transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+    -webkit-transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default);
+    transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); }
   .dnb-tooltip--active {
     visibility: visible;
     /*
@@ -1016,14 +1032,20 @@ button.dnb-button::-moz-focus-inner {
       also, use forwards because of the usage of visibility
     */
     -webkit-animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: show-tooltip 200ms var(--easing-default) forwards;
+            animation: show-tooltip 200ms var(--easing-default) forwards; }
   html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation {
     -webkit-animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: show-tooltip 1ms var(--easing-default) forwards;
+            animation: show-tooltip 1ms var(--easing-default) forwards; }
   .dnb-tooltip--hide {
     visibility: visible;
     -webkit-animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: hide-tooltip 200ms var(--easing-default) forwards;
+            animation: hide-tooltip 200ms var(--easing-default) forwards; }
   .dnb-tooltip--hide.dnb-tooltip--no-animation {
     -webkit-animation: hide-tooltip 1ms linear forwards;
             animation: hide-tooltip 1ms linear forwards; }
@@ -1288,7 +1310,9 @@ legend.dnb-form-label {
   display: flex;
   opacity: 1;
   -webkit-transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1);
-  transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1); }
+  transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1);
+  -webkit-transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
+  transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); }
   .dnb-form-status--hidden {
     will-change: height, opacity, margin, padding;
     width: 0;
@@ -2148,12 +2172,16 @@ legend.dnb-form-label {
   opacity: 0;
   visibility: hidden;
   -webkit-transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1);
-  transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
+  transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+  -webkit-transition: opacity 200ms var(--easing-default);
+  transition: opacity 200ms var(--easing-default); }
   .dnb-tooltip--large {
     padding: 0.25rem 1rem; }
   .dnb-tooltip--animate_position {
     -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1);
-    transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
+    transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+    -webkit-transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default);
+    transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); }
   .dnb-tooltip--active {
     visibility: visible;
     /*
@@ -2161,14 +2189,20 @@ legend.dnb-form-label {
       also, use forwards because of the usage of visibility
     */
     -webkit-animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: show-tooltip 200ms var(--easing-default) forwards;
+            animation: show-tooltip 200ms var(--easing-default) forwards; }
   html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation {
     -webkit-animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: show-tooltip 1ms var(--easing-default) forwards;
+            animation: show-tooltip 1ms var(--easing-default) forwards; }
   .dnb-tooltip--hide {
     visibility: visible;
     -webkit-animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: hide-tooltip 200ms var(--easing-default) forwards;
+            animation: hide-tooltip 200ms var(--easing-default) forwards; }
   .dnb-tooltip--hide.dnb-tooltip--no-animation {
     -webkit-animation: hide-tooltip 1ms linear forwards;
             animation: hide-tooltip 1ms linear forwards; }
@@ -2321,7 +2355,9 @@ legend.dnb-form-label {
   display: flex;
   opacity: 1;
   -webkit-transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1);
-  transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1); }
+  transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1);
+  -webkit-transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
+  transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); }
   .dnb-form-status--hidden {
     will-change: height, opacity, margin, padding;
     width: 0;
@@ -2903,7 +2939,9 @@ legend.dnb-form-label {
   display: flex;
   opacity: 1;
   -webkit-transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1);
-  transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1); }
+  transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1);
+  -webkit-transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
+  transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); }
   .dnb-form-status--hidden {
     will-change: height, opacity, margin, padding;
     width: 0;
@@ -3062,9 +3100,6 @@ legend.dnb-form-label {
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
-    -webkit-box-align: start;
-        -ms-flex-align: start;
-            align-items: flex-start;
     margin: 0;
     padding: 0;
     width: auto;
@@ -3732,9 +3767,6 @@ legend.dnb-form-label {
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
-    -webkit-box-align: start;
-        -ms-flex-align: start;
-            align-items: flex-start;
     margin: 0;
     padding: 0;
     width: auto;