@eml-payments/ui-kit 1.7.6 → 1.7.7

package/dist/src/components/Table/StandardTable/useStandardTableController.js

@@ -10,7 +10,7 @@ export function useStandardTableController(props) {
     // sorting / grouping
     sorting, onSortingChange, grouping, enableAccordion, 
     // search
-    searchQuery, minSearchLength = 3, tableActionsDropdown, } = props;
+    searchQuery, minSearchLength = 3, isSearchActive, tableActionsDropdown, } = props;
     // Keep previous data while loading to prevent UI jumps on page change
     const prevDataRef = useRef([]);
     // Always cache the latest non-empty data
@@ -48,12 +48,28 @@ export function useStandardTableController(props) {
     });
     const [pageIndex, setPageIndex] = useState(initialPageIndex);
     const [pageSize, setPageSize] = useState(initialPageSize);
+    const prevIsSearchActiveRef = useRef(Boolean(isSearchActive));
+    const prevSearchQueryRef = useRef(searchQuery);
     useEffect(() => {
         setPageIndex(initialPageIndex);
     }, [initialPageIndex]);
     useEffect(() => {
         setPageSize(initialPageSize);
     }, [initialPageSize]);
+    // Reset pagination to first page when search becomes active
+    // or when the active search query changes
+    useEffect(() => {
+        const isSearchActiveNow = Boolean(isSearchActive);
+        const searchQueryChanged = prevSearchQueryRef.current !== searchQuery;
+        const becameSearchActive = !prevIsSearchActiveRef.current && isSearchActiveNow;
+        const queryChangedWhileActive = searchQueryChanged && isSearchActiveNow;
+        if ((becameSearchActive || queryChangedWhileActive) && pageIndex !== 0) {
+            setPageIndex(0);
+            syncToUrl(0, pageSize);
+        }
+        prevIsSearchActiveRef.current = isSearchActiveNow;
+        prevSearchQueryRef.current = searchQuery;
+    }, [isSearchActive, searchQuery, pageIndex, pageSize, syncToUrl]);
     const [internalSorting, setInternalSorting] = useState(sorting !== null && sorting !== void 0 ? sorting : []);
     const [expanded, setExpanded] = useState(true);
     const stableGrouping = useMemo(() => grouping !== null && grouping !== void 0 ? grouping : [], [grouping]);

package/dist/src/components/Table/hooks/useUrlPaginationSync.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
 function getPaginationParamKeys(tableId) {
     if (tableId) {
@@ -14,6 +14,10 @@ function getPaginationParamKeys(tableId) {
 }
 export function useUrlPaginationSync({ defaultPageSize, tableId, scoped = false, enabled = true, }) {
     const [searchParams, setSearchParams] = useSearchParams();
+    const searchParamsRef = useRef(searchParams);
+    useEffect(() => {
+        searchParamsRef.current = searchParams;
+    }, [searchParams]);
     const { pageNoKey, pageSizeKey } = useMemo(() => getPaginationParamKeys(scoped ? tableId : undefined), [tableId, scoped]);
     const initialPageIndex = useMemo(() => {
         if (!enabled) {
@@ -34,11 +38,17 @@ export function useUrlPaginationSync({ defaultPageSize, tableId, scoped = false,
         if (!enabled) {
             return;
         }
-        const next = new URLSearchParams(searchParams);
-        next.set(pageNoKey, String(pageIndex + 1)); // 1-based
-        next.set(pageSizeKey, String(pageSize));
+        const current = searchParamsRef.current;
+        const nextPageNo = String(pageIndex + 1); // 1-based
+        const nextPageSize = String(pageSize);
+        if (current.get(pageNoKey) === nextPageNo && current.get(pageSizeKey) === nextPageSize) {
+            return;
+        }
+        const next = new URLSearchParams(current);
+        next.set(pageNoKey, nextPageNo);
+        next.set(pageSizeKey, nextPageSize);
         setSearchParams(next, { replace: true });
-    }, [enabled, searchParams, setSearchParams, pageNoKey, pageSizeKey]);
+    }, [enabled, setSearchParams, pageNoKey, pageSizeKey]);
     useEffect(() => {
         if (enabled) {
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "1.7.6",
+	"version": "1.7.7",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",