@patternfly/react-core 6.2.0-prerelease.31 → 6.2.0-prerelease.32

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.2.0-prerelease.30","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.2.0-prerelease.31","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.2.0-prerelease.30","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.2.0-prerelease.31","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.2.0-prerelease.30","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.2.0-prerelease.31","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.0-prerelease.31",
+  "version": "6.2.0-prerelease.32",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "e3dd20ff85965e283c3a7331b03b6c50680d7266"
+  "gitHead": "dd8e4d8000ae6c32f35246929b9054bd5b4bee5b"
 }

package/src/components/DataList/DataListCell.tsx

@@ -1,6 +1,8 @@
+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';
+import { Tooltip } from '../Tooltip';
 
 export interface DataListCellProps extends Omit<React.HTMLProps<HTMLDivElement>, 'width'> {
   /** Content rendered inside the DataList cell */
@@ -19,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,
@@ -28,20 +30,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 = useRef(null);
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+
+  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';