@multiplatform.one/table 6.4.3 → 6.6.0

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

@@ -52,13 +52,13 @@ var import_react_i18next = require("react-i18next");
 var import_useDataTable = require("../../hooks/useDataTable.native.js");
 var import_useDragScroll = require("../../hooks/useDragScroll.native.js");
 var import_useDataTableKeyboard = require("../../hooks/useDataTableKeyboard.native.js");
-var import_DataTableColumnPinning = require("../DataTableColumnPinning/index.native.js");
-var import_DataTablePagination = require("../DataTablePagination/index.native.js");
-var import_DataTableToolbar = require("../DataTableToolbar/index.native.js");
-var import_DataTableBulkActions = require("../DataTableBulkActions/index.native.js");
-var import_DataTableCell = require("../DataTableCell/index.native.js");
-var import_ColumnHeaderFilter = require("../ColumnHeaderFilter/index.native.js");
-var import_DataTableFilterChips = require("../DataTableFilterChips/index.native.js");
+var import_DataTableColumnPinning = require("../DataTableColumnPinning");
+var import_DataTablePagination = require("../DataTablePagination");
+var import_DataTableToolbar = require("../DataTableToolbar");
+var import_DataTableBulkActions = require("../DataTableBulkActions");
+var import_DataTableCell = require("../DataTableCell");
+var import_ColumnHeaderFilter = require("../ColumnHeaderFilter");
+var import_DataTableFilterChips = require("../DataTableFilterChips");
 var import_table_primitives = require("@multiplatform.one/table-primitives");
 var import_DataTableContext = require("./DataTableContext.native.js");
 var import_DataTableStateContext = require("./DataTableStateContext.native.js");
@@ -68,7 +68,17 @@ var import_DataTableVirtualized = require("./DataTableVirtualized.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");
+var import_rowPress = require("../../utils/rowPress.native.js");
 var import_withInterp = require("../../utils/withInterp.native.js");
+function _instanceof(left, right) {
+  "@swc/helpers - instanceof";
+
+  if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+    return !!right[Symbol.hasInstance](left);
+  } else {
+    return left instanceof right;
+  }
+}
 var SELECTION_COL_WIDTH = 40;
 function getColumnField(column) {
   var _column_field;
@@ -121,6 +131,8 @@ function DataTableRoot(param) {
     maxPinnedColumns = 3,
     enableGrouping = false,
     enableKeyboardNavigation = false,
+    onRowPress,
+    rowLabel,
     enableRowSelection = false,
     selectAllScope: selectAllScopeProp,
     bulkActions,
@@ -423,6 +435,112 @@ function DataTableRoot(param) {
       if (row.getCanExpand()) row.toggleExpanded();
     } : void 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 deriveRowIdentity = (0, import_react3.useCallback)(function (row) {
+    var fromAccessor = rowLabel === null || rowLabel === void 0 ? void 0 : rowLabel(row.original);
+    if (fromAccessor) return fromAccessor;
+    var firstCellValue;
+    try {
+      var _row_getVisibleCells_;
+      firstCellValue = (_row_getVisibleCells_ = row.getVisibleCells()[0]) === null || _row_getVisibleCells_ === void 0 ? void 0 : _row_getVisibleCells_.getValue();
+    } catch (unused) {
+      firstCellValue = void 0;
+    }
+    if (typeof firstCellValue === "string" && firstCellValue.length > 0 || typeof firstCellValue === "number") {
+      return String(firstCellValue);
+    }
+    return void 0;
+  }, [rowLabel]);
+  var deriveRowLabel = (0, import_react3.useCallback)(function (row, rowIndex) {
+    var _deriveRowIdentity;
+    return (_deriveRowIdentity = deriveRowIdentity(row)) !== null && _deriveRowIdentity !== void 0 ? _deriveRowIdentity : (0, import_withInterp.withInterp)(t("Row {{row}}", {
+      row: rowIndex + 1
+    }), {
+      row: rowIndex + 1
+    });
+  }, [deriveRowIdentity, t]);
+  var deriveSelectRowLabel = (0, import_react3.useCallback)(function (row, rowIndex) {
+    var _deriveRowIdentity;
+    var identity = (_deriveRowIdentity = deriveRowIdentity(row)) !== null && _deriveRowIdentity !== void 0 ? _deriveRowIdentity : String(rowIndex + 1);
+    return (0, import_withInterp.withInterp)(t("Select row {{row}}", {
+      row: identity
+    }), {
+      row: identity
+    });
+  }, [deriveRowIdentity, t]);
+  var activateRowPress = (0, import_react3.useCallback)(function (row, rowIndex) {
+    onRowPress === null || onRowPress === void 0 ? void 0 : onRowPress(row.original, rowIndex);
+  }, [onRowPress]);
+  var getRowPressProps = (0, import_react3.useCallback)(function (row, rowIndex) {
+    var variant = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "row";
+    if (!rowPressActive) return {};
+    var handlePress = function handlePress2(event) {
+      var _ref;
+      var _event_nativeEvent;
+      if (event === null || event === void 0 ? void 0 : event.defaultPrevented) return;
+      var targetEl = (_ref = event === null || event === void 0 ? void 0 : event.target) !== null && _ref !== void 0 ? _ref : event === null || event === void 0 ? void 0 : (_event_nativeEvent = event.nativeEvent) === null || _event_nativeEvent === void 0 ? void 0 : _event_nativeEvent.target;
+      if (import_tamagui.isWeb && typeof Element !== "undefined" && _instanceof(targetEl, Element)) {
+        var boundary = targetEl.closest('[data-row-press="true"]');
+        if ((0, import_rowPress.isInteractiveInnerTarget)(targetEl, boundary)) return;
+      }
+      activateRowPress(row, rowIndex);
+    };
+    return {
+      "aria-label": deriveRowLabel(row, rowIndex),
+      onPress: handlePress,
+      cursor: "pointer",
+      pressStyle: {
+        backgroundColor: "$color4"
+      },
+      ...(variant === "card" ? {
+        role: "button"
+      } : {}),
+      ...(import_tamagui.isWeb && !isSSR ? {
+        tabIndex: rowIndex === effectiveRowPressAnchor ? 0 : -1,
+        focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+          outlineOffset: -2
+        }),
+        "data-row-press": "true",
+        onFocus: function onFocus(e) {
+          if (e.target === e.currentTarget) setRowPressAnchor(rowIndex);
+        },
+        onBlur: function onBlur(e) {
+          var next = e.relatedTarget;
+          if (!_instanceof(next, Element) || !next.closest('[data-row-press="true"]')) {
+            setRowPressAnchor(0);
+          }
+        },
+        onKeyDown: function onKeyDown(e) {
+          if (e.defaultPrevented) return;
+          if (e.target !== e.currentTarget) return;
+          var key = e.key;
+          if (key === "Enter" || key === " " || key === "Spacebar") {
+            e.preventDefault();
+            e.stopPropagation();
+            if (e.repeat) return;
+            activateRowPress(row, rowIndex);
+            return;
+          }
+          if (key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End") {
+            var _rowEl_closest;
+            var _pressRows_nextIdx;
+            e.preventDefault();
+            e.stopPropagation();
+            var rowEl = e.currentTarget;
+            var scope = (_rowEl_closest = rowEl.closest('[data-row-press-scope="true"]')) !== null && _rowEl_closest !== void 0 ? _rowEl_closest : rowEl.ownerDocument;
+            var pressRows = Array.from(scope.querySelectorAll('[data-row-press="true"]'));
+            var currentIdx = pressRows.indexOf(rowEl);
+            if (currentIdx < 0) return;
+            var nextIdx = key === "Home" ? 0 : key === "End" ? pressRows.length - 1 : Math.min(Math.max(currentIdx + (key === "ArrowDown" ? 1 : -1), 0), pressRows.length - 1);
+            (_pressRows_nextIdx = pressRows[nextIdx]) === null || _pressRows_nextIdx === void 0 ? void 0 : _pressRows_nextIdx.focus();
+          }
+        }
+      } : {})
+    };
+  }, [rowPressActive, deriveRowLabel, activateRowPress, effectiveRowPressAnchor, isSSR]);
   var handleCellChange = (0, import_react3.useCallback)(async function (rowIndex, columnId, newValue) {
     var _data_rowIndex;
     if (readOnly || disabled) return;
@@ -466,7 +584,21 @@ function DataTableRoot(param) {
     var columnId = cell.column.id;
     var value = cell.getValue();
     if (columnDef.cell && !columnDef.field) {
-      return (0, import_react_table.flexRender)(columnDef.cell, cell.getContext());
+      var customAlign = resolveColumnAlign({
+        ...columnDef,
+        id: cell.column.id
+      });
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        width: "100%",
+        minWidth: 0,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: (0, import_columnAlign.alignToFlex)(customAlign),
+        ...{
+          "data-cell-align": customAlign
+        },
+        children: (0, import_react_table.flexRender)(columnDef.cell, cell.getContext())
+      });
     }
     var columnField = getColumnField(columnDef);
     var dateRangeLinkedColumn = (_columnDef_fieldProps = columnDef.fieldProps) === null || _columnDef_fieldProps === void 0 ? void 0 : _columnDef_fieldProps.dateRangeLinkedColumn;
@@ -497,7 +629,6 @@ function DataTableRoot(param) {
       onLinkedChange
     });
   }, [handleCellChange, readOnly, disabled, knobProps.sizeToken, isCompact]);
-  var isSSR = typeof window === "undefined";
   var extraColumnsBefore = (enableRowSelection ? 1 : 0) + (showRowNumbers ? 1 : 0) + (enableRowExpansion ? 1 : 0);
   var extraColumnsAfter = showDeleteRow && !readOnly ? 1 : 0;
   var getStickyStyle = (0, import_react3.useCallback)(function (columnId) {
@@ -569,12 +700,9 @@ function DataTableRoot(param) {
           disabled,
           checkboxProps: {
             // Row identity in the name so repeated per-row actions are
-            // differentiated for screen readers (DG-A11Y-06).
-            "aria-label": (0, import_withInterp.withInterp)(t("Select row {{row}}", {
-              row: rowIndex + 1
-            }), {
-              row: rowIndex + 1
-            })
+            // differentiated for screen readers (DG-A11Y-06). The
+            // aria-label rides the role="checkbox" frame itself.
+            "aria-label": deriveSelectRowLabel(row, rowIndex)
           },
           compact: isCompact
         })
@@ -717,7 +845,7 @@ function DataTableRoot(param) {
         })
       })]
     });
-  }, [enableRowSelection, showRowNumbers, enableRowExpansion, showDeleteRow, readOnly, disabled, cellHeight, knobProps.sizeToken, cellFlexProps, getColSizeProps, getStickyStyle, renderCellContent, handleDeleteRow, data.length, minRows, isCompact, t, 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]);
   var [filterEditTarget, setFilterEditTarget] = (0, import_react3.useState)(null);
   var filterUi = (0, import_react3.useMemo)(function () {
     return {
@@ -928,7 +1056,11 @@ function DataTableRoot(param) {
               selectAllChecked,
               selectAllIndeterminate,
               onToggleSelectAll: toggleSelectAll,
-              compact: isCompact
+              compact: isCompact,
+              selectRowLabel: deriveSelectRowLabel,
+              ...(rowPressActive ? {
+                getRowPressProps
+              } : {})
             })]
           }) : (/* Table View */
           /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
@@ -942,7 +1074,13 @@ function DataTableRoot(param) {
             },
             flexDirection: "column",
             width: "100%",
-            flexGrow: 1,
+            // Grow 0 / shrink 1 / basis auto: the grid frame hugs its
+            // rows and only compresses (into internal scroll) when the
+            // parent is shorter. flexGrow 1 stretched the frame to fill
+            // tall parents, painting a dead zone between the last row
+            // and the frame's bottom border on short pages (the frame
+            // claimed data area that held no data — Axiom 6/LC-37).
+            flexGrow: 0,
             flexShrink: 1,
             flexBasis: "auto",
             minHeight: 0,
@@ -994,6 +1132,10 @@ function DataTableRoot(param) {
               ...(hScroll && enableColumnPinning ? {
                 overflow: "visible"
               } : {}),
+              // Roving-focus DOM scope for onRowPress arrow keys (LC-49).
+              ...(rowPressActive ? {
+                "data-row-press-scope": "true"
+              } : {}),
               children: [/* Table Header */
               /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Head, {
                 zIndex: "$1",
@@ -1278,7 +1420,10 @@ function DataTableRoot(param) {
                       extraColumnsBefore,
                       extraColumnsAfter,
                       table,
-                      hasInfiniteTail
+                      hasInfiniteTail,
+                      ...(rowPressActive ? {
+                        getRowPressProps
+                      } : {})
                     })
                   })
                 }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
@@ -1357,7 +1502,8 @@ function DataTableRoot(param) {
                       tabIndex: -1,
                       ...{
                         "data-table-zebra": tableZebraOn ? index % 2 === 0 ? "even" : "odd" : "off"
-                      }
+                      },
+                      ...getRowPressProps(row, index)
                     }, renderRowContent(row, index, isLastRow));
                     var subRow = enableRowExpansion && renderSubComponent && row.getIsExpanded() && !((_row_subRows = row.subRows) === null || _row_subRows === void 0 ? void 0 : _row_subRows.length) ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
                       backgroundColor: "$color2",