From 0ff152febba0d8aa5dc63a6e0bd55fa5bcc84751 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 2 Jun 2025 12:41:54 -0400 Subject: [PATCH 1/2] feat(ver): enable react 19 support --- .eslintrc.json | 1 + package-lock.json | 13 +++++----- packages/module/package.json | 4 ++-- .../DataView/AbstractLayoutExample.tsx | 6 ++--- .../data-view/examples/DataView/DataView.md | 2 +- .../examples/DataView/EventsExample.tsx | 8 +++---- .../DataView/PredefinedLayoutFullExample.tsx | 8 +++---- .../Table/DataViewTableEmptyExample.tsx | 14 +++++------ .../Table/DataViewTableErrorExample.tsx | 4 ++-- .../examples/Table/DataViewTableExample.tsx | 4 ++-- .../Table/DataViewTableLoadingExample.tsx | 10 ++++---- .../Table/DataViewTableTreeExample.tsx | 4 ++-- .../examples/Table/SortingExample.tsx | 6 ++--- .../data-view/examples/Table/Table.md | 2 +- .../module/src/DataView/DataView.test.tsx | 18 +++++++------- packages/module/src/DataView/DataView.tsx | 8 +++---- .../DataViewCheckboxFilter.test.tsx | 1 - .../DataViewCheckboxFilter.tsx | 20 ++++++++-------- .../DataViewEventsContext.test.tsx | 8 +++---- .../DataViewEventsContext.tsx | 2 +- .../DataViewFilters/DataViewFilters.test.tsx | 19 ++++++++------- .../src/DataViewFilters/DataViewFilters.tsx | 24 +++++++++---------- .../src/DataViewTable/DataViewTable.test.tsx | 1 - .../src/DataViewTable/DataViewTable.tsx | 4 ++-- .../DataViewTableBasic.test.tsx | 1 - .../DataViewTableBasic/DataViewTableBasic.tsx | 4 ++-- .../DataViewTableHead.test.tsx | 1 - .../DataViewTableHead/DataViewTableHead.tsx | 4 ++-- .../DataViewTableTree.test.tsx | 1 - .../DataViewTableTree/DataViewTableTree.tsx | 10 ++++---- .../DataViewTextFilter.test.tsx | 1 - .../DataViewTextFilter/DataViewTextFilter.tsx | 4 ++-- .../DataViewToolbar/DataViewToolbar.test.tsx | 1 - .../src/DataViewToolbar/DataViewToolbar.tsx | 4 ++-- .../InternalContext/InternalContext.test.tsx | 1 - .../src/InternalContext/InternalContext.tsx | 4 ++-- packages/module/tsconfig.json | 2 +- tsconfig.json | 2 +- 38 files changed, 113 insertions(+), 118 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index d96089ba..47d1f488 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -9,6 +9,7 @@ "plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:@typescript-eslint/recommended", + "plugin:react/jsx-runtime", "prettier" ], "overrides": [ diff --git a/package-lock.json b/package-lock.json index 2a06bcbe..f2374913 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5580,7 +5580,6 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz", "integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==", "dev": true, - "license": "MIT", "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -28779,8 +28778,8 @@ "@patternfly/patternfly": "^6.0.0", "@patternfly/patternfly-a11y": "^5.1.0", "@patternfly/react-code-editor": "^6.0.0", - "@types/react": "^18.3.23", - "@types/react-dom": "^18.3.7", + "@types/react": "^18.3.21", + "@types/react-dom": "^18.3.5", "@types/react-router-dom": "^5.3.3", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -28790,8 +28789,8 @@ "typescript": "^5.8.3" }, "peerDependencies": { - "react": "^17 || ^18", - "react-dom": "^17 || ^18" + "react": "^17 || ^18 || ^19", + "react-dom": "^17 || ^18 || ^19" } } }, @@ -31686,8 +31685,8 @@ "@patternfly/react-core": "^6.0.0", "@patternfly/react-icons": "^6.0.0", "@patternfly/react-table": "^6.0.0", - "@types/react": "^18.3.23", - "@types/react-dom": "^18.3.7", + "@types/react": "^18.3.21", + "@types/react-dom": "^18.3.5", "@types/react-router-dom": "^5.3.3", "clsx": "^2.1.1", "react": "^18.3.1", diff --git a/packages/module/package.json b/packages/module/package.json index 29bea33d..70854626 100644 --- a/packages/module/package.json +++ b/packages/module/package.json @@ -39,8 +39,8 @@ "react-jss": "^10.10.0" }, "peerDependencies": { - "react": "^17 || ^18", - "react-dom": "^17 || ^18" + "react": "^17 || ^18 || ^19", + "react-dom": "^17 || ^18 || ^19" }, "devDependencies": { "@patternfly/documentation-framework": "^6.5.20", diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/AbstractLayoutExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/AbstractLayoutExample.tsx index eb0a3f86..90a1e5c1 100644 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/AbstractLayoutExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/AbstractLayoutExample.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import DataView from '@patternfly/react-data-view/dist/dynamic/DataView'; const layoutItemStyling = { @@ -8,10 +8,10 @@ const layoutItemStyling = { border: 'var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default)' }; -export const BasicExample: React.FunctionComponent = () => ( +export const BasicExample: FunctionComponent = () => (
Header
Data representation
Footer
 -) +); diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md index 1642e572..4a3b4fd4 100644 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md @@ -7,7 +7,7 @@ propComponents: ['DataView'] sortValue: 1 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md --- -import { useState, useEffect, useRef, useMemo } from 'react'; +import { FunctionComponent, useState, useEffect, useRef, useMemo } from 'react'; import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core'; import { CubesIcon } from '@patternfly/react-icons'; import { useDataViewPagination, useDataViewSelection, useDataViewFilters, useDataViewSort } from '@patternfly/react-data-view/dist/dynamic/Hooks'; diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/EventsExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/EventsExample.tsx index 1447e003..b4563238 100644 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/EventsExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/EventsExample.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState, useRef, useMemo } from 'react'; +import { FunctionComponent, useEffect, useState, useRef, useMemo } from 'react'; import { Drawer, DrawerActions, DrawerCloseButton, DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, Title, Content } from '@patternfly/react-core'; import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView'; import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable'; @@ -32,7 +32,7 @@ interface RepositoryDetailProps { setSelectedRepo: React.Dispatch>; } -const RepositoryDetail: React.FunctionComponent = ({ selectedRepo, setSelectedRepo }) => { +const RepositoryDetail: FunctionComponent = ({ selectedRepo, setSelectedRepo }) => { const context = useDataViewEventsContext(); useEffect(() => { @@ -84,7 +84,7 @@ const rowActions = [ } ]; -const RepositoriesTable: React.FunctionComponent = ({ selectedRepo = undefined }) => { +const RepositoriesTable: FunctionComponent = ({ selectedRepo = undefined }) => { const selection = useDataViewSelection({ matchOption: (a, b) => a.row[0] === b.row[0] }); const { trigger } = useDataViewEventsContext(); const rows = useMemo(() => { @@ -110,7 +110,7 @@ const RepositoriesTable: React.FunctionComponent = ({ se ); }; -export const BasicExample: React.FunctionComponent = () => { +export const BasicExample: FunctionComponent = () => { const [ selectedRepo, setSelectedRepo ] = useState(); const drawerRef = useRef(null); diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/PredefinedLayoutFullExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/PredefinedLayoutFullExample.tsx index a649bc71..58f239d9 100644 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/PredefinedLayoutFullExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/PredefinedLayoutFullExample.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-nested-ternary */ -import React, { useEffect, useState, useRef, useMemo } from 'react'; +import { FunctionComponent, useEffect, useState, useRef, useMemo } from 'react'; import { Drawer, DrawerActions, DrawerCloseButton, DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, Title, Content, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions, Button, } from '@patternfly/react-core'; import { ActionsColumn, Tbody, Td, ThProps, Tr } from '@patternfly/react-table'; import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect'; @@ -94,7 +94,7 @@ interface RepositoryDetailProps { setSelectedRepo: React.Dispatch>; } -const RepositoryDetail: React.FunctionComponent = ({ selectedRepo, setSelectedRepo }) => { +const RepositoryDetail: FunctionComponent = ({ selectedRepo, setSelectedRepo }) => { const context = useDataViewEventsContext(); useEffect(() => { @@ -146,7 +146,7 @@ const rowActions = [ } ]; -const RepositoriesTable: React.FunctionComponent = ({ selectedRepo = undefined }) => { +const RepositoriesTable: FunctionComponent = ({ selectedRepo = undefined }) => { const { filters, onSetFilters, clearAllFilters } = useDataViewFilters({ initialFilters: { name: '', branch: '', workspace: [] } }); const pagination = useDataViewPagination({ perPage: 5 }); @@ -255,7 +255,7 @@ const RepositoriesTable: React.FunctionComponent = ({ se ); }; -export const BasicExample: React.FunctionComponent = () => { +export const BasicExample: FunctionComponent = () => { const [ selectedRepo, setSelectedRepo ] = useState(); const drawerRef = useRef(null); diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableEmptyExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableEmptyExample.tsx index d0b22bd5..4f4d5843 100644 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableEmptyExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableEmptyExample.tsx @@ -1,8 +1,8 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView'; import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable'; import { CubesIcon } from '@patternfly/react-icons'; -import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter, } from '@patternfly/react-core'; +import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter } from '@patternfly/react-core'; import { Tbody, Td, Tr } from '@patternfly/react-table'; interface Repository { @@ -19,7 +19,7 @@ const repositories: Repository[] = []; // you can also pass props to Tr by returning { row: DataViewTd[], props: TrProps } } const rows: DataViewTr[] = repositories.map((repository) => Object.values(repository)); -const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ]; +const columns: DataViewTh[] = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; const ouiaId = 'TableExample'; @@ -27,7 +27,7 @@ const empty = ( - + There are no matching data to be displayed. @@ -44,10 +44,10 @@ const empty = ( ); -export const BasicExample: React.FunctionComponent = () => ( +export const BasicExample: FunctionComponent = () => ( - ); -export const BasicExample: React.FunctionComponent = () => ( +export const BasicExample: FunctionComponent = () => ( ( +export const BasicExample: FunctionComponent = () => ( ); diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableLoadingExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableLoadingExample.tsx index 55817dfc..38828514 100644 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableLoadingExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableLoadingExample.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView'; import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable'; import { SkeletonTableBody, SkeletonTableHead } from '@patternfly/react-component-groups'; @@ -6,17 +6,17 @@ import { SkeletonTableBody, SkeletonTableHead } from '@patternfly/react-componen // you can also pass props to Tr by returning { row: DataViewTd[], props: TrProps } } const rows: DataViewTr[] = []; -const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ]; +const columns: DataViewTh[] = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; const ouiaId = 'TableExample'; -const headLoading = +const headLoading = ; const bodyLoading = ; -export const BasicExample: React.FunctionComponent = () => ( +export const BasicExample: FunctionComponent = () => ( { +export const BasicExample: FunctionComponent = () => { const selection = useDataViewSelection({ matchOption: (a, b) => a.id === b.id }); return ( diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/SortingExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/SortingExample.tsx index 879f1cd7..3872a811 100644 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/SortingExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/SortingExample.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-nested-ternary */ -import React, { useMemo } from 'react'; +import { FunctionComponent, useMemo } from 'react'; import { useDataViewSort } from '@patternfly/react-data-view/dist/dynamic/Hooks'; import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable'; import { ThProps } from '@patternfly/react-table'; @@ -41,7 +41,7 @@ const sortData = (data: Repository[], sortBy: string | undefined, direction: 'as const ouiaId = 'TableExample'; -export const MyTable: React.FunctionComponent = () => { +export const MyTable: FunctionComponent = () => { const [ searchParams, setSearchParams ] = useSearchParams(); const { sortBy, direction, onSort } = useDataViewSort({ searchParams, setSearchParams }); const sortByIndex = useMemo(() => COLUMNS.findIndex(item => item.key === sortBy), [ sortBy ]); @@ -79,7 +79,7 @@ export const MyTable: React.FunctionComponent = () => { ); }; -export const BasicExample: React.FunctionComponent = () => ( +export const BasicExample: FunctionComponent = () => ( diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md b/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md index 19254f94..513846ac 100644 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md @@ -15,7 +15,7 @@ sortValue: 3 propComponents: ['DataViewTableBasic', 'DataViewTableTree', 'DataViewTrTree', 'DataViewTrObject'] sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md --- -import { useMemo } from 'react'; +import { FunctionComponent, useMemo } from 'react'; import { BrowserRouter, useSearchParams } from 'react-router-dom'; import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter } from '@patternfly/react-core'; import { CubesIcon, FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons'; diff --git a/packages/module/src/DataView/DataView.test.tsx b/packages/module/src/DataView/DataView.test.tsx index 5a0a1f02..41b01005 100644 --- a/packages/module/src/DataView/DataView.test.tsx +++ b/packages/module/src/DataView/DataView.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import DataView from './DataView'; @@ -11,11 +10,14 @@ const layoutItemStyling = { describe('DataView component', () => { test('should render correctly', () => { - expect(render( - -
Header
-
Data representation
-
Footer
- )).toMatchSnapshot(); + expect( + render( + +
Header
+
Data representation
+
Footer
+ + ) + ).toMatchSnapshot(); }); -}); \ No newline at end of file +}); diff --git a/packages/module/src/DataView/DataView.tsx b/packages/module/src/DataView/DataView.tsx index 201a586e..80561b14 100644 --- a/packages/module/src/DataView/DataView.tsx +++ b/packages/module/src/DataView/DataView.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { FC, Children } from 'react'; import { Stack, StackItem, StackProps } from '@patternfly/react-core'; import { DataViewSelection, InternalContextProvider } from '../InternalContext'; @@ -24,11 +24,11 @@ export interface DataViewProps extends StackProps { export type DataViewImpementationProps = Omit; -const DataViewImplementation: React.FC = ({ +const DataViewImplementation: FC = ({ children, ouiaId = 'DataView', ...props }: DataViewImpementationProps) => ( - {React.Children.map(children, (child, index) => ( + {Children.map(children, (child, index) => ( {child} @@ -36,7 +36,7 @@ const DataViewImplementation: React.FC = ({ ) -export const DataView: React.FC = ({ children, selection, activeState, ...props }: DataViewProps) => ( +export const DataView: FC = ({ children, selection, activeState, ...props }: DataViewProps) => ( {children} diff --git a/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx b/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx index 22906514..fb2595c9 100644 --- a/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx +++ b/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import DataViewCheckboxFilter, { DataViewCheckboxFilterProps } from './DataViewCheckboxFilter'; import DataViewToolbar from '../DataViewToolbar'; diff --git a/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx b/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx index e52ff7ea..dcb8d5b8 100644 --- a/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx +++ b/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { FC, useState, useRef, useMemo, useEffect, MouseEvent as ReactMouseEvent } from 'react'; import { Badge, Menu, @@ -48,7 +48,7 @@ export interface DataViewCheckboxFilterProps extends Omit = ({ +export const DataViewCheckboxFilter: FC = ({ filterId, title, value = [], @@ -61,12 +61,12 @@ export const DataViewCheckboxFilter: React.FC = ({ ouiaId = 'DataViewCheckboxFilter', ...props }: DataViewCheckboxFilterProps) => { - const [ isOpen, setIsOpen ] = React.useState(false); - const toggleRef = React.useRef(null); - const menuRef = React.useRef(null); - const containerRef = React.useRef(null); + const [ isOpen, setIsOpen ] = useState(false); + const toggleRef = useRef(null); + const menuRef = useRef(null); + const containerRef = useRef(null); - const normalizeOptions = React.useMemo( + const normalizeOptions = useMemo( () => options.map(option => typeof option === 'string' @@ -76,7 +76,7 @@ export const DataViewCheckboxFilter: React.FC = ({ [ options ] ); - const handleToggleClick = (event: React.MouseEvent) => { + const handleToggleClick = (event: ReactMouseEvent) => { event.stopPropagation(); setTimeout(() => { const firstElement = menuRef.current?.querySelector('li > button:not(:disabled)') as HTMLElement; @@ -85,7 +85,7 @@ export const DataViewCheckboxFilter: React.FC = ({ setIsOpen(prev => !prev); }; - const handleSelect = (event?: React.MouseEvent, itemId?: string | number) => { + const handleSelect = (event?: ReactMouseEvent, itemId?: string | number) => { const activeItem = String(itemId); const isSelected = value.includes(activeItem); @@ -102,7 +102,7 @@ export const DataViewCheckboxFilter: React.FC = ({ && setIsOpen(false); - React.useEffect(() => { + useEffect(() => { window.addEventListener('click', handleClickOutside); return () => { window.removeEventListener('click', handleClickOutside); diff --git a/packages/module/src/DataViewEventsContext/DataViewEventsContext.test.tsx b/packages/module/src/DataViewEventsContext/DataViewEventsContext.test.tsx index 850dac95..501c06dd 100644 --- a/packages/module/src/DataViewEventsContext/DataViewEventsContext.test.tsx +++ b/packages/module/src/DataViewEventsContext/DataViewEventsContext.test.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { useEffect } from 'react'; import { render, fireEvent } from '@testing-library/react'; import { useDataViewEventsContext, DataViewEventsProvider, EventTypes } from './DataViewEventsContext'; @@ -19,7 +19,7 @@ describe('DataViewEventsContext', () => { const TestComponent = () => { const { subscribe, trigger } = useDataViewEventsContext(); - React.useEffect(() => { + useEffect(() => { const unsubscribe = subscribe(EventTypes.rowClick, callback); return () => unsubscribe(); // eslint-disable-next-line react-hooks/exhaustive-deps @@ -46,7 +46,7 @@ describe('DataViewEventsContext', () => { const TestComponent = () => { const { subscribe, trigger } = useDataViewEventsContext(); - React.useEffect(() => { + useEffect(() => { const unsubscribe = subscribe(EventTypes.rowClick, callback); unsubscribe(); // eslint-disable-next-line react-hooks/exhaustive-deps @@ -75,7 +75,7 @@ describe('DataViewEventsContext', () => { const TestComponent = () => { const { subscribe, trigger } = useDataViewEventsContext(); - React.useEffect(() => { + useEffect(() => { const unsubscribe1 = subscribe(EventTypes.rowClick, callback1); const unsubscribe2 = subscribe(EventTypes.rowClick, callback2); diff --git a/packages/module/src/DataViewEventsContext/DataViewEventsContext.tsx b/packages/module/src/DataViewEventsContext/DataViewEventsContext.tsx index 76155053..fbe0df3a 100644 --- a/packages/module/src/DataViewEventsContext/DataViewEventsContext.tsx +++ b/packages/module/src/DataViewEventsContext/DataViewEventsContext.tsx @@ -1,4 +1,4 @@ -import React, { +import { PropsWithChildren, createContext, useCallback, diff --git a/packages/module/src/DataViewFilters/DataViewFilters.test.tsx b/packages/module/src/DataViewFilters/DataViewFilters.test.tsx index cd5bb836..172ab6f6 100644 --- a/packages/module/src/DataViewFilters/DataViewFilters.test.tsx +++ b/packages/module/src/DataViewFilters/DataViewFilters.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render, fireEvent } from '@testing-library/react'; import DataViewFilters from './DataViewFilters'; import DataViewToolbar from '../DataViewToolbar'; @@ -8,14 +7,16 @@ describe('DataViewFilters component', () => { const mockOnChange = jest.fn(); it('should render correctly', () => { - const { container } = render( - - - - } - />); + const { container } = render( + + + + + } + /> + ); expect(container).toMatchSnapshot(); }); diff --git a/packages/module/src/DataViewFilters/DataViewFilters.tsx b/packages/module/src/DataViewFilters/DataViewFilters.tsx index 5a8ce29f..dc0dc218 100644 --- a/packages/module/src/DataViewFilters/DataViewFilters.tsx +++ b/packages/module/src/DataViewFilters/DataViewFilters.tsx @@ -1,4 +1,4 @@ -import React, { useMemo, useState, useRef, useEffect, ReactElement, ReactNode } from 'react'; +import { Children, isValidElement, cloneElement, useMemo, useState, useRef, useEffect, ReactElement, ReactNode } from 'react'; import { Menu, MenuContent, MenuItem, MenuList, MenuToggle, Popper, ToolbarGroup, ToolbarToggleGroup, ToolbarToggleGroupProps, } from '@patternfly/react-core'; @@ -50,14 +50,14 @@ export const DataViewFilters = ({ const attributeContainerRef = useRef(null); const childrenHash = useMemo(() => JSON.stringify( - React.Children.map(children, (child) => - React.isValidElement(child) ? { type: child.type, key: child.key, props: child.props } : child + Children.map(children, (child) => + isValidElement(child) ? { type: child.type, key: child.key, props: child.props } : child ) ), [ children ]); - const filterItems: DataViewFilterIdentifiers[] = useMemo(() => React.Children.toArray(children) + const filterItems: DataViewFilterIdentifiers[] = useMemo(() => Children.toArray(children) .map(child => - React.isValidElement(child) ? { filterId: String(child.props.filterId), title: String(child.props.title) } : undefined + isValidElement(child) ? { filterId: String((child.props as any).filterId), title: String((child.props as any).title) } : undefined ).filter((item): item is DataViewFilterIdentifiers => !!item), [ childrenHash ]); // eslint-disable-line react-hooks/exhaustive-deps useEffect(() => { @@ -122,17 +122,17 @@ export const DataViewFilters = ({ isVisible={isAttributeMenuOpen} /> - {React.Children.map(children, (child) => - React.isValidElement(child) - ? React.cloneElement(child as ReactElement<{ + {Children.map(children, (child) => + isValidElement(child) + ? cloneElement(child as ReactElement<{ showToolbarItem: boolean; onChange: (_e: unknown, values: unknown) => void; value: unknown; }>, { - showToolbarItem: activeAttributeMenu === child.props.title, - onChange: (event, value) => onChange?.(child.props.filterId, { [child.props.filterId]: value } as Partial), - value: values?.[child.props.filterId], - ...child.props + showToolbarItem: activeAttributeMenu === (child.props as any).title, + onChange: (event, value) => onChange?.((child.props as any).filterId, { [(child.props as any).filterId]: value } as Partial), + value: values?.[(child.props as any).filterId], + ...(child.props as any) }) : child )} diff --git a/packages/module/src/DataViewTable/DataViewTable.test.tsx b/packages/module/src/DataViewTable/DataViewTable.test.tsx index 998f95f2..f393a677 100644 --- a/packages/module/src/DataViewTable/DataViewTable.test.tsx +++ b/packages/module/src/DataViewTable/DataViewTable.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import { DataViewTable, DataViewTrTree } from './DataViewTable'; diff --git a/packages/module/src/DataViewTable/DataViewTable.tsx b/packages/module/src/DataViewTable/DataViewTable.tsx index 97a4260d..3c0c5317 100644 --- a/packages/module/src/DataViewTable/DataViewTable.tsx +++ b/packages/module/src/DataViewTable/DataViewTable.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode } from 'react'; +import { FC, ReactNode } from 'react'; import { TdProps, ThProps, @@ -50,7 +50,7 @@ export type DataViewTableProps = isTreeTable?: false; } & DataViewTableBasicProps); -export const DataViewTable: React.FC = (props) => ( +export const DataViewTable: FC = (props) => ( props.isTreeTable ? : ); diff --git a/packages/module/src/DataViewTableBasic/DataViewTableBasic.test.tsx b/packages/module/src/DataViewTableBasic/DataViewTableBasic.test.tsx index 1d749d82..6134f6c8 100644 --- a/packages/module/src/DataViewTableBasic/DataViewTableBasic.test.tsx +++ b/packages/module/src/DataViewTableBasic/DataViewTableBasic.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import { DataView } from '../DataView'; import { DataViewTableBasic } from './DataViewTableBasic'; diff --git a/packages/module/src/DataViewTableBasic/DataViewTableBasic.tsx b/packages/module/src/DataViewTableBasic/DataViewTableBasic.tsx index 2b32cae5..67992f03 100644 --- a/packages/module/src/DataViewTableBasic/DataViewTableBasic.tsx +++ b/packages/module/src/DataViewTableBasic/DataViewTableBasic.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import { FC, useMemo } from 'react'; import { Table, TableProps, @@ -25,7 +25,7 @@ export interface DataViewTableBasicProps extends Omit = ({ +export const DataViewTableBasic: FC = ({ columns, rows, ouiaId = 'DataViewTableBasic', diff --git a/packages/module/src/DataViewTableHead/DataViewTableHead.test.tsx b/packages/module/src/DataViewTableHead/DataViewTableHead.test.tsx index cbfa7500..47f774d4 100644 --- a/packages/module/src/DataViewTableHead/DataViewTableHead.test.tsx +++ b/packages/module/src/DataViewTableHead/DataViewTableHead.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import { Table } from '@patternfly/react-table'; import { DataViewTableHead } from './DataViewTableHead'; diff --git a/packages/module/src/DataViewTableHead/DataViewTableHead.tsx b/packages/module/src/DataViewTableHead/DataViewTableHead.tsx index d1073d4d..931bb8e1 100644 --- a/packages/module/src/DataViewTableHead/DataViewTableHead.tsx +++ b/packages/module/src/DataViewTableHead/DataViewTableHead.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import { FC, useMemo } from 'react'; import { Th, Thead, @@ -18,7 +18,7 @@ export interface DataViewTableHeadProps extends TheadProps { ouiaId?: string; } -export const DataViewTableHead: React.FC = ({ +export const DataViewTableHead: FC = ({ isTreeTable = false, columns, ouiaId = 'DataViewTableHead', diff --git a/packages/module/src/DataViewTableTree/DataViewTableTree.test.tsx b/packages/module/src/DataViewTableTree/DataViewTableTree.test.tsx index 6a20deef..b36a30b3 100644 --- a/packages/module/src/DataViewTableTree/DataViewTableTree.test.tsx +++ b/packages/module/src/DataViewTableTree/DataViewTableTree.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import { FolderIcon, FolderOpenIcon, LeafIcon } from '@patternfly/react-icons'; import { DataView } from '../DataView'; diff --git a/packages/module/src/DataViewTableTree/DataViewTableTree.tsx b/packages/module/src/DataViewTableTree/DataViewTableTree.tsx index d4aaab84..8c313c21 100644 --- a/packages/module/src/DataViewTableTree/DataViewTableTree.tsx +++ b/packages/module/src/DataViewTableTree/DataViewTableTree.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import { FC, useState, useMemo, ReactNode } from 'react'; import { Table, TableProps, @@ -71,7 +71,7 @@ export interface DataViewTableTreeProps extends Omit = ({ +export const DataViewTableTree: FC = ({ columns, rows, headStates, @@ -84,8 +84,8 @@ export const DataViewTableTree: React.FC = ({ }: DataViewTableTreeProps) => { const { selection, activeState } = useInternalContext(); const { onSelect, isSelected, isSelectDisabled } = selection ?? {}; - const [ expandedNodeIds, setExpandedNodeIds ] = React.useState([]); - const [ expandedDetailsNodeNames, setExpandedDetailsNodeIds ] = React.useState([]); + const [ expandedNodeIds, setExpandedNodeIds ] = useState([]); + const [ expandedDetailsNodeNames, setExpandedDetailsNodeIds ] = useState([]); const activeHeadState = useMemo(() => activeState ? headStates?.[activeState] : undefined, [ activeState, headStates ]); const activeBodyState = useMemo(() => activeState ? bodyStates?.[activeState] : undefined, [ activeState, bodyStates ]); @@ -98,7 +98,7 @@ export const DataViewTableTree: React.FC = ({ posinset = 1, rowIndex = 0, isHidden = false - ): React.ReactNode[] => { + ): ReactNode[] => { if (!node) { return []; } diff --git a/packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx b/packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx index 5630735d..3457d9a2 100644 --- a/packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx +++ b/packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import DataViewTextFilter, { DataViewTextFilterProps } from './DataViewTextFilter'; import DataViewToolbar from '../DataViewToolbar'; diff --git a/packages/module/src/DataViewTextFilter/DataViewTextFilter.tsx b/packages/module/src/DataViewTextFilter/DataViewTextFilter.tsx index 9b4ff34a..9d30ff31 100644 --- a/packages/module/src/DataViewTextFilter/DataViewTextFilter.tsx +++ b/packages/module/src/DataViewTextFilter/DataViewTextFilter.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { FC } from 'react'; import { SearchInput, SearchInputProps, ToolbarFilter, ToolbarFilterProps } from '@patternfly/react-core'; /** extends SearchInputProps */ @@ -19,7 +19,7 @@ export interface DataViewTextFilterProps extends SearchInputProps { ouiaId?: string; } -export const DataViewTextFilter: React.FC = ({ +export const DataViewTextFilter: FC = ({ filterId, title, value = '', diff --git a/packages/module/src/DataViewToolbar/DataViewToolbar.test.tsx b/packages/module/src/DataViewToolbar/DataViewToolbar.test.tsx index 66e055e7..a2a43a4a 100644 --- a/packages/module/src/DataViewToolbar/DataViewToolbar.test.tsx +++ b/packages/module/src/DataViewToolbar/DataViewToolbar.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import DataViewToolbar from './DataViewToolbar'; import { Pagination } from '@patternfly/react-core'; diff --git a/packages/module/src/DataViewToolbar/DataViewToolbar.tsx b/packages/module/src/DataViewToolbar/DataViewToolbar.tsx index 6c7af333..3677f79d 100644 --- a/packages/module/src/DataViewToolbar/DataViewToolbar.tsx +++ b/packages/module/src/DataViewToolbar/DataViewToolbar.tsx @@ -1,4 +1,4 @@ -import React, { PropsWithChildren, useRef } from 'react'; +import { FC, PropsWithChildren, useRef } from 'react'; import { Button, Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant, ToolbarProps } from '@patternfly/react-core'; /** extends ToolbarProps */ @@ -21,7 +21,7 @@ export interface DataViewToolbarProps extends Omit = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, toggleGroup, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => { +export const DataViewToolbar: FC = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, toggleGroup, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => { const defaultClearFilters = useRef(