@absreim/react-bootstrap-data-grid 1.2.1 → 1.2.2

package/{ColHeaderCell.jsx → ColHeaderCell.js}

@@ -1,4 +1,5 @@
 "use client";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import downArrow from "./icons/downArrow";
 import upArrow from "./icons/upArrow";
 import arrowPlaceholder from "./icons/arrowPlaceholder";
@@ -44,14 +45,11 @@ var ColHeaderCell = function (_a) {
             }
         }
     };
-    return (<th className={classNames({
-            "cursor-pointer": sortModel,
+    return (_jsxs("th", { className: classNames({
+            "rbdg-clickable-grid-header-cell": sortModel,
             "table-active": sortModel === null || sortModel === void 0 ? void 0 : sortModel.sortOrder,
-        })} onClick={sortModel && handleClick} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut} aria-description={sortModel
+        }), onClick: sortModel && handleClick, onMouseOver: handleMouseOver, onMouseOut: handleMouseOut, "aria-description": sortModel
             ? "Column header"
-            : "Column header that can be clicked to change the sorting mode"} aria-colindex={ariaColIndex}>
-      {label}
-      {getSortSymbol()}
-    </th>);
+            : "Column header that can be clicked to change the sorting mode", "aria-colindex": ariaColIndex, children: [label, getSortSymbol()] }));
 };
 export default ColHeaderCell;

package/FilterOptionsTable/{DateFilterRow.jsx → DateFilterRow.js}

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { dateFilterSchemeNames, dateFilterSchemes, } from "../types";
 import { nanoid } from "nanoid/non-secure";
@@ -39,29 +40,6 @@ var DateFilterRow = function (_a) {
     var opSelectLabel = "".concat(columnLabel, " Column Filter Operator Selection");
     var startDateInputLabel = "".concat(columnLabel, " Column Filter Start Date");
     var endDateInputLabel = "".concat(columnLabel, " Column Filter End Date");
-    return (<tr>
-      <td>
-        <input name={checkboxLabel} aria-label={checkboxLabel} type="checkbox" checked={enabled} onChange={handleEnabledChange}/>
-      </td>
-      <td>{columnLabel}</td>
-      <td>{filterState.type === "date" ? "Date" : "Datetime"}</td>
-      <td>
-        <select name={opSelectLabel} aria-label={opSelectLabel} disabled={!enabled} className="form-select" value={scheme} onChange={handleOpChange}>
-          {dateFilterSchemes.map(function (scheme) { return (<option key={scheme} value={scheme}>
-              {dateFilterSchemeNames[scheme]}
-            </option>); })}
-        </select>
-      </td>
-      <td>
-        {scheme !== "endAt" && (<>
-            {scheme === "between" && (<label htmlFor={startDateInputId}>Start Date</label>)}
-            <input id={startDateInputId} className="form-control" type={inputType} required={enabled} disabled={!enabled} value={startDate} onChange={handleStartValueChange} aria-label={startDateInputLabel}/>
-          </>)}
-        {scheme !== "startFrom" && (<>
-            {scheme === "between" && (<label htmlFor={endDateInputId}>End Date</label>)}
-            <input id={endDateInputId} className="form-control" type={inputType} required={enabled} disabled={!enabled} value={endDate} onChange={handleEndValueChange} aria-label={endDateInputLabel}/>
-          </>)}
-      </td>
-    </tr>);
+    return (_jsxs("tr", { children: [_jsx("td", { children: _jsx("input", { name: checkboxLabel, "aria-label": checkboxLabel, type: "checkbox", checked: enabled, onChange: handleEnabledChange }) }), _jsx("td", { children: columnLabel }), _jsx("td", { children: filterState.type === "date" ? "Date" : "Datetime" }), _jsx("td", { children: _jsx("select", { name: opSelectLabel, "aria-label": opSelectLabel, disabled: !enabled, className: "form-select", value: scheme, onChange: handleOpChange, children: dateFilterSchemes.map(function (scheme) { return (_jsx("option", { value: scheme, children: dateFilterSchemeNames[scheme] }, scheme)); }) }) }), _jsxs("td", { children: [scheme !== "endAt" && (_jsxs(_Fragment, { children: [scheme === "between" && (_jsx("label", { htmlFor: startDateInputId, children: "Start Date" })), _jsx("input", { id: startDateInputId, className: "form-control", type: inputType, required: enabled, disabled: !enabled, value: startDate, onChange: handleStartValueChange, "aria-label": startDateInputLabel })] })), scheme !== "startFrom" && (_jsxs(_Fragment, { children: [scheme === "between" && (_jsx("label", { htmlFor: endDateInputId, children: "End Date" })), _jsx("input", { id: endDateInputId, className: "form-control", type: inputType, required: enabled, disabled: !enabled, value: endDate, onChange: handleEndValueChange, "aria-label": endDateInputLabel })] }))] })] }));
 };
 export default DateFilterRow;

package/FilterOptionsTable/{FilterOptionsTable.jsx → FilterOptionsTable.js}

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import StringFilterRow from "./StringFilterRow";
 import NumberFilterRow from "./NumberFilterRow";
@@ -76,14 +77,14 @@ var FilterOptionsTable = function (_a) {
             var colFilterState = formState[colName];
             switch (colFilterState.type) {
                 case "string": {
-                    return (<StringFilterRow key={colName} columnLabel={colLabel} filterState={colFilterState} setFilterState={getColStateSetter(colName)}/>);
+                    return (_jsx(StringFilterRow, { columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName) }, colName));
                 }
                 case "number": {
-                    return (<NumberFilterRow key={colName} columnLabel={colLabel} filterState={colFilterState} setFilterState={getColStateSetter(colName)}/>);
+                    return (_jsx(NumberFilterRow, { columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName) }, colName));
                 }
                 default: {
                     // date or datetime
-                    return (<DateFilterRow key={colName} includeTime={colFilterState.type === "datetime"} columnLabel={colLabel} filterState={colFilterState} setFilterState={getColStateSetter(colName)}/>);
+                    return (_jsx(DateFilterRow, { includeTime: colFilterState.type === "datetime", columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName) }, colName));
                 }
             }
         });
@@ -93,22 +94,6 @@ var FilterOptionsTable = function (_a) {
         var editableTableFilterState = convertFilterFormStateToEditableState(formState);
         setFilterState(editableTableFilterState);
     };
-    return (<form onSubmit={onSubmit}>
-      <table className="table">
-        <thead>
-          <tr>
-            <th>Enabled</th>
-            <th>Column</th>
-            <th>Type</th>
-            <th>Operator</th>
-            <th>Value</th>
-          </tr>
-        </thead>
-        <tbody>{getRows()}</tbody>
-      </table>
-      <button className="btn btn-secondary" type="submit">
-        Submit
-      </button>
-    </form>);
+    return (_jsxs("form", { onSubmit: onSubmit, children: [_jsxs("table", { className: "table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Enabled" }), _jsx("th", { children: "Column" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Operator" }), _jsx("th", { children: "Value" })] }) }), _jsx("tbody", { children: getRows() })] }), _jsx("button", { className: "btn btn-secondary", type: "submit", children: "Submit" })] }));
 };
 export default FilterOptionsTable;

package/FilterOptionsTable/{NumberFilterRow.jsx → NumberFilterRow.js}

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { numberFilterSchemeNames, numberFilterSchemes, } from "../types";
 var NumberFilterRow = function (_a) {
     var columnLabel = _a.columnLabel, filterState = _a.filterState, setFilterState = _a.setFilterState;
@@ -28,22 +29,6 @@ var NumberFilterRow = function (_a) {
     var checkboxLabel = "".concat(columnLabel, " Column Filter Toggle");
     var opSelectLabel = "".concat(columnLabel, " Column Filter Operator Selection");
     var valueInputLabel = "".concat(columnLabel, " Column Filter Value");
-    return (<tr>
-      <td>
-        <input name={checkboxLabel} aria-label={checkboxLabel} type="checkbox" checked={enabled} onChange={handleEnabledChange}/>
-      </td>
-      <td>{columnLabel}</td>
-      <td>Number</td>
-      <td>
-        <select name={opSelectLabel} aria-label={opSelectLabel} disabled={!enabled} className="form-select" value={scheme} onChange={handleOpChange}>
-          {numberFilterSchemes.map(function (scheme) { return (<option key={scheme} value={scheme}>
-              {numberFilterSchemeNames[scheme]}
-            </option>); })}
-        </select>
-      </td>
-      <td>
-        <input name={valueInputLabel} aria-label={valueInputLabel} className="form-control" type="number" required={enabled} disabled={!enabled} value={inputValue} onChange={handleNumInputValueChange}/>
-      </td>
-    </tr>);
+    return (_jsxs("tr", { children: [_jsx("td", { children: _jsx("input", { name: checkboxLabel, "aria-label": checkboxLabel, type: "checkbox", checked: enabled, onChange: handleEnabledChange }) }), _jsx("td", { children: columnLabel }), _jsx("td", { children: "Number" }), _jsx("td", { children: _jsx("select", { name: opSelectLabel, "aria-label": opSelectLabel, disabled: !enabled, className: "form-select", value: scheme, onChange: handleOpChange, children: numberFilterSchemes.map(function (scheme) { return (_jsx("option", { value: scheme, children: numberFilterSchemeNames[scheme] }, scheme)); }) }) }), _jsx("td", { children: _jsx("input", { name: valueInputLabel, "aria-label": valueInputLabel, className: "form-control", type: "number", required: enabled, disabled: !enabled, value: inputValue, onChange: handleNumInputValueChange }) })] }));
 };
 export default NumberFilterRow;

package/FilterOptionsTable/{StringFilterRow.jsx → StringFilterRow.js}

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { stringFilterSchemeNames, stringFilterSchemes, } from "../types";
 var StringFilterRow = function (_a) {
     var columnLabel = _a.columnLabel, filterState = _a.filterState, setFilterState = _a.setFilterState;
@@ -28,22 +29,6 @@ var StringFilterRow = function (_a) {
     var checkboxLabel = "".concat(columnLabel, " Column Filter Toggle");
     var opSelectLabel = "".concat(columnLabel, " Column Filter Operator Selection");
     var valueInputLabel = "".concat(columnLabel, " Column Filter Value");
-    return (<tr>
-      <td>
-        <input name={checkboxLabel} aria-label={checkboxLabel} type="checkbox" checked={enabled} onChange={handleEnabledChange}/>
-      </td>
-      <td>{columnLabel}</td>
-      <td>String</td>
-      <td>
-        <select name={opSelectLabel} aria-label={opSelectLabel} disabled={!enabled} className="form-select" value={scheme} onChange={handleOpChange}>
-          {stringFilterSchemes.map(function (scheme) { return (<option key={scheme} value={scheme}>
-              {stringFilterSchemeNames[scheme]}
-            </option>); })}
-        </select>
-      </td>
-      <td>
-        <input name={valueInputLabel} aria-label={valueInputLabel} className="form-control" required={enabled} disabled={!enabled} value={searchString} onChange={handleSearchStringChange}/>
-      </td>
-    </tr>);
+    return (_jsxs("tr", { children: [_jsx("td", { children: _jsx("input", { name: checkboxLabel, "aria-label": checkboxLabel, type: "checkbox", checked: enabled, onChange: handleEnabledChange }) }), _jsx("td", { children: columnLabel }), _jsx("td", { children: "String" }), _jsx("td", { children: _jsx("select", { name: opSelectLabel, "aria-label": opSelectLabel, disabled: !enabled, className: "form-select", value: scheme, onChange: handleOpChange, children: stringFilterSchemes.map(function (scheme) { return (_jsx("option", { value: scheme, children: stringFilterSchemeNames[scheme] }, scheme)); }) }) }), _jsx("td", { children: _jsx("input", { name: valueInputLabel, "aria-label": valueInputLabel, className: "form-control", required: enabled, disabled: !enabled, value: searchString, onChange: handleSearchStringChange }) })] }));
 };
 export default StringFilterRow;

package/{Grid.jsx → Grid.js}

@@ -1,4 +1,5 @@
 "use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import ColHeaderCell from "./ColHeaderCell";
 import useFilter from "./hooks/useFilter";
@@ -124,48 +125,24 @@ var Grid = function (_a) {
     // Once this component implements selection state, and if such interactivity is enabled, (conditionally) change the
     // aria role to "grid".
     // TODO: implement the above described features: conditionally changing aria role to grid
-    return (<div>
-      {filterState && filterModel && (<div>
-          <ToggleButton isActive={filterOptionsVisible} label={"".concat(filterOptionsVisible ? "Hide" : "Show ", " Filter Options")} onClick={handleToggleFilterOptions}/>
-          {filterOptionsVisible && (<FilterOptionsTable filterState={filterState} setFilterState={filterModel.setTableFilterState}/>)}
-        </div>)}
-      <table className={classNames("table", {
-            "table-hover": rowsAreSelectable,
-        })} aria-rowcount={filteredRows.length + 1}>
-        <thead>
-          <tr aria-rowindex={1}>
-            {showSelectCol && (<SelectAllHeaderCell selectType={selectModel.type} onClick={selectAllOnClick} selectionExists={selectionExists}/>)}
-            {cols.map(function (_a, index) {
-            var _b;
-            var name = _a.name, label = _a.label, sortable = _a.sortable;
-            var colSortModel = sortModel && sortable
-                ? {
-                    sortOrder: ((_b = sortModel.sortColDef) === null || _b === void 0 ? void 0 : _b.name) === name
-                        ? sortModel.sortColDef.order
-                        : null,
-                    setSortOrder: function (order) {
-                        sortModel.setSortColDef(order && { name: name, order: order });
-                    },
-                }
-                : undefined;
-            return (<ColHeaderCell key={name} label={label} sortModel={colSortModel} ariaColIndex={index + 1 + (showSelectCol ? 1 : 0)}/>);
-        })}
-          </tr>
-        </thead>
-        <tbody>
-          {displayRows.map(function (row, index) { return (<tr onClick={getRowClickHandler(row.origIndex)} className={classNames({
-                "table-active": selectedSet.has(row.origIndex),
-            })} key={row.origIndex} aria-rowindex={index + 2} data-rowindex={row.origIndex} aria-selected={getAriaSelectedValue(row.origIndex)}>
-              {showSelectCol && (<td>
-                  <SelectionInput selected={selectedSet.has(row.origIndex)} selectionInputModel={getSelectInputModel(row.origIndex, selectModel)} selectCallback={getSelectHandler(row.origIndex)}/>
-                </td>)}
-              {row.contents.map(function (value, index) { return (<td key={index} aria-colindex={index + 1 + (showSelectCol ? 1 : 0)}>
-                  {value}
-                </td>); })}
-            </tr>); })}
-        </tbody>
-      </table>
-      {pagination && (<Pagination componentSize={pagination.componentSize || "medium"} pageSizeOptions={pagination.pageSizeOptions} pageSizeIndex={pagination.pageSizeIndex} handleSetPageSizeIndex={pagination.setPageSizeIndex} handleSetPageNum={pagination.setCurrentPage} prePagingNumRows={sortedRows.length} maxPageButtons={pagination.maxPageButtons} currentPage={pagination.currentPage}/>)}
-    </div>);
+    return (_jsxs("div", { children: [filterState && filterModel && (_jsxs("div", { children: [_jsx(ToggleButton, { isActive: filterOptionsVisible, label: "".concat(filterOptionsVisible ? "Hide" : "Show ", " Filter Options"), onClick: handleToggleFilterOptions }), filterOptionsVisible && (_jsx(FilterOptionsTable, { filterState: filterState, setFilterState: filterModel.setTableFilterState }))] })), _jsxs("table", { className: classNames("table", {
+                    "table-hover": rowsAreSelectable,
+                }), "aria-rowcount": filteredRows.length + 1, children: [_jsx("thead", { children: _jsxs("tr", { "aria-rowindex": 1, children: [showSelectCol && (_jsx(SelectAllHeaderCell, { selectType: selectModel.type, onClick: selectAllOnClick, selectionExists: selectionExists })), cols.map(function (_a, index) {
+                                    var _b;
+                                    var name = _a.name, label = _a.label, sortable = _a.sortable;
+                                    var colSortModel = sortModel && sortable
+                                        ? {
+                                            sortOrder: ((_b = sortModel.sortColDef) === null || _b === void 0 ? void 0 : _b.name) === name
+                                                ? sortModel.sortColDef.order
+                                                : null,
+                                            setSortOrder: function (order) {
+                                                sortModel.setSortColDef(order && { name: name, order: order });
+                                            },
+                                        }
+                                        : undefined;
+                                    return (_jsx(ColHeaderCell, { label: label, sortModel: colSortModel, ariaColIndex: index + 1 + (showSelectCol ? 1 : 0) }, name));
+                                })] }) }), _jsx("tbody", { children: displayRows.map(function (row, index) { return (_jsxs("tr", { onClick: getRowClickHandler(row.origIndex), className: classNames({
+                                "table-active": selectedSet.has(row.origIndex),
+                            }), "aria-rowindex": index + 2, "data-rowindex": row.origIndex, "aria-selected": getAriaSelectedValue(row.origIndex), children: [showSelectCol && (_jsx("td", { children: _jsx(SelectionInput, { selected: selectedSet.has(row.origIndex), selectionInputModel: getSelectInputModel(row.origIndex, selectModel), selectCallback: getSelectHandler(row.origIndex) }) })), row.contents.map(function (value, index) { return (_jsx("td", { "aria-colindex": index + 1 + (showSelectCol ? 1 : 0), children: value }, index)); })] }, row.origIndex)); }) })] }), pagination && (_jsx(Pagination, { componentSize: pagination.componentSize || "medium", pageSizeOptions: pagination.pageSizeOptions, pageSizeIndex: pagination.pageSizeIndex, handleSetPageSizeIndex: pagination.setPageSizeIndex, handleSetPageNum: pagination.setCurrentPage, prePagingNumRows: sortedRows.length, maxPageButtons: pagination.maxPageButtons, currentPage: pagination.currentPage }))] }));
 };
 export default Grid;

package/{ToggleButton.jsx → ToggleButton.js}

@@ -1,4 +1,5 @@
 "use client";
+import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 var ToggleButton = function (_a) {
     var isActive = _a.isActive, label = _a.label, onClick = _a.onClick;
@@ -6,8 +7,6 @@ var ToggleButton = function (_a) {
     var variableClasses = {
         active: isActive,
     };
-    return (<button type="button" className={classNames(baseClasses, variableClasses)} aria-pressed={isActive} onClick={onClick}>
-      {label}
-    </button>);
+    return (_jsx("button", { type: "button", className: classNames(baseClasses, variableClasses), "aria-pressed": isActive, onClick: onClick, children: label }));
 };
 export default ToggleButton;

package/icons/arrowPlaceholder.d.ts

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

package/icons/arrowPlaceholder.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Temporary solution to prevent column widths from changing when hovering over
+// columns with a mouse.
+// More ideal permanent solution would be to fix column widths based on preset
+// values.
+var arrowPlaceholder = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: _jsx("desc", { children: "Empty transparent square for styling purposes" }) }));
+export default arrowPlaceholder;

package/icons/deselectAll.d.ts

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

package/icons/deselectAll.js

@@ -0,0 +1,3 @@
+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/icons/downArrow.d.ts

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

package/icons/downArrow.js

@@ -0,0 +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" })] }));
+export default downArrow;

package/icons/selectAll.d.ts

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

package/icons/selectAll.js

@@ -0,0 +1,3 @@
+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;

package/icons/upArrow.d.ts

@@ -1,2 +1,2 @@
-declare const upArrow: (grayed: boolean) => import("react").JSX.Element;
+declare const upArrow: (grayed: boolean) => import("react/jsx-runtime").JSX.Element;
 export default upArrow;

package/icons/upArrow.js

@@ -0,0 +1,13 @@
+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" })] })); };
+export default upArrow;

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

package/pagination/{PageSelector.jsx → PageSelector.js}

@@ -1,4 +1,5 @@
 "use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import classNames from "classnames";
 /**
@@ -47,73 +48,45 @@ var PageSelector = function (_a) {
         if (lowerBound === 1) {
             return null;
         }
-        return (<li className="page-item">
-        <a className="page-link" href="#" aria-label="First" onClick={function (event) {
-                event.preventDefault();
-                setPageNum(1);
-            }}>
-          <span aria-hidden="true">&lt;&lt;</span>
-        </a>
-      </li>);
+        return (_jsx("li", { className: "page-item", children: _jsx("a", { className: "page-link", href: "#", "aria-label": "First", onClick: function (event) {
+                    event.preventDefault();
+                    setPageNum(1);
+                }, children: _jsx("span", { "aria-hidden": "true", children: "<<" }) }) }));
     }
     function getPrevArrowButton() {
         if (pageNum === 1) {
             return null;
         }
-        return (<li className="page-item">
-        <a className="page-link" href="#" aria-label="Previous" onClick={function (event) {
-                event.preventDefault();
-                setPageNum(pageNum - 1);
-            }}>
-          <span aria-hidden="true">&lt;</span>
-        </a>
-      </li>);
+        return (_jsx("li", { className: "page-item", children: _jsx("a", { className: "page-link", href: "#", "aria-label": "Previous", onClick: function (event) {
+                    event.preventDefault();
+                    setPageNum(pageNum - 1);
+                }, children: _jsx("span", { "aria-hidden": "true", children: "<" }) }) }));
     }
     function getNextArrowButton() {
         if (pageNum === numPages) {
             return null;
         }
-        return (<li className="page-item">
-        <a className="page-link" href="#" aria-label="Next" onClick={function (event) {
-                event.preventDefault();
-                setPageNum(pageNum + 1);
-            }}>
-          <span aria-hidden="true">&gt;</span>
-        </a>
-      </li>);
+        return (_jsx("li", { className: "page-item", children: _jsx("a", { className: "page-link", href: "#", "aria-label": "Next", onClick: function (event) {
+                    event.preventDefault();
+                    setPageNum(pageNum + 1);
+                }, children: _jsx("span", { "aria-hidden": "true", children: ">" }) }) }));
     }
     function getLastArrowButton() {
         if (upperBound === numPages) {
             return null;
         }
-        return (<li className="page-item">
-        <a className="page-link" href="#" aria-label="Last" onClick={function (event) {
-                event.preventDefault();
-                setPageNum(numPages);
-            }}>
-          <span aria-hidden="true">&gt;&gt;</span>
-        </a>
-      </li>);
+        return (_jsx("li", { className: "page-item", children: _jsx("a", { className: "page-link", href: "#", "aria-label": "Last", onClick: function (event) {
+                    event.preventDefault();
+                    setPageNum(numPages);
+                }, children: _jsx("span", { "aria-hidden": "true", children: ">>" }) }) }));
     }
-    var indexButtons = buttonIndices.map(function (buttonIndex) { return (<li key={buttonIndex} className={classNames({
+    var indexButtons = buttonIndices.map(function (buttonIndex) { return (_jsx("li", { className: classNames({
             "page-item": true,
             active: pageNum === buttonIndex,
-        })} aria-current={pageNum === buttonIndex ? "page" : undefined}>
-      <a className="page-link" href="#" onClick={function (event) {
-            event.preventDefault();
-            setPageNum(buttonIndex);
-        }}>
-        {buttonIndex}
-      </a>
-    </li>); });
-    return (<nav aria-label={ariaLabel}>
-      <ul className={classNames(ulClasses)}>
-        {getFirstArrowButton()}
-        {getPrevArrowButton()}
-        {indexButtons}
-        {getNextArrowButton()}
-        {getLastArrowButton()}
-      </ul>
-    </nav>);
+        }), "aria-current": pageNum === buttonIndex ? "page" : undefined, children: _jsx("a", { className: "page-link", href: "#", onClick: function (event) {
+                event.preventDefault();
+                setPageNum(buttonIndex);
+            }, children: buttonIndex }) }, buttonIndex)); });
+    return (_jsx("nav", { "aria-label": ariaLabel, children: _jsxs("ul", { className: classNames(ulClasses), children: [getFirstArrowButton(), getPrevArrowButton(), indexButtons, getNextArrowButton(), getLastArrowButton()] }) }));
 };
 export default PageSelector;

package/pagination/PageSizeSelector.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+var PageSizeSelector = function (_a) {
+    var componentSize = _a.componentSize, pageSizeOptions = _a.pageSizeOptions, pageSizeIndex = _a.pageSizeIndex, handleSetPageSize = _a.handleSetPageSize;
+    var onChange = function (event) {
+        var pageSizeIndex = Number(event.target.value);
+        handleSetPageSize(pageSizeIndex);
+    };
+    return (_jsx("div", { children: _jsx("select", { className: classNames({
+                "form-select": true,
+                "form-select-lg": componentSize === "large",
+                "form-select-sm": componentSize === "small",
+            }), value: pageSizeIndex, "aria-label": "Number of Rows per Page", onChange: onChange, children: pageSizeOptions.map(function (numRows, index) { return (_jsx("option", { value: index, children: numRows }, index)); }) }) }));
+};
+export default PageSizeSelector;

package/pagination/{Pagination.jsx → Pagination.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PageSizeSelector from "./PageSizeSelector";
 import PageSelector from "./PageSelector";
 var Pagination = function (_a) {
@@ -14,9 +15,6 @@ var Pagination = function (_a) {
             handleSetPageNum(maxPages);
         }
     };
-    return (<div className="d-flex justify-content-end gap-2">
-      <PageSizeSelector componentSize={componentSize} pageSizeOptions={pageSizeOptions} pageSizeIndex={pageSizeIndex} handleSetPageSize={pageIndexAwarePageSizeSetter}/>
-      <PageSelector numPages={numPages} pageNum={currentPage} numButtons={maxPageButtons} setPageNum={handleSetPageNum} size={componentSize}/>
-    </div>);
+    return (_jsxs("div", { className: "d-flex justify-content-end gap-2", children: [_jsx(PageSizeSelector, { componentSize: componentSize, pageSizeOptions: pageSizeOptions, pageSizeIndex: pageSizeIndex, handleSetPageSize: pageIndexAwarePageSizeSetter }), _jsx(PageSelector, { numPages: numPages, pageNum: currentPage, numButtons: maxPageButtons, setPageNum: handleSetPageNum, size: componentSize })] }));
 };
 export default Pagination;

package/selection/{SelectAllHeaderCell.jsx → SelectAllHeaderCell.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import deselectAll from "../icons/deselectAll";
 import selectAll from "../icons/selectAll";
 import arrowPlaceholder from "../icons/arrowPlaceholder";
@@ -33,10 +34,8 @@ var SelectAllHeaderCell = function (_a) {
     var onClick = _a.onClick, selectType = _a.selectType, selectionExists = _a.selectionExists;
     var disabled = selectType === "single" && !selectionExists;
     var description = getCellAriaDescription(selectType, selectionExists);
-    return (<th aria-colindex={1} title={description} aria-description={description} className={classNames("select-header-cell", "btn-primary", {
-            "cursor-pointer": !disabled,
-        })} onClick={onClick}>
-      {getSelectIcon(selectType, selectionExists)}
-    </th>);
+    return (_jsx("th", { "aria-colindex": 1, title: description, "aria-description": description, className: classNames("rbdg-select-header-cell", "btn-primary", {
+            "rbdg-clickable-grid-header-cell": !disabled,
+        }), onClick: onClick, children: getSelectIcon(selectType, selectionExists) }));
 };
 export default SelectAllHeaderCell;

package/selection/{SelectionInput.jsx → SelectionInput.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 var SelectionInput = function (_a) {
     var selectionInputModel = _a.selectionInputModel, selected = _a.selected, selectCallback = _a.selectCallback;
     var type = selectionInputModel.type;
@@ -14,8 +15,8 @@ var SelectionInput = function (_a) {
             selectCallback();
         }
     };
-    return (<input aria-description="input to select the current row" onClick={function (event) {
+    return (_jsx("input", { "aria-description": "input to select the current row", onClick: function (event) {
             event.stopPropagation();
-        }} type={type} checked={selected} onChange={onChange} name={selectionInputModel.name}/>);
+        }, type: type, checked: selected, onChange: onChange, name: selectionInputModel.name }));
 };
 export default SelectionInput;

package/style.css

@@ -0,0 +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}

package/style.scss

@@ -0,0 +1,41 @@
+.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/icons/arrowPlaceholder.jsx

@@ -1,10 +0,0 @@
-// Temporary solution to prevent column widths from changing when hovering over
-// columns with a mouse.
-// More ideal permanent solution would be to fix column widths based on preset
-// values.
-var arrowPlaceholder = (<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-    <desc>
-      Empty transparent square for styling purposes
-    </desc>
-  </svg>);
-export default arrowPlaceholder;

package/icons/deselectAll.jsx

@@ -1,5 +0,0 @@
-var deselectAll = (<svg className="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
-    <desc>Minus sign inside a square</desc>
-    <rect className="svg-icon-foreground" x="3.5" y="7.5" width="9" height="1"/>
-  </svg>);
-export default deselectAll;

package/icons/downArrow.jsx

@@ -1,9 +0,0 @@
-var downArrow = (<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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>);
-export default downArrow;

package/icons/selectAll.jsx

@@ -1,6 +0,0 @@
-var selectAll = (<svg className="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
-    <desc>Plus sign inside a square</desc>
-    <rect className="svg-icon-foreground" x="3.5" y="7.5" width="9" height="1"/>
-    <rect className="svg-icon-foreground" x="3.5" y="7.5" width="9" height="1" transform="translate(0 16) rotate(-90)"/>
-  </svg>);
-export default selectAll;

package/icons/upArrow.jsx

@@ -1,21 +0,0 @@
-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 classNames from "classnames";
-var upArrow = function (grayed) { return (<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">
-    {!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>); };
-export default upArrow;

package/pagination/PageSizeSelector.jsx

@@ -1,20 +0,0 @@
-import classNames from "classnames";
-var PageSizeSelector = function (_a) {
-    var componentSize = _a.componentSize, pageSizeOptions = _a.pageSizeOptions, pageSizeIndex = _a.pageSizeIndex, handleSetPageSize = _a.handleSetPageSize;
-    var onChange = function (event) {
-        var pageSizeIndex = Number(event.target.value);
-        handleSetPageSize(pageSizeIndex);
-    };
-    return (<div>
-      <select className={classNames({
-            "form-select": true,
-            "form-select-lg": componentSize === "large",
-            "form-select-sm": componentSize === "small",
-        })} value={pageSizeIndex} aria-label="Number of Rows per Page" onChange={onChange}>
-        {pageSizeOptions.map(function (numRows, index) { return (<option key={index} value={index}>
-            {numRows}
-          </option>); })}
-      </select>
-    </div>);
-};
-export default PageSizeSelector;