@tylertech/forge-core 2.4.0-dev.2 → 2.4.0-dev.3

package/esm/utils/position-utils.js

@@ -1,6 +1,16 @@
-import { computePosition, flip as flipMiddleware, hide as hideMiddleware, shift as shiftMiddleware, offset as offsetMiddleware, autoPlacement as autoPlacementMiddleware } from '@floating-ui/dom';
+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 } 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',
+    fn({ x, y }) {
+        return {
+            x: x + offsetX,
+            y: y + offsetY
+        };
+    }
+});
 /**
  * Calculates an elements position relative to another element.
  * @param {IPositionElementConfig} config Configuration to provide when positioning the element.
@@ -9,12 +19,17 @@ import { topLayer as topLayerMiddleware } from './top-layer-middleware';
 export async function positionElementAsync({ element, targetElement, placement = 'bottom-start', offset = false, offsetOptions, 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, topLayer = false, transform = true, translateFunction = 'translate3d' }) {
+}, auto = false, autoOptions, shift = true, shiftOptions, hide = false, hideOptions, arrowElement, arrowOptions = {}, topLayer = false, transform = true, translateFunction = 'translate3d' }) {
     var _a;
     const middleware = [];
     // Order of the following middleware is **important**
     if (offset) {
-        middleware.push(offsetMiddleware(offsetOptions));
+        if (typeof offset === 'object' && (offset.hasOwnProperty('x') || offset.hasOwnProperty('y'))) {
+            middleware.push(positionOffsetMiddleware(offset));
+        }
+        else {
+            middleware.push(offsetMiddleware(offsetOptions));
+        }
     }
     if (shift) {
         middleware.push(shiftMiddleware(shiftOptions));
@@ -31,7 +46,10 @@ export async function positionElementAsync({ element, targetElement, placement =
     if (topLayer) {
         middleware.push(topLayerMiddleware());
     }
-    const { x, y, middlewareData } = await computePosition(targetElement, element, { strategy, placement, middleware });
+    if (arrowElement) {
+        middleware.push(arrowMiddleware(Object.assign(Object.assign({}, arrowOptions), { element: arrowElement })));
+    }
+    const { x, y, placement: finalPlacement, 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?
     if (apply) {
@@ -50,7 +68,13 @@ export async function positionElementAsync({ element, targetElement, placement =
         }
         Object.assign(element.style, styles);
     }
-    return { x, y, visibility };
+    return {
+        x,
+        y,
+        visibility,
+        placement: finalPlacement,
+        arrow: middlewareData.arrow
+    };
 }
 /**
  * Determines if the provided element is a child of a containment block.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tylertech/forge-core",
-  "version": "2.4.0-dev.2",
+  "version": "2.4.0-dev.3",
   "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

@@ -1,11 +1,16 @@
-import { FlipOptions, ShiftOptions, AutoPlacementOptions, HideOptions, Placement, Strategy, OffsetOptions } from '@floating-ui/dom';
+import { FlipOptions, ShiftOptions, AutoPlacementOptions, HideOptions, Middleware, Placement, Strategy, OffsetOptions, MiddlewareData, ArrowOptions } from '@floating-ui/dom';
 export declare type PositionPlacement = Placement;
 export declare type PositionStrategy = Strategy;
-export interface IElementPositionResult {
-    visibility: 'visible' | 'hidden';
+/** @deprecated Will be removed in next major version, use `offsetOptions` instead. */
+export interface IElementPosition {
     x: number;
     y: number;
 }
+export interface IElementPositionResult extends IElementPosition {
+    visibility: 'visible' | 'hidden';
+    placement: PositionPlacement;
+    arrow?: MiddlewareData['arrow'];
+}
 export interface IPositionElementConfig {
     /** The element to apply position to. */
     element: HTMLElement;
@@ -32,9 +37,13 @@ export interface IPositionElementConfig {
     /** Options to provide to the autoPlacement middleware. */
     autoOptions?: Partial<AutoPlacementOptions>;
     /** Should any offset values be applied to the element. */
-    offset?: boolean;
-    /**  */
+    offset?: boolean | IElementPosition;
+    /** 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. */
@@ -44,12 +53,14 @@ export interface IPositionElementConfig {
     /** The CSS `translate` function to apply to the `transform`. Only applied when `transform` is `true`. */
     translateFunction?: 'translate3d' | 'translate';
 }
+/** Adjusts the x and y axes by a specified offset amount. */
+export declare const positionOffsetMiddleware: ({ x: offsetX, y: offsetY }: IElementPosition) => Middleware;
 /**
  * Calculates an elements position relative to another element.
  * @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, offsetOptions, strategy, apply, flip, flipOptions, auto, autoOptions, shift, shiftOptions, hide, hideOptions, topLayer, transform, translateFunction }: IPositionElementConfig): Promise<IElementPositionResult>;
+export declare function positionElementAsync({ element, targetElement, placement, offset, offsetOptions, strategy, apply, flip, flipOptions, auto, autoOptions, shift, shiftOptions, hide, hideOptions, arrowElement, arrowOptions, topLayer, transform, translateFunction }: IPositionElementConfig): Promise<IElementPositionResult>;
 /**
  * Determines if the provided element is a child of a containment block.
  * @param element The element to check.