@multiplatform.one/table 6.7.0 → 7.0.0

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpDownIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
-import { Button, Checkbox, Field, Spinner, useFormField, zIndex } from "@multiplatform.one/forms";
+import { Button, Checkbox, Field, useFormField } from "@multiplatform.one/forms";
 import { flexRender } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
@@ -24,7 +24,9 @@ import { DataTableContext } from "./DataTableContext.native.js";
 import { DataTableStateContext } from "./DataTableStateContext.native.js";
 import { DataTableCardControls } from "./DataTableCardControls.native.js";
 import { DataTableMobileCards } from "./DataTableMobileCards.native.js";
+import { DataTableDocumentList } from "./DataTableDocumentList.native.js";
 import { DataTableVirtualized } from "./DataTableVirtualized.native.js";
+import { tableCellKeyboardProps, tableRowStateProps } from "./rowStateChrome.native.js";
 import { alignToFlex, getDefaultColumnAlign } from "../../utils/columnAlign.native.js";
 import { mapFieldToFilterType } from "../../utils/filterFields.native.js";
 import { INFINITE_TRIGGER_ROWS } from "../../utils/paginationDefaults.native.js";
@@ -59,8 +61,11 @@ function DataTableRoot(param) {
     data,
     columns,
     initialState,
+    controlledState,
     onStateChange,
     onRetry,
+    isLoading: isLoadingProp,
+    isFetching: isFetchingProp,
     syncWithUrl = false,
     urlDebounceMs = 500,
     urlStrategy,
@@ -127,7 +132,8 @@ function DataTableRoot(param) {
   var {
     sm
   } = 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
@@ -157,6 +163,7 @@ function DataTableRoot(param) {
     data,
     columns,
     initialState,
+    controlledState,
     onStateChange,
     syncWithUrl,
     urlDebounceMs,
@@ -188,7 +195,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());
@@ -206,13 +215,19 @@ function DataTableRoot(param) {
   var rowModelRows = table.getRowModel().rows;
   var infinite = computed.infinite;
   var tableRows = infinite ? rowModelRows.slice(0, infinite.visibleRowCount) : rowModelRows;
+  var heldRowsRef = 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 = useRef(-1);
   rowCounter.current = -1;
   var getColSizeProps = useCallback(function (col) {
@@ -272,7 +287,7 @@ function DataTableRoot(param) {
   var isVirtualized = enableVirtualization && virtualizationHeight != null && virtualizationHeight > 0 && isWeb;
   var hasInfiniteTail = Boolean(infinite && !infinite.exhausted && tableRows.length > 0);
   var virtualizer = useVirtualizer({
-    count: tableRows.length + (hasInfiniteTail ? 1 : 0),
+    count: displayRows.length + (hasInfiniteTail ? 1 : 0),
     getScrollElement: function getScrollElement() {
       return bodyScrollRef.current;
     },
@@ -395,10 +410,12 @@ function DataTableRoot(param) {
       if (row.getCanExpand()) row.toggleExpanded();
     } : void 0
   });
+  var [focusedColIndex, setFocusedColIndex] = useState(0);
   var isSSR = typeof window === "undefined";
   var rowPressActive = Boolean(onRowPress) && !disabled;
   var [rowPressAnchor, setRowPressAnchor] = useState(0);
-  var effectiveRowPressAnchor = Math.min(rowPressAnchor, Math.max(tableRows.length - 1, 0));
+  var [rowPressHasFocus, setRowPressHasFocus] = useState(false);
+  var effectiveRowPressAnchor = Math.min(rowPressAnchor, Math.max(displayRows.length - 1, 0));
   var deriveRowIdentity = useCallback(function (row) {
     var fromAccessor = rowLabel === null || rowLabel === void 0 ? void 0 : rowLabel(row.original);
     if (fromAccessor) return fromAccessor;
@@ -464,13 +481,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) {
@@ -500,7 +522,7 @@ function DataTableRoot(param) {
         }
       } : {})
     };
-  }, [rowPressActive, deriveRowLabel, activateRowPress, effectiveRowPressAnchor, isSSR]);
+  }, [rowPressActive, deriveRowLabel, activateRowPress, effectiveRowPressAnchor, isSSR, rowPressHasFocus]);
   var handleCellChange = useCallback(async function (rowIndex, columnId, newValue) {
     var _data_rowIndex;
     if (readOnly || disabled) return;
@@ -591,6 +613,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 = 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 = useCallback(function (columnId) {
     if (!enableColumnPinning || !pinning) return void 0;
     var colPinning = table.getState().columnPinning || {
@@ -644,9 +683,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 tableCellKeyboardProps(rowIndex === keyboardNav.focusedRowIndex && slot === focusedColIndex);
+    };
     return /* @__PURE__ */_jsxs(_Fragment, {
       children: [enableRowSelection && /* @__PURE__ */_jsx(Table.Cell, {
         ...cellRenderProps,
+        ...cellNavProps(),
         cellWidth: SELECTION_COL_WIDTH,
         cellHeight,
         cellLocation: "first",
@@ -668,6 +714,7 @@ function DataTableRoot(param) {
         })
       }), showRowNumbers && /* @__PURE__ */_jsx(Table.Cell, {
         ...cellRenderProps,
+        ...cellNavProps(),
         cellWidth: 50,
         cellHeight,
         cellLocation: enableRowSelection ? "middle" : "first",
@@ -678,6 +725,7 @@ function DataTableRoot(param) {
         })
       }), enableRowExpansion && /* @__PURE__ */_jsx(Table.Cell, {
         ...cellRenderProps,
+        ...cellNavProps(),
         cellWidth: 32 + row.depth * 20,
         cellHeight,
         cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first",
@@ -759,6 +807,7 @@ function DataTableRoot(param) {
         });
         return /* @__PURE__ */_jsx(Table.Cell, {
           ...cellRenderProps,
+          ...cellNavProps(),
           ...cellFlexProps,
           ...getColSizeProps(cell.column),
           cellHeight,
@@ -785,6 +834,7 @@ function DataTableRoot(param) {
         }, cell.id);
       }), showDeleteRow && !readOnly && /* @__PURE__ */_jsx(Table.Cell, {
         ...cellRenderProps,
+        ...cellNavProps(),
         cellWidth: 60,
         cellHeight,
         cellLocation: "last",
@@ -805,7 +855,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] = useState(null);
   var filterUi = useMemo(function () {
     return {
@@ -836,7 +886,8 @@ function DataTableRoot(param) {
         views: state.views,
         activeViewId: state.activeViewId,
         size: knobProps.sizeToken,
-        compact: isCompact
+        compact: isCompact,
+        isFetching: Boolean(state.isFetching)
       });
     }
     return /* @__PURE__ */_jsx(DataTableToolbar, {
@@ -852,7 +903,8 @@ function DataTableRoot(param) {
       enableGlobalSearch,
       enableFiltering,
       size: knobProps.sizeToken,
-      compact: isCompact
+      compact: isCompact,
+      isFetching: Boolean(state.isFetching)
     });
   };
   var renderPaginationComponent = function renderPaginationComponent2() {
@@ -895,12 +947,13 @@ function DataTableRoot(param) {
         el.removeEventListener("scroll", update);
         ro === null || ro === void 0 ? void 0 : ro.disconnect();
       };
-    }, [tableRows.length, showCards]);
+    }, [displayRows.length, showCards]);
     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__ */_jsx(AsyncBoundary, {
         error: state.error,
@@ -911,7 +964,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__ */_jsx(AsyncBoundary, {
         loading: true,
         layout: "table",
@@ -943,6 +996,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 —
@@ -989,7 +1043,19 @@ function DataTableRoot(param) {
             })
           }) : null, /* Compound sub-components (children) */
           children, /* Card List View (layout="cards" or auto below $sm) */
-          showCards ? /* @__PURE__ */_jsxs(_Fragment, {
+          showList ? /* @__PURE__ */_jsx(DataTableDocumentList, {
+            tableRows: displayRows,
+            enableRowSelection,
+            disabled,
+            hasActiveFilters: computed.hasActiveFilters,
+            renderCellContent,
+            compact: isCompact,
+            selectRowLabel: deriveSelectRowLabel,
+            queryInFlight,
+            ...(rowPressActive ? {
+              getRowPressProps
+            } : {})
+          }) : showCards ? /* @__PURE__ */_jsxs(_Fragment, {
             children: [
             /* Header affordances (sort / per-column filter) live in the
             grid headers; the card list restores them here. */
@@ -1002,7 +1068,7 @@ function DataTableRoot(param) {
               compact: isCompact,
               disabled
             }), /* @__PURE__ */_jsx(DataTableMobileCards, {
-              tableRows,
+              tableRows: displayRows,
               enableRowSelection,
               showRowNumbers,
               showDeleteRow,
@@ -1018,6 +1084,7 @@ function DataTableRoot(param) {
               onToggleSelectAll: toggleSelectAll,
               compact: isCompact,
               selectRowLabel: deriveSelectRowLabel,
+              queryInFlight,
               ...(rowPressActive ? {
                 getRowPressProps
               } : {})
@@ -1057,7 +1124,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__ */_jsxs(Table, {
@@ -1333,9 +1403,9 @@ function DataTableRoot(param) {
                 ref: function ref(node) {
                   tableBodyRef.current = node !== null && node !== void 0 ? node : null;
                 },
-                children: [tableRows.length === 0 ? /* @__PURE__ */_jsx(Table.Row, {
+                children: [displayRows.length === 0 ? /* @__PURE__ */_jsx(Table.Row, {
                   children: /* @__PURE__ */_jsx(Table.Cell, {
-                    children: /* @__PURE__ */_jsx(EmptyState, {
+                    children: isRefetching ? null : /* @__PURE__ */_jsx(EmptyState, {
                       compact: true,
                       "aria-live": "polite",
                       title: computed.hasActiveFilters ? t("No results found") : t("No data available")
@@ -1367,7 +1437,7 @@ function DataTableRoot(param) {
                       totalSize,
                       bodyScrollRef,
                       virtualizationHeight,
-                      tableRows,
+                      tableRows: displayRows,
                       headerGroups,
                       showRowNumbers,
                       enableRowExpansion,
@@ -1387,10 +1457,10 @@ function DataTableRoot(param) {
                     })
                   })
                 }) : /* @__PURE__ */_jsxs(_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;
@@ -1443,13 +1513,15 @@ function DataTableRoot(param) {
                       }, row.id);
                     }
                     var mainRow = /* @__PURE__ */_createElement(Table.Row, {
-                      backgroundColor: enableKeyboardNavigation && keyboardNav.isNavigating && index === keyboardNav.focusedRowIndex ? "$color4" : tableZebraOn && index % 2 === 1 ? "$color2" : "$color1",
+                      ...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}`,
@@ -1674,24 +1746,6 @@ function DataTableRoot(param) {
                 total: rangeTotal
               })))
             })]
-          }), /* Loading State */
-          state.isLoading && /* @__PURE__ */_jsx(View, {
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            alignItems: "center",
-            justifyContent: "center",
-            zIndex: zIndex.loading,
-            "aria-busy": true,
-            "aria-live": "assertive",
-            "aria-label": t("Loading table data"),
-            role: "status",
-            children: /* @__PURE__ */_jsx(Spinner, {
-              size: "large",
-              color: "$color10"
-            })
           })]
         })
       })