@ukic/canary-web-components 2.0.0-canary.13 → 2.0.0-canary.15

package/dist/collection/components/ic-menu-with-multi/ic-menu.js

@@ -14,9 +14,12 @@ export class Menu {
         this.isMultiSelect = false;
         this.isSearchBar = false;
         this.isSearchableSelect = false;
+        this.lastOptionSelected = null; // Index of last option selected
+        this.lastOptionFocused = null; // Index of last option focused
         this.multiOptionClicked = null;
         this.preventClickOpen = false; // Prevents menu re-opening immediately after it is closed on blur when clicking input.
         this.preventMenuFocus = false; // (When multiple) ensures focus moves straight to select all button from menu.
+        this.shiftPressed = false;
         this.ungroupedOptions = [];
         this.handleClearListener = () => {
             this.optionHighlighted = "";
@@ -136,7 +139,6 @@ export class Menu {
                         }
                         else {
                             this.setInputValue(highlightedOptionIndex);
-                            this.value = options[highlightedOptionIndex][this.valueField];
                         }
                     }
                 }
@@ -149,16 +151,38 @@ export class Menu {
                 this.handleMenuChange(true);
             }
         };
+        // Check if option is selected based on the index of the option
+        this.isOptionSelected = (index) => {
+            const menuOptions = this.getMenuOptions();
+            return this.value
+                ? this.value.includes(menuOptions[index][this.valueField])
+                : false;
+        };
+        // Deselect currently selected options when shift pressed, but keep certain options selected
+        this.deselectSelectedOptions = (optionsToKeepSelected) => {
+            const menuOptions = this.getMenuOptions();
+            if (this.value) {
+                const selectedOptionIndexes = this.value.map((value) => {
+                    return menuOptions.findIndex((option) => option[this.valueField] === value);
+                });
+                // Call setInputValue (which toggles the selected state) on options that need to be deselected
+                selectedOptionIndexes.forEach((index) => !optionsToKeepSelected.includes(index) && this.setInputValue(index));
+            }
+        };
         // Determines keyboard behaviour when selection is manual (i.e. when you have to press Enter to select an option)
         this.manualSetInputValueKeyboardOpen = (event) => {
             const menuOptions = this.getMenuOptions();
-            this.keyboardNav = false;
-            const highlightedOptionIndex = menuOptions.findIndex((option) => option[this.valueField] === this.optionHighlighted);
+            // Prevent focus disappearing on currently focused option when Shift / Cmd / Ctrl pressed
+            // (i.e. when user is likely in the middle of executing a keyboard combination to select options)
+            if (!(event.shiftKey || event.metaKey || event.ctrlKey)) {
+                this.keyboardNav = false;
+            }
+            const highlightedOptionIndex = this.getOptionHighlightedIndex();
             const clickedMultiOptionIndex = menuOptions.findIndex((option) => option[this.valueField] === this.multiOptionClicked);
             const getOptionId = (index) => { var _a; return (_a = Array.from(this.el.querySelectorAll("li"))[index]) === null || _a === void 0 ? void 0 : _a.id; };
             // Space press should be equivalent to Enter when multi-select
             if (event.key === " " && this.isMultiSelect) {
-                this.selectHighlightedOption(event.target, menuOptions, highlightedOptionIndex);
+                this.handleOptionSelect(event, highlightedOptionIndex);
             }
             else {
                 switch (event.key) {
@@ -171,18 +195,32 @@ export class Menu {
                             this.setHighlightedOption(clickedMultiOptionIndex);
                             this.multiOptionClicked = null;
                         }
-                        else if (highlightedOptionIndex < menuOptions.length - 1) {
-                            this.setHighlightedOption(highlightedOptionIndex + 1);
-                            this.menuOptionId.emit({
-                                optionId: getOptionId(highlightedOptionIndex + 1),
-                            });
-                        }
                         else {
-                            this.setHighlightedOption(0);
-                            this.menuOptionId.emit({
-                                optionId: getOptionId(0),
-                            });
+                            this.handleSingleShiftSelect(event, highlightedOptionIndex, menuOptions);
+                            if (highlightedOptionIndex < menuOptions.length - 1) {
+                                this.setHighlightedOption(highlightedOptionIndex + 1);
+                                this.menuOptionId.emit({
+                                    optionId: getOptionId(highlightedOptionIndex + 1),
+                                });
+                                this.handleSingleShiftSelect(event, highlightedOptionIndex + 1, menuOptions);
+                            }
+                            else {
+                                this.setHighlightedOption(0);
+                                this.menuOptionId.emit({
+                                    optionId: getOptionId(0),
+                                });
+                                this.handleSingleShiftSelect(event, 0, menuOptions);
+                            }
+                            // Deselect currently selected options if arrow was pressed for first time after shift is held
+                            if (this.isMultiSelect && this.shiftPressed) {
+                                this.deselectSelectedOptions([
+                                    highlightedOptionIndex,
+                                    this.getOptionHighlightedIndex(),
+                                ]);
+                                this.shiftPressed = false;
+                            }
                         }
+                        this.lastOptionFocused = this.getOptionHighlightedIndex();
                         this.preventIncorrectTabOrder = false;
                         this.focusFromSearchKeypress = false;
                         break;
@@ -195,40 +233,68 @@ export class Menu {
                             this.setHighlightedOption(clickedMultiOptionIndex);
                             this.multiOptionClicked = null;
                         }
-                        else if (highlightedOptionIndex <= 0 ||
-                            highlightedOptionIndex > menuOptions.length + 1) {
-                            this.setHighlightedOption(menuOptions.length - 1);
-                            this.menuOptionId.emit({
-                                optionId: getOptionId(menuOptions.length - 1),
-                            });
-                        }
                         else {
-                            this.setHighlightedOption(highlightedOptionIndex - 1);
-                            this.menuOptionId.emit({
-                                optionId: getOptionId(highlightedOptionIndex - 1),
-                            });
+                            this.handleSingleShiftSelect(event, highlightedOptionIndex, menuOptions);
+                            if (highlightedOptionIndex <= 0 ||
+                                highlightedOptionIndex > menuOptions.length + 1) {
+                                this.setHighlightedOption(menuOptions.length - 1);
+                                this.menuOptionId.emit({
+                                    optionId: getOptionId(menuOptions.length - 1),
+                                });
+                                this.handleSingleShiftSelect(event, menuOptions.length - 1, menuOptions);
+                            }
+                            else {
+                                this.setHighlightedOption(highlightedOptionIndex - 1);
+                                this.menuOptionId.emit({
+                                    optionId: getOptionId(highlightedOptionIndex - 1),
+                                });
+                                this.handleSingleShiftSelect(event, highlightedOptionIndex - 1, menuOptions);
+                            }
+                            // Deselect currently selected options if arrow was pressed for first time after shift is held
+                            if (this.isMultiSelect && this.shiftPressed) {
+                                this.deselectSelectedOptions([
+                                    highlightedOptionIndex,
+                                    this.getOptionHighlightedIndex(),
+                                ]);
+                                this.shiftPressed = false;
+                            }
                         }
+                        this.lastOptionFocused = this.getOptionHighlightedIndex();
                         this.preventIncorrectTabOrder = false;
                         this.focusFromSearchKeypress = false;
                         break;
-                    case "Home":
+                    case "Home": {
+                        const startOptionIndex = 0;
                         this.keyboardNav = true;
                         event.preventDefault();
                         this.arrowBehaviour(event);
-                        this.setHighlightedOption(0);
+                        this.setHighlightedOption(startOptionIndex);
                         this.menuOptionId.emit({
-                            optionId: getOptionId(0),
+                            optionId: getOptionId(startOptionIndex),
                         });
+                        if (event.shiftKey && event.ctrlKey) {
+                            this.handleMultipleShiftSelect(startOptionIndex);
+                        }
+                        this.lastOptionFocused = startOptionIndex;
+                        this.lastOptionSelected = startOptionIndex;
                         break;
-                    case "End":
+                    }
+                    case "End": {
+                        const endOptionIndex = menuOptions.length - 1;
                         this.keyboardNav = true;
                         event.preventDefault();
                         this.arrowBehaviour(event);
-                        this.setHighlightedOption(menuOptions.length - 1);
+                        this.setHighlightedOption(endOptionIndex);
                         this.menuOptionId.emit({
-                            optionId: getOptionId(menuOptions.length - 1),
+                            optionId: getOptionId(endOptionIndex),
                         });
+                        if (event.shiftKey && event.ctrlKey) {
+                            this.handleMultipleShiftSelect(endOptionIndex);
+                        }
+                        this.lastOptionFocused = endOptionIndex;
+                        this.lastOptionSelected = endOptionIndex;
                         break;
+                    }
                     case " ":
                         if (this.isSearchBar || this.isSearchableSelect) {
                             break;
@@ -241,7 +307,7 @@ export class Menu {
                         break;
                     case "Enter":
                         event.preventDefault();
-                        this.selectHighlightedOption(event.target, menuOptions, highlightedOptionIndex);
+                        this.handleOptionSelect(event, highlightedOptionIndex);
                         break;
                     case "Escape":
                         if (this.open) {
@@ -256,10 +322,15 @@ export class Menu {
                         if ((isMacDevice() && event.metaKey) ||
                             (!isMacDevice() && event.ctrlKey)) {
                             this.emitSelectAll();
+                            this.lastOptionFocused = null;
+                            this.lastOptionSelected = null;
                         }
                         break;
                     case "Shift":
                     case "Tab":
+                        if (event.key === "Shift") {
+                            this.shiftPressed = true;
+                        }
                         if (this.isSearchBar) {
                             this.keyboardNav = true;
                         }
@@ -325,14 +396,17 @@ export class Menu {
         };
         this.handleOptionClick = (event) => {
             const { value, label } = event.target.dataset;
-            this.menuOptionSelect.emit({ value, label });
-            this.optionHighlighted = undefined;
             if (this.isMultiSelect) {
+                const menuOptions = this.getMenuOptions();
+                const selectedOptionIndex = menuOptions.findIndex((option) => option.value === value);
+                this.handleOptionSelect(event, selectedOptionIndex, true);
                 this.multiOptionClicked = value;
             }
             else {
+                this.menuOptionSelect.emit({ value, label });
                 this.handleMenuChange(false);
             }
+            this.optionHighlighted = undefined;
         };
         this.handleRetry = () => {
             this.retryButtonClicked.emit({ value: this.value });
@@ -352,12 +426,16 @@ export class Menu {
                     event.relatedTarget === this.selectAllButton)) {
                     this.handleMenuChange(false, this.hasPreviouslyBlurred);
                     this.menu.removeAttribute(this.activeDescendantAttr);
+                    this.lastOptionFocused = null;
+                    this.lastOptionSelected = null;
                 }
             }
             else {
                 this.handleMenuChange(false);
                 this.preventClickOpen = true;
                 this.menu.removeAttribute(this.activeDescendantAttr);
+                this.lastOptionFocused = null;
+                this.lastOptionSelected = null;
             }
             if (!this.isSearchBar)
                 this.hasPreviouslyBlurred = !!event.relatedTarget;
@@ -381,11 +459,16 @@ export class Menu {
                 this.disabledOptionSelected = false;
                 event.stopImmediatePropagation();
             }
+            if (event.key === "Shift") {
+                this.shiftPressed = false;
+            }
         };
         this.handleSelectAllClick = () => {
             this.keyboardNav = false;
             this.menu.focus();
             this.emitSelectAll();
+            this.lastOptionFocused = null;
+            this.lastOptionSelected = null;
         };
         this.handleSelectAllBlur = (event) => {
             this.el.classList.remove("select-all-focused");
@@ -395,11 +478,65 @@ export class Menu {
         };
         this.handleSelectAllFocus = () => {
             this.el.classList.add("select-all-focused");
+            this.lastOptionFocused = null;
+            this.lastOptionSelected = null;
         };
         // Fix for Safari - select all button click was causing menu to close
         this.handleSelectAllMouseDown = (event) => {
             event.preventDefault();
         };
+        // When shift key is being used to select contiguous options one by one on a multi-select
+        // I.e. holding shift and pressing up and down arrow keys
+        this.handleSingleShiftSelect = (event, optionToSelectIndex, options) => {
+            if (this.isMultiSelect &&
+                event.shiftKey &&
+                !this.isOptionSelected(optionToSelectIndex)) {
+                this.selectHighlightedOption(event.target, options, optionToSelectIndex);
+                this.lastOptionSelected = optionToSelectIndex;
+            }
+        };
+        // When shift key is being used to select multiple options at once on a multi-select
+        // I.e. holding shift when selecting another option
+        this.handleMultipleShiftSelect = (lastOptionInSelection, useFocusForSelection = false, firstOptionSelected = null) => {
+            this.shiftPressed = false;
+            const firstOptionInSelection = firstOptionSelected === null
+                ? this.getFirstOptionInSelection(useFocusForSelection)
+                : firstOptionSelected;
+            if (firstOptionInSelection !== null) {
+                const optionsToSelect = [];
+                if (firstOptionInSelection < lastOptionInSelection) {
+                    for (let i = firstOptionInSelection; i < lastOptionInSelection + 1; i++) {
+                        optionsToSelect.push(i);
+                    }
+                }
+                else {
+                    for (let i = firstOptionInSelection; i > lastOptionInSelection - 1; i--) {
+                        optionsToSelect.push(i);
+                    }
+                }
+                optionsToSelect.forEach((optionIndex) => !this.isOptionSelected(optionIndex) && this.setInputValue(optionIndex));
+                this.deselectSelectedOptions(optionsToSelect);
+            }
+        };
+        this.handleOptionSelect = (event, optionIndex, useFocusForSelection = false) => {
+            const menuOptions = this.getMenuOptions();
+            const firstOptionInSelection = this.getFirstOptionInSelection(useFocusForSelection);
+            if (event.shiftKey && firstOptionInSelection !== null) {
+                this.handleMultipleShiftSelect(optionIndex, useFocusForSelection, firstOptionInSelection);
+            }
+            else {
+                this.selectHighlightedOption(event.target, menuOptions, optionIndex);
+            }
+            this.lastOptionFocused = optionIndex;
+            this.lastOptionSelected = optionIndex;
+        };
+        this.getFirstOptionInSelection = (useFocusForSelection) => {
+            return useFocusForSelection && this.lastOptionFocused !== null
+                ? this.lastOptionFocused
+                : this.lastOptionSelected !== null
+                    ? this.lastOptionSelected
+                    : null;
+        };
         this.emitSelectAll = () => {
             var _a;
             // Select all if there is either no value or not all options are selected
@@ -498,6 +635,10 @@ export class Menu {
             }
             return sorted;
         };
+        this.getOptionHighlightedIndex = () => {
+            const menuOptions = this.getMenuOptions();
+            return menuOptions.findIndex((option) => option[this.valueField] === this.optionHighlighted);
+        };
         this.isManualMode = this.activationType === "manual";
         this.scrollToSelected = (menu) => {
             const selectedOption = this.selectOnEnter
@@ -1117,7 +1258,7 @@ export class Menu {
             },
             "value": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
                     "resolved": "string | string[]",