@koobiq/react-core 0.11.1 → 0.12.0

package/dist/hooks/useResizeObserver/useResizeObserver.js

@@ -15,20 +15,33 @@ function useResizeObserver(options) {
   const ref = useRef(null);
   const [rect, setRect] = useState(defaultState);
   const observer = useMemo(
-    () => typeof window !== "undefined" && typeof ResizeObserver !== "undefined" ? (
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      new ResizeObserver((entries) => {
-        const entry = entries[0];
-        if (entry) {
-          cancelAnimationFrame(frameID.current);
-          frameID.current = requestAnimationFrame(() => {
-            if (ref.current) {
+    () => typeof window !== "undefined" && typeof ResizeObserver !== "undefined" ? new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        cancelAnimationFrame(frameID.current);
+        frameID.current = requestAnimationFrame(() => {
+          if (ref.current) {
+            const boxSize = entry.borderBoxSize?.[0] || entry.contentBoxSize?.[0];
+            if (boxSize) {
+              const width = boxSize.inlineSize;
+              const height = boxSize.blockSize;
+              setRect({
+                width,
+                height,
+                x: entry.contentRect.x,
+                y: entry.contentRect.y,
+                top: entry.contentRect.top,
+                left: entry.contentRect.left,
+                bottom: entry.contentRect.bottom,
+                right: entry.contentRect.right
+              });
+            } else {
               setRect(entry.contentRect);
             }
-          });
-        }
-      })
-    ) : null,
+          }
+        });
+      }
+    }) : null,
     []
   );
   useEffect(() => {

package/dist/hooks/useResizeObserverRefs/useResizeObserverRefs.d.ts

@@ -1,2 +1,2 @@
-import type { RefObject } from 'react';
+import { type RefObject } from 'react';
 export declare const useResizeObserverRefs: <Element extends HTMLElement | SVGGraphicsElement, ReturnType>(refs: Array<RefObject<Element>>, mapper: (el: Element | null) => ReturnType) => ReturnType[];

package/dist/hooks/useResizeObserverRefs/useResizeObserverRefs.js

@@ -1,5 +1,5 @@
 "use client";
-import { useState, useLayoutEffect } from "react";
+import { useState, useMemo, useLayoutEffect } from "react";
 import { useMutableRef } from "../useMutableRef/useMutableRef.js";
 const useResizeObserverRefs = (refs, mapper) => {
   const calculateDimensionsRef = useMutableRef(
@@ -8,18 +8,21 @@ const useResizeObserverRefs = (refs, mapper) => {
   const [dimensions, setDimensions] = useState(
     calculateDimensionsRef.current
   );
+  const resizeObserver = useMemo(
+    () => typeof window !== "undefined" && typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+      setDimensions(calculateDimensionsRef.current);
+    }) : null,
+    []
+  );
   useLayoutEffect(() => {
     setDimensions(calculateDimensionsRef.current);
   }, [refs]);
   useLayoutEffect(() => {
-    const resizeObserver = new ResizeObserver(() => {
-      setDimensions(calculateDimensionsRef.current);
-    });
     for (const ref of refs) {
-      if (ref.current) resizeObserver.observe(ref.current);
+      if (ref.current) resizeObserver?.observe(ref.current);
     }
     return () => {
-      resizeObserver.disconnect();
+      resizeObserver?.disconnect();
     };
   }, [refs]);
   return dimensions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-core",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",