feat(React19): Add support for React19

Author: rebeccaalpert

packages/module/package.json

@@ -47,8 +47,8 @@
     "tslib": "^2.5.2"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   },
   "devDependencies": {
     "@patternfly/documentation-framework": "^6.0.0-alpha.109",

packages/module/patternfly-docs/content/examples/Actions.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import React from 'react';
+import { FunctionComponent } from 'react';
 import {
   ActionsColumn,
   Caption,
@@ -14,7 +14,7 @@ import {
 import { CellMeasurerCache, CellMeasurer } from 'react-virtualized';
 import { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension';
 
-export const ActionsExample: React.FunctionComponent = () => {
+export const ActionsExample: FunctionComponent = () => {
   interface RowType {
     disableActions: boolean;
     id: string;

packages/module/patternfly-docs/content/examples/Basic.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import { Caption, Table, TableGridBreakpoint, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { CellMeasurerCache, CellMeasurer } from 'react-virtualized';
 import { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension';
 
-export const VirtualizedExample: React.FunctionComponent = () => {
+export const VirtualizedExample: FunctionComponent = () => {
   // this StringArray type is just needed because something in our documentation framework crashes when it encounters
   // a string[][] type
   type StringArray = string[];

packages/module/patternfly-docs/content/examples/FilterableWithWindowScroller.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { CellMeasurerCache, CellMeasurer } from 'react-virtualized';
 import { AutoSizer, VirtualTableBody, WindowScroller } from '@patternfly/react-virtualized-extension';
 import { Table, Thead, Tr, Th, Td, TableGridBreakpoint, ActionsColumn, Tbody } from '@patternfly/react-table';
@@ -25,10 +24,11 @@ import {
   Bullseye
 } from '@patternfly/react-core';
 import { FilterIcon, SearchIcon } from '@patternfly/react-icons';
+import { Fragment, useEffect, useState, CSSProperties, Ref, MouseEvent as ReactMouseEvent, SyntheticEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
 
 export const ComposableTableWindowScroller = () => {
-  const [scrollableElement, setScrollableElement] = React.useState<HTMLElement>();
-  React.useEffect(() => {
+  const [scrollableElement, setScrollableElement] = useState<HTMLElement>();
+  useEffect(() => {
     const scrollableElement = document.getElementById('content-scrollable-2') as HTMLElement;
     setScrollableElement(scrollableElement);
   }, []);
@@ -86,11 +86,11 @@ export const ComposableTableWindowScroller = () => {
   const columns = ['Servers', 'Threads', 'Applications', 'Status', 'Location'];
   const scrollToIndex = -1; // can be used to programmatically set current index
 
-  const [isCategoryDropdownOpen, setIsCategoryDropdownOpen] = React.useState(false);
-  const [isFilterDropdownOpen, setIsFilterDropdownOpen] = React.useState(false);
-  const [currentCategory, setCurrentCategory] = React.useState('Name');
-  const [filters, setFilters] = React.useState<Record<string, string[]>>({ location: [], name: [], status: [] });
-  const [inputValue, setInputValue] = React.useState('');
+  const [isCategoryDropdownOpen, setIsCategoryDropdownOpen] = useState(false);
+  const [isFilterDropdownOpen, setIsFilterDropdownOpen] = useState(false);
+  const [currentCategory, setCurrentCategory] = useState('Name');
+  const [filters, setFilters] = useState<Record<string, string[]>>({ location: [], name: [], status: [] });
+  const [inputValue, setInputValue] = useState('');
 
   const onDelete = (type: string | ToolbarLabelGroup, id: string) => {
     if (type === 'Location') {
@@ -130,7 +130,7 @@ export const ComposableTableWindowScroller = () => {
     setInputValue(newValue);
   };
 
-  const onStatusSelect = (event: React.MouseEvent<Element, MouseEvent> | undefined, selection: string | number | undefined) => {
+  const onStatusSelect = (event: ReactMouseEvent<Element, MouseEvent> | undefined, selection: string | number | undefined) => {
     const checked = (event?.target as HTMLInputElement).checked;
     setFilters({
       ...filters,
@@ -139,9 +139,9 @@ export const ComposableTableWindowScroller = () => {
     setIsFilterDropdownOpen(false);
   };
 
-  const onNameInput = (event: React.SyntheticEvent<HTMLButtonElement> | React.KeyboardEvent) => {
+  const onNameInput = (event: SyntheticEvent<HTMLButtonElement> | ReactKeyboardEvent) => {
     setIsCategoryDropdownOpen(false);
-    const pressedKey = (event as React.KeyboardEvent).key;
+    const pressedKey = (event as ReactKeyboardEvent).key;
     if (pressedKey && pressedKey !== 'Enter') {
       return;
     }
@@ -155,7 +155,7 @@ export const ComposableTableWindowScroller = () => {
     setIsCategoryDropdownOpen(false);
   };
 
-  const onLocationSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, selection: string | number | undefined) => {
+  const onLocationSelect = (_event: ReactMouseEvent<Element, MouseEvent> | undefined, selection: string | number | undefined) => {
     setFilters({ ...filters, location: [`${selection}`] });
 
     setIsFilterDropdownOpen(false);
@@ -180,7 +180,7 @@ export const ComposableTableWindowScroller = () => {
         <Select
           onSelect={onCategorySelect}
           selected={currentCategory}
-          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+          toggle={(toggleRef: Ref<MenuToggleElement>) => (
             <MenuToggle
               ref={toggleRef}
               onClick={onCategoryToggle}
@@ -190,7 +190,7 @@ export const ComposableTableWindowScroller = () => {
                 {
                   width: '100%',
                   verticalAlign: 'text-bottom'
-                } as React.CSSProperties
+                } as CSSProperties
               }
             >
               {currentCategory}
@@ -247,7 +247,7 @@ export const ComposableTableWindowScroller = () => {
     ];
 
     return (
-      <React.Fragment>
+      <Fragment>
         <ToolbarFilter
           labels={filters.location}
           deleteLabel={(category, chip) => onDelete(category, chip as string)}
@@ -260,7 +260,7 @@ export const ComposableTableWindowScroller = () => {
             selected={filters.location[0]}
             isOpen={isFilterDropdownOpen}
             popperProps={{ minWidth: '100px' }}
-            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            toggle={(toggleRef: Ref<MenuToggleElement>) => (
               <MenuToggle
                 ref={toggleRef}
                 onClick={onFilterToggle}
@@ -269,7 +269,7 @@ export const ComposableTableWindowScroller = () => {
                   {
                     width: '100%',
                     verticalAlign: 'text-bottom'
-                  } as React.CSSProperties
+                  } as CSSProperties
                 }
               >
                 {filters.location[0] || `Any`}
@@ -308,7 +308,7 @@ export const ComposableTableWindowScroller = () => {
             popperProps={{ minWidth: '100px' }}
             onSelect={onStatusSelect}
             selected={filters.status}
-            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            toggle={(toggleRef: Ref<MenuToggleElement>) => (
               <MenuToggle
                 ref={toggleRef}
                 onClick={onFilterToggle}
@@ -317,7 +317,7 @@ export const ComposableTableWindowScroller = () => {
                   {
                     width: '100%',
                     verticalAlign: 'text-bottom'
-                  } as React.CSSProperties
+                  } as CSSProperties
                 }
               >
                 Filter by status
@@ -328,7 +328,7 @@ export const ComposableTableWindowScroller = () => {
             {statusMenuItems}
           </Select>
         </ToolbarFilter>
-      </React.Fragment>
+      </Fragment>
     );
   };
 

packages/module/patternfly-docs/content/examples/Selectable.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
+import { useState } from 'react';
 
 import { CellMeasurerCache, CellMeasurer } from 'react-virtualized';
 import { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension';
 import { Table, Thead, Tr, Th, Td, Caption, TableGridBreakpoint } from '@patternfly/react-table';
 
-export const SelectableTableVirtualized: React.FunctionComponent = () => {
+export const SelectableTableVirtualized: FunctionComponent = () => {
   // this StringArray type is just needed because something in our documentation framework crashes when it encounters
   // a string[][] type
   type StringArray = string[];
@@ -16,7 +17,7 @@ export const SelectableTableVirtualized: React.FunctionComponent = () => {
 
   const selectableRepos = rows;
 
-  const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
+  const [selectedRepoNames, setSelectedRepoNames] = useState<string[]>([]);
 
   const setRepoSelected = (repo: string, isSelecting = true) =>
     setSelectedRepoNames((prevSelected) => {
@@ -31,7 +32,7 @@ export const SelectableTableVirtualized: React.FunctionComponent = () => {
   const areAllReposSelected = selectedRepoNames.length === selectableRepos.length;
   const isRepoSelected = (repo: string) => selectedRepoNames.includes(repo);
 
-  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState<number | null>(null);
+  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState<number | null>(null);
 
   const onSelectRepo = (repo: string, rowIndex: number, isSelecting: boolean) => {
     if (recentSelectedRowIndex !== null) {

packages/module/patternfly-docs/content/examples/Sortable.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
+import { useState } from 'react';
 import { Caption, Table, Td, Th, Thead, ThProps, Tr } from '@patternfly/react-table';
 import { CellMeasurerCache, CellMeasurer } from 'react-virtualized';
 import { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension';
 
-export const SortableExample: React.FunctionComponent = () => {
+export const SortableExample: FunctionComponent = () => {
   const rows: { id: string; cells: string[] }[] = [];
   for (let i = 0; i < 100; i++) {
     rows.push({
@@ -14,10 +15,10 @@ export const SortableExample: React.FunctionComponent = () => {
 
   const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];
 
-  const [activeSortIndex, setActiveSortIndex] = React.useState<number>(-1);
+  const [activeSortIndex, setActiveSortIndex] = useState<number>(-1);
 
   // Sort direction of the currently sorted column
-  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | undefined>();
+  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | undefined>();
 
   const getRowIndex = (str: string) => Number(str?.split('-')[1]);
 

packages/module/patternfly-docs/content/examples/WindowScroller.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { useState, useEffect } from 'react';
 import { CellMeasurerCache, CellMeasurer } from 'react-virtualized';
 import { AutoSizer, VirtualTableBody, WindowScroller } from '@patternfly/react-virtualized-extension';
 import { Table, Thead, Tr, Th, Td, Caption, TableGridBreakpoint } from '@patternfly/react-table';
 
 export const WindowScrollerExample = () => {
-  const [scrollableElement, setScrollableElement] = React.useState<HTMLElement>();
-  React.useEffect(() => {
+  const [scrollableElement, setScrollableElement] = useState<HTMLElement>();
+  useEffect(() => {
     const scrollableElement = document.getElementById('content-scrollable-2') as HTMLElement;
     setScrollableElement(scrollableElement);
   }, []);

packages/module/patternfly-docs/generated/extensions/virtual-scroll-table/react.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createElement, Fragment } from 'react';
 import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
 import { CellMeasurerCache, CellMeasurer } from 'react-virtualized';
 import { AutoSizer, VirtualTableBody, WindowScroller } from '@patternfly/react-virtualized-extension';
@@ -185,7 +185,7 @@ pageData.examples = {
 };
 
 const Component = () => (
-  <React.Fragment>
+  <Fragment>
     <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
       {`Note: React Virtualized Extension lives in its own package at `}
       <PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-virtualized-extension","className":""}}>
@@ -207,8 +207,8 @@ This package is currently an extension. Extension components do not undergo the
     <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
       {`Examples`}
     </AutoLinkHeader>
-    {React.createElement(pageData.examples["Window scroller"])}
-  </React.Fragment>
+    {createElement(pageData.examples["Window scroller"])}
+  </Fragment>
 );
 Component.displayName = 'ExtensionsVirtualScrollWindowScrollerReactDocs';
 Component.pageData = pageData;

packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createElement, Fragment } from 'react';
 import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
 import { ExtendedButton } from "@patternfly/react-virtualized-extension";
 const pageData = {
@@ -45,13 +45,13 @@ pageData.examples = {
 };
 
 const Component = () => (
-  <React.Fragment>
+  <Fragment>
     <AutoLinkHeader {...{"id":"basic-usage","size":"h2","className":"ws-title ws-h2"}}>
       {`Basic usage`}
     </AutoLinkHeader>
-    {React.createElement(pageData.examples["Example"])}
-    {React.createElement(pageData.examples["Fullscreen example"])}
-  </React.Fragment>
+    {createElement(pageData.examples["Example"])}
+    {createElement(pageData.examples["Fullscreen example"])}
+  </Fragment>
 );
 Component.displayName = 'ExtensionsPatternflyExtensionSeedReactDocs';
 Component.pageData = pageData;