gbs-add-block 0.0.76 → 0.0.77

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.70)
+# GBS Building Blocks 2.0 (v0.0.77)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,9 +6,10 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 0.0.70)
+## What's New 🎉 (Ver 0.0.77)
 
 - Updated for bug fixes.
+- New Component Card Added
 
 ## Authors
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.76",
+  "version": "0.0.77",
   "description": "React Component Library",
   "type": "module",
   "files": [

package/source/components/contextmenu/index.tsx

@@ -4,6 +4,7 @@ import { ContextMenuProps, Position } from "./types";
 export const ContextMenu: React.FC<ContextMenuProps> = ({ children }) => {
   const [isVisible, setIsVisible] = useState<boolean>(false);
   const [position, setPosition] = useState<Position>({ x: 0, y: 0 });
+  const [viewportSize, setViewportSize] = useState<Position>({ x: 0, y: 0 });
 
   const handleContextMenu = useCallback(
     (event: MouseEvent | globalThis.MouseEvent) => {
@@ -22,25 +23,48 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({ children }) => {
   }, [isVisible]);
 
   useEffect(() => {
-    document.addEventListener("click", handleClick);
-    document.addEventListener("contextmenu", handleContextMenu);
+    if (typeof window !== "undefined") {
+      setViewportSize({
+        x: window.innerWidth,
+        y: window.innerHeight,
+      });
+
+      const handleResize = () => {
+        setViewportSize({
+          x: window.innerWidth,
+          y: window.innerHeight,
+        });
+      };
 
-    return () => {
-      document.removeEventListener("click", handleClick);
-      document.removeEventListener("contextmenu", handleContextMenu);
-    };
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeof document !== "undefined") {
+      document.addEventListener("click", handleClick);
+      document.addEventListener("contextmenu", handleContextMenu);
+
+      return () => {
+        document.removeEventListener("click", handleClick);
+        document.removeEventListener("contextmenu", handleContextMenu);
+      };
+    }
   }, [handleClick, handleContextMenu]);
 
-  // Ensure menu stays within viewport bounds
-  const adjustedPosition = useCallback((position: Position): Position => {
-    const menuWidth = 160; // min-width from CSS
-    const menuHeight = 200; // approximate max height
+  const adjustedPosition = useCallback(
+    (pos: Position): Position => {
+      const menuWidth = 160; // min-width from CSS
+      const menuHeight = 200; // approximate max height
 
-    return {
-      x: Math.min(position.x, window.innerWidth - menuWidth),
-      y: Math.min(position.y, window.innerHeight - menuHeight),
-    };
-  }, []);
+      return {
+        x: Math.min(pos.x, Math.max(viewportSize.x - menuWidth, 0)),
+        y: Math.min(pos.y, Math.max(viewportSize.y - menuHeight, 0)),
+      };
+    },
+    [viewportSize]
+  );
 
   const finalPosition = adjustedPosition(position);