@mantine/hooks 9.0.2 → 9.1.0

package/cjs/use-scroller/use-scroller.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroller.cjs","names":[],"sources":["../../src/use-scroller/use-scroller.ts"],"sourcesContent":["import { RefCallback, useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface UseScrollerOptions {\n  /** Amount of pixels to scroll when calling scroll functions, `200` by default */\n  scrollAmount?: number;\n\n  /** Determines whether content can be scrolled by dragging with mouse, `true` by default */\n  draggable?: boolean;\n\n  /** Called when scroll state changes (canScrollStart or canScrollEnd) */\n  onScrollStateChange?: (state: UseScrollerScrollState) => void;\n}\n\nexport interface UseScrollerScrollState {\n  /** Whether content can be scrolled towards the start (left in LTR, right in RTL) */\n  canScrollStart: boolean;\n\n  /** Whether content can be scrolled towards the end (right in LTR, left in RTL) */\n  canScrollEnd: boolean;\n}\n\nexport interface UseScrollerReturnValue<T extends HTMLElement = HTMLDivElement> {\n  /** Ref callback to attach to the scrollable container element */\n  ref: RefCallback<T | null>;\n\n  /** Whether content can be scrolled towards the start */\n  canScrollStart: boolean;\n\n  /** Whether content can be scrolled towards the end */\n  canScrollEnd: boolean;\n\n  /** Scrolls towards the start direction */\n  scrollStart: () => void;\n\n  /** Scrolls towards the end direction */\n  scrollEnd: () => void;\n\n  /** `true` if the user is currently dragging the content */\n  isDragging: boolean;\n\n  /** Props to spread on the scrollable container for drag functionality */\n  dragHandlers: {\n    onMouseDown: (e: React.MouseEvent) => void;\n    onMouseMove: (e: React.MouseEvent) => void;\n    onMouseUp: () => void;\n    onMouseLeave: () => void;\n  };\n}\n\nexport function useScroller<T extends HTMLElement = HTMLDivElement>(\n  options: UseScrollerOptions = {}\n): UseScrollerReturnValue<T> {\n  const { scrollAmount = 200, draggable = true, onScrollStateChange } = options;\n\n  const containerRef = useRef<T | null>(null);\n\n  const [canScrollStart, setCanScrollStart] = useState(false);\n  const [canScrollEnd, setCanScrollEnd] = useState(false);\n  const [isDragging, setIsDragging] = useState(false);\n\n  const isDraggingRef = useRef(false);\n  const hasDraggedRef = useRef(false);\n  const startX = useRef(0);\n  const scrollLeftStart = useRef(0);\n\n  const onScrollStateChangeRef = useRef(onScrollStateChange);\n  onScrollStateChangeRef.current = onScrollStateChange;\n\n  const updateScrollState = useCallback(() => {\n    const container = containerRef.current;\n    if (container) {\n      const { scrollLeft, scrollWidth, clientWidth } = container;\n      const isRtl = getComputedStyle(container).direction === 'rtl';\n\n      let newCanScrollStart: boolean;\n      let newCanScrollEnd: boolean;\n\n      if (isRtl) {\n        newCanScrollStart = scrollLeft < 0;\n        newCanScrollEnd = scrollLeft > -(scrollWidth - clientWidth);\n      } else {\n        newCanScrollStart = scrollLeft > 0;\n        newCanScrollEnd = scrollLeft < scrollWidth - clientWidth - 1;\n      }\n\n      setCanScrollStart(newCanScrollStart);\n      setCanScrollEnd(newCanScrollEnd);\n\n      onScrollStateChangeRef.current?.({\n        canScrollStart: newCanScrollStart,\n        canScrollEnd: newCanScrollEnd,\n      });\n    }\n  }, []);\n\n  useEffect(() => {\n    updateScrollState();\n    const container = containerRef.current;\n    if (container) {\n      container.addEventListener('scroll', updateScrollState);\n      const resizeObserver = new ResizeObserver(updateScrollState);\n      resizeObserver.observe(container);\n      return () => {\n        container.removeEventListener('scroll', updateScrollState);\n        resizeObserver.disconnect();\n      };\n    }\n    return undefined;\n  }, [updateScrollState]);\n\n  const scroll = useCallback(\n    (direction: 'start' | 'end') => {\n      const container = containerRef.current;\n      if (container) {\n        const isRtl = getComputedStyle(container).direction === 'rtl';\n        const amount = scrollAmount;\n        const scrollBy = direction === 'end' ? amount : -amount;\n        const adjustedScrollBy = isRtl ? -scrollBy : scrollBy;\n\n        container.scrollBy({\n          left: adjustedScrollBy,\n          behavior: 'smooth',\n        });\n      }\n    },\n    [scrollAmount]\n  );\n\n  const scrollStart = useCallback(() => scroll('start'), [scroll]);\n  const scrollEnd = useCallback(() => scroll('end'), [scroll]);\n\n  const handleMouseDown = useCallback(\n    (event: React.MouseEvent) => {\n      if (!draggable) {\n        return;\n      }\n      const container = containerRef.current;\n      if (container) {\n        isDraggingRef.current = true;\n        hasDraggedRef.current = false;\n        setIsDragging(true);\n        startX.current = event.pageX - container.offsetLeft;\n        scrollLeftStart.current = container.scrollLeft;\n        container.style.cursor = 'grabbing';\n        container.style.userSelect = 'none';\n      }\n    },\n    [draggable]\n  );\n\n  const handleMouseMove = useCallback((event: React.MouseEvent) => {\n    if (!isDraggingRef.current) {\n      return;\n    }\n    event.preventDefault();\n    const container = containerRef.current;\n    if (container) {\n      const x = event.pageX - container.offsetLeft;\n      const walk = x - startX.current;\n      if (Math.abs(walk) > 5) {\n        hasDraggedRef.current = true;\n      }\n      container.scrollLeft = scrollLeftStart.current - walk;\n    }\n  }, []);\n\n  const handleMouseUp = useCallback(() => {\n    const wasDragged = hasDraggedRef.current;\n    isDraggingRef.current = false;\n    hasDraggedRef.current = false;\n    setIsDragging(false);\n    const container = containerRef.current;\n    if (container) {\n      container.style.cursor = '';\n      container.style.userSelect = '';\n\n      if (wasDragged) {\n        const suppressClick = (event: MouseEvent) => {\n          event.stopPropagation();\n          event.preventDefault();\n          container.removeEventListener('click', suppressClick, true);\n        };\n        container.addEventListener('click', suppressClick, true);\n      }\n    }\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    if (isDraggingRef.current) {\n      handleMouseUp();\n    }\n  }, [handleMouseUp]);\n\n  const assignRef: RefCallback<T | null> = useCallback(\n    (node) => {\n      containerRef.current = node;\n      if (node) {\n        updateScrollState();\n      }\n    },\n    [updateScrollState]\n  );\n\n  return {\n    ref: assignRef,\n    canScrollStart,\n    canScrollEnd,\n    scrollStart,\n    scrollEnd,\n    isDragging,\n    dragHandlers: {\n      onMouseDown: handleMouseDown,\n      onMouseMove: handleMouseMove,\n      onMouseUp: handleMouseUp,\n      onMouseLeave: handleMouseLeave,\n    },\n  };\n}\n\nexport namespace useScroller {\n  export type Options = UseScrollerOptions;\n  export type ReturnValue<T extends HTMLElement = HTMLDivElement> = UseScrollerReturnValue<T>;\n  export type ScrollState = UseScrollerScrollState;\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-scroller.cjs","names":[],"sources":["../../src/use-scroller/use-scroller.ts"],"sourcesContent":["import { RefCallback, useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface UseScrollerOptions {\n  /** Amount of pixels to scroll when calling scroll functions, `200` by default */\n  scrollAmount?: number;\n\n  /** Determines whether content can be scrolled by dragging with mouse, `true` by default */\n  draggable?: boolean;\n\n  /** Called when scroll state changes (canScrollStart or canScrollEnd) */\n  onScrollStateChange?: (state: UseScrollerScrollState) => void;\n}\n\nexport interface UseScrollerScrollState {\n  /** Whether content can be scrolled towards the start (left in LTR, right in RTL) */\n  canScrollStart: boolean;\n\n  /** Whether content can be scrolled towards the end (right in LTR, left in RTL) */\n  canScrollEnd: boolean;\n}\n\nexport interface UseScrollerReturnValue<T extends HTMLElement = HTMLDivElement> {\n  /** Ref callback to attach to the scrollable container element */\n  ref: RefCallback<T | null>;\n\n  /** Whether content can be scrolled towards the start */\n  canScrollStart: boolean;\n\n  /** Whether content can be scrolled towards the end */\n  canScrollEnd: boolean;\n\n  /** Scrolls towards the start direction */\n  scrollStart: () => void;\n\n  /** Scrolls towards the end direction */\n  scrollEnd: () => void;\n\n  /** `true` if the user is currently dragging the content */\n  isDragging: boolean;\n\n  /** Props to spread on the scrollable container for drag functionality */\n  dragHandlers: {\n    onMouseDown: (e: React.MouseEvent) => void;\n    onMouseMove: (e: React.MouseEvent) => void;\n    onMouseUp: () => void;\n    onMouseLeave: () => void;\n  };\n}\n\nexport function useScroller<T extends HTMLElement = HTMLDivElement>(\n  options: UseScrollerOptions = {}\n): UseScrollerReturnValue<T> {\n  const { scrollAmount = 200, draggable = true, onScrollStateChange } = options;\n\n  const containerRef = useRef<T | null>(null);\n\n  const [canScrollStart, setCanScrollStart] = useState(false);\n  const [canScrollEnd, setCanScrollEnd] = useState(false);\n  const [isDragging, setIsDragging] = useState(false);\n\n  const isDraggingRef = useRef(false);\n  const hasDraggedRef = useRef(false);\n  const startX = useRef(0);\n  const scrollLeftStart = useRef(0);\n\n  const onScrollStateChangeRef = useRef(onScrollStateChange);\n  onScrollStateChangeRef.current = onScrollStateChange;\n\n  const updateScrollState = useCallback(() => {\n    const container = containerRef.current;\n    if (container) {\n      const { scrollLeft, scrollWidth, clientWidth } = container;\n      const isRtl = getComputedStyle(container).direction === 'rtl';\n\n      let newCanScrollStart: boolean;\n      let newCanScrollEnd: boolean;\n\n      if (isRtl) {\n        newCanScrollStart = scrollLeft < -1;\n        newCanScrollEnd = scrollLeft > -(scrollWidth - clientWidth) + 1;\n      } else {\n        newCanScrollStart = scrollLeft > 1;\n        newCanScrollEnd = scrollLeft < scrollWidth - clientWidth - 1;\n      }\n\n      setCanScrollStart(newCanScrollStart);\n      setCanScrollEnd(newCanScrollEnd);\n\n      onScrollStateChangeRef.current?.({\n        canScrollStart: newCanScrollStart,\n        canScrollEnd: newCanScrollEnd,\n      });\n    }\n  }, []);\n\n  useEffect(() => {\n    updateScrollState();\n    const container = containerRef.current;\n    if (container) {\n      container.addEventListener('scroll', updateScrollState);\n      const resizeObserver = new ResizeObserver(updateScrollState);\n      resizeObserver.observe(container);\n      return () => {\n        container.removeEventListener('scroll', updateScrollState);\n        resizeObserver.disconnect();\n      };\n    }\n    return undefined;\n  }, [updateScrollState]);\n\n  const scroll = useCallback(\n    (direction: 'start' | 'end') => {\n      const container = containerRef.current;\n      if (container) {\n        const isRtl = getComputedStyle(container).direction === 'rtl';\n        const amount = scrollAmount;\n        const scrollBy = direction === 'end' ? amount : -amount;\n        const adjustedScrollBy = isRtl ? -scrollBy : scrollBy;\n\n        container.scrollBy({\n          left: adjustedScrollBy,\n          behavior: 'smooth',\n        });\n      }\n    },\n    [scrollAmount]\n  );\n\n  const scrollStart = useCallback(() => scroll('start'), [scroll]);\n  const scrollEnd = useCallback(() => scroll('end'), [scroll]);\n\n  const handleMouseDown = useCallback(\n    (event: React.MouseEvent) => {\n      if (!draggable) {\n        return;\n      }\n      const container = containerRef.current;\n      if (container) {\n        isDraggingRef.current = true;\n        hasDraggedRef.current = false;\n        setIsDragging(true);\n        startX.current = event.pageX - container.offsetLeft;\n        scrollLeftStart.current = container.scrollLeft;\n        container.style.cursor = 'grabbing';\n        container.style.userSelect = 'none';\n      }\n    },\n    [draggable]\n  );\n\n  const handleMouseMove = useCallback((event: React.MouseEvent) => {\n    if (!isDraggingRef.current) {\n      return;\n    }\n    event.preventDefault();\n    const container = containerRef.current;\n    if (container) {\n      const x = event.pageX - container.offsetLeft;\n      const walk = x - startX.current;\n      if (Math.abs(walk) > 5) {\n        hasDraggedRef.current = true;\n      }\n      container.scrollLeft = scrollLeftStart.current - walk;\n    }\n  }, []);\n\n  const handleMouseUp = useCallback(() => {\n    const wasDragged = hasDraggedRef.current;\n    isDraggingRef.current = false;\n    hasDraggedRef.current = false;\n    setIsDragging(false);\n    const container = containerRef.current;\n    if (container) {\n      container.style.cursor = '';\n      container.style.userSelect = '';\n\n      if (wasDragged) {\n        const suppressClick = (event: MouseEvent) => {\n          event.stopPropagation();\n          event.preventDefault();\n          container.removeEventListener('click', suppressClick, true);\n        };\n        container.addEventListener('click', suppressClick, true);\n      }\n    }\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    if (isDraggingRef.current) {\n      handleMouseUp();\n    }\n  }, [handleMouseUp]);\n\n  const assignRef: RefCallback<T | null> = useCallback(\n    (node) => {\n      containerRef.current = node;\n      if (node) {\n        updateScrollState();\n      }\n    },\n    [updateScrollState]\n  );\n\n  return {\n    ref: assignRef,\n    canScrollStart,\n    canScrollEnd,\n    scrollStart,\n    scrollEnd,\n    isDragging,\n    dragHandlers: {\n      onMouseDown: handleMouseDown,\n      onMouseMove: handleMouseMove,\n      onMouseUp: handleMouseUp,\n      onMouseLeave: handleMouseLeave,\n    },\n  };\n}\n\nexport namespace useScroller {\n  export type Options = UseScrollerOptions;\n  export type ReturnValue<T extends HTMLElement = HTMLDivElement> = UseScrollerReturnValue<T>;\n  export type ScrollState = UseScrollerScrollState;\n}\n"],"mappings":"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"}

package/cjs/use-set/use-set.cjs

@@ -5,7 +5,12 @@ let react = require("react");
 function readonlySetLikeToSet(input) {
 	if (input instanceof Set) return input;
 	const result = /* @__PURE__ */ new Set();
-	for (const item of input) result.add(item);
+	const iterator = input.keys();
+	let next = iterator.next();
+	while (!next.done) {
+		result.add(next.value);
+		next = iterator.next();
+	}
 	return result;
 }
 function useSet(values) {

package/cjs/use-set/use-set.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-set.cjs","names":["useForceUpdate"],"sources":["../../src/use-set/use-set.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { useForceUpdate } from '../use-force-update/use-force-update';\n\nexport function readonlySetLikeToSet<T>(input: ReadonlySetLike<T>): Set<T> {\n  if (input instanceof Set) {\n    return input;\n  }\n  const result = new Set<T>();\n  for (const item of input as any) {\n    result.add(item);\n  }\n  return result;\n}\n\nexport function useSet<T>(values?: T[]): Set<T> {\n  const setRef = useRef(new Set(values));\n  const forceUpdate = useForceUpdate();\n\n  setRef.current.add = (...args) => {\n    const res = Set.prototype.add.apply(setRef.current, args);\n    forceUpdate();\n    return res;\n  };\n\n  setRef.current.clear = (...args) => {\n    Set.prototype.clear.apply(setRef.current, args);\n    forceUpdate();\n  };\n\n  setRef.current.delete = (...args) => {\n    const res = Set.prototype.delete.apply(setRef.current, args);\n    forceUpdate();\n    return res;\n  };\n\n  setRef.current.union = <U>(other: ReadonlySetLike<U>): Set<T | U> => {\n    const result = new Set<T | U>(setRef.current as Set<T>);\n    readonlySetLikeToSet(other).forEach((item) => result.add(item));\n    return result;\n  };\n\n  setRef.current.intersection = <U>(other: ReadonlySetLike<U>): Set<T & U> => {\n    const result = new Set<T & U>();\n    const otherSet = readonlySetLikeToSet(other);\n    setRef.current.forEach((item) => {\n      if (otherSet.has(item as any)) {\n        result.add(item as T & U);\n      }\n    });\n    return result;\n  };\n\n  setRef.current.difference = <U>(other: ReadonlySetLike<U>): Set<T> => {\n    const result = new Set<T>();\n    const otherSet = readonlySetLikeToSet(other);\n    setRef.current.forEach((item) => {\n      if (!otherSet.has(item as any)) {\n        result.add(item);\n      }\n    });\n    return result;\n  };\n\n  setRef.current.symmetricDifference = <U>(other: ReadonlySetLike<U>): Set<T | U> => {\n    const result = new Set<T | U>();\n    const otherSet = readonlySetLikeToSet(other);\n\n    setRef.current.forEach((item) => {\n      if (!otherSet.has(item as any)) {\n        result.add(item);\n      }\n    });\n\n    otherSet.forEach((item) => {\n      if (!setRef.current.has(item as any)) {\n        result.add(item);\n      }\n    });\n\n    return result;\n  };\n\n  return setRef.current;\n}\n"],"mappings":";;;;AAGA,SAAgB,qBAAwB,OAAmC;AACzE,KAAI,iBAAiB,IACnB,QAAO;CAET,MAAM,yBAAS,IAAI,KAAQ;AAC3B,MAAK,MAAM,QAAQ,MACjB,QAAO,IAAI,KAAK;AAElB,QAAO;;AAGT,SAAgB,OAAU,QAAsB;CAC9C,MAAM,UAAA,GAAA,MAAA,QAAgB,IAAI,IAAI,OAAO,CAAC;CACtC,MAAM,cAAcA,yBAAAA,gBAAgB;AAEpC,QAAO,QAAQ,OAAO,GAAG,SAAS;EAChC,MAAM,MAAM,IAAI,UAAU,IAAI,MAAM,OAAO,SAAS,KAAK;AACzD,eAAa;AACb,SAAO;;AAGT,QAAO,QAAQ,SAAS,GAAG,SAAS;AAClC,MAAI,UAAU,MAAM,MAAM,OAAO,SAAS,KAAK;AAC/C,eAAa;;AAGf,QAAO,QAAQ,UAAU,GAAG,SAAS;EACnC,MAAM,MAAM,IAAI,UAAU,OAAO,MAAM,OAAO,SAAS,KAAK;AAC5D,eAAa;AACb,SAAO;;AAGT,QAAO,QAAQ,SAAY,UAA0C;EACnE,MAAM,SAAS,IAAI,IAAW,OAAO,QAAkB;AACvD,uBAAqB,MAAM,CAAC,SAAS,SAAS,OAAO,IAAI,KAAK,CAAC;AAC/D,SAAO;;AAGT,QAAO,QAAQ,gBAAmB,UAA0C;EAC1E,MAAM,yBAAS,IAAI,KAAY;EAC/B,MAAM,WAAW,qBAAqB,MAAM;AAC5C,SAAO,QAAQ,SAAS,SAAS;AAC/B,OAAI,SAAS,IAAI,KAAY,CAC3B,QAAO,IAAI,KAAc;IAE3B;AACF,SAAO;;AAGT,QAAO,QAAQ,cAAiB,UAAsC;EACpE,MAAM,yBAAS,IAAI,KAAQ;EAC3B,MAAM,WAAW,qBAAqB,MAAM;AAC5C,SAAO,QAAQ,SAAS,SAAS;AAC/B,OAAI,CAAC,SAAS,IAAI,KAAY,CAC5B,QAAO,IAAI,KAAK;IAElB;AACF,SAAO;;AAGT,QAAO,QAAQ,uBAA0B,UAA0C;EACjF,MAAM,yBAAS,IAAI,KAAY;EAC/B,MAAM,WAAW,qBAAqB,MAAM;AAE5C,SAAO,QAAQ,SAAS,SAAS;AAC/B,OAAI,CAAC,SAAS,IAAI,KAAY,CAC5B,QAAO,IAAI,KAAK;IAElB;AAEF,WAAS,SAAS,SAAS;AACzB,OAAI,CAAC,OAAO,QAAQ,IAAI,KAAY,CAClC,QAAO,IAAI,KAAK;IAElB;AAEF,SAAO;;AAGT,QAAO,OAAO"}
+{"version":3,"file":"use-set.cjs","names":["useForceUpdate"],"sources":["../../src/use-set/use-set.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { useForceUpdate } from '../use-force-update/use-force-update';\n\nexport function readonlySetLikeToSet<T>(input: ReadonlySetLike<T>): Set<T> {\n  if (input instanceof Set) {\n    return input;\n  }\n  const result = new Set<T>();\n  const iterator = input.keys();\n  let next = iterator.next();\n  while (!next.done) {\n    result.add(next.value);\n    next = iterator.next();\n  }\n  return result;\n}\n\nexport function useSet<T>(values?: T[]): Set<T> {\n  const setRef = useRef(new Set(values));\n  const forceUpdate = useForceUpdate();\n\n  setRef.current.add = (...args) => {\n    const res = Set.prototype.add.apply(setRef.current, args);\n    forceUpdate();\n    return res;\n  };\n\n  setRef.current.clear = (...args) => {\n    Set.prototype.clear.apply(setRef.current, args);\n    forceUpdate();\n  };\n\n  setRef.current.delete = (...args) => {\n    const res = Set.prototype.delete.apply(setRef.current, args);\n    forceUpdate();\n    return res;\n  };\n\n  setRef.current.union = <U>(other: ReadonlySetLike<U>): Set<T | U> => {\n    const result = new Set<T | U>(setRef.current as Set<T>);\n    readonlySetLikeToSet(other).forEach((item) => result.add(item));\n    return result;\n  };\n\n  setRef.current.intersection = <U>(other: ReadonlySetLike<U>): Set<T & U> => {\n    const result = new Set<T & U>();\n    const otherSet = readonlySetLikeToSet(other);\n    setRef.current.forEach((item) => {\n      if (otherSet.has(item as any)) {\n        result.add(item as T & U);\n      }\n    });\n    return result;\n  };\n\n  setRef.current.difference = <U>(other: ReadonlySetLike<U>): Set<T> => {\n    const result = new Set<T>();\n    const otherSet = readonlySetLikeToSet(other);\n    setRef.current.forEach((item) => {\n      if (!otherSet.has(item as any)) {\n        result.add(item);\n      }\n    });\n    return result;\n  };\n\n  setRef.current.symmetricDifference = <U>(other: ReadonlySetLike<U>): Set<T | U> => {\n    const result = new Set<T | U>();\n    const otherSet = readonlySetLikeToSet(other);\n\n    setRef.current.forEach((item) => {\n      if (!otherSet.has(item as any)) {\n        result.add(item);\n      }\n    });\n\n    otherSet.forEach((item) => {\n      if (!setRef.current.has(item as any)) {\n        result.add(item);\n      }\n    });\n\n    return result;\n  };\n\n  return setRef.current;\n}\n"],"mappings":";;;;AAGA,SAAgB,qBAAwB,OAAmC;AACzE,KAAI,iBAAiB,IACnB,QAAO;CAET,MAAM,yBAAS,IAAI,KAAQ;CAC3B,MAAM,WAAW,MAAM,MAAM;CAC7B,IAAI,OAAO,SAAS,MAAM;AAC1B,QAAO,CAAC,KAAK,MAAM;AACjB,SAAO,IAAI,KAAK,MAAM;AACtB,SAAO,SAAS,MAAM;;AAExB,QAAO;;AAGT,SAAgB,OAAU,QAAsB;CAC9C,MAAM,UAAA,GAAA,MAAA,QAAgB,IAAI,IAAI,OAAO,CAAC;CACtC,MAAM,cAAcA,yBAAAA,gBAAgB;AAEpC,QAAO,QAAQ,OAAO,GAAG,SAAS;EAChC,MAAM,MAAM,IAAI,UAAU,IAAI,MAAM,OAAO,SAAS,KAAK;AACzD,eAAa;AACb,SAAO;;AAGT,QAAO,QAAQ,SAAS,GAAG,SAAS;AAClC,MAAI,UAAU,MAAM,MAAM,OAAO,SAAS,KAAK;AAC/C,eAAa;;AAGf,QAAO,QAAQ,UAAU,GAAG,SAAS;EACnC,MAAM,MAAM,IAAI,UAAU,OAAO,MAAM,OAAO,SAAS,KAAK;AAC5D,eAAa;AACb,SAAO;;AAGT,QAAO,QAAQ,SAAY,UAA0C;EACnE,MAAM,SAAS,IAAI,IAAW,OAAO,QAAkB;AACvD,uBAAqB,MAAM,CAAC,SAAS,SAAS,OAAO,IAAI,KAAK,CAAC;AAC/D,SAAO;;AAGT,QAAO,QAAQ,gBAAmB,UAA0C;EAC1E,MAAM,yBAAS,IAAI,KAAY;EAC/B,MAAM,WAAW,qBAAqB,MAAM;AAC5C,SAAO,QAAQ,SAAS,SAAS;AAC/B,OAAI,SAAS,IAAI,KAAY,CAC3B,QAAO,IAAI,KAAc;IAE3B;AACF,SAAO;;AAGT,QAAO,QAAQ,cAAiB,UAAsC;EACpE,MAAM,yBAAS,IAAI,KAAQ;EAC3B,MAAM,WAAW,qBAAqB,MAAM;AAC5C,SAAO,QAAQ,SAAS,SAAS;AAC/B,OAAI,CAAC,SAAS,IAAI,KAAY,CAC5B,QAAO,IAAI,KAAK;IAElB;AACF,SAAO;;AAGT,QAAO,QAAQ,uBAA0B,UAA0C;EACjF,MAAM,yBAAS,IAAI,KAAY;EAC/B,MAAM,WAAW,qBAAqB,MAAM;AAE5C,SAAO,QAAQ,SAAS,SAAS;AAC/B,OAAI,CAAC,SAAS,IAAI,KAAY,CAC5B,QAAO,IAAI,KAAK;IAElB;AAEF,WAAS,SAAS,SAAS;AACzB,OAAI,CAAC,OAAO,QAAQ,IAAI,KAAY,CAClC,QAAO,IAAI,KAAK;IAElB;AAEF,SAAO;;AAGT,QAAO,OAAO"}

package/cjs/use-throttled-callback/use-throttled-callback.cjs

@@ -34,7 +34,9 @@ function useThrottledCallbackWithClearTimeout(callback, wait) {
 	return [throttled, clearTimeout];
 }
 function useThrottledCallback(callback, wait) {
-	return useThrottledCallbackWithClearTimeout(callback, wait)[0];
+	const [throttled, clearTimeout] = useThrottledCallbackWithClearTimeout(callback, wait);
+	(0, react.useEffect)(() => clearTimeout, []);
+	return throttled;
 }
 //#endregion
 exports.useThrottledCallback = useThrottledCallback;

package/cjs/use-throttled-callback/use-throttled-callback.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-throttled-callback.cjs","names":["useCallbackRef"],"sources":["../../src/use-throttled-callback/use-throttled-callback.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { useCallbackRef } from '../utils';\n\nexport function useThrottledCallbackWithClearTimeout<T extends (...args: any[]) => any>(\n  callback: T,\n  wait: number\n) {\n  const handleCallback = useCallbackRef(callback);\n  const latestInArgsRef = useRef<Parameters<T>>(null);\n  const latestOutArgsRef = useRef<Parameters<T>>(null);\n  const active = useRef(true);\n  const waitRef = useRef(wait);\n  const timeoutRef = useRef<number>(-1);\n\n  const clearTimeout = () => window.clearTimeout(timeoutRef.current);\n\n  const callThrottledCallback = useCallback(\n    (...args: Parameters<T>) => {\n      handleCallback(...args);\n      latestInArgsRef.current = args;\n      latestOutArgsRef.current = args;\n      active.current = false;\n    },\n    [handleCallback]\n  );\n\n  const timerCallback = useCallback(() => {\n    if (latestInArgsRef.current && latestInArgsRef.current !== latestOutArgsRef.current) {\n      callThrottledCallback(...latestInArgsRef.current);\n\n      timeoutRef.current = window.setTimeout(timerCallback, waitRef.current);\n    } else {\n      active.current = true;\n    }\n  }, [callThrottledCallback]);\n\n  const throttled = useCallback(\n    (...args: Parameters<T>) => {\n      if (active.current) {\n        callThrottledCallback(...args);\n        timeoutRef.current = window.setTimeout(timerCallback, waitRef.current);\n      } else {\n        latestInArgsRef.current = args;\n      }\n    },\n    [callThrottledCallback, timerCallback]\n  );\n\n  useEffect(() => {\n    waitRef.current = wait;\n  }, [wait]);\n\n  return [throttled, clearTimeout] as const;\n}\n\nexport function useThrottledCallback<T extends (...args: any[]) => any>(callback: T, wait: number) {\n  return useThrottledCallbackWithClearTimeout(callback, wait)[0];\n}\n"],"mappings":";;;;AAGA,SAAgB,qCACd,UACA,MACA;CACA,MAAM,iBAAiBA,yBAAAA,eAAe,SAAS;CAC/C,MAAM,mBAAA,GAAA,MAAA,QAAwC,KAAK;CACnD,MAAM,oBAAA,GAAA,MAAA,QAAyC,KAAK;CACpD,MAAM,UAAA,GAAA,MAAA,QAAgB,KAAK;CAC3B,MAAM,WAAA,GAAA,MAAA,QAAiB,KAAK;CAC5B,MAAM,cAAA,GAAA,MAAA,QAA4B,GAAG;CAErC,MAAM,qBAAqB,OAAO,aAAa,WAAW,QAAQ;CAElE,MAAM,yBAAA,GAAA,MAAA,cACH,GAAG,SAAwB;AAC1B,iBAAe,GAAG,KAAK;AACvB,kBAAgB,UAAU;AAC1B,mBAAiB,UAAU;AAC3B,SAAO,UAAU;IAEnB,CAAC,eAAe,CACjB;CAED,MAAM,iBAAA,GAAA,MAAA,mBAAkC;AACtC,MAAI,gBAAgB,WAAW,gBAAgB,YAAY,iBAAiB,SAAS;AACnF,yBAAsB,GAAG,gBAAgB,QAAQ;AAEjD,cAAW,UAAU,OAAO,WAAW,eAAe,QAAQ,QAAQ;QAEtE,QAAO,UAAU;IAElB,CAAC,sBAAsB,CAAC;CAE3B,MAAM,aAAA,GAAA,MAAA,cACH,GAAG,SAAwB;AAC1B,MAAI,OAAO,SAAS;AAClB,yBAAsB,GAAG,KAAK;AAC9B,cAAW,UAAU,OAAO,WAAW,eAAe,QAAQ,QAAQ;QAEtE,iBAAgB,UAAU;IAG9B,CAAC,uBAAuB,cAAc,CACvC;AAED,EAAA,GAAA,MAAA,iBAAgB;AACd,UAAQ,UAAU;IACjB,CAAC,KAAK,CAAC;AAEV,QAAO,CAAC,WAAW,aAAa;;AAGlC,SAAgB,qBAAwD,UAAa,MAAc;AACjG,QAAO,qCAAqC,UAAU,KAAK,CAAC"}
+{"version":3,"file":"use-throttled-callback.cjs","names":["useCallbackRef"],"sources":["../../src/use-throttled-callback/use-throttled-callback.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { useCallbackRef } from '../utils';\n\nexport function useThrottledCallbackWithClearTimeout<T extends (...args: any[]) => any>(\n  callback: T,\n  wait: number\n) {\n  const handleCallback = useCallbackRef(callback);\n  const latestInArgsRef = useRef<Parameters<T>>(null);\n  const latestOutArgsRef = useRef<Parameters<T>>(null);\n  const active = useRef(true);\n  const waitRef = useRef(wait);\n  const timeoutRef = useRef<number>(-1);\n\n  const clearTimeout = () => window.clearTimeout(timeoutRef.current);\n\n  const callThrottledCallback = useCallback(\n    (...args: Parameters<T>) => {\n      handleCallback(...args);\n      latestInArgsRef.current = args;\n      latestOutArgsRef.current = args;\n      active.current = false;\n    },\n    [handleCallback]\n  );\n\n  const timerCallback = useCallback(() => {\n    if (latestInArgsRef.current && latestInArgsRef.current !== latestOutArgsRef.current) {\n      callThrottledCallback(...latestInArgsRef.current);\n\n      timeoutRef.current = window.setTimeout(timerCallback, waitRef.current);\n    } else {\n      active.current = true;\n    }\n  }, [callThrottledCallback]);\n\n  const throttled = useCallback(\n    (...args: Parameters<T>) => {\n      if (active.current) {\n        callThrottledCallback(...args);\n        timeoutRef.current = window.setTimeout(timerCallback, waitRef.current);\n      } else {\n        latestInArgsRef.current = args;\n      }\n    },\n    [callThrottledCallback, timerCallback]\n  );\n\n  useEffect(() => {\n    waitRef.current = wait;\n  }, [wait]);\n\n  return [throttled, clearTimeout] as const;\n}\n\nexport function useThrottledCallback<T extends (...args: any[]) => any>(callback: T, wait: number) {\n  const [throttled, clearTimeout] = useThrottledCallbackWithClearTimeout(callback, wait);\n  useEffect(() => clearTimeout, []);\n  return throttled;\n}\n"],"mappings":";;;;AAGA,SAAgB,qCACd,UACA,MACA;CACA,MAAM,iBAAiBA,yBAAAA,eAAe,SAAS;CAC/C,MAAM,mBAAA,GAAA,MAAA,QAAwC,KAAK;CACnD,MAAM,oBAAA,GAAA,MAAA,QAAyC,KAAK;CACpD,MAAM,UAAA,GAAA,MAAA,QAAgB,KAAK;CAC3B,MAAM,WAAA,GAAA,MAAA,QAAiB,KAAK;CAC5B,MAAM,cAAA,GAAA,MAAA,QAA4B,GAAG;CAErC,MAAM,qBAAqB,OAAO,aAAa,WAAW,QAAQ;CAElE,MAAM,yBAAA,GAAA,MAAA,cACH,GAAG,SAAwB;AAC1B,iBAAe,GAAG,KAAK;AACvB,kBAAgB,UAAU;AAC1B,mBAAiB,UAAU;AAC3B,SAAO,UAAU;IAEnB,CAAC,eAAe,CACjB;CAED,MAAM,iBAAA,GAAA,MAAA,mBAAkC;AACtC,MAAI,gBAAgB,WAAW,gBAAgB,YAAY,iBAAiB,SAAS;AACnF,yBAAsB,GAAG,gBAAgB,QAAQ;AAEjD,cAAW,UAAU,OAAO,WAAW,eAAe,QAAQ,QAAQ;QAEtE,QAAO,UAAU;IAElB,CAAC,sBAAsB,CAAC;CAE3B,MAAM,aAAA,GAAA,MAAA,cACH,GAAG,SAAwB;AAC1B,MAAI,OAAO,SAAS;AAClB,yBAAsB,GAAG,KAAK;AAC9B,cAAW,UAAU,OAAO,WAAW,eAAe,QAAQ,QAAQ;QAEtE,iBAAgB,UAAU;IAG9B,CAAC,uBAAuB,cAAc,CACvC;AAED,EAAA,GAAA,MAAA,iBAAgB;AACd,UAAQ,UAAU;IACjB,CAAC,KAAK,CAAC;AAEV,QAAO,CAAC,WAAW,aAAa;;AAGlC,SAAgB,qBAAwD,UAAa,MAAc;CACjG,MAAM,CAAC,WAAW,gBAAgB,qCAAqC,UAAU,KAAK;AACtF,EAAA,GAAA,MAAA,iBAAgB,cAAc,EAAE,CAAC;AACjC,QAAO"}

package/cjs/use-timeout/use-timeout.cjs

@@ -1,11 +1,13 @@
 "use client";
+const require_use_callback_ref = require("../utils/use-callback-ref/use-callback-ref.cjs");
 let react = require("react");
 //#region packages/@mantine/hooks/src/use-timeout/use-timeout.ts
 function useTimeout(callback, delay, options = { autoInvoke: false }) {
 	const timeoutRef = (0, react.useRef)(null);
+	const handleCallback = require_use_callback_ref.useCallbackRef(callback);
 	const start = (0, react.useCallback)((...args) => {
 		if (!timeoutRef.current) timeoutRef.current = window.setTimeout(() => {
-			callback(args);
+			handleCallback(...args);
 			timeoutRef.current = null;
 		}, delay);
 	}, [delay]);

package/cjs/use-timeout/use-timeout.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-timeout.cjs","names":[],"sources":["../../src/use-timeout/use-timeout.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\nexport interface UseTimeoutOptions {\n  autoInvoke: boolean;\n}\n\nexport interface UseTimeoutReturnValue {\n  start: (...args: any[]) => void;\n  clear: () => void;\n}\n\nexport function useTimeout(\n  callback: (...args: any[]) => void,\n  delay: number,\n  options: UseTimeoutOptions = { autoInvoke: false }\n): UseTimeoutReturnValue {\n  const timeoutRef = useRef<number | null>(null);\n\n  const start = useCallback(\n    (...args: any[]) => {\n      if (!timeoutRef.current) {\n        timeoutRef.current = window.setTimeout(() => {\n          callback(args);\n          timeoutRef.current = null;\n        }, delay);\n      }\n    },\n    [delay]\n  );\n\n  const clear = useCallback(() => {\n    if (timeoutRef.current) {\n      window.clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => {\n    if (options.autoInvoke) {\n      start();\n    }\n\n    return clear;\n  }, [clear, start]);\n\n  return { start, clear };\n}\n\nexport namespace useTimeout {\n  export type Options = UseTimeoutOptions;\n  export type ReturnValue = UseTimeoutReturnValue;\n}\n"],"mappings":";;;AAWA,SAAgB,WACd,UACA,OACA,UAA6B,EAAE,YAAY,OAAO,EAC3B;CACvB,MAAM,cAAA,GAAA,MAAA,QAAmC,KAAK;CAE9C,MAAM,SAAA,GAAA,MAAA,cACH,GAAG,SAAgB;AAClB,MAAI,CAAC,WAAW,QACd,YAAW,UAAU,OAAO,iBAAiB;AAC3C,YAAS,KAAK;AACd,cAAW,UAAU;KACpB,MAAM;IAGb,CAAC,MAAM,CACR;CAED,MAAM,SAAA,GAAA,MAAA,mBAA0B;AAC9B,MAAI,WAAW,SAAS;AACtB,UAAO,aAAa,WAAW,QAAQ;AACvC,cAAW,UAAU;;IAEtB,EAAE,CAAC;AAEN,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,QAAQ,WACV,QAAO;AAGT,SAAO;IACN,CAAC,OAAO,MAAM,CAAC;AAElB,QAAO;EAAE;EAAO;EAAO"}
+{"version":3,"file":"use-timeout.cjs","names":["useCallbackRef"],"sources":["../../src/use-timeout/use-timeout.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { useCallbackRef } from '../utils';\n\nexport interface UseTimeoutOptions {\n  autoInvoke: boolean;\n}\n\nexport interface UseTimeoutReturnValue {\n  start: (...args: any[]) => void;\n  clear: () => void;\n}\n\nexport function useTimeout(\n  callback: (...args: any[]) => void,\n  delay: number,\n  options: UseTimeoutOptions = { autoInvoke: false }\n): UseTimeoutReturnValue {\n  const timeoutRef = useRef<number | null>(null);\n  const handleCallback = useCallbackRef(callback);\n\n  const start = useCallback(\n    (...args: any[]) => {\n      if (!timeoutRef.current) {\n        timeoutRef.current = window.setTimeout(() => {\n          handleCallback(...args);\n          timeoutRef.current = null;\n        }, delay);\n      }\n    },\n    [delay]\n  );\n\n  const clear = useCallback(() => {\n    if (timeoutRef.current) {\n      window.clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => {\n    if (options.autoInvoke) {\n      start();\n    }\n\n    return clear;\n  }, [clear, start]);\n\n  return { start, clear };\n}\n\nexport namespace useTimeout {\n  export type Options = UseTimeoutOptions;\n  export type ReturnValue = UseTimeoutReturnValue;\n}\n"],"mappings":";;;;AAYA,SAAgB,WACd,UACA,OACA,UAA6B,EAAE,YAAY,OAAO,EAC3B;CACvB,MAAM,cAAA,GAAA,MAAA,QAAmC,KAAK;CAC9C,MAAM,iBAAiBA,yBAAAA,eAAe,SAAS;CAE/C,MAAM,SAAA,GAAA,MAAA,cACH,GAAG,SAAgB;AAClB,MAAI,CAAC,WAAW,QACd,YAAW,UAAU,OAAO,iBAAiB;AAC3C,kBAAe,GAAG,KAAK;AACvB,cAAW,UAAU;KACpB,MAAM;IAGb,CAAC,MAAM,CACR;CAED,MAAM,SAAA,GAAA,MAAA,mBAA0B;AAC9B,MAAI,WAAW,SAAS;AACtB,UAAO,aAAa,WAAW,QAAQ;AACvC,cAAW,UAAU;;IAEtB,EAAE,CAAC;AAEN,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,QAAQ,WACV,QAAO;AAGT,SAAO;IACN,CAAC,OAAO,MAAM,CAAC;AAElB,QAAO;EAAE;EAAO;EAAO"}

package/cjs/use-viewport-size/use-viewport-size.cjs

@@ -2,7 +2,7 @@
 const require_use_window_event = require("../use-window-event/use-window-event.cjs");
 let react = require("react");
 //#region packages/@mantine/hooks/src/use-viewport-size/use-viewport-size.ts
-const eventListerOptions = { passive: true };
+const eventListenerOptions = { passive: true };
 function useViewportSize() {
 	const [windowSize, setWindowSize] = (0, react.useState)({
 		width: 0,
@@ -14,8 +14,8 @@ function useViewportSize() {
 			height: window.innerHeight || 0
 		});
 	}, []);
-	require_use_window_event.useWindowEvent("resize", setSize, eventListerOptions);
-	require_use_window_event.useWindowEvent("orientationchange", setSize, eventListerOptions);
+	require_use_window_event.useWindowEvent("resize", setSize, eventListenerOptions);
+	require_use_window_event.useWindowEvent("orientationchange", setSize, eventListenerOptions);
 	(0, react.useEffect)(setSize, []);
 	return windowSize;
 }

package/cjs/use-viewport-size/use-viewport-size.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-viewport-size.cjs","names":[],"sources":["../../src/use-viewport-size/use-viewport-size.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\nconst eventListerOptions = {\n  passive: true,\n};\n\nexport function useViewportSize() {\n  const [windowSize, setWindowSize] = useState({\n    width: 0,\n    height: 0,\n  });\n\n  const setSize = useCallback(() => {\n    setWindowSize({ width: window.innerWidth || 0, height: window.innerHeight || 0 });\n  }, []);\n\n  useWindowEvent('resize', setSize, eventListerOptions);\n  useWindowEvent('orientationchange', setSize, eventListerOptions);\n  useEffect(setSize, []);\n\n  return windowSize;\n}\n"],"mappings":";;;;AAGA,MAAM,qBAAqB,EACzB,SAAS,MACV;AAED,SAAgB,kBAAkB;CAChC,MAAM,CAAC,YAAY,kBAAA,GAAA,MAAA,UAA0B;EAC3C,OAAO;EACP,QAAQ;EACT,CAAC;CAEF,MAAM,WAAA,GAAA,MAAA,mBAA4B;AAChC,gBAAc;GAAE,OAAO,OAAO,cAAc;GAAG,QAAQ,OAAO,eAAe;GAAG,CAAC;IAChF,EAAE,CAAC;AAEN,0BAAA,eAAe,UAAU,SAAS,mBAAmB;AACrD,0BAAA,eAAe,qBAAqB,SAAS,mBAAmB;AAChE,EAAA,GAAA,MAAA,WAAU,SAAS,EAAE,CAAC;AAEtB,QAAO"}
+{"version":3,"file":"use-viewport-size.cjs","names":[],"sources":["../../src/use-viewport-size/use-viewport-size.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\nconst eventListenerOptions = {\n  passive: true,\n};\n\nexport function useViewportSize() {\n  const [windowSize, setWindowSize] = useState({\n    width: 0,\n    height: 0,\n  });\n\n  const setSize = useCallback(() => {\n    setWindowSize({ width: window.innerWidth || 0, height: window.innerHeight || 0 });\n  }, []);\n\n  useWindowEvent('resize', setSize, eventListenerOptions);\n  useWindowEvent('orientationchange', setSize, eventListenerOptions);\n  useEffect(setSize, []);\n\n  return windowSize;\n}\n"],"mappings":";;;;AAGA,MAAM,uBAAuB,EAC3B,SAAS,MACV;AAED,SAAgB,kBAAkB;CAChC,MAAM,CAAC,YAAY,kBAAA,GAAA,MAAA,UAA0B;EAC3C,OAAO;EACP,QAAQ;EACT,CAAC;CAEF,MAAM,WAAA,GAAA,MAAA,mBAA4B;AAChC,gBAAc;GAAE,OAAO,OAAO,cAAc;GAAG,QAAQ,OAAO,eAAe;GAAG,CAAC;IAChF,EAAE,CAAC;AAEN,0BAAA,eAAe,UAAU,SAAS,qBAAqB;AACvD,0BAAA,eAAe,qBAAqB,SAAS,qBAAqB;AAClE,EAAA,GAAA,MAAA,WAAU,SAAS,EAAE,CAAC;AAEtB,QAAO"}

package/cjs/use-window-scroll/use-window-scroll.cjs

@@ -24,8 +24,8 @@ function useWindowScroll() {
 		x: 0,
 		y: 0
 	});
-	require_use_window_event.useWindowEvent("scroll", () => setPosition(getScrollPosition()));
-	require_use_window_event.useWindowEvent("resize", () => setPosition(getScrollPosition()));
+	require_use_window_event.useWindowEvent("scroll", () => setPosition(getScrollPosition()), { passive: true });
+	require_use_window_event.useWindowEvent("resize", () => setPosition(getScrollPosition()), { passive: true });
 	(0, react.useEffect)(() => {
 		setPosition(getScrollPosition());
 	}, []);

package/cjs/use-window-scroll/use-window-scroll.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-window-scroll.cjs","names":[],"sources":["../../src/use-window-scroll/use-window-scroll.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\nexport interface UseWindowScrollPosition {\n  x: number;\n  y: number;\n}\n\nexport type UseWindowScrollTo = (position: Partial<UseWindowScrollPosition>) => void;\nexport type UseWindowScrollReturnValue = [UseWindowScrollPosition, UseWindowScrollTo];\n\nfunction getScrollPosition(): UseWindowScrollPosition {\n  return typeof window !== 'undefined' ? { x: window.scrollX, y: window.scrollY } : { x: 0, y: 0 };\n}\n\nfunction scrollTo({ x, y }: Partial<UseWindowScrollPosition>) {\n  if (typeof window !== 'undefined') {\n    const scrollOptions: ScrollToOptions = { behavior: 'smooth' };\n\n    if (typeof x === 'number') {\n      scrollOptions.left = x;\n    }\n\n    if (typeof y === 'number') {\n      scrollOptions.top = y;\n    }\n\n    window.scrollTo(scrollOptions);\n  }\n}\n\nexport function useWindowScroll(): UseWindowScrollReturnValue {\n  const [position, setPosition] = useState<UseWindowScrollPosition>({ x: 0, y: 0 });\n\n  useWindowEvent('scroll', () => setPosition(getScrollPosition()));\n  useWindowEvent('resize', () => setPosition(getScrollPosition()));\n\n  useEffect(() => {\n    setPosition(getScrollPosition());\n  }, []);\n\n  return [position, scrollTo] as const;\n}\n\nexport namespace useWindowScroll {\n  export type Position = UseWindowScrollPosition;\n  export type ScrollTo = UseWindowScrollTo;\n  export type ReturnValue = UseWindowScrollReturnValue;\n}\n"],"mappings":";;;;AAWA,SAAS,oBAA6C;AACpD,QAAO,OAAO,WAAW,cAAc;EAAE,GAAG,OAAO;EAAS,GAAG,OAAO;EAAS,GAAG;EAAE,GAAG;EAAG,GAAG;EAAG;;AAGlG,SAAS,SAAS,EAAE,GAAG,KAAuC;AAC5D,KAAI,OAAO,WAAW,aAAa;EACjC,MAAM,gBAAiC,EAAE,UAAU,UAAU;AAE7D,MAAI,OAAO,MAAM,SACf,eAAc,OAAO;AAGvB,MAAI,OAAO,MAAM,SACf,eAAc,MAAM;AAGtB,SAAO,SAAS,cAAc;;;AAIlC,SAAgB,kBAA8C;CAC5D,MAAM,CAAC,UAAU,gBAAA,GAAA,MAAA,UAAiD;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;AAEjF,0BAAA,eAAe,gBAAgB,YAAY,mBAAmB,CAAC,CAAC;AAChE,0BAAA,eAAe,gBAAgB,YAAY,mBAAmB,CAAC,CAAC;AAEhE,EAAA,GAAA,MAAA,iBAAgB;AACd,cAAY,mBAAmB,CAAC;IAC/B,EAAE,CAAC;AAEN,QAAO,CAAC,UAAU,SAAS"}
+{"version":3,"file":"use-window-scroll.cjs","names":[],"sources":["../../src/use-window-scroll/use-window-scroll.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\nexport interface UseWindowScrollPosition {\n  x: number;\n  y: number;\n}\n\nexport type UseWindowScrollTo = (position: Partial<UseWindowScrollPosition>) => void;\nexport type UseWindowScrollReturnValue = [UseWindowScrollPosition, UseWindowScrollTo];\n\nfunction getScrollPosition(): UseWindowScrollPosition {\n  return typeof window !== 'undefined' ? { x: window.scrollX, y: window.scrollY } : { x: 0, y: 0 };\n}\n\nfunction scrollTo({ x, y }: Partial<UseWindowScrollPosition>) {\n  if (typeof window !== 'undefined') {\n    const scrollOptions: ScrollToOptions = { behavior: 'smooth' };\n\n    if (typeof x === 'number') {\n      scrollOptions.left = x;\n    }\n\n    if (typeof y === 'number') {\n      scrollOptions.top = y;\n    }\n\n    window.scrollTo(scrollOptions);\n  }\n}\n\nexport function useWindowScroll(): UseWindowScrollReturnValue {\n  const [position, setPosition] = useState<UseWindowScrollPosition>({ x: 0, y: 0 });\n\n  useWindowEvent('scroll', () => setPosition(getScrollPosition()), { passive: true });\n  useWindowEvent('resize', () => setPosition(getScrollPosition()), { passive: true });\n\n  useEffect(() => {\n    setPosition(getScrollPosition());\n  }, []);\n\n  return [position, scrollTo] as const;\n}\n\nexport namespace useWindowScroll {\n  export type Position = UseWindowScrollPosition;\n  export type ScrollTo = UseWindowScrollTo;\n  export type ReturnValue = UseWindowScrollReturnValue;\n}\n"],"mappings":";;;;AAWA,SAAS,oBAA6C;AACpD,QAAO,OAAO,WAAW,cAAc;EAAE,GAAG,OAAO;EAAS,GAAG,OAAO;EAAS,GAAG;EAAE,GAAG;EAAG,GAAG;EAAG;;AAGlG,SAAS,SAAS,EAAE,GAAG,KAAuC;AAC5D,KAAI,OAAO,WAAW,aAAa;EACjC,MAAM,gBAAiC,EAAE,UAAU,UAAU;AAE7D,MAAI,OAAO,MAAM,SACf,eAAc,OAAO;AAGvB,MAAI,OAAO,MAAM,SACf,eAAc,MAAM;AAGtB,SAAO,SAAS,cAAc;;;AAIlC,SAAgB,kBAA8C;CAC5D,MAAM,CAAC,UAAU,gBAAA,GAAA,MAAA,UAAiD;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;AAEjF,0BAAA,eAAe,gBAAgB,YAAY,mBAAmB,CAAC,EAAE,EAAE,SAAS,MAAM,CAAC;AACnF,0BAAA,eAAe,gBAAgB,YAAY,mBAAmB,CAAC,EAAE,EAAE,SAAS,MAAM,CAAC;AAEnF,EAAA,GAAA,MAAA,iBAAgB;AACd,cAAY,mBAAmB,CAAC;IAC/B,EAAE,CAAC;AAEN,QAAO,CAAC,UAAU,SAAS"}

package/esm/index.mjs

@@ -84,4 +84,6 @@ import { useSelection } from "./use-selection/use-selection.mjs";
 import { useFloatingWindow } from "./use-floating-window/use-floating-window.mjs";
 import { useCollapse } from "./use-collapse/use-collapse.mjs";
 import { useHorizontalCollapse } from "./use-collapse/use-horizontal-collapse.mjs";
-export { assignRef, clamp, clampUseMovePosition, getHotkeyHandler, lowerFirst, mergeRefs, normalizeRadialValue, randomId, range, readLocalStorageValue, readSessionStorageValue, shallowEqual, upperFirst, useCallbackRef, useClickOutside, useClipboard, useCollapse, useColorScheme, useCounter, useDebouncedCallback, useDebouncedState, useDebouncedValue, useDidUpdate, useDisclosure, useDocumentTitle, useDocumentVisibility, useElementSize, useEventListener, useEyeDropper, useFavicon, useFetch, useFileDialog, useFloatingWindow, useFocusReturn, useFocusTrap, useFocusWithin, useForceUpdate, useFullscreenDocument, useFullscreenElement, useHash, useHeadroom, useHorizontalCollapse, useHotkeys, useHover, useId, useIdle, useInViewport, useInputState, useIntersection, useInterval, useIsFirstRender, useIsomorphicEffect, useListState, useLocalStorage, useLogger, useLongPress, useMap, useMediaQuery, useMergedRef, useMounted, useMouse, useMousePosition, useMove, useMutationObserver, useMutationObserverTarget, useNetwork, useOrientation, useOs, usePageLeave, usePagination, usePrevious, useQueue, useRadialMove, useReducedMotion, useResizeObserver, useScrollDirection, useScrollIntoView, useScrollSpy, useScroller, useSelection, useSessionStorage, useSet, useSetState, useShallowEffect, useStateHistory, useTextSelection, useThrottledCallback, useThrottledState, useThrottledValue, useTimeout, useToggle, useUncontrolled, useValidatedState, useViewportSize, useWindowEvent, useWindowScroll };
+import { formatMask, generatePattern, isMaskComplete, unformatMask, useMask } from "./use-mask/use-mask.mjs";
+import { useRovingIndex } from "./use-roving-index/use-roving-index.mjs";
+export { assignRef, clamp, clampUseMovePosition, formatMask, generatePattern, getHotkeyHandler, isMaskComplete, lowerFirst, mergeRefs, normalizeRadialValue, randomId, range, readLocalStorageValue, readSessionStorageValue, shallowEqual, unformatMask, upperFirst, useCallbackRef, useClickOutside, useClipboard, useCollapse, useColorScheme, useCounter, useDebouncedCallback, useDebouncedState, useDebouncedValue, useDidUpdate, useDisclosure, useDocumentTitle, useDocumentVisibility, useElementSize, useEventListener, useEyeDropper, useFavicon, useFetch, useFileDialog, useFloatingWindow, useFocusReturn, useFocusTrap, useFocusWithin, useForceUpdate, useFullscreenDocument, useFullscreenElement, useHash, useHeadroom, useHorizontalCollapse, useHotkeys, useHover, useId, useIdle, useInViewport, useInputState, useIntersection, useInterval, useIsFirstRender, useIsomorphicEffect, useListState, useLocalStorage, useLogger, useLongPress, useMap, useMask, useMediaQuery, useMergedRef, useMounted, useMouse, useMousePosition, useMove, useMutationObserver, useMutationObserverTarget, useNetwork, useOrientation, useOs, usePageLeave, usePagination, usePrevious, useQueue, useRadialMove, useReducedMotion, useResizeObserver, useRovingIndex, useScrollDirection, useScrollIntoView, useScrollSpy, useScroller, useSelection, useSessionStorage, useSet, useSetState, useShallowEffect, useStateHistory, useTextSelection, useThrottledCallback, useThrottledState, useThrottledValue, useTimeout, useToggle, useUncontrolled, useValidatedState, useViewportSize, useWindowEvent, useWindowScroll };

package/esm/use-click-outside/use-click-outside.mjs

@@ -2,22 +2,25 @@
 import { useEffect, useEffectEvent, useRef } from "react";
 //#region packages/@mantine/hooks/src/use-click-outside/use-click-outside.ts
 const DEFAULT_EVENTS = ["mousedown", "touchstart"];
-function useClickOutside(callback, events, nodes) {
+function useClickOutside(callback, events, nodes, enabled = true) {
 	const ref = useRef(null);
 	const eventsList = events || DEFAULT_EVENTS;
 	const listener = useEffectEvent((event) => {
 		const { target } = event ?? {};
-		if (Array.isArray(nodes)) {
-			const shouldIgnore = !document.body.contains(target) && target?.tagName !== "HTML";
-			nodes.every((node) => !!node && !event.composedPath().includes(node)) && !shouldIgnore && callback(event);
-		} else if (ref.current && !ref.current.contains(target)) callback(event);
+		if (!document.body.contains(target) && target?.tagName !== "HTML") return;
+		const path = event.composedPath();
+		if (Array.isArray(nodes)) nodes.every((node) => !!node && !path.includes(node)) && callback(event);
+		else if (ref.current && !path.includes(ref.current)) callback(event);
 	});
+	const eventsKey = eventsList.join(",");
 	useEffect(() => {
-		eventsList.forEach((fn) => document.addEventListener(fn, listener));
+		if (!enabled) return;
+		const events = eventsKey.split(",");
+		events.forEach((fn) => document.addEventListener(fn, listener));
 		return () => {
-			eventsList.forEach((fn) => document.removeEventListener(fn, listener));
+			events.forEach((fn) => document.removeEventListener(fn, listener));
 		};
-	}, []);
+	}, [eventsKey, enabled]);
 	return ref;
 }
 //#endregion

package/esm/use-click-outside/use-click-outside.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-click-outside.mjs","names":[],"sources":["../../src/use-click-outside/use-click-outside.ts"],"sourcesContent":["import { useEffect, useEffectEvent, useRef } from 'react';\n\ntype EventType = MouseEvent | TouchEvent;\n\nconst DEFAULT_EVENTS = ['mousedown', 'touchstart'];\n\nexport function useClickOutside<T extends HTMLElement = any>(\n  callback: (event: EventType) => void,\n  events?: string[] | null,\n  nodes?: (HTMLElement | null)[]\n) {\n  const ref = useRef<T>(null);\n  const eventsList = events || DEFAULT_EVENTS;\n\n  const listener = useEffectEvent((event: Event) => {\n    const { target } = event ?? {};\n    if (Array.isArray(nodes)) {\n      const shouldIgnore =\n        !document.body.contains(target as Node) && (target as Element)?.tagName !== 'HTML';\n      const shouldTrigger = nodes.every((node) => !!node && !event.composedPath().includes(node));\n      shouldTrigger && !shouldIgnore && callback(event as EventType);\n    } else if (ref.current && !ref.current.contains(target as Node)) {\n      callback(event as EventType);\n    }\n  });\n\n  useEffect(() => {\n    eventsList.forEach((fn) => document.addEventListener(fn, listener));\n\n    return () => {\n      eventsList.forEach((fn) => document.removeEventListener(fn, listener));\n    };\n  }, []);\n\n  return ref;\n}\n"],"mappings":";;;AAIA,MAAM,iBAAiB,CAAC,aAAa,aAAa;AAElD,SAAgB,gBACd,UACA,QACA,OACA;CACA,MAAM,MAAM,OAAU,KAAK;CAC3B,MAAM,aAAa,UAAU;CAE7B,MAAM,WAAW,gBAAgB,UAAiB;EAChD,MAAM,EAAE,WAAW,SAAS,EAAE;AAC9B,MAAI,MAAM,QAAQ,MAAM,EAAE;GACxB,MAAM,eACJ,CAAC,SAAS,KAAK,SAAS,OAAe,IAAK,QAAoB,YAAY;AACxD,SAAM,OAAO,SAAS,CAAC,CAAC,QAAQ,CAAC,MAAM,cAAc,CAAC,SAAS,KAAK,CAAC,IAC1E,CAAC,gBAAgB,SAAS,MAAmB;aACrD,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,OAAe,CAC7D,UAAS,MAAmB;GAE9B;AAEF,iBAAgB;AACd,aAAW,SAAS,OAAO,SAAS,iBAAiB,IAAI,SAAS,CAAC;AAEnE,eAAa;AACX,cAAW,SAAS,OAAO,SAAS,oBAAoB,IAAI,SAAS,CAAC;;IAEvE,EAAE,CAAC;AAEN,QAAO"}
+{"version":3,"file":"use-click-outside.mjs","names":[],"sources":["../../src/use-click-outside/use-click-outside.ts"],"sourcesContent":["import { useEffect, useEffectEvent, useRef } from 'react';\n\ntype EventType = MouseEvent | TouchEvent;\n\nconst DEFAULT_EVENTS = ['mousedown', 'touchstart'];\n\nexport function useClickOutside<T extends HTMLElement = any>(\n  callback: (event: EventType) => void,\n  events?: string[] | null,\n  nodes?: (HTMLElement | null)[],\n  enabled: boolean = true\n) {\n  const ref = useRef<T>(null);\n  const eventsList = events || DEFAULT_EVENTS;\n\n  const listener = useEffectEvent((event: Event) => {\n    const { target } = event ?? {};\n    const shouldIgnore =\n      !document.body.contains(target as Node) && (target as Element)?.tagName !== 'HTML';\n\n    if (shouldIgnore) {\n      return;\n    }\n\n    const path = event.composedPath();\n\n    if (Array.isArray(nodes)) {\n      const shouldTrigger = nodes.every((node) => !!node && !path.includes(node));\n      shouldTrigger && callback(event as EventType);\n    } else if (ref.current && !path.includes(ref.current)) {\n      callback(event as EventType);\n    }\n  });\n\n  const eventsKey = eventsList.join(',');\n\n  useEffect(() => {\n    if (!enabled) {\n      return undefined;\n    }\n\n    const events = eventsKey.split(',');\n    events.forEach((fn) => document.addEventListener(fn, listener));\n\n    return () => {\n      events.forEach((fn) => document.removeEventListener(fn, listener));\n    };\n  }, [eventsKey, enabled]);\n\n  return ref;\n}\n"],"mappings":";;;AAIA,MAAM,iBAAiB,CAAC,aAAa,aAAa;AAElD,SAAgB,gBACd,UACA,QACA,OACA,UAAmB,MACnB;CACA,MAAM,MAAM,OAAU,KAAK;CAC3B,MAAM,aAAa,UAAU;CAE7B,MAAM,WAAW,gBAAgB,UAAiB;EAChD,MAAM,EAAE,WAAW,SAAS,EAAE;AAI9B,MAFE,CAAC,SAAS,KAAK,SAAS,OAAe,IAAK,QAAoB,YAAY,OAG5E;EAGF,MAAM,OAAO,MAAM,cAAc;AAEjC,MAAI,MAAM,QAAQ,MAAM,CACA,OAAM,OAAO,SAAS,CAAC,CAAC,QAAQ,CAAC,KAAK,SAAS,KAAK,CAAC,IAC1D,SAAS,MAAmB;WACpC,IAAI,WAAW,CAAC,KAAK,SAAS,IAAI,QAAQ,CACnD,UAAS,MAAmB;GAE9B;CAEF,MAAM,YAAY,WAAW,KAAK,IAAI;AAEtC,iBAAgB;AACd,MAAI,CAAC,QACH;EAGF,MAAM,SAAS,UAAU,MAAM,IAAI;AACnC,SAAO,SAAS,OAAO,SAAS,iBAAiB,IAAI,SAAS,CAAC;AAE/D,eAAa;AACX,UAAO,SAAS,OAAO,SAAS,oBAAoB,IAAI,SAAS,CAAC;;IAEnE,CAAC,WAAW,QAAQ,CAAC;AAExB,QAAO"}

package/esm/use-clipboard/use-clipboard.mjs

@@ -1,23 +1,30 @@
 "use client";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 //#region packages/@mantine/hooks/src/use-clipboard/use-clipboard.ts
-function useClipboard(options = { timeout: 2e3 }) {
+function useClipboard(options = {}) {
+	const timeout = options.timeout ?? 2e3;
 	const [error, setError] = useState(null);
 	const [copied, setCopied] = useState(false);
-	const [copyTimeout, setCopyTimeout] = useState(null);
+	const timeoutRef = useRef(null);
+	useEffect(() => () => {
+		window.clearTimeout(timeoutRef.current);
+	}, []);
 	const handleCopyResult = (value) => {
-		window.clearTimeout(copyTimeout);
-		setCopyTimeout(window.setTimeout(() => setCopied(false), options.timeout));
+		window.clearTimeout(timeoutRef.current);
+		timeoutRef.current = window.setTimeout(() => setCopied(false), timeout);
 		setCopied(value);
 	};
 	const copy = (value) => {
-		if ("clipboard" in navigator) navigator.clipboard.writeText(value).then(() => handleCopyResult(true)).catch((err) => setError(err));
+		if ("clipboard" in navigator) navigator.clipboard.writeText(value).then(() => {
+			setError(null);
+			handleCopyResult(true);
+		}).catch((err) => setError(err));
 		else setError(/* @__PURE__ */ new Error("useClipboard: navigator.clipboard is not supported"));
 	};
 	const reset = () => {
 		setCopied(false);
 		setError(null);
-		window.clearTimeout(copyTimeout);
+		window.clearTimeout(timeoutRef.current);
 	};
 	return {
 		copy,

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

@@ -1 +1 @@
-{"version":3,"file":"use-clipboard.mjs","names":[],"sources":["../../src/use-clipboard/use-clipboard.ts"],"sourcesContent":["import { useState } from 'react';\n\nexport interface UseClipboardInput {\n  /** Time in ms after which the copied state will reset, `2000` by default */\n  timeout?: number;\n}\n\nexport interface UseClipboardReturnValue {\n  /** Function to copy value to clipboard */\n  copy: (value: any) => void;\n\n  /** Function to reset copied state and error */\n  reset: () => void;\n\n  /** Error if copying failed */\n  error: Error | null;\n\n  /** Boolean indicating if the value was copied successfully */\n  copied: boolean;\n}\n\nexport function useClipboard(\n  options: UseClipboardInput = { timeout: 2000 }\n): UseClipboardReturnValue {\n  const [error, setError] = useState<Error | null>(null);\n  const [copied, setCopied] = useState(false);\n  const [copyTimeout, setCopyTimeout] = useState<number | null>(null);\n\n  const handleCopyResult = (value: boolean) => {\n    window.clearTimeout(copyTimeout!);\n    setCopyTimeout(window.setTimeout(() => setCopied(false), options.timeout));\n    setCopied(value);\n  };\n\n  const copy = (value: any) => {\n    if ('clipboard' in navigator) {\n      navigator.clipboard\n        .writeText(value)\n        .then(() => handleCopyResult(true))\n        .catch((err) => setError(err));\n    } else {\n      setError(new Error('useClipboard: navigator.clipboard is not supported'));\n    }\n  };\n\n  const reset = () => {\n    setCopied(false);\n    setError(null);\n    window.clearTimeout(copyTimeout!);\n  };\n\n  return { copy, reset, error, copied };\n}\n\nexport namespace useClipboard {\n  export type Input = UseClipboardInput;\n  export type ReturnValue = UseClipboardReturnValue;\n}\n"],"mappings":";;;AAqBA,SAAgB,aACd,UAA6B,EAAE,SAAS,KAAM,EACrB;CACzB,MAAM,CAAC,OAAO,YAAY,SAAuB,KAAK;CACtD,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,CAAC,aAAa,kBAAkB,SAAwB,KAAK;CAEnE,MAAM,oBAAoB,UAAmB;AAC3C,SAAO,aAAa,YAAa;AACjC,iBAAe,OAAO,iBAAiB,UAAU,MAAM,EAAE,QAAQ,QAAQ,CAAC;AAC1E,YAAU,MAAM;;CAGlB,MAAM,QAAQ,UAAe;AAC3B,MAAI,eAAe,UACjB,WAAU,UACP,UAAU,MAAM,CAChB,WAAW,iBAAiB,KAAK,CAAC,CAClC,OAAO,QAAQ,SAAS,IAAI,CAAC;MAEhC,0BAAS,IAAI,MAAM,qDAAqD,CAAC;;CAI7E,MAAM,cAAc;AAClB,YAAU,MAAM;AAChB,WAAS,KAAK;AACd,SAAO,aAAa,YAAa;;AAGnC,QAAO;EAAE;EAAM;EAAO;EAAO;EAAQ"}
+{"version":3,"file":"use-clipboard.mjs","names":[],"sources":["../../src/use-clipboard/use-clipboard.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport interface UseClipboardInput {\n  /** Time in ms after which the copied state will reset, `2000` by default */\n  timeout?: number;\n}\n\nexport interface UseClipboardReturnValue {\n  /** Function to copy value to clipboard */\n  copy: (value: any) => void;\n\n  /** Function to reset copied state and error */\n  reset: () => void;\n\n  /** Error if copying failed */\n  error: Error | null;\n\n  /** Boolean indicating if the value was copied successfully */\n  copied: boolean;\n}\n\nexport function useClipboard(options: UseClipboardInput = {}): UseClipboardReturnValue {\n  const timeout = options.timeout ?? 2000;\n  const [error, setError] = useState<Error | null>(null);\n  const [copied, setCopied] = useState(false);\n  const timeoutRef = useRef<number | null>(null);\n\n  useEffect(\n    () => () => {\n      window.clearTimeout(timeoutRef.current!);\n    },\n    []\n  );\n\n  const handleCopyResult = (value: boolean) => {\n    window.clearTimeout(timeoutRef.current!);\n    timeoutRef.current = window.setTimeout(() => setCopied(false), timeout);\n    setCopied(value);\n  };\n\n  const copy = (value: any) => {\n    if ('clipboard' in navigator) {\n      navigator.clipboard\n        .writeText(value)\n        .then(() => {\n          setError(null);\n          handleCopyResult(true);\n        })\n        .catch((err) => setError(err));\n    } else {\n      setError(new Error('useClipboard: navigator.clipboard is not supported'));\n    }\n  };\n\n  const reset = () => {\n    setCopied(false);\n    setError(null);\n    window.clearTimeout(timeoutRef.current!);\n  };\n\n  return { copy, reset, error, copied };\n}\n\nexport namespace useClipboard {\n  export type Input = UseClipboardInput;\n  export type ReturnValue = UseClipboardReturnValue;\n}\n"],"mappings":";;;AAqBA,SAAgB,aAAa,UAA6B,EAAE,EAA2B;CACrF,MAAM,UAAU,QAAQ,WAAW;CACnC,MAAM,CAAC,OAAO,YAAY,SAAuB,KAAK;CACtD,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,aAAa,OAAsB,KAAK;AAE9C,uBACc;AACV,SAAO,aAAa,WAAW,QAAS;IAE1C,EAAE,CACH;CAED,MAAM,oBAAoB,UAAmB;AAC3C,SAAO,aAAa,WAAW,QAAS;AACxC,aAAW,UAAU,OAAO,iBAAiB,UAAU,MAAM,EAAE,QAAQ;AACvE,YAAU,MAAM;;CAGlB,MAAM,QAAQ,UAAe;AAC3B,MAAI,eAAe,UACjB,WAAU,UACP,UAAU,MAAM,CAChB,WAAW;AACV,YAAS,KAAK;AACd,oBAAiB,KAAK;IACtB,CACD,OAAO,QAAQ,SAAS,IAAI,CAAC;MAEhC,0BAAS,IAAI,MAAM,qDAAqD,CAAC;;CAI7E,MAAM,cAAc;AAClB,YAAU,MAAM;AAChB,WAAS,KAAK;AACd,SAAO,aAAa,WAAW,QAAS;;AAG1C,QAAO;EAAE;EAAM;EAAO;EAAO;EAAQ"}

package/esm/use-collapse/use-collapse.mjs

@@ -32,7 +32,7 @@ function useCollapse({ transitionDuration, transitionTimingFunction = "ease", on
 		}));
 	};
 	const getTransitionStyles = (height) => {
-		const duration = transitionDuration || getAutoHeightDuration(height);
+		const duration = transitionDuration ?? getAutoHeightDuration(height);
 		return { transition: `height ${duration}ms ${transitionTimingFunction}, opacity ${duration}ms ${transitionTimingFunction}` };
 	};
 	useDidUpdate(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"use-collapse.mjs","names":[],"sources":["../../src/use-collapse/use-collapse.ts"],"sourcesContent":["import React, { CSSProperties, useEffectEvent, useRef, useState } from 'react';\nimport { flushSync } from 'react-dom';\nimport { useDidUpdate } from '../use-did-update/use-did-update';\nimport { mergeRefs } from '../use-merged-ref/use-merged-ref';\n\nfunction getAutoHeightDuration(height: number | string) {\n  if (!height || typeof height === 'string') {\n    return 0;\n  }\n  const constant = height / 36;\n  return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);\n}\n\nexport function getElementHeight(elementRef: React.RefObject<HTMLElement | null>) {\n  return elementRef.current ? elementRef.current.scrollHeight : 'auto';\n}\n\nexport interface UseCollapseInput {\n  /** Expanded state  */\n  expanded: boolean;\n\n  /** Transition duration in milliseconds, by default calculated based on content height */\n  transitionDuration?: number;\n\n  /** Transition timing function, `ease` by default */\n  transitionTimingFunction?: string;\n\n  /** Called when transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Called when transition starts */\n  onTransitionStart?: () => void;\n\n  /** If true, collapsed content is kept in the DOM and hidden with `display: none` styles */\n  keepMounted?: boolean;\n}\n\ninterface GetCollapsePropsInput {\n  style?: CSSProperties;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\ninterface GetCollapsePropsReturnValue {\n  'aria-hidden': boolean;\n  inert: boolean;\n  ref: React.RefCallback<HTMLDivElement>;\n  onTransitionEnd: (event: React.TransitionEvent<Element>) => void;\n  style: React.CSSProperties;\n}\n\nexport type UseCollapseState = 'entering' | 'entered' | 'exiting' | 'exited';\n\nexport interface UseCollapseReturnValue {\n  /** Current transition state */\n  state: UseCollapseState;\n\n  /** Props to pass down to the collapsible element */\n  getCollapseProps: (input?: GetCollapsePropsInput) => GetCollapsePropsReturnValue;\n}\n\nexport function useCollapse({\n  transitionDuration,\n  transitionTimingFunction = 'ease',\n  onTransitionEnd,\n  onTransitionStart,\n  expanded,\n  keepMounted,\n}: UseCollapseInput): UseCollapseReturnValue {\n  const collapsedStyles = {\n    height: 0,\n    overflow: 'hidden',\n    ...(keepMounted ? {} : { display: 'none' }),\n  };\n\n  const onTransitionStartEvent = useEffectEvent(() => onTransitionStart?.());\n\n  const elementRef = useRef<HTMLElement>(null);\n  const [styles, setStylesRaw] = useState<CSSProperties>(expanded ? {} : collapsedStyles);\n  const [state, setState] = useState<UseCollapseState>(expanded ? 'entered' : 'exited');\n  const setStyles = (newStyles: React.SetStateAction<CSSProperties>) => {\n    flushSync(() => setStylesRaw(newStyles));\n  };\n\n  const mergeStyles = (newStyles: CSSProperties) => {\n    setStyles((oldStyles) => ({ ...oldStyles, ...newStyles }));\n  };\n\n  const getTransitionStyles = (height: number | string) => {\n    const duration = transitionDuration || getAutoHeightDuration(height);\n    return {\n      transition: `height ${duration}ms ${transitionTimingFunction}, opacity ${duration}ms ${transitionTimingFunction}`,\n    };\n  };\n\n  useDidUpdate(() => {\n    const shouldTransition = transitionDuration !== 0;\n\n    if (shouldTransition) {\n      onTransitionStartEvent();\n    }\n\n    if (expanded) {\n      window.requestAnimationFrame(() => {\n        flushSync(() => setState('entering'));\n        mergeStyles({ willChange: 'height', display: 'block', overflow: 'hidden' });\n        window.requestAnimationFrame(() => {\n          const height = getElementHeight(elementRef);\n          mergeStyles({ ...getTransitionStyles(height), height });\n        });\n      });\n    } else {\n      window.requestAnimationFrame(() => {\n        flushSync(() => setState('exiting'));\n        const height = getElementHeight(elementRef);\n        mergeStyles({ ...getTransitionStyles(height), willChange: 'height', height });\n        window.requestAnimationFrame(() => mergeStyles({ height: 0, overflow: 'hidden' }));\n      });\n    }\n  }, [expanded]);\n\n  const handleTransitionEnd = (event: React.TransitionEvent): void => {\n    if (event.target !== elementRef.current || event.propertyName !== 'height') {\n      return;\n    }\n\n    if (expanded) {\n      const height = getElementHeight(elementRef);\n\n      if (height === styles.height) {\n        setStyles({});\n      } else {\n        mergeStyles({ height });\n      }\n\n      setState('entered');\n      onTransitionEnd?.();\n    } else if (styles.height === 0) {\n      setStyles(collapsedStyles);\n      setState('exited');\n      onTransitionEnd?.();\n    }\n  };\n\n  return {\n    state,\n    getCollapseProps: (input) => ({\n      'aria-hidden': !expanded,\n      inert: !expanded,\n      ref: mergeRefs(elementRef, input?.ref),\n      onTransitionEnd: handleTransitionEnd,\n      style: { boxSizing: 'border-box', ...input?.style, ...styles },\n    }),\n  };\n}\n\nexport namespace useCollapse {\n  export type Input = UseCollapseInput;\n  export type ReturnValue = UseCollapseReturnValue;\n  export type State = UseCollapseState;\n}\n"],"mappings":";;;;;;AAKA,SAAS,sBAAsB,QAAyB;AACtD,KAAI,CAAC,UAAU,OAAO,WAAW,SAC/B,QAAO;CAET,MAAM,WAAW,SAAS;AAC1B,QAAO,KAAK,OAAO,IAAI,KAAK,YAAY,MAAO,WAAW,KAAK,GAAG;;AAGpE,SAAgB,iBAAiB,YAAiD;AAChF,QAAO,WAAW,UAAU,WAAW,QAAQ,eAAe;;AA8ChE,SAAgB,YAAY,EAC1B,oBACA,2BAA2B,QAC3B,iBACA,mBACA,UACA,eAC2C;CAC3C,MAAM,kBAAkB;EACtB,QAAQ;EACR,UAAU;EACV,GAAI,cAAc,EAAE,GAAG,EAAE,SAAS,QAAQ;EAC3C;CAED,MAAM,yBAAyB,qBAAqB,qBAAqB,CAAC;CAE1E,MAAM,aAAa,OAAoB,KAAK;CAC5C,MAAM,CAAC,QAAQ,gBAAgB,SAAwB,WAAW,EAAE,GAAG,gBAAgB;CACvF,MAAM,CAAC,OAAO,YAAY,SAA2B,WAAW,YAAY,SAAS;CACrF,MAAM,aAAa,cAAmD;AACpE,kBAAgB,aAAa,UAAU,CAAC;;CAG1C,MAAM,eAAe,cAA6B;AAChD,aAAW,eAAe;GAAE,GAAG;GAAW,GAAG;GAAW,EAAE;;CAG5D,MAAM,uBAAuB,WAA4B;EACvD,MAAM,WAAW,sBAAsB,sBAAsB,OAAO;AACpE,SAAO,EACL,YAAY,UAAU,SAAS,KAAK,yBAAyB,YAAY,SAAS,KAAK,4BACxF;;AAGH,oBAAmB;AAGjB,MAFyB,uBAAuB,EAG9C,yBAAwB;AAG1B,MAAI,SACF,QAAO,4BAA4B;AACjC,mBAAgB,SAAS,WAAW,CAAC;AACrC,eAAY;IAAE,YAAY;IAAU,SAAS;IAAS,UAAU;IAAU,CAAC;AAC3E,UAAO,4BAA4B;IACjC,MAAM,SAAS,iBAAiB,WAAW;AAC3C,gBAAY;KAAE,GAAG,oBAAoB,OAAO;KAAE;KAAQ,CAAC;KACvD;IACF;MAEF,QAAO,4BAA4B;AACjC,mBAAgB,SAAS,UAAU,CAAC;GACpC,MAAM,SAAS,iBAAiB,WAAW;AAC3C,eAAY;IAAE,GAAG,oBAAoB,OAAO;IAAE,YAAY;IAAU;IAAQ,CAAC;AAC7E,UAAO,4BAA4B,YAAY;IAAE,QAAQ;IAAG,UAAU;IAAU,CAAC,CAAC;IAClF;IAEH,CAAC,SAAS,CAAC;CAEd,MAAM,uBAAuB,UAAuC;AAClE,MAAI,MAAM,WAAW,WAAW,WAAW,MAAM,iBAAiB,SAChE;AAGF,MAAI,UAAU;GACZ,MAAM,SAAS,iBAAiB,WAAW;AAE3C,OAAI,WAAW,OAAO,OACpB,WAAU,EAAE,CAAC;OAEb,aAAY,EAAE,QAAQ,CAAC;AAGzB,YAAS,UAAU;AACnB,sBAAmB;aACV,OAAO,WAAW,GAAG;AAC9B,aAAU,gBAAgB;AAC1B,YAAS,SAAS;AAClB,sBAAmB;;;AAIvB,QAAO;EACL;EACA,mBAAmB,WAAW;GAC5B,eAAe,CAAC;GAChB,OAAO,CAAC;GACR,KAAK,UAAU,YAAY,OAAO,IAAI;GACtC,iBAAiB;GACjB,OAAO;IAAE,WAAW;IAAc,GAAG,OAAO;IAAO,GAAG;IAAQ;GAC/D;EACF"}
+{"version":3,"file":"use-collapse.mjs","names":[],"sources":["../../src/use-collapse/use-collapse.ts"],"sourcesContent":["import React, { CSSProperties, useEffectEvent, useRef, useState } from 'react';\nimport { flushSync } from 'react-dom';\nimport { useDidUpdate } from '../use-did-update/use-did-update';\nimport { mergeRefs } from '../use-merged-ref/use-merged-ref';\n\nfunction getAutoHeightDuration(height: number | string) {\n  if (!height || typeof height === 'string') {\n    return 0;\n  }\n  const constant = height / 36;\n  return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);\n}\n\nexport function getElementHeight(elementRef: React.RefObject<HTMLElement | null>) {\n  return elementRef.current ? elementRef.current.scrollHeight : 'auto';\n}\n\nexport interface UseCollapseInput {\n  /** Expanded state  */\n  expanded: boolean;\n\n  /** Transition duration in milliseconds, by default calculated based on content height */\n  transitionDuration?: number;\n\n  /** Transition timing function, `ease` by default */\n  transitionTimingFunction?: string;\n\n  /** Called when transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Called when transition starts */\n  onTransitionStart?: () => void;\n\n  /** If true, collapsed content is kept in the DOM and hidden with `display: none` styles */\n  keepMounted?: boolean;\n}\n\ninterface GetCollapsePropsInput {\n  style?: CSSProperties;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\ninterface GetCollapsePropsReturnValue {\n  'aria-hidden': boolean;\n  inert: boolean;\n  ref: React.RefCallback<HTMLDivElement>;\n  onTransitionEnd: (event: React.TransitionEvent<Element>) => void;\n  style: React.CSSProperties;\n}\n\nexport type UseCollapseState = 'entering' | 'entered' | 'exiting' | 'exited';\n\nexport interface UseCollapseReturnValue {\n  /** Current transition state */\n  state: UseCollapseState;\n\n  /** Props to pass down to the collapsible element */\n  getCollapseProps: (input?: GetCollapsePropsInput) => GetCollapsePropsReturnValue;\n}\n\nexport function useCollapse({\n  transitionDuration,\n  transitionTimingFunction = 'ease',\n  onTransitionEnd,\n  onTransitionStart,\n  expanded,\n  keepMounted,\n}: UseCollapseInput): UseCollapseReturnValue {\n  const collapsedStyles = {\n    height: 0,\n    overflow: 'hidden',\n    ...(keepMounted ? {} : { display: 'none' }),\n  };\n\n  const onTransitionStartEvent = useEffectEvent(() => onTransitionStart?.());\n\n  const elementRef = useRef<HTMLElement>(null);\n  const [styles, setStylesRaw] = useState<CSSProperties>(expanded ? {} : collapsedStyles);\n  const [state, setState] = useState<UseCollapseState>(expanded ? 'entered' : 'exited');\n  const setStyles = (newStyles: React.SetStateAction<CSSProperties>) => {\n    flushSync(() => setStylesRaw(newStyles));\n  };\n\n  const mergeStyles = (newStyles: CSSProperties) => {\n    setStyles((oldStyles) => ({ ...oldStyles, ...newStyles }));\n  };\n\n  const getTransitionStyles = (height: number | string) => {\n    const duration = transitionDuration ?? getAutoHeightDuration(height);\n    return {\n      transition: `height ${duration}ms ${transitionTimingFunction}, opacity ${duration}ms ${transitionTimingFunction}`,\n    };\n  };\n\n  useDidUpdate(() => {\n    const shouldTransition = transitionDuration !== 0;\n\n    if (shouldTransition) {\n      onTransitionStartEvent();\n    }\n\n    if (expanded) {\n      window.requestAnimationFrame(() => {\n        flushSync(() => setState('entering'));\n        mergeStyles({ willChange: 'height', display: 'block', overflow: 'hidden' });\n        window.requestAnimationFrame(() => {\n          const height = getElementHeight(elementRef);\n          mergeStyles({ ...getTransitionStyles(height), height });\n        });\n      });\n    } else {\n      window.requestAnimationFrame(() => {\n        flushSync(() => setState('exiting'));\n        const height = getElementHeight(elementRef);\n        mergeStyles({ ...getTransitionStyles(height), willChange: 'height', height });\n        window.requestAnimationFrame(() => mergeStyles({ height: 0, overflow: 'hidden' }));\n      });\n    }\n  }, [expanded]);\n\n  const handleTransitionEnd = (event: React.TransitionEvent): void => {\n    if (event.target !== elementRef.current || event.propertyName !== 'height') {\n      return;\n    }\n\n    if (expanded) {\n      const height = getElementHeight(elementRef);\n\n      if (height === styles.height) {\n        setStyles({});\n      } else {\n        mergeStyles({ height });\n      }\n\n      setState('entered');\n      onTransitionEnd?.();\n    } else if (styles.height === 0) {\n      setStyles(collapsedStyles);\n      setState('exited');\n      onTransitionEnd?.();\n    }\n  };\n\n  return {\n    state,\n    getCollapseProps: (input) => ({\n      'aria-hidden': !expanded,\n      inert: !expanded,\n      ref: mergeRefs(elementRef, input?.ref),\n      onTransitionEnd: handleTransitionEnd,\n      style: { boxSizing: 'border-box', ...input?.style, ...styles },\n    }),\n  };\n}\n\nexport namespace useCollapse {\n  export type Input = UseCollapseInput;\n  export type ReturnValue = UseCollapseReturnValue;\n  export type State = UseCollapseState;\n}\n"],"mappings":";;;;;;AAKA,SAAS,sBAAsB,QAAyB;AACtD,KAAI,CAAC,UAAU,OAAO,WAAW,SAC/B,QAAO;CAET,MAAM,WAAW,SAAS;AAC1B,QAAO,KAAK,OAAO,IAAI,KAAK,YAAY,MAAO,WAAW,KAAK,GAAG;;AAGpE,SAAgB,iBAAiB,YAAiD;AAChF,QAAO,WAAW,UAAU,WAAW,QAAQ,eAAe;;AA8ChE,SAAgB,YAAY,EAC1B,oBACA,2BAA2B,QAC3B,iBACA,mBACA,UACA,eAC2C;CAC3C,MAAM,kBAAkB;EACtB,QAAQ;EACR,UAAU;EACV,GAAI,cAAc,EAAE,GAAG,EAAE,SAAS,QAAQ;EAC3C;CAED,MAAM,yBAAyB,qBAAqB,qBAAqB,CAAC;CAE1E,MAAM,aAAa,OAAoB,KAAK;CAC5C,MAAM,CAAC,QAAQ,gBAAgB,SAAwB,WAAW,EAAE,GAAG,gBAAgB;CACvF,MAAM,CAAC,OAAO,YAAY,SAA2B,WAAW,YAAY,SAAS;CACrF,MAAM,aAAa,cAAmD;AACpE,kBAAgB,aAAa,UAAU,CAAC;;CAG1C,MAAM,eAAe,cAA6B;AAChD,aAAW,eAAe;GAAE,GAAG;GAAW,GAAG;GAAW,EAAE;;CAG5D,MAAM,uBAAuB,WAA4B;EACvD,MAAM,WAAW,sBAAsB,sBAAsB,OAAO;AACpE,SAAO,EACL,YAAY,UAAU,SAAS,KAAK,yBAAyB,YAAY,SAAS,KAAK,4BACxF;;AAGH,oBAAmB;AAGjB,MAFyB,uBAAuB,EAG9C,yBAAwB;AAG1B,MAAI,SACF,QAAO,4BAA4B;AACjC,mBAAgB,SAAS,WAAW,CAAC;AACrC,eAAY;IAAE,YAAY;IAAU,SAAS;IAAS,UAAU;IAAU,CAAC;AAC3E,UAAO,4BAA4B;IACjC,MAAM,SAAS,iBAAiB,WAAW;AAC3C,gBAAY;KAAE,GAAG,oBAAoB,OAAO;KAAE;KAAQ,CAAC;KACvD;IACF;MAEF,QAAO,4BAA4B;AACjC,mBAAgB,SAAS,UAAU,CAAC;GACpC,MAAM,SAAS,iBAAiB,WAAW;AAC3C,eAAY;IAAE,GAAG,oBAAoB,OAAO;IAAE,YAAY;IAAU;IAAQ,CAAC;AAC7E,UAAO,4BAA4B,YAAY;IAAE,QAAQ;IAAG,UAAU;IAAU,CAAC,CAAC;IAClF;IAEH,CAAC,SAAS,CAAC;CAEd,MAAM,uBAAuB,UAAuC;AAClE,MAAI,MAAM,WAAW,WAAW,WAAW,MAAM,iBAAiB,SAChE;AAGF,MAAI,UAAU;GACZ,MAAM,SAAS,iBAAiB,WAAW;AAE3C,OAAI,WAAW,OAAO,OACpB,WAAU,EAAE,CAAC;OAEb,aAAY,EAAE,QAAQ,CAAC;AAGzB,YAAS,UAAU;AACnB,sBAAmB;aACV,OAAO,WAAW,GAAG;AAC9B,aAAU,gBAAgB;AAC1B,YAAS,SAAS;AAClB,sBAAmB;;;AAIvB,QAAO;EACL;EACA,mBAAmB,WAAW;GAC5B,eAAe,CAAC;GAChB,OAAO,CAAC;GACR,KAAK,UAAU,YAAY,OAAO,IAAI;GACtC,iBAAiB;GACjB,OAAO;IAAE,WAAW;IAAc,GAAG,OAAO;IAAO,GAAG;IAAQ;GAC/D;EACF"}

package/esm/use-collapse/use-horizontal-collapse.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { useDidUpdate } from "../use-did-update/use-did-update.mjs";
 import { mergeRefs } from "../use-merged-ref/use-merged-ref.mjs";
-import { useRef, useState } from "react";
+import { useEffectEvent, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 //#region packages/@mantine/hooks/src/use-collapse/use-horizontal-collapse.ts
 function getAutoWidthDuration(width) {
@@ -18,6 +18,7 @@ function useHorizontalCollapse({ transitionDuration, transitionTimingFunction =
 		overflow: "hidden",
 		...keepMounted ? {} : { display: "none" }
 	};
+	const onTransitionStartEvent = useEffectEvent(() => onTransitionStart?.());
 	const elementRef = useRef(null);
 	const [styles, setStylesRaw] = useState(expanded ? {} : collapsedStyles);
 	const [state, setState] = useState(expanded ? "entered" : "exited");
@@ -31,11 +32,11 @@ function useHorizontalCollapse({ transitionDuration, transitionTimingFunction =
 		}));
 	};
 	const getTransitionStyles = (width) => {
-		const duration = transitionDuration || getAutoWidthDuration(width);
+		const duration = transitionDuration ?? getAutoWidthDuration(width);
 		return { transition: `width ${duration}ms ${transitionTimingFunction}, opacity ${duration}ms ${transitionTimingFunction}` };
 	};
 	useDidUpdate(() => {
-		if (transitionDuration !== 0) onTransitionStart?.();
+		if (transitionDuration !== 0) onTransitionStartEvent();
 		if (expanded) window.requestAnimationFrame(() => {
 			flushSync(() => setState("entering"));
 			mergeStyles({
@@ -64,7 +65,7 @@ function useHorizontalCollapse({ transitionDuration, transitionTimingFunction =
 				overflow: "hidden"
 			}));
 		});
-	}, [expanded, onTransitionStart]);
+	}, [expanded]);
 	const handleTransitionEnd = (event) => {
 		if (event.target !== elementRef.current || event.propertyName !== "width") return;
 		if (expanded) {

package/esm/use-collapse/use-horizontal-collapse.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-horizontal-collapse.mjs","names":[],"sources":["../../src/use-collapse/use-horizontal-collapse.ts"],"sourcesContent":["import React, { CSSProperties, useRef, useState } from 'react';\nimport { flushSync } from 'react-dom';\nimport { useDidUpdate } from '../use-did-update/use-did-update';\nimport { mergeRefs } from '../use-merged-ref/use-merged-ref';\n\nfunction getAutoWidthDuration(width: number | string) {\n  if (!width || typeof width === 'string') {\n    return 0;\n  }\n  const constant = width / 36;\n  return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);\n}\n\nexport function getElementWidth(elementRef: React.RefObject<HTMLElement | null>) {\n  return elementRef.current ? elementRef.current.scrollWidth : 'auto';\n}\n\nexport interface UseHorizontalCollapseInput {\n  /** Expanded state  */\n  expanded: boolean;\n\n  /** Transition duration in milliseconds, by default calculated based on content width */\n  transitionDuration?: number;\n\n  /** Transition timing function, `ease` by default */\n  transitionTimingFunction?: string;\n\n  /** Called when transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Called when transition starts */\n  onTransitionStart?: () => void;\n\n  /** If true, collapsed content is kept in the DOM and hidden with `display: none` styles */\n  keepMounted?: boolean;\n}\n\ninterface GetHorizontalCollapsePropsInput {\n  style?: CSSProperties;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\ninterface GetHorizontalCollapsePropsReturnValue {\n  'aria-hidden': boolean;\n  inert: boolean;\n  ref: React.RefCallback<HTMLDivElement>;\n  onTransitionEnd: (event: React.TransitionEvent<Element>) => void;\n  style: React.CSSProperties;\n}\n\nexport type UseHorizontalCollapseState = 'entering' | 'entered' | 'exiting' | 'exited';\n\nexport interface UseHorizontalCollapseReturnValue {\n  /** Current transition state */\n  state: UseHorizontalCollapseState;\n\n  /** Props to pass down to the collapsible element */\n  getCollapseProps: (\n    input?: GetHorizontalCollapsePropsInput\n  ) => GetHorizontalCollapsePropsReturnValue;\n}\n\nexport function useHorizontalCollapse({\n  transitionDuration,\n  transitionTimingFunction = 'ease',\n  onTransitionEnd,\n  onTransitionStart,\n  expanded,\n  keepMounted,\n}: UseHorizontalCollapseInput): UseHorizontalCollapseReturnValue {\n  const collapsedStyles = {\n    width: 0,\n    overflow: 'hidden',\n    ...(keepMounted ? {} : { display: 'none' }),\n  };\n\n  const elementRef = useRef<HTMLElement>(null);\n  const [styles, setStylesRaw] = useState<CSSProperties>(expanded ? {} : collapsedStyles);\n  const [state, setState] = useState<UseHorizontalCollapseState>(expanded ? 'entered' : 'exited');\n  const setStyles = (newStyles: React.SetStateAction<CSSProperties>) => {\n    flushSync(() => setStylesRaw(newStyles));\n  };\n\n  const mergeStyles = (newStyles: CSSProperties) => {\n    setStyles((oldStyles) => ({ ...oldStyles, ...newStyles }));\n  };\n\n  const getTransitionStyles = (width: number | string) => {\n    const duration = transitionDuration || getAutoWidthDuration(width);\n    return {\n      transition: `width ${duration}ms ${transitionTimingFunction}, opacity ${duration}ms ${transitionTimingFunction}`,\n    };\n  };\n\n  useDidUpdate(() => {\n    const shouldTransition = transitionDuration !== 0;\n\n    if (shouldTransition) {\n      onTransitionStart?.();\n    }\n\n    if (expanded) {\n      window.requestAnimationFrame(() => {\n        flushSync(() => setState('entering'));\n        mergeStyles({ willChange: 'width', display: 'block', overflow: 'hidden' });\n        window.requestAnimationFrame(() => {\n          const width = getElementWidth(elementRef);\n          mergeStyles({ ...getTransitionStyles(width), width });\n        });\n      });\n    } else {\n      window.requestAnimationFrame(() => {\n        flushSync(() => setState('exiting'));\n        const width = getElementWidth(elementRef);\n        mergeStyles({ ...getTransitionStyles(width), willChange: 'width', width });\n        window.requestAnimationFrame(() => mergeStyles({ width: 0, overflow: 'hidden' }));\n      });\n    }\n  }, [expanded, onTransitionStart]);\n\n  const handleTransitionEnd = (event: React.TransitionEvent): void => {\n    if (event.target !== elementRef.current || event.propertyName !== 'width') {\n      return;\n    }\n\n    if (expanded) {\n      const width = getElementWidth(elementRef);\n\n      if (width === styles.width) {\n        setStyles({});\n      } else {\n        mergeStyles({ width });\n      }\n\n      setState('entered');\n      onTransitionEnd?.();\n    } else if (styles.width === 0) {\n      setStyles(collapsedStyles);\n      setState('exited');\n      onTransitionEnd?.();\n    }\n  };\n\n  return {\n    state,\n    getCollapseProps: (input) => ({\n      'aria-hidden': !expanded,\n      inert: !expanded,\n      ref: mergeRefs(elementRef, input?.ref),\n      onTransitionEnd: handleTransitionEnd,\n      style: { boxSizing: 'border-box', ...input?.style, ...styles },\n    }),\n  };\n}\n"],"mappings":";;;;;;AAKA,SAAS,qBAAqB,OAAwB;AACpD,KAAI,CAAC,SAAS,OAAO,UAAU,SAC7B,QAAO;CAET,MAAM,WAAW,QAAQ;AACzB,QAAO,KAAK,OAAO,IAAI,KAAK,YAAY,MAAO,WAAW,KAAK,GAAG;;AAGpE,SAAgB,gBAAgB,YAAiD;AAC/E,QAAO,WAAW,UAAU,WAAW,QAAQ,cAAc;;AAgD/D,SAAgB,sBAAsB,EACpC,oBACA,2BAA2B,QAC3B,iBACA,mBACA,UACA,eAC+D;CAC/D,MAAM,kBAAkB;EACtB,OAAO;EACP,UAAU;EACV,GAAI,cAAc,EAAE,GAAG,EAAE,SAAS,QAAQ;EAC3C;CAED,MAAM,aAAa,OAAoB,KAAK;CAC5C,MAAM,CAAC,QAAQ,gBAAgB,SAAwB,WAAW,EAAE,GAAG,gBAAgB;CACvF,MAAM,CAAC,OAAO,YAAY,SAAqC,WAAW,YAAY,SAAS;CAC/F,MAAM,aAAa,cAAmD;AACpE,kBAAgB,aAAa,UAAU,CAAC;;CAG1C,MAAM,eAAe,cAA6B;AAChD,aAAW,eAAe;GAAE,GAAG;GAAW,GAAG;GAAW,EAAE;;CAG5D,MAAM,uBAAuB,UAA2B;EACtD,MAAM,WAAW,sBAAsB,qBAAqB,MAAM;AAClE,SAAO,EACL,YAAY,SAAS,SAAS,KAAK,yBAAyB,YAAY,SAAS,KAAK,4BACvF;;AAGH,oBAAmB;AAGjB,MAFyB,uBAAuB,EAG9C,sBAAqB;AAGvB,MAAI,SACF,QAAO,4BAA4B;AACjC,mBAAgB,SAAS,WAAW,CAAC;AACrC,eAAY;IAAE,YAAY;IAAS,SAAS;IAAS,UAAU;IAAU,CAAC;AAC1E,UAAO,4BAA4B;IACjC,MAAM,QAAQ,gBAAgB,WAAW;AACzC,gBAAY;KAAE,GAAG,oBAAoB,MAAM;KAAE;KAAO,CAAC;KACrD;IACF;MAEF,QAAO,4BAA4B;AACjC,mBAAgB,SAAS,UAAU,CAAC;GACpC,MAAM,QAAQ,gBAAgB,WAAW;AACzC,eAAY;IAAE,GAAG,oBAAoB,MAAM;IAAE,YAAY;IAAS;IAAO,CAAC;AAC1E,UAAO,4BAA4B,YAAY;IAAE,OAAO;IAAG,UAAU;IAAU,CAAC,CAAC;IACjF;IAEH,CAAC,UAAU,kBAAkB,CAAC;CAEjC,MAAM,uBAAuB,UAAuC;AAClE,MAAI,MAAM,WAAW,WAAW,WAAW,MAAM,iBAAiB,QAChE;AAGF,MAAI,UAAU;GACZ,MAAM,QAAQ,gBAAgB,WAAW;AAEzC,OAAI,UAAU,OAAO,MACnB,WAAU,EAAE,CAAC;OAEb,aAAY,EAAE,OAAO,CAAC;AAGxB,YAAS,UAAU;AACnB,sBAAmB;aACV,OAAO,UAAU,GAAG;AAC7B,aAAU,gBAAgB;AAC1B,YAAS,SAAS;AAClB,sBAAmB;;;AAIvB,QAAO;EACL;EACA,mBAAmB,WAAW;GAC5B,eAAe,CAAC;GAChB,OAAO,CAAC;GACR,KAAK,UAAU,YAAY,OAAO,IAAI;GACtC,iBAAiB;GACjB,OAAO;IAAE,WAAW;IAAc,GAAG,OAAO;IAAO,GAAG;IAAQ;GAC/D;EACF"}
+{"version":3,"file":"use-horizontal-collapse.mjs","names":[],"sources":["../../src/use-collapse/use-horizontal-collapse.ts"],"sourcesContent":["import React, { CSSProperties, useEffectEvent, useRef, useState } from 'react';\nimport { flushSync } from 'react-dom';\nimport { useDidUpdate } from '../use-did-update/use-did-update';\nimport { mergeRefs } from '../use-merged-ref/use-merged-ref';\n\nfunction getAutoWidthDuration(width: number | string) {\n  if (!width || typeof width === 'string') {\n    return 0;\n  }\n  const constant = width / 36;\n  return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);\n}\n\nexport function getElementWidth(elementRef: React.RefObject<HTMLElement | null>) {\n  return elementRef.current ? elementRef.current.scrollWidth : 'auto';\n}\n\nexport interface UseHorizontalCollapseInput {\n  /** Expanded state  */\n  expanded: boolean;\n\n  /** Transition duration in milliseconds, by default calculated based on content width */\n  transitionDuration?: number;\n\n  /** Transition timing function, `ease` by default */\n  transitionTimingFunction?: string;\n\n  /** Called when transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Called when transition starts */\n  onTransitionStart?: () => void;\n\n  /** If true, collapsed content is kept in the DOM and hidden with `display: none` styles */\n  keepMounted?: boolean;\n}\n\ninterface GetHorizontalCollapsePropsInput {\n  style?: CSSProperties;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\ninterface GetHorizontalCollapsePropsReturnValue {\n  'aria-hidden': boolean;\n  inert: boolean;\n  ref: React.RefCallback<HTMLDivElement>;\n  onTransitionEnd: (event: React.TransitionEvent<Element>) => void;\n  style: React.CSSProperties;\n}\n\nexport type UseHorizontalCollapseState = 'entering' | 'entered' | 'exiting' | 'exited';\n\nexport interface UseHorizontalCollapseReturnValue {\n  /** Current transition state */\n  state: UseHorizontalCollapseState;\n\n  /** Props to pass down to the collapsible element */\n  getCollapseProps: (\n    input?: GetHorizontalCollapsePropsInput\n  ) => GetHorizontalCollapsePropsReturnValue;\n}\n\nexport function useHorizontalCollapse({\n  transitionDuration,\n  transitionTimingFunction = 'ease',\n  onTransitionEnd,\n  onTransitionStart,\n  expanded,\n  keepMounted,\n}: UseHorizontalCollapseInput): UseHorizontalCollapseReturnValue {\n  const collapsedStyles = {\n    width: 0,\n    overflow: 'hidden',\n    ...(keepMounted ? {} : { display: 'none' }),\n  };\n\n  const onTransitionStartEvent = useEffectEvent(() => onTransitionStart?.());\n\n  const elementRef = useRef<HTMLElement>(null);\n  const [styles, setStylesRaw] = useState<CSSProperties>(expanded ? {} : collapsedStyles);\n  const [state, setState] = useState<UseHorizontalCollapseState>(expanded ? 'entered' : 'exited');\n  const setStyles = (newStyles: React.SetStateAction<CSSProperties>) => {\n    flushSync(() => setStylesRaw(newStyles));\n  };\n\n  const mergeStyles = (newStyles: CSSProperties) => {\n    setStyles((oldStyles) => ({ ...oldStyles, ...newStyles }));\n  };\n\n  const getTransitionStyles = (width: number | string) => {\n    const duration = transitionDuration ?? getAutoWidthDuration(width);\n    return {\n      transition: `width ${duration}ms ${transitionTimingFunction}, opacity ${duration}ms ${transitionTimingFunction}`,\n    };\n  };\n\n  useDidUpdate(() => {\n    const shouldTransition = transitionDuration !== 0;\n\n    if (shouldTransition) {\n      onTransitionStartEvent();\n    }\n\n    if (expanded) {\n      window.requestAnimationFrame(() => {\n        flushSync(() => setState('entering'));\n        mergeStyles({ willChange: 'width', display: 'block', overflow: 'hidden' });\n        window.requestAnimationFrame(() => {\n          const width = getElementWidth(elementRef);\n          mergeStyles({ ...getTransitionStyles(width), width });\n        });\n      });\n    } else {\n      window.requestAnimationFrame(() => {\n        flushSync(() => setState('exiting'));\n        const width = getElementWidth(elementRef);\n        mergeStyles({ ...getTransitionStyles(width), willChange: 'width', width });\n        window.requestAnimationFrame(() => mergeStyles({ width: 0, overflow: 'hidden' }));\n      });\n    }\n  }, [expanded]);\n\n  const handleTransitionEnd = (event: React.TransitionEvent): void => {\n    if (event.target !== elementRef.current || event.propertyName !== 'width') {\n      return;\n    }\n\n    if (expanded) {\n      const width = getElementWidth(elementRef);\n\n      if (width === styles.width) {\n        setStyles({});\n      } else {\n        mergeStyles({ width });\n      }\n\n      setState('entered');\n      onTransitionEnd?.();\n    } else if (styles.width === 0) {\n      setStyles(collapsedStyles);\n      setState('exited');\n      onTransitionEnd?.();\n    }\n  };\n\n  return {\n    state,\n    getCollapseProps: (input) => ({\n      'aria-hidden': !expanded,\n      inert: !expanded,\n      ref: mergeRefs(elementRef, input?.ref),\n      onTransitionEnd: handleTransitionEnd,\n      style: { boxSizing: 'border-box', ...input?.style, ...styles },\n    }),\n  };\n}\n\nexport namespace useHorizontalCollapse {\n  export type Input = UseHorizontalCollapseInput;\n  export type ReturnValue = UseHorizontalCollapseReturnValue;\n  export type State = UseHorizontalCollapseState;\n}\n"],"mappings":";;;;;;AAKA,SAAS,qBAAqB,OAAwB;AACpD,KAAI,CAAC,SAAS,OAAO,UAAU,SAC7B,QAAO;CAET,MAAM,WAAW,QAAQ;AACzB,QAAO,KAAK,OAAO,IAAI,KAAK,YAAY,MAAO,WAAW,KAAK,GAAG;;AAGpE,SAAgB,gBAAgB,YAAiD;AAC/E,QAAO,WAAW,UAAU,WAAW,QAAQ,cAAc;;AAgD/D,SAAgB,sBAAsB,EACpC,oBACA,2BAA2B,QAC3B,iBACA,mBACA,UACA,eAC+D;CAC/D,MAAM,kBAAkB;EACtB,OAAO;EACP,UAAU;EACV,GAAI,cAAc,EAAE,GAAG,EAAE,SAAS,QAAQ;EAC3C;CAED,MAAM,yBAAyB,qBAAqB,qBAAqB,CAAC;CAE1E,MAAM,aAAa,OAAoB,KAAK;CAC5C,MAAM,CAAC,QAAQ,gBAAgB,SAAwB,WAAW,EAAE,GAAG,gBAAgB;CACvF,MAAM,CAAC,OAAO,YAAY,SAAqC,WAAW,YAAY,SAAS;CAC/F,MAAM,aAAa,cAAmD;AACpE,kBAAgB,aAAa,UAAU,CAAC;;CAG1C,MAAM,eAAe,cAA6B;AAChD,aAAW,eAAe;GAAE,GAAG;GAAW,GAAG;GAAW,EAAE;;CAG5D,MAAM,uBAAuB,UAA2B;EACtD,MAAM,WAAW,sBAAsB,qBAAqB,MAAM;AAClE,SAAO,EACL,YAAY,SAAS,SAAS,KAAK,yBAAyB,YAAY,SAAS,KAAK,4BACvF;;AAGH,oBAAmB;AAGjB,MAFyB,uBAAuB,EAG9C,yBAAwB;AAG1B,MAAI,SACF,QAAO,4BAA4B;AACjC,mBAAgB,SAAS,WAAW,CAAC;AACrC,eAAY;IAAE,YAAY;IAAS,SAAS;IAAS,UAAU;IAAU,CAAC;AAC1E,UAAO,4BAA4B;IACjC,MAAM,QAAQ,gBAAgB,WAAW;AACzC,gBAAY;KAAE,GAAG,oBAAoB,MAAM;KAAE;KAAO,CAAC;KACrD;IACF;MAEF,QAAO,4BAA4B;AACjC,mBAAgB,SAAS,UAAU,CAAC;GACpC,MAAM,QAAQ,gBAAgB,WAAW;AACzC,eAAY;IAAE,GAAG,oBAAoB,MAAM;IAAE,YAAY;IAAS;IAAO,CAAC;AAC1E,UAAO,4BAA4B,YAAY;IAAE,OAAO;IAAG,UAAU;IAAU,CAAC,CAAC;IACjF;IAEH,CAAC,SAAS,CAAC;CAEd,MAAM,uBAAuB,UAAuC;AAClE,MAAI,MAAM,WAAW,WAAW,WAAW,MAAM,iBAAiB,QAChE;AAGF,MAAI,UAAU;GACZ,MAAM,QAAQ,gBAAgB,WAAW;AAEzC,OAAI,UAAU,OAAO,MACnB,WAAU,EAAE,CAAC;OAEb,aAAY,EAAE,OAAO,CAAC;AAGxB,YAAS,UAAU;AACnB,sBAAmB;aACV,OAAO,UAAU,GAAG;AAC7B,aAAU,gBAAgB;AAC1B,YAAS,SAAS;AAClB,sBAAmB;;;AAIvB,QAAO;EACL;EACA,mBAAmB,WAAW;GAC5B,eAAe,CAAC;GAChB,OAAO,CAAC;GACR,KAAK,UAAU,YAAY,OAAO,IAAI;GACtC,iBAAiB;GACjB,OAAO;IAAE,WAAW;IAAc,GAAG,OAAO;IAAO,GAAG;IAAQ;GAC/D;EACF"}

package/esm/use-counter/use-counter.mjs

@@ -7,14 +7,23 @@ const DEFAULT_OPTIONS = {
 	max: Infinity
 };
 function useCounter(initialValue = 0, options) {
-	const { min, max } = {
+	const { min, max, step: _step = 1 } = {
 		...DEFAULT_OPTIONS,
 		...options
 	};
+	const step = Math.abs(_step);
 	const [count, setCount] = useState(clamp(initialValue, min, max));
 	return [count, {
-		increment: useCallback(() => setCount((current) => clamp(current + 1, min, max)), [min, max]),
-		decrement: useCallback(() => setCount((current) => clamp(current - 1, min, max)), [min, max]),
+		increment: useCallback(() => setCount((current) => clamp(current + step, min, max)), [
+			min,
+			max,
+			step
+		]),
+		decrement: useCallback(() => setCount((current) => clamp(current - step, min, max)), [
+			min,
+			max,
+			step
+		]),
 		set: useCallback((value) => setCount(clamp(value, min, max)), [min, max]),
 		reset: useCallback(() => setCount(clamp(initialValue, min, max)), [
 			initialValue,

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

@@ -1 +1 @@
-{"version":3,"file":"use-counter.mjs","names":[],"sources":["../../src/use-counter/use-counter.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { clamp } from '../utils';\n\nconst DEFAULT_OPTIONS = {\n  min: -Infinity,\n  max: Infinity,\n};\n\nexport interface UseCounterOptions {\n  min?: number;\n  max?: number;\n}\n\nexport interface UseCounterHandlers {\n  increment: () => void;\n  decrement: () => void;\n  set: (value: number) => void;\n  reset: () => void;\n}\n\nexport type UseCounterReturnValue = [number, UseCounterHandlers];\n\nexport function useCounter(initialValue = 0, options?: UseCounterOptions): UseCounterReturnValue {\n  const { min, max } = { ...DEFAULT_OPTIONS, ...options };\n  const [count, setCount] = useState<number>(clamp(initialValue, min, max));\n\n  const increment = useCallback(\n    () => setCount((current) => clamp(current + 1, min, max)),\n    [min, max]\n  );\n\n  const decrement = useCallback(\n    () => setCount((current) => clamp(current - 1, min, max)),\n    [min, max]\n  );\n\n  const set = useCallback((value: number) => setCount(clamp(value, min, max)), [min, max]);\n\n  const reset = useCallback(\n    () => setCount(clamp(initialValue, min, max)),\n    [initialValue, min, max]\n  );\n\n  return [count, { increment, decrement, set, reset }];\n}\n\nexport namespace useCounter {\n  export type Options = UseCounterOptions;\n  export type Handlers = UseCounterHandlers;\n  export type ReturnValue = UseCounterReturnValue;\n}\n"],"mappings":";;;;AAGA,MAAM,kBAAkB;CACtB,KAAK;CACL,KAAK;CACN;AAgBD,SAAgB,WAAW,eAAe,GAAG,SAAoD;CAC/F,MAAM,EAAE,KAAK,QAAQ;EAAE,GAAG;EAAiB,GAAG;EAAS;CACvD,MAAM,CAAC,OAAO,YAAY,SAAiB,MAAM,cAAc,KAAK,IAAI,CAAC;AAmBzE,QAAO,CAAC,OAAO;EAAE,WAjBC,kBACV,UAAU,YAAY,MAAM,UAAU,GAAG,KAAK,IAAI,CAAC,EACzD,CAAC,KAAK,IAAI,CACX;EAc2B,WAZV,kBACV,UAAU,YAAY,MAAM,UAAU,GAAG,KAAK,IAAI,CAAC,EACzD,CAAC,KAAK,IAAI,CACX;EASsC,KAP3B,aAAa,UAAkB,SAAS,MAAM,OAAO,KAAK,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;EAO5C,OAL9B,kBACN,SAAS,MAAM,cAAc,KAAK,IAAI,CAAC,EAC7C;GAAC;GAAc;GAAK;GAAI,CACzB;EAEkD,CAAC"}
+{"version":3,"file":"use-counter.mjs","names":[],"sources":["../../src/use-counter/use-counter.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { clamp } from '../utils';\n\nconst DEFAULT_OPTIONS = {\n  min: -Infinity,\n  max: Infinity,\n};\n\nexport interface UseCounterOptions {\n  min?: number;\n  max?: number;\n  step?: number;\n}\n\nexport interface UseCounterHandlers {\n  increment: () => void;\n  decrement: () => void;\n  set: (value: number) => void;\n  reset: () => void;\n}\n\nexport type UseCounterReturnValue = [number, UseCounterHandlers];\n\nexport function useCounter(initialValue = 0, options?: UseCounterOptions): UseCounterReturnValue {\n  const { min, max, step: _step = 1 } = { ...DEFAULT_OPTIONS, ...options };\n  const step = Math.abs(_step);\n  const [count, setCount] = useState<number>(clamp(initialValue, min, max));\n\n  const increment = useCallback(\n    () => setCount((current) => clamp(current + step, min, max)),\n    [min, max, step]\n  );\n\n  const decrement = useCallback(\n    () => setCount((current) => clamp(current - step, min, max)),\n    [min, max, step]\n  );\n\n  const set = useCallback((value: number) => setCount(clamp(value, min, max)), [min, max]);\n\n  const reset = useCallback(\n    () => setCount(clamp(initialValue, min, max)),\n    [initialValue, min, max]\n  );\n\n  return [count, { increment, decrement, set, reset }];\n}\n\nexport namespace useCounter {\n  export type Options = UseCounterOptions;\n  export type Handlers = UseCounterHandlers;\n  export type ReturnValue = UseCounterReturnValue;\n}\n"],"mappings":";;;;AAGA,MAAM,kBAAkB;CACtB,KAAK;CACL,KAAK;CACN;AAiBD,SAAgB,WAAW,eAAe,GAAG,SAAoD;CAC/F,MAAM,EAAE,KAAK,KAAK,MAAM,QAAQ,MAAM;EAAE,GAAG;EAAiB,GAAG;EAAS;CACxE,MAAM,OAAO,KAAK,IAAI,MAAM;CAC5B,MAAM,CAAC,OAAO,YAAY,SAAiB,MAAM,cAAc,KAAK,IAAI,CAAC;AAmBzE,QAAO,CAAC,OAAO;EAAE,WAjBC,kBACV,UAAU,YAAY,MAAM,UAAU,MAAM,KAAK,IAAI,CAAC,EAC5D;GAAC;GAAK;GAAK;GAAK,CACjB;EAc2B,WAZV,kBACV,UAAU,YAAY,MAAM,UAAU,MAAM,KAAK,IAAI,CAAC,EAC5D;GAAC;GAAK;GAAK;GAAK,CACjB;EASsC,KAP3B,aAAa,UAAkB,SAAS,MAAM,OAAO,KAAK,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;EAO5C,OAL9B,kBACN,SAAS,MAAM,cAAc,KAAK,IAAI,CAAC,EAC7C;GAAC;GAAc;GAAK;GAAI,CACzB;EAEkD,CAAC"}

package/esm/use-debounced-callback/use-debounced-callback.mjs

@@ -3,22 +3,38 @@ import { useCallbackRef } from "../utils/use-callback-ref/use-callback-ref.mjs";
 import { useEffect, useMemo, useRef } from "react";
 //#region packages/@mantine/hooks/src/use-debounced-callback/use-debounced-callback.ts
 function useDebouncedCallback(callback, options) {
-	const { delay, flushOnUnmount, leading } = typeof options === "number" ? {
+	const { delay, flushOnUnmount, leading, maxWait } = typeof options === "number" ? {
 		delay: options,
 		flushOnUnmount: false,
-		leading: false
+		leading: false,
+		maxWait: void 0
 	} : options;
 	const handleCallback = useCallbackRef(callback);
 	const debounceTimerRef = useRef(0);
+	const maxWaitTimerRef = useRef(0);
+	const latestArgsRef = useRef(null);
 	const lastCallback = useMemo(() => {
 		const currentCallback = Object.assign((...args) => {
 			window.clearTimeout(debounceTimerRef.current);
+			latestArgsRef.current = args;
 			const isFirstCall = currentCallback._isFirstCall;
 			currentCallback._isFirstCall = false;
 			function clearTimeoutAndLeadingRef() {
 				window.clearTimeout(debounceTimerRef.current);
+				window.clearTimeout(maxWaitTimerRef.current);
 				debounceTimerRef.current = 0;
+				maxWaitTimerRef.current = 0;
 				currentCallback._isFirstCall = true;
+				currentCallback._hasPendingCallback = false;
+			}
+			function startMaxWaitTimer() {
+				if (maxWait !== void 0 && maxWaitTimerRef.current === 0) maxWaitTimerRef.current = window.setTimeout(() => {
+					if (debounceTimerRef.current !== 0) {
+						const latestArgs = latestArgsRef.current;
+						clearTimeoutAndLeadingRef();
+						handleCallback(...latestArgs);
+					}
+				}, maxWait);
 			}
 			if (leading && isFirstCall) {
 				handleCallback(...args);
@@ -37,9 +53,11 @@ function useDebouncedCallback(callback, options) {
 				currentCallback.flush = flush;
 				currentCallback.cancel = cancel;
 				debounceTimerRef.current = window.setTimeout(resetLeadingState, delay);
+				startMaxWaitTimer();
 				return;
 			}
 			if (leading && !isFirstCall) {
+				currentCallback._hasPendingCallback = true;
 				const flush = () => {
 					if (debounceTimerRef.current !== 0) {
 						clearTimeoutAndLeadingRef();
@@ -55,8 +73,10 @@ function useDebouncedCallback(callback, options) {
 					clearTimeoutAndLeadingRef();
 				};
 				debounceTimerRef.current = window.setTimeout(resetLeadingState, delay);
+				startMaxWaitTimer();
 				return;
 			}
+			currentCallback._hasPendingCallback = true;
 			const flush = () => {
 				if (debounceTimerRef.current !== 0) {
 					clearTimeoutAndLeadingRef();
@@ -69,16 +89,20 @@ function useDebouncedCallback(callback, options) {
 			currentCallback.flush = flush;
 			currentCallback.cancel = cancel;
 			debounceTimerRef.current = window.setTimeout(flush, delay);
+			startMaxWaitTimer();
 		}, {
 			flush: () => {},
 			cancel: () => {},
-			_isFirstCall: true
+			isPending: () => currentCallback._hasPendingCallback,
+			_isFirstCall: true,
+			_hasPendingCallback: false
 		});
 		return currentCallback;
 	}, [
 		handleCallback,
 		delay,
-		leading
+		leading,
+		maxWait
 	]);
 	useEffect(() => () => {
 		if (flushOnUnmount) lastCallback.flush();