@progress/kendo-angular-dropdowns 18.0.1-develop.3 → 18.1.0-develop.10

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 0 (no leveling required),
-     * else the key consists of the item's value and level (depth)
+     * 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)
      */
     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 0 (no leveling required),
-     * else the key consists of the item's value and level (depth)
+     * 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)
      */
     isHeterogeneous: boolean;
     /**

package/esm2022/comboboxes/combobox.component.mjs

@@ -835,15 +835,15 @@ export class ComboBoxComponent extends MultiTabStop {
             }
         }))
             .subscribe(this.handleEnter.bind(this)));
-        this.subs.add(merge(this.selectionService.onChange, this.selectionService.onSelect.pipe(filter(_ => !this.isOpen)))
-            .pipe(tap(_ => {
+        this.subs.add(merge(this.selectionService.onChange, this.selectionService.onSelect.pipe(filter(() => !this.isOpen)))
+            .pipe(tap(() => {
             this._filtering = false;
             this.togglePopup(false);
         }), map((event) => this.dataService.itemAt(event.indices[0])))
             .subscribe(dataItem => {
             this.change(dataItem);
         }));
-        this.subs.add(this.selectionService.onSelect.pipe(filter(_ => this.isOpen), tap(_ => this._filtering = false), map((event) => this.dataService.itemAt(event.indices[0])))
+        this.subs.add(this.selectionService.onSelect.pipe(filter(() => this.isOpen), tap(() => this._filtering = false), map((event) => this.dataService.itemAt(event.indices[0])))
             .subscribe(dataItem => {
             const selectionChanged = getter(dataItem, this.valueField) !== getter(this.dataItem, this.valueField);
             this.updateState({ dataItem });

package/esm2022/comboboxes/multicolumncombobox.component.mjs

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

package/esm2022/dropdownlist/dropdownlist.component.mjs

@@ -1003,7 +1003,6 @@ 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);
@@ -1023,6 +1022,7 @@ 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();
@@ -1074,10 +1074,10 @@ export class DropDownListComponent {
             return;
         }
         // Item selection when the popup is open.
-        this.subs.add(this.selectionService.onSelect.pipe(filter(_ => this.isOpen), map(this.itemFromEvent.bind(this)))
+        this.subs.add(this.selectionService.onSelect.pipe(filter(() => this.isOpen), map(this.itemFromEvent.bind(this)))
             .subscribe(this.onSelectionChange.bind(this)));
         // Item selection when the popup is closed | clicked | enter, and so on.
-        this.subs.add(merge(this.selectionService.onSelect.pipe(filter(_ => !this.isOpen)), this.selectionService.onChange).pipe(map(this.itemFromEvent.bind(this)), tap(_ => this.togglePopup(false)))
+        this.subs.add(merge(this.selectionService.onSelect.pipe(filter(() => !this.isOpen)), this.selectionService.onChange).pipe(map(this.itemFromEvent.bind(this)), tap(() => this.togglePopup(false)))
             .subscribe(({ dataItem, value: newValue, newSelection }) => {
             if (newSelection) {
                 this.onSelectionChange({ dataItem });
@@ -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"]');
+            const searchInput = this.popupRef?.popupElement.querySelector('input[role="searchbox"]') || this.actionSheetSearchBar?.input.nativeElement;
             if (searchInput) {
                 this.renderer.setAttribute(searchInput, 'aria-activedescendant', this.ariaActivedescendant);
             }
@@ -1455,6 +1455,8 @@ 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('');
@@ -1465,7 +1467,10 @@ 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 0 (no leveling required),
-     * else the key consists of the item's value and level (depth)
+     * 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)
      */
     isHeterogeneous;
     addItem(item) {
@@ -36,7 +36,11 @@ export class BaseCheckDirective {
         const key = this.getKey(item, level);
         const candidate = { ...item, level, key };
         this.checkedItems = this.checkedItems
-            .filter(item => valueFrom(item, this.valueField) !== valueFrom(candidate, this.valueField));
+            .filter(item => {
+            const valueMatch = valueFrom(item, this.valueField) === valueFrom(candidate, this.valueField);
+            const levelMatch = item.level === candidate.level;
+            return this.isHeterogeneous ? !(valueMatch && levelMatch) : !valueMatch;
+        });
         this.checkedKeys.delete(key);
     }
     isItemChecked(item) {

package/esm2022/dropdowntrees/data-binding/dropdowntree/hierarchy-binding.directive.mjs

@@ -5,30 +5,8 @@
 import { Directive, Input } from '@angular/core';
 import { isChanged } from '@progress/kendo-angular-common';
 import { DataBoundComponent, HierarchyBindingDirective } from '@progress/kendo-angular-treeview';
-import { getter } from '@progress/kendo-common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-treeview";
-const INDEX_SEPARATOR = '_';
-const nodeIndex = (index = '', parentIndex = '') => {
-    return `${parentIndex}${parentIndex ? INDEX_SEPARATOR : ''}${index}`;
-};
-const isArrayWithAtLeastOneItem = v => v && Array.isArray(v) && v.length !== 0;
-const mapToWrappers = (currentLevelNodes, childrenField, parent = null, parentIndex = '') => {
-    if (!isArrayWithAtLeastOneItem(currentLevelNodes)) {
-        return [];
-    }
-    return currentLevelNodes.map((node, idx) => {
-        const index = nodeIndex(idx.toString(), parentIndex);
-        const wrapper = {
-            dataItem: node,
-            index,
-            parent,
-            visible: true
-        };
-        wrapper.children = mapToWrappers(getter(childrenField)(node), childrenField, wrapper, index);
-        return wrapper;
-    });
-};
 /**
  * A directive which encapsulates the retrieval of the child nodes when hierarchical data is provided.
  */

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 0 (no leveling required),
-     * else the key consists of the item's value and level (depth)
+     * 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)
      */
     isHeterogeneous;
     /**
@@ -1116,7 +1116,7 @@ export class MultiSelectTreeComponent {
         }
         else {
             // Remove single tag when the child items are pre-fetched
-            const dataItem = this.dataItems[index];
+            const dataItem = this.dataItems.find(item => item.tagPositionIndex === index);
             const itemKey = dataItem.key;
             const lookup = this.lookup.itemLookup(itemKey);
             const pendingCheck = [lookup.item];
@@ -1126,10 +1126,20 @@ 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) => {
-                return !keysToRemove.includes(_item.key) || this.disabledIndices.has(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);
             });
-            this.valueDepth = this.dataItems.map(i => i.level);
         }
         this.updateValue(this.dataItems);
         if (!this.isFocused) {
@@ -1538,7 +1548,15 @@ export class MultiSelectTreeComponent {
         const source = this.dataItems.map(item => item.dataItem);
         this.tags = this.tagMapper(source);
         this.disabledIndices = this.disabledItemsMapper();
-        this.dataItems.sort((a, b) => this.tags.indexOf(a.dataItem) - this.tags.indexOf(b.dataItem));
+        // 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
+        });
     }
     updateValue(value) {
         const newValue = this.valuePrimitive ?
@@ -1630,6 +1648,8 @@ 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('');
@@ -1641,6 +1661,8 @@ 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/multiselect/multiselect.component.mjs

@@ -1736,7 +1736,6 @@ export class MultiSelectComponent {
         popupWrapper.style.width = max;
         popupWrapper.style.height = this.height;
         popupWrapper.setAttribute("dir", this.direction);
-        const listBox = popupWrapper.querySelector('ul.k-list-ul');
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
             setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1738076590,
-    version: '18.0.1-develop.3',
+    publishDate: 1738357235,
+    version: '18.1.0-develop.10',
     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: 1738076590,
-    version: '18.0.1-develop.3',
+    publishDate: 1738357235,
+    version: '18.1.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -5567,15 +5567,15 @@ class ComboBoxComponent extends MultiTabStop {
             }
         }))
             .subscribe(this.handleEnter.bind(this)));
-        this.subs.add(merge(this.selectionService.onChange, this.selectionService.onSelect.pipe(filter(_ => !this.isOpen)))
-            .pipe(tap(_ => {
+        this.subs.add(merge(this.selectionService.onChange, this.selectionService.onSelect.pipe(filter(() => !this.isOpen)))
+            .pipe(tap(() => {
             this._filtering = false;
             this.togglePopup(false);
         }), map((event) => this.dataService.itemAt(event.indices[0])))
             .subscribe(dataItem => {
             this.change(dataItem);
         }));
-        this.subs.add(this.selectionService.onSelect.pipe(filter(_ => this.isOpen), tap(_ => this._filtering = false), map((event) => this.dataService.itemAt(event.indices[0])))
+        this.subs.add(this.selectionService.onSelect.pipe(filter(() => this.isOpen), tap(() => this._filtering = false), map((event) => this.dataService.itemAt(event.indices[0])))
             .subscribe(dataItem => {
             const selectionChanged = getter(dataItem, this.valueField) !== getter(this.dataItem, this.valueField);
             this.updateState({ dataItem });
@@ -7895,7 +7895,6 @@ 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);
@@ -7915,6 +7914,7 @@ 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();
@@ -7966,10 +7966,10 @@ class DropDownListComponent {
             return;
         }
         // Item selection when the popup is open.
-        this.subs.add(this.selectionService.onSelect.pipe(filter(_ => this.isOpen), map(this.itemFromEvent.bind(this)))
+        this.subs.add(this.selectionService.onSelect.pipe(filter(() => this.isOpen), map(this.itemFromEvent.bind(this)))
             .subscribe(this.onSelectionChange.bind(this)));
         // Item selection when the popup is closed | clicked | enter, and so on.
-        this.subs.add(merge(this.selectionService.onSelect.pipe(filter(_ => !this.isOpen)), this.selectionService.onChange).pipe(map(this.itemFromEvent.bind(this)), tap(_ => this.togglePopup(false)))
+        this.subs.add(merge(this.selectionService.onSelect.pipe(filter(() => !this.isOpen)), this.selectionService.onChange).pipe(map(this.itemFromEvent.bind(this)), tap(() => this.togglePopup(false)))
             .subscribe(({ dataItem, value: newValue, newSelection }) => {
             if (newSelection) {
                 this.onSelectionChange({ dataItem });
@@ -8018,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"]');
+            const searchInput = this.popupRef?.popupElement.querySelector('input[role="searchbox"]') || this.actionSheetSearchBar?.input.nativeElement;
             if (searchInput) {
                 this.renderer.setAttribute(searchInput, 'aria-activedescendant', this.ariaActivedescendant);
             }
@@ -8347,6 +8347,8 @@ 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('');
@@ -8357,7 +8359,10 @@ 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();
@@ -11033,7 +11038,6 @@ class MultiSelectComponent {
         popupWrapper.style.width = max;
         popupWrapper.style.height = this.height;
         popupWrapper.setAttribute("dir", this.direction);
-        const listBox = popupWrapper.querySelector('ul.k-list-ul');
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
             setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
@@ -12051,14 +12055,10 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
      * @hidden
      */
     getColumnWidth(index) {
-        const popupWidthNumber = +(this.popupWidth.max.slice(0, -2));
-        if (this.totalColumnsWidth >= popupWidthNumber) {
+        if (!this.virtual) {
             return this.columns.get(index).width;
         }
-        if (this.virtual && isPresent(this.headerColumnWidths[index])) {
-            return this.headerColumnWidths[index];
-        }
-        return this.columns.get(index).width;
+        return this.headerColumnWidths[index];
     }
     verifySettings() {
         if (!isDevMode()) {
@@ -14601,7 +14601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * @hidden
  */
-const nodeIndex$1 = (item) => (item || {}).key;
+const nodeIndex = (item) => (item || {}).key;
 /**
  * @hidden
  */
@@ -14642,7 +14642,7 @@ class MultiSelectTreeLookupService {
         const currentLookup = {
             children: [],
             item,
-            parent: this.item(nodeIndex$1(parent))
+            parent: this.item(nodeIndex(parent))
         };
         this.map.set(item.key, currentLookup);
     }
@@ -14683,8 +14683,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 0 (no leveling required),
-     * else the key consists of the item's value and level (depth)
+     * 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)
      */
     isHeterogeneous;
     addItem(item) {
@@ -14705,7 +14705,11 @@ class BaseCheckDirective {
         const key = this.getKey(item, level);
         const candidate = { ...item, level, key };
         this.checkedItems = this.checkedItems
-            .filter(item => valueFrom(item, this.valueField) !== valueFrom(candidate, this.valueField));
+            .filter(item => {
+            const valueMatch = valueFrom(item, this.valueField) === valueFrom(candidate, this.valueField);
+            const levelMatch = item.level === candidate.level;
+            return this.isHeterogeneous ? !(valueMatch && levelMatch) : !valueMatch;
+        });
         this.checkedKeys.delete(key);
     }
     isItemChecked(item) {
@@ -15791,8 +15795,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 0 (no leveling required),
-     * else the key consists of the item's value and level (depth)
+     * 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)
      */
     isHeterogeneous;
     /**
@@ -16139,7 +16143,7 @@ class MultiSelectTreeComponent {
         }
         else {
             // Remove single tag when the child items are pre-fetched
-            const dataItem = this.dataItems[index];
+            const dataItem = this.dataItems.find(item => item.tagPositionIndex === index);
             const itemKey = dataItem.key;
             const lookup = this.lookup.itemLookup(itemKey);
             const pendingCheck = [lookup.item];
@@ -16149,10 +16153,20 @@ 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) => {
-                return !keysToRemove.includes(_item.key) || this.disabledIndices.has(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);
             });
-            this.valueDepth = this.dataItems.map(i => i.level);
         }
         this.updateValue(this.dataItems);
         if (!this.isFocused) {
@@ -16561,7 +16575,15 @@ class MultiSelectTreeComponent {
         const source = this.dataItems.map(item => item.dataItem);
         this.tags = this.tagMapper(source);
         this.disabledIndices = this.disabledItemsMapper();
-        this.dataItems.sort((a, b) => this.tags.indexOf(a.dataItem) - this.tags.indexOf(b.dataItem));
+        // 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
+        });
     }
     updateValue(value) {
         const newValue = this.valuePrimitive ?
@@ -16629,7 +16651,7 @@ class MultiSelectTreeComponent {
         if (!isPresent(data) || data.length === 0) {
             return;
         }
-        const parentIndex = nodeIndex$1(parentItem);
+        const parentIndex = nodeIndex(parentItem);
         const treeItems = data.map((node) => buildTreeItem(node, this.valueField, levelIndex));
         if (isPresent(parentItem)) {
             this.lookup.registerChildren(parentIndex, treeItems);
@@ -16653,6 +16675,8 @@ 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('');
@@ -16664,6 +16688,8 @@ 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();
@@ -17408,27 +17434,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['valueField']
             }] } });
 
-const INDEX_SEPARATOR = '_';
-const nodeIndex = (index = '', parentIndex = '') => {
-    return `${parentIndex}${parentIndex ? INDEX_SEPARATOR : ''}${index}`;
-};
-const isArrayWithAtLeastOneItem = v => v && Array.isArray(v) && v.length !== 0;
-const mapToWrappers = (currentLevelNodes, childrenField, parent = null, parentIndex = '') => {
-    if (!isArrayWithAtLeastOneItem(currentLevelNodes)) {
-        return [];
-    }
-    return currentLevelNodes.map((node, idx) => {
-        const index = nodeIndex(idx.toString(), parentIndex);
-        const wrapper = {
-            dataItem: node,
-            index,
-            parent,
-            visible: true
-        };
-        wrapper.children = mapToWrappers(getter$1(childrenField)(node), childrenField, wrapper, index);
-        return wrapper;
-    });
-};
 /**
  * A directive which encapsulates the retrieval of the child nodes when hierarchical data is provided.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dropdowns",
-  "version": "18.0.1-develop.3",
+  "version": "18.1.0-develop.10",
   "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": 1738076590,
+      "publishDate": 1738357235,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -31,18 +31,18 @@
     "@angular/forms": "16 - 19",
     "@angular/platform-browser": "16 - 19",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "18.0.1-develop.3",
-    "@progress/kendo-angular-utils": "18.0.1-develop.3",
-    "@progress/kendo-angular-l10n": "18.0.1-develop.3",
-    "@progress/kendo-angular-navigation": "18.0.1-develop.3",
-    "@progress/kendo-angular-popup": "18.0.1-develop.3",
-    "@progress/kendo-angular-icons": "18.0.1-develop.3",
-    "@progress/kendo-angular-treeview": "18.0.1-develop.3",
+    "@progress/kendo-angular-common": "18.1.0-develop.10",
+    "@progress/kendo-angular-utils": "18.1.0-develop.10",
+    "@progress/kendo-angular-l10n": "18.1.0-develop.10",
+    "@progress/kendo-angular-navigation": "18.1.0-develop.10",
+    "@progress/kendo-angular-popup": "18.1.0-develop.10",
+    "@progress/kendo-angular-icons": "18.1.0-develop.10",
+    "@progress/kendo-angular-treeview": "18.1.0-develop.10",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "18.0.1-develop.3",
+    "@progress/kendo-angular-schematics": "18.1.0-develop.10",
     "@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.0.1-develop.3',
+            '@progress/kendo-angular-inputs': '18.1.0-develop.10',
             // peers of inputs
-            '@progress/kendo-angular-intl': '18.0.1-develop.3',
+            '@progress/kendo-angular-intl': '18.1.0-develop.10',
             '@progress/kendo-drawing': '^1.17.2',
             // Peer dependency of icons
             '@progress/kendo-svg-icons': '^4.0.0'