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

package/components/overlays/test/withHoverInteraction.test.js

@@ -0,0 +1,90 @@
+import { OverlayController } from '@lion/ui/overlays.js';
+import { expect, fixtureSync, html } from '@open-wc/testing';
+import sinon from 'sinon';
+import { withHoverInteraction } from '../src/configurations/visibility-trigger-partials/withHoverInteraction.js';
+
+function makeCtrl(opts = {}) {
+  return new OverlayController({
+    placementMode: 'local',
+    contentNode: /** @type {HTMLElement} */ (fixtureSync(html`<div>content</div>`)),
+    invokerNode: /** @type {HTMLElement} */ (fixtureSync(html`<button>invoker</button>`)),
+    ...withHoverInteraction(opts),
+  });
+}
+
+describe('withHoverInteraction (isHoverSupported: false)', () => {
+  /** @type {sinon.SinonFakeTimers} */
+  let clock;
+  /** @type {OverlayController} */
+  let ctrl;
+
+  beforeEach(() => {
+    clock = sinon.useFakeTimers();
+    ctrl = makeCtrl({ isHoverSupported: false });
+  });
+
+  afterEach(() => {
+    ctrl.teardown();
+    clock.restore();
+  });
+
+  it('opens after holding for longpressDuration (500ms)', async () => {
+    ctrl.invokerNode?.dispatchEvent(
+      new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true }),
+    );
+    clock.runAll();
+    await Promise.resolve();
+    expect(ctrl.isShown).to.equal(true);
+  });
+
+  it('stays hidden on brief touch: pointerup cancels the timer', () => {
+    ctrl.invokerNode?.dispatchEvent(
+      new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true }),
+    );
+    ctrl.invokerNode?.dispatchEvent(
+      new PointerEvent('pointerup', { pointerType: 'touch', bubbles: true }),
+    );
+    clock.tick(500);
+    expect(ctrl.isShown).to.equal(false);
+  });
+
+  it('ignores non-touch pointer events (mouse)', () => {
+    ctrl.invokerNode?.dispatchEvent(
+      new PointerEvent('pointerdown', { pointerType: 'mouse', bubbles: true }),
+    );
+    clock.tick(500);
+    expect(ctrl.isShown).to.equal(false);
+  });
+
+  it('auto-closes after longpressDuration once press ends', async () => {
+    ctrl.invokerNode?.dispatchEvent(
+      new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true }),
+    );
+    clock.runAll();
+    await Promise.resolve();
+    expect(ctrl.isShown).to.equal(true);
+
+    ctrl.invokerNode?.dispatchEvent(
+      new PointerEvent('pointerup', { pointerType: 'touch', bubbles: true }),
+    );
+    await clock.tickAsync(501);
+    expect(ctrl.isShown).to.equal(false);
+  });
+
+  it('disables text selection on the invoker on init and restores it on teardown', () => {
+    const { invokerNode } = ctrl;
+    const getUserSelect = () =>
+      invokerNode?.style.getPropertyValue('user-select') ||
+      invokerNode?.style.getPropertyValue('-webkit-user-select');
+    expect(getUserSelect()).to.equal('none');
+
+    ctrl.teardown();
+    expect(getUserSelect()).to.equal('');
+  });
+
+  it('does not open on tap-triggered focusin', () => {
+    ctrl.invokerNode?.dispatchEvent(new Event('focusin', { bubbles: true }));
+    clock.tick(300);
+    expect(ctrl.isShown).to.equal(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 = {
-            switched: { type: Boolean },
+            showOverlay: { type: Boolean },
           };
 
           constructor() {
             super();
 
-            this.switched = false;
+            this.showOverlay = true;
           }
 
           get overlayEl() {
@@ -552,12 +552,12 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
 
           render() {
             return html`${cache(
-              this.switched
-                ? html`something else`
-                : html`<${tag} id="myOverlay">
+              this.showOverlay
+                ? html`<${tag} id="myOverlay">
               <div slot="content">content b</div>
               <button slot="invoker">invoker button b</button>
-            </${tag}>`,
+            </${tag}>`
+                : html`something else`,
             )}`;
           }
         }
@@ -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.switched = true;
+        el.showOverlay = false;
         // 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.switched = false;
+        el.showOverlay = true;
         await el.updateComplete;
         expect(setupSpy.callCount).to.equal(1);
 

package/components/overlays/types/ArrowMixinTypes.ts

@@ -26,7 +26,9 @@ 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,7 +21,6 @@ export type OverlayPhase =
   | 'add'
   | 'remove';
 
-
 export interface ViewportConfig {
   placement: ViewportPlacement;
 }
@@ -97,14 +96,30 @@ 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,6 +17,8 @@ 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,6 +832,7 @@ 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];
@@ -955,6 +956,7 @@ 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];
@@ -1082,6 +1084,7 @@ 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];