@dnb/eufemia 9.32.0 → 9.33.0

package/components/accordion/AccordionContent.js

@@ -1,227 +1,164 @@
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.reflect.construct.js";
 import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.object.get-own-property-descriptor.js";
 import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.object.get-own-property-descriptors.js";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["className", "instance"];
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children", "instance"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 import React from 'react';
 import PropTypes from 'prop-types';
-import { isTrue, validateDOMAttributes, processChildren, getPreviousSibling } from '../../shared/component-helper';
-import AnimateHeight from '../../shared/AnimateHeight';
 import classnames from 'classnames';
+import { warn, isTrue, validateDOMAttributes, processChildren, getPreviousSibling } from '../../shared/component-helper';
+import { useMediaQuery } from '../../shared';
 import AccordionContext from './AccordionContext';
 import { spacingPropTypes, createSpacingClasses } from '../space/SpacingHelper';
+import HeightAnimation from '../height-animation/HeightAnimation';
+export default function AccordionContent(props) {
+  var context = React.useContext(AccordionContext);
+  var id = context.id,
+      expanded = context.expanded,
+      prerender = context.prerender,
+      prevent_rerender = context.prevent_rerender,
+      single_container = context.single_container,
+      disabled = context.disabled,
+      no_animation = context.no_animation,
+      contentRef = context.contentRef;
+
+  var className = props.className,
+      children = props.children,
+      instance = props.instance,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var elementRef = React.useRef(null);
+  var cacheRef = React.useRef(null);
+
+  if (contentRef) {
+    elementRef = contentRef;
+  }
 
-var AccordionContent = function (_React$PureComponent) {
-  _inherits(AccordionContent, _React$PureComponent);
-
-  var _super = _createSuper(AccordionContent);
-
-  function AccordionContent(props, context) {
-    var _this;
-
-    _classCallCheck(this, AccordionContent);
-
-    _this = _super.call(this, props);
-    _this._ref = React.createRef();
-    _this.state = {
-      isInitial: !context.expanded,
-      isAnimating: false,
-      keepContentInDom: null
-    };
-    _this.anim = new AnimateHeight();
-
-    _this.anim.onStart(function () {
-      _this.setState({
-        isAnimating: true
-      });
-    });
-
-    _this.anim.onEnd(function () {
-      _this.setState({
-        isAnimating: false
-      });
-
-      _this.setState({
-        keepContentInDom: _this.context.expanded
-      });
-    });
+  var setContainerHeight = function setContainerHeight() {
+    var single_container = context.single_container;
 
-    if (props.instance && Object.prototype.hasOwnProperty.call(props.instance, 'current')) {
-      props.instance.current = _assertThisInitialized(_this);
-    }
+    if (single_container) {
+      var contentElem = elementRef.current;
 
-    return _this;
-  }
+      if (contentElem) {
+        try {
+          contentElem.style.height = '';
+          var containerElement = getPreviousSibling('dnb-accordion-group--single-container', contentElem);
 
-  _createClass(AccordionContent, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.anim.setElement(this._ref.current, getPreviousSibling('dnb-accordion-group--single-container', this._ref.current));
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.anim.remove();
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
-
-      var _this$context = this.context,
-          expanded = _this$context.expanded,
-          single_container = _this$context.single_container;
-
-      if (expanded !== this.state._expanded) {
-        var isInitial = !expanded && this.state.isInitial;
-        this.setState({
-          _expanded: expanded,
-          isInitial: false,
-          keepContentInDom: true
-        }, function () {
-          if (expanded) {
-            _this2.anim.open({
-              animate: !isInitial
-            });
-          } else {
-            _this2.anim.close({
-              animate: !isInitial
-            });
+          if (no_animation) {
+            containerElement.style.transitionDuration = '1ms';
           }
-        });
-      }
 
-      if (isTrue(single_container) && AccordionContent.getContent(prevProps) !== AccordionContent.getContent(this.props)) {
-        this.anim.setContainerHeight();
+          var minHeight = (contentElem.offsetHeight + contentElem.offsetTop) / 16;
+          containerElement.style.minHeight = "".concat(minHeight, "rem");
+        } catch (e) {
+          warn(e);
+        }
       }
     }
-  }, {
-    key: "setContainerHeight",
-    value: function setContainerHeight() {
-      var _this$anim;
-
-      (_this$anim = this.anim) === null || _this$anim === void 0 ? void 0 : _this$anim.setContainerHeight();
+  };
+
+  var renderContent = function renderContent() {
+    var children = processChildren(props);
+    var expanded = context.expanded,
+        prerender = context.prerender,
+        prevent_rerender = context.prevent_rerender,
+        prevent_rerender_conditional = context.prevent_rerender_conditional;
+    var content = children;
+
+    if (typeof content === 'string') {
+      content = React.createElement("p", {
+        className: "dnb-p"
+      }, content);
     }
-  }, {
-    key: "renderContent",
-    value: function renderContent() {
-      var children = AccordionContent.getContent(this.props);
-      var _this$context2 = this.context,
-          expanded = _this$context2.expanded,
-          prerender = _this$context2.prerender,
-          prevent_rerender = _this$context2.prevent_rerender,
-          prevent_rerender_conditional = _this$context2.prevent_rerender_conditional;
-      var content = children;
-
-      if (typeof content === 'string') {
-        content = React.createElement("p", {
-          className: "dnb-p"
-        }, content);
-      }
 
-      content = expanded || prerender || this.state.keepContentInDom || this.state.isAnimating ? children : null;
-
-      if (isTrue(prevent_rerender)) {
-        if (isTrue(prevent_rerender_conditional) && this._cache !== content) {
-          this._cache = content;
-        }
-
-        if (this._cache) {
-          content = this._cache;
-        } else {
-          this._cache = content;
-        }
+    if (isTrue(prevent_rerender)) {
+      if (!(expanded || prerender)) {
+        content = null;
       }
 
-      return content;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          className = _this$props.className,
-          instance = _this$props.instance,
-          rest = _objectWithoutProperties(_this$props, _excluded);
-
-      var _this$state = this.state,
-          keepContentInDom = _this$state.keepContentInDom,
-          isAnimating = _this$state.isAnimating;
-      var _this$context3 = this.context,
-          id = _this$context3.id,
-          expanded = _this$context3.expanded,
-          disabled = _this$context3.disabled;
-      var content = this.renderContent();
-
-      var wrapperParams = _objectSpread({
-        className: classnames('dnb-accordion__content', className, !expanded && !keepContentInDom && 'dnb-accordion__content--hidden', isAnimating && 'dnb-accordion__content--is-animating')
-      }, rest);
-
-      var innerParams = {
-        id: "".concat(id, "-content"),
-        role: 'region',
-        'aria-labelledby': "".concat(id, "-header"),
-        className: classnames('dnb-accordion__content__inner', createSpacingClasses(rest), !expanded && !keepContentInDom && 'dnb-accordion__content__inner--remove-content')
-      };
-
-      if (expanded) {
-        innerParams['aria-expanded'] = true;
+      if (isTrue(prevent_rerender_conditional) && cacheRef.current !== content) {
+        cacheRef.current = content;
       }
 
-      if (!expanded || disabled) {
-        innerParams.disabled = true;
-        innerParams['aria-hidden'] = true;
+      if (cacheRef.current) {
+        content = cacheRef.current;
+      } else {
+        cacheRef.current = content;
       }
-
-      validateDOMAttributes(this.props, wrapperParams);
-      validateDOMAttributes(null, innerParams);
-      return React.createElement("div", _extends({}, wrapperParams, {
-        ref: this._ref
-      }), React.createElement("div", innerParams, content));
-    }
-  }], [{
-    key: "getContent",
-    value: function getContent(props) {
-      return processChildren(props);
     }
-  }]);
 
-  return AccordionContent;
-}(React.PureComponent);
+    return content;
+  };
 
-_defineProperty(AccordionContent, "contextType", AccordionContext);
+  React.useEffect(function () {
+    if (expanded && isTrue(single_container)) {
+      setContainerHeight();
+    }
+  }, [children, expanded, single_container]);
+  React.useState(function () {
+    if (instance && Object.prototype.hasOwnProperty.call(instance, 'current')) {
+      instance.current = {
+        setContainerHeight: setContainerHeight
+      };
+    }
+  });
+  var isSmallScreen = useMediaQuery({
+    when: {
+      max: 'small'
+    }
+  });
+  var content = renderContent();
+
+  var wrapperParams = _objectSpread({
+    className: classnames('dnb-accordion__content', className)
+  }, rest);
+
+  var keepInDOM = prerender || prevent_rerender;
+  var innerParams = {
+    id: "".concat(id, "-content"),
+    'aria-labelledby': "".concat(id, "-header"),
+    className: classnames('dnb-accordion__content__inner', createSpacingClasses(rest))
+  };
+
+  if (expanded) {
+    innerParams['aria-expanded'] = true;
+  }
 
-_defineProperty(AccordionContent, "defaultProps", {
-  instance: null,
-  className: null,
-  children: null
-});
+  if (!expanded || disabled) {
+    innerParams.disabled = true;
+    innerParams['aria-hidden'] = true;
+  }
 
-export { AccordionContent as default };
+  validateDOMAttributes(props, wrapperParams);
+  validateDOMAttributes(null, innerParams);
+  var animate = !no_animation && (single_container ? isSmallScreen : true);
+  return React.createElement(HeightAnimation, _extends({}, wrapperParams, {
+    open: expanded,
+    animate: animate,
+    keepInDOM: keepInDOM,
+    innerRef: elementRef
+  }), React.createElement("section", innerParams, content));
+}
 process.env.NODE_ENV !== "production" ? AccordionContent.propTypes = _objectSpread(_objectSpread({
   instance: PropTypes.object
 }, spacingPropTypes), {}, {
   className: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
-}) : void 0;
+}) : void 0;
+AccordionContent.defaultProps = {
+  instance: null,
+  className: null,
+  children: null
+};

package/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/components/accordion/AccordionHeader.js

@@ -204,7 +204,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,
@@ -303,7 +304,7 @@ var AccordionHeader = function (_React$PureComponent) {
         'aria-expanded': this.context.expanded,
         role: 'button',
         tabIndex: '0',
-        className: classnames('dnb-accordion__header', createSkeletonClass('font', skeleton, this.context), 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: classnames('dnb-accordion__header', createSkeletonClass('font', skeleton, this.context), 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);
 
@@ -355,6 +356,7 @@ _defineProperty(AccordionHeader, "defaultProps", {
   icon_size: 'medium',
   disabled: null,
   skeleton: null,
+  no_animation: null,
   className: null,
   children: null
 });
@@ -382,7 +384,8 @@ process.env.NODE_ENV !== "production" ? AccordionHeader.propTypes = _objectSprea
   icon_position: PropTypes.oneOf(['left', 'right']),
   icon_size: PropTypes.string,
   disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+  skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 }, spacingPropTypes), {}, {
   className: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func])

package/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/components/accordion/AccordionPropTypes.js

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

package/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/components/accordion/AccordionProvider.js

@@ -15,7 +15,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -72,6 +72,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/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/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/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/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;