@destyler/popper 0.2.11 → 0.2.12

package/dist/index.d.mts

@@ -1,5 +1,4 @@
 import { AutoUpdateOptions, Boundary, ComputePositionReturn, Placement, Placement as Placement$1, VirtualElement } from "@floating-ui/dom";
-
 //#region src/types.d.ts
 type MaybeRectElement = HTMLElement | VirtualElement | null;
 type MaybeElement = HTMLElement | null;
@@ -102,7 +101,7 @@ interface PositioningOptions {
 }
 //#endregion
 //#region src/get-placement.d.ts
-declare function getPlacement(referenceOrFn: MaybeFn<MaybeRectElement>, floatingOrFn: MaybeFn<MaybeElement>, opts?: PositioningOptions & {
+export declare function getPlacement(referenceOrFn: MaybeFn<MaybeRectElement>, floatingOrFn: MaybeFn<MaybeElement>, opts?: PositioningOptions & {
   defer?: boolean;
 }): () => void;
 //#endregion
@@ -134,7 +133,7 @@ declare const cssVars: {
 interface GetPlacementStylesOptions {
   placement?: Placement$1 | undefined;
 }
-declare function getPlacementStyles(options?: Pick<PositioningOptions, 'placement' | 'sameWidth' | 'fitViewport' | 'strategy'>): {
+export declare function getPlacementStyles(options?: Pick<PositioningOptions, 'placement' | 'sameWidth' | 'fitViewport' | 'strategy'>): {
   arrow: {
     readonly [cssVars.arrowSizeHalf.variable]: `calc(${string} / 2)`;
     readonly [cssVars.arrowOffset.variable]: `calc(${string} * -1)`;
@@ -167,7 +166,7 @@ declare function getPlacementStyles(options?: Pick<PositioningOptions, 'placemen
 };
 //#endregion
 //#region src/placement.d.ts
-declare function isValidPlacement(v: string): v is Placement$1;
-declare function getPlacementSide(placement: Placement$1): PlacementSide;
+export declare function isValidPlacement(v: string): v is Placement$1;
+export declare function getPlacementSide(placement: Placement$1): PlacementSide;
 //#endregion
-export { type AnchorRect, type AutoUpdateOptions, type Boundary, type ComputePositionReturn, type GetPlacementStylesOptions, type Placement, type PlacementAlign, type PlacementSide, type PositioningOptions, getPlacement, getPlacementSide, getPlacementStyles, isValidPlacement };
+export type { AnchorRect, AutoUpdateOptions, Boundary, ComputePositionReturn, GetPlacementStylesOptions, Placement, PlacementAlign, PlacementSide, PositioningOptions };

package/dist/index.mjs

@@ -1,7 +1,6 @@
 import { getComputedStyle, getWindow, isHTMLElement, raf } from "@destyler/dom";
 import { compact, isNull, noop, runIfFn } from "@destyler/utils";
 import { arrow, autoUpdate, computePosition, flip, hide, limitShift, offset, shift, size } from "@floating-ui/dom";
-
 //#region src/get-anchor.ts
 function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
 	if (typeof DOMRect === "function") return new DOMRect(x, y, width, height);
@@ -36,7 +35,6 @@ function getAnchorElement(anchorElement, getAnchorRect) {
 		}
 	};
 }
-
 //#endregion
 //#region src/middleware.ts
 const toVar = (value) => ({
@@ -50,27 +48,27 @@ const cssVars = {
 	transformOrigin: toVar("--transform-origin"),
 	arrowOffset: toVar("--arrow-offset")
 };
-function getTransformOrigin(arrow$1) {
+function getTransformOrigin(arrow) {
 	return {
 		"top": "bottom center",
-		"top-start": arrow$1 ? `${arrow$1.x}px bottom` : "left bottom",
-		"top-end": arrow$1 ? `${arrow$1.x}px bottom` : "right bottom",
+		"top-start": arrow ? `${arrow.x}px bottom` : "left bottom",
+		"top-end": arrow ? `${arrow.x}px bottom` : "right bottom",
 		"bottom": "top center",
-		"bottom-start": arrow$1 ? `${arrow$1.x}px top` : "top left",
-		"bottom-end": arrow$1 ? `${arrow$1.x}px top` : "top right",
+		"bottom-start": arrow ? `${arrow.x}px top` : "top left",
+		"bottom-end": arrow ? `${arrow.x}px top` : "top right",
 		"left": "right center",
-		"left-start": arrow$1 ? `right ${arrow$1.y}px` : "right top",
-		"left-end": arrow$1 ? `right ${arrow$1.y}px` : "right bottom",
+		"left-start": arrow ? `right ${arrow.y}px` : "right top",
+		"left-end": arrow ? `right ${arrow.y}px` : "right bottom",
 		"right": "left center",
-		"right-start": arrow$1 ? `left ${arrow$1.y}px` : "left top",
-		"right-end": arrow$1 ? `left ${arrow$1.y}px` : "left bottom"
+		"right-start": arrow ? `left ${arrow.y}px` : "left top",
+		"right-end": arrow ? `left ${arrow.y}px` : "left bottom"
 	};
 }
 const transformOriginMiddleware = {
 	name: "transformOrigin",
 	fn({ placement, elements, middlewareData }) {
-		const { arrow: arrow$1 } = middlewareData;
-		const transformOrigin = getTransformOrigin(arrow$1)[placement];
+		const { arrow } = middlewareData;
+		const transformOrigin = getTransformOrigin(arrow)[placement];
 		const { floating } = elements;
 		floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin);
 		return { data: { transformOrigin } };
@@ -99,7 +97,6 @@ function shiftArrowMiddleware(arrowEl) {
 		}
 	};
 }
-
 //#endregion
 //#region src/placement.ts
 function isValidPlacement(v) {
@@ -116,7 +113,6 @@ function getPlacementDetails(placement) {
 function getPlacementSide(placement) {
 	return placement.split("-")[0];
 }
-
 //#endregion
 //#region src/get-placement.ts
 const defaultOptions = {
@@ -153,9 +149,10 @@ function getOffsetMiddleware(arrowElement, opts) {
 		const gutter = opts.offset?.mainAxis ?? opts.gutter;
 		const mainAxis = typeof gutter === "number" ? gutter + arrowOffset : gutter ?? arrowOffset;
 		const { hasAlign } = getPlacementDetails(placement);
-		const shift$1 = !hasAlign ? opts.shift : void 0;
+		const shift = !hasAlign ? opts.shift : void 0;
+		const crossAxis = opts.offset?.crossAxis ?? shift;
 		return compact({
-			crossAxis: opts.offset?.crossAxis ?? shift$1,
+			crossAxis,
 			mainAxis,
 			alignmentAxis: opts.shift
 		});
@@ -241,12 +238,14 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
 		const y = roundByDpr(win, pos.y);
 		floating.style.setProperty("--x", `${x}px`);
 		floating.style.setProperty("--y", `${y}px`);
-		if (options.hideWhenDetached) if (pos.middlewareData.hide?.referenceHidden) {
-			floating.style.setProperty("visibility", "hidden");
-			floating.style.setProperty("pointer-events", "none");
-		} else {
-			floating.style.removeProperty("visibility");
-			floating.style.removeProperty("pointer-events");
+		if (options.hideWhenDetached) {
+			if (pos.middlewareData.hide?.referenceHidden) {
+				floating.style.setProperty("visibility", "hidden");
+				floating.style.setProperty("pointer-events", "none");
+			} else {
+				floating.style.removeProperty("visibility");
+				floating.style.removeProperty("pointer-events");
+			}
 		}
 		const contentEl = floating.firstElementChild;
 		if (contentEl) {
@@ -281,7 +280,6 @@ function getPlacement(referenceOrFn, floatingOrFn, opts = {}) {
 		cleanups.forEach((fn) => fn?.());
 	};
 }
-
 //#endregion
 //#region src/get-styles.ts
 const ARROW_FLOATING_STYLE = {
@@ -324,6 +322,5 @@ function getPlacementStyles(options = {}) {
 		}
 	};
 }
-
 //#endregion
-export { getPlacement, getPlacementSide, getPlacementStyles, isValidPlacement };
+export { getPlacement, getPlacementSide, getPlacementStyles, isValidPlacement };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/popper",
   "type": "module",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "Dynamic positioning logic for UI machines",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -22,9 +22,9 @@
     "dist"
   ],
   "dependencies": {
-    "@floating-ui/dom": "1.7.4",
-    "@destyler/dom": "0.2.11",
-    "@destyler/utils": "0.2.11"
+    "@destyler/dom": "0.2.12",
+    "@destyler/utils": "0.2.12",
+    "@floating-ui/dom": "1.8.0"
   },
   "publishConfig": {
     "access": "public"