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

Comparing version 0.6.5-alpha.85 to 0.6.5-alpha.169

custom-elements.json

@@ -160,2 +160,12 @@ {
       ],
+      "events": [
+        {
+          "name": "sp-open",
+          "description": "Announces that the overlay has been opened"
+        },
+        {
+          "name": "sp-close",
+          "description": "Announces that the overlay has been closed"
+        }
+      ],
       "slots": [
@@ -162,0 +172,0 @@ {

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.6.5-alpha.85+d9ef1386",
+    "version": "0.6.5-alpha.169+a396c860",
     "description": "",
@@ -65,8 +65,8 @@ "main": "./src/index.js",
         "@popperjs/core": "^2.2.2",
-        "@spectrum-web-components/base": "^0.1.4-alpha.85+d9ef1386",
-        "@spectrum-web-components/theme": "^0.6.4-alpha.85+d9ef1386",
+        "@spectrum-web-components/base": "^0.1.4-alpha.169+a396c860",
+        "@spectrum-web-components/theme": "^0.6.4-alpha.169+a396c860",
         "popper-max-size-modifier": "^0.2.0",
         "tslib": "^2.0.0"
     },
-    "gitHead": "d9ef13866edfb98e309914ae7582b807bee5d241"
+    "gitHead": "a396c860b62c2f94b2e9fcd015a4962a6c57af36"
 }

src/overlay-stack.js

@@ -205,2 +205,10 @@ /*
             }
+            details.trigger.dispatchEvent(new CustomEvent('sp-opened', {
+                bubbles: true,
+                composed: true,
+                cancelable: true,
+                detail: {
+                    interaction: details.interaction
+                },
+            }));
             return false;
@@ -300,3 +308,14 @@ });
                         !overlay.tabbingAway)) {
-                    overlay.trigger.focus();
+                    const overlayRoot = overlay.overlayContent.getRootNode();
+                    const overlayContentActiveElement = overlayRoot.activeElement;
+                    const triggerRoot = overlay.trigger.getRootNode();
+                    const triggerActiveElement = triggerRoot.activeElement;
+                    if (overlay.overlayContent.contains(overlayContentActiveElement) ||
+                        overlay.trigger
+                            .getRootNode()
+                            .contains(triggerActiveElement) ||
+                        (triggerRoot.host &&
+                            triggerRoot.host.isSameNode(triggerActiveElement))) {
+                        overlay.trigger.focus();
+                    }
                 }
@@ -307,2 +326,10 @@ overlay.tabbingAway = false;
             overlay.dispose();
+            overlay.trigger.dispatchEvent(new CustomEvent('sp-closed', {
+                bubbles: true,
+                composed: true,
+                cancelable: true,
+                detail: {
+                    interaction: overlay.interaction,
+                },
+            }));
         }
@@ -309,0 +336,0 @@ }

src/overlay-stack.ts

@@ -14,3 +14,3 @@ /*
 import { ActiveOverlay } from './ActiveOverlay.js';
-import { OverlayOpenDetail } from './overlay-types';
+import { OverlayOpenDetail, OverlayOpenCloseDetail } from './overlay-types';
 import { OverlayTimer } from './overlay-timer.js';
@@ -196,2 +196,12 @@ import '../active-overlay.js';
                 }
+                details.trigger.dispatchEvent(
+                    new CustomEvent<OverlayOpenCloseDetail>('sp-opened', {
+                        bubbles: true,
+                        composed: true,
+                        cancelable: true,
+                        detail: {
+                            interaction: details.interaction
+                        },
+                    })
+                );
                 return false;
@@ -333,3 +343,19 @@ }
                 ) {
-                    overlay.trigger.focus();
+                    const overlayRoot = overlay.overlayContent.getRootNode() as ShadowRoot;
+                    const overlayContentActiveElement =
+                        overlayRoot.activeElement;
+                    const triggerRoot = overlay.trigger.getRootNode() as ShadowRoot;
+                    const triggerActiveElement = triggerRoot.activeElement;
+                    if (
+                        overlay.overlayContent.contains(
+                            overlayContentActiveElement
+                        ) ||
+                        overlay.trigger
+                            .getRootNode()
+                            .contains(triggerActiveElement) ||
+                        (triggerRoot.host &&
+                            triggerRoot.host.isSameNode(triggerActiveElement))
+                    ) {
+                        overlay.trigger.focus();
+                    }
                 }
@@ -341,2 +367,13 @@ overlay.tabbingAway = false;
             overlay.dispose();
+
+            overlay.trigger.dispatchEvent(
+                new CustomEvent<OverlayOpenCloseDetail>('sp-closed', {
+                    bubbles: true,
+                    composed: true,
+                    cancelable: true,
+                    detail: {
+                        interaction: overlay.interaction,
+                    },
+                })
+            );
         }
@@ -343,0 +380,0 @@ }

src/overlay-types.d.ts

@@ -15,2 +15,5 @@ import { ThemeData } from '@spectrum-web-components/theme';
 }
+export interface OverlayOpenCloseDetail {
+    interaction: TriggerInteractions;
+}
 /**
@@ -35,3 +38,5 @@ * Used, via an event, to query details about how an element should be shown in
         'sp-overlay-query': CustomEvent<OverlayDisplayQueryDetail>;
+        'sp-open': CustomEvent<OverlayOpenCloseDetail>;
+        'sp-close': CustomEvent<OverlayOpenCloseDetail>;
     }
 }

src/overlay-types.ts

@@ -36,2 +36,6 @@ /*
 
+export interface OverlayOpenCloseDetail {
+    interaction: TriggerInteractions;
+}
+
 /**
@@ -59,3 +63,5 @@ * Used, via an event, to query details about how an element should be shown in
         'sp-overlay-query': CustomEvent<OverlayDisplayQueryDetail>;
+        'sp-open': CustomEvent<OverlayOpenCloseDetail>;
+        'sp-close': CustomEvent<OverlayOpenCloseDetail>;
     }
 }

src/overlay.d.ts

@@ -48,1 +48,13 @@ import { TriggerInteractions, OverlayOptions } from './overlay-types';
 }
+/**
+* Announces that an overlay-based UI element has opened
+* @event sp-open
+* @type {object}
+* @property {TriggerInteractions} interaction type of interaction that triggered the opening
+*/
+/**
+* Announces that an overlay-based UI element has opened
+* @event sp-close
+* @type {object}
+* @property {TriggerInteractions} interaction type of interaction that triggered the closing
+*/

src/overlay.js

@@ -104,2 +104,14 @@ /*
 Overlay.overlayStack = new OverlayStack();
+/**
+* Announces that an overlay-based UI element has opened
+* @event sp-open
+* @type {object}
+* @property {TriggerInteractions} interaction type of interaction that triggered the opening
+*/
+/**
+* Announces that an overlay-based UI element has opened
+* @event sp-close
+* @type {object}
+* @property {TriggerInteractions} interaction type of interaction that triggered the closing
+*/
 //# sourceMappingURL=overlay.js.map

src/overlay.ts

@@ -151,1 +151,15 @@ /*
 }
+
+/**
+* Announces that an overlay-based UI element has opened
+* @event sp-open
+* @type {object}
+* @property {TriggerInteractions} interaction type of interaction that triggered the opening
+*/
+
+/**
+* Announces that an overlay-based UI element has opened
+* @event sp-close
+* @type {object}
+* @property {TriggerInteractions} interaction type of interaction that triggered the closing
+*/

src/OverlayTrigger.d.ts

@@ -10,2 +10,5 @@ import { LitElement, CSSResultArray, TemplateResult, PropertyValues } from '@spectrum-web-components/base';
  * @slot click-content - The content that will be displayed on click
+ *
+ * @fires sp-open - Announces that the overlay has been opened
+ * @fires sp-close - Announces that the overlay has been closed
  */
@@ -12,0 +15,0 @@ export declare class OverlayTrigger extends LitElement {

src/OverlayTrigger.js

@@ -23,2 +23,5 @@ /*
  * @slot click-content - The content that will be displayed on click
+ *
+ * @fires sp-open - Announces that the overlay has been opened
+ * @fires sp-close - Announces that the overlay has been closed
  */
@@ -25,0 +28,0 @@ export class OverlayTrigger extends LitElement {

src/OverlayTrigger.ts

@@ -37,2 +37,5 @@ /*
  * @slot click-content - The content that will be displayed on click
+ *
+ * @fires sp-open - Announces that the overlay has been opened
+ * @fires sp-close - Announces that the overlay has been closed
  */
@@ -39,0 +42,0 @@ export class OverlayTrigger extends LitElement {

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

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

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

252805

increased by3.43%

Lines of code

3470

increased by3.83%

Dependency changes

• Updated@spectrum-web-components/base@^0.1.4-alpha.169+a396c860

• Updated@spectrum-web-components/theme@^0.6.4-alpha.169+a396c860