From bec3bad304026fe008ee3f8253139b65dbaa418e Mon Sep 17 00:00:00 2001
From: BRobin55 <robin.bongardt@web.de>
Date: Thu, 13 Mar 2025 14:08:51 +0100
Subject: [PATCH] feat: added autoFocus and shouldFocusWrap to table

---
 packages/@react-aria/grid/src/useGrid.ts               | 10 +++++++++-
 packages/react-aria-components/src/Table.tsx           |  8 ++++++--
 .../react-aria-components/stories/Table.stories.tsx    |  2 +-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/@react-aria/grid/src/useGrid.ts b/packages/@react-aria/grid/src/useGrid.ts
index 0ebab0ecab7..8a35c3c9b7b 100644
--- a/packages/@react-aria/grid/src/useGrid.ts
+++ b/packages/@react-aria/grid/src/useGrid.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMAttributes, DOMProps, Key, KeyboardDelegate, RefObject} from '@react-types/shared';
+import {AriaLabelingProps, DOMAttributes, DOMProps, FocusStrategy, Key, KeyboardDelegate, RefObject} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useId} from '@react-aria/utils';
 import {GridCollection} from '@react-types/grid';
 import {GridKeyboardDelegate} from './GridKeyboardDelegate';
@@ -41,6 +41,10 @@ export interface GridProps extends DOMProps, AriaLabelingProps {
    * @default 'row'
    */
   focusMode?: 'row' | 'cell',
+  /** Whether to auto focus the listbox or an option. */
+  autoFocus?: boolean | FocusStrategy,
+  /** Whether focus should wrap around when the end/start is reached. */
+  shouldFocusWrap?: boolean,
   /**
    * A function that returns the text that should be announced by assistive technology when a row is added or removed from selection.
    * @default (key) => state.collection.getItem(key)?.textValue
@@ -70,6 +74,8 @@ export interface GridAria {
  */
 export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<T>>, ref: RefObject<HTMLElement | null>): GridAria {
   let {
+    autoFocus,
+    shouldFocusWrap,
     isVirtualized,
     disallowTypeAhead,
     keyboardDelegate,
@@ -101,6 +107,8 @@ export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<
   }), [keyboardDelegate, state.collection, state.disabledKeys, disabledBehavior, ref, direction, collator, focusMode]);
 
   let {collectionProps} = useSelectableCollection({
+    autoFocus,
+    shouldFocusWrap,
     ref,
     selectionManager: manager,
     keyboardDelegate: delegate,
diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index 815d287adf8..af634937ae3 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -1,4 +1,4 @@
-import {AriaLabelingProps, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
+import {AriaLabelingProps, FocusStrategy, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
 import {BaseCollection, Collection, CollectionBuilder, CollectionNode, createBranchComponent, createLeafComponent, useCachedChildren} from '@react-aria/collections';
 import {buildHeaderRows, TableColumnResizeState} from '@react-stately/table';
 import {ButtonContext} from './Button';
@@ -324,7 +324,11 @@ export interface TableProps extends Omit<SharedTableProps<any>, 'children'>, Sty
   /** Handler that is called when a user performs an action on the row. */
   onRowAction?: (key: Key) => void,
   /** The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the Table. */
-  dragAndDropHooks?: DragAndDropHooks
+  dragAndDropHooks?: DragAndDropHooks,
+  /** Whether to auto focus the listbox or an option. */
+  autoFocus?: boolean | FocusStrategy,
+  /** Whether focus should wrap around when the end/start is reached. */
+  shouldFocusWrap?: boolean
 }
 
 /**
diff --git a/packages/react-aria-components/stories/Table.stories.tsx b/packages/react-aria-components/stories/Table.stories.tsx
index 64f059d9b5b..ddca6166ea4 100644
--- a/packages/react-aria-components/stories/Table.stories.tsx
+++ b/packages/react-aria-components/stories/Table.stories.tsx
@@ -535,7 +535,7 @@ function MyTableBody(props) {
 
 const TableLoadingBodyWrapper = (args: {isLoadingMore: boolean}) => {
   return (
-    <Table aria-label="Files">
+    <Table autoFocus={'first'} shouldFocusWrap aria-label="Files">
       <TableHeader columns={columns}>
         {(column) => (
           <Column isRowHeader={column.isRowHeader}>{column.name}</Column>