@entur/table 4.9.14-beta.3 → 4.9.14-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/DataCell.d.ts +20 -0
- package/dist/EditableCell.d.ts +24 -0
- package/dist/ExpandRowButton.d.ts +7 -0
- package/dist/ExpandableRow.d.ts +12 -0
- package/dist/HeaderCell.d.ts +24 -0
- package/dist/Table.d.ts +21 -0
- package/dist/TableBody.d.ts +9 -0
- package/dist/TableFooter.d.ts +6 -0
- package/dist/TableHead.d.ts +8 -0
- package/dist/TableRow.d.ts +21 -0
- package/dist/index.d.ts +13 -226
- package/dist/index.js +8 -0
- package/dist/styles.css +118 -100
- package/dist/table.cjs.development.js +509 -0
- package/dist/table.cjs.development.js.map +1 -0
- package/dist/table.cjs.production.min.js +2 -0
- package/dist/table.cjs.production.min.js.map +1 -0
- package/dist/table.esm.js +439 -382
- package/dist/table.esm.js.map +1 -1
- package/dist/useSortableTable.d.ts +41 -0
- package/dist/useTableKeyboardNavigation.d.ts +14 -0
- package/package.json +19 -29
- package/dist/table.cjs.js +0 -437
- package/dist/table.cjs.js.map +0 -1
package/dist/styles.css
CHANGED
|
@@ -1,5 +1,110 @@
|
|
|
1
1
|
/* DO NOT CHANGE!*/
|
|
2
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
|
+
.eds-table__header-cell {
|
|
4
|
+
color: var(--components-table-standard-text);
|
|
5
|
+
font-size: 1rem;
|
|
6
|
+
font-weight: 600;
|
|
7
|
+
text-align: left;
|
|
8
|
+
height: 3rem;
|
|
9
|
+
padding: 0 1.5rem;
|
|
10
|
+
}
|
|
11
|
+
.eds-table--middle .eds-table__header-cell, .eds-table--small .eds-table__header-cell {
|
|
12
|
+
padding: 0 1rem;
|
|
13
|
+
}
|
|
14
|
+
.eds-contrast .eds-table__header-cell {
|
|
15
|
+
color: var(--components-table-contrast-text);
|
|
16
|
+
border-bottom-color: var(--components-table-contrast-stroke);
|
|
17
|
+
}
|
|
18
|
+
.eds-table__header-cell--padding-checkbox {
|
|
19
|
+
width: 3rem;
|
|
20
|
+
padding: 0 0 1rem 1.25rem;
|
|
21
|
+
}
|
|
22
|
+
.eds-table__header-cell--padding-radio {
|
|
23
|
+
width: 3rem;
|
|
24
|
+
padding: 0 0 1rem 1.25rem;
|
|
25
|
+
}
|
|
26
|
+
.eds-table__header-cell--padding-overflow-menu {
|
|
27
|
+
width: 3rem;
|
|
28
|
+
padding: 1rem 0.75rem;
|
|
29
|
+
}
|
|
30
|
+
.eds-table__header-cell--sortable:focus-visible {
|
|
31
|
+
outline: 2px solid #181c56;
|
|
32
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
33
|
+
outline-offset: 0.125rem;
|
|
34
|
+
}
|
|
35
|
+
.eds-contrast .eds-table__header-cell--sortable:focus-visible {
|
|
36
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
37
|
+
}
|
|
38
|
+
.eds-table__header-cell-button {
|
|
39
|
+
position: relative;
|
|
40
|
+
text-align: left;
|
|
41
|
+
height: 100%;
|
|
42
|
+
width: 100%;
|
|
43
|
+
padding: 0;
|
|
44
|
+
cursor: pointer;
|
|
45
|
+
-webkit-appearance: none;
|
|
46
|
+
-moz-appearance: none;
|
|
47
|
+
appearance: none;
|
|
48
|
+
border: none;
|
|
49
|
+
background: none;
|
|
50
|
+
color: inherit;
|
|
51
|
+
font-size: inherit;
|
|
52
|
+
font-weight: inherit;
|
|
53
|
+
font-family: inherit;
|
|
54
|
+
}
|
|
55
|
+
.eds-table__header-cell-button-icon {
|
|
56
|
+
position: absolute;
|
|
57
|
+
margin-left: 0.25rem;
|
|
58
|
+
}
|
|
59
|
+
.eds-table__header-cell-button:focus-visible {
|
|
60
|
+
outline: 2px solid #181c56;
|
|
61
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
62
|
+
outline-offset: 0.125rem;
|
|
63
|
+
}
|
|
64
|
+
.eds-contrast .eds-table__header-cell-button:focus-visible {
|
|
65
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
66
|
+
}
|
|
67
|
+
.eds-table--sticky-header .eds-table__header-cell {
|
|
68
|
+
background-color: var(--components-table-standard-header-fill);
|
|
69
|
+
position: sticky;
|
|
70
|
+
top: 0;
|
|
71
|
+
}
|
|
72
|
+
.eds-contrast .eds-table--sticky-header .eds-table__header-cell {
|
|
73
|
+
background-color: var(--components-table-contrast-header-fill);
|
|
74
|
+
}
|
|
75
|
+
/* DO NOT CHANGE!*/
|
|
76
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
77
|
+
.eds-editable-cell {
|
|
78
|
+
padding: 0.25rem 0.75rem;
|
|
79
|
+
}
|
|
80
|
+
.eds-table--middle .eds-editable-cell {
|
|
81
|
+
padding: 0.25rem 0.5rem;
|
|
82
|
+
}
|
|
83
|
+
.eds-table--small .eds-editable-cell {
|
|
84
|
+
padding: 0.125rem 0.5rem;
|
|
85
|
+
}
|
|
86
|
+
.eds-editable-cell .eds-form-control-wrapper:not(.eds-datepicker__datefield) {
|
|
87
|
+
min-height: 0;
|
|
88
|
+
}
|
|
89
|
+
.eds-editable-cell .eds-form-control-wrapper:not(.eds-datepicker__datefield) .eds-form-control {
|
|
90
|
+
padding: 0.75rem;
|
|
91
|
+
}
|
|
92
|
+
.eds-table--middle .eds-editable-cell .eds-form-control-wrapper:not(.eds-datepicker__datefield) .eds-form-control {
|
|
93
|
+
padding: 0.25rem calc(0.5rem - 0.0625rem);
|
|
94
|
+
}
|
|
95
|
+
.eds-table--small .eds-editable-cell .eds-form-control-wrapper:not(.eds-datepicker__datefield) .eds-form-control {
|
|
96
|
+
padding: calc(0.25rem - 0.125rem) calc(0.5rem - 0.0625rem);
|
|
97
|
+
}
|
|
98
|
+
/* DO NOT CHANGE!*/
|
|
99
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
100
|
+
.eds-expand-row-button__icon {
|
|
101
|
+
transition: transform ease-in-out 0.2s;
|
|
102
|
+
}
|
|
103
|
+
.eds-expand-row-button--open .eds-expand-row-button__icon {
|
|
104
|
+
transform: rotate(180deg);
|
|
105
|
+
}
|
|
106
|
+
/* DO NOT CHANGE!*/
|
|
107
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
108
|
/* DO NOT CHANGE!*/
|
|
4
109
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
5
110
|
/* DO NOT CHANGE!*/
|
|
@@ -197,6 +302,7 @@
|
|
|
197
302
|
padding: 1rem 1.5rem;
|
|
198
303
|
}
|
|
199
304
|
.eds-contrast .eds-table__data-cell {
|
|
305
|
+
border-bottom-color: #8284ab;
|
|
200
306
|
border-bottom-color: var(--components-table-contrast-stroke);
|
|
201
307
|
}
|
|
202
308
|
.eds-table--middle .eds-table__data-cell {
|
|
@@ -220,41 +326,53 @@
|
|
|
220
326
|
padding: 1rem 0.75rem;
|
|
221
327
|
}
|
|
222
328
|
.eds-table__body > .eds-table__row {
|
|
329
|
+
border-bottom: 0.0625rem solid #e3e6e8;
|
|
223
330
|
border-bottom: 0.0625rem solid var(--components-table-standard-stroke);
|
|
224
331
|
}
|
|
225
332
|
.eds-contrast .eds-table__body > .eds-table__row {
|
|
333
|
+
border-color: #8284ab;
|
|
226
334
|
border-color: var(--components-table-contrast-stroke);
|
|
227
335
|
}
|
|
228
336
|
.eds-table__body > .eds-table__row:focus-visible {
|
|
229
337
|
outline: 2px solid #181c56;
|
|
338
|
+
outline-color: #181c56;
|
|
230
339
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
231
340
|
outline-offset: 0.125rem;
|
|
232
341
|
}
|
|
233
342
|
.eds-contrast .eds-table__body > .eds-table__row:focus-visible {
|
|
343
|
+
outline-color: #aeb7e2;
|
|
234
344
|
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
235
345
|
}
|
|
236
346
|
.eds-table__body > .eds-table__row--hover:hover {
|
|
347
|
+
background: #f2f5f7;
|
|
237
348
|
background: var(--components-table-standard-cell-fill-hover);
|
|
238
349
|
}
|
|
239
350
|
.eds-contrast .eds-table__body > .eds-table__row--hover:hover {
|
|
351
|
+
background: #393d79;
|
|
240
352
|
background: var(--components-table-contrast-cell-fill-hover);
|
|
241
353
|
}
|
|
242
354
|
.eds-table__body > .eds-table__row--active {
|
|
355
|
+
background: #f2f5f7;
|
|
243
356
|
background: var(--components-table-standard-cell-fill-hover);
|
|
244
357
|
}
|
|
245
358
|
.eds-contrast .eds-table__body > .eds-table__row--active {
|
|
359
|
+
background: #393d79;
|
|
246
360
|
background: var(--components-table-contrast-cell-fill-hover);
|
|
247
361
|
}
|
|
248
362
|
.eds-table__body > .eds-table__row--error {
|
|
363
|
+
background: #ffcece;
|
|
249
364
|
background: var(--components-table-standard-fill-negative);
|
|
250
365
|
}
|
|
251
366
|
.eds-contrast .eds-table__body > .eds-table__row--error {
|
|
367
|
+
background: rgba(255, 148, 148, 0.2);
|
|
252
368
|
background: var(--components-table-contrast-cell-fill-negative);
|
|
253
369
|
}
|
|
254
370
|
.eds-table__head {
|
|
371
|
+
border-bottom: 0.125rem solid #e3e6e8;
|
|
255
372
|
border-bottom: 0.125rem solid var(--components-table-standard-stroke);
|
|
256
373
|
}
|
|
257
374
|
.eds-contrast .eds-table__head {
|
|
375
|
+
border-color: #8284ab;
|
|
258
376
|
border-color: var(--components-table-contrast-stroke);
|
|
259
377
|
}
|
|
260
378
|
.eds-table--sticky-header .eds-table__head {
|
|
@@ -265,104 +383,4 @@
|
|
|
265
383
|
.eds-table--sticky-header--active .eds-table__head {
|
|
266
384
|
box-shadow: 0px 10px 8px -10px rgba(0, 0, 0, 0.15);
|
|
267
385
|
border-bottom: none;
|
|
268
|
-
}/* DO NOT CHANGE!*/
|
|
269
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
270
|
-
.eds-table__header-cell {
|
|
271
|
-
color: var(--components-table-standard-text);
|
|
272
|
-
font-size: 1rem;
|
|
273
|
-
font-weight: 600;
|
|
274
|
-
text-align: left;
|
|
275
|
-
height: 3rem;
|
|
276
|
-
padding: 0 1.5rem;
|
|
277
|
-
}
|
|
278
|
-
.eds-table--middle .eds-table__header-cell, .eds-table--small .eds-table__header-cell {
|
|
279
|
-
padding: 0 1rem;
|
|
280
|
-
}
|
|
281
|
-
.eds-contrast .eds-table__header-cell {
|
|
282
|
-
color: var(--components-table-contrast-text);
|
|
283
|
-
border-bottom-color: var(--components-table-contrast-stroke);
|
|
284
|
-
}
|
|
285
|
-
.eds-table__header-cell--padding-checkbox {
|
|
286
|
-
width: 3rem;
|
|
287
|
-
padding: 0 0 1rem 1.25rem;
|
|
288
|
-
}
|
|
289
|
-
.eds-table__header-cell--padding-radio {
|
|
290
|
-
width: 3rem;
|
|
291
|
-
padding: 0 0 1rem 1.25rem;
|
|
292
|
-
}
|
|
293
|
-
.eds-table__header-cell--padding-overflow-menu {
|
|
294
|
-
width: 3rem;
|
|
295
|
-
padding: 1rem 0.75rem;
|
|
296
|
-
}
|
|
297
|
-
.eds-table__header-cell--sortable:focus-visible {
|
|
298
|
-
outline: 2px solid #181c56;
|
|
299
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
300
|
-
outline-offset: 0.125rem;
|
|
301
|
-
}
|
|
302
|
-
.eds-contrast .eds-table__header-cell--sortable:focus-visible {
|
|
303
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
304
|
-
}
|
|
305
|
-
.eds-table__header-cell-button {
|
|
306
|
-
position: relative;
|
|
307
|
-
text-align: left;
|
|
308
|
-
height: 100%;
|
|
309
|
-
width: 100%;
|
|
310
|
-
padding: 0;
|
|
311
|
-
cursor: pointer;
|
|
312
|
-
appearance: none;
|
|
313
|
-
border: none;
|
|
314
|
-
background: none;
|
|
315
|
-
color: inherit;
|
|
316
|
-
font-size: inherit;
|
|
317
|
-
font-weight: inherit;
|
|
318
|
-
font-family: inherit;
|
|
319
|
-
}
|
|
320
|
-
.eds-table__header-cell-button-icon {
|
|
321
|
-
position: absolute;
|
|
322
|
-
margin-left: 0.25rem;
|
|
323
386
|
}
|
|
324
|
-
.eds-table__header-cell-button:focus-visible {
|
|
325
|
-
outline: 2px solid #181c56;
|
|
326
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
327
|
-
outline-offset: 0.125rem;
|
|
328
|
-
}
|
|
329
|
-
.eds-contrast .eds-table__header-cell-button:focus-visible {
|
|
330
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
331
|
-
}
|
|
332
|
-
.eds-table--sticky-header .eds-table__header-cell {
|
|
333
|
-
background-color: var(--components-table-standard-header-fill);
|
|
334
|
-
position: sticky;
|
|
335
|
-
top: 0;
|
|
336
|
-
}
|
|
337
|
-
.eds-contrast .eds-table--sticky-header .eds-table__header-cell {
|
|
338
|
-
background-color: var(--components-table-contrast-header-fill);
|
|
339
|
-
}/* DO NOT CHANGE!*/
|
|
340
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
341
|
-
.eds-editable-cell {
|
|
342
|
-
padding: 0.25rem 0.75rem;
|
|
343
|
-
}
|
|
344
|
-
.eds-table--middle .eds-editable-cell {
|
|
345
|
-
padding: 0.25rem 0.5rem;
|
|
346
|
-
}
|
|
347
|
-
.eds-table--small .eds-editable-cell {
|
|
348
|
-
padding: 0.125rem 0.5rem;
|
|
349
|
-
}
|
|
350
|
-
.eds-editable-cell .eds-form-control-wrapper:not(.eds-datepicker__datefield) {
|
|
351
|
-
min-height: 0;
|
|
352
|
-
}
|
|
353
|
-
.eds-editable-cell .eds-form-control-wrapper:not(.eds-datepicker__datefield) .eds-form-control {
|
|
354
|
-
padding: 0.75rem;
|
|
355
|
-
}
|
|
356
|
-
.eds-table--middle .eds-editable-cell .eds-form-control-wrapper:not(.eds-datepicker__datefield) .eds-form-control {
|
|
357
|
-
padding: 0.25rem calc(0.5rem - 0.0625rem);
|
|
358
|
-
}
|
|
359
|
-
.eds-table--small .eds-editable-cell .eds-form-control-wrapper:not(.eds-datepicker__datefield) .eds-form-control {
|
|
360
|
-
padding: calc(0.25rem - 0.125rem) calc(0.5rem - 0.0625rem);
|
|
361
|
-
}/* DO NOT CHANGE!*/
|
|
362
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
363
|
-
.eds-expand-row-button__icon {
|
|
364
|
-
transition: transform ease-in-out 0.2s;
|
|
365
|
-
}
|
|
366
|
-
.eds-expand-row-button--open .eds-expand-row-button__icon {
|
|
367
|
-
transform: rotate(180deg);
|
|
368
|
-
}
|