@absreim/react-bootstrap-data-grid 1.4.1 → 1.4.2

package/Grid.js

@@ -17,6 +17,7 @@ import EditableRow from "./editing/EditableRow";
 import inputStrsToRowDef from "./editing/inputStrsToRowDef";
 import { unwrapAdditionalComponentsStyleModel, unwrapTableStyleModel, } from "./styling/styleModelUnwrappers";
 import useCurrentPageRows from "./pipeline/useCurrentPageRows";
+import isSubset from "./util/isSubset";
 var Grid = function (_a) {
     var _b;
     var rows = _a.rows, cols = _a.cols, pagination = _a.pagination, sortModel = _a.sortModel, filterModel = _a.filterModel, selectModel = _a.selectModel, editModel = _a.editModel, caption = _a.caption, styleModel = _a.styleModel;
@@ -56,8 +57,8 @@ var Grid = function (_a) {
             return;
         }
         if (!selectionExists && selectModel.type === "multi") {
-            var allFilteredRowIndices = filteredRows.map(function (def) { return def.meta.origIndex; });
-            selectModel.setSelected(allFilteredRowIndices);
+            var allRowIndices = rows.map(function (_, index) { return index; });
+            selectModel.setSelected(allRowIndices);
         }
         // Button should be disabled in the case of selectionExists &&
         // selectModel.type === "single", so function execution should never get
@@ -102,7 +103,35 @@ var Grid = function (_a) {
         selectedSet.add(selectModel.selected);
     }
     var rowsAreSelectable = !!(selectModel && selectModel.mode !== "column");
-    var getRowClickHandler = function (index) { return function (event) {
+    var selectionInfo = useMemo(function () {
+        if (!selectModel) {
+            return null;
+        }
+        if (selectModel.type === "single") {
+            return {
+                selectType: "single",
+                existingSelection: selectionExists
+            };
+        }
+        var getMultiExistingSelection = function (selectionExists, rows) {
+            var rowIndices = rows.map(function (_, index) { return index; });
+            var isFullSelection = isSubset(rowIndices, selectModel.selected);
+            // Note that isFullSelection is true if there are no rows at all. In that case, the existing selection value
+            // should be "none", not "full".
+            if (!selectionExists) {
+                return "none";
+            }
+            if (isFullSelection) {
+                return "full";
+            }
+            return "partial";
+        };
+        return {
+            selectType: "multi",
+            existingSelection: getMultiExistingSelection(selectionExists, rows)
+        };
+    }, [selectModel, selectionExists, rows]);
+    var getRowClickHandler = function (index) { return function () {
         if (!rowsAreSelectable) {
             return;
         }
@@ -132,7 +161,7 @@ var Grid = function (_a) {
     }, [styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel]);
     return (_jsxs("div", { "data-testid": "rbdg-top-level-div", className: classNames(unwrappedAdditionalStyleModel.topLevelDiv), children: [filterState && filterModel && (_jsxs("div", { "data-testid": "rbdg-filter-inputs-div", className: classNames(unwrappedAdditionalStyleModel.filterInputsDiv), children: [_jsx(ToggleButton, { isActive: filterOptionsVisible, label: "".concat(filterOptionsVisible ? "Hide" : "Show ", " Filter Options"), onClick: handleToggleFilterOptions, classes: (_b = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _b === void 0 ? void 0 : _b.filterUiToggleButton }), filterOptionsVisible && (_jsx(FilterOptionsTable, { caption: filterModel.filterTableCaption, filterState: filterState, setFilterState: filterModel.setTableFilterState, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel }))] })), _jsxs("div", { "data-testid": "rbdg-table-and-pagination-div", className: classNames(unwrappedAdditionalStyleModel.tableAndPaginationDiv), children: [_jsxs("table", { className: classNames("table", {
                             "table-hover": rowsAreSelectable,
-                        }, unwrappedTableModel.table), "aria-rowcount": filteredRows.length + 1, children: [caption !== undefined && (_jsx("caption", { className: classNames(unwrappedTableModel.caption), children: caption })), _jsx("thead", { className: classNames(unwrappedTableModel.thead), children: _jsxs("tr", { "aria-rowindex": 1, className: classNames(unwrappedTableModel.theadTr), children: [showSelectCol && (_jsx(SelectAllHeaderCell, { selectType: selectModel.type, onClick: selectAllOnClick, selectionExists: selectionExists, additionalClasses: unwrappedTableModel.rowSelectColTh })), cols.map(function (_a, index) {
+                        }, unwrappedTableModel.table), "aria-rowcount": filteredRows.length + 1, children: [caption !== undefined && (_jsx("caption", { className: classNames(unwrappedTableModel.caption), children: caption })), _jsx("thead", { className: classNames(unwrappedTableModel.thead), children: _jsxs("tr", { "aria-rowindex": 1, className: classNames(unwrappedTableModel.theadTr), children: [showSelectCol && (_jsx(SelectAllHeaderCell, { selectionInfo: selectionInfo, onClick: selectAllOnClick, totalRows: rows.length, additionalClasses: unwrappedTableModel.rowSelectColTh })), cols.map(function (_a, index) {
                                             var _b;
                                             var name = _a.name, label = _a.label, sortable = _a.sortable;
                                             var colSortModel = sortModel && sortable

package/editing/EditControlsCell.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import classNames from "classnames";
 var stopPropagationWrapper = function (fn) { return function (event) {
     event.stopPropagation();
@@ -6,14 +6,14 @@ var stopPropagationWrapper = function (fn) { return function (event) {
 }; };
 var EditControlsCell = function (_a) {
     var ariaColIndex = _a.ariaColIndex, beginEditingCallback = _a.beginEditingCallback, cancelEditingCallback = _a.cancelEditingCallback, isEditing = _a.isEditing, saveCallback = _a.saveCallback, deleteCallback = _a.deleteCallback, editControlsCellClasses = _a.editControlsCellClasses, saveButtonClasses = _a.saveButtonClasses, deleteButtonClasses = _a.deleteButtonClasses, startButtonClasses = _a.startButtonClasses, cancelButtonClasses = _a.cancelButtonClasses;
-    return (_jsx("td", { "aria-colindex": ariaColIndex, className: classNames(editControlsCellClasses), children: _jsx("div", { className: "hstack gap-2", children: isEditing ? (_jsxs(_Fragment, { children: [_jsx("button", { className: classNames("btn", cancelButtonClasses.length === 0
+    return (_jsx("td", { "aria-colindex": ariaColIndex, className: classNames(editControlsCellClasses), children: _jsx("div", { className: "hstack gap-2", children: isEditing ? (_jsxs(_Fragment, { children: [_jsx("button", { "aria-label": "Cancel", className: classNames("btn", cancelButtonClasses.length === 0
                             ? ["btn-secondary"]
-                            : cancelButtonClasses), onClick: stopPropagationWrapper(cancelEditingCallback), children: "Cancel" }), _jsx("button", { className: classNames("btn", saveButtonClasses.length === 0
+                            : cancelButtonClasses), onClick: stopPropagationWrapper(cancelEditingCallback), title: "Cancel", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: _jsx("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z" }) }) }), _jsx("button", { "aria-label": "Save", className: classNames("btn", saveButtonClasses.length === 0
                             ? ["btn-primary"]
-                            : saveButtonClasses), onClick: stopPropagationWrapper(saveCallback), children: "Save" })] })) : (_jsxs(_Fragment, { children: [deleteCallback && (_jsx("button", { className: classNames("btn", deleteButtonClasses.length === 0
-                            ? ["btn-primary"]
-                            : deleteButtonClasses), onClick: stopPropagationWrapper(deleteCallback), children: "Delete" })), _jsx("button", { className: classNames("btn", startButtonClasses.length === 0
+                            : saveButtonClasses), onClick: stopPropagationWrapper(saveCallback), title: "Save", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("path", { d: "M12 2h-2v3h2z" }), _jsx("path", { d: "M1.5 0A1.5 1.5 0 0 0 0 1.5v13A1.5 1.5 0 0 0 1.5 16h13a1.5 1.5 0 0 0 1.5-1.5V2.914a1.5 1.5 0 0 0-.44-1.06L14.147.439A1.5 1.5 0 0 0 13.086 0zM4 6a1 1 0 0 1-1-1V1h10v4a1 1 0 0 1-1 1zM3 9h10a1 1 0 0 1 1 1v5H2v-5a1 1 0 0 1 1-1" })] }) })] })) : (_jsxs(_Fragment, { children: [deleteCallback && (_jsx("button", { "aria-label": "Delete", className: classNames("btn", deleteButtonClasses.length === 0
+                            ? ["btn-secondary"]
+                            : deleteButtonClasses), onClick: stopPropagationWrapper(deleteCallback), title: "Delete", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: _jsx("path", { d: "M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5M8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5m3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0" }) }) })), _jsx("button", { "aria-label": "Edit", className: classNames("btn", startButtonClasses.length === 0
                             ? ["btn-primary"]
-                            : startButtonClasses), onClick: stopPropagationWrapper(beginEditingCallback), children: "Edit" })] })) }) }));
+                            : startButtonClasses), onClick: stopPropagationWrapper(beginEditingCallback), title: "Edit", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("path", { d: "M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" }), _jsx("path", { fillRule: "evenodd", d: "M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z" })] }) })] })) }) }));
 };
 export default EditControlsCell;

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

package/selection/SelectAllHeaderCell.d.ts

@@ -1,9 +1,9 @@
 import { FC } from "react";
-import { SelectType } from "./types";
+import { SelectionInfo } from "./types";
 interface SelectAllHeaderCellProps {
     onClick: () => void;
-    selectType: SelectType;
-    selectionExists: boolean;
+    selectionInfo: SelectionInfo;
+    totalRows: number;
     additionalClasses?: string[];
 }
 declare const SelectAllHeaderCell: FC<SelectAllHeaderCellProps>;

package/selection/SelectAllHeaderCell.js

@@ -1,42 +1,55 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import deselectAll from "./deselectAll";
-import selectAll from "./selectAll";
-import arrowPlaceholder from "../sorting/arrowPlaceholder";
+import { useEffect, useRef } from "react";
 import classNames from "classnames";
-// It seems like React does not support setting indeterminate states on
-// checkboxes in a controlled manner, which caused me to not want to refactor
-// this feature to use a checkbox input instead of SVG icons. I am not sure how
-// much of an issue using an uncontrolled input would be, but because at time of
-// this writing I had already implemented a solution with SVG, on balance I felt
-// like it was not worth going out of my way to change things up to use an
-// uncontrolled checkbox input.
-var getSelectIcon = function (selectMode, existingSelection) {
-    if (existingSelection) {
-        return deselectAll;
+var getCheckboxState = function (selectionInfo, noRows) {
+    var disabledState = {
+        indeterminate: false,
+        checked: false,
+        disabled: true,
+        description: "Select all (disabled)",
+    };
+    if (noRows) {
+        return disabledState;
     }
-    if (selectMode === "multi" && !existingSelection) {
-        return selectAll;
+    var existingSelection = selectionInfo.existingSelection;
+    if (existingSelection === "full") {
+        return {
+            indeterminate: false,
+            checked: true,
+            disabled: false,
+            description: "Deselect all rows",
+        };
     }
-    // Single select mode and none selected means that the button is disabled
-    return arrowPlaceholder;
-};
-var getCellAriaDescription = function (selectMode, existingSelection) {
-    if (existingSelection) {
-        return "Deselect all rows";
+    if (existingSelection === true || existingSelection === "partial") {
+        return {
+            indeterminate: true,
+            checked: true,
+            disabled: false,
+            description: "Deselect all rows",
+        };
     }
-    if (selectMode === "multi" && !existingSelection) {
-        return "Select all rows";
+    if (existingSelection === "none") {
+        return {
+            indeterminate: false,
+            checked: false,
+            disabled: false,
+            description: "Select all rows",
+        };
     }
-    // Single select mode and none selected means that the button is disabled
-    return "Selection input header cell";
+    // single select mode and none selected
+    return disabledState;
 };
 var SelectAllHeaderCell = function (_a) {
-    var onClick = _a.onClick, selectType = _a.selectType, selectionExists = _a.selectionExists, additionalClasses = _a.additionalClasses;
-    var disabled = selectType === "single" && !selectionExists;
-    var description = getCellAriaDescription(selectType, selectionExists);
-    return (_jsx("th", { "aria-colindex": 1, title: description, "aria-description": description, className: classNames("rbdg-select-header-cell", {
+    var onClick = _a.onClick, selectionInfo = _a.selectionInfo, totalRows = _a.totalRows, additionalClasses = _a.additionalClasses;
+    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 () {
+        ref.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    return (_jsx("th", { "aria-colindex": 1, title: description, "aria-description": description, className: classNames({
             "btn-primary": !additionalClasses || additionalClasses.length === 0,
-            "rbdg-clickable-grid-header-cell": !disabled,
-        }, additionalClasses || []), onClick: onClick, children: getSelectIcon(selectType, selectionExists) }));
+        }, additionalClasses || []), children: _jsx("input", { type: "checkbox", checked: checked, ref: ref, disabled: disabled, "aria-label": description, onChange: onClick }) }));
 };
 export default SelectAllHeaderCell;

package/selection/types.d.ts

@@ -14,3 +14,13 @@ export interface SingleSelectModel {
     groupName: string;
 }
 export type SelectModel = SingleSelectModel | MultiSelectModel;
+export type MultiExistingSelection = "full" | "partial" | "none";
+export interface SingleSelectionInfo {
+    selectType: "single";
+    existingSelection: boolean;
+}
+export interface MultiSelectionInfo {
+    selectType: "multi";
+    existingSelection: 'full' | 'partial' | 'none';
+}
+export type SelectionInfo = SingleSelectionInfo | MultiSelectionInfo;

package/style.css

@@ -1 +1 @@
-.rbdg-clickable-grid-header-cell{cursor:pointer}.rbdg-select-header-cell .rdbg-svg-icon{background-color:var(--bs-btn-bg)}.rbdg-select-header-cell .rdbg-svg-icon-foreground{color:var(--bs-btn-color)}.rbdg-select-header-cell:hover .rdbg-svg-icon{background-color:var(--bs-btn-hover-bg)}.rbdg-select-header-cell:hover .rdbg-svg-icon-foreground{color:var(--bs-btn-hover-color)}.rbdg-grid{display:table}.rbdg-grid-head{display:table-header-group}.rbdg-grid-body{display:table-row-group}.rbdg-grid-row{display:table-row}.rbdg-grid-cell{display:table-cell}
+.rbdg-clickable-grid-header-cell{cursor:pointer}

package/style.scss

@@ -1,41 +1,3 @@
 .rbdg-clickable-grid-header-cell {
   cursor: pointer;
-}
-
-.rbdg-select-header-cell {
-  .rdbg-svg-icon {
-    background-color: var(--bs-btn-bg);
-  }
-  .rdbg-svg-icon-foreground {
-    color: var(--bs-btn-color);
-  }
-
-  &:hover {
-    .rdbg-svg-icon {
-      background-color: var(--bs-btn-hover-bg);
-    }
-    .rdbg-svg-icon-foreground {
-      color: var(--bs-btn-hover-color);
-    }
-  }
-}
-
-.rbdg-grid {
-  display: table;
-}
-
-.rbdg-grid-head {
-  display: table-header-group;
-}
-
-.rbdg-grid-body {
-  display: table-row-group;
-}
-
-.rbdg-grid-row {
-  display: table-row;
-}
-
-.rbdg-grid-cell {
-  display: table-cell;
-}
+}

package/util/isSubset.d.ts

@@ -0,0 +1,2 @@
+declare const isSubset: (subset: number[], superSet: number[]) => boolean;
+export default isSubset;

package/util/isSubset.js

@@ -0,0 +1,11 @@
+var isSubset = function (subset, superSet) {
+    var supersetSet = new Set(superSet);
+    for (var _i = 0, subset_1 = subset; _i < subset_1.length; _i++) {
+        var num = subset_1[_i];
+        if (!supersetSet.has(num)) {
+            return false;
+        }
+    }
+    return true;
+};
+export default isSubset;

package/selection/deselectAll.d.ts

@@ -1,2 +0,0 @@
-declare const deselectAll: import("react/jsx-runtime").JSX.Element;
-export default deselectAll;

package/selection/deselectAll.js

@@ -1,3 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var deselectAll = (_jsxs("svg", { className: "rdbg-svg-icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor", children: [_jsx("desc", { children: "Minus sign inside a square" }), _jsx("rect", { className: "rdbg-svg-icon-foreground", x: "3.5", y: "7.5", width: "9", height: "1" })] }));
-export default deselectAll;

package/selection/selectAll.d.ts

@@ -1,2 +0,0 @@
-declare const selectAll: import("react/jsx-runtime").JSX.Element;
-export default selectAll;

package/selection/selectAll.js

@@ -1,3 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var selectAll = (_jsxs("svg", { className: "rdbg-svg-icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor", children: [_jsx("desc", { children: "Plus sign inside a square" }), _jsx("rect", { className: "rdbg-svg-icon-foreground", x: "3.5", y: "7.5", width: "9", height: "1" }), _jsx("rect", { className: "rdbg-svg-icon-foreground", x: "3.5", y: "7.5", width: "9", height: "1", transform: "translate(0 16) rotate(-90)" })] }));
-export default selectAll;