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

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 { 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',
@@ -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(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';
     // 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-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.3.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",
@@ -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,12 +32,14 @@ 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. */
+    /** 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';
@@ -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-middleware.d.ts

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