@ukic/web-components 2.7.0 → 2.8.0

package/dist/collection/components/ic-footer/test/a11y/ic-footer.test.a11y.js

@@ -10,6 +10,8 @@ beforeEach(() => {
     disconnect: jest.fn().mockReturnValue(null),
   });
   window.ResizeObserver = mockResizeObserver;
+  const matchMedia = jest.fn().mockReturnValue(true);
+  window.matchMedia = matchMedia;
 });
 describe("ic-footer", () => {
   it("passes accessibility", async () => {

package/dist/collection/components/ic-footer/test/a11y/ic-footer.test.a11y.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-footer.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-footer/test/a11y/ic-footer.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,UAAU,CAAC,GAAG,EAAE;EACd,2DAA2D;EAC3D,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;EACrC,kBAAkB,CAAC,eAAe,CAAC;IACjC,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IACxC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IAC1C,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;GAC5C,CAAC,CAAC;EACH,MAAM,CAAC,cAAc,GAAG,kBAAkB,CAAC;AAC7C,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EACzB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,yBAAyB,CAAC,CAAC;IACpD,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\nbeforeEach(() => {\n  // IntersectionObserver isn't available in test environment\n  const mockResizeObserver = jest.fn();\n  mockResizeObserver.mockReturnValue({\n    observe: jest.fn().mockReturnValue(null),\n    unobserve: jest.fn().mockReturnValue(null),\n    disconnect: jest.fn().mockReturnValue(null),\n  });\n  window.ResizeObserver = mockResizeObserver;\n});\n\ndescribe(\"ic-footer\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`<ic-footer></ic-footer>`);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}
+{"version":3,"file":"ic-footer.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-footer/test/a11y/ic-footer.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,UAAU,CAAC,GAAG,EAAE;EACd,2DAA2D;EAC3D,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;EACrC,kBAAkB,CAAC,eAAe,CAAC;IACjC,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IACxC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IAC1C,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;GAC5C,CAAC,CAAC;EACH,MAAM,CAAC,cAAc,GAAG,kBAAkB,CAAC;EAC3C,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;EACnD,MAAM,CAAC,UAAU,GAAG,UAAU,CAAC;AACjC,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EACzB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,yBAAyB,CAAC,CAAC;IACpD,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\nbeforeEach(() => {\n  // IntersectionObserver isn't available in test environment\n  const mockResizeObserver = jest.fn();\n  mockResizeObserver.mockReturnValue({\n    observe: jest.fn().mockReturnValue(null),\n    unobserve: jest.fn().mockReturnValue(null),\n    disconnect: jest.fn().mockReturnValue(null),\n  });\n  window.ResizeObserver = mockResizeObserver;\n  const matchMedia = jest.fn().mockReturnValue(true);\n  window.matchMedia = matchMedia;\n});\n\ndescribe(\"ic-footer\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`<ic-footer></ic-footer>`);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-horizontal-scroll/test/a11y/ic-horizontal-scroll.test.a11y.js

@@ -10,6 +10,8 @@ beforeEach(() => {
     disconnect: jest.fn().mockReturnValue(null),
   });
   window.ResizeObserver = mockResizeObserver;
+  const matchMedia = jest.fn().mockReturnValue(true);
+  window.matchMedia = matchMedia;
 });
 describe("ic-horizontal-scroll", () => {
   it("passes accessibility", async () => {

package/dist/collection/components/ic-horizontal-scroll/test/a11y/ic-horizontal-scroll.test.a11y.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-horizontal-scroll.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-horizontal-scroll/test/a11y/ic-horizontal-scroll.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,UAAU,CAAC,GAAG,EAAE;EACd,2DAA2D;EAC3D,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;EACrC,kBAAkB,CAAC,eAAe,CAAC;IACjC,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IACxC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IAC1C,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;GAC5C,CAAC,CAAC;EACH,MAAM,CAAC,cAAc,GAAG,kBAAkB,CAAC;AAC7C,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;EACpC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC1C,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IAC3C,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB;;;;;;;;;;;KAWD,EACC,EAAE,UAAU,EAAE,GAAG,EAAE,CACpB,CAAC;IACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\nbeforeEach(() => {\n  // IntersectionObserver isn't available in test environment\n  const mockResizeObserver = jest.fn();\n  mockResizeObserver.mockReturnValue({\n    observe: jest.fn().mockReturnValue(null),\n    unobserve: jest.fn().mockReturnValue(null),\n    disconnect: jest.fn().mockReturnValue(null),\n  });\n  window.ResizeObserver = mockResizeObserver;\n});\n\ndescribe(\"ic-horizontal-scroll\", () => {\n  it(\"passes accessibility\", async () => {\n    const div = document.createElement(\"div\");\n    div.setAttribute(\"style\", \"width: 320px;\");\n    const el = await fixture(\n      `\n      <ic-horizontal-scroll>\n        <ul>\n          <ic-navigation-item label=\"Test nav item 1\"></ic-navigation-item>\n          <ic-navigation-item label=\"Test nav item 2\"></ic-navigation-item>\n          <ic-navigation-item label=\"Test nav item 3\"></ic-navigation-item>\n          <ic-navigation-item label=\"Test nav item 4\"></ic-navigation-item>\n          <ic-navigation-item label=\"Test nav item 5\"></ic-navigation-item>\n          <ic-navigation-item label=\"Test nav item 6\"></ic-navigation-item>\n        </ul>\n      </ic-horizontal-scroll>\n    `,\n      { parentNode: div }\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}
+{"version":3,"file":"ic-horizontal-scroll.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-horizontal-scroll/test/a11y/ic-horizontal-scroll.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,UAAU,CAAC,GAAG,EAAE;EACd,2DAA2D;EAC3D,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;EACrC,kBAAkB,CAAC,eAAe,CAAC;IACjC,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IACxC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IAC1C,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;GAC5C,CAAC,CAAC;EACH,MAAM,CAAC,cAAc,GAAG,kBAAkB,CAAC;EAC3C,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;EACnD,MAAM,CAAC,UAAU,GAAG,UAAU,CAAC;AACjC,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;EACpC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC1C,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IAC3C,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB;;;;;;;;;;;KAWD,EACC,EAAE,UAAU,EAAE,GAAG,EAAE,CACpB,CAAC;IACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\nbeforeEach(() => {\n  // IntersectionObserver isn't available in test environment\n  const mockResizeObserver = jest.fn();\n  mockResizeObserver.mockReturnValue({\n    observe: jest.fn().mockReturnValue(null),\n    unobserve: jest.fn().mockReturnValue(null),\n    disconnect: jest.fn().mockReturnValue(null),\n  });\n  window.ResizeObserver = mockResizeObserver;\n  const matchMedia = jest.fn().mockReturnValue(true);\n  window.matchMedia = matchMedia;\n});\n\ndescribe(\"ic-horizontal-scroll\", () => {\n  it(\"passes accessibility\", async () => {\n    const div = document.createElement(\"div\");\n    div.setAttribute(\"style\", \"width: 320px;\");\n    const el = await fixture(\n      `\n      <ic-horizontal-scroll>\n        <ul>\n          <ic-navigation-item label=\"Test nav item 1\"></ic-navigation-item>\n          <ic-navigation-item label=\"Test nav item 2\"></ic-navigation-item>\n          <ic-navigation-item label=\"Test nav item 3\"></ic-navigation-item>\n          <ic-navigation-item label=\"Test nav item 4\"></ic-navigation-item>\n          <ic-navigation-item label=\"Test nav item 5\"></ic-navigation-item>\n          <ic-navigation-item label=\"Test nav item 6\"></ic-navigation-item>\n        </ul>\n      </ic-horizontal-scroll>\n    `,\n      { parentNode: div }\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-input-component-container/ic-input-component-container.css

@@ -4,7 +4,7 @@ ic-input-component-container {
    */
 
   display: flex;
-  border: var(--ic-space-1px) solid
+  border: var(--ic-border-width) solid
     var(--border-color, var(--ic-architectural-400));
   border-radius: var(--ic-border-radius);
   transition: var(--ic-easing-transition-slow);
@@ -23,7 +23,7 @@ ic-input-component-container.fullwidth {
 
 ic-input-component-container.disabled,
 ic-input-component-container.disabled:hover {
-  border: var(--ic-space-1px) dashed var(--ic-architectural-200);
+  border: var(--ic-border-width) dashed var(--ic-architectural-200);
 }
 
 ic-input-component-container.readonly,
@@ -155,12 +155,12 @@ ic-input-component-container:focus {
   }
 
   ic-input-component-container:focus-within {
-    border: var(--ic-space-1px) solid Highlight;
+    border: var(--ic-border-width) solid Highlight;
     outline: 0.125rem solid Highlight;
   }
 
   ic-input-component-container.disabled,
   ic-input-component-container.disabled:hover {
-    border: var(--ic-space-1px) dashed GrayText;
+    border: var(--ic-border-width) dashed GrayText;
   }
 }

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

@@ -479,14 +479,10 @@ video {
   inset: auto !important;
 }
 
-:host(.on-dialog-fix-translate) {
-  transform: translate(0, 80px) !important;
-}
-
 .menu {
   text-decoration: none;
   list-style-type: none;
-  border: var(--ic-space-1px) solid var(--ic-architectural-400);
+  border: var(--ic-border-width) solid var(--ic-architectural-400);
   border-radius: var(--ic-border-radius);
   background-color: var(--ic-architectural-white);
   visibility: hidden;

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

@@ -5,7 +5,6 @@ import { onComponentRequiredPropUndefined } from "../../utils/helpers";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export class Menu {
   constructor() {
-    this.firstRender = true;
     this.disabledOptionSelected = false;
     this.hasPreviouslyBlurred = false;
     this.hasTimedOut = false;
@@ -105,7 +104,8 @@ export class Menu {
       const menuOptions = this.setMenuOptions();
       this.keyboardNav = false;
       const highlightedOptionIndex = menuOptions.findIndex((option) => option[this.valueField] === this.optionHighlighted);
-      const getOptionId = (index) => { var _a; return (_a = Array.from(this.el.querySelectorAll("li"))[index]) === null || _a === void 0 ? void 0 : _a.id; };
+      const getOptionId = (index) => { var _a; return (_a = Array.from(this.host.querySelectorAll("li"))[index]) === null || _a === void 0 ? void 0 : _a.id; };
+      const isOpen = this.isSearchBar || this.isSearchableSelect || this.open;
       switch (event.key) {
         case "ArrowDown":
           this.keyboardNav = true;
@@ -162,22 +162,38 @@ export class Menu {
             optionId: getOptionId(menuOptions.length - 1),
           });
           break;
+        case " ":
+          if (this.isSearchBar || this.isSearchableSelect) {
+            break;
+          }
+          else {
+            if (event.target.id !== "clear-button") {
+              this.handleMenuChange(true);
+            }
+          }
+          break;
         case "Enter":
           event.preventDefault();
-          if (highlightedOptionIndex >= 0) {
-            if (menuOptions[highlightedOptionIndex] !== undefined) {
-              if (this.isSearchBar &&
-                menuOptions[highlightedOptionIndex].disabled === true) {
-                this.disabledOptionSelected = true;
-              }
-              else {
-                this.setInputValue(highlightedOptionIndex);
-                this.value = menuOptions[highlightedOptionIndex][this.valueField];
+          if (isOpen) {
+            if (highlightedOptionIndex >= 0) {
+              if (menuOptions[highlightedOptionIndex] !== undefined) {
+                if (this.isSearchBar &&
+                  menuOptions[highlightedOptionIndex].disabled === true) {
+                  this.disabledOptionSelected = true;
+                }
+                else {
+                  this.setInputValue(highlightedOptionIndex);
+                  this.value =
+                    menuOptions[highlightedOptionIndex][this.valueField];
+                }
               }
             }
+            else {
+              this.setInputValue(highlightedOptionIndex);
+            }
           }
           else {
-            this.setInputValue(highlightedOptionIndex);
+            this.handleMenuChange(true);
           }
           break;
         case "Escape":
@@ -268,7 +284,7 @@ export class Menu {
       if (this.activationType === "automatic") {
         this.autoSetValueOnMenuKeyDown(event);
       }
-      else if (this.activationType === "manual" && this.isSearchableSelect) {
+      else if (this.activationType === "manual" && !this.isSearchBar) {
         this.manSetInputValueKeyboardOpen(event);
       }
     };
@@ -370,7 +386,9 @@ export class Menu {
     };
     this.isManualMode = this.activationType === "manual";
     this.scrollToSelected = (menu) => {
-      const selectedOption = menu.querySelector(".option[aria-selected]");
+      const selectedOption = this.selectOnEnter
+        ? this.host.querySelector(`li[data-value="${this.optionHighlighted}"]`)
+        : menu.querySelector(".option[aria-selected]");
       if (selectedOption) {
         const elTop = selectedOption.offsetTop + selectedOption.offsetHeight;
         if (elTop > menu.scrollTop + menu.offsetHeight ||
@@ -396,7 +414,7 @@ export class Menu {
     };
     this.setMenuScrollbar = () => {
       let optionsHeight = 0;
-      this.el
+      this.host
         .querySelectorAll(".option")
         .forEach((option) => (optionsHeight += option.clientHeight));
       if (optionsHeight >= 320) {
@@ -450,12 +468,19 @@ export class Menu {
     this.open = undefined;
     this.parentEl = undefined;
     this.searchMode = "navigation";
+    this.selectOnEnter = false;
     this.size = "default";
     this.small = false;
     this.options = undefined;
     this.value = undefined;
     this.valueField = "value";
   }
+  watchOpenHandler() {
+    if (!this.open && this.popperInstance) {
+      this.popperInstance.destroy();
+      this.popperInstance = null;
+    }
+  }
   watchOptionsHandler(newOptions) {
     this.hasTimedOut = newOptions.some((opt) => opt.timedOut);
     this.isLoading = newOptions.some((opt) => opt.loading);
@@ -474,7 +499,7 @@ export class Menu {
     }
   }
   disconnectedCallback() {
-    if (this.popperInstance !== undefined) {
+    if (this.popperInstance) {
       this.popperInstance.destroy();
     }
     this.parentEl.removeEventListener("icClear", this.handleClearListener);
@@ -521,61 +546,19 @@ export class Menu {
       else if (optionHighlightedIsSet &&
         !this.focusFromSearchKeypress &&
         !this.preventIncorrectTabOrder) {
-        const highlightedEl = this.el.querySelector(`li[data-value="${this.optionHighlighted}"]`);
+        const highlightedEl = this.host.querySelector(`li[data-value="${this.optionHighlighted}"]`);
         if (highlightedEl) {
           highlightedEl.focus();
         }
       }
     }
+    if (this.open && !this.value && this.selectOnEnter) {
+      this.scrollToSelected(this.menu);
+    }
   }
   componentDidRender() {
-    if (this.firstRender && this.open) {
-      this.firstRender = false;
-      let adjust = false;
-      const dialogEl = this.parentEl.closest("ic-dialog");
-      const onDialog = dialogEl !== null;
-      if (onDialog) {
-        this.el.classList.add("on-dialog");
-        if (dialogEl.getAttribute("data-overflow") === "false") {
-          const menuTop = this.el.getBoundingClientRect().top;
-          const menuHeight = this.el.getBoundingClientRect().height;
-          const dialogHeight = dialogEl.getBoundingClientRect().bottom;
-          if (menuTop + menuHeight > dialogHeight) {
-            adjust = true;
-          }
-        }
-        if (adjust === false) {
-          this.el.classList.add("on-dialog-fix-translate");
-        }
-      }
-      if (adjust) {
-        this.popperInstance = createPopper(this.anchorEl, this.el, {
-          placement: "top",
-        });
-      }
-      else {
-        this.popperInstance = createPopper(this.anchorEl, this.el, {
-          placement: "bottom",
-          modifiers: [
-            {
-              name: "offset",
-              options: {
-                offset: [0, 7],
-              },
-            },
-            {
-              name: "flip",
-              options: {
-                fallbackPlacements: ["top"],
-                rootBoundary: "viewport",
-              },
-            },
-          ],
-        });
-      }
-    }
-    else if (this.open) {
-      this.popperInstance.update();
+    if (this.open && !this.popperInstance && this.anchorEl) {
+      this.initPopperJs(this.anchorEl);
     }
     if (this.open && !!this.options.length) {
       this.setMenuScrollbar();
@@ -611,6 +594,31 @@ export class Menu {
   async handleSetFirstOption() {
     this.setHighlightedOption(0);
   }
+  /**
+   * @internal Used to initialize popperJS with an anchor element.
+   * 5/12/2023: Tested with Floating UI, however, discovered inconsistent
+   * boundary behaviour so sticking with PopperJS.
+   */
+  async initPopperJs(anchor) {
+    this.popperInstance = createPopper(anchor, this.host, {
+      placement: "bottom",
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, 7],
+          },
+        },
+        {
+          name: "flip",
+          options: {
+            fallbackPlacements: ["top"],
+            rootBoundary: "viewport",
+          },
+        },
+      ],
+    });
+  }
   render() {
     const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, small, size, open, inputEl, keyboardNav, } = this;
     return (h(Host, { class: {
@@ -865,6 +873,27 @@ export class Menu {
         "reflect": false,
         "defaultValue": "\"navigation\""
       },
+      "selectOnEnter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown."
+            }],
+          "text": ""
+        },
+        "attribute": "select-on-enter",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "size": {
         "type": "string",
         "mutable": false,
@@ -1236,12 +1265,42 @@ export class Menu {
               "text": "Used to highlight the first option in the menu."
             }]
         }
+      },
+      "initPopperJs": {
+        "complexType": {
+          "signature": "(anchor: HTMLElement) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            },
+            "HTMLElement": {
+              "location": "global",
+              "id": "global::HTMLElement"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "internal",
+              "text": "Used to initialize popperJS with an anchor element.\n5/12/2023: Tested with Floating UI, however, discovered inconsistent\nboundary behaviour so sticking with PopperJS."
+            }]
+        }
       }
     };
   }
-  static get elementRef() { return "el"; }
+  static get elementRef() { return "host"; }
   static get watchers() {
     return [{
+        "propName": "open",
+        "methodName": "watchOpenHandler"
+      }, {
         "propName": "options",
         "methodName": "watchOptionsHandler"
       }, {