@websolutespa/bom-mixer-hooks 1.4.2 → 1.7.1

package/CHANGELOG.md

@@ -1,89 +1,105 @@
-# @websolutespa/bom-mixer-hooks
-
-## 1.4.2
-
-### Patch Changes
-
-- Modified: IFeatureType
-- Updated dependencies
-  - @websolutespa/bom-mixer-models@1.5.4
-  - @websolutespa/bom-mixer-store@1.4.3
-  - @websolutespa/bom-core@0.6.5
-
-## 1.4.1
-
-### Patch Changes
-
-- Added: useCollectionApi, useExtra
-- Modified: usePagination, useSearchParamsQs
-- Updated dependencies
-  - @websolutespa/bom-mixer-models@1.5.2
-  - @websolutespa/bom-core@0.6.2
-
-## 1.4.0
-
-### Minor Changes
-
-- Added useLazyModules
-
-## 1.3.0
-
-### Minor Changes
-
-- Added: useSearchParamsQs
-- Modified: useSearchParamsEncoded, useSearchParams, useScrollTo
-
-## 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
+# @websolutespa/bom-mixer-hooks
+
+## 1.7.1
+
+### Patch Changes
+
+- aa41666: Added: useIntersectionObserver
+
+## 1.7.0
+
+### Minor Changes
+
+- 28e86bd: Modified: IPage, Store services & decorators
+- Updated dependencies [28e86bd]
+  - @websolutespa/bom-mixer-models@1.7.0
+  - @websolutespa/bom-mixer-store@1.7.0
+  - @websolutespa/bom-core@1.7.0
+
+## 1.4.2
+
+### Patch Changes
+
+- Modified: IFeatureType
+- Updated dependencies
+  - @websolutespa/bom-mixer-models@1.5.4
+  - @websolutespa/bom-mixer-store@1.4.3
+  - @websolutespa/bom-core@0.6.5
+
+## 1.4.1
+
+### Patch Changes
+
+- Added: useCollectionApi, useExtra
+- Modified: usePagination, useSearchParamsQs
+- Updated dependencies
+  - @websolutespa/bom-mixer-models@1.5.2
+  - @websolutespa/bom-core@0.6.2
+
+## 1.4.0
+
+### Minor Changes
+
+- Added useLazyModules
+
+## 1.3.0
+
+### Minor Changes
+
+- Added: useSearchParamsQs
+- Modified: useSearchParamsEncoded, useSearchParams, useScrollTo
+
+## 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

@@ -300,6 +300,9 @@ declare function useIdle(delay?: number, immediate?: boolean): boolean;
 
 declare function useInfiniteLoader<T = any>(items: T[], perPage?: number, delayInMs?: number): [T[], () => void, boolean];
 
+declare function useIntersectionObserver(ref: MutableRefObject<Node | undefined>, options?: IntersectionObserverInit): boolean;
+declare function isElement(node?: Node): node is Element;
+
 declare const useIsomorphicLayoutEffect: typeof useEffect;
 
 /**
@@ -452,7 +455,7 @@ declare function useMounted(): boolean;
 declare function useNumber(options?: Intl.NumberFormatOptions, locale?: string): (value: number) => string;
 
 type IPageContext = IPage;
-declare const usePage: () => NonNullable<IPage>;
+declare const usePage: () => NonNullable<IPageContext>;
 declare function PageProvider({ children, page }: {
     children?: react__default.ReactNode;
     page: IPage;
@@ -624,4 +627,4 @@ type WindowSize = {
 };
 declare function useWindowSize(): WindowSize;
 
-export { BodyScrollOptions, CartContext, CartProvider, CheckoutContext, CheckoutProvider, ClickOutGetContainer, CurrentStateType, ElementStackItem, ExtraProvider, Filter, FilterMode, FilterParams, FilterValues, GeoLocationSensorState, IExtra, IFilter, IFilterOption, IGeolocationPositionError, ILabelContext, ILayoutContext, ILazyModulesContext, IPageContext, IPaginationInfo, IParams, IParamsEncoded, IParamsQs, IUseSearchParamsEncodedResult, IUseSearchParamsQsResult, IUseSearchParamsResult, IUseSearchParamsValueResult, KeyCode, KeyMod, KeyboardOptions, KeyboardResult, LabelProvider, LabelService, LayoutProvider, LazyModulesProvider, PageProvider, SSRState, SizeResult, SizeType, Sorting, UIReducer, UIValue, UseFiltersResultType, UseKeyboard, UseKeyboardHandler, createElementWithId, createGenericContext, detectIsBrowser, filtersToParams, getCurrentPosition, getFilteredItems, getFilters, getOwnerPaddingRight, getOwnerScrollbarWidth, getPagedItems, getPaginationInfo, getRealSize, getSearchParams, getSearchParamsEncoded, getSearchParamsQs, getUID, hasGeolocation, isPaginationInfo, localCollectionDelete, localCollectionFetch, localCollectionGet, localCollectionPatch, localCollectionPost, localCollectionPut, 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, useCollectionApi, useCollectionApiDelete, useCollectionApiGet, useCollectionApiPatch, useCollectionApiPost, useCollectionApiPut, useCurrency, useCurrentState, useDateTimeFormat, useDebounce, useDebounceCallback, useDebugChangedProps, useDomObserver, useDrawer, useElementSize, useEventListener, useExtra, useFilters, useGeolocation, useIdle, useInfiniteLoader, useIsomorphicLayoutEffect, useKeyboard, useLabel, useLayout, useLazyModules, 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 };
+export { BodyScrollOptions, CartContext, CartProvider, CheckoutContext, CheckoutProvider, ClickOutGetContainer, CurrentStateType, ElementStackItem, ExtraProvider, Filter, FilterMode, FilterParams, FilterValues, GeoLocationSensorState, IExtra, IFilter, IFilterOption, IGeolocationPositionError, ILabelContext, ILayoutContext, ILazyModulesContext, IPageContext, IPaginationInfo, IParams, IParamsEncoded, IParamsQs, IUseSearchParamsEncodedResult, IUseSearchParamsQsResult, IUseSearchParamsResult, IUseSearchParamsValueResult, KeyCode, KeyMod, KeyboardOptions, KeyboardResult, LabelProvider, LabelService, LayoutProvider, LazyModulesProvider, PageProvider, SSRState, SizeResult, SizeType, Sorting, UIReducer, UIValue, UseFiltersResultType, UseKeyboard, UseKeyboardHandler, createElementWithId, createGenericContext, detectIsBrowser, filtersToParams, getCurrentPosition, getFilteredItems, getFilters, getOwnerPaddingRight, getOwnerScrollbarWidth, getPagedItems, getPaginationInfo, getRealSize, getSearchParams, getSearchParamsEncoded, getSearchParamsQs, getUID, hasGeolocation, isElement, isPaginationInfo, localCollectionDelete, localCollectionFetch, localCollectionGet, localCollectionPatch, localCollectionPost, localCollectionPut, 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, useCollectionApi, useCollectionApiDelete, useCollectionApiGet, useCollectionApiPatch, useCollectionApiPost, useCollectionApiPut, useCurrency, useCurrentState, useDateTimeFormat, useDebounce, useDebounceCallback, useDebugChangedProps, useDomObserver, useDrawer, useElementSize, useEventListener, useExtra, useFilters, useGeolocation, useIdle, useInfiniteLoader, useIntersectionObserver, useIsomorphicLayoutEffect, useKeyboard, useLabel, useLayout, useLazyModules, 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

@@ -100,6 +100,7 @@ __export(src_exports, {
   getSearchParamsQs: () => getSearchParamsQs,
   getUID: () => getUID,
   hasGeolocation: () => hasGeolocation,
+  isElement: () => isElement,
   isPaginationInfo: () => isPaginationInfo,
   localCollectionDelete: () => localCollectionDelete,
   localCollectionFetch: () => localCollectionFetch,
@@ -159,6 +160,7 @@ __export(src_exports, {
   useGeolocation: () => useGeolocation,
   useIdle: () => useIdle,
   useInfiniteLoader: () => useInfiniteLoader,
+  useIntersectionObserver: () => useIntersectionObserver,
   useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect,
   useKeyboard: () => useKeyboard,
   useLabel: () => useLabel,
@@ -1258,8 +1260,43 @@ function useInfiniteLoader(items, perPage = 12, delayInMs = 100) {
   return [visibleItems, loadMore, hasMore];
 }
 
+// src/useIntersectionObserver/useIntersectionObserver.ts
+var import_react23 = require("react");
+function useIntersectionObserver(ref, options = {}) {
+  const {
+    threshold = 1,
+    root = null,
+    rootMargin = "0px"
+  } = options;
+  const [entry, setEntry] = (0, import_react23.useState)();
+  const previousObserver = (0, import_react23.useRef)();
+  const init = (0, import_react23.useCallback)((node) => {
+    if (previousObserver.current) {
+      previousObserver.current.disconnect();
+      previousObserver.current = void 0;
+    }
+    if (isElement(node)) {
+      const observer = new IntersectionObserver(([entry2]) => {
+        setEntry(entry2);
+      }, { threshold, root, rootMargin });
+      observer.observe(node);
+      previousObserver.current = observer;
+    }
+  }, [threshold, root, rootMargin]);
+  (0, import_react23.useEffect)(() => {
+    if (ref.current) {
+      init(ref.current);
+    }
+  }, [init, ref]);
+  const isIntersecting = entry ? entry.isIntersecting : false;
+  return isIntersecting;
+}
+function isElement(node) {
+  return (node == null ? void 0 : node.nodeType) === Node.ELEMENT_NODE;
+}
+
 // src/useKeyboard/useKeyboard.ts
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/useKeyboard/codes.ts
 var KeyCode = /* @__PURE__ */ ((KeyCode2) => {
@@ -1350,15 +1387,15 @@ var KeyMod = /* @__PURE__ */ ((KeyMod2) => {
 })(KeyMod || {});
 
 // src/useSSR/useSSR.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 var detectIsBrowser = () => {
   return Boolean(
     typeof window !== "undefined" && window.document && window.document.createElement
   );
 };
 function useSSR() {
-  const [browser, setBrowser] = (0, import_react23.useState)(false);
-  (0, import_react23.useEffect)(() => {
+  const [browser, setBrowser] = (0, import_react24.useState)(false);
+  (0, import_react24.useEffect)(() => {
     setBrowser(detectIsBrowser());
   }, []);
   return {
@@ -1428,7 +1465,7 @@ var useKeyboard = (handler, keyBindings, options = {}) => {
     }
     handler && handler(event2);
   };
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!disableGlobalEvent) {
       document.addEventListener(event, eventHandler);
     }
@@ -1516,10 +1553,10 @@ function useModal() {
 }
 
 // src/useMounted/useMounted.ts
-var import_react25 = require("react");
+var import_react26 = require("react");
 function useMounted() {
-  const [mounted, setMounted] = (0, import_react25.useState)(false);
-  (0, import_react25.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react26.useState)(false);
+  (0, import_react26.useEffect)(() => {
     setMounted(true);
   }, []);
   return mounted;
@@ -1550,14 +1587,14 @@ function getPaginationInfo(items, page = 1, perPage = 15) {
 }
 
 // src/usePagination/usePagination.ts
-var import_react26 = require("react");
+var import_react27 = require("react");
 function usePagination($items, $page = 1, $perPage = 15) {
   const total = $items.length;
-  const [page, setPage] = (0, import_react26.useState)($page);
-  const [perPage, setPerPage_] = (0, import_react26.useState)($perPage);
-  const [items, setItems] = (0, import_react26.useState)(getPagedItems($items, $page, $perPage));
+  const [page, setPage] = (0, import_react27.useState)($page);
+  const [perPage, setPerPage_] = (0, import_react27.useState)($perPage);
+  const [items, setItems] = (0, import_react27.useState)(getPagedItems($items, $page, $perPage));
   const pages = Math.ceil(total / perPage);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     setItems(getPagedItems($items, page, perPage));
   }, [$items]);
   function goToPage(page2) {
@@ -1585,13 +1622,13 @@ function usePagination($items, $page = 1, $perPage = 15) {
 }
 
 // src/usePortal/usePortal.ts
-var import_react27 = require("react");
+var import_react28 = require("react");
 var namespace = "theme";
 function usePortal(name = getUID(), getContainer) {
   const { isBrowser: isBrowser6 } = useSSR();
   const id = `${namespace}-${name}`;
-  const [portal, setPortal] = (0, import_react27.useState)(isBrowser6 ? createElementWithId(id) : null);
-  (0, import_react27.useEffect)(() => {
+  const [portal, setPortal] = (0, import_react28.useState)(isBrowser6 ? createElementWithId(id) : null);
+  (0, import_react28.useEffect)(() => {
     const container = typeof getContainer === "function" ? getContainer() : null;
     const parentElement = container || document.body;
     const element = parentElement.querySelector(`#${id}`) || createElementWithId(id);
@@ -1612,24 +1649,24 @@ function getUID() {
 }
 
 // src/usePrevious/usePrevious.ts
-var import_react28 = require("react");
+var import_react29 = require("react");
 function usePrevious(state) {
-  const ref = (0, import_react28.useRef)(null);
-  (0, import_react28.useEffect)(() => {
+  const ref = (0, import_react29.useRef)(null);
+  (0, import_react29.useEffect)(() => {
     ref.current = state;
   });
   return ref.current;
 }
 
 // src/useRealSize/useRealSize.ts
-var import_react29 = require("react");
+var import_react30 = require("react");
 function useRealSize(ref) {
-  const [state, setState] = (0, import_react29.useState)({ width: 0, height: 0 });
+  const [state, setState] = (0, import_react30.useState)({ width: 0, height: 0 });
   const update = () => {
     const { width, height } = getRealSize(ref.current);
     setState({ width, height });
   };
-  (0, import_react29.useEffect)(() => update(), [ref.current]);
+  (0, import_react30.useEffect)(() => update(), [ref.current]);
   return [state, update];
 }
 function getRealSize(element) {
@@ -1664,9 +1701,9 @@ function useResize(callback, immediate = true) {
 }
 
 // src/useScroll/useScroll.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 function useScroll() {
-  const [scroll, setScroll] = (0, import_react30.useState)({ left: 0, top: 0 });
+  const [scroll, setScroll] = (0, import_react31.useState)({ left: 0, top: 0 });
   const onScroll = () => {
     const left = window.scrollX;
     const top = window.scrollY;
@@ -1718,12 +1755,12 @@ function scrollToY(y = 0) {
 }
 
 // src/useScrolled/useScrolled.ts
-var import_react31 = require("react");
+var import_react32 = require("react");
 var DEFAULT_CALLBACK = (top, left) => {
   return top > 0;
 };
 function useScrolled(callback = DEFAULT_CALLBACK) {
-  const [scrolled, setScrolled] = (0, import_react31.useState)(false);
+  const [scrolled, setScrolled] = (0, import_react32.useState)(false);
   const onScrolled = () => {
     const scrolled_ = callback(window.scrollY, window.scrollX);
     if (scrolled !== scrolled_) {
@@ -1740,7 +1777,7 @@ function useScrolled(callback = DEFAULT_CALLBACK) {
 // src/useSearchParams/useSearchParams.ts
 var import_bom_core7 = require("@websolutespa/bom-core");
 var import_router = require("next/router");
-var import_react32 = require("react");
+var import_react33 = require("react");
 function replace_(params) {
   if (window.history) {
     const title = document.title;
@@ -1798,29 +1835,29 @@ function replaceSearchParamsSilently(params) {
 }
 function useSearchParams() {
   const router = (0, import_router.useRouter)();
-  const initialValue = (0, import_react32.useMemo)(() => {
+  const initialValue = (0, import_react33.useMemo)(() => {
     const params2 = deserialize_(router.asPath);
     const value = Object.fromEntries(params2);
     return value;
   }, [router.asPath]);
   const params = initialValue;
-  const replaceParamsSilently = (0, import_react32.useCallback)((params2) => {
+  const replaceParamsSilently = (0, import_react33.useCallback)((params2) => {
     replaceSearchParamsSilently(params2);
   }, []);
-  const replaceParams = (0, import_react32.useCallback)((params2) => {
+  const replaceParams = (0, import_react33.useCallback)((params2) => {
     replaceSearchParams(router, params2);
   }, [router]);
   return { params, replaceParamsSilently, replaceParams };
 }
 function useSearchParamsValue(key) {
   const router = (0, import_router.useRouter)();
-  const initialValue = (0, import_react32.useMemo)(() => {
+  const initialValue = (0, import_react33.useMemo)(() => {
     const params2 = deserialize_(router.asPath);
     const value = params2.get(key);
     return value;
   }, [key, router.asPath]);
   const params = initialValue;
-  const replaceParamsSilently = (0, import_react32.useCallback)((params2) => {
+  const replaceParamsSilently = (0, import_react33.useCallback)((params2) => {
     replaceSearchParamsSilently(params2);
   }, []);
   return { params, replaceParamsSilently };
@@ -1829,7 +1866,7 @@ function useSearchParamsValue(key) {
 // src/useSearchParamsEncoded/useSearchParamsEncoded.ts
 var import_bom_core8 = require("@websolutespa/bom-core");
 var import_router2 = require("next/router");
-var import_react33 = require("react");
+var import_react34 = require("react");
 var USE_ENCRYPTION = true;
 function base64ToString(base64) {
   if (!USE_ENCRYPTION)
@@ -1935,15 +1972,15 @@ function replaceSearchParamsEncodedSilently(value, key) {
 }
 function useSearchParamsEncoded(key) {
   const router = (0, import_router2.useRouter)();
-  const initialValue = (0, import_react33.useMemo)(() => {
+  const initialValue = (0, import_react34.useMemo)(() => {
     const value = getSearchParamsEncoded(router.asPath, key);
     return value;
   }, [key, router.asPath]);
   const params = initialValue;
-  const replaceParamsSilently = (0, import_react33.useCallback)((params2) => {
+  const replaceParamsSilently = (0, import_react34.useCallback)((params2) => {
     replaceSearchParamsEncodedSilently(params2, key);
   }, [key]);
-  const replaceParams = (0, import_react33.useCallback)((params2) => {
+  const replaceParams = (0, import_react34.useCallback)((params2) => {
     replaceSearchParamsEncoded(router, params2, key);
   }, [key, router]);
   return { params, replaceParamsSilently, replaceParams };
@@ -1952,7 +1989,7 @@ function useSearchParamsEncoded(key) {
 // src/useSearchParamsQs/useSearchParamsQs.ts
 var import_bom_core9 = require("@websolutespa/bom-core");
 var import_router3 = require("next/router");
-var import_react34 = require("react");
+var import_react35 = require("react");
 function replace(search) {
   if (window.history) {
     const title = document.title;
@@ -2018,27 +2055,27 @@ function replaceSearchParamsQsSilently(value, key) {
 }
 function useSearchParamsQs(key) {
   const router = (0, import_router3.useRouter)();
-  const initialValue = (0, import_react34.useMemo)(() => {
+  const initialValue = (0, import_react35.useMemo)(() => {
     const value = getSearchParamsQs(router.asPath, key);
     return value;
   }, [key, router.asPath]);
   const params = initialValue;
-  const replaceParamsSilently = (0, import_react34.useCallback)((params2) => {
+  const replaceParamsSilently = (0, import_react35.useCallback)((params2) => {
     replaceSearchParamsQsSilently(params2, key);
   }, [key]);
-  const replaceParams = (0, import_react34.useCallback)((params2) => {
+  const replaceParams = (0, import_react35.useCallback)((params2) => {
     replaceSearchParamsQs(router, params2, key);
   }, [key, router]);
   return { params, replaceParamsSilently, replaceParams };
 }
 
 // src/useSorting/useSorting.ts
-var import_react35 = require("react");
+var import_react36 = require("react");
 function useSorting(items_, callback_, sort_) {
-  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)(() => {
+  const [sort, setSort] = (0, import_react36.useState)(sort_);
+  const [items, setItems] = (0, import_react36.useState)(callback_(items_.slice(), sort));
+  const isInitialMount = (0, import_react36.useRef)(true);
+  (0, import_react36.useEffect)(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
     } else {
@@ -2054,18 +2091,18 @@ function useSorting(items_, callback_, sort_) {
 }
 
 // src/useSwiperIndex/useSwiperIndex.ts
-var import_react36 = require("react");
-var import_react37 = require("swiper/react");
+var import_react37 = require("react");
+var import_react38 = require("swiper/react");
 function useSwiperIndex() {
-  const swiper = (0, import_react37.useSwiper)();
-  const [index, setIndex] = (0, import_react36.useState)(swiper.realIndex);
-  const slideTo = (0, import_react36.useCallback)((index2) => {
+  const swiper = (0, import_react38.useSwiper)();
+  const [index, setIndex] = (0, import_react37.useState)(swiper.realIndex);
+  const slideTo = (0, import_react37.useCallback)((index2) => {
     swiper.slideTo(index2);
   }, [swiper]);
   const onSlideChange = (swiper2) => {
     setIndex(swiper2.realIndex);
   };
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (swiper) {
       swiper.on("slideChange", onSlideChange);
     }
@@ -2079,11 +2116,11 @@ function useSwiperIndex() {
 }
 
 // src/useSyncedRef/useSyncedRef.ts
-var import_react38 = require("react");
+var import_react39 = require("react");
 function useSyncedRef(value) {
-  const ref = (0, import_react38.useRef)(value);
+  const ref = (0, import_react39.useRef)(value);
   ref.current = value;
-  return (0, import_react38.useMemo)(() => Object.freeze({
+  return (0, import_react39.useMemo)(() => Object.freeze({
     get current() {
       return ref.current;
     }
@@ -2096,10 +2133,10 @@ function useUnit(unit = "kilometer", locale) {
 }
 
 // src/useUnmountEffect/useUnmountEffect.ts
-var import_react39 = require("react");
+var import_react40 = require("react");
 function useUnmountEffect(effect) {
   const effectRef = useSyncedRef(effect);
-  (0, import_react39.useEffect)(() => () => {
+  (0, import_react40.useEffect)(() => () => {
     effectRef.current();
   }, []);
 }
@@ -2144,6 +2181,7 @@ var useUser = (0, import_zustand4.create)((set) => ({
   getSearchParamsQs,
   getUID,
   hasGeolocation,
+  isElement,
   isPaginationInfo,
   localCollectionDelete,
   localCollectionFetch,
@@ -2203,6 +2241,7 @@ var useUser = (0, import_zustand4.create)((set) => ({
   useGeolocation,
   useIdle,
   useInfiniteLoader,
+  useIntersectionObserver,
   useIsomorphicLayoutEffect,
   useKeyboard,
   useLabel,

package/dist/index.mjs

@@ -1116,8 +1116,43 @@ function useInfiniteLoader(items, perPage = 12, delayInMs = 100) {
   return [visibleItems, loadMore, hasMore];
 }
 
+// src/useIntersectionObserver/useIntersectionObserver.ts
+import { useCallback as useCallback4, useEffect as useEffect15, useRef as useRef10, useState as useState11 } from "react";
+function useIntersectionObserver(ref, options = {}) {
+  const {
+    threshold = 1,
+    root = null,
+    rootMargin = "0px"
+  } = options;
+  const [entry, setEntry] = useState11();
+  const previousObserver = useRef10();
+  const init = useCallback4((node) => {
+    if (previousObserver.current) {
+      previousObserver.current.disconnect();
+      previousObserver.current = void 0;
+    }
+    if (isElement(node)) {
+      const observer = new IntersectionObserver(([entry2]) => {
+        setEntry(entry2);
+      }, { threshold, root, rootMargin });
+      observer.observe(node);
+      previousObserver.current = observer;
+    }
+  }, [threshold, root, rootMargin]);
+  useEffect15(() => {
+    if (ref.current) {
+      init(ref.current);
+    }
+  }, [init, ref]);
+  const isIntersecting = entry ? entry.isIntersecting : false;
+  return isIntersecting;
+}
+function isElement(node) {
+  return (node == null ? void 0 : node.nodeType) === Node.ELEMENT_NODE;
+}
+
 // src/useKeyboard/useKeyboard.ts
-import { useEffect as useEffect16 } from "react";
+import { useEffect as useEffect17 } from "react";
 
 // src/useKeyboard/codes.ts
 var KeyCode = /* @__PURE__ */ ((KeyCode2) => {
@@ -1208,15 +1243,15 @@ var KeyMod = /* @__PURE__ */ ((KeyMod2) => {
 })(KeyMod || {});
 
 // src/useSSR/useSSR.ts
-import { useEffect as useEffect15, useState as useState11 } from "react";
+import { useEffect as useEffect16, useState as useState12 } from "react";
 var detectIsBrowser = () => {
   return Boolean(
     typeof window !== "undefined" && window.document && window.document.createElement
   );
 };
 function useSSR() {
-  const [browser, setBrowser] = useState11(false);
-  useEffect15(() => {
+  const [browser, setBrowser] = useState12(false);
+  useEffect16(() => {
     setBrowser(detectIsBrowser());
   }, []);
   return {
@@ -1286,7 +1321,7 @@ var useKeyboard = (handler, keyBindings, options = {}) => {
     }
     handler && handler(event2);
   };
-  useEffect16(() => {
+  useEffect17(() => {
     if (!disableGlobalEvent) {
       document.addEventListener(event, eventHandler);
     }
@@ -1374,10 +1409,10 @@ function useModal() {
 }
 
 // src/useMounted/useMounted.ts
-import { useEffect as useEffect17, useState as useState12 } from "react";
+import { useEffect as useEffect18, useState as useState13 } from "react";
 function useMounted() {
-  const [mounted, setMounted] = useState12(false);
-  useEffect17(() => {
+  const [mounted, setMounted] = useState13(false);
+  useEffect18(() => {
     setMounted(true);
   }, []);
   return mounted;
@@ -1408,14 +1443,14 @@ function getPaginationInfo(items, page = 1, perPage = 15) {
 }
 
 // src/usePagination/usePagination.ts
-import { useEffect as useEffect18, useState as useState13 } from "react";
+import { useEffect as useEffect19, useState as useState14 } from "react";
 function usePagination($items, $page = 1, $perPage = 15) {
   const total = $items.length;
-  const [page, setPage] = useState13($page);
-  const [perPage, setPerPage_] = useState13($perPage);
-  const [items, setItems] = useState13(getPagedItems($items, $page, $perPage));
+  const [page, setPage] = useState14($page);
+  const [perPage, setPerPage_] = useState14($perPage);
+  const [items, setItems] = useState14(getPagedItems($items, $page, $perPage));
   const pages = Math.ceil(total / perPage);
-  useEffect18(() => {
+  useEffect19(() => {
     setItems(getPagedItems($items, page, perPage));
   }, [$items]);
   function goToPage(page2) {
@@ -1443,13 +1478,13 @@ function usePagination($items, $page = 1, $perPage = 15) {
 }
 
 // src/usePortal/usePortal.ts
-import { useEffect as useEffect19, useState as useState14 } from "react";
+import { useEffect as useEffect20, useState as useState15 } from "react";
 var namespace = "theme";
 function usePortal(name = getUID(), getContainer) {
   const { isBrowser: isBrowser6 } = useSSR();
   const id = `${namespace}-${name}`;
-  const [portal, setPortal] = useState14(isBrowser6 ? createElementWithId(id) : null);
-  useEffect19(() => {
+  const [portal, setPortal] = useState15(isBrowser6 ? createElementWithId(id) : null);
+  useEffect20(() => {
     const container = typeof getContainer === "function" ? getContainer() : null;
     const parentElement = container || document.body;
     const element = parentElement.querySelector(`#${id}`) || createElementWithId(id);
@@ -1470,24 +1505,24 @@ function getUID() {
 }
 
 // src/usePrevious/usePrevious.ts
-import { useEffect as useEffect20, useRef as useRef10 } from "react";
+import { useEffect as useEffect21, useRef as useRef11 } from "react";
 function usePrevious(state) {
-  const ref = useRef10(null);
-  useEffect20(() => {
+  const ref = useRef11(null);
+  useEffect21(() => {
     ref.current = state;
   });
   return ref.current;
 }
 
 // src/useRealSize/useRealSize.ts
-import { useEffect as useEffect21, useState as useState15 } from "react";
+import { useEffect as useEffect22, useState as useState16 } from "react";
 function useRealSize(ref) {
-  const [state, setState] = useState15({ width: 0, height: 0 });
+  const [state, setState] = useState16({ width: 0, height: 0 });
   const update = () => {
     const { width, height } = getRealSize(ref.current);
     setState({ width, height });
   };
-  useEffect21(() => update(), [ref.current]);
+  useEffect22(() => update(), [ref.current]);
   return [state, update];
 }
 function getRealSize(element) {
@@ -1522,9 +1557,9 @@ function useResize(callback, immediate = true) {
 }
 
 // src/useScroll/useScroll.ts
-import { useState as useState16 } from "react";
+import { useState as useState17 } from "react";
 function useScroll() {
-  const [scroll, setScroll] = useState16({ left: 0, top: 0 });
+  const [scroll, setScroll] = useState17({ left: 0, top: 0 });
   const onScroll = () => {
     const left = window.scrollX;
     const top = window.scrollY;
@@ -1576,12 +1611,12 @@ function scrollToY(y = 0) {
 }
 
 // src/useScrolled/useScrolled.ts
-import { useState as useState17 } from "react";
+import { useState as useState18 } from "react";
 var DEFAULT_CALLBACK = (top, left) => {
   return top > 0;
 };
 function useScrolled(callback = DEFAULT_CALLBACK) {
-  const [scrolled, setScrolled] = useState17(false);
+  const [scrolled, setScrolled] = useState18(false);
   const onScrolled = () => {
     const scrolled_ = callback(window.scrollY, window.scrollX);
     if (scrolled !== scrolled_) {
@@ -1598,7 +1633,7 @@ 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";
+import { useCallback as useCallback5, useMemo as useMemo5 } from "react";
 function replace_(params) {
   if (window.history) {
     const title = document.title;
@@ -1662,10 +1697,10 @@ function useSearchParams() {
     return value;
   }, [router.asPath]);
   const params = initialValue;
-  const replaceParamsSilently = useCallback4((params2) => {
+  const replaceParamsSilently = useCallback5((params2) => {
     replaceSearchParamsSilently(params2);
   }, []);
-  const replaceParams = useCallback4((params2) => {
+  const replaceParams = useCallback5((params2) => {
     replaceSearchParams(router, params2);
   }, [router]);
   return { params, replaceParamsSilently, replaceParams };
@@ -1678,7 +1713,7 @@ function useSearchParamsValue(key) {
     return value;
   }, [key, router.asPath]);
   const params = initialValue;
-  const replaceParamsSilently = useCallback4((params2) => {
+  const replaceParamsSilently = useCallback5((params2) => {
     replaceSearchParamsSilently(params2);
   }, []);
   return { params, replaceParamsSilently };
@@ -1687,7 +1722,7 @@ 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";
+import { useCallback as useCallback6, useMemo as useMemo6 } from "react";
 var USE_ENCRYPTION = true;
 function base64ToString(base64) {
   if (!USE_ENCRYPTION)
@@ -1798,10 +1833,10 @@ function useSearchParamsEncoded(key) {
     return value;
   }, [key, router.asPath]);
   const params = initialValue;
-  const replaceParamsSilently = useCallback5((params2) => {
+  const replaceParamsSilently = useCallback6((params2) => {
     replaceSearchParamsEncodedSilently(params2, key);
   }, [key]);
-  const replaceParams = useCallback5((params2) => {
+  const replaceParams = useCallback6((params2) => {
     replaceSearchParamsEncoded(router, params2, key);
   }, [key, router]);
   return { params, replaceParamsSilently, replaceParams };
@@ -1810,7 +1845,7 @@ function useSearchParamsEncoded(key) {
 // 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";
+import { useCallback as useCallback7, useMemo as useMemo7 } from "react";
 function replace(search) {
   if (window.history) {
     const title = document.title;
@@ -1881,22 +1916,22 @@ function useSearchParamsQs(key) {
     return value;
   }, [key, router.asPath]);
   const params = initialValue;
-  const replaceParamsSilently = useCallback6((params2) => {
+  const replaceParamsSilently = useCallback7((params2) => {
     replaceSearchParamsQsSilently(params2, key);
   }, [key]);
-  const replaceParams = useCallback6((params2) => {
+  const replaceParams = useCallback7((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";
+import { useEffect as useEffect23, useRef as useRef12, useState as useState19 } from "react";
 function useSorting(items_, callback_, sort_) {
-  const [sort, setSort] = useState18(sort_);
-  const [items, setItems] = useState18(callback_(items_.slice(), sort));
-  const isInitialMount = useRef11(true);
-  useEffect22(() => {
+  const [sort, setSort] = useState19(sort_);
+  const [items, setItems] = useState19(callback_(items_.slice(), sort));
+  const isInitialMount = useRef12(true);
+  useEffect23(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
     } else {
@@ -1912,18 +1947,18 @@ function useSorting(items_, callback_, sort_) {
 }
 
 // src/useSwiperIndex/useSwiperIndex.ts
-import { useCallback as useCallback7, useEffect as useEffect23, useState as useState19 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect24, useState as useState20 } from "react";
 import { useSwiper } from "swiper/react";
 function useSwiperIndex() {
   const swiper = useSwiper();
-  const [index, setIndex] = useState19(swiper.realIndex);
-  const slideTo = useCallback7((index2) => {
+  const [index, setIndex] = useState20(swiper.realIndex);
+  const slideTo = useCallback8((index2) => {
     swiper.slideTo(index2);
   }, [swiper]);
   const onSlideChange = (swiper2) => {
     setIndex(swiper2.realIndex);
   };
-  useEffect23(() => {
+  useEffect24(() => {
     if (swiper) {
       swiper.on("slideChange", onSlideChange);
     }
@@ -1937,9 +1972,9 @@ function useSwiperIndex() {
 }
 
 // src/useSyncedRef/useSyncedRef.ts
-import { useMemo as useMemo8, useRef as useRef12 } from "react";
+import { useMemo as useMemo8, useRef as useRef13 } from "react";
 function useSyncedRef(value) {
-  const ref = useRef12(value);
+  const ref = useRef13(value);
   ref.current = value;
   return useMemo8(() => Object.freeze({
     get current() {
@@ -1954,10 +1989,10 @@ function useUnit(unit = "kilometer", locale) {
 }
 
 // src/useUnmountEffect/useUnmountEffect.ts
-import { useEffect as useEffect24 } from "react";
+import { useEffect as useEffect25 } from "react";
 function useUnmountEffect(effect) {
   const effectRef = useSyncedRef(effect);
-  useEffect24(() => () => {
+  useEffect25(() => () => {
     effectRef.current();
   }, []);
 }
@@ -2001,6 +2036,7 @@ export {
   getSearchParamsQs,
   getUID,
   hasGeolocation,
+  isElement,
   isPaginationInfo,
   localCollectionDelete,
   localCollectionFetch,
@@ -2060,6 +2096,7 @@ export {
   useGeolocation,
   useIdle,
   useInfiniteLoader,
+  useIntersectionObserver,
   useIsomorphicLayoutEffect,
   useKeyboard,
   useLabel,

package/package.json

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

package/src/index.ts

@@ -26,6 +26,7 @@ export * from './useGeolocation/geolocation.service';
 export * from './useGeolocation/useGeolocation';
 export * from './useIdle/useIdle';
 export * from './useInfiniteLoader/useInfiniteLoader';
+export * from './useIntersectionObserver/useIntersectionObserver';
 export * from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
 export * from './useKeyboard/useKeyboard';
 export * from './useLabel/useLabel';

package/src/useApi/useApi.test.tsx

@@ -67,7 +67,7 @@ describe('useApi', () => {
       STORE_API: '/bowl/api',
       STORE_STRATEGY: 'mock',
       STORE_BEARER: 'STORE_BEARER',
-      SECRET_COOKIE_PASSWORD: 'SECRET_COOKIE_PASSWORD',
+      SECRET_COOKIE_PASSWORD: 'SECRET_COOKIE_PASSWORD_32_CHARS_LONG',
       HOOKS_SECRET: 'HOOKS_SECRET',
     };
   });

package/src/useCollectionApi/useCollectionApi.test.tsx

@@ -68,7 +68,7 @@ describe('useCollectionApi', () => {
       STORE_API: '/bowl/api',
       STORE_STRATEGY: 'mock',
       STORE_BEARER: 'STORE_BEARER',
-      SECRET_COOKIE_PASSWORD: 'SECRET_COOKIE_PASSWORD',
+      SECRET_COOKIE_PASSWORD: 'SECRET_COOKIE_PASSWORD_32_CHARS_LONG',
       HOOKS_SECRET: 'HOOKS_SECRET',
     };
   });

package/src/useHttp/useHttp.test.tsx

@@ -58,7 +58,7 @@ describe('useHttp', () => {
       STORE_API: '/bowl/api',
       STORE_STRATEGY: 'mock',
       STORE_BEARER: 'STORE_BEARER',
-      SECRET_COOKIE_PASSWORD: 'SECRET_COOKIE_PASSWORD',
+      SECRET_COOKIE_PASSWORD: 'SECRET_COOKIE_PASSWORD_32_CHARS_LONG',
       HOOKS_SECRET: 'HOOKS_SECRET',
     };
   });

package/src/useIntersectionObserver/useIntersectionObserver.ts

@@ -0,0 +1,38 @@
+import { MutableRefObject, useCallback, useEffect, useRef, useState } from 'react';
+
+export function useIntersectionObserver(
+  ref: MutableRefObject<Node | undefined>,
+  options: IntersectionObserverInit = {}): boolean {
+  const {
+    threshold = 1,
+    root = null,
+    rootMargin = '0px',
+  } = options;
+  const [entry, setEntry] = useState<IntersectionObserverEntry>();
+  const previousObserver = useRef<IntersectionObserver>();
+  const init = useCallback((node?: Node) => {
+    if (previousObserver.current) {
+      previousObserver.current.disconnect();
+      previousObserver.current = undefined;
+    }
+    if (isElement(node)) {
+      const observer = new IntersectionObserver(([entry]) => {
+        setEntry(entry);
+      }, { threshold, root, rootMargin });
+      observer.observe(node);
+      previousObserver.current = observer;
+    }
+  }, [threshold, root, rootMargin]);
+  useEffect(() => {
+    if (ref.current) {
+      init(ref.current);
+    }
+  }, [init, ref]);
+  // console.log(entry);
+  const isIntersecting = entry ? entry.isIntersecting : false;
+  return isIntersecting;
+}
+
+export function isElement(node?: Node): node is Element {
+  return node?.nodeType === Node.ELEMENT_NODE;
+}