@dialpad/dialtone-vue 2.68.0 → 2.69.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [2.69.0](https://github.com/dialpad/dialtone-vue/compare/v2.68.0...v2.69.0) (2023-03-16)
+
+
+### Bug Fixes
+
+* dialtone-icons version ([#823](https://github.com/dialpad/dialtone-vue/issues/823)) ([0cde468](https://github.com/dialpad/dialtone-vue/commit/0cde468de8db4c9eeb9f44653e271f1b5d9b78fd))
+* popover fallback placements ([#821](https://github.com/dialpad/dialtone-vue/issues/821)) ([a18ac48](https://github.com/dialpad/dialtone-vue/commit/a18ac482c84c9d73fbee695d6a89c3051c8b28cb))
+
+
+### Features
+
+* **Leftbar Contact Row:** add hasCallButton ([#826](https://github.com/dialpad/dialtone-vue/issues/826)) ([000cd5a](https://github.com/dialpad/dialtone-vue/commit/000cd5a272a0a0fbe53984311b8c6351acdd6c5d))
+
 # [2.68.0](https://github.com/dialpad/dialtone-vue/compare/v2.67.0...v2.68.0) (2023-03-15)
 
 

package/dist/dialtone-vue.common.js

@@ -2603,6 +2603,25 @@ function debounce(func) {
   clearTimeout(TIMER);
   TIMER = setTimeout(func, timeout);
 }
+/**
+ * Checks if the element is out of the viewport
+ * https://gomakethings.com/how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js/
+ * @param  {HTMLElement} element The element to check
+ * @return {Object} A set of booleans for each side of the element
+ */
+
+function isOutOfViewPort(element) {
+  const bounding = element.getBoundingClientRect();
+  const isOut = {
+    top: bounding.top < 0,
+    left: bounding.left < 0,
+    bottom: bounding.bottom > (window.innerHeight || document.documentElement.clientHeight),
+    right: bounding.right > (window.innerWidth || document.documentElement.clientWidth)
+  };
+  isOut.any = Object.values(isOut).some(val => val);
+  isOut.all = Object.values(isOut).every(val => val);
+  return isOut;
+}
 /* harmony default export */ const utils = ({
   getUniqueString,
   getRandomElement,
@@ -2613,7 +2632,8 @@ function debounce(func) {
   htmlFragment,
   flushPromises,
   kebabCaseToPascalCase,
-  debounce
+  debounce,
+  isOutOfViewPort
 });
 ;// 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/presence/presence.vue?vue&type=template&id=77957bb3&
 var presencevue_type_template_id_77957bb3_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-presence",attrs:{"data-qa":"dt-presence","role":"status","aria-live":_vm.$attrs.ariaLive || 'off'}},[(_vm.srText)?_c('span',{staticClass:"sr-only",attrs:{"data-qa":"dt-presence-sr-text"}},[_vm._v(_vm._s(_vm.srText)+" ")]):_vm._e(),_c('div',{staticClass:"d-presence__inner",class:{
@@ -8190,8 +8210,8 @@ return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,
 var dropdownvue_type_template_id_359f1c8b_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=cdba9054&
-var popovervue_type_template_id_cdba9054_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=683dbc64&
+var popovervue_type_template_id_683dbc64_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,
@@ -8202,7 +8222,7 @@ var popovervue_type_template_id_cdba9054_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_cdba9054_staticRenderFns = []
+var popovervue_type_template_id_683dbc64_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -13617,6 +13637,7 @@ var popover_header_footer_component = normalizeComponent(
     isOpen(isOpen, isPrev) {
       if (isOpen) {
         this.initTippyInstance();
+        this.tip.show();
       } else if (!isOpen && isPrev !== isOpen) {
         this.removeEventListeners();
         this.tip.hide();
@@ -13632,16 +13653,14 @@ var popover_header_footer_component = normalizeComponent(
 
     if (this.isOpen) {
       this.initTippyInstance();
+      this.tip.show();
     } // rootMargin here must be greater than the margin of the height we are setting in calculatedMaxHeight which
     // currently is var(--space-300) (4px). If not the intersectionObserver will continually trigger in an infinite
     // loop.
     // threshold 1.0 makes this trigger every time the dialog "touches" the edge of the viewport.
 
 
-    this.intersectionObserver = new IntersectionObserver(this.hasIntersectedViewport, {
-      rootMargin: '-8px',
-      threshold: 1.0
-    });
+    this.intersectionObserver = new IntersectionObserver(this.hasIntersectedViewport);
     this.intersectionObserver.observe(this.popoverContentEl);
   },
 
@@ -13659,8 +13678,12 @@ var popover_header_footer_component = normalizeComponent(
    ******************/
   methods: {
     hasIntersectedViewport(entries) {
-      const dialog = entries === null || entries === void 0 ? void 0 : entries[0];
-      this.isOutsideViewport = !(dialog !== null && dialog !== void 0 && dialog.isIntersecting);
+      var _entries$;
+
+      const dialog = entries === null || entries === void 0 ? void 0 : (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.target;
+      if (!dialog) return;
+      const isOut = isOutOfViewPort(dialog);
+      this.isOutsideViewport = isOut.bottom || isOut.top;
     },
 
     popperOptions() {
@@ -13771,6 +13794,9 @@ var popover_header_footer_component = normalizeComponent(
 
         if (element.tagName.toLowerCase() === 'body') {
           element.classList.add('d-of-hidden');
+          this.tip.setProps({
+            offset: this.offset
+          });
         } else {
           element.classList.add('d-zi-popover');
         }
@@ -13788,6 +13814,9 @@ var popover_header_footer_component = normalizeComponent(
 
         if (element.tagName.toLowerCase() === 'body') {
           element.classList.remove('d-of-hidden');
+          this.tip.setProps({
+            offset: this.offset
+          });
         } else {
           element.classList.remove('d-zi-popover');
         }
@@ -13808,6 +13837,8 @@ var popover_header_footer_component = normalizeComponent(
       if (this.contentWidth === null) {
         this.popoverContentEl.style.width = 'auto';
       }
+
+      this.addEventListeners();
     },
 
     async onLeaveTransitionComplete() {
@@ -13820,7 +13851,7 @@ var popover_header_footer_component = normalizeComponent(
       }
 
       (_this$tip8 = this.tip) === null || _this$tip8 === void 0 ? void 0 : _this$tip8.unmount();
-      this.enableScrolling();
+      await this.enableScrolling();
       this.$emit('opened', false);
 
       if (this.open !== null) {
@@ -13830,7 +13861,7 @@ var popover_header_footer_component = normalizeComponent(
 
     async onEnterTransitionComplete() {
       this.focusInitialElement();
-      this.preventScrolling(); // await next tick in case the user wants to change focus themselves.
+      await this.preventScrolling(); // await next tick in case the user wants to change focus themselves.
 
       await this.$nextTick();
       this.$emit('opened', true, this.$refs.popover__content);
@@ -13936,11 +13967,6 @@ var popover_header_footer_component = normalizeComponent(
         onClickOutside: this.onClickOutside,
         onShow: this.onShow
       });
-      this.tip.setProps({
-        zIndex: this.modal ? 650 : this.calculateAnchorZindex()
-      });
-      this.tip.show();
-      this.addEventListeners();
     }
 
   }
@@ -13962,8 +13988,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_cdba9054_render,
-  popovervue_type_template_id_cdba9054_staticRenderFns,
+  popovervue_type_template_id_683dbc64_render,
+  popovervue_type_template_id_683dbc64_staticRenderFns,
   false,
   null,
   null,
@@ -24599,9 +24625,9 @@ var group_row_component = normalizeComponent(
 /* harmony default export */ const group_row = (group_row_component.exports);
 ;// CONCATENATED MODULE: ./recipes/leftbar/group_row/index.js
 
-;// 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!./recipes/leftbar/contact_row/contact_row.vue?vue&type=template&id=6a63c490&
-var contact_rowvue_type_template_id_6a63c490_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-general-row',_vm._g({attrs:{"unread-count":_vm.unreadCount,"description":(_vm.name + " " + _vm.presenceText + " " + _vm.userStatus),"has-unreads":_vm.hasUnreads,"selected":_vm.selected,"has-call-button":true,"muted":_vm.muted,"is-typing":_vm.isTyping,"call-button-tooltip":_vm.callButtonTooltip,"unread-count-tooltip":_vm.unreadCountTooltip},scopedSlots:_vm._u([{key:"left",fn:function(){return [_c('dt-avatar',{attrs:{"size":"sm","seed":_vm.avatarSeed,"presence":_vm.avatarPresence}},[(_vm.avatarSrc)?_c('img',{attrs:{"data-qa":"dt-avatar-image","src":_vm.avatarSrc,"alt":_vm.name}}):(_vm.noInitials)?[_c('dt-icon',{attrs:{"name":"user","size":"200"}})]:[_vm._v(" "+_vm._s(_vm.avatarInitial)+" ")]],2)]},proxy:true},{key:"label",fn:function(){return [_c('dt-emoji-text-wrapper',{staticClass:"dt-leftbar-row__description",attrs:{"data-qa":"dt-leftbar-row-description","size":"200"}},[_vm._v(" "+_vm._s(_vm.name)+" ")]),_c('div',{staticClass:"dt-leftbar-row__status"},[(_vm.presenceText)?_c('span',{class:['dt-leftbar-row__meta-context', _vm.presenceColorClass],attrs:{"data-qa":"dt-leftbar-row-presence-text"}},[_vm._v(" "+_vm._s(_vm.presenceText)+" ")]):_vm._e(),(_vm.userStatus)?_c('dt-emoji-text-wrapper',{staticClass:"dt-leftbar-row__meta-custom",attrs:{"size":"100","element-type":"span","data-qa":"dt-leftbar-row-user-status"}},[_vm._v(" "+_vm._s(_vm.userStatus)+" ")]):_vm._e()],1)]},proxy:true}])},_vm.$listeners))}
-var contact_rowvue_type_template_id_6a63c490_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!./recipes/leftbar/contact_row/contact_row.vue?vue&type=template&id=5d3cfbea&
+var contact_rowvue_type_template_id_5d3cfbea_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-general-row',_vm._g({attrs:{"unread-count":_vm.unreadCount,"description":(_vm.name + " " + _vm.presenceText + " " + _vm.userStatus),"has-unreads":_vm.hasUnreads,"selected":_vm.selected,"has-call-button":_vm.hasCallButton,"muted":_vm.muted,"is-typing":_vm.isTyping,"call-button-tooltip":_vm.callButtonTooltip,"unread-count-tooltip":_vm.unreadCountTooltip},scopedSlots:_vm._u([{key:"left",fn:function(){return [_c('dt-avatar',{attrs:{"size":"sm","seed":_vm.avatarSeed,"presence":_vm.avatarPresence}},[(_vm.avatarSrc)?_c('img',{attrs:{"data-qa":"dt-avatar-image","src":_vm.avatarSrc,"alt":_vm.name}}):(_vm.noInitials)?[_c('dt-icon',{attrs:{"name":"user","size":"200"}})]:[_vm._v(" "+_vm._s(_vm.avatarInitial)+" ")]],2)]},proxy:true},{key:"label",fn:function(){return [_c('dt-emoji-text-wrapper',{staticClass:"dt-leftbar-row__description",attrs:{"data-qa":"dt-leftbar-row-description","size":"200"}},[_vm._v(" "+_vm._s(_vm.name)+" ")]),_c('div',{staticClass:"dt-leftbar-row__status"},[(_vm.presenceText)?_c('span',{class:['dt-leftbar-row__meta-context', _vm.presenceColorClass],attrs:{"data-qa":"dt-leftbar-row-presence-text"}},[_vm._v(" "+_vm._s(_vm.presenceText)+" ")]):_vm._e(),(_vm.userStatus)?_c('dt-emoji-text-wrapper',{staticClass:"dt-leftbar-row__meta-custom",attrs:{"size":"100","element-type":"span","data-qa":"dt-leftbar-row-user-status"}},[_vm._v(" "+_vm._s(_vm.userStatus)+" ")]):_vm._e()],1)]},proxy:true}])},_vm.$listeners))}
+var contact_rowvue_type_template_id_5d3cfbea_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/leftbar/contact_row/contact_row.vue?vue&type=script&lang=js&
@@ -24786,6 +24812,14 @@ var contact_rowvue_type_template_id_6a63c490_staticRenderFns = []
       default: false
     },
 
+    /**
+     * Whether the contact row should display a call button when hovered.
+     */
+    hasCallButton: {
+      type: Boolean,
+      default: true
+    },
+
     /**
      * Text shown when the call button is hovered.
      */
@@ -24854,8 +24888,8 @@ var contact_rowvue_type_template_id_6a63c490_staticRenderFns = []
 ;
 var contact_row_component = normalizeComponent(
   contact_row_contact_rowvue_type_script_lang_js_,
-  contact_rowvue_type_template_id_6a63c490_render,
-  contact_rowvue_type_template_id_6a63c490_staticRenderFns,
+  contact_rowvue_type_template_id_5d3cfbea_render,
+  contact_rowvue_type_template_id_5d3cfbea_staticRenderFns,
   false,
   null,
   null,

package/dist/dialtone-vue.umd.js

@@ -2613,6 +2613,25 @@ function debounce(func) {
   clearTimeout(TIMER);
   TIMER = setTimeout(func, timeout);
 }
+/**
+ * Checks if the element is out of the viewport
+ * https://gomakethings.com/how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js/
+ * @param  {HTMLElement} element The element to check
+ * @return {Object} A set of booleans for each side of the element
+ */
+
+function isOutOfViewPort(element) {
+  const bounding = element.getBoundingClientRect();
+  const isOut = {
+    top: bounding.top < 0,
+    left: bounding.left < 0,
+    bottom: bounding.bottom > (window.innerHeight || document.documentElement.clientHeight),
+    right: bounding.right > (window.innerWidth || document.documentElement.clientWidth)
+  };
+  isOut.any = Object.values(isOut).some(val => val);
+  isOut.all = Object.values(isOut).every(val => val);
+  return isOut;
+}
 /* harmony default export */ const utils = ({
   getUniqueString,
   getRandomElement,
@@ -2623,7 +2642,8 @@ function debounce(func) {
   htmlFragment,
   flushPromises,
   kebabCaseToPascalCase,
-  debounce
+  debounce,
+  isOutOfViewPort
 });
 ;// 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/presence/presence.vue?vue&type=template&id=77957bb3&
 var presencevue_type_template_id_77957bb3_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-presence",attrs:{"data-qa":"dt-presence","role":"status","aria-live":_vm.$attrs.ariaLive || 'off'}},[(_vm.srText)?_c('span',{staticClass:"sr-only",attrs:{"data-qa":"dt-presence-sr-text"}},[_vm._v(_vm._s(_vm.srText)+" ")]):_vm._e(),_c('div',{staticClass:"d-presence__inner",class:{
@@ -8200,8 +8220,8 @@ return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,
 var dropdownvue_type_template_id_359f1c8b_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=cdba9054&
-var popovervue_type_template_id_cdba9054_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=683dbc64&
+var popovervue_type_template_id_683dbc64_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,
@@ -8212,7 +8232,7 @@ var popovervue_type_template_id_cdba9054_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_cdba9054_staticRenderFns = []
+var popovervue_type_template_id_683dbc64_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -13627,6 +13647,7 @@ var popover_header_footer_component = normalizeComponent(
     isOpen(isOpen, isPrev) {
       if (isOpen) {
         this.initTippyInstance();
+        this.tip.show();
       } else if (!isOpen && isPrev !== isOpen) {
         this.removeEventListeners();
         this.tip.hide();
@@ -13642,16 +13663,14 @@ var popover_header_footer_component = normalizeComponent(
 
     if (this.isOpen) {
       this.initTippyInstance();
+      this.tip.show();
     } // rootMargin here must be greater than the margin of the height we are setting in calculatedMaxHeight which
     // currently is var(--space-300) (4px). If not the intersectionObserver will continually trigger in an infinite
     // loop.
     // threshold 1.0 makes this trigger every time the dialog "touches" the edge of the viewport.
 
 
-    this.intersectionObserver = new IntersectionObserver(this.hasIntersectedViewport, {
-      rootMargin: '-8px',
-      threshold: 1.0
-    });
+    this.intersectionObserver = new IntersectionObserver(this.hasIntersectedViewport);
     this.intersectionObserver.observe(this.popoverContentEl);
   },
 
@@ -13669,8 +13688,12 @@ var popover_header_footer_component = normalizeComponent(
    ******************/
   methods: {
     hasIntersectedViewport(entries) {
-      const dialog = entries === null || entries === void 0 ? void 0 : entries[0];
-      this.isOutsideViewport = !(dialog !== null && dialog !== void 0 && dialog.isIntersecting);
+      var _entries$;
+
+      const dialog = entries === null || entries === void 0 ? void 0 : (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.target;
+      if (!dialog) return;
+      const isOut = isOutOfViewPort(dialog);
+      this.isOutsideViewport = isOut.bottom || isOut.top;
     },
 
     popperOptions() {
@@ -13781,6 +13804,9 @@ var popover_header_footer_component = normalizeComponent(
 
         if (element.tagName.toLowerCase() === 'body') {
           element.classList.add('d-of-hidden');
+          this.tip.setProps({
+            offset: this.offset
+          });
         } else {
           element.classList.add('d-zi-popover');
         }
@@ -13798,6 +13824,9 @@ var popover_header_footer_component = normalizeComponent(
 
         if (element.tagName.toLowerCase() === 'body') {
           element.classList.remove('d-of-hidden');
+          this.tip.setProps({
+            offset: this.offset
+          });
         } else {
           element.classList.remove('d-zi-popover');
         }
@@ -13818,6 +13847,8 @@ var popover_header_footer_component = normalizeComponent(
       if (this.contentWidth === null) {
         this.popoverContentEl.style.width = 'auto';
       }
+
+      this.addEventListeners();
     },
 
     async onLeaveTransitionComplete() {
@@ -13830,7 +13861,7 @@ var popover_header_footer_component = normalizeComponent(
       }
 
       (_this$tip8 = this.tip) === null || _this$tip8 === void 0 ? void 0 : _this$tip8.unmount();
-      this.enableScrolling();
+      await this.enableScrolling();
       this.$emit('opened', false);
 
       if (this.open !== null) {
@@ -13840,7 +13871,7 @@ var popover_header_footer_component = normalizeComponent(
 
     async onEnterTransitionComplete() {
       this.focusInitialElement();
-      this.preventScrolling(); // await next tick in case the user wants to change focus themselves.
+      await this.preventScrolling(); // await next tick in case the user wants to change focus themselves.
 
       await this.$nextTick();
       this.$emit('opened', true, this.$refs.popover__content);
@@ -13946,11 +13977,6 @@ var popover_header_footer_component = normalizeComponent(
         onClickOutside: this.onClickOutside,
         onShow: this.onShow
       });
-      this.tip.setProps({
-        zIndex: this.modal ? 650 : this.calculateAnchorZindex()
-      });
-      this.tip.show();
-      this.addEventListeners();
     }
 
   }
@@ -13972,8 +13998,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_cdba9054_render,
-  popovervue_type_template_id_cdba9054_staticRenderFns,
+  popovervue_type_template_id_683dbc64_render,
+  popovervue_type_template_id_683dbc64_staticRenderFns,
   false,
   null,
   null,
@@ -24609,9 +24635,9 @@ var group_row_component = normalizeComponent(
 /* harmony default export */ const group_row = (group_row_component.exports);
 ;// CONCATENATED MODULE: ./recipes/leftbar/group_row/index.js
 
-;// 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!./recipes/leftbar/contact_row/contact_row.vue?vue&type=template&id=6a63c490&
-var contact_rowvue_type_template_id_6a63c490_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-general-row',_vm._g({attrs:{"unread-count":_vm.unreadCount,"description":(_vm.name + " " + _vm.presenceText + " " + _vm.userStatus),"has-unreads":_vm.hasUnreads,"selected":_vm.selected,"has-call-button":true,"muted":_vm.muted,"is-typing":_vm.isTyping,"call-button-tooltip":_vm.callButtonTooltip,"unread-count-tooltip":_vm.unreadCountTooltip},scopedSlots:_vm._u([{key:"left",fn:function(){return [_c('dt-avatar',{attrs:{"size":"sm","seed":_vm.avatarSeed,"presence":_vm.avatarPresence}},[(_vm.avatarSrc)?_c('img',{attrs:{"data-qa":"dt-avatar-image","src":_vm.avatarSrc,"alt":_vm.name}}):(_vm.noInitials)?[_c('dt-icon',{attrs:{"name":"user","size":"200"}})]:[_vm._v(" "+_vm._s(_vm.avatarInitial)+" ")]],2)]},proxy:true},{key:"label",fn:function(){return [_c('dt-emoji-text-wrapper',{staticClass:"dt-leftbar-row__description",attrs:{"data-qa":"dt-leftbar-row-description","size":"200"}},[_vm._v(" "+_vm._s(_vm.name)+" ")]),_c('div',{staticClass:"dt-leftbar-row__status"},[(_vm.presenceText)?_c('span',{class:['dt-leftbar-row__meta-context', _vm.presenceColorClass],attrs:{"data-qa":"dt-leftbar-row-presence-text"}},[_vm._v(" "+_vm._s(_vm.presenceText)+" ")]):_vm._e(),(_vm.userStatus)?_c('dt-emoji-text-wrapper',{staticClass:"dt-leftbar-row__meta-custom",attrs:{"size":"100","element-type":"span","data-qa":"dt-leftbar-row-user-status"}},[_vm._v(" "+_vm._s(_vm.userStatus)+" ")]):_vm._e()],1)]},proxy:true}])},_vm.$listeners))}
-var contact_rowvue_type_template_id_6a63c490_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!./recipes/leftbar/contact_row/contact_row.vue?vue&type=template&id=5d3cfbea&
+var contact_rowvue_type_template_id_5d3cfbea_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-general-row',_vm._g({attrs:{"unread-count":_vm.unreadCount,"description":(_vm.name + " " + _vm.presenceText + " " + _vm.userStatus),"has-unreads":_vm.hasUnreads,"selected":_vm.selected,"has-call-button":_vm.hasCallButton,"muted":_vm.muted,"is-typing":_vm.isTyping,"call-button-tooltip":_vm.callButtonTooltip,"unread-count-tooltip":_vm.unreadCountTooltip},scopedSlots:_vm._u([{key:"left",fn:function(){return [_c('dt-avatar',{attrs:{"size":"sm","seed":_vm.avatarSeed,"presence":_vm.avatarPresence}},[(_vm.avatarSrc)?_c('img',{attrs:{"data-qa":"dt-avatar-image","src":_vm.avatarSrc,"alt":_vm.name}}):(_vm.noInitials)?[_c('dt-icon',{attrs:{"name":"user","size":"200"}})]:[_vm._v(" "+_vm._s(_vm.avatarInitial)+" ")]],2)]},proxy:true},{key:"label",fn:function(){return [_c('dt-emoji-text-wrapper',{staticClass:"dt-leftbar-row__description",attrs:{"data-qa":"dt-leftbar-row-description","size":"200"}},[_vm._v(" "+_vm._s(_vm.name)+" ")]),_c('div',{staticClass:"dt-leftbar-row__status"},[(_vm.presenceText)?_c('span',{class:['dt-leftbar-row__meta-context', _vm.presenceColorClass],attrs:{"data-qa":"dt-leftbar-row-presence-text"}},[_vm._v(" "+_vm._s(_vm.presenceText)+" ")]):_vm._e(),(_vm.userStatus)?_c('dt-emoji-text-wrapper',{staticClass:"dt-leftbar-row__meta-custom",attrs:{"size":"100","element-type":"span","data-qa":"dt-leftbar-row-user-status"}},[_vm._v(" "+_vm._s(_vm.userStatus)+" ")]):_vm._e()],1)]},proxy:true}])},_vm.$listeners))}
+var contact_rowvue_type_template_id_5d3cfbea_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/leftbar/contact_row/contact_row.vue?vue&type=script&lang=js&
@@ -24796,6 +24822,14 @@ var contact_rowvue_type_template_id_6a63c490_staticRenderFns = []
       default: false
     },
 
+    /**
+     * Whether the contact row should display a call button when hovered.
+     */
+    hasCallButton: {
+      type: Boolean,
+      default: true
+    },
+
     /**
      * Text shown when the call button is hovered.
      */
@@ -24864,8 +24898,8 @@ var contact_rowvue_type_template_id_6a63c490_staticRenderFns = []
 ;
 var contact_row_component = normalizeComponent(
   contact_row_contact_rowvue_type_script_lang_js_,
-  contact_rowvue_type_template_id_6a63c490_render,
-  contact_rowvue_type_template_id_6a63c490_staticRenderFns,
+  contact_rowvue_type_template_id_5d3cfbea_render,
+  contact_rowvue_type_template_id_5d3cfbea_staticRenderFns,
   false,
   null,
   null,