@zag-js/popper - npm Package Compare versions

Comparing version 0.0.0-dev-20220415160434 to 0.0.0-dev-20220416104915

dist/index.js

@@ -44,5 +44,14 @@ var __defProp = Object.defineProperty;
 
-// ../dom/dist/index.mjs
+// ../core/dist/index.mjs
 var noop = () => {
 };
+var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
+var isBoolean = (v) => v === true || v === false;
+
+// src/auto-update.ts
+var import_dom = require("@floating-ui/dom");
+
+// ../dom/dist/index.mjs
+var noop2 = () => {
+};
 function getListenerElements() {
@@ -61,3 +70,3 @@ ;
   if (!node)
-    return noop;
+    return noop2;
   const hash = JSON.stringify({ type, options });
@@ -118,14 +127,5 @@ const listenerElements = getListenerElements();
 }
-function getOwnerDocument(el) {
-  var _a;
-  if (isWindow(el))
-    return el.document;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
-}
 function isHTMLElement(v) {
   return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
 }
-function isWindow(value) {
-  return (value == null ? void 0 : value.toString()) === "[object Window]";
-}
 function getObservedElements() {
@@ -184,14 +184,11 @@ ;
 
-// ../core/dist/index.mjs
-var noop2 = () => {
-};
-var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
-var isBoolean = (v) => v === true || v === false;
-
 // src/auto-update.ts
-var import_dom = require("@floating-ui/dom");
 function resolveOptions(option) {
-  if (isBoolean(option))
-    return { ancestorResize: option, ancestorScroll: option, referenceResize: option };
-  return Object.assign({ ancestorResize: true, ancestorScroll: true, referenceResize: true }, 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
+  };
 }
@@ -222,3 +219,2 @@ function autoUpdate(reference, floating, update, options = false) {
 var cssVars = {
-  arrowShadowColor: toVar("--arrow-shadow-color"),
   arrowSize: toVar("--arrow-size"),
@@ -228,4 +224,3 @@ arrowSizeHalf: toVar("--arrow-size-half"),
   transformOrigin: toVar("--transform-origin"),
-  arrowOffset: toVar("--arrow-offset"),
-  boxShadow: toVar("--arrow-box-shadow")
+  arrowOffset: toVar("--arrow-offset")
 };
@@ -262,3 +257,3 @@ var transforms = {
     const { x, y } = (_a = middlewareData.arrow) != null ? _a : { x: 0, y: 0 };
-    const staticSide = {
+    const dir = {
       top: "bottom",
@@ -272,4 +267,3 @@ right: "left",
       left: `${x}px`,
-      [staticSide]: cssVars.arrowOffset.reference,
-      [cssVars.boxShadow.variable]: getBoxShadow(placement)
+      [dir]: cssVars.arrowOffset.reference
     });
@@ -279,12 +273,2 @@ return {};
 });
-function getBoxShadow(placement) {
-  if (placement.includes("top"))
-    return `1px 1px 1px 0 ${cssVars.arrowShadowColor.reference}`;
-  if (placement.includes("bottom"))
-    return `-1px -1px 1px 0 ${cssVars.arrowShadowColor.reference}`;
-  if (placement.includes("right"))
-    return `-1px 1px 1px 0 ${cssVars.arrowShadowColor.reference}`;
-  if (placement.includes("left"))
-    return `1px -1px 1px 0 ${cssVars.arrowShadowColor.reference}`;
-}
 
@@ -298,3 +282,4 @@ // src/get-placement.ts
   flip: true,
-  sameWidth: false
+  sameWidth: false,
+  overflowPadding: 8
 };
@@ -304,23 +289,41 @@ function getPlacement(reference, floating, options = {}) {
   if (reference == null || floating == null)
-    return noop2;
+    return noop;
   options = Object.assign({}, defaultOptions, options);
   const middleware = [transformOrigin];
+  const arrowEl = floating.querySelector("[data-part=arrow]");
   if (options.flip) {
-    middleware.push((0, import_dom2.flip)({ boundary: options.boundary, padding: 8 }));
+    middleware.push((0, import_dom2.flip)({
+      boundary: options.boundary,
+      padding: options.overflowPadding
+    }));
   }
   if (options.gutter || options.offset) {
+    const arrowOffset = arrowEl ? arrowEl.offsetHeight / 2 : 0;
     const data = options.gutter ? { mainAxis: options.gutter } : options.offset;
+    if ((data == null ? void 0 : data.mainAxis) != null)
+      data.mainAxis += arrowOffset;
     middleware.push((0, import_dom2.offset)(data));
   }
-  middleware.push((0, import_dom2.shift)({ boundary: options.boundary }));
-  const doc = getOwnerDocument(floating);
-  const arrowEl = doc.querySelector("[data-part=arrow]");
+  middleware.push((0, import_dom2.shift)({
+    boundary: options.boundary,
+    crossAxis: options.overlap,
+    padding: options.overflowPadding
+  }));
   if (arrowEl) {
     middleware.push((0, import_dom2.arrow)({ element: arrowEl, padding: 8 }), shiftArrow({ element: arrowEl }));
   }
-  if (options.sameWidth) {
+  if (options.sameWidth || options.fitViewport) {
     middleware.push((0, import_dom2.size)({
+      padding: options.overflowPadding,
       apply(data) {
-        const { width } = data.reference;
-        Object.assign(floating.style, { width: `${width}px`, minWidth: "unset" });
+        const { reference: reference2, height, width } = data;
+        if (options.sameWidth) {
+          Object.assign(floating.style, { width: `${reference2.width}px` });
+        }
+        if (options.fitViewport) {
+          Object.assign(floating.style, {
+            maxWidth: `${width}px`,
+            maxHeight: `${height}px`
+          });
+        }
       }
@@ -333,5 +336,15 @@ }));
     const { placement, strategy } = options;
-    (0, import_dom2.computePosition)(reference, floating, { placement, middleware, strategy }).then((data) => {
-      const { x, y, strategy: strategy2 } = data;
-      Object.assign(floating.style, { left: `${x}px`, top: `${y}px`, position: strategy2 });
+    (0, import_dom2.computePosition)(reference, floating, {
+      placement,
+      middleware,
+      strategy
+    }).then((data) => {
+      const x = Math.round(data.x);
+      const y = Math.round(data.y);
+      Object.assign(floating.style, {
+        position: data.strategy,
+        top: "0",
+        left: "0",
+        transform: `translate3d(${x}px, ${y}px, 0)`
+      });
       return data;
@@ -344,3 +357,3 @@ }).then((data) => {
   compute();
-  return pipe(autoUpdate(reference, floating, compute, options.listeners), (_a = options.onCleanup) != null ? _a : noop2);
+  return pipe(autoUpdate(reference, floating, compute, options.listeners), (_a = options.onCleanup) != null ? _a : noop);
 }
@@ -347,0 +360,0 @@

dist/middleware.d.ts

@@ -1,7 +0,3 @@
-import { Middleware, Placement } from "@floating-ui/dom";
+import { Middleware } from "@floating-ui/dom";
 export declare const cssVars: {
-    arrowShadowColor: {
-        variable: string;
-        reference: string;
-    };
     arrowSize: {
@@ -27,6 +23,2 @@ variable: string;
     };
-    boxShadow: {
-        variable: string;
-        reference: string;
-    };
 };
@@ -38,4 +30,3 @@ export declare const transformOrigin: Middleware;
 export declare const shiftArrow: (opts: ArrowOptions) => Middleware;
-export declare function getBoxShadow(placement: Placement): string;
 export {};
 //# sourceMappingURL=middleware.d.ts.map

dist/types.d.ts

@@ -25,2 +25,6 @@ import type { Boundary, Placement, ComputePositionReturn } from "@floating-ui/dom";
     /**
+     * The virtual padding around the viewport edges to check for overflow
+     */
+    overflowPadding?: number;
+    /**
      * Whether to flip the placement
@@ -30,2 +34,7 @@ */
     /**
+     * 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
@@ -35,2 +44,6 @@ */
     /**
+     * Whether the popover should fit the viewport.
+     */
+    fitViewport?: boolean;
+    /**
      * The overflow boundary of the reference element
@@ -37,0 +50,0 @@ */

package.json

 {
   "name": "@zag-js/popper",
-  "version": "0.0.0-dev-20220415160434",
+  "version": "0.0.0-dev-20220416104915",
   "description": "Dynamic positioning logic for ui machines",
@@ -29,4 +29,4 @@ "keywords": [
     "@floating-ui/dom": "^0.4.2",
-    "@zag-js/dom-utils": "^0.0.0-dev-20220415160434",
-    "@zag-js/utils": "^0.0.0-dev-20220415160434"
+    "@zag-js/dom-utils": "^0.0.0-dev-20220416104915",
+    "@zag-js/utils": "^0.0.0-dev-20220416104915"
   },
@@ -33,0 +33,0 @@ "scripts": {

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

174622

0.11%

Lines of code

869

3.33%

Number of medium supply chain risk alerts

0

-100%

Dependency changes

• Updated

  @zag-js/dom-utils@^0.0.0-dev-20220416104915

• Updated

  @zag-js/utils@^0.0.0-dev-20220416104915