From 13815ced89ac6275c878a24d352113656bb651d1 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Mon, 17 Feb 2025 10:37:19 -0500 Subject: [PATCH 1/2] chore(React 19): removed additional deprecations --- .../src/components/CodeEditor/CodeEditor.tsx | 3 +- packages/react-core/src/helpers/util.ts | 5 +- packages/react-docs/static/like-button.js | 12 ++-- packages/react-docs/static/umd.html | 5 +- .../src/test-helpers/MockedTableChanges.js | 57 ------------------- 5 files changed, 10 insertions(+), 72 deletions(-) delete mode 100644 packages/react-table/src/test-helpers/MockedTableChanges.js diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx index e6d608779d5..00567f95cca 100644 --- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx +++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx @@ -282,8 +282,7 @@ class CodeEditor extends React.Component { shortcutsPopoverButtonText: 'View Shortcuts', shortcutsPopoverProps: { bodyContent: '', - 'aria-label': 'Keyboard Shortcuts', - ...Popover.defaultProps + 'aria-label': 'Keyboard Shortcuts' }, showEditor: true, options: {}, diff --git a/packages/react-core/src/helpers/util.ts b/packages/react-core/src/helpers/util.ts index a688901585a..7fdd46140af 100644 --- a/packages/react-core/src/helpers/util.ts +++ b/packages/react-core/src/helpers/util.ts @@ -1,4 +1,3 @@ -import * as ReactDOM from 'react-dom'; import { globalWidthBreakpoints, globalHeightBreakpoints, SIDE } from './constants'; /** @@ -180,8 +179,8 @@ export function keyHandler( if (refsCollection[nextIndex].focus) { refsCollection[nextIndex].focus(); } - // eslint-disable-next-line react/no-find-dom-node - const element = ReactDOM.findDOMNode(refsCollection[nextIndex]) as HTMLElement; + + const element = refsCollection[nextIndex] as HTMLElement; element.focus(); } else if (position !== 'tab') { if (isMultiDimensional) { diff --git a/packages/react-docs/static/like-button.js b/packages/react-docs/static/like-button.js index 2ecc6e3779c..7eff339a498 100644 --- a/packages/react-docs/static/like-button.js +++ b/packages/react-docs/static/like-button.js @@ -1,5 +1,5 @@ 'use strict'; - +import { createRoot } from 'react-dom/client'; const e = React.createElement; class LikeButton extends React.Component { @@ -17,14 +17,10 @@ class LikeButton extends React.Component { }); } - return e( - PatternFlyReact.Button, - { onClick: () => this.setState({ liked: true }) }, - 'Like' - ); + return e(PatternFlyReact.Button, { onClick: () => this.setState({ liked: true }) }, 'Like'); } } - const domContainer = document.querySelector('#react-root'); -ReactDOM.render(e(LikeButton), domContainer); \ No newline at end of file +const root = createRoot(domContainer); +root.render(e(LikeButton)); diff --git a/packages/react-docs/static/umd.html b/packages/react-docs/static/umd.html index c72d29669e0..87c8c1d9ae3 100644 --- a/packages/react-docs/static/umd.html +++ b/packages/react-docs/static/umd.html @@ -33,7 +33,7 @@

2. Include JS

@patternfly/react-core exposes a "PatternFlyReact" object for use in your like-button.js. Populate your like-button.js with something like: 
       'use strict';
-
+      import { createRoot } from 'react-dom/client';
       const e = React.createElement;
 
       class LikeButton extends React.Component {
@@ -61,7 +61,8 @@ 
2. Include JS

 
 
       const domContainer = document.querySelector('#react-root');
-      ReactDOM.render(e(LikeButton), domContainer);
+      const root = createRoot(domContainer);
+      root.render(e(LikeButton));

3. (Optional) Include styles

diff --git a/packages/react-table/src/test-helpers/MockedTableChanges.js b/packages/react-table/src/test-helpers/MockedTableChanges.js deleted file mode 100644 index 415acf25ed2..00000000000 --- a/packages/react-table/src/test-helpers/MockedTableChanges.js +++ /dev/null @@ -1,57 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { TableContext } from '../components/Table/Table'; -import { TableHeader } from '../components/Table'; - -export const withContext = - ({ context = {}, contextType = {} }) => - (WrappedComponent) => { - class WithContext extends Component { - getChildContext() { - return context; - } - - render() { - return {this.props.children}; - } - } - WithContext.propTypes = { - children: PropTypes.node - }; - WithContext.defaultProps = { - children: null - }; - WithContext.WrappedComponent = WrappedComponent; - WithContext.childContextTypes = contextType; - - return WithContext; - }; - -export const TableProvider = withContext({ - context: { - columns: [], - renderers: { - header: { - wrapper: 'thead', - row: 'tr', - cell: 'th' - } - } - }, - contextType: { columns: PropTypes.any, renderers: PropTypes.any } -})('table'); - -const MockedTableChanges = ({ updateFunc = () => undefined, columns = [] }) => ( - - - - - -); - -MockedTableChanges.propTypes = { - updateFunc: PropTypes.func, - columns: PropTypes.array -}; - -export default MockedTableChanges; From 54b0a42e27f186b60b84e62ef66fe64425f8d0ca Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Mon, 24 Feb 2025 09:16:34 -0500 Subject: [PATCH 2/2] Removed static directory in docs --- packages/react-docs/static/like-button.js | 26 ------ packages/react-docs/static/umd.html | 99 ----------------------- 2 files changed, 125 deletions(-) delete mode 100644 packages/react-docs/static/like-button.js delete mode 100644 packages/react-docs/static/umd.html diff --git a/packages/react-docs/static/like-button.js b/packages/react-docs/static/like-button.js deleted file mode 100644 index 7eff339a498..00000000000 --- a/packages/react-docs/static/like-button.js +++ /dev/null @@ -1,26 +0,0 @@ -'use strict'; -import { createRoot } from 'react-dom/client'; -const e = React.createElement; - -class LikeButton extends React.Component { - constructor(props) { - super(props); - this.state = { liked: false }; - } - - render() { - if (this.state.liked) { - return e(PatternFlyReact.Alert, { - title: ' Great success', - children: 'You liked this', - variant: 'success' - }); - } - - return e(PatternFlyReact.Button, { onClick: () => this.setState({ liked: true }) }, 'Like'); - } -} - -const domContainer = document.querySelector('#react-root'); -const root = createRoot(domContainer); -root.render(e(LikeButton)); diff --git a/packages/react-docs/static/umd.html b/packages/react-docs/static/umd.html deleted file mode 100644 index 87c8c1d9ae3..00000000000 --- a/packages/react-docs/static/umd.html +++ /dev/null @@ -1,99 +0,0 @@ - - - - - - - -

PatternFly-React UMD Build

-

- UMD build allow for you to quickly get started using @patternfly/react-core. - If you care about how this is accomplished, it's highly recommended to read  - React's getting started with UMD guide before returning here since. - This guide uses React's guide as a base. -

-

1. Write HTML

-

- Create a container to inject React components into. - 

-      <div id="react-root">Inject in here</div>
-
-

-

2. Include JS

-

- PatternFly React depends on React and PropTypes. Add these to the bottom of the <body> tag on your page: - 

-      <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin="anonymous"></script>
-      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin="anonymous"></script>
-      <script src="https://unpkg.com/prop-types@15.6/prop-types.js" crossorigin="anonymous"></script>
-      <script src="https://unpkg.com/@patternfly/react-core@3/dist/umd/react-core.js" crossorigin="anonymous"></script>
-      <script src="like-button.js"></script>
-
- - @patternfly/react-core exposes a "PatternFlyReact" object for use in your like-button.js. Populate your like-button.js with something like: - 
-      'use strict';
-      import { createRoot } from 'react-dom/client';
-      const e = React.createElement;
-
-      class LikeButton extends React.Component {
-        constructor(props) {
-          super(props);
-          this.state = { liked: false };
-        }
-
-        render() {
-          if (this.state.liked) {
-            return e(PatternFlyReact.Alert, {
-              title: ' Great success',
-              children: 'You liked this',
-              variant: 'success'
-            });
-          }
-
-          return e(
-            PatternFlyReact.Button,
-            { onClick: () => this.setState({ liked: true }) },
-            'Like'
-          );
-        }
-      }
-
-
-      const domContainer = document.querySelector('#react-root');
-      const root = createRoot(domContainer);
-      root.render(e(LikeButton));
-
-

-

3. (Optional) Include styles

-

- You have to include ALL our PatternFly styles. There's two ways to do this: - 

-      <link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@2/patternfly.css" crossorigin />
-
- OR - 
-      <link rel="stylesheet" href="https://unpkg.com/@patternfly/react-core@3/dist/styles/base.css" crossorigin />
-      <link rel="stylesheet" href="https://unpkg.com/@patternfly/react-core@3/dist/react-core.umd.css" crossorigin />
-
-

-

4. Don't do this in production

-

- This implementation is very bloated. - ALL of React, ReactDOM, PropTypes (which you don't need in production...), and PatternFly (including CSS and fonts) are included which takes 912KB after being gzipped. - Even when minified, they take 520Kb after being gzipped. - Also, you probably want to be able to use JSX. - To enable using JSX, treeshaking, and other modern JS tools PatternFly recommendeds consumption using Webpack. - It's as simple as cloning our seed repo and running 2 commands! -

-

- This page serves as an example of how to do this. Checkout the like button below! -

-
Inject like button here
- - - - - - -