@dialpad/dialtone-vue 3.41.0-beta.4 → 3.42.0-beta.1

package/dist/dialtone-vue.umd.js

@@ -2972,17 +2972,25 @@ const focusableElementsList = `button,[href],input,select,textarea,details,[tabi
 /* harmony default export */ const modal = ({
   methods: {
     /**
-     * set focus to the first focusable element in your component, includes tabindex="-1".
+     * get the first focusable element in your component, includes tabindex="-1".
      * @param {object} el - optional - ref of dom element to trap focus on.
      *  will default to the root node of the vue component
      */
-    async focusFirstElement(el) {
+    async getFirstFocusableElement(el) {
       await this.$nextTick();
 
       const focusableElements = this._getFocusableElements(el, true);
 
-      const elToFocus = this._getFirstFocusElement(focusableElements);
+      return this._getFirstFocusElement(focusableElements);
+    },
 
+    /**
+     * set focus to the first focusable element in your component, includes tabindex="-1".
+     * @param {object} el - optional - ref of dom element to trap focus on.
+     *  will default to the root node of the vue component
+     */
+    async focusFirstElement(el) {
+      const elToFocus = await this.getFirstFocusableElement(el);
       elToFocus === null || elToFocus === void 0 ? void 0 : elToFocus.focus({
         preventScroll: true
       });
@@ -3657,19 +3665,19 @@ const card_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(cardvue_type_
 /* harmony default export */ const card = (card_exports_);
 ;// CONCATENATED MODULE: ./components/card/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox.vue?vue&type=template&id=3595da7e
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox.vue?vue&type=template&id=5b8afaf4
 
-const comboboxvue_type_template_id_3595da7e_hoisted_1 = {
+const comboboxvue_type_template_id_5b8afaf4_hoisted_1 = {
   "data-qa": "dt-combobox-input-wrapper"
 };
-function comboboxvue_type_template_id_3595da7e_render(_ctx, _cache, $props, $setup, $data, $options) {
+function comboboxvue_type_template_id_5b8afaf4_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_combobox_loading_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-loading-list");
 
   const _component_combobox_empty_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-empty-list");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     onKeydown: [_cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEscapeKey'), ["stop"]), ["esc"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEnterKey'), ["exact"]), ["enter"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onUpKey'), ["stop", "prevent"]), ["up"])), _cache[6] || (_cache[6] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onDownKey'), ["stop", "prevent"]), ["down"])), _cache[7] || (_cache[7] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onHomeKey'), ["stop", "prevent"]), ["home"])), _cache[8] || (_cache[8] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEndKey'), ["stop", "prevent"]), ["end"]))]
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", comboboxvue_type_template_id_3595da7e_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", comboboxvue_type_template_id_5b8afaf4_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
     inputProps: $options.inputProps
   })]), $props.showList ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 0,
@@ -3701,7 +3709,7 @@ function comboboxvue_type_template_id_3595da7e_render(_ctx, _cache, $props, $set
     clearHighlightIndex: $options.clearHighlightIndex
   })], 544)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 32);
 }
-;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=template&id=3595da7e
+;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=template&id=5b8afaf4
 
 ;// CONCATENATED MODULE: ./common/mixins/dom.js
 /* harmony default export */ const dom = ({
@@ -4019,6 +4027,7 @@ const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced
       },
 
       setHighlightIndex(num) {
+        console.log('setting highlight index to ' + num);
         this[indexKey] = num;
         this[idKey] = this._getItemId(num);
 
@@ -4028,6 +4037,7 @@ const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced
       },
 
       setHighlightId(id) {
+        console.log('setting highlight id to ' + id);
         this[idKey] = id;
         this[indexKey] = this._getItemIndex(id);
 
@@ -5651,6 +5661,7 @@ const LABEL_SIZES = {
       var _this$outsideRendered2;
 
       this.outsideRenderedListRef = contentRef;
+      console.log(this.outsideRenderedListRef);
       (_this$outsideRendered2 = this.outsideRenderedListRef) === null || _this$outsideRendered2 === void 0 ? void 0 : _this$outsideRendered2.addEventListener('mousemove', this.onMouseHighlight);
       this.$emit('opened', open);
 
@@ -5694,7 +5705,7 @@ const LABEL_SIZES = {
 
 
 ;
-const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxvue_type_script_lang_js, [['render',comboboxvue_type_template_id_3595da7e_render]])
+const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxvue_type_script_lang_js, [['render',comboboxvue_type_template_id_5b8afaf4_render]])
 
 /* harmony default export */ const combobox = (combobox_exports_);
 ;// CONCATENATED MODULE: ./components/combobox/index.js
@@ -6349,11 +6360,11 @@ function dropdownvue_type_template_id_878a8588_render(_ctx, _cache, $props, $set
 }
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=878a8588
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=3758d616
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=3aa43aea
 
-const popovervue_type_template_id_3758d616_hoisted_1 = ["aria-hidden"];
-const popovervue_type_template_id_3758d616_hoisted_2 = ["id", "tabindex"];
-function popovervue_type_template_id_3758d616_render(_ctx, _cache, $props, $setup, $data, $options) {
+const popovervue_type_template_id_3aa43aea_hoisted_1 = ["aria-hidden"];
+const popovervue_type_template_id_3aa43aea_hoisted_2 = ["id", "tabindex"];
+function popovervue_type_template_id_3aa43aea_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_popover_header_footer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("popover-header-footer");
 
   const _component_sr_only_close_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("sr-only-close-button");
@@ -6367,7 +6378,7 @@ function popovervue_type_template_id_3758d616_render(_ctx, _cache, $props, $setu
     class: "d-modal--transparent",
     "aria-hidden": $props.modal && $data.isOpen ? 'false' : 'true',
     onClick: _cache[0] || (_cache[0] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(() => {}, ["prevent", "stop"]))
-  }, null, 8, popovervue_type_template_id_3758d616_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), {
+  }, null, 8, popovervue_type_template_id_3aa43aea_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), {
     ref: "popover",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-popover', {
       'd-popover__anchor--opened': $data.isOpen
@@ -6399,7 +6410,7 @@ function popovervue_type_template_id_3758d616_render(_ctx, _cache, $props, $setu
         'aria-controls': $props.id,
         'aria-haspopup': $props.role
       }
-    })], 40, popovervue_type_template_id_3758d616_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    })], 40, popovervue_type_template_id_3aa43aea_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
       id: $props.id,
       ref: "content",
       role: $props.role,
@@ -6462,7 +6473,7 @@ function popovervue_type_template_id_3758d616_render(_ctx, _cache, $props, $setu
     _: 3
   }, 8, ["class"]))]);
 }
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=3758d616
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=3aa43aea
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
 function getWindow(node) {
@@ -11567,10 +11578,10 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     appendTo(appendTo) {
-      var _this$tip3;
+      var _this$tip3, _this$anchorEl, _this$anchorEl$getRoo;
 
       (_this$tip3 = this.tip) === null || _this$tip3 === void 0 ? void 0 : _this$tip3.setProps({
-        appendTo
+        appendTo: this.appendTo === document.body ? (_this$anchorEl = this.anchorEl) === null || _this$anchorEl === void 0 ? void 0 : (_this$anchorEl$getRoo = _this$anchorEl.getRootNode()) === null || _this$anchorEl$getRoo === void 0 ? void 0 : _this$anchorEl$getRoo.querySelector('body') : this.appendTo
       });
     },
 
@@ -11629,9 +11640,11 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     isOpen(isOpen, isPrev) {
       if (isOpen) {
         this.initTippyInstance();
+        this.preventScrolling();
       } else if (!isOpen && isPrev !== isOpen) {
         this.removeEventListeners();
         this.tip.hide();
+        this.enableScrolling();
       }
     }
 
@@ -11690,9 +11703,9 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
 
       if (this.open === null || this.open === undefined) {
-        var _this$anchorEl;
+        var _this$anchorEl2;
 
-        if (!this.anchorEl.contains(e.target) && !this.anchorEl.isEqualNode(e.target) || (_this$anchorEl = this.anchorEl) !== null && _this$anchorEl !== void 0 && _this$anchorEl.disabled) {
+        if (!this.anchorEl.contains(e.target) && !this.anchorEl.isEqualNode(e.target) || (_this$anchorEl2 = this.anchorEl) !== null && _this$anchorEl2 !== void 0 && _this$anchorEl2.disabled) {
           return;
         }
 
@@ -11740,10 +11753,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     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);
@@ -11752,9 +11762,6 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
     removeEventListeners() {
       window.removeEventListener('dt-popover-close', this.closePopover);
-      window.removeEventListener('wheel', this.preventScrolling, {
-        passive: false
-      });
 
       if (this.contentWidth === 'anchor') {
         window.removeEventListener('resize', this.onResize);
@@ -11766,11 +11773,40 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     /*
-    * 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) 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() {
@@ -11897,7 +11933,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     initTippyInstance() {
-      var _this$anchorEl2, _this$anchorEl2$getRo;
+      var _this$anchorEl3, _this$anchorEl3$getRo;
 
       this.tip = tippy_utils_createTippy(this.anchorEl, {
         popperOptions: this.popperOptions(),
@@ -11905,7 +11941,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
         placement: this.placement,
         offset: this.offset,
         sticky: this.sticky,
-        appendTo: this.appendTo === document.body ? (_this$anchorEl2 = this.anchorEl) === null || _this$anchorEl2 === void 0 ? void 0 : (_this$anchorEl2$getRo = _this$anchorEl2.getRootNode()) === null || _this$anchorEl2$getRo === void 0 ? void 0 : _this$anchorEl2$getRo.querySelector('body') : this.appendTo,
+        appendTo: this.appendTo === document.body ? (_this$anchorEl3 = this.anchorEl) === null || _this$anchorEl3 === void 0 ? void 0 : (_this$anchorEl3$getRo = _this$anchorEl3.getRootNode()) === null || _this$anchorEl3$getRo === void 0 ? void 0 : _this$anchorEl3$getRo.querySelector('body') : this.appendTo,
         interactive: true,
         trigger: 'manual',
         // We have to manage hideOnClick functionality manually to handle
@@ -11926,10 +11962,10 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 });
 ;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=3758d616&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=3aa43aea&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=3758d616&lang=less
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=3aa43aea&lang=less
 
 ;// CONCATENATED MODULE: ./components/popover/popover.vue
 
@@ -11939,7 +11975,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 ;
 
 
-const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_3758d616_render]])
+const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_3aa43aea_render]])
 
 /* harmony default export */ const popover = (popover_exports_);
 ;// CONCATENATED MODULE: ./components/popover/index.js
@@ -15708,31 +15744,34 @@ function tabvue_type_template_id_af343bac_render(_ctx, _cache, $props, $setup, $
 const tab_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tabvue_type_script_lang_js, [['render',tabvue_type_template_id_af343bac_render]])
 
 /* harmony default export */ const tab = (tab_exports_);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tabs/tab_panel.vue?vue&type=template&id=572b0140
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tabs/tab_panel.vue?vue&type=template&id=2cfdc9e8
 
-const tab_panelvue_type_template_id_572b0140_hoisted_1 = ["id", "aria-labelledby", "aria-hidden"];
-function tab_panelvue_type_template_id_572b0140_render(_ctx, _cache, $props, $setup, $data, $options) {
+const tab_panelvue_type_template_id_2cfdc9e8_hoisted_1 = ["id", "tabindex", "aria-labelledby", "aria-hidden"];
+function tab_panelvue_type_template_id_2cfdc9e8_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withDirectives)(((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     id: `dt-panel-${$props.id}`,
     role: "tabpanel",
-    tabindex: "0",
+    tabindex: $data.isFirstElementFocusable ? -1 : 0,
     "aria-labelledby": `dt-tab-${$props.tabId}`,
     "aria-hidden": `${$options.hidePanel}`,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)([{
       'd-d-none': $options.hidePanel
     }, $props.tabPanelClass]),
     "data-qa": "dt-tab-panel"
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, tab_panelvue_type_template_id_572b0140_hoisted_1)), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, !$props.hidden]]);
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, tab_panelvue_type_template_id_2cfdc9e8_hoisted_1)), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, !$props.hidden]]);
 }
-;// CONCATENATED MODULE: ./components/tabs/tab_panel.vue?vue&type=template&id=572b0140
+;// CONCATENATED MODULE: ./components/tabs/tab_panel.vue?vue&type=template&id=2cfdc9e8
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tabs/tab_panel.vue?vue&type=script&lang=js
+
 /**
  * Tabs allow users to navigation between grouped content in different views while within the same page context.
  * @see https://dialpad.design/components/tabs.html
  */
+
 /* harmony default export */ const tab_panelvue_type_script_lang_js = ({
   name: 'DtTabPanel',
+  mixins: [modal],
   inject: ['groupContext'],
   props: {
     /**
@@ -15768,12 +15807,24 @@ function tab_panelvue_type_template_id_572b0140_render(_ctx, _cache, $props, $se
       default: ''
     }
   },
+
+  data() {
+    return {
+      isFirstElementFocusable: false
+    };
+  },
+
   computed: {
     hidePanel() {
       return this.groupContext.selected !== this.id || this.hidden;
     }
 
+  },
+
+  async mounted() {
+    this.isFirstElementFocusable = !!(await this.getFirstFocusableElement(this.$el));
   }
+
 });
 ;// CONCATENATED MODULE: ./components/tabs/tab_panel.vue?vue&type=script&lang=js
  
@@ -15783,7 +15834,7 @@ function tab_panelvue_type_template_id_572b0140_render(_ctx, _cache, $props, $se
 
 
 ;
-const tab_panel_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tab_panelvue_type_script_lang_js, [['render',tab_panelvue_type_template_id_572b0140_render]])
+const tab_panel_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tab_panelvue_type_script_lang_js, [['render',tab_panelvue_type_template_id_2cfdc9e8_render]])
 
 /* harmony default export */ const tab_panel = (tab_panel_exports_);
 ;// CONCATENATED MODULE: ./components/tabs/index.js