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

Comparing version 0.2.1 to 0.3.0

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+# [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)
+
+### Features
+
+-   **dropdown:** open menu UI with overlay system ([9811eeb](https://github.com/adobe/spectrum-web-components/commit/9811eeb))
+
 ## [0.2.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/overlay@0.2.0...@spectrum-web-components/overlay@0.2.1) (2020-02-05)
@@ -8,0 +14,0 @@

lib/active-overlay.css.js

@@ -14,5 +14,5 @@ /*
 const styles = css `
-@keyframes spOverlayFadeIn{0%{opacity:0;transform:var(--sp-overlay-from)}to{opacity:1;transform:translate(0)}}@keyframes spOverlayFadeOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:var(--sp-overlay-from)}}:host{z-index:2;position:absolute}#contents,:host{display:inline-block;pointer-events:none}#contents{animation-duration:var(--spectrum-global-animation-duration-200);animation-timing-function:var(--spectrum-global-animation-ease-out);opacity:1;visibility:visible}:host([data-popper-placement*=top]) #contents{--sp-overlay-from:translateY(var(--spectrum-global-dimension-size-75))}:host([data-popper-placement*=right]) #contents{--sp-overlay-from:translateX(calc(-1*var(--spectrum-global-dimension-size-75)))}:host([data-popper-placement*=bottom]) #contents{--sp-overlay-from:translateY(calc(-1*var(--spectrum-global-dimension-size-75)))}:host([data-popper-placement*=left]) #contents{--sp-overlay-from:translateX(var(--spectrum-global-dimension-size-75))}::slotted(*){position:relative}:host([animating]) ::slotted(*){pointer-events:none}
+@keyframes spOverlayFadeIn{0%{opacity:0;transform:var(--sp-overlay-from)}to{opacity:1;transform:translate(0)}}@keyframes spOverlayFadeOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:var(--sp-overlay-from)}}:host{z-index:1000;position:absolute}#contents,:host{display:inline-block;pointer-events:none}#contents{animation-duration:var(--spectrum-global-animation-duration-200);animation-timing-function:var(--spectrum-global-animation-ease-out);opacity:1;visibility:visible}:host([data-popper-placement*=top]) #contents{--sp-overlay-from:translateY(var(--spectrum-global-dimension-size-75))}:host([data-popper-placement*=right]) #contents{--sp-overlay-from:translateX(calc(-1*var(--spectrum-global-dimension-size-75)))}:host([data-popper-placement*=bottom]) #contents{--sp-overlay-from:translateY(calc(-1*var(--spectrum-global-dimension-size-75)))}:host([data-popper-placement*=left]) #contents{--sp-overlay-from:translateX(var(--spectrum-global-dimension-size-75))}::slotted(*){position:relative}:host([animating]) ::slotted(*){pointer-events:none}
 `;
 export default styles;
 //# sourceMappingURL=active-overlay.css.js.map

lib/active-overlay.js

@@ -174,5 +174,6 @@ /*
         }
+        const parentElement = element.parentElement || element.getRootNode();
         /* istanbul ignore else */
-        if (element.parentElement) {
-            element.parentElement.replaceChild(this.placeholder, element);
+        if (parentElement) {
+            parentElement.replaceChild(this.placeholder, element);
         }
@@ -197,4 +198,10 @@ this.overlayContent = element;
         /* istanbul ignore else */
-        if (this.placeholder && this.placeholder.parentElement) {
-            this.placeholder.parentElement.replaceChild(this.overlayContent, this.placeholder);
+        if (this.placeholder) {
+            const parentElement = this.placeholder.parentElement ||
+                this.placeholder.getRootNode();
+            /* istanbul ignore else */
+            if (parentElement) {
+                parentElement.replaceChild(this.overlayContent, this.placeholder);
+                this.overlayContent.dispatchEvent(new Event('sp-overlay-closed'));
+            }
         }
@@ -201,0 +208,0 @@ if (this.originalPlacement) {

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.2.1",
+    "version": "0.3.0",
     "description": "",
@@ -46,3 +46,3 @@ "main": "lib/index.js",
     },
-    "gitHead": "02944b5006325e4ddc72f0a5f21b230d61401f0c"
+    "gitHead": "458efe94228954db66b17c16312987c0778813c1"
 }

README.md

@@ -34,3 +34,3 @@ ## Description
     <sp-button variant="primary" slot="trigger">
-        Bottom Popover
+        Bottopopover
     </sp-button>
@@ -46,3 +46,3 @@ <sp-popover dialog slot="click-content" direction="bottom" tip open>
             ></sp-slider>
-            <sp-button>Press Me</sp-button>
+            <sp-button>Press me</sp-button>
         </div>
@@ -49,0 +49,0 @@ </sp-popover>

src/active-overlay.css.ts

@@ -14,4 +14,4 @@ /*
 const styles = css`
-@keyframes spOverlayFadeIn{0%{opacity:0;transform:var(--sp-overlay-from)}to{opacity:1;transform:translate(0)}}@keyframes spOverlayFadeOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:var(--sp-overlay-from)}}:host{z-index:2;position:absolute}#contents,:host{display:inline-block;pointer-events:none}#contents{animation-duration:var(--spectrum-global-animation-duration-200);animation-timing-function:var(--spectrum-global-animation-ease-out);opacity:1;visibility:visible}:host([data-popper-placement*=top]) #contents{--sp-overlay-from:translateY(var(--spectrum-global-dimension-size-75))}:host([data-popper-placement*=right]) #contents{--sp-overlay-from:translateX(calc(-1*var(--spectrum-global-dimension-size-75)))}:host([data-popper-placement*=bottom]) #contents{--sp-overlay-from:translateY(calc(-1*var(--spectrum-global-dimension-size-75)))}:host([data-popper-placement*=left]) #contents{--sp-overlay-from:translateX(var(--spectrum-global-dimension-size-75))}::slotted(*){position:relative}:host([animating]) ::slotted(*){pointer-events:none}
+@keyframes spOverlayFadeIn{0%{opacity:0;transform:var(--sp-overlay-from)}to{opacity:1;transform:translate(0)}}@keyframes spOverlayFadeOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:var(--sp-overlay-from)}}:host{z-index:1000;position:absolute}#contents,:host{display:inline-block;pointer-events:none}#contents{animation-duration:var(--spectrum-global-animation-duration-200);animation-timing-function:var(--spectrum-global-animation-ease-out);opacity:1;visibility:visible}:host([data-popper-placement*=top]) #contents{--sp-overlay-from:translateY(var(--spectrum-global-dimension-size-75))}:host([data-popper-placement*=right]) #contents{--sp-overlay-from:translateX(calc(-1*var(--spectrum-global-dimension-size-75)))}:host([data-popper-placement*=bottom]) #contents{--sp-overlay-from:translateY(calc(-1*var(--spectrum-global-dimension-size-75)))}:host([data-popper-placement*=left]) #contents{--sp-overlay-from:translateX(var(--spectrum-global-dimension-size-75))}::slotted(*){position:relative}:host([animating]) ::slotted(*){pointer-events:none}
 `;
 export default styles;

src/active-overlay.ts

@@ -263,5 +263,7 @@ /*
 
+        const parentElement = element.parentElement || element.getRootNode();
+
         /* istanbul ignore else */
-        if (element.parentElement) {
-            element.parentElement.replaceChild(this.placeholder, element);
+        if (parentElement) {
+            parentElement.replaceChild(this.placeholder, element);
         }
@@ -291,7 +293,16 @@
         /* istanbul ignore else */
-        if (this.placeholder && this.placeholder.parentElement) {
-            this.placeholder.parentElement.replaceChild(
-                this.overlayContent,
-                this.placeholder
-            );
+        if (this.placeholder) {
+            const parentElement =
+                this.placeholder.parentElement ||
+                this.placeholder.getRootNode();
+            /* istanbul ignore else */
+            if (parentElement) {
+                parentElement.replaceChild(
+                    this.overlayContent,
+                    this.placeholder
+                );
+                this.overlayContent.dispatchEvent(
+                    new Event('sp-overlay-closed')
+                );
+            }
         }
@@ -298,0 +309,0 @@

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

171285

increased by0.92%

Lines of code

2473

increased by0.69%

No dependency changes