react-aria-components 1.9.0 → 1.10.0

package/dist/Tree.mjs

@@ -1,12 +1,14 @@
 import {ButtonContext as $d2b4bc8c273e7be6$export$24d547caef80ccd1} from "./Button.mjs";
 import {CheckboxContext as $4e85f108e88277b8$export$b085522c77523c51} from "./RSPContexts.mjs";
-import {CollectionRendererContext as $7135fc7d473fd974$export$4feb769f8ddf26c5, DefaultCollectionRenderer as $7135fc7d473fd974$export$a164736487e3f0ae, usePersistedKeys as $7135fc7d473fd974$export$90e00781bc59d8f9} from "./Collection.mjs";
+import {CollectionRendererContext as $7135fc7d473fd974$export$4feb769f8ddf26c5, DefaultCollectionRenderer as $7135fc7d473fd974$export$a164736487e3f0ae} from "./Collection.mjs";
 import {DEFAULT_SLOT as $64fa3d84918910a7$export$c62b8e45d58ddad9, Provider as $64fa3d84918910a7$export$2881499e37b75b9a, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3} from "./utils.mjs";
-import {useTree as $kUtXx$useTree, useFocusRing as $kUtXx$useFocusRing, FocusScope as $kUtXx$FocusScope, mergeProps as $kUtXx$mergeProps, useTreeItem as $kUtXx$useTreeItem, useHover as $kUtXx$useHover, useGridListSelectionCheckbox as $kUtXx$useGridListSelectionCheckbox} from "react-aria";
+import {DragAndDropContext as $612b8eb6cb90e02d$export$d188a835a7bc5783, DropIndicatorContext as $612b8eb6cb90e02d$export$f55761759794cf55, useDndPersistedKeys as $612b8eb6cb90e02d$export$d1e8e3fbb7461f6, useRenderDropIndicator as $612b8eb6cb90e02d$export$971707d8a129a1f7} from "./DragAndDrop.mjs";
+import {TreeDropTargetDelegate as $7e0f784ed4e400df$export$82c13862611c034e} from "./TreeDropTargetDelegate.mjs";
+import {useLocale as $kUtXx$useLocale, useCollator as $kUtXx$useCollator, useTree as $kUtXx$useTree, ListKeyboardDelegate as $kUtXx$ListKeyboardDelegate, useFocusRing as $kUtXx$useFocusRing, FocusScope as $kUtXx$FocusScope, mergeProps as $kUtXx$mergeProps, useTreeItem as $kUtXx$useTreeItem, useHover as $kUtXx$useHover, useGridListSelectionCheckbox as $kUtXx$useGridListSelectionCheckbox, useVisuallyHidden as $kUtXx$useVisuallyHidden, useId as $kUtXx$useId} from "react-aria";
 import {CollectionBuilder as $kUtXx$CollectionBuilder, Collection as $kUtXx$Collection, createLeafComponent as $kUtXx$createLeafComponent, createBranchComponent as $kUtXx$createBranchComponent, useCachedChildren as $kUtXx$useCachedChildren} from "@react-aria/collections";
-import {filterDOMProps as $kUtXx$filterDOMProps, useObjectRef as $kUtXx$useObjectRef} from "@react-aria/utils";
 import {useTreeState as $kUtXx$useTreeState} from "react-stately";
-import $kUtXx$react, {createContext as $kUtXx$createContext, forwardRef as $kUtXx$forwardRef, useContext as $kUtXx$useContext, useMemo as $kUtXx$useMemo, useEffect as $kUtXx$useEffect, useRef as $kUtXx$useRef} from "react";
+import {filterDOMProps as $kUtXx$filterDOMProps, useObjectRef as $kUtXx$useObjectRef} from "@react-aria/utils";
+import $kUtXx$react, {createContext as $kUtXx$createContext, forwardRef as $kUtXx$forwardRef, useRef as $kUtXx$useRef, useEffect as $kUtXx$useEffect, useContext as $kUtXx$useContext, useMemo as $kUtXx$useMemo, useState as $kUtXx$useState} from "react";
 import {useControlledState as $kUtXx$useControlledState} from "@react-stately/utils";
 
 /*
@@ -29,6 +31,8 @@ import {useControlledState as $kUtXx$useControlledState} from "@react-stately/ut
 
 
 
+
+
 class $2f5eaf4a2a47b4cf$var$TreeCollection {
     // TODO: should this collection's getters reflect the flattened structure or the original structure
     // If we respresent the flattened structure, it is easier for the keyboard nav but harder to find all the nodes
@@ -107,9 +111,36 @@ const $2f5eaf4a2a47b4cf$export$7fbedc92909ed28e = /*#__PURE__*/ (0, $kUtXx$forwa
             treeRef: ref
         }));
 });
+const $2f5eaf4a2a47b4cf$var$EXPANSION_KEYS = {
+    'expand': {
+        ltr: 'ArrowRight',
+        rtl: 'ArrowLeft'
+    },
+    'collapse': {
+        ltr: 'ArrowLeft',
+        rtl: 'ArrowRight'
+    }
+};
 function $2f5eaf4a2a47b4cf$var$TreeInner({ props: props, collection: collection, treeRef: ref }) {
+    const { dragAndDropHooks: dragAndDropHooks } = props;
+    let { direction: direction } = (0, $kUtXx$useLocale)();
+    let collator = (0, $kUtXx$useCollator)({
+        usage: 'search',
+        sensitivity: 'base'
+    });
+    let hasDragHooks = !!(dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.useDraggableCollectionState);
+    let hasDropHooks = !!(dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.useDroppableCollectionState);
+    let dragHooksProvided = (0, $kUtXx$useRef)(hasDragHooks);
+    let dropHooksProvided = (0, $kUtXx$useRef)(hasDropHooks);
+    (0, $kUtXx$useEffect)(()=>{
+        if (dragHooksProvided.current !== hasDragHooks) console.warn('Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
+        if (dropHooksProvided.current !== hasDropHooks) console.warn('Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
+    }, [
+        hasDragHooks,
+        hasDropHooks
+    ]);
     let { selectionMode: selectionMode = 'none', expandedKeys: propExpandedKeys, defaultExpandedKeys: propDefaultExpandedKeys, onExpandedChange: onExpandedChange, disabledBehavior: disabledBehavior = 'all' } = props;
-    let { CollectionRoot: CollectionRoot, isVirtualized: isVirtualized, layoutDelegate: layoutDelegate } = (0, $kUtXx$useContext)((0, $7135fc7d473fd974$export$4feb769f8ddf26c5));
+    let { CollectionRoot: CollectionRoot, isVirtualized: isVirtualized, layoutDelegate: layoutDelegate, dropTargetDelegate: ctxDropTargetDelegate } = (0, $kUtXx$useContext)((0, $7135fc7d473fd974$export$4feb769f8ddf26c5));
     // Kinda annoying that we have to replicate this code here as well as in useTreeState, but don't want to add
     // flattenCollection stuff to useTreeState. Think about this later
     let [expandedKeys, setExpandedKeys] = (0, $kUtXx$useControlledState)(propExpandedKeys ? $2f5eaf4a2a47b4cf$var$convertExpanded(propExpandedKeys) : undefined, propDefaultExpandedKeys ? $2f5eaf4a2a47b4cf$var$convertExpanded(propDefaultExpandedKeys) : new Set(), onExpandedChange);
@@ -136,11 +167,96 @@ function $2f5eaf4a2a47b4cf$var$TreeInner({ props: props, collection: collection,
         isVirtualized: isVirtualized,
         layoutDelegate: layoutDelegate
     }, state, ref);
+    let dragState = undefined;
+    let dropState = undefined;
+    let droppableCollection = undefined;
+    let isRootDropTarget = false;
+    let dragPreview = null;
+    let preview = (0, $kUtXx$useRef)(null);
+    if (hasDragHooks && dragAndDropHooks) {
+        dragState = dragAndDropHooks.useDraggableCollectionState({
+            collection: state.collection,
+            selectionManager: state.selectionManager,
+            preview: dragAndDropHooks.renderDragPreview ? preview : undefined
+        });
+        dragAndDropHooks.useDraggableCollection({}, dragState, ref);
+        let DragPreview = dragAndDropHooks.DragPreview;
+        dragPreview = dragAndDropHooks.renderDragPreview ? /*#__PURE__*/ (0, $kUtXx$react).createElement(DragPreview, {
+            ref: preview
+        }, dragAndDropHooks.renderDragPreview) : null;
+    }
+    let [treeDropTargetDelegate] = (0, $kUtXx$useState)(()=>new (0, $7e0f784ed4e400df$export$82c13862611c034e)());
+    if (hasDropHooks && dragAndDropHooks) {
+        dropState = dragAndDropHooks.useDroppableCollectionState({
+            collection: state.collection,
+            selectionManager: state.selectionManager
+        });
+        let dropTargetDelegate = dragAndDropHooks.dropTargetDelegate || ctxDropTargetDelegate || new dragAndDropHooks.ListDropTargetDelegate(state.collection, ref, {
+            direction: direction
+        });
+        treeDropTargetDelegate.setup(dropTargetDelegate, state, direction);
+        let keyboardDelegate = new (0, $kUtXx$ListKeyboardDelegate)({
+            collection: state.collection,
+            collator: collator,
+            ref: ref,
+            disabledKeys: state.selectionManager.disabledKeys,
+            disabledBehavior: state.selectionManager.disabledBehavior,
+            direction: direction,
+            layoutDelegate: layoutDelegate
+        });
+        droppableCollection = dragAndDropHooks.useDroppableCollection({
+            keyboardDelegate: keyboardDelegate,
+            dropTargetDelegate: treeDropTargetDelegate,
+            onDropActivate: (e)=>{
+                // Expand collapsed item when dragging over. For keyboard, allow collapsing.
+                if (e.target.type === 'item') {
+                    var _dragAndDropHooks_isVirtualDragging;
+                    let key = e.target.key;
+                    let item = state.collection.getItem(key);
+                    let isExpanded = expandedKeys !== 'all' && expandedKeys.has(key);
+                    if (item && item.hasChildNodes && (!isExpanded || (dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : (_dragAndDropHooks_isVirtualDragging = dragAndDropHooks.isVirtualDragging) === null || _dragAndDropHooks_isVirtualDragging === void 0 ? void 0 : _dragAndDropHooks_isVirtualDragging.call(dragAndDropHooks)))) state.toggleKey(key);
+                }
+            },
+            onKeyDown: (e)=>{
+                let target = dropState === null || dropState === void 0 ? void 0 : dropState.target;
+                if (target && target.type === 'item' && target.dropPosition === 'on') {
+                    let item = state.collection.getItem(target.key);
+                    if (e.key === $2f5eaf4a2a47b4cf$var$EXPANSION_KEYS['expand'][direction] && (item === null || item === void 0 ? void 0 : item.hasChildNodes) && !state.expandedKeys.has(target.key)) state.toggleKey(target.key);
+                    else if (e.key === $2f5eaf4a2a47b4cf$var$EXPANSION_KEYS['collapse'][direction] && (item === null || item === void 0 ? void 0 : item.hasChildNodes) && state.expandedKeys.has(target.key)) state.toggleKey(target.key);
+                }
+            }
+        }, dropState, ref);
+        // Prevent dropping items onto themselves or their descendants
+        let originalGetDropOperation = dropState.getDropOperation;
+        dropState.getDropOperation = (options)=>{
+            let { target: target, isInternal: isInternal } = options;
+            var _dragState_draggingKeys;
+            let currentDraggingKeys = (_dragState_draggingKeys = dragState === null || dragState === void 0 ? void 0 : dragState.draggingKeys) !== null && _dragState_draggingKeys !== void 0 ? _dragState_draggingKeys : new Set();
+            if (isInternal && target.type === 'item' && currentDraggingKeys.size > 0) {
+                if (currentDraggingKeys.has(target.key) && target.dropPosition === 'on') return 'cancel';
+                let currentKey = target.key;
+                while(currentKey != null){
+                    let item = state.collection.getItem(currentKey);
+                    let parentKey = item === null || item === void 0 ? void 0 : item.parentKey;
+                    if (parentKey != null && currentDraggingKeys.has(parentKey)) return 'cancel';
+                    currentKey = parentKey !== null && parentKey !== void 0 ? parentKey : null;
+                }
+            }
+            return originalGetDropOperation(options);
+        };
+        isRootDropTarget = dropState.isDropTarget({
+            type: 'root'
+        });
+    }
+    let isTreeDraggable = !!(hasDragHooks && !(dragState === null || dragState === void 0 ? void 0 : dragState.isDisabled));
     let { focusProps: focusProps, isFocused: isFocused, isFocusVisible: isFocusVisible } = (0, $kUtXx$useFocusRing)();
     let renderValues = {
         isEmpty: state.collection.size === 0,
         isFocused: isFocused,
         isFocusVisible: isFocusVisible,
+        isDropTarget: isRootDropTarget,
+        selectionMode: state.selectionManager.selectionMode,
+        allowsDragging: !!isTreeDraggable,
         state: state
     };
     let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
@@ -174,28 +290,46 @@ function $2f5eaf4a2a47b4cf$var$TreeInner({ props: props, collection: collection,
             }
         }, content));
     }
-    return /*#__PURE__*/ (0, $kUtXx$react).createElement((0, $kUtXx$FocusScope), null, /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
+    return /*#__PURE__*/ (0, $kUtXx$react).createElement((0, $kUtXx$react).Fragment, null, /*#__PURE__*/ (0, $kUtXx$react).createElement((0, $kUtXx$FocusScope), null, /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
         ...(0, $kUtXx$filterDOMProps)(props),
         ...renderProps,
-        ...(0, $kUtXx$mergeProps)(gridProps, focusProps),
+        ...(0, $kUtXx$mergeProps)(gridProps, focusProps, droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps),
         ref: ref,
         slot: props.slot || undefined,
         onScroll: props.onScroll,
         "data-empty": state.collection.size === 0 || undefined,
         "data-focused": isFocused || undefined,
-        "data-focus-visible": isFocusVisible || undefined
+        "data-drop-target": isRootDropTarget || undefined,
+        "data-focus-visible": isFocusVisible || undefined,
+        "data-selection-mode": state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode,
+        "data-allows-dragging": !!isTreeDraggable || undefined
     }, /*#__PURE__*/ (0, $kUtXx$react).createElement((0, $64fa3d84918910a7$export$2881499e37b75b9a), {
         values: [
             [
                 $2f5eaf4a2a47b4cf$export$8953bccafd7bce87,
                 state
+            ],
+            [
+                (0, $612b8eb6cb90e02d$export$d188a835a7bc5783),
+                {
+                    dragAndDropHooks: dragAndDropHooks,
+                    dragState: dragState,
+                    dropState: dropState
+                }
+            ],
+            [
+                (0, $612b8eb6cb90e02d$export$f55761759794cf55),
+                {
+                    render: $2f5eaf4a2a47b4cf$var$TreeDropIndicatorWrapper
+                }
             ]
         ]
-    }, /*#__PURE__*/ (0, $kUtXx$react).createElement(CollectionRoot, {
+    }, hasDropHooks && /*#__PURE__*/ (0, $kUtXx$react).createElement($2f5eaf4a2a47b4cf$var$RootDropIndicator, null), /*#__PURE__*/ (0, $kUtXx$react).createElement(CollectionRoot, {
         collection: state.collection,
-        persistedKeys: (0, $7135fc7d473fd974$export$90e00781bc59d8f9)(state.selectionManager.focusedKey),
-        scrollRef: ref
-    })), emptyState));
+        persistedKeys: (0, $612b8eb6cb90e02d$export$d1e8e3fbb7461f6)(state.selectionManager, dragAndDropHooks, dropState),
+        scrollRef: ref,
+        renderDropIndicator: (0, $612b8eb6cb90e02d$export$971707d8a129a1f7)(dragAndDropHooks, dropState)
+    })), emptyState)), dragPreview);
 }
 const $2f5eaf4a2a47b4cf$export$4b687e3f663d618c = /*#__PURE__*/ (0, $kUtXx$createLeafComponent)('content', function TreeItemContent(props) {
     let values = (0, $kUtXx$useContext)($2f5eaf4a2a47b4cf$export$36b5dda0d9bc8f78);
@@ -212,10 +346,12 @@ const $2f5eaf4a2a47b4cf$export$53d36ab85dc89436 = /*#__PURE__*/ (0, $kUtXx$creat
     var _this;
     let state = (0, $kUtXx$useContext)($2f5eaf4a2a47b4cf$export$8953bccafd7bce87);
     ref = (0, $kUtXx$useObjectRef)(ref);
+    let { dragAndDropHooks: dragAndDropHooks, dragState: dragState, dropState: dropState } = (0, $kUtXx$useContext)((0, $612b8eb6cb90e02d$export$d188a835a7bc5783));
     // TODO: remove this when we support description in tree row
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     let { rowProps: rowProps, gridCellProps: gridCellProps, expandButtonProps: expandButtonProps, descriptionProps: descriptionProps, ...states } = (0, $kUtXx$useTreeItem)({
-        node: item
+        node: item,
+        shouldSelectOnPressUp: !!dragState
     }, state, ref);
     let isExpanded = rowProps['aria-expanded'] === true;
     let hasChildItems = props.hasChildItems || ((_this = [
@@ -235,6 +371,26 @@ const $2f5eaf4a2a47b4cf$export$53d36ab85dc89436 = /*#__PURE__*/ (0, $kUtXx$creat
     let { checkboxProps: checkboxProps } = (0, $kUtXx$useGridListSelectionCheckbox)({
         key: item.key
     }, state);
+    let draggableItem = null;
+    if (dragState && dragAndDropHooks) draggableItem = dragAndDropHooks.useDraggableItem({
+        key: item.key,
+        hasDragButton: true
+    }, dragState);
+    let dropIndicator = null;
+    let expandButtonRef = (0, $kUtXx$useRef)(null);
+    let dropIndicatorRef = (0, $kUtXx$useRef)(null);
+    let activateButtonRef = (0, $kUtXx$useRef)(null);
+    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $kUtXx$useVisuallyHidden)();
+    if (dropState && dragAndDropHooks) dropIndicator = dragAndDropHooks.useDropIndicator({
+        target: {
+            type: 'item',
+            key: item.key,
+            dropPosition: 'on'
+        },
+        activateButtonRef: activateButtonRef
+    }, dropState, dropIndicatorRef);
+    let isDragging = dragState && dragState.isDragging(item.key);
+    let isDropTarget = dropIndicator === null || dropIndicator === void 0 ? void 0 : dropIndicator.isDropTarget;
     let selectionMode = state.selectionManager.selectionMode;
     let selectionBehavior = state.selectionManager.selectionBehavior;
     let renderPropValues = (0, $kUtXx$react).useMemo(()=>({
@@ -248,19 +404,25 @@ const $2f5eaf4a2a47b4cf$export$53d36ab85dc89436 = /*#__PURE__*/ (0, $kUtXx$creat
             selectionBehavior: selectionBehavior,
             isFocusVisibleWithin: isFocusVisibleWithin,
             state: state,
-            id: item.key
+            id: item.key,
+            allowsDragging: !!dragState,
+            isDragging: isDragging,
+            isDropTarget: isDropTarget
         }), [
         states,
         isHovered,
         isFocusVisible,
-        selectionMode,
-        selectionBehavior,
         isExpanded,
         hasChildItems,
         level,
         isFocusVisibleWithin,
         state,
-        item.key
+        item.key,
+        dragState,
+        isDragging,
+        isDropTarget,
+        selectionBehavior,
+        selectionMode
     ]);
     let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
         ...props,
@@ -278,11 +440,15 @@ const $2f5eaf4a2a47b4cf$export$53d36ab85dc89436 = /*#__PURE__*/ (0, $kUtXx$creat
     }, [
         item.textValue
     ]);
-    let expandButtonRef = (0, $kUtXx$useRef)(null);
     (0, $kUtXx$useEffect)(()=>{
         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
     }, []);
+    let dragButtonRef = (0, $kUtXx$useRef)(null);
+    (0, $kUtXx$useEffect)(()=>{
+        if (dragState && !dragButtonRef.current && process.env.NODE_ENV !== 'production') console.warn('Draggable items in a Tree must contain a <Button slot="drag"> element so that keyboard and screen reader users can drag them.');
+    // eslint-disable-next-line
+    }, []);
     let children = (0, $kUtXx$useCachedChildren)({
         items: state.collection.getChildren(item.key),
         children: (item)=>{
@@ -299,8 +465,34 @@ const $2f5eaf4a2a47b4cf$export$53d36ab85dc89436 = /*#__PURE__*/ (0, $kUtXx$creat
             }
         }
     });
-    return /*#__PURE__*/ (0, $kUtXx$react).createElement((0, $kUtXx$react).Fragment, null, /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
-        ...(0, $kUtXx$mergeProps)((0, $kUtXx$filterDOMProps)(props), rowProps, focusProps, hoverProps, focusWithinProps),
+    let activateButtonId = (0, $kUtXx$useId)();
+    return /*#__PURE__*/ (0, $kUtXx$react).createElement((0, $kUtXx$react).Fragment, null, dropIndicator && !dropIndicator.isHidden && /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
+        role: "row",
+        "aria-level": rowProps['aria-level'],
+        "aria-expanded": rowProps['aria-expanded'],
+        "aria-label": dropIndicator.dropIndicatorProps['aria-label']
+    }, /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
+        role: "gridcell",
+        "aria-colindex": 1,
+        style: {
+            display: 'contents'
+        }
+    }, /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
+        role: "button",
+        ...visuallyHiddenProps,
+        ...dropIndicator.dropIndicatorProps,
+        ref: dropIndicatorRef
+    }), rowProps['aria-expanded'] != null ? // Button to allow touch screen reader users to expand the item while dragging.
+    /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
+        role: "button",
+        ...visuallyHiddenProps,
+        id: activateButtonId,
+        "aria-label": expandButtonProps['aria-label'],
+        "aria-labelledby": `${activateButtonId} ${rowProps.id}`,
+        tabIndex: -1,
+        ref: activateButtonRef
+    }) : null)), /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
+        ...(0, $kUtXx$mergeProps)((0, $kUtXx$filterDOMProps)(props), rowProps, focusProps, hoverProps, focusWithinProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps),
         ...renderProps,
         ref: ref,
         // TODO: missing selectionBehavior, hasAction and allowsSelection data attribute equivalents (available in renderProps). Do we want those?
@@ -313,7 +505,10 @@ const $2f5eaf4a2a47b4cf$export$53d36ab85dc89436 = /*#__PURE__*/ (0, $kUtXx$creat
         "data-focused": states.isFocused || undefined,
         "data-focus-visible": isFocusVisible || undefined,
         "data-pressed": states.isPressed || undefined,
-        "data-selection-mode": state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode
+        "data-selection-mode": state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode,
+        "data-allows-dragging": !!dragState || undefined,
+        "data-dragging": isDragging || undefined,
+        "data-drop-target": isDropTarget || undefined
     }, /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
         ...gridCellProps,
         style: {
@@ -339,6 +534,13 @@ const $2f5eaf4a2a47b4cf$export$53d36ab85dc89436 = /*#__PURE__*/ (0, $kUtXx$creat
                         chevron: {
                             ...expandButtonProps,
                             ref: expandButtonRef
+                        },
+                        drag: {
+                            ...draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragButtonProps,
+                            ref: dragButtonRef,
+                            style: {
+                                pointerEvents: 'none'
+                            }
                         }
                     }
                 }
@@ -422,6 +624,82 @@ function $2f5eaf4a2a47b4cf$var$flattenTree(collection, opts) {
         keyMap: keyMap
     };
 }
+function $2f5eaf4a2a47b4cf$var$TreeDropIndicatorWrapper(props, ref) {
+    var _dropState_collection_getItem;
+    ref = (0, $kUtXx$useObjectRef)(ref);
+    let { dragAndDropHooks: dragAndDropHooks, dropState: dropState } = (0, $kUtXx$useContext)((0, $612b8eb6cb90e02d$export$d188a835a7bc5783));
+    let buttonRef = (0, $kUtXx$useRef)(null);
+    let { dropIndicatorProps: dropIndicatorProps, isHidden: isHidden, isDropTarget: isDropTarget } = dragAndDropHooks.useDropIndicator(props, dropState, buttonRef);
+    if (isHidden) return null;
+    let level = dropState && props.target.type === 'item' ? (((_dropState_collection_getItem = dropState.collection.getItem(props.target.key)) === null || _dropState_collection_getItem === void 0 ? void 0 : _dropState_collection_getItem.level) || 0) + 1 : 1;
+    return /*#__PURE__*/ (0, $kUtXx$react).createElement($2f5eaf4a2a47b4cf$var$TreeDropIndicatorForwardRef, {
+        ...props,
+        dropIndicatorProps: dropIndicatorProps,
+        isDropTarget: isDropTarget,
+        ref: ref,
+        buttonRef: buttonRef,
+        level: level
+    });
+}
+function $2f5eaf4a2a47b4cf$var$TreeDropIndicator(props, ref) {
+    let { dropIndicatorProps: dropIndicatorProps, isDropTarget: isDropTarget, buttonRef: buttonRef, level: level, ...otherProps } = props;
+    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $kUtXx$useVisuallyHidden)();
+    let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
+        ...otherProps,
+        defaultClassName: 'react-aria-DropIndicator',
+        defaultStyle: {
+            position: 'relative',
+            // @ts-ignore
+            '--tree-item-level': level
+        },
+        values: {
+            isDropTarget: isDropTarget
+        }
+    });
+    return /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
+        ...renderProps,
+        role: "row",
+        "aria-level": level,
+        ref: ref,
+        "data-drop-target": isDropTarget || undefined
+    }, /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
+        role: "gridcell"
+    }, /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
+        ...visuallyHiddenProps,
+        role: "button",
+        ...dropIndicatorProps,
+        ref: buttonRef
+    }), renderProps.children));
+}
+const $2f5eaf4a2a47b4cf$var$TreeDropIndicatorForwardRef = /*#__PURE__*/ (0, $kUtXx$forwardRef)($2f5eaf4a2a47b4cf$var$TreeDropIndicator);
+function $2f5eaf4a2a47b4cf$var$RootDropIndicator() {
+    let { dragAndDropHooks: dragAndDropHooks, dropState: dropState } = (0, $kUtXx$useContext)((0, $612b8eb6cb90e02d$export$d188a835a7bc5783));
+    let ref = (0, $kUtXx$useRef)(null);
+    let { dropIndicatorProps: dropIndicatorProps } = dragAndDropHooks.useDropIndicator({
+        target: {
+            type: 'root'
+        }
+    }, dropState, ref);
+    let isDropTarget = dropState.isDropTarget({
+        type: 'root'
+    });
+    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $kUtXx$useVisuallyHidden)();
+    if (!isDropTarget && dropIndicatorProps['aria-hidden']) return null;
+    return /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
+        role: "row",
+        "aria-hidden": dropIndicatorProps['aria-hidden'],
+        style: {
+            position: 'absolute'
+        }
+    }, /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
+        role: "gridcell"
+    }, /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
+        role: "button",
+        ...visuallyHiddenProps,
+        ...dropIndicatorProps,
+        ref: ref
+    })));
+}
 
 
 export {$2f5eaf4a2a47b4cf$export$dfae7d399eea2568 as TreeContext, $2f5eaf4a2a47b4cf$export$8953bccafd7bce87 as TreeStateContext, $2f5eaf4a2a47b4cf$export$7fbedc92909ed28e as Tree, $2f5eaf4a2a47b4cf$export$4b687e3f663d618c as TreeItemContent, $2f5eaf4a2a47b4cf$export$36b5dda0d9bc8f78 as TreeItemContentContext, $2f5eaf4a2a47b4cf$export$53d36ab85dc89436 as TreeItem, $2f5eaf4a2a47b4cf$export$9d1a587784d97b41 as UNSTABLE_TreeLoadingIndicator};