From 0cb15ff3f1af78cc119827d958d29b743e834149 Mon Sep 17 00:00:00 2001 From: Daniel Tschinder <231804+danez@users.noreply.github.com> Date: Sat, 2 Apr 2022 22:03:46 +0000 Subject: [PATCH 1/2] feat: Add typescript typings to repo --- index.d.ts | 49 ++++++++++++++++++++++++++++++++++++++++++ package.json | 4 +++- src/components/Tab.js | 4 ++-- src/components/Tabs.js | 4 ++-- 4 files changed, 56 insertions(+), 5 deletions(-) create mode 100644 index.d.ts diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 0000000000..ab0bc42921 --- /dev/null +++ b/index.d.ts @@ -0,0 +1,49 @@ +import { FunctionComponent, HTMLProps } from 'react'; + +export interface TabsProps + extends Omit, 'className' | 'onSelect' | 'ref'> { + className?: string | string[] | { [name: string]: boolean } | undefined; + defaultFocus?: boolean | undefined; + defaultIndex?: number | undefined; + direction?: 'rtl' | 'ltr' | undefined; + disabledTabClassName?: string | undefined; + disableUpDownKeys?: boolean | undefined; + domRef?: ((node?: HTMLElement) => void) | undefined; + environment?: Window | undefined; + focusTabOnClick?: boolean | undefined; + forceRenderTabPanel?: boolean | undefined; + onSelect?: + | ((index: number, last: number, event: Event) => boolean | void) + | undefined; + selectedIndex?: number | undefined; + selectedTabClassName?: string | undefined; + selectedTabPanelClassName?: string | undefined; +} + +export interface TabListProps + extends Omit, 'className'> { + className?: string | string[] | { [name: string]: boolean } | undefined; +} + +export interface TabProps + extends Omit, 'className' | 'tabIndex'> { + className?: string | string[] | { [name: string]: boolean } | undefined; + disabled?: boolean | undefined; + disabledClassName?: string | undefined; + selectedClassName?: string | undefined; + tabIndex?: string | undefined; +} + +export interface TabPanelProps + extends Omit, 'className'> { + className?: string | string[] | { [name: string]: boolean } | undefined; + forceRender?: boolean | undefined; + selectedClassName?: string | undefined; +} + +export const Tabs: FunctionComponent; +export const TabList: FunctionComponent; +export const Tab: FunctionComponent; +export const TabPanel: FunctionComponent; + +export declare function resetIdCounter(): void; diff --git a/package.json b/package.json index 20a4d2f72a..5eac8d69fc 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "description": "An accessible and easy tab component for ReactJS", "main": "lib/index.js", "module": "esm/index.js", + "typings": "index.d.ts", "scripts": { "clean:commonjs": "rimraf lib", "clean:umd": "rimraf dist", @@ -36,7 +37,8 @@ "esm", "lib", "style", - "src" + "src", + "index.d.ts" ], "homepage": "https://github.com/reactjs/react-tabs", "keywords": [ diff --git a/src/components/Tab.js b/src/components/Tab.js index 5f8ad0c442..4ca23755b6 100644 --- a/src/components/Tab.js +++ b/src/components/Tab.js @@ -25,14 +25,14 @@ const propTypes = { PropTypes.object, ]), disabled: PropTypes.bool, - tabIndex: PropTypes.string, 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, + tabIndex: PropTypes.string, + tabRef: PropTypes.func, // private }; const Tab = (props) => { diff --git a/src/components/Tabs.js b/src/components/Tabs.js index 9978e52d69..3fcb038def 100644 --- a/src/components/Tabs.js +++ b/src/components/Tabs.js @@ -12,7 +12,6 @@ const MODE_CONTROLLED = 0; const MODE_UNCONTROLLED = 1; const propTypes = { children: childrenPropType, - direction: PropTypes.oneOf(['rtl', 'ltr']), className: PropTypes.oneOfType([ PropTypes.string, PropTypes.array, @@ -20,16 +19,17 @@ const propTypes = { ]), defaultFocus: PropTypes.bool, defaultIndex: PropTypes.number, + direction: PropTypes.oneOf(['rtl', 'ltr']), disabledTabClassName: PropTypes.string, disableUpDownKeys: PropTypes.bool, domRef: PropTypes.func, + environment: PropTypes.object, focusTabOnClick: PropTypes.bool, forceRenderTabPanel: PropTypes.bool, onSelect: onSelectPropType, selectedIndex: selectedIndexPropType, selectedTabClassName: PropTypes.string, selectedTabPanelClassName: PropTypes.string, - environment: PropTypes.object, }; const defaultProps = { defaultFocus: false, From 51b30bbe5adffa29eaba99a50eb43f3b413afade 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 2/2] 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 701b012360..b6318af80b 100644 --- a/README.md +++ b/README.md @@ -374,16 +374,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 => (

{children}

 diff --git a/index.d.ts b/index.d.ts index ab0bc42921..4ffb9ff1f1 100644 --- a/index.d.ts +++ b/index.d.ts @@ -41,6 +41,10 @@ export interface TabPanelProps selectedClassName?: string | undefined; } +export interface ReactTabsFunctionComponent

extends FunctionComponent

{ + tabsRole: 'Tabs' | 'TabList' | 'Tab' | 'TabPanel'; +} + export const Tabs: FunctionComponent; export const TabList: FunctionComponent; export const Tab: FunctionComponent;