@cloudscape-design/components-themeable 3.0.952 → 3.0.953

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 (32) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/button/constants.scss +1 -1
  3. package/lib/internal/template/button/interfaces.d.ts +1 -1
  4. package/lib/internal/template/button/interfaces.js.map +1 -1
  5. package/lib/internal/template/button/internal.d.ts.map +1 -1
  6. package/lib/internal/template/button/internal.js +1 -1
  7. package/lib/internal/template/button/internal.js.map +1 -1
  8. package/lib/internal/template/button/styles.css.js +22 -22
  9. package/lib/internal/template/button/styles.scoped.css +70 -70
  10. package/lib/internal/template/button/styles.selectors.js +22 -22
  11. package/lib/internal/template/button-group/icon-button-item.d.ts.map +1 -1
  12. package/lib/internal/template/button-group/icon-button-item.js +1 -1
  13. package/lib/internal/template/button-group/icon-button-item.js.map +1 -1
  14. package/lib/internal/template/button-group/icon-toggle-button-item.d.ts.map +1 -1
  15. package/lib/internal/template/button-group/icon-toggle-button-item.js +1 -1
  16. package/lib/internal/template/button-group/icon-toggle-button-item.js.map +1 -1
  17. package/lib/internal/template/button-group/interfaces.d.ts +6 -0
  18. package/lib/internal/template/button-group/interfaces.d.ts.map +1 -1
  19. package/lib/internal/template/button-group/interfaces.js.map +1 -1
  20. package/lib/internal/template/button-group/menu-dropdown-item.d.ts.map +1 -1
  21. package/lib/internal/template/button-group/menu-dropdown-item.js +1 -1
  22. package/lib/internal/template/button-group/menu-dropdown-item.js.map +1 -1
  23. package/lib/internal/template/internal/base-component/styles.scoped.css +2 -0
  24. package/lib/internal/template/internal/environment.js +1 -1
  25. package/lib/internal/template/internal/environment.json +1 -1
  26. package/lib/internal/template/internal/generated/styles/tokens.d.ts +1 -0
  27. package/lib/internal/template/internal/generated/styles/tokens.js +1 -0
  28. package/lib/internal/template/internal/generated/theming/index.cjs +33 -0
  29. package/lib/internal/template/internal/generated/theming/index.cjs.d.ts +8 -0
  30. package/lib/internal/template/internal/generated/theming/index.d.ts +8 -0
  31. package/lib/internal/template/internal/generated/theming/index.js +33 -0
  32. package/package.json +1 -1
package/lib/internal/template/button/styles.scoped.css CHANGED
@@ -150,11 +150,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
150
150
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
151
151
  SPDX-License-Identifier: Apache-2.0
152
152
  */
153
- .awsui_content_vjswe_sb2bk_153:not(#\9) {
153
+ .awsui_content_vjswe_jl17v_153:not(#\9) {
154
154
  /* used in test-utils */
155
155
  }
156
156
 
157
- .awsui_button_vjswe_sb2bk_157:not(#\9) {
157
+ .awsui_button_vjswe_jl17v_157:not(#\9) {
158
158
  border-collapse: separate;
159
159
  border-spacing: 0;
160
160
  box-sizing: border-box;
@@ -203,157 +203,157 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
203
203
  text-decoration: none;
204
204
  cursor: pointer;
205
205
  }
206
- .awsui_button_vjswe_sb2bk_157.awsui_variant-normal_vjswe_sb2bk_205:not(#\9) {
206
+ .awsui_button_vjswe_jl17v_157.awsui_variant-normal_vjswe_jl17v_205:not(#\9) {
207
207
  background: var(--color-background-button-normal-default-k4rsgl, #ffffff);
208
208
  color: var(--color-text-button-normal-default-lci1ye, #545b64);
209
209
  border-color: var(--color-border-button-normal-default-g4ujwl, #545b64);
210
210
  position: relative;
211
211
  text-decoration: none;
212
212
  }
213
- .awsui_button_vjswe_sb2bk_157.awsui_variant-normal_vjswe_sb2bk_205:not(#\9):hover {
213
+ .awsui_button_vjswe_jl17v_157.awsui_variant-normal_vjswe_jl17v_205:not(#\9):hover {
214
214
  background: var(--color-background-button-normal-hover-znspn2, #fafafa);
215
215
  color: var(--color-text-button-normal-hover-sbn238, #16191f);
216
216
  border-color: var(--color-border-button-normal-hover-eyyshk, #16191f);
217
217
  text-decoration: none;
218
218
  }
219
- .awsui_button_vjswe_sb2bk_157.awsui_variant-normal_vjswe_sb2bk_205:not(#\9):active {
219
+ .awsui_button_vjswe_jl17v_157.awsui_variant-normal_vjswe_jl17v_205:not(#\9):active {
220
220
  background: var(--color-background-button-normal-active-qscbgh, #eaeded);
221
221
  color: var(--color-text-button-normal-active-oeddf5, #16191f);
222
222
  border-color: var(--color-border-button-normal-active-vm8kc9, #545b64);
223
223
  }
224
- .awsui_button_vjswe_sb2bk_157.awsui_variant-normal_vjswe_sb2bk_205.awsui_disabled_vjswe_sb2bk_223:not(#\9) {
224
+ .awsui_button_vjswe_jl17v_157.awsui_variant-normal_vjswe_jl17v_205.awsui_disabled_vjswe_jl17v_223:not(#\9) {
225
225
  background: var(--color-background-button-normal-disabled-lkemvh, #ffffff);
226
226
  border-color: var(--color-border-button-normal-disabled-pr85vz, #d5dbdb);
227
227
  color: var(--color-text-button-normal-disabled-09fdau, #879596);
228
228
  text-decoration: none;
229
229
  cursor: auto;
230
230
  }
231
- .awsui_button_vjswe_sb2bk_157.awsui_variant-primary_vjswe_sb2bk_230:not(#\9) {
231
+ .awsui_button_vjswe_jl17v_157.awsui_variant-primary_vjswe_jl17v_230:not(#\9) {
232
232
  background: var(--color-background-button-primary-default-e50v6e, #0073bb);
233
233
  color: var(--color-text-button-primary-default-f9dldv, #ffffff);
234
234
  border-color: var(--color-background-button-primary-default-e50v6e, #0073bb);
235
235
  position: relative;
236
236
  text-decoration: none;
237
237
  }
238
- .awsui_button_vjswe_sb2bk_157.awsui_variant-primary_vjswe_sb2bk_230:not(#\9):hover {
238
+ .awsui_button_vjswe_jl17v_157.awsui_variant-primary_vjswe_jl17v_230:not(#\9):hover {
239
239
  background: var(--color-background-button-primary-hover-288r60, #0a4a74);
240
240
  color: var(--color-text-button-primary-hover-6x11ri, #ffffff);
241
241
  border-color: var(--color-background-button-primary-hover-288r60, #0a4a74);
242
242
  text-decoration: none;
243
243
  }
244
- .awsui_button_vjswe_sb2bk_157.awsui_variant-primary_vjswe_sb2bk_230:not(#\9):active {
244
+ .awsui_button_vjswe_jl17v_157.awsui_variant-primary_vjswe_jl17v_230:not(#\9):active {
245
245
  background: var(--color-background-button-primary-active-2ucmap, #12293b);
246
246
  color: var(--color-text-button-primary-active-6s9mqy, #ffffff);
247
247
  border-color: var(--color-background-button-primary-active-2ucmap, #12293b);
248
248
  }
249
- .awsui_button_vjswe_sb2bk_157.awsui_variant-primary_vjswe_sb2bk_230.awsui_disabled_vjswe_sb2bk_223:not(#\9) {
249
+ .awsui_button_vjswe_jl17v_157.awsui_variant-primary_vjswe_jl17v_230.awsui_disabled_vjswe_jl17v_223:not(#\9) {
250
250
  background: var(--color-background-button-primary-disabled-femoov, #ffffff);
251
251
  border-color: var(--color-border-button-primary-disabled-yzfy0b, #d5dbdb);
252
252
  color: var(--color-text-button-primary-disabled-6emjo4, #879596);
253
253
  text-decoration: none;
254
254
  cursor: auto;
255
255
  }
256
- .awsui_button_vjswe_sb2bk_157.awsui_variant-link_vjswe_sb2bk_255:not(#\9) {
256
+ .awsui_button_vjswe_jl17v_157.awsui_variant-link_vjswe_jl17v_255:not(#\9) {
257
257
  background: transparent;
258
258
  color: var(--color-text-button-normal-default-lci1ye, #545b64);
259
259
  border-color: transparent;
260
260
  position: relative;
261
261
  text-decoration: none;
262
262
  }
263
- .awsui_button_vjswe_sb2bk_157.awsui_variant-link_vjswe_sb2bk_255:not(#\9):hover {
263
+ .awsui_button_vjswe_jl17v_157.awsui_variant-link_vjswe_jl17v_255:not(#\9):hover {
264
264
  background: var(--color-background-button-link-hover-e1np1p, #fafafa);
265
265
  color: var(--color-text-button-normal-hover-sbn238, #16191f);
266
266
  border-color: var(--color-background-button-link-hover-e1np1p, #fafafa);
267
267
  text-decoration: none;
268
268
  }
269
- .awsui_button_vjswe_sb2bk_157.awsui_variant-link_vjswe_sb2bk_255:not(#\9):active {
269
+ .awsui_button_vjswe_jl17v_157.awsui_variant-link_vjswe_jl17v_255:not(#\9):active {
270
270
  background: var(--color-background-button-link-active-5rokvx, #eaeded);
271
271
  color: var(--color-text-button-normal-active-oeddf5, #16191f);
272
272
  border-color: var(--color-background-button-link-active-5rokvx, #eaeded);
273
273
  }
274
- .awsui_button_vjswe_sb2bk_157.awsui_variant-link_vjswe_sb2bk_255.awsui_disabled_vjswe_sb2bk_223:not(#\9) {
274
+ .awsui_button_vjswe_jl17v_157.awsui_variant-link_vjswe_jl17v_255.awsui_disabled_vjswe_jl17v_223:not(#\9) {
275
275
  background: transparent;
276
276
  border-color: transparent;
277
277
  color: var(--color-text-interactive-disabled-xqzdg5, #aab7b8);
278
278
  text-decoration: none;
279
279
  cursor: auto;
280
280
  }
281
- .awsui_button_vjswe_sb2bk_157.awsui_variant-icon_vjswe_sb2bk_280:not(#\9) {
281
+ .awsui_button_vjswe_jl17v_157.awsui_variant-icon_vjswe_jl17v_280:not(#\9) {
282
282
  background: transparent;
283
283
  color: var(--color-text-interactive-default-t1snbz, #545b64);
284
284
  border-color: transparent;
285
285
  position: relative;
286
286
  text-decoration: none;
287
287
  }
288
- .awsui_button_vjswe_sb2bk_157.awsui_variant-icon_vjswe_sb2bk_280:not(#\9):hover {
288
+ .awsui_button_vjswe_jl17v_157.awsui_variant-icon_vjswe_jl17v_280:not(#\9):hover {
289
289
  background: transparent;
290
290
  color: var(--color-text-interactive-hover-kxltdh, #16191f);
291
291
  border-color: transparent;
292
292
  text-decoration: none;
293
293
  }
294
- .awsui_button_vjswe_sb2bk_157.awsui_variant-icon_vjswe_sb2bk_280:not(#\9):active {
294
+ .awsui_button_vjswe_jl17v_157.awsui_variant-icon_vjswe_jl17v_280:not(#\9):active {
295
295
  background: transparent;
296
296
  color: var(--color-text-interactive-default-t1snbz, #545b64);
297
297
  border-color: transparent;
298
298
  }
299
- .awsui_button_vjswe_sb2bk_157.awsui_variant-icon_vjswe_sb2bk_280.awsui_disabled_vjswe_sb2bk_223:not(#\9) {
299
+ .awsui_button_vjswe_jl17v_157.awsui_variant-icon_vjswe_jl17v_280.awsui_disabled_vjswe_jl17v_223:not(#\9) {
300
300
  background: transparent;
301
301
  border-color: transparent;
302
- color: var(--color-text-interactive-disabled-xqzdg5, #aab7b8);
302
+ color: var(--color-text-button-icon-disabled-lqnh5i, #879596);
303
303
  text-decoration: none;
304
304
  cursor: auto;
305
305
  }
306
- .awsui_button_vjswe_sb2bk_157.awsui_variant-inline-icon_vjswe_sb2bk_305:not(#\9) {
306
+ .awsui_button_vjswe_jl17v_157.awsui_variant-inline-icon_vjswe_jl17v_305:not(#\9) {
307
307
  background: transparent;
308
308
  color: var(--color-text-button-inline-icon-default-b49xj6, #545b64);
309
309
  border-color: transparent;
310
310
  position: relative;
311
311
  text-decoration: none;
312
312
  }
313
- .awsui_button_vjswe_sb2bk_157.awsui_variant-inline-icon_vjswe_sb2bk_305:not(#\9):hover {
313
+ .awsui_button_vjswe_jl17v_157.awsui_variant-inline-icon_vjswe_jl17v_305:not(#\9):hover {
314
314
  background: transparent;
315
315
  color: var(--color-text-button-inline-icon-hover-h3zsyn, #16191f);
316
316
  border-color: transparent;
317
317
  text-decoration: none;
318
318
  }
319
- .awsui_button_vjswe_sb2bk_157.awsui_variant-inline-icon_vjswe_sb2bk_305:not(#\9):active {
319
+ .awsui_button_vjswe_jl17v_157.awsui_variant-inline-icon_vjswe_jl17v_305:not(#\9):active {
320
320
  background: transparent;
321
321
  color: var(--color-text-button-inline-icon-default-b49xj6, #545b64);
322
322
  border-color: transparent;
323
323
  }
324
- .awsui_button_vjswe_sb2bk_157.awsui_variant-inline-icon_vjswe_sb2bk_305.awsui_disabled_vjswe_sb2bk_223:not(#\9) {
324
+ .awsui_button_vjswe_jl17v_157.awsui_variant-inline-icon_vjswe_jl17v_305.awsui_disabled_vjswe_jl17v_223:not(#\9) {
325
325
  background: transparent;
326
326
  border-color: transparent;
327
327
  color: var(--color-text-button-inline-icon-disabled-pdpnjk, #aab7b8);
328
328
  text-decoration: none;
329
329
  cursor: auto;
330
330
  }
331
- .awsui_button_vjswe_sb2bk_157.awsui_variant-inline-icon-pointer-target_vjswe_sb2bk_330:not(#\9) {
331
+ .awsui_button_vjswe_jl17v_157.awsui_variant-inline-icon-pointer-target_vjswe_jl17v_330:not(#\9) {
332
332
  background: transparent;
333
333
  color: var(--color-text-button-inline-icon-default-b49xj6, #545b64);
334
334
  border-color: transparent;
335
335
  position: relative;
336
336
  text-decoration: none;
337
337
  }
338
- .awsui_button_vjswe_sb2bk_157.awsui_variant-inline-icon-pointer-target_vjswe_sb2bk_330:not(#\9):hover {
338
+ .awsui_button_vjswe_jl17v_157.awsui_variant-inline-icon-pointer-target_vjswe_jl17v_330:not(#\9):hover {
339
339
  background: transparent;
340
340
  color: var(--color-text-button-inline-icon-hover-h3zsyn, #16191f);
341
341
  border-color: transparent;
342
342
  text-decoration: none;
343
343
  }
344
- .awsui_button_vjswe_sb2bk_157.awsui_variant-inline-icon-pointer-target_vjswe_sb2bk_330:not(#\9):active {
344
+ .awsui_button_vjswe_jl17v_157.awsui_variant-inline-icon-pointer-target_vjswe_jl17v_330:not(#\9):active {
345
345
  background: transparent;
346
346
  color: var(--color-text-button-inline-icon-default-b49xj6, #545b64);
347
347
  border-color: transparent;
348
348
  }
349
- .awsui_button_vjswe_sb2bk_157.awsui_variant-inline-icon-pointer-target_vjswe_sb2bk_330.awsui_disabled_vjswe_sb2bk_223:not(#\9) {
349
+ .awsui_button_vjswe_jl17v_157.awsui_variant-inline-icon-pointer-target_vjswe_jl17v_330.awsui_disabled_vjswe_jl17v_223:not(#\9) {
350
350
  background: transparent;
351
351
  border-color: transparent;
352
352
  color: var(--color-text-button-inline-icon-disabled-pdpnjk, #aab7b8);
353
353
  text-decoration: none;
354
354
  cursor: auto;
355
355
  }
356
- .awsui_button_vjswe_sb2bk_157.awsui_variant-inline-link_vjswe_sb2bk_355:not(#\9) {
356
+ .awsui_button_vjswe_jl17v_157.awsui_variant-inline-link_vjswe_jl17v_355:not(#\9) {
357
357
  background: transparent;
358
358
  color: var(--color-text-button-normal-default-lci1ye, #545b64);
359
359
  border-color: transparent;
@@ -364,75 +364,75 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
364
364
  padding-block: 0;
365
365
  padding-inline: 0;
366
366
  }
367
- .awsui_button_vjswe_sb2bk_157.awsui_variant-inline-link_vjswe_sb2bk_355:not(#\9):hover {
367
+ .awsui_button_vjswe_jl17v_157.awsui_variant-inline-link_vjswe_jl17v_355:not(#\9):hover {
368
368
  background: transparent;
369
369
  color: var(--color-text-button-normal-hover-sbn238, #16191f);
370
370
  border-color: transparent;
371
371
  text-decoration: none;
372
372
  }
373
- .awsui_button_vjswe_sb2bk_157.awsui_variant-inline-link_vjswe_sb2bk_355:not(#\9):active {
373
+ .awsui_button_vjswe_jl17v_157.awsui_variant-inline-link_vjswe_jl17v_355:not(#\9):active {
374
374
  background: transparent;
375
375
  color: var(--color-text-button-normal-active-oeddf5, #16191f);
376
376
  border-color: transparent;
377
377
  }
378
- .awsui_button_vjswe_sb2bk_157.awsui_variant-inline-link_vjswe_sb2bk_355.awsui_disabled_vjswe_sb2bk_223:not(#\9) {
378
+ .awsui_button_vjswe_jl17v_157.awsui_variant-inline-link_vjswe_jl17v_355.awsui_disabled_vjswe_jl17v_223:not(#\9) {
379
379
  background: transparent;
380
380
  border-color: transparent;
381
381
  color: var(--color-text-interactive-disabled-xqzdg5, #aab7b8);
382
382
  text-decoration: none;
383
383
  cursor: auto;
384
384
  }
385
- .awsui_button_vjswe_sb2bk_157.awsui_variant-modal-dismiss_vjswe_sb2bk_384:not(#\9) {
385
+ .awsui_button_vjswe_jl17v_157.awsui_variant-modal-dismiss_vjswe_jl17v_384:not(#\9) {
386
386
  background: transparent;
387
387
  color: var(--color-text-interactive-default-t1snbz, #545b64);
388
388
  border-color: transparent;
389
389
  position: relative;
390
390
  text-decoration: none;
391
391
  }
392
- .awsui_button_vjswe_sb2bk_157.awsui_variant-modal-dismiss_vjswe_sb2bk_384:not(#\9):hover {
392
+ .awsui_button_vjswe_jl17v_157.awsui_variant-modal-dismiss_vjswe_jl17v_384:not(#\9):hover {
393
393
  background: transparent;
394
394
  color: var(--color-text-interactive-hover-kxltdh, #16191f);
395
395
  border-color: transparent;
396
396
  text-decoration: none;
397
397
  }
398
- .awsui_button_vjswe_sb2bk_157.awsui_variant-modal-dismiss_vjswe_sb2bk_384:not(#\9):active {
398
+ .awsui_button_vjswe_jl17v_157.awsui_variant-modal-dismiss_vjswe_jl17v_384:not(#\9):active {
399
399
  background: transparent;
400
400
  color: var(--color-text-interactive-default-t1snbz, #545b64);
401
401
  border-color: transparent;
402
402
  }
403
- .awsui_button_vjswe_sb2bk_157.awsui_variant-modal-dismiss_vjswe_sb2bk_384.awsui_disabled_vjswe_sb2bk_223:not(#\9) {
403
+ .awsui_button_vjswe_jl17v_157.awsui_variant-modal-dismiss_vjswe_jl17v_384.awsui_disabled_vjswe_jl17v_223:not(#\9) {
404
404
  background: transparent;
405
405
  border-color: transparent;
406
406
  color: var(--color-text-interactive-disabled-xqzdg5, #aab7b8);
407
407
  text-decoration: none;
408
408
  cursor: auto;
409
409
  }
410
- .awsui_button_vjswe_sb2bk_157.awsui_variant-flashbar-icon_vjswe_sb2bk_409:not(#\9) {
410
+ .awsui_button_vjswe_jl17v_157.awsui_variant-flashbar-icon_vjswe_jl17v_409:not(#\9) {
411
411
  background: transparent;
412
412
  color: var(--color-text-interactive-inverted-default-ed879i, #d5dbdb);
413
413
  border-color: transparent;
414
414
  position: relative;
415
415
  text-decoration: none;
416
416
  }
417
- .awsui_button_vjswe_sb2bk_157.awsui_variant-flashbar-icon_vjswe_sb2bk_409:not(#\9):hover {
417
+ .awsui_button_vjswe_jl17v_157.awsui_variant-flashbar-icon_vjswe_jl17v_409:not(#\9):hover {
418
418
  background: transparent;
419
419
  color: var(--color-text-interactive-inverted-hover-q8rb5i, #fafafa);
420
420
  border-color: transparent;
421
421
  text-decoration: none;
422
422
  }
423
- .awsui_button_vjswe_sb2bk_157.awsui_variant-flashbar-icon_vjswe_sb2bk_409:not(#\9):active {
423
+ .awsui_button_vjswe_jl17v_157.awsui_variant-flashbar-icon_vjswe_jl17v_409:not(#\9):active {
424
424
  background: transparent;
425
425
  color: var(--color-text-interactive-inverted-default-ed879i, #d5dbdb);
426
426
  border-color: transparent;
427
427
  }
428
- .awsui_button_vjswe_sb2bk_157.awsui_variant-flashbar-icon_vjswe_sb2bk_409.awsui_disabled_vjswe_sb2bk_223:not(#\9) {
428
+ .awsui_button_vjswe_jl17v_157.awsui_variant-flashbar-icon_vjswe_jl17v_409.awsui_disabled_vjswe_jl17v_223:not(#\9) {
429
429
  background: transparent;
430
430
  border-color: transparent;
431
431
  color: var(--color-text-interactive-disabled-xqzdg5, #aab7b8);
432
432
  text-decoration: none;
433
433
  cursor: auto;
434
434
  }
435
- .awsui_button_vjswe_sb2bk_157.awsui_variant-breadcrumb-group_vjswe_sb2bk_434:not(#\9) {
435
+ .awsui_button_vjswe_jl17v_157.awsui_variant-breadcrumb-group_vjswe_jl17v_434:not(#\9) {
436
436
  background: transparent;
437
437
  color: var(--color-text-link-default-8s05yu, #0073bb);
438
438
  border-color: transparent;
@@ -444,61 +444,61 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
444
444
  padding-inline: 0;
445
445
  font-weight: normal;
446
446
  }
447
- .awsui_button_vjswe_sb2bk_157.awsui_variant-breadcrumb-group_vjswe_sb2bk_434:not(#\9):hover {
447
+ .awsui_button_vjswe_jl17v_157.awsui_variant-breadcrumb-group_vjswe_jl17v_434:not(#\9):hover {
448
448
  background: transparent;
449
449
  color: var(--color-text-link-hover-jvu4dp, #0a4a74);
450
450
  border-color: transparent;
451
451
  text-decoration: none;
452
452
  }
453
- .awsui_button_vjswe_sb2bk_157.awsui_variant-breadcrumb-group_vjswe_sb2bk_434:not(#\9):active {
453
+ .awsui_button_vjswe_jl17v_157.awsui_variant-breadcrumb-group_vjswe_jl17v_434:not(#\9):active {
454
454
  background: transparent;
455
455
  color: var(--color-text-link-default-8s05yu, #0073bb);
456
456
  border-color: transparent;
457
457
  }
458
- .awsui_button_vjswe_sb2bk_157.awsui_variant-breadcrumb-group_vjswe_sb2bk_434.awsui_disabled_vjswe_sb2bk_223:not(#\9) {
458
+ .awsui_button_vjswe_jl17v_157.awsui_variant-breadcrumb-group_vjswe_jl17v_434.awsui_disabled_vjswe_jl17v_223:not(#\9) {
459
459
  background: transparent;
460
460
  border-color: transparent;
461
461
  color: var(--color-text-interactive-disabled-xqzdg5, #aab7b8);
462
462
  text-decoration: none;
463
463
  cursor: auto;
464
464
  }
465
- .awsui_button_vjswe_sb2bk_157.awsui_variant-menu-trigger_vjswe_sb2bk_464:not(#\9) {
465
+ .awsui_button_vjswe_jl17v_157.awsui_variant-menu-trigger_vjswe_jl17v_464:not(#\9) {
466
466
  background: transparent;
467
467
  color: var(--color-text-button-normal-default-lci1ye, #545b64);
468
468
  border-color: transparent;
469
469
  position: relative;
470
470
  text-decoration: none;
471
471
  }
472
- .awsui_button_vjswe_sb2bk_157.awsui_variant-menu-trigger_vjswe_sb2bk_464:not(#\9):hover {
472
+ .awsui_button_vjswe_jl17v_157.awsui_variant-menu-trigger_vjswe_jl17v_464:not(#\9):hover {
473
473
  background: transparent;
474
474
  color: var(--color-text-button-normal-hover-sbn238, #16191f);
475
475
  border-color: transparent;
476
476
  text-decoration: none;
477
477
  }
478
- .awsui_button_vjswe_sb2bk_157.awsui_variant-menu-trigger_vjswe_sb2bk_464:not(#\9):active {
478
+ .awsui_button_vjswe_jl17v_157.awsui_variant-menu-trigger_vjswe_jl17v_464:not(#\9):active {
479
479
  background: transparent;
480
480
  color: var(--color-text-button-normal-active-oeddf5, #16191f);
481
481
  border-color: transparent;
482
482
  }
483
- .awsui_button_vjswe_sb2bk_157.awsui_variant-menu-trigger_vjswe_sb2bk_464.awsui_disabled_vjswe_sb2bk_223:not(#\9) {
483
+ .awsui_button_vjswe_jl17v_157.awsui_variant-menu-trigger_vjswe_jl17v_464.awsui_disabled_vjswe_jl17v_223:not(#\9) {
484
484
  background: transparent;
485
485
  border-color: transparent;
486
486
  color: var(--color-text-interactive-disabled-xqzdg5, #aab7b8);
487
487
  text-decoration: none;
488
488
  cursor: auto;
489
489
  }
490
- .awsui_button_vjswe_sb2bk_157:not(#\9):focus {
490
+ .awsui_button_vjswe_jl17v_157:not(#\9):focus {
491
491
  outline: none;
492
492
  text-decoration: none;
493
493
  }
494
- body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus {
494
+ body[data-awsui-focus-visible=true] .awsui_button_vjswe_jl17v_157:not(#\9):focus {
495
495
  position: relative;
496
496
  }
497
- body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus {
497
+ body[data-awsui-focus-visible=true] .awsui_button_vjswe_jl17v_157:not(#\9):focus {
498
498
  outline: 2px dotted transparent;
499
499
  outline-offset: calc(var(--space-button-focus-outline-gutter-90p0io, 3px) - 1px);
500
500
  }
501
- body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus::before {
501
+ body[data-awsui-focus-visible=true] .awsui_button_vjswe_jl17v_157:not(#\9):focus::before {
502
502
  content: " ";
503
503
  display: block;
504
504
  position: absolute;
@@ -512,14 +512,14 @@ body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus
512
512
  border-end-end-radius: var(--border-radius-control-default-focus-ring-vy2hlh, 2px);
513
513
  box-shadow: 0 0 0 2px var(--color-border-item-focused-q68bgg, #0073bb);
514
514
  }
515
- body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus.awsui_variant-icon_vjswe_sb2bk_280, body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus.awsui_variant-modal-dismiss_vjswe_sb2bk_384, body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus.awsui_variant-flashbar-icon_vjswe_sb2bk_409 {
515
+ body[data-awsui-focus-visible=true] .awsui_button_vjswe_jl17v_157:not(#\9):focus.awsui_variant-icon_vjswe_jl17v_280, body[data-awsui-focus-visible=true] .awsui_button_vjswe_jl17v_157:not(#\9):focus.awsui_variant-modal-dismiss_vjswe_jl17v_384, body[data-awsui-focus-visible=true] .awsui_button_vjswe_jl17v_157:not(#\9):focus.awsui_variant-flashbar-icon_vjswe_jl17v_409 {
516
516
  position: relative;
517
517
  }
518
- body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus.awsui_variant-icon_vjswe_sb2bk_280, body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus.awsui_variant-modal-dismiss_vjswe_sb2bk_384, body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus.awsui_variant-flashbar-icon_vjswe_sb2bk_409 {
518
+ body[data-awsui-focus-visible=true] .awsui_button_vjswe_jl17v_157:not(#\9):focus.awsui_variant-icon_vjswe_jl17v_280, body[data-awsui-focus-visible=true] .awsui_button_vjswe_jl17v_157:not(#\9):focus.awsui_variant-modal-dismiss_vjswe_jl17v_384, body[data-awsui-focus-visible=true] .awsui_button_vjswe_jl17v_157:not(#\9):focus.awsui_variant-flashbar-icon_vjswe_jl17v_409 {
519
519
  outline: 2px dotted transparent;
520
520
  outline-offset: calc(var(--space-button-focus-outline-gutter-90p0io, 3px) - 1px);
521
521
  }
522
- body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus.awsui_variant-icon_vjswe_sb2bk_280::before, body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus.awsui_variant-modal-dismiss_vjswe_sb2bk_384::before, body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus.awsui_variant-flashbar-icon_vjswe_sb2bk_409::before {
522
+ body[data-awsui-focus-visible=true] .awsui_button_vjswe_jl17v_157:not(#\9):focus.awsui_variant-icon_vjswe_jl17v_280::before, body[data-awsui-focus-visible=true] .awsui_button_vjswe_jl17v_157:not(#\9):focus.awsui_variant-modal-dismiss_vjswe_jl17v_384::before, body[data-awsui-focus-visible=true] .awsui_button_vjswe_jl17v_157:not(#\9):focus.awsui_variant-flashbar-icon_vjswe_jl17v_409::before {
523
523
  content: " ";
524
524
  display: block;
525
525
  position: absolute;
@@ -533,14 +533,14 @@ body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus
533
533
  border-end-end-radius: var(--border-radius-control-default-focus-ring-vy2hlh, 2px);
534
534
  box-shadow: 0 0 0 2px var(--color-border-item-focused-q68bgg, #0073bb);
535
535
  }
536
- body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus.awsui_variant-inline-icon_vjswe_sb2bk_305, body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus.awsui_variant-inline-icon-pointer-target_vjswe_sb2bk_330 {
536
+ body[data-awsui-focus-visible=true] .awsui_button_vjswe_jl17v_157:not(#\9):focus.awsui_variant-inline-icon_vjswe_jl17v_305, body[data-awsui-focus-visible=true] .awsui_button_vjswe_jl17v_157:not(#\9):focus.awsui_variant-inline-icon-pointer-target_vjswe_jl17v_330 {
537
537
  position: relative;
538
538
  }
539
- body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus.awsui_variant-inline-icon_vjswe_sb2bk_305, body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus.awsui_variant-inline-icon-pointer-target_vjswe_sb2bk_330 {
539
+ body[data-awsui-focus-visible=true] .awsui_button_vjswe_jl17v_157:not(#\9):focus.awsui_variant-inline-icon_vjswe_jl17v_305, body[data-awsui-focus-visible=true] .awsui_button_vjswe_jl17v_157:not(#\9):focus.awsui_variant-inline-icon-pointer-target_vjswe_jl17v_330 {
540
540
  outline: 2px dotted transparent;
541
541
  outline-offset: calc(var(--space-button-inline-icon-focus-outline-gutter-kxhixv, 3px) - 1px);
542
542
  }
543
- body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus.awsui_variant-inline-icon_vjswe_sb2bk_305::before, body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus.awsui_variant-inline-icon-pointer-target_vjswe_sb2bk_330::before {
543
+ body[data-awsui-focus-visible=true] .awsui_button_vjswe_jl17v_157:not(#\9):focus.awsui_variant-inline-icon_vjswe_jl17v_305::before, body[data-awsui-focus-visible=true] .awsui_button_vjswe_jl17v_157:not(#\9):focus.awsui_variant-inline-icon-pointer-target_vjswe_jl17v_330::before {
544
544
  content: " ";
545
545
  display: block;
546
546
  position: absolute;
@@ -554,59 +554,59 @@ body[data-awsui-focus-visible=true] .awsui_button_vjswe_sb2bk_157:not(#\9):focus
554
554
  border-end-end-radius: var(--border-radius-control-default-focus-ring-vy2hlh, 2px);
555
555
  box-shadow: 0 0 0 2px var(--color-border-item-focused-q68bgg, #0073bb);
556
556
  }
557
- .awsui_button_vjswe_sb2bk_157.awsui_button-no-text_vjswe_sb2bk_556:not(#\9) {
557
+ .awsui_button_vjswe_jl17v_157.awsui_button-no-text_vjswe_jl17v_556:not(#\9) {
558
558
  padding-inline-start: var(--space-button-icon-only-horizontal-gl6z91, 16px);
559
559
  padding-inline-end: var(--space-button-icon-only-horizontal-gl6z91, 16px);
560
560
  }
561
- .awsui_button_vjswe_sb2bk_157.awsui_button-no-wrap_vjswe_sb2bk_560:not(#\9) {
561
+ .awsui_button_vjswe_jl17v_157.awsui_button-no-wrap_vjswe_jl17v_560:not(#\9) {
562
562
  white-space: nowrap;
563
563
  }
564
- .awsui_button_vjswe_sb2bk_157.awsui_full-width_vjswe_sb2bk_563:not(#\9) {
564
+ .awsui_button_vjswe_jl17v_157.awsui_full-width_vjswe_jl17v_563:not(#\9) {
565
565
  inline-size: 100%;
566
566
  text-align: center;
567
567
  }
568
- .awsui_button_vjswe_sb2bk_157.awsui_variant-icon_vjswe_sb2bk_280:not(#\9), .awsui_button_vjswe_sb2bk_157.awsui_variant-inline-icon_vjswe_sb2bk_305:not(#\9), .awsui_button_vjswe_sb2bk_157.awsui_variant-inline-icon-pointer-target_vjswe_sb2bk_330:not(#\9), .awsui_button_vjswe_sb2bk_157.awsui_variant-flashbar-icon_vjswe_sb2bk_409:not(#\9) {
568
+ .awsui_button_vjswe_jl17v_157.awsui_variant-icon_vjswe_jl17v_280:not(#\9), .awsui_button_vjswe_jl17v_157.awsui_variant-inline-icon_vjswe_jl17v_305:not(#\9), .awsui_button_vjswe_jl17v_157.awsui_variant-inline-icon-pointer-target_vjswe_jl17v_330:not(#\9), .awsui_button_vjswe_jl17v_157.awsui_variant-flashbar-icon_vjswe_jl17v_409:not(#\9) {
569
569
  padding-inline: var(--space-xxs-y2432o, 4px);
570
570
  }
571
- .awsui_button_vjswe_sb2bk_157.awsui_variant-modal-dismiss_vjswe_sb2bk_384:not(#\9) {
571
+ .awsui_button_vjswe_jl17v_157.awsui_variant-modal-dismiss_vjswe_jl17v_384:not(#\9) {
572
572
  padding-block: var(--space-button-modal-dismiss-vertical-jrbx2g, 4px);
573
573
  padding-inline: var(--space-xxs-y2432o, 4px);
574
574
  margin-inline-end: calc(-1 * var(--space-xxs-y2432o, 4px));
575
575
  }
576
- .awsui_button_vjswe_sb2bk_157.awsui_variant-inline-icon_vjswe_sb2bk_305:not(#\9) {
576
+ .awsui_button_vjswe_jl17v_157.awsui_variant-inline-icon_vjswe_jl17v_305:not(#\9) {
577
577
  padding-block: 0;
578
578
  border-block: 0;
579
579
  border-inline: 0;
580
580
  }
581
- .awsui_button_vjswe_sb2bk_157.awsui_variant-inline-icon-pointer-target_vjswe_sb2bk_330:not(#\9) {
581
+ .awsui_button_vjswe_jl17v_157.awsui_variant-inline-icon-pointer-target_vjswe_jl17v_330:not(#\9) {
582
582
  padding-block: var(--space-xxxs-gn3248, 2px);
583
583
  border-block: 0;
584
584
  border-inline: 0;
585
585
  }
586
- .awsui_button_vjswe_sb2bk_157 > .awsui_icon-left_vjswe_sb2bk_585:not(#\9) {
586
+ .awsui_button_vjswe_jl17v_157 > .awsui_icon-left_vjswe_jl17v_585:not(#\9) {
587
587
  position: relative;
588
588
  inset-inline-start: calc(-1 * var(--space-xxs-y2432o, 4px));
589
589
  margin-inline-end: var(--space-xxs-y2432o, 4px);
590
590
  }
591
- .awsui_button_vjswe_sb2bk_157 > .awsui_icon-right_vjswe_sb2bk_590:not(#\9) {
591
+ .awsui_button_vjswe_jl17v_157 > .awsui_icon-right_vjswe_jl17v_590:not(#\9) {
592
592
  position: relative;
593
593
  inset-inline-end: calc(-1 * var(--space-xxs-y2432o, 4px));
594
594
  margin-inline-start: var(--space-xxs-y2432o, 4px);
595
595
  }
596
- .awsui_button_vjswe_sb2bk_157.awsui_variant-inline-link_vjswe_sb2bk_355 > .awsui_icon-left_vjswe_sb2bk_585:not(#\9) {
596
+ .awsui_button_vjswe_jl17v_157.awsui_variant-inline-link_vjswe_jl17v_355 > .awsui_icon-left_vjswe_jl17v_585:not(#\9) {
597
597
  inset-inline-start: 0;
598
598
  margin-inline-end: var(--space-xs-6dgkww, 8px);
599
599
  }
600
- .awsui_button_vjswe_sb2bk_157.awsui_variant-inline-link_vjswe_sb2bk_355 > .awsui_icon-right_vjswe_sb2bk_590:not(#\9) {
600
+ .awsui_button_vjswe_jl17v_157.awsui_variant-inline-link_vjswe_jl17v_355 > .awsui_icon-right_vjswe_jl17v_590:not(#\9) {
601
601
  inset-inline-end: 0;
602
602
  margin-inline-start: var(--space-xs-6dgkww, 8px);
603
603
  }
604
- .awsui_button_vjswe_sb2bk_157.awsui_button-no-text_vjswe_sb2bk_556 > .awsui_icon_vjswe_sb2bk_585:not(#\9) {
604
+ .awsui_button_vjswe_jl17v_157.awsui_button-no-text_vjswe_jl17v_556 > .awsui_icon_vjswe_jl17v_585:not(#\9) {
605
605
  margin-inline-start: auto;
606
606
  margin-inline-end: auto;
607
607
  inset-inline: 0;
608
608
  }
609
609
 
610
- .awsui_link_vjswe_sb2bk_609.awsui_disabled_vjswe_sb2bk_223:not(#\9):not(.awsui_disabled-with-reason_vjswe_sb2bk_609) {
610
+ .awsui_link_vjswe_jl17v_609.awsui_disabled_vjswe_jl17v_223:not(#\9):not(.awsui_disabled-with-reason_vjswe_jl17v_609) {
611
611
  pointer-events: none;
612
612
  }
package/lib/internal/template/button/styles.selectors.js CHANGED
@@ -2,27 +2,27 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "content": "awsui_content_vjswe_sb2bk_153",
6
- "button": "awsui_button_vjswe_sb2bk_157",
7
- "variant-normal": "awsui_variant-normal_vjswe_sb2bk_205",
8
- "disabled": "awsui_disabled_vjswe_sb2bk_223",
9
- "variant-primary": "awsui_variant-primary_vjswe_sb2bk_230",
10
- "variant-link": "awsui_variant-link_vjswe_sb2bk_255",
11
- "variant-icon": "awsui_variant-icon_vjswe_sb2bk_280",
12
- "variant-inline-icon": "awsui_variant-inline-icon_vjswe_sb2bk_305",
13
- "variant-inline-icon-pointer-target": "awsui_variant-inline-icon-pointer-target_vjswe_sb2bk_330",
14
- "variant-inline-link": "awsui_variant-inline-link_vjswe_sb2bk_355",
15
- "variant-modal-dismiss": "awsui_variant-modal-dismiss_vjswe_sb2bk_384",
16
- "variant-flashbar-icon": "awsui_variant-flashbar-icon_vjswe_sb2bk_409",
17
- "variant-breadcrumb-group": "awsui_variant-breadcrumb-group_vjswe_sb2bk_434",
18
- "variant-menu-trigger": "awsui_variant-menu-trigger_vjswe_sb2bk_464",
19
- "button-no-text": "awsui_button-no-text_vjswe_sb2bk_556",
20
- "button-no-wrap": "awsui_button-no-wrap_vjswe_sb2bk_560",
21
- "full-width": "awsui_full-width_vjswe_sb2bk_563",
22
- "icon-left": "awsui_icon-left_vjswe_sb2bk_585",
23
- "icon-right": "awsui_icon-right_vjswe_sb2bk_590",
24
- "icon": "awsui_icon_vjswe_sb2bk_585",
25
- "link": "awsui_link_vjswe_sb2bk_609",
26
- "disabled-with-reason": "awsui_disabled-with-reason_vjswe_sb2bk_609"
5
+ "content": "awsui_content_vjswe_jl17v_153",
6
+ "button": "awsui_button_vjswe_jl17v_157",
7
+ "variant-normal": "awsui_variant-normal_vjswe_jl17v_205",
8
+ "disabled": "awsui_disabled_vjswe_jl17v_223",
9
+ "variant-primary": "awsui_variant-primary_vjswe_jl17v_230",
10
+ "variant-link": "awsui_variant-link_vjswe_jl17v_255",
11
+ "variant-icon": "awsui_variant-icon_vjswe_jl17v_280",
12
+ "variant-inline-icon": "awsui_variant-inline-icon_vjswe_jl17v_305",
13
+ "variant-inline-icon-pointer-target": "awsui_variant-inline-icon-pointer-target_vjswe_jl17v_330",
14
+ "variant-inline-link": "awsui_variant-inline-link_vjswe_jl17v_355",
15
+ "variant-modal-dismiss": "awsui_variant-modal-dismiss_vjswe_jl17v_384",
16
+ "variant-flashbar-icon": "awsui_variant-flashbar-icon_vjswe_jl17v_409",
17
+ "variant-breadcrumb-group": "awsui_variant-breadcrumb-group_vjswe_jl17v_434",
18
+ "variant-menu-trigger": "awsui_variant-menu-trigger_vjswe_jl17v_464",
19
+ "button-no-text": "awsui_button-no-text_vjswe_jl17v_556",
20
+ "button-no-wrap": "awsui_button-no-wrap_vjswe_jl17v_560",
21
+ "full-width": "awsui_full-width_vjswe_jl17v_563",
22
+ "icon-left": "awsui_icon-left_vjswe_jl17v_585",
23
+ "icon-right": "awsui_icon-right_vjswe_jl17v_590",
24
+ "icon": "awsui_icon_vjswe_jl17v_585",
25
+ "link": "awsui_link_vjswe_jl17v_609",
26
+ "disabled-with-reason": "awsui_disabled-with-reason_vjswe_jl17v_609"
27
27
  };
28
28
 
package/lib/internal/template/button-group/icon-button-item.d.ts.map CHANGED
@@ -1 +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;AAGtD,OAAO,EAAE,sBAAsB,EAAuB,MAAM,6BAA6B,CAAC;AAE1F,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAInD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,gBAAgB,CAAC,UAAU,CAAC;IAClC,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,sBAAsB,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACzE;AAED,QAAA,MAAM,cAAc,6FAmDnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
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;AAGtD,OAAO,EAAE,sBAAsB,EAAuB,MAAM,6BAA6B,CAAC;AAE1F,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAInD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,gBAAgB,CAAC,UAAU,CAAC;IAClC,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,sBAAsB,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACzE;AAED,QAAA,MAAM,cAAc,6FAoDnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
package/lib/internal/template/button-group/icon-button-item.js CHANGED
@@ -17,7 +17,7 @@ const IconButtonItem = forwardRef(({ item, showTooltip, showFeedback, onTooltipD
17
17
  const canShowTooltip = Boolean(showTooltip && !item.disabled && !item.loading);
18
18
  const canShowFeedback = Boolean(showTooltip && showFeedback && item.popoverFeedback);
19
19
  return (React.createElement("div", { ref: containerRef },
20
- React.createElement(InternalButton, { variant: "icon", loading: item.loading, loadingText: item.loadingText, disabled: item.disabled, __focusable: canShowFeedback, iconName: hasIcon ? item.iconName : 'close', iconUrl: item.iconUrl, iconSvg: item.iconSvg, iconAlt: item.text, ariaLabel: item.text, onClick: event => fireCancelableEvent(onItemClick, { id: item.id }, event), ref: ref, "data-testid": item.id, "data-itemid": item.id, className: clsx(testUtilStyles.item, testUtilStyles['button-group-item']), __title: "" }, item.text),
20
+ React.createElement(InternalButton, { variant: "icon", loading: item.loading, loadingText: item.loadingText, disabled: item.disabled, disabledReason: showFeedback ? undefined : item.disabledReason, __focusable: canShowFeedback, iconName: hasIcon ? item.iconName : 'close', iconUrl: item.iconUrl, iconSvg: item.iconSvg, iconAlt: item.text, ariaLabel: item.text, onClick: event => fireCancelableEvent(onItemClick, { id: item.id }, event), ref: ref, "data-testid": item.id, "data-itemid": item.id, className: clsx(testUtilStyles.item, testUtilStyles['button-group-item']), __title: "" }, item.text),
21
21
  (canShowTooltip || canShowFeedback) && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: item.id, value: (showFeedback && React.createElement(InternalLiveRegion, { tagName: "span" }, item.popoverFeedback)) ||
22
22
  item.text, className: clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip']), onDismiss: onTooltipDismiss }))));
23
23
  });
package/lib/internal/template/button-group/icon-button-item.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"icon-button-item.js","sourceRoot":"","sources":["../../../src/button-group/icon-button-item.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAGzE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,OAAO,MAAM,yCAAyC,CAAC;AAC9D,OAAO,EAA0B,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC1F,OAAO,kBAAkB,MAAM,4BAA4B,CAAC;AAG5D,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAU1D,MAAM,cAAc,GAAG,UAAU,CAC/B,CACE,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAuB,EACvF,GAA+B,EAC/B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC;IAE9D,IAAI,CAAC,OAAO,EAAE;QACZ,QAAQ,CAAC,aAAa,EAAE,kCAAkC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;KACtE;IAED,MAAM,cAAc,GAAG,OAAO,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC/E,MAAM,eAAe,GAAG,OAAO,CAAC,WAAW,IAAI,YAAY,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC;IACrF,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY;QACpB,oBAAC,cAAc,IACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,eAAe,EAC5B,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC3C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,EAC1E,GAAG,EAAE,GAAG,iBACK,IAAI,CAAC,EAAE,iBACP,IAAI,CAAC,EAAE,EACpB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC,mBAAmB,CAAC,CAAC,EACzE,OAAO,EAAC,EAAE,IAET,IAAI,CAAC,IAAI,CACK;QAChB,CAAC,cAAc,IAAI,eAAe,CAAC,IAAI,CACtC,oBAAC,OAAO,IACN,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EACjB,KAAK,EACH,CAAC,YAAY,IAAI,oBAAC,kBAAkB,IAAC,OAAO,EAAC,MAAM,IAAE,IAAI,CAAC,eAAe,CAAsB,CAAC;gBAChG,IAAI,CAAC,IAAI,EAEX,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,sBAAsB,CAAC,CAAC,EAC/E,SAAS,EAAE,gBAAgB,GAC3B,CACH,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { ButtonProps } from '../button/interfaces.js';\nimport { InternalButton } from '../button/internal.js';\nimport Tooltip from '../internal/components/tooltip/index.js';\nimport { CancelableEventHandler, fireCancelableEvent } from '../internal/events/index.js';\nimport InternalLiveRegion from '../live-region/internal.js';\nimport { ButtonGroupProps } from './interfaces.js';\n\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface IconButtonItemProps {\n item: ButtonGroupProps.IconButton;\n showTooltip: boolean;\n showFeedback: boolean;\n onTooltipDismiss: () => void;\n onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n}\n\nconst IconButtonItem = forwardRef(\n (\n { item, showTooltip, showFeedback, onTooltipDismiss, onItemClick }: IconButtonItemProps,\n ref: React.Ref<ButtonProps.Ref>\n ) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const hasIcon = item.iconName || item.iconUrl || item.iconSvg;\n\n if (!hasIcon) {\n warnOnce('ButtonGroup', `Missing icon for item with id: ${item.id}`);\n }\n\n const canShowTooltip = Boolean(showTooltip && !item.disabled && !item.loading);\n const canShowFeedback = Boolean(showTooltip && showFeedback && item.popoverFeedback);\n return (\n <div ref={containerRef}>\n <InternalButton\n variant=\"icon\"\n loading={item.loading}\n loadingText={item.loadingText}\n disabled={item.disabled}\n __focusable={canShowFeedback}\n iconName={hasIcon ? item.iconName : 'close'}\n iconUrl={item.iconUrl}\n iconSvg={item.iconSvg}\n iconAlt={item.text}\n ariaLabel={item.text}\n onClick={event => fireCancelableEvent(onItemClick, { id: item.id }, event)}\n ref={ref}\n data-testid={item.id}\n data-itemid={item.id}\n className={clsx(testUtilStyles.item, testUtilStyles['button-group-item'])}\n __title=\"\"\n >\n {item.text}\n </InternalButton>\n {(canShowTooltip || canShowFeedback) && (\n <Tooltip\n trackRef={containerRef}\n trackKey={item.id}\n value={\n (showFeedback && <InternalLiveRegion tagName=\"span\">{item.popoverFeedback}</InternalLiveRegion>) ||\n item.text\n }\n className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}\n onDismiss={onTooltipDismiss}\n />\n )}\n </div>\n );\n }\n);\n\nexport default IconButtonItem;\n"]}
1
+ {"version":3,"file":"icon-button-item.js","sourceRoot":"","sources":["../../../src/button-group/icon-button-item.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAGzE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,OAAO,MAAM,yCAAyC,CAAC;AAC9D,OAAO,EAA0B,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC1F,OAAO,kBAAkB,MAAM,4BAA4B,CAAC;AAG5D,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAU1D,MAAM,cAAc,GAAG,UAAU,CAC/B,CACE,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAuB,EACvF,GAA+B,EAC/B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC;IAE9D,IAAI,CAAC,OAAO,EAAE;QACZ,QAAQ,CAAC,aAAa,EAAE,kCAAkC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;KACtE;IAED,MAAM,cAAc,GAAG,OAAO,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC/E,MAAM,eAAe,GAAG,OAAO,CAAC,WAAW,IAAI,YAAY,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC;IACrF,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY;QACpB,oBAAC,cAAc,IACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAC9D,WAAW,EAAE,eAAe,EAC5B,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC3C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,EAC1E,GAAG,EAAE,GAAG,iBACK,IAAI,CAAC,EAAE,iBACP,IAAI,CAAC,EAAE,EACpB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC,mBAAmB,CAAC,CAAC,EACzE,OAAO,EAAC,EAAE,IAET,IAAI,CAAC,IAAI,CACK;QAChB,CAAC,cAAc,IAAI,eAAe,CAAC,IAAI,CACtC,oBAAC,OAAO,IACN,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EACjB,KAAK,EACH,CAAC,YAAY,IAAI,oBAAC,kBAAkB,IAAC,OAAO,EAAC,MAAM,IAAE,IAAI,CAAC,eAAe,CAAsB,CAAC;gBAChG,IAAI,CAAC,IAAI,EAEX,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,sBAAsB,CAAC,CAAC,EAC/E,SAAS,EAAE,gBAAgB,GAC3B,CACH,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { ButtonProps } from '../button/interfaces.js';\nimport { InternalButton } from '../button/internal.js';\nimport Tooltip from '../internal/components/tooltip/index.js';\nimport { CancelableEventHandler, fireCancelableEvent } from '../internal/events/index.js';\nimport InternalLiveRegion from '../live-region/internal.js';\nimport { ButtonGroupProps } from './interfaces.js';\n\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface IconButtonItemProps {\n item: ButtonGroupProps.IconButton;\n showTooltip: boolean;\n showFeedback: boolean;\n onTooltipDismiss: () => void;\n onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n}\n\nconst IconButtonItem = forwardRef(\n (\n { item, showTooltip, showFeedback, onTooltipDismiss, onItemClick }: IconButtonItemProps,\n ref: React.Ref<ButtonProps.Ref>\n ) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const hasIcon = item.iconName || item.iconUrl || item.iconSvg;\n\n if (!hasIcon) {\n warnOnce('ButtonGroup', `Missing icon for item with id: ${item.id}`);\n }\n\n const canShowTooltip = Boolean(showTooltip && !item.disabled && !item.loading);\n const canShowFeedback = Boolean(showTooltip && showFeedback && item.popoverFeedback);\n return (\n <div ref={containerRef}>\n <InternalButton\n variant=\"icon\"\n loading={item.loading}\n loadingText={item.loadingText}\n disabled={item.disabled}\n disabledReason={showFeedback ? undefined : item.disabledReason} // don't show disabled reason when popover feedback is shown\n __focusable={canShowFeedback}\n iconName={hasIcon ? item.iconName : 'close'}\n iconUrl={item.iconUrl}\n iconSvg={item.iconSvg}\n iconAlt={item.text}\n ariaLabel={item.text}\n onClick={event => fireCancelableEvent(onItemClick, { id: item.id }, event)}\n ref={ref}\n data-testid={item.id}\n data-itemid={item.id}\n className={clsx(testUtilStyles.item, testUtilStyles['button-group-item'])}\n __title=\"\"\n >\n {item.text}\n </InternalButton>\n {(canShowTooltip || canShowFeedback) && (\n <Tooltip\n trackRef={containerRef}\n trackKey={item.id}\n value={\n (showFeedback && <InternalLiveRegion tagName=\"span\">{item.popoverFeedback}</InternalLiveRegion>) ||\n item.text\n }\n className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}\n onDismiss={onTooltipDismiss}\n />\n )}\n </div>\n );\n }\n);\n\nexport default IconButtonItem;\n"]}
package/lib/internal/template/button-group/icon-toggle-button-item.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"icon-toggle-button-item.d.ts","sourceRoot":"","sources":["../../../src/button-group/icon-toggle-button-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,sBAAsB,EAAuB,MAAM,6BAA6B,CAAC;AAG1F,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAInD,UAAU,yBAAyB;IACjC,IAAI,EAAE,gBAAgB,CAAC,gBAAgB,CAAC;IACxC,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,sBAAsB,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACzE;AAED,QAAA,MAAM,oBAAoB,mGAyDzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
1
+ {"version":3,"file":"icon-toggle-button-item.d.ts","sourceRoot":"","sources":["../../../src/button-group/icon-toggle-button-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,sBAAsB,EAAuB,MAAM,6BAA6B,CAAC;AAG1F,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAInD,UAAU,yBAAyB;IACjC,IAAI,EAAE,gBAAgB,CAAC,gBAAgB,CAAC;IACxC,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,sBAAsB,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACzE;AAED,QAAA,MAAM,oBAAoB,mGA0DzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
package/lib/internal/template/button-group/icon-toggle-button-item.js CHANGED
@@ -23,7 +23,7 @@ const IconToggleButtonItem = forwardRef(({ item, showTooltip, showFeedback, onTo
23
23
  const canShowTooltip = showTooltip && !item.disabled && !item.loading;
24
24
  const canShowFeedback = showTooltip && showFeedback && feedbackContent;
25
25
  return (React.createElement("div", { ref: containerRef },
26
- React.createElement(InternalToggleButton, { variant: "icon", pressed: item.pressed, loading: item.loading, loadingText: item.loadingText, disabled: item.disabled, iconName: hasIcon ? item.iconName : 'close', iconUrl: item.iconUrl, iconSvg: item.iconSvg, pressedIconName: hasIcon ? item.pressedIconName : 'close', pressedIconUrl: item.pressedIconUrl, pressedIconSvg: item.pressedIconUrl, ariaLabel: item.text, onChange: event => fireCancelableEvent(onItemClick, { id: item.id, pressed: event.detail.pressed }), ref: ref, "data-testid": item.id, "data-itemid": item.id, className: clsx(testUtilStyles.item, testUtilStyles['button-group-item']), __title: "" }, item.text),
26
+ React.createElement(InternalToggleButton, { variant: "icon", pressed: item.pressed, loading: item.loading, loadingText: item.loadingText, disabled: item.disabled, disabledReason: showFeedback ? undefined : item.disabledReason, iconName: hasIcon ? item.iconName : 'close', iconUrl: item.iconUrl, iconSvg: item.iconSvg, pressedIconName: hasIcon ? item.pressedIconName : 'close', pressedIconUrl: item.pressedIconUrl, pressedIconSvg: item.pressedIconUrl, ariaLabel: item.text, onChange: event => fireCancelableEvent(onItemClick, { id: item.id, pressed: event.detail.pressed }), ref: ref, "data-testid": item.id, "data-itemid": item.id, className: clsx(testUtilStyles.item, testUtilStyles['button-group-item']), __title: "" }, item.text),
27
27
  (canShowTooltip || canShowFeedback) && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: item.id, value: (showFeedback && React.createElement(InternalLiveRegion, { tagName: "span" }, feedbackContent)) || item.text, className: clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip']), onDismiss: onTooltipDismiss }))));
28
28
  });
29
29
  export default IconToggleButtonItem;
package/lib/internal/template/button-group/icon-toggle-button-item.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"icon-toggle-button-item.js","sourceRoot":"","sources":["../../../src/button-group/icon-toggle-button-item.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, { forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { ButtonProps } from '../button/interfaces.js';\nimport Tooltip from '../internal/components/tooltip/index.js';\nimport { CancelableEventHandler, fireCancelableEvent } from '../internal/events/index.js';\nimport InternalLiveRegion from '../live-region/internal.js';\nimport { InternalToggleButton } from '../toggle-button/internal.js';\nimport { ButtonGroupProps } from './interfaces.js';\n\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface IconToggleButtonItemProps {\n item: ButtonGroupProps.IconToggleButton;\n showTooltip: boolean;\n showFeedback: boolean;\n onTooltipDismiss: () => void;\n onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n}\n\nconst IconToggleButtonItem = forwardRef(\n (\n { item, showTooltip, showFeedback, onTooltipDismiss, onItemClick }: IconToggleButtonItemProps,\n ref: React.Ref<ButtonProps.Ref>\n ) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const hasIcon = item.iconName || item.iconUrl || item.iconSvg;\n const hasPressedIcon = item.pressedIconName || item.pressedIconUrl || item.pressedIconSvg;\n\n if (!hasIcon) {\n warnOnce('ButtonGroup', `Missing icon for item with id: ${item.id}`);\n }\n if (!hasPressedIcon) {\n warnOnce('ButtonGroup', `Missing pressed icon for item with id: ${item.id}`);\n }\n\n const feedbackContent = item.pressed ? item.pressedPopoverFeedback ?? item.popoverFeedback : item.popoverFeedback;\n const canShowTooltip = showTooltip && !item.disabled && !item.loading;\n const canShowFeedback = showTooltip && showFeedback && feedbackContent;\n return (\n <div ref={containerRef}>\n <InternalToggleButton\n variant=\"icon\"\n pressed={item.pressed}\n loading={item.loading}\n loadingText={item.loadingText}\n disabled={item.disabled}\n iconName={hasIcon ? item.iconName : 'close'}\n iconUrl={item.iconUrl}\n iconSvg={item.iconSvg}\n pressedIconName={hasIcon ? item.pressedIconName : 'close'}\n pressedIconUrl={item.pressedIconUrl}\n pressedIconSvg={item.pressedIconUrl}\n ariaLabel={item.text}\n onChange={event => fireCancelableEvent(onItemClick, { id: item.id, pressed: event.detail.pressed })}\n ref={ref}\n data-testid={item.id}\n data-itemid={item.id}\n className={clsx(testUtilStyles.item, testUtilStyles['button-group-item'])}\n __title=\"\"\n >\n {item.text}\n </InternalToggleButton>\n {(canShowTooltip || canShowFeedback) && (\n <Tooltip\n trackRef={containerRef}\n trackKey={item.id}\n value={\n (showFeedback && <InternalLiveRegion tagName=\"span\">{feedbackContent}</InternalLiveRegion>) || item.text\n }\n className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}\n onDismiss={onTooltipDismiss}\n />\n )}\n </div>\n );\n }\n);\n\nexport default IconToggleButtonItem;\n"]}
1
+ {"version":3,"file":"icon-toggle-button-item.js","sourceRoot":"","sources":["../../../src/button-group/icon-toggle-button-item.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, { forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { ButtonProps } from '../button/interfaces.js';\nimport Tooltip from '../internal/components/tooltip/index.js';\nimport { CancelableEventHandler, fireCancelableEvent } from '../internal/events/index.js';\nimport InternalLiveRegion from '../live-region/internal.js';\nimport { InternalToggleButton } from '../toggle-button/internal.js';\nimport { ButtonGroupProps } from './interfaces.js';\n\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface IconToggleButtonItemProps {\n item: ButtonGroupProps.IconToggleButton;\n showTooltip: boolean;\n showFeedback: boolean;\n onTooltipDismiss: () => void;\n onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n}\n\nconst IconToggleButtonItem = forwardRef(\n (\n { item, showTooltip, showFeedback, onTooltipDismiss, onItemClick }: IconToggleButtonItemProps,\n ref: React.Ref<ButtonProps.Ref>\n ) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const hasIcon = item.iconName || item.iconUrl || item.iconSvg;\n const hasPressedIcon = item.pressedIconName || item.pressedIconUrl || item.pressedIconSvg;\n\n if (!hasIcon) {\n warnOnce('ButtonGroup', `Missing icon for item with id: ${item.id}`);\n }\n if (!hasPressedIcon) {\n warnOnce('ButtonGroup', `Missing pressed icon for item with id: ${item.id}`);\n }\n\n const feedbackContent = item.pressed ? item.pressedPopoverFeedback ?? item.popoverFeedback : item.popoverFeedback;\n const canShowTooltip = showTooltip && !item.disabled && !item.loading;\n const canShowFeedback = showTooltip && showFeedback && feedbackContent;\n return (\n <div ref={containerRef}>\n <InternalToggleButton\n variant=\"icon\"\n pressed={item.pressed}\n loading={item.loading}\n loadingText={item.loadingText}\n disabled={item.disabled}\n disabledReason={showFeedback ? undefined : item.disabledReason} // don't show disabled reason when popover feedback is shown\n iconName={hasIcon ? item.iconName : 'close'}\n iconUrl={item.iconUrl}\n iconSvg={item.iconSvg}\n pressedIconName={hasIcon ? item.pressedIconName : 'close'}\n pressedIconUrl={item.pressedIconUrl}\n pressedIconSvg={item.pressedIconUrl}\n ariaLabel={item.text}\n onChange={event => fireCancelableEvent(onItemClick, { id: item.id, pressed: event.detail.pressed })}\n ref={ref}\n data-testid={item.id}\n data-itemid={item.id}\n className={clsx(testUtilStyles.item, testUtilStyles['button-group-item'])}\n __title=\"\"\n >\n {item.text}\n </InternalToggleButton>\n {(canShowTooltip || canShowFeedback) && (\n <Tooltip\n trackRef={containerRef}\n trackKey={item.id}\n value={\n (showFeedback && <InternalLiveRegion tagName=\"span\">{feedbackContent}</InternalLiveRegion>) || item.text\n }\n className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}\n onDismiss={onTooltipDismiss}\n />\n )}\n </div>\n );\n }\n);\n\nexport default IconToggleButtonItem;\n"]}