@progress/kendo-react-dropdowns 5.17.0-dev.202308081128 → 5.17.0-dev.202308101044

package/dist/es/DropDownList/DropDownList.js

@@ -35,7 +35,7 @@ import GroupStickyHeader from '../common/GroupStickyHeader';
 import ListDefaultItem from '../common/ListDefaultItem';
 import List from '../common/List';
 import DropDownBase from '../common/DropDownBase';
-import { isPresent, getItemValue, sameCharsOnly, shuffleData, matchText, areSame, getFocusedItem } from '../common/utils';
+import { isPresent, getItemValue, sameCharsOnly, shuffleData, matchText, areSame, itemIndexStartsWith } from '../common/utils';
 import { validatePackage, canUseDOM } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { Button } from '@progress/kendo-react-buttons';
@@ -63,6 +63,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         _this._skipFocusEvent = false;
         _this._filterInput = null;
         _this._navigated = false;
+        _this._lastKeypressIsFilter = false;
         _this._inputId = guid();
         _this.itemHeight = 0;
         /**
@@ -138,7 +139,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, { 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, { 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;
@@ -223,7 +224,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 areSame(i, value, dataItemKey); });
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var keyCode = event.keyCode;
             var homeOrEndKeys = keyCode === Keys.home || keyCode === Keys.end;
@@ -232,7 +235,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 ((event.altKey && keyCode === Keys.down) || keyCode === Keys.enter || keyCode === Keys.space);
             var shouldClose = opened && ((event.altKey && keyCode === Keys.up) || keyCode === Keys.esc);
             var leftOrRightKeys = leftRightKeysNavigation && (keyCode === Keys.left || keyCode === Keys.right);
-            var shouldNavigate = upOrDownKeys || (!filterable && (leftOrRightKeys || homeOrEndKeys));
+            var shouldNavigate = upOrDownKeys || (leftOrRightKeys && !filterable) || homeOrEndKeys;
             var state = _this.base.initState();
             state.syntheticEvent = event;
             if (disabled) {
@@ -259,19 +262,101 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 }
             }
             else if (opened && keyCode === 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 === Keys.down || keyCode === 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 === Keys.up || keyCode === 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 === Keys.down || keyCode === 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 === Keys.up || keyCode === 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);
@@ -298,6 +383,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);
             }
@@ -319,6 +407,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             if (!_this.state.focused) {
                 state.data.focused = true;
             }
+            _this.resetValueIfDisabledItem();
             _this.base.togglePopup(state);
             _this.applyState(state);
         };
@@ -346,6 +435,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 });
         };
@@ -494,7 +584,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;
@@ -517,8 +607,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 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 = !areSame(prevSelectedItem, selectedItem_1, dataItemKey);
             if (opening && virtual) {
@@ -624,7 +714,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;
@@ -633,7 +723,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);
@@ -678,18 +769,24 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                         this.renderList()),
                     footer && React.createElement("div", { className: "k-list-footer" }, footer)))));
     };
-    DropDownListWithoutContext.prototype.focusedIndex = function () {
-        var filterText = 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 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(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 ? 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 (isPresent(value) && text === undefined || filterable && text === '') {
+            return data.findIndex(function (i) { return areSame(i, value, dataItemKey); });
+        }
+        else if (text) {
+            if (this._lastKeypressIsFilter) {
+                return focusedItemIndex(data, text, textField);
+            }
+            return data.findIndex(function (i) { return areSame(i, value, dataItemKey); });
         }
         else {
-            return !hasSelected && virtual.skip === 0 ? 0 : undefined;
+            return virtual.skip === 0 ? 0 : -1;
         }
     };
     DropDownListWithoutContext.prototype.focusElement = function (element) {
@@ -720,11 +817,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: 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.propTypes);
+    DropDownListWithoutContext.propTypes = __assign({ delay: PropTypes.number, ignoreCase: PropTypes.bool, iconClassName: PropTypes.string, svgIcon: 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.propTypes);
     /**
      * @hidden
      */

package/dist/es/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/es/MultiColumnComboBox/MultiColumnComboBox.js

@@ -115,7 +115,8 @@ export var 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/es/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/es/MultiSelect/MultiSelect.js

@@ -209,9 +209,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 &&
@@ -230,14 +232,74 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                     togglePopup();
                 }
                 else if (keyCode === Keys.up || keyCode === Keys.down) {
+                    if (groupField !== '' && textField) {
+                        if (!_this.props.skipDisabledItems && opened) {
+                            _this.onNavigate(state, keyCode);
+                        }
+                        else {
+                            var newIndex = 0;
+                            if (keyCode === Keys.down || keyCode === 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 === Keys.up || keyCode === 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 === Keys.down || keyCode === Keys.right) {
+                            newIndex = data.slice(focusedIndex + 1).find(function (i) { return !i.disabled; });
+                        }
+                        else if (keyCode === Keys.up || keyCode === 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 === Keys.enter) {
                     event.preventDefault();
                     if (_this.props.allowCustom && text && focusedItem === null) {
                         _this.customItemSelect(event);
                     }
+                    else if (focusedItem.disabled) {
+                        togglePopup();
+                    }
                     else {
                         _this.selectFocusedItem(event);
                     }
@@ -682,7 +744,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;
@@ -700,7 +762,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);
@@ -827,9 +890,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);
@@ -842,7 +905,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 ? 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 ? itemIndexStartsWith : _c, skipDisabledItems = _a.skipDisabledItems;
         var skip = (virtual && virtual.skip) || 0;
         var focusedInd;
         if (focusedIndex !== undefined) {
@@ -876,6 +939,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 };
@@ -903,9 +974,9 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
     MultiSelectWithoutContext.propTypes = __assign(__assign({}, DropDownBase.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.defaultProps), { autoClose: true, required: false, size: 'medium', rounded: 'medium', fillMode: 'solid', groupMode: 'modern' });
+    MultiSelectWithoutContext.defaultProps = __assign(__assign({}, DropDownBase.defaultProps), { autoClose: true, required: false, size: 'medium', rounded: 'medium', fillMode: 'solid', groupMode: 'modern', skipDisabledItems: true });
     return MultiSelectWithoutContext;
 }(React.Component));
 export { MultiSelectWithoutContext };

package/dist/es/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/es/common/List.js

@@ -35,7 +35,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 && areSame(item, value, valueField)) ||
                     (isArray && value.findIndex(function (i) { return areSame(i, item, valueField); }) !== -1));
             var group = undefined;
@@ -50,7 +50,7 @@ var List = /** @class */ (function (_super) {
             group !== undefined && groupMode === 'modern' ? groupCounter += 1 : '';
             return [
                 group !== undefined && groupMode === 'modern' && React.createElement(ListGroupItem, { id: "option-".concat(optionsGuid, "-").concat(idIndex), virtual: virtual, key: realIndex + '-group-item', group: group, isMultiColumn: isMultiColumn, render: groupHeaderItemRender }),
-                React.createElement(ListItem, { 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, { 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/es/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/es/common/ListItem.js

@@ -28,11 +28,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: 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: 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' }, getItemValue(dataItem, this.props.textField).toString()),
             group !== undefined && groupMode === 'classic' ? React.createElement("div", { className: "k-list-item-group-label" }, group) : null));

package/dist/es/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/es/common/Navigation.js

@@ -9,10 +9,10 @@ var Navigation = /** @class */ (function () {
     Navigation.prototype.navigate = function (args) {
         var keyCode = args.keyCode;
         if (keyCode === Keys.up || keyCode === 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 === Keys.down || keyCode === 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 === Keys.home) {
             return 0;

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dropdowns',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1691492049,
+    publishDate: 1691662558,
     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'
 };

package/dist/npm/AutoComplete/AutoComplete.d.ts

@@ -41,6 +41,7 @@ export declare class AutoCompleteWithoutContext extends React.Component<AutoComp
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
         list: PropTypes.Requireable<any>;
+        skipDisabledItems: PropTypes.Requireable<boolean>;
         opened: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         dir: PropTypes.Requireable<string>;
@@ -59,9 +60,7 @@ export declare class AutoCompleteWithoutContext extends React.Component<AutoComp
             popupClass: PropTypes.Requireable<string>;
             className: PropTypes.Requireable<string>;
             appendTo: PropTypes.Requireable<any>;
-            width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>; /**
-             * @hidden
-             */
+            width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
             height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         }>>;
         onOpen: PropTypes.Requireable<(...args: any[]) => any>;
@@ -82,13 +81,12 @@ export declare class AutoCompleteWithoutContext extends React.Component<AutoComp
         size: "small" | "medium" | "large" | null | undefined;
         rounded: "small" | "medium" | "full" | "large" | null | undefined;
         fillMode: "flat" | "outline" | "solid" | null | undefined;
+        skipDisabledItems: boolean;
         popupSettings: {
             height: string;
         };
         required: boolean;
-        validityStyles: boolean; /**
-         * The value of the AutoComplete.
-         */
+        validityStyles: boolean;
     };
     /**
      * @hidden
@@ -158,7 +156,7 @@ export declare class AutoCompleteWithoutContext extends React.Component<AutoComp
     /**
      * @hidden
      */
-    onNavigate(state: AutoCompleteInternalState, keyCode: number): void;
+    onNavigate(state: AutoCompleteInternalState, keyCode: number, skipItems?: number): void;
     /**
      * @hidden
      */