@spectrum-web-components/overlay 1.1.0 → 1.1.1

package/src/OverlayTrigger.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["OverlayTrigger.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    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    query,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport type { Placement } from '@floating-ui/dom';\n\nimport type { BeforetoggleOpenEvent } from './events.js';\nimport type { Overlay } from './Overlay.js';\nimport type { OverlayTriggerInteractions } from './overlay-types';\n\nimport overlayTriggerStyles from './overlay-trigger.css.js';\n\nexport type OverlayContentTypes = 'click' | 'hover' | 'longpress';\n\n/**\n * @element overlay-trigger\n *\n * @slot trigger - The content that will trigger the various overlays\n * @slot hover-content - The content that will be displayed on hover\n * @slot click-content - The content that will be displayed on click\n * @slot longpress-content - The content that will be displayed on click\n *\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class OverlayTrigger extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [overlayTriggerStyles];\n    }\n\n    @property()\n    content = 'click hover longpress';\n\n    /**\n     * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n     * @attr\n     */\n    @property({ reflect: true })\n    public placement?: Placement;\n\n    @property()\n    public type?: OverlayTriggerInteractions;\n\n    @property({ type: Number })\n    public offset = 6;\n\n    @property({ reflect: true })\n    public open?: OverlayContentTypes;\n\n    @property({ type: Boolean, reflect: true })\n    public disabled = false;\n\n    @property({ attribute: 'receives-focus' })\n    public receivesFocus: 'true' | 'false' | 'auto' = 'auto';\n\n    @state()\n    private clickContent: HTMLElement[] = [];\n\n    private clickPlacement?: Placement;\n\n    @state()\n    private longpressContent: HTMLElement[] = [];\n\n    private longpressPlacement?: Placement;\n\n    @state()\n    private hoverContent: HTMLElement[] = [];\n\n    private hoverPlacement?: Placement;\n\n    @state()\n    private targetContent: HTMLElement[] = [];\n\n    @query('#click-overlay', true)\n    clickOverlayElement!: Overlay;\n\n    @query('#longpress-overlay', true)\n    longpressOverlayElement!: Overlay;\n\n    @query('#hover-overlay', true)\n    hoverOverlayElement!: Overlay;\n\n    private getAssignedElementsFromSlot(slot: HTMLSlotElement): HTMLElement[] {\n        return slot.assignedElements({ flatten: true }) as HTMLElement[];\n    }\n\n    private handleTriggerContent(\n        event: Event & { target: HTMLSlotElement }\n    ): void {\n        this.targetContent = this.getAssignedElementsFromSlot(event.target);\n    }\n\n    private handleSlotContent(\n        event: Event & { target: HTMLSlotElement }\n    ): void {\n        switch (event.target.name) {\n            case 'click-content':\n                this.clickContent = this.getAssignedElementsFromSlot(\n                    event.target\n                );\n                break;\n            case 'longpress-content':\n                this.longpressContent = this.getAssignedElementsFromSlot(\n                    event.target\n                );\n                break;\n            case 'hover-content':\n                this.hoverContent = this.getAssignedElementsFromSlot(\n                    event.target\n                );\n                break;\n        }\n    }\n\n    private handleBeforetoggle(event: BeforetoggleOpenEvent): void {\n        const { target } = event;\n        let type: OverlayContentTypes;\n        if (target === this.clickOverlayElement) {\n            type = 'click';\n        } else if (target === this.longpressOverlayElement) {\n            type = 'longpress';\n        } else if (target === this.hoverOverlayElement) {\n            type = 'hover';\n            /* c8 ignore next 3 */\n        } else {\n            return;\n        }\n        if (event.newState === 'open') {\n            this.open = type;\n        } else if (this.open === type) {\n            this.open = undefined;\n        }\n    }\n\n    protected override update(changes: PropertyValues): void {\n        if (changes.has('clickContent')) {\n            this.clickPlacement =\n                ((this.clickContent[0]?.getAttribute('placement') ||\n                    this.clickContent[0]?.getAttribute(\n                        'direction'\n                    )) as Placement) || undefined;\n        }\n        if (changes.has('hoverContent')) {\n            this.hoverPlacement =\n                ((this.hoverContent[0]?.getAttribute('placement') ||\n                    this.hoverContent[0]?.getAttribute(\n                        'direction'\n                    )) as Placement) || undefined;\n        }\n        if (changes.has('longpressContent')) {\n            this.longpressPlacement =\n                ((this.longpressContent[0]?.getAttribute('placement') ||\n                    this.longpressContent[0]?.getAttribute(\n                        'direction'\n                    )) as Placement) || undefined;\n        }\n        super.update(changes);\n    }\n\n    protected renderSlot(name: string): TemplateResult {\n        return html`\n            <slot name=${name} @slotchange=${this.handleSlotContent}></slot>\n        `;\n    }\n\n    protected renderClickOverlay(): TemplateResult {\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n        const slot = this.renderSlot('click-content');\n        if (!this.clickContent.length) {\n            return slot;\n        }\n        return html`\n            <sp-overlay\n                id=\"click-overlay\"\n                ?disabled=${this.disabled || !this.clickContent.length}\n                ?open=${this.open === 'click' && !!this.clickContent.length}\n                .offset=${this.offset}\n                .placement=${this.clickPlacement || this.placement}\n                .triggerElement=${this.targetContent[0]}\n                .triggerInteraction=${'click'}\n                .type=${this.type !== 'modal' ? 'auto' : 'modal'}\n                @beforetoggle=${this.handleBeforetoggle}\n                .receivesFocus=${this.receivesFocus}\n            >\n                ${slot}\n            </sp-overlay>\n        `;\n    }\n\n    protected renderHoverOverlay(): TemplateResult {\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n        const slot = this.renderSlot('hover-content');\n        if (!this.hoverContent.length) {\n            return slot;\n        }\n        return html`\n            <sp-overlay\n                id=\"hover-overlay\"\n                ?open=${this.open === 'hover' && !!this.hoverContent.length}\n                ?disabled=${this.disabled ||\n                !this.hoverContent.length ||\n                (!!this.open && this.open !== 'hover')}\n                .offset=${this.offset}\n                .placement=${this.hoverPlacement || this.placement}\n                .triggerElement=${this.targetContent[0]}\n                .triggerInteraction=${'hover'}\n                .type=${'hint'}\n                @beforetoggle=${this.handleBeforetoggle}\n                .receivesFocus=${this.receivesFocus}\n            >\n                ${slot}\n            </sp-overlay>\n        `;\n    }\n\n    protected renderLongpressOverlay(): TemplateResult {\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n        const slot = this.renderSlot('longpress-content');\n        if (!this.longpressContent.length) {\n            return slot;\n        }\n        return html`\n            <sp-overlay\n                id=\"longpress-overlay\"\n                ?disabled=${this.disabled || !this.longpressContent.length}\n                ?open=${this.open === 'longpress' &&\n                !!this.longpressContent.length}\n                .offset=${this.offset}\n                .placement=${this.longpressPlacement || this.placement}\n                .triggerElement=${this.targetContent[0]}\n                .triggerInteraction=${'longpress'}\n                .type=${'auto'}\n                @beforetoggle=${this.handleBeforetoggle}\n                .receivesFocus=${this.receivesFocus}\n            >\n                ${slot}\n            </sp-overlay>\n            <slot name=\"longpress-describedby-descriptor\"></slot>\n        `;\n    }\n\n    protected override render(): TemplateResult {\n        const content = this.content.split(' ');\n        // Keyboard event availability documented in README.md\n        /* eslint-disable lit-a11y/click-events-have-key-events */\n        return html`\n            <slot\n                id=\"trigger\"\n                name=\"trigger\"\n                @slotchange=${this.handleTriggerContent}\n            ></slot>\n            ${[\n                content.includes('click') ? this.renderClickOverlay() : html``,\n                content.includes('hover') ? this.renderHoverOverlay() : html``,\n                content.includes('longpress')\n                    ? this.renderLongpressOverlay()\n                    : html``,\n            ]}\n        `;\n        /* eslint-enable lit-a11y/click-events-have-key-events */\n    }\n\n    protected override updated(changes: PropertyValues): void {\n        super.updated(changes);\n        if (this.disabled && changes.has('disabled')) {\n            this.open = undefined;\n            return;\n        }\n    }\n\n    protected override async getUpdateComplete(): Promise<boolean> {\n        const complete = (await super.getUpdateComplete()) as boolean;\n        return complete;\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["html", "SpectrumElement", "property", "query", "state", "overlayTriggerStyles", "slot", "event", "target", "type", "changes", "_a", "_b", "_c", "_d", "_e", "_f", "name", "content", "__decorateClass"]
+}

package/src/PlacementController.d.ts

@@ -0,0 +1,157 @@
+import type { ReactiveController, ReactiveElement } from '@spectrum-web-components/base';
+import { Placement } from '@floating-ui/dom';
+import type { VirtualTrigger } from './VirtualTrigger.js';
+import type { OpenableElement } from './overlay-types.js';
+type OverlayOptionsV1 = {
+    abortPromise?: Promise<boolean>;
+    delayed?: boolean;
+    offset?: number | [number, number];
+    placement: Placement;
+    notImmediatelyClosable?: boolean;
+    receivesFocus?: 'auto';
+    root?: HTMLElement;
+    tipPadding?: number;
+    trigger: HTMLElement | VirtualTrigger;
+    type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';
+};
+/**
+ * Symbol used to indicate that the placement has been updated.
+ */
+export declare const placementUpdatedSymbol: unique symbol;
+/**
+ * Controller for managing the placement of an overlay.
+ *
+ * This class implements the ReactiveController interface and provides methods
+ * for managing the positioning and constraints of an overlay element.
+ */
+export declare class PlacementController implements ReactiveController {
+    /**
+     * Function to clean up resources when the controller is no longer needed.
+     *
+     * @private
+     */
+    private cleanup?;
+    /**
+     * Initial height of the overlay.
+     *
+     * @type {number}
+     */
+    initialHeight?: number;
+    /**
+     * Indicates whether the overlay is constrained by available space.
+     *
+     * @type {boolean}
+     */
+    isConstrained?: boolean;
+    /**
+     * The host element that uses this controller.
+     *
+     * @private
+     * @type {ReactiveElement & { elements: OpenableElement[] }}
+     */
+    private host;
+    /**
+     * Options for configuring the overlay placement.
+     *
+     * @private
+     * @type {OverlayOptionsV1}
+     */
+    private options;
+    /**
+     * A WeakMap to store the original placements of overlay elements.
+     *
+     * @private
+     * @type {WeakMap<HTMLElement, Placement>}
+     */
+    private originalPlacements;
+    /**
+     * The target element for the overlay.
+     *
+     * @private
+     * @type {HTMLElement}
+     */
+    private target;
+    /**
+     * Creates an instance of the PlacementController.
+     *
+     * @param {ReactiveElement & { elements: OpenableElement[] }} host - The host element that uses this controller.
+     */
+    constructor(host: ReactiveElement & {
+        elements: OpenableElement[];
+    });
+    /**
+     * Places the overlay relative to the target element.
+     *
+     * This method sets up the necessary configurations and event listeners to manage the
+     * positioning and constraints of the overlay element.
+     *
+     * @param {HTMLElement} [target=this.target] - The target element for the overlay.
+     * @param {OverlayOptionsV1} [options=this.options] - The options for configuring the overlay placement.
+     * @returns {Promise<void>} A promise that resolves when the overlay has been placed.
+     */
+    placeOverlay(target?: HTMLElement, options?: OverlayOptionsV1): Promise<void>;
+    /**
+     * Flag to allow or disallow placement updates.
+     *
+     * @type {boolean}
+     */
+    allowPlacementUpdate: boolean;
+    /**
+     * Closes the overlay if an ancestor element is updated.
+     *
+     * This method checks if placement updates are allowed and if the overlay type is not 'modal'.
+     * If these conditions are met and a cleanup function is defined, it dispatches a 'close' event
+     * on the target element to close the overlay.
+     */
+    closeForAncestorUpdate: () => void;
+    /**
+     * Updates the placement of the overlay.
+     *
+     * This method calls the computePlacement method to recalculate the overlay's position.
+     *
+     * @private
+     */
+    private updatePlacement;
+    /**
+     * Computes the placement of the overlay relative to the target element.
+     *
+     * This method calculates the necessary positioning and constraints for the overlay element
+     * using various middleware functions. It updates the overlay's style and attributes based
+     * on the computed position.
+     *
+     * @returns {Promise<void>} A promise that resolves when the placement has been computed.
+     */
+    computePlacement(): Promise<void>;
+    /**
+     * Clears the overlay's position styles.
+     *
+     * This method removes the max-height and max-width styles from the target element,
+     * and resets the initial height and constrained state of the overlay.
+     */
+    clearOverlayPosition(): void;
+    /**
+     * Resets the overlay's position.
+     *
+     * This method clears the overlay's position, forces a reflow, and recomputes the placement.
+     */
+    resetOverlayPosition: () => void;
+    /**
+     * Lifecycle method called when the host element is connected to the DOM.
+     *
+     * This method sets up an event listener to reset the overlay's position when the 'sp-update-overlays' event is dispatched.
+     */
+    hostConnected(): void;
+    /**
+     * Lifecycle method called when the host element is updated.
+     *
+     * This method cleans up resources if the overlay is not open.
+     */
+    hostUpdated(): void;
+    /**
+     * Lifecycle method called when the host element is disconnected from the DOM.
+     *
+     * This method removes the event listener and cleans up resources.
+     */
+    hostDisconnected(): void;
+}
+export {};

package/src/PlacementController.dev.js

@@ -0,0 +1,287 @@
+"use strict";
+import {
+  arrow,
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  shift,
+  size
+} from "@floating-ui/dom";
+function roundByDPR(num) {
+  if (typeof num === "undefined") return 0;
+  const dpr = window.devicePixelRatio || 1;
+  return Math.round(num * dpr) / dpr;
+}
+const REQUIRED_DISTANCE_TO_EDGE = 8;
+const MIN_OVERLAY_HEIGHT = 100;
+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];
+};
+export const placementUpdatedSymbol = Symbol("placement updated");
+export class PlacementController {
+  /**
+   * Creates an instance of the PlacementController.
+   *
+   * @param {ReactiveElement & { elements: OpenableElement[] }} host - The host element that uses this controller.
+   */
+  constructor(host) {
+    /**
+     * A WeakMap to store the original placements of overlay elements.
+     *
+     * @private
+     * @type {WeakMap<HTMLElement, Placement>}
+     */
+    this.originalPlacements = /* @__PURE__ */ new WeakMap();
+    /**
+     * Flag to allow or disallow placement updates.
+     *
+     * @type {boolean}
+     */
+    this.allowPlacementUpdate = false;
+    /**
+     * Closes the overlay if an ancestor element is updated.
+     *
+     * This method checks if placement updates are allowed and if the overlay type is not 'modal'.
+     * If these conditions are met and a cleanup function is defined, it dispatches a 'close' event
+     * on the target element to close the overlay.
+     */
+    this.closeForAncestorUpdate = () => {
+      if (!this.allowPlacementUpdate && this.options.type !== "modal" && this.cleanup) {
+        this.target.dispatchEvent(new Event("close", { bubbles: true }));
+      }
+      this.allowPlacementUpdate = false;
+    };
+    /**
+     * Updates the placement of the overlay.
+     *
+     * This method calls the computePlacement method to recalculate the overlay's position.
+     *
+     * @private
+     */
+    this.updatePlacement = () => {
+      this.computePlacement();
+    };
+    /**
+     * Resets the overlay's position.
+     *
+     * This method clears the overlay's position, forces a reflow, and recomputes the placement.
+     */
+    this.resetOverlayPosition = () => {
+      if (!this.target || !this.options) return;
+      this.clearOverlayPosition();
+      this.host.offsetHeight;
+      this.computePlacement();
+    };
+    this.host = host;
+    this.host.addController(this);
+  }
+  /**
+   * Places the overlay relative to the target element.
+   *
+   * This method sets up the necessary configurations and event listeners to manage the
+   * positioning and constraints of the overlay element.
+   *
+   * @param {HTMLElement} [target=this.target] - The target element for the overlay.
+   * @param {OverlayOptionsV1} [options=this.options] - The options for configuring the overlay placement.
+   * @returns {Promise<void>} A promise that resolves when the overlay has been placed.
+   */
+  async placeOverlay(target = this.target, options = this.options) {
+    this.target = target;
+    this.options = options;
+    if (!target || !options) return;
+    const cleanupAncestorResize = autoUpdate(
+      options.trigger,
+      target,
+      this.closeForAncestorUpdate,
+      {
+        ancestorResize: false,
+        elementResize: false,
+        layoutShift: false
+      }
+    );
+    const cleanupElementResize = autoUpdate(
+      options.trigger,
+      target,
+      this.updatePlacement,
+      {
+        ancestorScroll: false
+      }
+    );
+    this.cleanup = () => {
+      var _a;
+      (_a = this.host.elements) == null ? void 0 : _a.forEach((element) => {
+        element.addEventListener(
+          "sp-closed",
+          () => {
+            const placement = this.originalPlacements.get(element);
+            if (placement) {
+              element.setAttribute("placement", placement);
+            }
+            this.originalPlacements.delete(element);
+          },
+          { once: true }
+        );
+      });
+      cleanupAncestorResize();
+      cleanupElementResize();
+    };
+  }
+  /**
+   * Computes the placement of the overlay relative to the target element.
+   *
+   * This method calculates the necessary positioning and constraints for the overlay element
+   * using various middleware functions. It updates the overlay's style and attributes based
+   * on the computed position.
+   *
+   * @returns {Promise<void>} A promise that resolves when the placement has been computed.
+   */
+  async computePlacement() {
+    var _a, _b;
+    const { options, target } = this;
+    await (document.fonts ? document.fonts.ready : Promise.resolve());
+    const flipMiddleware = !(options.trigger instanceof HTMLElement) ? flip({
+      padding: REQUIRED_DISTANCE_TO_EDGE,
+      fallbackPlacements: getFallbackPlacements(options.placement)
+    }) : flip();
+    const [mainAxis = 0, crossAxis = 0] = Array.isArray(options == null ? void 0 : options.offset) ? options.offset : [options.offset, 0];
+    const tipElement = (_a = this.host.elements.find(
+      (el) => el.tipElement
+    )) == null ? void 0 : _a.tipElement;
+    const middleware = [
+      offset({
+        mainAxis,
+        crossAxis
+      }),
+      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 ? actualHeight : this.initialHeight || actualHeight;
+          this.isConstrained = actualHeight < this.initialHeight || maxHeight <= actualHeight;
+          const appliedHeight = this.isConstrained ? `${maxHeight}px` : "";
+          Object.assign(target.style, {
+            maxWidth: `${Math.floor(availableWidth)}px`,
+            maxHeight: appliedHeight
+          });
+        }
+      }),
+      ...tipElement ? [
+        arrow({
+          element: tipElement,
+          padding: options.tipPadding || REQUIRED_DISTANCE_TO_EDGE
+        })
+      ] : []
+    ];
+    const { x, y, placement, middlewareData } = await computePosition(
+      options.trigger,
+      target,
+      {
+        placement: options.placement,
+        middleware,
+        strategy: "fixed"
+      }
+    );
+    Object.assign(target.style, {
+      top: "0px",
+      left: "0px",
+      translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`
+    });
+    target.setAttribute("actual-placement", placement);
+    (_b = this.host.elements) == null ? void 0 : _b.forEach((element) => {
+      if (!this.originalPlacements.has(element)) {
+        this.originalPlacements.set(
+          element,
+          element.getAttribute("placement")
+        );
+      }
+      element.setAttribute("placement", placement);
+    });
+    if (tipElement && middlewareData.arrow) {
+      const { x: arrowX, y: arrowY } = middlewareData.arrow;
+      Object.assign(tipElement.style, {
+        top: placement.startsWith("right") || placement.startsWith("left") ? "0px" : "",
+        left: placement.startsWith("bottom") || placement.startsWith("top") ? "0px" : "",
+        translate: `${roundByDPR(arrowX)}px ${roundByDPR(arrowY)}px`
+      });
+    }
+  }
+  /**
+   * Clears the overlay's position styles.
+   *
+   * This method removes the max-height and max-width styles from the target element,
+   * and resets the initial height and constrained state of the overlay.
+   */
+  clearOverlayPosition() {
+    if (!this.target) {
+      return;
+    }
+    this.target.style.removeProperty("max-height");
+    this.target.style.removeProperty("max-width");
+    this.initialHeight = void 0;
+    this.isConstrained = false;
+  }
+  /**
+   * Lifecycle method called when the host element is connected to the DOM.
+   *
+   * This method sets up an event listener to reset the overlay's position when the 'sp-update-overlays' event is dispatched.
+   */
+  hostConnected() {
+    document.addEventListener(
+      "sp-update-overlays",
+      this.resetOverlayPosition
+    );
+  }
+  /**
+   * Lifecycle method called when the host element is updated.
+   *
+   * This method cleans up resources if the overlay is not open.
+   */
+  hostUpdated() {
+    var _a;
+    if (!this.host.open) {
+      (_a = this.cleanup) == null ? void 0 : _a.call(this);
+      this.cleanup = void 0;
+    }
+  }
+  /**
+   * Lifecycle method called when the host element is disconnected from the DOM.
+   *
+   * This method removes the event listener and cleans up resources.
+   */
+  hostDisconnected() {
+    var _a;
+    (_a = this.cleanup) == null ? void 0 : _a.call(this);
+    this.cleanup = void 0;
+    document.removeEventListener(
+      "sp-update-overlays",
+      this.resetOverlayPosition
+    );
+  }
+}
+//# sourceMappingURL=PlacementController.dev.js.map

package/src/PlacementController.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["PlacementController.ts"],
+  "sourcesContent": ["/*\nCopyright 2022 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 type {\n    ReactiveController,\n    ReactiveElement,\n} from '@spectrum-web-components/base';\nimport {\n    arrow,\n    autoUpdate,\n    computePosition,\n    flip,\n    offset,\n    Placement,\n    shift,\n    size,\n} from '@floating-ui/dom';\nimport type { VirtualTrigger } from './VirtualTrigger.dev.js'\nimport type { OpenableElement } from './overlay-types.dev.js'\nimport type { Overlay } from './Overlay.dev.js'\n\ntype OverlayOptionsV1 = {\n    abortPromise?: Promise<boolean>;\n    delayed?: boolean;\n    offset?: number | [number, number]; // supporting multi-axis\n    placement: Placement;\n    notImmediatelyClosable?: boolean; // rename or place behind other API options\n    receivesFocus?: 'auto';\n    root?: HTMLElement;\n    tipPadding?: number;\n    trigger: HTMLElement | VirtualTrigger;\n    type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';\n};\n\n/**\n * Rounds a number by the device pixel ratio (DPR).\n *\n * @param {number} [num] - The number to round.\n * @returns {number} The rounded number.\n */\nfunction roundByDPR(num?: number): number {\n    if (typeof num === 'undefined') return 0;\n    const dpr = window.devicePixelRatio || 1;\n    return Math.round(num * dpr) / dpr;\n}\n\n// Minimum distance required between the overlay and the edge of the container.\n// See: https://spectrum.adobe.com/page/popover/#Container-padding\nconst REQUIRED_DISTANCE_TO_EDGE = 8;\n// Minimum height for the overlay.\n// See: https://github.com/adobe/spectrum-web-components/issues/910\nconst MIN_OVERLAY_HEIGHT = 100;\n\n/**\n * Gets fallback placements for the overlay based on the initial placement.\n *\n * @param {Placement} placement - The initial placement of the overlay.\n * @returns {Placement[]} An array of fallback placements.\n */\nconst getFallbackPlacements = (placement: Placement): Placement[] => {\n    const fallbacks: Record<Placement, Placement[]> = {\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 * Symbol used to indicate that the placement has been updated.\n */\nexport const placementUpdatedSymbol = Symbol('placement updated');\n\n/**\n * Controller for managing the placement of an overlay.\n *\n * This class implements the ReactiveController interface and provides methods\n * for managing the positioning and constraints of an overlay element.\n */\nexport class PlacementController implements ReactiveController {\n    /**\n     * Function to clean up resources when the controller is no longer needed.\n     *\n     * @private\n     */\n    private cleanup?: () => void;\n\n    /**\n     * Initial height of the overlay.\n     *\n     * @type {number}\n     */\n    initialHeight?: number;\n\n    /**\n     * Indicates whether the overlay is constrained by available space.\n     *\n     * @type {boolean}\n     */\n    isConstrained?: boolean;\n\n    /**\n     * The host element that uses this controller.\n     *\n     * @private\n     * @type {ReactiveElement & { elements: OpenableElement[] }}\n     */\n    private host!: ReactiveElement & { elements: OpenableElement[] };\n\n    /**\n     * Options for configuring the overlay placement.\n     *\n     * @private\n     * @type {OverlayOptionsV1}\n     */\n    private options!: OverlayOptionsV1;\n\n    /**\n     * A WeakMap to store the original placements of overlay elements.\n     *\n     * @private\n     * @type {WeakMap<HTMLElement, Placement>}\n     */\n    private originalPlacements = new WeakMap<HTMLElement, Placement>();\n\n    /**\n     * The target element for the overlay.\n     *\n     * @private\n     * @type {HTMLElement}\n     */\n    private target!: HTMLElement;\n\n    /**\n     * Creates an instance of the PlacementController.\n     *\n     * @param {ReactiveElement & { elements: OpenableElement[] }} host - The host element that uses this controller.\n     */\n    constructor(host: ReactiveElement & { elements: OpenableElement[] }) {\n        this.host = host;\n        // Add the controller after the MutationObserver has been created in preparation\n        // for the `hostConnected`/`hostDisconnected` callbacks to be run.\n        this.host.addController(this);\n    }\n\n    /**\n     * Places the overlay relative to the target element.\n     *\n     * This method sets up the necessary configurations and event listeners to manage the\n     * positioning and constraints of the overlay element.\n     *\n     * @param {HTMLElement} [target=this.target] - The target element for the overlay.\n     * @param {OverlayOptionsV1} [options=this.options] - The options for configuring the overlay placement.\n     * @returns {Promise<void>} A promise that resolves when the overlay has been placed.\n     */\n    public async placeOverlay(\n        target: HTMLElement = this.target,\n        options: OverlayOptionsV1 = this.options\n    ): Promise<void> {\n        // Set the target and options for the overlay.\n        this.target = target;\n        this.options = options;\n        if (!target || !options) return;\n\n        // Set up auto-update for ancestor resize events.\n        const cleanupAncestorResize = autoUpdate(\n            options.trigger,\n            target,\n            this.closeForAncestorUpdate,\n            {\n                ancestorResize: false,\n                elementResize: false,\n                layoutShift: false,\n            }\n        );\n\n        // Set up auto-update for element resize events.\n        const cleanupElementResize = autoUpdate(\n            options.trigger,\n            target,\n            this.updatePlacement,\n            {\n                ancestorScroll: false,\n            }\n        );\n\n        // Define the cleanup function to remove event listeners and reset placements.\n        this.cleanup = () => {\n            this.host.elements?.forEach((element) => {\n                element.addEventListener(\n                    'sp-closed',\n                    () => {\n                        const placement = this.originalPlacements.get(element);\n\n                        if (placement) {\n                            element.setAttribute('placement', placement);\n                        }\n\n                        this.originalPlacements.delete(element);\n                    },\n                    { once: true }\n                );\n            });\n            cleanupAncestorResize();\n            cleanupElementResize();\n        };\n    }\n\n    /**\n     * Flag to allow or disallow placement updates.\n     *\n     * @type {boolean}\n     */\n    public allowPlacementUpdate = false;\n\n    /**\n     * Closes the overlay if an ancestor element is updated.\n     *\n     * This method checks if placement updates are allowed and if the overlay type is not 'modal'.\n     * If these conditions are met and a cleanup function is defined, it dispatches a 'close' event\n     * on the target element to close the overlay.\n     */\n    closeForAncestorUpdate = (): void => {\n        if (\n            !this.allowPlacementUpdate &&\n            this.options.type !== 'modal' &&\n            this.cleanup\n        ) {\n            // Dispatch a 'close' event to close the overlay.\n            this.target.dispatchEvent(new Event('close', { bubbles: true }));\n        }\n\n        // Reset the flag to disallow placement updates.\n        this.allowPlacementUpdate = false;\n    };\n\n    /**\n     * Updates the placement of the overlay.\n     *\n     * This method calls the computePlacement method to recalculate the overlay's position.\n     *\n     * @private\n     */\n    private updatePlacement = (): void => {\n        this.computePlacement();\n    };\n\n    /**\n     * Computes the placement of the overlay relative to the target element.\n     *\n     * This method calculates the necessary positioning and constraints for the overlay element\n     * using various middleware functions. It updates the overlay's style and attributes based\n     * on the computed position.\n     *\n     * @returns {Promise<void>} A promise that resolves when the placement has been computed.\n     */\n    async computePlacement(): Promise<void> {\n        const { options, target } = this;\n\n        // Wait for document fonts to be ready before computing placement.\n        await (document.fonts ? document.fonts.ready : Promise.resolve());\n\n        // Determine the flip middleware based on the type of trigger element.\n        const flipMiddleware = !(options.trigger instanceof HTMLElement)\n            ? flip({\n                  padding: REQUIRED_DISTANCE_TO_EDGE,\n                  fallbackPlacements: getFallbackPlacements(options.placement),\n              })\n            : flip();\n\n        // Extract main axis and cross axis offsets from options.\n        const [mainAxis = 0, crossAxis = 0] = Array.isArray(options?.offset)\n            ? options.offset\n            : [options.offset, 0];\n\n        // Find the tip element within the host elements.\n        const tipElement = this.host.elements.find(\n            (el) => el.tipElement\n        )?.tipElement;\n\n        // Define middleware functions for positioning and constraints.\n        const middleware = [\n            offset({\n                mainAxis,\n                crossAxis,\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 = !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(target.style, {\n                        maxWidth: `${Math.floor(availableWidth)}px`,\n                        maxHeight: appliedHeight,\n                    });\n                },\n            }),\n            ...(tipElement\n                ? [\n                      arrow({\n                          element: tipElement,\n                          padding:\n                              options.tipPadding || REQUIRED_DISTANCE_TO_EDGE,\n                      }),\n                  ]\n                : []),\n        ];\n\n        // Compute the position of the overlay using the defined middleware.\n        const { x, y, placement, middlewareData } = await computePosition(\n            options.trigger,\n            target,\n            {\n                placement: options.placement,\n                middleware,\n                strategy: 'fixed',\n            }\n        );\n\n        // Update the overlay's style with the computed position.\n        Object.assign(target.style, {\n            top: '0px',\n            left: '0px',\n            translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`,\n        });\n\n        // Set the 'actual-placement' attribute on the target element.\n        target.setAttribute('actual-placement', placement);\n\n        // Update the placement attribute for each host element.\n        this.host.elements?.forEach((element) => {\n            if (!this.originalPlacements.has(element)) {\n                this.originalPlacements.set(\n                    element,\n                    element.getAttribute('placement') as Placement\n                );\n            }\n            element.setAttribute('placement', placement);\n        });\n\n        // Update the tip element's style with the computed arrow position.\n        if (tipElement && middlewareData.arrow) {\n            const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n            Object.assign(tipElement.style, {\n                top:\n                    placement.startsWith('right') ||\n                    placement.startsWith('left')\n                        ? '0px'\n                        : '',\n                left:\n                    placement.startsWith('bottom') ||\n                    placement.startsWith('top')\n                        ? '0px'\n                        : '',\n                translate: `${roundByDPR(arrowX)}px ${roundByDPR(arrowY)}px`,\n            });\n        }\n    }\n\n    /**\n     * Clears the overlay's position styles.\n     *\n     * This method removes the max-height and max-width styles from the target element,\n     * and resets the initial height and constrained state of the overlay.\n     */\n    public clearOverlayPosition(): void {\n        if (!this.target) {\n            return;\n        }\n        // Remove max-height and max-width styles from the target element.\n        this.target.style.removeProperty('max-height');\n        this.target.style.removeProperty('max-width');\n        // Reset the initial height and constrained state.\n        this.initialHeight = undefined;\n        this.isConstrained = false;\n    }\n\n    /**\n     * Resets the overlay's position.\n     *\n     * This method clears the overlay's position, forces a reflow, and recomputes the placement.\n     */\n    public resetOverlayPosition = (): void => {\n        if (!this.target || !this.options) return;\n        // Clear the overlay's position.\n        this.clearOverlayPosition();\n\n        // Force a reflow.\n        this.host.offsetHeight;\n        // Recompute the placement.\n        this.computePlacement();\n    };\n\n    /**\n     * Lifecycle method called when the host element is connected to the DOM.\n     *\n     * This method sets up an event listener to reset the overlay's position when the 'sp-update-overlays' event is dispatched.\n     */\n    hostConnected(): void {\n        document.addEventListener(\n            'sp-update-overlays',\n            this.resetOverlayPosition\n        );\n    }\n\n    /**\n     * Lifecycle method called when the host element is updated.\n     *\n     * This method cleans up resources if the overlay is not open.\n     */\n    hostUpdated(): void {\n        if (!(this.host as Overlay).open) {\n            // Clean up resources if the overlay is not open.\n            this.cleanup?.();\n            this.cleanup = undefined;\n        }\n    }\n\n    /**\n     * Lifecycle method called when the host element is disconnected from the DOM.\n     *\n     * This method removes the event listener and cleans up resources.\n     */\n    hostDisconnected(): void {\n        // Clean up resources.\n        this.cleanup?.();\n        this.cleanup = undefined;\n        // Remove the event listener.\n        document.removeEventListener(\n            'sp-update-overlays',\n            this.resetOverlayPosition\n        );\n    }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/src/PlacementController.js

@@ -0,0 +1,2 @@
+"use strict";import{arrow as w,autoUpdate as v,computePosition as H,flip as y,offset as R,shift as A,size as M}from"@floating-ui/dom";function c(o){if(typeof o=="undefined")return 0;const t=window.devicePixelRatio||1;return Math.round(o*t)/t}const p=8,C=100,T=o=>{var e;return(e={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"]}[o])!=null?e:[o]};export const placementUpdatedSymbol=Symbol("placement updated");export class PlacementController{constructor(t){this.originalPlacements=new WeakMap;this.allowPlacementUpdate=!1;this.closeForAncestorUpdate=()=>{!this.allowPlacementUpdate&&this.options.type!=="modal"&&this.cleanup&&this.target.dispatchEvent(new Event("close",{bubbles:!0})),this.allowPlacementUpdate=!1};this.updatePlacement=()=>{this.computePlacement()};this.resetOverlayPosition=()=>{!this.target||!this.options||(this.clearOverlayPosition(),this.host.offsetHeight,this.computePlacement())};this.host=t,this.host.addController(this)}async placeOverlay(t=this.target,e=this.options){if(this.target=t,this.options=e,!t||!e)return;const m=v(e.trigger,t,this.closeForAncestorUpdate,{ancestorResize:!1,elementResize:!1,layoutShift:!1}),h=v(e.trigger,t,this.updatePlacement,{ancestorScroll:!1});this.cleanup=()=>{var n;(n=this.host.elements)==null||n.forEach(a=>{a.addEventListener("sp-closed",()=>{const r=this.originalPlacements.get(a);r&&a.setAttribute("placement",r),this.originalPlacements.delete(a)},{once:!0})}),m(),h()}}async computePlacement(){var g,u;const{options:t,target:e}=this;await(document.fonts?document.fonts.ready:Promise.resolve());const m=t.trigger instanceof HTMLElement?y():y({padding:p,fallbackPlacements:T(t.placement)}),[h=0,n=0]=Array.isArray(t==null?void 0:t.offset)?t.offset:[t.offset,0],a=(g=this.host.elements.find(i=>i.tipElement))==null?void 0:g.tipElement,r=[R({mainAxis:h,crossAxis:n}),A({padding:p}),m,M({padding:p,apply:({availableWidth:i,availableHeight:d,rects:{floating:x}})=>{const b=Math.max(C,Math.floor(d)),l=x.height;this.initialHeight=this.isConstrained&&this.initialHeight||l,this.isConstrained=l<this.initialHeight||b<=l;const O=this.isConstrained?`${b}px`:"";Object.assign(e.style,{maxWidth:`${Math.floor(i)}px`,maxHeight:O})}}),...a?[w({element:a,padding:t.tipPadding||p})]:[]],{x:P,y:E,placement:s,middlewareData:f}=await H(t.trigger,e,{placement:t.placement,middleware:r,strategy:"fixed"});if(Object.assign(e.style,{top:"0px",left:"0px",translate:`${c(P)}px ${c(E)}px`}),e.setAttribute("actual-placement",s),(u=this.host.elements)==null||u.forEach(i=>{this.originalPlacements.has(i)||this.originalPlacements.set(i,i.getAttribute("placement")),i.setAttribute("placement",s)}),a&&f.arrow){const{x:i,y:d}=f.arrow;Object.assign(a.style,{top:s.startsWith("right")||s.startsWith("left")?"0px":"",left:s.startsWith("bottom")||s.startsWith("top")?"0px":"",translate:`${c(i)}px ${c(d)}px`})}}clearOverlayPosition(){this.target&&(this.target.style.removeProperty("max-height"),this.target.style.removeProperty("max-width"),this.initialHeight=void 0,this.isConstrained=!1)}hostConnected(){document.addEventListener("sp-update-overlays",this.resetOverlayPosition)}hostUpdated(){var t;this.host.open||((t=this.cleanup)==null||t.call(this),this.cleanup=void 0)}hostDisconnected(){var t;(t=this.cleanup)==null||t.call(this),this.cleanup=void 0,document.removeEventListener("sp-update-overlays",this.resetOverlayPosition)}}
+//# sourceMappingURL=PlacementController.js.map

package/src/PlacementController.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["PlacementController.ts"],
+  "sourcesContent": ["/*\nCopyright 2022 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 type {\n    ReactiveController,\n    ReactiveElement,\n} from '@spectrum-web-components/base';\nimport {\n    arrow,\n    autoUpdate,\n    computePosition,\n    flip,\n    offset,\n    Placement,\n    shift,\n    size,\n} from '@floating-ui/dom';\nimport type { VirtualTrigger } from './VirtualTrigger.js';\nimport type { OpenableElement } from './overlay-types.js';\nimport type { Overlay } from './Overlay.js';\n\ntype OverlayOptionsV1 = {\n    abortPromise?: Promise<boolean>;\n    delayed?: boolean;\n    offset?: number | [number, number]; // supporting multi-axis\n    placement: Placement;\n    notImmediatelyClosable?: boolean; // rename or place behind other API options\n    receivesFocus?: 'auto';\n    root?: HTMLElement;\n    tipPadding?: number;\n    trigger: HTMLElement | VirtualTrigger;\n    type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';\n};\n\n/**\n * Rounds a number by the device pixel ratio (DPR).\n *\n * @param {number} [num] - The number to round.\n * @returns {number} The rounded number.\n */\nfunction roundByDPR(num?: number): number {\n    if (typeof num === 'undefined') return 0;\n    const dpr = window.devicePixelRatio || 1;\n    return Math.round(num * dpr) / dpr;\n}\n\n// Minimum distance required between the overlay and the edge of the container.\n// See: https://spectrum.adobe.com/page/popover/#Container-padding\nconst REQUIRED_DISTANCE_TO_EDGE = 8;\n// Minimum height for the overlay.\n// See: https://github.com/adobe/spectrum-web-components/issues/910\nconst MIN_OVERLAY_HEIGHT = 100;\n\n/**\n * Gets fallback placements for the overlay based on the initial placement.\n *\n * @param {Placement} placement - The initial placement of the overlay.\n * @returns {Placement[]} An array of fallback placements.\n */\nconst getFallbackPlacements = (placement: Placement): Placement[] => {\n    const fallbacks: Record<Placement, Placement[]> = {\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 * Symbol used to indicate that the placement has been updated.\n */\nexport const placementUpdatedSymbol = Symbol('placement updated');\n\n/**\n * Controller for managing the placement of an overlay.\n *\n * This class implements the ReactiveController interface and provides methods\n * for managing the positioning and constraints of an overlay element.\n */\nexport class PlacementController implements ReactiveController {\n    /**\n     * Function to clean up resources when the controller is no longer needed.\n     *\n     * @private\n     */\n    private cleanup?: () => void;\n\n    /**\n     * Initial height of the overlay.\n     *\n     * @type {number}\n     */\n    initialHeight?: number;\n\n    /**\n     * Indicates whether the overlay is constrained by available space.\n     *\n     * @type {boolean}\n     */\n    isConstrained?: boolean;\n\n    /**\n     * The host element that uses this controller.\n     *\n     * @private\n     * @type {ReactiveElement & { elements: OpenableElement[] }}\n     */\n    private host!: ReactiveElement & { elements: OpenableElement[] };\n\n    /**\n     * Options for configuring the overlay placement.\n     *\n     * @private\n     * @type {OverlayOptionsV1}\n     */\n    private options!: OverlayOptionsV1;\n\n    /**\n     * A WeakMap to store the original placements of overlay elements.\n     *\n     * @private\n     * @type {WeakMap<HTMLElement, Placement>}\n     */\n    private originalPlacements = new WeakMap<HTMLElement, Placement>();\n\n    /**\n     * The target element for the overlay.\n     *\n     * @private\n     * @type {HTMLElement}\n     */\n    private target!: HTMLElement;\n\n    /**\n     * Creates an instance of the PlacementController.\n     *\n     * @param {ReactiveElement & { elements: OpenableElement[] }} host - The host element that uses this controller.\n     */\n    constructor(host: ReactiveElement & { elements: OpenableElement[] }) {\n        this.host = host;\n        // Add the controller after the MutationObserver has been created in preparation\n        // for the `hostConnected`/`hostDisconnected` callbacks to be run.\n        this.host.addController(this);\n    }\n\n    /**\n     * Places the overlay relative to the target element.\n     *\n     * This method sets up the necessary configurations and event listeners to manage the\n     * positioning and constraints of the overlay element.\n     *\n     * @param {HTMLElement} [target=this.target] - The target element for the overlay.\n     * @param {OverlayOptionsV1} [options=this.options] - The options for configuring the overlay placement.\n     * @returns {Promise<void>} A promise that resolves when the overlay has been placed.\n     */\n    public async placeOverlay(\n        target: HTMLElement = this.target,\n        options: OverlayOptionsV1 = this.options\n    ): Promise<void> {\n        // Set the target and options for the overlay.\n        this.target = target;\n        this.options = options;\n        if (!target || !options) return;\n\n        // Set up auto-update for ancestor resize events.\n        const cleanupAncestorResize = autoUpdate(\n            options.trigger,\n            target,\n            this.closeForAncestorUpdate,\n            {\n                ancestorResize: false,\n                elementResize: false,\n                layoutShift: false,\n            }\n        );\n\n        // Set up auto-update for element resize events.\n        const cleanupElementResize = autoUpdate(\n            options.trigger,\n            target,\n            this.updatePlacement,\n            {\n                ancestorScroll: false,\n            }\n        );\n\n        // Define the cleanup function to remove event listeners and reset placements.\n        this.cleanup = () => {\n            this.host.elements?.forEach((element) => {\n                element.addEventListener(\n                    'sp-closed',\n                    () => {\n                        const placement = this.originalPlacements.get(element);\n\n                        if (placement) {\n                            element.setAttribute('placement', placement);\n                        }\n\n                        this.originalPlacements.delete(element);\n                    },\n                    { once: true }\n                );\n            });\n            cleanupAncestorResize();\n            cleanupElementResize();\n        };\n    }\n\n    /**\n     * Flag to allow or disallow placement updates.\n     *\n     * @type {boolean}\n     */\n    public allowPlacementUpdate = false;\n\n    /**\n     * Closes the overlay if an ancestor element is updated.\n     *\n     * This method checks if placement updates are allowed and if the overlay type is not 'modal'.\n     * If these conditions are met and a cleanup function is defined, it dispatches a 'close' event\n     * on the target element to close the overlay.\n     */\n    closeForAncestorUpdate = (): void => {\n        if (\n            !this.allowPlacementUpdate &&\n            this.options.type !== 'modal' &&\n            this.cleanup\n        ) {\n            // Dispatch a 'close' event to close the overlay.\n            this.target.dispatchEvent(new Event('close', { bubbles: true }));\n        }\n\n        // Reset the flag to disallow placement updates.\n        this.allowPlacementUpdate = false;\n    };\n\n    /**\n     * Updates the placement of the overlay.\n     *\n     * This method calls the computePlacement method to recalculate the overlay's position.\n     *\n     * @private\n     */\n    private updatePlacement = (): void => {\n        this.computePlacement();\n    };\n\n    /**\n     * Computes the placement of the overlay relative to the target element.\n     *\n     * This method calculates the necessary positioning and constraints for the overlay element\n     * using various middleware functions. It updates the overlay's style and attributes based\n     * on the computed position.\n     *\n     * @returns {Promise<void>} A promise that resolves when the placement has been computed.\n     */\n    async computePlacement(): Promise<void> {\n        const { options, target } = this;\n\n        // Wait for document fonts to be ready before computing placement.\n        await (document.fonts ? document.fonts.ready : Promise.resolve());\n\n        // Determine the flip middleware based on the type of trigger element.\n        const flipMiddleware = !(options.trigger instanceof HTMLElement)\n            ? flip({\n                  padding: REQUIRED_DISTANCE_TO_EDGE,\n                  fallbackPlacements: getFallbackPlacements(options.placement),\n              })\n            : flip();\n\n        // Extract main axis and cross axis offsets from options.\n        const [mainAxis = 0, crossAxis = 0] = Array.isArray(options?.offset)\n            ? options.offset\n            : [options.offset, 0];\n\n        // Find the tip element within the host elements.\n        const tipElement = this.host.elements.find(\n            (el) => el.tipElement\n        )?.tipElement;\n\n        // Define middleware functions for positioning and constraints.\n        const middleware = [\n            offset({\n                mainAxis,\n                crossAxis,\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 = !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(target.style, {\n                        maxWidth: `${Math.floor(availableWidth)}px`,\n                        maxHeight: appliedHeight,\n                    });\n                },\n            }),\n            ...(tipElement\n                ? [\n                      arrow({\n                          element: tipElement,\n                          padding:\n                              options.tipPadding || REQUIRED_DISTANCE_TO_EDGE,\n                      }),\n                  ]\n                : []),\n        ];\n\n        // Compute the position of the overlay using the defined middleware.\n        const { x, y, placement, middlewareData } = await computePosition(\n            options.trigger,\n            target,\n            {\n                placement: options.placement,\n                middleware,\n                strategy: 'fixed',\n            }\n        );\n\n        // Update the overlay's style with the computed position.\n        Object.assign(target.style, {\n            top: '0px',\n            left: '0px',\n            translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`,\n        });\n\n        // Set the 'actual-placement' attribute on the target element.\n        target.setAttribute('actual-placement', placement);\n\n        // Update the placement attribute for each host element.\n        this.host.elements?.forEach((element) => {\n            if (!this.originalPlacements.has(element)) {\n                this.originalPlacements.set(\n                    element,\n                    element.getAttribute('placement') as Placement\n                );\n            }\n            element.setAttribute('placement', placement);\n        });\n\n        // Update the tip element's style with the computed arrow position.\n        if (tipElement && middlewareData.arrow) {\n            const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n            Object.assign(tipElement.style, {\n                top:\n                    placement.startsWith('right') ||\n                    placement.startsWith('left')\n                        ? '0px'\n                        : '',\n                left:\n                    placement.startsWith('bottom') ||\n                    placement.startsWith('top')\n                        ? '0px'\n                        : '',\n                translate: `${roundByDPR(arrowX)}px ${roundByDPR(arrowY)}px`,\n            });\n        }\n    }\n\n    /**\n     * Clears the overlay's position styles.\n     *\n     * This method removes the max-height and max-width styles from the target element,\n     * and resets the initial height and constrained state of the overlay.\n     */\n    public clearOverlayPosition(): void {\n        if (!this.target) {\n            return;\n        }\n        // Remove max-height and max-width styles from the target element.\n        this.target.style.removeProperty('max-height');\n        this.target.style.removeProperty('max-width');\n        // Reset the initial height and constrained state.\n        this.initialHeight = undefined;\n        this.isConstrained = false;\n    }\n\n    /**\n     * Resets the overlay's position.\n     *\n     * This method clears the overlay's position, forces a reflow, and recomputes the placement.\n     */\n    public resetOverlayPosition = (): void => {\n        if (!this.target || !this.options) return;\n        // Clear the overlay's position.\n        this.clearOverlayPosition();\n\n        // Force a reflow.\n        this.host.offsetHeight;\n        // Recompute the placement.\n        this.computePlacement();\n    };\n\n    /**\n     * Lifecycle method called when the host element is connected to the DOM.\n     *\n     * This method sets up an event listener to reset the overlay's position when the 'sp-update-overlays' event is dispatched.\n     */\n    hostConnected(): void {\n        document.addEventListener(\n            'sp-update-overlays',\n            this.resetOverlayPosition\n        );\n    }\n\n    /**\n     * Lifecycle method called when the host element is updated.\n     *\n     * This method cleans up resources if the overlay is not open.\n     */\n    hostUpdated(): void {\n        if (!(this.host as Overlay).open) {\n            // Clean up resources if the overlay is not open.\n            this.cleanup?.();\n            this.cleanup = undefined;\n        }\n    }\n\n    /**\n     * Lifecycle method called when the host element is disconnected from the DOM.\n     *\n     * This method removes the event listener and cleans up resources.\n     */\n    hostDisconnected(): void {\n        // Clean up resources.\n        this.cleanup?.();\n        this.cleanup = undefined;\n        // Remove the event listener.\n        document.removeEventListener(\n            'sp-update-overlays',\n            this.resetOverlayPosition\n        );\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["arrow", "autoUpdate", "computePosition", "flip", "offset", "shift", "size", "roundByDPR", "num", "dpr", "REQUIRED_DISTANCE_TO_EDGE", "MIN_OVERLAY_HEIGHT", "getFallbackPlacements", "placement", "_a", "host", "target", "options", "cleanupAncestorResize", "cleanupElementResize", "element", "_b", "flipMiddleware", "mainAxis", "crossAxis", "tipElement", "el", "middleware", "availableWidth", "availableHeight", "floating", "maxHeight", "actualHeight", "appliedHeight", "x", "y", "middlewareData", "arrowX", "arrowY"]
+}

package/src/VirtualTrigger.d.ts

@@ -0,0 +1,7 @@
+export declare class VirtualTrigger {
+    private x;
+    private y;
+    constructor(x: number, y: number);
+    updateBoundingClientRect(x: number, y: number): void;
+    getBoundingClientRect(): DOMRect;
+}

package/src/VirtualTrigger.dev.js

@@ -0,0 +1,32 @@
+"use strict";
+import { AbstractOverlay } from "./AbstractOverlay.dev.js";
+export class VirtualTrigger {
+  constructor(x, y) {
+    this.x = 0;
+    this.y = 0;
+    this.x = x;
+    this.y = y;
+  }
+  updateBoundingClientRect(x, y) {
+    this.x = x;
+    this.y = y;
+    AbstractOverlay.update();
+  }
+  getBoundingClientRect() {
+    return {
+      width: 0,
+      height: 0,
+      top: this.y,
+      right: this.x,
+      y: this.y,
+      x: this.x,
+      bottom: this.y,
+      left: this.x,
+      /* c8 ignore next 3 */
+      toJSON() {
+        return;
+      }
+    };
+  }
+}
+//# sourceMappingURL=VirtualTrigger.dev.js.map