@addev-be/ui 0.8.8 → 0.8.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

package/src/components/layout/Dropdown/index.tsx

@@ -1,6 +1,14 @@
 import * as styles from './styles';
 
-import { CSSProperties, FC, PropsWithChildren, useMemo } from 'react';
+import {
+  CSSProperties,
+  FC,
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 
 import { usePortals } from '../../../providers';
 
@@ -57,23 +65,47 @@ const getDropdownStyle = (dropdown: DropdownProps): CSSProperties => {
 export const Dropdown: FC<DropdownProps> = ({
   children,
   onClose,
-  $backdropAlpha,
   ...props
 }) => {
   const { createPortal } = usePortals();
 
+  const firstClick = useRef(true);
+  const containerRef = useRef<HTMLDivElement | null>(null);
   const style = useMemo(() => getDropdownStyle(props), [props]);
 
+  const onDocumentClick = useCallback(
+    (ev: MouseEvent) => {
+      if (firstClick.current) {
+        firstClick.current = false;
+        return;
+      }
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(ev.target as Node)
+      ) {
+        return onClose?.();
+      }
+    },
+    [onClose]
+  );
+
+  useEffect(() => {
+    if (containerRef.current) {
+      document.addEventListener('click', onDocumentClick);
+      return () => {
+        document.removeEventListener('click', onDocumentClick);
+      };
+    }
+  }, [onDocumentClick]);
+
   const modalPortal = useMemo(
     () =>
       createPortal(
-        <styles.DropdownBackdrop onClick={onClose} $alpha={$backdropAlpha}>
-          <styles.DropdownContainer {...props} style={style}>
-            {children}
-          </styles.DropdownContainer>
-        </styles.DropdownBackdrop>
+        <styles.DropdownContainer ref={containerRef} {...props} style={style}>
+          {children}
+        </styles.DropdownContainer>
       ),
-    [$backdropAlpha, children, createPortal, onClose, props, style]
+    [children, createPortal, props, style]
   );
 
   return <>{modalPortal}</>;