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

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

@@ -0,0 +1,212 @@
+import { expect, fixture, html, unsafeStatic } from '@open-wc/testing';
+import sinon from 'sinon';
+
+/**
+ * @typedef {import('lit').LitElement & {_overlayCtrl: import('../src/OverlayController.js').OverlayController}} HoverInteractionEl
+ * @typedef {{ tagString: string; invokerTagString: string; suffix?: string }} WithHoverInteractionConfig
+ */
+
+/**
+ * @param {WithHoverInteractionConfig} config
+ */
+export function runWithHoverInteractionSuite({ tagString, invokerTagString, suffix = '' }) {
+  const tag = unsafeStatic(tagString);
+  const invokerTag = unsafeStatic(invokerTagString);
+
+  describe(`inherited withHoverInteraction behavior (touch)${suffix}`, () => {
+    /** @type {sinon.SinonFakeTimers} */
+    let clock;
+    /** @type {typeof window.matchMedia} */
+    let originalMatchMedia;
+
+    beforeEach(() => {
+      clock = sinon.useFakeTimers();
+      originalMatchMedia = window.matchMedia;
+      window.matchMedia = query =>
+        /** @type {MediaQueryList} */ ({
+          matches: query === '(hover: hover)' ? false : originalMatchMedia(query).matches,
+          media: query,
+          onchange: null,
+          addListener: () => {},
+          removeListener: () => {},
+          addEventListener: () => {},
+          removeEventListener: () => {},
+          dispatchEvent: () => false,
+        });
+    });
+
+    afterEach(() => {
+      window.matchMedia = originalMatchMedia;
+      clock.restore();
+    });
+
+    it('opens after holding for longpressDuration (500ms)', async () => {
+      const el = /** @type {HoverInteractionEl} */ (
+        await fixture(html`
+        <${tag}>
+          <div slot="content">Tooltip content</div>
+          <${invokerTag} slot="invoker">Invoker</${invokerTag}>
+        </${tag}>
+      `)
+      );
+      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
+
+      invoker.dispatchEvent(
+        new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true }),
+      );
+      clock.runAll();
+      await Promise.resolve();
+
+      expect(el._overlayCtrl.isShown).to.equal(true);
+    });
+
+    it('stays hidden on brief touch: pointerup cancels the timer', async () => {
+      const el = /** @type {HoverInteractionEl} */ (
+        await fixture(html`
+        <${tag}>
+          <div slot="content">Tooltip content</div>
+          <${invokerTag} slot="invoker">Invoker</${invokerTag}>
+        </${tag}>
+      `)
+      );
+      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
+
+      invoker.dispatchEvent(
+        new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true }),
+      );
+      invoker.dispatchEvent(new PointerEvent('pointerup', { pointerType: 'touch', bubbles: true }));
+      clock.tick(500);
+      await el.updateComplete;
+
+      expect(el._overlayCtrl.isShown).to.equal(false);
+    });
+
+    it('ignores non-touch pointer events (mouse)', async () => {
+      const el = /** @type {HoverInteractionEl} */ (
+        await fixture(html`
+        <${tag}>
+          <div slot="content">Tooltip content</div>
+          <${invokerTag} slot="invoker">Invoker</${invokerTag}>
+        </${tag}>
+      `)
+      );
+      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
+
+      invoker.dispatchEvent(
+        new PointerEvent('pointerdown', { pointerType: 'mouse', bubbles: true }),
+      );
+      clock.tick(500);
+      await el.updateComplete;
+
+      expect(el._overlayCtrl.isShown).to.equal(false);
+    });
+
+    it('auto-closes after longpressDuration once press ends', async () => {
+      const el = /** @type {HoverInteractionEl} */ (
+        await fixture(html`
+        <${tag}>
+          <div slot="content">Tooltip content</div>
+          <${invokerTag} slot="invoker">Invoker</${invokerTag}>
+        </${tag}>
+      `)
+      );
+      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
+
+      invoker.dispatchEvent(
+        new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true }),
+      );
+      clock.runAll();
+      await Promise.resolve();
+      expect(el._overlayCtrl.isShown).to.equal(true);
+
+      invoker.dispatchEvent(new PointerEvent('pointerup', { pointerType: 'touch', bubbles: true }));
+      await clock.tickAsync(501);
+      expect(el._overlayCtrl.isShown).to.equal(false);
+    });
+
+    it('disables text selection on the invoker on init and restores it on teardown', async () => {
+      const el = /** @type {HoverInteractionEl} */ (
+        await fixture(html`
+        <${tag}>
+          <div slot="content">Tooltip content</div>
+          <${invokerTag} slot="invoker">Invoker</${invokerTag}>
+        </${tag}>
+      `)
+      );
+      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
+      const getUserSelect = () =>
+        invoker.style.getPropertyValue('user-select') ||
+        invoker.style.getPropertyValue('-webkit-user-select');
+      expect(getUserSelect()).to.equal('none');
+
+      el._overlayCtrl.teardown();
+      expect(getUserSelect()).to.equal('');
+    });
+
+    it('does not open on tap-triggered focusin', async () => {
+      const el = /** @type {HoverInteractionEl} */ (
+        await fixture(html`
+        <${tag}>
+          <div slot="content">Tooltip content</div>
+          <${invokerTag} slot="invoker">Invoker</${invokerTag}>
+        </${tag}>
+      `)
+      );
+      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
+
+      invoker.dispatchEvent(new Event('focusin', { bubbles: true }));
+      clock.tick(300);
+      await el.updateComplete;
+
+      expect(el._overlayCtrl.isShown).to.equal(false);
+    });
+
+    it('suppresses focusin that immediately follows a touch pointerdown', async () => {
+      const el = /** @type {HoverInteractionEl} */ (
+        await fixture(html`
+        <${tag}>
+          <div slot="content">Tooltip content</div>
+          <${invokerTag} slot="invoker">Invoker</${invokerTag}>
+        </${tag}>
+      `)
+      );
+      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
+
+      invoker.dispatchEvent(
+        new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true }),
+      );
+      invoker.dispatchEvent(new PointerEvent('pointerup', { pointerType: 'touch', bubbles: true }));
+      invoker.dispatchEvent(new Event('focusin', { bubbles: true }));
+      clock.tick(1);
+      await el.updateComplete;
+
+      expect(el._overlayCtrl.isShown).to.equal(false);
+    });
+
+    it('suppresses click after completed longpress', async () => {
+      const el = /** @type {HoverInteractionEl} */ (
+        await fixture(html`
+        <${tag}>
+          <div slot="content">Tooltip content</div>
+          <${invokerTag} slot="invoker">Invoker</${invokerTag}>
+        </${tag}>
+      `)
+      );
+      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
+      let clickTriggered = false;
+
+      invoker.addEventListener('click', () => {
+        clickTriggered = true;
+      });
+
+      invoker.dispatchEvent(
+        new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true }),
+      );
+      clock.runAll();
+      await Promise.resolve();
+
+      invoker.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      expect(clickTriggered).to.equal(false);
+    });
+  });
+}

package/components/overlays/types/ArrowMixinTypes.ts

@@ -26,9 +26,7 @@ export declare class ArrowHost {
 
   protected _defineOverlayConfig(): OverlayConfig;
 
-  protected _getPopperArrowConfig(
-    popperConfigToExtendFrom: Partial<PopperOptions>,
-  ): Partial<PopperOptions>;
+  protected _getPopperArrowConfig(popperConfigToExtendFrom: Partial<PopperOptions>): Partial<PopperOptions>;
 
   private __setupRepositionCompletePromise(): void;
 

package/components/overlays/types/OverlayConfig.ts

@@ -21,6 +21,7 @@ export type OverlayPhase =
   | 'add'
   | 'remove';
 
+
 export interface ViewportConfig {
   placement: ViewportPlacement;
 }
@@ -96,30 +97,14 @@ export interface OverlayConfig {
   /** By default, the tooltip content is a 'description' for the invoker (uses aria-describedby) Setting this property to 'label' makes the content function as a label (via aria-labelledby) */
   invokerRelation?: 'label' | 'description';
 
+  /** render a div instead of dialog */
+  _noDialogEl?: Boolean;
+
   /**
    * Determines the conditions hiding/showing should be based on. It gets the OverlayController as input and returns an object with
    * functions with Overlay phases as keys
    */
   visibilityTriggerFunction?: Function;
+}
 
-  /**
-   * Whether the overlay content should receive focus when shown.
-   */
-  focusContentOnOpen?: boolean;
-
-  /*
-   * By default, we function either as overlay or disclosure. In some cases, this should be dynamically set (think of responsive changes).
-   * or it depends on the context (a top level menu is not openable (unless it's a context menu), its children menus are).
-   */
-  isActivated?: boolean;
-
-  /**
-   * By default, an error is thrown when contentNode is not connected to the DOM.
-   * This allows to prepare nodes and later connect them to dom.
-   */
-  requireConnectedNodes?: boolean;
-
-  syncChildrenCloseState?: boolean;
 
-  _shouldTeardownDomStructure?: boolean;
-}

package/components/overlays/types/OverlayMixinTypes.ts

@@ -17,8 +17,6 @@ export interface DefineOverlayConfig {
 }
 
 export declare class OverlayHost {
-  static _getFocusableInvokerEl(focusableElOrWrapper: Element): Element | null;
-
   opened: Boolean;
   get config(): Partial<OverlayConfig>;
   set config(value: Partial<OverlayConfig>);

package/components/select-rich/test/lion-select-rich.test.js

@@ -832,7 +832,6 @@ describe('lion-select-rich', () => {
         await waitUntil(isSelectRichRendered);
         getInvoker()?.click();
         await waitUntil(isDialogVisible);
-        // @ts-ignore - NodeList array access
         const optionBlue = /** @type { HTMLElement | undefined } */ (
           wrapperElementShadowRoot?.querySelectorAll('lion-option')
         )?.[1];
@@ -956,7 +955,6 @@ describe('lion-select-rich', () => {
         await waitUntil(isSelectRichRendered);
         getInvoker()?.click();
         await waitUntil(isDialogVisible);
-        // @ts-ignore - NodeList array access
         const optionBlue = /** @type { HTMLElement | undefined } */ (
           wrapperElementShadowRoot?.querySelectorAll('lion-option')
         )?.[1];
@@ -1084,7 +1082,6 @@ describe('lion-select-rich', () => {
         await waitUntil(isSelectRichRendered);
         getInvoker()?.click();
         await waitUntil(isDialogVisible);
-        // @ts-ignore - NodeList array access
         const optionBlue = /** @type { HTMLElement | undefined } */ (
           wrapperElementShadowRoot?.querySelectorAll('lion-option')
         )?.[1];

package/components/textarea/test/lion-textarea-integrations.test.js

@@ -1,6 +1,6 @@
 import {
-  runInteractionStateMixinSuite,
   runFormatMixinSuite,
+  runInteractionStateMixinSuite,
   runNativeTextFieldMixinSuite,
 } from '@lion/ui/form-core-test-suites.js';
 
@@ -15,6 +15,7 @@ describe('<lion-textarea> integrations', () => {
 
   runFormatMixinSuite({
     tagString,
+    modelValueType: String,
   });
 
   runNativeTextFieldMixinSuite({

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

@@ -1,6 +1,9 @@
 import '@lion/ui/define/lion-tooltip.js';
 import { aTimeout, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
-import { runOverlayMixinSuite } from '@lion/ui/overlays-test-suites.js';
+import {
+  runOverlayMixinSuite,
+  runWithHoverInteractionSuite,
+} from '@lion/ui/overlays-test-suites.js';
 import sinon from 'sinon';
 
 /**
@@ -20,6 +23,11 @@ describe('lion-tooltip', () => {
     });
   });
 
+  runWithHoverInteractionSuite({
+    tagString: 'lion-tooltip',
+    invokerTagString: 'button',
+  });
+
   describe('Basic', () => {
     /** @type {sinon.SinonFakeTimers} */
     let clock;