@globalpayments/vega 2.13.0-backfill-beta.2 → 2.50.0

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

@@ -2,39 +2,57 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1299d729.js');
-const component = require('./component-c3bbaf20.js');
-const globalSlimmerRegistry = require('./global-slimmer-registry-fdb2a041.js');
+const index = require('./index-7700600c.js');
+const component = require('./component-73a88c4e.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const placeholder = require('./placeholder-cb6d37ad.js');
-const componentUsageRuntimeMetrics = require('./componentUsageRuntimeMetrics-0fbcd33f.js');
-const ui = require('./ui-fa68545a.js');
-const typeGuard = require('./typeGuard-b1a74545.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
+const ui = require('./ui-13b42af0.js');
+const typeGuard = require('./type-guard-4ba85fdc.js');
 const accessibility = require('./accessibility-bfa227f6.js');
-const domNodeSubjectObserverFactory = require('./domNodeSubjectObserverFactory-2bbdec29.js');
-const vegaEventId = require('./vegaEventId-1a0eb6b5.js');
-const keyboardManagerSlimmer = require('./keyboardManagerSlimmer-304998bd.js');
-const elementAppenderSlimmer = require('./elementAppenderSlimmer-31397fa9.js');
-const array = require('./array-6e559cde.js');
-const subStateObserverSlimmer = require('./subStateObserverSlimmer-e61bda94.js');
-const eventEmitSlimmer = require('./eventEmitSlimmer-da0b3b8b.js');
-const childNodesNotifyObserverSlimmer = require('./childNodesNotifyObserverSlimmer-830ceb4d.js');
-const staticSubjectTitle = require('./staticSubjectTitle-380a1e34.js');
-const childNodesEventPreventSlimmer = require('./childNodesEventPreventSlimmer-29128c2a.js');
-const changeManager = require('./changeManager-7c13d64f.js');
-const vegaInternalEventId = require('./vegaInternalEventId-b27735af.js');
-require('./breakpoints-cb3291ba.js');
-require('./ui-077fc009.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-a7a3b196.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-d5826bff.js');
+const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-900cf2f5.js');
+const elementAppenderSlimmer = require('./element-appender-slimmer-e5ca155e.js');
+const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
+const vegaInternalEventId = require('./vega-internal-event-id-6cdc95fe.js');
+const array = require('./array-249289f2.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-06e0a8db.js');
+const mutationObserverSlimmer = require('./mutation-observer-slimmer-895b3d3e.js');
+const changeManager = require('./change-manager-a297e4d2.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-ee7a8c06.js');
+const childNodesNotifyObserverSlimmer = require('./child-nodes-notify-observer-slimmer-5817a53b.js');
+const staticSubjectTitle = require('./static-subject-title-7e7d791a.js');
+const translationSlimmer = require('./translation-slimmer-127a0f83.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-26ecfb15.js');
+const componentGlobalStyleSlimmer = require('./component-global-style-slimmer-6749808c.js');
+const subStateObserverSlimmer = require('./sub-state-observer-slimmer-66f3038c.js');
+require('./breakpoints-ebde4837.js');
+require('./ui-32e69595.js');
 require('./regex-c1f70fd4.js');
 require('./typography-4560e7f1.js');
-require('./keyboardManager-274fb90b.js');
-require('./responsiveFormatFacade-12dd896d.js');
-require('./number-459031f7.js');
-require('./zIndexManager-48482b9d.js');
-require('./dynamic-slimmer-d5ea4204.js');
-require('./pageResizeObserverSlimmer-8d417925.js');
-require('./internalVegaEventManager-a3672e0c.js');
+require('./observer-f49483e8.js');
+require('./keyboard-manager-2ccf4b16.js');
+require('./vega-skeleton-loader-controller-83e05b6c.js');
+require('./create-public-api-runtime-metrics-slimmer-a3d17afb.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+require('./page-resize-observer-slimmer-44e08878.js');
+require('./dark-mode-style-controller-4adb7fb2.js');
+require('./_commonjsHelpers-537d719a.js');
+require('./internal-vega-event-manager-58afcde7.js');
+require('./number-4816603d.js');
+require('./responsive-format-facade-325d3d90.js');
+require('./pixel-98f2a10c.js');
+require('./vega-env-manager-23b8b23c.js');
+require('./feature-flag-controller-5e58aae4.js');
+require('./index-8b247c17.js');
+require('./icon-manager-9a47399c.js');
+require('./wait-for-vega-handler-0a0738ac.js');
+require('./translation-e5003a00.js');
+require('./content-state-d2f6a5ac.js');
+require('./code-block-d0b98262.js');
 
-var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$t = (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;
@@ -79,16 +97,20 @@ 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() {
-    return (index.h("vega-dropdown-content-box", { ref: (e) => (this.dropdownContentBoxRef = e), style: { maxHeight: `${this.maxHeight}px` }, "data-parent-ref": this.host },
-      index.h("div", { ref: (e) => (this.dropdownRef = e), class: {
-          'vega-dropdown': true,
-          'vega-dropdown-with-searchable': this.searchable,
-        } },
+    const eventPreventFlag = this.host && this.host.dataset.vegaNoEventPrevent === 'true' ? 'true' : 'false';
+    return (index.h("vega-dropdown-content-box", { ref: (e) => (this.dropdownContentBoxRef = e), style: { maxHeight: `${this.maxHeight}px` }, "data-parent-ref": this.host, "data-vega-no-event-prevent": eventPreventFlag },
+      index.h("div", { ref: (e) => (this.dropdownRef = e), class: "vega-dropdown" },
         index.h("div", { class: "vega-dropdown-actions" },
+          this.resetRenderer.render(),
           this.searchRenderer.render(),
           this.createRenderer.render()),
         index.h("div", null,
@@ -137,32 +159,35 @@ class VegaDropdownRenderer extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
 }
-__decorate$q([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "host", void 0);
-__decorate$q([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "maxHeight", void 0);
-__decorate$q([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "searchable", void 0);
-__decorate$q([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "searchRenderer", void 0);
-__decorate$q([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "createRenderer", void 0);
-__decorate$q([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "listRenderer", void 0);
-__decorate$q([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "renderModeController", void 0);
-__decorate$q([
+__decorate$t([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownRenderer.prototype, "resetRenderer", void 0);
+__decorate$t([
   globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
 ], VegaDropdownRenderer.prototype, "componentDidRender", null);
 
-var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$s = (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;
@@ -189,7 +214,9 @@ class VegaDropdownSourceController extends globalSlimmerRegistry.VegaSlimmer {
    * The function sets the source for rendering by searching for a formatted source.
    */
   setRenderSource() {
-    this.sourceForRender = this.searchController.search(this.source);
+    if (this.renderModeController.isSourceRenderMode()) {
+      this.sourceForRender = this.searchController.search(this.source);
+    }
   }
   /**
    * The function "handleSource" performs validation, formatting, and rendering of a source.
@@ -208,23 +235,26 @@ class VegaDropdownSourceController extends globalSlimmerRegistry.VegaSlimmer {
       : [];
   }
 }
-__decorate$p([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaDropdownSourceController.prototype, "source", void 0);
-__decorate$p([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaDropdownSourceController.prototype, "sourceForRender", void 0);
-__decorate$p([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSourceController.prototype, "searchController", void 0);
-__decorate$p([
+__decorate$s([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownSourceController.prototype, "renderModeController", void 0);
+__decorate$s([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaDropdownSourceController.prototype, "componentWillLoad", null);
-__decorate$p([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentMethod('watchSource')
 ], VegaDropdownSourceController.prototype, "watchSource", null);
 
-var __decorate$o = (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;
@@ -250,40 +280,38 @@ class VegaDropdownCreateRenderer extends globalSlimmerRegistry.VegaSlimmer {
       index.h("div", { class: "vega-dropdown-divider" }))));
   }
 }
-__decorate$o([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "searchString", void 0);
-__decorate$o([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "dynamicOption", void 0);
-__decorate$o([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "sourceForRender", void 0);
-__decorate$o([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "appenderController", void 0);
-__decorate$o([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "childrenController", void 0);
-__decorate$o([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "renderModeController", void 0);
-__decorate$o([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "createEventEmitter", void 0);
 
-var __decorate$n = (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;
   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
@@ -293,8 +321,8 @@ class VegaDropdownListRenderer extends globalSlimmerRegistry.VegaSlimmer {
   getVirtualScrollRef() {
     return this.virtualScrollRef;
   }
-  getTemplateItemsRef() {
-    return this.templateItemsRef;
+  getTemplateContainerRef() {
+    return this.templateContainerRef;
   }
   renderBySource() {
     return (index.h(index.Fragment, null,
@@ -320,7 +348,9 @@ class VegaDropdownListRenderer extends globalSlimmerRegistry.VegaSlimmer {
       index.h("div", { class: {
           'vega-dropdown-empty-list': true,
           'v-hidden': this.sourceForRender.length > 0,
-        } }, this.searchString ? 'No results found' : 'No options'),
+        } }, this.searchString
+        ? this.translationSlimmer.t('No results found')
+        : this.translationSlimmer.t('No options')),
       index.h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
           'v-hidden': this.sourceForRender.length === 0,
         } },
@@ -330,81 +360,54 @@ 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: (e) => (this.templateItemsRef = e) },
+      }, ref: (ref) => (this.templateContainerRef = ref), onScroll: this.scrollableController.onScroll },
       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$q([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownListRenderer.prototype, "host", void 0);
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "isLoading", void 0);
-__decorate$n([
+__decorate$q([
   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$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "itemDisplayRule", void 0);
-__decorate$n([
-  globalSlimmerRegistry.MapToComponentField({ writable: true })
-], VegaDropdownListRenderer.prototype, "maxHeightOfItemsContainer", void 0);
-__decorate$n([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "sourceForRender", void 0);
-__decorate$n([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "itemLevelRenderer", void 0);
-__decorate$n([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "groupLevelRenderer", void 0);
-__decorate$n([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaDropdownListRenderer.prototype, "renderer", void 0);
-__decorate$n([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "isLazyLoading", void 0);
+__decorate$q([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownListRenderer.prototype, "isDropdownShow", void 0);
+__decorate$q([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownListRenderer.prototype, "renderModeController", void 0);
+__decorate$q([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownListRenderer.prototype, "scrollableController", void 0);
+__decorate$q([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownListRenderer.prototype, "translationSlimmer", void 0);
 
-var __decorate$m = (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;
@@ -412,20 +415,35 @@ var __decorate$m = (undefined && undefined.__decorate) || function (decorators,
 };
 class VegaDropdownItemLevelRenderer extends globalSlimmerRegistry.VegaSlimmer {
   render(item, fixHeight) {
+    const renderResult = this.remoteInvocationController.callRemoteItemRender(item, fixHeight);
+    if (renderResult)
+      return renderResult;
     return (index.h("vega-dropdown-item", Object.assign({}, item, { itemKey: item.key, height: fixHeight, prefixIcon: item.prefixIcon })));
   }
 }
-__decorate$m([
+__decorate$p([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "host", void 0);
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "selectType", void 0);
-__decorate$m([
+__decorate$p([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "caseSensitive", void 0);
+__decorate$p([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "searchString", void 0);
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "selectedController", void 0);
-__decorate$m([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "sourceController", void 0);
+__decorate$p([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "remoteInvocationController", void 0);
 
-var __decorate$l = (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;
@@ -440,12 +458,17 @@ class VegaDropdownSearchRenderer extends globalSlimmerRegistry.VegaSlimmer {
         this.searchInputRef.value = '';
     };
     this.onInputSearch = (node) => {
-      this.searchInputRef = node;
-      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, vegaEventId.VegaChange, (input) => {
-        this.search(input.detail);
+      if (node) {
+        this.searchInputRef = node;
+      }
+      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, domNodeSubjectFactory.VegaChange, (input) => {
+        this.search(input.detail, 'input');
       });
     };
-    this.search = (input) => {
+    this.search = (input, searchTrigger) => {
+      if (this.searchTriggerBy && this.searchTriggerBy !== searchTrigger) {
+        return;
+      }
       this.searchString = input;
       if (this.renderModeController.isSourceRenderMode()) {
         if (this.useDefaultFilter) {
@@ -454,15 +477,23 @@ class VegaDropdownSearchRenderer extends globalSlimmerRegistry.VegaSlimmer {
         }
         else if (this.isDropdownShow) {
           this.searchEventEmitter.emit(input);
+          this.searchTriggerEventEmitter.emit({
+            trigger: searchTrigger,
+            value: input,
+          });
         }
       }
       else {
         this.searchEventEmitter.emit(input);
+        this.searchTriggerEventEmitter.emit({
+          trigger: searchTrigger,
+          value: input,
+        });
       }
     };
   }
   userSearch(input) {
-    this.search(input);
+    this.search(input, 'input');
   }
   focus() {
     if (this.searchInputRef) {
@@ -470,39 +501,58 @@ class VegaDropdownSearchRenderer extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
   render() {
-    return (this.searchable && (index.h("div", { class: "vega-dropdown-search" },
-      index.h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, ref: this.onInputSearch }))));
+    return (this.searchable && (index.h(index.Fragment, null,
+      index.h("div", { class: "vega-dropdown-search" },
+        index.h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, ref: this.onInputSearch, 
+          /*
+           * The below method is e2e-test covered in
+           * @see{module:vega-dropdown-enter-key-trigger-search-e2e}
+           */
+          /* eslint-disable-next-line react/jsx-no-bind */
+          onKeyDown: 
+          /* istanbul ignore next */ (e) => {
+            if (e.code === 'Enter') {
+              this.search(this.searchInputRef.value, 'enter');
+            }
+          } })),
+      index.h("vega-divider", { margin: { y: 'size-4' } }))));
   }
 }
-__decorate$l([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "searchable", void 0);
-__decorate$l([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaDropdownSearchRenderer.prototype, "searchString", void 0);
-__decorate$l([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "source", void 0);
-__decorate$l([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "useDefaultFilter", void 0);
-__decorate$l([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "searchEventEmitter", void 0);
-__decorate$l([
+__decorate$o([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "searchTriggerEventEmitter", void 0);
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "isDropdownShow", void 0);
-__decorate$l([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "sourceController", void 0);
-__decorate$l([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "renderModeController", void 0);
-__decorate$l([
+__decorate$o([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "searchTriggerBy", void 0);
+__decorate$o([
   globalSlimmerRegistry.MapToComponentMethod('search')
 ], VegaDropdownSearchRenderer.prototype, "userSearch", null);
 
-var __decorate$k = (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;
@@ -567,26 +617,26 @@ class VegaDropdownKeyboardController extends keyboardManagerSlimmer.KeyboardMana
     };
   }
 }
-__decorate$k([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "host", void 0);
-__decorate$k([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "trigger", void 0);
-__decorate$k([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "isDropdownShow", void 0);
-__decorate$k([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "renderer", void 0);
-__decorate$k([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "appenderController", void 0);
-__decorate$k([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "listRenderer", void 0);
 
-var __decorate$j = (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;
@@ -602,20 +652,19 @@ class VegaDropdownAppenderController extends elementAppenderSlimmer.ElementAppen
    * This constructor initializes a dropdown component with various configuration options.
    */
   constructor() {
-    super(() => ({
-      target: this.host,
-      appendableElement: this.renderer.getDropdownContentBoxRef(),
-      positionRelativeTo: this.positionRelativeTo,
-      matchTargetWidth: this.matchTargetWidth,
-      matchContainerHeight: this.matchContainerHeight,
-      size: this.size,
-      minWidth: this.minWidth,
-      maxWidth: this.maxWidth,
-      translocation: this.translocation,
-      maxHeight: this.maxHeight,
-      placement: this.placement,
-      alignment: this.alignment,
-    }), () => this.trigger);
+    super(() => this.generateShowConfigFactory(), () => this.trigger);
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]{@link VegaPopover.connectedCallback}
+   */
+  connectedCallback() {
+    this.registerRemoteMethod();
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]{@link VegaPopover.disconnectedCallback}
+   */
+  disconnectedCallback() {
+    remoteInvocationRegistry.remoteInvocationRegistry.unRegister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalDropdownUpdateTarget));
   }
   /**
    * The function `watchIsDropdownShow` checks if the dropdown is shown and performs certain actions
@@ -623,7 +672,6 @@ class VegaDropdownAppenderController extends elementAppenderSlimmer.ElementAppen
    */
   async watchIsDropdownShow() {
     if (this.isDropdownShow) {
-      await this.renderer.listRenderer.scrollToIndex();
       this.showEventEmitter.emit();
     }
     else {
@@ -648,72 +696,109 @@ class VegaDropdownAppenderController extends elementAppenderSlimmer.ElementAppen
       this.hide();
     }
   }
+  /**
+   * Generate the show configuration for the dropdown.
+   *
+   * @returns {ElementAppenderShowConfig} The show configuration for the dropdown.
+   */
+  generateShowConfigFactory() {
+    return {
+      target: this.target || this.host,
+      appendableElement: this.renderer.getDropdownContentBoxRef(),
+      positionRelativeTo: this.positionRelativeTo,
+      matchTargetWidth: this.matchTargetWidth,
+      matchContainerHeight: this.matchContainerHeight,
+      size: this.size,
+      minWidth: this.minWidth,
+      maxWidth: this.maxWidth,
+      translocation: this.translocation,
+      maxHeight: this.maxHeight,
+      placement: this.placement,
+      alignment: this.alignment,
+      isScreenPosition: this.isScreenPosition,
+    };
+  }
+  /**
+   * Register a remote method to update the target element of the dropdown.
+   */
+  registerRemoteMethod() {
+    remoteInvocationRegistry.remoteInvocationRegistry.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalDropdownUpdateTarget), (target) => {
+      this.target = target;
+      super.updateShowConfigFactory(this.generateShowConfigFactory.bind(this));
+    });
+  }
 }
-__decorate$j([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "host", void 0);
-__decorate$j([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "trigger", void 0);
-__decorate$j([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaDropdownAppenderController.prototype, "isDropdownShow", void 0);
-__decorate$j([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "positionRelativeTo", void 0);
-__decorate$j([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "matchTargetWidth", void 0);
-__decorate$j([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "matchContainerHeight", void 0);
-__decorate$j([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "size", void 0);
-__decorate$j([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "minWidth", void 0);
-__decorate$j([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "maxWidth", void 0);
-__decorate$j([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "translocation", void 0);
-__decorate$j([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "maxHeight", void 0);
-__decorate$j([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "placement", void 0);
-__decorate$j([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "alignment", void 0);
-__decorate$j([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "renderer", void 0);
-__decorate$j([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaDropdownAppenderController.prototype, "listRenderer", void 0);
-__decorate$j([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "searchRenderer", void 0);
-__decorate$j([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "showEventEmitter", void 0);
-__decorate$j([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "hideEventEmitter", void 0);
-__decorate$j([
+__decorate$m([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownAppenderController.prototype, "isScreenPosition", void 0);
+__decorate$m([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], VegaDropdownAppenderController.prototype, "connectedCallback", null);
+__decorate$m([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaDropdownAppenderController.prototype, "disconnectedCallback", null);
+__decorate$m([
   globalSlimmerRegistry.MapToComponentMethod('watchIsDropdownShow')
 ], VegaDropdownAppenderController.prototype, "watchIsDropdownShow", null);
-__decorate$j([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentMethod('show')
 ], VegaDropdownAppenderController.prototype, "userShow", null);
-__decorate$j([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentMethod('hide')
 ], VegaDropdownAppenderController.prototype, "userHide", null);
 
-var __decorate$i = (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;
@@ -724,14 +809,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$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownGroupLevelRenderer.prototype, "sourceForRender", void 0);
-__decorate$i([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownGroupLevelRenderer.prototype, "itemLevelRenderer", void 0);
 
-var __decorate$h = (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;
@@ -752,7 +837,17 @@ class VegaDropdownSearchController extends globalSlimmerRegistry.VegaSlimmer {
    * @returns {VegaDropdownSourceItem[]} an array of `VegaDropdownSourceItem` objects.
    */
   search(source) {
-    return this.searchString ? this.searchSource(source, []) : source;
+    return this.canSearch() ? this.searchSource(source, []) : source;
+  }
+  /**
+   * The function `canSearch` returns true if the conditions for searching are met.
+   *
+   * @returns {boolean} The method `canSearch()` returns a boolean value based on the conditions specified in the
+   * return statement. It returns `true` if `useDefaultFilter` is true, `searchable` is true, and
+   * `searchString` is not an empty string; otherwise, it returns `false`.
+   */
+  canSearch() {
+    return this.useDefaultFilter && !!this.searchString;
   }
   /**
    * The function `searchSource` recursively searches through a nested list of `VegaDropdownSourceItem`
@@ -768,6 +863,9 @@ class VegaDropdownSearchController extends globalSlimmerRegistry.VegaSlimmer {
    * @returns {VegaDropdownSourceItem[]} an array of VegaDropdownSourceItem objects.
    */
   searchSource(source, result) {
+    const searchResult = this.remoteInvocationController.callRemoteSearch(source, this.searchString, this.caseSensitive);
+    if (searchResult)
+      return searchResult;
     source.forEach((item) => {
       if (item['children']) {
         const filtered = this.searchSource(item['children'], []);
@@ -806,14 +904,26 @@ class VegaDropdownSearchController extends globalSlimmerRegistry.VegaSlimmer {
     return label.replace(new RegExp(`(${this.searchString})`, 'g' + (this.caseSensitive ? '' : 'i')), `<b>$1</b>`);
   }
 }
-__decorate$h([
+__decorate$k([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownSearchController.prototype, "host", void 0);
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSearchController.prototype, "searchString", void 0);
-__decorate$h([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSearchController.prototype, "caseSensitive", void 0);
+__decorate$k([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownSearchController.prototype, "useDefaultFilter", void 0);
+__decorate$k([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownSearchController.prototype, "searchable", void 0);
+__decorate$k([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownSearchController.prototype, "remoteInvocationController", void 0);
 
-var __decorate$g = (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;
@@ -839,7 +949,7 @@ class VegaDropdownSelectedController extends globalSlimmerRegistry.VegaSlimmer {
   /**
    * The callback to handle [getSelection]{@link VegaTable.getSelection}
    *
-   * @returns {string[]} The selected row keys array
+   * @returns {string[] | string} The selected row keys array
    */
   getSelection() {
     return this.selectedSourceKey;
@@ -922,8 +1032,35 @@ class VegaDropdownSelectedController extends globalSlimmerRegistry.VegaSlimmer {
     }
     this.dropdownClickEventEmitter.emit(key);
   }
+  /**
+   * The reset action.
+   */
+  reset() {
+    this.selectedSourceKey = this.selectType === 'multiple' ? [] : '';
+    if (this.selectType !== 'multiple') {
+      this.appenderController.hide();
+    }
+    this.resetEventEmitter.emit();
+  }
   /**
    * The function checks if the given item belongs to the current dropdown.
+   * There have two cases:
+   *   <vega-dropdown trigger="click">
+   *      <div slot="items">
+   *          // Case 1:
+   *          // This item is in current vega-dropdown-content-box
+   *	        <vega-dropdown-item label="Item 1" item-key="item1"></vega-dropdown-item>
+   *          <vega-dropdown trigger="click">
+   *              // Case 2:
+   *              // This item is in current vega-dropdown-content-box, but it also in nest dropdown content slot
+   *              // and not the realy item of parent dropdown, So we should have filter it out.
+   *              <vega-dropdown-item label="Item 2" item-key="item2"></vega-dropdown-item>
+   *              <div slot="items">
+   *                 ...
+   *              </div>
+   *          </vega-dropdown>
+   *      </div>
+   *  <vega-dropdown>
    *
    * @param {HTMLElement} item - The `item` parameter is an HTMLElement, which represents an element in
    * the DOM (Document Object Model). It is the element that we want to check if it is currently in a
@@ -932,7 +1069,8 @@ class VegaDropdownSelectedController extends globalSlimmerRegistry.VegaSlimmer {
    */
   isCurrentDropdown(item) {
     const appender = ui.findParent(item, 'vega-dropdown-content-box');
-    return this.host === appender['data-parent-ref'];
+    const isNestTriggerItem = item.parentElement.tagName === 'VEGA-DROPDOWN' || !!ui.findParent(item, 'vega-dropdown');
+    return this.host === appender['data-parent-ref'] && !isNestTriggerItem;
   }
   /**
    * The function `checkSelectedSourceKey` checks if the selected source key is valid based on the select
@@ -944,7 +1082,6 @@ class VegaDropdownSelectedController extends globalSlimmerRegistry.VegaSlimmer {
   checkSelectedSourceKey(key) {
     if (this.renderModeController.isSourceRenderMode()) {
       let result;
-      this.childrenController.syncUpDropdownCurrentData();
       if (typeof key === 'string' &&
         this.selectType === 'single' &&
         this.childrenController.isKeyExist(key)) {
@@ -984,56 +1121,59 @@ class VegaDropdownSelectedController extends globalSlimmerRegistry.VegaSlimmer {
     return result;
   }
 }
-__decorate$g([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "host", void 0);
-__decorate$g([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "selectType", void 0);
-__decorate$g([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "source", void 0);
-__decorate$g([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaDropdownSelectedController.prototype, "selectedSourceKey", void 0);
-__decorate$g([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "vegaDropdownClick", void 0);
-__decorate$g([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "appenderController", void 0);
-__decorate$g([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "childrenController", void 0);
-__decorate$g([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "renderModeController", void 0);
-__decorate$g([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "dropdownClickEventEmitter", void 0);
-__decorate$g([
+__decorate$j([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownSelectedController.prototype, "resetEventEmitter", void 0);
+__decorate$j([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaDropdownSelectedController.prototype, "componentWillLoad", null);
-__decorate$g([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentMethod('clearSelection')
 ], VegaDropdownSelectedController.prototype, "clearSelection", null);
-__decorate$g([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentMethod('getSelection')
 ], VegaDropdownSelectedController.prototype, "getSelection", null);
-__decorate$g([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentMethod('setSelection')
 ], VegaDropdownSelectedController.prototype, "watchSelectedRowKeySet", null);
-__decorate$g([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentMethod('watchSelectType')
 ], VegaDropdownSelectedController.prototype, "watchSelectType", null);
-__decorate$g([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentMethod('watchSelectedSourceKey')
 ], VegaDropdownSelectedController.prototype, "watchSelectedSourceKey", null);
-__decorate$g([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentMethod('watchSource')
 ], VegaDropdownSelectedController.prototype, "watchSource", null);
 
-var __decorate$f = (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;
@@ -1074,176 +1214,478 @@ class VegaDropdownRenderModeController extends globalSlimmerRegistry.VegaSlimmer
     this.renderMode = parent.querySelector('[slot=items]') ? 'SLOT' : 'SOURCE';
   }
 }
-__decorate$f([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownRenderModeController.prototype, "host", void 0);
-__decorate$f([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownRenderModeController.prototype, "renderer", void 0);
-__decorate$f([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaDropdownRenderModeController.prototype, "connectedCallback", null);
 
-var __decorate$e = (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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The controller for the table children components.
+ */
+class VegaDropdownChildrenController extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.mutationObserver = new mutationObserverSlimmer.MutationObserverSlimmer({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      target: () => this.renderer.getDropdownContentBoxRef(),
+      options: {
+        childList: true,
+        subtree: true,
+      },
+      /*
+       * The below method is e2e-test covered in
+       * @see{module:vega-dropdown-items-dom-change-e2e}
+       */
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      callback: /* istanbul ignore next */ () => this.syncUpDropdownCurrentData(),
+    });
+    this.labelSet = new Set();
+    this.keySet = new Set();
+    /**
+     * The `syncUpDropdownCurrentDataBySlot` method is responsible for
+     * synchronizing the current data in a dropdown based on the items present in the slot.
+     */
+    this.collectKeyAndLabelFromSlot = () => {
+      const container = this.renderer.getDropdownContentBoxRef() || this.host;
+      Array.from(container.querySelectorAll('vega-dropdown-item')).forEach((item) => {
+        item.label && this.labelSet.add(item.label);
+        item.itemKey && this.keySet.add(item.itemKey);
+      });
+    };
+  }
+  /**
+   * Component lifecycle - [disconnectedCallback]
+   */
+  /* istanbul ignore next */
+  disconnectedCallback() {
+  }
+  /**
+   * Component lifecycle - [componentWillLoad]
+   */
+  componentWillLoad() {
+    this.syncUpDropdownCurrentData();
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]
+   */
+  componentDidLoad() {
+  }
+  /**
+   * The function "watchSource" synchronizes the dropdown current data.
+   */
+  watchSource() {
+    if (this.renderModeController.isSourceRenderMode()) {
+      this.syncUpDropdownCurrentData();
+    }
+  }
+  /**
+   * The function checks if a given label exists in a label set.
+   *
+   * @param {string} label - A string representing the label to check if it exists.
+   * @returns {boolean} A boolean value is being returned.
+   */
+  isLabelExist(label) {
+    return this.labelSet.has(label);
+  }
+  /**
+   * The function checks if a given key exists in a set.
+   *
+   * @param {string} key - A string representing the key to check if it exists in the keySet.
+   * @returns {boolean} A boolean value indicating whether the given key exists in the keySet.
+   */
+  isKeyExist(key) {
+    return this.keySet.has(key);
+  }
+  /**
+   * The function syncs up the current data of a dropdown based on the render mode.
+   */
+  syncUpDropdownCurrentData() {
+    this.clearDropdownCurrentData();
+    if (this.renderModeController.isSourceRenderMode()) {
+      this.collectKeyAndLabelFromSource(this.source);
+    }
+    else {
+      this.collectKeyAndLabelFromSlot();
+      this.notifyTemplateItemsChange();
+    }
+  }
+  /**
+   * The function collects unique labels and keys from a nested array of objects.
+   *
+   * @param {VegaDropdownSourceItem[]} items - An array of objects representing dropdown source items.
+   * Each object should have a "label" property representing the label of the dropdown option, and a
+   * "key" property representing the value of the dropdown option. Additionally, each object can have a
+   * "children" property which is an array of nested dropdown source items
+   */
+  collectKeyAndLabelFromSource(items) {
+    items.forEach((item) => {
+      if (item['children']) {
+        this.collectKeyAndLabelFromSource(item['children']);
+      }
+      else {
+        this.labelSet.add(item.label);
+        this.keySet.add(item.key);
+      }
+    });
+  }
+  /* istanbul ignore next */
+  /**
+   * The below method is e2e-test covered in @see{module:vega-dropdown-items-dom-change-e2e}
+   */
+  clearDropdownCurrentData() {
+    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(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalDropdownTemplateItemsChange), container.querySelectorAll('vega-dropdown-item'));
+  }
+}
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownChildrenController.prototype, "host", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownChildrenController.prototype, "source", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownChildrenController.prototype, "sourceController", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownChildrenController.prototype, "renderModeController", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownChildrenController.prototype, "listRenderer", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownChildrenController.prototype, "renderer", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownChildrenController.prototype, "selectedController", void 0);
+__decorate$h([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdownChildrenController.prototype, "mutationObserver", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaDropdownChildrenController.prototype, "disconnectedCallback", null);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], VegaDropdownChildrenController.prototype, "componentWillLoad", null);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
+], VegaDropdownChildrenController.prototype, "componentDidLoad", null);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentMethod('watchSource')
+], VegaDropdownChildrenController.prototype, "watchSource", null);
+
+const VegaDropdownRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_USING_TEMPLATE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the dropdown',
+    /**
+     * The function checks if the length `source` property of the `host` element is equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.source.length === 0,
+  },
+  {
+    payloadKey: 'IS_USING_DATA_SOURCE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the dropdown',
+    /**
+     * The function checks if the length `source` property of the `host` element is not equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.source.length > 0,
+  },
+];
+
+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;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /**
- * The controller for the table children components.
+ * 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 VegaDropdownChildrenController extends globalSlimmerRegistry.VegaSlimmer {
+class VegaDropdownScrollableController extends globalSlimmerRegistry.VegaSlimmer {
   constructor() {
     super(...arguments);
-    this.labelSet = new Set();
-    this.keySet = new Set();
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-dropdown-shadow-root-scroll-e2e}
+     */
+    /* istanbul ignore next */
     /**
-     * The `syncUpDropdownCurrentDataBySlot` method is responsible for
-     * synchronizing the current data in a dropdown based on the items present in the slot.
+     * Listen scrolling of dropdown content
      */
-    this.collectKeyAndLabelFromSlot = () => {
-      const container = this.renderer.getDropdownRef() || this.host;
-      Array.from(container.querySelectorAll('vega-dropdown-item')).forEach((item) => {
-        item.label && this.labelSet.add(item.label);
-        item.itemKey && this.keySet.add(item.itemKey);
-      });
+    this.onScroll = () => {
+      !this.renderModeController.isSourceRenderMode() &&
+        changeManager.ChangeManager.notify(staticSubjectTitle.SHADOW_ROOT_ELEMENT_SCROLLING, {
+          host: this.renderer.getDropdownContentBoxRef(),
+        });
     };
   }
   /**
-   * Component lifecycle - [disconnectedCallback]
+   * The function `watchIsDropdownShow` adjusts the list container height and scrolls to a specific index
+   * if the dropdown is shown in a certain render mode.
    */
-  /* istanbul ignore next */
-  disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  async watchIsDropdownShow() {
+    if (this.isDropdownShow) {
+      this.adjustListContainerMaxHeight();
+      await this.scrollToSelectedIndex();
+    }
   }
   /**
-   * Component lifecycle - [componentWillLoad]
+   * While resettable, we should listen selected key to decide adjust max height of list container.
+   *
+   * @param {string[] | string} newValue - new value.
+   * @param {string[] | string} oldValue - old value.
    */
-  componentWillLoad() {
-    this.syncUpDropdownCurrentData();
+  watchSelectedSourceKey(newValue, oldValue) {
+    if (this.resettable &&
+      ((newValue && newValue.length > 0 && (!oldValue || oldValue.length === 0)) ||
+        ((!newValue || newValue.length === 0) && oldValue && oldValue.length > 0))) {
+      this.adjustListContainerMaxHeight();
+    }
   }
   /**
-   * Component lifecycle - [componentDidLoad]
+   * The function scrollToSelected asynchronously scrolls to a selected index based on the render mode.
    */
-  componentDidLoad() {
-    this.initMutationObserver();
+  async scrollToSelectedIndex() {
+    this.renderModeController.isSourceRenderMode()
+      ? await this.scrollToVirtualIndex()
+      : this.scrollToTemplateIndex();
   }
   /**
-   * The function "watchSource" synchronizes the dropdown current data.
+   * The function scrollToVirtualIndex asynchronously scrolls to a specific index in a virtual list based
+   * on the selected key.
    */
-  watchSource() {
-    this.syncUpDropdownCurrentData();
+  async scrollToVirtualIndex() {
+    const index = this.sourceForRender.findIndex((item) => item.key === this.getSelectedKey());
+    index >= 0 && (await this.listRenderer.getVirtualScrollRef().scrollToIndex(index));
   }
-  /**
-   * The function checks if a given label exists in a label set.
-   *
-   * @param {string} label - A string representing the label to check if it exists.
-   * @returns {boolean} A boolean value is being returned.
+  /*
+   * 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}
    */
-  isLabelExist(label) {
-    return this.labelSet.has(label);
+  /* istanbul ignore next */
+  /**
+   * The function scrollToTemplateIndex scrolls the dropdown content box to the selected item key.
+   */
+  scrollToTemplateIndex() {
+    const scrolledKey = this.getSelectedKey();
+    if (scrolledKey) {
+      const dropdownContent = this.renderer.getDropdownContentBoxRef();
+      const selectedItem = dropdownContent.querySelector(`vega-dropdown-item[item-key='${scrolledKey}']`);
+      const ul = dropdownContent.shadowRoot.querySelector('ul');
+      const ulRect = ul.getBoundingClientRect();
+      const itemRect = selectedItem.getBoundingClientRect();
+      ul.scrollTop = itemRect.top - ulRect.top + ul.scrollTop;
+    }
   }
   /**
-   * The function checks if a given key exists in a set.
+   * The function `getSelectedKey` returns the selected key based on the `selectType` condition.
    *
-   * @param {string} key - A string representing the key to check if it exists in the keySet.
-   * @returns {boolean} A boolean value indicating whether the given key exists in the keySet.
+   * @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.
    */
-  isKeyExist(key) {
-    return this.keySet.has(key);
+  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 */
   /**
-   * The function syncs up the current data of a dropdown based on the render mode.
+   * 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.
    */
-  syncUpDropdownCurrentData() {
-    this.clearDropdownCurrentData();
-    if (this.renderModeController.isSourceRenderMode()) {
-      this.collectKeyAndLabelFromSource(this.source);
+  adjustListContainerMaxHeight() {
+    const dropdownRef = this.renderer.getDropdownContentBoxRef();
+    if (!dropdownRef)
+      return;
+    const dropdownMaxHeight = ui.extractNumberFromString(dropdownRef.style.maxHeight);
+    const searchActionContentHeight = this.searchable
+      ? VegaDropdownScrollableController.actionButtonContentHeight
+      : 0;
+    const resetActionContentHeight = this.resettable && this.selectedSourceKey.length > 0
+      ? VegaDropdownScrollableController.actionButtonContentHeight
+      : 0;
+    const layoutSpaceSpace = dropdownRef.classList.contains('vega-placement-top')
+      ? 0
+      : VegaDropdownScrollableController.dropdownLayoutSpaceHeight;
+    const height = dropdownMaxHeight - searchActionContentHeight - layoutSpaceSpace - resetActionContentHeight;
+    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.collectKeyAndLabelFromSlot();
+      this.setItemsContainerMaxHeight(height);
     }
   }
   /**
-   * The function collects unique labels and keys from a nested array of objects.
+   * The function `setItemsContainerMaxHeight` adjusts the maximum height of the items container based on
+   * the render mode.
    *
-   * @param {VegaDropdownSourceItem[]} items - An array of objects representing dropdown source items.
-   * Each object should have a "label" property representing the label of the dropdown option, and a
-   * "key" property representing the value of the dropdown option. Additionally, each object can have a
-   * "children" property which is an array of nested dropdown source items
+   * @param {number} maxHeight - The `maxHeight` parameter is a number that represents the maximum height
+   * in pixels that the items container should have.
    */
-  collectKeyAndLabelFromSource(items) {
-    items.forEach((item) => {
-      if (item['children']) {
-        this.collectKeyAndLabelFromSource(item['children']);
-      }
-      else {
-        this.labelSet.add(item.label);
-        this.keySet.add(item.key);
-      }
-    });
+  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`;
+    }
   }
-  /* istanbul ignore next */
+}
+VegaDropdownScrollableController.actionButtonContentHeight = 49; // actionHeight(40) + dividerHeight(paddingY + dividerHeight = 9);
+VegaDropdownScrollableController.dropdownLayoutSpaceHeight = 10; // paddingY + borderY;
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownScrollableController.prototype, "isDropdownShow", void 0);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownScrollableController.prototype, "renderModeController", void 0);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownScrollableController.prototype, "sourceForRender", void 0);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownScrollableController.prototype, "selectType", void 0);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownScrollableController.prototype, "selectedSourceKey", void 0);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownScrollableController.prototype, "searchable", void 0);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownScrollableController.prototype, "listRenderer", void 0);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownScrollableController.prototype, "renderer", void 0);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownScrollableController.prototype, "resettable", void 0);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentMethod('watchIsDropdownShow')
+], VegaDropdownScrollableController.prototype, "watchIsDropdownShow", null);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentMethod('watchSelectedSourceKey')
+], VegaDropdownScrollableController.prototype, "watchSelectedSourceKey", null);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** Manager remote invocation */
+class VegaDropdownRemoteInvocationController extends globalSlimmerRegistry.VegaSlimmer {
   /**
-   * The below method is e2e-test covered in@see{module:vega-dropdown-items-dom-change-e2e}
+   * Component lifecycle - connectedCallback
    */
-  initMutationObserver() {
-    if (this.renderModeController.isSourceRenderMode())
-      return;
-    this.mutationObserver = new MutationObserver(async (mutations) => {
-      if (mutations.filter((mutation) => mutation.target.slot === 'items').length > 0) {
-        this.selectedController.watchSource();
-      }
-    });
-    this.mutationObserver.observe(this.listRenderer.getTemplateItemsRef(), {
-      childList: true,
-      subtree: true,
-    });
+  connectedCallback() {
+    this.remotePhoneNumberSearchSubject = domNodeSubjectFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(this.host, vegaInternalEventId.VegaDropdownSearchInternalOverridden);
+    this.remotePhoneNumberItemRenderSubject = domNodeSubjectFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(this.host, vegaInternalEventId.VegaDropdownRenderItemInternalOverridden);
   }
-  /* istanbul ignore next */
   /**
-   * The below method is e2e-test covered in @see{module:vega-dropdown-items-dom-change-e2e}
-   */
-  clearDropdownCurrentData() {
-    this.keySet.clear();
-    this.labelSet.clear();
+   *  Call the search function in input-phone-number.
+   *
+   * @param {unknown[]} args - arguments of remote search function
+   * @returns {Nullable<VegaDropdownSourceItem[]>} - searched items.
+   */
+  callRemoteSearch(...args) {
+    if (this.remotePhoneNumberSearchSubject) {
+      const searchResult = remoteInvocationRegistry.remoteInvocationRegistry.call(this.remotePhoneNumberSearchSubject, ...args);
+      if (searchResult)
+        return searchResult;
+    }
+    return null;
+  }
+  /**
+   * Call the item render function in input-phone-number.
+   *
+   * @param {unknown[]} args - arguments of remote item render function
+   * @returns {Nullable<HTMLVegaDropdownItemElement>} - rendered item
+   */
+  callRemoteItemRender(...args) {
+    if (this.remotePhoneNumberItemRenderSubject) {
+      const renderResult = remoteInvocationRegistry.remoteInvocationRegistry.call(this.remotePhoneNumberItemRenderSubject, ...args);
+      if (renderResult)
+        return renderResult;
+    }
+    return null;
   }
 }
-__decorate$e([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaDropdownChildrenController.prototype, "host", void 0);
-__decorate$e([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaDropdownChildrenController.prototype, "source", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
-], VegaDropdownChildrenController.prototype, "sourceController", void 0);
+], VegaDropdownRemoteInvocationController.prototype, "host", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], VegaDropdownRemoteInvocationController.prototype, "connectedCallback", null);
+
+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;
+};
+class VegaDropdownResetRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  render() {
+    return (this.resettable &&
+      this.selectedSourceKey.length > 0 && (index.h(index.Fragment, null,
+      index.h("vega-font", { variant: "font-field-value", color: "text-link", class: "vega-dropdown-reset", 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onClick: () => this.selectedController.reset(), tabIndex: 0, role: "button", "aria-label": "Reset", onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() }, this.translationSlimmer.t('Reset Selection')),
+      index.h("vega-divider", { margin: { y: 'size-4' } }))));
+  }
+}
 __decorate$e([
   globalSlimmerRegistry.MapToComponentField()
-], VegaDropdownChildrenController.prototype, "renderModeController", void 0);
+], VegaDropdownResetRenderer.prototype, "resettable", void 0);
 __decorate$e([
   globalSlimmerRegistry.MapToComponentField()
-], VegaDropdownChildrenController.prototype, "listRenderer", void 0);
+], VegaDropdownResetRenderer.prototype, "translationSlimmer", void 0);
 __decorate$e([
   globalSlimmerRegistry.MapToComponentField()
-], VegaDropdownChildrenController.prototype, "renderer", void 0);
+], VegaDropdownResetRenderer.prototype, "selectedController", void 0);
 __decorate$e([
   globalSlimmerRegistry.MapToComponentField()
-], VegaDropdownChildrenController.prototype, "selectedController", void 0);
-__decorate$e([
-  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
-], VegaDropdownChildrenController.prototype, "disconnectedCallback", null);
-__decorate$e([
-  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
-], VegaDropdownChildrenController.prototype, "componentWillLoad", null);
-__decorate$e([
-  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
-], VegaDropdownChildrenController.prototype, "componentDidLoad", null);
-__decorate$e([
-  globalSlimmerRegistry.MapToComponentMethod('watchSource')
-], VegaDropdownChildrenController.prototype, "watchSource", null);
+], VegaDropdownResetRenderer.prototype, "selectedSourceKey", void 0);
 
 const vegaDropdownCss = ":host{display:inline-block}";
 
@@ -1270,36 +1712,51 @@ const VegaDropdown = class {
     this.create = index.createEvent(this, "create", 7);
     this.vegaSearch = index.createEvent(this, "vegaSearch", 7);
     this.dropdownSearch = index.createEvent(this, "dropdownSearch", 7);
+    this.vegaReset = index.createEvent(this, "vegaReset", 7);
+    this.reset = index.createEvent(this, "reset", 7);
+    this.vegaSearchTrigger = index.createEvent(this, "vegaSearchTrigger", 7);
+    this.searchTrigger = index.createEvent(this, "searchTrigger", 7);
     this.globalSlimmers = {};
+    this.translationSlimmer = new translationSlimmer.TranslationSlimmer();
     this.renderer = new VegaDropdownRenderer();
     this.sourceController = new VegaDropdownSourceController();
     this.searchRenderer = new VegaDropdownSearchRenderer();
     this.createRenderer = new VegaDropdownCreateRenderer();
     this.listRenderer = new VegaDropdownListRenderer();
+    this.resetRenderer = new VegaDropdownResetRenderer();
     this.groupLevelRenderer = new VegaDropdownGroupLevelRenderer();
     this.itemLevelRenderer = new VegaDropdownItemLevelRenderer();
     this.keyboardController = new VegaDropdownKeyboardController();
     this.appenderController = new VegaDropdownAppenderController();
     this.searchController = new VegaDropdownSearchController();
+    /**
+     * childrenController should be defined before selectedController,
+     *     which can ensure collecting information before verifying it.
+     */
+    this.childrenController = new VegaDropdownChildrenController();
     this.selectedController = new VegaDropdownSelectedController();
     this.renderModeController = new VegaDropdownRenderModeController();
-    this.childrenController = new VegaDropdownChildrenController();
-    this.selectTypeNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaDropdown, 'selectType', 'watchSelectType');
-    this.selectedSourceKeyNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaDropdown, 'selectedSourceKey', 'watchSelectedSourceKey');
-    this.prefixIconSlotNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaDropdown, 'prefixIconSlot', 'watchPrefixIconSlot');
+    this.scrollableController = new VegaDropdownScrollableController();
+    this.remoteInvocationController = new VegaDropdownRemoteInvocationController();
+    this.selectTypeNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaDropdown, 'selectType', 'watchSelectType');
+    this.selectedSourceKeyNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaDropdown, 'selectedSourceKey', 'watchSelectedSourceKey');
+    this.prefixIconSlotNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaDropdown, 'prefixIconSlot', 'watchPrefixIconSlot');
     this.itemClickObserver = new childNodesNotifyObserverSlimmer.ChildNodesNotifyObserverSlimmer(staticSubjectTitle.DROPDOWN_ITEM_CLICK, (payload) => this.selectedController.select(payload.detail.itemKey), this.selectedController.isAcceptableItemSelectionObserver.bind(this.selectedController));
-    this.showEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, vegaEventId.VegaDropdownShow);
-    this.hideEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, vegaEventId.VegaDropdownHide);
-    this.dropdownClickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, vegaEventId.VegaDropdownClick);
-    this.createEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, vegaEventId.VegaCreate);
-    this.searchEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, vegaEventId.VegaDropdownSearch);
-    this.itemDisplayRuleNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaDropdown, 'itemDisplayRule', 'watchItemDisplayRule');
-    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.showEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, domNodeSubjectFactory.VegaDropdownShow);
+    this.hideEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, domNodeSubjectFactory.VegaDropdownHide);
+    this.dropdownClickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, domNodeSubjectFactory.VegaDropdownClick);
+    this.resetEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, domNodeSubjectFactory.VegaReset);
+    this.createEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, domNodeSubjectFactory.VegaCreate);
+    this.searchEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, domNodeSubjectFactory.VegaDropdownSearch);
+    this.searchTriggerEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, domNodeSubjectFactory.VegaSearchTrigger);
+    this.itemDisplayRuleNotifySlimmer = subStateNotifySlimmer.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.
+     *
+     * @vegaVersion 1.3.0
      */
     this.trigger = 'hover';
     /**
@@ -1307,6 +1764,8 @@ const VegaDropdown = class {
      *    relative to the target element.
      *
      * By default, the dropdown is displayed on the left-bottom of the target.
+     *
+     * @vegaVersion 1.3.0
      */
     this.translocation = {
       X: 0,
@@ -1315,8 +1774,10 @@ const VegaDropdown = class {
     /**
      * Sets the source array of items for the dropdown,
      *    where each item must have a `key` and `label` property.
+     *
+     * @vegaVersion 1.3.0
      */
-    /* eslint-disable @stencil/strict-mutable */
+    /* eslint-disable-next-line @stencil/strict-mutable */
     this.source = [];
     /**
      * Controls the dropdown menu's selection. It accepts three values:
@@ -1332,32 +1793,47 @@ const VegaDropdown = class {
      *      When an item with a key found in the `selectedSourceKey` array is selected,
      *      this mode releases the `vegaDropdownClick` event. Unlike the others, however,
      *      Determines the selection mode for multiple item selection.
+     *
+     * @vegaVersion 1.3.0
      */
     this.selectType = 'none';
     /**
      * Represents the key corresponding to the selected item in the dropdown menu.
      *    It becomes active only when `selectType` is set to `single` or `multiple`.
+     *
+     * @vegaVersion 1.3.0
      */
+    /* eslint-disable-next-line @stencil/strict-mutable */
     this.selectedSourceKey = this.selectType === 'multiple' ? [] : '';
     /**
      * Controls whether the prefix icon occupy a position, even if prefix has no value.
+     *
+     * @vegaVersion 1.47.0
      */
     this.prefixIconSlot = false;
     /**
      * Specifies the maximum height for the dropdown.
+     *
+     * @vegaVersion 1.3.0
      */
     this.maxHeight = 400;
     /**
      * Controls whether the dropdown list can be searched.
+     *
+     * @vegaVersion 1.3.0
      */
     this.searchable = false;
     /**
      * Determines whether the dropdown should have the
      *    same width as the target element.
+     *
+     * @vegaVersion 1.3.0
      */
     this.matchTargetWidth = false;
     /**
      * Specifies the display rule for items in the dropdown.
+     *
+     * @vegaVersion 1.13.0
      */
     this.itemDisplayRule = 'newline';
     /**
@@ -1366,6 +1842,8 @@ const VegaDropdown = class {
      *
      * If set to `true`, the dropdown will always be positioned at
      *    the bottom of the available space.
+     *
+     * @vegaVersion 1.3.0
      */
     this.matchContainerHeight = false;
     /**
@@ -1373,12 +1851,16 @@ const VegaDropdown = class {
      *
      * Note that the default filter rules are fuzzy matching and case-insensitive.
      *    This parameter only takes effect when `searchable` is set to `true`.
+     *
+     * @vegaVersion 1.4.0
      */
     this.caseSensitive = false;
     /**
      * Controls whether the dropdown can add a new item when
      *    no proper item is available. It becomes active only when
      *    `searchable` is set to `true`.
+     *
+     * @vegaVersion 1.16.0
      */
     this.dynamicOption = false;
     /**
@@ -1390,26 +1872,51 @@ const VegaDropdown = class {
      *
      * Note that the `dynamicOption` property will not work when
      *    this property is set to `false`.
+     *
+     * @vegaVersion 1.24.0
      */
     this.useDefaultFilter = true;
     /**
      * Determines whether the dropdown displays a loading status.
+     *
+     * @vegaVersion 1.24.0
      */
     this.isLoading = false;
     /**
      * Specifies the vertical positioning of the dropdown
      *    within its container or relative to a reference point.
+     *
+     * @vegaVersion 1.41.0
      */
     this.placement = ['bottom', 'top'];
     /**
      * Determines the horizontal positioning of the dropdown
      *    within its container or relative to a reference point.
+     *
+     * @vegaVersion 1.41.0
      */
     this.alignment = 'start';
     /**
      * Determines whether the dropdown displays a lazy loading status.
+     *
+     * @vegaVersion 2.3.0
      */
     this.isLazyLoading = false;
+    /**
+     * Determines whether the dropdown position is calculated relative to the screen.
+     *
+     * @VegaWarning - It will overrides the positionRelativeTo and matchContainerHeight properties, rendering them ineffective.
+     * 			    - Currently, when set to true, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content).
+     * @vegaVersion 2.36.0
+     */
+    this.isScreenPosition = false;
+    /**
+     * Specifies whether the selected option in the dropdown can be cleared.
+     *    It allows users to reset the selectedSourceKey when a selection has already been made.
+     *
+     * @vegaVersion 2.46.0
+     */
+    this.resettable = false;
   }
   watchIsDropdownShow() {
   }
@@ -1425,11 +1932,15 @@ const VegaDropdown = class {
   }
   /**
    * Invoke this method to programmatically display the dropdown menu.
+   *
+   * @vegaVersion 1.3.0
    */
   async show() {
   }
   /**
    * Invoke this method to programmatically dismiss the dropdown menu.
+   *
+   * @vegaVersion 1.3.0
    */
   async hide() {
   }
@@ -1438,12 +1949,16 @@ const VegaDropdown = class {
    *    filter the list of items in the dropdown.
    *
    * This method is applicable only when the dropdown is searchable.
+   *
+   * @vegaVersion 1.11.0
    */
   async search(input) {
   }
   /**
    * Invoke this method to clear the selected items keys,
    *    removing any current selection.
+   *
+   * @vegaVersion 1.47.0
    */
   async clearSelection() {
   }
@@ -1451,6 +1966,8 @@ const VegaDropdown = class {
    * Invoke this method to retrieve the selected items keys,
    *    providing an key or list of the keys representing
    *    the currently selected items.
+   *
+   * @vegaVersion 1.47.0
    */
   async getSelection() {
     return placeholder.methodPlaceholder();
@@ -1461,6 +1978,7 @@ const VegaDropdown = class {
    *    the desired selected items.
    *
    * @param {string[]} keys - Row keys to be set as selected.
+   * @vegaVersion 1.47.0
    */
   async setSelection(keys) {
   }
@@ -1480,6 +1998,9 @@ const VegaDropdown = class {
 __decorate$d([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
 ], VegaDropdown.prototype, "globalSlimmers", void 0);
+__decorate$d([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdown.prototype, "translationSlimmer", void 0);
 __decorate$d([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "renderer", void 0);
@@ -1495,6 +2016,9 @@ __decorate$d([
 __decorate$d([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "listRenderer", void 0);
+__decorate$d([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdown.prototype, "resetRenderer", void 0);
 __decorate$d([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "groupLevelRenderer", void 0);
@@ -1510,6 +2034,9 @@ __decorate$d([
 __decorate$d([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "searchController", void 0);
+__decorate$d([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdown.prototype, "childrenController", void 0);
 __decorate$d([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectedController", void 0);
@@ -1518,7 +2045,10 @@ __decorate$d([
 ], VegaDropdown.prototype, "renderModeController", void 0);
 __decorate$d([
   globalSlimmerRegistry.InjectVegaSlimmer()
-], VegaDropdown.prototype, "childrenController", void 0);
+], VegaDropdown.prototype, "scrollableController", void 0);
+__decorate$d([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdown.prototype, "remoteInvocationController", void 0);
 __decorate$d([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectTypeNotifySlimmer", void 0);
@@ -1540,12 +2070,18 @@ __decorate$d([
 __decorate$d([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "dropdownClickEventEmitter", void 0);
+__decorate$d([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdown.prototype, "resetEventEmitter", void 0);
 __decorate$d([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "createEventEmitter", void 0);
 __decorate$d([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "searchEventEmitter", void 0);
+__decorate$d([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdown.prototype, "searchTriggerEventEmitter", void 0);
 __decorate$d([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "itemDisplayRuleNotifySlimmer", void 0);
@@ -1554,7 +2090,9 @@ __decorate$d([
 ], VegaDropdown.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
 VegaDropdown.style = vegaDropdownCss;
 
-const vegaDropdownContentBoxCss = ":host{display:block;position:absolute}:host .vega-dropdown{box-shadow:var(--v-shadow-dropdown-menu, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1));background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));padding-top:8px;padding-bottom:8px;text-align:left;border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:8px;overflow:hidden;box-sizing:border-box;width:inherit}:host(.vega-force-hidden){display:none}:host .vega-dropdown.vega-dropdown-with-searchable{padding-top:0px}:host .vega-dropdown .vega-dropdown-container{overflow-y:auto;position:relative;min-width:100px;min-height:40px}:host .vega-dropdown .vega-dropdown-container>ul{padding-left:0px;margin:0px;list-style-type:none}:host .vega-dropdown .vega-dropdown-search{padding-top:16px;padding-left:12px;padding-right:12px;padding-bottom:12px;margin-bottom:4px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border-width:0px;border-bottom-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1))}:host .vega-dropdown .vega-dropdown-search vega-input::part(input-container){padding:0px;border-width:0px;--tw-shadow:0 0 #0000;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px}:host .vega-dropdown .vega-dropdown-search vega-input::part(prefix-icon-container){color:rgba(var(--v-text-secondary, 107, 116, 125, 1));width:16px;height:16px;padding-top:0px}:host .vega-dropdown .vega-dropdown-search vega-input::part(input-container):focus-within{--tw-shadow:0 0 #0000;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px}:host .vega-dropdown .vega-dropdown-search vega-input::part(input-container):hover{border-width:0px}:host .vega-dropdown .vega-dropdown-loading{padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px}:host .v-hidden{display:none}:host .vega-dropdown .vega-dropdown-loading>vega-flex>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-dropdown .vega-dropdown-loading>vega-flex>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-dropdown .vega-dropdown-loading>vega-flex>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-dropdown .vega-dropdown-loading>vega-flex>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-dropdown .vega-dropdown-add-item{padding-top:8px;padding-left:12px;padding-right:12px;padding-bottom:8px;margin-left:4px;margin-right:4px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));cursor:pointer;display:flex;gap:8px;align-items:center}:host .vega-dropdown .vega-dropdown-add-item>div{color:rgba(var(--v-text-link, 19, 98, 226, 1))}:host .vega-dropdown .vega-dropdown-add-item>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-dropdown .vega-dropdown-add-item>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-dropdown .vega-dropdown-add-item>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-dropdown .vega-dropdown-add-item>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-dropdown .vega-dropdown-add-item:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));outline:2px solid transparent;outline-offset:2px}:host .vega-dropdown .vega-dropdown-clear-icon{width:16px;height:16px;cursor:pointer}:host .vega-dropdown .vega-dropdown-empty-list{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-dropdown .vega-dropdown-empty-list{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-dropdown .vega-dropdown-empty-list{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-dropdown .vega-dropdown-empty-list{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-dropdown .vega-dropdown-divider{margin-top:4px;margin-bottom:4px;border-bottom:1px solid rgb(171, 198, 216)}";
+const nestVegaDropdownCss = "vega-dropdown-content-box vega-dropdown{display:block}";
+
+const vegaDropdownContentBoxCss = ":host{display:block;position:absolute}:host .vega-dropdown{box-shadow:var(--v-shadow-dropdown-menu, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1));background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));padding-top:4px;padding-bottom:4px;text-align:left;border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:8px;overflow:hidden;box-sizing:border-box;width:inherit}:host(.vega-force-hidden){display:none}:host .vega-dropdown .vega-dropdown-container{overflow-y:auto;position:relative;min-width:100px;min-height:40px}:host .vega-dropdown .vega-dropdown-container>ul{padding-left:0px;margin:0px;list-style-type:none}:host .vega-dropdown .vega-dropdown-search{padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;margin-left:4px;margin-right:4px}:host .vega-dropdown .vega-dropdown-search vega-input{display:block}:host .vega-dropdown .vega-dropdown-search vega-input::part(input-container){padding:0px;border-width:0px;--tw-shadow:0 0 #0000;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px}:host .vega-dropdown .vega-dropdown-search vega-input::part(prefix-icon-container){color:rgba(var(--v-text-secondary, 107, 116, 125, 1));width:16px;height:16px;padding-top:0px}:host .vega-dropdown .vega-dropdown-search vega-input::part(input-container):focus-within{outline:none}:host .vega-dropdown .vega-dropdown-search vega-input::part(input-container):hover{border-width:0px}:host .vega-dropdown .vega-dropdown-loading{padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px}:host .v-hidden{display:none}:host .vega-dropdown .vega-dropdown-loading>vega-flex>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-dropdown .vega-dropdown-loading>vega-flex>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-dropdown .vega-dropdown-loading>vega-flex>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-dropdown .vega-dropdown-loading>vega-flex>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-dropdown .vega-dropdown-add-item{padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;margin-left:4px;margin-right:4px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));cursor:pointer;display:flex;gap:8px;align-items:center}:host .vega-dropdown .vega-dropdown-add-item>div{color:rgba(var(--v-text-link, 19, 98, 226, 1))}:host .vega-dropdown .vega-dropdown-add-item>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-dropdown .vega-dropdown-add-item>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-dropdown .vega-dropdown-add-item>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-dropdown .vega-dropdown-add-item>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-dropdown .vega-dropdown-add-item:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px;border-radius:4px}:host .vega-dropdown .vega-dropdown-clear-icon{width:16px;height:16px;cursor:pointer}:host .vega-dropdown .vega-dropdown-empty-list{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-dropdown .vega-dropdown-empty-list{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-dropdown .vega-dropdown-empty-list{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-dropdown .vega-dropdown-empty-list{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-dropdown .vega-dropdown-divider{margin-top:4px;margin-bottom:4px;border-bottom:1px solid rgb(171, 198, 216)}:host .vega-dropdown .vega-dropdown-reset{padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;margin-left:4px;margin-right:4px;display:block;cursor:pointer}:host .vega-dropdown .vega-dropdown-reset:hover{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}:host .vega-dropdown .vega-dropdown-reset:focus-visible{border:2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1))}";
 
 var __decorate$c = (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;
@@ -1570,7 +2108,8 @@ const VegaDropdownContentBox = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.globalSlimmers = {};
-    this.eventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaClick], () => this.host);
+    this.componentGlobalStyleSlimmer = new componentGlobalStyleSlimmer.ComponentGlobalStyleSlimmer(nestVegaDropdownCss);
+    this.eventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectFactory.VegaClick], () => this.host, undefined, true);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
   }
   render() {
@@ -1581,6 +2120,9 @@ const VegaDropdownContentBox = class {
 __decorate$c([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
 ], VegaDropdownContentBox.prototype, "globalSlimmers", void 0);
+__decorate$c([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdownContentBox.prototype, "componentGlobalStyleSlimmer", void 0);
 __decorate$c([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdownContentBox.prototype, "eventPrevent", void 0);
@@ -1641,6 +2183,8 @@ const VegaDropdownGroup = class {
     /**
      * Determines whether to include a dividing line at
      *      the bottom of the dropdown group.
+     *
+     * @vegaVersion 1.47.0
      */
     this.divide = true;
   }
@@ -1673,6 +2217,7 @@ class VegaDropdownItemRenderer extends globalSlimmerRegistry.VegaSlimmer {
         'vega-dropdown-item-selected': this.selected,
         'vega-dropdown-item-disabled': this.disabled,
         [`vega-dropdown-item-display-${this.itemDisplayRule}`]: true,
+        'danger': this.danger && this.selectType === 'none',
       }, tabIndex: this.disabled ? -1 : 0, 
       /* eslint-disable-next-line react/jsx-no-bind */
       onClick: (e) => this.onSelect(e), onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick(), style: this.height > 0 && {
@@ -1703,16 +2248,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" },
@@ -1752,6 +2299,9 @@ __decorate$9([
 __decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownItemRenderer.prototype, "itemDisplayRule", void 0);
+__decorate$9([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "danger", void 0);
 __decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownItemRenderer.prototype, "vegaDropdownItemClickController", void 0);
@@ -1811,6 +2361,7 @@ class VegaDropdownItemStateController extends subStateObserverSlimmer.SubStateOb
           },
         },
       ],
+      pullStatesWhenReattached: true,
     });
   }
 }
@@ -1868,7 +2419,7 @@ __decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownItemClickController.prototype, "clickEventEmitter", void 0);
 
-const vegaDropdownItemCss = ":host{display:block}:host li{padding-top:8px;padding-bottom:8px;padding-left:20px;padding-right:20px;cursor:pointer;display:flex;align-items:center;gap:8px}:host li:focus{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));outline:0}:host li,:host li a{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;text-decoration:none}@media screen and (min-width: 768px) and (max-width: 1023px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host li:hover{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}:host li:focus{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}:host li.vega-dropdown-item-disabled{color:rgba(var(--v-text-disabled, 176, 180, 181, 1));pointer-events:none}:host li.vega-dropdown-item-disabled .item-prefix,:host li.vega-dropdown-item-disabled .selected-prefix{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host li .item-prefix{display:flex;width:16px;height:16px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));flex-shrink:1}:host li .selected-prefix{color:rgba(var(--v-text-link, 19, 98, 226, 1));width:16px;height:16px;display:flex;align-items:center;min-width:16px}:host li .item-counter{width:20px;height:20px}:host .vega-dropdown-item-label{flex-grow:1}:host .vega-dropdown-item-display-newline .vega-dropdown-item-label{overflow-wrap:break-word}:host .vega-dropdown-item-display-ellipsis .vega-dropdown-item-label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .v-hidden{display:none}";
+const vegaDropdownItemCss = ":host{display:block}:host li{padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;margin-left:4px;margin-right:4px;cursor:pointer;display:flex;align-items:center;gap:8px}:host li:focus{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));outline:0}:host li,:host li a{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;text-decoration:none}@media screen and (min-width: 768px) and (max-width: 1023px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host li:hover{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}:host li:focus{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}:host li.vega-dropdown-item-disabled{color:rgba(var(--v-text-disabled, 176, 180, 181, 1));pointer-events:none}:host li.vega-dropdown-item-disabled .item-prefix,:host li.vega-dropdown-item-disabled .selected-prefix{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host li.danger .item-prefix,:host li.danger .vega-dropdown-item-label{color:rgba(var(--v-text-danger-link, 230, 50, 87, 1))}:host li .item-prefix{display:flex;width:16px;height:16px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));flex-shrink:1}:host li .selected-prefix{color:rgba(var(--v-text-link, 19, 98, 226, 1));width:16px;height:16px;display:flex;align-items:center;min-width:16px}:host li .item-counter{width:20px;height:20px}:host .vega-dropdown-item-label{flex-grow:1}:host .vega-dropdown-item-display-newline .vega-dropdown-item-label{overflow-wrap:break-word}:host .vega-dropdown-item-display-ellipsis .vega-dropdown-item-label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .v-hidden{display:none}";
 
 var __decorate$6 = (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;
@@ -1889,8 +2440,8 @@ const VegaDropdownItem = class {
     this.renderer = new VegaDropdownItemRenderer();
     this.vegaDropdownItemStateController = new VegaDropdownItemStateController();
     this.vegaDropdownItemClickController = new VegaDropdownItemClickController();
-    this.dropdownItemEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaChange], () => this.host);
-    this.clickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdownItem, vegaEventId.VegaClick);
+    this.dropdownItemEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectFactory.VegaChange], () => this.host);
+    this.clickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdownItem, domNodeSubjectFactory.VegaClick);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     /**
      * The placeholder of prefix icon, while other item have prefix icon but no in this item,
@@ -1907,8 +2458,18 @@ const VegaDropdownItem = class {
     this.itemDisplayRule = 'newline';
     /**
      * Specifies the disabled status of the dropdown item.
+     *
+     * @vegaVersion 1.47.0
      */
     this.disabled = false;
+    /**
+     * Specifies whether the dropdown item represents a danger action.
+     * 	  It highlights actions that may have critical consequences
+     * 	     when the select type is set to none.
+     *
+     * @vegaVersion 2.25.0
+     */
+    this.danger = false;
   }
   render() {
     placeholder.slotPlaceholder(index.h("slot", null));
@@ -2147,19 +2708,19 @@ class VegaVirtualScrollScrollableController extends globalSlimmerRegistry.VegaSl
    * watchSourceChange
    */
   watchSourceChange() {
-    this.adjustScrollTopWhilePropChange();
+    this.adjustScrollTopInVirtualMode();
   }
   /**
    * watchApproxItemHeight
    */
   watchApproxItemHeight() {
-    this.adjustScrollTopWhilePropChange();
+    this.adjustScrollTopInVirtualMode();
   }
   /**
    * watchViewportMaxHeight
    */
   watchViewportMaxHeight() {
-    this.adjustScrollTopWhilePropChange();
+    this.adjustScrollTopInVirtualMode();
   }
   /**
    * The scrollToIndex function scrolls to a specific index within a container element either by
@@ -2211,7 +2772,9 @@ class VegaVirtualScrollScrollableController extends globalSlimmerRegistry.VegaSl
    * The function adjusts the scroll top position based on certain properties to ensure it stays within
    * valid bounds.
    */
-  adjustScrollTopWhilePropChange() {
+  adjustScrollTopInVirtualMode() {
+    if (this.modeController.getMode() === 'normal')
+      return;
     this.scrollTop = Math.min((this.source.length - Math.floor(this.viewportMaxHeight / this.approxItemHeight)) *
       this.approxItemHeight, this.scrollTop);
   }
@@ -2221,7 +2784,7 @@ class VegaVirtualScrollScrollableController extends globalSlimmerRegistry.VegaSl
   checkIsScrollToBottom() {
     if (!this.isLoading &&
       (this.isScrollToBottomInVirtualMode() || this.isScrollToBottomInNormalMode())) {
-      changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalVirtualScrollToBottom), {
+      changeManager.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalVirtualScrollToBottom), {
         endIndex: this.source.length - 1,
       });
     }
@@ -2246,8 +2809,9 @@ class VegaVirtualScrollScrollableController extends globalSlimmerRegistry.VegaSl
    * being equal to `this.viewportMaxHeight`.
    */
   isScrollToBottomInNormalMode() {
+    const containerRef = this.renderer.getContainerRef();
     return (this.modeController.getMode() === 'normal' &&
-      this.source.length * this.approxItemHeight - this.scrollTop === this.viewportMaxHeight);
+      containerRef.scrollHeight - this.scrollTop >= this.viewportMaxHeight);
   }
 }
 __decorate$4([
@@ -2485,22 +3049,34 @@ const VegaVirtualScroll = class {
     this.loadingRenderer = new VegaVirtualScrollLoadingIndicatorRenderer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     this.scrollTop = 0;
-    /** The all items of source */
+    /** The all items of source *
+     * @vegaVersion 1.13.0
+     */
     this.source = [];
-    /** The approximate height of each item */
+    /** The approximate height of each item *
+     * @vegaVersion 1.13.0
+     */
     this.approxItemHeight = 40;
-    /** The max height of viewport */
+    /** The max height of viewport *
+     * @vegaVersion 1.13.0
+     */
     this.viewportMaxHeight = 320;
     /**
      * Determines whether the dropdown displays a loading status.
+     *
+     * @vegaVersion 2.3.0
      */
     this.isLoading = false;
     /**
      * The count of the source that will be used as the threshold for determining whether to use virtual scrolling.
      * If the count of source exceeds this threshold, we employ virtual scrolling. Otherwise, normal item rendering is used
+     *
+     * @vegaVersion 2.3.0
      */
     this.virtualizationThreshold = 60;
-    /** We set this key to check the source is really change and should refresh virtual scroll */
+    /** We set this key to check the source is really change and should refresh virtual scroll *
+     * @vegaVersion 1.26.0
+     */
     this.sourceItemIdentifier = 'key';
   }
   watchScrollTop() {
@@ -2516,6 +3092,8 @@ const VegaVirtualScroll = class {
   /**
    * Scroll to the index of the item in the list by setting the scrollTop property of the virtual scroll
    * container to the index of the item multiplied by the approximate height of each item in the list.
+   *
+   * @vegaVersion 1.13.0
    */
   async scrollToIndex(index) {
   }