@contember/react-utils 1.2.0-rc.8 → 1.2.0

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)
 }