@zag-js/popper 1.34.0 → 1.35.0

package/dist/get-styles.js

@@ -0,0 +1,73 @@
+"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);
+
+// src/get-styles.ts
+var get_styles_exports = {};
+__export(get_styles_exports, {
+  getPlacementStyles: () => getPlacementStyles
+});
+module.exports = __toCommonJS(get_styles_exports);
+var import_middleware = require("./middleware.cjs");
+var ARROW_FLOATING_STYLE = {
+  bottom: "rotate(45deg)",
+  left: "rotate(135deg)",
+  top: "rotate(225deg)",
+  right: "rotate(315deg)"
+};
+function getPlacementStyles(options = {}) {
+  const { placement, sameWidth, fitViewport, strategy = "absolute" } = options;
+  return {
+    arrow: {
+      position: "absolute",
+      width: import_middleware.cssVars.arrowSize.reference,
+      height: import_middleware.cssVars.arrowSize.reference,
+      [import_middleware.cssVars.arrowSizeHalf.variable]: `calc(${import_middleware.cssVars.arrowSize.reference} / 2)`,
+      [import_middleware.cssVars.arrowOffset.variable]: `calc(${import_middleware.cssVars.arrowSizeHalf.reference} * -1)`
+    },
+    arrowTip: {
+      // @ts-expect-error - Fix this
+      transform: placement ? ARROW_FLOATING_STYLE[placement.split("-")[0]] : void 0,
+      background: import_middleware.cssVars.arrowBg.reference,
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      zIndex: "inherit"
+    },
+    floating: {
+      position: strategy,
+      isolation: "isolate",
+      minWidth: sameWidth ? void 0 : "max-content",
+      width: sameWidth ? "var(--reference-width)" : void 0,
+      maxWidth: fitViewport ? "var(--available-width)" : void 0,
+      maxHeight: fitViewport ? "var(--available-height)" : void 0,
+      pointerEvents: !placement ? "none" : void 0,
+      top: "0px",
+      left: "0px",
+      // move off-screen if placement is not defined
+      transform: placement ? "translate3d(var(--x), var(--y), 0)" : "translate3d(0, -100vh, 0)",
+      zIndex: "var(--z-index)"
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getPlacementStyles
+});

package/dist/get-styles.mjs

@@ -0,0 +1,48 @@
+// src/get-styles.ts
+import { cssVars } from "./middleware.mjs";
+var ARROW_FLOATING_STYLE = {
+  bottom: "rotate(45deg)",
+  left: "rotate(135deg)",
+  top: "rotate(225deg)",
+  right: "rotate(315deg)"
+};
+function getPlacementStyles(options = {}) {
+  const { placement, sameWidth, fitViewport, strategy = "absolute" } = options;
+  return {
+    arrow: {
+      position: "absolute",
+      width: cssVars.arrowSize.reference,
+      height: cssVars.arrowSize.reference,
+      [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,
+      [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`
+    },
+    arrowTip: {
+      // @ts-expect-error - Fix this
+      transform: placement ? ARROW_FLOATING_STYLE[placement.split("-")[0]] : void 0,
+      background: cssVars.arrowBg.reference,
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      zIndex: "inherit"
+    },
+    floating: {
+      position: strategy,
+      isolation: "isolate",
+      minWidth: sameWidth ? void 0 : "max-content",
+      width: sameWidth ? "var(--reference-width)" : void 0,
+      maxWidth: fitViewport ? "var(--available-width)" : void 0,
+      maxHeight: fitViewport ? "var(--available-height)" : void 0,
+      pointerEvents: !placement ? "none" : void 0,
+      top: "0px",
+      left: "0px",
+      // move off-screen if placement is not defined
+      transform: placement ? "translate3d(var(--x), var(--y), 0)" : "translate3d(0, -100vh, 0)",
+      zIndex: "var(--z-index)"
+    }
+  };
+}
+export {
+  getPlacementStyles
+};

package/dist/index.d.mts

@@ -1,188 +1,6 @@
-import { Placement, Boundary, AutoUpdateOptions, ComputePositionReturn, VirtualElement } from '@floating-ui/dom';
+export { getPlacement } from './get-placement.mjs';
+export { GetPlacementStylesOptions, getPlacementStyles } from './get-styles.mjs';
+export { getPlacementSide, isValidPlacement } from './placement.mjs';
+export { AnchorRect, PlacementAlign, PlacementSide, PositioningOptions } from './types.mjs';
 export { AutoUpdateOptions, Boundary, ComputePositionReturn, Placement } from '@floating-ui/dom';
-
-type MaybeRectElement = HTMLElement | VirtualElement | null;
-type MaybeElement = HTMLElement | null;
-type MaybeFn<T> = T | (() => T);
-type PlacementSide = "top" | "right" | "bottom" | "left";
-type PlacementAlign = "start" | "center" | "end";
-interface AnchorRect {
-    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" | undefined;
-    /**
-     * The initial placement of the floating element
-     */
-    placement?: Placement | undefined;
-    /**
-     * The offset of the floating element
-     */
-    offset?: {
-        mainAxis?: number | undefined;
-        crossAxis?: number | undefined;
-    } | undefined;
-    /**
-     * The main axis offset or gap between the reference and floating elements
-     */
-    gutter?: number | undefined;
-    /**
-     * The secondary axis offset or gap between the reference and floating elements
-     */
-    shift?: number | undefined;
-    /**
-     * The virtual padding around the viewport edges to check for overflow
-     */
-    overflowPadding?: number | undefined;
-    /**
-     * The minimum padding between the arrow and the floating element's corner.
-     * @default 4
-     */
-    arrowPadding?: number | undefined;
-    /**
-     * Whether to flip the placement
-     */
-    flip?: boolean | Placement[] | undefined;
-    /**
-     * Whether the popover should slide when it overflows.
-     */
-    slide?: boolean | undefined;
-    /**
-     * Whether the floating element can overlap the reference element
-     * @default false
-     */
-    overlap?: boolean | undefined;
-    /**
-     * Whether to make the floating element same width as the reference element
-     */
-    sameWidth?: boolean | undefined;
-    /**
-     * Whether the popover should fit the viewport.
-     */
-    fitViewport?: boolean | undefined;
-    /**
-     * Whether to use the size middleware from Floating UI.
-     * It computes and sets CSS variables (`--reference-width`, `--reference-height`, `--available-width`, `--available-height`) used by `sameWidth` and `fitViewport`.
-     *
-     * Disabling it improves scroll performance with heavy content by avoiding layout thrashing on each update.
-     * Only applies when both `sameWidth` and `fitViewport` are false — the middleware is always used when either is enabled.
-     * @default true
-     */
-    sizeMiddleware?: boolean | undefined;
-    /**
-     * The overflow boundary of the reference element
-     * Accepts a function returning a Boundary, a Boundary directly,
-     * or the shorthand string 'clipping-ancestors' which maps to Floating UI's 'clippingAncestors'.
-     */
-    boundary?: (() => Boundary) | Boundary | "clipping-ancestors" | undefined;
-    /**
-     * Options to activate auto-update listeners
-     */
-    listeners?: boolean | AutoUpdateOptions | undefined;
-    /**
-     * Function called when the placement is computed
-     */
-    onComplete?: ((data: ComputePositionReturn) => void) | undefined;
-    /**
-     * Function called when the floating element is positioned or not
-     */
-    onPositioned?: ((data: {
-        placed: boolean;
-    }) => void) | undefined;
-    /**
-     * Function that returns the anchor element.
-     * Useful when you want to use a different element as the anchor.
-     */
-    getAnchorElement?: (() => HTMLElement | VirtualElement | null) | undefined;
-    /**
-     *  Function that returns the anchor rect
-     * @deprecated Use `getAnchorElement` instead
-     */
-    getAnchorRect?: ((element: HTMLElement | VirtualElement | null) => AnchorRect | null) | undefined;
-    /**
-     * A callback that will be called when the popover needs to calculate its
-     * position.
-     */
-    updatePosition?: ((data: {
-        updatePosition: () => Promise<void>;
-        floatingElement: HTMLElement | null;
-    }) => void | Promise<void>) | undefined;
-}
-
-declare function getPlacement(referenceOrFn: MaybeFn<MaybeRectElement>, floatingOrFn: MaybeFn<MaybeElement>, opts?: PositioningOptions & {
-    defer?: boolean | undefined;
-}): () => void;
-
-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;
-    };
-};
-
-interface GetPlacementStylesOptions {
-    placement?: Placement | undefined;
-}
-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)`;
-        readonly position: "absolute";
-        readonly width: string;
-        readonly height: string;
-    };
-    arrowTip: {
-        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" | "absolute";
-        readonly isolation: "isolate";
-        readonly minWidth: "max-content" | undefined;
-        readonly width: "var(--reference-width)" | undefined;
-        readonly maxWidth: "var(--available-width)" | undefined;
-        readonly maxHeight: "var(--available-height)" | undefined;
-        readonly pointerEvents: "none" | undefined;
-        readonly top: "0px";
-        readonly left: "0px";
-        readonly transform: "translate3d(var(--x), var(--y), 0)" | "translate3d(0, -100vh, 0)";
-        readonly zIndex: "var(--z-index)";
-    };
-};
-
-declare function isValidPlacement(v: string): v is Placement;
-declare function getPlacementSide(placement: Placement): PlacementSide;
-
-export { type AnchorRect, type GetPlacementStylesOptions, type PlacementAlign, type PlacementSide, type PositioningOptions, getPlacement, getPlacementSide, getPlacementStyles, isValidPlacement };
+import './middleware.mjs';

package/dist/index.d.ts

@@ -1,188 +1,6 @@
-import { Placement, Boundary, AutoUpdateOptions, ComputePositionReturn, VirtualElement } from '@floating-ui/dom';
+export { getPlacement } from './get-placement.js';
+export { GetPlacementStylesOptions, getPlacementStyles } from './get-styles.js';
+export { getPlacementSide, isValidPlacement } from './placement.js';
+export { AnchorRect, PlacementAlign, PlacementSide, PositioningOptions } from './types.js';
 export { AutoUpdateOptions, Boundary, ComputePositionReturn, Placement } from '@floating-ui/dom';
-
-type MaybeRectElement = HTMLElement | VirtualElement | null;
-type MaybeElement = HTMLElement | null;
-type MaybeFn<T> = T | (() => T);
-type PlacementSide = "top" | "right" | "bottom" | "left";
-type PlacementAlign = "start" | "center" | "end";
-interface AnchorRect {
-    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" | undefined;
-    /**
-     * The initial placement of the floating element
-     */
-    placement?: Placement | undefined;
-    /**
-     * The offset of the floating element
-     */
-    offset?: {
-        mainAxis?: number | undefined;
-        crossAxis?: number | undefined;
-    } | undefined;
-    /**
-     * The main axis offset or gap between the reference and floating elements
-     */
-    gutter?: number | undefined;
-    /**
-     * The secondary axis offset or gap between the reference and floating elements
-     */
-    shift?: number | undefined;
-    /**
-     * The virtual padding around the viewport edges to check for overflow
-     */
-    overflowPadding?: number | undefined;
-    /**
-     * The minimum padding between the arrow and the floating element's corner.
-     * @default 4
-     */
-    arrowPadding?: number | undefined;
-    /**
-     * Whether to flip the placement
-     */
-    flip?: boolean | Placement[] | undefined;
-    /**
-     * Whether the popover should slide when it overflows.
-     */
-    slide?: boolean | undefined;
-    /**
-     * Whether the floating element can overlap the reference element
-     * @default false
-     */
-    overlap?: boolean | undefined;
-    /**
-     * Whether to make the floating element same width as the reference element
-     */
-    sameWidth?: boolean | undefined;
-    /**
-     * Whether the popover should fit the viewport.
-     */
-    fitViewport?: boolean | undefined;
-    /**
-     * Whether to use the size middleware from Floating UI.
-     * It computes and sets CSS variables (`--reference-width`, `--reference-height`, `--available-width`, `--available-height`) used by `sameWidth` and `fitViewport`.
-     *
-     * Disabling it improves scroll performance with heavy content by avoiding layout thrashing on each update.
-     * Only applies when both `sameWidth` and `fitViewport` are false — the middleware is always used when either is enabled.
-     * @default true
-     */
-    sizeMiddleware?: boolean | undefined;
-    /**
-     * The overflow boundary of the reference element
-     * Accepts a function returning a Boundary, a Boundary directly,
-     * or the shorthand string 'clipping-ancestors' which maps to Floating UI's 'clippingAncestors'.
-     */
-    boundary?: (() => Boundary) | Boundary | "clipping-ancestors" | undefined;
-    /**
-     * Options to activate auto-update listeners
-     */
-    listeners?: boolean | AutoUpdateOptions | undefined;
-    /**
-     * Function called when the placement is computed
-     */
-    onComplete?: ((data: ComputePositionReturn) => void) | undefined;
-    /**
-     * Function called when the floating element is positioned or not
-     */
-    onPositioned?: ((data: {
-        placed: boolean;
-    }) => void) | undefined;
-    /**
-     * Function that returns the anchor element.
-     * Useful when you want to use a different element as the anchor.
-     */
-    getAnchorElement?: (() => HTMLElement | VirtualElement | null) | undefined;
-    /**
-     *  Function that returns the anchor rect
-     * @deprecated Use `getAnchorElement` instead
-     */
-    getAnchorRect?: ((element: HTMLElement | VirtualElement | null) => AnchorRect | null) | undefined;
-    /**
-     * A callback that will be called when the popover needs to calculate its
-     * position.
-     */
-    updatePosition?: ((data: {
-        updatePosition: () => Promise<void>;
-        floatingElement: HTMLElement | null;
-    }) => void | Promise<void>) | undefined;
-}
-
-declare function getPlacement(referenceOrFn: MaybeFn<MaybeRectElement>, floatingOrFn: MaybeFn<MaybeElement>, opts?: PositioningOptions & {
-    defer?: boolean | undefined;
-}): () => void;
-
-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;
-    };
-};
-
-interface GetPlacementStylesOptions {
-    placement?: Placement | undefined;
-}
-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)`;
-        readonly position: "absolute";
-        readonly width: string;
-        readonly height: string;
-    };
-    arrowTip: {
-        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" | "absolute";
-        readonly isolation: "isolate";
-        readonly minWidth: "max-content" | undefined;
-        readonly width: "var(--reference-width)" | undefined;
-        readonly maxWidth: "var(--available-width)" | undefined;
-        readonly maxHeight: "var(--available-height)" | undefined;
-        readonly pointerEvents: "none" | undefined;
-        readonly top: "0px";
-        readonly left: "0px";
-        readonly transform: "translate3d(var(--x), var(--y), 0)" | "translate3d(0, -100vh, 0)";
-        readonly zIndex: "var(--z-index)";
-    };
-};
-
-declare function isValidPlacement(v: string): v is Placement;
-declare function getPlacementSide(placement: Placement): PlacementSide;
-
-export { type AnchorRect, type GetPlacementStylesOptions, type PlacementAlign, type PlacementSide, type PositioningOptions, getPlacement, getPlacementSide, getPlacementStyles, isValidPlacement };
+import './middleware.js';