@heartlandone/vega 2.0.0-temp-test-0.2 → 2.0.0

package/dist/esm/{vega-dropdown.entry.js → vega-dropdown_5.entry.js}

@@ -1,90 +1,163 @@
-import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-fe904372.js';
-import { s as sanitizeVegaComponent } from './component-f8ef7dc9.js';
-import { M as MapToComponentField, V as VegaSlimmer, I as InjectVegaSlimmer } from './vega-slimmer-c8580d54.js';
+import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-c3505689.js';
+import { g as getActiveElement, s as sanitizeVegaComponent } from './component-e4eb3f14.js';
+import { I as InjectVegaSlimmer } from './global-slimmer-registry-b91c742d.js';
 import { m as methodPlaceholder, s as slotPlaceholder } from './placeholder-bf562081.js';
-import { M as MapToComponentMethod } from './map-to-component-method-56335038.js';
-import { x as isArrayOfType, D as isDropdownSourceItemType } from './typeGuard-d304f31c.js';
+import { I as InjectVegaGlobalSlimmer } from './inject-vega-global-slimmer-c3f84156.js';
+import { a as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer } from './vega-slimmer-ce2e45d1.js';
+import { f as findParent, k as extractNumberFromString, l as containerScrollToItem } from './ui-6e5294cb.js';
+import { J as isArrayOfType, K as isDropdownSourceItemType } from './typeGuard-5e282437.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
-import { k as extractNumberFromString, f as findParent } from './ui-8bf12791.js';
 import { L as LogUtility } from './log-a824be80.js';
-import { K as KeyboardManagerSlimmer, E as ElementAppenderSlimmer, c as createSubStateNotifySlimmer } from './subStateNotifySlimmer-eb82050a.js';
-import { i as isArrayEqual, d as deleteItemsFromArray } from './array-195d7d64.js';
-import { O as Observer } from './observer-8ff2bb65.js';
-import { C as ChangeManager, D as DROPDOWN_ITEM_CLICK } from './changeManager-db36e47a.js';
-import { g as generateUUID } from './misc-9fdbcfbb.js';
-import './featureFlagController-1a4a4ffc.js';
-import './breakpoints-0aae54ba.js';
-import './typography-8a180b9c.js';
-import './elementAppender-5c3f4b36.js';
-import './responsiveFormatFacade-fe850b65.js';
-import './breakpoints-3911666a.js';
+import { D as DomNodeSubjectObserverFactory, c as createEventEmitSlimmer } from './eventEmitSlimmer-d605ac81.js';
+import { g as VegaChange, c as VegaDropdownShow, d as VegaDropdownHide, b as VegaDropdownClick, h as VegaCreate, r as VegaDropdownSearch, V as VegaClick } from './internalVegaEventManager-efa77ebb.js';
+import { K as KeyboardManagerSlimmer } from './keyboardManagerSlimmer-69d10dfc.js';
+import { E as ElementAppenderSlimmer } from './elementAppenderSlimmer-d4cbab06.js';
+import { b as isArrayEqual, d as deleteItemsFromArray } from './array-e1522673.js';
+import { c as createSubStateNotifySlimmer, S as SubStateObserverSlimmer } from './subStateObserverSlimmer-450d79de.js';
+import { C as ChildNodesNotifyObserverSlimmer } from './childNodesNotifyObserverSlimmer-0d2eac09.js';
+import { D as DROPDOWN_ITEM_CLICK } from './staticSubjectTitle-bb1e9570.js';
+import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-65a53b20.js';
+import { C as ChangeManager } from './changeManager-935d420b.js';
+import './breakpoints-900a4c99.js';
+import './ui-535c5fb3.js';
+import './typography-03d285b4.js';
+import './dynamic-slimmer-c8ad78de.js';
+import './keyboardManager-0a038e77.js';
+import './elementAppender-4e1e8de0.js';
+import './responsiveFormatFacade-e91e14ac.js';
 import './number-400b3bf2.js';
 import './zIndexManager-ea603c97.js';
-import './dynamic-slimmer-4388f10d.js';
-import './pageResizeObserverSlimmer-99474370.js';
-import './keyboardManager-55ed7a56.js';
+import './pageResizeObserverSlimmer-b476bb1f.js';
 
-var __decorate$e = (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;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 class VegaDropdownRenderer extends VegaSlimmer {
-  setVirtualContainer() {
-    this.virtualContainerRef = this.dropdownRef.querySelector('.vega-dropdown-container');
+  componentDidRender() {
+    this.setVirtualContainer();
+    this.appendItemsToContentBox();
+    this.appendDropdownToContentBox();
   }
   getDropdownRef() {
     return this.dropdownRef;
   }
+  getDropdownContentBoxRef() {
+    return this.dropdownContentBoxRef;
+  }
   getVirtualContainerRef() {
     return this.virtualContainerRef;
   }
-  render(dropdownId) {
+  /* istanbul ignore next */
+  getNextActiveItem(code) {
+    const items = this.getAllItems();
+    const currentActiveItem = this.getCurrentActiveItem();
+    if (currentActiveItem) {
+      const currentIndex = items.findIndex((item) => item === currentActiveItem);
+      const nextIndex = code === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1;
+      const nextItem = items[nextIndex];
+      if (nextItem) {
+        return nextItem.disabled ? this.findNextCallFocusItem(items, nextIndex, code) : nextItem;
+      }
+      else {
+        return null;
+      }
+    }
+    else {
+      return items[0];
+    }
+  }
+  render() {
     return (h(Fragment, null,
       this.renderContentSlot(),
-      this.renderDropdown(dropdownId)));
+      this.renderDropdown()));
   }
   renderContentSlot() {
     return this.renderModeController.isSourceRenderMode() ? h("slot", null) : h("slot", { name: "dropdown-content" });
   }
-  renderDropdown(dropdownId) {
-    return (h("div", { "data-parent-id": dropdownId, ref: (e) => (this.dropdownRef = e), class: {
-        'vega-dropdown': true,
-        'vega-dropdown-with-searchable': this.searchable,
-      }, style: { maxHeight: `${this.maxHeight}px` } },
-      h("div", { class: "vega-dropdown-actions" },
-        this.searchRenderer.render(),
-        this.createRenderer.render()),
-      h("div", null,
-        h("div", { class: "vega-dropdown-container" }, this.renderModeController.isSourceRenderMode()
-          ? this.listRenderer.renderBySource()
-          : this.listRenderer.renderBySlot()))));
+  renderDropdown() {
+    return (h("vega-dropdown-content-box", { ref: (e) => (this.dropdownContentBoxRef = e), style: { maxHeight: `${this.maxHeight}px` }, "data-parent-ref": this.host },
+      h("div", { ref: (e) => (this.dropdownRef = e), class: {
+          'vega-dropdown': true,
+          'vega-dropdown-with-searchable': this.searchable,
+        } },
+        h("div", { class: "vega-dropdown-actions" },
+          this.searchRenderer.render(),
+          this.createRenderer.render()),
+        h("div", null,
+          h("div", { class: "vega-dropdown-container" }, this.renderModeController.isSourceRenderMode()
+            ? this.listRenderer.renderBySource()
+            : this.listRenderer.renderBySlot())))));
+  }
+  setVirtualContainer() {
+    this.virtualContainerRef = this.dropdownRef.querySelector('.vega-dropdown-container');
+  }
+  appendItemsToContentBox() {
+    if (!this.renderModeController.isSourceRenderMode()) {
+      const itemsSlot = this.host.querySelector("[slot='items']");
+      if (!this.dropdownContentBoxRef.contains(itemsSlot) && itemsSlot) {
+        this.dropdownContentBoxRef.append(itemsSlot);
+      }
+    }
+  }
+  appendDropdownToContentBox() {
+    var _a, _b;
+    if (!((_a = this.dropdownContentBoxRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(this.dropdownRef))) {
+      (_b = this.dropdownContentBoxRef.shadowRoot) === null || _b === void 0 ? void 0 : _b.append(this.dropdownRef);
+    }
+  }
+  /* istanbul ignore next */
+  getAllItems() {
+    const virtualScroll = this.dropdownRef.querySelector('vega-virtual-scroll');
+    const itemContainer = virtualScroll
+      ? virtualScroll.shadowRoot
+      : this.dropdownRef;
+    return Array.from(itemContainer.querySelectorAll('vega-dropdown-item'));
+  }
+  /* istanbul ignore next */
+  getCurrentActiveItem() {
+    return findParent(getActiveElement(this.dropdownContentBoxRef.shadowRoot), 'vega-dropdown-item');
+  }
+  /* istanbul ignore next */
+  findNextCallFocusItem(items, currentIndex, code) {
+    const nextIndex = code === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1;
+    const nextItem = items[nextIndex];
+    if (nextItem) {
+      return nextItem.disabled ? this.findNextCallFocusItem(items, nextIndex, code) : nextItem;
+    }
+    else {
+      return null;
+    }
   }
 }
-__decorate$e([
+__decorate$l([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "host", void 0);
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "maxHeight", void 0);
-__decorate$e([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "searchable", void 0);
-__decorate$e([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "searchRenderer", void 0);
-__decorate$e([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "createRenderer", void 0);
-__decorate$e([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "listRenderer", void 0);
-__decorate$e([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "renderModeController", void 0);
-__decorate$e([
+__decorate$l([
   MapToComponentMethod('componentDidRender')
-], VegaDropdownRenderer.prototype, "setVirtualContainer", null);
+], VegaDropdownRenderer.prototype, "componentDidRender", null);
 
-var __decorate$d = (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;
@@ -111,22 +184,15 @@ class VegaDropdownSourceController extends VegaSlimmer {
    * The function sets the source for rendering by searching for a formatted source.
    */
   setRenderSource() {
-    this.sourceForRender = this.searchController.search(this.formattedSource);
+    this.sourceForRender = this.searchController.search(this.source);
   }
   /**
    * The function "handleSource" performs validation, formatting, and rendering of a source.
    */
   handleSource() {
     this.validSource();
-    this.formatSource();
     this.setRenderSource();
   }
-  /**
-   * The function "formatSource" formats the source code using a formatSourceController.
-   */
-  formatSource() {
-    this.formattedSource = this.formatSourceController.format();
-  }
   /**
    * The function "validSource" checks if the "source" variable is an array of "VegaDropdownSourceItem"
    * type, and if not, assigns an empty array to it.
@@ -137,26 +203,23 @@ class VegaDropdownSourceController extends VegaSlimmer {
       : [];
   }
 }
-__decorate$d([
+__decorate$k([
   MapToComponentField({ writable: true })
 ], VegaDropdownSourceController.prototype, "source", void 0);
-__decorate$d([
+__decorate$k([
   MapToComponentField({ writable: true })
 ], VegaDropdownSourceController.prototype, "sourceForRender", void 0);
-__decorate$d([
+__decorate$k([
   MapToComponentField()
 ], VegaDropdownSourceController.prototype, "searchController", void 0);
-__decorate$d([
-  MapToComponentField()
-], VegaDropdownSourceController.prototype, "formatSourceController", void 0);
-__decorate$d([
+__decorate$k([
   MapToComponentMethod('componentWillLoad')
 ], VegaDropdownSourceController.prototype, "componentWillLoad", null);
-__decorate$d([
+__decorate$k([
   MapToComponentMethod('watchSource')
 ], VegaDropdownSourceController.prototype, "watchSource", null);
 
-var __decorate$c = (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;
@@ -166,7 +229,7 @@ class VegaDropdownCreateRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.onItemAdd = () => {
-      this.vegaCreate.emit(this.searchString);
+      this.createEventEmitter.emit(this.searchString);
       this.appenderController.hide();
     };
   }
@@ -182,29 +245,29 @@ class VegaDropdownCreateRenderer extends VegaSlimmer {
       h("div", { class: "vega-dropdown-divider" }))));
   }
 }
-__decorate$c([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "searchString", void 0);
-__decorate$c([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "dynamicOption", void 0);
-__decorate$c([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "sourceForRender", void 0);
-__decorate$c([
-  MapToComponentField()
-], VegaDropdownCreateRenderer.prototype, "vegaCreate", void 0);
-__decorate$c([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "appenderController", void 0);
-__decorate$c([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "childrenController", void 0);
-__decorate$c([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "renderModeController", void 0);
+__decorate$j([
+  MapToComponentField()
+], VegaDropdownCreateRenderer.prototype, "createEventEmitter", void 0);
 
-var __decorate$b = (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;
@@ -243,7 +306,7 @@ class VegaDropdownListRenderer extends VegaSlimmer {
         'vega-dropdown-loading': true,
         'v-hidden': !this.isLoading,
       } },
-      h("vega-flex", { useNativeFlex: true, gap: "size-8", direction: "row" },
+      h("vega-flex", { gap: "size-8", direction: "row" },
         h("vega-loading-indicator", { size: "small" }),
         h("span", null, "Loading"))));
   }
@@ -252,9 +315,7 @@ class VegaDropdownListRenderer extends VegaSlimmer {
       return (h("div", { class: "vega-dropdown-empty-list" }, this.searchString ? 'No results found' : 'No options'));
     }
     else {
-      return (h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
-          [`vega-dropdown-item-display-${this.itemDisplayRule}`]: true,
-        } },
+      return (h("ul", { role: "menu", "aria-label": "dropdown-ul" },
         h("vega-virtual-scroll", { source: this.sourceForRender, 
           /* eslint-disable-next-line react/jsx-no-bind */
           renderItem: (item, index, fixHeight) => {
@@ -284,7 +345,7 @@ class VegaDropdownListRenderer extends VegaSlimmer {
    */
   /* istanbul ignore next */
   adjustListContainerMaxHeight() {
-    const dropdownRef = this.renderer.getDropdownRef();
+    const dropdownRef = this.renderer.getDropdownContentBoxRef();
     const dropdownMaxHeight = extractNumberFromString(dropdownRef.style.maxHeight);
     const excludeTop = this.searchable ? 59 : 8;
     const paddingSpace = dropdownRef.classList.contains('vega-placement-top') ? 0 : 8 + 8;
@@ -299,41 +360,41 @@ class VegaDropdownListRenderer extends VegaSlimmer {
     }
   }
 }
-__decorate$b([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "isLoading", void 0);
-__decorate$b([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "searchString", void 0);
-__decorate$b([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "selectType", void 0);
-__decorate$b([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "searchable", void 0);
-__decorate$b([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "selectedSourceKey", void 0);
-__decorate$b([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "itemDisplayRule", void 0);
-__decorate$b([
+__decorate$i([
   MapToComponentField({ writable: true })
 ], VegaDropdownListRenderer.prototype, "maxHeightOfItemsContainer", void 0);
-__decorate$b([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "sourceForRender", void 0);
-__decorate$b([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "itemLevelRenderer", void 0);
-__decorate$b([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "groupLevelRenderer", void 0);
-__decorate$b([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "renderer", void 0);
 
-var __decorate$a = (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;
@@ -341,22 +402,20 @@ var __decorate$a = (undefined && undefined.__decorate) || function (decorators,
 };
 class VegaDropdownItemLevelRenderer extends VegaSlimmer {
   render(item, fixHeight) {
-    return (h("vega-dropdown-item", Object.assign({}, item, { itemKey: item.key, height: fixHeight, prefixIcon: item.prefixIcon || item.prefix, 
-      /* eslint-disable-next-line react/jsx-no-bind */
-      onVegaClick: (e) => e.stopPropagation() })));
+    return (h("vega-dropdown-item", Object.assign({}, item, { itemKey: item.key, height: fixHeight, prefixIcon: item.prefixIcon })));
   }
 }
-__decorate$a([
+__decorate$h([
   MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "selectType", void 0);
-__decorate$a([
+__decorate$h([
   MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "selectedController", void 0);
-__decorate$a([
+__decorate$h([
   MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "sourceController", void 0);
 
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -370,68 +429,72 @@ class VegaDropdownSearchRenderer extends VegaSlimmer {
       if (this.searchInputRef)
         this.searchInputRef.value = '';
     };
-    this.onInputSearch = (e) => {
-      this.search(e.detail);
+    this.onInputSearch = (node) => {
+      this.searchInputRef = node;
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaChange, (input) => {
+        this.search(input.detail);
+      });
+    };
+    this.search = (input) => {
+      this.searchString = input;
+      if (this.renderModeController.isSourceRenderMode()) {
+        if (this.useDefaultFilter) {
+          this.sourceController.setRenderSource();
+          this.focus();
+        }
+        else if (this.isDropdownShow) {
+          this.searchEventEmitter.emit(input);
+        }
+      }
+      else {
+        this.searchEventEmitter.emit(input);
+      }
     };
   }
   userSearch(input) {
     this.search(input);
   }
   focus() {
-    var _a;
-    (_a = this.searchInputRef) === null || _a === void 0 ? void 0 : _a.querySelector('input').focus();
+    if (this.searchInputRef) {
+      this.searchInputRef.shadowRoot.querySelector('input').focus();
+    }
   }
   render() {
     const canRender = this.searchable &&
       (this.renderModeController.isSourceRenderMode() ? this.source.length > 0 : true);
     return (canRender && (h("div", { class: "vega-dropdown-search" },
-      h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, onVegaChange: this.onInputSearch, ref: (e) => (this.searchInputRef = e) }))));
-  }
-  search(input) {
-    this.searchString = input;
-    if (this.renderModeController.isSourceRenderMode()) {
-      if (this.useDefaultFilter) {
-        this.sourceController.setRenderSource();
-        this.focus();
-      }
-      else if (this.isDropdownShow) {
-        this.vegaSearch.emit(input);
-      }
-    }
-    else {
-      this.vegaSearch.emit(input);
-    }
+      h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, ref: this.onInputSearch }))));
   }
 }
-__decorate$9([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "searchable", void 0);
-__decorate$9([
+__decorate$g([
   MapToComponentField({ writable: true })
 ], VegaDropdownSearchRenderer.prototype, "searchString", void 0);
-__decorate$9([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "source", void 0);
-__decorate$9([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "useDefaultFilter", void 0);
-__decorate$9([
+__decorate$g([
   MapToComponentField()
-], VegaDropdownSearchRenderer.prototype, "vegaSearch", void 0);
-__decorate$9([
+], VegaDropdownSearchRenderer.prototype, "searchEventEmitter", void 0);
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "isDropdownShow", void 0);
-__decorate$9([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "sourceController", void 0);
-__decorate$9([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "renderModeController", void 0);
-__decorate$9([
+__decorate$g([
   MapToComponentMethod('search')
 ], VegaDropdownSearchRenderer.prototype, "userSearch", null);
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -491,66 +554,31 @@ class VegaDropdownKeyboardController extends KeyboardManagerSlimmer {
      * @param {string} code - current keyboard code.
      */
     this.controlDirectionByKeyboard = (code) => {
-      const dropdownRef = this.renderer.getDropdownRef();
-      const items = Array.from(dropdownRef.querySelectorAll('vega-dropdown-item'));
-      const currentItem = findParent(document.activeElement, 'vega-dropdown-item');
-      if (currentItem) {
-        const index = items.findIndex((item) => item === currentItem);
-        const nextItem = this.findNextCallFocusItem(items, index, code);
-        if (nextItem) {
-          nextItem.querySelector('li').focus();
-        }
-      }
-      else {
-        items[0].querySelector('li').focus({ preventScroll: true });
-      }
+      var _a;
+      (_a = this.renderer.getNextActiveItem(code)) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('li').focus();
     };
   }
-  /* istanbul ignore next */
-  /**
-   * The function `findNextCallFocusItem` finds the next enabled item in a dropdown menu based on the
-   * current index and the direction of navigation. @see{module:vega-dropdown-keyboard-control-e2e}
-   *
-   * @param {HTMLElement[]} items - An array of HTMLVegaDropdownItemElement objects
-   * representing the dropdown items.
-   * @param {number} currentIndex - The current index of the item in the `items` array that is currently
-   * focused.
-   * @param {string} code - The `code` parameter represents the key code of the keyboard event that
-   * triggered the function. It is used to determine whether the user pressed the "ArrowDown" or
-   * "ArrowUp" key.
-   * @returns {Nullable<HTMLElement>} a nullable HTMLVegaDropdownItemElement.
-   */
-  findNextCallFocusItem(items, currentIndex, code) {
-    const nextIndex = code === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1;
-    const nextItem = items[nextIndex];
-    if (nextItem) {
-      return nextItem.disabled ? this.findNextCallFocusItem(items, nextIndex, code) : nextItem;
-    }
-    else {
-      return null;
-    }
-  }
 }
-__decorate$8([
+__decorate$f([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "host", void 0);
-__decorate$8([
+__decorate$f([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "trigger", void 0);
-__decorate$8([
+__decorate$f([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "isDropdownShow", void 0);
-__decorate$8([
+__decorate$f([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "renderer", void 0);
-__decorate$8([
+__decorate$f([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "appenderController", void 0);
-__decorate$8([
+__decorate$f([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "listRenderer", void 0);
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -568,7 +596,7 @@ class VegaDropdownAppenderController extends ElementAppenderSlimmer {
   constructor() {
     super(() => ({
       target: this.host,
-      appendableElement: this.renderer.getDropdownRef(),
+      appendableElement: this.renderer.getDropdownContentBoxRef(),
       positionRelativeTo: this.positionRelativeTo,
       matchTargetWidth: this.matchTargetWidth,
       matchContainerHeight: this.matchContainerHeight,
@@ -588,11 +616,11 @@ class VegaDropdownAppenderController extends ElementAppenderSlimmer {
   async watchIsDropdownShow() {
     if (this.isDropdownShow) {
       await this.renderer.listRenderer.scrollToIndex();
-      this.vegaShow.emit();
+      this.showEventEmitter.emit();
     }
     else {
       this.searchRenderer.clear();
-      this.vegaHide.emit();
+      this.hideEventEmitter.emit();
     }
   }
   /**
@@ -613,71 +641,71 @@ class VegaDropdownAppenderController extends ElementAppenderSlimmer {
     }
   }
 }
-__decorate$7([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "host", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "trigger", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField({ writable: true })
 ], VegaDropdownAppenderController.prototype, "isDropdownShow", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "positionRelativeTo", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "matchTargetWidth", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "matchContainerHeight", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "size", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "minWidth", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "maxWidth", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "translocation", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "maxHeight", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "placement", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "alignment", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "renderer", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "listRenderer", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "searchRenderer", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField()
-], VegaDropdownAppenderController.prototype, "vegaShow", void 0);
-__decorate$7([
+], VegaDropdownAppenderController.prototype, "showEventEmitter", void 0);
+__decorate$e([
   MapToComponentField()
-], VegaDropdownAppenderController.prototype, "vegaHide", void 0);
-__decorate$7([
+], VegaDropdownAppenderController.prototype, "hideEventEmitter", void 0);
+__decorate$e([
   MapToComponentMethod('watchIsDropdownShow')
 ], VegaDropdownAppenderController.prototype, "watchIsDropdownShow", null);
-__decorate$7([
+__decorate$e([
   MapToComponentMethod('show')
 ], VegaDropdownAppenderController.prototype, "userShow", null);
-__decorate$7([
+__decorate$e([
   MapToComponentMethod('hide')
 ], VegaDropdownAppenderController.prototype, "userHide", null);
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$d = (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;
@@ -688,14 +716,14 @@ class VegaDropdownGroupLevelRenderer extends VegaSlimmer {
     return (h("vega-dropdown-group", { label: item.label, key: item.key, divide: index < this.sourceForRender.length - 1 }, item.children.map((children) => this.itemLevelRenderer.render(children, fixHeight))));
   }
 }
-__decorate$6([
+__decorate$d([
   MapToComponentField()
 ], VegaDropdownGroupLevelRenderer.prototype, "sourceForRender", void 0);
-__decorate$6([
+__decorate$d([
   MapToComponentField()
 ], VegaDropdownGroupLevelRenderer.prototype, "itemLevelRenderer", void 0);
 
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
   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;
@@ -770,74 +798,14 @@ class VegaDropdownSearchController extends VegaSlimmer {
     return label.replace(new RegExp(`(${this.searchString})`, 'g' + (this.caseSensitive ? '' : 'i')), `<b>$1</b>`);
   }
 }
-__decorate$5([
+__decorate$c([
   MapToComponentField()
 ], VegaDropdownSearchController.prototype, "searchString", void 0);
-__decorate$5([
+__decorate$c([
   MapToComponentField()
 ], VegaDropdownSearchController.prototype, "caseSensitive", void 0);
 
-var __decorate$4 = (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 `VegaDropdownFormatSourceController` class is responsible for formatting
- * the source property of a `VegaDropdown` object, either as is or converted to a group level source.
- */
-class VegaDropdownFormatSourceController extends VegaSlimmer {
-  /**
-   * The format function returns the source property of a VegaDropdown object, either as is or converted
-   * to a group level source.
-   *
-   * @returns {VegaDropdown['source']} The `format()` method is returning the `source` property of the `VegaDropdown` object. If
-   * the `hasSetGroupProperty()` method returns `true`, then the `convertToGroupLevelSource()` method is
-   * called and its result is returned. Otherwise, the `source` property is returned as is.
-   */
-  format() {
-    if (this.hasSetGroupProperty()) {
-      return this.convertToGroupLevelSource();
-    }
-    else {
-      return this.source;
-    }
-  }
-  /**
-   * The function converts a source array into a grouped source array for a Vega dropdown component.
-   *
-   * @returns {VegaDropdown['source']} an array of DropdownSourceGroup objects.
-   */
-  convertToGroupLevelSource() {
-    const groups = {};
-    this.source.forEach((item) => {
-      const groupKey = item.group || 'Others';
-      groups[groupKey] || (groups[groupKey] = {
-        label: groupKey,
-        key: groupKey,
-        children: [],
-      });
-      const groupItem = Object.assign({}, item);
-      delete groupItem.group;
-      groups[groupKey].children.push(groupItem);
-    });
-    return Object.values(groups);
-  }
-  /**
-   * The function checks if the source array contains an item with a 'group' property.
-   *
-   * @returns { boolean } - a boolean value.
-   */
-  hasSetGroupProperty() {
-    return this.source.find((item) => item['group']) !== undefined;
-  }
-}
-__decorate$4([
-  MapToComponentField()
-], VegaDropdownFormatSourceController.prototype, "source", void 0);
-
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$b = (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;
@@ -848,18 +816,6 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
  * either adding them to an array or setting them as the only selected item.
  */
 class VegaDropdownSelectedController extends VegaSlimmer {
-  /**
-   * Component lifecycle - connectedCallback
-   */
-  connectedCallback() {
-    this.initItemSelectionObserver();
-  }
-  /**
-   * Component lifecycle - disconnectedCallback
-   */
-  disconnectedCallback() {
-    ChangeManager.unregister(DROPDOWN_ITEM_CLICK, this.itemSelectionObserver);
-  }
   /**
    * Component lifecycle - componentWillLoad
    */
@@ -919,15 +875,6 @@ class VegaDropdownSelectedController extends VegaSlimmer {
   watchSource() {
     this.checkSelectedSourceKey(this.selectedSourceKey);
   }
-  /**
-   * The function initializes a row click observer that handles row selection in a table.
-   */
-  initItemSelectionObserver() {
-    this.itemSelectionObserver = new Observer(this.isAcceptableItemSelectionObserver.bind(this), (payload) => {
-      this.select(payload.itemKey);
-    });
-    ChangeManager.register(DROPDOWN_ITEM_CLICK, this.itemSelectionObserver);
-  }
   /**
    * The function checks if the input is an acceptable item selection observer.
    *
@@ -936,26 +883,11 @@ class VegaDropdownSelectedController extends VegaSlimmer {
    */
   isAcceptableItemSelectionObserver(input) {
     if (input['host']['tagName'] === 'VEGA-DROPDOWN-ITEM') {
-      return this.host === this.getDropdownByItem(input['host']);
+      return this.isCurrentDropdown(input['host']);
     }
     /* istanbul ignore next */
     return false;
   }
-  /**
-   * The function `getDropdownByItem` returns the dropdown element associated with a given item element.
-   *
-   * @param {HTMLElement} item - The `item` parameter is an HTMLElement representing the item that was
-   * clicked or selected in the dropdown menu.
-   * @returns {Nullable<HTMLElement>} an HTMLElement or null.
-   */
-  getDropdownByItem(item) {
-    const appender = findParent(item, '.vega-dropdown');
-    if (appender && appender.dataset['parentId']) {
-      return document.querySelector(`[data-id='${appender.dataset['parentId']}']`);
-    }
-    /* istanbul ignore next */
-    return null;
-  }
   /**
    * The select function handles the selection of a key, either adding it to the selectedSourceKey array
    * or setting it as the only selected key.
@@ -972,18 +904,27 @@ class VegaDropdownSelectedController extends VegaSlimmer {
       else {
         this.selectedSourceKey = [...this.selectedSourceKey, key];
       }
-      this.vegaClick.emit(this.selectedSourceKey);
     }
     else if (this.selectType === 'single') {
       this.selectedSourceKey = key;
       this.appenderController.hide();
-      this.vegaClick.emit(this.selectedSourceKey);
     }
     else {
       this.appenderController.hide();
-      this.vegaClick.emit(key);
     }
-    this.vegaDropdownClick.emit(key);
+    this.dropdownClickEventEmitter.emit(key);
+  }
+  /**
+   * The function checks if the given item belongs to the current 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
+   * dropdown.
+   * @returns {boolean} a boolean value.
+   */
+  isCurrentDropdown(item) {
+    const appender = findParent(item, 'vega-dropdown-content-box');
+    return this.host === appender['data-parent-ref'];
   }
   /**
    * The function `checkSelectedSourceKey` checks if the selected source key is valid based on the select
@@ -1035,62 +976,56 @@ class VegaDropdownSelectedController extends VegaSlimmer {
     return result;
   }
 }
-__decorate$3([
+__decorate$b([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "host", void 0);
-__decorate$3([
+__decorate$b([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "selectType", void 0);
-__decorate$3([
+__decorate$b([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "source", void 0);
-__decorate$3([
+__decorate$b([
   MapToComponentField({ writable: true })
 ], VegaDropdownSelectedController.prototype, "selectedSourceKey", void 0);
-__decorate$3([
-  MapToComponentField()
-], VegaDropdownSelectedController.prototype, "vegaClick", void 0);
-__decorate$3([
+__decorate$b([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "vegaDropdownClick", void 0);
-__decorate$3([
+__decorate$b([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "appenderController", void 0);
-__decorate$3([
+__decorate$b([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "childrenController", void 0);
-__decorate$3([
+__decorate$b([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "renderModeController", void 0);
-__decorate$3([
-  MapToComponentMethod('connectedCallback')
-], VegaDropdownSelectedController.prototype, "connectedCallback", null);
-__decorate$3([
-  MapToComponentMethod('disconnectedCallback')
-], VegaDropdownSelectedController.prototype, "disconnectedCallback", null);
-__decorate$3([
+__decorate$b([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "dropdownClickEventEmitter", void 0);
+__decorate$b([
   MapToComponentMethod('componentWillLoad')
 ], VegaDropdownSelectedController.prototype, "componentWillLoad", null);
-__decorate$3([
+__decorate$b([
   MapToComponentMethod('clearSelection')
 ], VegaDropdownSelectedController.prototype, "clearSelection", null);
-__decorate$3([
+__decorate$b([
   MapToComponentMethod('getSelection')
 ], VegaDropdownSelectedController.prototype, "getSelection", null);
-__decorate$3([
+__decorate$b([
   MapToComponentMethod('setSelection')
 ], VegaDropdownSelectedController.prototype, "watchSelectedRowKeySet", null);
-__decorate$3([
+__decorate$b([
   MapToComponentMethod('watchSelectType')
 ], VegaDropdownSelectedController.prototype, "watchSelectType", null);
-__decorate$3([
+__decorate$b([
   MapToComponentMethod('watchSelectedSourceKey')
 ], VegaDropdownSelectedController.prototype, "watchSelectedSourceKey", null);
-__decorate$3([
+__decorate$b([
   MapToComponentMethod('watchSource')
 ], VegaDropdownSelectedController.prototype, "watchSource", null);
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$a = (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;
@@ -1127,14 +1062,14 @@ class VegaDropdownRenderModeController extends VegaSlimmer {
     this.renderMode = this.host.querySelector('[slot=items]') !== null ? 'SLOT' : 'SOURCE';
   }
 }
-__decorate$2([
+__decorate$a([
   MapToComponentField()
 ], VegaDropdownRenderModeController.prototype, "host", void 0);
-__decorate$2([
+__decorate$a([
   MapToComponentMethod('connectedCallback')
 ], VegaDropdownRenderModeController.prototype, "connectedCallback", null);
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (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;
@@ -1152,7 +1087,7 @@ class VegaDropdownChildrenController extends VegaSlimmer {
      * The `syncUpDropdownCurrentDataBySlot` method is responsible for
      * synchronizing the current data in a dropdown based on the items present in the slot.
      */
-    this.syncUpDropdownCurrentDataBySlot = () => {
+    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);
@@ -1210,23 +1145,30 @@ class VegaDropdownChildrenController extends VegaSlimmer {
   syncUpDropdownCurrentData() {
     this.clearDropdownCurrentData();
     if (this.renderModeController.isSourceRenderMode()) {
-      this.syncUpDropdownCurrentDataBySource();
+      this.collectKeyAndLabelFromSource(this.source);
     }
     else {
-      this.syncUpDropdownCurrentDataBySlot();
+      this.collectKeyAndLabelFromSlot();
     }
   }
   /**
-   * The function syncs up the current data in a dropdown based on the source data, by adding labels and
-   * keys to respective sets.
+   * 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
    */
-  syncUpDropdownCurrentDataBySource() {
-    if (this.renderModeController.isSourceRenderMode()) {
-      this.source.forEach((item) => {
+  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 */
   /**
@@ -1254,41 +1196,43 @@ class VegaDropdownChildrenController extends VegaSlimmer {
     this.labelSet.clear();
   }
 }
-__decorate$1([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "host", void 0);
-__decorate$1([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "source", void 0);
-__decorate$1([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "sourceController", void 0);
-__decorate$1([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "renderModeController", void 0);
-__decorate$1([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "listRenderer", void 0);
-__decorate$1([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "renderer", void 0);
-__decorate$1([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "selectedController", void 0);
-__decorate$1([
+__decorate$9([
   MapToComponentMethod('disconnectedCallback')
 ], VegaDropdownChildrenController.prototype, "disconnectedCallback", null);
-__decorate$1([
+__decorate$9([
   MapToComponentMethod('componentWillLoad')
 ], VegaDropdownChildrenController.prototype, "componentWillLoad", null);
-__decorate$1([
+__decorate$9([
   MapToComponentMethod('componentDidLoad')
 ], VegaDropdownChildrenController.prototype, "componentDidLoad", null);
-__decorate$1([
+__decorate$9([
   MapToComponentMethod('watchSource')
 ], VegaDropdownChildrenController.prototype, "watchSource", null);
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+const vegaDropdownCss = ":host{display:inline-block}";
+
+var __decorate$8 = (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);
@@ -1301,13 +1245,17 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 const VegaDropdown = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.vegaClick = createEvent(this, "vegaClick", 7);
     this.vegaDropdownClick = createEvent(this, "vegaDropdownClick", 7);
+    this.dropdownClick = createEvent(this, "dropdownClick", 7);
     this.vegaShow = createEvent(this, "vegaShow", 7);
+    this.dropdownShow = createEvent(this, "dropdownShow", 7);
     this.vegaHide = createEvent(this, "vegaHide", 7);
+    this.dropdownHide = createEvent(this, "dropdownHide", 7);
     this.vegaCreate = createEvent(this, "vegaCreate", 7);
+    this.create = createEvent(this, "create", 7);
     this.vegaSearch = createEvent(this, "vegaSearch", 7);
-    this.dropdownId = generateUUID();
+    this.dropdownSearch = createEvent(this, "dropdownSearch", 7);
+    this.globalSlimmers = {};
     this.renderer = new VegaDropdownRenderer();
     this.sourceController = new VegaDropdownSourceController();
     this.searchRenderer = new VegaDropdownSearchRenderer();
@@ -1318,13 +1266,19 @@ const VegaDropdown = class {
     this.keyboardController = new VegaDropdownKeyboardController();
     this.appenderController = new VegaDropdownAppenderController();
     this.searchController = new VegaDropdownSearchController();
-    this.formatSourceController = new VegaDropdownFormatSourceController();
     this.selectedController = new VegaDropdownSelectedController();
     this.renderModeController = new VegaDropdownRenderModeController();
     this.childrenController = new VegaDropdownChildrenController();
     this.selectTypeNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'selectType', 'watchSelectType');
     this.selectedSourceKeyNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'selectedSourceKey', 'watchSelectedSourceKey');
     this.prefixIconSlotNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'prefixIconSlot', 'watchPrefixIconSlot');
+    this.itemClickObserver = new ChildNodesNotifyObserverSlimmer(DROPDOWN_ITEM_CLICK, (payload) => this.selectedController.select(payload.detail.itemKey), this.selectedController.isAcceptableItemSelectionObserver.bind(this.selectedController));
+    this.showEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownShow);
+    this.hideEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownHide);
+    this.dropdownClickEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownClick);
+    this.createEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaCreate);
+    this.searchEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownSearch);
+    this.itemDisplayRuleNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'itemDisplayRule', 'watchItemDisplayRule');
     this.searchString = null;
     this.maxHeightOfItemsContainer = 400;
     this.isDropdownShow = false;
@@ -1447,6 +1401,8 @@ const VegaDropdown = class {
   }
   watchPrefixIconSlot() {
   }
+  watchItemDisplayRule() {
+  }
   /**
    * Invoke this method to programmatically display the dropdown menu.
    */
@@ -1490,67 +1446,637 @@ const VegaDropdown = class {
   }
   render() {
     slotPlaceholder(h("slot", null));
-    return sanitizeVegaComponent(h(Host, { "data-id": this.dropdownId }, this.renderer.render(this.dropdownId)), this.host);
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
   }
   get host() { return getElement(this); }
   static get watchers() { return {
     "isDropdownShow": ["watchIsDropdownShow"],
-    "source": ["watchSource"],
+    "source": ["watchSource", "watchItemDisplayRule"],
     "selectType": ["watchSelectType"],
     "selectedSourceKey": ["watchSelectedSourceKey"],
     "prefixIconSlot": ["watchPrefixIconSlot"]
   }; }
 };
-__decorate([
+__decorate$8([
+  InjectVegaGlobalSlimmer()
+], VegaDropdown.prototype, "globalSlimmers", void 0);
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "renderer", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "sourceController", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "searchRenderer", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "createRenderer", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "listRenderer", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "groupLevelRenderer", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "itemLevelRenderer", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "keyboardController", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "appenderController", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "searchController", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaDropdown.prototype, "formatSourceController", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectedController", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "renderModeController", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "childrenController", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectTypeNotifySlimmer", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectedSourceKeyNotifySlimmer", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "prefixIconSlotNotifySlimmer", void 0);
+__decorate$8([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "itemClickObserver", void 0);
+__decorate$8([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "showEventEmitter", void 0);
+__decorate$8([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "hideEventEmitter", void 0);
+__decorate$8([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "dropdownClickEventEmitter", void 0);
+__decorate$8([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "createEventEmitter", void 0);
+__decorate$8([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "searchEventEmitter", void 0);
+__decorate$8([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "itemDisplayRuleNotifySlimmer", 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 .vega-dropdown .vega-dropdown-loading.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)}";
+
+var __decorate$7 = (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;
+};
+const VegaDropdownContentBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host);
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, h("slot", null)), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate$7([
+  InjectVegaGlobalSlimmer()
+], VegaDropdownContentBox.prototype, "globalSlimmers", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaDropdownContentBox.prototype, "eventPrevent", void 0);
+VegaDropdownContentBox.style = vegaDropdownContentBoxCss;
+
+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;
+  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 VegaDropdownGroupRenderer extends VegaSlimmer {
+  render() {
+    return (h("li", { class: "vega-dropdown-group" },
+      this.renderLabel(),
+      this.renderChildren(),
+      this.renderDivide()));
+  }
+  renderLabel() {
+    return h("div", { class: "vega-dropdown-group-label" }, this.label);
+  }
+  renderChildren() {
+    return (h("ul", { class: "vega-dropdown-group-items" },
+      h("slot", null)));
+  }
+  renderDivide() {
+    return this.divide && h("div", { class: "vega-dropdown-group-divide" });
+  }
+}
+__decorate$6([
+  MapToComponentField()
+], VegaDropdownGroupRenderer.prototype, "label", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDropdownGroupRenderer.prototype, "divide", void 0);
+
+const vegaDropdownGroupCss = ":host{display:block}:host .vega-dropdown-group{padding:0px;margin:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));cursor:default;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-dropdown-group{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-dropdown-group{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-dropdown-group{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host .vega-dropdown-group-label{padding-left:16px;padding-right:16px;padding-top:12px;padding-bottom:4px}:host .vega-dropdown-group-items{padding:0px;margin:0px}:host .vega-dropdown-group-divide{background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1));margin-top:4px;margin-bottom:4px;height:1px}";
+
+var __decorate$5 = (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;
+};
+const VegaDropdownGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.renderer = new VegaDropdownGroupRenderer();
+    /**
+     * Determines whether to include a dividing line at
+     *      the bottom of the dropdown group.
+     */
+    this.divide = true;
+  }
+  render() {
+    slotPlaceholder(h("slot", null));
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate$5([
+  InjectVegaGlobalSlimmer()
+], VegaDropdownGroup.prototype, "globalSlimmers", void 0);
+__decorate$5([
+  InjectVegaSlimmer()
+], VegaDropdownGroup.prototype, "renderer", void 0);
+VegaDropdownGroup.style = vegaDropdownGroupCss;
+
+var __decorate$4 = (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 VegaDropdownItemRenderer extends VegaSlimmer {
+  render() {
+    return (h("li", { key: this.label, role: "menuitem", "aria-label": this.label, class: {
+        'vega-dropdown-item-selected': this.selected,
+        'vega-dropdown-item-disabled': this.disabled,
+        'vega-dropdown-item-in-group': !!findParent(this.host, 'vega-dropdown-group'),
+        [`vega-dropdown-item-display-${this.itemDisplayRule}`]: true,
+      }, tabIndex: this.disabled ? -1 : 0, 
+      /* eslint-disable-next-line react/jsx-no-bind */
+      onClick: (e) => this.onSelect(e), onKeyDown: createEnterKeyHandlerToTriggerClick(), style: this.height > 0 && {
+        height: `${this.height}px`,
+        boxSizing: 'border-box',
+        overflow: 'hidden',
+      } },
+      this.renderSelectIcon(),
+      this.renderPrefixIcon(),
+      this.renderLabel(),
+      this.renderCounter()));
+  }
+  renderSelectIcon() {
+    return (this.selectType !== 'none' && (h("span", { class: "selected-prefix" },
+      this.selectType === 'single' && this.renderSingleSelectIcon(),
+      this.selectType === 'multiple' && this.renderMultipleSelectIcon())));
+  }
+  renderSingleSelectIcon() {
+    return this.selected && h("vega-icon", { icon: "checkmark", size: "size-16" });
+  }
+  renderMultipleSelectIcon() {
+    return h("vega-checkbox", { size: "small", checked: this.selected, disabled: this.disabled });
+  }
+  renderPrefixIcon() {
+    return ((this.prefixIcon || this.prefixIconSlot) && (h("div", { class: "item-prefix" }, this.renderItemPrefixIcon())));
+  }
+  renderItemPrefixIcon() {
+    return this.prefixIcon && h("vega-icon", { icon: this.prefixIcon, size: "size-16" });
+  }
+  renderLabel() {
+    if (this.label) {
+      return (h(Fragment, null,
+        h("span", { innerHTML: this.label, class: "vega-dropdown-item-label" }),
+        h("span", { class: "v-hidden" },
+          h("slot", null))));
+    }
+    else {
+      return (h("span", { class: "vega-dropdown-item-label" },
+        h("slot", null)));
+    }
+  }
+  renderCounter() {
+    return (this.count > 0 && (h("div", { class: "item-counter" },
+      h("vega-counter-badge", { count: this.count, color: "bg-action", offset: [10, 10] }))));
+  }
+  onSelect(e) {
+    this.vegaDropdownItemClickController.handleClick(e);
+  }
+}
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "host", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "label", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "count", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "prefixIcon", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "prefixIconSlot", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "disabled", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "selected", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "selectType", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "height", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "itemDisplayRule", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "vegaDropdownItemClickController", void 0);
+
+var __decorate$3 = (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;
+};
+/**
+ * Controller for the vega dropdown item states
+ */
+class VegaDropdownItemStateController extends SubStateObserverSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor() {
+    super({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      parent: () => {
+        // we trigger this method in `componentWillLoad`.
+        // if dropdown is template mode, the `vega-dropdown-content-box` have not been rendered, but we can find dropdown directly.
+        // if dropdown is source mode, the `vega-dropdown-content-box` load before dropdown-item load, we can through `vega-dropdown-content-box` to find vega-dropdown
+        const parent = findParent(this.host, 'vega-dropdown');
+        if (parent) {
+          return parent;
+        }
+        else {
+          const appender = findParent(this.host, 'vega-dropdown-content-box');
+          /* istanbul ignore next */
+          // TODO: to add test for throw, since there is not better function to handle `componentWillLoad` in spec/e2e test.
+          if (appender && appender['data-parent-ref']) {
+            return appender['data-parent-ref'];
+          }
+          else {
+            throw new Error('Can not found parent vega-dropdown while synchronize properties from vega-dropdown to vega-dropdown-item');
+          }
+        }
+      },
+      subStates: [
+        {
+          subStateName: 'selectType',
+          parentStateName: 'selectType',
+        },
+        {
+          subStateName: 'prefixIconSlot',
+          parentStateName: 'prefixIconSlot',
+        },
+        {
+          subStateName: 'itemDisplayRule',
+          parentStateName: 'itemDisplayRule',
+        },
+        {
+          subStateName: 'selected',
+          parentStateName: 'selectedSourceKey',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (selectedSourceKey) => {
+            this.selected = Array.isArray(selectedSourceKey)
+              ? selectedSourceKey.includes(this.itemKey)
+              : selectedSourceKey === this.itemKey;
+          },
+        },
+      ],
+    });
+  }
+}
+__decorate$3([
+  MapToComponentField()
+], VegaDropdownItemStateController.prototype, "host", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaDropdownItemStateController.prototype, "selectType", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDropdownItemStateController.prototype, "itemKey", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaDropdownItemStateController.prototype, "selected", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaDropdownItemStateController.prototype, "prefixIconSlot", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaDropdownItemStateController.prototype, "itemDisplayRule", void 0);
+
+var __decorate$2 = (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;
+};
+/**
+ * Controller for the vega dropdown item states
+ */
+class VegaDropdownItemClickController extends VegaSlimmer {
+  /**
+   * The handleClick function emits an event with the itemKey and notifies the ChangeManager with the
+   * dropdown item click event and the itemKey.
+   *
+   * @param {MouseEvent} e - MouseEvent - The event object that contains information about the mouse
+   * click event.
+   */
+  handleClick(e) {
+    this.clickEventEmitter.emit({ itemKey: this.itemKey }, e);
+    ChangeManager.notify(DROPDOWN_ITEM_CLICK, { host: this.host, detail: { itemKey: this.itemKey } });
+  }
+}
+__decorate$2([
+  MapToComponentField()
+], VegaDropdownItemClickController.prototype, "host", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaDropdownItemClickController.prototype, "itemKey", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaDropdownItemClickController.prototype, "vegaClick", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaDropdownItemClickController.prototype, "clickEventEmitter", void 0);
+
+const vegaDropdownItemCss = ":host{display:block}:host li{padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;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{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-in-group{padding-left:40px}: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$1 = (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;
+};
+const VegaDropdownItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaClick = createEvent(this, "vegaClick", 7);
+    this.click = createEvent(this, "click", 7);
+    this.globalSlimmers = {};
+    this.renderer = new VegaDropdownItemRenderer();
+    this.vegaDropdownItemStateController = new VegaDropdownItemStateController();
+    this.vegaDropdownItemClickController = new VegaDropdownItemClickController();
+    this.dropdownItemEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.host);
+    this.clickEventEmitter = createEventEmitSlimmer(VegaDropdownItem, VegaClick);
+    /**
+     * The placeholder of prefix icon, while other item have prefix icon but no in this item,
+     * if you want to keep those items align, you can set this placeholder as true.
+     */
+    this.prefixIconSlot = false;
+    /**
+     * Specifies the dropdown item's selected status.
+     */
+    this.selected = false;
+    /**
+     * Specifies the dropdown item's rule of display.
+     */
+    this.itemDisplayRule = 'newline';
+    /**
+     * Specifies the disabled status of the dropdown item.
+     */
+    this.disabled = false;
+  }
+  render() {
+    slotPlaceholder(h("slot", null));
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate$1([
+  InjectVegaGlobalSlimmer()
+], VegaDropdownItem.prototype, "globalSlimmers", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDropdownItem.prototype, "renderer", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDropdownItem.prototype, "vegaDropdownItemStateController", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDropdownItem.prototype, "vegaDropdownItemClickController", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDropdownItem.prototype, "dropdownItemEventPrevent", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDropdownItem.prototype, "clickEventEmitter", void 0);
+VegaDropdownItem.style = vegaDropdownItemCss;
+
+var __decorate = (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;
+};
+const VegaVirtualScroll = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    /** Count of all items */
+    this.totalCount = 0;
+    /** Count of in viewport items */
+    this.viewportItemsCount = 0;
+    /** Count of extend items, we render those count items in header and footer of viewport */
+    this.extendItemsCount = 10;
+    /** This is the start index of items should be really rendered. */
+    this.startIndex = 0;
+    /** This is the end index of items should be really rendered. */
+    this.endIndex = 0;
+    /** This is the start index of viewport. */
+    this.viewportStartIndex = 0;
+    /** Height of all items, This is a rough estimate. We assume that each item is of equal height. */
+    this.totalHeight = 0;
+    /** When scrolling, we need to set this value to ensure that the viewport is always visible */
+    this.transformY = 0;
+    /** current scrollTop of container */
+    this.scrollTop = 0;
+    /** The all items of source */
+    this.source = [];
+    /** The approximate height of each item */
+    this.approxItemHeight = 40;
+    /** The max height of viewport */
+    this.viewportMaxHeight = 320;
+    /**
+     * The threshold of use virtual scroll,
+     * while the count of source over this value, we use virtual scroll,
+     * otherwise, we render items as normal*/
+    this.thresholdOfWork = 60;
+    /** We set this key to check the source is really change and should refresh virtual scroll */
+    this.sourceItemIdentifier = 'key';
+  }
+  watchScrollTop() {
+    this.virtualScrollContainerRef && (this.virtualScrollContainerRef.scrollTop = this.scrollTop);
+    this.setPositionByScrollTop();
+  }
+  watchSourceChange(newValue, oldValue) {
+    if (!this.isSameSource(newValue, oldValue)) {
+      this.initVirtualScroll();
+    }
+  }
+  watchToInitData() {
+    this.initVirtualScroll();
+  }
+  componentWillLoad() {
+    this.initVirtualScroll();
+  }
+  componentDidLoad() {
+    this.listenScrollContainer();
+  }
+  // While dropdown select a item and hide dropdown and show dropdown again, the virtual scroll will be re-render
+  // and dropdown will call scrollToIndex with same index param.
+  // In this time, the value of scrollTop not change, but container scrollTop is become 0 by the re-render of virtual scroll,
+  // so we should update container scrollTop to avoid inconsistencies between view and component.
+  componentDidRender() {
+    this.virtualScrollContainerRef.scrollTop = this.scrollTop;
+  }
+  /**
+   * 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.
+   */
+  async scrollToIndex(index) {
+    if (index >= 0) {
+      if (this.totalCount < this.thresholdOfWork) {
+        const selectedItem = this.virtualScrollContainerRef.querySelector(`:nth-child(${index + 1})`);
+        containerScrollToItem(this.virtualScrollContainerRef, selectedItem);
+      }
+      else {
+        this.scrollTop = index * this.approxItemHeight;
+      }
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { style: { maxHeight: `${this.viewportMaxHeight}px`, overflow: 'auto' }, class: "virtual-scroll-container", ref: (el) => (this.virtualScrollContainerRef = el) }, this.totalCount < this.thresholdOfWork
+      ? this.renderNormal()
+      : this.renderVirtualScroll())));
+  }
+  renderNormal() {
+    return (h(Fragment, null, this.source.map((item, index) => {
+      return this.renderItem(item, index);
+    })));
+  }
+  renderVirtualScroll() {
+    return (h("div", { style: {
+        height: `${this.totalHeight}px`,
+        position: 'relative',
+      } }, h("div", { class: "virtual-scroll-block", style: {
+        transform: `translateY(${this.transformY}px)`,
+      } }, this.source
+      .slice(this.startIndex, this.viewportStartIndex)
+      .map((item, index) => {
+      return this.renderItem(item, this.startIndex + index, this.approxItemHeight);
+    }), this.source
+      .slice(this.viewportStartIndex, this.endIndex)
+      .map((item, index) => {
+      return this.renderItem(item, this.viewportStartIndex + index);
+    }))));
+  }
+  initVirtualScroll() {
+    this.totalCount = this.source.length;
+    this.totalHeight = this.totalCount * this.approxItemHeight;
+    this.viewportItemsCount = Math.ceil(this.viewportMaxHeight / this.approxItemHeight);
+    this.maxStartIndex = this.totalCount - this.viewportItemsCount - this.extendItemsCount;
+    this.startIndex = 0;
+    this.viewportStartIndex = 0;
+    this.endIndex = this.viewportItemsCount + this.extendItemsCount;
+    this.scrollTop = 0;
+    this.transformY = 0;
+  }
+  /* istanbul ignore next */
+  listenScrollContainer() {
+    this.virtualScrollContainerRef.addEventListener('scroll', () => {
+      this.scrollTop = this.virtualScrollContainerRef.scrollTop;
+    });
+  }
+  /**
+   * While scrollTop of container change, the startIndex, endIndex, viewPortStartIndex and transformY will be change.
+   * The following is the process of change:
+   *
+   *---scrollTop---startIndex---viewportStartIndex---endIndex---transformY
+   *---30----------0------------0--------------------18---------0
+   *---40----------0------------1--------------------19---------0
+   *---320---------0------------8--------------------26---------0
+   *---400---------0------------10-------------------28---------0
+   *---480---------2------------12-------------------30---------80
+   *---800---------10-----------20-------------------38---------400
+   */
+  setPositionByScrollTop() {
+    const currentIndex = Math.floor(this.scrollTop / this.approxItemHeight);
+    this.startIndex = Math.min(Math.max(currentIndex - this.extendItemsCount, 0), this.maxStartIndex);
+    this.viewportStartIndex =
+      this.startIndex === 0 ? currentIndex : this.startIndex + this.extendItemsCount;
+    this.endIndex = this.viewportStartIndex + this.viewportItemsCount + this.extendItemsCount;
+    this.transformY = Math.min(Math.max(this.scrollTop - this.extendItemsCount * this.approxItemHeight, 0), this.maxStartIndex * this.approxItemHeight);
+  }
+  isSameSource(first, second) {
+    if (first.length != second.length)
+      return false;
+    for (let i = 0; i < first.length; i++) {
+      if (first[i][this.sourceItemIdentifier] !== second[i][this.sourceItemIdentifier]) {
+        return false;
+      }
+    }
+    return true;
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "scrollTop": ["watchScrollTop"],
+    "source": ["watchSourceChange"],
+    "approxItemHeight": ["watchToInitData"],
+    "viewportMaxHeight": ["watchToInitData"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaVirtualScroll.prototype, "globalSlimmers", void 0);
 
-export { VegaDropdown as vega_dropdown };
+export { VegaDropdown as vega_dropdown, VegaDropdownContentBox as vega_dropdown_content_box, VegaDropdownGroup as vega_dropdown_group, VegaDropdownItem as vega_dropdown_item, VegaVirtualScroll as vega_virtual_scroll };