@dialpad/dialtone-vue 2.57.0 → 2.58.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [2.58.0](https://github.com/dialpad/dialtone-vue/compare/v2.57.1...v2.58.0) (2023-02-17)
+
+
+### Features
+
+* **Stack:** new stack component ([#758](https://github.com/dialpad/dialtone-vue/issues/758)) ([7e8e78a](https://github.com/dialpad/dialtone-vue/commit/7e8e78ae5e884ce0d1bb79a61ee5417f04ec4086))
+
+# [2.58.0](https://github.com/dialpad/dialtone-vue/compare/v2.57.1...v2.58.0) (2023-02-17)
+
+
+### Features
+
+* **Stack:** new stack component ([#758](https://github.com/dialpad/dialtone-vue/issues/758)) ([7e8e78a](https://github.com/dialpad/dialtone-vue/commit/7e8e78ae5e884ce0d1bb79a61ee5417f04ec4086))
+
+## [2.57.1](https://github.com/dialpad/dialtone-vue/compare/v2.57.0...v2.57.1) (2023-02-15)
+
+
+### Bug Fixes
+
+* add appendTo prop on all popover based components ([#764](https://github.com/dialpad/dialtone-vue/issues/764)) ([e11a915](https://github.com/dialpad/dialtone-vue/commit/e11a915666a9dff363ca7a489cffbb0464198ed2))
+* **Dropdown:** remove deprecated DropdownList ([#765](https://github.com/dialpad/dialtone-vue/issues/765)) ([72edcf1](https://github.com/dialpad/dialtone-vue/commit/72edcf1edb84656ae88d37c5dfaa996cb240e6c6))
+
 # [2.57.0](https://github.com/dialpad/dialtone-vue/compare/v2.56.1...v2.57.0) (2023-02-14)
 
 

package/dist/dialtone-vue.common.js

@@ -2213,7 +2213,6 @@ __webpack_require__.d(__webpack_exports__, {
   "DtCollapsible": () => (/* reexport */ collapsible),
   "DtCombobox": () => (/* reexport */ combobox),
   "DtDropdown": () => (/* reexport */ dropdown),
-  "DtDropdownList": () => (/* reexport */ dropdown_list),
   "DtDropdownSeparator": () => (/* reexport */ dropdown_separator),
   "DtGroupableInputMixin": () => (/* reexport */ GroupableMixin),
   "DtIcon": () => (/* reexport */ icon),
@@ -2249,6 +2248,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtSkeletonParagraph": () => (/* reexport */ skeleton_paragraph),
   "DtSkeletonShape": () => (/* reexport */ skeleton_shape),
   "DtSkeletonText": () => (/* reexport */ skeleton_text),
+  "DtStack": () => (/* reexport */ stack),
   "DtTab": () => (/* reexport */ tab),
   "DtTabGroup": () => (/* reexport */ tab_group),
   "DtTabPanel": () => (/* reexport */ tab_panel),
@@ -14320,73 +14320,6 @@ var dropdown_component = normalizeComponent(
 )
 
 /* harmony default export */ const dropdown = (dropdown_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/dropdown/dropdown_list.vue?vue&type=template&id=c83c6b9a&
-var dropdown_listvue_type_template_id_c83c6b9a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',[(_vm.heading)?_c('div',{staticClass:"dt-dropdown-list--header d-fs12 d-fc-black-400 d-fw-bold d-lh4 d-py4 d-px12 d-d-flex d-ai-center"},[_c('span',[_vm._v(_vm._s(_vm.heading))])]):_vm._e(),_c('ul',{class:['d-ps-relative', 'd-stack2', 'd-px0', _vm.listClass],attrs:{"data-qa":"dt-dropdown-list-wrapper"}},[_vm._t("default")],2)])}
-var dropdown_listvue_type_template_id_c83c6b9a_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/dropdown/dropdown_list.vue?vue&type=script&lang=js&
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-/* harmony default export */ const dropdown_listvue_type_script_lang_js_ = ({
-  name: 'DtDropdownList',
-  props: {
-    /**
-     * List's heading.
-     */
-    heading: {
-      type: String,
-      default: ''
-    },
-
-    /**
-     * Additional class for the wrapper list element.
-     */
-    listClass: {
-      type: [String, Array, Object],
-      default: ''
-    }
-  }
-});
-;// CONCATENATED MODULE: ./components/dropdown/dropdown_list.vue?vue&type=script&lang=js&
- /* harmony default export */ const dropdown_dropdown_listvue_type_script_lang_js_ = (dropdown_listvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./components/dropdown/dropdown_list.vue
-
-
-
-
-
-/* normalize component */
-;
-var dropdown_list_component = normalizeComponent(
-  dropdown_dropdown_listvue_type_script_lang_js_,
-  dropdown_listvue_type_template_id_c83c6b9a_render,
-  dropdown_listvue_type_template_id_c83c6b9a_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-  
-)
-
-/* harmony default export */ const dropdown_list = (dropdown_list_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/dropdown/dropdown_separator.vue?vue&type=template&id=7efcdecb&
 var dropdown_separatorvue_type_template_id_7efcdecb_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{staticClass:"dt-list-separator d-bgc-black-300 d-my4 d-mxn4",attrs:{"aria-hidden":"true"}})}
 var dropdown_separatorvue_type_template_id_7efcdecb_staticRenderFns = []
@@ -14433,7 +14366,6 @@ var dropdown_separator_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/dropdown/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!./components/input/input.vue?vue&type=template&id=5be97b31&
 var inputvue_type_template_id_5be97b31_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container",staticClass:"base-input",attrs:{"data-qa":"dt-input"}},[_c('label',{staticClass:"base-input__label",attrs:{"aria-details":_vm.$slots.description || _vm.description ? _vm.descriptionKey : undefined,"data-qa":"dt-input-label-wrapper"}},[_vm._t("labelSlot",function(){return [(_vm.labelVisible && _vm.label)?_c('div',{ref:"label",class:[
           'base-input__label-text',
@@ -20692,15 +20624,188 @@ 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=7027b3a3&
-var combobox_with_popovervue_type_template_id_7027b3a3_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){
+;// 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/stack/stack.vue?vue&type=template&id=ec7d952a&
+var stackvue_type_template_id_ec7d952a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.as,{tag:"component",class:[
+    'd-stack',
+    _vm.defaultDirection,
+    _vm.stackResponsive,
+    _vm.stackGap ]},[_vm._t("default")],2)}
+var stackvue_type_template_id_ec7d952a_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./components/stack/stack_constants.js
+const DT_STACK_DIRECTION = {
+  default: 'column',
+  column: 'column',
+  row: 'row',
+  'row-reverse': 'row-reverse',
+  'column-reverse': 'column-reverse'
+};
+const DT_STACK_RESPONSIVE_BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];
+const DT_STACK_GAP = ['0', '100', '200', '300', '400', '500', '600'];
+;// CONCATENATED MODULE: ./components/stack/utils.js
+
+
+function _isDefaultDirection(direction) {
+  return direction === DT_STACK_DIRECTION["default"];
+}
+
+function _getValidDirection(direction) {
+  if (directionPropType(direction) === 'string') {
+    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;
+  } else if (directionPropType(direction) === 'object') {
+    const {
+      default: defaultStyle
+    } = direction;
+    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;
+  } else {
+    return null;
+  }
+}
+
+function directionPropType(value) {
+  return typeof value;
+}
+function getDefaultDirectionClass(direction) {
+  return _getValidDirection(direction) ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}` : null;
+}
+function getResponsiveClasses(direction) {
+  if (directionPropType(direction) === 'object') {
+    return [...DT_STACK_RESPONSIVE_BREAKPOINTS.map(breakpoint => {
+      return direction[breakpoint] ? `d-stack--${breakpoint}--${direction[breakpoint]}` : null;
+    })];
+  } else {
+    return null;
+  }
+}
+function getGapClass(gap) {
+  return DT_STACK_GAP.includes(gap) ? `d-stack--gap-${gap}` : null;
+}
+;// CONCATENATED MODULE: ./components/stack/validators.js
+
+
+function directionValidator(direction) {
+  if (directionPropType(direction) === 'string') {
+    return Object.keys(DT_STACK_DIRECTION).includes(direction);
+  } else if (directionPropType(direction) === 'object') {
+    const {
+      default: defaultStyle
+    } = direction;
+    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);
+  } else {
+    return null;
+  }
+}
+function gapValidator(gap) {
+  return DT_STACK_GAP.includes(gap);
+}
+;// 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/stack/stack.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+/* harmony default export */ const stackvue_type_script_lang_js_ = ({
+  name: 'DtStack',
+  props: {
+    /**
+     * Set this prop to the direction to stack the items.
+     * You can override the default direction with 'default' key.
+     * All the undefined breakpoints will have 'default' value
+     */
+    direction: {
+      type: [String, Object],
+      default: 'column',
+      validator: direction => directionValidator(direction)
+    },
+
+    /**
+     * Set this prop to render stack as a specific HTML element.
+     */
+    as: {
+      type: String,
+      default: 'div'
+    },
+
+    /**
+     * Set this prop to have the space between each stack item
+     */
+    gap: {
+      type: String,
+      default: '0',
+      validator: gap => gapValidator(gap)
+    }
+  },
+
+  data() {
+    return {
+      DT_STACK_DIRECTION: DT_STACK_DIRECTION,
+      DT_STACK_GAP: DT_STACK_GAP,
+      DT_STACK_RESPONSIVE_BREAKPOINTS: DT_STACK_RESPONSIVE_BREAKPOINTS
+    };
+  },
+
+  computed: {
+    stackGap() {
+      return getGapClass(this.gap);
+    },
+
+    defaultDirection() {
+      return getDefaultDirectionClass(this.direction);
+    },
+
+    stackResponsive() {
+      return getResponsiveClasses(this.direction);
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/stack/stack.vue?vue&type=script&lang=js&
+ /* harmony default export */ const stack_stackvue_type_script_lang_js_ = (stackvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/stack/stack.vue
+
+
+
+
+
+/* normalize component */
+;
+var stack_component = normalizeComponent(
+  stack_stackvue_type_script_lang_js_,
+  stackvue_type_template_id_ec7d952a_render,
+  stackvue_type_template_id_ec7d952a_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const stack = (stack_component.exports);
+;// CONCATENATED MODULE: ./components/stack/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=8075a3ae&
+var combobox_with_popovervue_type_template_id_8075a3ae_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_7027b3a3_staticRenderFns = []
+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,"append-to":_vm.appendTo,"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_8075a3ae_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&
@@ -20809,6 +20914,8 @@ var combobox_with_popovervue_type_template_id_7027b3a3_staticRenderFns = []
 //
 //
 //
+//
+
 
 
 
@@ -21006,6 +21113,18 @@ var combobox_with_popovervue_type_template_id_7027b3a3_staticRenderFns = []
     emptyStateMessage: {
       type: String,
       default: ''
+    },
+
+    /**
+     * 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;
+      }
     }
   },
   emits: [
@@ -21170,8 +21289,8 @@ var combobox_with_popovervue_type_template_id_7027b3a3_staticRenderFns = []
 ;
 var combobox_with_popover_component = normalizeComponent(
   combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
-  combobox_with_popovervue_type_template_id_7027b3a3_render,
-  combobox_with_popovervue_type_template_id_7027b3a3_staticRenderFns,
+  combobox_with_popovervue_type_template_id_8075a3ae_render,
+  combobox_with_popovervue_type_template_id_8075a3ae_staticRenderFns,
   false,
   null,
   null,
@@ -21182,11 +21301,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=cd2212ea&
-var combobox_multi_selectvue_type_template_id_cd2212ea_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){
+;// 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=a62f00d6&
+var combobox_multi_selectvue_type_template_id_a62f00d6_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","append-to":_vm.appendTo},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_cd2212ea_staticRenderFns = []
+var combobox_multi_selectvue_type_template_id_a62f00d6_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -21402,6 +21521,8 @@ const CHIP_TOP_POSITION = {
 //
 //
 //
+//
+
 
 
 
@@ -21558,6 +21679,18 @@ const CHIP_TOP_POSITION = {
       type: String,
       default: null,
       validator: t => Object.values(MULTI_SELECT_SIZES).includes(t)
+    },
+
+    /**
+     * 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;
+      }
     }
   },
   emits: [
@@ -21888,8 +22021,8 @@ const CHIP_TOP_POSITION = {
 ;
 var combobox_multi_select_component = normalizeComponent(
   combobox_multi_select_combobox_multi_selectvue_type_script_lang_js_,
-  combobox_multi_selectvue_type_template_id_cd2212ea_render,
-  combobox_multi_selectvue_type_template_id_cd2212ea_staticRenderFns,
+  combobox_multi_selectvue_type_template_id_a62f00d6_render,
+  combobox_multi_selectvue_type_template_id_a62f00d6_staticRenderFns,
   false,
   null,
   null,
@@ -23104,6 +23237,7 @@ var grouped_chip_component = normalizeComponent(
 
 
 
+
 
 
  /// Recipes