@patternfly/react-table 6.0.0-alpha.5 → 6.0.0-alpha.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.0.0-alpha.5",
+  "version": "6.0.0-alpha.50",
   "description": "This library provides a set of React table components for use with the PatternFly 4",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -40,10 +40,10 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-alpha.5",
-    "@patternfly/react-icons": "^6.0.0-alpha.4",
-    "@patternfly/react-styles": "^6.0.0-alpha.4",
-    "@patternfly/react-tokens": "^6.0.0-alpha.4",
+    "@patternfly/react-core": "^6.0.0-alpha.50",
+    "@patternfly/react-icons": "^6.0.0-alpha.19",
+    "@patternfly/react-styles": "^6.0.0-alpha.19",
+    "@patternfly/react-tokens": "^6.0.0-alpha.19",
     "lodash": "^4.17.19",
     "tslib": "^2.5.0"
   },
@@ -55,5 +55,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "0213323de9e62364f8cd3f401bec86f1f34ee4fe"
+  "gitHead": "ef6f95d064bfbb8f5aaa134ab6941f63ccf36111"
 }

package/single-packages.config.json

@@ -1,7 +1,4 @@
 {
-    "packageName": "@patternfly/react-table",
-    "exclude": [
-        "dist/esm/deprecated/index.js",
-        "dist/esm/next/index.js"
-    ]
-}
+  "packageName": "@patternfly/react-table",
+  "exclude": ["dist/esm/deprecated/index.js", "dist/esm/next/index.js"]
+}

package/src/components/Table/ActionsColumn.tsx

@@ -103,9 +103,8 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
               isExpanded={isOpen}
               isDisabled={isDisabled}
               variant="plain"
-            >
-              <EllipsisVIcon />
-            </MenuToggle>
+              icon={<EllipsisVIcon />}
+            />
           )
         }
         {...(rowData && rowData.actionProps)}

package/src/components/Table/EditableSelectInputCell.tsx

@@ -76,7 +76,7 @@ export const EditableSelectInputCell: React.FunctionComponent<IEditableSelectInp
       <div className={inlineStyles.inlineEditValue}>{Array.isArray(value) ? value.join(', ') : value}</div>
       <div className={inlineStyles.inlineEditInput}>
         {select}
-        <div className={css(formStyles.formHelperText, formStyles.modifiers.error)} aria-live="polite">
+        <div className={css(formStyles.formHelperText)} aria-live="polite">
           {props.errorText}
         </div>
       </div>

package/src/components/Table/EditableTextCell.tsx

@@ -49,7 +49,7 @@ export const EditableTextCell: React.FunctionComponent<IEditableTextCell> = ({
         }}
         aria-label={inputAriaLabel}
       />
-      <div className={css(formStyles.formHelperText, formStyles.modifiers.error)} aria-live="polite">
+      <div className={css(formStyles.formHelperText)} aria-live="polite">
         {props.errorText}
       </div>
     </div>

package/src/components/Table/SelectColumn.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Tooltip, TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
 
 export enum RowSelectVariant {
   radio = 'radio',
@@ -11,6 +12,10 @@ export interface SelectColumnProps {
   className?: string;
   onSelect?: (event: React.FormEvent<HTMLInputElement>) => void;
   selectVariant?: RowSelectVariant;
+  /** text to display on the tooltip */
+  tooltip?: React.ReactNode;
+  /** other props to pass to the tooltip */
+  tooltipProps?: Omit<TooltipProps, 'content'>;
 }
 
 export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
@@ -19,13 +24,27 @@ export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
   className,
   onSelect = null as (event: React.FormEvent<HTMLInputElement>) => void,
   selectVariant,
+  tooltip,
+  tooltipProps,
   ...props
-}: SelectColumnProps) => (
-  <React.Fragment>
-    <label>
-      <input {...props} type={selectVariant} onChange={onSelect} />
-    </label>
-    {children}
-  </React.Fragment>
-);
+}: SelectColumnProps) => {
+  const inputRef = React.createRef<HTMLInputElement>();
+
+  const content = (
+    <React.Fragment>
+      <label>
+        <input {...props} ref={inputRef} type={selectVariant} onChange={onSelect} />
+      </label>
+      {children}
+    </React.Fragment>
+  );
+
+  return tooltip ? (
+    <Tooltip triggerRef={inputRef} content={tooltip} {...tooltipProps}>
+      {content}
+    </Tooltip>
+  ) : (
+    content
+  );
+};
 SelectColumn.displayName = 'SelectColumn';

package/src/components/Table/SortColumn.tsx

@@ -5,6 +5,7 @@ import ArrowsAltVIcon from '@patternfly/react-icons/dist/esm/icons/arrows-alt-v-
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import { TableText } from './TableText';
+import { TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
 
 export enum SortByDirection {
   asc = 'asc',
@@ -17,6 +18,9 @@ export interface SortColumnProps extends React.ButtonHTMLAttributes<HTMLButtonEl
   isSortedBy?: boolean;
   onSort?: Function;
   sortDirection?: string;
+  tooltip?: React.ReactNode;
+  tooltipProps?: Omit<TooltipProps, 'content'>;
+  tooltipHasDefaultBehavior?: boolean;
 }
 
 export const SortColumn: React.FunctionComponent<SortColumnProps> = ({
@@ -26,6 +30,9 @@ export const SortColumn: React.FunctionComponent<SortColumnProps> = ({
   onSort = null,
   sortDirection = '',
   type = 'button',
+  tooltip,
+  tooltipProps,
+  tooltipHasDefaultBehavior,
   ...props
 }: SortColumnProps) => {
   let SortedByIcon;
@@ -45,7 +52,14 @@ export const SortColumn: React.FunctionComponent<SortColumnProps> = ({
       onBlur={() => setFocused(false)}
     >
       <div className={css(className, styles.tableButtonContent)}>
-        <TableText focused={focused}>{children}</TableText>
+        <TableText
+          tooltip={tooltip}
+          tooltipProps={tooltipProps}
+          tooltipHasDefaultBehavior={tooltipHasDefaultBehavior}
+          focused={focused}
+        >
+          {children}
+        </TableText>
         <span className={css(styles.tableSortIndicator)}>
           <SortedByIcon />
         </span>

package/src/components/Table/Table.tsx

@@ -124,7 +124,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
       setTableCaption(
         <caption>
           {selectableRowCaptionText}
-          <div className="pf-v5-screen-reader">
+          <div className="pf-v6-screen-reader">
             This table has selectable rows. It can be navigated by row using tab, and each row can be selected using
             space or enter.
           </div>
@@ -132,7 +132,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
       );
     } else {
       setTableCaption(
-        <caption className="pf-v5-screen-reader">
+        <caption className="pf-v6-screen-reader">
           This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space
           or enter.
         </caption>

package/src/components/Table/TableText.tsx

@@ -26,13 +26,15 @@ export interface TableTextProps extends React.HTMLProps<HTMLDivElement> {
   /** Determines which wrapping modifier to apply to the table text */
   wrapModifier?: WrapModifier | 'wrap' | 'nowrap' | 'truncate' | 'breakWord' | 'fitContent';
   /** text to display on the tooltip */
-  tooltip?: string;
+  tooltip?: React.ReactNode;
   /** other props to pass to the tooltip */
   tooltipProps?: Omit<TooltipProps, 'content'>;
   /** callback used to create the tooltip if text is truncated */
   onMouseEnter?: (event: any) => void;
   /** Determines if the TableText is focused by parent component */
   focused?: boolean;
+  /** Determines if tooltip should have normal visbility behavior. If false, the tooltip will only be shown when children is not entirely visible */
+  tooltipHasDefaultBehavior?: boolean;
 }
 
 export const TableText: React.FunctionComponent<TableTextProps> = ({
@@ -44,12 +46,13 @@ export const TableText: React.FunctionComponent<TableTextProps> = ({
   tooltipProps = {},
   onMouseEnter: onMouseEnterProp = () => {},
   focused = false,
+  tooltipHasDefaultBehavior = false,
   ...props
 }: TableTextProps) => {
   const Component: TableTextVariant | 'span' | 'div' = variant;
   const textRef = React.createRef<HTMLElement>();
 
-  const [tooltip, setTooltip] = React.useState('');
+  const [tooltip, setTooltip] = React.useState(tooltipProp);
   const onMouseEnter = (event: any) => {
     if (event.target.offsetWidth < event.target.scrollWidth) {
       setTooltip(tooltipProp || event.target.innerText);
@@ -70,7 +73,7 @@ export const TableText: React.FunctionComponent<TableTextProps> = ({
   const text = (
     <Component
       ref={textRef as React.Ref<HTMLDivElement>}
-      onMouseEnter={onMouseEnter}
+      onMouseEnter={!tooltipHasDefaultBehavior ? onMouseEnter : undefined}
       className={css(className, wrapModifier && styles.modifiers[wrapModifier], styles.tableText)}
       {...props}
     >
@@ -79,15 +82,22 @@ export const TableText: React.FunctionComponent<TableTextProps> = ({
   );
 
   React.useEffect(() => {
-    if (focused) {
-      onFocus(textRef.current);
-    } else {
-      setTooltip('');
+    if (!tooltipHasDefaultBehavior) {
+      if (focused) {
+        onFocus(textRef.current);
+      } else {
+        setTooltip('');
+      }
     }
-  }, [focused]);
+  }, [focused, tooltipHasDefaultBehavior]);
 
   return tooltip !== '' ? (
-    <Tooltip triggerRef={textRef} content={tooltip} isVisible {...tooltipProps}>
+    <Tooltip
+      triggerRef={textRef}
+      content={tooltip}
+      {...(!tooltipHasDefaultBehavior && { isVisible: true })}
+      {...tooltipProps}
+    >
       {text}
     </Tooltip>
   ) : (

package/src/components/Table/TableTypes.tsx

@@ -132,6 +132,9 @@ export interface IExtra extends IExtraData {
   rowData?: IRowData;
   className?: string;
   ariaLabel?: string;
+  tooltip?: React.ReactNode;
+  tooltipProps?: Omit<TooltipProps, 'content'>;
+  tooltipHasDefaultBehavior?: boolean;
 }
 
 export type IFormatterValueType = formatterValueType & {

package/src/components/Table/Td.tsx

@@ -55,7 +55,7 @@ export interface TdProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableDa
   draggableRow?: TdDraggableType;
   /** True to remove padding */
   noPadding?: boolean;
-  /** Applies pf-v5-c-table__action to td */
+  /** Applies pf-v6-c-table__action to td */
   isActionCell?: boolean;
   /**
    * Tooltip to show on the body cell.

package/src/components/Table/Th.tsx

@@ -6,7 +6,7 @@ import { info, sortable, sortableFavorites, selectable, collapsible, cellWidth,
 import { ThInfoType, ThSelectType, ThExpandType, ThSortType, formatterValueType } from './base/types';
 import { mergeProps } from './base/merge-props';
 import { IVisibility } from './utils/decorators/classNames';
-import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip/Tooltip';
+import { Tooltip, TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
 import { BaseCellProps } from './Table';
 import { IFormatterValueType, IColumn } from './TableTypes';
 import cssStickyCellMinWidth from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_MinWidth';
@@ -34,6 +34,8 @@ export interface ThProps
    * To disable it completely you can set it to null.
    */
   tooltip?: React.ReactNode;
+  /** other props to pass to the tooltip */
+  tooltipProps?: Omit<TooltipProps, 'content'>;
   /** Callback on mouse enter */
   onMouseEnter?: (event: any) => void;
   /** Adds tooltip/popover info button */
@@ -68,6 +70,7 @@ const ThBase: React.FunctionComponent<ThProps> = ({
   select = null,
   expand: collapse = null,
   tooltip = '',
+  tooltipProps,
   onMouseEnter: onMouseEnterProp = () => {},
   width,
   visibility,
@@ -99,7 +102,9 @@ const ThBase: React.FunctionComponent<ThProps> = ({
       sortParams = sortableFavorites({
         onSort: sort?.onSort,
         columnIndex: sort.columnIndex,
-        sortBy: sort.sortBy
+        sortBy: sort.sortBy,
+        tooltip: tooltip as string,
+        tooltipProps
       })();
     } else {
       sortParams = sortable(children as IFormatterValueType, {
@@ -109,7 +114,9 @@ const ThBase: React.FunctionComponent<ThProps> = ({
             sortBy: sort.sortBy,
             onSort: sort?.onSort
           }
-        } as IColumn
+        } as IColumn,
+        tooltip: tooltip as string,
+        tooltipProps
       });
     }
   }
@@ -127,7 +134,9 @@ const ThBase: React.FunctionComponent<ThProps> = ({
             allRowsSelected: select.isSelected,
             isHeaderSelectDisabled: !!select.isHeaderSelectDisabled
           }
-        }
+        },
+        tooltip: tooltip as string,
+        tooltipProps
       })
     : null;
   const collapseParams = collapse
@@ -208,13 +217,15 @@ const ThBase: React.FunctionComponent<ThProps> = ({
   );
 
   const canMakeDefaultTooltip = tooltip === '' ? typeof transformedChildren === 'string' : true;
-  return tooltip !== null && canMakeDefaultTooltip && showTooltip ? (
+  const childControlsTooltip = sortParams || selectParams;
+  return tooltip !== null && canMakeDefaultTooltip && !childControlsTooltip && showTooltip ? (
     <>
       {cell}
       <Tooltip
         triggerRef={cellRef as React.RefObject<any>}
         content={tooltip || (tooltip === '' && children)}
         isVisible
+        {...tooltipProps}
       />
     </>
   ) : (

package/src/components/Table/__tests__/__snapshots__/RowWrapper.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`RowWrapper renders correctly 1`] = `
   <table>
     <tbody>
       <tr
-        class="pf-v5-c-table__tr"
+        class="pf-v6-c-table__tr"
         data-ouia-component-id="OUIA-Generated-TableRow-1"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
@@ -20,7 +20,7 @@ exports[`RowWrapper renders expanded correctly 1`] = `
   <table>
     <tbody>
       <tr
-        class="pf-v5-c-table__tr pf-v5-c-table__expandable-row pf-m-expanded"
+        class="pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded"
         data-ouia-component-id="OUIA-Generated-TableRow-2"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"

package/src/components/Table/examples/TableActionsOverflow.tsx

@@ -106,9 +106,8 @@ export const TableActions: React.FunctionComponent = () => {
                             setRepos(repos.map((r) => (r.name !== repo.name ? r : { ...r, isMenuOpen: !r.isMenuOpen })))
                           }
                           isExpanded={repo.isMenuOpen}
-                        >
-                          <EllipsisVIcon />
-                        </MenuToggle>
+                          icon={<EllipsisVIcon />}
+                        />
                       )}
                       isOpen={repo.isMenuOpen}
                       onOpenChange={(isOpen) =>

package/src/components/Table/examples/TableEmptyState.tsx

@@ -4,10 +4,8 @@ import {
   Bullseye,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateIcon,
   EmptyStateBody,
   Button,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateActions
 } from '@patternfly/react-core';
@@ -31,12 +29,7 @@ export const TableEmptyState: React.FunctionComponent = () => (
       <Tr>
         <Td colSpan={8}>
           <Bullseye>
-            <EmptyState variant={EmptyStateVariant.sm}>
-              <EmptyStateHeader
-                icon={<EmptyStateIcon icon={SearchIcon} />}
-                titleText="No results found"
-                headingLevel="h2"
-              />
+            <EmptyState headingLevel="h2" titleText="No results found" icon={SearchIcon} variant={EmptyStateVariant.sm}>
               <EmptyStateBody>Clear all filters and try again.</EmptyStateBody>
               <EmptyStateFooter>
                 <EmptyStateActions>

package/src/components/Table/examples/TableNestedHeaders.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
-import { Stack, StackItem } from '@patternfly/react-core';
-import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
-
+import { Stack, StackItem, Timestamp } from '@patternfly/react-core';
 interface PodConnection {
   source: {
     podName: string;
@@ -163,7 +161,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
               <Td dataLabel={columnNames.datetime}>
                 <div>
                   <span>{new Date(connection.timestamp).toDateString()}</span>{' '}
-                  <span className={textStyles.color_200}>{new Date(connection.timestamp).toLocaleTimeString()}</span>
+                  <Timestamp>{new Date(connection.timestamp).toLocaleTimeString()}</Timestamp>
                 </div>
               </Td>
               <Td dataLabel={columnNames.source}>
@@ -172,7 +170,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.source.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <span className={textStyles.color_200}>({connection.source.port.protocol})</span>
+                    <Timestamp>({connection.source.port.protocol})</Timestamp>
                   </StackItem>
                 </Stack>
               </Td>
@@ -182,7 +180,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.destination.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <span className={textStyles.color_200}>({connection.destination.port.protocol})</span>
+                    <Timestamp>({connection.destination.port.protocol})</Timestamp>
                   </StackItem>
                 </Stack>
               </Td>

package/src/components/Table/examples/TableNestedStickyHeader.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
-import { Stack, StackItem } from '@patternfly/react-core';
-import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
-
+import { Stack, StackItem, Timestamp } from '@patternfly/react-core';
 interface PodConnection {
   source: {
     podName: string;
@@ -166,7 +164,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
               <Td dataLabel={columnNames.datetime}>
                 <div>
                   <span>{new Date(connection.timestamp).toDateString()}</span>{' '}
-                  <span className={textStyles.color_200}>{new Date(connection.timestamp).toLocaleTimeString()}</span>
+                  <Timestamp>{new Date(connection.timestamp).toLocaleTimeString()}</Timestamp>
                 </div>
               </Td>
               <Td dataLabel={columnNames.source}>
@@ -175,7 +173,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.source.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <span className={textStyles.color_200}>({connection.source.port.protocol})</span>
+                    <Timestamp>({connection.source.port.protocol})</Timestamp>
                   </StackItem>
                 </Stack>
               </Td>
@@ -185,7 +183,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.destination.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <span className={textStyles.color_200}>({connection.destination.port.protocol})</span>
+                    <Timestamp>({connection.destination.port.protocol})</Timestamp>
                   </StackItem>
                 </Stack>
               </Td>

package/src/components/Table/examples/TableSortableCustom.tsx

@@ -117,9 +117,8 @@ export const TableSortableCustom: React.FunctionComponent = () => {
                   isExpanded={isSortDropdownOpen}
                   variant="plain"
                   aria-label="Sort columns"
-                >
-                  <SortAmountDownIcon />
-                </MenuToggle>
+                  icon={<SortAmountDownIcon />}
+                />
               )}
             >
               <SelectGroup label="Sort column">

package/src/components/Table/examples/TableStickyColumnsAndHeader.tsx

@@ -98,7 +98,7 @@ export const TableStickyColumnsAndHeader: React.FunctionComponent = () => {
   });
 
   return (
-    <div style={{ height: '600px' }}>
+    <div style={{ height: '400px' }}>
       <OuterScrollContainer>
         <InnerScrollContainer>
           <Table aria-label="Sticky columns and header table" gridBreakPoint="" isStickyHeader>

package/src/components/Table/utils/__snapshots__/transformers.test.tsx.snap

@@ -10,7 +10,7 @@ Object {
   >
     
   </SelectColumn>,
-  "className": "pf-v5-c-table__check",
+  "className": "pf-v6-c-table__check",
   "component": "td",
   "isVisible": true,
 }
@@ -26,6 +26,6 @@ Object {
   >
     
   </SortColumn>,
-  "className": "pf-v5-c-table__sort pf-m-selected",
+  "className": "pf-v6-c-table__sort pf-m-selected",
 }
 `;

package/src/components/Table/utils/decorators/selectable.tsx

@@ -7,7 +7,7 @@ import checkStyles from '@patternfly/react-styles/css/components/Check/check';
 
 export const selectable: ITransform = (
   label: IFormatterValueType,
-  { rowIndex, columnIndex, rowData, column, property }: IExtra
+  { rowIndex, columnIndex, rowData, column, property, tooltip }: IExtra
 ) => {
   const {
     extraParams: { onSelect, selectVariant, allRowsSelected, isHeaderSelectDisabled }
@@ -69,6 +69,7 @@ export const selectable: ITransform = (
         selectVariant={selectVariant as RowSelectVariant}
         onSelect={selectClick}
         name={selectName}
+        tooltip={tooltip}
       >
         {label as React.ReactNode}
       </SelectColumn>

package/src/components/Table/utils/decorators/sortable.tsx

@@ -15,12 +15,15 @@ export const sortableFavorites = (sort: any) => () =>
         sortBy: sort.sortBy,
         onSort: sort?.onSort
       }
-    }
+    },
+    tooltip: sort.tooltip,
+    tooltipProps: sort.tooltipProps,
+    tooltipHasDefaultBehavior: true
   });
 
 export const sortable: ITransform = (
   label: IFormatterValueType,
-  { columnIndex, column, property, className, ariaLabel }: IExtra
+  { columnIndex, column, property, className, ariaLabel, tooltip, tooltipProps, tooltipHasDefaultBehavior }: IExtra
 ) => {
   const {
     extraParams: { sortBy, onSort }
@@ -56,6 +59,9 @@ export const sortable: ITransform = (
         sortDirection={isSortedBy ? sortBy.direction : ''}
         onSort={sortClicked}
         aria-label={ariaLabel}
+        tooltip={tooltip}
+        tooltipProps={tooltipProps}
+        tooltipHasDefaultBehavior={tooltipHasDefaultBehavior}
       >
         {label as React.ReactNode}
       </SortColumn>