@dnb/eufemia 9.16.3 → 9.18.0

package/cjs/components/modal/ModalContent.js

@@ -18,38 +18,31 @@ require("core-js/modules/es.object.get-own-property-descriptors.js");
 
 require("core-js/modules/es.object.assign.js");
 
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
 require("core-js/modules/es.array.iterator.js");
 
 require("core-js/modules/es.string.iterator.js");
 
-require("core-js/modules/es.weak-map.js");
-
 require("core-js/modules/web.dom-collections.iterator.js");
 
-require("core-js/modules/es.symbol.description.js");
-
-require("core-js/modules/es.symbol.iterator.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-exports.getListOfModalRoots = getListOfModalRoots;
+
+require("core-js/modules/es.array.filter.js");
 
 require("core-js/modules/es.object.to-string.js");
 
 require("core-js/modules/web.dom-collections.for-each.js");
 
-require("core-js/modules/es.regexp.exec.js");
-
-require("core-js/modules/es.array.filter.js");
-
 require("core-js/modules/es.parse-float.js");
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _keycode = _interopRequireDefault(require("keycode"));
@@ -62,16 +55,16 @@ var _ScrollView = _interopRequireDefault(require("../../fragments/scroll-view/Sc
 
 var _ModalContext = _interopRequireDefault(require("./ModalContext"));
 
-var _ModalHeader = _interopRequireWildcard(require("./ModalHeader"));
+var _ModalHeader = _interopRequireDefault(require("./components/ModalHeader"));
 
-var _helpers = require("../../shared/helpers");
+var _ModalHeaderBar = _interopRequireDefault(require("./components/ModalHeaderBar"));
 
-var _excluded = ["triggeredBy"],
-    _excluded2 = ["mode", "hide", "title", "labelled_by", "header_content", "modal_content", "bar_content", "id", "close_title", "dialog_title", "hide_close_button", "close_button_attributes", "spacing", "prevent_close", "open_delay", "prevent_core_style", "animation_duration", "no_animation", "no_animation_on_mobile", "min_width", "max_width", "fullscreen", "align_content", "container_placement", "closeModal", "className", "class", "content_class", "overlay_class", "content_id", "toggleOpenClose", "children"];
+var _helpers = require("../../shared/helpers");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _helpers2 = require("./helpers");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _excluded = ["triggeredBy"],
+    _excluded2 = ["mode", "hide", "title", "labelled_by", "header_content", "modal_content", "bar_content", "id", "close_title", "dialog_title", "hide_close_button", "close_button_attributes", "spacing", "prevent_core_style", "animation_duration", "no_animation", "no_animation_on_mobile", "min_width", "max_width", "fullscreen", "align_content", "container_placement", "closeModal", "className", "class", "content_class", "overlay_class", "content_id", "children"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -121,10 +114,53 @@ var ModalContent = function (_React$PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "state", {
       triggeredBy: null,
-      triggeredByEvent: null
+      triggeredByEvent: null,
+      color: null
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_contentRef", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_id", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_lockTimeout", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_focusTimeout", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_androidFocusTimeout", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_ii", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_iiLocal", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "lockBody", function () {
+      var modalRoots = (0, _helpers2.getListOfModalRoots)();
+      var firstLevel = modalRoots[0];
+
+      if (firstLevel === _assertThisInitialized(_this)) {
+        _this._ii = new _componentHelper.InteractionInvalidation();
+
+        _this._ii.setBypassSelector(['.dnb-modal__content *', "#dnb-modal-".concat(_this.props.root_id || 'root', " *")].filter(Boolean));
+
+        _this._ii.activate();
+      } else {
+        modalRoots.forEach(function (modal) {
+          if (modal !== _assertThisInitialized(_this) && typeof modal._iiLocal === 'undefined' && typeof modal._contentRef !== 'undefined') {
+            modal._iiLocal = new _componentHelper.InteractionInvalidation();
+
+            modal._iiLocal.activate(modal._contentRef.current);
+          }
+        });
+      }
+
+      if (typeof document !== 'undefined') {
+        document.addEventListener('keydown', _this.onKeyDownHandler);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "_androidFocusHelper", function () {
+      var _this$props$animation = _this.props.animation_duration,
+          animation_duration = _this$props$animation === void 0 ? null : _this$props$animation;
+      var timeoutDuration = typeof animation_duration === 'string' ? parseFloat(animation_duration) : animation_duration;
       clearTimeout(_this._androidFocusTimeout);
       _this._androidFocusTimeout = setTimeout(function () {
         try {
@@ -134,38 +170,38 @@ var ModalContent = function (_React$PureComponent) {
             document.activeElement.scrollIntoView();
           }
         } catch (e) {}
-      }, 100);
+      }, timeoutDuration / 2);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "preventClick", function (e) {
-      if (e) {
-        e.stopPropagation();
+    _defineProperty(_assertThisInitialized(_this), "preventClick", function (event) {
+      if (event) {
+        event.stopPropagation();
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onCloseClickHandler", function (e) {
-      _this.closeModal(e, {
+    _defineProperty(_assertThisInitialized(_this), "onCloseClickHandler", function (event) {
+      _this.closeModalContent(event, {
         triggeredBy: 'button'
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onContentClickHandler", function (e) {
-      _this.closeModal(e, {
+    _defineProperty(_assertThisInitialized(_this), "onContentClickHandler", function (event) {
+      _this.closeModalContent(event, {
         triggeredBy: 'overlay',
         ifIsLatest: false
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onKeyDownHandler", function (e) {
-      switch ((0, _keycode.default)(e)) {
+    _defineProperty(_assertThisInitialized(_this), "onKeyDownHandler", function (event) {
+      switch ((0, _keycode.default)(event)) {
         case 'esc':
           {
-            var mostCurrent = getListOfModalRoots(-1);
+            var mostCurrent = (0, _helpers2.getModalRoot)(-1);
 
             if (mostCurrent === _assertThisInitialized(_this)) {
-              e.preventDefault();
+              event.preventDefault();
 
-              _this.closeModal(e, {
+              _this.closeModalContent(event, {
                 triggeredBy: 'keyboard'
               });
             }
@@ -176,6 +212,8 @@ var ModalContent = function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "setBackgroundColor", function (color) {
+      document.documentElement.style.setProperty('--modal-background-color', color);
+
       _this.setState({
         color: color
       });
@@ -183,57 +221,52 @@ var ModalContent = function (_React$PureComponent) {
 
     _this._contentRef = _react.default.createRef();
     _this._id = props.id;
-    _this._ii = new _componentHelper.InteractionInvalidation();
-
-    _this._ii.setBypassSelector(['.dnb-modal__content', "#dnb-modal-".concat(props.root_id || 'root')]);
-
     return _this;
   }
 
   _createClass(ModalContent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this2 = this;
-
-      this.addToIndex();
-      var modalRoots = getListOfModalRoots();
-      var firstLevel = modalRoots[0];
+      var _this$props = this.props,
+          _this$props$id = _this$props.id,
+          id = _this$props$id === void 0 ? null : _this$props$id,
+          _this$props$no_animat = _this$props.no_animation,
+          no_animation = _this$props$no_animat === void 0 ? false : _this$props$no_animat,
+          _this$props$animation2 = _this$props.animation_duration,
+          animation_duration = _this$props$animation2 === void 0 ? null : _this$props$animation2;
+      var timeoutDuration = typeof animation_duration === 'string' ? parseFloat(animation_duration) : animation_duration;
+      (0, _helpers2.addToIndex)(this);
       this.removeScrollPossibility();
-
-      if (firstLevel === this) {
-        this._ii.activate();
-      } else {
-        modalRoots.forEach(function (modal) {
-          if (modal !== _this2 && typeof modal._iiLocal === 'undefined' && typeof modal._contentRef !== 'undefined') {
-            modal._iiLocal = new _componentHelper.InteractionInvalidation();
-
-            modal._iiLocal.activate(modal._contentRef.current);
-          }
-        });
-      }
-
-      this.setAndroidFocusHelper();
       this.setFocus();
-      var id = this.props.id;
+      this.setAndroidFocusHelper();
       (0, _componentHelper.dispatchCustomElementEvent)(this, 'on_open', {
         id: id
       });
 
-      if (typeof document !== 'undefined') {
-        document.addEventListener('keydown', this.onKeyDownHandler);
+      if ((0, _componentHelper.isTrue)(no_animation) || process.env.NODE_ENV === 'test') {
+        this.lockBody();
+      } else {
+        this._lockTimeout = setTimeout(this.lockBody, timeoutDuration * 1.2);
       }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       clearTimeout(this._focusTimeout);
-      var modalRoots = getListOfModalRoots();
+      clearTimeout(this._lockTimeout);
+      this.removeLocks();
+    }
+  }, {
+    key: "removeLocks",
+    value: function removeLocks() {
+      var modalRoots = (0, _helpers2.getListOfModalRoots)();
       var firstLevel = modalRoots[0];
-      this.removeFromIndex();
+      (0, _helpers2.removeFromIndex)(this);
 
       if (firstLevel === this) {
-        this._ii.revert();
+        var _this$_ii;
 
+        (_this$_ii = this._ii) === null || _this$_ii === void 0 ? void 0 : _this$_ii.revert();
         this.revertScrollPossibility();
       } else {
         try {
@@ -267,7 +300,7 @@ var ModalContent = function (_React$PureComponent) {
   }, {
     key: "setAndroidFocusHelper",
     value: function setAndroidFocusHelper() {
-      if (typeof window !== 'undefined' && typeof navigator !== 'undefined' && /Android/.test(navigator.appVersion)) {
+      if (typeof window !== 'undefined' && (0, _helpers.isAndroid)()) {
         window.addEventListener('resize', this._androidFocusHelper);
       }
     }
@@ -277,52 +310,18 @@ var ModalContent = function (_React$PureComponent) {
       window.removeEventListener('resize', this._androidFocusHelper);
       clearTimeout(this._androidFocusTimeout);
     }
-  }, {
-    key: "addToIndex",
-    value: function addToIndex() {
-      if (typeof window !== 'undefined') {
-        try {
-          if (!Array.isArray(window.__modalStack)) {
-            window.__modalStack = [];
-          }
-
-          window.__modalStack.push(this);
-        } catch (e) {
-          (0, _componentHelper.warn)(e);
-        }
-      }
-    }
-  }, {
-    key: "removeFromIndex",
-    value: function removeFromIndex() {
-      var _this3 = this;
-
-      if (typeof window !== 'undefined') {
-        try {
-          if (!Array.isArray(window.__modalStack)) {
-            window.__modalStack = [];
-          }
-
-          window.__modalStack = window.__modalStack.filter(function (cur) {
-            return cur !== _this3;
-          });
-
-          if (!window.__modalStack.length) {
-            delete window.__modalStack;
-          }
-        } catch (e) {
-          (0, _componentHelper.warn)(e);
-        }
-      }
-    }
   }, {
     key: "setFocus",
     value: function setFocus() {
-      var _this$props = this.props,
-          focus_selector = _this$props.focus_selector,
-          no_animation = _this$props.no_animation,
-          animation_duration = _this$props.animation_duration;
+      var _this$props2 = this.props,
+          _this$props2$focus_se = _this$props2.focus_selector,
+          focus_selector = _this$props2$focus_se === void 0 ? null : _this$props2$focus_se,
+          _this$props2$no_anima = _this$props2.no_animation,
+          no_animation = _this$props2$no_anima === void 0 ? null : _this$props2$no_anima,
+          _this$props2$animatio = _this$props2.animation_duration,
+          animation_duration = _this$props2$animatio === void 0 ? null : _this$props2$animatio;
       var elem = this._contentRef.current;
+      var timeoutDuration = typeof animation_duration === 'string' ? parseFloat(animation_duration) : animation_duration;
 
       if (elem) {
         clearTimeout(this._focusTimeout);
@@ -343,7 +342,7 @@ var ModalContent = function (_React$PureComponent) {
           } catch (e) {
             (0, _componentHelper.warn)(e);
           }
-        }, (0, _componentHelper.isTrue)(no_animation) ? 0 : parseFloat(animation_duration) || 0);
+        }, (0, _componentHelper.isTrue)(no_animation) ? 0 : timeoutDuration || 0);
       }
     }
   }, {
@@ -360,10 +359,10 @@ var ModalContent = function (_React$PureComponent) {
       (0, _bodyScrollLock.clearAllBodyScrollLocks)();
     }
   }, {
-    key: "closeModal",
-    value: function closeModal(event, _ref) {
+    key: "closeModalContent",
+    value: function closeModalContent(event, _ref) {
       var _event$persist,
-          _this4 = this;
+          _this2 = this;
 
       var triggeredBy = _ref.triggeredBy,
           params = _objectWithoutProperties(_ref, _excluded);
@@ -373,7 +372,7 @@ var ModalContent = function (_React$PureComponent) {
         triggeredBy: triggeredBy,
         triggeredByEvent: event
       }, function () {
-        _this4.props.closeModal(event, _objectSpread({
+        _this2.props.closeModal(event, _objectSpread({
           triggeredBy: triggeredBy
         }, params));
       });
@@ -381,61 +380,65 @@ var ModalContent = function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-          mode = _this$props2.mode,
-          hide = _this$props2.hide,
-          title = _this$props2.title,
-          labelled_by = _this$props2.labelled_by,
-          header_content = _this$props2.header_content,
-          modal_content = _this$props2.modal_content,
-          bar_content = _this$props2.bar_content,
-          _id = _this$props2.id,
-          close_title = _this$props2.close_title,
-          dialog_title = _this$props2.dialog_title,
-          hide_close_button = _this$props2.hide_close_button,
-          close_button_attributes = _this$props2.close_button_attributes,
-          spacing = _this$props2.spacing,
-          prevent_close = _this$props2.prevent_close,
-          open_delay = _this$props2.open_delay,
-          prevent_core_style = _this$props2.prevent_core_style,
-          animation_duration = _this$props2.animation_duration,
-          no_animation = _this$props2.no_animation,
-          no_animation_on_mobile = _this$props2.no_animation_on_mobile,
-          min_width = _this$props2.min_width,
-          max_width = _this$props2.max_width,
-          fullscreen = _this$props2.fullscreen,
-          align_content = _this$props2.align_content,
-          container_placement = _this$props2.container_placement,
-          closeModal = _this$props2.closeModal,
-          className = _this$props2.className,
-          _className = _this$props2.class,
-          content_class = _this$props2.content_class,
-          overlay_class = _this$props2.overlay_class,
-          content_id = _this$props2.content_id,
-          toggleOpenClose = _this$props2.toggleOpenClose,
-          children = _this$props2.children,
-          rest = _objectWithoutProperties(_this$props2, _excluded2);
-
-      var contentId = content_id || (0, _componentHelper.makeUniqueId)();
-      var style = this.state.color ? {
-        '--modal-background-color': "var(--color-".concat(this.state.color, ")")
-      } : null;
+      var _this$props3 = this.props,
+          _this$props3$mode = _this$props3.mode,
+          mode = _this$props3$mode === void 0 ? 'modal' : _this$props3$mode,
+          hide = _this$props3.hide,
+          title = _this$props3.title,
+          labelled_by = _this$props3.labelled_by,
+          header_content = _this$props3.header_content,
+          modal_content = _this$props3.modal_content,
+          bar_content = _this$props3.bar_content,
+          _id = _this$props3.id,
+          _this$props3$close_ti = _this$props3.close_title,
+          close_title = _this$props3$close_ti === void 0 ? 'Lukk' : _this$props3$close_ti,
+          _this$props3$dialog_t = _this$props3.dialog_title,
+          dialog_title = _this$props3$dialog_t === void 0 ? 'Vindu' : _this$props3$dialog_t,
+          _this$props3$hide_clo = _this$props3.hide_close_button,
+          hide_close_button = _this$props3$hide_clo === void 0 ? false : _this$props3$hide_clo,
+          close_button_attributes = _this$props3.close_button_attributes,
+          _this$props3$spacing = _this$props3.spacing,
+          spacing = _this$props3$spacing === void 0 ? true : _this$props3$spacing,
+          _this$props3$prevent_ = _this$props3.prevent_core_style,
+          prevent_core_style = _this$props3$prevent_ === void 0 ? false : _this$props3$prevent_,
+          animation_duration = _this$props3.animation_duration,
+          _this$props3$no_anima = _this$props3.no_animation,
+          no_animation = _this$props3$no_anima === void 0 ? false : _this$props3$no_anima,
+          _this$props3$no_anima2 = _this$props3.no_animation_on_mobile,
+          no_animation_on_mobile = _this$props3$no_anima2 === void 0 ? false : _this$props3$no_anima2,
+          min_width = _this$props3.min_width,
+          max_width = _this$props3.max_width,
+          _this$props3$fullscre = _this$props3.fullscreen,
+          fullscreen = _this$props3$fullscre === void 0 ? 'auto' : _this$props3$fullscre,
+          align_content = _this$props3.align_content,
+          container_placement = _this$props3.container_placement,
+          closeModal = _this$props3.closeModal,
+          className = _this$props3.className,
+          _className = _this$props3.class,
+          content_class = _this$props3.content_class,
+          overlay_class = _this$props3.overlay_class,
+          content_id = _this$props3.content_id,
+          children = _this$props3.children,
+          rest = _objectWithoutProperties(_this$props3, _excluded2);
+
+      var color = this.state.color;
+      var contentId = content_id || (0, _componentHelper.makeUniqueId)('modal-');
       var minWidth = min_width;
       var maxWidth = max_width;
 
-      if (minWidth && !maxWidth && parseFloat(minWidth) > 0) {
+      if (minWidth && !maxWidth && parseFloat(String(minWidth)) > 0) {
         maxWidth = 0;
-      } else if (maxWidth && !minWidth && parseFloat(maxWidth) > 0) {
+      } else if (maxWidth && !minWidth && parseFloat(String(maxWidth)) > 0) {
         minWidth = 0;
       }
 
       var useDialogRole = !(_helpers.IS_MAC || _helpers.IS_SAFARI || _helpers.IS_IOS);
       var contentParams = {
         role: useDialogRole ? 'dialog' : 'region',
-        'aria-modal': useDialogRole ? 'true' : undefined,
+        'aria-modal': useDialogRole ? true : undefined,
         'aria-labelledby': (0, _componentHelper.combineLabelledBy)(this.props, title ? contentId + '-title' : null, labelled_by),
         'aria-describedby': (0, _componentHelper.combineDescribedBy)(this.props, contentId + '-content'),
-        'aria-label': !title && !labelled_by ? this.props.dialog_title : undefined,
+        'aria-label': !title && !labelled_by ? dialog_title : undefined,
         className: (0, _classnames.default)('dnb-modal__content', (container_placement || mode === 'drawer') && "dnb-modal__content--".concat(container_placement || 'right'), (0, _componentHelper.isTrue)(fullscreen) ? 'dnb-modal__content--fullscreen' : fullscreen === 'auto' && 'dnb-modal__content--auto-fullscreen', content_class, mode && "dnb-modal__content--".concat(mode), hide && 'dnb-modal__content--hide', (0, _componentHelper.isTrue)(spacing) && 'dnb-modal__content--spacing', align_content && "dnb-modal__content__align--".concat(align_content), (0, _componentHelper.isTrue)(no_animation) && 'dnb-modal__content--no-animation', (0, _componentHelper.isTrue)(no_animation_on_mobile) && 'dnb-modal__content--no-animation-on-mobile'),
         onClick: this.onContentClickHandler
       };
@@ -451,138 +454,46 @@ var ModalContent = function (_React$PureComponent) {
         onKeyDown: this.onKeyDownHandler
       }, rest);
 
-      var overlayParams = {
-        className: (0, _classnames.default)('dnb-modal__overlay', overlay_class, hide && 'dnb-modal__overlay--hide', mode && "dnb-modal__overlay--".concat(mode), (0, _componentHelper.isTrue)(no_animation) && 'dnb-modal__overlay--no-animation', (0, _componentHelper.isTrue)(no_animation_on_mobile) && 'dnb-modal__overlay--no-animation-on-mobile')
-      };
       (0, _componentHelper.validateDOMAttributes)(this.props, innerParams);
-      var bar = (0, _componentHelper.findElementInChildren)(modal_content, function (cur) {
-        return cur.type === _ModalHeader.ModalHeaderBar;
-      }) ? null : _react.default.createElement(_ModalHeader.ModalHeaderBar, null, bar_content);
-      var header = (0, _componentHelper.findElementInChildren)(modal_content, function (cur) {
+      var barExists = (0, _componentHelper.findElementInChildren)(modal_content, function (cur) {
+        return cur.type === _ModalHeaderBar.default;
+      });
+      var headerExists = (0, _componentHelper.findElementInChildren)(modal_content, function (cur) {
         return cur.type === _ModalHeader.default;
-      }) ? null : _react.default.createElement(_ModalHeader.default, {
-        title: title
-      }, header_content);
-
-      var content = _react.default.createElement("div", {
-        id: contentId + '-content',
-        className: "dnb-modal__content__wrapper"
-      }, modal_content);
-
+      });
       return _react.default.createElement(_ModalContext.default.Provider, {
-        value: _objectSpread(_objectSpread({
-          id: contentId,
-          setBackgroundColor: this.setBackgroundColor
-        }, this.props), {}, {
+        value: {
+          id: this.props.id,
+          title: title,
+          hide_close_button: hide_close_button,
+          close_button_attributes: close_button_attributes,
+          close_title: close_title,
+          mode: mode,
+          setBackgroundColor: this.setBackgroundColor,
           onCloseClickHandler: this.onCloseClickHandler
-        })
+        }
       }, _react.default.createElement("div", _extends({
         id: contentId
       }, contentParams), _react.default.createElement(_ScrollView.default, innerParams, _react.default.createElement("div", {
-        tabIndex: "-1",
+        tabIndex: -1,
         className: "dnb-modal__content__spacing dnb-no-focus",
-        style: style,
+        style: color ? {
+          '--modal-background-color': "var(--color-".concat(color, ")")
+        } : null,
         ref: this._contentRef
-      }, bar, header, content))), _react.default.createElement("span", _extends({}, overlayParams, {
+      }, !barExists && _react.default.createElement(_ModalHeaderBar.default, null, bar_content), !headerExists && _react.default.createElement(_ModalHeader.default, {
+        title: title
+      }, header_content), _react.default.createElement("div", {
+        id: contentId + '-content',
+        className: "dnb-modal__content__wrapper"
+      }, modal_content)))), _react.default.createElement("span", {
+        className: (0, _classnames.default)('dnb-modal__overlay', overlay_class, hide && 'dnb-modal__overlay--hide', mode && "dnb-modal__overlay--".concat(mode), (0, _componentHelper.isTrue)(no_animation) && 'dnb-modal__overlay--no-animation', (0, _componentHelper.isTrue)(no_animation_on_mobile) && 'dnb-modal__overlay--no-animation-on-mobile'),
         "aria-hidden": "true"
-      })));
+      }));
     }
   }]);
 
   return ModalContent;
 }(_react.default.PureComponent);
 
-exports.default = ModalContent;
-
-_defineProperty(ModalContent, "defaultProps", {
-  mode: null,
-  bar_content: null,
-  header_content: null,
-  hide: null,
-  id: null,
-  root_id: null,
-  labelled_by: null,
-  focus_selector: null,
-  content_id: null,
-  title: null,
-  close_title: null,
-  dialog_title: null,
-  hide_close_button: null,
-  close_button_attributes: null,
-  spacing: null,
-  prevent_close: null,
-  prevent_core_style: null,
-  animation_duration: null,
-  no_animation: null,
-  no_animation_on_mobile: null,
-  min_width: null,
-  max_width: null,
-  fullscreen: null,
-  align_content: null,
-  container_placement: null,
-  class: null,
-  overlay_class: null,
-  content_class: null,
-  closeModal: null,
-  className: null,
-  children: null
-});
-
-process.env.NODE_ENV !== "production" ? ModalContent.propTypes = {
-  modal_content: _propTypes.default.node.isRequired,
-  mode: _propTypes.default.oneOf(['modal', 'drawer']),
-  bar_content: _propTypes.default.node,
-  header_content: _propTypes.default.node,
-  hide: _propTypes.default.bool,
-  id: _propTypes.default.string,
-  root_id: _propTypes.default.string,
-  labelled_by: _propTypes.default.string,
-  focus_selector: _propTypes.default.string,
-  content_id: _propTypes.default.string,
-  title: _propTypes.default.node,
-  close_title: _propTypes.default.string,
-  dialog_title: _propTypes.default.string,
-  hide_close_button: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  close_button_attributes: _propTypes.default.object,
-  spacing: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  prevent_close: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  prevent_core_style: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  animation_duration: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  no_animation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  no_animation_on_mobile: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  min_width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  max_width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  fullscreen: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  align_content: _propTypes.default.string,
-  container_placement: _propTypes.default.string,
-  class: _propTypes.default.string,
-  content_class: _propTypes.default.string,
-  overlay_class: _propTypes.default.string,
-  closeModal: _propTypes.default.func.isRequired,
-  className: _propTypes.default.string,
-  children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func])
-} : void 0;
-
-function getListOfModalRoots() {
-  var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-
-  if (typeof window !== 'undefined') {
-    try {
-      var stack = window.__modalStack || [];
-
-      if (index !== null) {
-        if (index === -1 && stack.length) {
-          return stack[stack.length - 1];
-        } else if (index > -1) {
-          return stack[index];
-        }
-      }
-
-      return stack;
-    } catch (e) {
-      (0, _componentHelper.warn)(e);
-    }
-  }
-
-  return [];
-}
+exports.default = ModalContent;