From e5c5425669a70122fa7f5c787ac6375cd32adaa9 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 11 Mar 2025 13:42:45 -0400
Subject: [PATCH 1/2] feat(DataList): add tooltip to truncated DataListCell

---
 .../src/components/DataList/DataListCell.tsx  | 51 +++++++++++++------
 1 file changed, 35 insertions(+), 16 deletions(-)

diff --git a/packages/react-core/src/components/DataList/DataListCell.tsx b/packages/react-core/src/components/DataList/DataListCell.tsx
index b2961729402..f9412278f9e 100644
--- a/packages/react-core/src/components/DataList/DataListCell.tsx
+++ b/packages/react-core/src/components/DataList/DataListCell.tsx
@@ -1,6 +1,7 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 import { DataListWrapModifier } from './DataList';
+import { Tooltip } from '../Tooltip';
 
 export interface DataListCellProps extends Omit<React.HTMLProps<HTMLDivElement>, 'width'> {
   /** Content rendered inside the DataList cell */
@@ -28,20 +29,38 @@ export const DataListCell: React.FunctionComponent<DataListCellProps> = ({
   isIcon = false,
   wrapModifier = null,
   ...props
-}: DataListCellProps) => (
-  <div
-    className={css(
-      styles.dataListCell,
-      width > 1 && styles.modifiers[`flex_${width}` as 'flex_2' | 'flex_3' | 'flex_4' | 'flex_5'],
-      !isFilled && styles.modifiers.noFill,
-      alignRight && styles.modifiers.alignRight,
-      isIcon && styles.modifiers.icon,
-      className,
-      wrapModifier && styles.modifiers[wrapModifier]
-    )}
-    {...props}
-  >
-    {children}
-  </div>
-);
+}: DataListCellProps) => {
+  const cellRef = React.useRef(null);
+  const [isTooltipVisible, setIsTooltipVisible] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!cellRef.current || wrapModifier !== 'truncate') {
+      return;
+    }
+    const showTooltip = cellRef.current && cellRef.current.offsetWidth < cellRef.current.scrollWidth;
+    if (isTooltipVisible !== showTooltip) {
+      setIsTooltipVisible(showTooltip);
+    }
+  }, [cellRef, wrapModifier, isTooltipVisible]);
+
+  return (
+    <div
+      className={css(
+        styles.dataListCell,
+        width > 1 && styles.modifiers[`flex_${width}` as 'flex_2' | 'flex_3' | 'flex_4' | 'flex_5'],
+        !isFilled && styles.modifiers.noFill,
+        alignRight && styles.modifiers.alignRight,
+        isIcon && styles.modifiers.icon,
+        className,
+        wrapModifier && styles.modifiers[wrapModifier]
+      )}
+      {...(isTooltipVisible && { tabIndex: 0 })}
+      ref={cellRef}
+      {...props}
+    >
+      {children}
+      {isTooltipVisible && <Tooltip content={children} triggerRef={cellRef} />}
+    </div>
+  );
+};
 DataListCell.displayName = 'DataListCell';

From cab491b3d2b1730f465fc5a31b91499514b496d3 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 11 Mar 2025 16:18:14 -0400
Subject: [PATCH 2/2] update to react 19 syntax

---
 .../react-core/src/components/DataList/DataListCell.tsx  | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/react-core/src/components/DataList/DataListCell.tsx b/packages/react-core/src/components/DataList/DataListCell.tsx
index f9412278f9e..e1d7bc62f69 100644
--- a/packages/react-core/src/components/DataList/DataListCell.tsx
+++ b/packages/react-core/src/components/DataList/DataListCell.tsx
@@ -1,3 +1,4 @@
+import { FunctionComponent, useRef, useState, useEffect } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 import { DataListWrapModifier } from './DataList';
@@ -20,7 +21,7 @@ export interface DataListCellProps extends Omit<React.HTMLProps<HTMLDivElement>,
   wrapModifier?: DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord';
 }
 
-export const DataListCell: React.FunctionComponent<DataListCellProps> = ({
+export const DataListCell: FunctionComponent<DataListCellProps> = ({
   children = null,
   className = '',
   width = 1,
@@ -30,10 +31,10 @@ export const DataListCell: React.FunctionComponent<DataListCellProps> = ({
   wrapModifier = null,
   ...props
 }: DataListCellProps) => {
-  const cellRef = React.useRef(null);
-  const [isTooltipVisible, setIsTooltipVisible] = React.useState(false);
+  const cellRef = useRef(null);
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!cellRef.current || wrapModifier !== 'truncate') {
       return;
     }