@react-spectrum/table 3.12.11-nightly.4649 → 3.12.11-nightly.4654

package/dist/TableViewBase.mjs

@@ -9,7 +9,7 @@ import $7lS7h$table_vars_cssmodulejs from "./table_vars_css.mjs";
 import "./table.b13eee90.css";
 import $7lS7h$table_cssmodulejs from "./table_css.mjs";
 import $7lS7h$spectrumiconsuiArrowDownSmall from "@spectrum-icons/ui/ArrowDownSmall";
-import {mergeProps as $7lS7h$mergeProps, scrollIntoView as $7lS7h$scrollIntoView, scrollIntoViewport as $7lS7h$scrollIntoViewport, chain as $7lS7h$chain, isAndroid as $7lS7h$isAndroid} from "@react-aria/utils";
+import {mergeProps as $7lS7h$mergeProps, chain as $7lS7h$chain, scrollIntoView as $7lS7h$scrollIntoView, scrollIntoViewport as $7lS7h$scrollIntoViewport, isAndroid as $7lS7h$isAndroid} from "@react-aria/utils";
 import {Checkbox as $7lS7h$Checkbox} from "@react-spectrum/checkbox";
 import $7lS7h$spectrumiconsuiChevronDownMedium from "@spectrum-icons/ui/ChevronDownMedium";
 import $7lS7h$spectrumiconsuiChevronLeftMedium from "@spectrum-icons/ui/ChevronLeftMedium";
@@ -18,11 +18,11 @@ import {useStyleProps as $7lS7h$useStyleProps, useDOMRef as $7lS7h$useDOMRef, cl
 import {useFocusRing as $7lS7h$useFocusRing, FocusScope as $7lS7h$FocusScope, FocusRing as $7lS7h$FocusRing} from "@react-aria/focus";
 import {getInteractionModality as $7lS7h$getInteractionModality, usePress as $7lS7h$usePress, useHover as $7lS7h$useHover, isFocusVisible as $7lS7h$isFocusVisible} from "@react-aria/interactions";
 import {MenuTrigger as $7lS7h$MenuTrigger, Menu as $7lS7h$Menu, Item as $7lS7h$Item} from "@react-spectrum/menu";
-import {layoutInfoToStyle as $7lS7h$layoutInfoToStyle, VirtualizerItem as $7lS7h$VirtualizerItem, setScrollLeft as $7lS7h$setScrollLeft, useVirtualizer as $7lS7h$useVirtualizer, ScrollView as $7lS7h$ScrollView} from "@react-aria/virtualizer";
+import {useVirtualizerState as $7lS7h$useVirtualizerState} from "@react-stately/virtualizer";
+import {setScrollLeft as $7lS7h$setScrollLeft, useVirtualizer as $7lS7h$useVirtualizer, ScrollView as $7lS7h$ScrollView, layoutInfoToStyle as $7lS7h$layoutInfoToStyle, VirtualizerItem as $7lS7h$VirtualizerItem} from "@react-aria/virtualizer";
 import $7lS7h$spectrumiconsuiListGripper from "@spectrum-icons/ui/ListGripper";
 import {ProgressCircle as $7lS7h$ProgressCircle} from "@react-spectrum/progress";
 import $7lS7h$react, {useContext as $7lS7h$useContext, useRef as $7lS7h$useRef, useEffect as $7lS7h$useEffect, useCallback as $7lS7h$useCallback, useState as $7lS7h$useState, useMemo as $7lS7h$useMemo} from "react";
-import {useVirtualizerState as $7lS7h$useVirtualizerState} from "@react-stately/virtualizer";
 import {TableColumnLayout as $7lS7h$TableColumnLayout} from "@react-stately/table";
 import {TableLayout as $7lS7h$TableLayout} from "@react-stately/layout";
 import {TooltipTrigger as $7lS7h$TooltipTrigger, Tooltip as $7lS7h$Tooltip} from "@react-spectrum/tooltip";
@@ -137,7 +137,6 @@ function $bd013581c0a4b065$var$TableViewBase(props, ref) {
         state
     ]);
     let { styleProps: styleProps } = (0, $7lS7h$useStyleProps)(props);
-    let { direction: direction } = (0, $7lS7h$useLocale)();
     let { scale: scale } = (0, $7lS7h$useProvider)();
     const getDefaultWidth = (0, $7lS7h$useCallback)(({ props: { hideHeader: hideHeader, isSelectionCell: isSelectionCell, showDivider: showDivider, isDragButtonCell: isDragButtonCell } })=>{
         if (hideHeader) {
@@ -168,7 +167,6 @@ function $bd013581c0a4b065$var$TableViewBase(props, ref) {
     let domRef = (0, $7lS7h$useDOMRef)(ref);
     let headerRef = (0, $7lS7h$useRef)();
     let bodyRef = (0, $7lS7h$useRef)();
-    let stringFormatter = (0, $7lS7h$useLocalizedStringFormatter)((0, ($parcel$interopDefault($7lS7h$intlStringsmodulejs))), '@react-spectrum/table');
     let density = props.density || 'regular';
     let columnLayout = (0, $7lS7h$useMemo)(()=>new (0, $7lS7h$TableColumnLayout)({
             getDefaultWidth: getDefaultWidth,
@@ -237,61 +235,43 @@ function $bd013581c0a4b065$var$TableViewBase(props, ref) {
         ...props,
         isVirtualized: true,
         layout: layout,
-        onRowAction: onAction
+        onRowAction: onAction,
+        scrollRef: bodyRef
     }, state, domRef);
     let [headerMenuOpen, setHeaderMenuOpen] = (0, $7lS7h$useState)(false);
     let [headerRowHovered, setHeaderRowHovered] = (0, $7lS7h$useState)(false);
-    let renderWrapper = (parent, reusableView, children, renderChildren)=>{
-        let style = (0, $7lS7h$layoutInfoToStyle)(reusableView.layoutInfo, direction, parent && parent.layoutInfo);
-        if (style.overflow === 'hidden') style.overflow = 'visible'; // needed to support position: sticky
+    let renderWrapper = (0, $7lS7h$useCallback)((parent, reusableView, children, renderChildren)=>{
         if (reusableView.viewType === 'rowgroup') return /*#__PURE__*/ (0, $7lS7h$react).createElement($bd013581c0a4b065$var$TableRowGroup, {
             key: reusableView.key,
-            style: style
-        }, isTableDroppable && /*#__PURE__*/ (0, $7lS7h$react).createElement((0, $4e6fc36ba71ba405$export$d30a7814cfd4033e), {
-            key: "root"
-        }), renderChildren(children));
+            layoutInfo: reusableView.layoutInfo,
+            parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo
+        }, renderChildren(children));
         if (reusableView.viewType === 'header') return /*#__PURE__*/ (0, $7lS7h$react).createElement($bd013581c0a4b065$var$TableHeader, {
             key: reusableView.key,
-            style: style
+            layoutInfo: reusableView.layoutInfo,
+            parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo
         }, renderChildren(children));
         if (reusableView.viewType === 'row') return /*#__PURE__*/ (0, $7lS7h$react).createElement($bd013581c0a4b065$var$TableRow, {
             key: reusableView.key,
             item: reusableView.content,
-            style: style,
-            hasActions: onAction,
-            isTableDroppable: isTableDroppable,
-            isTableDraggable: isTableDraggable
+            layoutInfo: reusableView.layoutInfo,
+            parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo
         }, renderChildren(children));
         if (reusableView.viewType === 'headerrow') return /*#__PURE__*/ (0, $7lS7h$react).createElement($bd013581c0a4b065$var$TableHeaderRow, {
             onHoverChange: setHeaderRowHovered,
             key: reusableView.key,
-            style: style,
+            layoutInfo: reusableView.layoutInfo,
+            parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo,
             item: reusableView.content
         }, renderChildren(children));
-        let isDropTarget;
-        let isRootDroptarget;
-        if (isTableDroppable) {
-            if (parent.content) isDropTarget = dropState.isDropTarget({
-                type: 'item',
-                dropPosition: 'on',
-                key: parent.content.key
-            });
-            isRootDroptarget = dropState.isDropTarget({
-                type: 'root'
-            });
-        }
-        return /*#__PURE__*/ (0, $7lS7h$react).createElement((0, $7lS7h$VirtualizerItem), {
+        return /*#__PURE__*/ (0, $7lS7h$react).createElement($bd013581c0a4b065$var$TableCellWrapper, {
             key: reusableView.key,
             layoutInfo: reusableView.layoutInfo,
             virtualizer: reusableView.virtualizer,
-            parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo,
-            className: (0, $7lS7h$classNames)((0, ($parcel$interopDefault($7lS7h$table_vars_cssmodulejs))), 'spectrum-Table-cellWrapper', (0, $7lS7h$classNames)((0, ($parcel$interopDefault($7lS7h$table_cssmodulejs))), {
-                'react-spectrum-Table-cellWrapper': !reusableView.layoutInfo.estimatedSize,
-                'react-spectrum-Table-cellWrapper--dropTarget': isDropTarget || isRootDroptarget
-            }))
+            parent: parent
         }, reusableView.rendered);
-    };
-    let renderView = (type, item)=>{
+    }, []);
+    let renderView = (0, $7lS7h$useCallback)((type, item)=>{
         switch(type){
             case 'header':
             case 'rowgroup':
@@ -333,25 +313,17 @@ function $bd013581c0a4b065$var$TableViewBase(props, ref) {
                     placement: "top"
                 }, item.rendered));
                 if (item.props.allowsResizing && !item.hasChildNodes) return /*#__PURE__*/ (0, $7lS7h$react).createElement($bd013581c0a4b065$var$ResizableTableColumnHeader, {
-                    tableRef: domRef,
                     column: item
                 });
                 return /*#__PURE__*/ (0, $7lS7h$react).createElement($bd013581c0a4b065$var$TableColumnHeader, {
                     column: item
                 });
             case 'loader':
-                return /*#__PURE__*/ (0, $7lS7h$react).createElement($bd013581c0a4b065$var$CenteredWrapper, null, /*#__PURE__*/ (0, $7lS7h$react).createElement((0, $7lS7h$ProgressCircle), {
-                    isIndeterminate: true,
-                    "aria-label": state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')
-                }));
+                return /*#__PURE__*/ (0, $7lS7h$react).createElement($bd013581c0a4b065$var$LoadingState, null);
             case 'empty':
-                {
-                    let emptyState = props.renderEmptyState ? props.renderEmptyState() : null;
-                    if (emptyState == null) return null;
-                    return /*#__PURE__*/ (0, $7lS7h$react).createElement($bd013581c0a4b065$var$CenteredWrapper, null, emptyState);
-                }
+                return /*#__PURE__*/ (0, $7lS7h$react).createElement($bd013581c0a4b065$var$EmptyState, null);
         }
-    };
+    }, []);
     let [isVerticalScrollbarVisible, setVerticalScollbarVisible] = (0, $7lS7h$useState)(false);
     let [isHorizontalScrollbarVisible, setHorizontalScollbarVisible] = (0, $7lS7h$useState)(false);
     let viewport = (0, $7lS7h$useRef)({
@@ -412,7 +384,8 @@ function $bd013581c0a4b065$var$TableViewBase(props, ref) {
             isEmpty: isEmpty,
             onFocusedResizer: onFocusedResizer,
             headerMenuOpen: headerMenuOpen,
-            setHeaderMenuOpen: setHeaderMenuOpen
+            setHeaderMenuOpen: setHeaderMenuOpen,
+            renderEmptyState: props.renderEmptyState
         }
     }, /*#__PURE__*/ (0, $7lS7h$react).createElement($bd013581c0a4b065$var$TableVirtualizer, {
         ...mergedProps,
@@ -424,7 +397,9 @@ function $bd013581c0a4b065$var$TableViewBase(props, ref) {
             'spectrum-Table--isVerticalScrollbarVisible': isVerticalScrollbarVisible,
             'spectrum-Table--isHorizontalScrollbarVisible': isHorizontalScrollbarVisible
         }, (0, $7lS7h$classNames)((0, ($parcel$interopDefault($7lS7h$table_cssmodulejs))), 'react-spectrum-Table'), styleProps.className),
-        layout: layout,
+        // This should be `tableLayout` rather than `layout` so it doesn't 
+        // change objects and invalidate virtualizer.
+        layout: tableLayout,
         collection: state.collection,
         focusedKey: focusedKey,
         renderView: renderView,
@@ -460,10 +435,6 @@ function $bd013581c0a4b065$var$TableVirtualizer(props) {
     let loadingState = collection.body.props.loadingState;
     let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
     let onLoadMore = collection.body.props.onLoadMore;
-    let transitionDuration = 220;
-    if (isLoading) transitionDuration = 160;
-    if (layout.resizingColumn != null) // while resizing, prop changes should not cause animations
-    transitionDuration = 0;
     let state = (0, $7lS7h$useVirtualizerState)({
         layout: layout,
         collection: collection,
@@ -473,44 +444,28 @@ function $bd013581c0a4b065$var$TableVirtualizer(props) {
             bodyRef.current.scrollTop = rect.y;
             (0, $7lS7h$setScrollLeft)(bodyRef.current, direction, rect.x);
         },
-        transitionDuration: transitionDuration
+        persistedKeys: (0, $7lS7h$useMemo)(()=>focusedKey ? new Set([
+                focusedKey
+            ]) : new Set(), [
+            focusedKey
+        ])
     });
-    let scrollToItem = (0, $7lS7h$useCallback)((key)=>{
-        let item = collection.getItem(key);
-        let column = collection.columns[0];
-        let virtualizer = state.virtualizer;
-        virtualizer.scrollToItem(key, {
-            duration: 0,
-            // Prevent scrolling to the top when clicking on column headers.
-            shouldScrollY: (item === null || item === void 0 ? void 0 : item.type) !== 'column',
-            // Offset scroll position by width of selection cell
-            // (which is sticky and will overlap the cell we're scrolling to).
-            offsetX: column.props.isSelectionCell || column.props.isDragButtonCell ? layout.getColumnWidth(column.key) : 0
-        });
-        // Sync the scroll positions of the column headers and the body so scrollIntoViewport can
-        // properly decide if the column is outside the viewport or not
-        headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
-    }, [
-        collection,
-        bodyRef,
-        headerRef,
-        layout,
-        state.virtualizer
-    ]);
     let memoedVirtualizerProps = (0, $7lS7h$useMemo)(()=>({
             tabIndex: otherProps.tabIndex,
             focusedKey: focusedKey,
-            scrollToItem: scrollToItem,
             isLoading: isLoading,
             onLoadMore: onLoadMore
         }), [
         otherProps.tabIndex,
         focusedKey,
-        scrollToItem,
         isLoading,
         onLoadMore
     ]);
     let { virtualizerProps: virtualizerProps, scrollViewProps: { onVisibleRectChange: onVisibleRectChange } } = (0, $7lS7h$useVirtualizer)(memoedVirtualizerProps, state, domRef);
+    let onVisibleRectChangeMemo = (0, $7lS7h$useMemo)(()=>(0, $7lS7h$chain)(onVisibleRectChange, onVisibleRectChangeProp), [
+        onVisibleRectChange,
+        onVisibleRectChangeProp
+    ]);
     // this effect runs whenever the contentSize changes, it doesn't matter what the content size is
     // only that it changes in a resize, and when that happens, we want to sync the body to the
     // header scroll position
@@ -554,6 +509,9 @@ function $bd013581c0a4b065$var$TableVirtualizer(props) {
     let mergedProps = (0, $7lS7h$mergeProps)(otherProps, virtualizerProps, isVirtualDragging && {
         tabIndex: null
     });
+    let firstColumn = collection.columns[0];
+    let scrollPadding = 0;
+    if (firstColumn.props.isSelectionCell || firstColumn.props.isDragButtonCell) scrollPadding = layout.getColumnWidth(firstColumn.key);
     return /*#__PURE__*/ (0, $7lS7h$react).createElement($bd013581c0a4b065$export$d288a7dd40372bc.Provider, {
         value: resizingColumn
     }, /*#__PURE__*/ (0, $7lS7h$react).createElement((0, $7lS7h$FocusScope), null, /*#__PURE__*/ (0, $7lS7h$react).createElement("div", {
@@ -567,7 +525,7 @@ function $bd013581c0a4b065$var$TableVirtualizer(props) {
             overflow: 'hidden',
             position: 'relative',
             willChange: state.isScrolling ? 'scroll-position' : undefined,
-            transition: state.isAnimating ? `none ${state.virtualizer.transitionDuration}ms` : undefined
+            scrollPaddingInlineStart: scrollPadding
         },
         ref: headerRef
     }, state.visibleViews[0]), /*#__PURE__*/ (0, $7lS7h$react).createElement((0, $7lS7h$ScrollView), {
@@ -580,15 +538,15 @@ function $bd013581c0a4b065$var$TableVirtualizer(props) {
         })),
         tabIndex: isVirtualDragging ? null : -1,
         style: {
-            flex: 1
+            flex: 1,
+            scrollPaddingInlineStart: scrollPadding
         },
         innerStyle: {
-            overflow: 'visible',
-            transition: state.isAnimating ? `none ${state.virtualizer.transitionDuration}ms` : undefined
+            overflow: 'visible'
         },
         ref: bodyRef,
         contentSize: state.contentSize,
-        onVisibleRectChange: (0, $7lS7h$chain)(onVisibleRectChange, onVisibleRectChangeProp),
+        onVisibleRectChange: onVisibleRectChangeMemo,
         onScrollStart: state.startScrolling,
         onScrollEnd: state.endScrolling,
         onScroll: onScroll
@@ -601,12 +559,20 @@ function $bd013581c0a4b065$var$TableVirtualizer(props) {
         }
     })))));
 }
-function $bd013581c0a4b065$var$TableHeader({ children: children, ...otherProps }) {
+function $bd013581c0a4b065$var$useStyle(layoutInfo, parent) {
+    let { direction: direction } = (0, $7lS7h$useLocale)();
+    let style = (0, $7lS7h$layoutInfoToStyle)(layoutInfo, direction, parent);
+    if (style.overflow === 'hidden') style.overflow = 'visible'; // needed to support position: sticky
+    return style;
+}
+function $bd013581c0a4b065$var$TableHeader({ children: children, layoutInfo: layoutInfo, parent: parent, ...otherProps }) {
     let { rowGroupProps: rowGroupProps } = (0, $7lS7h$useTableRowGroup)();
+    let style = $bd013581c0a4b065$var$useStyle(layoutInfo, parent);
     return /*#__PURE__*/ (0, $7lS7h$react).createElement("div", {
         ...rowGroupProps,
         ...otherProps,
-        className: (0, $7lS7h$classNames)((0, ($parcel$interopDefault($7lS7h$table_vars_cssmodulejs))), 'spectrum-Table-head')
+        className: (0, $7lS7h$classNames)((0, ($parcel$interopDefault($7lS7h$table_vars_cssmodulejs))), 'spectrum-Table-head'),
+        style: style
     }, children);
 }
 function $bd013581c0a4b065$var$TableColumnHeader(props) {
@@ -863,12 +829,17 @@ function $bd013581c0a4b065$var$TableDragHeaderCell({ column: column }) {
         className: (0, $7lS7h$classNames)((0, ($parcel$interopDefault($7lS7h$table_vars_cssmodulejs))), 'spectrum-Table-headCell', (0, $7lS7h$classNames)((0, ($parcel$interopDefault($7lS7h$table_cssmodulejs))), 'react-spectrum-Table-headCell', 'react-spectrum-Table-dragButtonHeadCell'))
     }, /*#__PURE__*/ (0, $7lS7h$react).createElement((0, $7lS7h$VisuallyHidden), null, stringFormatter.format('drag'))));
 }
-function $bd013581c0a4b065$var$TableRowGroup({ children: children, ...otherProps }) {
+function $bd013581c0a4b065$var$TableRowGroup({ children: children, layoutInfo: layoutInfo, parent: parent, ...otherProps }) {
     let { rowGroupProps: rowGroupProps } = (0, $7lS7h$useTableRowGroup)();
+    let { isTableDroppable: isTableDroppable } = (0, $7lS7h$useContext)($bd013581c0a4b065$export$93e4b0b2cc49b648);
+    let style = $bd013581c0a4b065$var$useStyle(layoutInfo, parent);
     return /*#__PURE__*/ (0, $7lS7h$react).createElement("div", {
         ...rowGroupProps,
+        style: style,
         ...otherProps
-    }, children);
+    }, isTableDroppable && /*#__PURE__*/ (0, $7lS7h$react).createElement((0, $4e6fc36ba71ba405$export$d30a7814cfd4033e), {
+        key: "root"
+    }), children);
 }
 function $bd013581c0a4b065$var$DragButton() {
     let { dragButtonProps: dragButtonProps, dragButtonRef: dragButtonRef, isFocusVisibleWithin: isFocusVisibleWithin } = $bd013581c0a4b065$export$cd7c5802f9e21187();
@@ -891,19 +862,18 @@ const $bd013581c0a4b065$var$TableRowContext = /*#__PURE__*/ (0, $7lS7h$react).cr
 function $bd013581c0a4b065$export$cd7c5802f9e21187() {
     return (0, $7lS7h$useContext)($bd013581c0a4b065$var$TableRowContext);
 }
-function $bd013581c0a4b065$var$TableRow({ item: item, children: children, hasActions: hasActions, isTableDraggable: isTableDraggable, isTableDroppable: isTableDroppable, ...otherProps }) {
+function $bd013581c0a4b065$var$TableRow({ item: item, children: children, layoutInfo: layoutInfo, parent: parent, ...otherProps }) {
     var _state_collection_rows_find, _layout_getContentSize, _layout_virtualizer;
     let ref = (0, $7lS7h$useRef)();
-    let { state: state, layout: layout, dragAndDropHooks: dragAndDropHooks, dragState: dragState, dropState: dropState } = $bd013581c0a4b065$export$3cb274deb6c2d854();
-    let allowsInteraction = state.selectionManager.selectionMode !== 'none' || hasActions;
-    let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);
-    let isDroppable = isTableDroppable && !isDisabled;
+    let { state: state, layout: layout, dragAndDropHooks: dragAndDropHooks, isTableDraggable: isTableDraggable, isTableDroppable: isTableDroppable, dragState: dragState, dropState: dropState } = $bd013581c0a4b065$export$3cb274deb6c2d854();
     let isSelected = state.selectionManager.isSelected(item.key);
-    let { rowProps: rowProps } = (0, $7lS7h$useTableRow)({
+    let { rowProps: rowProps, hasAction: hasAction, allowsSelection: allowsSelection } = (0, $7lS7h$useTableRow)({
         node: item,
         isVirtualized: true,
         shouldSelectOnPressUp: isTableDraggable
     }, state, ref);
+    let isDisabled = !allowsSelection && !hasAction;
+    let isDroppable = isTableDroppable && !isDisabled;
     let { pressProps: pressProps, isPressed: isPressed } = (0, $7lS7h$usePress)({
         isDisabled: isDisabled
     });
@@ -922,7 +892,7 @@ function $bd013581c0a4b065$var$TableRow({ item: item, children: children, hasAct
     // border corners of the last row when selected.
     let isFlushWithContainerBottom = false;
     if (isLastRow) {
-        if (((_layout_getContentSize = layout.getContentSize()) === null || _layout_getContentSize === void 0 ? void 0 : _layout_getContentSize.height) >= ((_layout_virtualizer = layout.virtualizer) === null || _layout_virtualizer === void 0 ? void 0 : _layout_virtualizer.getVisibleRect().height)) isFlushWithContainerBottom = true;
+        if (((_layout_getContentSize = layout.getContentSize()) === null || _layout_getContentSize === void 0 ? void 0 : _layout_getContentSize.height) >= ((_layout_virtualizer = layout.virtualizer) === null || _layout_virtualizer === void 0 ? void 0 : _layout_virtualizer.visibleRect.height)) isFlushWithContainerBottom = true;
     }
     let draggableItem;
     if (isTableDraggable) {
@@ -954,7 +924,10 @@ function $bd013581c0a4b065$var$TableRow({ item: item, children: children, hasAct
         ...draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragButtonProps,
         elementType: 'div'
     }, dragButtonRef);
-    let props = (0, $7lS7h$mergeProps)(rowProps, otherProps, focusWithinProps, focusProps, hoverProps, pressProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps, // Remove tab index from list row if performing a screenreader drag. This prevents TalkBack from focusing the row,
+    let style = $bd013581c0a4b065$var$useStyle(layoutInfo, parent);
+    let props = (0, $7lS7h$mergeProps)(rowProps, otherProps, {
+        style: style
+    }, focusWithinProps, focusProps, hoverProps, pressProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps, // Remove tab index from list row if performing a screenreader drag. This prevents TalkBack from focusing the row,
     // allowing for single swipe navigation between row drop indicator
     (dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.isVirtualDragging()) && {
         tabIndex: null
@@ -1014,7 +987,7 @@ function $bd013581c0a4b065$var$TableRow({ item: item, children: children, hasAct
         }
     }));
 }
-function $bd013581c0a4b065$var$TableHeaderRow({ item: item, children: children, style: style, ...props }) {
+function $bd013581c0a4b065$var$TableHeaderRow({ item: item, children: children, layoutInfo: layoutInfo, parent: parent, ...props }) {
     let { state: state, headerMenuOpen: headerMenuOpen } = $bd013581c0a4b065$export$3cb274deb6c2d854();
     let ref = (0, $7lS7h$useRef)();
     let { rowProps: rowProps } = (0, $7lS7h$useTableHeaderRow)({
@@ -1025,6 +998,7 @@ function $bd013581c0a4b065$var$TableHeaderRow({ item: item, children: children,
         ...props,
         isDisabled: headerMenuOpen
     });
+    let style = $bd013581c0a4b065$var$useStyle(layoutInfo, parent);
     return /*#__PURE__*/ (0, $7lS7h$react).createElement("div", {
         ...(0, $7lS7h$mergeProps)(rowProps, hoverProps),
         ref: ref,
@@ -1124,6 +1098,34 @@ function $bd013581c0a4b065$var$TableCell({ cell: cell }) {
         className: (0, $7lS7h$classNames)((0, ($parcel$interopDefault($7lS7h$table_vars_cssmodulejs))), 'spectrum-Table-cellContents')
     }, cell.rendered)));
 }
+function $bd013581c0a4b065$var$TableCellWrapper({ layoutInfo: layoutInfo, virtualizer: virtualizer, parent: parent, children: children }) {
+    let { isTableDroppable: isTableDroppable, dropState: dropState } = (0, $7lS7h$useContext)($bd013581c0a4b065$export$93e4b0b2cc49b648);
+    let isDropTarget;
+    let isRootDroptarget;
+    if (isTableDroppable) {
+        if (parent.content) isDropTarget = dropState.isDropTarget({
+            type: 'item',
+            dropPosition: 'on',
+            key: parent.content.key
+        });
+        isRootDroptarget = dropState.isDropTarget({
+            type: 'root'
+        });
+    }
+    return /*#__PURE__*/ (0, $7lS7h$react).createElement((0, $7lS7h$VirtualizerItem), {
+        layoutInfo: layoutInfo,
+        virtualizer: virtualizer,
+        parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo,
+        className: (0, $7lS7h$useMemo)(()=>(0, $7lS7h$classNames)((0, ($parcel$interopDefault($7lS7h$table_vars_cssmodulejs))), 'spectrum-Table-cellWrapper', (0, $7lS7h$classNames)((0, ($parcel$interopDefault($7lS7h$table_cssmodulejs))), {
+                'react-spectrum-Table-cellWrapper': !layoutInfo.estimatedSize,
+                'react-spectrum-Table-cellWrapper--dropTarget': isDropTarget || isRootDroptarget
+            })), [
+            layoutInfo.estimatedSize,
+            isDropTarget,
+            isRootDroptarget
+        ])
+    }, children);
+}
 function $bd013581c0a4b065$var$ExpandableRowChevron({ cell: cell }) {
     // TODO: move some/all of the chevron button setup into a separate hook?
     let { direction: direction } = (0, $7lS7h$useLocale)();
@@ -1155,6 +1157,20 @@ function $bd013581c0a4b065$var$ExpandableRowChevron({ cell: cell }) {
         })
     }, direction === 'ltr' ? /*#__PURE__*/ (0, $7lS7h$react).createElement((0, $7lS7h$spectrumiconsuiChevronRightMedium), null) : /*#__PURE__*/ (0, $7lS7h$react).createElement((0, $7lS7h$spectrumiconsuiChevronLeftMedium), null));
 }
+function $bd013581c0a4b065$var$LoadingState() {
+    let { state: state } = (0, $7lS7h$useContext)($bd013581c0a4b065$export$93e4b0b2cc49b648);
+    let stringFormatter = (0, $7lS7h$useLocalizedStringFormatter)((0, ($parcel$interopDefault($7lS7h$intlStringsmodulejs))), '@react-spectrum/table');
+    return /*#__PURE__*/ (0, $7lS7h$react).createElement($bd013581c0a4b065$var$CenteredWrapper, null, /*#__PURE__*/ (0, $7lS7h$react).createElement((0, $7lS7h$ProgressCircle), {
+        isIndeterminate: true,
+        "aria-label": state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')
+    }));
+}
+function $bd013581c0a4b065$var$EmptyState() {
+    let { renderEmptyState: renderEmptyState } = (0, $7lS7h$useContext)($bd013581c0a4b065$export$93e4b0b2cc49b648);
+    let emptyState = renderEmptyState ? renderEmptyState() : null;
+    if (emptyState == null) return null;
+    return /*#__PURE__*/ (0, $7lS7h$react).createElement($bd013581c0a4b065$var$CenteredWrapper, null, emptyState);
+}
 function $bd013581c0a4b065$var$CenteredWrapper({ children: children }) {
     let { state: state } = $bd013581c0a4b065$export$3cb274deb6c2d854();
     let rowProps;