@lion/ui 0.18.0-menu-system.5 → 0.18.0-menu-system.6

package/components/menu/src/InteractiveListMixin.js

@@ -293,7 +293,7 @@ const InteractiveListMixinImplementation = superclass =>
       }
 
       // @ts-ignore - focusableEl is safely used as HTMLElement here
-      if (!isInView(this._scrollTargetNode, focusableEl)) {
+      if (this.orientation === 'vertical' && !isInView(this._scrollTargetNode, focusableEl)) {
         focusableEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
       }
 
@@ -820,7 +820,10 @@ const InteractiveListMixinImplementation = superclass =>
     __syncCurrentPageWithLocationHref(location) {
       this.listItems.forEach(item => {
         if (/** @type {HTMLAnchorElement} */ (item).href) {
-          if (location.href.includes(/** @type {HTMLAnchorElement} */ (item).href)) {
+          const pathname = location.pathname.endsWith('/')
+            ? location.pathname.substring(0, location.pathname.length - 1)
+            : location.pathname;
+          if (pathname === /** @type {HTMLAnchorElement} */ (item).href) {
             setChecked(item);
           } else {
             setChecked(item, true);

package/components/menu/src/MoreButtonMenuMixin.js

@@ -18,8 +18,8 @@ const styles = css`
   /** N.B. this is a simplified version of sr-only. when we move to overlayctrl, we should build this into overlayctrl */
   [data-more-button-menu] {
     overflow: hidden;
-    height: 1px;
-    width: 1px;
+    height: 0;
+    width: 0;
   }
 
   [role='list']:has(> [data-more-button-wrapper]) > [role='listitem'] > :is(button, a) {
@@ -75,11 +75,13 @@ export const MoreButtonMenuMixin = superclass =>
       moreButton?.setAttribute('aria-expanded', 'false');
       const moreButtonMenu = document.createElement('div');
       moreButtonMenu.setAttribute('data-more-button-menu', '');
+      moreButtonMenu.setAttribute('tabindex', '-1');
       moreButtonWrapper.appendChild(moreButtonMenu);
       this._listNode.appendChild(moreButtonWrapper);
 
       const isElementDirectFocusableItemUnderMoreButtonMenu = (/** @type {Element} */ element) =>
-        this.listItems.includes(element) && moreButtonMenu.contains(element);
+        (this.listItems.includes(element) && moreButtonMenu.contains(element)) ||
+        element === moreButtonMenu;
 
       moreButtonMenu.addEventListener(
         'focusin',
@@ -87,6 +89,9 @@ export const MoreButtonMenuMixin = superclass =>
           const target = /** @type {HTMLElement} */ (event?.target);
           if (!isElementDirectFocusableItemUnderMoreButtonMenu(target)) return;
 
+          // If applicable hide any other L2 menus
+          this.querySelector('[level="2"]:has([data-open])')?._overlayCtrl?.hide();
+
           // A user did `Shift + Tab` from L2 menu to More menu
           if (target?.getAttribute('aria-expanded') === 'true') {
             // close L2 menu
@@ -110,31 +115,11 @@ export const MoreButtonMenuMixin = superclass =>
         }, 100);
       });
 
-      this.hasMoreButtonMenuAnyFocusedFirstLevelItems = false;
-
-      moreButton?.addEventListener('mousedown', () => {
-        this.hasMoreButtonMenuAnyFocusedFirstLevelItems = false;
-        const focusableFirstLevelItems = moreButtonMenu.querySelectorAll(
-          ':scope > [role="listitem"] > :is(a, button)',
-        );
-
-        // @ts-ignore Type 'NodeListOf<Element>' must have a '[Symbol.iterator]()' method that returns an iterator.
-        for (const focusableFirstLevelItem of focusableFirstLevelItems) {
-          if (this._getDeepActiveElement() === focusableFirstLevelItem) {
-            this.hasMoreButtonMenuAnyFocusedFirstLevelItems = true;
-          }
-        }
-      });
-
       moreButton?.addEventListener('click', () => {
-        if (this.hasMoreButtonMenuAnyFocusedFirstLevelItems) return;
-        /** @type {HTMLElement | null} */
-        const firstInteractiveItem = moreButtonMenu.querySelector(
-          ':scope > [role="listitem"] > :is(a, button)',
-        );
-
-        firstInteractiveItem?.focus();
-        moreButtonMenu.setAttribute('data-open', '');
+        if (moreButtonMenu.getAttribute('data-open') === null) {
+          moreButtonMenu?.focus({ preventScroll: true });
+          moreButtonMenu.setAttribute('data-open', '');
+        }
       });
     }
 
@@ -186,6 +171,9 @@ export const MoreButtonMenuMixin = superclass =>
       const previousNodes = [];
       let { previousSibling } = listItem;
       while (previousSibling) {
+        if (previousSibling.nodeType === Node.ELEMENT_NODE) {
+          break;
+        }
         previousNodes.unshift(previousSibling);
         if (isMarkerComment(previousSibling)) {
           break;
@@ -196,6 +184,9 @@ export const MoreButtonMenuMixin = superclass =>
       const nextNodes = [];
       let { nextSibling } = listItem;
       while (nextSibling) {
+        if (nextSibling.nodeType === Node.ELEMENT_NODE) {
+          break;
+        }
         nextNodes.push(nextSibling);
 
         if (isMarkerComment(nextSibling)) {

package/components/menu/src/utils/listItemInteractions.js

@@ -75,7 +75,8 @@ export function setChecked(item, unset = false) {
  * @param {HTMLElement} item
  */
 export function toggleChecked(item) {
-  setChecked(item, !isChecked(item));
+  const shouldUnset = isChecked(item);
+  setChecked(item, shouldUnset);
 }
 
 /**

package/components/menu/test/lion-menu.test.js

@@ -1,4 +1,6 @@
 import { runInteractiveListMixinSuite } from '../test-suites/InteractiveListMixin.suite.js';
 import '@lion/ui/define/lion-menu.js';
+import { runLionMenuHybridSuite } from '../test-suites/LionMenuHybrid.suite.js';
 
 runInteractiveListMixinSuite({ tagString: 'lion-menu' });
+runLionMenuHybridSuite();

package/components/menu/test-suites/InteractiveListMixin.suite.js

@@ -1,5 +1,8 @@
 import { LitElement } from 'lit';
 import { expect, html, fixture as _fixture, unsafeStatic, defineCE } from '@open-wc/testing';
+import { sendMouse, resetMouse } from '@web/test-runner-commands';
+import { useFakeTimers } from 'sinon';
+import { getDeepActiveElement } from '@lion/ui/overlays.js';
 import { InteractiveListMixin } from '../src/InteractiveListMixin.js';
 
 class InteractiveListClass extends InteractiveListMixin(LitElement) {}
@@ -29,6 +32,19 @@ const supportedRoles = [
 
 const fixture = /** @type {(arg: TemplateResult) => Promise<LionMenu>} */ (_fixture);
 
+const l1Config = {
+  isBar: true,
+  hasFullWidthFlyout: true,
+  openableConfig: {
+    // We want disclosure behavior
+    placementMode: 'custom',
+    // N.B. we don't have an invoker...
+    isActivated: false,
+    inheritsReferenceWidth: 'none',
+    focusContentOnOpen: true,
+  },
+};
+
 /**
  * @param {TestConfig} [customConfig]
  */
@@ -155,7 +171,6 @@ export function runInteractiveListMixinSuite(customConfig) {
             ${item(2, 'option')}
           </${tag}>
         `);
-        console.debug('listItems', el.listItems);
         const item1 = el.listItems[1];
         expect(item1.getAttribute('aria-selected')).to.equal('false');
 
@@ -300,5 +315,328 @@ export function runInteractiveListMixinSuite(customConfig) {
       it('can be extended to [role=toolbar]', async () => {});
       it('can be extended to [role=tree]', async () => {});
     });
+
+    describe('Overflow handling', () => {
+      /** @type {import('sinon').SinonFakeTimers | null} */
+      let clock = null;
+
+      /** @param {HTMLElement} el */
+      const isMoreButtonShown = el => {
+        const wrapper = /** @type {HTMLElement | null} */ (
+          el.querySelector('[data-more-button-wrapper]')
+        );
+        return wrapper?.style.display !== 'none';
+      };
+
+      /** @param {HTMLElement} el */
+      const isMoreButtonMenuShown = el => {
+        const menu = el.querySelector('[data-more-button-menu]');
+        return menu ? getComputedStyle(menu).width !== '0px' : false;
+      };
+
+      /** @param {HTMLElement} el */
+      const getMoreButton = el =>
+        /** @type {HTMLElement | null} */ (el.querySelector('[data-more-button]'));
+      /** @param {HTMLElement} el */
+      const getMoreButtonMenu = el => el.querySelector('[data-more-button-menu]');
+
+      /**
+       * @param {HTMLElement} element
+       */
+      function getCoordinates(element) {
+        const { x, y, height } = element.getBoundingClientRect();
+
+        return {
+          x: Math.floor(x + window.pageXOffset),
+          y: Math.floor(y + window.pageYOffset + height / 2),
+        };
+      }
+      /** @param {HTMLElement} el */
+      const clickOnMoreButton = async el => {
+        const moreButton = getMoreButton(el);
+        if (!moreButton) {
+          return;
+        }
+        const { x, y } = getCoordinates(moreButton);
+        await sendMouse({ type: 'click', position: [x, y] });
+        clock?.tick(100);
+      };
+
+      /** @param {HTMLElement} el */
+      const getDirectListItemsUnderMoreButtonMenu = el => [
+        ...Array.from(
+          el.querySelectorAll('[data-more-button-menu] > [role="listitem"]'),
+          item => /** @type {HTMLElement} */ (item),
+        ),
+      ];
+
+      /** @param {HTMLElement} el */
+      const getDirectListItemsUnderMainMenu = el => [
+        ...Array.from(
+          el.querySelectorAll('[slot="list"] > [role="listitem"]'),
+          item => /** @type {HTMLElement} */ (item),
+        ),
+      ];
+
+      /** @param {HTMLElement & { updateComplete: Promise<unknown> }} el */
+      const waitResizeEventDebounce = async el => {
+        await el.updateComplete;
+        // wait for resize event debouncer
+        clock?.tick(55);
+      };
+
+      beforeEach(() => {
+        clock = useFakeTimers({
+          shouldAdvanceTime: true,
+        });
+      });
+      afterEach(async () => {
+        clock?.restore();
+        await resetMouse();
+      });
+
+      it('should show no More button when all items fit', async () => {
+        const el = await fixture(html`
+          <${tag} name="foo" ._activeMode="${'tabbable-disclosure'}" .itemWrap="${true}" 
+            data-has-full-width-flyout orientation="horizontal" style="min-width: 170px; max-width: 170px;">
+            <div role="listitem" id="item1" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 1</a>
+            </div>
+            <div role="listitem" id="item2" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 2</a>
+            </div>
+            <div role="listitem" id="item3" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 3</a>
+            </div>
+            <div slot="more-button" style="min-width: 50px; max-width: 50px;">
+              <button>More</button>
+            </div>
+          </${tag}>
+        `);
+        await waitResizeEventDebounce(el);
+        // 3 items is 150px. They fit into 170px parent
+        expect(isMoreButtonShown(el)).to.equal(false);
+      });
+
+      it('should show  More button when not all items fit', async () => {
+        const el = await fixture(html`
+          <${tag} 
+            .itemWrap="${true}"
+            ?data-has-full-width-flyout="${l1Config.hasFullWidthFlyout}"
+            .config="${l1Config.openableConfig}"
+            .bar="${l1Config.isBar}"
+            ._activeMode="${'tabbable-disclosure'}" 
+            style="min-width: 170px; max-width: 170px;"            
+          >
+            <div role="listitem" id="item1" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 1</a>
+            </div>
+            <div role="listitem" id="item2" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 2</a>
+            </div>
+            <div role="listitem" id="item3" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 3</a>
+            </div>
+            <div role="listitem" id="item4" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 4</a>
+            </div>
+            <div slot="more-button" style="min-width: 50px; max-width: 50px;">
+              <button>More</button>
+            </div>
+          </${tag}>
+          <style>
+            [orientation='horizontal'] ::slotted([slot='list']) {
+              display: flex;
+            }
+          </style>
+        `);
+
+        await waitResizeEventDebounce(el);
+        // 4 items is 200px. They don't fit into 170px parent. So More button should be shown
+        expect(isMoreButtonShown(el)).to.equal(true);
+      });
+
+      it('should show 2 items when clicking on `More` button', async () => {
+        const el = await fixture(html`
+          <${tag} 
+            .itemWrap="${true}"
+            ?data-has-full-width-flyout="${l1Config.hasFullWidthFlyout}"
+            .config="${l1Config.openableConfig}"
+            .bar="${l1Config.isBar}"
+            ._activeMode="${'tabbable-disclosure'}" 
+            style="min-width: 170px; max-width: 170px;"            
+          >          
+            <div role="listitem" id="item1" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 1</a>
+            </div>
+            <div role="listitem" id="item2" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 2</a>
+            </div>
+            <div role="listitem" id="item3" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 3</a>
+            </div>
+            <div role="listitem" id="item4" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 4</a>
+            </div>
+            <div slot="more-button" style="min-width: 50px; max-width: 50px;">
+              <button>More</button>
+            </div>
+          </${tag}>
+        `);
+
+        await waitResizeEventDebounce(el);
+        await clickOnMoreButton(el);
+
+        expect(isMoreButtonMenuShown(el)).to.equal(true);
+        const labels = getDirectListItemsUnderMoreButtonMenu(el).map(
+          item => item.textContent?.trim() ?? '',
+        );
+        expect(labels).to.deep.equal(['Item 3', 'Item 4']);
+      });
+
+      it('should focus more button menu container when clicking on `More` button', async () => {
+        const el = await fixture(html`
+          <${tag} 
+            .itemWrap="${true}"
+            ?data-has-full-width-flyout="${l1Config.hasFullWidthFlyout}"
+            .config="${l1Config.openableConfig}"
+            .bar="${l1Config.isBar}"
+            ._activeMode="${'tabbable-disclosure'}" 
+            style="min-width: 170px; max-width: 170px;"            
+          >          
+            <div role="listitem" id="item1" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 1</a>
+            </div>
+            <div role="listitem" id="item2" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 2</a>
+            </div>
+            <div role="listitem" id="item3" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 3</a>
+            </div>
+            <div role="listitem" id="item4" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 4</a>
+            </div>
+            <div slot="more-button" style="min-width: 50px; max-width: 50px;">
+              <button>More</button>
+            </div>
+          </${tag}>
+        `);
+
+        await waitResizeEventDebounce(el);
+        await clickOnMoreButton(el);
+
+        expect(isMoreButtonMenuShown(el)).to.equal(true);
+        expect(getDeepActiveElement() === getMoreButtonMenu(el)).to.equal(true);
+      });
+
+      it('should open and then close More button menu when clicking 2 times on the More button', async () => {
+        const el = await fixture(html`
+          <${tag} 
+            .itemWrap="${true}"
+            ?data-has-full-width-flyout="${l1Config.hasFullWidthFlyout}"
+            .config="${l1Config.openableConfig}"
+            .bar="${l1Config.isBar}"
+            ._activeMode="${'tabbable-disclosure'}" 
+            style="min-width: 170px; max-width: 170px;"            
+          > 
+            <div role="listitem" id="item1" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 1</a>
+            </div>
+            <div role="listitem" id="item2" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 2</a>
+            </div>
+            <div role="listitem" id="item3" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 3</a>
+            </div>
+            <div role="listitem" id="item4" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 4</a>
+            </div>
+            <div slot="more-button" style="min-width: 50px; max-width: 50px;">
+              <button>More</button>
+            </div>
+          </${tag}>
+        `);
+
+        await waitResizeEventDebounce(el);
+        expect(isMoreButtonMenuShown(el)).to.equal(false);
+        await clickOnMoreButton(el);
+        expect(isMoreButtonMenuShown(el)).to.equal(true);
+        await clickOnMoreButton(el);
+        expect(isMoreButtonMenuShown(el)).to.equal(false);
+      });
+
+      it('should remove `More` button when making font smaller', async () => {
+        const el = await fixture(html`
+          <${tag} name="foo" ._activeMode="${'tabbable-disclosure'}" .itemWrap="${true}" 
+            data-has-full-width-flyout orientation="horizontal" style="min-width: 170px; max-width: 170px;">
+            <div role="listitem" id="item1" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 1</a>
+            </div>
+            <div role="listitem" id="item2" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 2</a>
+            </div>
+            <div role="listitem" id="item3" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 3</a>
+            </div>
+            <div slot="more-button" style="min-width: 50px; max-width: 50px;">
+              <button>More</button>
+            </div>
+          </${tag}>
+        `);
+        await waitResizeEventDebounce(el);
+
+        /**
+         * Make font smaller for first level items to force
+         * the menu render all 4 items and no `More` button
+         */
+        getDirectListItemsUnderMainMenu(el).forEach(item => {
+          // eslint-disable-next-line no-param-reassign
+          item.style.fontSize = '12px';
+        });
+        el?.dispatchEvent(new CustomEvent('resize', { composed: true, bubbles: true }));
+        await waitResizeEventDebounce(el);
+        expect(isMoreButtonShown(el)).to.equal(false);
+      });
+
+      it('should add `More` button when making font larger', async () => {
+        const el = await fixture(html`
+          <${tag} 
+            .itemWrap="${true}"
+            ?data-has-full-width-flyout="${l1Config.hasFullWidthFlyout}"
+            .config="${l1Config.openableConfig}"
+            .bar="${l1Config.isBar}"
+            ._activeMode="${'tabbable-disclosure'}" 
+            style="min-width: 170px; max-width: 170px;"            
+          > 
+            <div role="listitem" id="item1" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 1</a>
+            </div>
+            <div role="listitem" id="item2" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 2</a>
+            </div>
+            <div role="listitem" id="item3" style="min-width: 50px; max-width: 50px;">
+              <a href="#">Item 3</a>
+            </div>
+            <div slot="more-button" style="min-width: 50px; max-width: 50px;">
+              <button>More</button>
+            </div>
+          </${tag}>
+        `);
+        await waitResizeEventDebounce(el);
+
+        expect(getDirectListItemsUnderMainMenu(el).length).to.equal(3);
+        /**
+         * Make font larger for first level items to force
+         * the More button to appear
+         */
+        getDirectListItemsUnderMainMenu(el).forEach(item => {
+          // eslint-disable-next-line no-param-reassign
+          item.style.fontSize = '40px';
+        });
+        el?.dispatchEvent(new CustomEvent('resize', { composed: true, bubbles: true }));
+        await waitResizeEventDebounce(el);
+        expect(isMoreButtonShown(el)).to.equal(true);
+      });
+    });
   });
 }