fix(ResizablePanel): update visual size when container resizes

Author: tenphi

.changeset/curly-boxes-shop.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Recalculate the sidebar position on container resize.

package.json

@@ -82,6 +82,7 @@
     "react-transition-group": "^4.4.5",
     "react-types": "^0.1.0",
     "tiny-invariant": "^1.3.3",
+    "usehooks-ts": "^3.1.0",
     "valid-url": "^1.0.9"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -1,3 +1,4 @@
+import { useResizeObserver } from '@react-aria/utils';
 import { ForwardedRef, forwardRef, useEffect, useMemo, useState } from 'react';
 import { useHover, useMove } from 'react-aria';
 
@@ -153,7 +154,7 @@ interface HandlerProps extends BasePropsWithoutChildren {
 }
 
 const Handler = (props: HandlerProps) => {
-  const { direction = 'right', isDisabled } = props;
+  const { direction = 'right', isDisabled, ...otherProps } = props;
   const { hoverProps, isHovered } = useHover({});
   const isHorizontal = direction === 'left' || direction === 'right';
   const localIsHovered = useDebouncedValue(isHovered, 150);
@@ -170,7 +171,7 @@ const Handler = (props: HandlerProps) => {
           },
           'data-direction': direction,
         },
-        props,
+        otherProps,
       )}
     >
       <div data-element="Track" />
@@ -222,12 +223,29 @@ function ResizablePanel(
     maxSize = isControllable ? undefined : 'min(50%, 400px)',
     ...restProps
   } = props;
-
   const [isDragging, setIsDragging] = useState(false);
   const isHorizontal = direction === 'left' || direction === 'right';
 
   ref = useCombinedRefs(ref);
 
+  const onResize = useEvent(() => {
+    if (ref?.current) {
+      const offsetProp = isHorizontal ? 'offsetWidth' : 'offsetHeight';
+      const containerSize = ref.current[offsetProp];
+
+      if (Math.abs(containerSize - size) < 1 && !isDisabled) {
+        setVisualSize(size);
+      } else {
+        setVisualSize(containerSize);
+      }
+    }
+  });
+
+  useResizeObserver({
+    ref,
+    onResize,
+  });
+
   function clamp(size: number) {
     if (typeof maxSize === 'number') {
       size = Math.min(maxSize, size);
@@ -296,16 +314,7 @@ function ResizablePanel(
   });
 
   useEffect(() => {
-    if (ref.current) {
-      const offsetProp = isHorizontal ? 'offsetWidth' : 'offsetHeight';
-      const containerSize = ref.current[offsetProp];
-
-      if (Math.abs(containerSize - size) < 1 && !isDisabled) {
-        setVisualSize(size);
-      } else {
-        setVisualSize(containerSize);
-      }
-    }
+    onResize();
   }, [size, isDisabled]);
 
   useEffect(() => {