@react-spectrum/table 3.12.11-nightly.4674 → 3.12.11-nightly.4681

package/dist/TableViewBase.module.js

@@ -1,7 +1,7 @@
 import {InsertionIndicator as $7ee9a922ee4e8032$export$2c0bab5914a9d088} from "./InsertionIndicator.module.js";
 import $7lS7h$intlStringsmodulejs from "./intlStrings.module.js";
 import {Nubbin as $cb7d341e8868d81d$export$d9658cdf8c86807} from "./Nubbin.module.js";
-import {Resizer as $fc695d2eafc2b351$export$48a76196cafe3b93} from "./Resizer.module.js";
+import {Resizer as $fc695d2eafc2b351$export$48a76196cafe3b93, ResizeStateContext as $fc695d2eafc2b351$export$b517d84d4ad20b24} from "./Resizer.module.js";
 import {RootDropIndicator as $4e6fc36ba71ba405$export$d30a7814cfd4033e} from "./RootDropIndicator.module.js";
 import {DragPreview as $daa6ead3d9d3506a$export$905ab40ac2179daa} from "./DragPreview.module.js";
 import "./vars.42570ef3.css";
@@ -9,7 +9,6 @@ import $7lS7h$table_vars_cssmodulejs from "./table_vars_css.module.js";
 import "./table.b13eee90.css";
 import $7lS7h$table_cssmodulejs from "./table_css.module.js";
 import $7lS7h$spectrumiconsuiArrowDownSmall from "@spectrum-icons/ui/ArrowDownSmall";
-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";
@@ -17,14 +16,16 @@ import $7lS7h$spectrumiconsuiChevronRightMedium from "@spectrum-icons/ui/Chevron
 import {useStyleProps as $7lS7h$useStyleProps, useDOMRef as $7lS7h$useDOMRef, classNames as $7lS7h$classNames, useFocusableRef as $7lS7h$useFocusableRef, useUnwrapDOMRef as $7lS7h$useUnwrapDOMRef} from "@react-spectrum/utils";
 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 {mergeProps as $7lS7h$mergeProps, scrollIntoView as $7lS7h$scrollIntoView, scrollIntoViewport as $7lS7h$scrollIntoViewport, isAndroid as $7lS7h$isAndroid} from "@react-aria/utils";
 import {MenuTrigger as $7lS7h$MenuTrigger, Menu as $7lS7h$Menu, Item as $7lS7h$Item} from "@react-spectrum/menu";
 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 {ListKeyboardDelegate as $7lS7h$ListKeyboardDelegate} from "@react-aria/selection";
 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 {TableColumnLayout as $7lS7h$TableColumnLayout} from "@react-stately/table";
+import $7lS7h$react, {useContext as $7lS7h$useContext, useRef as $7lS7h$useRef, useEffect as $7lS7h$useEffect, useState as $7lS7h$useState, useMemo as $7lS7h$useMemo, useCallback as $7lS7h$useCallback} from "react";
 import {TableLayout as $7lS7h$TableLayout} from "@react-stately/layout";
+import {useTableColumnResizeState as $7lS7h$useTableColumnResizeState} from "@react-stately/table";
 import {TooltipTrigger as $7lS7h$TooltipTrigger, Tooltip as $7lS7h$Tooltip} from "@react-spectrum/tooltip";
 import {useButton as $7lS7h$useButton} from "@react-aria/button";
 import {useLocale as $7lS7h$useLocale, useLocalizedStringFormatter as $7lS7h$useLocalizedStringFormatter} from "@react-aria/i18n";
@@ -75,6 +76,7 @@ function $parcel$interopDefault(a) {
 
 
 
+
 
 
 const $bd013581c0a4b065$var$DEFAULT_HEADER_HEIGHT = {
@@ -138,25 +140,6 @@ function $bd013581c0a4b065$var$TableViewBase(props, ref) {
     ]);
     let { styleProps: styleProps } = (0, $7lS7h$useStyleProps)(props);
     let { scale: scale } = (0, $7lS7h$useProvider)();
-    const getDefaultWidth = (0, $7lS7h$useCallback)(({ props: { hideHeader: hideHeader, isSelectionCell: isSelectionCell, showDivider: showDivider, isDragButtonCell: isDragButtonCell } })=>{
-        if (hideHeader) {
-            let width = $bd013581c0a4b065$var$DEFAULT_HIDE_HEADER_CELL_WIDTH[scale];
-            return showDivider ? width + 1 : width;
-        } else if (isSelectionCell) return $bd013581c0a4b065$var$SELECTION_CELL_DEFAULT_WIDTH[scale];
-        else if (isDragButtonCell) return $bd013581c0a4b065$var$DRAG_BUTTON_CELL_DEFAULT_WIDTH[scale];
-    }, [
-        scale
-    ]);
-    const getDefaultMinWidth = (0, $7lS7h$useCallback)(({ props: { hideHeader: hideHeader, isSelectionCell: isSelectionCell, showDivider: showDivider, isDragButtonCell: isDragButtonCell } })=>{
-        if (hideHeader) {
-            let width = $bd013581c0a4b065$var$DEFAULT_HIDE_HEADER_CELL_WIDTH[scale];
-            return showDivider ? width + 1 : width;
-        } else if (isSelectionCell) return $bd013581c0a4b065$var$SELECTION_CELL_DEFAULT_WIDTH[scale];
-        else if (isDragButtonCell) return $bd013581c0a4b065$var$DRAG_BUTTON_CELL_DEFAULT_WIDTH[scale];
-        return 75;
-    }, [
-        scale
-    ]);
     // Starts when the user selects resize from the menu, ends when resizing ends
     // used to control the visibility of the resizer Nubbin
     let [isInResizeMode, setIsInResizeMode] = (0, $7lS7h$useState)(false);
@@ -165,44 +148,23 @@ function $bd013581c0a4b065$var$TableViewBase(props, ref) {
     // with table layout, so we need to track it here
     let [, setIsResizing] = (0, $7lS7h$useState)(false);
     let domRef = (0, $7lS7h$useDOMRef)(ref);
-    let headerRef = (0, $7lS7h$useRef)();
-    let bodyRef = (0, $7lS7h$useRef)();
+    let headerRef = (0, $7lS7h$useRef)(undefined);
+    let bodyRef = (0, $7lS7h$useRef)(undefined);
     let density = props.density || 'regular';
-    let columnLayout = (0, $7lS7h$useMemo)(()=>new (0, $7lS7h$TableColumnLayout)({
-            getDefaultWidth: getDefaultWidth,
-            getDefaultMinWidth: getDefaultMinWidth
-        }), [
-        getDefaultWidth,
-        getDefaultMinWidth
-    ]);
-    let tableLayout = (0, $7lS7h$useMemo)(()=>new (0, $7lS7h$TableLayout)({
+    let layout = (0, $7lS7h$useMemo)(()=>new (0, $7lS7h$TableLayout)({
             // If props.rowHeight is auto, then use estimated heights based on scale, otherwise use fixed heights.
             rowHeight: props.overflowMode === 'wrap' ? null : $bd013581c0a4b065$var$ROW_HEIGHTS[density][scale],
             estimatedRowHeight: props.overflowMode === 'wrap' ? $bd013581c0a4b065$var$ROW_HEIGHTS[density][scale] : null,
             headingHeight: props.overflowMode === 'wrap' ? null : $bd013581c0a4b065$var$DEFAULT_HEADER_HEIGHT[scale],
             estimatedHeadingHeight: props.overflowMode === 'wrap' ? $bd013581c0a4b065$var$DEFAULT_HEADER_HEIGHT[scale] : null,
-            columnLayout: columnLayout,
-            initialCollection: state.collection
+            scrollContainer: 'body',
+            enableEmptyState: true
         }), // don't recompute when state.collection changes, only used for initial value
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
         props.overflowMode,
         scale,
-        density,
-        columnLayout
-    ]);
-    // Use a proxy so that a new object is created for each render so that alternate instances aren't affected by mutation.
-    // This can be thought of as equivalent to `{…tableLayout, tableState: state}`, but works with classes as well.
-    let layout = (0, $7lS7h$useMemo)(()=>{
-        let proxy = new Proxy(tableLayout, {
-            get (target, prop, receiver) {
-                return prop === 'tableState' ? state : Reflect.get(target, prop, receiver);
-            }
-        });
-        return proxy;
-    }, [
-        state,
-        tableLayout
+        density
     ]);
     let dragState;
     let preview = (0, $7lS7h$useRef)(null);
@@ -224,7 +186,12 @@ function $bd013581c0a4b065$var$TableViewBase(props, ref) {
             selectionManager: state.selectionManager
         });
         droppableCollection = dragAndDropHooks.useDroppableCollection({
-            keyboardDelegate: layout,
+            keyboardDelegate: new (0, $7lS7h$ListKeyboardDelegate)({
+                collection: state.collection,
+                disabledKeys: state.selectionManager.disabledKeys,
+                ref: domRef,
+                layoutDelegate: layout
+            }),
             dropTargetDelegate: layout
         }, dropState, domRef);
         isRootDropTarget = dropState.isDropTarget({
@@ -234,12 +201,13 @@ function $bd013581c0a4b065$var$TableViewBase(props, ref) {
     let { gridProps: gridProps } = (0, $7lS7h$useTable)({
         ...props,
         isVirtualized: true,
-        layout: layout,
+        layoutDelegate: layout,
         onRowAction: onAction,
         scrollRef: bodyRef
     }, state, domRef);
     let [headerMenuOpen, setHeaderMenuOpen] = (0, $7lS7h$useState)(false);
     let [headerRowHovered, setHeaderRowHovered] = (0, $7lS7h$useState)(false);
+    // This overrides collection view's renderWrapper to support DOM hierarchy.
     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,
@@ -401,9 +369,8 @@ 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),
-        // This should be `tableLayout` rather than `layout` so it doesn't
-        // change objects and invalidate virtualizer.
-        layout: tableLayout,
+        tableState: state,
+        layout: layout,
         collection: state.collection,
         focusedKey: focusedKey,
         renderView: renderView,
@@ -434,11 +401,37 @@ function $bd013581c0a4b065$var$TableViewBase(props, ref) {
 // This is a custom Virtualizer that also has a header that syncs its scroll position with the body.
 function $bd013581c0a4b065$var$TableVirtualizer(props) {
     var _layout_getLayoutInfo;
-    let { layout: layout, collection: collection, focusedKey: focusedKey, renderView: renderView, renderWrapper: renderWrapper, domRef: domRef, bodyRef: bodyRef, headerRef: headerRef, onVisibleRectChange: onVisibleRectChangeProp, isFocusVisible: isFocusVisible, isVirtualDragging: isVirtualDragging, isRootDropTarget: isRootDropTarget, ...otherProps } = props;
+    let { tableState: tableState, layout: layout, collection: collection, focusedKey: focusedKey, renderView: renderView, renderWrapper: renderWrapper, domRef: domRef, bodyRef: bodyRef, headerRef: headerRef, onVisibleRectChange: onVisibleRectChangeProp, isFocusVisible: isFocusVisible, isVirtualDragging: isVirtualDragging, isRootDropTarget: isRootDropTarget, ...otherProps } = props;
     let { direction: direction } = (0, $7lS7h$useLocale)();
     let loadingState = collection.body.props.loadingState;
     let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
     let onLoadMore = collection.body.props.onLoadMore;
+    let [tableWidth, setTableWidth] = (0, $7lS7h$useState)(0);
+    let { scale: scale } = (0, $7lS7h$useProvider)();
+    const getDefaultWidth = (0, $7lS7h$useCallback)(({ props: { hideHeader: hideHeader, isSelectionCell: isSelectionCell, showDivider: showDivider, isDragButtonCell: isDragButtonCell } })=>{
+        if (hideHeader) {
+            let width = $bd013581c0a4b065$var$DEFAULT_HIDE_HEADER_CELL_WIDTH[scale];
+            return showDivider ? width + 1 : width;
+        } else if (isSelectionCell) return $bd013581c0a4b065$var$SELECTION_CELL_DEFAULT_WIDTH[scale];
+        else if (isDragButtonCell) return $bd013581c0a4b065$var$DRAG_BUTTON_CELL_DEFAULT_WIDTH[scale];
+    }, [
+        scale
+    ]);
+    const getDefaultMinWidth = (0, $7lS7h$useCallback)(({ props: { hideHeader: hideHeader, isSelectionCell: isSelectionCell, showDivider: showDivider, isDragButtonCell: isDragButtonCell } })=>{
+        if (hideHeader) {
+            let width = $bd013581c0a4b065$var$DEFAULT_HIDE_HEADER_CELL_WIDTH[scale];
+            return showDivider ? width + 1 : width;
+        } else if (isSelectionCell) return $bd013581c0a4b065$var$SELECTION_CELL_DEFAULT_WIDTH[scale];
+        else if (isDragButtonCell) return $bd013581c0a4b065$var$DRAG_BUTTON_CELL_DEFAULT_WIDTH[scale];
+        return 75;
+    }, [
+        scale
+    ]);
+    let columnResizeState = (0, $7lS7h$useTableColumnResizeState)({
+        tableWidth: tableWidth,
+        getDefaultWidth: getDefaultWidth,
+        getDefaultMinWidth: getDefaultMinWidth
+    }, tableState);
     let state = (0, $7lS7h$useVirtualizerState)({
         layout: layout,
         collection: collection,
@@ -452,6 +445,11 @@ function $bd013581c0a4b065$var$TableVirtualizer(props) {
                 focusedKey
             ]) : new Set(), [
             focusedKey
+        ]),
+        layoutOptions: (0, $7lS7h$useMemo)(()=>({
+                columnWidths: columnResizeState.columnWidths
+            }), [
+            columnResizeState.columnWidths
         ])
     });
     let memoedVirtualizerProps = (0, $7lS7h$useMemo)(()=>({
@@ -466,7 +464,11 @@ function $bd013581c0a4b065$var$TableVirtualizer(props) {
         onLoadMore
     ]);
     let { virtualizerProps: virtualizerProps, scrollViewProps: { onVisibleRectChange: onVisibleRectChange } } = (0, $7lS7h$useVirtualizer)(memoedVirtualizerProps, state, domRef);
-    let onVisibleRectChangeMemo = (0, $7lS7h$useMemo)(()=>(0, $7lS7h$chain)(onVisibleRectChange, onVisibleRectChangeProp), [
+    let onVisibleRectChangeMemo = (0, $7lS7h$useCallback)((rect)=>{
+        setTableWidth(rect.width);
+        onVisibleRectChange(rect);
+        onVisibleRectChangeProp(rect);
+    }, [
         onVisibleRectChange,
         onVisibleRectChangeProp
     ]);
@@ -495,27 +497,27 @@ function $bd013581c0a4b065$var$TableVirtualizer(props) {
         bodyRef,
         headerRef
     ]);
-    let resizerPosition = layout.getResizerPosition() - 2;
+    let resizerPosition = columnResizeState.resizingColumn != null ? layout.getLayoutInfo(columnResizeState.resizingColumn).rect.maxX - 2 : 0;
     let resizerAtEdge = resizerPosition > Math.max(state.virtualizer.contentSize.width, state.virtualizer.visibleRect.width) - 3;
     // this should be fine, every movement of the resizer causes a rerender
     // scrolling can cause it to lag for a moment, but it's always updated
     let resizerInVisibleRegion = resizerPosition < state.virtualizer.visibleRect.maxX;
     let shouldHardCornerResizeCorner = resizerAtEdge && resizerInVisibleRegion;
     // minimize re-render caused on Resizers by memoing this
-    let resizingColumnWidth = layout.getColumnWidth(layout.resizingColumn);
+    let resizingColumnWidth = columnResizeState.resizingColumn != null ? columnResizeState.getColumnWidth(columnResizeState.resizingColumn) : 0;
     let resizingColumn = (0, $7lS7h$useMemo)(()=>({
             width: resizingColumnWidth,
-            key: layout.resizingColumn
+            key: columnResizeState.resizingColumn
         }), [
         resizingColumnWidth,
-        layout.resizingColumn
+        columnResizeState.resizingColumn
     ]);
     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);
+    if (firstColumn.props.isSelectionCell || firstColumn.props.isDragButtonCell) scrollPadding = columnResizeState.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", {
@@ -532,7 +534,9 @@ function $bd013581c0a4b065$var$TableVirtualizer(props) {
             scrollPaddingInlineStart: scrollPadding
         },
         ref: headerRef
-    }, state.visibleViews[0]), /*#__PURE__*/ (0, $7lS7h$react).createElement((0, $7lS7h$ScrollView), {
+    }, /*#__PURE__*/ (0, $7lS7h$react).createElement((0, $fc695d2eafc2b351$export$b517d84d4ad20b24).Provider, {
+        value: columnResizeState
+    }, state.visibleViews[0])), /*#__PURE__*/ (0, $7lS7h$react).createElement((0, $7lS7h$ScrollView), {
         className: (0, $7lS7h$classNames)((0, ($parcel$interopDefault($7lS7h$table_vars_cssmodulejs))), 'spectrum-Table-body', {
             'focus-ring': isFocusVisible,
             'spectrum-Table-body--resizerAtTableEdge': shouldHardCornerResizeCorner
@@ -563,7 +567,7 @@ function $bd013581c0a4b065$var$TableVirtualizer(props) {
         style: {
             [direction === 'ltr' ? 'left' : 'right']: `${resizerPosition}px`,
             height: `${Math.max(state.virtualizer.contentSize.height, state.virtualizer.visibleRect.height)}px`,
-            display: layout.resizingColumn ? 'block' : 'none'
+            display: columnResizeState.resizingColumn ? 'block' : 'none'
         }
     })))));
 }
@@ -669,7 +673,8 @@ function $bd013581c0a4b065$var$ResizableTableColumnHeader(props) {
     let ref = (0, $7lS7h$useRef)(null);
     let triggerRef = (0, $7lS7h$useRef)(null);
     let resizingRef = (0, $7lS7h$useRef)(null);
-    let { state: state, layout: layout, onResizeStart: onResizeStart, onResize: onResize, onResizeEnd: onResizeEnd, headerRowHovered: headerRowHovered, setIsInResizeMode: setIsInResizeMode, isEmpty: isEmpty, isInResizeMode: isInResizeMode, headerMenuOpen: headerMenuOpen, setHeaderMenuOpen: setHeaderMenuOpen } = $bd013581c0a4b065$export$3cb274deb6c2d854();
+    let { state: state, onResizeStart: onResizeStart, onResize: onResize, onResizeEnd: onResizeEnd, headerRowHovered: headerRowHovered, setIsInResizeMode: setIsInResizeMode, isEmpty: isEmpty, isInResizeMode: isInResizeMode, headerMenuOpen: headerMenuOpen, setHeaderMenuOpen: setHeaderMenuOpen } = $bd013581c0a4b065$export$3cb274deb6c2d854();
+    let columnResizeState = (0, $7lS7h$useContext)((0, $fc695d2eafc2b351$export$b517d84d4ad20b24));
     let stringFormatter = (0, $7lS7h$useLocalizedStringFormatter)((0, ($parcel$interopDefault($7lS7h$intlStringsmodulejs))), '@react-spectrum/table');
     let { pressProps: pressProps, isPressed: isPressed } = (0, $7lS7h$usePress)({
         isDisabled: isEmpty
@@ -698,7 +703,7 @@ function $bd013581c0a4b065$var$ResizableTableColumnHeader(props) {
                 state.sort(column.key, 'descending');
                 break;
             case 'resize':
-                layout.startResize(column.key);
+                columnResizeState.startResize(column.key);
                 setIsInResizeMode(true);
                 state.setKeyboardNavigationDisabled(true);
                 break;
@@ -725,7 +730,7 @@ function $bd013581c0a4b065$var$ResizableTableColumnHeader(props) {
     }, [
         allowsSorting
     ]);
-    let resizingColumn = layout.resizingColumn;
+    let resizingColumn = columnResizeState.resizingColumn;
     let showResizer = !isEmpty && (headerRowHovered && (0, $7lS7h$getInteractionModality)() !== 'keyboard' || resizingColumn != null);
     let alignment = 'start';
     let menuAlign = 'start';
@@ -790,7 +795,7 @@ function $bd013581c0a4b065$var$ResizableTableColumnHeader(props) {
     }, /*#__PURE__*/ (0, $7lS7h$react).createElement((0, $cb7d341e8868d81d$export$d9658cdf8c86807), null)))));
 }
 function $bd013581c0a4b065$var$TableSelectAllCell({ column: column }) {
-    let ref = (0, $7lS7h$useRef)();
+    let ref = (0, $7lS7h$useRef)(undefined);
     let { state: state } = $bd013581c0a4b065$export$3cb274deb6c2d854();
     let isSingleSelectionMode = state.selectionManager.selectionMode === 'single';
     let { columnHeaderProps: columnHeaderProps } = (0, $7lS7h$useTableColumnHeader)({
@@ -822,7 +827,7 @@ function $bd013581c0a4b065$var$TableSelectAllCell({ column: column }) {
     })));
 }
 function $bd013581c0a4b065$var$TableDragHeaderCell({ column: column }) {
-    let ref = (0, $7lS7h$useRef)();
+    let ref = (0, $7lS7h$useRef)(undefined);
     let { state: state } = $bd013581c0a4b065$export$3cb274deb6c2d854();
     let { columnHeaderProps: columnHeaderProps } = (0, $7lS7h$useTableColumnHeader)({
         node: column,
@@ -872,7 +877,7 @@ function $bd013581c0a4b065$export$cd7c5802f9e21187() {
 }
 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 ref = (0, $7lS7h$useRef)(undefined);
     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, hasAction: hasAction, allowsSelection: allowsSelection } = (0, $7lS7h$useTableRow)({
@@ -914,7 +919,7 @@ function $bd013581c0a4b065$var$TableRow({ item: item, children: children, layout
     let droppableItem;
     let isDropTarget;
     let dropIndicator;
-    let dropIndicatorRef = (0, $7lS7h$useRef)();
+    let dropIndicatorRef = (0, $7lS7h$useRef)(undefined);
     if (isTableDroppable) {
         let target = {
             type: 'item',
@@ -927,7 +932,7 @@ function $bd013581c0a4b065$var$TableRow({ item: item, children: children, layout
             target: target
         }, dropState, dropIndicatorRef);
     }
-    let dragButtonRef = (0, $7lS7h$react).useRef();
+    let dragButtonRef = (0, $7lS7h$react).useRef(undefined);
     let { buttonProps: dragButtonProps } = (0, $7lS7h$useButton)({
         ...draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragButtonProps,
         elementType: 'div'
@@ -997,7 +1002,7 @@ function $bd013581c0a4b065$var$TableRow({ item: item, children: children, layout
 }
 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 ref = (0, $7lS7h$useRef)(undefined);
     let { rowProps: rowProps } = (0, $7lS7h$useTableHeaderRow)({
         node: item,
         isVirtualized: true
@@ -1014,7 +1019,7 @@ function $bd013581c0a4b065$var$TableHeaderRow({ item: item, children: children,
     }, children);
 }
 function $bd013581c0a4b065$var$TableDragCell({ cell: cell }) {
-    let ref = (0, $7lS7h$useRef)();
+    let ref = (0, $7lS7h$useRef)(undefined);
     let { state: state, isTableDraggable: isTableDraggable } = $bd013581c0a4b065$export$3cb274deb6c2d854();
     let isDisabled = state.disabledKeys.has(cell.parentKey);
     let { gridCellProps: gridCellProps } = (0, $7lS7h$useTableCell)({
@@ -1032,7 +1037,7 @@ function $bd013581c0a4b065$var$TableDragCell({ cell: cell }) {
     }, isTableDraggable && !isDisabled && /*#__PURE__*/ (0, $7lS7h$react).createElement($bd013581c0a4b065$var$DragButton, null)));
 }
 function $bd013581c0a4b065$var$TableCheckboxCell({ cell: cell }) {
-    let ref = (0, $7lS7h$useRef)();
+    let ref = (0, $7lS7h$useRef)(undefined);
     let { state: state } = $bd013581c0a4b065$export$3cb274deb6c2d854();
     let isDisabled = state.disabledKeys.has(cell.parentKey);
     let { gridCellProps: gridCellProps } = (0, $7lS7h$useTableCell)({
@@ -1061,7 +1066,7 @@ function $bd013581c0a4b065$var$TableCell({ cell: cell }) {
     let { scale: scale } = (0, $7lS7h$useProvider)();
     let { state: state } = $bd013581c0a4b065$export$3cb274deb6c2d854();
     let isExpandableTable = 'expandedKeys' in state;
-    let ref = (0, $7lS7h$useRef)();
+    let ref = (0, $7lS7h$useRef)(undefined);
     let columnProps = cell.column.props;
     let isDisabled = state.disabledKeys.has(cell.parentKey);
     let { gridCellProps: gridCellProps } = (0, $7lS7h$useTableCell)({
@@ -1138,7 +1143,7 @@ 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)();
     let { state: state } = $bd013581c0a4b065$export$3cb274deb6c2d854();
-    let expandButtonRef = (0, $7lS7h$useRef)();
+    let expandButtonRef = (0, $7lS7h$useRef)(undefined);
     let stringFormatter = (0, $7lS7h$useLocalizedStringFormatter)((0, ($parcel$interopDefault($7lS7h$intlStringsmodulejs))), '@react-spectrum/table');
     let isExpanded;
     if ('expandedKeys' in state) isExpanded = state.expandedKeys === 'all' || state.expandedKeys.has(cell.parentKey);