@mantine/hooks 9.0.2 → 9.1.1

package/esm/use-orientation/use-orientation.mjs

@@ -23,8 +23,14 @@ function useOrientation({ defaultAngle = 0, defaultType = "landscape-primary", g
 		});
 	};
 	useIsomorphicEffect(() => {
-		window.screen.orientation?.addEventListener("change", handleOrientationChange);
-		return () => window.screen.orientation?.removeEventListener("change", handleOrientationChange);
+		if (window.screen.orientation) {
+			setOrientation({
+				angle: window.screen.orientation.angle,
+				type: window.screen.orientation.type
+			});
+			window.screen.orientation.addEventListener("change", handleOrientationChange);
+			return () => window.screen.orientation?.removeEventListener("change", handleOrientationChange);
+		}
 	}, []);
 	return orientation;
 }

package/esm/use-orientation/use-orientation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-orientation.mjs","names":[],"sources":["../../src/use-orientation/use-orientation.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect';\n\nexport interface UseOrientationOptions {\n  /** Default angle value, used until the real can be retrieved\n   * (during server side rendering and before js executes on the page)\n   * If not provided, the default value is `0`\n   * */\n  defaultAngle?: number;\n\n  /** Default angle value, used until the real can be retrieved\n   * (during server side rendering and before js executes on the page)\n   * If not provided, the default value is `'landscape-primary'`\n   * */\n  defaultType?: OrientationType;\n\n  /** If true, the initial value will be resolved in useEffect (ssr safe)\n   *  If false, the initial value will be resolved in useLayoutEffect (ssr unsafe)\n   *  True by default.\n   */\n  getInitialValueInEffect?: boolean;\n}\n\nexport interface UseOrientationReturnType {\n  angle: number;\n  type: OrientationType;\n}\n\nfunction getInitialValue(\n  initialValue: UseOrientationReturnType,\n  getInitialValueInEffect: boolean\n): UseOrientationReturnType {\n  if (getInitialValueInEffect) {\n    return initialValue;\n  }\n\n  if (typeof window !== 'undefined' && 'screen' in window) {\n    return {\n      angle: window.screen.orientation?.angle ?? initialValue.angle,\n      type: window.screen.orientation?.type ?? initialValue.type,\n    };\n  }\n\n  return initialValue;\n}\n\nexport function useOrientation({\n  defaultAngle = 0,\n  defaultType = 'landscape-primary',\n  getInitialValueInEffect = true,\n}: UseOrientationOptions = {}): UseOrientationReturnType {\n  const [orientation, setOrientation] = useState<UseOrientationReturnType>(\n    getInitialValue(\n      {\n        angle: defaultAngle,\n        type: defaultType,\n      },\n      getInitialValueInEffect\n    )\n  );\n\n  const handleOrientationChange = (event: Event) => {\n    const target = event.currentTarget as ScreenOrientation;\n    setOrientation({ angle: target?.angle || 0, type: target?.type || 'landscape-primary' });\n  };\n\n  useIsomorphicEffect(() => {\n    window.screen.orientation?.addEventListener('change', handleOrientationChange);\n    return () => window.screen.orientation?.removeEventListener('change', handleOrientationChange);\n  }, []);\n\n  return orientation;\n}\n\nexport namespace useOrientation {\n  export type Options = UseOrientationOptions;\n  export type ReturnType = UseOrientationReturnType;\n}\n"],"mappings":";;;;AA4BA,SAAS,gBACP,cACA,yBAC0B;AAC1B,KAAI,wBACF,QAAO;AAGT,KAAI,OAAO,WAAW,eAAe,YAAY,OAC/C,QAAO;EACL,OAAO,OAAO,OAAO,aAAa,SAAS,aAAa;EACxD,MAAM,OAAO,OAAO,aAAa,QAAQ,aAAa;EACvD;AAGH,QAAO;;AAGT,SAAgB,eAAe,EAC7B,eAAe,GACf,cAAc,qBACd,0BAA0B,SACD,EAAE,EAA4B;CACvD,MAAM,CAAC,aAAa,kBAAkB,SACpC,gBACE;EACE,OAAO;EACP,MAAM;EACP,EACD,wBACD,CACF;CAED,MAAM,2BAA2B,UAAiB;EAChD,MAAM,SAAS,MAAM;AACrB,iBAAe;GAAE,OAAO,QAAQ,SAAS;GAAG,MAAM,QAAQ,QAAQ;GAAqB,CAAC;;AAG1F,2BAA0B;AACxB,SAAO,OAAO,aAAa,iBAAiB,UAAU,wBAAwB;AAC9E,eAAa,OAAO,OAAO,aAAa,oBAAoB,UAAU,wBAAwB;IAC7F,EAAE,CAAC;AAEN,QAAO"}
+{"version":3,"file":"use-orientation.mjs","names":[],"sources":["../../src/use-orientation/use-orientation.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect';\n\nexport interface UseOrientationOptions {\n  /** Default angle value, used until the real can be retrieved\n   * (during server side rendering and before js executes on the page)\n   * If not provided, the default value is `0`\n   * */\n  defaultAngle?: number;\n\n  /** Default angle value, used until the real can be retrieved\n   * (during server side rendering and before js executes on the page)\n   * If not provided, the default value is `'landscape-primary'`\n   * */\n  defaultType?: OrientationType;\n\n  /** If true, the initial value will be resolved in useEffect (ssr safe)\n   *  If false, the initial value will be resolved in useLayoutEffect (ssr unsafe)\n   *  True by default.\n   */\n  getInitialValueInEffect?: boolean;\n}\n\nexport interface UseOrientationReturnType {\n  angle: number;\n  type: OrientationType;\n}\n\nfunction getInitialValue(\n  initialValue: UseOrientationReturnType,\n  getInitialValueInEffect: boolean\n): UseOrientationReturnType {\n  if (getInitialValueInEffect) {\n    return initialValue;\n  }\n\n  if (typeof window !== 'undefined' && 'screen' in window) {\n    return {\n      angle: window.screen.orientation?.angle ?? initialValue.angle,\n      type: window.screen.orientation?.type ?? initialValue.type,\n    };\n  }\n\n  return initialValue;\n}\n\nexport function useOrientation({\n  defaultAngle = 0,\n  defaultType = 'landscape-primary',\n  getInitialValueInEffect = true,\n}: UseOrientationOptions = {}): UseOrientationReturnType {\n  const [orientation, setOrientation] = useState<UseOrientationReturnType>(\n    getInitialValue(\n      {\n        angle: defaultAngle,\n        type: defaultType,\n      },\n      getInitialValueInEffect\n    )\n  );\n\n  const handleOrientationChange = (event: Event) => {\n    const target = event.currentTarget as ScreenOrientation;\n    setOrientation({ angle: target?.angle || 0, type: target?.type || 'landscape-primary' });\n  };\n\n  useIsomorphicEffect(() => {\n    if (window.screen.orientation) {\n      setOrientation({\n        angle: window.screen.orientation.angle,\n        type: window.screen.orientation.type,\n      });\n      window.screen.orientation.addEventListener('change', handleOrientationChange);\n      return () =>\n        window.screen.orientation?.removeEventListener('change', handleOrientationChange);\n    }\n\n    return undefined;\n  }, []);\n\n  return orientation;\n}\n\nexport namespace useOrientation {\n  export type Options = UseOrientationOptions;\n  export type ReturnType = UseOrientationReturnType;\n}\n"],"mappings":";;;;AA4BA,SAAS,gBACP,cACA,yBAC0B;AAC1B,KAAI,wBACF,QAAO;AAGT,KAAI,OAAO,WAAW,eAAe,YAAY,OAC/C,QAAO;EACL,OAAO,OAAO,OAAO,aAAa,SAAS,aAAa;EACxD,MAAM,OAAO,OAAO,aAAa,QAAQ,aAAa;EACvD;AAGH,QAAO;;AAGT,SAAgB,eAAe,EAC7B,eAAe,GACf,cAAc,qBACd,0BAA0B,SACD,EAAE,EAA4B;CACvD,MAAM,CAAC,aAAa,kBAAkB,SACpC,gBACE;EACE,OAAO;EACP,MAAM;EACP,EACD,wBACD,CACF;CAED,MAAM,2BAA2B,UAAiB;EAChD,MAAM,SAAS,MAAM;AACrB,iBAAe;GAAE,OAAO,QAAQ,SAAS;GAAG,MAAM,QAAQ,QAAQ;GAAqB,CAAC;;AAG1F,2BAA0B;AACxB,MAAI,OAAO,OAAO,aAAa;AAC7B,kBAAe;IACb,OAAO,OAAO,OAAO,YAAY;IACjC,MAAM,OAAO,OAAO,YAAY;IACjC,CAAC;AACF,UAAO,OAAO,YAAY,iBAAiB,UAAU,wBAAwB;AAC7E,gBACE,OAAO,OAAO,aAAa,oBAAoB,UAAU,wBAAwB;;IAIpF,EAAE,CAAC;AAEN,QAAO"}

package/esm/use-os/use-os.mjs

@@ -27,8 +27,8 @@ function getOS() {
 	if (isMacOS(userAgent)) return "macos";
 	if (isWindows(userAgent)) return "windows";
 	if (isAndroid(userAgent)) return "android";
-	if (isLinux(userAgent)) return "linux";
 	if (isChromeOS(userAgent)) return "chromeos";
+	if (isLinux(userAgent)) return "linux";
 	return "undetermined";
 }
 function useOs(options = { getValueInEffect: true }) {

package/esm/use-os/use-os.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-os.mjs","names":[],"sources":["../../src/use-os/use-os.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect';\n\nexport type UseOSReturnValue =\n  | 'undetermined'\n  | 'macos'\n  | 'ios'\n  | 'windows'\n  | 'android'\n  | 'linux'\n  | 'chromeos';\n\nfunction isMacOS(userAgent: string): boolean {\n  const macosPattern = /(Macintosh)|(MacIntel)|(MacPPC)|(Mac68K)/i;\n\n  return macosPattern.test(userAgent);\n}\n\nfunction isIOS(userAgent: string): boolean {\n  const iosPattern = /(iPhone)|(iPad)|(iPod)/i;\n\n  return iosPattern.test(userAgent);\n}\n\nfunction isWindows(userAgent: string): boolean {\n  const windowsPattern = /(Win32)|(Win64)|(Windows)|(WinCE)/i;\n\n  return windowsPattern.test(userAgent);\n}\n\nfunction isAndroid(userAgent: string): boolean {\n  const androidPattern = /Android/i;\n\n  return androidPattern.test(userAgent);\n}\n\nfunction isLinux(userAgent: string): boolean {\n  const linuxPattern = /Linux/i;\n\n  return linuxPattern.test(userAgent);\n}\n\nfunction isChromeOS(userAgent: string): boolean {\n  const chromePattern = /CrOS/i;\n  return chromePattern.test(userAgent);\n}\n\nfunction getOS(): UseOSReturnValue {\n  if (typeof window === 'undefined') {\n    return 'undetermined';\n  }\n\n  const { userAgent } = window.navigator;\n\n  if (isIOS(userAgent) || (isMacOS(userAgent) && 'ontouchend' in document)) {\n    return 'ios';\n  }\n  if (isMacOS(userAgent)) {\n    return 'macos';\n  }\n  if (isWindows(userAgent)) {\n    return 'windows';\n  }\n  if (isAndroid(userAgent)) {\n    return 'android';\n  }\n  if (isLinux(userAgent)) {\n    return 'linux';\n  }\n  if (isChromeOS(userAgent)) {\n    return 'chromeos';\n  }\n\n  return 'undetermined';\n}\n\nexport interface UseOsOptions {\n  getValueInEffect: boolean;\n}\n\nexport function useOs(options: UseOsOptions = { getValueInEffect: true }): UseOSReturnValue {\n  const [value, setValue] = useState<UseOSReturnValue>(\n    options.getValueInEffect ? 'undetermined' : getOS()\n  );\n\n  useIsomorphicEffect(() => {\n    if (options.getValueInEffect) {\n      setValue(getOS);\n    }\n  }, []);\n\n  return value;\n}\n\nexport namespace useOs {\n  export type Options = UseOsOptions;\n  export type ReturnValue = UseOSReturnValue;\n}\n"],"mappings":";;;;AAYA,SAAS,QAAQ,WAA4B;AAG3C,QAFqB,4CAED,KAAK,UAAU;;AAGrC,SAAS,MAAM,WAA4B;AAGzC,QAFmB,0BAED,KAAK,UAAU;;AAGnC,SAAS,UAAU,WAA4B;AAG7C,QAFuB,qCAED,KAAK,UAAU;;AAGvC,SAAS,UAAU,WAA4B;AAG7C,QAFuB,WAED,KAAK,UAAU;;AAGvC,SAAS,QAAQ,WAA4B;AAG3C,QAFqB,SAED,KAAK,UAAU;;AAGrC,SAAS,WAAW,WAA4B;AAE9C,QADsB,QACD,KAAK,UAAU;;AAGtC,SAAS,QAA0B;AACjC,KAAI,OAAO,WAAW,YACpB,QAAO;CAGT,MAAM,EAAE,cAAc,OAAO;AAE7B,KAAI,MAAM,UAAU,IAAK,QAAQ,UAAU,IAAI,gBAAgB,SAC7D,QAAO;AAET,KAAI,QAAQ,UAAU,CACpB,QAAO;AAET,KAAI,UAAU,UAAU,CACtB,QAAO;AAET,KAAI,UAAU,UAAU,CACtB,QAAO;AAET,KAAI,QAAQ,UAAU,CACpB,QAAO;AAET,KAAI,WAAW,UAAU,CACvB,QAAO;AAGT,QAAO;;AAOT,SAAgB,MAAM,UAAwB,EAAE,kBAAkB,MAAM,EAAoB;CAC1F,MAAM,CAAC,OAAO,YAAY,SACxB,QAAQ,mBAAmB,iBAAiB,OAAO,CACpD;AAED,2BAA0B;AACxB,MAAI,QAAQ,iBACV,UAAS,MAAM;IAEhB,EAAE,CAAC;AAEN,QAAO"}
+{"version":3,"file":"use-os.mjs","names":[],"sources":["../../src/use-os/use-os.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect';\n\nexport type UseOSReturnValue =\n  | 'undetermined'\n  | 'macos'\n  | 'ios'\n  | 'windows'\n  | 'android'\n  | 'linux'\n  | 'chromeos';\n\nfunction isMacOS(userAgent: string): boolean {\n  const macosPattern = /(Macintosh)|(MacIntel)|(MacPPC)|(Mac68K)/i;\n\n  return macosPattern.test(userAgent);\n}\n\nfunction isIOS(userAgent: string): boolean {\n  const iosPattern = /(iPhone)|(iPad)|(iPod)/i;\n\n  return iosPattern.test(userAgent);\n}\n\nfunction isWindows(userAgent: string): boolean {\n  const windowsPattern = /(Win32)|(Win64)|(Windows)|(WinCE)/i;\n\n  return windowsPattern.test(userAgent);\n}\n\nfunction isAndroid(userAgent: string): boolean {\n  const androidPattern = /Android/i;\n\n  return androidPattern.test(userAgent);\n}\n\nfunction isLinux(userAgent: string): boolean {\n  const linuxPattern = /Linux/i;\n\n  return linuxPattern.test(userAgent);\n}\n\nfunction isChromeOS(userAgent: string): boolean {\n  const chromePattern = /CrOS/i;\n  return chromePattern.test(userAgent);\n}\n\nfunction getOS(): UseOSReturnValue {\n  if (typeof window === 'undefined') {\n    return 'undetermined';\n  }\n\n  const { userAgent } = window.navigator;\n\n  if (isIOS(userAgent) || (isMacOS(userAgent) && 'ontouchend' in document)) {\n    return 'ios';\n  }\n  if (isMacOS(userAgent)) {\n    return 'macos';\n  }\n  if (isWindows(userAgent)) {\n    return 'windows';\n  }\n  if (isAndroid(userAgent)) {\n    return 'android';\n  }\n  if (isChromeOS(userAgent)) {\n    return 'chromeos';\n  }\n  if (isLinux(userAgent)) {\n    return 'linux';\n  }\n\n  return 'undetermined';\n}\n\nexport interface UseOsOptions {\n  getValueInEffect: boolean;\n}\n\nexport function useOs(options: UseOsOptions = { getValueInEffect: true }): UseOSReturnValue {\n  const [value, setValue] = useState<UseOSReturnValue>(\n    options.getValueInEffect ? 'undetermined' : getOS()\n  );\n\n  useIsomorphicEffect(() => {\n    if (options.getValueInEffect) {\n      setValue(getOS);\n    }\n  }, []);\n\n  return value;\n}\n\nexport namespace useOs {\n  export type Options = UseOsOptions;\n  export type ReturnValue = UseOSReturnValue;\n}\n"],"mappings":";;;;AAYA,SAAS,QAAQ,WAA4B;AAG3C,QAFqB,4CAED,KAAK,UAAU;;AAGrC,SAAS,MAAM,WAA4B;AAGzC,QAFmB,0BAED,KAAK,UAAU;;AAGnC,SAAS,UAAU,WAA4B;AAG7C,QAFuB,qCAED,KAAK,UAAU;;AAGvC,SAAS,UAAU,WAA4B;AAG7C,QAFuB,WAED,KAAK,UAAU;;AAGvC,SAAS,QAAQ,WAA4B;AAG3C,QAFqB,SAED,KAAK,UAAU;;AAGrC,SAAS,WAAW,WAA4B;AAE9C,QADsB,QACD,KAAK,UAAU;;AAGtC,SAAS,QAA0B;AACjC,KAAI,OAAO,WAAW,YACpB,QAAO;CAGT,MAAM,EAAE,cAAc,OAAO;AAE7B,KAAI,MAAM,UAAU,IAAK,QAAQ,UAAU,IAAI,gBAAgB,SAC7D,QAAO;AAET,KAAI,QAAQ,UAAU,CACpB,QAAO;AAET,KAAI,UAAU,UAAU,CACtB,QAAO;AAET,KAAI,UAAU,UAAU,CACtB,QAAO;AAET,KAAI,WAAW,UAAU,CACvB,QAAO;AAET,KAAI,QAAQ,UAAU,CACpB,QAAO;AAGT,QAAO;;AAOT,SAAgB,MAAM,UAAwB,EAAE,kBAAkB,MAAM,EAAoB;CAC1F,MAAM,CAAC,OAAO,YAAY,SACxB,QAAQ,mBAAmB,iBAAiB,OAAO,CACpD;AAED,2BAA0B;AACxB,MAAI,QAAQ,iBACV,UAAS,MAAM;IAEhB,EAAE,CAAC;AAEN,QAAO"}

package/esm/use-radial-move/use-radial-move.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { clamp } from "../utils/clamp/clamp.mjs";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useState } from "react";
 //#region packages/@mantine/hooks/src/use-radial-move/use-radial-move.ts
 function radiansToDegrees(radians) {
 	return radians * (180 / Math.PI);
@@ -28,11 +28,7 @@ function normalizeRadialValue(degree, step) {
 	return toFixed(high >= clamped / step ? high * step === 360 ? 0 : high * step : low * step, getDigitsAfterDot(step));
 }
 function useRadialMove(onChange, { step = .01, onChangeEnd, onScrubStart, onScrubEnd } = {}) {
-	const mounted = useRef(false);
 	const [active, setActive] = useState(false);
-	useEffect(() => {
-		mounted.current = true;
-	}, []);
 	return {
 		ref: useCallback((node) => {
 			const update = (event, done = false) => {
@@ -90,6 +86,10 @@ function useRadialMove(onChange, { step = .01, onChangeEnd, onScrubStart, onScru
 					node.removeEventListener("mousedown", onMouseDown);
 					node.removeEventListener("touchstart", handleTouchStart);
 				}
+				document.removeEventListener("mousemove", handleMouseMove, false);
+				document.removeEventListener("mouseup", handleMouseUp, false);
+				document.removeEventListener("touchmove", handleTouchMove, false);
+				document.removeEventListener("touchend", handleTouchEnd, false);
 			};
 		}, [onChange]),
 		active

package/esm/use-radial-move/use-radial-move.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-radial-move.mjs","names":[],"sources":["../../src/use-radial-move/use-radial-move.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { clamp } from '../utils';\n\nfunction radiansToDegrees(radians: number) {\n  return radians * (180 / Math.PI);\n}\n\nfunction getElementCenter(element: HTMLElement) {\n  const rect = element.getBoundingClientRect();\n  return [rect.left + rect.width / 2, rect.top + rect.height / 2];\n}\n\nfunction getAngle(coordinates: [number, number], element: HTMLElement) {\n  const center = getElementCenter(element);\n  const x = coordinates[0] - center[0];\n  const y = coordinates[1] - center[1];\n  const deg = radiansToDegrees(Math.atan2(x, y)) + 180;\n  return 360 - deg;\n}\n\nfunction toFixed(value: number, digits: number) {\n  return parseFloat(value.toFixed(digits));\n}\n\nfunction getDigitsAfterDot(value: number) {\n  return value.toString().split('.')[1]?.length || 0;\n}\n\nexport function normalizeRadialValue(degree: number, step: number) {\n  const clamped = clamp(degree, 0, 360);\n  const high = Math.ceil(clamped / step);\n  const low = Math.round(clamped / step);\n  return toFixed(\n    high >= clamped / step ? (high * step === 360 ? 0 : high * step) : low * step,\n    getDigitsAfterDot(step)\n  );\n}\n\nexport interface UseRadialMoveOptions {\n  /** Number by which value is incremented/decremented with mouse and touch events, `0.01` by default */\n  step?: number;\n\n  /** Called in `onMouseUp` and `onTouchEnd` events with the current value */\n  onChangeEnd?: (value: number) => void;\n\n  /** Called in `onMouseDown` and `onTouchStart` events */\n  onScrubStart?: () => void;\n\n  /** Called in `onMouseUp` and `onTouchEnd` events */\n  onScrubEnd?: () => void;\n}\n\nexport interface UseRadialMoveReturnValue<T extends HTMLElement = any> {\n  /** Ref to be passed to the element that should be used for radial move */\n  ref: React.RefCallback<T | null>;\n\n  /** Indicates whether the radial move is active */\n  active: boolean;\n}\n\nexport function useRadialMove<T extends HTMLElement = any>(\n  onChange: (value: number) => void,\n  { step = 0.01, onChangeEnd, onScrubStart, onScrubEnd }: UseRadialMoveOptions = {}\n): UseRadialMoveReturnValue<T> {\n  const mounted = useRef<boolean>(false);\n  const [active, setActive] = useState(false);\n\n  useEffect(() => {\n    mounted.current = true;\n  }, []);\n\n  const refCallback: React.RefCallback<T | null> = useCallback(\n    (node) => {\n      const update = (event: MouseEvent, done = false) => {\n        if (node) {\n          node.style.userSelect = 'none';\n          const deg = getAngle([event.clientX, event.clientY], node);\n          const newValue = normalizeRadialValue(deg, step || 1);\n\n          onChange(newValue);\n          done && onChangeEnd?.(newValue);\n        }\n      };\n\n      const beginTracking = () => {\n        onScrubStart?.();\n        setActive(true);\n        document.addEventListener('mousemove', handleMouseMove, false);\n        document.addEventListener('mouseup', handleMouseUp, false);\n        document.addEventListener('touchmove', handleTouchMove, { passive: false });\n        document.addEventListener('touchend', handleTouchEnd, false);\n      };\n\n      const endTracking = () => {\n        onScrubEnd?.();\n        setActive(false);\n        document.removeEventListener('mousemove', handleMouseMove, false);\n        document.removeEventListener('mouseup', handleMouseUp, false);\n        document.removeEventListener('touchmove', handleTouchMove, false);\n        document.removeEventListener('touchend', handleTouchEnd, false);\n      };\n\n      const onMouseDown = (event: MouseEvent) => {\n        beginTracking();\n        update(event);\n      };\n\n      const handleMouseMove = (event: MouseEvent) => {\n        update(event);\n      };\n\n      const handleMouseUp = (event: MouseEvent) => {\n        update(event, true);\n        endTracking();\n      };\n\n      const handleTouchMove = (event: TouchEvent) => {\n        event.preventDefault();\n        update(event.touches[0] as any);\n      };\n\n      const handleTouchEnd = (event: TouchEvent) => {\n        update(event.changedTouches[0] as any, true);\n        endTracking();\n      };\n\n      const handleTouchStart = (event: TouchEvent) => {\n        event.preventDefault();\n        beginTracking();\n        update(event.touches[0] as any);\n      };\n\n      node?.addEventListener('mousedown', onMouseDown);\n      node?.addEventListener('touchstart', handleTouchStart, { passive: false });\n\n      return () => {\n        if (node) {\n          node.removeEventListener('mousedown', onMouseDown);\n          node.removeEventListener('touchstart', handleTouchStart);\n        }\n      };\n    },\n    [onChange]\n  );\n\n  return { ref: refCallback, active };\n}\n\nexport namespace useRadialMove {\n  export type Options = UseRadialMoveOptions;\n  export type ReturnValue<T extends HTMLElement> = UseRadialMoveReturnValue<T>;\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-radial-move.mjs","names":[],"sources":["../../src/use-radial-move/use-radial-move.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { clamp } from '../utils';\n\nfunction radiansToDegrees(radians: number) {\n  return radians * (180 / Math.PI);\n}\n\nfunction getElementCenter(element: HTMLElement) {\n  const rect = element.getBoundingClientRect();\n  return [rect.left + rect.width / 2, rect.top + rect.height / 2];\n}\n\nfunction getAngle(coordinates: [number, number], element: HTMLElement) {\n  const center = getElementCenter(element);\n  const x = coordinates[0] - center[0];\n  const y = coordinates[1] - center[1];\n  const deg = radiansToDegrees(Math.atan2(x, y)) + 180;\n  return 360 - deg;\n}\n\nfunction toFixed(value: number, digits: number) {\n  return parseFloat(value.toFixed(digits));\n}\n\nfunction getDigitsAfterDot(value: number) {\n  return value.toString().split('.')[1]?.length || 0;\n}\n\nexport function normalizeRadialValue(degree: number, step: number) {\n  const clamped = clamp(degree, 0, 360);\n  const high = Math.ceil(clamped / step);\n  const low = Math.round(clamped / step);\n  return toFixed(\n    high >= clamped / step ? (high * step === 360 ? 0 : high * step) : low * step,\n    getDigitsAfterDot(step)\n  );\n}\n\nexport interface UseRadialMoveOptions {\n  /** Number by which value is incremented/decremented with mouse and touch events, `0.01` by default */\n  step?: number;\n\n  /** Called in `onMouseUp` and `onTouchEnd` events with the current value */\n  onChangeEnd?: (value: number) => void;\n\n  /** Called in `onMouseDown` and `onTouchStart` events */\n  onScrubStart?: () => void;\n\n  /** Called in `onMouseUp` and `onTouchEnd` events */\n  onScrubEnd?: () => void;\n}\n\nexport interface UseRadialMoveReturnValue<T extends HTMLElement = any> {\n  /** Ref to be passed to the element that should be used for radial move */\n  ref: React.RefCallback<T | null>;\n\n  /** Indicates whether the radial move is active */\n  active: boolean;\n}\n\nexport function useRadialMove<T extends HTMLElement = any>(\n  onChange: (value: number) => void,\n  { step = 0.01, onChangeEnd, onScrubStart, onScrubEnd }: UseRadialMoveOptions = {}\n): UseRadialMoveReturnValue<T> {\n  const [active, setActive] = useState(false);\n\n  const refCallback: React.RefCallback<T | null> = useCallback(\n    (node) => {\n      const update = (event: MouseEvent, done = false) => {\n        if (node) {\n          node.style.userSelect = 'none';\n          const deg = getAngle([event.clientX, event.clientY], node);\n          const newValue = normalizeRadialValue(deg, step || 1);\n\n          onChange(newValue);\n          done && onChangeEnd?.(newValue);\n        }\n      };\n\n      const beginTracking = () => {\n        onScrubStart?.();\n        setActive(true);\n        document.addEventListener('mousemove', handleMouseMove, false);\n        document.addEventListener('mouseup', handleMouseUp, false);\n        document.addEventListener('touchmove', handleTouchMove, { passive: false });\n        document.addEventListener('touchend', handleTouchEnd, false);\n      };\n\n      const endTracking = () => {\n        onScrubEnd?.();\n        setActive(false);\n        document.removeEventListener('mousemove', handleMouseMove, false);\n        document.removeEventListener('mouseup', handleMouseUp, false);\n        document.removeEventListener('touchmove', handleTouchMove, false);\n        document.removeEventListener('touchend', handleTouchEnd, false);\n      };\n\n      const onMouseDown = (event: MouseEvent) => {\n        beginTracking();\n        update(event);\n      };\n\n      const handleMouseMove = (event: MouseEvent) => {\n        update(event);\n      };\n\n      const handleMouseUp = (event: MouseEvent) => {\n        update(event, true);\n        endTracking();\n      };\n\n      const handleTouchMove = (event: TouchEvent) => {\n        event.preventDefault();\n        update(event.touches[0] as any);\n      };\n\n      const handleTouchEnd = (event: TouchEvent) => {\n        update(event.changedTouches[0] as any, true);\n        endTracking();\n      };\n\n      const handleTouchStart = (event: TouchEvent) => {\n        event.preventDefault();\n        beginTracking();\n        update(event.touches[0] as any);\n      };\n\n      node?.addEventListener('mousedown', onMouseDown);\n      node?.addEventListener('touchstart', handleTouchStart, { passive: false });\n\n      return () => {\n        if (node) {\n          node.removeEventListener('mousedown', onMouseDown);\n          node.removeEventListener('touchstart', handleTouchStart);\n        }\n        document.removeEventListener('mousemove', handleMouseMove, false);\n        document.removeEventListener('mouseup', handleMouseUp, false);\n        document.removeEventListener('touchmove', handleTouchMove, false);\n        document.removeEventListener('touchend', handleTouchEnd, false);\n      };\n    },\n    [onChange]\n  );\n\n  return { ref: refCallback, active };\n}\n\nexport namespace useRadialMove {\n  export type Options = UseRadialMoveOptions;\n  export type ReturnValue<T extends HTMLElement> = UseRadialMoveReturnValue<T>;\n}\n"],"mappings":"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"}

package/esm/use-roving-index/use-roving-index.mjs

@@ -0,0 +1,200 @@
+"use client";
+import { useUncontrolled } from "../use-uncontrolled/use-uncontrolled.mjs";
+import { useCallback, useEffect, useRef } from "react";
+//#region packages/@mantine/hooks/src/use-roving-index/use-roving-index.ts
+function findNextEnabled(current, total, isItemDisabled, loop) {
+	for (let i = current + 1; i < total; i += 1) if (!isItemDisabled(i)) return i;
+	if (loop) {
+		for (let i = 0; i < current; i += 1) if (!isItemDisabled(i)) return i;
+	}
+	return current;
+}
+function findPreviousEnabled(current, total, isItemDisabled, loop) {
+	for (let i = current - 1; i >= 0; i -= 1) if (!isItemDisabled(i)) return i;
+	if (loop) {
+		for (let i = total - 1; i > current; i -= 1) if (!isItemDisabled(i)) return i;
+	}
+	return current;
+}
+function findFirstEnabled(total, isItemDisabled) {
+	for (let i = 0; i < total; i += 1) if (!isItemDisabled(i)) return i;
+	return 0;
+}
+function findLastEnabled(total, isItemDisabled) {
+	for (let i = total - 1; i >= 0; i -= 1) if (!isItemDisabled(i)) return i;
+	return 0;
+}
+const defaultIsItemDisabled = () => false;
+function useRovingIndex(input) {
+	const { total, orientation = "horizontal", loop = true, dir = "ltr", activateOnFocus = false, columns, focusedIndex, initialIndex, onFocusChange, isItemDisabled = defaultIsItemDisabled } = input;
+	const itemRefs = useRef(/* @__PURE__ */ new Map());
+	const isGrid = typeof columns === "number" && columns > 0;
+	const [activeIndex, setActiveIndex] = useUncontrolled({
+		value: focusedIndex,
+		defaultValue: initialIndex !== void 0 ? initialIndex : findFirstEnabled(total, isItemDisabled),
+		finalValue: 0,
+		onChange: onFocusChange
+	});
+	useEffect(() => {
+		if (total === 0) return;
+		if (activeIndex >= total) setActiveIndex(findLastEnabled(total, isItemDisabled));
+		else if (isItemDisabled(activeIndex)) setActiveIndex(findFirstEnabled(total, isItemDisabled));
+	}, [
+		total,
+		activeIndex,
+		isItemDisabled
+	]);
+	const focusItem = useCallback((index) => {
+		setActiveIndex(index);
+		const element = itemRefs.current.get(index);
+		if (element) {
+			element.focus();
+			if (activateOnFocus) element.click();
+		}
+	}, [activateOnFocus, setActiveIndex]);
+	const handleGridKeyDown = useCallback((event, currentIndex) => {
+		const row = Math.floor(currentIndex / columns);
+		const col = currentIndex % columns;
+		const totalRows = Math.ceil(total / columns);
+		let nextIndex = null;
+		const isRtl = dir === "rtl";
+		switch (event.key) {
+			case "ArrowRight": {
+				const targetCol = isRtl ? col - 1 : col + 1;
+				if (targetCol >= 0 && targetCol < columns && row * columns + targetCol < total) {
+					const candidate = row * columns + targetCol;
+					if (!isItemDisabled(candidate)) nextIndex = candidate;
+				}
+				break;
+			}
+			case "ArrowLeft": {
+				const targetCol = isRtl ? col + 1 : col - 1;
+				if (targetCol >= 0 && targetCol < columns && row * columns + targetCol < total) {
+					const candidate = row * columns + targetCol;
+					if (!isItemDisabled(candidate)) nextIndex = candidate;
+				}
+				break;
+			}
+			case "ArrowDown":
+				for (let r = row + 1; r < totalRows; r += 1) {
+					const candidate = r * columns + col;
+					if (candidate < total && !isItemDisabled(candidate)) {
+						nextIndex = candidate;
+						break;
+					}
+				}
+				break;
+			case "ArrowUp":
+				for (let r = row - 1; r >= 0; r -= 1) {
+					const candidate = r * columns + col;
+					if (candidate < total && !isItemDisabled(candidate)) {
+						nextIndex = candidate;
+						break;
+					}
+				}
+				break;
+			case "Home":
+				if (event.ctrlKey) nextIndex = findFirstEnabled(total, isItemDisabled);
+				else {
+					const rowStart = row * columns;
+					for (let i = rowStart; i < rowStart + columns && i < total; i += 1) if (!isItemDisabled(i)) {
+						nextIndex = i;
+						break;
+					}
+				}
+				break;
+			case "End":
+				if (event.ctrlKey) nextIndex = findLastEnabled(total, isItemDisabled);
+				else {
+					const rowStart = row * columns;
+					const rowEnd = Math.min(rowStart + columns, total) - 1;
+					for (let i = rowEnd; i >= rowStart; i -= 1) if (!isItemDisabled(i)) {
+						nextIndex = i;
+						break;
+					}
+				}
+				break;
+		}
+		if (nextIndex !== null && nextIndex !== currentIndex) {
+			event.preventDefault();
+			event.stopPropagation();
+			focusItem(nextIndex);
+		}
+	}, [
+		total,
+		columns,
+		dir,
+		isItemDisabled,
+		focusItem
+	]);
+	const handleListKeyDown = useCallback((event, currentIndex) => {
+		const isRtl = dir === "rtl";
+		let nextIndex = null;
+		switch (event.key) {
+			case "ArrowRight":
+				if (orientation === "horizontal" || orientation === "both") nextIndex = isRtl ? findPreviousEnabled(currentIndex, total, isItemDisabled, loop) : findNextEnabled(currentIndex, total, isItemDisabled, loop);
+				break;
+			case "ArrowLeft":
+				if (orientation === "horizontal" || orientation === "both") nextIndex = isRtl ? findNextEnabled(currentIndex, total, isItemDisabled, loop) : findPreviousEnabled(currentIndex, total, isItemDisabled, loop);
+				break;
+			case "ArrowDown":
+				if (orientation === "vertical" || orientation === "both") nextIndex = findNextEnabled(currentIndex, total, isItemDisabled, loop);
+				break;
+			case "ArrowUp":
+				if (orientation === "vertical" || orientation === "both") nextIndex = findPreviousEnabled(currentIndex, total, isItemDisabled, loop);
+				break;
+			case "Home":
+				nextIndex = findFirstEnabled(total, isItemDisabled);
+				break;
+			case "End":
+				nextIndex = findLastEnabled(total, isItemDisabled);
+				break;
+		}
+		if (nextIndex !== null && nextIndex !== currentIndex) {
+			event.preventDefault();
+			event.stopPropagation();
+			focusItem(nextIndex);
+		}
+	}, [
+		total,
+		orientation,
+		loop,
+		dir,
+		isItemDisabled,
+		focusItem
+	]);
+	return {
+		getItemProps: useCallback((options) => {
+			const { index, onClick, onKeyDown } = options;
+			return {
+				tabIndex: index === activeIndex ? 0 : -1,
+				ref: (node) => {
+					if (node) itemRefs.current.set(index, node);
+					else itemRefs.current.delete(index);
+				},
+				onKeyDown: (event) => {
+					onKeyDown?.(event);
+					if (event.defaultPrevented) return;
+					if (isGrid) handleGridKeyDown(event, index);
+					else handleListKeyDown(event, index);
+				},
+				onClick: (event) => {
+					onClick?.(event);
+					setActiveIndex(index);
+				}
+			};
+		}, [
+			activeIndex,
+			isGrid,
+			handleGridKeyDown,
+			handleListKeyDown,
+			setActiveIndex
+		]),
+		focusedIndex: activeIndex,
+		setFocusedIndex: setActiveIndex
+	};
+}
+//#endregion
+export { useRovingIndex };
+
+//# sourceMappingURL=use-roving-index.mjs.map

package/esm/use-roving-index/use-roving-index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-roving-index.mjs","names":[],"sources":["../../src/use-roving-index/use-roving-index.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { useUncontrolled } from '../use-uncontrolled/use-uncontrolled';\n\nexport interface UseRovingIndexInput {\n  /** Total number of items in the group */\n  total: number;\n\n  /** Which arrow keys navigate, `'horizontal'` by default */\n  orientation?: 'horizontal' | 'vertical' | 'both';\n\n  /** Whether navigation wraps at boundaries, `true` by default */\n  loop?: boolean;\n\n  /** Text direction, `'ltr'` by default */\n  dir?: 'rtl' | 'ltr';\n\n  /** Whether to click element when it receives focus via keyboard, `false` by default */\n  activateOnFocus?: boolean;\n\n  /** Number of columns for grid (2D) navigation. When set, enables grid mode */\n  columns?: number;\n\n  /** Controlled focused index */\n  focusedIndex?: number;\n\n  /** Initial focused index for uncontrolled mode, first non-disabled item by default */\n  initialIndex?: number;\n\n  /** Called when focused index changes */\n  onFocusChange?: (index: number) => void;\n\n  /** Function to check if item at given index is disabled, `() => false` by default */\n  isItemDisabled?: (index: number) => boolean;\n}\n\nexport interface UseRovingIndexGetItemPropsInput {\n  /** Index of the item in the group */\n  index: number;\n\n  /** Called when item is clicked */\n  onClick?: React.MouseEventHandler;\n\n  /** Called when keydown event fires on item */\n  onKeyDown?: React.KeyboardEventHandler;\n}\n\nexport interface UseRovingIndexReturnValue {\n  /** Get props to spread on each navigable item */\n  getItemProps: (options: UseRovingIndexGetItemPropsInput) => {\n    tabIndex: 0 | -1;\n    onKeyDown: React.KeyboardEventHandler;\n    onClick: React.MouseEventHandler;\n    ref: React.RefCallback<HTMLElement>;\n  };\n\n  /** Currently focused index */\n  focusedIndex: number;\n\n  /** Programmatically set focused index */\n  setFocusedIndex: (index: number) => void;\n}\n\nfunction findNextEnabled(\n  current: number,\n  total: number,\n  isItemDisabled: (index: number) => boolean,\n  loop: boolean\n): number {\n  for (let i = current + 1; i < total; i += 1) {\n    if (!isItemDisabled(i)) {\n      return i;\n    }\n  }\n\n  if (loop) {\n    for (let i = 0; i < current; i += 1) {\n      if (!isItemDisabled(i)) {\n        return i;\n      }\n    }\n  }\n\n  return current;\n}\n\nfunction findPreviousEnabled(\n  current: number,\n  total: number,\n  isItemDisabled: (index: number) => boolean,\n  loop: boolean\n): number {\n  for (let i = current - 1; i >= 0; i -= 1) {\n    if (!isItemDisabled(i)) {\n      return i;\n    }\n  }\n\n  if (loop) {\n    for (let i = total - 1; i > current; i -= 1) {\n      if (!isItemDisabled(i)) {\n        return i;\n      }\n    }\n  }\n\n  return current;\n}\n\nfunction findFirstEnabled(total: number, isItemDisabled: (index: number) => boolean): number {\n  for (let i = 0; i < total; i += 1) {\n    if (!isItemDisabled(i)) {\n      return i;\n    }\n  }\n\n  return 0;\n}\n\nfunction findLastEnabled(total: number, isItemDisabled: (index: number) => boolean): number {\n  for (let i = total - 1; i >= 0; i -= 1) {\n    if (!isItemDisabled(i)) {\n      return i;\n    }\n  }\n\n  return 0;\n}\n\nconst defaultIsItemDisabled = () => false;\n\nexport function useRovingIndex(input: UseRovingIndexInput): UseRovingIndexReturnValue {\n  const {\n    total,\n    orientation = 'horizontal',\n    loop = true,\n    dir = 'ltr',\n    activateOnFocus = false,\n    columns,\n    focusedIndex,\n    initialIndex,\n    onFocusChange,\n    isItemDisabled = defaultIsItemDisabled,\n  } = input;\n\n  const itemRefs = useRef<Map<number, HTMLElement>>(new Map());\n  const isGrid = typeof columns === 'number' && columns > 0;\n\n  const resolvedInitialIndex =\n    initialIndex !== undefined ? initialIndex : findFirstEnabled(total, isItemDisabled);\n\n  const [activeIndex, setActiveIndex] = useUncontrolled({\n    value: focusedIndex,\n    defaultValue: resolvedInitialIndex,\n    finalValue: 0,\n    onChange: onFocusChange,\n  });\n\n  useEffect(() => {\n    if (total === 0) {\n      return;\n    }\n\n    if (activeIndex >= total) {\n      setActiveIndex(findLastEnabled(total, isItemDisabled));\n    } else if (isItemDisabled(activeIndex)) {\n      setActiveIndex(findFirstEnabled(total, isItemDisabled));\n    }\n  }, [total, activeIndex, isItemDisabled]);\n\n  const focusItem = useCallback(\n    (index: number) => {\n      setActiveIndex(index);\n      const element = itemRefs.current.get(index);\n      if (element) {\n        element.focus();\n        if (activateOnFocus) {\n          element.click();\n        }\n      }\n    },\n    [activateOnFocus, setActiveIndex]\n  );\n\n  const handleGridKeyDown = useCallback(\n    (event: React.KeyboardEvent, currentIndex: number) => {\n      const row = Math.floor(currentIndex / columns!);\n      const col = currentIndex % columns!;\n      const totalRows = Math.ceil(total / columns!);\n      let nextIndex: number | null = null;\n\n      const isRtl = dir === 'rtl';\n\n      switch (event.key) {\n        case 'ArrowRight': {\n          const targetCol = isRtl ? col - 1 : col + 1;\n          if (targetCol >= 0 && targetCol < columns! && row * columns! + targetCol < total) {\n            const candidate = row * columns! + targetCol;\n            if (!isItemDisabled(candidate)) {\n              nextIndex = candidate;\n            }\n          }\n          break;\n        }\n\n        case 'ArrowLeft': {\n          const targetCol = isRtl ? col + 1 : col - 1;\n          if (targetCol >= 0 && targetCol < columns! && row * columns! + targetCol < total) {\n            const candidate = row * columns! + targetCol;\n            if (!isItemDisabled(candidate)) {\n              nextIndex = candidate;\n            }\n          }\n          break;\n        }\n\n        case 'ArrowDown': {\n          for (let r = row + 1; r < totalRows; r += 1) {\n            const candidate = r * columns! + col;\n            if (candidate < total && !isItemDisabled(candidate)) {\n              nextIndex = candidate;\n              break;\n            }\n          }\n          break;\n        }\n\n        case 'ArrowUp': {\n          for (let r = row - 1; r >= 0; r -= 1) {\n            const candidate = r * columns! + col;\n            if (candidate < total && !isItemDisabled(candidate)) {\n              nextIndex = candidate;\n              break;\n            }\n          }\n          break;\n        }\n\n        case 'Home': {\n          if (event.ctrlKey) {\n            nextIndex = findFirstEnabled(total, isItemDisabled);\n          } else {\n            const rowStart = row * columns!;\n            for (let i = rowStart; i < rowStart + columns! && i < total; i += 1) {\n              if (!isItemDisabled(i)) {\n                nextIndex = i;\n                break;\n              }\n            }\n          }\n          break;\n        }\n\n        case 'End': {\n          if (event.ctrlKey) {\n            nextIndex = findLastEnabled(total, isItemDisabled);\n          } else {\n            const rowStart = row * columns!;\n            const rowEnd = Math.min(rowStart + columns!, total) - 1;\n            for (let i = rowEnd; i >= rowStart; i -= 1) {\n              if (!isItemDisabled(i)) {\n                nextIndex = i;\n                break;\n              }\n            }\n          }\n          break;\n        }\n      }\n\n      if (nextIndex !== null && nextIndex !== currentIndex) {\n        event.preventDefault();\n        event.stopPropagation();\n        focusItem(nextIndex);\n      }\n    },\n    [total, columns, dir, isItemDisabled, focusItem]\n  );\n\n  const handleListKeyDown = useCallback(\n    (event: React.KeyboardEvent, currentIndex: number) => {\n      const isRtl = dir === 'rtl';\n      let nextIndex: number | null = null;\n\n      switch (event.key) {\n        case 'ArrowRight': {\n          if (orientation === 'horizontal' || orientation === 'both') {\n            nextIndex = isRtl\n              ? findPreviousEnabled(currentIndex, total, isItemDisabled, loop)\n              : findNextEnabled(currentIndex, total, isItemDisabled, loop);\n          }\n          break;\n        }\n\n        case 'ArrowLeft': {\n          if (orientation === 'horizontal' || orientation === 'both') {\n            nextIndex = isRtl\n              ? findNextEnabled(currentIndex, total, isItemDisabled, loop)\n              : findPreviousEnabled(currentIndex, total, isItemDisabled, loop);\n          }\n          break;\n        }\n\n        case 'ArrowDown': {\n          if (orientation === 'vertical' || orientation === 'both') {\n            nextIndex = findNextEnabled(currentIndex, total, isItemDisabled, loop);\n          }\n          break;\n        }\n\n        case 'ArrowUp': {\n          if (orientation === 'vertical' || orientation === 'both') {\n            nextIndex = findPreviousEnabled(currentIndex, total, isItemDisabled, loop);\n          }\n          break;\n        }\n\n        case 'Home': {\n          nextIndex = findFirstEnabled(total, isItemDisabled);\n          break;\n        }\n\n        case 'End': {\n          nextIndex = findLastEnabled(total, isItemDisabled);\n          break;\n        }\n      }\n\n      if (nextIndex !== null && nextIndex !== currentIndex) {\n        event.preventDefault();\n        event.stopPropagation();\n        focusItem(nextIndex);\n      }\n    },\n    [total, orientation, loop, dir, isItemDisabled, focusItem]\n  );\n\n  const getItemProps = useCallback(\n    (options: UseRovingIndexGetItemPropsInput) => {\n      const { index, onClick, onKeyDown } = options;\n\n      return {\n        tabIndex: (index === activeIndex ? 0 : -1) as 0 | -1,\n\n        ref: (node: HTMLElement | null) => {\n          if (node) {\n            itemRefs.current.set(index, node);\n          } else {\n            itemRefs.current.delete(index);\n          }\n        },\n\n        onKeyDown: (event: React.KeyboardEvent) => {\n          onKeyDown?.(event);\n\n          if (event.defaultPrevented) {\n            return;\n          }\n\n          if (isGrid) {\n            handleGridKeyDown(event, index);\n          } else {\n            handleListKeyDown(event, index);\n          }\n        },\n\n        onClick: (event: React.MouseEvent) => {\n          onClick?.(event);\n          setActiveIndex(index);\n        },\n      };\n    },\n    [activeIndex, isGrid, handleGridKeyDown, handleListKeyDown, setActiveIndex]\n  );\n\n  return {\n    getItemProps,\n    focusedIndex: activeIndex,\n    setFocusedIndex: setActiveIndex,\n  };\n}\n\nexport namespace useRovingIndex {\n  export type Input = UseRovingIndexInput;\n  export type GetItemPropsInput = UseRovingIndexGetItemPropsInput;\n  export type ReturnValue = UseRovingIndexReturnValue;\n}\n"],"mappings":"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"}

package/esm/use-scroll-direction/use-scroll-direction.mjs

@@ -2,22 +2,22 @@
 import { useEffect, useEffectEvent, useRef, useState } from "react";
 //#region packages/@mantine/hooks/src/use-scroll-direction/use-scroll-direction.ts
 function useScrollDirection() {
-	const [lastScrollTop, setLastScrollTop] = useState(0);
+	const lastScrollTopRef = useRef(0);
 	const [scrollDirection, setScrollDirection] = useState("unknown");
-	const [isResizing, setIsResizing] = useState(false);
+	const isResizingRef = useRef(false);
 	const resizeTimerRef = useRef(void 0);
 	const handleScroll = useEffectEvent(() => {
-		if (isResizing) return;
+		if (isResizingRef.current) return;
 		const currentScrollTop = window.scrollY || document.documentElement.scrollTop;
-		setScrollDirection(currentScrollTop < lastScrollTop ? "up" : "down");
-		setLastScrollTop(currentScrollTop);
+		setScrollDirection(currentScrollTop < lastScrollTopRef.current ? "up" : "down");
+		lastScrollTopRef.current = currentScrollTop;
 	});
 	useEffect(() => {
 		const handleResize = () => {
-			setIsResizing(true);
+			isResizingRef.current = true;
 			window.clearTimeout(resizeTimerRef.current);
 			resizeTimerRef.current = window.setTimeout(() => {
-				setIsResizing(false);
+				isResizingRef.current = false;
 			}, 300);
 		};
 		window.addEventListener("scroll", handleScroll);

package/esm/use-scroll-direction/use-scroll-direction.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-direction.mjs","names":[],"sources":["../../src/use-scroll-direction/use-scroll-direction.ts"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\n\nexport type ScrollDirection = 'up' | 'down' | 'unknown';\n\nexport function useScrollDirection(): ScrollDirection {\n  const [lastScrollTop, setLastScrollTop] = useState(0);\n  const [scrollDirection, setScrollDirection] = useState<ScrollDirection>('unknown');\n  const [isResizing, setIsResizing] = useState(false);\n  const resizeTimerRef = useRef<number | undefined>(undefined);\n\n  const handleScroll = useEffectEvent(() => {\n    if (isResizing) {\n      return;\n    }\n\n    const currentScrollTop = window.scrollY || document.documentElement.scrollTop;\n    setScrollDirection(currentScrollTop < lastScrollTop ? 'up' : 'down');\n    setLastScrollTop(currentScrollTop);\n  });\n\n  useEffect(() => {\n    const handleResize = () => {\n      setIsResizing(true);\n      window.clearTimeout(resizeTimerRef.current);\n      resizeTimerRef.current = window.setTimeout(() => {\n        setIsResizing(false);\n      }, 300);\n    };\n\n    window.addEventListener('scroll', handleScroll);\n    window.addEventListener('resize', handleResize);\n\n    return () => {\n      window.removeEventListener('scroll', handleScroll);\n      window.removeEventListener('resize', handleResize);\n      clearTimeout(resizeTimerRef.current);\n    };\n  }, []);\n\n  return scrollDirection;\n}\n"],"mappings":";;;AAIA,SAAgB,qBAAsC;CACpD,MAAM,CAAC,eAAe,oBAAoB,SAAS,EAAE;CACrD,MAAM,CAAC,iBAAiB,sBAAsB,SAA0B,UAAU;CAClF,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,iBAAiB,OAA2B,KAAA,EAAU;CAE5D,MAAM,eAAe,qBAAqB;AACxC,MAAI,WACF;EAGF,MAAM,mBAAmB,OAAO,WAAW,SAAS,gBAAgB;AACpE,qBAAmB,mBAAmB,gBAAgB,OAAO,OAAO;AACpE,mBAAiB,iBAAiB;GAClC;AAEF,iBAAgB;EACd,MAAM,qBAAqB;AACzB,iBAAc,KAAK;AACnB,UAAO,aAAa,eAAe,QAAQ;AAC3C,kBAAe,UAAU,OAAO,iBAAiB;AAC/C,kBAAc,MAAM;MACnB,IAAI;;AAGT,SAAO,iBAAiB,UAAU,aAAa;AAC/C,SAAO,iBAAiB,UAAU,aAAa;AAE/C,eAAa;AACX,UAAO,oBAAoB,UAAU,aAAa;AAClD,UAAO,oBAAoB,UAAU,aAAa;AAClD,gBAAa,eAAe,QAAQ;;IAErC,EAAE,CAAC;AAEN,QAAO"}
+{"version":3,"file":"use-scroll-direction.mjs","names":[],"sources":["../../src/use-scroll-direction/use-scroll-direction.ts"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\n\nexport type ScrollDirection = 'up' | 'down' | 'unknown';\n\nexport function useScrollDirection(): ScrollDirection {\n  const lastScrollTopRef = useRef(0);\n  const [scrollDirection, setScrollDirection] = useState<ScrollDirection>('unknown');\n  const isResizingRef = useRef(false);\n  const resizeTimerRef = useRef<number | undefined>(undefined);\n\n  const handleScroll = useEffectEvent(() => {\n    if (isResizingRef.current) {\n      return;\n    }\n\n    const currentScrollTop = window.scrollY || document.documentElement.scrollTop;\n    setScrollDirection(currentScrollTop < lastScrollTopRef.current ? 'up' : 'down');\n    lastScrollTopRef.current = currentScrollTop;\n  });\n\n  useEffect(() => {\n    const handleResize = () => {\n      isResizingRef.current = true;\n      window.clearTimeout(resizeTimerRef.current);\n      resizeTimerRef.current = window.setTimeout(() => {\n        isResizingRef.current = false;\n      }, 300);\n    };\n\n    window.addEventListener('scroll', handleScroll);\n    window.addEventListener('resize', handleResize);\n\n    return () => {\n      window.removeEventListener('scroll', handleScroll);\n      window.removeEventListener('resize', handleResize);\n      clearTimeout(resizeTimerRef.current);\n    };\n  }, []);\n\n  return scrollDirection;\n}\n"],"mappings":";;;AAIA,SAAgB,qBAAsC;CACpD,MAAM,mBAAmB,OAAO,EAAE;CAClC,MAAM,CAAC,iBAAiB,sBAAsB,SAA0B,UAAU;CAClF,MAAM,gBAAgB,OAAO,MAAM;CACnC,MAAM,iBAAiB,OAA2B,KAAA,EAAU;CAE5D,MAAM,eAAe,qBAAqB;AACxC,MAAI,cAAc,QAChB;EAGF,MAAM,mBAAmB,OAAO,WAAW,SAAS,gBAAgB;AACpE,qBAAmB,mBAAmB,iBAAiB,UAAU,OAAO,OAAO;AAC/E,mBAAiB,UAAU;GAC3B;AAEF,iBAAgB;EACd,MAAM,qBAAqB;AACzB,iBAAc,UAAU;AACxB,UAAO,aAAa,eAAe,QAAQ;AAC3C,kBAAe,UAAU,OAAO,iBAAiB;AAC/C,kBAAc,UAAU;MACvB,IAAI;;AAGT,SAAO,iBAAiB,UAAU,aAAa;AAC/C,SAAO,iBAAiB,UAAU,aAAa;AAE/C,eAAa;AACX,UAAO,oBAAoB,UAAU,aAAa;AAClD,UAAO,oBAAoB,UAAU,aAAa;AAClD,gBAAa,eAAe,QAAQ;;IAErC,EAAE,CAAC;AAEN,QAAO"}

package/esm/use-scroll-into-view/use-scroll-into-view.mjs

@@ -1,17 +1,22 @@
 "use client";
 import { useWindowEvent } from "../use-window-event/use-window-event.mjs";
 import { useReducedMotion } from "../use-reduced-motion/use-reduced-motion.mjs";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 //#region packages/@mantine/hooks/src/use-scroll-into-view/use-scroll-into-view.ts
-function useScrollIntoView({ duration = 1250, axis = "y", onScrollFinish, easing = easeInOutQuad, offset = 0, cancelable = true, isList = false } = {}) {
+function useScrollIntoView({ duration = 1250, axis = "y", onScrollFinish, onScrollCancel, easing = easeInOutQuad, offset = 0, cancelable = true, isList = false } = {}) {
 	const frameID = useRef(0);
 	const startTime = useRef(0);
 	const shouldStop = useRef(false);
+	const [scrolling, setScrolling] = useState(false);
 	const scrollableRef = useRef(null);
 	const targetRef = useRef(null);
 	const reducedMotion = useReducedMotion();
 	const cancel = () => {
-		if (frameID.current) cancelAnimationFrame(frameID.current);
+		if (frameID.current) {
+			cancelAnimationFrame(frameID.current);
+			frameID.current = 0;
+			setScrolling(false);
+		}
 	};
 	const scrollIntoView = useCallback(({ alignment = "start" } = {}) => {
 		shouldStop.current = false;
@@ -28,6 +33,7 @@ function useScrollIntoView({ duration = 1250, axis = "y", onScrollFinish, easing
 			offset,
 			isList
 		}) - (scrollableRef.current ? 0 : start);
+		setScrolling(true);
 		function animateScroll() {
 			if (startTime.current === 0) startTime.current = performance.now();
 			const elapsed = performance.now() - startTime.current;
@@ -40,9 +46,11 @@ function useScrollIntoView({ duration = 1250, axis = "y", onScrollFinish, easing
 			});
 			if (!shouldStop.current && t < 1) frameID.current = requestAnimationFrame(animateScroll);
 			else {
-				typeof onScrollFinish === "function" && onScrollFinish();
+				if (shouldStop.current) typeof onScrollCancel === "function" && onScrollCancel();
+				else typeof onScrollFinish === "function" && onScrollFinish();
 				startTime.current = 0;
 				frameID.current = 0;
+				setScrolling(false);
 				cancel();
 			}
 		}
@@ -54,6 +62,7 @@ function useScrollIntoView({ duration = 1250, axis = "y", onScrollFinish, easing
 		isList,
 		offset,
 		onScrollFinish,
+		onScrollCancel,
 		reducedMotion
 	]);
 	const handleStop = () => {
@@ -71,7 +80,8 @@ function useScrollIntoView({ duration = 1250, axis = "y", onScrollFinish, easing
 		scrollableRef,
 		targetRef,
 		scrollIntoView,
-		cancel
+		cancel,
+		scrolling
 	};
 }
 function easeInOutQuad(t) {

package/esm/use-scroll-into-view/use-scroll-into-view.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-into-view.mjs","names":[],"sources":["../../src/use-scroll-into-view/use-scroll-into-view.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { useReducedMotion } from '../use-reduced-motion/use-reduced-motion';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\ninterface UseScrollIntoViewAnimation {\n  /** Target element alignment relatively to parent based on current axis */\n  alignment?: 'start' | 'end' | 'center';\n}\n\nexport interface UseScrollIntoViewOptions {\n  /** Callback fired after scroll */\n  onScrollFinish?: () => void;\n\n  /** Duration of scroll in milliseconds */\n  duration?: number;\n\n  /** Axis of scroll */\n  axis?: 'x' | 'y';\n\n  /** Custom mathematical easing function */\n  easing?: (t: number) => number;\n\n  /** Additional distance between nearest edge and element */\n  offset?: number;\n\n  /** Indicator if animation may be interrupted by user scrolling */\n  cancelable?: boolean;\n\n  /** Prevents content jumping in scrolling lists with multiple targets */\n  isList?: boolean;\n}\n\nexport interface UseScrollIntoViewReturnValue<\n  Target extends HTMLElement = any,\n  Parent extends HTMLElement | null = null,\n> {\n  scrollableRef: React.RefObject<Parent | null>;\n  targetRef: React.RefObject<Target | null>;\n  scrollIntoView: (params?: UseScrollIntoViewAnimation) => void;\n  cancel: () => void;\n}\n\nexport function useScrollIntoView<\n  Target extends HTMLElement = any,\n  Parent extends HTMLElement | null = null,\n>({\n  duration = 1250,\n  axis = 'y',\n  onScrollFinish,\n  easing = easeInOutQuad,\n  offset = 0,\n  cancelable = true,\n  isList = false,\n}: UseScrollIntoViewOptions = {}): UseScrollIntoViewReturnValue<Target, Parent> {\n  const frameID = useRef(0);\n  const startTime = useRef(0);\n  const shouldStop = useRef(false);\n\n  const scrollableRef = useRef<Parent | null>(null);\n  const targetRef = useRef<Target | null>(null);\n\n  const reducedMotion = useReducedMotion();\n\n  const cancel = (): void => {\n    if (frameID.current) {\n      cancelAnimationFrame(frameID.current);\n    }\n  };\n\n  const scrollIntoView = useCallback(\n    ({ alignment = 'start' }: UseScrollIntoViewAnimation = {}) => {\n      shouldStop.current = false;\n\n      if (frameID.current) {\n        cancel();\n      }\n\n      const start = getScrollStart({ parent: scrollableRef.current, axis }) ?? 0;\n\n      const change =\n        getRelativePosition({\n          parent: scrollableRef.current,\n          target: targetRef.current,\n          axis,\n          alignment,\n          offset,\n          isList,\n        }) - (scrollableRef.current ? 0 : start);\n\n      function animateScroll() {\n        if (startTime.current === 0) {\n          startTime.current = performance.now();\n        }\n\n        const now = performance.now();\n        const elapsed = now - startTime.current;\n\n        // Easing timing progress\n        const t = reducedMotion || duration === 0 ? 1 : elapsed / duration;\n\n        const distance = start + change * easing(t);\n\n        setScrollParam({\n          parent: scrollableRef.current,\n          axis,\n          distance,\n        });\n\n        if (!shouldStop.current && t < 1) {\n          frameID.current = requestAnimationFrame(animateScroll);\n        } else {\n          typeof onScrollFinish === 'function' && onScrollFinish();\n          startTime.current = 0;\n          frameID.current = 0;\n          cancel();\n        }\n      }\n      animateScroll();\n    },\n    [axis, duration, easing, isList, offset, onScrollFinish, reducedMotion]\n  );\n\n  const handleStop = () => {\n    if (cancelable) {\n      shouldStop.current = true;\n    }\n  };\n\n  /**\n   * Detection of one of these events stops scroll animation\n   * wheel - mouse wheel / touch pad\n   * touchmove - any touchable device\n   */\n\n  useWindowEvent('wheel', handleStop, {\n    passive: true,\n  });\n\n  useWindowEvent('touchmove', handleStop, {\n    passive: true,\n  });\n\n  // Cleanup requestAnimationFrame\n  useEffect(() => cancel, []);\n\n  return {\n    scrollableRef,\n    targetRef,\n    scrollIntoView,\n    cancel,\n  };\n}\n\n// ---------------------------------------------------\n// Helpers\n// ---------------------------------------------------\n\nfunction easeInOutQuad(t: number) {\n  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;\n}\n\nfunction getRelativePosition({ axis, target, parent, alignment, offset, isList }: any): number {\n  if (!target || (!parent && typeof document === 'undefined')) {\n    return 0;\n  }\n  const isCustomParent = !!parent;\n  const parentElement = parent || document.body;\n  const parentPosition = parentElement.getBoundingClientRect();\n  const targetPosition = target.getBoundingClientRect();\n\n  const getDiff = (property: 'top' | 'left'): number =>\n    targetPosition[property] - parentPosition[property];\n\n  if (axis === 'y') {\n    const diff = getDiff('top');\n\n    if (diff === 0) {\n      return 0;\n    }\n\n    if (alignment === 'start') {\n      const distance = diff - offset;\n      const shouldScroll = distance <= targetPosition.height * (isList ? 0 : 1) || !isList;\n\n      return shouldScroll ? distance : 0;\n    }\n\n    const parentHeight = isCustomParent ? parentPosition.height : window.innerHeight;\n\n    if (alignment === 'end') {\n      const distance = diff + offset - parentHeight + targetPosition.height;\n      const shouldScroll = distance >= -targetPosition.height * (isList ? 0 : 1) || !isList;\n\n      return shouldScroll ? distance : 0;\n    }\n\n    if (alignment === 'center') {\n      return diff - parentHeight / 2 + targetPosition.height / 2;\n    }\n\n    return 0;\n  }\n\n  if (axis === 'x') {\n    const diff = getDiff('left');\n\n    if (diff === 0) {\n      return 0;\n    }\n\n    if (alignment === 'start') {\n      const distance = diff - offset;\n      const shouldScroll = distance <= targetPosition.width || !isList;\n\n      return shouldScroll ? distance : 0;\n    }\n\n    const parentWidth = isCustomParent ? parentPosition.width : window.innerWidth;\n\n    if (alignment === 'end') {\n      const distance = diff + offset - parentWidth + targetPosition.width;\n      const shouldScroll = distance >= -targetPosition.width || !isList;\n\n      return shouldScroll ? distance : 0;\n    }\n\n    if (alignment === 'center') {\n      return diff - parentWidth / 2 + targetPosition.width / 2;\n    }\n\n    return 0;\n  }\n\n  return 0;\n}\n\nfunction getScrollStart({ axis, parent }: any) {\n  if (!parent && typeof document === 'undefined') {\n    return 0;\n  }\n\n  const method = axis === 'y' ? 'scrollTop' : 'scrollLeft';\n\n  if (parent) {\n    return parent[method];\n  }\n\n  const { body, documentElement } = document;\n\n  // While one of it has a value the second is equal 0\n  return body[method] + documentElement[method];\n}\n\nfunction setScrollParam({ axis, parent, distance }: any) {\n  if (!parent && typeof document === 'undefined') {\n    return;\n  }\n\n  const method = axis === 'y' ? 'scrollTop' : 'scrollLeft';\n\n  if (parent) {\n    parent[method] = distance;\n  } else {\n    const { body, documentElement } = document;\n    body[method] = distance;\n    documentElement[method] = distance;\n  }\n}\n\nexport namespace useScrollIntoView {\n  export type Options = UseScrollIntoViewOptions;\n  export type ReturnValue<\n    Target extends HTMLElement,\n    Parent extends HTMLElement | null,\n  > = UseScrollIntoViewReturnValue<Target, Parent>;\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-scroll-into-view.mjs","names":[],"sources":["../../src/use-scroll-into-view/use-scroll-into-view.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { useReducedMotion } from '../use-reduced-motion/use-reduced-motion';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\ninterface UseScrollIntoViewAnimation {\n  /** Target element alignment relatively to parent based on current axis */\n  alignment?: 'start' | 'end' | 'center';\n}\n\nexport interface UseScrollIntoViewOptions {\n  /** Callback fired after scroll */\n  onScrollFinish?: () => void;\n\n  /** Callback fired when scroll animation is canceled by user interaction */\n  onScrollCancel?: () => void;\n\n  /** Duration of scroll in milliseconds */\n  duration?: number;\n\n  /** Axis of scroll */\n  axis?: 'x' | 'y';\n\n  /** Custom mathematical easing function */\n  easing?: (t: number) => number;\n\n  /** Additional distance between nearest edge and element */\n  offset?: number;\n\n  /** Indicator if animation may be interrupted by user scrolling */\n  cancelable?: boolean;\n\n  /** Prevents content jumping in scrolling lists with multiple targets */\n  isList?: boolean;\n}\n\nexport interface UseScrollIntoViewReturnValue<\n  Target extends HTMLElement = any,\n  Parent extends HTMLElement | null = null,\n> {\n  scrollableRef: React.RefObject<Parent | null>;\n  targetRef: React.RefObject<Target | null>;\n  scrollIntoView: (params?: UseScrollIntoViewAnimation) => void;\n  cancel: () => void;\n  scrolling: boolean;\n}\n\nexport function useScrollIntoView<\n  Target extends HTMLElement = any,\n  Parent extends HTMLElement | null = null,\n>({\n  duration = 1250,\n  axis = 'y',\n  onScrollFinish,\n  onScrollCancel,\n  easing = easeInOutQuad,\n  offset = 0,\n  cancelable = true,\n  isList = false,\n}: UseScrollIntoViewOptions = {}): UseScrollIntoViewReturnValue<Target, Parent> {\n  const frameID = useRef(0);\n  const startTime = useRef(0);\n  const shouldStop = useRef(false);\n  const [scrolling, setScrolling] = useState(false);\n\n  const scrollableRef = useRef<Parent | null>(null);\n  const targetRef = useRef<Target | null>(null);\n\n  const reducedMotion = useReducedMotion();\n\n  const cancel = (): void => {\n    if (frameID.current) {\n      cancelAnimationFrame(frameID.current);\n      frameID.current = 0;\n      setScrolling(false);\n    }\n  };\n\n  const scrollIntoView = useCallback(\n    ({ alignment = 'start' }: UseScrollIntoViewAnimation = {}) => {\n      shouldStop.current = false;\n\n      if (frameID.current) {\n        cancel();\n      }\n\n      const start = getScrollStart({ parent: scrollableRef.current, axis }) ?? 0;\n\n      const change =\n        getRelativePosition({\n          parent: scrollableRef.current,\n          target: targetRef.current,\n          axis,\n          alignment,\n          offset,\n          isList,\n        }) - (scrollableRef.current ? 0 : start);\n\n      setScrolling(true);\n\n      function animateScroll() {\n        if (startTime.current === 0) {\n          startTime.current = performance.now();\n        }\n\n        const now = performance.now();\n        const elapsed = now - startTime.current;\n\n        // Easing timing progress\n        const t = reducedMotion || duration === 0 ? 1 : elapsed / duration;\n\n        const distance = start + change * easing(t);\n\n        setScrollParam({\n          parent: scrollableRef.current,\n          axis,\n          distance,\n        });\n\n        if (!shouldStop.current && t < 1) {\n          frameID.current = requestAnimationFrame(animateScroll);\n        } else {\n          if (shouldStop.current) {\n            typeof onScrollCancel === 'function' && onScrollCancel();\n          } else {\n            typeof onScrollFinish === 'function' && onScrollFinish();\n          }\n          startTime.current = 0;\n          frameID.current = 0;\n          setScrolling(false);\n          cancel();\n        }\n      }\n      animateScroll();\n    },\n    [axis, duration, easing, isList, offset, onScrollFinish, onScrollCancel, reducedMotion]\n  );\n\n  const handleStop = () => {\n    if (cancelable) {\n      shouldStop.current = true;\n    }\n  };\n\n  /**\n   * Detection of one of these events stops scroll animation\n   * wheel - mouse wheel / touch pad\n   * touchmove - any touchable device\n   */\n\n  useWindowEvent('wheel', handleStop, {\n    passive: true,\n  });\n\n  useWindowEvent('touchmove', handleStop, {\n    passive: true,\n  });\n\n  // Cleanup requestAnimationFrame\n  useEffect(() => cancel, []);\n\n  return {\n    scrollableRef,\n    targetRef,\n    scrollIntoView,\n    cancel,\n    scrolling,\n  };\n}\n\n// ---------------------------------------------------\n// Helpers\n// ---------------------------------------------------\n\nfunction easeInOutQuad(t: number) {\n  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;\n}\n\nfunction getRelativePosition({ axis, target, parent, alignment, offset, isList }: any): number {\n  if (!target || (!parent && typeof document === 'undefined')) {\n    return 0;\n  }\n  const isCustomParent = !!parent;\n  const parentElement = parent || document.body;\n  const parentPosition = parentElement.getBoundingClientRect();\n  const targetPosition = target.getBoundingClientRect();\n\n  const getDiff = (property: 'top' | 'left'): number =>\n    targetPosition[property] - parentPosition[property];\n\n  if (axis === 'y') {\n    const diff = getDiff('top');\n\n    if (diff === 0) {\n      return 0;\n    }\n\n    if (alignment === 'start') {\n      const distance = diff - offset;\n      const shouldScroll = distance <= targetPosition.height * (isList ? 0 : 1) || !isList;\n\n      return shouldScroll ? distance : 0;\n    }\n\n    const parentHeight = isCustomParent ? parentPosition.height : window.innerHeight;\n\n    if (alignment === 'end') {\n      const distance = diff + offset - parentHeight + targetPosition.height;\n      const shouldScroll = distance >= -targetPosition.height * (isList ? 0 : 1) || !isList;\n\n      return shouldScroll ? distance : 0;\n    }\n\n    if (alignment === 'center') {\n      return diff - parentHeight / 2 + targetPosition.height / 2;\n    }\n\n    return 0;\n  }\n\n  if (axis === 'x') {\n    const diff = getDiff('left');\n\n    if (diff === 0) {\n      return 0;\n    }\n\n    if (alignment === 'start') {\n      const distance = diff - offset;\n      const shouldScroll = distance <= targetPosition.width || !isList;\n\n      return shouldScroll ? distance : 0;\n    }\n\n    const parentWidth = isCustomParent ? parentPosition.width : window.innerWidth;\n\n    if (alignment === 'end') {\n      const distance = diff + offset - parentWidth + targetPosition.width;\n      const shouldScroll = distance >= -targetPosition.width || !isList;\n\n      return shouldScroll ? distance : 0;\n    }\n\n    if (alignment === 'center') {\n      return diff - parentWidth / 2 + targetPosition.width / 2;\n    }\n\n    return 0;\n  }\n\n  return 0;\n}\n\nfunction getScrollStart({ axis, parent }: any) {\n  if (!parent && typeof document === 'undefined') {\n    return 0;\n  }\n\n  const method = axis === 'y' ? 'scrollTop' : 'scrollLeft';\n\n  if (parent) {\n    return parent[method];\n  }\n\n  const { body, documentElement } = document;\n\n  // While one of it has a value the second is equal 0\n  return body[method] + documentElement[method];\n}\n\nfunction setScrollParam({ axis, parent, distance }: any) {\n  if (!parent && typeof document === 'undefined') {\n    return;\n  }\n\n  const method = axis === 'y' ? 'scrollTop' : 'scrollLeft';\n\n  if (parent) {\n    parent[method] = distance;\n  } else {\n    const { body, documentElement } = document;\n    body[method] = distance;\n    documentElement[method] = distance;\n  }\n}\n\nexport namespace useScrollIntoView {\n  export type Options = UseScrollIntoViewOptions;\n  export type ReturnValue<\n    Target extends HTMLElement,\n    Parent extends HTMLElement | null,\n  > = UseScrollIntoViewReturnValue<Target, Parent>;\n}\n"],"mappings":"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"}

package/esm/use-scroll-spy/use-scroll-spy.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { randomId } from "../utils/random-id/random-id.mjs";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
 //#region packages/@mantine/hooks/src/use-scroll-spy/use-scroll-spy.ts
 function getHeadingsData(headings, getDepth, getValue) {
 	const result = [];
@@ -39,9 +39,9 @@ function useScrollSpy({ selector = "h1, h2, h3, h4, h5, h6", getDepth = getDefau
 	const [initialized, setInitialized] = useState(false);
 	const [data, setData] = useState([]);
 	const headingsRef = useRef([]);
-	const handleScroll = () => {
+	const handleScroll = useEffectEvent(() => {
 		setActive(getActiveElement(headingsRef.current.map((d) => d.getNode().getBoundingClientRect()), offset));
-	};
+	});
 	const initialize = () => {
 		const headings = getHeadingsData(Array.from(document.querySelectorAll(selector)), getDepth, getValue);
 		headingsRef.current = headings;
@@ -54,7 +54,11 @@ function useScrollSpy({ selector = "h1, h2, h3, h4, h5, h6", getDepth = getDefau
 		const _scrollHost = scrollHost || window;
 		_scrollHost.addEventListener("scroll", handleScroll);
 		return () => _scrollHost.removeEventListener("scroll", handleScroll);
-	}, [scrollHost]);
+	}, [
+		scrollHost,
+		selector,
+		offset
+	]);
 	return {
 		reinitialize: initialize,
 		active,

package/esm/use-scroll-spy/use-scroll-spy.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-spy.mjs","names":[],"sources":["../../src/use-scroll-spy/use-scroll-spy.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { randomId } from '../utils';\n\nfunction getHeadingsData(\n  headings: HTMLElement[],\n  getDepth: (element: HTMLElement) => number,\n  getValue: (element: HTMLElement) => string\n): UseScrollSpyHeadingData[] {\n  const result: UseScrollSpyHeadingData[] = [];\n\n  for (let i = 0; i < headings.length; i += 1) {\n    const heading = headings[i];\n    result.push({\n      depth: getDepth(heading),\n      value: getValue(heading),\n      id: heading.id || randomId(),\n      getNode: () => (heading.id ? document.getElementById(heading.id)! : heading),\n    });\n  }\n\n  return result;\n}\n\nfunction getActiveElement(rects: DOMRect[], offset: number = 0) {\n  if (rects.length === 0) {\n    return -1;\n  }\n\n  const closest = rects.reduce(\n    (acc, item, index) => {\n      if (Math.abs(acc.position - offset) < Math.abs(item.y - offset)) {\n        return acc;\n      }\n\n      return {\n        index,\n        position: item.y,\n      };\n    },\n    { index: 0, position: rects[0].y }\n  );\n\n  return closest.index;\n}\n\nfunction getDefaultDepth(element: HTMLElement) {\n  return Number(element.tagName[1]);\n}\n\nfunction getDefaultValue(element: HTMLElement) {\n  return element.textContent || '';\n}\n\nexport interface UseScrollSpyHeadingData {\n  /** Heading depth, 1-6 */\n  depth: number;\n\n  /** Heading text content value */\n  value: string;\n\n  /** Heading id */\n  id: string;\n\n  /** Function to get heading node */\n  getNode: () => HTMLElement;\n}\n\nexport interface UseScrollSpyOptions {\n  /** Selector to get headings, `'h1, h2, h3, h4, h5, h6'` by default */\n  selector?: string;\n\n  /** A function to retrieve depth of heading, by default depth is calculated based on tag name */\n  getDepth?: (element: HTMLElement) => number;\n\n  /** A function to retrieve heading value, by default `element.textContent` is used */\n  getValue?: (element: HTMLElement) => string;\n\n  /** Host element to attach scroll event listener, if not provided, `window` is used */\n  scrollHost?: HTMLElement;\n\n  /** Offset from the top of the viewport to use when determining the active heading, `0` by default */\n  offset?: number;\n}\n\nexport interface UseScrollSpyReturnValue {\n  /** Index of the active heading in the `data` array */\n  active: number;\n\n  /** Headings data. If not initialize, data is represented by an empty array. */\n  data: UseScrollSpyHeadingData[];\n\n  /** True if headings value have been retrieved from the DOM. */\n  initialized: boolean;\n\n  /** Function to update headings values after the parent component has mounted. */\n  reinitialize: () => void;\n}\n\nexport function useScrollSpy({\n  selector = 'h1, h2, h3, h4, h5, h6',\n  getDepth = getDefaultDepth,\n  getValue = getDefaultValue,\n  offset = 0,\n  scrollHost,\n}: UseScrollSpyOptions = {}): UseScrollSpyReturnValue {\n  const [active, setActive] = useState(-1);\n  const [initialized, setInitialized] = useState(false);\n  const [data, setData] = useState<UseScrollSpyHeadingData[]>([]);\n  const headingsRef = useRef<UseScrollSpyHeadingData[]>([]);\n\n  const handleScroll = () => {\n    setActive(\n      getActiveElement(\n        headingsRef.current.map((d) => d.getNode().getBoundingClientRect()),\n        offset\n      )\n    );\n  };\n\n  const initialize = () => {\n    const headings = getHeadingsData(\n      Array.from(document.querySelectorAll(selector)),\n      getDepth,\n      getValue\n    );\n    headingsRef.current = headings;\n    setInitialized(true);\n    setData(headings);\n    setActive(\n      getActiveElement(\n        headings.map((d) => d.getNode().getBoundingClientRect()),\n        offset\n      )\n    );\n  };\n\n  useEffect(() => {\n    initialize();\n    const _scrollHost = scrollHost || window;\n    _scrollHost.addEventListener('scroll', handleScroll);\n    return () => _scrollHost.removeEventListener('scroll', handleScroll);\n  }, [scrollHost]);\n\n  return {\n    reinitialize: initialize,\n    active,\n    initialized,\n    data,\n  };\n}\n\nexport namespace useScrollSpy {\n  export type Options = UseScrollSpyOptions;\n  export type ReturnValue = UseScrollSpyReturnValue;\n}\n"],"mappings":";;;;AAGA,SAAS,gBACP,UACA,UACA,UAC2B;CAC3B,MAAM,SAAoC,EAAE;AAE5C,MAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK,GAAG;EAC3C,MAAM,UAAU,SAAS;AACzB,SAAO,KAAK;GACV,OAAO,SAAS,QAAQ;GACxB,OAAO,SAAS,QAAQ;GACxB,IAAI,QAAQ,MAAM,UAAU;GAC5B,eAAgB,QAAQ,KAAK,SAAS,eAAe,QAAQ,GAAG,GAAI;GACrE,CAAC;;AAGJ,QAAO;;AAGT,SAAS,iBAAiB,OAAkB,SAAiB,GAAG;AAC9D,KAAI,MAAM,WAAW,EACnB,QAAO;AAiBT,QAdgB,MAAM,QACnB,KAAK,MAAM,UAAU;AACpB,MAAI,KAAK,IAAI,IAAI,WAAW,OAAO,GAAG,KAAK,IAAI,KAAK,IAAI,OAAO,CAC7D,QAAO;AAGT,SAAO;GACL;GACA,UAAU,KAAK;GAChB;IAEH;EAAE,OAAO;EAAG,UAAU,MAAM,GAAG;EAAG,CACnC,CAEc;;AAGjB,SAAS,gBAAgB,SAAsB;AAC7C,QAAO,OAAO,QAAQ,QAAQ,GAAG;;AAGnC,SAAS,gBAAgB,SAAsB;AAC7C,QAAO,QAAQ,eAAe;;AAgDhC,SAAgB,aAAa,EAC3B,WAAW,0BACX,WAAW,iBACX,WAAW,iBACX,SAAS,GACT,eACuB,EAAE,EAA2B;CACpD,MAAM,CAAC,QAAQ,aAAa,SAAS,GAAG;CACxC,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CACrD,MAAM,CAAC,MAAM,WAAW,SAAoC,EAAE,CAAC;CAC/D,MAAM,cAAc,OAAkC,EAAE,CAAC;CAEzD,MAAM,qBAAqB;AACzB,YACE,iBACE,YAAY,QAAQ,KAAK,MAAM,EAAE,SAAS,CAAC,uBAAuB,CAAC,EACnE,OACD,CACF;;CAGH,MAAM,mBAAmB;EACvB,MAAM,WAAW,gBACf,MAAM,KAAK,SAAS,iBAAiB,SAAS,CAAC,EAC/C,UACA,SACD;AACD,cAAY,UAAU;AACtB,iBAAe,KAAK;AACpB,UAAQ,SAAS;AACjB,YACE,iBACE,SAAS,KAAK,MAAM,EAAE,SAAS,CAAC,uBAAuB,CAAC,EACxD,OACD,CACF;;AAGH,iBAAgB;AACd,cAAY;EACZ,MAAM,cAAc,cAAc;AAClC,cAAY,iBAAiB,UAAU,aAAa;AACpD,eAAa,YAAY,oBAAoB,UAAU,aAAa;IACnE,CAAC,WAAW,CAAC;AAEhB,QAAO;EACL,cAAc;EACd;EACA;EACA;EACD"}
+{"version":3,"file":"use-scroll-spy.mjs","names":[],"sources":["../../src/use-scroll-spy/use-scroll-spy.ts"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { randomId } from '../utils';\n\nfunction getHeadingsData(\n  headings: HTMLElement[],\n  getDepth: (element: HTMLElement) => number,\n  getValue: (element: HTMLElement) => string\n): UseScrollSpyHeadingData[] {\n  const result: UseScrollSpyHeadingData[] = [];\n\n  for (let i = 0; i < headings.length; i += 1) {\n    const heading = headings[i];\n    result.push({\n      depth: getDepth(heading),\n      value: getValue(heading),\n      id: heading.id || randomId(),\n      getNode: () => (heading.id ? document.getElementById(heading.id)! : heading),\n    });\n  }\n\n  return result;\n}\n\nfunction getActiveElement(rects: DOMRect[], offset: number = 0) {\n  if (rects.length === 0) {\n    return -1;\n  }\n\n  const closest = rects.reduce(\n    (acc, item, index) => {\n      if (Math.abs(acc.position - offset) < Math.abs(item.y - offset)) {\n        return acc;\n      }\n\n      return {\n        index,\n        position: item.y,\n      };\n    },\n    { index: 0, position: rects[0].y }\n  );\n\n  return closest.index;\n}\n\nfunction getDefaultDepth(element: HTMLElement) {\n  return Number(element.tagName[1]);\n}\n\nfunction getDefaultValue(element: HTMLElement) {\n  return element.textContent || '';\n}\n\nexport interface UseScrollSpyHeadingData {\n  /** Heading depth, 1-6 */\n  depth: number;\n\n  /** Heading text content value */\n  value: string;\n\n  /** Heading id */\n  id: string;\n\n  /** Function to get heading node */\n  getNode: () => HTMLElement;\n}\n\nexport interface UseScrollSpyOptions {\n  /** Selector to get headings, `'h1, h2, h3, h4, h5, h6'` by default */\n  selector?: string;\n\n  /** A function to retrieve depth of heading, by default depth is calculated based on tag name */\n  getDepth?: (element: HTMLElement) => number;\n\n  /** A function to retrieve heading value, by default `element.textContent` is used */\n  getValue?: (element: HTMLElement) => string;\n\n  /** Host element to attach scroll event listener, if not provided, `window` is used */\n  scrollHost?: HTMLElement;\n\n  /** Offset from the top of the viewport to use when determining the active heading, `0` by default */\n  offset?: number;\n}\n\nexport interface UseScrollSpyReturnValue {\n  /** Index of the active heading in the `data` array */\n  active: number;\n\n  /** Headings data. If not initialize, data is represented by an empty array. */\n  data: UseScrollSpyHeadingData[];\n\n  /** True if headings value have been retrieved from the DOM. */\n  initialized: boolean;\n\n  /** Function to update headings values after the parent component has mounted. */\n  reinitialize: () => void;\n}\n\nexport function useScrollSpy({\n  selector = 'h1, h2, h3, h4, h5, h6',\n  getDepth = getDefaultDepth,\n  getValue = getDefaultValue,\n  offset = 0,\n  scrollHost,\n}: UseScrollSpyOptions = {}): UseScrollSpyReturnValue {\n  const [active, setActive] = useState(-1);\n  const [initialized, setInitialized] = useState(false);\n  const [data, setData] = useState<UseScrollSpyHeadingData[]>([]);\n  const headingsRef = useRef<UseScrollSpyHeadingData[]>([]);\n\n  const handleScroll = useEffectEvent(() => {\n    setActive(\n      getActiveElement(\n        headingsRef.current.map((d) => d.getNode().getBoundingClientRect()),\n        offset\n      )\n    );\n  });\n\n  const initialize = () => {\n    const headings = getHeadingsData(\n      Array.from(document.querySelectorAll(selector)),\n      getDepth,\n      getValue\n    );\n    headingsRef.current = headings;\n    setInitialized(true);\n    setData(headings);\n    setActive(\n      getActiveElement(\n        headings.map((d) => d.getNode().getBoundingClientRect()),\n        offset\n      )\n    );\n  };\n\n  useEffect(() => {\n    initialize();\n    const _scrollHost = scrollHost || window;\n    _scrollHost.addEventListener('scroll', handleScroll);\n    return () => _scrollHost.removeEventListener('scroll', handleScroll);\n  }, [scrollHost, selector, offset]);\n\n  return {\n    reinitialize: initialize,\n    active,\n    initialized,\n    data,\n  };\n}\n\nexport namespace useScrollSpy {\n  export type Options = UseScrollSpyOptions;\n  export type ReturnValue = UseScrollSpyReturnValue;\n}\n"],"mappings":";;;;AAGA,SAAS,gBACP,UACA,UACA,UAC2B;CAC3B,MAAM,SAAoC,EAAE;AAE5C,MAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK,GAAG;EAC3C,MAAM,UAAU,SAAS;AACzB,SAAO,KAAK;GACV,OAAO,SAAS,QAAQ;GACxB,OAAO,SAAS,QAAQ;GACxB,IAAI,QAAQ,MAAM,UAAU;GAC5B,eAAgB,QAAQ,KAAK,SAAS,eAAe,QAAQ,GAAG,GAAI;GACrE,CAAC;;AAGJ,QAAO;;AAGT,SAAS,iBAAiB,OAAkB,SAAiB,GAAG;AAC9D,KAAI,MAAM,WAAW,EACnB,QAAO;AAiBT,QAdgB,MAAM,QACnB,KAAK,MAAM,UAAU;AACpB,MAAI,KAAK,IAAI,IAAI,WAAW,OAAO,GAAG,KAAK,IAAI,KAAK,IAAI,OAAO,CAC7D,QAAO;AAGT,SAAO;GACL;GACA,UAAU,KAAK;GAChB;IAEH;EAAE,OAAO;EAAG,UAAU,MAAM,GAAG;EAAG,CACnC,CAEc;;AAGjB,SAAS,gBAAgB,SAAsB;AAC7C,QAAO,OAAO,QAAQ,QAAQ,GAAG;;AAGnC,SAAS,gBAAgB,SAAsB;AAC7C,QAAO,QAAQ,eAAe;;AAgDhC,SAAgB,aAAa,EAC3B,WAAW,0BACX,WAAW,iBACX,WAAW,iBACX,SAAS,GACT,eACuB,EAAE,EAA2B;CACpD,MAAM,CAAC,QAAQ,aAAa,SAAS,GAAG;CACxC,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CACrD,MAAM,CAAC,MAAM,WAAW,SAAoC,EAAE,CAAC;CAC/D,MAAM,cAAc,OAAkC,EAAE,CAAC;CAEzD,MAAM,eAAe,qBAAqB;AACxC,YACE,iBACE,YAAY,QAAQ,KAAK,MAAM,EAAE,SAAS,CAAC,uBAAuB,CAAC,EACnE,OACD,CACF;GACD;CAEF,MAAM,mBAAmB;EACvB,MAAM,WAAW,gBACf,MAAM,KAAK,SAAS,iBAAiB,SAAS,CAAC,EAC/C,UACA,SACD;AACD,cAAY,UAAU;AACtB,iBAAe,KAAK;AACpB,UAAQ,SAAS;AACjB,YACE,iBACE,SAAS,KAAK,MAAM,EAAE,SAAS,CAAC,uBAAuB,CAAC,EACxD,OACD,CACF;;AAGH,iBAAgB;AACd,cAAY;EACZ,MAAM,cAAc,cAAc;AAClC,cAAY,iBAAiB,UAAU,aAAa;AACpD,eAAa,YAAY,oBAAoB,UAAU,aAAa;IACnE;EAAC;EAAY;EAAU;EAAO,CAAC;AAElC,QAAO;EACL,cAAc;EACd;EACA;EACA;EACD"}

package/esm/use-scroller/use-scroller.mjs

@@ -21,10 +21,10 @@ function useScroller(options = {}) {
 			let newCanScrollStart;
 			let newCanScrollEnd;
 			if (isRtl) {
-				newCanScrollStart = scrollLeft < 0;
-				newCanScrollEnd = scrollLeft > -(scrollWidth - clientWidth);
+				newCanScrollStart = scrollLeft < -1;
+				newCanScrollEnd = scrollLeft > -(scrollWidth - clientWidth) + 1;
 			} else {
-				newCanScrollStart = scrollLeft > 0;
+				newCanScrollStart = scrollLeft > 1;
 				newCanScrollEnd = scrollLeft < scrollWidth - clientWidth - 1;
 			}
 			setCanScrollStart(newCanScrollStart);