@tylertech/forge 3.0.0-next.15 → 3.0.0-next.16

package/esm/core/utils/a11y-utils.js

@@ -58,7 +58,7 @@ export const ARIA_PROPERTIES = [
 /**
  * An object mapping all ARIA attributes to their corresponding properties.
  *
- * This is required because the proeprty name cannot be reliably inferred from the attribute name.
+ * This is required because the property name cannot be reliably inferred from the attribute name.
  */
 const ARIA_ATTRIBUTES_TO_PROPERTIES = {
     'aria-atomic': 'ariaAtomic',
@@ -156,68 +156,14 @@ export function ariaAttributeToProperty(attribute) {
  *   }
  * }
  */
-export function setDefaultAria(element, internals, properties, options) {
-    if (supportsElementInternalsAria()) {
-        Object.entries(properties).forEach(([key, value]) => {
-            internals[key] = value;
-        });
-        return;
-    }
+export function setDefaultAria(element, internals, properties, { setAttribute } = { setAttribute: true }) {
     Object.entries(properties).forEach(([key, value]) => {
-        const ariaAttribute = ariaPropertyToAttribute(key);
-        if ((options === null || options === void 0 ? void 0 : options.overwrite) || !element.hasAttribute(ariaAttribute)) {
-            toggleAttribute(element, value != null, ariaPropertyToAttribute(key), value === null || value === void 0 ? void 0 : value.toString());
-        }
-        if (value != null) {
-            storeDefaultAria(element, key, value);
+        if (supportsElementInternalsAria()) {
+            internals[key] = value;
         }
-        else {
-            removeDefaultAria(element, key);
+        const attribute = ariaPropertyToAttribute(key);
+        if (setAttribute || !element.hasAttribute(attribute)) {
+            toggleAttribute(element, value != null, attribute, value);
         }
     });
 }
-/**
- * Sets a `*Default` property on an element to backup the default value of an ARIA attribute.
- *
- * @param element The element to store the default ARIA value on.
- * @param property The ARIA mixin property.
- * @param value The default value to store.
- */
-export function storeDefaultAria(element, property, value) {
-    element[getDefaultAriaPropertyName(property)] = value;
-}
-/**
- * Removes a `*Default` property from an element.
- *
- * @param element The element to remove the default ARIA value from.
- * @param property The ARIA mixin property.
- */
-export function removeDefaultAria(element, property) {
-    delete element[getDefaultAriaPropertyName(property)];
-}
-/**
- * Gets a default ARIA value from an element's `*Default` property.
- *
- * @param element The element to retrieve the default ARIA value from.
- * @param property An ARIA mixin property.
- * @returns The value of the default ARIA attribute, or null if it does not exist.
- */
-export function retrieveDefaultAria(element, property) {
-    const value = element[getDefaultAriaPropertyName(property)];
-    return !!value ? value : null;
-}
-/**
- * Restores the given ARIA attribute of an element to its default value if it exists.
- *
- * @param element The element to restore the ARIA attribute on.
- * @param property The ARIA mixin property.
- */
-export function restoreDefaultAria(element, property) {
-    const defaultValue = retrieveDefaultAria(element, property);
-    if (defaultValue !== null) {
-        toggleAttribute(element, true, ariaPropertyToAttribute(property), defaultValue.toString());
-    }
-}
-function getDefaultAriaPropertyName(property) {
-    return `_forge_${property}Default`;
-}

package/esm/core/utils/deferred.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * Represents a deferred promise.
+ *
+ * Use deferred promises when you need to return a promise but you don't have the result yet.
+ */
+export declare class Deferred<T = void> {
+    /**
+     * The promise to be resolved or rejected.
+     */
+    readonly promise: Promise<T>;
+    private _resolveFn;
+    private _rejectFn;
+    constructor();
+    /**
+     * Resolves the promise.
+     * @param param The value to resolve the promise with.
+     */
+    resolve(param: T): void;
+    /**
+     * Rejects the promise.
+     * @param reason The reason for rejecting the promise.
+     */
+    reject(reason?: any): void;
+}

package/esm/core/utils/deferred.js

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * Represents a deferred promise.
+ *
+ * Use deferred promises when you need to return a promise but you don't have the result yet.
+ */
+export class Deferred {
+    constructor() {
+        this.promise = new Promise((resolve, reject) => {
+            this._resolveFn = resolve;
+            this._rejectFn = reject;
+        });
+    }
+    /**
+     * Resolves the promise.
+     * @param param The value to resolve the promise with.
+     */
+    resolve(param) {
+        this._resolveFn(param);
+    }
+    /**
+     * Rejects the promise.
+     * @param reason The reason for rejecting the promise.
+     */
+    reject(reason) {
+        this._rejectFn(reason);
+    }
+}

package/esm/core/utils/dismissible-stack.d.ts

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const tryDismiss: unique symbol;
+export interface IDismissibleStackState<T = string> {
+    [key: string]: T;
+}
+export interface IDismissible {
+    [tryDismiss](state?: IDismissibleStackState): boolean;
+}
+export declare class DismissibleStack<T extends IDismissible> {
+    private _deferredDismiss;
+    /**
+     * A promise that resolves when all elements in the stack have finished dismissing.
+     *
+     * Resolves immediately if there are no elements in the stack.
+     */
+    get dismissing(): Promise<void>;
+    /**
+     * A set of all elements that are currently eligible for dismissal.
+     *
+     * Typically used when a user is force dismissing an element, such as when they click
+     * an element that triggered it to open.
+     */
+    private _dismissibleElements;
+    /**
+     * A map of all elements that are requesting to be dismissed, and the state that they
+     * are requesting to dismiss with.
+     *
+     * This is used to queue up dismiss requests so that we can wait for all other elements
+     * to dispatch their dismiss events, typically used with light dismiss.
+     */
+    private _elementsRequestingDismiss;
+    private constructor();
+    static get instance(): DismissibleStack<IDismissible>;
+    /**
+     * Dismisses all elements in the stack that have been presented after the provided element.
+     * @param el The element to dismiss
+     * @param state The state to pass to the dismiss method of each element
+     */
+    dismiss(el: T, state: IDismissibleStackState): Promise<void>;
+    /**
+     * Queues an element to be dismissed. This allows for us to asynchronously wait for all
+     * other elements to dispatch their dismiss events so that consumers can cancel the dismiss
+     * if they want to, without closing their parent dismissible elements.
+     * @param el
+     * @param dismissState
+     * @returns
+     */
+    requestDismiss(el: T, dismissState: IDismissibleStackState): Promise<void>;
+    /**
+     * Adds an element to the dismissible queue.
+     *
+     * Use this when an element is opened and should be eligible for dismissal in a stack of other
+     * dismissible elements.
+     */
+    add(el: T): void;
+    /**
+     * Removes an element from the dismissible queue.
+     *
+     * Use this when an element is closed and should no longer be eligible for dismissal in a stack.
+     */
+    remove(el: T): void;
+    /**
+     * Checks if an element is in the dismissible queue.
+     */
+    has(el: T): boolean;
+    /**
+     * Checks if an element is requesting to be dismissed.
+     */
+    isRequestingLightDismiss(el: T): boolean;
+}

package/esm/core/utils/dismissible-stack.js

@@ -0,0 +1,133 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { Deferred } from './deferred';
+import { task } from './event-utils';
+// The symbol to use for the tryDismiss method on dismissible elements
+export const tryDismiss = Symbol('tryDismiss');
+// The key to use for storing the dismissible stack on the window object
+const DISMISSIBLE_STACK_INSTANCE_KEY = Symbol('forgeDismissibleStack');
+export class DismissibleStack {
+    /**
+     * A promise that resolves when all elements in the stack have finished dismissing.
+     *
+     * Resolves immediately if there are no elements in the stack.
+     */
+    get dismissing() {
+        var _a, _b;
+        return (_b = (_a = this._deferredDismiss) === null || _a === void 0 ? void 0 : _a.promise) !== null && _b !== void 0 ? _b : Promise.resolve();
+    }
+    // eslint-disable-next-line @tylertech-eslint/require-private-modifier
+    constructor() {
+        /**
+         * A set of all elements that are currently eligible for dismissal.
+         *
+         * Typically used when a user is force dismissing an element, such as when they click
+         * an element that triggered it to open.
+         */
+        this._dismissibleElements = new Set();
+        /**
+         * A map of all elements that are requesting to be dismissed, and the state that they
+         * are requesting to dismiss with.
+         *
+         * This is used to queue up dismiss requests so that we can wait for all other elements
+         * to dispatch their dismiss events, typically used with light dismiss.
+         */
+        this._elementsRequestingDismiss = new Map();
+    }
+    static get instance() {
+        // We store our instance on the window object so that it can be shared across multiple
+        // instances of Forge components
+        if (!window[DISMISSIBLE_STACK_INSTANCE_KEY]) {
+            window[DISMISSIBLE_STACK_INSTANCE_KEY] = new DismissibleStack();
+        }
+        return window[DISMISSIBLE_STACK_INSTANCE_KEY];
+    }
+    /**
+     * Dismisses all elements in the stack that have been presented after the provided element.
+     * @param el The element to dismiss
+     * @param state The state to pass to the dismiss method of each element
+     */
+    async dismiss(el, state) {
+        const elements = Array.from(this._dismissibleElements);
+        const elementsAfter = elements.slice(elements.indexOf(el)).reverse();
+        for (const element of elementsAfter) {
+            if (!element[tryDismiss](state)) {
+                break;
+            }
+        }
+    }
+    /**
+     * Queues an element to be dismissed. This allows for us to asynchronously wait for all
+     * other elements to dispatch their dismiss events so that consumers can cancel the dismiss
+     * if they want to, without closing their parent dismissible elements.
+     * @param el
+     * @param dismissState
+     * @returns
+     */
+    async requestDismiss(el, dismissState) {
+        var _a;
+        if (!this._deferredDismiss) {
+            this._deferredDismiss = new Deferred();
+        }
+        this._elementsRequestingDismiss.set(el, dismissState);
+        // Wait for all other element to finish queuing their dismiss events
+        await task();
+        // The first element to call this method will handle attempting to dismiss the rest of
+        // elements, and will clear the queue when it is done. All other subsequent elements will
+        // just return here if called within the same task.
+        if (!this.isRequestingLightDismiss(el)) {
+            return;
+        }
+        // Get all elements that are requesting to be dismissed, and reverse the order so that
+        // we can attempt to dismiss them in a top-down order (most recently opened first)
+        const elements = Array.from(this._elementsRequestingDismiss).reverse();
+        // Clear all elements from the stack since we are don't need references to them anymore
+        this._elementsRequestingDismiss.clear();
+        // Attempt to dismiss each element in the queue (most recently opened first), if any of
+        // them are prevented, stop trying to dismiss the rest
+        try {
+            for (const [element, state] of elements) {
+                if (!element[tryDismiss](state)) {
+                    break;
+                }
+            }
+        }
+        finally {
+            (_a = this._deferredDismiss) === null || _a === void 0 ? void 0 : _a.resolve();
+            this._deferredDismiss = undefined;
+        }
+    }
+    /**
+     * Adds an element to the dismissible queue.
+     *
+     * Use this when an element is opened and should be eligible for dismissal in a stack of other
+     * dismissible elements.
+     */
+    add(el) {
+        this._dismissibleElements.add(el);
+    }
+    /**
+     * Removes an element from the dismissible queue.
+     *
+     * Use this when an element is closed and should no longer be eligible for dismissal in a stack.
+     */
+    remove(el) {
+        this._dismissibleElements.delete(el);
+        this._elementsRequestingDismiss.delete(el);
+    }
+    /**
+     * Checks if an element is in the dismissible queue.
+     */
+    has(el) {
+        return this._dismissibleElements.has(el);
+    }
+    /**
+     * Checks if an element is requesting to be dismissed.
+     */
+    isRequestingLightDismiss(el) {
+        return this._elementsRequestingDismiss.has(el);
+    }
+}

package/esm/core/utils/feature-detection.d.ts

@@ -16,3 +16,8 @@ export declare function supportsPopover(): boolean;
  * @returns {boolean}
  */
 export declare function supportsElementInternalsAria(): boolean;
+/**
+ * Detects if the browser supports the hovering elements as the users primary input mechanism.
+ * @returns {boolean}
+ */
+export declare function supportsHover(): boolean;

package/esm/core/utils/feature-detection.js

@@ -3,6 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { Platform } from '@tylertech/forge-core';
 /**
  * Detects if the browser supports the `popover` attribute.
  * @returns {boolean}
@@ -18,7 +19,15 @@ export function supportsPopover() {
  * @returns {boolean}
  */
 export function supportsElementInternalsAria() {
-    // TODO: return whether the user agent actually supports this when tooling is able to detect it
-    // return ElementInternals.prototype.hasOwnProperty('role');
-    return false;
+    return ElementInternals.prototype.hasOwnProperty('role');
+}
+/**
+ * Detects if the browser supports the hovering elements as the users primary input mechanism.
+ * @returns {boolean}
+ */
+export function supportsHover() {
+    // TODO: hover media query is not working in CI headless chrome, so we are using the Platform.isMobile flag for now.
+    //       This should be reverted once we switch to using puppeteer or playwright for testing in CI.
+    // return window.matchMedia('(hover: hover)').matches;
+    return !Platform.isMobile;
 }

package/esm/core/utils/form-utils.d.ts

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 export type FormValue = File | string | FormData;
-export type FormRestoreState = File | string | Array<[string, FormDataEntryValue]>;
+export type FormRestoreState = File | string | FormData | Array<[string, FormDataEntryValue]>;
 export type FormRestoreReason = 'restore' | 'autocomplete';
 export type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'select' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
 export type InputValidationProp = keyof InputValidationProps;

package/esm/core/utils/position-utils.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { FlipOptions, ShiftOptions, AutoPlacementOptions, HideOptions, Middleware, Placement, Strategy, OffsetOptions, MiddlewareData, ArrowOptions } from '@floating-ui/dom';
+export type PositionPlacement = Placement;
+export type PositionStrategy = Strategy;
+export declare const DEFAULT_FALLBACK_PLACEMENTS: PositionPlacement[];
+export interface IPositionElementResult {
+    x: number;
+    y: number;
+    hidden: boolean;
+    placement: PositionPlacement;
+    arrow?: MiddlewareData['arrow'];
+}
+export declare class VirtualElement {
+    x: number;
+    y: number;
+    height: number;
+    width: number;
+    constructor(x: number, y: number, height?: number, width?: number);
+    getBoundingClientRect(): DOMRect;
+    static fromElement(element: HTMLElement): VirtualElement;
+    static fromEvent(event: MouseEvent | TouchEvent): VirtualElement;
+}
+export interface IPositionElementConfig {
+    /** The element to apply position to. */
+    element: HTMLElement;
+    /** The anchor element to position `element` around. */
+    anchorElement: HTMLElement | VirtualElement;
+    /** The placement position. */
+    placement: PositionPlacement;
+    /** Whether the position values should be applied to the `element` or not. Default is `true`. */
+    apply?: boolean;
+    /** Should the element flip to the opposite placement when not enough room. */
+    flip?: boolean;
+    /** Options to provide to the flip middleware. */
+    flipOptions?: Partial<FlipOptions>;
+    /** Should the element stay visible at the same placement when scrolling. */
+    shift?: boolean;
+    /** Options to provide to the shift middleware. */
+    shiftOptions?: Partial<ShiftOptions>;
+    /** Should the element hide itself when the anchor element is out of the view. */
+    hide?: boolean;
+    /** Options to provide to the hide middleware. */
+    hideOptions?: Partial<HideOptions>;
+    /** Should the element automatically attempt to locate the best placement, */
+    auto?: boolean;
+    /** Options to provide to the autoPlacement middleware. */
+    autoOptions?: Partial<AutoPlacementOptions>;
+    /** Should any offset values be applied to the element. */
+    offset?: boolean;
+    /** The options provide to the offset middleware. */
+    offsetOptions?: Partial<OffsetOptions>;
+    /** The element to use as an arrow. */
+    arrowElement?: HTMLElement;
+    /** Options to provide to the arrow middleware. */
+    arrowOptions?: Partial<ArrowOptions>;
+    /** Should the top-layer middleware be applied or not. */
+    topLayer?: boolean;
+    /** The positioning strategy. */
+    strategy?: PositionStrategy;
+    /** Should positioning be applied using a `transform` style. */
+    transform?: boolean;
+    /** The CSS `translate` function to apply to the `transform`. Only applied when `transform` is `true`. */
+    translateFunction?: 'translate3d' | 'translate';
+}
+/**
+ * Calculates an elements position relative to another element.
+ * @param {IPositionElementConfig} config Configuration to provide when positioning the element.
+ * @returns {IPositionElementResult} The result of the positioning logic.
+ */
+export declare function positionElementAsync({ element, anchorElement, placement, offset, offsetOptions, strategy, apply, flip, flipOptions, auto, autoOptions, shift, shiftOptions, hide, hideOptions, arrowElement, arrowOptions, topLayer, transform, translateFunction }: IPositionElementConfig): Promise<IPositionElementResult>;
+/**
+ * Custom middleware to handle positioning when the element is on the top layer AND within a containing block.
+ */
+export declare const topLayerMiddleware: () => Middleware;

package/esm/core/utils/position-utils.js

@@ -0,0 +1,197 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { computePosition, flip as flipMiddleware, hide as hideMiddleware, shift as shiftMiddleware, offset as offsetMiddleware, arrow as arrowMiddleware, autoPlacement as autoPlacementMiddleware } from '@floating-ui/dom';
+import { getContainingBlock, isContainingBlock, getWindow } from '@floating-ui/utils/dom';
+export const DEFAULT_FALLBACK_PLACEMENTS = ['top-start', 'top', 'top-end', 'left-start', 'left', 'left-end', 'right-start', 'right', 'right-end'];
+export class VirtualElement {
+    constructor(x, y, height = 0, width = 0) {
+        this.x = x;
+        this.y = y;
+        this.height = height;
+        this.width = width;
+    }
+    getBoundingClientRect() {
+        return {
+            x: this.x,
+            y: this.y,
+            top: this.y,
+            left: this.x,
+            bottom: this.y,
+            right: this.x,
+            width: this.height,
+            height: this.width,
+            toJSON() {
+                return;
+            }
+        };
+    }
+    static fromElement(element) {
+        const rect = element.getBoundingClientRect();
+        return new VirtualElement(rect.left, rect.top, rect.height, rect.width);
+    }
+    static fromEvent(event) {
+        if (event instanceof MouseEvent) {
+            return new VirtualElement(event.clientX, event.clientY);
+        }
+        if (event instanceof TouchEvent) {
+            return new VirtualElement(event.touches[0].clientX, event.touches[0].clientY);
+        }
+        throw new Error('Unsupported event type');
+    }
+}
+/**
+ * Calculates an elements position relative to another element.
+ * @param {IPositionElementConfig} config Configuration to provide when positioning the element.
+ * @returns {IPositionElementResult} The result of the positioning logic.
+ */
+export async function positionElementAsync({ element, anchorElement, placement = 'bottom', offset = false, offsetOptions, strategy = 'absolute', apply = true, flip = true, flipOptions = {
+    fallbackPlacements: DEFAULT_FALLBACK_PLACEMENTS,
+    fallbackStrategy: 'initialPlacement'
+}, auto = false, autoOptions, shift = true, shiftOptions, hide = false, hideOptions, arrowElement, arrowOptions = {}, topLayer = false, transform = true, translateFunction = 'translate3d' }) {
+    var _a, _b, _c;
+    const middleware = [];
+    //
+    // Order of the following middleware is **important**
+    //
+    if (offset) {
+        middleware.push(offsetMiddleware(offsetOptions));
+    }
+    if (shift) {
+        middleware.push(shiftMiddleware(shiftOptions));
+    }
+    if (flip && !auto) { // flip and auto placement middleware cannot be used together
+        middleware.push(flipMiddleware(flipOptions));
+    }
+    if (auto) {
+        middleware.push(autoPlacementMiddleware(autoOptions));
+    }
+    if (hide) {
+        middleware.push(hideMiddleware(hideOptions));
+    }
+    if (arrowElement) { // Must come before the topLayer middleware
+        middleware.push(arrowMiddleware(Object.assign(Object.assign({}, arrowOptions), { element: arrowElement })));
+    }
+    if (topLayer) {
+        middleware.push(topLayerMiddleware());
+    }
+    const { x, y, placement: finalPlacement, middlewareData } = await computePosition(anchorElement, element, { strategy, placement, middleware });
+    // Should we apply the position information to the element?
+    if (apply) {
+        const styles = {
+            left: transform ? '0' : `${x}px`,
+            top: transform ? '0' : `${y}px`
+        };
+        if (transform) {
+            if (translateFunction === 'translate') {
+                styles.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
+            }
+            else {
+                styles.transform = `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`;
+            }
+        }
+        Object.assign(element.style, styles);
+        // We use `display` here to ensure that any child overlays are also hidden
+        if ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden) {
+            element.style.display = 'none';
+        }
+        else {
+            element.style.removeProperty('display');
+        }
+    }
+    return {
+        x,
+        y,
+        hidden: (_c = (_b = middlewareData.hide) === null || _b === void 0 ? void 0 : _b.referenceHidden) !== null && _c !== void 0 ? _c : false,
+        placement: finalPlacement,
+        arrow: middlewareData.arrow
+    };
+}
+/**
+ * Custom middleware to handle positioning when the element is on the top layer AND within a containing block.
+ */
+export const topLayerMiddleware = () => ({
+    name: 'topLayer',
+    async fn({ x, y, elements: { reference, floating } }) {
+        let onTopLayer = false;
+        let topLayerIsFloating = false;
+        let withinReference = false;
+        const diffCoords = { x: 0, y: 0 };
+        try {
+            onTopLayer = onTopLayer || floating.matches(':popover-open');
+        }
+        catch (_a) { }
+        try {
+            onTopLayer = onTopLayer || floating.matches(':open');
+        }
+        catch (_b) { }
+        try {
+            onTopLayer = onTopLayer || floating.matches(':modal');
+        }
+        catch (_c) { }
+        topLayerIsFloating = onTopLayer;
+        const dialogAncestorQueryEvent = new Event('floating-ui-dialog-test', { composed: true, bubbles: true });
+        floating.addEventListener('floating-ui-dialog-test', (event) => {
+            event.composedPath().forEach((el) => {
+                withinReference = withinReference || el === reference;
+                if (el === floating || el.localName !== 'dialog') {
+                    return;
+                }
+                try {
+                    onTopLayer = onTopLayer || el.matches(':modal');
+                }
+                catch (_a) { }
+            });
+        }, { once: true });
+        floating.dispatchEvent(dialogAncestorQueryEvent);
+        let overTransforms = false;
+        if (!(reference instanceof VirtualElement)) {
+            const root = (withinReference ? reference : floating);
+            const containingBlock = isContainingBlock(root) ? root : getContainingBlock(root);
+            let css = {};
+            if (containingBlock !== null && getWindow(containingBlock) !== containingBlock) {
+                css = getComputedStyle(containingBlock);
+                // The overlay is "over transforms" when the containing block uses specific CSS...
+                overTransforms =
+                    css.transform !== 'none' ||
+                        css.translate !== 'none' ||
+                        (css.containerType ? css.containerType !== 'normal' : false) ||
+                        (css.backdropFilter ? css.backdropFilter !== 'none' : false) ||
+                        (css.filter ? css.filter !== 'none' : false) ||
+                        css.willChange.search('transform') > -1 ||
+                        css.willChange.search('translate') > -1 ||
+                        ['paint', 'layout', 'strict', 'content'].some((value) => (css.contain || '').includes(value));
+            }
+            if (onTopLayer && overTransforms && containingBlock) {
+                const rect = containingBlock.getBoundingClientRect();
+                // Margins and borders are not included in the bounding client rect and need to be handled separately
+                const { marginInlineStart = '0', marginBlockStart = '0', borderInlineWidth = '0', borderBlockWidth = '0' } = css;
+                const inlineBoxAdjust = parseFloat(marginInlineStart) + parseFloat(borderInlineWidth);
+                const blockBoxAdjust = parseFloat(marginBlockStart) + parseFloat(borderBlockWidth);
+                diffCoords.x = rect.x + inlineBoxAdjust - containingBlock.scrollLeft;
+                diffCoords.y = rect.y + blockBoxAdjust - containingBlock.scrollTop;
+            }
+        }
+        if (onTopLayer && topLayerIsFloating) {
+            return {
+                x: x + diffCoords.x,
+                y: y + diffCoords.y,
+                data: diffCoords
+            };
+        }
+        if (onTopLayer) {
+            return {
+                x,
+                y,
+                data: diffCoords
+            };
+        }
+        return {
+            x: x - diffCoords.x,
+            y: y - diffCoords.y,
+            data: diffCoords
+        };
+    }
+});