@refinitiv-ui/elements 5.3.3 → 5.3.4

package/lib/overlay/helpers/functions.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Return value if defined or 0 if not defined
+ * @param v Value
+ * @returns value
+ */
+declare const valueOrZero: (v: number | null | undefined) => number;
+/**
+ * Parse the string to number or return null if string cannot be parsed
+ * @param v Value
+ * @returns value
+ */
+declare const valueOrNull: (v: string) => number | null;
+export { valueOrZero, valueOrNull };

package/lib/overlay/helpers/functions.js

@@ -0,0 +1,16 @@
+/**
+ * Return value if defined or 0 if not defined
+ * @param v Value
+ * @returns value
+ */
+const valueOrZero = (v) => v || 0;
+/**
+ * Parse the string to number or return null if string cannot be parsed
+ * @param v Value
+ * @returns value
+ */
+const valueOrNull = (v) => {
+    const parsed = parseFloat(v);
+    return isNaN(parsed) ? null : parsed;
+};
+export { valueOrZero, valueOrNull };

package/lib/overlay/helpers/types.d.ts

@@ -0,0 +1,97 @@
+declare type Position = ('top' | 'right' | 'bottom' | 'left' | 'center' | 'top-start' | 'top-middle' | 'top-end' | 'right-start' | 'right-middle' | 'right-end' | 'bottom-start' | 'bottom-middle' | 'bottom-end' | 'left-start' | 'left-middle' | 'left-end' | 'center-middle');
+declare type PositionTarget = HTMLElement | 'top' | 'right' | 'bottom' | 'left' | 'center' | 'top right' | 'right top' | 'top center' | 'center top' | 'top left' | 'left top' | 'bottom right' | 'right bottom' | 'bottom center' | 'center bottom' | 'bottom left' | 'left bottom' | 'center left' | 'left center' | 'center right' | 'right center' | 'center center';
+declare type TransitionStyle = 'slide' | 'fade' | 'zoom' | 'slide-down' | 'slide-up' | 'slide-right' | 'slide-left' | 'slide-right-down' | 'slide-right-up' | 'slide-left-down' | 'slide-left-up';
+declare type Calculated = {
+    position?: string;
+};
+declare type SizingInfoComputed = {
+    minWidth: number | null;
+    maxWidth: number | null;
+    minHeight: number | null;
+    maxHeight: number | null;
+    marginLeft: number | null;
+    marginRight: number | null;
+    marginTop: number | null;
+    marginBottom: number | null;
+};
+declare type SizingInfoStyle = {
+    minWidth: string;
+    maxWidth: string;
+    minHeight: string;
+    maxHeight: string;
+};
+declare type SizingInfoRect = {
+    width: number;
+    height: number;
+};
+declare type SizingInfo = {
+    computed: SizingInfoComputed;
+    style: SizingInfoStyle;
+};
+declare type PositionTargetStrategy = {
+    rect: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+        height: number;
+        width: number;
+    };
+    position: Array<string[]>;
+};
+declare type NullOrUndefined = null | undefined;
+declare const DEFAULT_ALIGN: Map<string, string>;
+declare const DEFAULT_TARGET_STRATEGY: string[][];
+declare type PositionStyle = {
+    top?: number | NullOrUndefined;
+    left?: number | NullOrUndefined;
+    right?: number | NullOrUndefined;
+    bottom?: number | NullOrUndefined;
+};
+declare type CalculatedPosition = {
+    position: string;
+    align: string;
+    canPosition: boolean;
+    canAlign: boolean;
+    top: number | NullOrUndefined;
+    left: number | NullOrUndefined;
+    right: number | NullOrUndefined;
+    bottom: number | NullOrUndefined;
+    isVertical: boolean;
+    area: number;
+};
+declare type ViewAreaInfo = {
+    /**
+     * Height of current viewport. Height is limited by screen size
+     */
+    viewHeight: number;
+    /**
+     * Width of current viewport. Width is limited by screen size
+     */
+    viewWidth: number;
+    /**
+     * Offset top that takes into account screen dimensions
+     */
+    offsetTop: number;
+    /**
+     * Offset left that takes into account screen dimensions
+     */
+    offsetLeft: number;
+    /**
+     * Offset bottom that takes into account screen dimensions
+     */
+    offsetBottom: number;
+    /**
+     * Offset right that takes into account screen dimensions
+     */
+    offsetRight: number;
+    /**
+     * Actual offset top of the viewport
+     */
+    viewOffsetTop: number;
+    /**
+     * Actual offset left of the viewport
+     */
+    viewOffsetLeft: number;
+};
+export { Calculated, PositionTargetStrategy, Position, PositionTarget, PositionStyle, TransitionStyle, DEFAULT_ALIGN, DEFAULT_TARGET_STRATEGY, NullOrUndefined, SizingInfo, CalculatedPosition, SizingInfoRect, ViewAreaInfo };

package/lib/overlay/helpers/types.js

@@ -0,0 +1,16 @@
+/* align against the position. These are valid when position does not contain align information */
+const DEFAULT_ALIGN = new Map([
+    ['top', 'start'],
+    ['bottom', 'start'],
+    ['left', 'middle'],
+    ['right', 'middle'],
+    ['center', 'middle']
+]);
+/* strategies applied when positionTarget is HTML Element */
+const DEFAULT_TARGET_STRATEGY = [
+    ['bottom', 'start'],
+    ['top', 'start'],
+    ['right', 'middle'],
+    ['left', 'middle']
+];
+export { DEFAULT_ALIGN, DEFAULT_TARGET_STRATEGY };

package/lib/overlay/index.d.ts

@@ -0,0 +1,2 @@
+export { Position as OverlayPosition, PositionTarget as OverlayPositionTarget, TransitionStyle as OverlayTransitionStyle } from './helpers/types';
+export { Overlay } from './elements/overlay';

package/lib/overlay/index.js

@@ -0,0 +1 @@
+export { Overlay } from './elements/overlay';

package/lib/overlay/managers/backdrop-manager.d.ts

@@ -0,0 +1,45 @@
+import type { Overlay } from '../elements/overlay';
+import '../elements/overlay-backdrop';
+/**
+ * Backdrop manager adds a backdrop to the body
+ * @returns {void}
+ */
+export declare class BackdropManager {
+    private registry;
+    private backdropElement;
+    private get overlays();
+    private removeBackdropElement;
+    private position;
+    register(overlay: Overlay): void;
+    deregister(overlay: Overlay): void;
+    /**
+     * @returns count of elements inside manager
+     */
+    size(): number;
+    /**
+     * applies deregister for each element in registry
+     * @returns {void}
+     */
+    clear(): void;
+}
+/**
+ * Register the new overlay
+ * @param overlay Overlay
+ * @returns {void}
+ */
+export declare const register: (overlay: Overlay) => void;
+/**
+ * Deregister the overlay
+ * @param overlay Overlay
+ * @returns {void}
+ */
+export declare const deregister: (overlay: Overlay) => void;
+/**
+ * @returns count of elements inside manager
+ */
+export declare const size: () => number;
+/**
+ * removes all elements from registry
+ * @returns {void}
+ */
+export declare const clear: () => void;

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

@@ -0,0 +1,96 @@
+import { getOverlayLayers } from './zindex-manager';
+import '../elements/overlay-backdrop';
+/**
+ * Backdrop manager adds a backdrop to the body
+ * @returns {void}
+ */
+export class BackdropManager {
+    constructor() {
+        this.registry = new Set();
+        this.backdropElement = document.createElement('ef-overlay-backdrop');
+        this.position = () => {
+            const overlays = this.overlays;
+            if (!overlays.length) {
+                this.removeBackdropElement();
+                return;
+            }
+            const { overlay, zIndex } = overlays[0];
+            const backdropElement = this.backdropElement;
+            if (!overlay.parentNode) {
+                this.removeBackdropElement();
+                return;
+            }
+            if (backdropElement.nextElementSibling === overlay) {
+                return;
+            }
+            backdropElement.zIndex = zIndex;
+            overlay.parentNode.insertBefore(backdropElement, overlay);
+        };
+    }
+    get overlays() {
+        return getOverlayLayers().filter(({ overlay }) => this.registry.has(overlay));
+    }
+    removeBackdropElement() {
+        const backdropElement = this.backdropElement;
+        if (backdropElement.parentNode) {
+            backdropElement.parentNode.removeChild(backdropElement);
+        }
+    }
+    register(overlay) {
+        if (!this.registry.has(overlay)) {
+            overlay.addEventListener('focus', this.position);
+            this.registry.add(overlay);
+        }
+        this.position();
+    }
+    deregister(overlay) {
+        if (this.registry.has(overlay)) {
+            overlay.removeEventListener('focus', this.position);
+            this.registry.delete(overlay);
+            this.position();
+        }
+    }
+    /**
+     * @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 backdropManager = new BackdropManager();
+/**
+ * Register the new overlay
+ * @param overlay Overlay
+ * @returns {void}
+ */
+export const register = (overlay) => {
+    backdropManager.register(overlay);
+};
+/**
+ * Deregister the overlay
+ * @param overlay Overlay
+ * @returns {void}
+ */
+export const deregister = (overlay) => {
+    backdropManager.deregister(overlay);
+};
+/**
+ * @returns count of elements inside manager
+ */
+export const size = () => {
+    return backdropManager.size();
+};
+/**
+ * removes all elements from registry
+ * @returns {void}
+ */
+export const clear = () => {
+    backdropManager.clear();
+};

package/lib/overlay/managers/close-manager.d.ts

@@ -0,0 +1,54 @@
+import type { Overlay } from '../elements/overlay';
+declare type CloseCallback = () => void;
+/**
+ * Close manager ensures that the correct (or the most top) overlay
+ * is closed on ESC and click events
+ * @returns {void}
+ */
+export declare class CloseManager {
+    private registry;
+    private get overlays();
+    private getTopOverlay;
+    private onKeyDown;
+    private onEscKey;
+    /**
+     * Run when document tap event happens.
+     * @param event event object
+     * @returns {void}
+     */
+    private onTapStart;
+    register(overlay: Overlay, closeCallback: CloseCallback): void;
+    deregister(overlay: Overlay): void;
+    /**
+     * @returns count of elements inside manager
+     */
+    size(): number;
+    /**
+     * applies deregister for each element in registry
+     * @returns {void}
+     */
+    clear(): void;
+}
+/**
+ * Register the new overlay
+ * @param overlay Overlay
+ * @param closeCallback A function to close the overlay
+ * @returns {void}
+ */
+export declare const register: (overlay: Overlay, closeCallback: CloseCallback) => void;
+/**
+ * Deregister the overlay
+ * @param overlay Overlay
+ * @returns {void}
+ */
+export declare const deregister: (overlay: Overlay) => void;
+/**
+ * @returns count of elements inside manager
+ */
+export declare const size: () => number;
+/**
+ * removes all elements from registry
+ * @returns {void}
+ */
+export declare const clear: () => void;
+export {};

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

@@ -0,0 +1,138 @@
+import { getOverlays } from './zindex-manager';
+/**
+ * Close manager ensures that the correct (or the most top) overlay
+ * is closed on ESC and click events
+ * @returns {void}
+ */
+export class CloseManager {
+    constructor() {
+        this.registry = new Map();
+        this.onKeyDown = ({ key }) => {
+            switch (key) {
+                case 'Esc':
+                case 'Escape':
+                    this.onEscKey();
+                // no default
+            }
+        };
+        /**
+         * Run when document tap event happens.
+         * @param event event object
+         * @returns {void}
+         */
+        this.onTapStart = (event) => {
+            const topOverlay = this.getTopOverlay();
+            /* istanbul ignore next */
+            if (!topOverlay) {
+                return;
+            }
+            const { overlay, closeCallback } = topOverlay;
+            const path = event.composedPath();
+            const focusBoundary = overlay.focusBoundary || overlay;
+            const isOutsideClick = !path.includes(focusBoundary);
+            if (isOutsideClick && !overlay.noInteractionLock) {
+                event.preventDefault();
+            }
+            if (isOutsideClick && !overlay.noCancelOnOutsideClick) {
+                closeCallback();
+            }
+        };
+    }
+    get overlays() {
+        return getOverlays().filter(overlay => this.registry.has(overlay));
+    }
+    getTopOverlay() {
+        const overlay = this.overlays[0];
+        /* istanbul ignore next */
+        if (!overlay) {
+            return null;
+        }
+        const closeCallback = this.registry.get(overlay);
+        return {
+            overlay,
+            closeCallback
+        };
+    }
+    onEscKey() {
+        const topOverlay = this.getTopOverlay();
+        /* istanbul ignore next */
+        if (!topOverlay) {
+            return;
+        }
+        const { overlay, closeCallback } = topOverlay;
+        // Do nothing
+        if (overlay.noCancelOnEscKey) {
+            return;
+        }
+        closeCallback();
+    }
+    register(overlay, closeCallback) {
+        if (!this.registry.size) {
+            const eventOptions = {
+                capture: true,
+                passive: true
+            };
+            document.addEventListener('keydown', this.onKeyDown, eventOptions);
+            document.addEventListener('tapstart', this.onTapStart, true);
+        }
+        this.registry.set(overlay, closeCallback);
+    }
+    deregister(overlay) {
+        this.registry.delete(overlay);
+        if (!this.registry.size) {
+            const eventOptions = {
+                capture: true,
+                passive: true
+            };
+            document.removeEventListener('keydown', this.onKeyDown, eventOptions);
+            document.removeEventListener('tapstart', this.onTapStart, true);
+        }
+    }
+    /**
+     * @returns count of elements inside manager
+     */
+    size() {
+        return this.registry.size;
+    }
+    /**
+     * applies deregister for each element in registry
+     * @returns {void}
+     */
+    clear() {
+        const registryArray = [...this.registry.keys()];
+        for (let i = 0; i < registryArray.length; i++) {
+            this.deregister(registryArray[i]);
+        }
+    }
+}
+const closeManager = new CloseManager();
+/**
+ * Register the new overlay
+ * @param overlay Overlay
+ * @param closeCallback A function to close the overlay
+ * @returns {void}
+ */
+export const register = (overlay, closeCallback) => {
+    closeManager.register(overlay, closeCallback);
+};
+/**
+ * Deregister the overlay
+ * @param overlay Overlay
+ * @returns {void}
+ */
+export const deregister = (overlay) => {
+    closeManager.deregister(overlay);
+};
+/**
+ * @returns count of elements inside manager
+ */
+export const size = () => {
+    return closeManager.size();
+};
+/**
+ * removes all elements from registry
+ * @returns {void}
+ */
+export const clear = () => {
+    closeManager.clear();
+};

package/lib/overlay/managers/focus-manager.d.ts

@@ -0,0 +1,71 @@
+import type { Overlay } from '../elements/overlay';
+/**
+ * Focus manager ensures that the correct
+ * element receives the focus
+ * @returns {void}
+ */
+export declare class FocusManager {
+    private focusThrottler;
+    private registry;
+    private restoreFocusElement;
+    private lastFocused;
+    private get overlays();
+    private get focusBoundaryElements();
+    private getTabbableElements;
+    private getActiveTabbableNodes;
+    private onTabKey;
+    private getReTargetFocusNode;
+    private getShadowActiveElement;
+    private getActiveElement;
+    private isFocusBoundaryDescendant;
+    /**
+     * Run when document key down event happens
+     * @param event Keyboard event
+     * @returns {void}
+     */
+    private onDocumentKeyDown;
+    /**
+     * True if passed target is a registered overlay
+     * @param target Target to check
+     * @returns true if registered overlay
+     */
+    private isRegisteredOverlay;
+    /**
+     * Run on overlay focus order to restore overlay focus
+     * @param event focusin event
+     * @returns {void}
+     */
+    private onOverlayFocus;
+    register(overlay: Overlay): void;
+    deregister(overlay: Overlay): void;
+    /**
+     * @returns count of elements inside manager
+     */
+    size(): number;
+    /**
+     * applies deregister for each element in registry
+     * @returns {void}
+     */
+    clear(): void;
+}
+/**
+ * Register the new overlay
+ * @param overlay Overlay
+ * @returns {void}
+ */
+export declare const register: (overlay: Overlay) => void;
+/**
+ * Deregister the overlay
+ * @param overlay Overlay
+ * @returns {void}
+ */
+export declare const deregister: (overlay: Overlay) => void;
+/**
+ * @returns count of elements inside manager
+ */
+export declare const size: () => number;
+/**
+ * removes all elements from registry
+ * @returns {void}
+ */
+export declare const clear: () => void;