@absreim/react-bootstrap-data-grid 0.1.4 → 1.0.0

package/ColHeaderCell.d.ts

@@ -3,6 +3,7 @@ import { ColSortModel } from "./types";
 interface ColHeaderCellProps {
     label: string;
     sortModel?: ColSortModel;
+    ariaColIndex: number;
 }
 declare const ColHeaderCell: FC<ColHeaderCellProps>;
 export default ColHeaderCell;

package/ColHeaderCell.jsx

@@ -10,10 +10,25 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { useState } from "react";
 import classNames from "classnames";
-var getUpArrow = function (addlClasses) { return (<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className={classNames(__spreadArray(["bi", "bi-arrow-up"], (addlClasses || []), true))} viewBox="0 0 16 16">
+var getUpArrow = function (grayed) { return (<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className={classNames(__spreadArray([
+        "bi",
+        "bi-arrow-up"
+    ], (grayed ? ["text-body-secondary"] : []), true))} viewBox="0 0 16 16">
+    {!grayed && (<>
+        <title>(sorted ascending)</title>
+        <desc>
+          Up arrow indicating that the column is being sorted in an ascending
+          manner
+        </desc>
+      </>)}
     <path fillRule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"/>
   </svg>); };
 var downArrow = (<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-arrow-down" viewBox="0 0 16 16">
+    <title>(sorted descending)</title>
+    <desc>
+      Down arrow indicating that the column is being sorted in an descending
+      manner
+    </desc>
     <path fillRule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1"/>
   </svg>);
 // Temporary solution to prevent column widths from changing when hovering over
@@ -22,7 +37,7 @@ var downArrow = (<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
 // values.
 var placeholder = (<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-arrow-down" viewBox="0 0 16 16"></svg>);
 var ColHeaderCell = function (_a) {
-    var label = _a.label, sortModel = _a.sortModel;
+    var label = _a.label, sortModel = _a.sortModel, ariaColIndex = _a.ariaColIndex;
     var _b = useState(false), isHovering = _b[0], setIsHovering = _b[1];
     var handleMouseOver = function () {
         return setIsHovering(true);
@@ -55,19 +70,21 @@ var ColHeaderCell = function (_a) {
         switch (sortModel.sortOrder) {
             case null: {
                 if (isHovering) {
-                    return getUpArrow(["text-body-secondary"]);
+                    return getUpArrow(true);
                 }
                 return placeholder;
             }
             case "asc": {
-                return getUpArrow();
+                return getUpArrow(false);
             }
             case "desc": {
                 return downArrow;
             }
         }
     };
-    return (<th onClick={sortModel && handleClick} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut} aria-description="Column header that can be clicked to change the sorting mode" style={{ cursor: "pointer " }}>
+    return (<th onClick={sortModel && handleClick} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut} aria-description={sortModel
+            ? "Column header"
+            : "Column header that can be clicked to change the sorting mode"} style={{ cursor: sortModel ? "pointer" : "default" }} aria-colindex={ariaColIndex}>
       {label}
       {getSortSymbol()}
     </th>);

package/Grid.jsx

@@ -79,7 +79,8 @@ var Grid = function (_a) {
             var displayRow = [];
             Object.keys(row).forEach(function (name) {
                 if (!nameToIndex.has(name)) {
-                    throw new Error("Row data contains a property named \"".concat(name, "\", but it was not found among the column definitions."));
+                    console.error("Warning: row data contains a property named \"".concat(name, "\", but it was not found among the column definitions."));
+                    return;
                 }
                 var index = nameToIndex.get(name);
                 var formatter = cols[index].formatter;
@@ -125,8 +126,8 @@ var Grid = function (_a) {
     return (<div>
       <table className="table">
         <thead>
-          <tr>
-            {cols.map(function (_a) {
+          <tr aria-rowindex={1}>
+            {cols.map(function (_a, index) {
             var _b;
             var name = _a.name, label = _a.label, sortable = _a.sortable;
             var colSortModel = sortModel && sortable
@@ -139,13 +140,15 @@ var Grid = function (_a) {
                     },
                 }
                 : undefined;
-            return (<ColHeaderCell key={name} label={label} sortModel={colSortModel}/>);
+            return (<ColHeaderCell key={name} label={label} sortModel={colSortModel} ariaColIndex={index + 1}/>);
         })}
           </tr>
         </thead>
         <tbody>
-          {displayRows.map(function (row, index) { return (<tr key={index}>
-              {row.map(function (value, index) { return (<td key={index}>{value}</td>); })}
+          {displayRows.map(function (row, index) { return (<tr key={index} aria-rowindex={index + 2}>
+              {row.map(function (value, index) { return (<td key={index} aria-colindex={index + 1}>
+                  {value}
+                </td>); })}
             </tr>); })}
         </tbody>
       </table>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@absreim/react-bootstrap-data-grid",
   "description": "Data grid UI component for use with web apps using React and Bootstrap",
-  "version": "0.1.4",
+  "version": "1.0.0",
   "license": "MIT",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",
@@ -17,8 +17,8 @@
     "classnames": "^2.5.1"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^19",
+    "react-dom": "^19"
   },
   "main": "./index.js",
   "module": "./index.js",