@websolutespa/bom-mixer-hooks 1.2.1 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @websolutespa/bom-mixer-hooks
 
+## 1.3.0
+
+### Minor Changes
+
+- Added: useSearchParamsQs.
+- Modified: useSearchParamsEncoded, useSearchParams, useScrollTo.
+
 ## 1.2.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -252,7 +252,7 @@ declare function useGeolocation(options?: PositionOptions): GeoLocationSensorSta
 
 declare function useIdle(delay?: number, immediate?: boolean): boolean;
 
-declare function useInfiniteLoader(items: any[], perPage?: number, delayInMs?: number): [any[], () => void, boolean];
+declare function useInfiniteLoader<T = any>(items: T[], perPage?: number, delayInMs?: number): [T[], () => void, boolean];
 
 declare const useIsomorphicLayoutEffect: typeof useEffect;
 
@@ -461,7 +461,6 @@ declare function scrollToY(y?: number): void;
 
 declare function useScrolled(callback?: (top: number, left: number) => boolean): boolean;
 
-declare const isBrowser: boolean;
 declare function getSearchParams(url: string, key?: string): IParams | string | null;
 declare function updateSearchParams(currentPath: string, params: IParams): {
     pathname: string;
@@ -473,21 +472,20 @@ declare function replaceSearchParams(router: NextRouter, params: IParams): void;
 declare function pushSearchParams(router: NextRouter, params: IParams): void;
 declare function replaceSearchParamsSilently(params: IParams): void;
 declare function useSearchParams(): IUseSearchParamsResult;
-declare function useSearchParamsValue(key: string): IUseSearchParamsValueResult;
-type IUseSearchParamsResult = {
-    params: IParams;
-    replaceParamsSilently: (params: IParams) => void;
-    replaceParams: (params: IParams) => void;
+type IParams = {
+    [key: string]: string;
 };
 type IUseSearchParamsValueResult = {
     params: string | null;
     replaceParamsSilently: (params: IParams) => void;
 };
-type IParams = {
-    [key: string]: string;
+type IUseSearchParamsResult = {
+    params: IParams;
+    replaceParamsSilently: (params: IParams) => void;
+    replaceParams: (params: IParams) => void;
 };
+declare function useSearchParamsValue(key: string): IUseSearchParamsValueResult;
 
-declare function decode(encoded: string | null | undefined, key?: string): IParamsEncoded;
 declare function getSearchParamsEncoded(url: string, key?: string): {} | null;
 declare function updateSearchParamsEncoded(currentPath: string, value: IParamsEncoded, key?: string): {
     pathname: string;
@@ -498,15 +496,33 @@ declare function updateSearchParamsEncoded(currentPath: string, value: IParamsEn
 declare function replaceSearchParamsEncoded(router: NextRouter, value: IParamsEncoded, key?: string): void;
 declare function pushSearchParamsEncoded(router: NextRouter, value: IParamsEncoded, key?: string): void;
 declare function replaceSearchParamsEncodedSilently(value: IParamsEncoded, key?: string): void;
-declare function useSearchParamsEncoded(key?: string): IUseSearchParamsEncodedResult;
+type IParamsEncoded = {
+    [key: string]: any;
+} | null;
 type IUseSearchParamsEncodedResult = {
     params: IParamsEncoded;
     replaceParamsSilently: (params: IParamsEncoded) => void;
     replaceParams: (params: IParamsEncoded) => void;
 };
-type IParamsEncoded = {
-    [key: string]: any;
-} | null;
+declare function useSearchParamsEncoded(key?: string): IUseSearchParamsEncodedResult;
+
+declare function getSearchParamsQs(url: string, key?: string): {} | null;
+declare function updateSearchParamsQs(currentPath: string, value: IParamsQs, key?: string): {
+    pathname: string;
+    query: {
+        [key: string]: string;
+    };
+};
+declare function replaceSearchParamsQs(router: NextRouter, value: IParamsQs, key?: string): void;
+declare function pushSearchParamsQs(router: NextRouter, value: IParamsQs, key?: string): void;
+declare function replaceSearchParamsQsSilently(value: IParamsQs, key?: string): void;
+type IParamsQs = {};
+type IUseSearchParamsQsResult = {
+    params: Record<string, any> | null;
+    replaceParamsSilently: (params: IParamsQs) => void;
+    replaceParams: (params: IParamsQs) => void;
+};
+declare function useSearchParamsQs(key?: string): IUseSearchParamsQsResult;
 
 type Sorting<T> = {
     items: T[];
@@ -555,4 +571,4 @@ type WindowSize = {
 };
 declare function useWindowSize(): WindowSize;
 
-export { BodyScrollOptions, CartContext, CartProvider, CheckoutContext, CheckoutProvider, ClickOutGetContainer, CurrentStateType, ElementStackItem, Filter, FilterMode, FilterParams, FilterValues, GeoLocationSensorState, IFilter, IFilterOption, IGeolocationPositionError, ILabelContext, ILayoutContext, IPageContext, IPaginationInfo, IParams, IParamsEncoded, IUseSearchParamsEncodedResult, IUseSearchParamsResult, IUseSearchParamsValueResult, KeyCode, KeyMod, KeyboardOptions, KeyboardResult, LabelProvider, LabelService, LayoutProvider, PageProvider, SSRState, SizeResult, SizeType, Sorting, UIReducer, UIValue, UseFiltersResultType, UseKeyboard, UseKeyboardHandler, createElementWithId, createGenericContext, decode, detectIsBrowser, filtersToParams, getCurrentPosition, getFilteredItems, getFilters, getOwnerPaddingRight, getOwnerScrollbarWidth, getPagedItems, getRealSize, getSearchParams, getSearchParamsEncoded, getUID, hasGeolocation, isBrowser, parseLabel, parseParams, pushSearchParams, pushSearchParamsEncoded, replaceSearchParams, replaceSearchParamsEncoded, replaceSearchParamsEncodedSilently, replaceSearchParamsSilently, scrollToRelativeY, scrollToSelector, scrollToY, setFilters, updateSearchParams, updateSearchParamsEncoded, useApi, useApiDelete, useApiFetch, useApiGet, useApiPatch, useApiPost, useApiPut, useBodyScroll, useBreakpoint, useCart, useCheckout, useClickAnyWhere, useClickOut, useCurrency, useCurrentState, useDateTimeFormat, useDebounce, useDebounceCallback, useDebugChangedProps, useDomObserver, useDrawer, useElementSize, useEventListener, useFilters, useGeolocation, useIdle, useInfiniteLoader, useIsomorphicLayoutEffect, useKeyboard, useLabel, useLayout, useModal, useMounted, useNumber, usePage, usePagination, usePortal, usePrevious, useRealSize, useResize, useSSR, useScroll, useScrollTo, useScrolled, useSearchParams, useSearchParamsEncoded, useSearchParamsValue, useSorting, useSwiperIndex, useSyncedRef, useUI, useUnit, useUnmountEffect, useUser, useWindowSize };
+export { BodyScrollOptions, CartContext, CartProvider, CheckoutContext, CheckoutProvider, ClickOutGetContainer, CurrentStateType, ElementStackItem, Filter, FilterMode, FilterParams, FilterValues, GeoLocationSensorState, IFilter, IFilterOption, IGeolocationPositionError, ILabelContext, ILayoutContext, IPageContext, IPaginationInfo, IParams, IParamsEncoded, IParamsQs, IUseSearchParamsEncodedResult, IUseSearchParamsQsResult, IUseSearchParamsResult, IUseSearchParamsValueResult, KeyCode, KeyMod, KeyboardOptions, KeyboardResult, LabelProvider, LabelService, LayoutProvider, PageProvider, SSRState, SizeResult, SizeType, Sorting, UIReducer, UIValue, UseFiltersResultType, UseKeyboard, UseKeyboardHandler, createElementWithId, createGenericContext, detectIsBrowser, filtersToParams, getCurrentPosition, getFilteredItems, getFilters, getOwnerPaddingRight, getOwnerScrollbarWidth, getPagedItems, getRealSize, getSearchParams, getSearchParamsEncoded, getSearchParamsQs, getUID, hasGeolocation, parseLabel, parseParams, pushSearchParams, pushSearchParamsEncoded, pushSearchParamsQs, replaceSearchParams, replaceSearchParamsEncoded, replaceSearchParamsEncodedSilently, replaceSearchParamsQs, replaceSearchParamsQsSilently, replaceSearchParamsSilently, scrollToRelativeY, scrollToSelector, scrollToY, setFilters, updateSearchParams, updateSearchParamsEncoded, updateSearchParamsQs, useApi, useApiDelete, useApiFetch, useApiGet, useApiPatch, useApiPost, useApiPut, useBodyScroll, useBreakpoint, useCart, useCheckout, useClickAnyWhere, useClickOut, useCurrency, useCurrentState, useDateTimeFormat, useDebounce, useDebounceCallback, useDebugChangedProps, useDomObserver, useDrawer, useElementSize, useEventListener, useFilters, useGeolocation, useIdle, useInfiniteLoader, useIsomorphicLayoutEffect, useKeyboard, useLabel, useLayout, useModal, useMounted, useNumber, usePage, usePagination, usePortal, usePrevious, useRealSize, useResize, useSSR, useScroll, useScrollTo, useScrolled, useSearchParams, useSearchParamsEncoded, useSearchParamsQs, useSearchParamsValue, useSorting, useSwiperIndex, useSyncedRef, useUI, useUnit, useUnmountEffect, useUser, useWindowSize };

package/dist/index.js

@@ -83,7 +83,6 @@ __export(src_exports, {
   PageProvider: () => PageProvider,
   createElementWithId: () => createElementWithId,
   createGenericContext: () => createGenericContext,
-  decode: () => decode,
   detectIsBrowser: () => detectIsBrowser,
   filtersToParams: () => filtersToParams,
   getCurrentPosition: () => getCurrentPosition,
@@ -95,16 +94,19 @@ __export(src_exports, {
   getRealSize: () => getRealSize,
   getSearchParams: () => getSearchParams,
   getSearchParamsEncoded: () => getSearchParamsEncoded,
+  getSearchParamsQs: () => getSearchParamsQs,
   getUID: () => getUID,
   hasGeolocation: () => hasGeolocation,
-  isBrowser: () => isBrowser,
   parseLabel: () => parseLabel,
   parseParams: () => parseParams,
   pushSearchParams: () => pushSearchParams,
   pushSearchParamsEncoded: () => pushSearchParamsEncoded,
+  pushSearchParamsQs: () => pushSearchParamsQs,
   replaceSearchParams: () => replaceSearchParams,
   replaceSearchParamsEncoded: () => replaceSearchParamsEncoded,
   replaceSearchParamsEncodedSilently: () => replaceSearchParamsEncodedSilently,
+  replaceSearchParamsQs: () => replaceSearchParamsQs,
+  replaceSearchParamsQsSilently: () => replaceSearchParamsQsSilently,
   replaceSearchParamsSilently: () => replaceSearchParamsSilently,
   scrollToRelativeY: () => scrollToRelativeY,
   scrollToSelector: () => scrollToSelector,
@@ -112,6 +114,7 @@ __export(src_exports, {
   setFilters: () => setFilters,
   updateSearchParams: () => updateSearchParams,
   updateSearchParamsEncoded: () => updateSearchParamsEncoded,
+  updateSearchParamsQs: () => updateSearchParamsQs,
   useApi: () => useApi,
   useApiDelete: () => useApiDelete,
   useApiFetch: () => useApiFetch,
@@ -158,6 +161,7 @@ __export(src_exports, {
   useScrolled: () => useScrolled,
   useSearchParams: () => useSearchParams,
   useSearchParamsEncoded: () => useSearchParamsEncoded,
+  useSearchParamsQs: () => useSearchParamsQs,
   useSearchParamsValue: () => useSearchParamsValue,
   useSorting: () => useSorting,
   useSwiperIndex: () => useSwiperIndex,
@@ -334,8 +338,9 @@ var import_react6 = require("react");
 var import_react5 = require("react");
 
 // src/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts
+var import_bom_core2 = require("@websolutespa/bom-core");
 var import_react4 = require("react");
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react4.useLayoutEffect : import_react4.useEffect;
+var useIsomorphicLayoutEffect = import_bom_core2.isBrowser ? import_react4.useLayoutEffect : import_react4.useEffect;
 
 // src/useEventListener/useEventListener.ts
 function useEventListener_(eventName, handler, element, options) {
@@ -1458,9 +1463,9 @@ function usePagination($items, $page = 1, $perPage = 15) {
 var import_react27 = require("react");
 var namespace = "theme";
 function usePortal(name = getUID(), getContainer) {
-  const { isBrowser: isBrowser2 } = useSSR();
+  const { isBrowser: isBrowser6 } = useSSR();
   const id = `${namespace}-${name}`;
-  const [portal, setPortal] = (0, import_react27.useState)(isBrowser2 ? createElementWithId(id) : null);
+  const [portal, setPortal] = (0, import_react27.useState)(isBrowser6 ? createElementWithId(id) : null);
   (0, import_react27.useEffect)(() => {
     const container = typeof getContainer === "function" ? getContainer() : null;
     const parentElement = container || document.body;
@@ -1552,6 +1557,7 @@ function useScroll() {
 }
 
 // src/useScrollTo/useScrollTo.ts
+var import_bom_core3 = require("@websolutespa/bom-core");
 var import_framer_motion = require("framer-motion");
 function useScrollTo(offset = 0) {
   const scrollToHash = (event) => {
@@ -1564,7 +1570,7 @@ function useScrollTo(offset = 0) {
   return scrollToHash;
 }
 function scrollToSelector(selector, offset = 0) {
-  if (selector && typeof window !== "undefined") {
+  if (selector && import_bom_core3.isBrowser) {
     const element = document.querySelector(selector);
     if (element) {
       const rect = element.getBoundingClientRect();
@@ -1607,9 +1613,9 @@ function useScrolled(callback = DEFAULT_CALLBACK) {
 }
 
 // src/useSearchParams/useSearchParams.ts
+var import_bom_core4 = require("@websolutespa/bom-core");
 var import_router = require("next/router");
 var import_react32 = require("react");
-var isBrowser = typeof window !== "undefined";
 function replace_(params) {
   if (window.history) {
     const title = document.title;
@@ -1660,7 +1666,7 @@ function pushSearchParams(router, params) {
   router.push({ pathname, query });
 }
 function replaceSearchParamsSilently(params) {
-  if (isBrowser) {
+  if (import_bom_core4.isBrowser) {
     const searchParams = serialize_(window.location.search, params);
     replace_(searchParams);
   }
@@ -1696,18 +1702,19 @@ function useSearchParamsValue(key) {
 }
 
 // src/useSearchParamsEncoded/useSearchParamsEncoded.ts
+var import_bom_core5 = require("@websolutespa/bom-core");
 var import_router2 = require("next/router");
 var import_react33 = require("react");
 var USE_ENCRYPTION = true;
 function base64ToString(base64) {
   if (!USE_ENCRYPTION)
     return base64;
-  return isBrowser ? window.atob(base64) : Buffer.from(base64, "base64").toString();
+  return import_bom_core5.isBrowser ? window.atob(base64) : Buffer.from(base64, "base64").toString();
 }
 function stringToBase64(text) {
   if (!USE_ENCRYPTION)
     return text;
-  return isBrowser ? window.btoa(text) : Buffer.from(text).toString("base64");
+  return import_bom_core5.isBrowser ? window.btoa(text) : Buffer.from(text).toString("base64");
 }
 function stringToURLSearchParams(url) {
   return new URLSearchParams(url);
@@ -1796,7 +1803,7 @@ function pushSearchParamsEncoded(router, value, key) {
   router.push({ pathname, query });
 }
 function replaceSearchParamsEncodedSilently(value, key) {
-  if (isBrowser) {
+  if (import_bom_core5.isBrowser) {
     const searchParams = serialize_2(window.location.search, value, key);
     replace_2(searchParams);
   }
@@ -1817,13 +1824,123 @@ function useSearchParamsEncoded(key) {
   return { params, replaceParamsSilently, replaceParams };
 }
 
-// src/useSorting/useSorting.ts
+// src/useSearchParamsQs/useSearchParamsQs.ts
+var import_bom_core6 = require("@websolutespa/bom-core");
+var import_router3 = require("next/router");
 var import_react34 = require("react");
+function decode2(encoded, key) {
+  let decoded = null;
+  if (encoded) {
+    decoded = (0, import_bom_core6.qsDeserializeRaw)(encoded);
+  }
+  if (key && decoded) {
+    decoded = decoded[key];
+  }
+  return decoded || null;
+}
+function encode2(params, value, key) {
+  if (key) {
+    params = __spreadProps(__spreadValues({}, params), { [key]: value });
+  } else if (typeof value === "object") {
+    params = __spreadValues(__spreadValues({}, params), value);
+  } else {
+    params = __spreadValues({}, params);
+  }
+  const encoded = (0, import_bom_core6.qsSerializeRaw)(params);
+  return encoded;
+}
+function stringToURLSearchParams2(url) {
+  return new URLSearchParams(url);
+}
+function getURLSearchParams2(url, key) {
+  const params = stringToURLSearchParams2(url);
+  return params.get(key);
+}
+function setURLSearchParams2(url, keyOrValue, value) {
+  const params = stringToURLSearchParams2(url);
+  if (value != null) {
+    params.set(keyOrValue, value);
+  } else {
+    params.set(keyOrValue, "");
+  }
+  return params;
+}
+function replace_3(params) {
+  if (window.history) {
+    const title = document.title;
+    const url = `${window.location.href.split("?")[0]}?${params.toString()}`;
+    window.history.replaceState(params.toString(), title, url);
+  }
+}
+function deserialize_3(url, key) {
+  const encoded = getURLSearchParams2(url, "params");
+  return decode2(encoded, key);
+}
+function serialize_3(url, value, key) {
+  const params = deserialize_3(url);
+  const encoded = encode2(params, value, key);
+  return setURLSearchParams2(url, "params", encoded);
+}
+function searchParamsToObject_3(params) {
+  const entries = params.entries();
+  const result = {};
+  for (const [key, value] of entries) {
+    result[key] = value;
+  }
+  return result;
+}
+function getSearchParamsQs(url, key) {
+  const components = url.split("?");
+  const search = components[1] || "";
+  const searchParams = new URLSearchParams(search);
+  const params = searchParams.get("params");
+  const value = params ? decode2(params, key) : null;
+  return value;
+}
+function updateSearchParamsQs(currentPath, value, key) {
+  const components = currentPath.split("?");
+  const searchParams = serialize_3(components[1] || "", value, key);
+  const query = searchParamsToObject_3(searchParams);
+  const pathname = components[0] || "";
+  return { pathname, query };
+}
+function replaceSearchParamsQs(router, value, key) {
+  const { pathname, query } = updateSearchParamsQs(router.asPath, value, key);
+  router.replace({ pathname, query });
+}
+function pushSearchParamsQs(router, value, key) {
+  const { pathname, query } = updateSearchParamsQs(router.asPath, value, key);
+  router.push({ pathname, query });
+}
+function replaceSearchParamsQsSilently(value, key) {
+  if (import_bom_core6.isBrowser) {
+    const searchParams = serialize_3(window.location.search, value, key);
+    replace_3(searchParams);
+  }
+}
+function useSearchParamsQs(key) {
+  const router = (0, import_router3.useRouter)();
+  const initialValue = (0, import_react34.useMemo)(() => {
+    const value = getSearchParamsQs(router.asPath, key);
+    return value;
+  }, [key, router.asPath]);
+  const params = initialValue;
+  const replaceParamsSilently = (0, import_react34.useCallback)((params2) => {
+    replaceSearchParamsQsSilently(params2, key);
+  }, [key]);
+  const replaceParams = (0, import_react34.useCallback)((params2) => {
+    replaceSearchParamsQs(router, params2, key);
+  }, [key, router]);
+  return { params, replaceParamsSilently, replaceParams };
+}
+
+// src/useSorting/useSorting.ts
+var import_react35 = require("react");
 function useSorting(items_, callback_, sort_) {
-  const [sort, setSort] = (0, import_react34.useState)(sort_);
-  const [items, setItems] = (0, import_react34.useState)(callback_(items_.slice(), sort));
-  const isInitialMount = (0, import_react34.useRef)(true);
-  (0, import_react34.useEffect)(() => {
+  const [sort, setSort] = (0, import_react35.useState)(sort_);
+  const [items, setItems] = (0, import_react35.useState)(callback_(items_.slice(), sort));
+  const isInitialMount = (0, import_react35.useRef)(true);
+  (0, import_react35.useEffect)(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
     } else {
@@ -1839,18 +1956,18 @@ function useSorting(items_, callback_, sort_) {
 }
 
 // src/useSwiperIndex/useSwiperIndex.ts
-var import_react35 = require("react");
-var import_react36 = require("swiper/react");
+var import_react36 = require("react");
+var import_react37 = require("swiper/react");
 function useSwiperIndex() {
-  const swiper = (0, import_react36.useSwiper)();
-  const [index, setIndex] = (0, import_react35.useState)(swiper.realIndex);
-  const slideTo = (0, import_react35.useCallback)((index2) => {
+  const swiper = (0, import_react37.useSwiper)();
+  const [index, setIndex] = (0, import_react36.useState)(swiper.realIndex);
+  const slideTo = (0, import_react36.useCallback)((index2) => {
     swiper.slideTo(index2);
   }, [swiper]);
   const onSlideChange = (swiper2) => {
     setIndex(swiper2.realIndex);
   };
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (swiper) {
       swiper.on("slideChange", onSlideChange);
     }
@@ -1864,11 +1981,11 @@ function useSwiperIndex() {
 }
 
 // src/useSyncedRef/useSyncedRef.ts
-var import_react37 = require("react");
+var import_react38 = require("react");
 function useSyncedRef(value) {
-  const ref = (0, import_react37.useRef)(value);
+  const ref = (0, import_react38.useRef)(value);
   ref.current = value;
-  return (0, import_react37.useMemo)(() => Object.freeze({
+  return (0, import_react38.useMemo)(() => Object.freeze({
     get current() {
       return ref.current;
     }
@@ -1881,10 +1998,10 @@ function useUnit(unit = "kilometer", locale) {
 }
 
 // src/useUnmountEffect/useUnmountEffect.ts
-var import_react38 = require("react");
+var import_react39 = require("react");
 function useUnmountEffect(effect) {
   const effectRef = useSyncedRef(effect);
-  (0, import_react38.useEffect)(() => () => {
+  (0, import_react39.useEffect)(() => () => {
     effectRef.current();
   }, []);
 }
@@ -1912,7 +2029,6 @@ var useUser = (0, import_zustand4.create)((set) => ({
   PageProvider,
   createElementWithId,
   createGenericContext,
-  decode,
   detectIsBrowser,
   filtersToParams,
   getCurrentPosition,
@@ -1924,16 +2040,19 @@ var useUser = (0, import_zustand4.create)((set) => ({
   getRealSize,
   getSearchParams,
   getSearchParamsEncoded,
+  getSearchParamsQs,
   getUID,
   hasGeolocation,
-  isBrowser,
   parseLabel,
   parseParams,
   pushSearchParams,
   pushSearchParamsEncoded,
+  pushSearchParamsQs,
   replaceSearchParams,
   replaceSearchParamsEncoded,
   replaceSearchParamsEncodedSilently,
+  replaceSearchParamsQs,
+  replaceSearchParamsQsSilently,
   replaceSearchParamsSilently,
   scrollToRelativeY,
   scrollToSelector,
@@ -1941,6 +2060,7 @@ var useUser = (0, import_zustand4.create)((set) => ({
   setFilters,
   updateSearchParams,
   updateSearchParamsEncoded,
+  updateSearchParamsQs,
   useApi,
   useApiDelete,
   useApiFetch,
@@ -1987,6 +2107,7 @@ var useUser = (0, import_zustand4.create)((set) => ({
   useScrolled,
   useSearchParams,
   useSearchParamsEncoded,
+  useSearchParamsQs,
   useSearchParamsValue,
   useSorting,
   useSwiperIndex,

package/dist/index.mjs

@@ -214,8 +214,9 @@ import { useState as useState3 } from "react";
 import { useEffect as useEffect4, useRef as useRef2 } from "react";
 
 // src/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts
+import { isBrowser } from "@websolutespa/bom-core";
 import { useEffect as useEffect3, useLayoutEffect } from "react";
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect3;
+var useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect3;
 
 // src/useEventListener/useEventListener.ts
 function useEventListener_(eventName, handler, element, options) {
@@ -1338,9 +1339,9 @@ function usePagination($items, $page = 1, $perPage = 15) {
 import { useEffect as useEffect19, useState as useState14 } from "react";
 var namespace = "theme";
 function usePortal(name = getUID(), getContainer) {
-  const { isBrowser: isBrowser2 } = useSSR();
+  const { isBrowser: isBrowser6 } = useSSR();
   const id = `${namespace}-${name}`;
-  const [portal, setPortal] = useState14(isBrowser2 ? createElementWithId(id) : null);
+  const [portal, setPortal] = useState14(isBrowser6 ? createElementWithId(id) : null);
   useEffect19(() => {
     const container = typeof getContainer === "function" ? getContainer() : null;
     const parentElement = container || document.body;
@@ -1432,6 +1433,7 @@ function useScroll() {
 }
 
 // src/useScrollTo/useScrollTo.ts
+import { isBrowser as isBrowser2 } from "@websolutespa/bom-core";
 import { animate } from "framer-motion";
 function useScrollTo(offset = 0) {
   const scrollToHash = (event) => {
@@ -1444,7 +1446,7 @@ function useScrollTo(offset = 0) {
   return scrollToHash;
 }
 function scrollToSelector(selector, offset = 0) {
-  if (selector && typeof window !== "undefined") {
+  if (selector && isBrowser2) {
     const element = document.querySelector(selector);
     if (element) {
       const rect = element.getBoundingClientRect();
@@ -1487,9 +1489,9 @@ function useScrolled(callback = DEFAULT_CALLBACK) {
 }
 
 // src/useSearchParams/useSearchParams.ts
+import { isBrowser as isBrowser3 } from "@websolutespa/bom-core";
 import { useRouter } from "next/router";
 import { useCallback as useCallback4, useMemo as useMemo5 } from "react";
-var isBrowser = typeof window !== "undefined";
 function replace_(params) {
   if (window.history) {
     const title = document.title;
@@ -1540,7 +1542,7 @@ function pushSearchParams(router, params) {
   router.push({ pathname, query });
 }
 function replaceSearchParamsSilently(params) {
-  if (isBrowser) {
+  if (isBrowser3) {
     const searchParams = serialize_(window.location.search, params);
     replace_(searchParams);
   }
@@ -1576,18 +1578,19 @@ function useSearchParamsValue(key) {
 }
 
 // src/useSearchParamsEncoded/useSearchParamsEncoded.ts
+import { isBrowser as isBrowser4 } from "@websolutespa/bom-core";
 import { useRouter as useRouter2 } from "next/router";
 import { useCallback as useCallback5, useMemo as useMemo6 } from "react";
 var USE_ENCRYPTION = true;
 function base64ToString(base64) {
   if (!USE_ENCRYPTION)
     return base64;
-  return isBrowser ? window.atob(base64) : Buffer.from(base64, "base64").toString();
+  return isBrowser4 ? window.atob(base64) : Buffer.from(base64, "base64").toString();
 }
 function stringToBase64(text) {
   if (!USE_ENCRYPTION)
     return text;
-  return isBrowser ? window.btoa(text) : Buffer.from(text).toString("base64");
+  return isBrowser4 ? window.btoa(text) : Buffer.from(text).toString("base64");
 }
 function stringToURLSearchParams(url) {
   return new URLSearchParams(url);
@@ -1676,7 +1679,7 @@ function pushSearchParamsEncoded(router, value, key) {
   router.push({ pathname, query });
 }
 function replaceSearchParamsEncodedSilently(value, key) {
-  if (isBrowser) {
+  if (isBrowser4) {
     const searchParams = serialize_2(window.location.search, value, key);
     replace_2(searchParams);
   }
@@ -1697,6 +1700,116 @@ function useSearchParamsEncoded(key) {
   return { params, replaceParamsSilently, replaceParams };
 }
 
+// src/useSearchParamsQs/useSearchParamsQs.ts
+import { isBrowser as isBrowser5, qsDeserializeRaw, qsSerializeRaw } from "@websolutespa/bom-core";
+import { useRouter as useRouter3 } from "next/router";
+import { useCallback as useCallback6, useMemo as useMemo7 } from "react";
+function decode2(encoded, key) {
+  let decoded = null;
+  if (encoded) {
+    decoded = qsDeserializeRaw(encoded);
+  }
+  if (key && decoded) {
+    decoded = decoded[key];
+  }
+  return decoded || null;
+}
+function encode2(params, value, key) {
+  if (key) {
+    params = __spreadProps(__spreadValues({}, params), { [key]: value });
+  } else if (typeof value === "object") {
+    params = __spreadValues(__spreadValues({}, params), value);
+  } else {
+    params = __spreadValues({}, params);
+  }
+  const encoded = qsSerializeRaw(params);
+  return encoded;
+}
+function stringToURLSearchParams2(url) {
+  return new URLSearchParams(url);
+}
+function getURLSearchParams2(url, key) {
+  const params = stringToURLSearchParams2(url);
+  return params.get(key);
+}
+function setURLSearchParams2(url, keyOrValue, value) {
+  const params = stringToURLSearchParams2(url);
+  if (value != null) {
+    params.set(keyOrValue, value);
+  } else {
+    params.set(keyOrValue, "");
+  }
+  return params;
+}
+function replace_3(params) {
+  if (window.history) {
+    const title = document.title;
+    const url = `${window.location.href.split("?")[0]}?${params.toString()}`;
+    window.history.replaceState(params.toString(), title, url);
+  }
+}
+function deserialize_3(url, key) {
+  const encoded = getURLSearchParams2(url, "params");
+  return decode2(encoded, key);
+}
+function serialize_3(url, value, key) {
+  const params = deserialize_3(url);
+  const encoded = encode2(params, value, key);
+  return setURLSearchParams2(url, "params", encoded);
+}
+function searchParamsToObject_3(params) {
+  const entries = params.entries();
+  const result = {};
+  for (const [key, value] of entries) {
+    result[key] = value;
+  }
+  return result;
+}
+function getSearchParamsQs(url, key) {
+  const components = url.split("?");
+  const search = components[1] || "";
+  const searchParams = new URLSearchParams(search);
+  const params = searchParams.get("params");
+  const value = params ? decode2(params, key) : null;
+  return value;
+}
+function updateSearchParamsQs(currentPath, value, key) {
+  const components = currentPath.split("?");
+  const searchParams = serialize_3(components[1] || "", value, key);
+  const query = searchParamsToObject_3(searchParams);
+  const pathname = components[0] || "";
+  return { pathname, query };
+}
+function replaceSearchParamsQs(router, value, key) {
+  const { pathname, query } = updateSearchParamsQs(router.asPath, value, key);
+  router.replace({ pathname, query });
+}
+function pushSearchParamsQs(router, value, key) {
+  const { pathname, query } = updateSearchParamsQs(router.asPath, value, key);
+  router.push({ pathname, query });
+}
+function replaceSearchParamsQsSilently(value, key) {
+  if (isBrowser5) {
+    const searchParams = serialize_3(window.location.search, value, key);
+    replace_3(searchParams);
+  }
+}
+function useSearchParamsQs(key) {
+  const router = useRouter3();
+  const initialValue = useMemo7(() => {
+    const value = getSearchParamsQs(router.asPath, key);
+    return value;
+  }, [key, router.asPath]);
+  const params = initialValue;
+  const replaceParamsSilently = useCallback6((params2) => {
+    replaceSearchParamsQsSilently(params2, key);
+  }, [key]);
+  const replaceParams = useCallback6((params2) => {
+    replaceSearchParamsQs(router, params2, key);
+  }, [key, router]);
+  return { params, replaceParamsSilently, replaceParams };
+}
+
 // src/useSorting/useSorting.ts
 import { useEffect as useEffect22, useRef as useRef11, useState as useState18 } from "react";
 function useSorting(items_, callback_, sort_) {
@@ -1719,12 +1832,12 @@ function useSorting(items_, callback_, sort_) {
 }
 
 // src/useSwiperIndex/useSwiperIndex.ts
-import { useCallback as useCallback6, useEffect as useEffect23, useState as useState19 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect23, useState as useState19 } from "react";
 import { useSwiper } from "swiper/react";
 function useSwiperIndex() {
   const swiper = useSwiper();
   const [index, setIndex] = useState19(swiper.realIndex);
-  const slideTo = useCallback6((index2) => {
+  const slideTo = useCallback7((index2) => {
     swiper.slideTo(index2);
   }, [swiper]);
   const onSlideChange = (swiper2) => {
@@ -1744,11 +1857,11 @@ function useSwiperIndex() {
 }
 
 // src/useSyncedRef/useSyncedRef.ts
-import { useMemo as useMemo7, useRef as useRef12 } from "react";
+import { useMemo as useMemo8, useRef as useRef12 } from "react";
 function useSyncedRef(value) {
   const ref = useRef12(value);
   ref.current = value;
-  return useMemo7(() => Object.freeze({
+  return useMemo8(() => Object.freeze({
     get current() {
       return ref.current;
     }
@@ -1791,7 +1904,6 @@ export {
   PageProvider,
   createElementWithId,
   createGenericContext,
-  decode,
   detectIsBrowser,
   filtersToParams,
   getCurrentPosition,
@@ -1803,16 +1915,19 @@ export {
   getRealSize,
   getSearchParams,
   getSearchParamsEncoded,
+  getSearchParamsQs,
   getUID,
   hasGeolocation,
-  isBrowser,
   parseLabel,
   parseParams,
   pushSearchParams,
   pushSearchParamsEncoded,
+  pushSearchParamsQs,
   replaceSearchParams,
   replaceSearchParamsEncoded,
   replaceSearchParamsEncodedSilently,
+  replaceSearchParamsQs,
+  replaceSearchParamsQsSilently,
   replaceSearchParamsSilently,
   scrollToRelativeY,
   scrollToSelector,
@@ -1820,6 +1935,7 @@ export {
   setFilters,
   updateSearchParams,
   updateSearchParamsEncoded,
+  updateSearchParamsQs,
   useApi,
   useApiDelete,
   useApiFetch,
@@ -1866,6 +1982,7 @@ export {
   useScrolled,
   useSearchParams,
   useSearchParamsEncoded,
+  useSearchParamsQs,
   useSearchParamsValue,
   useSorting,
   useSwiperIndex,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websolutespa/bom-mixer-hooks",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Mixer Hooks module of the BOM Repository",
   "keywords": [
     "bom",

package/src/index.ts

@@ -43,6 +43,7 @@ export * from './useScrollTo/useScrollTo';
 export * from './useScrolled/useScrolled';
 export * from './useSearchParams/useSearchParams';
 export * from './useSearchParamsEncoded/useSearchParamsEncoded';
+export * from './useSearchParamsQs/useSearchParamsQs';
 export * from './useSorting/useSorting';
 export * from './useSwiperIndex/useSwiperIndex';
 export * from './useSyncedRef/useSyncedRef';

package/src/useInfiniteLoader/useInfiniteLoader.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 
-export function useInfiniteLoader(items: any[], perPage: number = 12, delayInMs = 100): [any[], () => void, boolean] {
+export function useInfiniteLoader<T = any>(items: T[], perPage: number = 12, delayInMs = 100): [T[], () => void, boolean] {
 
   const total = items.length;
 

package/src/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts

@@ -1,3 +1,4 @@
+import { isBrowser } from '@websolutespa/bom-core';
 import { useEffect, useLayoutEffect } from 'react';
 
-export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+export const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;

package/src/useScrollTo/useScrollTo.ts

@@ -1,3 +1,4 @@
+import { isBrowser } from '@websolutespa/bom-core';
 import { animate } from 'framer-motion';
 
 export function useScrollTo(offset: number = 0): (event: React.MouseEvent<HTMLElement>) => void {
@@ -16,7 +17,7 @@ export function useScrollTo(offset: number = 0): (event: React.MouseEvent<HTMLEl
 }
 
 export function scrollToSelector(selector?: string, offset: number = 0) {
-  if (selector && typeof window !== 'undefined') {
+  if (selector && isBrowser) {
     const element = document.querySelector(selector);
     if (element) {
       const rect = element.getBoundingClientRect();

package/src/useSearchParams/useSearchParams.ts

@@ -1,8 +1,7 @@
+import { isBrowser } from '@websolutespa/bom-core';
 import { NextRouter, useRouter } from 'next/router';
 import { useCallback, useMemo } from 'react';
 
-export const isBrowser = typeof window !== 'undefined';
-
 function replace_(params: URLSearchParams) {
   if (window.history) {
     const title = document.title;
@@ -91,6 +90,22 @@ export function useSearchParams(): IUseSearchParamsResult {
   return { params, replaceParamsSilently, replaceParams };
 }
 
+export type IParams = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: string;
+};
+
+export type IUseSearchParamsValueResult = {
+  params: string | null,
+  replaceParamsSilently: (params: IParams) => void
+};
+
+export type IUseSearchParamsResult = {
+  params: IParams,
+  replaceParamsSilently: (params: IParams) => void,
+  replaceParams: (params: IParams) => void
+};
+
 export function useSearchParamsValue(key: string): IUseSearchParamsValueResult {
   const router = useRouter();
 
@@ -108,16 +123,3 @@ export function useSearchParamsValue(key: string): IUseSearchParamsValueResult {
 
   return { params, replaceParamsSilently };
 }
-
-export type IUseSearchParamsResult = {
-  params: IParams,
-  replaceParamsSilently: (params: IParams) => void,
-  replaceParams: (params: IParams) => void
-};
-
-export type IUseSearchParamsValueResult = { params: string | null, replaceParamsSilently: (params: IParams) => void };
-
-export type IParams = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key: string]: string;
-};

package/src/useSearchParamsEncoded/useSearchParamsEncoded.ts

@@ -1,6 +1,6 @@
+import { isBrowser } from '@websolutespa/bom-core';
 import { NextRouter, useRouter } from 'next/router';
 import { useCallback, useMemo } from 'react';
-import { isBrowser } from '../useSearchParams/useSearchParams';
 
 const USE_ENCRYPTION = true;
 
@@ -89,7 +89,7 @@ function serialize_(url: string, value: IParamsEncoded, key?: string): URLSearch
   return setURLSearchParams(url, 'params', encoded);
 }
 
-export function decode(encoded: string | null | undefined, key?: string): IParamsEncoded {
+function decode(encoded: string | null | undefined, key?: string): IParamsEncoded {
   let decoded = null;
   if (encoded) {
     const json = base64ToString(encoded);
@@ -161,6 +161,17 @@ export function replaceSearchParamsEncodedSilently(value: IParamsEncoded, key?:
   }
 }
 
+export type IParamsEncoded = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+} | null;
+
+export type IUseSearchParamsEncodedResult = {
+  params: IParamsEncoded,
+  replaceParamsSilently: (params: IParamsEncoded) => void,
+  replaceParams: (params: IParamsEncoded) => void
+};
+
 export function useSearchParamsEncoded(key?: string): IUseSearchParamsEncodedResult {
   const router = useRouter();
 
@@ -189,14 +200,3 @@ export function useSearchParamsEncoded(key?: string): IUseSearchParamsEncodedRes
 
   return { params, replaceParamsSilently, replaceParams };
 }
-
-export type IUseSearchParamsEncodedResult = {
-  params: IParamsEncoded,
-  replaceParamsSilently: (params: IParamsEncoded) => void,
-  replaceParams: (params: IParamsEncoded) => void
-};
-
-export type IParamsEncoded = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key: string]: any;
-} | null;

package/src/useSearchParamsQs/useSearchParamsQs.test.ts

@@ -0,0 +1,80 @@
+
+// readme https://testing-library.com/
+import { act, renderHook } from '@testing-library/react';
+import * as nextRouter from 'next/router';
+import { useSearchParamsQs } from './useSearchParamsQs';
+
+const useRouter = (nextRouter as any).useRouter = jest.fn();
+
+describe('useSearchParamsQs', () => {
+
+  it('should work correctly', async () => {
+    useRouter.mockReturnValue({
+      asPath: '',
+    });
+    const { result } = renderHook(() => useSearchParamsQs());
+    expect(result.current.params).toEqual(null);
+  });
+
+  it('should work correctly with params', async () => {
+    useRouter.mockReturnValue({
+      asPath: '?params=where[market][equals]=ww',
+    });
+    const params = {
+      where: {
+        market: {
+          equals: 'ww',
+        },
+      },
+    };
+    const { result } = renderHook(() => useSearchParamsQs());
+    expect(result.current.params).toEqual(params);
+  });
+
+  it('should replace search params silently', async () => {
+    useRouter.mockReturnValue({
+      asPath: '',
+    });
+    const params = {
+      where: {
+        market: {
+          equals: 'ww',
+        },
+      },
+    };
+    const { result } = renderHook(() => useSearchParamsQs());
+    window.history.replaceState = jest.fn();
+    expect(result.current.replaceParamsSilently).toEqual(expect.any(Function));
+    act(() => result.current.replaceParamsSilently(params));
+    expect(window.history.replaceState).toBeCalledWith(
+      `params=${encodeURIComponent('where[market][equals]=ww')}`,
+      '',
+      `http://localhost/?params=${encodeURIComponent('where[market][equals]=ww')}`
+    );
+  });
+
+  it('should replace search params', async () => {
+    const handler = jest.fn();
+    useRouter.mockReturnValue({
+      asPath: '',
+      replace: handler,
+    });
+    const params = {
+      where: {
+        market: {
+          equals: 'ww',
+        },
+      },
+    };
+    const { result } = renderHook(() => useSearchParamsQs());
+    window.history.replaceState = jest.fn();
+    expect(result.current.replaceParams).toEqual(expect.any(Function));
+    act(() => result.current.replaceParams(params));
+    expect(handler).toBeCalledTimes(1);
+    expect(handler).toBeCalledWith({
+      pathname: '',
+      query: { params: 'where[market][equals]=ww' },
+    });
+  });
+
+});

package/src/useSearchParamsQs/useSearchParamsQs.ts

@@ -0,0 +1,136 @@
+import { isBrowser, qsDeserializeRaw, qsSerializeRaw } from '@websolutespa/bom-core';
+import { NextRouter, useRouter } from 'next/router';
+import { useCallback, useMemo } from 'react';
+
+function decode(encoded: string | null | undefined, key?: string): IParamsQs {
+  let decoded = null;
+  if (encoded) {
+    decoded = qsDeserializeRaw(encoded);
+  }
+  if (key && decoded) {
+    decoded = (decoded as any)[key];
+  }
+  return decoded || null;
+}
+
+function encode(params: IParamsQs, value: IParamsQs, key?: string) {
+  if (key) {
+    params = { ...params, [key]: value };
+  } else if (typeof value === 'object') {
+    params = { ...params, ...value };
+  } else {
+    params = { ...params };
+  }
+  const encoded = qsSerializeRaw(params);
+  return encoded;
+}
+
+function stringToURLSearchParams(url: string): URLSearchParams {
+  return new URLSearchParams(url);
+}
+
+function getURLSearchParams(url: string, key: string): string | null {
+  const params = stringToURLSearchParams(url);
+  return params.get(key);
+}
+
+function setURLSearchParams(url: string, keyOrValue: string, value: string | null | undefined): URLSearchParams { // !!! any
+  const params = stringToURLSearchParams(url);
+  if (value != null) {
+    params.set(keyOrValue, value);
+  } else {
+    params.set(keyOrValue, '');
+  }
+  return params;
+}
+
+function replace_(params: URLSearchParams) {
+  if (window.history) {
+    const title = document.title;
+    const url = `${window.location.href.split('?')[0]}?${params.toString()}`;
+    window.history.replaceState(params.toString(), title, url);
+  }
+}
+
+function deserialize_(url: string, key?: string) {
+  const encoded = getURLSearchParams(url, 'params');
+  return decode(encoded, key);
+}
+
+function serialize_(url: string, value: IParamsQs, key?: string): URLSearchParams {
+  const params = deserialize_(url);
+  const encoded = encode(params, value, key);
+  return setURLSearchParams(url, 'params', encoded);
+}
+
+function searchParamsToObject_(params: URLSearchParams): { [key: string]: string } {
+  const entries = params.entries();
+  const result: { [key: string]: string } = {};
+  for (const [key, value] of entries) {
+    result[key] = value;
+  }
+  return result;
+}
+
+export function getSearchParamsQs(url: string, key?: string): {} | null {
+  const components = url.split('?');
+  const search = components[1] || '';
+  const searchParams = new URLSearchParams(search);
+  const params = searchParams.get('params');
+  const value = params ? decode(params, key) : null;
+  return value;
+}
+
+export function updateSearchParamsQs(currentPath: string, value: IParamsQs, key?: string): { pathname: string, query: { [key: string]: string } } {
+  const components = currentPath.split('?');
+  const searchParams = serialize_(components[1] || '', value, key);
+  const query = searchParamsToObject_(searchParams);
+  const pathname = components[0] || '';
+  return { pathname, query };
+}
+
+export function replaceSearchParamsQs(router: NextRouter, value: IParamsQs, key?: string): void {
+  const { pathname, query } = updateSearchParamsQs(router.asPath, value, key);
+  router.replace({ pathname, query });
+}
+
+export function pushSearchParamsQs(router: NextRouter, value: IParamsQs, key?: string): void {
+  const { pathname, query } = updateSearchParamsQs(router.asPath, value, key);
+  router.push({ pathname, query });
+}
+
+export function replaceSearchParamsQsSilently(value: IParamsQs, key?: string): void {
+  if (isBrowser) {
+    const searchParams = serialize_(window.location.search, value, key);
+    replace_(searchParams);
+  }
+}
+
+export type IParamsQs = {};
+
+export type IUseSearchParamsQsResult = {
+  params: Record<string, any> | null,
+  replaceParamsSilently: (params: IParamsQs) => void,
+  replaceParams: (params: IParamsQs) => void
+};
+
+export function useSearchParamsQs(key?: string): IUseSearchParamsQsResult {
+  const router = useRouter();
+
+  const initialValue = useMemo(() => {
+    const value = getSearchParamsQs(router.asPath, key);
+    return value;
+  }, [key, router.asPath]);
+
+  const params = initialValue;
+
+  const replaceParamsSilently = useCallback((params: IParamsQs) => {
+    replaceSearchParamsQsSilently(params, key);
+  }, [key]);
+
+  const replaceParams = useCallback((params: IParamsQs) => {
+    replaceSearchParamsQs(router, params, key);
+  }, [key, router]);
+
+  return { params, replaceParamsSilently, replaceParams };
+}