@hrnec06/react_utils 1.11.2 → 1.11.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.11.2",
+  "version": "1.11.4",
   "description": "React utilities",
   "exports": {
     ".": "./src/index.ts"

package/src/components/UI/SmoothExpander/SmoothExpander.tsx

@@ -1,8 +1,8 @@
-import { Nullable, ReactUtils } from "@hrnec06/util";
+import { Nullable, ReactUtils, Vector2 } from "@hrnec06/util";
 import useTransition from "../../../hooks/useTransition";
 import useSyncRef, { useSyncRefAuto } from "../../../hooks/useSyncRef";
 import clsx from "clsx";
-import { useRef } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 
 type SmoothExpanderProps = ReactUtils.Props<{
     open?: boolean
@@ -14,17 +14,44 @@ export default function SmoothExpander({
 }: SmoothExpanderProps)
 {
     const ref = useRef<HTMLDivElement>(null);
+    const [dimensions, setDimensions] = useState<Vector2>([0, 0]);
+
+    useLayoutEffect(() => {
+        if (!ref.current || !open)
+        {
+            setDimensions([0, 0]);
+            
+            return;
+        }
+
+        const observer = new ResizeObserver(() => {
+            if (!ref.current) return;
+
+            setDimensions([
+                ref.current.clientWidth,
+                ref.current.clientHeight
+            ]);
+        });
+
+        observer.observe(ref.current);
+
+        return () => {
+            observer.disconnect();
+        }
+    }, [ref.current, open]);
 
     return (
         <div
             {...props}
 
             className={clsx(
-                "overflow-hidden transition-all relative",
+                "overflow-hidden relative",
+                props.className
             )}
 
             style={{
-                height: open && ref.current ? ref.current.clientHeight : 0
+                width: dimensions[0],
+                height: dimensions[1],
             }}
         >
             <div
@@ -34,5 +61,5 @@ export default function SmoothExpander({
                 {children}
             </div>
         </div>
-    )
+    );
 }