@patternfly/react-table 6.2.0-prerelease.31 → 6.2.0-prerelease.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.2.0-prerelease.31",
+  "version": "6.2.0-prerelease.33",
   "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.30",
-    "@patternfly/react-icons": "^6.2.0-prerelease.10",
-    "@patternfly/react-styles": "^6.2.0-prerelease.9",
-    "@patternfly/react-tokens": "^6.2.0-prerelease.9",
+    "@patternfly/react-core": "^6.2.0-prerelease.32",
+    "@patternfly/react-icons": "^6.2.0-prerelease.11",
+    "@patternfly/react-styles": "^6.2.0-prerelease.10",
+    "@patternfly/react-tokens": "^6.2.0-prerelease.10",
     "lodash": "^4.17.21",
     "tslib": "^2.8.1"
   },
@@ -51,5 +51,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "eeb1714d0bfab0124d295757127202c8c1b06f2e"
+  "gitHead": "dd8e4d8000ae6c32f35246929b9054bd5b4bee5b"
 }

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,7 +88,7 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
               {title}
             </Button>
           ) : (
-            React.cloneElement(title as React.ReactElement<any>, { onClick, isDisabled, ...props })
+            cloneElement(title as React.ReactElement<any>, { onClick, isDisabled, ...props })
           )
         )}
       <Dropdown
@@ -150,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';
@@ -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, type JSX } 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';
@@ -10,8 +10,6 @@ import { KeyTypes } from '@patternfly/react-core/dist/esm/helpers/constants';
 import { useOUIAProps, OUIAProps } from '@patternfly/react-core/dist/esm/helpers/OUIA/ouia';
 import { TableGridBreakpoint, TableVariant } from './TableTypes';
 
-import type { JSX } from 'react';
-
 export interface BaseCellProps {
   /** Content rendered inside the cell */
   children?: React.ReactNode;
@@ -77,7 +75,7 @@ interface TableContextProps {
   registerSelectableRow?: () => void;
 }
 
-export const TableContext = React.createContext<TableContextProps>({
+export const TableContext = createContext<TableContextProps>({
   registerSelectableRow: () => {}
 });
 
@@ -103,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<JSX.Element | undefined>();
 
-  React.useEffect(() => {
+  useEffect(() => {
     document.addEventListener('keydown', handleKeys);
 
     // sets up roving tab-index to tree tables only
@@ -123,7 +121,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
     };
   }, [tableRef, tableRef.current]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (selectableRowCaptionText) {
       setTableCaption(
         <caption>
@@ -228,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';

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,7 +261,7 @@ const TdBase: React.FunctionComponent<TdProps> = ({
     (className && className.includes(treeViewStyles.tableTreeViewTitleCell)) ||
     (mergedClassName && mergedClassName.includes(treeViewStyles.tableTreeViewTitleCell));
 
-  React.useEffect(() => {
+  useEffect(() => {
     setTruncated(
       (cellRef as React.RefObject<HTMLElement | null>).current.offsetWidth <
         (cellRef as React.RefObject<HTMLElement | null>).current.scrollWidth
@@ -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,7 +196,7 @@ const ThBase: React.FunctionComponent<ThProps> = ({
     ...mergedProps
   } = merged;
 
-  React.useEffect(() => {
+  useEffect(() => {
     setTruncated(
       (cellRef as React.RefObject<HTMLElement | null>).current.offsetWidth <
         (cellRef as React.RefObject<HTMLElement | null>).current.scrollWidth
@@ -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';

package/src/components/Table/examples/Table.md

@@ -41,6 +41,7 @@ The `Table` component takes an explicit and declarative approach, and its implem
 
 The documentation for the deprecated table implementation can be found under the [React deprecated](/components/table/react-deprecated) tab. It is configuration based and takes a less declarative and more implicit approach to laying out the table structure, such as the rows and cells within it.
 
+import { Fragment, isValidElement, useCallback, useEffect, useRef, useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -189,7 +190,7 @@ If actions menus are getting clipped by other items on the page, such as sticky
 
 ### Actions Overflow
 
-Useing an `OverflowMenu` in the actions column, allowing the actions to condense into a dropdown if necessary for space.
+Using an `OverflowMenu` in the actions column, allowing the actions to condense into a dropdown if necessary for space.
 
 ```ts file="TableActionsOverflow.tsx"