react-aria-components 1.8.0 → 1.10.0

package/src/Table.tsx

@@ -10,7 +10,7 @@ import {DisabledBehavior, DraggableCollectionState, DroppableCollectionState, Mu
 import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
 import {DragAndDropHooks} from './useDragAndDrop';
 import {DraggableItemResult, DragPreviewRenderer, DropIndicatorAria, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useFocusRing, useHover, useLocale, useLocalizedStringFormatter, useTable, useTableCell, useTableColumnHeader, useTableColumnResize, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox, useVisuallyHidden} from 'react-aria';
-import {filterDOMProps, isScrollable, mergeRefs, useLayoutEffect, useObjectRef, useResizeObserver} from '@react-aria/utils';
+import {filterDOMProps, inertValue, isScrollable, LoadMoreSentinelProps, mergeRefs, UNSTABLE_useLoadMoreSentinel, useLayoutEffect, useObjectRef, useResizeObserver} from '@react-aria/utils';
 import {GridNode} from '@react-types/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -931,9 +931,10 @@ export const TableBody = /*#__PURE__*/ createBranchComponent('tablebody', <T ext
   let isDroppable = !!dragAndDropHooks?.useDroppableCollectionState && !dropState?.isDisabled;
   let isRootDropTarget = isDroppable && !!dropState && (dropState.isDropTarget({type: 'root'}) ?? false);
 
+  let isEmpty = collection.size === 0 || (collection.rows.length === 1 && collection.rows[0].type === 'loader');
   let renderValues = {
     isDropTarget: isRootDropTarget,
-    isEmpty: collection.size === 0
+    isEmpty
   };
   let renderProps = useRenderProps({
     ...props,
@@ -947,7 +948,8 @@ export const TableBody = /*#__PURE__*/ createBranchComponent('tablebody', <T ext
   let TR = useElementType('tr');
   let TD = useElementType('td');
   let numColumns = collection.columnCount;
-  if (collection.size === 0 && props.renderEmptyState && state) {
+
+  if (isEmpty && props.renderEmptyState && state) {
     let rowProps = {};
     let rowHeaderProps = {};
     let style = {};
@@ -978,7 +980,7 @@ export const TableBody = /*#__PURE__*/ createBranchComponent('tablebody', <T ext
       {...mergeProps(filterDOMProps(props as any), rowGroupProps)}
       {...renderProps}
       ref={ref}
-      data-empty={collection.size === 0 || undefined}>
+      data-empty={isEmpty || undefined}>
       {isDroppable && <RootDropIndicator />}
       <CollectionBranch
         collection={collection}
@@ -1346,17 +1348,34 @@ function RootDropIndicator() {
   );
 }
 
-export interface TableLoadingIndicatorProps extends StyleProps {
-  children?: ReactNode
+export interface TableLoadingSentinelProps extends Omit<LoadMoreSentinelProps, 'collection'>, StyleProps {
+  /**
+   * The load more spinner to render when loading additional items.
+   */
+  children?: ReactNode,
+  /**
+   * Whether or not the loading spinner should be rendered or not.
+   */
+  isLoading?: boolean
 }
 
-export const UNSTABLE_TableLoadingIndicator = createLeafComponent('loader', function TableLoadingIndicator<T extends object>(props: TableLoadingIndicatorProps, ref: ForwardedRef<HTMLTableRowElement>, item: Node<T>) {
+export const UNSTABLE_TableLoadingSentinel = createLeafComponent('loader', function TableLoadingIndicator<T extends object>(props: TableLoadingSentinelProps, ref: ForwardedRef<HTMLTableRowElement>, item: Node<T>) {
   let state = useContext(TableStateContext)!;
   let {isVirtualized} = useContext(CollectionRendererContext);
+  let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;
   let numColumns = state.collection.columns.length;
 
+  let sentinelRef = useRef(null);
+  let memoedLoadMoreProps = useMemo(() => ({
+    onLoadMore,
+    collection: state?.collection,
+    sentinelRef,
+    scrollOffset
+  }), [onLoadMore, scrollOffset, state?.collection]);
+  UNSTABLE_useLoadMoreSentinel(memoedLoadMoreProps, sentinelRef);
+
   let renderProps = useRenderProps({
-    ...props,
+    ...otherProps,
     id: undefined,
     children: item.rendered,
     defaultClassName: 'react-aria-TableLoadingIndicator',
@@ -1369,7 +1388,7 @@ export const UNSTABLE_TableLoadingIndicator = createLeafComponent('loader', func
   let style = {};
 
   if (isVirtualized) {
-    rowProps['aria-rowindex'] = state.collection.headerRows.length + state.collection.size ;
+    rowProps['aria-rowindex'] = item.index + 1 + state.collection.headerRows.length;
     rowHeaderProps['aria-colspan'] = numColumns;
     style = {display: 'contents'};
   } else {
@@ -1378,15 +1397,24 @@ export const UNSTABLE_TableLoadingIndicator = createLeafComponent('loader', func
 
   return (
     <>
-      <TR
-        role="row"
-        ref={ref}
-        {...mergeProps(filterDOMProps(props as any), rowProps)}
-        {...renderProps}>
-        <TD role="rowheader" {...rowHeaderProps} style={style}>
-          {renderProps.children}
+      {/* Alway render the sentinel. For now onus is on the user for styling when using flex + gap (this would introduce a gap even though it doesn't take room) */}
+      {/* @ts-ignore - compatibility with React < 19 */}
+      <TR style={{height: 0}} inert={inertValue(true)}>
+        <TD style={{padding: 0, border: 0}}>
+          <div data-testid="loadMoreSentinel" ref={sentinelRef} style={{position: 'relative', height: 1, width: 1}} />
         </TD>
       </TR>
+      {isLoading && renderProps.children && (
+        <TR
+          {...mergeProps(filterDOMProps(props as any), rowProps)}
+          {...renderProps}
+          role="row"
+          ref={ref}>
+          <TD role="rowheader" {...rowHeaderProps} style={style}>
+            {renderProps.children}
+          </TD>
+        </TR>
+      )}
     </>
   );
 });

package/src/TagGroup.tsx

@@ -202,7 +202,7 @@ export interface TagProps extends RenderProps<TagRenderProps>, LinkDOMProps, Hov
 export const Tag = /*#__PURE__*/ createLeafComponent('item', (props: TagProps, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<unknown>) => {
   let state = useContext(ListStateContext)!;
   let ref = useObjectRef<HTMLDivElement>(forwardedRef);
-  let {focusProps, isFocusVisible} = useFocusRing({within: true});
+  let {focusProps, isFocusVisible} = useFocusRing({within: false});
   let {rowProps, gridCellProps, removeButtonProps, ...states} = useTag({item}, state, ref);
 
   let {hoverProps, isHovered} = useHover({

package/src/Tooltip.tsx

@@ -16,7 +16,7 @@ import {ContextValue, Provider, RenderProps, useContextProps, useRenderProps} fr
 import {FocusableProvider} from '@react-aria/focus';
 import {OverlayArrowContext} from './OverlayArrow';
 import {OverlayTriggerProps, TooltipTriggerProps, TooltipTriggerState, useTooltipTriggerState} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, useRef, useState} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';
 import {useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';
 
 export interface TooltipTriggerComponentProps extends TooltipTriggerProps {
@@ -81,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): ReactNode {
+export function TooltipTrigger(props: TooltipTriggerComponentProps): JSX.Element {
   let state = useTooltipTriggerState(props);
   let ref = useRef<FocusableElement>(null);
   let {triggerProps, tooltipProps} = useTooltipTrigger(props, state, ref);