Use public react-aria-components API for virtualization

design-system/pkg/package.json

@@ -1479,14 +1479,15 @@
     "@emotion/sheet": "^1.4.0",
     "@emotion/utils": "^1.4.2",
     "@floating-ui/react": "^0.24.0",
-    "@internationalized/date": "^3.12.2",
+    "@internationalized/date": "^3.12.3",
     "@internationalized/number": "^3.6.7",
-    "@internationalized/string": "^3.2.9",
-    "@react-types/shared": "^3.36.0",
+    "@internationalized/string": "^3.2.10",
+    "@react-types/shared": "^3.36.1",
     "@types/react": "^19.0.8",
     "emery": "^1.4.1",
     "facepaint": "^1.2.1",
     "react-aria": "catalog:",
+    "react-aria-components": "catalog:",
     "react-stately": "catalog:"
   },
   "devDependencies": {
@@ -1513,6 +1514,7 @@
     "next": ">=14",
     "react": "^18.2.0 || ^19.0.0",
     "react-aria": "catalog:",
+    "react-aria-components": "catalog:",
     "react-dom": "^18.2.0 || ^19.0.0",
     "react-stately": "catalog:"
   },

design-system/pkg/src/combobox/useComboboxMultiState.ts

@@ -220,6 +220,8 @@ export function useComboboxMultiState<T extends object>(
     ...validation,
     focusStrategy: triggerState.focusStrategy,
     isOpen: triggerState.isOpen,
+    point: triggerState.point,
+    setPoint: triggerState.setPoint,
     setOpen: triggerState.setOpen,
     toggle,
     open,

design-system/pkg/src/drag-and-drop/types.ts

@@ -1,91 +1,11 @@
-import {
-  DraggableCollectionOptions,
-  DraggableItemProps,
-  DraggableItemResult,
-} from 'react-aria/useDraggableCollection';
-import { DragPreview } from 'react-aria/useDrag';
-import {
-  DropIndicatorAria,
-  DropIndicatorProps,
-  DroppableCollectionOptions,
-  DroppableCollectionResult,
-  DroppableItemOptions,
-  DroppableItemResult,
-} from 'react-aria/useDroppableCollection';
-import {
-  DraggableCollectionState,
-  DraggableCollectionStateOptions,
-} from 'react-stately/useDraggableCollectionState';
-import {
-  DroppableCollectionState,
-  DroppableCollectionStateOptions,
-} from 'react-stately/useDroppableCollectionState';
-import {
-  DraggableCollectionProps,
-  DroppableCollectionProps,
-  Key,
-  DragItem,
-} from '@react-types/shared';
-
-import { RefObject, type JSX } from 'react';
-
-interface DraggableCollectionStateOpts
-  extends Omit<DraggableCollectionStateOptions, 'getItems'> {}
-
-export interface DragHooks {
-  useDraggableCollectionState?: (
-    props: DraggableCollectionStateOpts
-  ) => DraggableCollectionState;
-  useDraggableCollection?: (
-    props: DraggableCollectionOptions,
-    state: DraggableCollectionState,
-    ref: RefObject<HTMLElement | null>
-  ) => void;
-  useDraggableItem?: (
-    props: DraggableItemProps,
-    state: DraggableCollectionState
-  ) => DraggableItemResult;
-  DragPreview?: typeof DragPreview;
-}
-
-export interface DropHooks {
-  useDroppableCollectionState?: (
-    props: DroppableCollectionStateOptions
-  ) => DroppableCollectionState;
-  useDroppableCollection?: (
-    props: DroppableCollectionOptions,
-    state: DroppableCollectionState,
-    ref: RefObject<HTMLElement | null>
-  ) => DroppableCollectionResult;
-  useDroppableItem?: (
-    options: DroppableItemOptions,
-    state: DroppableCollectionState,
-    ref: RefObject<HTMLElement | null>
-  ) => DroppableItemResult;
-  useDropIndicator?: (
-    props: DropIndicatorProps,
-    state: DroppableCollectionState,
-    ref: RefObject<HTMLElement | null>
-  ) => DropIndicatorAria;
-}
+import type {
+  DragAndDropHooks as ReactAriaDragAndDropHooks,
+  DragAndDropOptions as ReactAriaDragAndDropOptions,
+} from 'react-aria-components/useDragAndDrop';
 
 export interface DragAndDropHooks {
-  /** Drag and drop hooks for the collection element.  */
-  dragAndDropHooks: DragHooks &
-    DropHooks & {
-      isVirtualDragging?: () => boolean;
-      renderPreview?: (keys: Set<Key>, draggedKey: Key | null) => JSX.Element;
-    };
+  /** Drag and drop hooks for the collection element. */
+  dragAndDropHooks: ReactAriaDragAndDropHooks;
 }
 
-export interface DragAndDropOptions
-  extends Omit<DraggableCollectionProps, 'preview' | 'getItems'>,
-    DroppableCollectionProps {
-  /**
-   * A function that returns the items being dragged. If not specified, we assume that the collection is not draggable.
-   * @default () => []
-   */
-  getItems?: (keys: Set<Key>) => DragItem[];
-  /** Provide a custom drag preview. `draggedKey` represents the key of the item the user actually dragged. */
-  renderPreview?: (keys: Set<Key>, draggedKey: Key | null) => JSX.Element;
-}
+export interface DragAndDropOptions extends ReactAriaDragAndDropOptions {}

design-system/pkg/src/drag-and-drop/useDragAndDrop.ts

@@ -1,102 +1,13 @@
-/* eslint-disable react-compiler/react-compiler */
-import { DragPreview } from 'react-aria/useDrag';
-import {
-  DroppableCollectionOptions,
-  useDropIndicator,
-  useDroppableCollection,
-  useDroppableItem,
-} from 'react-aria/useDroppableCollection';
-import { isVirtualDragging } from 'react-aria/private/dnd/DragManager';
-import {
-  useDraggableCollection,
-  useDraggableItem,
-} from 'react-aria/useDraggableCollection';
-import {
-  DraggableCollectionStateOptions,
-  useDraggableCollectionState,
-} from 'react-stately/useDraggableCollectionState';
-import {
-  DroppableCollectionState,
-  DroppableCollectionStateOptions,
-  useDroppableCollectionState,
-} from 'react-stately/useDroppableCollectionState';
-import type { Key } from '@react-types/shared';
-import { RefObject, useMemo, type JSX } from 'react';
+import { useDragAndDrop as useReactAriaDragAndDrop } from 'react-aria-components/useDragAndDrop';
 
-import {
-  DragAndDropHooks,
-  DragAndDropOptions,
-  DragHooks,
-  DropHooks,
-} from './types';
+import type { DragAndDropHooks, DragAndDropOptions } from './types';
 
 /**
- * Provides the hooks required to enable drag and drop behavior for a drag and drop compatible React Spectrum component.
+ * Provides the hooks required to enable drag and drop behavior for a drag and
+ * drop compatible collection component.
+ *
+ * This exposes the public React Aria Components drag-and-drop API.
  */
 export function useDragAndDrop(options: DragAndDropOptions): DragAndDropHooks {
-  let dragAndDropHooks = useMemo(() => {
-    let {
-      onDrop,
-      onInsert,
-      onItemDrop,
-      onReorder,
-      onRootDrop,
-      getItems,
-      renderPreview,
-    } = options;
-
-    let isDraggable = !!getItems;
-    let isDroppable = !!(
-      onDrop ||
-      onInsert ||
-      onItemDrop ||
-      onReorder ||
-      onRootDrop
-    );
-
-    let hooks = {} as DragHooks &
-      DropHooks & {
-        isVirtualDragging?: () => boolean;
-        renderPreview?: (keys: Set<Key>, draggedKey: Key | null) => JSX.Element;
-      };
-    if (isDraggable) {
-      // @ts-expect-error
-      hooks.useDraggableCollectionState =
-        function useDraggableCollectionStateOverride(
-          props: DraggableCollectionStateOptions
-        ) {
-          return useDraggableCollectionState({ ...props, ...options });
-        };
-      hooks.useDraggableCollection = useDraggableCollection;
-      hooks.useDraggableItem = useDraggableItem;
-      hooks.DragPreview = DragPreview;
-      hooks.renderPreview = renderPreview;
-    }
-
-    if (isDroppable) {
-      hooks.useDroppableCollectionState =
-        function useDroppableCollectionStateOverride(
-          props: DroppableCollectionStateOptions
-        ) {
-          return useDroppableCollectionState({ ...props, ...options });
-        };
-      hooks.useDroppableItem = useDroppableItem;
-      hooks.useDroppableCollection = function useDroppableCollectionOverride(
-        props: DroppableCollectionOptions,
-        state: DroppableCollectionState,
-        ref: RefObject<HTMLElement | null>
-      ) {
-        return useDroppableCollection({ ...props, ...options }, state, ref);
-      };
-      hooks.useDropIndicator = useDropIndicator;
-    }
-
-    if (isDraggable || isDroppable) {
-      hooks.isVirtualDragging = isVirtualDragging;
-    }
-
-    return hooks;
-  }, [options]);
-
-  return { dragAndDropHooks };
+  return useReactAriaDragAndDrop(options);
 }