@urbanos/react-discovery-ui 2.1.49 → 2.1.51

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

@@ -43,20 +43,32 @@ var DataTable = function DataTable(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     pagination = _useState2[0],
     setPagination = _useState2[1];
-  var _useState3 = (0, _react.useState)({
-      row: 0,
-      col: 0
-    }),
+  var _useState3 = (0, _react.useState)({}),
     _useState4 = _slicedToArray(_useState3, 2),
-    focusedCell = _useState4[0],
-    setFocusedCell = _useState4[1];
-  var focusedCellRef = (0, _react.useRef)({
-    row: 0,
-    col: 0
-  });
+    columnSizing = _useState4[0],
+    setColumnSizing = _useState4[1];
   var totalRowsRef = (0, _react.useRef)(1);
   var totalColsRef = (0, _react.useRef)(columns.length);
   var tableRef = (0, _react.useRef)(null);
+
+  // Stable per-instance prefix so header IDs are unique if multiple tables are on the page
+  var tableId = (0, _react.useRef)("dv-".concat(Math.random().toString(36).slice(2, 7))).current;
+  var colHeaderId = function colHeaderId(colIndex) {
+    return "".concat(tableId, "-col-").concat(colIndex);
+  };
+  var rowHeaderId = function rowHeaderId(rowIndex) {
+    return "".concat(tableId, "-row-").concat(rowIndex);
+  };
+  var dataCellId = function dataCellId(rowIndex, colIndex) {
+    return "".concat(tableId, "-cell-").concat(rowIndex, "-").concat(colIndex);
+  };
+
+  // aria-activedescendant: track currently active cell by ID
+  var _useState5 = (0, _react.useState)(colHeaderId(0)),
+    _useState6 = _slicedToArray(_useState5, 2),
+    activeCellId = _useState6[0],
+    setActiveCellId = _useState6[1];
+  var activeCellIdRef = (0, _react.useRef)(colHeaderId(0));
   (0, _react.useEffect)(function () {
     setPagination(function (prev) {
       return _objectSpread(_objectSpread({}, prev), {}, {
@@ -68,7 +80,8 @@ var DataTable = function DataTable(_ref) {
     data: data || [],
     columns: columns,
     state: {
-      pagination: pagination
+      pagination: pagination,
+      columnSizing: columnSizing
     },
     onPaginationChange: function onPaginationChange(updater) {
       var newPagination = typeof updater === 'function' ? updater(pagination) : updater;
@@ -77,6 +90,9 @@ var DataTable = function DataTable(_ref) {
         onNextPageClicked(newPagination.pageIndex);
       }
     },
+    onColumnSizingChange: setColumnSizing,
+    columnResizeMode: 'onChange',
+    enableColumnResizing: true,
     getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
     getPaginationRowModel: (0, _reactTable.getPaginationRowModel)()
   });
@@ -85,15 +101,54 @@ var DataTable = function DataTable(_ref) {
   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.
+  // Resolve cell ID from (row, col) coordinates — row 0 = header, rows 1+ = data rows
+  var resolveId = function resolveId(row, col) {
+    if (row === 0) return colHeaderId(col);
+    var dataRowIndex = row - 1;
+    return col === 0 ? rowHeaderId(dataRowIndex) : dataCellId(dataRowIndex, col);
+  };
+
+  // Parse (row, col) from a cell element's data attributes
+  var parseCoords = function parseCoords(el) {
+    var row = parseInt(el.getAttribute('data-row'), 10);
+    var col = parseInt(el.getAttribute('data-col'), 10);
+    return isNaN(row) || isNaN(col) ? null : {
+      row: row,
+      col: col
+    };
+  };
+  var activateCell = function activateCell(row, col) {
+    var id = resolveId(row, col);
+    activeCellIdRef.current = id;
+    setActiveCellId(id);
+    var tableEl = tableRef.current;
+    if (!tableEl) return;
+    var cell = tableEl.querySelector("[data-row=\"".concat(row, "\"][data-col=\"").concat(col, "\"]"));
+    if (cell) {
+      cell.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }
+  };
+
+  // Native keydown listener on the table container — reliable preventDefault for arrow keys
   (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;
+      // Parse current coords from active cell ID via DOM lookup
+      var activeEl = tableEl.querySelector("#".concat(CSS.escape(activeCellIdRef.current)));
+      var coords = activeEl ? parseCoords(activeEl) : {
+        row: 0,
+        col: 0
+      };
+      var _ref2 = coords || {
+          row: 0,
+          col: 0
+        },
+        row = _ref2.row,
+        col = _ref2.col;
       var moves = {
         ArrowUp: [row - 1, col],
         ArrowDown: [row + 1, col],
@@ -104,44 +159,24 @@ var DataTable = function DataTable(_ref) {
       e.preventDefault();
       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'
-        });
-      }
+      activateCell(r, c);
     };
     tableEl.addEventListener('keydown', handleKeyDown);
     return function () {
       return tableEl.removeEventListener('keydown', handleKeyDown);
     };
-  }, []); // empty deps — all values accessed via refs
+  }, []); // empty deps — all values accessed via refs or DOM
 
-  var tabIndex = function tabIndex(row, col) {
-    return focusedCell.row === row && focusedCell.col === col ? 0 : -1;
-  };
-  var onCellFocus = function onCellFocus(row, col) {
-    focusedCellRef.current = {
-      row: row,
-      col: col
-    };
-    setFocusedCell({
-      row: row,
-      col: col
-    });
+  // Click-to-activate via event delegation on the table
+  var handleTableClick = function handleTableClick(e) {
+    var cell = e.target.closest('[data-row][data-col]');
+    if (!cell) return;
+    var coords = parseCoords(cell);
+    if (coords) activateCell(coords.row, coords.col);
   };
+  var dataRows = table.getRowModel().rows;
+  var pageIndex = pagination.pageIndex;
+  var pageSize = pagination.pageSize;
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       height: '400px',
@@ -149,54 +184,77 @@ var DataTable = function DataTable(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement("table", {
     ref: tableRef,
+    role: "grid",
+    tabIndex: 0,
+    "aria-activedescendant": activeCellId,
+    "aria-rowcount": dataRows.length + 1,
+    "aria-colcount": columns.length,
     style: {
-      minWidth: "".concat(columns.length * 120, "px")
-    }
+      width: table.getTotalSize()
+    },
+    onClick: handleTableClick
   }, /*#__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,
+        id: colHeaderId(colIndex),
+        role: "columnheader",
         scope: "col",
-        tabIndex: tabIndex(0, colIndex),
         "data-row": 0,
         "data-col": colIndex,
-        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()));
+        "aria-colindex": colIndex + 1,
+        className: "".concat(((_header$column$column = header.column.columnDef.meta) === null || _header$column$column === void 0 ? void 0 : _header$column$column.headerClassName) || 'table-header').concat(activeCellId === colHeaderId(colIndex) ? ' active-cell' : ''),
+        style: {
+          width: header.getSize(),
+          position: 'relative'
+        }
+      }, header.isPlaceholder ? null : (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext()), header.column.getCanResize() && /*#__PURE__*/_react.default.createElement("div", {
+        className: "resizer".concat(header.column.getIsResizing() ? ' isResizing' : ''),
+        onMouseDown: header.getResizeHandler(),
+        onTouchStart: header.getResizeHandler(),
+        "aria-hidden": "true"
+      }));
     }));
-  })), /*#__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,
+        id: rowHeaderId(rowIndex),
+        role: "rowheader",
         scope: "row",
-        tabIndex: tabIndex(tableRow, colIndex),
+        headers: colHeaderId(0),
         "data-row": tableRow,
         "data-col": colIndex,
-        onFocus: function onFocus() {
-          return onCellFocus(tableRow, colIndex);
-        },
-        className: "row-header"
+        "aria-colindex": 1,
+        className: "row-header".concat(activeCellId === rowHeaderId(rowIndex) ? ' active-cell' : '')
       }, content) : /*#__PURE__*/_react.default.createElement("td", {
         key: cell.id,
-        tabIndex: tabIndex(tableRow, colIndex),
+        id: dataCellId(rowIndex, colIndex),
+        role: "gridcell",
+        headers: "".concat(colHeaderId(colIndex), " ").concat(rowHeaderId(rowIndex)),
         "data-row": tableRow,
         "data-col": colIndex,
-        onFocus: function onFocus() {
-          return onCellFocus(tableRow, colIndex);
-        }
+        "aria-colindex": colIndex + 1,
+        className: activeCellId === dataCellId(rowIndex, colIndex) ? 'active-cell' : undefined
       }, content);
     }));
   }))), /*#__PURE__*/_react.default.createElement("div", {
@@ -277,10 +335,10 @@ var cleanseField = function cleanseField(value) {
   }
 };
 var cleanseRow = function cleanseRow(row) {
-  var reconstructedObject = Object.assign.apply(Object, [{}].concat(_toConsumableArray(Object.entries(row).map(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-      k = _ref3[0],
-      v = _ref3[1];
+  var reconstructedObject = Object.assign.apply(Object, [{}].concat(_toConsumableArray(Object.entries(row).map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      k = _ref4[0],
+      v = _ref4[1];
     return _defineProperty({}, k, cleanseField(v));
   }))));
   return reconstructedObject;
@@ -292,10 +350,10 @@ var cleanseData = function cleanseData(data) {
   });
 };
 var _default = exports.default = function _default(props) {
-  var _useState5 = (0, _react.useState)(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    index = _useState6[0],
-    setIndex = _useState6[1];
+  var _useState7 = (0, _react.useState)(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    index = _useState8[0],
+    setIndex = _useState8[1];
   var isGeojson = props.format === 'geojson';
   var cleanData = isGeojson ? undefined : props.data ? cleanseData(props.data) : props.data;
   var columns = (0, _react.useMemo)(function () {
@@ -306,6 +364,8 @@ var _default = exports.default = function _default(props) {
         accessorFn: function accessorFn(row) {
           return row[column];
         },
+        size: 120,
+        minSize: 60,
         meta: {
           headerClassName: 'table-header'
         }

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

@@ -11,7 +11,7 @@
     color: black;
   }
 
-  tbody tr:nth-child(even).striped-row {
+  tbody tr.striped-row {
     background-color: rgba(0, 0, 0, 0.03);
   }
 
@@ -32,10 +32,32 @@
 
     table {
       table-layout: fixed;
-      width: 100%;
       border-collapse: collapse;
     }
 
+    .resizer {
+      position: absolute;
+      right: 0;
+      top: 0;
+      height: 100%;
+      width: 4px;
+      cursor: col-resize;
+      user-select: none;
+      touch-action: none;
+      background: rgba(0, 0, 0, 0.15);
+      opacity: 0;
+
+      &:hover,
+      &.isResizing {
+        opacity: 1;
+        background: #005fcc;
+      }
+    }
+
+    th:hover .resizer {
+      opacity: 1;
+    }
+
     th, td {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -53,6 +75,16 @@
       font-weight: normal;
       text-align: left;
     }
+
+    .active-cell {
+      outline: 2px solid #005fcc;
+      outline-offset: -2px;
+    }
+
+    table:focus {
+      outline: 2px solid #005fcc;
+      outline-offset: 2px;
+    }
   }
 
   #data-view-raw {

package/package.json

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