@cloudscape-design/components 3.0.378 → 3.0.380

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.
@@ -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",
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "8354c11fa496f01ffbdb74482ccf910d1109419c"
2
+ "commit": "fe5918e19b6480f61c3848da1fd77eb8ba812dba"
3
3
  }
package/package.json CHANGED
@@ -109,7 +109,7 @@
109
109
  "./internal/base-component/index.js",
110
110
  "./internal/base-component/styles.css.js"
111
111
  ],
112
- "version": "3.0.378",
112
+ "version": "3.0.380",
113
113
  "repository": {
114
114
  "type": "git",
115
115
  "url": "https://github.com/cloudscape-design/components.git"
@@ -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;AAEjE,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,kGA0E1B,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
- 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: node => {
18
- if (node) {
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+BjE,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;IACH,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,IAAI,CAAC,EAAE;YACV,IAAI,IAAI,EAAE;gBACR,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBACvB,IAAI,GAAG,EAAE;oBACN,GAAoD,CAAC,OAAO,GAAG,IAAI,CAAC;iBACtE;aACF;QACH,CAAC,IACG,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';\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 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={node => {\n if (node) {\n stickyStyles.ref(node);\n if (ref) {\n (ref as React.MutableRefObject<HTMLTableCellElement>).current = node;\n }\n }\n }}\n {...nativeAttributes}\n >\n {children}\n </Element>\n );\n }\n);\n"]}
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":";AAYA,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,eA2Id;AAED,wBAAgB,aAAa,gBAE5B"}
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"}
@@ -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 [headerCell, setHeaderCell] = useState();
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
- useEffect(() => {
24
- if ((!isDragging && !resizerHasFocus) || !headerCell) {
25
- return;
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 tracker = rootElement.querySelector(`.${styles.tracker}`);
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
- tracker.style.top = headerCell.getBoundingClientRect().height + 'px';
40
+ trackerElement.style.top = headerCell.getBoundingClientRect().height + 'px';
36
41
  // minus one pixel to offset the cell border
37
- tracker.style.left = newOffset - scrollParentLeft - 1 + 'px';
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
- // prevent screenreader cursor move
80
- if (event.keyCode === KeyCode.left || event.keyCode === KeyCode.right) {
81
- event.preventDefault();
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
- // update width
84
- if (event.keyCode === KeyCode.left) {
85
- updateColumnWidth(headerCell.getBoundingClientRect().width - 10);
86
- }
87
- if (event.keyCode === KeyCode.right) {
88
- updateColumnWidth(headerCell.getBoundingClientRect().width + 10);
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(headerCell.getBoundingClientRect().right);
92
- document.body.classList.add(styles['resize-active']);
93
- document.body.classList.remove(styles['resize-active-with-focus']);
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.addEventListener('mousemove', onMouseMove);
96
- document.addEventListener('mouseup', onMouseUp);
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.removeEventListener('mousemove', onMouseMove);
106
- document.removeEventListener('mouseup', onMouseUp);
107
- headerCell.removeEventListener('keydown', onKeyDown);
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, onDragStable, onFinishStable, resizerHasFocus, minWidth]);
110
- return (React.createElement("span", { className: clsx(styles.resizer, isDragging && styles['resizer-active'], (resizerHasFocus || showFocusRing) && styles['has-focus']), onMouseDown: event => {
111
- if (event.button !== 0) {
112
- return;
113
- }
114
- event.preventDefault();
115
- const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th');
116
- setIsDragging(true);
117
- setHeaderCell(headerCell);
118
- }, onFocus: event => {
119
- const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th');
120
- setHeaderCellWidth(headerCell.getBoundingClientRect().width);
121
- setResizerHasFocus(true);
122
- setHeaderCell(headerCell);
123
- onFocus === null || onFocus === void 0 ? void 0 : onFocus();
124
- }, onBlur: () => {
125
- setResizerHasFocus(false);
126
- onBlur === null || onBlur === void 0 ? void 0 : onBlur();
127
- }, role: "separator", "aria-orientation": "vertical", "aria-labelledby": ariaLabelledby, "aria-valuenow": headerCellWidth, "aria-valuetext": headerCellWidth.toString(), "aria-valuemin": minWidth, tabIndex: tabIndex, "data-focus-id": focusId }));
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 });