@spectrum-web-components/overlay 0.18.0 → 0.18.2

package/stories/overlay.stories.js

@@ -1,4 +1,34 @@
-import{html as o}from"@spectrum-web-components/base";import{ifDefined as d}from"@spectrum-web-components/base/src/directives.js";import{openOverlay as y,Overlay as b,VirtualTrigger as h}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 as f}from"lit-html";const a=o`
+"use strict";
+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,
@@ -33,20 +63,73 @@ import{html as o}from"@spectrum-web-components/base";import{ifDefined as d}from"
             display: inline-block;
         }
     </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"]}}},args:{placement:"bottom",offset:0,colorStop:"light"}};const l=({placement:e,offset:t,open:n,type:r})=>o`
-        ${a}
+`;
+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"]
+      }
+    }
+  },
+  args: {
+    placement: "bottom",
+    offset: 0,
+    colorStop: "light"
+  }
+};
+const template = ({
+  placement,
+  offset,
+  open,
+  type
+}) => {
+  return html`
+        ${storyStyles}
         <overlay-trigger
             id="trigger"
-            placement="${e}"
-            offset="${t}"
-            open=${d(n)}
-            type=${d(r)}
+            placement="${placement}"
+            offset="${offset}"
+            open=${ifDefined(open)}
+            type=${ifDefined(type)}
         >
             <sp-button variant="primary" slot="trigger">Show Popover</sp-button>
             <sp-popover
                 dialog
                 slot="click-content"
-                placement="${e}"
+                placement="${placement}"
                 tip
             >
                 <div class="options-popover-content">
@@ -82,13 +165,24 @@ import{html as o}from"@spectrum-web-components/base";import{ifDefined as d}from"
             </sp-popover>
             <sp-tooltip
                 slot="hover-content"
-                ?delayed=${n!=="hover"}
+                ?delayed=${open !== "hover"}
                 tip="bottom"
             >
                 Click to open a popover.
             </sp-tooltip>
         </overlay-trigger>
-    `;export const Default=e=>l(e),openHoverContent=e=>l({...e,open:"hover"}),openClickContent=e=>l({...e,open:"click"}),customizedClickContent=e=>o`
+    `;
+};
+export const Default = (args) => template(args);
+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);
@@ -96,8 +190,12 @@ import{html as o}from"@spectrum-web-components/base";import{ifDefined as d}from"
         }
     </style>
     </style>
-    ${l({...e,open:"click"})}
-`;const p=o`
+    ${template({
+  ...args,
+  open: "click"
+})}
+`;
+const extraText = html`
     <p>This is some text.</p>
     <p>This is some text.</p>
     <p>
@@ -105,38 +203,53 @@ import{html as o}from"@spectrum-web-components/base";import{ifDefined as d}from"
         <a href="#anchor">link</a>
         .
     </p>
-`;export const inline=()=>{const e=new Event("close",{bubbles:!0,composed:!0});return o`
+`;
+export const inline = () => {
+  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=${t=>{t.target.dispatchEvent(e)}}
+                    @click=${(event) => {
+    event.target.dispatchEvent(closeEvent);
+  }}
                 >
                     Close
                 </sp-button>
             </sp-overlay>
         </overlay-trigger>
-        ${p}
-    `},replace=()=>{const e=new Event("close",{bubbles:!0,composed:!0});return o`
+        ${extraText}
+    `;
+};
+export const replace = () => {
+  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=${t=>{t.target.dispatchEvent(e)}}
+                    @click=${(event) => {
+    event.target.dispatchEvent(closeEvent);
+  }}
                 >
                     Close
                 </sp-button>
             </sp-overlay>
         </overlay-trigger>
-        ${p}
-    `},modalLoose=()=>{const e=new Event("close",{bubbles:!0,composed:!0});return o`
+        ${extraText}
+    `;
+};
+export const modalLoose = () => {
+  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
                 size="s"
                 dismissable
                 slot="click-content"
-                @closed=${t=>t.target.dispatchEvent(e)}
+                @closed=${(event) => event.target.dispatchEvent(closeEvent)}
             >
                 <h2 slot="heading">Loose Dialog</h2>
                 <p>
@@ -154,8 +267,12 @@ import{html as o}from"@spectrum-web-components/base";import{ifDefined as d}from"
                 </p>
             </sp-dialog>
         </overlay-trigger>
-        ${p}
-    `},modalManaged=()=>{const e=new Event("close",{bubbles:!0,composed:!0});return o`
+        ${extraText}
+    `;
+};
+export const modalManaged = () => {
+  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
@@ -166,9 +283,15 @@ import{html as o}from"@spectrum-web-components/base";import{ifDefined as d}from"
                 secondary-label="Replace"
                 cancel-label="Cancel"
                 footer="Content for footer"
-                @confirm=${t=>{t.target.dispatchEvent(e)}}
-                @secondary=${t=>{t.target.dispatchEvent(e)}}
-                @cancel=${t=>{t.target.dispatchEvent(e)}}
+                @confirm=${(event) => {
+    event.target.dispatchEvent(closeEvent);
+  }}
+                @secondary=${(event) => {
+    event.target.dispatchEvent(closeEvent);
+  }}
+                @cancel=${(event) => {
+    event.target.dispatchEvent(closeEvent);
+  }}
             >
                 <p>
                     The
@@ -180,17 +303,22 @@ import{html as o}from"@spectrum-web-components/base";import{ifDefined as d}from"
                 </p>
             </sp-dialog-wrapper>
         </overlay-trigger>
-        ${p}
-    `},deepNesting=()=>{const e=window.__swc_hack_knobs__.defaultColor;return o`
-        ${a}
+        ${extraText}
+    `;
+};
+export const deepNesting = () => {
+  const color = window.__swc_hack_knobs__.defaultColor;
+  const outter = color === "light" ? "dark" : "light";
+  return html`
+        ${storyStyles}
         <sp-theme
-            color=${e==="light"?"dark":"light"}
+            color=${outter}
             theme=${window.__swc_hack_knobs__.defaultThemeVariant}
             scale=${window.__swc_hack_knobs__.defaultScale}
             dir=${window.__swc_hack_knobs__.defaultDirection}
         >
             <sp-theme
-                color=${e}
+                color=${color}
                 theme=${window.__swc_hack_knobs__.defaultThemeVariant}
                 scale=${window.__swc_hack_knobs__.defaultScale}
                 dir=${window.__swc_hack_knobs__.defaultDirection}
@@ -205,7 +333,10 @@ import{html as o}from"@spectrum-web-components/base";import{ifDefined as d}from"
                 ></recursive-popover>
             </sp-theme>
         </sp-theme>
-    `},edges=()=>o`
+    `;
+};
+export const edges = () => {
+  return html`
         <style>
             .demo {
                 position: absolute;
@@ -267,8 +398,11 @@ import{html as o}from"@spectrum-web-components/base";import{ifDefined as d}from"
                 Triskaidekaphobia and More
             </sp-tooltip>
         </overlay-trigger>
-    `,updated=()=>o`
-        ${a}
+    `;
+};
+export const updated = () => {
+  return html`
+        ${storyStyles}
         <style>
             sp-tooltip {
                 transition: none;
@@ -327,8 +461,11 @@ import{html as o}from"@spectrum-web-components/base";import{ifDefined as d}from"
                 </sp-popover>
             </overlay-trigger>
         </overlay-drag>
-    `,sideHoverDraggable=()=>o`
-        ${a}
+    `;
+};
+export const sideHoverDraggable = () => {
+  return html`
+        ${storyStyles}
         <style>
             sp-tooltip {
                 transition: none;
@@ -354,7 +491,10 @@ import{html as o}from"@spectrum-web-components/base";import{ifDefined as d}from"
                 </sp-tooltip>
             </overlay-trigger>
         </overlay-drag>
-    `,longpress=()=>o`
+    `;
+};
+export const longpress = () => {
+  return html`
         <overlay-trigger placement="right-start">
             <sp-action-button slot="trigger" hold-affordance>
                 <sp-icon-magnify slot="icon"></sp-icon-magnify>
@@ -362,7 +502,9 @@ import{html as o}from"@spectrum-web-components/base";import{ifDefined as d}from"
             <sp-tooltip slot="hover-content">Search real hard...</sp-tooltip>
             <sp-popover slot="longpress-content" tip>
                 <sp-action-group
-                    @change=${e=>e.target.dispatchEvent(new Event("close",{bubbles:!0}))}
+                    @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);"
@@ -379,10 +521,52 @@ import{html as o}from"@spectrum-web-components/base";import{ifDefined as d}from"
                 </sp-action-group>
             </sp-popover>
         </overlay-trigger>
-    `;function i(){return new Promise(e=>requestAnimationFrame(()=>e()))}class k extends HTMLElement{constructor(){super();this.handleTriggerOpened=async()=>{await i();const t=document.querySelector("#test-picker");t.addEventListener("sp-opened",this.handlePickerOpen),t.open=!0};this.handlePickerOpen=async()=>{const t=document.querySelector("#test-picker"),n=[i,t.updateComplete];await Promise.all(n),this.ready(!0)};this.readyPromise=Promise.resolve(!1);this.readyPromise=new Promise(t=>{this.ready=t,this.setup()})}async setup(){await i(),document.querySelector("overlay-trigger").addEventListener("sp-opened",this.handleTriggerOpened)}get updateComplete(){return this.readyPromise}}customElements.define("complex-modal-ready",k);const T=e=>o`
-        ${e()}
+    `;
+};
+function nextFrame() {
+  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;
+  }
+}
+customElements.define("complex-modal-ready", ComplexModalReady);
+const complexModalDecorator = (story) => {
+  return html`
+        ${story()}
         <complex-modal-ready></complex-modal-ready>
-    `;export const complexModal=()=>o`
+    `;
+};
+export const complexModal = () => {
+  return html`
         <style>
             body {
                 --swc-margin-test: 10px;
@@ -436,7 +620,11 @@ import{html as o}from"@spectrum-web-components/base";import{ifDefined as d}from"
                 Toggle Dialog
             </sp-button>
         </overlay-trigger>
-    `;complexModal.decorators=[T];export const superComplexModal=()=>o`
+    `;
+};
+complexModal.decorators = [complexModalDecorator];
+export const superComplexModal = () => {
+  return html`
         <overlay-trigger type="modal" placement="none">
             <sp-button slot="trigger" variant="accent">Toggle Dialog</sp-button>
             <sp-popover dialog slot="click-content">
@@ -469,7 +657,13 @@ import{html as o}from"@spectrum-web-components/base";import{ifDefined as d}from"
                 </overlay-trigger>
             </sp-popover>
         </overlay-trigger>
-    `;class w extends HTMLElement{constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
+    `;
+};
+class StartEndContextmenu extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = `
             <style>
                 :host {
                     display: flex;
@@ -482,14 +676,24 @@ import{html as o}from"@spectrum-web-components/base";import{ifDefined as d}from"
             </style>
             <div id="start"></div>
             <div id="end"></div>
-        `}}customElements.define("start-end-contextmenu",w);export const virtualElement=e=>{const t=(r="")=>o`
+        `;
+  }
+}
+customElements.define("start-end-contextmenu", StartEndContextmenu);
+export const virtualElement = (args) => {
+  const contextMenuTemplate = (kind = "") => html`
         <sp-popover
             style="width:300px;"
-            @click=${c=>{var s;return(s=c.target)==null?void 0:s.dispatchEvent(new Event("close",{bubbles:!0}))}}
+            @click=${(event) => {
+    var _a;
+    return (_a = event.target) == null ? void 0 : _a.dispatchEvent(
+      new Event("close", { bubbles: true })
+    );
+  }}
         >
             <sp-menu>
                 <sp-menu-group>
-                    <span slot="header">Menu source: ${r}</span>
+                    <span slot="header">Menu source: ${kind}</span>
                     <sp-menu-item>Deselect</sp-menu-item>
                     <sp-menu-item>Select inverse</sp-menu-item>
                     <sp-menu-item>Feather...</sp-menu-item>
@@ -500,7 +704,23 @@ import{html as o}from"@spectrum-web-components/base";import{ifDefined as d}from"
                 </sp-menu-group>
             </sp-menu>
         </sp-popover>
-    `;return o`
+    `;
+  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;
@@ -509,33 +729,112 @@ import{html as o}from"@spectrum-web-components/base";import{ifDefined as d}from"
         </style>
         <start-end-contextmenu
             class="app-root"
-            @contextmenu=${async r=>{r.preventDefault();const c=r.composedPath()[0],{id:s}=c,u=r.target,g=new h(r.clientX,r.clientY),m=document.createDocumentFragment();f(t(s),m);const v=m.querySelector("sp-popover");y(u,"modal",v,{placement:e.placement,receivesFocus:"auto",virtualTrigger:g})}}
+            @contextmenu=${pointerenter}
         ></start-end-contextmenu>
-    `};virtualElement.args={placement:"right-start"};export const detachedElement=()=>{let e;const t=async({target:n})=>{if(e){e(),e=void 0;return}const r=document.createElement("div");r.textContent="This div is overlaid",r.setAttribute("style",`
+    `;
+};
+virtualElement.args = {
+  placement: "right-start"
+};
+export const detachedElement = () => {
+  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;
-        `),e=await b.open(n,"click",r,{offset:0,placement:"bottom"})};return requestAnimationFrame(()=>{t({target:document.querySelector("#detached-content-trigger")})}),o`
+        `
+    );
+    closeOverlay = await Overlay.open(target, "click", div, {
+      offset: 0,
+      placement: "bottom"
+    });
+  };
+  requestAnimationFrame(() => {
+    openDetachedOverlayContent({
+      target: document.querySelector(
+        "#detached-content-trigger"
+      )
+    });
+  });
+  return html`
         <sp-action-button
             id="detached-content-trigger"
-            @click=${t}
-            @sp-closed=${()=>e=void 0}
+            @click=${openDetachedOverlayContent}
+            @sp-closed=${() => closeOverlay = void 0}
         >
             <sp-icon-open-in
                 slot="icon"
                 label="Open in overlay"
             ></sp-icon-open-in>
         </sp-action-button>
-    `};class x extends HTMLElement{constructor(){super();this.handleTriggerOpened=async()=>{await i();const t=document.querySelector("popover-content");!t||(t.addEventListener("sp-opened",this.handlePopoverOpen),t.button.click())};this.handlePopoverOpen=async()=>{await i(),this.ready(!0)};this.readyPromise=Promise.resolve(!1);this.readyPromise=new Promise(t=>{this.ready=t,this.setup()})}async setup(){await i();const t=document.querySelector("overlay-trigger"),n=document.querySelector('[slot="trigger"]');t.addEventListener("sp-opened",this.handleTriggerOpened),n.click()}get updateComplete(){return this.readyPromise}}customElements.define("defined-overlay-ready",x);const P=e=>o`
-        ${e()}
+    `;
+};
+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;
+  }
+}
+customElements.define("defined-overlay-ready", DefinedOverlayReady);
+const definedOverlayDecorator = (story) => {
+  return html`
+        ${story()}
         <defined-overlay-ready></defined-overlay-ready>
-    `;export const definedOverlayElement=()=>o`
+    `;
+};
+export const definedOverlayElement = () => {
+  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>
                 <popover-content></popover-content>
             </sp-popover>
         </overlay-trigger>
-    `;definedOverlayElement.decorators=[P];
+    `;
+};
+definedOverlayElement.decorators = [definedOverlayDecorator];
 //# sourceMappingURL=overlay.stories.js.map