@eztrak/shared 0.13.8 → 0.14.0

package/dist/components/index.d.mts

@@ -129,6 +129,11 @@ interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
     debounceDelay?: number;
     customIcon?: ReactNode | null;
     defaultValue?: string;
+    /**
+     * Pagination param reset to page 1 when the query changes. Defaults to "page";
+     * match `CustomPagination`'s `paramNames.page` if the screen overrides it.
+     */
+    pageParam?: string;
 }
 interface DropdownFilterProps<Option extends Record<string, unknown>> extends Omit<Props<Option, false>, "value" | "onChange" | "options" | "styles" | "name"> {
     /** URL search param key synced with the selected option. */
@@ -142,13 +147,18 @@ interface DropdownFilterProps<Option extends Record<string, unknown>> extends Om
     borderRadius?: string;
     /** When true, persists the selected value in localStorage under `name`. */
     saveToLocalStorage?: boolean;
+    /**
+     * Pagination param reset to page 1 when the selection changes. Defaults to
+     * "page"; match `CustomPagination`'s `paramNames.page` if the screen overrides it.
+     */
+    pageParam?: string;
 }
 
-declare function DropdownFilter<Option extends Record<string, unknown>>({ name, valueKey, options, placeholder, borderRadius, className, isClearable, isSearchable, isDisabled, isLoading, saveToLocalStorage, ...otherProps }: DropdownFilterProps<Option>): react.JSX.Element;
+declare function DropdownFilter<Option extends Record<string, unknown>>({ name, valueKey, options, placeholder, borderRadius, className, isClearable, isSearchable, isDisabled, isLoading, saveToLocalStorage, pageParam, ...otherProps }: DropdownFilterProps<Option>): react.JSX.Element;
 
 declare function ResetFiltersButton({ label, showLabel, icon, variant, className, onReset, disabled, }: ResetFiltersButtonProps): react.JSX.Element;
 
-declare function SearchInput({ placeholder, searchBtn, searchClassName, searchWrapperClass, searchIconClassName, defaultParam, showIcon, name, type, liveSearch, debounceDelay, customIcon, defaultValue, ...props }: SearchInputProps): react.JSX.Element;
+declare function SearchInput({ placeholder, searchBtn, searchClassName, searchWrapperClass, searchIconClassName, defaultParam, showIcon, name, type, liveSearch, debounceDelay, customIcon, defaultValue, pageParam, ...props }: SearchInputProps): react.JSX.Element;
 
 declare const dropdownStyles: <Option>(_borderRadius: string) => StylesConfig<Option, false>;
 

package/dist/components/index.d.ts

@@ -129,6 +129,11 @@ interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
     debounceDelay?: number;
     customIcon?: ReactNode | null;
     defaultValue?: string;
+    /**
+     * Pagination param reset to page 1 when the query changes. Defaults to "page";
+     * match `CustomPagination`'s `paramNames.page` if the screen overrides it.
+     */
+    pageParam?: string;
 }
 interface DropdownFilterProps<Option extends Record<string, unknown>> extends Omit<Props<Option, false>, "value" | "onChange" | "options" | "styles" | "name"> {
     /** URL search param key synced with the selected option. */
@@ -142,13 +147,18 @@ interface DropdownFilterProps<Option extends Record<string, unknown>> extends Om
     borderRadius?: string;
     /** When true, persists the selected value in localStorage under `name`. */
     saveToLocalStorage?: boolean;
+    /**
+     * Pagination param reset to page 1 when the selection changes. Defaults to
+     * "page"; match `CustomPagination`'s `paramNames.page` if the screen overrides it.
+     */
+    pageParam?: string;
 }
 
-declare function DropdownFilter<Option extends Record<string, unknown>>({ name, valueKey, options, placeholder, borderRadius, className, isClearable, isSearchable, isDisabled, isLoading, saveToLocalStorage, ...otherProps }: DropdownFilterProps<Option>): react.JSX.Element;
+declare function DropdownFilter<Option extends Record<string, unknown>>({ name, valueKey, options, placeholder, borderRadius, className, isClearable, isSearchable, isDisabled, isLoading, saveToLocalStorage, pageParam, ...otherProps }: DropdownFilterProps<Option>): react.JSX.Element;
 
 declare function ResetFiltersButton({ label, showLabel, icon, variant, className, onReset, disabled, }: ResetFiltersButtonProps): react.JSX.Element;
 
-declare function SearchInput({ placeholder, searchBtn, searchClassName, searchWrapperClass, searchIconClassName, defaultParam, showIcon, name, type, liveSearch, debounceDelay, customIcon, defaultValue, ...props }: SearchInputProps): react.JSX.Element;
+declare function SearchInput({ placeholder, searchBtn, searchClassName, searchWrapperClass, searchIconClassName, defaultParam, showIcon, name, type, liveSearch, debounceDelay, customIcon, defaultValue, pageParam, ...props }: SearchInputProps): react.JSX.Element;
 
 declare const dropdownStyles: <Option>(_borderRadius: string) => StylesConfig<Option, false>;
 

package/dist/components/index.js

@@ -782,6 +782,14 @@ var dropdownStyles = (_borderRadius) => ({
   })
 });
 
+// src/utils/resetPageParam.ts
+function resetPageParam(params, pageKey = "page", defaultPage = "1") {
+  if (params.has(pageKey)) {
+    params.set(pageKey, defaultPage);
+  }
+  return params;
+}
+
 // src/utils/localStorage.ts
 function getStorage() {
   if (typeof window === "undefined") return null;
@@ -827,6 +835,7 @@ function DropdownFilter({
   isDisabled = false,
   isLoading = false,
   saveToLocalStorage = false,
+  pageParam = "page",
   ...otherProps
 }) {
   const [searchParams, setSearchParams] = (0, import_react_router_dom2.useSearchParams)();
@@ -839,10 +848,10 @@ function DropdownFilter({
     if (stored != null && stored !== "") {
       setSearchParams((prev) => {
         prev.set(name, String(stored));
-        return prev;
+        return resetPageParam(prev, pageParam);
       });
     }
-  }, [saveToLocalStorage, name, searchParams, setSearchParams]);
+  }, [saveToLocalStorage, name, pageParam, searchParams, setSearchParams]);
   const currentValue = searchParams.get(name);
   const selectedOption = currentValue ? options?.find(
     (option) => option[valueKey]?.toString() === currentValue
@@ -850,12 +859,15 @@ function DropdownFilter({
   const handleChange = (selected) => {
     const selectedValue = selected && selected[valueKey] !== "" ? String(selected[valueKey]) : null;
     setSearchParams((prev) => {
+      if ((prev.get(name) ?? "") === (selectedValue ?? "")) {
+        return prev;
+      }
       if (!selectedValue) {
         prev.delete(name);
       } else {
         prev.set(name, selectedValue);
       }
-      return prev;
+      return resetPageParam(prev, pageParam);
     });
     if (saveToLocalStorage) {
       if (selectedValue) {
@@ -972,6 +984,7 @@ function SearchInput({
   debounceDelay = 500,
   customIcon = null,
   defaultValue,
+  pageParam = "page",
   ...props
 }) {
   const [searchParams, setSearchParams] = (0, import_react_router_dom4.useSearchParams)();
@@ -979,17 +992,18 @@ function SearchInput({
   const [inputValue, setInputValue] = (0, import_react3.useState)(queryParam);
   const debounceTimerRef = (0, import_react3.useRef)(null);
   const updateSearchParams = (searchQuery) => {
-    if (searchQuery?.trim()) {
-      setSearchParams((prev) => {
-        prev.set(defaultParam, searchQuery.trim());
+    const nextValue = searchQuery?.trim() ?? "";
+    setSearchParams((prev) => {
+      if ((prev.get(defaultParam) ?? "") === nextValue) {
         return prev;
-      });
-    } else {
-      setSearchParams((prev) => {
+      }
+      if (nextValue) {
+        prev.set(defaultParam, nextValue);
+      } else {
         prev.delete(defaultParam);
-        return prev;
-      });
-    }
+      }
+      return resetPageParam(prev, pageParam);
+    });
   };
   const handleSearch = (e) => {
     e.preventDefault();