@lion/ui 0.20.0-menu-system.0 → 0.20.0

package/components/overlays/src/OverlayMixin.js

@@ -33,7 +33,10 @@ export const OverlayMixinImplementation = superclass => {
   class OverlayMixin extends superclass {
     static get properties() {
       return {
-        opened: { type: Boolean, reflect: true },
+        opened: {
+          type: Boolean,
+          reflect: true,
+        },
       };
     }
 
@@ -59,17 +62,6 @@ export const OverlayMixinImplementation = superclass => {
       this.open = this.open.bind(this);
       /** @type {EventListener} */
       this.close = this.close.bind(this);
-
-      // // By default, we go for disclosure behavior
-      // // TODO: in the future, bring disclosure behavior to a controller (and therefore directive).
-      // // Take inspiration from VisibilityToggleCtrl of portal elements
-      // /**
-      //  * Terminology aligned with https://open-ui.org/components/openable.explainer/
-      //  * @type {'disclosure'|'overlay'}
-      //  */
-      // this.openableMode = 'disclosure';
-
-      // allow hybrid disclosure/overlay components
     }
 
     get config() {
@@ -78,7 +70,6 @@ export const OverlayMixinImplementation = superclass => {
 
     /** @param {OverlayConfig} value */
     set config(value) {
-      // TODO: built-in in overlayCtrl now... delete here
       const shouldUpdate = !isEqualConfig(this.config, value);
 
       if (this._overlayCtrl && shouldUpdate) {
@@ -170,8 +161,6 @@ export const OverlayMixinImplementation = superclass => {
      */
     // eslint-disable-next-line class-methods-use-this
     _setupOpenCloseListeners() {
-      // Keeps the close-overlay event private for the controller.
-      // (we already have )
       /**
        * @param {{ stopPropagation: () => void; }} ev
        */
@@ -229,11 +218,11 @@ export const OverlayMixinImplementation = superclass => {
     // @ts-expect-error
     static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
 
-    // get _overlayInvokerNode() {
-    //   return /** @type {HTMLElement | undefined} */ (
-    //     Array.from(this.children).find(child => child.slot === 'invoker')
-    //   );
-    // }
+    get _overlayInvokerNode() {
+      return /** @type {HTMLElement | undefined} */ (
+        Array.from(this.children).find(child => child.slot === 'invoker')
+      );
+    }
 
     /**
      * @overridable
@@ -267,46 +256,13 @@ export const OverlayMixinImplementation = superclass => {
       );
     }
 
-    /**
-     * @param {Element} focusableElOrWrapper
-     * @returns {Element|null}
-     */
-    static _getFocusableInvokerEl(focusableElOrWrapper) {
-      // return focusableElOrWrapper;
-      return (
-        focusableElOrWrapper &&
-        (focusableElOrWrapper.hasAttribute('tabindex') || focusableElOrWrapper.tagName === 'BUTTON'
-          ? focusableElOrWrapper
-          : focusableElOrWrapper.querySelector('[role=button], button'))
-      );
-    }
-
-    get _overlayInvokerNode() {
-      const ctor = /** @type {typeof OverlayMixin} */ (this.constructor);
-      if (!this.__invokerNode) {
-        const slottedNode = Array.from(this.children).find(child => child.slot === 'invoker');
-        if (slottedNode) {
-          this.__invokerNode = ctor._getFocusableInvokerEl(slottedNode);
-        } else {
-          // Look for preceeding sibling with [data-invoker] attribute, and try to find a focusable element in it (either itself or a child)
-          this.__invokerNode =
-            this.previousElementSibling?.hasAttribute('data-invoker') &&
-            ctor._getFocusableInvokerEl(this.previousElementSibling);
-        }
-      }
-      return this.__invokerNode;
-    }
-
     /** @protected */
     _setupOverlayCtrl() {
       if (this.#hasSetup) return;
-
-      const invokerNode = this._overlayInvokerNode;
-
       const config = {
         contentNode: this._overlayContentNode,
         contentWrapperNode: this._overlayContentWrapperNode,
-        invokerNode: invokerNode && invokerNode instanceof HTMLElement ? invokerNode : undefined,
+        invokerNode: this._overlayInvokerNode,
         referenceNode: this._overlayReferenceNode,
         backdropNode: this._overlayBackdropNode,
       };
@@ -326,8 +282,6 @@ export const OverlayMixinImplementation = superclass => {
 
     /** @protected */
     _teardownOverlayCtrl() {
-      // Make sure that dynamic behavior (e.g. responsive) is possible by allowing multiple setups and teardowns of the overlay controller.
-      this.#hasSetup = false;
       if (!this._overlayCtrl) return;
 
       this._teardownOpenCloseListeners();
@@ -480,7 +434,6 @@ export const OverlayMixinImplementation = superclass => {
   for (const postProcessor of overlayMixinPostProcessors) {
     postProcessor(OverlayMixin);
   }
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
-  return OverlayMixin;
+  return /** @type {* & OverlayMixin} */ (OverlayMixin);
 };
 export const OverlayMixin = dedupeMixin(OverlayMixinImplementation);

package/components/overlays/src/OverlaysManager.js

@@ -209,9 +209,9 @@ export class OverlaysManager {
           const newMarginBottom = this.__bodySizeVars.marginBottom + scrollbarHeight;
           // @ts-expect-error [external]: CSS not yet typed
           if (window.CSS?.number && document.body.attributeStyleMap?.set) {
-            // @ts-ignore - CSS Typed OM not fully typed
+            // @ts-ignore
             document.body.attributeStyleMap.set('margin-right', CSS.px(newMarginRight));
-            // @ts-ignore - CSS Typed OM not fully typed
+            // @ts-ignore
             document.body.attributeStyleMap.set('margin-bottom', CSS.px(newMarginBottom));
           } else {
             document.body.style.marginRight = `${newMarginRight}px`;

package/components/overlays/src/configurations/visibility-trigger-partials/withHoverInteraction.js

@@ -37,11 +37,29 @@ export function withHoverInteraction({
       /** @type {NodeJS.Timeout} */
       let pendingLongpressTimeout;
       let longpressCompleted = false;
+      // A tap fires pointerdown → pointerup → focusin because the browser moves keyboard focus to
+      // the tapped element. We only want focusin to open the tooltip when triggered by keyboard (Tab),
+      // not by tap. isLastPointerTouch marks that the preceding pointer event was a touch so the
+      // focusin handler can skip it.
+      let isLastPointerTouch = false;
+      // A tap fires the full mouse compatibility sequence: pointerdown → pointerup → mousedown → mouseup → click.
+      // Browsers generate these compatibility events automatically so touch works with mouse-only code.
+      // After a longpress the same click fires, which would trigger any click handler on the invoker
+      // e.g. opening a dialog alongside the tooltip. We register a capture-phase listener at longpress
+      // completion to intercept it, as capture runs before bubble so we stop it regardless of registration order.
+      /** @type {((e: Event) => void) | null} */
+      let pendingClickSuppressor = null;
 
       function resetActive() {
         isFocused = false;
         isHovered = false;
         longpressCompleted = false;
+        if (pendingClickSuppressor) {
+          controller.invokerNode?.removeEventListener('click', pendingClickSuppressor, {
+            capture: true,
+          });
+          pendingClickSuppressor = null;
+        }
       }
 
       /**
@@ -59,17 +77,17 @@ export function withHoverInteraction({
       /**
        * @param {Event|PointerEvent} event
        */
-      async function handleHoverAndFocus(event) {
+      function handleHoverAndFocus(event) {
         const { type } = event;
         isFocused = type === 'focusout' ? false : isFocused || type === 'focusin';
         isHovered = type === 'mouseleave' ? false : isHovered || type === 'mouseenter';
-        // On touch devices, only open on keyboard-triggered focus, not tap-triggered focus
-        if (
-          !isHoverSupported &&
-          type === 'focusin' &&
-          !controller.invokerNode?.matches(':focus-visible')
-        )
-          return;
+        if (!isHoverSupported && type === 'focusin') {
+          if (isLastPointerTouch) {
+            isLastPointerTouch = false;
+            return;
+          }
+          if (!controller.invokerNode?.matches(':focus-visible')) return;
+        }
         const shouldOpen = isFocused || isHovered;
         openClose({ shouldOpen, openTimeout: delayIn, closeTimeout: delayOut });
       }
@@ -80,15 +98,23 @@ export function withHoverInteraction({
       }
 
       /** @param {PointerEvent} event */
-      async function handleLongpress(event) {
+      function handleLongpress(event) {
         clearTimeout(pendingLongpressTimeout);
         if (event.pointerType !== 'touch') return;
         const { type } = event;
 
         if (type === 'pointerdown') {
           longpressCompleted = false;
+          isLastPointerTouch = true;
           pendingLongpressTimeout = setTimeout(() => {
             longpressCompleted = true;
+            // Intercept the compatibility click the browser generates at the end of the touch sequence.
+            // Capture phase ensures we run before any bubble-phase handler (e.g. a dialog opener).
+            pendingClickSuppressor = e => e.stopImmediatePropagation();
+            controller.invokerNode?.addEventListener('click', pendingClickSuppressor, {
+              once: true, // auto-removes after first click
+              capture: true,
+            });
             openClose({ shouldOpen: true });
           }, longpressDuration);
         } else {
@@ -140,6 +166,12 @@ export function withHoverInteraction({
             controller.invokerNode?.removeEventListener('pointerdown', handleLongpress);
             controller.invokerNode?.removeEventListener('pointerup', handleLongpress);
             controller.invokerNode?.removeEventListener('pointerleave', handleLongpress);
+            if (pendingClickSuppressor) {
+              controller.invokerNode?.removeEventListener('click', pendingClickSuppressor, {
+                capture: true,
+              });
+              pendingClickSuppressor = null;
+            }
           }
         },
       };

package/components/overlays/src/utils/adopt-styles.js

@@ -56,8 +56,7 @@ function adoptStyleWhenAdoptedStylesheetsNotSupported(
     const styleEl = document.createElement('style');
     // keep notation, so it's not renamed in minification/build
     // eslint-disable-next-line dot-notation
-    // @ts-ignore - litNonce is a custom property
-    const nonce = window.litNonce;
+    const nonce = window['litNonce'];
     if (nonce !== undefined) {
       styleEl.setAttribute('nonce', nonce);
     }
@@ -125,7 +124,7 @@ export function adoptStyle(renderRoot, style, { teardown = false } = {}) {
   if (!teardown) {
     // @ts-ignore
     // eslint-disable-next-line no-param-reassign
-    renderRoot.adoptedStyleSheets = [...(renderRoot.adoptedStyleSheets || []), sheet];
+    renderRoot.adoptedStyleSheets = [...renderRoot.adoptedStyleSheets, sheet];
   } else if (renderRoot.adoptedStyleSheets.includes(sheet)) {
     // @ts-ignore
     // eslint-disable-next-line no-param-reassign

package/components/overlays/src/utils/get-focusable-elements.js

@@ -8,7 +8,6 @@ import { isVisible } from './is-visible.js';
 import { sortByTabIndex } from './sort-by-tabindex.js';
 
 // IE11 supports matches as 'msMatchesSelector'
-/** @type {'matches' | 'msMatchesSelector'} */
 const matchesFunc = 'matches' in Element.prototype ? 'matches' : 'msMatchesSelector';
 
 /**
@@ -17,14 +16,11 @@ const matchesFunc = 'matches' in Element.prototype ? 'matches' : 'msMatchesSelec
  */
 function isFocusable(element) {
   // Elements that cannot be focused if they have [disabled] attribute.
-  // @ts-ignore - msMatchesSelector is legacy
   if (element[matchesFunc]('input, select, textarea, button, object')) {
-    // @ts-ignore
     return element[matchesFunc](':not([disabled])');
   }
 
   // Elements that can be focused even if they have [disabled] attribute.
-  // @ts-ignore
   return element[matchesFunc]('a[href], area[href], iframe, [tabindex], [contentEditable]');
 }
 

package/components/overlays/src/utils/is-equal-config.js

@@ -12,17 +12,13 @@
  */
 export function isEqualConfig(a, b) {
   if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) {
-    if (typeof a === 'function' && typeof b === 'function') {
-      return /** @type {Function} */ (a).toString() === /** @type {Function} */ (b).toString();
-    }
     return a === b;
   }
-  if (a instanceof Node && b instanceof Node) {
-    return a === b;
+  const aProps = Object.keys(a);
+  const bProps = Object.keys(b);
+  if (aProps.length !== bProps.length) {
+    return false;
   }
-
-  return Array.from(new Set([...Object.keys(a), ...Object.keys(b)])).every(prop =>
-    // @ts-ignore - dynamic property access
-    isEqualConfig(a[prop], b[prop], prop),
-  );
+  const isEqual = /** @param {string} prop */ prop => isEqualConfig(a[prop], b[prop]);
+  return aProps.every(isEqual);
 }

package/components/overlays/test/OverlayController.test.js

@@ -115,35 +115,26 @@ const withLocalTestConfig = () =>
  */
 async function createNestedEscControllers(parentContent) {
   const childContent = /** @type {HTMLDivElement} */ (parentContent.querySelector('div[id]'));
+  // Assert valid fixure
+  const isValidFixture =
+    (parentContent.id.startsWith('parent-overlay--hidesOnEsc') ||
+      parentContent.id.startsWith('parent-overlay--hidesOnOutsideEsc')) &&
+    (childContent.id.startsWith('child-overlay--hidesOnEsc') ||
+      childContent.id.startsWith('child-overlay--hidesOnOutsideEsc'));
+  if (!isValidFixture) {
+    throw new Error('Provide a valid fixture');
+  }
 
   if (parentContent.hasAttribute('data-convert-to-shadow-root')) {
     const shadowRootParent = parentContent.attachShadow({ mode: 'open' });
     shadowRootParent.appendChild(childContent);
   }
 
-  const parentConfig = {};
-  const childConfig = {};
-
   const parentHasOutsideOnEsc = parentContent.id.startsWith('parent-overlay--hidesOnOutsideEsc');
   const childHasOutsideOnEsc = childContent.id.startsWith('child-overlay--hidesOnOutsideEsc');
 
-  if (parentHasOutsideOnEsc) {
-    parentConfig.hidesOnOutsideEsc = true;
-  } else {
-    parentConfig.hidesOnEsc = true;
-  }
-  if (childHasOutsideOnEsc) {
-    childConfig.hidesOnOutsideEsc = true;
-  } else {
-    childConfig.hidesOnEsc = true;
-  }
-
-  const parentHasSyncChildrenCloseState =
-    parentContent.dataset.syncChildrenCloseState !== undefined;
-
-  if (parentHasSyncChildrenCloseState) {
-    parentConfig.syncChildrenCloseState = true;
-  }
+  const parentConfig = parentHasOutsideOnEsc ? { hidesOnOutsideEsc: true } : { hidesOnEsc: true };
+  const childConfig = childHasOutsideOnEsc ? { hidesOnOutsideEsc: true } : { hidesOnEsc: true };
 
   const parentOverlay = new OverlayController({
     ...withGlobalTestConfig(),
@@ -292,9 +283,8 @@ describe('OverlayController', () => {
             contentNode,
           });
         };
-
         expect(createOverlayController).to.throw(
-          '[OverlayController] Could not find a render target, makes sure contentNode has a parent element (or contentWrapperNode is connected)',
+          '[OverlayController] Could not find a render target, since the provided contentNode is not connected to the DOM. Make sure that it is connected, e.g. by doing "document.body.appendChild(contentNode)", before passing it on.',
         );
       });
 
@@ -356,21 +346,6 @@ describe('OverlayController', () => {
       await ctrl.hide();
       expect(ctrl.isShown).to.be.false;
     });
-
-    // it('cleans up the dom structure it created', async () => {
-    //   const contentNode = /** @type {HTMLElement} */ (fixtureSync(html`<div>my content</div>`));
-    //   const ctrl = new OverlayController({
-    //     placementMode: 'global',
-    //     contentNode,
-    //   });
-    //   await ctrl.show();
-    //   expect(ctrl.contentWrapperNode).to.exist;
-    //   expect(ctrl.__wrappingDialogNode).to.exist;
-
-    //   await ctrl.teardown();
-    //   expect(ctrl.contentWrapperNode).to.not.exist;
-    //   expect(ctrl.__wrappingDialogNode).to.not.exist;
-    // });
   });
 
   describe('Node Configuration', () => {
@@ -428,7 +403,7 @@ describe('OverlayController', () => {
               { ignoreAttributes: ['closedby'] },
             );
 
-            expect(el).lightDom.to.equal(`<div data-content="" slot="content">projected</div>`);
+            expect(el).lightDom.to.equal(`<div slot="content">projected</div>`);
           });
         });
 
@@ -450,7 +425,7 @@ describe('OverlayController', () => {
               `
               <dialog data-overlay-outer-wrapper="" open="" role="none" style="${wrappingDialogNodeStyle}">
                 <div data-id="content-wrapper">
-                  <div data-content="" id="content">non projected</div>
+                  <div id="content">non projected</div>
                 </div>
               </dialog>
           `,
@@ -645,7 +620,6 @@ describe('OverlayController', () => {
     });
   });
 
-  // TODO: make features modular (so they can be treeshaken) and test their lifecycle within this desrcibe
   describe('Feature Configuration', () => {
     describe('trapsKeyboardFocus', () => {
       it('focuses the overlay on show', async () => {
@@ -1014,7 +988,6 @@ describe('OverlayController', () => {
         });
       });
     });
-
     describe('hidesOnOutsideClick', () => {
       it('hides on outside click', async () => {
         const contentNode = /** @type {HTMLElement} */ (await fixture('<div>Content</div>'));
@@ -1735,91 +1708,6 @@ describe('OverlayController', () => {
         expect(ctrl1.hasActiveBackdrop).to.be.true;
       });
     });
-
-    describe('focusContentOnOpen', () => {
-      it('adds tabindex="-1" to the content node when focusContentOnOpen is true', async () => {
-        const ctrl = new OverlayController({
-          ...withGlobalTestConfig(),
-          isBlocking: false,
-          focusContentOnOpen: true,
-        });
-        const contentNode = /** @type {HTMLElement} */ (await fixture('<div>Content</div>'));
-        ctrl.updateConfig({ contentNode });
-        await ctrl.show();
-        expect(contentNode.getAttribute('tabindex')).to.equal('-1');
-      });
-
-      it('makes contentNode the root of "next tab flow"', async () => {
-        const ctrl = new OverlayController({
-          ...withGlobalTestConfig(),
-          isBlocking: false,
-          focusContentOnOpen: true,
-        });
-        const contentNode = /** @type {HTMLElement} */ (
-          await fixture('<div><button>Button</button></div>')
-        );
-        ctrl.updateConfig({ contentNode });
-        await ctrl.show();
-        const button = /** @type {HTMLButtonElement} */ (contentNode.querySelector('button'));
-        button.focus();
-        expect(isActiveElement(button)).to.be.true;
-      });
-    });
-
-    describe('syncChildrenCloseState', () => {
-      it('does not close all children of nested controllers when syncChildrenCloseState is false', async () => {
-        const parentContent = /** @type {HTMLDivElement} */ (
-          await fixture(
-            html` <!-- -->
-              <div data-sync-children-close-state id="parent-overlay">
-                <div id="child-overlay">we open our child and it will close when parent does</div>
-              </div>`,
-          )
-        );
-        const { parentOverlay, childOverlay } = await createNestedEscControllers(parentContent);
-        expect(parentOverlay.isShown).to.be.true;
-        expect(childOverlay.isShown).to.be.true;
-
-        await parentOverlay.hide();
-        await childOverlay._hideComplete;
-        expect(parentOverlay.isShown).to.be.false;
-        expect(childOverlay.isShown).to.be.false;
-      });
-
-      it('does not close all children of nested controllers when syncChildrenCloseState is false', async () => {
-        const parentContent = /** @type {HTMLDivElement} */ (
-          await fixture(
-            html` <!-- -->
-              <div id="parent-overlay">
-                <div id="child-overlay">
-                  we open our child and it will not close when parent does
-                </div>
-              </div>`,
-          )
-        );
-        const { parentOverlay, childOverlay } = await createNestedEscControllers(parentContent);
-        expect(parentOverlay.isShown).to.be.true;
-        expect(childOverlay.isShown).to.be.true;
-
-        await parentOverlay.hide();
-        expect(parentOverlay.isShown).to.be.false;
-        expect(childOverlay.isShown).to.be.true;
-      });
-    });
-
-    describe('isActivated', () => {
-      it('allows to conditionally disable overlay/openable functionality (for responsive context like nav menus, accordions/collapsibles vs plain headings/content etc.)', async () => {
-        const ctrl = new OverlayController({
-          ...withGlobalTestConfig(),
-          isActivated: false,
-        });
-        expect(ctrl.__hasSetup).to.be.false;
-        ctrl.updateConfig({
-          isActivated: true,
-        });
-        expect(ctrl.__hasSetup).to.be.true;
-      });
-    });
   });
 
   describe('Show / Hide / Toggle', () => {
@@ -2410,7 +2298,6 @@ describe('OverlayController', () => {
     });
 
     it('should run with scroll prevention', async () => {
-      await overlayControllerPreventsScroll.hide();
       await overlayControllerPreventsScroll.show();
 
       expect(

package/components/overlays/test/utils-tests/is-equal-config.test.js

@@ -48,7 +48,7 @@ describe('isEqualConfig()', () => {
     expect(isEqualConfig({ ...config, isBlocking: true }, config)).eql(false);
   });
 
-  it.skip('regards missing props different from ones with undefined value', () => {
+  it('regards missing props different from ones with undefined value', () => {
     const config = TestConfig();
     expect(isEqualConfig(config, { ...config, referenceNode: undefined })).eql(false);
   });

package/components/overlays/test-suites/OverlayMixin.suite.js

@@ -537,13 +537,13 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       it('works with cache directive when reconnected', async () => {
         class CachingContext extends LitElement {
           static properties = {
-            showOverlay: { type: Boolean },
+            switched: { type: Boolean },
           };
 
           constructor() {
             super();
 
-            this.showOverlay = true;
+            this.switched = false;
           }
 
           get overlayEl() {
@@ -552,12 +552,12 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
 
           render() {
             return html`${cache(
-              this.showOverlay
-                ? html`<${tag} id="myOverlay">
+              this.switched
+                ? html`something else`
+                : html`<${tag} id="myOverlay">
               <div slot="content">content b</div>
               <button slot="invoker">invoker button b</button>
-            </${tag}>`
-                : html`something else`,
+            </${tag}>`,
             )}`;
           }
         }
@@ -578,7 +578,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         // @ts-expect-error [allow-protected] in tests
         const setupSpy = sinon.spy(el.overlayEl, '_setupOverlayCtrl');
 
-        el.showOverlay = false;
+        el.switched = true;
         // render the new content
         await el.updateComplete;
         // wait for the teardown to complete
@@ -588,7 +588,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         expect(teardownSpy.callCount).to.equal(1);
         expect(setupSpy.callCount).to.equal(0);
 
-        el.showOverlay = true;
+        el.switched = false;
         await el.updateComplete;
         expect(setupSpy.callCount).to.equal(1);