@salt-ds/data-grid 1.0.5 → 1.0.7
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.
- package/CHANGELOG.md +216 -0
- package/dist-cjs/BaseCell.js +50 -48
- package/dist-cjs/BaseCell.js.map +1 -1
- package/dist-cjs/CellEditor.js +0 -2
- package/dist-cjs/CellEditor.js.map +1 -1
- package/dist-cjs/CellFrame.js +25 -33
- package/dist-cjs/CellFrame.js.map +1 -1
- package/dist-cjs/ColumnDataContext.js +1 -3
- package/dist-cjs/ColumnDataContext.js.map +1 -1
- package/dist-cjs/ColumnDragContext.js +1 -3
- package/dist-cjs/ColumnDragContext.js.map +1 -1
- package/dist-cjs/ColumnGroup.js +2 -6
- package/dist-cjs/ColumnGroup.js.map +1 -1
- package/dist-cjs/ColumnSortContext.js +1 -3
- package/dist-cjs/ColumnSortContext.js.map +1 -1
- package/dist-cjs/CornerTag.js +7 -6
- package/dist-cjs/CornerTag.js.map +1 -1
- package/dist-cjs/CursorContext.js +1 -3
- package/dist-cjs/CursorContext.js.map +1 -1
- package/dist-cjs/DropdownCellEditor.js +25 -28
- package/dist-cjs/DropdownCellEditor.js.map +1 -1
- package/dist-cjs/EditorContext.js +1 -3
- package/dist-cjs/EditorContext.js.map +1 -1
- package/dist-cjs/Grid.css.js +1 -1
- package/dist-cjs/Grid.js +174 -183
- package/dist-cjs/Grid.js.map +1 -1
- package/dist-cjs/GridColumn.js +4 -8
- package/dist-cjs/GridColumn.js.map +1 -1
- package/dist-cjs/GridContext.js +1 -3
- package/dist-cjs/GridContext.js.map +1 -1
- package/dist-cjs/GroupHeaderCell.js +29 -30
- package/dist-cjs/GroupHeaderCell.js.map +1 -1
- package/dist-cjs/GroupHeaderCellValue.js +1 -5
- package/dist-cjs/GroupHeaderCellValue.js.map +1 -1
- package/dist-cjs/HeaderCell.js +94 -90
- package/dist-cjs/HeaderCell.js.map +1 -1
- package/dist-cjs/HeaderCellValue.js +1 -6
- package/dist-cjs/HeaderCellValue.js.map +1 -1
- package/dist-cjs/LayoutContext.js +0 -2
- package/dist-cjs/LayoutContext.js.map +1 -1
- package/dist-cjs/NumberRange.js +2 -4
- package/dist-cjs/NumberRange.js.map +1 -1
- package/dist-cjs/NumericColumn.css.js +1 -1
- package/dist-cjs/NumericColumn.js +31 -30
- package/dist-cjs/NumericColumn.js.map +1 -1
- package/dist-cjs/RowSelectionCheckboxCellValue.js +7 -10
- package/dist-cjs/RowSelectionCheckboxCellValue.js.map +1 -1
- package/dist-cjs/RowSelectionCheckboxColumn.js +14 -13
- package/dist-cjs/RowSelectionCheckboxColumn.js.map +1 -1
- package/dist-cjs/RowSelectionCheckboxHeaderCellValue.js +22 -18
- package/dist-cjs/RowSelectionCheckboxHeaderCellValue.js.map +1 -1
- package/dist-cjs/RowSelectionRadioCellValue.js +6 -8
- package/dist-cjs/RowSelectionRadioCellValue.js.map +1 -1
- package/dist-cjs/RowSelectionRadioColumn.js +12 -11
- package/dist-cjs/RowSelectionRadioColumn.js.map +1 -1
- package/dist-cjs/RowSelectionRadioHeaderCell.js +2 -10
- package/dist-cjs/RowSelectionRadioHeaderCell.js.map +1 -1
- package/dist-cjs/RowValidationStatus.js +0 -2
- package/dist-cjs/RowValidationStatus.js.map +1 -1
- package/dist-cjs/SelectionContext.js +1 -3
- package/dist-cjs/SelectionContext.js.map +1 -1
- package/dist-cjs/SizingContext.js +1 -3
- package/dist-cjs/SizingContext.js.map +1 -1
- package/dist-cjs/TextCellEditor.css.js +1 -1
- package/dist-cjs/TextCellEditor.js +14 -20
- package/dist-cjs/TextCellEditor.js.map +1 -1
- package/dist-cjs/index.js +0 -2
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/internal/CellMeasure.css.js +1 -1
- package/dist-cjs/internal/CellMeasure.js +3 -18
- package/dist-cjs/internal/CellMeasure.js.map +1 -1
- package/dist-cjs/internal/CellStatusIcons.js +41 -37
- package/dist-cjs/internal/CellStatusIcons.js.map +1 -1
- package/dist-cjs/internal/ColumnDropTarget.js +3 -8
- package/dist-cjs/internal/ColumnDropTarget.js.map +1 -1
- package/dist-cjs/internal/ColumnGhost.js +17 -29
- package/dist-cjs/internal/ColumnGhost.js.map +1 -1
- package/dist-cjs/internal/Cursor.js +3 -7
- package/dist-cjs/internal/Cursor.js.map +1 -1
- package/dist-cjs/internal/DefaultCellValue.js +11 -10
- package/dist-cjs/internal/DefaultCellValue.js.map +1 -1
- package/dist-cjs/internal/FakeCell.js +8 -16
- package/dist-cjs/internal/FakeCell.js.map +1 -1
- package/dist-cjs/internal/FakeGroupCell.js +0 -2
- package/dist-cjs/internal/FakeGroupCell.js.map +1 -1
- package/dist-cjs/internal/FakeHeaderCell.js +1 -5
- package/dist-cjs/internal/FakeHeaderCell.js.map +1 -1
- package/dist-cjs/internal/GroupHeaderRow.js +9 -20
- package/dist-cjs/internal/GroupHeaderRow.js.map +1 -1
- package/dist-cjs/internal/HeaderRow.js +17 -23
- package/dist-cjs/internal/HeaderRow.js.map +1 -1
- package/dist-cjs/internal/LeftPart.js +21 -27
- package/dist-cjs/internal/LeftPart.js.map +1 -1
- package/dist-cjs/internal/MiddlePart.js +19 -25
- package/dist-cjs/internal/MiddlePart.js.map +1 -1
- package/dist-cjs/internal/RightPart.js +21 -26
- package/dist-cjs/internal/RightPart.js.map +1 -1
- package/dist-cjs/internal/Scrollable.js +12 -13
- package/dist-cjs/internal/Scrollable.js.map +1 -1
- package/dist-cjs/internal/TableBody.js +17 -19
- package/dist-cjs/internal/TableBody.js.map +1 -1
- package/dist-cjs/internal/TableColGroup.js +7 -17
- package/dist-cjs/internal/TableColGroup.js.map +1 -1
- package/dist-cjs/internal/TableRow.js +87 -79
- package/dist-cjs/internal/TableRow.js.map +1 -1
- package/dist-cjs/internal/TopLeftPart.js +20 -31
- package/dist-cjs/internal/TopLeftPart.js.map +1 -1
- package/dist-cjs/internal/TopPart.js +20 -37
- package/dist-cjs/internal/TopPart.js.map +1 -1
- package/dist-cjs/internal/TopRightPart.js +26 -30
- package/dist-cjs/internal/TopRightPart.js.map +1 -1
- package/dist-cjs/internal/gridHooks.js +23 -25
- package/dist-cjs/internal/gridHooks.js.map +1 -1
- package/dist-cjs/internal/utils.js +5 -7
- package/dist-cjs/internal/utils.js.map +1 -1
- package/dist-es/BaseCell.js +50 -46
- package/dist-es/BaseCell.js.map +1 -1
- package/dist-es/CellEditor.js.map +1 -1
- package/dist-es/CellFrame.js +25 -31
- package/dist-es/CellFrame.js.map +1 -1
- package/dist-es/ColumnDataContext.js +1 -1
- package/dist-es/ColumnDataContext.js.map +1 -1
- package/dist-es/ColumnDragContext.js +1 -1
- package/dist-es/ColumnDragContext.js.map +1 -1
- package/dist-es/ColumnGroup.js +2 -4
- package/dist-es/ColumnGroup.js.map +1 -1
- package/dist-es/ColumnSortContext.js +1 -1
- package/dist-es/ColumnSortContext.js.map +1 -1
- package/dist-es/CornerTag.js +7 -4
- package/dist-es/CornerTag.js.map +1 -1
- package/dist-es/CursorContext.js +1 -1
- package/dist-es/CursorContext.js.map +1 -1
- package/dist-es/DropdownCellEditor.js +25 -26
- package/dist-es/DropdownCellEditor.js.map +1 -1
- package/dist-es/EditorContext.js +1 -1
- package/dist-es/EditorContext.js.map +1 -1
- package/dist-es/Grid.css.js +1 -1
- package/dist-es/Grid.js +174 -181
- package/dist-es/Grid.js.map +1 -1
- package/dist-es/GridColumn.js +4 -6
- package/dist-es/GridColumn.js.map +1 -1
- package/dist-es/GridContext.js +1 -1
- package/dist-es/GridContext.js.map +1 -1
- package/dist-es/GroupHeaderCell.js +29 -28
- package/dist-es/GroupHeaderCell.js.map +1 -1
- package/dist-es/GroupHeaderCellValue.js +1 -3
- package/dist-es/GroupHeaderCellValue.js.map +1 -1
- package/dist-es/HeaderCell.js +94 -88
- package/dist-es/HeaderCell.js.map +1 -1
- package/dist-es/HeaderCellValue.js +1 -4
- package/dist-es/HeaderCellValue.js.map +1 -1
- package/dist-es/LayoutContext.js.map +1 -1
- package/dist-es/NumberRange.js +2 -2
- package/dist-es/NumberRange.js.map +1 -1
- package/dist-es/NumericColumn.css.js +1 -1
- package/dist-es/NumericColumn.js +31 -28
- package/dist-es/NumericColumn.js.map +1 -1
- package/dist-es/RowSelectionCheckboxCellValue.js +7 -8
- package/dist-es/RowSelectionCheckboxCellValue.js.map +1 -1
- package/dist-es/RowSelectionCheckboxColumn.js +14 -11
- package/dist-es/RowSelectionCheckboxColumn.js.map +1 -1
- package/dist-es/RowSelectionCheckboxHeaderCellValue.js +22 -16
- package/dist-es/RowSelectionCheckboxHeaderCellValue.js.map +1 -1
- package/dist-es/RowSelectionRadioCellValue.js +6 -6
- package/dist-es/RowSelectionRadioCellValue.js.map +1 -1
- package/dist-es/RowSelectionRadioColumn.js +12 -9
- package/dist-es/RowSelectionRadioColumn.js.map +1 -1
- package/dist-es/RowSelectionRadioHeaderCell.js +2 -8
- package/dist-es/RowSelectionRadioHeaderCell.js.map +1 -1
- package/dist-es/RowValidationStatus.js.map +1 -1
- package/dist-es/SelectionContext.js +1 -1
- package/dist-es/SelectionContext.js.map +1 -1
- package/dist-es/SizingContext.js +1 -1
- package/dist-es/SizingContext.js.map +1 -1
- package/dist-es/TextCellEditor.css.js +1 -1
- package/dist-es/TextCellEditor.js +14 -18
- package/dist-es/TextCellEditor.js.map +1 -1
- package/dist-es/internal/CellMeasure.css.js +1 -1
- package/dist-es/internal/CellMeasure.js +3 -16
- package/dist-es/internal/CellMeasure.js.map +1 -1
- package/dist-es/internal/CellStatusIcons.js +41 -35
- package/dist-es/internal/CellStatusIcons.js.map +1 -1
- package/dist-es/internal/ColumnDropTarget.js +3 -6
- package/dist-es/internal/ColumnDropTarget.js.map +1 -1
- package/dist-es/internal/ColumnGhost.js +17 -27
- package/dist-es/internal/ColumnGhost.js.map +1 -1
- package/dist-es/internal/Cursor.js +3 -5
- package/dist-es/internal/Cursor.js.map +1 -1
- package/dist-es/internal/DefaultCellValue.js +11 -8
- package/dist-es/internal/DefaultCellValue.js.map +1 -1
- package/dist-es/internal/FakeCell.js +8 -14
- package/dist-es/internal/FakeCell.js.map +1 -1
- package/dist-es/internal/FakeGroupCell.js.map +1 -1
- package/dist-es/internal/FakeHeaderCell.js +1 -3
- package/dist-es/internal/FakeHeaderCell.js.map +1 -1
- package/dist-es/internal/GroupHeaderRow.js +9 -18
- package/dist-es/internal/GroupHeaderRow.js.map +1 -1
- package/dist-es/internal/HeaderRow.js +17 -21
- package/dist-es/internal/HeaderRow.js.map +1 -1
- package/dist-es/internal/LeftPart.js +21 -25
- package/dist-es/internal/LeftPart.js.map +1 -1
- package/dist-es/internal/MiddlePart.js +19 -23
- package/dist-es/internal/MiddlePart.js.map +1 -1
- package/dist-es/internal/RightPart.js +21 -24
- package/dist-es/internal/RightPart.js.map +1 -1
- package/dist-es/internal/Scrollable.js +12 -11
- package/dist-es/internal/Scrollable.js.map +1 -1
- package/dist-es/internal/TableBody.js +17 -17
- package/dist-es/internal/TableBody.js.map +1 -1
- package/dist-es/internal/TableColGroup.js +7 -15
- package/dist-es/internal/TableColGroup.js.map +1 -1
- package/dist-es/internal/TableRow.js +87 -77
- package/dist-es/internal/TableRow.js.map +1 -1
- package/dist-es/internal/TopLeftPart.js +20 -29
- package/dist-es/internal/TopLeftPart.js.map +1 -1
- package/dist-es/internal/TopPart.js +20 -35
- package/dist-es/internal/TopPart.js.map +1 -1
- package/dist-es/internal/TopRightPart.js +26 -28
- package/dist-es/internal/TopRightPart.js.map +1 -1
- package/dist-es/internal/gridHooks.js +23 -23
- package/dist-es/internal/gridHooks.js.map +1 -1
- package/dist-es/internal/utils.js +5 -5
- package/dist-es/internal/utils.js.map +1 -1
- package/dist-types/BaseCell.d.ts +3 -3
- package/dist-types/CellEditor.d.ts +1 -1
- package/dist-types/CellFrame.d.ts +2 -2
- package/dist-types/ColumnDragContext.d.ts +1 -1
- package/dist-types/ColumnGroup.d.ts +4 -4
- package/dist-types/ColumnSortContext.d.ts +5 -5
- package/dist-types/CornerTag.d.ts +1 -1
- package/dist-types/DropdownCellEditor.d.ts +2 -2
- package/dist-types/Grid.d.ts +4 -4
- package/dist-types/GridColumn.d.ts +3 -3
- package/dist-types/GridContext.d.ts +2 -2
- package/dist-types/GroupHeaderCell.d.ts +3 -3
- package/dist-types/GroupHeaderCellValue.d.ts +2 -2
- package/dist-types/HeaderCell.d.ts +5 -5
- package/dist-types/HeaderCellValue.d.ts +2 -2
- package/dist-types/NumericColumn.d.ts +6 -6
- package/dist-types/RowSelectionCheckboxCellValue.d.ts +2 -2
- package/dist-types/RowSelectionCheckboxColumn.d.ts +2 -2
- package/dist-types/RowSelectionCheckboxHeaderCellValue.d.ts +2 -2
- package/dist-types/RowSelectionRadioCellValue.d.ts +2 -2
- package/dist-types/RowSelectionRadioColumn.d.ts +2 -2
- package/dist-types/RowSelectionRadioHeaderCell.d.ts +2 -2
- package/dist-types/RowValidationStatus.d.ts +2 -2
- package/dist-types/SelectionContext.d.ts +1 -1
- package/dist-types/SizingContext.d.ts +3 -3
- package/dist-types/TextCellEditor.d.ts +2 -2
- package/dist-types/internal/CellMeasure.d.ts +1 -1
- package/dist-types/internal/CellStatusIcons.d.ts +3 -3
- package/dist-types/internal/ColumnDropTarget.d.ts +1 -1
- package/dist-types/internal/ColumnGhost.d.ts +3 -3
- package/dist-types/internal/Cursor.d.ts +1 -3
- package/dist-types/internal/DefaultCellValue.d.ts +2 -2
- package/dist-types/internal/FakeCell.d.ts +2 -2
- package/dist-types/internal/FakeGroupCell.d.ts +1 -1
- package/dist-types/internal/FakeHeaderCell.d.ts +1 -1
- package/dist-types/internal/GroupHeaderRow.d.ts +2 -2
- package/dist-types/internal/HeaderRow.d.ts +2 -2
- package/dist-types/internal/LeftPart.d.ts +4 -4
- package/dist-types/internal/MiddlePart.d.ts +4 -4
- package/dist-types/internal/RightPart.d.ts +4 -4
- package/dist-types/internal/Scrollable.d.ts +2 -2
- package/dist-types/internal/TableBody.d.ts +3 -3
- package/dist-types/internal/TableColGroup.d.ts +3 -3
- package/dist-types/internal/TableRow.d.ts +4 -4
- package/dist-types/internal/TopLeftPart.d.ts +2 -2
- package/dist-types/internal/TopPart.d.ts +3 -3
- package/dist-types/internal/TopRightPart.d.ts +2 -2
- package/dist-types/internal/gridHooks.d.ts +13 -13
- package/dist-types/internal/utils.d.ts +1 -1
- package/package.json +11 -8
- package/dist-cjs/internal/FakeCell.css.js +0 -6
- package/dist-cjs/internal/FakeCell.css.js.map +0 -1
- package/dist-es/internal/FakeCell.css.js +0 -4
- package/dist-es/internal/FakeCell.css.js.map +0 -1
package/dist-cjs/HeaderCell.js
CHANGED
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var react = require('react');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
4
|
var core = require('@salt-ds/core');
|
|
5
|
+
var icons = require('@salt-ds/icons');
|
|
9
6
|
var styles = require('@salt-ds/styles');
|
|
10
7
|
var window = require('@salt-ds/window');
|
|
11
|
-
var
|
|
8
|
+
var clsx = require('clsx');
|
|
9
|
+
var react = require('react');
|
|
10
|
+
var ColumnDragContext = require('./ColumnDragContext.js');
|
|
11
|
+
var ColumnSortContext = require('./ColumnSortContext.js');
|
|
12
12
|
var Grid = require('./Grid.js');
|
|
13
13
|
var SizingContext = require('./SizingContext.js');
|
|
14
|
-
var ColumnDragContext = require('./ColumnDragContext.js');
|
|
15
14
|
require('./internal/CellMeasure.js');
|
|
16
15
|
var Cursor = require('./internal/Cursor.js');
|
|
17
16
|
require('./internal/GroupHeaderRow.js');
|
|
@@ -20,25 +19,22 @@ require('./internal/LeftPart.js');
|
|
|
20
19
|
require('./internal/MiddlePart.js');
|
|
21
20
|
require('./internal/RightPart.js');
|
|
22
21
|
require('./internal/Scrollable.js');
|
|
23
|
-
require('./internal/TableRow.js');
|
|
24
|
-
require('./SelectionContext.js');
|
|
25
|
-
require('./EditorContext.js');
|
|
26
22
|
require('./CursorContext.js');
|
|
23
|
+
require('./EditorContext.js');
|
|
24
|
+
require('./SelectionContext.js');
|
|
25
|
+
require('./internal/TableRow.js');
|
|
27
26
|
var gridHooks = require('./internal/gridHooks.js');
|
|
28
27
|
require('./internal/TopLeftPart.js');
|
|
29
28
|
require('./internal/TopPart.js');
|
|
30
29
|
require('./internal/TopRightPart.js');
|
|
31
30
|
require('./CellFrame.js');
|
|
32
31
|
require('./internal/DefaultCellValue.js');
|
|
33
|
-
var ColumnSortContext = require('./ColumnSortContext.js');
|
|
34
32
|
var HeaderCell$1 = require('./HeaderCell.css.js');
|
|
35
33
|
|
|
36
34
|
const withBaseName = core.makePrefixer("saltGridHeaderCell");
|
|
37
35
|
function HeaderCellSeparator(props) {
|
|
38
36
|
const className = withBaseName([props.separatorType, "Separator"].join(""));
|
|
39
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
40
|
-
className
|
|
41
|
-
});
|
|
37
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className });
|
|
42
38
|
}
|
|
43
39
|
function HeaderCell(props) {
|
|
44
40
|
const { column, children, isFocused } = props;
|
|
@@ -64,17 +60,20 @@ function HeaderCell(props) {
|
|
|
64
60
|
const valueAlignRight = align === "right";
|
|
65
61
|
const HeaderCellSortingIcon = ({ justify }) => {
|
|
66
62
|
const className = withBaseName("sortingIcon");
|
|
67
|
-
const icon = /* @__PURE__ */ jsxRuntime.jsxs(
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
63
|
+
const icon = /* @__PURE__ */ jsxRuntime.jsxs(
|
|
64
|
+
"div",
|
|
65
|
+
{
|
|
66
|
+
className: clsx.clsx(className, {
|
|
67
|
+
[withBaseName("sortingIconStart")]: justify === "start",
|
|
68
|
+
[withBaseName("sortingIconEnd")]: justify === "end"
|
|
69
|
+
}),
|
|
70
|
+
"aria-hidden": true,
|
|
71
|
+
children: [
|
|
72
|
+
sortOrder === Grid.SortOrder.ASC && /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpIcon, {}),
|
|
73
|
+
sortOrder === Grid.SortOrder.DESC && /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownIcon, {})
|
|
74
|
+
]
|
|
75
|
+
}
|
|
76
|
+
);
|
|
78
77
|
return icon;
|
|
79
78
|
};
|
|
80
79
|
const ariaSortMap = {
|
|
@@ -100,48 +99,52 @@ function HeaderCell(props) {
|
|
|
100
99
|
onClick();
|
|
101
100
|
}
|
|
102
101
|
};
|
|
103
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
"data-testid": "column-header",
|
|
112
|
-
tabIndex: isFocused && !isFocusableContent ? 0 : -1,
|
|
113
|
-
onFocus,
|
|
114
|
-
onClick: sortable ? onClick : void 0,
|
|
115
|
-
onKeyDown: sortable ? onKeyDown : void 0,
|
|
116
|
-
"aria-sort": sortByColumnId === id && sortable ? ariaSort : void 0,
|
|
117
|
-
"aria-label": column.info.props["aria-label"],
|
|
118
|
-
children: [
|
|
119
|
-
sortByColumnId === id && sortable && valueAlignRight && /* @__PURE__ */ jsxRuntime.jsx(HeaderCellSortingIcon, {
|
|
120
|
-
justify: "start"
|
|
121
|
-
}),
|
|
122
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
123
|
-
className: clsx.clsx(withBaseName("valueContainer"), {
|
|
124
|
-
[withBaseName("alignRight")]: valueAlignRight,
|
|
125
|
-
[withBaseName("alignRightWithSortOrder")]: valueAlignRight && withSortOrder,
|
|
126
|
-
[withBaseName("alignLeftWithSortOrder")]: !valueAlignRight && withSortOrder
|
|
127
|
-
}),
|
|
128
|
-
onMouseDown,
|
|
129
|
-
children
|
|
102
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
103
|
+
"th",
|
|
104
|
+
{
|
|
105
|
+
ref,
|
|
106
|
+
"aria-colindex": column.index + 1,
|
|
107
|
+
"data-column-index": column.index,
|
|
108
|
+
className: clsx.clsx(withBaseName(), headerClassName, {
|
|
109
|
+
[withBaseName("sortable")]: sortable
|
|
130
110
|
}),
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
111
|
+
role: "columnheader",
|
|
112
|
+
"data-testid": "column-header",
|
|
113
|
+
tabIndex: isFocused && !isFocusableContent ? 0 : -1,
|
|
114
|
+
onFocus,
|
|
115
|
+
onClick: sortable ? onClick : void 0,
|
|
116
|
+
onKeyDown: sortable ? onKeyDown : void 0,
|
|
117
|
+
"aria-sort": sortByColumnId === id && sortable ? ariaSort : void 0,
|
|
118
|
+
"aria-label": column.info.props["aria-label"],
|
|
119
|
+
children: [
|
|
120
|
+
sortByColumnId === id && sortable && valueAlignRight && /* @__PURE__ */ jsxRuntime.jsx(HeaderCellSortingIcon, { justify: "start" }),
|
|
121
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
122
|
+
"div",
|
|
123
|
+
{
|
|
124
|
+
className: clsx.clsx(withBaseName("valueContainer"), {
|
|
125
|
+
[withBaseName("alignRight")]: valueAlignRight,
|
|
126
|
+
// both classNames below needed to ensure header cell title & sort icon do not overlap when column resized to be smaller
|
|
127
|
+
[withBaseName("alignRightWithSortOrder")]: valueAlignRight && withSortOrder,
|
|
128
|
+
[withBaseName("alignLeftWithSortOrder")]: !valueAlignRight && withSortOrder
|
|
129
|
+
}),
|
|
130
|
+
onMouseDown,
|
|
131
|
+
children
|
|
132
|
+
}
|
|
133
|
+
),
|
|
134
|
+
sortByColumnId === id && sortable && !valueAlignRight && /* @__PURE__ */ jsxRuntime.jsx(HeaderCellSortingIcon, { justify: "end" }),
|
|
135
|
+
/* @__PURE__ */ jsxRuntime.jsx(HeaderCellSeparator, { separatorType: separator }),
|
|
136
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
137
|
+
"div",
|
|
138
|
+
{
|
|
139
|
+
"data-testid": `column-${column.index}-resize-handle`,
|
|
140
|
+
className: withBaseName("resizeHandle"),
|
|
141
|
+
onMouseDown: onResizeHandleMouseDown
|
|
142
|
+
}
|
|
143
|
+
),
|
|
144
|
+
isFocused && !isFocusableContent && /* @__PURE__ */ jsxRuntime.jsx(Cursor.Cursor, {})
|
|
145
|
+
]
|
|
146
|
+
}
|
|
147
|
+
);
|
|
145
148
|
}
|
|
146
149
|
function AutoSizeHeaderCell(props) {
|
|
147
150
|
const { column, children, isFocused } = props;
|
|
@@ -151,34 +154,35 @@ function AutoSizeHeaderCell(props) {
|
|
|
151
154
|
const { ref, isFocusableContent, onFocus } = gridHooks.useFocusableContent();
|
|
152
155
|
core.useIsomorphicLayoutEffect(() => {
|
|
153
156
|
const width = valueContainerRef.current ? valueContainerRef.current.offsetWidth : void 0;
|
|
154
|
-
if (width
|
|
157
|
+
if (width !== void 0 && width !== column.info.width) {
|
|
155
158
|
resizeColumn(column.index, width);
|
|
156
159
|
}
|
|
157
160
|
});
|
|
158
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
161
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
162
|
+
"th",
|
|
163
|
+
{
|
|
164
|
+
ref,
|
|
165
|
+
"aria-colindex": column.index + 1,
|
|
166
|
+
"data-column-index": column.index,
|
|
167
|
+
className: withBaseName(),
|
|
168
|
+
role: "columnheader",
|
|
169
|
+
"data-testid": "column-header",
|
|
170
|
+
tabIndex: isFocused && !isFocusableContent ? 0 : -1,
|
|
171
|
+
onFocus,
|
|
172
|
+
children: [
|
|
173
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("autosizeContainer"), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
174
|
+
"div",
|
|
175
|
+
{
|
|
176
|
+
ref: valueContainerRef,
|
|
177
|
+
className: withBaseName("measuredContent"),
|
|
178
|
+
children
|
|
179
|
+
}
|
|
180
|
+
) }),
|
|
181
|
+
/* @__PURE__ */ jsxRuntime.jsx(HeaderCellSeparator, { separatorType: separator }),
|
|
182
|
+
isFocused && !isFocusableContent && /* @__PURE__ */ jsxRuntime.jsx(Cursor.Cursor, {})
|
|
183
|
+
]
|
|
184
|
+
}
|
|
185
|
+
);
|
|
182
186
|
}
|
|
183
187
|
|
|
184
188
|
exports.AutoSizeHeaderCell = AutoSizeHeaderCell;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderCell.js","sources":["../src/HeaderCell.tsx"],"sourcesContent":["import { KeyboardEventHandler, useRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n FlexContentAlignment,\n makePrefixer,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ArrowDownIcon, ArrowUpIcon } from \"@salt-ds/icons\";\n\nimport { ColumnSeparatorType, SortOrder } from \"./Grid\";\nimport { useSizingContext } from \"./SizingContext\";\nimport { useColumnDragContext } from \"./ColumnDragContext\";\nimport { Cursor, useFocusableContent } from \"./internal\";\nimport { HeaderCellProps } from \"./GridColumn\";\nimport { useColumnSortContext } from \"./ColumnSortContext\";\n\nimport headerCellCss from \"./HeaderCell.css\";\n\nconst withBaseName = makePrefixer(\"saltGridHeaderCell\");\n\nexport interface HeaderCellSeparatorProps {\n separatorType: ColumnSeparatorType;\n}\n\nexport function HeaderCellSeparator(props: HeaderCellSeparatorProps) {\n const className = withBaseName([props.separatorType, \"Separator\"].join(\"\"));\n return <div className={className} />;\n}\n\ntype AriaSortProps = \"none\" | \"ascending\" | \"descending\";\n\nexport function HeaderCell<T>(props: HeaderCellProps<T>) {\n const { column, children, isFocused } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-header-cell\",\n css: headerCellCss,\n window: targetWindow,\n });\n\n const { separator } = column;\n const { align, id, headerClassName, sortable, onSortOrderChange } =\n column.info.props;\n const { onResizeHandleMouseDown } = useSizingContext();\n\n const { columnMove, onColumnMoveHandleMouseDown } = useColumnDragContext();\n const onMouseDown = columnMove ? onColumnMoveHandleMouseDown : undefined;\n\n const { ref, isFocusableContent, onFocus } =\n useFocusableContent<HTMLTableHeaderCellElement>();\n\n const {\n onClickSortColumn,\n setSortByColumnId,\n sortOrder,\n sortByColumnId,\n setSortOrder,\n } = useColumnSortContext();\n\n const valueAlignRight = align === \"right\";\n\n interface HeaderCellSortingIconProps {\n justify: FlexContentAlignment;\n }\n\n const HeaderCellSortingIcon = ({ justify }: HeaderCellSortingIconProps) => {\n const className = withBaseName(\"sortingIcon\");\n const icon = (\n <div\n className={clsx(className, {\n [withBaseName(\"sortingIconStart\")]: justify === \"start\",\n [withBaseName(\"sortingIconEnd\")]: justify === \"end\",\n })}\n aria-hidden\n >\n {sortOrder === SortOrder.ASC && <ArrowUpIcon />}\n {sortOrder === SortOrder.DESC && <ArrowDownIcon />}\n </div>\n );\n\n return icon;\n };\n\n const ariaSortMap = {\n asc: \"ascending\",\n desc: \"descending\",\n none: \"none\",\n };\n\n const ariaSort = ariaSortMap[sortOrder] as AriaSortProps;\n\n const order =\n sortOrder === SortOrder.ASC\n ? SortOrder.DESC\n : sortOrder === SortOrder.DESC\n ? SortOrder.NONE\n : SortOrder.ASC;\n\n const withSortOrder = sortOrder !== SortOrder.NONE && sortByColumnId === id;\n\n const onClick = () => {\n if (onSortOrderChange) {\n setSortByColumnId(id);\n setSortOrder(order);\n onSortOrderChange({ sortOrder: order });\n return;\n }\n setSortByColumnId(id);\n onClickSortColumn(id);\n };\n\n const onKeyDown: KeyboardEventHandler<HTMLTableHeaderCellElement> = (\n event\n ) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n onClick();\n }\n };\n\n return (\n <th\n ref={ref}\n aria-colindex={column.index + 1}\n data-column-index={column.index}\n className={clsx(withBaseName(), headerClassName, {\n [withBaseName(\"sortable\")]: sortable,\n })}\n role=\"columnheader\"\n data-testid=\"column-header\"\n tabIndex={isFocused && !isFocusableContent ? 0 : -1}\n onFocus={onFocus}\n onClick={sortable ? onClick : undefined}\n onKeyDown={sortable ? onKeyDown : undefined}\n aria-sort={sortByColumnId === id && sortable ? ariaSort : undefined}\n aria-label={column.info.props[\"aria-label\"]}\n >\n {sortByColumnId === id && sortable && valueAlignRight && (\n <HeaderCellSortingIcon justify=\"start\" />\n )}\n <div\n className={clsx(withBaseName(\"valueContainer\"), {\n [withBaseName(\"alignRight\")]: valueAlignRight,\n // both classNames below needed to ensure header cell title & sort icon do not overlap when column resized to be smaller\n [withBaseName(\"alignRightWithSortOrder\")]:\n valueAlignRight && withSortOrder,\n [withBaseName(\"alignLeftWithSortOrder\")]:\n !valueAlignRight && withSortOrder,\n })}\n onMouseDown={onMouseDown}\n >\n {children}\n </div>\n {sortByColumnId === id && sortable && !valueAlignRight && (\n <HeaderCellSortingIcon justify=\"end\" />\n )}\n <HeaderCellSeparator separatorType={separator} />\n <div\n data-testid={`column-${column.index}-resize-handle`}\n className={withBaseName(\"resizeHandle\")}\n onMouseDown={onResizeHandleMouseDown}\n />\n {isFocused && !isFocusableContent && <Cursor />}\n </th>\n );\n}\n\nexport function AutoSizeHeaderCell<T>(props: HeaderCellProps<T>) {\n const { column, children, isFocused } = props;\n const { separator } = column;\n const valueContainerRef = useRef<HTMLDivElement>(null);\n const { resizeColumn } = useSizingContext();\n\n const { ref, isFocusableContent, onFocus } =\n useFocusableContent<HTMLTableHeaderCellElement>();\n\n useIsomorphicLayoutEffect(() => {\n const width = valueContainerRef.current\n ? valueContainerRef.current.offsetWidth\n : undefined;\n if (width != undefined && width !== column.info.width) {\n resizeColumn(column.index, width);\n }\n });\n\n return (\n <th\n ref={ref}\n aria-colindex={column.index + 1}\n data-column-index={column.index}\n className={withBaseName()}\n role=\"columnheader\"\n data-testid=\"column-header\"\n tabIndex={isFocused && !isFocusableContent ? 0 : -1}\n onFocus={onFocus}\n >\n <div className={withBaseName(\"autosizeContainer\")}>\n <div\n ref={valueContainerRef}\n className={withBaseName(\"measuredContent\")}\n >\n {children}\n </div>\n </div>\n <HeaderCellSeparator separatorType={separator} />\n {isFocused && !isFocusableContent && <Cursor />}\n </th>\n );\n}\n"],"names":["makePrefixer","jsx","useWindow","useComponentCssInjection","headerCellCss","useSizingContext","useColumnDragContext","useFocusableContent","useColumnSortContext","jsxs","clsx","SortOrder","ArrowUpIcon","ArrowDownIcon","Cursor","useRef","useIsomorphicLayoutEffect"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"HeaderCell.js","sources":["../src/HeaderCell.tsx"],"sourcesContent":["import {\n type FlexContentAlignment,\n makePrefixer,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { ArrowDownIcon, ArrowUpIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type KeyboardEventHandler, useRef } from \"react\";\n\nimport { useColumnDragContext } from \"./ColumnDragContext\";\nimport { useColumnSortContext } from \"./ColumnSortContext\";\nimport { type ColumnSeparatorType, SortOrder } from \"./Grid\";\nimport type { HeaderCellProps } from \"./GridColumn\";\nimport { useSizingContext } from \"./SizingContext\";\nimport { Cursor, useFocusableContent } from \"./internal\";\n\nimport headerCellCss from \"./HeaderCell.css\";\n\nconst withBaseName = makePrefixer(\"saltGridHeaderCell\");\n\nexport interface HeaderCellSeparatorProps {\n separatorType: ColumnSeparatorType;\n}\n\nexport function HeaderCellSeparator(props: HeaderCellSeparatorProps) {\n const className = withBaseName([props.separatorType, \"Separator\"].join(\"\"));\n return <div className={className} />;\n}\n\ntype AriaSortProps = \"none\" | \"ascending\" | \"descending\";\n\nexport function HeaderCell<T>(props: HeaderCellProps<T>) {\n const { column, children, isFocused } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-header-cell\",\n css: headerCellCss,\n window: targetWindow,\n });\n\n const { separator } = column;\n const { align, id, headerClassName, sortable, onSortOrderChange } =\n column.info.props;\n const { onResizeHandleMouseDown } = useSizingContext();\n\n const { columnMove, onColumnMoveHandleMouseDown } = useColumnDragContext();\n const onMouseDown = columnMove ? onColumnMoveHandleMouseDown : undefined;\n\n const { ref, isFocusableContent, onFocus } =\n useFocusableContent<HTMLTableHeaderCellElement>();\n\n const {\n onClickSortColumn,\n setSortByColumnId,\n sortOrder,\n sortByColumnId,\n setSortOrder,\n } = useColumnSortContext();\n\n const valueAlignRight = align === \"right\";\n\n interface HeaderCellSortingIconProps {\n justify: FlexContentAlignment;\n }\n\n const HeaderCellSortingIcon = ({ justify }: HeaderCellSortingIconProps) => {\n const className = withBaseName(\"sortingIcon\");\n const icon = (\n <div\n className={clsx(className, {\n [withBaseName(\"sortingIconStart\")]: justify === \"start\",\n [withBaseName(\"sortingIconEnd\")]: justify === \"end\",\n })}\n aria-hidden\n >\n {sortOrder === SortOrder.ASC && <ArrowUpIcon />}\n {sortOrder === SortOrder.DESC && <ArrowDownIcon />}\n </div>\n );\n\n return icon;\n };\n\n const ariaSortMap = {\n asc: \"ascending\",\n desc: \"descending\",\n none: \"none\",\n };\n\n const ariaSort = ariaSortMap[sortOrder] as AriaSortProps;\n\n const order =\n sortOrder === SortOrder.ASC\n ? SortOrder.DESC\n : sortOrder === SortOrder.DESC\n ? SortOrder.NONE\n : SortOrder.ASC;\n\n const withSortOrder = sortOrder !== SortOrder.NONE && sortByColumnId === id;\n\n const onClick = () => {\n if (onSortOrderChange) {\n setSortByColumnId(id);\n setSortOrder(order);\n onSortOrderChange({ sortOrder: order });\n return;\n }\n setSortByColumnId(id);\n onClickSortColumn(id);\n };\n\n const onKeyDown: KeyboardEventHandler<HTMLTableHeaderCellElement> = (\n event,\n ) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n onClick();\n }\n };\n\n return (\n <th\n ref={ref}\n aria-colindex={column.index + 1}\n data-column-index={column.index}\n className={clsx(withBaseName(), headerClassName, {\n [withBaseName(\"sortable\")]: sortable,\n })}\n role=\"columnheader\"\n data-testid=\"column-header\"\n tabIndex={isFocused && !isFocusableContent ? 0 : -1}\n onFocus={onFocus}\n onClick={sortable ? onClick : undefined}\n onKeyDown={sortable ? onKeyDown : undefined}\n aria-sort={sortByColumnId === id && sortable ? ariaSort : undefined}\n aria-label={column.info.props[\"aria-label\"]}\n >\n {sortByColumnId === id && sortable && valueAlignRight && (\n <HeaderCellSortingIcon justify=\"start\" />\n )}\n <div\n className={clsx(withBaseName(\"valueContainer\"), {\n [withBaseName(\"alignRight\")]: valueAlignRight,\n // both classNames below needed to ensure header cell title & sort icon do not overlap when column resized to be smaller\n [withBaseName(\"alignRightWithSortOrder\")]:\n valueAlignRight && withSortOrder,\n [withBaseName(\"alignLeftWithSortOrder\")]:\n !valueAlignRight && withSortOrder,\n })}\n onMouseDown={onMouseDown}\n >\n {children}\n </div>\n {sortByColumnId === id && sortable && !valueAlignRight && (\n <HeaderCellSortingIcon justify=\"end\" />\n )}\n <HeaderCellSeparator separatorType={separator} />\n <div\n data-testid={`column-${column.index}-resize-handle`}\n className={withBaseName(\"resizeHandle\")}\n onMouseDown={onResizeHandleMouseDown}\n />\n {isFocused && !isFocusableContent && <Cursor />}\n </th>\n );\n}\n\nexport function AutoSizeHeaderCell<T>(props: HeaderCellProps<T>) {\n const { column, children, isFocused } = props;\n const { separator } = column;\n const valueContainerRef = useRef<HTMLDivElement>(null);\n const { resizeColumn } = useSizingContext();\n\n const { ref, isFocusableContent, onFocus } =\n useFocusableContent<HTMLTableHeaderCellElement>();\n\n useIsomorphicLayoutEffect(() => {\n const width = valueContainerRef.current\n ? valueContainerRef.current.offsetWidth\n : undefined;\n if (width !== undefined && width !== column.info.width) {\n resizeColumn(column.index, width);\n }\n });\n\n return (\n <th\n ref={ref}\n aria-colindex={column.index + 1}\n data-column-index={column.index}\n className={withBaseName()}\n role=\"columnheader\"\n data-testid=\"column-header\"\n tabIndex={isFocused && !isFocusableContent ? 0 : -1}\n onFocus={onFocus}\n >\n <div className={withBaseName(\"autosizeContainer\")}>\n <div\n ref={valueContainerRef}\n className={withBaseName(\"measuredContent\")}\n >\n {children}\n </div>\n </div>\n <HeaderCellSeparator separatorType={separator} />\n {isFocused && !isFocusableContent && <Cursor />}\n </th>\n );\n}\n"],"names":["makePrefixer","jsx","useWindow","useComponentCssInjection","headerCellCss","useSizingContext","useColumnDragContext","useFocusableContent","useColumnSortContext","jsxs","clsx","SortOrder","ArrowUpIcon","ArrowDownIcon","Cursor","useRef","useIsomorphicLayoutEffect"],"mappings":"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"}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
4
|
var core = require('@salt-ds/core');
|
|
7
5
|
|
|
@@ -9,10 +7,7 @@ const withBaseName = core.makePrefixer("saltGridHeaderCell");
|
|
|
9
7
|
function HeaderCellValue(props) {
|
|
10
8
|
const { column } = props;
|
|
11
9
|
const title = column.info.props.name;
|
|
12
|
-
return /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
13
|
-
className: withBaseName("text"),
|
|
14
|
-
children: title
|
|
15
|
-
});
|
|
10
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("text"), children: title });
|
|
16
11
|
}
|
|
17
12
|
|
|
18
13
|
exports.HeaderCellValue = HeaderCellValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderCellValue.js","sources":["../src/HeaderCellValue.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { GridHeaderValueProps } from \"./GridColumn\";\n\nconst withBaseName = makePrefixer(\"saltGridHeaderCell\");\n\nexport function HeaderCellValue<T>(props: GridHeaderValueProps<T>) {\n const { column } = props;\n const title = column.info.props.name;\n return <span className={withBaseName(\"text\")}>{title}</span>;\n}\n"],"names":["makePrefixer"
|
|
1
|
+
{"version":3,"file":"HeaderCellValue.js","sources":["../src/HeaderCellValue.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport type { GridHeaderValueProps } from \"./GridColumn\";\n\nconst withBaseName = makePrefixer(\"saltGridHeaderCell\");\n\nexport function HeaderCellValue<T>(props: GridHeaderValueProps<T>) {\n const { column } = props;\n const title = column.info.props.name;\n return <span className={withBaseName(\"text\")}>{title}</span>;\n}\n"],"names":["makePrefixer"],"mappings":";;;;;AAGA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAE/C,SAAS,gBAAmB,KAAgC,EAAA;AACjE,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA;AACnB,EAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,IAAA,CAAK,KAAM,CAAA,IAAA;AAChC,EAAA,sCAAQ,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,MAAM,GAAI,QAAM,EAAA,KAAA,EAAA,CAAA;AACvD;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutContext.js","sources":["../src/LayoutContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface LayoutContext {\n totalWidth: number;\n totalHeight: number;\n clientWidth: number;\n clientHeight: number;\n}\n\nexport const LayoutContext = createContext<LayoutContext | undefined>(\n undefined
|
|
1
|
+
{"version":3,"file":"LayoutContext.js","sources":["../src/LayoutContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface LayoutContext {\n totalWidth: number;\n totalHeight: number;\n clientWidth: number;\n clientHeight: number;\n}\n\nexport const LayoutContext = createContext<LayoutContext | undefined>(\n undefined,\n);\n\nexport const useLayoutContext = () => {\n const c = useContext(LayoutContext);\n if (!c) {\n throw new Error(\"useLayoutContext invoked outside of a Grid\");\n }\n return c;\n};\n"],"names":["createContext"],"mappings":";;;;AASO,MAAM,aAAgB,GAAAA,mBAAA;AAAA,EAC3B,KAAA;AACF;;;;"}
|
package/dist-cjs/NumberRange.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
function range(...args) {
|
|
6
4
|
let start = 0;
|
|
7
5
|
let end = 0;
|
|
@@ -17,7 +15,7 @@ function range(...args) {
|
|
|
17
15
|
}
|
|
18
16
|
return [...Array(end - start).keys()].map((i) => start + i * step);
|
|
19
17
|
}
|
|
20
|
-
const _NumberRange = class {
|
|
18
|
+
const _NumberRange = class _NumberRange {
|
|
21
19
|
constructor(start, end) {
|
|
22
20
|
if (end < start) {
|
|
23
21
|
throw new Error(`Invalid start and end: [${start}, ${end}]`);
|
|
@@ -55,8 +53,8 @@ const _NumberRange = class {
|
|
|
55
53
|
return this.start <= n && n < this.end;
|
|
56
54
|
}
|
|
57
55
|
};
|
|
56
|
+
_NumberRange.empty = new _NumberRange(0, 0);
|
|
58
57
|
let NumberRange = _NumberRange;
|
|
59
|
-
NumberRange.empty = new _NumberRange(0, 0);
|
|
60
58
|
|
|
61
59
|
exports.NumberRange = NumberRange;
|
|
62
60
|
exports.range = range;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberRange.js","sources":["../src/NumberRange.ts"],"sourcesContent":["export function range(\n ...args: [number] | [number, number] | [number, number, number]\n): number[] {\n let start = 0;\n let end = 0;\n let step = 1;\n if (args.length < 2) {\n end = args[0];\n } else {\n start = args[0];\n end = args[1]!;\n if (args.length > 2) {\n step = args[2]!;\n }\n }\n return [...Array(end - start).keys()].map((i) => start + i * step);\n}\n\nexport class NumberRange {\n public readonly start: number;\n\n public readonly end: number;\n\n public constructor(start: number, end: number) {\n if (end < start) {\n throw new Error(`Invalid start and end: [${start}, ${end}]`);\n }\n this.start = start;\n this.end = end;\n }\n\n public get length(): number {\n return this.end - this.start;\n }\n\n public map<T>(fn: (i: number) => T): T[] {\n return range(this.start, this.end).map(fn);\n }\n\n public forEach(fn: (i: number) => void): void {\n range(this.start, this.end).forEach(fn);\n }\n\n public *[Symbol.iterator]() {\n for (let i = this.start; i < this.end; ++i) {\n yield i;\n }\n }\n\n public static equals(a: NumberRange | undefined, b: NumberRange | undefined) {\n if (!a) {\n return !b;\n }\n return !b ? false : a.start === b.start && a.end === b.end;\n }\n\n public update(start: number, end: number) {\n return this.end !== end || this.start !== start\n ? new NumberRange(start, end)\n : this;\n }\n\n public static empty: NumberRange = new NumberRange(0, 0);\n\n public toString() {\n return `[${this.start}, ${this.end}]`;\n }\n\n public contains(n: number) {\n return this.start <= n && n < this.end;\n }\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NumberRange.js","sources":["../src/NumberRange.ts"],"sourcesContent":["export function range(\n ...args: [number] | [number, number] | [number, number, number]\n): number[] {\n let start = 0;\n let end = 0;\n let step = 1;\n if (args.length < 2) {\n end = args[0];\n } else {\n start = args[0];\n end = args[1]!;\n if (args.length > 2) {\n step = args[2]!;\n }\n }\n return [...Array(end - start).keys()].map((i) => start + i * step);\n}\n\nexport class NumberRange {\n public readonly start: number;\n\n public readonly end: number;\n\n public constructor(start: number, end: number) {\n if (end < start) {\n throw new Error(`Invalid start and end: [${start}, ${end}]`);\n }\n this.start = start;\n this.end = end;\n }\n\n public get length(): number {\n return this.end - this.start;\n }\n\n public map<T>(fn: (i: number) => T): T[] {\n return range(this.start, this.end).map(fn);\n }\n\n public forEach(fn: (i: number) => void): void {\n range(this.start, this.end).forEach(fn);\n }\n\n public *[Symbol.iterator]() {\n for (let i = this.start; i < this.end; ++i) {\n yield i;\n }\n }\n\n public static equals(a: NumberRange | undefined, b: NumberRange | undefined) {\n if (!a) {\n return !b;\n }\n return !b ? false : a.start === b.start && a.end === b.end;\n }\n\n public update(start: number, end: number) {\n return this.end !== end || this.start !== start\n ? new NumberRange(start, end)\n : this;\n }\n\n public static empty: NumberRange = new NumberRange(0, 0);\n\n public toString() {\n return `[${this.start}, ${this.end}]`;\n }\n\n public contains(n: number) {\n return this.start <= n && n < this.end;\n }\n}\n"],"names":[],"mappings":";;AAAO,SAAS,SACX,IACO,EAAA;AACV,EAAA,IAAI,KAAQ,GAAA,CAAA;AACZ,EAAA,IAAI,GAAM,GAAA,CAAA;AACV,EAAA,IAAI,IAAO,GAAA,CAAA;AACX,EAAI,IAAA,IAAA,CAAK,SAAS,CAAG,EAAA;AACnB,IAAA,GAAA,GAAM,KAAK,CAAC,CAAA;AAAA,GACP,MAAA;AACL,IAAA,KAAA,GAAQ,KAAK,CAAC,CAAA;AACd,IAAA,GAAA,GAAM,KAAK,CAAC,CAAA;AACZ,IAAI,IAAA,IAAA,CAAK,SAAS,CAAG,EAAA;AACnB,MAAA,IAAA,GAAO,KAAK,CAAC,CAAA;AAAA;AACf;AAEF,EAAA,OAAO,CAAC,GAAG,KAAM,CAAA,GAAA,GAAM,KAAK,CAAE,CAAA,IAAA,EAAM,CAAA,CAAE,GAAI,CAAA,CAAC,CAAM,KAAA,KAAA,GAAQ,IAAI,IAAI,CAAA;AACnE;AAEO,MAAM,YAAA,GAAN,MAAM,YAAY,CAAA;AAAA,EAKhB,WAAA,CAAY,OAAe,GAAa,EAAA;AAC7C,IAAA,IAAI,MAAM,KAAO,EAAA;AACf,MAAA,MAAM,IAAI,KAAM,CAAA,CAAA,wBAAA,EAA2B,KAAK,CAAA,EAAA,EAAK,GAAG,CAAG,CAAA,CAAA,CAAA;AAAA;AAE7D,IAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AACb,IAAA,IAAA,CAAK,GAAM,GAAA,GAAA;AAAA;AACb,EAEA,IAAW,MAAiB,GAAA;AAC1B,IAAO,OAAA,IAAA,CAAK,MAAM,IAAK,CAAA,KAAA;AAAA;AACzB,EAEO,IAAO,EAA2B,EAAA;AACvC,IAAA,OAAO,MAAM,IAAK,CAAA,KAAA,EAAO,KAAK,GAAG,CAAA,CAAE,IAAI,EAAE,CAAA;AAAA;AAC3C,EAEO,QAAQ,EAA+B,EAAA;AAC5C,IAAA,KAAA,CAAM,KAAK,KAAO,EAAA,IAAA,CAAK,GAAG,CAAA,CAAE,QAAQ,EAAE,CAAA;AAAA;AACxC,EAEA,EAAS,MAAO,CAAA,QAAQ,CAAI,GAAA;AAC1B,IAAA,KAAA,IAAS,IAAI,IAAK,CAAA,KAAA,EAAO,IAAI,IAAK,CAAA,GAAA,EAAK,EAAE,CAAG,EAAA;AAC1C,MAAM,MAAA,CAAA;AAAA;AACR;AACF,EAEA,OAAc,MAAO,CAAA,CAAA,EAA4B,CAA4B,EAAA;AAC3E,IAAA,IAAI,CAAC,CAAG,EAAA;AACN,MAAA,OAAO,CAAC,CAAA;AAAA;AAEV,IAAO,OAAA,CAAC,IAAI,KAAQ,GAAA,CAAA,CAAE,UAAU,CAAE,CAAA,KAAA,IAAS,CAAE,CAAA,GAAA,KAAQ,CAAE,CAAA,GAAA;AAAA;AACzD,EAEO,MAAA,CAAO,OAAe,GAAa,EAAA;AACxC,IAAO,OAAA,IAAA,CAAK,GAAQ,KAAA,GAAA,IAAO,IAAK,CAAA,KAAA,KAAU,QACtC,IAAI,YAAA,CAAY,KAAO,EAAA,GAAG,CAC1B,GAAA,IAAA;AAAA;AACN,EAIO,QAAW,GAAA;AAChB,IAAA,OAAO,CAAI,CAAA,EAAA,IAAA,CAAK,KAAK,CAAA,EAAA,EAAK,KAAK,GAAG,CAAA,CAAA,CAAA;AAAA;AACpC,EAEO,SAAS,CAAW,EAAA;AACzB,IAAA,OAAO,IAAK,CAAA,KAAA,IAAS,CAAK,IAAA,CAAA,GAAI,IAAK,CAAA,GAAA;AAAA;AAEvC,CAAA;AArDa,YAAA,CA4CG,KAAqB,GAAA,IAAI,YAAY,CAAA,CAAA,EAAG,CAAC,CAAA;AA5ClD,IAAM,WAAN,GAAA;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltGridNumericCellValue {\n overflow: hidden;\n text-overflow: ellipsis;\n padding: var(--grid-cell-padding);\n text-align: right;\n}\n\n.saltGridNumericCellEditor
|
|
3
|
+
var css_248z = ".saltGridNumericCellValue {\n overflow: hidden;\n text-overflow: ellipsis;\n padding: var(--grid-cell-padding);\n text-align: right;\n}\n\n.saltGridNumericCellEditor-inputContainer {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background: var(--grid-background);\n box-sizing: border-box;\n border-style: dotted;\n border-width: 2px;\n border-color: var(--grid-cursor-borderColor);\n padding: 0;\n}\n\n.saltGridNumericCellEditor input {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n outline: none;\n border: none;\n padding: 0 calc(var(--grid-padding) - 2px);\n font-size: var(--grid-fontSize);\n font-family: inherit;\n background: var(--grid-editableCell-background-active);\n color: var(--grid-editableCell-color-active);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=NumericColumn.css.js.map
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
4
|
var styles = require('@salt-ds/styles');
|
|
7
5
|
var window = require('@salt-ds/window');
|
|
@@ -26,10 +24,7 @@ function NumericCellValue(props) {
|
|
|
26
24
|
const columnProps = column.info.props;
|
|
27
25
|
const { precision } = columnProps;
|
|
28
26
|
const text = isNumber(value) ? value.toFixed(precision) : "";
|
|
29
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
30
|
-
className: "saltGridNumericCellValue",
|
|
31
|
-
children: text
|
|
32
|
-
});
|
|
27
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "saltGridNumericCellValue", children: text });
|
|
33
28
|
}
|
|
34
29
|
function NumericCellEditor(props) {
|
|
35
30
|
const { column, row } = props;
|
|
@@ -76,32 +71,38 @@ function NumericCellEditor(props) {
|
|
|
76
71
|
document == null ? void 0 : document.removeEventListener("mousedown", focusOut, true);
|
|
77
72
|
};
|
|
78
73
|
}, [endEditMode, editorText]);
|
|
79
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
74
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
75
|
+
CellFrame.CellFrame,
|
|
76
|
+
{
|
|
77
|
+
separator: column == null ? void 0 : column.separator,
|
|
78
|
+
className: "saltGridNumericCellEditor",
|
|
79
|
+
children: [
|
|
80
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "saltGridNumericCellEditor-inputContainer", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
81
|
+
"input",
|
|
82
|
+
{
|
|
83
|
+
ref: inputRef,
|
|
84
|
+
"data-testid": "grid-cell-editor-input",
|
|
85
|
+
autoFocus: true,
|
|
86
|
+
value: editorText,
|
|
87
|
+
onChange,
|
|
88
|
+
onKeyDown
|
|
89
|
+
}
|
|
90
|
+
) }),
|
|
91
|
+
/* @__PURE__ */ jsxRuntime.jsx(CornerTag.CornerTag, {})
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
);
|
|
97
95
|
}
|
|
98
96
|
function NumericColumn(props) {
|
|
99
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
97
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
98
|
+
GridColumn.GridColumn,
|
|
99
|
+
{
|
|
100
|
+
...props,
|
|
101
|
+
align: "right",
|
|
102
|
+
cellValueComponent: NumericCellValue,
|
|
103
|
+
children: props.children
|
|
104
|
+
}
|
|
105
|
+
);
|
|
105
106
|
}
|
|
106
107
|
|
|
107
108
|
exports.NumericCellEditor = NumericCellEditor;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumericColumn.js","sources":["../src/NumericColumn.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n ChangeEventHandler,\n KeyboardEventHandler,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { CellFrame } from \"./CellFrame\";\nimport { CornerTag } from \"./CornerTag\";\nimport { useEditorContext } from \"./EditorContext\";\nimport { GridColumnModel, GridRowModel } from \"./Grid\";\nimport { GridCellValueProps
|
|
1
|
+
{"version":3,"file":"NumericColumn.js","sources":["../src/NumericColumn.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n type ChangeEventHandler,\n type KeyboardEventHandler,\n type ReactNode,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { CellFrame } from \"./CellFrame\";\nimport { CornerTag } from \"./CornerTag\";\nimport { useEditorContext } from \"./EditorContext\";\nimport type { GridColumnModel, GridRowModel } from \"./Grid\";\nimport {\n type GridCellValueProps,\n GridColumn,\n type GridColumnProps,\n} from \"./GridColumn\";\n\nimport numericColumnCss from \"./NumericColumn.css\";\n\nexport interface NumericColumnProps<T> extends GridColumnProps<T> {\n precision: number;\n}\n\nfunction isNumber(value: unknown): value is number {\n return typeof value === \"number\" && Number.isFinite(value);\n}\n\nexport function NumericCellValue<T>(props: GridCellValueProps<T>) {\n const { column, value } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-numeric-column\",\n css: numericColumnCss,\n window: targetWindow,\n });\n\n const columnProps = column.info.props as NumericColumnProps<T>;\n const { precision } = columnProps;\n const text = isNumber(value) ? value.toFixed(precision) : \"\";\n return <div className=\"saltGridNumericCellValue\">{text}</div>;\n}\n\nexport interface NumericEditorProps<T> {\n row?: GridRowModel<T>;\n column?: GridColumnModel<T>;\n children?: ReactNode;\n}\n\nexport function NumericCellEditor<T>(props: NumericEditorProps<T>) {\n const { column, row } = props;\n const inputRef = useRef<HTMLInputElement>(null);\n\n const { endEditMode, cancelEditMode, initialText } = useEditorContext();\n\n const [editorText, setEditorText] = useState<string>(\n initialText != null ? initialText : column!.info.props.getValue!(row!.data),\n );\n\n const initialSelectionRef = useRef(!!initialText);\n\n const onChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n setEditorText(e.target.value);\n };\n\n const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n if (event.key === \"Enter\") {\n endEditMode(editorText);\n return;\n }\n if (event.key === \"Escape\") {\n cancelEditMode();\n return;\n }\n if (event.key === \"Tab\") {\n endEditMode(editorText);\n event.preventDefault();\n return;\n }\n event.stopPropagation();\n };\n\n useEffect(() => {\n if (inputRef.current && !initialSelectionRef.current) {\n inputRef.current.select();\n initialSelectionRef.current = true;\n }\n }, [inputRef.current]);\n\n useEffect(() => {\n const input = inputRef.current;\n const focusOut = (event: FocusEvent) => {\n if (!input?.contains(event.target as Node)) {\n endEditMode(editorText);\n }\n };\n\n // This uses the capture phase to detect clicks outside the input to avoid a race condition where the component gets unmounted when edit mode ends.\n document?.addEventListener(\"mousedown\", focusOut, true);\n\n return () => {\n document?.removeEventListener(\"mousedown\", focusOut, true);\n };\n }, [endEditMode, editorText]);\n\n return (\n <CellFrame\n separator={column?.separator}\n className=\"saltGridNumericCellEditor\"\n >\n <div className=\"saltGridNumericCellEditor-inputContainer\">\n <input\n ref={inputRef}\n data-testid=\"grid-cell-editor-input\"\n autoFocus={true}\n value={editorText}\n onChange={onChange}\n onKeyDown={onKeyDown}\n />\n </div>\n <CornerTag />\n </CellFrame>\n );\n}\n\nexport function NumericColumn<T>(props: NumericColumnProps<T>) {\n return (\n <GridColumn\n {...props}\n align={\"right\"}\n cellValueComponent={NumericCellValue}\n >\n {props.children}\n </GridColumn>\n );\n}\n"],"names":["useWindow","useComponentCssInjection","numericColumnCss","jsx","useRef","useEditorContext","useState","useEffect","jsxs","CellFrame","CornerTag","GridColumn"],"mappings":"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"}
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
4
|
var core = require('@salt-ds/core');
|
|
7
|
-
var window = require('@salt-ds/window');
|
|
8
5
|
var styles = require('@salt-ds/styles');
|
|
9
|
-
var
|
|
6
|
+
var window = require('@salt-ds/window');
|
|
10
7
|
var CursorContext = require('./CursorContext.js');
|
|
8
|
+
var SelectionContext = require('./SelectionContext.js');
|
|
11
9
|
var CheckboxCell = require('./CheckboxCell.css.js');
|
|
12
10
|
|
|
13
11
|
function RowSelectionCheckboxCellValue(props) {
|
|
@@ -27,18 +25,17 @@ function RowSelectionCheckboxCellValue(props) {
|
|
|
27
25
|
event.preventDefault();
|
|
28
26
|
event.stopPropagation();
|
|
29
27
|
};
|
|
30
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(core.Checkbox, {
|
|
28
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "saltGridCheckboxContainer", onMouseDown, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
29
|
+
core.Checkbox,
|
|
30
|
+
{
|
|
34
31
|
"data-testid": "grid-row-selection-checkbox",
|
|
35
32
|
inputProps: {
|
|
36
33
|
"aria-label": "Select Row",
|
|
37
34
|
tabIndex: isFocused ? 0 : -1
|
|
38
35
|
},
|
|
39
36
|
checked: isSelected
|
|
40
|
-
}
|
|
41
|
-
});
|
|
37
|
+
}
|
|
38
|
+
) });
|
|
42
39
|
}
|
|
43
40
|
|
|
44
41
|
exports.RowSelectionCheckboxCellValue = RowSelectionCheckboxCellValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RowSelectionCheckboxCellValue.js","sources":["../src/RowSelectionCheckboxCellValue.tsx"],"sourcesContent":["import { Checkbox } from \"@salt-ds/core\";\nimport {
|
|
1
|
+
{"version":3,"file":"RowSelectionCheckboxCellValue.js","sources":["../src/RowSelectionCheckboxCellValue.tsx"],"sourcesContent":["import { Checkbox } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport type { MouseEventHandler } from \"react\";\nimport { useCursorContext } from \"./CursorContext\";\nimport type { GridCellValueProps } from \"./GridColumn\";\nimport { useSelectionContext } from \"./SelectionContext\";\n\nimport checkboxCellCss from \"./CheckboxCell.css\";\n\nexport function RowSelectionCheckboxCellValue<T>(props: GridCellValueProps<T>) {\n const { row, column, isFocused } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-checkbox-cell\",\n css: checkboxCellCss,\n window: targetWindow,\n });\n\n const { selRowIdxs, selectRows } = useSelectionContext();\n const { moveCursor } = useCursorContext();\n\n const isSelected = selRowIdxs.has(row.index);\n\n const onMouseDown: MouseEventHandler<HTMLDivElement> = (event) => {\n selectRows({ rowIndex: row.index, incremental: true });\n moveCursor(\"body\", row.index, column.index);\n event.preventDefault();\n event.stopPropagation();\n };\n\n return (\n <div className=\"saltGridCheckboxContainer\" onMouseDown={onMouseDown}>\n <Checkbox\n data-testid=\"grid-row-selection-checkbox\"\n inputProps={{\n \"aria-label\": \"Select Row\",\n tabIndex: isFocused ? 0 : -1,\n }}\n checked={isSelected}\n />\n </div>\n );\n}\n"],"names":["useWindow","useComponentCssInjection","checkboxCellCss","useSelectionContext","useCursorContext","jsx","Checkbox"],"mappings":";;;;;;;;;;AAWO,SAAS,8BAAiC,KAA8B,EAAA;AAC7E,EAAA,MAAM,EAAE,GAAA,EAAK,MAAQ,EAAA,SAAA,EAAc,GAAA,KAAA;AAEnC,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,UAAA,EAAY,UAAW,EAAA,GAAIC,oCAAoB,EAAA;AACvD,EAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,8BAAiB,EAAA;AAExC,EAAA,MAAM,UAAa,GAAA,UAAA,CAAW,GAAI,CAAA,GAAA,CAAI,KAAK,CAAA;AAE3C,EAAM,MAAA,WAAA,GAAiD,CAAC,KAAU,KAAA;AAChE,IAAA,UAAA,CAAW,EAAE,QAAU,EAAA,GAAA,CAAI,KAAO,EAAA,WAAA,EAAa,MAAM,CAAA;AACrD,IAAA,UAAA,CAAW,MAAQ,EAAA,GAAA,CAAI,KAAO,EAAA,MAAA,CAAO,KAAK,CAAA;AAC1C,IAAA,KAAA,CAAM,cAAe,EAAA;AACrB,IAAA,KAAA,CAAM,eAAgB,EAAA;AAAA,GACxB;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,2BAAA,EAA4B,WACzC,EAAA,QAAA,kBAAAA,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,6BAAA;AAAA,MACZ,UAAY,EAAA;AAAA,QACV,YAAc,EAAA,YAAA;AAAA,QACd,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA;AAAA,OAC5B;AAAA,MACA,OAAS,EAAA;AAAA;AAAA,GAEb,EAAA,CAAA;AAEJ;;;;"}
|