docs(changeset): Fixed search and allow row selection for only rows with keys

src/Gridler/components/Computer.tsx

@@ -1,5 +1,5 @@
 import { CompactSelection } from '@glideapps/glide-data-grid';
-import { useDebouncedValue } from '@mantine/hooks';
+import { useDebouncedCallback } from '@mantine/hooks';
 import React, { useEffect, useRef } from 'react';
 
 import { useGridlerStore } from './GridlerStore';
@@ -7,6 +7,7 @@ import { useGridlerStore } from './GridlerStore';
 //The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders.
 export const Computer = React.memo(() => {
   const refFirstRun = useRef(0);
+  const refLastSearch = useRef('');
   const refLastFilters = useRef<unknown>(null);
   const {
     _glideref,
@@ -49,9 +50,22 @@ export const Computer = React.memo(() => {
     values: s.values,
   }));
 
-  const debouncedSearchStr = useDebouncedValue(searchStr, 400, {
-    leading: true,
-  });
+  const debouncedDoSearch = useDebouncedCallback(
+    (searchStr: string) => {
+      loadPage(0, 'all').then(() => {
+        getState('refreshCells')?.();
+        getState('_events')?.dispatchEvent?.(
+          new CustomEvent('onSearched', {
+            detail: { search: searchStr },
+          })
+        );
+      });
+    },
+    {
+      delay: 300,
+      leading: false,
+    }
+  );
 
   useEffect(() => {
     const searchSelection = async () => {
@@ -169,19 +183,15 @@ export const Computer = React.memo(() => {
   }, [columns]);
 
   useEffect(() => {
-    if (debouncedSearchStr === undefined || debouncedSearchStr === null) {
+    if (searchStr === undefined || searchStr === null) {
+      refLastSearch.current = '';
       return;
     }
-
-    loadPage(0, 'all').then(() => {
-      getState('refreshCells')?.();
-      getState('_events')?.dispatchEvent?.(
-        new CustomEvent('onSearched', {
-          detail: { search: debouncedSearchStr },
-        })
-      );
-    });
-  }, [debouncedSearchStr]);
+    if (refLastSearch.current !== searchStr) {
+      debouncedDoSearch(searchStr);
+      refLastSearch.current = searchStr;
+    }
+  }, [searchStr]);
 
   useEffect(() => {
     if (!colSort) {

src/Gridler/components/GridlerStore.tsx

@@ -916,7 +916,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
       hideMenu: props.hideMenu ?? menus.hide,
       scrollToRowKey: props.scrollToRowKey ?? props.selectedRowKey ?? getState('scrollToRowKey'),
       showMenu: props.showMenu ?? menus.show,
-      total_rows: props.total_rows ?? getState('total_rows') ?? 0,
+      total_rows: getState('total_rows') ?? props.total_rows,
     };
   }
 );