@cloudscape-design/components 3.0.638 → 3.0.640

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 (253) hide show
  1. package/annotation-context/annotation/styles.css.js +24 -24
  2. package/annotation-context/annotation/styles.scoped.css +31 -31
  3. package/annotation-context/annotation/styles.selectors.js +24 -24
  4. package/app-layout/implementation.d.ts +31 -0
  5. package/app-layout/implementation.d.ts.map +1 -1
  6. package/app-layout/implementation.js +2 -0
  7. package/app-layout/implementation.js.map +1 -1
  8. package/app-layout/interfaces.d.ts +7 -0
  9. package/app-layout/interfaces.d.ts.map +1 -1
  10. package/app-layout/interfaces.js.map +1 -1
  11. package/app-layout/internal.js +1 -1
  12. package/app-layout/internal.js.map +1 -1
  13. package/app-layout/notifications/styles.css.js +3 -3
  14. package/app-layout/notifications/styles.scoped.css +7 -7
  15. package/app-layout/notifications/styles.selectors.js +3 -3
  16. package/app-layout/skeleton/index.d.ts +1 -1
  17. package/app-layout/skeleton/index.d.ts.map +1 -1
  18. package/app-layout/skeleton/index.js +2 -2
  19. package/app-layout/skeleton/index.js.map +1 -1
  20. package/app-layout/skeleton/layout.d.ts +2 -2
  21. package/app-layout/skeleton/layout.d.ts.map +1 -1
  22. package/app-layout/skeleton/layout.js +5 -4
  23. package/app-layout/skeleton/layout.js.map +1 -1
  24. package/app-layout/skeleton/styles.css.js +11 -11
  25. package/app-layout/skeleton/styles.scoped.css +99 -38
  26. package/app-layout/skeleton/styles.selectors.js +11 -11
  27. package/app-layout/utils/use-app-layout-placement.js +1 -1
  28. package/app-layout/utils/use-app-layout-placement.js.map +1 -1
  29. package/app-layout/utils/use-pointer-events.d.ts.map +1 -1
  30. package/app-layout/utils/use-pointer-events.js +1 -1
  31. package/app-layout/utils/use-pointer-events.js.map +1 -1
  32. package/app-layout/visual-refresh/background.d.ts.map +1 -1
  33. package/app-layout/visual-refresh/background.js +3 -3
  34. package/app-layout/visual-refresh/background.js.map +1 -1
  35. package/app-layout/visual-refresh/breadcrumbs.d.ts.map +1 -1
  36. package/app-layout/visual-refresh/breadcrumbs.js +4 -3
  37. package/app-layout/visual-refresh/breadcrumbs.js.map +1 -1
  38. package/app-layout/visual-refresh/context.js +1 -1
  39. package/app-layout/visual-refresh/context.js.map +1 -1
  40. package/app-layout/visual-refresh/drawers.d.ts.map +1 -1
  41. package/app-layout/visual-refresh/drawers.js +5 -5
  42. package/app-layout/visual-refresh/drawers.js.map +1 -1
  43. package/app-layout/visual-refresh/header.d.ts.map +1 -1
  44. package/app-layout/visual-refresh/header.js +4 -3
  45. package/app-layout/visual-refresh/header.js.map +1 -1
  46. package/app-layout/visual-refresh/layout.d.ts.map +1 -1
  47. package/app-layout/visual-refresh/layout.js +2 -0
  48. package/app-layout/visual-refresh/layout.js.map +1 -1
  49. package/app-layout/visual-refresh/mobile-toolbar.d.ts.map +1 -1
  50. package/app-layout/visual-refresh/mobile-toolbar.js +4 -4
  51. package/app-layout/visual-refresh/mobile-toolbar.js.map +1 -1
  52. package/app-layout/visual-refresh/navigation.d.ts.map +1 -1
  53. package/app-layout/visual-refresh/navigation.js +2 -2
  54. package/app-layout/visual-refresh/navigation.js.map +1 -1
  55. package/app-layout/visual-refresh/notifications.d.ts.map +1 -1
  56. package/app-layout/visual-refresh/notifications.js +4 -3
  57. package/app-layout/visual-refresh/notifications.js.map +1 -1
  58. package/app-layout/visual-refresh/styles.css.js +83 -81
  59. package/app-layout/visual-refresh/styles.scoped.css +266 -258
  60. package/app-layout/visual-refresh/styles.selectors.js +83 -81
  61. package/app-layout/visual-refresh/tools.d.ts.map +1 -1
  62. package/app-layout/visual-refresh/tools.js +4 -4
  63. package/app-layout/visual-refresh/tools.js.map +1 -1
  64. package/app-layout/visual-refresh/trigger-button.d.ts +1 -0
  65. package/app-layout/visual-refresh/trigger-button.d.ts.map +1 -1
  66. package/app-layout/visual-refresh/trigger-button.js +2 -3
  67. package/app-layout/visual-refresh/trigger-button.js.map +1 -1
  68. package/area-chart/internal.js +1 -1
  69. package/area-chart/internal.js.map +1 -1
  70. package/cards/index.d.ts.map +1 -1
  71. package/cards/index.js +4 -6
  72. package/cards/index.js.map +1 -1
  73. package/cards/styles.css.js +39 -40
  74. package/cards/styles.scoped.css +50 -50
  75. package/cards/styles.selectors.js +39 -40
  76. package/container/internal.d.ts +2 -2
  77. package/container/internal.d.ts.map +1 -1
  78. package/container/internal.js +5 -7
  79. package/container/internal.js.map +1 -1
  80. package/container/styles.css.js +28 -30
  81. package/container/styles.scoped.css +52 -65
  82. package/container/styles.selectors.js +28 -30
  83. package/container/use-sticky-header.js +2 -2
  84. package/container/use-sticky-header.js.map +1 -1
  85. package/content-layout/interfaces.d.ts +52 -0
  86. package/content-layout/interfaces.d.ts.map +1 -1
  87. package/content-layout/interfaces.js.map +1 -1
  88. package/content-layout/internal.d.ts +1 -1
  89. package/content-layout/internal.d.ts.map +1 -1
  90. package/content-layout/internal.js +37 -7
  91. package/content-layout/internal.js.map +1 -1
  92. package/content-layout/styles.css.js +14 -7
  93. package/content-layout/styles.scoped.css +57 -37
  94. package/content-layout/styles.selectors.js +14 -7
  95. package/content-layout/test-classes/styles.css.js +9 -0
  96. package/content-layout/test-classes/styles.scoped.css +19 -0
  97. package/content-layout/test-classes/styles.selectors.js +10 -0
  98. package/flashbar/styles.css.js +47 -47
  99. package/flashbar/styles.scoped.css +171 -171
  100. package/flashbar/styles.selectors.js +47 -47
  101. package/internal/components/cartesian-chart/inline-start-labels.js +1 -1
  102. package/internal/components/cartesian-chart/inline-start-labels.js.map +1 -1
  103. package/internal/components/dropdown/dropdown-fit-handler.js +1 -1
  104. package/internal/components/dropdown/dropdown-fit-handler.js.map +1 -1
  105. package/internal/components/dropdown/index.js +1 -1
  106. package/internal/components/dropdown/index.js.map +1 -1
  107. package/internal/components/dropdown/styles.css.js +20 -20
  108. package/internal/components/dropdown/styles.scoped.css +41 -41
  109. package/internal/components/dropdown/styles.selectors.js +20 -20
  110. package/internal/components/responsive-text/index.js +1 -1
  111. package/internal/components/responsive-text/index.js.map +1 -1
  112. package/internal/environment.js +1 -1
  113. package/internal/environment.json +1 -1
  114. package/internal/generated/custom-css-properties/index.d.ts.map +1 -1
  115. package/internal/generated/custom-css-properties/index.js +56 -51
  116. package/internal/generated/custom-css-properties/index.js.map +1 -1
  117. package/internal/hooks/use-scroll-sync/index.d.ts +1 -1
  118. package/internal/hooks/use-scroll-sync/index.d.ts.map +1 -1
  119. package/internal/hooks/use-scroll-sync/index.js +2 -4
  120. package/internal/hooks/use-scroll-sync/index.js.map +1 -1
  121. package/internal/manifest.json +1 -1
  122. package/internal/utils/content-header-utils.d.ts +1 -0
  123. package/internal/utils/content-header-utils.d.ts.map +1 -1
  124. package/internal/utils/content-header-utils.js +2 -1
  125. package/internal/utils/content-header-utils.js.map +1 -1
  126. package/internal/utils/dom.d.ts +0 -5
  127. package/internal/utils/dom.d.ts.map +1 -1
  128. package/internal/utils/dom.js +0 -12
  129. package/internal/utils/dom.js.map +1 -1
  130. package/internal/utils/handle-key.js +1 -1
  131. package/internal/utils/handle-key.js.map +1 -1
  132. package/link/interfaces.d.ts +6 -1
  133. package/link/interfaces.d.ts.map +1 -1
  134. package/link/interfaces.js.map +1 -1
  135. package/link/internal.d.ts.map +1 -1
  136. package/link/internal.js +12 -2
  137. package/link/internal.js.map +1 -1
  138. package/mixed-line-bar-chart/chart-container.js +1 -1
  139. package/mixed-line-bar-chart/chart-container.js.map +1 -1
  140. package/package.json +1 -1
  141. package/pie-chart/responsive-text.js +1 -1
  142. package/pie-chart/responsive-text.js.map +1 -1
  143. package/popover/use-popover-position.js +1 -1
  144. package/popover/use-popover-position.js.map +1 -1
  145. package/slider/styles.css.js +25 -25
  146. package/slider/styles.scoped.css +71 -71
  147. package/slider/styles.selectors.js +25 -25
  148. package/spinner/styles.css.js +13 -13
  149. package/spinner/styles.scoped.css +39 -39
  150. package/spinner/styles.selectors.js +13 -13
  151. package/split-panel/bottom.d.ts.map +1 -1
  152. package/split-panel/bottom.js +4 -2
  153. package/split-panel/bottom.js.map +1 -1
  154. package/split-panel/icons/bottom-icon-refresh.d.ts.map +1 -1
  155. package/split-panel/icons/bottom-icon-refresh.js +1 -2
  156. package/split-panel/icons/bottom-icon-refresh.js.map +1 -1
  157. package/split-panel/icons/bottom-icon.js +1 -1
  158. package/split-panel/icons/bottom-icon.js.map +1 -1
  159. package/split-panel/icons/side-position-refresh.d.ts.map +1 -1
  160. package/split-panel/icons/side-position-refresh.js +2 -3
  161. package/split-panel/icons/side-position-refresh.js.map +1 -1
  162. package/split-panel/icons/side-position.js +1 -1
  163. package/split-panel/icons/side-position.js.map +1 -1
  164. package/split-panel/icons/styles.css.js +27 -0
  165. package/split-panel/icons/styles.scoped.css +168 -0
  166. package/split-panel/icons/styles.selectors.js +28 -0
  167. package/split-panel/implementation.d.ts.map +1 -1
  168. package/split-panel/implementation.js +7 -6
  169. package/split-panel/implementation.js.map +1 -1
  170. package/split-panel/internal.js +1 -1
  171. package/split-panel/internal.js.map +1 -1
  172. package/split-panel/side.d.ts.map +1 -1
  173. package/split-panel/side.js +5 -3
  174. package/split-panel/side.js.map +1 -1
  175. package/split-panel/styles.css.js +31 -57
  176. package/split-panel/styles.scoped.css +51 -235
  177. package/split-panel/styles.selectors.js +31 -57
  178. package/split-panel/test-classes/styles.css.js +13 -0
  179. package/split-panel/test-classes/styles.scoped.css +14 -0
  180. package/split-panel/test-classes/styles.selectors.js +14 -0
  181. package/table/interfaces.d.ts +1 -0
  182. package/table/interfaces.d.ts.map +1 -1
  183. package/table/interfaces.js.map +1 -1
  184. package/table/internal.d.ts.map +1 -1
  185. package/table/internal.js +2 -8
  186. package/table/internal.js.map +1 -1
  187. package/table/no-data-cell.d.ts.map +1 -1
  188. package/table/no-data-cell.js +1 -2
  189. package/table/no-data-cell.js.map +1 -1
  190. package/table/progressive-loading/progressive-loading-utils.d.ts.map +1 -1
  191. package/table/progressive-loading/progressive-loading-utils.js +8 -3
  192. package/table/progressive-loading/progressive-loading-utils.js.map +1 -1
  193. package/table/resizer/index.js +1 -1
  194. package/table/resizer/index.js.map +1 -1
  195. package/table/resizer/resizer-lookup.js +1 -1
  196. package/table/resizer/resizer-lookup.js.map +1 -1
  197. package/table/sticky-columns/use-sticky-columns.js +1 -1
  198. package/table/sticky-columns/use-sticky-columns.js.map +1 -1
  199. package/table/sticky-columns/utils.js +1 -1
  200. package/table/sticky-columns/utils.js.map +1 -1
  201. package/table/sticky-scrollbar/use-sticky-scrollbar.d.ts.map +1 -1
  202. package/table/sticky-scrollbar/use-sticky-scrollbar.js +12 -14
  203. package/table/sticky-scrollbar/use-sticky-scrollbar.js.map +1 -1
  204. package/table/sticky-scrolling.js +1 -1
  205. package/table/sticky-scrolling.js.map +1 -1
  206. package/table/styles.css.js +34 -35
  207. package/table/styles.scoped.css +39 -48
  208. package/table/styles.selectors.js +34 -35
  209. package/table/table-role/grid-navigation.js +13 -13
  210. package/table/table-role/grid-navigation.js.map +1 -1
  211. package/table/use-column-widths.js +1 -1
  212. package/table/use-column-widths.js.map +1 -1
  213. package/tabs/scroll-utils.js +1 -1
  214. package/tabs/scroll-utils.js.map +1 -1
  215. package/test-utils/dom/app-layout/index.js +1 -1
  216. package/test-utils/dom/app-layout/index.js.map +1 -1
  217. package/test-utils/dom/content-layout/index.d.ts +3 -0
  218. package/test-utils/dom/content-layout/index.js +11 -1
  219. package/test-utils/dom/content-layout/index.js.map +1 -1
  220. package/test-utils/dom/split-panel/index.js +3 -3
  221. package/test-utils/dom/split-panel/index.js.map +1 -1
  222. package/test-utils/selectors/app-layout/index.js +1 -1
  223. package/test-utils/selectors/app-layout/index.js.map +1 -1
  224. package/test-utils/selectors/content-layout/index.d.ts +3 -0
  225. package/test-utils/selectors/content-layout/index.js +11 -1
  226. package/test-utils/selectors/content-layout/index.js.map +1 -1
  227. package/test-utils/selectors/split-panel/index.js +3 -3
  228. package/test-utils/selectors/split-panel/index.js.map +1 -1
  229. package/test-utils/tsconfig.tsbuildinfo +1 -1
  230. package/wizard/internal.d.ts.map +1 -1
  231. package/wizard/internal.js +3 -5
  232. package/wizard/internal.js.map +1 -1
  233. package/wizard/styles.css.js +31 -32
  234. package/wizard/styles.scoped.css +59 -116
  235. package/wizard/styles.selectors.js +31 -32
  236. package/wizard/wizard-form-header.d.ts.map +1 -1
  237. package/wizard/wizard-form-header.js +2 -4
  238. package/wizard/wizard-form-header.js.map +1 -1
  239. package/wizard/wizard-navigation.d.ts.map +1 -1
  240. package/wizard/wizard-navigation.js +2 -3
  241. package/wizard/wizard-navigation.js.map +1 -1
  242. package/app-layout/widget.d.ts +0 -6
  243. package/app-layout/widget.d.ts.map +0 -1
  244. package/app-layout/widget.js +0 -16
  245. package/app-layout/widget.js.map +0 -1
  246. package/internal/direction.d.ts +0 -36
  247. package/internal/direction.d.ts.map +0 -1
  248. package/internal/direction.js +0 -66
  249. package/internal/direction.js.map +0 -1
  250. package/split-panel/widget.d.ts +0 -2
  251. package/split-panel/widget.d.ts.map +0 -1
  252. package/split-panel/widget.js +0 -4
  253. package/split-panel/widget.js.map +0 -1
@@ -100,7 +100,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
100
100
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
101
101
  SPDX-License-Identifier: Apache-2.0
102
102
  */
103
- .awsui_root_wih1l_qzfuf_103:not(#\9) {
103
+ .awsui_root_wih1l_vhdn9_103:not(#\9) {
104
104
  font-size: var(--font-size-body-m-x4okxb, 14px);
105
105
  line-height: var(--line-height-body-m-30ar75, 20px);
106
106
  color: var(--color-text-body-default-at06ol, #000716);
@@ -111,7 +111,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
111
111
  inline-size: 100%;
112
112
  }
113
113
 
114
- .awsui_tools_wih1l_qzfuf_114:not(#\9) {
114
+ .awsui_tools_wih1l_vhdn9_114:not(#\9) {
115
115
  display: flex;
116
116
  align-items: flex-end;
117
117
  flex-wrap: wrap;
@@ -119,67 +119,67 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
119
119
  padding-block-end: var(--space-table-header-tools-bottom-25ubsj, 0px);
120
120
  padding-inline: 0;
121
121
  }
122
- .awsui_tools-filtering_wih1l_qzfuf_122:not(#\9) {
122
+ .awsui_tools-filtering_wih1l_vhdn9_122:not(#\9) {
123
123
  max-inline-size: 100%;
124
124
  margin-inline-end: var(--space-l-t419sm, 20px);
125
125
  }
126
126
  @supports (flex-basis: fit-content) {
127
- .awsui_tools-filtering_wih1l_qzfuf_122:not(#\9) {
127
+ .awsui_tools-filtering_wih1l_vhdn9_122:not(#\9) {
128
128
  flex: 1 1 fit-content;
129
129
  }
130
130
  }
131
131
  @supports not (flex-basis: fit-content) {
132
- .awsui_tools-filtering_wih1l_qzfuf_122:not(#\9) {
132
+ .awsui_tools-filtering_wih1l_vhdn9_122:not(#\9) {
133
133
  flex: 1 1 auto;
134
134
  }
135
135
  }
136
- .awsui_tools-align-right_wih1l_qzfuf_136:not(#\9) {
136
+ .awsui_tools-align-right_wih1l_vhdn9_136:not(#\9) {
137
137
  display: flex;
138
138
  margin-inline-start: auto;
139
139
  }
140
- .awsui_tools-pagination_wih1l_qzfuf_140 + .awsui_tools-preferences_wih1l_qzfuf_140:not(#\9) {
140
+ .awsui_tools-pagination_wih1l_vhdn9_140 + .awsui_tools-preferences_wih1l_vhdn9_140:not(#\9) {
141
141
  border-inline-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
142
142
  box-sizing: border-box;
143
143
  margin-inline-start: var(--space-xs-zb16t3, 8px);
144
144
  padding-inline-start: var(--space-xs-zb16t3, 8px);
145
145
  }
146
- .awsui_tools-small_wih1l_qzfuf_146 > .awsui_tools-filtering_wih1l_qzfuf_122:not(#\9) {
146
+ .awsui_tools-small_wih1l_vhdn9_146 > .awsui_tools-filtering_wih1l_vhdn9_122:not(#\9) {
147
147
  margin-inline-end: 0;
148
148
  margin-block-end: var(--space-scaled-xs-26e2du, 8px);
149
149
  flex-basis: 100%;
150
150
  }
151
151
 
152
- .awsui_table_wih1l_qzfuf_152:not(#\9) {
152
+ .awsui_table_wih1l_vhdn9_152:not(#\9) {
153
153
  inline-size: 100%;
154
154
  border-spacing: 0;
155
155
  position: relative;
156
156
  box-sizing: border-box;
157
157
  }
158
- .awsui_table-layout-fixed_wih1l_qzfuf_158:not(#\9) {
158
+ .awsui_table-layout-fixed_wih1l_vhdn9_158:not(#\9) {
159
159
  table-layout: fixed;
160
160
  }
161
161
 
162
- .awsui_wrapper_wih1l_qzfuf_162:not(#\9) {
162
+ .awsui_wrapper_wih1l_vhdn9_162:not(#\9) {
163
163
  position: relative;
164
164
  box-sizing: border-box;
165
165
  inline-size: 100%;
166
166
  overflow-x: auto;
167
167
  scrollbar-width: none; /* Hide scrollbar in Firefox */
168
168
  }
169
- .awsui_wrapper_wih1l_qzfuf_162.awsui_variant-stacked_wih1l_qzfuf_169 > .awsui_table_wih1l_qzfuf_152:not(#\9), .awsui_wrapper_wih1l_qzfuf_162.awsui_variant-stacked_wih1l_qzfuf_169 > .awsui_wrapper-content-measure_wih1l_qzfuf_169:not(#\9), .awsui_wrapper_wih1l_qzfuf_162.awsui_variant-container_wih1l_qzfuf_169 > .awsui_table_wih1l_qzfuf_152:not(#\9), .awsui_wrapper_wih1l_qzfuf_162.awsui_variant-container_wih1l_qzfuf_169 > .awsui_wrapper-content-measure_wih1l_qzfuf_169:not(#\9) {
169
+ .awsui_wrapper_wih1l_vhdn9_162.awsui_variant-stacked_wih1l_vhdn9_169 > .awsui_table_wih1l_vhdn9_152:not(#\9), .awsui_wrapper_wih1l_vhdn9_162.awsui_variant-stacked_wih1l_vhdn9_169 > .awsui_wrapper-content-measure_wih1l_vhdn9_169:not(#\9), .awsui_wrapper_wih1l_vhdn9_162.awsui_variant-container_wih1l_vhdn9_169 > .awsui_table_wih1l_vhdn9_152:not(#\9), .awsui_wrapper_wih1l_vhdn9_162.awsui_variant-container_wih1l_vhdn9_169 > .awsui_wrapper-content-measure_wih1l_vhdn9_169:not(#\9) {
170
170
  padding-inline: var(--space-table-horizontal-8davlm, 20px);
171
171
  }
172
- .awsui_wrapper_wih1l_qzfuf_162.awsui_variant-container_wih1l_qzfuf_169:not(#\9):not(.awsui_has-footer_wih1l_qzfuf_172) {
172
+ .awsui_wrapper_wih1l_vhdn9_162.awsui_variant-container_wih1l_vhdn9_169:not(#\9):not(.awsui_has-footer_wih1l_vhdn9_172) {
173
173
  padding-block-end: var(--space-table-content-bottom-9yr834, 4px);
174
174
  }
175
- .awsui_wrapper_wih1l_qzfuf_162:not(#\9):not(.awsui_has-header_wih1l_qzfuf_175) {
175
+ .awsui_wrapper_wih1l_vhdn9_162:not(#\9):not(.awsui_has-header_wih1l_vhdn9_175) {
176
176
  border-start-end-radius: var(--border-radius-container-wqv1zi, 16px);
177
177
  border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
178
178
  }
179
- .awsui_wrapper_wih1l_qzfuf_162:not(#\9)::-webkit-scrollbar {
179
+ .awsui_wrapper_wih1l_vhdn9_162:not(#\9)::-webkit-scrollbar {
180
180
  display: none; /* Hide scrollbar in Safari and Chrome */
181
181
  }
182
- body[data-awsui-focus-visible=true] .awsui_wrapper_wih1l_qzfuf_162:not(#\9):focus {
182
+ body[data-awsui-focus-visible=true] .awsui_wrapper_wih1l_vhdn9_162:not(#\9):focus {
183
183
  outline: 2px dotted transparent;
184
184
  outline-offset: 2px;
185
185
  border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
@@ -189,19 +189,19 @@ body[data-awsui-focus-visible=true] .awsui_wrapper_wih1l_qzfuf_162:not(#\9):focu
189
189
  box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
190
190
  }
191
191
 
192
- .awsui_cell-merged_wih1l_qzfuf_192:not(#\9) {
192
+ .awsui_cell-merged_wih1l_vhdn9_192:not(#\9) {
193
193
  text-align: center;
194
194
  padding-block: 0;
195
195
  padding-inline: 0;
196
196
  }
197
- .awsui_cell-merged_wih1l_qzfuf_192.awsui_has-footer_wih1l_qzfuf_172:not(#\9) {
197
+ .awsui_cell-merged_wih1l_vhdn9_192.awsui_has-footer_wih1l_vhdn9_172:not(#\9) {
198
198
  /*
199
199
  Add a bottom border to the body cell of an empty table as a separator between the
200
200
  table and the footer
201
201
  */
202
202
  border-block-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
203
203
  }
204
- .awsui_cell-merged-content_wih1l_qzfuf_204:not(#\9) {
204
+ .awsui_cell-merged-content_wih1l_vhdn9_204:not(#\9) {
205
205
  box-sizing: border-box;
206
206
  inline-size: 100%;
207
207
  padding-block-start: var(--space-scaled-m-mo5yse, 16px);
@@ -211,7 +211,7 @@ body[data-awsui-focus-visible=true] .awsui_wrapper_wih1l_qzfuf_162:not(#\9):focu
211
211
  /* stylelint-enable plugin/no-unsupported-browser-features */
212
212
  }
213
213
  @supports (position: sticky) {
214
- .awsui_cell-merged-content_wih1l_qzfuf_204:not(#\9) {
214
+ .awsui_cell-merged-content_wih1l_vhdn9_204:not(#\9) {
215
215
  position: sticky;
216
216
  inset-inline-start: 0;
217
217
  margin-block: 0;
@@ -219,11 +219,11 @@ body[data-awsui-focus-visible=true] .awsui_wrapper_wih1l_qzfuf_162:not(#\9):focu
219
219
  }
220
220
  }
221
221
 
222
- .awsui_empty_wih1l_qzfuf_222:not(#\9) {
222
+ .awsui_empty_wih1l_vhdn9_222:not(#\9) {
223
223
  color: var(--color-text-empty-2wfcyr, #5f6b7a);
224
224
  }
225
225
 
226
- .awsui_loading_wih1l_qzfuf_226:not(#\9) {
226
+ .awsui_loading_wih1l_vhdn9_226:not(#\9) {
227
227
  /* used in test-utils */
228
228
  }
229
229
 
@@ -232,29 +232,20 @@ The min/max/width token values in Visual Refresh should align
232
232
  the table header and body cells selection control with the table
233
233
  filter search icon.
234
234
  */
235
- .awsui_selection-control_wih1l_qzfuf_235:not(#\9) {
235
+ .awsui_selection-control_wih1l_vhdn9_235:not(#\9) {
236
236
  box-sizing: border-box;
237
237
  max-inline-size: var(--size-table-selection-horizontal-oqvl1b, 40px);
238
238
  min-inline-size: var(--size-table-selection-horizontal-oqvl1b, 40px);
239
239
  position: relative;
240
240
  inline-size: var(--size-table-selection-horizontal-oqvl1b, 40px);
241
241
  }
242
- .awsui_selection-control_wih1l_qzfuf_235.awsui_selection-control-header_wih1l_qzfuf_242:not(#\9) {
242
+ .awsui_selection-control_wih1l_vhdn9_235.awsui_selection-control-header_wih1l_vhdn9_242:not(#\9) {
243
243
  padding-block: var(--space-scaled-xs-26e2du, 8px);
244
244
  padding-inline: var(--space-scaled-l-0hpmd7, 20px);
245
245
  border-inline-start: var(--border-item-width-yel47s, 2px) solid transparent;
246
246
  }
247
247
 
248
- /*
249
- The dynamic height dark header needs a background that will cover
250
- the default white background of the container component.
251
- */
252
- .awsui_dark-header_wih1l_qzfuf_252:not(#\9) {
253
- background-color: var(--color-background-layout-main-nx09lr, #ffffff);
254
- color: var(--color-text-body-default-at06ol, #000716);
255
- }
256
-
257
- .awsui_header-secondary_wih1l_qzfuf_257:not(#\9) {
248
+ .awsui_header-secondary_wih1l_vhdn9_248:not(#\9) {
258
249
  overflow: auto;
259
250
  -ms-overflow-style: none; /* Internet Explorer 10+ */
260
251
  scrollbar-width: none; /* Firefox */
@@ -266,39 +257,39 @@ the default white background of the container component.
266
257
  border-end-end-radius: 0;
267
258
  background: var(--color-background-table-header-82ew8p, #ffffff);
268
259
  }
269
- .awsui_header-secondary_wih1l_qzfuf_257.awsui_variant-stacked_wih1l_qzfuf_169 > .awsui_table_wih1l_qzfuf_152:not(#\9), .awsui_header-secondary_wih1l_qzfuf_257.awsui_variant-container_wih1l_qzfuf_169 > .awsui_table_wih1l_qzfuf_152:not(#\9) {
260
+ .awsui_header-secondary_wih1l_vhdn9_248.awsui_variant-stacked_wih1l_vhdn9_169 > .awsui_table_wih1l_vhdn9_152:not(#\9), .awsui_header-secondary_wih1l_vhdn9_248.awsui_variant-container_wih1l_vhdn9_169 > .awsui_table_wih1l_vhdn9_152:not(#\9) {
270
261
  padding-inline: var(--space-table-horizontal-8davlm, 20px);
271
262
  }
272
- .awsui_header-secondary_wih1l_qzfuf_257:not(#\9)::-webkit-scrollbar {
263
+ .awsui_header-secondary_wih1l_vhdn9_248:not(#\9)::-webkit-scrollbar {
273
264
  display: none; /* Safari and Chrome */
274
265
  }
275
- .awsui_header-secondary_wih1l_qzfuf_257.awsui_table-has-header_wih1l_qzfuf_275:not(#\9) {
266
+ .awsui_header-secondary_wih1l_vhdn9_248.awsui_table-has-header_wih1l_vhdn9_266:not(#\9) {
276
267
  border-block-start: var(--border-divider-list-width-27y3k5, 1px) solid var(--color-border-container-divider-p2uygo, transparent);
277
268
  }
278
269
 
279
- .awsui_header-controls_wih1l_qzfuf_279:not(#\9) {
270
+ .awsui_header-controls_wih1l_vhdn9_270:not(#\9) {
280
271
  padding-block: var(--space-container-header-top-5qav00, 12px) var(--space-container-header-bottom-vj01hn, 8px);
281
272
  }
282
- .awsui_header-controls_wih1l_qzfuf_279.awsui_variant-full-page_wih1l_qzfuf_282:not(#\9) {
273
+ .awsui_header-controls_wih1l_vhdn9_270.awsui_variant-full-page_wih1l_vhdn9_273:not(#\9) {
283
274
  padding-block: 0 calc(var(--space-container-header-bottom-vj01hn, 8px) + var(--space-table-header-tools-full-page-bottom-xulfq9, 4px));
284
275
  }
285
- .awsui_header-controls_wih1l_qzfuf_279.awsui_variant-stacked_wih1l_qzfuf_169:not(#\9), .awsui_header-controls_wih1l_qzfuf_279.awsui_variant-container_wih1l_qzfuf_169:not(#\9) {
276
+ .awsui_header-controls_wih1l_vhdn9_270.awsui_variant-stacked_wih1l_vhdn9_169:not(#\9), .awsui_header-controls_wih1l_vhdn9_270.awsui_variant-container_wih1l_vhdn9_169:not(#\9) {
286
277
  padding-inline: calc(var(--space-table-horizontal-8davlm, 20px) + var(--space-table-header-horizontal-wl3ykr, 0px));
287
278
  }
288
- .awsui_header-controls_wih1l_qzfuf_279.awsui_variant-embedded_wih1l_qzfuf_288:not(#\9), .awsui_header-controls_wih1l_qzfuf_279.awsui_variant-borderless_wih1l_qzfuf_288:not(#\9) {
279
+ .awsui_header-controls_wih1l_vhdn9_270.awsui_variant-embedded_wih1l_vhdn9_279:not(#\9), .awsui_header-controls_wih1l_vhdn9_270.awsui_variant-borderless_wih1l_vhdn9_279:not(#\9) {
289
280
  padding-inline: var(--space-table-header-horizontal-wl3ykr, 0px);
290
281
  padding-block-start: var(--space-table-embedded-header-top-bfjeam, 0px);
291
282
  }
292
283
 
293
- .awsui_footer-wrapper_wih1l_qzfuf_293.awsui_variant-stacked_wih1l_qzfuf_169:not(#\9), .awsui_footer-wrapper_wih1l_qzfuf_293.awsui_variant-container_wih1l_qzfuf_169:not(#\9) {
284
+ .awsui_footer-wrapper_wih1l_vhdn9_284.awsui_variant-stacked_wih1l_vhdn9_169:not(#\9), .awsui_footer-wrapper_wih1l_vhdn9_284.awsui_variant-container_wih1l_vhdn9_169:not(#\9) {
294
285
  padding-inline: var(--space-table-horizontal-8davlm, 20px);
295
286
  }
296
287
 
297
- .awsui_footer_wih1l_qzfuf_293:not(#\9) {
288
+ .awsui_footer_wih1l_vhdn9_284:not(#\9) {
298
289
  padding-block: var(--space-scaled-s-aqzyko, 12px);
299
290
  padding-inline: var(--space-table-footer-horizontal-ptapb9, 0px);
300
291
  }
301
- .awsui_footer-with-pagination_wih1l_qzfuf_301:not(#\9) {
292
+ .awsui_footer-with-pagination_wih1l_vhdn9_292:not(#\9) {
302
293
  display: flex;
303
294
  flex-direction: row;
304
295
  justify-content: space-between;
@@ -306,12 +297,12 @@ the default white background of the container component.
306
297
  flex-wrap: wrap;
307
298
  gap: var(--space-scaled-s-aqzyko, 12px);
308
299
  }
309
- .awsui_footer-pagination_wih1l_qzfuf_309:not(#\9) {
300
+ .awsui_footer-pagination_wih1l_vhdn9_300:not(#\9) {
310
301
  margin-inline-start: auto;
311
302
  }
312
303
 
313
- .awsui_thead-active_wih1l_qzfuf_313:not(#\9),
314
- .awsui_row_wih1l_qzfuf_314:not(#\9),
315
- .awsui_row-selected_wih1l_qzfuf_315:not(#\9) {
304
+ .awsui_thead-active_wih1l_vhdn9_304:not(#\9),
305
+ .awsui_row_wih1l_vhdn9_305:not(#\9),
306
+ .awsui_row-selected_wih1l_vhdn9_306:not(#\9) {
316
307
  /* used in test-utils */
317
308
  }
@@ -2,40 +2,39 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "root": "awsui_root_wih1l_qzfuf_103",
6
- "tools": "awsui_tools_wih1l_qzfuf_114",
7
- "tools-filtering": "awsui_tools-filtering_wih1l_qzfuf_122",
8
- "tools-align-right": "awsui_tools-align-right_wih1l_qzfuf_136",
9
- "tools-pagination": "awsui_tools-pagination_wih1l_qzfuf_140",
10
- "tools-preferences": "awsui_tools-preferences_wih1l_qzfuf_140",
11
- "tools-small": "awsui_tools-small_wih1l_qzfuf_146",
12
- "table": "awsui_table_wih1l_qzfuf_152",
13
- "table-layout-fixed": "awsui_table-layout-fixed_wih1l_qzfuf_158",
14
- "wrapper": "awsui_wrapper_wih1l_qzfuf_162",
15
- "variant-stacked": "awsui_variant-stacked_wih1l_qzfuf_169",
16
- "wrapper-content-measure": "awsui_wrapper-content-measure_wih1l_qzfuf_169",
17
- "variant-container": "awsui_variant-container_wih1l_qzfuf_169",
18
- "has-footer": "awsui_has-footer_wih1l_qzfuf_172",
19
- "has-header": "awsui_has-header_wih1l_qzfuf_175",
20
- "cell-merged": "awsui_cell-merged_wih1l_qzfuf_192",
21
- "cell-merged-content": "awsui_cell-merged-content_wih1l_qzfuf_204",
22
- "empty": "awsui_empty_wih1l_qzfuf_222",
23
- "loading": "awsui_loading_wih1l_qzfuf_226",
24
- "selection-control": "awsui_selection-control_wih1l_qzfuf_235",
25
- "selection-control-header": "awsui_selection-control-header_wih1l_qzfuf_242",
26
- "dark-header": "awsui_dark-header_wih1l_qzfuf_252",
27
- "header-secondary": "awsui_header-secondary_wih1l_qzfuf_257",
28
- "table-has-header": "awsui_table-has-header_wih1l_qzfuf_275",
29
- "header-controls": "awsui_header-controls_wih1l_qzfuf_279",
30
- "variant-full-page": "awsui_variant-full-page_wih1l_qzfuf_282",
31
- "variant-embedded": "awsui_variant-embedded_wih1l_qzfuf_288",
32
- "variant-borderless": "awsui_variant-borderless_wih1l_qzfuf_288",
33
- "footer-wrapper": "awsui_footer-wrapper_wih1l_qzfuf_293",
34
- "footer": "awsui_footer_wih1l_qzfuf_293",
35
- "footer-with-pagination": "awsui_footer-with-pagination_wih1l_qzfuf_301",
36
- "footer-pagination": "awsui_footer-pagination_wih1l_qzfuf_309",
37
- "thead-active": "awsui_thead-active_wih1l_qzfuf_313",
38
- "row": "awsui_row_wih1l_qzfuf_314",
39
- "row-selected": "awsui_row-selected_wih1l_qzfuf_315"
5
+ "root": "awsui_root_wih1l_vhdn9_103",
6
+ "tools": "awsui_tools_wih1l_vhdn9_114",
7
+ "tools-filtering": "awsui_tools-filtering_wih1l_vhdn9_122",
8
+ "tools-align-right": "awsui_tools-align-right_wih1l_vhdn9_136",
9
+ "tools-pagination": "awsui_tools-pagination_wih1l_vhdn9_140",
10
+ "tools-preferences": "awsui_tools-preferences_wih1l_vhdn9_140",
11
+ "tools-small": "awsui_tools-small_wih1l_vhdn9_146",
12
+ "table": "awsui_table_wih1l_vhdn9_152",
13
+ "table-layout-fixed": "awsui_table-layout-fixed_wih1l_vhdn9_158",
14
+ "wrapper": "awsui_wrapper_wih1l_vhdn9_162",
15
+ "variant-stacked": "awsui_variant-stacked_wih1l_vhdn9_169",
16
+ "wrapper-content-measure": "awsui_wrapper-content-measure_wih1l_vhdn9_169",
17
+ "variant-container": "awsui_variant-container_wih1l_vhdn9_169",
18
+ "has-footer": "awsui_has-footer_wih1l_vhdn9_172",
19
+ "has-header": "awsui_has-header_wih1l_vhdn9_175",
20
+ "cell-merged": "awsui_cell-merged_wih1l_vhdn9_192",
21
+ "cell-merged-content": "awsui_cell-merged-content_wih1l_vhdn9_204",
22
+ "empty": "awsui_empty_wih1l_vhdn9_222",
23
+ "loading": "awsui_loading_wih1l_vhdn9_226",
24
+ "selection-control": "awsui_selection-control_wih1l_vhdn9_235",
25
+ "selection-control-header": "awsui_selection-control-header_wih1l_vhdn9_242",
26
+ "header-secondary": "awsui_header-secondary_wih1l_vhdn9_248",
27
+ "table-has-header": "awsui_table-has-header_wih1l_vhdn9_266",
28
+ "header-controls": "awsui_header-controls_wih1l_vhdn9_270",
29
+ "variant-full-page": "awsui_variant-full-page_wih1l_vhdn9_273",
30
+ "variant-embedded": "awsui_variant-embedded_wih1l_vhdn9_279",
31
+ "variant-borderless": "awsui_variant-borderless_wih1l_vhdn9_279",
32
+ "footer-wrapper": "awsui_footer-wrapper_wih1l_vhdn9_284",
33
+ "footer": "awsui_footer_wih1l_vhdn9_284",
34
+ "footer-with-pagination": "awsui_footer-with-pagination_wih1l_vhdn9_292",
35
+ "footer-pagination": "awsui_footer-pagination_wih1l_vhdn9_300",
36
+ "thead-active": "awsui_thead-active_wih1l_vhdn9_304",
37
+ "row": "awsui_row_wih1l_vhdn9_305",
38
+ "row-selected": "awsui_row-selected_wih1l_vhdn9_306"
40
39
  };
41
40
 
@@ -78,6 +78,17 @@ class GridNavigationProcessor {
78
78
  this.unregisterFocusable = (focusable) => {
79
79
  this.focusables.delete(focusable);
80
80
  this.focusHandlers.delete(focusable);
81
+ const isUnregisteringFocusedNode = nodeBelongs(focusable, document.activeElement);
82
+ if (isUnregisteringFocusedNode) {
83
+ // Wait for unmounted node to get removed from the DOM.
84
+ setTimeout(() => {
85
+ // If the focused cell appears to be no longer attached to the table we need to re-apply
86
+ // focus to a cell with the same or closest position.
87
+ if (this.focusedCell && !nodeBelongs(this.table, this.focusedCell.element)) {
88
+ this.moveFocusBy(this.focusedCell, { x: 0, y: 0 });
89
+ }
90
+ }, 0);
91
+ }
81
92
  };
82
93
  this.onFocusin = (event) => {
83
94
  if (!(event.target instanceof HTMLElement)) {
@@ -100,15 +111,6 @@ class GridNavigationProcessor {
100
111
  this.keepUserIndex = false;
101
112
  }
102
113
  };
103
- this.onFocusout = () => {
104
- // When focus leaves the cell and the cell no longer belong to the table it indicates the focused element has been unmounted.
105
- // In that case the focus needs to be restored on the same coordinates.
106
- setTimeout(() => {
107
- if (this.focusedCell && !nodeBelongs(this.table, this.focusedCell.element)) {
108
- this.moveFocusBy(this.focusedCell, { x: 0, y: 0 });
109
- }
110
- }, 0);
111
- };
112
114
  this.onKeydown = (event) => {
113
115
  if (!this.focusedCell) {
114
116
  return;
@@ -128,9 +130,9 @@ class GridNavigationProcessor {
128
130
  const shiftKey = event.shiftKey ? 1 : 0;
129
131
  const metaKey = event.metaKey ? 1 : 0;
130
132
  const modifiersPressed = ctrlKey + altKey + shiftKey + metaKey;
131
- const invalidModiferCombination = (modifiersPressed && !event.ctrlKey) ||
133
+ const invalidModifierCombination = (modifiersPressed && !event.ctrlKey) ||
132
134
  (event.ctrlKey && event.keyCode !== KeyCode.home && event.keyCode !== KeyCode.end);
133
- if (invalidModiferCombination ||
135
+ if (invalidModifierCombination ||
134
136
  this.isSuppressed(document.activeElement) ||
135
137
  !this.isRegistered(document.activeElement) ||
136
138
  keys.indexOf(event.keyCode) === -1) {
@@ -158,12 +160,10 @@ class GridNavigationProcessor {
158
160
  init(table) {
159
161
  this._table = table;
160
162
  this.table.addEventListener('focusin', this.onFocusin);
161
- this.table.addEventListener('focusout', this.onFocusout);
162
163
  this.table.addEventListener('keydown', this.onKeydown);
163
164
  this.updateFocusTarget();
164
165
  this.cleanup = () => {
165
166
  this.table.removeEventListener('focusin', this.onFocusin);
166
- this.table.removeEventListener('focusout', this.onFocusout);
167
167
  this.table.removeEventListener('keydown', this.onKeydown);
168
168
  this.focusables.forEach(this.unregisterFocusable);
169
169
  };
@@ -1 +1 @@
1
- {"version":3,"file":"grid-navigation.js","sourceRoot":"","sources":["../../../../src/table/table-role/grid-navigation.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\n\nimport React from 'react';\nimport { useEffect, useMemo } from 'react';\nimport {\n defaultIsSuppressed,\n findTableRowByAriaRowIndex,\n findTableRowCellByAriaColIndex,\n focusNextElement,\n getClosestCell,\n isElementDisabled,\n isTableCell,\n} from './utils';\nimport { FocusedCell, GridNavigationProps } from './interfaces';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport { nodeBelongs } from '../../internal/utils/node-belongs';\nimport { getAllFocusables } from '../../internal/components/focus-lock/utils';\nimport {\n SingleTabStopNavigationContext,\n FocusableChangeHandler,\n} from '../../internal/context/single-tab-stop-navigation-context';\nimport handleKey, { isEventLike } from '../../internal/utils/handle-key';\nimport { KeyCode } from '../../internal/keycode';\n\n/**\n * Makes table navigable with keyboard commands.\n * See grid-navigation.md\n */\nexport function GridNavigationProvider({ keyboardNavigation, pageSize, getTable, children }: GridNavigationProps) {\n const gridNavigation = useMemo(() => new GridNavigationProcessor(), []);\n\n const getTableStable = useStableCallback(getTable);\n\n // Initialize the processor with the table container assuming it is mounted synchronously and only once.\n useEffect(() => {\n if (keyboardNavigation) {\n const table = getTableStable();\n table && gridNavigation.init(table);\n }\n return () => gridNavigation.cleanup();\n }, [keyboardNavigation, gridNavigation, getTableStable]);\n\n // Notify the processor of the props change.\n useEffect(() => {\n gridNavigation.update({ pageSize });\n }, [gridNavigation, pageSize]);\n\n // Notify the processor of the new render.\n useEffect(() => {\n if (keyboardNavigation) {\n gridNavigation.refresh();\n }\n });\n\n return (\n <SingleTabStopNavigationContext.Provider\n value={{\n navigationActive: keyboardNavigation,\n registerFocusable: gridNavigation.registerFocusable,\n }}\n >\n {children}\n </SingleTabStopNavigationContext.Provider>\n );\n}\n\n/**\n * This helper encapsulates the grid navigation behaviors which are:\n * 1. Responding to keyboard commands and moving the focus accordingly;\n * 2. Muting table interactive elements for only one to be user-focusable at a time;\n * 3. Suppressing the above behaviors when focusing an element inside a dialog or when instructed explicitly.\n */\nclass GridNavigationProcessor {\n // Props\n private _pageSize = 0;\n private _table: null | HTMLTableElement = null;\n\n // State\n private focusedCell: null | FocusedCell = null;\n private keepUserIndex = false;\n private focusables = new Set<Element>();\n private focusHandlers = new Map<Element, FocusableChangeHandler>();\n private focusablesState = new WeakMap<Element, boolean>();\n private focusTarget: null | Element = null;\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 this.updateFocusTarget();\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 this.focusables.forEach(this.unregisterFocusable);\n };\n }\n\n public cleanup() {\n // Do nothing before initialized.\n }\n\n public update({ pageSize }: { pageSize: number }) {\n this._pageSize = pageSize;\n }\n\n public refresh() {\n // Timeout ensures the newly rendered content elements are registered.\n setTimeout(() => {\n if (this._table) {\n // Update focused cell indices in case table rows, columns, or firstIndex change.\n this.updateFocusedCell(this.focusedCell?.element);\n this.updateFocusTarget();\n }\n }, 0);\n }\n\n public registerFocusable = (focusableElement: HTMLElement, changeHandler: FocusableChangeHandler) => {\n this.focusables.add(focusableElement);\n this.focusHandlers.set(focusableElement, changeHandler);\n const isFocusable = this.focusablesState.get(focusableElement) ?? false;\n const newIsFocusable = this.focusTarget === focusableElement || this.isSuppressed(focusableElement);\n if (newIsFocusable !== isFocusable) {\n this.focusablesState.set(focusableElement, newIsFocusable);\n changeHandler(newIsFocusable);\n }\n // When newly registered element belongs to the focused cell the focus must transition to it.\n const focusedElement = this.focusedCell?.element;\n if (focusedElement && isTableCell(focusedElement) && focusedElement.contains(focusableElement)) {\n // Scroll is unnecessary when moving focus from a cell to element within the cell.\n focusableElement.focus({ preventScroll: true });\n }\n return () => this.unregisterFocusable(focusableElement);\n };\n\n public unregisterFocusable = (focusable: Element) => {\n this.focusables.delete(focusable);\n this.focusHandlers.delete(focusable);\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: GridNavigationProcessor is used before initialization.');\n }\n return this._table;\n }\n\n private onFocusin = (event: FocusEvent) => {\n if (!(event.target instanceof HTMLElement)) {\n return;\n }\n\n this.updateFocusedCell(event.target);\n if (!this.focusedCell) {\n return;\n }\n\n this.updateFocusTarget();\n\n // Focusing on cell is not eligible when it contains focusable elements in the content.\n // If content focusables are available - move the focus to the first one.\n const focusedElement = this.focusedCell.element;\n const nextTarget = isTableCell(focusedElement) ? this.getFocusablesFrom(focusedElement)[0] : null;\n if (nextTarget) {\n // Scroll is unnecessary when moving focus from a cell to element within the cell.\n nextTarget.focus({ preventScroll: true });\n } else {\n this.keepUserIndex = false;\n }\n };\n\n private onFocusout = () => {\n // When focus leaves the cell and the cell no longer belong to the table it indicates the focused element has been unmounted.\n // In that case the focus needs to be restored on the same coordinates.\n setTimeout(() => {\n if (this.focusedCell && !nodeBelongs(this.table, this.focusedCell.element)) {\n this.moveFocusBy(this.focusedCell, { x: 0, y: 0 });\n }\n }, 0);\n };\n\n private onKeydown = (event: KeyboardEvent) => {\n if (!this.focusedCell) {\n return;\n }\n\n const keys = [\n KeyCode.up,\n KeyCode.down,\n KeyCode.left,\n KeyCode.right,\n KeyCode.pageUp,\n KeyCode.pageDown,\n KeyCode.home,\n KeyCode.end,\n ];\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 modifiersPressed = ctrlKey + altKey + shiftKey + metaKey;\n const invalidModiferCombination =\n (modifiersPressed && !event.ctrlKey) ||\n (event.ctrlKey && event.keyCode !== KeyCode.home && event.keyCode !== KeyCode.end);\n\n if (\n invalidModiferCombination ||\n this.isSuppressed(document.activeElement) ||\n !this.isRegistered(document.activeElement) ||\n keys.indexOf(event.keyCode) === -1\n ) {\n return;\n }\n\n const from = this.focusedCell;\n event.preventDefault();\n\n isEventLike(event) &&\n handleKey(event, {\n onBlockStart: () => this.moveFocusBy(from, { y: -1, x: 0 }),\n onBlockEnd: () => this.moveFocusBy(from, { y: 1, x: 0 }),\n onInlineStart: () => this.moveFocusBy(from, { y: 0, x: -1 }),\n onInlineEnd: () => this.moveFocusBy(from, { y: 0, x: 1 }),\n onPageUp: () => this.moveFocusBy(from, { y: -this.pageSize, x: 0 }),\n onPageDown: () => this.moveFocusBy(from, { y: this.pageSize, x: 0 }),\n onHome: () =>\n event.ctrlKey\n ? this.moveFocusBy(from, { y: -Infinity, x: -Infinity })\n : this.moveFocusBy(from, { y: 0, x: -Infinity }),\n onEnd: () =>\n event.ctrlKey\n ? this.moveFocusBy(from, { y: Infinity, x: Infinity })\n : this.moveFocusBy(from, { y: 0, x: Infinity }),\n });\n };\n\n private moveFocusBy(cell: FocusedCell, delta: { x: number; y: number }) {\n // For vertical moves preserve column- and element indices set by user.\n // It allows keeping indices while moving over disabled actions or cells with colspan > 1.\n if (delta.y !== 0 && delta.x === 0) {\n this.keepUserIndex = true;\n }\n focusNextElement(this.getNextFocusable(cell, delta));\n }\n\n private updateFocusTarget() {\n this.focusTarget = this.getSingleFocusable();\n for (const focusableElement of this.focusables) {\n const isFocusable = this.focusablesState.get(focusableElement) ?? false;\n const newIsFocusable = this.focusTarget === focusableElement || this.isSuppressed(focusableElement);\n if (newIsFocusable !== isFocusable) {\n this.focusablesState.set(focusableElement, newIsFocusable);\n this.focusHandlers.get(focusableElement)!(newIsFocusable);\n }\n }\n }\n\n private isSuppressed(element: null | Element) {\n // Omit calculation as irrelevant until the table receives focus.\n if (!this.focusedCell) {\n return false;\n }\n return !element || defaultIsSuppressed(element);\n }\n\n private isRegistered(element: null | Element) {\n return !element || this.focusables.has(element);\n }\n\n private updateFocusedCell(focusedElement?: HTMLElement): void {\n if (!focusedElement) {\n return;\n }\n\n const cellElement = getClosestCell(focusedElement);\n const rowElement = cellElement?.closest('tr');\n if (!cellElement || !rowElement) {\n return;\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;\n }\n\n const cellFocusables = this.getFocusablesFrom(cellElement);\n const elementIndex = cellFocusables.indexOf(focusedElement);\n\n const prevColIndex = this.focusedCell?.colIndex ?? -1;\n const prevElementIndex = this.focusedCell?.elementIndex ?? -1;\n this.focusedCell = {\n rowIndex,\n colIndex: this.keepUserIndex && prevColIndex !== -1 ? prevColIndex : colIndex,\n elementIndex: this.keepUserIndex && prevElementIndex !== -1 ? prevElementIndex : elementIndex,\n element: focusedElement,\n };\n }\n\n private getNextFocusable(from: FocusedCell, delta: { y: number; x: number }) {\n // Find next row to move focus into (can be null if the top/bottom is reached).\n const targetAriaRowIndex = from.rowIndex + delta.y;\n const targetRow = findTableRowByAriaRowIndex(this.table, targetAriaRowIndex, delta.y);\n if (!targetRow) {\n return null;\n }\n\n // Return next interactive cell content element if available.\n const cellElement = getClosestCell(from.element);\n const cellFocusables = cellElement ? this.getFocusablesFrom(cellElement) : [];\n const nextElementIndex = from.elementIndex + delta.x;\n const isValidDirection = !!delta.x;\n const isValidIndex = from.elementIndex !== -1 && 0 <= nextElementIndex && nextElementIndex < cellFocusables.length;\n const isTargetDifferent = from.element !== cellFocusables[nextElementIndex];\n if (isValidDirection && isValidIndex && isTargetDifferent) {\n return cellFocusables[nextElementIndex];\n }\n\n // Find next cell to focus or move focus into (can be null if the left/right edge is reached).\n const targetAriaColIndex = from.colIndex + delta.x;\n const targetCell = findTableRowCellByAriaColIndex(targetRow, targetAriaColIndex, delta.x);\n if (!targetCell) {\n return null;\n }\n\n // When target cell matches the current cell it means we reached the left or right boundary.\n if (targetCell === cellElement && delta.x !== 0) {\n return null;\n }\n\n const targetCellFocusables = this.getFocusablesFrom(targetCell);\n\n // When delta.x = 0 keep element index if possible.\n let focusIndex = from.elementIndex;\n // Use first element index when moving to the right or to extreme left.\n if ((isFinite(delta.x) && delta.x > 0) || delta.x === -Infinity) {\n focusIndex = 0;\n }\n // Use last element index when moving to the left or to extreme right.\n if ((isFinite(delta.x) && delta.x < 0) || delta.x === Infinity) {\n focusIndex = targetCellFocusables.length - 1;\n }\n\n return targetCellFocusables[focusIndex] ?? targetCell;\n }\n\n private getSingleFocusable() {\n const cell = this.focusedCell;\n const firstTableCell = this.table.querySelector('td,th') as null | HTMLTableCellElement;\n\n // A single element of the table is made user-focusable.\n // It defaults to the first interactive element of the first cell or the first cell itself otherwise.\n let focusTarget: null | HTMLElement =\n (firstTableCell && this.getFocusablesFrom(firstTableCell)[0]) ?? firstTableCell;\n\n // When a navigation-focused element is present in the table it is used for user-navigation instead.\n if (cell) {\n focusTarget = this.getNextFocusable(cell, { x: 0, y: 0 });\n }\n\n return focusTarget;\n }\n\n private getFocusablesFrom(target: HTMLElement) {\n return getAllFocusables(target).filter(el => this.focusables.has(el) && !isElementDisabled(el));\n }\n}\n"]}
1
+ {"version":3,"file":"grid-navigation.js","sourceRoot":"","sources":["../../../../src/table/table-role/grid-navigation.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\n\nimport React from 'react';\nimport { useEffect, useMemo } from 'react';\nimport {\n defaultIsSuppressed,\n findTableRowByAriaRowIndex,\n findTableRowCellByAriaColIndex,\n focusNextElement,\n getClosestCell,\n isElementDisabled,\n isTableCell,\n} from './utils';\nimport { FocusedCell, GridNavigationProps } from './interfaces';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport { nodeBelongs } from '../../internal/utils/node-belongs';\nimport { getAllFocusables } from '../../internal/components/focus-lock/utils';\nimport {\n SingleTabStopNavigationContext,\n FocusableChangeHandler,\n} from '../../internal/context/single-tab-stop-navigation-context';\nimport handleKey, { isEventLike } from '../../internal/utils/handle-key';\nimport { KeyCode } from '../../internal/keycode';\n\n/**\n * Makes table navigable with keyboard commands.\n * See grid-navigation.md\n */\nexport function GridNavigationProvider({ keyboardNavigation, pageSize, getTable, children }: GridNavigationProps) {\n const gridNavigation = useMemo(() => new GridNavigationProcessor(), []);\n\n const getTableStable = useStableCallback(getTable);\n\n // Initialize the processor with the table container assuming it is mounted synchronously and only once.\n useEffect(() => {\n if (keyboardNavigation) {\n const table = getTableStable();\n table && gridNavigation.init(table);\n }\n return () => gridNavigation.cleanup();\n }, [keyboardNavigation, gridNavigation, getTableStable]);\n\n // Notify the processor of the props change.\n useEffect(() => {\n gridNavigation.update({ pageSize });\n }, [gridNavigation, pageSize]);\n\n // Notify the processor of the new render.\n useEffect(() => {\n if (keyboardNavigation) {\n gridNavigation.refresh();\n }\n });\n\n return (\n <SingleTabStopNavigationContext.Provider\n value={{\n navigationActive: keyboardNavigation,\n registerFocusable: gridNavigation.registerFocusable,\n }}\n >\n {children}\n </SingleTabStopNavigationContext.Provider>\n );\n}\n\n/**\n * This helper encapsulates the grid navigation behaviors which are:\n * 1. Responding to keyboard commands and moving the focus accordingly;\n * 2. Muting table interactive elements for only one to be user-focusable at a time;\n * 3. Suppressing the above behaviors when focusing an element inside a dialog or when instructed explicitly.\n */\nclass GridNavigationProcessor {\n // Props\n private _pageSize = 0;\n private _table: null | HTMLTableElement = null;\n\n // State\n private focusedCell: null | FocusedCell = null;\n private keepUserIndex = false;\n private focusables = new Set<Element>();\n private focusHandlers = new Map<Element, FocusableChangeHandler>();\n private focusablesState = new WeakMap<Element, boolean>();\n private focusTarget: null | Element = null;\n\n public init(table: HTMLTableElement) {\n this._table = table;\n\n this.table.addEventListener('focusin', this.onFocusin);\n this.table.addEventListener('keydown', this.onKeydown);\n\n this.updateFocusTarget();\n\n this.cleanup = () => {\n this.table.removeEventListener('focusin', this.onFocusin);\n this.table.removeEventListener('keydown', this.onKeydown);\n this.focusables.forEach(this.unregisterFocusable);\n };\n }\n\n public cleanup() {\n // Do nothing before initialized.\n }\n\n public update({ pageSize }: { pageSize: number }) {\n this._pageSize = pageSize;\n }\n\n public refresh() {\n // Timeout ensures the newly rendered content elements are registered.\n setTimeout(() => {\n if (this._table) {\n // Update focused cell indices in case table rows, columns, or firstIndex change.\n this.updateFocusedCell(this.focusedCell?.element);\n this.updateFocusTarget();\n }\n }, 0);\n }\n\n public registerFocusable = (focusableElement: HTMLElement, changeHandler: FocusableChangeHandler) => {\n this.focusables.add(focusableElement);\n this.focusHandlers.set(focusableElement, changeHandler);\n const isFocusable = this.focusablesState.get(focusableElement) ?? false;\n const newIsFocusable = this.focusTarget === focusableElement || this.isSuppressed(focusableElement);\n if (newIsFocusable !== isFocusable) {\n this.focusablesState.set(focusableElement, newIsFocusable);\n changeHandler(newIsFocusable);\n }\n // When newly registered element belongs to the focused cell the focus must transition to it.\n const focusedElement = this.focusedCell?.element;\n if (focusedElement && isTableCell(focusedElement) && focusedElement.contains(focusableElement)) {\n // Scroll is unnecessary when moving focus from a cell to element within the cell.\n focusableElement.focus({ preventScroll: true });\n }\n return () => this.unregisterFocusable(focusableElement);\n };\n\n public unregisterFocusable = (focusable: Element) => {\n this.focusables.delete(focusable);\n this.focusHandlers.delete(focusable);\n\n const isUnregisteringFocusedNode = nodeBelongs(focusable, document.activeElement);\n if (isUnregisteringFocusedNode) {\n // Wait for unmounted node to get removed from the DOM.\n setTimeout(() => {\n // If the focused cell appears to be no longer attached to the table we need to re-apply\n // focus to a cell with the same or closest position.\n if (this.focusedCell && !nodeBelongs(this.table, this.focusedCell.element)) {\n this.moveFocusBy(this.focusedCell, { x: 0, y: 0 });\n }\n }, 0);\n }\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: GridNavigationProcessor is used before initialization.');\n }\n return this._table;\n }\n\n private onFocusin = (event: FocusEvent) => {\n if (!(event.target instanceof HTMLElement)) {\n return;\n }\n\n this.updateFocusedCell(event.target);\n if (!this.focusedCell) {\n return;\n }\n\n this.updateFocusTarget();\n\n // Focusing on cell is not eligible when it contains focusable elements in the content.\n // If content focusables are available - move the focus to the first one.\n const focusedElement = this.focusedCell.element;\n const nextTarget = isTableCell(focusedElement) ? this.getFocusablesFrom(focusedElement)[0] : null;\n if (nextTarget) {\n // Scroll is unnecessary when moving focus from a cell to element within the cell.\n nextTarget.focus({ preventScroll: true });\n } else {\n this.keepUserIndex = false;\n }\n };\n\n private onKeydown = (event: KeyboardEvent) => {\n if (!this.focusedCell) {\n return;\n }\n\n const keys = [\n KeyCode.up,\n KeyCode.down,\n KeyCode.left,\n KeyCode.right,\n KeyCode.pageUp,\n KeyCode.pageDown,\n KeyCode.home,\n KeyCode.end,\n ];\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 modifiersPressed = ctrlKey + altKey + shiftKey + metaKey;\n const invalidModifierCombination =\n (modifiersPressed && !event.ctrlKey) ||\n (event.ctrlKey && event.keyCode !== KeyCode.home && event.keyCode !== KeyCode.end);\n\n if (\n invalidModifierCombination ||\n this.isSuppressed(document.activeElement) ||\n !this.isRegistered(document.activeElement) ||\n keys.indexOf(event.keyCode) === -1\n ) {\n return;\n }\n\n const from = this.focusedCell;\n event.preventDefault();\n\n isEventLike(event) &&\n handleKey(event, {\n onBlockStart: () => this.moveFocusBy(from, { y: -1, x: 0 }),\n onBlockEnd: () => this.moveFocusBy(from, { y: 1, x: 0 }),\n onInlineStart: () => this.moveFocusBy(from, { y: 0, x: -1 }),\n onInlineEnd: () => this.moveFocusBy(from, { y: 0, x: 1 }),\n onPageUp: () => this.moveFocusBy(from, { y: -this.pageSize, x: 0 }),\n onPageDown: () => this.moveFocusBy(from, { y: this.pageSize, x: 0 }),\n onHome: () =>\n event.ctrlKey\n ? this.moveFocusBy(from, { y: -Infinity, x: -Infinity })\n : this.moveFocusBy(from, { y: 0, x: -Infinity }),\n onEnd: () =>\n event.ctrlKey\n ? this.moveFocusBy(from, { y: Infinity, x: Infinity })\n : this.moveFocusBy(from, { y: 0, x: Infinity }),\n });\n };\n\n private moveFocusBy(cell: FocusedCell, delta: { x: number; y: number }) {\n // For vertical moves preserve column- and element indices set by user.\n // It allows keeping indices while moving over disabled actions or cells with colspan > 1.\n if (delta.y !== 0 && delta.x === 0) {\n this.keepUserIndex = true;\n }\n focusNextElement(this.getNextFocusable(cell, delta));\n }\n\n private updateFocusTarget() {\n this.focusTarget = this.getSingleFocusable();\n for (const focusableElement of this.focusables) {\n const isFocusable = this.focusablesState.get(focusableElement) ?? false;\n const newIsFocusable = this.focusTarget === focusableElement || this.isSuppressed(focusableElement);\n if (newIsFocusable !== isFocusable) {\n this.focusablesState.set(focusableElement, newIsFocusable);\n this.focusHandlers.get(focusableElement)!(newIsFocusable);\n }\n }\n }\n\n private isSuppressed(element: null | Element) {\n // Omit calculation as irrelevant until the table receives focus.\n if (!this.focusedCell) {\n return false;\n }\n return !element || defaultIsSuppressed(element);\n }\n\n private isRegistered(element: null | Element) {\n return !element || this.focusables.has(element);\n }\n\n private updateFocusedCell(focusedElement?: HTMLElement): void {\n if (!focusedElement) {\n return;\n }\n\n const cellElement = getClosestCell(focusedElement);\n const rowElement = cellElement?.closest('tr');\n if (!cellElement || !rowElement) {\n return;\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;\n }\n\n const cellFocusables = this.getFocusablesFrom(cellElement);\n const elementIndex = cellFocusables.indexOf(focusedElement);\n\n const prevColIndex = this.focusedCell?.colIndex ?? -1;\n const prevElementIndex = this.focusedCell?.elementIndex ?? -1;\n this.focusedCell = {\n rowIndex,\n colIndex: this.keepUserIndex && prevColIndex !== -1 ? prevColIndex : colIndex,\n elementIndex: this.keepUserIndex && prevElementIndex !== -1 ? prevElementIndex : elementIndex,\n element: focusedElement,\n };\n }\n\n private getNextFocusable(from: FocusedCell, delta: { y: number; x: number }) {\n // Find next row to move focus into (can be null if the top/bottom is reached).\n const targetAriaRowIndex = from.rowIndex + delta.y;\n const targetRow = findTableRowByAriaRowIndex(this.table, targetAriaRowIndex, delta.y);\n if (!targetRow) {\n return null;\n }\n\n // Return next interactive cell content element if available.\n const cellElement = getClosestCell(from.element);\n const cellFocusables = cellElement ? this.getFocusablesFrom(cellElement) : [];\n const nextElementIndex = from.elementIndex + delta.x;\n const isValidDirection = !!delta.x;\n const isValidIndex = from.elementIndex !== -1 && 0 <= nextElementIndex && nextElementIndex < cellFocusables.length;\n const isTargetDifferent = from.element !== cellFocusables[nextElementIndex];\n if (isValidDirection && isValidIndex && isTargetDifferent) {\n return cellFocusables[nextElementIndex];\n }\n\n // Find next cell to focus or move focus into (can be null if the left/right edge is reached).\n const targetAriaColIndex = from.colIndex + delta.x;\n const targetCell = findTableRowCellByAriaColIndex(targetRow, targetAriaColIndex, delta.x);\n if (!targetCell) {\n return null;\n }\n\n // When target cell matches the current cell it means we reached the left or right boundary.\n if (targetCell === cellElement && delta.x !== 0) {\n return null;\n }\n\n const targetCellFocusables = this.getFocusablesFrom(targetCell);\n\n // When delta.x = 0 keep element index if possible.\n let focusIndex = from.elementIndex;\n // Use first element index when moving to the right or to extreme left.\n if ((isFinite(delta.x) && delta.x > 0) || delta.x === -Infinity) {\n focusIndex = 0;\n }\n // Use last element index when moving to the left or to extreme right.\n if ((isFinite(delta.x) && delta.x < 0) || delta.x === Infinity) {\n focusIndex = targetCellFocusables.length - 1;\n }\n\n return targetCellFocusables[focusIndex] ?? targetCell;\n }\n\n private getSingleFocusable() {\n const cell = this.focusedCell;\n const firstTableCell = this.table.querySelector('td,th') as null | HTMLTableCellElement;\n\n // A single element of the table is made user-focusable.\n // It defaults to the first interactive element of the first cell or the first cell itself otherwise.\n let focusTarget: null | HTMLElement =\n (firstTableCell && this.getFocusablesFrom(firstTableCell)[0]) ?? firstTableCell;\n\n // When a navigation-focused element is present in the table it is used for user-navigation instead.\n if (cell) {\n focusTarget = this.getNextFocusable(cell, { x: 0, y: 0 });\n }\n\n return focusTarget;\n }\n\n private getFocusablesFrom(target: HTMLElement) {\n return getAllFocusables(target).filter(el => this.focusables.has(el) && !isElementDisabled(el));\n }\n}\n"]}
@@ -3,7 +3,7 @@
3
3
  import { useResizeObserver, useStableCallback } from '@cloudscape-design/component-toolkit/internal';
4
4
  import React, { useEffect, useRef, useState, createContext, useContext } from 'react';
5
5
  import { setElementWidths } from './column-widths-utils';
6
- import { getLogicalBoundingClientRect } from '../internal/direction';
6
+ import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
7
7
  export const DEFAULT_COLUMN_WIDTH = 120;
8
8
  function readWidths(getCell, visibleColumns) {
9
9
  const result = new Map();
@@ -1 +1 @@
1
- {"version":3,"file":"use-column-widths.js","sourceRoot":"","sources":["../../../src/table/use-column-widths.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 { useResizeObserver, useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport React, { useEffect, useRef, useState, createContext, useContext } from 'react';\nimport { setElementWidths } from './column-widths-utils';\nimport { getLogicalBoundingClientRect } from '../internal/direction';\n\nexport const DEFAULT_COLUMN_WIDTH = 120;\n\nexport interface ColumnWidthDefinition {\n id: PropertyKey;\n minWidth?: string | number;\n maxWidth?: string | number;\n width?: string | number;\n}\n\nfunction readWidths(\n getCell: (columnId: PropertyKey) => null | HTMLElement,\n visibleColumns: readonly ColumnWidthDefinition[]\n) {\n const result = new Map<PropertyKey, number>();\n for (let index = 0; index < visibleColumns.length; index++) {\n const column = visibleColumns[index];\n let width = (column.width as number) || 0;\n const minWidth = (column.minWidth as number) || width || DEFAULT_COLUMN_WIDTH;\n if (\n !width && // read width from the DOM if it is missing in the config\n index !== visibleColumns.length - 1 // skip reading for the last column, because it expands to fully fit the container\n ) {\n const colEl = getCell(column.id);\n width = colEl ? getLogicalBoundingClientRect(colEl).inlineSize : DEFAULT_COLUMN_WIDTH;\n }\n result.set(column.id, Math.max(width, minWidth));\n }\n return result;\n}\n\nfunction updateWidths(\n visibleColumns: readonly ColumnWidthDefinition[],\n oldWidths: Map<PropertyKey, number>,\n newWidth: number,\n columnId: PropertyKey\n) {\n const column = visibleColumns.find(column => column.id === columnId);\n const minWidth = typeof column?.minWidth === 'number' ? column.minWidth : DEFAULT_COLUMN_WIDTH;\n newWidth = Math.max(newWidth, minWidth);\n if (oldWidths.get(columnId) === newWidth) {\n return oldWidths;\n }\n const newWidths = new Map(oldWidths);\n newWidths.set(columnId, newWidth);\n return newWidths;\n}\n\ninterface WidthsContext {\n getColumnStyles(sticky: boolean, columnId: PropertyKey): React.CSSProperties;\n columnWidths: Map<PropertyKey, number>;\n updateColumn: (columnId: PropertyKey, newWidth: number) => void;\n setCell: (sticky: boolean, columnId: PropertyKey, node: null | HTMLElement) => void;\n}\n\nconst WidthsContext = createContext<WidthsContext>({\n getColumnStyles: () => ({}),\n columnWidths: new Map(),\n updateColumn: () => {},\n setCell: () => {},\n});\n\ninterface WidthProviderProps {\n visibleColumns: readonly ColumnWidthDefinition[];\n resizableColumns: boolean | undefined;\n containerRef: React.RefObject<HTMLElement>;\n children: React.ReactNode;\n}\n\nexport function ColumnWidthsProvider({ visibleColumns, resizableColumns, containerRef, children }: WidthProviderProps) {\n const visibleColumnsRef = useRef<PropertyKey[] | null>(null);\n const containerWidthRef = useRef(0);\n const [columnWidths, setColumnWidths] = useState<null | Map<PropertyKey, number>>(null);\n\n const cellsRef = useRef(new Map<PropertyKey, HTMLElement>());\n const stickyCellsRef = useRef(new Map<PropertyKey, HTMLElement>());\n const getCell = (columnId: PropertyKey): null | HTMLElement => cellsRef.current.get(columnId) ?? null;\n const setCell = (sticky: boolean, columnId: PropertyKey, node: null | HTMLElement) => {\n const ref = sticky ? stickyCellsRef : cellsRef;\n if (node) {\n ref.current.set(columnId, node);\n } else {\n ref.current.delete(columnId);\n }\n };\n\n const getColumnStyles = (sticky: boolean, columnId: PropertyKey): React.CSSProperties => {\n const column = visibleColumns.find(column => column.id === columnId);\n if (!column) {\n return {};\n }\n\n if (sticky) {\n return { width: cellsRef.current.get(column.id)?.offsetWidth || (columnWidths?.get(column.id) ?? column.width) };\n }\n\n if (resizableColumns && columnWidths) {\n const isLastColumn = column.id === visibleColumns[visibleColumns.length - 1]?.id;\n const totalWidth = visibleColumns.reduce(\n (sum, { id }) => sum + (columnWidths.get(id) || DEFAULT_COLUMN_WIDTH),\n 0\n );\n if (isLastColumn && containerWidthRef.current > totalWidth) {\n return { width: 'auto', minWidth: column?.minWidth };\n } else {\n return { width: columnWidths.get(column.id), minWidth: column?.minWidth };\n }\n }\n return {\n width: column.width,\n minWidth: column.minWidth,\n maxWidth: !resizableColumns ? column.maxWidth : undefined,\n };\n };\n\n // Imperatively sets width style for a cell avoiding React state.\n // This allows setting the style as soon container's size change is observed.\n const updateColumnWidths = useStableCallback(() => {\n for (const { id } of visibleColumns) {\n const element = cellsRef.current.get(id);\n if (element) {\n setElementWidths(element, getColumnStyles(false, id));\n }\n }\n // Sticky column widths must be synchronized once all real column widths are assigned.\n for (const { id } of visibleColumns) {\n const element = stickyCellsRef.current.get(id);\n if (element) {\n setElementWidths(element, getColumnStyles(true, id));\n }\n }\n });\n\n // Observes container size and requests an update to the last cell width as it depends on the container's width.\n useResizeObserver(containerRef, ({ contentBoxWidth: containerWidth }) => {\n containerWidthRef.current = containerWidth;\n updateColumnWidths();\n });\n\n // The widths of the dynamically added columns (after the first render) if not set explicitly\n // will default to the DEFAULT_COLUMN_WIDTH.\n useEffect(() => {\n updateColumnWidths();\n\n if (!resizableColumns) {\n return;\n }\n let updated = false;\n const newColumnWidths = new Map(columnWidths);\n const lastVisible = visibleColumnsRef.current;\n if (lastVisible) {\n for (let index = 0; index < visibleColumns.length; index++) {\n const column = visibleColumns[index];\n if (!columnWidths?.get(column.id) && lastVisible.indexOf(column.id) === -1) {\n updated = true;\n newColumnWidths.set(column.id, (column.width as number) || DEFAULT_COLUMN_WIDTH);\n }\n }\n if (updated) {\n setColumnWidths(newColumnWidths);\n }\n }\n visibleColumnsRef.current = visibleColumns.map(column => column.id);\n }, [columnWidths, resizableColumns, visibleColumns, updateColumnWidths]);\n\n // Read the actual column widths after the first render to employ the browser defaults for\n // those columns without explicit width.\n useEffect(() => {\n if (!resizableColumns) {\n return;\n }\n setColumnWidths(() => readWidths(getCell, visibleColumns));\n // This code is intended to run only at the first render and should not re-run when table props change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n function updateColumn(columnId: PropertyKey, newWidth: number) {\n setColumnWidths(columnWidths => updateWidths(visibleColumns, columnWidths ?? new Map(), newWidth, columnId));\n }\n\n return (\n <WidthsContext.Provider value={{ getColumnStyles, columnWidths: columnWidths ?? new Map(), updateColumn, setCell }}>\n {children}\n </WidthsContext.Provider>\n );\n}\n\nexport function useColumnWidths() {\n return useContext(WidthsContext);\n}\n"]}
1
+ {"version":3,"file":"use-column-widths.js","sourceRoot":"","sources":["../../../src/table/use-column-widths.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 { useResizeObserver, useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport React, { useEffect, useRef, useState, createContext, useContext } from 'react';\nimport { setElementWidths } from './column-widths-utils';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nexport const DEFAULT_COLUMN_WIDTH = 120;\n\nexport interface ColumnWidthDefinition {\n id: PropertyKey;\n minWidth?: string | number;\n maxWidth?: string | number;\n width?: string | number;\n}\n\nfunction readWidths(\n getCell: (columnId: PropertyKey) => null | HTMLElement,\n visibleColumns: readonly ColumnWidthDefinition[]\n) {\n const result = new Map<PropertyKey, number>();\n for (let index = 0; index < visibleColumns.length; index++) {\n const column = visibleColumns[index];\n let width = (column.width as number) || 0;\n const minWidth = (column.minWidth as number) || width || DEFAULT_COLUMN_WIDTH;\n if (\n !width && // read width from the DOM if it is missing in the config\n index !== visibleColumns.length - 1 // skip reading for the last column, because it expands to fully fit the container\n ) {\n const colEl = getCell(column.id);\n width = colEl ? getLogicalBoundingClientRect(colEl).inlineSize : DEFAULT_COLUMN_WIDTH;\n }\n result.set(column.id, Math.max(width, minWidth));\n }\n return result;\n}\n\nfunction updateWidths(\n visibleColumns: readonly ColumnWidthDefinition[],\n oldWidths: Map<PropertyKey, number>,\n newWidth: number,\n columnId: PropertyKey\n) {\n const column = visibleColumns.find(column => column.id === columnId);\n const minWidth = typeof column?.minWidth === 'number' ? column.minWidth : DEFAULT_COLUMN_WIDTH;\n newWidth = Math.max(newWidth, minWidth);\n if (oldWidths.get(columnId) === newWidth) {\n return oldWidths;\n }\n const newWidths = new Map(oldWidths);\n newWidths.set(columnId, newWidth);\n return newWidths;\n}\n\ninterface WidthsContext {\n getColumnStyles(sticky: boolean, columnId: PropertyKey): React.CSSProperties;\n columnWidths: Map<PropertyKey, number>;\n updateColumn: (columnId: PropertyKey, newWidth: number) => void;\n setCell: (sticky: boolean, columnId: PropertyKey, node: null | HTMLElement) => void;\n}\n\nconst WidthsContext = createContext<WidthsContext>({\n getColumnStyles: () => ({}),\n columnWidths: new Map(),\n updateColumn: () => {},\n setCell: () => {},\n});\n\ninterface WidthProviderProps {\n visibleColumns: readonly ColumnWidthDefinition[];\n resizableColumns: boolean | undefined;\n containerRef: React.RefObject<HTMLElement>;\n children: React.ReactNode;\n}\n\nexport function ColumnWidthsProvider({ visibleColumns, resizableColumns, containerRef, children }: WidthProviderProps) {\n const visibleColumnsRef = useRef<PropertyKey[] | null>(null);\n const containerWidthRef = useRef(0);\n const [columnWidths, setColumnWidths] = useState<null | Map<PropertyKey, number>>(null);\n\n const cellsRef = useRef(new Map<PropertyKey, HTMLElement>());\n const stickyCellsRef = useRef(new Map<PropertyKey, HTMLElement>());\n const getCell = (columnId: PropertyKey): null | HTMLElement => cellsRef.current.get(columnId) ?? null;\n const setCell = (sticky: boolean, columnId: PropertyKey, node: null | HTMLElement) => {\n const ref = sticky ? stickyCellsRef : cellsRef;\n if (node) {\n ref.current.set(columnId, node);\n } else {\n ref.current.delete(columnId);\n }\n };\n\n const getColumnStyles = (sticky: boolean, columnId: PropertyKey): React.CSSProperties => {\n const column = visibleColumns.find(column => column.id === columnId);\n if (!column) {\n return {};\n }\n\n if (sticky) {\n return { width: cellsRef.current.get(column.id)?.offsetWidth || (columnWidths?.get(column.id) ?? column.width) };\n }\n\n if (resizableColumns && columnWidths) {\n const isLastColumn = column.id === visibleColumns[visibleColumns.length - 1]?.id;\n const totalWidth = visibleColumns.reduce(\n (sum, { id }) => sum + (columnWidths.get(id) || DEFAULT_COLUMN_WIDTH),\n 0\n );\n if (isLastColumn && containerWidthRef.current > totalWidth) {\n return { width: 'auto', minWidth: column?.minWidth };\n } else {\n return { width: columnWidths.get(column.id), minWidth: column?.minWidth };\n }\n }\n return {\n width: column.width,\n minWidth: column.minWidth,\n maxWidth: !resizableColumns ? column.maxWidth : undefined,\n };\n };\n\n // Imperatively sets width style for a cell avoiding React state.\n // This allows setting the style as soon container's size change is observed.\n const updateColumnWidths = useStableCallback(() => {\n for (const { id } of visibleColumns) {\n const element = cellsRef.current.get(id);\n if (element) {\n setElementWidths(element, getColumnStyles(false, id));\n }\n }\n // Sticky column widths must be synchronized once all real column widths are assigned.\n for (const { id } of visibleColumns) {\n const element = stickyCellsRef.current.get(id);\n if (element) {\n setElementWidths(element, getColumnStyles(true, id));\n }\n }\n });\n\n // Observes container size and requests an update to the last cell width as it depends on the container's width.\n useResizeObserver(containerRef, ({ contentBoxWidth: containerWidth }) => {\n containerWidthRef.current = containerWidth;\n updateColumnWidths();\n });\n\n // The widths of the dynamically added columns (after the first render) if not set explicitly\n // will default to the DEFAULT_COLUMN_WIDTH.\n useEffect(() => {\n updateColumnWidths();\n\n if (!resizableColumns) {\n return;\n }\n let updated = false;\n const newColumnWidths = new Map(columnWidths);\n const lastVisible = visibleColumnsRef.current;\n if (lastVisible) {\n for (let index = 0; index < visibleColumns.length; index++) {\n const column = visibleColumns[index];\n if (!columnWidths?.get(column.id) && lastVisible.indexOf(column.id) === -1) {\n updated = true;\n newColumnWidths.set(column.id, (column.width as number) || DEFAULT_COLUMN_WIDTH);\n }\n }\n if (updated) {\n setColumnWidths(newColumnWidths);\n }\n }\n visibleColumnsRef.current = visibleColumns.map(column => column.id);\n }, [columnWidths, resizableColumns, visibleColumns, updateColumnWidths]);\n\n // Read the actual column widths after the first render to employ the browser defaults for\n // those columns without explicit width.\n useEffect(() => {\n if (!resizableColumns) {\n return;\n }\n setColumnWidths(() => readWidths(getCell, visibleColumns));\n // This code is intended to run only at the first render and should not re-run when table props change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n function updateColumn(columnId: PropertyKey, newWidth: number) {\n setColumnWidths(columnWidths => updateWidths(visibleColumns, columnWidths ?? new Map(), newWidth, columnId));\n }\n\n return (\n <WidthsContext.Provider value={{ getColumnStyles, columnWidths: columnWidths ?? new Map(), updateColumn, setCell }}>\n {children}\n </WidthsContext.Provider>\n );\n}\n\nexport function useColumnWidths() {\n return useContext(WidthsContext);\n}\n"]}
@@ -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 smoothScroll from './smooth-scroll';
4
- import { getIsRtl, getScrollInlineStart } from '../internal/direction';
4
+ import { getIsRtl, getScrollInlineStart } from '@cloudscape-design/component-toolkit/internal';
5
5
  export const onPaginationClick = (headerBarRef, direction) => {
6
6
  if (!(headerBarRef === null || headerBarRef === void 0 ? void 0 : headerBarRef.current)) {
7
7
  return;
@@ -1 +1 @@
1
- {"version":3,"file":"scroll-utils.js","sourceRoot":"","sources":["../../../src/tabs/scroll-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\nimport smoothScroll from './smooth-scroll';\nimport { getIsRtl, getScrollInlineStart } from '../internal/direction';\n\nexport const onPaginationClick = (\n headerBarRef: React.RefObject<HTMLUListElement>,\n direction: 'forward' | 'backward'\n): void => {\n if (!headerBarRef?.current) {\n return;\n }\n const element = headerBarRef.current;\n const { scrollLeft, scrollWidth, offsetWidth } = element;\n\n // Scroll each paginated section by 75% of what is already visible\n const paginatedSectionSize = Math.ceil(element.clientWidth * 0.75);\n\n const scrollDistance =\n direction === 'forward'\n ? Math.min(Math.abs(scrollLeft) + paginatedSectionSize, scrollWidth - offsetWidth)\n : Math.max(Math.abs(scrollLeft) - paginatedSectionSize, 0);\n\n // scroll destination needs to be a negative number if the direction is RTL\n const scrollTo = getIsRtl(element) ? scrollDistance * -1 : scrollDistance;\n\n smoothScroll(element, scrollTo);\n};\n\nexport const hasHorizontalOverflow = (\n headerBar: HTMLElement,\n inlineStartOverflowButton: React.RefObject<HTMLElement>\n): boolean => {\n const { offsetWidth, scrollWidth } = headerBar;\n\n // Need to account for pagination button width when deciding if there would be overflow without them\n const paginationButtonsWidth = inlineStartOverflowButton.current && 2 * inlineStartOverflowButton.current.offsetWidth;\n return paginationButtonsWidth ? scrollWidth > offsetWidth + paginationButtonsWidth : scrollWidth > offsetWidth;\n};\n\nexport const hasInlineStartOverflow = (headerBar: HTMLElement): boolean => {\n return getScrollInlineStart(headerBar) > 0;\n};\n\nexport const hasInlineEndOverflow = (headerBar: HTMLElement): boolean => {\n return Math.ceil(getScrollInlineStart(headerBar)) < headerBar.scrollWidth - headerBar.offsetWidth;\n};\n\nexport const scrollIntoView = (tabHeader: HTMLElement, headerBar: HTMLElement, smooth = true): void => {\n if (!tabHeader || !headerBar) {\n return;\n }\n // Extra left and right margin to always make the focus ring visible\n const margin = 2;\n let updatedLeftScroll = headerBar.scrollLeft;\n\n // Anchor tab to left of scroll parent\n updatedLeftScroll = Math.min(updatedLeftScroll, tabHeader.offsetLeft - margin);\n // Anchor tab to right of scroll parent\n updatedLeftScroll = Math.max(\n updatedLeftScroll,\n tabHeader.offsetLeft + tabHeader.offsetWidth - headerBar.offsetWidth + margin\n );\n if (smooth) {\n smoothScroll(headerBar, updatedLeftScroll);\n } else {\n headerBar.scrollLeft = updatedLeftScroll;\n }\n};\n"]}
1
+ {"version":3,"file":"scroll-utils.js","sourceRoot":"","sources":["../../../src/tabs/scroll-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\nimport smoothScroll from './smooth-scroll';\nimport { getIsRtl, getScrollInlineStart } from '@cloudscape-design/component-toolkit/internal';\n\nexport const onPaginationClick = (\n headerBarRef: React.RefObject<HTMLUListElement>,\n direction: 'forward' | 'backward'\n): void => {\n if (!headerBarRef?.current) {\n return;\n }\n const element = headerBarRef.current;\n const { scrollLeft, scrollWidth, offsetWidth } = element;\n\n // Scroll each paginated section by 75% of what is already visible\n const paginatedSectionSize = Math.ceil(element.clientWidth * 0.75);\n\n const scrollDistance =\n direction === 'forward'\n ? Math.min(Math.abs(scrollLeft) + paginatedSectionSize, scrollWidth - offsetWidth)\n : Math.max(Math.abs(scrollLeft) - paginatedSectionSize, 0);\n\n // scroll destination needs to be a negative number if the direction is RTL\n const scrollTo = getIsRtl(element) ? scrollDistance * -1 : scrollDistance;\n\n smoothScroll(element, scrollTo);\n};\n\nexport const hasHorizontalOverflow = (\n headerBar: HTMLElement,\n inlineStartOverflowButton: React.RefObject<HTMLElement>\n): boolean => {\n const { offsetWidth, scrollWidth } = headerBar;\n\n // Need to account for pagination button width when deciding if there would be overflow without them\n const paginationButtonsWidth = inlineStartOverflowButton.current && 2 * inlineStartOverflowButton.current.offsetWidth;\n return paginationButtonsWidth ? scrollWidth > offsetWidth + paginationButtonsWidth : scrollWidth > offsetWidth;\n};\n\nexport const hasInlineStartOverflow = (headerBar: HTMLElement): boolean => {\n return getScrollInlineStart(headerBar) > 0;\n};\n\nexport const hasInlineEndOverflow = (headerBar: HTMLElement): boolean => {\n return Math.ceil(getScrollInlineStart(headerBar)) < headerBar.scrollWidth - headerBar.offsetWidth;\n};\n\nexport const scrollIntoView = (tabHeader: HTMLElement, headerBar: HTMLElement, smooth = true): void => {\n if (!tabHeader || !headerBar) {\n return;\n }\n // Extra left and right margin to always make the focus ring visible\n const margin = 2;\n let updatedLeftScroll = headerBar.scrollLeft;\n\n // Anchor tab to left of scroll parent\n updatedLeftScroll = Math.min(updatedLeftScroll, tabHeader.offsetLeft - margin);\n // Anchor tab to right of scroll parent\n updatedLeftScroll = Math.max(\n updatedLeftScroll,\n tabHeader.offsetLeft + tabHeader.offsetWidth - headerBar.offsetWidth + margin\n );\n if (smooth) {\n smoothScroll(headerBar, updatedLeftScroll);\n } else {\n headerBar.scrollLeft = updatedLeftScroll;\n }\n};\n"]}