@dialpad/dialtone-vue 2.54.0-beta.1 → 2.54.0

package/CHANGELOG.md

@@ -1,15 +1,16 @@
-# [2.54.0-beta.1](https://github.com/dialpad/dialtone-vue/compare/v2.53.1...v2.54.0-beta.1) (2023-01-26)
+# [2.54.0](https://github.com/dialpad/dialtone-vue/compare/v2.53.1...v2.54.0) (2023-01-26)
 
 
 ### Bug Fixes
 
 * **Combobox:** chips vertical alignment. ([#706](https://github.com/dialpad/dialtone-vue/issues/706)) ([e552ca1](https://github.com/dialpad/dialtone-vue/commit/e552ca1e3b324f58c2dfa50305dd84f854a9a35e))
+* **Notice:** incorrect validation ([#715](https://github.com/dialpad/dialtone-vue/issues/715)) ([c1360cc](https://github.com/dialpad/dialtone-vue/commit/c1360cc6f18341d77a6794a686bf2448178455aa))
+* **Tab:** fix focus management with focusable elements inside the panel ([#717](https://github.com/dialpad/dialtone-vue/issues/717)) ([693ac9e](https://github.com/dialpad/dialtone-vue/commit/693ac9e07aaa4886a9e9a3020a0bb5a619a722c7))
 
 
 ### Features
 
 * **Modal:** add style variants of banner ([#713](https://github.com/dialpad/dialtone-vue/issues/713)) ([8696828](https://github.com/dialpad/dialtone-vue/commit/86968283f0e1e855f21d659fb9f7229a6fd45aaf))
-* use getRootNode to get root ([a868ae4](https://github.com/dialpad/dialtone-vue/commit/a868ae49206c7022ecc6d6a3a6f604fc85fac69b))
 
 ## [2.53.1](https://github.com/dialpad/dialtone-vue/compare/v2.53.0...v2.53.1) (2023-01-20)
 

package/dist/dialtone-vue.common.js

@@ -3548,9 +3548,9 @@ var notice_content_component = normalizeComponent(
 )
 
 /* harmony default export */ const notice_content = (notice_content_component.exports);
-;// 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/notice/notice_action.vue?vue&type=template&id=80f1eb74&
-var notice_actionvue_type_template_id_80f1eb74_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-notice__actions",attrs:{"data-qa":"notice-content-actions"}},[_vm._t("default"),(!_vm.hideClose)?_c('dt-button',_vm._g(_vm._b({ref:"closeButton",attrs:{"data-qa":"dt-notice-action-close-button","size":"sm","importance":"clear","circle":"","aria-label":_vm.closeButtonProps.ariaLabel ? _vm.closeButtonProps.ariaLabel : 'Close'},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('dt-icon',{attrs:{"name":"close","size":"200"}})]},proxy:true}],null,false,1154370889)},'dt-button',_vm.closeButtonProps,false),_vm.noticeActionListeners)):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.close}}):_vm._e()],2)}
-var notice_actionvue_type_template_id_80f1eb74_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/notice/notice_action.vue?vue&type=template&id=6ccb8af0&
+var notice_actionvue_type_template_id_6ccb8af0_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-notice__actions",attrs:{"data-qa":"notice-content-actions"}},[_vm._t("default"),(!_vm.hideClose)?_c('dt-button',_vm._g(_vm._b({ref:"closeButton",attrs:{"data-qa":"dt-notice-action-close-button","size":"sm","importance":"clear","circle":"","aria-label":_vm.closeButtonProps.ariaLabel ? _vm.closeButtonProps.ariaLabel : 'Close'},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('dt-icon',{attrs:{"name":"close","size":"200"}})]},proxy:true}],null,false,1154370889)},'dt-button',_vm.closeButtonProps,false),_vm.noticeActionListeners)):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.close}}):_vm._e()],2)}
+var notice_actionvue_type_template_id_6ccb8af0_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/button/button.vue?vue&type=template&id=4c8880f0&
@@ -4181,17 +4181,6 @@ var sr_only_close_button_component = normalizeComponent(
     }
 
   },
-  watch: {
-    $props: {
-      immediate: true,
-      deep: true,
-
-      handler() {
-        this.validateProps();
-      }
-
-    }
-  },
 
   created() {
     if (!this.hideClose && !this.closeButtonProps.ariaLabel) {
@@ -4214,12 +4203,6 @@ var sr_only_close_button_component = normalizeComponent(
   methods: {
     close() {
       this.$emit('close');
-    },
-
-    validateProps() {
-      if (this.hideClose && !this.visuallyHiddenClose) {
-        console.error('If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props ' + 'need to be set so the component always includes a close button');
-      }
     }
 
   }
@@ -4236,8 +4219,8 @@ var sr_only_close_button_component = normalizeComponent(
 ;
 var notice_action_component = normalizeComponent(
   notice_notice_actionvue_type_script_lang_js_,
-  notice_actionvue_type_template_id_80f1eb74_render,
-  notice_actionvue_type_template_id_80f1eb74_staticRenderFns,
+  notice_actionvue_type_template_id_6ccb8af0_render,
+  notice_actionvue_type_template_id_6ccb8af0_staticRenderFns,
   false,
   null,
   null,
@@ -4269,17 +4252,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 = this.getFirstFocusableElement(el);
       elToFocus === null || elToFocus === void 0 ? void 0 : elToFocus.focus({
         preventScroll: true
       });
@@ -7999,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=8dc20c0e&
-var popovervue_type_template_id_8dc20c0e_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=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":{
           'aria-expanded': _vm.isOpen.toString(),
           'aria-controls': _vm.id,
           'aria-haspopup': _vm.role,
@@ -8011,7 +8002,7 @@ var popovervue_type_template_id_8dc20c0e_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_8dc20c0e_staticRenderFns = []
+var popovervue_type_template_id_64e7122e_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -13431,7 +13422,7 @@ var popover_header_footer_component = normalizeComponent(
   },
 
   mounted() {
-    const externalAnchorEl = this.externalAnchor ? this.$el.getRootNode().querySelector(`#${this.externalAnchor}`) : null;
+    const externalAnchorEl = document.getElementById(this.externalAnchor);
     this.anchorEl = externalAnchorEl !== null && externalAnchorEl !== void 0 ? externalAnchorEl : this.$refs.anchor.children[0];
     this.popoverContentEl = this.$refs.content.$el;
 
@@ -13468,7 +13459,7 @@ var popover_header_footer_component = normalizeComponent(
 
     calculateAnchorZindex() {
       // if a modal is currently active render at modal-element z-index, otherwise at popover z-index
-      if (this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]')) {
+      if (document.querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]')) {
         return 650;
       } else {
         return 300;
@@ -13554,7 +13545,7 @@ var popover_header_footer_component = normalizeComponent(
     * Prevents scrolling only when the popover is set to modal
     **/
     preventScrolling(e) {
-      if (!this.modal) return;
+      if (!this.modal || this.$refs.content.$el.contains(e.target)) return;
       e.preventDefault();
     },
 
@@ -13722,8 +13713,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_8dc20c0e_render,
-  popovervue_type_template_id_8dc20c0e_staticRenderFns,
+  popovervue_type_template_id_64e7122e_render,
+  popovervue_type_template_id_64e7122e_staticRenderFns,
   false,
   null,
   null,
@@ -17818,13 +17809,13 @@ var tab_component = normalizeComponent(
 )
 
 /* harmony default export */ const tab = (tab_component.exports);
-;// 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/tabs/tab_panel.vue?vue&type=template&id=78c45854&
-var tab_panelvue_type_template_id_78c45854_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
+;// 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/tabs/tab_panel.vue?vue&type=template&id=660b90ba&
+var tab_panelvue_type_template_id_660b90ba_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
     {
       'd-d-none': _vm.hidePanel,
     },
-    _vm.tabPanelClass ],attrs:{"id":("dt-panel-" + _vm.id),"role":"tabpanel","tabindex":"0","aria-labelledby":("dt-tab-" + _vm.tabId),"aria-hidden":("" + _vm.hidePanel),"data-qa":"dt-tab-panel"}},[_vm._t("default")],2)}
-var tab_panelvue_type_template_id_78c45854_staticRenderFns = []
+    _vm.tabPanelClass ],attrs:{"id":("dt-panel-" + _vm.id),"role":"tabpanel","tabindex":_vm.isFirstElementFocusable ? -1 : 0,"aria-labelledby":("dt-tab-" + _vm.tabId),"aria-hidden":("" + _vm.hidePanel),"data-qa":"dt-tab-panel"}},[_vm._t("default")],2)}
+var tab_panelvue_type_template_id_660b90ba_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!./components/tabs/tab_panel.vue?vue&type=script&lang=js&
@@ -17853,8 +17844,10 @@ var tab_panelvue_type_template_id_78c45854_staticRenderFns = []
  * 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: {
     /**
@@ -17890,12 +17883,24 @@ var tab_panelvue_type_template_id_78c45854_staticRenderFns = []
       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&
  /* harmony default export */ const tabs_tab_panelvue_type_script_lang_js_ = (tab_panelvue_type_script_lang_js_); 
@@ -17909,8 +17914,8 @@ var tab_panelvue_type_template_id_78c45854_staticRenderFns = []
 ;
 var tab_panel_component = normalizeComponent(
   tabs_tab_panelvue_type_script_lang_js_,
-  tab_panelvue_type_template_id_78c45854_render,
-  tab_panelvue_type_template_id_78c45854_staticRenderFns,
+  tab_panelvue_type_template_id_660b90ba_render,
+  tab_panelvue_type_template_id_660b90ba_staticRenderFns,
   false,
   null,
   null,
@@ -20443,15 +20448,15 @@ var root_layout_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/root_layout/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/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=294704b9&
-var combobox_with_popovervue_type_template_id_294704b9_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"label":_vm.label,"label-visible":_vm.labelVisible,"size":_vm.size,"description":_vm.description,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-rendered-outside":true,"list-id":_vm.listId,"append-to":_vm.appendTo,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
+;// 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/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=ad3e7dce&
+var combobox_with_popovervue_type_template_id_ad3e7dce_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"label":_vm.label,"label-visible":_vm.labelVisible,"size":_vm.size,"description":_vm.description,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var inputProps = ref.inputProps;
 return [_c('div',{ref:"input",attrs:{"id":_vm.externalAnchor},on:{"focusin":_vm.onFocusIn,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.openOnArrowKeyPress($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.openOnArrowKeyPress($event)}]}},[_vm._t("input",null,{"inputProps":inputProps,"onInput":_vm.handleDisplayList})],2)]}},{key:"list",fn:function(ref){
 var opened = ref.opened;
 var listProps = ref.listProps;
 var clearHighlightIndex = ref.clearHighlightIndex;
 return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":false,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","initial-focus-element":"none","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header"},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":clearHighlightIndex}},[(_vm.loading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',listProps,false)):(_vm.emptyList && _vm.emptyStateMessage)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',listProps,false)):_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
-var combobox_with_popovervue_type_template_id_294704b9_staticRenderFns = []
+var combobox_with_popovervue_type_template_id_ad3e7dce_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/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js&
@@ -20558,8 +20563,6 @@ var combobox_with_popovervue_type_template_id_294704b9_staticRenderFns = []
 //
 //
 //
-//
-
 
 
 
@@ -20726,18 +20729,6 @@ var combobox_with_popovervue_type_template_id_294704b9_staticRenderFns = []
       default: false
     },
 
-    /**
-     * Sets the element to which the popover is going to append to.
-     * @values 'parent', HTMLElement,
-     */
-    appendTo: {
-      type: [HTMLElement, String],
-      default: () => document.body,
-      validator: appendTo => {
-        return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
-      }
-    },
-
     /**
      * Displays the list when the combobox is focused, before the user has typed anything.
      * When this is enabled the list will not close after selection.
@@ -20933,8 +20924,8 @@ var combobox_with_popovervue_type_template_id_294704b9_staticRenderFns = []
 ;
 var combobox_with_popover_component = normalizeComponent(
   combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
-  combobox_with_popovervue_type_template_id_294704b9_render,
-  combobox_with_popovervue_type_template_id_294704b9_staticRenderFns,
+  combobox_with_popovervue_type_template_id_ad3e7dce_render,
+  combobox_with_popovervue_type_template_id_ad3e7dce_staticRenderFns,
   false,
   null,
   null,
@@ -20945,11 +20936,11 @@ var combobox_with_popover_component = normalizeComponent(
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_component.exports);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/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/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=8a9854ae&
-var combobox_multi_selectvue_type_template_id_8a9854ae_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"label":_vm.label,"show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose,"append-to":_vm.appendTo,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
+;// 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/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=1ad6269f&
+var combobox_multi_selectvue_type_template_id_1ad6269f_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"label":_vm.label,"show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var onInput = ref.onInput;
 return [_c('span',{ref:"inputSlotWrapper",staticClass:"d-ps-relative d-d-block"},[_c('span',{ref:"chipsWrapper",staticClass:"d-ps-absolute d-mx2"},_vm._l((_vm.selectedItems),function(item){return _c('dt-chip',_vm._g({key:item.id,ref:"chips",refInFor:true,class:['d-mt4', 'd-mx2', 'd-zi-base1'],attrs:{"label-class":['d-chip__label'],"close-button-props":{ ariaLabel: 'close' },"size":_vm.CHIP_SIZES[_vm.size]},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"backspace",undefined,$event.key,undefined)){ return null; }return _vm.onChipRemove(item)},"close":function($event){return _vm.onChipRemove(item)}}},_vm.chipListeners),[_vm._v(" "+_vm._s(item)+" ")])}),1),_c('dt-input',_vm._g({ref:"input",staticClass:"d-fl-grow1",attrs:{"aria-label":_vm.label,"label":_vm.labelVisible ? _vm.label : '',"description":_vm.description,"placeholder":_vm.inputPlaceHolder,"show-messages":_vm.showInputMessages,"messages":_vm.inputMessages,"size":_vm.size},on:{"input":onInput},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v},expression:"value"}},_vm.inputListeners)),_c('dt-validation-messages',{attrs:{"validation-messages":_vm.maxSelectedMessage,"show-messages":_vm.showValidationMessages}})],1)]}},{key:"header",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header"},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"list",fn:function(){return [_c('div',{ref:"list",on:{"mousedown":function($event){$event.preventDefault();}}},[(!_vm.loading)?_vm._t("list"):_c('div',{staticClass:"d-ta-center d-py16"},[_vm._v(" "+_vm._s(_vm.loadingMessage)+" ")])],2)]},proxy:true},{key:"footer",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})}
-var combobox_multi_selectvue_type_template_id_8a9854ae_staticRenderFns = []
+var combobox_multi_selectvue_type_template_id_1ad6269f_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -21165,8 +21156,6 @@ const CHIP_BOTTOM_POSITION = {
 //
 //
 //
-//
-
 
 
 
@@ -21228,18 +21217,6 @@ const CHIP_BOTTOM_POSITION = {
       }
     },
 
-    /**
-     * Sets the element to which the popover is going to append to.
-     * @values 'parent', HTMLElement,
-     */
-    appendTo: {
-      type: [HTMLElement, String],
-      default: () => document.body,
-      validator: appendTo => {
-        return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
-      }
-    },
-
     /**
      * Show input validation message
      */
@@ -21659,8 +21636,8 @@ const CHIP_BOTTOM_POSITION = {
 ;
 var combobox_multi_select_component = normalizeComponent(
   combobox_multi_select_combobox_multi_selectvue_type_script_lang_js_,
-  combobox_multi_selectvue_type_template_id_8a9854ae_render,
-  combobox_multi_selectvue_type_template_id_8a9854ae_staticRenderFns,
+  combobox_multi_selectvue_type_template_id_1ad6269f_render,
+  combobox_multi_selectvue_type_template_id_1ad6269f_staticRenderFns,
   false,
   null,
   null,