@cloudscape-design/components 3.0.709 → 3.0.711

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 (67) hide show
  1. package/app-layout/visual-refresh-toolbar/skeleton/styles.css.js +16 -16
  2. package/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css +28 -31
  3. package/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js +16 -16
  4. package/app-layout/visual-refresh-toolbar/toolbar/index.d.ts.map +1 -1
  5. package/app-layout/visual-refresh-toolbar/toolbar/index.js +20 -1
  6. package/app-layout/visual-refresh-toolbar/toolbar/index.js.map +1 -1
  7. package/button/internal.d.ts +2 -0
  8. package/button/internal.d.ts.map +1 -1
  9. package/button/internal.js +2 -2
  10. package/button/internal.js.map +1 -1
  11. package/button-dropdown/interfaces.d.ts +1 -1
  12. package/button-dropdown/interfaces.js.map +1 -1
  13. package/button-group/icon-button-item.d.ts +12 -0
  14. package/button-group/icon-button-item.d.ts.map +1 -0
  15. package/button-group/icon-button-item.js +21 -0
  16. package/button-group/icon-button-item.js.map +1 -0
  17. package/button-group/index.d.ts +6 -0
  18. package/button-group/index.d.ts.map +1 -0
  19. package/button-group/index.js +24 -0
  20. package/button-group/index.js.map +1 -0
  21. package/button-group/interfaces.d.ts +111 -0
  22. package/button-group/interfaces.d.ts.map +1 -0
  23. package/button-group/interfaces.js +4 -0
  24. package/button-group/interfaces.js.map +1 -0
  25. package/button-group/internal.d.ts +5 -0
  26. package/button-group/internal.d.ts.map +1 -0
  27. package/button-group/internal.js +123 -0
  28. package/button-group/internal.js.map +1 -0
  29. package/button-group/item-element.d.ts +20 -0
  30. package/button-group/item-element.d.ts.map +1 -0
  31. package/button-group/item-element.js +74 -0
  32. package/button-group/item-element.js.map +1 -0
  33. package/button-group/menu-dropdown-item.d.ts +13 -0
  34. package/button-group/menu-dropdown-item.d.ts.map +1 -0
  35. package/button-group/menu-dropdown-item.js +20 -0
  36. package/button-group/menu-dropdown-item.js.map +1 -0
  37. package/button-group/styles.css.js +9 -0
  38. package/button-group/styles.scoped.css +149 -0
  39. package/button-group/styles.selectors.js +10 -0
  40. package/button-group/test-classes/styles.css.js +10 -0
  41. package/button-group/test-classes/styles.scoped.css +23 -0
  42. package/button-group/test-classes/styles.selectors.js +11 -0
  43. package/index.d.ts +1 -0
  44. package/index.d.ts.map +1 -1
  45. package/index.js +1 -0
  46. package/index.js.map +1 -1
  47. package/internal/components/dropdown/interfaces.d.ts +1 -1
  48. package/internal/components/dropdown/interfaces.js.map +1 -1
  49. package/internal/context/single-tab-stop-navigation-context.js +1 -1
  50. package/internal/context/single-tab-stop-navigation-context.js.map +1 -1
  51. package/internal/environment.js +1 -1
  52. package/internal/environment.json +1 -1
  53. package/internal/manifest.json +1 -1
  54. package/package.json +2 -1
  55. package/test-utils/dom/button-group/index.d.ts +22 -0
  56. package/test-utils/dom/button-group/index.js +42 -0
  57. package/test-utils/dom/button-group/index.js.map +1 -0
  58. package/test-utils/dom/index.d.ts +3 -0
  59. package/test-utils/dom/index.js +10 -2
  60. package/test-utils/dom/index.js.map +1 -1
  61. package/test-utils/selectors/button-group/index.d.ts +22 -0
  62. package/test-utils/selectors/button-group/index.js +42 -0
  63. package/test-utils/selectors/button-group/index.js.map +1 -0
  64. package/test-utils/selectors/index.d.ts +3 -0
  65. package/test-utils/selectors/index.js +10 -2
  66. package/test-utils/selectors/index.js.map +1 -1
  67. package/test-utils/tsconfig.tsbuildinfo +1 -1
package/app-layout/visual-refresh-toolbar/skeleton/styles.css.js CHANGED
@@ -1,21 +1,21 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "root": "awsui_root_7nfqu_1sfpa_101",
5
- "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1sfpa_150",
6
- "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1sfpa_165",
7
- "navigation": "awsui_navigation_7nfqu_1sfpa_180",
8
- "tools": "awsui_tools_7nfqu_1sfpa_181",
9
- "split-panel-side": "awsui_split-panel-side_7nfqu_1sfpa_205",
10
- "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1sfpa_211",
11
- "panel-hidden": "awsui_panel-hidden_7nfqu_1sfpa_224",
12
- "toolbar-container": "awsui_toolbar-container_7nfqu_1sfpa_228",
13
- "notifications-container": "awsui_notifications-container_7nfqu_1sfpa_234",
14
- "main-landmark": "awsui_main-landmark_7nfqu_1sfpa_241",
15
- "main": "awsui_main_7nfqu_1sfpa_241",
16
- "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1sfpa_250",
17
- "content-header": "awsui_content-header_7nfqu_1sfpa_260",
18
- "content": "awsui_content_7nfqu_1sfpa_260",
19
- "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1sfpa_269"
4
+ "root": "awsui_root_7nfqu_3a4t2_101",
5
+ "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_3a4t2_150",
6
+ "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_3a4t2_165",
7
+ "navigation": "awsui_navigation_7nfqu_3a4t2_180",
8
+ "tools": "awsui_tools_7nfqu_3a4t2_181",
9
+ "split-panel-side": "awsui_split-panel-side_7nfqu_3a4t2_205",
10
+ "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_3a4t2_211",
11
+ "panel-hidden": "awsui_panel-hidden_7nfqu_3a4t2_224",
12
+ "toolbar-container": "awsui_toolbar-container_7nfqu_3a4t2_228",
13
+ "notifications-container": "awsui_notifications-container_7nfqu_3a4t2_234",
14
+ "main-landmark": "awsui_main-landmark_7nfqu_3a4t2_241",
15
+ "main": "awsui_main_7nfqu_3a4t2_241",
16
+ "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_3a4t2_250",
17
+ "content-header": "awsui_content-header_7nfqu_3a4t2_260",
18
+ "content": "awsui_content_7nfqu_3a4t2_260",
19
+ "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_3a4t2_270"
20
20
  };
21
21
 
package/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css CHANGED
@@ -98,7 +98,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
98
98
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
99
99
  SPDX-License-Identifier: Apache-2.0
100
100
  */
101
- .awsui_root_7nfqu_1sfpa_101:not(#\9) {
101
+ .awsui_root_7nfqu_3a4t2_101:not(#\9) {
102
102
  border-collapse: separate;
103
103
  border-spacing: 0;
104
104
  box-sizing: border-box;
@@ -141,45 +141,45 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
141
141
  grid-template-rows: min-content min-content 1fr;
142
142
  }
143
143
  @media (min-width: 689px) {
144
- .awsui_root_7nfqu_1sfpa_101:not(#\9) {
144
+ .awsui_root_7nfqu_3a4t2_101:not(#\9) {
145
145
  grid-template-areas: "navigation toolbar toolbar toolbar toolbar tools" "navigation . notifications . sideSplitPanel tools" "navigation . main . sideSplitPanel tools";
146
146
  grid-template-columns: min-content minmax(var(--space-layout-content-horizontal-7l52k3, 24px), 1fr) minmax(0, var(--awsui-max-content-width-g964ok)) minmax(var(--space-layout-content-horizontal-7l52k3, 24px), 1fr) min-content min-content;
147
147
  grid-template-rows: min-content min-content 1fr min-content;
148
148
  }
149
149
  }
150
150
  @media (min-width: 689px) and (min-width: 1401px) {
151
- .awsui_root_7nfqu_1sfpa_101.awsui_has-adaptive-widths-default_7nfqu_1sfpa_150:not(#\9) {
151
+ .awsui_root_7nfqu_3a4t2_101.awsui_has-adaptive-widths-default_7nfqu_3a4t2_150:not(#\9) {
152
152
  --awsui-max-content-width-g964ok: 1280px;
153
153
  }
154
154
  }
155
155
  @media (min-width: 689px) and (min-width: 1921px) {
156
- .awsui_root_7nfqu_1sfpa_101.awsui_has-adaptive-widths-default_7nfqu_1sfpa_150:not(#\9) {
156
+ .awsui_root_7nfqu_3a4t2_101.awsui_has-adaptive-widths-default_7nfqu_3a4t2_150:not(#\9) {
157
157
  --awsui-max-content-width-g964ok: 1440px;
158
158
  }
159
159
  }
160
160
  @media (min-width: 689px) and (min-width: 2541px) {
161
- .awsui_root_7nfqu_1sfpa_101.awsui_has-adaptive-widths-default_7nfqu_1sfpa_150:not(#\9) {
161
+ .awsui_root_7nfqu_3a4t2_101.awsui_has-adaptive-widths-default_7nfqu_3a4t2_150:not(#\9) {
162
162
  --awsui-max-content-width-g964ok: 1620px;
163
163
  }
164
164
  }
165
165
  @media (min-width: 689px) and (min-width: 1401px) {
166
- .awsui_root_7nfqu_1sfpa_101.awsui_has-adaptive-widths-dashboard_7nfqu_1sfpa_165:not(#\9) {
166
+ .awsui_root_7nfqu_3a4t2_101.awsui_has-adaptive-widths-dashboard_7nfqu_3a4t2_165:not(#\9) {
167
167
  --awsui-max-content-width-g964ok: 1280px;
168
168
  }
169
169
  }
170
170
  @media (min-width: 689px) and (min-width: 1921px) {
171
- .awsui_root_7nfqu_1sfpa_101.awsui_has-adaptive-widths-dashboard_7nfqu_1sfpa_165:not(#\9) {
171
+ .awsui_root_7nfqu_3a4t2_101.awsui_has-adaptive-widths-dashboard_7nfqu_3a4t2_165:not(#\9) {
172
172
  --awsui-max-content-width-g964ok: 1620px;
173
173
  }
174
174
  }
175
175
  @media (min-width: 689px) and (min-width: 2541px) {
176
- .awsui_root_7nfqu_1sfpa_101.awsui_has-adaptive-widths-dashboard_7nfqu_1sfpa_165:not(#\9) {
176
+ .awsui_root_7nfqu_3a4t2_101.awsui_has-adaptive-widths-dashboard_7nfqu_3a4t2_165:not(#\9) {
177
177
  --awsui-max-content-width-g964ok: 2160px;
178
178
  }
179
179
  }
180
180
 
181
- .awsui_navigation_7nfqu_1sfpa_180:not(#\9),
182
- .awsui_tools_7nfqu_1sfpa_181:not(#\9) {
181
+ .awsui_navigation_7nfqu_3a4t2_180:not(#\9),
182
+ .awsui_tools_7nfqu_3a4t2_181:not(#\9) {
183
183
  grid-row: 1/-1;
184
184
  grid-column: 1/-1;
185
185
  background: var(--color-background-container-content-4un1ap, #ffffff);
@@ -187,7 +187,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
187
187
  }
188
188
 
189
189
  @media (min-width: 689px) {
190
- .awsui_navigation_7nfqu_1sfpa_180:not(#\9) {
190
+ .awsui_navigation_7nfqu_3a4t2_180:not(#\9) {
191
191
  grid-area: navigation;
192
192
  inline-size: var(--awsui-navigation-width-g964ok);
193
193
  border-inline-end: 1px solid var(--color-border-divider-panel-side-93n0qu, #b6bec9);
@@ -195,7 +195,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
195
195
  }
196
196
 
197
197
  @media (min-width: 689px) {
198
- .awsui_tools_7nfqu_1sfpa_181:not(#\9) {
198
+ .awsui_tools_7nfqu_3a4t2_181:not(#\9) {
199
199
  grid-area: tools;
200
200
  inline-size: var(--awsui-tools-width-g964ok);
201
201
  border-inline-start: 1px solid var(--color-border-divider-panel-side-93n0qu, #b6bec9);
@@ -203,13 +203,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
203
203
  }
204
204
 
205
205
  @media (min-width: 689px) {
206
- .awsui_split-panel-side_7nfqu_1sfpa_205:not(#\9) {
206
+ .awsui_split-panel-side_7nfqu_3a4t2_205:not(#\9) {
207
207
  grid-area: sideSplitPanel;
208
208
  border-inline-start: 1px solid var(--color-border-divider-panel-side-93n0qu, #b6bec9);
209
209
  }
210
210
  }
211
211
 
212
- .awsui_split-panel-bottom_7nfqu_1sfpa_211:not(#\9) {
212
+ .awsui_split-panel-bottom_7nfqu_3a4t2_211:not(#\9) {
213
213
  position: sticky;
214
214
  z-index: 840;
215
215
  align-self: end;
@@ -217,61 +217,58 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
217
217
  grid-column: 1/-1;
218
218
  }
219
219
  @media (min-width: 689px) {
220
- .awsui_split-panel-bottom_7nfqu_1sfpa_211:not(#\9) {
220
+ .awsui_split-panel-bottom_7nfqu_3a4t2_211:not(#\9) {
221
221
  grid-column: 2/span 3;
222
222
  }
223
223
  }
224
224
 
225
- .awsui_panel-hidden_7nfqu_1sfpa_224:not(#\9) {
225
+ .awsui_panel-hidden_7nfqu_3a4t2_224:not(#\9) {
226
226
  display: none;
227
227
  }
228
228
 
229
- .awsui_toolbar-container_7nfqu_1sfpa_228:not(#\9) {
229
+ .awsui_toolbar-container_7nfqu_3a4t2_228:not(#\9) {
230
230
  grid-area: toolbar;
231
231
  block-size: 48px;
232
232
  border-block-end: 1px solid var(--color-border-divider-panel-bottom-dwyqvg, #b6bec9);
233
233
  }
234
234
 
235
- .awsui_notifications-container_7nfqu_1sfpa_234:not(#\9) {
235
+ .awsui_notifications-container_7nfqu_3a4t2_234:not(#\9) {
236
236
  grid-area: notifications;
237
237
  }
238
- .awsui_notifications-container_7nfqu_1sfpa_234:not(#\9):not(:empty) {
238
+ .awsui_notifications-container_7nfqu_3a4t2_234:not(#\9):not(:empty) {
239
239
  padding-block-start: var(--space-scaled-xs-26e2du, 8px);
240
240
  }
241
241
 
242
- .awsui_main-landmark_7nfqu_1sfpa_241:not(#\9) {
242
+ .awsui_main-landmark_7nfqu_3a4t2_241:not(#\9) {
243
243
  display: contents;
244
244
  }
245
245
 
246
- .awsui_main_7nfqu_1sfpa_241:not(#\9) {
246
+ .awsui_main_7nfqu_3a4t2_241:not(#\9) {
247
247
  grid-area: main;
248
248
  margin-block-start: var(--space-scaled-s-aqzyko, 12px);
249
249
  margin-block-end: var(--space-layout-content-bottom-noqzmw, 40px);
250
250
  }
251
- .awsui_main-disable-paddings_7nfqu_1sfpa_250:not(#\9) {
251
+ .awsui_main-disable-paddings_7nfqu_3a4t2_250:not(#\9) {
252
252
  grid-column: 1/-1;
253
253
  margin-block: 0;
254
254
  }
255
255
  @media (min-width: 689px) {
256
- .awsui_main-disable-paddings_7nfqu_1sfpa_250:not(#\9) {
256
+ .awsui_main-disable-paddings_7nfqu_3a4t2_250:not(#\9) {
257
257
  grid-column: 2/span 3;
258
258
  }
259
259
  }
260
260
 
261
- .awsui_content-header_7nfqu_1sfpa_260:not(#\9) {
261
+ .awsui_content-header_7nfqu_3a4t2_260:not(#\9) {
262
262
  margin-block-end: var(--space-content-header-padding-bottom-y2enua, 16px);
263
263
  }
264
264
 
265
- .awsui_content_7nfqu_1sfpa_260:not(#\9) {
265
+ .awsui_content_7nfqu_3a4t2_260:not(#\9) {
266
266
  display: contents;
267
267
  }
268
268
 
269
269
  /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
270
- .awsui_unfocusable-mobile_7nfqu_1sfpa_269 *:not(#\9) {
271
- visibility: hidden;
272
- }
273
- @media (min-width: 689px) {
274
- .awsui_unfocusable-mobile_7nfqu_1sfpa_269 *:not(#\9) {
275
- visibility: visible;
270
+ @media (max-width: 688px) {
271
+ .awsui_unfocusable-mobile_7nfqu_3a4t2_270 *:not(#\9) {
272
+ visibility: hidden;
276
273
  }
277
274
  }
package/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js CHANGED
@@ -2,21 +2,21 @@
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_7nfqu_1sfpa_101",
6
- "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1sfpa_150",
7
- "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1sfpa_165",
8
- "navigation": "awsui_navigation_7nfqu_1sfpa_180",
9
- "tools": "awsui_tools_7nfqu_1sfpa_181",
10
- "split-panel-side": "awsui_split-panel-side_7nfqu_1sfpa_205",
11
- "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1sfpa_211",
12
- "panel-hidden": "awsui_panel-hidden_7nfqu_1sfpa_224",
13
- "toolbar-container": "awsui_toolbar-container_7nfqu_1sfpa_228",
14
- "notifications-container": "awsui_notifications-container_7nfqu_1sfpa_234",
15
- "main-landmark": "awsui_main-landmark_7nfqu_1sfpa_241",
16
- "main": "awsui_main_7nfqu_1sfpa_241",
17
- "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1sfpa_250",
18
- "content-header": "awsui_content-header_7nfqu_1sfpa_260",
19
- "content": "awsui_content_7nfqu_1sfpa_260",
20
- "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1sfpa_269"
5
+ "root": "awsui_root_7nfqu_3a4t2_101",
6
+ "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_3a4t2_150",
7
+ "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_3a4t2_165",
8
+ "navigation": "awsui_navigation_7nfqu_3a4t2_180",
9
+ "tools": "awsui_tools_7nfqu_3a4t2_181",
10
+ "split-panel-side": "awsui_split-panel-side_7nfqu_3a4t2_205",
11
+ "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_3a4t2_211",
12
+ "panel-hidden": "awsui_panel-hidden_7nfqu_3a4t2_224",
13
+ "toolbar-container": "awsui_toolbar-container_7nfqu_3a4t2_228",
14
+ "notifications-container": "awsui_notifications-container_7nfqu_3a4t2_234",
15
+ "main-landmark": "awsui_main-landmark_7nfqu_3a4t2_241",
16
+ "main": "awsui_main_7nfqu_3a4t2_241",
17
+ "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_3a4t2_250",
18
+ "content-header": "awsui_content-header_7nfqu_3a4t2_260",
19
+ "content": "awsui_content_7nfqu_3a4t2_260",
20
+ "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_3a4t2_270"
21
21
  };
22
22
 
package/app-layout/visual-refresh-toolbar/toolbar/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAOjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAkB,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAM1E,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IAEnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAG1C,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAG/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAC1C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAGhC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC/C,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACvC,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1D;AAED,UAAU,mCAAmC;IAC3C,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,kBAAkB,EAGlB,YAAiB,GAClB,EAAE,mCAAmC,eAgHrC;AAED,eAAO,MAAM,gCAAgC,uGAA4D,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAOjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAkB,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAM1E,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IAEnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAG1C,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAG/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAC1C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAGhC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC/C,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACvC,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1D;AAED,UAAU,mCAAmC;IAC3C,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,YAAY,EAAE,YAAY,CAAC;CAC5B;AA0BD,wBAAgB,8BAA8B,CAAC,EAC7C,kBAAkB,EAGlB,YAAiB,GAClB,EAAE,mCAAmC,eAgHrC;AAED,eAAO,MAAM,gCAAgC,uGAA4D,CAAC"}
package/app-layout/visual-refresh-toolbar/toolbar/index.js CHANGED
@@ -10,13 +10,32 @@ import { DrawerTriggers } from './drawer-triggers';
10
10
  import TriggerButton from './trigger-button';
11
11
  import testutilStyles from '../../test-classes/styles.css.js';
12
12
  import styles from './styles.css.js';
13
+ // support compatibility with changes before this commit: cf0f2b0755af1a28ac7c3c9476418a7ea807d0fd
14
+ function convertLegacyProps(toolbarProps, legacyProps) {
15
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
16
+ return {
17
+ ariaLabels: (_a = toolbarProps.ariaLabels) !== null && _a !== void 0 ? _a : legacyProps.ariaLabels,
18
+ activeDrawerId: (_b = toolbarProps.activeDrawerId) !== null && _b !== void 0 ? _b : (_c = legacyProps.activeDrawer) === null || _c === void 0 ? void 0 : _c.id,
19
+ drawers: (_d = toolbarProps.drawers) !== null && _d !== void 0 ? _d : legacyProps.drawers,
20
+ drawersFocusRef: (_e = toolbarProps.drawersFocusRef) !== null && _e !== void 0 ? _e : (_f = legacyProps.drawersFocusControl) === null || _f === void 0 ? void 0 : _f.refs.toggle,
21
+ onActiveDrawerChange: (_g = toolbarProps.onActiveDrawerChange) !== null && _g !== void 0 ? _g : legacyProps.onActiveDrawerChange,
22
+ hasNavigation: (_h = toolbarProps.hasNavigation) !== null && _h !== void 0 ? _h : !!legacyProps.navigation,
23
+ navigationOpen: (_j = toolbarProps.navigationOpen) !== null && _j !== void 0 ? _j : legacyProps.navigationOpen,
24
+ navigationFocusRef: (_k = toolbarProps.navigationFocusRef) !== null && _k !== void 0 ? _k : (_l = legacyProps.navigationFocusControl) === null || _l === void 0 ? void 0 : _l.refs.toggle,
25
+ onNavigationToggle: (_m = toolbarProps.onNavigationToggle) !== null && _m !== void 0 ? _m : legacyProps.onNavigationToggle,
26
+ hasSplitPanel: (_o = toolbarProps.hasSplitPanel) !== null && _o !== void 0 ? _o : true,
27
+ splitPanelFocusRef: (_p = legacyProps.splitPanelFocusControl) === null || _p === void 0 ? void 0 : _p.refs.toggle,
28
+ splitPanelToggleProps: (_q = toolbarProps.splitPanelToggleProps) !== null && _q !== void 0 ? _q : Object.assign(Object.assign({}, legacyProps.splitPanelToggleConfig), { active: legacyProps.splitPanelOpen, controlId: legacyProps.splitPanelControlId, position: legacyProps.splitPanelPosition }),
29
+ onSplitPanelToggle: (_r = toolbarProps.onSplitPanelToggle) !== null && _r !== void 0 ? _r : legacyProps.onSplitPanelToggle,
30
+ };
31
+ }
13
32
  export function AppLayoutToolbarImplementation({ appLayoutInternals,
14
33
  // the value could be undefined if this component is loaded as a widget by a different app layout version
15
34
  // not testable in a single-version setup
16
35
  toolbarProps = {}, }) {
17
36
  var _a;
18
37
  const { breadcrumbs, discoveredBreadcrumbs, verticalOffsets, isMobile, toolbarState, setToolbarState, setToolbarHeight, } = appLayoutInternals;
19
- const { ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, hasNavigation, navigationOpen, navigationFocusRef, onNavigationToggle, hasSplitPanel, splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, } = toolbarProps;
38
+ const { ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, hasNavigation, navigationOpen, navigationFocusRef, onNavigationToggle, hasSplitPanel, splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, } = convertLegacyProps(toolbarProps, appLayoutInternals);
20
39
  // TODO: expose configuration property
21
40
  const pinnedToolbar = true;
22
41
  const ref = useRef(null);
package/app-layout/visual-refresh-toolbar/toolbar/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/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 React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { InternalBreadcrumbGroup } from '../../../breadcrumb-group/internal';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { Focusable } from '../../utils/use-focus-control';\nimport { AppLayoutInternals } from '../interfaces';\nimport { ToolbarSlot } from '../skeleton/slot-wrappers';\nimport { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SplitPanelToggleProps };\n\nexport interface ToolbarProps {\n ariaLabels?: AppLayoutProps.Labels;\n // navigation\n hasNavigation?: boolean;\n navigationOpen?: boolean;\n onNavigationToggle?: (open: boolean) => void;\n navigationFocusRef?: React.Ref<Focusable>;\n\n // breadcrumbs\n hasBreadcrumbsPortal?: boolean;\n\n // split panel\n hasSplitPanel?: boolean;\n splitPanelToggleProps?: SplitPanelToggleProps;\n splitPanelFocusRef?: React.Ref<Focusable>;\n onSplitPanelToggle?: () => void;\n\n // drawers\n activeDrawerId?: string | null;\n drawers?: ReadonlyArray<AppLayoutProps.Drawer>;\n drawersFocusRef?: React.Ref<Focusable>;\n onActiveDrawerChange?: (drawerId: string | null) => void;\n}\n\ninterface AppLayoutToolbarImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n toolbarProps: ToolbarProps;\n}\n\nexport function AppLayoutToolbarImplementation({\n appLayoutInternals,\n // the value could be undefined if this component is loaded as a widget by a different app layout version\n // not testable in a single-version setup\n toolbarProps = {},\n}: AppLayoutToolbarImplementationProps) {\n const {\n breadcrumbs,\n discoveredBreadcrumbs,\n verticalOffsets,\n isMobile,\n toolbarState,\n setToolbarState,\n setToolbarHeight,\n } = appLayoutInternals;\n const {\n ariaLabels,\n activeDrawerId,\n drawers,\n drawersFocusRef,\n onActiveDrawerChange,\n hasNavigation,\n navigationOpen,\n navigationFocusRef,\n onNavigationToggle,\n hasSplitPanel,\n splitPanelFocusRef,\n splitPanelToggleProps,\n onSplitPanelToggle,\n } = toolbarProps;\n // TODO: expose configuration property\n const pinnedToolbar = true;\n const ref = useRef<HTMLElement>(null);\n useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));\n useEffect(() => {\n return () => {\n setToolbarHeight(0);\n };\n // unmount effect only\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n let lastScrollY = window.scrollY;\n\n /* istanbul ignore next not testable in JSDOM */\n const updateScrollDirection = () => {\n if (pinnedToolbar) {\n setToolbarState('show');\n return;\n }\n const scrollY = window.scrollY;\n // 80 is an arbitrary number to have a pause before the toolbar scrolls out of view at the top of the page\n const direction = scrollY > lastScrollY && scrollY > 80 ? 'hide' : 'show';\n // 2 as a buffer to avoid mistaking minor accidental mouse moves as scroll\n if (direction !== toolbarState && (scrollY - lastScrollY > 2 || scrollY - lastScrollY < -2)) {\n setToolbarState(direction);\n }\n lastScrollY = scrollY > 0 ? scrollY : 0;\n };\n\n window.addEventListener('scroll', updateScrollDirection);\n return () => {\n window.removeEventListener('scroll', updateScrollDirection);\n };\n }, [pinnedToolbar, setToolbarState, toolbarState]);\n\n const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;\n\n return (\n <ToolbarSlot\n ref={ref}\n className={clsx(styles['universal-toolbar'], {\n [testutilStyles['mobile-bar']]: isMobile,\n [styles['toolbar-hidden']]: toolbarHidden,\n })}\n style={{\n insetBlockStart: toolbarHidden ? '-60px' : verticalOffsets.toolbar,\n }}\n >\n <div className={styles['toolbar-container']}>\n {hasNavigation && !navigationOpen && (\n <nav className={clsx(styles['universal-toolbar-nav'], testutilStyles['drawer-closed'])}>\n <TriggerButton\n ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n ariaExpanded={false}\n iconName=\"menu\"\n className={testutilStyles['navigation-toggle']}\n onClick={() => onNavigationToggle?.(true)}\n ref={navigationFocusRef}\n selected={navigationOpen}\n />\n </nav>\n )}\n {(breadcrumbs || discoveredBreadcrumbs) && (\n <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n {breadcrumbs}\n {discoveredBreadcrumbs && <InternalBreadcrumbGroup {...discoveredBreadcrumbs} />}\n </div>\n )}\n {((drawers && drawers.length > 0) || (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n <span className={clsx(styles['universal-toolbar-drawers'])}>\n <DrawerTriggers\n ariaLabels={ariaLabels}\n activeDrawerId={activeDrawerId ?? null}\n drawers={drawers ?? []}\n drawersFocusRef={drawersFocusRef}\n onActiveDrawerChange={onActiveDrawerChange}\n splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n splitPanelFocusRef={splitPanelFocusRef}\n onSplitPanelToggle={onSplitPanelToggle}\n />\n </span>\n )}\n </div>\n </ToolbarSlot>\n );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation);\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAElF,OAAO,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAItE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAyB,MAAM,mBAAmB,CAAC;AAC1E,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAiCrC,kGAAkG;AAClG,SAAS,kBAAkB,CAAC,YAA0B,EAAE,WAA+B;;IACrF,OAAO;QACL,UAAU,EAAE,MAAA,YAAY,CAAC,UAAU,mCAAI,WAAW,CAAC,UAAU;QAC7D,cAAc,EAAE,MAAA,YAAY,CAAC,cAAc,mCAAI,MAAA,WAAW,CAAC,YAAY,0CAAE,EAAE;QAC3E,OAAO,EAAE,MAAA,YAAY,CAAC,OAAO,mCAAI,WAAW,CAAC,OAAO;QACpD,eAAe,EAAE,MAAA,YAAY,CAAC,eAAe,mCAAI,MAAA,WAAW,CAAC,mBAAmB,0CAAE,IAAI,CAAC,MAAM;QAC7F,oBAAoB,EAAE,MAAA,YAAY,CAAC,oBAAoB,mCAAI,WAAW,CAAC,oBAAoB;QAC3F,aAAa,EAAE,MAAA,YAAY,CAAC,aAAa,mCAAI,CAAC,CAAC,WAAW,CAAC,UAAU;QACrE,cAAc,EAAE,MAAA,YAAY,CAAC,cAAc,mCAAI,WAAW,CAAC,cAAc;QACzE,kBAAkB,EAAE,MAAA,YAAY,CAAC,kBAAkB,mCAAI,MAAA,WAAW,CAAC,sBAAsB,0CAAE,IAAI,CAAC,MAAM;QACtG,kBAAkB,EAAE,MAAA,YAAY,CAAC,kBAAkB,mCAAI,WAAW,CAAC,kBAAkB;QACrF,aAAa,EAAE,MAAA,YAAY,CAAC,aAAa,mCAAI,IAAI;QACjD,kBAAkB,EAAE,MAAA,WAAW,CAAC,sBAAsB,0CAAE,IAAI,CAAC,MAAM;QACnE,qBAAqB,EAAE,MAAA,YAAY,CAAC,qBAAqB,mEACpD,WAAW,CAAC,sBAAsB,KACrC,MAAM,EAAE,WAAW,CAAC,cAAc,EAClC,SAAS,EAAE,WAAW,CAAC,mBAAmB,EAC1C,QAAQ,EAAE,WAAW,CAAC,kBAAkB,GACzC;QACD,kBAAkB,EAAE,MAAA,YAAY,CAAC,kBAAkB,mCAAI,WAAW,CAAC,kBAAkB;KACtF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,8BAA8B,CAAC,EAC7C,kBAAkB;AAClB,yGAAyG;AACzG,yCAAyC;AACzC,YAAY,GAAG,EAAE,GACmB;;IACpC,MAAM,EACJ,WAAW,EACX,qBAAqB,EACrB,eAAe,EACf,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,gBAAgB,GACjB,GAAG,kBAAkB,CAAC;IACvB,MAAM,EACJ,UAAU,EACV,cAAc,EACd,OAAO,EACP,eAAe,EACf,oBAAoB,EACpB,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,aAAa,EACb,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,GACnB,GAAG,kBAAkB,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAC;IACzD,sCAAsC;IACtC,MAAM,aAAa,GAAG,IAAI,CAAC;IAC3B,MAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IACtC,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC;IACzE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,gBAAgB,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC,CAAC;QACF,sBAAsB;QACtB,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC;QAEjC,gDAAgD;QAChD,MAAM,qBAAqB,GAAG,GAAG,EAAE;YACjC,IAAI,aAAa,EAAE;gBACjB,eAAe,CAAC,MAAM,CAAC,CAAC;gBACxB,OAAO;aACR;YACD,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;YAC/B,0GAA0G;YAC1G,MAAM,SAAS,GAAG,OAAO,GAAG,WAAW,IAAI,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;YAC1E,0EAA0E;YAC1E,IAAI,SAAS,KAAK,YAAY,IAAI,CAAC,OAAO,GAAG,WAAW,GAAG,CAAC,IAAI,OAAO,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE;gBAC3F,eAAe,CAAC,SAAS,CAAC,CAAC;aAC5B;YACD,WAAW,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1C,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,qBAAqB,CAAC,CAAC;QACzD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,qBAAqB,CAAC,CAAC;QAC9D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,EAAE,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC;IAEnD,MAAM,aAAa,GAAG,YAAY,KAAK,MAAM,IAAI,CAAC,aAAa,CAAC;IAEhE,OAAO,CACL,oBAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE;YAC3C,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,EAAE,QAAQ;YACxC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,aAAa;SAC1C,CAAC,EACF,KAAK,EAAE;YACL,eAAe,EAAE,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO;SACnE;QAED,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC;YACxC,aAAa,IAAI,CAAC,cAAc,IAAI,CACnC,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,uBAAuB,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;gBACpF,oBAAC,aAAa,IACZ,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,gBAAgB,mCAAI,SAAS,EACpD,YAAY,EAAE,KAAK,EACnB,QAAQ,EAAC,MAAM,EACf,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAG,IAAI,CAAC,EACzC,GAAG,EAAE,kBAAkB,EACvB,QAAQ,EAAE,cAAc,GACxB,CACE,CACP;YACA,CAAC,WAAW,IAAI,qBAAqB,CAAC,IAAI,CACzC,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,+BAA+B,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC;gBACtF,WAAW;gBACX,qBAAqB,IAAI,oBAAC,uBAAuB,oBAAK,qBAAqB,EAAI,CAC5E,CACP;YACA,CAAC,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,KAAI,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,SAAS,CAAA,CAAC,CAAC,IAAI,CAC3F,8BAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC;gBACxD,oBAAC,cAAc,IACb,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,IAAI,EACtC,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,EACtB,eAAe,EAAE,eAAe,EAChC,oBAAoB,EAAE,oBAAoB,EAC1C,qBAAqB,EAAE,CAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,SAAS,EAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,EAC3F,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,GACtC,CACG,CACR,CACG,CACM,CACf,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,gCAAgC,GAAG,yBAAyB,CAAC,8BAA8B,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { InternalBreadcrumbGroup } from '../../../breadcrumb-group/internal';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { Focusable } from '../../utils/use-focus-control';\nimport { AppLayoutInternals } from '../interfaces';\nimport { ToolbarSlot } from '../skeleton/slot-wrappers';\nimport { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SplitPanelToggleProps };\n\nexport interface ToolbarProps {\n ariaLabels?: AppLayoutProps.Labels;\n // navigation\n hasNavigation?: boolean;\n navigationOpen?: boolean;\n onNavigationToggle?: (open: boolean) => void;\n navigationFocusRef?: React.Ref<Focusable>;\n\n // breadcrumbs\n hasBreadcrumbsPortal?: boolean;\n\n // split panel\n hasSplitPanel?: boolean;\n splitPanelToggleProps?: SplitPanelToggleProps;\n splitPanelFocusRef?: React.Ref<Focusable>;\n onSplitPanelToggle?: () => void;\n\n // drawers\n activeDrawerId?: string | null;\n drawers?: ReadonlyArray<AppLayoutProps.Drawer>;\n drawersFocusRef?: React.Ref<Focusable>;\n onActiveDrawerChange?: (drawerId: string | null) => void;\n}\n\ninterface AppLayoutToolbarImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n toolbarProps: ToolbarProps;\n}\n\n// support compatibility with changes before this commit: cf0f2b0755af1a28ac7c3c9476418a7ea807d0fd\nfunction convertLegacyProps(toolbarProps: ToolbarProps, legacyProps: AppLayoutInternals): ToolbarProps {\n return {\n ariaLabels: toolbarProps.ariaLabels ?? legacyProps.ariaLabels,\n activeDrawerId: toolbarProps.activeDrawerId ?? legacyProps.activeDrawer?.id,\n drawers: toolbarProps.drawers ?? legacyProps.drawers,\n drawersFocusRef: toolbarProps.drawersFocusRef ?? legacyProps.drawersFocusControl?.refs.toggle,\n onActiveDrawerChange: toolbarProps.onActiveDrawerChange ?? legacyProps.onActiveDrawerChange,\n hasNavigation: toolbarProps.hasNavigation ?? !!legacyProps.navigation,\n navigationOpen: toolbarProps.navigationOpen ?? legacyProps.navigationOpen,\n navigationFocusRef: toolbarProps.navigationFocusRef ?? legacyProps.navigationFocusControl?.refs.toggle,\n onNavigationToggle: toolbarProps.onNavigationToggle ?? legacyProps.onNavigationToggle,\n hasSplitPanel: toolbarProps.hasSplitPanel ?? true,\n splitPanelFocusRef: legacyProps.splitPanelFocusControl?.refs.toggle,\n splitPanelToggleProps: toolbarProps.splitPanelToggleProps ?? {\n ...legacyProps.splitPanelToggleConfig,\n active: legacyProps.splitPanelOpen,\n controlId: legacyProps.splitPanelControlId,\n position: legacyProps.splitPanelPosition,\n },\n onSplitPanelToggle: toolbarProps.onSplitPanelToggle ?? legacyProps.onSplitPanelToggle,\n };\n}\n\nexport function AppLayoutToolbarImplementation({\n appLayoutInternals,\n // the value could be undefined if this component is loaded as a widget by a different app layout version\n // not testable in a single-version setup\n toolbarProps = {},\n}: AppLayoutToolbarImplementationProps) {\n const {\n breadcrumbs,\n discoveredBreadcrumbs,\n verticalOffsets,\n isMobile,\n toolbarState,\n setToolbarState,\n setToolbarHeight,\n } = appLayoutInternals;\n const {\n ariaLabels,\n activeDrawerId,\n drawers,\n drawersFocusRef,\n onActiveDrawerChange,\n hasNavigation,\n navigationOpen,\n navigationFocusRef,\n onNavigationToggle,\n hasSplitPanel,\n splitPanelFocusRef,\n splitPanelToggleProps,\n onSplitPanelToggle,\n } = convertLegacyProps(toolbarProps, appLayoutInternals);\n // TODO: expose configuration property\n const pinnedToolbar = true;\n const ref = useRef<HTMLElement>(null);\n useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));\n useEffect(() => {\n return () => {\n setToolbarHeight(0);\n };\n // unmount effect only\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n let lastScrollY = window.scrollY;\n\n /* istanbul ignore next not testable in JSDOM */\n const updateScrollDirection = () => {\n if (pinnedToolbar) {\n setToolbarState('show');\n return;\n }\n const scrollY = window.scrollY;\n // 80 is an arbitrary number to have a pause before the toolbar scrolls out of view at the top of the page\n const direction = scrollY > lastScrollY && scrollY > 80 ? 'hide' : 'show';\n // 2 as a buffer to avoid mistaking minor accidental mouse moves as scroll\n if (direction !== toolbarState && (scrollY - lastScrollY > 2 || scrollY - lastScrollY < -2)) {\n setToolbarState(direction);\n }\n lastScrollY = scrollY > 0 ? scrollY : 0;\n };\n\n window.addEventListener('scroll', updateScrollDirection);\n return () => {\n window.removeEventListener('scroll', updateScrollDirection);\n };\n }, [pinnedToolbar, setToolbarState, toolbarState]);\n\n const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;\n\n return (\n <ToolbarSlot\n ref={ref}\n className={clsx(styles['universal-toolbar'], {\n [testutilStyles['mobile-bar']]: isMobile,\n [styles['toolbar-hidden']]: toolbarHidden,\n })}\n style={{\n insetBlockStart: toolbarHidden ? '-60px' : verticalOffsets.toolbar,\n }}\n >\n <div className={styles['toolbar-container']}>\n {hasNavigation && !navigationOpen && (\n <nav className={clsx(styles['universal-toolbar-nav'], testutilStyles['drawer-closed'])}>\n <TriggerButton\n ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n ariaExpanded={false}\n iconName=\"menu\"\n className={testutilStyles['navigation-toggle']}\n onClick={() => onNavigationToggle?.(true)}\n ref={navigationFocusRef}\n selected={navigationOpen}\n />\n </nav>\n )}\n {(breadcrumbs || discoveredBreadcrumbs) && (\n <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n {breadcrumbs}\n {discoveredBreadcrumbs && <InternalBreadcrumbGroup {...discoveredBreadcrumbs} />}\n </div>\n )}\n {((drawers && drawers.length > 0) || (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n <span className={clsx(styles['universal-toolbar-drawers'])}>\n <DrawerTriggers\n ariaLabels={ariaLabels}\n activeDrawerId={activeDrawerId ?? null}\n drawers={drawers ?? []}\n drawersFocusRef={drawersFocusRef}\n onActiveDrawerChange={onActiveDrawerChange}\n splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n splitPanelFocusRef={splitPanelFocusRef}\n onSplitPanelToggle={onSplitPanelToggle}\n />\n </span>\n )}\n </div>\n </ToolbarSlot>\n );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation);\n"]}
package/button/internal.d.ts CHANGED
@@ -8,6 +8,7 @@ export type InternalButtonProps = Omit<ButtonProps, 'variant'> & {
8
8
  __iconClass?: string;
9
9
  __focusable?: boolean;
10
10
  __injectAnalyticsComponentMetadata?: boolean;
11
+ __title?: string;
11
12
  } & InternalBaseComponentProps<HTMLAnchorElement | HTMLButtonElement>;
12
13
  export declare const InternalButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "variant"> & {
13
14
  variant?: ButtonProps['variant'] | 'flashbar-icon' | 'breadcrumb-group' | 'menu-trigger' | 'modal-dismiss';
@@ -16,6 +17,7 @@ export declare const InternalButton: React.ForwardRefExoticComponent<Omit<Button
16
17
  __iconClass?: string | undefined;
17
18
  __focusable?: boolean | undefined;
18
19
  __injectAnalyticsComponentMetadata?: boolean | undefined;
20
+ __title?: string | undefined;
19
21
  } & InternalBaseComponentProps<HTMLAnchorElement | HTMLButtonElement> & React.RefAttributes<ButtonProps.Ref>>;
20
22
  export default InternalButton;
21
23
  //# sourceMappingURL=internal.d.ts.map
package/button/internal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/button/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAsB3D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAQlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAM3C,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC/D,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG,eAAe,GAAG,kBAAkB,GAAG,cAAc,GAAG,eAAe,CAAC;IAC3G,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kBAAkB,CAAC,EACf,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,GACnF,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C,GAAG,0BAA0B,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;AAEtE,eAAO,MAAM,cAAc;cAVf,WAAW,CAAC,SAAS,CAAC,GAAG,eAAe,GAAG,kBAAkB,GAAG,cAAc,GAAG,eAAe;;;;;;6GAmP3G,CAAC;AAEF,eAAe,cAAc,CAAC"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/button/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAsB3D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAQlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAM3C,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC/D,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG,eAAe,GAAG,kBAAkB,GAAG,cAAc,GAAG,eAAe,CAAC;IAC3G,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kBAAkB,CAAC,EACf,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,GACnF,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,GAAG,0BAA0B,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;AAEtE,eAAO,MAAM,cAAc;cAXf,WAAW,CAAC,SAAS,CAAC,GAAG,eAAe,GAAG,kBAAkB,GAAG,cAAc,GAAG,eAAe;;;;;;;6GAqP3G,CAAC;AAEF,eAAe,cAAc,CAAC"}
package/button/internal.js CHANGED
@@ -23,7 +23,7 @@ import analyticsSelectors from './analytics-metadata/styles.css.js';
23
23
  import styles from './styles.css.js';
24
24
  import testUtilStyles from './test-classes/styles.css.js';
25
25
  export const InternalButton = React.forwardRef((_a, ref) => {
26
- var { children, iconName, __iconClass, onClick, onFollow, iconAlign = 'left', iconUrl, iconSvg, iconAlt, variant = 'normal', loading = false, loadingText, disabled = false, disabledReason, wrapText = true, href, target, rel, download, formAction = 'submit', ariaLabel, ariaDescribedby, ariaExpanded, ariaControls, fullWidth, badge, __nativeAttributes, __internalRootRef = null, __focusable = false, __injectAnalyticsComponentMetadata = false } = _a, props = __rest(_a, ["children", "iconName", "__iconClass", "onClick", "onFollow", "iconAlign", "iconUrl", "iconSvg", "iconAlt", "variant", "loading", "loadingText", "disabled", "disabledReason", "wrapText", "href", "target", "rel", "download", "formAction", "ariaLabel", "ariaDescribedby", "ariaExpanded", "ariaControls", "fullWidth", "badge", "__nativeAttributes", "__internalRootRef", "__focusable", "__injectAnalyticsComponentMetadata"]);
26
+ var { children, iconName, __iconClass, onClick, onFollow, iconAlign = 'left', iconUrl, iconSvg, iconAlt, variant = 'normal', loading = false, loadingText, disabled = false, disabledReason, wrapText = true, href, target, rel, download, formAction = 'submit', ariaLabel, ariaDescribedby, ariaExpanded, ariaControls, fullWidth, badge, __nativeAttributes, __internalRootRef = null, __focusable = false, __injectAnalyticsComponentMetadata = false, __title } = _a, props = __rest(_a, ["children", "iconName", "__iconClass", "onClick", "onFollow", "iconAlign", "iconUrl", "iconSvg", "iconAlt", "variant", "loading", "loadingText", "disabled", "disabledReason", "wrapText", "href", "target", "rel", "download", "formAction", "ariaLabel", "ariaDescribedby", "ariaExpanded", "ariaControls", "fullWidth", "badge", "__nativeAttributes", "__internalRootRef", "__focusable", "__injectAnalyticsComponentMetadata", "__title"]);
27
27
  const [showTooltip, setShowTooltip] = useState(false);
28
28
  checkSafeUrl('Button', href);
29
29
  const isAnchor = Boolean(href);
@@ -101,7 +101,7 @@ export const InternalButton = React.forwardRef((_a, ref) => {
101
101
  // https://github.com/microsoft/TypeScript/issues/36659
102
102
  ref: useMergeRefs(buttonRef, __internalRootRef), 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls,
103
103
  // add ariaLabel as `title` as visible hint text
104
- title: ariaLabel, className: buttonClass, onClick: handleClick, [DATA_ATTR_FUNNEL_VALUE]: uniqueId }), getAnalyticsMetadataAttribute(analyticsMetadata)), getAnalyticsLabelAttribute(children ? `.${analyticsSelectors.label}` : ''));
104
+ title: __title !== null && __title !== void 0 ? __title : ariaLabel, className: buttonClass, onClick: handleClick, [DATA_ATTR_FUNNEL_VALUE]: uniqueId }), getAnalyticsMetadataAttribute(analyticsMetadata)), getAnalyticsLabelAttribute(children ? `.${analyticsSelectors.label}` : ''));
105
105
  const iconProps = {
106
106
  loading,
107
107
  iconName,
package/button/internal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/button/internal.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 React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport {\n getAnalyticsLabelAttribute,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FUNNEL_VALUE,\n getFunnelValueSelector,\n getNameFromSelector,\n getSubStepAllSelector,\n} from '../internal/analytics/selectors';\nimport LiveRegion from '../internal/components/live-region';\nimport Tooltip from '../internal/components/tooltip/index.js';\nimport { useButtonContext } from '../internal/context/button-context';\nimport { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';\nimport { fireCancelableEvent, isPlainLeftClick } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport useHiddenDescription from '../internal/hooks/use-hidden-description';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { usePerformanceMarks } from '../internal/hooks/use-performance-marks';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { GeneratedAnalyticsMetadataButtonFragment } from './analytics-metadata/interfaces';\nimport { ButtonIconProps, LeftIcon, RightIcon } from './icon-helper';\nimport { ButtonProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\nexport type InternalButtonProps = Omit<ButtonProps, 'variant'> & {\n variant?: ButtonProps['variant'] | 'flashbar-icon' | 'breadcrumb-group' | 'menu-trigger' | 'modal-dismiss';\n badge?: boolean;\n __nativeAttributes?:\n | (React.HTMLAttributes<HTMLAnchorElement> & React.HTMLAttributes<HTMLButtonElement>)\n | Record<`data-${string}`, string>;\n __iconClass?: string;\n __focusable?: boolean;\n __injectAnalyticsComponentMetadata?: boolean;\n} & InternalBaseComponentProps<HTMLAnchorElement | HTMLButtonElement>;\n\nexport const InternalButton = React.forwardRef(\n (\n {\n children,\n iconName,\n __iconClass,\n onClick,\n onFollow,\n iconAlign = 'left',\n iconUrl,\n iconSvg,\n iconAlt,\n variant = 'normal',\n loading = false,\n loadingText,\n disabled = false,\n disabledReason,\n wrapText = true,\n href,\n target,\n rel,\n download,\n formAction = 'submit',\n ariaLabel,\n ariaDescribedby,\n ariaExpanded,\n ariaControls,\n fullWidth,\n badge,\n __nativeAttributes,\n __internalRootRef = null,\n __focusable = false,\n __injectAnalyticsComponentMetadata = false,\n ...props\n }: InternalButtonProps,\n ref: React.Ref<ButtonProps.Ref>\n ) => {\n const [showTooltip, setShowTooltip] = useState(false);\n\n checkSafeUrl('Button', href);\n const isAnchor = Boolean(href);\n const isNotInteractive = loading || disabled;\n const isDisabledWithReason = (variant === 'normal' || variant === 'primary') && !!disabledReason && disabled;\n const hasAriaDisabled = (loading && !disabled) || (disabled && __focusable) || isDisabledWithReason;\n const shouldHaveContent =\n children && ['icon', 'inline-icon', 'flashbar-icon', 'modal-dismiss'].indexOf(variant) === -1;\n\n const buttonRef = useRef<HTMLElement>(null);\n useForwardFocus(ref, buttonRef);\n\n const buttonContext = useButtonContext();\n\n const uniqueId = useUniqueId('button');\n const { funnelInteractionId } = useFunnel();\n const { stepNumber, stepNameSelector } = useFunnelStep();\n const { subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n const performanceMarkAttributes = usePerformanceMarks(\n 'primaryButton',\n variant === 'primary',\n buttonRef,\n () => ({\n loading,\n disabled,\n text: buttonRef.current?.innerText,\n }),\n [loading, disabled]\n );\n\n const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);\n\n const handleClick = (event: React.MouseEvent) => {\n if (isNotInteractive) {\n return event.preventDefault();\n }\n\n if (isAnchor && isPlainLeftClick(event)) {\n fireCancelableEvent(onFollow, { href, target }, event);\n\n if ((iconName === 'external' || target === '_blank') && funnelInteractionId) {\n const stepName = getNameFromSelector(stepNameSelector);\n const subStepName = getNameFromSelector(subStepNameSelector);\n\n FunnelMetrics.externalLinkInteracted({\n funnelInteractionId,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n elementSelector: getFunnelValueSelector(uniqueId),\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n }\n\n const { altKey, button, ctrlKey, metaKey, shiftKey } = event;\n fireCancelableEvent(onClick, { altKey, button, ctrlKey, metaKey, shiftKey }, event);\n buttonContext.onClick({ variant });\n };\n\n const buttonClass = clsx(props.className, styles.button, styles[`variant-${variant}`], {\n [styles.disabled]: isNotInteractive,\n [styles['button-no-wrap']]: !wrapText,\n [styles['button-no-text']]: !shouldHaveContent,\n [styles['full-width']]: shouldHaveContent && fullWidth,\n [styles.link]: isAnchor,\n });\n\n const explicitTabIndex =\n __nativeAttributes && 'tabIndex' in __nativeAttributes ? __nativeAttributes.tabIndex : undefined;\n const { tabIndex } = useSingleTabStopNavigation(buttonRef, {\n tabIndex: isAnchor && isNotInteractive ? -1 : explicitTabIndex,\n });\n\n const analyticsMetadata: GeneratedAnalyticsMetadataButtonFragment = disabled\n ? {}\n : {\n action: 'click',\n detail: { label: { root: 'self' } },\n };\n if (__injectAnalyticsComponentMetadata) {\n analyticsMetadata.component = {\n name: 'awsui.Button',\n label: { root: 'self' },\n properties: { variant, disabled: `${disabled}` },\n };\n }\n\n const buttonProps = {\n ...props,\n ...__nativeAttributes,\n ...performanceMarkAttributes,\n tabIndex,\n // https://github.com/microsoft/TypeScript/issues/36659\n ref: useMergeRefs(buttonRef, __internalRootRef),\n 'aria-label': ariaLabel,\n 'aria-describedby': ariaDescribedby,\n 'aria-expanded': ariaExpanded,\n 'aria-controls': ariaControls,\n // add ariaLabel as `title` as visible hint text\n title: ariaLabel,\n className: buttonClass,\n onClick: handleClick,\n [DATA_ATTR_FUNNEL_VALUE]: uniqueId,\n ...getAnalyticsMetadataAttribute(analyticsMetadata),\n ...getAnalyticsLabelAttribute(children ? `.${analyticsSelectors.label}` : ''),\n } as const;\n\n const iconProps: ButtonIconProps = {\n loading,\n iconName,\n iconAlign,\n iconUrl,\n iconSvg,\n iconAlt,\n variant,\n badge,\n iconClass: __iconClass,\n iconSize: variant === 'modal-dismiss' ? 'medium' : 'normal',\n };\n const buttonContent = (\n <>\n <LeftIcon {...iconProps} />\n {shouldHaveContent && <span className={clsx(styles.content, analyticsSelectors.label)}>{children}</span>}\n <RightIcon {...iconProps} />\n </>\n );\n\n const { loadingButtonCount } = useFunnel();\n useEffect(() => {\n if (loading) {\n loadingButtonCount.current++;\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n loadingButtonCount.current--;\n };\n }\n }, [loading, loadingButtonCount]);\n\n if (isAnchor) {\n return (\n // https://github.com/yannickcr/eslint-plugin-react/issues/2962\n // eslint-disable-next-line react/jsx-no-target-blank\n <>\n <a\n {...buttonProps}\n href={href}\n target={target}\n // security recommendation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target\n rel={rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined)}\n aria-disabled={isNotInteractive ? true : undefined}\n download={download}\n >\n {buttonContent}\n </a>\n {loading && loadingText && <LiveRegion>{loadingText}</LiveRegion>}\n </>\n );\n }\n\n return (\n <>\n <button\n {...buttonProps}\n type={formAction === 'none' ? 'button' : 'submit'}\n disabled={disabled && !__focusable && !isDisabledWithReason}\n aria-disabled={hasAriaDisabled ? true : undefined}\n onFocus={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n onBlur={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n onMouseEnter={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n onMouseLeave={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n {...(isDisabledWithReason ? targetProps : {})}\n >\n {buttonContent}\n {isDisabledWithReason && (\n <>\n {descriptionEl}\n {showTooltip && (\n <Tooltip\n className={testUtilStyles['disabled-reason-tooltip']}\n trackRef={buttonRef}\n value={disabledReason!}\n />\n )}\n </>\n )}\n </button>\n {loading && loadingText && <LiveRegion>{loadingText}</LiveRegion>}\n </>\n );\n }\n);\n\nexport default InternalButton;\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/button/internal.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 React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport {\n getAnalyticsLabelAttribute,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FUNNEL_VALUE,\n getFunnelValueSelector,\n getNameFromSelector,\n getSubStepAllSelector,\n} from '../internal/analytics/selectors';\nimport LiveRegion from '../internal/components/live-region';\nimport Tooltip from '../internal/components/tooltip/index.js';\nimport { useButtonContext } from '../internal/context/button-context';\nimport { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';\nimport { fireCancelableEvent, isPlainLeftClick } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport useHiddenDescription from '../internal/hooks/use-hidden-description';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { usePerformanceMarks } from '../internal/hooks/use-performance-marks';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { GeneratedAnalyticsMetadataButtonFragment } from './analytics-metadata/interfaces';\nimport { ButtonIconProps, LeftIcon, RightIcon } from './icon-helper';\nimport { ButtonProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\nexport type InternalButtonProps = Omit<ButtonProps, 'variant'> & {\n variant?: ButtonProps['variant'] | 'flashbar-icon' | 'breadcrumb-group' | 'menu-trigger' | 'modal-dismiss';\n badge?: boolean;\n __nativeAttributes?:\n | (React.HTMLAttributes<HTMLAnchorElement> & React.HTMLAttributes<HTMLButtonElement>)\n | Record<`data-${string}`, string>;\n __iconClass?: string;\n __focusable?: boolean;\n __injectAnalyticsComponentMetadata?: boolean;\n __title?: string;\n} & InternalBaseComponentProps<HTMLAnchorElement | HTMLButtonElement>;\n\nexport const InternalButton = React.forwardRef(\n (\n {\n children,\n iconName,\n __iconClass,\n onClick,\n onFollow,\n iconAlign = 'left',\n iconUrl,\n iconSvg,\n iconAlt,\n variant = 'normal',\n loading = false,\n loadingText,\n disabled = false,\n disabledReason,\n wrapText = true,\n href,\n target,\n rel,\n download,\n formAction = 'submit',\n ariaLabel,\n ariaDescribedby,\n ariaExpanded,\n ariaControls,\n fullWidth,\n badge,\n __nativeAttributes,\n __internalRootRef = null,\n __focusable = false,\n __injectAnalyticsComponentMetadata = false,\n __title,\n ...props\n }: InternalButtonProps,\n ref: React.Ref<ButtonProps.Ref>\n ) => {\n const [showTooltip, setShowTooltip] = useState(false);\n\n checkSafeUrl('Button', href);\n const isAnchor = Boolean(href);\n const isNotInteractive = loading || disabled;\n const isDisabledWithReason = (variant === 'normal' || variant === 'primary') && !!disabledReason && disabled;\n const hasAriaDisabled = (loading && !disabled) || (disabled && __focusable) || isDisabledWithReason;\n const shouldHaveContent =\n children && ['icon', 'inline-icon', 'flashbar-icon', 'modal-dismiss'].indexOf(variant) === -1;\n\n const buttonRef = useRef<HTMLElement>(null);\n useForwardFocus(ref, buttonRef);\n\n const buttonContext = useButtonContext();\n\n const uniqueId = useUniqueId('button');\n const { funnelInteractionId } = useFunnel();\n const { stepNumber, stepNameSelector } = useFunnelStep();\n const { subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n const performanceMarkAttributes = usePerformanceMarks(\n 'primaryButton',\n variant === 'primary',\n buttonRef,\n () => ({\n loading,\n disabled,\n text: buttonRef.current?.innerText,\n }),\n [loading, disabled]\n );\n\n const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);\n\n const handleClick = (event: React.MouseEvent) => {\n if (isNotInteractive) {\n return event.preventDefault();\n }\n\n if (isAnchor && isPlainLeftClick(event)) {\n fireCancelableEvent(onFollow, { href, target }, event);\n\n if ((iconName === 'external' || target === '_blank') && funnelInteractionId) {\n const stepName = getNameFromSelector(stepNameSelector);\n const subStepName = getNameFromSelector(subStepNameSelector);\n\n FunnelMetrics.externalLinkInteracted({\n funnelInteractionId,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n elementSelector: getFunnelValueSelector(uniqueId),\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n }\n\n const { altKey, button, ctrlKey, metaKey, shiftKey } = event;\n fireCancelableEvent(onClick, { altKey, button, ctrlKey, metaKey, shiftKey }, event);\n buttonContext.onClick({ variant });\n };\n\n const buttonClass = clsx(props.className, styles.button, styles[`variant-${variant}`], {\n [styles.disabled]: isNotInteractive,\n [styles['button-no-wrap']]: !wrapText,\n [styles['button-no-text']]: !shouldHaveContent,\n [styles['full-width']]: shouldHaveContent && fullWidth,\n [styles.link]: isAnchor,\n });\n\n const explicitTabIndex =\n __nativeAttributes && 'tabIndex' in __nativeAttributes ? __nativeAttributes.tabIndex : undefined;\n const { tabIndex } = useSingleTabStopNavigation(buttonRef, {\n tabIndex: isAnchor && isNotInteractive ? -1 : explicitTabIndex,\n });\n\n const analyticsMetadata: GeneratedAnalyticsMetadataButtonFragment = disabled\n ? {}\n : {\n action: 'click',\n detail: { label: { root: 'self' } },\n };\n if (__injectAnalyticsComponentMetadata) {\n analyticsMetadata.component = {\n name: 'awsui.Button',\n label: { root: 'self' },\n properties: { variant, disabled: `${disabled}` },\n };\n }\n\n const buttonProps = {\n ...props,\n ...__nativeAttributes,\n ...performanceMarkAttributes,\n tabIndex,\n // https://github.com/microsoft/TypeScript/issues/36659\n ref: useMergeRefs(buttonRef, __internalRootRef),\n 'aria-label': ariaLabel,\n 'aria-describedby': ariaDescribedby,\n 'aria-expanded': ariaExpanded,\n 'aria-controls': ariaControls,\n // add ariaLabel as `title` as visible hint text\n title: __title ?? ariaLabel,\n className: buttonClass,\n onClick: handleClick,\n [DATA_ATTR_FUNNEL_VALUE]: uniqueId,\n ...getAnalyticsMetadataAttribute(analyticsMetadata),\n ...getAnalyticsLabelAttribute(children ? `.${analyticsSelectors.label}` : ''),\n } as const;\n\n const iconProps: ButtonIconProps = {\n loading,\n iconName,\n iconAlign,\n iconUrl,\n iconSvg,\n iconAlt,\n variant,\n badge,\n iconClass: __iconClass,\n iconSize: variant === 'modal-dismiss' ? 'medium' : 'normal',\n };\n const buttonContent = (\n <>\n <LeftIcon {...iconProps} />\n {shouldHaveContent && <span className={clsx(styles.content, analyticsSelectors.label)}>{children}</span>}\n <RightIcon {...iconProps} />\n </>\n );\n\n const { loadingButtonCount } = useFunnel();\n useEffect(() => {\n if (loading) {\n loadingButtonCount.current++;\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n loadingButtonCount.current--;\n };\n }\n }, [loading, loadingButtonCount]);\n\n if (isAnchor) {\n return (\n // https://github.com/yannickcr/eslint-plugin-react/issues/2962\n // eslint-disable-next-line react/jsx-no-target-blank\n <>\n <a\n {...buttonProps}\n href={href}\n target={target}\n // security recommendation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target\n rel={rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined)}\n aria-disabled={isNotInteractive ? true : undefined}\n download={download}\n >\n {buttonContent}\n </a>\n {loading && loadingText && <LiveRegion>{loadingText}</LiveRegion>}\n </>\n );\n }\n\n return (\n <>\n <button\n {...buttonProps}\n type={formAction === 'none' ? 'button' : 'submit'}\n disabled={disabled && !__focusable && !isDisabledWithReason}\n aria-disabled={hasAriaDisabled ? true : undefined}\n onFocus={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n onBlur={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n onMouseEnter={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n onMouseLeave={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n {...(isDisabledWithReason ? targetProps : {})}\n >\n {buttonContent}\n {isDisabledWithReason && (\n <>\n {descriptionEl}\n {showTooltip && (\n <Tooltip\n className={testUtilStyles['disabled-reason-tooltip']}\n trackRef={buttonRef}\n value={disabledReason!}\n />\n )}\n </>\n )}\n </button>\n {loading && loadingText && <LiveRegion>{loadingText}</LiveRegion>}\n </>\n );\n }\n);\n\nexport default InternalButton;\n"]}
package/button-dropdown/interfaces.d.ts CHANGED
@@ -7,7 +7,7 @@ import { BaseNavigationDetail, CancelableEventHandler } from '../internal/events
7
7
  import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
8
8
  export interface ButtonDropdownProps extends BaseComponentProps, ExpandToViewport {
9
9
  /**
10
- * Array of objects with a number of suppoted types.
10
+ * Array of objects with a number of supported types.
11
11
  *
12
12
  * The following properties are supported across all types:
13
13
  *
package/button-dropdown/interfaces.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button-dropdown/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { ButtonProps } from '../button/interfaces';\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { ExpandToViewport } from '../internal/components/dropdown/interfaces';\nimport { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface ButtonDropdownProps extends BaseComponentProps, ExpandToViewport {\n /**\n * Array of objects with a number of suppoted types.\n *\n * The following properties are supported across all types:\n *\n * - `type` (string) - The type of the item. Can be `action`, `group`, `checkbox`. Defaults to `action` if `items` undefined and `group` otherwise.\n * - `id` (string) - allows to identify the item that the user clicked on. Mandatory for individual items, optional for categories.\n * - `text` (string) - description shown in the menu for this item. Mandatory for individual items, optional for categories.\n * - `lang` (string) - (Optional) The language of the item, provided as a BCP 47 language tag.\n * - `disabled` (boolean) - whether the item is disabled. Disabled items are not clickable, but they can be highlighted with the keyboard to make them accessible.\n * - `disabledReason` (string) - (Optional) Displays text near the `text` property when item is disabled. Use to provide additional context.\n * - `description` (string) - additional data that will be passed to a `data-description` attribute.\n *\n * ### action\n *\n * - `href` (string) - (Optional) Defines the target URL of the menu item, turning it into a link.\n * - `external` (boolean) - Marks a menu item as external by adding an icon after the menu item text. The link will open in a new tab when clicked. Note that this only works when `href` is also provided.\n * - `externalIconAriaLabel` (string) - Adds an `aria-label` to the external icon.\n * - `iconName` (string) - (Optional) Specifies the name of the icon, used with the [icon component](/components/icon/).\n * - `iconAlt` (string) - (Optional) Specifies alternate text for the icon when using `iconUrl`.\n * - `iconUrl` (string) - (Optional) Specifies the URL of a custom icon.\n * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n *\n * ### checkbox\n *\n * When `type` is set to \"checkbox\", the values set to `href`, `external` and `externalIconAriaLabel` will be ignored.\n *\n * - `checked` (boolean) - Controls the state of the checkbox item.\n * - `iconName` (string) - (Optional) Specifies the name of the icon, used with the [icon component](/components/icon/).\n * - `iconAlt` (string) - (Optional) Specifies alternate text for the icon when using `iconUrl`.\n * - `iconUrl` (string) - (Optional) Specifies the URL of a custom icon.\n * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n *\n * ### group\n *\n * - `items` (ReadonlyArray<Item>) - an array of item objects. Items will be rendered as nested menu items but only for the first nesting level, multi-nesting is not supported.\n * An item which belongs to nested group has the following properties: `id`, `text`, `disabled`, and `description`.\n *\n */\n items: ReadonlyArray<ButtonDropdownProps.ItemOrGroup>;\n /**\n * Determines whether the button dropdown is disabled. Users cannot interact with the control if it's disabled.\n */\n disabled?: boolean;\n /**\n * Provides a reason why the button dropdown is disabled (only when `disabled` is `true`).\n * If provided, the disabled button becomes focusable.\n */\n disabledReason?: string;\n /**\n * Renders the button as being in a loading state. It takes precedence over the `disabled` if both are set to `true`.\n * It prevents clicks.\n */\n loading?: boolean;\n /**\n * Specifies the text that screen reader announces when the button dropdown is in a loading state.\n */\n loadingText?: string;\n /** Determines the general styling of the button dropdown.\n * * `primary` for primary buttons\n * * `normal` for secondary buttons\n * * `icon` for icon buttons\n * * `inline-icon` for icon buttons with no outer padding\n */\n variant?: ButtonDropdownProps.Variant;\n /**\n * Controls expandability of the item groups.\n */\n expandableGroups?: boolean;\n /**\n * Adds `aria-label` to the button dropdown trigger.\n * Use this to provide an accessible name for buttons that don't have visible text.\n */\n ariaLabel?: string;\n /**\n * Text displayed in the button dropdown trigger.\n * @displayname text\n */\n children?: React.ReactNode;\n /**\n * Called when the user clicks on an item, and the item is not disabled. The event detail object contains the id of the clicked item.\n */\n onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n /**\n * Called when the user clicks on an item with the left mouse button without pressing\n * modifier keys (that is, CTRL, ALT, SHIFT, META), and the item has an `href` set.\n */\n onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n /**\n * A standalone action that is shown prior to the dropdown trigger.\n * Use it with \"primary\" and \"normal\" variant only.\n *\n * Main action properties:\n * * `text` (string) - Specifies the text shown in the main action.\n * * `external` (boolean) - Marks the main action as external by adding an icon after the text. The link will open in a new tab when clicked. Note that this only works when `href` is also provided.\n * * `externalIconAriaLabel` (string) - Adds an ARIA label to the external icon.\n *\n * The main action also supports the following properties of the [button](/components/button/?tabId=api) component:\n * `ariaLabel`, `disabled`, `loading`, `loadingText`, `href`, `target`, `rel`, `download`, `iconAlt`, `iconName`, `iconUrl`, `iconSvg`, `onClick`, `onFollow`.\n */\n mainAction?: ButtonDropdownProps.MainAction;\n}\n\nexport namespace ButtonDropdownProps {\n export type Variant = 'normal' | 'primary' | 'icon' | 'inline-icon';\n export type ItemType = 'action' | 'group';\n\n export interface MainAction {\n text: string;\n ariaLabel?: string;\n onClick?: CancelableEventHandler<ButtonProps.ClickDetail>;\n onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;\n disabled?: boolean;\n disabledReason?: string;\n loading?: boolean;\n loadingText?: string;\n href?: string;\n target?: string;\n rel?: string;\n download?: boolean | string;\n external?: boolean;\n externalIconAriaLabel?: string;\n iconAlt?: string;\n iconName?: IconProps.Name;\n iconUrl?: string;\n iconSvg?: React.ReactNode;\n }\n\n export interface Item {\n itemType?: ItemType;\n id: string;\n text: string;\n lang?: string;\n disabled?: boolean;\n disabledReason?: string;\n description?: string;\n href?: string;\n external?: boolean;\n externalIconAriaLabel?: string;\n iconAlt?: string;\n iconName?: IconProps.Name;\n iconUrl?: string;\n iconSvg?: React.ReactNode;\n }\n\n export interface CheckboxItem\n extends Omit<ButtonDropdownProps.Item, 'href' | 'external' | 'externalIconAriaLabel' | 'itemType'> {\n itemType: 'checkbox';\n checked: boolean;\n }\n\n export interface ItemGroup extends Omit<Item, 'id' | 'text' | 'itemType'> {\n itemType?: 'group';\n id?: string;\n text?: string;\n items: Items;\n }\n\n export type ItemOrGroup = Item | CheckboxItem | ItemGroup;\n\n export type Items = ReadonlyArray<ItemOrGroup>;\n\n export interface ItemClickDetails extends BaseNavigationDetail {\n id: string;\n checked?: boolean;\n }\n\n export interface Ref {\n /**\n * Focuses the underlying native button.\n */\n focus(): void;\n }\n}\n\nexport interface ButtonDropdownSettings {\n // this means whether action is required to make group expand\n hasExpandableGroups: boolean;\n // on smaller screens expandable groups are integrated into parent dropdown\n // this changes keyboard navigation, highlight and activation behavior for parent dropdown\n isInRestrictedView?: boolean;\n}\n\nexport interface HighlightProps {\n targetItem: ButtonDropdownProps.ItemOrGroup | null;\n isHighlighted: (item: ButtonDropdownProps.ItemOrGroup) => boolean;\n isKeyboardHighlight: (item: ButtonDropdownProps.ItemOrGroup) => boolean;\n isExpanded: (group: ButtonDropdownProps.ItemGroup) => boolean;\n highlightItem: (item: ButtonDropdownProps.ItemOrGroup) => void;\n}\n\nexport type GroupToggle = (item: ButtonDropdownProps.ItemGroup, event: React.SyntheticEvent) => void;\nexport type ItemActivate = (\n item: ButtonDropdownProps.Item | ButtonDropdownProps.CheckboxItem,\n event: React.MouseEvent | React.KeyboardEvent\n) => void;\n\nexport interface CategoryProps extends HighlightProps {\n item: ButtonDropdownProps.ItemGroup;\n onGroupToggle: GroupToggle;\n onItemActivate: ItemActivate;\n disabled: boolean;\n lastInDropdown: boolean;\n expandToViewport?: boolean;\n variant?: ItemListProps['variant'];\n position?: string;\n}\n\nexport interface ItemListProps extends HighlightProps {\n items: ButtonDropdownProps.Items;\n onGroupToggle: GroupToggle;\n onItemActivate: ItemActivate;\n categoryDisabled?: boolean;\n hasExpandableGroups?: boolean;\n hasCategoryHeader?: boolean;\n lastInDropdown: boolean;\n expandToViewport?: boolean;\n variant?: InternalButtonDropdownProps['variant'];\n position?: string;\n}\n\nexport interface LinkItem extends ButtonDropdownProps.Item {\n href: string;\n}\n\nexport interface ItemProps {\n item: ButtonDropdownProps.Item | ButtonDropdownProps.CheckboxItem | LinkItem;\n disabled: boolean;\n highlighted: boolean;\n onItemActivate: ItemActivate;\n highlightItem: (item: ButtonDropdownProps.ItemOrGroup) => void;\n showDivider: boolean;\n hasCategoryHeader: boolean;\n isKeyboardHighlighted?: boolean;\n variant?: ItemListProps['variant'];\n position?: string;\n}\n\nexport interface InternalItem extends ButtonDropdownProps.Item {\n badge?: boolean;\n}\n\nexport interface InternalItemGroup extends Omit<ButtonDropdownProps.ItemGroup, 'items'> {\n items: InternalItems;\n}\n\nexport type InternalItems = ReadonlyArray<InternalItemOrGroup>;\n\nexport type InternalItemOrGroup = InternalItem | ButtonDropdownProps.CheckboxItem | InternalItemGroup;\n\nexport interface InternalButtonDropdownProps\n extends Omit<ButtonDropdownProps, 'variant' | 'items'>,\n InternalBaseComponentProps {\n customTriggerBuilder?: (props: CustomTriggerProps) => React.ReactNode;\n variant?: ButtonDropdownProps['variant'] | 'navigation';\n items: ReadonlyArray<InternalItemOrGroup>;\n\n /**\n * Optional text that is displayed as the title at the top of the dropdown.\n */\n title?: string;\n\n /**\n * Optional text that is displayed underneath the title at the top of the dropdown.\n */\n description?: string;\n\n /**\n * Determines that the dropdown should preferably be aligned to the center of the trigger\n * instead of dropping left or right.\n */\n preferCenter?: boolean;\n}\n\nexport interface CustomTriggerProps {\n triggerRef: React.Ref<HTMLElement>;\n testUtilsClass: string;\n ariaLabel: string | undefined;\n disabled: boolean;\n disabledReason?: string;\n isOpen: boolean;\n onClick: () => void;\n ariaExpanded: boolean;\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button-dropdown/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { ButtonProps } from '../button/interfaces';\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { ExpandToViewport } from '../internal/components/dropdown/interfaces';\nimport { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface ButtonDropdownProps extends BaseComponentProps, ExpandToViewport {\n /**\n * Array of objects with a number of supported types.\n *\n * The following properties are supported across all types:\n *\n * - `type` (string) - The type of the item. Can be `action`, `group`, `checkbox`. Defaults to `action` if `items` undefined and `group` otherwise.\n * - `id` (string) - allows to identify the item that the user clicked on. Mandatory for individual items, optional for categories.\n * - `text` (string) - description shown in the menu for this item. Mandatory for individual items, optional for categories.\n * - `lang` (string) - (Optional) The language of the item, provided as a BCP 47 language tag.\n * - `disabled` (boolean) - whether the item is disabled. Disabled items are not clickable, but they can be highlighted with the keyboard to make them accessible.\n * - `disabledReason` (string) - (Optional) Displays text near the `text` property when item is disabled. Use to provide additional context.\n * - `description` (string) - additional data that will be passed to a `data-description` attribute.\n *\n * ### action\n *\n * - `href` (string) - (Optional) Defines the target URL of the menu item, turning it into a link.\n * - `external` (boolean) - Marks a menu item as external by adding an icon after the menu item text. The link will open in a new tab when clicked. Note that this only works when `href` is also provided.\n * - `externalIconAriaLabel` (string) - Adds an `aria-label` to the external icon.\n * - `iconName` (string) - (Optional) Specifies the name of the icon, used with the [icon component](/components/icon/).\n * - `iconAlt` (string) - (Optional) Specifies alternate text for the icon when using `iconUrl`.\n * - `iconUrl` (string) - (Optional) Specifies the URL of a custom icon.\n * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n *\n * ### checkbox\n *\n * When `type` is set to \"checkbox\", the values set to `href`, `external` and `externalIconAriaLabel` will be ignored.\n *\n * - `checked` (boolean) - Controls the state of the checkbox item.\n * - `iconName` (string) - (Optional) Specifies the name of the icon, used with the [icon component](/components/icon/).\n * - `iconAlt` (string) - (Optional) Specifies alternate text for the icon when using `iconUrl`.\n * - `iconUrl` (string) - (Optional) Specifies the URL of a custom icon.\n * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n *\n * ### group\n *\n * - `items` (ReadonlyArray<Item>) - an array of item objects. Items will be rendered as nested menu items but only for the first nesting level, multi-nesting is not supported.\n * An item which belongs to nested group has the following properties: `id`, `text`, `disabled`, and `description`.\n *\n */\n items: ReadonlyArray<ButtonDropdownProps.ItemOrGroup>;\n /**\n * Determines whether the button dropdown is disabled. Users cannot interact with the control if it's disabled.\n */\n disabled?: boolean;\n /**\n * Provides a reason why the button dropdown is disabled (only when `disabled` is `true`).\n * If provided, the disabled button becomes focusable.\n */\n disabledReason?: string;\n /**\n * Renders the button as being in a loading state. It takes precedence over the `disabled` if both are set to `true`.\n * It prevents clicks.\n */\n loading?: boolean;\n /**\n * Specifies the text that screen reader announces when the button dropdown is in a loading state.\n */\n loadingText?: string;\n /** Determines the general styling of the button dropdown.\n * * `primary` for primary buttons\n * * `normal` for secondary buttons\n * * `icon` for icon buttons\n * * `inline-icon` for icon buttons with no outer padding\n */\n variant?: ButtonDropdownProps.Variant;\n /**\n * Controls expandability of the item groups.\n */\n expandableGroups?: boolean;\n /**\n * Adds `aria-label` to the button dropdown trigger.\n * Use this to provide an accessible name for buttons that don't have visible text.\n */\n ariaLabel?: string;\n /**\n * Text displayed in the button dropdown trigger.\n * @displayname text\n */\n children?: React.ReactNode;\n /**\n * Called when the user clicks on an item, and the item is not disabled. The event detail object contains the id of the clicked item.\n */\n onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n /**\n * Called when the user clicks on an item with the left mouse button without pressing\n * modifier keys (that is, CTRL, ALT, SHIFT, META), and the item has an `href` set.\n */\n onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n /**\n * A standalone action that is shown prior to the dropdown trigger.\n * Use it with \"primary\" and \"normal\" variant only.\n *\n * Main action properties:\n * * `text` (string) - Specifies the text shown in the main action.\n * * `external` (boolean) - Marks the main action as external by adding an icon after the text. The link will open in a new tab when clicked. Note that this only works when `href` is also provided.\n * * `externalIconAriaLabel` (string) - Adds an ARIA label to the external icon.\n *\n * The main action also supports the following properties of the [button](/components/button/?tabId=api) component:\n * `ariaLabel`, `disabled`, `loading`, `loadingText`, `href`, `target`, `rel`, `download`, `iconAlt`, `iconName`, `iconUrl`, `iconSvg`, `onClick`, `onFollow`.\n */\n mainAction?: ButtonDropdownProps.MainAction;\n}\n\nexport namespace ButtonDropdownProps {\n export type Variant = 'normal' | 'primary' | 'icon' | 'inline-icon';\n export type ItemType = 'action' | 'group';\n\n export interface MainAction {\n text: string;\n ariaLabel?: string;\n onClick?: CancelableEventHandler<ButtonProps.ClickDetail>;\n onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;\n disabled?: boolean;\n disabledReason?: string;\n loading?: boolean;\n loadingText?: string;\n href?: string;\n target?: string;\n rel?: string;\n download?: boolean | string;\n external?: boolean;\n externalIconAriaLabel?: string;\n iconAlt?: string;\n iconName?: IconProps.Name;\n iconUrl?: string;\n iconSvg?: React.ReactNode;\n }\n\n export interface Item {\n itemType?: ItemType;\n id: string;\n text: string;\n lang?: string;\n disabled?: boolean;\n disabledReason?: string;\n description?: string;\n href?: string;\n external?: boolean;\n externalIconAriaLabel?: string;\n iconAlt?: string;\n iconName?: IconProps.Name;\n iconUrl?: string;\n iconSvg?: React.ReactNode;\n }\n\n export interface CheckboxItem\n extends Omit<ButtonDropdownProps.Item, 'href' | 'external' | 'externalIconAriaLabel' | 'itemType'> {\n itemType: 'checkbox';\n checked: boolean;\n }\n\n export interface ItemGroup extends Omit<Item, 'id' | 'text' | 'itemType'> {\n itemType?: 'group';\n id?: string;\n text?: string;\n items: Items;\n }\n\n export type ItemOrGroup = Item | CheckboxItem | ItemGroup;\n\n export type Items = ReadonlyArray<ItemOrGroup>;\n\n export interface ItemClickDetails extends BaseNavigationDetail {\n id: string;\n checked?: boolean;\n }\n\n export interface Ref {\n /**\n * Focuses the underlying native button.\n */\n focus(): void;\n }\n}\n\nexport interface ButtonDropdownSettings {\n // this means whether action is required to make group expand\n hasExpandableGroups: boolean;\n // on smaller screens expandable groups are integrated into parent dropdown\n // this changes keyboard navigation, highlight and activation behavior for parent dropdown\n isInRestrictedView?: boolean;\n}\n\nexport interface HighlightProps {\n targetItem: ButtonDropdownProps.ItemOrGroup | null;\n isHighlighted: (item: ButtonDropdownProps.ItemOrGroup) => boolean;\n isKeyboardHighlight: (item: ButtonDropdownProps.ItemOrGroup) => boolean;\n isExpanded: (group: ButtonDropdownProps.ItemGroup) => boolean;\n highlightItem: (item: ButtonDropdownProps.ItemOrGroup) => void;\n}\n\nexport type GroupToggle = (item: ButtonDropdownProps.ItemGroup, event: React.SyntheticEvent) => void;\nexport type ItemActivate = (\n item: ButtonDropdownProps.Item | ButtonDropdownProps.CheckboxItem,\n event: React.MouseEvent | React.KeyboardEvent\n) => void;\n\nexport interface CategoryProps extends HighlightProps {\n item: ButtonDropdownProps.ItemGroup;\n onGroupToggle: GroupToggle;\n onItemActivate: ItemActivate;\n disabled: boolean;\n lastInDropdown: boolean;\n expandToViewport?: boolean;\n variant?: ItemListProps['variant'];\n position?: string;\n}\n\nexport interface ItemListProps extends HighlightProps {\n items: ButtonDropdownProps.Items;\n onGroupToggle: GroupToggle;\n onItemActivate: ItemActivate;\n categoryDisabled?: boolean;\n hasExpandableGroups?: boolean;\n hasCategoryHeader?: boolean;\n lastInDropdown: boolean;\n expandToViewport?: boolean;\n variant?: InternalButtonDropdownProps['variant'];\n position?: string;\n}\n\nexport interface LinkItem extends ButtonDropdownProps.Item {\n href: string;\n}\n\nexport interface ItemProps {\n item: ButtonDropdownProps.Item | ButtonDropdownProps.CheckboxItem | LinkItem;\n disabled: boolean;\n highlighted: boolean;\n onItemActivate: ItemActivate;\n highlightItem: (item: ButtonDropdownProps.ItemOrGroup) => void;\n showDivider: boolean;\n hasCategoryHeader: boolean;\n isKeyboardHighlighted?: boolean;\n variant?: ItemListProps['variant'];\n position?: string;\n}\n\nexport interface InternalItem extends ButtonDropdownProps.Item {\n badge?: boolean;\n}\n\nexport interface InternalItemGroup extends Omit<ButtonDropdownProps.ItemGroup, 'items'> {\n items: InternalItems;\n}\n\nexport type InternalItems = ReadonlyArray<InternalItemOrGroup>;\n\nexport type InternalItemOrGroup = InternalItem | ButtonDropdownProps.CheckboxItem | InternalItemGroup;\n\nexport interface InternalButtonDropdownProps\n extends Omit<ButtonDropdownProps, 'variant' | 'items'>,\n InternalBaseComponentProps {\n customTriggerBuilder?: (props: CustomTriggerProps) => React.ReactNode;\n variant?: ButtonDropdownProps['variant'] | 'navigation';\n items: ReadonlyArray<InternalItemOrGroup>;\n\n /**\n * Optional text that is displayed as the title at the top of the dropdown.\n */\n title?: string;\n\n /**\n * Optional text that is displayed underneath the title at the top of the dropdown.\n */\n description?: string;\n\n /**\n * Determines that the dropdown should preferably be aligned to the center of the trigger\n * instead of dropping left or right.\n */\n preferCenter?: boolean;\n}\n\nexport interface CustomTriggerProps {\n triggerRef: React.Ref<HTMLElement>;\n testUtilsClass: string;\n ariaLabel: string | undefined;\n disabled: boolean;\n disabledReason?: string;\n isOpen: boolean;\n onClick: () => void;\n ariaExpanded: boolean;\n}\n"]}
package/button-group/icon-button-item.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ import { ButtonProps } from '../button/interfaces.js';
3
+ import { CancelableEventHandler, ClickDetail } from '../internal/events/index.js';
4
+ import { ButtonGroupProps } from './interfaces.js';
5
+ declare const IconButtonItem: React.ForwardRefExoticComponent<{
6
+ item: ButtonGroupProps.IconButton;
7
+ showTooltip: boolean;
8
+ showFeedback: boolean;
9
+ onItemClick?: CancelableEventHandler<ClickDetail> | undefined;
10
+ } & React.RefAttributes<ButtonProps.Ref>>;
11
+ export default IconButtonItem;
12
+ //# sourceMappingURL=icon-button-item.d.ts.map
package/button-group/icon-button-item.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon-button-item.d.ts","sourceRoot":"","sources":["../../../src/button-group/icon-button-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAItD,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAInD,QAAA,MAAM,cAAc;UAQR,iBAAiB,UAAU;iBACpB,OAAO;kBACN,OAAO;;yCA2C1B,CAAC;AAEF,eAAe,cAAc,CAAC"}
package/button-group/icon-button-item.js ADDED
@@ -0,0 +1,21 @@
1
+ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
+ // SPDX-License-Identifier: Apache-2.0
3
+ import React, { forwardRef } from 'react';
4
+ import clsx from 'clsx';
5
+ import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
6
+ import { InternalButton } from '../button/internal.js';
7
+ import LiveRegion from '../internal/components/live-region/index.js';
8
+ import Tooltip from '../internal/components/tooltip/index.js';
9
+ import testUtilStyles from './test-classes/styles.css.js';
10
+ const IconButtonItem = forwardRef(({ item, showTooltip, showFeedback, onItemClick, }, ref) => {
11
+ const containerRef = React.useRef(null);
12
+ const hasIcon = item.iconName || item.iconUrl || item.iconSvg;
13
+ if (!hasIcon) {
14
+ warnOnce('ButtonGroup', `Missing icon for item with id: ${item.id}`);
15
+ }
16
+ return (React.createElement("div", { ref: containerRef },
17
+ React.createElement(InternalButton, { variant: "icon", loading: item.loading, loadingText: item.loadingText, disabled: item.disabled, iconName: hasIcon ? item.iconName : 'close', iconAlt: item.text, iconSvg: item.iconSvg, ariaLabel: item.text, onClick: onItemClick, ref: ref, "data-testid": item.id, "data-itemid": item.id, className: clsx(testUtilStyles.item, testUtilStyles['button-group-item']), __title: "" }, item.text),
18
+ showTooltip && !item.disabled && !item.loading && (!showFeedback || item.popoverFeedback) && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: item.id, value: (showFeedback && React.createElement(LiveRegion, { visible: true }, item.popoverFeedback)) || item.text, className: clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip']) }))));
19
+ });
20
+ export default IconButtonItem;
21
+ //# sourceMappingURL=icon-button-item.js.map