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

Comparing version 0.11.7-alpha.0 to 0.11.7

CHANGELOG.md

@@ -6,2 +6,9 @@ # Change Log
 
+## [0.11.7](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/overlay@0.11.6...@spectrum-web-components/overlay@0.11.7) (2021-06-07)
+
+### Bug Fixes
+
+-   ensure focus is managed when tabbing out of a menu ([9bfa81d](https://github.com/adobe/spectrum-web-components/commit/9bfa81d8a677d6c0ab5ac5cd618498496761c69b))
+-   **overlay:** vend a VirtualTrigger for overlays with no element trigger ([a359c60](https://github.com/adobe/spectrum-web-components/commit/a359c6078aa4fac3c9a7bd140609acd4d9aed81d))
+
 ## [0.11.6](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/overlay@0.11.5...@spectrum-web-components/overlay@0.11.6) (2021-05-24)
@@ -8,0 +15,0 @@

custom-elements.json

@@ -36,2 +36,6 @@ {
         {
+          "name": "virtualTrigger",
+          "type": "VirtualTrigger | undefined"
+        },
+        {
           "name": "state",
@@ -95,2 +99,5 @@ "type": "OverlayStateType"
         {
+          "name": "sp-opened"
+        },
+        {
           "name": "sp-overlay-closed"
@@ -97,0 +104,0 @@ },

local.d.ts

@@ -23,5 +23,5 @@ /*
 declare module '@popperjs/core/dist/esm/types.js' {
-    import { Instance } from '@popperjs/core/lib/types.js';
+    import { Instance, VirtualElement } from '@popperjs/core/lib/types.js';
 
-    export { Instance };
+    export { Instance, VirtualElement };
 }
@@ -28,0 +28,0 @@

package.json

 {
     "name": "@spectrum-web-components/overlay",
-    "version": "0.11.7-alpha.0+24b598bc7",
+    "version": "0.11.7",
     "publishConfig": {
@@ -52,6 +52,6 @@ "access": "public"
         "@popperjs/core": "^2.2.2",
-        "@spectrum-web-components/action-button": "^0.5.1-alpha.0+24b598bc7",
-        "@spectrum-web-components/base": "^0.4.4-alpha.101+24b598bc7",
-        "@spectrum-web-components/shared": "^0.12.5-alpha.0+24b598bc7",
-        "@spectrum-web-components/theme": "^0.8.8-alpha.27+24b598bc7",
+        "@spectrum-web-components/action-button": "^0.5.1",
+        "@spectrum-web-components/base": "^0.4.3",
+        "@spectrum-web-components/shared": "^0.12.4",
+        "@spectrum-web-components/theme": "^0.8.8",
         "popper-max-size-modifier": "^0.2.0",
@@ -72,3 +72,3 @@ "tslib": "^2.0.0"
     ],
-    "gitHead": "24b598bc7c57c7f279c8957abbc0b0827ecd7089"
+    "gitHead": "b425768aaf694ab19ddad4fcab9939c29a2a503b"
 }

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

 import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
 import { Color, Scale } from '@spectrum-web-components/theme';
 import { OverlayOpenDetail, Placement, TriggerInteractions } from './overlay-types.js';
+import { VirtualTrigger } from './VirtualTrigger.js';
 export interface PositionResult {
@@ -25,2 +26,3 @@ arrowOffsetLeft: number;
     trigger: HTMLElement;
+    virtualTrigger?: VirtualTrigger;
     private popper?;
@@ -77,4 +79,4 @@ _state: OverlayStateType;
     private stealOverlayContentResolver;
-    protected getUpdateComplete(): Promise<boolean>;
+    protected _getUpdateComplete(): Promise<void>;
 }
 export {};

src/ActiveOverlay.js

@@ -164,3 +164,3 @@ /*
         if (this.placement && this.placement !== 'none') {
-            this.popper = createPopper(this.trigger, this, {
+            this.popper = createPopper(this.virtualTrigger || this.trigger, this, {
                 placement: this.placement,
@@ -197,2 +197,10 @@ modifiers: [
             }
+            this.trigger.dispatchEvent(new CustomEvent('sp-opened', {
+                bubbles: true,
+                composed: true,
+                cancelable: true,
+                detail: {
+                    interaction: this.interaction,
+                },
+            }));
         });
@@ -229,2 +237,3 @@ }
         this.trigger = detail.trigger;
+        this.virtualTrigger = detail.virtualTrigger;
         this.placement = detail.placement;
@@ -346,6 +355,5 @@ this.offset = detail.offset;
     }
-    async getUpdateComplete() {
-        await super.getUpdateComplete();
+    async _getUpdateComplete() {
+        await super._getUpdateComplete();
         await this.stealOverlayContentPromise;
-        return true;
     }
@@ -352,0 +360,0 @@ }

src/ActiveOverlay.ts

@@ -29,4 +29,6 @@ /*
     TriggerInteractions,
+    OverlayOpenCloseDetail,
 } from './overlay-types.js';
 import { applyMaxSize, createPopper, Instance, maxSize } from './popper.js';
+import { VirtualTrigger } from './VirtualTrigger.js';
 
@@ -119,2 +121,3 @@ export interface PositionResult {
     public trigger!: HTMLElement;
+    public virtualTrigger?: VirtualTrigger;
 
@@ -255,21 +258,25 @@ private popper?: Instance;
         if (this.placement && this.placement !== 'none') {
-            this.popper = createPopper(this.trigger, this, {
-                placement: this.placement,
-                modifiers: [
-                    maxSize,
-                    applyMaxSize,
-                    {
-                        name: 'arrow',
-                        options: {
-                            element: this.overlayContentTip,
+            this.popper = createPopper(
+                this.virtualTrigger || this.trigger,
+                this,
+                {
+                    placement: this.placement,
+                    modifiers: [
+                        maxSize,
+                        applyMaxSize,
+                        {
+                            name: 'arrow',
+                            options: {
+                                element: this.overlayContentTip,
+                            },
                         },
-                    },
-                    {
-                        name: 'offset',
-                        options: {
-                            offset: [0, this.offset],
+                        {
+                            name: 'offset',
+                            options: {
+                                offset: [0, this.offset],
+                            },
                         },
-                    },
-                ],
-            });
+                    ],
+                }
+            );
         }
@@ -291,2 +298,12 @@
                 }
+                this.trigger.dispatchEvent(
+                    new CustomEvent<OverlayOpenCloseDetail>('sp-opened', {
+                        bubbles: true,
+                        composed: true,
+                        cancelable: true,
+                        detail: {
+                            interaction: this.interaction,
+                        },
+                    })
+                );
             });
@@ -331,2 +348,3 @@ }
         this.trigger = detail.trigger;
+        this.virtualTrigger = detail.virtualTrigger;
         this.placement = detail.placement;
@@ -496,7 +514,6 @@ this.offset = detail.offset;
 
-    protected async getUpdateComplete(): Promise<boolean> {
-        await super.getUpdateComplete();
+    protected async _getUpdateComplete(): Promise<void> {
+        await super._getUpdateComplete();
         await this.stealOverlayContentPromise;
-        return true;
     }
 }

src/index.d.ts

@@ -6,1 +6,2 @@ export * from './overlay.js';
 export * from './loader.js';
+export * from './VirtualTrigger.js';

src/index.js

@@ -17,2 +17,3 @@ /*
 export * from './loader.js';
+export * from './VirtualTrigger.js';
 //# sourceMappingURL=index.js.map

src/index.ts

@@ -17,1 +17,2 @@ /*
 export * from './loader.js';
+export * from './VirtualTrigger.js';

src/overlay-stack.js

@@ -247,10 +247,2 @@ /*
             }
-            details.trigger.dispatchEvent(new CustomEvent('sp-opened', {
-                bubbles: true,
-                composed: true,
-                cancelable: true,
-                detail: {
-                    interaction: details.interaction,
-                },
-            }));
             return false;
@@ -305,2 +297,6 @@ });
             event.stopPropagation();
+            const triggerWithLifecycle = activeOverlay.trigger;
+            if (typeof triggerWithLifecycle.open !== 'undefined') {
+                triggerWithLifecycle.open = false;
+            }
             this.closeOverlay(activeOverlay.overlayContent);
@@ -307,0 +303,0 @@ activeOverlay.trigger.focus();

src/overlay-stack.ts

@@ -243,12 +243,2 @@ /*
                 }
-                details.trigger.dispatchEvent(
-                    new CustomEvent<OverlayOpenCloseDetail>('sp-opened', {
-                        bubbles: true,
-                        composed: true,
-                        cancelable: true,
-                        detail: {
-                            interaction: details.interaction,
-                        },
-                    })
-                );
                 return false;
@@ -316,2 +306,6 @@ }
             event.stopPropagation();
+            const triggerWithLifecycle = (activeOverlay.trigger as unknown) as ManagedOverlayContent;
+            if (typeof triggerWithLifecycle.open !== 'undefined') {
+                triggerWithLifecycle.open = false;
+            }
             this.closeOverlay(activeOverlay.overlayContent);
@@ -318,0 +312,0 @@ activeOverlay.trigger.focus();

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/overlay-types.d.ts

 import { ThemeData } from '@spectrum-web-components/theme';
 import { Placement as PopperPlacement } from './popper';
+import { VirtualTrigger } from './VirtualTrigger.js';
 export declare type TriggerInteractions = 'click' | 'longpress' | 'hover' | 'custom' | 'replace' | 'inline' | 'modal';
@@ -11,2 +12,3 @@ export interface OverlayOpenDetail {
     receivesFocus?: 'auto';
+    virtualTrigger?: VirtualTrigger;
     trigger: HTMLElement;
@@ -38,2 +40,3 @@ interaction: TriggerInteractions;
     abortPromise?: Promise<boolean>;
+    virtualTrigger?: VirtualTrigger;
 };
@@ -40,0 +43,0 @@ declare global {

src/overlay-types.ts

@@ -15,2 +15,3 @@ /*
 import { Placement as PopperPlacement } from './popper';
+import { VirtualTrigger } from './VirtualTrigger.js';
 
@@ -33,2 +34,3 @@ export type TriggerInteractions =
     receivesFocus?: 'auto';
+    virtualTrigger?: VirtualTrigger;
     trigger: HTMLElement;
@@ -64,2 +66,3 @@ interaction: TriggerInteractions;
     abortPromise?: Promise<boolean>;
+    virtualTrigger?: VirtualTrigger;
 };
@@ -66,0 +69,0 @@

src/overlay.d.ts

@@ -42,3 +42,3 @@ import { TriggerInteractions, OverlayOptions } from './overlay-types';
      */
-    open({ abortPromise, delayed, offset, placement, receivesFocus, notImmediatelyClosable, }: OverlayOptions): Promise<boolean>;
+    open({ abortPromise, delayed, offset, placement, receivesFocus, notImmediatelyClosable, virtualTrigger, }: OverlayOptions): Promise<boolean>;
     /**
@@ -45,0 +45,0 @@ * Close the overlay if it is open

src/overlay.js

@@ -66,3 +66,3 @@ /*
      */
-    async open({ abortPromise, delayed, offset = 0, placement = 'top', receivesFocus, notImmediatelyClosable, }) {
+    async open({ abortPromise, delayed, offset = 0, placement = 'top', receivesFocus, notImmediatelyClosable, virtualTrigger, }) {
         /* c8 ignore next */
@@ -94,3 +94,4 @@ if (this.isOpen)
         await Overlay.overlayStack.openOverlay(Object.assign({ abortPromise, content: this.overlayElement, contentTip: overlayDetailQuery.overlayContentTipElement, delayed, offset: offset, placement: placement, trigger: this.owner, interaction: this.interaction, theme: queryThemeDetail, receivesFocus,
-            notImmediatelyClosable }, overlayDetailQuery));
+            notImmediatelyClosable,
+            virtualTrigger }, overlayDetailQuery));
         this.isOpen = true;
@@ -97,0 +98,0 @@ return true;

src/overlay.ts

@@ -99,2 +99,3 @@ /*
         notImmediatelyClosable,
+        virtualTrigger,
     }: OverlayOptions): Promise<boolean> {
@@ -144,2 +145,3 @@ /* c8 ignore next */
             notImmediatelyClosable,
+            virtualTrigger,
             ...overlayDetailQuery,
@@ -146,0 +148,0 @@ });

src/popper.d.ts

 /// <reference path="../local.d.ts" />
 import type { Placement } from '@popperjs/core/dist/esm/enums.js';
-import type { Instance } from '@popperjs/core/dist/esm/types.js';
+import type { Instance, VirtualElement } from '@popperjs/core/dist/esm/types.js';
 import maxSize from 'popper-max-size-modifier';
 import { applyMaxSize } from './apply-max-size.js';
-export declare const createPopper: <TModifier extends Partial<import("@popperjs/core").Modifier<any, any>>>(reference: Element | import("@popperjs/core").VirtualElement, popper: HTMLElement, options?: Partial<import("@popperjs/core").OptionsGeneric<TModifier>> | undefined) => Instance;
-export type { Instance, Placement };
+export declare const createPopper: <TModifier extends Partial<import("@popperjs/core").Modifier<any, any>>>(reference: Element | VirtualElement, popper: HTMLElement, options?: Partial<import("@popperjs/core").OptionsGeneric<TModifier>> | undefined) => Instance;
+export type { Instance, Placement, VirtualElement };
 export { maxSize, applyMaxSize };

src/popper.ts

@@ -27,3 +27,6 @@ /*
 } from '@popperjs/core/dist/esm/popper-lite.js';
-import type { Instance } from '@popperjs/core/dist/esm/types.js';
+import type {
+    Instance,
+    VirtualElement,
+} from '@popperjs/core/dist/esm/types.js';
 import maxSize from 'popper-max-size-modifier';
@@ -42,3 +45,3 @@ import { applyMaxSize } from './apply-max-size.js';
 
-export type { Instance, Placement };
+export type { Instance, Placement, VirtualElement };
 export { maxSize, applyMaxSize };

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

299104

increased by1.5%

Number of package files

72

increased by1.41%

Lines of code

3872

increased by2.06%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

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

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

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

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