@ukic/web-components 3.21.0 → 3.23.0

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

@@ -3,7 +3,6 @@ import { createPopper, } from "@popperjs/core";
 import Check from "../../assets/check-icon.svg";
 import { getOptionsWithoutGroupTitlesCount, isMacDevice, onComponentRequiredPropUndefined, } from "../../utils/helpers";
 import { sanitizeHTMLString, sanitizeHTMLIconString, } from "../../utils/common-helpers";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export class Menu {
     constructor() {
         this.ACTIVE_DESCENDANT = "aria-activedescendant";
@@ -73,6 +72,30 @@ export class Menu {
          * The custom name for the value field for IcMenuOption.
          */
         this.valueField = "value";
+        /**
+         * @internal If `true`, allows the menu to receive focus when opened.
+         */
+        this.allowMenuFocus = true;
+        this.emitOptionId = (index) => {
+            let option;
+            if (index >= 0 && index < this.ungroupedOptions.length) {
+                option = this.ungroupedOptions[index];
+            }
+            else if (this.ungroupedOptions.length > 0) {
+                option =
+                    index < 0
+                        ? this.ungroupedOptions[this.ungroupedOptions.length - 1]
+                        : this.ungroupedOptions[0];
+            }
+            if (option) {
+                this.menuOptionId.emit({
+                    optionId: this.getOptionId(option[this.valueField]),
+                });
+            }
+            else {
+                this.menuOptionId.emit({ optionId: undefined });
+            }
+        };
         this.handleClearListener = () => {
             this.optionHighlighted = "";
         };
@@ -85,7 +108,9 @@ export class Menu {
             this.menuStateChange.emit({ open, focusInput });
             if (!open) {
                 if (focusInput !== false) {
-                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+                    if (this.allowMenuFocus) {
+                        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+                    }
                     this.preventClickOpen = false;
                 }
                 // Reset optionHighlighted so previously highlighted option doesn't get reselected when Enter pressed
@@ -144,16 +169,42 @@ export class Menu {
             const selectedOptionIndex = this.ungroupedOptions.findIndex((option) => option[this.valueField] === this.value);
             this.keyboardNav = false;
             switch (event.key) {
-                case "ArrowDown":
+                case "ArrowDown": {
                     this.keyboardNav = true;
                     this.arrowBehaviour(event);
+                    const nextIndex = selectedOptionIndex < this.ungroupedOptions.length - 1
+                        ? selectedOptionIndex + 1
+                        : 0;
                     this.setNextOptionValue(selectedOptionIndex);
+                    this.emitOptionId(nextIndex);
                     break;
-                case "ArrowUp":
+                }
+                case "ArrowUp": {
                     this.keyboardNav = true;
                     this.arrowBehaviour(event);
+                    const prevIndex = selectedOptionIndex > 0
+                        ? selectedOptionIndex - 1
+                        : this.ungroupedOptions.length - 1;
                     this.setPreviousOptionValue(selectedOptionIndex);
+                    this.emitOptionId(prevIndex);
+                    break;
+                }
+                case "Home": {
+                    this.keyboardNav = true;
+                    event.preventDefault();
+                    this.arrowBehaviour(event);
+                    this.setNextOptionValue(-1);
+                    this.emitOptionId(0);
+                    break;
+                }
+                case "End": {
+                    this.keyboardNav = true;
+                    event.preventDefault();
+                    this.arrowBehaviour(event);
+                    this.setPreviousOptionValue(this.ungroupedOptions.length);
+                    this.emitOptionId(this.ungroupedOptions.length - 1);
                     break;
+                }
                 case " ":
                 case "Enter":
                     if (event.target.id !== this.CLEAR_BUTTON_ID) {
@@ -353,14 +404,15 @@ export class Menu {
                         if (this.open) {
                             event.stopImmediatePropagation();
                         }
-                        this.handleMenuChange(false);
+                        this.handleMenuChange(false, !this.allowMenuFocus);
                         this.menuOptionId.emit({ optionId: undefined });
                         break;
                     case "a":
                         // Checks if Cmd (meta) key is pressed if Mac device (while excluding meta key on Windows)
                         // Otherwise, if a different OS, checks Ctrl key
-                        if ((isMacDevice() && event.metaKey) ||
-                            (!isMacDevice() && event.ctrlKey)) {
+                        if (this.multiSelect &&
+                            ((isMacDevice() && event.metaKey) ||
+                                (!isMacDevice() && event.ctrlKey))) {
                             this.emitSelectAllEvents();
                             this.lastOptionFocused = null;
                             this.lastOptionSelected = null;
@@ -465,14 +517,6 @@ export class Menu {
         this.handleMouseDown = (event) => {
             event.preventDefault();
         };
-        this.handleMenuKeyDown = (event) => {
-            if (this.activationType === "automatic") {
-                this.autoSetValueOnMenuKeyDown(event);
-            }
-            else if (this.activationType === "manual" && !this.searchBar) {
-                this.manualSetInputValueKeyboardOpen(event);
-            }
-        };
         this.handleMenuKeyUp = (event) => {
             if (event.key === "Tab" && event.shiftKey) {
                 this.preventClickOpen = false;
@@ -488,15 +532,19 @@ export class Menu {
         this.handleSelectAllClick = () => {
             var _a;
             this.keyboardNav = false;
-            (_a = this.menu) === null || _a === void 0 ? void 0 : _a.focus();
+            if (this.allowMenuFocus) {
+                (_a = this.menu) === null || _a === void 0 ? void 0 : _a.focus();
+            }
             this.emitSelectAllEvents();
             this.lastOptionFocused = null;
             this.lastOptionSelected = null;
         };
         this.handleSelectAllBlur = (event) => {
-            var _a;
+            var _a, _b, _c;
             this.host.classList.remove("ic-select-select-all-focused");
-            if (!((_a = this.menu) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget))) {
+            const relatedTarget = event.relatedTarget;
+            if (!((_a = this.menu) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget)) &&
+                !((_c = (_b = this.parentEl) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.contains(relatedTarget))) {
                 this.handleMenuChange(false, false);
             }
         };
@@ -580,7 +628,7 @@ export class Menu {
         // (i.e. you don't have to press Enter select an option - just focus on it)
         // and menu is focused
         this.autoSetValueOnMenuKeyDown = (event) => {
-            var _a, _b;
+            var _a;
             event.cancelBubble = true;
             const selectedOptionIndex = this.ungroupedOptions.findIndex((option) => option[this.valueField] === this.value);
             const isSearchableSelect = !!this.inputEl && this.inputEl.tagName === "INPUT";
@@ -593,6 +641,9 @@ export class Menu {
                     if (!this.hasTimedOut) {
                         event.preventDefault();
                         this.setPreviousOptionValue(selectedOptionIndex);
+                        this.emitOptionId(selectedOptionIndex > 0
+                            ? selectedOptionIndex - 1
+                            : this.ungroupedOptions.length - 1);
                         this.keyboardNav = true;
                     }
                     break;
@@ -600,6 +651,9 @@ export class Menu {
                     if (!this.hasTimedOut) {
                         event.preventDefault();
                         this.setNextOptionValue(selectedOptionIndex);
+                        this.emitOptionId(selectedOptionIndex < this.ungroupedOptions.length - 1
+                            ? selectedOptionIndex + 1
+                            : 0);
                         this.keyboardNav = true;
                     }
                     break;
@@ -607,30 +661,29 @@ export class Menu {
                     this.menuOptionSelect.emit({
                         value: this.ungroupedOptions[0][this.valueField],
                     });
+                    this.emitOptionId(0);
                     this.keyboardNav = true;
                     break;
                 case "End":
                     this.menuOptionSelect.emit({
                         value: this.ungroupedOptions[this.ungroupedOptions.length - 1][this.valueField],
                     });
+                    this.emitOptionId(this.ungroupedOptions.length - 1);
                     this.keyboardNav = true;
                     break;
                 case "Enter":
                     !this.hasTimedOut && this.handleMenuChange(false);
                     break;
                 case "Escape":
-                    this.handleMenuChange(false);
+                    this.handleMenuChange(false, !this.allowMenuFocus);
                     break;
                 case "Backspace":
-                    if (isSearchableSelect) {
-                        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
-                    }
                     break;
                 case "Shift":
                     break;
                 default:
                     if (isSearchableSelect && event.key !== "Tab" && !this.hasTimedOut) {
-                        (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.focus();
+                        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
                     }
                     if (event.key.length === 1) {
                         this.keyboardNav = true;
@@ -669,21 +722,28 @@ export class Menu {
             return menuOptions.findIndex((option) => option[this.valueField] === this.optionHighlighted);
         };
         this.isManualMode = this.activationType === "manual";
-        this.scrollToSelected = (menu) => {
+        // Scroll to highlighted option, or selected option if no highlighted option (i.e. when the menu opens)
+        this.scrollToSelected = () => {
             var _a;
-            const selectedOption = this.selectOnEnter
+            const menu = this.menu;
+            const selectedOption = this.selectOnEnter || this.searchableSelect || this.multiSelect
                 ? this.host.querySelector(`li[data-value="${this.optionHighlighted}"]`)
                 : menu.querySelector(".option[aria-selected='true']");
             if (selectedOption) {
-                const elTop = selectedOption.offsetTop + selectedOption.offsetHeight;
-                if (elTop > menu.scrollTop + menu.offsetHeight ||
-                    elTop < menu.scrollTop + menu.offsetHeight) {
-                    menu.scrollTop = selectedOption.offsetTop;
+                const menuRect = menu.getBoundingClientRect();
+                const optionRect = selectedOption.getBoundingClientRect();
+                if (optionRect.top < menuRect.top) {
+                    menu.scrollTop -= menuRect.top - optionRect.top;
+                }
+                else if (optionRect.bottom > menuRect.bottom) {
+                    menu.scrollTop += optionRect.bottom - menuRect.bottom;
                 }
                 // 'aria-activedescendant' affects screen reader focus
                 // https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/#kbd_focus_activedescendant
                 (_a = this.menu) === null || _a === void 0 ? void 0 : _a.setAttribute(this.ACTIVE_DESCENDANT, selectedOption.id);
-                selectedOption.focus();
+                if (this.allowMenuFocus) {
+                    selectedOption.focus();
+                }
             }
         };
         // Set 'ungroupedOptions' variable and emit its value
@@ -726,7 +786,7 @@ export class Menu {
                     "show-check-icon": showCheckIcon,
                 } }, (option.icon || !option.hideLabel) && (h("div", { class: "option-label" }, option.icon && (h("div", { class: "option-icon", innerHTML: sanitizeHTMLIconString(option.icon), "aria-hidden": "true" })), !option.hideLabel && (h("ic-typography", { variant: "body", "aria-hidden": "true" }, option[this.labelField])))), option.description && (h("ic-typography", { id: `${this.getOptionId(option[this.valueField])}-description`, class: "option-description", variant: "caption", "aria-hidden": "true" }, h("p", null, option.description))), option.element && (h("div", { class: {
                     "option-element": option.icon || !option.hideLabel || option.description,
-                }, innerHTML: sanitizeHTMLString(option.element.component), "aria-hidden": "true" }))), showCheckIcon && h("span", { class: "check-icon", innerHTML: Check })));
+                }, innerHTML: sanitizeHTMLString(option.element.component), "aria-hidden": "true" }))), showCheckIcon && (h("span", { class: "check-icon", innerHTML: Check, "aria-hidden": "true" }))));
         };
         this.displayOption = (option, selected, index, parentOption) => {
             var _a;
@@ -743,11 +803,13 @@ export class Menu {
                     "disabled-option": !!option.disabled,
                     "loading-option": !!option.loading,
                     timeout: !!option.timedOut,
-                }, role: "option", tabindex: open &&
-                    (selected || option[this.valueField] === optionHighlighted) &&
-                    keyboardNav
-                    ? "0"
-                    : "-1", "aria-label": this.getOptionAriaLabel(option, parentOption), "aria-selected": selected ? "true" : "false", "aria-disabled": option.disabled ? "true" : "false", onClick: !option.timedOut && !option.loading
+                }, role: "option", tabindex: !this.allowMenuFocus
+                    ? "-1"
+                    : open &&
+                        (selected || option[this.valueField] === optionHighlighted) &&
+                        keyboardNav
+                        ? "0"
+                        : "-1", "aria-label": this.getOptionAriaLabel(option, parentOption), "aria-selected": selected ? "true" : "false", "aria-disabled": option.disabled ? "true" : "false", onClick: !option.timedOut && !option.loading
                     ? this.handleOptionClick
                     : undefined, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, "data-value": option[this.valueField], "data-label": option[this.labelField] }, ((_a = option.htmlProps) !== null && _a !== void 0 ? _a : {})), option.timedOut ? (h(Fragment, null, h("div", { class: "loading-error-info" }, h("svg", { class: "error-icon-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#000000" }, h("title", null, "Error"), h("g", null, h("path", { d: "M8.77 3L3.5 8.27V15.73L8.77 21H16.23L21.5 15.73V8.27L16.23 3M8.91 7L12.5 10.59L16.09 7L17.5 8.41L13.91 12L17.5 15.59L16.09 17L12.5 13.41L8.91 17L7.5 15.59L11.09 12L7.5 8.41" }))), h("ic-typography", { variant: "label" }, option[this.labelField])), h("ic-button", { size: "small", variant: "tertiary", onClick: this.handleRetry, onKeyDown: this.handleRetryKeyDown, onBlur: this.handleTimeoutBlur, id: "retry-button" }, "Retry"))) : (this.optionContent(option, selected))));
         };
@@ -809,10 +871,7 @@ export class Menu {
                 inputValueInOptions &&
                 this.autofocusOnSelected &&
                 !this.searchableSelect) {
-                this.scrollToSelected(this.menu);
-            }
-            else if (this.selectOnEnter) {
-                this.menu.focus();
+                this.scrollToSelected();
             }
             else if (!!this.optionHighlighted &&
                 !this.focusFromSearchKeypress &&
@@ -820,15 +879,19 @@ export class Menu {
                 const highlightedEl = this.host.querySelector(`li[data-value="${this.optionHighlighted}"]`);
                 if (highlightedEl) {
                     this.menu.setAttribute(this.ACTIVE_DESCENDANT, highlightedEl.id);
-                    highlightedEl.focus();
+                    if (this.allowMenuFocus) {
+                        highlightedEl.focus();
+                    }
                 }
             }
-            else if (this.inputEl && this.inputEl.tagName !== "INPUT") {
+            else if (this.inputEl &&
+                this.inputEl.tagName !== "INPUT" &&
+                this.allowMenuFocus) {
                 this.menu.focus();
             }
         }
-        if (this.menu && this.open && !this.value && this.selectOnEnter) {
-            this.scrollToSelected(this.menu);
+        if (this.menu && this.open) {
+            this.scrollToSelected();
         }
         this.preventMenuFocus = false;
     }
@@ -863,6 +926,19 @@ export class Menu {
             this.manualSetInputValueKeyboardOpen(event);
         }
     }
+    /**
+     * Used alongside activationType
+     * If menu is open and user navigates options via keyboard, emit optionSelect custom event.
+     * @param {KeyboardEvent} event The keyboard event which is available when handleMenuKeydown is invoked.
+     */
+    async handleMenuKeyDown(event) {
+        if (this.activationType === "automatic") {
+            this.autoSetValueOnMenuKeyDown(event);
+        }
+        else if (this.activationType === "manual" && !this.searchBar) {
+            this.manualSetInputValueKeyboardOpen(event);
+        }
+    }
     /**
      * @internal Used to highlight the first option in the menu.
      */
@@ -916,7 +992,7 @@ export class Menu {
         const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, open, inputEl, keyboardNav, parentEl, SEARCH_BAR_TAG, multiSelect, } = this;
         const selectAllButtonText = `${(value === null || value === void 0 ? void 0 : value.length) === this.ungroupedOptions.length ? "Clear" : "Select"} all`;
         const hasNoResults = this.host.classList.contains("no-results");
-        return (h(Host, { key: 'a2934ccf16727c0f37d89f77186a58b5ba8e25e1', class: {
+        return (h(Host, { key: '8b0e06f14c1979c3658e6e13fca3e4c6828c795d', class: {
                 "ic-menu-full-width": !!fullWidth,
                 "ic-menu-no-focus": ((inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) === "INPUT" &&
                     (parentEl === null || parentEl === void 0 ? void 0 : parentEl.tagName) !== SEARCH_BAR_TAG) ||
@@ -925,12 +1001,16 @@ export class Menu {
                 [`ic-menu-${size}`]: true,
                 "ic-menu-open": open && options.length !== 0,
                 "ic-menu-multiple": multiSelect,
-            } }, options.length !== 0 && (h("ul", { key: '7ba54b5a6c29e2ca30f893806d9ee076324469bf', id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": multiSelect ? "true" : "false", tabindex: open &&
-                !keyboardNav &&
-                ((inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) !== "INPUT" ||
-                    (parentEl === null || parentEl === void 0 ? void 0 : parentEl.tagName) === SEARCH_BAR_TAG)
-                ? "0"
-                : "-1", ref: (el) => (this.menu = el), onKeyDown: this.handleMenuKeyDown, onKeyUp: this.handleMenuKeyUp, onBlur: this.handleBlur }, this.getSortedOptions(options).map((option, index) => {
+            } }, options.length !== 0 && (h("ul", { key: '5af8ebaf798f09d020cab17adf4ef04e0fe2f9d4', id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": multiSelect ? "true" : "false", "aria-activedescendant": this.optionHighlighted
+                ? this.getOptionId(this.optionHighlighted)
+                : undefined, tabindex: !this.allowMenuFocus
+                ? "-1"
+                : open &&
+                    !keyboardNav &&
+                    ((inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) !== "INPUT" ||
+                        (parentEl === null || parentEl === void 0 ? void 0 : parentEl.tagName) === SEARCH_BAR_TAG)
+                    ? "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) {
                     return (h("div", null, h("ic-typography", { class: "option-group-title", role: "presentation", variant: "subtitle-small" }, h("p", null, option[this.labelField])), option.children.map((childOption) => childOption[this.labelField] &&
@@ -953,7 +1033,7 @@ export class Menu {
             multiSelect &&
             !isLoading &&
             !hasTimedOut &&
-            !hasNoResults && (h("div", { key: '0cdb01a79cabee7e3a18d16d0372b67a759b0af4', class: "option-bar" }, h("ic-typography", { key: '05d91feb3af7fb333972edf4dece4d337af15de4' }, h("p", { key: 'e7238b5cf18695dd705ad1fb71c1ab72dbde3fc2' }, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { key: '4aaa496abb80408776573f5ae26cf1adf62d7ed3', 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)))));
+            !hasNoResults && (h("div", { key: 'f1a670781a41df910d8d55d2a956e062faf5a425', class: "option-bar" }, h("ic-typography", { key: '9687b26a0a275e9a6cff54180f2962d836ef4262' }, h("p", { key: '33e219ebba6ad3eb4ed60d77d9ed86551cb93a48' }, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { key: '05e39e54ef176fb303ba59dcc3b91745cf38deef', 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"; }
     static get encapsulation() { return "scoped"; }
@@ -1409,6 +1489,29 @@ export class Menu {
                 "attribute": "value-field",
                 "reflect": false,
                 "defaultValue": "\"value\""
+            },
+            "allowMenuFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "If `true`, allows the menu to receive focus when opened."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "allow-menu-focus",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }
@@ -1670,6 +1773,34 @@ export class Menu {
                         }]
                 }
             },
+            "handleMenuKeyDown": {
+                "complexType": {
+                    "signature": "(event: KeyboardEvent) => Promise<void>",
+                    "parameters": [{
+                            "name": "event",
+                            "type": "KeyboardEvent",
+                            "docs": "The keyboard event which is available when handleMenuKeydown is invoked."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KeyboardEvent": {
+                            "location": "global",
+                            "id": "global::KeyboardEvent"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Used alongside activationType\nIf menu is open and user navigates options via keyboard, emit optionSelect custom event.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "event The keyboard event which is available when handleMenuKeydown is invoked."
+                        }]
+                }
+            },
             "handleSetFirstOption": {
                 "complexType": {
                     "signature": "() => Promise<void>",