@pingux/astro 2.142.1-alpha.1 → 2.143.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/Card/Card.styles.d.ts +3 -0
- package/lib/cjs/components/Card/Card.styles.js +4 -1
- package/lib/cjs/components/TableBase/TableBase.d.ts +1 -7
- package/lib/cjs/components/TableBase/TableBase.js +96 -74
- package/lib/cjs/components/TableBase/TableBase.stories.js +45 -36
- package/lib/cjs/components/TableBase/TableBase.styles.d.ts +5 -7
- package/lib/cjs/components/TableBase/TableBase.styles.js +8 -3
- package/lib/cjs/components/TableBase/stories/NextGenTableBase.js +5 -2
- package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts +5 -0
- package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.js +6 -0
- package/lib/cjs/styles/themes/next-gen/next-gen.d.ts +32 -22
- package/lib/cjs/styles/themes/next-gen/variants/tableBase.d.ts +32 -22
- package/lib/cjs/styles/themes/next-gen/variants/tableBase.js +35 -23
- package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts +32 -22
- package/lib/cjs/types/tableBase.d.ts +4 -3
- package/lib/components/Card/Card.styles.js +4 -1
- package/lib/components/TableBase/TableBase.js +100 -72
- package/lib/components/TableBase/TableBase.stories.js +46 -37
- package/lib/components/TableBase/TableBase.styles.js +8 -3
- package/lib/components/TableBase/stories/NextGenTableBase.js +6 -3
- package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js +6 -0
- package/lib/styles/themes/next-gen/variants/tableBase.js +35 -23
- package/package.json +1 -1
@@ -6,6 +6,7 @@ _Object$defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
7
7
|
});
|
8
8
|
exports["default"] = void 0;
|
9
|
+
var _colors = require("../colors");
|
9
10
|
var _avatar = require("./avatar");
|
10
11
|
var _callout = _interopRequireDefault(require("./callout"));
|
11
12
|
var _footer = require("./footer");
|
@@ -198,6 +199,11 @@ var _default = {
|
|
198
199
|
caption: {
|
199
200
|
color: 'text.secondary'
|
200
201
|
},
|
202
|
+
thead: {
|
203
|
+
'&.is-sticky': {
|
204
|
+
boxShadow: "0 1px 0 ".concat(_colors.colors.border.base)
|
205
|
+
}
|
206
|
+
},
|
201
207
|
head: {
|
202
208
|
color: 'text.secondary'
|
203
209
|
},
|
@@ -4578,6 +4578,36 @@ declare const _default: {
|
|
4578
4578
|
};
|
4579
4579
|
};
|
4580
4580
|
tableBase: {
|
4581
|
+
container: {
|
4582
|
+
'& > thead > tr': {
|
4583
|
+
'& > th:first-of-type': {
|
4584
|
+
borderTopLeftRadius: string;
|
4585
|
+
};
|
4586
|
+
'& > th:last-of-type': {
|
4587
|
+
borderTopRightRadius: string;
|
4588
|
+
};
|
4589
|
+
};
|
4590
|
+
'& > tbody > tr:last-child': {
|
4591
|
+
borderBottom: string;
|
4592
|
+
borderBottomLeftRadius: string;
|
4593
|
+
borderBottomRightRadius: string;
|
4594
|
+
'& > td:first-of-type': {
|
4595
|
+
borderBottomLeftRadius: string;
|
4596
|
+
};
|
4597
|
+
'& > td:last-of-type': {
|
4598
|
+
borderBottomRightRadius: string;
|
4599
|
+
};
|
4600
|
+
};
|
4601
|
+
'&.has-caption > thead > tr:first-of-type > th': {
|
4602
|
+
borderRadius: string;
|
4603
|
+
};
|
4604
|
+
'&.has-pagination > tbody > tr:last-child': {
|
4605
|
+
borderRadius: number;
|
4606
|
+
'& > td': {
|
4607
|
+
borderRadius: number;
|
4608
|
+
};
|
4609
|
+
};
|
4610
|
+
};
|
4581
4611
|
caption: {
|
4582
4612
|
backgroundColor: string;
|
4583
4613
|
px: string;
|
@@ -4608,17 +4638,8 @@ declare const _default: {
|
|
4608
4638
|
thead: {
|
4609
4639
|
borderBottomColor: string;
|
4610
4640
|
backgroundColor: string;
|
4611
|
-
'
|
4612
|
-
|
4613
|
-
borderTopRightRadius: string;
|
4614
|
-
'& > tr:first-child': {
|
4615
|
-
'& > th:first-of-type': {
|
4616
|
-
borderTopLeftRadius: string;
|
4617
|
-
};
|
4618
|
-
'& > th:last-of-type': {
|
4619
|
-
borderTopRightRadius: string;
|
4620
|
-
};
|
4621
|
-
};
|
4641
|
+
'&.is-sticky': {
|
4642
|
+
boxShadow: string;
|
4622
4643
|
};
|
4623
4644
|
};
|
4624
4645
|
head: {
|
@@ -4640,17 +4661,6 @@ declare const _default: {
|
|
4640
4661
|
backgroundColor: string;
|
4641
4662
|
borderBottomLeftRadius: string;
|
4642
4663
|
borderBottomRightRadius: string;
|
4643
|
-
'& > tr:last-child': {
|
4644
|
-
borderBottom: string;
|
4645
|
-
borderBottomLeftRadius: string;
|
4646
|
-
borderBottomRightRadius: string;
|
4647
|
-
'& > td:first-of-type': {
|
4648
|
-
borderBottomLeftRadius: string;
|
4649
|
-
};
|
4650
|
-
'& > td:last-of-type': {
|
4651
|
-
borderBottomRightRadius: string;
|
4652
|
-
};
|
4653
|
-
};
|
4654
4664
|
};
|
4655
4665
|
data: {
|
4656
4666
|
py: string;
|
@@ -1,4 +1,34 @@
|
|
1
1
|
export declare const tableBase: {
|
2
|
+
container: {
|
3
|
+
'& > thead > tr': {
|
4
|
+
'& > th:first-of-type': {
|
5
|
+
borderTopLeftRadius: string;
|
6
|
+
};
|
7
|
+
'& > th:last-of-type': {
|
8
|
+
borderTopRightRadius: string;
|
9
|
+
};
|
10
|
+
};
|
11
|
+
'& > tbody > tr:last-child': {
|
12
|
+
borderBottom: string;
|
13
|
+
borderBottomLeftRadius: string;
|
14
|
+
borderBottomRightRadius: string;
|
15
|
+
'& > td:first-of-type': {
|
16
|
+
borderBottomLeftRadius: string;
|
17
|
+
};
|
18
|
+
'& > td:last-of-type': {
|
19
|
+
borderBottomRightRadius: string;
|
20
|
+
};
|
21
|
+
};
|
22
|
+
'&.has-caption > thead > tr:first-of-type > th': {
|
23
|
+
borderRadius: string;
|
24
|
+
};
|
25
|
+
'&.has-pagination > tbody > tr:last-child': {
|
26
|
+
borderRadius: number;
|
27
|
+
'& > td': {
|
28
|
+
borderRadius: number;
|
29
|
+
};
|
30
|
+
};
|
31
|
+
};
|
2
32
|
caption: {
|
3
33
|
backgroundColor: string;
|
4
34
|
px: string;
|
@@ -29,17 +59,8 @@ export declare const tableBase: {
|
|
29
59
|
thead: {
|
30
60
|
borderBottomColor: string;
|
31
61
|
backgroundColor: string;
|
32
|
-
'
|
33
|
-
|
34
|
-
borderTopRightRadius: string;
|
35
|
-
'& > tr:first-child': {
|
36
|
-
'& > th:first-of-type': {
|
37
|
-
borderTopLeftRadius: string;
|
38
|
-
};
|
39
|
-
'& > th:last-of-type': {
|
40
|
-
borderTopRightRadius: string;
|
41
|
-
};
|
42
|
-
};
|
62
|
+
'&.is-sticky': {
|
63
|
+
boxShadow: string;
|
43
64
|
};
|
44
65
|
};
|
45
66
|
head: {
|
@@ -61,17 +82,6 @@ export declare const tableBase: {
|
|
61
82
|
backgroundColor: string;
|
62
83
|
borderBottomLeftRadius: string;
|
63
84
|
borderBottomRightRadius: string;
|
64
|
-
'& > tr:last-child': {
|
65
|
-
borderBottom: string;
|
66
|
-
borderBottomLeftRadius: string;
|
67
|
-
borderBottomRightRadius: string;
|
68
|
-
'& > td:first-of-type': {
|
69
|
-
borderBottomLeftRadius: string;
|
70
|
-
};
|
71
|
-
'& > td:last-of-type': {
|
72
|
-
borderBottomRightRadius: string;
|
73
|
-
};
|
74
|
-
};
|
75
85
|
};
|
76
86
|
data: {
|
77
87
|
py: string;
|
@@ -14,6 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
|
|
14
14
|
});
|
15
15
|
exports.tableBase = void 0;
|
16
16
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
17
|
+
var _colors = _interopRequireDefault(require("../colors/colors"));
|
17
18
|
var _button = require("./button");
|
18
19
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
19
20
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
@@ -21,6 +22,36 @@ var borderRadius = '16px';
|
|
21
22
|
var defaultFocus = _objectSpread(_objectSpread({}, _button.defaultFocus), {}, {
|
22
23
|
outlineOffset: '-2px'
|
23
24
|
});
|
25
|
+
var container = {
|
26
|
+
'& > thead > tr': {
|
27
|
+
'& > th:first-of-type': {
|
28
|
+
borderTopLeftRadius: borderRadius
|
29
|
+
},
|
30
|
+
'& > th:last-of-type': {
|
31
|
+
borderTopRightRadius: borderRadius
|
32
|
+
}
|
33
|
+
},
|
34
|
+
'& > tbody > tr:last-child': {
|
35
|
+
borderBottom: 'unset',
|
36
|
+
borderBottomLeftRadius: borderRadius,
|
37
|
+
borderBottomRightRadius: borderRadius,
|
38
|
+
'& > td:first-of-type': {
|
39
|
+
borderBottomLeftRadius: borderRadius
|
40
|
+
},
|
41
|
+
'& > td:last-of-type': {
|
42
|
+
borderBottomRightRadius: borderRadius
|
43
|
+
}
|
44
|
+
},
|
45
|
+
'&.has-caption > thead > tr:first-of-type > th': {
|
46
|
+
borderRadius: '0'
|
47
|
+
},
|
48
|
+
'&.has-pagination > tbody > tr:last-child': {
|
49
|
+
borderRadius: 0,
|
50
|
+
'& > td': {
|
51
|
+
borderRadius: 0
|
52
|
+
}
|
53
|
+
}
|
54
|
+
};
|
24
55
|
var caption = {
|
25
56
|
backgroundColor: 'background.base',
|
26
57
|
px: 'lg',
|
@@ -47,17 +78,8 @@ var row = {
|
|
47
78
|
var thead = {
|
48
79
|
borderBottomColor: 'border.base',
|
49
80
|
backgroundColor: 'background.base',
|
50
|
-
'
|
51
|
-
|
52
|
-
borderTopRightRadius: borderRadius,
|
53
|
-
'& > tr:first-child': {
|
54
|
-
'& > th:first-of-type': {
|
55
|
-
borderTopLeftRadius: borderRadius
|
56
|
-
},
|
57
|
-
'& > th:last-of-type': {
|
58
|
-
borderTopRightRadius: borderRadius
|
59
|
-
}
|
60
|
-
}
|
81
|
+
'&.is-sticky': {
|
82
|
+
boxShadow: "0 1px 0 ".concat(_colors["default"].border.base)
|
61
83
|
}
|
62
84
|
};
|
63
85
|
var head = {
|
@@ -74,24 +96,14 @@ var tbody = {
|
|
74
96
|
borderBottom: 'unset',
|
75
97
|
backgroundColor: 'background.base',
|
76
98
|
borderBottomLeftRadius: borderRadius,
|
77
|
-
borderBottomRightRadius: borderRadius
|
78
|
-
'& > tr:last-child': {
|
79
|
-
borderBottom: 'unset',
|
80
|
-
borderBottomLeftRadius: borderRadius,
|
81
|
-
borderBottomRightRadius: borderRadius,
|
82
|
-
'& > td:first-of-type': {
|
83
|
-
borderBottomLeftRadius: borderRadius
|
84
|
-
},
|
85
|
-
'& > td:last-of-type': {
|
86
|
-
borderBottomRightRadius: borderRadius
|
87
|
-
}
|
88
|
-
}
|
99
|
+
borderBottomRightRadius: borderRadius
|
89
100
|
};
|
90
101
|
var data = _objectSpread(_objectSpread({}, head), {}, {
|
91
102
|
py: 'md',
|
92
103
|
fontWeight: '1'
|
93
104
|
});
|
94
105
|
var tableBase = {
|
106
|
+
container: container,
|
95
107
|
caption: caption,
|
96
108
|
row: row,
|
97
109
|
thead: thead,
|
@@ -1225,6 +1225,36 @@ declare const _default: {
|
|
1225
1225
|
};
|
1226
1226
|
};
|
1227
1227
|
tableBase: {
|
1228
|
+
container: {
|
1229
|
+
'& > thead > tr': {
|
1230
|
+
'& > th:first-of-type': {
|
1231
|
+
borderTopLeftRadius: string;
|
1232
|
+
};
|
1233
|
+
'& > th:last-of-type': {
|
1234
|
+
borderTopRightRadius: string;
|
1235
|
+
};
|
1236
|
+
};
|
1237
|
+
'& > tbody > tr:last-child': {
|
1238
|
+
borderBottom: string;
|
1239
|
+
borderBottomLeftRadius: string;
|
1240
|
+
borderBottomRightRadius: string;
|
1241
|
+
'& > td:first-of-type': {
|
1242
|
+
borderBottomLeftRadius: string;
|
1243
|
+
};
|
1244
|
+
'& > td:last-of-type': {
|
1245
|
+
borderBottomRightRadius: string;
|
1246
|
+
};
|
1247
|
+
};
|
1248
|
+
'&.has-caption > thead > tr:first-of-type > th': {
|
1249
|
+
borderRadius: string;
|
1250
|
+
};
|
1251
|
+
'&.has-pagination > tbody > tr:last-child': {
|
1252
|
+
borderRadius: number;
|
1253
|
+
'& > td': {
|
1254
|
+
borderRadius: number;
|
1255
|
+
};
|
1256
|
+
};
|
1257
|
+
};
|
1228
1258
|
caption: {
|
1229
1259
|
backgroundColor: string;
|
1230
1260
|
px: string;
|
@@ -1255,17 +1285,8 @@ declare const _default: {
|
|
1255
1285
|
thead: {
|
1256
1286
|
borderBottomColor: string;
|
1257
1287
|
backgroundColor: string;
|
1258
|
-
'
|
1259
|
-
|
1260
|
-
borderTopRightRadius: string;
|
1261
|
-
'& > tr:first-child': {
|
1262
|
-
'& > th:first-of-type': {
|
1263
|
-
borderTopLeftRadius: string;
|
1264
|
-
};
|
1265
|
-
'& > th:last-of-type': {
|
1266
|
-
borderTopRightRadius: string;
|
1267
|
-
};
|
1268
|
-
};
|
1288
|
+
'&.is-sticky': {
|
1289
|
+
boxShadow: string;
|
1269
1290
|
};
|
1270
1291
|
};
|
1271
1292
|
head: {
|
@@ -1287,17 +1308,6 @@ declare const _default: {
|
|
1287
1308
|
backgroundColor: string;
|
1288
1309
|
borderBottomLeftRadius: string;
|
1289
1310
|
borderBottomRightRadius: string;
|
1290
|
-
'& > tr:last-child': {
|
1291
|
-
borderBottom: string;
|
1292
|
-
borderBottomLeftRadius: string;
|
1293
|
-
borderBottomRightRadius: string;
|
1294
|
-
'& > td:first-of-type': {
|
1295
|
-
borderBottomLeftRadius: string;
|
1296
|
-
};
|
1297
|
-
'& > td:last-of-type': {
|
1298
|
-
borderBottomRightRadius: string;
|
1299
|
-
};
|
1300
|
-
};
|
1301
1311
|
};
|
1302
1312
|
data: {
|
1303
1313
|
py: string;
|
@@ -16,13 +16,11 @@ export interface TableBaseProps<T extends object> extends TableProps<T>, Omit<Ba
|
|
16
16
|
hasSelectionCheckboxes?: boolean;
|
17
17
|
'data-testid'?: string;
|
18
18
|
caption?: ReactNode | string;
|
19
|
-
tableBodyProps?: Record<string, unknown>;
|
20
19
|
isStickyHeader?: boolean;
|
21
20
|
}
|
22
21
|
export interface TableRowGroupProps extends BaseProp {
|
23
|
-
type: 'thead' | 'tbody'
|
22
|
+
type: 'thead' | 'tbody';
|
24
23
|
children: ReactNode;
|
25
|
-
hasCaption?: boolean;
|
26
24
|
isSticky?: boolean;
|
27
25
|
}
|
28
26
|
export interface TableHeaderRowProps<T> extends BaseProp {
|
@@ -59,3 +57,6 @@ export interface TableSelectAllCellProps<T> extends BaseProp {
|
|
59
57
|
state: TableState<T>;
|
60
58
|
layoutState: TableColumnResizeState<T>;
|
61
59
|
}
|
60
|
+
export interface TableCaptionProps {
|
61
|
+
caption: string | React.ReactNode;
|
62
|
+
}
|
@@ -87,7 +87,10 @@ var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
|
|
87
87
|
});
|
88
88
|
var tableWrapper = _objectSpread(_objectSpread({}, container), {}, {
|
89
89
|
padding: 0,
|
90
|
-
boxShadow: 'none'
|
90
|
+
boxShadow: 'none',
|
91
|
+
overflow: 'auto',
|
92
|
+
scrollPaddingTop: '50px',
|
93
|
+
scrollPaddingBottom: '20px'
|
91
94
|
});
|
92
95
|
export default {
|
93
96
|
container: container,
|