feat: support react v19

This also removes some of the prop-type checks as react v19 does not support it anymore

Author: renovate[bot]

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",

pnpm-lock.yaml

@@ -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;

src/components/Tab.js

@@ -1,18 +1,20 @@
-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([
     PropTypes.string,
     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;

src/components/TabList.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;

src/components/TabPanel.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 <UncontrolledTabs {...subProps}>{children}</UncontrolledTabs>;
 };
 
-Tabs.propTypes = propTypes;
 Tabs.tabsRole = 'Tabs';
 
 export default Tabs;

src/components/Tabs.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;

src/components/UncontrolledTabs.js

@@ -21,10 +21,7 @@ describe('<Tabs />', () => {
   function assertPropTypeWarning(message, nth = 1) {
     expect(consoleErrorMock).toHaveBeenNthCalledWith(
       nth,
-      expect.anything(),
-      expect.anything(),
       expect.stringMatching(message),
-      expect.anything(),
     );
   }