history: support clicks anywhere to deselect (#1546)

Author: shakyShane

special-pages/pages/history/app/components/App.jsx

@@ -19,6 +19,7 @@ import { useSearchCommit } from '../global/hooks/useSearchCommit.js';
 import { useRangesData } from '../global/Providers/HistoryServiceProvider.js';
 import { usePlatformName } from '../types.js';
 import { useLayoutMode } from '../global/hooks/useLayoutMode.js';
+import { useClickAnywhereElse } from '../global/hooks/useClickAnywhereElse.jsx';
 
 export function App() {
     const platformName = usePlatformName();
@@ -39,6 +40,7 @@ export function App() {
     useURLReflection();
     useSearchCommit();
     useSearchCommitForRange();
+    const clickAnywhere = useClickAnywhereElse();
 
     /**
      * onClick can be passed directly to the main container,
@@ -62,7 +64,13 @@ export function App() {
     }, [onKeyDown, query]);
 
     return (
-        <div class={styles.layout} data-theme={isDarkMode ? 'dark' : 'light'} data-platform={platformName} data-layout-mode={mode}>
+        <div
+            class={styles.layout}
+            data-theme={isDarkMode ? 'dark' : 'light'}
+            data-platform={platformName}
+            data-layout-mode={mode}
+            onClick={clickAnywhere}
+        >
             <aside class={styles.aside}>
                 <Sidebar ranges={ranges} />
             </aside>

special-pages/pages/history/app/global/Providers/SelectionProvider.js

@@ -99,11 +99,7 @@ export function useRowInteractions(mainRef) {
             if (handled) {
                 event.preventDefault();
                 event.stopImmediatePropagation();
-            } else {
-                console.log('did not handle selection');
             }
-        } else {
-            dispatch({ kind: 'reset', reason: 'click occurred outside of rows' });
         }
     }
 

special-pages/pages/history/app/global/hooks/useClickAnywhereElse.jsx

@@ -0,0 +1,18 @@
+import { useSelectionDispatch } from '../Providers/SelectionProvider.js';
+import { useCallback } from 'preact/hooks';
+
+/**
+ * Custom hook that creates a callback function to handle click events occurring outside of specified elements.
+ * The callback dispatches a reset action when the click event target is not a button or an anchor element.
+ */
+export function useClickAnywhereElse() {
+    const dispatch = useSelectionDispatch();
+    return useCallback(
+        (e) => {
+            if (e.target?.closest?.('button,a') === null) {
+                dispatch({ kind: 'reset', reason: 'click occurred outside of rows' });
+            }
+        },
+        [dispatch],
+    );
+}