@optigrit/optigrit-ui 0.0.17 → 0.0.19

package/dist/{chunk-ISRYL4WZ.js → chunk-AGDACE33.js}

@@ -10,8 +10,14 @@ function calculatePopoverStyle(container, defaultPosition) {
   const rect = container.getBoundingClientRect();
   const { top, left, bottom, right, width, height } = rect;
   const [position, align = "center"] = defaultPosition.split("-");
-  const style = {};
-  let transform = "";
+  const style = {
+    top: "auto",
+    bottom: "auto",
+    left: "auto",
+    right: "auto",
+    transform: "",
+    transformOrigin: ""
+  };
   const round = (v) => Math.round(v);
   if (["top", "bottom"].includes(position ?? "")) {
     if (position === "top") style.bottom = `${round(window.innerHeight - top)}px`;
@@ -20,8 +26,8 @@ function calculatePopoverStyle(container, defaultPosition) {
     if (align === "end") style.right = `${round(window.innerWidth - right)}px`;
     if (align === "center") {
       style.left = `${round(left + width / 2)}px`;
-      transform += " translateX(-50%)";
-      style.transformOrigin = "0";
+      style.transform = "translateX(-50%)";
+      style.transformOrigin = "50% 0";
     }
   }
   if (["left", "right"].includes(position ?? "")) {
@@ -31,11 +37,10 @@ function calculatePopoverStyle(container, defaultPosition) {
     if (align === "end") style.bottom = `${round(window.innerHeight - bottom)}px`;
     if (align === "center") {
       style.top = `${round(top + height / 2)}px`;
-      transform += " translateY(-50%)";
+      style.transform = "translateY(-50%)";
       style.transformOrigin = "50% 0";
     }
   }
-  style.transform = transform.trim();
   return style;
 }
 
@@ -55,9 +60,11 @@ function Popover(props) {
   } = props;
   const popoverRef = useRef(null);
   const popoverPosition = useRef(_position);
+  const isFlipping = useRef(false);
   function handlePopoverIntersect() {
-    if (!popoverRef.current) return;
+    if (!popoverRef.current || isFlipping.current) return;
     const popoverRect = popoverRef.current.getBoundingClientRect();
+    const prevPosition = popoverPosition.current;
     if (popoverRect.top < 0) {
       popoverPosition.current = popoverPosition.current.replace("top", "bottom");
     } else if (popoverRect.bottom > window.innerHeight) {
@@ -68,24 +75,33 @@ function Popover(props) {
     } else if (popoverRect.right > window.innerWidth) {
       popoverPosition.current = popoverPosition.current.replace("right", "left");
     }
-    handleResize();
+    if (prevPosition !== popoverPosition.current) {
+      isFlipping.current = true;
+      handleResize();
+      requestAnimationFrame(() => {
+        isFlipping.current = false;
+      });
+    }
   }
   function showPopover() {
     if (!popoverRef.current) return;
     popoverPosition.current = _position;
+    handleResize();
     popoverRef.current.style.display = "flex";
-    setTimeout(() => {
-      if (!popoverRef.current) return;
-      popoverRef.current.style.opacity = "1";
-      popoverRef.current.style.scale = "1";
+    popoverRef.current.getBoundingClientRect();
+    popoverRef.current.style.opacity = "1";
+    popoverRef.current.style.scale = "1";
+    requestAnimationFrame(() => {
       handlePopoverIntersect();
-      onOpen?.(popoverRef.current);
-    }, 10);
+      if (popoverRef.current) {
+        onOpen?.(popoverRef.current);
+      }
+    });
   }
   function hidePopover() {
     if (!popoverRef.current) return;
     popoverRef.current.style.opacity = "0";
-    popoverRef.current.style.scale = "0.8";
+    popoverRef.current.style.scale = "0.95";
     setTimeout(() => {
       if (!popoverRef.current) return;
       popoverRef.current.style.display = "none";
@@ -105,13 +121,24 @@ function Popover(props) {
   useLayoutEffect(() => {
     if (!popoverRef.current || !targetRef.current) return;
     handleResize();
-    const resizeObserver = new ResizeObserver(handlePopoverIntersect);
+    const resizeObserver = new ResizeObserver(() => {
+      if (popoverRef.current && popoverRef.current.style.display !== "none") {
+        handleResize();
+        handlePopoverIntersect();
+      }
+    });
     resizeObserver.observe(popoverRef.current);
     resizeObserver.observe(window.document.body);
-    window.addEventListener("scroll", handlePopoverIntersect, true);
+    const scrollHandler = () => {
+      if (popoverRef.current && popoverRef.current.style.display !== "none") {
+        handleResize();
+        handlePopoverIntersect();
+      }
+    };
+    window.addEventListener("scroll", scrollHandler, true);
     return () => {
       resizeObserver.disconnect();
-      window.removeEventListener("scroll", handlePopoverIntersect, true);
+      window.removeEventListener("scroll", scrollHandler, true);
     };
   }, [targetRef?.current]);
   useLayoutEffect(() => {
@@ -139,11 +166,11 @@ function Popover(props) {
           ...popoverProps,
           ref: popoverRef,
           style: {
-            display: "flex",
+            display: "none",
             position: "fixed",
-            transition: "all 200ms",
+            transition: "opacity 200ms ease, scale 200ms ease",
             opacity: 0,
-            scale: 0.8,
+            scale: 0.95,
             zIndex: 9999,
             ...popoverProps.style
           },

package/dist/{chunk-U65NGM6F.js → chunk-OP7KGPEN.js}

@@ -1,3 +1,9 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
 // src/theme/ThemeProvider.tsx
 import { createContext, useContext, useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -43,6 +49,7 @@ var useTheme = () => {
 };
 
 export {
+  __export,
   ThemeProvider,
   useTheme
 };