@multiplatform.one/table 6.6.0 → 7.0.0

package/dist/jsx/components/DataTable/DataTableRoot.mjs

@@ -1,5 +1,5 @@
 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";
@@ -22,7 +22,9 @@ import { DataTableContext } from "./DataTableContext.mjs";
 import { DataTableStateContext } from "./DataTableStateContext.mjs";
 import { DataTableCardControls } from "./DataTableCardControls.mjs";
 import { DataTableMobileCards } from "./DataTableMobileCards.mjs";
+import { DataTableDocumentList } from "./DataTableDocumentList.mjs";
 import { DataTableVirtualized } from "./DataTableVirtualized.mjs";
+import { tableCellKeyboardProps, tableRowStateProps } from "./rowStateChrome.mjs";
 import { alignToFlex, getDefaultColumnAlign } from "../../utils/columnAlign.mjs";
 import { mapFieldToFilterType } from "../../utils/filterFields.mjs";
 import { INFINITE_TRIGGER_ROWS } from "../../utils/paginationDefaults.mjs";
@@ -48,8 +50,11 @@ function DataTableRoot({
   data,
   columns,
   initialState,
+  controlledState,
   onStateChange,
   onRetry,
+  isLoading: isLoadingProp,
+  isFetching: isFetchingProp,
   syncWithUrl = false,
   urlDebounceMs = 500,
   urlStrategy,
@@ -116,7 +121,8 @@ function DataTableRoot({
   const {
     sm
   } = 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
@@ -146,6 +152,7 @@ function DataTableRoot({
     data,
     columns,
     initialState,
+    controlledState,
     onStateChange,
     syncWithUrl,
     urlDebounceMs,
@@ -177,7 +184,9 @@ function DataTableRoot({
     enableKeyboardNavigation,
     enableRowSelection,
     rowCount,
-    pageCount
+    pageCount,
+    isLoading: isLoadingProp,
+    isFetching: isFetchingProp
   });
   const resolvedBulkActions = bulkActions ?? [];
   const selectAllChecked = enableRowSelection && (selectAllScope === "filtered" ? table.getIsAllRowsSelected() : table.getIsAllPageRowsSelected());
@@ -195,9 +204,15 @@ function DataTableRoot({
   const rowModelRows = table.getRowModel().rows;
   const infinite = computed.infinite;
   const tableRows = infinite ? rowModelRows.slice(0, infinite.visibleRowCount) : rowModelRows;
+  const heldRowsRef = 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 = useRef(-1);
   rowCounter.current = -1;
   const getColSizeProps = useCallback(col => {
@@ -252,7 +267,7 @@ function DataTableRoot({
   const isVirtualized = enableVirtualization && virtualizationHeight != null && virtualizationHeight > 0 && isWeb;
   const hasInfiniteTail = Boolean(infinite && !infinite.exhausted && tableRows.length > 0);
   const virtualizer = useVirtualizer({
-    count: tableRows.length + (hasInfiniteTail ? 1 : 0),
+    count: displayRows.length + (hasInfiniteTail ? 1 : 0),
     getScrollElement: () => bodyScrollRef.current,
     estimateSize: () => rowHeightPx,
     overscan: virtualizationOverscan,
@@ -338,10 +353,12 @@ function DataTableRoot({
       if (row.getCanExpand()) row.toggleExpanded();
     } : void 0
   });
+  const [focusedColIndex, setFocusedColIndex] = useState(0);
   const isSSR = typeof window === "undefined";
   const rowPressActive = Boolean(onRowPress) && !disabled;
   const [rowPressAnchor, setRowPressAnchor] = useState(0);
-  const effectiveRowPressAnchor = Math.min(rowPressAnchor, Math.max(tableRows.length - 1, 0));
+  const [rowPressHasFocus, setRowPressHasFocus] = useState(false);
+  const effectiveRowPressAnchor = Math.min(rowPressAnchor, Math.max(displayRows.length - 1, 0));
   const deriveRowIdentity = useCallback(row => {
     const fromAccessor = rowLabel?.(row.original);
     if (fromAccessor) return fromAccessor;
@@ -399,13 +416,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 => {
@@ -433,7 +455,7 @@ function DataTableRoot({
         }
       } : {})
     };
-  }, [rowPressActive, deriveRowLabel, activateRowPress, effectiveRowPressAnchor, isSSR]);
+  }, [rowPressActive, deriveRowLabel, activateRowPress, effectiveRowPressAnchor, isSSR, rowPressHasFocus]);
   const handleCellChange = useCallback(async (rowIndex, columnId, newValue) => {
     if (readOnly || disabled) return;
     const previousValue = data[rowIndex]?.[columnId];
@@ -518,6 +540,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 = 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 = useCallback(columnId => {
     if (!enableColumnPinning || !pinning) return void 0;
     const colPinning = table.getState().columnPinning || {
@@ -571,9 +606,16 @@ function DataTableRoot({
     const cellRenderProps = cellElement ? {
       render: cellElement
     } : {};
+    let cellSlot = 0;
+    const cellNavProps = () => {
+      const 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",
@@ -595,6 +637,7 @@ function DataTableRoot({
         })
       }), showRowNumbers && /* @__PURE__ */jsx(Table.Cell, {
         ...cellRenderProps,
+        ...cellNavProps(),
         cellWidth: 50,
         cellHeight,
         cellLocation: enableRowSelection ? "middle" : "first",
@@ -605,6 +648,7 @@ function DataTableRoot({
         })
       }), enableRowExpansion && /* @__PURE__ */jsx(Table.Cell, {
         ...cellRenderProps,
+        ...cellNavProps(),
         cellWidth: 32 + row.depth * 20,
         cellHeight,
         cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first",
@@ -684,6 +728,7 @@ function DataTableRoot({
         });
         return /* @__PURE__ */jsx(Table.Cell, {
           ...cellRenderProps,
+          ...cellNavProps(),
           ...cellFlexProps,
           ...getColSizeProps(cell.column),
           cellHeight,
@@ -710,6 +755,7 @@ function DataTableRoot({
         }, cell.id);
       }), showDeleteRow && !readOnly && /* @__PURE__ */jsx(Table.Cell, {
         ...cellRenderProps,
+        ...cellNavProps(),
         cellWidth: 60,
         cellHeight,
         cellLocation: "last",
@@ -728,7 +774,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] = useState(null);
   const filterUi = useMemo(() => ({
     editTarget: filterEditTarget,
@@ -754,7 +800,8 @@ function DataTableRoot({
         views: state.views,
         activeViewId: state.activeViewId,
         size: knobProps.sizeToken,
-        compact: isCompact
+        compact: isCompact,
+        isFetching: Boolean(state.isFetching)
       });
     }
     return /* @__PURE__ */jsx(DataTableToolbar, {
@@ -770,7 +817,8 @@ function DataTableRoot({
       enableGlobalSearch,
       enableFiltering,
       size: knobProps.sizeToken,
-      compact: isCompact
+      compact: isCompact,
+      isFetching: Boolean(state.isFetching)
     });
   };
   const renderPaginationComponent = () => {
@@ -811,12 +859,13 @@ function DataTableRoot({
         el.removeEventListener("scroll", update);
         ro?.disconnect();
       };
-    }, [tableRows.length, showCards]);
+    }, [displayRows.length, showCards]);
     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__ */jsx(AsyncBoundary, {
         error: state.error,
@@ -827,7 +876,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__ */jsx(AsyncBoundary, {
         loading: true,
         layout: "table",
@@ -854,6 +903,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,
@@ -882,7 +932,19 @@ function DataTableRoot({
               showSelectionCount: true,
               placement: "top"
             })
-          }) : null, children, showCards ? /* @__PURE__ */jsxs(Fragment, {
+          }) : null, children, showList ? /* @__PURE__ */jsx(DataTableDocumentList, {
+            tableRows: displayRows,
+            enableRowSelection,
+            disabled,
+            hasActiveFilters: computed.hasActiveFilters,
+            renderCellContent,
+            compact: isCompact,
+            selectRowLabel: deriveSelectRowLabel,
+            queryInFlight,
+            ...(rowPressActive ? {
+              getRowPressProps
+            } : {})
+          }) : showCards ? /* @__PURE__ */jsxs(Fragment, {
             children: [/* @__PURE__ */jsx(DataTableCardControls, {
               table,
               enableSorting,
@@ -891,7 +953,7 @@ function DataTableRoot({
               compact: isCompact,
               disabled
             }), /* @__PURE__ */jsx(DataTableMobileCards, {
-              tableRows,
+              tableRows: displayRows,
               enableRowSelection,
               showRowNumbers,
               showDeleteRow,
@@ -907,6 +969,7 @@ function DataTableRoot({
               onToggleSelectAll: toggleSelectAll,
               compact: isCompact,
               selectRowLabel: deriveSelectRowLabel,
+              queryInFlight,
               ...(rowPressActive ? {
                 getRowPressProps
               } : {})
@@ -936,7 +999,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__ */jsxs(Table, {
@@ -1180,9 +1246,9 @@ function DataTableRoot({
                 ref: node => {
                   tableBodyRef.current = 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")
@@ -1208,7 +1274,7 @@ function DataTableRoot({
                       totalSize,
                       bodyScrollRef,
                       virtualizationHeight,
-                      tableRows,
+                      tableRows: displayRows,
                       headerGroups,
                       showRowNumbers,
                       enableRowExpansion,
@@ -1228,9 +1294,9 @@ function DataTableRoot({
                     })
                   })
                 }) : /* @__PURE__ */jsxs(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;
@@ -1277,13 +1343,15 @@ function DataTableRoot({
                       }, row.id);
                     }
                     const 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?.()),
+                        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}`,
@@ -1471,23 +1539,6 @@ function DataTableRoot({
                 total: rangeTotal
               }))
             })]
-          }), 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"
-            })
           })]
         })
       })