@dnb/eufemia 9.16.3 → 9.18.0

package/cjs/components/modal/Modal.js

@@ -20,25 +20,24 @@ 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.ANIMATION_DURATION = void 0;
 Object.defineProperty(exports, "CloseButton", {
   enumerable: true,
   get: function get() {
-    return _ModalHeader.CloseButton;
+    return _CloseButton.default;
   }
 });
 exports.default = void 0;
@@ -51,22 +50,8 @@ require("core-js/modules/web.dom-collections.for-each.js");
 
 require("core-js/modules/es.object.freeze.js");
 
-require("core-js/modules/es.array.includes.js");
-
-require("core-js/modules/es.string.includes.js");
-
-require("core-js/modules/es.regexp.exec.js");
-
-require("core-js/modules/es.string.replace.js");
-
-require("core-js/modules/es.array.concat.js");
-
 var _react = _interopRequireDefault(require("react"));
 
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _Suffix = require("../../shared/helpers/Suffix");
@@ -77,24 +62,21 @@ var _componentHelper = require("../../shared/component-helper");
 
 var _SpacingHelper = require("../space/SpacingHelper");
 
-var _Button = require("../button/Button");
-
 var _HelpButtonInstance = _interopRequireDefault(require("../help-button/HelpButtonInstance"));
 
-var _ModalContent = _interopRequireWildcard(require("./ModalContent"));
+var _helpers = require("./helpers");
 
-var _ModalContext = _interopRequireDefault(require("./ModalContext"));
+var _ModalInner = _interopRequireDefault(require("./components/ModalInner"));
 
-var _ModalInner = _interopRequireDefault(require("./ModalInner"));
+var _ModalHeader = _interopRequireDefault(require("./components/ModalHeader"));
 
-var _ModalHeader = _interopRequireWildcard(require("./ModalHeader"));
+var _ModalHeaderBar = _interopRequireDefault(require("./components/ModalHeaderBar"));
 
-var _excluded = ["root_id", "content_id", "id", "open_state", "open_delay", "disabled", "spacing", "labelled_by", "focus_selector", "header_content", "bar_content", "trigger", "trigger_attributes", "trigger_hidden", "trigger_disabled", "trigger_variant", "trigger_text", "trigger_title", "trigger_size", "trigger_icon", "trigger_icon_position", "trigger_class"],
-    _excluded2 = ["children", "direct_dom_return"];
+var _CloseButton = _interopRequireDefault(require("./components/CloseButton"));
 
-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 _ModalRoot = _interopRequireDefault(require("./ModalRoot"));
 
-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 = ["root_id", "content_id", "disabled", "spacing", "labelled_by", "focus_selector", "header_content", "bar_content", "id", "open_state", "open_delay", "trigger", "trigger_attributes", "trigger_hidden", "trigger_disabled", "trigger_variant", "trigger_text", "trigger_title", "trigger_size", "trigger_icon", "trigger_icon_position", "trigger_class"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -130,6 +112,9 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+var ANIMATION_DURATION = 300;
+exports.ANIMATION_DURATION = ANIMATION_DURATION;
+
 var Modal = function (_React$PureComponent) {
   _inherits(Modal, _React$PureComponent);
 
@@ -142,6 +127,24 @@ var Modal = function (_React$PureComponent) {
 
     _this = _super.call(this, props);
 
+    _defineProperty(_assertThisInitialized(_this), "_id", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_triggerRef", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_onUnmount", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_openTimeout", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_closeTimeout", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_sideEffectsTimeout", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_tryToOpenTimeout", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "activeElement", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "isInTransition", void 0);
+
     _defineProperty(_assertThisInitialized(_this), "state", {
       hide: false,
       modalActive: false
@@ -156,6 +159,12 @@ var Modal = function (_React$PureComponent) {
       }
 
       var toggleNow = function toggleNow() {
+        var _this$props = _this.props,
+            _this$props$animation = _this$props.animation_duration,
+            animation_duration = _this$props$animation === void 0 ? ANIMATION_DURATION : _this$props$animation,
+            _this$props$no_animat = _this$props.no_animation,
+            no_animation = _this$props$no_animat === void 0 ? false : _this$props$no_animat;
+        var timeoutDuration = typeof animation_duration === 'string' ? parseFloat(animation_duration) : animation_duration;
         var modalActive = typeof showModal === 'boolean' ? showModal : !_this.state.modalActive;
         _this.isInTransition = true;
 
@@ -170,29 +179,32 @@ var Modal = function (_React$PureComponent) {
           });
         };
 
-        if (modalActive === false && !(0, _componentHelper.isTrue)(_this.props.no_animation)) {
+        if (modalActive === false && !(0, _componentHelper.isTrue)(no_animation)) {
           _this.setState({
             hide: true
           });
 
-          clearTimeout(_this._closeTimeout);
-          _this._closeTimeout = setTimeout(doItNow, parseFloat(_this.props.animation_duration));
+          _this._closeTimeout = setTimeout(doItNow, timeoutDuration);
         } else {
           doItNow();
         }
       };
 
       var waitBeforeOpen = function waitBeforeOpen() {
-        var delay = parseFloat(_this.props.open_delay);
+        var _this$props2 = _this.props,
+            open_delay = _this$props2.open_delay,
+            no_animation = _this$props2.no_animation;
+        var delay = typeof open_delay === 'string' ? parseFloat(open_delay) : open_delay;
 
-        if (delay > 0 && !(0, _componentHelper.isTrue)(_this.props.no_animation)) {
-          clearTimeout(_this._openTimeout);
+        if (delay > 0 && !(0, _componentHelper.isTrue)(no_animation)) {
           _this._openTimeout = setTimeout(toggleNow, delay);
         } else {
           toggleNow();
         }
       };
 
+      clearTimeout(_this._closeTimeout);
+      clearTimeout(_this._openTimeout);
       var open_modal = _this.props.open_modal;
 
       if (typeof open_modal === 'function') {
@@ -208,10 +220,11 @@ var Modal = function (_React$PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "handleSideEffects", function () {
       var modalActive = _this.state.modalActive;
+      var close_modal = _this.props.close_modal;
 
       if (modalActive) {
-        if (typeof _this.props.close_modal === 'function') {
-          var fn = _this.props.close_modal(function () {
+        if (typeof close_modal === 'function') {
+          var fn = close_modal(function () {
             _this.toggleOpenClose(null, false);
           }, _assertThisInitialized(_this));
 
@@ -228,7 +241,7 @@ var Modal = function (_React$PureComponent) {
           });
         }
 
-        if ((_this.props.open_state === 'opened' || _this.props.open_state === true) && _this.activeElement) {
+        if ((_this.props.open_state === 'opened' || _this.props.open_state === true) && _this.activeElement && _this.activeElement instanceof HTMLElement) {
           try {
             _this.activeElement.focus({
               preventScroll: true
@@ -238,13 +251,7 @@ var Modal = function (_React$PureComponent) {
           } catch (e) {}
         }
 
-        var last = (0, _ModalContent.getListOfModalRoots)(-1);
-
-        if (last) {
-          _this.setActiveState(last._id);
-        } else if ((0, _ModalContent.getListOfModalRoots)().length <= 1) {
-          _this.setActiveState(false);
-        }
+        _this.removeActiveState();
       }
     });
 
@@ -257,9 +264,11 @@ var Modal = function (_React$PureComponent) {
         ifIsLatest: true
       },
           ifIsLatest = _ref.ifIsLatest,
-          triggeredBy = _ref.triggeredBy;
+          _ref$triggeredBy = _ref.triggeredBy,
+          triggeredBy = _ref$triggeredBy === void 0 ? null : _ref$triggeredBy;
 
-      var prevent_close = _this.props.prevent_close;
+      var _this$props$prevent_c = _this.props.prevent_close,
+          prevent_close = _this$props$prevent_c === void 0 ? false : _this$props$prevent_c;
 
       if ((0, _componentHelper.isTrue)(prevent_close)) {
         var id = _this._id;
@@ -273,10 +282,10 @@ var Modal = function (_React$PureComponent) {
         });
       } else {
         if (ifIsLatest) {
-          var list = (0, _ModalContent.getListOfModalRoots)();
+          var list = (0, _helpers.getListOfModalRoots)();
 
           if (list.length > 1) {
-            var last = (0, _ModalContent.getListOfModalRoots)(-1);
+            var last = (0, _helpers.getModalRoot)(-1);
 
             if (last !== _assertThisInitialized(_this)) {
               return;
@@ -288,7 +297,7 @@ var Modal = function (_React$PureComponent) {
       }
     });
 
-    _this._id = props.id || (0, _componentHelper.makeUniqueId)();
+    _this._id = props.id || (0, _componentHelper.makeUniqueId)('modal-');
     _this._triggerRef = _react.default.createRef();
     _this._onUnmount = [];
     return _this;
@@ -302,16 +311,15 @@ var Modal = function (_React$PureComponent) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      clearTimeout(this._openTimeout);
+      clearTimeout(this._closeTimeout);
+      this.removeActiveState();
+
       this._onUnmount.forEach(function (fn) {
         if (typeof fn === 'function') {
           fn();
         }
       });
-
-      clearTimeout(this._openTimeout);
-      clearTimeout(this._closeTimeout);
-      clearTimeout(this._sideEffectsTimeout);
-      clearTimeout(this._tryToOpenTimeout);
     }
   }, {
     key: "componentDidUpdate",
@@ -323,35 +331,48 @@ var Modal = function (_React$PureComponent) {
   }, {
     key: "openBasedOnStateUpdate",
     value: function openBasedOnStateUpdate() {
-      var _this$state = this.state,
-          hide = _this$state.hide,
-          modalActive = _this$state.modalActive;
+      var hide = this.state.hide;
       var open_state = this.props.open_state;
 
       if (!this.activeElement && typeof document !== 'undefined') {
         this.activeElement = document.activeElement;
       }
 
-      if (!hide && !modalActive && (open_state === 'opened' || open_state === true)) {
+      if (!hide && (open_state === 'opened' || open_state === true)) {
         this.toggleOpenClose(null, true);
-      } else if (hide && modalActive && (open_state === 'closed' || open_state === false)) {
+      } else if (hide && (open_state === 'closed' || open_state === false)) {
         this.toggleOpenClose(null, false);
       }
     }
+  }, {
+    key: "removeActiveState",
+    value: function removeActiveState() {
+      var last = (0, _helpers.getModalRoot)(-1);
+
+      if (last !== null && last !== void 0 && last._id && last._id !== this._id) {
+        return this.setActiveState(last._id);
+      }
+
+      try {
+        document.documentElement.removeAttribute('data-dnb-modal-active');
+        document.body.setAttribute('data-dnb-modal-active', 'false');
+      } catch (e) {
+        (0, _componentHelper.warn)('Modal: Error on remove "data-dnb-modal-active"', e);
+      }
+    }
   }, {
     key: "setActiveState",
     value: function setActiveState(modalId) {
+      if (!modalId) {
+        (0, _componentHelper.warn)('Modal: A valid modalId is required');
+      }
+
       if (typeof document !== 'undefined') {
         try {
-          if (modalId) {
-            document.documentElement.setAttribute('data-dnb-modal-active', modalId);
-          } else {
-            document.documentElement.removeAttribute('data-dnb-modal-active');
-          }
-
-          document.body.setAttribute('data-dnb-modal-active', modalId ? 'true' : 'false');
+          document.documentElement.setAttribute('data-dnb-modal-active', modalId);
+          document.body.setAttribute('data-dnb-modal-active', 'true');
         } catch (e) {
-          (0, _componentHelper.warn)('Modal: Error on set "data-dnb-modal-active" by using element.setAttribute()', e);
+          (0, _componentHelper.warn)('Modal: Error on set "data-dnb-modal-active"', e);
         }
       }
     }
@@ -362,79 +383,92 @@ var Modal = function (_React$PureComponent) {
 
       var props = (0, _componentHelper.extendPropsWithContext)(this.props, Modal.defaultProps, this.context.getTranslation(this.props).Modal, this.context.FormRow, this.context.Modal);
 
-      var root_id = props.root_id,
-          content_id = props.content_id,
+      var _props$root_id = props.root_id,
+          root_id = _props$root_id === void 0 ? 'root' : _props$root_id,
+          _props$content_id = props.content_id,
+          content_id = _props$content_id === void 0 ? null : _props$content_id,
+          _props$disabled = props.disabled,
+          disabled = _props$disabled === void 0 ? null : _props$disabled,
+          _props$spacing = props.spacing,
+          spacing = _props$spacing === void 0 ? true : _props$spacing,
+          _props$labelled_by = props.labelled_by,
+          labelled_by = _props$labelled_by === void 0 ? null : _props$labelled_by,
+          _props$focus_selector = props.focus_selector,
+          focus_selector = _props$focus_selector === void 0 ? null : _props$focus_selector,
+          _props$header_content = props.header_content,
+          header_content = _props$header_content === void 0 ? null : _props$header_content,
+          _props$bar_content = props.bar_content,
+          bar_content = _props$bar_content === void 0 ? null : _props$bar_content,
           id = props.id,
           open_state = props.open_state,
           open_delay = props.open_delay,
-          disabled = props.disabled,
-          spacing = props.spacing,
-          labelled_by = props.labelled_by,
-          focus_selector = props.focus_selector,
-          header_content = props.header_content,
-          bar_content = props.bar_content,
-          trigger = props.trigger,
-          trigger_attributes = props.trigger_attributes,
-          trigger_hidden = props.trigger_hidden,
-          trigger_disabled = props.trigger_disabled,
-          trigger_variant = props.trigger_variant,
-          trigger_text = props.trigger_text,
-          trigger_title = props.trigger_title,
-          trigger_size = props.trigger_size,
+          _props$trigger = props.trigger,
+          trigger = _props$trigger === void 0 ? null : _props$trigger,
+          _props$trigger_attrib = props.trigger_attributes,
+          trigger_attributes = _props$trigger_attrib === void 0 ? null : _props$trigger_attrib,
+          _props$trigger_hidden = props.trigger_hidden,
+          trigger_hidden = _props$trigger_hidden === void 0 ? 'false' : _props$trigger_hidden,
+          _props$trigger_disabl = props.trigger_disabled,
+          trigger_disabled = _props$trigger_disabl === void 0 ? null : _props$trigger_disabl,
+          _props$trigger_varian = props.trigger_variant,
+          trigger_variant = _props$trigger_varian === void 0 ? 'secondary' : _props$trigger_varian,
+          _props$trigger_text = props.trigger_text,
+          trigger_text = _props$trigger_text === void 0 ? null : _props$trigger_text,
+          _props$trigger_title = props.trigger_title,
+          trigger_title = _props$trigger_title === void 0 ? null : _props$trigger_title,
+          _props$trigger_size = props.trigger_size,
+          trigger_size = _props$trigger_size === void 0 ? null : _props$trigger_size,
           trigger_icon = props.trigger_icon,
-          trigger_icon_position = props.trigger_icon_position,
-          trigger_class = props.trigger_class,
+          _props$trigger_icon_p = props.trigger_icon_position,
+          trigger_icon_position = _props$trigger_icon_p === void 0 ? 'left' : _props$trigger_icon_p,
+          _props$trigger_class = props.trigger_class,
+          trigger_class = _props$trigger_class === void 0 ? null : _props$trigger_class,
           rest = _objectWithoutProperties(props, _excluded);
 
-      var _this$state2 = this.state,
-          hide = _this$state2.hide,
-          modalActive = _this$state2.modalActive;
+      var _this$state = this.state,
+          hide = _this$state.hide,
+          modalActive = _this$state.modalActive;
       var modal_content = Modal.getContent(typeof this.props.children === 'function' ? Object.freeze(_objectSpread(_objectSpread({}, this.props), {}, {
         close: this.close
       })) : this.props);
 
       var render = function render(suffixProps) {
-        var modalProps = {};
-
-        var triggerAttributes = _objectSpread({}, trigger_attributes);
-
-        for (var prop in props) {
-          if (prop.includes('trigger_') && props[prop] !== null) {
-            var name = String(prop).replace('trigger_', '');
+        var triggerAttributes = _objectSpread({
+          hidden: trigger_hidden,
+          disabled: trigger_disabled,
+          variant: trigger_variant,
+          text: trigger_text,
+          title: trigger_title,
+          size: trigger_size,
+          icon: trigger_icon,
+          icon_position: trigger_icon_position,
+          class: trigger_class
+        }, trigger_attributes);
 
-            if (name !== 'attributes' && name !== 'props' && prop !== 'element') {
-              triggerAttributes[name] = props[prop];
-            }
-          }
+        if ((0, _componentHelper.isTrue)(disabled)) {
+          triggerAttributes.disabled = true;
         }
 
         if (triggerAttributes.id) {
           _this2._id = triggerAttributes.id;
         }
 
-        if (!rest.title && triggerAttributes.title) {
-          modalProps.title = triggerAttributes.title;
-        } else if (!rest.title && suffixProps) {
-          modalProps.title = _this2.context.translation.HelpButton.title;
-        }
+        var fallbackTitle;
 
-        if ((0, _componentHelper.isTrue)(disabled)) {
-          triggerAttributes.disabled = true;
+        if (triggerAttributes.title) {
+          fallbackTitle = triggerAttributes.title;
+        } else if (suffixProps) {
+          fallbackTitle = _this2.context.translation.HelpButton.title;
         }
 
         var TriggerButton = trigger ? trigger : _HelpButtonInstance.default;
-        return _react.default.createElement(_ModalContext.default.Provider, {
-          value: _objectSpread({
-            id: _this2._id
-          }, rest)
-        }, TriggerButton && !(0, _componentHelper.isTrue)(trigger_hidden) && _react.default.createElement(TriggerButton, _extends({
+        return _react.default.createElement(_react.default.Fragment, null, TriggerButton && !(0, _componentHelper.isTrue)(trigger_hidden) && _react.default.createElement(TriggerButton, _extends({}, triggerAttributes, {
           id: _this2._id,
-          title: !triggerAttributes.text ? props.title || modalProps.title : null,
-          onClick: _this2.toggleOpenClose
-        }, triggerAttributes, {
+          title: !triggerAttributes.text ? rest.title || fallbackTitle : null,
+          onClick: _this2.toggleOpenClose,
           innerRef: _this2._triggerRef,
           className: (0, _classnames.default)('dnb-modal__trigger', (0, _SpacingHelper.createSpacingClasses)(props), triggerAttributes.class, triggerAttributes.className)
-        })), modalActive && modal_content && _react.default.createElement(ModalRoot, _extends({}, rest, {
+        })), modalActive && modal_content && _react.default.createElement(_ModalRoot.default, _extends({}, rest, {
           id: _this2._id,
           root_id: root_id,
           content_id: content_id || "dnb-modal-".concat(_this2._id),
@@ -446,8 +480,8 @@ var Modal = function (_React$PureComponent) {
           spacing: spacing,
           closeModal: _this2.close,
           hide: hide,
-          toggleOpenClose: _this2.toggleOpenClose
-        }, modalProps)));
+          title: rest.title || fallbackTitle
+        })));
       };
 
       return _react.default.createElement(_Suffix.SuffixContext.Consumer, null, render);
@@ -468,30 +502,6 @@ var Modal = function (_React$PureComponent) {
 
       return (0, _componentHelper.processChildren)(props);
     }
-  }, {
-    key: "insertModalRoot",
-    value: function insertModalRoot(id) {
-      if (typeof window === 'undefined') {
-        return false;
-      }
-
-      try {
-        id = "dnb-modal-".concat(id || 'root');
-        window.__modalRoot = document.getElementById(id);
-
-        if (!window.__modalRoot) {
-          window.__modalRoot = document.createElement('div');
-
-          window.__modalRoot.setAttribute('id', id);
-
-          document.body.insertBefore(window.__modalRoot, document.body.firstChild);
-        }
-      } catch (e) {
-        (0, _componentHelper.warn)('Modal: Could not insert dnb-modal-root', e);
-      }
-
-      return window.__modalRoot;
-    }
   }, {
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(props, state) {
@@ -533,7 +543,7 @@ _defineProperty(Modal, "tagName", 'dnb-modal');
 
 _defineProperty(Modal, "contextType", _Context.default);
 
-_defineProperty(Modal, "Bar", _ModalHeader.ModalHeaderBar);
+_defineProperty(Modal, "Bar", _ModalHeaderBar.default);
 
 _defineProperty(Modal, "Header", _ModalHeader.default);
 
@@ -543,8 +553,6 @@ _defineProperty(Modal, "Inner", _ModalInner.default);
 
 _defineProperty(Modal, "defaultProps", {
   id: null,
-  root_id: 'root',
-  mode: 'modal',
   focus_selector: null,
   labelled_by: null,
   title: null,
@@ -558,7 +566,7 @@ _defineProperty(Modal, "defaultProps", {
   close_button_attributes: null,
   prevent_close: false,
   prevent_core_style: false,
-  animation_duration: 300,
+  animation_duration: ANIMATION_DURATION,
   no_animation: false,
   no_animation_on_mobile: false,
   fullscreen: 'auto',
@@ -569,6 +577,7 @@ _defineProperty(Modal, "defaultProps", {
   open_state: null,
   direct_dom_return: false,
   class: null,
+  root_id: 'root',
   className: null,
   children: null,
   on_open: null,
@@ -592,155 +601,4 @@ _defineProperty(Modal, "defaultProps", {
   modal_content: null,
   header_content: null,
   bar_content: null
-});
-
-process.env.NODE_ENV !== "production" ? Modal.propTypes = _objectSpread(_objectSpread({
-  id: _propTypes.default.string,
-  root_id: _propTypes.default.string,
-  mode: _propTypes.default.oneOf(['modal', 'drawer']),
-  focus_selector: _propTypes.default.string,
-  labelled_by: _propTypes.default.string,
-  title: _propTypes.default.node,
-  disabled: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  spacing: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  open_delay: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  content_id: _propTypes.default.string,
-  dialog_title: _propTypes.default.string,
-  close_title: _propTypes.default.string,
-  hide_close_button: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  close_button_attributes: _propTypes.default.object,
-  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]),
-  fullscreen: _propTypes.default.oneOf(['auto', true, false, 'true', 'false']),
-  min_width: _propTypes.default.string,
-  max_width: _propTypes.default.string,
-  align_content: _propTypes.default.oneOf(['left', 'center', 'centered', 'right']),
-  container_placement: _propTypes.default.oneOf(['left', 'right', 'top', 'bottom']),
-  open_state: _propTypes.default.oneOfType([_propTypes.default.oneOf(['opened', 'closed']), _propTypes.default.bool]),
-  direct_dom_return: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
-}, _SpacingHelper.spacingPropTypes), {}, {
-  class: _propTypes.default.string,
-  className: _propTypes.default.string,
-  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-  on_open: _propTypes.default.func,
-  on_close: _propTypes.default.func,
-  on_close_prevent: _propTypes.default.func,
-  open_modal: _propTypes.default.func,
-  close_modal: _propTypes.default.func,
-  trigger: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-  trigger_attributes: _propTypes.default.object,
-  trigger_hidden: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  trigger_disabled: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  trigger_variant: _Button.buttonVariantPropType.variant,
-  trigger_text: _propTypes.default.string,
-  trigger_title: _propTypes.default.string,
-  trigger_size: _propTypes.default.string,
-  trigger_icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),
-  trigger_icon_position: _propTypes.default.oneOf(['left', 'right']),
-  trigger_class: _propTypes.default.string,
-  overlay_class: _propTypes.default.string,
-  content_class: _propTypes.default.string,
-  modal_content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),
-  header_content: _propTypes.default.node,
-  bar_content: _propTypes.default.node
-}) : void 0;
-
-var ModalRoot = function (_React$PureComponent2) {
-  _inherits(ModalRoot, _React$PureComponent2);
-
-  var _super2 = _createSuper(ModalRoot);
-
-  function ModalRoot() {
-    var _this3;
-
-    _classCallCheck(this, ModalRoot);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this3 = _super2.call.apply(_super2, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this3), "state", {
-      isMounted: false
-    });
-
-    return _this3;
-  }
-
-  _createClass(ModalRoot, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (!(0, _componentHelper.isTrue)(this.props.direct_dom_return)) {
-        Modal.insertModalRoot(this.props.root_id);
-
-        try {
-          if (!this.portalElem) {
-            this.portalElem = document.createElement('div');
-            this.portalElem.className = 'dnb-modal-root__inner';
-          }
-
-          if (this.portalElem && typeof window !== 'undefined' && window.__modalRoot) {
-            window.__modalRoot.appendChild(this.portalElem);
-          }
-        } catch (e) {
-          (0, _componentHelper.warn)(e);
-        }
-
-        this.setState({
-          isMounted: true
-        });
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      try {
-        if (this.portalElem && typeof window !== 'undefined' && window.__modalRoot && window.__modalRoot.removeChild) {
-          window.__modalRoot.removeChild(this.portalElem);
-
-          this.portalElem = null;
-        }
-      } catch (e) {
-        (0, _componentHelper.warn)(e);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          direct_dom_return = _this$props.direct_dom_return,
-          props = _objectWithoutProperties(_this$props, _excluded2);
-
-      if ((0, _componentHelper.isTrue)(direct_dom_return)) {
-        return _react.default.createElement(_ModalContent.default, props, children);
-      }
-
-      if (this.portalElem && typeof window !== 'undefined' && window.__modalRoot && this.state.isMounted) {
-        return _reactDom.default.createPortal(_react.default.createElement(_ModalContent.default, props, children), this.portalElem);
-      }
-
-      return null;
-    }
-  }]);
-
-  return ModalRoot;
-}(_react.default.PureComponent);
-
-_defineProperty(ModalRoot, "defaultProps", {
-  id: null,
-  root_id: null,
-  direct_dom_return: false,
-  children: null
-});
-
-process.env.NODE_ENV !== "production" ? ModalRoot.propTypes = {
-  id: _propTypes.default.string,
-  root_id: _propTypes.default.string,
-  direct_dom_return: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func])
-} : void 0;
+});