@spectrum-web-components/overlay 0.31.1-overlay.29 → 0.31.1-react.21

package/src/ActiveOverlay.dev.js

@@ -0,0 +1,517 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+import {
+  html,
+  SpectrumElement
+} from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { reparentChildren } from "@spectrum-web-components/shared/src/reparent-children.js";
+import { firstFocusableIn } from "@spectrum-web-components/shared/src/first-focusable-in.js";
+import styles from "./active-overlay.css.js";
+import { parentOverlayOf } from "./overlay-utils.dev.js";
+import {
+  arrow,
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  shift,
+  size
+} from "@floating-ui/dom";
+const stateMachine = {
+  initial: "idle",
+  states: {
+    idle: {
+      on: {
+        active: "active"
+      }
+    },
+    active: {
+      on: {
+        hiding: "hiding",
+        idle: "idle"
+      }
+    },
+    hiding: {
+      on: {
+        dispose: "dispose"
+      }
+    },
+    dispose: {
+      on: {
+        disposed: "disposed"
+      }
+    },
+    disposed: {
+      on: {}
+    }
+  }
+};
+const stateTransition = (state, event) => {
+  if (!state)
+    return stateMachine.initial;
+  if (!event)
+    return state;
+  return stateMachine.states[state].on[event] || state;
+};
+const getFallbackPlacements = (placement) => {
+  var _a;
+  const fallbacks = {
+    left: ["right", "bottom", "top"],
+    "left-start": ["right-start", "bottom", "top"],
+    "left-end": ["right-end", "bottom", "top"],
+    right: ["left", "bottom", "top"],
+    "right-start": ["left-start", "bottom", "top"],
+    "right-end": ["left-end", "bottom", "top"],
+    top: ["bottom", "left", "right"],
+    "top-start": ["bottom-start", "left", "right"],
+    "top-end": ["bottom-end", "left", "right"],
+    bottom: ["top", "left", "right"],
+    "bottom-start": ["top-start", "left", "right"],
+    "bottom-end": ["top-end", "left", "right"]
+  };
+  return (_a = fallbacks[placement]) != null ? _a : [placement];
+};
+const _ActiveOverlay = class extends SpectrumElement {
+  constructor() {
+    super();
+    this.contentAnimationPromise = Promise.resolve(true);
+    this.resolveContentAnimationPromise = () => {
+      return;
+    };
+    this._state = stateTransition();
+    this.animating = false;
+    this.theme = {};
+    this.tabbingAway = false;
+    this.offset = 6;
+    this.skidding = 0;
+    this.interaction = "hover";
+    this.positionAnimationFrame = 0;
+    this.willNotifyClosed = false;
+    this.isConstrained = false;
+    this.updateOverlayPosition = () => {
+      if (this.interaction !== "modal" && this.cleanup) {
+        this.dispatchEvent(new Event("close"));
+        return;
+      }
+      this.setOverlayPosition();
+    };
+    this.resetOverlayPosition = () => {
+      this.style.removeProperty("max-height");
+      this.style.removeProperty("height");
+      this.initialHeight = void 0;
+      this.isConstrained = false;
+      this.offsetHeight;
+      this.setOverlayPosition();
+    };
+    this.setOverlayPosition = async () => {
+      if (!this.placement || this.placement === "none") {
+        return;
+      }
+      await (document.fonts ? document.fonts.ready : Promise.resolve());
+      function roundByDPR(num) {
+        const dpr = window.devicePixelRatio || 1;
+        return Math.round(num * dpr) / dpr || -1e4;
+      }
+      const REQUIRED_DISTANCE_TO_EDGE = 8;
+      const MIN_OVERLAY_HEIGHT = 100;
+      const flipMiddleware = this.virtualTrigger ? flip({
+        padding: REQUIRED_DISTANCE_TO_EDGE,
+        fallbackPlacements: getFallbackPlacements(this.placement)
+      }) : flip({
+        padding: REQUIRED_DISTANCE_TO_EDGE
+      });
+      const middleware = [
+        offset({
+          mainAxis: this.offset,
+          crossAxis: this.skidding
+        }),
+        shift({ padding: REQUIRED_DISTANCE_TO_EDGE }),
+        flipMiddleware,
+        size({
+          padding: REQUIRED_DISTANCE_TO_EDGE,
+          apply: ({
+            availableWidth,
+            availableHeight,
+            rects: { floating }
+          }) => {
+            const maxHeight = Math.max(
+              MIN_OVERLAY_HEIGHT,
+              Math.floor(availableHeight)
+            );
+            const actualHeight = floating.height;
+            this.initialHeight = !this.isConstrained && !this.virtualTrigger ? actualHeight : this.initialHeight || actualHeight;
+            this.isConstrained = actualHeight < this.initialHeight || maxHeight <= actualHeight;
+            const appliedHeight = this.isConstrained ? `${maxHeight}px` : "";
+            Object.assign(this.style, {
+              maxWidth: `${Math.floor(availableWidth)}px`,
+              maxHeight: appliedHeight,
+              height: appliedHeight
+            });
+          }
+        })
+      ];
+      if (this.overlayContentTip) {
+        middleware.push(arrow({ element: this.overlayContentTip }));
+      }
+      const { x, y, placement, middlewareData } = await computePosition(
+        this.virtualTrigger || this.trigger,
+        this,
+        {
+          placement: this.placement,
+          middleware,
+          strategy: "fixed"
+        }
+      );
+      Object.assign(this.style, {
+        top: "0px",
+        left: "0px",
+        transform: `translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`
+      });
+      if (placement !== this.getAttribute("actual-placement")) {
+        this.setAttribute("actual-placement", placement);
+        this.overlayContent.setAttribute("placement", placement);
+      }
+      if (this.overlayContentTip && middlewareData.arrow) {
+        const { x: arrowX, y: arrowY } = middlewareData.arrow;
+        Object.assign(this.overlayContentTip.style, {
+          left: arrowX != null ? `${roundByDPR(arrowX)}px` : "",
+          top: arrowY != null ? `${roundByDPR(arrowY)}px` : "",
+          right: "",
+          bottom: ""
+        });
+      }
+    };
+    this.handleInlineTriggerKeydown = (event) => {
+      const { code, shiftKey } = event;
+      if (code !== "Tab")
+        return;
+      if (shiftKey) {
+        this.tabbingAway = true;
+        this.dispatchEvent(new Event("close"));
+        return;
+      }
+      event.stopPropagation();
+      event.preventDefault();
+      this.focus();
+    };
+    this.stealOverlayContentPromise = Promise.resolve();
+    this.stealOverlayContentPromise = new Promise(
+      (res) => this.stealOverlayContentResolver = res
+    );
+  }
+  get state() {
+    return this._state;
+  }
+  set state(state) {
+    const nextState = stateTransition(this.state, state);
+    if (nextState === this.state) {
+      return;
+    }
+    this._state = nextState;
+    if (this.state === "active" || this.state === "hiding") {
+      this.setAttribute("state", this.state);
+    } else {
+      this.removeAttribute("state");
+    }
+  }
+  async focus() {
+    const firstFocusable = firstFocusableIn(this);
+    if (firstFocusable) {
+      if (firstFocusable.updateComplete) {
+        await firstFocusable.updateComplete;
+      }
+      const activeElement = this.getRootNode().activeElement;
+      if (activeElement === this || !this.contains(activeElement)) {
+        firstFocusable.focus();
+      }
+    } else {
+      super.focus();
+    }
+    this.removeAttribute("tabindex");
+  }
+  get hasTheme() {
+    return !!this.theme.color || !!this.theme.scale || !!this.theme.lang;
+  }
+  static get styles() {
+    return [styles];
+  }
+  get hasModalRoot() {
+    return !!this._modalRoot;
+  }
+  feature() {
+    if (!this.contains(document.activeElement)) {
+      this.tabIndex = -1;
+    }
+    const parentOverlay = parentOverlayOf(this.trigger);
+    const parentIsModal = parentOverlay && parentOverlay.slot === "open";
+    if (parentIsModal) {
+      this._modalRoot = parentOverlay._modalRoot || parentOverlay;
+    }
+    if (this.interaction === "modal" || this._modalRoot) {
+      this.slot = "open";
+      if (this.interaction === "modal") {
+        this.setAttribute("aria-modal", "true");
+      }
+      if (this._modalRoot) {
+        parentOverlay == null ? void 0 : parentOverlay.feature();
+      }
+    }
+  }
+  obscure(nextOverlayInteraction) {
+    if (this.slot && nextOverlayInteraction === "modal") {
+      this.removeAttribute("slot");
+      this.removeAttribute("aria-modal");
+      if (this.interaction !== "modal") {
+        const parentOverlay = parentOverlayOf(this.trigger);
+        this._modalRoot = parentOverlay == null ? void 0 : parentOverlay.obscure(
+          nextOverlayInteraction
+        );
+        return this._modalRoot;
+      }
+      return this;
+    }
+    return void 0;
+  }
+  async willUpdate() {
+    if (this.hasUpdated)
+      return;
+    if (!this.overlayContent || !this.trigger)
+      return;
+    this.stealOverlayContent(
+      this.overlayContent
+    );
+    this.state = "active";
+    this.feature();
+    if (this.placement && this.placement !== "none") {
+      await this.updateOverlayPosition();
+      document.addEventListener(
+        "sp-update-overlays",
+        this.resetOverlayPosition
+      );
+    }
+    if (this.placement && this.placement !== "none") {
+      this.contentAnimationPromise = this.applyContentAnimation("sp-overlay-fade-in");
+    }
+  }
+  async openCallback(lifecycleCallback) {
+    await this.updateComplete;
+    if (this.receivesFocus) {
+      await this.focus();
+    }
+    await lifecycleCallback();
+    this.trigger.dispatchEvent(
+      new CustomEvent("sp-opened", {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail: {
+          interaction: this.interaction
+        }
+      })
+    );
+  }
+  open(openDetail) {
+    this.extractDetail(openDetail);
+  }
+  extractDetail(detail) {
+    this.overlayContent = detail.content;
+    this.overlayContentTip = detail.contentTip;
+    this.trigger = detail.trigger;
+    this.virtualTrigger = detail.virtualTrigger;
+    this.placement = detail.placement;
+    this.offset = detail.offset;
+    this.skidding = detail.skidding || 0;
+    this.interaction = detail.interaction;
+    this.theme = detail.theme;
+    this.receivesFocus = detail.receivesFocus;
+    this.root = detail.root;
+  }
+  dispose() {
+    if (this.state !== "dispose")
+      return;
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+      delete this.timeout;
+    }
+    this.trigger.removeEventListener(
+      "keydown",
+      this.handleInlineTriggerKeydown
+    );
+    this.returnOverlayContent();
+    this.state = "disposed";
+    if (this.willNotifyClosed) {
+      this.overlayContent.dispatchEvent(new Event("sp-overlay-closed"));
+      this.willNotifyClosed = false;
+    }
+    if (this.cleanup) {
+      this.cleanup();
+    }
+  }
+  stealOverlayContent(element) {
+    this.originalPlacement = element.getAttribute("placement");
+    this.restoreContent = reparentChildren([element], this, {
+      position: "beforeend",
+      prepareCallback: (el) => {
+        const slotName = el.slot;
+        const placement = el.placement;
+        el.removeAttribute("slot");
+        return (el2) => {
+          el2.slot = slotName;
+          el2.placement = placement;
+        };
+      }
+    });
+    this.stealOverlayContentResolver();
+  }
+  returnOverlayContent() {
+    if (!this.restoreContent)
+      return;
+    const [element] = this.restoreContent();
+    this.restoreContent = void 0;
+    this.willNotifyClosed = true;
+    if (this.originalPlacement) {
+      element.setAttribute("placement", this.originalPlacement);
+      delete this.originalPlacement;
+    }
+  }
+  async placeOverlay() {
+    if (!this.placement || this.placement === "none") {
+      return;
+    }
+    this.cleanup = autoUpdate(
+      this.virtualTrigger || this.trigger,
+      this,
+      this.updateOverlayPosition,
+      {
+        elementResize: false
+      }
+    );
+  }
+  async hide(animated = true) {
+    if (this.state !== "active")
+      return;
+    this.state = "hiding";
+    if (animated) {
+      await this.applyContentAnimation("sp-overlay-fade-out");
+    }
+    this.state = "dispose";
+  }
+  schedulePositionUpdate() {
+    cancelAnimationFrame(this.positionAnimationFrame);
+    this.positionAnimationFrame = requestAnimationFrame(() => {
+      if (this.cleanup) {
+        this.updateOverlayPosition();
+      } else {
+        this.placeOverlay();
+      }
+    });
+  }
+  onSlotChange() {
+    this.schedulePositionUpdate();
+  }
+  applyContentAnimation(animation) {
+    if (this.placement === "none") {
+      return Promise.resolve(true);
+    }
+    this.resolveContentAnimationPromise();
+    return new Promise((resolve) => {
+      this.resolveContentAnimationPromise = () => {
+        resolve(false);
+      };
+      const contents = this.shadowRoot.querySelector(
+        "#contents"
+      );
+      const doneHandler = (event) => {
+        if (animation !== event.animationName)
+          return;
+        contents.removeEventListener("animationend", doneHandler);
+        contents.removeEventListener("animationcancel", doneHandler);
+        this.animating = false;
+        resolve(event.type === "animationcancel");
+      };
+      contents.addEventListener("animationend", doneHandler);
+      contents.addEventListener("animationcancel", doneHandler);
+      contents.style.animationName = animation;
+      this.animating = true;
+    });
+  }
+  renderTheme(content) {
+    const { color, scale, lang, theme } = this.theme;
+    return html`
+            <sp-theme
+                theme=${ifDefined(theme)}
+                color=${ifDefined(color)}
+                scale=${ifDefined(scale)}
+                lang=${ifDefined(lang)}
+                part="theme"
+            >
+                ${content}
+            </sp-theme>
+        `;
+  }
+  render() {
+    const content = html`
+            <div id="contents">
+                <slot @slotchange=${this.onSlotChange}></slot>
+            </div>
+        `;
+    return this.hasTheme ? this.renderTheme(content) : content;
+  }
+  static create(details) {
+    const overlay = new _ActiveOverlay();
+    if (details.content) {
+      overlay.open(details);
+    }
+    return overlay;
+  }
+  async getUpdateComplete() {
+    const actions = [
+      super.getUpdateComplete(),
+      this.stealOverlayContentPromise
+    ];
+    actions.push(this.contentAnimationPromise);
+    if (typeof this.overlayContent.updateComplete !== "undefined") {
+      actions.push(
+        this.overlayContent.updateComplete
+      );
+    }
+    const [complete] = await Promise.all(actions);
+    return complete;
+  }
+  disconnectedCallback() {
+    document.removeEventListener(
+      "sp-update-overlays",
+      this.resetOverlayPosition
+    );
+    super.disconnectedCallback();
+  }
+};
+export let ActiveOverlay = _ActiveOverlay;
+__decorateClass([
+  property()
+], ActiveOverlay.prototype, "_state", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], ActiveOverlay.prototype, "animating", 2);
+__decorateClass([
+  property({ reflect: true })
+], ActiveOverlay.prototype, "placement", 2);
+__decorateClass([
+  property({ attribute: false })
+], ActiveOverlay.prototype, "theme", 2);
+__decorateClass([
+  property({ attribute: false })
+], ActiveOverlay.prototype, "receivesFocus", 2);
+//# sourceMappingURL=ActiveOverlay.dev.js.map

package/src/ActiveOverlay.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["ActiveOverlay.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';\nimport { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport type {\n    Color,\n    Scale,\n    ThemeVariant,\n} from '@spectrum-web-components/theme/src/Theme.js';\nimport styles from './active-overlay.css.js';\nimport { parentOverlayOf } from './overlay-utils.dev.js'\nimport {\n    OverlayOpenCloseDetail,\n    OverlayOpenDetail,\n    Placement,\n    TriggerInteractions,\n} from './overlay-types.dev.js'\nimport type { VirtualTrigger } from './VirtualTrigger.dev.js'\nimport {\n    arrow,\n    autoUpdate,\n    computePosition,\n    flip,\n    Placement as FloatingUIPlacement,\n    offset,\n    shift,\n    size,\n} from '@floating-ui/dom';\n\nexport interface PositionResult {\n    arrowOffsetLeft: number;\n    arrowOffsetTop: number;\n    maxHeight: number;\n    placement: string;\n    positionLeft: number;\n    positionTop: number;\n}\n\ntype OverlayStateType = 'idle' | 'active' | 'hiding' | 'dispose' | 'disposed';\ntype ContentAnimation = 'sp-overlay-fade-in' | 'sp-overlay-fade-out';\n\nconst stateMachine: {\n    initial: OverlayStateType;\n    states: {\n        [stateName: string]: {\n            on: {\n                [transitionName: string]: OverlayStateType;\n            };\n        };\n    };\n} = {\n    initial: 'idle',\n    states: {\n        idle: {\n            on: {\n                active: 'active',\n            },\n        },\n        active: {\n            on: {\n                hiding: 'hiding',\n                idle: 'idle',\n            },\n        },\n        hiding: {\n            on: {\n                dispose: 'dispose',\n            },\n        },\n        dispose: {\n            on: {\n                disposed: 'disposed',\n            },\n        },\n        disposed: {\n            on: {},\n        },\n    },\n};\n\nconst stateTransition = (\n    state?: OverlayStateType,\n    event?: string\n): OverlayStateType => {\n    if (!state) return stateMachine.initial;\n    /* c8 ignore next */\n    if (!event) return state;\n    return stateMachine.states[state].on[event] || state;\n};\n\nconst getFallbackPlacements = (\n    placement: FloatingUIPlacement\n): FloatingUIPlacement[] => {\n    const fallbacks: Record<FloatingUIPlacement, FloatingUIPlacement[]> = {\n        left: ['right', 'bottom', 'top'],\n        'left-start': ['right-start', 'bottom', 'top'],\n        'left-end': ['right-end', 'bottom', 'top'],\n        right: ['left', 'bottom', 'top'],\n        'right-start': ['left-start', 'bottom', 'top'],\n        'right-end': ['left-end', 'bottom', 'top'],\n        top: ['bottom', 'left', 'right'],\n        'top-start': ['bottom-start', 'left', 'right'],\n        'top-end': ['bottom-end', 'left', 'right'],\n        bottom: ['top', 'left', 'right'],\n        'bottom-start': ['top-start', 'left', 'right'],\n        'bottom-end': ['top-end', 'left', 'right'],\n    };\n    return fallbacks[placement] ?? [placement];\n};\n\n/**\n * @element active-overlay\n *\n * @slot - content to display in the overlay\n */\nexport class ActiveOverlay extends SpectrumElement {\n    public overlayContent!: HTMLElement;\n    public overlayContentTip?: HTMLElement;\n    public trigger!: HTMLElement;\n    public root?: HTMLElement;\n    public virtualTrigger?: VirtualTrigger;\n    private cleanup?: () => void;\n\n    protected contentAnimationPromise: Promise<boolean> = Promise.resolve(true);\n    protected resolveContentAnimationPromise = (): void => {\n        return;\n    };\n\n    @property()\n    public _state = stateTransition();\n    public get state(): OverlayStateType {\n        return this._state;\n    }\n    public set state(state: OverlayStateType) {\n        const nextState = stateTransition(this.state, state);\n        if (nextState === this.state) {\n            return;\n        }\n        this._state = nextState;\n        if (this.state === 'active' || this.state === 'hiding') {\n            this.setAttribute('state', this.state);\n        } else {\n            this.removeAttribute('state');\n        }\n    }\n\n    @property({ reflect: true, type: Boolean })\n    public animating = false;\n\n    @property({ reflect: true })\n    public placement?: Placement;\n    @property({ attribute: false })\n    public theme: {\n        color?: Color;\n        scale?: Scale;\n        lang?: string;\n        theme?: ThemeVariant;\n    } = {};\n    @property({ attribute: false })\n    public receivesFocus?: 'auto';\n\n    public tabbingAway = false;\n    private originalPlacement?: Placement;\n    private restoreContent?: () => Element[];\n\n    public override async focus(): Promise<void> {\n        const firstFocusable = firstFocusableIn(this);\n        if (firstFocusable) {\n            if ((firstFocusable as SpectrumElement).updateComplete) {\n                await firstFocusable.updateComplete;\n            }\n            const activeElement = (this.getRootNode() as Document)\n                .activeElement;\n            if (activeElement === this || !this.contains(activeElement)) {\n                firstFocusable.focus();\n            }\n            /* c8 ignore next 3 */\n        } else {\n            super.focus();\n        }\n        this.removeAttribute('tabindex');\n    }\n\n    private get hasTheme(): boolean {\n        return !!this.theme.color || !!this.theme.scale || !!this.theme.lang;\n    }\n\n    public offset = 6;\n    public skidding = 0;\n    public interaction: TriggerInteractions = 'hover';\n    private positionAnimationFrame = 0;\n\n    private timeout?: number;\n\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    public constructor() {\n        super();\n        this.stealOverlayContentPromise = new Promise(\n            (res) => (this.stealOverlayContentResolver = res)\n        );\n    }\n\n    private _modalRoot?: ActiveOverlay;\n\n    public get hasModalRoot(): boolean {\n        return !!this._modalRoot;\n    }\n\n    public feature(): void {\n        // eslint-disable-next-line @spectrum-web-components/document-active-element\n        if (!this.contains(document.activeElement)) {\n            this.tabIndex = -1;\n        }\n        const parentOverlay = parentOverlayOf(this.trigger);\n        const parentIsModal = parentOverlay && parentOverlay.slot === 'open';\n        if (parentIsModal) {\n            this._modalRoot = parentOverlay._modalRoot || parentOverlay;\n        }\n        // If an overlay it triggered from within a \"modal\" overlay, it needs to continue\n        // to act like one to get treated correctly in regards to tab trapping.\n        if (this.interaction === 'modal' || this._modalRoot) {\n            this.slot = 'open';\n            if (this.interaction === 'modal') {\n                this.setAttribute('aria-modal', 'true');\n            }\n            // If this isn't a modal root, walk up the overlays to the next modal root\n            // and \"feature\" each on of the intervening overlays.\n            if (this._modalRoot) {\n                parentOverlay?.feature();\n            }\n        }\n    }\n\n    public obscure(\n        nextOverlayInteraction: TriggerInteractions\n    ): ActiveOverlay | undefined {\n        if (this.slot && nextOverlayInteraction === 'modal') {\n            this.removeAttribute('slot');\n            this.removeAttribute('aria-modal');\n            // Obscure upto and including the next modal root.\n            if (this.interaction !== 'modal') {\n                const parentOverlay = parentOverlayOf(this.trigger);\n                this._modalRoot = parentOverlay?.obscure(\n                    nextOverlayInteraction\n                );\n                return this._modalRoot;\n            }\n            return this;\n        }\n        return undefined;\n    }\n\n    public override async willUpdate(): Promise<void> {\n        if (this.hasUpdated) return;\n\n        /* c8 ignore next */\n        if (!this.overlayContent || !this.trigger) return;\n\n        this.stealOverlayContent(\n            this.overlayContent as HTMLElement & { placement: Placement }\n        );\n\n        this.state = 'active';\n\n        this.feature();\n        if (this.placement && this.placement !== 'none') {\n            await this.updateOverlayPosition();\n            document.addEventListener(\n                'sp-update-overlays',\n                this.resetOverlayPosition\n            );\n        }\n        if (this.placement && this.placement !== 'none') {\n            this.contentAnimationPromise =\n                this.applyContentAnimation('sp-overlay-fade-in');\n        }\n    }\n\n    public async openCallback(\n        lifecycleCallback: () => Promise<void> | void\n    ): Promise<void> {\n        await this.updateComplete;\n        if (this.receivesFocus) {\n            await this.focus();\n        }\n\n        await lifecycleCallback();\n\n        this.trigger.dispatchEvent(\n            new CustomEvent<OverlayOpenCloseDetail>('sp-opened', {\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n                detail: {\n                    interaction: this.interaction,\n                },\n            })\n        );\n    }\n\n    private open(openDetail: OverlayOpenDetail): void {\n        this.extractDetail(openDetail);\n    }\n\n    private extractDetail(detail: OverlayOpenDetail): void {\n        this.overlayContent = detail.content;\n        this.overlayContentTip = detail.contentTip;\n        this.trigger = detail.trigger;\n        this.virtualTrigger = detail.virtualTrigger;\n        this.placement = detail.placement;\n        this.offset = detail.offset;\n        this.skidding = detail.skidding || 0;\n        this.interaction = detail.interaction;\n        this.theme = detail.theme;\n        this.receivesFocus = detail.receivesFocus;\n        this.root = detail.root;\n    }\n\n    public dispose(): void {\n        /* c8 ignore next */\n        if (this.state !== 'dispose') return;\n\n        /* c8 ignore next 4 */\n        if (this.timeout) {\n            clearTimeout(this.timeout);\n            delete this.timeout;\n        }\n\n        this.trigger.removeEventListener(\n            'keydown',\n            this.handleInlineTriggerKeydown\n        );\n\n        this.returnOverlayContent();\n        this.state = 'disposed';\n\n        if (this.willNotifyClosed) {\n            this.overlayContent.dispatchEvent(new Event('sp-overlay-closed'));\n            this.willNotifyClosed = false;\n        }\n\n        if (this.cleanup) {\n            this.cleanup();\n        }\n    }\n\n    private stealOverlayContent(\n        element: HTMLElement & { placement: Placement }\n    ): void {\n        this.originalPlacement = element.getAttribute('placement') as Placement;\n        this.restoreContent = reparentChildren([element], this, {\n            position: 'beforeend',\n            prepareCallback: (el) => {\n                const slotName = el.slot;\n                const placement = el.placement;\n                el.removeAttribute('slot');\n                return (el) => {\n                    el.slot = slotName;\n                    el.placement = placement;\n                };\n            },\n        });\n        this.stealOverlayContentResolver();\n    }\n\n    private willNotifyClosed = false;\n\n    private returnOverlayContent(): void {\n        /* c8 ignore next */\n        if (!this.restoreContent) return;\n\n        const [element] = this.restoreContent();\n        this.restoreContent = undefined;\n        this.willNotifyClosed = true;\n\n        if (this.originalPlacement) {\n            element.setAttribute('placement', this.originalPlacement);\n            delete this.originalPlacement;\n        }\n    }\n\n    private initialHeight: number | undefined;\n    private isConstrained = false;\n\n    public async placeOverlay(): Promise<void> {\n        if (!this.placement || this.placement === 'none') {\n            return;\n        }\n\n        this.cleanup = autoUpdate(\n            this.virtualTrigger || this.trigger,\n            this,\n            this.updateOverlayPosition,\n            {\n                elementResize: false,\n            }\n        );\n    }\n\n    public updateOverlayPosition = (): void => {\n        if (this.interaction !== 'modal' && this.cleanup) {\n            this.dispatchEvent(new Event('close'));\n            return;\n        }\n        this.setOverlayPosition();\n    };\n\n    public resetOverlayPosition = (): void => {\n        this.style.removeProperty('max-height');\n        this.style.removeProperty('height');\n        this.initialHeight = undefined;\n        this.isConstrained = false;\n        // force paint\n        this.offsetHeight;\n        this.setOverlayPosition();\n    };\n\n    public setOverlayPosition = async (): Promise<void> => {\n        if (!this.placement || this.placement === 'none') {\n            return;\n        }\n        await (document.fonts ? document.fonts.ready : Promise.resolve());\n\n        function roundByDPR(num: number): number {\n            const dpr = window.devicePixelRatio || 1;\n            return Math.round(num * dpr) / dpr || -10000;\n        }\n\n        // See: https://spectrum.adobe.com/page/popover/#Container-padding\n        const REQUIRED_DISTANCE_TO_EDGE = 8;\n        // See: https://github.com/adobe/spectrum-web-components/issues/910\n        const MIN_OVERLAY_HEIGHT = 100;\n\n        const flipMiddleware = this.virtualTrigger\n            ? flip({\n                  padding: REQUIRED_DISTANCE_TO_EDGE,\n                  fallbackPlacements: getFallbackPlacements(this.placement),\n              })\n            : flip({\n                  padding: REQUIRED_DISTANCE_TO_EDGE,\n              });\n\n        const middleware = [\n            offset({\n                mainAxis: this.offset,\n                crossAxis: this.skidding,\n            }),\n            shift({ padding: REQUIRED_DISTANCE_TO_EDGE }),\n            flipMiddleware,\n            size({\n                padding: REQUIRED_DISTANCE_TO_EDGE,\n                apply: ({\n                    availableWidth,\n                    availableHeight,\n                    rects: { floating },\n                }) => {\n                    const maxHeight = Math.max(\n                        MIN_OVERLAY_HEIGHT,\n                        Math.floor(availableHeight)\n                    );\n                    const actualHeight = floating.height;\n                    this.initialHeight =\n                        !this.isConstrained && !this.virtualTrigger\n                            ? actualHeight\n                            : this.initialHeight || actualHeight;\n                    this.isConstrained =\n                        actualHeight < this.initialHeight ||\n                        maxHeight <= actualHeight;\n                    const appliedHeight = this.isConstrained\n                        ? `${maxHeight}px`\n                        : '';\n                    Object.assign(this.style, {\n                        maxWidth: `${Math.floor(availableWidth)}px`,\n                        maxHeight: appliedHeight,\n                        height: appliedHeight,\n                    });\n                },\n            }),\n        ];\n        if (this.overlayContentTip) {\n            middleware.push(arrow({ element: this.overlayContentTip }));\n        }\n        const { x, y, placement, middlewareData } = await computePosition(\n            this.virtualTrigger || this.trigger,\n            this,\n            {\n                placement: this.placement,\n                middleware,\n                strategy: 'fixed',\n            }\n        );\n\n        Object.assign(this.style, {\n            top: '0px',\n            left: '0px',\n            transform: `translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`,\n        });\n\n        if (placement !== this.getAttribute('actual-placement')) {\n            this.setAttribute('actual-placement', placement);\n            this.overlayContent.setAttribute('placement', placement);\n        }\n\n        if (this.overlayContentTip && middlewareData.arrow) {\n            const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n            Object.assign(this.overlayContentTip.style, {\n                left: arrowX != null ? `${roundByDPR(arrowX)}px` : '',\n                top: arrowY != null ? `${roundByDPR(arrowY)}px` : '',\n                right: '',\n                bottom: '',\n            });\n        }\n    };\n\n    public async hide(animated = true): Promise<void> {\n        if (this.state !== 'active') return;\n        this.state = 'hiding';\n        if (animated) {\n            await this.applyContentAnimation('sp-overlay-fade-out');\n        }\n        this.state = 'dispose';\n    }\n\n    private schedulePositionUpdate(): void {\n        // Edge needs a little time to update the DOM before computing the layout\n        cancelAnimationFrame(this.positionAnimationFrame);\n        this.positionAnimationFrame = requestAnimationFrame(() => {\n            if (this.cleanup) {\n                this.updateOverlayPosition();\n            } else {\n                this.placeOverlay();\n            }\n        });\n    }\n\n    private onSlotChange(): void {\n        this.schedulePositionUpdate();\n    }\n\n    public handleInlineTriggerKeydown = (event: KeyboardEvent): void => {\n        const { code, shiftKey } = event;\n        /* c8 ignore next */\n        if (code !== 'Tab') return;\n        if (shiftKey) {\n            this.tabbingAway = true;\n            this.dispatchEvent(new Event('close'));\n            return;\n        }\n\n        event.stopPropagation();\n        event.preventDefault();\n        this.focus();\n    };\n\n    public applyContentAnimation(\n        animation: ContentAnimation\n    ): Promise<boolean> {\n        if (this.placement === 'none') {\n            return Promise.resolve(true);\n        }\n        this.resolveContentAnimationPromise();\n        return new Promise((resolve): void => {\n            this.resolveContentAnimationPromise = () => {\n                resolve(false);\n            };\n            const contents = this.shadowRoot.querySelector(\n                '#contents'\n            ) as HTMLElement;\n            const doneHandler = (event: AnimationEvent): void => {\n                if (animation !== event.animationName) return;\n                contents.removeEventListener('animationend', doneHandler);\n                contents.removeEventListener('animationcancel', doneHandler);\n                this.animating = false;\n                resolve(event.type === 'animationcancel');\n            };\n            contents.addEventListener('animationend', doneHandler);\n            contents.addEventListener('animationcancel', doneHandler);\n\n            contents.style.animationName = animation;\n            this.animating = true;\n        });\n    }\n\n    public renderTheme(content: TemplateResult): TemplateResult {\n        const { color, scale, lang, theme } = this.theme;\n        return html`\n            <sp-theme\n                theme=${ifDefined(theme)}\n                color=${ifDefined(color)}\n                scale=${ifDefined(scale)}\n                lang=${ifDefined(lang)}\n                part=\"theme\"\n            >\n                ${content}\n            </sp-theme>\n        `;\n    }\n\n    public override render(): TemplateResult {\n        const content = html`\n            <div id=\"contents\">\n                <slot @slotchange=${this.onSlotChange}></slot>\n            </div>\n        `;\n        return this.hasTheme ? this.renderTheme(content) : content;\n    }\n\n    public static create(details: OverlayOpenDetail): ActiveOverlay {\n        const overlay = new ActiveOverlay();\n\n        if (details.content) {\n            overlay.open(details);\n        }\n\n        return overlay;\n    }\n\n    private stealOverlayContentPromise = Promise.resolve();\n    private stealOverlayContentResolver!: () => void;\n\n    protected override async getUpdateComplete(): Promise<boolean> {\n        const actions: Promise<unknown>[] = [\n            super.getUpdateComplete(),\n            this.stealOverlayContentPromise,\n        ];\n        actions.push(this.contentAnimationPromise);\n        if (\n            typeof (this.overlayContent as SpectrumElement).updateComplete !==\n            'undefined'\n        ) {\n            actions.push(\n                (this.overlayContent as SpectrumElement).updateComplete\n            );\n        }\n        const [complete] = await Promise.all(actions);\n        return complete as boolean;\n    }\n\n    override disconnectedCallback(): void {\n        document.removeEventListener(\n            'sp-update-overlays',\n            this.resetOverlayPosition\n        );\n        super.disconnectedCallback();\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["el"]
+}

package/src/ActiveOverlay.js

@@ -0,0 +1,16 @@
+"use strict";var A=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var p=(s,a,t,e)=>{for(var i=e>1?void 0:e?R(a,t):a,o=s.length-1,n;o>=0;o--)(n=s[o])&&(i=(e?n(a,t,i):n(i))||i);return e&&i&&A(a,t,i),i};import{html as y,SpectrumElement as x}from"@spectrum-web-components/base";import{ifDefined as h}from"@spectrum-web-components/base/src/directives.js";import{property as c}from"@spectrum-web-components/base/src/decorators.js";import{reparentChildren as S}from"@spectrum-web-components/shared/src/reparent-children.js";import{firstFocusableIn as H}from"@spectrum-web-components/shared/src/first-focusable-in.js";import F from"./active-overlay.css.js";import{parentOverlayOf as b}from"./overlay-utils.js";import{arrow as I,autoUpdate as L,computePosition as M,flip as C,offset as D,shift as _,size as k}from"@floating-ui/dom";const P={initial:"idle",states:{idle:{on:{active:"active"}},active:{on:{hiding:"hiding",idle:"idle"}},hiding:{on:{dispose:"dispose"}},dispose:{on:{disposed:"disposed"}},disposed:{on:{}}}},T=(s,a)=>s?a&&P.states[s].on[a]||s:P.initial,U=s=>{var t;return(t={left:["right","bottom","top"],"left-start":["right-start","bottom","top"],"left-end":["right-end","bottom","top"],right:["left","bottom","top"],"right-start":["left-start","bottom","top"],"right-end":["left-end","bottom","top"],top:["bottom","left","right"],"top-start":["bottom-start","left","right"],"top-end":["bottom-end","left","right"],bottom:["top","left","right"],"bottom-start":["top-start","left","right"],"bottom-end":["top-end","left","right"]}[s])!=null?t:[s]},u=class extends x{constructor(){super();this.contentAnimationPromise=Promise.resolve(!0);this.resolveContentAnimationPromise=()=>{};this._state=T();this.animating=!1;this.theme={};this.tabbingAway=!1;this.offset=6;this.skidding=0;this.interaction="hover";this.positionAnimationFrame=0;this.willNotifyClosed=!1;this.isConstrained=!1;this.updateOverlayPosition=()=>{if(this.interaction!=="modal"&&this.cleanup){this.dispatchEvent(new Event("close"));return}this.setOverlayPosition()};this.resetOverlayPosition=()=>{this.style.removeProperty("max-height"),this.style.removeProperty("height"),this.initialHeight=void 0,this.isConstrained=!1,this.offsetHeight,this.setOverlayPosition()};this.setOverlayPosition=async()=>{if(!this.placement||this.placement==="none")return;await(document.fonts?document.fonts.ready:Promise.resolve());function t(l){const r=window.devicePixelRatio||1;return Math.round(l*r)/r||-1e4}const e=8,i=100,o=this.virtualTrigger?C({padding:e,fallbackPlacements:U(this.placement)}):C({padding:e}),n=[D({mainAxis:this.offset,crossAxis:this.skidding}),_({padding:e}),o,k({padding:e,apply:({availableWidth:l,availableHeight:r,rects:{floating:E}})=>{const f=Math.max(i,Math.floor(r)),m=E.height;this.initialHeight=!this.isConstrained&&!this.virtualTrigger?m:this.initialHeight||m,this.isConstrained=m<this.initialHeight||f<=m;const g=this.isConstrained?`${f}px`:"";Object.assign(this.style,{maxWidth:`${Math.floor(l)}px`,maxHeight:g,height:g})}})];this.overlayContentTip&&n.push(I({element:this.overlayContentTip}));const{x:O,y:w,placement:d,middlewareData:v}=await M(this.virtualTrigger||this.trigger,this,{placement:this.placement,middleware:n,strategy:"fixed"});if(Object.assign(this.style,{top:"0px",left:"0px",transform:`translate(${t(O)}px, ${t(w)}px)`}),d!==this.getAttribute("actual-placement")&&(this.setAttribute("actual-placement",d),this.overlayContent.setAttribute("placement",d)),this.overlayContentTip&&v.arrow){const{x:l,y:r}=v.arrow;Object.assign(this.overlayContentTip.style,{left:l!=null?`${t(l)}px`:"",top:r!=null?`${t(r)}px`:"",right:"",bottom:""})}};this.handleInlineTriggerKeydown=t=>{const{code:e,shiftKey:i}=t;if(e==="Tab"){if(i){this.tabbingAway=!0,this.dispatchEvent(new Event("close"));return}t.stopPropagation(),t.preventDefault(),this.focus()}};this.stealOverlayContentPromise=Promise.resolve();this.stealOverlayContentPromise=new Promise(t=>this.stealOverlayContentResolver=t)}get state(){return this._state}set state(t){const e=T(this.state,t);e!==this.state&&(this._state=e,this.state==="active"||this.state==="hiding"?this.setAttribute("state",this.state):this.removeAttribute("state"))}async focus(){const t=H(this);if(t){t.updateComplete&&await t.updateComplete;const e=this.getRootNode().activeElement;(e===this||!this.contains(e))&&t.focus()}else super.focus();this.removeAttribute("tabindex")}get hasTheme(){return!!this.theme.color||!!this.theme.scale||!!this.theme.lang}static get styles(){return[F]}get hasModalRoot(){return!!this._modalRoot}feature(){this.contains(document.activeElement)||(this.tabIndex=-1);const t=b(this.trigger);t&&t.slot==="open"&&(this._modalRoot=t._modalRoot||t),(this.interaction==="modal"||this._modalRoot)&&(this.slot="open",this.interaction==="modal"&&this.setAttribute("aria-modal","true"),this._modalRoot&&(t==null||t.feature()))}obscure(t){if(this.slot&&t==="modal"){if(this.removeAttribute("slot"),this.removeAttribute("aria-modal"),this.interaction!=="modal"){const e=b(this.trigger);return this._modalRoot=e==null?void 0:e.obscure(t),this._modalRoot}return this}}async willUpdate(){this.hasUpdated||!this.overlayContent||!this.trigger||(this.stealOverlayContent(this.overlayContent),this.state="active",this.feature(),this.placement&&this.placement!=="none"&&(await this.updateOverlayPosition(),document.addEventListener("sp-update-overlays",this.resetOverlayPosition)),this.placement&&this.placement!=="none"&&(this.contentAnimationPromise=this.applyContentAnimation("sp-overlay-fade-in")))}async openCallback(t){await this.updateComplete,this.receivesFocus&&await this.focus(),await t(),this.trigger.dispatchEvent(new CustomEvent("sp-opened",{bubbles:!0,composed:!0,cancelable:!0,detail:{interaction:this.interaction}}))}open(t){this.extractDetail(t)}extractDetail(t){this.overlayContent=t.content,this.overlayContentTip=t.contentTip,this.trigger=t.trigger,this.virtualTrigger=t.virtualTrigger,this.placement=t.placement,this.offset=t.offset,this.skidding=t.skidding||0,this.interaction=t.interaction,this.theme=t.theme,this.receivesFocus=t.receivesFocus,this.root=t.root}dispose(){this.state==="dispose"&&(this.timeout&&(clearTimeout(this.timeout),delete this.timeout),this.trigger.removeEventListener("keydown",this.handleInlineTriggerKeydown),this.returnOverlayContent(),this.state="disposed",this.willNotifyClosed&&(this.overlayContent.dispatchEvent(new Event("sp-overlay-closed")),this.willNotifyClosed=!1),this.cleanup&&this.cleanup())}stealOverlayContent(t){this.originalPlacement=t.getAttribute("placement"),this.restoreContent=S([t],this,{position:"beforeend",prepareCallback:e=>{const i=e.slot,o=e.placement;return e.removeAttribute("slot"),n=>{n.slot=i,n.placement=o}}}),this.stealOverlayContentResolver()}returnOverlayContent(){if(!this.restoreContent)return;const[t]=this.restoreContent();this.restoreContent=void 0,this.willNotifyClosed=!0,this.originalPlacement&&(t.setAttribute("placement",this.originalPlacement),delete this.originalPlacement)}async placeOverlay(){!this.placement||this.placement==="none"||(this.cleanup=L(this.virtualTrigger||this.trigger,this,this.updateOverlayPosition,{elementResize:!1}))}async hide(t=!0){this.state==="active"&&(this.state="hiding",t&&await this.applyContentAnimation("sp-overlay-fade-out"),this.state="dispose")}schedulePositionUpdate(){cancelAnimationFrame(this.positionAnimationFrame),this.positionAnimationFrame=requestAnimationFrame(()=>{this.cleanup?this.updateOverlayPosition():this.placeOverlay()})}onSlotChange(){this.schedulePositionUpdate()}applyContentAnimation(t){return this.placement==="none"?Promise.resolve(!0):(this.resolveContentAnimationPromise(),new Promise(e=>{this.resolveContentAnimationPromise=()=>{e(!1)};const i=this.shadowRoot.querySelector("#contents"),o=n=>{t===n.animationName&&(i.removeEventListener("animationend",o),i.removeEventListener("animationcancel",o),this.animating=!1,e(n.type==="animationcancel"))};i.addEventListener("animationend",o),i.addEventListener("animationcancel",o),i.style.animationName=t,this.animating=!0}))}renderTheme(t){const{color:e,scale:i,lang:o,theme:n}=this.theme;return y`
+            <sp-theme
+                theme=${h(n)}
+                color=${h(e)}
+                scale=${h(i)}
+                lang=${h(o)}
+                part="theme"
+            >
+                ${t}
+            </sp-theme>
+        `}render(){const t=y`
+            <div id="contents">
+                <slot @slotchange=${this.onSlotChange}></slot>
+            </div>
+        `;return this.hasTheme?this.renderTheme(t):t}static create(t){const e=new u;return t.content&&e.open(t),e}async getUpdateComplete(){const t=[super.getUpdateComplete(),this.stealOverlayContentPromise];t.push(this.contentAnimationPromise),typeof this.overlayContent.updateComplete!="undefined"&&t.push(this.overlayContent.updateComplete);const[e]=await Promise.all(t);return e}disconnectedCallback(){document.removeEventListener("sp-update-overlays",this.resetOverlayPosition),super.disconnectedCallback()}};export let ActiveOverlay=u;p([c()],ActiveOverlay.prototype,"_state",2),p([c({reflect:!0,type:Boolean})],ActiveOverlay.prototype,"animating",2),p([c({reflect:!0})],ActiveOverlay.prototype,"placement",2),p([c({attribute:!1})],ActiveOverlay.prototype,"theme",2),p([c({attribute:!1})],ActiveOverlay.prototype,"receivesFocus",2);
+//# sourceMappingURL=ActiveOverlay.js.map