From 67c83cb4df9e7f6e3be5ccdaf9505f676e6d8216 Mon Sep 17 00:00:00 2001
From: Daniel Tschinder <231804+danez@users.noreply.github.com>
Date: Sun, 17 Apr 2022 16:28:06 +0200
Subject: [PATCH 1/3] chore: Update Readme with new react requirements

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 616a9563f5..8c930cb646 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,8 @@ An accessible and easy tab component for ReactJS.
 
 https://reactcommunity.org/react-tabs/
 
-> Supports React 16.8.0 or newer
+> Version 5 of `react-tabs` needs react version 18 or newer
+> Version 4 of `react-tabs` needs react version 16.8 or newer
 
 <ins><blockquote class="rich-diff-level-zero"> <p class="rich-diff-level-one">react-tabs was tested on real mobile devices and browsers with<br>
 <img src="./examples/src/images/Browserstack-logo.svg" height="50" alt="Browserstack">

From 4e3eff13c954810993c3d02adbb01d9cb767669c Mon Sep 17 00:00:00 2001
From: Daniel Tschinder <231804+danez@users.noreply.github.com>
Date: Sun, 17 Apr 2022 16:28:45 +0200
Subject: [PATCH 2/3] chore: Fix readme styling

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 8c930cb646..1bb42a4dbb 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,7 @@ An accessible and easy tab component for ReactJS.
 https://reactcommunity.org/react-tabs/
 
 > Version 5 of `react-tabs` needs react version 18 or newer
+> 
 > Version 4 of `react-tabs` needs react version 16.8 or newer
 
 <ins><blockquote class="rich-diff-level-zero"> <p class="rich-diff-level-one">react-tabs was tested on real mobile devices and browsers with<br>

From f5a877ccfcb72eeecc4c59a43decf2c32daa5253 Mon Sep 17 00:00:00 2001
From: Daniel Tschinder <231804+danez@users.noreply.github.com>
Date: Sun, 17 Apr 2022 18:08:59 +0200
Subject: [PATCH 3/3] feat(typescript): Add new type for custom tabs function
 components (#469)

---
 README.md  | 6 ++++--
 index.d.ts | 4 ++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 1bb42a4dbb..0f2c323ef7 100644
--- a/README.md
+++ b/README.md
@@ -363,16 +363,18 @@ Possible values for tabsRole are:
 - Tab
 - TabPanel
 - TabList
+- Tabs
 
 #### Pass through properties
 
 Note: Because of how react-tabs works internally (it uses cloning to opaquely control various parts of the tab state), you need to pass any incoming props to the component you're wrapping. The easiest way to do this is to use the rest and spread operators, e.g. see `{...otherProps}` below.
 
-```javascript
+```tsx
 import { Tabs, TabList, Tab, TabPanel } from 'react-tabs';
+import type { ReactTabsFunctionComponent, TabProps } from 'react-tabs';
 
 // All custom elements should pass through other props
-const CustomTab = ({ children, ...otherProps }) => (
+const CustomTab = ({ children, ...otherProps }): ReactTabsFunctionComponent<TabProps> => (
   <Tab {...otherProps}>
     <h1>{children}</h1>
   </Tab>
diff --git a/index.d.ts b/index.d.ts
index fe0344f2a6..43c2618205 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -41,6 +41,10 @@ export interface TabPanelProps
   selectedClassName?: string | undefined;
 }
 
+export interface ReactTabsFunctionComponent<P = {}> extends FunctionComponent<P> {
+  tabsRole: 'Tabs' | 'TabList' | 'Tab' | 'TabPanel';
+}
+
 export const Tabs: FunctionComponent<TabsProps>;
 export const TabList: FunctionComponent<TabListProps>;
 export const Tab: FunctionComponent<TabProps>;