@refinitiv-ui/elements 5.10.1 → 5.12.0-alpha.0

package/lib/overlay/managers/focus-manager.js

@@ -1,228 +0,0 @@
-import { AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
-import { getOverlays } from './zindex-manager.js';
-import { FocusableHelper } from '@refinitiv-ui/core';
-/**
- * Focus manager ensures that the correct
- * element receives the focus
- * @returns {void}
- */
-export class FocusManager {
-    constructor() {
-        this.focusThrottler = new AnimationTaskRunner(); /* used to delay focus to give time for overlay to show up */
-        this.registry = new Set();
-        this.restoreFocusElement = null; /* used to restore focus on close */
-        this.lastFocused = new WeakMap(); /* used to store last focused item */
-        /**
-         * Run when document key down event happens
-         * @param event Keyboard event
-         * @returns {void}
-         */
-        this.onDocumentKeyDown = (event) => {
-            if (event.key === 'Tab') {
-                this.onTabKey(event);
-                return;
-            }
-        };
-        /**
-         * True if passed target is a registered overlay
-         * @param target Target to check
-         * @returns true if registered overlay
-         */
-        this.isRegisteredOverlay = (target) => this.overlays.includes(target);
-        /**
-         * Run on overlay focus order to restore overlay focus
-         * @param event focusin event
-         * @returns {void}
-         */
-        this.onOverlayFocus = (event) => {
-            const overlay = event.composedPath().find(this.isRegisteredOverlay);
-            if (overlay) {
-                this.lastFocused.set(overlay, event.target);
-            }
-        };
-    }
-    get overlays() {
-        return getOverlays().filter(overlay => this.registry.has(overlay));
-    }
-    get focusBoundaryElements() {
-        return getOverlays()
-            .map(overlay => overlay.focusBoundary)
-            .filter(focusBoundary => focusBoundary !== null);
-    }
-    getTabbableElements(overlay) {
-        return overlay.focusBoundary ? FocusableHelper.getTabbableNodes(overlay.focusBoundary) : [];
-    }
-    getActiveTabbableNodes(reverse) {
-        const sorted = this.overlays;
-        const nodes = [];
-        const tabbableMap = new Map();
-        for (let i = 0; i < sorted.length; i += 1) {
-            const overlay = sorted[i];
-            const tabbable = this.getTabbableElements(overlay);
-            tabbable.forEach(node => tabbableMap.set(node, overlay));
-            if (reverse) {
-                nodes.push(...tabbable);
-            }
-            else {
-                nodes.splice(0, 0, ...tabbable);
-            }
-            if (overlay.withBackdrop) { /* if the overlay has backdrop all other overlays with smaller z-index are outside tab scope */
-                break;
-            }
-            if (document.activeElement === overlay && nodes.length) { /* if overlay itself is in focus, try to always focus withing the focused overlay */
-                break;
-            }
-        }
-        if (reverse) {
-            nodes.reverse();
-        }
-        return {
-            nodes,
-            tabbableMap
-        };
-    }
-    onTabKey(event) {
-        const { nodes, tabbableMap } = this.getActiveTabbableNodes(event.shiftKey);
-        if (nodes.length === 0) {
-            return;
-        }
-        if (nodes.length === 1) { /* no other focusable nodes */
-            event.preventDefault();
-            nodes[0].focus();
-            return;
-        }
-        const focusNode = this.getReTargetFocusNode(nodes);
-        if (focusNode) {
-            event.preventDefault();
-            const overlay = tabbableMap.get(focusNode);
-            const topOverlay = this.overlays[0];
-            if (overlay && topOverlay && topOverlay !== overlay) {
-                overlay.toFront();
-            }
-            focusNode.focus();
-        }
-    }
-    getReTargetFocusNode(nodes) {
-        const activeElement = this.getActiveElement();
-        if (!activeElement || activeElement === nodes[nodes.length - 1] || !this.isFocusBoundaryDescendant(activeElement)) {
-            return nodes[0];
-        }
-        return null;
-    }
-    getShadowActiveElement(activeElement) {
-        var _a;
-        if ((_a = activeElement === null || activeElement === void 0 ? void 0 : activeElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) {
-            return this.getShadowActiveElement(activeElement.shadowRoot.activeElement);
-        }
-        return activeElement;
-    }
-    getActiveElement() {
-        return this.getShadowActiveElement(document.activeElement);
-    }
-    isFocusBoundaryDescendant(element) {
-        const focusBoundaryElements = this.focusBoundaryElements;
-        let node = element.parentNode;
-        while (node) {
-            if ((node instanceof HTMLElement || node instanceof ShadowRoot) && focusBoundaryElements.includes(node)) {
-                return true;
-            }
-            // parenNode is not defined if the node is inside document fragment. Use host instead
-            node = node.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? node.host : node.parentNode;
-        }
-        return false;
-    }
-    register(overlay) {
-        if (!this.registry.size) {
-            this.restoreFocusElement = document.activeElement; /* store this only once, as overlay order may change */
-            document.addEventListener('keydown', this.onDocumentKeyDown, { capture: true });
-        }
-        if (!this.registry.has(overlay)) {
-            this.registry.add(overlay);
-            // cannot use focusin as it is not propagated through shadow DOM
-            overlay.addEventListener('focus', this.onOverlayFocus, true);
-            if (!overlay.noAutofocus) {
-                this.focusThrottler.schedule(() => {
-                    overlay.opened && overlay.focus(); /* always focus the last added overlay */
-                });
-            }
-        }
-    }
-    deregister(overlay) {
-        if (this.registry.has(overlay)) {
-            overlay.removeEventListener('focus', this.onOverlayFocus, true);
-            this.lastFocused.delete(overlay);
-            this.registry.delete(overlay);
-            if (!this.registry.size) {
-                document.removeEventListener('keydown', this.onDocumentKeyDown, { capture: true });
-                /* istanbul ignore next */
-                if (this.restoreFocusElement) {
-                    this.restoreFocusElement.focus();
-                }
-                this.restoreFocusElement = null;
-            }
-            else if (!overlay.noInteractionLock) {
-                // if removed overlay has scroll lock (default), move the focus to last focused node in
-                // the next available overlay (top overlay)
-                const topOverlay = this.overlays[0];
-                if (topOverlay) {
-                    const focusNode = this.lastFocused.get(topOverlay) || this.getTabbableElements(topOverlay)[0] || topOverlay;
-                    this.focusThrottler.schedule(() => {
-                        if (!topOverlay.opened) {
-                            // It is possible that overlay gets closed during throttling
-                            return;
-                        }
-                        // Make sure that focus is kept within active overlay
-                        const tabbableElements = this.getTabbableElements(topOverlay);
-                        const activeElement = this.getActiveElement();
-                        if (!activeElement || !tabbableElements.includes(activeElement)) {
-                            focusNode.focus();
-                        }
-                    });
-                }
-            }
-        }
-    }
-    /**
-     * @returns count of elements inside manager
-     */
-    size() {
-        return this.registry.size;
-    }
-    /**
-     * applies deregister for each element in registry
-     * @returns {void}
-     */
-    clear() {
-        this.registry.forEach(overlay => this.deregister(overlay));
-    }
-}
-const focusManager = new FocusManager();
-/**
- * Register the new overlay
- * @param overlay Overlay
- * @returns {void}
- */
-export const register = (overlay) => {
-    focusManager.register(overlay);
-};
-/**
- * Deregister the overlay
- * @param overlay Overlay
- * @returns {void}
- */
-export const deregister = (overlay) => {
-    focusManager.deregister(overlay);
-};
-/**
- * @returns count of elements inside manager
- */
-export const size = () => {
-    return focusManager.size();
-};
-/**
- * removes all elements from registry
- * @returns {void}
- */
-export const clear = () => {
-    focusManager.clear();
-};

package/lib/overlay/managers/interaction-lock-manager.d.ts

@@ -1,138 +0,0 @@
-/**
- * Scroll lock manager singleton is responsible for locking
- * all scrollbars apart one in the active overlay
- */
-export declare class ScrollLockManager {
-    /**
-     * Get a collection of interactive elements
-     * @param overlay Overlay to check
-     * @returns interactive elements
-     */
-    private static getInteractiveElements;
-    private scrollTop;
-    private scrollLeft;
-    private lockScroll;
-    /**
-     * A list of elements that are currently interactive
-     * aka `pointer-events: auto` applied
-     */
-    private interactiveElements;
-    private pointerEventsMap;
-    private scrollThrottler;
-    private lastTouchPosition;
-    /**
-     * The list of active overlays, which participate
-     * in lock management
-     */
-    private get overlays();
-    /**
-     * Lock the screen and make top most overlay
-     * and its position target interactive
-     * @returns {void}
-     */
-    applyLock(): void;
-    /**
-     * Set pointer events style tag
-     * @param el Element to unlock
-     * @param [value=auto] Value of pointer events
-     * @returns {void}
-     */
-    private setPointerEvents;
-    /**
-     * Restore pointer events style tag
-     * @param el Element to restore
-     * @returns {void}
-     */
-    private restorePointerEvents;
-    /**
-     * Get the top most interactive element
-     * @returns element
-     */
-    private get interactiveElement();
-    /**
-     * Memoize the scroll position of the outside scrolling element.
-     * @returns {void}
-     */
-    private saveScrollPosition;
-    /**
-     * Resets the scroll position of the outside scrolling element.
-     * @returns {void}
-     */
-    private restoreScrollPosition;
-    /**
-     * Listen for scroll and wheel events, to apply the correct lock logic
-     * @returns {void}
-     */
-    private lockEvents;
-    /**
-     * Remove scroll and wheel listeners
-     * @returns {void}
-     */
-    private unlockEvents;
-    /**
-     * Add locking backdrop and prevent pointer events on document
-     * @returns {void}
-     */
-    private applyLockBackdrop;
-    /**
-     * Remove locking backdrop and prevent pointer events on document
-     * @returns {void}
-     */
-    private removeLockBackdrop;
-    /**
-     * Run on scroll event. If onscroll happened as a result of user interaction, restore the original position
-     * @param event Scroll event
-     * @returns {void}
-     */
-    private onScroll;
-    /**
-     * Apply scroll lock as a result of user interaction
-     * @returns {void}
-     */
-    private applyScrollLock;
-    /**
-     * Remove scroll lock when user interaction has finished
-     * @returns {void}
-     */
-    private removeScrollLock;
-    /**
-     * Run on wheel event
-     * If wheel happened as a result of user interaction, restore the original position
-     * @param event Wheel event
-     * @returns {void}
-     */
-    private onWheelScroll;
-    /**
-     * Run on touch events.
-     * If touch happened as a result of user interaction, restore the original position
-     * @param event Touch event
-     * @returns {void}
-     */
-    private onTouchScroll;
-    /**
-     * Check if wheel event should be cancelled
-     * @param event Touch event
-     * @return shouldCancelTouch True if the touch event should be cancelled
-     */
-    private shouldCancelTouch;
-    /**
-     * Check if wheel event should be cancelled
-     * @param event Wheel event
-     * @return shouldCancelWheel True if the scroll event should be cancelled
-     */
-    private shouldCancelWheel;
-    /**
-     * Check if wheel event should be cancelled
-     * @param event Wheel event
-     * @param deltaY Scroll delta on Y axis
-     * @param deltaX Scroll delta on X axis
-     * @return shouldCancel True if the event should be cancelled
-     */
-    private shouldCancelScroll;
-}
-/**
-* Lock the screen and make top most overlay
-* and its position target interactive
-* @returns {void}
-*/
-export declare const applyLock: () => void;