react-aria-components 1.7.1 → 1.8.0

package/src/Toast.tsx

@@ -10,21 +10,28 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaToastProps, AriaToastRegionProps, mergeProps, useFocusRing, useToast, useToastRegion} from 'react-aria';
+import {AriaToastProps, AriaToastRegionProps, mergeProps, useFocusRing, useHover, useLocale, useToast, useToastRegion} from 'react-aria';
 import {ButtonContext} from './Button';
 import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {createPortal} from 'react-dom';
 import {forwardRefType} from '@react-types/shared';
 import {QueuedToast, ToastQueue, ToastState, useToastQueue} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactElement, useContext} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactElement, ReactNode, useContext} from 'react';
 import {TextContext} from './Text';
+import {useIsSSR} from '@react-aria/ssr';
 import {useObjectRef} from '@react-aria/utils';
+import {useUNSAFE_PortalContext} from '@react-aria/overlays';
 
-const ToastStateContext = createContext<ToastState<any> | null>(null);
+export const ToastStateContext = createContext<ToastState<any> | null>(null);
 
 export interface ToastRegionRenderProps<T> {
   /** A list of all currently visible toasts. */
   visibleToasts: QueuedToast<T>[],
+  /**
+   * Whether the toast region is currently hovered with a mouse.
+   * @selector [data-hovered]
+   */
+  isHovered: boolean,
   /**
    * Whether the toast region is currently focused.
    * @selector [data-focused]
@@ -40,54 +47,85 @@ export interface ToastRegionRenderProps<T> {
 export interface ToastRegionProps<T> extends AriaToastRegionProps, StyleRenderProps<ToastRegionRenderProps<T>> {
   /** The queue of toasts to display. */
   queue: ToastQueue<T>,
-  /** A function to render each toast. */
-  children: (renderProps: {toast: QueuedToast<T>}) => ReactElement
+  /** A function to render each toast, or children containing a `<ToastList>`. */
+  children: ReactNode | ((renderProps: {toast: QueuedToast<T>}) => ReactElement)
 }
 
 /**
  * A ToastRegion displays one or more toast notifications.
  */
 export const ToastRegion = /*#__PURE__*/ (forwardRef as forwardRefType)(function ToastRegion<T>(props: ToastRegionProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element | null {
+  let isSSR = useIsSSR();
   let state = useToastQueue(props.queue);
   let objectRef = useObjectRef(ref);
   let {regionProps} = useToastRegion(props, state, objectRef);
 
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
+  let {hoverProps, isHovered} = useHover({});
   let renderProps = useRenderProps({
     ...props,
     children: undefined,
     defaultClassName: 'react-aria-ToastRegion',
     values: {
       visibleToasts: state.visibleToasts,
+      isHovered,
       isFocused,
       isFocusVisible
     }
   });
 
+  let {direction} = useLocale();
+  let portalContainer;
+  let {getContainer} = useUNSAFE_PortalContext();
+  if (!isSSR) {
+    portalContainer = document.body;
+    if (getContainer) {
+      portalContainer = getContainer();
+    }
+  }
+
   let region = (
     <ToastStateContext.Provider value={state}>
       <div
         {...renderProps}
-        {...mergeProps(regionProps, focusProps)}
+        {...mergeProps(regionProps, focusProps, hoverProps)}
+        dir={direction}
         ref={objectRef}
+        data-hovered={isHovered || undefined}
         data-focused={isFocused || undefined}
         data-focus-visible={isFocusVisible || undefined}>
-        {typeof props.children === 'function' ? <ToastList {...props} style={{display: 'contents'}} /> : props.children}
+        {typeof props.children === 'function' ? <ToastList {...props} className={undefined} style={{display: 'contents'}}>{props.children}</ToastList> : props.children}
       </div>
     </ToastStateContext.Provider>
   );
 
-  return state.visibleToasts.length > 0 && typeof document !== 'undefined'
-    ? createPortal(region, document.body)
+  return state.visibleToasts.length > 0 && portalContainer
+    ? createPortal(region, portalContainer)
     : null;
 });
 
-// TODO: possibly export this so additional children can be added to the region, outside the list.
-const ToastList = /*#__PURE__*/ (forwardRef as forwardRefType)(function ToastList<T>(props: ToastRegionProps<T>, ref: ForwardedRef<HTMLOListElement>) {
+export interface ToastListProps<T> extends Omit<ToastRegionProps<T>, 'queue' | 'children'> {
+  /** A function to render each toast. */
+  children: (renderProps: {toast: QueuedToast<T>}) => ReactElement
+}
+
+export const ToastList = /*#__PURE__*/ (forwardRef as forwardRefType)(function ToastList<T>(props: ToastListProps<T>, ref: ForwardedRef<HTMLOListElement>) {
   let state = useContext(ToastStateContext)!;
+  let {hoverProps, isHovered} = useHover({});
+  let renderProps = useRenderProps({
+    ...props,
+    children: undefined,
+    defaultClassName: 'react-aria-ToastList',
+    values: {
+      visibleToasts: state.visibleToasts,
+      isFocused: false,
+      isFocusVisible: false,
+      isHovered
+    }
+  });
+
   return (
-    // @ts-ignore
-    <ol ref={ref} style={props.style} className={props.className}>
+    <ol {...hoverProps} {...renderProps} ref={ref}>
       {state.visibleToasts.map((toast) => (
         <li key={toast.key} style={{display: 'contents'}}>
           {props.children({toast})}

package/src/Tooltip.tsx

@@ -41,6 +41,7 @@ export interface TooltipProps extends PositionProps, Pick<AriaPositionProps, 'ar
   /**
    * The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.
    * @default document.body
+   * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.
    */
   UNSTABLE_portalContainer?: Element,
   /**
@@ -80,7 +81,7 @@ export const TooltipContext = createContext<ContextValue<TooltipProps, HTMLDivEl
  * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip
  * relative to the trigger.
  */
-export function TooltipTrigger(props: TooltipTriggerComponentProps) {
+export function TooltipTrigger(props: TooltipTriggerComponentProps): ReactNode {
   let state = useTooltipTriggerState(props);
   let ref = useRef<FocusableElement>(null);
   let {triggerProps, tooltipProps} = useTooltipTrigger(props, state, ref);

package/src/Tree.tsx

@@ -384,14 +384,14 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
   });
 
   useEffect(() => {
-    if (!item.textValue) {
+    if (!item.textValue && process.env.NODE_ENV !== 'production') {
       console.warn('A `textValue` prop is required for <TreeItem> elements in order to support accessibility features such as type to select.');
     }
   }, [item.textValue]);
 
   let expandButtonRef = useRef<HTMLButtonElement>(null);
   useEffect(() => {
-    if (hasChildItems && !expandButtonRef.current) {
+    if (hasChildItems && !expandButtonRef.current && process.env.NODE_ENV !== 'production') {
       console.warn('Expandable tree items must contain a expand button so screen reader users can expand/collapse the item.');
     }
   // eslint-disable-next-line

package/src/Virtualizer.tsx

@@ -13,7 +13,7 @@
 import {CollectionBranchProps, CollectionRenderer, CollectionRendererContext, CollectionRootProps} from './Collection';
 import {DropPosition, DropTarget, DropTargetDelegate, ItemDropTarget, Node} from '@react-types/shared';
 import {Layout, ReusableView, useVirtualizerState, VirtualizerState} from '@react-stately/virtualizer';
-import React, {createContext, ReactElement, ReactNode, useContext, useMemo} from 'react';
+import React, {createContext, ReactNode, useContext, useMemo} from 'react';
 import {useScrollView, VirtualizerItem} from '@react-aria/virtualizer';
 
 type View = ReusableView<Node<unknown>, ReactNode>;
@@ -50,7 +50,7 @@ const LayoutContext = createContext<LayoutContextValue | null>(null);
  * It supports very large collections by only rendering visible items to the DOM, reusing
  * them as the user scrolls.
  */
-export function Virtualizer<O>(props: VirtualizerProps<O>) {
+export function Virtualizer<O>(props: VirtualizerProps<O>): ReactNode {
   let {children, layout: layoutProp, layoutOptions} = props;
   let layout = useMemo(() => typeof layoutProp === 'function' ? new layoutProp() : layoutProp, [layoutProp]);
   let renderer: CollectionRenderer = useMemo(() => ({
@@ -129,7 +129,7 @@ function renderWrapper(
   parent: View | null,
   reusableView: View,
   renderDropIndicator?: (target: ItemDropTarget) => ReactNode
-): ReactElement {
+): ReactNode {
   let rendered = (
     <VirtualizerItem
       key={reusableView.key}

package/src/index.ts

@@ -70,7 +70,7 @@ export {TagGroup, TagGroupContext, TagList, TagListContext, Tag} from './TagGrou
 export {Text, TextContext} from './Text';
 export {TextArea, TextAreaContext} from './TextArea';
 export {TextField, TextFieldContext} from './TextField';
-export {Toast as UNSTABLE_Toast, ToastRegion as UNSTABLE_ToastRegion, ToastContent as UNSTABLE_ToastContent} from './Toast';
+export {Toast as UNSTABLE_Toast, ToastList as UNSTABLE_ToastList, ToastRegion as UNSTABLE_ToastRegion, ToastContent as UNSTABLE_ToastContent, ToastStateContext as UNSTABLE_ToastStateContext} from './Toast';
 export {ToggleButton, ToggleButtonContext} from './ToggleButton';
 export {ToggleButtonGroup, ToggleButtonGroupContext, ToggleGroupStateContext} from './ToggleButtonGroup';
 export {Toolbar, ToolbarContext} from './Toolbar';
@@ -133,7 +133,7 @@ export type {TagGroupProps, TagListProps, TagListRenderProps, TagProps, TagRende
 export type {TextAreaProps} from './TextArea';
 export type {TextFieldProps, TextFieldRenderProps} from './TextField';
 export type {TextProps} from './Text';
-export type {ToastRegionProps, ToastRegionRenderProps, ToastProps, ToastRenderProps} from './Toast';
+export type {ToastRegionProps, ToastListProps, ToastRegionRenderProps, ToastProps, ToastRenderProps} from './Toast';
 export type {ToggleButtonProps, ToggleButtonRenderProps} from './ToggleButton';
 export type {ToggleButtonGroupProps, ToggleButtonGroupRenderProps} from './ToggleButtonGroup';
 export type {ToolbarProps, ToolbarRenderProps} from './Toolbar';
@@ -146,6 +146,6 @@ export type {VirtualizerProps} from './Virtualizer';
 
 export type {DateValue, DateRange, TimeValue} from 'react-aria';
 export type {DirectoryDropItem, DraggableCollectionEndEvent, DraggableCollectionMoveEvent, DraggableCollectionStartEvent, DragPreviewRenderer, DragTypes, DropItem, DropOperation, DroppableCollectionDropEvent, DroppableCollectionEnterEvent, DroppableCollectionExitEvent, DroppableCollectionInsertDropEvent, DroppableCollectionMoveEvent, DroppableCollectionOnItemDropEvent, DroppableCollectionReorderEvent, DroppableCollectionRootDropEvent, DropPosition, DropTarget, FileDropItem, ItemDropTarget, RootDropTarget, TextDropItem, PressEvent} from 'react-aria';
-export type {Color, ColorSpace, ColorFormat, Key, Selection, SortDescriptor, SortDirection, SelectionMode, ToastOptions} from 'react-stately';
+export type {Color, ColorSpace, ColorFormat, Key, QueuedToast, Selection, SortDescriptor, SortDirection, SelectionMode, ToastOptions} from 'react-stately';
 export type {ValidationResult, RouterConfig} from '@react-types/shared';
 export type {ListLayoutOptions, GridLayoutOptions, WaterfallLayoutOptions} from '@react-stately/layout';

package/src/utils.tsx

@@ -87,7 +87,14 @@ interface RenderPropsHookOptions<T> extends RenderProps<T>, SharedDOMProps, Aria
   defaultStyle?: CSSProperties
 }
 
-export function useRenderProps<T>(props: RenderPropsHookOptions<T>) {
+interface RenderPropsHookRetVal {
+  className?: string,
+  style?: CSSProperties,
+  children?: ReactNode,
+  'data-rac': string
+}
+
+export function useRenderProps<T>(props: RenderPropsHookOptions<T>): RenderPropsHookRetVal {
   let {
     className,
     style,