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

Comparing version 0.11.11-alpha.1 to 0.11.11

custom-elements.json

@@ -453,3 +453,3 @@ {
               "kind": "method",
-              "name": "getUpdateComplete",
+              "name": "_getUpdateComplete",
               "privacy": "protected",
@@ -682,2 +682,38 @@ "return": {
             {
+              "kind": "method",
+              "name": "openOverlay",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<() => void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "interaction",
+                  "type": {
+                    "text": "TriggerInteractions"
+                  }
+                },
+                {
+                  "name": "content",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "options",
+                  "type": {
+                    "text": "OverlayOptions"
+                  }
+                }
+              ]
+            },
+            {
               "kind": "field",
@@ -884,2 +920,25 @@ "name": "openOverlay",
               ]
+            },
+            {
+              "kind": "field",
+              "name": "openStatePromise",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "openStateResolver",
+              "type": {
+                "text": "() => void"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_getUpdateComplete",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "Promise<boolean>"
+                }
+              }
             }
@@ -886,0 +945,0 @@ ],

package.json

 {
     "name": "@spectrum-web-components/overlay",
-    "version": "0.11.11-alpha.1+204701b5",
+    "version": "0.11.11",
     "publishConfig": {
@@ -52,6 +52,6 @@ "access": "public"
         "@popperjs/core": "^2.2.2",
-        "@spectrum-web-components/action-button": "^0.5.5-alpha.1+204701b5",
-        "@spectrum-web-components/base": "^0.4.6-alpha.1+204701b5",
-        "@spectrum-web-components/shared": "^0.12.8-alpha.1+204701b5",
-        "@spectrum-web-components/theme": "^0.8.12-alpha.1+204701b5",
+        "@spectrum-web-components/action-button": "^0.5.5",
+        "@spectrum-web-components/base": "^0.4.5",
+        "@spectrum-web-components/shared": "^0.12.7",
+        "@spectrum-web-components/theme": "^0.8.12",
         "popper-max-size-modifier": "^0.2.0",
@@ -68,3 +68,3 @@ "tslib": "^2.0.0"
     ],
-    "gitHead": "204701b5496ec55efa8476f3a31298e7f5375212"
+    "gitHead": "dd51b33cb741be50668d51db526200143ca48151"
 }

src/active-overlay.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("@spectrum-web-components/base").CSSResultGroup;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/ActiveOverlay.d.ts

@@ -81,4 +81,4 @@ import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
     private stealOverlayContentResolver;
-    protected getUpdateComplete(): Promise<boolean>;
+    protected _getUpdateComplete(): Promise<boolean>;
 }
 export {};

src/ActiveOverlay.js

@@ -357,6 +357,6 @@ /*
     }
-    async getUpdateComplete() {
-        await super.getUpdateComplete();
+    async _getUpdateComplete() {
+        const complete = (await super._getUpdateComplete());
         await this.stealOverlayContentPromise;
-        return true;
+        return complete;
     }
@@ -363,0 +363,0 @@ }

src/overlay-trigger.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("@spectrum-web-components/base").CSSResultGroup;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/OverlayTrigger.d.ts

@@ -38,2 +38,3 @@ import { LitElement, CSSResultArray, TemplateResult, PropertyValues } from '@spectrum-web-components/base';
     private manageOpen;
+    private openOverlay;
     static openOverlay: (target: HTMLElement, interaction: TriggerInteractions, content: HTMLElement, options: OverlayOptions) => Promise<() => void>;
@@ -55,3 +56,6 @@ private get overlayOptions();
     private extractSlotContentFromEvent;
+    private openStatePromise;
+    private openStateResolver;
+    protected _getUpdateComplete(): Promise<boolean>;
     disconnectedCallback(): void;
 }

src/OverlayTrigger.js

@@ -42,2 +42,3 @@ /*
         };
+        this.openStatePromise = Promise.resolve();
     }
@@ -142,2 +143,9 @@ static get styles() {
     }
+    async openOverlay(target, interaction, content, options) {
+        this.openStatePromise = new Promise((res) => (this.openStateResolver = res));
+        this.addEventListener('sp-opened', () => {
+            this.openStateResolver();
+        }, { once: true });
+        return OverlayTrigger.openOverlay(target, interaction, content, options);
+    }
     get overlayOptions() {
@@ -198,3 +206,3 @@ return {
         this.prepareToFocusOverlayContent(clickContent);
-        this.closeClickOverlay = await OverlayTrigger.openOverlay(targetContent, this.type ? this.type : 'click', clickContent, this.overlayOptions);
+        this.closeClickOverlay = await this.openOverlay(targetContent, this.type ? this.type : 'click', clickContent, this.overlayOptions);
     }
@@ -209,3 +217,3 @@ async onTriggerLongpress() {
         const notImmediatelyClosable = ((_b = (_a = this._longpressEvent) === null || _a === void 0 ? void 0 : _a.detail) === null || _b === void 0 ? void 0 : _b.source) !== 'keyboard';
-        this.closeLongpressOverlay = await OverlayTrigger.openOverlay(targetContent, this.type ? this.type : 'longpress', longpressContent, Object.assign(Object.assign({}, this.overlayOptions), { receivesFocus: 'auto', notImmediatelyClosable }));
+        this.closeLongpressOverlay = await this.openOverlay(targetContent, this.type ? this.type : 'longpress', longpressContent, Object.assign(Object.assign({}, this.overlayOptions), { receivesFocus: 'auto', notImmediatelyClosable }));
         this._longpressEvent = undefined;
@@ -227,3 +235,3 @@ }
         const { targetContent, hoverContent } = this;
-        this.closeHoverOverlay = await OverlayTrigger.openOverlay(targetContent, 'hover', hoverContent, Object.assign({ abortPromise }, this.overlayOptions));
+        this.closeHoverOverlay = await this.openOverlay(targetContent, 'hover', hoverContent, Object.assign({ abortPromise }, this.overlayOptions));
         overlayReady();
@@ -260,2 +268,7 @@ }
     }
+    async _getUpdateComplete() {
+        const complete = (await super._getUpdateComplete());
+        await this.openStatePromise;
+        return complete;
+    }
     disconnectedCallback() {
@@ -262,0 +275,0 @@ if (this.closeClickOverlay) {

test/overlay-trigger-longpress.test.js

@@ -12,3 +12,3 @@ /*
 */
-import { fixture, expect, elementUpdated, waitUntil, html, } from '@open-wc/testing';
+import { fixture, expect, elementUpdated, waitUntil, html, oneEvent, } from '@open-wc/testing';
 import '@spectrum-web-components/action-button/sp-action-button.js';
@@ -18,6 +18,4 @@ import '@spectrum-web-components/action-group/sp-action-group.js';
 import '@spectrum-web-components/popover/sp-popover.js';
-import { OverlayTrigger } from '..';
 import '@spectrum-web-components/overlay/overlay-trigger.js';
 import { sendKeys } from '@web/test-runner-commands';
-import { waitForPredicate } from '../../../test/testing-helpers';
 import { spy } from 'sinon';
@@ -57,26 +55,36 @@ describe('Overlay Trigger - Longpress', () => {
         trigger.focus();
+        let open = oneEvent(el, 'sp-opened');
         await sendKeys({
             press: 'Space',
         });
-        await waitForPredicate(() => !(content.parentElement instanceof OverlayTrigger));
-        await waitUntil(() => content.open, 'opens for `Space`');
+        await open;
+        expect(content.open, 'opens for `Space`').to.be.true;
+        let closed = oneEvent(el, 'sp-closed');
         document.body.click();
-        await waitUntil(() => !content.open, 'closes for `Space`');
-        await elementUpdated(el);
+        await closed;
+        expect(!content.open, 'closes for `Space`').to.be.true;
         trigger.focus();
-        await sendKeys({
+        open = oneEvent(el, 'sp-opened');
+        sendKeys({
             press: 'Alt+ArrowDown',
         });
-        await waitUntil(() => content.open, 'opens for `Alt+ArrowDown`');
+        await open;
+        expect(content.open, 'opens for `Alt+ArrowDown`').to.be.true;
+        closed = oneEvent(el, 'sp-closed');
         await sendKeys({
             press: 'Escape',
         });
-        await waitUntil(() => !content.open, 'closes for `Alt+ArrowDown`');
+        await closed;
+        expect(!content.open, 'closes for `Alt+ArrowDown`').to.be.true;
         await elementUpdated(el);
+        open = oneEvent(el, 'sp-opened');
         trigger.dispatchEvent(new Event('pointerdown'));
-        await waitUntil(() => content.open, 'opens for `pointerdown`');
+        await open;
+        expect(content.open, 'opens for `pointerdown`').to.be.true;
+        closed = oneEvent(el, 'sp-closed');
         await sendKeys({
             press: 'Escape',
         });
-        await waitUntil(() => !content.open, 'closes for `pointerdown`');
+        await closed;
+        expect(!content.open, 'closes for `pointerdown`').to.be.true;
     });
@@ -101,7 +109,8 @@ it('displays `longpress` declaratively', async () => {
         await waitUntil(() => openedSpy.calledOnce, 'longpress content projected to overlay', { timeout: 2000 });
+        const closed = oneEvent(el, 'sp-closed');
         el.removeAttribute('open');
-        await elementUpdated(el);
-        await waitUntil(() => closedSpy.calledOnce, 'longpress content returned', { timeout: 2000 });
+        await closed;
+        expect(closedSpy.calledOnce, 'longpress content returned').to.be.true;
     });
 });
 //# sourceMappingURL=overlay-trigger-longpress.test.js.map

test/overlay-trigger.test.js

@@ -154,9 +154,10 @@ /*
             expect(outerButton).to.exist;
+            const opened = oneEvent(outerButton, 'sp-opened');
             outerButton.click();
-            await waitUntil(() => !(outerClickContent.parentElement instanceof
-                OverlayTrigger), 'Wait for the DOM node to be stolen and reparented into the overlay');
+            await opened;
             expect(outerClickContent.parentElement).to.not.be.an.instanceOf(OverlayTrigger);
             expect(isVisible(outerClickContent)).to.be.true;
+            const closed = oneEvent(outerButton, 'sp-closed');
             outerTrigger.disabled = true;
-            await waitUntil(() => outerClickContent.parentElement instanceof OverlayTrigger, 'Wait for the DOM node to be returned to the overlay trigger');
+            await closed;
             expect(isVisible(outerClickContent)).to.be.false;
@@ -513,30 +514,23 @@ expect(outerTrigger.disabled).to.be.true;
             expect(activeOverlays.length, 'no previous overlays').to.equal(0);
+            let open = oneEvent(triggers[0], 'sp-opened');
             (_a = triggers[0]) === null || _a === void 0 ? void 0 : _a.click();
+            await open;
             await elementUpdated(overlayTriggers[0]);
-            await waitUntil(() => {
-                activeOverlays = [
-                    ...document.querySelectorAll('active-overlay'),
-                ];
-                return activeOverlays.length === 1;
-            }, 'The first `active-overlay` element has been added.');
-            expect(activeOverlays.length).to.equal(1);
+            activeOverlays = [...document.querySelectorAll('active-overlay')];
+            expect(activeOverlays.length, 'The first `active-overlay` element has been added.').to.equal(1);
             expect(activeOverlays[0].slot, 'first overlay, first time').to.equal('open');
+            open = oneEvent(triggers[1], 'sp-opened');
             (_b = triggers[1]) === null || _b === void 0 ? void 0 : _b.click();
+            await open;
             await elementUpdated(overlayTriggers[1]);
-            await waitUntil(() => {
-                activeOverlays = [
-                    ...document.querySelectorAll('active-overlay'),
-                ];
-                return activeOverlays.length === 2;
-            }, 'The second `active-overlay` element has been added.');
+            activeOverlays = [...document.querySelectorAll('active-overlay')];
+            expect(activeOverlays.length, 'The second `active-overlay` element has been added.').to.equal(2);
             expect(activeOverlays[0].slot, 'first overlay, second time').to.equal('open');
             expect(activeOverlays[1].slot, 'second overlay, second time').to.equal('open');
+            open = oneEvent(triggers[2], 'sp-opened');
             (_c = triggers[2]) === null || _c === void 0 ? void 0 : _c.click();
+            await open;
             await elementUpdated(overlayTriggers[2]);
-            await waitUntil(() => {
-                activeOverlays = [
-                    ...document.querySelectorAll('active-overlay'),
-                ];
-                return activeOverlays.length === 3;
-            }, 'The third `active-overlay` element has been added.');
+            activeOverlays = [...document.querySelectorAll('active-overlay')];
+            expect(activeOverlays.length, 'The third `active-overlay` element has been added.').to.equal(3);
             expect(activeOverlays[0].hasAttribute('slot'), 'first overlay, third time').to.be.false;
@@ -546,11 +540,9 @@ expect(activeOverlays[1].hasAttribute('slot'), 'second overlay, third time').to.be.false;
             await nextFrame();
+            const closed = oneEvent(triggers[2], 'sp-closed');
             document.body.click();
-            await elementUpdated(overlayTriggers[1]);
+            await closed;
+            await elementUpdated(overlayTriggers[2]);
+            activeOverlays = [...document.querySelectorAll('active-overlay')];
+            expect(activeOverlays.length, 'The third `active-overlay` element has been removed.').to.equal(2);
             await waitUntil(() => {
-                activeOverlays = [
-                    ...document.querySelectorAll('active-overlay'),
-                ];
-                return activeOverlays.length === 2;
-            }, 'The third `active-overlay` element has been removed.');
-            await waitUntil(() => {
                 return activeOverlays[0].slot === 'open';
@@ -557,0 +549,0 @@ }, 'first overlay, last time');

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

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

623521

increased by16.7%

Number of package files

75

increased by2.74%

Lines of code

6759

increased by10.21%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updated@spectrum-web-components/action-button@^0.5.5

• Updated@spectrum-web-components/base@^0.4.5

• Updated@spectrum-web-components/shared@^0.12.7

• Updated@spectrum-web-components/theme@^0.8.12