@yakad/ui 1.2.1 → 1.2.2

package/clickAwayListener/clickAwayListener.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useRef } from "react";
+
+interface ClickAwayListenerProps extends React.HTMLAttributes<HTMLDivElement> {
+    onClickAway: React.MouseEventHandler<HTMLDivElement>;
+}
+
+function ClickAwayListener(props: ClickAwayListenerProps) {
+    const ref = useRef(null);
+
+    useEffect(() => {
+        const handleOutSideClick = (event: MouseEvent) => {
+            if (ref.current && !(ref.current as any).contains(event.target)) {
+                props.onClickAway && props.onClickAway(event as any);
+            }
+        };
+
+        document.addEventListener("click", handleOutSideClick, true);
+
+        // CleanUp When element unmount
+        return () =>
+            document.removeEventListener("click", handleOutSideClick, true);
+    }, [props.onClickAway]);
+
+    return <div ref={ref}>{props.children}</div>;
+}
+
+export default ClickAwayListener;

package/index.tsx

@@ -16,6 +16,7 @@ import Row from "./row/row";
 import Spacer from "./spacer/spacer";
 import Stack from "./stack/stack";
 import SvgIcon from "./svgIcon/svgIcon";
+import ClickAwayListener from "./clickAwayListener/clickAwayListener";
 
 export {
     Button,
@@ -36,4 +37,5 @@ export {
     Stack,
     Spacer,
     SvgIcon,
+    ClickAwayListener,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.2.1",
+    "version": "1.2.2",
     "description": "",
     "main": "./src/index.js",
     "scripts": {