@progress/kendo-react-dropdowns 6.1.0-dev.202311011714 → 6.1.0-dev.202311021038

package/dist/es/MultiSelect/MultiSelect.d.ts

@@ -108,6 +108,7 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
     private _input;
     private _adaptiveInput;
     private _skipFocusEvent;
+    private _lastSelectedOrDeslectedItemIndex;
     private itemHeight;
     protected scrollToFocused: boolean;
     private localization;
@@ -186,6 +187,20 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
     private applyState;
     private setValidity;
     private calculateMedia;
+    /**
+     * Updates the state of the MultiSelect when the complex keyboard navigation that
+     * includes key combinations with the Ctrl/Command, Shift, Home and End keys
+     *
+     * @param {Array<string | Object>} dataToSet Defines the array of new values that will be applied to the MultiSelect
+     * @param {MultiSelectInternalState} state The current state of the MultiSelect
+     */
+    private updateStateOnKeyboardNavigation;
+    /**
+     * Returns the last element that was selected or deselected. Needed for the keyboard navigation specifications
+     *
+     * @param {number} correction A correction is needed depending on if UP or DOWN key is pressed
+     */
+    private getLastSelectedOrDeselectedIndex;
 }
 /**
  * Represents the PropsContext of the `MultiSelect` component.

package/dist/es/MultiSelect/MultiSelect.js

@@ -83,6 +83,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         _this._input = null;
         _this._adaptiveInput = null;
         _this._skipFocusEvent = false;
+        _this._lastSelectedOrDeslectedItemIndex = null; // Needed for handling the Shift + Up/Down Keyboard Navigation requirement
         _this.itemHeight = 0;
         _this.scrollToFocused = false;
         _this.localization = null;
@@ -98,6 +99,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             var skip = virtual ? virtual.skip : 0;
             var dataItem = data[index - skip];
             var indexInValue = _this.value.findIndex(function (i) { return areSame(i, dataItem, dataItemKey); });
+            _this._lastSelectedOrDeslectedItemIndex = data.findIndex(function (i) { return areSame(i, dataItem, dataItemKey); });
             var newItems = [];
             if (indexInValue !== -1) { // item is already selected
                 newItems = _this.value;
@@ -206,6 +208,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             if (_this.state.text) {
                 state.data.text = '';
             }
+            _this._lastSelectedOrDeslectedItemIndex = null; // Resets the last selected/deselected item according to the Keyboard navigation requirements
             _this.applyState(state);
         };
         _this.onInputKeyDown = function (event) {
@@ -219,7 +222,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             if (!text && _this.value.length > 0 &&
                 (keyCode === Keys.left || keyCode === Keys.right ||
                     keyCode === Keys.home || keyCode === Keys.end ||
-                    keyCode === Keys.delete || keyCode === Keys.backspace)) {
+                    keyCode === Keys.delete || keyCode === Keys.backspace) && !event.shiftKey) {
                 return _this.onTagsNavigate(event, state);
             }
             var togglePopup = function () {
@@ -228,7 +231,74 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 _this.applyState(state);
             };
             if (_this.opened) {
-                if (event.altKey && keyCode === Keys.up) {
+                if (keyCode === Keys.pageUp) {
+                    _this.base.scrollPopupByPageSize(-1);
+                }
+                else if (keyCode === Keys.pageDown) {
+                    _this.base.scrollPopupByPageSize(1);
+                }
+                else if ((event.ctrlKey || event.metaKey) && event.code === 'KeyA') {
+                    // Ctrl or Command + "A" Key selects/deselects all items
+                    var currentValuesLength = _this.state.value && _this.state.value.length;
+                    var dataToSet = currentValuesLength === data.length ? [] : data;
+                    _this.updateStateOnKeyboardNavigation(dataToSet, state);
+                }
+                else if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.keyCode === Keys.end) {
+                    // Ctrl or Command + Shift + End from the Keyboard specifications
+                    var dataToSet = data.slice(_this.getFocusedState().focusedIndex);
+                    _this.itemFocus(data.length - 1, state);
+                    _this.updateStateOnKeyboardNavigation(dataToSet, state);
+                }
+                else if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.keyCode === Keys.home) {
+                    // Ctrl or Command + Shift + Home from the Keyboard specifications
+                    var dataToSet = data.slice(0, _this.getFocusedState().focusedIndex + 1);
+                    _this.itemFocus(0, state);
+                    _this.updateStateOnKeyboardNavigation(dataToSet, state);
+                }
+                else if (event.shiftKey && event.keyCode === Keys.up) {
+                    // Shift + Up from the Keyboard specifications
+                    var dataToSet = void 0;
+                    var lastSelectedOrDeselectedIndex = _this.getLastSelectedOrDeselectedIndex(1, focusedIndex);
+                    if (lastSelectedOrDeselectedIndex === null) {
+                        dataToSet = focusedIndex !== 0 ? data.slice(focusedIndex - 1, focusedIndex) : [data[focusedIndex]];
+                    }
+                    else if (lastSelectedOrDeselectedIndex === focusedIndex) {
+                        dataToSet = [data[lastSelectedOrDeselectedIndex - 1]];
+                    }
+                    else if (focusedIndex >= 0) {
+                        dataToSet = lastSelectedOrDeselectedIndex > focusedIndex
+                            ? data.slice(focusedIndex - 1, lastSelectedOrDeselectedIndex)
+                            : data.slice(lastSelectedOrDeselectedIndex - 1, focusedIndex);
+                    }
+                    if (dataToSet && dataToSet.length > 0) {
+                        if (focusedIndex >= 1) {
+                            _this.itemFocus(focusedIndex - 1, state);
+                        }
+                        _this.updateStateOnKeyboardNavigation(dataToSet, state);
+                    }
+                }
+                else if (event.shiftKey && event.keyCode === Keys.down) {
+                    // Shift + Down from the Keyboard specifications
+                    var dataToSet = void 0;
+                    var lastSelectedOrDeselectedIndex = _this.getLastSelectedOrDeselectedIndex(0, focusedIndex);
+                    if (lastSelectedOrDeselectedIndex === null) {
+                        dataToSet = focusedIndex !== data.length - 1 ? data.slice(focusedIndex, focusedIndex + 1) : [data[focusedIndex]];
+                    }
+                    else if (lastSelectedOrDeselectedIndex === focusedIndex) {
+                        dataToSet = data.slice(focusedIndex, focusedIndex + 2);
+                    }
+                    else if (focusedIndex >= 0) {
+                        // dataToSet = data.slice(focusedIndex, lastSelectedOrDeselectedIndex);
+                        dataToSet = lastSelectedOrDeselectedIndex > focusedIndex
+                            ? data.slice(focusedIndex + 1, lastSelectedOrDeselectedIndex + 1)
+                            : data.slice(lastSelectedOrDeselectedIndex, focusedIndex + 2);
+                    }
+                    if (dataToSet && dataToSet.length >= 1) {
+                        _this.itemFocus(focusedIndex + 1, state);
+                        _this.updateStateOnKeyboardNavigation(dataToSet, state);
+                    }
+                }
+                else if (event.altKey && keyCode === Keys.up) {
                     togglePopup();
                 }
                 else if (keyCode === Keys.up || keyCode === Keys.down) {
@@ -851,10 +921,10 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 newFocusedTag = tags[focusedIndex];
             }
         }
-        else if (keyCode === Keys.home) {
+        else if (keyCode === Keys.home && !event.shiftKey) {
             newFocusedTag = tags[0];
         }
-        else if (keyCode === Keys.end) {
+        else if (keyCode === Keys.end && !event.shiftKey) {
             newFocusedTag = tags[tags.length - 1];
         }
         else if (keyCode === Keys.delete) {
@@ -969,6 +1039,29 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         ;
     };
     ;
+    /**
+     * Updates the state of the MultiSelect when the complex keyboard navigation that
+     * includes key combinations with the Ctrl/Command, Shift, Home and End keys
+     *
+     * @param {Array<string | Object>} dataToSet Defines the array of new values that will be applied to the MultiSelect
+     * @param {MultiSelectInternalState} state The current state of the MultiSelect
+     */
+    MultiSelectWithoutContext.prototype.updateStateOnKeyboardNavigation = function (dataToSet, state) {
+        this.setState({ value: dataToSet });
+        this.triggerOnChange(dataToSet, state);
+        this.applyState(state);
+    };
+    /**
+     * Returns the last element that was selected or deselected. Needed for the keyboard navigation specifications
+     *
+     * @param {number} correction A correction is needed depending on if UP or DOWN key is pressed
+     */
+    MultiSelectWithoutContext.prototype.getLastSelectedOrDeselectedIndex = function (correction, focusedIndex) {
+        if (this._lastSelectedOrDeslectedItemIndex === null) {
+            this._lastSelectedOrDeslectedItemIndex = focusedIndex;
+        }
+        return this._lastSelectedOrDeslectedItemIndex !== null ? this._lastSelectedOrDeslectedItemIndex + correction : null;
+    };
     MultiSelectWithoutContext.displayName = 'MultiSelect';
     /** @hidden */
     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({

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dropdowns',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1698856370,
+    publishDate: 1698919792,
     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/MultiSelect/MultiSelect.d.ts

@@ -108,6 +108,7 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
     private _input;
     private _adaptiveInput;
     private _skipFocusEvent;
+    private _lastSelectedOrDeslectedItemIndex;
     private itemHeight;
     protected scrollToFocused: boolean;
     private localization;
@@ -186,6 +187,20 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
     private applyState;
     private setValidity;
     private calculateMedia;
+    /**
+     * Updates the state of the MultiSelect when the complex keyboard navigation that
+     * includes key combinations with the Ctrl/Command, Shift, Home and End keys
+     *
+     * @param {Array<string | Object>} dataToSet Defines the array of new values that will be applied to the MultiSelect
+     * @param {MultiSelectInternalState} state The current state of the MultiSelect
+     */
+    private updateStateOnKeyboardNavigation;
+    /**
+     * Returns the last element that was selected or deselected. Needed for the keyboard navigation specifications
+     *
+     * @param {number} correction A correction is needed depending on if UP or DOWN key is pressed
+     */
+    private getLastSelectedOrDeselectedIndex;
 }
 /**
  * Represents the PropsContext of the `MultiSelect` component.

package/dist/npm/MultiSelect/MultiSelect.js

@@ -86,6 +86,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         _this._input = null;
         _this._adaptiveInput = null;
         _this._skipFocusEvent = false;
+        _this._lastSelectedOrDeslectedItemIndex = null; // Needed for handling the Shift + Up/Down Keyboard Navigation requirement
         _this.itemHeight = 0;
         _this.scrollToFocused = false;
         _this.localization = null;
@@ -101,6 +102,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             var skip = virtual ? virtual.skip : 0;
             var dataItem = data[index - skip];
             var indexInValue = _this.value.findIndex(function (i) { return (0, utils_1.areSame)(i, dataItem, dataItemKey); });
+            _this._lastSelectedOrDeslectedItemIndex = data.findIndex(function (i) { return (0, utils_1.areSame)(i, dataItem, dataItemKey); });
             var newItems = [];
             if (indexInValue !== -1) { // item is already selected
                 newItems = _this.value;
@@ -209,6 +211,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             if (_this.state.text) {
                 state.data.text = '';
             }
+            _this._lastSelectedOrDeslectedItemIndex = null; // Resets the last selected/deselected item according to the Keyboard navigation requirements
             _this.applyState(state);
         };
         _this.onInputKeyDown = function (event) {
@@ -222,7 +225,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             if (!text && _this.value.length > 0 &&
                 (keyCode === kendo_react_common_1.Keys.left || keyCode === kendo_react_common_1.Keys.right ||
                     keyCode === kendo_react_common_1.Keys.home || keyCode === kendo_react_common_1.Keys.end ||
-                    keyCode === kendo_react_common_1.Keys.delete || keyCode === kendo_react_common_1.Keys.backspace)) {
+                    keyCode === kendo_react_common_1.Keys.delete || keyCode === kendo_react_common_1.Keys.backspace) && !event.shiftKey) {
                 return _this.onTagsNavigate(event, state);
             }
             var togglePopup = function () {
@@ -231,7 +234,74 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 _this.applyState(state);
             };
             if (_this.opened) {
-                if (event.altKey && keyCode === kendo_react_common_1.Keys.up) {
+                if (keyCode === kendo_react_common_1.Keys.pageUp) {
+                    _this.base.scrollPopupByPageSize(-1);
+                }
+                else if (keyCode === kendo_react_common_1.Keys.pageDown) {
+                    _this.base.scrollPopupByPageSize(1);
+                }
+                else if ((event.ctrlKey || event.metaKey) && event.code === 'KeyA') {
+                    // Ctrl or Command + "A" Key selects/deselects all items
+                    var currentValuesLength = _this.state.value && _this.state.value.length;
+                    var dataToSet = currentValuesLength === data.length ? [] : data;
+                    _this.updateStateOnKeyboardNavigation(dataToSet, state);
+                }
+                else if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.keyCode === kendo_react_common_1.Keys.end) {
+                    // Ctrl or Command + Shift + End from the Keyboard specifications
+                    var dataToSet = data.slice(_this.getFocusedState().focusedIndex);
+                    _this.itemFocus(data.length - 1, state);
+                    _this.updateStateOnKeyboardNavigation(dataToSet, state);
+                }
+                else if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.keyCode === kendo_react_common_1.Keys.home) {
+                    // Ctrl or Command + Shift + Home from the Keyboard specifications
+                    var dataToSet = data.slice(0, _this.getFocusedState().focusedIndex + 1);
+                    _this.itemFocus(0, state);
+                    _this.updateStateOnKeyboardNavigation(dataToSet, state);
+                }
+                else if (event.shiftKey && event.keyCode === kendo_react_common_1.Keys.up) {
+                    // Shift + Up from the Keyboard specifications
+                    var dataToSet = void 0;
+                    var lastSelectedOrDeselectedIndex = _this.getLastSelectedOrDeselectedIndex(1, focusedIndex);
+                    if (lastSelectedOrDeselectedIndex === null) {
+                        dataToSet = focusedIndex !== 0 ? data.slice(focusedIndex - 1, focusedIndex) : [data[focusedIndex]];
+                    }
+                    else if (lastSelectedOrDeselectedIndex === focusedIndex) {
+                        dataToSet = [data[lastSelectedOrDeselectedIndex - 1]];
+                    }
+                    else if (focusedIndex >= 0) {
+                        dataToSet = lastSelectedOrDeselectedIndex > focusedIndex
+                            ? data.slice(focusedIndex - 1, lastSelectedOrDeselectedIndex)
+                            : data.slice(lastSelectedOrDeselectedIndex - 1, focusedIndex);
+                    }
+                    if (dataToSet && dataToSet.length > 0) {
+                        if (focusedIndex >= 1) {
+                            _this.itemFocus(focusedIndex - 1, state);
+                        }
+                        _this.updateStateOnKeyboardNavigation(dataToSet, state);
+                    }
+                }
+                else if (event.shiftKey && event.keyCode === kendo_react_common_1.Keys.down) {
+                    // Shift + Down from the Keyboard specifications
+                    var dataToSet = void 0;
+                    var lastSelectedOrDeselectedIndex = _this.getLastSelectedOrDeselectedIndex(0, focusedIndex);
+                    if (lastSelectedOrDeselectedIndex === null) {
+                        dataToSet = focusedIndex !== data.length - 1 ? data.slice(focusedIndex, focusedIndex + 1) : [data[focusedIndex]];
+                    }
+                    else if (lastSelectedOrDeselectedIndex === focusedIndex) {
+                        dataToSet = data.slice(focusedIndex, focusedIndex + 2);
+                    }
+                    else if (focusedIndex >= 0) {
+                        // dataToSet = data.slice(focusedIndex, lastSelectedOrDeselectedIndex);
+                        dataToSet = lastSelectedOrDeselectedIndex > focusedIndex
+                            ? data.slice(focusedIndex + 1, lastSelectedOrDeselectedIndex + 1)
+                            : data.slice(lastSelectedOrDeselectedIndex, focusedIndex + 2);
+                    }
+                    if (dataToSet && dataToSet.length >= 1) {
+                        _this.itemFocus(focusedIndex + 1, state);
+                        _this.updateStateOnKeyboardNavigation(dataToSet, state);
+                    }
+                }
+                else if (event.altKey && keyCode === kendo_react_common_1.Keys.up) {
                     togglePopup();
                 }
                 else if (keyCode === kendo_react_common_1.Keys.up || keyCode === kendo_react_common_1.Keys.down) {
@@ -854,10 +924,10 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 newFocusedTag = tags[focusedIndex];
             }
         }
-        else if (keyCode === kendo_react_common_1.Keys.home) {
+        else if (keyCode === kendo_react_common_1.Keys.home && !event.shiftKey) {
             newFocusedTag = tags[0];
         }
-        else if (keyCode === kendo_react_common_1.Keys.end) {
+        else if (keyCode === kendo_react_common_1.Keys.end && !event.shiftKey) {
             newFocusedTag = tags[tags.length - 1];
         }
         else if (keyCode === kendo_react_common_1.Keys.delete) {
@@ -972,6 +1042,29 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         ;
     };
     ;
+    /**
+     * Updates the state of the MultiSelect when the complex keyboard navigation that
+     * includes key combinations with the Ctrl/Command, Shift, Home and End keys
+     *
+     * @param {Array<string | Object>} dataToSet Defines the array of new values that will be applied to the MultiSelect
+     * @param {MultiSelectInternalState} state The current state of the MultiSelect
+     */
+    MultiSelectWithoutContext.prototype.updateStateOnKeyboardNavigation = function (dataToSet, state) {
+        this.setState({ value: dataToSet });
+        this.triggerOnChange(dataToSet, state);
+        this.applyState(state);
+    };
+    /**
+     * Returns the last element that was selected or deselected. Needed for the keyboard navigation specifications
+     *
+     * @param {number} correction A correction is needed depending on if UP or DOWN key is pressed
+     */
+    MultiSelectWithoutContext.prototype.getLastSelectedOrDeselectedIndex = function (correction, focusedIndex) {
+        if (this._lastSelectedOrDeslectedItemIndex === null) {
+            this._lastSelectedOrDeslectedItemIndex = focusedIndex;
+        }
+        return this._lastSelectedOrDeslectedItemIndex !== null ? this._lastSelectedOrDeslectedItemIndex + correction : null;
+    };
     MultiSelectWithoutContext.displayName = 'MultiSelect';
     /** @hidden */
     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({

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-dropdowns',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1698856370,
+    publishDate: 1698919792,
     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'
 };