@mantine/hooks 3.2.2 → 3.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -68,7 +68,7 @@ function useScrollIntoView({
68
68
  }
69
69
  }
70
70
  animateScroll();
71
- }, []);
71
+ }, [scrollableRef.current]);
72
72
  const handleStop = () => {
73
73
  if (cancelable) {
74
74
  shouldStop.current = true;
@@ -1 +1 @@
1
- {"version":3,"file":"use-scroll-into-view.js","sources":["../../src/use-scroll-into-view/use-scroll-into-view.ts"],"sourcesContent":["import { useCallback, useRef, useEffect } from 'react';\nimport { useReducedMotion } from '../use-reduced-motion/use-reduced-motion';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\nimport { easeInOutQuad } from './utils/ease-in-out-quad';\nimport { getRelativePosition } from './utils/get-relative-position';\nimport { getScrollStart } from './utils/get-scroll-start';\nimport { setScrollParam } from './utils/set-scroll-param';\n\ninterface ScrollIntoViewAnimation {\n /** target element alignment relatively to parent based on current axis */\n alignment?: 'start' | 'end' | 'center';\n}\n\ninterface ScrollIntoViewParams {\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 function useScrollIntoView<\n Target extends HTMLElement,\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}: ScrollIntoViewParams = {}) {\n const frameID = useRef(0);\n const startTime = useRef(0);\n const shouldStop = useRef(false);\n\n const scrollableRef = useRef<Parent>(null);\n const targetRef = useRef<Target>(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(({ alignment = 'start' }: ScrollIntoViewAnimation = {}) => {\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\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"],"names":["easeInOutQuad","useRef","useReducedMotion","useCallback","getScrollStart","getRelativePosition","setScrollParam","useWindowEvent","useEffect"],"mappings":"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"}
1
+ {"version":3,"file":"use-scroll-into-view.js","sources":["../../src/use-scroll-into-view/use-scroll-into-view.ts"],"sourcesContent":["import { useCallback, useRef, useEffect } from 'react';\nimport { useReducedMotion } from '../use-reduced-motion/use-reduced-motion';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\nimport { easeInOutQuad } from './utils/ease-in-out-quad';\nimport { getRelativePosition } from './utils/get-relative-position';\nimport { getScrollStart } from './utils/get-scroll-start';\nimport { setScrollParam } from './utils/set-scroll-param';\n\ninterface ScrollIntoViewAnimation {\n /** target element alignment relatively to parent based on current axis */\n alignment?: 'start' | 'end' | 'center';\n}\n\ninterface ScrollIntoViewParams {\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 function useScrollIntoView<\n Target extends HTMLElement,\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}: ScrollIntoViewParams = {}) {\n const frameID = useRef(0);\n const startTime = useRef(0);\n const shouldStop = useRef(false);\n\n const scrollableRef = useRef<Parent>(null);\n const targetRef = useRef<Target>(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' }: ScrollIntoViewAnimation = {}) => {\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 [scrollableRef.current]\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"],"names":["easeInOutQuad","useRef","useReducedMotion","useCallback","getScrollStart","getRelativePosition","setScrollParam","useWindowEvent","useEffect"],"mappings":"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"}
@@ -64,7 +64,7 @@ function useScrollIntoView({
64
64
  }
65
65
  }
66
66
  animateScroll();
67
- }, []);
67
+ }, [scrollableRef.current]);
68
68
  const handleStop = () => {
69
69
  if (cancelable) {
70
70
  shouldStop.current = true;
@@ -1 +1 @@
1
- {"version":3,"file":"use-scroll-into-view.js","sources":["../../src/use-scroll-into-view/use-scroll-into-view.ts"],"sourcesContent":["import { useCallback, useRef, useEffect } from 'react';\nimport { useReducedMotion } from '../use-reduced-motion/use-reduced-motion';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\nimport { easeInOutQuad } from './utils/ease-in-out-quad';\nimport { getRelativePosition } from './utils/get-relative-position';\nimport { getScrollStart } from './utils/get-scroll-start';\nimport { setScrollParam } from './utils/set-scroll-param';\n\ninterface ScrollIntoViewAnimation {\n /** target element alignment relatively to parent based on current axis */\n alignment?: 'start' | 'end' | 'center';\n}\n\ninterface ScrollIntoViewParams {\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 function useScrollIntoView<\n Target extends HTMLElement,\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}: ScrollIntoViewParams = {}) {\n const frameID = useRef(0);\n const startTime = useRef(0);\n const shouldStop = useRef(false);\n\n const scrollableRef = useRef<Parent>(null);\n const targetRef = useRef<Target>(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(({ alignment = 'start' }: ScrollIntoViewAnimation = {}) => {\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\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"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"use-scroll-into-view.js","sources":["../../src/use-scroll-into-view/use-scroll-into-view.ts"],"sourcesContent":["import { useCallback, useRef, useEffect } from 'react';\nimport { useReducedMotion } from '../use-reduced-motion/use-reduced-motion';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\nimport { easeInOutQuad } from './utils/ease-in-out-quad';\nimport { getRelativePosition } from './utils/get-relative-position';\nimport { getScrollStart } from './utils/get-scroll-start';\nimport { setScrollParam } from './utils/set-scroll-param';\n\ninterface ScrollIntoViewAnimation {\n /** target element alignment relatively to parent based on current axis */\n alignment?: 'start' | 'end' | 'center';\n}\n\ninterface ScrollIntoViewParams {\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 function useScrollIntoView<\n Target extends HTMLElement,\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}: ScrollIntoViewParams = {}) {\n const frameID = useRef(0);\n const startTime = useRef(0);\n const shouldStop = useRef(false);\n\n const scrollableRef = useRef<Parent>(null);\n const targetRef = useRef<Target>(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' }: ScrollIntoViewAnimation = {}) => {\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 [scrollableRef.current]\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"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"use-scroll-into-view.d.ts","sourceRoot":"","sources":["../../src/use-scroll-into-view/use-scroll-into-view.ts"],"names":[],"mappings":"AAQA,UAAU,uBAAuB;IAC/B,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;CACxC;AAED,UAAU,oBAAoB;IAC5B,kCAAkC;IAClC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,qBAAqB;IACrB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IAEjB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAE/B,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,kEAAkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,iBAAiB,CAC/B,MAAM,SAAS,WAAW,EAC1B,MAAM,SAAS,WAAW,GAAG,IAAI,GAAG,IAAI,EACxC,EACA,QAAe,EACf,IAAU,EACV,cAAc,EACd,MAAsB,EACtB,MAAU,EACV,UAAiB,EACjB,MAAc,GACf,GAAE,oBAAyB;;;qCAgBmC,uBAAuB;kBANjE,IAAI;EAqFxB"}
1
+ {"version":3,"file":"use-scroll-into-view.d.ts","sourceRoot":"","sources":["../../src/use-scroll-into-view/use-scroll-into-view.ts"],"names":[],"mappings":"AAQA,UAAU,uBAAuB;IAC/B,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;CACxC;AAED,UAAU,oBAAoB;IAC5B,kCAAkC;IAClC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,qBAAqB;IACrB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IAEjB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAE/B,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,kEAAkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,iBAAiB,CAC/B,MAAM,SAAS,WAAW,EAC1B,MAAM,SAAS,WAAW,GAAG,IAAI,GAAG,IAAI,EACxC,EACA,QAAe,EACf,IAAU,EACV,cAAc,EACd,MAAsB,EACtB,MAAU,EACV,UAAiB,EACjB,MAAc,GACf,GAAE,oBAAyB;;;qCAiBE,uBAAuB;kBAPhC,IAAI;EAwFxB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mantine/hooks",
3
- "version": "3.2.2",
3
+ "version": "3.2.3",
4
4
  "main": "cjs/index.js",
5
5
  "module": "esm/index.js",
6
6
  "types": "lib/index.d.ts",