@cloudscape-design/components 3.0.368 → 3.0.370

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.
Files changed (87) hide show
  1. package/app-layout/index.d.ts.map +1 -1
  2. package/app-layout/index.js +8 -2
  3. package/app-layout/index.js.map +1 -1
  4. package/app-layout/visual-refresh/context.d.ts.map +1 -1
  5. package/app-layout/visual-refresh/context.js +9 -3
  6. package/app-layout/visual-refresh/context.js.map +1 -1
  7. package/app-layout/visual-refresh/drawers.d.ts.map +1 -1
  8. package/app-layout/visual-refresh/drawers.js +1 -5
  9. package/app-layout/visual-refresh/drawers.js.map +1 -1
  10. package/app-layout/visual-refresh/styles.css.js +75 -74
  11. package/app-layout/visual-refresh/styles.scoped.css +209 -178
  12. package/app-layout/visual-refresh/styles.selectors.js +75 -74
  13. package/app-layout/visual-refresh/trigger-button.d.ts.map +1 -1
  14. package/app-layout/visual-refresh/trigger-button.js +2 -1
  15. package/app-layout/visual-refresh/trigger-button.js.map +1 -1
  16. package/date-picker/index.js +1 -1
  17. package/date-picker/index.js.map +1 -1
  18. package/date-range-picker/index.js +1 -1
  19. package/date-range-picker/index.js.map +1 -1
  20. package/expandable-section/expandable-section-header.d.ts.map +1 -1
  21. package/expandable-section/expandable-section-header.js +2 -2
  22. package/expandable-section/expandable-section-header.js.map +1 -1
  23. package/internal/environment.js +1 -1
  24. package/internal/environment.json +1 -1
  25. package/internal/focus-tracker.d.ts +1 -2
  26. package/internal/focus-tracker.d.ts.map +1 -1
  27. package/internal/focus-tracker.js +5 -10
  28. package/internal/focus-tracker.js.map +1 -1
  29. package/internal/hooks/use-focus-tracker.d.ts +0 -1
  30. package/internal/hooks/use-focus-tracker.d.ts.map +1 -1
  31. package/internal/hooks/use-focus-tracker.js +3 -3
  32. package/internal/hooks/use-focus-tracker.js.map +1 -1
  33. package/internal/manifest.json +1 -1
  34. package/internal/utils/node-belongs.d.ts +1 -1
  35. package/internal/utils/node-belongs.d.ts.map +1 -1
  36. package/internal/utils/node-belongs.js +4 -1
  37. package/internal/utils/node-belongs.js.map +1 -1
  38. package/package.json +1 -1
  39. package/side-navigation/internal.js +0 -2
  40. package/side-navigation/internal.js.map +1 -1
  41. package/table/body-cell/index.js +3 -3
  42. package/table/body-cell/index.js.map +1 -1
  43. package/table/body-cell/inline-editor.d.ts +5 -1
  44. package/table/body-cell/inline-editor.d.ts.map +1 -1
  45. package/table/body-cell/inline-editor.js +7 -7
  46. package/table/body-cell/inline-editor.js.map +1 -1
  47. package/table/header-cell/index.d.ts +2 -4
  48. package/table/header-cell/index.d.ts.map +1 -1
  49. package/table/header-cell/index.js +6 -25
  50. package/table/header-cell/index.js.map +1 -1
  51. package/table/header-cell/th-element.d.ts +21 -0
  52. package/table/header-cell/th-element.d.ts.map +1 -0
  53. package/table/header-cell/th-element.js +27 -0
  54. package/table/header-cell/th-element.js.map +1 -0
  55. package/table/header-cell/utils.d.ts +1 -2
  56. package/table/header-cell/utils.d.ts.map +1 -1
  57. package/table/header-cell/utils.js.map +1 -1
  58. package/table/internal.js +2 -2
  59. package/table/internal.js.map +1 -1
  60. package/table/resizer/index.d.ts +2 -1
  61. package/table/resizer/index.d.ts.map +1 -1
  62. package/table/resizer/index.js +2 -2
  63. package/table/resizer/index.js.map +1 -1
  64. package/table/selection-control/index.d.ts +2 -4
  65. package/table/selection-control/index.d.ts.map +1 -1
  66. package/table/selection-control/index.js +2 -2
  67. package/table/selection-control/index.js.map +1 -1
  68. package/table/sticky-header.d.ts +2 -2
  69. package/table/sticky-header.d.ts.map +1 -1
  70. package/table/sticky-header.js.map +1 -1
  71. package/table/table-role/interfaces.d.ts +1 -1
  72. package/table/table-role/interfaces.d.ts.map +1 -1
  73. package/table/table-role/interfaces.js.map +1 -1
  74. package/table/table-role/table-role-helper.d.ts +8 -2
  75. package/table/table-role/table-role-helper.d.ts.map +1 -1
  76. package/table/table-role/table-role-helper.js +12 -7
  77. package/table/table-role/table-role-helper.js.map +1 -1
  78. package/table/table-role/use-grid-navigation.js +7 -7
  79. package/table/table-role/use-grid-navigation.js.map +1 -1
  80. package/table/table-role/utils.d.ts +3 -2
  81. package/table/table-role/utils.d.ts.map +1 -1
  82. package/table/table-role/utils.js +60 -25
  83. package/table/table-role/utils.js.map +1 -1
  84. package/table/thead.d.ts +2 -11
  85. package/table/thead.d.ts.map +1 -1
  86. package/table/thead.js +13 -13
  87. package/table/thead.js.map +1 -1
@@ -13,7 +13,7 @@ export function getTableRoleProps(options) {
13
13
  const nativeProps = {};
14
14
  // Browsers have weird mechanism to guess whether it's a data table or a layout table.
15
15
  // If we state explicitly, they get it always correctly even with low number of rows.
16
- nativeProps.role = options.tableRole === 'grid-no-navigation' ? 'grid' : options.tableRole;
16
+ nativeProps.role = options.tableRole === 'grid-default' ? 'grid' : options.tableRole;
17
17
  nativeProps['aria-label'] = options.ariaLabel;
18
18
  nativeProps['aria-labelledby'] = options.ariaLabelledBy;
19
19
  // Incrementing the total count by one to account for the header row.
@@ -40,21 +40,20 @@ export function getTableWrapperRoleProps(options) {
40
40
  export function getTableHeaderRowRoleProps(options) {
41
41
  const nativeProps = {};
42
42
  // For grids headers are treated similar to data rows and are indexed accordingly.
43
- if (options.tableRole === 'grid' || options.tableRole === 'grid-no-navigation') {
43
+ if (options.tableRole === 'grid' || options.tableRole === 'grid-default') {
44
44
  nativeProps['aria-rowindex'] = 1;
45
45
  }
46
46
  return nativeProps;
47
47
  }
48
48
  export function getTableRowRoleProps(options) {
49
- var _a, _b;
50
49
  const nativeProps = {};
51
- // For grids data cell indices are incremented by 2 to account for the header cells.
52
- if (options.tableRole === 'grid' || options.tableRole === 'grid-no-navigation') {
53
- nativeProps['aria-rowindex'] = ((_a = options.firstIndex) !== null && _a !== void 0 ? _a : 0) + options.rowIndex + 2;
50
+ // The data cell indices are incremented by 1 to account for the header cells.
51
+ if (options.tableRole === 'grid') {
52
+ nativeProps['aria-rowindex'] = (options.firstIndex || 1) + options.rowIndex + 1;
54
53
  }
55
54
  // For tables indices are only added when the first index is not 0 (not the first page/frame).
56
55
  else if (options.firstIndex !== undefined) {
57
- nativeProps['aria-rowindex'] = ((_b = options.firstIndex) !== null && _b !== void 0 ? _b : 0) + options.rowIndex + 1;
56
+ nativeProps['aria-rowindex'] = options.firstIndex + options.rowIndex + 1;
58
57
  }
59
58
  return nativeProps;
60
59
  }
@@ -67,6 +66,9 @@ export function getTableColHeaderRoleProps(options) {
67
66
  if (options.sortingStatus) {
68
67
  nativeProps['aria-sort'] = getAriaSort(options.sortingStatus);
69
68
  }
69
+ if (options.tableRole === 'grid' && options.isWidget) {
70
+ nativeProps['data-widget-cell'] = true;
71
+ }
70
72
  return nativeProps;
71
73
  }
72
74
  export function getTableCellRoleProps(options) {
@@ -77,6 +79,9 @@ export function getTableCellRoleProps(options) {
77
79
  if (options.isRowHeader) {
78
80
  nativeProps.scope = 'row';
79
81
  }
82
+ if (options.tableRole === 'grid' && options.isWidget) {
83
+ nativeProps['data-widget-cell'] = true;
84
+ }
80
85
  return nativeProps;
81
86
  }
82
87
  //# sourceMappingURL=table-role-helper.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"table-role-helper.js","sourceRoot":"lib/default/","sources":["table/table-role/table-role-helper.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 { TableRole } from './interfaces';\n\ntype SortingStatus = 'sortable' | 'ascending' | 'descending';\n\nconst stateToAriaSort = {\n sortable: 'none',\n ascending: 'ascending',\n descending: 'descending',\n} as const;\nconst getAriaSort = (sortingState: SortingStatus) => stateToAriaSort[sortingState];\n\n// Depending on its content the table can have different semantic representation which includes the\n// ARIA role of the table component (\"table\", \"grid\", \"treegrid\") but also roles and other semantic attributes\n// of the child elements. The TableRole helper encapsulates table's semantic structure.\n\nexport function getTableRoleProps(options: {\n tableRole: TableRole;\n ariaLabel?: string;\n ariaLabelledBy?: string;\n totalItemsCount?: number;\n totalColumnsCount?: number;\n}): React.TableHTMLAttributes<HTMLTableElement> {\n const nativeProps: React.TableHTMLAttributes<HTMLTableElement> = {};\n\n // Browsers have weird mechanism to guess whether it's a data table or a layout table.\n // If we state explicitly, they get it always correctly even with low number of rows.\n nativeProps.role = options.tableRole === 'grid-no-navigation' ? 'grid' : options.tableRole;\n\n nativeProps['aria-label'] = options.ariaLabel;\n nativeProps['aria-labelledby'] = options.ariaLabelledBy;\n\n // Incrementing the total count by one to account for the header row.\n nativeProps['aria-rowcount'] = options.totalItemsCount ? options.totalItemsCount + 1 : -1;\n\n if (options.tableRole === 'grid') {\n nativeProps['aria-colcount'] = options.totalColumnsCount;\n }\n\n // Make table component programmatically focusable to attach focusin/focusout for keyboard navigation.\n if (options.tableRole === 'grid') {\n nativeProps.tabIndex = -1;\n }\n\n return nativeProps;\n}\n\nexport function getTableWrapperRoleProps(options: { tableRole: TableRole; isScrollable: boolean; ariaLabel?: string }) {\n const nativeProps: React.HTMLAttributes<HTMLDivElement> = {};\n\n // When the table is scrollable, the wrapper is made focusable so that keyboard users can scroll it horizontally with arrow keys.\n if (options.isScrollable && options.tableRole !== 'grid') {\n nativeProps.role = 'region';\n nativeProps.tabIndex = 0;\n nativeProps['aria-label'] = options.ariaLabel;\n }\n\n return nativeProps;\n}\n\nexport function getTableHeaderRowRoleProps(options: { tableRole: TableRole }) {\n const nativeProps: React.HTMLAttributes<HTMLTableRowElement> = {};\n\n // For grids headers are treated similar to data rows and are indexed accordingly.\n if (options.tableRole === 'grid' || options.tableRole === 'grid-no-navigation') {\n nativeProps['aria-rowindex'] = 1;\n }\n\n return nativeProps;\n}\n\nexport function getTableRowRoleProps(options: { tableRole: TableRole; rowIndex: number; firstIndex?: number }) {\n const nativeProps: React.HTMLAttributes<HTMLTableRowElement> = {};\n\n // For grids data cell indices are incremented by 2 to account for the header cells.\n if (options.tableRole === 'grid' || options.tableRole === 'grid-no-navigation') {\n nativeProps['aria-rowindex'] = (options.firstIndex ?? 0) + options.rowIndex + 2;\n }\n // For tables indices are only added when the first index is not 0 (not the first page/frame).\n else if (options.firstIndex !== undefined) {\n nativeProps['aria-rowindex'] = (options.firstIndex ?? 0) + options.rowIndex + 1;\n }\n\n return nativeProps;\n}\n\nexport function getTableColHeaderRoleProps(options: {\n tableRole: TableRole;\n colIndex: number;\n sortingStatus?: SortingStatus;\n}) {\n const nativeProps: React.ThHTMLAttributes<HTMLTableCellElement> = {};\n\n nativeProps.scope = 'col';\n\n if (options.tableRole === 'grid') {\n nativeProps['aria-colindex'] = options.colIndex + 1;\n }\n\n if (options.sortingStatus) {\n nativeProps['aria-sort'] = getAriaSort(options.sortingStatus);\n }\n\n return nativeProps;\n}\n\nexport function getTableCellRoleProps(options: { tableRole: TableRole; colIndex: number; isRowHeader?: boolean }) {\n const nativeProps: React.TdHTMLAttributes<HTMLTableCellElement> = {};\n\n if (options.tableRole === 'grid') {\n nativeProps['aria-colindex'] = options.colIndex + 1;\n }\n\n if (options.isRowHeader) {\n nativeProps.scope = 'row';\n }\n\n return nativeProps;\n}\n"]}
1
+ {"version":3,"file":"table-role-helper.js","sourceRoot":"lib/default/","sources":["table/table-role/table-role-helper.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 { TableRole } from './interfaces';\n\ntype SortingStatus = 'sortable' | 'ascending' | 'descending';\n\nconst stateToAriaSort = {\n sortable: 'none',\n ascending: 'ascending',\n descending: 'descending',\n} as const;\nconst getAriaSort = (sortingState: SortingStatus) => stateToAriaSort[sortingState];\n\n// Depending on its content the table can have different semantic representation which includes the\n// ARIA role of the table component (\"table\", \"grid\", \"treegrid\") but also roles and other semantic attributes\n// of the child elements. The TableRole helper encapsulates table's semantic structure.\n\nexport function getTableRoleProps(options: {\n tableRole: TableRole;\n ariaLabel?: string;\n ariaLabelledBy?: string;\n totalItemsCount?: number;\n totalColumnsCount?: number;\n}): React.TableHTMLAttributes<HTMLTableElement> {\n const nativeProps: React.TableHTMLAttributes<HTMLTableElement> = {};\n\n // Browsers have weird mechanism to guess whether it's a data table or a layout table.\n // If we state explicitly, they get it always correctly even with low number of rows.\n nativeProps.role = options.tableRole === 'grid-default' ? 'grid' : options.tableRole;\n\n nativeProps['aria-label'] = options.ariaLabel;\n nativeProps['aria-labelledby'] = options.ariaLabelledBy;\n\n // Incrementing the total count by one to account for the header row.\n nativeProps['aria-rowcount'] = options.totalItemsCount ? options.totalItemsCount + 1 : -1;\n\n if (options.tableRole === 'grid') {\n nativeProps['aria-colcount'] = options.totalColumnsCount;\n }\n\n // Make table component programmatically focusable to attach focusin/focusout for keyboard navigation.\n if (options.tableRole === 'grid') {\n nativeProps.tabIndex = -1;\n }\n\n return nativeProps;\n}\n\nexport function getTableWrapperRoleProps(options: { tableRole: TableRole; isScrollable: boolean; ariaLabel?: string }) {\n const nativeProps: React.HTMLAttributes<HTMLDivElement> = {};\n\n // When the table is scrollable, the wrapper is made focusable so that keyboard users can scroll it horizontally with arrow keys.\n if (options.isScrollable && options.tableRole !== 'grid') {\n nativeProps.role = 'region';\n nativeProps.tabIndex = 0;\n nativeProps['aria-label'] = options.ariaLabel;\n }\n\n return nativeProps;\n}\n\nexport function getTableHeaderRowRoleProps(options: { tableRole: TableRole }) {\n const nativeProps: React.HTMLAttributes<HTMLTableRowElement> = {};\n\n // For grids headers are treated similar to data rows and are indexed accordingly.\n if (options.tableRole === 'grid' || options.tableRole === 'grid-default') {\n nativeProps['aria-rowindex'] = 1;\n }\n\n return nativeProps;\n}\n\nexport function getTableRowRoleProps(options: { tableRole: TableRole; rowIndex: number; firstIndex?: number }) {\n const nativeProps: React.HTMLAttributes<HTMLTableRowElement> = {};\n\n // The data cell indices are incremented by 1 to account for the header cells.\n if (options.tableRole === 'grid') {\n nativeProps['aria-rowindex'] = (options.firstIndex || 1) + options.rowIndex + 1;\n }\n // For tables indices are only added when the first index is not 0 (not the first page/frame).\n else if (options.firstIndex !== undefined) {\n nativeProps['aria-rowindex'] = options.firstIndex + options.rowIndex + 1;\n }\n\n return nativeProps;\n}\n\nexport function getTableColHeaderRoleProps(options: {\n tableRole: TableRole;\n colIndex: number;\n sortingStatus?: SortingStatus;\n isWidget?: boolean;\n}) {\n const nativeProps: React.ThHTMLAttributes<HTMLTableCellElement> & { 'data-widget-cell'?: boolean } = {};\n\n nativeProps.scope = 'col';\n\n if (options.tableRole === 'grid') {\n nativeProps['aria-colindex'] = options.colIndex + 1;\n }\n\n if (options.sortingStatus) {\n nativeProps['aria-sort'] = getAriaSort(options.sortingStatus);\n }\n\n if (options.tableRole === 'grid' && options.isWidget) {\n nativeProps['data-widget-cell'] = true;\n }\n\n return nativeProps;\n}\n\nexport function getTableCellRoleProps(options: {\n tableRole: TableRole;\n colIndex: number;\n isRowHeader?: boolean;\n isWidget?: boolean;\n}) {\n const nativeProps: React.TdHTMLAttributes<HTMLTableCellElement> & { 'data-widget-cell'?: boolean } = {};\n\n if (options.tableRole === 'grid') {\n nativeProps['aria-colindex'] = options.colIndex + 1;\n }\n\n if (options.isRowHeader) {\n nativeProps.scope = 'row';\n }\n\n if (options.tableRole === 'grid' && options.isWidget) {\n nativeProps['data-widget-cell'] = true;\n }\n\n return nativeProps;\n}\n"]}
@@ -1,9 +1,9 @@
1
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
2
  // SPDX-License-Identifier: Apache-2.0
3
3
  import { useEffect, useMemo } from 'react';
4
- import { findFocusinCell, moveFocusBy, moveFocusIn, updateTableIndices } from './utils';
4
+ import { findFocusinCell, moveFocusBy, moveFocusIn, restoreTableFocusables, updateTableFocusables } from './utils';
5
5
  import { KeyCode } from '../../internal/keycode';
6
- import { containsOrEqual } from '../../internal/utils/dom';
6
+ import { nodeContains } from '@cloudscape-design/component-toolkit/dom';
7
7
  /**
8
8
  * Makes table with role="grid" navigable with keyboard commands.
9
9
  * See https://www.w3.org/WAI/ARIA/apg/patterns/grid
@@ -43,7 +43,7 @@ class GridNavigationModel {
43
43
  }
44
44
  this.prevFocusedCell = cell;
45
45
  this.focusedCell = cell;
46
- updateTableIndices(this.table, cell);
46
+ updateTableFocusables(this.table, cell);
47
47
  };
48
48
  this.onFocusout = () => {
49
49
  this.focusedCell = null;
@@ -140,13 +140,13 @@ class GridNavigationModel {
140
140
  for (const record of mutationRecords) {
141
141
  if (record.type === 'childList') {
142
142
  for (const removedNode of Array.from(record.removedNodes)) {
143
- if (containsOrEqual(removedNode, this.prevFocusedCell.element)) {
143
+ if (removedNode === this.prevFocusedCell.element || nodeContains(removedNode, this.prevFocusedCell.element)) {
144
144
  moveFocusBy(this.table, this.prevFocusedCell, { y: 0, x: 0 });
145
145
  }
146
146
  }
147
147
  }
148
148
  }
149
- updateTableIndices(this.table, (_a = this.focusedCell) !== null && _a !== void 0 ? _a : this.prevFocusedCell);
149
+ updateTableFocusables(this.table, (_a = this.focusedCell) !== null && _a !== void 0 ? _a : this.prevFocusedCell);
150
150
  };
151
151
  }
152
152
  init(table) {
@@ -157,13 +157,13 @@ class GridNavigationModel {
157
157
  this.table.addEventListener('keydown', this.onKeydown);
158
158
  const mutationObserver = new MutationObserver(this.onMutation);
159
159
  mutationObserver.observe(table, { childList: true, subtree: true });
160
- // No need to clean this up as no resources are allocated.
161
- updateTableIndices(this.table, (_a = this.focusedCell) !== null && _a !== void 0 ? _a : this.prevFocusedCell);
160
+ updateTableFocusables(this.table, (_a = this.focusedCell) !== null && _a !== void 0 ? _a : this.prevFocusedCell);
162
161
  this.cleanup = () => {
163
162
  this.table.removeEventListener('focusin', this.onFocusin);
164
163
  this.table.removeEventListener('focusout', this.onFocusout);
165
164
  this.table.removeEventListener('keydown', this.onKeydown);
166
165
  mutationObserver.disconnect();
166
+ restoreTableFocusables(this.table);
167
167
  };
168
168
  }
169
169
  destroy() {
@@ -1 +1 @@
1
- {"version":3,"file":"use-grid-navigation.js","sourceRoot":"lib/default/","sources":["table/table-role/use-grid-navigation.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 { useEffect, useMemo } from 'react';\nimport { findFocusinCell, moveFocusBy, moveFocusIn, updateTableIndices } from './utils';\nimport { FocusedCell, GridNavigationAPI, GridNavigationProps } from './interfaces';\nimport { KeyCode } from '../../internal/keycode';\nimport { containsOrEqual } from '../../internal/utils/dom';\n\n/**\n * Makes table with role=\"grid\" navigable with keyboard commands.\n * See https://www.w3.org/WAI/ARIA/apg/patterns/grid\n */\nexport function useGridNavigation({ tableRole, pageSize, getTable }: GridNavigationProps): GridNavigationAPI {\n const model = useMemo(() => new GridNavigationModel(), []);\n\n // Initialize the model with the table container assuming it is mounted synchronously and only once.\n useEffect(\n () => {\n if (tableRole === 'grid') {\n const table = getTable();\n table && model.init(table);\n }\n return () => model.destroy();\n },\n // Assuming getTable is stable.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [model, tableRole]\n );\n\n // Notify the model of the props change.\n useEffect(() => {\n model.update({ pageSize });\n }, [model, pageSize]);\n\n return {};\n}\n\nclass GridNavigationModel {\n // Props\n private _pageSize = 0;\n private _table: null | HTMLTableElement = null;\n\n // State\n private prevFocusedCell: null | FocusedCell = null;\n private focusedCell: null | FocusedCell = null;\n private cleanup = () => {};\n\n public init(table: HTMLTableElement) {\n this._table = table;\n\n this.table.addEventListener('focusin', this.onFocusin);\n this.table.addEventListener('focusout', this.onFocusout);\n this.table.addEventListener('keydown', this.onKeydown);\n\n const mutationObserver = new MutationObserver(this.onMutation);\n mutationObserver.observe(table, { childList: true, subtree: true });\n\n // No need to clean this up as no resources are allocated.\n updateTableIndices(this.table, this.focusedCell ?? this.prevFocusedCell);\n\n this.cleanup = () => {\n this.table.removeEventListener('focusin', this.onFocusin);\n this.table.removeEventListener('focusout', this.onFocusout);\n this.table.removeEventListener('keydown', this.onKeydown);\n\n mutationObserver.disconnect();\n };\n }\n\n public destroy() {\n this.cleanup();\n }\n\n public update({ pageSize }: { pageSize: number }) {\n this._pageSize = pageSize;\n }\n\n private get pageSize() {\n return this._pageSize;\n }\n\n private get table(): HTMLTableElement {\n if (!this._table) {\n throw new Error('Invariant violation: GridNavigationModel is used before initialization.');\n }\n return this._table;\n }\n\n private onFocusin = (event: FocusEvent) => {\n const cell = findFocusinCell(event);\n\n if (!cell) {\n return;\n }\n this.prevFocusedCell = cell;\n this.focusedCell = cell;\n\n updateTableIndices(this.table, cell);\n };\n\n private onFocusout = () => {\n this.focusedCell = null;\n };\n\n private onKeydown = (event: KeyboardEvent) => {\n if (!this.focusedCell) {\n return;\n }\n\n const f2Code = 113;\n const ctrlKey = event.ctrlKey ? 1 : 0;\n const altKey = event.altKey ? 1 : 0;\n const shiftKey = event.shiftKey ? 1 : 0;\n const metaKey = event.metaKey ? 1 : 0;\n const numModifiersPressed = ctrlKey + altKey + shiftKey + metaKey;\n\n let key = event.keyCode;\n if (numModifiersPressed === 1 && event.ctrlKey) {\n key = -key;\n } else if (numModifiersPressed) {\n return;\n }\n\n const from = this.focusedCell;\n const minExtreme = Number.NEGATIVE_INFINITY;\n const maxExtreme = Number.POSITIVE_INFINITY;\n\n // When focus is inside widget cell only intercept Escape and F2 commands to move focus back to cell.\n if (from.widget && from.element !== from.cellElement) {\n if (key === KeyCode.escape || key === f2Code) {\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 0, x: 0 });\n }\n return;\n }\n\n switch (key) {\n case KeyCode.up:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: -1, x: 0 });\n\n case KeyCode.down:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 1, x: 0 });\n\n case KeyCode.left:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 0, x: -1 });\n\n case KeyCode.right:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 0, x: 1 });\n\n case KeyCode.pageUp:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: -this.pageSize, x: 0 });\n\n case KeyCode.pageDown:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: this.pageSize, x: 0 });\n\n case KeyCode.home:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 0, x: minExtreme });\n\n case KeyCode.end:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 0, x: maxExtreme });\n\n case -KeyCode.home:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: minExtreme, x: minExtreme });\n\n case -KeyCode.end:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: maxExtreme, x: maxExtreme });\n\n case KeyCode.enter:\n if (from.element === from.cellElement) {\n event.preventDefault();\n return moveFocusIn(from);\n }\n break;\n\n case KeyCode.escape:\n if (from.element !== from.cellElement) {\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 0, x: 0 });\n }\n break;\n\n case f2Code:\n event.preventDefault();\n if (from.element === from.cellElement) {\n return moveFocusIn(from);\n } else {\n return moveFocusBy(this.table, from, { y: 0, x: 0 });\n }\n\n default:\n return;\n }\n };\n\n private onMutation = (mutationRecords: MutationRecord[]) => {\n if (!this.prevFocusedCell) {\n return;\n }\n\n // When focused cell was un-mounted - re-apply focus to the same location.\n for (const record of mutationRecords) {\n if (record.type === 'childList') {\n for (const removedNode of Array.from(record.removedNodes)) {\n if (containsOrEqual(removedNode, this.prevFocusedCell.element)) {\n moveFocusBy(this.table, this.prevFocusedCell, { y: 0, x: 0 });\n }\n }\n }\n }\n\n updateTableIndices(this.table, this.focusedCell ?? this.prevFocusedCell);\n };\n}\n"]}
1
+ {"version":3,"file":"use-grid-navigation.js","sourceRoot":"lib/default/","sources":["table/table-role/use-grid-navigation.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 { useEffect, useMemo } from 'react';\nimport { findFocusinCell, moveFocusBy, moveFocusIn, restoreTableFocusables, updateTableFocusables } from './utils';\nimport { FocusedCell, GridNavigationAPI, GridNavigationProps } from './interfaces';\nimport { KeyCode } from '../../internal/keycode';\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\n\n/**\n * Makes table with role=\"grid\" navigable with keyboard commands.\n * See https://www.w3.org/WAI/ARIA/apg/patterns/grid\n */\nexport function useGridNavigation({ tableRole, pageSize, getTable }: GridNavigationProps): GridNavigationAPI {\n const model = useMemo(() => new GridNavigationModel(), []);\n\n // Initialize the model with the table container assuming it is mounted synchronously and only once.\n useEffect(\n () => {\n if (tableRole === 'grid') {\n const table = getTable();\n table && model.init(table);\n }\n return () => model.destroy();\n },\n // Assuming getTable is stable.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [model, tableRole]\n );\n\n // Notify the model of the props change.\n useEffect(() => {\n model.update({ pageSize });\n }, [model, pageSize]);\n\n return {};\n}\n\nclass GridNavigationModel {\n // Props\n private _pageSize = 0;\n private _table: null | HTMLTableElement = null;\n\n // State\n private prevFocusedCell: null | FocusedCell = null;\n private focusedCell: null | FocusedCell = null;\n private cleanup = () => {};\n\n public init(table: HTMLTableElement) {\n this._table = table;\n\n this.table.addEventListener('focusin', this.onFocusin);\n this.table.addEventListener('focusout', this.onFocusout);\n this.table.addEventListener('keydown', this.onKeydown);\n\n const mutationObserver = new MutationObserver(this.onMutation);\n mutationObserver.observe(table, { childList: true, subtree: true });\n\n updateTableFocusables(this.table, this.focusedCell ?? this.prevFocusedCell);\n\n this.cleanup = () => {\n this.table.removeEventListener('focusin', this.onFocusin);\n this.table.removeEventListener('focusout', this.onFocusout);\n this.table.removeEventListener('keydown', this.onKeydown);\n\n mutationObserver.disconnect();\n\n restoreTableFocusables(this.table);\n };\n }\n\n public destroy() {\n this.cleanup();\n }\n\n public update({ pageSize }: { pageSize: number }) {\n this._pageSize = pageSize;\n }\n\n private get pageSize() {\n return this._pageSize;\n }\n\n private get table(): HTMLTableElement {\n if (!this._table) {\n throw new Error('Invariant violation: GridNavigationModel is used before initialization.');\n }\n return this._table;\n }\n\n private onFocusin = (event: FocusEvent) => {\n const cell = findFocusinCell(event);\n\n if (!cell) {\n return;\n }\n this.prevFocusedCell = cell;\n this.focusedCell = cell;\n\n updateTableFocusables(this.table, cell);\n };\n\n private onFocusout = () => {\n this.focusedCell = null;\n };\n\n private onKeydown = (event: KeyboardEvent) => {\n if (!this.focusedCell) {\n return;\n }\n\n const f2Code = 113;\n const ctrlKey = event.ctrlKey ? 1 : 0;\n const altKey = event.altKey ? 1 : 0;\n const shiftKey = event.shiftKey ? 1 : 0;\n const metaKey = event.metaKey ? 1 : 0;\n const numModifiersPressed = ctrlKey + altKey + shiftKey + metaKey;\n\n let key = event.keyCode;\n if (numModifiersPressed === 1 && event.ctrlKey) {\n key = -key;\n } else if (numModifiersPressed) {\n return;\n }\n\n const from = this.focusedCell;\n const minExtreme = Number.NEGATIVE_INFINITY;\n const maxExtreme = Number.POSITIVE_INFINITY;\n\n // When focus is inside widget cell only intercept Escape and F2 commands to move focus back to cell.\n if (from.widget && from.element !== from.cellElement) {\n if (key === KeyCode.escape || key === f2Code) {\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 0, x: 0 });\n }\n return;\n }\n\n switch (key) {\n case KeyCode.up:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: -1, x: 0 });\n\n case KeyCode.down:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 1, x: 0 });\n\n case KeyCode.left:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 0, x: -1 });\n\n case KeyCode.right:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 0, x: 1 });\n\n case KeyCode.pageUp:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: -this.pageSize, x: 0 });\n\n case KeyCode.pageDown:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: this.pageSize, x: 0 });\n\n case KeyCode.home:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 0, x: minExtreme });\n\n case KeyCode.end:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 0, x: maxExtreme });\n\n case -KeyCode.home:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: minExtreme, x: minExtreme });\n\n case -KeyCode.end:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: maxExtreme, x: maxExtreme });\n\n case KeyCode.enter:\n if (from.element === from.cellElement) {\n event.preventDefault();\n return moveFocusIn(from);\n }\n break;\n\n case KeyCode.escape:\n if (from.element !== from.cellElement) {\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 0, x: 0 });\n }\n break;\n\n case f2Code:\n event.preventDefault();\n if (from.element === from.cellElement) {\n return moveFocusIn(from);\n } else {\n return moveFocusBy(this.table, from, { y: 0, x: 0 });\n }\n\n default:\n return;\n }\n };\n\n private onMutation = (mutationRecords: MutationRecord[]) => {\n if (!this.prevFocusedCell) {\n return;\n }\n\n // When focused cell was un-mounted - re-apply focus to the same location.\n for (const record of mutationRecords) {\n if (record.type === 'childList') {\n for (const removedNode of Array.from(record.removedNodes)) {\n if (removedNode === this.prevFocusedCell.element || nodeContains(removedNode, this.prevFocusedCell.element)) {\n moveFocusBy(this.table, this.prevFocusedCell, { y: 0, x: 0 });\n }\n }\n }\n }\n\n updateTableFocusables(this.table, this.focusedCell ?? this.prevFocusedCell);\n };\n}\n"]}
@@ -17,7 +17,8 @@ export declare function moveFocusBy(table: HTMLTableElement, from: FocusedCell,
17
17
  */
18
18
  export declare function moveFocusIn(from: FocusedCell): void;
19
19
  /**
20
- * Ensures exactly one table element is focusable for the entire table to have a single TAB stop.
20
+ * Overrides focusability of the table elements to make focus targets controllable with keyboard commands.
21
21
  */
22
- export declare function updateTableIndices(table: HTMLTableElement, cell: null | FocusedCell): void;
22
+ export declare function updateTableFocusables(table: HTMLTableElement, cell: null | FocusedCell): void;
23
+ export declare function restoreTableFocusables(table: HTMLTableElement): void;
23
24
  //# sourceMappingURL=utils.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"lib/default/","sources":["table/table-role/utils.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,GAAG,WAAW,CA0BrE;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,QAsCtG;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,WAAW,QAE5C;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,GAAG,WAAW,QA2BnF"}
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"lib/default/","sources":["table/table-role/utils.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,GAAG,WAAW,CA0BrE;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,QAuCtG;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,WAAW,QAE5C;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,GAAG,WAAW,QAkCtF;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,gBAAgB,QAQ7D"}
@@ -40,7 +40,7 @@ export function moveFocusBy(table, from, delta) {
40
40
  // Move focus to the next focusable element within a cell if eligible.
41
41
  const cellFocusables = getFocusables(from.cellElement);
42
42
  const eligibleForElementFocus = delta.x && !isWidgetCell(from.element) && (cellFocusables.length === 1 || from.element !== from.cellElement);
43
- const targetElementIndex = from.elementIndex + delta.x;
43
+ const targetElementIndex = from.elementIndex === -1 ? -1 : from.elementIndex + delta.x;
44
44
  if (eligibleForElementFocus && 0 <= targetElementIndex && targetElementIndex < cellFocusables.length) {
45
45
  focus(cellFocusables[targetElementIndex]);
46
46
  return;
@@ -60,7 +60,7 @@ export function moveFocusBy(table, from, delta) {
60
60
  return focus(targetCell);
61
61
  }
62
62
  // For non-widget cell focus on the focusable element inside if exactly one is available.
63
- const focusIndex = delta.x === 0 ? from.elementIndex : targetCellFocusables.length === 1 ? 0 : -1;
63
+ const focusIndex = delta.x === 0 && from.elementIndex !== -1 ? from.elementIndex : targetCellFocusables.length === 1 ? 0 : -1;
64
64
  const focusTarget = (_a = targetCellFocusables[focusIndex]) !== null && _a !== void 0 ? _a : targetCell;
65
65
  focus(focusTarget);
66
66
  }
@@ -71,11 +71,18 @@ export function moveFocusIn(from) {
71
71
  focus(getFirstFocusable(from.cellElement));
72
72
  }
73
73
  /**
74
- * Ensures exactly one table element is focusable for the entire table to have a single TAB stop.
74
+ * Overrides focusability of the table elements to make focus targets controllable with keyboard commands.
75
75
  */
76
- export function updateTableIndices(table, cell) {
77
- const tableCells = table.querySelectorAll('td,th');
78
- for (const cell of Array.from(tableCells)) {
76
+ export function updateTableFocusables(table, cell) {
77
+ // Restore default focus behavior and make all cells focusable when focus is inside a widget cell.
78
+ if (cell && cell.widget && cell.element !== cell.cellElement) {
79
+ for (const focusable of getFocusables(table)) {
80
+ focusable.tabIndex = 0;
81
+ }
82
+ return;
83
+ }
84
+ const tableCells = Array.from(table.querySelectorAll('td,th'));
85
+ for (const cell of tableCells) {
79
86
  cell.tabIndex = -1;
80
87
  cell.setAttribute('data-focusable', 'true');
81
88
  }
@@ -83,18 +90,28 @@ export function updateTableIndices(table, cell) {
83
90
  focusable.tabIndex = -1;
84
91
  focusable.setAttribute('data-focusable', 'true');
85
92
  }
86
- // Make focused element the only focusable element of the table.
93
+ // The only focusable element of the table.
94
+ let focusTarget = tableCells[0];
87
95
  if (cell && table.contains(cell.element)) {
88
- cell.element.tabIndex = 0;
89
- // For widget cells also unmute all cell elements to be focusable with Tab/Shift+Tab.
90
- if (cell.widget) {
91
- getFocusables(cell.cellElement).forEach(element => (element.tabIndex = 0));
92
- }
96
+ focusTarget = cell.element;
93
97
  }
94
- // Make first table cell the only focusable element of the table.
95
- else if (tableCells[0]) {
98
+ else if (tableCells.length > 0) {
96
99
  const cellFocusables = getFocusables(tableCells[0]);
97
- cellFocusables[0] ? (cellFocusables[0].tabIndex = 0) : (tableCells[0].tabIndex = 0);
100
+ const eligibleForElementFocus = !isWidgetCell(tableCells[0]) && cellFocusables.length === 1;
101
+ focusTarget = eligibleForElementFocus ? cellFocusables[0] : focusTarget;
102
+ }
103
+ if (focusTarget) {
104
+ focusTarget.tabIndex = 0;
105
+ }
106
+ }
107
+ export function restoreTableFocusables(table) {
108
+ for (const focusable of getFocusables(table)) {
109
+ if (focusable instanceof HTMLTableCellElement) {
110
+ focusable.tabIndex = -1;
111
+ }
112
+ else {
113
+ focusable.tabIndex = 0;
114
+ }
98
115
  }
99
116
  }
100
117
  function isWidgetCell(cell) {
@@ -109,11 +126,20 @@ function getFirstFocusable(element) {
109
126
  function findTableRowByAriaRowIndex(table, targetAriaRowIndex, delta) {
110
127
  var _a;
111
128
  let targetRow = null;
112
- const rowElements = table.querySelectorAll('tr[aria-rowindex]');
113
- for (let elementIndex = 0; elementIndex < rowElements.length; elementIndex++) {
114
- const rowIndex = parseInt((_a = rowElements[elementIndex].getAttribute('aria-rowindex')) !== null && _a !== void 0 ? _a : '');
115
- targetRow = rowElements[elementIndex];
116
- if (rowIndex === targetAriaRowIndex || (delta < 0 && rowIndex >= targetAriaRowIndex)) {
129
+ const rowElements = Array.from(table.querySelectorAll('tr[aria-rowindex]'));
130
+ if (delta < 0) {
131
+ rowElements.reverse();
132
+ }
133
+ for (const element of rowElements) {
134
+ const rowIndex = parseInt((_a = element.getAttribute('aria-rowindex')) !== null && _a !== void 0 ? _a : '');
135
+ targetRow = element;
136
+ if (rowIndex === targetAriaRowIndex) {
137
+ break;
138
+ }
139
+ if (delta >= 0 && rowIndex > targetAriaRowIndex) {
140
+ break;
141
+ }
142
+ if (delta < 0 && rowIndex < targetAriaRowIndex) {
117
143
  break;
118
144
  }
119
145
  }
@@ -122,11 +148,20 @@ function findTableRowByAriaRowIndex(table, targetAriaRowIndex, delta) {
122
148
  function findTableRowCellByAriaColIndex(tableRow, targetAriaColIndex, delta) {
123
149
  var _a;
124
150
  let targetCell = null;
125
- const cellElements = tableRow.querySelectorAll('td[aria-colindex],th[aria-colindex]');
126
- for (let elementIndex = 0; elementIndex < cellElements.length; elementIndex++) {
127
- const columnIndex = parseInt((_a = cellElements[elementIndex].getAttribute('aria-colindex')) !== null && _a !== void 0 ? _a : '');
128
- targetCell = cellElements[elementIndex];
129
- if (columnIndex === targetAriaColIndex || (delta < 0 && columnIndex >= targetAriaColIndex)) {
151
+ const cellElements = Array.from(tableRow.querySelectorAll('td[aria-colindex],th[aria-colindex]'));
152
+ if (delta < 0) {
153
+ cellElements.reverse();
154
+ }
155
+ for (const element of cellElements) {
156
+ const columnIndex = parseInt((_a = element.getAttribute('aria-colindex')) !== null && _a !== void 0 ? _a : '');
157
+ targetCell = element;
158
+ if (columnIndex === targetAriaColIndex) {
159
+ break;
160
+ }
161
+ if (delta >= 0 && columnIndex > targetAriaColIndex) {
162
+ break;
163
+ }
164
+ if (delta < 0 && columnIndex < targetAriaColIndex) {
130
165
  break;
131
166
  }
132
167
  }
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","sourceRoot":"lib/default/","sources":["table/table-role/utils.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 { getFocusables as getActualFocusables } from '../../internal/components/focus-lock/utils';\nimport { FocusedCell } from './interfaces';\n\n/**\n * Finds focused cell props corresponding the focused element inside the table.\n * The function relies on ARIA colindex/rowindex attributes being set.\n */\nexport function findFocusinCell(event: FocusEvent): null | FocusedCell {\n const element = event.target;\n\n if (!(element instanceof HTMLElement)) {\n return null;\n }\n\n const cellElement = element.closest('td,th') as null | HTMLTableCellElement;\n const rowElement = cellElement?.closest('tr');\n\n if (!cellElement || !rowElement) {\n return null;\n }\n\n const colIndex = parseInt(cellElement.getAttribute('aria-colindex') ?? '');\n const rowIndex = parseInt(rowElement.getAttribute('aria-rowindex') ?? '');\n if (isNaN(colIndex) || isNaN(rowIndex)) {\n return null;\n }\n\n const cellFocusables = getFocusables(cellElement);\n const elementIndex = cellFocusables.indexOf(element);\n\n const widget = isWidgetCell(cellElement);\n\n return { rowIndex, colIndex, elementIndex, rowElement, cellElement, element, widget };\n}\n\n/**\n * Moves table focus in the provided direction. The focus can transition between cells or between\n * focusable elements within a cell unless the cell is marked as a widget.\n */\nexport function moveFocusBy(table: HTMLTableElement, from: FocusedCell, delta: { y: number; x: number }) {\n const targetAriaRowIndex = from.rowIndex + delta.y;\n const targetRow = findTableRowByAriaRowIndex(table, targetAriaRowIndex, delta.y);\n if (!targetRow) {\n return;\n }\n\n // Move focus to the next focusable element within a cell if eligible.\n const cellFocusables = getFocusables(from.cellElement);\n const eligibleForElementFocus =\n delta.x && !isWidgetCell(from.element) && (cellFocusables.length === 1 || from.element !== from.cellElement);\n const targetElementIndex = from.elementIndex + delta.x;\n if (eligibleForElementFocus && 0 <= targetElementIndex && targetElementIndex < cellFocusables.length) {\n focus(cellFocusables[targetElementIndex]);\n return;\n }\n\n const targetAriaColIndex = from.colIndex + delta.x;\n const targetCell = findTableRowCellByAriaColIndex(targetRow, targetAriaColIndex, delta.x);\n if (!targetCell) {\n return;\n }\n\n // For widget cells always focus on the cell element itself.\n if (isWidgetCell(targetCell)) {\n return focus(targetCell);\n }\n\n // For zero delta (exiting command) and multi-element cell focus cell itself.\n const targetCellFocusables = getFocusables(targetCell);\n if (delta.x === 0 && delta.y === 0 && targetCellFocusables.length > 1) {\n return focus(targetCell);\n }\n\n // For non-widget cell focus on the focusable element inside if exactly one is available.\n const focusIndex = delta.x === 0 ? from.elementIndex : targetCellFocusables.length === 1 ? 0 : -1;\n const focusTarget = targetCellFocusables[focusIndex] ?? targetCell;\n focus(focusTarget);\n}\n\n/**\n * Moves focus to the first focusable element inside the cell.\n */\nexport function moveFocusIn(from: FocusedCell) {\n focus(getFirstFocusable(from.cellElement));\n}\n\n/**\n * Ensures exactly one table element is focusable for the entire table to have a single TAB stop.\n */\nexport function updateTableIndices(table: HTMLTableElement, cell: null | FocusedCell) {\n const tableCells = table.querySelectorAll('td,th') as NodeListOf<HTMLTableCellElement>;\n\n for (const cell of Array.from(tableCells)) {\n cell.tabIndex = -1;\n cell.setAttribute('data-focusable', 'true');\n }\n for (const focusable of getActualFocusables(table)) {\n focusable.tabIndex = -1;\n focusable.setAttribute('data-focusable', 'true');\n }\n\n // Make focused element the only focusable element of the table.\n if (cell && table.contains(cell.element)) {\n cell.element.tabIndex = 0;\n\n // For widget cells also unmute all cell elements to be focusable with Tab/Shift+Tab.\n if (cell.widget) {\n getFocusables(cell.cellElement).forEach(element => (element.tabIndex = 0));\n }\n }\n\n // Make first table cell the only focusable element of the table.\n else if (tableCells[0]) {\n const cellFocusables = getFocusables(tableCells[0]);\n cellFocusables[0] ? (cellFocusables[0].tabIndex = 0) : (tableCells[0].tabIndex = 0);\n }\n}\n\nfunction isWidgetCell(cell: HTMLElement) {\n return cell.getAttribute('data-widget-cell') === 'true';\n}\n\nfunction getFocusables(element: HTMLElement) {\n return Array.from(element.querySelectorAll('[data-focusable=\"true\"]')) as HTMLElement[];\n}\n\nfunction getFirstFocusable(element: HTMLElement) {\n return getFocusables(element)[0] as null | HTMLElement;\n}\n\nfunction findTableRowByAriaRowIndex(table: HTMLTableElement, targetAriaRowIndex: number, delta: number) {\n let targetRow: null | HTMLTableRowElement = null;\n const rowElements = table.querySelectorAll('tr[aria-rowindex]');\n for (let elementIndex = 0; elementIndex < rowElements.length; elementIndex++) {\n const rowIndex = parseInt(rowElements[elementIndex].getAttribute('aria-rowindex') ?? '');\n targetRow = rowElements[elementIndex] as HTMLTableRowElement;\n\n if (rowIndex === targetAriaRowIndex || (delta < 0 && rowIndex >= targetAriaRowIndex)) {\n break;\n }\n }\n return targetRow;\n}\n\nfunction findTableRowCellByAriaColIndex(tableRow: HTMLTableRowElement, targetAriaColIndex: number, delta: number) {\n let targetCell: null | HTMLTableCellElement = null;\n const cellElements = tableRow.querySelectorAll('td[aria-colindex],th[aria-colindex]');\n for (let elementIndex = 0; elementIndex < cellElements.length; elementIndex++) {\n const columnIndex = parseInt(cellElements[elementIndex].getAttribute('aria-colindex') ?? '');\n targetCell = cellElements[elementIndex] as HTMLTableCellElement;\n\n if (columnIndex === targetAriaColIndex || (delta < 0 && columnIndex >= targetAriaColIndex)) {\n break;\n }\n }\n return targetCell;\n}\n\nfunction focus(element: null | HTMLElement) {\n if (element) {\n element.tabIndex = 0;\n element.focus();\n }\n}\n"]}
1
+ {"version":3,"file":"utils.js","sourceRoot":"lib/default/","sources":["table/table-role/utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,4CAA4C,CAAC;AAGlG;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,KAAiB;;IAC/C,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;IAE7B,IAAI,CAAC,CAAC,OAAO,YAAY,WAAW,CAAC,EAAE;QACrC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC,OAAO,CAAgC,CAAC;IAC5E,MAAM,UAAU,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,CAAC,IAAI,CAAC,CAAC;IAE9C,IAAI,CAAC,WAAW,IAAI,CAAC,UAAU,EAAE;QAC/B,OAAO,IAAI,CAAC;KACb;IAED,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAA,WAAW,CAAC,YAAY,CAAC,eAAe,CAAC,mCAAI,EAAE,CAAC,CAAC;IAC3E,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAA,UAAU,CAAC,YAAY,CAAC,eAAe,CAAC,mCAAI,EAAE,CAAC,CAAC;IAC1E,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE;QACtC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,cAAc,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC;IAClD,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAErD,MAAM,MAAM,GAAG,YAAY,CAAC,WAAW,CAAC,CAAC;IAEzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;AACxF,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB,EAAE,IAAiB,EAAE,KAA+B;;IACrG,MAAM,kBAAkB,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC;IACnD,MAAM,SAAS,GAAG,0BAA0B,CAAC,KAAK,EAAE,kBAAkB,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACjF,IAAI,CAAC,SAAS,EAAE;QACd,OAAO;KACR;IAED,sEAAsE;IACtE,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACvD,MAAM,uBAAuB,GAC3B,KAAK,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC;IAC/G,MAAM,kBAAkB,GAAG,IAAI,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC;IACvF,IAAI,uBAAuB,IAAI,CAAC,IAAI,kBAAkB,IAAI,kBAAkB,GAAG,cAAc,CAAC,MAAM,EAAE;QACpG,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC,CAAC;QAC1C,OAAO;KACR;IAED,MAAM,kBAAkB,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC;IACnD,MAAM,UAAU,GAAG,8BAA8B,CAAC,SAAS,EAAE,kBAAkB,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAC1F,IAAI,CAAC,UAAU,EAAE;QACf,OAAO;KACR;IAED,4DAA4D;IAC5D,IAAI,YAAY,CAAC,UAAU,CAAC,EAAE;QAC5B,OAAO,KAAK,CAAC,UAAU,CAAC,CAAC;KAC1B;IAED,6EAA6E;IAC7E,MAAM,oBAAoB,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;IACvD,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,IAAI,oBAAoB,CAAC,MAAM,GAAG,CAAC,EAAE;QACrE,OAAO,KAAK,CAAC,UAAU,CAAC,CAAC;KAC1B;IAED,yFAAyF;IACzF,MAAM,UAAU,GACd,KAAK,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,oBAAoB,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7G,MAAM,WAAW,GAAG,MAAA,oBAAoB,CAAC,UAAU,CAAC,mCAAI,UAAU,CAAC;IACnE,KAAK,CAAC,WAAW,CAAC,CAAC;AACrB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,IAAiB;IAC3C,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;AAC7C,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAAC,KAAuB,EAAE,IAAwB;IACrF,kGAAkG;IAClG,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,WAAW,EAAE;QAC5D,KAAK,MAAM,SAAS,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE;YAC5C,SAAS,CAAC,QAAQ,GAAG,CAAC,CAAC;SACxB;QACD,OAAO;KACR;IAED,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAqC,CAAC,CAAC;IAEnG,KAAK,MAAM,IAAI,IAAI,UAAU,EAAE;QAC7B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;QACnB,IAAI,CAAC,YAAY,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;KAC7C;IACD,KAAK,MAAM,SAAS,IAAI,mBAAmB,CAAC,KAAK,CAAC,EAAE;QAClD,SAAS,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;QACxB,SAAS,CAAC,YAAY,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;KAClD;IAED,2CAA2C;IAC3C,IAAI,WAAW,GAA4B,UAAU,CAAC,CAAC,CAAC,CAAC;IAEzD,IAAI,IAAI,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;QACxC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;KAC5B;SAAM,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;QAChC,MAAM,cAAc,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QACpD,MAAM,uBAAuB,GAAG,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,CAAC;QAC5F,WAAW,GAAG,uBAAuB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;KACzE;IAED,IAAI,WAAW,EAAE;QACf,WAAW,CAAC,QAAQ,GAAG,CAAC,CAAC;KAC1B;AACH,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,KAAuB;IAC5D,KAAK,MAAM,SAAS,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE;QAC5C,IAAI,SAAS,YAAY,oBAAoB,EAAE;YAC7C,SAAS,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;SACzB;aAAM;YACL,SAAS,CAAC,QAAQ,GAAG,CAAC,CAAC;SACxB;KACF;AACH,CAAC;AAED,SAAS,YAAY,CAAC,IAAiB;IACrC,OAAO,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,KAAK,MAAM,CAAC;AAC1D,CAAC;AAED,SAAS,aAAa,CAAC,OAAoB;IACzC,OAAO,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,CAAkB,CAAC;AAC1F,CAAC;AAED,SAAS,iBAAiB,CAAC,OAAoB;IAC7C,OAAO,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAuB,CAAC;AACzD,CAAC;AAED,SAAS,0BAA0B,CAAC,KAAuB,EAAE,kBAA0B,EAAE,KAAa;;IACpG,IAAI,SAAS,GAA+B,IAAI,CAAC;IACjD,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAC5E,IAAI,KAAK,GAAG,CAAC,EAAE;QACb,WAAW,CAAC,OAAO,EAAE,CAAC;KACvB;IACD,KAAK,MAAM,OAAO,IAAI,WAAW,EAAE;QACjC,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAA,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,mCAAI,EAAE,CAAC,CAAC;QACvE,SAAS,GAAG,OAA8B,CAAC;QAE3C,IAAI,QAAQ,KAAK,kBAAkB,EAAE;YACnC,MAAM;SACP;QACD,IAAI,KAAK,IAAI,CAAC,IAAI,QAAQ,GAAG,kBAAkB,EAAE;YAC/C,MAAM;SACP;QACD,IAAI,KAAK,GAAG,CAAC,IAAI,QAAQ,GAAG,kBAAkB,EAAE;YAC9C,MAAM;SACP;KACF;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,8BAA8B,CAAC,QAA6B,EAAE,kBAA0B,EAAE,KAAa;;IAC9G,IAAI,UAAU,GAAgC,IAAI,CAAC;IACnD,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,qCAAqC,CAAC,CAAC,CAAC;IAClG,IAAI,KAAK,GAAG,CAAC,EAAE;QACb,YAAY,CAAC,OAAO,EAAE,CAAC;KACxB;IACD,KAAK,MAAM,OAAO,IAAI,YAAY,EAAE;QAClC,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAA,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,mCAAI,EAAE,CAAC,CAAC;QAC1E,UAAU,GAAG,OAA+B,CAAC;QAE7C,IAAI,WAAW,KAAK,kBAAkB,EAAE;YACtC,MAAM;SACP;QACD,IAAI,KAAK,IAAI,CAAC,IAAI,WAAW,GAAG,kBAAkB,EAAE;YAClD,MAAM;SACP;QACD,IAAI,KAAK,GAAG,CAAC,IAAI,WAAW,GAAG,kBAAkB,EAAE;YACjD,MAAM;SACP;KACF;IACD,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,SAAS,KAAK,CAAC,OAA2B;IACxC,IAAI,OAAO,EAAE;QACX,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC;QACrB,OAAO,CAAC,KAAK,EAAE,CAAC;KACjB;AACH,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { getFocusables as getActualFocusables } from '../../internal/components/focus-lock/utils';\nimport { FocusedCell } from './interfaces';\n\n/**\n * Finds focused cell props corresponding the focused element inside the table.\n * The function relies on ARIA colindex/rowindex attributes being set.\n */\nexport function findFocusinCell(event: FocusEvent): null | FocusedCell {\n const element = event.target;\n\n if (!(element instanceof HTMLElement)) {\n return null;\n }\n\n const cellElement = element.closest('td,th') as null | HTMLTableCellElement;\n const rowElement = cellElement?.closest('tr');\n\n if (!cellElement || !rowElement) {\n return null;\n }\n\n const colIndex = parseInt(cellElement.getAttribute('aria-colindex') ?? '');\n const rowIndex = parseInt(rowElement.getAttribute('aria-rowindex') ?? '');\n if (isNaN(colIndex) || isNaN(rowIndex)) {\n return null;\n }\n\n const cellFocusables = getFocusables(cellElement);\n const elementIndex = cellFocusables.indexOf(element);\n\n const widget = isWidgetCell(cellElement);\n\n return { rowIndex, colIndex, elementIndex, rowElement, cellElement, element, widget };\n}\n\n/**\n * Moves table focus in the provided direction. The focus can transition between cells or between\n * focusable elements within a cell unless the cell is marked as a widget.\n */\nexport function moveFocusBy(table: HTMLTableElement, from: FocusedCell, delta: { y: number; x: number }) {\n const targetAriaRowIndex = from.rowIndex + delta.y;\n const targetRow = findTableRowByAriaRowIndex(table, targetAriaRowIndex, delta.y);\n if (!targetRow) {\n return;\n }\n\n // Move focus to the next focusable element within a cell if eligible.\n const cellFocusables = getFocusables(from.cellElement);\n const eligibleForElementFocus =\n delta.x && !isWidgetCell(from.element) && (cellFocusables.length === 1 || from.element !== from.cellElement);\n const targetElementIndex = from.elementIndex === -1 ? -1 : from.elementIndex + delta.x;\n if (eligibleForElementFocus && 0 <= targetElementIndex && targetElementIndex < cellFocusables.length) {\n focus(cellFocusables[targetElementIndex]);\n return;\n }\n\n const targetAriaColIndex = from.colIndex + delta.x;\n const targetCell = findTableRowCellByAriaColIndex(targetRow, targetAriaColIndex, delta.x);\n if (!targetCell) {\n return;\n }\n\n // For widget cells always focus on the cell element itself.\n if (isWidgetCell(targetCell)) {\n return focus(targetCell);\n }\n\n // For zero delta (exiting command) and multi-element cell focus cell itself.\n const targetCellFocusables = getFocusables(targetCell);\n if (delta.x === 0 && delta.y === 0 && targetCellFocusables.length > 1) {\n return focus(targetCell);\n }\n\n // For non-widget cell focus on the focusable element inside if exactly one is available.\n const focusIndex =\n delta.x === 0 && from.elementIndex !== -1 ? from.elementIndex : targetCellFocusables.length === 1 ? 0 : -1;\n const focusTarget = targetCellFocusables[focusIndex] ?? targetCell;\n focus(focusTarget);\n}\n\n/**\n * Moves focus to the first focusable element inside the cell.\n */\nexport function moveFocusIn(from: FocusedCell) {\n focus(getFirstFocusable(from.cellElement));\n}\n\n/**\n * Overrides focusability of the table elements to make focus targets controllable with keyboard commands.\n */\nexport function updateTableFocusables(table: HTMLTableElement, cell: null | FocusedCell) {\n // Restore default focus behavior and make all cells focusable when focus is inside a widget cell.\n if (cell && cell.widget && cell.element !== cell.cellElement) {\n for (const focusable of getFocusables(table)) {\n focusable.tabIndex = 0;\n }\n return;\n }\n\n const tableCells = Array.from(table.querySelectorAll('td,th') as NodeListOf<HTMLTableCellElement>);\n\n for (const cell of tableCells) {\n cell.tabIndex = -1;\n cell.setAttribute('data-focusable', 'true');\n }\n for (const focusable of getActualFocusables(table)) {\n focusable.tabIndex = -1;\n focusable.setAttribute('data-focusable', 'true');\n }\n\n // The only focusable element of the table.\n let focusTarget: undefined | HTMLElement = tableCells[0];\n\n if (cell && table.contains(cell.element)) {\n focusTarget = cell.element;\n } else if (tableCells.length > 0) {\n const cellFocusables = getFocusables(tableCells[0]);\n const eligibleForElementFocus = !isWidgetCell(tableCells[0]) && cellFocusables.length === 1;\n focusTarget = eligibleForElementFocus ? cellFocusables[0] : focusTarget;\n }\n\n if (focusTarget) {\n focusTarget.tabIndex = 0;\n }\n}\n\nexport function restoreTableFocusables(table: HTMLTableElement) {\n for (const focusable of getFocusables(table)) {\n if (focusable instanceof HTMLTableCellElement) {\n focusable.tabIndex = -1;\n } else {\n focusable.tabIndex = 0;\n }\n }\n}\n\nfunction isWidgetCell(cell: HTMLElement) {\n return cell.getAttribute('data-widget-cell') === 'true';\n}\n\nfunction getFocusables(element: HTMLElement) {\n return Array.from(element.querySelectorAll('[data-focusable=\"true\"]')) as HTMLElement[];\n}\n\nfunction getFirstFocusable(element: HTMLElement) {\n return getFocusables(element)[0] as null | HTMLElement;\n}\n\nfunction findTableRowByAriaRowIndex(table: HTMLTableElement, targetAriaRowIndex: number, delta: number) {\n let targetRow: null | HTMLTableRowElement = null;\n const rowElements = Array.from(table.querySelectorAll('tr[aria-rowindex]'));\n if (delta < 0) {\n rowElements.reverse();\n }\n for (const element of rowElements) {\n const rowIndex = parseInt(element.getAttribute('aria-rowindex') ?? '');\n targetRow = element as HTMLTableRowElement;\n\n if (rowIndex === targetAriaRowIndex) {\n break;\n }\n if (delta >= 0 && rowIndex > targetAriaRowIndex) {\n break;\n }\n if (delta < 0 && rowIndex < targetAriaRowIndex) {\n break;\n }\n }\n return targetRow;\n}\n\nfunction findTableRowCellByAriaColIndex(tableRow: HTMLTableRowElement, targetAriaColIndex: number, delta: number) {\n let targetCell: null | HTMLTableCellElement = null;\n const cellElements = Array.from(tableRow.querySelectorAll('td[aria-colindex],th[aria-colindex]'));\n if (delta < 0) {\n cellElements.reverse();\n }\n for (const element of cellElements) {\n const columnIndex = parseInt(element.getAttribute('aria-colindex') ?? '');\n targetCell = element as HTMLTableCellElement;\n\n if (columnIndex === targetAriaColIndex) {\n break;\n }\n if (delta >= 0 && columnIndex > targetAriaColIndex) {\n break;\n }\n if (delta < 0 && columnIndex < targetAriaColIndex) {\n break;\n }\n }\n return targetCell;\n}\n\nfunction focus(element: null | HTMLElement) {\n if (element) {\n element.tabIndex = 0;\n element.focus();\n }\n}\n"]}
package/table/thead.d.ts CHANGED
@@ -4,15 +4,6 @@ import { SelectionProps } from './use-selection';
4
4
  import { NonCancelableEventHandler } from '../internal/events';
5
5
  import { StickyColumnsModel } from './sticky-columns';
6
6
  import { TableRole } from './table-role';
7
- export type InteractiveComponent = {
8
- type: 'selection';
9
- } | {
10
- type: 'column';
11
- col: number;
12
- } | {
13
- type: 'resizer';
14
- col: number;
15
- };
16
7
  export interface TheadProps {
17
8
  containerWidth: number | null;
18
9
  selectionType: TableProps.SelectionType | undefined;
@@ -34,8 +25,8 @@ export interface TheadProps {
34
25
  stripedRows?: boolean;
35
26
  stickyState: StickyColumnsModel;
36
27
  selectionColumnId: PropertyKey;
37
- focusedComponent?: InteractiveComponent | null;
38
- onFocusedComponentChange?: (element: InteractiveComponent | null) => void;
28
+ focusedComponent?: null | string;
29
+ onFocusedComponentChange?: (focusId: null | string) => void;
39
30
  tableRole: TableRole;
40
31
  }
41
32
  declare const Thead: React.ForwardRefExoticComponent<TheadProps & React.RefAttributes<HTMLTableRowElement>>;
@@ -1 +1 @@
1
- {"version":3,"file":"thead.d.ts","sourceRoot":"lib/default/","sources":["table/thead.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAgB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AASvF,OAAO,EAAE,kBAAkB,EAAuB,MAAM,kBAAkB,CAAC;AAC3E,OAAO,EAA0D,SAAS,EAAE,MAAM,cAAc,CAAC;AAEjG,MAAM,MAAM,oBAAoB,GAC5B;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,GACrB;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAC/B;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAErC,MAAM,WAAW,UAAU;IACzB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,UAAU,CAAC,aAAa,GAAG,SAAS,CAAC;IACpD,iBAAiB,EAAE,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;IACnE,aAAa,EAAE,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;IACzD,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACvC,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,iBAAiB,EAAE,MAAM,cAAc,CAAC;IACxC,WAAW,EAAE,CAAC,CAAC,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtG,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5D,eAAe,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC;IACrF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,kBAAkB,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,gBAAgB,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC/C,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1E,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,KAAK,wFAsIV,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"thead.d.ts","sourceRoot":"lib/default/","sources":["table/thead.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAgB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAQvF,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAA8B,SAAS,EAAE,MAAM,cAAc,CAAC;AAIrE,MAAM,WAAW,UAAU;IACzB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,UAAU,CAAC,aAAa,GAAG,SAAS,CAAC;IACpD,iBAAiB,EAAE,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;IACnE,aAAa,EAAE,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;IACzD,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACvC,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,iBAAiB,EAAE,MAAM,cAAc,CAAC;IACxC,WAAW,EAAE,CAAC,CAAC,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtG,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5D,eAAe,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC;IACrF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,kBAAkB,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACjC,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5D,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,KAAK,wFAsIV,CAAC;AAEF,eAAe,KAAK,CAAC"}
package/table/thead.js CHANGED
@@ -5,31 +5,31 @@ import React from 'react';
5
5
  import SelectionControl from './selection-control';
6
6
  import { focusMarkers } from './use-selection';
7
7
  import { fireNonCancelableEvent } from '../internal/events';
8
- import { getColumnKey, getStickyClassNames } from './utils';
8
+ import { getColumnKey } from './utils';
9
9
  import { TableHeaderCell } from './header-cell';
10
10
  import { useColumnWidths } from './use-column-widths';
11
11
  import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
12
12
  import styles from './styles.css.js';
13
- import cellStyles from './header-cell/styles.css.js';
14
13
  import headerCellStyles from './header-cell/styles.css.js';
15
14
  import ScreenreaderOnly from '../internal/components/screenreader-only';
16
- import { useStickyCellStyles } from './sticky-columns';
17
- import { getTableColHeaderRoleProps, getTableHeaderRowRoleProps } from './table-role';
15
+ import { getTableHeaderRowRoleProps } from './table-role';
16
+ import { TableThElement } from './header-cell/th-element';
17
+ import { findUpUntil } from '@cloudscape-design/component-toolkit/dom';
18
18
  const Thead = React.forwardRef(({ containerWidth, selectionType, getSelectAllProps, columnDefinitions, sortingColumn, sortingDisabled, sortingDescending, resizableColumns, variant, wrapLines, onFocusMove, onSortingChange, onResizeFinish, singleSelectionHeaderAriaLabel, stripedRows, sticky = false, hidden = false, stuck = false, stickyState, selectionColumnId, focusedComponent, onFocusedComponentChange, tableRole, }, outerRef) => {
19
19
  const isVisualRefresh = useVisualRefresh();
20
20
  const headerCellClass = clsx(headerCellStyles['header-cell'], headerCellStyles[`header-cell-variant-${variant}`], sticky && headerCellStyles['header-cell-sticky'], stuck && headerCellStyles['header-cell-stuck'], stripedRows && headerCellStyles['has-striped-rows'], isVisualRefresh && headerCellStyles['is-visual-refresh']);
21
21
  const selectionCellClass = clsx(styles['selection-control'], styles['selection-control-header'], isVisualRefresh && styles['is-visual-refresh']);
22
22
  const { columnWidths, totalWidth, updateColumn, setCell } = useColumnWidths();
23
- const stickyStyles = useStickyCellStyles({
24
- stickyColumns: stickyState,
25
- columnId: selectionColumnId,
26
- getClassName: props => getStickyClassNames(cellStyles, props),
27
- });
28
23
  return (React.createElement("thead", { className: clsx(!hidden && styles['thead-active']) },
29
- React.createElement("tr", Object.assign({}, focusMarkers.all, { ref: outerRef, "aria-rowindex": 1 }, getTableHeaderRowRoleProps({ tableRole })),
30
- selectionType ? (React.createElement("th", Object.assign({ className: clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden'], stickyStyles.className), style: stickyStyles.style, ref: stickyStyles.ref, scope: "col" }, getTableColHeaderRoleProps({ tableRole, colIndex: 0 })), selectionType === 'multi' ? (React.createElement(SelectionControl, Object.assign({ onFocusDown: event => {
24
+ React.createElement("tr", Object.assign({}, focusMarkers.all, { ref: outerRef, "aria-rowindex": 1 }, getTableHeaderRowRoleProps({ tableRole }), { onFocus: event => {
25
+ var _a;
26
+ const focusControlElement = findUpUntil(event.target, element => !!element.getAttribute('data-focus-id'));
27
+ const focusId = (_a = focusControlElement === null || focusControlElement === void 0 ? void 0 : focusControlElement.getAttribute('data-focus-id')) !== null && _a !== void 0 ? _a : null;
28
+ onFocusedComponentChange === null || onFocusedComponentChange === void 0 ? void 0 : onFocusedComponentChange(focusId);
29
+ }, onBlur: () => onFocusedComponentChange === null || onFocusedComponentChange === void 0 ? void 0 : onFocusedComponentChange(null) }),
30
+ selectionType ? (React.createElement(TableThElement, { className: clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden']), hidden: hidden, tableRole: tableRole, colIndex: 0, columnId: selectionColumnId, stickyState: stickyState }, selectionType === 'multi' ? (React.createElement(SelectionControl, Object.assign({ onFocusDown: event => {
31
31
  onFocusMove(event.target, -1, +1);
32
- }, focusedComponent: focusedComponent, onFocusedComponentChange: onFocusedComponentChange }, getSelectAllProps(), (sticky ? { tabIndex: -1 } : {})))) : (React.createElement(ScreenreaderOnly, null, singleSelectionHeaderAriaLabel)))) : null,
32
+ }, focusedComponent: focusedComponent }, getSelectAllProps(), (sticky ? { tabIndex: -1 } : {})))) : (React.createElement(ScreenreaderOnly, null, singleSelectionHeaderAriaLabel)))) : null,
33
33
  columnDefinitions.map((column, colIndex) => {
34
34
  const columnId = getColumnKey(column, colIndex);
35
35
  let widthOverride;
@@ -47,7 +47,7 @@ const Thead = React.forwardRef(({ containerWidth, selectionType, getSelectAllPro
47
47
  width: widthOverride || column.width,
48
48
  minWidth: sticky ? undefined : column.minWidth,
49
49
  maxWidth: resizableColumns || sticky ? undefined : column.maxWidth,
50
- }, tabIndex: sticky ? -1 : 0, focusedComponent: focusedComponent, onFocusedComponentChange: onFocusedComponentChange, column: column, activeSortingColumn: sortingColumn, sortingDescending: sortingDescending, sortingDisabled: sortingDisabled, wrapLines: wrapLines, hidden: hidden, colIndex: selectionType ? colIndex + 1 : colIndex, columnId: columnId, updateColumn: updateColumn, onResizeFinish: () => onResizeFinish(columnWidths), resizableColumns: resizableColumns, onClick: detail => fireNonCancelableEvent(onSortingChange, detail), isEditable: !!column.editConfig, stickyState: stickyState, cellRef: node => setCell(columnId, node), tableRole: tableRole }));
50
+ }, tabIndex: sticky ? -1 : 0, focusedComponent: focusedComponent, column: column, activeSortingColumn: sortingColumn, sortingDescending: sortingDescending, sortingDisabled: sortingDisabled, wrapLines: wrapLines, hidden: hidden, colIndex: selectionType ? colIndex + 1 : colIndex, columnId: columnId, updateColumn: updateColumn, onResizeFinish: () => onResizeFinish(columnWidths), resizableColumns: resizableColumns, onClick: detail => fireNonCancelableEvent(onSortingChange, detail), isEditable: !!column.editConfig, stickyState: stickyState, cellRef: node => setCell(columnId, node), tableRole: tableRole }));
51
51
  }))));
52
52
  });
53
53
  export default Thead;
@@ -1 +1 @@
1
- {"version":3,"file":"thead.js","sourceRoot":"lib/default/","sources":["table/thead.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 from 'react';\nimport { TableProps } from './interfaces';\nimport SelectionControl from './selection-control';\nimport { focusMarkers, SelectionProps } from './use-selection';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { getColumnKey, getStickyClassNames } from './utils';\nimport { TableHeaderCell } from './header-cell';\nimport { useColumnWidths } from './use-column-widths';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport cellStyles from './header-cell/styles.css.js';\nimport headerCellStyles from './header-cell/styles.css.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { StickyColumnsModel, useStickyCellStyles } from './sticky-columns';\nimport { getTableColHeaderRoleProps, getTableHeaderRowRoleProps, TableRole } from './table-role';\n\nexport type InteractiveComponent =\n | { type: 'selection' }\n | { type: 'column'; col: number }\n | { type: 'resizer'; col: number };\n\nexport interface TheadProps {\n containerWidth: number | null;\n selectionType: TableProps.SelectionType | undefined;\n columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;\n sortingColumn: TableProps.SortingColumn<any> | undefined;\n sortingDescending: boolean | undefined;\n sortingDisabled: boolean | undefined;\n variant: TableProps.Variant;\n wrapLines: boolean | undefined;\n resizableColumns: boolean | undefined;\n getSelectAllProps: () => SelectionProps;\n onFocusMove: ((sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void) | undefined;\n onResizeFinish: (newWidths: Record<string, number>) => void;\n onSortingChange: NonCancelableEventHandler<TableProps.SortingState<any>> | undefined;\n sticky?: boolean;\n hidden?: boolean;\n stuck?: boolean;\n singleSelectionHeaderAriaLabel?: string;\n stripedRows?: boolean;\n stickyState: StickyColumnsModel;\n selectionColumnId: PropertyKey;\n focusedComponent?: InteractiveComponent | null;\n onFocusedComponentChange?: (element: InteractiveComponent | null) => void;\n tableRole: TableRole;\n}\n\nconst Thead = React.forwardRef(\n (\n {\n containerWidth,\n selectionType,\n getSelectAllProps,\n columnDefinitions,\n sortingColumn,\n sortingDisabled,\n sortingDescending,\n resizableColumns,\n variant,\n wrapLines,\n onFocusMove,\n onSortingChange,\n onResizeFinish,\n singleSelectionHeaderAriaLabel,\n stripedRows,\n sticky = false,\n hidden = false,\n stuck = false,\n stickyState,\n selectionColumnId,\n focusedComponent,\n onFocusedComponentChange,\n tableRole,\n }: TheadProps,\n outerRef: React.Ref<HTMLTableRowElement>\n ) => {\n const isVisualRefresh = useVisualRefresh();\n\n const headerCellClass = clsx(\n headerCellStyles['header-cell'],\n headerCellStyles[`header-cell-variant-${variant}`],\n sticky && headerCellStyles['header-cell-sticky'],\n stuck && headerCellStyles['header-cell-stuck'],\n stripedRows && headerCellStyles['has-striped-rows'],\n isVisualRefresh && headerCellStyles['is-visual-refresh']\n );\n\n const selectionCellClass = clsx(\n styles['selection-control'],\n styles['selection-control-header'],\n isVisualRefresh && styles['is-visual-refresh']\n );\n\n const { columnWidths, totalWidth, updateColumn, setCell } = useColumnWidths();\n\n const stickyStyles = useStickyCellStyles({\n stickyColumns: stickyState,\n columnId: selectionColumnId,\n getClassName: props => getStickyClassNames(cellStyles, props),\n });\n return (\n <thead className={clsx(!hidden && styles['thead-active'])}>\n <tr {...focusMarkers.all} ref={outerRef} aria-rowindex={1} {...getTableHeaderRowRoleProps({ tableRole })}>\n {selectionType ? (\n <th\n className={clsx(\n headerCellClass,\n selectionCellClass,\n hidden && headerCellStyles['header-cell-hidden'],\n stickyStyles.className\n )}\n style={stickyStyles.style}\n ref={stickyStyles.ref}\n scope=\"col\"\n {...getTableColHeaderRoleProps({ tableRole, colIndex: 0 })}\n >\n {selectionType === 'multi' ? (\n <SelectionControl\n onFocusDown={event => {\n onFocusMove!(event.target as HTMLElement, -1, +1);\n }}\n focusedComponent={focusedComponent}\n onFocusedComponentChange={onFocusedComponentChange}\n {...getSelectAllProps()}\n {...(sticky ? { tabIndex: -1 } : {})}\n />\n ) : (\n <ScreenreaderOnly>{singleSelectionHeaderAriaLabel}</ScreenreaderOnly>\n )}\n </th>\n ) : null}\n\n {columnDefinitions.map((column, colIndex) => {\n const columnId = getColumnKey(column, colIndex);\n\n let widthOverride;\n if (resizableColumns) {\n if (columnWidths) {\n // use stateful value if available\n widthOverride = columnWidths[columnId];\n }\n if (colIndex === columnDefinitions.length - 1 && containerWidth && containerWidth > totalWidth) {\n // let the last column grow and fill the container width\n widthOverride = 'auto';\n }\n }\n return (\n <TableHeaderCell\n key={columnId}\n className={headerCellClass}\n style={{\n width: widthOverride || column.width,\n minWidth: sticky ? undefined : column.minWidth,\n maxWidth: resizableColumns || sticky ? undefined : column.maxWidth,\n }}\n tabIndex={sticky ? -1 : 0}\n focusedComponent={focusedComponent}\n onFocusedComponentChange={onFocusedComponentChange}\n column={column}\n activeSortingColumn={sortingColumn}\n sortingDescending={sortingDescending}\n sortingDisabled={sortingDisabled}\n wrapLines={wrapLines}\n hidden={hidden}\n colIndex={selectionType ? colIndex + 1 : colIndex}\n columnId={columnId}\n updateColumn={updateColumn}\n onResizeFinish={() => onResizeFinish(columnWidths)}\n resizableColumns={resizableColumns}\n onClick={detail => fireNonCancelableEvent(onSortingChange, detail)}\n isEditable={!!column.editConfig}\n stickyState={stickyState}\n cellRef={node => setCell(columnId, node)}\n tableRole={tableRole}\n />\n );\n })}\n </tr>\n </thead>\n );\n }\n);\n\nexport default Thead;\n"]}
1
+ {"version":3,"file":"thead.js","sourceRoot":"lib/default/","sources":["table/thead.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 from 'react';\nimport { TableProps } from './interfaces';\nimport SelectionControl from './selection-control';\nimport { focusMarkers, SelectionProps } from './use-selection';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { getColumnKey } from './utils';\nimport { TableHeaderCell } from './header-cell';\nimport { useColumnWidths } from './use-column-widths';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport headerCellStyles from './header-cell/styles.css.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { StickyColumnsModel } from './sticky-columns';\nimport { getTableHeaderRowRoleProps, TableRole } from './table-role';\nimport { TableThElement } from './header-cell/th-element';\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nexport interface TheadProps {\n containerWidth: number | null;\n selectionType: TableProps.SelectionType | undefined;\n columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;\n sortingColumn: TableProps.SortingColumn<any> | undefined;\n sortingDescending: boolean | undefined;\n sortingDisabled: boolean | undefined;\n variant: TableProps.Variant;\n wrapLines: boolean | undefined;\n resizableColumns: boolean | undefined;\n getSelectAllProps: () => SelectionProps;\n onFocusMove: ((sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void) | undefined;\n onResizeFinish: (newWidths: Record<string, number>) => void;\n onSortingChange: NonCancelableEventHandler<TableProps.SortingState<any>> | undefined;\n sticky?: boolean;\n hidden?: boolean;\n stuck?: boolean;\n singleSelectionHeaderAriaLabel?: string;\n stripedRows?: boolean;\n stickyState: StickyColumnsModel;\n selectionColumnId: PropertyKey;\n focusedComponent?: null | string;\n onFocusedComponentChange?: (focusId: null | string) => void;\n tableRole: TableRole;\n}\n\nconst Thead = React.forwardRef(\n (\n {\n containerWidth,\n selectionType,\n getSelectAllProps,\n columnDefinitions,\n sortingColumn,\n sortingDisabled,\n sortingDescending,\n resizableColumns,\n variant,\n wrapLines,\n onFocusMove,\n onSortingChange,\n onResizeFinish,\n singleSelectionHeaderAriaLabel,\n stripedRows,\n sticky = false,\n hidden = false,\n stuck = false,\n stickyState,\n selectionColumnId,\n focusedComponent,\n onFocusedComponentChange,\n tableRole,\n }: TheadProps,\n outerRef: React.Ref<HTMLTableRowElement>\n ) => {\n const isVisualRefresh = useVisualRefresh();\n\n const headerCellClass = clsx(\n headerCellStyles['header-cell'],\n headerCellStyles[`header-cell-variant-${variant}`],\n sticky && headerCellStyles['header-cell-sticky'],\n stuck && headerCellStyles['header-cell-stuck'],\n stripedRows && headerCellStyles['has-striped-rows'],\n isVisualRefresh && headerCellStyles['is-visual-refresh']\n );\n\n const selectionCellClass = clsx(\n styles['selection-control'],\n styles['selection-control-header'],\n isVisualRefresh && styles['is-visual-refresh']\n );\n\n const { columnWidths, totalWidth, updateColumn, setCell } = useColumnWidths();\n\n return (\n <thead className={clsx(!hidden && styles['thead-active'])}>\n <tr\n {...focusMarkers.all}\n ref={outerRef}\n aria-rowindex={1}\n {...getTableHeaderRowRoleProps({ tableRole })}\n onFocus={event => {\n const focusControlElement = findUpUntil(event.target, element => !!element.getAttribute('data-focus-id'));\n const focusId = focusControlElement?.getAttribute('data-focus-id') ?? null;\n onFocusedComponentChange?.(focusId);\n }}\n onBlur={() => onFocusedComponentChange?.(null)}\n >\n {selectionType ? (\n <TableThElement\n className={clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden'])}\n hidden={hidden}\n tableRole={tableRole}\n colIndex={0}\n columnId={selectionColumnId}\n stickyState={stickyState}\n >\n {selectionType === 'multi' ? (\n <SelectionControl\n onFocusDown={event => {\n onFocusMove!(event.target as HTMLElement, -1, +1);\n }}\n focusedComponent={focusedComponent}\n {...getSelectAllProps()}\n {...(sticky ? { tabIndex: -1 } : {})}\n />\n ) : (\n <ScreenreaderOnly>{singleSelectionHeaderAriaLabel}</ScreenreaderOnly>\n )}\n </TableThElement>\n ) : null}\n\n {columnDefinitions.map((column, colIndex) => {\n const columnId = getColumnKey(column, colIndex);\n\n let widthOverride;\n if (resizableColumns) {\n if (columnWidths) {\n // use stateful value if available\n widthOverride = columnWidths[columnId];\n }\n if (colIndex === columnDefinitions.length - 1 && containerWidth && containerWidth > totalWidth) {\n // let the last column grow and fill the container width\n widthOverride = 'auto';\n }\n }\n return (\n <TableHeaderCell\n key={columnId}\n className={headerCellClass}\n style={{\n width: widthOverride || column.width,\n minWidth: sticky ? undefined : column.minWidth,\n maxWidth: resizableColumns || sticky ? undefined : column.maxWidth,\n }}\n tabIndex={sticky ? -1 : 0}\n focusedComponent={focusedComponent}\n column={column}\n activeSortingColumn={sortingColumn}\n sortingDescending={sortingDescending}\n sortingDisabled={sortingDisabled}\n wrapLines={wrapLines}\n hidden={hidden}\n colIndex={selectionType ? colIndex + 1 : colIndex}\n columnId={columnId}\n updateColumn={updateColumn}\n onResizeFinish={() => onResizeFinish(columnWidths)}\n resizableColumns={resizableColumns}\n onClick={detail => fireNonCancelableEvent(onSortingChange, detail)}\n isEditable={!!column.editConfig}\n stickyState={stickyState}\n cellRef={node => setCell(columnId, node)}\n tableRole={tableRole}\n />\n );\n })}\n </tr>\n </thead>\n );\n }\n);\n\nexport default Thead;\n"]}