Merge branch 'main' into rac-toast

Author: devongovett

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

@@ -22,6 +22,7 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
+    "@react-aria/interactions": "^3.23.0",
     "@react-aria/ssr": "^3.9.7",
     "@react-aria/utils": "^3.27.0",
     "@react-types/shared": "^3.27.0",

packages/@react-aria/collections/src/CollectionBuilder.tsx

@@ -14,6 +14,7 @@ import {BaseCollection} from './BaseCollection';
 import {BaseNode, Document, ElementNode} from './Document';
 import {CachedChildrenOptions, useCachedChildren} from './useCachedChildren';
 import {createPortal} from 'react-dom';
+import {FocusableContext} from '@react-aria/interactions';
 import {forwardRefType, Node} from '@react-types/shared';
 import {Hidden} from './Hidden';
 import React, {createContext, ForwardedRef, forwardRef, JSX, ReactElement, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';
@@ -161,6 +162,7 @@ export function createLeafComponent<T extends object, P extends object, E extend
 export function createLeafComponent<P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node?: any) => ReactElement) {
   let Component = ({node}) => render(node.props, node.props.ref, node);
   let Result = (forwardRef as forwardRefType)((props: P, ref: ForwardedRef<E>) => {
+    let focusableProps = useContext(FocusableContext);
     let isShallow = useContext(ShallowRenderContext);
     if (!isShallow) {
       if (render.length >= 3) {
@@ -169,7 +171,19 @@ export function createLeafComponent<P extends object, E extends Element>(type: s
       return render(props, ref);
     }
 
-    return useSSRCollectionNode(type, props, ref, 'children' in props ? props.children : null, null, node => <Component node={node} />);
+    return useSSRCollectionNode(
+      type,
+      props,
+      ref,
+      'children' in props ? props.children : null,
+      null,
+      node => (
+        // Forward FocusableContext to real DOM tree so tooltips work.
+        <FocusableContext.Provider value={focusableProps}>
+          <Component node={node} />
+        </FocusableContext.Provider>
+      )
+    );
   });
   // @ts-ignore
   Result.displayName = render.name;

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

@@ -30,7 +30,7 @@ export {useMove} from './useMove';
 export {usePress} from './usePress';
 export {useScrollWheel} from './useScrollWheel';
 export {useLongPress} from './useLongPress';
-export {useFocusable, FocusableProvider, Focusable} from './useFocusable';
+export {useFocusable, FocusableProvider, Focusable, FocusableContext} from './useFocusable';
 export {focusSafely} from './focusSafely';
 
 export type {FocusProps, FocusResult} from './useFocus';

packages/@react-aria/interactions/src/useFocusable.tsx

@@ -31,7 +31,9 @@ interface FocusableContextValue extends FocusableProviderProps {
   ref?: MutableRefObject<FocusableElement | null>
 }
 
-let FocusableContext = React.createContext<FocusableContextValue | null>(null);
+// Exported for @react-aria/collections, which forwards this context.
+/** @private */
+export let FocusableContext = React.createContext<FocusableContextValue | null>(null);
 
 function useFocusableContext(ref: RefObject<FocusableElement | null>): FocusableContextValue {
   let context = useContext(FocusableContext) || {};

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

@@ -15,6 +15,7 @@ import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useLinkProps} from '@react-aria/utils';
 import {generateId} from './utils';
 import {TabListState} from '@react-stately/tabs';
+import {useFocusable} from '@react-aria/focus';
 import {useSelectableItem} from '@react-aria/selection';
 
 export interface TabAria {
@@ -60,9 +61,12 @@ export function useTab<T>(
   let domProps = filterDOMProps(item?.props, {labelable: true});
   delete domProps.id;
   let linkProps = useLinkProps(item?.props);
+  let {focusableProps} = useFocusable({
+    isDisabled
+  }, ref);
 
   return {
-    tabProps: mergeProps(domProps, linkProps, itemProps, {
+    tabProps: mergeProps(domProps, focusableProps, linkProps, itemProps, {
       id: tabId,
       'aria-selected': isSelected,
       'aria-disabled': isDisabled || undefined,

packages/@react-aria/tag/src/useTag.ts

@@ -19,8 +19,8 @@ import intlMessages from '../intl/*.json';
 import {KeyboardEvent} from 'react';
 import type {ListState} from '@react-stately/list';
 import {SelectableItemStates} from '@react-aria/selection';
+import {useFocusable, useInteractionModality} from '@react-aria/interactions';
 import {useGridListItem} from '@react-aria/gridlist';
-import {useInteractionModality} from '@react-aria/interactions';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 
@@ -93,6 +93,10 @@ export function useTag<T>(props: AriaTagProps<T>, state: ListState<T>, ref: RefO
 
   let domProps = filterDOMProps(item.props);
   let linkProps = useSyntheticLinkProps(item.props);
+  let {focusableProps} = useFocusable({
+    isDisabled
+  }, ref);
+
   return {
     removeButtonProps: {
       'aria-label': stringFormatter.format('removeButtonLabel'),
@@ -102,7 +106,7 @@ export function useTag<T>(props: AriaTagProps<T>, state: ListState<T>, ref: RefO
       onPress: () => onRemove ? onRemove(new Set([item.key])) : null,
       excludeFromTabOrder: true
     },
-    rowProps: mergeProps(rowProps, domProps, linkProps, {
+    rowProps: mergeProps(focusableProps, rowProps, domProps, linkProps, {
       tabIndex,
       onKeyDown: onRemove ? onKeyDown : undefined,
       'aria-describedby': descProps['aria-describedby']

packages/@react-aria/virtualizer/src/VirtualizerItem.tsx

@@ -88,7 +88,7 @@ export function layoutInfoToStyle(layoutInfo: LayoutInfo, dir: Direction, parent
     ...rectStyles
   };
 
-  if (layoutInfo.isSticky) {
+  if (layoutInfo.isSticky && !parent?.allowOverflow) {
     if (style.top) {
       style.marginTop = style.top;
     }

packages/@react-spectrum/list/src/ListViewLayout.ts

@@ -10,10 +10,10 @@
  * governing permissions and limitations under the License.
  */
 import {InvalidationContext, LayoutInfo, Rect} from '@react-stately/virtualizer';
-import {LayoutNode, ListLayout} from '@react-stately/layout';
+import {LayoutNode, ListLayout, ListLayoutOptions} from '@react-stately/layout';
 import {Node} from '@react-types/shared';
 
-interface ListViewLayoutProps {
+interface ListViewLayoutProps extends ListLayoutOptions {
   isLoading?: boolean
 }
 

packages/@react-spectrum/listbox/src/ListBoxLayout.ts

@@ -2,7 +2,7 @@ import {InvalidationContext, LayoutInfo, Rect} from '@react-stately/virtualizer'
 import {LayoutNode, ListLayout, ListLayoutOptions} from '@react-stately/layout';
 import {Node} from '@react-types/shared';
 
-interface ListBoxLayoutProps {
+interface ListBoxLayoutProps extends ListLayoutOptions {
   isLoading?: boolean
 }