@cloudscape-design/components 3.0.360 → 3.0.362

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 (194) hide show
  1. package/annotation-context/annotation/styles.css.js +24 -24
  2. package/annotation-context/annotation/styles.scoped.css +30 -30
  3. package/annotation-context/annotation/styles.selectors.js +24 -24
  4. package/app-layout/index.d.ts.map +1 -1
  5. package/app-layout/index.js +4 -5
  6. package/app-layout/index.js.map +1 -1
  7. package/app-layout/utils/use-content-width.js +1 -1
  8. package/app-layout/utils/use-content-width.js.map +1 -1
  9. package/app-layout/utils/use-observed-element.js +1 -1
  10. package/app-layout/utils/use-observed-element.js.map +1 -1
  11. package/app-layout/visual-refresh/styles.css.js +69 -69
  12. package/app-layout/visual-refresh/styles.scoped.css +169 -169
  13. package/app-layout/visual-refresh/styles.selectors.js +69 -69
  14. package/area-chart/model/use-chart-model.d.ts.map +1 -1
  15. package/area-chart/model/use-chart-model.js +2 -2
  16. package/area-chart/model/use-chart-model.js.map +1 -1
  17. package/area-chart/styles.css.js +6 -6
  18. package/area-chart/styles.scoped.css +10 -10
  19. package/area-chart/styles.selectors.js +6 -6
  20. package/attribute-editor/styles.css.js +14 -14
  21. package/attribute-editor/styles.scoped.css +25 -25
  22. package/attribute-editor/styles.selectors.js +14 -14
  23. package/button-dropdown/category-elements/styles.css.js +13 -13
  24. package/button-dropdown/category-elements/styles.scoped.css +27 -27
  25. package/button-dropdown/category-elements/styles.selectors.js +13 -13
  26. package/button-dropdown/item-element/styles.css.js +15 -15
  27. package/button-dropdown/item-element/styles.scoped.css +19 -19
  28. package/button-dropdown/item-element/styles.selectors.js +15 -15
  29. package/button-dropdown/styles.css.js +14 -14
  30. package/button-dropdown/styles.scoped.css +22 -22
  31. package/button-dropdown/styles.selectors.js +14 -14
  32. package/code-editor/listeners.js +2 -2
  33. package/code-editor/listeners.js.map +1 -1
  34. package/code-editor/resizable-box/index.js +2 -2
  35. package/code-editor/resizable-box/index.js.map +1 -1
  36. package/code-editor/styles.css.js +32 -32
  37. package/code-editor/styles.scoped.css +130 -130
  38. package/code-editor/styles.selectors.js +32 -32
  39. package/collection-preferences/content-display/styles.css.js +11 -11
  40. package/collection-preferences/content-display/styles.scoped.css +18 -18
  41. package/collection-preferences/content-display/styles.selectors.js +11 -11
  42. package/collection-preferences/styles.css.js +37 -37
  43. package/collection-preferences/styles.scoped.css +47 -47
  44. package/collection-preferences/styles.selectors.js +37 -37
  45. package/column-layout/flexible-column-layout/styles.css.js +5 -5
  46. package/column-layout/flexible-column-layout/styles.scoped.css +5 -5
  47. package/column-layout/flexible-column-layout/styles.selectors.js +5 -5
  48. package/column-layout/styles.css.js +13 -13
  49. package/column-layout/styles.scoped.css +46 -46
  50. package/column-layout/styles.selectors.js +13 -13
  51. package/container/styles.css.js +28 -28
  52. package/container/styles.scoped.css +55 -55
  53. package/container/styles.selectors.js +28 -28
  54. package/date-range-picker/styles.css.js +38 -38
  55. package/date-range-picker/styles.scoped.css +47 -47
  56. package/date-range-picker/styles.selectors.js +38 -38
  57. package/expandable-section/styles.css.js +29 -29
  58. package/expandable-section/styles.scoped.css +66 -66
  59. package/expandable-section/styles.selectors.js +29 -29
  60. package/form-field/styles.css.js +19 -19
  61. package/form-field/styles.scoped.css +30 -30
  62. package/form-field/styles.selectors.js +19 -19
  63. package/help-panel/styles.css.js +4 -4
  64. package/help-panel/styles.scoped.css +66 -66
  65. package/help-panel/styles.selectors.js +4 -4
  66. package/internal/base-component/styles.scoped.css +81 -57
  67. package/internal/components/dark-ribbon/index.js +2 -2
  68. package/internal/components/dark-ribbon/index.js.map +1 -1
  69. package/internal/components/dropdown-footer/styles.css.js +3 -3
  70. package/internal/components/dropdown-footer/styles.scoped.css +4 -4
  71. package/internal/components/dropdown-footer/styles.selectors.js +3 -3
  72. package/internal/components/options-list/index.d.ts.map +1 -1
  73. package/internal/components/options-list/index.js +2 -2
  74. package/internal/components/options-list/index.js.map +1 -1
  75. package/internal/components/selectable-item/styles.css.js +16 -16
  76. package/internal/components/selectable-item/styles.scoped.css +31 -31
  77. package/internal/components/selectable-item/styles.selectors.js +16 -16
  78. package/internal/components/token-list/styles.css.js +9 -9
  79. package/internal/components/token-list/styles.scoped.css +22 -22
  80. package/internal/components/token-list/styles.selectors.js +9 -9
  81. package/internal/environment.js +1 -1
  82. package/internal/environment.json +1 -1
  83. package/internal/generated/styles/tokens.js +1 -1
  84. package/internal/generated/theming/index.cjs +25 -23
  85. package/internal/generated/theming/index.js +25 -23
  86. package/internal/hooks/container-queries/index.d.ts +0 -1
  87. package/internal/hooks/container-queries/index.d.ts.map +1 -1
  88. package/internal/hooks/container-queries/index.js +0 -1
  89. package/internal/hooks/container-queries/index.js.map +1 -1
  90. package/internal/hooks/container-queries/use-height-measure.js +1 -1
  91. package/internal/hooks/container-queries/use-height-measure.js.map +1 -1
  92. package/internal/hooks/use-dynamic-overlap/index.js +1 -1
  93. package/internal/hooks/use-dynamic-overlap/index.js.map +1 -1
  94. package/internal/hooks/use-mobile/index.js +1 -1
  95. package/internal/hooks/use-mobile/index.js.map +1 -1
  96. package/internal/hooks/use-mouse-down-target.js +1 -1
  97. package/internal/hooks/use-mouse-down-target.js.map +1 -1
  98. package/internal/hooks/use-mutation-observer/index.d.ts.map +1 -1
  99. package/internal/hooks/use-mutation-observer/index.js +2 -3
  100. package/internal/hooks/use-mutation-observer/index.js.map +1 -1
  101. package/internal/manifest.json +1 -1
  102. package/modal/styles.css.js +23 -23
  103. package/modal/styles.scoped.css +39 -39
  104. package/modal/styles.selectors.js +23 -23
  105. package/package.json +1 -1
  106. package/pie-chart/labels.js +1 -1
  107. package/pie-chart/labels.js.map +1 -1
  108. package/pie-chart/styles.css.js +27 -27
  109. package/pie-chart/styles.scoped.css +43 -43
  110. package/pie-chart/styles.selectors.js +27 -27
  111. package/popover/container.d.ts.map +1 -1
  112. package/popover/container.js +1 -1
  113. package/popover/container.js.map +1 -1
  114. package/property-filter/styles.css.js +29 -29
  115. package/property-filter/styles.scoped.css +33 -33
  116. package/property-filter/styles.selectors.js +29 -29
  117. package/s3-resource-selector/s3-in-context/styles.css.js +7 -7
  118. package/s3-resource-selector/s3-in-context/styles.scoped.css +10 -10
  119. package/s3-resource-selector/s3-in-context/styles.selectors.js +7 -7
  120. package/s3-resource-selector/s3-in-context/use-versions-fetch.d.ts.map +1 -1
  121. package/s3-resource-selector/s3-in-context/use-versions-fetch.js +2 -2
  122. package/s3-resource-selector/s3-in-context/use-versions-fetch.js.map +1 -1
  123. package/s3-resource-selector/s3-modal/basic-table.d.ts.map +1 -1
  124. package/s3-resource-selector/s3-modal/basic-table.js +2 -2
  125. package/s3-resource-selector/s3-modal/basic-table.js.map +1 -1
  126. package/side-navigation/styles.css.js +28 -28
  127. package/side-navigation/styles.scoped.css +43 -43
  128. package/side-navigation/styles.selectors.js +28 -28
  129. package/split-panel/bottom.js +1 -1
  130. package/split-panel/bottom.js.map +1 -1
  131. package/split-panel/styles.css.js +56 -56
  132. package/split-panel/styles.scoped.css +85 -85
  133. package/split-panel/styles.selectors.js +56 -56
  134. package/table/body-cell/click-away.js +2 -2
  135. package/table/body-cell/click-away.js.map +1 -1
  136. package/table/body-cell/styles.css.js +28 -28
  137. package/table/body-cell/styles.scoped.css +76 -76
  138. package/table/body-cell/styles.selectors.js +28 -28
  139. package/table/header-cell/styles.css.js +24 -24
  140. package/table/header-cell/styles.scoped.css +43 -43
  141. package/table/header-cell/styles.selectors.js +24 -24
  142. package/table/resizer/index.js +3 -3
  143. package/table/resizer/index.js.map +1 -1
  144. package/table/sticky-columns/use-sticky-columns.d.ts.map +1 -1
  145. package/table/sticky-columns/use-sticky-columns.js +2 -3
  146. package/table/sticky-columns/use-sticky-columns.js.map +1 -1
  147. package/table/sticky-scrollbar/styles.css.js +6 -6
  148. package/table/sticky-scrollbar/styles.scoped.css +9 -9
  149. package/table/sticky-scrollbar/styles.selectors.js +6 -6
  150. package/table/styles.css.js +34 -34
  151. package/table/styles.scoped.css +42 -42
  152. package/table/styles.selectors.js +34 -34
  153. package/table/use-sticky-header.js +1 -1
  154. package/table/use-sticky-header.js.map +1 -1
  155. package/tabs/styles.css.js +21 -21
  156. package/tabs/styles.scoped.css +46 -46
  157. package/tabs/styles.selectors.js +21 -21
  158. package/tag-editor/index.d.ts.map +1 -1
  159. package/tag-editor/index.js +6 -6
  160. package/tag-editor/index.js.map +1 -1
  161. package/tiles/styles.css.js +29 -29
  162. package/tiles/styles.scoped.css +73 -73
  163. package/tiles/styles.selectors.js +29 -29
  164. package/top-navigation/1.0-beta/styles.css.js +25 -25
  165. package/top-navigation/1.0-beta/styles.scoped.css +43 -43
  166. package/top-navigation/1.0-beta/styles.selectors.js +25 -25
  167. package/top-navigation/styles.css.js +47 -47
  168. package/top-navigation/styles.scoped.css +73 -73
  169. package/top-navigation/styles.selectors.js +47 -47
  170. package/tutorial-panel/components/tutorial-detail-view/styles.css.js +20 -20
  171. package/tutorial-panel/components/tutorial-detail-view/styles.scoped.css +23 -23
  172. package/tutorial-panel/components/tutorial-detail-view/styles.selectors.js +20 -20
  173. package/tutorial-panel/components/tutorial-list/styles.css.js +18 -18
  174. package/tutorial-panel/components/tutorial-list/styles.scoped.css +28 -28
  175. package/tutorial-panel/components/tutorial-list/styles.selectors.js +18 -18
  176. package/wizard/styles.css.js +31 -31
  177. package/wizard/styles.scoped.css +63 -63
  178. package/wizard/styles.selectors.js +31 -31
  179. package/internal/hooks/container-queries/use-resize-observer.d.ts +0 -21
  180. package/internal/hooks/container-queries/use-resize-observer.d.ts.map +0 -1
  181. package/internal/hooks/container-queries/use-resize-observer.js +0 -54
  182. package/internal/hooks/container-queries/use-resize-observer.js.map +0 -1
  183. package/internal/hooks/container-queries/utils.d.ts +0 -4
  184. package/internal/hooks/container-queries/utils.d.ts.map +0 -1
  185. package/internal/hooks/container-queries/utils.js +0 -10
  186. package/internal/hooks/container-queries/utils.js.map +0 -1
  187. package/internal/hooks/use-singleton-handler/index.d.ts +0 -11
  188. package/internal/hooks/use-singleton-handler/index.d.ts.map +0 -1
  189. package/internal/hooks/use-singleton-handler/index.js +0 -45
  190. package/internal/hooks/use-singleton-handler/index.js.map +0 -1
  191. package/internal/hooks/use-stable-event-handler/index.d.ts +0 -10
  192. package/internal/hooks/use-stable-event-handler/index.d.ts.map +0 -1
  193. package/internal/hooks/use-stable-event-handler/index.js +0 -19
  194. package/internal/hooks/use-stable-event-handler/index.js.map +0 -1
package/table/header-cell/styles.scoped.css CHANGED
@@ -90,11 +90,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
90
90
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
91
91
  SPDX-License-Identifier: Apache-2.0
92
92
  */
93
- .awsui_header-cell_1spae_1tyug_93:not(#\9) {
93
+ .awsui_header-cell_1spae_pqz23_93:not(#\9) {
94
94
  position: relative;
95
95
  text-align: left;
96
96
  box-sizing: border-box;
97
- border-bottom: var(--border-divider-section-width-4ax5o2, 2px) solid var(--color-border-divider-default-d3adp9, #e9ebed);
97
+ border-bottom: var(--border-divider-section-width-8a5uu9, 2px) solid var(--color-border-divider-default-et9j7s, #e9ebed);
98
98
  background: var(--color-background-table-header-82ew8p, #ffffff);
99
99
  color: var(--color-text-column-header-czuvwg, #414d5c);
100
100
  font-weight: var(--font-heading-s-weight-02hnau, 700);
@@ -102,19 +102,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
102
102
  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
103
103
  padding: var(--space-scaled-xxs-7597g1, 4px) var(--space-scaled-xs-26e2du, 8px);
104
104
  }
105
- .awsui_header-cell-sticky_1spae_1tyug_105:not(#\9) {
106
- border-bottom: var(--border-table-sticky-width-vc4wb9, 2px) solid var(--color-border-divider-default-d3adp9, #e9ebed);
105
+ .awsui_header-cell-sticky_1spae_pqz23_105:not(#\9) {
106
+ border-bottom: var(--border-table-sticky-width-vc4wb9, 2px) solid var(--color-border-divider-default-et9j7s, #e9ebed);
107
107
  }
108
- .awsui_header-cell-stuck_1spae_1tyug_108:not(#\9):not(.awsui_header-cell-variant-full-page_1spae_1tyug_108) {
108
+ .awsui_header-cell-stuck_1spae_pqz23_108:not(#\9):not(.awsui_header-cell-variant-full-page_1spae_pqz23_108) {
109
109
  border-bottom-color: transparent;
110
110
  }
111
- .awsui_header-cell-variant-full-page_1spae_1tyug_108.awsui_header-cell-hidden_1spae_1tyug_111:not(#\9) {
111
+ .awsui_header-cell-variant-full-page_1spae_pqz23_108.awsui_header-cell-hidden_1spae_pqz23_111:not(#\9) {
112
112
  border-bottom-color: transparent;
113
113
  }
114
- .awsui_header-cell_1spae_1tyug_93:not(#\9):last-child, .awsui_header-cell_1spae_1tyug_93.awsui_header-cell-sortable_1spae_1tyug_114:not(#\9) {
114
+ .awsui_header-cell_1spae_pqz23_93:not(#\9):last-child, .awsui_header-cell_1spae_pqz23_93.awsui_header-cell-sortable_1spae_pqz23_114:not(#\9) {
115
115
  padding-right: var(--space-xs-zb16t3, 8px);
116
116
  }
117
- .awsui_header-cell_1spae_1tyug_93.awsui_sticky-cell_1spae_1tyug_117:not(#\9) {
117
+ .awsui_header-cell_1spae_pqz23_93.awsui_sticky-cell_1spae_pqz23_117:not(#\9) {
118
118
  position: sticky;
119
119
  background: var(--color-background-table-header-82ew8p, #ffffff);
120
120
  z-index: 798;
@@ -122,31 +122,31 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
122
122
  transition-duration: var(--motion-duration-transition-show-quick-osg026, 90ms);
123
123
  transition-timing-function: var(--motion-easing-sticky-56u8cd, cubic-bezier(1, 0, 0.83, 1));
124
124
  }
125
- .awsui_header-cell_1spae_1tyug_93.awsui_sticky-cell-pad-left_1spae_1tyug_125:not(#\9):not(.awsui_has-selection_1spae_1tyug_125) {
125
+ .awsui_header-cell_1spae_pqz23_93.awsui_sticky-cell-pad-left_1spae_pqz23_125:not(#\9):not(.awsui_has-selection_1spae_pqz23_125) {
126
126
  padding-left: var(--space-table-horizontal-8davlm, 20px);
127
127
  }
128
- .awsui_header-cell_1spae_1tyug_93.awsui_sticky-cell-last-left_1spae_1tyug_128:not(#\9) {
128
+ .awsui_header-cell_1spae_pqz23_93.awsui_sticky-cell-last-left_1spae_pqz23_128:not(#\9) {
129
129
  box-shadow: var(--shadow-sticky-column-first-avt88z, 4px 0px 20px 1px rgba(0, 7, 22, 0.1));
130
130
  clip-path: inset(0px -24px 0px 0px);
131
131
  }
132
- .awsui_header-cell_1spae_1tyug_93.awsui_sticky-cell-last-left_1spae_1tyug_128:not(#\9):not(.awsui_header-cell-resizable_1spae_1tyug_132):before {
132
+ .awsui_header-cell_1spae_pqz23_93.awsui_sticky-cell-last-left_1spae_pqz23_128:not(#\9):not(.awsui_header-cell-resizable_1spae_pqz23_132):before {
133
133
  display: none;
134
134
  }
135
- .awsui_header-cell_1spae_1tyug_93.awsui_sticky-cell-last-right_1spae_1tyug_135:not(#\9) {
135
+ .awsui_header-cell_1spae_pqz23_93.awsui_sticky-cell-last-right_1spae_pqz23_135:not(#\9) {
136
136
  box-shadow: var(--shadow-sticky-column-last-9r9bro, -4px 0 20px 1px rgba(0, 28, 36, 0.1));
137
137
  clip-path: inset(0 0 0 -24px);
138
138
  }
139
139
  @media (prefers-reduced-motion: reduce) {
140
- .awsui_header-cell_1spae_1tyug_93.awsui_sticky-cell_1spae_1tyug_117:not(#\9) {
140
+ .awsui_header-cell_1spae_pqz23_93.awsui_sticky-cell_1spae_pqz23_117:not(#\9) {
141
141
  animation: none;
142
142
  transition: none;
143
143
  }
144
144
  }
145
- .awsui-motion-disabled .awsui_header-cell_1spae_1tyug_93.awsui_sticky-cell_1spae_1tyug_117:not(#\9), .awsui-mode-entering .awsui_header-cell_1spae_1tyug_93.awsui_sticky-cell_1spae_1tyug_117:not(#\9) {
145
+ .awsui-motion-disabled .awsui_header-cell_1spae_pqz23_93.awsui_sticky-cell_1spae_pqz23_117:not(#\9), .awsui-mode-entering .awsui_header-cell_1spae_pqz23_93.awsui_sticky-cell_1spae_pqz23_117:not(#\9) {
146
146
  animation: none;
147
147
  transition: none;
148
148
  }
149
- .awsui_header-cell_1spae_1tyug_93:not(#\9):not(:last-child):before {
149
+ .awsui_header-cell_1spae_pqz23_93:not(#\9):not(:last-child):before {
150
150
  content: "";
151
151
  position: absolute;
152
152
  right: 0;
@@ -155,14 +155,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
155
155
  min-height: var(--font-heading-xs-line-height-gyxcvc, 18px);
156
156
  max-height: calc(100% - calc(2 * var(--space-xs-zb16t3, 8px) + var(--space-xxxs-zbmxqb, 2px)));
157
157
  margin: auto;
158
- border-left: var(--border-divider-section-width-4ax5o2, 2px) solid var(--color-border-divider-default-d3adp9, #e9ebed);
158
+ border-left: var(--border-divider-section-width-8a5uu9, 2px) solid var(--color-border-divider-default-et9j7s, #e9ebed);
159
159
  box-sizing: border-box;
160
160
  }
161
- .awsui_header-cell-resizable_1spae_1tyug_132:not(#\9):not(:last-child):before {
161
+ .awsui_header-cell-resizable_1spae_pqz23_132:not(#\9):not(:last-child):before {
162
162
  border-left-color: var(--color-border-divider-interactive-default-byy830, #7d8998);
163
163
  }
164
164
 
165
- .awsui_sorting-icon_1spae_1tyug_165:not(#\9) {
165
+ .awsui_sorting-icon_1spae_pqz23_165:not(#\9) {
166
166
  position: absolute;
167
167
  top: 50%;
168
168
  transform: translateY(-50%);
@@ -170,31 +170,31 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
170
170
  color: var(--color-text-column-sorting-icon-8or30j, #414d5c);
171
171
  }
172
172
 
173
- .awsui_edit-icon_1spae_1tyug_173:not(#\9) {
173
+ .awsui_edit-icon_1spae_pqz23_173:not(#\9) {
174
174
  margin-left: var(--space-xxs-p8yyaw, 4px);
175
175
  margin-top: var(--space-scaled-xxs-7597g1, 4px);
176
176
  color: inherit;
177
177
  }
178
178
 
179
- .awsui_header-cell-content_1spae_1tyug_179:not(#\9) {
179
+ .awsui_header-cell-content_1spae_pqz23_179:not(#\9) {
180
180
  position: relative;
181
181
  padding: var(--space-scaled-xxs-7597g1, 4px) var(--space-s-34lx8l, 12px);
182
182
  }
183
- .awsui_header-cell-sortable_1spae_1tyug_114 > .awsui_header-cell-content_1spae_1tyug_179:not(#\9) {
183
+ .awsui_header-cell-sortable_1spae_pqz23_114 > .awsui_header-cell-content_1spae_pqz23_179:not(#\9) {
184
184
  padding-right: calc(var(--space-xl-lmui9r, 24px) + var(--space-xxs-p8yyaw, 4px));
185
185
  }
186
- .awsui_header-cell-content_1spae_1tyug_179:not(#\9):focus {
186
+ .awsui_header-cell-content_1spae_pqz23_179:not(#\9):focus {
187
187
  outline: none;
188
188
  text-decoration: none;
189
189
  }
190
- body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1tyug_179:not(#\9):focus {
190
+ body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_pqz23_179:not(#\9):focus {
191
191
  position: relative;
192
192
  }
193
- body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1tyug_179:not(#\9):focus {
193
+ body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_pqz23_179:not(#\9):focus {
194
194
  outline: 2px dotted transparent;
195
195
  outline-offset: calc(var(--space-table-header-focus-outline-gutter-7js4en, 0px) - 1px);
196
196
  }
197
- body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1tyug_179:not(#\9):focus::before {
197
+ body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_pqz23_179:not(#\9):focus::before {
198
198
  content: " ";
199
199
  display: block;
200
200
  position: absolute;
@@ -205,14 +205,14 @@ body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1tyug_179:n
205
205
  border-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
206
206
  box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
207
207
  }
208
- body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1tyug_179.awsui_header-cell-fake-focus_1spae_1tyug_208:not(#\9) {
208
+ body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_pqz23_179.awsui_header-cell-fake-focus_1spae_pqz23_208:not(#\9) {
209
209
  position: relative;
210
210
  }
211
- body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1tyug_179.awsui_header-cell-fake-focus_1spae_1tyug_208:not(#\9) {
211
+ body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_pqz23_179.awsui_header-cell-fake-focus_1spae_pqz23_208:not(#\9) {
212
212
  outline: 2px dotted transparent;
213
213
  outline-offset: calc(var(--space-table-header-focus-outline-gutter-7js4en, 0px) - 1px);
214
214
  }
215
- body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1tyug_179.awsui_header-cell-fake-focus_1spae_1tyug_208:not(#\9)::before {
215
+ body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_pqz23_179.awsui_header-cell-fake-focus_1spae_pqz23_208:not(#\9)::before {
216
216
  content: " ";
217
217
  display: block;
218
218
  position: absolute;
@@ -223,33 +223,33 @@ body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1tyug_179.a
223
223
  border-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
224
224
  box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
225
225
  }
226
- .awsui_header-cell-disabled_1spae_1tyug_226.awsui_header-cell-sorted_1spae_1tyug_226 > .awsui_header-cell-content_1spae_1tyug_179 > .awsui_sorting-icon_1spae_1tyug_165:not(#\9) {
226
+ .awsui_header-cell-disabled_1spae_pqz23_226.awsui_header-cell-sorted_1spae_pqz23_226 > .awsui_header-cell-content_1spae_pqz23_179 > .awsui_sorting-icon_1spae_pqz23_165:not(#\9) {
227
227
  color: var(--color-text-interactive-disabled-z7a3t4, #9ba7b6);
228
228
  }
229
229
 
230
- .awsui_header-cell-sortable_1spae_1tyug_114:not(#\9):not(.awsui_header-cell-disabled_1spae_1tyug_226) > .awsui_header-cell-content_1spae_1tyug_179 {
230
+ .awsui_header-cell-sortable_1spae_pqz23_114:not(#\9):not(.awsui_header-cell-disabled_1spae_pqz23_226) > .awsui_header-cell-content_1spae_pqz23_179 {
231
231
  cursor: pointer;
232
232
  }
233
- .awsui_header-cell-sortable_1spae_1tyug_114:not(#\9):not(.awsui_header-cell-disabled_1spae_1tyug_226) > .awsui_header-cell-content_1spae_1tyug_179:hover, .awsui_header-cell-sortable_1spae_1tyug_114:not(#\9):not(.awsui_header-cell-disabled_1spae_1tyug_226).awsui_header-cell-sorted_1spae_1tyug_226 > .awsui_header-cell-content_1spae_1tyug_179 {
233
+ .awsui_header-cell-sortable_1spae_pqz23_114:not(#\9):not(.awsui_header-cell-disabled_1spae_pqz23_226) > .awsui_header-cell-content_1spae_pqz23_179:hover, .awsui_header-cell-sortable_1spae_pqz23_114:not(#\9):not(.awsui_header-cell-disabled_1spae_pqz23_226).awsui_header-cell-sorted_1spae_pqz23_226 > .awsui_header-cell-content_1spae_pqz23_179 {
234
234
  color: var(--color-text-interactive-active-ox3ozh, #000716);
235
235
  }
236
- .awsui_header-cell-sortable_1spae_1tyug_114:not(#\9):not(.awsui_header-cell-disabled_1spae_1tyug_226) > .awsui_header-cell-content_1spae_1tyug_179:hover > .awsui_sorting-icon_1spae_1tyug_165, .awsui_header-cell-sortable_1spae_1tyug_114:not(#\9):not(.awsui_header-cell-disabled_1spae_1tyug_226).awsui_header-cell-sorted_1spae_1tyug_226 > .awsui_header-cell-content_1spae_1tyug_179 > .awsui_sorting-icon_1spae_1tyug_165 {
236
+ .awsui_header-cell-sortable_1spae_pqz23_114:not(#\9):not(.awsui_header-cell-disabled_1spae_pqz23_226) > .awsui_header-cell-content_1spae_pqz23_179:hover > .awsui_sorting-icon_1spae_pqz23_165, .awsui_header-cell-sortable_1spae_pqz23_114:not(#\9):not(.awsui_header-cell-disabled_1spae_pqz23_226).awsui_header-cell-sorted_1spae_pqz23_226 > .awsui_header-cell-content_1spae_pqz23_179 > .awsui_sorting-icon_1spae_pqz23_165 {
237
237
  color: var(--color-text-interactive-active-ox3ozh, #000716);
238
238
  }
239
239
 
240
- .awsui_header-cell-text_1spae_1tyug_240:not(#\9) {
240
+ .awsui_header-cell-text_1spae_pqz23_240:not(#\9) {
241
241
  line-height: var(--font-heading-xs-line-height-gyxcvc, 18px);
242
242
  padding-top: calc(var(--space-xxxs-zbmxqb, 2px) / 2);
243
243
  padding-bottom: calc(var(--space-xxxs-zbmxqb, 2px) / 2);
244
244
  }
245
- .awsui_header-cell-text_1spae_1tyug_240:not(#\9):not(.awsui_header-cell-text-wrap_1spae_1tyug_245) {
245
+ .awsui_header-cell-text_1spae_pqz23_240:not(#\9):not(.awsui_header-cell-text-wrap_1spae_pqz23_245) {
246
246
  white-space: nowrap;
247
247
  overflow: hidden;
248
248
  text-overflow: ellipsis;
249
249
  }
250
250
 
251
- .awsui_header-cell-ascending_1spae_1tyug_251:not(#\9),
252
- .awsui_header-cell-descending_1spae_1tyug_252:not(#\9) {
251
+ .awsui_header-cell-ascending_1spae_pqz23_251:not(#\9),
252
+ .awsui_header-cell-descending_1spae_pqz23_252:not(#\9) {
253
253
  /* used in test-utils */
254
254
  }
255
255
 
@@ -259,29 +259,29 @@ with the left edge of the table as closely as possible. If the
259
259
  last header cell is sortable the sort icon should align with the
260
260
  settings icon in the pagination slot.
261
261
  */
262
- .awsui_header-cell_1spae_1tyug_93:not(#\9):not(.awsui_is-visual-refresh_1spae_1tyug_262):first-child {
262
+ .awsui_header-cell_1spae_pqz23_93:not(#\9):not(.awsui_is-visual-refresh_1spae_pqz23_262):first-child {
263
263
  padding-left: var(--space-xs-zb16t3, 8px);
264
264
  }
265
265
 
266
- .awsui_header-cell_1spae_1tyug_93.awsui_is-visual-refresh_1spae_1tyug_262:not(#\9) {
266
+ .awsui_header-cell_1spae_pqz23_93.awsui_is-visual-refresh_1spae_pqz23_262:not(#\9) {
267
267
  /*
268
268
  Striped rows requires additional left padding because the
269
269
  shaded background makes the child content appear too close
270
270
  to the table edge.
271
271
  */
272
272
  }
273
- .awsui_header-cell_1spae_1tyug_93.awsui_is-visual-refresh_1spae_1tyug_262:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_1tyug_273) {
273
+ .awsui_header-cell_1spae_pqz23_93.awsui_is-visual-refresh_1spae_pqz23_262:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_pqz23_273) {
274
274
  padding-left: var(--space-xxxs-zbmxqb, 2px);
275
275
  }
276
- .awsui_header-cell_1spae_1tyug_93.awsui_is-visual-refresh_1spae_1tyug_262:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_1tyug_273).awsui_sticky-cell-pad-left_1spae_1tyug_125 {
276
+ .awsui_header-cell_1spae_pqz23_93.awsui_is-visual-refresh_1spae_pqz23_262:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_pqz23_273).awsui_sticky-cell-pad-left_1spae_pqz23_125 {
277
277
  padding-left: var(--space-table-horizontal-8davlm, 20px);
278
278
  }
279
- .awsui_header-cell_1spae_1tyug_93.awsui_is-visual-refresh_1spae_1tyug_262:not(#\9):first-child.awsui_has-striped-rows_1spae_1tyug_273 {
279
+ .awsui_header-cell_1spae_pqz23_93.awsui_is-visual-refresh_1spae_pqz23_262:not(#\9):first-child.awsui_has-striped-rows_1spae_pqz23_273 {
280
280
  padding-left: var(--space-xxs-p8yyaw, 4px);
281
281
  }
282
- .awsui_header-cell_1spae_1tyug_93.awsui_is-visual-refresh_1spae_1tyug_262:not(#\9):first-child > .awsui_header-cell-content_1spae_1tyug_179 {
282
+ .awsui_header-cell_1spae_pqz23_93.awsui_is-visual-refresh_1spae_pqz23_262:not(#\9):first-child > .awsui_header-cell-content_1spae_pqz23_179 {
283
283
  padding-left: 0;
284
284
  }
285
- .awsui_header-cell_1spae_1tyug_93.awsui_is-visual-refresh_1spae_1tyug_262:not(#\9):last-child.awsui_header-cell-sortable_1spae_1tyug_114 {
285
+ .awsui_header-cell_1spae_pqz23_93.awsui_is-visual-refresh_1spae_pqz23_262:not(#\9):last-child.awsui_header-cell-sortable_1spae_pqz23_114 {
286
286
  padding-right: var(--space-xxxs-zbmxqb, 2px);
287
287
  }
package/table/header-cell/styles.selectors.js CHANGED
@@ -2,29 +2,29 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "header-cell": "awsui_header-cell_1spae_1tyug_93",
6
- "header-cell-sticky": "awsui_header-cell-sticky_1spae_1tyug_105",
7
- "header-cell-stuck": "awsui_header-cell-stuck_1spae_1tyug_108",
8
- "header-cell-variant-full-page": "awsui_header-cell-variant-full-page_1spae_1tyug_108",
9
- "header-cell-hidden": "awsui_header-cell-hidden_1spae_1tyug_111",
10
- "header-cell-sortable": "awsui_header-cell-sortable_1spae_1tyug_114",
11
- "sticky-cell": "awsui_sticky-cell_1spae_1tyug_117",
12
- "sticky-cell-pad-left": "awsui_sticky-cell-pad-left_1spae_1tyug_125",
13
- "has-selection": "awsui_has-selection_1spae_1tyug_125",
14
- "sticky-cell-last-left": "awsui_sticky-cell-last-left_1spae_1tyug_128",
15
- "header-cell-resizable": "awsui_header-cell-resizable_1spae_1tyug_132",
16
- "sticky-cell-last-right": "awsui_sticky-cell-last-right_1spae_1tyug_135",
17
- "sorting-icon": "awsui_sorting-icon_1spae_1tyug_165",
18
- "edit-icon": "awsui_edit-icon_1spae_1tyug_173",
19
- "header-cell-content": "awsui_header-cell-content_1spae_1tyug_179",
20
- "header-cell-fake-focus": "awsui_header-cell-fake-focus_1spae_1tyug_208",
21
- "header-cell-disabled": "awsui_header-cell-disabled_1spae_1tyug_226",
22
- "header-cell-sorted": "awsui_header-cell-sorted_1spae_1tyug_226",
23
- "header-cell-text": "awsui_header-cell-text_1spae_1tyug_240",
24
- "header-cell-text-wrap": "awsui_header-cell-text-wrap_1spae_1tyug_245",
25
- "header-cell-ascending": "awsui_header-cell-ascending_1spae_1tyug_251",
26
- "header-cell-descending": "awsui_header-cell-descending_1spae_1tyug_252",
27
- "is-visual-refresh": "awsui_is-visual-refresh_1spae_1tyug_262",
28
- "has-striped-rows": "awsui_has-striped-rows_1spae_1tyug_273"
5
+ "header-cell": "awsui_header-cell_1spae_pqz23_93",
6
+ "header-cell-sticky": "awsui_header-cell-sticky_1spae_pqz23_105",
7
+ "header-cell-stuck": "awsui_header-cell-stuck_1spae_pqz23_108",
8
+ "header-cell-variant-full-page": "awsui_header-cell-variant-full-page_1spae_pqz23_108",
9
+ "header-cell-hidden": "awsui_header-cell-hidden_1spae_pqz23_111",
10
+ "header-cell-sortable": "awsui_header-cell-sortable_1spae_pqz23_114",
11
+ "sticky-cell": "awsui_sticky-cell_1spae_pqz23_117",
12
+ "sticky-cell-pad-left": "awsui_sticky-cell-pad-left_1spae_pqz23_125",
13
+ "has-selection": "awsui_has-selection_1spae_pqz23_125",
14
+ "sticky-cell-last-left": "awsui_sticky-cell-last-left_1spae_pqz23_128",
15
+ "header-cell-resizable": "awsui_header-cell-resizable_1spae_pqz23_132",
16
+ "sticky-cell-last-right": "awsui_sticky-cell-last-right_1spae_pqz23_135",
17
+ "sorting-icon": "awsui_sorting-icon_1spae_pqz23_165",
18
+ "edit-icon": "awsui_edit-icon_1spae_pqz23_173",
19
+ "header-cell-content": "awsui_header-cell-content_1spae_pqz23_179",
20
+ "header-cell-fake-focus": "awsui_header-cell-fake-focus_1spae_pqz23_208",
21
+ "header-cell-disabled": "awsui_header-cell-disabled_1spae_pqz23_226",
22
+ "header-cell-sorted": "awsui_header-cell-sorted_1spae_pqz23_226",
23
+ "header-cell-text": "awsui_header-cell-text_1spae_pqz23_240",
24
+ "header-cell-text-wrap": "awsui_header-cell-text-wrap_1spae_pqz23_245",
25
+ "header-cell-ascending": "awsui_header-cell-ascending_1spae_pqz23_251",
26
+ "header-cell-descending": "awsui_header-cell-descending_1spae_pqz23_252",
27
+ "is-visual-refresh": "awsui_is-visual-refresh_1spae_pqz23_262",
28
+ "has-striped-rows": "awsui_has-striped-rows_1spae_pqz23_273"
29
29
  };
30
30
 
package/table/resizer/index.js CHANGED
@@ -2,13 +2,13 @@
2
2
  // SPDX-License-Identifier: Apache-2.0
3
3
  import clsx from 'clsx';
4
4
  import React, { useEffect, useRef, useState } from 'react';
5
- import { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';
6
5
  import { getOverflowParents } from '../../internal/utils/scrollable-containers';
7
6
  import { findUpUntil } from '../../internal/utils/dom';
8
7
  import tableStyles from '../styles.css.js';
9
8
  import styles from './styles.css.js';
10
9
  import { KeyCode } from '../../internal/keycode';
11
10
  import { DEFAULT_COLUMN_WIDTH } from '../use-column-widths';
11
+ import { useStableCallback } from '@cloudscape-design/component-toolkit/internal';
12
12
  const AUTO_GROW_START_TIME = 10;
13
13
  const AUTO_GROW_INTERVAL = 10;
14
14
  const AUTO_GROW_INCREMENT = 5;
@@ -16,8 +16,8 @@ export function Resizer({ onDragMove, onFinish, ariaLabelledby, minWidth = DEFAU
16
16
  const [isDragging, setIsDragging] = useState(false);
17
17
  const [headerCell, setHeaderCell] = useState();
18
18
  const autoGrowTimeout = useRef();
19
- const onFinishStable = useStableEventHandler(onFinish);
20
- const onDragStable = useStableEventHandler(onDragMove);
19
+ const onFinishStable = useStableCallback(onFinish);
20
+ const onDragStable = useStableCallback(onDragMove);
21
21
  const [resizerHasFocus, setResizerHasFocus] = useState(false);
22
22
  const [headerCellWidth, setHeaderCellWidth] = useState(0);
23
23
  useEffect(() => {
package/table/resizer/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["table/resizer/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAc5D,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAChC,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAC9B,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B,MAAM,UAAU,OAAO,CAAC,EACtB,UAAU,EACV,QAAQ,EACR,cAAc,EACd,QAAQ,GAAG,oBAAoB,EAC/B,QAAQ,EACR,aAAa,EACb,OAAO,EACP,MAAM,GACO;IACb,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,EAAe,CAAC;IAC5D,MAAM,eAAe,GAAG,MAAM,EAA6C,CAAC;IAC5E,MAAM,cAAc,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IACvD,MAAM,YAAY,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;IACvD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE1D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,CAAC,UAAU,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,EAAE;YACpD,OAAO;SACR;QACD,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAE,CAAC;QAC1G,MAAM,YAAY,GAAG,WAAW,CAAC,aAAa,CAAc,OAAO,CAAE,CAAC;QACtE,kEAAkE;QAClE,MAAM,OAAO,GAAG,WAAW,CAAC,aAAa,CAAc,IAAI,MAAM,CAAC,OAAO,EAAE,CAAE,CAAC;QAC9E,MAAM,YAAY,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QACvD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,YAAY,CAAC,qBAAqB,EAAE,CAAC;QAElF,MAAM,qBAAqB,GAAG,CAAC,SAAiB,EAAE,EAAE;YAClD,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,GAAG,YAAY,CAAC,qBAAqB,EAAE,CAAC;YACxE,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,UAAU,CAAC,qBAAqB,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC;YACrE,4CAA4C;YAC5C,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,SAAS,GAAG,gBAAgB,GAAG,CAAC,GAAG,IAAI,CAAC;QAC/D,CAAC,CAAC;QAEF,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;YAC7C,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,qBAAqB,EAAE,CAAC;YAC5D,MAAM,YAAY,GAAG,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;YAC/D,qBAAqB,CAAC,KAAK,GAAG,YAAY,GAAG,KAAK,CAAC,CAAC;YACpD,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,0FAA0F;YAC1F,YAAY,CAAC,QAAQ,CAAC,CAAC;QACzB,CAAC,CAAC;QAEF,MAAM,YAAY,GAAG,CAAC,MAAc,EAAE,EAAE;YACtC,IAAI,MAAM,GAAG,QAAQ,EAAE;gBACrB,MAAM,QAAQ,GAAG,UAAU,CAAC,qBAAqB,EAAE,CAAC,IAAI,CAAC;gBACzD,MAAM,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;gBACnC,0FAA0F;gBAC1F,iBAAiB,CAAC,QAAQ,CAAC,CAAC;aAC7B;QACH,CAAC,CAAC;QAEF,MAAM,UAAU,GAAG,GAAG,EAAE;YACtB,MAAM,KAAK,GAAG,UAAU,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YACvD,eAAe,CAAC,OAAO,GAAG,UAAU,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC;YACrE,0FAA0F;YAC1F,iBAAiB,CAAC,KAAK,GAAG,mBAAmB,CAAC,CAAC;YAC/C,YAAY,CAAC,UAAU,IAAI,mBAAmB,CAAC;QACjD,CAAC,CAAC;QACF,MAAM,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YACxC,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;YACtC,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC;YAC3B,IAAI,MAAM,GAAG,SAAS,EAAE;gBACtB,eAAe,CAAC,OAAO,GAAG,UAAU,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAC;aACxE;iBAAM;gBACL,YAAY,CAAC,MAAM,CAAC,CAAC;aACtB;QACH,CAAC,CAAC;QACF,MAAM,SAAS,GAAG,CAAC,KAAiB,EAAE,EAAE;YACtC,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC1B,aAAa,CAAC,KAAK,CAAC,CAAC;YACrB,cAAc,EAAE,CAAC;YACjB,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QACxC,CAAC,CAAC;QACF,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAE,EAAE;YACzC,mCAAmC;YACnC,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,KAAK,EAAE;gBACrE,KAAK,CAAC,cAAc,EAAE,CAAC;aACxB;YACD,eAAe;YACf,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,EAAE;gBAClC,iBAAiB,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC;aAClE;YACD,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,KAAK,EAAE;gBACnC,iBAAiB,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC;aAClE;QACH,CAAC,CAAC;QAEF,qBAAqB,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC;QAChE,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;QACrD,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,CAAC;QACnE,IAAI,UAAU,EAAE;YACd,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACpD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;SACjD;QACD,IAAI,eAAe,EAAE;YACnB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,CAAC;YAChE,UAAU,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;SACnD;QAED,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;YACtC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;YACxD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACvD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YACnD,UAAU,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtF,OAAO,CACL,8BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd,UAAU,IAAI,MAAM,CAAC,gBAAgB,CAAC,EACtC,CAAC,eAAe,IAAI,aAAa,CAAC,IAAI,MAAM,CAAC,WAAW,CAAC,CAC1D,EACD,WAAW,EAAE,KAAK,CAAC,EAAE;YACnB,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;gBACtB,OAAO;aACR;YACD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,UAAU,GAAG,WAAW,CAAC,KAAK,CAAC,aAAa,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,IAAI,CAAE,CAAC;YACxG,aAAa,CAAC,IAAI,CAAC,CAAC;YACpB,aAAa,CAAC,UAAU,CAAC,CAAC;QAC5B,CAAC,EACD,OAAO,EAAE,KAAK,CAAC,EAAE;YACf,MAAM,UAAU,GAAG,WAAW,CAAC,KAAK,CAAC,aAAa,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,IAAI,CAAE,CAAC;YACxG,kBAAkB,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC;YAC7D,kBAAkB,CAAC,IAAI,CAAC,CAAC;YACzB,aAAa,CAAC,UAAU,CAAC,CAAC;YAC1B,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;QACd,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;YACX,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC1B,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,CAAC;QACb,CAAC,EACD,IAAI,EAAC,WAAW,sBACC,UAAU,qBACV,cAAc,mBAChB,eAAe,oBAEd,eAAe,CAAC,QAAQ,EAAE,mBAC3B,QAAQ,EACvB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa;IAC3B,OAAO,8BAAM,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI,CAAC;AAC7C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';\nimport { getOverflowParents } from '../../internal/utils/scrollable-containers';\nimport { findUpUntil } from '../../internal/utils/dom';\nimport tableStyles from '../styles.css.js';\nimport styles from './styles.css.js';\nimport { KeyCode } from '../../internal/keycode';\nimport { DEFAULT_COLUMN_WIDTH } from '../use-column-widths';\n\ninterface ResizerProps {\n onDragMove: (newWidth: number) => void;\n onFinish: () => void;\n ariaLabelledby?: string;\n minWidth?: number;\n tabIndex?: number;\n\n showFocusRing?: boolean;\n onFocus?: () => void;\n onBlur?: () => void;\n}\n\nconst AUTO_GROW_START_TIME = 10;\nconst AUTO_GROW_INTERVAL = 10;\nconst AUTO_GROW_INCREMENT = 5;\n\nexport function Resizer({\n onDragMove,\n onFinish,\n ariaLabelledby,\n minWidth = DEFAULT_COLUMN_WIDTH,\n tabIndex,\n showFocusRing,\n onFocus,\n onBlur,\n}: ResizerProps) {\n const [isDragging, setIsDragging] = useState(false);\n const [headerCell, setHeaderCell] = useState<HTMLElement>();\n const autoGrowTimeout = useRef<ReturnType<typeof setTimeout> | undefined>();\n const onFinishStable = useStableEventHandler(onFinish);\n const onDragStable = useStableEventHandler(onDragMove);\n const [resizerHasFocus, setResizerHasFocus] = useState(false);\n const [headerCellWidth, setHeaderCellWidth] = useState(0);\n\n useEffect(() => {\n if ((!isDragging && !resizerHasFocus) || !headerCell) {\n return;\n }\n const rootElement = findUpUntil(headerCell, element => element.className.indexOf(tableStyles.root) > -1)!;\n const tableElement = rootElement.querySelector<HTMLElement>(`table`)!;\n // tracker is rendered inside table wrapper to align with its size\n const tracker = rootElement.querySelector<HTMLElement>(`.${styles.tracker}`)!;\n const scrollParent = getOverflowParents(headerCell)[0];\n const { left: leftEdge, right: rightEdge } = scrollParent.getBoundingClientRect();\n\n const updateTrackerPosition = (newOffset: number) => {\n const { left: scrollParentLeft } = tableElement.getBoundingClientRect();\n tracker.style.top = headerCell.getBoundingClientRect().height + 'px';\n // minus one pixel to offset the cell border\n tracker.style.left = newOffset - scrollParentLeft - 1 + 'px';\n };\n\n const updateColumnWidth = (newWidth: number) => {\n const { right, width } = headerCell.getBoundingClientRect();\n const updatedWidth = newWidth < minWidth ? minWidth : newWidth;\n updateTrackerPosition(right + updatedWidth - width);\n setHeaderCellWidth(newWidth);\n // callbacks must be the last calls in the handler, because they may cause an extra update\n onDragStable(newWidth);\n };\n\n const resizeColumn = (offset: number) => {\n if (offset > leftEdge) {\n const cellLeft = headerCell.getBoundingClientRect().left;\n const newWidth = offset - cellLeft;\n // callbacks must be the last calls in the handler, because they may cause an extra update\n updateColumnWidth(newWidth);\n }\n };\n\n const onAutoGrow = () => {\n const width = headerCell.getBoundingClientRect().width;\n autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_INTERVAL);\n // callbacks must be the last calls in the handler, because they may cause an extra update\n updateColumnWidth(width + AUTO_GROW_INCREMENT);\n scrollParent.scrollLeft += AUTO_GROW_INCREMENT;\n };\n const onMouseMove = (event: MouseEvent) => {\n clearTimeout(autoGrowTimeout.current);\n const offset = event.pageX;\n if (offset > rightEdge) {\n autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_START_TIME);\n } else {\n resizeColumn(offset);\n }\n };\n const onMouseUp = (event: MouseEvent) => {\n resizeColumn(event.pageX);\n setIsDragging(false);\n onFinishStable();\n clearTimeout(autoGrowTimeout.current);\n };\n const onKeyDown = (event: KeyboardEvent) => {\n // prevent screenreader cursor move\n if (event.keyCode === KeyCode.left || event.keyCode === KeyCode.right) {\n event.preventDefault();\n }\n // update width\n if (event.keyCode === KeyCode.left) {\n updateColumnWidth(headerCell.getBoundingClientRect().width - 10);\n }\n if (event.keyCode === KeyCode.right) {\n updateColumnWidth(headerCell.getBoundingClientRect().width + 10);\n }\n };\n\n updateTrackerPosition(headerCell.getBoundingClientRect().right);\n document.body.classList.add(styles['resize-active']);\n document.body.classList.remove(styles['resize-active-with-focus']);\n if (isDragging) {\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n }\n if (resizerHasFocus) {\n document.body.classList.add(styles['resize-active-with-focus']);\n headerCell.addEventListener('keydown', onKeyDown);\n }\n\n return () => {\n clearTimeout(autoGrowTimeout.current);\n document.body.classList.remove(styles['resize-active']);\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n headerCell.removeEventListener('keydown', onKeyDown);\n };\n }, [headerCell, isDragging, onDragStable, onFinishStable, resizerHasFocus, minWidth]);\n return (\n <span\n className={clsx(\n styles.resizer,\n isDragging && styles['resizer-active'],\n (resizerHasFocus || showFocusRing) && styles['has-focus']\n )}\n onMouseDown={event => {\n if (event.button !== 0) {\n return;\n }\n event.preventDefault();\n const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th')!;\n setIsDragging(true);\n setHeaderCell(headerCell);\n }}\n onFocus={event => {\n const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th')!;\n setHeaderCellWidth(headerCell.getBoundingClientRect().width);\n setResizerHasFocus(true);\n setHeaderCell(headerCell);\n onFocus?.();\n }}\n onBlur={() => {\n setResizerHasFocus(false);\n onBlur?.();\n }}\n role=\"separator\"\n aria-orientation=\"vertical\"\n aria-labelledby={ariaLabelledby}\n aria-valuenow={headerCellWidth}\n // aria-valuetext is needed because the VO announces \"collapsed\" when only aria-valuenow set without aria-valuemax\n aria-valuetext={headerCellWidth.toString()}\n aria-valuemin={minWidth}\n tabIndex={tabIndex}\n />\n );\n}\n\nexport function ResizeTracker() {\n return <span className={styles.tracker} />;\n}\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["table/resizer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { getOverflowParents } from '../../internal/utils/scrollable-containers';\nimport { findUpUntil } from '../../internal/utils/dom';\nimport tableStyles from '../styles.css.js';\nimport styles from './styles.css.js';\nimport { KeyCode } from '../../internal/keycode';\nimport { DEFAULT_COLUMN_WIDTH } from '../use-column-widths';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\ninterface ResizerProps {\n onDragMove: (newWidth: number) => void;\n onFinish: () => void;\n ariaLabelledby?: string;\n minWidth?: number;\n tabIndex?: number;\n\n showFocusRing?: boolean;\n onFocus?: () => void;\n onBlur?: () => void;\n}\n\nconst AUTO_GROW_START_TIME = 10;\nconst AUTO_GROW_INTERVAL = 10;\nconst AUTO_GROW_INCREMENT = 5;\n\nexport function Resizer({\n onDragMove,\n onFinish,\n ariaLabelledby,\n minWidth = DEFAULT_COLUMN_WIDTH,\n tabIndex,\n showFocusRing,\n onFocus,\n onBlur,\n}: ResizerProps) {\n const [isDragging, setIsDragging] = useState(false);\n const [headerCell, setHeaderCell] = useState<HTMLElement>();\n const autoGrowTimeout = useRef<ReturnType<typeof setTimeout> | undefined>();\n const onFinishStable = useStableCallback(onFinish);\n const onDragStable = useStableCallback(onDragMove);\n const [resizerHasFocus, setResizerHasFocus] = useState(false);\n const [headerCellWidth, setHeaderCellWidth] = useState(0);\n\n useEffect(() => {\n if ((!isDragging && !resizerHasFocus) || !headerCell) {\n return;\n }\n const rootElement = findUpUntil(headerCell, element => element.className.indexOf(tableStyles.root) > -1)!;\n const tableElement = rootElement.querySelector<HTMLElement>(`table`)!;\n // tracker is rendered inside table wrapper to align with its size\n const tracker = rootElement.querySelector<HTMLElement>(`.${styles.tracker}`)!;\n const scrollParent = getOverflowParents(headerCell)[0];\n const { left: leftEdge, right: rightEdge } = scrollParent.getBoundingClientRect();\n\n const updateTrackerPosition = (newOffset: number) => {\n const { left: scrollParentLeft } = tableElement.getBoundingClientRect();\n tracker.style.top = headerCell.getBoundingClientRect().height + 'px';\n // minus one pixel to offset the cell border\n tracker.style.left = newOffset - scrollParentLeft - 1 + 'px';\n };\n\n const updateColumnWidth = (newWidth: number) => {\n const { right, width } = headerCell.getBoundingClientRect();\n const updatedWidth = newWidth < minWidth ? minWidth : newWidth;\n updateTrackerPosition(right + updatedWidth - width);\n setHeaderCellWidth(newWidth);\n // callbacks must be the last calls in the handler, because they may cause an extra update\n onDragStable(newWidth);\n };\n\n const resizeColumn = (offset: number) => {\n if (offset > leftEdge) {\n const cellLeft = headerCell.getBoundingClientRect().left;\n const newWidth = offset - cellLeft;\n // callbacks must be the last calls in the handler, because they may cause an extra update\n updateColumnWidth(newWidth);\n }\n };\n\n const onAutoGrow = () => {\n const width = headerCell.getBoundingClientRect().width;\n autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_INTERVAL);\n // callbacks must be the last calls in the handler, because they may cause an extra update\n updateColumnWidth(width + AUTO_GROW_INCREMENT);\n scrollParent.scrollLeft += AUTO_GROW_INCREMENT;\n };\n const onMouseMove = (event: MouseEvent) => {\n clearTimeout(autoGrowTimeout.current);\n const offset = event.pageX;\n if (offset > rightEdge) {\n autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_START_TIME);\n } else {\n resizeColumn(offset);\n }\n };\n const onMouseUp = (event: MouseEvent) => {\n resizeColumn(event.pageX);\n setIsDragging(false);\n onFinishStable();\n clearTimeout(autoGrowTimeout.current);\n };\n const onKeyDown = (event: KeyboardEvent) => {\n // prevent screenreader cursor move\n if (event.keyCode === KeyCode.left || event.keyCode === KeyCode.right) {\n event.preventDefault();\n }\n // update width\n if (event.keyCode === KeyCode.left) {\n updateColumnWidth(headerCell.getBoundingClientRect().width - 10);\n }\n if (event.keyCode === KeyCode.right) {\n updateColumnWidth(headerCell.getBoundingClientRect().width + 10);\n }\n };\n\n updateTrackerPosition(headerCell.getBoundingClientRect().right);\n document.body.classList.add(styles['resize-active']);\n document.body.classList.remove(styles['resize-active-with-focus']);\n if (isDragging) {\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n }\n if (resizerHasFocus) {\n document.body.classList.add(styles['resize-active-with-focus']);\n headerCell.addEventListener('keydown', onKeyDown);\n }\n\n return () => {\n clearTimeout(autoGrowTimeout.current);\n document.body.classList.remove(styles['resize-active']);\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n headerCell.removeEventListener('keydown', onKeyDown);\n };\n }, [headerCell, isDragging, onDragStable, onFinishStable, resizerHasFocus, minWidth]);\n return (\n <span\n className={clsx(\n styles.resizer,\n isDragging && styles['resizer-active'],\n (resizerHasFocus || showFocusRing) && styles['has-focus']\n )}\n onMouseDown={event => {\n if (event.button !== 0) {\n return;\n }\n event.preventDefault();\n const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th')!;\n setIsDragging(true);\n setHeaderCell(headerCell);\n }}\n onFocus={event => {\n const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th')!;\n setHeaderCellWidth(headerCell.getBoundingClientRect().width);\n setResizerHasFocus(true);\n setHeaderCell(headerCell);\n onFocus?.();\n }}\n onBlur={() => {\n setResizerHasFocus(false);\n onBlur?.();\n }}\n role=\"separator\"\n aria-orientation=\"vertical\"\n aria-labelledby={ariaLabelledby}\n aria-valuenow={headerCellWidth}\n // aria-valuetext is needed because the VO announces \"collapsed\" when only aria-valuenow set without aria-valuemax\n aria-valuetext={headerCellWidth.toString()}\n aria-valuemin={minWidth}\n tabIndex={tabIndex}\n />\n );\n}\n\nexport function ResizeTracker() {\n return <span className={styles.tracker} />;\n}\n"]}
package/table/sticky-columns/use-sticky-columns.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-sticky-columns.d.ts","sourceRoot":"lib/default/","sources":["table/sticky-columns/use-sticky-columns.ts"],"names":[],"mappings":"AAGA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,UAAU,MAAM,8BAA8B,CAAC;AAItD,OAAO,EAEL,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAEnB,MAAM,cAAc,CAAC;AAOtB,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,KAAK,EAAE;QACL,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC/B,CAAC;IACF,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QACtC,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QACxC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAG,WAAW,KAAK,IAAI,CAAC;KACjE,CAAC;CACH;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,cAAc,EACd,kBAAkB,EAClB,iBAAiB,GAClB,EAAE,kBAAkB,GAAG,kBAAkB,CAgGzC;AAED,UAAU,wBAAwB;IAChC,aAAa,EAAE,kBAAkB,CAAC;IAClC,QAAQ,EAAE,WAAW,CAAC;IACtB,YAAY,EAAE,CAAC,MAAM,EAAE,IAAI,GAAG,sBAAsB,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAClF;AAED,UAAU,gBAAgB;IACxB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,QAAQ,EACR,YAAY,GACb,EAAE,wBAAwB,GAAG,gBAAgB,CA4D7C;AAED,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACxC,cAAc,EAAE,SAAS,WAAW,EAAE,CAAC;IACvC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,UAAU,CAAC,kBAAkB,CAAC;IAC5E,OAAO,CAAC,WAAW,CAIjB;IACF,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,OAAO,CAAS;;IAMjB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB;IAiBpD,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,kBAAkB,CAkCxB;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,SAAS,CAuBf;CACH"}
1
+ {"version":3,"file":"use-sticky-columns.d.ts","sourceRoot":"lib/default/","sources":["table/sticky-columns/use-sticky-columns.ts"],"names":[],"mappings":"AAGA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,UAAU,MAAM,8BAA8B,CAAC;AAGtD,OAAO,EAEL,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAEnB,MAAM,cAAc,CAAC;AAOtB,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,KAAK,EAAE;QACL,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC/B,CAAC;IACF,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QACtC,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QACxC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAG,WAAW,KAAK,IAAI,CAAC;KACjE,CAAC;CACH;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,cAAc,EACd,kBAAkB,EAClB,iBAAiB,GAClB,EAAE,kBAAkB,GAAG,kBAAkB,CAgGzC;AAED,UAAU,wBAAwB;IAChC,aAAa,EAAE,kBAAkB,CAAC;IAClC,QAAQ,EAAE,WAAW,CAAC;IACtB,YAAY,EAAE,CAAC,MAAM,EAAE,IAAI,GAAG,sBAAsB,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAClF;AAED,UAAU,gBAAgB;IACxB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,QAAQ,EACR,YAAY,GACb,EAAE,wBAAwB,GAAG,gBAAgB,CA4D7C;AAED,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACxC,cAAc,EAAE,SAAS,WAAW,EAAE,CAAC;IACvC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,UAAU,CAAC,kBAAkB,CAAC;IAC5E,OAAO,CAAC,WAAW,CAIjB;IACF,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,OAAO,CAAS;;IAMjB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB;IAiBpD,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,kBAAkB,CAkCxB;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,SAAS,CAuBf;CACH"}
package/table/sticky-columns/use-sticky-columns.js CHANGED
@@ -2,9 +2,8 @@
2
2
  // SPDX-License-Identifier: Apache-2.0
3
3
  import { useCallback, useEffect, useMemo, useRef } from 'react';
4
4
  import AsyncStore from '../../area-chart/async-store';
5
- import { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';
6
- import { useResizeObserver } from '../../internal/hooks/container-queries';
7
5
  import clsx from 'clsx';
6
+ import { useResizeObserver, useStableCallback } from '@cloudscape-design/component-toolkit/internal';
8
7
  import { isCellStatesEqual, isWrapperStatesEqual, updateCellOffsets } from './utils';
9
8
  // We allow the table to have a minimum of 148px of available space besides the sum of the widths of the sticky columns
10
9
  // This value is an UX recommendation and is approximately 1/3 of our smallest breakpoint (465px)
@@ -15,7 +14,7 @@ export function useStickyColumns({ visibleColumns, stickyColumnsFirst, stickyCol
15
14
  const tableRef = useRef(null);
16
15
  const cellsRef = useRef({});
17
16
  const hasStickyColumns = stickyColumnsFirst + stickyColumnsLast > 0;
18
- const updateStickyStyles = useStableEventHandler(() => {
17
+ const updateStickyStyles = useStableCallback(() => {
19
18
  if (wrapperRef.current && tableRef.current) {
20
19
  store.updateCellStyles({
21
20
  wrapper: wrapperRef.current,
package/table/sticky-columns/use-sticky-columns.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-sticky-columns.js","sourceRoot":"lib/default/","sources":["table/sticky-columns/use-sticky-columns.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport AsyncStore from '../../area-chart/async-store';\nimport { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';\nimport { useResizeObserver } from '../../internal/hooks/container-queries';\nimport clsx from 'clsx';\nimport {\n CellOffsets,\n StickyColumnsCellState,\n StickyColumnsProps,\n StickyColumnsState,\n StickyColumnsWrapperState,\n} from './interfaces';\nimport { isCellStatesEqual, isWrapperStatesEqual, updateCellOffsets } from './utils';\n\n// We allow the table to have a minimum of 148px of available space besides the sum of the widths of the sticky columns\n// This value is an UX recommendation and is approximately 1/3 of our smallest breakpoint (465px)\nconst MINIMUM_SCROLLABLE_SPACE = 148;\n\nexport interface StickyColumnsModel {\n store: StickyColumnsStore;\n style: {\n wrapper?: React.CSSProperties;\n };\n refs: {\n table: React.RefCallback<HTMLElement>;\n wrapper: React.RefCallback<HTMLElement>;\n cell: (columnId: PropertyKey, node: null | HTMLElement) => void;\n };\n}\n\nexport function useStickyColumns({\n visibleColumns,\n stickyColumnsFirst,\n stickyColumnsLast,\n}: StickyColumnsProps): StickyColumnsModel {\n const store = useMemo(() => new StickyColumnsStore(), []);\n const wrapperRef = useRef<HTMLElement>(null) as React.MutableRefObject<null | HTMLElement>;\n const tableRef = useRef<HTMLElement>(null) as React.MutableRefObject<null | HTMLElement>;\n const cellsRef = useRef<Record<PropertyKey, HTMLElement>>({});\n\n const hasStickyColumns = stickyColumnsFirst + stickyColumnsLast > 0;\n\n const updateStickyStyles = useStableEventHandler(() => {\n if (wrapperRef.current && tableRef.current) {\n store.updateCellStyles({\n wrapper: wrapperRef.current,\n table: tableRef.current,\n cells: cellsRef.current,\n visibleColumns,\n stickyColumnsFirst,\n stickyColumnsLast,\n });\n }\n });\n\n useResizeObserver(wrapperRef, updateStickyStyles);\n\n useResizeObserver(tableRef, updateStickyStyles);\n\n useEffect(() => {\n if (wrapperRef.current && tableRef.current) {\n store.updateCellStyles({\n wrapper: wrapperRef.current,\n table: tableRef.current,\n cells: cellsRef.current,\n visibleColumns,\n stickyColumnsFirst,\n stickyColumnsLast,\n });\n }\n }, [store, stickyColumnsFirst, stickyColumnsLast, visibleColumns]);\n\n // Update wrapper styles imperatively to avoid unnecessary re-renders.\n useEffect(() => {\n if (!hasStickyColumns) {\n return;\n }\n\n const selector = (state: StickyColumnsState) => state.wrapperState;\n\n const updateWrapperStyles = (state: StickyColumnsWrapperState, prev: StickyColumnsWrapperState) => {\n if (isWrapperStatesEqual(state, prev)) {\n return;\n }\n\n if (wrapperRef.current) {\n wrapperRef.current.style.scrollPaddingLeft = state.scrollPaddingLeft + 'px';\n wrapperRef.current.style.scrollPaddingRight = state.scrollPaddingRight + 'px';\n }\n };\n\n const unsubscribe = store.subscribe(selector, (newState, prevState) =>\n updateWrapperStyles(selector(newState), selector(prevState))\n );\n return unsubscribe;\n }, [store, hasStickyColumns]);\n\n const setWrapper = useCallback(\n (node: null | HTMLElement) => {\n if (wrapperRef.current) {\n wrapperRef.current.removeEventListener('scroll', updateStickyStyles);\n }\n if (node && hasStickyColumns) {\n node.addEventListener('scroll', updateStickyStyles);\n }\n wrapperRef.current = node;\n },\n [hasStickyColumns, updateStickyStyles]\n );\n\n const setTable = useCallback((node: null | HTMLElement) => {\n tableRef.current = node;\n }, []);\n\n const setCell = useCallback((columnId: PropertyKey, node: null | HTMLElement) => {\n if (node) {\n cellsRef.current[columnId] = node;\n } else {\n delete cellsRef.current[columnId];\n }\n }, []);\n\n return {\n store,\n style: {\n // Provide wrapper styles as props so that a re-render won't cause invalidation.\n wrapper: hasStickyColumns ? { ...store.get().wrapperState } : undefined,\n },\n refs: { wrapper: setWrapper, table: setTable, cell: setCell },\n };\n}\n\ninterface UseStickyCellStylesProps {\n stickyColumns: StickyColumnsModel;\n columnId: PropertyKey;\n getClassName: (styles: null | StickyColumnsCellState) => Record<string, boolean>;\n}\n\ninterface StickyCellStyles {\n ref: React.RefCallback<HTMLElement>;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport function useStickyCellStyles({\n stickyColumns,\n columnId,\n getClassName,\n}: UseStickyCellStylesProps): StickyCellStyles {\n const setCell = stickyColumns.refs.cell;\n\n // unsubscribeRef to hold the function to unsubscribe from the store's updates\n const unsubscribeRef = useRef<null | (() => void)>(null);\n\n // refCallback updates the cell ref and sets up the store subscription\n const refCallback = useCallback(\n cellElement => {\n if (unsubscribeRef.current) {\n // Unsubscribe before we do any updates to avoid leaving any subscriptions hanging\n unsubscribeRef.current();\n }\n\n // Update cellRef and the store's state to point to the new DOM node\n setCell(columnId, cellElement);\n\n // Update cell styles imperatively to avoid unnecessary re-renders.\n const selector = (state: StickyColumnsState) => state.cellState[columnId];\n\n const updateCellStyles = (state: null | StickyColumnsCellState, prev: null | StickyColumnsCellState) => {\n if (isCellStatesEqual(state, prev)) {\n return;\n }\n\n const className = getClassName(state);\n if (cellElement) {\n Object.keys(className).forEach(key => {\n if (className[key]) {\n cellElement.classList.add(key);\n } else {\n cellElement.classList.remove(key);\n }\n });\n cellElement.style.left = state?.offset.left !== undefined ? `${state.offset.left}px` : '';\n cellElement.style.right = state?.offset.right !== undefined ? `${state.offset.right}px` : '';\n }\n };\n\n // If the node is not null (i.e., the table cell is being mounted or updated, not unmounted),\n // set up a new subscription to the store's updates\n if (cellElement) {\n unsubscribeRef.current = stickyColumns.store.subscribe(selector, (newState, prevState) => {\n updateCellStyles(selector(newState), selector(prevState));\n });\n }\n },\n\n // getClassName is expected to be pure\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [columnId, setCell, stickyColumns.store]\n );\n\n // Provide cell styles as props so that a re-render won't cause invalidation.\n const cellStyles = stickyColumns.store.get().cellState[columnId];\n return {\n ref: refCallback,\n className: cellStyles ? clsx(getClassName(cellStyles)) : undefined,\n style: cellStyles?.offset ?? undefined,\n };\n}\n\ninterface UpdateCellStylesProps {\n wrapper: HTMLElement;\n table: HTMLElement;\n cells: Record<PropertyKey, HTMLElement>;\n visibleColumns: readonly PropertyKey[];\n stickyColumnsFirst: number;\n stickyColumnsLast: number;\n}\n\nexport default class StickyColumnsStore extends AsyncStore<StickyColumnsState> {\n private cellOffsets: CellOffsets = {\n offsets: new Map(),\n stickyWidthLeft: 0,\n stickyWidthRight: 0,\n };\n private isStuckToTheLeft = false;\n private isStuckToTheRight = false;\n private padLeft = false;\n\n constructor() {\n super({ cellState: {}, wrapperState: { scrollPaddingLeft: 0, scrollPaddingRight: 0 } });\n }\n\n public updateCellStyles(props: UpdateCellStylesProps) {\n const hasStickyColumns = props.stickyColumnsFirst + props.stickyColumnsLast > 0;\n const hadStickyColumns = this.cellOffsets.offsets.size > 0;\n\n if (hasStickyColumns || hadStickyColumns) {\n this.updateScroll(props);\n this.updateCellOffsets(props);\n this.set(() => ({\n cellState: this.generateCellStyles(props),\n wrapperState: {\n scrollPaddingLeft: this.cellOffsets.stickyWidthLeft,\n scrollPaddingRight: this.cellOffsets.stickyWidthRight,\n },\n }));\n }\n }\n\n private updateScroll(props: UpdateCellStylesProps) {\n const wrapperScrollLeft = props.wrapper.scrollLeft;\n const wrapperScrollWidth = props.wrapper.scrollWidth;\n const wrapperClientWidth = props.wrapper.clientWidth;\n const tablePaddingLeft = parseFloat(getComputedStyle(props.table).paddingLeft) || 0;\n const tablePaddingRight = parseFloat(getComputedStyle(props.table).paddingRight) || 0;\n\n this.isStuckToTheLeft = wrapperScrollLeft > tablePaddingLeft;\n\n // Math.ceil() is used here to address an edge-case in certain browsers, where they return non-integer wrapperScrollLeft values\n // which are lower than expected (sub-pixel difference), resulting in the table always being in the \"stuck to the right\" state\n this.isStuckToTheRight = Math.ceil(wrapperScrollLeft) < wrapperScrollWidth - wrapperClientWidth - tablePaddingRight;\n\n this.padLeft = tablePaddingLeft !== 0 && this.isStuckToTheLeft;\n }\n\n private generateCellStyles = (props: UpdateCellStylesProps): Record<PropertyKey, null | StickyColumnsCellState> => {\n const isEnabled = this.isEnabled(props);\n const lastLeftStickyColumnIndex = props.stickyColumnsFirst - 1;\n const lastRightStickyColumnIndex = props.visibleColumns.length - props.stickyColumnsLast;\n\n return props.visibleColumns.reduce((acc, columnId, index) => {\n let stickySide = 'non-sticky';\n if (index < props.stickyColumnsFirst) {\n stickySide = 'left';\n } else if (index >= props.visibleColumns.length - props.stickyColumnsLast) {\n stickySide = 'right';\n }\n\n if (!isEnabled || stickySide === 'non-sticky') {\n acc[columnId] = null;\n return acc;\n }\n\n // Determine the offset of the sticky column using the `cellOffsets` state object\n const isFirstColumn = index === 0;\n const stickyColumnOffsetLeft = this.cellOffsets.offsets.get(columnId)?.first ?? 0;\n const stickyColumnOffsetRight = this.cellOffsets.offsets.get(columnId)?.last ?? 0;\n\n acc[columnId] = {\n padLeft: isFirstColumn && this.padLeft,\n lastLeft: this.isStuckToTheLeft && lastLeftStickyColumnIndex === index,\n lastRight: this.isStuckToTheRight && lastRightStickyColumnIndex === index,\n offset: {\n left: stickySide === 'left' ? stickyColumnOffsetLeft : undefined,\n right: stickySide === 'right' ? stickyColumnOffsetRight : undefined,\n },\n };\n return acc;\n }, {} as Record<PropertyKey, null | StickyColumnsCellState>);\n };\n\n private updateCellOffsets = (props: UpdateCellStylesProps): void => {\n this.cellOffsets = updateCellOffsets(props.cells, props);\n };\n\n private isEnabled = (props: UpdateCellStylesProps): boolean => {\n const noStickyColumns = props.stickyColumnsFirst + props.stickyColumnsLast === 0;\n if (noStickyColumns) {\n return false;\n }\n\n const wrapperWidth = props.wrapper.getBoundingClientRect().width;\n const tableWidth = props.table.getBoundingClientRect().width;\n const isWrapperScrollable = tableWidth > wrapperWidth;\n if (!isWrapperScrollable) {\n return false;\n }\n\n const totalStickySpace = this.cellOffsets.stickyWidthLeft + this.cellOffsets.stickyWidthRight;\n const tablePaddingLeft = parseFloat(getComputedStyle(props.table).paddingLeft) || 0;\n const tablePaddingRight = parseFloat(getComputedStyle(props.table).paddingRight) || 0;\n const hasEnoughScrollableSpace =\n totalStickySpace + MINIMUM_SCROLLABLE_SPACE + tablePaddingLeft + tablePaddingRight < wrapperWidth;\n if (!hasEnoughScrollableSpace) {\n return false;\n }\n\n return true;\n };\n}\n"]}
1
+ {"version":3,"file":"use-sticky-columns.js","sourceRoot":"lib/default/","sources":["table/sticky-columns/use-sticky-columns.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport AsyncStore from '../../area-chart/async-store';\nimport clsx from 'clsx';\nimport { useResizeObserver, useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport {\n CellOffsets,\n StickyColumnsCellState,\n StickyColumnsProps,\n StickyColumnsState,\n StickyColumnsWrapperState,\n} from './interfaces';\nimport { isCellStatesEqual, isWrapperStatesEqual, updateCellOffsets } from './utils';\n\n// We allow the table to have a minimum of 148px of available space besides the sum of the widths of the sticky columns\n// This value is an UX recommendation and is approximately 1/3 of our smallest breakpoint (465px)\nconst MINIMUM_SCROLLABLE_SPACE = 148;\n\nexport interface StickyColumnsModel {\n store: StickyColumnsStore;\n style: {\n wrapper?: React.CSSProperties;\n };\n refs: {\n table: React.RefCallback<HTMLElement>;\n wrapper: React.RefCallback<HTMLElement>;\n cell: (columnId: PropertyKey, node: null | HTMLElement) => void;\n };\n}\n\nexport function useStickyColumns({\n visibleColumns,\n stickyColumnsFirst,\n stickyColumnsLast,\n}: StickyColumnsProps): StickyColumnsModel {\n const store = useMemo(() => new StickyColumnsStore(), []);\n const wrapperRef = useRef<HTMLElement>(null) as React.MutableRefObject<null | HTMLElement>;\n const tableRef = useRef<HTMLElement>(null) as React.MutableRefObject<null | HTMLElement>;\n const cellsRef = useRef<Record<PropertyKey, HTMLElement>>({});\n\n const hasStickyColumns = stickyColumnsFirst + stickyColumnsLast > 0;\n\n const updateStickyStyles = useStableCallback(() => {\n if (wrapperRef.current && tableRef.current) {\n store.updateCellStyles({\n wrapper: wrapperRef.current,\n table: tableRef.current,\n cells: cellsRef.current,\n visibleColumns,\n stickyColumnsFirst,\n stickyColumnsLast,\n });\n }\n });\n\n useResizeObserver(wrapperRef, updateStickyStyles);\n\n useResizeObserver(tableRef, updateStickyStyles);\n\n useEffect(() => {\n if (wrapperRef.current && tableRef.current) {\n store.updateCellStyles({\n wrapper: wrapperRef.current,\n table: tableRef.current,\n cells: cellsRef.current,\n visibleColumns,\n stickyColumnsFirst,\n stickyColumnsLast,\n });\n }\n }, [store, stickyColumnsFirst, stickyColumnsLast, visibleColumns]);\n\n // Update wrapper styles imperatively to avoid unnecessary re-renders.\n useEffect(() => {\n if (!hasStickyColumns) {\n return;\n }\n\n const selector = (state: StickyColumnsState) => state.wrapperState;\n\n const updateWrapperStyles = (state: StickyColumnsWrapperState, prev: StickyColumnsWrapperState) => {\n if (isWrapperStatesEqual(state, prev)) {\n return;\n }\n\n if (wrapperRef.current) {\n wrapperRef.current.style.scrollPaddingLeft = state.scrollPaddingLeft + 'px';\n wrapperRef.current.style.scrollPaddingRight = state.scrollPaddingRight + 'px';\n }\n };\n\n const unsubscribe = store.subscribe(selector, (newState, prevState) =>\n updateWrapperStyles(selector(newState), selector(prevState))\n );\n return unsubscribe;\n }, [store, hasStickyColumns]);\n\n const setWrapper = useCallback(\n (node: null | HTMLElement) => {\n if (wrapperRef.current) {\n wrapperRef.current.removeEventListener('scroll', updateStickyStyles);\n }\n if (node && hasStickyColumns) {\n node.addEventListener('scroll', updateStickyStyles);\n }\n wrapperRef.current = node;\n },\n [hasStickyColumns, updateStickyStyles]\n );\n\n const setTable = useCallback((node: null | HTMLElement) => {\n tableRef.current = node;\n }, []);\n\n const setCell = useCallback((columnId: PropertyKey, node: null | HTMLElement) => {\n if (node) {\n cellsRef.current[columnId] = node;\n } else {\n delete cellsRef.current[columnId];\n }\n }, []);\n\n return {\n store,\n style: {\n // Provide wrapper styles as props so that a re-render won't cause invalidation.\n wrapper: hasStickyColumns ? { ...store.get().wrapperState } : undefined,\n },\n refs: { wrapper: setWrapper, table: setTable, cell: setCell },\n };\n}\n\ninterface UseStickyCellStylesProps {\n stickyColumns: StickyColumnsModel;\n columnId: PropertyKey;\n getClassName: (styles: null | StickyColumnsCellState) => Record<string, boolean>;\n}\n\ninterface StickyCellStyles {\n ref: React.RefCallback<HTMLElement>;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport function useStickyCellStyles({\n stickyColumns,\n columnId,\n getClassName,\n}: UseStickyCellStylesProps): StickyCellStyles {\n const setCell = stickyColumns.refs.cell;\n\n // unsubscribeRef to hold the function to unsubscribe from the store's updates\n const unsubscribeRef = useRef<null | (() => void)>(null);\n\n // refCallback updates the cell ref and sets up the store subscription\n const refCallback = useCallback(\n cellElement => {\n if (unsubscribeRef.current) {\n // Unsubscribe before we do any updates to avoid leaving any subscriptions hanging\n unsubscribeRef.current();\n }\n\n // Update cellRef and the store's state to point to the new DOM node\n setCell(columnId, cellElement);\n\n // Update cell styles imperatively to avoid unnecessary re-renders.\n const selector = (state: StickyColumnsState) => state.cellState[columnId];\n\n const updateCellStyles = (state: null | StickyColumnsCellState, prev: null | StickyColumnsCellState) => {\n if (isCellStatesEqual(state, prev)) {\n return;\n }\n\n const className = getClassName(state);\n if (cellElement) {\n Object.keys(className).forEach(key => {\n if (className[key]) {\n cellElement.classList.add(key);\n } else {\n cellElement.classList.remove(key);\n }\n });\n cellElement.style.left = state?.offset.left !== undefined ? `${state.offset.left}px` : '';\n cellElement.style.right = state?.offset.right !== undefined ? `${state.offset.right}px` : '';\n }\n };\n\n // If the node is not null (i.e., the table cell is being mounted or updated, not unmounted),\n // set up a new subscription to the store's updates\n if (cellElement) {\n unsubscribeRef.current = stickyColumns.store.subscribe(selector, (newState, prevState) => {\n updateCellStyles(selector(newState), selector(prevState));\n });\n }\n },\n\n // getClassName is expected to be pure\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [columnId, setCell, stickyColumns.store]\n );\n\n // Provide cell styles as props so that a re-render won't cause invalidation.\n const cellStyles = stickyColumns.store.get().cellState[columnId];\n return {\n ref: refCallback,\n className: cellStyles ? clsx(getClassName(cellStyles)) : undefined,\n style: cellStyles?.offset ?? undefined,\n };\n}\n\ninterface UpdateCellStylesProps {\n wrapper: HTMLElement;\n table: HTMLElement;\n cells: Record<PropertyKey, HTMLElement>;\n visibleColumns: readonly PropertyKey[];\n stickyColumnsFirst: number;\n stickyColumnsLast: number;\n}\n\nexport default class StickyColumnsStore extends AsyncStore<StickyColumnsState> {\n private cellOffsets: CellOffsets = {\n offsets: new Map(),\n stickyWidthLeft: 0,\n stickyWidthRight: 0,\n };\n private isStuckToTheLeft = false;\n private isStuckToTheRight = false;\n private padLeft = false;\n\n constructor() {\n super({ cellState: {}, wrapperState: { scrollPaddingLeft: 0, scrollPaddingRight: 0 } });\n }\n\n public updateCellStyles(props: UpdateCellStylesProps) {\n const hasStickyColumns = props.stickyColumnsFirst + props.stickyColumnsLast > 0;\n const hadStickyColumns = this.cellOffsets.offsets.size > 0;\n\n if (hasStickyColumns || hadStickyColumns) {\n this.updateScroll(props);\n this.updateCellOffsets(props);\n this.set(() => ({\n cellState: this.generateCellStyles(props),\n wrapperState: {\n scrollPaddingLeft: this.cellOffsets.stickyWidthLeft,\n scrollPaddingRight: this.cellOffsets.stickyWidthRight,\n },\n }));\n }\n }\n\n private updateScroll(props: UpdateCellStylesProps) {\n const wrapperScrollLeft = props.wrapper.scrollLeft;\n const wrapperScrollWidth = props.wrapper.scrollWidth;\n const wrapperClientWidth = props.wrapper.clientWidth;\n const tablePaddingLeft = parseFloat(getComputedStyle(props.table).paddingLeft) || 0;\n const tablePaddingRight = parseFloat(getComputedStyle(props.table).paddingRight) || 0;\n\n this.isStuckToTheLeft = wrapperScrollLeft > tablePaddingLeft;\n\n // Math.ceil() is used here to address an edge-case in certain browsers, where they return non-integer wrapperScrollLeft values\n // which are lower than expected (sub-pixel difference), resulting in the table always being in the \"stuck to the right\" state\n this.isStuckToTheRight = Math.ceil(wrapperScrollLeft) < wrapperScrollWidth - wrapperClientWidth - tablePaddingRight;\n\n this.padLeft = tablePaddingLeft !== 0 && this.isStuckToTheLeft;\n }\n\n private generateCellStyles = (props: UpdateCellStylesProps): Record<PropertyKey, null | StickyColumnsCellState> => {\n const isEnabled = this.isEnabled(props);\n const lastLeftStickyColumnIndex = props.stickyColumnsFirst - 1;\n const lastRightStickyColumnIndex = props.visibleColumns.length - props.stickyColumnsLast;\n\n return props.visibleColumns.reduce((acc, columnId, index) => {\n let stickySide = 'non-sticky';\n if (index < props.stickyColumnsFirst) {\n stickySide = 'left';\n } else if (index >= props.visibleColumns.length - props.stickyColumnsLast) {\n stickySide = 'right';\n }\n\n if (!isEnabled || stickySide === 'non-sticky') {\n acc[columnId] = null;\n return acc;\n }\n\n // Determine the offset of the sticky column using the `cellOffsets` state object\n const isFirstColumn = index === 0;\n const stickyColumnOffsetLeft = this.cellOffsets.offsets.get(columnId)?.first ?? 0;\n const stickyColumnOffsetRight = this.cellOffsets.offsets.get(columnId)?.last ?? 0;\n\n acc[columnId] = {\n padLeft: isFirstColumn && this.padLeft,\n lastLeft: this.isStuckToTheLeft && lastLeftStickyColumnIndex === index,\n lastRight: this.isStuckToTheRight && lastRightStickyColumnIndex === index,\n offset: {\n left: stickySide === 'left' ? stickyColumnOffsetLeft : undefined,\n right: stickySide === 'right' ? stickyColumnOffsetRight : undefined,\n },\n };\n return acc;\n }, {} as Record<PropertyKey, null | StickyColumnsCellState>);\n };\n\n private updateCellOffsets = (props: UpdateCellStylesProps): void => {\n this.cellOffsets = updateCellOffsets(props.cells, props);\n };\n\n private isEnabled = (props: UpdateCellStylesProps): boolean => {\n const noStickyColumns = props.stickyColumnsFirst + props.stickyColumnsLast === 0;\n if (noStickyColumns) {\n return false;\n }\n\n const wrapperWidth = props.wrapper.getBoundingClientRect().width;\n const tableWidth = props.table.getBoundingClientRect().width;\n const isWrapperScrollable = tableWidth > wrapperWidth;\n if (!isWrapperScrollable) {\n return false;\n }\n\n const totalStickySpace = this.cellOffsets.stickyWidthLeft + this.cellOffsets.stickyWidthRight;\n const tablePaddingLeft = parseFloat(getComputedStyle(props.table).paddingLeft) || 0;\n const tablePaddingRight = parseFloat(getComputedStyle(props.table).paddingRight) || 0;\n const hasEnoughScrollableSpace =\n totalStickySpace + MINIMUM_SCROLLABLE_SPACE + tablePaddingLeft + tablePaddingRight < wrapperWidth;\n if (!hasEnoughScrollableSpace) {\n return false;\n }\n\n return true;\n };\n}\n"]}
package/table/sticky-scrollbar/styles.css.js CHANGED
@@ -1,11 +1,11 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "sticky-scrollbar": "awsui_sticky-scrollbar_faqt8_1chd1_93",
5
- "sticky-scrollbar-content": "awsui_sticky-scrollbar-content_faqt8_1chd1_102",
6
- "sticky-scrollbar-visible": "awsui_sticky-scrollbar-visible_faqt8_1chd1_105",
7
- "sticky-scrollbar-native-invisible": "awsui_sticky-scrollbar-native-invisible_faqt8_1chd1_108",
8
- "sticky-scrollbar-offset": "awsui_sticky-scrollbar-offset_faqt8_1chd1_111",
9
- "is-visual-refresh": "awsui_is-visual-refresh_faqt8_1chd1_114"
4
+ "sticky-scrollbar": "awsui_sticky-scrollbar_faqt8_cn78s_93",
5
+ "sticky-scrollbar-content": "awsui_sticky-scrollbar-content_faqt8_cn78s_102",
6
+ "sticky-scrollbar-visible": "awsui_sticky-scrollbar-visible_faqt8_cn78s_105",
7
+ "sticky-scrollbar-native-invisible": "awsui_sticky-scrollbar-native-invisible_faqt8_cn78s_108",
8
+ "sticky-scrollbar-offset": "awsui_sticky-scrollbar-offset_faqt8_cn78s_111",
9
+ "is-visual-refresh": "awsui_is-visual-refresh_faqt8_cn78s_114"
10
10
  };
11
11
 
package/table/sticky-scrollbar/styles.scoped.css CHANGED
@@ -90,7 +90,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
90
90
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
91
91
  SPDX-License-Identifier: Apache-2.0
92
92
  */
93
- .awsui_sticky-scrollbar_faqt8_1chd1_93:not(#\9) {
93
+ .awsui_sticky-scrollbar_faqt8_cn78s_93:not(#\9) {
94
94
  height: 15px;
95
95
  position: sticky;
96
96
  display: none;
@@ -99,24 +99,24 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
99
99
  bottom: 0;
100
100
  width: 100%;
101
101
  }
102
- .awsui_sticky-scrollbar-content_faqt8_1chd1_102:not(#\9) {
102
+ .awsui_sticky-scrollbar-content_faqt8_cn78s_102:not(#\9) {
103
103
  height: 15px;
104
104
  }
105
- .awsui_sticky-scrollbar-visible_faqt8_1chd1_105:not(#\9) {
105
+ .awsui_sticky-scrollbar-visible_faqt8_cn78s_105:not(#\9) {
106
106
  display: block;
107
107
  }
108
- .awsui_sticky-scrollbar-native-invisible_faqt8_1chd1_108:not(#\9) {
108
+ .awsui_sticky-scrollbar-native-invisible_faqt8_cn78s_108:not(#\9) {
109
109
  margin-top: -15px;
110
110
  }
111
- .awsui_sticky-scrollbar-offset_faqt8_1chd1_111:not(#\9) {
111
+ .awsui_sticky-scrollbar-offset_faqt8_cn78s_111:not(#\9) {
112
112
  z-index: 800;
113
113
  }
114
- .awsui_sticky-scrollbar-offset_faqt8_1chd1_111:not(#\9):not(.awsui_is-visual-refresh_faqt8_1chd1_114) {
114
+ .awsui_sticky-scrollbar-offset_faqt8_cn78s_111:not(#\9):not(.awsui_is-visual-refresh_faqt8_cn78s_114) {
115
115
  background-color: var(--color-background-container-content-4un1ap, #ffffff);
116
116
  height: 15px;
117
- margin-top: calc(-1 * var(--border-divider-section-width-4ax5o2, 2px));
118
- border-top: var(--border-divider-section-width-4ax5o2, 2px) solid var(--color-border-divider-default-d3adp9, #e9ebed);
117
+ margin-top: calc(-1 * var(--border-divider-section-width-8a5uu9, 2px));
118
+ border-top: var(--border-divider-section-width-8a5uu9, 2px) solid var(--color-border-divider-default-et9j7s, #e9ebed);
119
119
  }
120
- .awsui_sticky-scrollbar-offset_faqt8_1chd1_111.awsui_is-visual-refresh_faqt8_1chd1_114:not(#\9) {
120
+ .awsui_sticky-scrollbar-offset_faqt8_cn78s_111.awsui_is-visual-refresh_faqt8_cn78s_114:not(#\9) {
121
121
  margin-top: -5px;
122
122
  }
package/table/sticky-scrollbar/styles.selectors.js CHANGED
@@ -2,11 +2,11 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "sticky-scrollbar": "awsui_sticky-scrollbar_faqt8_1chd1_93",
6
- "sticky-scrollbar-content": "awsui_sticky-scrollbar-content_faqt8_1chd1_102",
7
- "sticky-scrollbar-visible": "awsui_sticky-scrollbar-visible_faqt8_1chd1_105",
8
- "sticky-scrollbar-native-invisible": "awsui_sticky-scrollbar-native-invisible_faqt8_1chd1_108",
9
- "sticky-scrollbar-offset": "awsui_sticky-scrollbar-offset_faqt8_1chd1_111",
10
- "is-visual-refresh": "awsui_is-visual-refresh_faqt8_1chd1_114"
5
+ "sticky-scrollbar": "awsui_sticky-scrollbar_faqt8_cn78s_93",
6
+ "sticky-scrollbar-content": "awsui_sticky-scrollbar-content_faqt8_cn78s_102",
7
+ "sticky-scrollbar-visible": "awsui_sticky-scrollbar-visible_faqt8_cn78s_105",
8
+ "sticky-scrollbar-native-invisible": "awsui_sticky-scrollbar-native-invisible_faqt8_cn78s_108",
9
+ "sticky-scrollbar-offset": "awsui_sticky-scrollbar-offset_faqt8_cn78s_111",
10
+ "is-visual-refresh": "awsui_is-visual-refresh_faqt8_cn78s_114"
11
11
  };
12
12