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

package/dist/TableViewBase.main.js

@@ -18,11 +18,11 @@ var $idLTj$reactspectrumutils = require("@react-spectrum/utils");
 var $idLTj$reactariafocus = require("@react-aria/focus");
 var $idLTj$reactariainteractions = require("@react-aria/interactions");
 var $idLTj$reactspectrummenu = require("@react-spectrum/menu");
+var $idLTj$reactstatelyvirtualizer = require("@react-stately/virtualizer");
 var $idLTj$reactariavirtualizer = require("@react-aria/virtualizer");
 var $idLTj$spectrumiconsuiListGripper = require("@spectrum-icons/ui/ListGripper");
 var $idLTj$reactspectrumprogress = require("@react-spectrum/progress");
 var $idLTj$react = require("react");
-var $idLTj$reactstatelyvirtualizer = require("@react-stately/virtualizer");
 var $idLTj$reactstatelytable = require("@react-stately/table");
 var $idLTj$reactstatelylayout = require("@react-stately/layout");
 var $idLTj$reactspectrumtooltip = require("@react-spectrum/tooltip");
@@ -145,7 +145,6 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
         state
     ]);
     let { styleProps: styleProps } = (0, $idLTj$reactspectrumutils.useStyleProps)(props);
-    let { direction: direction } = (0, $idLTj$reactariai18n.useLocale)();
     let { scale: scale } = (0, $idLTj$reactspectrumprovider.useProvider)();
     const getDefaultWidth = (0, $idLTj$react.useCallback)(({ props: { hideHeader: hideHeader, isSelectionCell: isSelectionCell, showDivider: showDivider, isDragButtonCell: isDragButtonCell } })=>{
         if (hideHeader) {
@@ -176,7 +175,6 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
     let domRef = (0, $idLTj$reactspectrumutils.useDOMRef)(ref);
     let headerRef = (0, $idLTj$react.useRef)();
     let bodyRef = (0, $idLTj$react.useRef)();
-    let stringFormatter = (0, $idLTj$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($1a3d6ad53eb75d54$exports))), '@react-spectrum/table');
     let density = props.density || 'regular';
     let columnLayout = (0, $idLTj$react.useMemo)(()=>new (0, $idLTj$reactstatelytable.TableColumnLayout)({
             getDefaultWidth: getDefaultWidth,
@@ -245,61 +243,43 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
         ...props,
         isVirtualized: true,
         layout: layout,
-        onRowAction: onAction
+        onRowAction: onAction,
+        scrollRef: bodyRef
     }, state, domRef);
     let [headerMenuOpen, setHeaderMenuOpen] = (0, $idLTj$react.useState)(false);
     let [headerRowHovered, setHeaderRowHovered] = (0, $idLTj$react.useState)(false);
-    let renderWrapper = (parent, reusableView, children, renderChildren)=>{
-        let style = (0, $idLTj$reactariavirtualizer.layoutInfoToStyle)(reusableView.layoutInfo, direction, parent && parent.layoutInfo);
-        if (style.overflow === 'hidden') style.overflow = 'visible'; // needed to support position: sticky
+    let renderWrapper = (0, $idLTj$react.useCallback)((parent, reusableView, children, renderChildren)=>{
         if (reusableView.viewType === 'rowgroup') return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableRowGroup, {
             key: reusableView.key,
-            style: style
-        }, isTableDroppable && /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $4a98adf416b1ae5d$exports.RootDropIndicator), {
-            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, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$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, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$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, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$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, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariavirtualizer.VirtualizerItem), {
+        return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableCellWrapper, {
             key: reusableView.key,
             layoutInfo: reusableView.layoutInfo,
             virtualizer: reusableView.virtualizer,
-            parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo,
-            className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-cellWrapper', (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))), {
-                '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, $idLTj$react.useCallback)((type, item)=>{
         switch(type){
             case 'header':
             case 'rowgroup':
@@ -341,25 +321,17 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
                     placement: "top"
                 }, item.rendered));
                 if (item.props.allowsResizing && !item.hasChildNodes) return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$ResizableTableColumnHeader, {
-                    tableRef: domRef,
                     column: item
                 });
                 return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableColumnHeader, {
                     column: item
                 });
             case 'loader':
-                return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$CenteredWrapper, null, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactspectrumprogress.ProgressCircle), {
-                    isIndeterminate: true,
-                    "aria-label": state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')
-                }));
+                return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$LoadingState, null);
             case 'empty':
-                {
-                    let emptyState = props.renderEmptyState ? props.renderEmptyState() : null;
-                    if (emptyState == null) return null;
-                    return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$CenteredWrapper, null, emptyState);
-                }
+                return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$EmptyState, null);
         }
-    };
+    }, []);
     let [isVerticalScrollbarVisible, setVerticalScollbarVisible] = (0, $idLTj$react.useState)(false);
     let [isHorizontalScrollbarVisible, setHorizontalScollbarVisible] = (0, $idLTj$react.useState)(false);
     let viewport = (0, $idLTj$react.useRef)({
@@ -420,7 +392,8 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
             isEmpty: isEmpty,
             onFocusedResizer: onFocusedResizer,
             headerMenuOpen: headerMenuOpen,
-            setHeaderMenuOpen: setHeaderMenuOpen
+            setHeaderMenuOpen: setHeaderMenuOpen,
+            renderEmptyState: props.renderEmptyState
         }
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableVirtualizer, {
         ...mergedProps,
@@ -432,7 +405,9 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
             'spectrum-Table--isVerticalScrollbarVisible': isVerticalScrollbarVisible,
             'spectrum-Table--isHorizontalScrollbarVisible': isHorizontalScrollbarVisible
         }, (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))), '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,
@@ -468,10 +443,6 @@ function $e39c6de4eb69450d$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, $idLTj$reactstatelyvirtualizer.useVirtualizerState)({
         layout: layout,
         collection: collection,
@@ -481,44 +452,28 @@ function $e39c6de4eb69450d$var$TableVirtualizer(props) {
             bodyRef.current.scrollTop = rect.y;
             (0, $idLTj$reactariavirtualizer.setScrollLeft)(bodyRef.current, direction, rect.x);
         },
-        transitionDuration: transitionDuration
+        persistedKeys: (0, $idLTj$react.useMemo)(()=>focusedKey ? new Set([
+                focusedKey
+            ]) : new Set(), [
+            focusedKey
+        ])
     });
-    let scrollToItem = (0, $idLTj$react.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, $idLTj$react.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, $idLTj$reactariavirtualizer.useVirtualizer)(memoedVirtualizerProps, state, domRef);
+    let onVisibleRectChangeMemo = (0, $idLTj$react.useMemo)(()=>(0, $idLTj$reactariautils.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
@@ -562,6 +517,9 @@ function $e39c6de4eb69450d$var$TableVirtualizer(props) {
     let mergedProps = (0, $idLTj$reactariautils.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, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$export$d288a7dd40372bc.Provider, {
         value: resizingColumn
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariafocus.FocusScope), null, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
@@ -575,7 +533,7 @@ function $e39c6de4eb69450d$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, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariavirtualizer.ScrollView), {
@@ -588,15 +546,15 @@ function $e39c6de4eb69450d$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, $idLTj$reactariautils.chain)(onVisibleRectChange, onVisibleRectChangeProp),
+        onVisibleRectChange: onVisibleRectChangeMemo,
         onScrollStart: state.startScrolling,
         onScrollEnd: state.endScrolling,
         onScroll: onScroll
@@ -609,12 +567,20 @@ function $e39c6de4eb69450d$var$TableVirtualizer(props) {
         }
     })))));
 }
-function $e39c6de4eb69450d$var$TableHeader({ children: children, ...otherProps }) {
+function $e39c6de4eb69450d$var$useStyle(layoutInfo, parent) {
+    let { direction: direction } = (0, $idLTj$reactariai18n.useLocale)();
+    let style = (0, $idLTj$reactariavirtualizer.layoutInfoToStyle)(layoutInfo, direction, parent);
+    if (style.overflow === 'hidden') style.overflow = 'visible'; // needed to support position: sticky
+    return style;
+}
+function $e39c6de4eb69450d$var$TableHeader({ children: children, layoutInfo: layoutInfo, parent: parent, ...otherProps }) {
     let { rowGroupProps: rowGroupProps } = (0, $idLTj$reactariatable.useTableRowGroup)();
+    let style = $e39c6de4eb69450d$var$useStyle(layoutInfo, parent);
     return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
         ...rowGroupProps,
         ...otherProps,
-        className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-head')
+        className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-head'),
+        style: style
     }, children);
 }
 function $e39c6de4eb69450d$var$TableColumnHeader(props) {
@@ -871,12 +837,17 @@ function $e39c6de4eb69450d$var$TableDragHeaderCell({ column: column }) {
         className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-headCell', (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))), 'react-spectrum-Table-headCell', 'react-spectrum-Table-dragButtonHeadCell'))
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariavisuallyhidden.VisuallyHidden), null, stringFormatter.format('drag'))));
 }
-function $e39c6de4eb69450d$var$TableRowGroup({ children: children, ...otherProps }) {
+function $e39c6de4eb69450d$var$TableRowGroup({ children: children, layoutInfo: layoutInfo, parent: parent, ...otherProps }) {
     let { rowGroupProps: rowGroupProps } = (0, $idLTj$reactariatable.useTableRowGroup)();
+    let { isTableDroppable: isTableDroppable } = (0, $idLTj$react.useContext)($e39c6de4eb69450d$export$93e4b0b2cc49b648);
+    let style = $e39c6de4eb69450d$var$useStyle(layoutInfo, parent);
     return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
         ...rowGroupProps,
+        style: style,
         ...otherProps
-    }, children);
+    }, isTableDroppable && /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $4a98adf416b1ae5d$exports.RootDropIndicator), {
+        key: "root"
+    }), children);
 }
 function $e39c6de4eb69450d$var$DragButton() {
     let { dragButtonProps: dragButtonProps, dragButtonRef: dragButtonRef, isFocusVisibleWithin: isFocusVisibleWithin } = $e39c6de4eb69450d$export$cd7c5802f9e21187();
@@ -899,19 +870,18 @@ const $e39c6de4eb69450d$var$TableRowContext = /*#__PURE__*/ (0, ($parcel$interop
 function $e39c6de4eb69450d$export$cd7c5802f9e21187() {
     return (0, $idLTj$react.useContext)($e39c6de4eb69450d$var$TableRowContext);
 }
-function $e39c6de4eb69450d$var$TableRow({ item: item, children: children, hasActions: hasActions, isTableDraggable: isTableDraggable, isTableDroppable: isTableDroppable, ...otherProps }) {
+function $e39c6de4eb69450d$var$TableRow({ item: item, children: children, layoutInfo: layoutInfo, parent: parent, ...otherProps }) {
     var _state_collection_rows_find, _layout_getContentSize, _layout_virtualizer;
     let ref = (0, $idLTj$react.useRef)();
-    let { state: state, layout: layout, dragAndDropHooks: dragAndDropHooks, dragState: dragState, dropState: dropState } = $e39c6de4eb69450d$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 } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
     let isSelected = state.selectionManager.isSelected(item.key);
-    let { rowProps: rowProps } = (0, $idLTj$reactariatable.useTableRow)({
+    let { rowProps: rowProps, hasAction: hasAction, allowsSelection: allowsSelection } = (0, $idLTj$reactariatable.useTableRow)({
         node: item,
         isVirtualized: true,
         shouldSelectOnPressUp: isTableDraggable
     }, state, ref);
+    let isDisabled = !allowsSelection && !hasAction;
+    let isDroppable = isTableDroppable && !isDisabled;
     let { pressProps: pressProps, isPressed: isPressed } = (0, $idLTj$reactariainteractions.usePress)({
         isDisabled: isDisabled
     });
@@ -930,7 +900,7 @@ function $e39c6de4eb69450d$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) {
@@ -962,7 +932,10 @@ function $e39c6de4eb69450d$var$TableRow({ item: item, children: children, hasAct
         ...draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragButtonProps,
         elementType: 'div'
     }, dragButtonRef);
-    let props = (0, $idLTj$reactariautils.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 = $e39c6de4eb69450d$var$useStyle(layoutInfo, parent);
+    let props = (0, $idLTj$reactariautils.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
@@ -1022,7 +995,7 @@ function $e39c6de4eb69450d$var$TableRow({ item: item, children: children, hasAct
         }
     }));
 }
-function $e39c6de4eb69450d$var$TableHeaderRow({ item: item, children: children, style: style, ...props }) {
+function $e39c6de4eb69450d$var$TableHeaderRow({ item: item, children: children, layoutInfo: layoutInfo, parent: parent, ...props }) {
     let { state: state, headerMenuOpen: headerMenuOpen } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
     let ref = (0, $idLTj$react.useRef)();
     let { rowProps: rowProps } = (0, $idLTj$reactariatable.useTableHeaderRow)({
@@ -1033,6 +1006,7 @@ function $e39c6de4eb69450d$var$TableHeaderRow({ item: item, children: children,
         ...props,
         isDisabled: headerMenuOpen
     });
+    let style = $e39c6de4eb69450d$var$useStyle(layoutInfo, parent);
     return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
         ...(0, $idLTj$reactariautils.mergeProps)(rowProps, hoverProps),
         ref: ref,
@@ -1132,6 +1106,34 @@ function $e39c6de4eb69450d$var$TableCell({ cell: cell }) {
         className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-cellContents')
     }, cell.rendered)));
 }
+function $e39c6de4eb69450d$var$TableCellWrapper({ layoutInfo: layoutInfo, virtualizer: virtualizer, parent: parent, children: children }) {
+    let { isTableDroppable: isTableDroppable, dropState: dropState } = (0, $idLTj$react.useContext)($e39c6de4eb69450d$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, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariavirtualizer.VirtualizerItem), {
+        layoutInfo: layoutInfo,
+        virtualizer: virtualizer,
+        parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo,
+        className: (0, $idLTj$react.useMemo)(()=>(0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-cellWrapper', (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))), {
+                'react-spectrum-Table-cellWrapper': !layoutInfo.estimatedSize,
+                'react-spectrum-Table-cellWrapper--dropTarget': isDropTarget || isRootDroptarget
+            })), [
+            layoutInfo.estimatedSize,
+            isDropTarget,
+            isRootDroptarget
+        ])
+    }, children);
+}
 function $e39c6de4eb69450d$var$ExpandableRowChevron({ cell: cell }) {
     // TODO: move some/all of the chevron button setup into a separate hook?
     let { direction: direction } = (0, $idLTj$reactariai18n.useLocale)();
@@ -1163,6 +1165,20 @@ function $e39c6de4eb69450d$var$ExpandableRowChevron({ cell: cell }) {
         })
     }, direction === 'ltr' ? /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, ($parcel$interopDefault($idLTj$spectrumiconsuiChevronRightMedium))), null) : /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, ($parcel$interopDefault($idLTj$spectrumiconsuiChevronLeftMedium))), null));
 }
+function $e39c6de4eb69450d$var$LoadingState() {
+    let { state: state } = (0, $idLTj$react.useContext)($e39c6de4eb69450d$export$93e4b0b2cc49b648);
+    let stringFormatter = (0, $idLTj$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($1a3d6ad53eb75d54$exports))), '@react-spectrum/table');
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$CenteredWrapper, null, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactspectrumprogress.ProgressCircle), {
+        isIndeterminate: true,
+        "aria-label": state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')
+    }));
+}
+function $e39c6de4eb69450d$var$EmptyState() {
+    let { renderEmptyState: renderEmptyState } = (0, $idLTj$react.useContext)($e39c6de4eb69450d$export$93e4b0b2cc49b648);
+    let emptyState = renderEmptyState ? renderEmptyState() : null;
+    if (emptyState == null) return null;
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$CenteredWrapper, null, emptyState);
+}
 function $e39c6de4eb69450d$var$CenteredWrapper({ children: children }) {
     let { state: state } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
     let rowProps;