@patternfly/react-table 6.2.0-prerelease.8 → 6.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.2.0-prerelease.8",
+  "version": "6.2.0",
   "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.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.2.0-prerelease.7",
-    "@patternfly/react-icons": "^6.2.0-prerelease.1",
-    "@patternfly/react-styles": "^6.2.0-prerelease.1",
-    "@patternfly/react-tokens": "^6.2.0-prerelease.1",
+    "@patternfly/react-core": "^6.2.0",
+    "@patternfly/react-icons": "^6.2.0",
+    "@patternfly/react-styles": "^6.2.0",
+    "@patternfly/react-tokens": "^6.2.0",
     "lodash": "^4.17.21",
     "tslib": "^2.8.1"
   },
@@ -51,5 +51,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "e1fc07acea104dd070eacee7dfcb0fac201ccd96"
+  "gitHead": "5dff0b6d87c9b56a261dfa64ad980a0bf42663a3"
 }

package/src/components/Table/ActionsColumn.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { cloneElement, forwardRef, Fragment, useState } from 'react';
 import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core/dist/esm/components/Dropdown';
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
 import { Divider } from '@patternfly/react-core/dist/esm/components/Divider';
@@ -49,7 +49,7 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
   isOnOpenChangeDisabled = false,
   ...props
 }: ActionsColumnProps) => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onToggle = () => {
     setIsOpen(!isOpen);
@@ -70,7 +70,7 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
   };
 
   return (
-    <React.Fragment>
+    <Fragment>
       {items
         .filter((item) => item.isOutsideDropdown)
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -88,10 +88,9 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
               {title}
             </Button>
           ) : (
-            React.cloneElement(title as React.ReactElement, { onClick, isDisabled, ...props })
+            cloneElement(title as React.ReactElement<any>, { onClick, isDisabled, ...props })
           )
         )}
-
       <Dropdown
         isOpen={isOpen}
         onOpenChange={!isOnOpenChangeDisabled ? (isOpen: boolean) => setIsOpen(isOpen) : undefined}
@@ -151,11 +150,11 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
             )}
         </DropdownList>
       </Dropdown>
-    </React.Fragment>
+    </Fragment>
   );
 };
 
-export const ActionsColumn = React.forwardRef((props: ActionsColumnProps, ref: React.Ref<HTMLElement>) => (
+export const ActionsColumn = forwardRef((props: ActionsColumnProps, ref: React.Ref<HTMLElement>) => (
   <ActionsColumnBase {...props} innerRef={ref} />
 ));
 ActionsColumn.displayName = 'ActionsColumn';

package/src/components/Table/Caption.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import { css } from '@patternfly/react-styles';
 

package/src/components/Table/CollapseColumn.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Fragment } from 'react';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 import { css } from '@patternfly/react-styles';
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
@@ -20,7 +20,7 @@ export const CollapseColumn: React.FunctionComponent<CollapseColumnProps> = ({
   onToggle,
   ...props
 }: CollapseColumnProps) => (
-  <React.Fragment>
+  <Fragment>
     {isOpen !== undefined && (
       <Button
         className={css(className, isOpen && styles.modifiers.expanded)}
@@ -37,6 +37,6 @@ export const CollapseColumn: React.FunctionComponent<CollapseColumnProps> = ({
       />
     )}
     {children}
-  </React.Fragment>
+  </Fragment>
 );
 CollapseColumn.displayName = 'CollapseColumn';

package/src/components/Table/DraggableCell.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import GripVerticalIcon from '@patternfly/react-icons/dist/esm/icons/grip-vertical-icon';
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
 

package/src/components/Table/DraggableRowWrapper.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import stylesTreeView from '@patternfly/react-styles/css/components/Table/table-tree-view';

package/src/components/Table/EditColumn.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Fragment } from 'react';
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
 import PencilAltIcon from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
@@ -30,7 +30,7 @@ export const EditColumn: React.FunctionComponent<EditColumnProps> = ({
   editAriaLabel,
   ...props
 }: EditColumnProps) => (
-  <React.Fragment>
+  <Fragment>
     <div className={css(inlineStyles.inlineEditGroup, inlineStyles.modifiers.iconGroup, 'pf-m-action-group')}>
       <div className={css(inlineStyles.inlineEditAction)}>
         <Button
@@ -60,6 +60,6 @@ export const EditColumn: React.FunctionComponent<EditColumnProps> = ({
         icon={<PencilAltIcon />}
       />
     </div>
-  </React.Fragment>
+  </Fragment>
 );
 EditColumn.displayName = 'EditColumn';

package/src/components/Table/EditableSelectInputCell.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Fragment } from 'react';
 import { css } from '@patternfly/react-styles';
 import { Select, SelectList } from '@patternfly/react-core/dist/esm/components/Select';
 import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle';
@@ -22,7 +22,7 @@ export interface IEditableSelectInputCell extends Omit<React.HTMLProps<HTMLEleme
     isPlaceholder?: boolean
   ) => void;
   /** Options to display in the expandable select menu */
-  options?: React.ReactElement[];
+  options?: React.ReactElement<any>[];
   /** Flag indicating the select input is disabled */
   isDisabled?: boolean;
   /** Flag indicating the toggle gets placeholder styles **/
@@ -47,7 +47,7 @@ export const EditableSelectInputCell: React.FunctionComponent<IEditableSelectInp
   isPlaceholder = false,
   onToggle = () => {},
   selections = [''],
-  options = [] as React.ReactElement[],
+  options = [] as React.ReactElement<any>[],
   props
 }: IEditableSelectInputCell) => {
   const onSelectHandler = (event: React.MouseEvent | React.ChangeEvent, newValue: any | any[]) => {
@@ -76,7 +76,7 @@ export const EditableSelectInputCell: React.FunctionComponent<IEditableSelectInp
   );
 
   return (
-    <React.Fragment>
+    <Fragment>
       <div className={inlineStyles.inlineEditValue}>{Array.isArray(value) ? value.join(', ') : value}</div>
       <div className={inlineStyles.inlineEditInput}>
         {select}
@@ -84,7 +84,7 @@ export const EditableSelectInputCell: React.FunctionComponent<IEditableSelectInp
           {props.errorText}
         </div>
       </div>
-    </React.Fragment>
+    </Fragment>
   );
 };
 EditableSelectInputCell.displayName = 'EditableSelectInputCell';

package/src/components/Table/EditableTextCell.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Fragment } from 'react';
 import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput';
 import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import formStyles from '@patternfly/react-styles/css/components/Form/form';
@@ -36,7 +36,7 @@ export const EditableTextCell: React.FunctionComponent<IEditableTextCell> = ({
   inputAriaLabel,
   isDisabled = false
 }: IEditableTextCell) => (
-  <React.Fragment>
+  <Fragment>
     <div className={inlineStyles.inlineEditValue}>{value}</div>
     <div className={inlineStyles.inlineEditInput}>
       <TextInput
@@ -53,6 +53,6 @@ export const EditableTextCell: React.FunctionComponent<IEditableTextCell> = ({
         {props.errorText}
       </div>
     </div>
-  </React.Fragment>
+  </Fragment>
 );
 EditableTextCell.displayName = 'EditableTextCell';

package/src/components/Table/ExpandableRowContent.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 

package/src/components/Table/FavoritesCell.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
 

package/src/components/Table/HeaderCellInfoWrapper.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';

package/src/components/Table/InnerScrollContainer.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table-scrollable';
 

package/src/components/Table/OuterScrollContainer.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table-scrollable';
 

package/src/components/Table/RowWrapper.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component } from 'react';
 import { OUIAProps } from '@patternfly/react-core/dist/esm/helpers/OUIA/ouia';
 import { debounce, canUseDOM } from '@patternfly/react-core/dist/esm/helpers/util';
 import { Tr } from './Tr';
@@ -26,7 +26,7 @@ export interface RowWrapperProps extends OUIAProps {
   ouiaId?: number | string;
 }
 
-class RowWrapper extends React.Component<RowWrapperProps> {
+class RowWrapper extends Component<RowWrapperProps> {
   static displayName = 'RowWrapper';
   static defaultProps = {
     className: '' as string,

package/src/components/Table/SelectColumn.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { createRef, Fragment } from 'react';
 import { Tooltip, TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
 
 export enum RowSelectVariant {
@@ -28,15 +28,15 @@ export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
   tooltipProps,
   ...props
 }: SelectColumnProps) => {
-  const inputRef = React.createRef<HTMLInputElement>();
+  const inputRef = createRef<HTMLInputElement>();
 
   const content = (
-    <React.Fragment>
+    <Fragment>
       <label>
         <input {...props} ref={inputRef} type={selectVariant} onChange={onSelect} />
       </label>
       {children}
-    </React.Fragment>
+    </Fragment>
   );
 
   return tooltip ? (

package/src/components/Table/SortColumn.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState } from 'react';
 import LongArrowAltUpIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-up-icon';
 import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';
 import ArrowsAltVIcon from '@patternfly/react-icons/dist/esm/icons/arrows-alt-v-icon';
@@ -42,7 +42,7 @@ export const SortColumn: React.FunctionComponent<SortColumnProps> = ({
   ...props
 }: SortColumnProps) => {
   let SortedByIcon;
-  const [focused, setFocused] = React.useState(false);
+  const [focused, setFocused] = useState(false);
   if (isSortedBy) {
     SortedByIcon = sortDirection === SortByDirection.asc ? LongArrowAltUpIcon : LongArrowAltDownIcon;
   } else {

package/src/components/Table/Table.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { createContext, forwardRef, useEffect, useRef, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import stylesGrid from '@patternfly/react-styles/css/components/Table/table-grid';
 import stylesTreeView from '@patternfly/react-styles/css/components/Table/table-tree-view';
@@ -75,7 +75,7 @@ interface TableContextProps {
   registerSelectableRow?: () => void;
 }
 
-export const TableContext = React.createContext<TableContextProps>({
+export const TableContext = createContext<TableContextProps>({
   registerSelectableRow: () => {}
 });
 
@@ -101,13 +101,13 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   selectableRowCaptionText,
   ...props
 }: TableProps) => {
-  const ref = React.useRef(null);
+  const ref = useRef(null);
   const tableRef = innerRef || ref;
 
-  const [hasSelectableRows, setHasSelectableRows] = React.useState(false);
-  const [tableCaption, setTableCaption] = React.useState<JSX.Element | undefined>();
+  const [hasSelectableRows, setHasSelectableRows] = useState(false);
+  const [tableCaption, setTableCaption] = useState<React.JSX.Element | undefined>();
 
-  React.useEffect(() => {
+  useEffect(() => {
     document.addEventListener('keydown', handleKeys);
 
     // sets up roving tab-index to tree tables only
@@ -121,7 +121,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
     };
   }, [tableRef, tableRef.current]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (selectableRowCaptionText) {
       setTableCaption(
         <caption>
@@ -226,7 +226,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   );
 };
 
-export const Table = React.forwardRef((props: TableProps, ref: React.Ref<HTMLTableElement>) => (
+export const Table = forwardRef((props: TableProps, ref: React.Ref<HTMLTableElement>) => (
   <TableBase {...props} innerRef={ref as React.MutableRefObject<any>} />
 ));
 Table.displayName = 'Table';

package/src/components/Table/TableText.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { createRef, useEffect, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import { css } from '@patternfly/react-styles';
 import { Tooltip, TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
@@ -33,7 +33,7 @@ export interface TableTextProps extends React.HTMLProps<HTMLDivElement> {
   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 */
+  /** Determines if tooltip should have normal visibility behavior. If false, the tooltip will only be shown when children is not entirely visible */
   tooltipHasDefaultBehavior?: boolean;
 }
 
@@ -50,9 +50,9 @@ export const TableText: React.FunctionComponent<TableTextProps> = ({
   ...props
 }: TableTextProps) => {
   const Component: TableTextVariant | 'span' | 'div' = variant;
-  const textRef = React.createRef<HTMLElement>();
+  const textRef = createRef<HTMLElement>();
 
-  const [tooltip, setTooltip] = React.useState(tooltipProp);
+  const [tooltip, setTooltip] = useState(tooltipProp);
   const onMouseEnter = (event: any) => {
     if (event.target.offsetWidth < event.target.scrollWidth) {
       setTooltip(tooltipProp || event.target.innerText);
@@ -81,7 +81,7 @@ export const TableText: React.FunctionComponent<TableTextProps> = ({
     </Component>
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!tooltipHasDefaultBehavior) {
       if (focused) {
         onFocus(textRef.current);

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 * as React from 'react';
 import { CustomActionsToggleProps } from './ActionsColumn';
 import { ButtonProps } from '@patternfly/react-core/dist/esm/components/Button';
 import { TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
@@ -195,7 +194,7 @@ export interface decoratorReturnType {
   scope?: string;
   parentId?: number;
   colSpan?: number;
-  id?: React.ReactText;
+  id?: number | string;
 }
 
 export type ITransform = (label?: IFormatterValueType, extra?: IExtra) => decoratorReturnType;

package/src/components/Table/Tbody.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { forwardRef } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 
@@ -42,7 +42,7 @@ const TbodyBase: React.FunctionComponent<TbodyProps> = ({
   </tbody>
 );
 
-export const Tbody = React.forwardRef((props: TbodyProps, ref: React.Ref<HTMLTableSectionElement>) => (
+export const Tbody = forwardRef((props: TbodyProps, ref: React.Ref<HTMLTableSectionElement>) => (
   <TbodyBase {...props} innerRef={ref} />
 ));
 Tbody.displayName = 'Tbody';

package/src/components/Table/Td.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { createRef, forwardRef, useEffect, useState } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import scrollStyles from '@patternfly/react-styles/css/components/Table/table-scrollable';
@@ -109,9 +109,9 @@ const TdBase: React.FunctionComponent<TdProps> = ({
   stickyRightOffset,
   ...props
 }: TdProps) => {
-  const [showTooltip, setShowTooltip] = React.useState(false);
-  const [truncated, setTruncated] = React.useState(false);
-  const cellRef = innerRef ? innerRef : React.createRef();
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [truncated, setTruncated] = useState(false);
+  const cellRef = innerRef ? innerRef : createRef();
   const onMouseEnter = (event: any) => {
     if (event.target.offsetWidth < event.target.scrollWidth) {
       !showTooltip && setShowTooltip(true);
@@ -261,10 +261,10 @@ const TdBase: React.FunctionComponent<TdProps> = ({
     (className && className.includes(treeViewStyles.tableTreeViewTitleCell)) ||
     (mergedClassName && mergedClassName.includes(treeViewStyles.tableTreeViewTitleCell));
 
-  React.useEffect(() => {
+  useEffect(() => {
     setTruncated(
-      (cellRef as React.RefObject<HTMLElement>).current.offsetWidth <
-        (cellRef as React.RefObject<HTMLElement>).current.scrollWidth
+      (cellRef as React.RefObject<HTMLElement | null>).current.offsetWidth <
+        (cellRef as React.RefObject<HTMLElement | null>).current.scrollWidth
     );
   }, [cellRef]);
 
@@ -319,7 +319,7 @@ const TdBase: React.FunctionComponent<TdProps> = ({
   );
 };
 
-export const Td = React.forwardRef((props: TdProps, ref: React.Ref<HTMLTableDataCellElement>) => (
+export const Td = forwardRef((props: TdProps, ref: React.Ref<HTMLTableDataCellElement>) => (
   <TdBase {...props} innerRef={ref} />
 ));
 Td.displayName = 'Td';

package/src/components/Table/Th.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { createRef, forwardRef, useEffect, useState } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import scrollStyles from '@patternfly/react-styles/css/components/Table/table-scrollable';
@@ -103,9 +103,9 @@ const ThBase: React.FunctionComponent<ThProps> = ({
     );
   }
 
-  const [showTooltip, setShowTooltip] = React.useState(false);
-  const [truncated, setTruncated] = React.useState(false);
-  const cellRef = innerRef ? innerRef : React.createRef();
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [truncated, setTruncated] = useState(false);
+  const cellRef = innerRef ? innerRef : createRef();
   const onMouseEnter = (event: any) => {
     if (event.target.offsetWidth < event.target.scrollWidth) {
       !showTooltip && setShowTooltip(true);
@@ -196,10 +196,10 @@ const ThBase: React.FunctionComponent<ThProps> = ({
     ...mergedProps
   } = merged;
 
-  React.useEffect(() => {
+  useEffect(() => {
     setTruncated(
-      (cellRef as React.RefObject<HTMLElement>).current.offsetWidth <
-        (cellRef as React.RefObject<HTMLElement>).current.scrollWidth
+      (cellRef as React.RefObject<HTMLElement | null>).current.offsetWidth <
+        (cellRef as React.RefObject<HTMLElement | null>).current.scrollWidth
     );
   }, [cellRef]);
 
@@ -258,7 +258,7 @@ const ThBase: React.FunctionComponent<ThProps> = ({
   );
 };
 
-export const Th = React.forwardRef((props: ThProps, ref: React.Ref<HTMLTableHeaderCellElement>) => (
+export const Th = forwardRef((props: ThProps, ref: React.Ref<HTMLTableHeaderCellElement>) => (
   <ThBase {...props} innerRef={ref} />
 ));
 Th.displayName = 'Th';

package/src/components/Table/Thead.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { forwardRef } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 
@@ -37,7 +37,7 @@ const TheadBase: React.FunctionComponent<TheadProps> = ({
   </thead>
 );
 
-export const Thead = React.forwardRef((props: TheadProps, ref: React.Ref<HTMLTableSectionElement>) => (
+export const Thead = forwardRef((props: TheadProps, ref: React.Ref<HTMLTableSectionElement>) => (
   <TheadBase {...props} innerRef={ref} />
 ));
 Thead.displayName = 'Thead';

package/src/components/Table/Tr.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { forwardRef, useContext, useEffect, useState } from 'react';
 import { useOUIAProps, OUIAProps } from '@patternfly/react-core/dist/esm/helpers';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
@@ -63,7 +63,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
   ...props
 }: TrProps) => {
   const ouiaProps = useOUIAProps('TableRow', ouiaId, ouiaSafe);
-  const [computedAriaLabel, setComputedAriaLabel] = React.useState<string | undefined>('');
+  const [computedAriaLabel, setComputedAriaLabel] = useState<string | undefined>('');
 
   let onKeyDown = null;
   if (onRowClick) {
@@ -77,9 +77,9 @@ const TrBase: React.FunctionComponent<TrProps> = ({
 
   const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded);
 
-  const { registerSelectableRow } = React.useContext(TableContext);
+  const { registerSelectableRow } = useContext(TableContext);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isSelectable && !rowIsHidden) {
       setComputedAriaLabel(`${isRowSelected ? 'Row selected' : ''}`);
       registerSelectableRow();
@@ -120,7 +120,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
   );
 };
 
-export const Tr = React.forwardRef((props: TrProps, ref: React.Ref<HTMLTableRowElement>) => (
+export const Tr = forwardRef((props: TrProps, ref: React.Ref<HTMLTableRowElement>) => (
   <TrBase {...props} innerRef={ref} />
 ));
 Tr.displayName = 'Tr';

package/src/components/Table/TreeRowWrapper.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import stylesTreeView from '@patternfly/react-styles/css/components/Table/table-tree-view';

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { RowWrapper, RowWrapperProps } from '../RowWrapper';
 

package/src/components/Table/__tests__/Th.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Th } from '../Th';
 

package/src/components/Table/base/merge-props.ts

@@ -4,7 +4,7 @@
  * Forked from reactabular-table version 8.14.0
  * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src
  */
-import * as React from 'react';
+import { cloneElement } from 'react';
 import mergeWith from 'lodash/mergeWith';
 import { css } from '@patternfly/react-styles';
 
@@ -24,7 +24,7 @@ export function mergeProps(...props: any) {
     if (key === 'children') {
       if (a && b) {
         // compose the two
-        return React.cloneElement(a, {
+        return cloneElement(a, {
           children: b
         });
       }

package/src/components/Table/base/provider.tsx

@@ -4,7 +4,7 @@
  * Forked from reactabular-table version 8.14.0
  * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src
  */
-import * as React from 'react';
+import { Component, createContext, createElement } from 'react';
 import { RenderersTypes, TableDefaults, ColumnsType } from './types';
 
 export interface ProviderProps extends RenderersTypes {
@@ -15,12 +15,12 @@ export interface ProviderProps extends RenderersTypes {
   borders?: boolean;
 }
 
-export const ProviderContext = React.createContext({
+export const ProviderContext = createContext({
   columns: null as ColumnsType,
   renderers: null as RenderersTypes['renderers']
 });
 
-class Provider extends React.Component<ProviderProps, {}> {
+class Provider extends Component<ProviderProps, {}> {
   static displayName = 'Provider';
   static defaultProps = {
     renderers: TableDefaults.renderers
@@ -38,7 +38,7 @@ class Provider extends React.Component<ProviderProps, {}> {
       finalRenderers = components;
     }
 
-    const provider = React.createElement(renderers.table || TableDefaults.renderers.table, props, children);
+    const provider = createElement(renderers.table || TableDefaults.renderers.table, props, children);
     return (
       <ProviderContext.Provider
         value={{

package/src/components/Table/base/types.tsx

@@ -4,8 +4,6 @@
  * Forked from reactabular-table version 8.14.0
  * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src
  */
-
-import * as React from 'react';
 import { ButtonProps } from '@patternfly/react-core/dist/esm/components/Button';
 import { PopoverProps } from '@patternfly/react-core/dist/esm/components/Popover';
 import { SelectProps } from '@patternfly/react-core/dist/esm/components/Select';
@@ -298,7 +296,7 @@ export interface EditableSelectInputProps {
   /** Single select option value for single select menus, or array of select option values for multi select. You can also specify isSelected on the SelectOption */
   selected: any | any[];
   /** Array of react elements to display in the select menu */
-  options: React.ReactElement[];
+  options: React.ReactElement<any>[];
   /** Props to be passed down to the select component */
   editableSelectProps?: SelectProps;
   /** arbitrary data to pass to the internal select component in the editable select input cell */