@websolutespa/bom-mixer-hooks 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -1,49 +1,56 @@
-# @websolutespa/bom-mixer-hooks
-
-## 1.2.0
-
-### Minor Changes
-
-- Updating: next 13.
-
-## 1.1.0
-
-### Minor Changes
-
-- Modified: useHttp, useApi.
-
-## 1.0.0
-
-### Minor Changes
-
-- Added: useScrolled.
-
-## 0.2.2
-
-### Patch Changes
-
-- Modified: useBreakpoint theme mediaQuery.
-
-## 0.2.1
-
-### Patch Changes
-
-- Added: source files.
-
-## 0.2.0
-
-### Minor Changes
-
-- Added: splat routes.
-
-## 0.1.0
-
-### Minor Changes
-
-- Added: @websolutespa/bom-core.
-
-## 0.0.2
-
-### Patch Changes
-
-- Added: first release.
+# @websolutespa/bom-mixer-hooks
+
+## 1.2.1
+
+### Patch Changes
+
+- Added: LabelService.
+- Modified: useLabels, useScrollTo.
+
+## 1.2.0
+
+### Minor Changes
+
+- Updating: next 13.
+
+## 1.1.0
+
+### Minor Changes
+
+- Modified: useHttp, useApi.
+
+## 1.0.0
+
+### Minor Changes
+
+- Added: useScrolled.
+
+## 0.2.2
+
+### Patch Changes
+
+- Modified: useBreakpoint theme mediaQuery.
+
+## 0.2.1
+
+### Patch Changes
+
+- Added: source files.
+
+## 0.2.0
+
+### Minor Changes
+
+- Added: splat routes.
+
+## 0.1.0
+
+### Minor Changes
+
+- Added: @websolutespa/bom-core.
+
+## 0.0.2
+
+### Patch Changes
+
+- Added: first release.

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as zustand_middleware from 'zustand/middleware';
 import { StateStorage } from 'zustand/middleware';
 import * as zustand from 'zustand';
-import { ISchema, IEquatable, ILayout, IPage } from '@websolutespa/bom-core';
+import { ISchema, IEquatable, ILabel, ILocalizable, ILayout, IPage } from '@websolutespa/bom-core';
 import { ICartItem, ICartAddItem, IAddressOptions, ICheckoutPartial, IFeatureType, IUser } from '@websolutespa/bom-mixer-models';
 import { NextRouter } from 'next/router';
 
@@ -371,16 +371,19 @@ type KeyboardResult = {
 type UseKeyboardHandler = (event: React__default.KeyboardEvent | KeyboardEvent) => void;
 type UseKeyboard = (handler: UseKeyboardHandler, keyBindings: Array<number> | number, options?: KeyboardOptions) => KeyboardResult;
 
-type ILabelContext = (key: string, params?: {
-    [key: string]: any;
-}) => string;
+type ILabelContext = (key: string, params?: Record<string, any>) => string;
 declare const useLabel: () => ILabelContext;
 declare function LabelProvider({ children }: {
     children?: React__default.ReactNode;
 }): react_jsx_runtime.JSX.Element;
-declare function parseParams(label: string, params: {
-    [key: string]: any;
-}): string;
+declare class LabelService {
+    labels: ILabel[];
+    dictionary: Record<string, ILocalizable | undefined>;
+    constructor(labels: ILabel[]);
+    getLabel(key: string, params?: Record<string, any>): string;
+}
+declare function parseLabel(dictionary: Record<string, ILocalizable | undefined>, key: string, params?: Record<string, any>): string;
+declare function parseParams(label: string, params: Record<string, any>): string;
 
 type ILayoutContext = ILayout;
 declare const useLayout: () => ILayout;
@@ -451,7 +454,7 @@ type Scroll = {
 };
 declare function useScroll(): Scroll;
 
-declare function useScrollTo(): (event: React.MouseEvent<HTMLElement>) => void;
+declare function useScrollTo(offset?: number): (event: React.MouseEvent<HTMLElement>) => void;
 declare function scrollToSelector(selector?: string, offset?: number): void;
 declare function scrollToRelativeY(y?: number, offset?: number): void;
 declare function scrollToY(y?: number): void;
@@ -552,4 +555,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, 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, 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, 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 };

package/dist/index.js

@@ -78,6 +78,7 @@ __export(src_exports, {
   KeyCode: () => KeyCode,
   KeyMod: () => KeyMod,
   LabelProvider: () => LabelProvider,
+  LabelService: () => LabelService,
   LayoutProvider: () => LayoutProvider,
   PageProvider: () => PageProvider,
   createElementWithId: () => createElementWithId,
@@ -97,6 +98,7 @@ __export(src_exports, {
   getUID: () => getUID,
   hasGeolocation: () => hasGeolocation,
   isBrowser: () => isBrowser,
+  parseLabel: () => parseLabel,
   parseParams: () => parseParams,
   pushSearchParams: () => pushSearchParams,
   pushSearchParamsEncoded: () => pushSearchParamsEncoded,
@@ -1346,16 +1348,28 @@ var useKeyboard = (handler, keyBindings, options = {}) => {
 var import_jsx_runtime4 = require("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__ */ (0, import_jsx_runtime4.jsx)(LabelContextProvider, { value: context, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(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;
@@ -1539,12 +1553,12 @@ function useScroll() {
 
 // src/useScrollTo/useScrollTo.ts
 var import_framer_motion = require("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;
@@ -1893,6 +1907,7 @@ var useUser = (0, import_zustand4.create)((set) => ({
   KeyCode,
   KeyMod,
   LabelProvider,
+  LabelService,
   LayoutProvider,
   PageProvider,
   createElementWithId,
@@ -1912,6 +1927,7 @@ var useUser = (0, import_zustand4.create)((set) => ({
   getUID,
   hasGeolocation,
   isBrowser,
+  parseLabel,
   parseParams,
   pushSearchParams,
   pushSearchParamsEncoded,

package/dist/index.mjs

@@ -1228,16 +1228,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;
@@ -1421,12 +1433,12 @@ function useScroll() {
 
 // src/useScrollTo/useScrollTo.ts
 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;
@@ -1774,6 +1786,7 @@ export {
   KeyCode,
   KeyMod,
   LabelProvider,
+  LabelService,
   LayoutProvider,
   PageProvider,
   createElementWithId,
@@ -1793,6 +1806,7 @@ export {
   getUID,
   hasGeolocation,
   isBrowser,
+  parseLabel,
   parseParams,
   pushSearchParams,
   pushSearchParamsEncoded,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websolutespa/bom-mixer-hooks",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "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/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/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

package/src/useLabel/useLabel.tsx

@@ -1,37 +1,47 @@
+import { ILabel, ILocalizable } from '@websolutespa/bom-core';
 import React from 'react';
 import { createGenericContext } from '../useGenericContext/useGenericContext';
 import { useLayout } from '../useLayout/useLayout';
 
-export type ILabelContext = (key: string, params?: { [key: string]: any }) => string;
+export type ILabelContext = (key: string, params?: Record<string, any>) => string;
 
 const [useLabel, LabelContextProvider] = createGenericContext<ILabelContext>();
 
 function LabelProvider({ children }: { children?: React.ReactNode }) {
-
-  // const { locale, labels } = useLayout() || { locale: '*', labels: [] };
-  const { locale, labels } = useLayout();
-
-  // console.log('LabelProvider', locale);
-
-  const dictionary = Object.fromEntries(labels.map(l => [l.id, l.text]));
-
-  const context = (key: string, params?: { [key: string]: any }): string => {
-    const label = (dictionary[key] != null ? dictionary[key] : key) as string;
-    if (params) {
-      return parseParams(label, params);
-    }
-    return label;
+  const { labels } = useLayout();
+  // console.log('LabelProvider', labels);
+  const labelService = new LabelService(labels);
+  const getLabel = (key: string, params?: Record<string, any>): string => {
+    return labelService.getLabel(key, params);
   };
-
-  // console.log('LabelProvider.context', context);
   return (
-    <LabelContextProvider value={context}>
+    <LabelContextProvider value={getLabel}>
       {children}
     </LabelContextProvider>
   );
 }
 
-function parseParams(label: string, params: { [key: string]: any }): string {
+class LabelService {
+  labels: ILabel[];
+  dictionary: Record<string, ILocalizable | undefined>;
+  constructor(labels: ILabel[]) {
+    this.labels = labels;
+    this.dictionary = Object.fromEntries(labels.map(l => [l.id, l.text]));
+  }
+  getLabel(key: string, params?: Record<string, any>): string {
+    return parseLabel(this.dictionary, key, params);
+  }
+}
+
+function parseLabel(dictionary: Record<string, ILocalizable | undefined>, key: string, params?: Record<string, any>): string {
+  const label = (dictionary[key] != null ? dictionary[key] : key) as string;
+  if (params) {
+    return parseParams(label, params);
+  }
+  return label;
+}
+
+function parseParams(label: string, params: Record<string, any>): string {
   const TEMPLATE_REGEXP: RegExp = /@(\w+)/g;
   return label.replace(TEMPLATE_REGEXP, (text: string, key: string) => {
     const replacer: unknown = params[key];
@@ -39,5 +49,5 @@ function parseParams(label: string, params: { [key: string]: any }): string {
   });
 }
 
-export { useLabel, LabelProvider, parseParams };
+export { LabelProvider, LabelService, parseLabel, parseParams, useLabel };
 

package/src/useNumber/useNumber.test.tsx

@@ -28,7 +28,7 @@ describe('useNumber', () => {
   test('should return formatted value', () => {
     const { result } = renderHook(() => useNumber({
       minimumFractionDigits: 2,
-      maximumFractionDigits: 2
+      maximumFractionDigits: 2,
     }), { wrapper });
     const formatted = result.current(1234.5678);
     expect(formatted).toEqual('1,234.57');

package/src/useScrollTo/useScrollTo.ts

@@ -1,6 +1,6 @@
 import { animate } from 'framer-motion';
 
-export function useScrollTo(): (event: React.MouseEvent<HTMLElement>) => void {
+export function useScrollTo(offset: number = 0): (event: React.MouseEvent<HTMLElement>) => void {
   // The handler to smoothly scroll the element into view
   const scrollToHash = (event: React.MouseEvent<HTMLElement>) => {
     const href = event.currentTarget.getAttribute('href');
@@ -9,7 +9,7 @@ export function useScrollTo(): (event: React.MouseEvent<HTMLElement>) => void {
       const hashId = `#${href.split('#')[1]}`;
       // console.log('hashId', hashId);
       // console.log('NavLink.onClick', event.currentTarget.getAttribute('href'), hashId);
-      scrollToSelector(hashId);
+      scrollToSelector(hashId, offset);
     }
   };
   return scrollToHash;
@@ -36,6 +36,6 @@ export function scrollToY(y: number = 0) {
   const duration = Math.sqrt(Math.abs(to - from) / 4000);
   animate(from, to, {
     duration,
-    onUpdate: v => window.scrollTo(0, v)
+    onUpdate: v => window.scrollTo(0, v),
   });
 }

package/src/useSearchParams/useSearchParams.test.ts

@@ -52,7 +52,7 @@ describe('useSearchParams', () => {
     expect(handler).toBeCalledTimes(1);
     expect(handler).toBeCalledWith({
       pathname: '',
-      query: { flag: '1' }
+      query: { flag: '1' },
     });
   });
 

package/src/useSearchParamsEncoded/useSearchParamsEncoded.test.ts

@@ -51,7 +51,7 @@ describe('useSearchParamsEncoded', () => {
     expect(handler).toBeCalledTimes(1);
     expect(handler).toBeCalledWith({
       pathname: '',
-      query: { params: 'eyJmbGFnIjoiMSJ9' }
+      query: { params: 'eyJmbGFnIjoiMSJ9' },
     });
   });