@multiplatform.one/table 6.7.0 → 7.0.0

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

@@ -60,7 +60,9 @@ var import_DataTableContext = require("./DataTableContext.cjs");
 var import_DataTableStateContext = require("./DataTableStateContext.cjs");
 var import_DataTableCardControls = require("./DataTableCardControls.cjs");
 var import_DataTableMobileCards = require("./DataTableMobileCards.cjs");
+var import_DataTableDocumentList = require("./DataTableDocumentList.cjs");
 var import_DataTableVirtualized = require("./DataTableVirtualized.cjs");
+var import_rowStateChrome = require("./rowStateChrome.cjs");
 var import_columnAlign = require("../../utils/columnAlign.cjs");
 var import_filterFields = require("../../utils/filterFields.cjs");
 var import_paginationDefaults = require("../../utils/paginationDefaults.cjs");
@@ -86,8 +88,11 @@ function DataTableRoot({
   data,
   columns,
   initialState,
+  controlledState,
   onStateChange,
   onRetry,
+  isLoading: isLoadingProp,
+  isFetching: isFetchingProp,
   syncWithUrl = false,
   urlDebounceMs = 500,
   urlStrategy,
@@ -154,7 +159,8 @@ function DataTableRoot({
   const {
     sm
   } = (0, import_tamagui.useMedia)();
-  const showCards = layout === "cards" || layout === "auto" && sm === false;
+  const showList = layout === "list";
+  const showCards = !showList && (layout === "cards" || layout === "auto" && sm === false);
   const {
     knobProps,
     disabledState
@@ -184,6 +190,7 @@ function DataTableRoot({
     data,
     columns,
     initialState,
+    controlledState,
     onStateChange,
     syncWithUrl,
     urlDebounceMs,
@@ -215,7 +222,9 @@ function DataTableRoot({
     enableKeyboardNavigation,
     enableRowSelection,
     rowCount,
-    pageCount
+    pageCount,
+    isLoading: isLoadingProp,
+    isFetching: isFetchingProp
   });
   const resolvedBulkActions = bulkActions ?? [];
   const selectAllChecked = enableRowSelection && (selectAllScope === "filtered" ? table.getIsAllRowsSelected() : table.getIsAllPageRowsSelected());
@@ -233,9 +242,15 @@ function DataTableRoot({
   const rowModelRows = table.getRowModel().rows;
   const infinite = computed.infinite;
   const tableRows = infinite ? rowModelRows.slice(0, infinite.visibleRowCount) : rowModelRows;
+  const heldRowsRef = (0, import_react2.useRef)(tableRows);
+  if (tableRows.length > 0) {
+    heldRowsRef.current = tableRows;
+  }
+  const queryInFlight = Boolean(state.isFetching || state.isPlaceholderData || infinite?.isAppending || state.isLoading || infinite?.isInitialLoading);
+  const displayRows = tableRows.length > 0 ? tableRows : queryInFlight && heldRowsRef.current.length > 0 ? heldRowsRef.current : tableRows;
   const footerGroups = table.getFooterGroups();
   const hasFooter = footerGroups.some(group => group.headers.some(header => header.column.columnDef.footer != null));
-  const allRowsLength = tableRows.length + headerGroups.length + (hasFooter ? footerGroups.length : 0);
+  const allRowsLength = displayRows.length + headerGroups.length + (hasFooter ? footerGroups.length : 0);
   const rowCounter = (0, import_react2.useRef)(-1);
   rowCounter.current = -1;
   const getColSizeProps = (0, import_react2.useCallback)(col => {
@@ -290,7 +305,7 @@ function DataTableRoot({
   const isVirtualized = enableVirtualization && virtualizationHeight != null && virtualizationHeight > 0 && import_tamagui.isWeb;
   const hasInfiniteTail = Boolean(infinite && !infinite.exhausted && tableRows.length > 0);
   const virtualizer = (0, import_react_virtual.useVirtualizer)({
-    count: tableRows.length + (hasInfiniteTail ? 1 : 0),
+    count: displayRows.length + (hasInfiniteTail ? 1 : 0),
     getScrollElement: () => bodyScrollRef.current,
     estimateSize: () => rowHeightPx,
     overscan: virtualizationOverscan,
@@ -376,10 +391,12 @@ function DataTableRoot({
       if (row.getCanExpand()) row.toggleExpanded();
     } : void 0
   });
+  const [focusedColIndex, setFocusedColIndex] = (0, import_react2.useState)(0);
   const isSSR = typeof window === "undefined";
   const rowPressActive = Boolean(onRowPress) && !disabled;
   const [rowPressAnchor, setRowPressAnchor] = (0, import_react2.useState)(0);
-  const effectiveRowPressAnchor = Math.min(rowPressAnchor, Math.max(tableRows.length - 1, 0));
+  const [rowPressHasFocus, setRowPressHasFocus] = (0, import_react2.useState)(false);
+  const effectiveRowPressAnchor = Math.min(rowPressAnchor, Math.max(displayRows.length - 1, 0));
   const deriveRowIdentity = (0, import_react2.useCallback)(row => {
     const fromAccessor = rowLabel?.(row.original);
     if (fromAccessor) return fromAccessor;
@@ -437,13 +454,18 @@ function DataTableRoot({
           outlineOffset: -2
         }),
         "data-row-press": "true",
+        "data-row-keyboard-focus": rowIndex === effectiveRowPressAnchor && rowPressHasFocus ? "true" : "false",
         onFocus: e => {
-          if (e.target === e.currentTarget) setRowPressAnchor(rowIndex);
+          if (e.target === e.currentTarget) {
+            setRowPressAnchor(rowIndex);
+            setRowPressHasFocus(true);
+          }
         },
         onBlur: e => {
           const next = e.relatedTarget;
           if (!(next instanceof Element) || !next.closest('[data-row-press="true"]')) {
             setRowPressAnchor(0);
+            setRowPressHasFocus(false);
           }
         },
         onKeyDown: e => {
@@ -471,7 +493,7 @@ function DataTableRoot({
         }
       } : {})
     };
-  }, [rowPressActive, deriveRowLabel, activateRowPress, effectiveRowPressAnchor, isSSR]);
+  }, [rowPressActive, deriveRowLabel, activateRowPress, effectiveRowPressAnchor, isSSR, rowPressHasFocus]);
   const handleCellChange = (0, import_react2.useCallback)(async (rowIndex, columnId, newValue) => {
     if (readOnly || disabled) return;
     const previousValue = data[rowIndex]?.[columnId];
@@ -556,6 +578,19 @@ function DataTableRoot({
   }, [handleCellChange, readOnly, disabled, knobProps.sizeToken, isCompact]);
   const extraColumnsBefore = (enableRowSelection ? 1 : 0) + (showRowNumbers ? 1 : 0) + (enableRowExpansion ? 1 : 0);
   const extraColumnsAfter = showDeleteRow && !readOnly ? 1 : 0;
+  const excelCellNav = enableKeyboardNavigation && !rowPressActive && !disabled;
+  const gridColCount = Math.max(table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter, 1);
+  const handleGridKeyDown = (0, import_react2.useCallback)(event => {
+    if (!enableKeyboardNavigation || disabled) return;
+    if (excelCellNav) {
+      if (event.key === "ArrowRight") {
+        setFocusedColIndex(i => Math.min(i + 1, gridColCount - 1));
+      } else if (event.key === "ArrowLeft") {
+        setFocusedColIndex(i => Math.max(i - 1, 0));
+      }
+    }
+    keyboardNav.handleKeyDown(event);
+  }, [disabled, enableKeyboardNavigation, excelCellNav, gridColCount, keyboardNav]);
   const getStickyStyle = (0, import_react2.useCallback)(columnId => {
     if (!enableColumnPinning || !pinning) return void 0;
     const colPinning = table.getState().columnPinning || {
@@ -609,9 +644,16 @@ function DataTableRoot({
     const cellRenderProps = cellElement ? {
       render: cellElement
     } : {};
+    let cellSlot = 0;
+    const cellNavProps = () => {
+      const 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",
@@ -633,6 +675,7 @@ function DataTableRoot({
         })
       }), showRowNumbers && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
         ...cellRenderProps,
+        ...cellNavProps(),
         cellWidth: 50,
         cellHeight,
         cellLocation: enableRowSelection ? "middle" : "first",
@@ -643,6 +686,7 @@ function DataTableRoot({
         })
       }), 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",
@@ -722,6 +766,7 @@ function DataTableRoot({
         });
         return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
           ...cellRenderProps,
+          ...cellNavProps(),
           ...cellFlexProps,
           ...getColSizeProps(cell.column),
           cellHeight,
@@ -748,6 +793,7 @@ function DataTableRoot({
         }, cell.id);
       }), showDeleteRow && !readOnly && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
         ...cellRenderProps,
+        ...cellNavProps(),
         cellWidth: 60,
         cellHeight,
         cellLocation: "last",
@@ -766,7 +812,7 @@ function DataTableRoot({
         })
       })]
     });
-  }, [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]);
   const [filterEditTarget, setFilterEditTarget] = (0, import_react2.useState)(null);
   const filterUi = (0, import_react2.useMemo)(() => ({
     editTarget: filterEditTarget,
@@ -792,7 +838,8 @@ function DataTableRoot({
         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, {
@@ -808,7 +855,8 @@ function DataTableRoot({
       enableGlobalSearch,
       enableFiltering,
       size: knobProps.sizeToken,
-      compact: isCompact
+      compact: isCompact,
+      isFetching: Boolean(state.isFetching)
     });
   };
   const renderPaginationComponent = () => {
@@ -849,12 +897,13 @@ function DataTableRoot({
         el.removeEventListener("scroll", update);
         ro?.disconnect();
       };
-    }, [tableRows.length, showCards]);
+    }, [displayRows.length, showCards]);
     (0, import_useDragScroll.useDragScroll)(scrollContainerRef, hScroll && !isSSR);
     const rangeTotal = state.pagination.totalCount ?? 0;
     const rangeStart = rangeTotal === 0 ? 0 : state.pagination.pageIndex * state.pagination.pageSize + 1;
     const rangeEnd = Math.min((state.pagination.pageIndex + 1) * state.pagination.pageSize, rangeTotal);
     const resolvedAriaLabel = ariaLabel || t("Data table");
+    const isRefetching = queryInFlight;
     if (state.error) {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.AsyncBoundary, {
         error: state.error,
@@ -865,7 +914,7 @@ function DataTableRoot({
         "aria-label": resolvedAriaLabel
       });
     }
-    if ((state.isLoading || infinite?.isInitialLoading) && tableRows.length === 0) {
+    if ((state.isLoading || infinite?.isInitialLoading) && displayRows.length === 0 && !state.isFetching && !state.isPlaceholderData) {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.AsyncBoundary, {
         loading: true,
         layout: "table",
@@ -892,6 +941,7 @@ function DataTableRoot({
           "aria-describedby": ariaDescribedBy,
           "aria-live": "polite",
           "aria-atomic": "false",
+          "aria-busy": isRefetching || void 0,
           "aria-disabled": disabled || void 0,
           ...(disabled ? {
             ...disabledState.assemblyKnobProps,
@@ -920,7 +970,19 @@ function DataTableRoot({
               showSelectionCount: true,
               placement: "top"
             })
-          }) : null, children, showCards ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+          }) : null, children, 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: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableCardControls.DataTableCardControls, {
               table,
               enableSorting,
@@ -929,7 +991,7 @@ function DataTableRoot({
               compact: isCompact,
               disabled
             }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableMobileCards.DataTableMobileCards, {
-              tableRows,
+              tableRows: displayRows,
               enableRowSelection,
               showRowNumbers,
               showDeleteRow,
@@ -945,6 +1007,7 @@ function DataTableRoot({
               onToggleSelectAll: toggleSelectAll,
               compact: isCompact,
               selectRowLabel: deriveSelectRowLabel,
+              queryInFlight,
               ...(rowPressActive ? {
                 getRowPressProps
               } : {})
@@ -974,7 +1037,10 @@ function DataTableRoot({
               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, {
@@ -1218,9 +1284,9 @@ function DataTableRoot({
                 ref: node => {
                   tableBodyRef.current = 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")
@@ -1246,7 +1312,7 @@ function DataTableRoot({
                       totalSize,
                       bodyScrollRef,
                       virtualizationHeight,
-                      tableRows,
+                      tableRows: displayRows,
                       headerGroups,
                       showRowNumbers,
                       enableRowExpansion,
@@ -1266,9 +1332,9 @@ function DataTableRoot({
                     })
                   })
                 }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-                  children: [tableRows.map((row, index) => {
+                  children: [displayRows.map((row, index) => {
                     rowCounter.current++;
-                    const isLastRow = index === tableRows.length - 1;
+                    const isLastRow = index === displayRows.length - 1;
                     if (enableGrouping && row.getIsGrouped?.()) {
                       const colSpan = table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter;
                       const indent = (row.depth ?? 0) * 16;
@@ -1315,13 +1381,15 @@ function DataTableRoot({
                       }, row.id);
                     }
                     const mainRow = /* @__PURE__ */(0, import_react3.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?.()),
+                        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}`,
@@ -1509,23 +1577,6 @@ function DataTableRoot({
                 total: rangeTotal
               }))
             })]
-          }), 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"
-            })
           })]
         })
       })