@stenajs-webui/grid 14.2.0 → 15.0.0-alpha.3
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/dist/features/standard-table/components/TrWithHoverBackground.d.ts +1 -1
- package/dist/features/standard-table/context/StickyPropsPerColumnContext.d.ts +3 -2
- package/dist/features/standard-table/features/sticky-columns/StickyColumnGroupOffsetCalculator.d.ts +2 -2
- package/dist/features/standard-table/features/sticky-columns/StickyPropsPerColumnCalculator.d.ts +3 -3
- package/dist/features/standard-table/redux/StandardTableReducer.d.ts +1 -1
- package/dist/index.es.js +266 -260
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +283 -259
- package/dist/index.js.map +1 -1
- package/package.json +9 -10
package/dist/index.es.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useMemo, useRef, useState, useCallback, useEffect, useContext, createContext, useReducer } from 'react';
|
|
2
3
|
import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
|
|
3
4
|
import { InputSpinner, Icon, stenaArrowRight, FlatButton, ResultListBanner, Banner } from '@stenajs-webui/elements';
|
|
4
5
|
import { cssColor } from '@stenajs-webui/theme';
|
|
@@ -24,11 +25,11 @@ import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
|
|
|
24
25
|
import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
|
|
25
26
|
import styled from '@emotion/styled';
|
|
26
27
|
|
|
27
|
-
var GridHooksContext = createContext({});
|
|
28
|
+
var GridHooksContext = React.createContext({});
|
|
28
29
|
var GridHooksTable = function (_a) {
|
|
29
30
|
var children = _a.children, numCols = _a.numCols, numRows = _a.numRows, tableId = _a.tableId, wrap = _a.wrap;
|
|
30
31
|
var contextProps = useMemo(function () { return ({ numCols: numCols, numRows: numRows, tableId: tableId, wrap: wrap }); }, [numCols, numRows, tableId, wrap]);
|
|
31
|
-
return (createElement(GridHooksContext.Provider, { value: contextProps }, children));
|
|
32
|
+
return (React.createElement(GridHooksContext.Provider, { value: contextProps }, children));
|
|
32
33
|
};
|
|
33
34
|
|
|
34
35
|
var hasIndicatorContent = function (status) {
|
|
@@ -42,11 +43,11 @@ var CrudStatusIndicator = function (_a) {
|
|
|
42
43
|
}
|
|
43
44
|
var errorMessage = crudStatus.errorMessage, hasError = crudStatus.hasError, loading = crudStatus.loading, creating = crudStatus.creating, deleting = crudStatus.deleting, updating = crudStatus.updating;
|
|
44
45
|
if (loading || creating || deleting || updating) {
|
|
45
|
-
return createElement(InputSpinner, { color: cssColor("--lhds-color-ui-500") });
|
|
46
|
+
return React.createElement(InputSpinner, { color: cssColor("--lhds-color-ui-500") });
|
|
46
47
|
}
|
|
47
48
|
if (hasError) {
|
|
48
|
-
var icon = (createElement(Icon, { icon: faExclamationTriangle, color: cssColor("--lhds-color-orange-600"), size: 14 }));
|
|
49
|
-
return (createElement(Fragment, null, errorMessage ? (createElement(Tooltip, { label: errorMessage, zIndex: 100 }, icon)) : (icon)));
|
|
49
|
+
var icon = (React.createElement(Icon, { icon: faExclamationTriangle, color: cssColor("--lhds-color-orange-600"), size: 14 }));
|
|
50
|
+
return (React.createElement(React.Fragment, null, errorMessage ? (React.createElement(Tooltip, { label: errorMessage, zIndex: 100 }, icon)) : (icon)));
|
|
50
51
|
}
|
|
51
52
|
return null;
|
|
52
53
|
};
|
|
@@ -56,15 +57,15 @@ var ModifiedField = function (_a) {
|
|
|
56
57
|
var showEmptyFieldWarning = warningOnEmpty && (modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.modified) && (modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.newValue) === "";
|
|
57
58
|
var hasCrudIndicator = crudStatus && hasIndicatorContent(crudStatus);
|
|
58
59
|
var hasRightIcon = showEmptyFieldWarning || hasCrudIndicator;
|
|
59
|
-
return (createElement(Fragment, null,
|
|
60
|
-
createElement(Text, { color: isEditable ? "var(--swui-primary-action-color)" : undefined, variant: (modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.modified) ? "bold" : undefined }, value),
|
|
61
|
-
(modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.newValue) !== undefined && (createElement(Fragment, null,
|
|
62
|
-
createElement(Indent, null,
|
|
63
|
-
createElement(Icon, { icon: stenaArrowRight, size: 12 })),
|
|
64
|
-
createElement(Text, { color: "var(--swui-primary-action-color)", variant: "bold" }, modifiedField.newValue))),
|
|
65
|
-
hasRightIcon && createElement(Space, null),
|
|
66
|
-
showEmptyFieldWarning ? (createElement(Tooltip, { label: warningOnEmpty, zIndex: 100 },
|
|
67
|
-
createElement(Icon, { icon: faExclamationTriangle, color: cssColor("--lhds-color-orange-600"), size: 14 }))) : (createElement(CrudStatusIndicator, { crudStatus: crudStatus }))));
|
|
60
|
+
return (React.createElement(React.Fragment, null,
|
|
61
|
+
React.createElement(Text, { color: isEditable ? "var(--swui-primary-action-color)" : undefined, variant: (modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.modified) ? "bold" : undefined }, value),
|
|
62
|
+
(modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.newValue) !== undefined && (React.createElement(React.Fragment, null,
|
|
63
|
+
React.createElement(Indent, null,
|
|
64
|
+
React.createElement(Icon, { icon: stenaArrowRight, size: 12 })),
|
|
65
|
+
React.createElement(Text, { color: "var(--swui-primary-action-color)", variant: "bold" }, modifiedField.newValue))),
|
|
66
|
+
hasRightIcon && React.createElement(Space, null),
|
|
67
|
+
showEmptyFieldWarning ? (React.createElement(Tooltip, { label: warningOnEmpty, zIndex: 100 },
|
|
68
|
+
React.createElement(Icon, { icon: faExclamationTriangle, color: cssColor("--lhds-color-orange-600"), size: 14 }))) : (React.createElement(CrudStatusIndicator, { crudStatus: crudStatus }))));
|
|
68
69
|
};
|
|
69
70
|
|
|
70
71
|
/*! *****************************************************************************
|
|
@@ -105,13 +106,16 @@ function __rest(s, e) {
|
|
|
105
106
|
return t;
|
|
106
107
|
}
|
|
107
108
|
|
|
108
|
-
function
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
109
|
+
function __spreadArray(to, from, pack) {
|
|
110
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
111
|
+
if (ar || !(i in from)) {
|
|
112
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
113
|
+
ar[i] = from[i];
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
114
117
|
}
|
|
118
|
+
|
|
115
119
|
function __makeTemplateObject(cooked, raw) {
|
|
116
120
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
117
121
|
return cooked;
|
|
@@ -119,7 +123,7 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
119
123
|
|
|
120
124
|
var TableCell = function (_a) {
|
|
121
125
|
var _b = _a.alignItems, alignItems = _b === void 0 ? "center" : _b, _c = _a.justifyContent, justifyContent = _c === void 0 ? "flex-start" : _c, _d = _a.overflow, overflow = _d === void 0 ? "hidden" : _d, _e = _a.indent, indent = _e === void 0 ? 1 : _e, boxProps = __rest(_a, ["alignItems", "justifyContent", "overflow", "indent"]);
|
|
122
|
-
return (createElement(Row, __assign({ height: "100%", alignItems: alignItems, justifyContent: justifyContent, overflow: overflow, indent: indent }, boxProps)));
|
|
126
|
+
return (React.createElement(Row, __assign({ height: "100%", alignItems: alignItems, justifyContent: justifyContent, overflow: overflow, indent: indent }, boxProps)));
|
|
123
127
|
};
|
|
124
128
|
|
|
125
129
|
var tableBorderColor = "var(--lhds-color-ui-300)";
|
|
@@ -134,13 +138,13 @@ var defaultTableHeadRowHeight = "40px";
|
|
|
134
138
|
var smallTableRowWidth = "40px";
|
|
135
139
|
|
|
136
140
|
var SmallTableCell = function (props) {
|
|
137
|
-
return (createElement(TableCell, __assign({ width: smallTableRowWidth, justifyContent: "center" }, props)));
|
|
141
|
+
return (React.createElement(TableCell, __assign({ width: smallTableRowWidth, justifyContent: "center" }, props)));
|
|
138
142
|
};
|
|
139
143
|
|
|
140
144
|
var SortOrderIcon = function (_a) {
|
|
141
145
|
var _b = _a.iconVariant, iconVariant = _b === void 0 ? "amount" : _b, direction = _a.direction;
|
|
142
|
-
return (createElement(Box, { width: "14px" },
|
|
143
|
-
createElement(Icon, { size: 14, color: cssColor("--lhds-color-ui-500"), icon: getIcon(direction, iconVariant) })));
|
|
146
|
+
return (React.createElement(Box, { width: "14px" },
|
|
147
|
+
React.createElement(Icon, { size: 14, color: cssColor("--lhds-color-ui-500"), icon: getIcon(direction, iconVariant) })));
|
|
144
148
|
};
|
|
145
149
|
var getIcon = function (arrow, iconType) {
|
|
146
150
|
switch (iconType) {
|
|
@@ -155,60 +159,60 @@ var getIcon = function (arrow, iconType) {
|
|
|
155
159
|
}
|
|
156
160
|
};
|
|
157
161
|
|
|
158
|
-
var TableHeadItem = memo(function (_a) {
|
|
159
|
-
var label = _a.label, arrow = _a.arrow, onClick = _a.onClick, children = _a.children
|
|
162
|
+
var TableHeadItem = React.memo(function (_a) {
|
|
163
|
+
var label = _a.label, arrow = _a.arrow, onClick = _a.onClick, children = _a.children; _a.selected; var popoverContent = _a.popoverContent, loading = _a.loading, infoIconTooltipText = _a.infoIconTooltipText, _b = _a.overflow, overflow = _b === void 0 ? "hidden" : _b, alignRight = _a.alignRight, sortOrderIconVariant = _a.sortOrderIconVariant, boxProps = __rest(_a, ["label", "arrow", "onClick", "children", "selected", "popoverContent", "loading", "infoIconTooltipText", "overflow", "alignRight", "sortOrderIconVariant"]);
|
|
160
164
|
var containerRef = useRef(null);
|
|
161
165
|
var cursorStyle = onClick
|
|
162
166
|
? { cursor: "pointer", userSelect: "none" }
|
|
163
167
|
: undefined;
|
|
164
168
|
var hasOnlyChildren = !label && !arrow && !infoIconTooltipText;
|
|
165
|
-
return (createElement(Row, __assign({ height: "100%", alignItems: "center", ref: containerRef, overflow: overflow, justifyContent: alignRight ? "flex-end" : "flex-start" }, boxProps),
|
|
166
|
-
createElement(Row, { alignItems: "center", indent: true },
|
|
167
|
-
!arrow && alignRight && (createElement(Fragment, null,
|
|
168
|
-
createElement(Space, null),
|
|
169
|
-
createElement(Box, { width: "14px" }),
|
|
170
|
-
createElement(Space, { num: 0.5 }))),
|
|
171
|
-
(children || label) && (createElement(Row, { onClick: onClick, style: cursorStyle, alignItems: "center" },
|
|
172
|
-
children && (createElement(Fragment, null,
|
|
169
|
+
return (React.createElement(Row, __assign({ height: "100%", alignItems: "center", ref: containerRef, overflow: overflow, justifyContent: alignRight ? "flex-end" : "flex-start" }, boxProps),
|
|
170
|
+
React.createElement(Row, { alignItems: "center", indent: true },
|
|
171
|
+
!arrow && alignRight && (React.createElement(React.Fragment, null,
|
|
172
|
+
React.createElement(Space, null),
|
|
173
|
+
React.createElement(Box, { width: "14px" }),
|
|
174
|
+
React.createElement(Space, { num: 0.5 }))),
|
|
175
|
+
(children || label) && (React.createElement(Row, { onClick: onClick, style: cursorStyle, alignItems: "center" },
|
|
176
|
+
children && (React.createElement(React.Fragment, null,
|
|
173
177
|
children,
|
|
174
|
-
!hasOnlyChildren && createElement(Space, { num: 0.5 }))),
|
|
175
|
-
arrow && alignRight && (createElement(Fragment, null,
|
|
176
|
-
createElement(Space, null),
|
|
177
|
-
createElement(SortOrderIcon, { direction: arrow, iconVariant: sortOrderIconVariant }),
|
|
178
|
-
createElement(Space, { num: 0.5 }))),
|
|
179
|
-
label && createElement(Heading, { variant: "h6" }, label),
|
|
180
|
-
arrow && !alignRight && (createElement(Fragment, null,
|
|
181
|
-
createElement(Space, { num: 0.5 }),
|
|
182
|
-
createElement(SortOrderIcon, { direction: arrow, iconVariant: sortOrderIconVariant }),
|
|
183
|
-
createElement(Space, null))))),
|
|
184
|
-
infoIconTooltipText && (createElement(Fragment, null,
|
|
185
|
-
createElement(Space, null),
|
|
186
|
-
createElement(Row, { onClick: function (ev) { return ev.stopPropagation(); } },
|
|
187
|
-
createElement(Tooltip, { label: infoIconTooltipText, zIndex: "var(--swui-sticky-popover-z-index)" },
|
|
188
|
-
createElement(Icon, { icon: faInfoCircle, size: 14, color: cssColor("--lhds-color-blue-400") })),
|
|
189
|
-
createElement(Space, null))))),
|
|
190
|
-
createElement(Row, null, loading ? (createElement(InputSpinner, null)) : popoverContent ? (createElement(Popover, { content: popoverContent, trigger: "click", zIndex: 1000, disablePadding: true, variant: "outlined", arrow: false },
|
|
191
|
-
createElement(FlatButton, { leftIcon: faEllipsisV, size: "small" }))) : null),
|
|
192
|
-
!arrow && !alignRight && (createElement(Fragment, null,
|
|
193
|
-
createElement(Space, null),
|
|
194
|
-
createElement(Box, { width: "14px" }),
|
|
195
|
-
createElement(Space, { num: 0.5 })))));
|
|
178
|
+
!hasOnlyChildren && React.createElement(Space, { num: 0.5 }))),
|
|
179
|
+
arrow && alignRight && (React.createElement(React.Fragment, null,
|
|
180
|
+
React.createElement(Space, null),
|
|
181
|
+
React.createElement(SortOrderIcon, { direction: arrow, iconVariant: sortOrderIconVariant }),
|
|
182
|
+
React.createElement(Space, { num: 0.5 }))),
|
|
183
|
+
label && React.createElement(Heading, { variant: "h6" }, label),
|
|
184
|
+
arrow && !alignRight && (React.createElement(React.Fragment, null,
|
|
185
|
+
React.createElement(Space, { num: 0.5 }),
|
|
186
|
+
React.createElement(SortOrderIcon, { direction: arrow, iconVariant: sortOrderIconVariant }),
|
|
187
|
+
React.createElement(Space, null))))),
|
|
188
|
+
infoIconTooltipText && (React.createElement(React.Fragment, null,
|
|
189
|
+
React.createElement(Space, null),
|
|
190
|
+
React.createElement(Row, { onClick: function (ev) { return ev.stopPropagation(); } },
|
|
191
|
+
React.createElement(Tooltip, { label: infoIconTooltipText, zIndex: "var(--swui-sticky-popover-z-index)" },
|
|
192
|
+
React.createElement(Icon, { icon: faInfoCircle, size: 14, color: cssColor("--lhds-color-blue-400") })),
|
|
193
|
+
React.createElement(Space, null))))),
|
|
194
|
+
React.createElement(Row, null, loading ? (React.createElement(InputSpinner, null)) : popoverContent ? (React.createElement(Popover, { content: popoverContent, trigger: "click", zIndex: 1000, disablePadding: true, variant: "outlined", arrow: false },
|
|
195
|
+
React.createElement(FlatButton, { leftIcon: faEllipsisV, size: "small" }))) : null),
|
|
196
|
+
!arrow && !alignRight && (React.createElement(React.Fragment, null,
|
|
197
|
+
React.createElement(Space, null),
|
|
198
|
+
React.createElement(Box, { width: "14px" }),
|
|
199
|
+
React.createElement(Space, { num: 0.5 })))));
|
|
196
200
|
});
|
|
197
201
|
|
|
198
202
|
var SmallTableHead = function (props) {
|
|
199
|
-
return (createElement(TableHeadItem, __assign({ width: smallTableRowWidth, justifyContent: "center" }, props)));
|
|
203
|
+
return (React.createElement(TableHeadItem, __assign({ width: smallTableRowWidth, justifyContent: "center" }, props)));
|
|
200
204
|
};
|
|
201
205
|
|
|
202
206
|
var TableColumnGroupHead = function (_a) {
|
|
203
207
|
var label = _a.label, flex = _a.flex, width = _a.width, _b = _a.indent, indent = _b === void 0 ? 1 : _b, _c = _a.height, height = _c === void 0 ? defaultTableHeadRowHeight : _c;
|
|
204
|
-
return (createElement(TableHeadItem, { width: width, flex: flex, height: height },
|
|
205
|
-
createElement(Box, { indent: indent, spacing: true },
|
|
206
|
-
createElement(Text, { variant: "bold" }, label))));
|
|
208
|
+
return (React.createElement(TableHeadItem, { width: width, flex: flex, height: height },
|
|
209
|
+
React.createElement(Box, { indent: indent, spacing: true },
|
|
210
|
+
React.createElement(Text, { variant: "bold" }, label))));
|
|
207
211
|
};
|
|
208
212
|
|
|
209
|
-
var TableHeadRow = memo(function (_a) {
|
|
213
|
+
var TableHeadRow = React.memo(function (_a) {
|
|
210
214
|
var style = _a.style, _b = _a.height, height = _b === void 0 ? defaultTableHeadRowHeight : _b, boxProps = __rest(_a, ["style", "height"]);
|
|
211
|
-
return createElement(Row, __assign({ style: style, height: height }, boxProps));
|
|
215
|
+
return React.createElement(Row, __assign({ style: style, height: height }, boxProps));
|
|
212
216
|
});
|
|
213
217
|
|
|
214
218
|
function styleInject(css, ref) {
|
|
@@ -238,13 +242,13 @@ function styleInject(css, ref) {
|
|
|
238
242
|
}
|
|
239
243
|
}
|
|
240
244
|
|
|
241
|
-
var css_248z = ".TableRow-module_tableRow__hS0Sh:focus-within {\n background: var(--focus-within-background, var(--lhds-color-blue-50));\n }\n";
|
|
242
|
-
var styles = {"tableRow":"TableRow-module_tableRow__hS0Sh"};
|
|
243
|
-
styleInject(css_248z);
|
|
245
|
+
var css_248z$4 = ".TableRow-module_tableRow__hS0Sh:focus-within {\n background: var(--focus-within-background, var(--lhds-color-blue-50));\n }\n";
|
|
246
|
+
var styles$4 = {"tableRow":"TableRow-module_tableRow__hS0Sh"};
|
|
247
|
+
styleInject(css_248z$4);
|
|
244
248
|
|
|
245
249
|
var TableRow = function (_a) {
|
|
246
250
|
var _b = _a.height, height = _b === void 0 ? defaultTableHeadRowHeight : _b, className = _a.className, boxProps = __rest(_a, ["height", "className"]);
|
|
247
|
-
return (createElement(Row, __assign({ borderTop: tableBorder, height: height, className: cx(styles.tableRow, className) }, boxProps)));
|
|
251
|
+
return (React.createElement(Row, __assign({ borderTop: tableBorder, height: height, className: cx(styles$4.tableRow, className) }, boxProps)));
|
|
248
252
|
};
|
|
249
253
|
|
|
250
254
|
var useRevertableValue = function (initialValue) {
|
|
@@ -333,7 +337,7 @@ var useEditableCell = function (value, _a) {
|
|
|
333
337
|
}
|
|
334
338
|
}, [isEditable, onStopEditing, revert, setIsEditing]);
|
|
335
339
|
var onKeyDown = useMemo(function () {
|
|
336
|
-
return createKeyDownHandler(isEditing, isEditable, startEditing, setLastKeyEvent, allowedInputType, transformEnteredValue, revertableValue);
|
|
340
|
+
return createKeyDownHandler$1(isEditing, isEditable, startEditing, setLastKeyEvent, allowedInputType, transformEnteredValue, revertableValue);
|
|
337
341
|
}, [
|
|
338
342
|
isEditing,
|
|
339
343
|
isEditable,
|
|
@@ -367,7 +371,7 @@ var allowsLetters = function (allowedInputType) {
|
|
|
367
371
|
var isCharacter = function (key) { return !!key.match(/^[-+*<>]$/); };
|
|
368
372
|
var isLetter = function (key) { return !!key.match(/^[a-zA-Z0-9]$/); };
|
|
369
373
|
var isNumeric = function (key) { return !isNaN(parseInt(key, 10)); };
|
|
370
|
-
var createKeyDownHandler = function (_, // isEditing
|
|
374
|
+
var createKeyDownHandler$1 = function (_, // isEditing
|
|
371
375
|
isEditable, startEditing, setLastKeyEvent, allowedInputType, transformEnteredValue, revertableValue) { return function (e) {
|
|
372
376
|
if (e.ctrlKey || e.metaKey || e.shiftKey) {
|
|
373
377
|
return;
|
|
@@ -513,7 +517,7 @@ var useGridNavigation = function (options) {
|
|
|
513
517
|
onCellMove,
|
|
514
518
|
onCellNavigation,
|
|
515
519
|
]);
|
|
516
|
-
var onKeyDown = useMemo(function () { return createKeyDownHandler
|
|
520
|
+
var onKeyDown = useMemo(function () { return createKeyDownHandler(moveHandler); }, [
|
|
517
521
|
moveHandler,
|
|
518
522
|
]);
|
|
519
523
|
var id = useMemo(function () { return createCellId(tableId, rowIndex, colIndex); }, [
|
|
@@ -564,7 +568,7 @@ var createMoveHandler = function (tableId, rowIndex, colIndex, numRows, numCols,
|
|
|
564
568
|
}
|
|
565
569
|
}; };
|
|
566
570
|
var createCellId = function (tableId, rowIndex, colIndex) { return ensureDomIdIsCorrect("table-" + tableId + "-" + rowIndex + "-" + colIndex); };
|
|
567
|
-
var createKeyDownHandler
|
|
571
|
+
var createKeyDownHandler = function (moveHandler) { return function (e) {
|
|
568
572
|
if (e.key === "ArrowLeft") {
|
|
569
573
|
moveHandler("left");
|
|
570
574
|
e.preventDefault();
|
|
@@ -707,22 +711,23 @@ var EditableTextCellWithCrudAndModified = function EditableTextCellWithCrudAndMo
|
|
|
707
711
|
modifiedFieldsRedux.actions,
|
|
708
712
|
crudStatusRedux.actions,
|
|
709
713
|
]);
|
|
710
|
-
return (createElement(Row, { height: defaultTableRowHeight, width: "100%", borderBottom: tableBorder, hoverBackground: "var(--ui7)", alignItems: "center" },
|
|
711
|
-
rowIndent && createElement(Indent, { num: rowIndent }),
|
|
712
|
-
createElement(Row, __assign({ width: "100%", height: "100%", justifyContent: "flex-end", alignItems: "center", border: "1px solid transparent", borderRadius:
|
|
714
|
+
return (React.createElement(Row, { height: defaultTableRowHeight, width: "100%", borderBottom: tableBorder, hoverBackground: "var(--ui7)", alignItems: "center" },
|
|
715
|
+
rowIndent && React.createElement(Indent, { num: rowIndent }),
|
|
716
|
+
React.createElement(Row, __assign({ width: "100%", height: "100%", justifyContent: "flex-end", alignItems: "center", border: "1px solid transparent", borderRadius: "4px" , focusBorder: !isEditing
|
|
713
717
|
? "1px solid var(--primary-action-color)"
|
|
714
|
-
: undefined, hoverBorder:
|
|
715
|
-
createElement(Indent, { row: true, alignItems: "center" }, isEditing ? (createElement(TextInput, { onValueChange: setEditorValue, value: editorValue, onDone: stopEditing, onEsc: stopEditingAndRevert, autoFocus: true, selectAllOnMount: !lastKeyEvent, onMove: stopEditingAndMove })) : (createElement(Fragment, null,
|
|
716
|
-
createElement(Text, { color: isEditable ? "var(--primary-action-color)" : undefined, variant: (modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.modified) ? "bold" : undefined }, value),
|
|
717
|
-
(modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.newValue) !== undefined && (createElement(Fragment, null,
|
|
718
|
-
createElement(Indent, null,
|
|
719
|
-
createElement(Icon, { icon: faArrowRight, size: 12 })),
|
|
720
|
-
createElement(Text, { color: "var(--primary-action-color)", variant: "bold" }, modifiedField.newValue))),
|
|
721
|
-
crudStatus && hasIndicatorContent(crudStatus) && (createElement(Space, { num: 2 })),
|
|
722
|
-
warningOnEmpty &&
|
|
723
|
-
(modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.
|
|
724
|
-
|
|
725
|
-
|
|
718
|
+
: undefined, hoverBorder: !isEditing ? "var(--ui5) solid 1px;" : undefined, onKeyDown: onKeyDownHandler }, (requiredProps )),
|
|
719
|
+
React.createElement(Indent, { row: true, alignItems: "center" }, isEditing ? (React.createElement(TextInput, { onValueChange: setEditorValue, value: editorValue, onDone: stopEditing, onEsc: stopEditingAndRevert, autoFocus: true, selectAllOnMount: !lastKeyEvent, onMove: stopEditingAndMove })) : (React.createElement(React.Fragment, null,
|
|
720
|
+
React.createElement(Text, { color: isEditable ? "var(--primary-action-color)" : undefined, variant: (modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.modified) ? "bold" : undefined }, value),
|
|
721
|
+
(modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.newValue) !== undefined && (React.createElement(React.Fragment, null,
|
|
722
|
+
React.createElement(Indent, null,
|
|
723
|
+
React.createElement(Icon, { icon: faArrowRight, size: 12 })),
|
|
724
|
+
React.createElement(Text, { color: "var(--primary-action-color)", variant: "bold" }, modifiedField.newValue))),
|
|
725
|
+
crudStatus && hasIndicatorContent(crudStatus) && (React.createElement(Space, { num: 2 })),
|
|
726
|
+
warningOnEmpty &&
|
|
727
|
+
(modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.modified) &&
|
|
728
|
+
(modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.newValue) === "" ? (React.createElement(Tooltip, { label: warningOnEmpty, zIndex: 100 },
|
|
729
|
+
React.createElement(Icon, { icon: faExclamationTriangle, color: "var(--ui-alert1)", size: 14 }))) : (React.createElement(CrudStatusIndicator, { crudStatus: crudStatus })))))),
|
|
730
|
+
rowIndent && React.createElement(Indent, { num: rowIndent })));
|
|
726
731
|
};
|
|
727
732
|
|
|
728
733
|
var StandardTableTableIdContext = createContext("");
|
|
@@ -911,7 +916,7 @@ var ColumnInGroup = function ColumnGroupColumnItem(_a) {
|
|
|
911
916
|
(stickyColumnGroups === "last" || stickyColumnGroups === "both");
|
|
912
917
|
var isSticky = isStickyFirstGroup || isStickyLastGroup || stickyHeader;
|
|
913
918
|
var isStickyGroup = isStickyFirstGroup || isStickyLastGroup;
|
|
914
|
-
return (createElement("th", { colSpan: colSpan, style: {
|
|
919
|
+
return (React.createElement("th", { colSpan: colSpan, style: {
|
|
915
920
|
position: isSticky ? "sticky" : undefined,
|
|
916
921
|
height: "var(--current-row-height)",
|
|
917
922
|
width: width,
|
|
@@ -926,26 +931,27 @@ var ColumnInGroup = function ColumnGroupColumnItem(_a) {
|
|
|
926
931
|
: isStickyGroup
|
|
927
932
|
? "var(--swui-sticky-group-group-z-index)"
|
|
928
933
|
: stickyHeader
|
|
929
|
-
? zIndex !== null && zIndex !== void 0 ? zIndex : "var(--swui-sticky-header-column-group-z-index)"
|
|
934
|
+
? zIndex !== null && zIndex !== void 0 ? zIndex : "var(--swui-sticky-header-column-group-z-index)"
|
|
935
|
+
: zIndex !== null && zIndex !== void 0 ? zIndex : 1,
|
|
930
936
|
boxShadow: isStickyFirstGroup
|
|
931
937
|
? "var(--swui-sticky-column-shadow-right)"
|
|
932
938
|
: isStickyLastGroup
|
|
933
939
|
? "var(--swui-sticky-column-shadow-left)"
|
|
934
940
|
: undefined,
|
|
935
941
|
} },
|
|
936
|
-
createElement(Row, { alignItems: "center" }, createElement(Fragment, null,
|
|
937
|
-
contentLeft && (createElement(Fragment, null,
|
|
938
|
-
createElement(Space, null),
|
|
942
|
+
React.createElement(Row, { alignItems: "center" }, React.createElement(React.Fragment, null,
|
|
943
|
+
contentLeft && (React.createElement(React.Fragment, null,
|
|
944
|
+
React.createElement(Space, null),
|
|
939
945
|
contentLeft,
|
|
940
|
-
createElement(Space, { num: 0.5 }))),
|
|
941
|
-
render ? (render(groupConfig)) : (createElement(Indent, null,
|
|
942
|
-
createElement(Heading, { variant: "h5", whiteSpace: "nowrap" }, label))),
|
|
943
|
-
contentRight && (createElement(Fragment, null,
|
|
944
|
-
createElement(Space, { num: 0.5 }),
|
|
946
|
+
React.createElement(Space, { num: 0.5 }))),
|
|
947
|
+
render ? (render(groupConfig)) : (React.createElement(Indent, null,
|
|
948
|
+
React.createElement(Heading, { variant: "h5", whiteSpace: "nowrap" }, label))),
|
|
949
|
+
contentRight && (React.createElement(React.Fragment, null,
|
|
950
|
+
React.createElement(Space, { num: 0.5 }),
|
|
945
951
|
contentRight)),
|
|
946
|
-
(error || loading) && createElement(Indent, null),
|
|
947
|
-
loading ? (createElement(InputSpinner, null)) : error ? (createElement(Tooltip, { label: error, placement: "bottom", appendTo: document.body },
|
|
948
|
-
createElement(Icon, { icon: faExclamationTriangle, color: cssColor("--lhds-color-red-500"), size: 14 }))) : undefined))));
|
|
952
|
+
(error || loading) && React.createElement(Indent, null),
|
|
953
|
+
loading ? (React.createElement(InputSpinner, null)) : error ? (React.createElement(Tooltip, { label: error, placement: "bottom", appendTo: document.body },
|
|
954
|
+
React.createElement(Icon, { icon: faExclamationTriangle, color: cssColor("--lhds-color-red-500"), size: 14 }))) : undefined))));
|
|
949
955
|
};
|
|
950
956
|
var getActiveBorder = function (borderFromGroup, borderFromColumn) {
|
|
951
957
|
if (borderFromGroup) {
|
|
@@ -959,7 +965,7 @@ var getActiveBorder = function (borderFromGroup, borderFromColumn) {
|
|
|
959
965
|
|
|
960
966
|
var createStickyHeaderProps = function (stickyHeader, stickyColumn, headerRowOffsetTop, zIndexFromConfig) { return ({
|
|
961
967
|
top: stickyHeader
|
|
962
|
-
? getTopPosition(stickyHeader, headerRowOffsetTop)
|
|
968
|
+
? getTopPosition$1(stickyHeader, headerRowOffsetTop)
|
|
963
969
|
: undefined,
|
|
964
970
|
background: stickyHeader || stickyColumn ? "white" : undefined,
|
|
965
971
|
position: stickyHeader || stickyColumn ? "sticky" : undefined,
|
|
@@ -967,9 +973,10 @@ var createStickyHeaderProps = function (stickyHeader, stickyColumn, headerRowOff
|
|
|
967
973
|
? "var(--swui-sticky-column-shadow-right)"
|
|
968
974
|
: undefined,
|
|
969
975
|
zIndex: stickyHeader || stickyColumn
|
|
970
|
-
? zIndexFromConfig !== null && zIndexFromConfig !== void 0 ? zIndexFromConfig : "var(--swui-sticky-header-z-index)"
|
|
976
|
+
? zIndexFromConfig !== null && zIndexFromConfig !== void 0 ? zIndexFromConfig : "var(--swui-sticky-header-z-index)"
|
|
977
|
+
: zIndexFromConfig,
|
|
971
978
|
}); };
|
|
972
|
-
var getTopPosition = function (stickyHeader, headerRowOffsetTop) {
|
|
979
|
+
var getTopPosition$1 = function (stickyHeader, headerRowOffsetTop) {
|
|
973
980
|
if (stickyHeader && headerRowOffsetTop) {
|
|
974
981
|
return headerRowOffsetTop;
|
|
975
982
|
}
|
|
@@ -982,7 +989,7 @@ var getTopPosition = function (stickyHeader, headerRowOffsetTop) {
|
|
|
982
989
|
return undefined;
|
|
983
990
|
};
|
|
984
991
|
|
|
985
|
-
var ColumnGroupRow = memo(function ColumnGroupRow(_a) {
|
|
992
|
+
var ColumnGroupRow = React.memo(function ColumnGroupRow(_a) {
|
|
986
993
|
var _b = _a.height, height = _b === void 0 ? defaultTableRowHeight : _b;
|
|
987
994
|
var groupConfigAndIds = useGroupConfigsAndIdsForRows();
|
|
988
995
|
var config = useStandardTableConfig();
|
|
@@ -991,22 +998,22 @@ var ColumnGroupRow = memo(function ColumnGroupRow(_a) {
|
|
|
991
998
|
var zIndexForCells = (stickyHeader
|
|
992
999
|
? "var(--swui-sticky-column-group-label-z-index)"
|
|
993
1000
|
: "var(--swui-sticky-group-group-z-index)");
|
|
994
|
-
return (createElement("tr", { style: {
|
|
1001
|
+
return (React.createElement("tr", { style: {
|
|
995
1002
|
height: height,
|
|
996
1003
|
borderLeft: tableBorderLeft,
|
|
997
1004
|
} },
|
|
998
|
-
rowIndent && createElement("th", { style: stickyHeaderProps }),
|
|
999
|
-
enableExpandCollapse && (createElement("th", { style: __assign(__assign({}, stickyHeaderProps), { width: "var(--swui-expand-cell-width)", left: stickyCheckboxColumn ? "0px" : undefined, zIndex: zIndexForCells }) })),
|
|
1000
|
-
showHeaderCheckbox && (createElement("th", { style: __assign(__assign({}, stickyHeaderProps), { left: stickyCheckboxColumn && enableExpandCollapse
|
|
1005
|
+
rowIndent && React.createElement("th", { style: stickyHeaderProps }),
|
|
1006
|
+
enableExpandCollapse && (React.createElement("th", { style: __assign(__assign({}, stickyHeaderProps), { width: "var(--swui-expand-cell-width)", left: stickyCheckboxColumn ? "0px" : undefined, zIndex: zIndexForCells }) })),
|
|
1007
|
+
showHeaderCheckbox && (React.createElement("th", { style: __assign(__assign({}, stickyHeaderProps), { left: stickyCheckboxColumn && enableExpandCollapse
|
|
1001
1008
|
? "var(--swui-expand-cell-width)"
|
|
1002
1009
|
: stickyCheckboxColumn
|
|
1003
1010
|
? "0px"
|
|
1004
1011
|
: undefined, zIndex: zIndexForCells }) })),
|
|
1005
1012
|
groupConfigAndIds.map(function (_a, groupIndex) {
|
|
1006
1013
|
var groupConfig = _a.groupConfig, groupId = _a.groupId;
|
|
1007
|
-
return (createElement(ColumnInGroup, { isFirstGroup: groupIndex === 0, isLastGroup: groupIndex === groupConfigAndIds.length - 1, groupConfig: groupConfig, columnId: groupConfig.columnOrder[0], key: groupId, colSpan: groupConfig.columnOrder.length, borderFromGroup: getCellBorderFromGroup(groupIndex, 0, groupConfig.borderLeft) }));
|
|
1014
|
+
return (React.createElement(ColumnInGroup, { isFirstGroup: groupIndex === 0, isLastGroup: groupIndex === groupConfigAndIds.length - 1, groupConfig: groupConfig, columnId: groupConfig.columnOrder[0], key: groupId, colSpan: groupConfig.columnOrder.length, borderFromGroup: getCellBorderFromGroup(groupIndex, 0, groupConfig.borderLeft) }));
|
|
1008
1015
|
}),
|
|
1009
|
-
rowIndent && createElement("th", { style: stickyHeaderProps })));
|
|
1016
|
+
rowIndent && React.createElement("th", { style: stickyHeaderProps })));
|
|
1010
1017
|
});
|
|
1011
1018
|
|
|
1012
1019
|
var calculateColumnIndexPerColumnId = function (config) {
|
|
@@ -1138,7 +1145,7 @@ var getColumnIdsForRightSideStickyGroup = function (config) {
|
|
|
1138
1145
|
if (!columnGroupConfig) {
|
|
1139
1146
|
return [];
|
|
1140
1147
|
}
|
|
1141
|
-
var r =
|
|
1148
|
+
var r = __spreadArray([], columnGroupConfig.columnOrder, true);
|
|
1142
1149
|
r.reverse();
|
|
1143
1150
|
return r;
|
|
1144
1151
|
};
|
|
@@ -1265,9 +1272,9 @@ var getNumUserColumns = function (config) {
|
|
|
1265
1272
|
return (_b = (_a = config.columnOrder) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
|
|
1266
1273
|
};
|
|
1267
1274
|
|
|
1268
|
-
var css_248z$
|
|
1269
|
-
var styles$
|
|
1270
|
-
styleInject(css_248z$
|
|
1275
|
+
var css_248z$3 = ".StandardTable-module_standardTable__2WNjA {\n --swui-standard-table-height: 40px;\n --swui-sticky-header-shadow: 2px 4px 4px 0 rgba(0, 0, 0, 0.05);\n --swui-sticky-header-shadow-and-right: var(--swui-sticky-header-shadow),\n var(--swui-sticky-column-shadow-right);\n --swui-sticky-header-shadow-and-left: var(--swui-sticky-header-shadow),\n var(--swui-sticky-column-shadow-left);\n --swui-sticky-column-shadow-right: 4px 2px 4px 0 rgba(0, 0, 0, 0.05);\n --swui-sticky-column-shadow-left: -4px 2px 4px 0 rgba(0, 0, 0, 0.05);\n --swui-sticky-header-z-index: 10;\n --swui-sticky-column-z-index: 20;\n --swui-sticky-group-group-z-index: 25;\n --swui-sticky-group-header-z-index: 26;\n --swui-sticky-header-column-group-z-index: 30;\n --swui-sticky-column-group-label-z-index: 40;\n --swui-sticky-header-in-sticky-column-z-index: 50;\n --swui-sticky-popover-z-index: 60;\n --swui-expand-cell-width: 45px;\n --swui-checkbox-cell-width: 45px;\n --swui-expand-highlight-border-width: 2px;\n\n /* Current */\n --current-row-height: var(--swui-standard-table-height);\n --current-left-offset: 0px;\n\n border-spacing: 0;\n}\n\n .StandardTable-module_standardTable__2WNjA td {\n border-top: 1px solid var(--lhds-color-ui-300);\n padding: 0;\n }\n\n .StandardTable-module_standardTable__2WNjA th {\n padding: 0;\n }\n\n .StandardTable-module_standardTable__2WNjA.StandardTable-module_relaxed__3Gff3 {\n --current-row-height: 48px;\n }\n\n .StandardTable-module_standardTable__2WNjA.StandardTable-module_condensed__32B6k {\n --current-row-height: 32px;\n }\n\n .StandardTable-module_standardTable__2WNjA.StandardTable-module_compact__8du-I {\n --current-row-height: 24px;\n }\n";
|
|
1276
|
+
var styles$3 = {"standardTable":"StandardTable-module_standardTable__2WNjA","relaxed":"StandardTable-module_relaxed__3Gff3","condensed":"StandardTable-module_condensed__32B6k","compact":"StandardTable-module_compact__8du-I"};
|
|
1277
|
+
styleInject(css_248z$3);
|
|
1271
1278
|
|
|
1272
1279
|
var multitypeComparator = function (a, b) {
|
|
1273
1280
|
if (a != null && b == null) {
|
|
@@ -1304,7 +1311,7 @@ var useColumnValueResolver = function (columnId) {
|
|
|
1304
1311
|
return column.itemValueResolver;
|
|
1305
1312
|
};
|
|
1306
1313
|
|
|
1307
|
-
var StandardTableRowCheckbox = memo(function StandardTableRowCheckbox(_a) {
|
|
1314
|
+
var StandardTableRowCheckbox = React.memo(function StandardTableRowCheckbox(_a) {
|
|
1308
1315
|
var value = _a.value, onValueChange = _a.onValueChange, colIndex = _a.colIndex, rowIndex = _a.rowIndex, numRows = _a.numRows, disabled = _a.disabled, onValueChangeAndShift = _a.onValueChangeAndShift, shiftPressedRef = _a.shiftPressedRef;
|
|
1309
1316
|
var totalNumColumns = useTotalNumColumnsForRows();
|
|
1310
1317
|
var tableId = useStandardTableId();
|
|
@@ -1324,7 +1331,7 @@ var StandardTableRowCheckbox = memo(function StandardTableRowCheckbox(_a) {
|
|
|
1324
1331
|
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value);
|
|
1325
1332
|
}
|
|
1326
1333
|
}, [onValueChange, onValueChangeAndShift, shiftPressedRef]);
|
|
1327
|
-
return (createElement(Checkbox, __assign({ size: "small", disabled: disabled, value: value, onValueChange: internalOnValueChange }, requiredProps)));
|
|
1334
|
+
return (React.createElement(Checkbox, __assign({ size: "small", disabled: disabled, value: value, onValueChange: internalOnValueChange }, requiredProps)));
|
|
1328
1335
|
});
|
|
1329
1336
|
|
|
1330
1337
|
var getIdsBetweenSelected = function (idList, selected1, selected2) {
|
|
@@ -1436,14 +1443,14 @@ var StandardTableRowExpandButton = function (_a) {
|
|
|
1436
1443
|
}
|
|
1437
1444
|
return expandCollapseDisableResolver(item);
|
|
1438
1445
|
}, [expandCollapseDisableResolver, item]);
|
|
1439
|
-
return (createElement(Row, { alignItems: "center", justifyContent: "center", indent: true }, !buttonDisabled && (createElement(FlatButton, __assign({ size: "small", leftIcon: isExpanded ? faChevronDown : faChevronRight, onClick: toggleRowExpanded }, requiredProps)))));
|
|
1446
|
+
return (React.createElement(Row, { alignItems: "center", justifyContent: "center", indent: true }, !buttonDisabled && (React.createElement(FlatButton, __assign({ size: "small", leftIcon: isExpanded ? faChevronDown : faChevronRight, onClick: toggleRowExpanded }, requiredProps)))));
|
|
1440
1447
|
};
|
|
1441
1448
|
|
|
1442
|
-
var getBackgroundColor = function (backgroundResolver, item, background) {
|
|
1449
|
+
var getBackgroundColor$1 = function (backgroundResolver, item, background) {
|
|
1443
1450
|
return backgroundResolver ? backgroundResolver(item) : background;
|
|
1444
1451
|
};
|
|
1445
1452
|
var useBackground = function (backgroundResolver, item, background) {
|
|
1446
|
-
return useMemo(function () { return getBackgroundColor(backgroundResolver, item, background); }, [
|
|
1453
|
+
return useMemo(function () { return getBackgroundColor$1(backgroundResolver, item, background); }, [
|
|
1447
1454
|
backgroundResolver,
|
|
1448
1455
|
item,
|
|
1449
1456
|
background,
|
|
@@ -1480,27 +1487,27 @@ var css_248z$2 = ".StandardTableCellUi-module_standardTableCell__1lvps {\n outl
|
|
|
1480
1487
|
var styles$2 = {"standardTableCell":"StandardTableCellUi-module_standardTableCell__1lvps"};
|
|
1481
1488
|
styleInject(css_248z$2);
|
|
1482
1489
|
|
|
1483
|
-
var StandardTableCellUi = memo(function StandardTableCellUi(_a) {
|
|
1490
|
+
var StandardTableCellUi = React.memo(function StandardTableCellUi(_a) {
|
|
1484
1491
|
var enableGridCell = _a.enableGridCell, children = _a.children, background = _a.background, gridCellRequiredProps = _a.gridCellRequiredProps, isEditing = _a.isEditing, justifyContent = _a.justifyContent, onKeyDown = _a.onKeyDown, width = _a.width, minWidth = _a.minWidth;
|
|
1485
|
-
return (createElement(Row, { width: width, minWidth: minWidth, height: "inherit", background: background, overflow: "hidden", onKeyDown: onKeyDown },
|
|
1486
|
-
createElement(Row, __assign({ border: "1px solid transparent", className: styles$2.standardTableCell, width: "100%", height: "100%", justifyContent: justifyContent, alignItems: "center", borderRadius: enableGridCell ? "4px" : undefined, focusBorder: enableGridCell && !isEditing
|
|
1492
|
+
return (React.createElement(Row, { width: width, minWidth: minWidth, height: "inherit", background: background, overflow: "hidden", onKeyDown: onKeyDown },
|
|
1493
|
+
React.createElement(Row, __assign({ border: "1px solid transparent", className: styles$2.standardTableCell, width: "100%", height: "100%", justifyContent: justifyContent, alignItems: "center", borderRadius: enableGridCell ? "4px" : undefined, focusBorder: enableGridCell && !isEditing
|
|
1487
1494
|
? "1px solid var(--swui-primary-action-color)"
|
|
1488
1495
|
: undefined, hoverBorder: enableGridCell && !isEditing
|
|
1489
1496
|
? "1px solid var(--lhds-color-ui-300)"
|
|
1490
1497
|
: undefined }, (enableGridCell ? gridCellRequiredProps : undefined)), children)));
|
|
1491
1498
|
});
|
|
1492
1499
|
|
|
1493
|
-
var css_248z$
|
|
1494
|
-
var styles$
|
|
1495
|
-
styleInject(css_248z$
|
|
1500
|
+
var css_248z$1 = ".TextCell-module_textCell__3nIGF {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n";
|
|
1501
|
+
var styles$1 = {"textCell":"TextCell-module_textCell__3nIGF"};
|
|
1502
|
+
styleInject(css_248z$1);
|
|
1496
1503
|
|
|
1497
|
-
var TextCell = memo(function TextCell(_a) {
|
|
1504
|
+
var TextCell = React.memo(function TextCell(_a) {
|
|
1498
1505
|
var label = _a.label;
|
|
1499
|
-
return (createElement(Indent, { overflow: "hidden" },
|
|
1500
|
-
createElement(Text, { className: styles$
|
|
1506
|
+
return (React.createElement(Indent, { overflow: "hidden" },
|
|
1507
|
+
React.createElement(Text, { className: styles$1.textCell, title: label }, label)));
|
|
1501
1508
|
});
|
|
1502
1509
|
|
|
1503
|
-
var StandardTableCell = memo(function StandardTableCell(_a) {
|
|
1510
|
+
var StandardTableCell = React.memo(function StandardTableCell(_a) {
|
|
1504
1511
|
var _b;
|
|
1505
1512
|
var columnId = _a.columnId, item = _a.item, colIndex = _a.colIndex, rowIndex = _a.rowIndex, numRows = _a.numRows, borderFromGroup = _a.borderFromGroup, disableBorderLeft = _a.disableBorderLeft;
|
|
1506
1513
|
var _c = useStandardTableConfig(), keyResolver = _c.keyResolver, enableGridCell = _c.enableGridCell, gridCellOptionsForTable = _c.gridCellOptions;
|
|
@@ -1541,15 +1548,14 @@ var StandardTableCell = memo(function StandardTableCell(_a) {
|
|
|
1541
1548
|
ev.stopPropagation();
|
|
1542
1549
|
}
|
|
1543
1550
|
}, [onKeyDownTable, columnId, item, onKeyDownCell]);
|
|
1544
|
-
var gridCell = useGridCell(label, __assign(__assign({ colIndex: colIndex,
|
|
1545
|
-
rowIndex: rowIndex,
|
|
1546
|
-
numRows: numRows, numCols: numNavigableColumns, tableId: tableId, isEditable: editable, onChange: onChange
|
|
1551
|
+
var gridCell = useGridCell(label, __assign(__assign({ colIndex: colIndex, rowIndex: rowIndex, numRows: numRows, numCols: numNavigableColumns, tableId: tableId, isEditable: editable, onChange: onChange
|
|
1547
1552
|
? function (value) { return onChange(item, value); }
|
|
1548
1553
|
: undefined }, gridCellOptionsForTable), gridCellOptionsForColumn));
|
|
1549
1554
|
var stickyProps = stickyPropsPerColumnContext[columnId];
|
|
1550
1555
|
var background = (_b = useCellBackgroundByColumnId(columnId, item)) !== null && _b !== void 0 ? _b : "inherit";
|
|
1551
1556
|
var currentZIndex = stickyProps.sticky
|
|
1552
|
-
? zIndex !== null && zIndex !== void 0 ? zIndex : "var(--swui-sticky-column-z-index)"
|
|
1557
|
+
? zIndex !== null && zIndex !== void 0 ? zIndex : "var(--swui-sticky-column-z-index)"
|
|
1558
|
+
: zIndex !== null && zIndex !== void 0 ? zIndex : 1;
|
|
1553
1559
|
var content = useMemo(function () {
|
|
1554
1560
|
return renderCell ? (renderCell({
|
|
1555
1561
|
label: label,
|
|
@@ -1559,7 +1565,7 @@ var StandardTableCell = memo(function StandardTableCell(_a) {
|
|
|
1559
1565
|
isEditable: editable,
|
|
1560
1566
|
isSelected: isSelected,
|
|
1561
1567
|
zIndex: currentZIndex,
|
|
1562
|
-
})) : (createElement(TextCell, { label: label }));
|
|
1568
|
+
})) : (React.createElement(TextCell, { label: label }));
|
|
1563
1569
|
}, [
|
|
1564
1570
|
renderCell,
|
|
1565
1571
|
label,
|
|
@@ -1580,7 +1586,7 @@ var StandardTableCell = memo(function StandardTableCell(_a) {
|
|
|
1580
1586
|
: stickyProps.sticky
|
|
1581
1587
|
? "var(--swui-sticky-column-shadow-right)"
|
|
1582
1588
|
: undefined;
|
|
1583
|
-
return (createElement("td", { style: {
|
|
1589
|
+
return (React.createElement("td", { style: {
|
|
1584
1590
|
borderLeft: activeBorderLeft,
|
|
1585
1591
|
position: stickyProps.sticky ? "sticky" : undefined,
|
|
1586
1592
|
left: stickyProps.sticky ? stickyProps.left : undefined,
|
|
@@ -1590,7 +1596,7 @@ var StandardTableCell = memo(function StandardTableCell(_a) {
|
|
|
1590
1596
|
height: "var(--current-row-height)",
|
|
1591
1597
|
background: background,
|
|
1592
1598
|
} },
|
|
1593
|
-
createElement(StandardTableCellUi, { enableGridCell: enableGridCell && !disableGridCell && !disableGridCellFocus, gridCellRequiredProps: gridCell.requiredProps, isEditing: gridCell.isEditing, width: width, minWidth: minWidth, justifyContent: justifyContentCell, onKeyDown: onKeyDownHandler }, content)));
|
|
1599
|
+
React.createElement(StandardTableCellUi, { enableGridCell: enableGridCell && !disableGridCell && !disableGridCellFocus, gridCellRequiredProps: gridCell.requiredProps, isEditing: gridCell.isEditing, width: width, minWidth: minWidth, justifyContent: justifyContentCell, onKeyDown: onKeyDownHandler }, content)));
|
|
1594
1600
|
});
|
|
1595
1601
|
|
|
1596
1602
|
var StandardTableRowExpansion = function StandardTableRowExpansion(_a) {
|
|
@@ -1598,16 +1604,14 @@ var StandardTableRowExpansion = function StandardTableRowExpansion(_a) {
|
|
|
1598
1604
|
var _b = useStandardTableConfig(), renderRowExpansion = _b.renderRowExpansion, enableExpandCollapse = _b.enableExpandCollapse;
|
|
1599
1605
|
var _c = useExpandCollapseActions(item), isExpanded = _c.isExpanded, toggleRowExpanded = _c.toggleRowExpanded;
|
|
1600
1606
|
var totalNumColumns = useTotalNumColumns();
|
|
1601
|
-
return (createElement(Fragment, null, enableExpandCollapse && renderRowExpansion && isExpanded && (createElement("tr", { style: {
|
|
1607
|
+
return (React.createElement(React.Fragment, null, enableExpandCollapse && renderRowExpansion && isExpanded && (React.createElement("tr", { style: {
|
|
1602
1608
|
borderLeft: tableBorderLeftExpanded,
|
|
1603
1609
|
background: tableBackgroundColorExpanded,
|
|
1604
1610
|
} },
|
|
1605
|
-
createElement("td", { colSpan: totalNumColumns }, renderRowExpansion(item, { onRequestCollapse: toggleRowExpanded }))))));
|
|
1611
|
+
React.createElement("td", { colSpan: totalNumColumns }, renderRowExpansion(item, { onRequestCollapse: toggleRowExpanded }))))));
|
|
1606
1612
|
};
|
|
1607
1613
|
|
|
1608
|
-
var TrWithHoverBackground = styled.tr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n ", ";\n ", ";\n ", ";\n ", "\n"], ["\n ",
|
|
1609
|
-
"\n ", ";\n ", ";\n ", ";\n ",
|
|
1610
|
-
"\n"])), function (_a) {
|
|
1614
|
+
var TrWithHoverBackground = styled.tr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n ", ";\n ", ";\n ", ";\n ", "\n"], ["\n ", "\n ", ";\n ", ";\n ", ";\n ", "\n"])), function (_a) {
|
|
1611
1615
|
var focusBackground = _a.focusBackground;
|
|
1612
1616
|
return focusBackground ? "--focus-within-background: " + focusBackground + ";" : "";
|
|
1613
1617
|
}, function (_a) {
|
|
@@ -1627,7 +1631,7 @@ var TrWithHoverBackground = styled.tr(templateObject_1 || (templateObject_1 = __
|
|
|
1627
1631
|
});
|
|
1628
1632
|
var templateObject_1;
|
|
1629
1633
|
|
|
1630
|
-
var StandardTableRow = memo(function StandardTableRow(_a) {
|
|
1634
|
+
var StandardTableRow = React.memo(function StandardTableRow(_a) {
|
|
1631
1635
|
var item = _a.item, idListForEnabledItems = _a.idListForEnabledItems, rowIndex = _a.rowIndex, numRows = _a.numRows, colIndexOffset = _a.colIndexOffset, alwaysVisible = _a.alwaysVisible, shiftPressedRef = _a.shiftPressedRef;
|
|
1632
1636
|
var trRef = useRef(null);
|
|
1633
1637
|
var totalNumColumns = useTotalNumColumns();
|
|
@@ -1642,7 +1646,7 @@ var StandardTableRow = memo(function StandardTableRow(_a) {
|
|
|
1642
1646
|
threshold: 0,
|
|
1643
1647
|
});
|
|
1644
1648
|
var resolvedBackgroundResult = useMemo(function () { return rowBackgroundResolver === null || rowBackgroundResolver === void 0 ? void 0 : rowBackgroundResolver(item, isSelected); }, [isSelected, item, rowBackgroundResolver]);
|
|
1645
|
-
var background = getBackgroundColor
|
|
1649
|
+
var background = getBackgroundColor(resolvedBackgroundResult, isSelected, isExpanded);
|
|
1646
1650
|
var hoverBackground = getHoverBackgroundColor(resolvedBackgroundResult, isSelected, isExpanded);
|
|
1647
1651
|
var focusBackground = getFocusBackgroundColor(resolvedBackgroundResult, isSelected, hoverBackground);
|
|
1648
1652
|
var disabled = useMemo(function () { return checkboxDisabledResolver === null || checkboxDisabledResolver === void 0 ? void 0 : checkboxDisabledResolver(item); }, [
|
|
@@ -1653,13 +1657,13 @@ var StandardTableRow = memo(function StandardTableRow(_a) {
|
|
|
1653
1657
|
var firstColumnBackground = useCellBackgroundByColumnConfig(firstColumn, item);
|
|
1654
1658
|
var lastColumn = useLastColumnConfig();
|
|
1655
1659
|
var lastColumnBackground = useCellBackgroundByColumnConfig(lastColumn, item);
|
|
1656
|
-
var content = useMemo(function () { return (createElement(Fragment, null,
|
|
1657
|
-
createElement(Fragment, null,
|
|
1658
|
-
rowIndent && (createElement("td", { style: {
|
|
1660
|
+
var content = useMemo(function () { return (React.createElement(React.Fragment, null,
|
|
1661
|
+
React.createElement(React.Fragment, null,
|
|
1662
|
+
rowIndent && (React.createElement("td", { style: {
|
|
1659
1663
|
background: firstColumnBackground,
|
|
1660
1664
|
} },
|
|
1661
|
-
createElement(Indent, { num: rowIndent }))),
|
|
1662
|
-
enableExpandCollapse && (createElement("td", { style: {
|
|
1665
|
+
React.createElement(Indent, { num: rowIndent }))),
|
|
1666
|
+
enableExpandCollapse && (React.createElement("td", { style: {
|
|
1663
1667
|
background: stickyCheckboxColumn ? "inherit" : undefined,
|
|
1664
1668
|
position: stickyCheckboxColumn ? "sticky" : undefined,
|
|
1665
1669
|
left: stickyCheckboxColumn ? "0px" : undefined,
|
|
@@ -1670,9 +1674,9 @@ var StandardTableRow = memo(function StandardTableRow(_a) {
|
|
|
1670
1674
|
? "var(--swui-sticky-column-z-index)"
|
|
1671
1675
|
: undefined,
|
|
1672
1676
|
} },
|
|
1673
|
-
createElement(Row, { width: "var(--swui-expand-cell-width)", minWidth: "var(--swui-expand-cell-width)", alignItems: "center", justifyContent: "center" },
|
|
1674
|
-
createElement(StandardTableRowExpandButton, { colIndex: colIndexOffset, rowIndex: enableGridCell ? rowIndex : 0, numRows: enableGridCell ? numRows : 0, item: item })))),
|
|
1675
|
-
showRowCheckbox && (createElement("td", { style: {
|
|
1677
|
+
React.createElement(Row, { width: "var(--swui-expand-cell-width)", minWidth: "var(--swui-expand-cell-width)", alignItems: "center", justifyContent: "center" },
|
|
1678
|
+
React.createElement(StandardTableRowExpandButton, { colIndex: colIndexOffset, rowIndex: enableGridCell ? rowIndex : 0, numRows: enableGridCell ? numRows : 0, item: item })))),
|
|
1679
|
+
showRowCheckbox && (React.createElement("td", { style: {
|
|
1676
1680
|
background: stickyCheckboxColumn ? "inherit" : undefined,
|
|
1677
1681
|
position: stickyCheckboxColumn ? "sticky" : undefined,
|
|
1678
1682
|
left: enableExpandCollapse && stickyCheckboxColumn
|
|
@@ -1688,17 +1692,17 @@ var StandardTableRow = memo(function StandardTableRow(_a) {
|
|
|
1688
1692
|
? "var(--swui-sticky-column-z-index)"
|
|
1689
1693
|
: undefined,
|
|
1690
1694
|
} },
|
|
1691
|
-
createElement(Row, { width: "var(--swui-checkbox-cell-width)", minWidth: "var(--swui-checkbox-cell-width)", alignItems: "center", justifyContent: "center" },
|
|
1692
|
-
createElement(StandardTableRowCheckbox, { disabled: disabled, value: isSelected, onValueChange: toggleSelected, onValueChangeAndShift: shiftAndToggleSelected, colIndex: colIndexOffset + (enableExpandCollapse ? 1 : 0), rowIndex: rowIndex, numRows: numRows, shiftPressedRef: shiftPressedRef })))),
|
|
1695
|
+
React.createElement(Row, { width: "var(--swui-checkbox-cell-width)", minWidth: "var(--swui-checkbox-cell-width)", alignItems: "center", justifyContent: "center" },
|
|
1696
|
+
React.createElement(StandardTableRowCheckbox, { disabled: disabled, value: isSelected, onValueChange: toggleSelected, onValueChangeAndShift: shiftAndToggleSelected, colIndex: colIndexOffset + (enableExpandCollapse ? 1 : 0), rowIndex: rowIndex, numRows: numRows, shiftPressedRef: shiftPressedRef })))),
|
|
1693
1697
|
groupConfigsAndIds.map(function (_a, groupIndex) {
|
|
1694
1698
|
var groupConfig = _a.groupConfig, groupId = _a.groupId;
|
|
1695
|
-
return (createElement(Fragment, { key: groupId }, groupConfig.columnOrder.map(function (columnId, index) { return (createElement(StandardTableCell, { key: columnId, columnId: columnId, item: item, colIndex: colIndexOffset + columnIndexPerColumnId[columnId], rowIndex: rowIndex, numRows: numRows, borderFromGroup: getCellBorderFromGroup(groupIndex, index, groupConfig.borderLeft), disableBorderLeft: groupIndex === 0 && index === 0 })); })));
|
|
1699
|
+
return (React.createElement(React.Fragment, { key: groupId }, groupConfig.columnOrder.map(function (columnId, index) { return (React.createElement(StandardTableCell, { key: columnId, columnId: columnId, item: item, colIndex: colIndexOffset + columnIndexPerColumnId[columnId], rowIndex: rowIndex, numRows: numRows, borderFromGroup: getCellBorderFromGroup(groupIndex, index, groupConfig.borderLeft), disableBorderLeft: groupIndex === 0 && index === 0 })); })));
|
|
1696
1700
|
}),
|
|
1697
|
-
rowIndent && (createElement("td", { style: {
|
|
1701
|
+
rowIndent && (React.createElement("td", { style: {
|
|
1698
1702
|
background: lastColumnBackground,
|
|
1699
1703
|
} },
|
|
1700
|
-
createElement(Indent, { num: rowIndent }))),
|
|
1701
|
-
createElement("td", null)))); }, [
|
|
1704
|
+
React.createElement(Indent, { num: rowIndent }))),
|
|
1705
|
+
React.createElement("td", null)))); }, [
|
|
1702
1706
|
colIndexOffset,
|
|
1703
1707
|
columnIndexPerColumnId,
|
|
1704
1708
|
disabled,
|
|
@@ -1718,11 +1722,11 @@ var StandardTableRow = memo(function StandardTableRow(_a) {
|
|
|
1718
1722
|
stickyCheckboxColumn,
|
|
1719
1723
|
toggleSelected,
|
|
1720
1724
|
]);
|
|
1721
|
-
return (createElement(Fragment, null,
|
|
1722
|
-
createElement(TrWithHoverBackground, { hoverBackground: hoverBackground, background: background, focusBackground: focusBackground, borderLeft: isExpanded ? tableBorderLeftExpanded : tableBorderLeft, ref: trRef }, visible || alwaysVisible || isExpanded ? (content) : (createElement("td", { colSpan: totalNumColumns, style: { height: "var(--current-row-height)" } }))),
|
|
1723
|
-
createElement(StandardTableRowExpansion, { item: item })));
|
|
1725
|
+
return (React.createElement(React.Fragment, null,
|
|
1726
|
+
React.createElement(TrWithHoverBackground, { hoverBackground: hoverBackground, background: background, focusBackground: focusBackground, borderLeft: isExpanded ? tableBorderLeftExpanded : tableBorderLeft, ref: trRef }, visible || alwaysVisible || isExpanded ? (content) : (React.createElement("td", { colSpan: totalNumColumns, style: { height: "var(--current-row-height)" } }))),
|
|
1727
|
+
React.createElement(StandardTableRowExpansion, { item: item })));
|
|
1724
1728
|
});
|
|
1725
|
-
var getBackgroundColor
|
|
1729
|
+
var getBackgroundColor = function (resolvedBackground, isSelected, isExpanded) {
|
|
1726
1730
|
if (resolvedBackground) {
|
|
1727
1731
|
return typeof resolvedBackground === "string"
|
|
1728
1732
|
? resolvedBackground
|
|
@@ -1767,18 +1771,19 @@ var columnHasSummaryCell = function (columnConfig) {
|
|
|
1767
1771
|
return Boolean(columnConfig.renderSummaryCell || columnConfig.summaryText);
|
|
1768
1772
|
};
|
|
1769
1773
|
|
|
1770
|
-
var css_248z
|
|
1771
|
-
var styles
|
|
1772
|
-
styleInject(css_248z
|
|
1774
|
+
var css_248z = ".StandardTableSummaryRow-module_summaryRow__1qAAJ td {\n border-top: 1px solid var(--lhds-color-ui-500);\n border-bottom: 1px solid var(--lhds-color-ui-500);\n }\n";
|
|
1775
|
+
var styles = {"summaryRow":"StandardTableSummaryRow-module_summaryRow__1qAAJ"};
|
|
1776
|
+
styleInject(css_248z);
|
|
1773
1777
|
|
|
1774
|
-
var SummaryCell = memo(function SummaryCell(_a) {
|
|
1778
|
+
var SummaryCell = React.memo(function SummaryCell(_a) {
|
|
1775
1779
|
var columnId = _a.columnId, items = _a.items, disableBorderLeft = _a.disableBorderLeft, borderFromGroup = _a.borderFromGroup, colSpan = _a.colSpan;
|
|
1776
1780
|
var stickyPropsPerColumnContext = useStickyPropsPerColumnContext();
|
|
1777
1781
|
var _b = useColumnConfigById(columnId), renderSummaryCell = _b.renderSummaryCell, summaryText = _b.summaryText, borderLeft = _b.borderLeft, zIndex = _b.zIndex, width = _b.width, minWidth = _b.minWidth, justifyContentCell = _b.justifyContentCell;
|
|
1778
1782
|
var activeBorderLeft = getCellBorder(borderFromGroup, disableBorderLeft, borderLeft);
|
|
1779
1783
|
var stickyProps = stickyPropsPerColumnContext[columnId];
|
|
1780
1784
|
var currentZIndex = stickyProps.sticky
|
|
1781
|
-
? zIndex !== null && zIndex !== void 0 ? zIndex : "var(--swui-sticky-column-z-index)"
|
|
1785
|
+
? zIndex !== null && zIndex !== void 0 ? zIndex : "var(--swui-sticky-column-z-index)"
|
|
1786
|
+
: zIndex !== null && zIndex !== void 0 ? zIndex : 1;
|
|
1782
1787
|
var shadow = stickyProps.sticky &&
|
|
1783
1788
|
stickyProps.type === "last-group" &&
|
|
1784
1789
|
stickyProps.isFirstColumnInLastGroup
|
|
@@ -1794,7 +1799,7 @@ var SummaryCell = memo(function SummaryCell(_a) {
|
|
|
1794
1799
|
renderSummaryCell,
|
|
1795
1800
|
text,
|
|
1796
1801
|
]);
|
|
1797
|
-
return (createElement("td", { colSpan: colSpan, style: {
|
|
1802
|
+
return (React.createElement("td", { colSpan: colSpan, style: {
|
|
1798
1803
|
borderLeft: activeBorderLeft,
|
|
1799
1804
|
position: stickyProps.sticky ? "sticky" : undefined,
|
|
1800
1805
|
left: stickyProps.sticky ? stickyProps.left : undefined,
|
|
@@ -1803,8 +1808,8 @@ var SummaryCell = memo(function SummaryCell(_a) {
|
|
|
1803
1808
|
zIndex: currentZIndex,
|
|
1804
1809
|
height: "var(--current-row-height)",
|
|
1805
1810
|
} },
|
|
1806
|
-
createElement(Row, { width: width, minWidth: minWidth, height: "inherit", overflow: "hidden", justifyContent: justifyContentCell, alignItems: "center" }, renderSummaryCell ? (renderResult) : (createElement(Indent, null,
|
|
1807
|
-
createElement(Text, { variant: "bold" }, text))))));
|
|
1811
|
+
React.createElement(Row, { width: width, minWidth: minWidth, height: "inherit", overflow: "hidden", justifyContent: justifyContentCell, alignItems: "center" }, renderSummaryCell ? (renderResult) : (React.createElement(Indent, null,
|
|
1812
|
+
React.createElement(Text, { variant: "bold" }, text))))));
|
|
1808
1813
|
});
|
|
1809
1814
|
|
|
1810
1815
|
var getColumnsLimitedWithColSpan = function (columnOrder, columns) {
|
|
@@ -1821,18 +1826,18 @@ var getColumnsLimitedWithColSpan = function (columnOrder, columns) {
|
|
|
1821
1826
|
return list;
|
|
1822
1827
|
};
|
|
1823
1828
|
|
|
1824
|
-
var StandardTableSummaryRow = memo(function StandardTableSummaryRow(_a) {
|
|
1829
|
+
var StandardTableSummaryRow = React.memo(function StandardTableSummaryRow(_a) {
|
|
1825
1830
|
var items = _a.items;
|
|
1826
1831
|
var groupConfigsAndIds = useGroupConfigsAndIdsForRows();
|
|
1827
1832
|
var _b = useStandardTableConfig(), showRowCheckbox = _b.showRowCheckbox, enableExpandCollapse = _b.enableExpandCollapse, columns = _b.columns;
|
|
1828
|
-
return (createElement("tr", { className: styles
|
|
1829
|
-
enableExpandCollapse && createElement("td", null),
|
|
1830
|
-
showRowCheckbox && createElement("td", null),
|
|
1833
|
+
return (React.createElement("tr", { className: styles.summaryRow },
|
|
1834
|
+
enableExpandCollapse && React.createElement("td", null),
|
|
1835
|
+
showRowCheckbox && React.createElement("td", null),
|
|
1831
1836
|
groupConfigsAndIds.map(function (_a, groupIndex) {
|
|
1832
1837
|
var groupConfig = _a.groupConfig, groupId = _a.groupId;
|
|
1833
|
-
return (createElement(Fragment, { key: groupId }, getColumnsLimitedWithColSpan(groupConfig.columnOrder, columns).map(function (_a, index) {
|
|
1838
|
+
return (React.createElement(React.Fragment, { key: groupId }, getColumnsLimitedWithColSpan(groupConfig.columnOrder, columns).map(function (_a, index) {
|
|
1834
1839
|
var columnId = _a.columnId, colSpan = _a.colSpan;
|
|
1835
|
-
return (createElement(SummaryCell, { key: columnId, colSpan: colSpan, columnId: columnId, items: items, borderFromGroup: getCellBorderFromGroup(groupIndex, index, groupConfig.borderLeft), disableBorderLeft: groupIndex === 0 && index === 0 }));
|
|
1840
|
+
return (React.createElement(SummaryCell, { key: columnId, colSpan: colSpan, columnId: columnId, items: items, borderFromGroup: getCellBorderFromGroup(groupIndex, index, groupConfig.borderLeft), disableBorderLeft: groupIndex === 0 && index === 0 }));
|
|
1836
1841
|
})));
|
|
1837
1842
|
})));
|
|
1838
1843
|
});
|
|
@@ -1844,14 +1849,14 @@ var SummaryRowSwitcher = function SummaryRowSwitcher(_a) {
|
|
|
1844
1849
|
if (!visible) {
|
|
1845
1850
|
return null;
|
|
1846
1851
|
}
|
|
1847
|
-
return createElement(StandardTableSummaryRow, { items: items });
|
|
1852
|
+
return React.createElement(StandardTableSummaryRow, { items: items });
|
|
1848
1853
|
};
|
|
1849
1854
|
|
|
1850
1855
|
var filterItemsOnEnabledCheckboxes = function (checkboxDisabledResolver) { return function (item) {
|
|
1851
|
-
return (checkboxDisabledResolver === null || checkboxDisabledResolver === void 0 ? void 0 : checkboxDisabledResolver(item)) ? false :
|
|
1856
|
+
return (checkboxDisabledResolver === null || checkboxDisabledResolver === void 0 ? void 0 : checkboxDisabledResolver(item)) ? false : true ;
|
|
1852
1857
|
}; };
|
|
1853
1858
|
|
|
1854
|
-
var StandardTableRowList = memo(function StandardTableRowList(_a) {
|
|
1859
|
+
var StandardTableRowList = React.memo(function StandardTableRowList(_a) {
|
|
1855
1860
|
var items = _a.items, _b = _a.colIndexOffset, colIndexOffset = _b === void 0 ? 0 : _b, _c = _a.rowIndexOffset, rowIndexOffset = _c === void 0 ? 0 : _c;
|
|
1856
1861
|
/**
|
|
1857
1862
|
* This ref is used to force rerender of rows.
|
|
@@ -1870,7 +1875,7 @@ var StandardTableRowList = memo(function StandardTableRowList(_a) {
|
|
|
1870
1875
|
if (!valueResolver) {
|
|
1871
1876
|
return items;
|
|
1872
1877
|
}
|
|
1873
|
-
var sortedList =
|
|
1878
|
+
var sortedList = __spreadArray([], items, true);
|
|
1874
1879
|
sortedList.sort(function (a, b) {
|
|
1875
1880
|
return multitypeComparator(valueResolver(a), valueResolver(b));
|
|
1876
1881
|
});
|
|
@@ -1903,47 +1908,47 @@ var StandardTableRowList = memo(function StandardTableRowList(_a) {
|
|
|
1903
1908
|
document.removeEventListener("keydown", keyDown);
|
|
1904
1909
|
};
|
|
1905
1910
|
}, []);
|
|
1906
|
-
return (createElement(Fragment, { key: sortCounterRef.current },
|
|
1907
|
-
sortedItems.map(function (item, index) { return (createElement(StandardTableRow, { alwaysVisible: disableInfiniteList || sortedItems.length < 30, item: item, idListForEnabledItems: idListForEnabledItems, key: keyResolver(item), colIndexOffset: colIndexOffset, rowIndex: index + rowIndexOffset, numRows: sortedItems.length, shiftPressedRef: shiftPressedRef })); }),
|
|
1908
|
-
createElement(SummaryRowSwitcher, { items: sortedItems })));
|
|
1911
|
+
return (React.createElement(React.Fragment, { key: sortCounterRef.current },
|
|
1912
|
+
sortedItems.map(function (item, index) { return (React.createElement(StandardTableRow, { alwaysVisible: disableInfiniteList || sortedItems.length < 30, item: item, idListForEnabledItems: idListForEnabledItems, key: keyResolver(item), colIndexOffset: colIndexOffset, rowIndex: index + rowIndexOffset, numRows: sortedItems.length, shiftPressedRef: shiftPressedRef })); }),
|
|
1913
|
+
React.createElement(SummaryRowSwitcher, { items: sortedItems })));
|
|
1909
1914
|
});
|
|
1910
1915
|
|
|
1911
|
-
var StandardTableContent = memo(function StandardTableContent(_a) {
|
|
1916
|
+
var StandardTableContent = React.memo(function StandardTableContent(_a) {
|
|
1912
1917
|
var _b;
|
|
1913
1918
|
var error = _a.error, bannerError = _a.bannerError, loading = _a.loading, items = _a.items, _c = _a.noItemsLabel, noItemsLabel = _c === void 0 ? "There is no data available." : _c, noItemsContentRight = _a.noItemsContentRight, noItemsContentBottom = _a.noItemsContentBottom, noItemsHeader = _a.noItemsHeader, colIndexOffset = _a.colIndexOffset, rowIndexOffset = _a.rowIndexOffset, variant = _a.variant, errorLabel = _a.errorLabel;
|
|
1914
1919
|
var totalNumColumns = useTotalNumColumns();
|
|
1915
1920
|
if (bannerError) {
|
|
1916
|
-
return (createElement("tbody", null,
|
|
1917
|
-
createElement("tr", null,
|
|
1918
|
-
createElement("td", { colSpan: totalNumColumns },
|
|
1919
|
-
createElement(Spacing, { num: 4, justifyContent: "center" },
|
|
1920
|
-
createElement(Box, { alignItems: "center" },
|
|
1921
|
-
createElement(ResultListBanner, { bannerState: bannerError, variant: "error" })))))));
|
|
1921
|
+
return (React.createElement("tbody", null,
|
|
1922
|
+
React.createElement("tr", null,
|
|
1923
|
+
React.createElement("td", { colSpan: totalNumColumns },
|
|
1924
|
+
React.createElement(Spacing, { num: 4, justifyContent: "center" },
|
|
1925
|
+
React.createElement(Box, { alignItems: "center" },
|
|
1926
|
+
React.createElement(ResultListBanner, { bannerState: bannerError, variant: "error" })))))));
|
|
1922
1927
|
}
|
|
1923
1928
|
if (error || errorLabel) {
|
|
1924
|
-
return (createElement("tbody", null,
|
|
1925
|
-
createElement("tr", null,
|
|
1926
|
-
createElement("td", { colSpan: totalNumColumns },
|
|
1927
|
-
createElement(Spacing, { num: 4, justifyContent: "center" },
|
|
1928
|
-
createElement(Box, { alignItems: "center" },
|
|
1929
|
-
createElement(Banner, { headerText: (_b = (error ? error.message : errorLabel)) !== null && _b !== void 0 ? _b : "Unknown error", variant: "error" })))))));
|
|
1929
|
+
return (React.createElement("tbody", null,
|
|
1930
|
+
React.createElement("tr", null,
|
|
1931
|
+
React.createElement("td", { colSpan: totalNumColumns },
|
|
1932
|
+
React.createElement(Spacing, { num: 4, justifyContent: "center" },
|
|
1933
|
+
React.createElement(Box, { alignItems: "center" },
|
|
1934
|
+
React.createElement(Banner, { headerText: (_b = (error ? error.message : errorLabel)) !== null && _b !== void 0 ? _b : "Unknown error", variant: "error" })))))));
|
|
1930
1935
|
}
|
|
1931
1936
|
if (loading) {
|
|
1932
|
-
return (createElement("tbody", null,
|
|
1933
|
-
createElement("tr", null,
|
|
1934
|
-
createElement("td", { colSpan: totalNumColumns },
|
|
1935
|
-
createElement(Spacing, { num: 4 },
|
|
1936
|
-
createElement(LoadingScreen, null))))));
|
|
1937
|
+
return (React.createElement("tbody", null,
|
|
1938
|
+
React.createElement("tr", null,
|
|
1939
|
+
React.createElement("td", { colSpan: totalNumColumns },
|
|
1940
|
+
React.createElement(Spacing, { num: 4 },
|
|
1941
|
+
React.createElement(LoadingScreen, null))))));
|
|
1937
1942
|
}
|
|
1938
1943
|
if (!items || !items.length) {
|
|
1939
|
-
return (createElement("tbody", null,
|
|
1940
|
-
createElement("tr", null,
|
|
1941
|
-
createElement("td", { colSpan: totalNumColumns },
|
|
1942
|
-
createElement(Row, { spacing: 4, justifyContent: "center" },
|
|
1943
|
-
createElement(Banner, { text: noItemsLabel, headerText: noItemsHeader, contentRight: noItemsContentRight, variant: "info" }, noItemsContentBottom))))));
|
|
1944
|
-
}
|
|
1945
|
-
return (createElement("tbody", null,
|
|
1946
|
-
createElement(StandardTableRowList, { variant: variant, items: items, colIndexOffset: colIndexOffset, rowIndexOffset: rowIndexOffset })));
|
|
1944
|
+
return (React.createElement("tbody", null,
|
|
1945
|
+
React.createElement("tr", null,
|
|
1946
|
+
React.createElement("td", { colSpan: totalNumColumns },
|
|
1947
|
+
React.createElement(Row, { spacing: 4, justifyContent: "center" },
|
|
1948
|
+
React.createElement(Banner, { text: noItemsLabel, headerText: noItemsHeader, contentRight: noItemsContentRight, variant: "info" }, noItemsContentBottom))))));
|
|
1949
|
+
}
|
|
1950
|
+
return (React.createElement("tbody", null,
|
|
1951
|
+
React.createElement(StandardTableRowList, { variant: variant, items: items, colIndexOffset: colIndexOffset, rowIndexOffset: rowIndexOffset })));
|
|
1947
1952
|
});
|
|
1948
1953
|
|
|
1949
1954
|
var useTableHeadCheckbox = function (items) {
|
|
@@ -2027,7 +2032,7 @@ var useTableSortHeader = function (columnId) {
|
|
|
2027
2032
|
}, [sortBy, desc, actions, columnId, dispatch]);
|
|
2028
2033
|
};
|
|
2029
2034
|
|
|
2030
|
-
var StandardTableHeadItem = memo(function StandardTableHeaderItem(_a) {
|
|
2035
|
+
var StandardTableHeadItem = React.memo(function StandardTableHeaderItem(_a) {
|
|
2031
2036
|
var columnId = _a.columnId, borderFromGroup = _a.borderFromGroup, disableBorderLeft = _a.disableBorderLeft, stickyHeader = _a.stickyHeader, top = _a.top;
|
|
2032
2037
|
var _b = useColumnConfigById(columnId), justifyContentHeader = _b.justifyContentHeader, columnLabel = _b.columnLabel, borderLeft = _b.borderLeft, infoIconTooltipText = _b.infoIconTooltipText, background = _b.background, zIndex = _b.zIndex, sortOrderIconVariant = _b.sortOrderIconVariant, width = _b.width, minWidth = _b.minWidth;
|
|
2033
2038
|
var _c = useStandardTableConfig(), disableSorting = _c.disableSorting, defaultSortOrderIconVariant = _c.sortOrderIconVariant;
|
|
@@ -2038,7 +2043,7 @@ var StandardTableHeadItem = memo(function StandardTableHeaderItem(_a) {
|
|
|
2038
2043
|
: formatColumnIdToHeaderCellLabel(columnId);
|
|
2039
2044
|
var activeBorderLeft = getCellBorder(borderFromGroup, disableBorderLeft, borderLeft);
|
|
2040
2045
|
var stickyProps = stickyPropsPerColumnContext[columnId];
|
|
2041
|
-
return (createElement("th", { style: {
|
|
2046
|
+
return (React.createElement("th", { style: {
|
|
2042
2047
|
background: background !== null && background !== void 0 ? background : "white",
|
|
2043
2048
|
borderLeft: activeBorderLeft,
|
|
2044
2049
|
position: stickyHeader || stickyProps.sticky ? "sticky" : undefined,
|
|
@@ -2068,10 +2073,10 @@ var StandardTableHeadItem = memo(function StandardTableHeaderItem(_a) {
|
|
|
2068
2073
|
width: width,
|
|
2069
2074
|
minWidth: minWidth,
|
|
2070
2075
|
} },
|
|
2071
|
-
createElement(TableHeadItem, { width: "inherit", minWidth: "inherit", arrow: !disableSorting && label ? arrow : undefined, onClick: !disableSorting ? onClickColumnHead : undefined, label: label, infoIconTooltipText: infoIconTooltipText, alignRight: justifyContentHeader === "flex-end", sortOrderIconVariant: sortOrderIconVariant !== null && sortOrderIconVariant !== void 0 ? sortOrderIconVariant : defaultSortOrderIconVariant })));
|
|
2076
|
+
React.createElement(TableHeadItem, { width: "inherit", minWidth: "inherit", arrow: !disableSorting && label ? arrow : undefined, onClick: !disableSorting ? onClickColumnHead : undefined, label: label, infoIconTooltipText: infoIconTooltipText, alignRight: justifyContentHeader === "flex-end", sortOrderIconVariant: sortOrderIconVariant !== null && sortOrderIconVariant !== void 0 ? sortOrderIconVariant : defaultSortOrderIconVariant })));
|
|
2072
2077
|
});
|
|
2073
2078
|
|
|
2074
|
-
var getTopPosition
|
|
2079
|
+
var getTopPosition = function (headerRowOffsetTop, columnGroupOrder, height, stickyHeader) {
|
|
2075
2080
|
if (headerRowOffsetTop && columnGroupOrder !== undefined) {
|
|
2076
2081
|
return "calc(" + headerRowOffsetTop + " + " + height + ")";
|
|
2077
2082
|
}
|
|
@@ -2086,7 +2091,7 @@ var getTopPosition$1 = function (headerRowOffsetTop, columnGroupOrder, height, s
|
|
|
2086
2091
|
}
|
|
2087
2092
|
return undefined;
|
|
2088
2093
|
};
|
|
2089
|
-
var StandardTableHeadRow = memo(function StandardTableHeadRow(_a) {
|
|
2094
|
+
var StandardTableHeadRow = React.memo(function StandardTableHeadRow(_a) {
|
|
2090
2095
|
var items = _a.items, _b = _a.height, height = _b === void 0 ? defaultTableRowHeight : _b;
|
|
2091
2096
|
var groupConfigsAndIds = useGroupConfigsAndIdsForRows();
|
|
2092
2097
|
var _c = useStandardTableConfig(), showHeaderCheckbox = _c.showHeaderCheckbox, showHeaderExpandCollapse = _c.showHeaderExpandCollapse, enableExpandCollapse = _c.enableExpandCollapse, rowIndent = _c.rowIndent, headerRowOffsetTop = _c.headerRowOffsetTop, zIndex = _c.zIndex, stickyHeader = _c.stickyHeader, stickyCheckboxColumn = _c.stickyCheckboxColumn;
|
|
@@ -2102,7 +2107,7 @@ var StandardTableHeadRow = memo(function StandardTableHeadRow(_a) {
|
|
|
2102
2107
|
: stickyHeader
|
|
2103
2108
|
? "var(--swui-sticky-header-z-index)"
|
|
2104
2109
|
: zIndex),
|
|
2105
|
-
top: getTopPosition
|
|
2110
|
+
top: getTopPosition(headerRowOffsetTop, columnGroupOrder, height, stickyHeader),
|
|
2106
2111
|
background: stickyHeader || stickyCheckboxColumn ? "white" : undefined,
|
|
2107
2112
|
position: stickyHeader || stickyCheckboxColumn ? "sticky" : undefined,
|
|
2108
2113
|
boxShadow: stickyHeader && stickyCheckboxColumn
|
|
@@ -2113,27 +2118,27 @@ var StandardTableHeadRow = memo(function StandardTableHeadRow(_a) {
|
|
|
2113
2118
|
? "var(--swui-sticky-header-shadow)"
|
|
2114
2119
|
: undefined,
|
|
2115
2120
|
};
|
|
2116
|
-
return (createElement(TrWithHoverBackground, { height: height, borderLeft: tableBorderLeft },
|
|
2117
|
-
rowIndent && (createElement("th", { style: stickyHeaderStyle },
|
|
2118
|
-
createElement(Row, { indent: rowIndent }))),
|
|
2119
|
-
enableExpandCollapse && (createElement("th", { style: __assign(__assign({}, stickyHeaderStyle), { left: "0px", textAlign: "left" }) },
|
|
2120
|
-
createElement(Row, { width: "var(--swui-expand-cell-width)", minWidth: "var(--swui-expand-cell-width)", alignItems: "center", justifyContent: "center" }, showHeaderExpandCollapse && (createElement(FlatButton, { size: "small", leftIcon: allItemsAreExpanded ? faChevronDown : faChevronRight, onClick: toggleExpanded }))))),
|
|
2121
|
-
showHeaderCheckbox && (createElement("th", { style: __assign(__assign({}, stickyHeaderStyle), { overflow: "hidden", left: stickyCheckboxColumn && enableExpandCollapse
|
|
2121
|
+
return (React.createElement(TrWithHoverBackground, { height: height, borderLeft: tableBorderLeft },
|
|
2122
|
+
rowIndent && (React.createElement("th", { style: stickyHeaderStyle },
|
|
2123
|
+
React.createElement(Row, { indent: rowIndent }))),
|
|
2124
|
+
enableExpandCollapse && (React.createElement("th", { style: __assign(__assign({}, stickyHeaderStyle), { left: "0px", textAlign: "left" }) },
|
|
2125
|
+
React.createElement(Row, { width: "var(--swui-expand-cell-width)", minWidth: "var(--swui-expand-cell-width)", alignItems: "center", justifyContent: "center" }, showHeaderExpandCollapse && (React.createElement(FlatButton, { size: "small", leftIcon: allItemsAreExpanded ? faChevronDown : faChevronRight, onClick: toggleExpanded }))))),
|
|
2126
|
+
showHeaderCheckbox && (React.createElement("th", { style: __assign(__assign({}, stickyHeaderStyle), { overflow: "hidden", left: stickyCheckboxColumn && enableExpandCollapse
|
|
2122
2127
|
? "var(--swui-expand-cell-width)"
|
|
2123
2128
|
: stickyCheckboxColumn
|
|
2124
2129
|
? "0px"
|
|
2125
2130
|
: undefined }) },
|
|
2126
|
-
createElement(Row, { width: "var(--swui-checkbox-cell-width)", minWidth: "var(--swui-checkbox-cell-width)", alignItems: "center", justifyContent: "center" },
|
|
2127
|
-
createElement(Checkbox, { size: "small", disabled: checkboxDisabled, value: allItemsAreSelected, indeterminate: !selectionIsEmpty && !allItemsAreSelected, onValueChange: onClickCheckbox })))),
|
|
2131
|
+
React.createElement(Row, { width: "var(--swui-checkbox-cell-width)", minWidth: "var(--swui-checkbox-cell-width)", alignItems: "center", justifyContent: "center" },
|
|
2132
|
+
React.createElement(Checkbox, { size: "small", disabled: checkboxDisabled, value: allItemsAreSelected, indeterminate: !selectionIsEmpty && !allItemsAreSelected, onValueChange: onClickCheckbox })))),
|
|
2128
2133
|
groupConfigsAndIds.map(function (_a, groupIndex) {
|
|
2129
2134
|
var groupConfig = _a.groupConfig, groupId = _a.groupId;
|
|
2130
|
-
return (createElement(Fragment, { key: groupId }, groupConfig.columnOrder.map(function (columnId, index) {
|
|
2131
|
-
return (createElement(StandardTableHeadItem, { columnId: columnId, key: columnId, borderFromGroup: getCellBorderFromGroup(groupIndex, index, groupConfig.borderLeft), disableBorderLeft: groupIndex === 0 && index === 0, stickyHeader: stickyHeader, top: stickyHeaderStyle.top }));
|
|
2135
|
+
return (React.createElement(React.Fragment, { key: groupId }, groupConfig.columnOrder.map(function (columnId, index) {
|
|
2136
|
+
return (React.createElement(StandardTableHeadItem, { columnId: columnId, key: columnId, borderFromGroup: getCellBorderFromGroup(groupIndex, index, groupConfig.borderLeft), disableBorderLeft: groupIndex === 0 && index === 0, stickyHeader: stickyHeader, top: stickyHeaderStyle.top }));
|
|
2132
2137
|
})));
|
|
2133
2138
|
}),
|
|
2134
|
-
rowIndent && (createElement("th", { style: stickyHeaderStyle },
|
|
2135
|
-
createElement(Row, { indent: rowIndent }))),
|
|
2136
|
-
createElement("th", { style: stickyHeaderStyle })));
|
|
2139
|
+
rowIndent && (React.createElement("th", { style: stickyHeaderStyle },
|
|
2140
|
+
React.createElement(Row, { indent: rowIndent }))),
|
|
2141
|
+
React.createElement("th", { style: stickyHeaderStyle })));
|
|
2137
2142
|
});
|
|
2138
2143
|
|
|
2139
2144
|
var ColGroups = function () {
|
|
@@ -2141,25 +2146,25 @@ var ColGroups = function () {
|
|
|
2141
2146
|
var groupConfigsAndIds = useGroupConfigsAndIdsForRows();
|
|
2142
2147
|
var hasExtraColGroup = config.enableExpandCollapse || config.showRowCheckbox;
|
|
2143
2148
|
var rowIndent = booleanOrNumberToNumber(config.rowIndent);
|
|
2144
|
-
return (createElement(Fragment, null,
|
|
2145
|
-
rowIndent ? (createElement("colgroup", null,
|
|
2146
|
-
createElement("col", { style: { width: "calc(var(--swui-metrics-indent) * " + rowIndent + ")" } }))) : null,
|
|
2147
|
-
hasExtraColGroup && (createElement("colgroup", null,
|
|
2148
|
-
config.enableExpandCollapse && (createElement("col", { style: { width: "var(--swui-expand-cell-width)" } })),
|
|
2149
|
-
config.showRowCheckbox && (createElement("col", { style: { width: "var(--swui-checkbox-cell-width)" } })))),
|
|
2149
|
+
return (React.createElement(React.Fragment, null,
|
|
2150
|
+
rowIndent ? (React.createElement("colgroup", null,
|
|
2151
|
+
React.createElement("col", { style: { width: "calc(var(--swui-metrics-indent) * " + rowIndent + ")" } }))) : null,
|
|
2152
|
+
hasExtraColGroup && (React.createElement("colgroup", null,
|
|
2153
|
+
config.enableExpandCollapse && (React.createElement("col", { style: { width: "var(--swui-expand-cell-width)" } })),
|
|
2154
|
+
config.showRowCheckbox && (React.createElement("col", { style: { width: "var(--swui-checkbox-cell-width)" } })))),
|
|
2150
2155
|
groupConfigsAndIds.map(function (_a) {
|
|
2151
2156
|
var groupConfig = _a.groupConfig, groupId = _a.groupId;
|
|
2152
|
-
return (createElement("colgroup", { key: groupId }, groupConfig.columnOrder.map(function (columnId) { return (createElement("col", { key: columnId, style: {
|
|
2157
|
+
return (React.createElement("colgroup", { key: groupId }, groupConfig.columnOrder.map(function (columnId) { return (React.createElement("col", { key: columnId, style: {
|
|
2153
2158
|
width: config.columns[columnId].width,
|
|
2154
2159
|
minWidth: config.columns[columnId].minWidth,
|
|
2155
2160
|
} })); })));
|
|
2156
2161
|
}),
|
|
2157
|
-
rowIndent ? (createElement("colgroup", null,
|
|
2158
|
-
createElement("col", { style: { width: "calc(var(--swui-metrics-indent) * " + rowIndent + ")" } }))) : null));
|
|
2162
|
+
rowIndent ? (React.createElement("colgroup", null,
|
|
2163
|
+
React.createElement("col", { style: { width: "calc(var(--swui-metrics-indent) * " + rowIndent + ")" } }))) : null));
|
|
2159
2164
|
};
|
|
2160
2165
|
|
|
2161
2166
|
var StandardTable = function StandardTable(_a) {
|
|
2162
|
-
var tableContext = _a.tableContext, config = _a.config
|
|
2167
|
+
var tableContext = _a.tableContext, config = _a.config; _a.columnOrder; var columnGroupOrder = _a.columnGroupOrder, tableId = _a.tableId, _b = _a.variant, variant = _b === void 0 ? "standard" : _b, onKeyDown = _a.onKeyDown, props = __rest(_a, ["tableContext", "config", "columnOrder", "columnGroupOrder", "tableId", "variant", "onKeyDown"]);
|
|
2163
2168
|
var generatedTableId = useDomId();
|
|
2164
2169
|
var initialSortOrderDesc = config.initialSortOrderDesc, initialSortOrder = config.initialSortOrder, enableExpandCollapse = config.enableExpandCollapse, stickyCheckboxColumn = config.stickyCheckboxColumn;
|
|
2165
2170
|
var localTableContext = useLocalStateTableContext(tableId !== null && tableId !== void 0 ? tableId : generatedTableId, createStandardTableInitialState(initialSortOrder, initialSortOrderDesc)).tableContext;
|
|
@@ -2192,9 +2197,9 @@ var StandardTable = function StandardTable(_a) {
|
|
|
2192
2197
|
}
|
|
2193
2198
|
}, [config]);
|
|
2194
2199
|
if (validationError) {
|
|
2195
|
-
return createElement(ErrorScreen, { text: validationError.message });
|
|
2200
|
+
return React.createElement(ErrorScreen, { text: validationError.message });
|
|
2196
2201
|
}
|
|
2197
|
-
return (createElement("table", { className: cx(styles$
|
|
2202
|
+
return (React.createElement("table", { className: cx(styles$3.standardTable, styles$3[variant]), style: {
|
|
2198
2203
|
width: "100%",
|
|
2199
2204
|
isolation: "isolate",
|
|
2200
2205
|
"--current-left-offset": enableExpandCollapse && stickyCheckboxColumn
|
|
@@ -2205,25 +2210,26 @@ var StandardTable = function StandardTable(_a) {
|
|
|
2205
2210
|
? "var(--swui-expand-cell-width)"
|
|
2206
2211
|
: "0px",
|
|
2207
2212
|
} },
|
|
2208
|
-
createElement(StickyPropsPerColumnContext.Provider, { value: stickyPropsPerColumnContext },
|
|
2209
|
-
createElement(TotalNumColumnsContext.Provider, { value: totalNumColumns },
|
|
2210
|
-
createElement(StandardTableVariantContext.Provider, { value: variant },
|
|
2211
|
-
createElement(StandardTableTableIdContext.Provider, { value: tableId !== null && tableId !== void 0 ? tableId : generatedTableId },
|
|
2212
|
-
createElement(StandardTableStateContext.Provider, { value: state },
|
|
2213
|
-
createElement(StandardTableActionsContext.Provider, { value: actionsContext },
|
|
2214
|
-
createElement(StandardTableConfigContext.Provider, { value: config },
|
|
2215
|
-
createElement(GroupConfigsAndIdsForRowsContext.Provider, { value: groupConfigsForRows },
|
|
2216
|
-
createElement(ColumnIndexPerColumnIdContext.Provider, { value: columnIndexPerColumnId },
|
|
2217
|
-
createElement(StandardTableUsingColumnGroupsContext.Provider, { value: usingColumnGroups },
|
|
2218
|
-
createElement(StandardTableColumnGroupOrderContext.Provider, { value: "columnGroupOrder" in config
|
|
2219
|
-
? columnGroupOrder !== null && columnGroupOrder !== void 0 ? columnGroupOrder : config.columnGroupOrder
|
|
2220
|
-
|
|
2221
|
-
createElement(
|
|
2222
|
-
|
|
2213
|
+
React.createElement(StickyPropsPerColumnContext.Provider, { value: stickyPropsPerColumnContext },
|
|
2214
|
+
React.createElement(TotalNumColumnsContext.Provider, { value: totalNumColumns },
|
|
2215
|
+
React.createElement(StandardTableVariantContext.Provider, { value: variant },
|
|
2216
|
+
React.createElement(StandardTableTableIdContext.Provider, { value: tableId !== null && tableId !== void 0 ? tableId : generatedTableId },
|
|
2217
|
+
React.createElement(StandardTableStateContext.Provider, { value: state },
|
|
2218
|
+
React.createElement(StandardTableActionsContext.Provider, { value: actionsContext },
|
|
2219
|
+
React.createElement(StandardTableConfigContext.Provider, { value: config },
|
|
2220
|
+
React.createElement(GroupConfigsAndIdsForRowsContext.Provider, { value: groupConfigsForRows },
|
|
2221
|
+
React.createElement(ColumnIndexPerColumnIdContext.Provider, { value: columnIndexPerColumnId },
|
|
2222
|
+
React.createElement(StandardTableUsingColumnGroupsContext.Provider, { value: usingColumnGroups },
|
|
2223
|
+
React.createElement(StandardTableColumnGroupOrderContext.Provider, { value: "columnGroupOrder" in config
|
|
2224
|
+
? columnGroupOrder !== null && columnGroupOrder !== void 0 ? columnGroupOrder : config.columnGroupOrder
|
|
2225
|
+
: columnGroupOrder },
|
|
2226
|
+
React.createElement(ColGroups, null),
|
|
2227
|
+
React.createElement(OnKeyDownContext.Provider, { value: onKeyDown },
|
|
2228
|
+
React.createElement("thead", null,
|
|
2223
2229
|
(columnGroupOrder ||
|
|
2224
|
-
"columnGroupOrder" in config) && (createElement(ColumnGroupRow, { height: "var(--current-row-height)" })),
|
|
2225
|
-
createElement(StandardTableHeadRow, { items: props.items, height: "var(--current-row-height)" })),
|
|
2226
|
-
createElement(StandardTableContent, __assign({ variant: variant }, props))))))))))))))));
|
|
2230
|
+
"columnGroupOrder" in config) && (React.createElement(ColumnGroupRow, { height: "var(--current-row-height)" })),
|
|
2231
|
+
React.createElement(StandardTableHeadRow, { items: props.items, height: "var(--current-row-height)" })),
|
|
2232
|
+
React.createElement(StandardTableContent, __assign({ variant: variant }, props))))))))))))))));
|
|
2227
2233
|
};
|
|
2228
2234
|
|
|
2229
2235
|
var createColumnConfig = function (itemValueResolver, options) {
|
|
@@ -2232,8 +2238,8 @@ var createColumnConfig = function (itemValueResolver, options) {
|
|
|
2232
2238
|
|
|
2233
2239
|
var createStandardEditableTextCell = function () { return function (_a) {
|
|
2234
2240
|
var label = _a.label, _b = _a.gridCell, editorValue = _b.editorValue, isEditing = _b.isEditing, setEditorValue = _b.setEditorValue, stopEditingAndRevert = _b.stopEditingAndRevert, lastKeyEvent = _b.lastKeyEvent, stopEditing = _b.stopEditing, stopEditingAndMove = _b.stopEditingAndMove;
|
|
2235
|
-
return isEditing ? (createElement(TextInput, { onValueChange: setEditorValue, value: editorValue, onDone: stopEditing, onEsc: stopEditingAndRevert, autoFocus: true, selectAllOnMount: !lastKeyEvent, onMove: stopEditingAndMove })) : (createElement(Indent, null,
|
|
2236
|
-
createElement(Text, { color: "var(--swui-primary-action-color)" }, label)));
|
|
2241
|
+
return isEditing ? (React.createElement(TextInput, { onValueChange: setEditorValue, value: editorValue, onDone: stopEditing, onEsc: stopEditingAndRevert, autoFocus: true, selectAllOnMount: !lastKeyEvent, onMove: stopEditingAndMove })) : (React.createElement(Indent, null,
|
|
2242
|
+
React.createElement(Text, { color: "var(--swui-primary-action-color)" }, label)));
|
|
2237
2243
|
}; };
|
|
2238
2244
|
|
|
2239
2245
|
var createEditableTextCellWithStatus = function (warningOnEmpty, crudStatusProvider, modifiedFieldProvider) { return function (_a) {
|
|
@@ -2245,8 +2251,8 @@ var createEditableTextCellWithStatus = function (warningOnEmpty, crudStatusProvi
|
|
|
2245
2251
|
var modifiedField = modifiedFieldProvider
|
|
2246
2252
|
? modifiedFieldProvider(item)
|
|
2247
2253
|
: undefined;
|
|
2248
|
-
return isEditable && isEditing ? (createElement(TextInput, { onValueChange: setEditorValue, value: editorValue, onDone: stopEditing, onEsc: stopEditingAndRevert, autoFocus: true, selectAllOnMount: !lastKeyEvent, onMove: stopEditingAndMove })) : (createElement(Indent, { row: true, alignItems: "center" },
|
|
2249
|
-
createElement(ModifiedField, { value: label, modifiedField: modifiedField, crudStatus: crudStatus, isEditable: isEditable, warningOnEmpty: warnOnEmpty })));
|
|
2254
|
+
return isEditable && isEditing ? (React.createElement(TextInput, { onValueChange: setEditorValue, value: editorValue, onDone: stopEditing, onEsc: stopEditingAndRevert, autoFocus: true, selectAllOnMount: !lastKeyEvent, onMove: stopEditingAndMove })) : (React.createElement(Indent, { row: true, alignItems: "center" },
|
|
2255
|
+
React.createElement(ModifiedField, { value: label, modifiedField: modifiedField, crudStatus: crudStatus, isEditable: isEditable, warningOnEmpty: warnOnEmpty })));
|
|
2250
2256
|
}; };
|
|
2251
2257
|
|
|
2252
2258
|
export { CrudStatusIndicator, EditableTextCellWithCrudAndModified, GridHooksContext, GridHooksTable, ModifiedField, SmallTableCell, SmallTableHead, StandardTable, StandardTableActionsContext, StandardTableCell, StandardTableCellUi, StandardTableConfigContext, StandardTableContent, StandardTableHeadRow, StandardTableRow, StandardTableRowCheckbox, StandardTableRowList, StandardTableStateContext, StandardTableTableIdContext, TableCell, TableColumnGroupHead, TableHeadItem, TableHeadRow, TableRow, TextCell, createColumnConfig, createEditableTextCellWithStatus, createGroupConfigAndIdsForRows, createInternalStandardTableActions, createStandardEditableTextCell, createStandardTableActions, createStandardTableInitialState, createStandardTableReducer, defaultTableHeadRowHeight, defaultTableRowHeight, focusOnCell, formatColumnIdToHeaderCellLabel, formatValueLabel, hasIndicatorContent, multitypeComparator, smallTableRowWidth, tableBackgroundColorExpanded, tableBackgroundHoverColorExpanded, tableBorder, tableBorderColor, tableBorderColorExpanded, tableBorderLeft, tableBorderLeftExpanded, useCellBackgroundByColumnConfig, useCellBackgroundByColumnId, useColumnConfigById, useColumnValueResolver, useEditableCell, useFirstColumnConfig, useGridCell, useGridNavigation, useGridNavigationOptionsFromContext, useLastColumnConfig, useLocalStateTableContext, useRevertableValue, useRowCheckbox, useStandardTableActions, useStandardTableConfig, useStandardTableId, useStandardTableState, useTableHeadCheckbox, useTableSortHeader };
|