feat(useResizeObserver): observe a chosen box model

src/useMeasure/index.dom.test.ts

@@ -146,4 +146,19 @@ describe('useMeasure', () => {
 		const value = expectResultValue(result);
 		expect(value[0]).toStrictEqual({width: 9, height: 7});
 	});
+
+	it('should observe the requested box model', async () => {
+		const div = document.createElement('div');
+		await renderHook(() => {
+			const measure = useMeasure<HTMLDivElement>(true, borderBoxMeasurer, 'border-box');
+
+			useEffect(() => {
+				measure[1].current = div;
+			});
+
+			return measure;
+		});
+
+		expect(observeSpy).toHaveBeenCalledWith(div, {box: 'border-box'});
+	});
 });

src/useMeasure/index.ts

@@ -41,10 +41,14 @@ export const borderBoxMeasurer: Measurer = (entry) => {
  *
  * @param enabled Whether resize observer is enabled or not.
  * @param measurer Derives measures from the observer entry, `contentBoxMeasurer` by default.
+ * @param box Box model whose changes trigger a re-measurement. Pair it with the measurer:
+ * `borderBoxMeasurer` under the default `content-box` observation misses padding and border
+ * changes that leave the content box intact.
  */
 export function useMeasure<T extends Element>(
 	enabled = true,
 	measurer: Measurer = contentBoxMeasurer,
+	box: ResizeObserverBoxOptions = 'content-box',
 ): [Measures | undefined, RefObject<T | null>] {
 	const [element, setElement] = useState<T | null>(null);
 	const elementRef = useHookableRef<T | null>(null, (v) => {
@@ -58,7 +62,7 @@ export function useMeasure<T extends Element>(
 		setMeasures(measurer(entry));
 	});
 
-	useResizeObserver(element, observerHandler, enabled);
+	useResizeObserver(element, observerHandler, enabled, box);
 
 	return [measures, elementRef];
 }

src/useResizeObserver/index.dom.test.ts

@@ -183,7 +183,7 @@ describe('useResizeObserver', () => {
 		});
 
 		expect(observeSpy).toHaveBeenCalledTimes(1);
-		expect(observeSpy).toHaveBeenCalledWith(div);
+		expect(observeSpy).toHaveBeenCalledWith(div, {box: 'content-box'});
 		expect(unobserveSpy).toHaveBeenCalledTimes(0);
 
 		await unmount();
@@ -193,6 +193,29 @@ describe('useResizeObserver', () => {
 		expect(unobserveSpy).toHaveBeenCalledWith(div);
 	});
 
+	it('should observe the requested box model', async () => {
+		const div = document.createElement('div');
+		await renderHook(() => {
+			useResizeObserver(div, vi.fn(), true, 'border-box');
+		});
+
+		expect(observeSpy).toHaveBeenCalledWith(div, {box: 'border-box'});
+	});
+
+	it('should keep a separate observer per box model', async () => {
+		const div = document.createElement('div');
+		const observersBefore = ResizeObserverSpy.mock.calls.length;
+
+		await renderHook(() => {
+			useResizeObserver(div, vi.fn(), true, 'device-pixel-content-box');
+		});
+
+		// A ResizeObserver only reports changes of the box it observes, so the
+		// singleton for a box model cannot be reused for another one.
+		expect(ResizeObserverSpy.mock.calls.length).toBe(observersBefore + 1);
+		expect(observeSpy).toHaveBeenCalledWith(div, {box: 'device-pixel-content-box'});
+	});
+
 	describe('disabled observer', () => {
 		it('should not subscribe in case observer is disabled', async () => {
 			const div = document.createElement('div');

src/useResizeObserver/index.ts

@@ -11,13 +11,17 @@ type ResizeObserverSingleton = {
 	unsubscribe: (target: Element, callback: UseResizeObserverCallback) => void;
 };
 
-let observerSingleton: ResizeObserverSingleton | undefined;
+// One observer per box model: a ResizeObserver only notifies on changes of the
+// box it was asked to observe, so boxes cannot share an instance.
+const observerSingletons = new Map<ResizeObserverBoxOptions, ResizeObserverSingleton>();
 
-function getResizeObserver(): ResizeObserverSingleton | undefined {
+function getResizeObserver(box: ResizeObserverBoxOptions): ResizeObserverSingleton | undefined {
 	if (!isBrowser) {
 		return undefined;
 	}
 
+	const observerSingleton = observerSingletons.get(box);
+
 	if (observerSingleton) {
 		return observerSingleton;
 	}
@@ -39,7 +43,7 @@ function getResizeObserver(): ResizeObserverSingleton | undefined {
 		}
 	});
 
-	observerSingleton = {
+	const singleton: ResizeObserverSingleton = {
 		observer,
 		subscribe(target, callback) {
 			let cbs = callbacks.get(target);
@@ -48,7 +52,7 @@ function getResizeObserver(): ResizeObserverSingleton | undefined {
 				// If target has no observers yet - register it
 				cbs = new Set<UseResizeObserverCallback>();
 				callbacks.set(target, cbs);
-				observer.observe(target);
+				observer.observe(target, {box});
 			}
 
 			// As Set is duplicate-safe - simply add callback on each call
@@ -73,7 +77,9 @@ function getResizeObserver(): ResizeObserverSingleton | undefined {
 		},
 	};
 
-	return observerSingleton;
+	observerSingletons.set(box, singleton);
+
+	return singleton;
 }
 
 /**
@@ -82,13 +88,16 @@ function getResizeObserver(): ResizeObserverSingleton | undefined {
  * @param target React reference or Element to track.
  * @param callback Callback that will be invoked on resize.
  * @param enabled Whether resize observer is enabled or not.
+ * @param box Box model whose changes trigger the callback. A `content-box` observer stays silent
+ * when padding or border grow around an unchanged content box, and vice versa.
  */
 export function useResizeObserver<T extends Element>(
 	target: RefObject<T | null> | T | null,
 	callback: UseResizeObserverCallback,
 	enabled = true,
+	box: ResizeObserverBoxOptions = 'content-box',
 ): void {
-	const ro = enabled && getResizeObserver();
+	const ro = enabled && getResizeObserver(box);
 	const cb = useSyncedRef(callback);
 
 	const tgt = target && 'current' in target ? target.current : target;