From 363086b312615f5799b9cd75c4193e26e125ee47 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 18 Dec 2024 14:01:08 +0100
Subject: [PATCH] feat: support react v19
This also removes some of the prop-type checks as react v19 does not support it anymore
---
package.json | 6 +-
pnpm-lock.yaml | 75 +++++++++-----------
src/components/Tab.js | 6 +-
src/components/TabList.js | 7 +-
src/components/TabPanel.js | 6 +-
src/components/Tabs.js | 12 ++--
src/components/UncontrolledTabs.js | 9 +--
src/components/__tests__/Tabs-errors-test.js | 3 -
8 files changed, 61 insertions(+), 63 deletions(-)
diff --git a/package.json b/package.json
index 7286ca88a1..b87d4b8f2d 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
"react-component"
],
"peerDependencies": {
- "react": "^18.0.0"
+ "react": "^18.0.0 || ^19.0.0"
},
"devDependencies": {
"@babel/cli": "7.26.4",
@@ -79,8 +79,8 @@
"mini-css-extract-plugin": "2.9.2",
"prettier": "3.4.2",
"prism-react-renderer": "2.4.1",
- "react": "18.3.1",
- "react-dom": "18.3.1",
+ "react": "19.0.0",
+ "react-dom": "19.0.0",
"react-live": "4.1.8",
"react-modal": "3.16.3",
"webpack": "5.97.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1a9006a431..413e02324d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,7 +38,7 @@ importers:
version: 6.6.3
'@testing-library/react':
specifier: 16.1.0
- version: 16.1.0(@testing-library/dom@10.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ version: 16.1.0(@testing-library/dom@10.4.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@testing-library/user-event':
specifier: 14.5.2
version: 14.5.2(@testing-library/dom@10.4.0)
@@ -107,19 +107,19 @@ importers:
version: 3.4.2
prism-react-renderer:
specifier: 2.4.1
- version: 2.4.1(react@18.3.1)
+ version: 2.4.1(react@19.0.0)
react:
- specifier: 18.3.1
- version: 18.3.1
+ specifier: 19.0.0
+ version: 19.0.0
react-dom:
- specifier: 18.3.1
- version: 18.3.1(react@18.3.1)
+ specifier: 19.0.0
+ version: 19.0.0(react@19.0.0)
react-live:
specifier: 4.1.8
- version: 4.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ version: 4.1.8(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
react-modal:
specifier: 3.16.3
- version: 3.16.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ version: 3.16.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
webpack:
specifier: 5.97.1
version: 5.97.1(webpack-cli@5.1.4)
@@ -3618,10 +3618,10 @@ packages:
resolution: {integrity: sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==}
engines: {node: '>= 0.8'}
- react-dom@18.3.1:
- resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+ react-dom@19.0.0:
+ resolution: {integrity: sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==}
peerDependencies:
- react: ^18.3.1
+ react: ^19.0.0
react-is@16.13.1:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
@@ -3648,8 +3648,8 @@ packages:
react: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19
react-dom: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19
- react@18.3.1:
- resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+ react@19.0.0:
+ resolution: {integrity: sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==}
engines: {node: '>=0.10.0'}
readable-stream@2.3.8:
@@ -3789,8 +3789,8 @@ packages:
resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
engines: {node: '>=v12.22.7'}
- scheduler@0.23.2:
- resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+ scheduler@0.25.0:
+ resolution: {integrity: sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==}
schema-utils@3.3.0:
resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
@@ -5520,12 +5520,12 @@ snapshots:
lodash: 4.17.21
redent: 3.0.0
- '@testing-library/react@16.1.0(@testing-library/dom@10.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+ '@testing-library/react@16.1.0(@testing-library/dom@10.4.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
dependencies:
'@babel/runtime': 7.26.0
'@testing-library/dom': 10.4.0
- react: 18.3.1
- react-dom: 18.3.1(react@18.3.1)
+ react: 19.0.0
+ react-dom: 19.0.0(react@19.0.0)
'@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)':
dependencies:
@@ -8530,11 +8530,11 @@ snapshots:
ansi-styles: 5.2.0
react-is: 18.3.1
- prism-react-renderer@2.4.1(react@18.3.1):
+ prism-react-renderer@2.4.1(react@19.0.0):
dependencies:
'@types/prismjs': 1.26.5
clsx: 2.1.1
- react: 18.3.1
+ react: 19.0.0
process-nextick-args@2.0.1: {}
@@ -8586,11 +8586,10 @@ snapshots:
iconv-lite: 0.4.24
unpipe: 1.0.0
- react-dom@18.3.1(react@18.3.1):
+ react-dom@19.0.0(react@19.0.0):
dependencies:
- loose-envify: 1.4.0
- react: 18.3.1
- scheduler: 0.23.2
+ react: 19.0.0
+ scheduler: 0.25.0
react-is@16.13.1: {}
@@ -8600,26 +8599,24 @@ snapshots:
react-lifecycles-compat@3.0.4: {}
- react-live@4.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+ react-live@4.1.8(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
dependencies:
- prism-react-renderer: 2.4.1(react@18.3.1)
- react: 18.3.1
- react-dom: 18.3.1(react@18.3.1)
+ prism-react-renderer: 2.4.1(react@19.0.0)
+ react: 19.0.0
+ react-dom: 19.0.0(react@19.0.0)
sucrase: 3.35.0
- use-editable: 2.3.3(react@18.3.1)
+ use-editable: 2.3.3(react@19.0.0)
- react-modal@3.16.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+ react-modal@3.16.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
dependencies:
exenv: 1.2.2
prop-types: 15.8.1
- react: 18.3.1
- react-dom: 18.3.1(react@18.3.1)
+ react: 19.0.0
+ react-dom: 19.0.0(react@19.0.0)
react-lifecycles-compat: 3.0.4
warning: 4.0.3
- react@18.3.1:
- dependencies:
- loose-envify: 1.4.0
+ react@19.0.0: {}
readable-stream@2.3.8:
dependencies:
@@ -8774,9 +8771,7 @@ snapshots:
dependencies:
xmlchars: 2.2.0
- scheduler@0.23.2:
- dependencies:
- loose-envify: 1.4.0
+ scheduler@0.25.0: {}
schema-utils@3.3.0:
dependencies:
@@ -9266,9 +9261,9 @@ snapshots:
querystringify: 2.2.0
requires-port: 1.0.0
- use-editable@2.3.3(react@18.3.1):
+ use-editable@2.3.3(react@19.0.0):
dependencies:
- react: 18.3.1
+ react: 19.0.0
util-deprecate@1.0.2: {}
diff --git a/src/components/Tab.js b/src/components/Tab.js
index b9d023e01f..91401a9268 100644
--- a/src/components/Tab.js
+++ b/src/components/Tab.js
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
import React, { useEffect, useRef } from 'react';
import cx from 'clsx';
@@ -12,6 +11,8 @@ const defaultProps = {
selectedClassName: `${DEFAULT_CLASS}--selected`,
};
+/*
+Left for TS migration
const propTypes = {
children: PropTypes.oneOfType([
PropTypes.array,
@@ -31,7 +32,7 @@ const propTypes = {
selectedClassName: PropTypes.string,
tabIndex: PropTypes.string,
tabRef: PropTypes.func, // private
-};
+};*/
const Tab = (props) => {
let nodeRef = useRef();
@@ -82,7 +83,6 @@ const Tab = (props) => {
);
};
-Tab.propTypes = propTypes;
Tab.tabsRole = 'Tab';
export default Tab;
diff --git a/src/components/TabList.js b/src/components/TabList.js
index f4686434c2..c3de9888fb 100644
--- a/src/components/TabList.js
+++ b/src/components/TabList.js
@@ -1,10 +1,12 @@
-import PropTypes from 'prop-types';
import React from 'react';
import cx from 'clsx';
const defaultProps = {
className: 'react-tabs__tab-list',
};
+
+/*
+Left for TS migration
const propTypes = {
children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
className: PropTypes.oneOfType([
@@ -12,7 +14,7 @@ const propTypes = {
PropTypes.array,
PropTypes.object,
]),
-};
+};*/
const TabList = (props) => {
const { children, className, ...attributes } = {
...defaultProps,
@@ -27,6 +29,5 @@ const TabList = (props) => {
};
TabList.tabsRole = 'TabList';
-TabList.propTypes = propTypes;
export default TabList;
diff --git a/src/components/TabPanel.js b/src/components/TabPanel.js
index fadaa4f2d9..30fdcbbc72 100644
--- a/src/components/TabPanel.js
+++ b/src/components/TabPanel.js
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
import React from 'react';
import cx from 'clsx';
@@ -8,6 +7,9 @@ const defaultProps = {
forceRender: false,
selectedClassName: `${DEFAULT_CLASS}--selected`,
};
+
+/*
+Left for TS migration
const propTypes = {
children: PropTypes.node,
className: PropTypes.oneOfType([
@@ -20,6 +22,7 @@ const propTypes = {
selected: PropTypes.bool, // private
selectedClassName: PropTypes.string,
};
+*/
const TabPanel = (props) => {
const {
children,
@@ -50,6 +53,5 @@ const TabPanel = (props) => {
};
TabPanel.tabsRole = 'TabPanel';
-TabPanel.propTypes = propTypes;
export default TabPanel;
diff --git a/src/components/Tabs.js b/src/components/Tabs.js
index 44bc44c0e0..72f1f51248 100644
--- a/src/components/Tabs.js
+++ b/src/components/Tabs.js
@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types';
+import { checkPropTypes } from 'prop-types';
import React, { useEffect, useState } from 'react';
import {
childrenPropType,
@@ -12,6 +12,10 @@ const MODE_CONTROLLED = 0;
const MODE_UNCONTROLLED = 1;
const propTypes = {
children: childrenPropType,
+ onSelect: onSelectPropType,
+ selectedIndex: selectedIndexPropType,
+ /*
+Left for TS migration
className: PropTypes.oneOfType([
PropTypes.string,
PropTypes.array,
@@ -27,10 +31,8 @@ const propTypes = {
environment: PropTypes.object,
focusTabOnClick: PropTypes.bool,
forceRenderTabPanel: PropTypes.bool,
- onSelect: onSelectPropType,
- selectedIndex: selectedIndexPropType,
selectedTabClassName: PropTypes.string,
- selectedTabPanelClassName: PropTypes.string,
+ selectedTabPanelClassName: PropTypes.string,*/
};
const defaultProps = {
defaultFocus: false,
@@ -68,6 +70,7 @@ For more information about controlled and uncontrolled mode of react-tabs see ht
* It is initialized from the prop defaultFocus, and after the first render it is reset back to false. Later it can become true again when using keys to navigate the tabs.
*/
const Tabs = (props) => {
+ checkPropTypes(propTypes, props, 'prop', 'Tabs');
const {
children,
defaultFocus,
@@ -136,7 +139,6 @@ const Tabs = (props) => {
return {children};
};
-Tabs.propTypes = propTypes;
Tabs.tabsRole = 'Tabs';
export default Tabs;
diff --git a/src/components/UncontrolledTabs.js b/src/components/UncontrolledTabs.js
index 0044dc33ad..8b28ee2e22 100644
--- a/src/components/UncontrolledTabs.js
+++ b/src/components/UncontrolledTabs.js
@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types';
+import { checkPropTypes } from 'prop-types';
import React, { cloneElement, useRef, useId } from 'react';
import cx from 'clsx';
import { childrenPropType } from '../helpers/propTypes';
@@ -49,6 +49,8 @@ const defaultProps = {
const propTypes = {
children: childrenPropType,
+ /*
+ Left for TS migration
direction: PropTypes.oneOf(['rtl', 'ltr']),
className: PropTypes.oneOfType([
PropTypes.string,
@@ -65,10 +67,11 @@ const propTypes = {
selectedIndex: PropTypes.number.isRequired,
selectedTabClassName: PropTypes.string,
selectedTabPanelClassName: PropTypes.string,
- environment: PropTypes.object,
+ environment: PropTypes.object,*/
};
const UncontrolledTabs = (props) => {
+ checkPropTypes(propTypes, props, 'prop', 'UncontrolledTabs');
let tabNodes = useRef([]);
let tabIds = useRef([]);
const ref = useRef();
@@ -404,6 +407,4 @@ const UncontrolledTabs = (props) => {
);
};
-UncontrolledTabs.propTypes = propTypes;
-
export default UncontrolledTabs;
diff --git a/src/components/__tests__/Tabs-errors-test.js b/src/components/__tests__/Tabs-errors-test.js
index 2f6a75acfe..824ad9851d 100644
--- a/src/components/__tests__/Tabs-errors-test.js
+++ b/src/components/__tests__/Tabs-errors-test.js
@@ -21,10 +21,7 @@ describe('', () => {
function assertPropTypeWarning(message, nth = 1) {
expect(consoleErrorMock).toHaveBeenNthCalledWith(
nth,
- expect.anything(),
- expect.anything(),
expect.stringMatching(message),
- expect.anything(),
);
}