@multiplatform.one/table 7.34.4 → 7.35.0

package/dist/esm/components/DataTable/index.native.js

@@ -5,7 +5,7 @@ import { FlashList } from "@shopify/flash-list";
 import { AsyncBoundary, EmptyState, useDirection, ScrollView } from "@multiplatform.one/components";
 import { Button, Field, useFormField } from "@multiplatform.one/forms";
 import { flexRender } from "@tanstack/react-table";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeTokenStep, useResolvedKnobs, Surface } from "@multiplatform.one/theme";
 import React, { useRef, useMemo, useCallback } from "react";
 import { Text, View, useMedia, withStaticProperties } from "tamagui";
 import { useTranslation } from "react-i18next";
@@ -141,7 +141,6 @@ function DataTableRoot(param) {
     renderFilters,
     className: _className,
     size,
-    compact = false,
     disabled = false,
     accent,
     error,
@@ -172,7 +171,7 @@ function DataTableRoot(param) {
   } = useResolvedKnobs({
     intent,
     component: "DataTable",
-    compact
+    size
   });
   var chrome = dataTableChrome(String(knobProps.sizeToken));
   var bulkBarPlacement = knobProps.bulkBarPlacement === "bottom" ? "bottom" : "top";
@@ -243,8 +242,9 @@ function DataTableRoot(param) {
       table.toggleAllPageRowsSelected();
     }
   }, [selectAllScope, table]);
-  var resolvedSize = size !== null && size !== void 0 ? size : knobProps.sizeToken === "$3" ? "sm" : knobProps.sizeToken === "$5" ? "lg" : "md";
-  var cellHeight = resolvedSize === "sm" ? "$6" : resolvedSize === "lg" ? "$10" : "$8";
+  var resolvedSize = knobProps.sizeToken;
+  var sizeStep = sizeTokenStep(resolvedSize);
+  var cellHeight = sizeStep < 0 ? "$6" : sizeStep > 0 ? "$10" : "$8";
   var headerGroups = table.getHeaderGroups();
   var rowModelRows = table.getRowModel().rows;
   var infinite = computed.infinite;
@@ -328,7 +328,7 @@ function DataTableRoot(param) {
       }));
     }
   }, [readOnly, disabled, minRows, data, isFormMode, onDataChange]);
-  var isCompact = resolvedSize === "sm" || compact;
+  var tableSize = resolvedSize;
   var renderCellContent = useCallback(function (cell, rowIndex, rowData) {
     var columnDef = cell.column.columnDef;
     var columnId = cell.column.id;
@@ -578,7 +578,7 @@ function DataTableRoot(param) {
         onRetry: state.error ? onRetry : infinite === null || infinite === void 0 ? void 0 : infinite.retry,
         layout: "table",
         errorTitle: t("Couldn't load table"),
-        compact: true,
+        size: "$3",
         "aria-label": ariaLabel || "Data table"
       });
     }
@@ -591,7 +591,6 @@ function DataTableRoot(param) {
     }
     return /* @__PURE__ */_jsx(DataTableContext.Provider, {
       size: resolvedSize,
-      compact: isCompact,
       children: /* @__PURE__ */_jsx(DataTableStateContext.Provider, {
         value: stateContextValue,
         children: /* @__PURE__ */_jsxs(View, {
@@ -614,273 +613,286 @@ function DataTableRoot(param) {
             pointerEvents: "none"
           } : {}),
           ...props,
-          children: [(enableGlobalSearch || enableFiltering || enableViews) && /* @__PURE__ */_jsx(View, {
-            width: "100%",
-            ...(disabled ? disabledState.chromeKnobProps : {}),
-            children: renderToolbarComponent()
-          }), enableRowSelection && bulkBarPlacement === "top" ? /* @__PURE__ */_jsx(View, {
-            width: "100%",
-            ...(disabled ? disabledState.chromeKnobProps : {}),
-            children: /* @__PURE__ */_jsx(DataTableBulkActions, {
-              actions: resolvedBulkActions,
-              maxVisibleActions: 5,
-              showSelectionCount: true,
-              placement: "top"
-            })
-          }) : null, children, renderFilters === null || renderFilters === void 0 ? void 0 : renderFilters({
-            filters: state.filters || [],
-            onFiltersChange: actions.setFilters,
-            onAddFilter: actions.addFilter,
-            onRemoveFilter: actions.removeFilter,
-            onClearFilters: actions.clearFilters,
-            availableColumns: columns.map(function (col) {
-              return {
-                id: col.id || "",
-                label: typeof col.header === "string" ? col.header : col.id || "",
-                type: mapFieldToFilterType(col.field)
-              };
-            })
-          }), showList ? /* @__PURE__ */_jsx(DataTableDocumentList, {
-            tableRows: displayRows,
-            enableRowSelection,
-            disabled,
-            hasActiveFilters: computed.hasActiveFilters,
-            renderCellContent,
-            compact: isCompact,
-            selectRowLabel: deriveSelectRowLabel,
-            queryInFlight,
-            ...(rowPressActive ? {
-              getRowPressProps
-            } : {})
-          }) : showCards ? /* @__PURE__ */_jsxs(View, {
-            flexDirection: "column",
-            gap: "$2",
-            children: [/* @__PURE__ */_jsx(DataTableMobileCards, {
+          children: [/* @__PURE__ */_jsxs(Surface, {
+            size: tableSize,
+            children: [(enableGlobalSearch || enableFiltering || enableViews) && /* @__PURE__ */_jsx(View, {
+              width: "100%",
+              ...(disabled ? disabledState.chromeKnobProps : {}),
+              children: renderToolbarComponent()
+            }), enableRowSelection && bulkBarPlacement === "top" ? /* @__PURE__ */_jsx(View, {
+              width: "100%",
+              ...(disabled ? disabledState.chromeKnobProps : {}),
+              children: /* @__PURE__ */_jsx(DataTableBulkActions, {
+                actions: resolvedBulkActions,
+                maxVisibleActions: 5,
+                showSelectionCount: true,
+                placement: "top"
+              })
+            }) : null, children, renderFilters === null || renderFilters === void 0 ? void 0 : renderFilters({
+              filters: state.filters || [],
+              onFiltersChange: actions.setFilters,
+              onAddFilter: actions.addFilter,
+              onRemoveFilter: actions.removeFilter,
+              onClearFilters: actions.clearFilters,
+              availableColumns: columns.map(function (col) {
+                return {
+                  id: col.id || "",
+                  label: typeof col.header === "string" ? col.header : col.id || "",
+                  type: mapFieldToFilterType(col.field)
+                };
+              })
+            })]
+          }), showList ? /* @__PURE__ */_jsx(Surface, {
+            size: tableSize,
+            children: /* @__PURE__ */_jsx(DataTableDocumentList, {
               tableRows: displayRows,
               enableRowSelection,
-              showRowNumbers,
-              showDeleteRow,
-              readOnly,
               disabled,
-              dataLength: tableData.length,
-              minRows,
               hasActiveFilters: computed.hasActiveFilters,
               renderCellContent,
-              onDeleteRow: isFormMode ? effectiveHandleDeleteRow : handleDeleteRow,
-              selectAllChecked,
-              selectAllIndeterminate,
-              onToggleSelectAll: toggleSelectAll,
-              compact: isCompact,
               selectRowLabel: deriveSelectRowLabel,
               queryInFlight,
               ...(rowPressActive ? {
                 getRowPressProps
               } : {})
+            })
+          }) : showCards ? /* @__PURE__ */_jsxs(View, {
+            flexDirection: "column",
+            gap: "$2",
+            children: [/* @__PURE__ */_jsx(Surface, {
+              size: tableSize,
+              children: /* @__PURE__ */_jsx(DataTableMobileCards, {
+                tableRows: displayRows,
+                enableRowSelection,
+                showRowNumbers,
+                showDeleteRow,
+                readOnly,
+                disabled,
+                dataLength: tableData.length,
+                minRows,
+                hasActiveFilters: computed.hasActiveFilters,
+                renderCellContent,
+                onDeleteRow: isFormMode ? effectiveHandleDeleteRow : handleDeleteRow,
+                selectAllChecked,
+                selectAllIndeterminate,
+                onToggleSelectAll: toggleSelectAll,
+                selectRowLabel: deriveSelectRowLabel,
+                queryInFlight,
+                ...(rowPressActive ? {
+                  getRowPressProps
+                } : {})
+              })
             }), enablePagination && !infinite && /* @__PURE__ */_jsx(View, {
               width: "100%",
               ...(disabled ? disabledState.chromeKnobProps : {}),
               children: renderPaginationComponent()
             })]
-          }) : /* @__PURE__ */_jsx(ScrollView, {
-            horizontal: true,
-            maxWidth: "100%",
-            children: /* @__PURE__ */_jsx(View, {
-              flex: 1,
-              flexDirection: "column",
-              width: "100%",
-              paddingBottom: enablePagination ? "$10" : void 0,
-              "aria-label": `${ariaLabel || "Data table"} content`,
-              children: /* @__PURE__ */_jsxs(Table, {
-                alignCells: {
-                  x: "start",
-                  y: "center"
-                },
-                alignHeaderCells: {
-                  x: "start",
-                  y: "center"
-                },
-                cellHeight,
-                ...knobProps.borderRadiusOuter,
+          }) : /* @__PURE__ */_jsx(Surface, {
+            size: tableSize,
+            children: /* @__PURE__ */_jsx(ScrollView, {
+              horizontal: true,
+              maxWidth: "100%",
+              children: /* @__PURE__ */_jsx(View, {
+                flex: 1,
+                flexDirection: "column",
                 width: "100%",
-                "aria-label": ariaLabel || "Data table",
-                "aria-rowcount": computed.totalPages * state.pagination.pageSize,
-                "aria-colcount": table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter,
-                children: [/* @__PURE__ */_jsx(Table.Head, {
-                  zIndex: "$1",
-                  "aria-label": "Table headers",
-                  children: headerGroups.map(function (headerGroup, groupIndex) {
-                    return /* @__PURE__ */_jsxs(Table.Row, {
-                      backgroundColor: "$color2",
-                      rowLocation: groupIndex === 0 ? "first" : "middle",
-                      borderTopRightRadius: knobProps.borderRadiusOuter.borderRadius,
-                      borderTopLeftRadius: knobProps.borderRadiusOuter.borderRadius,
-                      borderBottomLeftRadius: "$0",
-                      borderBottomRightRadius: "$0",
-                      "aria-rowindex": groupIndex,
-                      children: [showRowNumbers && /* @__PURE__ */_jsx(Table.HeaderCell, {
-                        cellWidth: chrome.rowNumberCol,
-                        cellHeight,
-                        children: /* @__PURE__ */_jsx(Text, {
-                          fontSize: knobProps.sizeToken,
-                          fontWeight: "600",
-                          children: "#"
-                        })
-                      }), enableRowExpansion && /* @__PURE__ */_jsx(Table.HeaderCell, {
-                        cellWidth: chrome.expandCol,
-                        cellHeight,
-                        children: /* @__PURE__ */_jsx(View, {
-                          width: chrome.iconPx
-                        })
-                      }), headerGroup.headers.map(function (header, headerIndex) {
-                        var isSortableHeader = header.column.getCanSort();
-                        var sortDirection = header.column.getIsSorted();
-                        var isLastHeader = headerIndex === headerGroup.headers.length - 1 && !showDeleteRow;
-                        return /* @__PURE__ */_jsx(Table.HeaderCell, {
-                          id: `${header.column.id}-header`,
-                          onPress: isSortableHeader && !disabled ? header.column.getToggleSortingHandler() : void 0,
-                          cursor: disabled ? "not-allowed" : isSortableHeader ? "pointer" : "default",
-                          position: "relative",
-                          "aria-sort": isSortableHeader ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0,
-                          ...getColSizeProps(header.column, isLastHeader),
-                          children: /* @__PURE__ */_jsxs(View, {
-                            flexDirection: "row",
-                            gap: "$2",
-                            alignItems: "center",
-                            justifyContent: "flex-start",
-                            flex: 1,
-                            children: [/* @__PURE__ */_jsx(Text, {
-                              fontSize: knobProps.sizeToken,
-                              selectable: false,
-                              userSelect: "none",
-                              children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
-                            }), isSortableHeader && /* @__PURE__ */_jsxs(Text, {
-                              "aria-hidden": true,
-                              role: "presentation",
-                              color: sortDirection ? "$color10" : "$color8",
-                              children: [sortDirection === "asc" && /* @__PURE__ */_jsx(CaretDownIcon, {
-                                size: chrome.iconPx
-                              }), sortDirection === "desc" && /* @__PURE__ */_jsx(CaretDownIcon, {
-                                size: chrome.iconPx,
-                                style: {
-                                  transform: "rotate(180deg)"
-                                }
-                              }), sortDirection === false && /* @__PURE__ */_jsx(CaretUpDownIcon, {
-                                size: chrome.iconPx
-                              })]
-                            }), pinning && /* @__PURE__ */_jsx(View, {
-                              flexDirection: "row",
-                              gap: "$1",
-                              children: (
-                              /* One compact cycle control (left →
-                              right → unpin) mirrors web. */
-                              /* @__PURE__ */
-                              _jsx(pinning.PinButton, {
-                                columnId: header.column.id
-                              }))
-                            })]
+                paddingBottom: enablePagination ? "$10" : void 0,
+                "aria-label": `${ariaLabel || "Data table"} content`,
+                children: /* @__PURE__ */_jsxs(Table, {
+                  alignCells: {
+                    x: "start",
+                    y: "center"
+                  },
+                  alignHeaderCells: {
+                    x: "start",
+                    y: "center"
+                  },
+                  cellHeight,
+                  ...knobProps.borderRadiusOuter,
+                  width: "100%",
+                  "aria-label": ariaLabel || "Data table",
+                  "aria-rowcount": computed.totalPages * state.pagination.pageSize,
+                  "aria-colcount": table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter,
+                  children: [/* @__PURE__ */_jsx(Table.Head, {
+                    zIndex: "$1",
+                    "aria-label": "Table headers",
+                    children: headerGroups.map(function (headerGroup, groupIndex) {
+                      return /* @__PURE__ */_jsxs(Table.Row, {
+                        backgroundColor: "$color2",
+                        rowLocation: groupIndex === 0 ? "first" : "middle",
+                        borderTopRightRadius: knobProps.borderRadiusOuter.borderRadius,
+                        borderTopLeftRadius: knobProps.borderRadiusOuter.borderRadius,
+                        borderBottomLeftRadius: "$0",
+                        borderBottomRightRadius: "$0",
+                        "aria-rowindex": groupIndex,
+                        children: [showRowNumbers && /* @__PURE__ */_jsx(Table.HeaderCell, {
+                          cellWidth: chrome.rowNumberCol,
+                          cellHeight,
+                          children: /* @__PURE__ */_jsx(Text, {
+                            fontSize: knobProps.sizeToken,
+                            fontWeight: "600",
+                            children: "#"
                           })
-                        }, header.id);
-                      }), showDeleteRow && !readOnly && /* @__PURE__ */_jsx(Table.HeaderCell, {
-                        cellWidth: chrome.deleteCol,
-                        cellHeight,
-                        cellLocation: "last"
-                      })]
-                    }, headerGroup.id);
-                  })
-                }), /* @__PURE__ */_jsx(Table.Body, {
-                  "aria-label": "Table data",
-                  children: displayRows.length === 0 ? /* @__PURE__ */_jsx(Table.Row, {
-                    children: /* @__PURE__ */_jsx(Table.Cell, {
-                      children: queryInFlight ? null : /* @__PURE__ */_jsx(EmptyState, {
-                        compact: true,
-                        "aria-live": "polite",
-                        title: computed.hasActiveFilters ? t("No results found") : t("No data available")
-                      })
-                    })
-                  }) : isVirtualized ? /* @__PURE__ */_jsx(View, {
-                    style: {
-                      height: virtualizationHeight
-                    },
-                    children: /* @__PURE__ */_jsx(FlashList, {
-                      keyboardShouldPersistTaps: "handled",
-                      ref: flashListRef,
-                      data: displayRows,
-                      drawDistance: rowHeightPx * virtualizationOverscan,
-                      keyExtractor: function keyExtractor(row) {
-                        return row.id;
-                      },
-                      renderItem: function renderItem(param2) {
-                        var {
-                          item,
-                          index
-                        } = param2;
-                        return renderRow(item, index);
-                      },
-                      ...(infinite && !infinite.exhausted ? {
-                        onEndReached: infinite.loadMore,
-                        onEndReachedThreshold: INFINITE_TRIGGER_ROWS * rowHeightPx / virtualizationHeight
-                      } : {})
+                        }), enableRowExpansion && /* @__PURE__ */_jsx(Table.HeaderCell, {
+                          cellWidth: chrome.expandCol,
+                          cellHeight,
+                          children: /* @__PURE__ */_jsx(View, {
+                            width: chrome.iconPx
+                          })
+                        }), headerGroup.headers.map(function (header, headerIndex) {
+                          var isSortableHeader = header.column.getCanSort();
+                          var sortDirection = header.column.getIsSorted();
+                          var isLastHeader = headerIndex === headerGroup.headers.length - 1 && !showDeleteRow;
+                          return /* @__PURE__ */_jsx(Table.HeaderCell, {
+                            id: `${header.column.id}-header`,
+                            onPress: isSortableHeader && !disabled ? header.column.getToggleSortingHandler() : void 0,
+                            cursor: disabled ? "not-allowed" : isSortableHeader ? "pointer" : "default",
+                            position: "relative",
+                            "aria-sort": isSortableHeader ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0,
+                            ...getColSizeProps(header.column, isLastHeader),
+                            children: /* @__PURE__ */_jsxs(View, {
+                              flexDirection: "row",
+                              gap: "$2",
+                              alignItems: "center",
+                              justifyContent: "flex-start",
+                              flex: 1,
+                              children: [/* @__PURE__ */_jsx(Text, {
+                                fontSize: knobProps.sizeToken,
+                                selectable: false,
+                                userSelect: "none",
+                                children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+                              }), isSortableHeader && /* @__PURE__ */_jsxs(Text, {
+                                "aria-hidden": true,
+                                role: "presentation",
+                                color: sortDirection ? "$color10" : "$color8",
+                                children: [sortDirection === "asc" && /* @__PURE__ */_jsx(CaretDownIcon, {
+                                  size: chrome.iconPx
+                                }), sortDirection === "desc" && /* @__PURE__ */_jsx(CaretDownIcon, {
+                                  size: chrome.iconPx,
+                                  style: {
+                                    transform: "rotate(180deg)"
+                                  }
+                                }), sortDirection === false && /* @__PURE__ */_jsx(CaretUpDownIcon, {
+                                  size: chrome.iconPx
+                                })]
+                              }), pinning && /* @__PURE__ */_jsx(View, {
+                                flexDirection: "row",
+                                gap: "$1",
+                                children: (
+                                /* One compact cycle control (left →
+                                right → unpin) mirrors web. */
+                                /* @__PURE__ */
+                                _jsx(pinning.PinButton, {
+                                  columnId: header.column.id
+                                }))
+                              })]
+                            })
+                          }, header.id);
+                        }), showDeleteRow && !readOnly && /* @__PURE__ */_jsx(Table.HeaderCell, {
+                          cellWidth: chrome.deleteCol,
+                          cellHeight,
+                          cellLocation: "last"
+                        })]
+                      }, headerGroup.id);
                     })
-                  }) : displayRows.map(function (row, index) {
-                    var _row_subRows;
-                    var mainRow = renderRow(row, index);
-                    var subRow = enableRowExpansion && renderSubComponent && row.getIsExpanded() && !((_row_subRows = row.subRows) === null || _row_subRows === void 0 ? void 0 : _row_subRows.length) ? /* @__PURE__ */_jsx(Table.Row, {
-                      backgroundColor: "$color2",
+                  }), /* @__PURE__ */_jsx(Table.Body, {
+                    "aria-label": "Table data",
+                    children: displayRows.length === 0 ? /* @__PURE__ */_jsx(Table.Row, {
                       children: /* @__PURE__ */_jsx(Table.Cell, {
-                        ...{
-                          colSpan: table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter
-                        },
-                        children: renderSubComponent(row)
+                        children: queryInFlight ? null : /* @__PURE__ */_jsx(EmptyState, {
+                          size: "$3",
+                          "aria-live": "polite",
+                          title: computed.hasActiveFilters ? t("No results found") : t("No data available")
+                        })
                       })
-                    }, `${row.id}-sub`) : null;
-                    return /* @__PURE__ */_jsxs(React.Fragment, {
-                      children: [mainRow, subRow]
-                    }, row.id);
-                  })
-                }), footerGroups.length > 0 && /* @__PURE__ */_jsx(Table.Foot, {
-                  children: footerGroups.map(function (footerGroup) {
-                    return /* @__PURE__ */_jsx(Table.Row, {
-                      children: footerGroup.headers.map(function (header) {
-                        return /* @__PURE__ */_jsx(Table.Cell, {
-                          children: header.isPlaceholder ? null : /* @__PURE__ */_jsx(NativeCellContent, {
-                            cellDef: header.column.columnDef.footer,
-                            ctx: header.getContext()
-                          })
-                        }, header.id);
+                    }) : isVirtualized ? /* @__PURE__ */_jsx(View, {
+                      style: {
+                        height: virtualizationHeight
+                      },
+                      children: /* @__PURE__ */_jsx(FlashList, {
+                        keyboardShouldPersistTaps: "handled",
+                        ref: flashListRef,
+                        data: displayRows,
+                        drawDistance: rowHeightPx * virtualizationOverscan,
+                        keyExtractor: function keyExtractor(row) {
+                          return row.id;
+                        },
+                        renderItem: function renderItem(param2) {
+                          var {
+                            item,
+                            index
+                          } = param2;
+                          return renderRow(item, index);
+                        },
+                        ...(infinite && !infinite.exhausted ? {
+                          onEndReached: infinite.loadMore,
+                          onEndReachedThreshold: INFINITE_TRIGGER_ROWS * rowHeightPx / virtualizationHeight
+                        } : {})
                       })
-                    }, footerGroup.id);
-                  })
-                })]
+                    }) : displayRows.map(function (row, index) {
+                      var _row_subRows;
+                      var mainRow = renderRow(row, index);
+                      var subRow = enableRowExpansion && renderSubComponent && row.getIsExpanded() && !((_row_subRows = row.subRows) === null || _row_subRows === void 0 ? void 0 : _row_subRows.length) ? /* @__PURE__ */_jsx(Table.Row, {
+                        backgroundColor: "$color2",
+                        children: /* @__PURE__ */_jsx(Table.Cell, {
+                          ...{
+                            colSpan: table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter
+                          },
+                          children: renderSubComponent(row)
+                        })
+                      }, `${row.id}-sub`) : null;
+                      return /* @__PURE__ */_jsxs(React.Fragment, {
+                        children: [mainRow, subRow]
+                      }, row.id);
+                    })
+                  }), footerGroups.length > 0 && /* @__PURE__ */_jsx(Table.Foot, {
+                    children: footerGroups.map(function (footerGroup) {
+                      return /* @__PURE__ */_jsx(Table.Row, {
+                        children: footerGroup.headers.map(function (header) {
+                          return /* @__PURE__ */_jsx(Table.Cell, {
+                            children: header.isPlaceholder ? null : /* @__PURE__ */_jsx(NativeCellContent, {
+                              cellDef: header.column.columnDef.footer,
+                              ctx: header.getContext()
+                            })
+                          }, header.id);
+                        })
+                      }, footerGroup.id);
+                    })
+                  })]
+                })
               })
             })
-          }), infinite ? /* @__PURE__ */_jsx(DataTableInfiniteTail, {
-            infinite,
-            visibleCount: tableRows.length,
-            showAppendSkeleton: !isVirtualGrid,
-            rowHeightPx,
-            fontSize: knobProps.sizeToken,
-            gapProps: knobProps.gap,
-            sentinel: !isVirtualGrid && !infinite.exhausted && !infinite.appendError ? /* @__PURE__ */_jsx(NativeInfiniteSentinel, {
-              onVisible: infinite.loadMore,
-              leadPx: INFINITE_TRIGGER_ROWS * rowHeightPx
-            }) : null
-          }) : null, enableRowSelection && bulkBarPlacement === "bottom" ? /* @__PURE__ */_jsx(View, {
-            width: "100%",
-            ...(disabled ? disabledState.chromeKnobProps : {}),
-            children: /* @__PURE__ */_jsx(DataTableBulkActions, {
-              actions: resolvedBulkActions,
-              maxVisibleActions: 5,
-              showSelectionCount: true,
-              placement: "bottom"
-            })
-          }) : null, showAddRow && !readOnly && /* @__PURE__ */_jsx(View, {
-            children: /* @__PURE__ */_jsx(Button, {
-              icon: PlusIcon,
-              disabled: disabled || maxRows !== void 0 && tableData.length >= maxRows,
-              onPress: isFormMode ? effectiveHandleAddRow : handleAddRow,
-              "aria-label": t("Add Row"),
-              children: t("Add Row")
-            })
+          }), /* @__PURE__ */_jsxs(Surface, {
+            size: tableSize,
+            children: [infinite ? /* @__PURE__ */_jsx(DataTableInfiniteTail, {
+              infinite,
+              visibleCount: tableRows.length,
+              showAppendSkeleton: !isVirtualGrid,
+              rowHeightPx,
+              fontSize: knobProps.sizeToken,
+              gapProps: knobProps.gap,
+              sentinel: !isVirtualGrid && !infinite.exhausted && !infinite.appendError ? /* @__PURE__ */_jsx(NativeInfiniteSentinel, {
+                onVisible: infinite.loadMore,
+                leadPx: INFINITE_TRIGGER_ROWS * rowHeightPx
+              }) : null
+            }) : null, enableRowSelection && bulkBarPlacement === "bottom" ? /* @__PURE__ */_jsx(View, {
+              width: "100%",
+              ...(disabled ? disabledState.chromeKnobProps : {}),
+              children: /* @__PURE__ */_jsx(DataTableBulkActions, {
+                actions: resolvedBulkActions,
+                maxVisibleActions: 5,
+                showSelectionCount: true,
+                placement: "bottom"
+              })
+            }) : null, showAddRow && !readOnly && /* @__PURE__ */_jsx(View, {
+              children: /* @__PURE__ */_jsx(Button, {
+                icon: PlusIcon,
+                disabled: disabled || maxRows !== void 0 && tableData.length >= maxRows,
+                onPress: isFormMode ? effectiveHandleAddRow : handleAddRow,
+                "aria-label": t("Add Row"),
+                children: t("Add Row")
+              })
+            })]
           }), !showCards && enablePagination && !infinite && /* @__PURE__ */_jsx(View, {
             width: "100%",
             ...(disabled ? disabledState.chromeKnobProps : {}),
@@ -889,7 +901,7 @@ function DataTableRoot(param) {
         })
       })
     });
-  }, [resolvedSize, isCompact, stateContextValue, ariaLabel, ariaDescribedBy, knobProps, props, enableGlobalSearch, enableFiltering, enableViews, renderToolbarComponent, children, renderFilters, state, actions, columns, cellHeight, enablePagination, computed, table, extraColumnsBefore, extraColumnsAfter, headerGroups, showRowNumbers, enableRowExpansion, showDeleteRow, readOnly, getColSizeProps, pinning, tableRows, isVirtualized, virtualizationHeight, virtualizationOverscan, renderRow, renderSubComponent, footerGroups, sm, showList, showCards, renderPaginationComponent, showAddRow, maxRows, isFormMode, handleAddRow, handleDeleteRow, minRows, defaultRow, disabled, disabledState, renderCellContent, rowPressActive, getRowPressProps, enableRowSelection, selectAllChecked, selectAllIndeterminate, toggleSelectAll, deriveSelectRowLabel, displayRows, queryInFlight, infinite, isVirtualGrid, rowHeightPx, bulkBarPlacement, resolvedBulkActions, t]);
+  }, [resolvedSize, stateContextValue, ariaLabel, ariaDescribedBy, knobProps, props, enableGlobalSearch, enableFiltering, enableViews, renderToolbarComponent, children, renderFilters, state, actions, columns, cellHeight, enablePagination, computed, table, extraColumnsBefore, extraColumnsAfter, headerGroups, showRowNumbers, enableRowExpansion, showDeleteRow, readOnly, getColSizeProps, pinning, tableRows, isVirtualized, virtualizationHeight, virtualizationOverscan, renderRow, renderSubComponent, footerGroups, sm, showList, showCards, renderPaginationComponent, showAddRow, maxRows, isFormMode, handleAddRow, handleDeleteRow, minRows, defaultRow, disabled, disabledState, renderCellContent, rowPressActive, getRowPressProps, enableRowSelection, selectAllChecked, selectAllIndeterminate, toggleSelectAll, deriveSelectRowLabel, displayRows, queryInFlight, infinite, isVirtualGrid, rowHeightPx, bulkBarPlacement, resolvedBulkActions, t]);
   if (isFormMode) {
     return /* @__PURE__ */_jsx(Field, {
       form: resolvedForm,