useTab: adds support for shouldSelectOnPressUp (#4342)

Author: beamery-tomht

packages/@react-aria/tabs/src/useTab.ts

@@ -37,7 +37,7 @@ export function useTab<T>(
   state: TabListState<T>,
   ref: RefObject<FocusableElement>
 ): TabAria {
-  let {key, isDisabled: propsDisabled} = props;
+  let {key, isDisabled: propsDisabled, shouldSelectOnPressUp} = props;
   let {selectionManager: manager, selectedKey} = state;
 
   let isSelected = key === selectedKey;
@@ -47,7 +47,8 @@ export function useTab<T>(
     selectionManager: manager,
     key,
     ref,
-    isDisabled
+    isDisabled,
+    shouldSelectOnPressUp
   });
 
   let tabId = generateId(state, key, 'tab');
@@ -69,4 +70,3 @@ export function useTab<T>(
     isPressed
   };
 }
-

packages/@react-aria/tabs/stories/example.tsx

@@ -14,26 +14,40 @@ import React from 'react';
 import {useTab, useTabList, useTabPanel} from '@react-aria/tabs';
 import {useTabListState} from '@react-stately/tabs';
 
-export function Tabs(props) {
+export function Tabs({shouldSelectOnPressUp, ...props}) {
   let state = useTabListState(props);
   let ref = React.useRef();
   let {tabListProps} = useTabList(props, state, ref);
   return (
     <div style={{height: '150px'}}>
-      <div {...tabListProps} ref={ref} style={{display: 'flex', borderBottom: '1px solid grey', borderLeft: '10px solid grey', borderRight: '20px solid grey', maxWidth: '400px', overflow: 'auto'}}>
+      <div
+        {...tabListProps}
+        ref={ref}
+        style={{
+          display: 'flex',
+          borderBottom: '1px solid grey',
+          borderLeft: '10px solid grey',
+          borderRight: '20px solid grey',
+          maxWidth: '400px',
+          overflow: 'auto'
+        }}>
         {[...state.collection].map((item) => (
-          <Tab key={item.key} item={item} state={state} />
+          <Tab
+            key={item.key}
+            item={item}
+            state={state}
+            shouldSelectOnPressUp={shouldSelectOnPressUp} />
         ))}
       </div>
       <TabPanel key={state.selectedItem?.key} state={state} />
     </div>
   );
 }
 
-function Tab({item, state}) {
+function Tab({shouldSelectOnPressUp, item, state}) {
   let {key, rendered} = item;
   let ref = React.useRef();
-  let {tabProps} = useTab({key}, state, ref);
+  let {tabProps} = useTab({key, shouldSelectOnPressUp}, state, ref);
   let isSelected = state.selectedKey === key;
   let isDisabled = state.disabledKeys.has(key);
   return (

packages/@react-aria/tabs/stories/useTabList.stories.tsx

@@ -25,8 +25,8 @@ for (let i = 0; i < 50; i++) {
   lotsOfItems.push({name: 'Item ' + i, contents: 'Contents ' + i});
 }
 
-const Template = () => () => (
-  <Tabs aria-label="example" items={lotsOfItems}>
+const Template = () => (props) => (
+  <Tabs aria-label="example" items={lotsOfItems} {...props}>
     {(item) => (
       <Item key={item.name} title={item.name}>
         {item.contents}
@@ -37,3 +37,6 @@ const Template = () => () => (
 
 export const ScrollTesting = Template().bind({});
 ScrollTesting.args = {};
+
+export const OnPressEndSelection = Template().bind({});
+OnPressEndSelection.args = {shouldSelectOnPressUp: true};

packages/@react-types/tabs/src/index.d.ts

@@ -25,7 +25,9 @@ export interface AriaTabProps extends AriaLabelingProps {
   /** The key of the tab. */
   key: Key,
   /** Whether the tab should be disabled. */
-  isDisabled?: boolean
+  isDisabled?: boolean,
+  /** Whether the tab selection should occur on press up instead of press down. */
+  shouldSelectOnPressUp?: boolean
 }
 
 export interface TabListProps<T> extends CollectionBase<T>, Omit<SingleSelection, 'disallowEmptySelection'> {