@ukic/web-components 3.25.0 → 3.27.0

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

@@ -121,30 +121,34 @@ export class Menu {
             }
         };
         this.setNextOptionValue = (selectedOptionIndex) => {
-            if (this.ungroupedOptions[selectedOptionIndex + 1]) {
-                this.menuOptionSelect.emit({
-                    value: this.ungroupedOptions[selectedOptionIndex + 1][this.valueField],
-                    optionId: this.getOptionId(this.ungroupedOptions[selectedOptionIndex + 1][this.valueField]),
+            const nextIndex = selectedOptionIndex % this.ungroupedOptions.length;
+            const nextOption = this.ungroupedOptions[nextIndex];
+            this.setHighlightedOption(nextIndex);
+            if (nextOption.disabled) {
+                this.menuOptionId.emit({
+                    optionId: this.getOptionId(nextOption[this.valueField]),
                 });
             }
             else {
                 this.menuOptionSelect.emit({
-                    value: this.ungroupedOptions[0][this.valueField],
-                    optionId: this.getOptionId(this.ungroupedOptions[0][this.valueField]),
+                    value: nextOption[this.valueField],
+                    optionId: this.getOptionId(nextOption[this.valueField]),
                 });
             }
         };
         this.setPreviousOptionValue = (selectedOptionIndex) => {
-            if (this.ungroupedOptions[selectedOptionIndex - 1]) {
-                this.menuOptionSelect.emit({
-                    value: this.ungroupedOptions[selectedOptionIndex - 1][this.valueField],
-                    optionId: this.getOptionId(this.ungroupedOptions[selectedOptionIndex - 1][this.valueField]),
+            const prevIndex = selectedOptionIndex % this.ungroupedOptions.length;
+            const prevOption = this.ungroupedOptions[prevIndex];
+            this.setHighlightedOption(prevIndex);
+            if (prevOption.disabled) {
+                this.menuOptionId.emit({
+                    optionId: this.getOptionId(prevOption[this.valueField]),
                 });
             }
             else {
                 this.menuOptionSelect.emit({
-                    value: this.ungroupedOptions[this.ungroupedOptions.length - 1][this.valueField],
-                    optionId: this.getOptionId(this.ungroupedOptions[this.ungroupedOptions.length - 1][this.valueField]),
+                    value: prevOption[this.valueField],
+                    optionId: this.getOptionId(prevOption[this.valueField]),
                 });
             }
         };
@@ -175,7 +179,7 @@ export class Menu {
                     const nextIndex = selectedOptionIndex < this.ungroupedOptions.length - 1
                         ? selectedOptionIndex + 1
                         : 0;
-                    this.setNextOptionValue(selectedOptionIndex);
+                    this.setNextOptionValue(nextIndex);
                     this.emitOptionId(nextIndex);
                     break;
                 }
@@ -185,7 +189,7 @@ export class Menu {
                     const prevIndex = selectedOptionIndex > 0
                         ? selectedOptionIndex - 1
                         : this.ungroupedOptions.length - 1;
-                    this.setPreviousOptionValue(selectedOptionIndex);
+                    this.setPreviousOptionValue(prevIndex);
                     this.emitOptionId(prevIndex);
                     break;
                 }
@@ -224,6 +228,7 @@ export class Menu {
                         if (this.searchBar &&
                             options[highlightedOptionIndex].disabled === true) {
                             this.disabledOptionSelected = true;
+                            this.optionHighlighted = undefined;
                         }
                         else {
                             this.setInputValue(highlightedOptionIndex);
@@ -449,14 +454,15 @@ export class Menu {
         };
         this.setInputValue = (highlightedOptionIndex) => {
             const menuOptions = this.getMenuOptions();
-            if (menuOptions[highlightedOptionIndex] !== undefined) {
+            if (menuOptions[highlightedOptionIndex] !== undefined &&
+                !menuOptions[highlightedOptionIndex].disabled) {
                 this.menuOptionSelect.emit({
                     value: menuOptions[highlightedOptionIndex][this.valueField],
                 });
-                if (this.closeOnSelect) {
-                    this.optionHighlighted = undefined;
-                    this.menuOptionId.emit({ optionId: undefined });
-                }
+            }
+            if (this.closeOnSelect) {
+                this.optionHighlighted = undefined;
+                this.menuOptionId.emit({ optionId: undefined });
             }
             if (this.closeOnSelect) {
                 if (!this.hasTimedOut) {
@@ -613,11 +619,12 @@ export class Menu {
             var _a, _b;
             // Select all if there is either no value or not all options are selected
             // 'true' means select all, 'false' means clear all
+            const enabledOptionsCount = this.ungroupedOptions.filter((option) => !option.disabled).length;
             this.menuOptionSelectAll.emit({
-                select: !this.value || !(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === this.ungroupedOptions.length),
+                select: !this.value || !(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === enabledOptionsCount),
             });
-            // Emit clear event if all options are selected
-            if (((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) === this.ungroupedOptions.length) {
+            // Emit clear event if all non-disabled options are selected
+            if (((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) === enabledOptionsCount) {
                 this.icClear.emit();
             }
         };
@@ -630,7 +637,10 @@ export class Menu {
         this.autoSetValueOnMenuKeyDown = (event) => {
             var _a;
             event.cancelBubble = true;
-            const selectedOptionIndex = this.ungroupedOptions.findIndex((option) => option[this.valueField] === this.value);
+            const highlightedOptionIndex = this.getOptionHighlightedIndex();
+            const selectedOptionIndex = highlightedOptionIndex >= 0
+                ? highlightedOptionIndex
+                : this.ungroupedOptions.findIndex((option) => option[this.valueField] === this.value);
             const isSearchableSelect = !!this.inputEl && this.inputEl.tagName === "INPUT";
             this.keyboardNav = false;
             switch (event.key) {
@@ -640,20 +650,22 @@ export class Menu {
                 case "ArrowUp":
                     if (!this.hasTimedOut) {
                         event.preventDefault();
-                        this.setPreviousOptionValue(selectedOptionIndex);
-                        this.emitOptionId(selectedOptionIndex > 0
+                        const prevIndex = selectedOptionIndex > 0
                             ? selectedOptionIndex - 1
-                            : this.ungroupedOptions.length - 1);
+                            : this.ungroupedOptions.length - 1;
+                        this.setPreviousOptionValue(prevIndex);
+                        this.emitOptionId(prevIndex);
                         this.keyboardNav = true;
                     }
                     break;
                 case "ArrowDown":
                     if (!this.hasTimedOut) {
                         event.preventDefault();
-                        this.setNextOptionValue(selectedOptionIndex);
-                        this.emitOptionId(selectedOptionIndex < this.ungroupedOptions.length - 1
+                        const nextIndex = selectedOptionIndex < this.ungroupedOptions.length - 1
                             ? selectedOptionIndex + 1
-                            : 0);
+                            : 0;
+                        this.setNextOptionValue(nextIndex);
+                        this.emitOptionId(nextIndex);
                         this.keyboardNav = true;
                     }
                     break;
@@ -754,7 +766,7 @@ export class Menu {
                     if (option.children) {
                         option.children.map((option) => !option.disabled && this.ungroupedOptions.push(option));
                     }
-                    else if (!option.disabled) {
+                    else {
                         this.ungroupedOptions.push(option);
                     }
                 });
@@ -784,6 +796,9 @@ export class Menu {
             return (h(Fragment, null, option.loading && h("ic-loading-indicator", { size: "icon" }), h("div", { class: {
                     "option-text-container": true,
                     "show-check-icon": showCheckIcon,
+                    "focus-border": (this.keyboardNav || this.initialOptionsListRender) &&
+                        option[this.valueField] === this.optionHighlighted &&
+                        !!option.disabled,
                 } }, (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, "aria-hidden": "true" }))));
@@ -795,8 +810,18 @@ export class Menu {
                     option: true,
                     "focused-option": isManualMode
                         ? (keyboardNav || initialOptionsListRender) &&
-                            option[this.valueField] === optionHighlighted
-                        : keyboardNav && selected,
+                            option[this.valueField] === optionHighlighted &&
+                            !option.disabled
+                        : keyboardNav &&
+                            option[this.valueField] === optionHighlighted &&
+                            !option.disabled,
+                    "focus-disabled": isManualMode
+                        ? (keyboardNav || initialOptionsListRender) &&
+                            option[this.valueField] === optionHighlighted &&
+                            !!option.disabled
+                        : keyboardNav &&
+                            option[this.valueField] === optionHighlighted &&
+                            !!option.disabled,
                     "last-recommended-option": !!(option.recommended &&
                         options[index + 1] &&
                         !options[index + 1].recommended),
@@ -990,9 +1015,10 @@ export class Menu {
     }
     render() {
         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 enabledOptionsCount = this.ungroupedOptions.filter((option) => !option.disabled).length;
+        const selectAllButtonText = `${(value === null || value === void 0 ? void 0 : value.length) === enabledOptionsCount ? "Clear" : "Select"} all`;
         const hasNoResults = this.host.classList.contains("no-results");
-        return (h(Host, { key: 'c8002b0985f20231f9e24b2e446a67cf3230be7e', class: {
+        return (h(Host, { key: 'f2126f99757d13606827ea1eac7c08b023b97bae', 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) ||
@@ -1001,7 +1027,7 @@ export class Menu {
                 [`ic-menu-${size}`]: true,
                 "ic-menu-open": open && options.length !== 0,
                 "ic-menu-multiple": multiSelect,
-            } }, options.length !== 0 && (h("ul", { key: 'c7f0134bd0f14aae16fc4f2f0ba20f72553e4af5', id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": multiSelect ? "true" : "false", "aria-activedescendant": this.optionHighlighted
+            } }, options.length !== 0 && (h("ul", { key: '9b41a2c0ab9d6b08dca829db341614b248675050', 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"
@@ -1033,7 +1059,7 @@ export class Menu {
             multiSelect &&
             !isLoading &&
             !hasTimedOut &&
-            !hasNoResults && (h("div", { key: '6dc5d80d88ac368c6274e709ba5a8a1dc79bf9e8', class: "option-bar" }, h("ic-typography", { key: '5a62bb37a7c338c00e296519077a8254c39c1c4a' }, h("p", { key: 'd5209b3fa671a87fc4ad2039732315d51d042c9f' }, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { key: '543d14896d83e275257adf6808a4f855b694a5d4', 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: '7440008eccba1fc099d09ae3916e0d186686d59e', class: "option-bar" }, h("ic-typography", { key: '802bd46a5d028a541060eb4cc57c2c4607cb1b86' }, h("p", { key: '17a482e5bbff099b44550f9800980a649a319358' }, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { key: '5aa400fd2be98bc038400b699c33bd2b1814cb5d', 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"; }