@websolutespa/bom-mixer-hooks 1.2.0 → 1.3.0

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) {
@@ -1228,16 +1229,28 @@ var useKeyboard = (handler, keyBindings, options = {}) => {
 import { jsx as jsx4 } from "react/jsx-runtime";
 var [useLabel, LabelContextProvider] = createGenericContext();
 function LabelProvider({ children }) {
-  const { locale, labels } = useLayout();
-  const dictionary = Object.fromEntries(labels.map((l) => [l.id, l.text]));
-  const context = (key, params) => {
-    const label = dictionary[key] != null ? dictionary[key] : key;
-    if (params) {
-      return parseParams(label, params);
-    }
-    return label;
+  const { labels } = useLayout();
+  const labelService = new LabelService(labels);
+  const getLabel = (key, params) => {
+    return labelService.getLabel(key, params);
   };
-  return /* @__PURE__ */ jsx4(LabelContextProvider, { value: context, children });
+  return /* @__PURE__ */ jsx4(LabelContextProvider, { value: getLabel, children });
+}
+var LabelService = class {
+  constructor(labels) {
+    this.labels = labels;
+    this.dictionary = Object.fromEntries(labels.map((l) => [l.id, l.text]));
+  }
+  getLabel(key, params) {
+    return parseLabel(this.dictionary, key, params);
+  }
+};
+function parseLabel(dictionary, key, params) {
+  const label = dictionary[key] != null ? dictionary[key] : key;
+  if (params) {
+    return parseParams(label, params);
+  }
+  return label;
 }
 function parseParams(label, params) {
   const TEMPLATE_REGEXP = /@(\w+)/g;
@@ -1326,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;
@@ -1420,19 +1433,20 @@ function useScroll() {
 }
 
 // src/useScrollTo/useScrollTo.ts
+import { isBrowser as isBrowser2 } from "@websolutespa/bom-core";
 import { animate } from "framer-motion";
-function useScrollTo() {
+function useScrollTo(offset = 0) {
   const scrollToHash = (event) => {
     const href = event.currentTarget.getAttribute("href");
     if (href && href.indexOf("#") !== -1) {
       const hashId = `#${href.split("#")[1]}`;
-      scrollToSelector(hashId);
+      scrollToSelector(hashId, offset);
     }
   };
   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();
@@ -1475,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;
@@ -1528,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);
   }
@@ -1564,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);
@@ -1664,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);
   }
@@ -1685,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_) {
@@ -1707,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) => {
@@ -1732,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;
     }
@@ -1774,11 +1899,11 @@ export {
   KeyCode,
   KeyMod,
   LabelProvider,
+  LabelService,
   LayoutProvider,
   PageProvider,
   createElementWithId,
   createGenericContext,
-  decode,
   detectIsBrowser,
   filtersToParams,
   getCurrentPosition,
@@ -1790,15 +1915,19 @@ export {
   getRealSize,
   getSearchParams,
   getSearchParamsEncoded,
+  getSearchParamsQs,
   getUID,
   hasGeolocation,
-  isBrowser,
+  parseLabel,
   parseParams,
   pushSearchParams,
   pushSearchParamsEncoded,
+  pushSearchParamsQs,
   replaceSearchParams,
   replaceSearchParamsEncoded,
   replaceSearchParamsEncodedSilently,
+  replaceSearchParamsQs,
+  replaceSearchParamsQsSilently,
   replaceSearchParamsSilently,
   scrollToRelativeY,
   scrollToSelector,
@@ -1806,6 +1935,7 @@ export {
   setFilters,
   updateSearchParams,
   updateSearchParamsEncoded,
+  updateSearchParamsQs,
   useApi,
   useApiDelete,
   useApiFetch,
@@ -1852,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.0",
+  "version": "1.3.0",
   "description": "Mixer Hooks module of the BOM Repository",
   "keywords": [
     "bom",
@@ -32,7 +32,7 @@
     "next": ">= 13.4.19",
     "react-dom": ">= 18.2.0",
     "react": ">= 18.2.0",
-    "styled-components": ">= 5.3.11",
+    "styled-components": ">= 5.3.11 <6.x.x",
     "swiper": ">= 8.3.2",
     "zustand": ">= 4.4.0"
   },

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/useDateTimeFormat/useDateTimeFormat.test.tsx

@@ -29,7 +29,7 @@ describe('useDateTimeFormat', () => {
     const { result } = renderHook(() => useDateTimeFormat({
       year: 'numeric',
       month: 'short',
-      day: 'numeric'
+      day: 'numeric',
     }), { wrapper });
     const formatted = result.current(new Date(2023, 0, 19));
     expect(formatted).toEqual('Jan 19, 2023');
@@ -39,7 +39,7 @@ describe('useDateTimeFormat', () => {
     const { result } = renderHook(() => useDateTimeFormat({
       year: 'numeric',
       month: 'short',
-      day: 'numeric'
+      day: 'numeric',
     }), { wrapper });
     const formatted = result.current('2023/1/19');
     expect(formatted).toEqual('Jan 19, 2023');

package/src/useDateTimeFormat/useDateTimeFormat.ts

@@ -5,7 +5,7 @@ export function useDateTimeFormat(
     // weekday: 'long',
     year: 'numeric',
     month: 'numeric',
-    day: 'numeric'
+    day: 'numeric',
   },
   locale?: string
 ): (value: Date | string) => string {

package/src/useElementSize/useElementSize.test.ts

@@ -5,16 +5,16 @@ import { useElementSize } from './useElementSize';
 const setupHook = () => renderHook(() => useElementSize());
 const originalOffsetHeight = Object.getOwnPropertyDescriptor(
   HTMLElement.prototype,
-  'offsetHeight',
+  'offsetHeight'
 ) as PropertyDescriptor;
 const originalOffsetWidth = Object.getOwnPropertyDescriptor(
   HTMLElement.prototype,
-  'offsetWidth',
+  'offsetWidth'
 ) as PropertyDescriptor;
 const resizeElement = (
   node: HTMLElement,
   dimension: 'width' | 'height',
-  value: number,
+  value: number
 ): void => {
   if (dimension === 'height') {
     return void Object.defineProperty(node, 'offsetHeight', {
@@ -37,12 +37,12 @@ describe('useElementSize', () => {
     Object.defineProperty(
       HTMLElement.prototype,
       'offsetHeight',
-      originalOffsetHeight,
+      originalOffsetHeight
     );
     Object.defineProperty(
       HTMLElement.prototype,
       'offsetWidth',
-      originalOffsetWidth,
+      originalOffsetWidth
     );
   });
 

package/src/useEventListener/useEventListener.test.ts

@@ -26,7 +26,7 @@ const docRef = { current: window.document };
 const docAddEventListenerSpy = jest.spyOn(docRef.current, 'addEventListener');
 const docRemoveEventListenerSpy = jest.spyOn(
   docRef.current,
-  'removeEventListener',
+  'removeEventListener'
 );
 
 describe('useEventListener', () => {
@@ -42,12 +42,12 @@ describe('useEventListener', () => {
     expect(windowAddEventListenerSpy).toHaveBeenCalledWith(
       eventName,
       expect.any(Function),
-      options,
+      options
     );
     unmount();
     expect(windowRemoveEventListenerSpy).toHaveBeenCalledWith(
       eventName,
-      expect.any(Function),
+      expect.any(Function)
     );
   });
 
@@ -56,18 +56,18 @@ describe('useEventListener', () => {
     const handler = jest.fn();
     const options = undefined;
     const { unmount } = renderHook(() =>
-      useEventListener(eventName, handler, ref, options),
+      useEventListener(eventName, handler, ref, options)
     );
     expect(refAddEventListenerSpy).toHaveBeenCalledTimes(1);
     expect(refAddEventListenerSpy).toHaveBeenCalledWith(
       eventName,
       expect.any(Function),
-      options,
+      options
     );
     unmount();
     expect(refRemoveEventListenerSpy).toHaveBeenCalledWith(
       eventName,
-      expect.any(Function),
+      expect.any(Function)
     );
   });
 
@@ -76,18 +76,18 @@ describe('useEventListener', () => {
     const handler = jest.fn();
     const options = undefined;
     const { unmount } = renderHook(() =>
-      useEventListener(eventName, handler, docRef, options),
+      useEventListener(eventName, handler, docRef, options)
     );
     expect(docAddEventListenerSpy).toHaveBeenCalledTimes(1);
     expect(docAddEventListenerSpy).toHaveBeenCalledWith(
       eventName,
       expect.any(Function),
-      options,
+      options
     );
     unmount();
     expect(docRemoveEventListenerSpy).toHaveBeenCalledWith(
       eventName,
-      expect.any(Function),
+      expect.any(Function)
     );
   });
 
@@ -103,7 +103,7 @@ describe('useEventListener', () => {
     expect(windowAddEventListenerSpy).toHaveBeenCalledWith(
       eventName,
       expect.any(Function),
-      options,
+      options
     );
   });
 

package/src/useFilters/useFilters.test.ts

@@ -19,7 +19,7 @@ describe('useFilters', () => {
     features: [{
       id: 1,
       title: 'feature',
-    }]
+    }],
   }];
 
   const filterItem = jest.fn((key: string, item: Item, value: IEquatable) => {

package/src/useGeolocation/useGeolocation.test.ts

@@ -18,8 +18,8 @@ describe('useGeolocation', () => {
     getCurrentPosition.mockImplementationOnce((success: (result: any) => Promise<any>) => Promise.resolve(success({
       coords: {
         latitude: 50.0,
-        longitude: 40.0
-      }
+        longitude: 40.0,
+      },
     })));
     const { result } = renderHook(() => useGeolocation());
     expect(result.current.latitude).toBe(50.0);

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/useKeyboard/useKeyboard.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, renderHook, screen } from '@testing-library/react';
-import { KeyboardResult, KeyCode, KeyMod, useKeyboard } from './useKeyboard';
+import { KeyCode, KeyMod, KeyboardResult, useKeyboard } from './useKeyboard';
 
 describe('useKeyboard', () => {
   it('should work correctly', () => {
@@ -46,19 +46,19 @@ describe('useKeyboard', () => {
   it('should work with each command', () => {
     const handler = jest.fn().mockImplementation(() => { });
     renderHook(() =>
-      useKeyboard(handler, [KeyCode.KEY_A, KeyMod.Alt, KeyMod.CtrlCmd, KeyMod.WinCtrl]),
+      useKeyboard(handler, [KeyCode.KEY_A, KeyMod.Alt, KeyMod.CtrlCmd, KeyMod.WinCtrl])
     );
     document.dispatchEvent(
       new KeyboardEvent('keydown', {
         keyCode: KeyCode.KEY_A,
-      }),
+      })
     );
     expect(handler).not.toBeCalled();
     document.dispatchEvent(
       new KeyboardEvent('keydown', {
         keyCode: KeyCode.KEY_A,
         altKey: true,
-      }),
+      })
     );
     expect(handler).not.toBeCalled();
     document.dispatchEvent(
@@ -66,7 +66,7 @@ describe('useKeyboard', () => {
         keyCode: KeyCode.KEY_A,
         altKey: true,
         ctrlKey: true,
-      }),
+      })
     );
     expect(handler).not.toBeCalled();
     document.dispatchEvent(
@@ -75,7 +75,7 @@ describe('useKeyboard', () => {
         altKey: true,
         ctrlKey: true,
         metaKey: true,
-      }),
+      })
     );
     expect(handler).toBeCalledTimes(1);
   });
@@ -103,12 +103,12 @@ describe('useKeyboard', () => {
     const handler = jest.fn().mockImplementation(() => { });
     const nativeHandler = jest.fn().mockImplementation(() => { });
     const { result } = renderHook<KeyboardResult, {}>(() =>
-      useKeyboard(handler, KeyCode.Escape),
+      useKeyboard(handler, KeyCode.Escape)
     );
     const { container } = render(
       <div onKeyDown={nativeHandler} >
         <span data-testid="inner" {...result.current.bindings} />
-      </div>,
+      </div>
     );
     const inner = await screen.findByTestId('inner');
     fireEvent.keyUp(inner, {
@@ -133,7 +133,7 @@ describe('useKeyboard', () => {
     const { container } = render(
       <div onKeyDown={nativeHandler} >
         <span data-testid="inner" {...result.current.bindings} />
-      </div>,
+      </div>
     );
     const inner = await screen.findByTestId('inner');
     expect(nativeHandler).not.toBeCalled();
@@ -147,12 +147,12 @@ describe('useKeyboard', () => {
   it('should trigger capture event', async () => {
     const handler = jest.fn().mockImplementation(() => { });
     const { result } = renderHook<KeyboardResult, {}>(() =>
-      useKeyboard(handler, KeyCode.Escape, { capture: true, disableGlobalEvent: true }),
+      useKeyboard(handler, KeyCode.Escape, { capture: true, disableGlobalEvent: true })
     );
     const { container } = render(
       <div onKeyDownCapture={result.current.bindings.onKeyDownCapture} >
         <span data-testid="inner" />
-      </div>,
+      </div>
     );
     const inner = await screen.findByTestId('inner');
     fireEvent.keyDown(inner, {

package/src/useKeyboard/useKeyboard.ts

@@ -43,7 +43,7 @@ export const useKeyboard: UseKeyboard = (handler, keyBindings, options = {}) =>
 
   const elementBindingHandler = (
     elementEventType: 'keydown' | 'keypress' | 'keyup',
-    isCapture: boolean = false,
+    isCapture: boolean = false
   ) => {
     if (elementEventType !== event) return () => { };
     if (isCapture !== capture) return () => { };
@@ -61,7 +61,7 @@ export const useKeyboard: UseKeyboard = (handler, keyBindings, options = {}) =>
   };
 };
 
-export { KeyMod, KeyCode };
+export { KeyCode, KeyMod };
 
 export type KeyboardOptions = {
   disableGlobalEvent?: boolean