@absreim/react-bootstrap-data-grid 2.4.0 → 2.5.0

package/main/ColHeaderCell/index.js

@@ -7,7 +7,7 @@ var ColHeaderCell = function (_a) {
     var label = _a.label, sortModel = _a.sortModel, ariaColIndex = _a.ariaColIndex, additionalClasses = _a.additionalClasses, width = _a.width;
     var _b = useSortHeaderStates(sortModel), handleClick = _b.handleClick, handleMouseOver = _b.handleMouseOver, handleMouseOut = _b.handleMouseOut, sortSymbol = _b.sortSymbol;
     return (_jsxs("th", { className: classNames({
-            "rbdg-clickable-grid-header-cell": sortModel,
+            "rbdg-sort-toggler": sortModel,
             "table-active": sortModel === null || sortModel === void 0 ? void 0 : sortModel.sortOrder,
         }, additionalClasses || []), onClick: sortModel && handleClick, onMouseOver: handleMouseOver, onMouseOut: handleMouseOut, "aria-description": sortModel
             ? "Column header"

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": "2.4.0",
+  "version": "2.5.0",
   "license": "MIT",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",

package/toolbar/Toolbar.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState, } from "react";
 import classNames from "classnames";
 var buttonSpecs = {
     filtering: {
@@ -10,14 +11,68 @@ var buttonSpecs = {
         icon: (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("path", { d: "M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" }), _jsx("path", { d: "M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z" })] })),
     },
 };
-// TODO: figure out tabindex and accessibility
 var Toolbar = function (_a) {
     var enabledFeatures = _a.enabledFeatures, option = _a.option, setOption = _a.setOption, toolbarClasses = _a.toolbarClasses, activeClasses = _a.activeClasses, inactiveClasses = _a.inactiveClasses;
-    return (_jsx("div", { className: classNames(toolbarClasses || ["hstack", "gap-2", "justify-content-start", "px-2"]), role: "toolbar", children: Object.keys(buttonSpecs)
-            .filter(function (toolbarOption) { return !!enabledFeatures[toolbarOption]; })
-            .map(function (toolbarOption) { return (_jsx("button", { "aria-label": buttonSpecs[toolbarOption].label, "aria-roledescription": "Grouped toggle button to show/hide ".concat(toolbarOption, " UI"), "aria-pressed": option === toolbarOption, className: classNames.apply(void 0, (option === toolbarOption
+    var enabledOptions = useMemo(function () {
+        return Object.keys(buttonSpecs).filter(function (toolbarOption) { return !!enabledFeatures[toolbarOption]; });
+    }, [enabledFeatures]);
+    var _b = useState(enabledOptions[0] || null), focusableOption = _b[0], setFocusableOption = _b[1];
+    var divRef = useRef(null);
+    // Deals with cases where selected option is no longer available due to enabledFeatures prop getting changed.
+    var actualOption = useMemo(function () {
+        if (focusableOption === null || !enabledOptions.includes(focusableOption)) {
+            return enabledOptions[0] || null;
+        }
+        return focusableOption;
+    }, [enabledOptions, focusableOption]);
+    var onKeydown = function (event) {
+        if (actualOption === null) {
+            return;
+        }
+        var currentIndex = enabledOptions.findIndex(function (option) { return option === actualOption; });
+        if (currentIndex === -1) {
+            // Should not happen due normalization of the value by the actualOption useMemo hook.
+            // This branch is put here anyway for explanatory purposes.
+            return;
+        }
+        if (event.code === "ArrowLeft" && currentIndex - 1 < 0) {
+            setFocusableOption(enabledOptions[enabledOptions.length - 1]);
+            return;
+        }
+        if (event.code === "ArrowLeft" && currentIndex - 1 >= 0) {
+            setFocusableOption(enabledOptions[currentIndex - 1]);
+            return;
+        }
+        if (event.code === "ArrowRight" &&
+            currentIndex + 1 >= enabledOptions.length) {
+            setFocusableOption(enabledOptions[0]);
+            return;
+        }
+        if (event.code === "ArrowRight" &&
+            currentIndex + 1 < enabledOptions.length) {
+            setFocusableOption(enabledOptions[currentIndex + 1]);
+            return;
+        }
+    };
+    useEffect(function () {
+        if (actualOption === null) {
+            return;
+        }
+        if (divRef.current === null) {
+            return;
+        }
+        if (!divRef.current.contains(document.activeElement)) {
+            return;
+        }
+        var focusTarget = divRef.current.querySelector(":scope > button[data-toolbar-option=\"".concat(actualOption, "\"]"));
+        if (focusTarget) {
+            focusTarget.focus();
+        }
+    }, [actualOption]);
+    return (_jsx("div", { ref: divRef, className: classNames(toolbarClasses || ["hstack", "gap-2", "justify-content-start", "px-2"]), role: "toolbar", onKeyDown: onKeydown, children: enabledOptions.map(function (toolbarOption) { return (_jsx("button", { tabIndex: actualOption === toolbarOption ? 0 : -1, "data-toolbar-option": toolbarOption, "aria-label": buttonSpecs[toolbarOption].label, "aria-roledescription": "Grouped toggle button to show/hide ".concat(toolbarOption, " UI"), "aria-pressed": option === toolbarOption, className: classNames.apply(void 0, (option === toolbarOption
                 ? activeClasses || ["btn", "btn-outline-secondary", "active"]
                 : inactiveClasses || ["btn", "btn-outline-secondary"])), title: buttonSpecs[toolbarOption].label, onClick: function () {
+                setFocusableOption(toolbarOption);
                 setOption(option === toolbarOption
                     ? null
                     : toolbarOption);

package/toolbar/ToolbarContainer.js

@@ -10,8 +10,6 @@ var ToolbarContainer = function (_a) {
             !!interfaces[toolbarOption];
         return prev;
     }, {});
-    // TODO: mention in documentation that Bootstrap 5.3 is required due to the
-    // use of the z-index utility
     return (_jsxs("div", { className: "vstack", "data-testid": "toolbar container", children: [_jsx(Toolbar, { enabledFeatures: enabledFeatures, option: option, setOption: setOption, toolbarClasses: styleModel === null || styleModel === void 0 ? void 0 : styleModel.toolbar, activeClasses: styleModel === null || styleModel === void 0 ? void 0 : styleModel.activeButton, inactiveClasses: styleModel === null || styleModel === void 0 ? void 0 : styleModel.inactiveButton }), _jsx("div", { className: "position-relative", children: option !== null && (_jsx("div", { "data-testid": "toolbar feature interface content container", className: classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.interfaceContainer) || [
                         "position-absolute",
                         "z-1",