React Aria API improvements (#3264)

Author: devongovett

packages/@adobe/spectrum-css-temp/components/slider/index.css

@@ -243,7 +243,6 @@ governing permissions and limitations under the License.
 
 .spectrum-Slider-handle {
   position: absolute;
-  inset-inline-start: 0;
   inset-block-start: calc(var(--spectrum-slider-height) / 2);
   z-index: 2;
 
@@ -253,9 +252,6 @@ governing permissions and limitations under the License.
   inline-size: var(--spectrum-slider-handle-width);
   block-size: var(--spectrum-slider-handle-height);
 
-  margin-block: var(--spectrum-slider-handle-margin-top) 0;
-  margin-inline: calc(var(--spectrum-slider-handle-width) / -2) 0;
-
   border-width: var(--spectrum-slider-handle-border-size);
   border-style: solid;
 

packages/@react-aria/breadcrumbs/src/useBreadcrumbs.ts

@@ -26,7 +26,7 @@ interface BreadcrumbsAria {
  * Provides the behavior and accessibility implementation for a breadcrumbs component.
  * Breadcrumbs display a heirarchy of links to the current page or resource in an application.
  */
-export function useBreadcrumbs<T>(props: AriaBreadcrumbsProps<T>): BreadcrumbsAria {
+export function useBreadcrumbs(props: AriaBreadcrumbsProps): BreadcrumbsAria {
   let {
     'aria-label': ariaLabel,
     ...otherProps

packages/@react-aria/color/src/useColorSlider.ts

@@ -99,30 +99,16 @@ export function useColorSlider(props: ColorSliderAriaOptions, state: ColorSlider
     }
   };
 
-  let thumbPosition = state.getThumbPercent(0);
-  if (orientation === 'vertical' || direction === 'rtl') {
-    thumbPosition = 1 - thumbPosition;
-  }
-
   return {
     trackProps: {
       ...mergeProps(groupProps, trackProps),
       style: {
-        position: 'relative',
-        touchAction: 'none',
+        ...trackProps.style,
         background: generateBackground()
       }
     },
     inputProps,
-    thumbProps: {
-      ...thumbProps,
-      style: {
-        touchAction: 'none',
-        position: 'absolute',
-        [orientation === 'vertical' ? 'top' : 'left']: `${thumbPosition * 100}%`,
-        transform: 'translate(-50%, -50%)'
-      }
-    },
+    thumbProps,
     labelProps,
     outputProps
   };

packages/@react-aria/combobox/src/useComboBox.ts

@@ -75,7 +75,7 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
   } = props;
 
   let formatMessage = useMessageFormatter(intlMessages);
-  let {menuTriggerProps, menuProps} = useMenuTrigger(
+  let {menuTriggerProps, menuProps} = useMenuTrigger<T>(
     {
       type: 'listbox',
       isDisabled: isDisabled || isReadOnly

packages/@react-aria/menu/docs/useMenuTrigger.mdx

@@ -61,7 +61,7 @@ the implementation of the button and popup menu respectively.
 `useMenuTrigger` returns props that you should spread onto the appropriate element:
 
 <TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useMenuTrigger.return.id].properties} />
+  <InterfaceType properties={docs.links[(docs.exports.useMenuTrigger.return.base ?? docs.exports.useMenuTrigger.return).id].properties} />
 </TypeContext.Provider>
 
 State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useMenuTriggerState} />

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

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-export * from './useMenuTrigger';
-export * from './useMenu';
-export * from './useMenuItem';
-export * from './useMenuSection';
+export {useMenuTrigger} from './useMenuTrigger';
+export {useMenu} from './useMenu';
+export {useMenuItem} from './useMenuItem';
+export {useMenuSection} from './useMenuSection';

packages/@react-aria/menu/src/useMenu.ts

@@ -12,7 +12,7 @@
 
 import {AriaMenuProps} from '@react-types/menu';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
-import {HTMLAttributes, RefObject} from 'react';
+import {HTMLAttributes, Key, RefObject} from 'react';
 import {KeyboardDelegate} from '@react-types/shared';
 import {TreeState} from '@react-stately/tree';
 import {useSelectableList} from '@react-aria/selection';
@@ -22,7 +22,7 @@ interface MenuAria {
   menuProps: HTMLAttributes<HTMLElement>
 }
 
-interface AriaMenuOptions<T> extends AriaMenuProps<T> {
+export interface AriaMenuOptions<T> extends Omit<AriaMenuProps<T>, 'children'> {
   /** Whether the menu uses virtual scrolling. */
   isVirtualized?: boolean,
 
@@ -33,6 +33,13 @@ interface AriaMenuOptions<T> extends AriaMenuProps<T> {
   keyboardDelegate?: KeyboardDelegate
 }
 
+interface MenuData {
+  onClose?: () => void,
+  onAction?: (key: Key) => void
+}
+
+export const menuData = new WeakMap<TreeState<unknown>, MenuData>();
+
 /**
  * Provides the behavior and accessibility implementation for a menu component.
  * A menu displays a list of actions or options that a user can choose.
@@ -59,6 +66,11 @@ export function useMenu<T>(props: AriaMenuOptions<T>, state: TreeState<T>, ref:
     shouldFocusWrap
   });
 
+  menuData.set(state, {
+    onClose: props.onClose,
+    onAction: props.onAction
+  });
+
   return {
     menuProps: mergeProps(domProps, {
       role: 'menu',

packages/@react-aria/menu/src/useMenuItem.ts

@@ -13,6 +13,7 @@
 import {getItemCount} from '@react-stately/collections';
 import {HTMLAttributes, Key, RefObject} from 'react';
 import {isFocusVisible, useHover, usePress} from '@react-aria/interactions';
+import {menuData} from './useMenu';
 import {mergeProps, useSlotId} from '@react-aria/utils';
 import {PressEvent} from '@react-types/shared';
 import {TreeState} from '@react-stately/tree';
@@ -29,14 +30,29 @@ interface MenuItemAria {
   descriptionProps: HTMLAttributes<HTMLElement>,
 
   /** Props for the keyboard shortcut text element inside the item, if any. */
-  keyboardShortcutProps: HTMLAttributes<HTMLElement>
+  keyboardShortcutProps: HTMLAttributes<HTMLElement>,
+
+  /** Whether the item is currently focused. */
+  isFocused: boolean,
+  /** Whether the item is currently selected. */
+  isSelected: boolean,
+  /** Whether the item is currently in a pressed state. */
+  isPressed: boolean,
+  /** Whether the item is disabled. */
+  isDisabled: boolean
 }
 
 interface AriaMenuItemProps {
-  /** Whether the menu item is disabled. */
+  /**
+   * Whether the menu item is disabled.
+   * @deprecated - pass disabledKeys to useTreeState instead.
+   */
   isDisabled?: boolean,
 
-  /** Whether the menu item is selected. */
+  /**
+   * Whether the menu item is selected.
+   * @deprecated - pass selectedKeys to useTreeState instead.
+   */
   isSelected?: boolean,
 
   /** A screen reader only label for the menu item. */
@@ -45,7 +61,10 @@ interface AriaMenuItemProps {
   /** The unique key for the menu item. */
   key?: Key,
 
-  /** Handler that is called when the menu should close after selecting an item. */
+  /**
+   * Handler that is called when the menu should close after selecting an item.
+   * @deprecated - pass to the menu instead.
+   */
   onClose?: () => void,
 
   /**
@@ -57,7 +76,10 @@ interface AriaMenuItemProps {
   /** Whether the menu item is contained in a virtual scrolling menu. */
   isVirtualized?: boolean,
 
-  /** Handler that is called when the user activates the item. */
+  /**
+   * Handler that is called when the user activates the item.
+   * @deprecated - pass to the menu instead.
+   */
   onAction?: (key: Key) => void
 }
 
@@ -69,15 +91,19 @@ interface AriaMenuItemProps {
  */
 export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, ref: RefObject<HTMLElement>): MenuItemAria {
   let {
-    isSelected,
-    isDisabled,
     key,
-    onClose,
     closeOnSelect,
-    isVirtualized,
-    onAction
+    isVirtualized
   } = props;
 
+  let isDisabled = props.isDisabled ?? state.disabledKeys.has(key);
+  let isSelected = props.isSelected ?? state.selectionManager.isSelected(key);
+  let isFocused = state.selectionManager.focusedKey === key;
+
+  let data = menuData.get(state);
+  let onClose = props.onClose || data.onClose;
+  let onAction = props.onAction || data.onAction;
+
   let role = 'menuitem';
   if (state.selectionManager.selectionMode === 'single') {
     role = 'menuitemradio';
@@ -156,7 +182,7 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
     allowsDifferentPressOrigin: true
   });
 
-  let {pressProps} = usePress({onPressStart, onPressUp, isDisabled});
+  let {pressProps, isPressed} = usePress({onPressStart, onPressUp, isDisabled});
   let {hoverProps} = useHover({
     isDisabled,
     onHoverStart() {
@@ -180,6 +206,10 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
     },
     keyboardShortcutProps: {
       id: keyboardId
-    }
+    },
+    isFocused,
+    isSelected,
+    isPressed,
+    isDisabled
   };
 }

packages/@react-aria/menu/src/useMenuTrigger.ts

@@ -11,12 +11,13 @@
  */
 
 import {AriaButtonProps} from '@react-types/button';
-import {HTMLAttributes, RefObject} from 'react';
+import {AriaMenuOptions} from './useMenu';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {MenuTriggerState} from '@react-stately/menu';
 import {MenuTriggerType} from '@react-types/menu';
-import {mergeProps, useId} from '@react-aria/utils';
+import {RefObject} from 'react';
+import {useId} from '@react-aria/utils';
 import {useLongPress} from '@react-aria/interactions';
 import {useMessageFormatter} from '@react-aria/i18n';
 import {useOverlayTrigger} from '@react-aria/overlays';
@@ -30,20 +31,20 @@ interface MenuTriggerAriaProps {
   trigger?: MenuTriggerType
 }
 
-interface MenuTriggerAria {
+interface MenuTriggerAria<T> {
   /** Props for the menu trigger element. */
   menuTriggerProps: AriaButtonProps,
 
   /** Props for the menu. */
-  menuProps: HTMLAttributes<HTMLElement>
+  menuProps: AriaMenuOptions<T>
 }
 
 /**
  * Provides the behavior and accessibility implementation for a menu trigger.
  * @param props - Props for the menu trigger.
  * @param state - State for the menu trigger.
  */
-export function useMenuTrigger(props: MenuTriggerAriaProps, state: MenuTriggerState, ref: RefObject<HTMLElement>): MenuTriggerAria {
+export function useMenuTrigger<T>(props: MenuTriggerAriaProps, state: MenuTriggerState, ref: RefObject<HTMLElement>): MenuTriggerAria<T> {
   let {
     type = 'menu' as MenuTriggerAriaProps['type'],
     isDisabled,
@@ -117,17 +118,18 @@ export function useMenuTrigger(props: MenuTriggerAriaProps, state: MenuTriggerSt
     }
   };
 
-  triggerProps = mergeProps(triggerProps, trigger === 'press' ? pressProps : longPressProps);
-
   return {
     menuTriggerProps: {
       ...triggerProps,
+      ...(trigger === 'press' ? pressProps : longPressProps),
       id: menuTriggerId,
       onKeyDown
     },
     menuProps: {
       ...overlayProps,
-      'aria-labelledby': menuTriggerId
+      'aria-labelledby': menuTriggerId,
+      autoFocus: state.focusStrategy,
+      onClose: state.close
     }
   };
 }

packages/@react-aria/overlays/src/useOverlayTrigger.ts

@@ -61,7 +61,8 @@ export function useOverlayTrigger(props: OverlayTriggerProps, state: OverlayTrig
     triggerProps: {
       'aria-haspopup': ariaHasPopup,
       'aria-expanded': isOpen,
-      'aria-controls': isOpen ? overlayId : null
+      'aria-controls': isOpen ? overlayId : null,
+      onPress: state.toggle
     },
     overlayProps: {
       id: overlayId