feat: Use new useId hook from react 18

BREAKING CHANGE: React version 18 or newer is now required.
BREAKING CHANGE: `resetIdCounter` was removed as it is not necessary anymore. Ensure you remove any calls to it from your code.

Author: danez

package.json

@@ -48,7 +48,7 @@
     "react-component"
   ],
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-0 || ^18.0.0"
+    "react": "^18.0.0"
   },
   "devDependencies": {
     "@babel/cli": "7.17.6",

src/components/Tab.js

@@ -3,12 +3,11 @@ import React, { useEffect, useRef } from 'react';
 import cx from 'clsx';
 
 const DEFAULT_CLASS = 'react-tabs__tab';
-const DEFAULT_PROPS = {
+const defaultProps = {
   className: DEFAULT_CLASS,
   disabledClassName: `${DEFAULT_CLASS}--disabled`,
   focus: false,
   id: null,
-  panelId: null,
   selected: false,
   selectedClassName: `${DEFAULT_CLASS}--selected`,
 };
@@ -29,7 +28,6 @@ const propTypes = {
   disabledClassName: PropTypes.string,
   focus: PropTypes.bool, // private
   id: PropTypes.string, // private
-  panelId: PropTypes.string, // private
   selected: PropTypes.bool, // private
   selectedClassName: PropTypes.string,
   tabRef: PropTypes.func,
@@ -44,7 +42,6 @@ const Tab = (props) => {
     disabledClassName,
     focus,
     id,
-    panelId,
     selected,
     selectedClassName,
     tabIndex,
@@ -70,10 +67,10 @@ const Tab = (props) => {
         if (tabRef) tabRef(node);
       }}
       role="tab"
-      id={id}
+      id={`tab${id}`}
       aria-selected={selected ? 'true' : 'false'}
       aria-disabled={disabled ? 'true' : 'false'}
-      aria-controls={panelId}
+      aria-controls={`panel${id}`}
       tabIndex={tabIndex || (selected ? '0' : null)}
       data-rttab
     >
@@ -84,5 +81,5 @@ const Tab = (props) => {
 Tab.propTypes = propTypes;
 
 Tab.tabsRole = 'Tab';
-Tab.defaultProps = DEFAULT_PROPS;
+Tab.defaultProps = defaultProps;
 export default Tab;

src/components/TabPanel.js

@@ -19,7 +19,6 @@ const propTypes = {
   id: PropTypes.string, // private
   selected: PropTypes.bool, // private
   selectedClassName: PropTypes.string,
-  tabId: PropTypes.string, // private
 };
 const TabPanel = (props) => {
   const {
@@ -29,7 +28,6 @@ const TabPanel = (props) => {
     id,
     selected,
     selectedClassName,
-    tabId,
     ...attributes
   } = props;
 
@@ -40,8 +38,8 @@ const TabPanel = (props) => {
         [selectedClassName]: selected,
       })}
       role="tabpanel"
-      id={id}
-      aria-labelledby={tabId}
+      id={`panel${id}`}
+      aria-labelledby={`tab${id}`}
     >
       {forceRender || selected ? children : null}
     </div>

src/components/UncontrolledTabs.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
-import React, { cloneElement, useRef } from 'react';
+import React, { cloneElement, useRef, useId } from 'react';
 import cx from 'clsx';
-import uuid from '../helpers/uuid';
 import { childrenPropType } from '../helpers/propTypes';
 import { getTabsCount as getTabsCountHelper } from '../helpers/count';
 import { deepMap } from '../helpers/childrenDeepMap';
@@ -71,7 +70,6 @@ const propTypes = {
 const UncontrolledTabs = (props) => {
   let tabNodes = useRef([]);
   let tabIds = useRef([]);
-  let panelIds = useRef([]);
   const ref = useRef();
 
   function setSelected(index, event) {
@@ -180,15 +178,14 @@ const UncontrolledTabs = (props) => {
     } = props;
 
     tabIds.current = tabIds.current || [];
-    panelIds.current = panelIds.current || [];
     let diff = tabIds.current.length - getTabsCount();
 
     // Add ids if new tabs have been added
     // Don't bother removing ids, just keep them in case they are added again
     // This is more efficient, and keeps the uuid counter under control
+    const id = useId();
     while (diff++ < 0) {
-      tabIds.current.push(uuid());
-      panelIds.current.push(uuid());
+      tabIds.current.push(`${id}${tabIds.current.length}`);
     }
 
     // Map children to dynamically setup refs
@@ -225,7 +222,6 @@ const UncontrolledTabs = (props) => {
                 tabNodes.current[key] = node;
               },
               id: tabIds.current[listIndex],
-              panelId: panelIds.current[listIndex],
               selected,
               focus: selected && (focus || wasTabFocused),
             };
@@ -242,8 +238,7 @@ const UncontrolledTabs = (props) => {
         });
       } else if (isTabPanel(child)) {
         const props = {
-          id: panelIds.current[index],
-          tabId: tabIds.current[index],
+          id: tabIds.current[index],
           selected: selectedIndex === index,
         };
 

src/components/__tests__/Tab-test.js

@@ -25,7 +25,7 @@ describe('<Tab />', () => {
 
   it('should support being selected', () => {
     expectToMatchSnapshot(
-      <Tab selected id="abcd" panelId="1234">
+      <Tab selected id="abcd">
         Hello
       </Tab>,
     );

src/components/__tests__/TabList-test.js

@@ -6,6 +6,15 @@ import TabPanel from '../TabPanel';
 import Tabs from '../Tabs';
 import { TabListWrapper, TabWrapper } from './helpers/higherOrder';
 
+jest.mock('react', () => {
+  const originalModule = jest.requireActual('react');
+
+  return {
+    ...originalModule,
+    useId: () => ':r0:',
+  };
+});
+
 function expectToMatchSnapshot(component) {
   expect(renderer.create(component).toJSON()).toMatchSnapshot();
 }

src/components/__tests__/TabPanel-test.js

@@ -33,15 +33,15 @@ describe('<TabPanel />', () => {
 
   it('should support being selected', () => {
     expectToMatchSnapshot(
-      <TabPanel selected id="abcd" tabId="1234">
+      <TabPanel selected id="abcd">
         Hola
       </TabPanel>,
     );
   });
 
   it('should support being selected with custom class name', () => {
     expectToMatchSnapshot(
-      <TabPanel selected id="abcd" tabId="1234" selectedClassName="selected">
+      <TabPanel selected id="abcd" selectedClassName="selected">
         Hola
       </TabPanel>,
     );

src/components/__tests__/Tabs-errors-test.js

@@ -5,7 +5,15 @@ import Tab from '../Tab';
 import TabList from '../TabList';
 import TabPanel from '../TabPanel';
 import Tabs from '../Tabs';
-import { reset as resetIdCounter } from '../../helpers/uuid';
+
+jest.mock('react', () => {
+  const originalModule = jest.requireActual('react');
+
+  return {
+    ...originalModule,
+    useId: () => ':r0:',
+  };
+});
 
 describe('<Tabs />', () => {
   let consoleErrorMock;
@@ -21,7 +29,6 @@ describe('<Tabs />', () => {
   }
 
   beforeEach(() => {
-    resetIdCounter();
     consoleErrorMock = jest.spyOn(console, 'error').mockImplementation();
   });
 

src/components/__tests__/Tabs-node-test.js

@@ -6,7 +6,15 @@ import Tab from '../Tab';
 import TabList from '../TabList';
 import TabPanel from '../TabPanel';
 import Tabs from '../Tabs';
-import { reset as resetIdCounter } from '../../helpers/uuid';
+
+jest.mock('react', () => {
+  const originalModule = jest.requireActual('react');
+
+  return {
+    ...originalModule,
+    useId: () => ':r0:',
+  };
+});
 
 function createTabs(props = {}) {
   return (
@@ -28,15 +36,6 @@ function createTabs(props = {}) {
 }
 
 describe('ServerSide <Tabs />', () => {
-  beforeEach(() => resetIdCounter());
-
-  beforeAll(() => {
-    // eslint-disable-next-line no-console
-    console.error = (error) => {
-      throw new Error(error);
-    };
-  });
-
   test('does not crash in node environments', () => {
     expect(() => createTabs()).not.toThrow();
   });

src/components/__tests__/Tabs-test.js

@@ -6,13 +6,21 @@ import Tab from '../Tab';
 import TabList from '../TabList';
 import TabPanel from '../TabPanel';
 import Tabs from '../Tabs';
-import { reset as resetIdCounter } from '../../helpers/uuid';
 import {
   TabListWrapper,
   TabWrapper,
   TabPanelWrapper,
 } from './helpers/higherOrder';
 
+jest.mock('react', () => {
+  const originalModule = jest.requireActual('react');
+
+  return {
+    ...originalModule,
+    useId: () => ':r0:',
+  };
+});
+
 function expectToMatchSnapshot(component) {
   expect(render(component).container.firstChild).toMatchSnapshot();
 }
@@ -47,8 +55,6 @@ function assertTabSelected(tabNo, node = screen) {
 }
 
 describe('<Tabs />', () => {
-  beforeEach(() => resetIdCounter());
-
   describe('props', () => {
     test('should have sane defaults', () => {
       expectToMatchSnapshot(createTabs());
@@ -98,16 +104,6 @@ describe('<Tabs />', () => {
     });
   });
 
-  describe('child props', () => {
-    test('should reset ids correctly', () => {
-      expectToMatchSnapshot(createTabs());
-
-      resetIdCounter();
-
-      expectToMatchSnapshot(createTabs());
-    });
-  });
-
   describe('interaction', () => {
     describe('mouse', () => {
       test('should update selectedIndex when clicked', async () => {