@zag-js/popper 0.1.8 → 0.1.9

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Chakra UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -1,3 +1,109 @@
-export { getPlacement, getBasePlacement } from "./get-placement";
-export { getPlacementStyles } from "./get-styles";
-export type { Placement, PositioningOptions } from "./types";
+import { Placement, Boundary, ComputePositionReturn, ComputePositionConfig, VirtualElement } from '@floating-ui/dom';
+export { Placement } from '@floating-ui/dom';
+
+declare type AutoUpdateOptions = {
+    ancestorScroll?: boolean;
+    ancestorResize?: boolean;
+    referenceResize?: boolean;
+};
+
+declare type PositioningOptions = {
+    /**
+     * The strategy to use for positioning
+     */
+    strategy?: "absolute" | "fixed";
+    /**
+     * The initial placement of the floating element
+     */
+    placement?: Placement;
+    /**
+     * The offset of the floating element
+     */
+    offset?: {
+        mainAxis?: number;
+        crossAxis?: number;
+    };
+    /**
+     * The main axis offset or gap between the reference and floating elements
+     */
+    gutter?: number;
+    /**
+     * The virtual padding around the viewport edges to check for overflow
+     */
+    overflowPadding?: number;
+    /**
+     * Whether to flip the placement
+     */
+    flip?: boolean;
+    /**
+     * Whether the floating element can overlap the reference element
+     * @default false
+     */
+    overlap?: boolean;
+    /**
+     * Whether to make the floating element same width as the reference element
+     */
+    sameWidth?: boolean;
+    /**
+     * Whether the popover should fit the viewport.
+     */
+    fitViewport?: boolean;
+    /**
+     * The overflow boundary of the reference element
+     */
+    boundary?: Boundary;
+    /**
+     * Options to activate auto-update listeners
+     */
+    listeners?: boolean | AutoUpdateOptions;
+    /**
+     * Function called when the placement is computed
+     */
+    onComplete?(data: ComputePositionReturn & {
+        compute: (config?: Omit<ComputePositionConfig, "platform">) => void;
+    }): void;
+    /**
+     * Function called on cleanup of all listeners
+     */
+    onCleanup?: VoidFunction;
+};
+declare type BasePlacement = "top" | "right" | "bottom" | "left";
+
+declare function getPlacement(reference: HTMLElement | VirtualElement | null, floating: HTMLElement | null, opts?: PositioningOptions): (() => void) | undefined;
+declare function getBasePlacement(placement: Placement): BasePlacement;
+
+declare type Options = {
+    measured: boolean;
+    strategy?: "absolute" | "fixed";
+    placement?: Placement;
+};
+declare function getPlacementStyles(options: Options): {
+    arrow: {
+        readonly [x: string]: string | 0 | undefined;
+        readonly position: "absolute";
+        readonly width: string;
+        readonly height: string;
+        readonly opacity: 0 | undefined;
+    };
+    innerArrow: {
+        readonly transform: any;
+        readonly background: string;
+        readonly top: "0";
+        readonly left: "0";
+        readonly width: "100%";
+        readonly height: "100%";
+        readonly position: "absolute";
+        readonly zIndex: "inherit";
+    };
+    floating: {
+        position: "absolute" | "fixed";
+        readonly top?: 0 | undefined;
+        readonly left?: 0 | undefined;
+        readonly opacity?: 0 | undefined;
+        readonly transform?: "translate3d(0, -200%, 0)" | undefined;
+        readonly pointerEvents?: "none" | undefined;
+        readonly minWidth: "max-content";
+    };
+};
+
+export { PositioningOptions, getBasePlacement, getPlacement, getPlacementStyles };

package/dist/index.js

@@ -1,25 +1,8 @@
 "use strict";
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -60,7 +43,7 @@ var import_dom = require("@floating-ui/dom");
 // ../dom/dist/index.mjs
 var runIfFn = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
+  return res ?? void 0;
 };
 var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 function isHTMLElement(v) {
@@ -129,12 +112,11 @@ function isEqual(rect1, rect2) {
 
 // src/auto-update.ts
 function resolveOptions(option) {
-  var _a, _b, _c;
   const bool = isBoolean(option);
   return {
-    ancestorResize: bool ? option : (_a = option.ancestorResize) != null ? _a : true,
-    ancestorScroll: bool ? option : (_b = option.ancestorScroll) != null ? _b : true,
-    referenceResize: bool ? option : (_c = option.referenceResize) != null ? _c : true
+    ancestorResize: bool ? option : option.ancestorResize ?? true,
+    ancestorScroll: bool ? option : option.ancestorScroll ?? true,
+    referenceResize: bool ? option : option.referenceResize ?? true
   };
 }
 function autoUpdate(reference, floating, update, options = false) {
@@ -273,11 +255,12 @@ function getPlacement(reference, floating, opts = {}) {
     if (!reference || !floating)
       return;
     const { placement, strategy } = options;
-    (0, import_dom2.computePosition)(reference, floating, __spreadValues({
+    (0, import_dom2.computePosition)(reference, floating, {
       placement,
       middleware,
-      strategy
-    }, config)).then((data) => {
+      strategy,
+      ...config
+    }).then((data) => {
       var _a;
       const x = Math.round(data.x);
       const y = Math.round(data.y);
@@ -287,7 +270,7 @@ function getPlacement(reference, floating, opts = {}) {
         left: "0",
         transform: `translate3d(${x}px, ${y}px, 0)`
       });
-      (_a = options.onComplete) == null ? void 0 : _a.call(options, __spreadProps(__spreadValues({}, data), { compute }));
+      (_a = options.onComplete) == null ? void 0 : _a.call(options, { ...data, compute });
     });
   }
   compute();
@@ -333,9 +316,16 @@ function getPlacementStyles(options) {
       position: "absolute",
       zIndex: "inherit"
     },
-    floating: __spreadValues({
+    floating: {
       position: strategy,
-      minWidth: "max-content"
-    }, !measured && UNMEASURED_FLOATING_STYLE)
+      minWidth: "max-content",
+      ...!measured && UNMEASURED_FLOATING_STYLE
+    }
   };
 }
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getBasePlacement,
+  getPlacement,
+  getPlacementStyles
+});

package/dist/index.mjs

@@ -1,23 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-
 // src/get-placement.ts
 import { arrow, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
 
@@ -35,7 +15,7 @@ import { getOverflowAncestors } from "@floating-ui/dom";
 // ../dom/dist/index.mjs
 var runIfFn = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
+  return res ?? void 0;
 };
 var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 function isHTMLElement(v) {
@@ -104,12 +84,11 @@ function isEqual(rect1, rect2) {
 
 // src/auto-update.ts
 function resolveOptions(option) {
-  var _a, _b, _c;
   const bool = isBoolean(option);
   return {
-    ancestorResize: bool ? option : (_a = option.ancestorResize) != null ? _a : true,
-    ancestorScroll: bool ? option : (_b = option.ancestorScroll) != null ? _b : true,
-    referenceResize: bool ? option : (_c = option.referenceResize) != null ? _c : true
+    ancestorResize: bool ? option : option.ancestorResize ?? true,
+    ancestorScroll: bool ? option : option.ancestorScroll ?? true,
+    referenceResize: bool ? option : option.referenceResize ?? true
   };
 }
 function autoUpdate(reference, floating, update, options = false) {
@@ -248,11 +227,12 @@ function getPlacement(reference, floating, opts = {}) {
     if (!reference || !floating)
       return;
     const { placement, strategy } = options;
-    computePosition(reference, floating, __spreadValues({
+    computePosition(reference, floating, {
       placement,
       middleware,
-      strategy
-    }, config)).then((data) => {
+      strategy,
+      ...config
+    }).then((data) => {
       var _a;
       const x = Math.round(data.x);
       const y = Math.round(data.y);
@@ -262,7 +242,7 @@ function getPlacement(reference, floating, opts = {}) {
         left: "0",
         transform: `translate3d(${x}px, ${y}px, 0)`
       });
-      (_a = options.onComplete) == null ? void 0 : _a.call(options, __spreadProps(__spreadValues({}, data), { compute }));
+      (_a = options.onComplete) == null ? void 0 : _a.call(options, { ...data, compute });
     });
   }
   compute();
@@ -308,10 +288,11 @@ function getPlacementStyles(options) {
       position: "absolute",
       zIndex: "inherit"
     },
-    floating: __spreadValues({
+    floating: {
       position: strategy,
-      minWidth: "max-content"
-    }, !measured && UNMEASURED_FLOATING_STYLE)
+      minWidth: "max-content",
+      ...!measured && UNMEASURED_FLOATING_STYLE
+    }
   };
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popper",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Dynamic positioning logic for ui machines",
   "keywords": [
     "js",
@@ -25,17 +25,20 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@floating-ui/dom": "0.5.4",
-    "@zag-js/dom-utils": "0.1.7",
-    "@zag-js/utils": "0.1.2"
+    "@floating-ui/dom": "0.5.4"
+  },
+  "devDependencies": {
+    "@zag-js/dom-utils": "0.1.8",
+    "@zag-js/utils": "0.1.3"
   },
   "scripts": {
-    "build:fast": "zag build",
-    "start": "zag build --watch",
-    "build": "zag build --prod",
+    "build-fast": "tsup src/index.ts --format=esm,cjs",
+    "start": "pnpm build --watch",
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
     "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
     "lint": "eslint src --ext .ts,.tsx",
-    "test:ci": "yarn test --ci --runInBand",
-    "test:watch": "yarn test --watch --updateSnapshot"
+    "test-ci": "pnpm test --ci --runInBand",
+    "test-watch": "pnpm test --watch -u",
+    "typecheck": "tsc --noEmit"
   }
-}
+}

package/dist/auto-update.d.ts

@@ -1,8 +0,0 @@
-import type { Placement, ReferenceElement } from "@floating-ui/dom";
-export type { Placement };
-export declare type AutoUpdateOptions = {
-    ancestorScroll?: boolean;
-    ancestorResize?: boolean;
-    referenceResize?: boolean;
-};
-export declare function autoUpdate(reference: ReferenceElement, floating: HTMLElement, update: () => void, options?: boolean | AutoUpdateOptions): () => void;

package/dist/get-placement.d.ts

@@ -1,4 +0,0 @@
-import type { Placement, VirtualElement } from "@floating-ui/dom";
-import type { BasePlacement, PositioningOptions } from "./types";
-export declare function getPlacement(reference: HTMLElement | VirtualElement | null, floating: HTMLElement | null, opts?: PositioningOptions): () => void;
-export declare function getBasePlacement(placement: Placement): BasePlacement;

package/dist/get-styles.d.ts

@@ -1,35 +0,0 @@
-import type { Placement } from "@floating-ui/dom";
-declare type Options = {
-    measured: boolean;
-    strategy?: "absolute" | "fixed";
-    placement?: Placement;
-};
-export declare function getPlacementStyles(options: Options): {
-    arrow: {
-        readonly [x: string]: string | 0;
-        readonly position: "absolute";
-        readonly width: string;
-        readonly height: string;
-        readonly opacity: 0;
-    };
-    innerArrow: {
-        readonly transform: any;
-        readonly background: string;
-        readonly top: "0";
-        readonly left: "0";
-        readonly width: "100%";
-        readonly height: "100%";
-        readonly position: "absolute";
-        readonly zIndex: "inherit";
-    };
-    floating: {
-        readonly position: "fixed";
-        readonly top: 0;
-        readonly left: 0;
-        readonly opacity: 0;
-        readonly transform: "translate3d(0, -200%, 0)";
-        readonly pointerEvents: "none";
-        readonly minWidth: "max-content";
-    };
-};
-export {};

package/dist/middleware.d.ts

@@ -1,29 +0,0 @@
-import type { Middleware } from "@floating-ui/dom";
-export declare const cssVars: {
-    arrowSize: {
-        variable: string;
-        reference: string;
-    };
-    arrowSizeHalf: {
-        variable: string;
-        reference: string;
-    };
-    arrowBg: {
-        variable: string;
-        reference: string;
-    };
-    transformOrigin: {
-        variable: string;
-        reference: string;
-    };
-    arrowOffset: {
-        variable: string;
-        reference: string;
-    };
-};
-export declare const transformOrigin: Middleware;
-declare type ArrowOptions = {
-    element: HTMLElement;
-};
-export declare const shiftArrow: (opts: ArrowOptions) => Middleware;
-export {};

package/dist/types.d.ts

@@ -1,64 +0,0 @@
-import type { Boundary, Placement, ComputePositionReturn, ComputePositionConfig } from "@floating-ui/dom";
-import type { AutoUpdateOptions } from "./auto-update";
-export type { Placement };
-export declare type PositioningOptions = {
-    /**
-     * The strategy to use for positioning
-     */
-    strategy?: "absolute" | "fixed";
-    /**
-     * The initial placement of the floating element
-     */
-    placement?: Placement;
-    /**
-     * The offset of the floating element
-     */
-    offset?: {
-        mainAxis?: number;
-        crossAxis?: number;
-    };
-    /**
-     * The main axis offset or gap between the reference and floating elements
-     */
-    gutter?: number;
-    /**
-     * The virtual padding around the viewport edges to check for overflow
-     */
-    overflowPadding?: number;
-    /**
-     * Whether to flip the placement
-     */
-    flip?: boolean;
-    /**
-     * Whether the floating element can overlap the reference element
-     * @default false
-     */
-    overlap?: boolean;
-    /**
-     * Whether to make the floating element same width as the reference element
-     */
-    sameWidth?: boolean;
-    /**
-     * Whether the popover should fit the viewport.
-     */
-    fitViewport?: boolean;
-    /**
-     * The overflow boundary of the reference element
-     */
-    boundary?: Boundary;
-    /**
-     * Options to activate auto-update listeners
-     */
-    listeners?: boolean | AutoUpdateOptions;
-    /**
-     * Function called when the placement is computed
-     */
-    onComplete?(data: ComputePositionReturn & {
-        compute: (config?: Omit<ComputePositionConfig, "platform">) => void;
-    }): void;
-    /**
-     * Function called on cleanup of all listeners
-     */
-    onCleanup?: VoidFunction;
-};
-export declare type BasePlacement = "top" | "right" | "bottom" | "left";