@patternfly/react-table 6.0.0-alpha.1 → 6.0.0-alpha.100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.0.0-alpha.1",
+  "version": "6.0.0-alpha.100",
   "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,20 +40,16 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-alpha.1",
-    "@patternfly/react-icons": "^6.0.0-alpha.1",
-    "@patternfly/react-styles": "^6.0.0-alpha.1",
-    "@patternfly/react-tokens": "^6.0.0-alpha.1",
-    "lodash": "^4.17.19",
-    "tslib": "^2.5.0"
-  },
-  "devDependencies": {
-    "rimraf": "^2.6.2",
-    "typescript": "^4.7.4"
+    "@patternfly/react-core": "^6.0.0-alpha.99",
+    "@patternfly/react-icons": "^6.0.0-alpha.35",
+    "@patternfly/react-styles": "^6.0.0-alpha.34",
+    "@patternfly/react-tokens": "^6.0.0-alpha.34",
+    "lodash": "^4.17.21",
+    "tslib": "^2.6.3"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "abccf530a0a642a4d7b4eda6ada09c5822c855b0"
+  "gitHead": "a74cdba65be61e9f94424de4381af804050c409f"
 }

package/rollup.config.mjs

@@ -0,0 +1,8 @@
+// @ts-check
+import baseConfig from '../rollup.base.mjs';
+import pkg from './package.json' with { type: 'json' };
+
+export default baseConfig({
+  packageName: pkg.name.replace('@patternfly/', ''),
+  name: 'PatternFlyTable'
+});

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

@@ -30,6 +30,8 @@ export interface ActionsColumnProps extends Omit<React.HTMLProps<HTMLElement>, '
   innerRef?: React.Ref<any>;
   /** Ref to forward to the first item in the popup menu */
   firstActionItemRef?: React.Ref<HTMLButtonElement>;
+  /** Flag indicating that the dropdown's onOpenChange callback should not be called. */
+  isOnOpenChangeDisabled?: boolean;
 }
 
 const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
@@ -44,6 +46,7 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
   },
   innerRef,
   firstActionItemRef,
+  isOnOpenChangeDisabled = false,
   ...props
 }: ActionsColumnProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -91,7 +94,7 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
 
       <Dropdown
         isOpen={isOpen}
-        onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+        onOpenChange={!isOnOpenChangeDisabled ? (isOpen: boolean) => setIsOpen(isOpen) : undefined}
         toggle={(toggleRef: any) =>
           actionsToggle ? (
             actionsToggle({ onToggle, isOpen, isDisabled, toggleRef })
@@ -103,9 +106,8 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
               isExpanded={isOpen}
               isDisabled={isDisabled}
               variant="plain"
-            >
-              <EllipsisVIcon />
-            </MenuToggle>
+              icon={<EllipsisVIcon />}
+            />
           )
         }
         {...(rowData && rowData.actionProps)}
@@ -116,35 +118,37 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
         <DropdownList>
           {items
             .filter((item) => !item.isOutsideDropdown)
-            .map(({ title, itemKey, onClick, tooltipProps, isSeparator, ...props }, index) => {
-              if (isSeparator) {
-                return <Divider key={itemKey || index} data-key={itemKey || index} />;
-              }
-              const item = (
-                <DropdownItem
-                  onClick={(event: any) => {
-                    onActionClick(event, onClick);
-                    onToggle();
-                  }}
-                  {...props}
-                  key={itemKey || index}
-                  data-key={itemKey || index}
-                  ref={index === 0 ? firstActionItemRef : undefined}
-                >
-                  {title}
-                </DropdownItem>
-              );
-
-              if (tooltipProps?.content) {
-                return (
-                  <Tooltip key={itemKey || index} {...tooltipProps}>
-                    {item}
-                  </Tooltip>
+            .map(
+              ({ title, itemKey, onClick, tooltipProps, isSeparator, shouldCloseOnClick = true, ...props }, index) => {
+                if (isSeparator) {
+                  return <Divider key={itemKey || index} data-key={itemKey || index} />;
+                }
+                const item = (
+                  <DropdownItem
+                    onClick={(event: any) => {
+                      onActionClick(event, onClick);
+                      shouldCloseOnClick && onToggle();
+                    }}
+                    {...props}
+                    key={itemKey || index}
+                    data-key={itemKey || index}
+                    ref={index === 0 ? firstActionItemRef : undefined}
+                  >
+                    {title}
+                  </DropdownItem>
                 );
-              } else {
-                return item;
+
+                if (tooltipProps?.content) {
+                  return (
+                    <Tooltip key={itemKey || index} {...tooltipProps}>
+                      {item}
+                    </Tooltip>
+                  );
+                } else {
+                  return item;
+                }
               }
-            })}
+            )}
         </DropdownList>
       </Dropdown>
     </React.Fragment>

package/src/components/Table/DraggableCell.tsx

@@ -24,9 +24,8 @@ export const DraggableCell: React.FunctionComponent<DraggableCellProps> = ({
     aria-label={ariaLabel || `Draggable row draggable button`}
     onClick={onClick}
     {...props}
-  >
-    <GripVerticalIcon aria-hidden />
-  </Button>
+    icon={<GripVerticalIcon aria-hidden />}
+  />
 );
 
 DraggableCell.displayName = 'DraggableCell';

package/src/components/Table/EditColumn.tsx

@@ -33,20 +33,32 @@ export const EditColumn: React.FunctionComponent<EditColumnProps> = ({
   <React.Fragment>
     <div className={css(inlineStyles.inlineEditGroup, inlineStyles.modifiers.iconGroup, 'pf-m-action-group')}>
       <div className={css(inlineStyles.inlineEditAction)}>
-        <Button aria-label={saveAriaLabel} {...props} onClick={(e) => onClick(e, 'save')} variant="plain">
-          <CheckIcon />
-        </Button>
+        <Button
+          aria-label={saveAriaLabel}
+          {...props}
+          onClick={(e) => onClick(e, 'save')}
+          variant="plain"
+          icon={<CheckIcon />}
+        />
       </div>
       <div className={css(inlineStyles.inlineEditAction)}>
-        <Button aria-label={cancelAriaLabel} {...props} onClick={(e) => onClick(e, 'cancel')} variant="plain">
-          <TimesIcon />
-        </Button>
+        <Button
+          aria-label={cancelAriaLabel}
+          {...props}
+          onClick={(e) => onClick(e, 'cancel')}
+          variant="plain"
+          icon={<TimesIcon />}
+        />
       </div>
     </div>
     <div className={css(inlineStyles.inlineEditAction, inlineStyles.modifiers.enableEditable)}>
-      <Button aria-label={editAriaLabel} {...props} onClick={(e) => onClick(e, 'edit')} variant="plain">
-        <PencilAltIcon />
-      </Button>
+      <Button
+        aria-label={editAriaLabel}
+        {...props}
+        onClick={(e) => onClick(e, 'edit')}
+        variant="plain"
+        icon={<PencilAltIcon />}
+      />
     </div>
   </React.Fragment>
 );

package/src/components/Table/EditableSelectInputCell.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import { Select, SelectOptionObject } from '@patternfly/react-core/dist/esm/deprecated/components/Select';
+import { Select, SelectList } from '@patternfly/react-core/dist/esm/components/Select';
+import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle';
 import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import formStyles from '@patternfly/react-styles/css/components/Form/form';
 import { EditableSelectInputProps } from './base/types';
@@ -15,7 +16,7 @@ export interface IEditableSelectInputCell extends Omit<React.HTMLProps<HTMLEleme
   /** Event handler which fires when user selects an option in this cell */
   onSelect: (
     event: React.MouseEvent | React.ChangeEvent,
-    newValue: string | SelectOptionObject,
+    newValue: any | any[],
     rowIndex: number,
     cellIndex: number,
     isPlaceholder?: boolean
@@ -25,11 +26,11 @@ export interface IEditableSelectInputCell extends Omit<React.HTMLProps<HTMLEleme
   /** Flag indicating the select input is disabled */
   isDisabled?: boolean;
   /** Current selected options to display as the read only value of the table cell */
-  selections?: string | SelectOptionObject | (string | SelectOptionObject)[];
+  selections?: any | any[];
   /** Flag indicating the select menu is open */
   isOpen?: boolean;
   /** Event handler which fires when the select toggle is toggled */
-  onToggle?: (event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event, isExpanded: boolean) => void;
+  onToggle?: (event: React.MouseEvent | undefined) => void;
   /** Event handler which fires when the user clears the selections */
   clearSelection?: (event: React.MouseEvent, rowIndex: number, cellIndex: number) => void;
 }
@@ -48,10 +49,10 @@ export const EditableSelectInputCell: React.FunctionComponent<IEditableSelectInp
 }: IEditableSelectInputCell) => {
   const onSelectHandler = (
     event: React.MouseEvent | React.ChangeEvent,
-    newValue: string | SelectOptionObject,
-    isPlaceholder: boolean
+    newValue: any | any[]
+    //    isPlaceholder: boolean
   ) => {
-    onSelect(event, newValue, rowIndex, cellIndex, isPlaceholder);
+    onSelect(event, newValue, rowIndex, cellIndex);
   };
 
   const onClear = (event: React.MouseEvent) => {
@@ -64,10 +65,14 @@ export const EditableSelectInputCell: React.FunctionComponent<IEditableSelectInp
       onSelect={onSelectHandler}
       {...(clearSelection && { onClear })}
       isOpen={isOpen}
-      onToggle={onToggle}
-      selections={selections}
+      selected={selections}
+      toggle={(toggleRef: any) => (
+        <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen}>
+          {isOpen ? 'Expanded' : 'Collapsed'}
+        </MenuToggle>
+      )}
     >
-      {options}
+      <SelectList>{options}</SelectList>
     </Select>
   );
 
@@ -76,7 +81,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/FavoritesCell.tsx

@@ -33,9 +33,8 @@ export const FavoritesCell: React.FunctionComponent<FavoritesCellProps> = ({
       onClick={onFavorite}
       {...ariaProps}
       {...props}
-    >
-      <StarIcon aria-hidden />
-    </Button>
+      icon={<StarIcon aria-hidden />}
+    />
   );
 };
 FavoritesCell.displayName = 'FavoritesCell';

package/src/components/Table/HeaderCellInfoWrapper.tsx

@@ -52,15 +52,19 @@ export const HeaderCellInfoWrapper: React.FunctionComponent<ColumnHelpWrapperPro
     <span className={css(styles.tableColumnHelpAction)}>
       {variant === 'tooltip' ? (
         <Tooltip content={info} {...tooltipProps}>
-          <Button variant="plain" aria-label={ariaLabel || (typeof info === 'string' && info) || 'More info'}>
-            <HelpIcon />
-          </Button>
+          <Button
+            variant="plain"
+            aria-label={ariaLabel || (typeof info === 'string' && info) || 'More info'}
+            icon={<HelpIcon />}
+          />
         </Tooltip>
       ) : (
         <Popover bodyContent={info} {...popoverProps}>
-          <Button variant="plain" aria-label={ariaLabel || (typeof info === 'string' && info) || 'More info'}>
-            <HelpIcon />
-          </Button>
+          <Button
+            variant="plain"
+            aria-label={ariaLabel || (typeof info === 'string' && info) || 'More info'}
+            icon={<HelpIcon />}
+          />
         </Popover>
       )}
     </span>

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

@@ -5,7 +5,7 @@ import stylesTreeView from '@patternfly/react-styles/css/components/Table/table-
 import { css } from '@patternfly/react-styles';
 import { toCamel } from './utils';
 import { IVisibility } from './utils/decorators/classNames';
-import { useOUIAProps, OUIAProps, handleArrows, setTabIndex } from '@patternfly/react-core';
+import { useOUIAProps, OUIAProps, handleArrows, setTabIndex, KeyTypes } from '@patternfly/react-core';
 import { TableGridBreakpoint, TableVariant } from './TableTypes';
 
 export interface BaseCellProps {
@@ -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>
@@ -159,8 +159,8 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   const handleKeys = (event: KeyboardEvent) => {
     if (
       isNested ||
-      !(tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) || // implements roving tab-index to tree tables only
-      (tableRef && tableRef.current !== (event.target as HTMLElement).closest('.pf-v5-c-table:not(.pf-m-nested)'))
+      !(tableRef && tableRef.current && tableRef.current.classList.contains(stylesTreeView.modifiers.treeView)) || // implements roving tab-index to tree tables only
+      (tableRef && tableRef.current !== (event.target as HTMLElement).closest(`.${styles.table}:not(.pf-m-nested)`))
     ) {
       return;
     }
@@ -169,7 +169,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
     const rows = (Array.from(tableRef.current.querySelectorAll('tbody tr')) as Element[]).filter(
       (el) => !el.classList.contains('pf-m-disabled') && !(el as HTMLElement).hidden
     );
-    if (key === 'Space' || key === 'Enter') {
+    if (key === KeyTypes.Space || key === KeyTypes.Enter) {
       (activeElement as HTMLElement).click();
       event.preventDefault();
     }

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

@@ -1,7 +1,6 @@
 import { formatterValueType, ColumnType, RowType, RowKeyType, HeaderType } from './base/types';
 import { SortByDirection } from './SortColumn';
 import { DropdownItemProps } from '@patternfly/react-core/dist/esm/components/Dropdown';
-import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/dist/esm/deprecated/components/Dropdown';
 import * as React from 'react';
 import { CustomActionsToggleProps } from './ActionsColumn';
 import { ButtonProps } from '@patternfly/react-core/dist/esm/components/Button';
@@ -82,7 +81,6 @@ export type OnCheckChange = (
 // Todo: Update type with next breaking change release
 // export type IHeaderRow = ColumnType;
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface IHeaderRow extends ColumnType {}
 
 export interface IRowData extends IRow {
@@ -102,8 +100,8 @@ export interface IColumn {
     rowLabeledBy?: string;
     expandId?: string;
     contentId?: string;
-    dropdownPosition?: DropdownPosition;
-    dropdownDirection?: DropdownDirection;
+    dropdownPosition?: 'right' | 'left';
+    dropdownDirection?: 'up' | 'down';
     menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
     actionsToggle?: (props: CustomActionsToggleProps) => React.ReactNode;
     actionsPopperProps?: any;
@@ -132,10 +130,13 @@ export interface IExtra extends IExtraData {
   rowData?: IRowData;
   className?: string;
   ariaLabel?: string;
+  tooltip?: React.ReactNode;
+  tooltipProps?: Omit<TooltipProps, 'content'>;
+  tooltipHasDefaultBehavior?: boolean;
 }
 
 export type IFormatterValueType = formatterValueType & {
-  title?: string | React.ReactNode;
+  title?: React.ReactNode;
   props?: any;
 };
 
@@ -154,7 +155,7 @@ export interface IAction extends Omit<DropdownItemProps, 'title' | 'onClick'>, P
   /** Key of actions menu item */
   itemKey?: string;
   /** Content to display in the actions menu item */
-  title?: string | React.ReactNode;
+  title?: React.ReactNode;
   /** Render item as aria-disabled option */
   isAriaDisabled?: boolean;
   /** Props for adding a tooltip to a menu item. This is used to display tooltip when hovered over the item  */
@@ -163,6 +164,8 @@ export interface IAction extends Omit<DropdownItemProps, 'title' | 'onClick'>, P
   onClick?: (event: React.MouseEvent, rowIndex: number, rowData: IRowData, extraData: IExtraData) => void;
   /** Flag indicating this action should be placed outside the actions menu, beside the toggle */
   isOutsideDropdown?: boolean;
+  /** Flag indicating whether the actions dropdown should close after an item is clicked. */
+  shouldCloseOnClick?: boolean;
 }
 
 export interface ISeparator extends IAction {
@@ -186,7 +189,7 @@ export interface decoratorReturnType {
   textCenter?: boolean;
   component?: string;
   isVisible?: boolean;
-  title?: string | React.ReactNode;
+  title?: React.ReactNode;
   props?: any;
   scope?: string;
   parentId?: number;
@@ -200,7 +203,7 @@ export type IFormatter = (data?: IFormatterValueType, extra?: IExtra) => formatt
 
 export interface ICell {
   /* cell contents */
-  title?: string | React.ReactNode;
+  title?: React.ReactNode;
   /** transformations applied to the header cell */
   transforms?: ITransform[];
   /** transformations applied to the cells within the column's body */
@@ -224,7 +227,7 @@ export interface ICell {
 export type RowCellContent<T = any> = (value?: string, rowIndex?: number, cellIndex?: number, props?: T) => void;
 
 export interface IRowCell<T = any> {
-  title?: string | React.ReactNode | RowCellContent<T>;
+  title?: React.ReactNode | RowCellContent<T>;
   props?: T;
   formatters?: IFormatter[];
 }