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

Comparing version 0.3.0 to 0.3.1

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+## [0.3.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/overlay@0.3.0...@spectrum-web-components/overlay@0.3.1) (2020-03-11)
+
+### Bug Fixes
+
+-   **overlay:** extend state machine to manage disposal process ([f0f26af](https://github.com/adobe/spectrum-web-components/commit/f0f26af))
+
 # [0.3.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/overlay@0.2.1...@spectrum-web-components/overlay@0.3.0) (2020-02-24)
@@ -8,0 +14,0 @@

lib/active-overlay.d.ts

@@ -12,3 +12,3 @@ import { Placement, OverlayOpenDetail, TriggerInteractions } from './overlay-types.js';
 }
-declare type OverlayStateType = 'idle' | 'active' | 'visible' | 'hiding';
+declare type OverlayStateType = 'idle' | 'active' | 'visible' | 'hiding' | 'dispose' | 'disposed';
 declare type ContentAnimation = 'spOverlayFadeIn' | 'spOverlayFadeOut';
@@ -15,0 +15,0 @@ export declare class ActiveOverlay extends LitElement {

lib/active-overlay.js

@@ -39,5 +39,13 @@ /*
             on: {
-                idle: 'idle',
+                dispose: 'dispose',
             },
         },
+        dispose: {
+            on: {
+                disposed: 'disposed',
+            },
+        },
+        disposed: {
+            on: {},
+        },
     },
@@ -72,7 +80,9 @@ };
         this._state = nextState;
-        if (this.state === 'idle') {
-            this.removeAttribute('state');
+        if (this.state === 'active' ||
+            this.state === 'visible' ||
+            this.state === 'hiding') {
+            this.setAttribute('state', this.state);
         }
         else {
-            this.setAttribute('state', this.state);
+            this.removeAttribute('state');
         }
@@ -123,2 +133,3 @@ }
     updateOverlayPopperPlacement() {
+        /* istanbul ignore if */
         if (!this.overlayContent)
@@ -158,3 +169,6 @@ return;
     dispose() {
-        this.state = 'idle';
+        /* istanbul ignore if */
+        if (this.state !== 'dispose')
+            return;
+        /* istanbul ignore if */
         if (this.timeout) {
@@ -164,2 +178,3 @@ clearTimeout(this.timeout);
         }
+        /* istanbul ignore else */
         if (this.popper) {
@@ -170,2 +185,3 @@ this.popper.destroy();
         this.returnOverlayContent();
+        this.state = 'disposed';
     }
@@ -224,7 +240,7 @@ stealOverlayContent(element) {
     async hide(animated = true) {
+        this.state = 'hiding';
         if (animated) {
-            this.state = 'hiding';
             await this.applyContentAnimation('spOverlayFadeOut');
         }
-        this.state = 'idle';
+        this.state = 'dispose';
     }
@@ -231,0 +247,0 @@ schedulePositionUpdate() {

lib/overlay-stack.d.ts

@@ -14,3 +14,2 @@ import { ActiveOverlay } from './active-overlay.js';
     private addEventListeners;
-    private isOverlayActive;
     private isClickOverlayActiveForTrigger;
@@ -17,0 +16,0 @@ openOverlay(details: OverlayOpenDetail): Promise<boolean>;

lib/overlay-stack.js

@@ -87,5 +87,2 @@ /*
     }
-    isOverlayActive(overlayContent) {
-        return !!this.overlays.find((item) => overlayContent.isSameNode(item.overlayContent));
-    }
     isClickOverlayActiveForTrigger(trigger) {
@@ -96,5 +93,5 @@ return this.overlays.some((item) => trigger.isSameNode(item.trigger) &&
     async openOverlay(details) {
-        /* istanbul ignore if */
-        if (this.isOverlayActive(details.content))
+        if (this.findOverlayForContent(details.content)) {
             return false;
+        }
         if (details.delayed) {
@@ -142,2 +139,4 @@ const promise = this.overlayTimer.openTimer(details.content);
             await overlay.hide(animated);
+            if (overlay.state != 'dispose')
+                return;
             overlay.remove();
@@ -144,0 +143,0 @@ overlay.dispose();

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.3.0",
+    "version": "0.3.1",
     "description": "",
@@ -43,6 +43,6 @@ "main": "lib/index.js",
         "@popperjs/core": "^2.0.4",
-        "@spectrum-web-components/theme": "^0.2.0",
+        "@spectrum-web-components/theme": "^0.3.0",
         "tslib": "^1.10.0"
     },
-    "gitHead": "458efe94228954db66b17c16312987c0778813c1"
+    "gitHead": "d5b370be9515cb1458c436fd4b7c8689e2bfb933"
 }

src/active-overlay.ts

@@ -39,3 +39,9 @@ /*
 
-type OverlayStateType = 'idle' | 'active' | 'visible' | 'hiding';
+type OverlayStateType =
+    | 'idle'
+    | 'active'
+    | 'visible'
+    | 'hiding'
+    | 'dispose'
+    | 'disposed';
 type ContentAnimation = 'spOverlayFadeIn' | 'spOverlayFadeOut';
@@ -75,5 +81,13 @@
             on: {
-                idle: 'idle',
+                dispose: 'dispose',
             },
         },
+        dispose: {
+            on: {
+                disposed: 'disposed',
+            },
+        },
+        disposed: {
+            on: {},
+        },
     },
@@ -112,6 +126,10 @@ };
         this._state = nextState;
-        if (this.state === 'idle') {
+        if (
+            this.state === 'active' ||
+            this.state === 'visible' ||
+            this.state === 'hiding'
+        ) {
+            this.setAttribute('state', this.state);
+        } else {
             this.removeAttribute('state');
-        } else {
-            this.setAttribute('state', this.state);
         }
@@ -199,2 +217,3 @@ }
     private updateOverlayPopperPlacement(): void {
+        /* istanbul ignore if */
         if (!this.overlayContent) return;
@@ -242,4 +261,6 @@
     public dispose(): void {
-        this.state = 'idle';
+        /* istanbul ignore if */
+        if (this.state !== 'dispose') return;
 
+        /* istanbul ignore if */
         if (this.timeout) {
@@ -250,2 +271,3 @@ clearTimeout(this.timeout);
 
+        /* istanbul ignore else */
         if (this.popper) {
@@ -257,2 +279,3 @@ this.popper.destroy();
         this.returnOverlayContent();
+        this.state = 'disposed';
     }
@@ -333,7 +356,7 @@
     public async hide(animated = true): Promise<void> {
+        this.state = 'hiding';
         if (animated) {
-            this.state = 'hiding';
             await this.applyContentAnimation('spOverlayFadeOut');
         }
-        this.state = 'idle';
+        this.state = 'dispose';
     }
@@ -340,0 +363,0 @@

src/overlay-stack.ts

@@ -62,8 +62,2 @@ /*
 
-    private isOverlayActive(overlayContent: HTMLElement): boolean {
-        return !!this.overlays.find((item) =>
-            overlayContent.isSameNode(item.overlayContent as HTMLElement)
-        );
-    }
-
     private isClickOverlayActiveForTrigger(trigger: HTMLElement): boolean {
@@ -78,4 +72,5 @@ return this.overlays.some(
     public async openOverlay(details: OverlayOpenDetail): Promise<boolean> {
-        /* istanbul ignore if */
-        if (this.isOverlayActive(details.content)) return false;
+        if (this.findOverlayForContent(details.content)) {
+            return false;
+        }
 
@@ -156,2 +151,4 @@ if (details.delayed) {
             await overlay.hide(animated);
+            if (overlay.state != 'dispose') return;
+
             overlay.remove();
@@ -158,0 +155,0 @@ overlay.dispose();

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

Improved metrics

Total package byte prevSize

172799

increased by0.88%

Lines of code

2507

increased by1.37%

Dependency changes

• + Added@spectrum-web-components/styles@0.5.3(transitive)

• + Added@spectrum-web-components/theme@0.3.2(transitive)

• - Removed@spectrum-web-components/styles@0.4.3(transitive)

• - Removed@spectrum-web-components/theme@0.2.0(transitive)

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