react-aria-components 1.10.1 → 1.11.0

package/dist/Tree.mjs

@@ -7,7 +7,7 @@ import {TreeDropTargetDelegate as $7e0f784ed4e400df$export$82c13862611c034e} fro
 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 {useTreeState as $kUtXx$useTreeState} from "react-stately";
-import {filterDOMProps as $kUtXx$filterDOMProps, useObjectRef as $kUtXx$useObjectRef} from "@react-aria/utils";
+import {filterDOMProps as $kUtXx$filterDOMProps, useObjectRef as $kUtXx$useObjectRef, useLoadMoreSentinel as $kUtXx$useLoadMoreSentinel, inertValue as $kUtXx$inertValue} 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";
 
@@ -40,7 +40,7 @@ class $2f5eaf4a2a47b4cf$var$TreeCollection {
         yield* this.flattenedRows;
     }
     get size() {
-        return this.flattenedRows.length;
+        return this.itemCount;
     }
     getKeys() {
         return this.keyMap.keys();
@@ -57,7 +57,7 @@ class $2f5eaf4a2a47b4cf$var$TreeCollection {
     }
     getLastKey() {
         var _this_flattenedRows_;
-        return (_this_flattenedRows_ = this.flattenedRows[this.size - 1]) === null || _this_flattenedRows_ === void 0 ? void 0 : _this_flattenedRows_.key;
+        return (_this_flattenedRows_ = this.flattenedRows[this.flattenedRows.length - 1]) === null || _this_flattenedRows_ === void 0 ? void 0 : _this_flattenedRows_.key;
     }
     getKeyAfter(key) {
         var _this_flattenedRows_;
@@ -89,13 +89,15 @@ class $2f5eaf4a2a47b4cf$var$TreeCollection {
     }
     constructor(opts){
         this.keyMap = new Map();
+        this.itemCount = 0;
         let { collection: collection, expandedKeys: expandedKeys } = opts;
-        let { flattenedRows: flattenedRows, keyMap: keyMap } = $2f5eaf4a2a47b4cf$var$flattenTree(collection, {
+        let { flattenedRows: flattenedRows, keyMap: keyMap, itemCount: itemCount } = $2f5eaf4a2a47b4cf$var$flattenTree(collection, {
             expandedKeys: expandedKeys
         });
         this.flattenedRows = flattenedRows;
         // Use generated keyMap because it contains the modified collection nodes (aka it adjusts the indexes so that they ignore the existence of the Content items)
         this.keyMap = keyMap;
+        this.itemCount = itemCount;
     }
 }
 const $2f5eaf4a2a47b4cf$export$dfae7d399eea2568 = /*#__PURE__*/ (0, $kUtXx$createContext)(null);
@@ -273,9 +275,7 @@ function $2f5eaf4a2a47b4cf$var$TreeInner({ props: props, collection: collection,
             ...values
         });
         let treeGridRowProps = {
-            'aria-level': 1,
-            'aria-posinset': 1,
-            'aria-setsize': 1
+            'aria-level': 1
         };
         emptyState = /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
             role: "row",
@@ -290,13 +290,13 @@ function $2f5eaf4a2a47b4cf$var$TreeInner({ props: props, collection: collection,
             }
         }, content));
     }
+    let DOMProps = (0, $kUtXx$filterDOMProps)(props, {
+        global: true
+    });
     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, droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps),
+        ...(0, $kUtXx$mergeProps)(DOMProps, renderProps, 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-drop-target": isRootDropTarget || undefined,
@@ -466,6 +466,11 @@ const $2f5eaf4a2a47b4cf$export$53d36ab85dc89436 = /*#__PURE__*/ (0, $kUtXx$creat
         }
     });
     let activateButtonId = (0, $kUtXx$useId)();
+    let DOMProps = (0, $kUtXx$filterDOMProps)(props, {
+        global: true
+    });
+    delete DOMProps.id;
+    delete DOMProps.onClick;
     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'],
@@ -492,7 +497,7 @@ const $2f5eaf4a2a47b4cf$export$53d36ab85dc89436 = /*#__PURE__*/ (0, $kUtXx$creat
         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),
+        ...(0, $kUtXx$mergeProps)(DOMProps, 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?
@@ -554,21 +559,38 @@ const $2f5eaf4a2a47b4cf$export$53d36ab85dc89436 = /*#__PURE__*/ (0, $kUtXx$creat
         ]
     }, children))));
 });
-const $2f5eaf4a2a47b4cf$export$9d1a587784d97b41 = (0, $kUtXx$createLeafComponent)('loader', function TreeLoader(props, ref, item) {
+const $2f5eaf4a2a47b4cf$export$533df5f8efd48cc9 = (0, $kUtXx$createLeafComponent)('loader', function TreeLoadingSentinel(props, ref, item) {
+    let { isVirtualized: isVirtualized } = (0, $kUtXx$useContext)((0, $7135fc7d473fd974$export$4feb769f8ddf26c5));
     let state = (0, $kUtXx$useContext)($2f5eaf4a2a47b4cf$export$8953bccafd7bce87);
-    // This loader row is is non-interactable, but we want the same aria props calculated as a typical row
-    // @ts-ignore
-    let { rowProps: rowProps } = (0, $kUtXx$useTreeItem)({
+    let { isLoading: isLoading, onLoadMore: onLoadMore, scrollOffset: scrollOffset, ...otherProps } = props;
+    let sentinelRef = (0, $kUtXx$useRef)(null);
+    let memoedLoadMoreProps = (0, $kUtXx$useMemo)(()=>({
+            onLoadMore: onLoadMore,
+            // this collection will update anytime a row is expanded/collapsed becaused the flattenedRows will change.
+            // This means onLoadMore will trigger but that might be ok cause the user should have logic to handle multiple loadMore calls
+            collection: state === null || state === void 0 ? void 0 : state.collection,
+            sentinelRef: sentinelRef,
+            scrollOffset: scrollOffset
+        }), [
+        onLoadMore,
+        scrollOffset,
+        state === null || state === void 0 ? void 0 : state.collection
+    ]);
+    (0, $kUtXx$useLoadMoreSentinel)(memoedLoadMoreProps, sentinelRef);
+    ref = (0, $kUtXx$useObjectRef)(ref);
+    let { rowProps: rowProps, gridCellProps: gridCellProps } = (0, $kUtXx$useTreeItem)({
         node: item
     }, state, ref);
     let level = rowProps['aria-level'] || 1;
+    // For now don't include aria-posinset and aria-setsize on loader since they aren't keyboard focusable
+    // Arguably shouldn't include them ever since it might be confusing to the user to include the loaders as part of the
+    // item count
     let ariaProps = {
-        'aria-level': rowProps['aria-level'],
-        'aria-posinset': rowProps['aria-posinset'],
-        'aria-setsize': rowProps['aria-setsize']
+        role: 'row',
+        'aria-level': rowProps['aria-level']
     };
     let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
-        ...props,
+        ...otherProps,
         id: undefined,
         children: item.rendered,
         defaultClassName: 'react-aria-TreeLoader',
@@ -576,15 +598,33 @@ const $2f5eaf4a2a47b4cf$export$9d1a587784d97b41 = (0, $kUtXx$createLeafComponent
             level: level
         }
     });
+    let style = {};
+    if (isVirtualized) style = {
+        display: 'contents'
+    };
     return /*#__PURE__*/ (0, $kUtXx$react).createElement((0, $kUtXx$react).Fragment, null, /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
-        role: "row",
+        style: {
+            position: 'relative',
+            width: 0,
+            height: 0
+        },
+        inert: (0, $kUtXx$inertValue)(true)
+    }, /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
+        "data-testid": "loadMoreSentinel",
+        ref: sentinelRef,
+        style: {
+            position: 'absolute',
+            height: 1,
+            width: 1
+        }
+    })), isLoading && renderProps.children && /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
         ref: ref,
         ...(0, $kUtXx$mergeProps)((0, $kUtXx$filterDOMProps)(props), ariaProps),
         ...renderProps,
         "data-level": level
     }, /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
-        role: "gridcell",
-        "aria-colindex": 1
+        ...gridCellProps,
+        style: style
     }, renderProps.children)));
 });
 function $2f5eaf4a2a47b4cf$var$convertExpanded(expanded) {
@@ -595,6 +635,8 @@ function $2f5eaf4a2a47b4cf$var$flattenTree(collection, opts) {
     let { expandedKeys: expandedKeys = new Set() } = opts;
     let keyMap = new Map();
     let flattenedRows = [];
+    // Need to count the items here because BaseCollection will return the full item count regardless if items are hidden via collapsed rows
+    let itemCount = 0;
     let visitNode = (node)=>{
         if (node.type === 'item' || node.type === 'loader') {
             let parentKey = node === null || node === void 0 ? void 0 : node.parentKey;
@@ -613,15 +655,20 @@ function $2f5eaf4a2a47b4cf$var$flattenTree(collection, opts) {
                 if (node.type === 'loader') clone.level = node.level + 1;
                 keyMap.set(clone.key, clone);
             } else keyMap.set(node.key, node);
-            if (node.level === 0 || parentKey != null && expandedKeys.has(parentKey) && flattenedRows.find((row)=>row.key === parentKey)) // Grab the modified node from the key map so our flattened list and modified key map point to the same nodes
-            flattenedRows.push(keyMap.get(node.key) || node);
+            // Grab the modified node from the key map so our flattened list and modified key map point to the same nodes
+            let modifiedNode = keyMap.get(node.key) || node;
+            if (modifiedNode.level === 0 || modifiedNode.parentKey != null && expandedKeys.has(modifiedNode.parentKey) && flattenedRows.find((row)=>row.key === modifiedNode.parentKey)) {
+                if (modifiedNode.type === 'item') itemCount++;
+                flattenedRows.push(modifiedNode);
+            }
         } else if (node.type !== null) keyMap.set(node.key, node);
         for (let child of collection.getChildren(node.key))visitNode(child);
     };
     for (let node of collection)visitNode(node);
     return {
         flattenedRows: flattenedRows,
-        keyMap: keyMap
+        keyMap: keyMap,
+        itemCount: itemCount
     };
 }
 function $2f5eaf4a2a47b4cf$var$TreeDropIndicatorWrapper(props, ref) {
@@ -702,5 +749,5 @@ function $2f5eaf4a2a47b4cf$var$RootDropIndicator() {
 }
 
 
-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};
+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$533df5f8efd48cc9 as TreeLoadMoreItem};
 //# sourceMappingURL=Tree.module.js.map

package/dist/Tree.module.js

@@ -7,7 +7,7 @@ import {TreeDropTargetDelegate as $7e0f784ed4e400df$export$82c13862611c034e} fro
 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 {useTreeState as $kUtXx$useTreeState} from "react-stately";
-import {filterDOMProps as $kUtXx$filterDOMProps, useObjectRef as $kUtXx$useObjectRef} from "@react-aria/utils";
+import {filterDOMProps as $kUtXx$filterDOMProps, useObjectRef as $kUtXx$useObjectRef, useLoadMoreSentinel as $kUtXx$useLoadMoreSentinel, inertValue as $kUtXx$inertValue} 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";
 
@@ -40,7 +40,7 @@ class $2f5eaf4a2a47b4cf$var$TreeCollection {
         yield* this.flattenedRows;
     }
     get size() {
-        return this.flattenedRows.length;
+        return this.itemCount;
     }
     getKeys() {
         return this.keyMap.keys();
@@ -57,7 +57,7 @@ class $2f5eaf4a2a47b4cf$var$TreeCollection {
     }
     getLastKey() {
         var _this_flattenedRows_;
-        return (_this_flattenedRows_ = this.flattenedRows[this.size - 1]) === null || _this_flattenedRows_ === void 0 ? void 0 : _this_flattenedRows_.key;
+        return (_this_flattenedRows_ = this.flattenedRows[this.flattenedRows.length - 1]) === null || _this_flattenedRows_ === void 0 ? void 0 : _this_flattenedRows_.key;
     }
     getKeyAfter(key) {
         var _this_flattenedRows_;
@@ -89,13 +89,15 @@ class $2f5eaf4a2a47b4cf$var$TreeCollection {
     }
     constructor(opts){
         this.keyMap = new Map();
+        this.itemCount = 0;
         let { collection: collection, expandedKeys: expandedKeys } = opts;
-        let { flattenedRows: flattenedRows, keyMap: keyMap } = $2f5eaf4a2a47b4cf$var$flattenTree(collection, {
+        let { flattenedRows: flattenedRows, keyMap: keyMap, itemCount: itemCount } = $2f5eaf4a2a47b4cf$var$flattenTree(collection, {
             expandedKeys: expandedKeys
         });
         this.flattenedRows = flattenedRows;
         // Use generated keyMap because it contains the modified collection nodes (aka it adjusts the indexes so that they ignore the existence of the Content items)
         this.keyMap = keyMap;
+        this.itemCount = itemCount;
     }
 }
 const $2f5eaf4a2a47b4cf$export$dfae7d399eea2568 = /*#__PURE__*/ (0, $kUtXx$createContext)(null);
@@ -273,9 +275,7 @@ function $2f5eaf4a2a47b4cf$var$TreeInner({ props: props, collection: collection,
             ...values
         });
         let treeGridRowProps = {
-            'aria-level': 1,
-            'aria-posinset': 1,
-            'aria-setsize': 1
+            'aria-level': 1
         };
         emptyState = /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
             role: "row",
@@ -290,13 +290,13 @@ function $2f5eaf4a2a47b4cf$var$TreeInner({ props: props, collection: collection,
             }
         }, content));
     }
+    let DOMProps = (0, $kUtXx$filterDOMProps)(props, {
+        global: true
+    });
     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, droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps),
+        ...(0, $kUtXx$mergeProps)(DOMProps, renderProps, 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-drop-target": isRootDropTarget || undefined,
@@ -466,6 +466,11 @@ const $2f5eaf4a2a47b4cf$export$53d36ab85dc89436 = /*#__PURE__*/ (0, $kUtXx$creat
         }
     });
     let activateButtonId = (0, $kUtXx$useId)();
+    let DOMProps = (0, $kUtXx$filterDOMProps)(props, {
+        global: true
+    });
+    delete DOMProps.id;
+    delete DOMProps.onClick;
     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'],
@@ -492,7 +497,7 @@ const $2f5eaf4a2a47b4cf$export$53d36ab85dc89436 = /*#__PURE__*/ (0, $kUtXx$creat
         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),
+        ...(0, $kUtXx$mergeProps)(DOMProps, 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?
@@ -554,21 +559,38 @@ const $2f5eaf4a2a47b4cf$export$53d36ab85dc89436 = /*#__PURE__*/ (0, $kUtXx$creat
         ]
     }, children))));
 });
-const $2f5eaf4a2a47b4cf$export$9d1a587784d97b41 = (0, $kUtXx$createLeafComponent)('loader', function TreeLoader(props, ref, item) {
+const $2f5eaf4a2a47b4cf$export$533df5f8efd48cc9 = (0, $kUtXx$createLeafComponent)('loader', function TreeLoadingSentinel(props, ref, item) {
+    let { isVirtualized: isVirtualized } = (0, $kUtXx$useContext)((0, $7135fc7d473fd974$export$4feb769f8ddf26c5));
     let state = (0, $kUtXx$useContext)($2f5eaf4a2a47b4cf$export$8953bccafd7bce87);
-    // This loader row is is non-interactable, but we want the same aria props calculated as a typical row
-    // @ts-ignore
-    let { rowProps: rowProps } = (0, $kUtXx$useTreeItem)({
+    let { isLoading: isLoading, onLoadMore: onLoadMore, scrollOffset: scrollOffset, ...otherProps } = props;
+    let sentinelRef = (0, $kUtXx$useRef)(null);
+    let memoedLoadMoreProps = (0, $kUtXx$useMemo)(()=>({
+            onLoadMore: onLoadMore,
+            // this collection will update anytime a row is expanded/collapsed becaused the flattenedRows will change.
+            // This means onLoadMore will trigger but that might be ok cause the user should have logic to handle multiple loadMore calls
+            collection: state === null || state === void 0 ? void 0 : state.collection,
+            sentinelRef: sentinelRef,
+            scrollOffset: scrollOffset
+        }), [
+        onLoadMore,
+        scrollOffset,
+        state === null || state === void 0 ? void 0 : state.collection
+    ]);
+    (0, $kUtXx$useLoadMoreSentinel)(memoedLoadMoreProps, sentinelRef);
+    ref = (0, $kUtXx$useObjectRef)(ref);
+    let { rowProps: rowProps, gridCellProps: gridCellProps } = (0, $kUtXx$useTreeItem)({
         node: item
     }, state, ref);
     let level = rowProps['aria-level'] || 1;
+    // For now don't include aria-posinset and aria-setsize on loader since they aren't keyboard focusable
+    // Arguably shouldn't include them ever since it might be confusing to the user to include the loaders as part of the
+    // item count
     let ariaProps = {
-        'aria-level': rowProps['aria-level'],
-        'aria-posinset': rowProps['aria-posinset'],
-        'aria-setsize': rowProps['aria-setsize']
+        role: 'row',
+        'aria-level': rowProps['aria-level']
     };
     let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
-        ...props,
+        ...otherProps,
         id: undefined,
         children: item.rendered,
         defaultClassName: 'react-aria-TreeLoader',
@@ -576,15 +598,33 @@ const $2f5eaf4a2a47b4cf$export$9d1a587784d97b41 = (0, $kUtXx$createLeafComponent
             level: level
         }
     });
+    let style = {};
+    if (isVirtualized) style = {
+        display: 'contents'
+    };
     return /*#__PURE__*/ (0, $kUtXx$react).createElement((0, $kUtXx$react).Fragment, null, /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
-        role: "row",
+        style: {
+            position: 'relative',
+            width: 0,
+            height: 0
+        },
+        inert: (0, $kUtXx$inertValue)(true)
+    }, /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
+        "data-testid": "loadMoreSentinel",
+        ref: sentinelRef,
+        style: {
+            position: 'absolute',
+            height: 1,
+            width: 1
+        }
+    })), isLoading && renderProps.children && /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
         ref: ref,
         ...(0, $kUtXx$mergeProps)((0, $kUtXx$filterDOMProps)(props), ariaProps),
         ...renderProps,
         "data-level": level
     }, /*#__PURE__*/ (0, $kUtXx$react).createElement("div", {
-        role: "gridcell",
-        "aria-colindex": 1
+        ...gridCellProps,
+        style: style
     }, renderProps.children)));
 });
 function $2f5eaf4a2a47b4cf$var$convertExpanded(expanded) {
@@ -595,6 +635,8 @@ function $2f5eaf4a2a47b4cf$var$flattenTree(collection, opts) {
     let { expandedKeys: expandedKeys = new Set() } = opts;
     let keyMap = new Map();
     let flattenedRows = [];
+    // Need to count the items here because BaseCollection will return the full item count regardless if items are hidden via collapsed rows
+    let itemCount = 0;
     let visitNode = (node)=>{
         if (node.type === 'item' || node.type === 'loader') {
             let parentKey = node === null || node === void 0 ? void 0 : node.parentKey;
@@ -613,15 +655,20 @@ function $2f5eaf4a2a47b4cf$var$flattenTree(collection, opts) {
                 if (node.type === 'loader') clone.level = node.level + 1;
                 keyMap.set(clone.key, clone);
             } else keyMap.set(node.key, node);
-            if (node.level === 0 || parentKey != null && expandedKeys.has(parentKey) && flattenedRows.find((row)=>row.key === parentKey)) // Grab the modified node from the key map so our flattened list and modified key map point to the same nodes
-            flattenedRows.push(keyMap.get(node.key) || node);
+            // Grab the modified node from the key map so our flattened list and modified key map point to the same nodes
+            let modifiedNode = keyMap.get(node.key) || node;
+            if (modifiedNode.level === 0 || modifiedNode.parentKey != null && expandedKeys.has(modifiedNode.parentKey) && flattenedRows.find((row)=>row.key === modifiedNode.parentKey)) {
+                if (modifiedNode.type === 'item') itemCount++;
+                flattenedRows.push(modifiedNode);
+            }
         } else if (node.type !== null) keyMap.set(node.key, node);
         for (let child of collection.getChildren(node.key))visitNode(child);
     };
     for (let node of collection)visitNode(node);
     return {
         flattenedRows: flattenedRows,
-        keyMap: keyMap
+        keyMap: keyMap,
+        itemCount: itemCount
     };
 }
 function $2f5eaf4a2a47b4cf$var$TreeDropIndicatorWrapper(props, ref) {
@@ -702,5 +749,5 @@ function $2f5eaf4a2a47b4cf$var$RootDropIndicator() {
 }
 
 
-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};
+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$533df5f8efd48cc9 as TreeLoadMoreItem};
 //# sourceMappingURL=Tree.module.js.map