@react-spectrum/s2 1.3.1 → 1.5.0

package/dist/private/ListView.cjs

@@ -4,6 +4,8 @@ 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 $35d2da6f10cb8588$exports = require("./DragPreview.cjs");
+var $f1f08ef5de95f8eb$exports = require("./dnd-utils.cjs");
 var $bde97c91243ed164$exports = require("../../icons/Icon.cjs");
 var $053b76ed3d29e13b$exports = require("./Image.cjs");
 var $4526404114e78c80$exports = require("./intlStrings.cjs");
@@ -21,10 +23,10 @@ var $jpFeb$reactariacomponentsCollectionBuilder = require("react-aria-components
 var $jpFeb$reactariacomponentsslots = require("react-aria-components/slots");
 var $jpFeb$react = require("react");
 var $jpFeb$reactariacomponentsGridList = require("react-aria-components/GridList");
+var $jpFeb$reactariacomponentsVirtualizer = require("react-aria-components/Virtualizer");
 var $jpFeb$reactstatelyuseVirtualizerState = require("react-stately/useVirtualizerState");
 var $jpFeb$reactariaI18nProvider = require("react-aria/I18nProvider");
 var $jpFeb$reactariauseLocalizedStringFormatter = require("react-aria/useLocalizedStringFormatter");
-var $jpFeb$reactariacomponentsVirtualizer = require("react-aria-components/Virtualizer");
 
 
 function $parcel$interopDefault(a) {
@@ -36,9 +38,8 @@ function $parcel$export(e, n, v, s) {
 }
 
 $parcel$export(module.exports, "ListViewContext", () => $387d58020e2a8028$export$870039b0abfe3de0);
+$parcel$export(module.exports, "S2ListLayout", () => $387d58020e2a8028$export$6f8e4757b55cd070);
 $parcel$export(module.exports, "ListView", () => $387d58020e2a8028$export$84d0dd190d551cd1);
-$parcel$export(module.exports, "isPrevSelected", () => $387d58020e2a8028$export$aebccab86af12e73);
-$parcel$export(module.exports, "isFirstItem", () => $387d58020e2a8028$export$50edc5c91910aafe);
 $parcel$export(module.exports, "ListViewItem", () => $387d58020e2a8028$export$c6bde0c04b033c0e);
 /*
  * Copyright 2026 Adobe. All rights reserved.
@@ -73,6 +74,8 @@ $parcel$export(module.exports, "ListViewItem", () => $387d58020e2a8028$export$c6
 
 
 
+
+
 
 
 
@@ -90,80 +93,105 @@ const $387d58020e2a8028$var$listViewWrapper = function anonymous(props, override
         if (p[1] === "_P") position = true;
         rules += p[0];
     }
-    if (!minHeight) rules += ' Ma13';
-    if (!minWidth) rules += ' Ng13';
-    rules += ' sd13';
-    rules += ' _Bb13';
-    rules += ' __ca13';
-    if (!position) rules += ' _Pc13';
-    rules += ' _Nb13';
-    rules += ' Pb13';
+    if (!minHeight) rules += ' Ma15';
+    if (!minWidth) rules += ' Ng15';
+    rules += ' sd15';
+    rules += ' _Bb15';
+    rules += ' __ca15';
+    if (!position) rules += ' _Pc15';
+    rules += ' _Nb15';
+    rules += ' Pb15';
+    rules += ' -qVUQke-ob15';
     return rules;
 };
+// similar to tableview, use this approach so we can actually have a 2px outline when root dropping.
+// cant do a external box shadow due to the clipping that is applied on the wrapper element...
+// an inset box shadow runs into problems with the item background clipping the box shadow...
+const $387d58020e2a8028$var$rootDropOutline = "IJKxRb";
 // When any row has a trailing icon, reserve space so actions align.
 const $387d58020e2a8028$var$hasTrailingIconRows = ':has([data-has-trailing-icon]) [role="row"]';
+const $387d58020e2a8028$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 $387d58020e2a8028$var$listView = function anonymous(props) {
     let rules = " ";
-    if (props.isFocusVisible) rules += ' _Lf13';
-    else rules += ' _Le13';
-    rules += ' Oh13';
-    rules += ' Olc13';
-    rules += ' _Mc13';
-    if (props.isQuiet) rules += ' _Ka13';
-    else rules += ' _Kb13';
-    rules += ' _4c13';
-    rules += ' Ma13';
-    rules += ' Na13';
-    rules += ' Za13';
-    rules += ' Fb13';
-    rules += ' _oa13';
-    rules += ' _Na13';
-    rules += ' Pa13';
+    if (props.isFocusVisible) rules += ' _Lf15';
+    else rules += ' _Le15';
+    rules += ' Oh15';
+    rules += ' Olc15';
+    rules += ' _Mc15';
+    if (props.isQuiet) rules += ' _Ka15';
+    else rules += ' _Kb15';
+    rules += ' _4c15';
+    rules += ' Ma15';
+    rules += ' Na15';
+    rules += ' Za15';
+    rules += ' Fb15';
+    rules += ' _oa15';
+    rules += ' _Na15';
+    rules += ' Pa15';
     if (props.size === "XL") {
-        rules += ' -_6BNtrc-e13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-e15';
+        rules += ' vx15';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-d13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-d15';
+        rules += ' vx15';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-b13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-b15';
+        rules += ' vx15';
     } else if (props.size === "XS") {
-        rules += ' -_6BNtrc-a13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-a15';
+        rules += ' vx15';
     } else {
-        rules += ' -_6BNtrc-c13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-c15';
+        rules += ' vx15';
     }
-    if (props.isQuiet) rules += ' g913';
-    else rules += ' gX13';
-    rules += ' gla13';
-    if (props.isQuiet) rules += ' od13';
-    else rules += ' ob13';
-    if (props.isQuiet) rules += ' nd13';
-    else rules += ' nb13';
-    if (props.isQuiet) rules += ' kd13';
-    else rules += ' kb13';
-    if (props.isQuiet) rules += ' jd13';
-    else rules += ' jb13';
-    rules += ' iq13';
-    if (props.isQuiet) rules += ' _ka13';
-    else rules += ' _kb13';
-    if (props.isQuiet) rules += ' ha13';
-    else rules += ' hb13';
-    if (props.isQuiet) rules += ' ma13';
-    else rules += ' mb13';
-    if (props.isQuiet) rules += ' la13';
-    else rules += ' lb13';
-    rules += ' _jf13';
-    rules += ' -Ev4N4b-Zd13';
-    rules += ' -Ev4N4b-1bNH0cZuUmpre13';
+    if (props.isDropTarget) {
+        rules += ' glzvDBe15';
+        rules += ' gla15';
+    } else if (props.isQuiet) rules += ' g915';
+    else rules += ' gX15';
+    if (props.isQuiet) rules += ' od15';
+    else rules += ' ob15';
+    if (props.isQuiet) rules += ' nd15';
+    else rules += ' nb15';
+    if (props.isQuiet) rules += ' kd15';
+    else rules += ' kb15';
+    if (props.isQuiet) rules += ' jd15';
+    else rules += ' jb15';
+    rules += ' iq15';
+    rules += ' ila15';
+    if (props.isQuiet) rules += ' _ka15';
+    else rules += ' _kb15';
+    if (props.isQuiet) rules += ' ha15';
+    else rules += ' hb15';
+    if (props.isQuiet) rules += ' ma15';
+    else rules += ' mb15';
+    if (props.isQuiet) rules += ' la15';
+    else rules += ' lb15';
+    rules += ' _jf15';
+    rules += ' _yb15';
+    rules += ' -Ev4N4b-Zd15';
+    rules += ' -Ev4N4b-1bNH0cZuUmpre15';
     return rules;
 };
+class $387d58020e2a8028$export$6f8e4757b55cd070 extends (0, $jpFeb$reactstatelyuseVirtualizerState.ListLayout) {
+    getDropTargetLayoutInfo(target) {
+        let layoutInfo = super.getDropTargetLayoutInfo(target);
+        layoutInfo.zIndex = 1;
+        layoutInfo.allowOverflow = true;
+        return layoutInfo;
+    }
+}
 const $387d58020e2a8028$export$84d0dd190d551cd1 = /*#__PURE__*/ (0, $jpFeb$react.forwardRef)(function ListView(props, ref) {
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $387d58020e2a8028$export$870039b0abfe3de0);
-    let { children: children, isQuiet: isQuiet, selectionStyle: selectionStyle = 'checkbox', overflowMode: overflowMode = 'truncate', loadingState: loadingState, onLoadMore: onLoadMore, renderEmptyState: userRenderEmptyState, hideLinkOutIcon: hideLinkOutIcon = false, ...otherProps } = props;
+    let { children: children, isQuiet: isQuiet, selectionStyle: selectionStyle = 'checkbox', overflowMode: overflowMode = 'truncate', loadingState: loadingState, onLoadMore: onLoadMore, renderEmptyState: userRenderEmptyState, hideLinkOutIcon: hideLinkOutIcon = false, dragAndDropHooks: dragAndDropHooks, ...otherProps } = props;
     let scale = (0, $ee7b4c497f520c08$exports.useScale)();
+    if (dragAndDropHooks && dragAndDropHooks.renderDragPreview == null) dragAndDropHooks.renderDragPreview = (items)=>/*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)((0, $35d2da6f10cb8588$exports.DragPreview), {
+            items: items,
+            overflowMode: overflowMode
+        });
+    if (dragAndDropHooks) dragAndDropHooks.renderDropIndicator = (target)=>/*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)((0, $f1f08ef5de95f8eb$exports.InsertionIndicator), {
+            target: target
+        });
     let stringFormatter = (0, $jpFeb$reactariauseLocalizedStringFormatter.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4526404114e78c80$exports))), '@react-spectrum/s2');
     let rowHeight = scale === 'large' ? 50 : 40;
     let domRef = (0, $150382364eecc4bc$exports.useDOMRef)(ref);
@@ -190,7 +218,7 @@ const $387d58020e2a8028$export$84d0dd190d551cd1 = /*#__PURE__*/ (0, $jpFeb$react
     let loadMoreSpinner = onLoadMore ? /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)((0, $jpFeb$reactariacomponentsGridList.GridListLoadMoreItem), {
         isLoading: loadingState === 'loadingMore',
         onLoadMore: onLoadMore,
-        className: " Fb13 Za13 Tt13 Qt13",
+        className: " Fb15 Za15 Tt15 Qt15",
         children: /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)("div", {
             className: $387d58020e2a8028$var$centeredWrapper,
             children: /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)("div", {
@@ -229,14 +257,15 @@ const $387d58020e2a8028$export$84d0dd190d551cd1 = /*#__PURE__*/ (0, $jpFeb$react
     });
     return /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsxs)("div", {
         ref: domRef,
-        className: (props.UNSAFE_className || '') + $387d58020e2a8028$var$listViewWrapper(null, props.styles),
+        className: (props.UNSAFE_className || '') + $387d58020e2a8028$var$listViewWrapper(null, props.styles) + ' ' + $387d58020e2a8028$var$rootDropOutline,
         style: props.UNSAFE_style,
         children: [
             /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)((0, $jpFeb$reactariacomponentsVirtualizer.Virtualizer), {
-                layout: (0, $jpFeb$reactstatelyuseVirtualizerState.ListLayout),
+                layout: $387d58020e2a8028$export$6f8e4757b55cd070,
                 layoutOptions: {
                     estimatedRowHeight: rowHeight,
-                    loaderHeight: 60
+                    loaderHeight: 60,
+                    dropIndicatorThickness: 0
                 },
                 children: /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)($387d58020e2a8028$var$InternalListViewContext.Provider, {
                     value: {
@@ -249,6 +278,7 @@ const $387d58020e2a8028$export$84d0dd190d551cd1 = /*#__PURE__*/ (0, $jpFeb$react
                     children: /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)((0, $jpFeb$reactariacomponentsGridList.GridList), {
                         ref: scrollRef,
                         ...gridListProps,
+                        dragAndDropHooks: dragAndDropHooks,
                         selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle',
                         selectionMode: gridListProps.selectionMode,
                         renderEmptyState: renderEmptyState,
@@ -258,7 +288,8 @@ const $387d58020e2a8028$export$84d0dd190d551cd1 = /*#__PURE__*/ (0, $jpFeb$react
                         },
                         className: (renderProps)=>$387d58020e2a8028$var$listView({
                                 ...renderProps,
-                                isQuiet: isQuiet
+                                isQuiet: isQuiet,
+                                isDropTarget: renderProps.isDropTarget
                             }),
                         selectedKeys: selectedKeys,
                         defaultSelectedKeys: undefined,
@@ -273,365 +304,255 @@ const $387d58020e2a8028$export$84d0dd190d551cd1 = /*#__PURE__*/ (0, $jpFeb$react
 });
 const $387d58020e2a8028$var$selectedBackground = "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(19, 19, 19), rgb(242, 242, 242)) 7%)]";
 const $387d58020e2a8028$var$selectedActiveBackground = "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(19, 19, 19), rgb(242, 242, 242)) 10%)]";
+// TODO: removed the background color in HCM for highlight selection since it made it hard to see the focus
+// ring of the drag button, this matches v3 anyways. thoughts?
 const $387d58020e2a8028$var$listitem = function anonymous(props) {
     let rules = " ";
-    rules += ' _Le13';
-    rules += ' _oa13';
-    rules += ' qh13';
-    rules += ' Sd13';
-    rules += ' Rd13';
-    rules += ' Tt13';
-    rules += ' Qt13';
-    rules += ' g913';
-    if (props.isDisabled) rules += ' pp13';
+    rules += ' _Le15';
+    rules += ' _oa15';
+    rules += ' qh15';
+    rules += ' Sd15';
+    rules += ' Rd15';
+    rules += ' Tt15';
+    rules += ' Qt15';
+    rules += ' g915';
+    if (props.isDisabled) rules += ' pp15';
     else 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';
     }
-    if (props.isDisabled) rules += ' plc13';
-    else if (props.selectionStyle === "highlight") {
-        if (props.isSelected) rules += ' ple13';
-        else rules += ' plb13';
-    } else rules += ' plb13';
-    rules += ' _Pc13';
-    rules += ' z2mU13';
-    rules += ' yzZKy13';
-    rules += ' se13';
-    rules += ' C91zTN13';
-    rules += ' DIVIQId13';
-    rules += ' Exumf9b13';
-    rules += ' UDNKd2dai5a013';
-    rules += ' ea13';
-    if (props.scale === "large") rules += ' MODqQub13';
-    else rules += ' Mh13';
-    rules += ' _Xa13';
-    if (props.isLink) rules += ' ry13';
-    else rules += ' ri13';
+    if (props.isDisabled) rules += ' plc15';
+    else if (props.isSelected) {
+        if (props.selectionStyle === "highlight") rules += ' ple15';
+    } else rules += ' plb15';
+    rules += ' _Pc15';
+    rules += ' z2mU15';
+    rules += ' yzZKy15';
+    rules += ' se15';
+    rules += ' CTJxasc15';
+    rules += ' Ds5idie15';
+    rules += ' Exumf9b15';
+    rules += ' UDNKd2dai5a015';
+    rules += ' ea15';
+    if (props.scale === "large") rules += ' MODqQub15';
+    else rules += ' Mh15';
+    rules += ' _Xa15';
+    if (props.isLink) rules += ' ry15';
+    else rules += ' ri15';
     if (props.isSelected) {
-        if (props.selectionStyle === "checkbox") rules += ' -EH8uVb-iq13';
-        else if (props.selectionStyle === "highlight") rules += ' -EH8uVb-iw13';
-    } else rules += ' -EH8uVb-iq13';
-    rules += ' -EH8uVb-lia13';
-    rules += ' _ka13';
+        if (props.selectionStyle === "checkbox") rules += ' -EH8uVb-iq15';
+        else if (props.selectionStyle === "highlight") {
+            rules += ' -EH8uVb-iw15';
+            rules += ' -EH8uVb-lid15';
+        }
+    } else {
+        rules += ' -EH8uVb-iq15';
+        rules += ' -EH8uVb-lia15';
+    }
+    rules += ' _ka15';
     if (props.isLastItem) {
-        if (props.isQuiet) rules += ' ha13';
-        else rules += ' hb13';
-    } else rules += ' hb13';
-    rules += ' ma13';
-    rules += ' la13';
-    rules += ' _jf13';
-    if (props.isSelected) rules += ' iA13';
-    else if (props.isNextSelected) rules += ' iA13';
-    else rules += ' i4pzfu13';
-    rules += ' ila13';
-    rules += ' -Bu7z1c-ob13';
-    rules += ' _yb13';
+        if (props.isQuiet) rules += ' ha15';
+        else rules += ' hb15';
+    } else rules += ' hb15';
+    rules += ' ma15';
+    rules += ' la15';
+    rules += ' _jf15';
+    if (props.isSelected) rules += ' iA15';
+    else if (props.isNextSelected) rules += ' iA15';
+    else rules += ' i4pzfu15';
+    rules += ' ila15';
+    rules += ' -Bu7z1c-ob15';
+    rules += ' _yb15';
     return rules;
 };
 const $387d58020e2a8028$var$insetBorderRadius = 'calc(var(--radius) - 1px)';
+const $387d58020e2a8028$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 $387d58020e2a8028$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 $387d58020e2a8028$var$rootRowDropStyles = {
+    // Unlike v3 tableview, v3 listview has the same background color for the listview itself and the rows when
+    // dropping on root
+    default: $387d58020e2a8028$var$dropTargetBackground,
+    isSelected: $387d58020e2a8028$var$rootDropSelectedRowBackground,
+    forcedColors: 'Background'
+};
+const $387d58020e2a8028$var$rowDropStyles = {
+    // Also unlike v3, dropping on a selected row vs a non selected row doesn't have any difference in background color
+    default: $387d58020e2a8028$var$rowDropBackground,
+    isSelected: $387d58020e2a8028$var$rowDropBackground,
+    forcedColors: 'Background'
+};
 const $387d58020e2a8028$var$listRowBackground = function anonymous(props) {
     let rules = " ";
-    rules += ' _Pa13';
-    rules += ' _9a13';
-    if (props.isFirstItem) rules += ' Wr13';
-    else if (props.isPrevSelected) rules += ' Wr13';
-    else if (props.isSelected) rules += ' WLPOtrc13';
-    else rules += ' Wr13';
-    rules += ' Wlr13';
-    rules += ' _Er13';
-    rules += ' _Rr13';
-    if (props.isSelected) rules += ' _lLPOtrc13';
-    else rules += ' _lr13';
-    if (props.isSelected) {
+    rules += ' _Pa15';
+    rules += ' _9a15';
+    if (props.isFirstItem) rules += ' Wr15';
+    else if (props.isPrevSelected) rules += ' Wr15';
+    else if (props.isSelected) rules += ' WLPOtrc15';
+    else rules += ' Wr15';
+    rules += ' Wlr15';
+    rules += ' _Er15';
+    rules += ' _Rr15';
+    if (props.isSelected) rules += ' _lLPOtrc15';
+    else rules += ' _lr15';
+    if (props.isDropTarget) {
+        if (props.isSelected) rules += ' glzvDBe15';
+        else rules += ' glzvDBe15';
+        rules += ' gla15';
+    } else {
+        if (props.isSelected) {
+            if (props.selectionStyle === "highlight") {
+                if (props.isPressed) rules += ' gaZwDBe15';
+                else if (props.isHovered) rules += ' gaZwDBe15';
+                else rules += ' glzvDBe15';
+            } else if (props.selectionStyle === "checkbox") {
+                if (props.isFocusVisible) rules += ' gRfT7e15';
+                else if (props.isPressed) rules += ' gRfT7e15';
+                else if (props.isHovered) rules += ' gRfT7e15';
+                else rules += ' gj1B7i15';
+            }
+        } else if (props.isPressed) {
+            if (props.selectionStyle === "checkbox") rules += ' gRfT7e15';
+            else rules += ' g7IonAe15';
+        } else if (props.isHovered) {
+            if (props.selectionStyle === "checkbox") rules += ' gj1B7i15';
+            else rules += ' gVQkD8c15';
+        } else rules += ' gs9yXOb15';
         if (props.selectionStyle === "highlight") {
-            if (props.isPressed) rules += ' gaZwDBe13';
-            else if (props.isHovered) rules += ' gaZwDBe13';
-            else rules += ' glzvDBe13';
-        } else if (props.selectionStyle === "checkbox") {
-            if (props.isFocusVisible) rules += ' gRfT7e13';
-            else if (props.isPressed) rules += ' gRfT7e13';
-            else if (props.isHovered) rules += ' gRfT7e13';
-            else rules += ' gj1B7i13';
-        }
-    } else if (props.isPressed) {
-        if (props.selectionStyle === "checkbox") rules += ' gRfT7e13';
-        else rules += ' g7IonAe13';
-    } else if (props.isHovered) {
-        if (props.selectionStyle === "checkbox") rules += ' gj1B7i13';
-        else rules += ' gVQkD8c13';
-    } else rules += ' gs9yXOb13';
-    if (props.selectionStyle === "highlight") {
-        if (props.isSelected) rules += ' gle13';
-        else rules += ' gla13';
-    } else rules += ' gla13';
-    if (props.isPrevNotSelected) {
-        if (props.isQuiet) rules += ' ob13';
+            if (props.isSelected) rules += ' gle15';
+            else rules += ' gl915';
+        } else rules += ' gl915';
+        if (props.isSelected) rules += ' gRQaNpdubHDBe15';
+        else rules += ' gRQaNpdlzvDBe15';
+        rules += ' gRQaNpdla15';
+    }
+    if (props.isDropTarget) rules += ' o7E7Gic15';
+    else if (props.isPrevNotSelected) {
+        if (props.isQuiet) rules += ' ob15';
         else if (props.isSelected) {
-            if (props.selectionStyle === "highlight") rules += ' o7E7Gic13';
-            else if (props.selectionStyle === "checkbox") rules += ' od13';
+            if (props.selectionStyle === "highlight") rules += ' o7E7Gic15';
+            else if (props.selectionStyle === "checkbox") rules += ' od15';
         }
-    } else if (props.isSelected) rules += ' od13';
-    else if (props.isQuiet) rules += ' ob13';
-    if (props.isPrevNotSelected) {
-        if (props.isQuiet) rules += ' nb13';
+    } else if (props.isSelected) rules += ' od15';
+    else if (props.isQuiet) rules += ' ob15';
+    if (props.isDropTarget) rules += ' n7E7Gic15';
+    else if (props.isPrevNotSelected) {
+        if (props.isQuiet) rules += ' nb15';
         else if (props.isSelected) {
-            if (props.selectionStyle === "highlight") rules += ' n7E7Gic13';
-            else if (props.selectionStyle === "checkbox") rules += ' nd13';
+            if (props.selectionStyle === "highlight") rules += ' n7E7Gic15';
+            else if (props.selectionStyle === "checkbox") rules += ' nd15';
         }
-    } else if (props.isSelected) rules += ' nd13';
-    else if (props.isQuiet) rules += ' nb13';
-    if (props.isNextNotSelected) {
-        if (props.isQuiet) rules += ' kb13';
+    } else if (props.isSelected) rules += ' nd15';
+    else if (props.isQuiet) rules += ' nb15';
+    if (props.isDropTarget) rules += ' k7E7Gic15';
+    else if (props.isNextNotSelected) {
+        if (props.isQuiet) rules += ' kb15';
         else if (props.isSelected) {
-            if (props.selectionStyle === "highlight") rules += ' k7E7Gic13';
-            else if (props.selectionStyle === "checkbox") rules += ' kd13';
+            if (props.selectionStyle === "highlight") rules += ' k7E7Gic15';
+            else if (props.selectionStyle === "checkbox") rules += ' kd15';
         }
-    } else if (props.isSelected) rules += ' kd13';
-    else if (props.isQuiet) rules += ' kb13';
-    if (props.isNextNotSelected) {
-        if (props.isQuiet) rules += ' jb13';
+    } else if (props.isSelected) rules += ' kd15';
+    else if (props.isQuiet) rules += ' kb15';
+    if (props.isDropTarget) rules += ' j7E7Gic15';
+    else if (props.isNextNotSelected) {
+        if (props.isQuiet) rules += ' jb15';
         else if (props.isSelected) {
-            if (props.selectionStyle === "highlight") rules += ' j7E7Gic13';
-            else if (props.selectionStyle === "checkbox") rules += ' jd13';
+            if (props.selectionStyle === "highlight") rules += ' j7E7Gic15';
+            else if (props.selectionStyle === "checkbox") rules += ' jd15';
         }
-    } else if (props.isSelected) rules += ' jd13';
-    else if (props.isQuiet) rules += ' jb13';
-    if (props.isPrevSelected) rules += ' _ka13';
+    } else if (props.isSelected) rules += ' jd15';
+    else if (props.isQuiet) rules += ' jb15';
+    if (props.isDropTarget) rules += ' _kc15';
+    else if (props.isPrevSelected) rules += ' _ka15';
     else {
-        if (props.selectionStyle === "highlight") rules += ' _kb13';
-        else if (props.selectionStyle === "checkbox") rules += ' _ka13';
+        if (props.selectionStyle === "highlight") rules += ' _kb15';
+        else if (props.selectionStyle === "checkbox") rules += ' _ka15';
     }
-    if (props.isNextSelected) rules += ' ha13';
+    if (props.isDropTarget) rules += ' hc15';
+    else if (props.isNextSelected) rules += ' ha15';
     else {
-        if (props.selectionStyle === "highlight") rules += ' hb13';
-        else if (props.selectionStyle === "checkbox") rules += ' ha13';
+        if (props.selectionStyle === "highlight") rules += ' hb15';
+        else if (props.selectionStyle === "checkbox") rules += ' ha15';
     }
-    if (props.selectionStyle === "highlight") rules += ' mb13';
-    else if (props.selectionStyle === "checkbox") rules += ' ma13';
-    if (props.selectionStyle === "highlight") rules += ' lb13';
-    else if (props.selectionStyle === "checkbox") rules += ' la13';
-    rules += ' _jf13';
-    if (props.isSelected) {
-        if (props.selectionStyle === "highlight") rules += ' i4pzfu13';
-        else if (props.selectionStyle === "checkbox") rules += ' iA13';
-    } else rules += ' iA13';
-    return rules;
-};
-let $387d58020e2a8028$var$listRowFocusRing = function anonymous(props) {
-    let rules = " ";
-    if (props.isFocusVisible) rules += ' _Lf13';
-    else rules += ' _Le13';
-    rules += ' Oh13';
-    if (props.selectionStyle === "highlight") rules += ' Ola13';
-    else rules += ' Olc13';
-    rules += ' _Mc13';
-    rules += ' _MlkNNfn13';
-    rules += ' _Kb13';
-    rules += ' _KlToPtrc13';
-    rules += ' _Pa13';
-    if (props.isFirstItem) rules += ' Wr13';
-    else rules += ' WLPOtrc13';
-    if (props.selectionStyle === "highlight") rules += ' _lLPOtrc13';
-    else if (props.selectionStyle === "checkbox") {
-        if (props.isNextSelected) rules += ' _lr13';
-        else rules += ' _lLPOtrc13';
-    }
-    rules += ' _Ar13';
-    rules += ' _zr13';
-    if (props.isQuiet) rules += ' ob13';
-    else rules += ' o7E7Gic13';
-    if (props.isQuiet) rules += ' nb13';
-    else rules += ' n7E7Gic13';
-    if (props.isQuiet) rules += ' kb13';
-    else rules += ' k7E7Gic13';
-    if (props.isQuiet) rules += ' jb13';
-    else rules += ' j7E7Gic13';
-    rules += ' _9c13';
-    rules += ' _Ob13';
-    return rules;
-};
-let $387d58020e2a8028$export$1237798dc640739a = function anonymous(props) {
-    let rules = " ";
-    rules += ' zv6x9r13';
-    rules += ' yv6x9r13';
-    rules += ' Bv6x9r13';
-    rules += ' Av6x9r13';
-    rules += ' _dc13';
-    if (props.size === "XL") {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
-    } else if (props.size === "L") {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
-    } else if (props.size === "S") {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
-    } else if (props.size === "XS") {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
-    } else {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
-    }
-    if (props.size === "XL") {
-        rules += ' -_6BNtrc-e13';
-        rules += ' vx13';
-    } else if (props.size === "L") {
-        rules += ' -_6BNtrc-d13';
-        rules += ' vx13';
-    } else if (props.size === "S") {
-        rules += ' -_6BNtrc-b13';
-        rules += ' vx13';
-    } else if (props.size === "XS") {
-        rules += ' -_6BNtrc-a13';
-        rules += ' vx13';
-    } else {
-        rules += ' -_6BNtrc-c13';
-        rules += ' vx13';
-    }
-    if (props.size === "XL") {
-        rules += ' xb13';
-        rules += ' _xa13';
-    } else if (props.size === "L") {
-        rules += ' xb13';
-        rules += ' _xa13';
-    } else if (props.size === "S") {
-        rules += ' xb13';
-        rules += ' _xa13';
-    } else if (props.size === "XS") {
-        rules += ' xb13';
-        rules += ' _xa13';
-    } else {
-        rules += ' xb13';
-        rules += ' _xa13';
+    if (props.isDropTarget) rules += ' mc15';
+    else {
+        if (props.selectionStyle === "highlight") rules += ' mb15';
+        else if (props.selectionStyle === "checkbox") rules += ' ma15';
     }
-    if (props.size === "XL") {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
-    } else if (props.size === "L") {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
-    } else if (props.size === "S") {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
-    } else if (props.size === "XS") {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
-    } else {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
+    if (props.isDropTarget) rules += ' lc15';
+    else {
+        if (props.selectionStyle === "highlight") rules += ' lb15';
+        else if (props.selectionStyle === "checkbox") rules += ' la15';
     }
-    rules += ' p40ub4c13';
-    rules += ' _Nc13';
-    rules += ' Pc13';
-    rules += ' _Yb13';
-    if (props.overflowMode === "wrap") rules += ' _7b13';
-    else rules += ' _7c13';
+    rules += ' _jf15';
+    if (props.isDropTarget) rules += ' ix15';
+    else if (props.isSelected) {
+        if (props.selectionStyle === "highlight") rules += ' i4pzfu15';
+        else if (props.selectionStyle === "checkbox") rules += ' iA15';
+    } else rules += ' iA15';
+    if (props.isDropTarget) rules += ' ild15';
     return rules;
 };
-let $387d58020e2a8028$export$6d59db4903f20f7d = function anonymous(props) {
+let $387d58020e2a8028$var$listRowFocusRing = function anonymous(props) {
     let rules = " ";
-    rules += ' z9u7zPc13';
-    rules += ' y9u7zPc13';
-    rules += ' B9u7zPc13';
-    rules += ' A9u7zPc13';
-    rules += ' _dc13';
-    rules += ' _Nc13';
-    rules += ' Pc13';
-    rules += ' _Yb13';
-    if (props.overflowMode === "wrap") rules += ' _7b13';
-    else rules += ' _7c13';
-    rules += ' uk13';
-    rules += ' ucJ9TBTb13';
-    rules += ' ud3Euai13';
-    rules += ' uea13';
-    rules += ' ugb13';
-    rules += ' uhd13';
-    rules += ' uje13';
-    rules += ' u2NhKxcl13';
-    rules += ' uic13';
-    rules += ' -_6BNtrc-b13';
-    rules += ' vx13';
-    rules += ' xb13';
-    rules += ' _xa13';
-    rules += ' _Fd13';
-    rules += ' _FnuYUweb13';
-    if (props.isDisabled) rules += ' pp13';
-    else {
-        if (props.isPressed) rules += ' pt13';
-        else if (props.isFocusVisible) rules += ' pt13';
-        else if (props.isHovered) rules += ' pt13';
-        else rules += ' pv13';
+    if (props.isFocusVisible) rules += ' _Lf15';
+    else rules += ' _Le15';
+    rules += ' Oh15';
+    if (props.selectionStyle === "highlight") rules += ' Ola15';
+    else rules += ' Olc15';
+    rules += ' _Mc15';
+    rules += ' _MlkNNfn15';
+    rules += ' _Kb15';
+    rules += ' _KlToPtrc15';
+    rules += ' _Pa15';
+    if (props.isFirstItem) rules += ' Wr15';
+    else rules += ' WLPOtrc15';
+    if (props.selectionStyle === "highlight") rules += ' _lLPOtrc15';
+    else if (props.selectionStyle === "checkbox") {
+        if (props.isNextSelected) rules += ' _lr15';
+        else rules += ' _lLPOtrc15';
     }
-    rules += ' pl40ub4c13';
-    rules += ' Yd13';
-    rules += ' Xb13';
-    rules += ' _2b13';
+    rules += ' _Ar15';
+    rules += ' _zr15';
+    if (props.isQuiet) rules += ' ob15';
+    else rules += ' o7E7Gic15';
+    if (props.isQuiet) rules += ' nb15';
+    else rules += ' n7E7Gic15';
+    if (props.isQuiet) rules += ' kb15';
+    else rules += ' k7E7Gic15';
+    if (props.isQuiet) rules += ' jb15';
+    else rules += ' j7E7Gic15';
+    rules += ' _9c15';
+    rules += ' _Ob15';
     return rules;
 };
-let $387d58020e2a8028$export$31d1842a0fd736e6 = " sd13 z2U5Crc13 y2U5Crc13 B2U5Crc13 AvoofG13 _dc13 eb13";
-let $387d58020e2a8028$export$1ca1ec8b29a4ce27 = " sb13 ZuUmpre13 FuUmpre13 Ht13 Hsu13 -_8sjo0b-t5ZbAob13";
-let $387d58020e2a8028$var$image = " z2U5Crc13 y2U5Crc13 B2U5Crc13 AvoofG13 Ht13 Hsu13 _dc13 oa13 na13 ka13 ja13 ZC13 fa13 _Hb13";
-let $387d58020e2a8028$var$actionButtonGroup = " zkG38H13 ykG38H13 BkG38H13 AvoofG13 _dc13 __Ac13 It13 Isu13";
-let $387d58020e2a8028$var$listActionMenu = " z6Nrfjc13 y6Nrfjc13 B6Nrfjc13 AvoofG13 _dc13";
+let $387d58020e2a8028$var$rowWrapper = " sc15";
+let $387d58020e2a8028$var$image = " z2U5Crc15 y2U5Crc15 B2U5Crc15 AvoofG15 Ht15 Hsu15 _dc15 oa15 na15 ka15 ja15 ZC15 fa15 _Hb15";
+let $387d58020e2a8028$var$actionButtonGroup = " zkG38H15 ykG38H15 BkG38H15 AvoofG15 _dc15 __Ac15 It15 Isu15";
+let $387d58020e2a8028$var$listActionMenu = " z6Nrfjc15 y6Nrfjc15 B6Nrfjc15 AvoofG15 _dc15";
 const $387d58020e2a8028$var$listCheckbox = function anonymous(props) {
     let rules = " ";
-    rules += ' z2CW8rb13';
-    rules += ' y2CW8rb13';
-    rules += ' B2CW8rb13';
-    rules += ' AvoofG13';
-    rules += ' _dc13';
-    rules += ' Hv13';
-    if (props.isDisabled) rules += ' _6b13';
-    else rules += ' _6c13';
+    rules += ' z2CW8rb15';
+    rules += ' y2CW8rb15';
+    rules += ' B2CW8rb15';
+    rules += ' AvoofG15';
+    rules += ' _dc15';
+    rules += ' Hv15';
+    if (props.isDisabled) rules += ' _6b15';
+    else rules += ' _6c15';
     return rules;
 };
-const $387d58020e2a8028$var$listTrailingIcon = " znWsohc13 ynWsohc13 BnWsohc13 AvoofG13 _dc13 sd13 eb13 It13 Isu13";
-const $387d58020e2a8028$var$centeredWrapper = " sd13 eb13 _Ca13 Za13 Fb13";
-const $387d58020e2a8028$var$loadingSpinnerWrapper = " TuNalie13 QuNalie13 SuNalie13 RuNalie13";
-const $387d58020e2a8028$var$emptyStateWrapper = " sd13 eb13 _Ca13 Za13 Fb13 _oa13 Tf13 Qf13 Sf13 Rf13";
+const $387d58020e2a8028$var$listTrailingIcon = " znWsohc15 ynWsohc15 BnWsohc15 AvoofG15 _dc15 sd15 eb15 It15 Isu15";
+let $387d58020e2a8028$var$dragButtonContainer = " zdYeQw15 ydYeQw15 BdYeQw15 AvoofG15 _dc15 sd15 eb15 Zi15";
+const $387d58020e2a8028$var$centeredWrapper = " sd15 eb15 _Ca15 Za15 Fb15";
+const $387d58020e2a8028$var$loadingSpinnerWrapper = " TuNalie15 QuNalie15 SuNalie15 RuNalie15";
+const $387d58020e2a8028$var$emptyStateWrapper = " sd15 eb15 _Ca15 Za15 Fb15 _oa15 Tf15 Qf15 Sf15 Rf15";
 function $387d58020e2a8028$var$ListSelectionCheckbox({ isDisabled: isDisabled }) {
     let selectionContext = (0, $jpFeb$reactariacomponentsslots.useSlottedContext)((0, $jpFeb$reactariacomponentsCheckbox.CheckboxContext), 'selection');
     let isSelectionDisabled = isDisabled || !!selectionContext?.isDisabled;
@@ -644,24 +565,6 @@ function $387d58020e2a8028$var$ListSelectionCheckbox({ isDisabled: isDisabled })
         })
     });
 }
-function $387d58020e2a8028$var$isNextSelected(id, state) {
-    if (id == null || !state) return false;
-    let keyAfter = state.collection.getKeyAfter(id);
-    return keyAfter != null && state.selectionManager.isSelected(keyAfter);
-}
-function $387d58020e2a8028$export$aebccab86af12e73(id, state) {
-    if (id == null || !state) return false;
-    let keyBefore = state.collection.getKeyBefore(id);
-    return keyBefore != null && state.selectionManager.isSelected(keyBefore);
-}
-function $387d58020e2a8028$export$50edc5c91910aafe(id, state) {
-    if (id == null || !state) return false;
-    return state.collection.getFirstKey() === id;
-}
-function $387d58020e2a8028$var$isLastItem(id, state) {
-    if (id == null || !state) return false;
-    return state.collection.getLastKey() === id;
-}
 function $387d58020e2a8028$export$c6bde0c04b033c0e(props1) {
     let ref = (0, $jpFeb$react.useRef)(null);
     let { hasChildItems: hasChildItems, ...otherProps } = props1;
@@ -684,35 +587,35 @@ function $387d58020e2a8028$export$c6bde0c04b033c0e(props1) {
                 isQuiet: isQuiet,
                 scale: scale,
                 selectionStyle: selectionStyle,
-                isPrevNotSelected: !$387d58020e2a8028$export$aebccab86af12e73(renderProps.id, renderProps.state),
+                isPrevNotSelected: !$387d58020e2a8028$var$isPrevSelected(renderProps.id, renderProps.state),
                 isNextSelected: $387d58020e2a8028$var$isNextSelected(renderProps.id, renderProps.state),
                 isNextNotSelected: !$387d58020e2a8028$var$isNextSelected(renderProps.id, renderProps.state),
-                isFirstItem: $387d58020e2a8028$export$50edc5c91910aafe(renderProps.id, renderProps.state),
+                isFirstItem: $387d58020e2a8028$var$isFirstItem(renderProps.id, renderProps.state),
                 isLastItem: $387d58020e2a8028$var$isLastItem(renderProps.id, renderProps.state)
             }),
         children: (renderProps)=>{
             let { children: children } = props1;
-            let { selectionMode: selectionMode, selectionBehavior: selectionBehavior, isDisabled: isDisabled, id: id, state: state } = renderProps;
-            return /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsxs)((0, $jpFeb$reactariacomponentsslots.Provider), {
+            let { selectionMode: selectionMode, selectionBehavior: selectionBehavior, isDisabled: isDisabled, id: id, state: state, allowsDragging: allowsDragging, isFocusVisibleWithin: isFocusVisibleWithin } = renderProps;
+            return /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)((0, $jpFeb$reactariacomponentsslots.Provider), {
                 values: [
                     [
                         (0, $6367bc87eb7d24ad$exports.TextContext),
                         {
                             slots: {
                                 [(0, $jpFeb$reactariacomponentsslots.DEFAULT_SLOT)]: {
-                                    styles: $387d58020e2a8028$export$1237798dc640739a({
+                                    styles: (0, $35d2da6f10cb8588$exports.label)({
                                         ...renderProps,
                                         overflowMode: overflowMode
                                     })
                                 },
                                 label: {
-                                    styles: $387d58020e2a8028$export$1237798dc640739a({
+                                    styles: (0, $35d2da6f10cb8588$exports.label)({
                                         ...renderProps,
                                         overflowMode: overflowMode
                                     })
                                 },
                                 description: {
-                                    styles: $387d58020e2a8028$export$6d59db4903f20f7d({
+                                    styles: (0, $35d2da6f10cb8588$exports.description)({
                                         ...renderProps,
                                         overflowMode: overflowMode
                                     })
@@ -727,9 +630,9 @@ function $387d58020e2a8028$export$c6bde0c04b033c0e(props1) {
                                 icon: {
                                     render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
                                         slot: 'icon',
-                                        styles: $387d58020e2a8028$export$31d1842a0fd736e6
+                                        styles: (0, $35d2da6f10cb8588$exports.iconCenterWrapper)
                                     }),
-                                    styles: $387d58020e2a8028$export$1ca1ec8b29a4ce27
+                                    styles: (0, $35d2da6f10cb8588$exports.icon)
                                 }
                             }
                         }
@@ -758,88 +661,118 @@ function $387d58020e2a8028$export$c6bde0c04b033c0e(props1) {
                         }
                     ]
                 ],
-                children: [
-                    /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)("div", {
-                        className: $387d58020e2a8028$var$listRowBackground({
-                            ...renderProps,
-                            selectionStyle: selectionStyle,
-                            isQuiet: isQuiet,
-                            isPrevSelected: $387d58020e2a8028$export$aebccab86af12e73(id, state),
-                            isNextSelected: $387d58020e2a8028$var$isNextSelected(id, state),
-                            isPrevNotSelected: !$387d58020e2a8028$export$aebccab86af12e73(id, state),
-                            isNextNotSelected: !$387d58020e2a8028$var$isNextSelected(id, state),
-                            isFirstItem: $387d58020e2a8028$export$50edc5c91910aafe(id, state),
-                            isLastItem: $387d58020e2a8028$var$isLastItem(id, state)
-                        })
-                    }),
-                    renderProps.isFocusVisible && /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)("div", {
-                        className: $387d58020e2a8028$var$listRowFocusRing({
-                            ...renderProps,
-                            selectionStyle: selectionStyle,
-                            isQuiet: isQuiet,
-                            isPrevSelected: $387d58020e2a8028$export$aebccab86af12e73(id, state),
-                            isNextSelected: $387d58020e2a8028$var$isNextSelected(id, state),
-                            isPrevNotSelected: !$387d58020e2a8028$export$aebccab86af12e73(id, state),
-                            isNextNotSelected: !$387d58020e2a8028$var$isNextSelected(id, state),
-                            isFirstItem: $387d58020e2a8028$export$50edc5c91910aafe(id, state),
-                            isLastItem: $387d58020e2a8028$var$isLastItem(id, state)
-                        })
-                    }),
-                    selectionMode !== 'none' && selectionBehavior === 'toggle' && /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)($387d58020e2a8028$var$ListSelectionCheckbox, {
-                        isDisabled: isDisabled
-                    }),
-                    typeof children === 'string' ? /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)((0, $6367bc87eb7d24ad$exports.Text), {
-                        slot: "label",
-                        children: children
-                    }) : children,
-                    isLinkOut && !hideLinkOutIcon && /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)("div", {
-                        className: $387d58020e2a8028$var$listTrailingIcon,
-                        children: /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)((0, $377d9a1b51957cfd$exports.default), {
-                            size: "M",
-                            className: function anonymous(props) {
-                                let rules = " ";
-                                if (props.direction === "rtl") {
-                                    rules += ' -Z4Pn4c-a13';
-                                    rules += ' __Ha13';
-                                }
-                                rules += ' -_8sjo0b-t5ZbAob13';
-                                return rules;
-                            }({
-                                direction: direction
+                children: /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsxs)("div", {
+                    className: $387d58020e2a8028$var$rowWrapper,
+                    children: [
+                        /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)("div", {
+                            className: $387d58020e2a8028$var$listRowBackground({
+                                ...renderProps,
+                                selectionStyle: selectionStyle,
+                                isQuiet: isQuiet,
+                                isDropTarget: renderProps.isDropTarget,
+                                isPrevSelected: $387d58020e2a8028$var$isPrevSelected(id, state),
+                                isNextSelected: $387d58020e2a8028$var$isNextSelected(id, state),
+                                isPrevNotSelected: !$387d58020e2a8028$var$isPrevSelected(id, state),
+                                isNextNotSelected: !$387d58020e2a8028$var$isNextSelected(id, state),
+                                isFirstItem: $387d58020e2a8028$var$isFirstItem(id, state),
+                                isLastItem: $387d58020e2a8028$var$isLastItem(id, state)
                             })
-                        })
-                    }),
-                    hasChildItems && !isLinkOut && /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)("div", {
-                        className: $387d58020e2a8028$var$listTrailingIcon,
-                        children: /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)((0, $1df9f1c9262ce5df$exports.default), {
-                            className: function anonymous(props) {
-                                let rules = " ";
-                                if (props.direction === "rtl") {
-                                    rules += ' -Z4Pn4c-a13';
-                                    rules += ' __Ha13';
-                                } else if (props.direction === "ltr") {
-                                    rules += ' -Z4Pn4c-b13';
-                                    rules += ' __Ha13';
-                                }
-                                if (props.direction === "rtl") {
-                                    rules += ' -_04Pn4c-a13';
-                                    rules += ' __Ha13';
-                                } else if (props.direction === "ltr") {
-                                    rules += ' -_04Pn4c-b13';
-                                    rules += ' __Ha13';
-                                }
-                                rules += ' -_8sjo0b-t5ZbAob13';
-                                return rules;
-                            }({
-                                direction: direction
+                        }),
+                        renderProps.isFocusVisible && /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)("div", {
+                            className: $387d58020e2a8028$var$listRowFocusRing({
+                                ...renderProps,
+                                selectionStyle: selectionStyle,
+                                isQuiet: isQuiet,
+                                isPrevSelected: $387d58020e2a8028$var$isPrevSelected(id, state),
+                                isNextSelected: $387d58020e2a8028$var$isNextSelected(id, state),
+                                isPrevNotSelected: !$387d58020e2a8028$var$isPrevSelected(id, state),
+                                isNextNotSelected: !$387d58020e2a8028$var$isNextSelected(id, state),
+                                isFirstItem: $387d58020e2a8028$var$isFirstItem(id, state),
+                                isLastItem: $387d58020e2a8028$var$isLastItem(id, state)
+                            })
+                        }),
+                        allowsDragging && /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)("div", {
+                            className: $387d58020e2a8028$var$dragButtonContainer,
+                            children: !isDisabled && /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)((0, $f1f08ef5de95f8eb$exports.DragHandleButton), {
+                                isFocusVisibleWithin: isFocusVisibleWithin
+                            })
+                        }),
+                        selectionMode !== 'none' && selectionBehavior === 'toggle' && /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)($387d58020e2a8028$var$ListSelectionCheckbox, {
+                            isDisabled: isDisabled
+                        }),
+                        typeof children === 'string' ? /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)((0, $6367bc87eb7d24ad$exports.Text), {
+                            slot: "label",
+                            children: children
+                        }) : children,
+                        isLinkOut && !hideLinkOutIcon && /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)("div", {
+                            className: $387d58020e2a8028$var$listTrailingIcon,
+                            children: /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)((0, $377d9a1b51957cfd$exports.default), {
+                                size: "M",
+                                className: function anonymous(props) {
+                                    let rules = " ";
+                                    if (props.direction === "rtl") {
+                                        rules += ' -Z4Pn4c-a15';
+                                        rules += ' __Ha15';
+                                    }
+                                    rules += ' -_8sjo0b-t5ZbAob15';
+                                    return rules;
+                                }({
+                                    direction: direction
+                                })
+                            })
+                        }),
+                        hasChildItems && !isLinkOut && /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)("div", {
+                            className: $387d58020e2a8028$var$listTrailingIcon,
+                            children: /*#__PURE__*/ (0, $jpFeb$reactjsxruntime.jsx)((0, $1df9f1c9262ce5df$exports.default), {
+                                className: function anonymous(props) {
+                                    let rules = " ";
+                                    if (props.direction === "rtl") {
+                                        rules += ' -Z4Pn4c-a15';
+                                        rules += ' __Ha15';
+                                    } else if (props.direction === "ltr") {
+                                        rules += ' -Z4Pn4c-b15';
+                                        rules += ' __Ha15';
+                                    }
+                                    if (props.direction === "rtl") {
+                                        rules += ' -_04Pn4c-a15';
+                                        rules += ' __Ha15';
+                                    } else if (props.direction === "ltr") {
+                                        rules += ' -_04Pn4c-b15';
+                                        rules += ' __Ha15';
+                                    }
+                                    rules += ' -_8sjo0b-t5ZbAob15';
+                                    return rules;
+                                }({
+                                    direction: direction
+                                })
                             })
                         })
-                    })
-                ]
+                    ]
+                })
             });
         }
     });
 }
+function $387d58020e2a8028$var$isNextSelected(id, state) {
+    if (id == null || !state) return false;
+    let keyAfter = state.collection.getKeyAfter(id);
+    return keyAfter != null && state.selectionManager.isSelected(keyAfter);
+}
+function $387d58020e2a8028$var$isPrevSelected(id, state) {
+    if (id == null || !state) return false;
+    let keyBefore = state.collection.getKeyBefore(id);
+    return keyBefore != null && state.selectionManager.isSelected(keyBefore);
+}
+function $387d58020e2a8028$var$isFirstItem(id, state) {
+    if (id == null || !state) return false;
+    return state.collection.getFirstKey() === id;
+}
+function $387d58020e2a8028$var$isLastItem(id, state) {
+    if (id == null || !state) return false;
+    let key = state.collection.getLastKey();
+    let node = key ? state.collection.getItem(key) : null;
+    return node ? node.key === id : false;
+}
 
 
 //# sourceMappingURL=ListView.cjs.map