@spectrum-web-components/overlay - npm Package Compare versions

Comparing version 0.4.3 to 0.5.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [0.5.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/overlay@0.4.3...@spectrum-web-components/overlay@0.5.0) (2020-08-13)
+
+### Bug Fixes
+
+-   **overlay:** enforce the full frame ([63628e9](https://github.com/adobe/spectrum-web-components/commit/63628e93de2daec632025f2659a86ff18e487a8e))
+-   **overlay:** ensure overlay addition occurs after closing previous ([7d2b102](https://github.com/adobe/spectrum-web-components/commit/7d2b102f30731513639582fed8ed0e1b46d569cf))
+
+### Features
+
+-   **overlay:** move entire package behind dynamic import by default ([9b0a74d](https://github.com/adobe/spectrum-web-components/commit/9b0a74de1f32ccd8cde6cabe4c06f990064f11ae))
+
 ## [0.4.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/overlay@0.4.2...@spectrum-web-components/overlay@0.4.3) (2020-08-05)
@@ -8,0 +19,0 @@

custom-elements.json

@@ -1,1 +0,168 @@
-{"version":"experimental","tags":[{"name":"overlay-trigger","path":"./src/OverlayTrigger.d.ts","description":"A overlay trigger component for displaying overlays relative to other content.","attributes":[{"name":"placement","type":"\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\""}],"properties":[{"name":"placement","attribute":"placement","type":"\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\""},{"name":"type","type":"\"replace\" | \"inline\" | \"modal\" | undefined"},{"name":"offset","type":"number"},{"name":"disabled","type":"boolean"}],"slots":[{"name":"hover-content","description":"The content that will be displayed on hover"},{"name":"click-content","description":"The content that will be displayed on click"}]},{"name":"overlay-trigger","path":"./src/OverlayTrigger.ts","description":"A overlay trigger component for displaying overlays relative to other content.","attributes":[{"name":"placement","type":"\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"","default":"\"bottom\""},{"name":"type","type":"\"replace\" | \"inline\" | \"modal\" | undefined"},{"name":"offset","type":"number","default":"6"},{"name":"disabled","type":"boolean","default":"false"}],"properties":[{"name":"placement","attribute":"placement","type":"\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"","default":"\"bottom\""},{"name":"type","attribute":"type","type":"\"replace\" | \"inline\" | \"modal\" | undefined"},{"name":"offset","attribute":"offset","type":"number","default":"6"},{"name":"disabled","attribute":"disabled","type":"boolean","default":"false"}],"slots":[{"name":"hover-content","description":"The content that will be displayed on hover"},{"name":"click-content","description":"The content that will be displayed on click"}]}]}
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "active-overlay",
+      "path": "./active-overlay.d.ts",
+      "attributes": [
+        {
+          "name": "animating",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "placement",
+          "type": "\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\" | undefined"
+        },
+        {
+          "name": "data-popper-placement",
+          "type": "\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\" | undefined"
+        }
+      ],
+      "properties": [
+        {
+          "name": "overlayContent",
+          "type": "HTMLElement"
+        },
+        {
+          "name": "overlayContentTip",
+          "type": "HTMLElement | undefined"
+        },
+        {
+          "name": "trigger",
+          "type": "HTMLElement"
+        },
+        {
+          "name": "returnFocusElement",
+          "type": "HTMLSpanElement | undefined"
+        },
+        {
+          "name": "state",
+          "type": "OverlayStateType"
+        },
+        {
+          "name": "animating",
+          "attribute": "animating",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "placement",
+          "attribute": "placement",
+          "type": "\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\" | undefined"
+        },
+        {
+          "name": "color",
+          "type": "\"light\" | \"lightest\" | \"dark\" | \"darkest\" | undefined"
+        },
+        {
+          "name": "receivesFocus",
+          "type": "\"auto\" | undefined"
+        },
+        {
+          "name": "scale",
+          "type": "\"medium\" | \"large\" | undefined"
+        },
+        {
+          "name": "tabbingAway",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "dataPopperPlacement",
+          "attribute": "data-popper-placement",
+          "type": "\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\" | undefined"
+        },
+        {
+          "name": "offset",
+          "type": "number",
+          "default": "6"
+        },
+        {
+          "name": "interaction",
+          "type": "TriggerInteractions",
+          "default": "\"hover\""
+        },
+        {
+          "name": "handleInlineTriggerKeydown",
+          "type": "(event: KeyboardEvent) => void",
+          "default": "\"(event: KeyboardEvent): void => {\\n        const { code, shiftKey } = event;\\n        /* istanbul ignore if */\\n        if (code !== 'Tab') return;\\n        if (shiftKey) {\\n            this.tabbingAway = true;\\n            this.dispatchEvent(new Event('close'));\\n            return;\\n        }\\n\\n        event.stopPropagation();\\n        event.preventDefault();\\n        this.focus();\\n    }\""
+        }
+      ],
+      "events": [
+        {
+          "name": "sp-overlay-closed"
+        },
+        {
+          "name": "close"
+        }
+      ]
+    },
+    {
+      "name": "overlay-trigger",
+      "path": "./overlay-trigger.d.ts",
+      "description": "A overlay trigger component for displaying overlays relative to other content.",
+      "attributes": [
+        {
+          "name": "placement",
+          "type": "\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"",
+          "default": "\"bottom\""
+        },
+        {
+          "name": "type",
+          "type": "\"replace\" | \"inline\" | \"modal\" | undefined"
+        },
+        {
+          "name": "offset",
+          "type": "number",
+          "default": "6"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "placement",
+          "attribute": "placement",
+          "type": "\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"",
+          "default": "\"bottom\""
+        },
+        {
+          "name": "type",
+          "attribute": "type",
+          "type": "\"replace\" | \"inline\" | \"modal\" | undefined"
+        },
+        {
+          "name": "offset",
+          "attribute": "offset",
+          "type": "number",
+          "default": "6"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "openOverlay",
+          "type": "(target: HTMLElement, interaction: TriggerInteractions, content: HTMLElement, options: OverlayOptions) => Promise<...>",
+          "default": "\"async (\\n        target: HTMLElement,\\n        interaction: TriggerInteractions,\\n        content: HTMLElement,\\n        options: OverlayOptions\\n    ): Promise<() => void> => {\\n        return await openOverlay(target, interaction, content, options);\\n    }\""
+        }
+      ],
+      "slots": [
+        {
+          "name": "hover-content",
+          "description": "The content that will be displayed on hover"
+        },
+        {
+          "name": "click-content",
+          "description": "The content that will be displayed on click"
+        }
+      ]
+    }
+  ]
+}

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.4.3",
+    "version": "0.5.0",
     "description": "",
@@ -34,3 +34,5 @@ "main": "src/index.js",
         "./overlay-trigger": "./overlay-trigger.js",
-        "./overlay-trigger.js": "./overlay-trigger.js"
+        "./overlay-trigger.js": "./overlay-trigger.js",
+        "./sync/overlay-trigger": "./sync/overlay-trigger.js",
+        "./sync/overlay-trigger.js": "./sync/overlay-trigger.js"
     },
@@ -49,2 +51,4 @@ "files": [
         "./overlay-trigger.ts",
+        "./sync/overlay-trigger.js",
+        "./sync/overlay-trigger.ts",
         "./stories/overlay-story-components.js",
@@ -66,3 +70,3 @@ "./stories/overlay-story-components.ts"
     },
-    "gitHead": "d08375a0d700d635c2fe0a142f3d7877ec18bff6"
+    "gitHead": "d052de054ce4420974e7891ee3d0c607922c8e70"
 }

README.md

@@ -23,2 +23,8 @@ ## Description
 
+The default of `<overlay-trigger>` will load various dependencies asynchronously via a dynamic import. In the case that you would like to import those tranverse dependencies statically, import the side effectful registration of `<overlay-trigger>` as follows:
+
+```
+import '@spectrum-web-components/overlay/sync/overlay-trigger.js';
+```
+
 When looking to leverage the `ActiveOverlay` or `OverlayTrigger` base class as a type and/or for extension purposes, do so via:
@@ -25,0 +31,0 @@

src/ActiveOverlay.d.ts

@@ -45,2 +45,3 @@ import { Placement, OverlayOpenDetail, TriggerInteractions } from './overlay-types.js';
     static get styles(): CSSResultArray;
+    constructor();
     feature(): void;
@@ -66,3 +67,6 @@ obscure(): void;
     static create(details: OverlayOpenDetail): ActiveOverlay;
+    private stealOverlayContentPromise;
+    private stealOverlayContentResolver;
+    protected _getUpdateComplete(): Promise<void>;
 }
 export {};

src/ActiveOverlay.js

@@ -63,3 +63,3 @@ /*
     constructor() {
-        super(...arguments);
+        super();
         this.originalSlot = null;
@@ -86,2 +86,4 @@ this._state = stateTransition();
         };
+        this.stealOverlayContentPromise = Promise.resolve();
+        this.stealOverlayContentPromise = new Promise((res) => (this.stealOverlayContentResolver = res));
     }
@@ -254,2 +256,3 @@ get state() {
         this.originalPlacement = this.overlayContent.getAttribute('placement');
+        this.stealOverlayContentResolver();
     }
@@ -353,2 +356,6 @@ returnOverlayContent() {
     }
+    async _getUpdateComplete() {
+        await super._getUpdateComplete();
+        await this.stealOverlayContentPromise;
+    }
 }
@@ -355,0 +362,0 @@ __decorate([

src/ActiveOverlay.ts

@@ -187,2 +187,9 @@ /*
 
+    public constructor() {
+        super();
+        this.stealOverlayContentPromise = new Promise(
+            (res) => (this.stealOverlayContentResolver = res)
+        );
+    }
+
     public feature(): void {
@@ -349,2 +356,4 @@ this.tabIndex = 0;
         ) as Placement;
+
+        this.stealOverlayContentResolver();
     }
@@ -493,2 +502,10 @@
     }
+
+    private stealOverlayContentPromise = Promise.resolve();
+    private stealOverlayContentResolver!: () => void;
+
+    protected async _getUpdateComplete(): Promise<void> {
+        await super._getUpdateComplete();
+        await this.stealOverlayContentPromise;
+    }
 }

src/apply-max-size.d.ts

@@ -1,30 +0,2 @@
-export declare const applyMaxSize: {
-    name: string;
-    enabled: boolean;
-    phase: string;
-    requires: string[];
-    fn({ state, }: {
-        state: {
-            modifiersData: {
-                maxSize: {
-                    height: number;
-                };
-            };
-            elements: {
-                popper: HTMLElement;
-            };
-            rects: {
-                popper: {
-                    height: number;
-                };
-            };
-            styles: {
-                popper: {
-                    maxHeight: string;
-                    height: string;
-                    overflow: string;
-                };
-            };
-        };
-    }): void;
-};
+import { Modifier } from '@popperjs/core/lib/types';
+export declare const applyMaxSize: Modifier<'applyMaxSize', Record<string, unknown>>;

src/apply-max-size.js

@@ -18,3 +18,3 @@ /*
     requires: ['maxSize'],
-    fn({ state, }) {
+    fn({ state }) {
         const { height: maxHeight } = state.modifiersData.maxSize;
@@ -21,0 +21,0 @@ if (!appliedSizeDefaults.has(state.elements.popper)) {

src/apply-max-size.ts

@@ -13,5 +13,7 @@ /*
 
+import { ModifierArguments, Modifier } from '@popperjs/core/lib/types';
+
 const appliedSizeDefaults = new WeakMap();
 
-export const applyMaxSize = {
+export const applyMaxSize: Modifier<'applyMaxSize', Record<string, unknown>> = {
     name: 'applyMaxSize',
@@ -21,28 +23,3 @@ enabled: true,
     requires: ['maxSize'],
-    fn({
-        state,
-    }: {
-        state: {
-            modifiersData: {
-                maxSize: {
-                    height: number;
-                };
-            };
-            elements: {
-                popper: HTMLElement;
-            };
-            rects: {
-                popper: {
-                    height: number;
-                };
-            };
-            styles: {
-                popper: {
-                    maxHeight: string;
-                    height: string;
-                    overflow: string;
-                };
-            };
-        };
-    }): void {
+    fn({ state }: ModifierArguments<Record<string, unknown>>): void {
         const { height: maxHeight } = state.modifiersData.maxSize;
@@ -49,0 +26,0 @@ if (!appliedSizeDefaults.has(state.elements.popper)) {

src/index.d.ts

@@ -5,1 +5,2 @@ export * from './overlay.js';
 export * from './ActiveOverlay.js';
+export * from './loader.js';

src/index.js

@@ -16,2 +16,3 @@ /*
 export * from './ActiveOverlay.js';
+export * from './loader.js';
 //# sourceMappingURL=index.js.map

src/index.ts

@@ -16,1 +16,2 @@ /*
 export * from './ActiveOverlay.js';
+export * from './loader.js';

src/overlay-stack.d.ts

 import { ActiveOverlay } from './ActiveOverlay.js';
 import { OverlayOpenDetail } from './overlay-types';
+import '../active-overlay.js';
 export declare class OverlayStack {
@@ -4,0 +5,0 @@ overlays: ActiveOverlay[];

src/overlay-stack.js

@@ -14,2 +14,3 @@ /*
 import { OverlayTimer } from './overlay-timer.js';
+import '../active-overlay.js';
 function isLeftClick(event) {
@@ -56,3 +57,5 @@ return event.button === 0;
             if (event.key === 'Escape') {
+                const overlay = this.topOverlay;
                 this.closeTopOverlay();
+                overlay && overlay.trigger.focus();
             }
@@ -92,2 +95,3 @@ };
                 z-index: 0;
+                min-height: 100vh;
             }
@@ -187,15 +191,18 @@ #holder {
         }
-        await import('../active-overlay.js');
         const activeOverlay = ActiveOverlay.create(details);
-        this.overlays.push(activeOverlay);
         document.body.appendChild(activeOverlay);
-        let updateComplete = await activeOverlay.updateComplete;
-        while (updateComplete === false) {
-            updateComplete = await activeOverlay.updateComplete;
-        }
-        this.addOverlayEventListeners(activeOverlay);
-        if (details.receivesFocus === 'auto') {
-            activeOverlay.focus();
-        }
-        return false;
+        /**
+         * The following work to make the new overlay the "top" of the stack
+         * has to happen AFTER the current call stack completes in case there
+         * is work there in to remove the previous "top" overlay.
+         */
+        return new Promise((res) => requestAnimationFrame(res)).then(async () => {
+            this.overlays.push(activeOverlay);
+            await activeOverlay.updateComplete;
+            this.addOverlayEventListeners(activeOverlay);
+            if (details.receivesFocus === 'auto') {
+                activeOverlay.focus();
+            }
+            return false;
+        });
     }
@@ -202,0 +209,0 @@ addOverlayEventListeners(activeOverlay) {

src/overlay-stack.ts

@@ -16,2 +16,3 @@ /*
 import { OverlayTimer } from './overlay-timer.js';
+import '../active-overlay.js';
 
@@ -62,2 +63,3 @@ function isLeftClick(event: MouseEvent): boolean {
                 z-index: 0;
+                min-height: 100vh;
             }
@@ -175,17 +177,21 @@ #holder {
 
-        await import('../active-overlay.js');
         const activeOverlay = ActiveOverlay.create(details);
-        this.overlays.push(activeOverlay);
         document.body.appendChild(activeOverlay);
-        let updateComplete = await activeOverlay.updateComplete;
-        while (updateComplete === false) {
-            updateComplete = await activeOverlay.updateComplete;
-        }
 
-        this.addOverlayEventListeners(activeOverlay);
-        if (details.receivesFocus === 'auto') {
-            activeOverlay.focus();
-        }
-
-        return false;
+        /**
+         * The following work to make the new overlay the "top" of the stack
+         * has to happen AFTER the current call stack completes in case there
+         * is work there in to remove the previous "top" overlay.
+         */
+        return new Promise((res) => requestAnimationFrame(res)).then(
+            async () => {
+                this.overlays.push(activeOverlay);
+                await activeOverlay.updateComplete;
+                this.addOverlayEventListeners(activeOverlay);
+                if (details.receivesFocus === 'auto') {
+                    activeOverlay.focus();
+                }
+                return false;
+            }
+        );
     }
@@ -349,3 +355,5 @@
         if (event.key === 'Escape') {
+            const overlay = this.topOverlay as ActiveOverlay;
             this.closeTopOverlay();
+            overlay && overlay.trigger.focus();
         }
@@ -352,0 +360,0 @@ };

src/overlay-types.d.ts

@@ -25,2 +25,8 @@ import { ThemeData } from '@spectrum-web-components/theme';
 export declare type Placement = PopperPlacement | 'none';
+export declare type OverlayOptions = {
+    delayed?: boolean;
+    placement?: Placement;
+    offset?: number;
+    receivesFocus?: 'auto';
+};
 declare global {
@@ -27,0 +33,0 @@ interface GlobalEventHandlersEventMap {

src/overlay-types.ts

@@ -48,2 +48,9 @@ /*
 
+export type OverlayOptions = {
+    delayed?: boolean;
+    placement?: Placement;
+    offset?: number;
+    receivesFocus?: 'auto';
+};
+
 declare global {
@@ -50,0 +57,0 @@ interface GlobalEventHandlersEventMap {

src/overlay.d.ts

@@ -1,8 +0,2 @@
-import { TriggerInteractions, Placement } from './overlay-types';
-declare type OverlayOptions = {
-    delayed?: boolean;
-    placement?: Placement;
-    offset?: number;
-    receivesFocus?: 'auto';
-};
+import { TriggerInteractions, OverlayOptions } from './overlay-types';
 /**
@@ -54,2 +48,1 @@ * This class allows access to the overlay system which allows a client to
 }
-export {};

src/overlay.ts

@@ -16,14 +16,7 @@ /*
     TriggerInteractions,
-    Placement,
     OverlayDisplayQueryDetail,
+    OverlayOptions,
 } from './overlay-types';
 import { OverlayStack } from './overlay-stack.js';
 
-type OverlayOptions = {
-    delayed?: boolean;
-    placement?: Placement;
-    offset?: number;
-    receivesFocus?: 'auto';
-};
-
 /**
@@ -30,0 +23,0 @@ * This class allows access to the overlay system which allows a client to

src/OverlayTrigger.d.ts

 import { LitElement, CSSResultArray, TemplateResult } from 'lit-element';
-import { Placement, TriggerInteractions } from './overlay-types';
+import { Placement, TriggerInteractions, OverlayOptions } from './overlay-types';
 /**
@@ -26,2 +26,4 @@ * A overlay trigger component for displaying overlays relative to other content.
     protected render(): TemplateResult;
+    static openOverlay: (target: HTMLElement, interaction: TriggerInteractions, content: HTMLElement, options: OverlayOptions) => Promise<() => void>;
+    private get overlayOptions();
     private onTrigger;
@@ -28,0 +30,0 @@ onTriggerClick(): Promise<void>;

src/OverlayTrigger.js

@@ -14,4 +14,4 @@ /*
 import { html, LitElement, property, } from 'lit-element';
+import { openOverlay } from './loader.js';
 import overlayTriggerStyles from './overlay-trigger.css.js';
-import { Overlay } from './overlay.js';
 /**
@@ -64,2 +64,9 @@ * A overlay trigger component for displaying overlays relative to other content.
     }
+    get overlayOptions() {
+        return {
+            offset: this.offset,
+            placement: this.placement,
+            receivesFocus: this.type && this.type !== 'inline' ? 'auto' : undefined,
+        };
+    }
     onTrigger(event) {
@@ -90,9 +97,4 @@ if (this.disabled) {
             }
-            this.closeClickOverlay = await Overlay.open(this.targetContent, this.type ? this.type : 'click', this.clickContent, {
-                offset: this.offset,
-                placement: this.placement,
-                receivesFocus: this.type && this.type !== 'inline'
-                    ? 'auto'
-                    : undefined,
-            });
+            const { targetContent, clickContent } = this;
+            this.closeClickOverlay = await OverlayTrigger.openOverlay(targetContent, this.type ? this.type : 'click', clickContent, this.overlayOptions);
         }
@@ -109,6 +111,4 @@ }
             });
-            this.closeHoverOverlay = await Overlay.open(this.targetContent, 'hover', this.hoverContent, {
-                offset: this.offset,
-                placement: this.placement,
-            });
+            const { targetContent, hoverContent } = this;
+            this.closeHoverOverlay = await OverlayTrigger.openOverlay(targetContent, 'hover', hoverContent, this.overlayOptions);
             overlayReady();
@@ -155,2 +155,5 @@ }
 }
+OverlayTrigger.openOverlay = async (target, interaction, content, options) => {
+    return await openOverlay(target, interaction, content, options);
+};
 __decorate([
@@ -157,0 +160,0 @@ property({ reflect: true })

src/OverlayTrigger.ts

@@ -21,7 +21,10 @@ /*
 
+import {
+    Placement,
+    TriggerInteractions,
+    OverlayOptions,
+} from './overlay-types';
+import { openOverlay } from './loader.js';
 import overlayTriggerStyles from './overlay-trigger.css.js';
 
-import { Placement, TriggerInteractions } from './overlay-types';
-import { Overlay } from './overlay.js';
-
 /**
@@ -88,2 +91,20 @@ * A overlay trigger component for displaying overlays relative to other content.
 
+    public static openOverlay = async (
+        target: HTMLElement,
+        interaction: TriggerInteractions,
+        content: HTMLElement,
+        options: OverlayOptions
+    ): Promise<() => void> => {
+        return await openOverlay(target, interaction, content, options);
+    };
+
+    private get overlayOptions(): OverlayOptions {
+        return {
+            offset: this.offset,
+            placement: this.placement,
+            receivesFocus:
+                this.type && this.type !== 'inline' ? 'auto' : undefined,
+        };
+    }
+
     private onTrigger(event: Event): void {
@@ -117,14 +138,8 @@ if (this.disabled) {
             }
-            this.closeClickOverlay = await Overlay.open(
-                this.targetContent,
+            const { targetContent, clickContent } = this;
+            this.closeClickOverlay = await OverlayTrigger.openOverlay(
+                targetContent,
                 this.type ? this.type : 'click',
-                this.clickContent,
-                {
-                    offset: this.offset,
-                    placement: this.placement,
-                    receivesFocus:
-                        this.type && this.type !== 'inline'
-                            ? 'auto'
-                            : undefined,
-                }
+                clickContent,
+                this.overlayOptions
             );
@@ -145,10 +160,8 @@ }
             });
-            this.closeHoverOverlay = await Overlay.open(
-                this.targetContent,
+            const { targetContent, hoverContent } = this;
+            this.closeHoverOverlay = await OverlayTrigger.openOverlay(
+                targetContent,
                 'hover',
-                this.hoverContent,
-                {
-                    offset: this.offset,
-                    placement: this.placement,
-                }
+                hoverContent,
+                this.overlayOptions
             );
@@ -155,0 +168,0 @@ overlayReady();

src/popper-arrow-rotate.d.ts

 import { Modifier } from '@popperjs/core/lib/types';
-export declare const computeArrowRotateStyles: Modifier<Record<string, unknown>>;
+export declare const computeArrowRotateStyles: Modifier<'computeArrowRotateStyles', Record<string, unknown>>;

src/popper-arrow-rotate.ts

@@ -59,3 +59,6 @@ /*
 
-export const computeArrowRotateStyles: Modifier<Record<string, unknown>> = {
+export const computeArrowRotateStyles: Modifier<
+    'computeArrowRotateStyles',
+    Record<string, unknown>
+> = {
     name: 'computeArrowRotateStyles',
@@ -62,0 +65,0 @@ enabled: true,

src/popper.d.ts

@@ -5,3 +5,3 @@ import { Instance } from '@popperjs/core/lib/types';
 import { applyMaxSize } from './apply-max-size.js';
-export declare const createPopper: (reference: Element | import("@popperjs/core/lib/types").VirtualElement, popper: HTMLElement, options?: Partial<import("@popperjs/core/lib/types").Options> | undefined) => Instance;
+export declare const createPopper: <TModifier extends Partial<import("@popperjs/core/lib/types").Modifier<any, any>>>(reference: Element | import("@popperjs/core/lib/types").VirtualElement, popper: HTMLElement, options?: Partial<import("@popperjs/core/lib/types").OptionsGeneric<TModifier>> | undefined) => Instance;
 export { Instance, Placement, maxSize, applyMaxSize };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

233102

increased by5.34%

Number of package files

65

increased by6.56%

Lines of code

3224

increased by7.18%

Number of lines in readme file

74

increased by8.82%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low license alerts

10

increased by11.11%

No dependency changes