@ukic/canary-web-components 2.0.0-canary.8 → 3.0.0-canary.1

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
@@ -588,8 +729,7 @@ export class Menu {
         this.parentEl = undefined;
         this.searchMode = "navigation";
         this.selectOnEnter = false;
-        this.size = "default";
-        this.small = false;
+        this.size = "medium";
         this.options = undefined;
         this.value = undefined;
         this.valueField = "value";
@@ -631,7 +771,7 @@ export class Menu {
     }
     componentDidLoad() {
         if (this.isSearchBar &&
-            this.parentEl.disableFilter) {
+            this.parentEl.disableAutoFiltering) {
             this.focusFromSearchKeypress = true;
         }
         onComponentRequiredPropUndefined([
@@ -739,19 +879,18 @@ export class Menu {
         });
     }
     render() {
-        const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, small, open, inputEl, keyboardNav, } = this;
+        const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, open, inputEl, keyboardNav, } = this;
         const selectAllButtonText = `${(value === null || value === void 0 ? void 0 : value.length) === this.ungroupedOptions.length ? "Clear" : "Select"} all`;
         const hasNoResults = this.el.classList.contains("no-results");
         return (h(Host, { class: {
-                "full-width": fullWidth,
-                "no-focus": (inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) === "INPUT" ||
+                "ic-menu-full-width": fullWidth,
+                "ic-menu-no-focus": (inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) === "INPUT" ||
                     hasTimedOut ||
                     isLoading ||
                     hasNoResults,
-                small: small,
-                [size]: true,
-                open: open && options.length !== 0,
-                multiple: this.isMultiSelect,
+                [`ic-menu-${size}`]: true,
+                "ic-menu-open": open && options.length !== 0,
+                "ic-menu-multiple": this.isMultiSelect,
             } }, options.length !== 0 && (h("ul", { id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": this.isMultiSelect ? "true" : "false", tabindex: open && !keyboardNav && (inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) !== "INPUT" ? "0" : "-1", ref: (el) => (this.menu = el), onKeyDown: this.handleMenuKeyDown, onKeyUp: this.handleMenuKeyUp, onBlur: this.handleBlur }, this.getSortedOptions(options).map((option, index) => {
             if (option.children) {
                 if (option.children.length > 0) {
@@ -775,7 +914,7 @@ export class Menu {
             this.isMultiSelect &&
             !isLoading &&
             !hasTimedOut &&
-            !hasNoResults && (h("div", { class: "option-bar" }, h("ic-typography", null, h("p", null, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { class: "select-all-button", "aria-label": `${selectAllButtonText} options for ${inputLabel}`, ref: (el) => (this.selectAllButton = el), variant: "tertiary", onClick: this.handleSelectAllClick, onMouseDown: this.handleSelectAllMouseDown, onBlur: this.handleSelectAllBlur, onFocus: this.handleSelectAllFocus, size: size === "small" ? "small" : "default" }, selectAllButtonText)))));
+            !hasNoResults && (h("div", { class: "option-bar" }, h("ic-typography", null, h("p", null, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { class: "select-all-button", "aria-label": `${selectAllButtonText} options for ${inputLabel}`, ref: (el) => (this.selectAllButton = el), variant: "tertiary", onClick: this.handleSelectAllClick, onMouseDown: this.handleSelectAllMouseDown, onBlur: this.handleSelectAllBlur, onFocus: this.handleSelectAllFocus, size: size === "small" ? "small" : "medium" }, selectAllButtonText)))));
     }
     static get is() { return "ic-menu-with-multi"; }
     static get encapsulation() { return "scoped"; }
@@ -1054,12 +1193,12 @@ export class Menu {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {
                         "IcSizes": {
                             "location": "import",
-                            "path": "@ukic/web-components/dist/types/utils/types",
-                            "id": "../web-components/dist/types/utils/types.d.ts::IcSizes"
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcSizes"
                         }
                     }
                 },
@@ -1071,28 +1210,7 @@ export class Menu {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"default\""
-            },
-            "small": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Set prop `size` to \"small\" instead."
-                        }],
-                    "text": ""
-                },
-                "attribute": "small",
-                "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "\"medium\""
             },
             "options": {
                 "type": "unknown",
@@ -1117,7 +1235,7 @@ export class Menu {
             },
             "value": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
                     "resolved": "string | string[]",