@tylertech/forge-core 2.4.0-dev.0 → 2.4.0-dev.1

package/esm/utils/position-utils.js

@@ -1,6 +1,6 @@
 import { computePosition, flip as flipMiddleware, hide as hideMiddleware, shift as shiftMiddleware, autoPlacement as autoPlacementMiddleware } from '@floating-ui/dom';
 import { getContainingBlock } from '@floating-ui/utils/dom';
-import { topLayerOverTransforms } from './top-layer-over-transforms';
+import { topLayer as topLayerMiddleware } from './top-layer-middleware';
 /** Adjusts the x and y axes by a specified offset amount. */
 export const positionOffsetMiddleware = ({ x: offsetX, y: offsetY }) => ({
     name: 'positionOffset',
@@ -39,7 +39,7 @@ export async function positionElementAsync({ element, targetElement, placement =
         middleware.push(hideMiddleware(hideOptions));
     }
     if (topLayer) {
-        middleware.push(topLayerOverTransforms());
+        middleware.push(topLayerMiddleware());
     }
     const { x, y, middlewareData } = await computePosition(targetElement, element, { strategy, placement, middleware });
     const visibility = ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden) ? 'hidden' : 'visible';

package/esm/utils/top-layer-middleware.js

@@ -0,0 +1,43 @@
+import { getContainingBlock } from '@floating-ui/utils/dom';
+export const topLayer = () => ({
+    name: 'topLayer',
+    async fn({ x, y, elements: { reference, floating } }) {
+        let isTopLayer = false;
+        const referenceEl = reference;
+        const diffCoords = { x: 0, y: 0 };
+        try {
+            isTopLayer = isTopLayer || floating.matches(':popover-open');
+        }
+        catch (error) { }
+        try {
+            isTopLayer = isTopLayer || floating.matches(':open');
+        }
+        catch (error) { }
+        try {
+            isTopLayer = isTopLayer || floating.matches(':modal');
+        }
+        catch (error) { }
+        if (!isTopLayer) {
+            return { x, y, data: diffCoords };
+        }
+        const containingBlock = getContainingBlock(referenceEl);
+        const inContainingBlock = containingBlock && !isWindow(containingBlock);
+        if (isTopLayer && inContainingBlock) {
+            const rect = referenceEl.getBoundingClientRect();
+            diffCoords.x = Math.trunc(rect.x - referenceEl.offsetLeft);
+            diffCoords.y = Math.trunc(rect.y - referenceEl.offsetTop);
+        }
+        return {
+            x: x + diffCoords.x,
+            y: y + diffCoords.y,
+            data: diffCoords
+        };
+    }
+});
+function isWindow(value) {
+    return (value &&
+        value.document &&
+        value.location &&
+        value.alert &&
+        value.setInterval);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tylertech/forge-core",
-  "version": "2.4.0-dev.0",
+  "version": "2.4.0-dev.1",
   "description": "A library of core web utilities that support Forge Web Component libraries.",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",

package/typings/utils/position-utils.d.ts

@@ -39,7 +39,7 @@ export interface IPositionElementConfig {
     topLayer?: boolean;
     /** The positioning strategy. */
     strategy?: PositionStrategy;
-    /** Should positining be applied using a `transform` style. */
+    /** 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';

package/typings/utils/top-layer-middleware.d.ts

@@ -0,0 +1,2 @@
+import type { Middleware } from '@floating-ui/dom';
+export declare const topLayer: () => Middleware;

package/esm/utils/top-layer-over-transforms.js

@@ -1,69 +0,0 @@
-import { getContainingBlock, getWindow, isContainingBlock } from '@floating-ui/utils/dom';
-export const topLayerOverTransforms = () => ({
-    name: 'topLayer',
-    async fn(middlewareArguments) {
-        const { x, y, elements: { reference, floating } } = middlewareArguments;
-        let onTopLayer = false;
-        let topLayerIsFloating = false;
-        let withinReference = false;
-        const diffCoords = { x: 0, y: 0 };
-        try {
-            onTopLayer = onTopLayer || floating.matches(':popover-open');
-        }
-        catch (error) { }
-        try {
-            onTopLayer = onTopLayer || floating.matches(':open');
-        }
-        catch (error) { }
-        try {
-            onTopLayer = onTopLayer || floating.matches(':modal');
-        }
-        catch (error) { }
-        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 (error) { }
-            });
-        }, { once: true });
-        floating.dispatchEvent(dialogAncestorQueryEvent);
-        let overTransforms = false;
-        const root = (withinReference ? reference : floating);
-        const containingBlock = isContainingBlock(root) ? root : getContainingBlock(root);
-        if (containingBlock !== null && getWindow(containingBlock) !== containingBlock) {
-            const css = getComputedStyle(containingBlock);
-            overTransforms = css.transform !== 'none' || css.filter ? css.filter !== 'none' : false;
-        }
-        if (onTopLayer && overTransforms && containingBlock) {
-            const rect = containingBlock.getBoundingClientRect();
-            diffCoords.x = rect.x;
-            diffCoords.y = rect.y;
-        }
-        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
-        };
-    }
-});

package/typings/utils/top-layer-over-transforms.d.ts

@@ -1,2 +0,0 @@
-import type { Middleware } from '@floating-ui/dom';
-export declare const topLayerOverTransforms: () => Middleware;