react-aria-components 1.8.0 → 1.10.0

package/src/TreeDropTargetDelegate.ts

@@ -0,0 +1,304 @@
+import {Direction, DropTarget, DropTargetDelegate, ItemDropTarget, Key, Node, RootDropTarget} from '@react-types/shared';
+
+interface TreeCollection<T> extends Iterable<Node<T>> {
+  getItem(key: Key): Node<T> | null,
+  getChildren?(key: Key): Iterable<Node<T>>,
+  getKeyAfter(key: Key): Key | null,
+  getKeyBefore(key: Key): Key | null
+}
+
+interface TreeState<T> {
+  collection: TreeCollection<T>,
+  expandedKeys: Set<Key>
+}
+
+interface PointerTracking {
+  lastY: number,
+  lastX: number,
+  yDirection: 'up' | 'down' | null,
+  xDirection: 'left' | 'right' | null,
+  boundaryContext: {
+    parentKey: Key,
+    lastSwitchY: number,
+    lastSwitchX: number,
+    preferredTargetIndex?: number
+  } | null
+}
+
+const X_SWITCH_THRESHOLD = 10;
+const Y_SWITCH_THRESHOLD = 5;
+export class TreeDropTargetDelegate<T> {
+  private delegate: DropTargetDelegate | null = null;
+  private state: TreeState<T> | null = null;
+  private direction: Direction = 'ltr';
+  private pointerTracking: PointerTracking = {
+    lastY: 0,
+    lastX: 0,
+    yDirection: null,
+    xDirection: null,
+    boundaryContext: null
+  };
+
+  setup(delegate: DropTargetDelegate, state: TreeState<T>, direction: Direction): void {
+    this.delegate = delegate;
+    this.state = state;
+    this.direction = direction;
+  }
+
+  getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget | null {
+    let baseTarget = this.delegate!.getDropTargetFromPoint(x, y, isValidDropTarget);
+    if (!baseTarget || baseTarget.type === 'root') {
+      return baseTarget;
+    }
+
+    return this.resolveDropTarget(baseTarget, x, y, isValidDropTarget);
+  }
+
+  private resolveDropTarget(
+    target: ItemDropTarget,
+    x: number,
+    y: number,
+    isValidDropTarget: (target: DropTarget) => boolean
+  ): RootDropTarget | ItemDropTarget | null {
+    let tracking = this.pointerTracking;
+
+    // Calculate movement directions
+    let deltaY = y - tracking.lastY;
+    let deltaX = x - tracking.lastX;
+    let currentYMovement: 'up' | 'down' | null = tracking.yDirection;
+    let currentXMovement: 'left' | 'right' | null = tracking.xDirection;
+
+    if (Math.abs(deltaY) > Y_SWITCH_THRESHOLD) {
+      currentYMovement = deltaY > 0 ? 'down' : 'up';
+      tracking.yDirection = currentYMovement;
+      tracking.lastY = y;
+    }
+
+    if (Math.abs(deltaX) > X_SWITCH_THRESHOLD) {
+      currentXMovement = deltaX > 0 ? 'right' : 'left';
+      tracking.xDirection = currentXMovement;
+      tracking.lastX = x;
+    }
+
+    // Normalize to 'after'
+    if (target.dropPosition === 'before') {
+      let keyBefore = this.state!.collection.getKeyBefore(target.key);
+      if (keyBefore != null) {
+        target = {
+          type: 'item',
+          key: keyBefore,
+          dropPosition: 'after'
+        } as const;
+      }
+    }
+
+    let potentialTargets = this.getPotentialTargets(target, isValidDropTarget);
+
+    if (potentialTargets.length === 0) {
+      return {type: 'root'};
+    }
+
+    let resolvedItemTarget: ItemDropTarget;
+    if (potentialTargets.length > 1) {
+      resolvedItemTarget = this.selectTarget(potentialTargets, target, x, y, currentYMovement, currentXMovement);
+    } else {
+      resolvedItemTarget = potentialTargets[0];
+      // Reset boundary context since we're not in a boundary case
+      tracking.boundaryContext = null;
+    }
+
+    return resolvedItemTarget;
+  }
+
+  // Returns potential targets for an ambiguous drop position (e.g. after the last child of a parent, or after the parent itself)
+  // Ordered by level, from innermost to outermost.
+  private getPotentialTargets(originalTarget: ItemDropTarget, isValidDropTarget: (target: DropTarget) => boolean): ItemDropTarget[] {
+    if (originalTarget.dropPosition === 'on') {
+      return [originalTarget];
+    }
+
+    let target = originalTarget;
+    let collection = this.state!.collection;
+
+    let currentItem = collection.getItem(target.key);
+    while (currentItem && currentItem?.type !== 'item' && currentItem.nextKey != null) {
+      target.key = currentItem.nextKey;
+      currentItem = collection.getItem(currentItem.nextKey);
+    }
+
+    let potentialTargets = [target];
+
+    // If target has children and is expanded, use "before first child"
+    if (currentItem && currentItem.hasChildNodes && this.state!.expandedKeys.has(currentItem.key) && collection.getChildren && target.dropPosition === 'after') {
+      let firstChildItemNode: Node<T> | null = null;
+      for (let child of collection.getChildren(currentItem.key)) {
+        if (child.type === 'item') {
+          firstChildItemNode = child;
+          break;
+        }
+      }
+
+      if (firstChildItemNode) {
+        const beforeFirstChildTarget = {
+          type: 'item',
+          key: firstChildItemNode.key,
+          dropPosition: 'before'
+        } as const;
+
+        if (isValidDropTarget(beforeFirstChildTarget)) {
+          return [beforeFirstChildTarget];
+        } else {
+          return [];
+        }
+      }
+    }
+
+    if (currentItem?.nextKey != null) {
+      return [originalTarget];
+    }
+
+    // Walk up the parent chain to find ancestors that are the last child at their level
+    let parentKey = currentItem?.parentKey;
+    let ancestorTargets: ItemDropTarget[] = [];
+
+    while (parentKey) {
+      let parentItem = collection.getItem(parentKey);
+      let nextItem = parentItem?.nextKey ? collection.getItem(parentItem.nextKey) : null;
+      let isLastChildAtLevel = !nextItem || nextItem.parentKey !== parentKey;
+
+      if (isLastChildAtLevel) {
+        let afterParentTarget = {
+          type: 'item',
+          key: parentKey,
+          dropPosition: 'after'
+        } as const;
+
+        if (isValidDropTarget(afterParentTarget)) {
+          ancestorTargets.push(afterParentTarget);
+        }
+        if (nextItem) {
+          break;
+        }
+      }
+
+      parentKey = parentItem?.parentKey;
+    }
+
+    if (ancestorTargets.length > 0) {
+      potentialTargets.push(...ancestorTargets);
+    }
+
+    // Handle converting "after" to "before next" for non-ambiguous cases
+    if (potentialTargets.length === 1) {
+      let nextKey = collection.getKeyAfter(target.key);
+      let nextNode = nextKey ? collection.getItem(nextKey) : null;
+      if (nextKey != null && nextNode && currentItem && nextNode.level != null && currentItem.level != null && nextNode.level > currentItem.level) {
+        let beforeTarget = {
+          type: 'item',
+          key: nextKey,
+          dropPosition: 'before'
+        } as const;
+        if (isValidDropTarget(beforeTarget)) {
+          return [beforeTarget];
+        }
+      }
+    }
+
+    return potentialTargets.filter(isValidDropTarget);
+  }
+
+  private selectTarget(
+    potentialTargets: ItemDropTarget[],
+    originalTarget: ItemDropTarget,
+    x: number,
+    y: number,
+    currentYMovement: 'up' | 'down' | null,
+    currentXMovement: 'left' | 'right' | null
+  ): ItemDropTarget {
+    if (potentialTargets.length < 2) {
+      return potentialTargets[0];
+    }
+
+    let tracking = this.pointerTracking;
+    let currentItem = this.state!.collection.getItem(originalTarget.key);
+    let parentKey = currentItem?.parentKey;
+
+    if (!parentKey) {
+      return potentialTargets[0];
+    }
+
+    // More than 1 potential target - use Y for initial target, then X for switching levels
+    // Initialize boundary context if needed
+    if (!tracking.boundaryContext || tracking.boundaryContext.parentKey !== parentKey) {
+      // If entering from below, start with outer-most
+      let initialTargetIndex = tracking.yDirection === 'up' ? potentialTargets.length - 1 : 0;
+      tracking.boundaryContext = {
+        parentKey,
+        preferredTargetIndex: initialTargetIndex,
+        lastSwitchY: y,
+        lastSwitchX: x
+      };
+    }
+
+    let boundaryContext = tracking.boundaryContext;
+    let distanceFromLastXSwitch = Math.abs(x - boundaryContext.lastSwitchX);
+    let distanceFromLastYSwitch = Math.abs(y - boundaryContext.lastSwitchY);
+
+    // Switch between targets based on Y movement
+    if (distanceFromLastYSwitch > Y_SWITCH_THRESHOLD && currentYMovement) {
+      let currentIndex = boundaryContext.preferredTargetIndex || 0;
+
+      if (currentYMovement === 'down' && currentIndex === 0) {
+        // Moving down from inner-most, switch to outer-most
+        boundaryContext.preferredTargetIndex = potentialTargets.length - 1;
+      } else if (currentYMovement === 'up' && currentIndex === potentialTargets.length - 1) {
+        // Moving up from outer-most, switch to inner-most
+        boundaryContext.preferredTargetIndex = 0;
+      }
+
+      // Reset x tracking so that moving diagonally doesn't cause flickering.
+      tracking.xDirection = null;
+    }
+
+    // X movement controls level selection
+    if (distanceFromLastXSwitch > X_SWITCH_THRESHOLD && currentXMovement) {
+      let currentTargetIndex = boundaryContext.preferredTargetIndex || 0;
+
+      if (currentXMovement === 'left') {
+        if (this.direction === 'ltr') {
+          // LTR: left = move to higher level in tree (increase index)
+          if (currentTargetIndex < potentialTargets.length - 1) {
+            boundaryContext.preferredTargetIndex = currentTargetIndex + 1;
+            boundaryContext.lastSwitchX = x;
+          }
+        } else {
+          // RTL: left = move to lower level in tree (decrease index)
+          if (currentTargetIndex > 0) {
+            boundaryContext.preferredTargetIndex = currentTargetIndex - 1;
+            boundaryContext.lastSwitchX = x;
+          }
+        }
+      } else if (currentXMovement === 'right') {
+        if (this.direction === 'ltr') {
+          // LTR: right = move to lower level in tree (decrease index)
+          if (currentTargetIndex > 0) {
+            boundaryContext.preferredTargetIndex = currentTargetIndex - 1;
+            boundaryContext.lastSwitchX = x;
+          }
+        } else {
+          // RTL: right = move to higher level in tree (increase index)
+          if (currentTargetIndex < potentialTargets.length - 1) {
+            boundaryContext.preferredTargetIndex = currentTargetIndex + 1;
+            boundaryContext.lastSwitchX = x;
+          }
+        }
+      }
+
+      // Reset y tracking so that moving diagonally doesn't cause flickering.
+      tracking.yDirection = null;
+    }
+
+    let targetIndex = Math.max(0, Math.min(boundaryContext.preferredTargetIndex || 0, potentialTargets.length - 1));
+    return potentialTargets[targetIndex];
+  }
+}

package/src/Virtualizer.tsx

@@ -10,10 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {CollectionBranchProps, CollectionRenderer, CollectionRendererContext, CollectionRootProps} from './Collection';
-import {DropPosition, DropTarget, DropTargetDelegate, ItemDropTarget, Node} from '@react-types/shared';
+import {CollectionBranchProps, CollectionRenderer, CollectionRendererContext, CollectionRootProps, renderAfterDropIndicators} from './Collection';
+import {DropTargetDelegate, ItemDropTarget, Node} from '@react-types/shared';
 import {Layout, ReusableView, useVirtualizerState, VirtualizerState} from '@react-stately/virtualizer';
-import React, {createContext, ReactNode, useContext, useMemo} from 'react';
+import React, {createContext, JSX, 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>): ReactNode {
+export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
   let {children, layout: layoutProp, layoutOptions} = props;
   let layout = useMemo(() => typeof layoutProp === 'function' ? new layoutProp() : layoutProp, [layoutProp]);
   let renderer: CollectionRenderer = useMemo(() => ({
@@ -102,10 +102,6 @@ function CollectionRoot({collection, persistedKeys, scrollRef, renderDropIndicat
     onScrollEnd: state.endScrolling
   }, scrollRef!);
 
-  if (state.contentSize.area === 0) {
-    return null;
-  }
-
   return (
     <div {...contentProps}>
       <VirtualizerContext.Provider value={state}>
@@ -141,13 +137,13 @@ function renderWrapper(
   );
 
   let {collection, layout} = reusableView.virtualizer;
-  let {key, type} = reusableView.content!;
-  if (type === 'item' && renderDropIndicator && layout.getDropTargetLayoutInfo) {
+  let node = reusableView.content;
+  if (node?.type === 'item' && renderDropIndicator && layout.getDropTargetLayoutInfo) {
     rendered = (
       <React.Fragment key={reusableView.key}>
-        {renderDropIndicatorWrapper(parent, reusableView, 'before', renderDropIndicator)}
+        {renderDropIndicatorWrapper(parent, reusableView, {type: 'item', key: reusableView.content!.key, dropPosition: 'before'}, renderDropIndicator)}
         {rendered}
-        {collection.getKeyAfter(key) == null && renderDropIndicatorWrapper(parent, reusableView, 'after', renderDropIndicator)}
+        {renderAfterDropIndicators(collection, node, target => renderDropIndicatorWrapper(parent, reusableView, target, renderDropIndicator))}
       </React.Fragment>
     );
   }
@@ -158,10 +154,9 @@ function renderWrapper(
 function renderDropIndicatorWrapper(
   parent: View | null,
   reusableView: View,
-  dropPosition: DropPosition,
+  target: ItemDropTarget,
   renderDropIndicator: (target: ItemDropTarget) => ReactNode
 ) {
-  let target: DropTarget = {type: 'item', key: reusableView.content!.key, dropPosition};
   let indicator = renderDropIndicator(target);
   if (indicator) {
     let layoutInfo = reusableView.virtualizer.layout.getDropTargetLayoutInfo!(target);

package/src/index.ts

@@ -30,7 +30,7 @@ export {ColorSwatchPicker, ColorSwatchPickerItem, ColorSwatchPickerContext} from
 export {ColorThumb} from './ColorThumb';
 export {ColorWheel, ColorWheelTrack, ColorWheelTrackContext, ColorWheelStateContext} from './ColorWheel';
 export {ComboBox, ComboBoxContext, ComboBoxStateContext} from './ComboBox';
-export {composeRenderProps, DEFAULT_SLOT, Provider, useContextProps, useSlottedContext} from './utils';
+export {composeRenderProps, DEFAULT_SLOT, Provider, useContextProps, useRenderProps, useSlottedContext} from './utils';
 export {DateField, DateInput, DateSegment, TimeField, DateFieldContext, TimeFieldContext, DateFieldStateContext, TimeFieldStateContext} from './DateField';
 export {DatePicker, DateRangePicker, DatePickerContext, DateRangePickerContext, DatePickerStateContext, DateRangePickerStateContext} from './DatePicker';
 export {DialogTrigger, Dialog, DialogContext, OverlayTriggerStateContext} from './Dialog';
@@ -39,7 +39,7 @@ export {DropZone, DropZoneContext} from './DropZone';
 export {FieldError, FieldErrorContext} from './FieldError';
 export {FileTrigger} from './FileTrigger';
 export {Form, FormContext} from './Form';
-export {GridList, GridListItem, GridListContext} from './GridList';
+export {UNSTABLE_GridListLoadingSentinel, GridList, GridListItem, GridListContext} from './GridList';
 export {Group, GroupContext} from './Group';
 export {Header, HeaderContext} from './Header';
 export {Heading} from './Heading';
@@ -49,7 +49,7 @@ export {Collection, createLeafComponent as UNSTABLE_createLeafComponent, createB
 export {Keyboard, KeyboardContext} from './Keyboard';
 export {Label, LabelContext} from './Label';
 export {Link, LinkContext} from './Link';
-export {ListBox, ListBoxItem, ListBoxSection, ListBoxContext, ListStateContext} from './ListBox';
+export {UNSTABLE_ListBoxLoadingSentinel, ListBox, ListBoxItem, ListBoxSection, ListBoxContext, ListStateContext} from './ListBox';
 export {Menu, MenuItem, MenuTrigger, MenuSection, MenuContext, MenuStateContext, RootMenuTriggerStateContext, SubmenuTrigger} from './Menu';
 export {Meter, MeterContext} from './Meter';
 export {Modal, ModalOverlay, ModalContext} from './Modal';
@@ -63,7 +63,7 @@ export {Select, SelectValue, SelectContext, SelectValueContext, SelectStateConte
 export {Separator, SeparatorContext} from './Separator';
 export {Slider, SliderOutput, SliderTrack, SliderThumb, SliderContext, SliderOutputContext, SliderTrackContext, SliderStateContext} from './Slider';
 export {Switch, SwitchContext} from './Switch';
-export {UNSTABLE_TableLoadingIndicator, Table, Row, Cell, Column, ColumnResizer, TableHeader, TableBody, TableContext, ResizableTableContainer, useTableOptions, TableStateContext, TableColumnResizeStateContext} from './Table';
+export {UNSTABLE_TableLoadingSentinel, Table, Row, Cell, Column, ColumnResizer, TableHeader, TableBody, TableContext, ResizableTableContainer, useTableOptions, TableStateContext, TableColumnResizeStateContext} from './Table';
 export {TableLayout} from './TableLayout';
 export {Tabs, TabList, TabPanel, Tab, TabsContext, TabListStateContext} from './Tabs';
 export {TagGroup, TagGroupContext, TagList, TagListContext, Tag} from './TagGroup';
@@ -141,11 +141,12 @@ export type {TooltipProps, TooltipRenderProps, TooltipTriggerComponentProps} fro
 export type {TreeProps, TreeRenderProps, TreeItemProps, TreeItemRenderProps, TreeItemContentProps, TreeItemContentRenderProps} from './Tree';
 export type {DragAndDropHooks, DragAndDropOptions} from './useDragAndDrop';
 export type {DropIndicatorProps, DropIndicatorRenderProps} from './DragAndDrop';
-export type {ContextValue, SlotProps} from './utils';
+export type {ContextValue, RenderProps, SlotProps, StyleRenderProps} from './utils';
 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, QueuedToast, Selection, SortDescriptor, SortDirection, SelectionMode, ToastOptions} from 'react-stately';
-export type {ValidationResult, RouterConfig} from '@react-types/shared';
+export type {CalendarState, CheckboxGroupState, Color, ColorAreaState, ColorFieldState, ColorFormat, ColorPickerState, ColorSliderState, ColorSpace, ColorWheelState, ComboBoxState, DateFieldState, DatePickerState, DateRangePickerState, DisclosureState, DisclosureGroupState, Key, ListState, NumberFieldState, OverlayTriggerState, QueuedToast, RadioGroupState, RangeCalendarState, RootMenuTriggerState, SearchFieldState, Selection, SelectState, SliderState, SortDescriptor, SortDirection, SelectionMode, TableState, TabListState, TimeFieldState, ToastOptions, ToastState, ToggleGroupState, ToggleState, TooltipTriggerState, TreeState} from 'react-stately';
+export type {AutocompleteState} from '@react-stately/autocomplete';
 export type {ListLayoutOptions, GridLayoutOptions, WaterfallLayoutOptions} from '@react-stately/layout';
+export type {ValidationResult, RouterConfig} from '@react-types/shared';

package/src/useDragAndDrop.tsx

@@ -104,6 +104,7 @@ export function useDragAndDrop(options: DragAndDropOptions): DragAndDrop {
       onInsert,
       onItemDrop,
       onReorder,
+      onMove,
       onRootDrop,
       getItems,
       renderDragPreview,
@@ -112,7 +113,7 @@ export function useDragAndDrop(options: DragAndDropOptions): DragAndDrop {
     } = options;
 
     let isDraggable = !!getItems;
-    let isDroppable = !!(onDrop || onInsert || onItemDrop || onReorder || onRootDrop);
+    let isDroppable = !!(onDrop || onInsert || onItemDrop || onReorder || onMove || onRootDrop);
 
     let hooks = {} as DragAndDropHooks;
     if (isDraggable) {