@lion/ui 0.23.0 → 0.25.0

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

@@ -4,7 +4,6 @@ import { sendMouse, resetMouse } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import { getDeepActiveElement } from '@lion/ui/overlays.js';
 import { InteractiveListMixin } from '../src/InteractiveListMixin.js';
-
 class InteractiveListClass extends InteractiveListMixin(LitElement) {}
 
 /**
@@ -19,8 +18,7 @@ class InteractiveListClass extends InteractiveListMixin(LitElement) {}
  * @property {string} tagString
  */
 
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionMenu>} */ (_fixture);
-
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionMenu>} */ _fixture;
 const l1Config = {
   isBar: true,
   hasFullWidthFlyout: true,
@@ -41,80 +39,79 @@ export function runMoreButtonMenuMixinSuite(customConfig) {
   const cfg = {
     tagString: customConfig?.tagString || defineCE(InteractiveListClass),
   };
-
   const { tagString } = cfg;
   const tag = unsafeStatic(tagString);
-
   describe('MoreButtonMenuMixin', () => {
     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]')
-        );
+      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 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]'));
+      const getMoreButton = (el) =>
+        /** @type {HTMLElement | null} */ el.querySelector('[data-more-button]');
       /** @param {HTMLElement} el */
-      const getMoreButtonMenu = el => el.querySelector('[data-more-button-menu]');
+      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 clickOnMoreButton = async (el) => {
         const moreButton = getMoreButton(el);
         if (!moreButton) {
           return;
         }
         const { x, y } = getCoordinates(moreButton);
-        await sendMouse({ type: 'click', position: [x, y] });
+        await sendMouse({
+          type: 'click',
+          position: [x, y],
+        });
         clock?.tick(100);
       };
 
       /** @param {HTMLElement} el */
-      const getDirectListItemsUnderMoreButtonMenu = el => [
+      const getDirectListItemsUnderMoreButtonMenu = (el) => [
         ...Array.from(
           el.querySelectorAll('[data-more-button-menu] > [role="listitem"]'),
-          item => /** @type {HTMLElement} */ (item),
+          (item) => /** @type {HTMLElement} */ item,
         ),
       ];
 
       /** @param {HTMLElement} el */
-      const getDirectListItemsUnderMainMenu = el => [
+      const getDirectListItemsUnderMainMenu = (el) => [
         ...Array.from(
           el.querySelectorAll('[slot="list"] > [role="listitem"]'),
-          item => /** @type {HTMLElement} */ (item),
+          (item) => /** @type {HTMLElement} */ item,
         ),
       ];
 
       /** @param {HTMLElement & { updateComplete: Promise<unknown> }} el */
-      const waitResizeEventDebounce = async el => {
+      const waitResizeEventDebounce = async (el) => {
         await el.updateComplete;
         // wait for resize event debouncer
         clock?.tick(55);
       };
-
       beforeEach(() => {
         clock = sinon.useFakeTimers({
           shouldAdvanceTime: true,
@@ -124,7 +121,6 @@ export function runMoreButtonMenuMixinSuite(customConfig) {
         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}" 
@@ -147,7 +143,6 @@ export function runMoreButtonMenuMixinSuite(customConfig) {
         // 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} 
@@ -180,12 +175,10 @@ export function runMoreButtonMenuMixinSuite(customConfig) {
             }
           </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} 
@@ -213,17 +206,14 @@ export function runMoreButtonMenuMixinSuite(customConfig) {
             </div>
           </${tag}>
         `);
-
         await waitResizeEventDebounce(el);
         await clickOnMoreButton(el);
-
         expect(isMoreButtonMenuShown(el)).to.equal(true);
         const labels = getDirectListItemsUnderMoreButtonMenu(el).map(
-          item => item.textContent?.trim() ?? '',
+          (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} 
@@ -251,14 +241,11 @@ export function runMoreButtonMenuMixinSuite(customConfig) {
             </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} 
@@ -286,7 +273,6 @@ export function runMoreButtonMenuMixinSuite(customConfig) {
             </div>
           </${tag}>
         `);
-
         await waitResizeEventDebounce(el);
         expect(isMoreButtonMenuShown(el)).to.equal(false);
         await clickOnMoreButton(el);
@@ -294,7 +280,6 @@ export function runMoreButtonMenuMixinSuite(customConfig) {
         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}" 
@@ -319,15 +304,19 @@ export function runMoreButtonMenuMixinSuite(customConfig) {
          * Make font smaller for first level items to force
          * the menu render all 4 items and no `More` button
          */
-        getDirectListItemsUnderMainMenu(el).forEach(item => {
+        getDirectListItemsUnderMainMenu(el).forEach((item) => {
           // eslint-disable-next-line no-param-reassign
           item.style.fontSize = '12px';
         });
-        el?.dispatchEvent(new CustomEvent('resize', { composed: true, bubbles: true }));
+        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} 
@@ -353,17 +342,21 @@ export function runMoreButtonMenuMixinSuite(customConfig) {
           </${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 => {
+        getDirectListItemsUnderMainMenu(el).forEach((item) => {
           // eslint-disable-next-line no-param-reassign
           item.style.fontSize = '40px';
         });
-        el?.dispatchEvent(new CustomEvent('resize', { composed: true, bubbles: true }));
+        el?.dispatchEvent(
+          new CustomEvent('resize', {
+            composed: true,
+            bubbles: true,
+          }),
+        );
         await waitResizeEventDebounce(el);
         expect(isMoreButtonShown(el)).to.equal(true);
       });

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

@@ -4,7 +4,6 @@ import sinon from 'sinon';
 import { MultiLevelListMixin } from '../src/MultiLevelListMixin.js';
 import { InteractiveListMixin } from '../src/InteractiveListMixin.js';
 import { mimicKeyPress } from '../test-helpers/mimicKeyPress.js';
-
 class MultiLevelListClass extends MultiLevelListMixin(LitElement) {}
 class InteractiveListClass extends InteractiveListMixin(LitElement) {}
 
@@ -17,7 +16,7 @@ class InteractiveListClass extends InteractiveListMixin(LitElement) {}
  * @property {string} tagChildString
  */
 
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionMenu>} */ (_fixture);
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionMenu>} */ _fixture;
 
 /**
  * @param {TestConfig} [customConfig]
@@ -27,11 +26,9 @@ export function runMultiLevelListMixinSuite(customConfig) {
     tagString: customConfig?.tagString || defineCE(MultiLevelListClass),
     tagChildString: customConfig?.tagChildString || defineCE(InteractiveListClass),
   };
-
   const { tagString, tagChildString } = cfg;
   const tag = unsafeStatic(tagString);
   const tagChild = unsafeStatic(tagChildString);
-
   describe('MultiLevelListMixin', () => {
     it('has sublists', async () => {
       const el = await fixture(html`
@@ -52,11 +49,10 @@ export function runMultiLevelListMixinSuite(customConfig) {
           </div>
         </${tag}>
       `);
-      const subList = /** @type {MultiLevelListClass} */ (el.querySelector(tagChildString));
+      const subList = /** @type {MultiLevelListClass} */ el.querySelector(tagChildString);
       expect(subList).to.exist;
       expect(subList.level).to.equal(2);
     });
-
     it('inherits checked state from children when checked via href match', async () => {
       const el = await fixture(html`
         <${tag}>
@@ -81,7 +77,6 @@ export function runMultiLevelListMixinSuite(customConfig) {
         expect(item0.getAttribute('aria-current')).to.equal('true');
       }
     });
-
     describe('Interactions', () => {
       describe('Keyboard navigation', () => {
         it('navigates between L1 items on [ArrowDown] [ArrowUp] keys', async () => {
@@ -112,7 +107,6 @@ export function runMultiLevelListMixinSuite(customConfig) {
 
           // Normalize
           el.activeIndex = 0;
-
           mimicKeyPress(_listNode, 'ArrowDown');
           expect(el.activeIndex).to.be.equal(1);
           mimicKeyPress(_listNode, 'ArrowDown');
@@ -120,7 +114,6 @@ export function runMultiLevelListMixinSuite(customConfig) {
           mimicKeyPress(_listNode, 'ArrowUp');
           expect(el.activeIndex).to.be.equal(1);
         });
-
         it('stops navigation by default at end of option list', async () => {
           const el = await fixture(html`
             <${tag}>
@@ -149,15 +142,12 @@ export function runMultiLevelListMixinSuite(customConfig) {
 
           // Normalize
           el.activeIndex = 0;
-
           mimicKeyPress(_listNode, 'ArrowUp');
           expect(el.activeIndex).to.be.equal(0);
-
           el.activeIndex = 2;
           mimicKeyPress(_listNode, 'ArrowDown');
           expect(el.activeIndex).to.be.equal(2);
         });
-
         it('opens subList on [Enter] key press', async () => {
           const el = await fixture(html`
             <${tag}>
@@ -184,11 +174,9 @@ export function runMultiLevelListMixinSuite(customConfig) {
           // Normalize
           el.activeIndex = 0;
           const clickSpy = sinon.spy(el.activeItem, 'click');
-
           mimicKeyPress(_listNode, 'Enter');
           expect(clickSpy).to.have.been.calledOnce;
         });
-
         it('navigates between L2 items on [ArrowDown] [ArrowUp] keys', async () => {
           const el = await fixture(html`
             <${tag} axis="inline">
@@ -211,14 +199,12 @@ export function runMultiLevelListMixinSuite(customConfig) {
               </div>
             </${tag}>
           `);
-
-          const subList = /** @type {MultiLevelListClass} */ (el.querySelector(tagChildString));
+          const subList = /** @type {MultiLevelListClass} */ el.querySelector(tagChildString);
           // @ts-expect-error [allow-protected-in-tests]
           const { _listNode } = subList;
 
           // Normalize
           subList.activeIndex = 0;
-
           mimicKeyPress(_listNode, 'ArrowDown');
           expect(subList.activeIndex).to.be.equal(1);
           mimicKeyPress(_listNode, 'ArrowDown');
@@ -226,7 +212,6 @@ export function runMultiLevelListMixinSuite(customConfig) {
           mimicKeyPress(_listNode, 'ArrowUp');
           expect(subList.activeIndex).to.be.equal(1);
         });
-
         it('close method gets called on [ArrowUp] key when in L2 and horizontal', async () => {
           const el = await fixture(html`
             <${tag}>
@@ -249,7 +234,7 @@ export function runMultiLevelListMixinSuite(customConfig) {
               </div>
             </${tag}>
           `);
-          const subList = /** @type {MultiLevelListClass} */ (el.querySelector(tagChildString));
+          const subList = /** @type {MultiLevelListClass} */ el.querySelector(tagChildString);
           // @ts-ignore
           if (subList?.close) {
             // @ts-ignore
@@ -260,12 +245,10 @@ export function runMultiLevelListMixinSuite(customConfig) {
             // Normalize
             subList.activeIndex = 0;
             subList.axis = 'inline';
-
             mimicKeyPress(_listNode, 'ArrowUp');
             expect(closeSpy).to.have.been.calledOnce;
           }
         });
-
         it('close method gets called on [ArrowLeft] key when in L2 and vertical', async () => {
           const el = await fixture(html`
             <${tag}>
@@ -288,7 +271,7 @@ export function runMultiLevelListMixinSuite(customConfig) {
               </div>
             </${tag}>
           `);
-          const subList = /** @type {MultiLevelListClass} */ (el.querySelector(tagChildString));
+          const subList = /** @type {MultiLevelListClass} */ el.querySelector(tagChildString);
           // @ts-ignore
           if (subList?.close) {
             // @ts-ignore
@@ -298,7 +281,6 @@ export function runMultiLevelListMixinSuite(customConfig) {
 
             // Normalize
             subList.activeIndex = 0;
-
             mimicKeyPress(_listNode, 'ArrowLeft');
             expect(closeSpy).to.have.been.calledOnce;
           }

package/components/overlays/src/ArrowMixin.js

@@ -15,23 +15,20 @@ import { OverlayMixin } from './OverlayMixin.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
 // prettier-ignore
-export const ArrowMixinImplementation = /** @type {ArrowMixin} */ (superclass =>
-  class ArrowMixin extends OverlayMixin(superclass) {
-    static get properties() {
-      return {
-        hasArrow: {
-          type: Boolean,
-          reflect: true,
-          attribute: 'has-arrow',
-        },
-      };
-    }
-
-    static get styles() {
-      return [
-        // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field). Dot form kept deliberately: bracket access is exempt from property mangling (terser keep_quoted), which could split this property into two names. Upstream fix: declare an accessor in the parent type
-        .../** @type {CSSResultArray} */ (super.styles || []),
-        css`
+export const ArrowMixinImplementation = /** @type {ArrowMixin} */superclass => class ArrowMixin extends OverlayMixin(superclass) {
+  static get properties() {
+    return {
+      hasArrow: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'has-arrow'
+      }
+    };
+  }
+  static get styles() {
+    return [
+    // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field). Dot form kept deliberately: bracket access is exempt from property mangling (terser keep_quoted), which could split this property into two names. Upstream fix: declare an accessor in the parent type
+    ...(/** @type {CSSResultArray} */super.styles || []), css`
           :host {
             --tooltip-arrow-width: 12px;
             --tooltip-arrow-height: 8px;
@@ -94,132 +91,119 @@ export const ArrowMixinImplementation = /** @type {ArrowMixin} */ (superclass =>
           :host(:not([has-arrow])) .arrow {
             display: none;
           }
-        `,
-      ];
-    }
-
-    constructor() {
-      super();
-      this.hasArrow = true;
-      /** @private */
-      this.__setupRepositionCompletePromise();
-    }
-
-    render() {
-      return html`
+        `];
+  }
+  constructor() {
+    super();
+    this.hasArrow = true;
+    /** @private */
+    this.__setupRepositionCompletePromise();
+  }
+  render() {
+    return html`
         <slot name="invoker"></slot>
         <div id="overlay-content-node-wrapper">
           <slot name="content"></slot>
           ${this._arrowNodeTemplate()}
         </div>
       `;
-    }
+  }
 
-    /** @protected */
-    _arrowNodeTemplate() {
-      return html`
+  /** @protected */
+  _arrowNodeTemplate() {
+    return html`
         <div class="arrow" aria-hidden="true" data-popper-arrow>${this._arrowTemplate()}</div>
       `;
-    }
+  }
 
-    /** @protected */
-    // eslint-disable-next-line class-methods-use-this
-    _arrowTemplate() {
-      return html`
+  /** @protected */
+  // eslint-disable-next-line class-methods-use-this
+  _arrowTemplate() {
+    return html`
         <svg viewBox="0 0 12 8" class="arrow__graphic">
           <path d="M 0,0 h 12 L 6,8 z"></path>
         </svg>
       `;
+  }
+
+  /**
+   * Overrides arrow and keepTogether modifier to be enabled,
+   * and adds onCreate and onUpdate hooks to sync from popper state
+   * @configure OverlayMixin
+   * @returns {OverlayConfig}
+   * @protected
+   */
+  // eslint-disable-next-line
+  _defineOverlayConfig() {
+    const superConfig = super._defineOverlayConfig() || {};
+    if (!this.hasArrow) {
+      return superConfig;
     }
-
-    /**
-     * Overrides arrow and keepTogether modifier to be enabled,
-     * and adds onCreate and onUpdate hooks to sync from popper state
-     * @configure OverlayMixin
-     * @returns {OverlayConfig}
-     * @protected
-     */
-    // eslint-disable-next-line
-    _defineOverlayConfig() {
-      const superConfig = super._defineOverlayConfig() || {};
-      if (!this.hasArrow) {
-        return superConfig;
+    return {
+      ...superConfig,
+      popperConfig: {
+        ...this._getPopperArrowConfig(/** @type {Partial<PopperOptions>} */superConfig.popperConfig)
       }
-      return {
-        ...superConfig,
-        popperConfig: {
-          ...this._getPopperArrowConfig(
-            /** @type {Partial<PopperOptions>} */ (superConfig.popperConfig),
-          ),
-        },
-      };
-    }
-
-    /**
-     * @param {Partial<PopperOptions>} popperConfigToExtendFrom
-     * @returns {Partial<PopperOptions>}
-     * @protected
-     */
-    _getPopperArrowConfig(popperConfigToExtendFrom) {
-      /** @type {Partial<PopperOptions> & { afterWrite: (arg0: Partial<import('@popperjs/core/lib/popper.js').State>) => void }} */
-      const popperCfg = {
-        ...(popperConfigToExtendFrom || {}),
-        placement: /** @type {Placement} */ ('top'),
-        modifiers: [
-          {
-            name: 'arrow',
-            enabled: true,
-            options: {
-              padding: 8, // 8px from the edges of the popper
-            },
-          },
-          {
-            name: 'offset',
-            enabled: true,
-            options: { offset: [0, 8] },
-          },
-          ...((popperConfigToExtendFrom && popperConfigToExtendFrom.modifiers) || []),
-        ],
-        /** @param {Partial<import('@popperjs/core/lib/popper.js').State>} data */
-        onFirstUpdate: data => {
-          this.__syncFromPopperState(data);
-        },
-        /** @param {Partial<import('@popperjs/core/lib/popper.js').State>} data */
-        afterWrite: data => {
-          this.__syncFromPopperState(data);
-        },
-      };
-
-      return popperCfg;
-    }
-
-    /** @private */
-    __setupRepositionCompletePromise() {
-      this.repositionComplete = new Promise(resolve => {
-        this.__repositionCompleteResolver = resolve;
-      });
-    }
-
-    get _arrowNode() {
-      return /** @type {ShadowRoot} */ (this.shadowRoot).querySelector('[data-popper-arrow]');
-    }
-
-    /**
-     * @param {Partial<import('@popperjs/core/lib/popper.js').State>} data
-     * @private
-     */
-    __syncFromPopperState(data) {
-      if (!data) {
-        return;
-      }
-      if (
-        this._arrowNode &&
-        data.placement !== /** @type {Element & {placement:string}} */ (this._arrowNode).placement
-      ) {
-        /** @type {function} */ (this.__repositionCompleteResolver)(data.placement);
-        this.__setupRepositionCompletePromise();
+    };
+  }
+
+  /**
+   * @param {Partial<PopperOptions>} popperConfigToExtendFrom
+   * @returns {Partial<PopperOptions>}
+   * @protected
+   */
+  _getPopperArrowConfig(popperConfigToExtendFrom) {
+    /** @type {Partial<PopperOptions> & { afterWrite: (arg0: Partial<import('@popperjs/core/lib/popper.js').State>) => void }} */
+    const popperCfg = {
+      ...(popperConfigToExtendFrom || {}),
+      placement: (/** @type {Placement} */'top'),
+      modifiers: [{
+        name: 'arrow',
+        enabled: true,
+        options: {
+          padding: 8 // 8px from the edges of the popper
+        }
+      }, {
+        name: 'offset',
+        enabled: true,
+        options: {
+          offset: [0, 8]
+        }
+      }, ...(popperConfigToExtendFrom && popperConfigToExtendFrom.modifiers || [])],
+      /** @param {Partial<import('@popperjs/core/lib/popper.js').State>} data */
+      onFirstUpdate: data => {
+        this.__syncFromPopperState(data);
+      },
+      /** @param {Partial<import('@popperjs/core/lib/popper.js').State>} data */
+      afterWrite: data => {
+        this.__syncFromPopperState(data);
       }
+    };
+    return popperCfg;
+  }
+
+  /** @private */
+  __setupRepositionCompletePromise() {
+    this.repositionComplete = new Promise(resolve => {
+      this.__repositionCompleteResolver = resolve;
+    });
+  }
+  get _arrowNode() {
+    return /** @type {ShadowRoot} */this.shadowRoot.querySelector('[data-popper-arrow]');
+  }
+
+  /**
+   * @param {Partial<import('@popperjs/core/lib/popper.js').State>} data
+   * @private
+   */
+  __syncFromPopperState(data) {
+    if (!data) {
+      return;
     }
-  });
-
+    if (this._arrowNode && data.placement !== /** @type {Element & {placement:string}} */this._arrowNode.placement) {
+      /** @type {function} */this.__repositionCompleteResolver(data.placement);
+      this.__setupRepositionCompletePromise();
+    }
+  }
+};
 export const ArrowMixin = dedupeMixin(ArrowMixinImplementation);