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

package/esm/utils/position-utils.js

@@ -1,4 +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';
 /** Adjusts the x and y axes by a specified offset amount. */
 export const positionOffsetMiddleware = ({ x: offsetX, y: offsetY }) => ({
     name: 'positionOffset',
@@ -17,7 +19,7 @@ export const positionOffsetMiddleware = ({ x: offsetX, y: offsetY }) => ({
 export async function positionElementAsync({ element, targetElement, placement = 'bottom-start', offset, strategy = 'absolute', apply = true, flip = true, flipOptions = {
     fallbackPlacements: ['top-start', 'top', 'top-end', 'left-start', 'left', 'left-end', 'right-start', 'right', 'right-end'],
     fallbackStrategy: 'initialPlacement'
-}, auto = false, autoOptions, shift = true, shiftOptions, hide = false, hideOptions, transform = true, translateFunction = 'translate3d' }) {
+}, auto = false, autoOptions, shift = true, shiftOptions, hide = false, hideOptions, topLayer = false, transform = true, translateFunction = 'translate3d' }) {
     var _a;
     const middleware = [];
     // Order of the following middleware is **important**
@@ -36,6 +38,9 @@ export async function positionElementAsync({ element, targetElement, placement =
     if (hide) {
         middleware.push(hideMiddleware(hideOptions));
     }
+    if (topLayer) {
+        middleware.push(topLayerOverTransforms());
+    }
     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';
     // Should we apply the position information to the element?
@@ -57,3 +62,11 @@ export async function positionElementAsync({ element, targetElement, placement =
     }
     return { x, y, visibility };
 }
+/**
+ * Determines if the provided element is a child of a containment block.
+ * @param element The element to check.
+ * @returns {boolean} `true` if the element is within a containment block, otherwise `false`.
+ */
+export function isWithinContainingBlock(element) {
+    return Boolean(getContainingBlock(element));
+}

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

@@ -0,0 +1,69 @@
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tylertech/forge-core",
-  "version": "2.3.0",
+  "version": "2.4.0-dev.0",
   "description": "A library of core web utilities that support Forge Web Component libraries.",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
@@ -13,7 +13,7 @@
   "typings": "typings/index.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@floating-ui/dom": "^0.5.0",
+    "@floating-ui/dom": "^1.5.3",
     "tslib": "^2.3.1"
   }
-}
+}

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

@@ -1,8 +1,4 @@
-import { Options as FlipOptions } from '@floating-ui/core/src/middleware/flip';
-import { Options as AutoOptions } from '@floating-ui/core/src/middleware/autoPlacement';
-import { Options as ShiftOptions } from '@floating-ui/core/src/middleware/shift';
-import { Options as HideOptions } from '@floating-ui/core/src/middleware/hide';
-import { Middleware, Placement, Strategy } from '@floating-ui/dom';
+import { FlipOptions, ShiftOptions, AutoPlacementOptions, HideOptions, Middleware, Placement, Strategy } from '@floating-ui/dom';
 export declare type PositionPlacement = Placement;
 export declare type PositionStrategy = Strategy;
 export interface IElementPosition {
@@ -36,9 +32,11 @@ export interface IPositionElementConfig {
     /** Should the element automatically attempt to locate the best placement, */
     auto?: boolean;
     /** Options to provide to the autoPlacement middleware. */
-    autoOptions?: Partial<AutoOptions>;
+    autoOptions?: Partial<AutoPlacementOptions>;
     /** Offset positioning to apply to the placement. */
     offset?: IElementPosition;
+    /** Should the top-layer middleware be applied or not. */
+    topLayer?: boolean;
     /** The positioning strategy. */
     strategy?: PositionStrategy;
     /** Should positining be applied using a `transform` style. */
@@ -53,4 +51,10 @@ export declare const positionOffsetMiddleware: ({ x: offsetX, y: offsetY }: IEle
  * @param {IPositionElementConfig} config Configuration to provide when positioning the element.
  * @returns {IElementPositionResult} The result of the positioning logic.
  */
-export declare function positionElementAsync({ element, targetElement, placement, offset, strategy, apply, flip, flipOptions, auto, autoOptions, shift, shiftOptions, hide, hideOptions, transform, translateFunction }: IPositionElementConfig): Promise<IElementPositionResult>;
+export declare function positionElementAsync({ element, targetElement, placement, offset, strategy, apply, flip, flipOptions, auto, autoOptions, shift, shiftOptions, hide, hideOptions, topLayer, transform, translateFunction }: IPositionElementConfig): Promise<IElementPositionResult>;
+/**
+ * Determines if the provided element is a child of a containment block.
+ * @param element The element to check.
+ * @returns {boolean} `true` if the element is within a containment block, otherwise `false`.
+ */
+export declare function isWithinContainingBlock(element: Element): boolean;

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

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