@react-spectrum/s2 1.3.1 → 1.5.0

package/dist/private/TreeView.cjs

@@ -4,17 +4,18 @@ var $e5a758dd286599f2$exports = require("./ActionMenu.cjs");
 var $e991cbcdf82ced71$exports = require("./CenterBaseline.cjs");
 var $af04e099a53d3e85$exports = require("./Checkbox.cjs");
 var $1df9f1c9262ce5df$exports = require("./Chevron.cjs");
+var $f1f08ef5de95f8eb$exports = require("./dnd-utils.cjs");
+var $35d2da6f10cb8588$exports = require("./DragPreview.cjs");
 var $bde97c91243ed164$exports = require("../../icons/Icon.cjs");
 var $4526404114e78c80$exports = require("./intlStrings.cjs");
-var $387d58020e2a8028$exports = require("./ListView.cjs");
 var $1c116ea4b0d2d023$exports = require("./ProgressCircle.cjs");
+var $387d58020e2a8028$exports = require("./ListView.cjs");
 var $6367bc87eb7d24ad$exports = require("./Content.cjs");
 var $85bf454149fe9ddc$exports = require("./ActionBar.cjs");
 var $150382364eecc4bc$exports = require("./useDOMRef.cjs");
 var $ee7b4c497f520c08$exports = require("./utils.cjs");
 var $6K4Mt$reactjsxruntime = require("react/jsx-runtime");
 var $6K4Mt$reactariacomponentsButton = require("react-aria-components/Button");
-var $6K4Mt$reactstatelyuseVirtualizerState = require("react-stately/useVirtualizerState");
 var $6K4Mt$reactariacomponentsslots = require("react-aria-components/slots");
 var $6K4Mt$reactariacomponentsTree = require("react-aria-components/Tree");
 var $6K4Mt$react = require("react");
@@ -65,6 +66,7 @@ $parcel$export(module.exports, "TreeViewLoadMoreItem", () => $8a2a97a0cb171e69$e
 
 
 
+
 
 
 const $8a2a97a0cb171e69$var$TreeRendererContext = /*#__PURE__*/ (0, $6K4Mt$react.createContext)({});
@@ -82,45 +84,77 @@ const $8a2a97a0cb171e69$var$treeViewWrapper = function anonymous(props, override
         if (p[1] === "_P") position = true;
         rules += p[0];
     }
-    if (!minHeight) rules += ' Ma13';
-    if (!height) rules += ' Fb13';
-    if (!minWidth) rules += ' NMaAbMd13';
-    rules += ' sd13';
-    rules += ' _Bb13';
-    rules += ' __ca13';
-    if (!position) rules += ' _Pc13';
-    rules += ' _Nb13';
-    rules += ' Pb13';
+    if (!minHeight) rules += ' Ma15';
+    if (!height) rules += ' Fb15';
+    if (!minWidth) rules += ' NMaAbMd15';
+    rules += ' sd15';
+    rules += ' _Bb15';
+    rules += ' __ca15';
+    if (!position) rules += ' _Pc15';
+    rules += ' _Nb15';
+    rules += ' Pb15';
+    rules += ' -dBGRde-ZVvYXid15';
+    rules += ' -qVUQke-oa15';
     return rules;
 };
+// TODO: can't use border cuz it means the contents of the tree are no longer
+// flush with its container. Outline and box shadow are affected by the outlineOffset we
+// have in the tree styles and result in the rows clipping the drop outline. This approach
+// avoids that
+const $8a2a97a0cb171e69$var$rootDropOutline = "_2RDoQb";
+// These are the same as ListView. we didn't have v3 tree dnd and dont have designs so to be adjusted later
+const $8a2a97a0cb171e69$var$dropTargetBackground = "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) 10%)]";
+const $8a2a97a0cb171e69$var$rootDropSelectedRowBackground = "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) 28%)]";
+const $8a2a97a0cb171e69$var$rowDropBackground = "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) 10%)]";
+const $8a2a97a0cb171e69$var$rootRowDropStyles = {
+    default: $8a2a97a0cb171e69$var$dropTargetBackground,
+    isSelected: $8a2a97a0cb171e69$var$rootDropSelectedRowBackground,
+    forcedColors: 'Background'
+};
+const $8a2a97a0cb171e69$var$rowDropStyles = {
+    default: $8a2a97a0cb171e69$var$rowDropBackground,
+    isSelected: $8a2a97a0cb171e69$var$rowDropBackground,
+    forcedColors: 'Background'
+};
 // TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the
 // keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't
 // scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview
 const $8a2a97a0cb171e69$var$tree = function anonymous(props) {
     let rules = " ";
-    if (props.isFocusVisible) rules += ' _Lf13';
-    else rules += ' _Le13';
-    rules += ' Oh13';
-    rules += ' Olc13';
-    rules += ' _Mc13';
-    rules += ' _Kb13';
-    rules += ' _4c13';
-    rules += ' Ma13';
-    rules += ' Na13';
-    rules += ' Za13';
-    rules += ' Fb13';
-    rules += ' _Na13';
-    rules += ' Pa13';
-    rules += ' _oa13';
-    if (props.isEmpty) rules += ' _Ca13';
-    if (props.isEmpty) rules += ' eb13';
-    rules += ' -lPUMEc-Zu13';
+    if (props.isFocusVisible) rules += ' _Lf15';
+    else rules += ' _Le15';
+    rules += ' Oh15';
+    rules += ' Olc15';
+    rules += ' _Mc15';
+    rules += ' _Kb15';
+    rules += ' _4c15';
+    rules += ' Ma15';
+    rules += ' Na15';
+    rules += ' Za15';
+    rules += ' Fb15';
+    rules += ' _Na15';
+    rules += ' Pa15';
+    rules += ' _oa15';
+    if (props.isDropTarget) {
+        rules += ' glzvDBe15';
+        rules += ' gla15';
+    }
+    if (props.isEmpty) rules += ' _Ca15';
+    if (props.isEmpty) rules += ' eb15';
+    rules += ' -lPUMEc-Zu15';
     return rules;
 };
 let $8a2a97a0cb171e69$var$InternalTreeViewContext = /*#__PURE__*/ (0, $6K4Mt$react.createContext)({});
 const $8a2a97a0cb171e69$export$6940b0d9c820eca7 = /*#__PURE__*/ (0, $6K4Mt$react.forwardRef)(function TreeView(props, ref) {
-    let { children: children, selectionStyle: selectionStyle = 'checkbox', UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style } = props;
+    let { children: children, selectionStyle: selectionStyle = 'checkbox', UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, dragAndDropHooks: dragAndDropHooks } = props;
     let scale = (0, $ee7b4c497f520c08$exports.useScale)();
+    if (dragAndDropHooks && dragAndDropHooks.renderDragPreview == null) dragAndDropHooks.renderDragPreview = (items)=>/*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)((0, $35d2da6f10cb8588$exports.DragPreview), {
+            items: items
+        });
+    let hasCheckbox = props.selectionMode !== 'none' && selectionStyle !== 'highlight';
+    if (dragAndDropHooks) dragAndDropHooks.renderDropIndicator = (target)=>/*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)((0, $f1f08ef5de95f8eb$exports.InsertionIndicator), {
+            target: target
+        });
     let renderer;
     if (typeof children === 'function') renderer = children;
     let domRef = (0, $150382364eecc4bc$exports.useDOMRef)(ref);
@@ -131,13 +165,16 @@ const $8a2a97a0cb171e69$export$6940b0d9c820eca7 = /*#__PURE__*/ (0, $6K4Mt$react
     });
     return /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsxs)("div", {
         ref: domRef,
-        className: (UNSAFE_className ?? '') + $8a2a97a0cb171e69$var$treeViewWrapper(null, props.styles),
+        className: (UNSAFE_className ?? '') + $8a2a97a0cb171e69$var$treeViewWrapper({
+            hasCheckbox: hasCheckbox
+        }, props.styles) + ' ' + $8a2a97a0cb171e69$var$rootDropOutline,
         style: UNSAFE_style,
         children: [
             /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)((0, $6K4Mt$reactariacomponentsVirtualizer.Virtualizer), {
-                layout: (0, $6K4Mt$reactstatelyuseVirtualizerState.ListLayout),
+                layout: (0, $387d58020e2a8028$exports.S2ListLayout),
                 layoutOptions: {
-                    rowHeight: scale === 'large' ? 50 : 40
+                    rowHeight: scale === 'large' ? 50 : 40,
+                    dropIndicatorThickness: 0
                 },
                 children: /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)($8a2a97a0cb171e69$var$TreeRendererContext.Provider, {
                     value: {
@@ -149,11 +186,12 @@ const $8a2a97a0cb171e69$export$6940b0d9c820eca7 = /*#__PURE__*/ (0, $6K4Mt$react
                         },
                         children: /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)((0, $6K4Mt$reactariacomponentsTree.Tree), {
                             ...props,
+                            dragAndDropHooks: dragAndDropHooks,
                             style: {
                                 paddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0,
                                 scrollPaddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0
                             },
-                            className: $8a2a97a0cb171e69$var$tree,
+                            className: (renderProps)=>$8a2a97a0cb171e69$var$tree(renderProps),
                             selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle',
                             selectedKeys: selectedKeys,
                             defaultSelectedKeys: undefined,
@@ -185,200 +223,212 @@ const $8a2a97a0cb171e69$var$rowBackgroundColor = {
 };
 const $8a2a97a0cb171e69$var$treeRow = function anonymous(props) {
     let rules = " ";
-    rules += ' _Le13';
-    rules += ' _Pc13';
-    rules += ' sd13';
-    rules += ' Fv13';
-    rules += ' Za13';
-    rules += ' _oa13';
-    rules += ' uk13';
-    rules += ' ucJ9TBTb13';
-    rules += ' ud3Euai13';
-    rules += ' uea13';
-    rules += ' ugb13';
-    rules += ' uhd13';
-    rules += ' uje13';
-    rules += ' u2NhKxcl13';
-    rules += ' uic13';
-    rules += ' -_6BNtrc-c13';
-    rules += ' vx13';
-    rules += ' xb13';
-    rules += ' _xa13';
-    rules += ' _Fd13';
-    rules += ' _FnuYUweb13';
+    if (props.isDropTarget) rules += ' _Lf15';
+    else rules += ' _Le15';
+    if (props.isDropTarget) rules += ' _Mc15';
+    if (props.isDropTarget) rules += ' _Kb15';
+    if (props.isDropTarget) rules += ' Oh15';
+    if (props.isDropTarget) rules += ' Olc15';
+    rules += ' _Pc15';
+    rules += ' sd15';
+    rules += ' Fv15';
+    rules += ' Za15';
+    rules += ' _oa15';
+    rules += ' uk15';
+    rules += ' ucJ9TBTb15';
+    rules += ' ud3Euai15';
+    rules += ' uea15';
+    rules += ' ugb15';
+    rules += ' uhd15';
+    rules += ' uje15';
+    rules += ' u2NhKxcl15';
+    rules += ' uic15';
+    rules += ' -_6BNtrc-c15';
+    rules += ' vx15';
+    rules += ' xb15';
+    rules += ' _xa15';
+    rules += ' _Fd15';
+    rules += ' _FnuYUweb15';
     if (props.isSelected) {
-        if (props.isPressed) rules += ' po13';
-        else if (props.isFocusVisible) rules += ' po13';
-        else if (props.isHovered) rules += ' po13';
-        else rules += ' pt13';
+        if (props.isPressed) rules += ' po15';
+        else if (props.isFocusVisible) rules += ' po15';
+        else if (props.isHovered) rules += ' po15';
+        else rules += ' pt15';
     } else {
-        if (props.isPressed) rules += ' pt13';
-        else if (props.isFocusVisible) rules += ' pt13';
-        else if (props.isHovered) rules += ' pt13';
-        else rules += ' pv13';
+        if (props.isPressed) rules += ' pt15';
+        else if (props.isFocusVisible) rules += ' pt15';
+        else if (props.isHovered) rules += ' pt15';
+        else rules += ' pv15';
     }
-    rules += ' plb13';
-    if (props.isLink) rules += ' ry13';
-    else rules += ' ri13';
+    rules += ' plb15';
+    if (props.isLink) rules += ' ry15';
+    else rules += ' ri15';
     if (props.isSelected) {
-        if (props.isPressed) rules += ' -qH4xad-gRfT7e13';
-        else if (props.isHovered) rules += ' -qH4xad-gRfT7e13';
-        else if (props.isFocusVisibleWithin) rules += ' -qH4xad-gRfT7e13';
-        else rules += ' -qH4xad-gj1B7i13';
-    } else if (props.isPressed) rules += ' -qH4xad-gj1B7i13';
-    else if (props.isHovered) rules += ' -qH4xad-gj1B7i13';
-    else if (props.isFocusVisibleWithin) rules += ' -qH4xad-gj1B7i13';
-    else rules += ' -qH4xad-gEzkoQe13';
-    rules += ' -qH4xad-lga13';
-    rules += ' -_8Gqznb-oa13';
-    rules += ' oa13';
-    rules += ' na13';
-    rules += ' ka13';
-    rules += ' ja13';
+        if (props.isPressed) rules += ' -qH4xad-gRfT7e15';
+        else if (props.isHovered) rules += ' -qH4xad-gRfT7e15';
+        else if (props.isFocusVisibleWithin) rules += ' -qH4xad-gRfT7e15';
+        else rules += ' -qH4xad-gj1B7i15';
+    } else if (props.isPressed) rules += ' -qH4xad-gj1B7i15';
+    else if (props.isHovered) rules += ' -qH4xad-gj1B7i15';
+    else if (props.isFocusVisibleWithin) rules += ' -qH4xad-gj1B7i15';
+    else rules += ' -qH4xad-gEzkoQe15';
+    rules += ' -qH4xad-lga15';
+    rules += ' -_8Gqznb-oa15';
+    rules += ' oa15';
+    rules += ' na15';
+    rules += ' ka15';
+    rules += ' ja15';
     return rules;
 };
 const $8a2a97a0cb171e69$var$treeCellGrid = function anonymous(props) {
     let rules = " ";
-    rules += ' se13';
-    rules += ' Za13';
-    rules += ' Fb13';
-    rules += ' _oa13';
-    rules += ' oa13';
-    rules += ' na13';
-    rules += ' ka13';
-    rules += ' ja13';
-    rules += ' _cb13';
-    rules += ' eb13';
-    rules += ' Dw9uTxc13';
-    rules += ' EM8Mfn13';
-    rules += ' CgjMZ2c13';
-    rules += ' Rp13';
+    rules += ' se15';
+    rules += ' Za15';
+    rules += ' Fb15';
+    rules += ' _oa15';
+    rules += ' oa15';
+    rules += ' na15';
+    rules += ' ka15';
+    rules += ' ja15';
+    rules += ' _cb15';
+    rules += ' eb15';
+    rules += ' DtBRkae15';
+    rules += ' EM8Mfn15';
+    rules += ' C4pAWc15';
+    rules += ' Rp15';
     if (props.selectionStyle === "highlight") {
-        if (props.isSelected) rules += ' ple13';
+        if (props.isSelected) rules += ' ple15';
     } else {
-        if (props.isDisabled) rules += ' pp13';
-        rules += ' plb13';
+        if (props.isDisabled) rules += ' pp15';
+        rules += ' plb15';
     }
-    if (props.isFocusVisible) rules += ' -_7xg3bb-Oh13';
-    else rules += ' -_7xg3bb-O8Izf8c13';
-    rules += ' -_7xg3bb-lOc13';
-    rules += ' -pKMv1c-Oh13';
-    rules += ' -pKMv1c-lOc13';
-    if (props.selectionStyle === "highlight") rules += ' -EH8uVb-iw13';
-    else rules += ' -EH8uVb-iA13';
-    rules += ' -EH8uVb-lia13';
-    rules += ' _yb13';
+    if (props.isFocusVisible) rules += ' -_7xg3bb-Oh15';
+    else rules += ' -_7xg3bb-O8Izf8c15';
+    rules += ' -_7xg3bb-lOc15';
+    rules += ' -pKMv1c-Oh15';
+    rules += ' -pKMv1c-lOc15';
+    if (props.selectionStyle === "highlight") rules += ' -EH8uVb-iw15';
+    else rules += ' -EH8uVb-iA15';
+    rules += ' -EH8uVb-lia15';
+    rules += ' _yb15';
     return rules;
 };
 const $8a2a97a0cb171e69$var$treeRowBackground = function anonymous(props) {
     let rules = " ";
-    rules += ' _Pa13';
-    rules += ' _9a13';
-    rules += ' Wr13';
-    rules += ' _lr13';
-    rules += ' _Ar13';
-    rules += ' _zr13';
-    if (props.selectionStyle === "highlight") {
-        if (props.isSelected) {
-            if (props.isFocusVisible) rules += ' gaZwDBe13';
-            else if (props.isPressed) rules += ' gaZwDBe13';
-            else if (props.isHovered) rules += ' gaZwDBe13';
-            else rules += ' glzvDBe13';
-            rules += ' gle13';
-        } else rules += ' gs9yXOb13';
+    rules += ' _Pa15';
+    rules += ' _9a15';
+    rules += ' Wr15';
+    rules += ' _lr15';
+    rules += ' _Ar15';
+    rules += ' _zr15';
+    if (props.isDropTarget) {
+        if (props.isSelected) rules += ' glzvDBe15';
+        else rules += ' glzvDBe15';
+        rules += ' gla15';
     } else {
-        rules += ' gs9yXOb13';
-        rules += ' gla13';
+        if (props.selectionStyle === "highlight") {
+            if (props.isSelected) {
+                if (props.isFocusVisible) rules += ' gaZwDBe15';
+                else if (props.isPressed) rules += ' gaZwDBe15';
+                else if (props.isHovered) rules += ' gaZwDBe15';
+                else rules += ' glzvDBe15';
+                rules += ' gle15';
+            } else rules += ' gs9yXOb15';
+        } else {
+            rules += ' gs9yXOb15';
+            rules += ' gla15';
+        }
+        if (props.isSelected) rules += ' gRQwW1ubHDBe15';
+        else rules += ' gRQwW1lzvDBe15';
+        rules += ' gRQwW1la15';
     }
     if (props.isPreviousSelected) {
-        if (props.isSelected) rules += ' od13';
-        else rules += ' o4VHKAc13';
-    } else rules += ' o4VHKAc13';
+        if (props.isSelected) rules += ' od15';
+        else rules += ' o4VHKAc15';
+    } else rules += ' o4VHKAc15';
     if (props.isPreviousSelected) {
-        if (props.isSelected) rules += ' nd13';
-        else rules += ' n4VHKAc13';
-    } else rules += ' n4VHKAc13';
+        if (props.isSelected) rules += ' nd15';
+        else rules += ' n4VHKAc15';
+    } else rules += ' n4VHKAc15';
     if (props.isNextSelected) {
-        if (props.isSelected) rules += ' kd13';
-        else rules += ' k4VHKAc13';
-    } else rules += ' k4VHKAc13';
+        if (props.isSelected) rules += ' kd15';
+        else rules += ' k4VHKAc15';
+    } else rules += ' k4VHKAc15';
     if (props.isNextSelected) {
-        if (props.isSelected) rules += ' jd13';
-        else rules += ' j4VHKAc13';
-    } else rules += ' j4VHKAc13';
-    if (props.isPreviousSelected) rules += ' _ka13';
-    else rules += ' _kb13';
-    if (props.isNextSelected) rules += ' ha13';
-    else rules += ' hb13';
-    rules += ' mb13';
-    rules += ' lb13';
-    rules += ' _jf13';
-    if (props.isSelected) rules += ' i4pzfu13';
-    else rules += ' iA13';
+        if (props.isSelected) rules += ' jd15';
+        else rules += ' j4VHKAc15';
+    } else rules += ' j4VHKAc15';
+    if (props.isPreviousSelected) rules += ' _ka15';
+    else rules += ' _kb15';
+    if (props.isNextSelected) rules += ' ha15';
+    else rules += ' hb15';
+    rules += ' mb15';
+    rules += ' lb15';
+    rules += ' _jf15';
+    if (props.isSelected) rules += ' i4pzfu15';
+    else rules += ' iA15';
     return rules;
 };
 const $8a2a97a0cb171e69$var$treeCheckbox = function anonymous(props) {
     let rules = " ";
-    rules += ' zoRzcu13';
-    rules += ' yoRzcu13';
-    rules += ' BoRzcu13';
-    rules += ' AoRzcu13';
-    rules += ' Ix13';
-    rules += ' Hy13';
-    rules += ' Rd13';
-    if (props.isDisabled) rules += ' _6b13';
-    else rules += ' _6c13';
+    rules += ' zoRzcu15';
+    rules += ' yoRzcu15';
+    rules += ' BoRzcu15';
+    rules += ' AoRzcu15';
+    rules += ' Iv15';
+    rules += ' Hy15';
+    rules += ' Rd15';
+    if (props.isDisabled) rules += ' _6b15';
+    else rules += ' _6c15';
     return rules;
 };
-const $8a2a97a0cb171e69$var$treeIcon = " z2U5Crc13 y2U5Crc13 B2U5Crc13 A2U5Crc13 Ht13 Hsu13 -_8sjo0b-t5ZbAob13";
-const $8a2a97a0cb171e69$var$treeContent = " zk52g2d13 yk52g2d13 Bk52g2d13 Ak52g2d13 _Yb13 _7c13 _Nc13 Pc13";
-const $8a2a97a0cb171e69$var$treeActions = " zkG38H13 ykG38H13 BkG38H13 AkG38H13 Ir13 Hs13";
-const $8a2a97a0cb171e69$var$treeActionMenu = " z6Nrfjc13 y6Nrfjc13 B6Nrfjc13 A6Nrfjc13";
+const $8a2a97a0cb171e69$var$treeIcon = " z2U5Crc15 y2U5Crc15 B2U5Crc15 A2U5Crc15 Ht15 Hsu15 -_8sjo0b-t5ZbAob15";
+const $8a2a97a0cb171e69$var$treeContent = " zk52g2d15 yk52g2d15 Bk52g2d15 Ak52g2d15 _Yb15 _7c15 _Nc15 Pc15";
+const $8a2a97a0cb171e69$var$treeActions = " zkG38H15 ykG38H15 BkG38H15 AkG38H15 Ir15 Hs15";
+const $8a2a97a0cb171e69$var$treeActionMenu = " z6Nrfjc15 y6Nrfjc15 B6Nrfjc15 A6Nrfjc15";
+const $8a2a97a0cb171e69$var$treeDragButtonContainer = " zqEWDzc15 yqEWDzc15 BqEWDzc15 AqEWDzc15 sd15 eb15 _Ca15 Zi15";
 let $8a2a97a0cb171e69$var$treeRowFocusRing = function anonymous(props) {
     let rules = " ";
-    if (props.isFocusVisible) rules += ' _Lf13';
-    else rules += ' _Le13';
+    if (props.isFocusVisible) rules += ' _Lf15';
+    else rules += ' _Le15';
     if (props.selectionStyle === "highlight") {
-        rules += ' Oh13';
-        rules += ' Ola13';
+        rules += ' Oh15';
+        rules += ' Ola15';
     } else {
-        rules += ' Oh13';
-        rules += ' Olc13';
+        rules += ' Oh15';
+        rules += ' Olc15';
     }
-    rules += ' _Mc13';
-    rules += ' _MlkNNfn13';
-    rules += ' _Kb13';
-    rules += ' _KlToPtrc13';
-    rules += ' _Pa13';
-    if (props.isFirstItem) rules += ' Wr13';
-    else rules += ' WLPOtrc13';
+    rules += ' _Mc15';
+    rules += ' _MlkNNfn15';
+    rules += ' _Kb15';
+    rules += ' _KlToPtrc15';
+    rules += ' _Pa15';
+    if (props.isFirstItem) rules += ' Wr15';
+    else rules += ' WLPOtrc15';
     if (props.selectionStyle === "highlight") {
         if (props.isSelected) {
-            if (props.isNextSelected) rules += ' _lr13';
-            else rules += ' _lr13';
-        } else if (props.isNextSelected) rules += ' _lLPOtrc13';
-        else rules += ' _lr13';
-    } else if (props.selectionStyle === "checkbox") rules += ' _lr13';
-    rules += ' _Ar13';
-    rules += ' _zr13';
-    rules += ' oa13';
-    rules += ' na13';
-    rules += ' ka13';
-    rules += ' ja13';
-    rules += ' _9c13';
-    rules += ' _Ob13';
+            if (props.isNextSelected) rules += ' _lr15';
+            else rules += ' _lr15';
+        } else if (props.isNextSelected) rules += ' _lLPOtrc15';
+        else rules += ' _lr15';
+    } else if (props.selectionStyle === "checkbox") rules += ' _lr15';
+    rules += ' _Ar15';
+    rules += ' _zr15';
+    rules += ' oa15';
+    rules += ' na15';
+    rules += ' ka15';
+    rules += ' ja15';
+    rules += ' _9c15';
+    rules += ' _Ob15';
     return rules;
 };
 const $8a2a97a0cb171e69$export$6e77ea6719814e9c = (props)=>{
     let { href: href } = props;
-    let { selectionStyle: selectionStyle } = (0, $6K4Mt$react.useContext)($8a2a97a0cb171e69$var$InternalTreeViewContext);
     return /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)((0, $6K4Mt$reactariacomponentsTree.TreeItem), {
         ...props,
         className: (renderProps)=>$8a2a97a0cb171e69$var$treeRow({
                 ...renderProps,
-                isLink: !!href,
-                selectionStyle: selectionStyle,
-                isPreviousSelected: (0, $387d58020e2a8028$exports.isPrevSelected)(renderProps.id, renderProps.state)
+                isLink: !!href
             })
     });
 };
@@ -387,7 +437,7 @@ const $8a2a97a0cb171e69$export$9a5779ed3fade674 = (props)=>{
     let scale = (0, $ee7b4c497f520c08$exports.useScale)();
     let { selectionStyle: selectionStyle } = (0, $6K4Mt$react.useContext)($8a2a97a0cb171e69$var$InternalTreeViewContext);
     return /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)((0, $6K4Mt$reactariacomponentsTree.TreeItemContent), {
-        children: ({ isExpanded: isExpanded, hasChildItems: hasChildItems, selectionMode: selectionMode, selectionBehavior: selectionBehavior, isDisabled: isDisabled, isSelected: isSelected, id: id, state: state, isHovered: isHovered, isFocusVisible: isFocusVisible })=>{
+        children: ({ isExpanded: isExpanded, hasChildItems: hasChildItems, selectionMode: selectionMode, selectionBehavior: selectionBehavior, isDisabled: isDisabled, isSelected: isSelected, id: id, state: state, isHovered: isHovered, isFocusVisible: isFocusVisible, isFocusVisibleWithin: isFocusVisibleWithin, allowsDragging: allowsDragging, isDropTarget: isDropTarget })=>{
             return /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsxs)("div", {
                 className: $8a2a97a0cb171e69$var$treeCellGrid({
                     isDisabled: isDisabled,
@@ -403,7 +453,8 @@ const $8a2a97a0cb171e69$export$9a5779ed3fade674 = (props)=>{
                             isSelected: isSelected,
                             selectionStyle: selectionStyle,
                             isNextSelected: $8a2a97a0cb171e69$var$isNextSelected(id, state),
-                            isPreviousSelected: (0, $387d58020e2a8028$exports.isPrevSelected)(id, state)
+                            isPreviousSelected: $8a2a97a0cb171e69$var$isPrevSelected(id, state),
+                            isDropTarget: isDropTarget
                         })
                     }),
                     isFocusVisible && /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)("div", {
@@ -412,10 +463,17 @@ const $8a2a97a0cb171e69$export$9a5779ed3fade674 = (props)=>{
                             selectionStyle: selectionStyle,
                             isSelected: isSelected,
                             isNextSelected: $8a2a97a0cb171e69$var$isNextSelected(id, state),
-                            isFirstItem: (0, $387d58020e2a8028$exports.isFirstItem)(id, state)
+                            isFirstItem: $8a2a97a0cb171e69$var$isFirstItem(id, state)
+                        })
+                    }),
+                    allowsDragging && /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)("div", {
+                        className: $8a2a97a0cb171e69$var$treeDragButtonContainer,
+                        children: !isDisabled && /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)((0, $f1f08ef5de95f8eb$exports.DragHandleButton), {
+                            isFocusVisibleWithin: isFocusVisibleWithin
                         })
                     }),
-                    selectionMode !== 'none' && selectionBehavior === 'toggle' && selectionStyle !== 'highlight' && /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)("div", {
+                    selectionMode !== 'none' && selectionBehavior === 'toggle' && selectionStyle !== 'highlight' && // TODO: add transition?
+                    /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)("div", {
                         className: $8a2a97a0cb171e69$var$treeCheckbox({
                             isDisabled: isDisabled || !state.selectionManager.canSelectItem(id) || state.disabledKeys.has(id)
                         }),
@@ -424,7 +482,7 @@ const $8a2a97a0cb171e69$export$9a5779ed3fade674 = (props)=>{
                         })
                     }),
                     /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)("div", {
-                        className: " z7fSmKc13 y7fSmKc13 B7fSmKc13 A7fSmKc13 ZecPNad13"
+                        className: " z7fSmKc15 y7fSmKc15 B7fSmKc15 A7fSmKc15 ZecPNad15"
                     }),
                     /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)($8a2a97a0cb171e69$var$ExpandableRowChevron, {
                         isDisabled: isDisabled,
@@ -447,7 +505,7 @@ const $8a2a97a0cb171e69$export$9a5779ed3fade674 = (props)=>{
                                         slot: 'icon',
                                         styles: $8a2a97a0cb171e69$var$treeIcon
                                     }),
-                                    styles: " ZuUmpre13 FuUmpre13 _va13"
+                                    styles: " ZuUmpre15 FuUmpre15 _va15"
                                 }
                             ],
                             [
@@ -475,7 +533,7 @@ const $8a2a97a0cb171e69$export$9a5779ed3fade674 = (props)=>{
         }
     });
 };
-const $8a2a97a0cb171e69$var$centeredWrapper = " sd13 eb13 _Ca13 Za13 Fb13";
+const $8a2a97a0cb171e69$var$centeredWrapper = " sd15 eb15 _Ca15 Za15 Fb15";
 const $8a2a97a0cb171e69$export$6ceebe2a029205c = (props)=>{
     let { loadingState: loadingState, onLoadMore: onLoadMore } = props;
     let stringFormatter = (0, $6K4Mt$reactariauseLocalizedStringFormatter.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4526404114e78c80$exports))), '@react-spectrum/s2');
@@ -483,7 +541,7 @@ const $8a2a97a0cb171e69$export$6ceebe2a029205c = (props)=>{
     return /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)((0, $6K4Mt$reactariacomponentsTree.TreeLoadMoreItem), {
         isLoading: isLoading,
         onLoadMore: onLoadMore,
-        className: " Za13 Js13 Gs13",
+        className: " Za15 Js15 Gs15",
         children: ()=>{
             return /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)("div", {
                 className: $8a2a97a0cb171e69$var$centeredWrapper,
@@ -497,37 +555,37 @@ const $8a2a97a0cb171e69$export$6ceebe2a029205c = (props)=>{
 };
 const $8a2a97a0cb171e69$var$expandButton = function anonymous(props) {
     let rules = " ";
-    rules += ' z8dW5Qb13';
-    rules += ' y8dW5Qb13';
-    rules += ' B8dW5Qb13';
-    rules += ' A8dW5Qb13';
+    rules += ' z8dW5Qb15';
+    rules += ' y8dW5Qb15';
+    rules += ' B8dW5Qb15';
+    rules += ' A8dW5Qb15';
     if (props.isDisabled) {
-        rules += ' pp13';
-        rules += ' plc13';
-    } else rules += ' p40ub4c13';
-    rules += ' Fv13';
-    rules += ' Zw13';
-    rules += ' sd13';
-    rules += ' _wb13';
-    rules += ' _cb13';
-    rules += ' _Ca13';
-    rules += ' _Le13';
-    rules += ' ri13';
+        rules += ' pp15';
+        rules += ' plc15';
+    } else rules += ' p40ub4c15';
+    rules += ' Fv15';
+    rules += ' Zw15';
+    rules += ' sd15';
+    rules += ' _wb15';
+    rules += ' _cb15';
+    rules += ' _Ca15';
+    rules += ' _Le15';
+    rules += ' ri15';
     if (props.isExpanded) {
-        if (props.isRTL) rules += ' _Za13';
-        else rules += ' _Zb13';
+        if (props.isRTL) rules += ' _Za15';
+        else rules += ' _Zb15';
     }
-    rules += ' Td13';
-    rules += ' Qd13';
-    rules += ' Sd13';
-    rules += ' Rd13';
-    rules += ' Yd13';
-    rules += ' Xb13';
-    rules += ' _2b13';
-    rules += ' g913';
-    rules += ' _je13';
-    rules += ' __ca13';
-    if (props.isHidden) rules += ' _6b13';
+    rules += ' Td15';
+    rules += ' Qd15';
+    rules += ' Sd15';
+    rules += ' Rd15';
+    rules += ' Yd15';
+    rules += ' Xb15';
+    rules += ' _2b15';
+    rules += ' g915';
+    rules += ' _je15';
+    rules += ' __ca15';
+    if (props.isHidden) rules += ' _6b15';
     return rules;
 };
 function $8a2a97a0cb171e69$var$ExpandableRowChevron(props1) {
@@ -553,20 +611,20 @@ function $8a2a97a0cb171e69$var$ExpandableRowChevron(props1) {
             className: function anonymous(props) {
                 let rules = " ";
                 if (props.direction === "rtl") {
-                    rules += ' -Z4Pn4c-a13';
-                    rules += ' __Ha13';
+                    rules += ' -Z4Pn4c-a15';
+                    rules += ' __Ha15';
                 } else if (props.direction === "ltr") {
-                    rules += ' -Z4Pn4c-b13';
-                    rules += ' __Ha13';
+                    rules += ' -Z4Pn4c-b15';
+                    rules += ' __Ha15';
                 }
                 if (props.direction === "rtl") {
-                    rules += ' -_04Pn4c-a13';
-                    rules += ' __Ha13';
+                    rules += ' -_04Pn4c-a15';
+                    rules += ' __Ha15';
                 } else if (props.direction === "ltr") {
-                    rules += ' -_04Pn4c-b13';
-                    rules += ' __Ha13';
+                    rules += ' -_04Pn4c-b15';
+                    rules += ' __Ha15';
                 }
-                rules += ' -_8sjo0b-t5ZbAob13';
+                rules += ' -_8sjo0b-t5ZbAob15';
                 return rules;
             }({
                 direction: direction
@@ -578,13 +636,22 @@ function $8a2a97a0cb171e69$var$isNextSelected(id, state) {
     if (id == null || !state) return false;
     let keyAfter = state.collection.getKeyAfter(id);
     // We need to skip non-item nodes because the selection manager will map non-item nodes to their parent before checking selection
-    let node = keyAfter ? state.collection.getItem(keyAfter) : null;
-    while(node && node.type !== 'item' && keyAfter){
+    let node = keyAfter != null ? state.collection.getItem(keyAfter) : null;
+    while(node && node.type !== 'item' && keyAfter != null){
         keyAfter = state.collection.getKeyAfter(keyAfter);
-        node = keyAfter ? state.collection.getItem(keyAfter) : null;
+        node = keyAfter != null ? state.collection.getItem(keyAfter) : null;
     }
     return keyAfter != null && state.selectionManager.isSelected(keyAfter);
 }
+function $8a2a97a0cb171e69$var$isPrevSelected(id, state) {
+    if (id == null || !state) return false;
+    let keyBefore = state.collection.getKeyBefore(id);
+    return keyBefore != null && state.selectionManager.isSelected(keyBefore);
+}
+function $8a2a97a0cb171e69$var$isFirstItem(id, state) {
+    if (id == null || !state) return false;
+    return state.collection.getFirstKey() === id;
+}
 
 
 //# sourceMappingURL=TreeView.cjs.map