@blockle/blocks 0.19.0 → 0.20.0-alpha1

package/dist/components/other/BlocksProvider/BlocksProvider.cjs

@@ -0,0 +1,36 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
+const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
+const components_other_BlocksProvider_context_cjs = require("./context.cjs");
+const BlocksProvider = ({
+  children,
+  theme,
+  className,
+  ...restProps
+}) => {
+  const [ariaHidden, setAriaHidden] = react.useState(false);
+  const contextValue = react.useMemo(
+    () => ({
+      setAriaHidden
+    }),
+    []
+  );
+  lib_theme_store_theme_cjs.setTheme(theme);
+  return /* @__PURE__ */ jsxRuntime.jsx(components_other_BlocksProvider_context_cjs.BlocksProviderContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: lib_utils_classnames_cjs.classnames(
+        theme.vars,
+        lib_css_atoms_sprinkles_css_cjs.atoms({ fontFamily: "primary" }),
+        className
+      ),
+      inert: ariaHidden ? true : void 0,
+      ...restProps,
+      children
+    }
+  ) });
+};
+exports.BlocksProvider = BlocksProvider;

package/dist/components/other/BlocksProvider/BlocksProvider.mjs

@@ -0,0 +1,39 @@
+'use client';
+
+import { jsx } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+import { setTheme } from "../../../lib/theme/store/theme.mjs";
+import { classnames } from "../../../lib/utils/classnames.mjs";
+import { BlocksProviderContext } from "./context.mjs";
+const BlocksProvider = ({
+  children,
+  theme,
+  className,
+  ...restProps
+}) => {
+  const [ariaHidden, setAriaHidden] = useState(false);
+  const contextValue = useMemo(
+    () => ({
+      setAriaHidden
+    }),
+    []
+  );
+  setTheme(theme);
+  return /* @__PURE__ */ jsx(BlocksProviderContext, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classnames(
+        theme.vars,
+        atoms({ fontFamily: "primary" }),
+        className
+      ),
+      inert: ariaHidden ? true : void 0,
+      ...restProps,
+      children
+    }
+  ) });
+};
+export {
+  BlocksProvider
+};

package/dist/components/other/BlocksProvider/context.cjs

@@ -0,0 +1,4 @@
+"use strict";
+const react = require("react");
+const BlocksProviderContext = react.createContext(null);
+exports.BlocksProviderContext = BlocksProviderContext;

package/dist/components/other/BlocksProvider/context.mjs

@@ -0,0 +1,7 @@
+'use client';
+
+import { createContext } from "react";
+const BlocksProviderContext = createContext(null);
+export {
+  BlocksProviderContext
+};

package/dist/components/other/BlocksProvider/index.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/components/other/BlocksProvider/index.mjs

@@ -0,0 +1 @@
+

package/dist/components/other/Portal/Portal.cjs

@@ -0,0 +1,7 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const reactDom = require("react-dom");
+const Portal = ({ children, container }) => {
+  return reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx("div", { children }), container || document.body);
+};
+exports.Portal = Portal;

package/dist/components/other/Portal/Portal.mjs

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+const Portal = ({ children, container }) => {
+  return createPortal(/* @__PURE__ */ jsx("div", { children }), container || document.body);
+};
+export {
+  Portal
+};

package/dist/components/other/Portal/index.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/components/other/Portal/index.mjs

@@ -0,0 +1 @@
+

package/dist/components/overlay/Dialog/Dialog.cjs

@@ -0,0 +1,77 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks_useClickOutside_useClickOutside_cjs = require("../../../hooks/useClickOutside/useClickOutside.cjs");
+const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
+const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
+const lib_utils_dom_cjs = require("../../../lib/utils/dom.cjs");
+const components_overlay_Dialog_dialog_css_cjs = require("./dialog.css.cjs");
+const components_overlay_Dialog_dialogHelper_cjs = require("./dialogHelper.cjs");
+const hooks_useRestoreFocus_useRestoreFocus_cjs = require("../../../hooks/useRestoreFocus/useRestoreFocus.cjs");
+const hooks_usePreventBodyScroll_usePreventBodyScroll_cjs = require("../../../hooks/usePreventBodyScroll/usePreventBodyScroll.cjs");
+const hooks_useKeyboard_useKeyboard_cjs = require("../../../hooks/useKeyboard/useKeyboard.cjs");
+const hooks_useIsomorphicLayoutEffect_useIsomorphicLayoutEffect_cjs = require("../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
+const Dialog = ({
+  children,
+  open,
+  className,
+  onRequestClose,
+  size,
+  ...restProps
+}) => {
+  const dialogClassName = lib_theme_store_theme_cjs.getComponentStyles("dialog", {
+    dialog: true,
+    variants: { size }
+  });
+  const dialogRef = react.useRef(null);
+  const [enabled, setEnabled] = react.useState(true);
+  const [visible, setVisible] = react.useState(open);
+  hooks_useRestoreFocus_useRestoreFocus_cjs.useRestoreFocus(open);
+  const isNested = components_overlay_Dialog_dialogHelper_cjs.useNestedDialog(open);
+  hooks_usePreventBodyScroll_usePreventBodyScroll_cjs.usePreventBodyScroll(open && !isNested);
+  const onEscape = react.useCallback(
+    (event) => {
+      event.preventDefault();
+      onRequestClose();
+    },
+    [onRequestClose]
+  );
+  hooks_useKeyboard_useKeyboard_cjs.useKeyboard("Escape", onEscape, { enabled: open && enabled });
+  hooks_useClickOutside_useClickOutside_cjs.useClickOutside(dialogRef, onRequestClose, { enabled: open && enabled });
+  hooks_useIsomorphicLayoutEffect_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
+    var _a, _b;
+    if (open && visible) {
+      (_a = dialogRef.current) == null ? void 0 : _a.showModal();
+    } else if (open) {
+      setVisible(true);
+    } else {
+      if (!lib_utils_dom_cjs.hasAnimationDuration(dialogRef.current)) {
+        setVisible(false);
+      }
+      (_b = dialogRef.current) == null ? void 0 : _b.close();
+    }
+  }, [open, visible]);
+  const onAnimationEnd = react.useCallback(() => {
+    if (!open) {
+      setVisible(false);
+    }
+  }, [open]);
+  if (!visible) {
+    return null;
+  }
+  const dataOpen = typeof window === "undefined" && open ? true : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(components_overlay_Dialog_dialogHelper_cjs.DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "dialog",
+    {
+      ref: dialogRef,
+      "aria-modal": "true",
+      open: dataOpen,
+      className: lib_utils_classnames_cjs.classnames(components_overlay_Dialog_dialog_css_cjs.dialog, dialogClassName, className),
+      onAnimationEnd,
+      onTransitionEnd: onAnimationEnd,
+      ...restProps,
+      children
+    }
+  ) }) });
+};
+exports.Dialog = Dialog;

package/dist/components/overlay/Dialog/Dialog.mjs

@@ -0,0 +1,80 @@
+'use client';
+
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useState, useCallback } from "react";
+import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.mjs";
+import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
+import { classnames } from "../../../lib/utils/classnames.mjs";
+import { hasAnimationDuration } from "../../../lib/utils/dom.mjs";
+import { dialog } from "./dialog.css.mjs";
+import { useNestedDialog, DialogContext } from "./dialogHelper.mjs";
+import { useRestoreFocus } from "../../../hooks/useRestoreFocus/useRestoreFocus.mjs";
+import { usePreventBodyScroll } from "../../../hooks/usePreventBodyScroll/usePreventBodyScroll.mjs";
+import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.mjs";
+import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
+const Dialog = ({
+  children,
+  open,
+  className,
+  onRequestClose,
+  size,
+  ...restProps
+}) => {
+  const dialogClassName = getComponentStyles("dialog", {
+    dialog: true,
+    variants: { size }
+  });
+  const dialogRef = useRef(null);
+  const [enabled, setEnabled] = useState(true);
+  const [visible, setVisible] = useState(open);
+  useRestoreFocus(open);
+  const isNested = useNestedDialog(open);
+  usePreventBodyScroll(open && !isNested);
+  const onEscape = useCallback(
+    (event) => {
+      event.preventDefault();
+      onRequestClose();
+    },
+    [onRequestClose]
+  );
+  useKeyboard("Escape", onEscape, { enabled: open && enabled });
+  useClickOutside(dialogRef, onRequestClose, { enabled: open && enabled });
+  useIsomorphicLayoutEffect(() => {
+    var _a, _b;
+    if (open && visible) {
+      (_a = dialogRef.current) == null ? void 0 : _a.showModal();
+    } else if (open) {
+      setVisible(true);
+    } else {
+      if (!hasAnimationDuration(dialogRef.current)) {
+        setVisible(false);
+      }
+      (_b = dialogRef.current) == null ? void 0 : _b.close();
+    }
+  }, [open, visible]);
+  const onAnimationEnd = useCallback(() => {
+    if (!open) {
+      setVisible(false);
+    }
+  }, [open]);
+  if (!visible) {
+    return null;
+  }
+  const dataOpen = typeof window === "undefined" && open ? true : void 0;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ref: dialogRef,
+      "aria-modal": "true",
+      open: dataOpen,
+      className: classnames(dialog, dialogClassName, className),
+      onAnimationEnd,
+      onTransitionEnd: onAnimationEnd,
+      ...restProps,
+      children
+    }
+  ) }) });
+};
+export {
+  Dialog
+};

package/dist/{styles/components → components}/overlay/Dialog/dialog.css.cjs

@@ -1,11 +1,11 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+const lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/overlay/Dialog/dialog.css.ts", "@blockle/blocks");
 const dialog = css.style({
   "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [lib_css_layers_layers_css_cjs.blocksLayer]: {
       position: "fixed",
       inset: 0,
       border: "none",

package/dist/components/overlay/Dialog/dialogHelper.cjs

@@ -0,0 +1,20 @@
+"use strict";
+const react = require("react");
+const DialogContext = react.createContext(
+  void 0
+);
+const useNestedDialog = (open) => {
+  const parentDialog = react.useContext(DialogContext);
+  react.useEffect(() => {
+    if (!parentDialog || !open) {
+      return;
+    }
+    parentDialog.setEnabled(false);
+    return () => {
+      parentDialog.setEnabled(true);
+    };
+  }, [parentDialog, open]);
+  return !!parentDialog;
+};
+exports.DialogContext = DialogContext;
+exports.useNestedDialog = useNestedDialog;

package/dist/components/overlay/Dialog/dialogHelper.mjs

@@ -0,0 +1,21 @@
+import { createContext, useContext, useEffect } from "react";
+const DialogContext = createContext(
+  void 0
+);
+const useNestedDialog = (open) => {
+  const parentDialog = useContext(DialogContext);
+  useEffect(() => {
+    if (!parentDialog || !open) {
+      return;
+    }
+    parentDialog.setEnabled(false);
+    return () => {
+      parentDialog.setEnabled(true);
+    };
+  }, [parentDialog, open]);
+  return !!parentDialog;
+};
+export {
+  DialogContext,
+  useNestedDialog
+};

package/dist/components/overlay/Dialog/index.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/components/overlay/Dialog/index.mjs

@@ -0,0 +1 @@
+

package/dist/components/overlay/Popover/Popover.cjs

@@ -0,0 +1,111 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks_useClickOutside_useClickOutside_cjs = require("../../../hooks/useClickOutside/useClickOutside.cjs");
+const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
+const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
+const lib_utils_dom_cjs = require("../../../lib/utils/dom.cjs");
+const components_overlay_Popover_popoverUtils_cjs = require("./popover-utils.cjs");
+const hooks_useLayer_useLayer_cjs = require("../../../hooks/useLayer/useLayer.cjs");
+const hooks_useVisibilityState_useVisibilityState_cjs = require("../../../hooks/useVisibilityState/useVisibilityState.cjs");
+const hooks_useIsomorphicLayoutEffect_useIsomorphicLayoutEffect_cjs = require("../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
+const hooks_useKeyboard_useKeyboard_cjs = require("../../../hooks/useKeyboard/useKeyboard.cjs");
+const components_other_Portal_Portal_cjs = require("../../other/Portal/Portal.cjs");
+const components_layout_Box_Box_cjs = require("../../layout/Box/Box.cjs");
+const Popover = ({
+  align = "bottom",
+  anchorElement,
+  children,
+  className,
+  onRequestClose,
+  open,
+  repositionOnScroll,
+  style,
+  ...restProps
+}) => {
+  const layer = hooks_useLayer_useLayer_cjs.useLayer();
+  const [visible, hide] = hooks_useVisibilityState_useVisibilityState_cjs.useVisibilityState(open);
+  const [position, setPosition] = react.useState({ x: 0, y: 0 });
+  const popoverRef = react.useRef(null);
+  const containerClassName = lib_theme_store_theme_cjs.getComponentStyles(
+    "popover",
+    { base: true },
+    false
+  );
+  react.useLayoutEffect(() => {
+    if (!visible) {
+      return;
+    }
+    const position2 = components_overlay_Popover_popoverUtils_cjs.getPopoverPosition(align, anchorElement, popoverRef);
+    setPosition({ x: position2[0], y: position2[1] });
+  }, [align, anchorElement, visible]);
+  react.useEffect(() => {
+    if (!open || !repositionOnScroll) {
+      return;
+    }
+    function handleResize() {
+      const position2 = components_overlay_Popover_popoverUtils_cjs.getPopoverPosition(align, anchorElement, popoverRef);
+      setPosition({ x: position2[0], y: position2[1] });
+    }
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("scroll", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("scroll", handleResize);
+    };
+  }, [align, anchorElement, open, repositionOnScroll]);
+  hooks_useIsomorphicLayoutEffect_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
+    var _a;
+    if (!open) {
+      (_a = popoverRef.current) == null ? void 0 : _a.removeAttribute("data-open");
+      return;
+    }
+    let timer = requestAnimationFrame(() => {
+      timer = requestAnimationFrame(() => {
+        var _a2;
+        (_a2 = popoverRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+      });
+    });
+    return () => {
+      cancelAnimationFrame(timer);
+    };
+  }, [open, visible]);
+  const onAnimationEnd = react.useCallback(() => {
+    if (!open) {
+      hide();
+    }
+  }, [hide, open]);
+  react.useEffect(() => {
+    if (open) {
+      return;
+    }
+    if (!lib_utils_dom_cjs.hasAnimationDuration(popoverRef.current)) {
+      hide();
+    }
+  }, [hide, open]);
+  hooks_useKeyboard_useKeyboard_cjs.useKeyboard("Escape", onRequestClose, { enabled: visible });
+  hooks_useClickOutside_useClickOutside_cjs.useClickOutside(popoverRef, onRequestClose, { enabled: visible });
+  if (!visible) {
+    return null;
+  }
+  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(components_other_Portal_Portal_cjs.Portal, { container: layer(), children: /* @__PURE__ */ jsxRuntime.jsx(
+    components_layout_Box_Box_cjs.Box,
+    {
+      ref: popoverRef,
+      "data-open": dataOpen,
+      onAnimationEnd,
+      onTransitionEnd: onAnimationEnd,
+      className: lib_utils_classnames_cjs.classnames(containerClassName, className),
+      position: "absolute",
+      style: {
+        ...style,
+        left: position.x,
+        top: position.y
+      },
+      ...restProps,
+      children
+    }
+  ) });
+};
+exports.Popover = Popover;

package/dist/components/overlay/Popover/Popover.mjs

@@ -0,0 +1,112 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useLayoutEffect, useEffect, useCallback } from "react";
+import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.mjs";
+import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
+import { classnames } from "../../../lib/utils/classnames.mjs";
+import { hasAnimationDuration } from "../../../lib/utils/dom.mjs";
+import { getPopoverPosition } from "./popover-utils.mjs";
+import { useLayer } from "../../../hooks/useLayer/useLayer.mjs";
+import { useVisibilityState } from "../../../hooks/useVisibilityState/useVisibilityState.mjs";
+import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
+import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.mjs";
+import { Portal } from "../../other/Portal/Portal.mjs";
+import { Box } from "../../layout/Box/Box.mjs";
+const Popover = ({
+  align = "bottom",
+  anchorElement,
+  children,
+  className,
+  onRequestClose,
+  open,
+  repositionOnScroll,
+  style,
+  ...restProps
+}) => {
+  const layer = useLayer();
+  const [visible, hide] = useVisibilityState(open);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const popoverRef = useRef(null);
+  const containerClassName = getComponentStyles(
+    "popover",
+    { base: true },
+    false
+  );
+  useLayoutEffect(() => {
+    if (!visible) {
+      return;
+    }
+    const position2 = getPopoverPosition(align, anchorElement, popoverRef);
+    setPosition({ x: position2[0], y: position2[1] });
+  }, [align, anchorElement, visible]);
+  useEffect(() => {
+    if (!open || !repositionOnScroll) {
+      return;
+    }
+    function handleResize() {
+      const position2 = getPopoverPosition(align, anchorElement, popoverRef);
+      setPosition({ x: position2[0], y: position2[1] });
+    }
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("scroll", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("scroll", handleResize);
+    };
+  }, [align, anchorElement, open, repositionOnScroll]);
+  useIsomorphicLayoutEffect(() => {
+    var _a;
+    if (!open) {
+      (_a = popoverRef.current) == null ? void 0 : _a.removeAttribute("data-open");
+      return;
+    }
+    let timer = requestAnimationFrame(() => {
+      timer = requestAnimationFrame(() => {
+        var _a2;
+        (_a2 = popoverRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+      });
+    });
+    return () => {
+      cancelAnimationFrame(timer);
+    };
+  }, [open, visible]);
+  const onAnimationEnd = useCallback(() => {
+    if (!open) {
+      hide();
+    }
+  }, [hide, open]);
+  useEffect(() => {
+    if (open) {
+      return;
+    }
+    if (!hasAnimationDuration(popoverRef.current)) {
+      hide();
+    }
+  }, [hide, open]);
+  useKeyboard("Escape", onRequestClose, { enabled: visible });
+  useClickOutside(popoverRef, onRequestClose, { enabled: visible });
+  if (!visible) {
+    return null;
+  }
+  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
+  return /* @__PURE__ */ jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: popoverRef,
+      "data-open": dataOpen,
+      onAnimationEnd,
+      onTransitionEnd: onAnimationEnd,
+      className: classnames(containerClassName, className),
+      position: "absolute",
+      style: {
+        ...style,
+        left: position.x,
+        top: position.y
+      },
+      ...restProps,
+      children
+    }
+  ) });
+};
+export {
+  Popover
+};

package/dist/components/overlay/Popover/popover-utils.cjs

@@ -0,0 +1,61 @@
+"use strict";
+function getPopoverPosition(align, anchorRef, popoverRef) {
+  if (!anchorRef.current || !popoverRef.current) {
+    return [0, 0];
+  }
+  popoverRef.current.style.transform = "none";
+  popoverRef.current.style.transitionDuration = "0s";
+  const anchorRect = anchorRef.current.getBoundingClientRect();
+  const popoverRect = popoverRef.current.getBoundingClientRect();
+  let popoverStyles = getComputedStyle(popoverRef.current);
+  const top = popoverStyles.getPropertyValue("top");
+  const left = popoverStyles.getPropertyValue("left");
+  popoverRef.current.style.left = "0";
+  popoverRef.current.style.top = "0";
+  popoverStyles = getComputedStyle(popoverRef.current);
+  const marginTop = Number.parseFloat(
+    popoverStyles.getPropertyValue("margin-top")
+  );
+  const marginRight = Number.parseFloat(
+    popoverStyles.getPropertyValue("margin-right")
+  );
+  const marginBottom = Number.parseFloat(
+    popoverStyles.getPropertyValue("margin-bottom")
+  );
+  const marginLeft = Number.parseFloat(
+    popoverStyles.getPropertyValue("margin-left")
+  );
+  const marginY = marginTop + marginBottom;
+  const marginX = marginRight + marginLeft;
+  const docHeight = document.documentElement.clientHeight;
+  const docWidth = document.documentElement.clientWidth;
+  const docScrollTop = document.documentElement.scrollTop;
+  const docScrollLeft = document.documentElement.scrollLeft;
+  const anchorLeft = anchorRect.left + docScrollLeft;
+  const anchorTop = anchorRect.top + docScrollTop;
+  const topPosition = anchorRect.top - (popoverRect.height + marginTop);
+  const rightPosition = anchorRect.left + anchorRect.width + popoverRect.width;
+  const bottomPosition = anchorRect.top + anchorRect.height + popoverRect.height;
+  const leftPosition = anchorRect.left - popoverRect.width;
+  const offsetX = anchorLeft - marginLeft - (popoverRect.width - anchorRect.width) / 2;
+  const offsetY = anchorTop - marginTop - (popoverRect.height - anchorRect.height) / 2;
+  popoverRef.current.style.transform = "";
+  popoverRef.current.style.transitionDuration = "";
+  popoverRef.current.style.top = top;
+  popoverRef.current.style.left = left;
+  switch (align) {
+    case "top": {
+      return topPosition > 0 ? [offsetX, anchorTop - popoverRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
+    }
+    case "bottom": {
+      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - popoverRect.height - marginY];
+    }
+    case "left": {
+      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - popoverRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
+    }
+    case "right": {
+      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - popoverRect.width - marginX, offsetY];
+    }
+  }
+}
+exports.getPopoverPosition = getPopoverPosition;