refactor: move around some code for bundle shape management

adobe · Apr 25, 2024 · 08d8214 · 08d8214
1 parent c45cc13
commit 08d8214
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 97 deletions.
diff --git a/packages/overlay/package.json b/packages/overlay/package.json
@@ -77,6 +77,10 @@
             "development": "./src/VirtualTrigger.dev.js",
             "default": "./src/VirtualTrigger.js"
         },
+        "./src/events.js": {
+            "development": "./src/events.dev.js",
+            "default": "./src/events.js"
+        },
         "./src/fullSizePlugin.js": {
             "development": "./src/fullSizePlugin.dev.js",
             "default": "./src/fullSizePlugin.js"

diff --git a/packages/overlay/src/AbstractOverlay.ts b/packages/overlay/src/AbstractOverlay.ts
@@ -19,7 +19,6 @@ import type {
     OverlayState,
     OverlayTypes,
     Placement,
-    TriggerInteractions,
     TriggerInteractionsV1,
 } from './overlay-types.js';
 import type { Overlay } from './Overlay.js';
@@ -34,65 +33,6 @@ export const noop = (): void => {
     return;
 };
 
-export class BeforetoggleClosedEvent extends Event {
-    currentState = 'open';
-    newState = 'closed';
-    constructor() {
-        super('beforetoggle', {
-            bubbles: false,
-            composed: false,
-        });
-    }
-}
-
-export class BeforetoggleOpenEvent extends Event {
-    currentState = 'closed';
-    newState = 'open';
-    constructor() {
-        super('beforetoggle', {
-            bubbles: false,
-            composed: false,
-        });
-    }
-}
-
-export class OverlayStateEvent extends Event {
-    detail!: {
-        interaction: string;
-        reason?: 'external-click';
-    };
-
-    constructor(
-        type: string,
-        public overlay: HTMLElement,
-        {
-            publish,
-            interaction,
-            reason,
-        }: {
-            publish?: boolean;
-            interaction: TriggerInteractions;
-            reason?: 'external-click';
-        }
-    ) {
-        super(type, {
-            bubbles: publish,
-            composed: publish,
-        });
-        this.detail = {
-            interaction,
-            reason,
-        };
-    }
-}
-
-declare global {
-    interface GlobalEventHandlersEventMap {
-        'sp-open': OverlayStateEvent;
-        'sp-close': OverlayStateEvent;
-    }
-}
-
 /**
  * Apply a "transitionend" listener to an element that may not transition but
  * guarantee the callback will be fired either way.
@@ -357,13 +297,15 @@ export class AbstractOverlay extends SpectrumElement {
             const options = optionsV1;
             AbstractOverlay.applyOptions(overlay, {
                 ...options,
-                delayed: options.delayed || overlayContent.hasAttribute('delayed'),
+                delayed:
+                    options.delayed || overlayContent.hasAttribute('delayed'),
                 trigger: options.virtualTrigger || trigger,
-                type: interaction === 'modal'
-                    ? 'modal'
-                    : interaction === 'hover'
-                    ? 'hint'
-                    : 'auto'
+                type:
+                    interaction === 'modal'
+                        ? 'modal'
+                        : interaction === 'hover'
+                        ? 'hint'
+                        : 'auto',
             });
             trigger.insertAdjacentElement('afterend', overlay);
             await overlay.updateComplete;
@@ -375,7 +317,7 @@ export class AbstractOverlay extends SpectrumElement {
         overlay.append(overlayContent);
         AbstractOverlay.applyOptions(overlay, {
             ...options,
-            delayed: options.delayed || overlayContent.hasAttribute('delayed')
+            delayed: options.delayed || overlayContent.hasAttribute('delayed'),
         });
         overlay.updateComplete.then(() => {
             // Do we want to "open" this path, or leave that to the consumer?
@@ -384,7 +326,10 @@ export class AbstractOverlay extends SpectrumElement {
         return overlay;
     }
 
-    static applyOptions(overlay: AbstractOverlay, options: OverlayOptions): void {
+    static applyOptions(
+        overlay: AbstractOverlay,
+        options: OverlayOptions
+    ): void {
         overlay.delayed = !!options.delayed;
         overlay.receivesFocus = options.receivesFocus ?? 'auto';
         overlay.triggerElement = options.trigger || null;

diff --git a/packages/overlay/src/OverlayDialog.ts b/packages/overlay/src/OverlayDialog.ts
@@ -16,13 +16,12 @@ import {
 } from '@spectrum-web-components/shared/src/first-focusable-in.js';
 import { VirtualTrigger } from './VirtualTrigger.js';
 import { Constructor, OpenableElement } from './overlay-types.js';
+import { guaranteedAllTransitionend, nextFrame } from './AbstractOverlay.js';
 import {
     BeforetoggleClosedEvent,
     BeforetoggleOpenEvent,
-    guaranteedAllTransitionend,
-    nextFrame,
     OverlayStateEvent,
-} from './AbstractOverlay.js';
+} from './events.js';
 import type { AbstractOverlay } from './AbstractOverlay.js';
 import { userFocusableSelector } from '@spectrum-web-components/shared';
 

diff --git a/packages/overlay/src/OverlayNoPopover.ts b/packages/overlay/src/OverlayNoPopover.ts
@@ -17,13 +17,15 @@ import type { SpectrumElement } from '@spectrum-web-components/base';
 import { VirtualTrigger } from './VirtualTrigger.js';
 import { Constructor, OpenableElement } from './overlay-types.js';
 import {
-    BeforetoggleClosedEvent,
-    BeforetoggleOpenEvent,
     guaranteedAllTransitionend,
     nextFrame,
-    OverlayStateEvent,
     overlayTimer,
 } from './AbstractOverlay.js';
+import {
+    BeforetoggleClosedEvent,
+    BeforetoggleOpenEvent,
+    OverlayStateEvent,
+} from './events.js';
 import type { AbstractOverlay } from './AbstractOverlay.js';
 import { userFocusableSelector } from '@spectrum-web-components/shared';
 

diff --git a/packages/overlay/src/OverlayPopover.ts b/packages/overlay/src/OverlayPopover.ts
@@ -17,13 +17,15 @@ import type { SpectrumElement } from '@spectrum-web-components/base';
 import { VirtualTrigger } from './VirtualTrigger.js';
 import { Constructor, OpenableElement } from './overlay-types.js';
 import {
-    BeforetoggleClosedEvent,
-    BeforetoggleOpenEvent,
     guaranteedAllTransitionend,
     nextFrame,
-    OverlayStateEvent,
     overlayTimer,
 } from './AbstractOverlay.js';
+import {
+    BeforetoggleClosedEvent,
+    BeforetoggleOpenEvent,
+    OverlayStateEvent,
+} from './events.js';
 import type { AbstractOverlay } from './AbstractOverlay.js';
 import { userFocusableSelector } from '@spectrum-web-components/shared';
 

diff --git a/packages/overlay/src/OverlayTrigger.ts b/packages/overlay/src/OverlayTrigger.ts
@@ -24,7 +24,7 @@ import {
 } from '@spectrum-web-components/base/src/decorators.js';
 import type { Placement } from '@floating-ui/dom';
 
-import type { BeforetoggleOpenEvent } from './AbstractOverlay.js';
+import type { BeforetoggleOpenEvent } from './events.js';
 import type { Overlay } from './Overlay.js';
 import type { OverlayTriggerInteractions } from './overlay-types';
 

diff --git a/packages/overlay/src/events.ts b/packages/overlay/src/events.ts
@@ -0,0 +1,65 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import type { TriggerInteractions } from './overlay-types.js';
+
+export class BeforetoggleClosedEvent extends Event {
+    currentState = 'open';
+    newState = 'closed';
+    constructor() {
+        super('beforetoggle', {
+            bubbles: false,
+            composed: false,
+        });
+    }
+}
+
+export class BeforetoggleOpenEvent extends Event {
+    currentState = 'closed';
+    newState = 'open';
+    constructor() {
+        super('beforetoggle', {
+            bubbles: false,
+            composed: false,
+        });
+    }
+}
+
+export class OverlayStateEvent extends Event {
+    detail!: {
+        interaction: string;
+        reason?: 'external-click';
+    };
+
+    constructor(
+        type: string,
+        public overlay: HTMLElement,
+        {
+            publish,
+            interaction,
+            reason,
+        }: {
+            publish?: boolean;
+            interaction: TriggerInteractions;
+            reason?: 'external-click';
+        }
+    ) {
+        super(type, {
+            bubbles: publish,
+            composed: publish,
+        });
+        this.detail = {
+            interaction,
+            reason,
+        };
+    }
+}
diff --git a/packages/overlay/src/overlay-trigger-directive.ts b/packages/overlay/src/overlay-trigger-directive.ts
@@ -17,13 +17,13 @@ import {
 } from '@spectrum-web-components/base';
 import { directive } from 'lit/async-directive.js';
 import { strategies } from './strategies.js';
-import { OverlayOptions, TriggerInteraction } from './overlay-types.js';
-import { ClickController } from './ClickController.js';
-import { HoverController } from './HoverController.js';
-import { LongpressController } from './LongpressController.js';
+import type { OverlayOptions, TriggerInteraction } from './overlay-types.js';
+import type { ClickController } from './ClickController.js';
+import type { HoverController } from './HoverController.js';
+import type { LongpressController } from './LongpressController.js';
 import {
     removeSlottableRequest,
-    SlottableRequestEvent,
+    type SlottableRequestEvent,
 } from './slottable-request-event.js';
 import { SlottableRequestDirective } from './slottable-request-directive.js';
 import { AbstractOverlay } from './AbstractOverlay.js';

diff --git a/projects/documentation/src/components/layout.ts b/projects/documentation/src/components/layout.ts
@@ -35,11 +35,10 @@ import '@spectrum-web-components/button/sp-button.js';
 import '@spectrum-web-components/action-button/sp-action-button.js';
 import '@spectrum-web-components/link/sp-link.js';
 import '@spectrum-web-components/divider/sp-divider.js';
-import '@spectrum-web-components/toast/sp-toast.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';
 import {
-    OverlayTriggerOptions,
+    type OverlayTriggerOptions,
     trigger,
 } from '@spectrum-web-components/overlay/src/overlay-trigger-directive.js';
 
@@ -255,16 +254,19 @@ export class LayoutElement extends LitElement {
                  * every additional alert.
                  */
 
-                element: (count: number, message: string) => html`
-                    <sp-toast
-                        .timeout=${count}
-                        variant="info"
-                        @close=${close}
-                        open
-                    >
-                        ${message} ${count > 1 ? `(${count} alerts)` : ''}
-                    </sp-toast>
-                `,
+                element: (count: number, message: string) => {
+                    import('@spectrum-web-components/toast/sp-toast.js');
+                    return html`
+                        <sp-toast
+                            .timeout=${count}
+                            variant="info"
+                            @close=${close}
+                            open
+                        >
+                            ${message} ${count > 1 ? `(${count} alerts)` : ''}
+                        </sp-toast>
+                    `;
+                },
             });
         }
         const alert = this.alerts.get(target);
@@ -299,7 +301,7 @@ export class LayoutElement extends LitElement {
     }
 
     private get settingsContent(): TemplateResult {
-        import('./settings.js');
+        import('@spectrum-web-components/underlay/sp-underlay.js');
         return html`
             <sp-underlay
                 class="scrim"
@@ -322,6 +324,7 @@ export class LayoutElement extends LitElement {
     }
 
     private get manageTheme(): TemplateResult {
+        import('./settings.js');
         return html`
             <div class="manage-theme" role="form" aria-label="Settings">
                 <div class="theme-control">

diff --git a/projects/documentation/src/components/settings.ts b/projects/documentation/src/components/settings.ts
@@ -14,4 +14,3 @@ import '@spectrum-web-components/field-label/sp-field-label.js';
 import '@spectrum-web-components/picker/sp-picker.js';
 import '@spectrum-web-components/menu/sp-menu-item.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-close.js';
-import '@spectrum-web-components/underlay/sp-underlay.js';