@digigov/ui 2.1.1 → 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 +9 -1
- package/index.js +1 -1
- package/navigation/Dropdown/index.js +2 -3
- package/package.json +4 -4
- package/src/content/Table/Table.stories.jsx +151 -65
- package/src/content/Table/__stories__/WithMaxWidthWithOverflow.tsx +76 -0
- package/src/content/Table/index.test.tsx +4 -0
- package/src/navigation/Dropdown/index.tsx +2 -5
- package/src/stories-registry.ts +4 -2
- package/stories-registry.js +4 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
# Change Log - @digigov/ui
|
|
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
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 2.2.0
|
|
8
|
+
|
|
9
|
+
Thu, 14 May 2026 13:49:43 GMT
|
|
10
|
+
|
|
11
|
+
### Minor changes
|
|
12
|
+
|
|
13
|
+
- fix(Dropdown): fix position inside a table when floated (kbrani@admin.grnet.gr)
|
|
14
|
+
|
|
7
15
|
## 2.0.12
|
|
8
16
|
|
|
9
17
|
Mon, 23 Mar 2026 15:59:34 GMT
|
package/index.js
CHANGED
|
@@ -22,10 +22,9 @@ const Dropdown_Dropdown = /*#__PURE__*/ react.forwardRef(function({ closeBehavio
|
|
|
22
22
|
const tbody = element.closest('tbody');
|
|
23
23
|
const parentElement = element?.parentElement;
|
|
24
24
|
if (element.open) {
|
|
25
|
-
tbody.style.position = '
|
|
25
|
+
tbody.style.position = 'inherit';
|
|
26
26
|
const rect = element?.getBoundingClientRect();
|
|
27
27
|
const parentRect = parentElement.getBoundingClientRect();
|
|
28
|
-
element.style.position = 'static';
|
|
29
28
|
const top = rect.top + window.pageYOffset;
|
|
30
29
|
const left = rect.left + window.pageXOffset;
|
|
31
30
|
parentElement.style.height = `${parentRect.height}px`;
|
|
@@ -34,7 +33,7 @@ const Dropdown_Dropdown = /*#__PURE__*/ react.forwardRef(function({ closeBehavio
|
|
|
34
33
|
element.style.left = `${left}px`;
|
|
35
34
|
element.style.position = "absolute";
|
|
36
35
|
element.style.display = "block";
|
|
37
|
-
element.style.background = '
|
|
36
|
+
element.style.background = 'inherit';
|
|
38
37
|
} else {
|
|
39
38
|
tbody.style.position = 'relative';
|
|
40
39
|
parentElement.style.height = '';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digigov/ui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"description": "@digigov reusable components toolkit",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"publishConfig": {
|
|
@@ -14,14 +14,14 @@
|
|
|
14
14
|
"highlight.js": "11.10.0",
|
|
15
15
|
"react-markdown": "10.1.0",
|
|
16
16
|
"@uides/react-qr-reader": "3.1.0",
|
|
17
|
-
"@digigov/react-icons": "2.
|
|
17
|
+
"@digigov/react-icons": "2.2.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"clsx": "2.1.1",
|
|
21
21
|
"react": "^18.3.0 || ^19.1.0",
|
|
22
22
|
"react-dom": "^18.3.0 || ^19.1.0",
|
|
23
|
-
"@digigov/react-core": "2.
|
|
24
|
-
"@digigov/css": "2.
|
|
23
|
+
"@digigov/react-core": "2.2.0",
|
|
24
|
+
"@digigov/css": "2.2.0"
|
|
25
25
|
},
|
|
26
26
|
"peerDependenciesMeta": {
|
|
27
27
|
"react-native": {
|
|
@@ -10,7 +10,14 @@ import {
|
|
|
10
10
|
TableBody,
|
|
11
11
|
TableHeadCell,
|
|
12
12
|
TableDataCell,
|
|
13
|
+
TableFloatingScroll,
|
|
13
14
|
} from '@digigov/ui/content/Table';
|
|
15
|
+
import {
|
|
16
|
+
Dropdown,
|
|
17
|
+
DropdownButton,
|
|
18
|
+
DropdownContent,
|
|
19
|
+
} from '@digigov/ui/navigation/Dropdown';
|
|
20
|
+
import NavList, { NavListItemAction } from '@digigov/ui/navigation/NavList';
|
|
14
21
|
|
|
15
22
|
export default {
|
|
16
23
|
title: 'Digigov UI/content/Table',
|
|
@@ -30,6 +37,9 @@ const data = {
|
|
|
30
37
|
role: 'Ρόλος',
|
|
31
38
|
email: 'Email',
|
|
32
39
|
phone: 'Ώρες',
|
|
40
|
+
country: 'Χώρα',
|
|
41
|
+
active: 'Ενεργός',
|
|
42
|
+
actions: 'Ενέργειες',
|
|
33
43
|
},
|
|
34
44
|
content: [
|
|
35
45
|
{
|
|
@@ -37,100 +47,158 @@ const data = {
|
|
|
37
47
|
role: 'Χειριστής',
|
|
38
48
|
email: 'marios@mail.com',
|
|
39
49
|
phone: '34',
|
|
50
|
+
country: 'Ελλάδα',
|
|
51
|
+
active: true,
|
|
40
52
|
},
|
|
41
53
|
{
|
|
42
54
|
name: 'Καλλιόπη Παπαδοπούλου',
|
|
43
55
|
role: 'Χειριστής',
|
|
44
56
|
email: 'kalliopi@mail.com',
|
|
45
57
|
phone: '65',
|
|
58
|
+
country: 'Ελλάδα',
|
|
59
|
+
active: true,
|
|
46
60
|
},
|
|
47
61
|
{
|
|
48
62
|
name: 'Μαρία Φλούπη',
|
|
49
63
|
role: 'Διαχειριστής',
|
|
50
64
|
email: 'maria@mail.com',
|
|
51
65
|
phone: '12',
|
|
66
|
+
country: 'Ελλάδα',
|
|
67
|
+
active: false,
|
|
52
68
|
},
|
|
53
69
|
{
|
|
54
70
|
name: 'Ηλέκτρα Αποστόλου',
|
|
55
71
|
role: 'Διαχειριστής',
|
|
56
72
|
email: 'ilektra@mail.com',
|
|
57
73
|
phone: '26',
|
|
74
|
+
country: 'Ελλάδα',
|
|
75
|
+
active: true,
|
|
58
76
|
},
|
|
59
77
|
],
|
|
60
78
|
};
|
|
61
79
|
|
|
62
80
|
export const WithControls = {
|
|
63
81
|
render: (args) => {
|
|
64
|
-
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
<
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
dataType={key === 'phone' && args.tableHeadCellDataType}
|
|
86
|
-
>
|
|
87
|
-
{data.labels[key]}
|
|
88
|
-
</TableHeadCell>
|
|
89
|
-
))}
|
|
90
|
-
</TableRow>
|
|
91
|
-
</TableHead>
|
|
92
|
-
<TableBody>
|
|
93
|
-
{data.content &&
|
|
94
|
-
data.content.map((item, index) => (
|
|
95
|
-
<TableRow
|
|
96
|
-
key={index}
|
|
97
|
-
highlight={index === 1 && args.tableRowHighlight === true}
|
|
98
|
-
color={index === 1 && args.tableRowColor}
|
|
82
|
+
const TableContent = () => (
|
|
83
|
+
<Table
|
|
84
|
+
headerVariant={args.headerVariant}
|
|
85
|
+
verticalBorders={args.verticalBorders}
|
|
86
|
+
variant={args.variant}
|
|
87
|
+
dense={args.dense}
|
|
88
|
+
stacked={args.stacked}
|
|
89
|
+
>
|
|
90
|
+
{data && (
|
|
91
|
+
<>
|
|
92
|
+
<TableCaption size={args.tableCaptionSize}>
|
|
93
|
+
{data.title}
|
|
94
|
+
</TableCaption>
|
|
95
|
+
<TableHead>
|
|
96
|
+
<TableRow>
|
|
97
|
+
{data.labels &&
|
|
98
|
+
Object.keys(data.labels).map((key, index) => (
|
|
99
|
+
<TableHeadCell
|
|
100
|
+
key={key}
|
|
101
|
+
width={index === 0 && args.firstTableHeadCellWidth}
|
|
102
|
+
dataType={key === 'phone' && args.tableHeadCellDataType}
|
|
99
103
|
>
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
</TableDataCell>
|
|
103
|
-
<TableDataCell
|
|
104
|
-
data-label={data.labels.role}
|
|
105
|
-
highlight={
|
|
106
|
-
index === 2 && args.tableCellHighlight === 'warning'
|
|
107
|
-
? 'warning'
|
|
108
|
-
: index === 2 && args.tableCellHighlight === 'error'
|
|
109
|
-
? 'error'
|
|
110
|
-
: undefined
|
|
111
|
-
}
|
|
112
|
-
>
|
|
113
|
-
{item.role}
|
|
114
|
-
</TableDataCell>
|
|
115
|
-
<TableDataCell data-label={data.labels.email}>
|
|
116
|
-
{item.email}
|
|
117
|
-
</TableDataCell>
|
|
118
|
-
<TableDataCell
|
|
119
|
-
data-label={data.labels.phone}
|
|
120
|
-
dataType={args.tableHeadCellDataType}
|
|
121
|
-
>
|
|
122
|
-
{item.phone}
|
|
123
|
-
</TableDataCell>
|
|
124
|
-
</TableRow>
|
|
104
|
+
{data.labels[key]}
|
|
105
|
+
</TableHeadCell>
|
|
125
106
|
))}
|
|
126
|
-
</
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
107
|
+
</TableRow>
|
|
108
|
+
</TableHead>
|
|
109
|
+
<TableBody>
|
|
110
|
+
{data.content &&
|
|
111
|
+
data.content.map((item, index) => (
|
|
112
|
+
<TableRow
|
|
113
|
+
key={index}
|
|
114
|
+
highlight={index === 1 && args.tableRowHighlight === true}
|
|
115
|
+
color={index === 1 && args.tableRowColor}
|
|
116
|
+
>
|
|
117
|
+
<TableDataCell
|
|
118
|
+
data-label={data.labels.name}
|
|
119
|
+
maxWidthWithOverflow={
|
|
120
|
+
args.tableDataCellMaxWidthWithOverflow
|
|
121
|
+
}
|
|
122
|
+
>
|
|
123
|
+
{item.name}
|
|
124
|
+
</TableDataCell>
|
|
125
|
+
<TableDataCell
|
|
126
|
+
data-label={data.labels.role}
|
|
127
|
+
highlight={
|
|
128
|
+
index === 2 && args.tableCellHighlight === 'warning'
|
|
129
|
+
? 'warning'
|
|
130
|
+
: index === 2 && args.tableCellHighlight === 'error'
|
|
131
|
+
? 'error'
|
|
132
|
+
: undefined
|
|
133
|
+
}
|
|
134
|
+
>
|
|
135
|
+
{item.role}
|
|
136
|
+
</TableDataCell>
|
|
137
|
+
<TableDataCell data-label={data.labels.email}>
|
|
138
|
+
{item.email}
|
|
139
|
+
</TableDataCell>
|
|
140
|
+
<TableDataCell
|
|
141
|
+
data-label={data.labels.phone}
|
|
142
|
+
dataType={args.tableHeadCellDataType}
|
|
143
|
+
>
|
|
144
|
+
{item.phone}
|
|
145
|
+
</TableDataCell>
|
|
146
|
+
<TableDataCell data-label={data.labels.country}>
|
|
147
|
+
{item.country}
|
|
148
|
+
</TableDataCell>
|
|
149
|
+
<TableDataCell data-label={data.labels.active}>
|
|
150
|
+
{item.active ? 'Ναι' : 'Όχι'}
|
|
151
|
+
</TableDataCell>
|
|
152
|
+
<TableDataCell
|
|
153
|
+
maxWidthWithOverflow={
|
|
154
|
+
args.tableDataCellMaxWidthWithOverflow
|
|
155
|
+
}
|
|
156
|
+
data-label={data.labels.actions}
|
|
157
|
+
>
|
|
158
|
+
<Dropdown
|
|
159
|
+
float={args.actionsFloat}
|
|
160
|
+
align="right"
|
|
161
|
+
placement="bottom"
|
|
162
|
+
>
|
|
163
|
+
<DropdownButton variant="link">
|
|
164
|
+
Ενέργειες
|
|
165
|
+
</DropdownButton>
|
|
166
|
+
<DropdownContent>
|
|
167
|
+
<NavList layout="vertical">
|
|
168
|
+
<NavListItemAction href="#">
|
|
169
|
+
Εισαγωγή προτύπου
|
|
170
|
+
</NavListItemAction>
|
|
171
|
+
<NavListItemAction href="#">
|
|
172
|
+
Διαγραφή
|
|
173
|
+
</NavListItemAction>
|
|
174
|
+
</NavList>
|
|
175
|
+
</DropdownContent>
|
|
176
|
+
</Dropdown>
|
|
177
|
+
</TableDataCell>
|
|
178
|
+
</TableRow>
|
|
179
|
+
))}
|
|
180
|
+
</TableBody>
|
|
181
|
+
</>
|
|
182
|
+
)}
|
|
183
|
+
</Table>
|
|
184
|
+
);
|
|
185
|
+
return (
|
|
186
|
+
<>
|
|
187
|
+
{args.container === 'FloatingTable' ? (
|
|
188
|
+
<TableFloatingScroll>
|
|
189
|
+
<TableContent />
|
|
190
|
+
</TableFloatingScroll>
|
|
191
|
+
) : (
|
|
192
|
+
<TableContainer border={args.containerBorder}>
|
|
193
|
+
<TableContent />
|
|
194
|
+
</TableContainer>
|
|
195
|
+
)}
|
|
196
|
+
</>
|
|
131
197
|
);
|
|
132
198
|
},
|
|
133
199
|
args: {
|
|
200
|
+
actionsFloat: true,
|
|
201
|
+
container: 'TableContainer',
|
|
134
202
|
containerBorder: false,
|
|
135
203
|
headerVariant: 'light',
|
|
136
204
|
verticalBorders: false,
|
|
@@ -143,8 +211,20 @@ export const WithControls = {
|
|
|
143
211
|
tableRowColor: 'primary',
|
|
144
212
|
firstTableHeadCellWidth: '25%',
|
|
145
213
|
tableHeadCellDataType: 'text',
|
|
214
|
+
tableDataCellMaxWidthWithOverflow: false,
|
|
146
215
|
},
|
|
147
216
|
argTypes: {
|
|
217
|
+
actionsFloat: {
|
|
218
|
+
control: {
|
|
219
|
+
type: 'boolean',
|
|
220
|
+
},
|
|
221
|
+
},
|
|
222
|
+
container: {
|
|
223
|
+
control: {
|
|
224
|
+
type: 'inline-radio',
|
|
225
|
+
},
|
|
226
|
+
options: ['TableContainer', 'FloatingTable'],
|
|
227
|
+
},
|
|
148
228
|
containerBorder: {
|
|
149
229
|
control: {
|
|
150
230
|
type: 'boolean',
|
|
@@ -209,6 +289,11 @@ export const WithControls = {
|
|
|
209
289
|
},
|
|
210
290
|
options: ['numeric', 'text'],
|
|
211
291
|
},
|
|
292
|
+
tableDataCellMaxWidthWithOverflow: {
|
|
293
|
+
control: {
|
|
294
|
+
type: 'boolean',
|
|
295
|
+
},
|
|
296
|
+
},
|
|
212
297
|
},
|
|
213
298
|
parameters: {
|
|
214
299
|
controls: { exclude: ['ref'] },
|
|
@@ -233,4 +318,5 @@ export { UsingHighlights } from '@digigov/ui/content/Table/__stories__/UsingHigh
|
|
|
233
318
|
export { MultipleProps } from '@digigov/ui/content/Table/__stories__/MultipleProps';
|
|
234
319
|
export { WithSortFilters } from '@digigov/ui/content/Table/__stories__/WithSortFilters';
|
|
235
320
|
export { WithFloatingScroll } from '@digigov/ui/content/Table/__stories__/WithFloatingScroll';
|
|
321
|
+
export { WithMaxWidthWithOverflow } from '@digigov/ui/content/Table/__stories__/WithMaxWidthWithOverflow';
|
|
236
322
|
export { Full } from '@digigov/ui/content/Table/__stories__/Full';
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
TableContainer,
|
|
4
|
+
Table,
|
|
5
|
+
TableCaption,
|
|
6
|
+
TableHead,
|
|
7
|
+
TableRow,
|
|
8
|
+
TableBody,
|
|
9
|
+
TableHeadCell,
|
|
10
|
+
TableDataCell,
|
|
11
|
+
} from '@digigov/ui/content/Table';
|
|
12
|
+
|
|
13
|
+
const data = {
|
|
14
|
+
title: 'Χρήστες',
|
|
15
|
+
labels: {
|
|
16
|
+
name: 'Ονοματεπώνυμο',
|
|
17
|
+
description: 'Περιγραφή',
|
|
18
|
+
email: 'Email',
|
|
19
|
+
},
|
|
20
|
+
content: [
|
|
21
|
+
{
|
|
22
|
+
name: 'Μάριος Μενεξές',
|
|
23
|
+
description:
|
|
24
|
+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
|
|
25
|
+
email: 'marios@mail.com',
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
name: 'Καλλιόπη Παπαδοπούλου',
|
|
29
|
+
description:
|
|
30
|
+
'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?',
|
|
31
|
+
email: 'kalliopi@mail.com',
|
|
32
|
+
},
|
|
33
|
+
],
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
export const WithMaxWidthWithOverflow = (_: any) => {
|
|
37
|
+
return (
|
|
38
|
+
<TableContainer>
|
|
39
|
+
<Table verticalAlign="top">
|
|
40
|
+
{data && (
|
|
41
|
+
<>
|
|
42
|
+
<TableCaption>{data.title}</TableCaption>
|
|
43
|
+
<TableHead>
|
|
44
|
+
<TableRow>
|
|
45
|
+
{data.labels &&
|
|
46
|
+
Object.keys(data.labels).map((key) => (
|
|
47
|
+
<TableHeadCell key={key}>{data.labels[key]}</TableHeadCell>
|
|
48
|
+
))}
|
|
49
|
+
</TableRow>
|
|
50
|
+
</TableHead>
|
|
51
|
+
<TableBody>
|
|
52
|
+
{data.content &&
|
|
53
|
+
data.content.map((item, index) => (
|
|
54
|
+
<TableRow key={index}>
|
|
55
|
+
<TableDataCell data-label={data.labels.name}>
|
|
56
|
+
{item.name}
|
|
57
|
+
</TableDataCell>
|
|
58
|
+
<TableDataCell
|
|
59
|
+
maxWidthWithOverflow
|
|
60
|
+
data-label={data.labels.description}
|
|
61
|
+
>
|
|
62
|
+
{item.description}
|
|
63
|
+
</TableDataCell>
|
|
64
|
+
<TableDataCell data-label={data.labels.email}>
|
|
65
|
+
{item.email}
|
|
66
|
+
</TableDataCell>
|
|
67
|
+
</TableRow>
|
|
68
|
+
))}
|
|
69
|
+
</TableBody>
|
|
70
|
+
</>
|
|
71
|
+
)}
|
|
72
|
+
</Table>
|
|
73
|
+
</TableContainer>
|
|
74
|
+
);
|
|
75
|
+
};
|
|
76
|
+
export default WithMaxWidthWithOverflow;
|
|
@@ -18,6 +18,7 @@ import { VerticalBorders } from '@digigov/ui/content/Table/__stories__/VerticalB
|
|
|
18
18
|
import { VerticalHeaders } from '@digigov/ui/content/Table/__stories__/VerticalHeaders';
|
|
19
19
|
import { WithFloatingScroll } from '@digigov/ui/content/Table/__stories__/WithFloatingScroll';
|
|
20
20
|
import { WithLoader } from '@digigov/ui/content/Table/__stories__/WithLoader';
|
|
21
|
+
import { WithMaxWidthWithOverflow } from '@digigov/ui/content/Table/__stories__/WithMaxWidthWithOverflow';
|
|
21
22
|
import { WithSortFilters } from '@digigov/ui/content/Table/__stories__/WithSortFilters';
|
|
22
23
|
import { ZebraProp } from '@digigov/ui/content/Table/__stories__/ZebraProp';
|
|
23
24
|
const SCREENSHOT_DELAY = 2_000;
|
|
@@ -78,6 +79,9 @@ test('renders the All Table variants', async ({ mount, page }) => {
|
|
|
78
79
|
<TestVariant title="WithLoader">
|
|
79
80
|
<WithLoader />
|
|
80
81
|
</TestVariant>
|
|
82
|
+
<TestVariant title="WithMaxWidthWithOverflow">
|
|
83
|
+
<WithMaxWidthWithOverflow />
|
|
84
|
+
</TestVariant>
|
|
81
85
|
<TestVariant title="WithSortFilters">
|
|
82
86
|
<WithSortFilters />
|
|
83
87
|
</TestVariant>
|
|
@@ -54,11 +54,9 @@ export const Dropdown = React.forwardRef<HTMLDetailsElement, DropdownProps>(
|
|
|
54
54
|
const tbody = element.closest('tbody') as HTMLElement;
|
|
55
55
|
const parentElement = element?.parentElement as HTMLElement;
|
|
56
56
|
if (element.open) {
|
|
57
|
-
tbody.style.position = '
|
|
57
|
+
tbody.style.position = 'inherit';
|
|
58
58
|
const rect = element?.getBoundingClientRect();
|
|
59
59
|
const parentRect = parentElement.getBoundingClientRect();
|
|
60
|
-
element.style.position = 'static';
|
|
61
|
-
// arbitrary spacing of 12 pixels because CSS
|
|
62
60
|
const top = rect.top + window.pageYOffset;
|
|
63
61
|
const left = rect.left + window.pageXOffset;
|
|
64
62
|
parentElement.style.height = `${parentRect.height}px`;
|
|
@@ -67,7 +65,7 @@ export const Dropdown = React.forwardRef<HTMLDetailsElement, DropdownProps>(
|
|
|
67
65
|
element.style.left = `${left}px`;
|
|
68
66
|
element.style.position = `absolute`;
|
|
69
67
|
element.style.display = `block`;
|
|
70
|
-
element.style.background = '
|
|
68
|
+
element.style.background = 'inherit';
|
|
71
69
|
} else {
|
|
72
70
|
tbody.style.position = 'relative';
|
|
73
71
|
parentElement.style.height = '';
|
|
@@ -76,7 +74,6 @@ export const Dropdown = React.forwardRef<HTMLDetailsElement, DropdownProps>(
|
|
|
76
74
|
element.style.left = `0`;
|
|
77
75
|
element.style.position = `relative`;
|
|
78
76
|
element.style.display = `table-cell`;
|
|
79
|
-
// element.style.background = 'transparent';
|
|
80
77
|
}
|
|
81
78
|
};
|
|
82
79
|
if (float) {
|
package/src/stories-registry.ts
CHANGED
|
@@ -172,6 +172,7 @@ import * as _digigov_ui_content_Table___stories___VerticalBorders from "@digigov
|
|
|
172
172
|
import * as _digigov_ui_content_Table___stories___VerticalHeaders from "@digigov/ui/content/Table/__stories__/VerticalHeaders";
|
|
173
173
|
import * as _digigov_ui_content_Table___stories___WithFloatingScroll from "@digigov/ui/content/Table/__stories__/WithFloatingScroll";
|
|
174
174
|
import * as _digigov_ui_content_Table___stories___WithLoader from "@digigov/ui/content/Table/__stories__/WithLoader";
|
|
175
|
+
import * as _digigov_ui_content_Table___stories___WithMaxWidthWithOverflow from "@digigov/ui/content/Table/__stories__/WithMaxWidthWithOverflow";
|
|
175
176
|
import * as _digigov_ui_content_Table___stories___WithSortFilters from "@digigov/ui/content/Table/__stories__/WithSortFilters";
|
|
176
177
|
import * as _digigov_ui_content_Table___stories___ZebraProp from "@digigov/ui/content/Table/__stories__/ZebraProp";
|
|
177
178
|
import * as _digigov_ui_content_TaskList___stories___Default from "@digigov/ui/content/TaskList/__stories__/Default";
|
|
@@ -243,7 +244,6 @@ import * as _digigov_ui_form_ErrorMessage___stories___ErrorMessageOnly from "@di
|
|
|
243
244
|
import * as _digigov_ui_form_FileUpload___stories___Default from "@digigov/ui/form/FileUpload/__stories__/Default";
|
|
244
245
|
import * as _digigov_ui_form_FileUpload___stories___WithErrorMessage from "@digigov/ui/form/FileUpload/__stories__/WithErrorMessage";
|
|
245
246
|
import * as _digigov_ui_form_FileUpload___stories___WithVariantLink from "@digigov/ui/form/FileUpload/__stories__/WithVariantLink";
|
|
246
|
-
import * as _digigov_ui_form_SearchContainer___stories___Default from "@digigov/ui/form/SearchContainer/__stories__/Default";
|
|
247
247
|
import * as _digigov_ui_form_RadioContainer___stories___ConditionalReveal from "@digigov/ui/form/RadioContainer/__stories__/ConditionalReveal";
|
|
248
248
|
import * as _digigov_ui_form_RadioContainer___stories___Default from "@digigov/ui/form/RadioContainer/__stories__/Default";
|
|
249
249
|
import * as _digigov_ui_form_RadioContainer___stories___Dense from "@digigov/ui/form/RadioContainer/__stories__/Dense";
|
|
@@ -254,6 +254,7 @@ import * as _digigov_ui_form_RadioContainer___stories___NoneAnswer from "@digigo
|
|
|
254
254
|
import * as _digigov_ui_form_RadioContainer___stories___WithErrorMessage from "@digigov/ui/form/RadioContainer/__stories__/WithErrorMessage";
|
|
255
255
|
import * as _digigov_ui_form_RadioContainer___stories___WithHints from "@digigov/ui/form/RadioContainer/__stories__/WithHints";
|
|
256
256
|
import * as _digigov_ui_form_RadioContainer___stories___WithMediumLegend from "@digigov/ui/form/RadioContainer/__stories__/WithMediumLegend";
|
|
257
|
+
import * as _digigov_ui_form_SearchContainer___stories___Default from "@digigov/ui/form/SearchContainer/__stories__/Default";
|
|
257
258
|
import * as _digigov_ui_form_SelectContainer___stories___Default from "@digigov/ui/form/SelectContainer/__stories__/Default";
|
|
258
259
|
import * as _digigov_ui_form_SelectContainer___stories___Dense from "@digigov/ui/form/SelectContainer/__stories__/Dense";
|
|
259
260
|
import * as _digigov_ui_form_SelectContainer___stories___DisabledInput from "@digigov/ui/form/SelectContainer/__stories__/DisabledInput";
|
|
@@ -562,6 +563,7 @@ export default {
|
|
|
562
563
|
'@digigov/ui/content/Table/__stories__/VerticalHeaders': lazyImport(_digigov_ui_content_Table___stories___VerticalHeaders),
|
|
563
564
|
'@digigov/ui/content/Table/__stories__/WithFloatingScroll': lazyImport(_digigov_ui_content_Table___stories___WithFloatingScroll),
|
|
564
565
|
'@digigov/ui/content/Table/__stories__/WithLoader': lazyImport(_digigov_ui_content_Table___stories___WithLoader),
|
|
566
|
+
'@digigov/ui/content/Table/__stories__/WithMaxWidthWithOverflow': lazyImport(_digigov_ui_content_Table___stories___WithMaxWidthWithOverflow),
|
|
565
567
|
'@digigov/ui/content/Table/__stories__/WithSortFilters': lazyImport(_digigov_ui_content_Table___stories___WithSortFilters),
|
|
566
568
|
'@digigov/ui/content/Table/__stories__/ZebraProp': lazyImport(_digigov_ui_content_Table___stories___ZebraProp),
|
|
567
569
|
'@digigov/ui/content/TaskList/__stories__/Default': lazyImport(_digigov_ui_content_TaskList___stories___Default),
|
|
@@ -633,7 +635,6 @@ export default {
|
|
|
633
635
|
'@digigov/ui/form/FileUpload/__stories__/Default': lazyImport(_digigov_ui_form_FileUpload___stories___Default),
|
|
634
636
|
'@digigov/ui/form/FileUpload/__stories__/WithErrorMessage': lazyImport(_digigov_ui_form_FileUpload___stories___WithErrorMessage),
|
|
635
637
|
'@digigov/ui/form/FileUpload/__stories__/WithVariantLink': lazyImport(_digigov_ui_form_FileUpload___stories___WithVariantLink),
|
|
636
|
-
'@digigov/ui/form/SearchContainer/__stories__/Default': lazyImport(_digigov_ui_form_SearchContainer___stories___Default),
|
|
637
638
|
'@digigov/ui/form/RadioContainer/__stories__/ConditionalReveal': lazyImport(_digigov_ui_form_RadioContainer___stories___ConditionalReveal),
|
|
638
639
|
'@digigov/ui/form/RadioContainer/__stories__/Default': lazyImport(_digigov_ui_form_RadioContainer___stories___Default),
|
|
639
640
|
'@digigov/ui/form/RadioContainer/__stories__/Dense': lazyImport(_digigov_ui_form_RadioContainer___stories___Dense),
|
|
@@ -644,6 +645,7 @@ export default {
|
|
|
644
645
|
'@digigov/ui/form/RadioContainer/__stories__/WithErrorMessage': lazyImport(_digigov_ui_form_RadioContainer___stories___WithErrorMessage),
|
|
645
646
|
'@digigov/ui/form/RadioContainer/__stories__/WithHints': lazyImport(_digigov_ui_form_RadioContainer___stories___WithHints),
|
|
646
647
|
'@digigov/ui/form/RadioContainer/__stories__/WithMediumLegend': lazyImport(_digigov_ui_form_RadioContainer___stories___WithMediumLegend),
|
|
648
|
+
'@digigov/ui/form/SearchContainer/__stories__/Default': lazyImport(_digigov_ui_form_SearchContainer___stories___Default),
|
|
647
649
|
'@digigov/ui/form/SelectContainer/__stories__/Default': lazyImport(_digigov_ui_form_SelectContainer___stories___Default),
|
|
648
650
|
'@digigov/ui/form/SelectContainer/__stories__/Dense': lazyImport(_digigov_ui_form_SelectContainer___stories___Dense),
|
|
649
651
|
'@digigov/ui/form/SelectContainer/__stories__/DisabledInput': lazyImport(_digigov_ui_form_SelectContainer___stories___DisabledInput),
|
package/stories-registry.js
CHANGED
|
@@ -171,6 +171,7 @@ import * as __WEBPACK_EXTERNAL_MODULE__content_Table_stories_VerticalBorders_js_
|
|
|
171
171
|
import * as __WEBPACK_EXTERNAL_MODULE__content_Table_stories_VerticalHeaders_js_32b92546__ from "./content/Table/__stories__/VerticalHeaders.js";
|
|
172
172
|
import * as __WEBPACK_EXTERNAL_MODULE__content_Table_stories_WithFloatingScroll_js_15bf7190__ from "./content/Table/__stories__/WithFloatingScroll.js";
|
|
173
173
|
import * as __WEBPACK_EXTERNAL_MODULE__content_Table_stories_WithLoader_js_dff59e09__ from "./content/Table/__stories__/WithLoader.js";
|
|
174
|
+
import * as __WEBPACK_EXTERNAL_MODULE__content_Table_stories_WithMaxWidthWithOverflow_js_d539e4dc__ from "./content/Table/__stories__/WithMaxWidthWithOverflow.js";
|
|
174
175
|
import * as __WEBPACK_EXTERNAL_MODULE__content_Table_stories_WithSortFilters_js_a98bebc5__ from "./content/Table/__stories__/WithSortFilters.js";
|
|
175
176
|
import * as __WEBPACK_EXTERNAL_MODULE__content_Table_stories_ZebraProp_js_115aa3a5__ from "./content/Table/__stories__/ZebraProp.js";
|
|
176
177
|
import * as __WEBPACK_EXTERNAL_MODULE__content_TaskList_stories_Default_js_4083d226__ from "./content/TaskList/__stories__/Default.js";
|
|
@@ -242,7 +243,6 @@ import * as __WEBPACK_EXTERNAL_MODULE__form_ErrorMessage_stories_ErrorMessageOnl
|
|
|
242
243
|
import * as __WEBPACK_EXTERNAL_MODULE__form_FileUpload_stories_Default_js_31ddd29b__ from "./form/FileUpload/__stories__/Default.js";
|
|
243
244
|
import * as __WEBPACK_EXTERNAL_MODULE__form_FileUpload_stories_WithErrorMessage_js_bf04e449__ from "./form/FileUpload/__stories__/WithErrorMessage.js";
|
|
244
245
|
import * as __WEBPACK_EXTERNAL_MODULE__form_FileUpload_stories_WithVariantLink_js_b43639d3__ from "./form/FileUpload/__stories__/WithVariantLink.js";
|
|
245
|
-
import * as __WEBPACK_EXTERNAL_MODULE__form_SearchContainer_stories_Default_js_1f7cf47b__ from "./form/SearchContainer/__stories__/Default.js";
|
|
246
246
|
import * as __WEBPACK_EXTERNAL_MODULE__form_RadioContainer_stories_ConditionalReveal_js_2bb3b245__ from "./form/RadioContainer/__stories__/ConditionalReveal.js";
|
|
247
247
|
import * as __WEBPACK_EXTERNAL_MODULE__form_RadioContainer_stories_Default_js_9c205c40__ from "./form/RadioContainer/__stories__/Default.js";
|
|
248
248
|
import * as __WEBPACK_EXTERNAL_MODULE__form_RadioContainer_stories_Dense_js_dcc89f0b__ from "./form/RadioContainer/__stories__/Dense.js";
|
|
@@ -253,6 +253,7 @@ import * as __WEBPACK_EXTERNAL_MODULE__form_RadioContainer_stories_NoneAnswer_js
|
|
|
253
253
|
import * as __WEBPACK_EXTERNAL_MODULE__form_RadioContainer_stories_WithErrorMessage_js_d9d8ee93__ from "./form/RadioContainer/__stories__/WithErrorMessage.js";
|
|
254
254
|
import * as __WEBPACK_EXTERNAL_MODULE__form_RadioContainer_stories_WithHints_js_2e043f1e__ from "./form/RadioContainer/__stories__/WithHints.js";
|
|
255
255
|
import * as __WEBPACK_EXTERNAL_MODULE__form_RadioContainer_stories_WithMediumLegend_js_1d6fcf79__ from "./form/RadioContainer/__stories__/WithMediumLegend.js";
|
|
256
|
+
import * as __WEBPACK_EXTERNAL_MODULE__form_SearchContainer_stories_Default_js_1f7cf47b__ from "./form/SearchContainer/__stories__/Default.js";
|
|
256
257
|
import * as __WEBPACK_EXTERNAL_MODULE__form_SelectContainer_stories_Default_js_e647cfb5__ from "./form/SelectContainer/__stories__/Default.js";
|
|
257
258
|
import * as __WEBPACK_EXTERNAL_MODULE__form_SelectContainer_stories_Dense_js_3b313495__ from "./form/SelectContainer/__stories__/Dense.js";
|
|
258
259
|
import * as __WEBPACK_EXTERNAL_MODULE__form_SelectContainer_stories_DisabledInput_js_a272f063__ from "./form/SelectContainer/__stories__/DisabledInput.js";
|
|
@@ -552,6 +553,7 @@ const stories_registry = {
|
|
|
552
553
|
'@digigov/ui/content/Table/__stories__/VerticalHeaders': lazyImport(__WEBPACK_EXTERNAL_MODULE__content_Table_stories_VerticalHeaders_js_32b92546__),
|
|
553
554
|
'@digigov/ui/content/Table/__stories__/WithFloatingScroll': lazyImport(__WEBPACK_EXTERNAL_MODULE__content_Table_stories_WithFloatingScroll_js_15bf7190__),
|
|
554
555
|
'@digigov/ui/content/Table/__stories__/WithLoader': lazyImport(__WEBPACK_EXTERNAL_MODULE__content_Table_stories_WithLoader_js_dff59e09__),
|
|
556
|
+
'@digigov/ui/content/Table/__stories__/WithMaxWidthWithOverflow': lazyImport(__WEBPACK_EXTERNAL_MODULE__content_Table_stories_WithMaxWidthWithOverflow_js_d539e4dc__),
|
|
555
557
|
'@digigov/ui/content/Table/__stories__/WithSortFilters': lazyImport(__WEBPACK_EXTERNAL_MODULE__content_Table_stories_WithSortFilters_js_a98bebc5__),
|
|
556
558
|
'@digigov/ui/content/Table/__stories__/ZebraProp': lazyImport(__WEBPACK_EXTERNAL_MODULE__content_Table_stories_ZebraProp_js_115aa3a5__),
|
|
557
559
|
'@digigov/ui/content/TaskList/__stories__/Default': lazyImport(__WEBPACK_EXTERNAL_MODULE__content_TaskList_stories_Default_js_4083d226__),
|
|
@@ -623,7 +625,6 @@ const stories_registry = {
|
|
|
623
625
|
'@digigov/ui/form/FileUpload/__stories__/Default': lazyImport(__WEBPACK_EXTERNAL_MODULE__form_FileUpload_stories_Default_js_31ddd29b__),
|
|
624
626
|
'@digigov/ui/form/FileUpload/__stories__/WithErrorMessage': lazyImport(__WEBPACK_EXTERNAL_MODULE__form_FileUpload_stories_WithErrorMessage_js_bf04e449__),
|
|
625
627
|
'@digigov/ui/form/FileUpload/__stories__/WithVariantLink': lazyImport(__WEBPACK_EXTERNAL_MODULE__form_FileUpload_stories_WithVariantLink_js_b43639d3__),
|
|
626
|
-
'@digigov/ui/form/SearchContainer/__stories__/Default': lazyImport(__WEBPACK_EXTERNAL_MODULE__form_SearchContainer_stories_Default_js_1f7cf47b__),
|
|
627
628
|
'@digigov/ui/form/RadioContainer/__stories__/ConditionalReveal': lazyImport(__WEBPACK_EXTERNAL_MODULE__form_RadioContainer_stories_ConditionalReveal_js_2bb3b245__),
|
|
628
629
|
'@digigov/ui/form/RadioContainer/__stories__/Default': lazyImport(__WEBPACK_EXTERNAL_MODULE__form_RadioContainer_stories_Default_js_9c205c40__),
|
|
629
630
|
'@digigov/ui/form/RadioContainer/__stories__/Dense': lazyImport(__WEBPACK_EXTERNAL_MODULE__form_RadioContainer_stories_Dense_js_dcc89f0b__),
|
|
@@ -634,6 +635,7 @@ const stories_registry = {
|
|
|
634
635
|
'@digigov/ui/form/RadioContainer/__stories__/WithErrorMessage': lazyImport(__WEBPACK_EXTERNAL_MODULE__form_RadioContainer_stories_WithErrorMessage_js_d9d8ee93__),
|
|
635
636
|
'@digigov/ui/form/RadioContainer/__stories__/WithHints': lazyImport(__WEBPACK_EXTERNAL_MODULE__form_RadioContainer_stories_WithHints_js_2e043f1e__),
|
|
636
637
|
'@digigov/ui/form/RadioContainer/__stories__/WithMediumLegend': lazyImport(__WEBPACK_EXTERNAL_MODULE__form_RadioContainer_stories_WithMediumLegend_js_1d6fcf79__),
|
|
638
|
+
'@digigov/ui/form/SearchContainer/__stories__/Default': lazyImport(__WEBPACK_EXTERNAL_MODULE__form_SearchContainer_stories_Default_js_1f7cf47b__),
|
|
637
639
|
'@digigov/ui/form/SelectContainer/__stories__/Default': lazyImport(__WEBPACK_EXTERNAL_MODULE__form_SelectContainer_stories_Default_js_e647cfb5__),
|
|
638
640
|
'@digigov/ui/form/SelectContainer/__stories__/Dense': lazyImport(__WEBPACK_EXTERNAL_MODULE__form_SelectContainer_stories_Dense_js_3b313495__),
|
|
639
641
|
'@digigov/ui/form/SelectContainer/__stories__/DisabledInput': lazyImport(__WEBPACK_EXTERNAL_MODULE__form_SelectContainer_stories_DisabledInput_js_a272f063__),
|