@zag-js/popper - npm Package Compare versions

Comparing version 0.0.0-dev-20240723090825 to 0.0.0-v1-beta-20250220125322

dist/index.d.ts

@@ -10,16 +10,20 @@ import { Placement, Boundary, AutoUpdateOptions, ComputePositionReturn, VirtualElement } from '@floating-ui/dom';
 interface AnchorRect {
-    x?: number;
-    y?: number;
-    width?: number;
-    height?: number;
+    x?: number | undefined;
+    y?: number | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
 }
 interface PositioningOptions {
     /**
+     * Whether the popover should be hidden when the reference element is detached
+     */
+    hideWhenDetached?: boolean | undefined;
+    /**
      * The strategy to use for positioning
      */
-    strategy?: "absolute" | "fixed";
+    strategy?: "absolute" | "fixed" | undefined;
     /**
      * The initial placement of the floating element
      */
-    placement?: Placement;
+    placement?: Placement | undefined;
     /**
@@ -31,15 +35,15 @@ * The offset of the floating element
         crossAxis?: number;
-    };
+    } | undefined;
     /**
      * The main axis offset or gap between the reference and floating elements
      */
-    gutter?: number;
+    gutter?: number | undefined;
     /**
      * The secondary axis offset or gap between the reference and floating elements
      */
-    shift?: number;
+    shift?: number | undefined;
     /**
      * The virtual padding around the viewport edges to check for overflow
      */
-    overflowPadding?: number;
+    overflowPadding?: number | undefined;
     /**
@@ -49,11 +53,11 @@ * The minimum padding between the arrow and the floating element's corner.
      */
-    arrowPadding?: number;
+    arrowPadding?: number | undefined;
     /**
      * Whether to flip the placement
      */
-    flip?: boolean | Placement[];
+    flip?: boolean | Placement[] | undefined;
     /**
      * Whether the popover should slide when it overflows.
      */
-    slide?: boolean;
+    slide?: boolean | undefined;
     /**
@@ -63,33 +67,33 @@ * Whether the floating element can overlap the reference element
      */
-    overlap?: boolean;
+    overlap?: boolean | undefined;
     /**
      * Whether to make the floating element same width as the reference element
      */
-    sameWidth?: boolean;
+    sameWidth?: boolean | undefined;
     /**
      * Whether the popover should fit the viewport.
      */
-    fitViewport?: boolean;
+    fitViewport?: boolean | undefined;
     /**
      * The overflow boundary of the reference element
      */
-    boundary?: Boundary | (() => Boundary);
+    boundary?: (() => Boundary) | undefined;
     /**
      * Options to activate auto-update listeners
      */
-    listeners?: boolean | AutoUpdateOptions;
+    listeners?: boolean | AutoUpdateOptions | undefined;
     /**
      * Function called when the placement is computed
      */
-    onComplete?(data: ComputePositionReturn): void;
+    onComplete?: ((data: ComputePositionReturn) => void) | undefined;
     /**
      * Function called when the floating element is positioned or not
      */
-    onPositioned?(data: {
+    onPositioned?: ((data: {
         placed: boolean;
-    }): void;
+    }) => void) | undefined;
     /**
      *  Function that returns the anchor rect
      */
-    getAnchorRect?: (element: HTMLElement | VirtualElement | null) => AnchorRect | null;
+    getAnchorRect?: ((element: HTMLElement | VirtualElement | null) => AnchorRect | null) | undefined;
     /**
@@ -99,5 +103,5 @@ * A callback that will be called when the popover needs to calculate its
      */
-    updatePosition?: (data: {
+    updatePosition?: ((data: {
         updatePosition: () => Promise<void>;
-    }) => void | Promise<void>;
+    }) => void | Promise<void>) | undefined;
 }
@@ -110,3 +114,3 @@
 interface GetPlacementStylesOptions {
-    placement?: Placement;
+    placement?: Placement | undefined;
 }
@@ -113,0 +117,0 @@ declare function getPlacementStyles(options?: Pick<PositioningOptions, "placement" | "sameWidth" | "fitViewport" | "strategy">): {

dist/index.js

@@ -1,37 +0,8 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  getPlacement: () => getPlacement,
-  getPlacementSide: () => getPlacementSide,
-  getPlacementStyles: () => getPlacementStyles,
-  isValidPlacement: () => isValidPlacement
-});
-module.exports = __toCommonJS(src_exports);
+var dom = require('@floating-ui/dom');
+var domQuery = require('@zag-js/dom-query');
+var utils = require('@zag-js/utils');
 
 // src/get-placement.ts
-var import_dom = require("@floating-ui/dom");
-var import_dom_query2 = require("@zag-js/dom-query");
-var import_utils = require("@zag-js/utils");
-
-// src/get-anchor.ts
-var import_dom_query = require("@zag-js/dom-query");
 function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
@@ -60,3 +31,3 @@ if (typeof DOMRect === "function") {
   return {
-    contextElement: (0, import_dom_query.isHTMLElement)(anchorElement) ? anchorElement : void 0,
+    contextElement: domQuery.isHTMLElement(anchorElement) ? anchorElement : void 0,
     getBoundingClientRect: () => {
@@ -165,7 +136,7 @@ const anchor = anchorElement;
 function getBoundaryMiddleware(opts) {
-  return (0, import_utils.runIfFn)(opts.boundary);
+  return utils.runIfFn(opts.boundary);
 }
 function getArrowMiddleware(arrowElement, opts) {
   if (!arrowElement) return;
-  return (0, import_dom.arrow)({
+  return dom.arrow({
     element: arrowElement,
@@ -176,4 +147,4 @@ padding: opts.arrowPadding
 function getOffsetMiddleware(arrowElement, opts) {
-  if ((0, import_utils.isNull)(opts.offset ?? opts.gutter)) return;
-  return (0, import_dom.offset)(({ placement }) => {
+  if (utils.isNull(opts.offset ?? opts.gutter)) return;
+  return dom.offset(({ placement }) => {
     const arrowOffset = (arrowElement?.clientHeight || 0) / 2;
@@ -185,3 +156,3 @@ const gutter = opts.offset?.mainAxis ?? opts.gutter;
     const crossAxis = opts.offset?.crossAxis ?? shift2;
-    return (0, import_utils.compact)({
+    return utils.compact({
       crossAxis,
@@ -195,3 +166,3 @@ mainAxis,
   if (!opts.flip) return;
-  return (0, import_dom.flip)({
+  return dom.flip({
     boundary: getBoundaryMiddleware(opts),
@@ -204,3 +175,3 @@ padding: opts.overflowPadding,
   if (!opts.slide && !opts.overlap) return;
-  return (0, import_dom.shift)({
+  return dom.shift({
     boundary: getBoundaryMiddleware(opts),
@@ -210,7 +181,7 @@ mainAxis: opts.slide,
     padding: opts.overflowPadding,
-    limiter: (0, import_dom.limitShift)()
+    limiter: dom.limitShift()
   });
 }
 function getSizeMiddleware(opts) {
-  return (0, import_dom.size)({
+  return dom.size({
     padding: opts.overflowPadding,
@@ -228,2 +199,6 @@ apply({ elements, rects, availableHeight, availableWidth }) {
 }
+function hideWhenDetachedMiddleware(opts) {
+  if (!opts.hideWhenDetached) return;
+  return dom.hide({ strategy: "referenceHidden", boundary: opts.boundary?.() ?? "clippingAncestors" });
+}
 function getAutoUpdateOptions(opts) {
@@ -249,2 +224,3 @@ if (!opts) return {};
     getSizeMiddleware(options),
+    hideWhenDetachedMiddleware(options),
     rectMiddleware
@@ -255,3 +231,3 @@ ];
     if (!reference || !floating) return;
-    const pos = await (0, import_dom.computePosition)(reference, floating, {
+    const pos = await dom.computePosition(reference, floating, {
       placement,
@@ -263,3 +239,3 @@ middleware,
     onPositioned?.({ placed: true });
-    const win = (0, import_dom_query2.getWindow)(floating);
+    const win = domQuery.getWindow(floating);
     const x = roundByDpr(win, pos.x);
@@ -269,6 +245,16 @@ const y = roundByDpr(win, pos.y);
     floating.style.setProperty("--y", `${y}px`);
+    if (options.hideWhenDetached) {
+      const isHidden = pos.middlewareData.hide?.referenceHidden;
+      if (isHidden) {
+        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) {
-      const zIndex = win.getComputedStyle(contentEl).zIndex;
-      floating.style.setProperty("--z-index", zIndex);
+      const styles = domQuery.getComputedStyle(contentEl);
+      floating.style.setProperty("--z-index", styles.zIndex);
     }
@@ -285,3 +271,3 @@ };
   const autoUpdateOptions = getAutoUpdateOptions(options.listeners);
-  const cancelAutoUpdate = options.listeners ? (0, import_dom.autoUpdate)(reference, floating, update, autoUpdateOptions) : import_utils.noop;
+  const cancelAutoUpdate = options.listeners ? dom.autoUpdate(reference, floating, update, autoUpdateOptions) : utils.noop;
   update();
@@ -295,3 +281,3 @@ return () => {
   const { defer, ...options } = opts;
-  const func = defer ? import_dom_query2.raf : (v) => v();
+  const func = defer ? domQuery.raf : (v) => v();
   const cleanups = [];
@@ -353,9 +339,6 @@ cleanups.push(
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  getPlacement,
-  getPlacementSide,
-  getPlacementStyles,
-  isValidPlacement
-});
-//# sourceMappingURL=index.js.map
+
+exports.getPlacement = getPlacement;
+exports.getPlacementSide = getPlacementSide;
+exports.getPlacementStyles = getPlacementStyles;
+exports.isValidPlacement = isValidPlacement;

package.json

 {
   "name": "@zag-js/popper",
-  "version": "0.0.0-dev-20240723090825",
+  "version": "0.0.0-v1-beta-20250220125322",
   "description": "Dynamic positioning logic for ui machines",
@@ -16,4 +16,3 @@ "keywords": [
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
@@ -27,5 +26,5 @@ "publishConfig": {
   "dependencies": {
-    "@floating-ui/dom": "1.6.7",
-    "@zag-js/dom-query": "0.0.0-dev-20240723090825",
-    "@zag-js/utils": "0.0.0-dev-20240723090825"
+    "@floating-ui/dom": "1.6.13",
+    "@zag-js/dom-query": "0.0.0-v1-beta-20250220125322",
+    "@zag-js/utils": "0.0.0-v1-beta-20250220125322"
   },
@@ -49,5 +48,5 @@ "devDependencies": {
     "build": "tsup",
-    "lint": "eslint src --ext .ts,.tsx",
+    "lint": "eslint src",
     "typecheck": "tsc --noEmit"
   }
 }

No alert changes

Worsened metrics

Total package byte prevSize

33726

decreased by-62.6%

Number of package files

7

decreased by-56.25%

Lines of code

780

decreased by-36.48%

Dependency changes

• + Added@floating-ui/dom@1.6.13(transitive)

• + Added@zag-js/dom-query@0.0.0-v1-beta-20250220125322(transitive)

• + Added@zag-js/types@0.0.0-v1-beta-20250220125322(transitive)

• + Added@zag-js/utils@0.0.0-v1-beta-20250220125322(transitive)

• + Addedcsstype@3.1.3(transitive)

• - Removed@floating-ui/dom@1.6.7(transitive)

• - Removed@zag-js/dom-query@0.0.0-dev-20240723090825(transitive)

• - Removed@zag-js/utils@0.0.0-dev-20240723090825(transitive)

• Updated@floating-ui/dom@1.6.13

• Updated@zag-js/dom-query@0.0.0-v1-beta-20250220125322

• Updated@zag-js/utils@0.0.0-v1-beta-20250220125322