@websolutespa/bom-mixer-hooks 1.9.1 → 1.9.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @websolutespa/bom-mixer-hooks
 
+## 1.9.2
+
+### Patch Changes
+
+- 4c2d7a6: Added: useScrollDirection
+
 ## 1.9.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -938,6 +938,8 @@ type Scroll = {
 };
 declare function useScroll(): Scroll;
 
+declare function useScrollDirection(callback?: (top: number, left: number) => number): number;
+
 declare function useScrolled(callback?: (top: number, left: number) => boolean): boolean;
 
 declare function useScrollTo(offset?: number): (event: React.MouseEvent<HTMLElement>) => void;
@@ -1055,4 +1057,4 @@ type WindowSize = {
 };
 declare function useWindowSize(): WindowSize;
 
-export { BodyScrollOptions, ClickOutGetContainer, ColorScheme, CurrentStateType, ElementStackItem, ExtraProvider, Filter, FilterMode, FilterParams, FilterValues, GeoLocationSensorState, IExtra, IFilter, IFilterOption, IGeolocationPositionError, ILabelContext, ILayoutContext, ILazyModulesContext, IMetaDataContext, IPageContext, IPageRoute, IPageRouteOptions, IPaginationInfo, IPaginationItem, IPaginationLegacyInfo, IPaginationOptions, IParams, IParamsEncoded, IParamsQs, IUseSearchParamsEncodedResult, IUseSearchParamsQsResult, IUseSearchParamsResult, IUseSearchParamsValueResult, KeyCode, KeyMod, KeyboardOptions, KeyboardResult, LabelProvider, LabelService, LayoutProvider, LazyModulesProvider, MetaDataProvider, PageProvider, SSRState, SizeResult, SizeType, Sorting, UIReducer, UIValue, UseFiltersResultType, UseKeyboard, UseKeyboardHandler, createElementWithId, createGenericContext, detectIsBrowser, filtersToParams, getCurrentPosition, getFilteredItems, getFilters, getMoreItems, getOwnerPaddingRight, getOwnerScrollbarWidth, getPagedItems, getPagedItemsLegacy, getPaginationInfo, getPaginationLegacyInfo, getPreferredColorScheme, getPreferredReducedMotion, getRealSize, getSearchParams, getSearchParamsEncoded, getSearchParamsQs, getUID, hasGeolocation, isElement, isPaginationInfo, isPaginationLegacyInfo, localCollectionDelete, localCollectionFetch, localCollectionGet, localCollectionPatch, localCollectionPost, localCollectionPut, parseLabel, parseParams, pushSearchParams, pushSearchParamsEncoded, pushSearchParamsEncodedSilently, pushSearchParamsQs, pushSearchParamsQsSilently, pushSearchParamsSilently, replaceSearchParams, replaceSearchParamsEncoded, replaceSearchParamsEncodedSilently, replaceSearchParamsQs, replaceSearchParamsQsSilently, replaceSearchParamsSilently, scrollToRelativeY, scrollToSelector, scrollToY, setFilters, updateSearchParams, updateSearchParamsEncoded, updateSearchParamsQs, useApi, useApiDelete, useApiFetch, useApiGet, useApiPatch, useApiPost, useApiPut, useAutosizeTextArea, useBodyScroll, useBreakpoint, useClickAnyWhere, useClickOut, useCollectionApi, useCollectionApiDelete, useCollectionApiGet, useCollectionApiPatch, useCollectionApiPost, useCollectionApiPut, useColorScheme, useCurrency, useCurrentState, useDateTimeFormat, useDebounce, useDebounceCallback, useDebugChangedProps, useDomObserver, useDrawer, useElementSize, useEventListener, useExtra, useFilters, useFocusTrap, useGeolocation, useIdle, useInfiniteLoader, useIntersectionObserver, useIsomorphicLayoutEffect, useKeyboard, useLabel, useLayout, useLazyModules, useMetaData, useModal, useMounted, useNumber, usePage, usePageLoading, usePagination, usePaginationLegacy, usePortal, usePrevious, useRealSize, useReducedMotion, useReducedMotionLocal, useResize, useSSR, useScroll, useScrollTo, useScrolled, useSearchParams, useSearchParamsEncoded, useSearchParamsQs, useSearchParamsValue, useSorting, useSyncedRef, useUI, useUnit, useUnmountEffect, useWindowSize };
+export { BodyScrollOptions, ClickOutGetContainer, ColorScheme, CurrentStateType, ElementStackItem, ExtraProvider, Filter, FilterMode, FilterParams, FilterValues, GeoLocationSensorState, IExtra, IFilter, IFilterOption, IGeolocationPositionError, ILabelContext, ILayoutContext, ILazyModulesContext, IMetaDataContext, IPageContext, IPageRoute, IPageRouteOptions, IPaginationInfo, IPaginationItem, IPaginationLegacyInfo, IPaginationOptions, IParams, IParamsEncoded, IParamsQs, IUseSearchParamsEncodedResult, IUseSearchParamsQsResult, IUseSearchParamsResult, IUseSearchParamsValueResult, KeyCode, KeyMod, KeyboardOptions, KeyboardResult, LabelProvider, LabelService, LayoutProvider, LazyModulesProvider, MetaDataProvider, PageProvider, SSRState, SizeResult, SizeType, Sorting, UIReducer, UIValue, UseFiltersResultType, UseKeyboard, UseKeyboardHandler, createElementWithId, createGenericContext, detectIsBrowser, filtersToParams, getCurrentPosition, getFilteredItems, getFilters, getMoreItems, getOwnerPaddingRight, getOwnerScrollbarWidth, getPagedItems, getPagedItemsLegacy, getPaginationInfo, getPaginationLegacyInfo, getPreferredColorScheme, getPreferredReducedMotion, getRealSize, getSearchParams, getSearchParamsEncoded, getSearchParamsQs, getUID, hasGeolocation, isElement, isPaginationInfo, isPaginationLegacyInfo, localCollectionDelete, localCollectionFetch, localCollectionGet, localCollectionPatch, localCollectionPost, localCollectionPut, parseLabel, parseParams, pushSearchParams, pushSearchParamsEncoded, pushSearchParamsEncodedSilently, pushSearchParamsQs, pushSearchParamsQsSilently, pushSearchParamsSilently, replaceSearchParams, replaceSearchParamsEncoded, replaceSearchParamsEncodedSilently, replaceSearchParamsQs, replaceSearchParamsQsSilently, replaceSearchParamsSilently, scrollToRelativeY, scrollToSelector, scrollToY, setFilters, updateSearchParams, updateSearchParamsEncoded, updateSearchParamsQs, useApi, useApiDelete, useApiFetch, useApiGet, useApiPatch, useApiPost, useApiPut, useAutosizeTextArea, useBodyScroll, useBreakpoint, useClickAnyWhere, useClickOut, useCollectionApi, useCollectionApiDelete, useCollectionApiGet, useCollectionApiPatch, useCollectionApiPost, useCollectionApiPut, useColorScheme, useCurrency, useCurrentState, useDateTimeFormat, useDebounce, useDebounceCallback, useDebugChangedProps, useDomObserver, useDrawer, useElementSize, useEventListener, useExtra, useFilters, useFocusTrap, useGeolocation, useIdle, useInfiniteLoader, useIntersectionObserver, useIsomorphicLayoutEffect, useKeyboard, useLabel, useLayout, useLazyModules, useMetaData, useModal, useMounted, useNumber, usePage, usePageLoading, usePagination, usePaginationLegacy, usePortal, usePrevious, useRealSize, useReducedMotion, useReducedMotionLocal, useResize, useSSR, useScroll, useScrollDirection, useScrollTo, useScrolled, useSearchParams, useSearchParamsEncoded, useSearchParamsQs, useSearchParamsValue, useSorting, useSyncedRef, useUI, useUnit, useUnmountEffect, useWindowSize };

package/dist/index.js

@@ -189,6 +189,7 @@ __export(src_exports, {
   useResize: () => useResize,
   useSSR: () => useSSR,
   useScroll: () => useScroll,
+  useScrollDirection: () => useScrollDirection,
   useScrollTo: () => useScrollTo,
   useScrolled: () => useScrolled,
   useSearchParams: () => useSearchParams,
@@ -2116,13 +2117,42 @@ function useScroll() {
   return scroll;
 }
 
-// src/useScrolled/useScrolled.ts
+// src/useScrollDirection/useScrollDirection.ts
 var import_react36 = require("react");
+var lastScrollTop = 0;
 var DEFAULT_CALLBACK = (top, left) => {
+  const scrollTop = window.scrollY || document.documentElement.scrollTop;
+  let direction = 0;
+  if (scrollTop > lastScrollTop) {
+    direction = 1;
+  } else if (scrollTop < lastScrollTop) {
+    direction = -1;
+  }
+  lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+  return direction;
+};
+function useScrollDirection(callback = DEFAULT_CALLBACK) {
+  const [direction, setDirection] = (0, import_react36.useState)(0);
+  const onScrolled = () => {
+    const direction_ = callback(window.scrollY, window.scrollX);
+    if (direction !== direction_) {
+      setDirection(direction_);
+    }
+  };
+  useEventListener("scroll", onScrolled);
+  useIsomorphicLayoutEffect(() => {
+    onScrolled();
+  }, []);
+  return direction;
+}
+
+// src/useScrolled/useScrolled.ts
+var import_react37 = require("react");
+var DEFAULT_CALLBACK2 = (top, left) => {
   return top > 0;
 };
-function useScrolled(callback = DEFAULT_CALLBACK) {
-  const [scrolled, setScrolled] = (0, import_react36.useState)(false);
+function useScrolled(callback = DEFAULT_CALLBACK2) {
+  const [scrolled, setScrolled] = (0, import_react37.useState)(false);
   const onScrolled = () => {
     const scrolled_ = callback(window.scrollY, window.scrollX);
     if (scrolled !== scrolled_) {
@@ -2174,7 +2204,7 @@ function scrollToY(y = 0) {
 
 // src/useSearchParams/useSearchParams.ts
 var import_router3 = require("next/router");
-var import_react37 = require("react");
+var import_react38 = require("react");
 function deserialize_(url) {
   const components = url.split("?");
   const search = components[1] || "";
@@ -2228,16 +2258,16 @@ function replaceSearchParamsSilently(router, params) {
 function useSearchParams() {
   const router = (0, import_router3.useRouter)();
   const params = getSearchParams2(router.asPath);
-  const pushParams = (0, import_react37.useCallback)((params2) => {
+  const pushParams = (0, import_react38.useCallback)((params2) => {
     pushSearchParams(router, params2);
   }, [router]);
-  const pushParamsSilently = (0, import_react37.useCallback)((params2) => {
+  const pushParamsSilently = (0, import_react38.useCallback)((params2) => {
     pushSearchParamsSilently(router, params2);
   }, [router]);
-  const replaceParams = (0, import_react37.useCallback)((params2) => {
+  const replaceParams = (0, import_react38.useCallback)((params2) => {
     replaceSearchParams(router, params2);
   }, [router]);
-  const replaceParamsSilently = (0, import_react37.useCallback)((params2) => {
+  const replaceParamsSilently = (0, import_react38.useCallback)((params2) => {
     replaceSearchParamsSilently(router, params2);
   }, [router]);
   return { params, pushParams, pushParamsSilently, replaceParams, replaceParamsSilently };
@@ -2245,16 +2275,16 @@ function useSearchParams() {
 function useSearchParamsValue(key) {
   const router = (0, import_router3.useRouter)();
   const params = getSearchParams2(router.asPath, key);
-  const pushParams = (0, import_react37.useCallback)((params2) => {
+  const pushParams = (0, import_react38.useCallback)((params2) => {
     pushSearchParams(router, params2);
   }, [router]);
-  const pushParamsSilently = (0, import_react37.useCallback)((params2) => {
+  const pushParamsSilently = (0, import_react38.useCallback)((params2) => {
     pushSearchParamsSilently(router, params2);
   }, [router]);
-  const replaceParams = (0, import_react37.useCallback)((params2) => {
+  const replaceParams = (0, import_react38.useCallback)((params2) => {
     replaceSearchParams(router, params2);
   }, [router]);
-  const replaceParamsSilently = (0, import_react37.useCallback)((params2) => {
+  const replaceParamsSilently = (0, import_react38.useCallback)((params2) => {
     replaceSearchParamsSilently(router, params2);
   }, [router]);
   return { params, pushParams, pushParamsSilently, replaceParams, replaceParamsSilently };
@@ -2263,7 +2293,7 @@ function useSearchParamsValue(key) {
 // src/useSearchParamsEncoded/useSearchParamsEncoded.ts
 var import_bom_core11 = require("@websolutespa/bom-core");
 var import_router4 = require("next/router");
-var import_react38 = require("react");
+var import_react39 = require("react");
 var USE_ENCRYPTION = true;
 function stringToURLSearchParams(url) {
   return new URLSearchParams(url);
@@ -2355,16 +2385,16 @@ function replaceSearchParamsEncodedSilently(router, value, key) {
 function useSearchParamsEncoded(key) {
   const router = (0, import_router4.useRouter)();
   const params = getSearchParamsEncoded(router.asPath, key);
-  const pushParams = (0, import_react38.useCallback)((params2) => {
+  const pushParams = (0, import_react39.useCallback)((params2) => {
     pushSearchParamsEncoded(router, params2, key);
   }, [key, router]);
-  const pushParamsSilently = (0, import_react38.useCallback)((params2) => {
+  const pushParamsSilently = (0, import_react39.useCallback)((params2) => {
     pushSearchParamsEncodedSilently(router, params2, key);
   }, [key, router]);
-  const replaceParams = (0, import_react38.useCallback)((params2) => {
+  const replaceParams = (0, import_react39.useCallback)((params2) => {
     replaceSearchParamsEncoded(router, params2, key);
   }, [key, router]);
-  const replaceParamsSilently = (0, import_react38.useCallback)((params2) => {
+  const replaceParamsSilently = (0, import_react39.useCallback)((params2) => {
     replaceSearchParamsEncodedSilently(router, params2, key);
   }, [key, router]);
   return { params, pushParams, pushParamsSilently, replaceParams, replaceParamsSilently };
@@ -2373,7 +2403,7 @@ function useSearchParamsEncoded(key) {
 // src/useSearchParamsQs/useSearchParamsQs.ts
 var import_bom_core12 = require("@websolutespa/bom-core");
 var import_router5 = require("next/router");
-var import_react39 = require("react");
+var import_react40 = require("react");
 function deserialize(encoded, key) {
   let decoded = {};
   if (encoded) {
@@ -2435,28 +2465,28 @@ function replaceSearchParamsQsSilently(router, value, key) {
 function useSearchParamsQs(key) {
   const router = (0, import_router5.useRouter)();
   const params = getSearchParamsQs(router.asPath, key);
-  const pushParams = (0, import_react39.useCallback)((params2) => {
+  const pushParams = (0, import_react40.useCallback)((params2) => {
     pushSearchParamsQs(router, params2, key);
   }, [key, router]);
-  const pushParamsSilently = (0, import_react39.useCallback)((params2) => {
+  const pushParamsSilently = (0, import_react40.useCallback)((params2) => {
     pushSearchParamsQsSilently(router, params2, key);
   }, [key, router]);
-  const replaceParams = (0, import_react39.useCallback)((params2) => {
+  const replaceParams = (0, import_react40.useCallback)((params2) => {
     replaceSearchParamsQs(router, params2, key);
   }, [key, router]);
-  const replaceParamsSilently = (0, import_react39.useCallback)((params2) => {
+  const replaceParamsSilently = (0, import_react40.useCallback)((params2) => {
     replaceSearchParamsQsSilently(router, params2, key);
   }, [key, router]);
   return { params, pushParamsSilently, pushParams, replaceParamsSilently, replaceParams };
 }
 
 // src/useSorting/useSorting.ts
-var import_react40 = require("react");
+var import_react41 = require("react");
 function useSorting(items_, callback_, sort_) {
-  const [sort, setSort] = (0, import_react40.useState)(sort_);
-  const [items, setItems] = (0, import_react40.useState)(callback_(items_.slice(), sort));
-  const isInitialMount = (0, import_react40.useRef)(true);
-  (0, import_react40.useEffect)(() => {
+  const [sort, setSort] = (0, import_react41.useState)(sort_);
+  const [items, setItems] = (0, import_react41.useState)(callback_(items_.slice(), sort));
+  const isInitialMount = (0, import_react41.useRef)(true);
+  (0, import_react41.useEffect)(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
     } else {
@@ -2472,11 +2502,11 @@ function useSorting(items_, callback_, sort_) {
 }
 
 // src/useSyncedRef/useSyncedRef.ts
-var import_react41 = require("react");
+var import_react42 = require("react");
 function useSyncedRef(value) {
-  const ref = (0, import_react41.useRef)(value);
+  const ref = (0, import_react42.useRef)(value);
   ref.current = value;
-  return (0, import_react41.useMemo)(() => Object.freeze({
+  return (0, import_react42.useMemo)(() => Object.freeze({
     get current() {
       return ref.current;
     }
@@ -2489,10 +2519,10 @@ function useUnit(unit = "kilometer", locale) {
 }
 
 // src/useUnmountEffect/useUnmountEffect.ts
-var import_react42 = require("react");
+var import_react43 = require("react");
 function useUnmountEffect(effect) {
   const effectRef = useSyncedRef(effect);
-  (0, import_react42.useEffect)(() => () => {
+  (0, import_react43.useEffect)(() => () => {
     effectRef.current();
   }, []);
 }
@@ -2618,6 +2648,7 @@ function useUnmountEffect(effect) {
   useResize,
   useSSR,
   useScroll,
+  useScrollDirection,
   useScrollTo,
   useScrolled,
   useSearchParams,

package/dist/index.mjs

@@ -1962,13 +1962,42 @@ function useScroll() {
   return scroll;
 }
 
-// src/useScrolled/useScrolled.ts
+// src/useScrollDirection/useScrollDirection.ts
 import { useState as useState22 } from "react";
+var lastScrollTop = 0;
 var DEFAULT_CALLBACK = (top, left) => {
+  const scrollTop = window.scrollY || document.documentElement.scrollTop;
+  let direction = 0;
+  if (scrollTop > lastScrollTop) {
+    direction = 1;
+  } else if (scrollTop < lastScrollTop) {
+    direction = -1;
+  }
+  lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+  return direction;
+};
+function useScrollDirection(callback = DEFAULT_CALLBACK) {
+  const [direction, setDirection] = useState22(0);
+  const onScrolled = () => {
+    const direction_ = callback(window.scrollY, window.scrollX);
+    if (direction !== direction_) {
+      setDirection(direction_);
+    }
+  };
+  useEventListener("scroll", onScrolled);
+  useIsomorphicLayoutEffect(() => {
+    onScrolled();
+  }, []);
+  return direction;
+}
+
+// src/useScrolled/useScrolled.ts
+import { useState as useState23 } from "react";
+var DEFAULT_CALLBACK2 = (top, left) => {
   return top > 0;
 };
-function useScrolled(callback = DEFAULT_CALLBACK) {
-  const [scrolled, setScrolled] = useState22(false);
+function useScrolled(callback = DEFAULT_CALLBACK2) {
+  const [scrolled, setScrolled] = useState23(false);
   const onScrolled = () => {
     const scrolled_ = callback(window.scrollY, window.scrollX);
     if (scrolled !== scrolled_) {
@@ -2297,10 +2326,10 @@ function useSearchParamsQs(key) {
 }
 
 // src/useSorting/useSorting.ts
-import { useEffect as useEffect26, useRef as useRef10, useState as useState23 } from "react";
+import { useEffect as useEffect26, useRef as useRef10, useState as useState24 } from "react";
 function useSorting(items_, callback_, sort_) {
-  const [sort, setSort] = useState23(sort_);
-  const [items, setItems] = useState23(callback_(items_.slice(), sort));
+  const [sort, setSort] = useState24(sort_);
+  const [items, setItems] = useState24(callback_(items_.slice(), sort));
   const isInitialMount = useRef10(true);
   useEffect26(() => {
     if (isInitialMount.current) {
@@ -2463,6 +2492,7 @@ export {
   useResize,
   useSSR,
   useScroll,
+  useScrollDirection,
   useScrollTo,
   useScrolled,
   useSearchParams,

package/package.json

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

package/src/index.ts

@@ -50,6 +50,7 @@ export * from './useReducedMotion/useReducedMotion';
 export * from './useReducedMotion/useReducedMotionLocal';
 export * from './useResize/useResize';
 export * from './useScroll/useScroll';
+export * from './useScrollDirection/useScrollDirection';
 export * from './useScrolled/useScrolled';
 export * from './useScrollTo/useScrollTo';
 export * from './useSearchParams/useSearchParams';

package/src/useScrollDirection/useScrollDirection.ts

@@ -0,0 +1,37 @@
+import { useEventListener, useIsomorphicLayoutEffect } from '@websolutespa/bom-mixer-hooks';
+import { useState } from 'react';
+
+let lastScrollTop: number = 0;
+
+const DEFAULT_CALLBACK = (top: number, left: number) => {
+  const scrollTop = window.scrollY || document.documentElement.scrollTop;
+  let direction = 0;
+  if (scrollTop > lastScrollTop) {
+    direction = 1;
+  } else if (scrollTop < lastScrollTop) {
+    direction = -1;
+  }
+  lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+  return direction;
+};
+
+export function useScrollDirection(callback: (top: number, left: number) => number = DEFAULT_CALLBACK): number {
+  const [direction, setDirection] = useState<number>(0);
+
+  const onScrolled = () => {
+    const direction_ = callback(window.scrollY, window.scrollX);
+    if (direction !== direction_) {
+      setDirection(direction_);
+    }
+  };
+
+  useEventListener('scroll', onScrolled);
+
+  // Set size at the first client-side load
+  useIsomorphicLayoutEffect(() => {
+    onScrolled();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return direction;
+}