TabPanel: Convert to TypeScript (#43536)

* TabPanel: Convert to TypeScript

* Convert tests

* Convert tests to TS

* Simplify

* Replace noop with conditional chaining

* Export without contextConnect

* Add description to `className`

packages/components/src/tab-panel/README.md

@@ -136,7 +136,7 @@ The class to add to the active tab
 
 #### initialTabName
 
-Optionally provide a tab name for a tab to be selected upon mounting of component. If this prop is not set, the first tab will be selected by default.
+The name of the tab to be selected upon mounting of component. If this prop is not set, the first tab will be selected by default.
 
 -   Type: `String`
 -   Required: No
@@ -145,7 +145,6 @@ Optionally provide a tab name for a tab to be selected upon mounting of componen
 #### children
 
 A function which renders the tabviews given the selected tab. The function is passed the active tab object as an argument as defined the tabs prop.
-The element to which the tooltip should anchor.
 
 -   Type: (`Object`) => `Element`
 -   Required: Yes

packages/components/src/tab-panel/index.js → packages/components/src/tab-panel/index.tsx

@@ -15,10 +15,16 @@ import { useInstanceId } from '@wordpress/compose';
  */
 import { NavigableMenu } from '../navigable-container';
 import Button from '../button';
+import type { TabButtonProps, TabPanelProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
 
-const noop = () => {};
-
-const TabButton = ( { tabId, onClick, children, selected, ...rest } ) => (
+const TabButton = ( {
+	tabId,
+	onClick,
+	children,
+	selected,
+	...rest
+}: TabButtonProps ) => (
 	<Button
 		role="tab"
 		tabIndex={ selected ? null : -1 }
@@ -31,24 +37,60 @@ const TabButton = ( { tabId, onClick, children, selected, ...rest } ) => (
 	</Button>
 );
 
-export default function TabPanel( {
+/**
+ * TabPanel is an ARIA-compliant tabpanel.
+ *
+ * TabPanels organize content across different screens, data sets, and interactions.
+ * It has two sections: a list of tabs, and the view to show when tabs are chosen.
+ *
+ * ```jsx
+ * import { TabPanel } from '@wordpress/components';
+ *
+ * const onSelect = ( tabName ) => {
+ *   console.log( 'Selecting tab', tabName );
+ * };
+ *
+ * const MyTabPanel = () => (
+ *   <TabPanel
+ *     className="my-tab-panel"
+ *     activeClass="active-tab"
+ *     onSelect={ onSelect }
+ *     tabs={ [
+ *       {
+ *         name: 'tab1',
+ *         title: 'Tab 1',
+ *         className: 'tab-one',
+ *       },
+ *       {
+ *         name: 'tab2',
+ *         title: 'Tab 2',
+ *         className: 'tab-two',
+ *       },
+ *     ] }
+ *   >
+ *     { ( tab ) => <p>{ tab.title }</p> }
+ *   </TabPanel>
+ * );
+ * ```
+ */
+export function TabPanel( {
 	className,
 	children,
 	tabs,
 	initialTabName,
 	orientation = 'horizontal',
 	activeClass = 'is-active',
-	onSelect = noop,
-} ) {
+	onSelect,
+}: WordPressComponentProps< TabPanelProps, 'div', false > ) {
 	const instanceId = useInstanceId( TabPanel, 'tab-panel' );
-	const [ selected, setSelected ] = useState( null );
+	const [ selected, setSelected ] = useState< string >();
 
-	const handleClick = ( tabKey ) => {
+	const handleClick = ( tabKey: string ) => {
 		setSelected( tabKey );
-		onSelect( tabKey );
+		onSelect?.( tabKey );
 	};
 
-	const onNavigate = ( childIndex, child ) => {
+	const onNavigate = ( _childIndex: number, child: HTMLButtonElement ) => {
 		child.click();
 	};
 	const selectedTab = find( tabs, { name: selected } );
@@ -58,7 +100,8 @@ export default function TabPanel( {
 		const newSelectedTab = find( tabs, { name: selected } );
 		if ( ! newSelectedTab ) {
 			setSelected(
-				initialTabName || ( tabs.length > 0 ? tabs[ 0 ].name : null )
+				initialTabName ||
+					( tabs.length > 0 ? tabs[ 0 ].name : undefined )
 			);
 		}
 	}, [ tabs ] );
@@ -104,3 +147,5 @@ export default function TabPanel( {
 		</div>
 	);
 }
+
+export default TabPanel;

packages/components/src/tab-panel/stories/index.tsx

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import TabPanel from '..';
+
+const meta: ComponentMeta< typeof TabPanel > = {
+	title: 'Components/TabPanel',
+	component: TabPanel,
+	parameters: {
+		controls: { expanded: true },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof TabPanel > = ( props ) => {
+	return <TabPanel { ...props } />;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: ( tab ) => <p>Selected tab: { tab.title }</p>,
+	tabs: [
+		{
+			name: 'tab1',
+			title: 'Tab 1',
+		},
+		{
+			name: 'tab2',
+			title: 'Tab 2',
+		},
+	],
+};