feat: 🎸 add press events to Tab

packages/react-aria-components/src/Tabs.tsx

@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, forwardRefType, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
-import {AriaTabListProps, AriaTabPanelProps, mergeProps, Orientation, useFocusRing, useHover, useTab, useTabList, useTabPanel} from 'react-aria';
+import {AriaLabelingProps, forwardRefType, HoverEvents, Key, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared';
+import {AriaTabListProps, AriaTabPanelProps, mergeProps, Orientation, useFocusRing, useHover, usePress, useTab, useTabList, useTabPanel} from 'react-aria';
 import {Collection, CollectionBuilder, createHideableComponent, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, usePersistedKeys} from './Collection';
 import {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
@@ -43,7 +43,7 @@ export interface TabListRenderProps {
   state: TabListState<unknown>
 }
 
-export interface TabProps extends RenderProps<TabRenderProps>, AriaLabelingProps, LinkDOMProps, HoverEvents {
+export interface TabProps extends RenderProps<TabRenderProps>, AriaLabelingProps, LinkDOMProps, HoverEvents, PressEvents {
   /** The unique id of the tab. */
   id?: Key,
   /** Whether the tab is disabled. */
@@ -257,6 +257,14 @@ export const Tab = /*#__PURE__*/ createLeafComponent('item', (props: TabProps, f
     onHoverEnd: props.onHoverEnd,
     onHoverChange: props.onHoverChange
   });
+  let {pressProps} = usePress({
+    isDisabled,
+    onPress: props.onPress,
+    onPressChange: props.onPressChange,
+    onPressEnd: props.onPressEnd,
+    onPressStart: props.onPressStart,
+    onPressUp: props.onPressUp
+  });
 
   let renderProps = useRenderProps({
     ...props,
@@ -276,7 +284,7 @@ export const Tab = /*#__PURE__*/ createLeafComponent('item', (props: TabProps, f
 
   return (
     <ElementType
-      {...mergeProps(tabProps, focusProps, hoverProps, renderProps)}
+      {...mergeProps(tabProps, focusProps, hoverProps, pressProps, renderProps)}
       ref={ref}
       data-selected={isSelected || undefined}
       data-disabled={isDisabled || undefined}

packages/react-aria-components/stories/Tabs.stories.tsx

@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {action} from '@storybook/addon-actions';
 import {Button, Tab, TabList, TabPanel, TabProps, Tabs, TabsProps} from 'react-aria-components';
 import React, {useState} from 'react';
 import {RouterProvider} from '@react-aria/utils';
@@ -23,7 +24,7 @@ export const TabsExample = () => {
 
   return (
     <RouterProvider navigate={setUrl}>
-      <Tabs selectedKey={url}>
+      <Tabs selectedKey={url} onSelectionChange={action('onSelectionChange')}>
         <TabList aria-label="History of Ancient Rome" style={{display: 'flex', gap: 8}}>
           <CustomTab id="/FoR" href="/FoR">Founding of Rome</CustomTab>
           <CustomTab id="/MaR" href="/MaR">Monarchy and Republic</CustomTab>
@@ -52,7 +53,7 @@ export const TabsRenderProps = () => {
       <Button onPress={() => setTabOrientation((current) => current === 'vertical' ? 'horizontal' : 'vertical')}>
         Change Orientation
       </Button>
-      <Tabs orientation={tabOrientation}>
+      <Tabs orientation={tabOrientation} onSelectionChange={action('onSelectionChange')}>
         {({orientation}) => (
           <div>
             <div style={{display: 'flex', flexDirection: orientation === 'vertical' ? 'row' : 'column', gap: 8}}>
@@ -86,12 +87,20 @@ const CustomTab = (props: TabProps) => {
       {...props}
       style={({isSelected}) => ({
         borderBottom: '2px solid ' + (isSelected ? 'slateblue' : 'transparent')
-      })} />
+      })}
+      onHoverChange={action('onHoverChange')}
+      onHoverEnd={action('onHoverEnd')}
+      onHoverStart={action('onHoverStart')}
+      onPress={action('onPress')}
+      onPressChange={action('onPressChange')}
+      onPressEnd={action('onPressEnd')}
+      onPressStart={action('onPressStart')}
+      onPressUp={action('onPressUp')} />
   );
 };
 
 export const NestedTabs = () => (
-  <Tabs>
+  <Tabs onSelectionChange={action('onSelectionChange')}>
     <TabList style={{display: 'flex', gap: 8}}>
       <CustomTab id="foo">Foo</CustomTab>
       <CustomTab id="bar">Bar</CustomTab>

packages/react-aria-components/test/Tabs.test.js

@@ -159,6 +159,62 @@ describe('Tabs', () => {
     expect(onHoverEnd).not.toHaveBeenCalled();
   });
 
+  it('should support press', () => {
+    let onPress = jest.fn();
+    let onPressChange = jest.fn();
+    let onPressEnd = jest.fn();
+    let onPressStart = jest.fn();
+    let onPressUp = jest.fn();
+    let {getAllByRole} = renderTabs({}, {}, {className: ({isPressed}) => isPressed ? 'press' : '', onPress, onPressChange, onPressEnd, onPressStart, onPressUp});
+    let tab = getAllByRole('tab')[0];
+
+    expect(tab).not.toHaveAttribute('data-pressed');
+    expect(tab).not.toHaveClass('press');
+
+    fireEvent.mouseDown(tab);
+    expect(tab).toHaveAttribute('data-pressed', 'true');
+    expect(tab).toHaveClass('press');
+    expect(onPressStart).toHaveBeenCalledTimes(1);
+    expect(onPressChange).toHaveBeenCalledTimes(1);
+
+    fireEvent.mouseUp(tab);
+    expect(tab).not.toHaveAttribute('data-pressed');
+    expect(tab).not.toHaveClass('press');
+    expect(onPressUp).toHaveBeenCalledTimes(1);
+    expect(onPressEnd).toHaveBeenCalledTimes(1);
+    expect(onPressChange).toHaveBeenCalledTimes(2);
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not show press state when item is not interactive', () => {
+    let onPress = jest.fn();
+    let onPressChange = jest.fn();
+    let onPressEnd = jest.fn();
+    let onPressStart = jest.fn();
+    let onPressUp = jest.fn();
+    let {getAllByRole} = renderTabs({disabledKeys: ['a', 'b', 'c']}, {}, {className: ({isPressed}) => isPressed ? 'press' : '', onPress, onPressChange, onPressEnd, onPressStart, onPressUp});
+    let tab = getAllByRole('tab')[0];
+
+    expect(tab).not.toHaveAttribute('data-pressed');
+    expect(tab).not.toHaveClass('press');
+    expect(onPress).not.toHaveBeenCalled();
+    expect(onPressStart).not.toHaveBeenCalled();
+    expect(onPressChange).not.toHaveBeenCalled();
+    expect(onPressUp).not.toHaveBeenCalled();
+    expect(onPressEnd).not.toHaveBeenCalled();
+
+    fireEvent.mouseDown(tab);
+    expect(tab).not.toHaveAttribute('data-pressed');
+    expect(tab).not.toHaveClass('press');
+
+    fireEvent.mouseUp(tab);
+    expect(onPress).not.toHaveBeenCalled();
+    expect(onPressStart).not.toHaveBeenCalled();
+    expect(onPressChange).not.toHaveBeenCalled();
+    expect(onPressUp).not.toHaveBeenCalled();
+    expect(onPressEnd).not.toHaveBeenCalled();
+  });
+
   it('should support focus ring', async () => {
     let {getAllByRole} = renderTabs({}, {}, {className: ({isFocusVisible}) => isFocusVisible ? 'focus' : ''});
     let tab = getAllByRole('tab')[0];