@react-spectrum/table 3.14.1 → 3.15.0

package/dist/TableViewBase.main.js

@@ -130,7 +130,7 @@ function $e39c6de4eb69450d$export$3f8f74b6bfd2c5df() {
     return (0, $idLTj$react.useContext)($e39c6de4eb69450d$export$d288a7dd40372bc);
 }
 function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
-    var _dropState_target;
+    var _dropState_target, _dragAndDropHooks_isVirtualDragging, _dragAndDropHooks_isVirtualDragging1;
     props = (0, $idLTj$reactspectrumprovider.useProviderProps)(props);
     let { isQuiet: isQuiet, onAction: onAction, onResizeStart: propsOnResizeStart, onResizeEnd: propsOnResizeEnd, dragAndDropHooks: dragAndDropHooks, state: state } = props;
     let isTableDraggable = !!(dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.useDraggableCollectionState);
@@ -156,25 +156,24 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
     // with table layout, so we need to track it here
     let [, setIsResizing] = (0, $idLTj$react.useState)(false);
     let domRef = (0, $idLTj$reactspectrumutils.useDOMRef)(ref);
-    let headerRef = (0, $idLTj$react.useRef)(undefined);
-    let bodyRef = (0, $idLTj$react.useRef)(undefined);
+    let headerRef = (0, $idLTj$react.useRef)(null);
+    let bodyRef = (0, $idLTj$react.useRef)(null);
     let density = props.density || 'regular';
     let layout = (0, $idLTj$react.useMemo)(()=>new (0, $2b402d473779c595$exports.TableViewLayout)({
             // If props.rowHeight is auto, then use estimated heights based on scale, otherwise use fixed heights.
-            rowHeight: props.overflowMode === 'wrap' ? null : $e39c6de4eb69450d$var$ROW_HEIGHTS[density][scale],
-            estimatedRowHeight: props.overflowMode === 'wrap' ? $e39c6de4eb69450d$var$ROW_HEIGHTS[density][scale] : null,
-            headingHeight: props.overflowMode === 'wrap' ? null : $e39c6de4eb69450d$var$DEFAULT_HEADER_HEIGHT[scale],
-            estimatedHeadingHeight: props.overflowMode === 'wrap' ? $e39c6de4eb69450d$var$DEFAULT_HEADER_HEIGHT[scale] : null
+            rowHeight: props.overflowMode === 'wrap' ? undefined : $e39c6de4eb69450d$var$ROW_HEIGHTS[density][scale],
+            estimatedRowHeight: props.overflowMode === 'wrap' ? $e39c6de4eb69450d$var$ROW_HEIGHTS[density][scale] : undefined,
+            headingHeight: props.overflowMode === 'wrap' ? undefined : $e39c6de4eb69450d$var$DEFAULT_HEADER_HEIGHT[scale],
+            estimatedHeadingHeight: props.overflowMode === 'wrap' ? $e39c6de4eb69450d$var$DEFAULT_HEADER_HEIGHT[scale] : undefined
         }), // don't recompute when state.collection changes, only used for initial value
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
         props.overflowMode,
         scale,
         density
     ]);
-    let dragState;
+    let dragState = null;
     let preview = (0, $idLTj$react.useRef)(null);
-    if (isTableDraggable) {
+    if (isTableDraggable && dragAndDropHooks) {
         dragState = dragAndDropHooks.useDraggableCollectionState({
             collection: state.collection,
             selectionManager: state.selectionManager,
@@ -183,10 +182,10 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
         dragAndDropHooks.useDraggableCollection({}, dragState, domRef);
     }
     let DragPreview = dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.DragPreview;
-    let dropState;
-    let droppableCollection;
-    let isRootDropTarget;
-    if (isTableDroppable) {
+    let dropState = null;
+    let droppableCollection = null;
+    let isRootDropTarget = false;
+    if (isTableDroppable && dragAndDropHooks) {
         dropState = dragAndDropHooks.useDroppableCollectionState({
             collection: state.collection,
             selectionManager: state.selectionManager
@@ -215,31 +214,35 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
     let [headerRowHovered, setHeaderRowHovered] = (0, $idLTj$react.useState)(false);
     // This overrides collection view's renderWrapper to support DOM hierarchy.
     let renderWrapper = (0, $idLTj$react.useCallback)((parent, reusableView, children, renderChildren)=>{
+        var _parent_layoutInfo;
         if (reusableView.viewType === 'rowgroup') return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableRowGroup, {
             key: reusableView.key,
             layoutInfo: reusableView.layoutInfo,
-            parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo,
+            parent: (_parent_layoutInfo = parent === null || parent === void 0 ? void 0 : parent.layoutInfo) !== null && _parent_layoutInfo !== void 0 ? _parent_layoutInfo : null,
             // Override the default role="rowgroup" with role="presentation",
             // in favor or adding role="rowgroup" to the ScrollView with
             // ref={bodyRef} in the TableVirtualizer below.
             role: "presentation"
         }, renderChildren(children));
+        var _parent_layoutInfo1;
         if (reusableView.viewType === 'header') return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableHeader, {
             key: reusableView.key,
             layoutInfo: reusableView.layoutInfo,
-            parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo
+            parent: (_parent_layoutInfo1 = parent === null || parent === void 0 ? void 0 : parent.layoutInfo) !== null && _parent_layoutInfo1 !== void 0 ? _parent_layoutInfo1 : null
         }, renderChildren(children));
+        var _parent_layoutInfo2;
         if (reusableView.viewType === 'row') return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableRow, {
             key: reusableView.key,
             item: reusableView.content,
             layoutInfo: reusableView.layoutInfo,
-            parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo
+            parent: (_parent_layoutInfo2 = parent === null || parent === void 0 ? void 0 : parent.layoutInfo) !== null && _parent_layoutInfo2 !== void 0 ? _parent_layoutInfo2 : null
         }, renderChildren(children));
+        var _parent_layoutInfo3;
         if (reusableView.viewType === 'headerrow') return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableHeaderRow, {
             onHoverChange: setHeaderRowHovered,
             key: reusableView.key,
             layoutInfo: reusableView.layoutInfo,
-            parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo,
+            parent: (_parent_layoutInfo3 = parent === null || parent === void 0 ? void 0 : parent.layoutInfo) !== null && _parent_layoutInfo3 !== void 0 ? _parent_layoutInfo3 : null,
             item: reusableView.content
         }, renderChildren(children));
         return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableCellWrapper, {
@@ -272,7 +275,7 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
                 return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
                     role: "gridcell",
                     "aria-colindex": item.index + 1,
-                    "aria-colspan": item.colspan > 1 ? item.colspan : null
+                    "aria-colspan": item.colspan != null && item.colspan > 1 ? item.colspan : undefined
                 });
             case 'column':
                 if (item.props.isSelectionCell) return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableSelectAllCell, {
@@ -301,6 +304,7 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
             case 'empty':
                 return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$EmptyState, null);
         }
+        return null;
     }, []);
     let [isVerticalScrollbarVisible, setVerticalScollbarVisible] = (0, $idLTj$react.useState)(false);
     let [isHorizontalScrollbarVisible, setHorizontalScollbarVisible] = (0, $idLTj$react.useState)(false);
@@ -321,7 +325,7 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
     let { isFocusVisible: isFocusVisible, focusProps: focusProps } = (0, $idLTj$reactariafocus.useFocusRing)();
     let isEmpty = state.collection.size === 0;
     let onFocusedResizer = ()=>{
-        bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
+        if (bodyRef.current && headerRef.current) bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
     };
     let onResizeStart = (0, $idLTj$react.useCallback)((widths)=>{
         setIsResizing(true);
@@ -356,9 +360,8 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
         focusedKey,
         dropTargetKey
     ]);
-    let mergedProps = (0, $idLTj$reactariautils.mergeProps)(isTableDroppable && (droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps), gridProps, focusProps, (dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.isVirtualDragging()) && {
-        tabIndex: null
-    });
+    let mergedProps = (0, $idLTj$reactariautils.mergeProps)(isTableDroppable ? droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps : null, gridProps, focusProps);
+    if (dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : (_dragAndDropHooks_isVirtualDragging = dragAndDropHooks.isVirtualDragging) === null || _dragAndDropHooks_isVirtualDragging === void 0 ? void 0 : _dragAndDropHooks_isVirtualDragging.call(dragAndDropHooks)) mergedProps.tabIndex = undefined;
     return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$export$93e4b0b2cc49b648.Provider, {
         value: {
             state: state,
@@ -401,11 +404,12 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
         headerRef: headerRef,
         bodyRef: bodyRef,
         isFocusVisible: isFocusVisible,
-        isVirtualDragging: dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.isVirtualDragging(),
+        isVirtualDragging: (dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : (_dragAndDropHooks_isVirtualDragging1 = dragAndDropHooks.isVirtualDragging) === null || _dragAndDropHooks_isVirtualDragging1 === void 0 ? void 0 : _dragAndDropHooks_isVirtualDragging1.call(dragAndDropHooks)) || false,
         isRootDropTarget: isRootDropTarget
-    }), DragPreview && isTableDraggable && /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement(DragPreview, {
+    }), DragPreview && isTableDraggable && dragAndDropHooks && dragState && /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement(DragPreview, {
         ref: preview
     }, ()=>{
+        if (dragState.draggedKey == null) return null;
         if (dragAndDropHooks.renderPreview) return dragAndDropHooks.renderPreview(dragState.draggingKeys, dragState.draggedKey);
         let itemCount = dragState.draggingKeys.size;
         let maxWidth = bodyRef.current.getBoundingClientRect().width;
@@ -458,8 +462,10 @@ function $e39c6de4eb69450d$var$TableVirtualizer(props) {
         collection: collection,
         renderView: renderView,
         onVisibleRectChange (rect) {
-            bodyRef.current.scrollTop = rect.y;
-            (0, $idLTj$reactariavirtualizer.setScrollLeft)(bodyRef.current, direction, rect.x);
+            if (bodyRef.current) {
+                bodyRef.current.scrollTop = rect.y;
+                (0, $idLTj$reactariavirtualizer.setScrollLeft)(bodyRef.current, direction, rect.x);
+            }
         },
         persistedKeys: persistedKeys,
         layoutOptions: (0, $idLTj$react.useMemo)(()=>({
@@ -490,7 +496,8 @@ function $e39c6de4eb69450d$var$TableVirtualizer(props) {
     // only that it changes in a resize, and when that happens, we want to sync the body to the
     // header scroll position
     (0, $idLTj$react.useEffect)(()=>{
-        if ((0, $idLTj$reactariainteractions.getInteractionModality)() === 'keyboard' && headerRef.current.contains(document.activeElement)) {
+        var _headerRef_current;
+        if ((0, $idLTj$reactariainteractions.getInteractionModality)() === 'keyboard' && ((_headerRef_current = headerRef.current) === null || _headerRef_current === void 0 ? void 0 : _headerRef_current.contains(document.activeElement)) && bodyRef.current) {
             (0, $idLTj$reactariautils.scrollIntoView)(headerRef.current, document.activeElement);
             (0, $idLTj$reactariautils.scrollIntoViewport)(document.activeElement, {
                 containingElement: domRef.current
@@ -506,7 +513,7 @@ function $e39c6de4eb69450d$var$TableVirtualizer(props) {
     let headerHeight = ((_layout_getLayoutInfo = layout.getLayoutInfo('header')) === null || _layout_getLayoutInfo === void 0 ? void 0 : _layout_getLayoutInfo.rect.height) || 0;
     // Sync the scroll position from the table body to the header container.
     let onScroll = (0, $idLTj$react.useCallback)(()=>{
-        headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
+        if (headerRef.current && bodyRef.current) headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
     }, [
         bodyRef,
         headerRef
@@ -526,9 +533,7 @@ function $e39c6de4eb69450d$var$TableVirtualizer(props) {
         resizingColumnWidth,
         columnResizeState.resizingColumn
     ]);
-    let mergedProps = (0, $idLTj$reactariautils.mergeProps)(otherProps, isVirtualDragging && {
-        tabIndex: null
-    });
+    if (isVirtualDragging) otherProps.tabIndex = undefined;
     let firstColumn = collection.columns[0];
     let scrollPadding = 0;
     if (firstColumn.props.isSelectionCell || firstColumn.props.isDragButtonCell) scrollPadding = columnResizeState.getColumnWidth(firstColumn.key);
@@ -536,7 +541,7 @@ function $e39c6de4eb69450d$var$TableVirtualizer(props) {
     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", {
-        ...mergedProps,
+        ...otherProps,
         ref: domRef
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
         role: "presentation",
@@ -563,7 +568,7 @@ function $e39c6de4eb69450d$var$TableVirtualizer(props) {
         //  Using tabIndex={-1} prevents the ScrollView from being tabbable, and using role="rowgroup"
         //  here and role="presentation" on the table body content fixes the table structure.
         role: "rowgroup",
-        tabIndex: isVirtualDragging ? null : -1,
+        tabIndex: isVirtualDragging ? undefined : -1,
         style: {
             flex: 1,
             scrollPaddingInlineStart: scrollPadding
@@ -658,7 +663,7 @@ function $e39c6de4eb69450d$var$TableColumnHeader(props) {
         className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-headCellContents')
     }, column.rendered)));
 }
-let $e39c6de4eb69450d$var$_TableColumnHeaderButton = (props, ref)=>{
+let $e39c6de4eb69450d$var$ForwardTableColumnHeaderButton = (props, ref)=>{
     let { focusProps: focusProps, alignment: alignment, ...otherProps } = props;
     let { isEmpty: isEmpty } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
     let domRef = (0, $idLTj$reactspectrumutils.useFocusableRef)(ref);
@@ -686,7 +691,7 @@ let $e39c6de4eb69450d$var$_TableColumnHeaderButton = (props, ref)=>{
         ref: domRef
     }, props.children));
 };
-let $e39c6de4eb69450d$var$TableColumnHeaderButton = /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).forwardRef($e39c6de4eb69450d$var$_TableColumnHeaderButton);
+let $e39c6de4eb69450d$var$TableColumnHeaderButton = /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).forwardRef($e39c6de4eb69450d$var$ForwardTableColumnHeaderButton);
 function $e39c6de4eb69450d$var$ResizableTableColumnHeader(props) {
     var _column_props, _state_sortDescriptor, _state_sortDescriptor1, _state_sortDescriptor2, _state_sortDescriptor3;
     let { column: column } = props;
@@ -731,20 +736,21 @@ function $e39c6de4eb69450d$var$ResizableTableColumnHeader(props) {
     };
     let allowsSorting = (_column_props = column.props) === null || _column_props === void 0 ? void 0 : _column_props.allowsSorting;
     let items = (0, $idLTj$react.useMemo)(()=>{
-        let options = [
-            allowsSorting ? {
+        let options = [];
+        if (allowsSorting) {
+            options.push({
                 label: stringFormatter.format('sortAscending'),
                 id: 'sort-asc'
-            } : undefined,
-            allowsSorting ? {
+            });
+            options.push({
                 label: stringFormatter.format('sortDescending'),
                 id: 'sort-desc'
-            } : undefined,
-            {
-                label: stringFormatter.format('resizeColumn'),
-                id: 'resize'
-            }
-        ];
+            });
+        }
+        options.push({
+            label: stringFormatter.format('resizeColumn'),
+            id: 'resize'
+        });
         return options;
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
@@ -815,7 +821,7 @@ function $e39c6de4eb69450d$var$ResizableTableColumnHeader(props) {
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $18b3deb5c431fa13$exports.Nubbin), null)))));
 }
 function $e39c6de4eb69450d$var$TableSelectAllCell({ column: column }) {
-    let ref = (0, $idLTj$react.useRef)(undefined);
+    let ref = (0, $idLTj$react.useRef)(null);
     let { state: state } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
     let isSingleSelectionMode = state.selectionManager.selectionMode === 'single';
     let { columnHeaderProps: columnHeaderProps } = (0, $idLTj$reactariatable.useTableColumnHeader)({
@@ -847,7 +853,7 @@ function $e39c6de4eb69450d$var$TableSelectAllCell({ column: column }) {
     })));
 }
 function $e39c6de4eb69450d$var$TableDragHeaderCell({ column: column }) {
-    let ref = (0, $idLTj$react.useRef)(undefined);
+    let ref = (0, $idLTj$react.useRef)(null);
     let { state: state } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
     let { columnHeaderProps: columnHeaderProps } = (0, $idLTj$reactariatable.useTableColumnHeader)({
         node: column,
@@ -896,8 +902,10 @@ function $e39c6de4eb69450d$export$cd7c5802f9e21187() {
     return (0, $idLTj$react.useContext)($e39c6de4eb69450d$var$TableRowContext);
 }
 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)(undefined);
+    var _state_collection_rows_find, _layout_getContentSize, _layout_virtualizer, // 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_isVirtualDragging;
+    let ref = (0, $idLTj$react.useRef)(null);
     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, hasAction: hasAction, allowsSelection: allowsSelection } = (0, $idLTj$reactariatable.useTableRow)({
@@ -907,7 +915,6 @@ function $e39c6de4eb69450d$var$TableRow({ item: item, children: children, layout
     }, state, ref);
     let isDisabled = state.selectionManager.isDisabled(item.key);
     let isInteractive = !isDisabled && (hasAction || allowsSelection || isTableDraggable);
-    let isDroppable = isTableDroppable && !isDisabled;
     let { pressProps: pressProps, isPressed: isPressed } = (0, $idLTj$reactariainteractions.usePress)({
         isDisabled: !isInteractive
     });
@@ -925,35 +932,33 @@ function $e39c6de4eb69450d$var$TableRow({ item: item, children: children, layout
     // Figure out if the TableView content is equal or greater in height to the container. If so, we'll need to round the bottom
     // border corners of the last row when selected.
     let isFlushWithContainerBottom = false;
+    var _layout_virtualizer_visibleRect_height;
     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.visibleRect.height)) isFlushWithContainerBottom = true;
+        if (((_layout_getContentSize = layout.getContentSize()) === null || _layout_getContentSize === void 0 ? void 0 : _layout_getContentSize.height) >= ((_layout_virtualizer_visibleRect_height = (_layout_virtualizer = layout.virtualizer) === null || _layout_virtualizer === void 0 ? void 0 : _layout_virtualizer.visibleRect.height) !== null && _layout_virtualizer_visibleRect_height !== void 0 ? _layout_virtualizer_visibleRect_height : 0)) isFlushWithContainerBottom = true;
     }
-    let draggableItem;
-    if (isTableDraggable) {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+    let draggableItem = null;
+    if (isTableDraggable && dragAndDropHooks && dragState) {
         draggableItem = dragAndDropHooks.useDraggableItem({
             key: item.key,
             hasDragButton: true
         }, dragState);
         if (isDisabled) draggableItem = null;
     }
-    let droppableItem;
-    let isDropTarget;
-    let dropIndicator;
-    let dropIndicatorRef = (0, $idLTj$react.useRef)(undefined);
-    if (isTableDroppable) {
+    let isDropTarget = false;
+    let dropIndicator = null;
+    let dropIndicatorRef = (0, $idLTj$react.useRef)(null);
+    if (isTableDroppable && dragAndDropHooks && dropState) {
         let target = {
             type: 'item',
             key: item.key,
             dropPosition: 'on'
         };
         isDropTarget = dropState.isDropTarget(target);
-        // eslint-disable-next-line react-hooks/rules-of-hooks
         dropIndicator = dragAndDropHooks.useDropIndicator({
             target: target
         }, dropState, dropIndicatorRef);
     }
-    let dragButtonRef = (0, ($parcel$interopDefault($idLTj$react))).useRef(undefined);
+    let dragButtonRef = (0, ($parcel$interopDefault($idLTj$react))).useRef(null);
     let { buttonProps: dragButtonProps } = (0, $idLTj$reactariabutton.useButton)({
         ...draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragButtonProps,
         elementType: 'div'
@@ -961,14 +966,9 @@ function $e39c6de4eb69450d$var$TableRow({ item: item, children: children, layout
     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()) && {
+    }, focusWithinProps, focusProps, hoverProps, pressProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps, (dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : (_dragAndDropHooks_isVirtualDragging = dragAndDropHooks.isVirtualDragging) === null || _dragAndDropHooks_isVirtualDragging === void 0 ? void 0 : _dragAndDropHooks_isVirtualDragging.call(dragAndDropHooks)) ? {
         tabIndex: null
-    });
-    let dropProps = isDroppable ? droppableItem === null || droppableItem === void 0 ? void 0 : droppableItem.dropProps : {
-        'aria-hidden': droppableItem === null || droppableItem === void 0 ? void 0 : droppableItem.dropProps['aria-hidden']
-    };
+    } : null);
     let { visuallyHiddenProps: visuallyHiddenProps } = (0, $idLTj$reactariavisuallyhidden.useVisuallyHidden)();
     return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableRowContext.Provider, {
         value: {
@@ -994,13 +994,13 @@ function $e39c6de4eb69450d$var$TableRow({ item: item, children: children, layout
         ...dropIndicator === null || dropIndicator === void 0 ? void 0 : dropIndicator.dropIndicatorProps,
         ref: dropIndicatorRef
     }))), /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
-        ...(0, $idLTj$reactariautils.mergeProps)(props, dropProps),
+        ...props,
         ref: ref,
         className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-row', {
             'is-active': isPressed,
             'is-selected': isSelected,
             'spectrum-Table-row--highlightSelection': state.selectionManager.selectionBehavior === 'replace',
-            'is-next-selected': state.selectionManager.isSelected(item.nextKey),
+            'is-next-selected': item.nextKey != null && state.selectionManager.isSelected(item.nextKey),
             'is-focused': isFocusVisibleWithin,
             'focus-ring': isFocusVisible,
             'is-hovered': isHovered,
@@ -1023,7 +1023,7 @@ function $e39c6de4eb69450d$var$TableRow({ item: item, children: children, layout
 }
 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)(undefined);
+    let ref = (0, $idLTj$react.useRef)(null);
     let { rowProps: rowProps } = (0, $idLTj$reactariatable.useTableHeaderRow)({
         node: item,
         isVirtualized: true
@@ -1040,7 +1040,7 @@ function $e39c6de4eb69450d$var$TableHeaderRow({ item: item, children: children,
     }, children);
 }
 function $e39c6de4eb69450d$var$TableDragCell({ cell: cell }) {
-    let ref = (0, $idLTj$react.useRef)(undefined);
+    let ref = (0, $idLTj$react.useRef)(null);
     let { state: state, isTableDraggable: isTableDraggable } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
     let isDisabled = state.selectionManager.isDisabled(cell.parentKey);
     let { gridCellProps: gridCellProps } = (0, $idLTj$reactariatable.useTableCell)({
@@ -1058,7 +1058,7 @@ function $e39c6de4eb69450d$var$TableDragCell({ cell: cell }) {
     }, isTableDraggable && !isDisabled && /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$DragButton, null)));
 }
 function $e39c6de4eb69450d$var$TableCheckboxCell({ cell: cell }) {
-    let ref = (0, $idLTj$react.useRef)(undefined);
+    let ref = (0, $idLTj$react.useRef)(null);
     let { state: state } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
     // The TableCheckbox should always render its disabled status if the row is disabled, regardless of disabledBehavior,
     // but the cell itself should not render its disabled styles if disabledBehavior="selection" because the row might have actions on it.
@@ -1090,7 +1090,7 @@ function $e39c6de4eb69450d$var$TableCell({ cell: cell }) {
     let { scale: scale } = (0, $idLTj$reactspectrumprovider.useProvider)();
     let { state: state } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
     let isExpandableTable = 'expandedKeys' in state;
-    let ref = (0, $idLTj$react.useRef)(undefined);
+    let ref = (0, $idLTj$react.useRef)(null);
     let columnProps = cell.column.props;
     let isDisabled = state.selectionManager.isDisabled(cell.parentKey);
     let { gridCellProps: gridCellProps } = (0, $idLTj$reactariatable.useTableCell)({
@@ -1137,9 +1137,9 @@ function $e39c6de4eb69450d$var$TableCell({ cell: cell }) {
 }
 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) {
+    let isDropTarget = false;
+    let isRootDroptarget = false;
+    if (isTableDroppable && dropState) {
         if (parent.content) isDropTarget = dropState.isDropTarget({
             type: 'item',
             dropPosition: 'on',
@@ -1167,7 +1167,7 @@ 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)();
     let { state: state } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
-    let expandButtonRef = (0, $idLTj$react.useRef)(undefined);
+    let expandButtonRef = (0, $idLTj$react.useRef)(null);
     let stringFormatter = (0, $idLTj$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($1a3d6ad53eb75d54$exports))), '@react-spectrum/table');
     let isExpanded;
     if ('expandedKeys' in state) isExpanded = state.expandedKeys === 'all' || state.expandedKeys.has(cell.parentKey);
@@ -1213,7 +1213,7 @@ function $e39c6de4eb69450d$var$CenteredWrapper({ children: children }) {
     let rowProps;
     if ('expandedKeys' in state) {
         let topLevelRowCount = [
-            ...state.keyMap.get(state.collection.body.key).childNodes
+            ...state.collection.body.childNodes
         ].length;
         rowProps = {
             'aria-level': 1,