fix(ItemBase): size observer (#770)

Author: tenphi

.changeset/silver-laws-flash.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Add size observer for ItemBase.

src/components/content/ItemBase/ItemBase.tsx

@@ -4,6 +4,8 @@ import {
   ForwardedRef,
   forwardRef,
   ReactNode,
+  useCallback,
+  useEffect,
   useMemo,
   useState,
 } from 'react';
@@ -497,7 +499,7 @@ const ItemBase = <T extends HTMLElement = HTMLDivElement>(
   const mergedLabelRef = useCombinedRefs((labelProps as any)?.ref);
   const [isLabelOverflowed, setIsLabelOverflowed] = useState(false);
 
-  const checkLabelOverflow = () => {
+  const checkLabelOverflow = useCallback(() => {
     const label = mergedLabelRef.current;
     if (!label) {
       setIsLabelOverflowed(false);
@@ -507,28 +509,25 @@ const ItemBase = <T extends HTMLElement = HTMLDivElement>(
     const hasOverflow = label.scrollWidth > label.clientWidth;
 
     setIsLabelOverflowed(hasOverflow);
-  };
+  }, [mergedLabelRef]);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (isAutoTooltipEnabled) {
       checkLabelOverflow();
     }
-  }, [children, isAutoTooltipEnabled]);
+  }, [children, isAutoTooltipEnabled, checkLabelOverflow]);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (!isAutoTooltipEnabled) return;
 
     const label = mergedLabelRef.current;
     if (!label) return;
 
-    // Initial check
-    checkLabelOverflow();
+    const resizeObserver = new ResizeObserver(checkLabelOverflow);
+    resizeObserver.observe(label);
 
-    // const resizeObserver = new ResizeObserver(checkLabelOverflow);
-    // resizeObserver.observe(label);
-
-    // return () => resizeObserver.disconnect();
-  }, [mergedLabelRef.current, isAutoTooltipEnabled]);
+    return () => resizeObserver.disconnect();
+  }, [isAutoTooltipEnabled, checkLabelOverflow, children, mergedLabelRef]);
 
   const finalLabelProps = useMemo(() => {
     return {