@semcore/data-table 16.0.0-prerelease.12 → 16.0.0-prerelease.13
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/lib/esm/Body.mjs +23 -22
- package/lib/esm/DataTable.mjs +11 -11
- package/lib/esm/Head.mjs +15 -15
- package/lib/esm/components/Body/Body.mjs +195 -0
- package/lib/esm/components/Body/Cell.mjs +129 -0
- package/lib/esm/components/Body/MergedCells.mjs +21 -0
- package/lib/esm/components/Body/Row.mjs +193 -0
- package/lib/esm/components/DataTable/DataTable.mjs +492 -0
- package/lib/esm/components/Head/Column.mjs +262 -0
- package/lib/esm/components/Head/Group.mjs +89 -0
- package/lib/esm/components/Head/Head.mjs +134 -0
- package/lib/esm/index.mjs +3 -0
- package/lib/esm/translations/en.json.mjs +3 -1
- package/lib/esm/utils.mjs +6 -6
- package/package.json +6 -6
- package/vite.config.ts +0 -3
- package/lib/cjs/Body.js +0 -475
- package/lib/cjs/Body.js.map +0 -1
- package/lib/cjs/DataTable.js +0 -622
- package/lib/cjs/DataTable.js.map +0 -1
- package/lib/cjs/Head.js +0 -399
- package/lib/cjs/Head.js.map +0 -1
- package/lib/cjs/index.js +0 -26
- package/lib/cjs/index.js.map +0 -1
- package/lib/cjs/style/data-table.shadow.css +0 -394
- package/lib/cjs/style/scroll-shadows.shadow.css +0 -7
- package/lib/cjs/translations/__intergalactic-dynamic-locales.js +0 -39
- package/lib/cjs/translations/__intergalactic-dynamic-locales.js.map +0 -1
- package/lib/cjs/translations/de.json +0 -3
- package/lib/cjs/translations/en.json +0 -3
- package/lib/cjs/translations/es.json +0 -3
- package/lib/cjs/translations/fr.json +0 -3
- package/lib/cjs/translations/it.json +0 -3
- package/lib/cjs/translations/ja.json +0 -3
- package/lib/cjs/translations/ko.json +0 -3
- package/lib/cjs/translations/nl.json +0 -3
- package/lib/cjs/translations/pl.json +0 -3
- package/lib/cjs/translations/pt.json +0 -3
- package/lib/cjs/translations/sv.json +0 -3
- package/lib/cjs/translations/tr.json +0 -3
- package/lib/cjs/translations/vi.json +0 -3
- package/lib/cjs/translations/zh.json +0 -3
- package/lib/cjs/types.js +0 -4
- package/lib/cjs/types.js.map +0 -1
- package/lib/cjs/utils.js +0 -57
- package/lib/cjs/utils.js.map +0 -1
- package/lib/es6/Body.js +0 -468
- package/lib/es6/Body.js.map +0 -1
- package/lib/es6/DataTable.js +0 -614
- package/lib/es6/DataTable.js.map +0 -1
- package/lib/es6/Head.js +0 -391
- package/lib/es6/Head.js.map +0 -1
- package/lib/es6/index.js +0 -3
- package/lib/es6/index.js.map +0 -1
- package/lib/es6/style/data-table.shadow.css +0 -394
- package/lib/es6/style/scroll-shadows.shadow.css +0 -7
- package/lib/es6/translations/__intergalactic-dynamic-locales.js +0 -31
- package/lib/es6/translations/__intergalactic-dynamic-locales.js.map +0 -1
- package/lib/es6/translations/de.json +0 -3
- package/lib/es6/translations/en.json +0 -3
- package/lib/es6/translations/es.json +0 -3
- package/lib/es6/translations/fr.json +0 -3
- package/lib/es6/translations/it.json +0 -3
- package/lib/es6/translations/ja.json +0 -3
- package/lib/es6/translations/ko.json +0 -3
- package/lib/es6/translations/nl.json +0 -3
- package/lib/es6/translations/pl.json +0 -3
- package/lib/es6/translations/pt.json +0 -3
- package/lib/es6/translations/sv.json +0 -3
- package/lib/es6/translations/tr.json +0 -3
- package/lib/es6/translations/vi.json +0 -3
- package/lib/es6/translations/zh.json +0 -3
- package/lib/es6/types.js +0 -2
- package/lib/es6/types.js.map +0 -1
- package/lib/es6/utils.js +0 -48
- package/lib/es6/utils.js.map +0 -1
- package/lib/types/Body.d.ts +0 -61
- package/lib/types/DataTable.d.ts +0 -205
- package/lib/types/Head.d.ts +0 -45
- package/lib/types/index.d.ts +0 -2
- package/lib/types/translations/__intergalactic-dynamic-locales.d.ts +0 -44
- package/lib/types/types.d.ts +0 -73
- package/lib/types/utils.d.ts +0 -4
package/lib/esm/Body.mjs
CHANGED
|
@@ -11,7 +11,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
|
11
11
|
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
12
12
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
13
13
|
import { sstyled, assignProps as assignProps$1, Component } from "@semcore/core";
|
|
14
|
-
import
|
|
14
|
+
import React__default from "react";
|
|
15
15
|
import { Flex, Box } from "@semcore/flex-box";
|
|
16
16
|
import ScrollArea, { hideScrollBarsFromScreenReadersContext } from "@semcore/scroll-area";
|
|
17
17
|
import { getFixedStyle, getScrollOffsetValue } from "./utils.mjs";
|
|
@@ -26,11 +26,12 @@ var scrollStyles = (
|
|
|
26
26
|
/*__reshadow_css_start__*/
|
|
27
27
|
(sstyled.insert(
|
|
28
28
|
/*__inner_css_start__*/
|
|
29
|
-
".
|
|
30
|
-
"
|
|
29
|
+
".___SScrollArea_1765z_gg_{width:-moz-fit-content;width:fit-content}.___SShadowHorizontal_1765z_gg_:after,.___SShadowHorizontal_1765z_gg_:before,.___SShadowVertical_1765z_gg_:after,.___SShadowVertical_1765z_gg_:before{z-index:1}",
|
|
30
|
+
"1765z_gg_"
|
|
31
31
|
), {
|
|
32
|
-
"
|
|
33
|
-
"
|
|
32
|
+
"__SScrollArea": "___SScrollArea_1765z_gg_",
|
|
33
|
+
"__SShadowHorizontal": "___SShadowHorizontal_1765z_gg_",
|
|
34
|
+
"__SShadowVertical": "___SShadowVertical_1765z_gg_"
|
|
34
35
|
})
|
|
35
36
|
);
|
|
36
37
|
var testEnv = process.env.NODE_ENV === "test";
|
|
@@ -58,8 +59,8 @@ var Body = /* @__PURE__ */ function(_Component) {
|
|
|
58
59
|
scrollAreaHeight: void 0,
|
|
59
60
|
scrollOffset: 0
|
|
60
61
|
});
|
|
61
|
-
_defineProperty(_assertThisInitialized(_this), "scrollContainerRef", /* @__PURE__ */
|
|
62
|
-
_defineProperty(_assertThisInitialized(_this), "firstRowRef", /* @__PURE__ */
|
|
62
|
+
_defineProperty(_assertThisInitialized(_this), "scrollContainerRef", /* @__PURE__ */ React__default.createRef());
|
|
63
|
+
_defineProperty(_assertThisInitialized(_this), "firstRowRef", /* @__PURE__ */ React__default.createRef());
|
|
63
64
|
_defineProperty(_assertThisInitialized(_this), "firstRowResizeObserver", null);
|
|
64
65
|
_defineProperty(_assertThisInitialized(_this), "lockedCell", [null, false]);
|
|
65
66
|
_defineProperty(_assertThisInitialized(_this), "getRowHeight", function() {
|
|
@@ -172,7 +173,7 @@ var Body = /* @__PURE__ */ function(_Component) {
|
|
|
172
173
|
if (Array.isArray(cell)) {
|
|
173
174
|
var _ref2;
|
|
174
175
|
var SGroupCell = "div";
|
|
175
|
-
return _ref2 = sstyled(styles), /* @__PURE__ */
|
|
176
|
+
return _ref2 = sstyled(styles), /* @__PURE__ */ React__default.createElement(SGroupCell, _ref2.cn("SGroupCell", {
|
|
176
177
|
"key": "".concat(cellIndex),
|
|
177
178
|
"data-ui-name": "group-cell"
|
|
178
179
|
}), _this2.renderRows(cell, true));
|
|
@@ -201,7 +202,7 @@ var Body = /* @__PURE__ */ function(_Component) {
|
|
|
201
202
|
var columnWMax = column === null || column === void 0 ? void 0 : (_column$props2 = column.props) === null || _column$props2 === void 0 ? void 0 : (_column$props2$ref$cu = _column$props2.ref.current) === null || _column$props2$ref$cu === void 0 ? void 0 : _column$props2$ref$cu.style.getPropertyValue("max-width");
|
|
202
203
|
var _props = {
|
|
203
204
|
name: cell.name,
|
|
204
|
-
children: /* @__PURE__ */
|
|
205
|
+
children: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, cell.data),
|
|
205
206
|
justifyContent: column === null || column === void 0 ? void 0 : (_column$props3 = column.props) === null || _column$props3 === void 0 ? void 0 : _column$props3.justifyContent,
|
|
206
207
|
alignItems: column === null || column === void 0 ? void 0 : (_column$props4 = column.props) === null || _column$props4 === void 0 ? void 0 : _column$props4.alignItems,
|
|
207
208
|
borderLeft: firstColumn === null || firstColumn === void 0 ? void 0 : firstColumn.borderLeft,
|
|
@@ -234,7 +235,7 @@ var Body = /* @__PURE__ */ function(_Component) {
|
|
|
234
235
|
return "igc-table-".concat(uid, "-").concat(name2);
|
|
235
236
|
});
|
|
236
237
|
var ariaColspan = nameParts.length;
|
|
237
|
-
return _ref3 = sstyled(styles), /* @__PURE__ */
|
|
238
|
+
return _ref3 = sstyled(styles), /* @__PURE__ */ React__default.createElement(SCell, _ref3.cn("SCell", _objectSpread(_objectSpread({
|
|
238
239
|
"key": cell.name,
|
|
239
240
|
"role": "gridcell",
|
|
240
241
|
"headers": headerIds.join(" "),
|
|
@@ -291,7 +292,7 @@ var Body = /* @__PURE__ */ function(_Component) {
|
|
|
291
292
|
} finally {
|
|
292
293
|
_iterator2.f();
|
|
293
294
|
}
|
|
294
|
-
return _ref4 = sstyled(styles), /* @__PURE__ */
|
|
295
|
+
return _ref4 = sstyled(styles), /* @__PURE__ */ React__default.createElement(SRow, _ref4.cn("SRow", _objectSpread({
|
|
295
296
|
"data-nested": nested.toString(),
|
|
296
297
|
"role": !nested ? "row" : void 0,
|
|
297
298
|
"__excludeProps": ["data"]
|
|
@@ -371,49 +372,49 @@ var Body = /* @__PURE__ */ function(_Component) {
|
|
|
371
372
|
if (virtualScroll && columnsInitialized && !rowHeight) {
|
|
372
373
|
requestAnimationFrame(this.setupRowSizeObserver);
|
|
373
374
|
}
|
|
374
|
-
var body = (_ref5 = sstyled(styles), /* @__PURE__ */
|
|
375
|
+
var body = (_ref5 = sstyled(styles), /* @__PURE__ */ React__default.createElement(SBody, _ref5.cn("SBody", _objectSpread({}, assignProps$1({
|
|
375
376
|
"animationsDisabled": animationsDisabled,
|
|
376
377
|
"onTransitionEnd": this.handleBodyTransitionEnd
|
|
377
378
|
}, _ref))), renderRows ? renderRows({
|
|
378
379
|
rows,
|
|
379
380
|
columns,
|
|
380
381
|
renderRow: this.renderRow.bind(this)
|
|
381
|
-
}) || null : /* @__PURE__ */
|
|
382
|
+
}) || null : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, holdHeight ? /* @__PURE__ */ React__default.createElement(SHeightHold, _ref5.cn("SHeightHold", {
|
|
382
383
|
"hMin": holdHeight,
|
|
383
384
|
"aria-hidden": true
|
|
384
385
|
})) : null, virtualScroll ? this.renderVirtualizedRows(rows) : this.renderRows(rows))));
|
|
385
386
|
if (disabledScroll) {
|
|
386
|
-
return /* @__PURE__ */
|
|
387
|
+
return /* @__PURE__ */ React__default.createElement(SBodyWrapper, null, body);
|
|
387
388
|
}
|
|
388
389
|
var scrollContainerRefs = [$scrollRef, this.scrollContainerRef];
|
|
389
390
|
if (scrollContainerRef) {
|
|
390
391
|
scrollContainerRefs.push(scrollContainerRef);
|
|
391
392
|
}
|
|
392
|
-
return /* @__PURE__ */
|
|
393
|
+
return /* @__PURE__ */ React__default.createElement(hideScrollBarsFromScreenReadersContext.Provider, {
|
|
393
394
|
value: true
|
|
394
|
-
}, /* @__PURE__ */
|
|
395
|
+
}, /* @__PURE__ */ React__default.createElement(SBodyWrapper, _ref5.cn("SBodyWrapper", {}), /* @__PURE__ */ React__default.createElement(ScrollArea, _ref5.cn("ScrollArea", {
|
|
395
396
|
"shadow": true,
|
|
396
397
|
"leftOffset": offsetLeftSum,
|
|
397
398
|
"rightOffset": offsetRightSum,
|
|
398
399
|
"onResize": callAllEventHandlers(onResize, this.handleScrollAreaResize),
|
|
399
400
|
"onScroll": callAllEventHandlers(onScroll, this.handleScrollAreaScroll),
|
|
400
401
|
"styles": scrollStyles
|
|
401
|
-
}), /* @__PURE__ */
|
|
402
|
+
}), /* @__PURE__ */ React__default.createElement(ScrollArea.Container, {
|
|
402
403
|
ref: forkRef.apply(void 0, scrollContainerRefs),
|
|
403
404
|
role: "rowgroup",
|
|
404
405
|
focusRingTopOffset: "3px",
|
|
405
406
|
tabIndex: -1
|
|
406
|
-
}, body), /* @__PURE__ */
|
|
407
|
+
}, body), /* @__PURE__ */ React__default.createElement("div", _ref5.cn("div", {
|
|
407
408
|
"style": displayContents
|
|
408
|
-
}), /* @__PURE__ */
|
|
409
|
+
}), /* @__PURE__ */ React__default.createElement("div", _ref5.cn("div", {
|
|
409
410
|
"style": displayContents
|
|
410
|
-
}), /* @__PURE__ */
|
|
411
|
+
}), /* @__PURE__ */ React__default.createElement("div", _ref5.cn("div", {
|
|
411
412
|
"style": displayContents
|
|
412
|
-
}), /* @__PURE__ */
|
|
413
|
+
}), /* @__PURE__ */ React__default.createElement(ScrollArea.Bar, {
|
|
413
414
|
orientation: "horizontal",
|
|
414
415
|
bottom: 0,
|
|
415
416
|
container: this.scrollContainerRef
|
|
416
|
-
}), /* @__PURE__ */
|
|
417
|
+
}), /* @__PURE__ */ React__default.createElement(ScrollArea.Bar, {
|
|
417
418
|
orientation: "vertical",
|
|
418
419
|
w: "12px",
|
|
419
420
|
zIndex: 2
|
package/lib/esm/DataTable.mjs
CHANGED
|
@@ -8,7 +8,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
|
8
8
|
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
9
9
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
10
10
|
import { sstyled, createComponent, lastInteraction, assignProps, Component } from "@semcore/core";
|
|
11
|
-
import
|
|
11
|
+
import React__default from "react";
|
|
12
12
|
import { Box } from "@semcore/flex-box";
|
|
13
13
|
import syncScroll from "@semcore/core/lib/utils/syncScroll";
|
|
14
14
|
import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
|
|
@@ -100,7 +100,7 @@ var RootDefinitionTable = /* @__PURE__ */ function(_Component) {
|
|
|
100
100
|
_this = _super.call(this, props);
|
|
101
101
|
_defineProperty(_assertThisInitialized(_this), "focusedCell", [-1, -1]);
|
|
102
102
|
_defineProperty(_assertThisInitialized(_this), "columns", []);
|
|
103
|
-
_defineProperty(_assertThisInitialized(_this), "tableRef", /* @__PURE__ */
|
|
103
|
+
_defineProperty(_assertThisInitialized(_this), "tableRef", /* @__PURE__ */ React__default.createRef());
|
|
104
104
|
_defineProperty(_assertThisInitialized(_this), "scrollBodyRef", null);
|
|
105
105
|
_defineProperty(_assertThisInitialized(_this), "scrollHeadRef", null);
|
|
106
106
|
_defineProperty(_assertThisInitialized(_this), "handlerSortClick", function(name, event) {
|
|
@@ -289,9 +289,9 @@ var RootDefinitionTable = /* @__PURE__ */ function(_Component) {
|
|
|
289
289
|
};
|
|
290
290
|
var sort = this.asProps.sort;
|
|
291
291
|
var columnsChildren = [];
|
|
292
|
-
|
|
292
|
+
React__default.Children.forEach(children, function(child) {
|
|
293
293
|
var _column$props;
|
|
294
|
-
if (!/* @__PURE__ */
|
|
294
|
+
if (!/* @__PURE__ */ React__default.isValidElement(child)) return;
|
|
295
295
|
if (child.type !== DefinitionTable.Column) return;
|
|
296
296
|
var _ref3 = child.props, children2 = _ref3.children, name = _ref3.name, _ref3$fixed = _ref3.fixed, fixed = _ref3$fixed === void 0 ? options.fixed : _ref3$fixed, resizable = _ref3.resizable, sortable = _ref3.sortable, flex = _ref3.flex, vBorders = _ref3.vBorders, active = _ref3.active, props = _objectWithoutProperties(_ref3, _excluded);
|
|
297
297
|
var lastColumnChildren = columnsChildren[columnsChildren.length - 1];
|
|
@@ -312,8 +312,8 @@ var RootDefinitionTable = /* @__PURE__ */ function(_Component) {
|
|
|
312
312
|
return name2;
|
|
313
313
|
}).join("/");
|
|
314
314
|
if (!columns.length) return;
|
|
315
|
-
children2 =
|
|
316
|
-
return !(/* @__PURE__ */
|
|
315
|
+
children2 = React__default.Children.toArray(children2).filter(function(child2) {
|
|
316
|
+
return !(/* @__PURE__ */ React__default.isValidElement(child2) && child2.type === DefinitionTable.Column);
|
|
317
317
|
});
|
|
318
318
|
}
|
|
319
319
|
var column = _this3.columns.find(function(column2) {
|
|
@@ -341,7 +341,7 @@ var RootDefinitionTable = /* @__PURE__ */ function(_Component) {
|
|
|
341
341
|
// @ts-ignore
|
|
342
342
|
forwardRef: child.ref,
|
|
343
343
|
children: children2,
|
|
344
|
-
ref: (column === null || column === void 0 ? void 0 : (_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.ref) || /* @__PURE__ */
|
|
344
|
+
ref: (column === null || column === void 0 ? void 0 : (_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.ref) || /* @__PURE__ */ React__default.createRef()
|
|
345
345
|
}),
|
|
346
346
|
parentColumns: []
|
|
347
347
|
};
|
|
@@ -377,8 +377,8 @@ var RootDefinitionTable = /* @__PURE__ */ function(_Component) {
|
|
|
377
377
|
var _this$asProps2 = this.asProps, data = _this$asProps2.data, use = _this$asProps2.use, uniqueKey = _this$asProps2.uniqueKey, uid = _this$asProps2.uid;
|
|
378
378
|
var cellPropsLayers = {};
|
|
379
379
|
var rowPropsLayers = [];
|
|
380
|
-
|
|
381
|
-
if (/* @__PURE__ */
|
|
380
|
+
React__default.Children.forEach(props.children, function(child) {
|
|
381
|
+
if (/* @__PURE__ */ React__default.isValidElement(child)) {
|
|
382
382
|
var _ref5 = child.props, name = _ref5.name, children = _ref5.children, other = _objectWithoutProperties(_ref5, _excluded2);
|
|
383
383
|
if (child.type === DefinitionTable.Cell && name) {
|
|
384
384
|
name.split("/").forEach(function(name2) {
|
|
@@ -529,7 +529,7 @@ var RootDefinitionTable = /* @__PURE__ */ function(_Component) {
|
|
|
529
529
|
var _ref = this.asProps, _ref2;
|
|
530
530
|
var SDataTable = Box;
|
|
531
531
|
var _this$asProps4 = this.asProps, Children = _this$asProps4.Children, styles = _this$asProps4.styles;
|
|
532
|
-
return _ref2 = sstyled(styles), /* @__PURE__ */
|
|
532
|
+
return _ref2 = sstyled(styles), /* @__PURE__ */ React__default.createElement(SDataTable, _ref2.cn("SDataTable", _objectSpread({}, assignProps({
|
|
533
533
|
"__excludeProps": ["data"],
|
|
534
534
|
"ref": this.tableRef,
|
|
535
535
|
"role": "grid",
|
|
@@ -540,7 +540,7 @@ var RootDefinitionTable = /* @__PURE__ */ function(_Component) {
|
|
|
540
540
|
"onBlur": this.handleBlur,
|
|
541
541
|
"aria-rowcount": this.totalRows,
|
|
542
542
|
"aria-colcount": this.columns.length
|
|
543
|
-
}, _ref))), /* @__PURE__ */
|
|
543
|
+
}, _ref))), /* @__PURE__ */ React__default.createElement(Children, _ref2.cn("Children", {})));
|
|
544
544
|
}
|
|
545
545
|
}]);
|
|
546
546
|
return RootDefinitionTable2;
|
package/lib/esm/Head.mjs
CHANGED
|
@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
|
7
7
|
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
8
8
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
9
9
|
import { sstyled, assignProps, Component } from "@semcore/core";
|
|
10
|
-
import
|
|
10
|
+
import React__default from "react";
|
|
11
11
|
import { ScreenReaderOnly, Flex, Box } from "@semcore/flex-box";
|
|
12
12
|
import ScrollArea, { hideScrollBarsFromScreenReadersContext } from "@semcore/scroll-area";
|
|
13
13
|
import SortDesc from "@semcore/icon/SortDesc/m";
|
|
@@ -281,7 +281,7 @@ var Head = /* @__PURE__ */ function(_Component) {
|
|
|
281
281
|
var index = this.columns.findIndex(function(flattenCol) {
|
|
282
282
|
return flattenCol.name === column.name;
|
|
283
283
|
});
|
|
284
|
-
return _ref2 = sstyled(styles), /* @__PURE__ */
|
|
284
|
+
return _ref2 = sstyled(styles), /* @__PURE__ */ React__default.createElement(SColumn, _ref2.cn("SColumn", _objectSpread(_objectSpread({
|
|
285
285
|
"role": isGroup ? void 0 : "columnheader",
|
|
286
286
|
"scope": isGroup ? "colgroup" : "col",
|
|
287
287
|
"key": column.name,
|
|
@@ -307,16 +307,16 @@ var Head = /* @__PURE__ */ function(_Component) {
|
|
|
307
307
|
"onFocus": this.onFocusCell,
|
|
308
308
|
"aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(" ") : void 0,
|
|
309
309
|
"innerOutline": true
|
|
310
|
-
})), isGroup ? /* @__PURE__ */
|
|
310
|
+
})), isGroup ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(SColumn, _ref2.cn("SColumn", {
|
|
311
311
|
"id": "igc-table-".concat(uid, "-").concat(column.name, "-group"),
|
|
312
312
|
"groupHead": true,
|
|
313
313
|
"use": use,
|
|
314
314
|
"active": column.active,
|
|
315
315
|
"borderLeft": column.borderLeft,
|
|
316
316
|
"borderRight": column.borderRight
|
|
317
|
-
}), /* @__PURE__ */
|
|
317
|
+
}), /* @__PURE__ */ React__default.createElement("div", _ref2.cn("div", {}), column.props.children)), /* @__PURE__ */ React__default.createElement(SHead, _ref2.cn("SHead", {}), this.renderColumns(column.columns, 100 / cSize))) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, column.props.children, column.sortable ? /* @__PURE__ */ React__default.createElement(SSortWrapper, _ref2.cn("SSortWrapper", {
|
|
318
318
|
"ref": this.makeSortRefHandler(column.active)
|
|
319
|
-
}), /* @__PURE__ */
|
|
319
|
+
}), /* @__PURE__ */ React__default.createElement(SSortIcon, _ref2.cn("SSortIcon", {}))) : null));
|
|
320
320
|
}
|
|
321
321
|
}, {
|
|
322
322
|
key: "render",
|
|
@@ -328,33 +328,33 @@ var Head = /* @__PURE__ */ function(_Component) {
|
|
|
328
328
|
this.columns = flattenColumns(columnsChildren);
|
|
329
329
|
var _getScrollOffsetValue = getScrollOffsetValue(this.columns), _getScrollOffsetValue2 = _slicedToArray(_getScrollOffsetValue, 2), offsetLeftSum = _getScrollOffsetValue2[0], offsetRightSum = _getScrollOffsetValue2[1];
|
|
330
330
|
logger.warn(sticky, "'sticky' property is deprecated, use '<Sticky/>' wrapper", this.asProps["data-ui-name"] || Head2.displayName);
|
|
331
|
-
return _ref3 = sstyled(styles), /* @__PURE__ */
|
|
331
|
+
return _ref3 = sstyled(styles), /* @__PURE__ */ React__default.createElement(hideScrollBarsFromScreenReadersContext.Provider, {
|
|
332
332
|
value: true
|
|
333
|
-
}, /* @__PURE__ */
|
|
333
|
+
}, /* @__PURE__ */ React__default.createElement(SHeadWrapper, _ref3.cn("SHeadWrapper", {
|
|
334
334
|
"sticky": sticky,
|
|
335
335
|
"animationsDisabled": animationsDisabled
|
|
336
|
-
}), /* @__PURE__ */
|
|
336
|
+
}), /* @__PURE__ */ React__default.createElement(ScrollArea, _ref3.cn("ScrollArea", {
|
|
337
337
|
"leftOffset": offsetLeftSum,
|
|
338
338
|
"rightOffset": offsetRightSum,
|
|
339
339
|
"shadow": true,
|
|
340
340
|
"onResize": onResize
|
|
341
|
-
}), /* @__PURE__ */
|
|
341
|
+
}), /* @__PURE__ */ React__default.createElement(ScrollArea.Container, {
|
|
342
342
|
ref: $scrollRef,
|
|
343
343
|
role: "rowgroup",
|
|
344
344
|
tabIndex: -1,
|
|
345
345
|
zIndex: 2
|
|
346
|
-
}, /* @__PURE__ */
|
|
346
|
+
}, /* @__PURE__ */ React__default.createElement(SHead, _ref3.cn("SHead", _objectSpread({}, assignProps({
|
|
347
347
|
"role": "row",
|
|
348
348
|
"__excludeProps": ["hidden"]
|
|
349
|
-
}, _ref))), this.renderColumns(columnsChildren, 100 / this.columns.length))), Boolean(withScrollBar) && /* @__PURE__ */
|
|
349
|
+
}, _ref))), this.renderColumns(columnsChildren, 100 / this.columns.length))), Boolean(withScrollBar) && /* @__PURE__ */ React__default.createElement("div", _ref3.cn("div", {
|
|
350
350
|
"style": displayContents
|
|
351
|
-
}), /* @__PURE__ */
|
|
351
|
+
}), /* @__PURE__ */ React__default.createElement("div", _ref3.cn("div", {
|
|
352
352
|
"style": displayContents
|
|
353
|
-
}), /* @__PURE__ */
|
|
353
|
+
}), /* @__PURE__ */ React__default.createElement("div", _ref3.cn("div", {
|
|
354
354
|
"style": displayContents
|
|
355
|
-
}), /* @__PURE__ */
|
|
355
|
+
}), /* @__PURE__ */ React__default.createElement(ScrollArea.Bar, {
|
|
356
356
|
orientation: "horizontal"
|
|
357
|
-
}))))), Children.origin, /* @__PURE__ */
|
|
357
|
+
}))))), Children.origin, /* @__PURE__ */ React__default.createElement(ScreenReaderOnly, _ref3.cn("ScreenReaderOnly", {
|
|
358
358
|
"aria-hidden": true,
|
|
359
359
|
"id": this.sortableColumnDescribeId()
|
|
360
360
|
}), getI18nText === null || getI18nText === void 0 ? void 0 : getI18nText("sortableColumn"))));
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
+
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
3
|
+
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
4
|
+
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
5
|
+
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
6
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
7
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
8
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
9
|
+
import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
|
|
10
|
+
import * as React from "react";
|
|
11
|
+
import { Box } from "@semcore/base-components";
|
|
12
|
+
import { Row } from "./Row.mjs";
|
|
13
|
+
import { Cell } from "./Cell.mjs";
|
|
14
|
+
import { MergedRowsCell, MergedColumnsCell } from "./MergedCells.mjs";
|
|
15
|
+
import { ACCORDION } from "@semcore/data-table";
|
|
16
|
+
import ChevronRightM from "@semcore/icon/ChevronRight/m";
|
|
17
|
+
import { ButtonLink } from "@semcore/button";
|
|
18
|
+
import Spin from "@semcore/spin";
|
|
19
|
+
var style = (
|
|
20
|
+
/*__reshadow_css_start__*/
|
|
21
|
+
(sstyled.insert(
|
|
22
|
+
/*__inner_css_start__*/
|
|
23
|
+
'.___SBody_1q19z_gg_,.___SRow_1q19z_gg_{display:contents}.___SBody_1q19z_gg_.__compact_1q19z_gg_ .___SCell_1q19z_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SCell_1q19z_gg_.__gridArea_1q19z_gg_,.___SCollapseRow_1q19z_gg_.__gridArea_1q19z_gg_,.___SRow_1q19z_gg_.__gridArea_1q19z_gg_{grid-area:var(--gridArea_1q19z)}.___SRow_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_._theme_muted_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-active, #e6e7ed)}@media (hover:hover){.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-hover, #f0f0f4)}}.___SRow_1q19z_gg_._theme_muted_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-unread, #f4f5f9)}@media (hover:hover){.___SRow_1q19z_gg_._theme_muted_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_muted_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-hover, #f0f0f4)}}.___SRow_1q19z_gg_._theme_info_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-selected, #e9f7ff)}.___SRow_1q19z_gg_._theme_info_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-selected-active, #c4e5fe)}@media (hover:hover){.___SRow_1q19z_gg_._theme_info_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_info_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-selected-hover, #c4e5fe)}}.___SRow_1q19z_gg_._theme_success_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-new, #dbfee8)}.___SRow_1q19z_gg_._theme_success_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-new-active, #9ef2c9)}@media (hover:hover){.___SRow_1q19z_gg_._theme_success_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_success_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-new-hover, #9ef2c9)}}.___SRow_1q19z_gg_._theme_warning_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-warning, #fff3d9)}.___SRow_1q19z_gg_._theme_warning_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-warning-active, #ffdca2)}@media (hover:hover){.___SRow_1q19z_gg_._theme_warning_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_warning_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-warning-hover, #ffdca2)}}.___SRow_1q19z_gg_._theme_danger_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-critical, #fff0f7)}.___SRow_1q19z_gg_._theme_danger_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-critical-active, #ffd7df)}@media (hover:hover){.___SRow_1q19z_gg_._theme_danger_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_danger_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-critical-hover, #ffd7df)}}.___SCell_1q19z_gg_{display:flex;height:100%;font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);overflow:hidden;white-space:pre-wrap;word-break:break-word;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out;outline:0}.___SCell_1q19z_gg_ .___SAccordionToggle_1q19z_gg_{transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out}.___SCell_1q19z_gg_ .___SAccordionToggle_1q19z_gg_.__expanded_1q19z_gg_{transform:rotate(90deg)}.___SCell_1q19z_gg_._use_primary_1q19z_gg_{padding:var(--intergalactic-spacing-3x, 12px);min-height:45px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SCell_1q19z_gg_._use_primary_1q19z_gg_[data-aria-level]{padding-left:calc(var(--intergalactic-spacing-3x, 12px) + (var(--intergalactic-spacing-5x, 20px)*(var(--data-aria-level_1q19z) - 1)))}.___SCell_1q19z_gg_._use_secondary_1q19z_gg_{padding:var(--intergalactic-spacing-2x, 8px);min-height:37px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SCell_1q19z_gg_._use_secondary_1q19z_gg_[data-aria-level]{padding-left:calc(var(--intergalactic-spacing-2x, 8px) + (var(--intergalactic-spacing-5x, 20px)*(var(--data-aria-level_1q19z) - 1)))}.___SCell_1q19z_gg_._borders_both_1q19z_gg_,.___SCell_1q19z_gg_._borders_left_1q19z_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SCell_1q19z_gg_._borders_both_1q19z_gg_,.___SCell_1q19z_gg_._borders_right_1q19z_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SCell_1q19z_gg_.__fixed_1q19z_gg_{position:sticky;z-index:2}.___SCell_1q19z_gg_._theme_muted_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-unread, #f4f5f9)}.___SCell_1q19z_gg_._theme_info_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-selected, #e9f7ff)}.___SCell_1q19z_gg_._theme_success_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-new, #dbfee8)}.___SCell_1q19z_gg_._theme_warning_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-warning, #fff3d9)}.___SCell_1q19z_gg_._theme_danger_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-critical, #fff0f7)}.___SSpinContainer_1q19z_gg_{position:absolute;left:0;right:0;bottom:0;top:0;display:flex;align-items:center;justify-content:center;background-color:var(--intergalactic-overlay-limitation-secondary, rgba(255, 255, 255, 0.85))}.___SSpinContainer_1q19z_gg_.__headerHeight_1q19z_gg_{top:var(--headerHeight_1q19z)}',
|
|
24
|
+
"1q19z_gg_"
|
|
25
|
+
), {
|
|
26
|
+
"__SBody": "___SBody_1q19z_gg_",
|
|
27
|
+
"__SRow": "___SRow_1q19z_gg_",
|
|
28
|
+
"_compact": "__compact_1q19z_gg_",
|
|
29
|
+
"__SCell": "___SCell_1q19z_gg_",
|
|
30
|
+
"_gridArea": "__gridArea_1q19z_gg_",
|
|
31
|
+
"__SCollapseRow": "___SCollapseRow_1q19z_gg_",
|
|
32
|
+
"--gridArea": "--gridArea_1q19z",
|
|
33
|
+
"_active": "__active_1q19z_gg_",
|
|
34
|
+
"_theme": "__theme_1q19z_gg_",
|
|
35
|
+
"_theme_muted": "_theme_muted_1q19z_gg_",
|
|
36
|
+
"_theme_info": "_theme_info_1q19z_gg_",
|
|
37
|
+
"_theme_success": "_theme_success_1q19z_gg_",
|
|
38
|
+
"_theme_warning": "_theme_warning_1q19z_gg_",
|
|
39
|
+
"_theme_danger": "_theme_danger_1q19z_gg_",
|
|
40
|
+
"_borders_both": "_borders_both_1q19z_gg_",
|
|
41
|
+
"_borders_left": "_borders_left_1q19z_gg_",
|
|
42
|
+
"_borders_right": "_borders_right_1q19z_gg_",
|
|
43
|
+
"_fixed": "__fixed_1q19z_gg_",
|
|
44
|
+
"__SSpinContainer": "___SSpinContainer_1q19z_gg_",
|
|
45
|
+
"_headerHeight": "__headerHeight_1q19z_gg_",
|
|
46
|
+
"--headerHeight": "--headerHeight_1q19z",
|
|
47
|
+
"__SAccordionToggle": "___SAccordionToggle_1q19z_gg_",
|
|
48
|
+
"_expanded": "__expanded_1q19z_gg_",
|
|
49
|
+
"_use_primary": "_use_primary_1q19z_gg_",
|
|
50
|
+
"--data-aria-level": "--data-aria-level_1q19z",
|
|
51
|
+
"_use_secondary": "_use_secondary_1q19z_gg_"
|
|
52
|
+
})
|
|
53
|
+
);
|
|
54
|
+
var BodyRoot = /* @__PURE__ */ function(_Component) {
|
|
55
|
+
_inherits(BodyRoot2, _Component);
|
|
56
|
+
var _super = _createSuper(BodyRoot2);
|
|
57
|
+
function BodyRoot2() {
|
|
58
|
+
var _this;
|
|
59
|
+
_classCallCheck(this, BodyRoot2);
|
|
60
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
61
|
+
args[_key] = arguments[_key];
|
|
62
|
+
}
|
|
63
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
64
|
+
_defineProperty(_assertThisInitialized(_this), "onExpandRow", function(expandedRowIndex) {
|
|
65
|
+
var expandedRows = _this.asProps.expandedRows;
|
|
66
|
+
if (expandedRows !== null && expandedRows !== void 0 && expandedRows.includes(expandedRowIndex)) {
|
|
67
|
+
_this.handlers.expandedRows(expandedRows.filter(function(row) {
|
|
68
|
+
return row !== expandedRowIndex;
|
|
69
|
+
}));
|
|
70
|
+
} else {
|
|
71
|
+
_this.handlers.expandedRows([].concat(_toConsumableArray(expandedRows), [expandedRowIndex]));
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
return _this;
|
|
75
|
+
}
|
|
76
|
+
_createClass(BodyRoot2, [{
|
|
77
|
+
key: "uncontrolledProps",
|
|
78
|
+
value: function uncontrolledProps() {
|
|
79
|
+
return {
|
|
80
|
+
expandedRows: []
|
|
81
|
+
};
|
|
82
|
+
}
|
|
83
|
+
}, {
|
|
84
|
+
key: "getRowProps",
|
|
85
|
+
value: function getRowProps(_, index) {
|
|
86
|
+
var _this$asProps = this.asProps, rows = _this$asProps.rows, use = _this$asProps.use, gridTemplateAreas = _this$asProps.gridTemplateAreas, gridTemplateColumns = _this$asProps.gridTemplateColumns, expandedRows = _this$asProps.expandedRows, columns = _this$asProps.columns, headerRows = _this$asProps.headerRows;
|
|
87
|
+
var row = rows[index];
|
|
88
|
+
var rowIndex = (expandedRows !== null && expandedRows !== void 0 ? expandedRows : []).reduce(function(acc, item) {
|
|
89
|
+
if (item < index) {
|
|
90
|
+
acc = acc + 1;
|
|
91
|
+
}
|
|
92
|
+
return acc;
|
|
93
|
+
}, index);
|
|
94
|
+
var accordionDataGridArea = Array.isArray(row[ACCORDION]) ? "".concat(rowIndex + headerRows + 2, " / 1 / ").concat(rowIndex + headerRows + 2 + row[ACCORDION].length, " / ").concat(columns.length + 1) : "".concat(rowIndex + headerRows + 2, " / 1 / ").concat(rowIndex + headerRows + 2, " / ").concat(columns.length + 1);
|
|
95
|
+
return {
|
|
96
|
+
use,
|
|
97
|
+
gridTemplateAreas,
|
|
98
|
+
gridTemplateColumns,
|
|
99
|
+
expanded: expandedRows === null || expandedRows === void 0 ? void 0 : expandedRows.includes(index),
|
|
100
|
+
accordionDataGridArea,
|
|
101
|
+
columns,
|
|
102
|
+
headerRows,
|
|
103
|
+
rowIndex: index,
|
|
104
|
+
rows
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
}, {
|
|
108
|
+
key: "getCellProps",
|
|
109
|
+
value: function getCellProps(props) {
|
|
110
|
+
var _this2 = this;
|
|
111
|
+
var _this$asProps2 = this.asProps, use = _this$asProps2.use, renderCell = _this$asProps2.renderCell, expandedRows = _this$asProps2.expandedRows, styles = _this$asProps2.styles, getI18nText = _this$asProps2.getI18nText;
|
|
112
|
+
var SAccordionToggle = ButtonLink;
|
|
113
|
+
var cellValue = props.row[props.name];
|
|
114
|
+
var value = "";
|
|
115
|
+
if (cellValue instanceof MergedRowsCell || cellValue instanceof MergedColumnsCell) {
|
|
116
|
+
value = cellValue.value;
|
|
117
|
+
} else {
|
|
118
|
+
value = cellValue;
|
|
119
|
+
}
|
|
120
|
+
var defaultRender = function defaultRender2() {
|
|
121
|
+
if (props.columnIndex === 0 && props.row[ACCORDION]) {
|
|
122
|
+
var _ref2;
|
|
123
|
+
return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SAccordionToggle, _ref2.cn("SAccordionToggle", {
|
|
124
|
+
"aria-label": getI18nText("DataTable.Cell.AccordionToggle.expand:aria-label"),
|
|
125
|
+
"expanded": expandedRows === null || expandedRows === void 0 ? void 0 : expandedRows.includes(props.rowIndex),
|
|
126
|
+
"onClick": function onClick() {
|
|
127
|
+
return _this2.onExpandRow(props.rowIndex);
|
|
128
|
+
},
|
|
129
|
+
"color": "--intergalactic-icon-primary-neutral"
|
|
130
|
+
}), /* @__PURE__ */ React.createElement(SAccordionToggle.Addon, {
|
|
131
|
+
tag: ChevronRightM
|
|
132
|
+
})), value);
|
|
133
|
+
}
|
|
134
|
+
return value;
|
|
135
|
+
};
|
|
136
|
+
return {
|
|
137
|
+
use,
|
|
138
|
+
children: renderCell ? renderCell({
|
|
139
|
+
name: props.name,
|
|
140
|
+
row: props.row,
|
|
141
|
+
column: props.column,
|
|
142
|
+
rowIndex: props.rowIndex,
|
|
143
|
+
columnIndex: props.columnIndex,
|
|
144
|
+
defaultRender,
|
|
145
|
+
value
|
|
146
|
+
}) : defaultRender()
|
|
147
|
+
};
|
|
148
|
+
}
|
|
149
|
+
}, {
|
|
150
|
+
key: "render",
|
|
151
|
+
value: function render() {
|
|
152
|
+
var _ref = this.asProps, _ref3;
|
|
153
|
+
var SBody = Box;
|
|
154
|
+
var SSpinContainer = Box;
|
|
155
|
+
var _this$asProps3 = this.asProps, rows = _this$asProps3.rows;
|
|
156
|
+
_this$asProps3.columns;
|
|
157
|
+
var styles = _this$asProps3.styles;
|
|
158
|
+
_this$asProps3.headerRows;
|
|
159
|
+
var loading = _this$asProps3.loading, headerHeight = _this$asProps3.headerHeight;
|
|
160
|
+
return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SBody, _ref3.cn("SBody", _objectSpread({}, assignProps({}, _ref))), rows.map(function(row, index) {
|
|
161
|
+
return (
|
|
162
|
+
// @ts-ignore
|
|
163
|
+
/* @__PURE__ */ React.createElement(Body.Row, {
|
|
164
|
+
key: index,
|
|
165
|
+
role: "row",
|
|
166
|
+
"aria-rowindex": index + 2,
|
|
167
|
+
row
|
|
168
|
+
// rows={rows}
|
|
169
|
+
// rowIndex={index}
|
|
170
|
+
// headerRows={headerRows}
|
|
171
|
+
})
|
|
172
|
+
);
|
|
173
|
+
}), loading && // @ts-ignore
|
|
174
|
+
/* @__PURE__ */ React.createElement(SSpinContainer, _ref3.cn("SSpinContainer", {
|
|
175
|
+
"aria-hidden": true,
|
|
176
|
+
"headerHeight": "".concat(headerHeight, "px")
|
|
177
|
+
}), /* @__PURE__ */ React.createElement(Spin, _ref3.cn("Spin", {
|
|
178
|
+
"size": "xxl"
|
|
179
|
+
}))));
|
|
180
|
+
}
|
|
181
|
+
}]);
|
|
182
|
+
return BodyRoot2;
|
|
183
|
+
}(Component);
|
|
184
|
+
_defineProperty(BodyRoot, "displayName", "Body");
|
|
185
|
+
_defineProperty(BodyRoot, "style", style);
|
|
186
|
+
_defineProperty(BodyRoot, "defaultProps", {
|
|
187
|
+
defaultExpandedRows: []
|
|
188
|
+
});
|
|
189
|
+
var Body = createComponent(BodyRoot, {
|
|
190
|
+
Row,
|
|
191
|
+
Cell
|
|
192
|
+
});
|
|
193
|
+
export {
|
|
194
|
+
Body
|
|
195
|
+
};
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
+
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
|
+
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
+
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
5
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
6
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
7
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
8
|
+
import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
|
|
9
|
+
import * as React from "react";
|
|
10
|
+
import { Flex } from "@semcore/base-components";
|
|
11
|
+
import { getFocusableIn } from "@semcore/core/lib/utils/focus-lock/getFocusableIn";
|
|
12
|
+
var style = (
|
|
13
|
+
/*__reshadow_css_start__*/
|
|
14
|
+
(sstyled.insert(
|
|
15
|
+
/*__inner_css_start__*/
|
|
16
|
+
'.___SBody_1q19z_gg_,.___SRow_1q19z_gg_{display:contents}.___SBody_1q19z_gg_.__compact_1q19z_gg_ .___SCell_1q19z_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SCell_1q19z_gg_.__gridArea_1q19z_gg_,.___SCollapseRow_1q19z_gg_.__gridArea_1q19z_gg_,.___SRow_1q19z_gg_.__gridArea_1q19z_gg_{grid-area:var(--gridArea_1q19z)}.___SRow_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_._theme_muted_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-active, #e6e7ed)}@media (hover:hover){.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-hover, #f0f0f4)}}.___SRow_1q19z_gg_._theme_muted_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-unread, #f4f5f9)}@media (hover:hover){.___SRow_1q19z_gg_._theme_muted_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_muted_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-hover, #f0f0f4)}}.___SRow_1q19z_gg_._theme_info_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-selected, #e9f7ff)}.___SRow_1q19z_gg_._theme_info_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-selected-active, #c4e5fe)}@media (hover:hover){.___SRow_1q19z_gg_._theme_info_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_info_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-selected-hover, #c4e5fe)}}.___SRow_1q19z_gg_._theme_success_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-new, #dbfee8)}.___SRow_1q19z_gg_._theme_success_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-new-active, #9ef2c9)}@media (hover:hover){.___SRow_1q19z_gg_._theme_success_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_success_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-new-hover, #9ef2c9)}}.___SRow_1q19z_gg_._theme_warning_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-warning, #fff3d9)}.___SRow_1q19z_gg_._theme_warning_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-warning-active, #ffdca2)}@media (hover:hover){.___SRow_1q19z_gg_._theme_warning_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_warning_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-warning-hover, #ffdca2)}}.___SRow_1q19z_gg_._theme_danger_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-critical, #fff0f7)}.___SRow_1q19z_gg_._theme_danger_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-critical-active, #ffd7df)}@media (hover:hover){.___SRow_1q19z_gg_._theme_danger_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_danger_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-critical-hover, #ffd7df)}}.___SCell_1q19z_gg_{display:flex;height:100%;font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);overflow:hidden;white-space:pre-wrap;word-break:break-word;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out;outline:0}.___SCell_1q19z_gg_ .___SAccordionToggle_1q19z_gg_{transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out}.___SCell_1q19z_gg_ .___SAccordionToggle_1q19z_gg_.__expanded_1q19z_gg_{transform:rotate(90deg)}.___SCell_1q19z_gg_._use_primary_1q19z_gg_{padding:var(--intergalactic-spacing-3x, 12px);min-height:45px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SCell_1q19z_gg_._use_primary_1q19z_gg_[data-aria-level]{padding-left:calc(var(--intergalactic-spacing-3x, 12px) + (var(--intergalactic-spacing-5x, 20px)*(var(--data-aria-level_1q19z) - 1)))}.___SCell_1q19z_gg_._use_secondary_1q19z_gg_{padding:var(--intergalactic-spacing-2x, 8px);min-height:37px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SCell_1q19z_gg_._use_secondary_1q19z_gg_[data-aria-level]{padding-left:calc(var(--intergalactic-spacing-2x, 8px) + (var(--intergalactic-spacing-5x, 20px)*(var(--data-aria-level_1q19z) - 1)))}.___SCell_1q19z_gg_._borders_both_1q19z_gg_,.___SCell_1q19z_gg_._borders_left_1q19z_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SCell_1q19z_gg_._borders_both_1q19z_gg_,.___SCell_1q19z_gg_._borders_right_1q19z_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SCell_1q19z_gg_.__fixed_1q19z_gg_{position:sticky;z-index:2}.___SCell_1q19z_gg_._theme_muted_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-unread, #f4f5f9)}.___SCell_1q19z_gg_._theme_info_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-selected, #e9f7ff)}.___SCell_1q19z_gg_._theme_success_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-new, #dbfee8)}.___SCell_1q19z_gg_._theme_warning_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-warning, #fff3d9)}.___SCell_1q19z_gg_._theme_danger_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-critical, #fff0f7)}.___SSpinContainer_1q19z_gg_{position:absolute;left:0;right:0;bottom:0;top:0;display:flex;align-items:center;justify-content:center;background-color:var(--intergalactic-overlay-limitation-secondary, rgba(255, 255, 255, 0.85))}.___SSpinContainer_1q19z_gg_.__headerHeight_1q19z_gg_{top:var(--headerHeight_1q19z)}',
|
|
17
|
+
"1q19z_gg_"
|
|
18
|
+
), {
|
|
19
|
+
"__SBody": "___SBody_1q19z_gg_",
|
|
20
|
+
"__SRow": "___SRow_1q19z_gg_",
|
|
21
|
+
"_compact": "__compact_1q19z_gg_",
|
|
22
|
+
"__SCell": "___SCell_1q19z_gg_",
|
|
23
|
+
"_gridArea": "__gridArea_1q19z_gg_",
|
|
24
|
+
"__SCollapseRow": "___SCollapseRow_1q19z_gg_",
|
|
25
|
+
"--gridArea": "--gridArea_1q19z",
|
|
26
|
+
"_active": "__active_1q19z_gg_",
|
|
27
|
+
"_theme": "__theme_1q19z_gg_",
|
|
28
|
+
"_theme_muted": "_theme_muted_1q19z_gg_",
|
|
29
|
+
"_theme_info": "_theme_info_1q19z_gg_",
|
|
30
|
+
"_theme_success": "_theme_success_1q19z_gg_",
|
|
31
|
+
"_theme_warning": "_theme_warning_1q19z_gg_",
|
|
32
|
+
"_theme_danger": "_theme_danger_1q19z_gg_",
|
|
33
|
+
"_borders_both": "_borders_both_1q19z_gg_",
|
|
34
|
+
"_borders_left": "_borders_left_1q19z_gg_",
|
|
35
|
+
"_borders_right": "_borders_right_1q19z_gg_",
|
|
36
|
+
"_fixed": "__fixed_1q19z_gg_",
|
|
37
|
+
"__SSpinContainer": "___SSpinContainer_1q19z_gg_",
|
|
38
|
+
"_headerHeight": "__headerHeight_1q19z_gg_",
|
|
39
|
+
"--headerHeight": "--headerHeight_1q19z",
|
|
40
|
+
"__SAccordionToggle": "___SAccordionToggle_1q19z_gg_",
|
|
41
|
+
"_expanded": "__expanded_1q19z_gg_",
|
|
42
|
+
"_use_primary": "_use_primary_1q19z_gg_",
|
|
43
|
+
"--data-aria-level": "--data-aria-level_1q19z",
|
|
44
|
+
"_use_secondary": "_use_secondary_1q19z_gg_"
|
|
45
|
+
})
|
|
46
|
+
);
|
|
47
|
+
var CellRoot = /* @__PURE__ */ function(_Component) {
|
|
48
|
+
_inherits(CellRoot2, _Component);
|
|
49
|
+
var _super = _createSuper(CellRoot2);
|
|
50
|
+
function CellRoot2() {
|
|
51
|
+
var _this;
|
|
52
|
+
_classCallCheck(this, CellRoot2);
|
|
53
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
54
|
+
args[_key] = arguments[_key];
|
|
55
|
+
}
|
|
56
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
57
|
+
_defineProperty(_assertThisInitialized(_this), "lockedCell", [null, false]);
|
|
58
|
+
_defineProperty(_assertThisInitialized(_this), "handleKeyDown", function(e) {
|
|
59
|
+
if (e.currentTarget === _this.lockedCell[0]) {
|
|
60
|
+
var focusableChildren = Array.from(_this.lockedCell[0].children).flatMap(function(node) {
|
|
61
|
+
return getFocusableIn(node);
|
|
62
|
+
});
|
|
63
|
+
if (_this.lockedCell[1]) {
|
|
64
|
+
if (e.key === "Escape") {
|
|
65
|
+
var _this$lockedCell$;
|
|
66
|
+
(_this$lockedCell$ = _this.lockedCell[0]) === null || _this$lockedCell$ === void 0 ? void 0 : _this$lockedCell$.focus();
|
|
67
|
+
_this.lockedCell[1] = false;
|
|
68
|
+
}
|
|
69
|
+
if (e.key.startsWith("Arrow")) {
|
|
70
|
+
e.stopPropagation();
|
|
71
|
+
e.preventDefault();
|
|
72
|
+
}
|
|
73
|
+
if (e.key === "Tab") {
|
|
74
|
+
if (e.target === focusableChildren[0] && e.shiftKey) {
|
|
75
|
+
var _focusableChildren;
|
|
76
|
+
(_focusableChildren = focusableChildren[focusableChildren.length - 1]) === null || _focusableChildren === void 0 ? void 0 : _focusableChildren.focus();
|
|
77
|
+
e.preventDefault();
|
|
78
|
+
} else if (e.target === focusableChildren[focusableChildren.length - 1] && !e.shiftKey) {
|
|
79
|
+
var _focusableChildren$;
|
|
80
|
+
(_focusableChildren$ = focusableChildren[0]) === null || _focusableChildren$ === void 0 ? void 0 : _focusableChildren$.focus();
|
|
81
|
+
e.preventDefault();
|
|
82
|
+
}
|
|
83
|
+
e.stopPropagation();
|
|
84
|
+
}
|
|
85
|
+
} else if (e.key === "Enter") {
|
|
86
|
+
var _focusableChildren$2;
|
|
87
|
+
e.preventDefault();
|
|
88
|
+
e.stopPropagation();
|
|
89
|
+
_this.lockedCell[1] = true;
|
|
90
|
+
(_focusableChildren$2 = focusableChildren[0]) === null || _focusableChildren$2 === void 0 ? void 0 : _focusableChildren$2.focus();
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
});
|
|
94
|
+
_defineProperty(_assertThisInitialized(_this), "onFocusCell", function(e) {
|
|
95
|
+
if (e.target === e.currentTarget && e.target.matches(":focus-visible")) {
|
|
96
|
+
var focusableChildren = Array.from(e.currentTarget.children).flatMap(function(node) {
|
|
97
|
+
return getFocusableIn(node);
|
|
98
|
+
});
|
|
99
|
+
if (focusableChildren.length === 1) {
|
|
100
|
+
focusableChildren[0].focus();
|
|
101
|
+
} else if (focusableChildren.length > 1) {
|
|
102
|
+
_this.lockedCell = [e.currentTarget, false];
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
return _this;
|
|
107
|
+
}
|
|
108
|
+
_createClass(CellRoot2, [{
|
|
109
|
+
key: "render",
|
|
110
|
+
value: function render() {
|
|
111
|
+
var _ref = this.asProps, _ref2;
|
|
112
|
+
var SCell = Flex;
|
|
113
|
+
var _this$asProps = this.asProps, Children = _this$asProps.Children, styles = _this$asProps.styles;
|
|
114
|
+
return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SCell, _ref2.cn("SCell", _objectSpread({}, assignProps({
|
|
115
|
+
"tabIndex": -1,
|
|
116
|
+
"innerOutline": true,
|
|
117
|
+
"onKeyDown": this.handleKeyDown,
|
|
118
|
+
"onFocus": this.onFocusCell
|
|
119
|
+
}, _ref))), /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})));
|
|
120
|
+
}
|
|
121
|
+
}]);
|
|
122
|
+
return CellRoot2;
|
|
123
|
+
}(Component);
|
|
124
|
+
_defineProperty(CellRoot, "displayName", "Cell");
|
|
125
|
+
_defineProperty(CellRoot, "style", style);
|
|
126
|
+
var Cell = createComponent(CellRoot);
|
|
127
|
+
export {
|
|
128
|
+
Cell
|
|
129
|
+
};
|