feat: eye dropper (#6615)

src/components/Sidebar/Sidebar.tsx

@@ -6,7 +6,6 @@ import React, {
   forwardRef,
   useImperativeHandle,
   useCallback,
-  RefObject,
 } from "react";
 import { Island } from ".././Island";
 import { atom, useSetAtom } from "jotai";
@@ -27,38 +26,10 @@ import { SidebarTabTriggers } from "./SidebarTabTriggers";
 import { SidebarTabTrigger } from "./SidebarTabTrigger";
 import { SidebarTabs } from "./SidebarTabs";
 import { SidebarTab } from "./SidebarTab";
+import { useUIAppState } from "../../context/ui-appState";
+import { useOutsideClick } from "../../hooks/useOutsideClick";
 
 import "./Sidebar.scss";
-import { useUIAppState } from "../../context/ui-appState";
-
-// FIXME replace this with the implem from ColorPicker once it's merged
-const useOnClickOutside = (
-  ref: RefObject<HTMLElement>,
-  cb: (event: MouseEvent) => void,
-) => {
-  useEffect(() => {
-    const listener = (event: MouseEvent) => {
-      if (!ref.current) {
-        return;
-      }
-
-      if (
-        event.target instanceof Element &&
-        (ref.current.contains(event.target) ||
-          !document.body.contains(event.target))
-      ) {
-        return;
-      }
-
-      cb(event);
-    };
-    document.addEventListener("pointerdown", listener, false);
-
-    return () => {
-      document.removeEventListener("pointerdown", listener);
-    };
-  }, [ref, cb]);
-};
 
 /**
  * Flags whether the currently rendered Sidebar is docked or not, for use
@@ -133,7 +104,7 @@ export const SidebarInner = forwardRef(
       setAppState({ openSidebar: null });
     }, [setAppState]);
 
-    useOnClickOutside(
+    useOutsideClick(
       islandRef,
       useCallback(
         (event) => {