added flow display controls overlay

src/utils/hooks/flow/useFlowCellControls.ts

@@ -9,7 +9,7 @@ export const useFlowCellControls = (
 ) => {
   const onChange = useCallback(
     (value: Partial<FlowDisplay>) => onChangeCellView(id, { ...flow, ...value }),
-    []
+    [flow, onChangeCellView]
   );
 
   const hasDescription = !!description && description.length > 32;
@@ -17,23 +17,23 @@ export const useFlowCellControls = (
   const toggleViewDescription = useCallback(() => {
     const show_description = !(flow && flow.show_description);
     onChange({ show_description });
-  }, [id, flow, onChange]);
+  }, [flow, onChange]);
 
   const setViewSingle = useCallback(() => {
     onChange({ display: 'single' });
-  }, [id, flow, onChange]);
+  }, [onChange]);
 
   const setViewHorizontal = useCallback(() => {
     onChange({ display: 'horizontal' });
-  }, [id, flow, onChange]);
+  }, [onChange]);
 
   const setViewVertical = useCallback(() => {
     onChange({ display: 'vertical' });
-  }, [id, flow]);
+  }, [onChange]);
 
   const setViewQuadro = useCallback(() => {
     onChange({ display: 'quadro' });
-  }, [id, flow, onChange]);
+  }, [onChange]);
 
   return {
     hasDescription,

src/utils/hooks/useClickOutsideFocus.ts

@@ -0,0 +1,30 @@
+/**
+ * Handles blur by detecting clicks outside refs.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export const useClickOutsideFocus = () => {
+  const ref = useRef<HTMLElement>();
+  const [isActive, setIsActive] = useState(false);
+
+  const activate = useCallback(() => setIsActive(true), [setIsActive]);
+  const deactivate = useCallback(() => setIsActive(false), [setIsActive]);
+
+  useEffect(() => {
+    if (!isActive || !ref.current) {
+      return;
+    }
+
+    const deactivator = (event: MouseEvent) => {
+      if (!ref.current?.contains(event.target as Node)) {
+        deactivate();
+      }
+    };
+
+    document.addEventListener('mouseup', deactivator);
+
+    return () => document.removeEventListener('mouseup', deactivator);
+  }, [isActive]);
+
+  return { ref, isActive, activate, deactivate };
+};