fix(Tooltip): dynamic label case

Author: tenphi

src/components/actions/Menu/Menu.test.tsx

@@ -477,7 +477,7 @@ describe('<Menu />', () => {
   it('should handle keyboard navigation', async () => {
     const onAction = jest.fn();
 
-    const { getByRole } = render(
+    const { getByRole } = renderWithRoot(
       <Menu id="test-menu" aria-label="Test menu" onAction={onAction}>
         {basicItems}
       </Menu>,
@@ -496,7 +496,7 @@ describe('<Menu />', () => {
   });
 
   it('should handle keyboard navigation with focus wrapping', async () => {
-    const { getByRole } = render(
+    const { getByRole } = renderWithRoot(
       <Menu shouldFocusWrap id="test-menu" aria-label="Test menu">
         {basicItems}
       </Menu>,
@@ -516,7 +516,7 @@ describe('<Menu />', () => {
   });
 
   it('should handle keyboard navigation with arrow keys', async () => {
-    const { getByRole } = render(
+    const { getByRole } = renderWithRoot(
       <Menu id="test-menu" aria-label="Test menu">
         {basicItems}
       </Menu>,
@@ -549,7 +549,7 @@ describe('<Menu />', () => {
   });
 
   it('should handle focus with first strategy', () => {
-    const { container } = render(
+    const { container } = renderWithRoot(
       <Menu id="test-menu" aria-label="Test menu" autoFocus="first">
         {basicItems}
       </Menu>,
@@ -561,7 +561,7 @@ describe('<Menu />', () => {
   });
 
   it('should handle focus with last strategy', () => {
-    const { container } = render(
+    const { container } = renderWithRoot(
       <Menu id="test-menu" aria-label="Test menu" autoFocus="last">
         {basicItems}
       </Menu>,

src/components/content/ItemBase/ItemBase.tsx

@@ -414,10 +414,12 @@ export function useAutoTooltip({
   tooltip,
   children,
   labelProps,
+  isDynamicLabel = false, // if actions are set
 }: {
   tooltip: CubeItemBaseProps['tooltip'];
   children: ReactNode;
   labelProps?: Props;
+  isDynamicLabel?: boolean;
 }) {
   // Determine if auto tooltip is enabled
   // Auto tooltip only works when children is a string (overflow detection needs text)
@@ -551,12 +553,15 @@ export function useAutoTooltip({
 
         // Boolean tooltip - auto tooltip on overflow
         if (tooltip === true) {
-          if (children || labelProps) {
+          if (
+            (children || labelProps) &&
+            (isLabelOverflowed || isDynamicLabel)
+          ) {
             return (
               <TooltipProvider
                 placement={defaultTooltipPlacement}
                 title={children}
-                isDisabled={!isLabelOverflowed}
+                isDisabled={!isLabelOverflowed && isDynamicLabel}
               >
                 {(triggerProps, ref) => renderElement(triggerProps, ref)}
               </TooltipProvider>
@@ -581,13 +586,18 @@ export function useAutoTooltip({
           }
 
           // If title is provided with auto=true, OR no title but auto behavior enabled
-          if (children || labelProps) {
+          if (
+            (children || labelProps) &&
+            (isLabelOverflowed || isDynamicLabel)
+          ) {
             return (
               <TooltipProvider
                 placement={defaultTooltipPlacement}
                 title={tooltipProps.title ?? children}
                 isDisabled={
-                  !isLabelOverflowed && tooltipProps.isDisabled !== true
+                  !isLabelOverflowed &&
+                  isDynamicLabel &&
+                  tooltipProps.isDisabled !== true
                 }
                 {...tooltipProps}
               >
@@ -753,7 +763,12 @@ const ItemBase = <T extends HTMLElement = HTMLDivElement>(
     labelProps: finalLabelProps,
     labelRef,
     renderWithTooltip,
-  } = useAutoTooltip({ tooltip, children, labelProps });
+  } = useAutoTooltip({
+    tooltip,
+    children,
+    labelProps,
+    isDynamicLabel: !!actions,
+  });
 
   // Create a stable render function that doesn't call hooks
   const renderItemElement = useCallback(

src/components/overlays/Tooltip/Tooltip.tsx

@@ -174,7 +174,7 @@ function Tooltip(
 
   const styles = extractStyles(otherProps, CONTAINER_STYLES);
 
-  let { tooltipProps } = useTooltip(props, state);
+  let { tooltipProps } = useTooltip({ ...props, isDismissable: false }, state);
 
   // Sync ref with overlayRef from context.
   useImperativeHandle(ref, () => createDOMRef(finalOverlayRef));

src/components/overlays/Tooltip/TooltipProvider.tsx

@@ -26,7 +26,8 @@ export interface CubeTooltipProviderProps
 
 export function TooltipProvider(props: CubeTooltipProviderProps): ReactElement {
   const [rendered, setRendered] = useState(false);
-  const { title, children, tooltipStyles, width, ...otherProps } = props;
+  const { title, children, tooltipStyles, width, isDisabled, ...otherProps } =
+    props;
 
   useEffect(() => {
     setRendered(true);
@@ -48,17 +49,25 @@ export function TooltipProvider(props: CubeTooltipProviderProps): ReactElement {
   // Both patterns pass through to TooltipTrigger
   // The difference is whether we pass function or element as first child
   return (
-    <TooltipTrigger {...otherProps} disableFocusableProvider={isFunction}>
+    <TooltipTrigger
+      {...otherProps}
+      isDisabled={isDisabled}
+      disableFocusableProvider={isFunction}
+    >
       {isFunction ||
       isValidElement(children) ||
       typeof children === 'string' ? (
         children
       ) : (
         <>{children}</>
       )}
-      <Tooltip styles={tooltipStyles} {...(width ? { width } : null)}>
-        {title}
-      </Tooltip>
+      {isDisabled ? (
+        <div />
+      ) : (
+        <Tooltip styles={tooltipStyles} {...(width ? { width } : null)}>
+          {title}
+        </Tooltip>
+      )}
     </TooltipTrigger>
   );
 }

src/components/overlays/Tooltip/TooltipTrigger.tsx

@@ -144,14 +144,15 @@ export function TooltipTrigger(props: CubeTooltipTriggerProps) {
   let tooltipTriggerRef = externalRef ?? internalRef;
   let overlayRef = useRef<HTMLElement | null>(null);
 
-  let state = useTooltipTriggerState({ delay, ...props });
+  let state = useTooltipTriggerState({ delay, ...props, isDismissable: false });
 
   let { triggerProps, tooltipProps } = useTooltipTrigger(
     {
       trigger: triggerAction,
       delay,
       isOpen,
       onOpenChange,
+      isDismissable: false,
       defaultOpen,
     },
     state,
@@ -165,6 +166,7 @@ export function TooltipTrigger(props: CubeTooltipTriggerProps) {
       overlayRef,
       offset,
       crossOffset,
+      isDismissable: false,
       isOpen: state.isOpen,
     });
 
@@ -227,21 +229,19 @@ export function TooltipTrigger(props: CubeTooltipTriggerProps) {
         trigger
       )}
       <DisplayTransition isShown={state.isOpen && !isDisabled}>
-        {({ phase, isShown, ref: transitionRef }) =>
-          isDisabled ? null : (
-            <TooltipContext.Provider
-              value={{
-                ...tooltipContextValue,
-                phase,
-                isShown,
-                ref: overlayRef,
-                transitionRef,
-              }}
-            >
-              <Portal>{tooltip}</Portal>
-            </TooltipContext.Provider>
-          )
-        }
+        {({ phase, isShown, ref: transitionRef }) => (
+          <TooltipContext.Provider
+            value={{
+              ...tooltipContextValue,
+              phase,
+              isShown,
+              ref: overlayRef,
+              transitionRef,
+            }}
+          >
+            <Portal>{tooltip}</Portal>
+          </TooltipContext.Provider>
+        )}
       </DisplayTransition>
     </>
   );