@globalpayments/vega 2.16.0 → 2.17.0

package/dist/cjs/vega-dropdown_5.cjs.entry.js

@@ -11,18 +11,18 @@ const ui = require('./ui-fa68545a.js');
 const typeGuard = require('./typeGuard-b1a74545.js');
 const accessibility = require('./accessibility-bfa227f6.js');
 const domNodeSubjectObserverFactory = require('./domNodeSubjectObserverFactory-2bbdec29.js');
-const vegaEventId = require('./vegaEventId-d7774262.js');
+const vegaEventId = require('./vegaEventId-f375a6a3.js');
 const keyboardManagerSlimmer = require('./keyboardManagerSlimmer-304998bd.js');
 const elementAppenderSlimmer = require('./elementAppenderSlimmer-0590af69.js');
 const array = require('./array-6e559cde.js');
-const subStateObserverSlimmer = require('./subStateObserverSlimmer-48ad20a1.js');
+const subStateObserverSlimmer = require('./subStateObserverSlimmer-60e4d6da.js');
 const mutationObserverSlimmer = require('./mutationObserverSlimmer-8d99123c.js');
-const eventEmitSlimmer = require('./eventEmitSlimmer-ea57144a.js');
+const changeManager = require('./changeManager-7c13d64f.js');
+const vegaInternalEventId = require('./vegaInternalEventId-ac38dd4b.js');
+const eventEmitSlimmer = require('./eventEmitSlimmer-1d70a720.js');
 const childNodesNotifyObserverSlimmer = require('./childNodesNotifyObserverSlimmer-830ceb4d.js');
 const staticSubjectTitle = require('./staticSubjectTitle-380a1e34.js');
-const childNodesEventPreventSlimmer = require('./childNodesEventPreventSlimmer-7e1895d7.js');
-const changeManager = require('./changeManager-7c13d64f.js');
-const vegaInternalEventId = require('./vegaInternalEventId-173c4941.js');
+const childNodesEventPreventSlimmer = require('./childNodesEventPreventSlimmer-6848c3cf.js');
 require('./breakpoints-cb3291ba.js');
 require('./ui-077fc009.js');
 require('./regex-c1f70fd4.js');
@@ -34,9 +34,9 @@ require('./pixel-98f2a10c.js');
 require('./zIndexManager-48482b9d.js');
 require('./dynamic-slimmer-d5ea4204.js');
 require('./pageResizeObserverSlimmer-8d417925.js');
-require('./internalVegaEventManager-543c20cb.js');
+require('./internalVegaEventManager-743a124d.js');
 
-var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -81,8 +81,13 @@ class VegaDropdownRenderer extends globalSlimmerRegistry.VegaSlimmer {
       this.renderContentSlot(),
       this.renderDropdown()));
   }
+  /**
+   * TODO: We will use no-named slot for both template and source render mode. And will deprecate slot dropdown-content
+   */
   renderContentSlot() {
-    return this.renderModeController.isSourceRenderMode() ? index.h("slot", null) : index.h("slot", { name: "dropdown-content" });
+    return this.renderModeController.isSourceRenderMode() ? (index.h("slot", null)) : (index.h(index.Fragment, null,
+      index.h("slot", { name: "dropdown-content" }),
+      index.h("slot", null)));
   }
   renderDropdown() {
     const eventPreventFlag = this.host && this.host.dataset.vegaNoEventPrevent === 'true' ? 'true' : 'false';
@@ -140,32 +145,32 @@ class VegaDropdownRenderer extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
 }
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "host", void 0);
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "maxHeight", void 0);
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "searchable", void 0);
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "searchRenderer", void 0);
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "createRenderer", void 0);
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "listRenderer", void 0);
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "renderModeController", void 0);
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
 ], VegaDropdownRenderer.prototype, "componentDidRender", null);
 
-var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -211,23 +216,23 @@ class VegaDropdownSourceController extends globalSlimmerRegistry.VegaSlimmer {
       : [];
   }
 }
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaDropdownSourceController.prototype, "source", void 0);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaDropdownSourceController.prototype, "sourceForRender", void 0);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSourceController.prototype, "searchController", void 0);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaDropdownSourceController.prototype, "componentWillLoad", null);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentMethod('watchSource')
 ], VegaDropdownSourceController.prototype, "watchSource", null);
 
-var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -253,40 +258,38 @@ class VegaDropdownCreateRenderer extends globalSlimmerRegistry.VegaSlimmer {
       index.h("div", { class: "vega-dropdown-divider" }))));
   }
 }
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "searchString", void 0);
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "dynamicOption", void 0);
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "sourceForRender", void 0);
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "appenderController", void 0);
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "childrenController", void 0);
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "renderModeController", void 0);
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "createEventEmitter", void 0);
 
-var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 class VegaDropdownListRenderer extends globalSlimmerRegistry.VegaSlimmer {
-  async scrollToIndex() {
-    this.adjustListContainerMaxHeight();
-    const index = this.sourceForRender.findIndex((item) => item.key ===
-      (this.selectType === 'multiple' ? this.selectedSourceKey[0] : this.selectedSourceKey));
-    index >= 0 && (await this.virtualScrollRef.scrollToIndex(index));
+  constructor() {
+    super(...arguments);
+    this.defaultMaxHeightOfItemsContainer = 400;
   }
   /**
    * The below method is e2e-test covered in
@@ -296,6 +299,9 @@ class VegaDropdownListRenderer extends globalSlimmerRegistry.VegaSlimmer {
   getVirtualScrollRef() {
     return this.virtualScrollRef;
   }
+  getTemplateContainerRef() {
+    return this.templateContainerRef;
+  }
   renderBySource() {
     return (index.h(index.Fragment, null,
       this.renderLoading(),
@@ -330,81 +336,48 @@ class VegaDropdownListRenderer extends globalSlimmerRegistry.VegaSlimmer {
             return item['children']
               ? this.groupLevelRenderer.render(item, index, fixHeight)
               : this.itemLevelRenderer.render(item, fixHeight);
-          }, viewportMaxHeight: this.maxHeightOfItemsContainer, ref: (e) => (this.virtualScrollRef = e), isLoading: this.isLazyLoading }))));
+          }, viewportMaxHeight: this.defaultMaxHeightOfItemsContainer, ref: (e) => (this.virtualScrollRef = e), isLoading: this.isLazyLoading }))));
   }
   renderDropdownListBySlot() {
     return (index.h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
         [`vega-dropdown-item-display-${this.itemDisplayRule}`]: true,
         ['v-hidden']: this.isLoading,
-      }, style: {
-        maxHeight: `${this.maxHeightOfItemsContainer}px`,
-      } },
+      }, ref: (ref) => (this.templateContainerRef = ref) },
       index.h("slot", { name: "items" })));
   }
-  /**
-   * we only calculate surplus space of bottom, we should calculate maxHeight more accurately here.
-   * such as minus the gap of dropdown, the dropdown padding top and bottom, the gap of bottom.
-   * if with searchable, we should minus the height of searchable.
-   * if the dropdown in the top of host, we should only minus top of distance from vega-dropdown to vega-dropdown-container.
-   * The below method is e2e-test covered in
-   * @see{module:vega-dropdown-with-matchContainerHeight-e2e}
-   * @see{module:vega-dropdown-without-matchContainerHeight-e2e}
-   */
-  /* istanbul ignore next */
-  adjustListContainerMaxHeight() {
-    const dropdownRef = this.renderer.getDropdownContentBoxRef();
-    const dropdownMaxHeight = ui.extractNumberFromString(dropdownRef.style.maxHeight);
-    const excludeTop = this.searchable ? 59 : 8;
-    const paddingSpace = dropdownRef.classList.contains('vega-placement-top') ? 0 : 8 + 8;
-    const height = dropdownMaxHeight - excludeTop - 8 - paddingSpace;
-    dropdownRef.style.maxHeight = 'unset';
-    if (height <= 40) {
-      this.maxHeightOfItemsContainer = 40;
-      globalSlimmerRegistry.LogUtility.error("There have no space on the bottom to display dropdown, if you want to adjust position, you should make 'match-container-height' as false.");
-    }
-    else {
-      this.maxHeightOfItemsContainer = height;
-    }
-  }
 }
-__decorate$n([
+__decorate$o([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownListRenderer.prototype, "host", void 0);
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "isLoading", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "searchString", void 0);
-__decorate$n([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaDropdownListRenderer.prototype, "selectType", void 0);
-__decorate$n([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaDropdownListRenderer.prototype, "searchable", void 0);
-__decorate$n([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaDropdownListRenderer.prototype, "selectedSourceKey", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "itemDisplayRule", void 0);
-__decorate$n([
-  globalSlimmerRegistry.MapToComponentField({ writable: true })
-], VegaDropdownListRenderer.prototype, "maxHeightOfItemsContainer", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "sourceForRender", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "itemLevelRenderer", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "groupLevelRenderer", void 0);
-__decorate$n([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaDropdownListRenderer.prototype, "renderer", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "isLazyLoading", void 0);
+__decorate$o([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownListRenderer.prototype, "isDropdownShow", void 0);
+__decorate$o([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownListRenderer.prototype, "renderModeController", void 0);
 
-var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -415,17 +388,17 @@ class VegaDropdownItemLevelRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return (index.h("vega-dropdown-item", Object.assign({}, item, { itemKey: item.key, height: fixHeight, prefixIcon: item.prefixIcon })));
   }
 }
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "selectType", void 0);
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "selectedController", void 0);
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "sourceController", void 0);
 
-var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -474,35 +447,35 @@ class VegaDropdownSearchRenderer extends globalSlimmerRegistry.VegaSlimmer {
       index.h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, ref: this.onInputSearch }))));
   }
 }
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "searchable", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaDropdownSearchRenderer.prototype, "searchString", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "source", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "useDefaultFilter", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "searchEventEmitter", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "isDropdownShow", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "sourceController", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "renderModeController", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentMethod('search')
 ], VegaDropdownSearchRenderer.prototype, "userSearch", null);
 
-var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -567,26 +540,26 @@ class VegaDropdownKeyboardController extends keyboardManagerSlimmer.KeyboardMana
     };
   }
 }
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "host", void 0);
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "trigger", void 0);
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "isDropdownShow", void 0);
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "renderer", void 0);
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "appenderController", void 0);
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "listRenderer", void 0);
 
-var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -623,7 +596,6 @@ class VegaDropdownAppenderController extends elementAppenderSlimmer.ElementAppen
    */
   async watchIsDropdownShow() {
     if (this.isDropdownShow) {
-      await this.renderer.listRenderer.scrollToIndex();
       this.showEventEmitter.emit();
     }
     else {
@@ -649,71 +621,68 @@ class VegaDropdownAppenderController extends elementAppenderSlimmer.ElementAppen
     }
   }
 }
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "host", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "trigger", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaDropdownAppenderController.prototype, "isDropdownShow", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "positionRelativeTo", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "matchTargetWidth", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "matchContainerHeight", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "size", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "minWidth", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "maxWidth", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "translocation", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "maxHeight", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "placement", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "alignment", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "renderer", void 0);
-__decorate$j([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaDropdownAppenderController.prototype, "listRenderer", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "searchRenderer", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "showEventEmitter", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "hideEventEmitter", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentMethod('watchIsDropdownShow')
 ], VegaDropdownAppenderController.prototype, "watchIsDropdownShow", null);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentMethod('show')
 ], VegaDropdownAppenderController.prototype, "userShow", null);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentMethod('hide')
 ], VegaDropdownAppenderController.prototype, "userHide", null);
 
-var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -724,14 +693,14 @@ class VegaDropdownGroupLevelRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return (index.h("vega-dropdown-group", { label: item.label, key: item.key, divide: index$1 < this.sourceForRender.length - 1 }, item.children.map((children) => this.itemLevelRenderer.render(children, fixHeight))));
   }
 }
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownGroupLevelRenderer.prototype, "sourceForRender", void 0);
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownGroupLevelRenderer.prototype, "itemLevelRenderer", void 0);
 
-var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -816,20 +785,20 @@ class VegaDropdownSearchController extends globalSlimmerRegistry.VegaSlimmer {
     return label.replace(new RegExp(`(${this.searchString})`, 'g' + (this.caseSensitive ? '' : 'i')), `<b>$1</b>`);
   }
 }
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSearchController.prototype, "searchString", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSearchController.prototype, "caseSensitive", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSearchController.prototype, "useDefaultFilter", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSearchController.prototype, "searchable", void 0);
 
-var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -999,56 +968,56 @@ class VegaDropdownSelectedController extends globalSlimmerRegistry.VegaSlimmer {
     return result;
   }
 }
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "host", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "selectType", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "source", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaDropdownSelectedController.prototype, "selectedSourceKey", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "vegaDropdownClick", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "appenderController", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "childrenController", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "renderModeController", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "dropdownClickEventEmitter", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaDropdownSelectedController.prototype, "componentWillLoad", null);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentMethod('clearSelection')
 ], VegaDropdownSelectedController.prototype, "clearSelection", null);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentMethod('getSelection')
 ], VegaDropdownSelectedController.prototype, "getSelection", null);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentMethod('setSelection')
 ], VegaDropdownSelectedController.prototype, "watchSelectedRowKeySet", null);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentMethod('watchSelectType')
 ], VegaDropdownSelectedController.prototype, "watchSelectType", null);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentMethod('watchSelectedSourceKey')
 ], VegaDropdownSelectedController.prototype, "watchSelectedSourceKey", null);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentMethod('watchSource')
 ], VegaDropdownSelectedController.prototype, "watchSource", null);
 
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1089,17 +1058,17 @@ class VegaDropdownRenderModeController extends globalSlimmerRegistry.VegaSlimmer
     this.renderMode = parent.querySelector('[slot=items]') ? 'SLOT' : 'SOURCE';
   }
 }
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownRenderModeController.prototype, "host", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownRenderModeController.prototype, "renderer", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaDropdownRenderModeController.prototype, "connectedCallback", null);
 
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1160,7 +1129,9 @@ class VegaDropdownChildrenController extends globalSlimmerRegistry.VegaSlimmer {
    * The function "watchSource" synchronizes the dropdown current data.
    */
   watchSource() {
-    this.syncUpDropdownCurrentData();
+    if (this.renderModeController.isSourceRenderMode()) {
+      this.syncUpDropdownCurrentData();
+    }
   }
   /**
    * The function checks if a given label exists in a label set.
@@ -1190,6 +1161,7 @@ class VegaDropdownChildrenController extends globalSlimmerRegistry.VegaSlimmer {
     }
     else {
       this.collectKeyAndLabelFromSlot();
+      this.notifyTemplateItemsChange();
     }
   }
   /**
@@ -1219,41 +1191,48 @@ class VegaDropdownChildrenController extends globalSlimmerRegistry.VegaSlimmer {
     this.keySet.clear();
     this.labelSet.clear();
   }
+  /**
+   * The function `notifyTemplateItemsChange` notifies changes to dropdown items within a container element.
+   */
+  notifyTemplateItemsChange() {
+    const container = this.renderer.getDropdownContentBoxRef() || this.host;
+    changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalDropdownTemplateItemsChange), container.querySelectorAll('vega-dropdown-item'));
+  }
 }
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "host", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "source", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "sourceController", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "renderModeController", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "listRenderer", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "renderer", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "selectedController", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdownChildrenController.prototype, "mutationObserver", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaDropdownChildrenController.prototype, "disconnectedCallback", null);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaDropdownChildrenController.prototype, "componentWillLoad", null);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaDropdownChildrenController.prototype, "componentDidLoad", null);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentMethod('watchSource')
 ], VegaDropdownChildrenController.prototype, "watchSource", null);
 
@@ -1284,6 +1263,146 @@ const VegaDropdownRuntimeMetricsPayloadDefinition = [
   },
 ];
 
+var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The `VegaDropdownScrollableController` class in TypeScript manages the behavior of a scrollable dropdown component,
+ * adjusting list container height and scrolling to specific indexes based on render mode and selected source key.
+ */
+class VegaDropdownScrollableController extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * The function `watchIsDropdownShow` adjusts the list container height and scrolls to a specific index
+   * if the dropdown is shown in a certain render mode.
+   */
+  async watchIsDropdownShow() {
+    if (this.isDropdownShow) {
+      this.adjustListContainerMaxHeight();
+      await this.scrollToSelectedIndex();
+    }
+  }
+  /**
+   * The function scrollToSelected asynchronously scrolls to a selected index based on the render mode.
+   */
+  async scrollToSelectedIndex() {
+    this.renderModeController.isSourceRenderMode()
+      ? await this.scrollToVirtualIndex()
+      : this.scrollToTemplateIndex();
+  }
+  /**
+   * The function scrollToVirtualIndex asynchronously scrolls to a specific index in a virtual list based
+   * on the selected key.
+   */
+  async scrollToVirtualIndex() {
+    const index = this.sourceForRender.findIndex((item) => item.key === this.getSelectedKey());
+    index >= 0 && (await this.listRenderer.getVirtualScrollRef().scrollToIndex(index));
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-dropdown-scroll-to-selected-key-in-single-template-e2e}
+   * @see{module:vega-dropdown-scroll-to-selected-key-in-multiple-template-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * The function scrollToTemplateIndex scrolls the dropdown content box to the selected item key.
+   */
+  scrollToTemplateIndex() {
+    const scrolledKey = this.getSelectedKey();
+    if (scrolledKey) {
+      this.renderer
+        .getDropdownContentBoxRef()
+        .querySelector(`vega-dropdown-item[item-key='${scrolledKey}']`)
+        .scrollIntoView();
+    }
+  }
+  /**
+   * The function `getSelectedKey` returns the selected key based on the `selectType` condition.
+   *
+   * @returns {string} The `getSelectedKey` method returns a string value. If `this.selectType` is equal to
+   * 'multiple', it returns the first element of the `selectedSourceKey` array as a string. Otherwise, it
+   * returns the `selectedSourceKey` value as a string.
+   */
+  getSelectedKey() {
+    return this.selectType === 'multiple'
+      ? this.selectedSourceKey[0]
+      : this.selectedSourceKey;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-dropdown-with-matchContainerHeight-e2e}
+   * @see{module:vega-dropdown-without-matchContainerHeight-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * we only calculate surplus space of bottom, we should calculate maxHeight more accurately here.
+   * such as minus the gap of dropdown, the dropdown padding top and bottom, the gap of bottom.
+   * if with searchable, we should minus the height of searchable.
+   * if the dropdown in the top of host, we should only minus top of distance from vega-dropdown to vega-dropdown-container.
+   */
+  adjustListContainerMaxHeight() {
+    const dropdownRef = this.renderer.getDropdownContentBoxRef();
+    const dropdownMaxHeight = ui.extractNumberFromString(dropdownRef.style.maxHeight);
+    const excludeTop = this.searchable ? 59 : 8;
+    const paddingSpace = dropdownRef.classList.contains('vega-placement-top') ? 0 : 8 + 8;
+    const height = dropdownMaxHeight - excludeTop - 8 - paddingSpace;
+    dropdownRef.style.maxHeight = 'unset';
+    if (height <= 40) {
+      this.setItemsContainerMaxHeight(40);
+      globalSlimmerRegistry.LogUtility.error("There have no space on the bottom to display dropdown, if you want to adjust position, you should make 'match-container-height' as false.");
+    }
+    else {
+      this.setItemsContainerMaxHeight(height);
+    }
+  }
+  /**
+   * The function `setItemsContainerMaxHeight` adjusts the maximum height of the items container based on
+   * the render mode.
+   *
+   * @param {number} maxHeight - The `maxHeight` parameter is a number that represents the maximum height
+   * in pixels that the items container should have.
+   */
+  setItemsContainerMaxHeight(maxHeight) {
+    if (this.renderModeController.isSourceRenderMode()) {
+      this.listRenderer.getVirtualScrollRef().viewportMaxHeight = maxHeight;
+    }
+    else {
+      const templateContainerRef = this.listRenderer.getTemplateContainerRef();
+      templateContainerRef.style.overflowY = 'auto';
+      templateContainerRef.style.maxHeight = `${maxHeight}px`;
+    }
+  }
+}
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownScrollableController.prototype, "isDropdownShow", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownScrollableController.prototype, "renderModeController", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownScrollableController.prototype, "sourceForRender", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownScrollableController.prototype, "selectType", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownScrollableController.prototype, "selectedSourceKey", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownScrollableController.prototype, "searchable", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownScrollableController.prototype, "listRenderer", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownScrollableController.prototype, "renderer", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentMethod('watchIsDropdownShow')
+], VegaDropdownScrollableController.prototype, "watchIsDropdownShow", null);
+
 const vegaDropdownCss = ":host{display:inline-block}";
 
 var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -1327,6 +1446,7 @@ const VegaDropdown = class {
     this.childrenController = new VegaDropdownChildrenController();
     this.selectedController = new VegaDropdownSelectedController();
     this.renderModeController = new VegaDropdownRenderModeController();
+    this.scrollableController = new VegaDropdownScrollableController();
     this.selectTypeNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaDropdown, 'selectType', 'watchSelectType');
     this.selectedSourceKeyNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaDropdown, 'selectedSourceKey', 'watchSelectedSourceKey');
     this.prefixIconSlotNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaDropdown, 'prefixIconSlot', 'watchPrefixIconSlot');
@@ -1339,7 +1459,6 @@ const VegaDropdown = class {
     this.itemDisplayRuleNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaDropdown, 'itemDisplayRule', 'watchItemDisplayRule');
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer(VegaDropdownRuntimeMetricsPayloadDefinition);
     this.searchString = null;
-    this.maxHeightOfItemsContainer = 400;
     this.isDropdownShow = false;
     /**
      * Specifies the trigger mode for the dropdown.
@@ -1562,6 +1681,9 @@ __decorate$d([
 __decorate$d([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "renderModeController", void 0);
+__decorate$d([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdown.prototype, "scrollableController", void 0);
 __decorate$d([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectTypeNotifySlimmer", void 0);
@@ -1746,16 +1868,18 @@ class VegaDropdownItemRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return this.prefixIcon && index.h("vega-icon", { icon: this.prefixIcon, size: "size-16" });
   }
   renderLabel() {
-    if (this.label) {
+    // We prioritize slots, and when both slots and labels are defined, we can collect label information for component display,
+    // such as input select selected item display
+    if (this.host.childElementCount > 0 || this.host.textContent.trim() !== '') {
+      return (index.h("span", { class: "vega-dropdown-item-label" },
+        index.h("slot", null)));
+    }
+    else {
       return (index.h(index.Fragment, null,
         index.h("span", { innerHTML: this.label, class: "vega-dropdown-item-label" }),
         index.h("span", { class: "v-hidden" },
           index.h("slot", null))));
     }
-    else {
-      return (index.h("span", { class: "vega-dropdown-item-label" },
-        index.h("slot", null)));
-    }
   }
   renderCounter() {
     return (this.count > 0 && (index.h("div", { class: "item-counter" },
@@ -1854,6 +1978,7 @@ class VegaDropdownItemStateController extends subStateObserverSlimmer.SubStateOb
           },
         },
       ],
+      pullStatesWhenReattached: true,
     });
   }
 }