@alessiofrittoli/react-hooks 2.0.1 → 3.1.0

package/README.md

@@ -267,9 +267,13 @@ Get Document Media matches and listen for changes.
 
 <summary style="cursor:pointer">Parameters</summary>
 
-| Parameter | Type     | Description |
-|-----------|----------|-------------|
-| `query`   | `string` | A string specifying the media query to parse into a `MediaQueryList`. |
+| Parameter | Type     | Default | Description |
+|-----------|----------|---------|-------------|
+| `query`   | `string` | - | A string specifying the media query to parse into a `MediaQueryList`. |
+| `options` | `UseMediaQueryOptions\|UseMediaQueryStateOptions` | - | An object defining custom options. |
+| `options.updateState` | `boolean` | `true` | Indicates whether the hook will dispatch a React state update when the given `query` change event get dispatched. |
+| `options.onChange` | `OnChangeHandler` | - | A custom callback that will be invoked on initial page load and when the given `query` change event get dispatched. |
+| | | | This callback is required if `updateState` is set to `false`. |
 
 </details>
 
@@ -279,10 +283,10 @@ Get Document Media matches and listen for changes.
 
 <summary style="cursor:pointer">Returns</summary>
 
-Type: `boolean`
+Type: `boolean|void`
 
-- `true` if the document currently matches the media query list.
-- `false` otherwise.
+- `true` or `false` if the document currently matches the media query list or not.
+- `void` if `updateState` is set to `false`.
 
 </details>
 
@@ -300,6 +304,21 @@ import { useMediaQuery } from '@alessiofrittoli/react-hooks'
 const isDarkOS = useMediaQuery( '(prefers-color-scheme: dark)' )
 ```
 
+---
+
+###### Listen changes with no state updates
+
+```tsx
+import { useMediaQuery } from '@alessiofrittoli/react-hooks'
+
+useMediaQuery( '(prefers-color-scheme: dark)', {
+  updateState: false,
+  onChange( matches ) {
+    console.log( 'is dark OS?', matches )
+  }
+} )
+```
+
 </details>
 
 ---
@@ -682,9 +701,17 @@ Check if the given target Element is intersecting with an ancestor Element or wi
 | | | - `number` |
 | | | - `number[]` |
 | `options.once` | `boolean` | (Optional) By setting this to `true` the observer will be disconnected after the target Element enters the viewport. |
-| `options.initial` | `boolean` | (Optional) Initial value. Default: `false`. |
+| `options.initial` | `boolean` | (Optional) Initial value. This value is used while server rendering then will be updated in the client based on target visibility. Default: `false`. |
 | `options.enable` | `boolean` | (Optional) Defines the initial observation activity. Use the returned `setEnabled` to update this state. Default: `true`. |
-| `options.onStart` | `OnStartHandler` | (Optional) A custom callback executed when target element's visibility has crossed one or more thresholds. |
+| `options.onIntersect` | `OnIntersectStateHandler` | (Optional) A custom callback executed when target element's visibility has crossed one or more thresholds. |
+| | | This callback is awaited before any state update. |
+| | | If an error is thrown the React State update won't be fired. |
+| | | ⚠️ Wrap your callback with `useCallback` to avoid unnecessary `IntersectionObserver` recreation. |
+| `options.onEnter` | `OnIntersectHandler` | (Optional) A custom callback executed when target element's visibility has crossed one or more thresholds. |
+| | | This callback is awaited before any state update. |
+| | | If an error is thrown the React State update won't be fired. |
+| | | ⚠️ Wrap your callback with `useCallback` to avoid unnecessary `IntersectionObserver` recreation. |
+| `options.onExit` | `OnIntersectHandler` | (Optional) A custom callback executed when target element's visibility has crossed one or more thresholds. |
 | | | This callback is awaited before any state update. |
 | | | If an error is thrown the React State update won't be fired. |
 | | | ⚠️ Wrap your callback with `useCallback` to avoid unnecessary `IntersectionObserver` recreation. |
@@ -839,21 +866,63 @@ const OnDemandObservation: React.FC = () => {
 'use client'
 
 import { useRef } from 'react'
-import { useInView, type OnStartHandler } from '@alessiofrittoli/react-hooks'
+import { useInView, type OnIntersectStateHandler } from '@alessiofrittoli/react-hooks'
 
 
 const AsyncStartExample: React.FC = () => {
 
   const targetRef = useRef<HTMLDivElement>( null )
-  const onStart   = useCallback<OnStartHandler>( async entry => {
+  const onIntersect   = useCallback<OnIntersectStateHandler>( async ( { entry, isEntering } ) => {
 
+    if ( isEntering ) {
+      console.log( 'Delaying state update...' )
+      await new Promise( resolve => setTimeout( resolve, 1000 ) ) // Simulate delay
+      console.log( 'Async task completed. `inView` will now be updated.' )
+      return
+    }
+    
     console.log( 'Delaying state update...' )
     await new Promise( resolve => setTimeout( resolve, 1000 ) ) // Simulate delay
     console.log( 'Async task completed. `inView` will now be updated.' )
   
   }, [] )
 
-  const { inView } = useInView( targetRef, { onStart } )
+  const { inView } = useInView( targetRef, { onIntersect } )
+
+  return (
+    <div
+      ref={ targetRef }
+      style={ {
+        height      : 200,
+        background  : inView ? 'lime' : 'gray',
+      } }
+    />
+  )
+}
+```
+
+---
+
+###### Execute custom callback when `onEnter` and `onExit`
+
+```tsx
+'use client'
+
+import { useRef } from 'react'
+import { useInView, type OnIntersectHandler } from '@alessiofrittoli/react-hooks'
+
+
+const AsyncStartExample: React.FC = () => {
+
+  const targetRef = useRef<HTMLDivElement>( null )
+  const onEnter = useCallback<OnIntersectHandler>( async ( { entry } ) => {
+    console.log( 'In viewport - ', entry )
+  }, [] )
+  const onExit = useCallback<OnIntersectHandler>( async ( { entry } ) => {
+    console.log( 'Exited viewport - ', entry )
+  }, [] )
+
+  const { inView } = useInView( targetRef, { onEnter, onExit } )
 
   return (
     <div

package/dist/index.d.mts

@@ -481,15 +481,50 @@ declare function useEventListener<T extends Record<string, Event>, K extends key
  */
 declare const useIsPortrait: () => boolean;
 
+type OnChangeHandler = (matches: boolean) => void;
+interface CommonOptions {
+    /**
+     * A custom callback that will be invoked on initial page load and when the given `query` change event get dispatched.
+     *
+     * @param matches Whether the document currently matches the media query list.
+     */
+    onChange?: OnChangeHandler;
+}
+interface UseMediaQueryOptions extends CommonOptions {
+    /**
+     * Indicates whether the hook will dispatch a React state update when the given `query` change event get dispatched.
+     *
+     */
+    updateState: false;
+    onChange: OnChangeHandler;
+}
+interface UseMediaQueryStateOptions extends CommonOptions {
+    /**
+     * Indicates whether the hook will dispatch a React state update when the given `query` change event get dispatched.
+     *
+     */
+    updateState?: true;
+}
 /**
- * Get Document Media matches and listen for changes.
+ * Get Document Media matches and dispatch a React state update on MediaQuery changes.
  *
  * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
  *
- * @param	query A string specifying the media query to parse into a `MediaQueryList`.
+ * @param	query	A string specifying the media query to parse into a `MediaQueryList`.
+ * @param	options	An object defining custom options. See {@linkcode UseMediaQueryStateOptions} for more info.
+ *
  * @returns	A boolean value that returns `true` if the document currently matches the media query list, or `false` if not.
  */
-declare const useMediaQuery: (query: string) => boolean;
+declare function useMediaQuery(query: string, options?: UseMediaQueryStateOptions): boolean;
+/**
+ * Get Document Media matches and listen for changes.
+ *
+ * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
+ *
+ * @param	query	A string specifying the media query to parse into a `MediaQueryList`.
+ * @param	options	An object defining custom options. See {@linkcode UseMediaQueryOptions} for more info.
+ */
+declare function useMediaQuery(query: string, options?: UseMediaQueryOptions): void;
 
 type SetFocusTrap = (target?: HTMLElement) => void;
 type RestoreFocusTrap = () => void;
@@ -507,6 +542,42 @@ declare const useFocusTrap: (target?: React.RefObject<HTMLElement | null>) => re
 
 type MarginValue = `${number}${'px' | '%'}`;
 type MarginType = (MarginValue | `${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue} ${MarginValue}`);
+type IntersectionState = ({
+    /**
+     * Indicates whether the {@link IntersectionObserverEntry} is entering the viewport.
+     *
+     */
+    isEntering: true;
+    /**
+     * Indicates whether the {@link IntersectionObserverEntry} is exiting the viewport.
+     *
+     */
+    isExiting: false;
+} | {
+    /**
+     * Indicates whether the {@link IntersectionObserverEntry} is entering the viewport.
+     *
+     */
+    isEntering: false;
+    /**
+     * Indicates whether the {@link IntersectionObserverEntry} is exiting the viewport.
+     *
+     */
+    isExiting: true;
+});
+interface OnIntersectHandlerOptions {
+    /**
+     * The intersecting {@link IntersectionObserverEntry}.
+     *
+     */
+    entry: IntersectionObserverEntry;
+    /**
+     * The current {@link IntersectionObserver} instance.
+     *
+     */
+    observer: IntersectionObserver;
+}
+type OnIntersectStateHandlerOptions = OnIntersectHandlerOptions & IntersectionState;
 /**
  * A custom callback executed when target element's visibility has crossed one or more thresholds.
  *
@@ -516,10 +587,21 @@ type MarginType = (MarginValue | `${MarginValue} ${MarginValue}` | `${MarginValu
  *
  * ⚠️ Wrap your callback with `useCallback` to avoid unnecessary `IntersectionObserver` recreation.
  *
- * @param	entry		The intersecting {@link IntersectionObserverEntry}.
- * @param	observer	The current {@link IntersectionObserver} instance.
+ * @param options An object defining the current intersection entry and observer.
  */
-type OnStartHandler = (entry: IntersectionObserverEntry, observer: IntersectionObserver) => void | Promise<void>;
+type OnIntersectHandler = (options: OnIntersectHandlerOptions) => void | Promise<void>;
+/**
+ * A custom callback executed when target element's visibility has crossed one or more thresholds.
+ *
+ * This callback is awaited before any state update.
+ *
+ * If an error is thrown the React State update won't be fired.
+ *
+ * ⚠️ Wrap your callback with `useCallback` to avoid unnecessary `IntersectionObserver` recreation.
+ *
+ * @param options An object defining the current intersection entry, observer and entry state.
+ */
+type OnIntersectStateHandler = (options: OnIntersectStateHandlerOptions) => void | Promise<void>;
 interface UseInViewOptions {
     /**
      * Identifies the {@link Element} or {@link Document} whose bounds are treated as the bounding box of the viewport for the Element which is the observer's target.
@@ -554,9 +636,9 @@ interface UseInViewOptions {
      */
     once?: boolean;
     /**
-     * Initial value.
+     * Initial value. This value is used while server rendering then will be updated in the client based on target visibility.
      *
-     * @default true
+     * @default false
      */
     initial?: boolean;
     /**
@@ -574,10 +656,33 @@ interface UseInViewOptions {
      *
      * ⚠️ Wrap your callback with `useCallback` to avoid unnecessary `IntersectionObserver` recreation.
      *
-     * @param	entry		The intersecting {@link IntersectionObserverEntry}.
-     * @param	observer	The current {@link IntersectionObserver} instance.
+     * @param options An object defining the current intersection entry, observer and entry state.
+     */
+    onIntersect?: OnIntersectStateHandler;
+    /**
+     * A custom callback executed when target element is entering the viewport.
+     *
+     * This callback is awaited before any state update.
+     *
+     * If an error is thrown the React State update won't be fired.
+     *
+     * ⚠️ Wrap your callback with `useCallback` to avoid unnecessary `IntersectionObserver` recreation.
+     *
+     * @param options An object defining the current intersection entry and observer.
      */
-    onStart?: OnStartHandler;
+    onEnter?: OnIntersectHandler;
+    /**
+     * A custom callback executed when target element is exiting the viewport.
+     *
+     * This callback is awaited before any state update.
+     *
+     * If an error is thrown the React State update won't be fired.
+     *
+     * ⚠️ Wrap your callback with `useCallback` to avoid unnecessary `IntersectionObserver` recreation.
+     *
+     * @param options An object defining the current intersection entry and observer.
+     */
+    onExit?: OnIntersectHandler;
 }
 interface UseInViewReturnType {
     /**
@@ -585,6 +690,11 @@ interface UseInViewReturnType {
      *
      */
     inView: boolean;
+    /**
+     * Indicates whether the target Element is exiting the viewport.
+     *
+     */
+    isExiting: boolean;
     /**
      * Indicates whether the target Element is being observed or not.
      *
@@ -626,6 +736,13 @@ declare const useInView: (target: React.RefObject<Element | null>, options?: Use
  */
 declare const useScrollBlock: (target?: React.RefObject<HTMLElement | null>) => readonly [() => void, () => void];
 
+/**
+ * Modified version of `useEffect` that only run once on intial load.
+ *
+ * @param effect Imperative function that can return a cleanup function.
+ */
+declare const useEffectOnce: (effect: React.EffectCallback) => void;
+
 /**
  * Check if the React Hook or Component where this hook is executed is running in a browser environment.
  *
@@ -937,4 +1054,4 @@ declare function useTimeout<T extends readonly unknown[]>(callback: TimerHandler
  */
 declare const useLightTimeout: <T extends readonly unknown[]>(callback: TimerHandler<T>, options?: BasicTimerOptions<T>) => void;
 
-export { type AddEventListenerOptions, type BasicTimerOptions, type CommonListenerOptions, type CustomEventListenerOptions, type DocumentEventListener, type DocumentListenerOptions, type ElementEventListener, type ElementListenerOptions, type ListenerOptions, type MarginType, type MarginValue, type MediaQueryChangeListener, type MediaQueryEventListener, type MediaQueryListenerOptions, type OnStartHandler, type StartTimer, type StateTimerOptions, type StateTimerReturnType, type StopTimer, type TimerHandler, type TimerId, type TimerOptions, type TimerReturnType, type UseDarkModeOptions, type UseDarkModeOutput, type UseInViewOptions, type UseInViewReturnType, type UseIntervalWhenVisibleReturnType, type UseIntervalWhenVisibleStateReturnType, type WindowEventListener, type WindowListenerOptions, useDarkMode, useDebounce, useEventListener, useFocusTrap, useInView, useInterval, useIntervalWhenVisible, useIsClient, useIsFirstRender, useIsPortrait, useLightInterval, useLightTimeout, useLocalStorage, useMediaQuery, useScrollBlock, useSessionStorage, useStorage, useTimeout, useUpdateEffect };
+export { type AddEventListenerOptions, type BasicTimerOptions, type CommonListenerOptions, type CustomEventListenerOptions, type DocumentEventListener, type DocumentListenerOptions, type ElementEventListener, type ElementListenerOptions, type IntersectionState, type ListenerOptions, type MarginType, type MarginValue, type MediaQueryChangeListener, type MediaQueryEventListener, type MediaQueryListenerOptions, type OnChangeHandler, type OnIntersectHandler, type OnIntersectStateHandler, type StartTimer, type StateTimerOptions, type StateTimerReturnType, type StopTimer, type TimerHandler, type TimerId, type TimerOptions, type TimerReturnType, type UseDarkModeOptions, type UseDarkModeOutput, type UseInViewOptions, type UseInViewReturnType, type UseIntervalWhenVisibleReturnType, type UseIntervalWhenVisibleStateReturnType, type UseMediaQueryOptions, type UseMediaQueryStateOptions, type WindowEventListener, type WindowListenerOptions, useDarkMode, useDebounce, useEffectOnce, useEventListener, useFocusTrap, useInView, useInterval, useIntervalWhenVisible, useIsClient, useIsFirstRender, useIsPortrait, useLightInterval, useLightTimeout, useLocalStorage, useMediaQuery, useScrollBlock, useSessionStorage, useStorage, useTimeout, useUpdateEffect };

package/dist/index.d.ts

@@ -481,15 +481,50 @@ declare function useEventListener<T extends Record<string, Event>, K extends key
  */
 declare const useIsPortrait: () => boolean;
 
+type OnChangeHandler = (matches: boolean) => void;
+interface CommonOptions {
+    /**
+     * A custom callback that will be invoked on initial page load and when the given `query` change event get dispatched.
+     *
+     * @param matches Whether the document currently matches the media query list.
+     */
+    onChange?: OnChangeHandler;
+}
+interface UseMediaQueryOptions extends CommonOptions {
+    /**
+     * Indicates whether the hook will dispatch a React state update when the given `query` change event get dispatched.
+     *
+     */
+    updateState: false;
+    onChange: OnChangeHandler;
+}
+interface UseMediaQueryStateOptions extends CommonOptions {
+    /**
+     * Indicates whether the hook will dispatch a React state update when the given `query` change event get dispatched.
+     *
+     */
+    updateState?: true;
+}
 /**
- * Get Document Media matches and listen for changes.
+ * Get Document Media matches and dispatch a React state update on MediaQuery changes.
  *
  * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
  *
- * @param	query A string specifying the media query to parse into a `MediaQueryList`.
+ * @param	query	A string specifying the media query to parse into a `MediaQueryList`.
+ * @param	options	An object defining custom options. See {@linkcode UseMediaQueryStateOptions} for more info.
+ *
  * @returns	A boolean value that returns `true` if the document currently matches the media query list, or `false` if not.
  */
-declare const useMediaQuery: (query: string) => boolean;
+declare function useMediaQuery(query: string, options?: UseMediaQueryStateOptions): boolean;
+/**
+ * Get Document Media matches and listen for changes.
+ *
+ * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
+ *
+ * @param	query	A string specifying the media query to parse into a `MediaQueryList`.
+ * @param	options	An object defining custom options. See {@linkcode UseMediaQueryOptions} for more info.
+ */
+declare function useMediaQuery(query: string, options?: UseMediaQueryOptions): void;
 
 type SetFocusTrap = (target?: HTMLElement) => void;
 type RestoreFocusTrap = () => void;
@@ -507,6 +542,42 @@ declare const useFocusTrap: (target?: React.RefObject<HTMLElement | null>) => re
 
 type MarginValue = `${number}${'px' | '%'}`;
 type MarginType = (MarginValue | `${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue} ${MarginValue}`);
+type IntersectionState = ({
+    /**
+     * Indicates whether the {@link IntersectionObserverEntry} is entering the viewport.
+     *
+     */
+    isEntering: true;
+    /**
+     * Indicates whether the {@link IntersectionObserverEntry} is exiting the viewport.
+     *
+     */
+    isExiting: false;
+} | {
+    /**
+     * Indicates whether the {@link IntersectionObserverEntry} is entering the viewport.
+     *
+     */
+    isEntering: false;
+    /**
+     * Indicates whether the {@link IntersectionObserverEntry} is exiting the viewport.
+     *
+     */
+    isExiting: true;
+});
+interface OnIntersectHandlerOptions {
+    /**
+     * The intersecting {@link IntersectionObserverEntry}.
+     *
+     */
+    entry: IntersectionObserverEntry;
+    /**
+     * The current {@link IntersectionObserver} instance.
+     *
+     */
+    observer: IntersectionObserver;
+}
+type OnIntersectStateHandlerOptions = OnIntersectHandlerOptions & IntersectionState;
 /**
  * A custom callback executed when target element's visibility has crossed one or more thresholds.
  *
@@ -516,10 +587,21 @@ type MarginType = (MarginValue | `${MarginValue} ${MarginValue}` | `${MarginValu
  *
  * ⚠️ Wrap your callback with `useCallback` to avoid unnecessary `IntersectionObserver` recreation.
  *
- * @param	entry		The intersecting {@link IntersectionObserverEntry}.
- * @param	observer	The current {@link IntersectionObserver} instance.
+ * @param options An object defining the current intersection entry and observer.
  */
-type OnStartHandler = (entry: IntersectionObserverEntry, observer: IntersectionObserver) => void | Promise<void>;
+type OnIntersectHandler = (options: OnIntersectHandlerOptions) => void | Promise<void>;
+/**
+ * A custom callback executed when target element's visibility has crossed one or more thresholds.
+ *
+ * This callback is awaited before any state update.
+ *
+ * If an error is thrown the React State update won't be fired.
+ *
+ * ⚠️ Wrap your callback with `useCallback` to avoid unnecessary `IntersectionObserver` recreation.
+ *
+ * @param options An object defining the current intersection entry, observer and entry state.
+ */
+type OnIntersectStateHandler = (options: OnIntersectStateHandlerOptions) => void | Promise<void>;
 interface UseInViewOptions {
     /**
      * Identifies the {@link Element} or {@link Document} whose bounds are treated as the bounding box of the viewport for the Element which is the observer's target.
@@ -554,9 +636,9 @@ interface UseInViewOptions {
      */
     once?: boolean;
     /**
-     * Initial value.
+     * Initial value. This value is used while server rendering then will be updated in the client based on target visibility.
      *
-     * @default true
+     * @default false
      */
     initial?: boolean;
     /**
@@ -574,10 +656,33 @@ interface UseInViewOptions {
      *
      * ⚠️ Wrap your callback with `useCallback` to avoid unnecessary `IntersectionObserver` recreation.
      *
-     * @param	entry		The intersecting {@link IntersectionObserverEntry}.
-     * @param	observer	The current {@link IntersectionObserver} instance.
+     * @param options An object defining the current intersection entry, observer and entry state.
+     */
+    onIntersect?: OnIntersectStateHandler;
+    /**
+     * A custom callback executed when target element is entering the viewport.
+     *
+     * This callback is awaited before any state update.
+     *
+     * If an error is thrown the React State update won't be fired.
+     *
+     * ⚠️ Wrap your callback with `useCallback` to avoid unnecessary `IntersectionObserver` recreation.
+     *
+     * @param options An object defining the current intersection entry and observer.
      */
-    onStart?: OnStartHandler;
+    onEnter?: OnIntersectHandler;
+    /**
+     * A custom callback executed when target element is exiting the viewport.
+     *
+     * This callback is awaited before any state update.
+     *
+     * If an error is thrown the React State update won't be fired.
+     *
+     * ⚠️ Wrap your callback with `useCallback` to avoid unnecessary `IntersectionObserver` recreation.
+     *
+     * @param options An object defining the current intersection entry and observer.
+     */
+    onExit?: OnIntersectHandler;
 }
 interface UseInViewReturnType {
     /**
@@ -585,6 +690,11 @@ interface UseInViewReturnType {
      *
      */
     inView: boolean;
+    /**
+     * Indicates whether the target Element is exiting the viewport.
+     *
+     */
+    isExiting: boolean;
     /**
      * Indicates whether the target Element is being observed or not.
      *
@@ -626,6 +736,13 @@ declare const useInView: (target: React.RefObject<Element | null>, options?: Use
  */
 declare const useScrollBlock: (target?: React.RefObject<HTMLElement | null>) => readonly [() => void, () => void];
 
+/**
+ * Modified version of `useEffect` that only run once on intial load.
+ *
+ * @param effect Imperative function that can return a cleanup function.
+ */
+declare const useEffectOnce: (effect: React.EffectCallback) => void;
+
 /**
  * Check if the React Hook or Component where this hook is executed is running in a browser environment.
  *
@@ -937,4 +1054,4 @@ declare function useTimeout<T extends readonly unknown[]>(callback: TimerHandler
  */
 declare const useLightTimeout: <T extends readonly unknown[]>(callback: TimerHandler<T>, options?: BasicTimerOptions<T>) => void;
 
-export { type AddEventListenerOptions, type BasicTimerOptions, type CommonListenerOptions, type CustomEventListenerOptions, type DocumentEventListener, type DocumentListenerOptions, type ElementEventListener, type ElementListenerOptions, type ListenerOptions, type MarginType, type MarginValue, type MediaQueryChangeListener, type MediaQueryEventListener, type MediaQueryListenerOptions, type OnStartHandler, type StartTimer, type StateTimerOptions, type StateTimerReturnType, type StopTimer, type TimerHandler, type TimerId, type TimerOptions, type TimerReturnType, type UseDarkModeOptions, type UseDarkModeOutput, type UseInViewOptions, type UseInViewReturnType, type UseIntervalWhenVisibleReturnType, type UseIntervalWhenVisibleStateReturnType, type WindowEventListener, type WindowListenerOptions, useDarkMode, useDebounce, useEventListener, useFocusTrap, useInView, useInterval, useIntervalWhenVisible, useIsClient, useIsFirstRender, useIsPortrait, useLightInterval, useLightTimeout, useLocalStorage, useMediaQuery, useScrollBlock, useSessionStorage, useStorage, useTimeout, useUpdateEffect };
+export { type AddEventListenerOptions, type BasicTimerOptions, type CommonListenerOptions, type CustomEventListenerOptions, type DocumentEventListener, type DocumentListenerOptions, type ElementEventListener, type ElementListenerOptions, type IntersectionState, type ListenerOptions, type MarginType, type MarginValue, type MediaQueryChangeListener, type MediaQueryEventListener, type MediaQueryListenerOptions, type OnChangeHandler, type OnIntersectHandler, type OnIntersectStateHandler, type StartTimer, type StateTimerOptions, type StateTimerReturnType, type StopTimer, type TimerHandler, type TimerId, type TimerOptions, type TimerReturnType, type UseDarkModeOptions, type UseDarkModeOutput, type UseInViewOptions, type UseInViewReturnType, type UseIntervalWhenVisibleReturnType, type UseIntervalWhenVisibleStateReturnType, type UseMediaQueryOptions, type UseMediaQueryStateOptions, type WindowEventListener, type WindowListenerOptions, useDarkMode, useDebounce, useEffectOnce, useEventListener, useFocusTrap, useInView, useInterval, useIntervalWhenVisible, useIsClient, useIsFirstRender, useIsPortrait, useLightInterval, useLightTimeout, useLocalStorage, useMediaQuery, useScrollBlock, useSessionStorage, useStorage, useTimeout, useUpdateEffect };

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _react = require('react');var _LocalStorage = require('@alessiofrittoli/web-utils/storage/LocalStorage');var _SessionStorage = require('@alessiofrittoli/web-utils/storage/SessionStorage');var v=(e,r,t="local")=>{let n=_react.useCallback.call(void 0, ()=>_nullishCoalesce((t==="local"?_LocalStorage.LocalStorage:_SessionStorage.SessionStorage).get(e), () => (r)),[t,e,r]),[i,a]=_react.useState.call(void 0, r),o=_react.useCallback.call(void 0, s=>{a(l=>{let u=s instanceof Function?s(l):s;return(typeof window<"u"&&t==="local"?_LocalStorage.LocalStorage:_SessionStorage.SessionStorage).set(e,u),u})},[t,e]);return _react.useEffect.call(void 0, ()=>{a(n())},[n]),[i,o]};var D=(e,r)=>v(e,r,"local");var he=(e,r)=>v(e,r,"session");var w=()=>{let[e,r]=_react.useState.call(void 0, !1);return _react.useEffect.call(void 0, ()=>r(!0),[]),e};var I=()=>{let e=_react.useRef.call(void 0, !0);return e.current?(e.current=!1,!0):e.current};var M=(e,r)=>{let t=I();_react.useEffect.call(void 0, ()=>{if(!t)return e()},r)};var _browserapi = require('@alessiofrittoli/web-utils/browser-api');var E=e=>{let[r,t]=_react.useState.call(void 0, _browserapi.getMediaMatches.call(void 0, e)),n=_react.useCallback.call(void 0, ()=>t(_browserapi.getMediaMatches.call(void 0, e)),[e]);return _react.useEffect.call(void 0, ()=>{let i=window.matchMedia(e);return n(),i.addEventListener("change",n),()=>{i.removeEventListener("change",n)}},[e,n]),r};var Je=(e={})=>{let r=w(),t=E("(prefers-color-scheme: dark)"),{initial:n=t,docClassNames:i=[]}=e,[a,o]=D("dark-mode",n),s=_nullishCoalesce(a, () => (t)),[l,u]=i,c=_react.useRef.call(void 0, {light:"",dark:""});return M(()=>{o(t)},[t,o]),_react.useEffect.call(void 0, ()=>{l&&document.documentElement.classList.toggle(l,s),u&&document.documentElement.classList.toggle(u,!s)},[s,l,u]),_react.useEffect.call(void 0, ()=>{document.head.querySelectorAll('meta[name="theme-color"]').forEach(p=>{let m=p.getAttribute("media"),f=p.getAttribute("content");if(f){if(!m||m==="(prefers-color-scheme: light)"){c.current.light=f;return}c.current.dark=f}})},[]),M(()=>{let p=c.current.dark,m=c.current.light;a&&!p||!a&&!m||document.head.querySelectorAll('meta[name="theme-color"]').forEach(f=>{f.setAttribute("content",a?p:m)})},[a]),{isDarkMode:r?s:!1,isDarkOS:r?t:!1,toggleDarkMode:_react.useCallback.call(void 0, ()=>o(p=>!p),[o]),enableDarkMode:_react.useCallback.call(void 0, ()=>o(!0),[o]),disableDarkMode:_react.useCallback.call(void 0, ()=>o(!1),[o])}};function _e(e,r){let{target:t,query:n,options:i,listener:a,onLoad:o,onCleanUp:s}=r;_react.useEffect.call(void 0, ()=>{let l=Array.isArray(e)?e:[e],u=_nullishCoalesce((n?window.matchMedia(n):t&&"current"in t?t.current:t), () => (window));if(u.addEventListener)return _optionalChain([o, 'optionalCall', _2 => _2()]),l.map(c=>{u.addEventListener(c,a,i)}),()=>{l.map(c=>{u.removeEventListener(c,a,i)}),_optionalChain([s, 'optionalCall', _3 => _3()])}},[e,t,n,i,a,o,s])}var _device = require('@alessiofrittoli/web-utils/device');var ot=()=>E(_device.portraitMediaQuery);var ne=["input","select","textarea","button","[href]",'[tabindex]:not([tabindex="-1"])'].join(", "),ut= exports.useFocusTrap =e=>{let[r,t]=_react.useState.call(void 0, !1),n=_react.useRef.call(void 0, null),i=_react.useCallback.call(void 0, o=>{n.current=document.activeElement;let s=o||_optionalChain([e, 'optionalAccess', _4 => _4.current])||!1;if(s)return t(s)},[e]),a=_react.useCallback.call(void 0, ()=>{_optionalChain([n, 'access', _5 => _5.current, 'optionalAccess', _6 => _6.focus, 'call', _7 => _7()]),t(!1)},[]);return _react.useEffect.call(void 0, ()=>{if(!r)return;let o=s=>{if(s.key!=="Tab")return;let l=Array.from(r.querySelectorAll(ne)),u=l.at(0),c=l.at(-1);if(!s.shiftKey){document.activeElement===c&&(s.preventDefault(),_optionalChain([u, 'optionalAccess', _8 => _8.focus, 'call', _9 => _9()]));return}document.activeElement===u&&(s.preventDefault(),_optionalChain([c, 'optionalAccess', _10 => _10.focus, 'call', _11 => _11()]))};return document.addEventListener("keydown",o),()=>{document.removeEventListener("keydown",o)}},[r]),[i,a]};var pt=(e,r={})=>{let{initial:t=!1,once:n,amount:i,margin:a,root:o,enable:s=!0,onStart:l}=r,u=_react.useRef.call(void 0, !0),[c,p]=_react.useState.call(void 0, t),[m,f]=_react.useState.call(void 0, s),T=_react.useMemo.call(void 0, ()=>{if(!m||typeof IntersectionObserver>"u")return;let F=i==="all"?1:i==="some"?.5:i;try{return new IntersectionObserver(async([y],g)=>{if(!y)return;let k=y.isIntersecting;try{if(await _optionalChain([l, 'optionalCall', _12 => _12(y,g)]),!u.current)return;p(k)}catch(Q){console.error(Q)}k&&n&&g.disconnect()},{root:o||void 0,rootMargin:a,threshold:F})}catch(y){console.error(y)}},[o,a,i,n,m,l]);return _react.useEffect.call(void 0, ()=>{if(u.current=!0,!(!m||!e.current||!T))return T.observe(e.current),()=>{u.current=!1,T.disconnect()}},[e,T,m]),{inView:c,enabled:m,observer:T,setInView:p,setEnabled:f}};var _dom = require('@alessiofrittoli/web-utils/dom');var vt=e=>{let r=_react.useCallback.call(void 0, ()=>_dom.blockScroll.call(void 0, _optionalChain([e, 'optionalAccess', _13 => _13.current])||void 0),[e]),t=_react.useCallback.call(void 0, ()=>_dom.restoreScroll.call(void 0, _optionalChain([e, 'optionalAccess', _14 => _14.current])||void 0),[e]);return[r,t]};var A=(e,r={})=>{let{delay:t=1,args:n}=r;_react.useEffect.call(void 0, ()=>{let i=setTimeout(e,t,...n||[]);return()=>clearTimeout(i)},[t,n,e])};var kt=(e,r=500)=>{let[t,n]=_react.useState.call(void 0, e),i=_react.useMemo.call(void 0, ()=>[e],[e]);return A(n,{delay:r,args:i}),t};function U(e,r={}){let{delay:t=1,args:n,autoplay:i=!0,runOnStart:a=!1,updateState:o=!1}=r,s=_react.useRef.call(void 0, void 0),[l,u]=_react.useState.call(void 0, i),c=_react.useCallback.call(void 0, ()=>s.current?(clearInterval(s.current),s.current=void 0,!0):!1,[]),p=_react.useCallback.call(void 0, ()=>{let f=c();return a&&(n?e(...n):e()),s.current=setInterval(e,t,...n||[]),!f&&o&&u(!0),s.current},[t,n,o,a,e,c]),m=_react.useCallback.call(void 0, ()=>{c()&&o&&u(!1)},[o,c]);return _react.useEffect.call(void 0, ()=>{if(i)return p(),m},[i,p,m]),o?{isActive:l,start:p,stop:m}:{start:p,stop:m}}var Ht=(e,r={})=>{let{delay:t=1,args:n}=r;_react.useEffect.call(void 0, ()=>{let i=setInterval(e,t,...n||[]);return()=>clearInterval(i)},[t,n,e])};function At(e,r={}){let{autoplay:t=!0}=r,n=U(e,{autoplay:!1,...r}),{start:i,stop:a}=n,o=_react.useCallback.call(void 0, ()=>document.hidden?a():i(),[i,a]),s=_react.useCallback.call(void 0, ()=>{if(document.addEventListener("visibilitychange",o),!document.hidden)return i()},[i,o]),l=_react.useCallback.call(void 0, ()=>{a(),document.removeEventListener("visibilitychange",o)},[a,o]);return _react.useEffect.call(void 0, ()=>{if(t)return s(),l},[t,s,l]),{...n,start:s,stop:l}}function $t(e,r={}){let{delay:t=1,args:n,autoplay:i=!0,runOnStart:a=!1,updateState:o=!1}=r,s=_react.useRef.call(void 0, void 0),[l,u]=_react.useState.call(void 0, i),c=_react.useCallback.call(void 0, ()=>s.current?(clearTimeout(s.current),s.current=void 0,!0):!1,[]),p=_react.useCallback.call(void 0, ()=>{let f=c();return a&&(n?e(...n):e()),s.current=setTimeout(()=>{if(s.current=void 0,o&&u(!1),n)return e(...n);e()},t),!f&&o&&u(!0),s.current},[t,n,o,a,e,c]),m=_react.useCallback.call(void 0, ()=>{c()&&o&&u(!1)},[o,c]);return _react.useEffect.call(void 0, ()=>{if(i)return p(),m},[i,p,m]),o?{isActive:l,start:p,stop:m}:{start:p,stop:m}}exports.useDarkMode = Je; exports.useDebounce = kt; exports.useEventListener = _e; exports.useFocusTrap = ut; exports.useInView = pt; exports.useInterval = U; exports.useIntervalWhenVisible = At; exports.useIsClient = w; exports.useIsFirstRender = I; exports.useIsPortrait = ot; exports.useLightInterval = Ht; exports.useLightTimeout = A; exports.useLocalStorage = D; exports.useMediaQuery = E; exports.useScrollBlock = vt; exports.useSessionStorage = he; exports.useStorage = v; exports.useTimeout = $t; exports.useUpdateEffect = M;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _react = require('react');var _LocalStorage = require('@alessiofrittoli/web-utils/storage/LocalStorage');var _SessionStorage = require('@alessiofrittoli/web-utils/storage/SessionStorage');var g=(e,o,t="local")=>{let s=_react.useCallback.call(void 0, ()=>_nullishCoalesce((t==="local"?_LocalStorage.LocalStorage:_SessionStorage.SessionStorage).get(e), () => (o)),[t,e,o]),[i,a]=_react.useState.call(void 0, o),r=_react.useCallback.call(void 0, n=>{a(u=>{let l=n instanceof Function?n(u):n;return(typeof window<"u"&&t==="local"?_LocalStorage.LocalStorage:_SessionStorage.SessionStorage).set(e,l),l})},[t,e]);return _react.useEffect.call(void 0, ()=>{a(s())},[s]),[i,r]};var K=(e,o)=>g(e,o,"local");var we=(e,o)=>g(e,o,"session");var O=()=>{let e=_react.useRef.call(void 0, !0);return e.current?(e.current=!1,!0):e.current};var $e=e=>{let o=O();_react.useEffect.call(void 0, ()=>{if(o)return e()},[])};var W=()=>{let[e,o]=_react.useState.call(void 0, !1);return _react.useEffect.call(void 0, ()=>o(!0),[]),e};var k=(e,o)=>{let t=O();_react.useEffect.call(void 0, ()=>{if(!t)return e()},o)};var _browserapi = require('@alessiofrittoli/web-utils/browser-api');function S(e,o={}){let{updateState:t=!0,onChange:s}=o,[i,a]=_react.useState.call(void 0, _browserapi.getMediaMatches.call(void 0, e)),r=_react.useCallback.call(void 0, ()=>{let n=_browserapi.getMediaMatches.call(void 0, e);t&&a(n),_optionalChain([s, 'optionalCall', _2 => _2(n)])},[e,t,s]);if(_react.useEffect.call(void 0, ()=>{let n=window.matchMedia(e),{matches:u}=n;return t&&a(u),_optionalChain([s, 'optionalCall', _3 => _3(u)]),n.addEventListener("change",r),()=>{n.removeEventListener("change",r)}},[e,t,s,r]),!!t)return i}var st=(e={})=>{let o=W(),t=S("(prefers-color-scheme: dark)"),{initial:s=t,docClassNames:i=[]}=e,[a,r]=K("dark-mode",s),n=_nullishCoalesce(a, () => (t)),[u,l]=i,c=_react.useRef.call(void 0, {light:"",dark:""});return k(()=>{r(t)},[t,r]),_react.useEffect.call(void 0, ()=>{u&&document.documentElement.classList.toggle(u,n),l&&document.documentElement.classList.toggle(l,!n)},[n,u,l]),_react.useEffect.call(void 0, ()=>{document.head.querySelectorAll('meta[name="theme-color"]').forEach(p=>{let d=p.getAttribute("media"),f=p.getAttribute("content");if(f){if(!d||d==="(prefers-color-scheme: light)"){c.current.light=f;return}c.current.dark=f}})},[]),k(()=>{let p=c.current.dark,d=c.current.light;a&&!p||!a&&!d||document.head.querySelectorAll('meta[name="theme-color"]').forEach(f=>{f.setAttribute("content",a?p:d)})},[a]),{isDarkMode:o?n:!1,isDarkOS:o?t:!1,toggleDarkMode:_react.useCallback.call(void 0, ()=>r(p=>!p),[r]),enableDarkMode:_react.useCallback.call(void 0, ()=>r(!0),[r]),disableDarkMode:_react.useCallback.call(void 0, ()=>r(!1),[r])}};function ct(e,o){let{target:t,query:s,options:i,listener:a,onLoad:r,onCleanUp:n}=o;_react.useEffect.call(void 0, ()=>{let u=Array.isArray(e)?e:[e],l=_nullishCoalesce((s?window.matchMedia(s):t&&"current"in t?t.current:t), () => (window));if(l.addEventListener)return _optionalChain([r, 'optionalCall', _4 => _4()]),u.map(c=>{l.addEventListener(c,a,i)}),()=>{u.map(c=>{l.removeEventListener(c,a,i)}),_optionalChain([n, 'optionalCall', _5 => _5()])}},[e,t,s,i,a,r,n])}var _device = require('@alessiofrittoli/web-utils/device');var ft=()=>S(_device.portraitMediaQuery);var ue=["input","select","textarea","button","[href]",'[tabindex]:not([tabindex="-1"])'].join(", "),vt= exports.useFocusTrap =e=>{let[o,t]=_react.useState.call(void 0, !1),s=_react.useRef.call(void 0, null),i=_react.useCallback.call(void 0, r=>{s.current=document.activeElement;let n=r||_optionalChain([e, 'optionalAccess', _6 => _6.current])||!1;if(n)return t(n)},[e]),a=_react.useCallback.call(void 0, ()=>{_optionalChain([s, 'access', _7 => _7.current, 'optionalAccess', _8 => _8.focus, 'call', _9 => _9()]),t(!1)},[]);return _react.useEffect.call(void 0, ()=>{if(!o)return;let r=n=>{if(n.key!=="Tab")return;let u=Array.from(o.querySelectorAll(ue)),l=u.at(0),c=u.at(-1);if(!n.shiftKey){document.activeElement===c&&(n.preventDefault(),_optionalChain([l, 'optionalAccess', _10 => _10.focus, 'call', _11 => _11()]));return}document.activeElement===l&&(n.preventDefault(),_optionalChain([c, 'optionalAccess', _12 => _12.focus, 'call', _13 => _13()]))};return document.addEventListener("keydown",r),()=>{document.removeEventListener("keydown",r)}},[o]),[i,a]};var Ot=(e,o={})=>{let{initial:t=!1,once:s,amount:i,margin:a,root:r,enable:n=!0}=o,{onEnter:u,onExit:l,onIntersect:c}=o,p=_react.useRef.call(void 0, !0),[d,f]=_react.useState.call(void 0, t),[E,q]=_react.useState.call(void 0, n),b=_react.useRef.call(void 0, null),x=_react.useRef.call(void 0, !1),v=_react.useMemo.call(void 0, ()=>{if(!E||typeof IntersectionObserver>"u")return;let N=i==="all"?1:i==="some"?.5:i;try{return new IntersectionObserver(async([y],M)=>{if(!y)return;let T=y.isIntersecting;try{if(x.current=!T&&!!b.current,T&&u&&await u({entry:y,observer:M}),x.current&&l&&await l({entry:y,observer:M}),c&&(T||!T&&b.current!=null)){let L={isEntering:T,isExiting:x.current};await c({entry:y,observer:M,...L})}if(b.current=T,!p.current)return;f(T)}catch(L){console.error(L)}T&&s&&M.disconnect()},{root:r||void 0,rootMargin:a,threshold:N})}catch(y){console.error(y)}},[r,a,i,s,E,u,l,c]);return _react.useEffect.call(void 0, ()=>{if(p.current=!0,!(!E||!e.current||!v))return v.observe(e.current),()=>{p.current=!1,v.disconnect()}},[e,v,E]),{inView:d,enabled:E,observer:v,isExiting:x.current,setInView:f,setEnabled:q}};var _dom = require('@alessiofrittoli/web-utils/dom');var ht=e=>{let o=_react.useCallback.call(void 0, ()=>_dom.blockScroll.call(void 0, _optionalChain([e, 'optionalAccess', _14 => _14.current])||void 0),[e]),t=_react.useCallback.call(void 0, ()=>_dom.restoreScroll.call(void 0, _optionalChain([e, 'optionalAccess', _15 => _15.current])||void 0),[e]);return[o,t]};var j=(e,o={})=>{let{delay:t=1,args:s}=o;_react.useEffect.call(void 0, ()=>{let i=setTimeout(e,t,...s||[]);return()=>clearTimeout(i)},[t,s,e])};var Kt=(e,o=500)=>{let[t,s]=_react.useState.call(void 0, e),i=_react.useMemo.call(void 0, ()=>[e],[e]);return j(s,{delay:o,args:i}),t};function B(e,o={}){let{delay:t=1,args:s,autoplay:i=!0,runOnStart:a=!1,updateState:r=!1}=o,n=_react.useRef.call(void 0, void 0),[u,l]=_react.useState.call(void 0, i),c=_react.useCallback.call(void 0, ()=>n.current?(clearInterval(n.current),n.current=void 0,!0):!1,[]),p=_react.useCallback.call(void 0, ()=>{let f=c();return a&&(s?e(...s):e()),n.current=setInterval(e,t,...s||[]),!f&&r&&l(!0),n.current},[t,s,r,a,e,c]),d=_react.useCallback.call(void 0, ()=>{c()&&r&&l(!1)},[r,c]);return _react.useEffect.call(void 0, ()=>{if(i)return p(),d},[i,p,d]),r?{isActive:u,start:p,stop:d}:{start:p,stop:d}}var jt=(e,o={})=>{let{delay:t=1,args:s}=o;_react.useEffect.call(void 0, ()=>{let i=setInterval(e,t,...s||[]);return()=>clearInterval(i)},[t,s,e])};function zt(e,o={}){let{autoplay:t=!0}=o,s=B(e,{autoplay:!1,...o}),{start:i,stop:a}=s,r=_react.useCallback.call(void 0, ()=>document.hidden?a():i(),[i,a]),n=_react.useCallback.call(void 0, ()=>{if(document.addEventListener("visibilitychange",r),!document.hidden)return i()},[i,r]),u=_react.useCallback.call(void 0, ()=>{a(),document.removeEventListener("visibilitychange",r)},[a,r]);return _react.useEffect.call(void 0, ()=>{if(t)return n(),u},[t,n,u]),{...s,start:n,stop:u}}function Yt(e,o={}){let{delay:t=1,args:s,autoplay:i=!0,runOnStart:a=!1,updateState:r=!1}=o,n=_react.useRef.call(void 0, void 0),[u,l]=_react.useState.call(void 0, i),c=_react.useCallback.call(void 0, ()=>n.current?(clearTimeout(n.current),n.current=void 0,!0):!1,[]),p=_react.useCallback.call(void 0, ()=>{let f=c();return a&&(s?e(...s):e()),n.current=setTimeout(()=>{if(n.current=void 0,r&&l(!1),s)return e(...s);e()},t),!f&&r&&l(!0),n.current},[t,s,r,a,e,c]),d=_react.useCallback.call(void 0, ()=>{c()&&r&&l(!1)},[r,c]);return _react.useEffect.call(void 0, ()=>{if(i)return p(),d},[i,p,d]),r?{isActive:u,start:p,stop:d}:{start:p,stop:d}}exports.useDarkMode = st; exports.useDebounce = Kt; exports.useEffectOnce = $e; exports.useEventListener = ct; exports.useFocusTrap = vt; exports.useInView = Ot; exports.useInterval = B; exports.useIntervalWhenVisible = zt; exports.useIsClient = W; exports.useIsFirstRender = O; exports.useIsPortrait = ft; exports.useLightInterval = jt; exports.useLightTimeout = j; exports.useLocalStorage = K; exports.useMediaQuery = S; exports.useScrollBlock = ht; exports.useSessionStorage = we; exports.useStorage = g; exports.useTimeout = Yt; exports.useUpdateEffect = k;

package/dist/index.mjs

@@ -1 +1 @@
-import{useCallback as R,useEffect as j,useState as B}from"react";import{LocalStorage as h}from"@alessiofrittoli/web-utils/storage/LocalStorage";import{SessionStorage as D}from"@alessiofrittoli/web-utils/storage/SessionStorage";var E=(e,r,t="local")=>{let n=R(()=>(t==="local"?h:D).get(e)??r,[t,e,r]),[i,a]=B(r),o=R(s=>{a(l=>{let u=s instanceof Function?s(l):s;return(typeof window<"u"&&t==="local"?h:D).set(e,u),u})},[t,e]);return j(()=>{a(n())},[n]),[i,o]};var w=(e,r)=>E(e,r,"local");var De=(e,r)=>E(e,r,"session");import{useCallback as S,useEffect as V,useRef as Y}from"react";import{useEffect as N,useState as q}from"react";var I=()=>{let[e,r]=q(!1);return N(()=>r(!0),[]),e};import{useRef as P}from"react";var H=()=>{let e=P(!0);return e.current?(e.current=!1,!0):e.current};import{useEffect as z}from"react";var x=(e,r)=>{let t=H();z(()=>{if(!t)return e()},r)};import{useCallback as G,useEffect as J,useState as X}from"react";import{getMediaMatches as C}from"@alessiofrittoli/web-utils/browser-api";var M=e=>{let[r,t]=X(C(e)),n=G(()=>t(C(e)),[e]);return J(()=>{let i=window.matchMedia(e);return n(),i.addEventListener("change",n),()=>{i.removeEventListener("change",n)}},[e,n]),r};var Xe=(e={})=>{let r=I(),t=M("(prefers-color-scheme: dark)"),{initial:n=t,docClassNames:i=[]}=e,[a,o]=w("dark-mode",n),s=a??t,[l,u]=i,c=Y({light:"",dark:""});return x(()=>{o(t)},[t,o]),V(()=>{l&&document.documentElement.classList.toggle(l,s),u&&document.documentElement.classList.toggle(u,!s)},[s,l,u]),V(()=>{document.head.querySelectorAll('meta[name="theme-color"]').forEach(p=>{let m=p.getAttribute("media"),T=p.getAttribute("content");if(T){if(!m||m==="(prefers-color-scheme: light)"){c.current.light=T;return}c.current.dark=T}})},[]),x(()=>{let p=c.current.dark,m=c.current.light;a&&!p||!a&&!m||document.head.querySelectorAll('meta[name="theme-color"]').forEach(T=>{T.setAttribute("content",a?p:m)})},[a]),{isDarkMode:r?s:!1,isDarkOS:r?t:!1,toggleDarkMode:S(()=>o(p=>!p),[o]),enableDarkMode:S(()=>o(!0),[o]),disableDarkMode:S(()=>o(!1),[o])}};import{useEffect as Z}from"react";function et(e,r){let{target:t,query:n,options:i,listener:a,onLoad:o,onCleanUp:s}=r;Z(()=>{let l=Array.isArray(e)?e:[e],u=(n?window.matchMedia(n):t&&"current"in t?t.current:t)??window;if(u.addEventListener)return o?.(),l.map(c=>{u.addEventListener(c,a,i)}),()=>{l.map(c=>{u.removeEventListener(c,a,i)}),s?.()}},[e,t,n,i,a,o,s])}import{portraitMediaQuery as _}from"@alessiofrittoli/web-utils/device";var st=()=>M(_);import{useCallback as K,useEffect as ee,useRef as te,useState as ne}from"react";var re=["input","select","textarea","button","[href]",'[tabindex]:not([tabindex="-1"])'].join(", "),ct=e=>{let[r,t]=ne(!1),n=te(null),i=K(o=>{n.current=document.activeElement;let s=o||e?.current||!1;if(s)return t(s)},[e]),a=K(()=>{n.current?.focus(),t(!1)},[]);return ee(()=>{if(!r)return;let o=s=>{if(s.key!=="Tab")return;let l=Array.from(r.querySelectorAll(re)),u=l.at(0),c=l.at(-1);if(!s.shiftKey){document.activeElement===c&&(s.preventDefault(),u?.focus());return}document.activeElement===u&&(s.preventDefault(),c?.focus())};return document.addEventListener("keydown",o),()=>{document.removeEventListener("keydown",o)}},[r]),[i,a]};import{useEffect as oe,useMemo as se,useRef as ie,useState as W}from"react";var dt=(e,r={})=>{let{initial:t=!1,once:n,amount:i,margin:a,root:o,enable:s=!0,onStart:l}=r,u=ie(!0),[c,p]=W(t),[m,T]=W(s),y=se(()=>{if(!m||typeof IntersectionObserver>"u")return;let Q=i==="all"?1:i==="some"?.5:i;try{return new IntersectionObserver(async([v],k)=>{if(!v)return;let O=v.isIntersecting;try{if(await l?.(v,k),!u.current)return;p(O)}catch($){console.error($)}O&&n&&k.disconnect()},{root:o||void 0,rootMargin:a,threshold:Q})}catch(v){console.error(v)}},[o,a,i,n,m,l]);return oe(()=>{if(u.current=!0,!(!m||!e.current||!y))return y.observe(e.current),()=>{u.current=!1,y.disconnect()}},[e,y,m]),{inView:c,enabled:m,observer:y,setInView:p,setEnabled:T}};import{useCallback as A}from"react";import{blockScroll as ae,restoreScroll as ue}from"@alessiofrittoli/web-utils/dom";var Et=e=>{let r=A(()=>ae(e?.current||void 0),[e]),t=A(()=>ue(e?.current||void 0),[e]);return[r,t]};import{useMemo as le,useState as me}from"react";import{useEffect as ce}from"react";var U=(e,r={})=>{let{delay:t=1,args:n}=r;ce(()=>{let i=setTimeout(e,t,...n||[]);return()=>clearTimeout(i)},[t,n,e])};var Ot=(e,r=500)=>{let[t,n]=me(e),i=le(()=>[e],[e]);return U(n,{delay:r,args:i}),t};import{useCallback as b,useEffect as pe,useRef as de,useState as fe}from"react";function F(e,r={}){let{delay:t=1,args:n,autoplay:i=!0,runOnStart:a=!1,updateState:o=!1}=r,s=de(void 0),[l,u]=fe(i),c=b(()=>s.current?(clearInterval(s.current),s.current=void 0,!0):!1,[]),p=b(()=>{let T=c();return a&&(n?e(...n):e()),s.current=setInterval(e,t,...n||[]),!T&&o&&u(!0),s.current},[t,n,o,a,e,c]),m=b(()=>{c()&&o&&u(!1)},[o,c]);return pe(()=>{if(i)return p(),m},[i,p,m]),o?{isActive:l,start:p,stop:m}:{start:p,stop:m}}import{useEffect as Te}from"react";var Ct=(e,r={})=>{let{delay:t=1,args:n}=r;Te(()=>{let i=setInterval(e,t,...n||[]);return()=>clearInterval(i)},[t,n,e])};import{useCallback as L,useEffect as ye}from"react";function Ut(e,r={}){let{autoplay:t=!0}=r,n=F(e,{autoplay:!1,...r}),{start:i,stop:a}=n,o=L(()=>document.hidden?a():i(),[i,a]),s=L(()=>{if(document.addEventListener("visibilitychange",o),!document.hidden)return i()},[i,o]),l=L(()=>{a(),document.removeEventListener("visibilitychange",o)},[a,o]);return ye(()=>{if(t)return s(),l},[t,s,l]),{...n,start:s,stop:l}}import{useCallback as g,useEffect as ve,useRef as Ee,useState as Me}from"react";function jt(e,r={}){let{delay:t=1,args:n,autoplay:i=!0,runOnStart:a=!1,updateState:o=!1}=r,s=Ee(void 0),[l,u]=Me(i),c=g(()=>s.current?(clearTimeout(s.current),s.current=void 0,!0):!1,[]),p=g(()=>{let T=c();return a&&(n?e(...n):e()),s.current=setTimeout(()=>{if(s.current=void 0,o&&u(!1),n)return e(...n);e()},t),!T&&o&&u(!0),s.current},[t,n,o,a,e,c]),m=g(()=>{c()&&o&&u(!1)},[o,c]);return ve(()=>{if(i)return p(),m},[i,p,m]),o?{isActive:l,start:p,stop:m}:{start:p,stop:m}}export{Xe as useDarkMode,Ot as useDebounce,et as useEventListener,ct as useFocusTrap,dt as useInView,F as useInterval,Ut as useIntervalWhenVisible,I as useIsClient,H as useIsFirstRender,st as useIsPortrait,Ct as useLightInterval,U as useLightTimeout,w as useLocalStorage,M as useMediaQuery,Et as useScrollBlock,De as useSessionStorage,E as useStorage,jt as useTimeout,x as useUpdateEffect};
+import{useCallback as w,useEffect as z,useState as G}from"react";import{LocalStorage as V}from"@alessiofrittoli/web-utils/storage/LocalStorage";import{SessionStorage as K}from"@alessiofrittoli/web-utils/storage/SessionStorage";var O=(e,o,t="local")=>{let s=w(()=>(t==="local"?V:K).get(e)??o,[t,e,o]),[i,a]=G(o),r=w(n=>{a(u=>{let l=n instanceof Function?n(u):n;return(typeof window<"u"&&t==="local"?V:K).set(e,l),l})},[t,e]);return z(()=>{a(s())},[s]),[i,r]};var W=(e,o)=>O(e,o,"local");var Ve=(e,o)=>O(e,o,"session");import{useCallback as R,useEffect as Q,useRef as re}from"react";import{useEffect as X}from"react";import{useRef as J}from"react";var S=()=>{let e=J(!0);return e.current?(e.current=!1,!0):e.current};var je=e=>{let o=S();X(()=>{if(o)return e()},[])};import{useEffect as Y,useState as Z}from"react";var U=()=>{let[e,o]=Z(!1);return Y(()=>o(!0),[]),e};import{useEffect as _}from"react";var h=(e,o)=>{let t=S();_(()=>{if(!t)return e()},o)};import{useCallback as ee,useEffect as te,useState as ne}from"react";import{getMediaMatches as A}from"@alessiofrittoli/web-utils/browser-api";function b(e,o={}){let{updateState:t=!0,onChange:s}=o,[i,a]=ne(A(e)),r=ee(()=>{let n=A(e);t&&a(n),s?.(n)},[e,t,s]);if(te(()=>{let n=window.matchMedia(e),{matches:u}=n;return t&&a(u),s?.(u),n.addEventListener("change",r),()=>{n.removeEventListener("change",r)}},[e,t,s,r]),!!t)return i}var it=(e={})=>{let o=U(),t=b("(prefers-color-scheme: dark)"),{initial:s=t,docClassNames:i=[]}=e,[a,r]=W("dark-mode",s),n=a??t,[u,l]=i,c=re({light:"",dark:""});return h(()=>{r(t)},[t,r]),Q(()=>{u&&document.documentElement.classList.toggle(u,n),l&&document.documentElement.classList.toggle(l,!n)},[n,u,l]),Q(()=>{document.head.querySelectorAll('meta[name="theme-color"]').forEach(p=>{let f=p.getAttribute("media"),T=p.getAttribute("content");if(T){if(!f||f==="(prefers-color-scheme: light)"){c.current.light=T;return}c.current.dark=T}})},[]),h(()=>{let p=c.current.dark,f=c.current.light;a&&!p||!a&&!f||document.head.querySelectorAll('meta[name="theme-color"]').forEach(T=>{T.setAttribute("content",a?p:f)})},[a]),{isDarkMode:o?n:!1,isDarkOS:o?t:!1,toggleDarkMode:R(()=>r(p=>!p),[r]),enableDarkMode:R(()=>r(!0),[r]),disableDarkMode:R(()=>r(!1),[r])}};import{useEffect as oe}from"react";function lt(e,o){let{target:t,query:s,options:i,listener:a,onLoad:r,onCleanUp:n}=o;oe(()=>{let u=Array.isArray(e)?e:[e],l=(s?window.matchMedia(s):t&&"current"in t?t.current:t)??window;if(l.addEventListener)return r?.(),u.map(c=>{l.addEventListener(c,a,i)}),()=>{u.map(c=>{l.removeEventListener(c,a,i)}),n?.()}},[e,t,s,i,a,r,n])}import{portraitMediaQuery as se}from"@alessiofrittoli/web-utils/device";var Tt=()=>b(se);import{useCallback as F,useEffect as ie,useRef as ae,useState as ue}from"react";var ce=["input","select","textarea","button","[href]",'[tabindex]:not([tabindex="-1"])'].join(", "),xt=e=>{let[o,t]=ue(!1),s=ae(null),i=F(r=>{s.current=document.activeElement;let n=r||e?.current||!1;if(n)return t(n)},[e]),a=F(()=>{s.current?.focus(),t(!1)},[]);return ie(()=>{if(!o)return;let r=n=>{if(n.key!=="Tab")return;let u=Array.from(o.querySelectorAll(ce)),l=u.at(0),c=u.at(-1);if(!n.shiftKey){document.activeElement===c&&(n.preventDefault(),l?.focus());return}document.activeElement===l&&(n.preventDefault(),c?.focus())};return document.addEventListener("keydown",r),()=>{document.removeEventListener("keydown",r)}},[o]),[i,a]};import{useEffect as le,useMemo as pe,useRef as I,useState as $}from"react";var St=(e,o={})=>{let{initial:t=!1,once:s,amount:i,margin:a,root:r,enable:n=!0}=o,{onEnter:u,onExit:l,onIntersect:c}=o,p=I(!0),[f,T]=$(t),[v,N]=$(n),L=I(null),M=I(!1),x=pe(()=>{if(!v||typeof IntersectionObserver>"u")return;let P=i==="all"?1:i==="some"?.5:i;try{return new IntersectionObserver(async([E],g)=>{if(!E)return;let y=E.isIntersecting;try{if(M.current=!y&&!!L.current,y&&u&&await u({entry:E,observer:g}),M.current&&l&&await l({entry:E,observer:g}),c&&(y||!y&&L.current!=null)){let k={isEntering:y,isExiting:M.current};await c({entry:E,observer:g,...k})}if(L.current=y,!p.current)return;T(y)}catch(k){console.error(k)}y&&s&&g.disconnect()},{root:r||void 0,rootMargin:a,threshold:P})}catch(E){console.error(E)}},[r,a,i,s,v,u,l,c]);return le(()=>{if(p.current=!0,!(!v||!e.current||!x))return x.observe(e.current),()=>{p.current=!1,x.disconnect()}},[e,x,v]),{inView:f,enabled:v,observer:x,isExiting:M.current,setInView:T,setEnabled:N}};import{useCallback as j}from"react";import{blockScroll as me,restoreScroll as de}from"@alessiofrittoli/web-utils/dom";var Rt=e=>{let o=j(()=>me(e?.current||void 0),[e]),t=j(()=>de(e?.current||void 0),[e]);return[o,t]};import{useMemo as Te,useState as ye}from"react";import{useEffect as fe}from"react";var B=(e,o={})=>{let{delay:t=1,args:s}=o;fe(()=>{let i=setTimeout(e,t,...s||[]);return()=>clearTimeout(i)},[t,s,e])};var Wt=(e,o=500)=>{let[t,s]=ye(e),i=Te(()=>[e],[e]);return B(s,{delay:o,args:i}),t};import{useCallback as H,useEffect as Ee,useRef as ve,useState as xe}from"react";function q(e,o={}){let{delay:t=1,args:s,autoplay:i=!0,runOnStart:a=!1,updateState:r=!1}=o,n=ve(void 0),[u,l]=xe(i),c=H(()=>n.current?(clearInterval(n.current),n.current=void 0,!0):!1,[]),p=H(()=>{let T=c();return a&&(s?e(...s):e()),n.current=setInterval(e,t,...s||[]),!T&&r&&l(!0),n.current},[t,s,r,a,e,c]),f=H(()=>{c()&&r&&l(!1)},[r,c]);return Ee(()=>{if(i)return p(),f},[i,p,f]),r?{isActive:u,start:p,stop:f}:{start:p,stop:f}}import{useEffect as Me}from"react";var Bt=(e,o={})=>{let{delay:t=1,args:s}=o;Me(()=>{let i=setInterval(e,t,...s||[]);return()=>clearInterval(i)},[t,s,e])};import{useCallback as C,useEffect as ge}from"react";function Gt(e,o={}){let{autoplay:t=!0}=o,s=q(e,{autoplay:!1,...o}),{start:i,stop:a}=s,r=C(()=>document.hidden?a():i(),[i,a]),n=C(()=>{if(document.addEventListener("visibilitychange",r),!document.hidden)return i()},[i,r]),u=C(()=>{a(),document.removeEventListener("visibilitychange",r)},[a,r]);return ge(()=>{if(t)return n(),u},[t,n,u]),{...s,start:n,stop:u}}import{useCallback as D,useEffect as Oe,useRef as Se,useState as be}from"react";function Zt(e,o={}){let{delay:t=1,args:s,autoplay:i=!0,runOnStart:a=!1,updateState:r=!1}=o,n=Se(void 0),[u,l]=be(i),c=D(()=>n.current?(clearTimeout(n.current),n.current=void 0,!0):!1,[]),p=D(()=>{let T=c();return a&&(s?e(...s):e()),n.current=setTimeout(()=>{if(n.current=void 0,r&&l(!1),s)return e(...s);e()},t),!T&&r&&l(!0),n.current},[t,s,r,a,e,c]),f=D(()=>{c()&&r&&l(!1)},[r,c]);return Oe(()=>{if(i)return p(),f},[i,p,f]),r?{isActive:u,start:p,stop:f}:{start:p,stop:f}}export{it as useDarkMode,Wt as useDebounce,je as useEffectOnce,lt as useEventListener,xt as useFocusTrap,St as useInView,q as useInterval,Gt as useIntervalWhenVisible,U as useIsClient,S as useIsFirstRender,Tt as useIsPortrait,Bt as useLightInterval,B as useLightTimeout,W as useLocalStorage,b as useMediaQuery,Rt as useScrollBlock,Ve as useSessionStorage,O as useStorage,Zt as useTimeout,h as useUpdateEffect};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@alessiofrittoli/react-hooks",
-	"version": "2.0.1",
+	"version": "3.1.0",
 	"description": "TypeScript React utility Hooks",
 	"author": {
 		"name": "Alessio Frittoli",