@progress/kendo-react-dropdowns 5.17.0-dev.202308081122 → 5.17.0-dev.202308091121

package/dist/npm/DropDownList/DropDownList.js

@@ -66,6 +66,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         _this._skipFocusEvent = false;
         _this._filterInput = null;
         _this._navigated = false;
+        _this._lastKeypressIsFilter = false;
         _this._inputId = (0, kendo_react_common_1.guid)();
         _this.itemHeight = 0;
         /**
@@ -141,7 +142,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var popupSettings = _this.base.getPopupSettings();
             var translate = "translateY(".concat(vs.translate, "px)");
-            return (React.createElement(List_1.default, { id: _this.base.listBoxId, show: opened, data: data.slice(), focusedIndex: _this.focusedIndex(), value: _this.value, textField: textField, valueField: dataItemKey, optionsGuid: _this.base.guid, groupField: _this.props.groupField, groupMode: 'modern', listRef: function (list) { return vs.list = _this.base.list = list; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: "k-list-content", listStyle: vs.enabled ? { transform: translate } : undefined, key: "listkey", skip: skip, onClick: _this.handleItemClick, itemRender: itemRender, groupHeaderItemRender: groupHeaderItemRender, noDataRender: listNoDataRender, onScroll: _this.onScroll, wrapperRef: vs.scrollerRef, scroller: _this.base.renderScrollElement() }));
+            return (React.createElement(List_1.default, { id: _this.base.listBoxId, show: opened, data: data.slice(), focusedIndex: _this.getFocusedIndex(), value: _this.value, textField: textField, valueField: dataItemKey, optionsGuid: _this.base.guid, groupField: _this.props.groupField, groupMode: 'modern', listRef: function (list) { return vs.list = _this.base.list = list; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: "k-list-content", listStyle: vs.enabled ? { transform: translate } : undefined, key: "listkey", skip: skip, onClick: _this.handleItemClick, itemRender: itemRender, groupHeaderItemRender: groupHeaderItemRender, noDataRender: listNoDataRender, onScroll: _this.onScroll, wrapperRef: vs.scrollerRef, scroller: _this.base.renderScrollElement() }));
         };
         _this.onScroll = function (event) {
             var _a = _this.base, vs = _a.vs, list = _a.list;
@@ -226,7 +227,9 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             }
         };
         _this.handleKeyDown = function (event) {
-            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, filterable = _a.filterable, disabled = _a.disabled, _c = _a.leftRightKeysNavigation, leftRightKeysNavigation = _c === void 0 ? true : _c, _d = _a.virtual, virtual = _d === void 0 ? { skip: 0, total: 0, pageSize: 0 } : _d;
+            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, filterable = _a.filterable, disabled = _a.disabled, defaultItem = _a.defaultItem, _c = _a.leftRightKeysNavigation, leftRightKeysNavigation = _c === void 0 ? true : _c, _d = _a.virtual, virtual = _d === void 0 ? { skip: 0, total: 0, pageSize: 0 } : _d, dataItemKey = _a.dataItemKey, _e = _a.groupField, groupField = _e === void 0 ? '' : _e, textField = _a.textField;
+            var value = _this.value;
+            var selectedIndex = data.findIndex(function (i) { return (0, utils_1.areSame)(i, value, dataItemKey); });
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var keyCode = event.keyCode;
             var homeOrEndKeys = keyCode === kendo_react_common_1.Keys.home || keyCode === kendo_react_common_1.Keys.end;
@@ -235,7 +238,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 ((event.altKey && keyCode === kendo_react_common_1.Keys.down) || keyCode === kendo_react_common_1.Keys.enter || keyCode === kendo_react_common_1.Keys.space);
             var shouldClose = opened && ((event.altKey && keyCode === kendo_react_common_1.Keys.up) || keyCode === kendo_react_common_1.Keys.esc);
             var leftOrRightKeys = leftRightKeysNavigation && (keyCode === kendo_react_common_1.Keys.left || keyCode === kendo_react_common_1.Keys.right);
-            var shouldNavigate = upOrDownKeys || (!filterable && (leftOrRightKeys || homeOrEndKeys));
+            var shouldNavigate = upOrDownKeys || (leftOrRightKeys && !filterable) || homeOrEndKeys;
             var state = _this.base.initState();
             state.syntheticEvent = event;
             if (disabled) {
@@ -262,19 +265,101 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 }
             }
             else if (opened && keyCode === kendo_react_common_1.Keys.enter) {
-                var focusedIndex = _this.focusedIndex();
-                if (focusedIndex !== undefined) {
+                var focusedIndex = _this.getFocusedIndex();
+                if (focusedIndex !== undefined && focusedIndex !== -1 && data[focusedIndex].disabled) {
+                    _this.triggerOnChange(null, state);
+                    _this.applyState(state);
+                }
+                else {
                     _this.handleItemSelect(focusedIndex, state);
                 }
                 _this.base.togglePopup(state);
                 event.preventDefault();
             }
             else if (shouldOpen || shouldClose) {
+                if (shouldClose) {
+                    _this.resetValueIfDisabledItem();
+                }
                 _this.base.togglePopup(state);
                 event.preventDefault();
             }
             else if (shouldNavigate) {
-                _this.onNavigate(state, keyCode);
+                _this._lastKeypressIsFilter = false;
+                if (groupField !== '' && textField) {
+                    if (!_this.props.skipDisabledItems && opened) {
+                        _this.onNavigate(state, keyCode);
+                    }
+                    else {
+                        var newIndex = undefined;
+                        if (keyCode === kendo_react_common_1.Keys.down || keyCode === kendo_react_common_1.Keys.right) {
+                            var tempnewIndex_1 = data.slice(selectedIndex + 1).find(function (i) { return !i.disabled && i[textField]; });
+                            newIndex = tempnewIndex_1 && data.findIndex(function (el) { return el[textField] === tempnewIndex_1[textField]; });
+                        }
+                        else if (keyCode === kendo_react_common_1.Keys.up || keyCode === kendo_react_common_1.Keys.left) {
+                            var dataToSearch = void 0;
+                            if (selectedIndex === 0 && defaultItem) {
+                                newIndex = -1;
+                            }
+                            else if (selectedIndex === -1) {
+                                dataToSearch = data;
+                                newIndex = data.findIndex(function (i) { return !i.disabled && i[textField]; });
+                            }
+                            else {
+                                dataToSearch = data.slice(0, selectedIndex);
+                                var tempnewIndex_2 = dataToSearch.pop();
+                                while (tempnewIndex_2 && tempnewIndex_2.disabled) {
+                                    tempnewIndex_2 = dataToSearch.pop();
+                                }
+                                newIndex = tempnewIndex_2 && data.findIndex(function (el) { return el[textField] === tempnewIndex_2[textField]; });
+                            }
+                        }
+                        if (newIndex !== undefined) {
+                            var skipItems = newIndex - selectedIndex;
+                            _this.onNavigate(state, keyCode, skipItems);
+                        }
+                        else if (newIndex === undefined && data.findIndex(function (el) { return el[textField] === value[textField]; }) === data.length - 1) {
+                            _this.onNavigate(state, keyCode);
+                        }
+                    }
+                }
+                else if (!_this.props.skipDisabledItems && opened || homeOrEndKeys) {
+                    _this.onNavigate(state, keyCode);
+                }
+                else if (textField) {
+                    var newIndex = undefined;
+                    if (keyCode === kendo_react_common_1.Keys.down || keyCode === kendo_react_common_1.Keys.right) {
+                        var tempnewIndex_3 = data.slice(selectedIndex + 1).find(function (i) { return !i.disabled && i[textField]; });
+                        newIndex = tempnewIndex_3 && data.findIndex(function (el) { return el[textField] === tempnewIndex_3[textField]; });
+                    }
+                    else if (keyCode === kendo_react_common_1.Keys.up || keyCode === kendo_react_common_1.Keys.left) {
+                        var dataTest = void 0;
+                        if (selectedIndex === 0 && defaultItem) {
+                            newIndex = -1;
+                        }
+                        else if (selectedIndex === -1) {
+                            dataTest = data;
+                            newIndex = data.find(function (i) { return !i.disabled && i[textField]; });
+                        }
+                        else {
+                            dataTest = data.slice(0, selectedIndex);
+                            var tempnewIndex_4 = dataTest.pop();
+                            while (tempnewIndex_4 && tempnewIndex_4.disabled) {
+                                tempnewIndex_4 = dataTest.pop();
+                            }
+                            newIndex = tempnewIndex_4 && data.findIndex(function (el) { return el[textField] === tempnewIndex_4[textField]; });
+                        }
+                    }
+                    if (newIndex !== undefined) {
+                        var skipItems = newIndex - selectedIndex;
+                        _this.onNavigate(state, keyCode, skipItems);
+                    }
+                    else if (newIndex === undefined && data.findIndex(function (el) { return el[textField] === value[textField]; }) === data.length - 1) {
+                        _this.onNavigate(state, keyCode);
+                    }
+                }
+                else {
+                    _this.onNavigate(state, keyCode);
+                }
                 event.preventDefault();
             }
             _this.applyState(state);
@@ -301,6 +386,9 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             state.syntheticEvent = event;
             state.data.focused = false;
             state.events.push({ type: 'onBlur' });
+            if (opened) {
+                _this.resetValueIfDisabledItem();
+            }
             if (opened && !renderAdaptive) {
                 _this.base.togglePopup(state);
             }
@@ -322,6 +410,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             if (!_this.state.focused) {
                 state.data.focused = true;
             }
+            _this.resetValueIfDisabledItem();
             _this.base.togglePopup(state);
             _this.applyState(state);
         };
@@ -349,6 +438,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 state.data.text = event.target.value;
             }
             _this.base.filterChanged(event.target.value, state);
+            _this._lastKeypressIsFilter = true;
             _this.applyState(state);
             _this.setState({ group: undefined });
         };
@@ -497,7 +587,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
      */
     DropDownListWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _a;
-        var _b = this.props, dataItemKey = _b.dataItemKey, virtual = _b.virtual, _c = _b.groupField, groupField = _c === void 0 ? '' : _c;
+        var _b = this.props, dataItemKey = _b.dataItemKey, virtual = _b.virtual, _c = _b.groupField, groupField = _c === void 0 ? '' : _c, textField = _b.textField;
         var _d = this.props.data, data = _d === void 0 ? [] : _d;
         var prevTotal = prevProps.virtual ? prevProps.virtual.total : 0;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
@@ -520,8 +610,8 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             var selectedItem_1 = this.value;
             var prevSelectedItem = prevProps.value !== undefined ? prevProps.value : prevState.value;
             var selectedItemIndex = data.findIndex(function (i) { return (0, utils_1.areSame)(i, selectedItem_1, dataItemKey); });
-            if (groupField !== '') {
-                selectedItemIndex = (_a = this.base.getGroupedDataModernMode(data, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(selectedItem_1);
+            if (groupField !== '' && selectedItem_1 && textField) {
+                selectedItemIndex = (_a = this.base.getGroupedDataModernMode(data, groupField)) === null || _a === void 0 ? void 0 : _a.map(function (el) { return el[textField]; }).indexOf(selectedItem_1[textField]);
             }
             var selectedItemChanged = !(0, utils_1.areSame)(prevSelectedItem, selectedItem_1, dataItemKey);
             if (opening && virtual) {
@@ -627,7 +717,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DropDownListWithoutContext.prototype.onNavigate = function (state, keyCode) {
+    DropDownListWithoutContext.prototype.onNavigate = function (state, keyCode, skipItems) {
         var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, defaultItem = _a.defaultItem, dataItemKey = _a.dataItemKey, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0, total: 0, pageSize: 0 } : _c;
         var vs = this.base.vs;
         var value = this.value;
@@ -636,7 +726,8 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             current: virtual.skip + index,
             max: (vs.enabled ? virtual.total : data.length) - 1,
             min: defaultItem !== undefined ? -1 : 0,
-            keyCode: keyCode
+            keyCode: keyCode,
+            skipItems: skipItems ? skipItems : undefined
         });
         if (newIndex !== undefined) {
             this.handleItemSelect(newIndex, state);
@@ -681,18 +772,24 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                         this.renderList()),
                     footer && React.createElement("div", { className: "k-list-footer" }, footer)))));
     };
-    DropDownListWithoutContext.prototype.focusedIndex = function () {
-        var filterText = (0, utils_1.isPresent)(this.props.filter) ? this.props.filter : this.state.text;
-        var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c, dataItemKey = _a.dataItemKey, textField = _a.textField, focusedItemIndex = _a.focusedItemIndex;
+    DropDownListWithoutContext.prototype.getFocusedIndex = function () {
         var value = this.value;
-        var selectedIndex = data.findIndex(function (i) { return (0, utils_1.areSame)(i, value, dataItemKey); });
-        var hasSelected = !(selectedIndex < 0 && !this.props.defaultItem);
-        if (!hasSelected && filterText && virtual.skip === 0) {
-            return focusedItemIndex ? focusedItemIndex(data, filterText, textField) :
-                data.indexOf((0, utils_1.getFocusedItem)(data, filterText, textField));
+        var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, dataItemKey = _a.dataItemKey, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c, _d = _a.focusedItemIndex, focusedItemIndex = _d === void 0 ? utils_1.itemIndexStartsWith : _d, filterable = _a.filterable, _e = _a.skipDisabledItems, skipDisabledItems = _e === void 0 ? true : _e;
+        var text = this.props.filter ? this.props.filter : this.state.text;
+        if (skipDisabledItems && textField && !text && !value) {
+            return data.findIndex(function (i) { return !i.disabled && i[textField]; });
+        }
+        else if ((0, utils_1.isPresent)(value) && text === undefined || filterable && text === '') {
+            return data.findIndex(function (i) { return (0, utils_1.areSame)(i, value, dataItemKey); });
+        }
+        else if (text) {
+            if (this._lastKeypressIsFilter) {
+                return focusedItemIndex(data, text, textField);
+            }
+            return data.findIndex(function (i) { return (0, utils_1.areSame)(i, value, dataItemKey); });
         }
         else {
-            return !hasSelected && virtual.skip === 0 ? 0 : undefined;
+            return virtual.skip === 0 ? 0 : -1;
         }
     };
     DropDownListWithoutContext.prototype.focusElement = function (element) {
@@ -723,11 +820,20 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         ;
     };
     ;
+    DropDownListWithoutContext.prototype.resetValueIfDisabledItem = function () {
+        var data = this.props.data;
+        var state = this.base.initState();
+        var focusedIndex = this.getFocusedIndex();
+        if (focusedIndex !== undefined && focusedIndex !== -1 && data && data[focusedIndex].disabled) {
+            this.triggerOnChange(null, state);
+            this.applyState(state);
+        }
+    };
     DropDownListWithoutContext.displayName = 'DropDownList';
     /**
      * @hidden
      */
-    DropDownListWithoutContext.propTypes = __assign({ delay: PropTypes.number, ignoreCase: PropTypes.bool, iconClassName: PropTypes.string, svgIcon: kendo_react_common_1.svgIconPropType, defaultItem: PropTypes.any, valueRender: PropTypes.func, valueMap: PropTypes.func, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, ariaLabel: PropTypes.string, leftRightKeysNavigation: PropTypes.bool, title: PropTypes.string, groupField: PropTypes.string, list: PropTypes.any }, DropDownBase_1.default.propTypes);
+    DropDownListWithoutContext.propTypes = __assign({ delay: PropTypes.number, ignoreCase: PropTypes.bool, iconClassName: PropTypes.string, svgIcon: kendo_react_common_1.svgIconPropType, defaultItem: PropTypes.any, valueRender: PropTypes.func, valueMap: PropTypes.func, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, ariaLabel: PropTypes.string, leftRightKeysNavigation: PropTypes.bool, title: PropTypes.string, groupField: PropTypes.string, list: PropTypes.any, skipDisabledItems: PropTypes.bool }, DropDownBase_1.default.propTypes);
     /**
      * @hidden
      */

package/dist/npm/DropDownList/DropDownListProps.d.ts

@@ -319,4 +319,8 @@ export interface DropDownListProps extends FormComponentProps {
      * @hidden
      */
     groupMode?: string;
+    /**
+     * Defines if DropDownList's disabled items will be skipped or focused when navigating through the list of items using a keyboard. Defaults to `true`.
+     */
+    skipDisabledItems?: boolean;
 }

package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.js

@@ -118,7 +118,8 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
                 'k-table-alt-row': liProps.index % 2 !== 0,
                 'k-focus': liProps.focused,
                 'k-selected': liProps.selected,
-                'k-first': Boolean(group)
+                'k-first': Boolean(group),
+                'k-disabled': liProps.dataItem.disabled
             }) }), children);
         return props.itemRender ? props.itemRender.call(undefined, rendering, liProps) : rendering;
     }, [columns, props.groupField, props.itemRender, props.data, skip]);

package/dist/npm/MultiSelect/MultiSelect.d.ts

@@ -42,6 +42,7 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
         adaptive: PropTypes.Requireable<boolean>;
         adaptiveTitle: PropTypes.Requireable<string>;
         onCancel: PropTypes.Requireable<(...args: any[]) => any>;
+        skipDisabledItems: PropTypes.Requireable<boolean>;
         filterable: PropTypes.Requireable<boolean>;
         filter: PropTypes.Requireable<string>;
         virtual: PropTypes.Requireable<PropTypes.InferProps<{
@@ -91,6 +92,7 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
         rounded: "small" | "medium" | "full" | "large" | null | undefined;
         fillMode: "flat" | "outline" | "solid" | null | undefined;
         groupMode: string | undefined;
+        skipDisabledItems: boolean;
         popupSettings: {
             height: string;
         };
@@ -150,7 +152,7 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
     /** @hidden */
     onTagDelete: (itemsToRemove: Array<any>, event: React.MouseEvent<HTMLSpanElement>) => void;
     /** @hidden */
-    onNavigate(state: MultiSelectInternalState, keyCode: number): void;
+    onNavigate(state: MultiSelectInternalState, keyCode: number, skipItems?: number): void;
     /** @hidden */
     itemFocus: (index: number, state: MultiSelectInternalState) => void;
     /** @hidden */

package/dist/npm/MultiSelect/MultiSelect.js

@@ -212,9 +212,11 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             _this.applyState(state);
         };
         _this.onInputKeyDown = function (event) {
+            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, groupField = _a.groupField;
             var keyCode = event.keyCode;
             var text = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
-            var focusedItem = _this.getFocusedState().focusedItem;
+            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
+            var _c = _this.getFocusedState(), focusedItem = _c.focusedItem, focusedIndex = _c.focusedIndex;
             var state = _this.base.initState();
             state.syntheticEvent = event;
             if (!text && _this.value.length > 0 &&
@@ -233,14 +235,74 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                     togglePopup();
                 }
                 else if (keyCode === kendo_react_common_1.Keys.up || keyCode === kendo_react_common_1.Keys.down) {
+                    if (groupField !== '' && textField) {
+                        if (!_this.props.skipDisabledItems && opened) {
+                            _this.onNavigate(state, keyCode);
+                        }
+                        else {
+                            var newIndex = 0;
+                            if (keyCode === kendo_react_common_1.Keys.down || keyCode === kendo_react_common_1.Keys.right) {
+                                var tempnewIndex_1 = data.slice(focusedIndex + 1).find(function (i) { return !i.disabled && i[textField]; });
+                                newIndex = tempnewIndex_1 && data.findIndex(function (el) { return el[textField] === tempnewIndex_1[textField]; });
+                            }
+                            else if (keyCode === kendo_react_common_1.Keys.up || keyCode === kendo_react_common_1.Keys.left) {
+                                var dataToSearch = void 0;
+                                if (focusedIndex === -1) {
+                                    dataToSearch = data;
+                                    newIndex = data.findIndex(function (i) { return !i.disabled && i[textField]; });
+                                }
+                                else {
+                                    dataToSearch = data.slice(0, focusedIndex);
+                                    var tempnewIndex_2 = dataToSearch.pop();
+                                    while (tempnewIndex_2 && tempnewIndex_2.disabled) {
+                                        tempnewIndex_2 = dataToSearch.pop();
+                                    }
+                                    newIndex = tempnewIndex_2 && data.findIndex(function (el) { return el[textField] === tempnewIndex_2[textField]; });
+                                }
+                            }
+                            if (newIndex) {
+                                var skipItems = newIndex - focusedIndex;
+                                _this.onNavigate(state, keyCode, skipItems);
+                            }
+                            else if (newIndex !== undefined) {
+                                _this.onNavigate(state, keyCode);
+                            }
+                        }
+                    }
+                    else if (!_this.props.skipDisabledItems && opened) {
+                        _this.onNavigate(state, keyCode);
+                    }
+                    else {
+                        var newIndex = null;
+                        if (keyCode === kendo_react_common_1.Keys.down || keyCode === kendo_react_common_1.Keys.right) {
+                            newIndex = data.slice(focusedIndex + 1).find(function (i) { return !i.disabled; });
+                        }
+                        else if (keyCode === kendo_react_common_1.Keys.up || keyCode === kendo_react_common_1.Keys.left) {
+                            var dataTest = data.slice(0, focusedIndex);
+                            newIndex = dataTest.pop();
+                            while (newIndex && newIndex.disabled) {
+                                newIndex = dataTest.pop();
+                            }
+                        }
+                        if (newIndex) {
+                            var skipItems = newIndex.id - focusedIndex - 1;
+                            _this.onNavigate(state, keyCode, skipItems);
+                        }
+                        else {
+                            _this.onNavigate(state, keyCode);
+                        }
+                    }
+                    _this.applyState(state);
                     event.preventDefault();
-                    _this.onNavigate(state, keyCode);
                 }
                 else if (keyCode === kendo_react_common_1.Keys.enter) {
                     event.preventDefault();
                     if (_this.props.allowCustom && text && focusedItem === null) {
                         _this.customItemSelect(event);
                     }
+                    else if (focusedItem.disabled) {
+                        togglePopup();
+                    }
                     else {
                         _this.selectFocusedItem(event);
                     }
@@ -685,7 +747,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         }
     };
     /** @hidden */
-    MultiSelectWithoutContext.prototype.onNavigate = function (state, keyCode) {
+    MultiSelectWithoutContext.prototype.onNavigate = function (state, keyCode, skipItems) {
         var _a = this.props, allowCustom = _a.allowCustom, _b = _a.data, data = _b === void 0 ? [] : _b;
         var text = this.props.filter !== undefined ? this.props.filter : this.state.text;
         var _c = this.getFocusedState(), focusedType = _c.focusedType, focusedIndex = _c.focusedIndex;
@@ -703,7 +765,8 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 keyCode: keyCode,
                 current: focusedIndex,
                 max: (vs.enabled ? vs.total : data.length) - 1,
-                min: customItem ? -1 : 0
+                min: customItem ? -1 : 0,
+                skipItems: skipItems ? skipItems : undefined
             });
             if (newFocused !== undefined) {
                 this.itemFocus(newFocused, state);
@@ -830,9 +893,9 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         this.setItems(items, this._valueItemsDuringOnChange);
         state.events.push({ type: 'onChange' });
     };
-    MultiSelectWithoutContext.prototype.selectFocusedItem = function (event) {
+    MultiSelectWithoutContext.prototype.selectFocusedItem = function (event, itemtoSelect) {
         var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, virtual = _a.virtual;
-        var focusedIndex = this.getFocusedState().focusedIndex;
+        var focusedIndex = (itemtoSelect || this.getFocusedState()).focusedIndex;
         var skip = virtual ? virtual.skip : 0;
         if (data[focusedIndex - skip] !== undefined) {
             this.handleItemClick(focusedIndex, event);
@@ -845,7 +908,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
     MultiSelectWithoutContext.prototype.getFocusedState = function () {
         var focusedIndex = this.state.focusedIndex;
         var text = this.props.filter !== undefined ? this.props.filter : this.state.text;
-        var _a = this.props, allowCustom = _a.allowCustom, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey, virtual = _a.virtual, textField = _a.textField, _c = _a.focusedItemIndex, focusedItemIndex = _c === void 0 ? utils_1.itemIndexStartsWith : _c;
+        var _a = this.props, allowCustom = _a.allowCustom, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey, virtual = _a.virtual, textField = _a.textField, _c = _a.focusedItemIndex, focusedItemIndex = _c === void 0 ? utils_1.itemIndexStartsWith : _c, skipDisabledItems = _a.skipDisabledItems;
         var skip = (virtual && virtual.skip) || 0;
         var focusedInd;
         if (focusedIndex !== undefined) {
@@ -879,6 +942,14 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             }
             return { focusedType: FocusedItemType.None, focusedIndex: -1 };
         }
+        else if (skipDisabledItems && textField && !text && skip === 0) {
+            var newIndex = data.findIndex(function (i) { return !i.disabled && i[textField]; });
+            return {
+                focusedIndex: newIndex,
+                focusedItem: data[newIndex - skip],
+                focusedType: FocusedItemType.ListItem
+            };
+        }
         return skip === 0 ?
             { focusedItem: data[0], focusedIndex: 0, focusedType: FocusedItemType.ListItem } :
             { focusedType: FocusedItemType.None, focusedIndex: -1 };
@@ -906,9 +977,9 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
     MultiSelectWithoutContext.propTypes = __assign(__assign({}, DropDownBase_1.default.propTypes), { autoClose: PropTypes.bool, value: PropTypes.arrayOf(PropTypes.any), defaultValue: PropTypes.arrayOf(PropTypes.any), dataItemKey: PropTypes.string, placeholder: PropTypes.string, tags: PropTypes.arrayOf(PropTypes.shape({
             text: PropTypes.string,
             data: PropTypes.arrayOf(PropTypes.any)
-        })), tagRender: PropTypes.func, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, groupField: PropTypes.string, list: PropTypes.any, adaptive: PropTypes.bool, adaptiveTitle: PropTypes.string, onCancel: PropTypes.func });
+        })), tagRender: PropTypes.func, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, groupField: PropTypes.string, list: PropTypes.any, adaptive: PropTypes.bool, adaptiveTitle: PropTypes.string, onCancel: PropTypes.func, skipDisabledItems: PropTypes.bool });
     /** @hidden */
-    MultiSelectWithoutContext.defaultProps = __assign(__assign({}, DropDownBase_1.default.defaultProps), { autoClose: true, required: false, size: 'medium', rounded: 'medium', fillMode: 'solid', groupMode: 'modern' });
+    MultiSelectWithoutContext.defaultProps = __assign(__assign({}, DropDownBase_1.default.defaultProps), { autoClose: true, required: false, size: 'medium', rounded: 'medium', fillMode: 'solid', groupMode: 'modern', skipDisabledItems: true });
     return MultiSelectWithoutContext;
 }(React.Component));
 exports.MultiSelectWithoutContext = MultiSelectWithoutContext;

package/dist/npm/MultiSelect/MultiSelectProps.d.ts

@@ -307,4 +307,8 @@ export interface MultiSelectProps extends FormComponentProps {
      * Specifies the text that is rendered as title in the adaptive popup.
      */
     adaptiveTitle?: string;
+    /**
+     * Defines if MultiSelect's disabled items will be skipped or focused when navigating through the list of items using a keyboard. Defaults to `true`.
+     */
+    skipDisabledItems?: boolean;
 }

package/dist/npm/common/List.js

@@ -37,7 +37,7 @@ var List = /** @class */ (function (_super) {
         return data.map(function (item, index) {
             var realIndex = skip + index;
             var idIndex = skip + index + groupCounter;
-            var selected = highlightSelected &&
+            var selected = item.disabled ? false : highlightSelected &&
                 ((!isArray && (0, utils_1.areSame)(item, value, valueField)) ||
                     (isArray && value.findIndex(function (i) { return (0, utils_1.areSame)(i, item, valueField); }) !== -1));
             var group = undefined;
@@ -52,7 +52,7 @@ var List = /** @class */ (function (_super) {
             group !== undefined && groupMode === 'modern' ? groupCounter += 1 : '';
             return [
                 group !== undefined && groupMode === 'modern' && React.createElement(ListGroupItem_1.default, { id: "option-".concat(optionsGuid, "-").concat(idIndex), virtual: virtual, key: realIndex + '-group-item', group: group, isMultiColumn: isMultiColumn, render: groupHeaderItemRender }),
-                React.createElement(ListItem_1.default, { id: "option-".concat(optionsGuid, "-").concat(group !== undefined && groupMode === 'modern' ? idIndex + 1 : idIndex), virtual: virtual, dataItem: item, groupMode: groupMode, selected: selected, focused: focusedIndex === index, index: realIndex, key: realIndex, onClick: _this.props.onClick, textField: textField, group: group, render: itemRender })
+                React.createElement(ListItem_1.default, { id: "option-".concat(optionsGuid, "-").concat(group !== undefined && groupMode === 'modern' ? idIndex + 1 : idIndex), virtual: virtual, dataItem: item, groupMode: groupMode, selected: selected, focused: focusedIndex === index, index: realIndex, key: realIndex, onClick: _this.props.onClick, textField: textField, group: group, render: itemRender, disabled: item.disabled })
             ];
         });
     };

package/dist/npm/common/ListItem.d.ts

@@ -35,6 +35,10 @@ export interface ListItemProps {
      * Indicates the selected state of the list item element.
      */
     selected: boolean;
+    /**
+     * Indicates the disabled/enabled state of the list item element.
+     */
+    disabled?: boolean;
     /**
      * @hidden
      */

package/dist/npm/common/ListItem.js

@@ -30,11 +30,12 @@ var ListItem = /** @class */ (function (_super) {
         return _this;
     }
     ListItem.prototype.render = function () {
-        var _a = this.props, selected = _a.selected, group = _a.group, dataItem = _a.dataItem, virtual = _a.virtual, groupMode = _a.groupMode, renderer = _a.render;
-        var item = (React.createElement("li", { id: this.props.id, role: "option", "aria-selected": selected, className: (0, kendo_react_common_1.classNames)('k-list-item', {
+        var _a = this.props, selected = _a.selected, group = _a.group, dataItem = _a.dataItem, virtual = _a.virtual, groupMode = _a.groupMode, disabled = _a.disabled, renderer = _a.render;
+        var item = (React.createElement("li", { id: this.props.id, role: "option", "aria-selected": selected, "aria-disabled": disabled ? true : undefined, className: (0, kendo_react_common_1.classNames)('k-list-item', {
                 'k-selected': selected,
                 'k-focus': this.props.focused,
-                'k-first': Boolean(group) && groupMode === 'classic'
+                'k-first': Boolean(group) && groupMode === 'classic',
+                'k-disabled': disabled
             }), onClick: this.handleClick, style: { position: virtual ? 'relative' : 'unset' } },
             React.createElement("span", { className: 'k-list-item-text' }, (0, utils_1.getItemValue)(dataItem, this.props.textField).toString()),
             group !== undefined && groupMode === 'classic' ? React.createElement("div", { className: "k-list-item-group-label" }, group) : null));

package/dist/npm/common/Navigation.d.ts

@@ -7,6 +7,7 @@ export declare class Navigation {
         current: number;
         max: number;
         min: number;
+        skipItems?: number;
     }): number | undefined;
     private next;
 }

package/dist/npm/common/Navigation.js

@@ -12,10 +12,10 @@ var Navigation = /** @class */ (function () {
     Navigation.prototype.navigate = function (args) {
         var keyCode = args.keyCode;
         if (keyCode === kendo_react_common_1.Keys.up || keyCode === kendo_react_common_1.Keys.left) {
-            return this.next({ current: args.current, min: args.min, max: args.max, step: -1 });
+            return this.next({ current: args.current, min: args.min, max: args.max, step: args.skipItems ? args.skipItems : -1 });
         }
         else if (keyCode === kendo_react_common_1.Keys.down || keyCode === kendo_react_common_1.Keys.right) {
-            return this.next({ current: args.current, min: args.min, max: args.max, step: 1 });
+            return this.next({ current: args.current, min: args.min, max: args.max, step: args.skipItems ? args.skipItems : 1 });
         }
         else if (keyCode === kendo_react_common_1.Keys.home) {
             return 0;

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-dropdowns',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1691491862,
+    publishDate: 1691577562,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };