@dialpad/dialtone-vue 3.44.0 → 3.44.2

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [3.44.2](https://github.com/dialpad/dialtone-vue/compare/v3.44.1...v3.44.2) (2023-02-15)
+
+
+### Bug Fixes
+
+* add appendTo prop on all popover based components ([#766](https://github.com/dialpad/dialtone-vue/issues/766)) ([01c3a89](https://github.com/dialpad/dialtone-vue/commit/01c3a893c777da025adca6207c3def42896e16dd))
+* **Dropdown:** remove deprecated DropdownList ([#767](https://github.com/dialpad/dialtone-vue/issues/767)) ([006444d](https://github.com/dialpad/dialtone-vue/commit/006444dfb5afd3a76359906b27b47d247f3f5e29))
+
+## [3.44.1](https://github.com/dialpad/dialtone-vue/compare/v3.44.0...v3.44.1) (2023-02-14)
+
+
+### Bug Fixes
+
+* **Root Layout:** null protection on getElementTops ([#763](https://github.com/dialpad/dialtone-vue/issues/763)) ([58db83e](https://github.com/dialpad/dialtone-vue/commit/58db83ec6352446c3c4a10d2a4f520b8d4a7db5c))
+
 # [3.44.0](https://github.com/dialpad/dialtone-vue/compare/v3.43.0...v3.44.0) (2023-02-13)
 
 

package/dist/dialtone-vue.common.js

@@ -1166,7 +1166,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),
@@ -2013,9 +2012,9 @@ const BADGE_KIND_MODIFIERS = {
   label: '',
   count: 'd-badge--count'
 };
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/icon/icon.vue?vue&type=template&id=0c7462d0
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/icon/icon.vue?vue&type=template&id=7bf3355d
 
-function iconvue_type_template_id_0c7462d0_render(_ctx, _cache, $props, $setup, $data, $options) {
+function iconvue_type_template_id_7bf3355d_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (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)($options.currentIcon), {
     "data-qa": "dt-icon",
     "aria-hidden": $props.ariaLabel ? 'false' : 'true',
@@ -2023,9 +2022,12 @@ function iconvue_type_template_id_0c7462d0_render(_ctx, _cache, $props, $setup,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.iconSize)
   }, null, 8, ["aria-hidden", "aria-label", "class"]);
 }
-;// CONCATENATED MODULE: ./components/icon/icon.vue?vue&type=template&id=0c7462d0
+;// CONCATENATED MODULE: ./components/icon/icon.vue?vue&type=template&id=7bf3355d
 
+;// CONCATENATED MODULE: external "@dialpad/dialtone-icons"
+const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
 ;// CONCATENATED MODULE: ./components/icon/icon_constants.js
+
 const ICON_SIZE_MODIFIERS = {
   100: 'd-icon--size-100',
   200: 'd-icon--size-200',
@@ -2036,15 +2038,14 @@ const ICON_SIZE_MODIFIERS = {
   700: 'd-icon--size-700',
   800: 'd-icon--size-800'
 };
+const DIALTONE_ICONS = dialtone_icons_namespaceObject;
 /* harmony default export */ const icon_constants = ({
-  ICON_SIZE_MODIFIERS
+  ICON_SIZE_MODIFIERS,
+  DIALTONE_ICONS
 });
-;// CONCATENATED MODULE: external "@dialpad/dialtone-icons"
-const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/icon/icon.vue?vue&type=script&lang=js
 
 
-
 /**
  * The Icon component provides a set of glyphs and sizes to provide context your application.
  * @see https://dialpad.design/components/icon.html
@@ -2079,13 +2080,6 @@ const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
       default: undefined
     }
   },
-
-  data() {
-    return {
-      dialtoneIcons: dialtone_icons_namespaceObject
-    };
-  },
-
   computed: {
     iconSize() {
       return ICON_SIZE_MODIFIERS[this.size];
@@ -2096,7 +2090,7 @@ const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
     },
 
     currentIcon() {
-      return this.dialtoneIcons[this.iconName];
+      return DIALTONE_ICONS[this.iconName];
     }
 
   }
@@ -2109,7 +2103,7 @@ const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
 
 
 ;
-const icon_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(iconvue_type_script_lang_js, [['render',iconvue_type_template_id_0c7462d0_render]])
+const icon_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(iconvue_type_script_lang_js, [['render',iconvue_type_template_id_7bf3355d_render]])
 
 /* harmony default export */ const icon = (icon_exports_);
 ;// CONCATENATED MODULE: ./components/icon/index.js
@@ -12477,52 +12471,6 @@ const DROPDOWN_PADDING_CLASSES = {
 const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_878a8588_render]])
 
 /* harmony default export */ const dropdown = (dropdown_exports_);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/dropdown/dropdown_list.vue?vue&type=template&id=50f7e3e3
-
-const dropdown_listvue_type_template_id_50f7e3e3_hoisted_1 = {
-  key: 0,
-  class: "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"
-};
-function dropdown_listvue_type_template_id_50f7e3e3_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("li", null, [$props.heading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", dropdown_listvue_type_template_id_50f7e3e3_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.heading), 1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("ul", {
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-ps-relative', 'd-stack2', 'd-px0', $props.listClass]),
-    "data-qa": "dt-dropdown-list-wrapper"
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 2)]);
-}
-;// CONCATENATED MODULE: ./components/dropdown/dropdown_list.vue?vue&type=template&id=50f7e3e3
-
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./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
- 
-;// CONCATENATED MODULE: ./components/dropdown/dropdown_list.vue
-
-
-
-
-;
-const dropdown_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdown_listvue_type_script_lang_js, [['render',dropdown_listvue_type_template_id_50f7e3e3_render]])
-
-/* harmony default export */ const dropdown_list = (dropdown_list_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/dropdown/dropdown_separator.vue?vue&type=template&id=7efcdecb
 
 const dropdown_separatorvue_type_template_id_7efcdecb_hoisted_1 = {
@@ -12559,7 +12507,6 @@ const dropdown_separator_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)
 ;// CONCATENATED MODULE: ./components/dropdown/index.js
 
 
-
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/input/input.vue?vue&type=template&id=438498f3
 
 const inputvue_type_template_id_438498f3_hoisted_1 = {
@@ -17991,9 +17938,9 @@ function root_layoutvue_type_template_id_115594cd_render(_ctx, _cache, $props, $
 }
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=template&id=115594cd
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/root_layout/root_layout_body.vue?vue&type=template&id=2bcc4e0e
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/root_layout/root_layout_body.vue?vue&type=template&id=16544a46
 
-function root_layout_bodyvue_type_template_id_2bcc4e0e_render(_ctx, _cache, $props, $setup, $data, $options) {
+function root_layout_bodyvue_type_template_id_16544a46_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     ref: "root-layout-body",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__body', {
@@ -18028,7 +17975,7 @@ function root_layout_bodyvue_type_template_id_2bcc4e0e_render(_ctx, _cache, $pro
     tabindex: "0"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "content")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 6);
 }
-;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=template&id=2bcc4e0e
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=template&id=16544a46
 
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_constants.js
 const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
@@ -18162,8 +18109,10 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
     },
 
     getElementTops() {
-      this.sidebarTop = this.$refs['root-layout-sidebar'].offsetTop;
-      this.contentTop = this.$refs['root-layout-content'].offsetTop;
+      var _this$$refs$rootLayo, _this$$refs$rootLayo2;
+
+      this.sidebarTop = (_this$$refs$rootLayo = this.$refs['root-layout-sidebar']) === null || _this$$refs$rootLayo === void 0 ? void 0 : _this$$refs$rootLayo.offsetTop;
+      this.contentTop = (_this$$refs$rootLayo2 = this.$refs['root-layout-content']) === null || _this$$refs$rootLayo2 === void 0 ? void 0 : _this$$refs$rootLayo2.offsetTop;
     },
 
     getDocumentHeight() {
@@ -18174,10 +18123,10 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
 });
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=2bcc4e0e&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=16544a46&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=2bcc4e0e&lang=less
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=16544a46&lang=less
 
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue
 
@@ -18187,7 +18136,7 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
 ;
 
 
-const root_layout_body_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_layout_bodyvue_type_script_lang_js, [['render',root_layout_bodyvue_type_template_id_2bcc4e0e_render]])
+const root_layout_body_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_layout_bodyvue_type_script_lang_js, [['render',root_layout_bodyvue_type_template_id_16544a46_render]])
 
 /* harmony default export */ const root_layout_body = (root_layout_body_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout.vue?vue&type=script&lang=js
@@ -18340,17 +18289,17 @@ const root_layout_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_l
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=b78c0dda
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=262b81e3
 
-const combobox_with_popovervue_type_template_id_b78c0dda_hoisted_1 = ["id"];
-const combobox_with_popovervue_type_template_id_b78c0dda_hoisted_2 = {
+const combobox_with_popovervue_type_template_id_262b81e3_hoisted_1 = ["id"];
+const combobox_with_popovervue_type_template_id_262b81e3_hoisted_2 = {
   ref: "header"
 };
-const combobox_with_popovervue_type_template_id_b78c0dda_hoisted_3 = ["onMouseleave", "onFocusout"];
-const combobox_with_popovervue_type_template_id_b78c0dda_hoisted_4 = {
+const combobox_with_popovervue_type_template_id_262b81e3_hoisted_3 = ["onMouseleave", "onFocusout"];
+const combobox_with_popovervue_type_template_id_262b81e3_hoisted_4 = {
   ref: "footer"
 };
-function combobox_with_popovervue_type_template_id_b78c0dda_render(_ctx, _cache, $props, $setup, $data, $options) {
+function combobox_with_popovervue_type_template_id_262b81e3_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");
@@ -18389,7 +18338,7 @@ function combobox_with_popovervue_type_template_id_b78c0dda_render(_ctx, _cache,
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
         inputProps: inputProps,
         onInput: $options.handleDisplayList
-      })], 40, combobox_with_popovervue_type_template_id_b78c0dda_hoisted_1)];
+      })], 40, combobox_with_popovervue_type_template_id_262b81e3_hoisted_1)];
     }),
     list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref2 => {
       let {
@@ -18416,6 +18365,7 @@ function combobox_with_popovervue_type_template_id_b78c0dda_render(_ctx, _cache,
         "content-tabindex": null,
         modal: false,
         "auto-focus": false,
+        "append-to": $props.appendTo,
         "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
         "visually-hidden-close": _ctx.visuallyHiddenClose,
         onOpened: opened
@@ -18434,24 +18384,26 @@ function combobox_with_popovervue_type_template_id_b78c0dda_render(_ctx, _cache,
         }), null, 16, ["message"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
           key: 2,
           listProps: listProps
-        })], 42, combobox_with_popovervue_type_template_id_b78c0dda_hoisted_3)]),
+        })], 42, combobox_with_popovervue_type_template_id_262b81e3_hoisted_3)]),
         _: 2
       }, [$data.hasSlotContent(_ctx.$slots.header) ? {
         name: "headerContent",
-        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_b78c0dda_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
+        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_262b81e3_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
         key: "0"
       } : undefined, $data.hasSlotContent(_ctx.$slots.footer) ? {
         name: "footerContent",
-        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_b78c0dda_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
+        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_262b81e3_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
         key: "1"
-      } : undefined]), 1032, ["open", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "visually-hidden-close-label", "visually-hidden-close", "onOpened"])];
+      } : undefined]), 1032, ["open", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "append-to", "visually-hidden-close-label", "visually-hidden-close", "onOpened"])];
     }),
     _: 3
   }, 16, ["loading", "label", "label-visible", "size", "description", "empty-list", "empty-state-message", "show-list", "on-beginning-of-list", "on-end-of-list", "list-id"]);
 }
-;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=b78c0dda
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=262b81e3
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js
+/* eslint-disable vuejs-accessibility/no-static-element-interactions */
+
 
 
 
@@ -18649,6 +18601,18 @@ function combobox_with_popovervue_type_template_id_b78c0dda_render(_ctx, _cache,
     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: [
@@ -18810,32 +18774,32 @@ function combobox_with_popovervue_type_template_id_b78c0dda_render(_ctx, _cache,
 
 
 ;
-const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_with_popovervue_type_script_lang_js, [['render',combobox_with_popovervue_type_template_id_b78c0dda_render]])
+const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_with_popovervue_type_script_lang_js, [['render',combobox_with_popovervue_type_template_id_262b81e3_render]])
 
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_exports_);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=491f9b2d
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=3cb7ab4f
 
-const combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_1 = {
+const combobox_multi_selectvue_type_template_id_3cb7ab4f_hoisted_1 = {
   ref: "inputSlotWrapper",
   class: "d-ps-relative d-d-block"
 };
-const combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_2 = {
+const combobox_multi_selectvue_type_template_id_3cb7ab4f_hoisted_2 = {
   ref: "chipsWrapper",
   class: "d-ps-absolute d-mx2"
 };
-const combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_3 = {
+const combobox_multi_selectvue_type_template_id_3cb7ab4f_hoisted_3 = {
   ref: "header"
 };
-const combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_4 = {
+const combobox_multi_selectvue_type_template_id_3cb7ab4f_hoisted_4 = {
   key: 1,
   class: "d-ta-center d-py16"
 };
-const combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_5 = {
+const combobox_multi_selectvue_type_template_id_3cb7ab4f_hoisted_5 = {
   ref: "footer"
 };
-function combobox_multi_selectvue_type_template_id_491f9b2d_render(_ctx, _cache, $props, $setup, $data, $options) {
+function combobox_multi_selectvue_type_template_id_3cb7ab4f_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_chip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-chip");
 
   const _component_dt_input = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-input");
@@ -18854,13 +18818,14 @@ function combobox_multi_selectvue_type_template_id_491f9b2d_render(_ctx, _cache,
     "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
     "visually-hidden-close": _ctx.visuallyHiddenClose,
     "content-width": "anchor",
+    "append-to": $props.appendTo,
     onSelect: $options.onComboboxSelect
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createSlots)({
     input: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref => {
       let {
         onInput
       } = _ref;
-      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_2, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($props.selectedItems, item => {
+      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_3cb7ab4f_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_3cb7ab4f_hoisted_2, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($props.selectedItems, item => {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_chip, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
           ref_for: true,
           ref: "chips",
@@ -18902,19 +18867,19 @@ function combobox_multi_selectvue_type_template_id_491f9b2d_render(_ctx, _cache,
       onMousedown: _cache[1] || (_cache[1] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(() => {}, ["prevent"]))
     }, [!$props.loading ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
       key: 0
-    }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.loadingMessage), 1))], 544)]),
+    }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", combobox_multi_selectvue_type_template_id_3cb7ab4f_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.loadingMessage), 1))], 544)]),
     _: 2
   }, [$data.hasSlotContent(_ctx.$slots.header) ? {
     name: "header",
-    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_3cb7ab4f_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
     key: "0"
   } : undefined, $data.hasSlotContent(_ctx.$slots.footer) ? {
     name: "footer",
-    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_3cb7ab4f_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
     key: "1"
-  } : undefined]), 1032, ["label", "show-list", "max-height", "popover-offset", "has-suggestion-list", "visually-hidden-close-label", "visually-hidden-close", "onSelect"]);
+  } : undefined]), 1032, ["label", "show-list", "max-height", "popover-offset", "has-suggestion-list", "visually-hidden-close-label", "visually-hidden-close", "append-to", "onSelect"]);
 }
-;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=491f9b2d
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=3cb7ab4f
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
 // The item list for default story
@@ -19032,6 +18997,7 @@ const CHIP_TOP_POSITION = {
 
 
 
+
 /* harmony default export */ const combobox_multi_selectvue_type_script_lang_js = ({
   name: 'DtRecipeComboboxMultiSelect',
   components: {
@@ -19181,6 +19147,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: [
@@ -19514,7 +19492,7 @@ const CHIP_TOP_POSITION = {
 
 
 ;
-const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_multi_selectvue_type_script_lang_js, [['render',combobox_multi_selectvue_type_template_id_491f9b2d_render]])
+const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_multi_selectvue_type_script_lang_js, [['render',combobox_multi_selectvue_type_template_id_3cb7ab4f_render]])
 
 /* harmony default export */ const combobox_multi_select = (combobox_multi_select_exports_);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js