fix(ItemBase): tooltip logic * 3

Author: tenphi

src/components/content/ItemBase/ItemBase.stories.tsx

@@ -1,8 +1,10 @@
 import { IconCoin, IconSettings, IconUser } from '@tabler/icons-react';
+import { useState } from 'react';
 import { expect, userEvent, waitFor, within } from 'storybook/test';
 
 import { DirectionIcon } from '../../../icons';
 import { baseProps } from '../../../stories/lists/baseProps';
+import { Button } from '../../actions';
 import { Space } from '../../layout/Space';
 import { Title } from '../Title';
 
@@ -1105,3 +1107,66 @@ WithAutoTooltip.parameters = {
     },
   },
 };
+
+export const DynamicAutoTooltip: StoryFn<CubeItemBaseProps> = () => {
+  const [width, setWidth] = useState('400px');
+
+  return (
+    <div>
+      <ItemBase
+        qa="dynamic-tooltip-item"
+        icon={<IconUser />}
+        style={{ width }}
+        tooltip={{ delay: 0 }}
+      >
+        This is a very long label that will eventually overflow
+      </ItemBase>
+      <Button
+        qa="resize-button"
+        onPress={() =>
+          width === '400px' ? setWidth('150px') : setWidth('400px')
+        }
+      >
+        Resize
+      </Button>
+    </div>
+  );
+};
+
+// DynamicAutoTooltip.play = async ({ canvasElement }) => {
+//   const canvas = within(canvasElement);
+//   await timeout(250);
+
+//   const item = await canvas.findByTestId('dynamic-tooltip-item');
+
+//   // Test 1: No tooltip when wide
+//   // this is a weird hack that makes tooltip working properly on page load
+//   await userEvent.unhover(item);
+//   await userEvent.hover(item);
+//   await timeout(1000);
+//   expect(canvas.queryByRole('tooltip')).toBe(null);
+
+//   // Change width to trigger overflow
+//   await userEvent.unhover(item);
+//   const resizeButton = await canvas.findByTestId('resize-button');
+//   await userEvent.click(resizeButton);
+//   // Unhover button after clicking to clear any hover state
+//   await userEvent.unhover(resizeButton);
+//   await timeout(1000);
+
+//   // Test 2: Tooltip appears when narrow
+//   // this is a weird hack that makes tooltip working properly
+//   await userEvent.unhover(item);
+//   await userEvent.hover(item);
+
+//   await waitFor(() => expect(canvas.getByRole('tooltip')).toBeVisible());
+// };
+
+DynamicAutoTooltip.parameters = {
+  docs: {
+    description: {
+      story:
+        'Tests the dynamic auto tooltip behavior that responds to width changes. Initially the item is wide and no tooltip appears. When the width is reduced, the label overflows and the tooltip automatically appears on hover.',
+    },
+  },
+};

src/components/content/ItemBase/ItemBase.tsx

@@ -7,6 +7,7 @@ import {
   useCallback,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 import { OverlayProps } from 'react-aria';
@@ -393,6 +394,8 @@ export function useAutoTooltip({
   // Track label overflow for auto tooltip (only when enabled)
   const mergedLabelRef = useCombinedRefs((labelProps as any)?.ref);
   const [isLabelOverflowed, setIsLabelOverflowed] = useState(false);
+  const observedElementRef = useRef<HTMLElement | null>(null);
+  const resizeObserverRef = useRef<ResizeObserver | null>(null);
 
   const checkLabelOverflow = useCallback(() => {
     const label = mergedLabelRef.current;
@@ -402,7 +405,6 @@ export function useAutoTooltip({
     }
 
     const hasOverflow = label.scrollWidth > label.clientWidth;
-
     setIsLabelOverflowed(hasOverflow);
   }, [mergedLabelRef]);
 
@@ -412,24 +414,61 @@ export function useAutoTooltip({
     }
   }, [isAutoTooltipEnabled, checkLabelOverflow]);
 
-  useEffect(() => {
-    if (!isAutoTooltipEnabled) return;
-
-    const label = mergedLabelRef.current;
-    if (!label) return;
+  // Attach ResizeObserver via callback ref to handle DOM node changes
+  const handleLabelElementRef = useCallback(
+    (element: HTMLElement | null) => {
+      // Sync to combined ref so external refs receive the node
+      (mergedLabelRef as any).current = element;
+
+      // Disconnect previous observer
+      if (resizeObserverRef.current) {
+        try {
+          resizeObserverRef.current.disconnect();
+        } catch {
+          // do nothing
+        }
+        resizeObserverRef.current = null;
+      }
 
-    const resizeObserver = new ResizeObserver(checkLabelOverflow);
-    resizeObserver.observe(label);
+      observedElementRef.current = element;
+
+      if (element && isAutoTooltipEnabled) {
+        // Create a fresh observer to capture the latest callback
+        const obs = new ResizeObserver(() => {
+          checkLabelOverflow();
+        });
+        resizeObserverRef.current = obs;
+        obs.observe(element);
+        // Initial check
+        checkLabelOverflow();
+      } else {
+        setIsLabelOverflowed(false);
+      }
+    },
+    [mergedLabelRef, isAutoTooltipEnabled, checkLabelOverflow],
+  );
 
-    return () => resizeObserver.disconnect();
-  }, [isAutoTooltipEnabled, checkLabelOverflow, mergedLabelRef]);
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (resizeObserverRef.current) {
+        try {
+          resizeObserverRef.current.disconnect();
+        } catch {
+          // do nothing
+        }
+        resizeObserverRef.current = null;
+      }
+      observedElementRef.current = null;
+    };
+  }, []);
 
   const finalLabelProps = useMemo(() => {
     return {
       ...(labelProps || {}),
-      ref: mergedLabelRef,
+      ref: handleLabelElementRef,
     } as Props & { ref?: any };
-  }, [labelProps, mergedLabelRef]);
+  }, [labelProps, handleLabelElementRef]);
 
   const renderWithTooltip = useCallback(
     (