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

Comparing version 0.11.4 to 0.11.5

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [0.11.5](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/overlay@0.11.4...@spectrum-web-components/overlay@0.11.5) (2021-05-12)
+
+### Bug Fixes
+
+-   **overlay:** reduce the control active-overlay places on its content ([9d12571](https://github.com/adobe/spectrum-web-components/commit/9d12571e59dfc7afa52ce14b70f2fdad1b607de1))
+-   update "reparentChildren" types for flexibility ([2d358be](https://github.com/adobe/spectrum-web-components/commit/2d358be094cf73785d0858545ccd0f9ca2aa8db0))
+-   update presence confirmation so popper is available on update ([24f8380](https://github.com/adobe/spectrum-web-components/commit/24f83800a2011f9181947795d9249b87be99f8ab))
+
 ## [0.11.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/overlay@0.11.3...@spectrum-web-components/overlay@0.11.4) (2021-04-15)
@@ -8,0 +16,0 @@

package.json

 {
     "name": "@spectrum-web-components/overlay",
-    "version": "0.11.4",
+    "version": "0.11.5",
     "publishConfig": {
@@ -52,6 +52,6 @@ "access": "public"
         "@popperjs/core": "^2.2.2",
-        "@spectrum-web-components/action-button": "^0.4.6",
+        "@spectrum-web-components/action-button": "^0.4.7",
         "@spectrum-web-components/base": "^0.4.3",
-        "@spectrum-web-components/shared": "^0.12.2",
-        "@spectrum-web-components/theme": "^0.8.6",
+        "@spectrum-web-components/shared": "^0.12.3",
+        "@spectrum-web-components/theme": "^0.8.7",
         "popper-max-size-modifier": "^0.2.0",
@@ -72,3 +72,3 @@ "tslib": "^2.0.0"
     ],
-    "gitHead": "8acfee43ce3be5d4a6da4cf1179d3400bca77968"
+    "gitHead": "50e608e54fbf56132aeed4433299fbcf7f6893ac"
 }

README.md

@@ -98,2 +98,6 @@ ## Description
 
+### Events
+
+The work to both open and close an overlay is asynchronous. This asynchrony is surfaced into the application via DOM events dispatched from the `trigger` element of your overlay. An `sp-opened` event will be dispatched once the overlay has finished opening, and an `sp-closed` event will be dispatched once the overlay has finished closing. In both cases, the dispatched event will include a `detail` property with an `interaction: TriggerInteractions` key to support associating the event/overlay with its originating `interaction`.
+
 ## Example
@@ -100,0 +104,0 @@

src/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:1000;position:absolute;display:inline-block;pointer-events:none}:host(:focus){outline:none}:host([placement=none]){top:0;left:0}:host([placement=none]) ::slotted(*){height:calc(100vh - var(--swc-body-margins-block, 0 * 1px))}#contents,sp-theme{height:100%}#contents{display:inline-block;pointer-events:none;animation-duration:var(--spectrum-global-animation-duration-200,.16s);animation-timing-function:var(--spectrum-global-animation-ease-out,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))}:host([animating]) ::slotted(*){pointer-events:none}#contents ::slotted(*){position:relative}
+@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;display:inline-block;pointer-events:none;top:0;left:0}:host(:focus){outline:none}#contents,sp-theme{height:100%}#contents{display:inline-block;pointer-events:none;animation-duration:var(--spectrum-global-animation-duration-200,.16s);animation-timing-function:var(--spectrum-global-animation-ease-out,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))}:host([animating]) ::slotted(*){pointer-events:none}:host(:not([animating])) ::slotted(*){pointer-events:auto}#contents ::slotted(*){position:relative}
 `;
 export default styles;
 //# sourceMappingURL=active-overlay.css.js.map

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:1000;position:absolute;display:inline-block;pointer-events:none}:host(:focus){outline:none}:host([placement=none]){top:0;left:0}:host([placement=none]) ::slotted(*){height:calc(100vh - var(--swc-body-margins-block, 0 * 1px))}#contents,sp-theme{height:100%}#contents{display:inline-block;pointer-events:none;animation-duration:var(--spectrum-global-animation-duration-200,.16s);animation-timing-function:var(--spectrum-global-animation-ease-out,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))}:host([animating]) ::slotted(*){pointer-events:none}#contents ::slotted(*){position:relative}
+@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;display:inline-block;pointer-events:none;top:0;left:0}:host(:focus){outline:none}#contents,sp-theme{height:100%}#contents{display:inline-block;pointer-events:none;animation-duration:var(--spectrum-global-animation-duration-200,.16s);animation-timing-function:var(--spectrum-global-animation-ease-out,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))}:host([animating]) ::slotted(*){pointer-events:none}:host(:not([animating])) ::slotted(*){pointer-events:auto}#contents ::slotted(*){position:relative}
 `;
 export default styles;

src/ActiveOverlay.js

@@ -279,4 +279,4 @@ /*
     async updateOverlayPosition() {
+        await (document.fonts ? document.fonts.ready : Promise.resolve());
         if (this.popper) {
-            await (document.fonts ? document.fonts.ready : Promise.resolve());
             await this.popper.update();
@@ -283,0 +283,0 @@ }

src/ActiveOverlay.ts

@@ -365,13 +365,9 @@ /*
         this.originalPlacement = element.getAttribute('placement') as Placement;
-        this.restoreContent = reparentChildren(
-            [element],
-            this,
-            (el: Element) => {
-                const slotName = el.slot;
-                el.removeAttribute('slot');
-                return (el: Element) => {
-                    el.slot = slotName;
-                };
-            }
-        );
+        this.restoreContent = reparentChildren([element], this, (el) => {
+            const slotName = el.slot;
+            el.removeAttribute('slot');
+            return (el) => {
+                el.slot = slotName;
+            };
+        });
         this.stealOverlayContentResolver();
@@ -397,4 +393,4 @@ }
     public async updateOverlayPosition(): Promise<void> {
+        await (document.fonts ? document.fonts.ready : Promise.resolve());
         if (this.popper) {
-            await (document.fonts ? document.fonts.ready : Promise.resolve());
             await this.popper.update();
@@ -401,0 +397,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

280309

increased by0.25%

Number of lines in readme file

194

increased by2.11%

Worsened metrics

Lines of code

3667

decreased by-0.24%

Dependency changes

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

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

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