@dialpad/dialtone-vue 2.54.0 → 2.54.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [2.54.2](https://github.com/dialpad/dialtone-vue/compare/v2.54.1...v2.54.2) (2023-01-26)
+
+
+### Bug Fixes
+
+* **Popover:** fix prevent scroll logic ([#722](https://github.com/dialpad/dialtone-vue/issues/722)) ([7a1ed16](https://github.com/dialpad/dialtone-vue/commit/7a1ed16d0008a3f2c3a640fe5ac3c68b285d8ab5))
+
+## [2.54.1](https://github.com/dialpad/dialtone-vue/compare/v2.54.0...v2.54.1) (2023-01-26)
+
+
+### Bug Fixes
+
+* **Modal:** fix modal focusFirstElement method ([#720](https://github.com/dialpad/dialtone-vue/issues/720)) ([0bc9205](https://github.com/dialpad/dialtone-vue/commit/0bc9205b42787c7328925175348f0dd9bc39b122))
+
 # [2.54.0](https://github.com/dialpad/dialtone-vue/compare/v2.53.1...v2.54.0) (2023-01-26)
 
 

package/dist/dialtone-vue.common.js

@@ -4270,7 +4270,7 @@ const focusableElementsList = `button,[href],input,select,textarea,details,[tabi
      *  will default to the root node of the vue component
      */
     async focusFirstElement(el) {
-      const elToFocus = this.getFirstFocusableElement(el);
+      const elToFocus = await this.getFirstFocusableElement(el);
       elToFocus === null || elToFocus === void 0 ? void 0 : elToFocus.focus({
         preventScroll: true
       });
@@ -7990,8 +7990,8 @@ return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,
 var dropdownvue_type_template_id_5944f754_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=64e7122e&
-var popovervue_type_template_id_64e7122e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=fec53cb4&
+var popovervue_type_template_id_fec53cb4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
           'aria-expanded': _vm.isOpen.toString(),
           'aria-controls': _vm.id,
           'aria-haspopup': _vm.role,
@@ -8002,7 +8002,7 @@ var popovervue_type_template_id_64e7122e_render = function () {var _vm=this;var
           'd-popover__content',
           _vm.POPOVER_PADDING_CLASSES[_vm.padding],
           _vm.contentClass ],attrs:{"data-qa":"dt-popover-content"}},[_vm._t("content",null,{"close":_vm.closePopover})],2),(_vm.$slots.footerContent)?_c('popover-header-footer',{ref:"popover__footer",class:_vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],attrs:{"type":"footer","content-class":_vm.footerClass},scopedSlots:_vm._u([{key:"content",fn:function(){return [_vm._t("footerContent",null,{"close":_vm.closePopover})]},proxy:true}],null,true)}):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.closePopover}}):_vm._e()],1)],1)],1)}
-var popovervue_type_template_id_64e7122e_staticRenderFns = []
+var popovervue_type_template_id_fec53cb4_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -13413,9 +13413,11 @@ var popover_header_footer_component = normalizeComponent(
     isOpen(isOpen, isPrev) {
       if (isOpen) {
         this.initTippyInstance();
+        this.preventScrolling();
       } else if (!isOpen && isPrev !== isOpen) {
         this.removeEventListeners();
         this.tip.hide();
+        this.enableScrolling();
       }
     }
 
@@ -13516,10 +13518,7 @@ var popover_header_footer_component = normalizeComponent(
     },
 
     addEventListeners() {
-      window.addEventListener('dt-popover-close', this.closePopover);
-      window.addEventListener('wheel', this.preventScrolling, {
-        passive: false
-      }); // align popover content width when contentWidth is 'anchor'
+      window.addEventListener('dt-popover-close', this.closePopover); // align popover content width when contentWidth is 'anchor'
 
       if (this.contentWidth === 'anchor') {
         window.addEventListener('resize', this.onResize);
@@ -13528,9 +13527,6 @@ var popover_header_footer_component = normalizeComponent(
 
     removeEventListeners() {
       window.removeEventListener('dt-popover-close', this.closePopover);
-      window.removeEventListener('wheel', this.preventScrolling, {
-        passive: false
-      });
 
       if (this.contentWidth === 'anchor') {
         window.removeEventListener('resize', this.onResize);
@@ -13542,11 +13538,40 @@ var popover_header_footer_component = normalizeComponent(
     },
 
     /*
-    * Prevents scrolling only when the popover is set to modal
+    * Prevents scrolling outside of the currently opened modal popover by:
+    *   - when anchor is not within another popover: setting the body to overflow: hidden
+    *   - when anchor is within another popover: set the popover dialog container to it's non-modal z-index
+    *     since it is no longer the active modal. This puts it underneath the overlay and prevents scrolling.
     **/
-    preventScrolling(e) {
-      if (!this.modal || this.$refs.content.$el.contains(e.target)) return;
-      e.preventDefault();
+    async preventScrolling() {
+      await this.$nextTick();
+
+      if (this.modal) {
+        const element = this.anchorEl.closest('body, .tippy-box');
+
+        if (element.tagName.toLowerCase() === 'body') {
+          element.classList.add('d-of-hidden');
+        } else {
+          element.classList.add('d-zi-popover');
+        }
+      }
+    },
+
+    /*
+    * Resets the prevent scrolling properties set in preventScrolling() back to normal.
+    **/
+    async enableScrolling() {
+      await this.$nextTick();
+
+      if (this.modal) {
+        const element = this.anchorEl.closest('body, .tippy-box');
+
+        if (element.tagName.toLowerCase() === 'body') {
+          element.classList.remove('d-of-hidden');
+        } else {
+          element.classList.remove('d-zi-popover');
+        }
+      }
     },
 
     removeReferences() {
@@ -13713,8 +13738,8 @@ var popovervue_type_style_index_0_lang_less_ = __webpack_require__(230);
 
 var popover_component = normalizeComponent(
   popover_popovervue_type_script_lang_js_,
-  popovervue_type_template_id_64e7122e_render,
-  popovervue_type_template_id_64e7122e_staticRenderFns,
+  popovervue_type_template_id_fec53cb4_render,
+  popovervue_type_template_id_fec53cb4_staticRenderFns,
   false,
   null,
   null,

package/dist/dialtone-vue.umd.js

@@ -4280,7 +4280,7 @@ const focusableElementsList = `button,[href],input,select,textarea,details,[tabi
      *  will default to the root node of the vue component
      */
     async focusFirstElement(el) {
-      const elToFocus = this.getFirstFocusableElement(el);
+      const elToFocus = await this.getFirstFocusableElement(el);
       elToFocus === null || elToFocus === void 0 ? void 0 : elToFocus.focus({
         preventScroll: true
       });
@@ -8000,8 +8000,8 @@ return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,
 var dropdownvue_type_template_id_5944f754_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=64e7122e&
-var popovervue_type_template_id_64e7122e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=fec53cb4&
+var popovervue_type_template_id_fec53cb4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
           'aria-expanded': _vm.isOpen.toString(),
           'aria-controls': _vm.id,
           'aria-haspopup': _vm.role,
@@ -8012,7 +8012,7 @@ var popovervue_type_template_id_64e7122e_render = function () {var _vm=this;var
           'd-popover__content',
           _vm.POPOVER_PADDING_CLASSES[_vm.padding],
           _vm.contentClass ],attrs:{"data-qa":"dt-popover-content"}},[_vm._t("content",null,{"close":_vm.closePopover})],2),(_vm.$slots.footerContent)?_c('popover-header-footer',{ref:"popover__footer",class:_vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],attrs:{"type":"footer","content-class":_vm.footerClass},scopedSlots:_vm._u([{key:"content",fn:function(){return [_vm._t("footerContent",null,{"close":_vm.closePopover})]},proxy:true}],null,true)}):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.closePopover}}):_vm._e()],1)],1)],1)}
-var popovervue_type_template_id_64e7122e_staticRenderFns = []
+var popovervue_type_template_id_fec53cb4_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -13423,9 +13423,11 @@ var popover_header_footer_component = normalizeComponent(
     isOpen(isOpen, isPrev) {
       if (isOpen) {
         this.initTippyInstance();
+        this.preventScrolling();
       } else if (!isOpen && isPrev !== isOpen) {
         this.removeEventListeners();
         this.tip.hide();
+        this.enableScrolling();
       }
     }
 
@@ -13526,10 +13528,7 @@ var popover_header_footer_component = normalizeComponent(
     },
 
     addEventListeners() {
-      window.addEventListener('dt-popover-close', this.closePopover);
-      window.addEventListener('wheel', this.preventScrolling, {
-        passive: false
-      }); // align popover content width when contentWidth is 'anchor'
+      window.addEventListener('dt-popover-close', this.closePopover); // align popover content width when contentWidth is 'anchor'
 
       if (this.contentWidth === 'anchor') {
         window.addEventListener('resize', this.onResize);
@@ -13538,9 +13537,6 @@ var popover_header_footer_component = normalizeComponent(
 
     removeEventListeners() {
       window.removeEventListener('dt-popover-close', this.closePopover);
-      window.removeEventListener('wheel', this.preventScrolling, {
-        passive: false
-      });
 
       if (this.contentWidth === 'anchor') {
         window.removeEventListener('resize', this.onResize);
@@ -13552,11 +13548,40 @@ var popover_header_footer_component = normalizeComponent(
     },
 
     /*
-    * Prevents scrolling only when the popover is set to modal
+    * Prevents scrolling outside of the currently opened modal popover by:
+    *   - when anchor is not within another popover: setting the body to overflow: hidden
+    *   - when anchor is within another popover: set the popover dialog container to it's non-modal z-index
+    *     since it is no longer the active modal. This puts it underneath the overlay and prevents scrolling.
     **/
-    preventScrolling(e) {
-      if (!this.modal || this.$refs.content.$el.contains(e.target)) return;
-      e.preventDefault();
+    async preventScrolling() {
+      await this.$nextTick();
+
+      if (this.modal) {
+        const element = this.anchorEl.closest('body, .tippy-box');
+
+        if (element.tagName.toLowerCase() === 'body') {
+          element.classList.add('d-of-hidden');
+        } else {
+          element.classList.add('d-zi-popover');
+        }
+      }
+    },
+
+    /*
+    * Resets the prevent scrolling properties set in preventScrolling() back to normal.
+    **/
+    async enableScrolling() {
+      await this.$nextTick();
+
+      if (this.modal) {
+        const element = this.anchorEl.closest('body, .tippy-box');
+
+        if (element.tagName.toLowerCase() === 'body') {
+          element.classList.remove('d-of-hidden');
+        } else {
+          element.classList.remove('d-zi-popover');
+        }
+      }
     },
 
     removeReferences() {
@@ -13723,8 +13748,8 @@ var popovervue_type_style_index_0_lang_less_ = __webpack_require__(532);
 
 var popover_component = normalizeComponent(
   popover_popovervue_type_script_lang_js_,
-  popovervue_type_template_id_64e7122e_render,
-  popovervue_type_template_id_64e7122e_staticRenderFns,
+  popovervue_type_template_id_fec53cb4_render,
+  popovervue_type_template_id_fec53cb4_staticRenderFns,
   false,
   null,
   null,