@absreim/react-bootstrap-data-grid-pro 2.4.1 → 2.6.0

package/grid/pipeline/useGetInputStrSubmitCallback.js

@@ -1,10 +1,10 @@
 import inputStrsToRowData from "../editing/inputStrsToRowData";
-var useGetInputStrSubmitCallback = function (editModel, cols) {
-    var getInputStrSubmitCallback = editModel &&
-        (function (id) {
-            var idSpecificCallback = editModel.getUpdateCallback(id);
-            return function (inputStrs) {
-                var rowData = inputStrsToRowData(cols, inputStrs);
+const useGetInputStrSubmitCallback = (editModel, cols) => {
+    const getInputStrSubmitCallback = editModel &&
+        ((id) => {
+            const idSpecificCallback = editModel.getUpdateCallback(id);
+            return (inputStrs) => {
+                const rowData = inputStrsToRowData(cols, inputStrs);
                 idSpecificCallback(rowData);
             };
         });

package/grid/pipeline/useGridSelectionFns.js

@@ -1,7 +1,7 @@
 import { useCallback, useId, useMemo } from "react";
 import isSubset from "../util/isSubset";
-var useGridSelectionFns = function (selectModel, rows) {
-    var selectionExists = useMemo(function () {
+const useGridSelectionFns = (selectModel, rows) => {
+    const selectionExists = useMemo(() => {
         if (!selectModel) {
             return false;
         }
@@ -10,7 +10,7 @@ var useGridSelectionFns = function (selectModel, rows) {
         }
         return selectModel.selected.length > 0;
     }, [selectModel]);
-    var selectAllOnClick = useCallback(function () {
+    const selectAllOnClick = useCallback(() => {
         if (!selectModel) {
             return;
         }
@@ -23,14 +23,14 @@ var useGridSelectionFns = function (selectModel, rows) {
             return;
         }
         if (!selectionExists && selectModel.type === "multi") {
-            var allRowIndices = rows.map(function (_, index) { return index; });
+            const allRowIndices = rows.map((_, index) => index);
             selectModel.setSelected(allRowIndices);
         }
         // Button should be disabled in the case of selectionExists &&
         // selectModel.type === "single", so function execution should never get
         // to this point.
     }, [rows, selectModel, selectionExists]);
-    var getSelectHandler = function (index) { return function () {
+    const getSelectHandler = (index) => () => {
         if (!selectModel) {
             return;
         }
@@ -39,16 +39,16 @@ var useGridSelectionFns = function (selectModel, rows) {
             return;
         }
         selectModel.setSelected(selectModel.selected.concat(index));
-    }; };
-    var getDeselectHandler = function (index) { return function () {
+    };
+    const getDeselectHandler = (index) => () => {
         if (!selectModel || selectModel.type === "single") {
             return;
         }
-        selectModel.setSelected(selectModel.selected.filter(function (num) { return num !== index; }));
-    }; };
+        selectModel.setSelected(selectModel.selected.filter((num) => num !== index));
+    };
     // used to group radio buttons for selection
-    var gridId = useId();
-    var getSelectInputModel = function (id, selectModel) {
+    const gridId = useId();
+    const getSelectInputModel = (id, selectModel) => {
         if (selectModel.type === "single") {
             return {
                 type: "radio",
@@ -60,10 +60,10 @@ var useGridSelectionFns = function (selectModel, rows) {
             deselectCallback: getDeselectHandler(id),
         };
     };
-    var selectedSet = useMemo(function () {
-        var set = new Set();
+    const selectedSet = useMemo(() => {
+        const set = new Set();
         if (selectModel && selectModel.type === "multi") {
-            selectModel.selected.forEach(function (value) { return set.add(value); });
+            selectModel.selected.forEach((value) => set.add(value));
         }
         if (selectModel &&
             selectModel.type === "single" &&
@@ -72,8 +72,8 @@ var useGridSelectionFns = function (selectModel, rows) {
         }
         return set;
     }, [selectModel]);
-    var rowsAreSelectable = selectModel && selectModel.mode !== "column";
-    var selectionInfo = useMemo(function () {
+    const rowsAreSelectable = selectModel && selectModel.mode !== "column";
+    const selectionInfo = useMemo(() => {
         if (!selectModel) {
             return null;
         }
@@ -83,11 +83,11 @@ var useGridSelectionFns = function (selectModel, rows) {
                 existingSelection: selectionExists,
             };
         }
-        var getMultiExistingSelection = function (selectionExists, rows) {
-            var rowIndices = rows.map(function (_, index) { return index; });
+        const getMultiExistingSelection = (selectionExists, rows) => {
+            const rowIndices = rows.map((_, index) => index);
             // Note that isFullSelection is true if there are no rows at all. In that case, the return value of this function
             // should be "none", not "full".
-            var isFullSelection = isSubset(rowIndices, selectModel.selected);
+            const isFullSelection = isSubset(rowIndices, selectModel.selected);
             if (!selectionExists) {
                 return "none";
             }
@@ -101,7 +101,7 @@ var useGridSelectionFns = function (selectModel, rows) {
             existingSelection: getMultiExistingSelection(selectionExists, rows),
         };
     }, [selectModel, selectionExists, rows]);
-    var getRowClickHandler = function (index) { return function () {
+    const getRowClickHandler = (index) => () => {
         if (!rowsAreSelectable) {
             return;
         }
@@ -110,22 +110,22 @@ var useGridSelectionFns = function (selectModel, rows) {
             return;
         }
         getSelectHandler(index)();
-    }; };
-    var getAriaSelectedValue = function (id) {
+    };
+    const getAriaSelectedValue = (id) => {
         if (!selectModel) {
             return undefined;
         }
         return String(selectedSet.has(id));
     };
     return {
-        selectedSet: selectedSet,
-        rowsAreSelectable: rowsAreSelectable,
-        selectionInfo: selectionInfo,
-        selectAllOnClick: selectAllOnClick,
-        getSelectHandler: getSelectHandler,
-        getSelectInputModel: getSelectInputModel,
-        getRowClickHandler: getRowClickHandler,
-        getAriaSelectedValue: getAriaSelectedValue,
+        selectedSet,
+        rowsAreSelectable,
+        selectionInfo,
+        selectAllOnClick,
+        getSelectHandler,
+        getSelectInputModel,
+        getRowClickHandler,
+        getAriaSelectedValue,
     };
 };
 export default useGridSelectionFns;

package/grid/pipeline/useUnwrappedGridStyles.js

@@ -1,17 +1,15 @@
 import { useMemo } from "react";
 import { unwrapAdditionalComponentsStyleModel, unwrapTableStyleModel, } from "../styling/styleModelUnwrappers";
-var UseUnwrappedGridStyles = function (styleModel) {
+const UseUnwrappedGridStyles = (styleModel) => {
     // To give the developer the ability to specify between removing existing styles
     // and simply adding additional ones, we should migrate off of this "unwrapped"
     // design over time and instead apply logic based on the original params that
     // can be undefined.
-    var unwrappedTableModel = useMemo(function () { return unwrapTableStyleModel(styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel); }, [styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel]);
-    var unwrappedAdditionalStyleModel = useMemo(function () {
-        return unwrapAdditionalComponentsStyleModel(styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel);
-    }, [styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel]);
+    const unwrappedTableModel = useMemo(() => unwrapTableStyleModel(styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel), [styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel]);
+    const unwrappedAdditionalStyleModel = useMemo(() => unwrapAdditionalComponentsStyleModel(styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel), [styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel]);
     return {
-        unwrappedTableModel: unwrappedTableModel,
-        unwrappedAdditionalStyleModel: unwrappedAdditionalStyleModel,
+        unwrappedTableModel,
+        unwrappedAdditionalStyleModel,
     };
 };
 export default UseUnwrappedGridStyles;

package/grid/selection/SelectAllHeaderCell.d.ts

@@ -6,6 +6,7 @@ interface SelectAllHeaderCellProps {
     totalRows: number;
     additionalClasses?: string[];
     style?: CSSProperties;
+    colIndexOffset?: number;
 }
 declare const SelectAllHeaderCell: FC<SelectAllHeaderCellProps>;
 export default SelectAllHeaderCell;

package/grid/selection/SelectAllHeaderCell.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import classNames from "classnames";
-var getCheckboxState = function (selectionInfo, noRows) {
-    var disabledState = {
+const getCheckboxState = (selectionInfo, noRows) => {
+    const disabledState = {
         indeterminate: false,
         checked: false,
         disabled: true,
@@ -12,7 +12,7 @@ var getCheckboxState = function (selectionInfo, noRows) {
     if (noRows) {
         return disabledState;
     }
-    var existingSelection = selectionInfo.existingSelection;
+    const { existingSelection } = selectionInfo;
     if (existingSelection === "full") {
         return {
             indeterminate: false,
@@ -40,15 +40,14 @@ var getCheckboxState = function (selectionInfo, noRows) {
     // single select mode and none selected
     return disabledState;
 };
-var SelectAllHeaderCell = function (_a) {
-    var onClick = _a.onClick, selectionInfo = _a.selectionInfo, totalRows = _a.totalRows, additionalClasses = _a.additionalClasses, style = _a.style;
-    var noRows = totalRows === 0;
-    var _b = getCheckboxState(selectionInfo, noRows), indeterminate = _b.indeterminate, checked = _b.checked, disabled = _b.disabled, description = _b.description;
-    var ref = useRef(null);
-    useEffect(function () {
+const SelectAllHeaderCell = ({ onClick, selectionInfo, totalRows, additionalClasses, style, colIndexOffset, }) => {
+    const noRows = totalRows === 0;
+    const { indeterminate, checked, disabled, description } = getCheckboxState(selectionInfo, noRows);
+    const ref = useRef(null);
+    useEffect(() => {
         ref.current.indeterminate = indeterminate;
     }, [indeterminate]);
-    return (_jsx("th", { style: style, "aria-colindex": 1, title: description, "aria-description": description, className: classNames({
+    return (_jsx("th", { style: style, "aria-colindex": 1 + (colIndexOffset || 0), title: description, "aria-description": description, className: classNames({
             "btn-primary": !additionalClasses || additionalClasses.length === 0,
         }, additionalClasses || []), children: _jsx("input", { type: "checkbox", checked: checked, ref: ref, disabled: disabled, "aria-label": description, onChange: onClick }) }));
 };

package/grid/selection/SelectionInput.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
-var SelectionInput = function (_a) {
-    var selectionInputModel = _a.selectionInputModel, selected = _a.selected, selectCallback = _a.selectCallback, additionalClasses = _a.additionalClasses;
-    var type = selectionInputModel.type;
-    var onChange = function (_a) {
-        var checked = _a.target.checked;
+const SelectionInput = ({ selectionInputModel, selected, selectCallback, additionalClasses, }) => {
+    const type = selectionInputModel.type;
+    const onChange = ({ target: { checked }, }) => {
         // theoretically, a radio button shouldn't become unchecked so the below
         // check of the "type" variable is not needed except for narrowing the
         // type of the "selectionInputModel"
@@ -16,7 +14,7 @@ var SelectionInput = function (_a) {
             selectCallback();
         }
     };
-    return (_jsx("input", { className: classNames(additionalClasses || []), "aria-label": "Input to select the current row", onClick: function (event) {
+    return (_jsx("input", { className: classNames(additionalClasses || []), "aria-label": "Input to select the current row", onClick: (event) => {
             event.stopPropagation();
         }, type: type, checked: selected, onChange: onChange, name: selectionInputModel.name }));
 };

package/grid/sorting/arrowPlaceholder.js

@@ -3,5 +3,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // columns with a mouse.
 // More ideal permanent solution would be to fix column widths based on preset
 // values.
-var arrowPlaceholder = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("title", { children: "(not being sorted)" }), _jsx("desc", { children: "Empty transparent square for styling purposes" })] }));
+const arrowPlaceholder = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("title", { children: "(not being sorted)" }), _jsx("desc", { children: "Empty transparent square for styling purposes" })] }));
 export default arrowPlaceholder;

package/grid/sorting/downArrow.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var downArrow = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("title", { children: "(sorted descending)" }), _jsx("desc", { children: "Down arrow indicating that the column is being sorted in an descending manner" }), _jsx("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" })] }));
+const downArrow = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("title", { children: "(sorted descending)" }), _jsx("desc", { children: "Down arrow indicating that the column is being sorted in an descending manner" }), _jsx("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" })] }));
 export default downArrow;

package/grid/sorting/sortOrderToAriaSort.d.ts

@@ -0,0 +1,4 @@
+import { SortOrder } from "./types";
+import { AriaAttributes } from "react";
+declare const sortOrderToAriaSort: (sortOrder: SortOrder | null) => AriaAttributes["aria-sort"];
+export default sortOrderToAriaSort;

package/grid/sorting/sortOrderToAriaSort.js

@@ -0,0 +1,11 @@
+const sortOrderToAriaSort = (sortOrder) => {
+    switch (sortOrder) {
+        case "asc":
+            return "ascending";
+        case "desc":
+            return "descending";
+        default:
+            return "none";
+    }
+};
+export default sortOrderToAriaSort;

package/grid/sorting/upArrow.js

@@ -1,13 +1,4 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-var upArrow = function (grayed) { return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", className: classNames(__spreadArray([], (grayed ? ["text-body-secondary"] : []), true)), viewBox: "0 0 16 16", children: [!grayed && (_jsxs(_Fragment, { children: [_jsx("title", { children: "(sorted ascending)" }), _jsx("desc", { children: "Up arrow indicating that the column is being sorted in an ascending manner" })] })), _jsx("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" })] })); };
+const upArrow = (grayed) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", className: classNames([...(grayed ? ["text-body-secondary"] : [])]), viewBox: "0 0 16 16", children: [!grayed && (_jsxs(_Fragment, { children: [_jsx("title", { children: "(sorted ascending)" }), _jsx("desc", { children: "Up arrow indicating that the column is being sorted in an ascending manner" })] })), _jsx("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" })] }));
 export default upArrow;

package/grid/styling/styleModelUnwrappers.js

@@ -1,58 +1,47 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var unwrapSharedStyleModel = function (sharedStyleModel) { return ({
+const unwrapSharedStyleModel = (sharedStyleModel) => ({
     table: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.table) || [],
     tbody: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.tbody) || [],
     thead: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.thead) || [],
     theadTr: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.theadTr) || [],
-    theadTh: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.theadTh) ? sharedStyleModel.theadTh : function () { return []; },
+    theadTh: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.theadTh) ? sharedStyleModel.theadTh : () => [],
     caption: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.caption) || [],
-}); };
-export var unwrapTableStyleModel = function (tableStyleModel) { return (__assign(__assign({}, unwrapSharedStyleModel(tableStyleModel)), { tbodyTr: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTr) ? tableStyleModel.tbodyTr : function () { return []; }, tbodyTd: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTd) ? tableStyleModel.tbodyTd : function () { return []; }, tbodyTdInput: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTdInput)
+});
+export const unwrapTableStyleModel = (tableStyleModel) => (Object.assign(Object.assign({}, unwrapSharedStyleModel(tableStyleModel)), { tbodyTr: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTr) ? tableStyleModel.tbodyTr : () => [], tbodyTd: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTd) ? tableStyleModel.tbodyTd : () => [], tbodyTdInput: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTdInput)
         ? tableStyleModel.tbodyTdInput
-        : function () { return []; }, editColTh: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editColTh) || [], editColTd: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editColTd) ? tableStyleModel.editColTd : function () { return []; }, editCancelButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editCancelButton)
+        : () => [], editColTh: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editColTh) || [], editColTd: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editColTd) ? tableStyleModel.editColTd : () => [], editCancelButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editCancelButton)
         ? tableStyleModel.editCancelButton
-        : function () { return []; }, editDeleteButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editDeleteButton)
+        : () => [], editDeleteButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editDeleteButton)
         ? tableStyleModel.editDeleteButton
-        : function () { return []; }, editSaveButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editSaveButton)
+        : () => [], editSaveButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editSaveButton)
         ? tableStyleModel.editSaveButton
-        : function () { return []; }, editStartButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editStartButton)
+        : () => [], editStartButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editStartButton)
         ? tableStyleModel.editStartButton
-        : function () { return []; }, rowSelectColTh: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectColTh) || [], rowSelectColTd: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectColTd)
+        : () => [], rowSelectColTh: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectColTh) || [], rowSelectColTd: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectColTd)
         ? tableStyleModel.rowSelectColTd
-        : function () { return []; }, rowSelectInput: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectInput)
+        : () => [], rowSelectInput: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectInput)
         ? tableStyleModel.rowSelectInput
-        : function () { return []; } })); };
-export var unwrapFilterInputTableStyleModel = function (filterTableStyleModel) { return (__assign(__assign({}, unwrapSharedStyleModel(filterTableStyleModel)), { tbodyTr: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.tbodyTr)
+        : () => [] }));
+export const unwrapFilterInputTableStyleModel = (filterTableStyleModel) => (Object.assign(Object.assign({}, unwrapSharedStyleModel(filterTableStyleModel)), { tbodyTr: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.tbodyTr)
         ? filterTableStyleModel.tbodyTr
-        : function () { return []; }, tbodyTd: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.tbodyTd)
+        : () => [], tbodyTd: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.tbodyTd)
         ? filterTableStyleModel.tbodyTd
-        : function () { return []; }, enablementInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.enablementInput)
+        : () => [], enablementInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.enablementInput)
         ? filterTableStyleModel.enablementInput
-        : function () { return []; }, schemeSelectionInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.schemeSelectionInput)
+        : () => [], schemeSelectionInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.schemeSelectionInput)
         ? filterTableStyleModel.schemeSelectionInput
-        : function () { return []; }, searchStringInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.searchStringInput)
+        : () => [], searchStringInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.searchStringInput)
         ? filterTableStyleModel.searchStringInput
-        : function () { return []; }, numberInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.numberInput)
+        : () => [], numberInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.numberInput)
         ? filterTableStyleModel.numberInput
-        : function () { return []; }, startDateInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.startDateInput)
+        : () => [], startDateInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.startDateInput)
         ? filterTableStyleModel.startDateInput
-        : function () { return []; }, endDateInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.endDateInput)
+        : () => [], endDateInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.endDateInput)
         ? filterTableStyleModel.endDateInput
-        : function () { return []; }, submitButton: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.submitButton) || [], form: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.form) || [] })); };
-export var unwrapAdditionalComponentsStyleModel = function (styleModel) { return ({
+        : () => [], submitButton: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.submitButton) || [], form: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.form) || [] }));
+export const unwrapAdditionalComponentsStyleModel = (styleModel) => ({
     topLevelDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.topLevelDiv) || [],
     filterInputsDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputsDiv) || [],
     tableAndPaginationDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tableAndPaginationDiv) || [],
     filterUiToggleButton: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterUiToggleButton) || [],
     paginationUiDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.paginationUiDiv) || [],
-}); };
+});

package/grid/toolbar/Toolbar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState, } from "react";
 import classNames from "classnames";
-var buttonSpecs = {
+const buttonSpecs = {
     filtering: {
         label: "Filtering",
         icon: (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: _jsx("path", { d: "M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5" }) })),
@@ -10,17 +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
+const Toolbar = ({ enabledFeatures, option, setOption, toolbarClasses, activeClasses, inactiveClasses, }) => {
+    const enabledOptions = useMemo(() => Object.keys(buttonSpecs).filter((toolbarOption) => !!enabledFeatures[toolbarOption]), [enabledFeatures]);
+    const [focusableOption, setFocusableOption] = useState(enabledOptions[0] || null);
+    const divRef = useRef(null);
+    // Deals with cases where selected option is no longer available due to enabledFeatures prop getting changed.
+    const actualOption = useMemo(() => {
+        if (focusableOption === null || !enabledOptions.includes(focusableOption)) {
+            return enabledOptions[0] || null;
+        }
+        return focusableOption;
+    }, [enabledOptions, focusableOption]);
+    const onKeydown = (event) => {
+        if (actualOption === null) {
+            return;
+        }
+        const currentIndex = enabledOptions.findIndex((option) => 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(() => {
+        if (actualOption === null) {
+            return;
+        }
+        if (divRef.current === null) {
+            return;
+        }
+        if (!divRef.current.contains(document.activeElement)) {
+            return;
+        }
+        const focusTarget = divRef.current.querySelector(`:scope > button[data-toolbar-option="${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((toolbarOption) => (_jsx("button", { tabIndex: actualOption === toolbarOption ? 0 : -1, "data-toolbar-option": toolbarOption, "aria-label": buttonSpecs[toolbarOption].label, "aria-roledescription": `Grouped toggle button to show/hide ${toolbarOption} UI`, "aria-pressed": option === toolbarOption, className: classNames(...(option === toolbarOption
                 ? activeClasses || ["btn", "btn-outline-secondary", "active"]
-                : inactiveClasses || ["btn", "btn-outline-secondary"])), title: buttonSpecs[toolbarOption].label, onClick: function () {
+                : inactiveClasses || ["btn", "btn-outline-secondary"])), title: buttonSpecs[toolbarOption].label, onClick: () => {
+                setFocusableOption(toolbarOption);
                 setOption(option === toolbarOption
                     ? null
                     : toolbarOption);
-            }, children: buttonSpecs[toolbarOption].icon }, toolbarOption)); }) }));
+            }, children: buttonSpecs[toolbarOption].icon }, toolbarOption))) }));
 };
 export default Toolbar;

package/grid/toolbar/ToolbarContainer.js

@@ -2,16 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import Toolbar from "./Toolbar";
 import classNames from "classnames";
-var ToolbarContainer = function (_a) {
-    var interfaces = _a.interfaces, styleModel = _a.styleModel;
-    var _b = useState(null), option = _b[0], setOption = _b[1];
-    var enabledFeatures = Object.keys(interfaces).reduce(function (prev, toolbarOption) {
+const ToolbarContainer = ({ interfaces, styleModel, }) => {
+    const [option, setOption] = useState(null);
+    const enabledFeatures = Object.keys(interfaces).reduce((prev, toolbarOption) => {
         prev[toolbarOption] =
             !!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",

package/grid/toolbar/useInterfaces.js

@@ -1,23 +1,11 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import FilterOptionsTable from "../filtering/FilterOptionsTable";
 import { useMemo } from "react";
 import ExportForm from "../export/ExportForm";
-var useInterfaces = function (_a) {
-    var filtering = _a.filtering, exporting = _a.exporting;
-    return useMemo(function () { return ({
-        filtering: filtering ? _jsx(FilterOptionsTable, __assign({}, filtering)) : undefined,
-        exporting: exporting ? _jsx(ExportForm, __assign({}, exporting)) : undefined,
-    }); }, [exporting, filtering]);
+const useInterfaces = ({ filtering, exporting, }) => {
+    return useMemo(() => ({
+        filtering: filtering ? _jsx(FilterOptionsTable, Object.assign({}, filtering)) : undefined,
+        exporting: exporting ? _jsx(ExportForm, Object.assign({}, exporting)) : undefined,
+    }), [exporting, filtering]);
 };
 export default useInterfaces;

package/grid/types.d.ts

@@ -16,17 +16,22 @@ export interface ColDefBase<ValueType = any> {
 export type ColDef<ValueType = any> = ColDefBase<ValueType> & {
     width?: number;
 };
-type ValidRowData = Record<string, any>;
+export type ValidRowData = Record<string, any>;
 export type RowData<Data extends ValidRowData = ValidRowData> = Data;
 export type RowId = string | number;
 export interface RowDef<Data extends ValidRowData = ValidRowData> {
     id: RowId;
     data: RowData<Data>;
 }
-export interface FormattedRow {
+export type AugRowDef<Data extends ValidRowData = ValidRowData> = RowDef<Data> & {
+    origIndex: number;
+};
+export type PostPaginationRowDef<Data extends ValidRowData = ValidRowData> = AugRowDef & {
+    prePaginationIndex: number;
+};
+export type FormattedRow = {
     contents: CellData[];
-    id: RowId;
-}
+} & Omit<PostPaginationRowDef, "data">;
 export type AugCellData = CellData & {
     width?: number;
 };
@@ -60,4 +65,3 @@ export interface ColHeaderCellProps {
     additionalClasses?: string[];
     width?: number;
 }
-export {};

package/grid/util/datetime.js

@@ -1,5 +1,3 @@
 import dayjs from "dayjs";
-export var dateToInputStr = function (date) { return dayjs(date).format("YYYY-MM-DD"); };
-export var dateToDatetimeInputStr = function (date) {
-    return dayjs(date).format("YYYY-MM-DDTHH:mm");
-};
+export const dateToInputStr = (date) => dayjs(date).format("YYYY-MM-DD");
+export const dateToDatetimeInputStr = (date) => dayjs(date).format("YYYY-MM-DDTHH:mm");

package/grid/util/getWidthStyle.js

@@ -1,9 +1,7 @@
-var getWidthStyle = function (width) {
-    return width === undefined
-        ? undefined
-        : {
-            minWidth: width,
-            maxWidth: width,
-        };
-};
+const getWidthStyle = (width) => width === undefined
+    ? undefined
+    : {
+        minWidth: width,
+        maxWidth: width,
+    };
 export default getWidthStyle;

package/grid/util/isSubset.js

@@ -1,7 +1,6 @@
-var isSubset = function (subset, superSet) {
-    var supersetSet = new Set(superSet);
-    for (var _i = 0, subset_1 = subset; _i < subset_1.length; _i++) {
-        var member = subset_1[_i];
+const isSubset = (subset, superSet) => {
+    const supersetSet = new Set(superSet);
+    for (const member of subset) {
         if (!supersetSet.has(member)) {
             return false;
         }