@spectrum-web-components/overlay 0.15.0 → 0.15.2

package/active-overlay.d.ts

@@ -0,0 +1,6 @@
+import { ActiveOverlay } from './src/ActiveOverlay.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'active-overlay': ActiveOverlay;
+    }
+}

package/active-overlay.js

@@ -0,0 +1,14 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { ActiveOverlay } from './src/ActiveOverlay.js';
+customElements.define('active-overlay', ActiveOverlay);
+//# sourceMappingURL=active-overlay.js.map

package/active-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"active-overlay.js","sourceRoot":"","sources":["active-overlay.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEvD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC","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*/\nimport { ActiveOverlay } from './src/ActiveOverlay.js';\n\ncustomElements.define('active-overlay', ActiveOverlay);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'active-overlay': ActiveOverlay;\n    }\n}\n"]}

package/custom-elements.json

@@ -32,6 +32,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "sync/overlay-trigger.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/ActiveOverlay.ts",
@@ -2059,12 +2065,6 @@
           }
         }
       ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "sync/overlay-trigger.ts",
-      "declarations": [],
-      "exports": []
     }
   ]
 }

package/overlay-trigger.d.ts

@@ -0,0 +1,6 @@
+import { OverlayTrigger } from './src/OverlayTrigger.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'overlay-trigger': OverlayTrigger;
+    }
+}

package/overlay-trigger.js

@@ -0,0 +1,14 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { OverlayTrigger } from './src/OverlayTrigger.js';
+customElements.define('overlay-trigger', OverlayTrigger);
+//# sourceMappingURL=overlay-trigger.js.map

package/overlay-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-trigger.js","sourceRoot":"","sources":["overlay-trigger.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC","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*/\nimport { OverlayTrigger } from './src/OverlayTrigger.js';\n\ncustomElements.define('overlay-trigger', OverlayTrigger);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'overlay-trigger': OverlayTrigger;\n    }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/overlay",
-    "version": "0.15.0",
+    "version": "0.15.2",
     "publishConfig": {
         "access": "public"
     },
@@ -49,10 +49,10 @@
     ],
     "dependencies": {
         "@floating-ui/dom": "^0.2.0",
-        "@spectrum-web-components/action-button": "^0.8.0",
-        "@spectrum-web-components/base": "^0.5.3",
-        "@spectrum-web-components/shared": "^0.13.5",
-        "@spectrum-web-components/theme": "^0.10.0",
+        "@spectrum-web-components/action-button": "^0.8.1",
+        "@spectrum-web-components/base": "^0.5.4",
+        "@spectrum-web-components/shared": "^0.13.6",
+        "@spectrum-web-components/theme": "^0.10.1",
         "tslib": "^2.0.0"
     },
     "types": "./src/index.d.ts",
@@ -63,5 +63,5 @@
         "./sync/overlay-trigger.js",
         "./stories/overlay-story-components.js"
     ],
-    "gitHead": "57aba8030b6af96af4015a0aa830e342a17dc219"
+    "gitHead": "caf12727e7f91dcf961e1fadacc727eea9ece27b"
 }

package/src/ActiveOverlay.d.ts

@@ -0,0 +1,77 @@
+import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
+import type { Color, Scale } from '@spectrum-web-components/theme/src/Theme.js';
+import { OverlayOpenDetail, Placement, TriggerInteractions } from './overlay-types.js';
+import type { VirtualTrigger } from './VirtualTrigger.js';
+export interface PositionResult {
+    arrowOffsetLeft: number;
+    arrowOffsetTop: number;
+    maxHeight: number;
+    placement: string;
+    positionLeft: number;
+    positionTop: number;
+}
+declare type OverlayStateType = 'idle' | 'active' | 'hiding' | 'dispose' | 'disposed';
+declare type ContentAnimation = 'sp-overlay-fade-in' | 'sp-overlay-fade-out';
+/**
+ * @element active-overlay
+ *
+ * @slot - content to display in the overlay
+ */
+export declare class ActiveOverlay extends SpectrumElement {
+    overlayContent: HTMLElement;
+    overlayContentTip?: HTMLElement;
+    trigger: HTMLElement;
+    virtualTrigger?: VirtualTrigger;
+    protected childrenReady: Promise<unknown[]>;
+    _state: OverlayStateType;
+    get state(): OverlayStateType;
+    set state(state: OverlayStateType);
+    animating: boolean;
+    placement?: Placement;
+    theme: {
+        color?: Color;
+        scale?: Scale;
+        lang?: string;
+    };
+    receivesFocus?: 'auto';
+    tabbingAway: boolean;
+    private originalPlacement?;
+    private restoreContent?;
+    focus(): void;
+    private get hasTheme();
+    offset: number;
+    skidding: number;
+    interaction: TriggerInteractions;
+    private positionAnimationFrame;
+    private timeout?;
+    static get styles(): CSSResultArray;
+    constructor();
+    private _modalRoot?;
+    get hasModalRoot(): boolean;
+    feature(): void;
+    obscure(nextOverlayInteraction: TriggerInteractions): ActiveOverlay | undefined;
+    firstUpdated(changedProperties: PropertyValues): Promise<void>;
+    openCallback(): Promise<void>;
+    private open;
+    private extractDetail;
+    dispose(): void;
+    private stealOverlayContent;
+    private willNotifyClosed;
+    private returnOverlayContent;
+    private initialHeight;
+    private isConstrained;
+    updateOverlayPosition: () => Promise<void>;
+    hide(animated?: boolean): Promise<void>;
+    private schedulePositionUpdate;
+    private onSlotChange;
+    handleInlineTriggerKeydown: (event: KeyboardEvent) => void;
+    applyContentAnimation(animation: ContentAnimation): Promise<boolean>;
+    renderTheme(content: TemplateResult): TemplateResult;
+    render(): TemplateResult;
+    static create(details: OverlayOpenDetail): ActiveOverlay;
+    private stealOverlayContentPromise;
+    private stealOverlayContentResolver;
+    protected getUpdateComplete(): Promise<boolean>;
+    disconnectedCallback(): void;
+}
+export {};

package/src/ActiveOverlay.js

@@ -0,0 +1,436 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { __decorate } from "tslib";
+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 { arrow, 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;
+    /* c8 ignore next */
+    if (!event)
+        return state;
+    return stateMachine.states[state].on[event] || state;
+};
+const parentOverlayOf = (el) => {
+    const closestOverlay = el.closest('active-overlay');
+    if (closestOverlay) {
+        return closestOverlay;
+    }
+    const rootNode = el.getRootNode();
+    if (rootNode.host) {
+        return parentOverlayOf(rootNode.host);
+    }
+    return null;
+};
+/**
+ * @element active-overlay
+ *
+ * @slot - content to display in the overlay
+ */
+export class ActiveOverlay extends SpectrumElement {
+    constructor() {
+        super();
+        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 = 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 || -10000;
+            }
+            // See: https://spectrum.adobe.com/page/popover/#Container-padding
+            const REQUIRED_DISTANCE_TO_EDGE = 8;
+            // See: https://github.com/adobe/spectrum-web-components/issues/910
+            const MIN_OVERLAY_HEIGHT = 100;
+            const middleware = [
+                offset({
+                    mainAxis: this.offset,
+                    crossAxis: this.skidding,
+                }),
+                flip({
+                    fallbackStrategy: 'initialPlacement',
+                }),
+                shift({ padding: REQUIRED_DISTANCE_TO_EDGE }),
+                size({
+                    padding: REQUIRED_DISTANCE_TO_EDGE,
+                    apply: ({ width, height, floating }) => {
+                        const maxHeight = Math.max(MIN_OVERLAY_HEIGHT, Math.floor(height));
+                        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(this.style, {
+                            maxWidth: `${Math.floor(width)}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,
+            });
+            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;
+            /* c8 ignore next */
+            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');
+        }
+    }
+    focus() {
+        const firstFocusable = firstFocusableIn(this);
+        if (firstFocusable) {
+            firstFocusable.focus();
+            /* c8 ignore next 3 */
+        }
+        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() {
+        this.tabIndex = -1;
+        const parentOverlay = parentOverlayOf(this.trigger);
+        const parentIsModal = parentOverlay && parentOverlay.slot === 'open';
+        if (parentIsModal) {
+            this._modalRoot = parentOverlay._modalRoot || parentOverlay;
+        }
+        // If an overlay it triggered from within a "modal" overlay, it needs to continue
+        // to act like one to get treated correctly in regards to tab trapping.
+        if (this.interaction === 'modal' || this._modalRoot) {
+            this.slot = 'open';
+            if (this.interaction === 'modal') {
+                this.setAttribute('aria-modal', 'true');
+            }
+            // If this isn't a modal root, walk up the overlays to the next modal root
+            // and "feature" each on of the intervening overlays.
+            if (this._modalRoot) {
+                parentOverlay === null || parentOverlay === void 0 ? void 0 : parentOverlay.feature();
+            }
+        }
+    }
+    obscure(nextOverlayInteraction) {
+        if (this.slot && nextOverlayInteraction === 'modal') {
+            this.removeAttribute('slot');
+            this.removeAttribute('aria-modal');
+            // Obscure upto and including the next modal root.
+            if (this.interaction !== 'modal') {
+                const parentOverlay = parentOverlayOf(this.trigger);
+                this._modalRoot = parentOverlay === null || parentOverlay === void 0 ? void 0 : parentOverlay.obscure(nextOverlayInteraction);
+                return this._modalRoot;
+            }
+            return this;
+        }
+        return undefined;
+    }
+    async firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        /* c8 ignore next */
+        if (!this.overlayContent || !this.trigger)
+            return;
+        this.stealOverlayContent(this.overlayContent);
+        this.state = 'active';
+        this.feature();
+        if (this.placement === 'none') {
+            this.style.setProperty('--swc-visual-viewport-height', `${window.innerHeight}px`);
+        }
+        else if (this.placement) {
+            await this.updateOverlayPosition();
+            document.addEventListener('sp-update-overlays', this.updateOverlayPosition);
+            window.addEventListener('scroll', this.updateOverlayPosition);
+        }
+        const actions = [];
+        if (this.placement && this.placement !== 'none') {
+            actions.push(this.applyContentAnimation('sp-overlay-fade-in'));
+        }
+        if (typeof this.overlayContent.updateComplete !==
+            'undefined') {
+            actions.push(this.overlayContent.updateComplete);
+        }
+        this.childrenReady = Promise.all(actions);
+    }
+    async openCallback() {
+        await this.updateComplete;
+        if (this.receivesFocus) {
+            this.focus();
+        }
+        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;
+    }
+    dispose() {
+        /* c8 ignore next */
+        if (this.state !== 'dispose')
+            return;
+        /* c8 ignore next 4 */
+        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;
+        }
+    }
+    stealOverlayContent(element) {
+        this.originalPlacement = element.getAttribute('placement');
+        this.restoreContent = reparentChildren([element], this, (el) => {
+            const slotName = el.slot;
+            const placement = el.placement;
+            el.removeAttribute('slot');
+            return (el) => {
+                el.slot = slotName;
+                el.placement = placement;
+            };
+        });
+        this.stealOverlayContentResolver();
+    }
+    returnOverlayContent() {
+        /* c8 ignore next */
+        if (!this.restoreContent)
+            return;
+        const [element] = this.restoreContent();
+        this.restoreContent = undefined;
+        this.willNotifyClosed = true;
+        if (this.originalPlacement) {
+            element.setAttribute('placement', this.originalPlacement);
+            delete this.originalPlacement;
+        }
+    }
+    async hide(animated = true) {
+        this.state = 'hiding';
+        if (animated) {
+            await this.applyContentAnimation('sp-overlay-fade-out');
+        }
+        this.state = 'dispose';
+    }
+    schedulePositionUpdate() {
+        // Edge needs a little time to update the DOM before computing the layout
+        cancelAnimationFrame(this.positionAnimationFrame);
+        this.positionAnimationFrame = requestAnimationFrame(() => this.updateOverlayPosition());
+    }
+    onSlotChange() {
+        this.schedulePositionUpdate();
+    }
+    applyContentAnimation(animation) {
+        if (this.placement === 'none') {
+            return Promise.resolve(true);
+        }
+        return new Promise((resolve) => {
+            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 } = this.theme;
+        return html `
+            <sp-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,
+        ];
+        if (this.childrenReady) {
+            actions.push(this.childrenReady);
+        }
+        const [complete] = await Promise.all(actions);
+        return complete;
+    }
+    disconnectedCallback() {
+        document.removeEventListener('sp-update-overlays', this.updateOverlayPosition);
+        window.removeEventListener('scroll', this.updateOverlayPosition);
+        super.disconnectedCallback();
+    }
+}
+__decorate([
+    property()
+], ActiveOverlay.prototype, "_state", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], ActiveOverlay.prototype, "animating", void 0);
+__decorate([
+    property({ reflect: true })
+], ActiveOverlay.prototype, "placement", void 0);
+__decorate([
+    property({ attribute: false })
+], ActiveOverlay.prototype, "theme", void 0);
+__decorate([
+    property({ attribute: false })
+], ActiveOverlay.prototype, "receivesFocus", void 0);
+//# sourceMappingURL=ActiveOverlay.js.map