[@mantine.hook] feat handle writing-mode in useResizeObserver for accurate box size calculation

packages/@mantine/hooks/src/use-resize-observer/UseResizeObserver.story.tsx

@@ -0,0 +1,66 @@
+import { useResizeObserver } from './use-resize-observer';
+
+export default { title: 'use-resize-observer' };
+
+export function Usage() {
+  const [ref, rect] = useResizeObserver();
+  return (
+    <div>
+      <div
+        ref={ref}
+        style={{
+          border: '1px solid black',
+          width: '80%',
+          maxHeight: '300px',
+          display: 'flex',
+          writingMode: 'vertical-lr',
+        }}
+      >
+        <div
+          style={{
+            borderColor: 'rgba(0, 0, 255, 0.2)',
+            border: '3px solid blue',
+            margin: '10px',
+            flex: 1,
+          }}
+        >
+          1
+        </div>
+        <div
+          style={{
+            borderColor: 'rgba(0, 0, 255, 0.2)',
+            border: '3px solid blue',
+            margin: '10px',
+            flex: 1,
+          }}
+        >
+          2
+        </div>
+        <div
+          style={{
+            borderColor: 'rgba(0, 0, 255, 0.2)',
+            border: '3px solid blue',
+            margin: '10px',
+            flex: 1,
+          }}
+        >
+          3
+        </div>
+        <div
+          style={{
+            borderColor: 'rgba(0, 0, 255, 0.2)',
+            border: '3px solid blue',
+            margin: '10px',
+            flex: 1,
+          }}
+        >
+          4
+        </div>
+      </div>
+      <div style={{ marginTop: '20px' }}>
+        <div>Width: {rect?.width}</div>
+        <div>Height: {rect?.height}</div>
+      </div>
+    </div>
+  );
+}

packages/@mantine/hooks/src/use-resize-observer/use-resize-observer.test.tsx

@@ -0,0 +1,92 @@
+import { renderHook } from '@testing-library/react';
+import { useElementSize, useResizeObserver } from './use-resize-observer';
+
+class MockResizeObserver {
+  observe = jest.fn();
+  disconnect = jest.fn();
+}
+
+let mockObserverInstance: MockResizeObserver;
+
+const originalResizeObserver = global.ResizeObserver;
+const originalRAF = window.requestAnimationFrame;
+const originalCAF = window.cancelAnimationFrame;
+
+describe('@mantine/hooks/use-resize-observer', () => {
+  beforeEach(() => {
+    global.ResizeObserver = jest.fn().mockImplementation(() => {
+      mockObserverInstance = new MockResizeObserver();
+      return mockObserverInstance;
+    }) as any;
+
+    window.requestAnimationFrame = (callback) => window.setTimeout(callback, 0) as any;
+    window.cancelAnimationFrame = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterAll(() => {
+    global.ResizeObserver = originalResizeObserver;
+    window.requestAnimationFrame = originalRAF;
+    window.cancelAnimationFrame = originalCAF;
+  });
+
+  it('returns reference and default dimensions', () => {
+    const { result } = renderHook(() => useResizeObserver());
+    const [ref, rect] = result.current;
+
+    expect(ref.current).toBe(null);
+    expect(rect).toEqual({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+    });
+  });
+
+  it('calls observe on mount and disconnect on unmount', () => {
+    const { unmount } = renderHook(() => useResizeObserver());
+
+    expect(global.ResizeObserver).toHaveBeenCalled();
+
+    unmount();
+
+    expect(mockObserverInstance.disconnect).toHaveBeenCalled();
+  });
+});
+
+describe('@mantine/hooks/use-element-size', () => {
+  beforeEach(() => {
+    global.ResizeObserver = jest.fn().mockImplementation(() => {
+      mockObserverInstance = new MockResizeObserver();
+      return mockObserverInstance;
+    }) as any;
+
+    window.requestAnimationFrame = (callback) => window.setTimeout(callback, 0);
+    window.cancelAnimationFrame = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterAll(() => {
+    global.ResizeObserver = originalResizeObserver;
+    window.requestAnimationFrame = originalRAF;
+    window.cancelAnimationFrame = originalCAF;
+  });
+
+  it('returns reference and default dimensions', () => {
+    const { result } = renderHook(() => useElementSize());
+
+    expect(result.current.ref.current).toBe(null);
+    expect(result.current.width).toBe(0);
+    expect(result.current.height).toBe(0);
+  });
+});

packages/@mantine/hooks/src/use-resize-observer/use-resize-observer.ts

@@ -30,7 +30,31 @@ export function useResizeObserver<T extends HTMLElement = any>(options?: ResizeO
 
               frameID.current = requestAnimationFrame(() => {
                 if (ref.current) {
-                  setRect(entry.contentRect);
+                  const boxSize = entry.borderBoxSize?.[0] || entry.contentBoxSize?.[0];
+                  if (boxSize) {
+                    const style = window.getComputedStyle(ref.current);
+                    const writingMode = style.writingMode || 'horizontal-tb';
+
+                    const width = writingMode.startsWith('horizontal')
+                      ? boxSize.inlineSize
+                      : boxSize.blockSize;
+                    const height = writingMode.startsWith('horizontal')
+                      ? boxSize.blockSize
+                      : boxSize.inlineSize;
+
+                    setRect({
+                      x: 0,
+                      y: 0,
+                      top: 0,
+                      left: 0,
+                      bottom: 0,
+                      right: 0,
+                      width,
+                      height,
+                    });
+                  } else {
+                    setRect(entry.contentRect);
+                  }
                 }
               });
             }