react-aria-components 1.9.0 → 1.10.1

package/src/Collection.tsx

@@ -12,7 +12,7 @@
 import {CollectionBase, DropTargetDelegate, ItemDropTarget, Key, LayoutDelegate, RefObject} from '@react-types/shared';
 import {createBranchComponent, useCachedChildren} from '@react-aria/collections';
 import {Collection as ICollection, Node, SelectionBehavior, SelectionMode, SectionProps as SharedSectionProps} from 'react-stately';
-import React, {createContext, ForwardedRef, HTMLAttributes, JSX, ReactElement, ReactNode, useContext, useMemo} from 'react';
+import React, {cloneElement, createContext, ForwardedRef, HTMLAttributes, isValidElement, JSX, ReactElement, ReactNode, useContext, useMemo} from 'react';
 import {StyleProps} from './utils';
 
 export interface CollectionProps<T> extends Omit<CollectionBase<T>, 'children'> {
@@ -164,19 +164,53 @@ function useCollectionRender(
         return rendered;
       }
 
-      let key = node.key;
-      let keyAfter = collection.getKeyAfter(key);
       return (
         <>
-          {renderDropIndicator({type: 'item', key, dropPosition: 'before'})}
+          {renderDropIndicator({type: 'item', key: node.key, dropPosition: 'before'})}
           {rendered}
-          {((keyAfter == null || collection.getItem(keyAfter)?.type !== 'item')) && renderDropIndicator({type: 'item', key, dropPosition: 'after'})}
+          {renderAfterDropIndicators(collection, node, renderDropIndicator)}
         </>
       );
     }
   });
 }
 
+export function renderAfterDropIndicators(collection: ICollection<Node<unknown>>, node: Node<unknown>, renderDropIndicator: (target: ItemDropTarget) => ReactNode): ReactNode {
+  let key = node.key;
+  let keyAfter = collection.getKeyAfter(key);
+  let nextItemInFlattenedCollection = keyAfter != null ? collection.getItem(keyAfter) : null;
+  while (nextItemInFlattenedCollection != null && nextItemInFlattenedCollection.type !== 'item') {
+    keyAfter = collection.getKeyAfter(nextItemInFlattenedCollection.key);
+    nextItemInFlattenedCollection = keyAfter != null ? collection.getItem(keyAfter) : null;
+  }
+
+  let nextItemInSameLevel = node.nextKey != null ? collection.getItem(node.nextKey) : null;
+  while (nextItemInSameLevel != null && nextItemInSameLevel.type !== 'item') {
+    nextItemInSameLevel = nextItemInSameLevel.nextKey != null ? collection.getItem(nextItemInSameLevel.nextKey) : null;
+  }
+
+  // Render one or more "after" drop indicators when the next item in the flattened collection
+  // has a smaller level, is not an item, or there are no more items in the collection.
+  // Otherwise, the "after" position is equivalent to the next item's "before" position.
+  let afterIndicators: ReactNode[] = [];
+  if (nextItemInSameLevel == null) {
+    let current: Node<unknown> | null = node;
+    while (current && (!nextItemInFlattenedCollection || (current.parentKey !== nextItemInFlattenedCollection.parentKey && nextItemInFlattenedCollection.level < current.level))) {
+      let indicator = renderDropIndicator({
+        type: 'item',
+        key: current.key,
+        dropPosition: 'after'
+      });
+      if (isValidElement(indicator)) {
+        afterIndicators.push(cloneElement(indicator, {key: `${current.key}-after`}));
+      }
+      current = current.parentKey != null ? collection.getItem(current.parentKey) : null;
+    }
+  }
+
+  return afterIndicators;
+}
+
 export const CollectionRendererContext = createContext<CollectionRenderer>(DefaultCollectionRenderer);
 
 type PersistedKeysReturnValue = Set<Key> | null;

package/src/ComboBox.tsx

@@ -93,6 +93,9 @@ export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Co
   );
 });
 
+// Contexts to clear inside the popover.
+const CLEAR_CONTEXTS = [LabelContext, ButtonContext, InputContext, GroupContext, TextContext];
+
 interface ComboBoxInnerProps<T extends object> {
   props: ComboBoxProps<T>,
   collection: Collection<Node<T>>,
@@ -197,7 +200,8 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
           placement: 'bottom start',
           isNonModal: true,
           trigger: 'ComboBox',
-          style: {'--trigger-width': menuWidth} as React.CSSProperties
+          style: {'--trigger-width': menuWidth} as React.CSSProperties,
+          clearContexts: CLEAR_CONTEXTS
         }],
         [ListBoxContext, {...listBoxProps, ref: listBoxRef}],
         [ListStateContext, state],

package/src/DatePicker.tsx

@@ -72,6 +72,9 @@ export const DateRangePickerContext = createContext<ContextValue<DateRangePicker
 export const DatePickerStateContext = createContext<DatePickerState | null>(null);
 export const DateRangePickerStateContext = createContext<DateRangePickerState | null>(null);
 
+// Contexts to clear inside the popover.
+const CLEAR_CONTEXTS = [GroupContext, ButtonContext, LabelContext, TextContext];
+
 /**
  * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
  */
@@ -148,7 +151,8 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
           trigger: 'DatePicker',
           triggerRef: groupRef,
           placement: 'bottom start',
-          style: {'--trigger-width': groupWidth} as React.CSSProperties
+          style: {'--trigger-width': groupWidth} as React.CSSProperties,
+          clearContexts: CLEAR_CONTEXTS
         }],
         [DialogContext, dialogProps],
         [TextContext, {
@@ -251,7 +255,8 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
           trigger: 'DateRangePicker',
           triggerRef: groupRef,
           placement: 'bottom start',
-          style: {'--trigger-width': groupWidth} as React.CSSProperties
+          style: {'--trigger-width': groupWidth} as React.CSSProperties,
+          clearContexts: CLEAR_CONTEXTS
         }],
         [DialogContext, dialogProps],
         [DateFieldContext, {

package/src/DragAndDrop.tsx

@@ -32,7 +32,7 @@ export interface DropIndicatorRenderProps {
   isDropTarget: boolean
 }
 
-export interface DropIndicatorProps extends AriaDropIndicatorProps, RenderProps<DropIndicatorRenderProps> { }
+export interface DropIndicatorProps extends Omit<AriaDropIndicatorProps, 'activateButtonRef'>, RenderProps<DropIndicatorRenderProps> { }
 interface DropIndicatorContextValue {
   render: (props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) => ReactNode
 }

package/src/Popover.tsx

@@ -18,7 +18,7 @@ import {focusSafely} from '@react-aria/interactions';
 import {OverlayArrowContext} from './OverlayArrow';
 import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
 import {OverlayTriggerStateContext} from './Dialog';
-import React, {createContext, ForwardedRef, forwardRef, useContext, useEffect, useRef, useState} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {useIsHidden} from '@react-aria/collections';
 
 export interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>, OverlayTriggerProps, RenderProps<PopoverRenderProps>, SlotProps, AriaLabelingProps {
@@ -80,7 +80,12 @@ export interface PopoverRenderProps {
   isExiting: boolean
 }
 
-export const PopoverContext = createContext<ContextValue<PopoverProps, HTMLElement>>(null);
+interface PopoverContextValue extends PopoverProps {
+  /** Contexts to clear. */
+  clearContexts?: Context<any>[]
+}
+
+export const PopoverContext = createContext<ContextValue<PopoverContextValue, HTMLElement>>(null);
 
 // Stores a ref for the portal container for a group of popovers (e.g. submenus).
 const PopoverGroupContext = createContext<RefObject<Element | null> | null>(null);
@@ -134,10 +139,11 @@ interface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderP
   isExiting: boolean,
   UNSTABLE_portalContainer?: Element,
   trigger?: string,
-  dir?: 'ltr' | 'rtl'
+  dir?: 'ltr' | 'rtl',
+  clearContexts?: Context<any>[]
 }
 
-function PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: PopoverInnerProps) {
+function PopoverInner({state, isExiting, UNSTABLE_portalContainer, clearContexts, ...props}: PopoverInnerProps) {
   // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)
   // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
   let arrowRef = useRef<HTMLDivElement>(null);
@@ -190,6 +196,16 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: Po
     }
   }, [isDialog, ref]);
 
+  let children = useMemo(() => {
+    let children = renderProps.children;
+    if (clearContexts) {
+      for (let Context of clearContexts) {
+        children = <Context.Provider value={null}>{children}</Context.Provider>;
+      }
+    }
+    return children;
+  }, [renderProps.children, clearContexts]);
+
   let style = {...popoverProps.style, ...renderProps.style};
   let overlay = (
     <div
@@ -209,7 +225,7 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: Po
       data-exiting={isExiting || undefined}>
       {!props.isNonModal && <DismissButton onDismiss={state.close} />}
       <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>
-        {renderProps.children}
+        {children}
       </OverlayArrowContext.Provider>
       <DismissButton onDismiss={state.close} />
     </div>

package/src/RadioGroup.tsx

@@ -18,7 +18,7 @@ import {FormContext} from './Form';
 import {forwardRefType, RefObject} from '@react-types/shared';
 import {LabelContext} from './Label';
 import {RadioGroupState, useRadioGroupState} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, useMemo} from 'react';
 import {TextContext} from './Text';
 
 export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<RadioGroupRenderProps>, SlotProps {}
@@ -186,7 +186,7 @@ export const Radio = /*#__PURE__*/ (forwardRef as forwardRefType)(function Radio
   } = props;
   [props, ref] = useContextProps(otherProps, ref, RadioContext);
   let state = React.useContext(RadioGroupStateContext)!;
-  let inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== undefined ? props.inputRef : null));
+  let inputRef = useObjectRef(useMemo(() => mergeRefs(userProvidedInputRef, props.inputRef !== undefined ? props.inputRef : null), [userProvidedInputRef, props.inputRef]));
   let {labelProps, inputProps, isSelected, isDisabled, isPressed} = useRadio({
     ...removeDataAttributes<RadioProps>(props),
     // ReactNode type doesn't allow function children.

package/src/Select.tsx

@@ -100,6 +100,9 @@ export const Select = /*#__PURE__*/ (forwardRef as forwardRefType)(function Sele
   );
 });
 
+// Contexts to clear inside the popover.
+const CLEAR_CONTEXTS = [LabelContext, ButtonContext, TextContext];
+
 interface SelectInnerProps<T extends object> {
   props: SelectProps<T>,
   selectRef: ForwardedRef<HTMLDivElement>,
@@ -178,7 +181,7 @@ function SelectInner<T extends object>({props, selectRef: ref, collection}: Sele
         [SelectStateContext, state],
         [SelectValueContext, valueProps],
         [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
-        [ButtonContext, {...triggerProps, ref: buttonRef, isPressed: state.isOpen}],
+        [ButtonContext, {...triggerProps, ref: buttonRef, isPressed: state.isOpen, autoFocus: props.autoFocus}],
         [OverlayTriggerStateContext, state],
         [PopoverContext, {
           trigger: 'Select',
@@ -186,7 +189,8 @@ function SelectInner<T extends object>({props, selectRef: ref, collection}: Sele
           scrollRef,
           placement: 'bottom start',
           style: {'--trigger-width': buttonWidth} as React.CSSProperties,
-          'aria-labelledby': menuProps['aria-labelledby']
+          'aria-labelledby': menuProps['aria-labelledby'],
+          clearContexts: CLEAR_CONTEXTS
         }],
         [ListBoxContext, {...menuProps, ref: scrollRef}],
         [ListStateContext, state],

package/src/Tabs.tsx

@@ -300,7 +300,8 @@ export const TabPanel = /*#__PURE__*/ createHideableComponent(function TabPanel(
     values: {
       isFocused,
       isFocusVisible,
-      isInert: !isSelected,
+      // @ts-ignore - compatibility with React < 19
+      isInert: inertValue(!isSelected),
       state
     }
   });