@spectrum-web-components/overlay 0.18.0-devmode.0 → 0.18.0

package/stories/overlay.stories.js

@@ -1,33 +1,4 @@
-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`
+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`
     <style>
         html,
         body,
@@ -62,73 +33,20 @@ const storyStyles = html`
             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 template = ({
-  placement,
-  offset,
-  open,
-  type
-}) => {
-  return html`
-        ${storyStyles}
+`;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}
         <overlay-trigger
             id="trigger"
-            placement="${placement}"
-            offset="${offset}"
-            open=${ifDefined(open)}
-            type=${ifDefined(type)}
+            placement="${e}"
+            offset="${t}"
+            open=${d(n)}
+            type=${d(r)}
         >
             <sp-button variant="primary" slot="trigger">Show Popover</sp-button>
             <sp-popover
                 dialog
                 slot="click-content"
-                placement="${placement}"
+                placement="${e}"
                 tip
             >
                 <div class="options-popover-content">
@@ -164,24 +82,13 @@ const template = ({
             </sp-popover>
             <sp-tooltip
                 slot="hover-content"
-                ?delayed=${open !== "hover"}
+                ?delayed=${n!=="hover"}
                 tip="bottom"
             >
                 Click to open a popover.
             </sp-tooltip>
         </overlay-trigger>
-    `;
-};
-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`
+    `;export const Default=e=>l(e),openHoverContent=e=>l({...e,open:"hover"}),openClickContent=e=>l({...e,open:"click"}),customizedClickContent=e=>o`
     <style>
         active-overlay::part(theme) {
             --styled-div-background-color: var(--spectrum-semantic-cta-background-color-default);
@@ -189,12 +96,8 @@ export const customizedClickContent = (args) => html`
         }
     </style>
     </style>
-    ${template({
-  ...args,
-  open: "click"
-})}
-`;
-const extraText = html`
+    ${l({...e,open:"click"})}
+`;const p=o`
     <p>This is some text.</p>
     <p>This is some text.</p>
     <p>
@@ -202,53 +105,38 @@ const extraText = html`
         <a href="#anchor">link</a>
         .
     </p>
-`;
-export const inline = () => {
-  const closeEvent = new Event("close", { bubbles: true, composed: true });
-  return html`
+`;export const inline=()=>{const e=new Event("close",{bubbles:!0,composed:!0});return o`
         <overlay-trigger type="inline">
             <sp-button slot="trigger">Open</sp-button>
             <sp-overlay slot="click-content">
                 <sp-button
-                    @click=${(event) => {
-    event.target.dispatchEvent(closeEvent);
-  }}
+                    @click=${t=>{t.target.dispatchEvent(e)}}
                 >
                     Close
                 </sp-button>
             </sp-overlay>
         </overlay-trigger>
-        ${extraText}
-    `;
-};
-export const replace = () => {
-  const closeEvent = new Event("close", { bubbles: true, composed: true });
-  return html`
+        ${p}
+    `},replace=()=>{const e=new Event("close",{bubbles:!0,composed:!0});return o`
         <overlay-trigger type="replace">
             <sp-button slot="trigger">Open</sp-button>
             <sp-overlay slot="click-content">
                 <sp-button
-                    @click=${(event) => {
-    event.target.dispatchEvent(closeEvent);
-  }}
+                    @click=${t=>{t.target.dispatchEvent(e)}}
                 >
                     Close
                 </sp-button>
             </sp-overlay>
         </overlay-trigger>
-        ${extraText}
-    `;
-};
-export const modalLoose = () => {
-  const closeEvent = new Event("close", { bubbles: true, composed: true });
-  return html`
+        ${p}
+    `},modalLoose=()=>{const e=new Event("close",{bubbles:!0,composed:!0});return o`
         <overlay-trigger type="modal" placement="none">
             <sp-button slot="trigger">Open</sp-button>
             <sp-dialog
                 size="s"
                 dismissable
                 slot="click-content"
-                @closed=${(event) => event.target.dispatchEvent(closeEvent)}
+                @closed=${t=>t.target.dispatchEvent(e)}
             >
                 <h2 slot="heading">Loose Dialog</h2>
                 <p>
@@ -266,12 +154,8 @@ export const modalLoose = () => {
                 </p>
             </sp-dialog>
         </overlay-trigger>
-        ${extraText}
-    `;
-};
-export const modalManaged = () => {
-  const closeEvent = new Event("close", { bubbles: true, composed: true });
-  return html`
+        ${p}
+    `},modalManaged=()=>{const e=new Event("close",{bubbles:!0,composed:!0});return o`
         <overlay-trigger type="modal" placement="none">
             <sp-button slot="trigger">Open</sp-button>
             <sp-dialog-wrapper
@@ -282,15 +166,9 @@ export const modalManaged = () => {
                 secondary-label="Replace"
                 cancel-label="Cancel"
                 footer="Content for footer"
-                @confirm=${(event) => {
-    event.target.dispatchEvent(closeEvent);
-  }}
-                @secondary=${(event) => {
-    event.target.dispatchEvent(closeEvent);
-  }}
-                @cancel=${(event) => {
-    event.target.dispatchEvent(closeEvent);
-  }}
+                @confirm=${t=>{t.target.dispatchEvent(e)}}
+                @secondary=${t=>{t.target.dispatchEvent(e)}}
+                @cancel=${t=>{t.target.dispatchEvent(e)}}
             >
                 <p>
                     The
@@ -302,22 +180,17 @@ export const modalManaged = () => {
                 </p>
             </sp-dialog-wrapper>
         </overlay-trigger>
-        ${extraText}
-    `;
-};
-export const deepNesting = () => {
-  const color = window.__swc_hack_knobs__.defaultColor;
-  const outter = color === "light" ? "dark" : "light";
-  return html`
-        ${storyStyles}
+        ${p}
+    `},deepNesting=()=>{const e=window.__swc_hack_knobs__.defaultColor;return o`
+        ${a}
         <sp-theme
-            color=${outter}
+            color=${e==="light"?"dark":"light"}
             theme=${window.__swc_hack_knobs__.defaultThemeVariant}
             scale=${window.__swc_hack_knobs__.defaultScale}
             dir=${window.__swc_hack_knobs__.defaultDirection}
         >
             <sp-theme
-                color=${color}
+                color=${e}
                 theme=${window.__swc_hack_knobs__.defaultThemeVariant}
                 scale=${window.__swc_hack_knobs__.defaultScale}
                 dir=${window.__swc_hack_knobs__.defaultDirection}
@@ -332,10 +205,7 @@ export const deepNesting = () => {
                 ></recursive-popover>
             </sp-theme>
         </sp-theme>
-    `;
-};
-export const edges = () => {
-  return html`
+    `},edges=()=>o`
         <style>
             .demo {
                 position: absolute;
@@ -397,11 +267,8 @@ export const edges = () => {
                 Triskaidekaphobia and More
             </sp-tooltip>
         </overlay-trigger>
-    `;
-};
-export const updated = () => {
-  return html`
-        ${storyStyles}
+    `,updated=()=>o`
+        ${a}
         <style>
             sp-tooltip {
                 transition: none;
@@ -460,11 +327,8 @@ export const updated = () => {
                 </sp-popover>
             </overlay-trigger>
         </overlay-drag>
-    `;
-};
-export const sideHoverDraggable = () => {
-  return html`
-        ${storyStyles}
+    `,sideHoverDraggable=()=>o`
+        ${a}
         <style>
             sp-tooltip {
                 transition: none;
@@ -490,10 +354,7 @@ export const sideHoverDraggable = () => {
                 </sp-tooltip>
             </overlay-trigger>
         </overlay-drag>
-    `;
-};
-export const longpress = () => {
-  return html`
+    `,longpress=()=>o`
         <overlay-trigger placement="right-start">
             <sp-action-button slot="trigger" hold-affordance>
                 <sp-icon-magnify slot="icon"></sp-icon-magnify>
@@ -501,7 +362,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=${e=>e.target.dispatchEvent(new Event("close",{bubbles:!0}))}
                     selects="single"
                     vertical
                     style="margin: calc(var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)) / 2);"
@@ -518,50 +379,10 @@ export const longpress = () => {
                 </sp-action-group>
             </sp-popover>
         </overlay-trigger>
-    `;
-};
-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()}
+    `;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()}
         <complex-modal-ready></complex-modal-ready>
-    `;
-};
-export const complexModal = () => {
-  return html`
+    `;export const complexModal=()=>o`
         <style>
             body {
                 --swc-margin-test: 10px;
@@ -615,11 +436,7 @@ export const complexModal = () => {
                 Toggle Dialog
             </sp-button>
         </overlay-trigger>
-    `;
-};
-complexModal.decorators = [complexModalDecorator];
-export const superComplexModal = () => {
-  return html`
+    `;complexModal.decorators=[T];export const superComplexModal=()=>o`
         <overlay-trigger type="modal" placement="none">
             <sp-button slot="trigger" variant="accent">Toggle Dialog</sp-button>
             <sp-popover dialog slot="click-content">
@@ -652,13 +469,7 @@ export const superComplexModal = () => {
                 </overlay-trigger>
             </sp-popover>
         </overlay-trigger>
-    `;
-};
-class StartEndContextmenu extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-    this.shadowRoot.innerHTML = `
+    `;class w extends HTMLElement{constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
             <style>
                 :host {
                     display: flex;
@@ -671,22 +482,14 @@ class StartEndContextmenu extends HTMLElement {
             </style>
             <div id="start"></div>
             <div id="end"></div>
-        `;
-  }
-}
-customElements.define("start-end-contextmenu", StartEndContextmenu);
-export const virtualElement = (args) => {
-  const contextMenuTemplate = (kind = "") => html`
+        `}}customElements.define("start-end-contextmenu",w);export const virtualElement=e=>{const t=(r="")=>o`
         <sp-popover
             style="width:300px;"
-            @click=${(event) => {
-    var _a;
-    return (_a = event.target) == null ? void 0 : _a.dispatchEvent(new Event("close", { bubbles: true }));
-  }}
+            @click=${c=>{var s;return(s=c.target)==null?void 0:s.dispatchEvent(new Event("close",{bubbles:!0}))}}
         >
             <sp-menu>
                 <sp-menu-group>
-                    <span slot="header">Menu source: ${kind}</span>
+                    <span slot="header">Menu source: ${r}</span>
                     <sp-menu-item>Deselect</sp-menu-item>
                     <sp-menu-item>Select inverse</sp-menu-item>
                     <sp-menu-item>Feather...</sp-menu-item>
@@ -697,23 +500,7 @@ export const virtualElement = (args) => {
                 </sp-menu-group>
             </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`
+    `;return o`
         <style>
             .app-root {
                 position: absolute;
@@ -722,103 +509,33 @@ export const virtualElement = (args) => {
         </style>
         <start-end-contextmenu
             class="app-root"
-            @contextmenu=${pointerenter}
+            @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})}}
         ></start-end-contextmenu>
-    `;
-};
-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", `
+    `};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",`
             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")
-    });
-  });
-  return html`
+        `),e=await b.open(n,"click",r,{offset:0,placement:"bottom"})};return requestAnimationFrame(()=>{t({target:document.querySelector("#detached-content-trigger")})}),o`
         <sp-action-button
             id="detached-content-trigger"
-            @click=${openDetachedOverlayContent}
-            @sp-closed=${() => closeOverlay = void 0}
+            @click=${t}
+            @sp-closed=${()=>e=void 0}
         >
             <sp-icon-open-in
                 slot="icon"
                 label="Open in overlay"
             ></sp-icon-open-in>
         </sp-action-button>
-    `;
-};
-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()}
+    `};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()}
         <defined-overlay-ready></defined-overlay-ready>
-    `;
-};
-export const definedOverlayElement = () => {
-  return html`
+    `;export const definedOverlayElement=()=>o`
         <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 = [definedOverlayDecorator];
+    `;definedOverlayElement.decorators=[P];
 //# sourceMappingURL=overlay.stories.js.map