@ukic/web-components 3.0.0-alpha.9 → 3.1.0

package/dist/components/ic-menu2.js

@@ -7,6 +7,7 @@ import { c as createPopper, d as defineCustomElement$2 } from './ic-tooltip2.js'
 import { d as defineCustomElement$1 } from './ic-typography2.js';
 
 const icMenuCss = "html.sc-ic-menu{line-height:1.15;-webkit-text-size-adjust:100%}body.sc-ic-menu{margin:0}main.sc-ic-menu{display:block}h1.sc-ic-menu{font-size:2em;margin:0.67em 0}hr.sc-ic-menu{box-sizing:content-box;height:0;overflow:visible}pre.sc-ic-menu{font-family:monospace, monospace;font-size:1em}a.sc-ic-menu{background-color:transparent}abbr[title].sc-ic-menu{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b.sc-ic-menu,strong.sc-ic-menu{font-weight:bolder}code.sc-ic-menu,kbd.sc-ic-menu,samp.sc-ic-menu{font-family:monospace, monospace;font-size:1em}small.sc-ic-menu{font-size:80%}sub.sc-ic-menu,sup.sc-ic-menu{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub.sc-ic-menu{bottom:-0.25em}sup.sc-ic-menu{top:-0.5em}img.sc-ic-menu{border-style:none}button.sc-ic-menu,input.sc-ic-menu,optgroup.sc-ic-menu,select.sc-ic-menu,textarea.sc-ic-menu{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button.sc-ic-menu,input.sc-ic-menu{overflow:visible}button.sc-ic-menu,select.sc-ic-menu{text-transform:none}button.sc-ic-menu,[type=\"button\"].sc-ic-menu,[type=\"reset\"].sc-ic-menu,[type=\"submit\"].sc-ic-menu{-webkit-appearance:button}button.sc-ic-menu::-moz-focus-inner,[type=\"button\"].sc-ic-menu::-moz-focus-inner,[type=\"reset\"].sc-ic-menu::-moz-focus-inner,[type=\"submit\"].sc-ic-menu::-moz-focus-inner{border-style:none;padding:0}button.sc-ic-menu:-moz-focusring,[type=\"button\"].sc-ic-menu:-moz-focusring,[type=\"reset\"].sc-ic-menu:-moz-focusring,[type=\"submit\"].sc-ic-menu:-moz-focusring{outline:1px dotted ButtonText}fieldset.sc-ic-menu{padding:0.35em 0.75em 0.625em}legend.sc-ic-menu{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress.sc-ic-menu{vertical-align:baseline}textarea.sc-ic-menu{overflow:auto}[type=\"checkbox\"].sc-ic-menu,[type=\"radio\"].sc-ic-menu{box-sizing:border-box;padding:0}[type=\"number\"].sc-ic-menu::-webkit-inner-spin-button,[type=\"number\"].sc-ic-menu::-webkit-outer-spin-button{height:auto}[type=\"search\"].sc-ic-menu{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"].sc-ic-menu::-webkit-search-decoration{-webkit-appearance:none}.sc-ic-menu::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details.sc-ic-menu{display:block}summary.sc-ic-menu{display:list-item}template.sc-ic-menu{display:none}[hidden].sc-ic-menu{display:none}html.sc-ic-menu,body.sc-ic-menu,div.sc-ic-menu,span.sc-ic-menu,applet.sc-ic-menu,object.sc-ic-menu,iframe.sc-ic-menu,h1.sc-ic-menu,h2.sc-ic-menu,h3.sc-ic-menu,h4.sc-ic-menu,h5.sc-ic-menu,h6.sc-ic-menu,p.sc-ic-menu,blockquote.sc-ic-menu,pre.sc-ic-menu,a.sc-ic-menu,abbr.sc-ic-menu,acronym.sc-ic-menu,address.sc-ic-menu,big.sc-ic-menu,cite.sc-ic-menu,code.sc-ic-menu,del.sc-ic-menu,dfn.sc-ic-menu,em.sc-ic-menu,img.sc-ic-menu,ins.sc-ic-menu,kbd.sc-ic-menu,q.sc-ic-menu,s.sc-ic-menu,samp.sc-ic-menu,small.sc-ic-menu,strike.sc-ic-menu,strong.sc-ic-menu,sub.sc-ic-menu,sup.sc-ic-menu,tt.sc-ic-menu,var.sc-ic-menu,b.sc-ic-menu,u.sc-ic-menu,i.sc-ic-menu,center.sc-ic-menu,dl.sc-ic-menu,dt.sc-ic-menu,dd.sc-ic-menu,ol.sc-ic-menu,ul.sc-ic-menu,li.sc-ic-menu,fieldset.sc-ic-menu,form.sc-ic-menu,label.sc-ic-menu,legend.sc-ic-menu,table.sc-ic-menu,caption.sc-ic-menu,tbody.sc-ic-menu,tfoot.sc-ic-menu,thead.sc-ic-menu,tr.sc-ic-menu,th.sc-ic-menu,td.sc-ic-menu,article.sc-ic-menu,aside.sc-ic-menu,canvas.sc-ic-menu,details.sc-ic-menu,embed.sc-ic-menu,figure.sc-ic-menu,figcaption.sc-ic-menu,footer.sc-ic-menu,header.sc-ic-menu,hgroup.sc-ic-menu,menu.sc-ic-menu,nav.sc-ic-menu,output.sc-ic-menu,ruby.sc-ic-menu,section.sc-ic-menu,summary.sc-ic-menu,time.sc-ic-menu,mark.sc-ic-menu,audio.sc-ic-menu,video.sc-ic-menu{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){.ic-menu-open.sc-ic-menu-h .menu.sc-ic-menu{transition:max-height var(--ic-transition-duration-slow)}}.sc-ic-menu-h{max-height:0;width:var(--menu-width, var(--input-width, 20rem));color:var(--menu-item-text-color, var(--ic-menu-list-option-text-color));--ic-typography-color:var(\n    --menu-item-text-color,\n    var(--ic-menu-list-option-text-color)\n  );background-color:var(\n    --menu-bg-color,\n    var(--ic-menu-list-option-background-color)\n  );position:relative;z-index:var(--ic-z-index-menu);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);border-radius:var(--ic-border-radius)}.ic-menu-open.sc-ic-menu-h:not(.ic-menu-no-focus):focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}.ic-select-select-all-focused.sc-ic-menu-h{box-shadow:var(--ic-elevation-overlay) !important}#retry-button.sc-ic-menu::part(button){height:var(--ic-space-lg)}.small.sc-ic-menu #retry-button.sc-ic-menu::part(button){height:var(--ic-space-md)}.on-dialog.sc-ic-menu-h{inset:auto !important}.menu.sc-ic-menu{text-decoration:none;list-style-type:none;border-radius:1px;background-color:var(\n    --menu-bg-color,\n    var(--ic-menu-list-option-background-color)\n  );visibility:hidden;max-height:0;overflow-y:hidden}.menu.sc-ic-menu:has(+.option-bar).sc-ic-menu{border-radius:0 0 1px 1px}.menu-scroll.sc-ic-menu{overflow-y:auto}.menu.sc-ic-menu:focus-visible{outline:none}.ic-menu-open.sc-ic-menu-h{max-height:none;display:flex;flex-direction:column-reverse;border:var(--ic-border-width) solid\n    var(--menu-border-color, var(--ic-menu-border-color));transition:box-shadow var(--ic-easing-transition-fast)}.ic-menu-open.sc-ic-menu-h .menu.sc-ic-menu{visibility:visible;max-height:calc(var(--ic-space-xl) * 10 + var(--ic-space-xxxs))}.ic-menu-open.sc-ic-menu-h .option-bar.sc-ic-menu{visibility:visible}.ic-menu-open.sc-ic-menu-h .select-all-button.sc-ic-menu{display:block}.ic-menu-full-width.sc-ic-menu-h{width:100%}.option.sc-ic-menu{padding:var(--ic-space-xs) calc(var(--ic-space-xs) - var(--ic-space-1px));cursor:pointer;display:flex;align-items:center}.loading-option.sc-ic-menu p.sc-ic-menu{margin-bottom:0 !important}.option.sc-ic-menu:not(.loading-option){justify-content:space-between}.ic-menu-small.sc-ic-menu-h .option.sc-ic-menu{padding:var(--ic-space-xxs) calc(var(--ic-space-xs) - var(--ic-space-1px))}.ic-menu-large.sc-ic-menu-h .option.sc-ic-menu{padding:var(--ic-space-sm) calc(var(--ic-space-xs) - var(--ic-space-1px))}.option.sc-ic-menu:last-child{border-radius:0 0 1px 1px}.sc-ic-menu:not(.menu:has(+.option-bar)).sc-ic-menu .option.sc-ic-menu:first-child{border-radius:1px 1px 0 0}.option.sc-ic-menu:not(.disabled-option):hover{background-color:var(--ic-menu-list-option-hover-background-color)}.option.sc-ic-menu:not(.disabled-option):active{background-color:var(--ic-menu-list-option-pressed-background-color)}.option.sc-ic-menu:focus-visible{outline:var(--ic-hc-focus-outline)}.option.sc-ic-menu:not(.disabled-option) .option-description.sc-ic-menu{--ic-typography-color:var(\n    --menu-item-desc-text-color,\n    var(--ic-menu-list-option-description-text-color)\n  )}.option.sc-ic-menu .option-label.sc-ic-menu{display:flex;flex-direction:row;align-items:top}.option.sc-ic-menu .option-label.sc-ic-menu ic-typography.sc-ic-menu{max-width:100%;word-wrap:break-word}.option.sc-ic-menu .option-element.sc-ic-menu{margin-top:var(--ic-space-xxs)}.option.sc-ic-menu .option-icon.sc-ic-menu{height:var(--ic-space-md);width:var(--ic-space-md);margin-top:var(--ic-space-xxs);margin-right:var(--ic-space-xxxs)}.option-text-container.sc-ic-menu{pointer-events:none;width:100%}.option-text-container.show-check-icon.sc-ic-menu{width:calc(var(--ic-space-lg) * 10 + var(--ic-space-xl))}.option.loading-option.sc-ic-menu .option-text-container.sc-ic-menu{margin-left:calc(var(--ic-space-xs) + var(--ic-space-xxxs));color:var(--ic-menu-loading-list-option-text-color);--ic-typography-color:var(--ic-menu-loading-list-option-text-color)}.error-icon-svg.sc-ic-menu{height:var(--ic-space-md);width:var(--ic-space-md);fill:var(--ic-atoms-status-icon-error);align-self:center;display:flex;margin-right:calc(var(--ic-space-xxs) * 1.2)}.loading-error-info.sc-ic-menu{display:flex}.check-icon.sc-ic-menu{height:var(--ic-space-lg);min-width:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:var(--ic-space-xs);pointer-events:none}.focused-option.sc-ic-menu .check-icon.sc-ic-menu *.sc-ic-menu{fill:currentcolor}.option-group-title.sc-ic-menu{padding:var(--ic-space-lg) calc(var(--ic-space-xs) - var(--ic-space-1px))\n    var(--ic-space-xs);--ic-typography-color:var(--ic-menu-option-group-label-text-color)}.ic-menu-small.sc-ic-menu-h .option-group-title.sc-ic-menu{padding:var(--ic-space-sm) calc(var(--ic-space-xs) - var(--ic-space-1px))\n    var(--ic-space-xxs)}.last-recommended-option.sc-ic-menu{border-bottom:var(--ic-menu-last-recommended-option-border)}.disabled-option.sc-ic-menu{color:var(--ic-atoms-list-option-text-disabled-light);--ic-typography-color:var(--ic-atoms-list-option-text-disabled-light);cursor:default;pointer-events:none}.focused-option.sc-ic-menu,.focused-option.sc-ic-menu .option-description.sc-ic-menu{background-color:var(--ic-color-focus-inner) !important;color:var(--ic-atoms-list-option-text-focused-light) !important;--ic-typography-color:var(\n    --ic-atoms-list-option-text-focused-light\n  ) !important}.no-results.sc-ic-menu-h li.sc-ic-menu{cursor:no-drop}.no-results.sc-ic-menu-h li.sc-ic-menu:hover{background-color:transparent}.option-bar.sc-ic-menu{padding:var(--ic-space-xxs) var(--ic-space-xs);display:flex;align-items:center;justify-content:space-between;background-color:var(--ic-menu-option-bar-background-color);visibility:hidden;border-bottom:var(--ic-border-width) solid\n    var(--ic-menu-option-bar-divider-color);border-radius:1px 1px 0 0}.option-bar.sc-ic-menu p.sc-ic-menu{margin-bottom:0 !important}.ic-menu-large.sc-ic-menu-h .option-bar.sc-ic-menu{padding:var(--ic-space-xs)}.select-all-button.sc-ic-menu{display:none}.select-all-button.sc-ic-menu:focus{z-index:calc(var(--ic-z-index-menu) + 1)}@media (forced-colors: active){.focused-option.sc-ic-menu:focus{outline:none;border:0.125rem solid transparent}.disabled-option.sc-ic-menu{color:GrayText;--ic-typography-color:GrayText}}";
+const IcMenuStyle0 = icMenuCss;
 
 const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
     constructor() {
@@ -38,6 +39,46 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         this.preventMenuFocus = false; // (When multiple) ensures focus moves straight to select all button from menu.
         this.shiftPressed = false;
         this.ungroupedOptions = [];
+        this.focusFromSearchKeypress = false;
+        this.initialOptionsListRender = false;
+        this.keyboardNav = false;
+        this.preventIncorrectTabOrder = false;
+        /**
+         * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.
+         */
+        this.activationType = "automatic";
+        /**
+         * @internal If `true`, autofocus will be applied on selected item when menu is open.
+         */
+        this.autofocusOnSelected = true;
+        /**
+         *  If `true`, the menu will close when an option is selected.
+         */
+        this.closeOnSelect = true;
+        /**
+         *  If `true`, the menu will fill the width of the container.
+         */
+        this.fullWidth = false;
+        /**
+         * The custom name for the label field for IcMenuOption.
+         */
+        this.labelField = "label";
+        /**
+         * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.
+         */
+        this.searchMode = "navigation";
+        /**
+         * @internal If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.
+         */
+        this.selectOnEnter = false;
+        /**
+         * The size of the menu.
+         */
+        this.size = "medium";
+        /**
+         * The custom name for the value field for IcMenuOption.
+         */
+        this.valueField = "value";
         this.handleClearListener = () => {
             this.optionHighlighted = "";
         };
@@ -400,7 +441,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
                 const menuOptions = this.getMenuOptions();
                 const selectedOptionIndex = menuOptions.findIndex((option) => option.value === value);
                 this.handleOptionSelect(event, selectedOptionIndex, true);
-                this.multiOptionClicked = value;
+                this.multiOptionClicked = value || null;
             }
             else {
                 this.menuOptionSelect.emit({ value, label });
@@ -418,14 +459,15 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
             }
         };
         this.handleBlur = (event) => {
+            var _a, _b, _c, _d;
             if (event.relatedTarget !== this.inputEl) {
                 if (event.relatedTarget === this.selectAllButton) {
-                    this.menu.removeAttribute(this.ACTIVE_DESCENDANT);
+                    (_a = this.menu) === null || _a === void 0 ? void 0 : _a.removeAttribute(this.ACTIVE_DESCENDANT);
                 }
-                if (!(this.menu.contains(event.relatedTarget) ||
+                if (!(((_b = this.menu) === null || _b === void 0 ? void 0 : _b.contains(event.relatedTarget)) ||
                     event.relatedTarget === this.selectAllButton)) {
                     this.handleMenuChange(false, this.hasPreviouslyBlurred);
-                    this.menu.removeAttribute(this.ACTIVE_DESCENDANT);
+                    (_c = this.menu) === null || _c === void 0 ? void 0 : _c.removeAttribute(this.ACTIVE_DESCENDANT);
                     this.lastOptionFocused = null;
                     this.lastOptionSelected = null;
                 }
@@ -433,7 +475,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
             else {
                 this.handleMenuChange(false);
                 this.preventClickOpen = true;
-                this.menu.removeAttribute(this.ACTIVE_DESCENDANT);
+                (_d = this.menu) === null || _d === void 0 ? void 0 : _d.removeAttribute(this.ACTIVE_DESCENDANT);
                 this.lastOptionFocused = null;
                 this.lastOptionSelected = null;
             }
@@ -464,15 +506,17 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
             }
         };
         this.handleSelectAllClick = () => {
+            var _a;
             this.keyboardNav = false;
-            this.menu.focus();
+            (_a = this.menu) === null || _a === void 0 ? void 0 : _a.focus();
             this.emitSelectAllEvents();
             this.lastOptionFocused = null;
             this.lastOptionSelected = null;
         };
         this.handleSelectAllBlur = (event) => {
+            var _a;
             this.host.classList.remove("ic-select-select-all-focused");
-            if (!this.menu.contains(event.relatedTarget)) {
+            if (!((_a = this.menu) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget))) {
                 this.handleMenuChange(false, false);
             }
         };
@@ -645,6 +689,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         };
         this.isManualMode = this.activationType === "manual";
         this.scrollToSelected = (menu) => {
+            var _a;
             const selectedOption = this.selectOnEnter
                 ? this.host.querySelector(`li[data-value="${this.optionHighlighted}"]`)
                 : menu.querySelector(".option[aria-selected='true']");
@@ -656,7 +701,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
                 }
                 // 'aria-activedescendant' affects screen reader focus
                 // https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/#kbd_focus_activedescendant
-                this.menu.setAttribute(this.ACTIVE_DESCENDANT, selectedOption.id);
+                (_a = this.menu) === null || _a === void 0 ? void 0 : _a.setAttribute(this.ACTIVE_DESCENDANT, selectedOption.id);
                 selectedOption.focus();
             }
         };
@@ -677,22 +722,24 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
             this.ungroupedOptionsSet.emit({ options: this.ungroupedOptions });
         };
         this.setMenuScrollbar = () => {
+            var _a;
             let optionsHeight = 0;
             this.host
                 .querySelectorAll(".option")
                 .forEach((option) => (optionsHeight += option.clientHeight));
             if (optionsHeight >= 320) {
-                this.menu.classList.add("menu-scroll");
+                (_a = this.menu) === null || _a === void 0 ? void 0 : _a.classList.add("menu-scroll");
             }
         };
         this.handleTimeoutBlur = (ev) => {
             this.timeoutBlur.emit({ ev });
         };
         this.optionContent = (option, selected) => {
+            var _a;
             const showCheckIcon = !!option[this.valueField] &&
                 !!this.value &&
                 selected &&
-                this.parentEl.tagName !== this.SEARCH_BAR_TAG;
+                ((_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.tagName) !== this.SEARCH_BAR_TAG;
             return (h(Fragment, null, option.loading && h("ic-loading-indicator", { size: "icon" }), h("div", { class: {
                     "option-text-container": true,
                     "show-check-icon": showCheckIcon,
@@ -706,41 +753,20 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
                         ? (keyboardNav || initialOptionsListRender) &&
                             option[this.valueField] === optionHighlighted
                         : keyboardNav && selected,
-                    "last-recommended-option": option.recommended &&
+                    "last-recommended-option": !!(option.recommended &&
                         options[index + 1] &&
-                        !options[index + 1].recommended,
-                    "disabled-option": option.disabled,
-                    "loading-option": option.loading,
-                    timeout: option.timedOut,
+                        !options[index + 1].recommended),
+                    "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 && this.handleOptionClick, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, "data-value": option[this.valueField], "data-label": option[this.labelField] }, option.timedOut ? (h(Fragment, null, h("div", { class: "loading-error-info" }, h("svg", { class: "error-icon-svg", "aria-labelledby": "error-title", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#000000" }, h("title", { id: "error-title" }, "Error"), h("g", { id: "close-octagon" }, h("path", { id: "Vector", 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))));
+                    : "-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] }, option.timedOut ? (h(Fragment, null, h("div", { class: "loading-error-info" }, h("svg", { class: "error-icon-svg", "aria-labelledby": "error-title", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#000000" }, h("title", { id: "error-title" }, "Error"), h("g", { id: "close-octagon" }, h("path", { id: "Vector", 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))));
         };
-        this.focusFromSearchKeypress = false;
-        this.initialOptionsListRender = false;
-        this.keyboardNav = false;
-        this.optionHighlighted = undefined;
-        this.preventIncorrectTabOrder = false;
-        this.menuOptions = undefined;
-        this.activationType = "automatic";
-        this.anchorEl = undefined;
-        this.autofocusOnSelected = true;
-        this.closeOnSelect = true;
-        this.fullWidth = false;
-        this.inputEl = undefined;
-        this.inputLabel = undefined;
-        this.labelField = "label";
-        this.menuId = undefined;
-        this.open = undefined;
-        this.parentEl = undefined;
-        this.searchMode = "navigation";
-        this.selectOnEnter = false;
-        this.size = "medium";
-        this.options = undefined;
-        this.value = undefined;
-        this.valueField = "value";
     }
     watchOpenHandler() {
         if (!this.open && this.popperInstance) {
@@ -755,7 +781,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         this.loadUngroupedOptions();
     }
     connectedCallback() {
-        this.getParentEl(this.parentEl);
+        this.parentEl && this.getParentEl(this.parentEl);
         if (this.isSearchBar) {
             if (this.searchMode === "navigation")
                 this.setHighlightedOption(0);
@@ -771,12 +797,12 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         (_b = this.parentEl) === null || _b === void 0 ? void 0 : _b.removeEventListener("icSubmitSearch", this.handleSubmitSearch);
     }
     componentWillLoad() {
-        var _a, _b;
+        var _a, _b, _c, _d;
         this.loadUngroupedOptions();
-        this.parentEl.addEventListener("icClear", this.handleClearListener);
-        this.parentEl.addEventListener("icSubmitSearch", this.handleSubmitSearch);
-        this.hasTimedOut = (_a = this.options) === null || _a === void 0 ? void 0 : _a.some((opt) => opt.timedOut);
-        this.isLoading = (_b = this.options) === null || _b === void 0 ? void 0 : _b.some((opt) => opt.loading);
+        (_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.addEventListener("icClear", this.handleClearListener);
+        (_b = this.parentEl) === null || _b === void 0 ? void 0 : _b.addEventListener("icSubmitSearch", this.handleSubmitSearch);
+        this.hasTimedOut = (_c = this.options) === null || _c === void 0 ? void 0 : _c.some((opt) => opt.timedOut);
+        this.isLoading = (_d = this.options) === null || _d === void 0 ? void 0 : _d.some((opt) => opt.loading);
     }
     componentDidLoad() {
         if (this.isSearchBar &&
@@ -793,7 +819,10 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
     }
     componentDidUpdate() {
         const inputValueInOptions = this.options.some((option) => option[this.valueField] === this.value);
-        if (this.open && this.options.length !== 0 && !this.preventMenuFocus) {
+        if (this.menu &&
+            this.open &&
+            this.options.length !== 0 &&
+            !this.preventMenuFocus) {
             if (this.value &&
                 this.keyboardNav &&
                 inputValueInOptions &&
@@ -817,7 +846,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
                 this.menu.focus();
             }
         }
-        if (this.open && !this.value && this.selectOnEnter) {
+        if (this.menu && this.open && !this.value && this.selectOnEnter) {
             this.scrollToSelected(this.menu);
         }
         this.preventMenuFocus = false;
@@ -902,8 +931,8 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, open, inputEl, keyboardNav, parentEl, SEARCH_BAR_TAG, } = 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, { class: {
-                "ic-menu-full-width": fullWidth,
+        return (h(Host, { key: 'da6a6114d695c99a303ddae835ebbdb81c4bf0e8', 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) ||
                     hasTimedOut ||
@@ -911,7 +940,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
                 [`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 &&
+            } }, options.length !== 0 && (h("ul", { key: '8a6b17763235c84e94621e2f83c3a02302f5a8bc', 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" ||
                     (parentEl === null || parentEl === void 0 ? void 0 : parentEl.tagName) === SEARCH_BAR_TAG)
@@ -939,14 +968,14 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
             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" : "medium" }, selectAllButtonText)))));
+            !hasNoResults && (h("div", { key: '453d9a11e3933a48aa85f39f686bdf98a6ba0953', class: "option-bar" }, h("ic-typography", { key: '8ca77bff0d3fbbc4264e83ff815f2de5ff98670c' }, h("p", { key: '6262a580c6071c81146e082f2e839a06efd90461' }, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { key: '192c92dec9525bc2bf3fe386414b292483d25d72', 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)))));
     }
     get host() { return this; }
     static get watchers() { return {
         "open": ["watchOpenHandler"],
         "options": ["watchOptionsHandler"]
     }; }
-    static get style() { return icMenuCss; }
+    static get style() { return IcMenuStyle0; }
 }, [2, "ic-menu", {
         "activationType": [1, "activation-type"],
         "anchorEl": [16],