@nrk/core-dialog - npm Package Compare versions

Comparing version 3.0.5 to 3.0.6

core-dialog.cjs.js

@@ -316,10 +316,19 @@ 'use strict';
         if (nextBack) toggleAttribute(nextBack, 'hidden', this.hidden);
-        if (this.hidden) reFocus(this._focus);else {
-          var below = queryAll('body *').filter(function (el) {
-            return el !== nextBack && !_this.contains(el) && isVisible(el);
-          });
-          var zIndex = Math.min(Math.max.apply(Math, [1].concat(_toConsumableArray(below.map(getZIndex)))), 2000000000); // Avoid overflowing z-index. See techjunkie.com/maximum-z-index-value
 
-          if (nextBack) nextBack.style.zIndex = zIndex + 1;
-          this.style.zIndex = zIndex + 2;
+        if (this.hidden) {
+          reFocus(this._focus);
+        } else {
+          var zIndex = window.getComputedStyle(this).getPropertyValue('z-index');
+
+          if (zIndex === 'auto' && this.style.zIndex === '') {
+            // Place this dialog over uppermost dialog if not controlled in CSS or JS
+            var below = queryAll(this.nodeName).filter(function (el) {
+              return el !== nextBack && !_this.contains(el) && isVisible(el);
+            });
+            zIndex = Math.min(Math.max.apply(Math, [1].concat(_toConsumableArray(below.map(getZIndex)))), 2000000000); // Avoid overflowing z-index. See techjunkie.com/maximum-z-index-value
+
+            if (nextBack) nextBack.style.zIndex = zIndex + 1;
+            this.style.zIndex = zIndex + 2;
+          }
+
           this._focus = document.activeElement || document.body; // Remember last focused element
@@ -332,2 +341,3 @@
 
+
         if (attr === 'hidden' && next !== prev) dispatchEvent(this, 'dialog.toggle');
@@ -347,4 +357,2 @@ }
           if (action === 'close' && closest(event.target, this.nodeName) === this) this.close();else if (action === this.id) {
-            button.setAttribute(this._from, ''); // iOS remember button
-
             this.show();
@@ -351,0 +359,0 @@ }

core-dialog.js

@@ -38,13 +38,15 @@ import { closest, dispatchEvent, toggleAttribute, queryAll } from '../utils'
 
-      if (this.hidden) reFocus(this._focus)
-      else {
-        const below = queryAll('body *').filter((el) => el !== nextBack && !this.contains(el) && isVisible(el))
-        const zIndex = Math.min(Math.max(1, ...below.map(getZIndex)), 2000000000) // Avoid overflowing z-index. See techjunkie.com/maximum-z-index-value
-
-        if (nextBack) nextBack.style.zIndex = zIndex + 1
-        this.style.zIndex = zIndex + 2
+      if (this.hidden) {
+        reFocus(this._focus)
+      } else {
+        let zIndex = window.getComputedStyle(this).getPropertyValue('z-index')
+        if (zIndex === 'auto' && this.style.zIndex === '') { // Place this dialog over uppermost dialog if not controlled in CSS or JS
+          const below = queryAll(this.nodeName).filter((el) => el !== nextBack && !this.contains(el) && isVisible(el))
+          zIndex = Math.min(Math.max(1, ...below.map(getZIndex)), 2000000000) // Avoid overflowing z-index. See techjunkie.com/maximum-z-index-value
+          if (nextBack) nextBack.style.zIndex = zIndex + 1
+          this.style.zIndex = zIndex + 2
+        }
         this._focus = document.activeElement || document.body // Remember last focused element
         setTimeout(() => setFocus(this)) // Move focus after paint (helps iOS and react portals)
       }
-
       // React might re-mount the DOM, so make sure prev and next did actually change
@@ -65,3 +67,2 @@ if (attr === 'hidden' && next !== prev) dispatchEvent(this, 'dialog.toggle')
       else if (action === this.id) {
-        button.setAttribute(this._from, '') // iOS remember button
         this.show()
@@ -68,0 +69,0 @@ }

core-dialog.jsx.js

@@ -7,3 +7,3 @@ (function (global, factory) {
 
-  React = React && React.hasOwnProperty('default') ? React['default'] : React;
+  React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
 
@@ -323,10 +323,19 @@ function _classCallCheck(instance, Constructor) {
           if (nextBack) toggleAttribute(nextBack, 'hidden', this.hidden);
-          if (this.hidden) reFocus(this._focus);else {
-            var below = queryAll('body *').filter(function (el) {
-              return el !== nextBack && !_this.contains(el) && isVisible(el);
-            });
-            var zIndex = Math.min(Math.max.apply(Math, [1].concat(_toConsumableArray(below.map(getZIndex)))), 2000000000); // Avoid overflowing z-index. See techjunkie.com/maximum-z-index-value
 
-            if (nextBack) nextBack.style.zIndex = zIndex + 1;
-            this.style.zIndex = zIndex + 2;
+          if (this.hidden) {
+            reFocus(this._focus);
+          } else {
+            var zIndex = window.getComputedStyle(this).getPropertyValue('z-index');
+
+            if (zIndex === 'auto' && this.style.zIndex === '') {
+              // Place this dialog over uppermost dialog if not controlled in CSS or JS
+              var below = queryAll(this.nodeName).filter(function (el) {
+                return el !== nextBack && !_this.contains(el) && isVisible(el);
+              });
+              zIndex = Math.min(Math.max.apply(Math, [1].concat(_toConsumableArray(below.map(getZIndex)))), 2000000000); // Avoid overflowing z-index. See techjunkie.com/maximum-z-index-value
+
+              if (nextBack) nextBack.style.zIndex = zIndex + 1;
+              this.style.zIndex = zIndex + 2;
+            }
+
             this._focus = document.activeElement || document.body; // Remember last focused element
@@ -339,2 +348,3 @@
 
+
           if (attr === 'hidden' && next !== prev) dispatchEvent(this, 'dialog.toggle');
@@ -354,4 +364,2 @@ }
             if (action === 'close' && closest(event.target, this.nodeName) === this) this.close();else if (action === this.id) {
-              button.setAttribute(this._from, ''); // iOS remember button
-
               this.show();
@@ -481,3 +489,3 @@ }
 
-  var version = "3.0.5";
+  var version = "3.0.6";
 
@@ -484,0 +492,0 @@ /**

core-dialog.min.js

@@ -1,3 +0,3 @@
-/*! @nrk/core-dialog v3.0.5 - Copyright (c) 2017-2020 NRK */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).coreDialog=e()}(this,function(){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function u(t){return(u=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function c(t,e){return(c=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function a(t,e,n){return(a=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}()?Reflect.construct:function(t,e,n){var i=[null];i.push.apply(i,e);var o=new(Function.bind.apply(t,i));return n&&c(o,n.prototype),o}).apply(null,arguments)}function s(t){var i="function"==typeof Map?new Map:void 0;return(s=function(t){if(null===t||(e=t,-1===Function.toString.call(e).indexOf("[native code]")))return t;var e;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==i){if(i.has(t))return i.get(t);i.set(t,n)}function n(){return a(t,arguments,u(this).constructor)}return n.prototype=Object.create(t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),c(n,t)})(t)}function l(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function d(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var t="undefined"!=typeof window;t&&/(android)/i.test(navigator.userAgent),t&&/iPad|iPhone|iPod/.test(String(navigator.platform));t||global.HTMLElement||(global.HTMLElement=function(){return function t(){o(this,t)}}());var e,n,f=(e="undefined"==typeof window?{}:window.Element.prototype,n=e.matches||e.msMatchesSelector||e.webkitMatchesSelector,e.closest?function(t,e){return t.closest(e)}:function(t,e){for(t.correspondingUseElement&&(t=t.correspondingUseElement);t;t=t.parentElement)if(n.call(t,e))return t;return null});function h(t,e,n){var i=2<arguments.length&&void 0!==n?n:!this.hasAttribute(e);return!i===t.hasAttribute(e)&&t[i?"setAttribute":"removeAttribute"](e,""),i}function p(t,e){var n=1<arguments.length&&void 0!==e?e:document;if(t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(n.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}var y="[tabindex],a,button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled])";function b(t,e){var n=t.nextElementSibling;return!(!t.parentNode||"false"===e)&&(e&&"true"!==e?document.getElementById(e)||!1:n&&"BACKDROP"===n.nodeName?n:(t._autoBackdrop=document.createElement("backdrop"),t.insertAdjacentElement("afterend",t._autoBackdrop)))}function m(t){return t.clientWidth&&t.clientHeight&&"hidden"!==window.getComputedStyle(t).getPropertyValue("visibility")}function v(t){for(var e=t,n=1;e;e=e.offsetParent)n+=Number(window.getComputedStyle(e).getPropertyValue("z-index"))||0;return n}function g(t){setTimeout(function(){try{t.focus()}catch(t){}})}function k(e){if(!e.contains(document.activeElement)&&m(e)){var t=p("[autofocus]",e).concat(p(y,e)).filter(m)[0];try{t.focus()}catch(t){console.warn(e,'is initialized without focusable elements. Please add [tabindex="-1"] the main element (for instance a <h1>)')}}}return function(){function t(){return o(this,t),l(this,u(t).apply(this,arguments))}var e,n,i;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&c(t,e)}(t,s(HTMLElement)),e=t,i=[{key:"observedAttributes",get:function(){return["hidden","backdrop"]}}],(n=[{key:"connectedCallback",value:function(){this._focus=!0,this._autoBackdrop=null,this.attributeChangedCallback(),this.addEventListener("transitionend",this),document.addEventListener("keydown",this),document.addEventListener("click",this)}},{key:"disconnectedCallback",value:function(){g(this._focus),this._autoBackdrop&&this._autoBackdrop.parentNode.removeChild(this._autoBackdrop),this._focus=this._autoBackdrop=null,this.removeEventListener("transitionend",this),document.removeEventListener("keydown",this),document.removeEventListener("click",this)}},{key:"attributeChangedCallback",value:function(t,e,n){var i=this;if(this._focus){var o="backdrop"===t&&b(this,e),r=this.backdrop;if(this.className=this.className,this.setAttribute("role","dialog"),this.setAttribute("aria-modal",Boolean(r)),o&&o.setAttribute("hidden",""),r&&h(r,"hidden",this.hidden),this.hidden)g(this._focus);else{var u=p("body *").filter(function(t){return t!==r&&!i.contains(t)&&m(t)}),c=Math.min(Math.max.apply(Math,[1].concat(d(u.map(v)))),2e9);r&&(r.style.zIndex=c+1),this.style.zIndex=c+2,this._focus=document.activeElement||document.body,setTimeout(function(){return k(i)})}"hidden"===t&&n!==e&&function(t,e,n){var i,o=2<arguments.length&&void 0!==n?n:{},r="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[r])return;t[r]=!0,"function"==typeof window.CustomEvent?i=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:o}):(i=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,o);var u=t.dispatchEvent(i);t[r]=null}(this,"dialog.toggle")}}},{key:"handleEvent",value:function(t){var e,n,i,o;if(!t.defaultPrevented)if("transitionend"!==t.type||t.target!==this||this.hidden){if("click"===t.type){if(t.target===this.backdrop&&!this.strict)return this.close();var r=f(t.target,"button"),u=r&&r.getAttribute("for");"close"===u&&f(t.target,this.nodeName)===this?this.close():u===this.id&&(r.setAttribute(this._from,""),this.show())}else if("keydown"===t.type&&(9===t.keyCode||27===t.keyCode)&&!this.hidden){if(p("".concat(this.nodeName,":not([hidden])")).sort(function(t,e){return v(t)-v(e)}).pop()!==this)return;9===t.keyCode&&(n=t,i=p(y,e=this).filter(m),o=i[n.shiftKey?0:i.length-1],n.target!==o&&e.contains(n.target)||(n.preventDefault(),i[n.shiftKey?i.length-1:0].focus())),27!==t.keyCode||this.strict||(t.preventDefault(),this.close())}}else k(this)}},{key:"close",value:function(){this.hidden=!0}},{key:"show",value:function(){this.hidden=!1}},{key:"open",get:function(){return!this.hidden},set:function(t){this.hidden=!t}},{key:"strict",get:function(){return this.hasAttribute("strict")},set:function(t){h(this,"strict",t)}},{key:"hidden",get:function(){return this.hasAttribute("hidden")},set:function(t){h(this,"hidden",t)}},{key:"backdrop",get:function(){return b(this,this.getAttribute("backdrop"))},set:function(t){this.setAttribute("backdrop",t||"false")}}])&&r(e.prototype,n),i&&r(e,i),t}()}),window.customElements.define("core-dialog",coreDialog);
+/*! @nrk/core-dialog v3.0.6 - Copyright (c) 2017-2020 NRK */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).coreDialog=e()}(this,function(){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function u(t){return(u=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function c(t,e){return(c=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function a(t,e,n){return(a=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}()?Reflect.construct:function(t,e,n){var i=[null];i.push.apply(i,e);var o=new(Function.bind.apply(t,i));return n&&c(o,n.prototype),o}).apply(null,arguments)}function s(t){var i="function"==typeof Map?new Map:void 0;return(s=function(t){if(null===t||(e=t,-1===Function.toString.call(e).indexOf("[native code]")))return t;var e;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==i){if(i.has(t))return i.get(t);i.set(t,n)}function n(){return a(t,arguments,u(this).constructor)}return n.prototype=Object.create(t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),c(n,t)})(t)}function l(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function d(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var t="undefined"!=typeof window;t&&/(android)/i.test(navigator.userAgent),t&&/iPad|iPhone|iPod/.test(String(navigator.platform));t||global.HTMLElement||(global.HTMLElement=function(){return function t(){o(this,t)}}());var e,n,f=(e="undefined"==typeof window?{}:window.Element.prototype,n=e.matches||e.msMatchesSelector||e.webkitMatchesSelector,e.closest?function(t,e){return t.closest(e)}:function(t,e){for(t.correspondingUseElement&&(t=t.correspondingUseElement);t;t=t.parentElement)if(n.call(t,e))return t;return null});function h(t,e,n){var i=2<arguments.length&&void 0!==n?n:!this.hasAttribute(e);return!i===t.hasAttribute(e)&&t[i?"setAttribute":"removeAttribute"](e,""),i}function p(t,e){var n=1<arguments.length&&void 0!==e?e:document;if(t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(n.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}var y="[tabindex],a,button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled])";function b(t,e){var n=t.nextElementSibling;return!(!t.parentNode||"false"===e)&&(e&&"true"!==e?document.getElementById(e)||!1:n&&"BACKDROP"===n.nodeName?n:(t._autoBackdrop=document.createElement("backdrop"),t.insertAdjacentElement("afterend",t._autoBackdrop)))}function m(t){return t.clientWidth&&t.clientHeight&&"hidden"!==window.getComputedStyle(t).getPropertyValue("visibility")}function v(t){for(var e=t,n=1;e;e=e.offsetParent)n+=Number(window.getComputedStyle(e).getPropertyValue("z-index"))||0;return n}function g(t){setTimeout(function(){try{t.focus()}catch(t){}})}function k(e){if(!e.contains(document.activeElement)&&m(e)){var t=p("[autofocus]",e).concat(p(y,e)).filter(m)[0];try{t.focus()}catch(t){console.warn(e,'is initialized without focusable elements. Please add [tabindex="-1"] the main element (for instance a <h1>)')}}}return function(){function t(){return o(this,t),l(this,u(t).apply(this,arguments))}var e,n,i;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&c(t,e)}(t,s(HTMLElement)),e=t,i=[{key:"observedAttributes",get:function(){return["hidden","backdrop"]}}],(n=[{key:"connectedCallback",value:function(){this._focus=!0,this._autoBackdrop=null,this.attributeChangedCallback(),this.addEventListener("transitionend",this),document.addEventListener("keydown",this),document.addEventListener("click",this)}},{key:"disconnectedCallback",value:function(){g(this._focus),this._autoBackdrop&&this._autoBackdrop.parentNode.removeChild(this._autoBackdrop),this._focus=this._autoBackdrop=null,this.removeEventListener("transitionend",this),document.removeEventListener("keydown",this),document.removeEventListener("click",this)}},{key:"attributeChangedCallback",value:function(t,e,n){var i=this;if(this._focus){var o="backdrop"===t&&b(this,e),r=this.backdrop;if(this.className=this.className,this.setAttribute("role","dialog"),this.setAttribute("aria-modal",Boolean(r)),o&&o.setAttribute("hidden",""),r&&h(r,"hidden",this.hidden),this.hidden)g(this._focus);else{var u=window.getComputedStyle(this).getPropertyValue("z-index");if("auto"===u&&""===this.style.zIndex){var c=p(this.nodeName).filter(function(t){return t!==r&&!i.contains(t)&&m(t)});u=Math.min(Math.max.apply(Math,[1].concat(d(c.map(v)))),2e9),r&&(r.style.zIndex=u+1),this.style.zIndex=u+2}this._focus=document.activeElement||document.body,setTimeout(function(){return k(i)})}"hidden"===t&&n!==e&&function(t,e,n){var i,o=2<arguments.length&&void 0!==n?n:{},r="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[r])return;t[r]=!0,"function"==typeof window.CustomEvent?i=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:o}):(i=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,o);var u=t.dispatchEvent(i);t[r]=null}(this,"dialog.toggle")}}},{key:"handleEvent",value:function(t){var e,n,i,o;if(!t.defaultPrevented)if("transitionend"!==t.type||t.target!==this||this.hidden){if("click"===t.type){if(t.target===this.backdrop&&!this.strict)return this.close();var r=f(t.target,"button"),u=r&&r.getAttribute("for");"close"===u&&f(t.target,this.nodeName)===this?this.close():u===this.id&&this.show()}else if("keydown"===t.type&&(9===t.keyCode||27===t.keyCode)&&!this.hidden){if(p("".concat(this.nodeName,":not([hidden])")).sort(function(t,e){return v(t)-v(e)}).pop()!==this)return;9===t.keyCode&&(n=t,i=p(y,e=this).filter(m),o=i[n.shiftKey?0:i.length-1],n.target!==o&&e.contains(n.target)||(n.preventDefault(),i[n.shiftKey?i.length-1:0].focus())),27!==t.keyCode||this.strict||(t.preventDefault(),this.close())}}else k(this)}},{key:"close",value:function(){this.hidden=!0}},{key:"show",value:function(){this.hidden=!1}},{key:"open",get:function(){return!this.hidden},set:function(t){this.hidden=!t}},{key:"strict",get:function(){return this.hasAttribute("strict")},set:function(t){h(this,"strict",t)}},{key:"hidden",get:function(){return this.hasAttribute("hidden")},set:function(t){h(this,"hidden",t)}},{key:"backdrop",get:function(){return b(this,this.getAttribute("backdrop"))},set:function(t){this.setAttribute("backdrop",t||"false")}}])&&r(e.prototype,n),i&&r(e,i),t}()}),window.customElements.define("core-dialog",coreDialog);
 //# sourceMappingURL=core-dialog.min.js.map

jsx.js

@@ -320,10 +320,19 @@ 'use strict';
         if (nextBack) toggleAttribute(nextBack, 'hidden', this.hidden);
-        if (this.hidden) reFocus(this._focus);else {
-          var below = queryAll('body *').filter(function (el) {
-            return el !== nextBack && !_this.contains(el) && isVisible(el);
-          });
-          var zIndex = Math.min(Math.max.apply(Math, [1].concat(_toConsumableArray(below.map(getZIndex)))), 2000000000); // Avoid overflowing z-index. See techjunkie.com/maximum-z-index-value
 
-          if (nextBack) nextBack.style.zIndex = zIndex + 1;
-          this.style.zIndex = zIndex + 2;
+        if (this.hidden) {
+          reFocus(this._focus);
+        } else {
+          var zIndex = window.getComputedStyle(this).getPropertyValue('z-index');
+
+          if (zIndex === 'auto' && this.style.zIndex === '') {
+            // Place this dialog over uppermost dialog if not controlled in CSS or JS
+            var below = queryAll(this.nodeName).filter(function (el) {
+              return el !== nextBack && !_this.contains(el) && isVisible(el);
+            });
+            zIndex = Math.min(Math.max.apply(Math, [1].concat(_toConsumableArray(below.map(getZIndex)))), 2000000000); // Avoid overflowing z-index. See techjunkie.com/maximum-z-index-value
+
+            if (nextBack) nextBack.style.zIndex = zIndex + 1;
+            this.style.zIndex = zIndex + 2;
+          }
+
           this._focus = document.activeElement || document.body; // Remember last focused element
@@ -336,2 +345,3 @@
 
+
         if (attr === 'hidden' && next !== prev) dispatchEvent(this, 'dialog.toggle');
@@ -351,4 +361,2 @@ }
           if (action === 'close' && closest(event.target, this.nodeName) === this) this.close();else if (action === this.id) {
-            button.setAttribute(this._from, ''); // iOS remember button
-
             this.show();
@@ -478,3 +486,3 @@ }
 
-var version = "3.0.5";
+var version = "3.0.6";
 
@@ -481,0 +489,0 @@ /**

package.json

@@ -5,3 +5,3 @@ {
   "author": "NRK <[e-mail]> (https://www.nrk.no/)",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "license": "MIT",
@@ -8,0 +8,0 @@ "main": "core-dialog.cjs.js",

readme.md

@@ -208,4 +208,5 @@ # Core Dialog
 myDialog.hidden = false // Open dialog
-myDialog.strict = false // Set strict mode
+myDialog.strict = false // Set strict mode. If set, prevents the dialog from closing on ESC-key and on backdrop click
 myDialog.backdrop = false | true | 'my-drop' // Set boolean to enable/disable backdrop or string ID to point to custom backdrop element
+myDialog.style.zIndex = '9' // Set z-index manually. If unset, z-index is automatically set for both dialog and backdrop element. Default unset.
 
@@ -251,8 +252,9 @@ // Methods
 
-Though not strictly required, the `<button>` opening a dialog should be placed directly before the `<core-dialog>` itself. This eases the mental model for screen reader users.
+Though not strictly required, the `<button>` opening a dialog should be placed directly before the `<core-dialog>` itself. This eases the mental model for screen reader users. Othewise, use `<button for="my-dialog-id"></button>`.
 
 ### Backdrop
 
-`core-dialog` automatically creates a `<backdrop>` element as next adjacent sibling if needed. If the `backdrop` attribute is set to an `id` (somehting else than `true|false`), the element with the corresponding ID will be used as backdrop. Note that a backdrop is needed to enable click-outside-to-close. Custom backdrop example:
-```
+`core-dialog` automatically creates a `<backdrop>` element as next adjacent sibling if needed. If the `backdrop` attribute is set to an `id` (something else than `true|false`), the element with the corresponding ID will be used as backdrop. Note that a backdrop is needed to enable click-outside-to-close. Custom backdrop example:
+
+```html
 <core-dialog backdrop="my-backdrop"></core-dialog>
@@ -262,3 +264,23 @@ <div id="my-backdrop"></div>
 
+## Stacking
 
+To manually control z-index of dialogs (and their corresponding backdrop element, set z-index from either HTML, CSS or JS. When set, the dialog will not try to place itself automatically over the topmost dialog and you are responsible for stacking order.
+
+For example:
+
+```html
+<style>
+  .my-dialog { z-index: 100 }
+  .my-backdrop { z-index: 90 }
+</style>
+
+<script>
+  myDialog.style.zIndex = 100
+  myBackdrop.style.zIndex = 90
+</script>
+
+<core-dialog style="z-index: 100" hidden>...</core-dialog>
+<backdrop style="z-index: 90" hidden>...</backdrop>
+```
+
 ## Events
@@ -265,0 +287,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

156234

increased by1.48%

Lines of code

2037

increased by0.89%

Number of lines in readme file

306

increased by7.75%

No dependency changes