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

package/dist/TableViewBase.main.js

@@ -9,7 +9,6 @@ var $982885d0a34882ea$exports = require("./table_vars_css.main.js");
 require("./table.b13eee90.css");
 var $4afcd54cfd94dbb9$exports = require("./table_css.main.js");
 var $idLTj$spectrumiconsuiArrowDownSmall = require("@spectrum-icons/ui/ArrowDownSmall");
-var $idLTj$reactariautils = require("@react-aria/utils");
 var $idLTj$reactspectrumcheckbox = require("@react-spectrum/checkbox");
 var $idLTj$spectrumiconsuiChevronDownMedium = require("@spectrum-icons/ui/ChevronDownMedium");
 var $idLTj$spectrumiconsuiChevronLeftMedium = require("@spectrum-icons/ui/ChevronLeftMedium");
@@ -17,14 +16,16 @@ var $idLTj$spectrumiconsuiChevronRightMedium = require("@spectrum-icons/ui/Chevr
 var $idLTj$reactspectrumutils = require("@react-spectrum/utils");
 var $idLTj$reactariafocus = require("@react-aria/focus");
 var $idLTj$reactariainteractions = require("@react-aria/interactions");
+var $idLTj$reactariautils = require("@react-aria/utils");
 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$reactariaselection = require("@react-aria/selection");
 var $idLTj$reactspectrumprogress = require("@react-spectrum/progress");
 var $idLTj$react = require("react");
-var $idLTj$reactstatelytable = require("@react-stately/table");
 var $idLTj$reactstatelylayout = require("@react-stately/layout");
+var $idLTj$reactstatelytable = require("@react-stately/table");
 var $idLTj$reactspectrumtooltip = require("@react-spectrum/tooltip");
 var $idLTj$reactariabutton = require("@react-aria/button");
 var $idLTj$reactariai18n = require("@react-aria/i18n");
@@ -83,6 +84,7 @@ $parcel$export(module.exports, "TableViewBase", () => $e39c6de4eb69450d$export$5
 
 
 
+
 
 
 const $e39c6de4eb69450d$var$DEFAULT_HEADER_HEIGHT = {
@@ -146,25 +148,6 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
     ]);
     let { styleProps: styleProps } = (0, $idLTj$reactspectrumutils.useStyleProps)(props);
     let { scale: scale } = (0, $idLTj$reactspectrumprovider.useProvider)();
-    const getDefaultWidth = (0, $idLTj$react.useCallback)(({ props: { hideHeader: hideHeader, isSelectionCell: isSelectionCell, showDivider: showDivider, isDragButtonCell: isDragButtonCell } })=>{
-        if (hideHeader) {
-            let width = $e39c6de4eb69450d$var$DEFAULT_HIDE_HEADER_CELL_WIDTH[scale];
-            return showDivider ? width + 1 : width;
-        } else if (isSelectionCell) return $e39c6de4eb69450d$var$SELECTION_CELL_DEFAULT_WIDTH[scale];
-        else if (isDragButtonCell) return $e39c6de4eb69450d$var$DRAG_BUTTON_CELL_DEFAULT_WIDTH[scale];
-    }, [
-        scale
-    ]);
-    const getDefaultMinWidth = (0, $idLTj$react.useCallback)(({ props: { hideHeader: hideHeader, isSelectionCell: isSelectionCell, showDivider: showDivider, isDragButtonCell: isDragButtonCell } })=>{
-        if (hideHeader) {
-            let width = $e39c6de4eb69450d$var$DEFAULT_HIDE_HEADER_CELL_WIDTH[scale];
-            return showDivider ? width + 1 : width;
-        } else if (isSelectionCell) return $e39c6de4eb69450d$var$SELECTION_CELL_DEFAULT_WIDTH[scale];
-        else if (isDragButtonCell) return $e39c6de4eb69450d$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, $idLTj$react.useState)(false);
@@ -173,44 +156,23 @@ 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)();
-    let bodyRef = (0, $idLTj$react.useRef)();
+    let headerRef = (0, $idLTj$react.useRef)(undefined);
+    let bodyRef = (0, $idLTj$react.useRef)(undefined);
     let density = props.density || 'regular';
-    let columnLayout = (0, $idLTj$react.useMemo)(()=>new (0, $idLTj$reactstatelytable.TableColumnLayout)({
-            getDefaultWidth: getDefaultWidth,
-            getDefaultMinWidth: getDefaultMinWidth
-        }), [
-        getDefaultWidth,
-        getDefaultMinWidth
-    ]);
-    let tableLayout = (0, $idLTj$react.useMemo)(()=>new (0, $idLTj$reactstatelylayout.TableLayout)({
+    let layout = (0, $idLTj$react.useMemo)(()=>new (0, $idLTj$reactstatelylayout.TableLayout)({
             // 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,
-            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, $idLTj$react.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, $idLTj$react.useRef)(null);
@@ -232,7 +194,12 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
             selectionManager: state.selectionManager
         });
         droppableCollection = dragAndDropHooks.useDroppableCollection({
-            keyboardDelegate: layout,
+            keyboardDelegate: new (0, $idLTj$reactariaselection.ListKeyboardDelegate)({
+                collection: state.collection,
+                disabledKeys: state.selectionManager.disabledKeys,
+                ref: domRef,
+                layoutDelegate: layout
+            }),
             dropTargetDelegate: layout
         }, dropState, domRef);
         isRootDropTarget = dropState.isDropTarget({
@@ -242,12 +209,13 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
     let { gridProps: gridProps } = (0, $idLTj$reactariatable.useTable)({
         ...props,
         isVirtualized: true,
-        layout: layout,
+        layoutDelegate: layout,
         onRowAction: onAction,
         scrollRef: bodyRef
     }, state, domRef);
     let [headerMenuOpen, setHeaderMenuOpen] = (0, $idLTj$react.useState)(false);
     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)=>{
         if (reusableView.viewType === 'rowgroup') return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableRowGroup, {
             key: reusableView.key,
@@ -409,9 +377,8 @@ 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),
-        // 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,
@@ -442,11 +409,37 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
 // This is a custom Virtualizer that also has a header that syncs its scroll position with the body.
 function $e39c6de4eb69450d$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, $idLTj$reactariai18n.useLocale)();
     let loadingState = collection.body.props.loadingState;
     let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
     let onLoadMore = collection.body.props.onLoadMore;
+    let [tableWidth, setTableWidth] = (0, $idLTj$react.useState)(0);
+    let { scale: scale } = (0, $idLTj$reactspectrumprovider.useProvider)();
+    const getDefaultWidth = (0, $idLTj$react.useCallback)(({ props: { hideHeader: hideHeader, isSelectionCell: isSelectionCell, showDivider: showDivider, isDragButtonCell: isDragButtonCell } })=>{
+        if (hideHeader) {
+            let width = $e39c6de4eb69450d$var$DEFAULT_HIDE_HEADER_CELL_WIDTH[scale];
+            return showDivider ? width + 1 : width;
+        } else if (isSelectionCell) return $e39c6de4eb69450d$var$SELECTION_CELL_DEFAULT_WIDTH[scale];
+        else if (isDragButtonCell) return $e39c6de4eb69450d$var$DRAG_BUTTON_CELL_DEFAULT_WIDTH[scale];
+    }, [
+        scale
+    ]);
+    const getDefaultMinWidth = (0, $idLTj$react.useCallback)(({ props: { hideHeader: hideHeader, isSelectionCell: isSelectionCell, showDivider: showDivider, isDragButtonCell: isDragButtonCell } })=>{
+        if (hideHeader) {
+            let width = $e39c6de4eb69450d$var$DEFAULT_HIDE_HEADER_CELL_WIDTH[scale];
+            return showDivider ? width + 1 : width;
+        } else if (isSelectionCell) return $e39c6de4eb69450d$var$SELECTION_CELL_DEFAULT_WIDTH[scale];
+        else if (isDragButtonCell) return $e39c6de4eb69450d$var$DRAG_BUTTON_CELL_DEFAULT_WIDTH[scale];
+        return 75;
+    }, [
+        scale
+    ]);
+    let columnResizeState = (0, $idLTj$reactstatelytable.useTableColumnResizeState)({
+        tableWidth: tableWidth,
+        getDefaultWidth: getDefaultWidth,
+        getDefaultMinWidth: getDefaultMinWidth
+    }, tableState);
     let state = (0, $idLTj$reactstatelyvirtualizer.useVirtualizerState)({
         layout: layout,
         collection: collection,
@@ -460,6 +453,11 @@ function $e39c6de4eb69450d$var$TableVirtualizer(props) {
                 focusedKey
             ]) : new Set(), [
             focusedKey
+        ]),
+        layoutOptions: (0, $idLTj$react.useMemo)(()=>({
+                columnWidths: columnResizeState.columnWidths
+            }), [
+            columnResizeState.columnWidths
         ])
     });
     let memoedVirtualizerProps = (0, $idLTj$react.useMemo)(()=>({
@@ -474,7 +472,11 @@ function $e39c6de4eb69450d$var$TableVirtualizer(props) {
         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), [
+    let onVisibleRectChangeMemo = (0, $idLTj$react.useCallback)((rect)=>{
+        setTableWidth(rect.width);
+        onVisibleRectChange(rect);
+        onVisibleRectChangeProp(rect);
+    }, [
         onVisibleRectChange,
         onVisibleRectChangeProp
     ]);
@@ -503,27 +505,27 @@ function $e39c6de4eb69450d$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, $idLTj$react.useMemo)(()=>({
             width: resizingColumnWidth,
-            key: layout.resizingColumn
+            key: columnResizeState.resizingColumn
         }), [
         resizingColumnWidth,
-        layout.resizingColumn
+        columnResizeState.resizingColumn
     ]);
     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);
+    if (firstColumn.props.isSelectionCell || firstColumn.props.isDragButtonCell) scrollPadding = columnResizeState.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", {
@@ -540,7 +542,9 @@ function $e39c6de4eb69450d$var$TableVirtualizer(props) {
             scrollPaddingInlineStart: scrollPadding
         },
         ref: headerRef
-    }, state.visibleViews[0]), /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariavirtualizer.ScrollView), {
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $2877766f94c67a67$exports.ResizeStateContext).Provider, {
+        value: columnResizeState
+    }, state.visibleViews[0])), /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariavirtualizer.ScrollView), {
         className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-body', {
             'focus-ring': isFocusVisible,
             'spectrum-Table-body--resizerAtTableEdge': shouldHardCornerResizeCorner
@@ -571,7 +575,7 @@ function $e39c6de4eb69450d$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'
         }
     })))));
 }
@@ -677,7 +681,8 @@ function $e39c6de4eb69450d$var$ResizableTableColumnHeader(props) {
     let ref = (0, $idLTj$react.useRef)(null);
     let triggerRef = (0, $idLTj$react.useRef)(null);
     let resizingRef = (0, $idLTj$react.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 } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
+    let { state: state, onResizeStart: onResizeStart, onResize: onResize, onResizeEnd: onResizeEnd, headerRowHovered: headerRowHovered, setIsInResizeMode: setIsInResizeMode, isEmpty: isEmpty, isInResizeMode: isInResizeMode, headerMenuOpen: headerMenuOpen, setHeaderMenuOpen: setHeaderMenuOpen } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
+    let columnResizeState = (0, $idLTj$react.useContext)((0, $2877766f94c67a67$exports.ResizeStateContext));
     let stringFormatter = (0, $idLTj$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($1a3d6ad53eb75d54$exports))), '@react-spectrum/table');
     let { pressProps: pressProps, isPressed: isPressed } = (0, $idLTj$reactariainteractions.usePress)({
         isDisabled: isEmpty
@@ -706,7 +711,7 @@ function $e39c6de4eb69450d$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;
@@ -733,7 +738,7 @@ function $e39c6de4eb69450d$var$ResizableTableColumnHeader(props) {
     }, [
         allowsSorting
     ]);
-    let resizingColumn = layout.resizingColumn;
+    let resizingColumn = columnResizeState.resizingColumn;
     let showResizer = !isEmpty && (headerRowHovered && (0, $idLTj$reactariainteractions.getInteractionModality)() !== 'keyboard' || resizingColumn != null);
     let alignment = 'start';
     let menuAlign = 'start';
@@ -798,7 +803,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)();
+    let ref = (0, $idLTj$react.useRef)(undefined);
     let { state: state } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
     let isSingleSelectionMode = state.selectionManager.selectionMode === 'single';
     let { columnHeaderProps: columnHeaderProps } = (0, $idLTj$reactariatable.useTableColumnHeader)({
@@ -830,7 +835,7 @@ function $e39c6de4eb69450d$var$TableSelectAllCell({ column: column }) {
     })));
 }
 function $e39c6de4eb69450d$var$TableDragHeaderCell({ column: column }) {
-    let ref = (0, $idLTj$react.useRef)();
+    let ref = (0, $idLTj$react.useRef)(undefined);
     let { state: state } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
     let { columnHeaderProps: columnHeaderProps } = (0, $idLTj$reactariatable.useTableColumnHeader)({
         node: column,
@@ -880,7 +885,7 @@ function $e39c6de4eb69450d$export$cd7c5802f9e21187() {
 }
 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 ref = (0, $idLTj$react.useRef)(undefined);
     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)({
@@ -922,7 +927,7 @@ function $e39c6de4eb69450d$var$TableRow({ item: item, children: children, layout
     let droppableItem;
     let isDropTarget;
     let dropIndicator;
-    let dropIndicatorRef = (0, $idLTj$react.useRef)();
+    let dropIndicatorRef = (0, $idLTj$react.useRef)(undefined);
     if (isTableDroppable) {
         let target = {
             type: 'item',
@@ -935,7 +940,7 @@ function $e39c6de4eb69450d$var$TableRow({ item: item, children: children, layout
             target: target
         }, dropState, dropIndicatorRef);
     }
-    let dragButtonRef = (0, ($parcel$interopDefault($idLTj$react))).useRef();
+    let dragButtonRef = (0, ($parcel$interopDefault($idLTj$react))).useRef(undefined);
     let { buttonProps: dragButtonProps } = (0, $idLTj$reactariabutton.useButton)({
         ...draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragButtonProps,
         elementType: 'div'
@@ -1005,7 +1010,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)();
+    let ref = (0, $idLTj$react.useRef)(undefined);
     let { rowProps: rowProps } = (0, $idLTj$reactariatable.useTableHeaderRow)({
         node: item,
         isVirtualized: true
@@ -1022,7 +1027,7 @@ function $e39c6de4eb69450d$var$TableHeaderRow({ item: item, children: children,
     }, children);
 }
 function $e39c6de4eb69450d$var$TableDragCell({ cell: cell }) {
-    let ref = (0, $idLTj$react.useRef)();
+    let ref = (0, $idLTj$react.useRef)(undefined);
     let { state: state, isTableDraggable: isTableDraggable } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
     let isDisabled = state.disabledKeys.has(cell.parentKey);
     let { gridCellProps: gridCellProps } = (0, $idLTj$reactariatable.useTableCell)({
@@ -1040,7 +1045,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)();
+    let ref = (0, $idLTj$react.useRef)(undefined);
     let { state: state } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
     let isDisabled = state.disabledKeys.has(cell.parentKey);
     let { gridCellProps: gridCellProps } = (0, $idLTj$reactariatable.useTableCell)({
@@ -1069,7 +1074,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)();
+    let ref = (0, $idLTj$react.useRef)(undefined);
     let columnProps = cell.column.props;
     let isDisabled = state.disabledKeys.has(cell.parentKey);
     let { gridCellProps: gridCellProps } = (0, $idLTj$reactariatable.useTableCell)({
@@ -1146,7 +1151,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)();
+    let expandButtonRef = (0, $idLTj$react.useRef)(undefined);
     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);