react-aria-components 1.10.1 → 1.12.0

package/dist/Table.module.js

@@ -3,12 +3,13 @@ import {CheckboxContext as $4e85f108e88277b8$export$b085522c77523c51} from "./RS
 import {CollectionRendererContext as $7135fc7d473fd974$export$4feb769f8ddf26c5, DefaultCollectionRenderer as $7135fc7d473fd974$export$a164736487e3f0ae} from "./Collection.module.js";
 import {DEFAULT_SLOT as $64fa3d84918910a7$export$c62b8e45d58ddad9, Provider as $64fa3d84918910a7$export$2881499e37b75b9a, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3} from "./utils.module.js";
 import {DragAndDropContext as $612b8eb6cb90e02d$export$d188a835a7bc5783, DropIndicatorContext as $612b8eb6cb90e02d$export$f55761759794cf55, useDndPersistedKeys as $612b8eb6cb90e02d$export$d1e8e3fbb7461f6, useRenderDropIndicator as $612b8eb6cb90e02d$export$971707d8a129a1f7} from "./DragAndDrop.module.js";
+import {FieldInputContext as $8e6cc465cc68f603$export$698f465ec27e93df, SelectableCollectionContext as $8e6cc465cc68f603$export$b0d3ecf7112093a7} from "./context.module.js";
 import $dbSRa$intlStringsmodulejs from "./intlStrings.module.js";
-import {CollectionNode as $dbSRa$CollectionNode, BaseCollection as $dbSRa$BaseCollection, Collection as $dbSRa$Collection, CollectionBuilder as $dbSRa$CollectionBuilder, createBranchComponent as $dbSRa$createBranchComponent, useCachedChildren as $dbSRa$useCachedChildren, createLeafComponent as $dbSRa$createLeafComponent} from "@react-aria/collections";
+import {BaseCollection as $dbSRa$BaseCollection, Collection as $dbSRa$Collection, CollectionBuilder as $dbSRa$CollectionBuilder, CollectionNode as $dbSRa$CollectionNode, createBranchComponent as $dbSRa$createBranchComponent, useCachedChildren as $dbSRa$useCachedChildren, createLeafComponent as $dbSRa$createLeafComponent, FilterableNode as $dbSRa$FilterableNode, LoaderNode as $dbSRa$LoaderNode} from "@react-aria/collections";
 import {buildHeaderRows as $dbSRa$buildHeaderRows} from "@react-stately/table";
-import {useTableColumnResizeState as $dbSRa$useTableColumnResizeState, useMultipleSelectionState as $dbSRa$useMultipleSelectionState, useTableState as $dbSRa$useTableState} from "react-stately";
+import {useTableColumnResizeState as $dbSRa$useTableColumnResizeState, useMultipleSelectionState as $dbSRa$useMultipleSelectionState, useTableState as $dbSRa$useTableState, UNSTABLE_useFilteredTableState as $dbSRa$UNSTABLE_useFilteredTableState} from "react-stately";
 import {useTable as $dbSRa$useTable, ListKeyboardDelegate as $dbSRa$ListKeyboardDelegate, useFocusRing as $dbSRa$useFocusRing, FocusScope as $dbSRa$FocusScope, mergeProps as $dbSRa$mergeProps, useTableRowGroup as $dbSRa$useTableRowGroup, useHover as $dbSRa$useHover, useTableHeaderRow as $dbSRa$useTableHeaderRow, useTableSelectAllCheckbox as $dbSRa$useTableSelectAllCheckbox, useTableColumnHeader as $dbSRa$useTableColumnHeader, useLocalizedStringFormatter as $dbSRa$useLocalizedStringFormatter, useTableColumnResize as $dbSRa$useTableColumnResize, useLocale as $dbSRa$useLocale, useTableRow as $dbSRa$useTableRow, useTableSelectionCheckbox as $dbSRa$useTableSelectionCheckbox, useVisuallyHidden as $dbSRa$useVisuallyHidden, useTableCell as $dbSRa$useTableCell} from "react-aria";
-import {useObjectRef as $dbSRa$useObjectRef, useLayoutEffect as $dbSRa$useLayoutEffect, isScrollable as $dbSRa$isScrollable, useResizeObserver as $dbSRa$useResizeObserver, filterDOMProps as $dbSRa$filterDOMProps, mergeRefs as $dbSRa$mergeRefs, UNSTABLE_useLoadMoreSentinel as $dbSRa$UNSTABLE_useLoadMoreSentinel, inertValue as $dbSRa$inertValue} from "@react-aria/utils";
+import {useObjectRef as $dbSRa$useObjectRef, useLayoutEffect as $dbSRa$useLayoutEffect, isScrollable as $dbSRa$isScrollable, useResizeObserver as $dbSRa$useResizeObserver, filterDOMProps as $dbSRa$filterDOMProps, mergeRefs as $dbSRa$mergeRefs, useLoadMoreSentinel as $dbSRa$useLoadMoreSentinel, inertValue as $dbSRa$inertValue} from "@react-aria/utils";
 import $dbSRa$react, {createContext as $dbSRa$createContext, forwardRef as $dbSRa$forwardRef, useRef as $dbSRa$useRef, useState as $dbSRa$useState, useMemo as $dbSRa$useMemo, useContext as $dbSRa$useContext, useEffect as $dbSRa$useEffect, useCallback as $dbSRa$useCallback} from "react";
 import $dbSRa$reactdom from "react-dom";
 
@@ -29,6 +30,7 @@ function $parcel$interopDefault(a) {
 
 
 
+
 class $1910c06f0ca9905e$var$TableCollection extends (0, $dbSRa$BaseCollection) {
     addNode(node) {
         super.addNode(node);
@@ -83,9 +85,6 @@ class $1910c06f0ca9905e$var$TableCollection extends (0, $dbSRa$BaseCollection) {
         yield this.head;
         yield this.body;
     }
-    get size() {
-        return this.rows.length;
-    }
     getFirstKey() {
         return this.body.firstChildKey;
     }
@@ -138,7 +137,7 @@ class $1910c06f0ca9905e$var$TableCollection extends (0, $dbSRa$BaseCollection) {
         return text.join(' ');
     }
     constructor(...args){
-        super(...args), this.headerRows = [], this.columns = [], this.rows = [], this.rowHeaderColumnKeys = new Set(), this.head = new (0, $dbSRa$CollectionNode)('tableheader', -1), this.body = new (0, $dbSRa$CollectionNode)('tablebody', -2), this.columnsDirty = true;
+        super(...args), this.headerRows = [], this.columns = [], this.rows = [], this.rowHeaderColumnKeys = new Set(), this.head = new $1910c06f0ca9905e$var$TableHeaderNode(-1), this.body = new $1910c06f0ca9905e$var$TableBodyNode(-2), this.columnsDirty = true;
     }
 }
 const $1910c06f0ca9905e$var$ResizableTableContainerContext = /*#__PURE__*/ (0, $dbSRa$createContext)(null);
@@ -189,7 +188,9 @@ const $1910c06f0ca9905e$export$7063e69b8a954175 = /*#__PURE__*/ (0, $dbSRa$forwa
         props.onResizeEnd
     ]);
     return /*#__PURE__*/ (0, $dbSRa$react).createElement("div", {
-        ...(0, $dbSRa$filterDOMProps)(props),
+        ...(0, $dbSRa$filterDOMProps)(props, {
+            global: true
+        }),
         ref: containerRef,
         className: props.className || 'react-aria-ResizableTableContainer',
         style: props.style,
@@ -233,25 +234,32 @@ const $1910c06f0ca9905e$export$54ec01a60f47d33d = /*#__PURE__*/ (0, $dbSRa$forwa
         }));
 });
 function $1910c06f0ca9905e$var$TableInner({ props: props, forwardedRef: ref, selectionState: selectionState, collection: collection }) {
+    let contextProps;
+    [contextProps] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)({}, null, (0, $8e6cc465cc68f603$export$b0d3ecf7112093a7));
+    let { filter: filter, ...collectionProps } = contextProps;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    let { shouldUseVirtualFocus: shouldUseVirtualFocus, disallowTypeAhead: disallowTypeAhead, ...DOMCollectionProps } = collectionProps || {};
     let tableContainerContext = (0, $dbSRa$useContext)($1910c06f0ca9905e$var$ResizableTableContainerContext);
     ref = (0, $dbSRa$useObjectRef)((0, $dbSRa$useMemo)(()=>(0, $dbSRa$mergeRefs)(ref, tableContainerContext === null || tableContainerContext === void 0 ? void 0 : tableContainerContext.tableRef), [
         ref,
         tableContainerContext === null || tableContainerContext === void 0 ? void 0 : tableContainerContext.tableRef
     ]));
-    let state = (0, $dbSRa$useTableState)({
+    let tableState = (0, $dbSRa$useTableState)({
         ...props,
         collection: collection,
         children: undefined,
         UNSAFE_selectionState: selectionState
     });
+    let filteredState = (0, $dbSRa$UNSTABLE_useFilteredTableState)(tableState, filter);
     let { isVirtualized: isVirtualized, layoutDelegate: layoutDelegate, dropTargetDelegate: ctxDropTargetDelegate, CollectionRoot: CollectionRoot } = (0, $dbSRa$useContext)((0, $7135fc7d473fd974$export$4feb769f8ddf26c5));
     let { dragAndDropHooks: dragAndDropHooks } = props;
     let { gridProps: gridProps } = (0, $dbSRa$useTable)({
         ...props,
+        ...DOMCollectionProps,
         layoutDelegate: layoutDelegate,
         isVirtualized: isVirtualized
-    }, state, ref);
-    let selectionManager = state.selectionManager;
+    }, filteredState, ref);
+    let selectionManager = filteredState.selectionManager;
     let hasDragHooks = !!(dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.useDraggableCollectionState);
     let hasDropHooks = !!(dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.useDroppableCollectionState);
     let dragHooksProvided = (0, $dbSRa$useRef)(hasDragHooks);
@@ -272,7 +280,7 @@ function $1910c06f0ca9905e$var$TableInner({ props: props, forwardedRef: ref, sel
     let preview = (0, $dbSRa$useRef)(null);
     if (hasDragHooks && dragAndDropHooks) {
         dragState = dragAndDropHooks.useDraggableCollectionState({
-            collection: collection,
+            collection: filteredState.collection,
             selectionManager: selectionManager,
             preview: dragAndDropHooks.renderDragPreview ? preview : undefined
         });
@@ -284,11 +292,11 @@ function $1910c06f0ca9905e$var$TableInner({ props: props, forwardedRef: ref, sel
     }
     if (hasDropHooks && dragAndDropHooks) {
         dropState = dragAndDropHooks.useDroppableCollectionState({
-            collection: collection,
+            collection: filteredState.collection,
             selectionManager: selectionManager
         });
         let keyboardDelegate = new (0, $dbSRa$ListKeyboardDelegate)({
-            collection: collection,
+            collection: filteredState.collection,
             disabledKeys: selectionManager.disabledKeys,
             disabledBehavior: selectionManager.disabledBehavior,
             ref: ref,
@@ -312,7 +320,7 @@ function $1910c06f0ca9905e$var$TableInner({ props: props, forwardedRef: ref, sel
             isDropTarget: isRootDropTarget,
             isFocused: isFocused,
             isFocusVisible: isFocusVisible,
-            state: state
+            state: filteredState
         }
     });
     let isListDraggable = !!(hasDragHooks && !(dragState === null || dragState === void 0 ? void 0 : dragState.isDisabled));
@@ -321,7 +329,7 @@ function $1910c06f0ca9905e$var$TableInner({ props: props, forwardedRef: ref, sel
     if (tableContainerContext) {
         layoutState = tableContainerContext.useTableColumnResizeState({
             tableWidth: tableContainerContext.tableWidth
-        }, state);
+        }, filteredState);
         if (!isVirtualized) style = {
             ...style,
             tableLayout: 'fixed',
@@ -329,12 +337,15 @@ function $1910c06f0ca9905e$var$TableInner({ props: props, forwardedRef: ref, sel
         };
     }
     let ElementType = $1910c06f0ca9905e$var$useElementType('table');
+    let DOMProps = (0, $dbSRa$filterDOMProps)(props, {
+        global: true
+    });
     var _tableContainerContext_scrollRef;
     return /*#__PURE__*/ (0, $dbSRa$react).createElement((0, $64fa3d84918910a7$export$2881499e37b75b9a), {
         values: [
             [
                 $1910c06f0ca9905e$export$38de1cb0526c21fb,
-                state
+                filteredState
             ],
             [
                 $1910c06f0ca9905e$export$a2680a798823803c,
@@ -353,12 +364,18 @@ function $1910c06f0ca9905e$var$TableInner({ props: props, forwardedRef: ref, sel
                 {
                     render: $1910c06f0ca9905e$var$TableDropIndicatorWrapper
                 }
+            ],
+            [
+                (0, $8e6cc465cc68f603$export$b0d3ecf7112093a7),
+                null
+            ],
+            [
+                (0, $8e6cc465cc68f603$export$698f465ec27e93df),
+                null
             ]
         ]
     }, /*#__PURE__*/ (0, $dbSRa$react).createElement((0, $dbSRa$FocusScope), null, /*#__PURE__*/ (0, $dbSRa$react).createElement(ElementType, {
-        ...(0, $dbSRa$filterDOMProps)(props),
-        ...renderProps,
-        ...(0, $dbSRa$mergeProps)(gridProps, focusProps, droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps),
+        ...(0, $dbSRa$mergeProps)(DOMProps, renderProps, gridProps, focusProps, droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps),
         style: style,
         ref: ref,
         slot: props.slot || undefined,
@@ -368,7 +385,7 @@ function $1910c06f0ca9905e$var$TableInner({ props: props, forwardedRef: ref, sel
         "data-focused": isFocused || undefined,
         "data-focus-visible": isFocusVisible || undefined
     }, /*#__PURE__*/ (0, $dbSRa$react).createElement(CollectionRoot, {
-        collection: collection,
+        collection: filteredState.collection,
         scrollRef: (_tableContainerContext_scrollRef = tableContainerContext === null || tableContainerContext === void 0 ? void 0 : tableContainerContext.scrollRef) !== null && _tableContainerContext_scrollRef !== void 0 ? _tableContainerContext_scrollRef : ref,
         persistedKeys: (0, $612b8eb6cb90e02d$export$d1e8e3fbb7461f6)(selectionManager, dragAndDropHooks, dropState)
     }))), dragPreview);
@@ -381,7 +398,10 @@ const $1910c06f0ca9905e$var$TableOptionsContext = /*#__PURE__*/ (0, $dbSRa$creat
 function $1910c06f0ca9905e$export$fddc468cd8cb4db9() {
     return (0, $dbSRa$useContext)($1910c06f0ca9905e$var$TableOptionsContext);
 }
-const $1910c06f0ca9905e$export$f850895b287ef28e = /*#__PURE__*/ (0, $dbSRa$createBranchComponent)('tableheader', (props, ref)=>{
+class $1910c06f0ca9905e$var$TableHeaderNode extends (0, $dbSRa$CollectionNode) {
+}
+$1910c06f0ca9905e$var$TableHeaderNode.type = 'tableheader';
+const $1910c06f0ca9905e$export$f850895b287ef28e = /*#__PURE__*/ (0, $dbSRa$createBranchComponent)($1910c06f0ca9905e$var$TableHeaderNode, (props, ref)=>{
     let collection = (0, $dbSRa$useContext)($1910c06f0ca9905e$export$38de1cb0526c21fb).collection;
     let headerRows = (0, $dbSRa$useCachedChildren)({
         items: collection.headerRows,
@@ -412,7 +432,9 @@ const $1910c06f0ca9905e$export$f850895b287ef28e = /*#__PURE__*/ (0, $dbSRa$creat
         }
     });
     return /*#__PURE__*/ (0, $dbSRa$react).createElement(THead, {
-        ...(0, $dbSRa$mergeProps)((0, $dbSRa$filterDOMProps)(props), rowGroupProps, hoverProps),
+        ...(0, $dbSRa$mergeProps)((0, $dbSRa$filterDOMProps)(props, {
+            global: true
+        }), rowGroupProps, hoverProps),
         ...renderProps,
         ref: ref,
         "data-hovered": isHovered || undefined
@@ -450,7 +472,10 @@ function $1910c06f0ca9905e$var$TableHeaderRow({ item: item }) {
         parent: item
     })));
 }
-const $1910c06f0ca9905e$export$816b5d811295e6bc = /*#__PURE__*/ (0, $dbSRa$createLeafComponent)('column', (props, forwardedRef, column)=>{
+class $1910c06f0ca9905e$var$TableColumnNode extends (0, $dbSRa$CollectionNode) {
+}
+$1910c06f0ca9905e$var$TableColumnNode.type = 'column';
+const $1910c06f0ca9905e$export$816b5d811295e6bc = /*#__PURE__*/ (0, $dbSRa$createLeafComponent)($1910c06f0ca9905e$var$TableColumnNode, (props, forwardedRef, column)=>{
     var _state_sortDescriptor, _state_sortDescriptor1;
     let ref = (0, $dbSRa$useObjectRef)(forwardedRef);
     let state = (0, $dbSRa$useContext)($1910c06f0ca9905e$export$38de1cb0526c21fb);
@@ -503,8 +528,12 @@ const $1910c06f0ca9905e$export$816b5d811295e6bc = /*#__PURE__*/ (0, $dbSRa$creat
         width: layoutState.getColumnWidth(column.key)
     };
     let TH = $1910c06f0ca9905e$var$useElementType('th');
+    let DOMProps = (0, $dbSRa$filterDOMProps)(props, {
+        global: true
+    });
+    delete DOMProps.id;
     return /*#__PURE__*/ (0, $dbSRa$react).createElement(TH, {
-        ...(0, $dbSRa$mergeProps)((0, $dbSRa$filterDOMProps)(props), columnHeaderProps, focusProps, hoverProps),
+        ...(0, $dbSRa$mergeProps)(DOMProps, columnHeaderProps, focusProps, hoverProps),
         ...renderProps,
         style: style,
         ref: ref,
@@ -581,12 +610,13 @@ const $1910c06f0ca9905e$export$ee689e97a7664bfd = /*#__PURE__*/ (0, $dbSRa$forwa
         if (e.pointerType === 'mouse') setMouseDown(true);
     };
     if (!isResizing && isMouseDown) setMouseDown(false);
+    let DOMProps = (0, $dbSRa$filterDOMProps)(props, {
+        global: true
+    });
     return /*#__PURE__*/ (0, $dbSRa$react).createElement("div", {
         ref: objectRef,
         role: "presentation",
-        ...(0, $dbSRa$filterDOMProps)(props),
-        ...renderProps,
-        ...(0, $dbSRa$mergeProps)(resizerProps, {
+        ...(0, $dbSRa$mergeProps)(DOMProps, renderProps, resizerProps, {
             onPointerDown: onPointerDown
         }, hoverProps),
         "data-hovered": isHovered || undefined,
@@ -608,7 +638,10 @@ const $1910c06f0ca9905e$export$ee689e97a7664bfd = /*#__PURE__*/ (0, $dbSRa$forwa
         }
     }), document.body));
 });
-const $1910c06f0ca9905e$export$76ccd210b9029917 = /*#__PURE__*/ (0, $dbSRa$createBranchComponent)('tablebody', (props, ref)=>{
+class $1910c06f0ca9905e$var$TableBodyNode extends (0, $dbSRa$FilterableNode) {
+}
+$1910c06f0ca9905e$var$TableBodyNode.type = 'tablebody';
+const $1910c06f0ca9905e$export$76ccd210b9029917 = /*#__PURE__*/ (0, $dbSRa$createBranchComponent)($1910c06f0ca9905e$var$TableBodyNode, (props, ref)=>{
     let state = (0, $dbSRa$useContext)($1910c06f0ca9905e$export$38de1cb0526c21fb);
     let { isVirtualized: isVirtualized } = (0, $dbSRa$useContext)((0, $7135fc7d473fd974$export$4feb769f8ddf26c5));
     let collection = state.collection;
@@ -619,7 +652,7 @@ const $1910c06f0ca9905e$export$76ccd210b9029917 = /*#__PURE__*/ (0, $dbSRa$creat
     let isRootDropTarget = isDroppable && !!dropState && ((_dropState_isDropTarget = dropState.isDropTarget({
         type: 'root'
     })) !== null && _dropState_isDropTarget !== void 0 ? _dropState_isDropTarget : false);
-    let isEmpty = collection.size === 0 || collection.rows.length === 1 && collection.rows[0].type === 'loader';
+    let isEmpty = collection.size === 0;
     let renderValues = {
         isDropTarget: isRootDropTarget,
         isEmpty: isEmpty
@@ -640,7 +673,6 @@ const $1910c06f0ca9905e$export$76ccd210b9029917 = /*#__PURE__*/ (0, $dbSRa$creat
         let rowHeaderProps = {};
         let style = {};
         if (isVirtualized) {
-            rowProps['aria-rowindex'] = collection.headerRows.length + 1;
             rowHeaderProps['aria-colspan'] = numColumns;
             style = {
                 display: 'contents'
@@ -658,11 +690,13 @@ const $1910c06f0ca9905e$export$76ccd210b9029917 = /*#__PURE__*/ (0, $dbSRa$creat
     }
     let { rowGroupProps: rowGroupProps } = (0, $dbSRa$useTableRowGroup)();
     let TBody = $1910c06f0ca9905e$var$useElementType('tbody');
+    let DOMProps = (0, $dbSRa$filterDOMProps)(props, {
+        global: true
+    });
     // TODO: TableBody doesn't support being the scrollable body of the table yet, to revisit if needed. Would need to
     // call useLoadMore here and walk up the DOM to the nearest scrollable element to set scrollRef
     return /*#__PURE__*/ (0, $dbSRa$react).createElement(TBody, {
-        ...(0, $dbSRa$mergeProps)((0, $dbSRa$filterDOMProps)(props), rowGroupProps),
-        ...renderProps,
+        ...(0, $dbSRa$mergeProps)(DOMProps, renderProps, rowGroupProps),
         ref: ref,
         "data-empty": isEmpty || undefined
     }, isDroppable && /*#__PURE__*/ (0, $dbSRa$react).createElement($1910c06f0ca9905e$var$RootDropIndicator, null), /*#__PURE__*/ (0, $dbSRa$react).createElement(CollectionBranch, {
@@ -671,7 +705,19 @@ const $1910c06f0ca9905e$export$76ccd210b9029917 = /*#__PURE__*/ (0, $dbSRa$creat
         renderDropIndicator: (0, $612b8eb6cb90e02d$export$971707d8a129a1f7)(dragAndDropHooks, dropState)
     }), emptyState);
 });
-const $1910c06f0ca9905e$export$b59bdbef9ce70de2 = /*#__PURE__*/ (0, $dbSRa$createBranchComponent)('item', (props, forwardedRef, item)=>{
+class $1910c06f0ca9905e$var$TableRowNode extends (0, $dbSRa$CollectionNode) {
+    filter(collection, newCollection, filterFn) {
+        let cells = collection.getChildren(this.key);
+        for (let cell of cells)if (filterFn(cell.textValue, cell)) {
+            let clone = this.clone();
+            newCollection.addDescendants(clone, collection);
+            return clone;
+        }
+        return null;
+    }
+}
+$1910c06f0ca9905e$var$TableRowNode.type = 'item';
+const $1910c06f0ca9905e$export$b59bdbef9ce70de2 = /*#__PURE__*/ (0, $dbSRa$createBranchComponent)($1910c06f0ca9905e$var$TableRowNode, (props, forwardedRef, item)=>{
     let ref = (0, $dbSRa$useObjectRef)(forwardedRef);
     let state = (0, $dbSRa$useContext)($1910c06f0ca9905e$export$38de1cb0526c21fb);
     let { dragAndDropHooks: dragAndDropHooks, dragState: dragState, dropState: dropState } = (0, $dbSRa$useContext)((0, $612b8eb6cb90e02d$export$d188a835a7bc5783));
@@ -736,6 +782,11 @@ const $1910c06f0ca9905e$export$b59bdbef9ce70de2 = /*#__PURE__*/ (0, $dbSRa$creat
     });
     let TR = $1910c06f0ca9905e$var$useElementType('tr');
     let TD = $1910c06f0ca9905e$var$useElementType('td');
+    let DOMProps = (0, $dbSRa$filterDOMProps)(props, {
+        global: true
+    });
+    delete DOMProps.id;
+    delete DOMProps.onClick;
     return /*#__PURE__*/ (0, $dbSRa$react).createElement((0, $dbSRa$react).Fragment, null, dropIndicator && !dropIndicator.isHidden && /*#__PURE__*/ (0, $dbSRa$react).createElement(TR, {
         role: "row",
         style: {
@@ -753,8 +804,7 @@ const $1910c06f0ca9905e$export$b59bdbef9ce70de2 = /*#__PURE__*/ (0, $dbSRa$creat
         ...dropIndicator.dropIndicatorProps,
         ref: dropIndicatorRef
     }))), /*#__PURE__*/ (0, $dbSRa$react).createElement(TR, {
-        ...(0, $dbSRa$mergeProps)((0, $dbSRa$filterDOMProps)(props), rowProps, focusProps, hoverProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps, focusWithinProps),
-        ...renderProps,
+        ...(0, $dbSRa$mergeProps)(DOMProps, renderProps, rowProps, focusProps, hoverProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps, focusWithinProps),
         ref: ref,
         "data-disabled": states.isDisabled || undefined,
         "data-selected": states.isSelected || undefined,
@@ -808,7 +858,10 @@ const $1910c06f0ca9905e$export$b59bdbef9ce70de2 = /*#__PURE__*/ (0, $dbSRa$creat
         idScope: props.id
     }, props.children);
 });
-const $1910c06f0ca9905e$export$f6f0c3fe4ec306ea = /*#__PURE__*/ (0, $dbSRa$createLeafComponent)('cell', (props, forwardedRef, cell)=>{
+class $1910c06f0ca9905e$var$TableCellNode extends (0, $dbSRa$CollectionNode) {
+}
+$1910c06f0ca9905e$var$TableCellNode.type = 'cell';
+const $1910c06f0ca9905e$export$f6f0c3fe4ec306ea = /*#__PURE__*/ (0, $dbSRa$createLeafComponent)($1910c06f0ca9905e$var$TableCellNode, (props, forwardedRef, cell)=>{
     let ref = (0, $dbSRa$useObjectRef)(forwardedRef);
     let state = (0, $dbSRa$useContext)($1910c06f0ca9905e$export$38de1cb0526c21fb);
     let { dragState: dragState } = (0, $dbSRa$useContext)((0, $612b8eb6cb90e02d$export$d188a835a7bc5783));
@@ -834,9 +887,12 @@ const $1910c06f0ca9905e$export$f6f0c3fe4ec306ea = /*#__PURE__*/ (0, $dbSRa$creat
         }
     });
     let TD = $1910c06f0ca9905e$var$useElementType('td');
+    let DOMProps = (0, $dbSRa$filterDOMProps)(props, {
+        global: true
+    });
+    delete DOMProps.id;
     return /*#__PURE__*/ (0, $dbSRa$react).createElement(TD, {
-        ...(0, $dbSRa$mergeProps)((0, $dbSRa$filterDOMProps)(props), gridCellProps, focusProps, hoverProps),
-        ...renderProps,
+        ...(0, $dbSRa$mergeProps)(DOMProps, renderProps, gridCellProps, focusProps, hoverProps),
         ref: ref,
         "data-focused": isFocused || undefined,
         "data-focus-visible": isFocusVisible || undefined,
@@ -873,7 +929,9 @@ function $1910c06f0ca9905e$var$TableDropIndicator(props, ref) {
     let TR = $1910c06f0ca9905e$var$useElementType('tr');
     let TD = $1910c06f0ca9905e$var$useElementType('td');
     return /*#__PURE__*/ (0, $dbSRa$react).createElement(TR, {
-        ...(0, $dbSRa$filterDOMProps)(props),
+        ...(0, $dbSRa$filterDOMProps)(props, {
+            global: true
+        }),
         ...renderProps,
         role: "row",
         ref: ref,
@@ -927,7 +985,7 @@ function $1910c06f0ca9905e$var$RootDropIndicator() {
         ref: ref
     })));
 }
-const $1910c06f0ca9905e$export$92aad1076056e17a = (0, $dbSRa$createLeafComponent)('loader', function TableLoadingIndicator(props, ref, item) {
+const $1910c06f0ca9905e$export$8f5bea0338ed243c = (0, $dbSRa$createLeafComponent)((0, $dbSRa$LoaderNode), function TableLoadingIndicator(props, ref, item) {
     let state = (0, $dbSRa$useContext)($1910c06f0ca9905e$export$38de1cb0526c21fb);
     let { isVirtualized: isVirtualized } = (0, $dbSRa$useContext)((0, $7135fc7d473fd974$export$4feb769f8ddf26c5));
     let { isLoading: isLoading, onLoadMore: onLoadMore, scrollOffset: scrollOffset, ...otherProps } = props;
@@ -943,7 +1001,7 @@ const $1910c06f0ca9905e$export$92aad1076056e17a = (0, $dbSRa$createLeafComponent
         scrollOffset,
         state === null || state === void 0 ? void 0 : state.collection
     ]);
-    (0, $dbSRa$UNSTABLE_useLoadMoreSentinel)(memoedLoadMoreProps, sentinelRef);
+    (0, $dbSRa$useLoadMoreSentinel)(memoedLoadMoreProps, sentinelRef);
     let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
         ...otherProps,
         id: undefined,
@@ -957,7 +1015,9 @@ const $1910c06f0ca9905e$export$92aad1076056e17a = (0, $dbSRa$createLeafComponent
     let rowHeaderProps = {};
     let style = {};
     if (isVirtualized) {
-        rowProps['aria-rowindex'] = item.index + 1 + state.collection.headerRows.length;
+        // For now don't include aria-rowindex on loader since they aren't keyboard focusable
+        // Arguably shouldn't include them ever since it might be confusing to the user to include the loaders as part of the
+        // row count
         rowHeaderProps['aria-colspan'] = numColumns;
         style = {
             display: 'contents'
@@ -982,7 +1042,9 @@ const $1910c06f0ca9905e$export$92aad1076056e17a = (0, $dbSRa$createLeafComponent
             width: 1
         }
     }))), isLoading && renderProps.children && /*#__PURE__*/ (0, $dbSRa$react).createElement(TR, {
-        ...(0, $dbSRa$mergeProps)((0, $dbSRa$filterDOMProps)(props), rowProps),
+        ...(0, $dbSRa$mergeProps)((0, $dbSRa$filterDOMProps)(props, {
+            global: true
+        }), rowProps),
         ...renderProps,
         role: "row",
         ref: ref
@@ -994,5 +1056,5 @@ const $1910c06f0ca9905e$export$92aad1076056e17a = (0, $dbSRa$createLeafComponent
 });
 
 
-export {$1910c06f0ca9905e$export$7063e69b8a954175 as ResizableTableContainer, $1910c06f0ca9905e$export$93e4b0b2cc49b648 as TableContext, $1910c06f0ca9905e$export$38de1cb0526c21fb as TableStateContext, $1910c06f0ca9905e$export$a2680a798823803c as TableColumnResizeStateContext, $1910c06f0ca9905e$export$54ec01a60f47d33d as Table, $1910c06f0ca9905e$export$fddc468cd8cb4db9 as useTableOptions, $1910c06f0ca9905e$export$f850895b287ef28e as TableHeader, $1910c06f0ca9905e$export$816b5d811295e6bc as Column, $1910c06f0ca9905e$export$ee689e97a7664bfd as ColumnResizer, $1910c06f0ca9905e$export$76ccd210b9029917 as TableBody, $1910c06f0ca9905e$export$b59bdbef9ce70de2 as Row, $1910c06f0ca9905e$export$f6f0c3fe4ec306ea as Cell, $1910c06f0ca9905e$export$92aad1076056e17a as UNSTABLE_TableLoadingSentinel};
+export {$1910c06f0ca9905e$export$7063e69b8a954175 as ResizableTableContainer, $1910c06f0ca9905e$export$93e4b0b2cc49b648 as TableContext, $1910c06f0ca9905e$export$38de1cb0526c21fb as TableStateContext, $1910c06f0ca9905e$export$a2680a798823803c as TableColumnResizeStateContext, $1910c06f0ca9905e$export$54ec01a60f47d33d as Table, $1910c06f0ca9905e$export$fddc468cd8cb4db9 as useTableOptions, $1910c06f0ca9905e$export$f850895b287ef28e as TableHeader, $1910c06f0ca9905e$export$816b5d811295e6bc as Column, $1910c06f0ca9905e$export$ee689e97a7664bfd as ColumnResizer, $1910c06f0ca9905e$export$76ccd210b9029917 as TableBody, $1910c06f0ca9905e$export$b59bdbef9ce70de2 as Row, $1910c06f0ca9905e$export$f6f0c3fe4ec306ea as Cell, $1910c06f0ca9905e$export$8f5bea0338ed243c as TableLoadMoreItem};
 //# sourceMappingURL=Table.module.js.map