feat(overlay): move entire package behind dynamic import by default

packages/dropdown/src/Dropdown.ts

@@ -41,8 +41,7 @@ import {
     MenuQueryRoleEventDetail,
 } from '@spectrum-web-components/menu';
 import '@spectrum-web-components/popover/sp-popover.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import { Placement, Overlay } from '@spectrum-web-components/overlay';
+import { Placement, openOverlay } from '@spectrum-web-components/overlay';
 
 /**
  * @slot label - The placeholder content for the dropdown
@@ -264,15 +263,11 @@ export class DropdownBase extends Focusable {
         if (menuWidth) {
             this.popover.style.setProperty('width', menuWidth);
         }
-        this.closeOverlay = await Overlay.open(
-            this.button,
-            'replace',
-            this.popover,
-            {
-                placement: this.placement,
-                receivesFocus: 'auto',
-            }
-        );
+        const { button, popover } = this;
+        this.closeOverlay = await openOverlay(button, 'inline', popover, {
+            placement: this.placement,
+            receivesFocus: 'auto',
+        });
         this.menuStateResolver();
     }
 

packages/overlay/src/OverlayTrigger.ts

@@ -18,10 +18,9 @@ import {
     TemplateResult,
 } from 'lit-element';
 
-import overlayTriggerStyles from './overlay-trigger.css.js';
-
 import { Placement, TriggerInteractions } from './overlay-types';
-import { Overlay } from './overlay.js';
+import { openOverlay } from './loader.js';
+import overlayTriggerStyles from './overlay-trigger.css.js';
 
 /**
  * A overlay trigger component for displaying overlays relative to other content.
@@ -84,6 +83,19 @@ export class OverlayTrigger extends LitElement {
         `;
     }
 
+    private async openOverlay(
+        target: HTMLElement,
+        content: HTMLElement,
+        interaction: TriggerInteractions
+    ): Promise<() => void> {
+        return await openOverlay(target, interaction, content, {
+            offset: this.offset,
+            placement: this.placement,
+            receivesFocus:
+                this.type && this.type !== 'inline' ? 'auto' : undefined,
+        });
+    }
+
     private onTrigger(event: Event): void {
         if (this.disabled) {
             return;
@@ -112,18 +124,11 @@ export class OverlayTrigger extends LitElement {
                     this.clickContent.tabIndex = 0;
                 }
             }
-            this.closeClickOverlay = await Overlay.open(
-                this.targetContent,
-                this.type ? this.type : 'click',
-                this.clickContent,
-                {
-                    offset: this.offset,
-                    placement: this.placement,
-                    receivesFocus:
-                        this.type && this.type !== 'inline'
-                            ? 'auto'
-                            : undefined,
-                }
+            const { targetContent, clickContent } = this;
+            this.closeClickOverlay = await this.openOverlay(
+                targetContent,
+                clickContent,
+                this.type ? this.type : 'click'
             );
         }
     }
@@ -139,14 +144,11 @@ export class OverlayTrigger extends LitElement {
             this.hoverOverlayReady = new Promise((res) => {
                 overlayReady = res;
             });
-            this.closeHoverOverlay = await Overlay.open(
-                this.targetContent,
-                'hover',
-                this.hoverContent,
-                {
-                    offset: this.offset,
-                    placement: this.placement,
-                }
+            const { targetContent, hoverContent } = this;
+            this.closeHoverOverlay = await this.openOverlay(
+                targetContent,
+                hoverContent,
+                'hover'
             );
             overlayReady();
         }

packages/overlay/src/index.ts

@@ -13,3 +13,4 @@ export * from './overlay.js';
 export * from './OverlayTrigger.js';
 export * from './overlay-types.js';
 export * from './ActiveOverlay.js';
+export * from './loader.js';

projects/example-project/src/index.js → packages/overlay/src/loader.ts

@@ -10,8 +10,14 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-// import our stylesheets
-import './styles.css';
+import { TriggerInteractions, OverlayOptions } from './overlay-types';
 
-// import the components we'll use in this page
-import '@spectrum-web-components/button/sp-button';
+export const openOverlay = async (
+    target: HTMLElement,
+    interaction: TriggerInteractions,
+    content: HTMLElement,
+    options: OverlayOptions
+): Promise<() => void> => {
+    const { Overlay } = await import('./overlay.js');
+    return await Overlay.open(target, interaction, content, options);
+};

packages/overlay/src/overlay-stack.ts

@@ -13,6 +13,7 @@ governing permissions and limitations under the License.
 import { ActiveOverlay } from './ActiveOverlay.js';
 import { OverlayOpenDetail } from './overlay-types';
 import { OverlayTimer } from './overlay-timer.js';
+import '../active-overlay.js';
 
 function isLeftClick(event: MouseEvent): boolean {
     return event.button === 0;
@@ -58,6 +59,7 @@ export class OverlayStack {
                 position: relative;
                 height: 100%;
                 z-index: 0;
+                min-height: 100vh;
             }
             #holder {
                 display: flex;
@@ -170,7 +172,6 @@ export class OverlayStack {
             topOverlay.obscure();
         }
 
-        await import('../active-overlay.js');
         const activeOverlay = ActiveOverlay.create(details);
         this.overlays.push(activeOverlay);
         document.body.appendChild(activeOverlay);
@@ -343,7 +344,9 @@ export class OverlayStack {
 
     private handleKeyUp = (event: KeyboardEvent): void => {
         if (event.key === 'Escape') {
+            const overlay = this.topOverlay as ActiveOverlay;
             this.closeTopOverlay();
+            overlay && overlay.trigger.focus();
         }
     };
 

packages/overlay/src/overlay-types.ts

@@ -45,6 +45,13 @@ export interface OverlayDisplayQueryDetail {
 
 export type Placement = PopperPlacement | 'none';
 
+export type OverlayOptions = {
+    delayed?: boolean;
+    placement?: Placement;
+    offset?: number;
+    receivesFocus?: 'auto';
+};
+
 declare global {
     interface GlobalEventHandlersEventMap {
         'sp-overlay-query': CustomEvent<OverlayDisplayQueryDetail>;

packages/overlay/src/overlay.ts

@@ -13,18 +13,11 @@ governing permissions and limitations under the License.
 import { ThemeData } from '@spectrum-web-components/theme';
 import {
     TriggerInteractions,
-    Placement,
     OverlayDisplayQueryDetail,
+    OverlayOptions,
 } from './overlay-types';
 import { OverlayStack } from './overlay-stack.js';
 
-type OverlayOptions = {
-    delayed?: boolean;
-    placement?: Placement;
-    offset?: number;
-    receivesFocus?: 'auto';
-};
-
 /**
  * This class allows access to the overlay system which allows a client to
  * position an element in the overlay positioned relative to another node.