@digigov/react-core 2.1.2-govgr-4546.13-05-26-14-00 → 2.2.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/CHANGELOG.md +11 -2
- package/TableDataCell/index.d.ts +1 -0
- package/TableDataCell/index.js +6 -3
- package/index.js +1 -1
- package/package.json +3 -3
- package/registry.d.ts +4 -4
- package/registry.js +8 -8
- package/src/Table/__snapshots__/index.test.tsx.snap +70 -0
- package/src/Table/index.test.tsx +51 -2
- package/src/TableDataCell/__snapshots__/index.test.tsx.snap +28 -0
- package/src/TableDataCell/index.test.tsx +13 -0
- package/src/TableDataCell/index.tsx +24 -3
- package/src/registry.ts +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
# Change Log - @digigov/react-core
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
<!-- This log was last generated on Thu, 14 May 2026 13:49:43 GMT and should not be manually modified. -->
|
|
4
|
+
|
|
5
|
+
<!-- Start content -->
|
|
6
|
+
|
|
7
|
+
## 2.2.0
|
|
8
|
+
|
|
9
|
+
Thu, 14 May 2026 13:49:43 GMT
|
|
10
|
+
|
|
11
|
+
### Minor changes
|
|
12
|
+
|
|
13
|
+
- feat(TableDataCell): add maxWidthWithOverflow prop, new stories, updated tests (kbrani@admin.grnet.gr)
|
|
4
14
|
|
|
5
15
|
## 2.0.8
|
|
6
16
|
Wed, 11 Feb 2026 14:46:37 GMT
|
|
@@ -701,4 +711,3 @@ Fri, 05 Nov 2021 12:24:20 GMT
|
|
|
701
711
|
### Minor changes
|
|
702
712
|
|
|
703
713
|
- test and adjust core components
|
|
704
|
-
|
package/TableDataCell/index.d.ts
CHANGED
|
@@ -32,6 +32,7 @@ export interface TableDataCellProps extends BaseProps<'td'> {
|
|
|
32
32
|
*/
|
|
33
33
|
highlight?: 'warning' | 'error';
|
|
34
34
|
highlightAssistiveText?: string;
|
|
35
|
+
maxWidthWithOverflow?: boolean;
|
|
35
36
|
}
|
|
36
37
|
/**
|
|
37
38
|
* Use TableDataCell inside the Table component to fill the data of a cell in a table.
|
package/TableDataCell/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import react from "react";
|
|
|
2
2
|
import clsx from "clsx";
|
|
3
3
|
import Base from "../Base/index.js";
|
|
4
4
|
import VisuallyHidden from "../VisuallyHidden/index.js";
|
|
5
|
-
const TableDataCell_TableDataCell = /*#__PURE__*/ react.forwardRef(function({ dataType = 'text', variant = 'border', wordBreak = 'none', highlight, highlightAssistiveText, className, children, ...props }, ref) {
|
|
5
|
+
const TableDataCell_TableDataCell = /*#__PURE__*/ react.forwardRef(function({ dataType = 'text', variant = 'border', wordBreak = 'none', highlight, highlightAssistiveText, maxWidthWithOverflow = false, className, children, ...props }, ref) {
|
|
6
6
|
const calculatedHighlightAssistiveText = highlightAssistiveText || ('warning' === highlight ? 'Προσοχή' : 'error' === highlight ? 'Λανθασμένο πεδίο' : void 0);
|
|
7
7
|
return /*#__PURE__*/ react.createElement(Base, {
|
|
8
8
|
as: "td",
|
|
@@ -13,10 +13,13 @@ const TableDataCell_TableDataCell = /*#__PURE__*/ react.forwardRef(function({ da
|
|
|
13
13
|
'ds-table__cell--break-all': 'break-all' === wordBreak,
|
|
14
14
|
'ds-table__cell--numeric': 'numeric' === dataType,
|
|
15
15
|
'ds-table__cell--warning': 'warning' === highlight,
|
|
16
|
-
'ds-table__cell--error': 'error' === highlight
|
|
16
|
+
'ds-table__cell--error': 'error' === highlight,
|
|
17
|
+
'ds-table__cell--max-w': true === maxWidthWithOverflow
|
|
17
18
|
}),
|
|
18
19
|
...props
|
|
19
|
-
},
|
|
20
|
+
}, maxWidthWithOverflow ? /*#__PURE__*/ react.createElement("div", {
|
|
21
|
+
className: "ds-table__cell__content"
|
|
22
|
+
}, calculatedHighlightAssistiveText && /*#__PURE__*/ react.createElement(VisuallyHidden, null, calculatedHighlightAssistiveText), children) : /*#__PURE__*/ react.createElement(react.Fragment, null, calculatedHighlightAssistiveText && /*#__PURE__*/ react.createElement(VisuallyHidden, null, calculatedHighlightAssistiveText), children));
|
|
20
23
|
});
|
|
21
24
|
const src_TableDataCell = TableDataCell_TableDataCell;
|
|
22
25
|
export { TableDataCell_TableDataCell as TableDataCell, src_TableDataCell as default };
|
package/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digigov/react-core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"description": "@digigov react core components",
|
|
5
5
|
"author": "GRNET Developers <devs@lists.grnet.gr>",
|
|
6
6
|
"license": "BSD-2-Clause",
|
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
"react-native-svg": "^15.2.0",
|
|
18
18
|
"expo-router": "^3.5.14",
|
|
19
19
|
"nativewind": "^4.1.1",
|
|
20
|
-
"@digigov/css": "2.
|
|
21
|
-
"@digigov/react-icons": "2.
|
|
20
|
+
"@digigov/css": "2.2.0",
|
|
21
|
+
"@digigov/react-icons": "2.2.0"
|
|
22
22
|
},
|
|
23
23
|
"peerDependenciesMeta": {
|
|
24
24
|
"react-native": {
|
package/registry.d.ts
CHANGED
|
@@ -14,26 +14,26 @@ declare const _default: {
|
|
|
14
14
|
'@digigov/react-core/AdminHeaderContent': {};
|
|
15
15
|
'@digigov/react-core/AdminLayout': {};
|
|
16
16
|
'@digigov/react-core/AdminMain': {};
|
|
17
|
-
'@digigov/react-core/AdminTopSection': {};
|
|
18
17
|
'@digigov/react-core/Aside': {};
|
|
18
|
+
'@digigov/react-core/AdminTopSection': {};
|
|
19
19
|
'@digigov/react-core/AutoCompleteAssistiveHint': {};
|
|
20
|
-
'@digigov/react-core/AutoCompleteContainer': {};
|
|
21
20
|
'@digigov/react-core/AutoCompleteInputBase': {};
|
|
21
|
+
'@digigov/react-core/AutoCompleteContainer': {};
|
|
22
22
|
'@digigov/react-core/AutoCompleteMultipleInput': {};
|
|
23
23
|
'@digigov/react-core/AutoCompleteMultipleInputContainer': {};
|
|
24
24
|
'@digigov/react-core/AutoCompleteResultList': {};
|
|
25
25
|
'@digigov/react-core/AutoCompleteResultListItem': {};
|
|
26
26
|
'@digigov/react-core/AutoCompleteStatus': {};
|
|
27
27
|
'@digigov/react-core/AutoCompleteStatusContainer': {};
|
|
28
|
-
'@digigov/react-core/BackToTopContainer': {};
|
|
29
28
|
'@digigov/react-core/BackLinkBase': {};
|
|
29
|
+
'@digigov/react-core/BackToTopContainer': {};
|
|
30
30
|
'@digigov/react-core/BackToTopLimit': {};
|
|
31
31
|
'@digigov/react-core/BackToTopLink': {};
|
|
32
32
|
'@digigov/react-core/BannerContainer': {};
|
|
33
|
-
'@digigov/react-core/Blockquote': {};
|
|
34
33
|
'@digigov/react-core/Base': {};
|
|
35
34
|
'@digigov/react-core/Base/index.web': {};
|
|
36
35
|
'@digigov/react-core/Base/utils': {};
|
|
36
|
+
'@digigov/react-core/Blockquote': {};
|
|
37
37
|
'@digigov/react-core/Bottom': {};
|
|
38
38
|
'@digigov/react-core/BottomInfo': {};
|
|
39
39
|
'@digigov/react-core/BottomInfoContainer': {};
|
package/registry.js
CHANGED
|
@@ -13,26 +13,26 @@ import * as __WEBPACK_EXTERNAL_MODULE__AdminHeader_index_js_b73c276d__ from "./A
|
|
|
13
13
|
import * as __WEBPACK_EXTERNAL_MODULE__AdminHeaderContent_index_js_622fcf4b__ from "./AdminHeaderContent/index.js";
|
|
14
14
|
import * as __WEBPACK_EXTERNAL_MODULE__AdminLayout_index_js_ffb21cc1__ from "./AdminLayout/index.js";
|
|
15
15
|
import * as __WEBPACK_EXTERNAL_MODULE__AdminMain_index_js_dbf027ab__ from "./AdminMain/index.js";
|
|
16
|
-
import * as __WEBPACK_EXTERNAL_MODULE__AdminTopSection_index_js_e05fc66d__ from "./AdminTopSection/index.js";
|
|
17
16
|
import * as __WEBPACK_EXTERNAL_MODULE__Aside_index_js_3c9c3129__ from "./Aside/index.js";
|
|
17
|
+
import * as __WEBPACK_EXTERNAL_MODULE__AdminTopSection_index_js_e05fc66d__ from "./AdminTopSection/index.js";
|
|
18
18
|
import * as __WEBPACK_EXTERNAL_MODULE__AutoCompleteAssistiveHint_index_js_4bdf4eb4__ from "./AutoCompleteAssistiveHint/index.js";
|
|
19
|
-
import * as __WEBPACK_EXTERNAL_MODULE__AutoCompleteContainer_index_js_0a4eabc6__ from "./AutoCompleteContainer/index.js";
|
|
20
19
|
import * as __WEBPACK_EXTERNAL_MODULE__AutoCompleteInputBase_index_js_a8a91daa__ from "./AutoCompleteInputBase/index.js";
|
|
20
|
+
import * as __WEBPACK_EXTERNAL_MODULE__AutoCompleteContainer_index_js_0a4eabc6__ from "./AutoCompleteContainer/index.js";
|
|
21
21
|
import * as __WEBPACK_EXTERNAL_MODULE__AutoCompleteMultipleInput_index_js_2d007a9f__ from "./AutoCompleteMultipleInput/index.js";
|
|
22
22
|
import * as __WEBPACK_EXTERNAL_MODULE__AutoCompleteMultipleInputContainer_index_js_21cb6c3b__ from "./AutoCompleteMultipleInputContainer/index.js";
|
|
23
23
|
import * as __WEBPACK_EXTERNAL_MODULE__AutoCompleteResultList_index_js_a3f3ae52__ from "./AutoCompleteResultList/index.js";
|
|
24
24
|
import * as __WEBPACK_EXTERNAL_MODULE__AutoCompleteResultListItem_index_js_5791371a__ from "./AutoCompleteResultListItem/index.js";
|
|
25
25
|
import * as __WEBPACK_EXTERNAL_MODULE__AutoCompleteStatus_index_js_b4a797bb__ from "./AutoCompleteStatus/index.js";
|
|
26
26
|
import * as __WEBPACK_EXTERNAL_MODULE__AutoCompleteStatusContainer_index_js_0557363b__ from "./AutoCompleteStatusContainer/index.js";
|
|
27
|
-
import * as __WEBPACK_EXTERNAL_MODULE__BackToTopContainer_index_js_642ad67f__ from "./BackToTopContainer/index.js";
|
|
28
27
|
import * as __WEBPACK_EXTERNAL_MODULE__BackLinkBase_index_js_8872906a__ from "./BackLinkBase/index.js";
|
|
28
|
+
import * as __WEBPACK_EXTERNAL_MODULE__BackToTopContainer_index_js_642ad67f__ from "./BackToTopContainer/index.js";
|
|
29
29
|
import * as __WEBPACK_EXTERNAL_MODULE__BackToTopLimit_index_js_2e2b66c4__ from "./BackToTopLimit/index.js";
|
|
30
30
|
import * as __WEBPACK_EXTERNAL_MODULE__BackToTopLink_index_js_c32b8f4e__ from "./BackToTopLink/index.js";
|
|
31
31
|
import * as __WEBPACK_EXTERNAL_MODULE__BannerContainer_index_js_39907ea4__ from "./BannerContainer/index.js";
|
|
32
|
-
import * as __WEBPACK_EXTERNAL_MODULE__Blockquote_index_js_9f9375e2__ from "./Blockquote/index.js";
|
|
33
32
|
import * as __WEBPACK_EXTERNAL_MODULE__Base_index_js_36312f72__ from "./Base/index.js";
|
|
34
33
|
import * as __WEBPACK_EXTERNAL_MODULE__Base_index_web_js_720b25e8__ from "./Base/index.web.js";
|
|
35
34
|
import * as __WEBPACK_EXTERNAL_MODULE__Base_utils_js_33caa975__ from "./Base/utils.js";
|
|
35
|
+
import * as __WEBPACK_EXTERNAL_MODULE__Blockquote_index_js_9f9375e2__ from "./Blockquote/index.js";
|
|
36
36
|
import * as __WEBPACK_EXTERNAL_MODULE__Bottom_index_js_75736bbf__ from "./Bottom/index.js";
|
|
37
37
|
import * as __WEBPACK_EXTERNAL_MODULE__BottomInfo_index_js_72d9481e__ from "./BottomInfo/index.js";
|
|
38
38
|
import * as __WEBPACK_EXTERNAL_MODULE__BottomInfoContainer_index_js_692b8134__ from "./BottomInfoContainer/index.js";
|
|
@@ -287,26 +287,26 @@ const registry = {
|
|
|
287
287
|
'@digigov/react-core/AdminHeaderContent': lazyImport(__WEBPACK_EXTERNAL_MODULE__AdminHeaderContent_index_js_622fcf4b__),
|
|
288
288
|
'@digigov/react-core/AdminLayout': lazyImport(__WEBPACK_EXTERNAL_MODULE__AdminLayout_index_js_ffb21cc1__),
|
|
289
289
|
'@digigov/react-core/AdminMain': lazyImport(__WEBPACK_EXTERNAL_MODULE__AdminMain_index_js_dbf027ab__),
|
|
290
|
-
'@digigov/react-core/AdminTopSection': lazyImport(__WEBPACK_EXTERNAL_MODULE__AdminTopSection_index_js_e05fc66d__),
|
|
291
290
|
'@digigov/react-core/Aside': lazyImport(__WEBPACK_EXTERNAL_MODULE__Aside_index_js_3c9c3129__),
|
|
291
|
+
'@digigov/react-core/AdminTopSection': lazyImport(__WEBPACK_EXTERNAL_MODULE__AdminTopSection_index_js_e05fc66d__),
|
|
292
292
|
'@digigov/react-core/AutoCompleteAssistiveHint': lazyImport(__WEBPACK_EXTERNAL_MODULE__AutoCompleteAssistiveHint_index_js_4bdf4eb4__),
|
|
293
|
-
'@digigov/react-core/AutoCompleteContainer': lazyImport(__WEBPACK_EXTERNAL_MODULE__AutoCompleteContainer_index_js_0a4eabc6__),
|
|
294
293
|
'@digigov/react-core/AutoCompleteInputBase': lazyImport(__WEBPACK_EXTERNAL_MODULE__AutoCompleteInputBase_index_js_a8a91daa__),
|
|
294
|
+
'@digigov/react-core/AutoCompleteContainer': lazyImport(__WEBPACK_EXTERNAL_MODULE__AutoCompleteContainer_index_js_0a4eabc6__),
|
|
295
295
|
'@digigov/react-core/AutoCompleteMultipleInput': lazyImport(__WEBPACK_EXTERNAL_MODULE__AutoCompleteMultipleInput_index_js_2d007a9f__),
|
|
296
296
|
'@digigov/react-core/AutoCompleteMultipleInputContainer': lazyImport(__WEBPACK_EXTERNAL_MODULE__AutoCompleteMultipleInputContainer_index_js_21cb6c3b__),
|
|
297
297
|
'@digigov/react-core/AutoCompleteResultList': lazyImport(__WEBPACK_EXTERNAL_MODULE__AutoCompleteResultList_index_js_a3f3ae52__),
|
|
298
298
|
'@digigov/react-core/AutoCompleteResultListItem': lazyImport(__WEBPACK_EXTERNAL_MODULE__AutoCompleteResultListItem_index_js_5791371a__),
|
|
299
299
|
'@digigov/react-core/AutoCompleteStatus': lazyImport(__WEBPACK_EXTERNAL_MODULE__AutoCompleteStatus_index_js_b4a797bb__),
|
|
300
300
|
'@digigov/react-core/AutoCompleteStatusContainer': lazyImport(__WEBPACK_EXTERNAL_MODULE__AutoCompleteStatusContainer_index_js_0557363b__),
|
|
301
|
-
'@digigov/react-core/BackToTopContainer': lazyImport(__WEBPACK_EXTERNAL_MODULE__BackToTopContainer_index_js_642ad67f__),
|
|
302
301
|
'@digigov/react-core/BackLinkBase': lazyImport(__WEBPACK_EXTERNAL_MODULE__BackLinkBase_index_js_8872906a__),
|
|
302
|
+
'@digigov/react-core/BackToTopContainer': lazyImport(__WEBPACK_EXTERNAL_MODULE__BackToTopContainer_index_js_642ad67f__),
|
|
303
303
|
'@digigov/react-core/BackToTopLimit': lazyImport(__WEBPACK_EXTERNAL_MODULE__BackToTopLimit_index_js_2e2b66c4__),
|
|
304
304
|
'@digigov/react-core/BackToTopLink': lazyImport(__WEBPACK_EXTERNAL_MODULE__BackToTopLink_index_js_c32b8f4e__),
|
|
305
305
|
'@digigov/react-core/BannerContainer': lazyImport(__WEBPACK_EXTERNAL_MODULE__BannerContainer_index_js_39907ea4__),
|
|
306
|
-
'@digigov/react-core/Blockquote': lazyImport(__WEBPACK_EXTERNAL_MODULE__Blockquote_index_js_9f9375e2__),
|
|
307
306
|
'@digigov/react-core/Base': lazyImport(__WEBPACK_EXTERNAL_MODULE__Base_index_js_36312f72__),
|
|
308
307
|
'@digigov/react-core/Base/index.web': lazyImport(__WEBPACK_EXTERNAL_MODULE__Base_index_web_js_720b25e8__),
|
|
309
308
|
'@digigov/react-core/Base/utils': lazyImport(__WEBPACK_EXTERNAL_MODULE__Base_utils_js_33caa975__),
|
|
309
|
+
'@digigov/react-core/Blockquote': lazyImport(__WEBPACK_EXTERNAL_MODULE__Blockquote_index_js_9f9375e2__),
|
|
310
310
|
'@digigov/react-core/Bottom': lazyImport(__WEBPACK_EXTERNAL_MODULE__Bottom_index_js_75736bbf__),
|
|
311
311
|
'@digigov/react-core/BottomInfo': lazyImport(__WEBPACK_EXTERNAL_MODULE__BottomInfo_index_js_72d9481e__),
|
|
312
312
|
'@digigov/react-core/BottomInfoContainer': lazyImport(__WEBPACK_EXTERNAL_MODULE__BottomInfoContainer_index_js_692b8134__),
|
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
2
2
|
|
|
3
|
+
exports[`renders the Table with always stacked prop 1`] = `
|
|
4
|
+
<body>
|
|
5
|
+
<div>
|
|
6
|
+
<table
|
|
7
|
+
class="ds-table ds-table--stacked-always"
|
|
8
|
+
>
|
|
9
|
+
<tbody
|
|
10
|
+
class="ds-table__body"
|
|
11
|
+
/>
|
|
12
|
+
</table>
|
|
13
|
+
</div>
|
|
14
|
+
</body>
|
|
15
|
+
`;
|
|
16
|
+
|
|
3
17
|
exports[`renders the Table with dark headerVariant prop 1`] = `
|
|
4
18
|
<body>
|
|
5
19
|
<div>
|
|
@@ -14,6 +28,20 @@ exports[`renders the Table with dark headerVariant prop 1`] = `
|
|
|
14
28
|
</body>
|
|
15
29
|
`;
|
|
16
30
|
|
|
31
|
+
exports[`renders the Table with dense prop 1`] = `
|
|
32
|
+
<body>
|
|
33
|
+
<div>
|
|
34
|
+
<table
|
|
35
|
+
class="ds-table ds-table--dense"
|
|
36
|
+
>
|
|
37
|
+
<tbody
|
|
38
|
+
class="ds-table__body"
|
|
39
|
+
/>
|
|
40
|
+
</table>
|
|
41
|
+
</div>
|
|
42
|
+
</body>
|
|
43
|
+
`;
|
|
44
|
+
|
|
17
45
|
exports[`renders the Table with light headerVariant prop 1`] = `
|
|
18
46
|
<body>
|
|
19
47
|
<div>
|
|
@@ -28,6 +56,34 @@ exports[`renders the Table with light headerVariant prop 1`] = `
|
|
|
28
56
|
</body>
|
|
29
57
|
`;
|
|
30
58
|
|
|
59
|
+
exports[`renders the Table with md stacked prop 1`] = `
|
|
60
|
+
<body>
|
|
61
|
+
<div>
|
|
62
|
+
<table
|
|
63
|
+
class="ds-table ds-table--stacked-md"
|
|
64
|
+
>
|
|
65
|
+
<tbody
|
|
66
|
+
class="ds-table__body"
|
|
67
|
+
/>
|
|
68
|
+
</table>
|
|
69
|
+
</div>
|
|
70
|
+
</body>
|
|
71
|
+
`;
|
|
72
|
+
|
|
73
|
+
exports[`renders the Table with middle vertical align prop 1`] = `
|
|
74
|
+
<body>
|
|
75
|
+
<div>
|
|
76
|
+
<table
|
|
77
|
+
class="ds-table"
|
|
78
|
+
>
|
|
79
|
+
<tbody
|
|
80
|
+
class="ds-table__body"
|
|
81
|
+
/>
|
|
82
|
+
</table>
|
|
83
|
+
</div>
|
|
84
|
+
</body>
|
|
85
|
+
`;
|
|
86
|
+
|
|
31
87
|
exports[`renders the Table with no props 1`] = `
|
|
32
88
|
<body>
|
|
33
89
|
<div>
|
|
@@ -42,6 +98,20 @@ exports[`renders the Table with no props 1`] = `
|
|
|
42
98
|
</body>
|
|
43
99
|
`;
|
|
44
100
|
|
|
101
|
+
exports[`renders the Table with top vertical align prop 1`] = `
|
|
102
|
+
<body>
|
|
103
|
+
<div>
|
|
104
|
+
<table
|
|
105
|
+
class="ds-table ds-table--align-top"
|
|
106
|
+
>
|
|
107
|
+
<tbody
|
|
108
|
+
class="ds-table__body"
|
|
109
|
+
/>
|
|
110
|
+
</table>
|
|
111
|
+
</div>
|
|
112
|
+
</body>
|
|
113
|
+
`;
|
|
114
|
+
|
|
45
115
|
exports[`renders the Table with verticalBorders prop 1`] = `
|
|
46
116
|
<body>
|
|
47
117
|
<div>
|
package/src/Table/index.test.tsx
CHANGED
|
@@ -34,10 +34,10 @@ it('renders the Table with light headerVariant prop', () => {
|
|
|
34
34
|
).toMatchSnapshot();
|
|
35
35
|
});
|
|
36
36
|
|
|
37
|
-
it('renders the Table with
|
|
37
|
+
it('renders the Table with dense prop', () => {
|
|
38
38
|
expect(
|
|
39
39
|
render(
|
|
40
|
-
<Table
|
|
40
|
+
<Table dense>
|
|
41
41
|
<TableBody></TableBody>
|
|
42
42
|
</Table>
|
|
43
43
|
).baseElement
|
|
@@ -53,3 +53,52 @@ it('renders the Table with verticalBorders prop', () => {
|
|
|
53
53
|
).baseElement
|
|
54
54
|
).toMatchSnapshot();
|
|
55
55
|
});
|
|
56
|
+
it('renders the Table with always stacked prop', () => {
|
|
57
|
+
expect(
|
|
58
|
+
render(
|
|
59
|
+
<Table stacked="always">
|
|
60
|
+
<TableBody></TableBody>
|
|
61
|
+
</Table>
|
|
62
|
+
).baseElement
|
|
63
|
+
).toMatchSnapshot();
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
it('renders the Table with md stacked prop', () => {
|
|
67
|
+
expect(
|
|
68
|
+
render(
|
|
69
|
+
<Table stacked="md">
|
|
70
|
+
<TableBody></TableBody>
|
|
71
|
+
</Table>
|
|
72
|
+
).baseElement
|
|
73
|
+
).toMatchSnapshot();
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
it('renders the Table with zebra prop', () => {
|
|
77
|
+
expect(
|
|
78
|
+
render(
|
|
79
|
+
<Table variant="zebra">
|
|
80
|
+
<TableBody></TableBody>
|
|
81
|
+
</Table>
|
|
82
|
+
).baseElement
|
|
83
|
+
).toMatchSnapshot();
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
it('renders the Table with top vertical align prop', () => {
|
|
87
|
+
expect(
|
|
88
|
+
render(
|
|
89
|
+
<Table verticalAlign="top">
|
|
90
|
+
<TableBody></TableBody>
|
|
91
|
+
</Table>
|
|
92
|
+
).baseElement
|
|
93
|
+
).toMatchSnapshot();
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
it('renders the Table with middle vertical align prop', () => {
|
|
97
|
+
expect(
|
|
98
|
+
render(
|
|
99
|
+
<Table verticalAlign="middle">
|
|
100
|
+
<TableBody></TableBody>
|
|
101
|
+
</Table>
|
|
102
|
+
).baseElement
|
|
103
|
+
).toMatchSnapshot();
|
|
104
|
+
});
|
|
@@ -53,6 +53,34 @@ exports[`renders the Table with highlight warning prop 1`] = `
|
|
|
53
53
|
</body>
|
|
54
54
|
`;
|
|
55
55
|
|
|
56
|
+
exports[`renders the Table with maxWidthWithOverflow prop 1`] = `
|
|
57
|
+
<body>
|
|
58
|
+
<div>
|
|
59
|
+
<table
|
|
60
|
+
class="ds-table"
|
|
61
|
+
>
|
|
62
|
+
<tbody
|
|
63
|
+
class="ds-table__body"
|
|
64
|
+
>
|
|
65
|
+
<tr
|
|
66
|
+
class="ds-table__row"
|
|
67
|
+
>
|
|
68
|
+
<td
|
|
69
|
+
class="ds-table__cell ds-table__cell--border ds-table__cell--max-w"
|
|
70
|
+
>
|
|
71
|
+
<div
|
|
72
|
+
class="ds-table__cell__content"
|
|
73
|
+
>
|
|
74
|
+
hello
|
|
75
|
+
</div>
|
|
76
|
+
</td>
|
|
77
|
+
</tr>
|
|
78
|
+
</tbody>
|
|
79
|
+
</table>
|
|
80
|
+
</div>
|
|
81
|
+
</body>
|
|
82
|
+
`;
|
|
83
|
+
|
|
56
84
|
exports[`renders the Table with no props 1`] = `
|
|
57
85
|
<body>
|
|
58
86
|
<div>
|
|
@@ -75,3 +75,16 @@ it('renders the Table with highlight warning prop', () => {
|
|
|
75
75
|
).baseElement
|
|
76
76
|
).toMatchSnapshot();
|
|
77
77
|
});
|
|
78
|
+
it('renders the Table with maxWidthWithOverflow prop', () => {
|
|
79
|
+
expect(
|
|
80
|
+
render(
|
|
81
|
+
<Table>
|
|
82
|
+
<TableBody>
|
|
83
|
+
<TableRow>
|
|
84
|
+
<TableDataCell maxWidthWithOverflow={true}>hello</TableDataCell>
|
|
85
|
+
</TableRow>
|
|
86
|
+
</TableBody>
|
|
87
|
+
</Table>
|
|
88
|
+
).baseElement
|
|
89
|
+
).toMatchSnapshot();
|
|
90
|
+
});
|
|
@@ -44,6 +44,14 @@ export interface TableDataCellProps extends BaseProps<'td'> {
|
|
|
44
44
|
* @default undefined
|
|
45
45
|
*/
|
|
46
46
|
highlightAssistiveText?: string;
|
|
47
|
+
|
|
48
|
+
/*
|
|
49
|
+
* maxWidthWithOverflow is optional.
|
|
50
|
+
* Use this prop to set max-width of the cell and allow overflow when the content is too long.
|
|
51
|
+
* This is used in combination with the TableFloatingScroll component to allow horizontal scrolling of the table when there are cells with long content.
|
|
52
|
+
* @default false
|
|
53
|
+
*/
|
|
54
|
+
maxWidthWithOverflow?: boolean;
|
|
47
55
|
}
|
|
48
56
|
/**
|
|
49
57
|
* Use TableDataCell inside the Table component to fill the data of a cell in a table.
|
|
@@ -58,6 +66,7 @@ export const TableDataCell = React.forwardRef<
|
|
|
58
66
|
wordBreak = 'none',
|
|
59
67
|
highlight,
|
|
60
68
|
highlightAssistiveText,
|
|
69
|
+
maxWidthWithOverflow = false,
|
|
61
70
|
className,
|
|
62
71
|
children,
|
|
63
72
|
...props
|
|
@@ -83,13 +92,25 @@ export const TableDataCell = React.forwardRef<
|
|
|
83
92
|
'ds-table__cell--numeric': dataType === 'numeric',
|
|
84
93
|
'ds-table__cell--warning': highlight === 'warning',
|
|
85
94
|
'ds-table__cell--error': highlight === 'error',
|
|
95
|
+
'ds-table__cell--max-w': maxWidthWithOverflow === true,
|
|
86
96
|
})}
|
|
87
97
|
{...props}
|
|
88
98
|
>
|
|
89
|
-
{
|
|
90
|
-
<
|
|
99
|
+
{maxWidthWithOverflow ? (
|
|
100
|
+
<div className="ds-table__cell__content">
|
|
101
|
+
{calculatedHighlightAssistiveText && (
|
|
102
|
+
<VisuallyHidden>{calculatedHighlightAssistiveText}</VisuallyHidden>
|
|
103
|
+
)}
|
|
104
|
+
{children}
|
|
105
|
+
</div>
|
|
106
|
+
) : (
|
|
107
|
+
<>
|
|
108
|
+
{calculatedHighlightAssistiveText && (
|
|
109
|
+
<VisuallyHidden>{calculatedHighlightAssistiveText}</VisuallyHidden>
|
|
110
|
+
)}
|
|
111
|
+
{children}
|
|
112
|
+
</>
|
|
91
113
|
)}
|
|
92
|
-
{children}
|
|
93
114
|
</Base>
|
|
94
115
|
);
|
|
95
116
|
});
|
package/src/registry.ts
CHANGED
|
@@ -14,26 +14,26 @@ import * as _digigov_react_core_AdminHeader from "@digigov/react-core/AdminHeade
|
|
|
14
14
|
import * as _digigov_react_core_AdminHeaderContent from "@digigov/react-core/AdminHeaderContent";
|
|
15
15
|
import * as _digigov_react_core_AdminLayout from "@digigov/react-core/AdminLayout";
|
|
16
16
|
import * as _digigov_react_core_AdminMain from "@digigov/react-core/AdminMain";
|
|
17
|
-
import * as _digigov_react_core_AdminTopSection from "@digigov/react-core/AdminTopSection";
|
|
18
17
|
import * as _digigov_react_core_Aside from "@digigov/react-core/Aside";
|
|
18
|
+
import * as _digigov_react_core_AdminTopSection from "@digigov/react-core/AdminTopSection";
|
|
19
19
|
import * as _digigov_react_core_AutoCompleteAssistiveHint from "@digigov/react-core/AutoCompleteAssistiveHint";
|
|
20
|
-
import * as _digigov_react_core_AutoCompleteContainer from "@digigov/react-core/AutoCompleteContainer";
|
|
21
20
|
import * as _digigov_react_core_AutoCompleteInputBase from "@digigov/react-core/AutoCompleteInputBase";
|
|
21
|
+
import * as _digigov_react_core_AutoCompleteContainer from "@digigov/react-core/AutoCompleteContainer";
|
|
22
22
|
import * as _digigov_react_core_AutoCompleteMultipleInput from "@digigov/react-core/AutoCompleteMultipleInput";
|
|
23
23
|
import * as _digigov_react_core_AutoCompleteMultipleInputContainer from "@digigov/react-core/AutoCompleteMultipleInputContainer";
|
|
24
24
|
import * as _digigov_react_core_AutoCompleteResultList from "@digigov/react-core/AutoCompleteResultList";
|
|
25
25
|
import * as _digigov_react_core_AutoCompleteResultListItem from "@digigov/react-core/AutoCompleteResultListItem";
|
|
26
26
|
import * as _digigov_react_core_AutoCompleteStatus from "@digigov/react-core/AutoCompleteStatus";
|
|
27
27
|
import * as _digigov_react_core_AutoCompleteStatusContainer from "@digigov/react-core/AutoCompleteStatusContainer";
|
|
28
|
-
import * as _digigov_react_core_BackToTopContainer from "@digigov/react-core/BackToTopContainer";
|
|
29
28
|
import * as _digigov_react_core_BackLinkBase from "@digigov/react-core/BackLinkBase";
|
|
29
|
+
import * as _digigov_react_core_BackToTopContainer from "@digigov/react-core/BackToTopContainer";
|
|
30
30
|
import * as _digigov_react_core_BackToTopLimit from "@digigov/react-core/BackToTopLimit";
|
|
31
31
|
import * as _digigov_react_core_BackToTopLink from "@digigov/react-core/BackToTopLink";
|
|
32
32
|
import * as _digigov_react_core_BannerContainer from "@digigov/react-core/BannerContainer";
|
|
33
|
-
import * as _digigov_react_core_Blockquote from "@digigov/react-core/Blockquote";
|
|
34
33
|
import * as _digigov_react_core_Base from "@digigov/react-core/Base";
|
|
35
34
|
import * as _digigov_react_core_Base_index_web from "@digigov/react-core/Base/index.web";
|
|
36
35
|
import * as _digigov_react_core_Base_utils from "@digigov/react-core/Base/utils";
|
|
36
|
+
import * as _digigov_react_core_Blockquote from "@digigov/react-core/Blockquote";
|
|
37
37
|
import * as _digigov_react_core_Bottom from "@digigov/react-core/Bottom";
|
|
38
38
|
import * as _digigov_react_core_BottomInfo from "@digigov/react-core/BottomInfo";
|
|
39
39
|
import * as _digigov_react_core_BottomInfoContainer from "@digigov/react-core/BottomInfoContainer";
|
|
@@ -297,26 +297,26 @@ export default {
|
|
|
297
297
|
'@digigov/react-core/AdminHeaderContent': lazyImport(_digigov_react_core_AdminHeaderContent),
|
|
298
298
|
'@digigov/react-core/AdminLayout': lazyImport(_digigov_react_core_AdminLayout),
|
|
299
299
|
'@digigov/react-core/AdminMain': lazyImport(_digigov_react_core_AdminMain),
|
|
300
|
-
'@digigov/react-core/AdminTopSection': lazyImport(_digigov_react_core_AdminTopSection),
|
|
301
300
|
'@digigov/react-core/Aside': lazyImport(_digigov_react_core_Aside),
|
|
301
|
+
'@digigov/react-core/AdminTopSection': lazyImport(_digigov_react_core_AdminTopSection),
|
|
302
302
|
'@digigov/react-core/AutoCompleteAssistiveHint': lazyImport(_digigov_react_core_AutoCompleteAssistiveHint),
|
|
303
|
-
'@digigov/react-core/AutoCompleteContainer': lazyImport(_digigov_react_core_AutoCompleteContainer),
|
|
304
303
|
'@digigov/react-core/AutoCompleteInputBase': lazyImport(_digigov_react_core_AutoCompleteInputBase),
|
|
304
|
+
'@digigov/react-core/AutoCompleteContainer': lazyImport(_digigov_react_core_AutoCompleteContainer),
|
|
305
305
|
'@digigov/react-core/AutoCompleteMultipleInput': lazyImport(_digigov_react_core_AutoCompleteMultipleInput),
|
|
306
306
|
'@digigov/react-core/AutoCompleteMultipleInputContainer': lazyImport(_digigov_react_core_AutoCompleteMultipleInputContainer),
|
|
307
307
|
'@digigov/react-core/AutoCompleteResultList': lazyImport(_digigov_react_core_AutoCompleteResultList),
|
|
308
308
|
'@digigov/react-core/AutoCompleteResultListItem': lazyImport(_digigov_react_core_AutoCompleteResultListItem),
|
|
309
309
|
'@digigov/react-core/AutoCompleteStatus': lazyImport(_digigov_react_core_AutoCompleteStatus),
|
|
310
310
|
'@digigov/react-core/AutoCompleteStatusContainer': lazyImport(_digigov_react_core_AutoCompleteStatusContainer),
|
|
311
|
-
'@digigov/react-core/BackToTopContainer': lazyImport(_digigov_react_core_BackToTopContainer),
|
|
312
311
|
'@digigov/react-core/BackLinkBase': lazyImport(_digigov_react_core_BackLinkBase),
|
|
312
|
+
'@digigov/react-core/BackToTopContainer': lazyImport(_digigov_react_core_BackToTopContainer),
|
|
313
313
|
'@digigov/react-core/BackToTopLimit': lazyImport(_digigov_react_core_BackToTopLimit),
|
|
314
314
|
'@digigov/react-core/BackToTopLink': lazyImport(_digigov_react_core_BackToTopLink),
|
|
315
315
|
'@digigov/react-core/BannerContainer': lazyImport(_digigov_react_core_BannerContainer),
|
|
316
|
-
'@digigov/react-core/Blockquote': lazyImport(_digigov_react_core_Blockquote),
|
|
317
316
|
'@digigov/react-core/Base': lazyImport(_digigov_react_core_Base),
|
|
318
317
|
'@digigov/react-core/Base/index.web': lazyImport(_digigov_react_core_Base_index_web),
|
|
319
318
|
'@digigov/react-core/Base/utils': lazyImport(_digigov_react_core_Base_utils),
|
|
319
|
+
'@digigov/react-core/Blockquote': lazyImport(_digigov_react_core_Blockquote),
|
|
320
320
|
'@digigov/react-core/Bottom': lazyImport(_digigov_react_core_Bottom),
|
|
321
321
|
'@digigov/react-core/BottomInfo': lazyImport(_digigov_react_core_BottomInfo),
|
|
322
322
|
'@digigov/react-core/BottomInfoContainer': lazyImport(_digigov_react_core_BottomInfoContainer),
|