x-ui-design 0.9.88 → 0.9.89

package/lib/hooks/usePopupPosition.ts

@@ -11,7 +11,7 @@ import {
 import { Placement } from "../types";
 import { getElementParentDetails } from "../helpers";
 
-const OFFSET = 11;
+const OFFSET = 8;
 const LEFT_OR_RIGHT = ['left', 'right'];
 
 type TPopupPosition = {
@@ -249,13 +249,18 @@ export const usePopupPosition = ({
         };
     }, [open, targetRef, listenPopoverPossitions, calculatePosition]);
 
-    return {
-        _placement,
-        popupStyle: {
-            zIndex: 10000,
-            position: "absolute",
-            opacity: Object.keys(popupPosition).length ? 1 : 0,
-            ...popupPosition
+    return useMemo(() => {
+        const startedTargetRects = targetRef.current?.getBoundingClientRect() || {};
+        const visible = Object.keys(popupPosition).length
+
+        return {
+            _placement,
+            popupStyle: {
+                zIndex: 10000,
+                position: "absolute",
+                opacity: visible ? 1 : 0,
+                ...!visible ? startedTargetRects : popupPosition
+            }
         }
-    };
+    }, [targetRef, _placement, popupPosition]);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-ui-design",
-  "version": "0.9.88",
+  "version": "0.9.89",
   "license": "ISC",
   "author": "Gabriel Boyajyan",
   "main": "dist/index.js",

package/src/app/page.tsx

@@ -193,8 +193,8 @@ export default function Home() {
                 //     </div>
                 // </Popover>
                 // </div>
-            //     {/* <DatePicker placement='right' getPopupContainer={() => document.body} /> */}
-            <Dropdown trigger={'hover'} overlay={() => {
+            <div>
+                <Dropdown trigger={'hover'} getPopupContainer={() => document.body} overlay={() => {
                 return <Menu items={items} selectable selectedKeys={['13']} />
                     {/* {items.map((item) => {
                         return <MenuItem key={item.key} itemKey={item.key} label={item.label} />
@@ -203,6 +203,9 @@ export default function Home() {
             }}>
                 Dropdown 
             </Dropdown>
+                <DatePicker placement='right' getPopupContainer={() => document.body} />
+            
+            </div>
             // </div>
             // <div style={{ minWidth: 1500 }} />
         // </div>