@urbanos/react-discovery-ui 2.1.48 → 2.1.50

package/lib/components/data-view/data-view.js

@@ -14,11 +14,11 @@ var _reactTabs = require("react-tabs");
 var _lodash = _interopRequireDefault(require("lodash"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -50,6 +50,12 @@ var DataTable = function DataTable(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     focusedCell = _useState4[0],
     setFocusedCell = _useState4[1];
+  var focusedCellRef = (0, _react.useRef)({
+    row: 0,
+    col: 0
+  });
+  var totalRowsRef = (0, _react.useRef)(1);
+  var totalColsRef = (0, _react.useRef)(columns.length);
   var tableRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     setPagination(function (prev) {
@@ -74,41 +80,71 @@ var DataTable = function DataTable(_ref) {
     getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
     getPaginationRowModel: (0, _reactTable.getPaginationRowModel)()
   });
-  var totalRows = table.getRowModel().rows.length + 1; // row 0 = header
-  var totalCols = columns.length;
-  var moveFocus = function moveFocus(newRow, newCol) {
-    var r = Math.max(0, Math.min(totalRows - 1, newRow));
-    var c = Math.max(0, Math.min(totalCols - 1, newCol));
-    setFocusedCell({
-      row: r,
-      col: c
-    });
-    var cell = tableRef.current && tableRef.current.querySelector("[data-row=\"".concat(r, "\"][data-col=\"").concat(c, "\"]"));
-    if (cell) cell.focus();
-  };
-  var handleKeyDown = function handleKeyDown(e) {
-    var row = focusedCell.row,
-      col = focusedCell.col;
-    var moves = {
-      ArrowUp: [row - 1, col],
-      ArrowDown: [row + 1, col],
-      ArrowLeft: [row, col - 1],
-      ArrowRight: [row, col + 1]
-    };
-    if (moves[e.key]) {
+
+  // Keep refs current on every render so the native keydown handler always sees fresh values
+  totalRowsRef.current = table.getRowModel().rows.length + 1; // row 0 = header
+  totalColsRef.current = columns.length;
+
+  // Native keydown listener — fires before React's document-level delegation,
+  // so e.preventDefault() reliably cancels browser arrow-key scroll.
+  (0, _react.useEffect)(function () {
+    var tableEl = tableRef.current;
+    if (!tableEl) return;
+    var handleKeyDown = function handleKeyDown(e) {
+      var _focusedCellRef$curre = focusedCellRef.current,
+        row = _focusedCellRef$curre.row,
+        col = _focusedCellRef$curre.col;
+      var moves = {
+        ArrowUp: [row - 1, col],
+        ArrowDown: [row + 1, col],
+        ArrowLeft: [row, col - 1],
+        ArrowRight: [row, col + 1]
+      };
+      if (!moves[e.key]) return;
       e.preventDefault();
-      moveFocus.apply(void 0, _toConsumableArray(moves[e.key]));
-    }
-  };
+      var r = Math.max(0, Math.min(totalRowsRef.current - 1, moves[e.key][0]));
+      var c = Math.max(0, Math.min(totalColsRef.current - 1, moves[e.key][1]));
+      focusedCellRef.current = {
+        row: r,
+        col: c
+      };
+      setFocusedCell({
+        row: r,
+        col: c
+      });
+      var cell = tableEl.querySelector("[data-row=\"".concat(r, "\"][data-col=\"").concat(c, "\"]"));
+      if (cell) {
+        cell.focus({
+          preventScroll: true
+        });
+        cell.scrollIntoView({
+          block: 'nearest',
+          inline: 'nearest'
+        });
+      }
+    };
+    tableEl.addEventListener('keydown', handleKeyDown);
+    return function () {
+      return tableEl.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []); // empty deps — all values accessed via refs
+
   var tabIndex = function tabIndex(row, col) {
     return focusedCell.row === row && focusedCell.col === col ? 0 : -1;
   };
   var onCellFocus = function onCellFocus(row, col) {
-    return setFocusedCell({
+    focusedCellRef.current = {
+      row: row,
+      col: col
+    };
+    setFocusedCell({
       row: row,
       col: col
     });
   };
+  var dataRows = table.getRowModel().rows;
+  var pageIndex = pagination.pageIndex;
+  var pageSize = pagination.pageSize;
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       height: '400px',
@@ -116,52 +152,68 @@ var DataTable = function DataTable(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement("table", {
     ref: tableRef,
+    role: "grid",
+    "aria-rowcount": dataRows.length + 1,
+    "aria-colcount": columns.length,
     style: {
       minWidth: "".concat(columns.length * 120, "px")
-    },
-    onKeyDown: handleKeyDown
+    }
   }, /*#__PURE__*/_react.default.createElement("caption", null, datasetName ? "".concat(datasetName, " Dataset Preview") : 'Dataset Preview'), /*#__PURE__*/_react.default.createElement("thead", null, table.getHeaderGroups().map(function (headerGroup) {
     return /*#__PURE__*/_react.default.createElement("tr", {
-      key: headerGroup.id
+      key: headerGroup.id,
+      role: "row",
+      "aria-rowindex": 1
     }, headerGroup.headers.map(function (header, colIndex) {
       var _header$column$column;
       return /*#__PURE__*/_react.default.createElement("th", {
         key: header.id,
+        role: "columnheader",
         scope: "col",
         tabIndex: tabIndex(0, colIndex),
         "data-row": 0,
         "data-col": colIndex,
+        "aria-colindex": colIndex + 1,
         onFocus: function onFocus() {
           return onCellFocus(0, colIndex);
         },
         className: ((_header$column$column = header.column.columnDef.meta) === null || _header$column$column === void 0 ? void 0 : _header$column$column.headerClassName) || 'table-header'
       }, header.isPlaceholder ? null : (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext()));
     }));
-  })), /*#__PURE__*/_react.default.createElement("tbody", null, table.getRowModel().rows.length === 0 ? /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
+  })), /*#__PURE__*/_react.default.createElement("tbody", null, dataRows.length === 0 ? /*#__PURE__*/_react.default.createElement("tr", {
+    role: "row"
+  }, /*#__PURE__*/_react.default.createElement("td", {
+    role: "gridcell",
     colSpan: columns.length,
     className: "no-data-message"
-  }, "No rows found")) : table.getRowModel().rows.map(function (row, rowIndex) {
+  }, "No rows found")) : dataRows.map(function (row, rowIndex) {
     var tableRow = rowIndex + 1;
+    var ariaRowIndex = pageIndex * pageSize + rowIndex + 2; // +1 for header, +1 for 1-based
     return /*#__PURE__*/_react.default.createElement("tr", {
       key: row.id,
+      role: "row",
+      "aria-rowindex": ariaRowIndex,
       className: rowIndex % 2 === 0 ? 'striped-row' : ''
     }, row.getVisibleCells().map(function (cell, colIndex) {
       var content = (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext());
       return colIndex === 0 ? /*#__PURE__*/_react.default.createElement("th", {
         key: cell.id,
+        role: "rowheader",
         scope: "row",
         tabIndex: tabIndex(tableRow, colIndex),
         "data-row": tableRow,
         "data-col": colIndex,
+        "aria-colindex": 1,
         onFocus: function onFocus() {
           return onCellFocus(tableRow, colIndex);
         },
         className: "row-header"
       }, content) : /*#__PURE__*/_react.default.createElement("td", {
         key: cell.id,
+        role: "gridcell",
         tabIndex: tabIndex(tableRow, colIndex),
         "data-row": tableRow,
         "data-col": colIndex,
+        "aria-colindex": colIndex + 1,
         onFocus: function onFocus() {
           return onCellFocus(tableRow, colIndex);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbanos/react-discovery-ui",
-  "version": "2.1.48",
+  "version": "2.1.50",
   "description": "React component for dataset discovery UI",
   "main": "./lib/ReactDiscoveryUI.js",
   "repository": {