trotl-table 1.0.10 → 1.0.11

package/README.md

@@ -26,6 +26,7 @@ yarn add trotl-table
 
 ## Versions
 ```js
+1.0.9 => add search input
 1.0.9 => fix readme, whatever
 1.0.8 => fix readme
 1.0.7 => removed context (better for npm consumers)

package/dist/index.cjs.js

@@ -9693,26 +9693,49 @@ function Table({
   // Option to read search param from URL
   const [searchTerm, setSearchTerm] = React.useState(extraSearchTerm);
 
-  // Recognize "entry" in URL search param and set as searchTerm if present
-  // Extract window.location.search to a variable for useEffect dependency
-  const locationSearch = typeof window !== "undefined" ? window.location.search : "";
+  // Listen to URL changes via popstate (back/forward) and custom events
   React.useEffect(() => {
     if (!enableSearchUrlParam) {
       setSearchTerm(extraSearchTerm);
       return;
     }
-    const params = new URLSearchParams(locationSearch);
-    const entrySearch = params.get("entry");
-    const urlSearch = params.get("search");
-    console.log(urlSearch);
-    if (entrySearch) {
-      setSearchTerm(entrySearch);
-    } else if (urlSearch) {
-      setSearchTerm(urlSearch);
-    } else {
-      setSearchTerm(extraSearchTerm);
-    }
-  }, [locationSearch, enableSearchUrlParam, extraSearchTerm]);
+    const updateSearchFromUrl = () => {
+      const params = new URLSearchParams(window.location.search);
+      const entrySearch = params.get("entry");
+      const urlSearch = params.get("search");
+      if (entrySearch) {
+        setSearchTerm(entrySearch);
+      } else if (urlSearch) {
+        setSearchTerm(urlSearch);
+      } else {
+        setSearchTerm(extraSearchTerm);
+      }
+    };
+
+    // Initial sync
+    updateSearchFromUrl();
+
+    // Listen for URL changes (back/forward navigation)
+    window.addEventListener('popstate', updateSearchFromUrl);
+
+    // Listen for programmatic URL changes if you use history.pushState/replaceState
+    const originalPushState = window.history.pushState;
+    const originalReplaceState = window.history.replaceState;
+    window.history.pushState = function (...args) {
+      originalPushState.apply(this, args);
+      updateSearchFromUrl();
+    };
+    window.history.replaceState = function (...args) {
+      originalReplaceState.apply(this, args);
+      updateSearchFromUrl();
+    };
+    return () => {
+      window.removeEventListener('popstate', updateSearchFromUrl);
+      // Restore original methods
+      window.history.pushState = originalPushState;
+      window.history.replaceState = originalReplaceState;
+    };
+  }, [enableSearchUrlParam, extraSearchTerm]);
   const toggleRowSelection = React.useCallback(rowId => {
     setSelectedRows(prev => prev.includes(rowId) ? prev.filter(r => r !== rowId) : [...prev, rowId]);
   }, []);