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

package/src/deprecated/components/Table/Body.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component, Fragment } from 'react';
 import { Body as BaseBody } from './base';
 import { RowType, RowKeyType } from '../../../components/Table/base/types';
 import { IRow, IRowCell, IExtraRowData, isRowExpanded } from '../../../components';
@@ -49,7 +49,7 @@ interface IMappedCell {
   [name: string]: IRowCell;
 }
 
-class ContextBody extends React.Component<TableBodyProps, {}> {
+class ContextBody extends Component<TableBodyProps, {}> {
   onRow = (row: IRow, rowProps: any) => {
     const { onRowClick, onRow } = this.props;
     const extendedRowProps = {
@@ -163,7 +163,7 @@ class ContextBody extends React.Component<TableBodyProps, {}> {
     }
 
     return (
-      <React.Fragment>
+      <Fragment>
         {mappedRows && (
           <BaseBody
             {...props}
@@ -174,7 +174,7 @@ class ContextBody extends React.Component<TableBodyProps, {}> {
             className={className}
           />
         )}
-      </React.Fragment>
+      </Fragment>
     );
   }
 }

package/src/deprecated/components/Table/BodyCell.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState } from 'react';
 import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip';
 import { Bullseye } from '@patternfly/react-core/dist/esm/layouts/Bullseye';
 import { EmptyState } from '@patternfly/react-core/dist/esm/components/EmptyState';
@@ -52,7 +52,7 @@ export const BodyCell: React.FunctionComponent<BodyCellProps> = ({
   /* eslint-enable @typescript-eslint/no-unused-vars */
   ...props
 }: BodyCellProps) => {
-  const [tooltip, setTooltip] = React.useState('');
+  const [tooltip, setTooltip] = useState('');
   const onMouseEnter = (event: any) => {
     if (event.target.offsetWidth < event.target.scrollWidth) {
       if (tooltipProp) {

package/src/deprecated/components/Table/BodyWrapper.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Fragment } from 'react';
 import { IRow, IRowData, IExtraData, IHeaderRow } from '../../../components';
 import { mapOpenedRows } from '../../../components';
 import { Tbody } from '../../../components';
@@ -30,13 +30,13 @@ export const BodyWrapper: React.FunctionComponent<BodyWrapperProps> = ({
 }: BodyWrapperProps) => {
   if (mappedRows && mappedRows.some((row) => row.hasOwnProperty('parent'))) {
     return (
-      <React.Fragment>
+      <Fragment>
         {mapOpenedRows(mappedRows, props.children).map((oneRow, key) => (
           <Tbody {...props} isExpanded={oneRow.isOpen} key={`tbody-${key}`} ref={tbodyRef as React.Ref<any>}>
             {oneRow.rows}
           </Tbody>
         ))}
-      </React.Fragment>
+      </Fragment>
     );
   }
   return <Tbody {...props} ref={tbodyRef as React.Ref<any>} />;

package/src/deprecated/components/Table/Header.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Header } from './base';
 import { IHeaderRow } from '../../../components';
 import { TableContext } from './TableContext';

package/src/deprecated/components/Table/HeaderCell.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Th } from '../../../components';
 
 export interface HeaderCellProps {

package/src/deprecated/components/Table/Table.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component, type JSX } from 'react';
 import { OUIAProps, getDefaultOUIAId } from '@patternfly/react-core/dist/esm/helpers/OUIA/ouia';
 import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import { css } from '@patternfly/react-styles';
@@ -29,8 +29,6 @@ import {
   CustomActionsToggleProps
 } from '../../../components';
 
-import type { JSX } from 'react';
-
 export interface TableProps extends OUIAProps {
   /** Adds an accessible name for the Table */
   'aria-label'?: string;
@@ -133,7 +131,7 @@ export interface TableProps extends OUIAProps {
   ouiaSafe?: boolean;
 }
 
-class Table extends React.Component<TableProps, {}> {
+class Table extends Component<TableProps, {}> {
   static displayName = 'Table';
   static hasWarnBeta = false;
   static defaultProps: Partial<TableProps> = {

package/src/deprecated/components/Table/TableContext.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import { createContext } from 'react';
 import { IHeaderRow, IRow } from '../../../components';
 import { ColumnsType } from '../../../components/Table/base/types';
 
-export const TableContext = React.createContext({
+export const TableContext = createContext({
   headerData: null as ColumnsType,
   headerRows: null as IHeaderRow[],
   rows: [] as (IRow | string[])[]

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

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { render, screen } from '@testing-library/react';
 
 import {

package/src/deprecated/components/Table/base/body-row.tsx

@@ -4,8 +4,8 @@
  * Forked from reactabular-table version 8.14.0
  * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src
  */
+import { Component, createElement } from 'react';
 import isEqual from 'lodash/isEqual';
-import * as React from 'react';
 import {
   createElementType,
   formatterValueType,
@@ -28,7 +28,7 @@ export interface BodyRowProps {
   rowKey: string;
 }
 
-class BodyRow extends React.Component<BodyRowProps, {}> {
+class BodyRow extends Component<BodyRowProps, {}> {
   static displayName = 'BodyRow';
   static defaultProps = {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -54,7 +54,7 @@ class BodyRow extends React.Component<BodyRowProps, {}> {
   render() {
     const { columns, renderers, onRow, rowKey, rowIndex, rowData } = this.props;
 
-    return React.createElement(
+    return createElement(
       renderers.row as createElementType,
       onRow(rowData, { rowIndex, rowKey }),
       (columns as []).map((column: ColumnType, columnIndex: number) => {
@@ -81,7 +81,7 @@ class BodyRow extends React.Component<BodyRowProps, {}> {
           additionalFormaters = rowData[evaluatedProperty].formatters;
         }
 
-        return React.createElement(
+        return createElement(
           renderers.cell as createElementType,
           {
             key: `col-${columnIndex}-row-${rowIndex}`,

package/src/deprecated/components/Table/base/body.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, createElement } from 'react';
 import isEqual from 'lodash/isEqual';
 import {
   RowsType,
@@ -28,7 +28,7 @@ export interface BodyProps {
   className?: string;
 }
 
-class BaseBody extends React.Component<BodyProps, {}> {
+class BaseBody extends Component<BodyProps, {}> {
   static defaultProps = {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onRow: (...args: any) => ({})
@@ -66,7 +66,7 @@ class BaseBody extends React.Component<BodyProps, {}> {
     const { onRow, rows, rowKey, columns, renderers, ...props } = this.props;
     const children = (rows as []).map((rowData: RowType, index: number) => {
       const key = resolveRowKey({ rowData, rowIndex: index, rowKey });
-      return React.createElement(BodyRow, {
+      return createElement(BodyRow, {
         key,
         renderers: renderers.body,
         onRow,
@@ -77,7 +77,7 @@ class BaseBody extends React.Component<BodyProps, {}> {
       });
     });
 
-    return React.createElement(renderers.body.wrapper as createElementType, props, children);
+    return createElement(renderers.body.wrapper as createElementType, props, children);
   }
 }
 

package/src/deprecated/components/Table/base/header-row.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 { createElement } from 'react';
 import {
   createElementType,
   ColumnType,
@@ -30,7 +30,7 @@ export const HeaderRow: React.FunctionComponent<HeaderRowProps> = ({
   renderers,
   onRow = () => ({})
 }: HeaderRowProps) =>
-  React.createElement(
+  createElement(
     renderers.row as createElementType,
     onRow(rowData, { rowIndex }),
     (rowData as []).map((column: ColumnType, columnIndex: number) => {
@@ -107,7 +107,7 @@ export const HeaderRow: React.FunctionComponent<HeaderRowProps> = ({
         cellNode = transformedProps.children || evaluateFormatters(formatters)(label, extraParameters);
       }
 
-      return React.createElement(
+      return createElement(
         renderers.cell as createElementType,
         {
           key: `${columnIndex}-header`,

package/src/deprecated/components/Table/base/header.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, createElement } from 'react';
 import { createElementType, RowsType, ColumnsType, RenderersTypes } from '../../../../components/Table/base/types';
 import { ProviderContext } from '../../../../components/Table/base/provider';
 
@@ -19,17 +19,17 @@ export interface HeaderProps {
   className?: string;
 }
 
-class BaseHeader extends React.Component<HeaderProps, {}> {
+class BaseHeader extends Component<HeaderProps, {}> {
   render() {
     const { children, headerRows, onRow, renderers, columns, ...props } = this.props;
 
     // If headerRows aren't passed, default to bodyColumns as header rows
-    return React.createElement(
+    return createElement(
       renderers.header.wrapper as createElementType,
       props,
       [
         (headerRows || ([columns] as ColumnsType)).map((rowData, rowIndex) =>
-          React.createElement(HeaderRow, {
+          createElement(HeaderRow, {
             key: `${rowIndex}-header-row`,
             renderers: renderers.header,
             onRow,

package/src/deprecated/components/Table/examples/LegacyTableActions.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import React from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   Checkbox,
@@ -50,13 +50,13 @@ export const LegacyTableActions: React.FunctionComponent = () => {
   ];
 
   // This state is just for the ToggleGroup in this example and isn't necessary for Table usage.
-  const [propToUse, setPropToUse] = React.useState<ExampleType>('actions');
+  const [propToUse, setPropToUse] = useState<ExampleType>('actions');
   const onPropToUseChange: ToggleGroupItemProps['onChange'] = (event, _isSelected) => {
     const id = event.currentTarget.id;
     setPropToUse(id as ExampleType);
   };
 
-  const [useCustomToggle, setUseCustomToggle] = React.useState(false);
+  const [useCustomToggle, setUseCustomToggle] = useState(false);
 
   const customActionsToggle = (props: CustomActionsToggleProps) => (
     <MenuToggle ref={props.toggleRef} onClick={props.onToggle} isDisabled={props.isDisabled}>
@@ -154,7 +154,7 @@ export const LegacyTableActions: React.FunctionComponent = () => {
   };
 
   return (
-    <React.Fragment>
+    <Fragment>
       <Toolbar>
         <ToolbarContent>
           <ToolbarItem>
@@ -199,6 +199,6 @@ export const LegacyTableActions: React.FunctionComponent = () => {
         <TableHeader />
         <TableBody />
       </Table>
-    </React.Fragment>
+    </Fragment>
   );
 };

package/src/deprecated/components/Table/examples/LegacyTableBasic.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment, useState } from 'react';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps } from '@patternfly/react-core';
 interface Repository {
@@ -38,7 +38,7 @@ export const LegacyTableBasic: React.FunctionComponent = () => {
   ];
 
   // This state is just for the ToggleGroup in this example and isn't necessary for table usage.
-  const [exampleChoice, setExampleChoice] = React.useState<ExampleType>('default');
+  const [exampleChoice, setExampleChoice] = useState<ExampleType>('default');
   const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (event, _isSelected) => {
     const id = event.currentTarget.id;
     setExampleChoice(id as ExampleType);
@@ -54,7 +54,7 @@ export const LegacyTableBasic: React.FunctionComponent = () => {
   ]);
 
   return (
-    <React.Fragment>
+    <Fragment>
       <ToggleGroup aria-label="Default with single selectable">
         <ToggleGroupItem
           text="Default"
@@ -85,6 +85,6 @@ export const LegacyTableBasic: React.FunctionComponent = () => {
         <TableHeader />
         <TableBody />
       </Table>
-    </React.Fragment>
+    </Fragment>
   );
 };

package/src/deprecated/components/Table/examples/LegacyTableCellWidth.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { classNames, cellWidth, Visibility } from '@patternfly/react-table';
 

package/src/deprecated/components/Table/examples/LegacyTableClickable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { info, textCenter, ICell } from '@patternfly/react-table';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import styles from '@patternfly/react-styles/css/components/Table/table';
@@ -33,7 +33,7 @@ export const LegacyTableClickable: React.FunctionComponent = () => {
 
   // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier.
   // This is to prevent state from being based on row order index in case we later add sorting.
-  const [selectedRepoName, setSelectedRepoName] = React.useState('');
+  const [selectedRepoName, setSelectedRepoName] = useState('');
   const columns: TableProps['cells'] = [
     {
       title: 'Repositories',

package/src/deprecated/components/Table/examples/LegacyTableCompoundExpandable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment, useState } from 'react';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { compoundExpand } from '@patternfly/react-table';
 
@@ -27,7 +27,7 @@ export const LegacyTableCompoundExpandable: React.FunctionComponent = () => {
   // Note that these columnKeys must be in the same order as the `columns` below, because columnIndex will be used to look up the matching key.
   type ColumnKey = 'name' | 'branches' | 'prs' | 'workspaces' | 'lastCommit'; // For typechecking
   const columnKeys: ColumnKey[] = ['name', 'branches', 'prs', 'workspaces', 'lastCommit']; // For indexed order
-  const [expandedCells, setExpandedCells] = React.useState<Record<string, ColumnKey>>({
+  const [expandedCells, setExpandedCells] = useState<Record<string, ColumnKey>>({
     'siemur/test-space': 'branches' // Default to the first cell of the first row being expanded
   });
   const setCellExpanded = (repo: Repository, columnKey: ColumnKey, isExpanding = true) => {
@@ -75,9 +75,9 @@ export const LegacyTableCompoundExpandable: React.FunctionComponent = () => {
         { title: <a href="#">{repo.name}</a>, props: { component: 'th' } },
         {
           title: (
-            <React.Fragment>
+            <Fragment>
               <CodeBranchIcon key="icon" /> {repo.branches}
-            </React.Fragment>
+            </Fragment>
           ),
           props: {
             isOpen: expandedCellKey === 'branches',
@@ -86,9 +86,9 @@ export const LegacyTableCompoundExpandable: React.FunctionComponent = () => {
         },
         {
           title: (
-            <React.Fragment>
+            <Fragment>
               <CodeIcon key="icon" /> {repo.prs}
-            </React.Fragment>
+            </Fragment>
           ),
           props: {
             isOpen: expandedCellKey === 'prs',
@@ -97,9 +97,9 @@ export const LegacyTableCompoundExpandable: React.FunctionComponent = () => {
         },
         {
           title: (
-            <React.Fragment>
+            <Fragment>
               <CubeIcon key="icon" /> {repo.branches}
-            </React.Fragment>
+            </Fragment>
           ),
           props: {
             isOpen: expandedCellKey === 'workspaces',

package/src/deprecated/components/Table/examples/LegacyTableControllingText.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { cellWidth, truncate, breakWord, wrappable, fitContent, nowrap } from '@patternfly/react-table';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 

package/src/deprecated/components/Table/examples/LegacyTableEmptyState.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import {
   Bullseye,

package/src/deprecated/components/Table/examples/LegacyTableExpandable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment, useState } from 'react';
 import { TableVariant, expandable, IRowCell } from '@patternfly/react-table';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { Checkbox } from '@patternfly/react-core';
@@ -78,7 +78,7 @@ export const LegacyTableExpandable: React.FunctionComponent = () => {
   // This is to prevent state from being based on row order index in case we later add sorting.
   // Note that this behavior is very similar to selection state.
   const initialExpandedRepoNames = repositories.filter((repo) => !!repo.details).map((repo) => repo.name); // Default to all expanded
-  const [expandedRepoNames, setExpandedRepoNames] = React.useState<string[]>(initialExpandedRepoNames);
+  const [expandedRepoNames, setExpandedRepoNames] = useState<string[]>(initialExpandedRepoNames);
   const setRepoExpanded = (repo: Repository, isExpanding = true) =>
     setExpandedRepoNames((prevExpanded) => {
       const otherExpandedRepoNames = prevExpanded.filter((r) => r !== repo.name);
@@ -86,7 +86,7 @@ export const LegacyTableExpandable: React.FunctionComponent = () => {
     });
   const isRepoExpanded = (repo: Repository) => expandedRepoNames.includes(repo.name);
 
-  const [isExampleCompact, setIsExampleCompact] = React.useState(true);
+  const [isExampleCompact, setIsExampleCompact] = useState(true);
 
   // We want to be able to reference the original data object based on row index. But because an expanded
   // row takes up two row indexes, repositories[rowIndex] will not be accurate like it would in a normal table.
@@ -145,7 +145,7 @@ export const LegacyTableExpandable: React.FunctionComponent = () => {
   });
 
   return (
-    <React.Fragment>
+    <Fragment>
       <Checkbox
         label="Compact"
         isChecked={isExampleCompact}
@@ -170,6 +170,6 @@ export const LegacyTableExpandable: React.FunctionComponent = () => {
         <TableHeader />
         <TableBody />
       </Table>
-    </React.Fragment>
+    </Fragment>
   );
 };

package/src/deprecated/components/Table/examples/LegacyTableFavoritable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useCallback, useState } from 'react';
 import { sortable } from '@patternfly/react-table';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { Checkbox } from '@patternfly/react-core';
@@ -22,13 +22,13 @@ export const LegacyTableFavoritable: React.FunctionComponent = () => {
   // Index of the currently sorted column
   // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key
   // as the identifier of the sorted column. See the "Compound expandable" example.
-  const [activeSortIndex, setActiveSortIndex] = React.useState<number | null>(null);
+  const [activeSortIndex, setActiveSortIndex] = useState<number | null>(null);
 
   // Sort direction of the currently sorted column
-  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
+  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | null>(null);
 
   // Favorite state is similar to selection state. See selectedRepoNames and associated code below.
-  const [favoriteRepoNames, setFavoriteRepoNames] = React.useState<string[]>([]);
+  const [favoriteRepoNames, setFavoriteRepoNames] = useState<string[]>([]);
   const setRepoFavorited = (repo: Repository, isFavoriting = true) =>
     setFavoriteRepoNames((prevFavorites) => {
       const otherFavorites = prevFavorites.filter((r) => r !== repo.name);
@@ -39,7 +39,7 @@ export const LegacyTableFavoritable: React.FunctionComponent = () => {
   // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.
   // Note: We also memoize the sortable values with useCallback to prevent rows jumping around when you change
   // the favorites while sorting on that column. Only updating the sort state will reorder the rows.
-  const getSortableRowValues = React.useCallback(
+  const getSortableRowValues = useCallback(
     (repo: Repository): (boolean | string | number)[] => {
       const { name, branches, prs, workspaces, lastCommit } = repo;
       // Blank value for first column (select checkboxes)
@@ -76,7 +76,7 @@ export const LegacyTableFavoritable: React.FunctionComponent = () => {
 
   // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier.
   // This is to prevent state from being based on row order index in case we later add sorting.
-  const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
+  const [selectedRepoNames, setSelectedRepoNames] = useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
     setSelectedRepoNames((prevSelected) => {
       const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
@@ -109,7 +109,7 @@ export const LegacyTableFavoritable: React.FunctionComponent = () => {
     };
   });
 
-  const [canSortFavorites, setCanSortFavorites] = React.useState(true);
+  const [canSortFavorites, setCanSortFavorites] = useState(true);
 
   return (
     <div>

package/src/deprecated/components/Table/examples/LegacyTableMisc.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { css } from '@patternfly/react-styles';
 /* eslint-disable camelcase */

package/src/deprecated/components/Table/examples/LegacyTableSelectable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useEffect, useState } from 'react';
 import { headerCol } from '@patternfly/react-table';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { Checkbox } from '@patternfly/react-core';
@@ -28,7 +28,7 @@ export const LegacyTableSelectable: React.FunctionComponent = () => {
 
   // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier.
   // This is to prevent state from being based on row order index in case we later add sorting.
-  const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
+  const [selectedRepoNames, setSelectedRepoNames] = useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
     setSelectedRepoNames((prevSelected) => {
       const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
@@ -38,11 +38,11 @@ export const LegacyTableSelectable: React.FunctionComponent = () => {
     setSelectedRepoNames(isSelecting ? selectableRepos.map((r) => r.name) : []);
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
 
-  const [canSelectAll, setCanSelectAll] = React.useState(true);
+  const [canSelectAll, setCanSelectAll] = useState(true);
 
   // To allow shift+click to select/deselect multiple rows
-  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState<number | null>(null);
-  const [shifting, setShifting] = React.useState(false);
+  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState<number | null>(null);
+  const [shifting, setShifting] = useState(false);
 
   const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => {
     // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected
@@ -59,7 +59,7 @@ export const LegacyTableSelectable: React.FunctionComponent = () => {
     setRecentSelectedRowIndex(rowIndex);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Shift') {
         setShifting(true);

package/src/deprecated/components/Table/examples/LegacyTableSelectableRadio.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { headerCol } from '@patternfly/react-table';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 
@@ -22,7 +22,7 @@ export const LegacyTableSelectableRadio: React.FunctionComponent = () => {
 
   // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier.
   // This is to prevent state from being based on row order index in case we later add sorting.
-  const [selectedRepoName, setSelectedRepoName] = React.useState<string | null>(null);
+  const [selectedRepoName, setSelectedRepoName] = useState<string | null>(null);
 
   const columns: TableProps['cells'] = [
     { title: 'Repositories', cellTransforms: [headerCol('selectable-radio')] },

package/src/deprecated/components/Table/examples/LegacyTableSortable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { sortable, info, cellWidth, wrappable } from '@patternfly/react-table';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 
@@ -21,10 +21,10 @@ export const LegacyTableSortable: React.FunctionComponent = () => {
   // Index of the currently sorted column
   // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key
   // as the identifier of the sorted column. See the "Compound expandable" example.
-  const [activeSortIndex, setActiveSortIndex] = React.useState<number | null>(null);
+  const [activeSortIndex, setActiveSortIndex] = useState<number | null>(null);
 
   // Sort direction of the currently sorted column
-  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
+  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | null>(null);
 
   // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.
   // This example is trivial since our data objects just contain strings, but if the data was more complex

package/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment, useState } from 'react';
 import { sortable, info } from '@patternfly/react-table';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { Toolbar, ToolbarContent, ToolbarItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
@@ -35,15 +35,15 @@ export const LegacyTableSortableCustom: React.FunctionComponent = () => {
     lastCommit: 'Last commit'
   };
 
-  const [isSortDropdownOpen, setIsSortDropdownOpen] = React.useState(false);
+  const [isSortDropdownOpen, setIsSortDropdownOpen] = useState(false);
 
   // Index of the currently sorted column
   // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key
   // as the identifier of the sorted column. See the "Compound expandable" example.
-  const [activeSortIndex, setActiveSortIndex] = React.useState<number | null>(null);
+  const [activeSortIndex, setActiveSortIndex] = useState<number | null>(null);
 
   // Sort direction of the currently sorted column
-  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
+  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | null>(null);
 
   // Sort dropdown expansion
   // const [isSortDropdownOpen, setIsSortDropdownOpen] = React.useState(false);
@@ -114,7 +114,7 @@ export const LegacyTableSortableCustom: React.FunctionComponent = () => {
   ]);
 
   return (
-    <React.Fragment>
+    <Fragment>
       <Toolbar id="toolbar">
         <ToolbarContent>
           <ToolbarItem>
@@ -180,6 +180,6 @@ export const LegacyTableSortableCustom: React.FunctionComponent = () => {
         <TableHeader />
         <TableBody />
       </Table>
-    </React.Fragment>
+    </Fragment>
   );
 };

package/src/deprecated/components/Table/examples/LegacyTableStriped.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 interface Repository {
   name: string;

package/src/deprecated/components/Table/examples/LegacyTableStripedCustomTr.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { css } from '@patternfly/react-styles';