@spectrum-web-components/overlay 0.16.4 → 0.16.6-devmode.7

package/stories/overlay.stories.js

@@ -1,39 +1,33 @@
-/*
-Copyright 2020 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 { html } from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import { openOverlay, Overlay, VirtualTrigger, } from '../';
-import '@spectrum-web-components/action-button/sp-action-button.js';
-import '@spectrum-web-components/action-group/sp-action-group.js';
-import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/dialog/sp-dialog-wrapper.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js';
-import '@spectrum-web-components/overlay/overlay-trigger.js';
-import '@spectrum-web-components/picker/sp-picker.js';
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/menu/sp-menu-divider.js';
-import '@spectrum-web-components/popover/sp-popover.js';
-import '@spectrum-web-components/slider/sp-slider.js';
-import '@spectrum-web-components/radio/sp-radio.js';
-import '@spectrum-web-components/radio/sp-radio-group.js';
-import '@spectrum-web-components/tooltip/sp-tooltip.js';
-import '@spectrum-web-components/theme/sp-theme.js';
-import '@spectrum-web-components/theme/src/themes.js';
-import '../../../projects/story-decorator/src/types.js';
-import './overlay-story-components.js';
-import { render } from 'lit-html';
-const storyStyles = html `
+import { html } from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import {
+  openOverlay,
+  Overlay,
+  VirtualTrigger
+} from "@spectrum-web-components/overlay";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/dialog/sp-dialog-wrapper.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js";
+import "@spectrum-web-components/overlay/overlay-trigger.js";
+import "@spectrum-web-components/picker/sp-picker.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import "@spectrum-web-components/popover/sp-popover.js";
+import "@spectrum-web-components/slider/sp-slider.js";
+import "@spectrum-web-components/radio/sp-radio.js";
+import "@spectrum-web-components/radio/sp-radio-group.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import "@spectrum-web-components/theme/sp-theme.js";
+import "@spectrum-web-components/theme/src/themes.js";
+import "../../../projects/story-decorator/src/types.js";
+import "./overlay-story-components.js";
+import { render } from "lit-html";
+const storyStyles = html`
     <style>
         html,
         body,
@@ -70,53 +64,58 @@ const storyStyles = html `
     </style>
 `;
 export default {
-    title: 'Overlay',
-    argTypes: {
-        offset: { control: 'number' },
-        placement: {
-            control: {
-                type: 'inline-radio',
-                options: [
-                    'top',
-                    'top-start',
-                    'top-end',
-                    'bottom',
-                    'bottom-start',
-                    'bottom-end',
-                    'left',
-                    'left-start',
-                    'left-end',
-                    'right',
-                    'right-start',
-                    'right-end',
-                    'auto',
-                    'auto-start',
-                    'auto-end',
-                    'none',
-                ],
-            },
-        },
-        type: {
-            control: {
-                type: 'inline-radio',
-                options: ['modal', 'replace', 'inline'],
-            },
-        },
-        colorStop: {
-            control: {
-                type: 'inline-radio',
-                options: ['light', 'dark'],
-            },
-        },
+  title: "Overlay",
+  argTypes: {
+    offset: { control: "number" },
+    placement: {
+      control: {
+        type: "inline-radio",
+        options: [
+          "top",
+          "top-start",
+          "top-end",
+          "bottom",
+          "bottom-start",
+          "bottom-end",
+          "left",
+          "left-start",
+          "left-end",
+          "right",
+          "right-start",
+          "right-end",
+          "auto",
+          "auto-start",
+          "auto-end",
+          "none"
+        ]
+      }
     },
-    args: {
-        placement: 'bottom',
-        offset: 0,
-        colorStop: 'light',
+    type: {
+      control: {
+        type: "inline-radio",
+        options: ["modal", "replace", "inline"]
+      }
     },
+    colorStop: {
+      control: {
+        type: "inline-radio",
+        options: ["light", "dark"]
+      }
+    }
+  },
+  args: {
+    placement: "bottom",
+    offset: 0,
+    colorStop: "light"
+  }
 };
-const template = ({ placement, offset, open, type, }) => {
-    return html `
+const template = ({
+  placement,
+  offset,
+  open,
+  type
+}) => {
+  return html`
         ${storyStyles}
         <overlay-trigger
             id="trigger"
@@ -165,7 +164,7 @@ const template = ({ placement, offset, open, type, }) => {
             </sp-popover>
             <sp-tooltip
                 slot="hover-content"
-                ?delayed=${open !== 'hover'}
+                ?delayed=${open !== "hover"}
                 tip="bottom"
             >
                 Click to open a popover.
@@ -174,9 +173,15 @@ const template = ({ placement, offset, open, type, }) => {
     `;
 };
 export const Default = (args) => template(args);
-export const openHoverContent = (args) => template(Object.assign(Object.assign({}, args), { open: 'hover' }));
-export const openClickContent = (args) => template(Object.assign(Object.assign({}, args), { open: 'click' }));
-export const customizedClickContent = (args) => html `
+export const openHoverContent = (args) => template({
+  ...args,
+  open: "hover"
+});
+export const openClickContent = (args) => template({
+  ...args,
+  open: "click"
+});
+export const customizedClickContent = (args) => html`
     <style>
         active-overlay::part(theme) {
             --styled-div-background-color: var(--spectrum-semantic-cta-background-color-default);
@@ -184,9 +189,12 @@ export const customizedClickContent = (args) => html `
         }
     </style>
     </style>
-    ${template(Object.assign(Object.assign({}, args), { open: 'click' }))}
+    ${template({
+  ...args,
+  open: "click"
+})}
 `;
-const extraText = html `
+const extraText = html`
     <p>This is some text.</p>
     <p>This is some text.</p>
     <p>
@@ -196,15 +204,15 @@ const extraText = html `
     </p>
 `;
 export const inline = () => {
-    const closeEvent = new Event('close', { bubbles: true, composed: true });
-    return html `
+  const closeEvent = new Event("close", { bubbles: true, composed: true });
+  return html`
         <overlay-trigger type="inline">
             <sp-button slot="trigger">Open</sp-button>
             <sp-overlay slot="click-content">
                 <sp-button
                     @click=${(event) => {
-        event.target.dispatchEvent(closeEvent);
-    }}
+    event.target.dispatchEvent(closeEvent);
+  }}
                 >
                     Close
                 </sp-button>
@@ -214,15 +222,15 @@ export const inline = () => {
     `;
 };
 export const replace = () => {
-    const closeEvent = new Event('close', { bubbles: true, composed: true });
-    return html `
+  const closeEvent = new Event("close", { bubbles: true, composed: true });
+  return html`
         <overlay-trigger type="replace">
             <sp-button slot="trigger">Open</sp-button>
             <sp-overlay slot="click-content">
                 <sp-button
                     @click=${(event) => {
-        event.target.dispatchEvent(closeEvent);
-    }}
+    event.target.dispatchEvent(closeEvent);
+  }}
                 >
                     Close
                 </sp-button>
@@ -232,8 +240,8 @@ export const replace = () => {
     `;
 };
 export const modalLoose = () => {
-    const closeEvent = new Event('close', { bubbles: true, composed: true });
-    return html `
+  const closeEvent = new Event("close", { bubbles: true, composed: true });
+  return html`
         <overlay-trigger type="modal" placement="none">
             <sp-button slot="trigger">Open</sp-button>
             <sp-dialog
@@ -262,8 +270,8 @@ export const modalLoose = () => {
     `;
 };
 export const modalManaged = () => {
-    const closeEvent = new Event('close', { bubbles: true, composed: true });
-    return html `
+  const closeEvent = new Event("close", { bubbles: true, composed: true });
+  return html`
         <overlay-trigger type="modal" placement="none">
             <sp-button slot="trigger">Open</sp-button>
             <sp-dialog-wrapper
@@ -275,14 +283,14 @@ export const modalManaged = () => {
                 cancel-label="Cancel"
                 footer="Content for footer"
                 @confirm=${(event) => {
-        event.target.dispatchEvent(closeEvent);
-    }}
+    event.target.dispatchEvent(closeEvent);
+  }}
                 @secondary=${(event) => {
-        event.target.dispatchEvent(closeEvent);
-    }}
+    event.target.dispatchEvent(closeEvent);
+  }}
                 @cancel=${(event) => {
-        event.target.dispatchEvent(closeEvent);
-    }}
+    event.target.dispatchEvent(closeEvent);
+  }}
             >
                 <p>
                     The
@@ -298,9 +306,9 @@ export const modalManaged = () => {
     `;
 };
 export const deepNesting = () => {
-    const color = window.__swc_hack_knobs__.defaultColor;
-    const outter = color === 'light' ? 'dark' : 'light';
-    return html `
+  const color = window.__swc_hack_knobs__.defaultColor;
+  const outter = color === "light" ? "dark" : "light";
+  return html`
         ${storyStyles}
         <sp-theme
             color=${outter}
@@ -327,7 +335,7 @@ export const deepNesting = () => {
     `;
 };
 export const edges = () => {
-    return html `
+  return html`
         <style>
             .demo {
                 position: absolute;
@@ -392,7 +400,7 @@ export const edges = () => {
     `;
 };
 export const updated = () => {
-    return html `
+  return html`
         ${storyStyles}
         <style>
             sp-tooltip {
@@ -455,7 +463,7 @@ export const updated = () => {
     `;
 };
 export const sideHoverDraggable = () => {
-    return html `
+  return html`
         ${storyStyles}
         <style>
             sp-tooltip {
@@ -485,7 +493,7 @@ export const sideHoverDraggable = () => {
     `;
 };
 export const longpress = () => {
-    return html `
+  return html`
         <overlay-trigger placement="right-start">
             <sp-action-button slot="trigger" hold-affordance>
                 <sp-icon-magnify slot="icon"></sp-icon-magnify>
@@ -493,7 +501,7 @@ export const longpress = () => {
             <sp-tooltip slot="hover-content">Search real hard...</sp-tooltip>
             <sp-popover slot="longpress-content" tip>
                 <sp-action-group
-                    @change=${(event) => event.target.dispatchEvent(new Event('close', { bubbles: true }))}
+                    @change=${(event) => event.target.dispatchEvent(new Event("close", { bubbles: true }))}
                     selects="single"
                     vertical
                     style="margin: calc(var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)) / 2);"
@@ -513,47 +521,47 @@ export const longpress = () => {
     `;
 };
 function nextFrame() {
-    return new Promise((res) => requestAnimationFrame(() => res()));
+  return new Promise((res) => requestAnimationFrame(() => res()));
 }
 class ComplexModalReady extends HTMLElement {
-    constructor() {
-        super();
-        this.handleTriggerOpened = async () => {
-            await nextFrame();
-            const picker = document.querySelector('#test-picker');
-            picker.addEventListener('sp-opened', this.handlePickerOpen);
-            picker.open = true;
-        };
-        this.handlePickerOpen = async () => {
-            const picker = document.querySelector('#test-picker');
-            const actions = [nextFrame, picker.updateComplete];
-            await Promise.all(actions);
-            this.ready(true);
-        };
-        this.readyPromise = Promise.resolve(false);
-        this.readyPromise = new Promise((res) => {
-            this.ready = res;
-            this.setup();
-        });
-    }
-    async setup() {
-        await nextFrame();
-        const overlay = document.querySelector(`overlay-trigger`);
-        overlay.addEventListener('sp-opened', this.handleTriggerOpened);
-    }
-    get updateComplete() {
-        return this.readyPromise;
-    }
+  constructor() {
+    super();
+    this.handleTriggerOpened = async () => {
+      await nextFrame();
+      const picker = document.querySelector("#test-picker");
+      picker.addEventListener("sp-opened", this.handlePickerOpen);
+      picker.open = true;
+    };
+    this.handlePickerOpen = async () => {
+      const picker = document.querySelector("#test-picker");
+      const actions = [nextFrame, picker.updateComplete];
+      await Promise.all(actions);
+      this.ready(true);
+    };
+    this.readyPromise = Promise.resolve(false);
+    this.readyPromise = new Promise((res) => {
+      this.ready = res;
+      this.setup();
+    });
+  }
+  async setup() {
+    await nextFrame();
+    const overlay = document.querySelector(`overlay-trigger`);
+    overlay.addEventListener("sp-opened", this.handleTriggerOpened);
+  }
+  get updateComplete() {
+    return this.readyPromise;
+  }
 }
-customElements.define('complex-modal-ready', ComplexModalReady);
+customElements.define("complex-modal-ready", ComplexModalReady);
 const complexModalDecorator = (story) => {
-    return html `
+  return html`
         ${story()}
         <complex-modal-ready></complex-modal-ready>
     `;
 };
 export const complexModal = () => {
-    return html `
+  return html`
         <style>
             body {
                 --swc-margin-test: 10px;
@@ -611,7 +619,7 @@ export const complexModal = () => {
 };
 complexModal.decorators = [complexModalDecorator];
 export const superComplexModal = () => {
-    return html `
+  return html`
         <overlay-trigger type="modal" placement="none">
             <sp-button slot="trigger" variant="accent">Toggle Dialog</sp-button>
             <sp-popover dialog slot="click-content">
@@ -647,10 +655,10 @@ export const superComplexModal = () => {
     `;
 };
 class StartEndContextmenu extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-        this.shadowRoot.innerHTML = `
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = `
             <style>
                 :host {
                     display: flex;
@@ -664,17 +672,17 @@ class StartEndContextmenu extends HTMLElement {
             <div id="start"></div>
             <div id="end"></div>
         `;
-    }
+  }
 }
-customElements.define('start-end-contextmenu', StartEndContextmenu);
+customElements.define("start-end-contextmenu", StartEndContextmenu);
 export const virtualElement = (args) => {
-    const contextMenuTemplate = (kind = '') => html `
+  const contextMenuTemplate = (kind = "") => html`
         <sp-popover
             style="width:300px;"
             @click=${(event) => {
-        var _a;
-        return (_a = event.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('close', { bubbles: true }));
-    }}
+    var _a;
+    return (_a = event.target) == null ? void 0 : _a.dispatchEvent(new Event("close", { bubbles: true }));
+  }}
         >
             <sp-menu>
                 <sp-menu-group>
@@ -690,22 +698,22 @@ export const virtualElement = (args) => {
             </sp-menu>
         </sp-popover>
     `;
-    const pointerenter = async (event) => {
-        event.preventDefault();
-        const source = event.composedPath()[0];
-        const { id } = source;
-        const trigger = event.target;
-        const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);
-        const fragment = document.createDocumentFragment();
-        render(contextMenuTemplate(id), fragment);
-        const popover = fragment.querySelector('sp-popover');
-        openOverlay(trigger, 'modal', popover, {
-            placement: args.placement,
-            receivesFocus: 'auto',
-            virtualTrigger,
-        });
-    };
-    return html `
+  const pointerenter = async (event) => {
+    event.preventDefault();
+    const source = event.composedPath()[0];
+    const { id } = source;
+    const trigger = event.target;
+    const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);
+    const fragment = document.createDocumentFragment();
+    render(contextMenuTemplate(id), fragment);
+    const popover = fragment.querySelector("sp-popover");
+    openOverlay(trigger, "modal", popover, {
+      placement: args.placement,
+      receivesFocus: "auto",
+      virtualTrigger
+    });
+  };
+  return html`
         <style>
             .app-root {
                 position: absolute;
@@ -719,39 +727,41 @@ export const virtualElement = (args) => {
     `;
 };
 virtualElement.args = {
-    placement: 'right-start',
+  placement: "right-start"
 };
 export const detachedElement = () => {
-    let closeOverlay;
-    const openDetachedOverlayContent = async ({ target, }) => {
-        if (closeOverlay) {
-            closeOverlay();
-            closeOverlay = undefined;
-            return;
-        }
-        const div = document.createElement('div');
-        div.textContent = 'This div is overlaid';
-        div.setAttribute('style', `
+  let closeOverlay;
+  const openDetachedOverlayContent = async ({
+    target
+  }) => {
+    if (closeOverlay) {
+      closeOverlay();
+      closeOverlay = void 0;
+      return;
+    }
+    const div = document.createElement("div");
+    div.textContent = "This div is overlaid";
+    div.setAttribute("style", `
             background-color: var(--spectrum-global-color-gray-50);
             color: var(--spectrum-global-color-gray-800);
             border: 1px solid;
             padding: 2em;
         `);
-        closeOverlay = await Overlay.open(target, 'click', div, {
-            offset: 0,
-            placement: 'bottom',
-        });
-    };
-    requestAnimationFrame(() => {
-        openDetachedOverlayContent({
-            target: document.querySelector('#detached-content-trigger'),
-        });
+    closeOverlay = await Overlay.open(target, "click", div, {
+      offset: 0,
+      placement: "bottom"
+    });
+  };
+  requestAnimationFrame(() => {
+    openDetachedOverlayContent({
+      target: document.querySelector("#detached-content-trigger")
     });
-    return html `
+  });
+  return html`
         <sp-action-button
             id="detached-content-trigger"
             @click=${openDetachedOverlayContent}
-            @sp-closed=${() => (closeOverlay = undefined)}
+            @sp-closed=${() => closeOverlay = void 0}
         >
             <sp-icon-open-in
                 slot="icon"
@@ -761,47 +771,47 @@ export const detachedElement = () => {
     `;
 };
 class DefinedOverlayReady extends HTMLElement {
-    constructor() {
-        super();
-        this.handleTriggerOpened = async () => {
-            await nextFrame();
-            const popover = document.querySelector('popover-content');
-            if (!popover) {
-                return;
-            }
-            popover.addEventListener('sp-opened', this.handlePopoverOpen);
-            popover.button.click();
-        };
-        this.handlePopoverOpen = async () => {
-            await nextFrame();
-            this.ready(true);
-        };
-        this.readyPromise = Promise.resolve(false);
-        this.readyPromise = new Promise((res) => {
-            this.ready = res;
-            this.setup();
-        });
-    }
-    async setup() {
-        await nextFrame();
-        const overlay = document.querySelector(`overlay-trigger`);
-        const button = document.querySelector(`[slot="trigger"]`);
-        overlay.addEventListener('sp-opened', this.handleTriggerOpened);
-        button.click();
-    }
-    get updateComplete() {
-        return this.readyPromise;
-    }
+  constructor() {
+    super();
+    this.handleTriggerOpened = async () => {
+      await nextFrame();
+      const popover = document.querySelector("popover-content");
+      if (!popover) {
+        return;
+      }
+      popover.addEventListener("sp-opened", this.handlePopoverOpen);
+      popover.button.click();
+    };
+    this.handlePopoverOpen = async () => {
+      await nextFrame();
+      this.ready(true);
+    };
+    this.readyPromise = Promise.resolve(false);
+    this.readyPromise = new Promise((res) => {
+      this.ready = res;
+      this.setup();
+    });
+  }
+  async setup() {
+    await nextFrame();
+    const overlay = document.querySelector(`overlay-trigger`);
+    const button = document.querySelector(`[slot="trigger"]`);
+    overlay.addEventListener("sp-opened", this.handleTriggerOpened);
+    button.click();
+  }
+  get updateComplete() {
+    return this.readyPromise;
+  }
 }
-customElements.define('defined-overlay-ready', DefinedOverlayReady);
+customElements.define("defined-overlay-ready", DefinedOverlayReady);
 const definedOverlayDecorator = (story) => {
-    return html `
+  return html`
         ${story()}
         <defined-overlay-ready></defined-overlay-ready>
     `;
 };
 export const definedOverlayElement = () => {
-    return html `
+  return html`
         <overlay-trigger placement="bottom" type="modal">
             <sp-button variant="primary" slot="trigger">Open popover</sp-button>
             <sp-popover slot="click-content" direction="bottom" dialog>
@@ -811,4 +821,4 @@ export const definedOverlayElement = () => {
     `;
 };
 definedOverlayElement.decorators = [definedOverlayDecorator];
-//# sourceMappingURL=overlay.stories.js.map
+//# sourceMappingURL=overlay.stories.js.map