@contember/react-utils 1.2.0 → 1.2.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/react-utils",
   "license": "Apache-2.0",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -25,13 +25,14 @@
     "build:js:dev": "NODE_ENV=development vite build --mode development",
     "build:js:prod": "vite build --mode production",
     "ae:build": "api-extractor run --local",
-    "ae:test": "api-extractor run"
+    "ae:test": "api-extractor run",
+    "test": "vitest --environment jsdom"
   },
   "peerDependencies": {
     "react": "^17 || ^18"
   },
   "dependencies": {
-    "@contember/utilities": "1.2.0",
+    "@contember/utilities": "1.2.2",
     "fast-deep-equal": "^3.1.3"
   }
 }

package/src/hooks/index.ts

@@ -3,6 +3,7 @@ export * from './useAbortController'
 export * from './useAddClassNameDuringResize'
 export * from './useArrayMapMemo'
 export * from './useAutoHeightTextArea'
+export * from './useChildrenAsLabel'
 export * from './useComposeRef'
 export * from './useConstantLengthInvariant'
 export * from './useConstantValueInvariant'

package/src/hooks/useAddClassNameDuringResize.ts

@@ -2,17 +2,12 @@ import { useLayoutEffect, useRef } from 'react'
 import { useReferentiallyStableCallback } from '../referentiallyStable'
 import { useOnWindowResize } from './useOnWindowResize'
 
-function intendedFlushOfCSSChangesToCauseImmediateReflow(element: HTMLElement) {
-	element.offsetHeight
-}
-
 function addClassName(
 	className: string,
 	element: HTMLElement,
 ) {
 	if (element.classList.contains(className)) {
 		element.classList.remove(className)
-		intendedFlushOfCSSChangesToCauseImmediateReflow(element)
 	}
 }
 
@@ -22,7 +17,6 @@ function removeClassName(
 ) {
 	if (!element.classList.contains(className)) {
 		element.classList.add(className)
-		intendedFlushOfCSSChangesToCauseImmediateReflow(element)
 	}
 }
 

package/src/hooks/useAutoHeightTextArea.ts

@@ -9,7 +9,7 @@ export const useAutoHeightTextArea = (
 	minRows: number,
 	maxRows: number,
 ) => {
-	const measure = useCallback((ref: HTMLTextAreaElement | null, minRows: number, maxRows: number, value: string) => {
+	const measure = useCallback(async (ref: HTMLTextAreaElement | null, minRows: number, maxRows: number) => {
 		if (ref) {
 			const rowsAttribute = ref.rows
 
@@ -23,13 +23,13 @@ export const useAutoHeightTextArea = (
 				let maxHeight: number
 
 				ref.rows = minRows
-				minHeight = ref.offsetHeight
+				minHeight = await ref.getBoundingClientRect().height
 
 				if (maxRows === Infinity) {
 					maxHeight = Infinity
 				} else {
 					ref.rows = maxRows
-					maxHeight = ref.offsetHeight
+					maxHeight = await ref.getBoundingClientRect().height
 				}
 
 				ref.style.height = px(height)
@@ -42,10 +42,10 @@ export const useAutoHeightTextArea = (
 	}, [])
 
 	useOnElementResize(textAreaRef, () => {
-		measure(unwrapRefValue(textAreaRef), minRows, maxRows, value)
+		measure(unwrapRefValue(textAreaRef), minRows, maxRows)
 	})
 
 	useLayoutEffect(() => {
-		measure(unwrapRefValue(textAreaRef), minRows, maxRows, value)
+		measure(unwrapRefValue(textAreaRef), minRows, maxRows)
 	}, [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/useElementSize.ts

@@ -1,15 +1,13 @@
-import { getSizeFromResizeObserverEntryFactory } from '@contember/utilities'
-import { useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { getElementDimensionsCallback, getSizeFromResizeObserverEntryFactory } from '@contember/utilities'
+import { useLayoutEffect, useMemo, useState } from 'react'
 import { useScopedConsoleRef } from '../debug-context'
+import { useReferentiallyStableCallback } from '../referentiallyStable'
 import { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'
 import { useOnElementResize } from './useOnElementResize'
 
-function getElementWidth(element: HTMLElement) {
-	return element.offsetWidth
-}
-
-function getElementHeight(element: HTMLElement) {
-	return element.offsetHeight
+export type ElementSize = {
+	height: number
+	width: number
 }
 
 /**
@@ -28,45 +26,30 @@ export function useElementSize(
 	const { box = 'border-box' } = options
 	const getSizeFromResizeObserverEntry = useMemo(() => getSizeFromResizeObserverEntryFactory(box), [box])
 
-	const refValue = unwrapRefValue(refOrElement)
-	const [width, setWidth] = useState<number | undefined>(refValue?.offsetWidth)
-	const [height, setHeight] = useState<number | undefined>(refValue?.offsetHeight)
+	const [width, setWidth] = useState<number | undefined>()
+	const [height, setHeight] = useState<number | undefined>()
 
 	logged('dimensions', { width, height })
 
-	useOnElementResize(refOrElement, entry => {
-		const dimensions = logged('useOnElementResize => entry:dimensions', getSizeFromResizeObserverEntry(entry))
-
+	const maybeSetNewDimensions = useReferentiallyStableCallback((dimensions: ElementSize) => {
 		if (width !== dimensions.width) {
 			setWidth(dimensions.width)
 		}
 		if (height !== dimensions.height) {
 			setHeight(dimensions.height)
 		}
-	}, { box }, timeout)
-
-	// INTENTIONAL AVOID OF ESLint ERROR: We need measure on every Layout side-effect
-	// otherwise the browser will paint and cause layout shifts.
-	//
-	// React Hook useLayoutEffect contains a call to 'setWidth'. Without a list of dependencies,
-	// this can lead to an infinite chain of updates. To fix this, pass [element] as a second argument
-	// to the useLayoutEffect Hook.
-	//
-	// Seems like only pure function lets us measure before the browser has a chance to paint
-	const measure = useRef((element: HTMLElement | null) => {
-		logged('measure(element)', element)
-
-		if (element instanceof HTMLElement) {
-			setWidth(logged('getElementWidth(element):', getElementWidth(element)))
-			setHeight(logged('getElementHeight(element):', getElementHeight(element)))
-		} else if (element) {
-			throw new Error('Exhaustive error: Expecting element to be instance of HTMLElement or Window')
-		}
 	})
 
+	useOnElementResize(refOrElement, entry => {
+		const dimensions = logged('useOnElementResize => entry:dimensions', getSizeFromResizeObserverEntry(entry))
+		maybeSetNewDimensions(dimensions)
+	}, { box }, timeout)
+
 	useLayoutEffect(() => {
 		const element = unwrapRefValue(refOrElement)
-		logged('useLayoutEffect => measure', measure.current(element))
+		if (element) {
+			getElementDimensionsCallback(element, dimensions => maybeSetNewDimensions(dimensions))
+		}
 	})
 
 	return { height, width }

package/src/hooks/useOnElementResize.ts

@@ -16,40 +16,37 @@ export function useOnElementResize(
 
 	useLayoutEffect(() => {
 		const element = unwrapRefValue(refOrElement)
+		if (!element) {
+			return
+		}
+		if (!(element instanceof HTMLElement)) {
+			throw new Error('Exhaustive error: Expecting element to be instance of HTMLElement')
+		}
+
+		let timeoutID: number | undefined = undefined
+
+		function debouncedOnChange([entry]: ResizeObserverEntry[]) {
+			const timeStamp = Date.now()
+			const delta = timeStamp - lastTimeStamp.current
+
+			clearTimeout(timeoutID)
+			const timeoutFinal = delta > timeout ? 0 : timeout
+
+			timeoutID = setTimeout(() => {
+				const message = timeoutFinal > 0 ? 'element.resize:debounced' : 'element.resize:immediate'
+				scopedConsoleRef.current.warned(message, null)
+				callbackRef.current(entry)
+				lastTimeStamp.current = timeStamp
+			}, timeoutFinal)
+		}
+
+		const resizeObserver = new ResizeObserver(debouncedOnChange)
+
+		resizeObserver.observe(element, { box })
 
-		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 {
-				throw new Error('Exhaustive error: Expecting element to be instance of HTMLElement')
-			}
+		return () => {
+			clearTimeout(timeoutID)
+			resizeObserver.unobserve(element)
 		}
 	}, [box, refOrElement, scopedConsoleRef, timeout])
 }

package/src/hooks/useScrollOffsets.ts

@@ -1,4 +1,4 @@
-import { assert } from '@contember/utilities'
+import { assert, getElementDimensions } from '@contember/utilities'
 import { useLayoutEffect, useMemo, useState } from 'react'
 import { useScopedConsoleRef } from '../debug-context'
 import { useReferentiallyStableCallback } from '../referentiallyStable'
@@ -37,9 +37,7 @@ export function useScrollOffsets(refOrElement: RefObjectOrElement<HTMLElement |
 		const maybeScrollContent = unwrapRefValue(refOrElement) ?? document
 
 		if (maybeScrollContent) {
-			updateScrollOffsetsState(
-				getElementScrollOffsets(maybeScrollContent),
-			)
+			getElementScrollOffsets(maybeScrollContent).then(updateScrollOffsetsState)
 		}
 	})
 
@@ -69,14 +67,15 @@ function getIntrinsicScrollContainer(element: HTMLElement | Document): HTMLEleme
 	}
 }
 
-function getElementScrollOffsets(element: HTMLElement | Document): Offsets {
+async function getElementScrollOffsets(element: HTMLElement | Document): Promise<Offsets> {
 	const isIntrinsicScrolling = isIntrinsicScrollElement(element)
 	const scrollContainer = getIntrinsicScrollContainer(element)
 
 	const { scrollLeft, scrollTop, scrollHeight, scrollWidth } = scrollContainer
+	const { height: scrollContainerHeight, width: scrollContainerWidth } = await getElementDimensions(scrollContainer)
 
-	const height = isIntrinsicScrolling ? window.innerHeight : scrollContainer.offsetHeight
-	const width = isIntrinsicScrolling ? window.innerWidth : scrollContainer.offsetWidth
+	const height = isIntrinsicScrolling ? window.innerHeight : scrollContainerHeight
+	const width = isIntrinsicScrolling ? window.innerWidth : scrollContainerWidth
 
 	const left = Math.round(scrollLeft)
 	const top = Math.round(scrollTop)