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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/grid/Grid.js +26 -30
  2. package/grid/InternalGrid.d.ts +1 -0
  3. package/grid/InternalGrid.js +17 -18
  4. package/grid/editing/EditControlsCell.js +3 -4
  5. package/grid/editing/EditableRow.js +11 -17
  6. package/grid/editing/inputStrsToRowData.js +4 -4
  7. package/grid/export/ExportForm.js +25 -49
  8. package/grid/export/useExportFn.js +34 -58
  9. package/grid/filtering/DateFilterRow.js +17 -33
  10. package/grid/filtering/FilterOptionsTable.js +60 -96
  11. package/grid/filtering/FilterRow.js +4 -13
  12. package/grid/filtering/NumberFilterRow.js +10 -25
  13. package/grid/filtering/StringFilterRow.js +10 -25
  14. package/grid/filtering/types.js +6 -6
  15. package/grid/filtering/useFilterFormState.js +52 -65
  16. package/grid/main/BodyRows.d.ts +3 -1
  17. package/grid/main/BodyRows.js +6 -13
  18. package/grid/main/ColHeaderCell/index.js +4 -4
  19. package/grid/main/ColHeaderCell/useSortHeaderStates.js +10 -10
  20. package/grid/main/ToggleButton.js +3 -4
  21. package/grid/pagination/PageSelector.js +17 -18
  22. package/grid/pagination/PageSizeSelector.js +5 -6
  23. package/grid/pagination/Pagination.js +6 -7
  24. package/grid/pipeline/useAugFormattedRows.js +5 -20
  25. package/grid/pipeline/useCombinedPipeline/index.d.ts +2 -2
  26. package/grid/pipeline/useCombinedPipeline/index.js +21 -22
  27. package/grid/pipeline/useCombinedPipeline/useCurrentPageRows.d.ts +3 -3
  28. package/grid/pipeline/useCombinedPipeline/useCurrentPageRows.js +29 -24
  29. package/grid/pipeline/useCombinedPipeline/useDisplayRows.d.ts +2 -2
  30. package/grid/pipeline/useCombinedPipeline/useDisplayRows.js +40 -41
  31. package/grid/pipeline/useCombinedPipeline/useFilter.d.ts +2 -2
  32. package/grid/pipeline/useCombinedPipeline/useFilter.js +9 -9
  33. package/grid/pipeline/useCombinedPipeline/useFilterStateFromEditable.js +5 -6
  34. package/grid/pipeline/useCombinedPipeline/useFilterStateStore.js +6 -7
  35. package/grid/pipeline/useCombinedPipeline/useSortedRows.d.ts +3 -3
  36. package/grid/pipeline/useCombinedPipeline/useSortedRows.js +22 -27
  37. package/grid/pipeline/useGetInputStrSubmitCallback.js +6 -6
  38. package/grid/pipeline/useGridSelectionFns.js +30 -30
  39. package/grid/pipeline/useUnwrappedGridStyles.js +5 -7
  40. package/grid/selection/SelectAllHeaderCell.d.ts +1 -0
  41. package/grid/selection/SelectAllHeaderCell.js +9 -10
  42. package/grid/selection/SelectionInput.js +4 -6
  43. package/grid/sorting/arrowPlaceholder.js +1 -1
  44. package/grid/sorting/downArrow.js +1 -1
  45. package/grid/sorting/sortOrderToAriaSort.d.ts +4 -0
  46. package/grid/sorting/sortOrderToAriaSort.js +11 -0
  47. package/grid/sorting/upArrow.js +1 -10
  48. package/grid/styling/styleModelUnwrappers.js +22 -33
  49. package/grid/toolbar/Toolbar.js +13 -16
  50. package/grid/toolbar/ToolbarContainer.js +3 -4
  51. package/grid/toolbar/useInterfaces.js +5 -17
  52. package/grid/types.d.ts +9 -5
  53. package/grid/util/datetime.js +2 -4
  54. package/grid/util/getWidthStyle.js +6 -8
  55. package/grid/util/isSubset.js +3 -4
  56. package/grid/util/useControlledHover.js +8 -8
  57. package/grid-pro/ColHeaderCellPro.js +47 -42
  58. package/grid-pro/GridPro.js +42 -32
  59. package/grid-pro/assets/HorizontalGrip.d.ts +6 -0
  60. package/grid-pro/assets/HorizontalGrip.js +3 -0
  61. package/grid-pro/assets/VerticalGrip.d.ts +6 -0
  62. package/grid-pro/assets/VerticalGrip.js +3 -0
  63. package/grid-pro/index.d.ts +3 -0
  64. package/grid-pro/index.js +3 -0
  65. package/grid-pro/reorder/ReorderHandleCell.d.ts +12 -0
  66. package/grid-pro/reorder/ReorderHandleCell.js +220 -0
  67. package/grid-pro/reorder/ReorderHeaderCell.d.ts +3 -0
  68. package/grid-pro/reorder/ReorderHeaderCell.js +4 -0
  69. package/grid-pro/reorder/types.d.ts +12 -0
  70. package/grid-pro/reorder/types.js +1 -0
  71. package/grid-pro/resize/useResizeModel.js +40 -62
  72. package/grid-pro/types.d.ts +9 -2
  73. package/grid-pro/util/index.d.ts +1 -0
  74. package/grid-pro/util/index.js +1 -0
  75. package/grid-pro/util/regDragCleanup.d.ts +3 -0
  76. package/grid-pro/util/regDragCleanup.js +28 -0
  77. package/grid-pro/util/reorderRows.d.ts +3 -0
  78. package/grid-pro/util/reorderRows.js +17 -0
  79. package/grid-pro/util/types.d.ts +10 -0
  80. package/grid-pro/util/types.js +1 -0
  81. package/package.json +1 -1
  82. package/style.css +1 -1
@@ -1,10 +1,10 @@
1
1
  import inputStrsToRowData from "../editing/inputStrsToRowData";
2
- var useGetInputStrSubmitCallback = function (editModel, cols) {
3
- var getInputStrSubmitCallback = editModel &&
4
- (function (id) {
5
- var idSpecificCallback = editModel.getUpdateCallback(id);
6
- return function (inputStrs) {
7
- var rowData = inputStrsToRowData(cols, inputStrs);
2
+ const useGetInputStrSubmitCallback = (editModel, cols) => {
3
+ const getInputStrSubmitCallback = editModel &&
4
+ ((id) => {
5
+ const idSpecificCallback = editModel.getUpdateCallback(id);
6
+ return (inputStrs) => {
7
+ const rowData = inputStrsToRowData(cols, inputStrs);
8
8
  idSpecificCallback(rowData);
9
9
  };
10
10
  });
@@ -1,7 +1,7 @@
1
1
  import { useCallback, useId, useMemo } from "react";
2
2
  import isSubset from "../util/isSubset";
3
- var useGridSelectionFns = function (selectModel, rows) {
4
- var selectionExists = useMemo(function () {
3
+ const useGridSelectionFns = (selectModel, rows) => {
4
+ const selectionExists = useMemo(() => {
5
5
  if (!selectModel) {
6
6
  return false;
7
7
  }
@@ -10,7 +10,7 @@ var useGridSelectionFns = function (selectModel, rows) {
10
10
  }
11
11
  return selectModel.selected.length > 0;
12
12
  }, [selectModel]);
13
- var selectAllOnClick = useCallback(function () {
13
+ const selectAllOnClick = useCallback(() => {
14
14
  if (!selectModel) {
15
15
  return;
16
16
  }
@@ -23,14 +23,14 @@ var useGridSelectionFns = function (selectModel, rows) {
23
23
  return;
24
24
  }
25
25
  if (!selectionExists && selectModel.type === "multi") {
26
- var allRowIndices = rows.map(function (_, index) { return index; });
26
+ const allRowIndices = rows.map((_, index) => index);
27
27
  selectModel.setSelected(allRowIndices);
28
28
  }
29
29
  // Button should be disabled in the case of selectionExists &&
30
30
  // selectModel.type === "single", so function execution should never get
31
31
  // to this point.
32
32
  }, [rows, selectModel, selectionExists]);
33
- var getSelectHandler = function (index) { return function () {
33
+ const getSelectHandler = (index) => () => {
34
34
  if (!selectModel) {
35
35
  return;
36
36
  }
@@ -39,16 +39,16 @@ var useGridSelectionFns = function (selectModel, rows) {
39
39
  return;
40
40
  }
41
41
  selectModel.setSelected(selectModel.selected.concat(index));
42
- }; };
43
- var getDeselectHandler = function (index) { return function () {
42
+ };
43
+ const getDeselectHandler = (index) => () => {
44
44
  if (!selectModel || selectModel.type === "single") {
45
45
  return;
46
46
  }
47
- selectModel.setSelected(selectModel.selected.filter(function (num) { return num !== index; }));
48
- }; };
47
+ selectModel.setSelected(selectModel.selected.filter((num) => num !== index));
48
+ };
49
49
  // used to group radio buttons for selection
50
- var gridId = useId();
51
- var getSelectInputModel = function (id, selectModel) {
50
+ const gridId = useId();
51
+ const getSelectInputModel = (id, selectModel) => {
52
52
  if (selectModel.type === "single") {
53
53
  return {
54
54
  type: "radio",
@@ -60,10 +60,10 @@ var useGridSelectionFns = function (selectModel, rows) {
60
60
  deselectCallback: getDeselectHandler(id),
61
61
  };
62
62
  };
63
- var selectedSet = useMemo(function () {
64
- var set = new Set();
63
+ const selectedSet = useMemo(() => {
64
+ const set = new Set();
65
65
  if (selectModel && selectModel.type === "multi") {
66
- selectModel.selected.forEach(function (value) { return set.add(value); });
66
+ selectModel.selected.forEach((value) => set.add(value));
67
67
  }
68
68
  if (selectModel &&
69
69
  selectModel.type === "single" &&
@@ -72,8 +72,8 @@ var useGridSelectionFns = function (selectModel, rows) {
72
72
  }
73
73
  return set;
74
74
  }, [selectModel]);
75
- var rowsAreSelectable = selectModel && selectModel.mode !== "column";
76
- var selectionInfo = useMemo(function () {
75
+ const rowsAreSelectable = selectModel && selectModel.mode !== "column";
76
+ const selectionInfo = useMemo(() => {
77
77
  if (!selectModel) {
78
78
  return null;
79
79
  }
@@ -83,11 +83,11 @@ var useGridSelectionFns = function (selectModel, rows) {
83
83
  existingSelection: selectionExists,
84
84
  };
85
85
  }
86
- var getMultiExistingSelection = function (selectionExists, rows) {
87
- var rowIndices = rows.map(function (_, index) { return index; });
86
+ const getMultiExistingSelection = (selectionExists, rows) => {
87
+ const rowIndices = rows.map((_, index) => index);
88
88
  // Note that isFullSelection is true if there are no rows at all. In that case, the return value of this function
89
89
  // should be "none", not "full".
90
- var isFullSelection = isSubset(rowIndices, selectModel.selected);
90
+ const isFullSelection = isSubset(rowIndices, selectModel.selected);
91
91
  if (!selectionExists) {
92
92
  return "none";
93
93
  }
@@ -101,7 +101,7 @@ var useGridSelectionFns = function (selectModel, rows) {
101
101
  existingSelection: getMultiExistingSelection(selectionExists, rows),
102
102
  };
103
103
  }, [selectModel, selectionExists, rows]);
104
- var getRowClickHandler = function (index) { return function () {
104
+ const getRowClickHandler = (index) => () => {
105
105
  if (!rowsAreSelectable) {
106
106
  return;
107
107
  }
@@ -110,22 +110,22 @@ var useGridSelectionFns = function (selectModel, rows) {
110
110
  return;
111
111
  }
112
112
  getSelectHandler(index)();
113
- }; };
114
- var getAriaSelectedValue = function (id) {
113
+ };
114
+ const getAriaSelectedValue = (id) => {
115
115
  if (!selectModel) {
116
116
  return undefined;
117
117
  }
118
118
  return String(selectedSet.has(id));
119
119
  };
120
120
  return {
121
- selectedSet: selectedSet,
122
- rowsAreSelectable: rowsAreSelectable,
123
- selectionInfo: selectionInfo,
124
- selectAllOnClick: selectAllOnClick,
125
- getSelectHandler: getSelectHandler,
126
- getSelectInputModel: getSelectInputModel,
127
- getRowClickHandler: getRowClickHandler,
128
- getAriaSelectedValue: getAriaSelectedValue,
121
+ selectedSet,
122
+ rowsAreSelectable,
123
+ selectionInfo,
124
+ selectAllOnClick,
125
+ getSelectHandler,
126
+ getSelectInputModel,
127
+ getRowClickHandler,
128
+ getAriaSelectedValue,
129
129
  };
130
130
  };
131
131
  export default useGridSelectionFns;
@@ -1,17 +1,15 @@
1
1
  import { useMemo } from "react";
2
2
  import { unwrapAdditionalComponentsStyleModel, unwrapTableStyleModel, } from "../styling/styleModelUnwrappers";
3
- var UseUnwrappedGridStyles = function (styleModel) {
3
+ const UseUnwrappedGridStyles = (styleModel) => {
4
4
  // To give the developer the ability to specify between removing existing styles
5
5
  // and simply adding additional ones, we should migrate off of this "unwrapped"
6
6
  // design over time and instead apply logic based on the original params that
7
7
  // can be undefined.
8
- var unwrappedTableModel = useMemo(function () { return unwrapTableStyleModel(styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel); }, [styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel]);
9
- var unwrappedAdditionalStyleModel = useMemo(function () {
10
- return unwrapAdditionalComponentsStyleModel(styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel);
11
- }, [styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel]);
8
+ const unwrappedTableModel = useMemo(() => unwrapTableStyleModel(styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel), [styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel]);
9
+ const unwrappedAdditionalStyleModel = useMemo(() => unwrapAdditionalComponentsStyleModel(styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel), [styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel]);
12
10
  return {
13
- unwrappedTableModel: unwrappedTableModel,
14
- unwrappedAdditionalStyleModel: unwrappedAdditionalStyleModel,
11
+ unwrappedTableModel,
12
+ unwrappedAdditionalStyleModel,
15
13
  };
16
14
  };
17
15
  export default UseUnwrappedGridStyles;
@@ -6,6 +6,7 @@ interface SelectAllHeaderCellProps {
6
6
  totalRows: number;
7
7
  additionalClasses?: string[];
8
8
  style?: CSSProperties;
9
+ colIndexOffset?: number;
9
10
  }
10
11
  declare const SelectAllHeaderCell: FC<SelectAllHeaderCellProps>;
11
12
  export default SelectAllHeaderCell;
@@ -2,8 +2,8 @@
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
3
  import { useEffect, useRef } from "react";
4
4
  import classNames from "classnames";
5
- var getCheckboxState = function (selectionInfo, noRows) {
6
- var disabledState = {
5
+ const getCheckboxState = (selectionInfo, noRows) => {
6
+ const disabledState = {
7
7
  indeterminate: false,
8
8
  checked: false,
9
9
  disabled: true,
@@ -12,7 +12,7 @@ var getCheckboxState = function (selectionInfo, noRows) {
12
12
  if (noRows) {
13
13
  return disabledState;
14
14
  }
15
- var existingSelection = selectionInfo.existingSelection;
15
+ const { existingSelection } = selectionInfo;
16
16
  if (existingSelection === "full") {
17
17
  return {
18
18
  indeterminate: false,
@@ -40,15 +40,14 @@ var getCheckboxState = function (selectionInfo, noRows) {
40
40
  // single select mode and none selected
41
41
  return disabledState;
42
42
  };
43
- var SelectAllHeaderCell = function (_a) {
44
- var onClick = _a.onClick, selectionInfo = _a.selectionInfo, totalRows = _a.totalRows, additionalClasses = _a.additionalClasses, style = _a.style;
45
- var noRows = totalRows === 0;
46
- var _b = getCheckboxState(selectionInfo, noRows), indeterminate = _b.indeterminate, checked = _b.checked, disabled = _b.disabled, description = _b.description;
47
- var ref = useRef(null);
48
- useEffect(function () {
43
+ const SelectAllHeaderCell = ({ onClick, selectionInfo, totalRows, additionalClasses, style, colIndexOffset, }) => {
44
+ const noRows = totalRows === 0;
45
+ const { indeterminate, checked, disabled, description } = getCheckboxState(selectionInfo, noRows);
46
+ const ref = useRef(null);
47
+ useEffect(() => {
49
48
  ref.current.indeterminate = indeterminate;
50
49
  }, [indeterminate]);
51
- return (_jsx("th", { style: style, "aria-colindex": 1, title: description, "aria-description": description, className: classNames({
50
+ return (_jsx("th", { style: style, "aria-colindex": 1 + (colIndexOffset || 0), title: description, "aria-description": description, className: classNames({
52
51
  "btn-primary": !additionalClasses || additionalClasses.length === 0,
53
52
  }, additionalClasses || []), children: _jsx("input", { type: "checkbox", checked: checked, ref: ref, disabled: disabled, "aria-label": description, onChange: onClick }) }));
54
53
  };
@@ -1,10 +1,8 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import classNames from "classnames";
3
- var SelectionInput = function (_a) {
4
- var selectionInputModel = _a.selectionInputModel, selected = _a.selected, selectCallback = _a.selectCallback, additionalClasses = _a.additionalClasses;
5
- var type = selectionInputModel.type;
6
- var onChange = function (_a) {
7
- var checked = _a.target.checked;
3
+ const SelectionInput = ({ selectionInputModel, selected, selectCallback, additionalClasses, }) => {
4
+ const type = selectionInputModel.type;
5
+ const onChange = ({ target: { checked }, }) => {
8
6
  // theoretically, a radio button shouldn't become unchecked so the below
9
7
  // check of the "type" variable is not needed except for narrowing the
10
8
  // type of the "selectionInputModel"
@@ -16,7 +14,7 @@ var SelectionInput = function (_a) {
16
14
  selectCallback();
17
15
  }
18
16
  };
19
- return (_jsx("input", { className: classNames(additionalClasses || []), "aria-label": "Input to select the current row", onClick: function (event) {
17
+ return (_jsx("input", { className: classNames(additionalClasses || []), "aria-label": "Input to select the current row", onClick: (event) => {
20
18
  event.stopPropagation();
21
19
  }, type: type, checked: selected, onChange: onChange, name: selectionInputModel.name }));
22
20
  };
@@ -3,5 +3,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  // columns with a mouse.
4
4
  // More ideal permanent solution would be to fix column widths based on preset
5
5
  // values.
6
- 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" })] }));
6
+ 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" })] }));
7
7
  export default arrowPlaceholder;
@@ -1,3 +1,3 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- 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" })] }));
2
+ 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" })] }));
3
3
  export default downArrow;
@@ -0,0 +1,4 @@
1
+ import { SortOrder } from "./types";
2
+ import { AriaAttributes } from "react";
3
+ declare const sortOrderToAriaSort: (sortOrder: SortOrder | null) => AriaAttributes["aria-sort"];
4
+ export default sortOrderToAriaSort;
@@ -0,0 +1,11 @@
1
+ const sortOrderToAriaSort = (sortOrder) => {
2
+ switch (sortOrder) {
3
+ case "asc":
4
+ return "ascending";
5
+ case "desc":
6
+ return "descending";
7
+ default:
8
+ return "none";
9
+ }
10
+ };
11
+ export default sortOrderToAriaSort;
@@ -1,13 +1,4 @@
1
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
2
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
3
- if (ar || !(i in from)) {
4
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
5
- ar[i] = from[i];
6
- }
7
- }
8
- return to.concat(ar || Array.prototype.slice.call(from));
9
- };
10
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
11
2
  import classNames from "classnames";
12
- 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" })] })); };
3
+ 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" })] }));
13
4
  export default upArrow;
@@ -1,58 +1,47 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- var unwrapSharedStyleModel = function (sharedStyleModel) { return ({
1
+ const unwrapSharedStyleModel = (sharedStyleModel) => ({
13
2
  table: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.table) || [],
14
3
  tbody: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.tbody) || [],
15
4
  thead: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.thead) || [],
16
5
  theadTr: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.theadTr) || [],
17
- theadTh: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.theadTh) ? sharedStyleModel.theadTh : function () { return []; },
6
+ theadTh: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.theadTh) ? sharedStyleModel.theadTh : () => [],
18
7
  caption: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.caption) || [],
19
- }); };
20
- 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)
8
+ });
9
+ 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)
21
10
  ? tableStyleModel.tbodyTdInput
22
- : 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)
11
+ : () => [], 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)
23
12
  ? tableStyleModel.editCancelButton
24
- : function () { return []; }, editDeleteButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editDeleteButton)
13
+ : () => [], editDeleteButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editDeleteButton)
25
14
  ? tableStyleModel.editDeleteButton
26
- : function () { return []; }, editSaveButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editSaveButton)
15
+ : () => [], editSaveButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editSaveButton)
27
16
  ? tableStyleModel.editSaveButton
28
- : function () { return []; }, editStartButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editStartButton)
17
+ : () => [], editStartButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editStartButton)
29
18
  ? tableStyleModel.editStartButton
30
- : function () { return []; }, rowSelectColTh: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectColTh) || [], rowSelectColTd: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectColTd)
19
+ : () => [], rowSelectColTh: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectColTh) || [], rowSelectColTd: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectColTd)
31
20
  ? tableStyleModel.rowSelectColTd
32
- : function () { return []; }, rowSelectInput: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectInput)
21
+ : () => [], rowSelectInput: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectInput)
33
22
  ? tableStyleModel.rowSelectInput
34
- : function () { return []; } })); };
35
- export var unwrapFilterInputTableStyleModel = function (filterTableStyleModel) { return (__assign(__assign({}, unwrapSharedStyleModel(filterTableStyleModel)), { tbodyTr: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.tbodyTr)
23
+ : () => [] }));
24
+ export const unwrapFilterInputTableStyleModel = (filterTableStyleModel) => (Object.assign(Object.assign({}, unwrapSharedStyleModel(filterTableStyleModel)), { tbodyTr: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.tbodyTr)
36
25
  ? filterTableStyleModel.tbodyTr
37
- : function () { return []; }, tbodyTd: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.tbodyTd)
26
+ : () => [], tbodyTd: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.tbodyTd)
38
27
  ? filterTableStyleModel.tbodyTd
39
- : function () { return []; }, enablementInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.enablementInput)
28
+ : () => [], enablementInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.enablementInput)
40
29
  ? filterTableStyleModel.enablementInput
41
- : function () { return []; }, schemeSelectionInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.schemeSelectionInput)
30
+ : () => [], schemeSelectionInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.schemeSelectionInput)
42
31
  ? filterTableStyleModel.schemeSelectionInput
43
- : function () { return []; }, searchStringInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.searchStringInput)
32
+ : () => [], searchStringInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.searchStringInput)
44
33
  ? filterTableStyleModel.searchStringInput
45
- : function () { return []; }, numberInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.numberInput)
34
+ : () => [], numberInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.numberInput)
46
35
  ? filterTableStyleModel.numberInput
47
- : function () { return []; }, startDateInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.startDateInput)
36
+ : () => [], startDateInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.startDateInput)
48
37
  ? filterTableStyleModel.startDateInput
49
- : function () { return []; }, endDateInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.endDateInput)
38
+ : () => [], endDateInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.endDateInput)
50
39
  ? filterTableStyleModel.endDateInput
51
- : function () { return []; }, submitButton: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.submitButton) || [], form: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.form) || [] })); };
52
- export var unwrapAdditionalComponentsStyleModel = function (styleModel) { return ({
40
+ : () => [], submitButton: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.submitButton) || [], form: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.form) || [] }));
41
+ export const unwrapAdditionalComponentsStyleModel = (styleModel) => ({
53
42
  topLevelDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.topLevelDiv) || [],
54
43
  filterInputsDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputsDiv) || [],
55
44
  tableAndPaginationDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tableAndPaginationDiv) || [],
56
45
  filterUiToggleButton: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterUiToggleButton) || [],
57
46
  paginationUiDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.paginationUiDiv) || [],
58
- }); };
47
+ });
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useEffect, useMemo, useRef, useState, } from "react";
3
3
  import classNames from "classnames";
4
- var buttonSpecs = {
4
+ const buttonSpecs = {
5
5
  filtering: {
6
6
  label: "Filtering",
7
7
  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" }) })),
@@ -11,25 +11,22 @@ var buttonSpecs = {
11
11
  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" })] })),
12
12
  },
13
13
  };
14
- var Toolbar = function (_a) {
15
- var enabledFeatures = _a.enabledFeatures, option = _a.option, setOption = _a.setOption, toolbarClasses = _a.toolbarClasses, activeClasses = _a.activeClasses, inactiveClasses = _a.inactiveClasses;
16
- var enabledOptions = useMemo(function () {
17
- return Object.keys(buttonSpecs).filter(function (toolbarOption) { return !!enabledFeatures[toolbarOption]; });
18
- }, [enabledFeatures]);
19
- var _b = useState(enabledOptions[0] || null), focusableOption = _b[0], setFocusableOption = _b[1];
20
- var divRef = useRef(null);
14
+ const Toolbar = ({ enabledFeatures, option, setOption, toolbarClasses, activeClasses, inactiveClasses, }) => {
15
+ const enabledOptions = useMemo(() => Object.keys(buttonSpecs).filter((toolbarOption) => !!enabledFeatures[toolbarOption]), [enabledFeatures]);
16
+ const [focusableOption, setFocusableOption] = useState(enabledOptions[0] || null);
17
+ const divRef = useRef(null);
21
18
  // Deals with cases where selected option is no longer available due to enabledFeatures prop getting changed.
22
- var actualOption = useMemo(function () {
19
+ const actualOption = useMemo(() => {
23
20
  if (focusableOption === null || !enabledOptions.includes(focusableOption)) {
24
21
  return enabledOptions[0] || null;
25
22
  }
26
23
  return focusableOption;
27
24
  }, [enabledOptions, focusableOption]);
28
- var onKeydown = function (event) {
25
+ const onKeydown = (event) => {
29
26
  if (actualOption === null) {
30
27
  return;
31
28
  }
32
- var currentIndex = enabledOptions.findIndex(function (option) { return option === actualOption; });
29
+ const currentIndex = enabledOptions.findIndex((option) => option === actualOption);
33
30
  if (currentIndex === -1) {
34
31
  // Should not happen due normalization of the value by the actualOption useMemo hook.
35
32
  // This branch is put here anyway for explanatory purposes.
@@ -54,7 +51,7 @@ var Toolbar = function (_a) {
54
51
  return;
55
52
  }
56
53
  };
57
- useEffect(function () {
54
+ useEffect(() => {
58
55
  if (actualOption === null) {
59
56
  return;
60
57
  }
@@ -64,18 +61,18 @@ var Toolbar = function (_a) {
64
61
  if (!divRef.current.contains(document.activeElement)) {
65
62
  return;
66
63
  }
67
- var focusTarget = divRef.current.querySelector(":scope > button[data-toolbar-option=\"".concat(actualOption, "\"]"));
64
+ const focusTarget = divRef.current.querySelector(`:scope > button[data-toolbar-option="${actualOption}"]`);
68
65
  if (focusTarget) {
69
66
  focusTarget.focus();
70
67
  }
71
68
  }, [actualOption]);
72
- return (_jsx("div", { ref: divRef, className: classNames(toolbarClasses || ["hstack", "gap-2", "justify-content-start", "px-2"]), role: "toolbar", onKeyDown: onKeydown, children: enabledOptions.map(function (toolbarOption) { return (_jsx("button", { tabIndex: actualOption === toolbarOption ? 0 : -1, "data-toolbar-option": toolbarOption, "aria-label": buttonSpecs[toolbarOption].label, "aria-roledescription": "Grouped toggle button to show/hide ".concat(toolbarOption, " UI"), "aria-pressed": option === toolbarOption, className: classNames.apply(void 0, (option === toolbarOption
69
+ 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
73
70
  ? activeClasses || ["btn", "btn-outline-secondary", "active"]
74
- : inactiveClasses || ["btn", "btn-outline-secondary"])), title: buttonSpecs[toolbarOption].label, onClick: function () {
71
+ : inactiveClasses || ["btn", "btn-outline-secondary"])), title: buttonSpecs[toolbarOption].label, onClick: () => {
75
72
  setFocusableOption(toolbarOption);
76
73
  setOption(option === toolbarOption
77
74
  ? null
78
75
  : toolbarOption);
79
- }, children: buttonSpecs[toolbarOption].icon }, toolbarOption)); }) }));
76
+ }, children: buttonSpecs[toolbarOption].icon }, toolbarOption))) }));
80
77
  };
81
78
  export default Toolbar;
@@ -2,10 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useState } from "react";
3
3
  import Toolbar from "./Toolbar";
4
4
  import classNames from "classnames";
5
- var ToolbarContainer = function (_a) {
6
- var interfaces = _a.interfaces, styleModel = _a.styleModel;
7
- var _b = useState(null), option = _b[0], setOption = _b[1];
8
- var enabledFeatures = Object.keys(interfaces).reduce(function (prev, toolbarOption) {
5
+ const ToolbarContainer = ({ interfaces, styleModel, }) => {
6
+ const [option, setOption] = useState(null);
7
+ const enabledFeatures = Object.keys(interfaces).reduce((prev, toolbarOption) => {
9
8
  prev[toolbarOption] =
10
9
  !!interfaces[toolbarOption];
11
10
  return prev;
@@ -1,23 +1,11 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
1
  import { jsx as _jsx } from "react/jsx-runtime";
13
2
  import FilterOptionsTable from "../filtering/FilterOptionsTable";
14
3
  import { useMemo } from "react";
15
4
  import ExportForm from "../export/ExportForm";
16
- var useInterfaces = function (_a) {
17
- var filtering = _a.filtering, exporting = _a.exporting;
18
- return useMemo(function () { return ({
19
- filtering: filtering ? _jsx(FilterOptionsTable, __assign({}, filtering)) : undefined,
20
- exporting: exporting ? _jsx(ExportForm, __assign({}, exporting)) : undefined,
21
- }); }, [exporting, filtering]);
5
+ const useInterfaces = ({ filtering, exporting, }) => {
6
+ return useMemo(() => ({
7
+ filtering: filtering ? _jsx(FilterOptionsTable, Object.assign({}, filtering)) : undefined,
8
+ exporting: exporting ? _jsx(ExportForm, Object.assign({}, exporting)) : undefined,
9
+ }), [exporting, filtering]);
22
10
  };
23
11
  export default useInterfaces;
package/grid/types.d.ts CHANGED
@@ -16,17 +16,22 @@ export interface ColDefBase<ValueType = any> {
16
16
  export type ColDef<ValueType = any> = ColDefBase<ValueType> & {
17
17
  width?: number;
18
18
  };
19
- type ValidRowData = Record<string, any>;
19
+ export type ValidRowData = Record<string, any>;
20
20
  export type RowData<Data extends ValidRowData = ValidRowData> = Data;
21
21
  export type RowId = string | number;
22
22
  export interface RowDef<Data extends ValidRowData = ValidRowData> {
23
23
  id: RowId;
24
24
  data: RowData<Data>;
25
25
  }
26
- export interface FormattedRow {
26
+ export type AugRowDef<Data extends ValidRowData = ValidRowData> = RowDef<Data> & {
27
+ origIndex: number;
28
+ };
29
+ export type PostPaginationRowDef<Data extends ValidRowData = ValidRowData> = AugRowDef & {
30
+ prePaginationIndex: number;
31
+ };
32
+ export type FormattedRow = {
27
33
  contents: CellData[];
28
- id: RowId;
29
- }
34
+ } & Omit<PostPaginationRowDef, "data">;
30
35
  export type AugCellData = CellData & {
31
36
  width?: number;
32
37
  };
@@ -60,4 +65,3 @@ export interface ColHeaderCellProps {
60
65
  additionalClasses?: string[];
61
66
  width?: number;
62
67
  }
63
- export {};
@@ -1,5 +1,3 @@
1
1
  import dayjs from "dayjs";
2
- export var dateToInputStr = function (date) { return dayjs(date).format("YYYY-MM-DD"); };
3
- export var dateToDatetimeInputStr = function (date) {
4
- return dayjs(date).format("YYYY-MM-DDTHH:mm");
5
- };
2
+ export const dateToInputStr = (date) => dayjs(date).format("YYYY-MM-DD");
3
+ export const dateToDatetimeInputStr = (date) => dayjs(date).format("YYYY-MM-DDTHH:mm");
@@ -1,9 +1,7 @@
1
- var getWidthStyle = function (width) {
2
- return width === undefined
3
- ? undefined
4
- : {
5
- minWidth: width,
6
- maxWidth: width,
7
- };
8
- };
1
+ const getWidthStyle = (width) => width === undefined
2
+ ? undefined
3
+ : {
4
+ minWidth: width,
5
+ maxWidth: width,
6
+ };
9
7
  export default getWidthStyle;
@@ -1,7 +1,6 @@
1
- var isSubset = function (subset, superSet) {
2
- var supersetSet = new Set(superSet);
3
- for (var _i = 0, subset_1 = subset; _i < subset_1.length; _i++) {
4
- var member = subset_1[_i];
1
+ const isSubset = (subset, superSet) => {
2
+ const supersetSet = new Set(superSet);
3
+ for (const member of subset) {
5
4
  if (!supersetSet.has(member)) {
6
5
  return false;
7
6
  }
@@ -1,13 +1,13 @@
1
1
  import { useState } from "react";
2
- var useControlledHover = function () {
3
- var _a = useState(false), isHovering = _a[0], setIsHovering = _a[1];
4
- var handleMouseOver = function () { return setIsHovering(true); };
5
- var handleMouseOut = function () { return setIsHovering(false); };
2
+ const useControlledHover = () => {
3
+ const [isHovering, setIsHovering] = useState(false);
4
+ const handleMouseOver = () => setIsHovering(true);
5
+ const handleMouseOut = () => setIsHovering(false);
6
6
  return {
7
- isHovering: isHovering,
8
- setIsHovering: setIsHovering,
9
- handleMouseOver: handleMouseOver,
10
- handleMouseOut: handleMouseOut,
7
+ isHovering,
8
+ setIsHovering,
9
+ handleMouseOver,
10
+ handleMouseOut,
11
11
  };
12
12
  };
13
13
  export default useControlledHover;