@dnb/eufemia 9.16.2 → 9.17.2

package/cjs/components/modal/Modal.js

@@ -175,7 +175,6 @@ var Modal = function (_React$PureComponent) {
             hide: true
           });
 
-          clearTimeout(_this._closeTimeout);
           _this._closeTimeout = setTimeout(doItNow, parseFloat(_this.props.animation_duration));
         } else {
           doItNow();
@@ -186,13 +185,14 @@ var Modal = function (_React$PureComponent) {
         var delay = parseFloat(_this.props.open_delay);
 
         if (delay > 0 && !(0, _componentHelper.isTrue)(_this.props.no_animation)) {
-          clearTimeout(_this._openTimeout);
           _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') {
@@ -238,13 +238,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();
       }
     });
 
@@ -288,7 +282,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 +296,15 @@ var Modal = function (_React$PureComponent) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      clearTimeout(this._openTimeout);
+      clearTimeout(this._closeTimeout);
+      this.removeActiveState(false);
+
       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 +316,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, _ModalContent.getListOfModalRoots)(-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);
         }
       }
     }
@@ -386,9 +392,9 @@ var Modal = function (_React$PureComponent) {
           trigger_class = 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);

package/cjs/components/modal/ModalContent.js

@@ -36,16 +36,16 @@ Object.defineProperty(exports, "__esModule", {
 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");
 
+require("core-js/modules/es.regexp.exec.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -124,6 +124,31 @@ var ModalContent = function (_React$PureComponent) {
       triggeredByEvent: null
     });
 
+    _defineProperty(_assertThisInitialized(_this), "lockBody", function () {
+      var modalRoots = 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 () {
       clearTimeout(_this._androidFocusTimeout);
       _this._androidFocusTimeout = setTimeout(function () {
@@ -134,7 +159,7 @@ var ModalContent = function (_React$PureComponent) {
             document.activeElement.scrollIntoView();
           }
         } catch (e) {}
-      }, 100);
+      }, parseFloat(_this.props.animation_duration) / 2);
     });
 
     _defineProperty(_assertThisInitialized(_this), "preventClick", function (e) {
@@ -183,57 +208,45 @@ 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];
       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();
+      this.setAndroidFocusHelper();
       var id = this.props.id;
       (0, _componentHelper.dispatchCustomElementEvent)(this, 'on_open', {
         id: id
       });
 
-      if (typeof document !== 'undefined') {
-        document.addEventListener('keydown', this.onKeyDownHandler);
+      if ((0, _componentHelper.isTrue)(this.props.no_animation) || process.env.NODE_ENV === 'test') {
+        this.lockBody();
+      } else {
+        this._lockTimeout = setTimeout(this.lockBody, parseFloat(this.props.animation_duration) * 1.2);
       }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       clearTimeout(this._focusTimeout);
+      clearTimeout(this._lockTimeout);
+      this.removeLocks();
+    }
+  }, {
+    key: "removeLocks",
+    value: function removeLocks() {
       var modalRoots = getListOfModalRoots();
       var firstLevel = modalRoots[0];
       this.removeFromIndex();
 
       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 {
@@ -295,7 +308,7 @@ var ModalContent = function (_React$PureComponent) {
   }, {
     key: "removeFromIndex",
     value: function removeFromIndex() {
-      var _this3 = this;
+      var _this2 = this;
 
       if (typeof window !== 'undefined') {
         try {
@@ -304,12 +317,8 @@ var ModalContent = function (_React$PureComponent) {
           }
 
           window.__modalStack = window.__modalStack.filter(function (cur) {
-            return cur !== _this3;
+            return cur !== _this2;
           });
-
-          if (!window.__modalStack.length) {
-            delete window.__modalStack;
-          }
         } catch (e) {
           (0, _componentHelper.warn)(e);
         }
@@ -363,7 +372,7 @@ var ModalContent = function (_React$PureComponent) {
     key: "closeModal",
     value: function closeModal(event, _ref) {
       var _event$persist,
-          _this4 = this;
+          _this3 = this;
 
       var triggeredBy = _ref.triggeredBy,
           params = _objectWithoutProperties(_ref, _excluded);
@@ -373,7 +382,7 @@ var ModalContent = function (_React$PureComponent) {
         triggeredBy: triggeredBy,
         triggeredByEvent: event
       }, function () {
-        _this4.props.closeModal(event, _objectSpread({
+        _this3.props.closeModal(event, _objectSpread({
           triggeredBy: triggeredBy
         }, params));
       });
@@ -416,7 +425,7 @@ var ModalContent = function (_React$PureComponent) {
           children = _this$props2.children,
           rest = _objectWithoutProperties(_this$props2, _excluded2);
 
-      var contentId = content_id || (0, _componentHelper.makeUniqueId)();
+      var contentId = content_id || (0, _componentHelper.makeUniqueId)('modal-');
       var style = this.state.color ? {
         '--modal-background-color': "var(--color-".concat(this.state.color, ")")
       } : null;

package/cjs/components/modal/style/_modal-mixins.scss

@@ -85,17 +85,17 @@
 
 @keyframes show-modal-overlay {
   from {
-    background-color: var(--modal-overlay-transparent);
+    opacity: 0;
   }
   to {
-    background-color: var(--modal-overlay-bg);
+    opacity: var(--modal-overlay-opacity);
   }
 }
 @keyframes hide-modal-overlay {
   from {
-    background-color: var(--modal-overlay-bg);
+    opacity: var(--modal-overlay-opacity);
   }
   to {
-    background-color: var(--modal-overlay-transparent);
+    opacity: 0;
   }
 }

package/cjs/components/modal/style/_modal.scss

@@ -23,8 +23,8 @@
   --modal-drawer-header-min-height: 6rem;
 
   // Overlay
-  --modal-overlay-transparent: rgba(0, 0, 0, 0);
-  --modal-overlay-bg: rgba(0, 0, 0, 0.32);
+  --modal-overlay-bg: black;
+  --modal-overlay-opacity: 0.32;
 }
 
 html[data-dnb-modal-active] {
@@ -390,39 +390,22 @@ html[data-dnb-modal-active] {
     width: 100%;
     height: 100%;
 
-    will-change: background-color;
-    background-color: var(--modal-overlay-transparent);
-    box-shadow: 0 100vh 0 0 var(--modal-overlay-bg);
-
-    // Modal & Drawer mode
-    &--modal {
-      animation: show-modal-overlay var(--modal-animation-duration)
-        ease-out forwards 0ms;
-    }
-    &--drawer {
-      animation: show-modal-overlay var(--modal-animation-duration)
-        ease-out forwards 100ms;
-    }
-    &--hide {
-      animation: hide-modal-overlay var(--modal-animation-duration)
-        ease-in-out forwards;
-    }
+    background-color: var(--modal-overlay-bg);
   }
 
   &-root__inner &__overlay {
-    opacity: 0;
-    transition: opacity 300ms ease-in-out;
+    animation: hide-modal-overlay var(--modal-animation-duration)
+      ease-in-out forwards;
   }
-  // We may possibly use something like this to avoid the transition
-  // when there are several stacked modals
-  // &-root__inner:nth-of-type(n + 2) &__overlay {
-  //   animation-duration: 0ms !important;
-  // }
+
   &-root__inner:last-of-type &__overlay {
-    opacity: 1;
-  }
-  html[data-visual-test] &-root__inner &__overlay {
-    transition: none;
+    animation: show-modal-overlay var(--modal-animation-duration) ease-out
+      forwards 0ms;
+
+    &--hide {
+      animation: hide-modal-overlay var(--modal-animation-duration)
+        ease-in-out forwards;
+    }
   }
 
   /* stylelint-disable-next-line */

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

@@ -489,8 +489,6 @@
     padding-left: 1rem; }
   .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
     padding-right: 1rem; }
-  .dnb-button--tertiary .dnb-button__text {
-    margin: 0; }
   .dnb-button--has-text {
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {
@@ -792,35 +790,31 @@ button.dnb-button::-moz-focus-inner {
 
 @-webkit-keyframes show-modal-overlay {
   from {
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent); }
+    opacity: 0; }
   to {
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); } }
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); } }
 
 @keyframes show-modal-overlay {
   from {
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent); }
+    opacity: 0; }
   to {
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); } }
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); } }
 
 @-webkit-keyframes hide-modal-overlay {
   from {
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); }
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); }
   to {
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent); } }
+    opacity: 0; } }
 
 @keyframes hide-modal-overlay {
   from {
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); }
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); }
   to {
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent); } }
+    opacity: 0; } }
 
 :root {
   --modal-z-index: 3000;
@@ -834,8 +828,8 @@ button.dnb-button::-moz-focus-inner {
   --modal-drawer-min-width: 25rem;
   --modal-drawer-max-width: 40rem;
   --modal-drawer-header-min-height: 6rem;
-  --modal-overlay-transparent: rgba(0, 0, 0, 0);
-  --modal-overlay-bg: rgba(0, 0, 0, 0.32); }
+  --modal-overlay-bg: black;
+  --modal-overlay-opacity: 0.32; }
 
 html[data-dnb-modal-active] {
   -moz-user-select: none;
@@ -1234,37 +1228,23 @@ html[data-dnb-modal-active] {
     top: 0;
     width: 100%;
     height: 100%;
-    will-change: background-color;
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent);
-    -webkit-box-shadow: 0 100vh 0 0 rgba(0, 0, 0, 0.32);
-            box-shadow: 0 100vh 0 0 rgba(0, 0, 0, 0.32);
-    -webkit-box-shadow: 0 100vh 0 0 var(--modal-overlay-bg);
-            box-shadow: 0 100vh 0 0 var(--modal-overlay-bg); }
-    .dnb-modal__overlay--modal {
-      -webkit-animation: show-modal-overlay 300ms ease-out forwards 0ms;
-              animation: show-modal-overlay 300ms ease-out forwards 0ms;
-      -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms;
-              animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms; }
-    .dnb-modal__overlay--drawer {
-      -webkit-animation: show-modal-overlay 300ms ease-out forwards 100ms;
-              animation: show-modal-overlay 300ms ease-out forwards 100ms;
-      -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 100ms;
-              animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 100ms; }
-    .dnb-modal__overlay--hide {
+    background-color: black;
+    background-color: var(--modal-overlay-bg); }
+  .dnb-modal-root__inner .dnb-modal__overlay {
+    -webkit-animation: hide-modal-overlay 300ms ease-in-out forwards;
+            animation: hide-modal-overlay 300ms ease-in-out forwards;
+    -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards;
+            animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+  .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
+    -webkit-animation: show-modal-overlay 300ms ease-out forwards 0ms;
+            animation: show-modal-overlay 300ms ease-out forwards 0ms;
+    -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms;
+            animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms; }
+    .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide {
       -webkit-animation: hide-modal-overlay 300ms ease-in-out forwards;
               animation: hide-modal-overlay 300ms ease-in-out forwards;
       -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards;
               animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
-  .dnb-modal-root__inner .dnb-modal__overlay {
-    opacity: 0;
-    -webkit-transition: opacity 300ms ease-in-out;
-    transition: opacity 300ms ease-in-out; }
-  .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
-    opacity: 1; }
-  html[data-visual-test] .dnb-modal-root__inner .dnb-modal__overlay {
-    -webkit-transition: none;
-    transition: none; }
   html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
     -webkit-animation-delay: 0ms !important;
             animation-delay: 0ms !important;