@websolutespa/bom-mixer-hooks 0.2.1 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-mixer-hooks
 
+## 0.3.0
+
+### Minor Changes
+
+- Added: useScrolled.
+
+## 0.2.2
+
+### Patch Changes
+
+- Modified: useBreakpoint theme mediaQuery.
+
 ## 0.2.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -436,6 +436,13 @@ declare function getRealSize(element: HTMLElement | null): SizeType;
 
 declare function useResize(callback: () => unknown, immediate?: boolean): void;
 
+type SSRState = {
+    isBrowser: boolean;
+    isServer: boolean;
+};
+declare const detectIsBrowser: () => boolean;
+declare function useSSR(): SSRState;
+
 type Scroll = {
     left: number;
     top: number;
@@ -447,6 +454,8 @@ declare function scrollToSelector(selector?: string, offset?: number): void;
 declare function scrollToRelativeY(y?: number, offset?: number): void;
 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): {
@@ -504,13 +513,6 @@ declare function useSorting<T>(items_: T[], callback_: (items: T[], sort?: IEqua
     setSort: (sort?: IEquatable) => void;
 };
 
-type SSRState = {
-    isBrowser: boolean;
-    isServer: boolean;
-};
-declare const detectIsBrowser: () => boolean;
-declare function useSSR(): SSRState;
-
 declare function useSwiperIndex(): [number, (index: number) => void];
 
 /**
@@ -548,4 +550,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, 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, 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 };

package/dist/index.js

@@ -153,6 +153,7 @@ __export(src_exports, {
   useSSR: () => useSSR,
   useScroll: () => useScroll,
   useScrollTo: () => useScrollTo,
+  useScrolled: () => useScrolled,
   useSearchParams: () => useSearchParams,
   useSearchParamsEncoded: () => useSearchParamsEncoded,
   useSearchParamsValue: () => useSearchParamsValue,
@@ -380,7 +381,7 @@ function useBreakpoint() {
     throw new Error("useBreakpoint must be used within ThemeProvider");
   }
   const breakpoints = Object.keys(theme.mediaQuery);
-  const values = Object.values(theme.mediaQuery);
+  const values = Object.values(theme.mediaQuery).map((x) => parseInt(String(x)));
   const breakpoint = (0, import_react7.useMemo)(() => {
     const breakpoint2 = values.reduce((p, c, i) => {
       if (c < windowSize.width) {
@@ -1523,8 +1524,8 @@ var import_react30 = require("react");
 function useScroll() {
   const [scroll, setScroll] = (0, import_react30.useState)({ left: 0, top: 0 });
   const onScroll = () => {
-    const left = window.pageXOffset;
-    const top = window.pageYOffset;
+    const left = window.scrollX;
+    const top = window.scrollY;
     if (scroll.left !== left || scroll.top !== top) {
       setScroll({ left, top });
     }
@@ -1558,11 +1559,11 @@ function scrollToSelector(selector, offset = 0) {
   }
 }
 function scrollToRelativeY(y = 0, offset = 0) {
-  const to = window.pageYOffset + y - 60 + offset;
+  const to = window.scrollY + y - 60 + offset;
   return scrollToY(to);
 }
 function scrollToY(y = 0) {
-  const from = window.pageYOffset;
+  const from = window.scrollY;
   const to = y;
   const duration = Math.sqrt(Math.abs(to - from) / 4e3);
   (0, import_framer_motion.animate)(from, to, {
@@ -1571,9 +1572,29 @@ function scrollToY(y = 0) {
   });
 }
 
+// src/useScrolled/useScrolled.ts
+var import_react31 = require("react");
+var DEFAULT_CALLBACK = (top, left) => {
+  return top > 0;
+};
+function useScrolled(callback = DEFAULT_CALLBACK) {
+  const [scrolled, setScrolled] = (0, import_react31.useState)(false);
+  const onScrolled = () => {
+    const scrolled_ = callback(window.scrollY, window.scrollX);
+    if (scrolled !== scrolled_) {
+      setScrolled(scrolled_);
+    }
+  };
+  useEventListener("scroll", onScrolled);
+  useIsomorphicLayoutEffect(() => {
+    onScrolled();
+  }, []);
+  return scrolled;
+}
+
 // src/useSearchParams/useSearchParams.ts
 var import_router = require("next/router");
-var import_react31 = require("react");
+var import_react32 = require("react");
 var isBrowser = typeof window !== "undefined";
 function replace_(params) {
   if (window.history) {
@@ -1632,29 +1653,29 @@ function replaceSearchParamsSilently(params) {
 }
 function useSearchParams() {
   const router = (0, import_router.useRouter)();
-  const initialValue = (0, import_react31.useMemo)(() => {
+  const initialValue = (0, import_react32.useMemo)(() => {
     const params2 = deserialize_(router.asPath);
     const value = Object.fromEntries(params2);
     return value;
   }, [router.asPath]);
   const params = initialValue;
-  const replaceParamsSilently = (0, import_react31.useCallback)((params2) => {
+  const replaceParamsSilently = (0, import_react32.useCallback)((params2) => {
     replaceSearchParamsSilently(params2);
   }, []);
-  const replaceParams = (0, import_react31.useCallback)((params2) => {
+  const replaceParams = (0, import_react32.useCallback)((params2) => {
     replaceSearchParams(router, params2);
   }, [router]);
   return { params, replaceParamsSilently, replaceParams };
 }
 function useSearchParamsValue(key) {
   const router = (0, import_router.useRouter)();
-  const initialValue = (0, import_react31.useMemo)(() => {
+  const initialValue = (0, import_react32.useMemo)(() => {
     const params2 = deserialize_(router.asPath);
     const value = params2.get(key);
     return value;
   }, [key, router.asPath]);
   const params = initialValue;
-  const replaceParamsSilently = (0, import_react31.useCallback)((params2) => {
+  const replaceParamsSilently = (0, import_react32.useCallback)((params2) => {
     replaceSearchParamsSilently(params2);
   }, []);
   return { params, replaceParamsSilently };
@@ -1662,7 +1683,7 @@ function useSearchParamsValue(key) {
 
 // src/useSearchParamsEncoded/useSearchParamsEncoded.ts
 var import_router2 = require("next/router");
-var import_react32 = require("react");
+var import_react33 = require("react");
 var USE_ENCRYPTION = true;
 function base64ToString(base64) {
   if (!USE_ENCRYPTION)
@@ -1768,27 +1789,27 @@ function replaceSearchParamsEncodedSilently(value, key) {
 }
 function useSearchParamsEncoded(key) {
   const router = (0, import_router2.useRouter)();
-  const initialValue = (0, import_react32.useMemo)(() => {
+  const initialValue = (0, import_react33.useMemo)(() => {
     const value = getSearchParamsEncoded(router.asPath, key);
     return value;
   }, [key, router.asPath]);
   const params = initialValue;
-  const replaceParamsSilently = (0, import_react32.useCallback)((params2) => {
+  const replaceParamsSilently = (0, import_react33.useCallback)((params2) => {
     replaceSearchParamsEncodedSilently(params2, key);
   }, [key]);
-  const replaceParams = (0, import_react32.useCallback)((params2) => {
+  const replaceParams = (0, import_react33.useCallback)((params2) => {
     replaceSearchParamsEncoded(router, params2, key);
   }, [key, router]);
   return { params, replaceParamsSilently, replaceParams };
 }
 
 // src/useSorting/useSorting.ts
-var import_react33 = require("react");
+var import_react34 = require("react");
 function useSorting(items_, callback_, sort_) {
-  const [sort, setSort] = (0, import_react33.useState)(sort_);
-  const [items, setItems] = (0, import_react33.useState)(callback_(items_.slice(), sort));
-  const isInitialMount = (0, import_react33.useRef)(true);
-  (0, import_react33.useEffect)(() => {
+  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)(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
     } else {
@@ -1804,18 +1825,18 @@ function useSorting(items_, callback_, sort_) {
 }
 
 // src/useSwiperIndex/useSwiperIndex.ts
-var import_react34 = require("react");
-var import_react35 = require("swiper/react");
+var import_react35 = require("react");
+var import_react36 = require("swiper/react");
 function useSwiperIndex() {
-  const swiper = (0, import_react35.useSwiper)();
-  const [index, setIndex] = (0, import_react34.useState)(swiper.realIndex);
-  const slideTo = (0, import_react34.useCallback)((index2) => {
+  const swiper = (0, import_react36.useSwiper)();
+  const [index, setIndex] = (0, import_react35.useState)(swiper.realIndex);
+  const slideTo = (0, import_react35.useCallback)((index2) => {
     swiper.slideTo(index2);
   }, [swiper]);
   const onSlideChange = (swiper2) => {
     setIndex(swiper2.realIndex);
   };
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (swiper) {
       swiper.on("slideChange", onSlideChange);
     }
@@ -1829,11 +1850,11 @@ function useSwiperIndex() {
 }
 
 // src/useSyncedRef/useSyncedRef.ts
-var import_react36 = require("react");
+var import_react37 = require("react");
 function useSyncedRef(value) {
-  const ref = (0, import_react36.useRef)(value);
+  const ref = (0, import_react37.useRef)(value);
   ref.current = value;
-  return (0, import_react36.useMemo)(() => Object.freeze({
+  return (0, import_react37.useMemo)(() => Object.freeze({
     get current() {
       return ref.current;
     }
@@ -1846,10 +1867,10 @@ function useUnit(unit = "kilometer", locale) {
 }
 
 // src/useUnmountEffect/useUnmountEffect.ts
-var import_react37 = require("react");
+var import_react38 = require("react");
 function useUnmountEffect(effect) {
   const effectRef = useSyncedRef(effect);
-  (0, import_react37.useEffect)(() => () => {
+  (0, import_react38.useEffect)(() => () => {
     effectRef.current();
   }, []);
 }
@@ -1947,6 +1968,7 @@ var useUser = (0, import_zustand4.create)((set) => ({
   useSSR,
   useScroll,
   useScrollTo,
+  useScrolled,
   useSearchParams,
   useSearchParamsEncoded,
   useSearchParamsValue,

package/dist/index.mjs

@@ -263,7 +263,7 @@ function useBreakpoint() {
     throw new Error("useBreakpoint must be used within ThemeProvider");
   }
   const breakpoints = Object.keys(theme.mediaQuery);
-  const values = Object.values(theme.mediaQuery);
+  const values = Object.values(theme.mediaQuery).map((x) => parseInt(String(x)));
   const breakpoint = useMemo(() => {
     const breakpoint2 = values.reduce((p, c, i) => {
       if (c < windowSize.width) {
@@ -1406,8 +1406,8 @@ import { useState as useState16 } from "react";
 function useScroll() {
   const [scroll, setScroll] = useState16({ left: 0, top: 0 });
   const onScroll = () => {
-    const left = window.pageXOffset;
-    const top = window.pageYOffset;
+    const left = window.scrollX;
+    const top = window.scrollY;
     if (scroll.left !== left || scroll.top !== top) {
       setScroll({ left, top });
     }
@@ -1441,11 +1441,11 @@ function scrollToSelector(selector, offset = 0) {
   }
 }
 function scrollToRelativeY(y = 0, offset = 0) {
-  const to = window.pageYOffset + y - 60 + offset;
+  const to = window.scrollY + y - 60 + offset;
   return scrollToY(to);
 }
 function scrollToY(y = 0) {
-  const from = window.pageYOffset;
+  const from = window.scrollY;
   const to = y;
   const duration = Math.sqrt(Math.abs(to - from) / 4e3);
   animate(from, to, {
@@ -1454,6 +1454,26 @@ function scrollToY(y = 0) {
   });
 }
 
+// src/useScrolled/useScrolled.ts
+import { useState as useState17 } from "react";
+var DEFAULT_CALLBACK = (top, left) => {
+  return top > 0;
+};
+function useScrolled(callback = DEFAULT_CALLBACK) {
+  const [scrolled, setScrolled] = useState17(false);
+  const onScrolled = () => {
+    const scrolled_ = callback(window.scrollY, window.scrollX);
+    if (scrolled !== scrolled_) {
+      setScrolled(scrolled_);
+    }
+  };
+  useEventListener("scroll", onScrolled);
+  useIsomorphicLayoutEffect(() => {
+    onScrolled();
+  }, []);
+  return scrolled;
+}
+
 // src/useSearchParams/useSearchParams.ts
 import { useRouter } from "next/router";
 import { useCallback as useCallback4, useMemo as useMemo5 } from "react";
@@ -1666,10 +1686,10 @@ function useSearchParamsEncoded(key) {
 }
 
 // src/useSorting/useSorting.ts
-import { useEffect as useEffect22, useRef as useRef11, useState as useState17 } from "react";
+import { useEffect as useEffect22, useRef as useRef11, useState as useState18 } from "react";
 function useSorting(items_, callback_, sort_) {
-  const [sort, setSort] = useState17(sort_);
-  const [items, setItems] = useState17(callback_(items_.slice(), sort));
+  const [sort, setSort] = useState18(sort_);
+  const [items, setItems] = useState18(callback_(items_.slice(), sort));
   const isInitialMount = useRef11(true);
   useEffect22(() => {
     if (isInitialMount.current) {
@@ -1687,11 +1707,11 @@ function useSorting(items_, callback_, sort_) {
 }
 
 // src/useSwiperIndex/useSwiperIndex.ts
-import { useCallback as useCallback6, useEffect as useEffect23, useState as useState18 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect23, useState as useState19 } from "react";
 import { useSwiper } from "swiper/react";
 function useSwiperIndex() {
   const swiper = useSwiper();
-  const [index, setIndex] = useState18(swiper.realIndex);
+  const [index, setIndex] = useState19(swiper.realIndex);
   const slideTo = useCallback6((index2) => {
     swiper.slideTo(index2);
   }, [swiper]);
@@ -1829,6 +1849,7 @@ export {
   useSSR,
   useScroll,
   useScrollTo,
+  useScrolled,
   useSearchParams,
   useSearchParamsEncoded,
   useSearchParamsValue,

package/package.json

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

package/src/index.ts

@@ -37,12 +37,13 @@ export * from './usePortal/usePortal';
 export * from './usePrevious/usePrevious';
 export * from './useRealSize/useRealSize';
 export * from './useResize/useResize';
+export * from './useSSR/useSSR';
 export * from './useScroll/useScroll';
 export * from './useScrollTo/useScrollTo';
+export * from './useScrolled/useScrolled';
 export * from './useSearchParams/useSearchParams';
 export * from './useSearchParamsEncoded/useSearchParamsEncoded';
 export * from './useSorting/useSorting';
-export * from './useSSR/useSSR';
 export * from './useSwiperIndex/useSwiperIndex';
 export * from './useSyncedRef/useSyncedRef';
 export * from './useUI/useUI';

package/src/useApi/useApi.test.tsx

@@ -1,12 +1,13 @@
 import '@testing-library/jest-dom';
 import { render, renderHook, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
+import { ILayout } from '@websolutespa/bom-core';
 import { LayoutDefaults } from '@websolutespa/bom-mixer-mock';
 import { getApiUrl } from '@websolutespa/bom-mixer-store';
 import { LayoutProvider } from '../useLayout/useLayout';
 import { useApi, useApiDelete, useApiFetch, useApiGet, useApiPatch, useApiPost, useApiPut } from './useApi';
 
 const wrapper = (props: { children: React.ReactNode }) => (
-  <LayoutProvider layout={LayoutDefaults}>{props.children}</LayoutProvider>
+  <LayoutProvider layout={LayoutDefaults as ILayout}>{props.children}</LayoutProvider>
 );
 
 const defaultResponse = {
@@ -62,7 +63,7 @@ describe('useApi', () => {
       NEXT_PUBLIC_API: '/api',
       NEXT_PUBLIC_GOOGLE_MAP_API_KEY: 'AIzaSyDvGw6iAoKdRv8mmaC9GeT-LWLPQtA8p60',
       STORE_URL: 'http://localhost:4000',
-      STORE_API: '/api',
+      STORE_API: '/bowl/api',
       STORE_BEARER: '7584f15d12972fb1e7695e998dd5e4c754f46c74d06a08e8d76f556adcd045e48cd52bed6faac098784471ac273ee40243194b9cff7eba3c4a768f8f41d2d51959a7f767b943c7f0170f6e5f632db523803c357083bf7a7bf03ee8e0df2d8ce5cd52e0211283b34d7781313da775018a9e950433d2b6faf711c20e5a63b25243',
       STORE_STRATEGY: 'mock',
       SECRET_COOKIE_PASSWORD: '2gyZ3GDw3LHZQKDhPmPDL3sjREVRXPr8',
@@ -178,7 +179,7 @@ describe('useApi', () => {
         );
       };
       render(
-        <LayoutProvider layout={LayoutDefaults}><Wrapper /></LayoutProvider>
+        <LayoutProvider layout={LayoutDefaults as ILayout}><Wrapper /></LayoutProvider>
       );
       expect(screen.getByTestId('loading')).toHaveTextContent('loading');
       await waitForElementToBeRemoved(() => screen.getByTestId('loading'));

package/src/useBreakpoint/useBreakpoint.ts

@@ -22,7 +22,7 @@ export function useBreakpoint(): Breakpoint {
   }
 
   const breakpoints: BreakpointType[] = Object.keys(theme.mediaQuery) as BreakpointType[];
-  const values: number[] = Object.values(theme.mediaQuery);
+  const values: number[] = Object.values(theme.mediaQuery).map(x => parseInt(String(x)));
 
   const breakpoint = useMemo(() => {
     const breakpoint = values.reduce((p, c, i) => {

package/src/useCurrency/useCurrency.test.tsx

@@ -1,10 +1,11 @@
 import { renderHook } from '@testing-library/react';
+import { ILayout } from '@websolutespa/bom-core';
 import { LayoutDefaults } from '@websolutespa/bom-mixer-mock';
 import { LayoutProvider } from '../useLayout/useLayout';
 import { useCurrency } from './useCurrency';
 
 const wrapper = (props: { children: React.ReactNode }) => (
-  <LayoutProvider layout={LayoutDefaults}>{props.children}</LayoutProvider>
+  <LayoutProvider layout={LayoutDefaults as ILayout}>{props.children}</LayoutProvider>
 );
 
 describe('useCurrency', () => {

package/src/useCurrency/useCurrency.ts

@@ -6,7 +6,7 @@ export function useCurrency(currency: string = 'EUR', locale?: string): (value:
 
 /*
 import { useMemo } from 'react';
-import { useNumber } from 'src/useNumber/useNumber';
+import { useNumber } from '../useNumber/useNumber';
 import { useLayout } from '../useLayout/useLayout';
 
 export function useCurrency(currency: string = 'EUR', locale?: string): (value: number) => string {

package/src/useDateTimeFormat/useDateTimeFormat.test.tsx

@@ -1,10 +1,11 @@
 import { renderHook } from '@testing-library/react';
+import { ILayout } from '@websolutespa/bom-core';
 import { LayoutDefaults } from '@websolutespa/bom-mixer-mock';
 import { LayoutProvider } from '../useLayout/useLayout';
 import { useDateTimeFormat } from './useDateTimeFormat';
 
 const wrapper = (props: { children: React.ReactNode }) => (
-  <LayoutProvider layout={LayoutDefaults}>{props.children}</LayoutProvider>
+  <LayoutProvider layout={LayoutDefaults as ILayout}>{props.children}</LayoutProvider>
 );
 
 describe('useDateTimeFormat', () => {

package/src/useHttp/useHttp.test.tsx

@@ -56,7 +56,7 @@ describe('useHttp', () => {
       NEXT_PUBLIC_API: '/api',
       NEXT_PUBLIC_GOOGLE_MAP_API_KEY: 'AIzaSyDvGw6iAoKdRv8mmaC9GeT-LWLPQtA8p60',
       STORE_URL: 'http://localhost:4000',
-      STORE_API: '/api',
+      STORE_API: '/bowl/api',
       STORE_BEARER: '7584f15d12972fb1e7695e998dd5e4c754f46c74d06a08e8d76f556adcd045e48cd52bed6faac098784471ac273ee40243194b9cff7eba3c4a768f8f41d2d51959a7f767b943c7f0170f6e5f632db523803c357083bf7a7bf03ee8e0df2d8ce5cd52e0211283b34d7781313da775018a9e950433d2b6faf711c20e5a63b25243',
       STORE_STRATEGY: 'mock',
       SECRET_COOKIE_PASSWORD: '2gyZ3GDw3LHZQKDhPmPDL3sjREVRXPr8',

package/src/useLabel/useLabel.test.tsx

@@ -1,10 +1,11 @@
 import { renderHook } from '@testing-library/react';
+import { ILayout } from '@websolutespa/bom-core';
 import { LayoutDefaults } from '@websolutespa/bom-mixer-mock';
 import { LayoutProvider } from '../useLayout/useLayout';
 import { LabelProvider, parseParams, useLabel } from './useLabel';
 
 const wrapper = (props: { children: React.ReactNode }) => (
-  <LayoutProvider layout={LayoutDefaults}>
+  <LayoutProvider layout={LayoutDefaults as ILayout}>
     <LabelProvider>{props.children}</LabelProvider>
   </LayoutProvider>
 );

package/src/useLayout/useLayout.test.tsx

@@ -1,10 +1,11 @@
 // readme https://testing-library.com/
 import { renderHook } from '@testing-library/react';
+import { ILayout } from '@websolutespa/bom-core';
 import { LayoutDefaults } from '@websolutespa/bom-mixer-mock';
 import { LayoutProvider, useLayout } from './useLayout';
 
 const wrapper = (props: { children: React.ReactNode }) => (
-  <LayoutProvider layout={LayoutDefaults}>{props.children}</LayoutProvider>
+  <LayoutProvider layout={LayoutDefaults as ILayout}>{props.children}</LayoutProvider>
 );
 
 describe('useLayout', () => {

package/src/useNumber/useNumber.test.tsx

@@ -1,10 +1,11 @@
 import { renderHook } from '@testing-library/react';
+import { ILayout } from '@websolutespa/bom-core';
 import { LayoutDefaults } from '@websolutespa/bom-mixer-mock';
 import { LayoutProvider } from '../useLayout/useLayout';
 import { useNumber } from './useNumber';
 
 const wrapper = (props: { children: React.ReactNode }) => (
-  <LayoutProvider layout={LayoutDefaults}>{props.children}</LayoutProvider>
+  <LayoutProvider layout={LayoutDefaults as ILayout}>{props.children}</LayoutProvider>
 );
 
 describe('useNumber', () => {

package/src/useScroll/useScroll.test.tsx

@@ -3,7 +3,7 @@ import { act, renderHook } from '@testing-library/react';
 import { useScroll } from './useScroll';
 
 const windowScroll = (scrollTop: number): void => {
-  window.pageYOffset = scrollTop;
+  window.scrollY = scrollTop;
   window.dispatchEvent(new Event('scroll'));
 };
 

package/src/useScroll/useScroll.ts

@@ -11,8 +11,8 @@ export function useScroll(): Scroll {
   const [scroll, setScroll] = useState<Scroll>({ left: 0, top: 0 });
 
   const onScroll = () => {
-    const left = window.pageXOffset;
-    const top = window.pageYOffset;
+    const left = window.scrollX;
+    const top = window.scrollY;
     if (scroll.left !== left || scroll.top !== top) {
       setScroll({ left, top });
     }

package/src/useScrollTo/useScrollTo.test.tsx

@@ -77,8 +77,8 @@ describe('useScrollTo', () => {
       left: 0,
     }) as any);
     scrollTo = jest.spyOn(window, 'scrollTo').mockImplementation((left: number, top: number) => {
-      window.pageXOffset = left;
-      window.pageYOffset = top;
+      window.scrollX = left;
+      window.scrollY = top;
     });
   });
 
@@ -93,13 +93,13 @@ describe('useScrollTo', () => {
 
   it('should work correctly', async () => {
     render(<Wrapper />);
-    expect(window.pageYOffset).toBe(0);
+    expect(window.scrollY).toBe(0);
     const trigger = screen.getByTestId('trigger');
     await userEvent.click(trigger);
     expect(scrollTo).toBeCalled();
     expect(scrollTo).toHaveBeenCalledTimes(2);
     expect(scrollTo).toHaveBeenCalledWith(0, 940);
-    expect(window.pageYOffset).toBe(940);
+    expect(window.scrollY).toBe(940);
   });
 
 });

package/src/useScrollTo/useScrollTo.ts

@@ -26,12 +26,12 @@ export function scrollToSelector(selector?: string, offset: number = 0) {
 }
 
 export function scrollToRelativeY(y: number = 0, offset: number = 0) {
-  const to = window.pageYOffset + y - 60 + offset;
+  const to = window.scrollY + y - 60 + offset;
   return scrollToY(to);
 }
 
 export function scrollToY(y: number = 0) {
-  const from = window.pageYOffset;
+  const from = window.scrollY;
   const to = y;
   const duration = Math.sqrt(Math.abs(to - from) / 4000);
   animate(from, to, {

package/src/useScrolled/useScrolled.test.tsx

@@ -0,0 +1,34 @@
+// readme https://testing-library.com/
+import { act, renderHook } from '@testing-library/react';
+import { useScrolled } from './useScrolled';
+
+const windowScroll = (scrollTop: number): void => {
+  window.scrollY = scrollTop;
+  window.dispatchEvent(new Event('scroll'));
+};
+
+const wrapper = (props: { children: React.ReactNode }) => (
+  <div data-testid="test" style={{ height: '2000px' }}>{props.children}</div>
+);
+
+describe('useScrolled', () => {
+
+  it('should work correctly', () => {
+    const { result } = renderHook(() => useScrolled(), { wrapper });
+    expect(result.current).toStrictEqual(false);
+    act(() => {
+      windowScroll(100);
+    });
+    expect(result.current).toStrictEqual(true);
+  });
+
+  it('should return false', () => {
+    const { result } = renderHook(() => useScrolled((top, left) => top > 200), { wrapper });
+    expect(result.current).toStrictEqual(false);
+    act(() => {
+      windowScroll(100);
+    });
+    expect(result.current).toStrictEqual(false);
+  });
+
+});

package/src/useScrolled/useScrolled.ts

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import { useEventListener } from '../useEventListener/useEventListener';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
+
+const DEFAULT_CALLBACK = (top: number, left: number) => {
+  return top > 0;
+};
+
+export function useScrolled(callback: (top: number, left: number) => boolean = DEFAULT_CALLBACK): boolean {
+  const [scrolled, setScrolled] = useState<boolean>(false);
+
+  const onScrolled = () => {
+    const scrolled_ = callback(window.scrollY, window.scrollX);
+    if (scrolled !== scrolled_) {
+      setScrolled(scrolled_);
+    }
+  };
+
+  useEventListener('scroll', onScrolled);
+
+  // Set size at the first client-side load
+  useIsomorphicLayoutEffect(() => {
+    onScrolled();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return scrolled;
+}

package/src/useUnit/useUnit.test.tsx

@@ -1,10 +1,11 @@
 import { renderHook } from '@testing-library/react';
+import { ILayout } from '@websolutespa/bom-core';
 import { LayoutDefaults } from '@websolutespa/bom-mixer-mock';
 import { LayoutProvider } from '../useLayout/useLayout';
 import { useUnit } from './useUnit';
 
 const wrapper = (props: { children: React.ReactNode }) => (
-  <LayoutProvider layout={LayoutDefaults}>{props.children}</LayoutProvider>
+  <LayoutProvider layout={LayoutDefaults as ILayout}>{props.children}</LayoutProvider>
 );
 
 describe('useUnit', () => {