@contember/react-utils 1.2.0-rc.9 → 1.2.1

package/src/hooks/index.ts

@@ -2,6 +2,8 @@ export * from './unwrapRefValue'
 export * from './useAbortController'
 export * from './useAddClassNameDuringResize'
 export * from './useArrayMapMemo'
+export * from './useAutoHeightTextArea'
+export * from './useChildrenAsLabel'
 export * from './useComposeRef'
 export * from './useConstantLengthInvariant'
 export * from './useConstantValueInvariant'
@@ -10,14 +12,18 @@ export * from './useDebounce'
 export * from './useDebounceCallback'
 export * from './useDocumentTitle'
 export * from './useElementSize'
+export * from './useElementTopOffset'
 export * from './useEventHandler'
 export * from './useExpectSameValueReference'
 export * from './useForceRender'
 export * from './useId'
 export * from './useIsMounted'
 export * from './useObjectMemo'
+export * from './useOnElementClickOutsideCallback'
+export * from './useOnElementMouseEnterDelayedCallback'
 export * from './useOnElementMutation'
 export * from './useOnElementResize'
+export * from './useOnScrollWithin'
 export * from './useOnWindowResize'
 export * from './usePreviousValue'
 export * from './useScrollOffsets'

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/useChildrenAsLabel.ts

@@ -0,0 +1,72 @@
+import { Children, ReactNode, useMemo } from 'react'
+
+const MULTIPLE_SPACES_REG_EXP = / +/g
+
+function normalize(text: string): string {
+	return text.replace(MULTIPLE_SPACES_REG_EXP, ' ').trim()
+}
+
+/**
+ * Walks through the children and returns a string representation of the text content.
+ *
+ * @param node - The children to walk through.
+ * @returns String representation of the text content or undefined if there is no text content.
+ *
+ */
+export function getChildrenAsLabel(node: ReactNode): string | undefined {
+	if (typeof node === 'string' || typeof node === 'number') {
+		return String(node)
+	} else if (node === null || node === undefined || typeof node === 'boolean') {
+		return undefined
+	} else if (Array.isArray(node)) {
+		return normalize(node.map(getChildrenAsLabel).join(''))
+	} else {
+		let label: (string | number)[] = []
+
+		Children.map(node, child => {
+			if (child === null || child === undefined || typeof child === 'boolean') {
+			} else if (typeof child === 'string') {
+				label.push(child)
+			} else if (typeof child === 'number') {
+				label.push(child)
+			} else if (Array.isArray(child)) {
+				const childLabel = getChildrenAsLabel(child)
+
+				if (childLabel) {
+					label.push(childLabel)
+				}
+			} else {
+				// ReactElement | JSXElementConstructor | ReactPortal
+				if ('props' in child && 'children' in child.props) {
+					const childLabel = getChildrenAsLabel(child.props.children)
+
+					if (childLabel) {
+						label.push(childLabel)
+					}
+				} else if ('children' in child) {
+					// ReactPortal
+					const childLabel = getChildrenAsLabel(child.children)
+
+					if (childLabel) {
+						label.push(childLabel)
+					}
+				} else if (import.meta.env.DEV) {
+					console.warn('Unsupported child:', child)
+				}
+			}
+		})
+
+		return label.length > 0 ? label.join('') : undefined
+	}
+}
+
+/**
+ * Walks through the children and returns a string representation of the text content.
+ *
+ * @param node - The children to walk through.
+ * @returns String representation of the text content or undefined if there is no text content.
+ *
+ */
+export function useChildrenAsLabel(node: ReactNode): string | undefined {
+	return useMemo(() => getChildrenAsLabel(node), [node])
+}

package/src/hooks/useContainerWidth.ts

@@ -2,7 +2,7 @@ import { createContext, useContext } from 'react'
 import { useWindowSize } from './useWindowSize'
 
 export type ContainerWidthContextType = number
-export const ContainerWidthContext = createContext<ContainerWidthContextType | null>(null)
+export const ContainerWidthContext = createContext<ContainerWidthContextType | null | undefined>(undefined)
 ContainerWidthContext.displayName = 'ContainerWidthContext'
 
 export function useContainerWidth(): number {

package/src/hooks/useElementTopOffset.ts

@@ -0,0 +1,35 @@
+import { RefObject, useLayoutEffect, useState } from 'react'
+
+export function useElementTopOffset(ref?: RefObject<HTMLElement>): number | undefined {
+	const [offsetTop, setOffsetTop] = useState<number | undefined>(undefined)
+
+	useLayoutEffect(() => {
+		if (!ref?.current) {
+			return
+		}
+
+		const element = ref.current
+
+		function updateTopOffsetCallback() {
+			setOffsetTop(element.offsetTop)
+		}
+
+		function updateTopOffsetHandler() {
+			requestAnimationFrame(updateTopOffsetCallback)
+		}
+
+		updateTopOffsetHandler()
+
+		const observer = new ResizeObserver(() => {
+			requestAnimationFrame(updateTopOffsetCallback)
+		})
+
+		observer.observe(element)
+
+		return () => {
+			observer.unobserve(element)
+		}
+	}, [ref])
+
+	return offsetTop
+}

package/src/hooks/useExpectSameValueReference.ts

@@ -1,4 +1,4 @@
-import deepEqual from 'deep-equal'
+import deepEqual from 'fast-deep-equal/es6/index.js'
 import { useRef } from 'react'
 
 /**

package/src/hooks/useId.ts

@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react'
 
 const count = { current: 360 }
 
@@ -17,5 +17,5 @@ function nextId() {
  * @returns a unique id
  */
 export function useId() {
-	return useRef(nextId()).current
+	return useMemo(() => nextId(), [])
 }

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/useOnElementMutation.ts

@@ -1,4 +1,4 @@
-import deepEqual from 'deep-equal'
+import deepEqual from 'fast-deep-equal/es6/index.js'
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { useScopedConsoleRef } from '../debug-context'
 import { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'

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 {
+				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')
 		}
-
-	}, [element, interval, scopedConsoleRef])
+	}, [interval, refOrElement, scopedConsoleRef])
 }

package/src/theming/useClassNameFactory.ts

@@ -1,5 +1,6 @@
 import { NestedClassName, deduplicateClassName, flatClassNameList } from '@contember/utilities'
 import { useContext } from 'react'
+import { useReferentiallyStableCallback } from '../referentiallyStable'
 import { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'
 
 /**
@@ -28,7 +29,7 @@ export function useClassNameFactory(
 		componentClassName => `${classNamePrefix}${componentClassName}`,
 	)
 
-	return function componentClassNameFor(
+	function componentClassNameFor(
 		suffix: string | null | undefined = null,
 		additionalClassName: NestedClassName = null,
 	): string {
@@ -44,4 +45,6 @@ export function useClassNameFactory(
 			flatClassNameList(additionalClassName),
 		)).join(' ')
 	}
+
+	return useReferentiallyStableCallback(componentClassNameFor)
 }

package/src/theming/useThemedClassNameFactory.ts

@@ -1,5 +1,6 @@
 import { NestedClassName, colorSchemeClassName, deduplicateClassName, filterThemedClassName, flatClassNameList } from '@contember/utilities'
 import { useContext } from 'react'
+import { useReferentiallyStableCallback } from '../referentiallyStable'
 import { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'
 import { useColorScheme } from './contexts'
 
@@ -17,7 +18,7 @@ export function useThemedClassNameFactory(
 
 	const colorScheme = colorSchemeClassName(useColorScheme())
 
-	return function componentClassNameFor(
+	function componentClassNameFor(
 		suffix: string | null | undefined = null,
 		additionalClassName: NestedClassName = null,
 	): string {
@@ -38,4 +39,6 @@ export function useThemedClassNameFactory(
 			),
 		)).join(' ')
 	}
+
+	return useReferentiallyStableCallback(componentClassNameFor)
 }