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

package/dist/es/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
      */

package/dist/es/AutoComplete/AutoComplete.js

@@ -183,9 +183,12 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
             _this.applyState(state);
         };
         _this.onInputKeyDown = function (event) {
+            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, skipDisabledItems = _a.skipDisabledItems, groupField = _a.groupField, textField = _a.textField;
             if (_this._isScrolling) {
                 _this._isScrolling = false;
             }
+            var focusedIndex = _this.focusedIndex();
+            var focusedItem = data[focusedIndex];
             var keyCode = event.keyCode;
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var state = _this.base.initState();
@@ -197,11 +200,76 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
             };
             if (keyCode === Keys.enter || keyCode === Keys.esc) {
                 preventDefault();
-                _this.applyInputValue(event.currentTarget.value, state, event.keyCode);
+                if (skipDisabledItems === false && focusedItem.disabled) {
+                    if (opened) {
+                        _this.togglePopup(state);
+                    }
+                    _this.applyState(state);
+                }
+                else {
+                    _this.applyInputValue(event.currentTarget.value, state, event.keyCode);
+                }
             }
             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 !== undefined) {
+                            var skipItems = newIndex - focusedIndex;
+                            _this.onNavigate(state, keyCode, skipItems);
+                        }
+                        else if (newIndex === undefined && data.findIndex(function (el) { return el[textField]; }) === data.length - 1) {
+                            _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);
                 preventDefault();
-                _this.onNavigate(state, keyCode);
             }
         };
         _this.handleBlur = function (event) {
@@ -383,7 +451,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    AutoCompleteWithoutContext.prototype.onNavigate = function (state, keyCode) {
+    AutoCompleteWithoutContext.prototype.onNavigate = function (state, keyCode, skipItems) {
         var _this = this;
         var typedText = this.value;
         var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, focusedItemIndex = _a.focusedItemIndex;
@@ -395,7 +463,8 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
             keyCode: keyCode,
             current: focusedIndex,
             max: data.length - 1,
-            min: 0
+            min: 0,
+            skipItems: skipItems ? skipItems : undefined
         });
         if (newFocused !== undefined) {
             this.itemFocus(newFocused, state);
@@ -408,10 +477,14 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
     AutoCompleteWithoutContext.prototype.applyInputValue = function (value, state, eventKey) {
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField;
+        var focusedIndex = this.focusedIndex();
+        var focusedItem = data[focusedIndex];
         this._suggested = '';
         if (opened && eventKey === Keys.enter) {
-            var newValue = getItemValue(data[this.focusedIndex(value)], textField);
-            this.triggerOnChange(newValue, state);
+            if (!focusedItem.disabled) {
+                var newValue = getItemValue(data[this.focusedIndex(value)], textField);
+                this.triggerOnChange(newValue, state);
+            }
         }
         if (opened) {
             this.togglePopup(state);
@@ -488,22 +561,31 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
     };
     AutoCompleteWithoutContext.prototype.focusedIndex = function (value) {
         var _this = this;
-        var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, focusedItemIndex = _a.focusedItemIndex;
+        var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, focusedItemIndex = _a.focusedItemIndex, skipDisabledItems = _a.skipDisabledItems;
         var inputValue = value !== undefined ? value : this.value;
-        return this.state.focusedItem !== undefined ?
-            data.findIndex(function (i) { return areSame(i, _this.state.focusedItem, textField); }) :
-            (focusedItemIndex ? focusedItemIndex(data, inputValue, textField) :
-                Math.max(0, data.indexOf(getFocusedItem(data, inputValue, textField))));
+        if (this.state.focusedItem !== undefined) {
+            return data.findIndex(function (i) { return areSame(i, _this.state.focusedItem, textField); });
+        }
+        else if (focusedItemIndex) {
+            return focusedItemIndex(data, inputValue, textField);
+        }
+        else {
+            var indexOfFocusedItem = data.indexOf(getFocusedItem(data, inputValue, textField));
+            if (skipDisabledItems && textField && indexOfFocusedItem === -1) {
+                return data.findIndex(function (i) { return !i.disabled && i[textField]; });
+            }
+            return Math.max(0, indexOfFocusedItem);
+        }
     };
     AutoCompleteWithoutContext.displayName = 'AutoComplete';
     /**
      * @hidden
      */
-    AutoCompleteWithoutContext.propTypes = __assign(__assign({}, DropDownBase.basicPropTypes), { size: PropTypes.oneOf([null, 'small', 'medium', 'large']), rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']), fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline']), groupField: PropTypes.string, suggest: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), placeholder: PropTypes.string, value: PropTypes.string, defaultValue: PropTypes.string, validationMessage: PropTypes.string, required: PropTypes.bool, readonly: PropTypes.bool, clearButton: PropTypes.bool, valueRender: PropTypes.func, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, list: PropTypes.any });
+    AutoCompleteWithoutContext.propTypes = __assign(__assign({}, DropDownBase.basicPropTypes), { size: PropTypes.oneOf([null, 'small', 'medium', 'large']), rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']), fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline']), groupField: PropTypes.string, suggest: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), placeholder: PropTypes.string, value: PropTypes.string, defaultValue: PropTypes.string, validationMessage: PropTypes.string, required: PropTypes.bool, readonly: PropTypes.bool, clearButton: PropTypes.bool, valueRender: PropTypes.func, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, list: PropTypes.any, skipDisabledItems: PropTypes.bool });
     /**
      * @hidden
      */
-    AutoCompleteWithoutContext.defaultProps = __assign(__assign({}, DropDownBase.defaultProps), { size: 'medium', rounded: 'medium', fillMode: 'solid' });
+    AutoCompleteWithoutContext.defaultProps = __assign(__assign({}, DropDownBase.defaultProps), { size: 'medium', rounded: 'medium', fillMode: 'solid', skipDisabledItems: true });
     return AutoCompleteWithoutContext;
 }(React.Component));
 export { AutoCompleteWithoutContext };

package/dist/es/AutoComplete/AutoCompleteProps.d.ts

@@ -236,4 +236,8 @@ export interface AutoCompleteProps extends FormComponentProps {
      * Sets the key for comparing the data items of the AutoComplete. If `dataItemKey` is not set, the AutoComplete compares the items by reference.
      */
     dataItemKey?: string;
+    /**
+     * Defines if AutoComplete'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/ComboBox/ComboBox.d.ts

@@ -45,6 +45,7 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
         ariaDescribedBy: PropTypes.Requireable<string>;
         list: PropTypes.Requireable<any>;
         valueRender: PropTypes.Requireable<(...args: any[]) => any>;
+        skipDisabledItems: PropTypes.Requireable<boolean>;
         value: PropTypes.Requireable<any>;
         defaultValue: PropTypes.Requireable<any>;
         filterable: PropTypes.Requireable<boolean>;
@@ -98,6 +99,7 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
         required: boolean;
         groupMode: string | undefined;
         isMultiColumn: boolean;
+        skipDisabledItems: boolean;
         popupSettings: {
             height: string;
         };
@@ -156,7 +158,7 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
     /** @hidden */
     handleItemSelect: (index: number, state: ComboInternalState) => void;
     /** @hidden */
-    onNavigate(state: InternalState, keyCode: number): void;
+    onNavigate(state: InternalState, keyCode: number, skipItems?: number): void;
     private onPopupOpened;
     private componentRef;
     private toggleBtnClick;
@@ -175,7 +177,11 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
     private onInputClick;
     private onInputKeyDown;
     private inputOnChange;
+    private clearValue;
     private clearButtonClick;
+    private clearValueOnEnterOrEsc;
+    private clearValueOnBlur;
+    private clearValueOnToggleBtnClick;
     private triggerOnChange;
     private getFocusedIndex;
     private suggestValue;

package/dist/es/ComboBox/ComboBox.js

@@ -95,9 +95,15 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             _this.base.wrapper = element;
         };
         _this.toggleBtnClick = function (event) {
+            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, skipDisabledItems = _a.skipDisabledItems, textField = _a.textField;
+            var focusedIndex = _this.getFocusedIndex();
+            var isCurrentValueDisabled = textField && data[focusedIndex].disabled;
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var state = _this.base.initState();
             state.syntheticEvent = event;
+            if (!skipDisabledItems && textField && isCurrentValueDisabled) {
+                _this.clearValueOnToggleBtnClick(event);
+            }
             _this.base.togglePopup(state);
             if (!opened && _this.mobileMode) {
                 var mobileText = _this.props.adaptiveFilter !== undefined ? _this.props.adaptiveFilter : _this.state.text || null;
@@ -158,9 +164,16 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         _this.handleBlur = function (event) {
             if (_this.state.focused && !_this._skipBlur) {
                 var state = _this.base.initState();
+                var _a = _this.props, textField = _a.textField, data = _a.data;
+                var focusedIndex = _this.getFocusedIndex();
+                var isCustomValue = focusedIndex === -1;
+                var isCurrentValueDisabled = textField && !isCustomValue && data && data[focusedIndex].disabled;
                 state.data.focused = false;
                 state.events.push({ type: 'onBlur' });
                 state.syntheticEvent = event;
+                if (textField && isCurrentValueDisabled) {
+                    _this.clearValueOnBlur(event);
+                }
                 _this.applyValueOnRejectSuggestions(event.currentTarget.value, state);
             }
         };
@@ -176,30 +189,105 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             }
         };
         _this.onInputKeyDown = function (event) {
+            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, skipDisabledItems = _a.skipDisabledItems, textField = _a.textField, dataItemKey = _a.dataItemKey, groupField = _a.groupField;
+            var value = _this.value;
+            var selectedIndex = Math.max(0, data.findIndex(function (i) { return areSame(i, value, dataItemKey); }));
             var keyCode = event.keyCode;
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var state = _this.base.initState();
             state.syntheticEvent = event;
             if (!event.altKey && (keyCode === Keys.up || keyCode === Keys.down)) {
                 event.preventDefault();
-                _this.onNavigate(state, keyCode);
+                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(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) {
+                                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) {
+                    _this.onNavigate(state, keyCode);
+                }
+                else {
+                    var newIndex = null;
+                    if (keyCode === Keys.down || keyCode === Keys.right) {
+                        newIndex = data.slice(selectedIndex + 1).find(function (i) { return !i.disabled; });
+                    }
+                    else if (keyCode === Keys.up || keyCode === Keys.left) {
+                        var dataTest = data.slice(0, selectedIndex);
+                        newIndex = dataTest.pop();
+                        while (newIndex && newIndex.disabled) {
+                            newIndex = dataTest.pop();
+                        }
+                    }
+                    if (newIndex) {
+                        var skipItems = newIndex.id - selectedIndex - 1;
+                        _this.onNavigate(state, keyCode, skipItems);
+                    }
+                    else {
+                        _this.onNavigate(state, keyCode);
+                    }
+                }
                 _this.applyState(state);
-                return;
             }
             var togglePopup = function () {
                 event.preventDefault();
                 _this.base.togglePopup(state);
                 _this.applyState(state);
             };
+            var focusedIndex = _this.getFocusedIndex();
+            var isCustomValue = focusedIndex === -1;
+            var isCurrentValueDisabled = textField && !isCustomValue && data[focusedIndex].disabled;
             if (opened) {
                 if (event.altKey && keyCode === Keys.up) {
                     togglePopup();
                 }
                 else if (keyCode === Keys.enter) {
                     event.preventDefault();
-                    _this.applyValueOnEnter(event.currentTarget.value, state);
+                    var currentValueText = textField && !isCustomValue && event.currentTarget.value ? data[focusedIndex][textField] : undefined;
+                    if (currentValueText) {
+                        if (!skipDisabledItems && textField && isCurrentValueDisabled) {
+                            _this.clearValueOnEnterOrEsc(event);
+                        }
+                        else if (!isCurrentValueDisabled) {
+                            _this.applyValueOnEnter(event.currentTarget.value, state);
+                        }
+                    }
+                    else {
+                        _this.applyValueOnEnter(event.currentTarget.value, state);
+                    }
                 }
                 else if (keyCode === Keys.esc) {
+                    if (!skipDisabledItems && textField && isCurrentValueDisabled) {
+                        _this.clearValueOnEnterOrEsc(event);
+                    }
                     _this.applyValueOnRejectSuggestions(event.currentTarget.value, state);
                 }
             }
@@ -245,18 +333,25 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             var state = _this.base.initState();
             state.syntheticEvent = event;
             event.stopPropagation();
-            _this._suggested = '';
-            _this.base.filterChanged('', state);
-            if (_this.props.filter === undefined && _this.state.text !== undefined) {
-                state.data.text = undefined;
-            }
-            _this.triggerOnChange(null, state);
-            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
-            var isAdaptive = _this.mobileMode;
-            if (opened && !isAdaptive) {
-                _this.base.togglePopup(state);
-            }
-            _this.applyState(state);
+            _this.clearValue();
+        };
+        _this.clearValueOnEnterOrEsc = function (event) {
+            var state = _this.base.initState();
+            state.syntheticEvent = event;
+            event.stopPropagation();
+            _this.clearValue();
+        };
+        _this.clearValueOnBlur = function (event) {
+            var state = _this.base.initState();
+            state.syntheticEvent = event;
+            event.stopPropagation();
+            _this.clearValue();
+        };
+        _this.clearValueOnToggleBtnClick = function (event) {
+            var state = _this.base.initState();
+            state.syntheticEvent = event;
+            event.stopPropagation();
+            _this.clearValue();
         };
         _this.setValidity = function () {
             if (_this._input && _this._input.setCustomValidity) {
@@ -385,7 +480,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
     /** @hidden */
     ComboBoxWithoutContext.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, _d = _b.data, data = _d === void 0 ? [] : _d;
+        var _b = this.props, dataItemKey = _b.dataItemKey, virtual = _b.virtual, _c = _b.groupField, groupField = _c === void 0 ? '' : _c, _d = _b.data, data = _d === void 0 ? [] : _d, textField = _b.textField;
         var prevTotal = prevProps.virtual ? prevProps.virtual.total : 0;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var prevOpened = prevProps.opened !== undefined ? prevProps.opened : prevState.opened;
@@ -400,8 +495,8 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             var prevSelectedItem = prevProps.value !== undefined ? prevProps.value : prevState.value;
             var selectedItemIndex = data.findIndex(function (i) { return areSame(i, selectedItem, dataItemKey); });
             // Needed to calculate the proper item index when in 'modern' grouping mode
-            if (this.props.groupMode === 'modern') {
-                selectedItemIndex = (_a = this.base.getGroupedDataModernMode(data, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(selectedItem);
+            if (this.props.groupMode === 'modern' && textField && selectedItem) {
+                selectedItemIndex = (_a = this.base.getGroupedDataModernMode(data, groupField)) === null || _a === void 0 ? void 0 : _a.map(function (el) { return el[textField]; }).indexOf(selectedItem[textField]);
             }
             var selectedItemChanged = !areSame(prevSelectedItem, selectedItem, dataItemKey);
             if (opening && virtual) {
@@ -484,7 +579,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             : combobox;
     };
     /** @hidden */
-    ComboBoxWithoutContext.prototype.onNavigate = function (state, keyCode) {
+    ComboBoxWithoutContext.prototype.onNavigate = function (state, keyCode, skipItems) {
         var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c;
         var text = this.props.filter ? this.props.filter : this.state.text;
         var focusedIndex = this.getFocusedIndex();
@@ -503,7 +598,8 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                 keyCode: keyCode,
                 current: currentIndex,
                 max: (vs.enabled ? vs.total : data.length) - 1,
-                min: 0
+                min: 0,
+                skipItems: skipItems ? skipItems : undefined
             });
             if (newIndex !== undefined) {
                 this.handleItemSelect(newIndex, state);
@@ -703,6 +799,21 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         }
         return (React.createElement(SearchBar, { id: id, readOnly: (opened && this.mobileMode), placeholder: placeholder, tabIndex: tabIndex, title: this.props.title, accessKey: this.props.accessKey, value: text + this._suggested, suggestedText: this._suggested, ref: function (el) { return _this._input = el && el.input; }, onClick: this.onInputClick, onKeyDown: this.onInputKeyDown, onChange: this.inputOnChange, onFocus: this.base.handleFocus, onBlur: this.handleBlur, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: "option-".concat(this.base.guid, "-").concat(selectedIndex + virtual.skip), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, ariaRequired: this.required, render: this.props.valueRender }));
     };
+    ComboBoxWithoutContext.prototype.clearValue = function () {
+        var state = this.base.initState();
+        this._suggested = '';
+        this.base.filterChanged('', state);
+        if (this.props.filter === undefined && this.state.text !== undefined) {
+            state.data.text = undefined;
+        }
+        this.triggerOnChange(null, state);
+        var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
+        var isAdaptive = this.mobileMode;
+        if (opened && !isAdaptive) {
+            this.base.togglePopup(state);
+        }
+        this.applyState(state);
+    };
     ComboBoxWithoutContext.prototype.triggerOnChange = function (item, state) {
         var value = this.value;
         if ((!isPresent(value) && !isPresent(item)) || areSame(value, item, this.props.dataItemKey)) {
@@ -716,7 +827,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
     };
     ComboBoxWithoutContext.prototype.getFocusedIndex = function () {
         var value = this.value;
-        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;
+        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, skipDisabledItems = _a.skipDisabledItems;
         var text = this.props.filter ? this.props.filter : this.state.text;
         if (isPresent(value) && text === undefined) {
             return data.findIndex(function (i) { return areSame(i, value, dataItemKey); });
@@ -724,6 +835,9 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         else if (text) {
             return focusedItemIndex(data, text, textField);
         }
+        else if (skipDisabledItems && textField && !text && virtual.skip === 0) {
+            return data.findIndex(function (i) { return !i.disabled && i[textField]; });
+        }
         else {
             return virtual.skip === 0 ? 0 : -1;
         }
@@ -746,9 +860,9 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
     ;
     ComboBoxWithoutContext.displayName = 'ComboBox';
     /** @hidden */
-    ComboBoxWithoutContext.propTypes = __assign(__assign({}, DropDownBase.propTypes), { size: PropTypes.oneOf([null, 'small', 'medium', 'large']), rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']), fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline']), dataItemKey: PropTypes.string, groupField: PropTypes.string, groupMode: PropTypes.oneOf([undefined, 'classic', 'modern']), isMultiColumn: PropTypes.bool, suggest: PropTypes.bool, placeholder: PropTypes.string, title: PropTypes.string, allowCustom: PropTypes.bool, clearButton: PropTypes.bool, iconClassName: PropTypes.string, svgIcon: svgIconPropType, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, list: PropTypes.any, valueRender: PropTypes.func });
+    ComboBoxWithoutContext.propTypes = __assign(__assign({}, DropDownBase.propTypes), { size: PropTypes.oneOf([null, 'small', 'medium', 'large']), rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']), fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline']), dataItemKey: PropTypes.string, groupField: PropTypes.string, groupMode: PropTypes.oneOf([undefined, 'classic', 'modern']), isMultiColumn: PropTypes.bool, suggest: PropTypes.bool, placeholder: PropTypes.string, title: PropTypes.string, allowCustom: PropTypes.bool, clearButton: PropTypes.bool, iconClassName: PropTypes.string, svgIcon: svgIconPropType, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, list: PropTypes.any, valueRender: PropTypes.func, skipDisabledItems: PropTypes.bool });
     /** @hidden */
-    ComboBoxWithoutContext.defaultProps = __assign(__assign({}, DropDownBase.defaultProps), { size: 'medium', rounded: 'medium', fillMode: 'solid', allowCustom: false, clearButton: true, required: false, groupMode: 'classic', isMultiColumn: false });
+    ComboBoxWithoutContext.defaultProps = __assign(__assign({}, DropDownBase.defaultProps), { size: 'medium', rounded: 'medium', fillMode: 'solid', allowCustom: false, clearButton: true, required: false, groupMode: 'classic', isMultiColumn: false, skipDisabledItems: true });
     return ComboBoxWithoutContext;
 }(React.Component));
 export { ComboBoxWithoutContext };

package/dist/es/ComboBox/ComboBoxProps.d.ts

@@ -306,4 +306,8 @@ export interface ComboBoxProps extends FormComponentProps {
      * Specifies the text that is rendered as title in the adaptive popup.
      */
     adaptiveTitle?: string;
+    /**
+     * Defines if Combobox'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/DropDownList/DropDownList.d.ts

@@ -58,9 +58,6 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         itemRender: PropTypes.Requireable<(...args: any[]) => any>;
         listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * @hidden
-         */
         focusedItemIndex: PropTypes.Requireable<(...args: any[]) => any>;
         header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -85,6 +82,7 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
         title: PropTypes.Requireable<string>;
         groupField: PropTypes.Requireable<string>;
         list: PropTypes.Requireable<any>;
+        skipDisabledItems: PropTypes.Requireable<boolean>;
     };
     /**
      * @hidden
@@ -116,6 +114,7 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
     private _filterInput;
     private _valueDuringOnChange;
     private _navigated;
+    private _lastKeypressIsFilter;
     private _inputId;
     private itemHeight;
     private observerResize?;
@@ -171,7 +170,7 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
     /**
      * @hidden
      */
-    onNavigate(state: InternalState, keyCode: number): void;
+    onNavigate(state: InternalState, keyCode: number, skipItems?: number): void;
     private componentRef;
     private dummySelect;
     private renderAdaptiveListContainer;
@@ -192,12 +191,13 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
     private handleListFilterChange;
     private onPopupOpened;
     private onPopupClosed;
-    private focusedIndex;
+    private getFocusedIndex;
     private focusElement;
     private setValidity;
     private triggerOnChange;
     private applyState;
     private calculateMedia;
+    private resetValueIfDisabledItem;
 }
 /**
  * Represents the PropsContext of the `DropDownList` component.