@multiplatform.one/table 6.7.0 → 7.1.0

package/dist/cjs/components/DataTable/DataTableRoot.native.js

@@ -64,7 +64,9 @@ var import_DataTableContext = require("./DataTableContext.native.js");
 var import_DataTableStateContext = require("./DataTableStateContext.native.js");
 var import_DataTableCardControls = require("./DataTableCardControls.native.js");
 var import_DataTableMobileCards = require("./DataTableMobileCards.native.js");
+var import_DataTableDocumentList = require("./DataTableDocumentList.native.js");
 var import_DataTableVirtualized = require("./DataTableVirtualized.native.js");
+var import_rowStateChrome = require("./rowStateChrome.native.js");
 var import_columnAlign = require("../../utils/columnAlign.native.js");
 var import_filterFields = require("../../utils/filterFields.native.js");
 var import_paginationDefaults = require("../../utils/paginationDefaults.native.js");
@@ -99,8 +101,11 @@ function DataTableRoot(param) {
     data,
     columns,
     initialState,
+    controlledState,
     onStateChange,
     onRetry,
+    isLoading: isLoadingProp,
+    isFetching: isFetchingProp,
     syncWithUrl = false,
     urlDebounceMs = 500,
     urlStrategy,
@@ -167,7 +172,8 @@ function DataTableRoot(param) {
   var {
     sm
   } = (0, import_tamagui.useMedia)();
-  var showCards = layout === "cards" || layout === "auto" && sm === false;
+  var showList = layout === "list";
+  var showCards = !showList && (layout === "cards" || layout === "auto" && sm === false);
   var {
     knobProps,
     disabledState
@@ -197,6 +203,7 @@ function DataTableRoot(param) {
     data,
     columns,
     initialState,
+    controlledState,
     onStateChange,
     syncWithUrl,
     urlDebounceMs,
@@ -228,7 +235,9 @@ function DataTableRoot(param) {
     enableKeyboardNavigation,
     enableRowSelection,
     rowCount,
-    pageCount
+    pageCount,
+    isLoading: isLoadingProp,
+    isFetching: isFetchingProp
   });
   var resolvedBulkActions = bulkActions !== null && bulkActions !== void 0 ? bulkActions : [];
   var selectAllChecked = enableRowSelection && (selectAllScope === "filtered" ? table.getIsAllRowsSelected() : table.getIsAllPageRowsSelected());
@@ -246,13 +255,19 @@ function DataTableRoot(param) {
   var rowModelRows = table.getRowModel().rows;
   var infinite = computed.infinite;
   var tableRows = infinite ? rowModelRows.slice(0, infinite.visibleRowCount) : rowModelRows;
+  var heldRowsRef = (0, import_react3.useRef)(tableRows);
+  if (tableRows.length > 0) {
+    heldRowsRef.current = tableRows;
+  }
+  var queryInFlight = Boolean(state.isFetching || state.isPlaceholderData || (infinite === null || infinite === void 0 ? void 0 : infinite.isAppending) || state.isLoading || (infinite === null || infinite === void 0 ? void 0 : infinite.isInitialLoading));
+  var displayRows = tableRows.length > 0 ? tableRows : queryInFlight && heldRowsRef.current.length > 0 ? heldRowsRef.current : tableRows;
   var footerGroups = table.getFooterGroups();
   var hasFooter = footerGroups.some(function (group) {
     return group.headers.some(function (header) {
       return header.column.columnDef.footer != null;
     });
   });
-  var allRowsLength = tableRows.length + headerGroups.length + (hasFooter ? footerGroups.length : 0);
+  var allRowsLength = displayRows.length + headerGroups.length + (hasFooter ? footerGroups.length : 0);
   var rowCounter = (0, import_react3.useRef)(-1);
   rowCounter.current = -1;
   var getColSizeProps = (0, import_react3.useCallback)(function (col) {
@@ -312,7 +327,7 @@ function DataTableRoot(param) {
   var isVirtualized = enableVirtualization && virtualizationHeight != null && virtualizationHeight > 0 && import_tamagui.isWeb;
   var hasInfiniteTail = Boolean(infinite && !infinite.exhausted && tableRows.length > 0);
   var virtualizer = (0, import_react_virtual.useVirtualizer)({
-    count: tableRows.length + (hasInfiniteTail ? 1 : 0),
+    count: displayRows.length + (hasInfiniteTail ? 1 : 0),
     getScrollElement: function getScrollElement() {
       return bodyScrollRef.current;
     },
@@ -435,10 +450,12 @@ function DataTableRoot(param) {
       if (row.getCanExpand()) row.toggleExpanded();
     } : void 0
   });
+  var [focusedColIndex, setFocusedColIndex] = (0, import_react3.useState)(0);
   var isSSR = typeof window === "undefined";
   var rowPressActive = Boolean(onRowPress) && !disabled;
   var [rowPressAnchor, setRowPressAnchor] = (0, import_react3.useState)(0);
-  var effectiveRowPressAnchor = Math.min(rowPressAnchor, Math.max(tableRows.length - 1, 0));
+  var [rowPressHasFocus, setRowPressHasFocus] = (0, import_react3.useState)(false);
+  var effectiveRowPressAnchor = Math.min(rowPressAnchor, Math.max(displayRows.length - 1, 0));
   var deriveRowIdentity = (0, import_react3.useCallback)(function (row) {
     var fromAccessor = rowLabel === null || rowLabel === void 0 ? void 0 : rowLabel(row.original);
     if (fromAccessor) return fromAccessor;
@@ -504,13 +521,18 @@ function DataTableRoot(param) {
           outlineOffset: -2
         }),
         "data-row-press": "true",
+        "data-row-keyboard-focus": rowIndex === effectiveRowPressAnchor && rowPressHasFocus ? "true" : "false",
         onFocus: function onFocus(e) {
-          if (e.target === e.currentTarget) setRowPressAnchor(rowIndex);
+          if (e.target === e.currentTarget) {
+            setRowPressAnchor(rowIndex);
+            setRowPressHasFocus(true);
+          }
         },
         onBlur: function onBlur(e) {
           var next = e.relatedTarget;
           if (!_instanceof(next, Element) || !next.closest('[data-row-press="true"]')) {
             setRowPressAnchor(0);
+            setRowPressHasFocus(false);
           }
         },
         onKeyDown: function onKeyDown(e) {
@@ -540,7 +562,7 @@ function DataTableRoot(param) {
         }
       } : {})
     };
-  }, [rowPressActive, deriveRowLabel, activateRowPress, effectiveRowPressAnchor, isSSR]);
+  }, [rowPressActive, deriveRowLabel, activateRowPress, effectiveRowPressAnchor, isSSR, rowPressHasFocus]);
   var handleCellChange = (0, import_react3.useCallback)(async function (rowIndex, columnId, newValue) {
     var _data_rowIndex;
     if (readOnly || disabled) return;
@@ -631,6 +653,23 @@ function DataTableRoot(param) {
   }, [handleCellChange, readOnly, disabled, knobProps.sizeToken, isCompact]);
   var extraColumnsBefore = (enableRowSelection ? 1 : 0) + (showRowNumbers ? 1 : 0) + (enableRowExpansion ? 1 : 0);
   var extraColumnsAfter = showDeleteRow && !readOnly ? 1 : 0;
+  var excelCellNav = enableKeyboardNavigation && !rowPressActive && !disabled;
+  var gridColCount = Math.max(table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter, 1);
+  var handleGridKeyDown = (0, import_react3.useCallback)(function (event) {
+    if (!enableKeyboardNavigation || disabled) return;
+    if (excelCellNav) {
+      if (event.key === "ArrowRight") {
+        setFocusedColIndex(function (i) {
+          return Math.min(i + 1, gridColCount - 1);
+        });
+      } else if (event.key === "ArrowLeft") {
+        setFocusedColIndex(function (i) {
+          return Math.max(i - 1, 0);
+        });
+      }
+    }
+    keyboardNav.handleKeyDown(event);
+  }, [disabled, enableKeyboardNavigation, excelCellNav, gridColCount, keyboardNav]);
   var getStickyStyle = (0, import_react3.useCallback)(function (columnId) {
     if (!enableColumnPinning || !pinning) return void 0;
     var colPinning = table.getState().columnPinning || {
@@ -684,9 +723,16 @@ function DataTableRoot(param) {
     var cellRenderProps = cellElement ? {
       render: cellElement
     } : {};
+    var cellSlot = 0;
+    var cellNavProps = function cellNavProps2() {
+      var slot = cellSlot++;
+      if (!excelCellNav || !keyboardNav.isNavigating) return {};
+      return (0, import_rowStateChrome.tableCellKeyboardProps)(rowIndex === keyboardNav.focusedRowIndex && slot === focusedColIndex);
+    };
     return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
       children: [enableRowSelection && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
         ...cellRenderProps,
+        ...cellNavProps(),
         cellWidth: SELECTION_COL_WIDTH,
         cellHeight,
         cellLocation: "first",
@@ -708,6 +754,7 @@ function DataTableRoot(param) {
         })
       }), showRowNumbers && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
         ...cellRenderProps,
+        ...cellNavProps(),
         cellWidth: 50,
         cellHeight,
         cellLocation: enableRowSelection ? "middle" : "first",
@@ -718,6 +765,7 @@ function DataTableRoot(param) {
         })
       }), enableRowExpansion && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
         ...cellRenderProps,
+        ...cellNavProps(),
         cellWidth: 32 + row.depth * 20,
         cellHeight,
         cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first",
@@ -799,6 +847,7 @@ function DataTableRoot(param) {
         });
         return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
           ...cellRenderProps,
+          ...cellNavProps(),
           ...cellFlexProps,
           ...getColSizeProps(cell.column),
           cellHeight,
@@ -825,6 +874,7 @@ function DataTableRoot(param) {
         }, cell.id);
       }), showDeleteRow && !readOnly && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
         ...cellRenderProps,
+        ...cellNavProps(),
         cellWidth: 60,
         cellHeight,
         cellLocation: "last",
@@ -845,7 +895,7 @@ function DataTableRoot(param) {
         })
       })]
     });
-  }, [enableRowSelection, showRowNumbers, enableRowExpansion, showDeleteRow, readOnly, disabled, cellHeight, knobProps.sizeToken, cellFlexProps, getColSizeProps, getStickyStyle, renderCellContent, handleDeleteRow, data.length, minRows, isCompact, t, deriveSelectRowLabel, ExpandCaretIcon, expandedCaretRotation, clipBodyCells]);
+  }, [enableRowSelection, showRowNumbers, enableRowExpansion, showDeleteRow, readOnly, disabled, cellHeight, knobProps.sizeToken, cellFlexProps, getColSizeProps, getStickyStyle, renderCellContent, handleDeleteRow, data.length, minRows, isCompact, t, deriveSelectRowLabel, ExpandCaretIcon, expandedCaretRotation, clipBodyCells, excelCellNav, keyboardNav.isNavigating, keyboardNav.focusedRowIndex, focusedColIndex]);
   var [filterEditTarget, setFilterEditTarget] = (0, import_react3.useState)(null);
   var filterUi = (0, import_react3.useMemo)(function () {
     return {
@@ -876,7 +926,8 @@ function DataTableRoot(param) {
         views: state.views,
         activeViewId: state.activeViewId,
         size: knobProps.sizeToken,
-        compact: isCompact
+        compact: isCompact,
+        isFetching: Boolean(state.isFetching)
       });
     }
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableToolbar.DataTableToolbar, {
@@ -892,7 +943,8 @@ function DataTableRoot(param) {
       enableGlobalSearch,
       enableFiltering,
       size: knobProps.sizeToken,
-      compact: isCompact
+      compact: isCompact,
+      isFetching: Boolean(state.isFetching)
     });
   };
   var renderPaginationComponent = function renderPaginationComponent2() {
@@ -935,12 +987,13 @@ function DataTableRoot(param) {
         el.removeEventListener("scroll", update);
         ro === null || ro === void 0 ? void 0 : ro.disconnect();
       };
-    }, [tableRows.length, showCards]);
+    }, [displayRows.length, showCards]);
     (0, import_useDragScroll.useDragScroll)(scrollContainerRef, hScroll && !isSSR);
     var rangeTotal = (_state_pagination_totalCount = state.pagination.totalCount) !== null && _state_pagination_totalCount !== void 0 ? _state_pagination_totalCount : 0;
     var rangeStart = rangeTotal === 0 ? 0 : state.pagination.pageIndex * state.pagination.pageSize + 1;
     var rangeEnd = Math.min((state.pagination.pageIndex + 1) * state.pagination.pageSize, rangeTotal);
     var resolvedAriaLabel = ariaLabel || t("Data table");
+    var isRefetching = queryInFlight;
     if (state.error) {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.AsyncBoundary, {
         error: state.error,
@@ -951,7 +1004,7 @@ function DataTableRoot(param) {
         "aria-label": resolvedAriaLabel
       });
     }
-    if ((state.isLoading || (infinite === null || infinite === void 0 ? void 0 : infinite.isInitialLoading)) && tableRows.length === 0) {
+    if ((state.isLoading || (infinite === null || infinite === void 0 ? void 0 : infinite.isInitialLoading)) && displayRows.length === 0 && !state.isFetching && !state.isPlaceholderData) {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.AsyncBoundary, {
         loading: true,
         layout: "table",
@@ -983,6 +1036,7 @@ function DataTableRoot(param) {
           "aria-describedby": ariaDescribedBy,
           "aria-live": "polite",
           "aria-atomic": "false",
+          "aria-busy": isRefetching || void 0,
           // UX-011 / Axiom 6 HONEST STATE: the advertised `disabled` prop
           // makes the whole assembly inert and says so. `inert` (React 19)
           // blocks pointer, keyboard, and AT for every control inside —
@@ -1029,7 +1083,19 @@ function DataTableRoot(param) {
             })
           }) : null, /* Compound sub-components (children) */
           children, /* Card List View (layout="cards" or auto below $sm) */
-          showCards ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+          showList ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableDocumentList.DataTableDocumentList, {
+            tableRows: displayRows,
+            enableRowSelection,
+            disabled,
+            hasActiveFilters: computed.hasActiveFilters,
+            renderCellContent,
+            compact: isCompact,
+            selectRowLabel: deriveSelectRowLabel,
+            queryInFlight,
+            ...(rowPressActive ? {
+              getRowPressProps
+            } : {})
+          }) : showCards ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
             children: [
             /* Header affordances (sort / per-column filter) live in the
             grid headers; the card list restores them here. */
@@ -1042,7 +1108,7 @@ function DataTableRoot(param) {
               compact: isCompact,
               disabled
             }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableMobileCards.DataTableMobileCards, {
-              tableRows,
+              tableRows: displayRows,
               enableRowSelection,
               showRowNumbers,
               showDeleteRow,
@@ -1058,6 +1124,7 @@ function DataTableRoot(param) {
               onToggleSelectAll: toggleSelectAll,
               compact: isCompact,
               selectRowLabel: deriveSelectRowLabel,
+              queryInFlight,
               ...(rowPressActive ? {
                 getRowPressProps
               } : {})
@@ -1097,7 +1164,10 @@ function DataTableRoot(param) {
               label: resolvedAriaLabel
             }),
             tabIndex: enableKeyboardNavigation && !isSSR ? 0 : void 0,
-            onKeyDown: enableKeyboardNavigation && !isSSR ? keyboardNav.handleKeyDown : void 0,
+            ...{
+              "data-table-grid": "true"
+            },
+            onKeyDown: enableKeyboardNavigation && !isSSR ? handleGridKeyDown : void 0,
             onPress: enableKeyboardNavigation && !isSSR ? keyboardNav.handleContainerClick : void 0,
             onBlur: enableKeyboardNavigation && !isSSR ? keyboardNav.handleContainerBlur : void 0,
             children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table_primitives.Table, {
@@ -1373,9 +1443,9 @@ function DataTableRoot(param) {
                 ref: function ref(node) {
                   tableBodyRef.current = node !== null && node !== void 0 ? node : null;
                 },
-                children: [tableRows.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
+                children: [displayRows.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
                   children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
-                    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
+                    children: isRefetching ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
                       compact: true,
                       "aria-live": "polite",
                       title: computed.hasActiveFilters ? t("No results found") : t("No data available")
@@ -1407,7 +1477,7 @@ function DataTableRoot(param) {
                       totalSize,
                       bodyScrollRef,
                       virtualizationHeight,
-                      tableRows,
+                      tableRows: displayRows,
                       headerGroups,
                       showRowNumbers,
                       enableRowExpansion,
@@ -1427,10 +1497,10 @@ function DataTableRoot(param) {
                     })
                   })
                 }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-                  children: [tableRows.map(function (row, index) {
-                    var _row_getIsGrouped, _row_subRows;
+                  children: [displayRows.map(function (row, index) {
+                    var _row_getIsGrouped, _row_getIsSelected, _row_subRows;
                     rowCounter.current++;
-                    var isLastRow = index === tableRows.length - 1;
+                    var isLastRow = index === displayRows.length - 1;
                     if (enableGrouping && ((_row_getIsGrouped = row.getIsGrouped) === null || _row_getIsGrouped === void 0 ? void 0 : _row_getIsGrouped.call(row))) {
                       var _row_depth, _row_groupingValue, _ref;
                       var _row_subRows1;
@@ -1483,13 +1553,15 @@ function DataTableRoot(param) {
                       }, row.id);
                     }
                     var mainRow = /* @__PURE__ */(0, import_react.createElement)(import_table_primitives.Table.Row, {
-                      backgroundColor: enableKeyboardNavigation && keyboardNav.isNavigating && index === keyboardNav.focusedRowIndex ? "$color4" : tableZebraOn && index % 2 === 1 ? "$color2" : "$color1",
+                      ...(0, import_rowStateChrome.tableRowStateProps)({
+                        selected: Boolean(enableRowSelection && ((_row_getIsSelected = row.getIsSelected) === null || _row_getIsSelected === void 0 ? void 0 : _row_getIsSelected.call(row))),
+                        keyboardFocused: false,
+                        zebraOn: tableZebraOn,
+                        index
+                      }),
                       ...{
                         animation: "quick"
                       },
-                      hoverStyle: {
-                        backgroundColor: "$color3"
-                      },
                       flexShrink: 0,
                       rowLocation: rowCounter.current === 0 ? "first" : rowCounter.current === allRowsLength - 1 ? "last" : "middle",
                       key: `${row.id}-${index}`,
@@ -1714,24 +1786,6 @@ function DataTableRoot(param) {
                 total: rangeTotal
               })))
             })]
-          }), /* Loading State */
-          state.isLoading && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            alignItems: "center",
-            justifyContent: "center",
-            zIndex: import_forms.zIndex.loading,
-            "aria-busy": true,
-            "aria-live": "assertive",
-            "aria-label": t("Loading table data"),
-            role: "status",
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Spinner, {
-              size: "large",
-              color: "$color10"
-            })
           })]
         })
       })