@contember/react-utils 1.2.0-rc.16 → 1.2.0-rc.17

package/src/hooks/useAutoHeightTextArea.ts

@@ -0,0 +1,51 @@
+import { px } from '@contember/utilities'
+import { useCallback, useLayoutEffect } from 'react'
+import { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'
+import { useOnElementResize } from './useOnElementResize'
+
+export const useAutoHeightTextArea = (
+	textAreaRef: RefObjectOrElement<HTMLTextAreaElement>,
+	value: string,
+	minRows: number,
+	maxRows: number,
+) => {
+	const measure = useCallback((ref: HTMLTextAreaElement | null, minRows: number, maxRows: number, value: string) => {
+		if (ref) {
+			const rowsAttribute = ref.rows
+
+			ref.style.height = ''
+			ref.style.minHeight = ''
+			ref.style.maxHeight = ''
+
+			if (minRows !== maxRows) {
+				const height = ref.scrollHeight
+				let minHeight: number
+				let maxHeight: number
+
+				ref.rows = minRows
+				minHeight = ref.offsetHeight
+
+				if (maxRows === Infinity) {
+					maxHeight = Infinity
+				} else {
+					ref.rows = maxRows
+					maxHeight = ref.offsetHeight
+				}
+
+				ref.style.height = px(height)
+				ref.style.minHeight = px(minHeight)
+				ref.style.maxHeight = px(maxHeight)
+			}
+
+			ref.rows = rowsAttribute
+		}
+	}, [])
+
+	useOnElementResize(textAreaRef, () => {
+		measure(unwrapRefValue(textAreaRef), minRows, maxRows, value)
+	})
+
+	useLayoutEffect(() => {
+		measure(unwrapRefValue(textAreaRef), minRows, maxRows, value)
+	}, [maxRows, measure, minRows, textAreaRef, value])
+}

package/src/hooks/useOnElementClickOutsideCallback.ts

@@ -0,0 +1,23 @@
+import { useEffect } from 'react'
+import { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'
+
+export function useOnElementClickOutsideCallback(
+	refOrElement: RefObjectOrElement<HTMLElement>,
+	callback: (event: MouseEvent) => void,
+): void {
+	useEffect(() => {
+		const refValue = unwrapRefValue(refOrElement)
+
+		const handleClickOutside = (event: MouseEvent) => {
+			if (refValue && !refValue.contains(event.target as Node)) {
+				callback(event)
+			}
+		}
+
+		document.addEventListener('mousedown', handleClickOutside)
+
+		return () => {
+			document.removeEventListener('mousedown', handleClickOutside)
+		}
+	}, [callback, refOrElement])
+}

package/src/hooks/useOnElementMouseEnterDelayedCallback.ts

@@ -0,0 +1,54 @@
+import { useEffect } from 'react'
+import { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'
+
+/**
+ * Calls the callback when the mouse enters the element, but only after a timeout, e.g. for tooltips or dropdown menus.
+ *
+ * Calls the callback immediately if the mouse is pressed down with `event.type` of `mousedown`. This is useful for
+ * dropdown menus, where the user may click on the menu item before the callback is called resulting in the menu
+ * opening and closing immediately.
+ *
+ * @param refOrElement - The element or ref to the element to attach the event listener to.
+ * @param callback - The callback to call when the mouse enters the element.
+ * @param timeoutMs - The timeout in milliseconds to wait before calling the callback.
+ */
+export function useOnElementMouseEnterDelayedCallback(
+	refOrElement: RefObjectOrElement<HTMLElement>,
+	callback: (event: MouseEvent) => void,
+	timeoutMs: number = 300,
+): void {
+	useEffect(() => {
+		const refValue = unwrapRefValue(refOrElement)
+
+		if (refValue) {
+			let timeoutID: ReturnType<typeof setTimeout> | undefined = undefined
+
+			function handleMouseEnter(event: MouseEvent) {
+				clearTimeout(timeoutID)
+
+				timeoutID = setTimeout(() => {
+					callback(event)
+				}, timeoutMs)
+			}
+
+			function handleMouseLeave() {
+				clearTimeout(timeoutID)
+			}
+
+			function handleMouseDown(event: MouseEvent) {
+				clearTimeout(timeoutID)
+				callback(event)
+			}
+
+			refValue.addEventListener('mouseenter', handleMouseEnter)
+			refValue.addEventListener('mouseleave', handleMouseLeave)
+			refValue.addEventListener('mousedown', handleMouseDown)
+
+			return () => {
+				refValue.removeEventListener('mouseover', handleMouseEnter)
+				refValue.removeEventListener('mouseleave', handleMouseLeave)
+				refValue.removeEventListener('mousedown', handleMouseDown)
+			}
+		}
+	}, [callback, refOrElement, timeoutMs])
+}

package/src/hooks/useOnElementResize.ts

@@ -11,42 +11,45 @@ export function useOnElementResize(
 	const scopedConsoleRef = useScopedConsoleRef('useOnElementResize')
 
 	const { box = 'border-box' } = options
-	const element = unwrapRefValue(refOrElement)
 	const callbackRef = useRef(callback); callbackRef.current = callback
 	const lastTimeStamp = useRef<number>(0)
 
 	useLayoutEffect(() => {
-		let timeoutID: number | undefined = undefined
-
-		function debouncedOnChange([entry]: ResizeObserverEntry[]) {
-			const timeStamp = Date.now()
-			const delta = timeStamp - lastTimeStamp.current
-
-			if (delta > timeout) {
-				scopedConsoleRef.current.warned('element.resize:immediate', null)
-				callbackRef.current(entry)
-				lastTimeStamp.current = timeStamp
+		const element = unwrapRefValue(refOrElement)
+
+		if (element) {
+			if (element instanceof HTMLElement) {
+				let timeoutID: number | undefined = undefined
+
+				function debouncedOnChange([entry]: ResizeObserverEntry[]) {
+					const timeStamp = Date.now()
+					const delta = timeStamp - lastTimeStamp.current
+
+					if (delta > timeout) {
+						scopedConsoleRef.current.warned('element.resize:immediate', null)
+						callbackRef.current(entry)
+						lastTimeStamp.current = timeStamp
+					} else {
+						clearTimeout(timeoutID)
+						timeoutID = setTimeout(() => {
+							scopedConsoleRef.current.warned('element.resize:debounced', null)
+							callbackRef.current(entry)
+							lastTimeStamp.current = timeStamp
+						}, timeout)
+					}
+				}
+
+				const resizeObserver = new ResizeObserver(debouncedOnChange)
+
+				resizeObserver.observe(element, { box })
+
+				return () => {
+					clearTimeout(timeoutID)
+					resizeObserver.unobserve(element)
+				}
 			} else {
-				clearTimeout(timeoutID)
-				timeoutID = setTimeout(() => {
-					scopedConsoleRef.current.warned('element.resize:debounced', null)
-					callbackRef.current(entry)
-					lastTimeStamp.current = timeStamp
-				}, timeout)
-			}
-		}
-
-		if (element instanceof HTMLElement) {
-			const resizeObserver = new ResizeObserver(debouncedOnChange)
-
-			resizeObserver.observe(element, { box })
-
-			return () => {
-				clearTimeout(timeoutID)
-				resizeObserver.unobserve(element)
+				throw new Error('Exhaustive error: Expecting element to be instance of HTMLElement')
 			}
-		} else if (element) {
-			throw new Error('Exhaustive error: Expecting element to be instance of HTMLElement')
 		}
-	}, [box, element, scopedConsoleRef, timeout])
+	}, [box, refOrElement, scopedConsoleRef, timeout])
 }

package/src/hooks/useOnScrollWithin.ts

@@ -19,49 +19,50 @@ export function useOnScrollWithin(
 	const callbackRef = useRef(callback); callbackRef.current = callback
 	const lastTimeStamp = useRef<number>(0)
 
-	const element = unwrapRefValue(refOrElement)
-
 	useLayoutEffect(() => {
+		const element = unwrapRefValue(refOrElement)
+
 		let timeoutID: number | undefined = undefined
 
-		function debouncedHandler(event: Event) {
-			clearTimeout(timeoutID)
+		if (element) {
+			function debouncedHandler(event: Event) {
+				clearTimeout(timeoutID)
 
-			const delta = event.timeStamp - lastTimeStamp.current
-			scopedConsoleRef.current.logged('event:element.scroll:delta', delta)
+				const delta = event.timeStamp - lastTimeStamp.current
+				scopedConsoleRef.current.logged('event:element.scroll:delta', delta)
 
-			if (delta > interval) {
-				scopedConsoleRef.current.warned('event:element.scroll:immediately', event)
-				callbackRef.current(event)
-				lastTimeStamp.current = event.timeStamp
-			} else {
-				timeoutID = setTimeout(() => {
-					scopedConsoleRef.current.warned('event:element.scroll:debounced', event)
-					lastTimeStamp.current = event.timeStamp
+				if (delta > interval) {
+					scopedConsoleRef.current.warned('event:element.scroll:immediately', event)
 					callbackRef.current(event)
-				}, interval)
+					lastTimeStamp.current = event.timeStamp
+				} else {
+					timeoutID = setTimeout(() => {
+						scopedConsoleRef.current.warned('event:element.scroll:debounced', event)
+						lastTimeStamp.current = event.timeStamp
+						callbackRef.current(event)
+					}, interval)
+				}
 			}
-		}
 
-		if (element && element instanceof HTMLElement) {
-			if (element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {
-				window.addEventListener('scroll', debouncedHandler, { capture: true, passive: true })
-				window.addEventListener('resize', debouncedHandler)
+			if (element instanceof HTMLElement) {
+				if (element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {
+					window.addEventListener('scroll', debouncedHandler, { capture: true, passive: true })
+					window.addEventListener('resize', debouncedHandler)
 
-				return () => {
-					window.removeEventListener('scroll', debouncedHandler)
-					window.removeEventListener('resize', debouncedHandler)
-				}
-			} else {
-				element.addEventListener('scroll', debouncedHandler, { passive: true, capture: true })
+					return () => {
+						window.removeEventListener('scroll', debouncedHandler)
+						window.removeEventListener('resize', debouncedHandler)
+					}
+				} else {
+					element.addEventListener('scroll', debouncedHandler, { passive: true, capture: true })
 
-				return () => {
-					element.removeEventListener('scroll', debouncedHandler)
+					return () => {
+						element.removeEventListener('scroll', debouncedHandler)
+					}
 				}
 			}
-		} else if (element) {
+		} else {
 			throw new Error('Exhaustive error: Expecting element to be instance of HTMLElement')
 		}
-
-	}, [element, interval, scopedConsoleRef])
+	}, [interval, refOrElement, scopedConsoleRef])
 }