@zag-js/popper 0.10.4 → 0.11.0

package/dist/get-styles.d.ts

@@ -1,29 +0,0 @@
-import type { Placement } from "@floating-ui/dom";
-type Options = {
-    placement?: Placement;
-};
-export declare function getPlacementStyles(options: Options): {
-    arrow: {
-        readonly [x: string]: string;
-        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: "absolute";
-        readonly minWidth: "max-content";
-        readonly top: "0px";
-        readonly left: "0px";
-    };
-};
-export {};

package/dist/get-styles.js

@@ -1,42 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const middleware = require('./middleware.js');
-
-const ARROW_FLOATING_STYLE = {
-  bottom: "rotate(45deg)",
-  left: "rotate(135deg)",
-  top: "rotate(225deg)",
-  right: "rotate(315deg)"
-};
-function getPlacementStyles(options) {
-  const { placement = "bottom" } = options;
-  return {
-    arrow: {
-      position: "absolute",
-      width: middleware.cssVars.arrowSize.reference,
-      height: middleware.cssVars.arrowSize.reference,
-      [middleware.cssVars.arrowSizeHalf.variable]: `calc(${middleware.cssVars.arrowSize.reference} / 2)`,
-      [middleware.cssVars.arrowOffset.variable]: `calc(${middleware.cssVars.arrowSizeHalf.reference} * -1)`
-    },
-    arrowTip: {
-      transform: ARROW_FLOATING_STYLE[placement.split("-")[0]],
-      background: middleware.cssVars.arrowBg.reference,
-      top: "0",
-      left: "0",
-      width: "100%",
-      height: "100%",
-      position: "absolute",
-      zIndex: "inherit"
-    },
-    floating: {
-      position: "absolute",
-      minWidth: "max-content",
-      top: "0px",
-      left: "0px"
-    }
-  };
-}
-
-exports.getPlacementStyles = getPlacementStyles;

package/dist/get-styles.mjs

@@ -1,38 +0,0 @@
-import { cssVars } from './middleware.mjs';
-
-const ARROW_FLOATING_STYLE = {
-  bottom: "rotate(45deg)",
-  left: "rotate(135deg)",
-  top: "rotate(225deg)",
-  right: "rotate(315deg)"
-};
-function getPlacementStyles(options) {
-  const { placement = "bottom" } = 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: {
-      transform: ARROW_FLOATING_STYLE[placement.split("-")[0]],
-      background: cssVars.arrowBg.reference,
-      top: "0",
-      left: "0",
-      width: "100%",
-      height: "100%",
-      position: "absolute",
-      zIndex: "inherit"
-    },
-    floating: {
-      position: "absolute",
-      minWidth: "max-content",
-      top: "0px",
-      left: "0px"
-    }
-  };
-}
-
-export { getPlacementStyles };

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;
-type ArrowOptions = {
-    element: HTMLElement;
-};
-export declare const shiftArrow: (opts: ArrowOptions) => Middleware;
-export {};

package/dist/middleware.js

@@ -1,58 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const toVar = (value) => ({ variable: value, reference: `var(${value})` });
-const cssVars = {
-  arrowSize: toVar("--arrow-size"),
-  arrowSizeHalf: toVar("--arrow-size-half"),
-  arrowBg: toVar("--arrow-background"),
-  transformOrigin: toVar("--transform-origin"),
-  arrowOffset: toVar("--arrow-offset")
-};
-const getTransformOrigin = (arrow) => ({
-  top: "bottom center",
-  "top-start": arrow ? `${arrow.x}px bottom` : "left bottom",
-  "top-end": arrow ? `${arrow.x}px bottom` : "right bottom",
-  bottom: "top center",
-  "bottom-start": arrow ? `${arrow.x}px top` : "top left",
-  "bottom-end": arrow ? `${arrow.x}px top` : "top right",
-  left: "right center",
-  "left-start": arrow ? `right ${arrow.y}px` : "right top",
-  "left-end": arrow ? `right ${arrow.y}px` : "right bottom",
-  right: "left center",
-  "right-start": arrow ? `left ${arrow.y}px` : "left top",
-  "right-end": arrow ? `left ${arrow.y}px` : "left bottom"
-});
-const transformOrigin = {
-  name: "transformOrigin",
-  fn({ placement, elements, middlewareData }) {
-    const { arrow } = middlewareData;
-    const transformOrigin2 = getTransformOrigin(arrow)[placement];
-    const { floating } = elements;
-    floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin2);
-    return {
-      data: { transformOrigin: transformOrigin2 }
-    };
-  }
-};
-const shiftArrow = (opts) => ({
-  name: "shiftArrow",
-  fn({ placement, middlewareData }) {
-    const { element: arrow } = opts;
-    if (middlewareData.arrow) {
-      const { x, y } = middlewareData.arrow;
-      const dir = placement.split("-")[0];
-      Object.assign(arrow.style, {
-        left: x != null ? `${x}px` : "",
-        top: y != null ? `${y}px` : "",
-        [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`
-      });
-    }
-    return {};
-  }
-});
-
-exports.cssVars = cssVars;
-exports.shiftArrow = shiftArrow;
-exports.transformOrigin = transformOrigin;

package/dist/middleware.mjs

@@ -1,52 +0,0 @@
-const toVar = (value) => ({ variable: value, reference: `var(${value})` });
-const cssVars = {
-  arrowSize: toVar("--arrow-size"),
-  arrowSizeHalf: toVar("--arrow-size-half"),
-  arrowBg: toVar("--arrow-background"),
-  transformOrigin: toVar("--transform-origin"),
-  arrowOffset: toVar("--arrow-offset")
-};
-const getTransformOrigin = (arrow) => ({
-  top: "bottom center",
-  "top-start": arrow ? `${arrow.x}px bottom` : "left bottom",
-  "top-end": arrow ? `${arrow.x}px bottom` : "right bottom",
-  bottom: "top center",
-  "bottom-start": arrow ? `${arrow.x}px top` : "top left",
-  "bottom-end": arrow ? `${arrow.x}px top` : "top right",
-  left: "right center",
-  "left-start": arrow ? `right ${arrow.y}px` : "right top",
-  "left-end": arrow ? `right ${arrow.y}px` : "right bottom",
-  right: "left center",
-  "right-start": arrow ? `left ${arrow.y}px` : "left top",
-  "right-end": arrow ? `left ${arrow.y}px` : "left bottom"
-});
-const transformOrigin = {
-  name: "transformOrigin",
-  fn({ placement, elements, middlewareData }) {
-    const { arrow } = middlewareData;
-    const transformOrigin2 = getTransformOrigin(arrow)[placement];
-    const { floating } = elements;
-    floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin2);
-    return {
-      data: { transformOrigin: transformOrigin2 }
-    };
-  }
-};
-const shiftArrow = (opts) => ({
-  name: "shiftArrow",
-  fn({ placement, middlewareData }) {
-    const { element: arrow } = opts;
-    if (middlewareData.arrow) {
-      const { x, y } = middlewareData.arrow;
-      const dir = placement.split("-")[0];
-      Object.assign(arrow.style, {
-        left: x != null ? `${x}px` : "",
-        top: y != null ? `${y}px` : "",
-        [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`
-      });
-    }
-    return {};
-  }
-});
-
-export { cssVars, shiftArrow, transformOrigin };

package/dist/types.d.ts

@@ -1,62 +0,0 @@
-import type { Boundary, ComputePositionReturn, Placement } from "@floating-ui/dom";
-import type { AutoUpdateOptions } from "./auto-update";
-export type { Placement };
-export 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 | (() => Boundary);
-    /**
-     * Options to activate auto-update listeners
-     */
-    listeners?: boolean | AutoUpdateOptions;
-    /**
-     * Function called when the placement is computed
-     */
-    onComplete?(data: ComputePositionReturn): void;
-    /**
-     * Function called on cleanup of all listeners
-     */
-    onCleanup?: VoidFunction;
-};
-export type BasePlacement = "top" | "right" | "bottom" | "left";