@cloudscape-design/components 3.0.378 → 3.0.379
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/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/generated/styles/tokens.d.ts +21 -0
- package/internal/generated/styles/tokens.js +21 -0
- package/internal/generated/theming/index.cjs +42 -0
- package/internal/generated/theming/index.cjs.d.ts +168 -0
- package/internal/generated/theming/index.d.ts +168 -0
- package/internal/generated/theming/index.js +42 -0
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/table/body-cell/td-element.d.ts.map +1 -1
- package/table/body-cell/td-element.js +3 -8
- package/table/body-cell/td-element.js.map +1 -1
- package/table/resizer/index.d.ts.map +1 -1
- package/table/resizer/index.js +104 -45
- package/table/resizer/index.js.map +1 -1
- package/table/sticky-columns/use-sticky-columns.d.ts +2 -2
- package/table/sticky-columns/use-sticky-columns.d.ts.map +1 -1
- package/table/sticky-columns/use-sticky-columns.js.map +1 -1
package/internal/environment.js
CHANGED
|
@@ -258,6 +258,27 @@ export const colorDragPlaceholderActive: string;
|
|
|
258
258
|
export const colorDragPlaceholderHover: string;
|
|
259
259
|
export const fontFamilyBase: string;
|
|
260
260
|
export const fontFamilyMonospace: string;
|
|
261
|
+
export const fontSizeBodyM: string;
|
|
262
|
+
export const fontSizeBodyS: string;
|
|
263
|
+
export const fontSizeDisplayL: string;
|
|
264
|
+
export const fontSizeHeadingXl: string;
|
|
265
|
+
export const fontSizeHeadingL: string;
|
|
266
|
+
export const fontSizeHeadingM: string;
|
|
267
|
+
export const fontSizeHeadingS: string;
|
|
268
|
+
export const fontSizeHeadingXs: string;
|
|
269
|
+
export const fontWeightHeadingXl: string;
|
|
270
|
+
export const fontWeightHeadingL: string;
|
|
271
|
+
export const fontWeightHeadingM: string;
|
|
272
|
+
export const fontWeightHeadingS: string;
|
|
273
|
+
export const fontWeightHeadingXs: string;
|
|
274
|
+
export const lineHeightBodyM: string;
|
|
275
|
+
export const lineHeightBodyS: string;
|
|
276
|
+
export const lineHeightDisplayL: string;
|
|
277
|
+
export const lineHeightHeadingXl: string;
|
|
278
|
+
export const lineHeightHeadingL: string;
|
|
279
|
+
export const lineHeightHeadingM: string;
|
|
280
|
+
export const lineHeightHeadingS: string;
|
|
281
|
+
export const lineHeightHeadingXs: string;
|
|
261
282
|
export const borderRadiusAlert: string;
|
|
262
283
|
export const borderRadiusBadge: string;
|
|
263
284
|
export const borderRadiusButton: string;
|
|
@@ -258,6 +258,27 @@ export var colorDragPlaceholderActive = "var(--color-drag-placeholder-active-j62
|
|
|
258
258
|
export var colorDragPlaceholderHover = "var(--color-drag-placeholder-hover-4im65s, #d3e7f9)";
|
|
259
259
|
export var fontFamilyBase = "var(--font-family-base-dnvic8, 'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif)";
|
|
260
260
|
export var fontFamilyMonospace = "var(--font-family-monospace-bftdwf, Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace)";
|
|
261
|
+
export var fontSizeBodyM = "var(--font-size-body-m-x4okxb, 14px)";
|
|
262
|
+
export var fontSizeBodyS = "var(--font-size-body-s-asqx2i, 12px)";
|
|
263
|
+
export var fontSizeDisplayL = "var(--font-size-display-l-htkq3e, 42px)";
|
|
264
|
+
export var fontSizeHeadingXl = "var(--font-size-heading-xl-ypc05a, 24px)";
|
|
265
|
+
export var fontSizeHeadingL = "var(--font-size-heading-l-ou0d0l, 20px)";
|
|
266
|
+
export var fontSizeHeadingM = "var(--font-size-heading-m-sjd256, 18px)";
|
|
267
|
+
export var fontSizeHeadingS = "var(--font-size-heading-s-yykzif, 16px)";
|
|
268
|
+
export var fontSizeHeadingXs = "var(--font-size-heading-xs-wo4hpf, 14px)";
|
|
269
|
+
export var fontWeightHeadingXl = "var(--font-weight-heading-xl-yvsksd, 700)";
|
|
270
|
+
export var fontWeightHeadingL = "var(--font-weight-heading-l-f8711v, 700)";
|
|
271
|
+
export var fontWeightHeadingM = "var(--font-weight-heading-m-m2ekmb, 700)";
|
|
272
|
+
export var fontWeightHeadingS = "var(--font-weight-heading-s-cwn6wc, 700)";
|
|
273
|
+
export var fontWeightHeadingXs = "var(--font-weight-heading-xs-l7rqme, 700)";
|
|
274
|
+
export var lineHeightBodyM = "var(--line-height-body-m-30ar75, 20px)";
|
|
275
|
+
export var lineHeightBodyS = "var(--line-height-body-s-7zv1j5, 16px)";
|
|
276
|
+
export var lineHeightDisplayL = "var(--line-height-display-l-8nioft, 48px)";
|
|
277
|
+
export var lineHeightHeadingXl = "var(--line-height-heading-xl-avbttk, 30px)";
|
|
278
|
+
export var lineHeightHeadingL = "var(--line-height-heading-l-mmm3my, 24px)";
|
|
279
|
+
export var lineHeightHeadingM = "var(--line-height-heading-m-50evfk, 22px)";
|
|
280
|
+
export var lineHeightHeadingS = "var(--line-height-heading-s-4i6ewn, 20px)";
|
|
281
|
+
export var lineHeightHeadingXs = "var(--line-height-heading-xs-aeleja, 18px)";
|
|
261
282
|
export var borderRadiusAlert = "var(--border-radius-alert-mdtrse, 12px)";
|
|
262
283
|
export var borderRadiusBadge = "var(--border-radius-badge-0z09dt, 4px)";
|
|
263
284
|
export var borderRadiusButton = "var(--border-radius-button-ypmfry, 20px)";
|
|
@@ -9131,6 +9131,27 @@ module.exports.preset = {
|
|
|
9131
9131
|
"colorTextTopNavigationTitle",
|
|
9132
9132
|
"fontFamilyBase",
|
|
9133
9133
|
"fontFamilyMonospace",
|
|
9134
|
+
"fontSizeBodyM",
|
|
9135
|
+
"fontSizeBodyS",
|
|
9136
|
+
"fontSizeDisplayL",
|
|
9137
|
+
"fontSizeHeadingXl",
|
|
9138
|
+
"fontSizeHeadingL",
|
|
9139
|
+
"fontSizeHeadingM",
|
|
9140
|
+
"fontSizeHeadingS",
|
|
9141
|
+
"fontSizeHeadingXs",
|
|
9142
|
+
"fontWeightHeadingXl",
|
|
9143
|
+
"fontWeightHeadingL",
|
|
9144
|
+
"fontWeightHeadingM",
|
|
9145
|
+
"fontWeightHeadingS",
|
|
9146
|
+
"fontWeightHeadingXs",
|
|
9147
|
+
"lineHeightBodyM",
|
|
9148
|
+
"lineHeightBodyS",
|
|
9149
|
+
"lineHeightDisplayL",
|
|
9150
|
+
"lineHeightHeadingXl",
|
|
9151
|
+
"lineHeightHeadingL",
|
|
9152
|
+
"lineHeightHeadingM",
|
|
9153
|
+
"lineHeightHeadingS",
|
|
9154
|
+
"lineHeightHeadingXs",
|
|
9134
9155
|
"borderRadiusAlert",
|
|
9135
9156
|
"borderRadiusBadge",
|
|
9136
9157
|
"borderRadiusButton",
|
|
@@ -9409,6 +9430,27 @@ module.exports.preset = {
|
|
|
9409
9430
|
"colorDragPlaceholderHover",
|
|
9410
9431
|
"fontFamilyBase",
|
|
9411
9432
|
"fontFamilyMonospace",
|
|
9433
|
+
"fontSizeBodyM",
|
|
9434
|
+
"fontSizeBodyS",
|
|
9435
|
+
"fontSizeDisplayL",
|
|
9436
|
+
"fontSizeHeadingXl",
|
|
9437
|
+
"fontSizeHeadingL",
|
|
9438
|
+
"fontSizeHeadingM",
|
|
9439
|
+
"fontSizeHeadingS",
|
|
9440
|
+
"fontSizeHeadingXs",
|
|
9441
|
+
"fontWeightHeadingXl",
|
|
9442
|
+
"fontWeightHeadingL",
|
|
9443
|
+
"fontWeightHeadingM",
|
|
9444
|
+
"fontWeightHeadingS",
|
|
9445
|
+
"fontWeightHeadingXs",
|
|
9446
|
+
"lineHeightBodyM",
|
|
9447
|
+
"lineHeightBodyS",
|
|
9448
|
+
"lineHeightDisplayL",
|
|
9449
|
+
"lineHeightHeadingXl",
|
|
9450
|
+
"lineHeightHeadingL",
|
|
9451
|
+
"lineHeightHeadingM",
|
|
9452
|
+
"lineHeightHeadingS",
|
|
9453
|
+
"lineHeightHeadingXs",
|
|
9412
9454
|
"borderRadiusAlert",
|
|
9413
9455
|
"borderRadiusBadge",
|
|
9414
9456
|
"borderRadiusButton",
|
|
@@ -168,6 +168,27 @@ export declare interface TypedOverride {
|
|
|
168
168
|
colorTextTopNavigationTitle?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
|
|
169
169
|
fontFamilyBase?: GlobalValue;
|
|
170
170
|
fontFamilyMonospace?: GlobalValue;
|
|
171
|
+
fontSizeBodyM?: GlobalValue;
|
|
172
|
+
fontSizeBodyS?: GlobalValue;
|
|
173
|
+
fontSizeDisplayL?: GlobalValue;
|
|
174
|
+
fontSizeHeadingXl?: GlobalValue;
|
|
175
|
+
fontSizeHeadingL?: GlobalValue;
|
|
176
|
+
fontSizeHeadingM?: GlobalValue;
|
|
177
|
+
fontSizeHeadingS?: GlobalValue;
|
|
178
|
+
fontSizeHeadingXs?: GlobalValue;
|
|
179
|
+
fontWeightHeadingXl?: GlobalValue;
|
|
180
|
+
fontWeightHeadingL?: GlobalValue;
|
|
181
|
+
fontWeightHeadingM?: GlobalValue;
|
|
182
|
+
fontWeightHeadingS?: GlobalValue;
|
|
183
|
+
fontWeightHeadingXs?: GlobalValue;
|
|
184
|
+
lineHeightBodyM?: GlobalValue;
|
|
185
|
+
lineHeightBodyS?: GlobalValue;
|
|
186
|
+
lineHeightDisplayL?: GlobalValue;
|
|
187
|
+
lineHeightHeadingXl?: GlobalValue;
|
|
188
|
+
lineHeightHeadingL?: GlobalValue;
|
|
189
|
+
lineHeightHeadingM?: GlobalValue;
|
|
190
|
+
lineHeightHeadingS?: GlobalValue;
|
|
191
|
+
lineHeightHeadingXs?: GlobalValue;
|
|
171
192
|
borderRadiusAlert?: GlobalValue;
|
|
172
193
|
borderRadiusBadge?: GlobalValue;
|
|
173
194
|
borderRadiusButton?: GlobalValue;
|
|
@@ -354,6 +375,27 @@ export declare interface TypedOverride {
|
|
|
354
375
|
colorTextTopNavigationTitle?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
|
|
355
376
|
fontFamilyBase?: GlobalValue;
|
|
356
377
|
fontFamilyMonospace?: GlobalValue;
|
|
378
|
+
fontSizeBodyM?: GlobalValue;
|
|
379
|
+
fontSizeBodyS?: GlobalValue;
|
|
380
|
+
fontSizeDisplayL?: GlobalValue;
|
|
381
|
+
fontSizeHeadingXl?: GlobalValue;
|
|
382
|
+
fontSizeHeadingL?: GlobalValue;
|
|
383
|
+
fontSizeHeadingM?: GlobalValue;
|
|
384
|
+
fontSizeHeadingS?: GlobalValue;
|
|
385
|
+
fontSizeHeadingXs?: GlobalValue;
|
|
386
|
+
fontWeightHeadingXl?: GlobalValue;
|
|
387
|
+
fontWeightHeadingL?: GlobalValue;
|
|
388
|
+
fontWeightHeadingM?: GlobalValue;
|
|
389
|
+
fontWeightHeadingS?: GlobalValue;
|
|
390
|
+
fontWeightHeadingXs?: GlobalValue;
|
|
391
|
+
lineHeightBodyM?: GlobalValue;
|
|
392
|
+
lineHeightBodyS?: GlobalValue;
|
|
393
|
+
lineHeightDisplayL?: GlobalValue;
|
|
394
|
+
lineHeightHeadingXl?: GlobalValue;
|
|
395
|
+
lineHeightHeadingL?: GlobalValue;
|
|
396
|
+
lineHeightHeadingM?: GlobalValue;
|
|
397
|
+
lineHeightHeadingS?: GlobalValue;
|
|
398
|
+
lineHeightHeadingXs?: GlobalValue;
|
|
357
399
|
borderRadiusAlert?: GlobalValue;
|
|
358
400
|
borderRadiusBadge?: GlobalValue;
|
|
359
401
|
borderRadiusButton?: GlobalValue;
|
|
@@ -540,6 +582,27 @@ export declare interface TypedOverride {
|
|
|
540
582
|
colorTextTopNavigationTitle?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
|
|
541
583
|
fontFamilyBase?: GlobalValue;
|
|
542
584
|
fontFamilyMonospace?: GlobalValue;
|
|
585
|
+
fontSizeBodyM?: GlobalValue;
|
|
586
|
+
fontSizeBodyS?: GlobalValue;
|
|
587
|
+
fontSizeDisplayL?: GlobalValue;
|
|
588
|
+
fontSizeHeadingXl?: GlobalValue;
|
|
589
|
+
fontSizeHeadingL?: GlobalValue;
|
|
590
|
+
fontSizeHeadingM?: GlobalValue;
|
|
591
|
+
fontSizeHeadingS?: GlobalValue;
|
|
592
|
+
fontSizeHeadingXs?: GlobalValue;
|
|
593
|
+
fontWeightHeadingXl?: GlobalValue;
|
|
594
|
+
fontWeightHeadingL?: GlobalValue;
|
|
595
|
+
fontWeightHeadingM?: GlobalValue;
|
|
596
|
+
fontWeightHeadingS?: GlobalValue;
|
|
597
|
+
fontWeightHeadingXs?: GlobalValue;
|
|
598
|
+
lineHeightBodyM?: GlobalValue;
|
|
599
|
+
lineHeightBodyS?: GlobalValue;
|
|
600
|
+
lineHeightDisplayL?: GlobalValue;
|
|
601
|
+
lineHeightHeadingXl?: GlobalValue;
|
|
602
|
+
lineHeightHeadingL?: GlobalValue;
|
|
603
|
+
lineHeightHeadingM?: GlobalValue;
|
|
604
|
+
lineHeightHeadingS?: GlobalValue;
|
|
605
|
+
lineHeightHeadingXs?: GlobalValue;
|
|
543
606
|
borderRadiusAlert?: GlobalValue;
|
|
544
607
|
borderRadiusBadge?: GlobalValue;
|
|
545
608
|
borderRadiusButton?: GlobalValue;
|
|
@@ -726,6 +789,27 @@ export declare interface TypedOverride {
|
|
|
726
789
|
colorTextTopNavigationTitle?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
|
|
727
790
|
fontFamilyBase?: GlobalValue;
|
|
728
791
|
fontFamilyMonospace?: GlobalValue;
|
|
792
|
+
fontSizeBodyM?: GlobalValue;
|
|
793
|
+
fontSizeBodyS?: GlobalValue;
|
|
794
|
+
fontSizeDisplayL?: GlobalValue;
|
|
795
|
+
fontSizeHeadingXl?: GlobalValue;
|
|
796
|
+
fontSizeHeadingL?: GlobalValue;
|
|
797
|
+
fontSizeHeadingM?: GlobalValue;
|
|
798
|
+
fontSizeHeadingS?: GlobalValue;
|
|
799
|
+
fontSizeHeadingXs?: GlobalValue;
|
|
800
|
+
fontWeightHeadingXl?: GlobalValue;
|
|
801
|
+
fontWeightHeadingL?: GlobalValue;
|
|
802
|
+
fontWeightHeadingM?: GlobalValue;
|
|
803
|
+
fontWeightHeadingS?: GlobalValue;
|
|
804
|
+
fontWeightHeadingXs?: GlobalValue;
|
|
805
|
+
lineHeightBodyM?: GlobalValue;
|
|
806
|
+
lineHeightBodyS?: GlobalValue;
|
|
807
|
+
lineHeightDisplayL?: GlobalValue;
|
|
808
|
+
lineHeightHeadingXl?: GlobalValue;
|
|
809
|
+
lineHeightHeadingL?: GlobalValue;
|
|
810
|
+
lineHeightHeadingM?: GlobalValue;
|
|
811
|
+
lineHeightHeadingS?: GlobalValue;
|
|
812
|
+
lineHeightHeadingXs?: GlobalValue;
|
|
729
813
|
borderRadiusAlert?: GlobalValue;
|
|
730
814
|
borderRadiusBadge?: GlobalValue;
|
|
731
815
|
borderRadiusButton?: GlobalValue;
|
|
@@ -912,6 +996,27 @@ export declare interface TypedOverride {
|
|
|
912
996
|
colorTextTopNavigationTitle?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
|
|
913
997
|
fontFamilyBase?: GlobalValue;
|
|
914
998
|
fontFamilyMonospace?: GlobalValue;
|
|
999
|
+
fontSizeBodyM?: GlobalValue;
|
|
1000
|
+
fontSizeBodyS?: GlobalValue;
|
|
1001
|
+
fontSizeDisplayL?: GlobalValue;
|
|
1002
|
+
fontSizeHeadingXl?: GlobalValue;
|
|
1003
|
+
fontSizeHeadingL?: GlobalValue;
|
|
1004
|
+
fontSizeHeadingM?: GlobalValue;
|
|
1005
|
+
fontSizeHeadingS?: GlobalValue;
|
|
1006
|
+
fontSizeHeadingXs?: GlobalValue;
|
|
1007
|
+
fontWeightHeadingXl?: GlobalValue;
|
|
1008
|
+
fontWeightHeadingL?: GlobalValue;
|
|
1009
|
+
fontWeightHeadingM?: GlobalValue;
|
|
1010
|
+
fontWeightHeadingS?: GlobalValue;
|
|
1011
|
+
fontWeightHeadingXs?: GlobalValue;
|
|
1012
|
+
lineHeightBodyM?: GlobalValue;
|
|
1013
|
+
lineHeightBodyS?: GlobalValue;
|
|
1014
|
+
lineHeightDisplayL?: GlobalValue;
|
|
1015
|
+
lineHeightHeadingXl?: GlobalValue;
|
|
1016
|
+
lineHeightHeadingL?: GlobalValue;
|
|
1017
|
+
lineHeightHeadingM?: GlobalValue;
|
|
1018
|
+
lineHeightHeadingS?: GlobalValue;
|
|
1019
|
+
lineHeightHeadingXs?: GlobalValue;
|
|
915
1020
|
borderRadiusAlert?: GlobalValue;
|
|
916
1021
|
borderRadiusBadge?: GlobalValue;
|
|
917
1022
|
borderRadiusButton?: GlobalValue;
|
|
@@ -1098,6 +1203,27 @@ export declare interface TypedOverride {
|
|
|
1098
1203
|
colorTextTopNavigationTitle?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
|
|
1099
1204
|
fontFamilyBase?: GlobalValue;
|
|
1100
1205
|
fontFamilyMonospace?: GlobalValue;
|
|
1206
|
+
fontSizeBodyM?: GlobalValue;
|
|
1207
|
+
fontSizeBodyS?: GlobalValue;
|
|
1208
|
+
fontSizeDisplayL?: GlobalValue;
|
|
1209
|
+
fontSizeHeadingXl?: GlobalValue;
|
|
1210
|
+
fontSizeHeadingL?: GlobalValue;
|
|
1211
|
+
fontSizeHeadingM?: GlobalValue;
|
|
1212
|
+
fontSizeHeadingS?: GlobalValue;
|
|
1213
|
+
fontSizeHeadingXs?: GlobalValue;
|
|
1214
|
+
fontWeightHeadingXl?: GlobalValue;
|
|
1215
|
+
fontWeightHeadingL?: GlobalValue;
|
|
1216
|
+
fontWeightHeadingM?: GlobalValue;
|
|
1217
|
+
fontWeightHeadingS?: GlobalValue;
|
|
1218
|
+
fontWeightHeadingXs?: GlobalValue;
|
|
1219
|
+
lineHeightBodyM?: GlobalValue;
|
|
1220
|
+
lineHeightBodyS?: GlobalValue;
|
|
1221
|
+
lineHeightDisplayL?: GlobalValue;
|
|
1222
|
+
lineHeightHeadingXl?: GlobalValue;
|
|
1223
|
+
lineHeightHeadingL?: GlobalValue;
|
|
1224
|
+
lineHeightHeadingM?: GlobalValue;
|
|
1225
|
+
lineHeightHeadingS?: GlobalValue;
|
|
1226
|
+
lineHeightHeadingXs?: GlobalValue;
|
|
1101
1227
|
borderRadiusAlert?: GlobalValue;
|
|
1102
1228
|
borderRadiusBadge?: GlobalValue;
|
|
1103
1229
|
borderRadiusButton?: GlobalValue;
|
|
@@ -1284,6 +1410,27 @@ export declare interface TypedOverride {
|
|
|
1284
1410
|
colorTextTopNavigationTitle?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
|
|
1285
1411
|
fontFamilyBase?: GlobalValue;
|
|
1286
1412
|
fontFamilyMonospace?: GlobalValue;
|
|
1413
|
+
fontSizeBodyM?: GlobalValue;
|
|
1414
|
+
fontSizeBodyS?: GlobalValue;
|
|
1415
|
+
fontSizeDisplayL?: GlobalValue;
|
|
1416
|
+
fontSizeHeadingXl?: GlobalValue;
|
|
1417
|
+
fontSizeHeadingL?: GlobalValue;
|
|
1418
|
+
fontSizeHeadingM?: GlobalValue;
|
|
1419
|
+
fontSizeHeadingS?: GlobalValue;
|
|
1420
|
+
fontSizeHeadingXs?: GlobalValue;
|
|
1421
|
+
fontWeightHeadingXl?: GlobalValue;
|
|
1422
|
+
fontWeightHeadingL?: GlobalValue;
|
|
1423
|
+
fontWeightHeadingM?: GlobalValue;
|
|
1424
|
+
fontWeightHeadingS?: GlobalValue;
|
|
1425
|
+
fontWeightHeadingXs?: GlobalValue;
|
|
1426
|
+
lineHeightBodyM?: GlobalValue;
|
|
1427
|
+
lineHeightBodyS?: GlobalValue;
|
|
1428
|
+
lineHeightDisplayL?: GlobalValue;
|
|
1429
|
+
lineHeightHeadingXl?: GlobalValue;
|
|
1430
|
+
lineHeightHeadingL?: GlobalValue;
|
|
1431
|
+
lineHeightHeadingM?: GlobalValue;
|
|
1432
|
+
lineHeightHeadingS?: GlobalValue;
|
|
1433
|
+
lineHeightHeadingXs?: GlobalValue;
|
|
1287
1434
|
borderRadiusAlert?: GlobalValue;
|
|
1288
1435
|
borderRadiusBadge?: GlobalValue;
|
|
1289
1436
|
borderRadiusButton?: GlobalValue;
|
|
@@ -1470,6 +1617,27 @@ export declare interface TypedOverride {
|
|
|
1470
1617
|
colorTextTopNavigationTitle?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
|
|
1471
1618
|
fontFamilyBase?: GlobalValue;
|
|
1472
1619
|
fontFamilyMonospace?: GlobalValue;
|
|
1620
|
+
fontSizeBodyM?: GlobalValue;
|
|
1621
|
+
fontSizeBodyS?: GlobalValue;
|
|
1622
|
+
fontSizeDisplayL?: GlobalValue;
|
|
1623
|
+
fontSizeHeadingXl?: GlobalValue;
|
|
1624
|
+
fontSizeHeadingL?: GlobalValue;
|
|
1625
|
+
fontSizeHeadingM?: GlobalValue;
|
|
1626
|
+
fontSizeHeadingS?: GlobalValue;
|
|
1627
|
+
fontSizeHeadingXs?: GlobalValue;
|
|
1628
|
+
fontWeightHeadingXl?: GlobalValue;
|
|
1629
|
+
fontWeightHeadingL?: GlobalValue;
|
|
1630
|
+
fontWeightHeadingM?: GlobalValue;
|
|
1631
|
+
fontWeightHeadingS?: GlobalValue;
|
|
1632
|
+
fontWeightHeadingXs?: GlobalValue;
|
|
1633
|
+
lineHeightBodyM?: GlobalValue;
|
|
1634
|
+
lineHeightBodyS?: GlobalValue;
|
|
1635
|
+
lineHeightDisplayL?: GlobalValue;
|
|
1636
|
+
lineHeightHeadingXl?: GlobalValue;
|
|
1637
|
+
lineHeightHeadingL?: GlobalValue;
|
|
1638
|
+
lineHeightHeadingM?: GlobalValue;
|
|
1639
|
+
lineHeightHeadingS?: GlobalValue;
|
|
1640
|
+
lineHeightHeadingXs?: GlobalValue;
|
|
1473
1641
|
borderRadiusAlert?: GlobalValue;
|
|
1474
1642
|
borderRadiusBadge?: GlobalValue;
|
|
1475
1643
|
borderRadiusButton?: GlobalValue;
|
|
@@ -168,6 +168,27 @@ export declare interface TypedOverride {
|
|
|
168
168
|
colorTextTopNavigationTitle?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
|
|
169
169
|
fontFamilyBase?: GlobalValue;
|
|
170
170
|
fontFamilyMonospace?: GlobalValue;
|
|
171
|
+
fontSizeBodyM?: GlobalValue;
|
|
172
|
+
fontSizeBodyS?: GlobalValue;
|
|
173
|
+
fontSizeDisplayL?: GlobalValue;
|
|
174
|
+
fontSizeHeadingXl?: GlobalValue;
|
|
175
|
+
fontSizeHeadingL?: GlobalValue;
|
|
176
|
+
fontSizeHeadingM?: GlobalValue;
|
|
177
|
+
fontSizeHeadingS?: GlobalValue;
|
|
178
|
+
fontSizeHeadingXs?: GlobalValue;
|
|
179
|
+
fontWeightHeadingXl?: GlobalValue;
|
|
180
|
+
fontWeightHeadingL?: GlobalValue;
|
|
181
|
+
fontWeightHeadingM?: GlobalValue;
|
|
182
|
+
fontWeightHeadingS?: GlobalValue;
|
|
183
|
+
fontWeightHeadingXs?: GlobalValue;
|
|
184
|
+
lineHeightBodyM?: GlobalValue;
|
|
185
|
+
lineHeightBodyS?: GlobalValue;
|
|
186
|
+
lineHeightDisplayL?: GlobalValue;
|
|
187
|
+
lineHeightHeadingXl?: GlobalValue;
|
|
188
|
+
lineHeightHeadingL?: GlobalValue;
|
|
189
|
+
lineHeightHeadingM?: GlobalValue;
|
|
190
|
+
lineHeightHeadingS?: GlobalValue;
|
|
191
|
+
lineHeightHeadingXs?: GlobalValue;
|
|
171
192
|
borderRadiusAlert?: GlobalValue;
|
|
172
193
|
borderRadiusBadge?: GlobalValue;
|
|
173
194
|
borderRadiusButton?: GlobalValue;
|
|
@@ -354,6 +375,27 @@ export declare interface TypedOverride {
|
|
|
354
375
|
colorTextTopNavigationTitle?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
|
|
355
376
|
fontFamilyBase?: GlobalValue;
|
|
356
377
|
fontFamilyMonospace?: GlobalValue;
|
|
378
|
+
fontSizeBodyM?: GlobalValue;
|
|
379
|
+
fontSizeBodyS?: GlobalValue;
|
|
380
|
+
fontSizeDisplayL?: GlobalValue;
|
|
381
|
+
fontSizeHeadingXl?: GlobalValue;
|
|
382
|
+
fontSizeHeadingL?: GlobalValue;
|
|
383
|
+
fontSizeHeadingM?: GlobalValue;
|
|
384
|
+
fontSizeHeadingS?: GlobalValue;
|
|
385
|
+
fontSizeHeadingXs?: GlobalValue;
|
|
386
|
+
fontWeightHeadingXl?: GlobalValue;
|
|
387
|
+
fontWeightHeadingL?: GlobalValue;
|
|
388
|
+
fontWeightHeadingM?: GlobalValue;
|
|
389
|
+
fontWeightHeadingS?: GlobalValue;
|
|
390
|
+
fontWeightHeadingXs?: GlobalValue;
|
|
391
|
+
lineHeightBodyM?: GlobalValue;
|
|
392
|
+
lineHeightBodyS?: GlobalValue;
|
|
393
|
+
lineHeightDisplayL?: GlobalValue;
|
|
394
|
+
lineHeightHeadingXl?: GlobalValue;
|
|
395
|
+
lineHeightHeadingL?: GlobalValue;
|
|
396
|
+
lineHeightHeadingM?: GlobalValue;
|
|
397
|
+
lineHeightHeadingS?: GlobalValue;
|
|
398
|
+
lineHeightHeadingXs?: GlobalValue;
|
|
357
399
|
borderRadiusAlert?: GlobalValue;
|
|
358
400
|
borderRadiusBadge?: GlobalValue;
|
|
359
401
|
borderRadiusButton?: GlobalValue;
|
|
@@ -540,6 +582,27 @@ export declare interface TypedOverride {
|
|
|
540
582
|
colorTextTopNavigationTitle?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
|
|
541
583
|
fontFamilyBase?: GlobalValue;
|
|
542
584
|
fontFamilyMonospace?: GlobalValue;
|
|
585
|
+
fontSizeBodyM?: GlobalValue;
|
|
586
|
+
fontSizeBodyS?: GlobalValue;
|
|
587
|
+
fontSizeDisplayL?: GlobalValue;
|
|
588
|
+
fontSizeHeadingXl?: GlobalValue;
|
|
589
|
+
fontSizeHeadingL?: GlobalValue;
|
|
590
|
+
fontSizeHeadingM?: GlobalValue;
|
|
591
|
+
fontSizeHeadingS?: GlobalValue;
|
|
592
|
+
fontSizeHeadingXs?: GlobalValue;
|
|
593
|
+
fontWeightHeadingXl?: GlobalValue;
|
|
594
|
+
fontWeightHeadingL?: GlobalValue;
|
|
595
|
+
fontWeightHeadingM?: GlobalValue;
|
|
596
|
+
fontWeightHeadingS?: GlobalValue;
|
|
597
|
+
fontWeightHeadingXs?: GlobalValue;
|
|
598
|
+
lineHeightBodyM?: GlobalValue;
|
|
599
|
+
lineHeightBodyS?: GlobalValue;
|
|
600
|
+
lineHeightDisplayL?: GlobalValue;
|
|
601
|
+
lineHeightHeadingXl?: GlobalValue;
|
|
602
|
+
lineHeightHeadingL?: GlobalValue;
|
|
603
|
+
lineHeightHeadingM?: GlobalValue;
|
|
604
|
+
lineHeightHeadingS?: GlobalValue;
|
|
605
|
+
lineHeightHeadingXs?: GlobalValue;
|
|
543
606
|
borderRadiusAlert?: GlobalValue;
|
|
544
607
|
borderRadiusBadge?: GlobalValue;
|
|
545
608
|
borderRadiusButton?: GlobalValue;
|
|
@@ -726,6 +789,27 @@ export declare interface TypedOverride {
|
|
|
726
789
|
colorTextTopNavigationTitle?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
|
|
727
790
|
fontFamilyBase?: GlobalValue;
|
|
728
791
|
fontFamilyMonospace?: GlobalValue;
|
|
792
|
+
fontSizeBodyM?: GlobalValue;
|
|
793
|
+
fontSizeBodyS?: GlobalValue;
|
|
794
|
+
fontSizeDisplayL?: GlobalValue;
|
|
795
|
+
fontSizeHeadingXl?: GlobalValue;
|
|
796
|
+
fontSizeHeadingL?: GlobalValue;
|
|
797
|
+
fontSizeHeadingM?: GlobalValue;
|
|
798
|
+
fontSizeHeadingS?: GlobalValue;
|
|
799
|
+
fontSizeHeadingXs?: GlobalValue;
|
|
800
|
+
fontWeightHeadingXl?: GlobalValue;
|
|
801
|
+
fontWeightHeadingL?: GlobalValue;
|
|
802
|
+
fontWeightHeadingM?: GlobalValue;
|
|
803
|
+
fontWeightHeadingS?: GlobalValue;
|
|
804
|
+
fontWeightHeadingXs?: GlobalValue;
|
|
805
|
+
lineHeightBodyM?: GlobalValue;
|
|
806
|
+
lineHeightBodyS?: GlobalValue;
|
|
807
|
+
lineHeightDisplayL?: GlobalValue;
|
|
808
|
+
lineHeightHeadingXl?: GlobalValue;
|
|
809
|
+
lineHeightHeadingL?: GlobalValue;
|
|
810
|
+
lineHeightHeadingM?: GlobalValue;
|
|
811
|
+
lineHeightHeadingS?: GlobalValue;
|
|
812
|
+
lineHeightHeadingXs?: GlobalValue;
|
|
729
813
|
borderRadiusAlert?: GlobalValue;
|
|
730
814
|
borderRadiusBadge?: GlobalValue;
|
|
731
815
|
borderRadiusButton?: GlobalValue;
|
|
@@ -912,6 +996,27 @@ export declare interface TypedOverride {
|
|
|
912
996
|
colorTextTopNavigationTitle?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
|
|
913
997
|
fontFamilyBase?: GlobalValue;
|
|
914
998
|
fontFamilyMonospace?: GlobalValue;
|
|
999
|
+
fontSizeBodyM?: GlobalValue;
|
|
1000
|
+
fontSizeBodyS?: GlobalValue;
|
|
1001
|
+
fontSizeDisplayL?: GlobalValue;
|
|
1002
|
+
fontSizeHeadingXl?: GlobalValue;
|
|
1003
|
+
fontSizeHeadingL?: GlobalValue;
|
|
1004
|
+
fontSizeHeadingM?: GlobalValue;
|
|
1005
|
+
fontSizeHeadingS?: GlobalValue;
|
|
1006
|
+
fontSizeHeadingXs?: GlobalValue;
|
|
1007
|
+
fontWeightHeadingXl?: GlobalValue;
|
|
1008
|
+
fontWeightHeadingL?: GlobalValue;
|
|
1009
|
+
fontWeightHeadingM?: GlobalValue;
|
|
1010
|
+
fontWeightHeadingS?: GlobalValue;
|
|
1011
|
+
fontWeightHeadingXs?: GlobalValue;
|
|
1012
|
+
lineHeightBodyM?: GlobalValue;
|
|
1013
|
+
lineHeightBodyS?: GlobalValue;
|
|
1014
|
+
lineHeightDisplayL?: GlobalValue;
|
|
1015
|
+
lineHeightHeadingXl?: GlobalValue;
|
|
1016
|
+
lineHeightHeadingL?: GlobalValue;
|
|
1017
|
+
lineHeightHeadingM?: GlobalValue;
|
|
1018
|
+
lineHeightHeadingS?: GlobalValue;
|
|
1019
|
+
lineHeightHeadingXs?: GlobalValue;
|
|
915
1020
|
borderRadiusAlert?: GlobalValue;
|
|
916
1021
|
borderRadiusBadge?: GlobalValue;
|
|
917
1022
|
borderRadiusButton?: GlobalValue;
|
|
@@ -1098,6 +1203,27 @@ export declare interface TypedOverride {
|
|
|
1098
1203
|
colorTextTopNavigationTitle?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
|
|
1099
1204
|
fontFamilyBase?: GlobalValue;
|
|
1100
1205
|
fontFamilyMonospace?: GlobalValue;
|
|
1206
|
+
fontSizeBodyM?: GlobalValue;
|
|
1207
|
+
fontSizeBodyS?: GlobalValue;
|
|
1208
|
+
fontSizeDisplayL?: GlobalValue;
|
|
1209
|
+
fontSizeHeadingXl?: GlobalValue;
|
|
1210
|
+
fontSizeHeadingL?: GlobalValue;
|
|
1211
|
+
fontSizeHeadingM?: GlobalValue;
|
|
1212
|
+
fontSizeHeadingS?: GlobalValue;
|
|
1213
|
+
fontSizeHeadingXs?: GlobalValue;
|
|
1214
|
+
fontWeightHeadingXl?: GlobalValue;
|
|
1215
|
+
fontWeightHeadingL?: GlobalValue;
|
|
1216
|
+
fontWeightHeadingM?: GlobalValue;
|
|
1217
|
+
fontWeightHeadingS?: GlobalValue;
|
|
1218
|
+
fontWeightHeadingXs?: GlobalValue;
|
|
1219
|
+
lineHeightBodyM?: GlobalValue;
|
|
1220
|
+
lineHeightBodyS?: GlobalValue;
|
|
1221
|
+
lineHeightDisplayL?: GlobalValue;
|
|
1222
|
+
lineHeightHeadingXl?: GlobalValue;
|
|
1223
|
+
lineHeightHeadingL?: GlobalValue;
|
|
1224
|
+
lineHeightHeadingM?: GlobalValue;
|
|
1225
|
+
lineHeightHeadingS?: GlobalValue;
|
|
1226
|
+
lineHeightHeadingXs?: GlobalValue;
|
|
1101
1227
|
borderRadiusAlert?: GlobalValue;
|
|
1102
1228
|
borderRadiusBadge?: GlobalValue;
|
|
1103
1229
|
borderRadiusButton?: GlobalValue;
|
|
@@ -1284,6 +1410,27 @@ export declare interface TypedOverride {
|
|
|
1284
1410
|
colorTextTopNavigationTitle?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
|
|
1285
1411
|
fontFamilyBase?: GlobalValue;
|
|
1286
1412
|
fontFamilyMonospace?: GlobalValue;
|
|
1413
|
+
fontSizeBodyM?: GlobalValue;
|
|
1414
|
+
fontSizeBodyS?: GlobalValue;
|
|
1415
|
+
fontSizeDisplayL?: GlobalValue;
|
|
1416
|
+
fontSizeHeadingXl?: GlobalValue;
|
|
1417
|
+
fontSizeHeadingL?: GlobalValue;
|
|
1418
|
+
fontSizeHeadingM?: GlobalValue;
|
|
1419
|
+
fontSizeHeadingS?: GlobalValue;
|
|
1420
|
+
fontSizeHeadingXs?: GlobalValue;
|
|
1421
|
+
fontWeightHeadingXl?: GlobalValue;
|
|
1422
|
+
fontWeightHeadingL?: GlobalValue;
|
|
1423
|
+
fontWeightHeadingM?: GlobalValue;
|
|
1424
|
+
fontWeightHeadingS?: GlobalValue;
|
|
1425
|
+
fontWeightHeadingXs?: GlobalValue;
|
|
1426
|
+
lineHeightBodyM?: GlobalValue;
|
|
1427
|
+
lineHeightBodyS?: GlobalValue;
|
|
1428
|
+
lineHeightDisplayL?: GlobalValue;
|
|
1429
|
+
lineHeightHeadingXl?: GlobalValue;
|
|
1430
|
+
lineHeightHeadingL?: GlobalValue;
|
|
1431
|
+
lineHeightHeadingM?: GlobalValue;
|
|
1432
|
+
lineHeightHeadingS?: GlobalValue;
|
|
1433
|
+
lineHeightHeadingXs?: GlobalValue;
|
|
1287
1434
|
borderRadiusAlert?: GlobalValue;
|
|
1288
1435
|
borderRadiusBadge?: GlobalValue;
|
|
1289
1436
|
borderRadiusButton?: GlobalValue;
|
|
@@ -1470,6 +1617,27 @@ export declare interface TypedOverride {
|
|
|
1470
1617
|
colorTextTopNavigationTitle?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
|
|
1471
1618
|
fontFamilyBase?: GlobalValue;
|
|
1472
1619
|
fontFamilyMonospace?: GlobalValue;
|
|
1620
|
+
fontSizeBodyM?: GlobalValue;
|
|
1621
|
+
fontSizeBodyS?: GlobalValue;
|
|
1622
|
+
fontSizeDisplayL?: GlobalValue;
|
|
1623
|
+
fontSizeHeadingXl?: GlobalValue;
|
|
1624
|
+
fontSizeHeadingL?: GlobalValue;
|
|
1625
|
+
fontSizeHeadingM?: GlobalValue;
|
|
1626
|
+
fontSizeHeadingS?: GlobalValue;
|
|
1627
|
+
fontSizeHeadingXs?: GlobalValue;
|
|
1628
|
+
fontWeightHeadingXl?: GlobalValue;
|
|
1629
|
+
fontWeightHeadingL?: GlobalValue;
|
|
1630
|
+
fontWeightHeadingM?: GlobalValue;
|
|
1631
|
+
fontWeightHeadingS?: GlobalValue;
|
|
1632
|
+
fontWeightHeadingXs?: GlobalValue;
|
|
1633
|
+
lineHeightBodyM?: GlobalValue;
|
|
1634
|
+
lineHeightBodyS?: GlobalValue;
|
|
1635
|
+
lineHeightDisplayL?: GlobalValue;
|
|
1636
|
+
lineHeightHeadingXl?: GlobalValue;
|
|
1637
|
+
lineHeightHeadingL?: GlobalValue;
|
|
1638
|
+
lineHeightHeadingM?: GlobalValue;
|
|
1639
|
+
lineHeightHeadingS?: GlobalValue;
|
|
1640
|
+
lineHeightHeadingXs?: GlobalValue;
|
|
1473
1641
|
borderRadiusAlert?: GlobalValue;
|
|
1474
1642
|
borderRadiusBadge?: GlobalValue;
|
|
1475
1643
|
borderRadiusButton?: GlobalValue;
|
|
@@ -9131,6 +9131,27 @@ export var preset = {
|
|
|
9131
9131
|
"colorTextTopNavigationTitle",
|
|
9132
9132
|
"fontFamilyBase",
|
|
9133
9133
|
"fontFamilyMonospace",
|
|
9134
|
+
"fontSizeBodyM",
|
|
9135
|
+
"fontSizeBodyS",
|
|
9136
|
+
"fontSizeDisplayL",
|
|
9137
|
+
"fontSizeHeadingXl",
|
|
9138
|
+
"fontSizeHeadingL",
|
|
9139
|
+
"fontSizeHeadingM",
|
|
9140
|
+
"fontSizeHeadingS",
|
|
9141
|
+
"fontSizeHeadingXs",
|
|
9142
|
+
"fontWeightHeadingXl",
|
|
9143
|
+
"fontWeightHeadingL",
|
|
9144
|
+
"fontWeightHeadingM",
|
|
9145
|
+
"fontWeightHeadingS",
|
|
9146
|
+
"fontWeightHeadingXs",
|
|
9147
|
+
"lineHeightBodyM",
|
|
9148
|
+
"lineHeightBodyS",
|
|
9149
|
+
"lineHeightDisplayL",
|
|
9150
|
+
"lineHeightHeadingXl",
|
|
9151
|
+
"lineHeightHeadingL",
|
|
9152
|
+
"lineHeightHeadingM",
|
|
9153
|
+
"lineHeightHeadingS",
|
|
9154
|
+
"lineHeightHeadingXs",
|
|
9134
9155
|
"borderRadiusAlert",
|
|
9135
9156
|
"borderRadiusBadge",
|
|
9136
9157
|
"borderRadiusButton",
|
|
@@ -9409,6 +9430,27 @@ export var preset = {
|
|
|
9409
9430
|
"colorDragPlaceholderHover",
|
|
9410
9431
|
"fontFamilyBase",
|
|
9411
9432
|
"fontFamilyMonospace",
|
|
9433
|
+
"fontSizeBodyM",
|
|
9434
|
+
"fontSizeBodyS",
|
|
9435
|
+
"fontSizeDisplayL",
|
|
9436
|
+
"fontSizeHeadingXl",
|
|
9437
|
+
"fontSizeHeadingL",
|
|
9438
|
+
"fontSizeHeadingM",
|
|
9439
|
+
"fontSizeHeadingS",
|
|
9440
|
+
"fontSizeHeadingXs",
|
|
9441
|
+
"fontWeightHeadingXl",
|
|
9442
|
+
"fontWeightHeadingL",
|
|
9443
|
+
"fontWeightHeadingM",
|
|
9444
|
+
"fontWeightHeadingS",
|
|
9445
|
+
"fontWeightHeadingXs",
|
|
9446
|
+
"lineHeightBodyM",
|
|
9447
|
+
"lineHeightBodyS",
|
|
9448
|
+
"lineHeightDisplayL",
|
|
9449
|
+
"lineHeightHeadingXl",
|
|
9450
|
+
"lineHeightHeadingL",
|
|
9451
|
+
"lineHeightHeadingM",
|
|
9452
|
+
"lineHeightHeadingS",
|
|
9453
|
+
"lineHeightHeadingXs",
|
|
9412
9454
|
"borderRadiusAlert",
|
|
9413
9455
|
"borderRadiusBadge",
|
|
9414
9456
|
"borderRadiusButton",
|
package/internal/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"td-element.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/td-element.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAuB,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAyB,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"td-element.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/td-element.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAuB,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAyB,MAAM,eAAe,CAAC;AAGjE,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,IAAI,CACrB,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAC3F,OAAO,GAAG,WAAW,GAAG,SAAS,CAClC,CAAC;IACF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,WAAW,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,kBAAkB,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,kGAsE1B,CAAC"}
|
|
@@ -6,6 +6,7 @@ import styles from './styles.css.js';
|
|
|
6
6
|
import { getStickyClassNames } from '../utils';
|
|
7
7
|
import { useStickyCellStyles } from '../sticky-columns';
|
|
8
8
|
import { getTableCellRoleProps } from '../table-role';
|
|
9
|
+
import { useMergeRefs } from '../../internal/hooks/use-merge-refs/index.js';
|
|
9
10
|
export const TableTdElement = React.forwardRef(({ className, style, children, wrapLines, isRowHeader, isFirstRow, isLastRow, isSelected, isNextSelected, isPrevSelected, nativeAttributes, onClick, onMouseEnter, onMouseLeave, isEvenRow, stripedRows, isVisualRefresh, hasSelection, hasFooter, columnId, colIndex, stickyState, tableRole, }, ref) => {
|
|
10
11
|
const Element = isRowHeader ? 'th' : 'td';
|
|
11
12
|
nativeAttributes = Object.assign(Object.assign({}, nativeAttributes), getTableCellRoleProps({ tableRole, isRowHeader, colIndex }));
|
|
@@ -14,13 +15,7 @@ export const TableTdElement = React.forwardRef(({ className, style, children, wr
|
|
|
14
15
|
columnId,
|
|
15
16
|
getClassName: props => getStickyClassNames(styles, props),
|
|
16
17
|
});
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
stickyStyles.ref(node);
|
|
20
|
-
if (ref) {
|
|
21
|
-
ref.current = node;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
} }, nativeAttributes), children));
|
|
18
|
+
const mergedRef = useMergeRefs(stickyStyles.ref, ref);
|
|
19
|
+
return (React.createElement(Element, Object.assign({ style: Object.assign(Object.assign({}, style), stickyStyles.style), className: clsx(className, styles['body-cell'], wrapLines && styles['body-cell-wrap'], isFirstRow && styles['body-cell-first-row'], isLastRow && styles['body-cell-last-row'], isSelected && styles['body-cell-selected'], isNextSelected && styles['body-cell-next-selected'], isPrevSelected && styles['body-cell-prev-selected'], !isEvenRow && stripedRows && styles['body-cell-shaded'], stripedRows && styles['has-striped-rows'], isVisualRefresh && styles['is-visual-refresh'], hasSelection && styles['has-selection'], hasFooter && styles['has-footer'], stickyStyles.className), onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: mergedRef }, nativeAttributes), children));
|
|
25
20
|
});
|
|
26
21
|
//# sourceMappingURL=td-element.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"td-element.js","sourceRoot":"lib/default/","sources":["table/body-cell/td-element.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAsB,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAa,qBAAqB,EAAE,MAAM,eAAe,CAAC;AA+
|
|
1
|
+
{"version":3,"file":"td-element.js","sourceRoot":"lib/default/","sources":["table/body-cell/td-element.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAsB,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAa,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAC;AA+B5E,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAC5C,CACE,EACE,SAAS,EACT,KAAK,EACL,QAAQ,EACR,SAAS,EACT,WAAW,EACX,UAAU,EACV,SAAS,EACT,UAAU,EACV,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,WAAW,EACX,eAAe,EACf,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,SAAS,GACV,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAE1C,gBAAgB,mCAAQ,gBAAgB,GAAK,qBAAqB,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAE,CAAC;IAE3G,MAAM,YAAY,GAAG,mBAAmB,CAAC;QACvC,aAAa,EAAE,WAAW;QAC1B,QAAQ;QACR,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,MAAM,EAAE,KAAK,CAAC;KAC1D,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,YAAY,CAAC,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IAEtD,OAAO,CACL,oBAAC,OAAO,kBACN,KAAK,kCAAO,KAAK,GAAK,YAAY,CAAC,KAAK,GACxC,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,WAAW,CAAC,EACnB,SAAS,IAAI,MAAM,CAAC,gBAAgB,CAAC,EACrC,UAAU,IAAI,MAAM,CAAC,qBAAqB,CAAC,EAC3C,SAAS,IAAI,MAAM,CAAC,oBAAoB,CAAC,EACzC,UAAU,IAAI,MAAM,CAAC,oBAAoB,CAAC,EAC1C,cAAc,IAAI,MAAM,CAAC,yBAAyB,CAAC,EACnD,cAAc,IAAI,MAAM,CAAC,yBAAyB,CAAC,EACnD,CAAC,SAAS,IAAI,WAAW,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACvD,WAAW,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACzC,eAAe,IAAI,MAAM,CAAC,mBAAmB,CAAC,EAC9C,YAAY,IAAI,MAAM,CAAC,eAAe,CAAC,EACvC,SAAS,IAAI,MAAM,CAAC,YAAY,CAAC,EACjC,YAAY,CAAC,SAAS,CACvB,EACD,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,SAAS,IACV,gBAAgB,GAEnB,QAAQ,CACD,CACX,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport styles from './styles.css.js';\nimport { getStickyClassNames } from '../utils';\nimport { StickyColumnsModel, useStickyCellStyles } from '../sticky-columns';\nimport { TableRole, getTableCellRoleProps } from '../table-role';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs/index.js';\n\nexport interface TableTdElementProps {\n className?: string;\n style?: React.CSSProperties;\n wrapLines: boolean | undefined;\n isRowHeader?: boolean;\n isFirstRow: boolean;\n isLastRow: boolean;\n isSelected: boolean;\n isNextSelected: boolean;\n isPrevSelected: boolean;\n nativeAttributes?: Omit<\n React.TdHTMLAttributes<HTMLTableCellElement> | React.ThHTMLAttributes<HTMLTableCellElement>,\n 'style' | 'className' | 'onClick'\n >;\n onClick?: () => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n children?: React.ReactNode;\n isEvenRow?: boolean;\n stripedRows?: boolean;\n hasSelection?: boolean;\n hasFooter?: boolean;\n columnId: PropertyKey;\n colIndex: number;\n stickyState: StickyColumnsModel;\n isVisualRefresh?: boolean;\n tableRole: TableRole;\n}\n\nexport const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElementProps>(\n (\n {\n className,\n style,\n children,\n wrapLines,\n isRowHeader,\n isFirstRow,\n isLastRow,\n isSelected,\n isNextSelected,\n isPrevSelected,\n nativeAttributes,\n onClick,\n onMouseEnter,\n onMouseLeave,\n isEvenRow,\n stripedRows,\n isVisualRefresh,\n hasSelection,\n hasFooter,\n columnId,\n colIndex,\n stickyState,\n tableRole,\n },\n ref\n ) => {\n const Element = isRowHeader ? 'th' : 'td';\n\n nativeAttributes = { ...nativeAttributes, ...getTableCellRoleProps({ tableRole, isRowHeader, colIndex }) };\n\n const stickyStyles = useStickyCellStyles({\n stickyColumns: stickyState,\n columnId,\n getClassName: props => getStickyClassNames(styles, props),\n });\n\n const mergedRef = useMergeRefs(stickyStyles.ref, ref);\n\n return (\n <Element\n style={{ ...style, ...stickyStyles.style }}\n className={clsx(\n className,\n styles['body-cell'],\n wrapLines && styles['body-cell-wrap'],\n isFirstRow && styles['body-cell-first-row'],\n isLastRow && styles['body-cell-last-row'],\n isSelected && styles['body-cell-selected'],\n isNextSelected && styles['body-cell-next-selected'],\n isPrevSelected && styles['body-cell-prev-selected'],\n !isEvenRow && stripedRows && styles['body-cell-shaded'],\n stripedRows && styles['has-striped-rows'],\n isVisualRefresh && styles['is-visual-refresh'],\n hasSelection && styles['has-selection'],\n hasFooter && styles['has-footer'],\n stickyStyles.className\n )}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n ref={mergedRef}\n {...nativeAttributes}\n >\n {children}\n </Element>\n );\n }\n);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["table/resizer/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["table/resizer/index.tsx"],"names":[],"mappings":";AAeA,UAAU,YAAY;IACpB,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAMD,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,QAAQ,EACR,cAAc,EACd,QAA+B,EAC/B,QAAQ,EACR,aAAa,EACb,OAAO,EACP,OAAO,EACP,MAAM,GACP,EAAE,YAAY,eA0Md;AAED,wBAAgB,aAAa,gBAE5B"}
|
package/table/resizer/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import clsx from 'clsx';
|
|
4
|
-
import React, { useEffect, useRef, useState } from 'react';
|
|
4
|
+
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
5
5
|
import { getOverflowParents } from '../../internal/utils/scrollable-containers';
|
|
6
6
|
import { findUpUntil } from '../../internal/utils/dom';
|
|
7
7
|
import tableStyles from '../styles.css.js';
|
|
@@ -9,32 +9,37 @@ import styles from './styles.css.js';
|
|
|
9
9
|
import { KeyCode } from '../../internal/keycode';
|
|
10
10
|
import { DEFAULT_COLUMN_WIDTH } from '../use-column-widths';
|
|
11
11
|
import { useStableCallback } from '@cloudscape-design/component-toolkit/internal';
|
|
12
|
+
import ScreenreaderOnly from '../../internal/components/screenreader-only';
|
|
13
|
+
import { useUniqueId } from '../../internal/hooks/use-unique-id';
|
|
14
|
+
import { joinStrings } from '../../internal/utils/strings';
|
|
12
15
|
const AUTO_GROW_START_TIME = 10;
|
|
13
16
|
const AUTO_GROW_INTERVAL = 10;
|
|
14
17
|
const AUTO_GROW_INCREMENT = 5;
|
|
15
18
|
export function Resizer({ onDragMove, onFinish, ariaLabelledby, minWidth = DEFAULT_COLUMN_WIDTH, tabIndex, showFocusRing, focusId, onFocus, onBlur, }) {
|
|
16
19
|
const [isDragging, setIsDragging] = useState(false);
|
|
17
|
-
const [
|
|
20
|
+
const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);
|
|
21
|
+
const [headerCell, setHeaderCell] = useState(null);
|
|
18
22
|
const autoGrowTimeout = useRef();
|
|
19
23
|
const onFinishStable = useStableCallback(onFinish);
|
|
20
24
|
const onDragStable = useStableCallback(onDragMove);
|
|
21
25
|
const [resizerHasFocus, setResizerHasFocus] = useState(false);
|
|
22
26
|
const [headerCellWidth, setHeaderCellWidth] = useState(0);
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
27
|
+
const originalHeaderCellWidthRef = useRef(0);
|
|
28
|
+
const handlers = useMemo(() => {
|
|
29
|
+
if (!headerCell) {
|
|
30
|
+
return null;
|
|
26
31
|
}
|
|
27
32
|
const rootElement = findUpUntil(headerCell, element => element.className.indexOf(tableStyles.root) > -1);
|
|
28
33
|
const tableElement = rootElement.querySelector(`table`);
|
|
29
34
|
// tracker is rendered inside table wrapper to align with its size
|
|
30
|
-
const
|
|
35
|
+
const trackerElement = rootElement.querySelector(`.${styles.tracker}`);
|
|
31
36
|
const scrollParent = getOverflowParents(headerCell)[0];
|
|
32
37
|
const { left: leftEdge, right: rightEdge } = scrollParent.getBoundingClientRect();
|
|
33
38
|
const updateTrackerPosition = (newOffset) => {
|
|
34
39
|
const { left: scrollParentLeft } = tableElement.getBoundingClientRect();
|
|
35
|
-
|
|
40
|
+
trackerElement.style.top = headerCell.getBoundingClientRect().height + 'px';
|
|
36
41
|
// minus one pixel to offset the cell border
|
|
37
|
-
|
|
42
|
+
trackerElement.style.left = newOffset - scrollParentLeft - 1 + 'px';
|
|
38
43
|
};
|
|
39
44
|
const updateColumnWidth = (newWidth) => {
|
|
40
45
|
const { right, width } = headerCell.getBoundingClientRect();
|
|
@@ -44,6 +49,9 @@ export function Resizer({ onDragMove, onFinish, ariaLabelledby, minWidth = DEFAU
|
|
|
44
49
|
// callbacks must be the last calls in the handler, because they may cause an extra update
|
|
45
50
|
onDragStable(newWidth);
|
|
46
51
|
};
|
|
52
|
+
const resetColumnWidth = () => {
|
|
53
|
+
updateColumnWidth(originalHeaderCellWidthRef.current);
|
|
54
|
+
};
|
|
47
55
|
const resizeColumn = (offset) => {
|
|
48
56
|
if (offset > leftEdge) {
|
|
49
57
|
const cellLeft = headerCell.getBoundingClientRect().left;
|
|
@@ -76,55 +84,106 @@ export function Resizer({ onDragMove, onFinish, ariaLabelledby, minWidth = DEFAU
|
|
|
76
84
|
clearTimeout(autoGrowTimeout.current);
|
|
77
85
|
};
|
|
78
86
|
const onKeyDown = (event) => {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
event.
|
|
87
|
+
if (isKeyboardDragging) {
|
|
88
|
+
// prevent screenreader cursor move
|
|
89
|
+
if (event.keyCode === KeyCode.left || event.keyCode === KeyCode.right) {
|
|
90
|
+
event.preventDefault();
|
|
91
|
+
}
|
|
92
|
+
// update width
|
|
93
|
+
if (event.keyCode === KeyCode.left) {
|
|
94
|
+
updateColumnWidth(headerCell.getBoundingClientRect().width - 10);
|
|
95
|
+
}
|
|
96
|
+
if (event.keyCode === KeyCode.right) {
|
|
97
|
+
updateColumnWidth(headerCell.getBoundingClientRect().width + 10);
|
|
98
|
+
}
|
|
99
|
+
// Exit keyboard dragging mode
|
|
100
|
+
if (event.keyCode === KeyCode.enter || event.keyCode === KeyCode.space) {
|
|
101
|
+
event.preventDefault();
|
|
102
|
+
setIsKeyboardDragging(false);
|
|
103
|
+
onFinishStable();
|
|
104
|
+
}
|
|
105
|
+
if (event.keyCode === KeyCode.escape) {
|
|
106
|
+
setIsKeyboardDragging(false);
|
|
107
|
+
resetColumnWidth();
|
|
108
|
+
}
|
|
82
109
|
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
110
|
+
else {
|
|
111
|
+
// Enter keyboard dragging mode
|
|
112
|
+
if (event.keyCode === KeyCode.enter || event.keyCode === KeyCode.space) {
|
|
113
|
+
event.preventDefault();
|
|
114
|
+
setIsKeyboardDragging(true);
|
|
115
|
+
}
|
|
89
116
|
}
|
|
90
117
|
};
|
|
91
|
-
updateTrackerPosition
|
|
92
|
-
|
|
93
|
-
|
|
118
|
+
return { updateTrackerPosition, updateColumnWidth, resetColumnWidth, onMouseMove, onMouseUp, onKeyDown };
|
|
119
|
+
}, [headerCell, isKeyboardDragging, minWidth, onDragStable, onFinishStable]);
|
|
120
|
+
useEffect(() => {
|
|
121
|
+
if ((!isDragging && !resizerHasFocus) || !headerCell || !handlers) {
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
124
|
+
originalHeaderCellWidthRef.current = headerCell.getBoundingClientRect().width;
|
|
125
|
+
handlers.updateTrackerPosition(headerCell.getBoundingClientRect().right);
|
|
94
126
|
if (isDragging) {
|
|
95
|
-
document.
|
|
96
|
-
document.addEventListener('
|
|
127
|
+
document.body.classList.add(styles['resize-active']);
|
|
128
|
+
document.addEventListener('mousemove', handlers.onMouseMove);
|
|
129
|
+
document.addEventListener('mouseup', handlers.onMouseUp);
|
|
97
130
|
}
|
|
98
131
|
if (resizerHasFocus) {
|
|
99
132
|
document.body.classList.add(styles['resize-active-with-focus']);
|
|
100
|
-
headerCell.addEventListener('keydown', onKeyDown);
|
|
133
|
+
headerCell.addEventListener('keydown', handlers.onKeyDown);
|
|
134
|
+
}
|
|
135
|
+
if (isKeyboardDragging) {
|
|
136
|
+
document.body.classList.add(styles['resize-active']);
|
|
101
137
|
}
|
|
102
138
|
return () => {
|
|
103
139
|
clearTimeout(autoGrowTimeout.current);
|
|
104
140
|
document.body.classList.remove(styles['resize-active']);
|
|
105
|
-
document.
|
|
106
|
-
document.removeEventListener('
|
|
107
|
-
|
|
141
|
+
document.body.classList.remove(styles['resize-active-with-focus']);
|
|
142
|
+
document.removeEventListener('mousemove', handlers.onMouseMove);
|
|
143
|
+
document.removeEventListener('mouseup', handlers.onMouseUp);
|
|
144
|
+
headerCell.removeEventListener('keydown', handlers.onKeyDown);
|
|
108
145
|
};
|
|
109
|
-
}, [headerCell, isDragging,
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
146
|
+
}, [headerCell, isDragging, isKeyboardDragging, onFinishStable, resizerHasFocus, handlers]);
|
|
147
|
+
const resizerWidthId = useUniqueId();
|
|
148
|
+
const resizerRole = isKeyboardDragging ? 'separator' : 'button';
|
|
149
|
+
const headerCellWidthString = headerCellWidth.toFixed(0);
|
|
150
|
+
const resizerAriaProps = resizerRole === 'button'
|
|
151
|
+
? {
|
|
152
|
+
'aria-labelledby': joinStrings(ariaLabelledby, resizerWidthId),
|
|
153
|
+
'aria-pressed': false,
|
|
154
|
+
}
|
|
155
|
+
: {
|
|
156
|
+
'aria-labelledby': ariaLabelledby,
|
|
157
|
+
'aria-orientation': 'vertical',
|
|
158
|
+
'aria-valuenow': headerCellWidth,
|
|
159
|
+
// aria-valuetext is needed because the VO announces "collapsed" when only aria-valuenow set without aria-valuemax
|
|
160
|
+
'aria-valuetext': headerCellWidthString,
|
|
161
|
+
'aria-valuemin': minWidth,
|
|
162
|
+
};
|
|
163
|
+
return (React.createElement(React.Fragment, null,
|
|
164
|
+
React.createElement("span", Object.assign({ className: clsx(styles.resizer, isDragging && styles['resizer-active'], (resizerHasFocus || showFocusRing) && styles['has-focus']), onMouseDown: event => {
|
|
165
|
+
if (event.button !== 0) {
|
|
166
|
+
return;
|
|
167
|
+
}
|
|
168
|
+
event.preventDefault();
|
|
169
|
+
const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th');
|
|
170
|
+
setIsDragging(true);
|
|
171
|
+
setHeaderCell(headerCell);
|
|
172
|
+
}, onFocus: event => {
|
|
173
|
+
const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th');
|
|
174
|
+
setHeaderCellWidth(headerCell.getBoundingClientRect().width);
|
|
175
|
+
setResizerHasFocus(true);
|
|
176
|
+
setHeaderCell(headerCell);
|
|
177
|
+
onFocus === null || onFocus === void 0 ? void 0 : onFocus();
|
|
178
|
+
}, onBlur: () => {
|
|
179
|
+
setResizerHasFocus(false);
|
|
180
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur();
|
|
181
|
+
if (isKeyboardDragging) {
|
|
182
|
+
setIsKeyboardDragging(false);
|
|
183
|
+
handlers === null || handlers === void 0 ? void 0 : handlers.resetColumnWidth();
|
|
184
|
+
}
|
|
185
|
+
}, role: resizerRole }, resizerAriaProps, { tabIndex: tabIndex, "data-focus-id": focusId })),
|
|
186
|
+
React.createElement(ScreenreaderOnly, { id: resizerWidthId }, headerCellWidthString)));
|
|
128
187
|
}
|
|
129
188
|
export function ResizeTracker() {
|
|
130
189
|
return React.createElement("span", { className: styles.tracker });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["table/resizer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { getOverflowParents } from '../../internal/utils/scrollable-containers';\nimport { findUpUntil } from '../../internal/utils/dom';\nimport tableStyles from '../styles.css.js';\nimport styles from './styles.css.js';\nimport { KeyCode } from '../../internal/keycode';\nimport { DEFAULT_COLUMN_WIDTH } from '../use-column-widths';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\ninterface ResizerProps {\n onDragMove: (newWidth: number) => void;\n onFinish: () => void;\n ariaLabelledby?: string;\n minWidth?: number;\n tabIndex?: number;\n focusId?: string;\n showFocusRing?: boolean;\n onFocus?: () => void;\n onBlur?: () => void;\n}\n\nconst AUTO_GROW_START_TIME = 10;\nconst AUTO_GROW_INTERVAL = 10;\nconst AUTO_GROW_INCREMENT = 5;\n\nexport function Resizer({\n onDragMove,\n onFinish,\n ariaLabelledby,\n minWidth = DEFAULT_COLUMN_WIDTH,\n tabIndex,\n showFocusRing,\n focusId,\n onFocus,\n onBlur,\n}: ResizerProps) {\n const [isDragging, setIsDragging] = useState(false);\n const [headerCell, setHeaderCell] = useState<HTMLElement>();\n const autoGrowTimeout = useRef<ReturnType<typeof setTimeout> | undefined>();\n const onFinishStable = useStableCallback(onFinish);\n const onDragStable = useStableCallback(onDragMove);\n const [resizerHasFocus, setResizerHasFocus] = useState(false);\n const [headerCellWidth, setHeaderCellWidth] = useState(0);\n\n useEffect(() => {\n if ((!isDragging && !resizerHasFocus) || !headerCell) {\n return;\n }\n const rootElement = findUpUntil(headerCell, element => element.className.indexOf(tableStyles.root) > -1)!;\n const tableElement = rootElement.querySelector<HTMLElement>(`table`)!;\n // tracker is rendered inside table wrapper to align with its size\n const tracker = rootElement.querySelector<HTMLElement>(`.${styles.tracker}`)!;\n const scrollParent = getOverflowParents(headerCell)[0];\n const { left: leftEdge, right: rightEdge } = scrollParent.getBoundingClientRect();\n\n const updateTrackerPosition = (newOffset: number) => {\n const { left: scrollParentLeft } = tableElement.getBoundingClientRect();\n tracker.style.top = headerCell.getBoundingClientRect().height + 'px';\n // minus one pixel to offset the cell border\n tracker.style.left = newOffset - scrollParentLeft - 1 + 'px';\n };\n\n const updateColumnWidth = (newWidth: number) => {\n const { right, width } = headerCell.getBoundingClientRect();\n const updatedWidth = newWidth < minWidth ? minWidth : newWidth;\n updateTrackerPosition(right + updatedWidth - width);\n setHeaderCellWidth(newWidth);\n // callbacks must be the last calls in the handler, because they may cause an extra update\n onDragStable(newWidth);\n };\n\n const resizeColumn = (offset: number) => {\n if (offset > leftEdge) {\n const cellLeft = headerCell.getBoundingClientRect().left;\n const newWidth = offset - cellLeft;\n // callbacks must be the last calls in the handler, because they may cause an extra update\n updateColumnWidth(newWidth);\n }\n };\n\n const onAutoGrow = () => {\n const width = headerCell.getBoundingClientRect().width;\n autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_INTERVAL);\n // callbacks must be the last calls in the handler, because they may cause an extra update\n updateColumnWidth(width + AUTO_GROW_INCREMENT);\n scrollParent.scrollLeft += AUTO_GROW_INCREMENT;\n };\n const onMouseMove = (event: MouseEvent) => {\n clearTimeout(autoGrowTimeout.current);\n const offset = event.pageX;\n if (offset > rightEdge) {\n autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_START_TIME);\n } else {\n resizeColumn(offset);\n }\n };\n const onMouseUp = (event: MouseEvent) => {\n resizeColumn(event.pageX);\n setIsDragging(false);\n onFinishStable();\n clearTimeout(autoGrowTimeout.current);\n };\n const onKeyDown = (event: KeyboardEvent) => {\n // prevent screenreader cursor move\n if (event.keyCode === KeyCode.left || event.keyCode === KeyCode.right) {\n event.preventDefault();\n }\n // update width\n if (event.keyCode === KeyCode.left) {\n updateColumnWidth(headerCell.getBoundingClientRect().width - 10);\n }\n if (event.keyCode === KeyCode.right) {\n updateColumnWidth(headerCell.getBoundingClientRect().width + 10);\n }\n };\n\n updateTrackerPosition(headerCell.getBoundingClientRect().right);\n document.body.classList.add(styles['resize-active']);\n document.body.classList.remove(styles['resize-active-with-focus']);\n if (isDragging) {\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n }\n if (resizerHasFocus) {\n document.body.classList.add(styles['resize-active-with-focus']);\n headerCell.addEventListener('keydown', onKeyDown);\n }\n\n return () => {\n clearTimeout(autoGrowTimeout.current);\n document.body.classList.remove(styles['resize-active']);\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n headerCell.removeEventListener('keydown', onKeyDown);\n };\n }, [headerCell, isDragging, onDragStable, onFinishStable, resizerHasFocus, minWidth]);\n return (\n <span\n className={clsx(\n styles.resizer,\n isDragging && styles['resizer-active'],\n (resizerHasFocus || showFocusRing) && styles['has-focus']\n )}\n onMouseDown={event => {\n if (event.button !== 0) {\n return;\n }\n event.preventDefault();\n const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th')!;\n setIsDragging(true);\n setHeaderCell(headerCell);\n }}\n onFocus={event => {\n const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th')!;\n setHeaderCellWidth(headerCell.getBoundingClientRect().width);\n setResizerHasFocus(true);\n setHeaderCell(headerCell);\n onFocus?.();\n }}\n onBlur={() => {\n setResizerHasFocus(false);\n onBlur?.();\n }}\n role=\"separator\"\n aria-orientation=\"vertical\"\n aria-labelledby={ariaLabelledby}\n aria-valuenow={headerCellWidth}\n // aria-valuetext is needed because the VO announces \"collapsed\" when only aria-valuenow set without aria-valuemax\n aria-valuetext={headerCellWidth.toString()}\n aria-valuemin={minWidth}\n tabIndex={tabIndex}\n data-focus-id={focusId}\n />\n );\n}\n\nexport function ResizeTracker() {\n return <span className={styles.tracker} />;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["table/resizer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { getOverflowParents } from '../../internal/utils/scrollable-containers';\nimport { findUpUntil } from '../../internal/utils/dom';\nimport tableStyles from '../styles.css.js';\nimport styles from './styles.css.js';\nimport { KeyCode } from '../../internal/keycode';\nimport { DEFAULT_COLUMN_WIDTH } from '../use-column-widths';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { joinStrings } from '../../internal/utils/strings';\n\ninterface ResizerProps {\n onDragMove: (newWidth: number) => void;\n onFinish: () => void;\n ariaLabelledby?: string;\n minWidth?: number;\n tabIndex?: number;\n focusId?: string;\n showFocusRing?: boolean;\n onFocus?: () => void;\n onBlur?: () => void;\n}\n\nconst AUTO_GROW_START_TIME = 10;\nconst AUTO_GROW_INTERVAL = 10;\nconst AUTO_GROW_INCREMENT = 5;\n\nexport function Resizer({\n onDragMove,\n onFinish,\n ariaLabelledby,\n minWidth = DEFAULT_COLUMN_WIDTH,\n tabIndex,\n showFocusRing,\n focusId,\n onFocus,\n onBlur,\n}: ResizerProps) {\n const [isDragging, setIsDragging] = useState(false);\n const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);\n const [headerCell, setHeaderCell] = useState<null | HTMLElement>(null);\n const autoGrowTimeout = useRef<ReturnType<typeof setTimeout> | undefined>();\n const onFinishStable = useStableCallback(onFinish);\n const onDragStable = useStableCallback(onDragMove);\n const [resizerHasFocus, setResizerHasFocus] = useState(false);\n const [headerCellWidth, setHeaderCellWidth] = useState(0);\n const originalHeaderCellWidthRef = useRef(0);\n\n const handlers = useMemo(() => {\n if (!headerCell) {\n return null;\n }\n\n const rootElement = findUpUntil(headerCell, element => element.className.indexOf(tableStyles.root) > -1)!;\n const tableElement = rootElement.querySelector<HTMLElement>(`table`)!;\n // tracker is rendered inside table wrapper to align with its size\n const trackerElement = rootElement.querySelector<HTMLElement>(`.${styles.tracker}`)!;\n const scrollParent = getOverflowParents(headerCell)[0];\n const { left: leftEdge, right: rightEdge } = scrollParent.getBoundingClientRect();\n\n const updateTrackerPosition = (newOffset: number) => {\n const { left: scrollParentLeft } = tableElement.getBoundingClientRect();\n trackerElement.style.top = headerCell.getBoundingClientRect().height + 'px';\n // minus one pixel to offset the cell border\n trackerElement.style.left = newOffset - scrollParentLeft - 1 + 'px';\n };\n\n const updateColumnWidth = (newWidth: number) => {\n const { right, width } = headerCell.getBoundingClientRect();\n const updatedWidth = newWidth < minWidth ? minWidth : newWidth;\n updateTrackerPosition(right + updatedWidth - width);\n setHeaderCellWidth(newWidth);\n // callbacks must be the last calls in the handler, because they may cause an extra update\n onDragStable(newWidth);\n };\n\n const resetColumnWidth = () => {\n updateColumnWidth(originalHeaderCellWidthRef.current);\n };\n\n const resizeColumn = (offset: number) => {\n if (offset > leftEdge) {\n const cellLeft = headerCell.getBoundingClientRect().left;\n const newWidth = offset - cellLeft;\n // callbacks must be the last calls in the handler, because they may cause an extra update\n updateColumnWidth(newWidth);\n }\n };\n\n const onAutoGrow = () => {\n const width = headerCell.getBoundingClientRect().width;\n autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_INTERVAL);\n // callbacks must be the last calls in the handler, because they may cause an extra update\n updateColumnWidth(width + AUTO_GROW_INCREMENT);\n scrollParent.scrollLeft += AUTO_GROW_INCREMENT;\n };\n\n const onMouseMove = (event: MouseEvent) => {\n clearTimeout(autoGrowTimeout.current);\n const offset = event.pageX;\n if (offset > rightEdge) {\n autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_START_TIME);\n } else {\n resizeColumn(offset);\n }\n };\n\n const onMouseUp = (event: MouseEvent) => {\n resizeColumn(event.pageX);\n setIsDragging(false);\n onFinishStable();\n clearTimeout(autoGrowTimeout.current);\n };\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (isKeyboardDragging) {\n // prevent screenreader cursor move\n if (event.keyCode === KeyCode.left || event.keyCode === KeyCode.right) {\n event.preventDefault();\n }\n // update width\n if (event.keyCode === KeyCode.left) {\n updateColumnWidth(headerCell.getBoundingClientRect().width - 10);\n }\n if (event.keyCode === KeyCode.right) {\n updateColumnWidth(headerCell.getBoundingClientRect().width + 10);\n }\n // Exit keyboard dragging mode\n if (event.keyCode === KeyCode.enter || event.keyCode === KeyCode.space) {\n event.preventDefault();\n setIsKeyboardDragging(false);\n onFinishStable();\n }\n if (event.keyCode === KeyCode.escape) {\n setIsKeyboardDragging(false);\n resetColumnWidth();\n }\n } else {\n // Enter keyboard dragging mode\n if (event.keyCode === KeyCode.enter || event.keyCode === KeyCode.space) {\n event.preventDefault();\n setIsKeyboardDragging(true);\n }\n }\n };\n\n return { updateTrackerPosition, updateColumnWidth, resetColumnWidth, onMouseMove, onMouseUp, onKeyDown };\n }, [headerCell, isKeyboardDragging, minWidth, onDragStable, onFinishStable]);\n\n useEffect(() => {\n if ((!isDragging && !resizerHasFocus) || !headerCell || !handlers) {\n return;\n }\n\n originalHeaderCellWidthRef.current = headerCell.getBoundingClientRect().width;\n\n handlers.updateTrackerPosition(headerCell.getBoundingClientRect().right);\n\n if (isDragging) {\n document.body.classList.add(styles['resize-active']);\n document.addEventListener('mousemove', handlers.onMouseMove);\n document.addEventListener('mouseup', handlers.onMouseUp);\n }\n if (resizerHasFocus) {\n document.body.classList.add(styles['resize-active-with-focus']);\n headerCell.addEventListener('keydown', handlers.onKeyDown);\n }\n if (isKeyboardDragging) {\n document.body.classList.add(styles['resize-active']);\n }\n\n return () => {\n clearTimeout(autoGrowTimeout.current);\n document.body.classList.remove(styles['resize-active']);\n document.body.classList.remove(styles['resize-active-with-focus']);\n document.removeEventListener('mousemove', handlers.onMouseMove);\n document.removeEventListener('mouseup', handlers.onMouseUp);\n headerCell.removeEventListener('keydown', handlers.onKeyDown);\n };\n }, [headerCell, isDragging, isKeyboardDragging, onFinishStable, resizerHasFocus, handlers]);\n\n const resizerWidthId = useUniqueId();\n const resizerRole = isKeyboardDragging ? 'separator' : 'button';\n const headerCellWidthString = headerCellWidth.toFixed(0);\n const resizerAriaProps =\n resizerRole === 'button'\n ? {\n 'aria-labelledby': joinStrings(ariaLabelledby, resizerWidthId),\n 'aria-pressed': false,\n }\n : {\n 'aria-labelledby': ariaLabelledby,\n 'aria-orientation': 'vertical' as const,\n 'aria-valuenow': headerCellWidth,\n // aria-valuetext is needed because the VO announces \"collapsed\" when only aria-valuenow set without aria-valuemax\n 'aria-valuetext': headerCellWidthString,\n 'aria-valuemin': minWidth,\n };\n\n return (\n <>\n <span\n className={clsx(\n styles.resizer,\n isDragging && styles['resizer-active'],\n (resizerHasFocus || showFocusRing) && styles['has-focus']\n )}\n onMouseDown={event => {\n if (event.button !== 0) {\n return;\n }\n event.preventDefault();\n const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th')!;\n setIsDragging(true);\n setHeaderCell(headerCell);\n }}\n onFocus={event => {\n const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th')!;\n setHeaderCellWidth(headerCell.getBoundingClientRect().width);\n setResizerHasFocus(true);\n setHeaderCell(headerCell);\n onFocus?.();\n }}\n onBlur={() => {\n setResizerHasFocus(false);\n onBlur?.();\n if (isKeyboardDragging) {\n setIsKeyboardDragging(false);\n handlers?.resetColumnWidth();\n }\n }}\n role={resizerRole}\n {...resizerAriaProps}\n tabIndex={tabIndex}\n data-focus-id={focusId}\n />\n <ScreenreaderOnly id={resizerWidthId}>{headerCellWidthString}</ScreenreaderOnly>\n </>\n );\n}\n\nexport function ResizeTracker() {\n return <span className={styles.tracker} />;\n}\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import AsyncStore from '../../area-chart/async-store';
|
|
2
|
+
import AsyncStore, { ReadonlyAsyncStore } from '../../area-chart/async-store';
|
|
3
3
|
import { StickyColumnsCellState, StickyColumnsProps, StickyColumnsState } from './interfaces';
|
|
4
4
|
export interface StickyColumnsModel {
|
|
5
|
-
store:
|
|
5
|
+
store: ReadonlyAsyncStore<StickyColumnsState>;
|
|
6
6
|
style: {
|
|
7
7
|
wrapper?: React.CSSProperties;
|
|
8
8
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-sticky-columns.d.ts","sourceRoot":"lib/default/","sources":["table/sticky-columns/use-sticky-columns.ts"],"names":[],"mappings":"AAGA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,UAAU,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"use-sticky-columns.d.ts","sourceRoot":"lib/default/","sources":["table/sticky-columns/use-sticky-columns.ts"],"names":[],"mappings":"AAGA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,UAAU,EAAE,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAG9E,OAAO,EAEL,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAEnB,MAAM,cAAc,CAAC;AAOtB,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;IAC9C,KAAK,EAAE;QACL,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC/B,CAAC;IACF,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QACtC,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QACxC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAG,WAAW,KAAK,IAAI,CAAC;KACjE,CAAC;CACH;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,cAAc,EACd,kBAAkB,EAClB,iBAAiB,GAClB,EAAE,kBAAkB,GAAG,kBAAkB,CAgGzC;AAED,UAAU,wBAAwB;IAChC,aAAa,EAAE,kBAAkB,CAAC;IAClC,QAAQ,EAAE,WAAW,CAAC;IACtB,YAAY,EAAE,CAAC,MAAM,EAAE,IAAI,GAAG,sBAAsB,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAClF;AAED,UAAU,gBAAgB;IACxB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,QAAQ,EACR,YAAY,GACb,EAAE,wBAAwB,GAAG,gBAAgB,CA4D7C;AAED,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACxC,cAAc,EAAE,SAAS,WAAW,EAAE,CAAC;IACvC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,UAAU,CAAC,kBAAkB,CAAC;IAC5E,OAAO,CAAC,WAAW,CAIjB;IACF,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,OAAO,CAAS;;IAMjB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB;IAiBpD,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,kBAAkB,CAkCxB;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,SAAS,CAuBf;CACH"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-sticky-columns.js","sourceRoot":"lib/default/","sources":["table/sticky-columns/use-sticky-columns.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport AsyncStore from '../../area-chart/async-store';\nimport clsx from 'clsx';\nimport { useResizeObserver, useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport {\n CellOffsets,\n StickyColumnsCellState,\n StickyColumnsProps,\n StickyColumnsState,\n StickyColumnsWrapperState,\n} from './interfaces';\nimport { isCellStatesEqual, isWrapperStatesEqual, updateCellOffsets } from './utils';\n\n// We allow the table to have a minimum of 148px of available space besides the sum of the widths of the sticky columns\n// This value is an UX recommendation and is approximately 1/3 of our smallest breakpoint (465px)\nconst MINIMUM_SCROLLABLE_SPACE = 148;\n\nexport interface StickyColumnsModel {\n store: StickyColumnsStore;\n style: {\n wrapper?: React.CSSProperties;\n };\n refs: {\n table: React.RefCallback<HTMLElement>;\n wrapper: React.RefCallback<HTMLElement>;\n cell: (columnId: PropertyKey, node: null | HTMLElement) => void;\n };\n}\n\nexport function useStickyColumns({\n visibleColumns,\n stickyColumnsFirst,\n stickyColumnsLast,\n}: StickyColumnsProps): StickyColumnsModel {\n const store = useMemo(() => new StickyColumnsStore(), []);\n const wrapperRef = useRef<HTMLElement>(null) as React.MutableRefObject<null | HTMLElement>;\n const tableRef = useRef<HTMLElement>(null) as React.MutableRefObject<null | HTMLElement>;\n const cellsRef = useRef<Record<PropertyKey, HTMLElement>>({});\n\n const hasStickyColumns = stickyColumnsFirst + stickyColumnsLast > 0;\n\n const updateStickyStyles = useStableCallback(() => {\n if (wrapperRef.current && tableRef.current) {\n store.updateCellStyles({\n wrapper: wrapperRef.current,\n table: tableRef.current,\n cells: cellsRef.current,\n visibleColumns,\n stickyColumnsFirst,\n stickyColumnsLast,\n });\n }\n });\n\n useResizeObserver(wrapperRef, updateStickyStyles);\n\n useResizeObserver(tableRef, updateStickyStyles);\n\n useEffect(() => {\n if (wrapperRef.current && tableRef.current) {\n store.updateCellStyles({\n wrapper: wrapperRef.current,\n table: tableRef.current,\n cells: cellsRef.current,\n visibleColumns,\n stickyColumnsFirst,\n stickyColumnsLast,\n });\n }\n }, [store, stickyColumnsFirst, stickyColumnsLast, visibleColumns]);\n\n // Update wrapper styles imperatively to avoid unnecessary re-renders.\n useEffect(() => {\n if (!hasStickyColumns) {\n return;\n }\n\n const selector = (state: StickyColumnsState) => state.wrapperState;\n\n const updateWrapperStyles = (state: StickyColumnsWrapperState, prev: StickyColumnsWrapperState) => {\n if (isWrapperStatesEqual(state, prev)) {\n return;\n }\n\n if (wrapperRef.current) {\n wrapperRef.current.style.scrollPaddingLeft = state.scrollPaddingLeft + 'px';\n wrapperRef.current.style.scrollPaddingRight = state.scrollPaddingRight + 'px';\n }\n };\n\n const unsubscribe = store.subscribe(selector, (newState, prevState) =>\n updateWrapperStyles(selector(newState), selector(prevState))\n );\n return unsubscribe;\n }, [store, hasStickyColumns]);\n\n const setWrapper = useCallback(\n (node: null | HTMLElement) => {\n if (wrapperRef.current) {\n wrapperRef.current.removeEventListener('scroll', updateStickyStyles);\n }\n if (node && hasStickyColumns) {\n node.addEventListener('scroll', updateStickyStyles);\n }\n wrapperRef.current = node;\n },\n [hasStickyColumns, updateStickyStyles]\n );\n\n const setTable = useCallback((node: null | HTMLElement) => {\n tableRef.current = node;\n }, []);\n\n const setCell = useCallback((columnId: PropertyKey, node: null | HTMLElement) => {\n if (node) {\n cellsRef.current[columnId] = node;\n } else {\n delete cellsRef.current[columnId];\n }\n }, []);\n\n return {\n store,\n style: {\n // Provide wrapper styles as props so that a re-render won't cause invalidation.\n wrapper: hasStickyColumns ? { ...store.get().wrapperState } : undefined,\n },\n refs: { wrapper: setWrapper, table: setTable, cell: setCell },\n };\n}\n\ninterface UseStickyCellStylesProps {\n stickyColumns: StickyColumnsModel;\n columnId: PropertyKey;\n getClassName: (styles: null | StickyColumnsCellState) => Record<string, boolean>;\n}\n\ninterface StickyCellStyles {\n ref: React.RefCallback<HTMLElement>;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport function useStickyCellStyles({\n stickyColumns,\n columnId,\n getClassName,\n}: UseStickyCellStylesProps): StickyCellStyles {\n const setCell = stickyColumns.refs.cell;\n\n // unsubscribeRef to hold the function to unsubscribe from the store's updates\n const unsubscribeRef = useRef<null | (() => void)>(null);\n\n // refCallback updates the cell ref and sets up the store subscription\n const refCallback = useCallback(\n cellElement => {\n if (unsubscribeRef.current) {\n // Unsubscribe before we do any updates to avoid leaving any subscriptions hanging\n unsubscribeRef.current();\n }\n\n // Update cellRef and the store's state to point to the new DOM node\n setCell(columnId, cellElement);\n\n // Update cell styles imperatively to avoid unnecessary re-renders.\n const selector = (state: StickyColumnsState) => state.cellState[columnId];\n\n const updateCellStyles = (state: null | StickyColumnsCellState, prev: null | StickyColumnsCellState) => {\n if (isCellStatesEqual(state, prev)) {\n return;\n }\n\n const className = getClassName(state);\n if (cellElement) {\n Object.keys(className).forEach(key => {\n if (className[key]) {\n cellElement.classList.add(key);\n } else {\n cellElement.classList.remove(key);\n }\n });\n cellElement.style.left = state?.offset.left !== undefined ? `${state.offset.left}px` : '';\n cellElement.style.right = state?.offset.right !== undefined ? `${state.offset.right}px` : '';\n }\n };\n\n // If the node is not null (i.e., the table cell is being mounted or updated, not unmounted),\n // set up a new subscription to the store's updates\n if (cellElement) {\n unsubscribeRef.current = stickyColumns.store.subscribe(selector, (newState, prevState) => {\n updateCellStyles(selector(newState), selector(prevState));\n });\n }\n },\n\n // getClassName is expected to be pure\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [columnId, setCell, stickyColumns.store]\n );\n\n // Provide cell styles as props so that a re-render won't cause invalidation.\n const cellStyles = stickyColumns.store.get().cellState[columnId];\n return {\n ref: refCallback,\n className: cellStyles ? clsx(getClassName(cellStyles)) : undefined,\n style: cellStyles?.offset ?? undefined,\n };\n}\n\ninterface UpdateCellStylesProps {\n wrapper: HTMLElement;\n table: HTMLElement;\n cells: Record<PropertyKey, HTMLElement>;\n visibleColumns: readonly PropertyKey[];\n stickyColumnsFirst: number;\n stickyColumnsLast: number;\n}\n\nexport default class StickyColumnsStore extends AsyncStore<StickyColumnsState> {\n private cellOffsets: CellOffsets = {\n offsets: new Map(),\n stickyWidthLeft: 0,\n stickyWidthRight: 0,\n };\n private isStuckToTheLeft = false;\n private isStuckToTheRight = false;\n private padLeft = false;\n\n constructor() {\n super({ cellState: {}, wrapperState: { scrollPaddingLeft: 0, scrollPaddingRight: 0 } });\n }\n\n public updateCellStyles(props: UpdateCellStylesProps) {\n const hasStickyColumns = props.stickyColumnsFirst + props.stickyColumnsLast > 0;\n const hadStickyColumns = this.cellOffsets.offsets.size > 0;\n\n if (hasStickyColumns || hadStickyColumns) {\n this.updateScroll(props);\n this.updateCellOffsets(props);\n this.set(() => ({\n cellState: this.generateCellStyles(props),\n wrapperState: {\n scrollPaddingLeft: this.cellOffsets.stickyWidthLeft,\n scrollPaddingRight: this.cellOffsets.stickyWidthRight,\n },\n }));\n }\n }\n\n private updateScroll(props: UpdateCellStylesProps) {\n const wrapperScrollLeft = props.wrapper.scrollLeft;\n const wrapperScrollWidth = props.wrapper.scrollWidth;\n const wrapperClientWidth = props.wrapper.clientWidth;\n const tablePaddingLeft = parseFloat(getComputedStyle(props.table).paddingLeft) || 0;\n const tablePaddingRight = parseFloat(getComputedStyle(props.table).paddingRight) || 0;\n\n this.isStuckToTheLeft = wrapperScrollLeft > tablePaddingLeft;\n\n // Math.ceil() is used here to address an edge-case in certain browsers, where they return non-integer wrapperScrollLeft values\n // which are lower than expected (sub-pixel difference), resulting in the table always being in the \"stuck to the right\" state\n this.isStuckToTheRight = Math.ceil(wrapperScrollLeft) < wrapperScrollWidth - wrapperClientWidth - tablePaddingRight;\n\n this.padLeft = tablePaddingLeft !== 0 && this.isStuckToTheLeft;\n }\n\n private generateCellStyles = (props: UpdateCellStylesProps): Record<PropertyKey, null | StickyColumnsCellState> => {\n const isEnabled = this.isEnabled(props);\n const lastLeftStickyColumnIndex = props.stickyColumnsFirst - 1;\n const lastRightStickyColumnIndex = props.visibleColumns.length - props.stickyColumnsLast;\n\n return props.visibleColumns.reduce((acc, columnId, index) => {\n let stickySide = 'non-sticky';\n if (index < props.stickyColumnsFirst) {\n stickySide = 'left';\n } else if (index >= props.visibleColumns.length - props.stickyColumnsLast) {\n stickySide = 'right';\n }\n\n if (!isEnabled || stickySide === 'non-sticky') {\n acc[columnId] = null;\n return acc;\n }\n\n // Determine the offset of the sticky column using the `cellOffsets` state object\n const isFirstColumn = index === 0;\n const stickyColumnOffsetLeft = this.cellOffsets.offsets.get(columnId)?.first ?? 0;\n const stickyColumnOffsetRight = this.cellOffsets.offsets.get(columnId)?.last ?? 0;\n\n acc[columnId] = {\n padLeft: isFirstColumn && this.padLeft,\n lastLeft: this.isStuckToTheLeft && lastLeftStickyColumnIndex === index,\n lastRight: this.isStuckToTheRight && lastRightStickyColumnIndex === index,\n offset: {\n left: stickySide === 'left' ? stickyColumnOffsetLeft : undefined,\n right: stickySide === 'right' ? stickyColumnOffsetRight : undefined,\n },\n };\n return acc;\n }, {} as Record<PropertyKey, null | StickyColumnsCellState>);\n };\n\n private updateCellOffsets = (props: UpdateCellStylesProps): void => {\n this.cellOffsets = updateCellOffsets(props.cells, props);\n };\n\n private isEnabled = (props: UpdateCellStylesProps): boolean => {\n const noStickyColumns = props.stickyColumnsFirst + props.stickyColumnsLast === 0;\n if (noStickyColumns) {\n return false;\n }\n\n const wrapperWidth = props.wrapper.getBoundingClientRect().width;\n const tableWidth = props.table.getBoundingClientRect().width;\n const isWrapperScrollable = tableWidth > wrapperWidth;\n if (!isWrapperScrollable) {\n return false;\n }\n\n const totalStickySpace = this.cellOffsets.stickyWidthLeft + this.cellOffsets.stickyWidthRight;\n const tablePaddingLeft = parseFloat(getComputedStyle(props.table).paddingLeft) || 0;\n const tablePaddingRight = parseFloat(getComputedStyle(props.table).paddingRight) || 0;\n const hasEnoughScrollableSpace =\n totalStickySpace + MINIMUM_SCROLLABLE_SPACE + tablePaddingLeft + tablePaddingRight < wrapperWidth;\n if (!hasEnoughScrollableSpace) {\n return false;\n }\n\n return true;\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"use-sticky-columns.js","sourceRoot":"lib/default/","sources":["table/sticky-columns/use-sticky-columns.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport AsyncStore, { ReadonlyAsyncStore } from '../../area-chart/async-store';\nimport clsx from 'clsx';\nimport { useResizeObserver, useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport {\n CellOffsets,\n StickyColumnsCellState,\n StickyColumnsProps,\n StickyColumnsState,\n StickyColumnsWrapperState,\n} from './interfaces';\nimport { isCellStatesEqual, isWrapperStatesEqual, updateCellOffsets } from './utils';\n\n// We allow the table to have a minimum of 148px of available space besides the sum of the widths of the sticky columns\n// This value is an UX recommendation and is approximately 1/3 of our smallest breakpoint (465px)\nconst MINIMUM_SCROLLABLE_SPACE = 148;\n\nexport interface StickyColumnsModel {\n store: ReadonlyAsyncStore<StickyColumnsState>;\n style: {\n wrapper?: React.CSSProperties;\n };\n refs: {\n table: React.RefCallback<HTMLElement>;\n wrapper: React.RefCallback<HTMLElement>;\n cell: (columnId: PropertyKey, node: null | HTMLElement) => void;\n };\n}\n\nexport function useStickyColumns({\n visibleColumns,\n stickyColumnsFirst,\n stickyColumnsLast,\n}: StickyColumnsProps): StickyColumnsModel {\n const store = useMemo(() => new StickyColumnsStore(), []);\n const wrapperRef = useRef<HTMLElement>(null) as React.MutableRefObject<null | HTMLElement>;\n const tableRef = useRef<HTMLElement>(null) as React.MutableRefObject<null | HTMLElement>;\n const cellsRef = useRef<Record<PropertyKey, HTMLElement>>({});\n\n const hasStickyColumns = stickyColumnsFirst + stickyColumnsLast > 0;\n\n const updateStickyStyles = useStableCallback(() => {\n if (wrapperRef.current && tableRef.current) {\n store.updateCellStyles({\n wrapper: wrapperRef.current,\n table: tableRef.current,\n cells: cellsRef.current,\n visibleColumns,\n stickyColumnsFirst,\n stickyColumnsLast,\n });\n }\n });\n\n useResizeObserver(wrapperRef, updateStickyStyles);\n\n useResizeObserver(tableRef, updateStickyStyles);\n\n useEffect(() => {\n if (wrapperRef.current && tableRef.current) {\n store.updateCellStyles({\n wrapper: wrapperRef.current,\n table: tableRef.current,\n cells: cellsRef.current,\n visibleColumns,\n stickyColumnsFirst,\n stickyColumnsLast,\n });\n }\n }, [store, stickyColumnsFirst, stickyColumnsLast, visibleColumns]);\n\n // Update wrapper styles imperatively to avoid unnecessary re-renders.\n useEffect(() => {\n if (!hasStickyColumns) {\n return;\n }\n\n const selector = (state: StickyColumnsState) => state.wrapperState;\n\n const updateWrapperStyles = (state: StickyColumnsWrapperState, prev: StickyColumnsWrapperState) => {\n if (isWrapperStatesEqual(state, prev)) {\n return;\n }\n\n if (wrapperRef.current) {\n wrapperRef.current.style.scrollPaddingLeft = state.scrollPaddingLeft + 'px';\n wrapperRef.current.style.scrollPaddingRight = state.scrollPaddingRight + 'px';\n }\n };\n\n const unsubscribe = store.subscribe(selector, (newState, prevState) =>\n updateWrapperStyles(selector(newState), selector(prevState))\n );\n return unsubscribe;\n }, [store, hasStickyColumns]);\n\n const setWrapper = useCallback(\n (node: null | HTMLElement) => {\n if (wrapperRef.current) {\n wrapperRef.current.removeEventListener('scroll', updateStickyStyles);\n }\n if (node && hasStickyColumns) {\n node.addEventListener('scroll', updateStickyStyles);\n }\n wrapperRef.current = node;\n },\n [hasStickyColumns, updateStickyStyles]\n );\n\n const setTable = useCallback((node: null | HTMLElement) => {\n tableRef.current = node;\n }, []);\n\n const setCell = useCallback((columnId: PropertyKey, node: null | HTMLElement) => {\n if (node) {\n cellsRef.current[columnId] = node;\n } else {\n delete cellsRef.current[columnId];\n }\n }, []);\n\n return {\n store,\n style: {\n // Provide wrapper styles as props so that a re-render won't cause invalidation.\n wrapper: hasStickyColumns ? { ...store.get().wrapperState } : undefined,\n },\n refs: { wrapper: setWrapper, table: setTable, cell: setCell },\n };\n}\n\ninterface UseStickyCellStylesProps {\n stickyColumns: StickyColumnsModel;\n columnId: PropertyKey;\n getClassName: (styles: null | StickyColumnsCellState) => Record<string, boolean>;\n}\n\ninterface StickyCellStyles {\n ref: React.RefCallback<HTMLElement>;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport function useStickyCellStyles({\n stickyColumns,\n columnId,\n getClassName,\n}: UseStickyCellStylesProps): StickyCellStyles {\n const setCell = stickyColumns.refs.cell;\n\n // unsubscribeRef to hold the function to unsubscribe from the store's updates\n const unsubscribeRef = useRef<null | (() => void)>(null);\n\n // refCallback updates the cell ref and sets up the store subscription\n const refCallback = useCallback(\n cellElement => {\n if (unsubscribeRef.current) {\n // Unsubscribe before we do any updates to avoid leaving any subscriptions hanging\n unsubscribeRef.current();\n }\n\n // Update cellRef and the store's state to point to the new DOM node\n setCell(columnId, cellElement);\n\n // Update cell styles imperatively to avoid unnecessary re-renders.\n const selector = (state: StickyColumnsState) => state.cellState[columnId];\n\n const updateCellStyles = (state: null | StickyColumnsCellState, prev: null | StickyColumnsCellState) => {\n if (isCellStatesEqual(state, prev)) {\n return;\n }\n\n const className = getClassName(state);\n if (cellElement) {\n Object.keys(className).forEach(key => {\n if (className[key]) {\n cellElement.classList.add(key);\n } else {\n cellElement.classList.remove(key);\n }\n });\n cellElement.style.left = state?.offset.left !== undefined ? `${state.offset.left}px` : '';\n cellElement.style.right = state?.offset.right !== undefined ? `${state.offset.right}px` : '';\n }\n };\n\n // If the node is not null (i.e., the table cell is being mounted or updated, not unmounted),\n // set up a new subscription to the store's updates\n if (cellElement) {\n unsubscribeRef.current = stickyColumns.store.subscribe(selector, (newState, prevState) => {\n updateCellStyles(selector(newState), selector(prevState));\n });\n }\n },\n\n // getClassName is expected to be pure\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [columnId, setCell, stickyColumns.store]\n );\n\n // Provide cell styles as props so that a re-render won't cause invalidation.\n const cellStyles = stickyColumns.store.get().cellState[columnId];\n return {\n ref: refCallback,\n className: cellStyles ? clsx(getClassName(cellStyles)) : undefined,\n style: cellStyles?.offset ?? undefined,\n };\n}\n\ninterface UpdateCellStylesProps {\n wrapper: HTMLElement;\n table: HTMLElement;\n cells: Record<PropertyKey, HTMLElement>;\n visibleColumns: readonly PropertyKey[];\n stickyColumnsFirst: number;\n stickyColumnsLast: number;\n}\n\nexport default class StickyColumnsStore extends AsyncStore<StickyColumnsState> {\n private cellOffsets: CellOffsets = {\n offsets: new Map(),\n stickyWidthLeft: 0,\n stickyWidthRight: 0,\n };\n private isStuckToTheLeft = false;\n private isStuckToTheRight = false;\n private padLeft = false;\n\n constructor() {\n super({ cellState: {}, wrapperState: { scrollPaddingLeft: 0, scrollPaddingRight: 0 } });\n }\n\n public updateCellStyles(props: UpdateCellStylesProps) {\n const hasStickyColumns = props.stickyColumnsFirst + props.stickyColumnsLast > 0;\n const hadStickyColumns = this.cellOffsets.offsets.size > 0;\n\n if (hasStickyColumns || hadStickyColumns) {\n this.updateScroll(props);\n this.updateCellOffsets(props);\n this.set(() => ({\n cellState: this.generateCellStyles(props),\n wrapperState: {\n scrollPaddingLeft: this.cellOffsets.stickyWidthLeft,\n scrollPaddingRight: this.cellOffsets.stickyWidthRight,\n },\n }));\n }\n }\n\n private updateScroll(props: UpdateCellStylesProps) {\n const wrapperScrollLeft = props.wrapper.scrollLeft;\n const wrapperScrollWidth = props.wrapper.scrollWidth;\n const wrapperClientWidth = props.wrapper.clientWidth;\n const tablePaddingLeft = parseFloat(getComputedStyle(props.table).paddingLeft) || 0;\n const tablePaddingRight = parseFloat(getComputedStyle(props.table).paddingRight) || 0;\n\n this.isStuckToTheLeft = wrapperScrollLeft > tablePaddingLeft;\n\n // Math.ceil() is used here to address an edge-case in certain browsers, where they return non-integer wrapperScrollLeft values\n // which are lower than expected (sub-pixel difference), resulting in the table always being in the \"stuck to the right\" state\n this.isStuckToTheRight = Math.ceil(wrapperScrollLeft) < wrapperScrollWidth - wrapperClientWidth - tablePaddingRight;\n\n this.padLeft = tablePaddingLeft !== 0 && this.isStuckToTheLeft;\n }\n\n private generateCellStyles = (props: UpdateCellStylesProps): Record<PropertyKey, null | StickyColumnsCellState> => {\n const isEnabled = this.isEnabled(props);\n const lastLeftStickyColumnIndex = props.stickyColumnsFirst - 1;\n const lastRightStickyColumnIndex = props.visibleColumns.length - props.stickyColumnsLast;\n\n return props.visibleColumns.reduce((acc, columnId, index) => {\n let stickySide = 'non-sticky';\n if (index < props.stickyColumnsFirst) {\n stickySide = 'left';\n } else if (index >= props.visibleColumns.length - props.stickyColumnsLast) {\n stickySide = 'right';\n }\n\n if (!isEnabled || stickySide === 'non-sticky') {\n acc[columnId] = null;\n return acc;\n }\n\n // Determine the offset of the sticky column using the `cellOffsets` state object\n const isFirstColumn = index === 0;\n const stickyColumnOffsetLeft = this.cellOffsets.offsets.get(columnId)?.first ?? 0;\n const stickyColumnOffsetRight = this.cellOffsets.offsets.get(columnId)?.last ?? 0;\n\n acc[columnId] = {\n padLeft: isFirstColumn && this.padLeft,\n lastLeft: this.isStuckToTheLeft && lastLeftStickyColumnIndex === index,\n lastRight: this.isStuckToTheRight && lastRightStickyColumnIndex === index,\n offset: {\n left: stickySide === 'left' ? stickyColumnOffsetLeft : undefined,\n right: stickySide === 'right' ? stickyColumnOffsetRight : undefined,\n },\n };\n return acc;\n }, {} as Record<PropertyKey, null | StickyColumnsCellState>);\n };\n\n private updateCellOffsets = (props: UpdateCellStylesProps): void => {\n this.cellOffsets = updateCellOffsets(props.cells, props);\n };\n\n private isEnabled = (props: UpdateCellStylesProps): boolean => {\n const noStickyColumns = props.stickyColumnsFirst + props.stickyColumnsLast === 0;\n if (noStickyColumns) {\n return false;\n }\n\n const wrapperWidth = props.wrapper.getBoundingClientRect().width;\n const tableWidth = props.table.getBoundingClientRect().width;\n const isWrapperScrollable = tableWidth > wrapperWidth;\n if (!isWrapperScrollable) {\n return false;\n }\n\n const totalStickySpace = this.cellOffsets.stickyWidthLeft + this.cellOffsets.stickyWidthRight;\n const tablePaddingLeft = parseFloat(getComputedStyle(props.table).paddingLeft) || 0;\n const tablePaddingRight = parseFloat(getComputedStyle(props.table).paddingRight) || 0;\n const hasEnoughScrollableSpace =\n totalStickySpace + MINIMUM_SCROLLABLE_SPACE + tablePaddingLeft + tablePaddingRight < wrapperWidth;\n if (!hasEnoughScrollableSpace) {\n return false;\n }\n\n return true;\n };\n}\n"]}
|