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

package/esm/utils/position-utils.js

@@ -1,4 +1,4 @@
-import { computePosition, flip as flipMiddleware, hide as hideMiddleware, shift as shiftMiddleware, 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. */
@@ -16,15 +16,20 @@ export const positionOffsetMiddleware = ({ x: offsetX, y: offsetY }) => ({
  * @param {IPositionElementConfig} config Configuration to provide when positioning the element.
  * @returns {IElementPositionResult} The result of the positioning logic.
  */
-export async function positionElementAsync({ element, targetElement, placement = 'bottom-start', offset, strategy = 'absolute', apply = true, flip = true, flipOptions = {
+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(positionOffsetMiddleware(offset));
+        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));
@@ -41,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) {
@@ -60,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.1",
+  "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,12 +1,15 @@
-import { FlipOptions, ShiftOptions, AutoPlacementOptions, HideOptions, Middleware, Placement, Strategy } 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;
+/** @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. */
@@ -33,8 +36,14 @@ export interface IPositionElementConfig {
     auto?: boolean;
     /** Options to provide to the autoPlacement middleware. */
     autoOptions?: Partial<AutoPlacementOptions>;
-    /** Offset positioning to apply to the placement. */
-    offset?: IElementPosition;
+    /** Should any offset values be applied to the element. */
+    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. */
@@ -51,7 +60,7 @@ 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, 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.