@progress/kendo-angular-dropdowns 18.1.0-develop.30 → 18.1.0-develop.4

package/common/action-sheet.component.d.ts

@@ -36,12 +36,8 @@ export declare class ResponsiveRendererComponent {
     searchBarValue: string;
     animationDuration: number;
     xIcon: SVGIcon;
-    private expanded;
     messageFor(key: string): string;
     onValueChange(value: string): void;
-    onOverlayClick(): void;
-    handleExpand(): void;
-    handleClose(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ResponsiveRendererComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ResponsiveRendererComponent, "responsive-renderer", never, { "title": { "alias": "title"; "required": false; }; "showActionButtons": { "alias": "showActionButtons"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "size": { "alias": "size"; "required": false; }; "showTextInput": { "alias": "showTextInput"; "required": false; }; "sharedPopupActionSheetTemplate": { "alias": "sharedPopupActionSheetTemplate"; "required": false; }; "isActionSheetExpanded": { "alias": "isActionSheetExpanded"; "required": false; }; "text": { "alias": "text"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; }, { "closePopup": "closePopup"; "textInputChange": "textInputChange"; "navigate": "navigate"; "onExpand": "onExpand"; "onCollapse": "onCollapse"; "onApply": "onApply"; "onCancel": "onCancel"; }, never, never, true, never>;
 }

package/dropdowntrees/checked-state/base-check.directive.d.ts

@@ -22,8 +22,8 @@ export declare abstract class BaseCheckDirective {
     /**
      * @hidden
      * The flag is needed in order to determine how to construct the items map keys.
-     * If `true`, then the key consists of the item's value and level (depth),
-     * else the key consists of the item's value and 0 (no leveling required)
+     * If `true`, then the key consists of the item's value and 0 (no leveling required),
+     * else the key consists of the item's value and level (depth)
      */
     isHeterogeneous: boolean;
     /**

package/dropdowntrees/multiselecttree.component.d.ts

@@ -489,8 +489,8 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
     /**
      * @hidden
      * The flag is needed in order to determine how to construct the items map keys.
-     * If `true`, then the key consists of the item's value and level (depth),
-     * else the key consists of the item's value and 0 (no leveling required)
+     * If `true`, then the key consists of the item's value and 0 (no leveling required),
+     * else the key consists of the item's value and level (depth)
      */
     isHeterogeneous: boolean;
     /**

package/esm2022/comboboxes/multicolumncombobox.component.mjs

@@ -179,10 +179,14 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
      * @hidden
      */
     getColumnWidth(index) {
-        if (!this.virtual) {
+        const popupWidthNumber = +(this.popupWidth.max.slice(0, -2));
+        if (this.totalColumnsWidth >= popupWidthNumber) {
             return this.columns.get(index).width;
         }
-        return this.headerColumnWidths[index];
+        if (this.virtual && isPresent(this.headerColumnWidths[index])) {
+            return this.headerColumnWidths[index];
+        }
+        return this.columns.get(index).width;
     }
     verifySettings() {
         if (!isDevMode()) {

package/esm2022/common/action-sheet.component.mjs

@@ -42,7 +42,6 @@ export class ResponsiveRendererComponent {
     searchBarValue = '';
     animationDuration = animationDuration;
     xIcon = xIcon;
-    expanded = false;
     messageFor(key) {
         return this.localization.get(key);
     }
@@ -50,28 +49,15 @@ export class ResponsiveRendererComponent {
         this.searchBarValue = value;
         this.textInputChange.emit(value);
     }
-    onOverlayClick() {
-        if (this.expanded) {
-            this.handleClose();
-        }
-    }
-    handleExpand() {
-        this.onExpand.emit();
-        this.expanded = true;
-    }
-    handleClose() {
-        this.closePopup.emit();
-        this.expanded = false;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResponsiveRendererComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ResponsiveRendererComponent, isStandalone: true, selector: "responsive-renderer", inputs: { title: "title", showActionButtons: "showActionButtons", subtitle: "subtitle", size: "size", showTextInput: "showTextInput", sharedPopupActionSheetTemplate: "sharedPopupActionSheetTemplate", isActionSheetExpanded: "isActionSheetExpanded", text: "text", placeholder: "placeholder" }, outputs: { closePopup: "closePopup", textInputChange: "textInputChange", navigate: "navigate", onExpand: "onExpand", onCollapse: "onCollapse", onApply: "onApply", onCancel: "onCancel" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }], ngImport: i0, template: `
         <kendo-actionsheet
             #actionSheet
             [animation]="{ duration: animationDuration }"
             [expanded]="isActionSheetExpanded"
-            (overlayClick)="onOverlayClick()"
+            (overlayClick)="closePopup.emit()"
             (keydown)="navigate.emit($event)"
-            (expand)="handleExpand()"
+            (expand)="onExpand.emit()"
             (collapse)="onCollapse.emit()"
         >
             <ng-template kendoActionSheetTemplate>
@@ -93,7 +79,7 @@ export class ResponsiveRendererComponent {
                                 [tabIndex]="-1"
                                 aria-hidden="true"
                                 innerCssClass="k-button-icon"
-                                (click)="handleClose()"
+                                (click)="closePopup.emit()"
                             ></button>
                         </div>
                     </div>
@@ -155,9 +141,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             #actionSheet
             [animation]="{ duration: animationDuration }"
             [expanded]="isActionSheetExpanded"
-            (overlayClick)="onOverlayClick()"
+            (overlayClick)="closePopup.emit()"
             (keydown)="navigate.emit($event)"
-            (expand)="handleExpand()"
+            (expand)="onExpand.emit()"
             (collapse)="onCollapse.emit()"
         >
             <ng-template kendoActionSheetTemplate>
@@ -179,7 +165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 [tabIndex]="-1"
                                 aria-hidden="true"
                                 innerCssClass="k-button-icon"
-                                (click)="handleClose()"
+                                (click)="closePopup.emit()"
                             ></button>
                         </div>
                     </div>

package/esm2022/common/list.component.mjs

@@ -141,9 +141,6 @@ export class ListComponent {
                 this.scrollToFocused = !changes['data'].isFirstChange();
             }
             this.setOverflow();
-            this.zone.onStable.pipe(take(1)).subscribe(() => {
-                this.setGroupAttributes();
-            });
         }
         if (isChanged('virtual', changes, false)) {
             this.setOverflow();
@@ -260,7 +257,7 @@ export class ListComponent {
             let index;
             if (item.getAttribute("role") === "group") {
                 index = parseInt(item.getAttribute("group-index"), 10);
-                this.currentGroup = this.dataService.groupAt(index)?.value;
+                this.currentGroup = this.dataService.groupAt(index).value;
             }
             else {
                 index = parseInt(item.getAttribute("index"), 10);
@@ -498,7 +495,7 @@ export class ListComponent {
                     tabindex="-1"
                     aria-hidden="true"
                     [ngClass]="checkboxClasses"
-                    (change)="onCheckedChange($event, itemIndex + startFrom)"
+                    (change)="onCheckedChange($event, itemIndex)"
                     [checked]="isChecked(itemIndex)"
                 />
                 <ng-template *ngIf="template"
@@ -522,7 +519,7 @@ export class ListComponent {
                     'minHeight.px' : virtual?.itemHeight,
                     'boxSizing' : virtual ? 'border-box' : 'inherit'}"
                 [attr.group-index]="dataItem.index"
-                [attr.id]="optionPrefix + '-' + dataItem.groupIndex + '-' + dataItem.value.split(' ').join('')"
+                [attr.id]="optionPrefix + '-' + dataItem.groupIndex + '-' + dataItem.value"
                 [attr.tabIndex]="-1"
                 [style.width.px]="rowWidth ?? null">
                     <span [class]="listGroupItemTextClass">
@@ -636,7 +633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     tabindex="-1"
                     aria-hidden="true"
                     [ngClass]="checkboxClasses"
-                    (change)="onCheckedChange($event, itemIndex + startFrom)"
+                    (change)="onCheckedChange($event, itemIndex)"
                     [checked]="isChecked(itemIndex)"
                 />
                 <ng-template *ngIf="template"
@@ -660,7 +657,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     'minHeight.px' : virtual?.itemHeight,
                     'boxSizing' : virtual ? 'border-box' : 'inherit'}"
                 [attr.group-index]="dataItem.index"
-                [attr.id]="optionPrefix + '-' + dataItem.groupIndex + '-' + dataItem.value.split(' ').join('')"
+                [attr.id]="optionPrefix + '-' + dataItem.groupIndex + '-' + dataItem.value"
                 [attr.tabIndex]="-1"
                 [style.width.px]="rowWidth ?? null">
                     <span [class]="listGroupItemTextClass">

package/esm2022/dropdownlist/dropdownlist.component.mjs

@@ -1003,6 +1003,7 @@ export class DropDownListComponent {
         });
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.listBoxId);
+        this.setAriaactivedescendant();
         const popupWrapper = this.popupRef.popupElement;
         const { min, max } = this.width;
         popupWrapper.addEventListener('mousedown', this.popupMouseDownHandler);
@@ -1022,7 +1023,6 @@ export class DropDownListComponent {
         this.subs.add(this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
             setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
-            this.setAriaactivedescendant();
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
@@ -1126,7 +1126,7 @@ export class DropDownListComponent {
     setAriaactivedescendant() {
         if (this.ariaActivedescendant) {
             this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-activedescendant', this.ariaActivedescendant);
-            const searchInput = this.popupRef?.popupElement.querySelector('input[role="searchbox"]') || this.actionSheetSearchBar?.input.nativeElement;
+            const searchInput = this.popupRef.popupElement.querySelector('input[role="searchbox"]');
             if (searchInput) {
                 this.renderer.setAttribute(searchInput, 'aria-activedescendant', this.ariaActivedescendant);
             }
@@ -1455,8 +1455,6 @@ export class DropDownListComponent {
     }
     closeActionSheet() {
         this.actionSheet.toggle(false);
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
-        this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
         if (this.filterable) {
             this.actionSheetSearchBar.value = '';
             this.filterChange.emit('');
@@ -1467,10 +1465,7 @@ export class DropDownListComponent {
         this.windowSize = this.adaptiveService.size;
         this.actionSheet.toggle(true);
         this.cdr.detectChanges();
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.listBoxId);
         setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
-        this.setAriaactivedescendant();
         this.title = setActionSheetTitle(this.wrapper, this.title);
         updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
         this.cdr.detectChanges();

package/esm2022/dropdowntrees/checked-state/base-check.directive.mjs

@@ -14,8 +14,8 @@ export class BaseCheckDirective {
     /**
      * @hidden
      * The flag is needed in order to determine how to construct the items map keys.
-     * If `true`, then the key consists of the item's value and level (depth),
-     * else the key consists of the item's value and 0 (no leveling required)
+     * If `true`, then the key consists of the item's value and 0 (no leveling required),
+     * else the key consists of the item's value and level (depth)
      */
     isHeterogeneous;
     addItem(item) {
@@ -36,11 +36,7 @@ export class BaseCheckDirective {
         const key = this.getKey(item, level);
         const candidate = { ...item, level, key };
         this.checkedItems = this.checkedItems
-            .filter(item => {
-            const valueMatch = valueFrom(item, this.valueField) === valueFrom(candidate, this.valueField);
-            const levelMatch = item.level === candidate.level;
-            return this.isHeterogeneous ? !(valueMatch && levelMatch) : !valueMatch;
-        });
+            .filter(item => valueFrom(item, this.valueField) !== valueFrom(candidate, this.valueField));
         this.checkedKeys.delete(key);
     }
     isItemChecked(item) {

package/esm2022/dropdowntrees/multiselecttree.component.mjs

@@ -768,8 +768,8 @@ export class MultiSelectTreeComponent {
     /**
      * @hidden
      * The flag is needed in order to determine how to construct the items map keys.
-     * If `true`, then the key consists of the item's value and level (depth),
-     * else the key consists of the item's value and 0 (no leveling required)
+     * If `true`, then the key consists of the item's value and 0 (no leveling required),
+     * else the key consists of the item's value and level (depth)
      */
     isHeterogeneous;
     /**
@@ -1116,7 +1116,7 @@ export class MultiSelectTreeComponent {
         }
         else {
             // Remove single tag when the child items are pre-fetched
-            const dataItem = this.dataItems.find(item => item.tagPositionIndex === index);
+            const dataItem = this.dataItems[index];
             const itemKey = dataItem.key;
             const lookup = this.lookup.itemLookup(itemKey);
             const pendingCheck = [lookup.item];
@@ -1126,20 +1126,10 @@ export class MultiSelectTreeComponent {
                 pendingCheck.push(...this.removeParents(lookup.parent));
             }
             const keysToRemove = pendingCheck.map(item => item.key);
-            // Holds the position indexes of the items to be removed
-            const valueDepthIndices = [];
             this.dataItems = this.dataItems.filter((_item, i) => {
-                const shouldStay = !keysToRemove.includes(_item.key) || this.disabledIndices.has(i);
-                if (!shouldStay) {
-                    // We need to know the index position of the data item to be able to update the valueDepth array accordignly
-                    // as each data item's position is corresponding to the same position in valueDepth
-                    valueDepthIndices.push(i);
-                }
-                return shouldStay;
-            });
-            this.valueDepth = this.valueDepth.filter((_item, i) => {
-                return !valueDepthIndices.includes(i) || this.disabledIndices.has(i);
+                return !keysToRemove.includes(_item.key) || this.disabledIndices.has(i);
             });
+            this.valueDepth = this.dataItems.map(i => i.level);
         }
         this.updateValue(this.dataItems);
         if (!this.isFocused) {
@@ -1548,15 +1538,7 @@ export class MultiSelectTreeComponent {
         const source = this.dataItems.map(item => item.dataItem);
         this.tags = this.tagMapper(source);
         this.disabledIndices = this.disabledItemsMapper();
-        // Create a mapping of tags to position indices
-        const tagIndexMap = new Map(this.tags.map((tag, index) => [JSON.stringify(tag), index]));
-        // Modify dataItems by adding a property to hold the item's position as displayed in the tags
-        this.dataItems.forEach(item => {
-            const serializedDataItem = JSON.stringify(item.dataItem);
-            item.tagPositionIndex = tagIndexMap.has(serializedDataItem)
-                ? tagIndexMap.get(serializedDataItem) // Use the index from tags if it exists
-                : null; // Assign a null value if the dataItem is not visible in the tags
-        });
+        this.dataItems.sort((a, b) => this.tags.indexOf(a.dataItem) - this.tags.indexOf(b.dataItem));
     }
     updateValue(value) {
         const newValue = this.valuePrimitive ?
@@ -1648,8 +1630,6 @@ export class MultiSelectTreeComponent {
     closeActionSheet() {
         this.wrapper.nativeElement.focus();
         this.actionSheet.toggle(false);
-        this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
         if (this.filterable) {
             this.actionSheetSearchBar.value = '';
             this.filterChange.emit('');
@@ -1661,8 +1641,6 @@ export class MultiSelectTreeComponent {
         this.actionSheet.toggle(true);
         this.title = setActionSheetTitle(this.wrapper, this.title);
         this.cdr.detectChanges();
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.treeViewId);
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
         updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
         this.cdr.detectChanges();
         this.opened.emit();

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1738962093,
-    version: '18.1.0-develop.30',
+    publishDate: 1738318302,
+    version: '18.1.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/fesm2022/progress-kendo-angular-dropdowns.mjs

@@ -37,8 +37,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1738962093,
-    version: '18.1.0-develop.30',
+    publishDate: 1738318302,
+    version: '18.1.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2014,9 +2014,6 @@ class ListComponent {
                 this.scrollToFocused = !changes['data'].isFirstChange();
             }
             this.setOverflow();
-            this.zone.onStable.pipe(take(1)).subscribe(() => {
-                this.setGroupAttributes();
-            });
         }
         if (isChanged('virtual', changes, false)) {
             this.setOverflow();
@@ -2133,7 +2130,7 @@ class ListComponent {
             let index;
             if (item.getAttribute("role") === "group") {
                 index = parseInt(item.getAttribute("group-index"), 10);
-                this.currentGroup = this.dataService.groupAt(index)?.value;
+                this.currentGroup = this.dataService.groupAt(index).value;
             }
             else {
                 index = parseInt(item.getAttribute("index"), 10);
@@ -2371,7 +2368,7 @@ class ListComponent {
                     tabindex="-1"
                     aria-hidden="true"
                     [ngClass]="checkboxClasses"
-                    (change)="onCheckedChange($event, itemIndex + startFrom)"
+                    (change)="onCheckedChange($event, itemIndex)"
                     [checked]="isChecked(itemIndex)"
                 />
                 <ng-template *ngIf="template"
@@ -2395,7 +2392,7 @@ class ListComponent {
                     'minHeight.px' : virtual?.itemHeight,
                     'boxSizing' : virtual ? 'border-box' : 'inherit'}"
                 [attr.group-index]="dataItem.index"
-                [attr.id]="optionPrefix + '-' + dataItem.groupIndex + '-' + dataItem.value.split(' ').join('')"
+                [attr.id]="optionPrefix + '-' + dataItem.groupIndex + '-' + dataItem.value"
                 [attr.tabIndex]="-1"
                 [style.width.px]="rowWidth ?? null">
                     <span [class]="listGroupItemTextClass">
@@ -2509,7 +2506,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     tabindex="-1"
                     aria-hidden="true"
                     [ngClass]="checkboxClasses"
-                    (change)="onCheckedChange($event, itemIndex + startFrom)"
+                    (change)="onCheckedChange($event, itemIndex)"
                     [checked]="isChecked(itemIndex)"
                 />
                 <ng-template *ngIf="template"
@@ -2533,7 +2530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     'minHeight.px' : virtual?.itemHeight,
                     'boxSizing' : virtual ? 'border-box' : 'inherit'}"
                 [attr.group-index]="dataItem.index"
-                [attr.id]="optionPrefix + '-' + dataItem.groupIndex + '-' + dataItem.value.split(' ').join('')"
+                [attr.id]="optionPrefix + '-' + dataItem.groupIndex + '-' + dataItem.value"
                 [attr.tabIndex]="-1"
                 [style.width.px]="rowWidth ?? null">
                     <span [class]="listGroupItemTextClass">
@@ -2708,7 +2705,6 @@ class ResponsiveRendererComponent {
     searchBarValue = '';
     animationDuration = animationDuration;
     xIcon = xIcon;
-    expanded = false;
     messageFor(key) {
         return this.localization.get(key);
     }
@@ -2716,28 +2712,15 @@ class ResponsiveRendererComponent {
         this.searchBarValue = value;
         this.textInputChange.emit(value);
     }
-    onOverlayClick() {
-        if (this.expanded) {
-            this.handleClose();
-        }
-    }
-    handleExpand() {
-        this.onExpand.emit();
-        this.expanded = true;
-    }
-    handleClose() {
-        this.closePopup.emit();
-        this.expanded = false;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResponsiveRendererComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ResponsiveRendererComponent, isStandalone: true, selector: "responsive-renderer", inputs: { title: "title", showActionButtons: "showActionButtons", subtitle: "subtitle", size: "size", showTextInput: "showTextInput", sharedPopupActionSheetTemplate: "sharedPopupActionSheetTemplate", isActionSheetExpanded: "isActionSheetExpanded", text: "text", placeholder: "placeholder" }, outputs: { closePopup: "closePopup", textInputChange: "textInputChange", navigate: "navigate", onExpand: "onExpand", onCollapse: "onCollapse", onApply: "onApply", onCancel: "onCancel" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }], ngImport: i0, template: `
         <kendo-actionsheet
             #actionSheet
             [animation]="{ duration: animationDuration }"
             [expanded]="isActionSheetExpanded"
-            (overlayClick)="onOverlayClick()"
+            (overlayClick)="closePopup.emit()"
             (keydown)="navigate.emit($event)"
-            (expand)="handleExpand()"
+            (expand)="onExpand.emit()"
             (collapse)="onCollapse.emit()"
         >
             <ng-template kendoActionSheetTemplate>
@@ -2759,7 +2742,7 @@ class ResponsiveRendererComponent {
                                 [tabIndex]="-1"
                                 aria-hidden="true"
                                 innerCssClass="k-button-icon"
-                                (click)="handleClose()"
+                                (click)="closePopup.emit()"
                             ></button>
                         </div>
                     </div>
@@ -2821,9 +2804,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             #actionSheet
             [animation]="{ duration: animationDuration }"
             [expanded]="isActionSheetExpanded"
-            (overlayClick)="onOverlayClick()"
+            (overlayClick)="closePopup.emit()"
             (keydown)="navigate.emit($event)"
-            (expand)="handleExpand()"
+            (expand)="onExpand.emit()"
             (collapse)="onCollapse.emit()"
         >
             <ng-template kendoActionSheetTemplate>
@@ -2845,7 +2828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 [tabIndex]="-1"
                                 aria-hidden="true"
                                 innerCssClass="k-button-icon"
-                                (click)="handleClose()"
+                                (click)="closePopup.emit()"
                             ></button>
                         </div>
                     </div>
@@ -7912,6 +7895,7 @@ class DropDownListComponent {
         });
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.listBoxId);
+        this.setAriaactivedescendant();
         const popupWrapper = this.popupRef.popupElement;
         const { min, max } = this.width;
         popupWrapper.addEventListener('mousedown', this.popupMouseDownHandler);
@@ -7931,7 +7915,6 @@ class DropDownListComponent {
         this.subs.add(this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
             setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
-            this.setAriaactivedescendant();
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
@@ -8035,7 +8018,7 @@ class DropDownListComponent {
     setAriaactivedescendant() {
         if (this.ariaActivedescendant) {
             this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-activedescendant', this.ariaActivedescendant);
-            const searchInput = this.popupRef?.popupElement.querySelector('input[role="searchbox"]') || this.actionSheetSearchBar?.input.nativeElement;
+            const searchInput = this.popupRef.popupElement.querySelector('input[role="searchbox"]');
             if (searchInput) {
                 this.renderer.setAttribute(searchInput, 'aria-activedescendant', this.ariaActivedescendant);
             }
@@ -8364,8 +8347,6 @@ class DropDownListComponent {
     }
     closeActionSheet() {
         this.actionSheet.toggle(false);
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
-        this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
         if (this.filterable) {
             this.actionSheetSearchBar.value = '';
             this.filterChange.emit('');
@@ -8376,10 +8357,7 @@ class DropDownListComponent {
         this.windowSize = this.adaptiveService.size;
         this.actionSheet.toggle(true);
         this.cdr.detectChanges();
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.listBoxId);
         setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
-        this.setAriaactivedescendant();
         this.title = setActionSheetTitle(this.wrapper, this.title);
         updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
         this.cdr.detectChanges();
@@ -12072,10 +12050,14 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
      * @hidden
      */
     getColumnWidth(index) {
-        if (!this.virtual) {
+        const popupWidthNumber = +(this.popupWidth.max.slice(0, -2));
+        if (this.totalColumnsWidth >= popupWidthNumber) {
             return this.columns.get(index).width;
         }
-        return this.headerColumnWidths[index];
+        if (this.virtual && isPresent(this.headerColumnWidths[index])) {
+            return this.headerColumnWidths[index];
+        }
+        return this.columns.get(index).width;
     }
     verifySettings() {
         if (!isDevMode()) {
@@ -14700,8 +14682,8 @@ class BaseCheckDirective {
     /**
      * @hidden
      * The flag is needed in order to determine how to construct the items map keys.
-     * If `true`, then the key consists of the item's value and level (depth),
-     * else the key consists of the item's value and 0 (no leveling required)
+     * If `true`, then the key consists of the item's value and 0 (no leveling required),
+     * else the key consists of the item's value and level (depth)
      */
     isHeterogeneous;
     addItem(item) {
@@ -14722,11 +14704,7 @@ class BaseCheckDirective {
         const key = this.getKey(item, level);
         const candidate = { ...item, level, key };
         this.checkedItems = this.checkedItems
-            .filter(item => {
-            const valueMatch = valueFrom(item, this.valueField) === valueFrom(candidate, this.valueField);
-            const levelMatch = item.level === candidate.level;
-            return this.isHeterogeneous ? !(valueMatch && levelMatch) : !valueMatch;
-        });
+            .filter(item => valueFrom(item, this.valueField) !== valueFrom(candidate, this.valueField));
         this.checkedKeys.delete(key);
     }
     isItemChecked(item) {
@@ -15812,8 +15790,8 @@ class MultiSelectTreeComponent {
     /**
      * @hidden
      * The flag is needed in order to determine how to construct the items map keys.
-     * If `true`, then the key consists of the item's value and level (depth),
-     * else the key consists of the item's value and 0 (no leveling required)
+     * If `true`, then the key consists of the item's value and 0 (no leveling required),
+     * else the key consists of the item's value and level (depth)
      */
     isHeterogeneous;
     /**
@@ -16160,7 +16138,7 @@ class MultiSelectTreeComponent {
         }
         else {
             // Remove single tag when the child items are pre-fetched
-            const dataItem = this.dataItems.find(item => item.tagPositionIndex === index);
+            const dataItem = this.dataItems[index];
             const itemKey = dataItem.key;
             const lookup = this.lookup.itemLookup(itemKey);
             const pendingCheck = [lookup.item];
@@ -16170,20 +16148,10 @@ class MultiSelectTreeComponent {
                 pendingCheck.push(...this.removeParents(lookup.parent));
             }
             const keysToRemove = pendingCheck.map(item => item.key);
-            // Holds the position indexes of the items to be removed
-            const valueDepthIndices = [];
             this.dataItems = this.dataItems.filter((_item, i) => {
-                const shouldStay = !keysToRemove.includes(_item.key) || this.disabledIndices.has(i);
-                if (!shouldStay) {
-                    // We need to know the index position of the data item to be able to update the valueDepth array accordignly
-                    // as each data item's position is corresponding to the same position in valueDepth
-                    valueDepthIndices.push(i);
-                }
-                return shouldStay;
-            });
-            this.valueDepth = this.valueDepth.filter((_item, i) => {
-                return !valueDepthIndices.includes(i) || this.disabledIndices.has(i);
+                return !keysToRemove.includes(_item.key) || this.disabledIndices.has(i);
             });
+            this.valueDepth = this.dataItems.map(i => i.level);
         }
         this.updateValue(this.dataItems);
         if (!this.isFocused) {
@@ -16592,15 +16560,7 @@ class MultiSelectTreeComponent {
         const source = this.dataItems.map(item => item.dataItem);
         this.tags = this.tagMapper(source);
         this.disabledIndices = this.disabledItemsMapper();
-        // Create a mapping of tags to position indices
-        const tagIndexMap = new Map(this.tags.map((tag, index) => [JSON.stringify(tag), index]));
-        // Modify dataItems by adding a property to hold the item's position as displayed in the tags
-        this.dataItems.forEach(item => {
-            const serializedDataItem = JSON.stringify(item.dataItem);
-            item.tagPositionIndex = tagIndexMap.has(serializedDataItem)
-                ? tagIndexMap.get(serializedDataItem) // Use the index from tags if it exists
-                : null; // Assign a null value if the dataItem is not visible in the tags
-        });
+        this.dataItems.sort((a, b) => this.tags.indexOf(a.dataItem) - this.tags.indexOf(b.dataItem));
     }
     updateValue(value) {
         const newValue = this.valuePrimitive ?
@@ -16692,8 +16652,6 @@ class MultiSelectTreeComponent {
     closeActionSheet() {
         this.wrapper.nativeElement.focus();
         this.actionSheet.toggle(false);
-        this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
         if (this.filterable) {
             this.actionSheetSearchBar.value = '';
             this.filterChange.emit('');
@@ -16705,8 +16663,6 @@ class MultiSelectTreeComponent {
         this.actionSheet.toggle(true);
         this.title = setActionSheetTitle(this.wrapper, this.title);
         this.cdr.detectChanges();
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.treeViewId);
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
         updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
         this.cdr.detectChanges();
         this.opened.emit();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dropdowns",
-  "version": "18.1.0-develop.30",
+  "version": "18.1.0-develop.4",
   "description": "A wide variety of native Angular dropdown components including AutoComplete, ComboBox, DropDownList, DropDownTree, MultiColumnComboBox, MultiSelect, and MultiSelectTree ",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -20,7 +20,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1738962093,
+      "publishDate": 1738318302,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -30,19 +30,19 @@
     "@angular/core": "16 - 19",
     "@angular/forms": "16 - 19",
     "@angular/platform-browser": "16 - 19",
-    "@progress/kendo-licensing": "^1.4.0",
-    "@progress/kendo-angular-common": "18.1.0-develop.30",
-    "@progress/kendo-angular-utils": "18.1.0-develop.30",
-    "@progress/kendo-angular-l10n": "18.1.0-develop.30",
-    "@progress/kendo-angular-navigation": "18.1.0-develop.30",
-    "@progress/kendo-angular-popup": "18.1.0-develop.30",
-    "@progress/kendo-angular-icons": "18.1.0-develop.30",
-    "@progress/kendo-angular-treeview": "18.1.0-develop.30",
+    "@progress/kendo-licensing": "^1.0.2",
+    "@progress/kendo-angular-common": "18.1.0-develop.4",
+    "@progress/kendo-angular-utils": "18.1.0-develop.4",
+    "@progress/kendo-angular-l10n": "18.1.0-develop.4",
+    "@progress/kendo-angular-navigation": "18.1.0-develop.4",
+    "@progress/kendo-angular-popup": "18.1.0-develop.4",
+    "@progress/kendo-angular-icons": "18.1.0-develop.4",
+    "@progress/kendo-angular-treeview": "18.1.0-develop.4",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "18.1.0-develop.30",
+    "@progress/kendo-angular-schematics": "18.1.0-develop.4",
     "@progress/kendo-common": "^1.0.1"
   },
   "schematics": "./schematics/collection.json",

package/schematics/ngAdd/index.js

@@ -4,9 +4,9 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'DropDownsModule', package: 'dropdowns', peerDependencies: {
             // peers of the treeview
-            '@progress/kendo-angular-inputs': '18.1.0-develop.30',
+            '@progress/kendo-angular-inputs': '18.1.0-develop.4',
             // peers of inputs
-            '@progress/kendo-angular-intl': '18.1.0-develop.30',
+            '@progress/kendo-angular-intl': '18.1.0-develop.4',
             '@progress/kendo-drawing': '^1.17.2',
             // Peer dependency of icons
             '@progress/kendo-svg-icons': '^4.0.0'