Merge branch 'main' of github.com:adobe/react-spectrum into subdialogs

# Conflicts:
#	packages/@react-aria/focus/src/index.ts
#	packages/@react-aria/selection/src/useSelectableCollection.ts
#	packages/@react-aria/selection/src/useSelectableItem.ts
#	packages/react-aria-components/test/Menu.test.tsx

Author: devongovett

packages/@react-aria/button/package.json

@@ -22,7 +22,6 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.19.1",
     "@react-aria/interactions": "^3.23.0",
     "@react-aria/toolbar": "3.0.0-beta.12",
     "@react-aria/utils": "^3.27.0",

packages/@react-aria/button/src/useButton.ts

@@ -21,8 +21,7 @@ import {
 import {AriaButtonProps} from '@react-types/button';
 import {DOMAttributes} from '@react-types/shared';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
-import {useFocusable} from '@react-aria/focus';
-import {usePress} from '@react-aria/interactions';
+import {useFocusable, usePress} from '@react-aria/interactions';
 
 export interface AriaButtonOptions<E extends ElementType> extends Omit<AriaButtonProps<E>, 'children'> {}
 

packages/@react-aria/dialog/package.json

@@ -26,7 +26,7 @@
     "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.19.1",
+    "@react-aria/interactions": "^3.23.0",
     "@react-aria/overlays": "^3.25.0",
     "@react-aria/utils": "^3.27.0",
     "@react-types/dialog": "^3.5.15",

packages/@react-aria/dialog/src/useDialog.ts

@@ -13,7 +13,7 @@
 import {AriaDialogProps} from '@react-types/dialog';
 import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';
 import {filterDOMProps, useSlotId} from '@react-aria/utils';
-import {focusSafely} from '@react-aria/focus';
+import {focusSafely} from '@react-aria/interactions';
 import {useEffect, useRef} from 'react';
 import {useOverlayFocusContain} from '@react-aria/overlays';
 

packages/@react-aria/focus/src/FocusScope.tsx

@@ -23,8 +23,7 @@ import {
   useLayoutEffect
 } from '@react-aria/utils';
 import {FocusableElement, RefObject} from '@react-types/shared';
-import {focusSafely} from './focusSafely';
-import {getInteractionModality} from '@react-aria/interactions';
+import {focusSafely, getInteractionModality} from '@react-aria/interactions';
 import {isElementVisible} from './isElementVisible';
 import React, {ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 

packages/@react-aria/focus/src/index.ts

@@ -12,15 +12,14 @@
 
 export {FocusScope, useFocusManager, getFocusableTreeWalker, createFocusManager, isElementInChildOfActiveScope} from './FocusScope';
 export {FocusRing} from './FocusRing';
-export {FocusableProvider, useFocusable} from './useFocusable';
 export {useFocusRing} from './useFocusRing';
-export {focusSafely} from './focusSafely';
 export {useHasTabbableChild} from './useHasTabbableChild';
+export {moveVirtualFocus, dispatchVirtualBlur, dispatchVirtualFocus, getVirtuallyFocusedElement} from './virtualFocus';
 // For backward compatibility.
 export {isFocusable} from '@react-aria/utils';
-export {moveVirtualFocus, dispatchVirtualBlur, dispatchVirtualFocus, getVirtuallyFocusedElement} from './virtualFocus';
+export {FocusableProvider, Focusable, useFocusable, focusSafely} from '@react-aria/interactions';
 
 export type {FocusScopeProps, FocusManager, FocusManagerOptions} from './FocusScope';
 export type {FocusRingProps} from './FocusRing';
-export type {FocusableAria, FocusableOptions, FocusableProviderProps} from './useFocusable';
+export type {FocusableAria, FocusableOptions, FocusableProviderProps} from '@react-aria/interactions';
 export type {AriaFocusRingProps, FocusRingAria} from './useFocusRing';

packages/@react-aria/grid/src/GridKeyboardDelegate.ts

@@ -13,7 +13,7 @@
 import {Direction, DisabledBehavior, Key, KeyboardDelegate, LayoutDelegate, Node, Rect, RefObject, Size} from '@react-types/shared';
 import {DOMLayoutDelegate} from '@react-aria/selection';
 import {getChildNodes, getFirstItem, getLastItem, getNthItem} from '@react-stately/collections';
-import {GridCollection} from '@react-types/grid';
+import {GridCollection, GridNode} from '@react-types/grid';
 
 export interface GridKeyboardDelegateOptions<C> {
   collection: C,
@@ -103,6 +103,35 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
     return null;
   }
 
+  protected getKeyForItemInRowByIndex(key: Key, index: number = 0): Key | null {
+    if (index < 0) {
+      return null;
+    }
+
+    let item = this.collection.getItem(key);
+    if (!item) {
+      return null;
+    }
+
+    let i = 0;
+    for (let child of getChildNodes(item, this.collection) as Iterable<GridNode<T>>) {
+      if (child.colSpan && child.colSpan + i > index) {
+        return child.key ?? null;
+      }
+
+      if (child.colSpan) {
+        i = i + child.colSpan - 1;
+      }
+
+      if (i === index) {
+        return child.key ?? null;
+      }
+
+      i++;
+    }
+    return null;
+  }
+
   getKeyBelow(fromKey: Key) {
     let key: Key | null = fromKey;
     let startItem = this.collection.getItem(key);
@@ -123,11 +152,8 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
     if (key != null) {
       // If focus was on a cell, focus the cell with the same index in the next row.
       if (this.isCell(startItem)) {
-        let item = this.collection.getItem(key);
-        if (!item) {
-          return null;
-        }
-        return getNthItem(getChildNodes(item, this.collection), startItem.index ?? 0)?.key ?? null;
+        let startIndex = startItem.colIndex ? startItem.colIndex : startItem.index;
+        return this.getKeyForItemInRowByIndex(key, startIndex);
       }
 
       // Otherwise, focus the next row
@@ -158,11 +184,8 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
     if (key != null) {
       // If focus was on a cell, focus the cell with the same index in the previous row.
       if (this.isCell(startItem)) {
-        let item = this.collection.getItem(key);
-        if (!item) {
-          return null;
-        }
-        return getNthItem(getChildNodes(item, this.collection), startItem.index ?? 0)?.key || null;
+        let startIndex = startItem.colIndex ? startItem.colIndex : startItem.index;
+        return this.getKeyForItemInRowByIndex(key, startIndex);
       }
 
       // Otherwise, focus the previous row

packages/@react-aria/grid/src/useGridCell.ts

@@ -11,12 +11,12 @@
  */
 
 import {DOMAttributes, FocusableElement, Key, RefObject} from '@react-types/shared';
-import {focusSafely, getFocusableTreeWalker} from '@react-aria/focus';
+import {focusSafely, isFocusVisible} from '@react-aria/interactions';
+import {getFocusableTreeWalker} from '@react-aria/focus';
 import {getScrollParent, mergeProps, scrollIntoViewport} from '@react-aria/utils';
 import {GridCollection, GridNode} from '@react-types/grid';
 import {gridMap} from './utils';
 import {GridState} from '@react-stately/grid';
-import {isFocusVisible} from '@react-aria/interactions';
 import {KeyboardEvent as ReactKeyboardEvent, useRef} from 'react';
 import {useLocale} from '@react-aria/i18n';
 import {useSelectableItem} from '@react-aria/selection';
@@ -30,6 +30,8 @@ export interface GridCellProps {
   focusMode?: 'child' | 'cell',
   /** Whether selection should occur on press up instead of press down. */
   shouldSelectOnPressUp?: boolean,
+  /** Indicates how many columns the data cell spans. */
+  colSpan?: number,
   /**
    * Handler that is called when a user performs an action on the cell.
    * Please use onCellAction at the collection level instead.
@@ -251,6 +253,9 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
   let gridCellProps: DOMAttributes = mergeProps(itemProps, {
     role: 'gridcell',
     onKeyDownCapture,
+    'aria-colspan': node.colSpan,
+    'aria-colindex': node.colIndex != null ? node.colIndex + 1 : undefined, // aria-colindex is 1-based
+    colSpan: isVirtualized ? undefined : node.colSpan,
     onFocus
   });