@cloudscape-design/components 3.0.331 → 3.0.333

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 (51) hide show
  1. package/button/interfaces.d.ts +2 -1
  2. package/button/interfaces.d.ts.map +1 -1
  3. package/button/interfaces.js.map +1 -1
  4. package/button/styles.css.js +20 -19
  5. package/button/styles.scoped.css +223 -137
  6. package/button/styles.selectors.js +20 -19
  7. package/button-dropdown/interfaces.d.ts +2 -1
  8. package/button-dropdown/interfaces.d.ts.map +1 -1
  9. package/button-dropdown/interfaces.js.map +1 -1
  10. package/button-dropdown/internal.js +2 -2
  11. package/button-dropdown/internal.js.map +1 -1
  12. package/expandable-section/expandable-section-header.d.ts.map +1 -1
  13. package/expandable-section/expandable-section-header.js +1 -1
  14. package/expandable-section/expandable-section-header.js.map +1 -1
  15. package/expandable-section/styles.css.js +29 -28
  16. package/expandable-section/styles.scoped.css +59 -56
  17. package/expandable-section/styles.selectors.js +29 -28
  18. package/form/index.d.ts.map +1 -1
  19. package/form/index.js +2 -1
  20. package/form/index.js.map +1 -1
  21. package/form/internal.js +2 -2
  22. package/form/internal.js.map +1 -1
  23. package/form-field/internal.d.ts.map +1 -1
  24. package/form-field/internal.js +4 -3
  25. package/form-field/internal.js.map +1 -1
  26. package/icon/icons.js +1 -1
  27. package/icon/interfaces.d.ts +1 -1
  28. package/icon/interfaces.d.ts.map +1 -1
  29. package/icon/interfaces.js.map +1 -1
  30. package/internal/analytics/components/analytics-funnel.d.ts.map +1 -1
  31. package/internal/analytics/components/analytics-funnel.js +4 -0
  32. package/internal/analytics/components/analytics-funnel.js.map +1 -1
  33. package/internal/analytics/context/analytics-context.d.ts +2 -0
  34. package/internal/analytics/context/analytics-context.d.ts.map +1 -1
  35. package/internal/analytics/context/analytics-context.js +3 -0
  36. package/internal/analytics/context/analytics-context.js.map +1 -1
  37. package/internal/analytics/hooks/use-funnel.d.ts +2 -0
  38. package/internal/analytics/hooks/use-funnel.d.ts.map +1 -1
  39. package/internal/environment.js +1 -1
  40. package/internal/manifest.json +1 -1
  41. package/package.json +1 -1
  42. package/test-utils/dom/expandable-section/index.d.ts +2 -0
  43. package/test-utils/dom/expandable-section/index.js +7 -0
  44. package/test-utils/dom/expandable-section/index.js.map +1 -1
  45. package/test-utils/selectors/expandable-section/index.d.ts +2 -0
  46. package/test-utils/selectors/expandable-section/index.js +7 -0
  47. package/test-utils/selectors/expandable-section/index.js.map +1 -1
  48. package/test-utils/tsconfig.tsbuildinfo +1 -1
  49. package/wizard/internal.d.ts.map +1 -1
  50. package/wizard/internal.js +2 -1
  51. package/wizard/internal.js.map +1 -1
package/expandable-section/styles.scoped.css CHANGED
@@ -94,10 +94,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
94
94
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
95
95
  SPDX-License-Identifier: Apache-2.0
96
96
  */
97
- .awsui_content-enter_gwq0h_a11gk_97:not(#\9) {
98
- animation: awsui_awsui-motion-fade-in_gwq0h_a11gk_1 var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out);
97
+ .awsui_content-enter_gwq0h_1brli_97:not(#\9) {
98
+ animation: awsui_awsui-motion-fade-in_gwq0h_1brli_1 var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out);
99
99
  }
100
- @keyframes awsui_awsui-motion-fade-in_gwq0h_a11gk_1 {
100
+ @keyframes awsui_awsui-motion-fade-in_gwq0h_1brli_1 {
101
101
  from {
102
102
  opacity: 0.2;
103
103
  }
@@ -106,40 +106,40 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
106
106
  }
107
107
  }
108
108
  @media (prefers-reduced-motion: reduce) {
109
- .awsui_content-enter_gwq0h_a11gk_97:not(#\9) {
109
+ .awsui_content-enter_gwq0h_1brli_97:not(#\9) {
110
110
  animation: none;
111
111
  transition: none;
112
112
  }
113
113
  }
114
- .awsui-motion-disabled .awsui_content-enter_gwq0h_a11gk_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_a11gk_97:not(#\9) {
114
+ .awsui-motion-disabled .awsui_content-enter_gwq0h_1brli_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_1brli_97:not(#\9) {
115
115
  animation: none;
116
116
  transition: none;
117
117
  }
118
118
 
119
- .awsui_trigger-expanded_gwq0h_a11gk_119:not(#\9) {
119
+ .awsui_trigger-expanded_gwq0h_1brli_119:not(#\9) {
120
120
  transition: border-bottom-color var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out);
121
121
  }
122
122
  @media (prefers-reduced-motion: reduce) {
123
- .awsui_trigger-expanded_gwq0h_a11gk_119:not(#\9) {
123
+ .awsui_trigger-expanded_gwq0h_1brli_119:not(#\9) {
124
124
  animation: none;
125
125
  transition: none;
126
126
  }
127
127
  }
128
- .awsui-motion-disabled .awsui_trigger-expanded_gwq0h_a11gk_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_a11gk_119:not(#\9) {
128
+ .awsui-motion-disabled .awsui_trigger-expanded_gwq0h_1brli_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_1brli_119:not(#\9) {
129
129
  animation: none;
130
130
  transition: none;
131
131
  }
132
132
 
133
- .awsui_icon_gwq0h_a11gk_133:not(#\9) {
133
+ .awsui_icon_gwq0h_1brli_133:not(#\9) {
134
134
  transition: transform var(--motion-duration-rotate-90-jfxxiy, 135ms) var(--motion-easing-rotate-90-ax5lt7, cubic-bezier(0.165, 0.84, 0.44, 1));
135
135
  }
136
136
  @media (prefers-reduced-motion: reduce) {
137
- .awsui_icon_gwq0h_a11gk_133:not(#\9) {
137
+ .awsui_icon_gwq0h_1brli_133:not(#\9) {
138
138
  animation: none;
139
139
  transition: none;
140
140
  }
141
141
  }
142
- .awsui-motion-disabled .awsui_icon_gwq0h_a11gk_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_a11gk_133:not(#\9) {
142
+ .awsui-motion-disabled .awsui_icon_gwq0h_1brli_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_1brli_133:not(#\9) {
143
143
  animation: none;
144
144
  transition: none;
145
145
  }
@@ -148,7 +148,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
148
148
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
149
149
  SPDX-License-Identifier: Apache-2.0
150
150
  */
151
- .awsui_root_gwq0h_a11gk_151:not(#\9) {
151
+ .awsui_root_gwq0h_1brli_151:not(#\9) {
152
152
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
153
153
  border-collapse: separate;
154
154
  border-spacing: 0;
@@ -191,111 +191,111 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
191
191
  display: block;
192
192
  }
193
193
 
194
- .awsui_expand-button_gwq0h_a11gk_168:not(#\9) {
194
+ .awsui_expand-button_gwq0h_1brli_168:not(#\9) {
195
195
  /* used in test-utils */
196
196
  }
197
197
 
198
- .awsui_icon_gwq0h_a11gk_133:not(#\9) {
198
+ .awsui_icon_gwq0h_1brli_133:not(#\9) {
199
199
  transform: rotate(-90deg);
200
200
  }
201
- .awsui_icon_gwq0h_a11gk_133.awsui_expanded_gwq0h_a11gk_175:not(#\9) {
201
+ .awsui_icon_gwq0h_1brli_133.awsui_expanded_gwq0h_1brli_175:not(#\9) {
202
202
  transform: rotate(0deg);
203
203
  }
204
204
 
205
- .awsui_icon-container_gwq0h_a11gk_179:not(#\9) {
205
+ .awsui_icon-container_gwq0h_1brli_179:not(#\9) {
206
206
  position: relative;
207
207
  margin-left: calc((var(--font-body-m-line-height-rfgrp9, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2);
208
208
  margin-right: calc(var(--space-xxs-ja5cp8, 4px) + var(--border-divider-list-width-um3zli, 1px));
209
209
  }
210
- .awsui_icon-container-container_gwq0h_a11gk_184:not(#\9) {
210
+ .awsui_icon-container-container_gwq0h_1brli_184:not(#\9) {
211
211
  margin-right: var(--space-xs-edba2s, 8px);
212
212
  }
213
213
 
214
- .awsui_wrapper_gwq0h_a11gk_188:not(#\9) {
214
+ .awsui_wrapper_gwq0h_1brli_188:not(#\9) {
215
215
  box-sizing: border-box;
216
216
  border: none;
217
217
  width: 100%;
218
218
  line-height: var(--font-body-m-line-height-rfgrp9, 22px);
219
219
  text-align: left;
220
220
  }
221
- .awsui_wrapper-default_gwq0h_a11gk_195:not(#\9), .awsui_wrapper-footer_gwq0h_a11gk_195:not(#\9) {
221
+ .awsui_wrapper-default_gwq0h_1brli_195:not(#\9), .awsui_wrapper-footer_gwq0h_1brli_195:not(#\9) {
222
222
  border: var(--border-divider-section-width-orq175, 2px) solid transparent;
223
223
  }
224
- .awsui_wrapper-navigation_gwq0h_a11gk_198:not(#\9) {
224
+ .awsui_wrapper-navigation_gwq0h_1brli_198:not(#\9) {
225
225
  border-left: var(--border-divider-section-width-orq175, 2px) solid transparent;
226
226
  }
227
- .awsui_wrapper-navigation_gwq0h_a11gk_198:not(#\9), .awsui_wrapper-container_gwq0h_a11gk_201:not(#\9) {
227
+ .awsui_wrapper-navigation_gwq0h_1brli_198:not(#\9), .awsui_wrapper-container_gwq0h_1brli_201:not(#\9) {
228
228
  display: flex;
229
229
  font-weight: var(--font-heading-s-weight-5y5giq, 800);
230
230
  }
231
- .awsui_wrapper-default_gwq0h_a11gk_195:not(#\9), .awsui_wrapper-navigation_gwq0h_a11gk_198:not(#\9), .awsui_wrapper-footer_gwq0h_a11gk_195:not(#\9) {
231
+ .awsui_wrapper-default_gwq0h_1brli_195:not(#\9), .awsui_wrapper-navigation_gwq0h_1brli_198:not(#\9), .awsui_wrapper-footer_gwq0h_1brli_195:not(#\9) {
232
232
  color: var(--color-text-expandable-section-default-m3lg7r, #000716);
233
233
  -webkit-font-smoothing: var(--font-smoothing-webkit-fyh4as, antialiased);
234
234
  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-pa2uqe, grayscale);
235
235
  font-size: var(--font-expandable-heading-size-mkp9vq, 16px);
236
236
  letter-spacing: var(--font-heading-s-letter-spacing-j4vcrt, -0.005em);
237
237
  }
238
- .awsui_wrapper-default_gwq0h_a11gk_195:not(#\9) {
238
+ .awsui_wrapper-default_gwq0h_1brli_195:not(#\9) {
239
239
  padding-top: var(--space-scaled-xxs-t2t62i, 4px);
240
240
  padding-bottom: var(--space-scaled-xxs-t2t62i, 4px);
241
241
  padding-right: var(--space-xxs-ja5cp8, 4px);
242
242
  }
243
- .awsui_wrapper-default_gwq0h_a11gk_195.awsui_header-deprecated_gwq0h_a11gk_217:not(#\9) {
243
+ .awsui_wrapper-default_gwq0h_1brli_195.awsui_header-deprecated_gwq0h_1brli_217:not(#\9) {
244
244
  padding-left: var(--space-xxs-ja5cp8, 4px);
245
245
  }
246
- .awsui_wrapper-default_gwq0h_a11gk_195:not(#\9):not(.awsui_header-deprecated_gwq0h_a11gk_217) {
246
+ .awsui_wrapper-default_gwq0h_1brli_195:not(#\9):not(.awsui_header-deprecated_gwq0h_1brli_217) {
247
247
  padding-left: calc(var(--space-xxs-ja5cp8, 4px) + calc(var(--size-icon-normal-jq6jat, 16px) + (var(--font-body-m-line-height-rfgrp9, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2 + var(--space-xxs-ja5cp8, 4px) + var(--border-divider-list-width-um3zli, 1px)));
248
248
  }
249
- .awsui_wrapper-footer_gwq0h_a11gk_195:not(#\9) {
249
+ .awsui_wrapper-footer_gwq0h_1brli_195:not(#\9) {
250
250
  padding-top: var(--space-scaled-xxs-t2t62i, 4px);
251
251
  padding-bottom: var(--space-scaled-xxs-t2t62i, 4px);
252
252
  padding-right: 0;
253
253
  }
254
- .awsui_wrapper-footer_gwq0h_a11gk_195.awsui_header-deprecated_gwq0h_a11gk_217:not(#\9) {
254
+ .awsui_wrapper-footer_gwq0h_1brli_195.awsui_header-deprecated_gwq0h_1brli_217:not(#\9) {
255
255
  padding-left: 0;
256
256
  }
257
- .awsui_wrapper-footer_gwq0h_a11gk_195:not(#\9):not(.awsui_header-deprecated_gwq0h_a11gk_217) {
257
+ .awsui_wrapper-footer_gwq0h_1brli_195:not(#\9):not(.awsui_header-deprecated_gwq0h_1brli_217) {
258
258
  padding-left: calc(var(--size-icon-normal-jq6jat, 16px) + (var(--font-body-m-line-height-rfgrp9, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2 + var(--space-xxs-ja5cp8, 4px) + var(--border-divider-list-width-um3zli, 1px));
259
259
  }
260
- .awsui_wrapper-container_gwq0h_a11gk_201:not(#\9) {
260
+ .awsui_wrapper-container_gwq0h_1brli_201:not(#\9) {
261
261
  padding-top: var(--space-container-header-vertical-di96ce, 12px);
262
262
  padding-bottom: var(--space-container-header-vertical-di96ce, 12px);
263
263
  padding-right: var(--space-container-horizontal-jxdgil, 20px);
264
264
  }
265
- .awsui_wrapper-container_gwq0h_a11gk_201.awsui_header-deprecated_gwq0h_a11gk_217:not(#\9) {
265
+ .awsui_wrapper-container_gwq0h_1brli_201.awsui_header-deprecated_gwq0h_1brli_217:not(#\9) {
266
266
  padding-left: var(--space-container-horizontal-jxdgil, 20px);
267
267
  }
268
- .awsui_wrapper-container_gwq0h_a11gk_201:not(#\9):not(.awsui_header-deprecated_gwq0h_a11gk_217) {
268
+ .awsui_wrapper-container_gwq0h_1brli_201:not(#\9):not(.awsui_header-deprecated_gwq0h_1brli_217) {
269
269
  padding-left: calc(var(--space-container-horizontal-jxdgil, 20px) + calc(var(--size-icon-medium-x0iee8, 20px) + (var(--font-body-m-line-height-rfgrp9, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2 + var(--space-xs-edba2s, 8px)));
270
270
  }
271
- body[data-awsui-focus-visible=true] .awsui_wrapper-container_gwq0h_a11gk_201:not(#\9):focus {
271
+ body[data-awsui-focus-visible=true] .awsui_wrapper-container_gwq0h_1brli_201:not(#\9):focus {
272
272
  padding: calc(var(--space-scaled-s-913kwi, 12px) - var(--border-divider-section-width-orq175, 2px)) calc(var(--space-l-f4l5gr, 20px) - var(--border-divider-section-width-orq175, 2px));
273
273
  }
274
- .awsui_wrapper-default_gwq0h_a11gk_195.awsui_wrapper-expanded_gwq0h_a11gk_248:not(#\9) {
274
+ .awsui_wrapper-default_gwq0h_1brli_195.awsui_wrapper-expanded_gwq0h_1brli_248:not(#\9) {
275
275
  border-bottom-color: var(--color-border-divider-default-9o8zql, #e9ebed);
276
276
  }
277
277
 
278
- .awsui_header_gwq0h_a11gk_217:not(#\9) {
278
+ .awsui_header_gwq0h_1brli_217:not(#\9) {
279
279
  /* used in test-utils */
280
280
  }
281
- .awsui_header-wrapper_gwq0h_a11gk_255:not(#\9), .awsui_header-deprecated_gwq0h_a11gk_217:not(#\9) {
281
+ .awsui_header-wrapper_gwq0h_1brli_255:not(#\9), .awsui_header-deprecated_gwq0h_1brli_217:not(#\9) {
282
282
  display: flex;
283
283
  font-weight: var(--font-heading-s-weight-5y5giq, 800);
284
284
  }
285
- .awsui_header-wrapper_gwq0h_a11gk_255:not(#\9) {
285
+ .awsui_header-wrapper_gwq0h_1brli_255:not(#\9) {
286
286
  font-size: inherit;
287
287
  letter-spacing: inherit;
288
288
  margin: 0;
289
289
  padding: 0;
290
290
  }
291
- body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_a11gk_265:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_a11gk_265:not(#\9):focus {
291
+ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1brli_265:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1brli_265:not(#\9):focus {
292
292
  position: relative;
293
293
  }
294
- body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_a11gk_265:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_a11gk_265:not(#\9):focus {
294
+ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1brli_265:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1brli_265:not(#\9):focus {
295
295
  outline: 2px dotted transparent;
296
296
  outline-offset: calc(0px - 1px);
297
297
  }
298
- body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_a11gk_265:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_a11gk_265:not(#\9):focus::before {
298
+ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1brli_265:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1brli_265:not(#\9):focus::before {
299
299
  content: " ";
300
300
  display: block;
301
301
  position: absolute;
@@ -306,21 +306,21 @@ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_a11gk_265:not(#\9
306
306
  border-radius: var(--border-radius-control-default-focus-ring-muizvi, 4px);
307
307
  box-shadow: 0 0 0 2px var(--color-border-item-focused-4t19h5, #0972d3);
308
308
  }
309
- .awsui_header-button_gwq0h_a11gk_265:not(#\9) {
309
+ .awsui_header-button_gwq0h_1brli_265:not(#\9) {
310
310
  box-sizing: border-box;
311
311
  display: flex;
312
312
  margin-left: calc(-1 * calc(var(--size-icon-normal-jq6jat, 16px) + (var(--font-body-m-line-height-rfgrp9, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2 + var(--space-xxs-ja5cp8, 4px) + var(--border-divider-list-width-um3zli, 1px)));
313
313
  }
314
- .awsui_header-container-button_gwq0h_a11gk_265:not(#\9) {
314
+ .awsui_header-container-button_gwq0h_1brli_265:not(#\9) {
315
315
  margin-left: calc(-1 * calc(var(--size-icon-medium-x0iee8, 20px) + (var(--font-body-m-line-height-rfgrp9, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2 + var(--space-xs-edba2s, 8px)));
316
316
  }
317
- .awsui_header-container_gwq0h_a11gk_265:not(#\9) {
317
+ .awsui_header-container_gwq0h_1brli_265:not(#\9) {
318
318
  width: 100%;
319
319
  }
320
- .awsui_header-container_gwq0h_a11gk_265 > .awsui_icon-container_gwq0h_a11gk_179:not(#\9) {
320
+ .awsui_header-container_gwq0h_1brli_265 > .awsui_icon-container_gwq0h_1brli_179:not(#\9) {
321
321
  margin-top: var(--space-expandable-section-icon-offset-top-qfofw6, 4px);
322
322
  }
323
- .awsui_header-navigation_gwq0h_a11gk_297 > .awsui_icon-container_gwq0h_a11gk_179:not(#\9) {
323
+ .awsui_header-navigation_gwq0h_1brli_297 > .awsui_icon-container_gwq0h_1brli_179:not(#\9) {
324
324
  display: inline-flex;
325
325
  cursor: pointer;
326
326
  color: var(--color-text-expandable-section-navigation-icon-default-lzmj1u, #414d5c);
@@ -331,17 +331,17 @@ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_a11gk_265:not(#\9
331
331
  text-decoration: none;
332
332
  flex-direction: column;
333
333
  }
334
- .awsui_header-navigation_gwq0h_a11gk_297 > .awsui_icon-container_gwq0h_a11gk_179:not(#\9):hover {
334
+ .awsui_header-navigation_gwq0h_1brli_297 > .awsui_icon-container_gwq0h_1brli_179:not(#\9):hover {
335
335
  color: var(--color-text-expandable-section-hover-pux1oy, #0972d3);
336
336
  }
337
- body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_a11gk_297 > .awsui_icon-container_gwq0h_a11gk_179:not(#\9):focus {
337
+ body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1brli_297 > .awsui_icon-container_gwq0h_1brli_179:not(#\9):focus {
338
338
  position: relative;
339
339
  }
340
- body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_a11gk_297 > .awsui_icon-container_gwq0h_a11gk_179:not(#\9):focus {
340
+ body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1brli_297 > .awsui_icon-container_gwq0h_1brli_179:not(#\9):focus {
341
341
  outline: 2px dotted transparent;
342
342
  outline-offset: calc(2px - 1px);
343
343
  }
344
- body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_a11gk_297 > .awsui_icon-container_gwq0h_a11gk_179:not(#\9):focus::before {
344
+ body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1brli_297 > .awsui_icon-container_gwq0h_1brli_179:not(#\9):focus::before {
345
345
  content: " ";
346
346
  display: block;
347
347
  position: absolute;
@@ -352,34 +352,37 @@ body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_a11gk_297 > .
352
352
  border-radius: var(--border-radius-control-default-focus-ring-muizvi, 4px);
353
353
  box-shadow: 0 0 0 2px var(--color-border-item-focused-4t19h5, #0972d3);
354
354
  }
355
+ .awsui_header-text_gwq0h_1brli_329:not(#\9) {
356
+ /* used in test-utils */
357
+ }
355
358
 
356
- .awsui_content_gwq0h_a11gk_97:not(#\9) {
359
+ .awsui_content_gwq0h_1brli_97:not(#\9) {
357
360
  display: none;
358
361
  }
359
- .awsui_content-default_gwq0h_a11gk_333:not(#\9) {
362
+ .awsui_content-default_gwq0h_1brli_336:not(#\9) {
360
363
  padding: var(--space-scaled-xs-wbfgrv, 8px) 0;
361
364
  }
362
- .awsui_content-footer_gwq0h_a11gk_336:not(#\9) {
365
+ .awsui_content-footer_gwq0h_1brli_339:not(#\9) {
363
366
  padding: var(--space-xs-edba2s, 8px) 0;
364
367
  }
365
- .awsui_content-expanded_gwq0h_a11gk_339:not(#\9) {
368
+ .awsui_content-expanded_gwq0h_1brli_342:not(#\9) {
366
369
  display: block;
367
370
  }
368
371
 
369
- .awsui_focusable_gwq0h_a11gk_343:not(#\9):focus {
372
+ .awsui_focusable_gwq0h_1brli_346:not(#\9):focus {
370
373
  outline: none;
371
374
  text-decoration: none;
372
375
  }
373
- body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_a11gk_343:not(#\9):focus {
376
+ body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_1brli_346:not(#\9):focus {
374
377
  outline: 2px dotted transparent;
375
378
  border: var(--border-field-width-riro62, 2px) solid var(--color-border-item-focused-4t19h5, #0972d3);
376
379
  border-radius: var(--border-radius-control-default-focus-ring-muizvi, 4px);
377
380
  box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-cwek11, 0px) var(--color-border-item-focused-4t19h5, #0972d3);
378
381
  }
379
382
 
380
- .awsui_click-target_gwq0h_a11gk_354:not(#\9) {
383
+ .awsui_click-target_gwq0h_1brli_357:not(#\9) {
381
384
  cursor: pointer;
382
385
  }
383
- .awsui_click-target_gwq0h_a11gk_354:not(#\9):not(.awsui_wrapper-container_gwq0h_a11gk_201):not(.awsui_header-container-button_gwq0h_a11gk_265):hover {
386
+ .awsui_click-target_gwq0h_1brli_357:not(#\9):not(.awsui_wrapper-container_gwq0h_1brli_201):not(.awsui_header-container-button_gwq0h_1brli_265):hover {
384
387
  color: var(--color-text-expandable-section-hover-pux1oy, #0972d3);
385
388
  }
package/expandable-section/styles.selectors.js CHANGED
@@ -2,33 +2,34 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "content-enter": "awsui_content-enter_gwq0h_a11gk_97",
6
- "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_a11gk_1",
7
- "trigger-expanded": "awsui_trigger-expanded_gwq0h_a11gk_119",
8
- "icon": "awsui_icon_gwq0h_a11gk_133",
9
- "root": "awsui_root_gwq0h_a11gk_151",
10
- "expand-button": "awsui_expand-button_gwq0h_a11gk_168",
11
- "expanded": "awsui_expanded_gwq0h_a11gk_175",
12
- "icon-container": "awsui_icon-container_gwq0h_a11gk_179",
13
- "icon-container-container": "awsui_icon-container-container_gwq0h_a11gk_184",
14
- "wrapper": "awsui_wrapper_gwq0h_a11gk_188",
15
- "wrapper-default": "awsui_wrapper-default_gwq0h_a11gk_195",
16
- "wrapper-footer": "awsui_wrapper-footer_gwq0h_a11gk_195",
17
- "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_a11gk_198",
18
- "wrapper-container": "awsui_wrapper-container_gwq0h_a11gk_201",
19
- "header-deprecated": "awsui_header-deprecated_gwq0h_a11gk_217",
20
- "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_a11gk_248",
21
- "header": "awsui_header_gwq0h_a11gk_217",
22
- "header-wrapper": "awsui_header-wrapper_gwq0h_a11gk_255",
23
- "header-button": "awsui_header-button_gwq0h_a11gk_265",
24
- "header-container-button": "awsui_header-container-button_gwq0h_a11gk_265",
25
- "header-container": "awsui_header-container_gwq0h_a11gk_265",
26
- "header-navigation": "awsui_header-navigation_gwq0h_a11gk_297",
27
- "content": "awsui_content_gwq0h_a11gk_97",
28
- "content-default": "awsui_content-default_gwq0h_a11gk_333",
29
- "content-footer": "awsui_content-footer_gwq0h_a11gk_336",
30
- "content-expanded": "awsui_content-expanded_gwq0h_a11gk_339",
31
- "focusable": "awsui_focusable_gwq0h_a11gk_343",
32
- "click-target": "awsui_click-target_gwq0h_a11gk_354"
5
+ "content-enter": "awsui_content-enter_gwq0h_1brli_97",
6
+ "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1brli_1",
7
+ "trigger-expanded": "awsui_trigger-expanded_gwq0h_1brli_119",
8
+ "icon": "awsui_icon_gwq0h_1brli_133",
9
+ "root": "awsui_root_gwq0h_1brli_151",
10
+ "expand-button": "awsui_expand-button_gwq0h_1brli_168",
11
+ "expanded": "awsui_expanded_gwq0h_1brli_175",
12
+ "icon-container": "awsui_icon-container_gwq0h_1brli_179",
13
+ "icon-container-container": "awsui_icon-container-container_gwq0h_1brli_184",
14
+ "wrapper": "awsui_wrapper_gwq0h_1brli_188",
15
+ "wrapper-default": "awsui_wrapper-default_gwq0h_1brli_195",
16
+ "wrapper-footer": "awsui_wrapper-footer_gwq0h_1brli_195",
17
+ "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_1brli_198",
18
+ "wrapper-container": "awsui_wrapper-container_gwq0h_1brli_201",
19
+ "header-deprecated": "awsui_header-deprecated_gwq0h_1brli_217",
20
+ "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_1brli_248",
21
+ "header": "awsui_header_gwq0h_1brli_217",
22
+ "header-wrapper": "awsui_header-wrapper_gwq0h_1brli_255",
23
+ "header-button": "awsui_header-button_gwq0h_1brli_265",
24
+ "header-container-button": "awsui_header-container-button_gwq0h_1brli_265",
25
+ "header-container": "awsui_header-container_gwq0h_1brli_265",
26
+ "header-navigation": "awsui_header-navigation_gwq0h_1brli_297",
27
+ "header-text": "awsui_header-text_gwq0h_1brli_329",
28
+ "content": "awsui_content_gwq0h_1brli_97",
29
+ "content-default": "awsui_content-default_gwq0h_1brli_336",
30
+ "content-footer": "awsui_content-footer_gwq0h_1brli_339",
31
+ "content-expanded": "awsui_content-expanded_gwq0h_1brli_342",
32
+ "focusable": "awsui_focusable_gwq0h_1brli_346",
33
+ "click-target": "awsui_click-target_gwq0h_1brli_357"
33
34
  };
34
35
 
package/form/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["form/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AASzC,OAAO,EAAE,SAAS,EAAE,CAAC;AA2BrB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,OAAqB,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,eAU1E"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["form/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AASzC,OAAO,EAAE,SAAS,EAAE,CAAC;AA4BrB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,OAAqB,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,eAU1E"}
package/form/index.js CHANGED
@@ -11,10 +11,11 @@ import { ButtonContext } from '../internal/context/button-context';
11
11
  import { useFunnel, useFunnelStep } from '../internal/analytics/hooks/use-funnel';
12
12
  const FormWithAnalytics = (_a) => {
13
13
  var { variant = 'full-page', actions } = _a, props = __rest(_a, ["variant", "actions"]);
14
- const { funnelProps, funnelSubmit } = useFunnel();
14
+ const { funnelProps, funnelSubmit, funnelNextOrSubmitAttempt } = useFunnel();
15
15
  const { funnelStepProps } = useFunnelStep();
16
16
  const handleActionButtonClick = ({ variant }) => {
17
17
  if (variant === 'primary') {
18
+ funnelNextOrSubmitAttempt();
18
19
  funnelSubmit();
19
20
  }
20
21
  };
package/form/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["form/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,YAAY,MAAM,YAAY,CAAC;AACtC,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAEpE,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,mDAAmD,CAAC;AACzG,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAsB,MAAM,oCAAoC,CAAC;AACvF,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AAIlF,MAAM,iBAAiB,GAAG,CAAC,EAAuD,EAAE,EAAE;QAA3D,EAAE,OAAO,GAAG,WAAW,EAAE,OAAO,OAAuB,EAAlB,KAAK,cAA1C,sBAA4C,CAAF;IACnE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,CAAC;IAClD,MAAM,EAAE,eAAe,EAAE,GAAG,aAAa,EAAE,CAAC;IAE5C,MAAM,uBAAuB,GAAkC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;QAC7E,IAAI,OAAO,KAAK,SAAS,EAAE;YACzB,YAAY,EAAE,CAAC;SAChB;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,YAAY,kBACX,OAAO,EAAE,OAAO,EAChB,OAAO,EACL,OAAO,IAAI,CACT,oBAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,uBAAuB,EAAE,IAAG,OAAO,CAA0B,CACxG,IAEC,KAAK,EACL,WAAW,EACX,eAAe,EACnB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAA8C;QAA9C,EAAE,OAAO,GAAG,WAAW,OAAuB,EAAlB,KAAK,cAAjC,WAAmC,CAAF;IAC5D,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAEpD,OAAO,CACL,oBAAC,eAAe,IAAC,UAAU,EAAC,aAAa,EAAC,mBAAmB,EAAE,EAAE,EAAE,gBAAgB,EAAE,CAAC;QACpF,oBAAC,mBAAmB,IAAC,UAAU,EAAE,CAAC,EAAE,gBAAgB,EAAE,qBAAqB,EAAE;YAC3E,oBAAC,iBAAiB,kBAAC,OAAO,EAAE,OAAO,IAAM,KAAK,EAAM,kBAAkB,EAAI,CACtD,CACN,CACnB,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { FormProps } from './interfaces';\nimport InternalForm from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nimport { AnalyticsFunnel, AnalyticsFunnelStep } from '../internal/analytics/components/analytics-funnel';\nimport { getFunnelNameSelector } from '../internal/analytics/selectors';\nimport { ButtonContext, ButtonContextProps } from '../internal/context/button-context';\nimport { useFunnel, useFunnelStep } from '../internal/analytics/hooks/use-funnel';\n\nexport { FormProps };\n\nconst FormWithAnalytics = ({ variant = 'full-page', actions, ...props }: FormProps) => {\n const { funnelProps, funnelSubmit } = useFunnel();\n const { funnelStepProps } = useFunnelStep();\n\n const handleActionButtonClick: ButtonContextProps['onClick'] = ({ variant }) => {\n if (variant === 'primary') {\n funnelSubmit();\n }\n };\n\n return (\n <InternalForm\n variant={variant}\n actions={\n actions && (\n <ButtonContext.Provider value={{ onClick: handleActionButtonClick }}>{actions}</ButtonContext.Provider>\n )\n }\n {...props}\n {...funnelProps}\n {...funnelStepProps}\n />\n );\n};\n\nexport default function Form({ variant = 'full-page', ...props }: FormProps) {\n const baseComponentProps = useBaseComponent('Form');\n\n return (\n <AnalyticsFunnel funnelType=\"single-page\" optionalStepNumbers={[]} totalFunnelSteps={1}>\n <AnalyticsFunnelStep stepNumber={1} stepNameSelector={getFunnelNameSelector()}>\n <FormWithAnalytics variant={variant} {...props} {...baseComponentProps} />\n </AnalyticsFunnelStep>\n </AnalyticsFunnel>\n );\n}\n\napplyDisplayName(Form, 'Form');\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["form/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,YAAY,MAAM,YAAY,CAAC;AACtC,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAEpE,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,mDAAmD,CAAC;AACzG,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAsB,MAAM,oCAAoC,CAAC;AACvF,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AAIlF,MAAM,iBAAiB,GAAG,CAAC,EAAuD,EAAE,EAAE;QAA3D,EAAE,OAAO,GAAG,WAAW,EAAE,OAAO,OAAuB,EAAlB,KAAK,cAA1C,sBAA4C,CAAF;IACnE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,yBAAyB,EAAE,GAAG,SAAS,EAAE,CAAC;IAC7E,MAAM,EAAE,eAAe,EAAE,GAAG,aAAa,EAAE,CAAC;IAE5C,MAAM,uBAAuB,GAAkC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;QAC7E,IAAI,OAAO,KAAK,SAAS,EAAE;YACzB,yBAAyB,EAAE,CAAC;YAC5B,YAAY,EAAE,CAAC;SAChB;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,YAAY,kBACX,OAAO,EAAE,OAAO,EAChB,OAAO,EACL,OAAO,IAAI,CACT,oBAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,uBAAuB,EAAE,IAAG,OAAO,CAA0B,CACxG,IAEC,KAAK,EACL,WAAW,EACX,eAAe,EACnB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAA8C;QAA9C,EAAE,OAAO,GAAG,WAAW,OAAuB,EAAlB,KAAK,cAAjC,WAAmC,CAAF;IAC5D,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAEpD,OAAO,CACL,oBAAC,eAAe,IAAC,UAAU,EAAC,aAAa,EAAC,mBAAmB,EAAE,EAAE,EAAE,gBAAgB,EAAE,CAAC;QACpF,oBAAC,mBAAmB,IAAC,UAAU,EAAE,CAAC,EAAE,gBAAgB,EAAE,qBAAqB,EAAE;YAC3E,oBAAC,iBAAiB,kBAAC,OAAO,EAAE,OAAO,IAAM,KAAK,EAAM,kBAAkB,EAAI,CACtD,CACN,CACnB,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { FormProps } from './interfaces';\nimport InternalForm from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nimport { AnalyticsFunnel, AnalyticsFunnelStep } from '../internal/analytics/components/analytics-funnel';\nimport { getFunnelNameSelector } from '../internal/analytics/selectors';\nimport { ButtonContext, ButtonContextProps } from '../internal/context/button-context';\nimport { useFunnel, useFunnelStep } from '../internal/analytics/hooks/use-funnel';\n\nexport { FormProps };\n\nconst FormWithAnalytics = ({ variant = 'full-page', actions, ...props }: FormProps) => {\n const { funnelProps, funnelSubmit, funnelNextOrSubmitAttempt } = useFunnel();\n const { funnelStepProps } = useFunnelStep();\n\n const handleActionButtonClick: ButtonContextProps['onClick'] = ({ variant }) => {\n if (variant === 'primary') {\n funnelNextOrSubmitAttempt();\n funnelSubmit();\n }\n };\n\n return (\n <InternalForm\n variant={variant}\n actions={\n actions && (\n <ButtonContext.Provider value={{ onClick: handleActionButtonClick }}>{actions}</ButtonContext.Provider>\n )\n }\n {...props}\n {...funnelProps}\n {...funnelStepProps}\n />\n );\n};\n\nexport default function Form({ variant = 'full-page', ...props }: FormProps) {\n const baseComponentProps = useBaseComponent('Form');\n\n return (\n <AnalyticsFunnel funnelType=\"single-page\" optionalStepNumbers={[]} totalFunnelSteps={1}>\n <AnalyticsFunnelStep stepNumber={1} stepNameSelector={getFunnelNameSelector()}>\n <FormWithAnalytics variant={variant} {...props} {...baseComponentProps} />\n </AnalyticsFunnelStep>\n </AnalyticsFunnel>\n );\n}\n\napplyDisplayName(Form, 'Form');\n"]}
package/form/internal.js CHANGED
@@ -17,12 +17,12 @@ export default function InternalForm(_a) {
17
17
  const baseProps = getBaseProps(props);
18
18
  const i18n = useInternalI18n('form');
19
19
  const errorIconAriaLabel = i18n('errorIconAriaLabel', errorIconAriaLabelOverride);
20
- const { funnelInteractionId } = useFunnel();
20
+ const { funnelInteractionId, submissionAttempt } = useFunnel();
21
21
  useEffect(() => {
22
22
  if (funnelInteractionId && errorText) {
23
23
  FunnelMetrics.funnelError({ funnelInteractionId });
24
24
  }
25
- }, [funnelInteractionId, errorText]);
25
+ }, [funnelInteractionId, errorText, submissionAttempt]);
26
26
  return (React.createElement("div", Object.assign({}, baseProps, { ref: __internalRootRef, className: clsx(styles.root, baseProps.className) }),
27
27
  React.createElement(FormLayout, { header: header && React.createElement("div", { className: clsx(styles.header, variant === 'full-page' && styles['full-page']) }, header), variant: variant },
28
28
  children && React.createElement("div", { className: styles.content }, children),
package/form/internal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["form/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 } from 'react';\nimport clsx from 'clsx';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalAlert from '../alert/internal';\nimport InternalBox from '../box/internal';\nimport InternalContentLayout from '../content-layout/internal';\nimport styles from './styles.css.js';\nimport { FormLayoutProps, FormProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport LiveRegion from '../internal/components/live-region';\nimport { useInternalI18n } from '../internal/i18n/context';\n\nimport { useFunnel } from '../internal/analytics/hooks/use-funnel';\nimport { FunnelMetrics } from '../internal/analytics';\n\ntype InternalFormProps = FormProps & InternalBaseComponentProps;\n\nexport default function InternalForm({\n children,\n header,\n errorText,\n errorIconAriaLabel: errorIconAriaLabelOverride,\n actions,\n secondaryActions,\n variant,\n __internalRootRef,\n ...props\n}: InternalFormProps) {\n const baseProps = getBaseProps(props);\n const i18n = useInternalI18n('form');\n const errorIconAriaLabel = i18n('errorIconAriaLabel', errorIconAriaLabelOverride);\n\n const { funnelInteractionId } = useFunnel();\n\n useEffect(() => {\n if (funnelInteractionId && errorText) {\n FunnelMetrics.funnelError({ funnelInteractionId });\n }\n }, [funnelInteractionId, errorText]);\n\n return (\n <div {...baseProps} ref={__internalRootRef} className={clsx(styles.root, baseProps.className)}>\n <FormLayout\n header={\n header && <div className={clsx(styles.header, variant === 'full-page' && styles['full-page'])}>{header}</div>\n }\n variant={variant}\n >\n {children && <div className={styles.content}>{children}</div>}\n {errorText && (\n <InternalBox margin={{ top: 'l' }}>\n <InternalAlert type=\"error\" statusIconAriaLabel={errorIconAriaLabel}>\n <div className={styles.error}>{errorText}</div>\n </InternalAlert>\n </InternalBox>\n )}\n {(actions || secondaryActions) && (\n <div className={styles.footer}>\n <div className={styles['actions-section']}>\n {actions && <div className={styles.actions}>{actions}</div>}\n {secondaryActions && <div className={styles['secondary-actions']}>{secondaryActions}</div>}\n </div>\n </div>\n )}\n {errorText && (\n <LiveRegion assertive={true}>\n {errorIconAriaLabel}, {errorText}\n </LiveRegion>\n )}\n </FormLayout>\n </div>\n );\n}\n\nfunction FormLayout({ children, header, variant }: FormLayoutProps) {\n return variant === 'full-page' && header ? (\n <InternalContentLayout header={header}>{children}</InternalContentLayout>\n ) : (\n <>\n {header}\n {children}\n </>\n );\n}\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["form/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 } from 'react';\nimport clsx from 'clsx';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalAlert from '../alert/internal';\nimport InternalBox from '../box/internal';\nimport InternalContentLayout from '../content-layout/internal';\nimport styles from './styles.css.js';\nimport { FormLayoutProps, FormProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport LiveRegion from '../internal/components/live-region';\nimport { useInternalI18n } from '../internal/i18n/context';\n\nimport { useFunnel } from '../internal/analytics/hooks/use-funnel';\nimport { FunnelMetrics } from '../internal/analytics';\n\ntype InternalFormProps = FormProps & InternalBaseComponentProps;\n\nexport default function InternalForm({\n children,\n header,\n errorText,\n errorIconAriaLabel: errorIconAriaLabelOverride,\n actions,\n secondaryActions,\n variant,\n __internalRootRef,\n ...props\n}: InternalFormProps) {\n const baseProps = getBaseProps(props);\n const i18n = useInternalI18n('form');\n const errorIconAriaLabel = i18n('errorIconAriaLabel', errorIconAriaLabelOverride);\n\n const { funnelInteractionId, submissionAttempt } = useFunnel();\n\n useEffect(() => {\n if (funnelInteractionId && errorText) {\n FunnelMetrics.funnelError({ funnelInteractionId });\n }\n }, [funnelInteractionId, errorText, submissionAttempt]);\n\n return (\n <div {...baseProps} ref={__internalRootRef} className={clsx(styles.root, baseProps.className)}>\n <FormLayout\n header={\n header && <div className={clsx(styles.header, variant === 'full-page' && styles['full-page'])}>{header}</div>\n }\n variant={variant}\n >\n {children && <div className={styles.content}>{children}</div>}\n {errorText && (\n <InternalBox margin={{ top: 'l' }}>\n <InternalAlert type=\"error\" statusIconAriaLabel={errorIconAriaLabel}>\n <div className={styles.error}>{errorText}</div>\n </InternalAlert>\n </InternalBox>\n )}\n {(actions || secondaryActions) && (\n <div className={styles.footer}>\n <div className={styles['actions-section']}>\n {actions && <div className={styles.actions}>{actions}</div>}\n {secondaryActions && <div className={styles['secondary-actions']}>{secondaryActions}</div>}\n </div>\n </div>\n )}\n {errorText && (\n <LiveRegion assertive={true}>\n {errorIconAriaLabel}, {errorText}\n </LiveRegion>\n )}\n </FormLayout>\n </div>\n );\n}\n\nfunction FormLayout({ children, header, variant }: FormLayoutProps) {\n return variant === 'full-page' && header ? (\n <InternalContentLayout header={header}>{children}</InternalContentLayout>\n ) : (\n <>\n {header}\n {children}\n </>\n );\n}\n"]}
package/form-field/internal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["form-field/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAazC,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAetD,UAAU,mBAAmB;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,EAAE,mBAAmB,eAiBvF;AAED,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eAMA;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,OAAe,EACf,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAwB,EACxB,gBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,sBAAsB,eAmHxB"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["form-field/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAazC,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAetD,UAAU,mBAAmB;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,EAAE,mBAAmB,eAiBvF;AAED,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eAMA;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,OAAe,EACf,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAwB,EACxB,gBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,sBAAsB,eAoHxB"}
package/form-field/internal.js CHANGED
@@ -15,7 +15,7 @@ import { joinStrings } from '../internal/utils/strings';
15
15
  import { useInternalI18n } from '../internal/i18n/context';
16
16
  import { InfoLinkLabelContext } from '../internal/context/info-link-label-context';
17
17
  import { FunnelMetrics } from '../internal/analytics';
18
- import { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
18
+ import { useFunnel, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
19
19
  import { DATA_ATTR_FIELD_ERROR, DATA_ATTR_FIELD_LABEL, getFieldSlotSeletor, getNameFromSelector, getSubStepAllSelector, } from '../internal/analytics/selectors';
20
20
  export function FormFieldError({ id, children, errorIconAriaLabel }) {
21
21
  const i18n = useInternalI18n('form-field');
@@ -35,7 +35,8 @@ export default function InternalFormField(_a) {
35
35
  const instanceUniqueId = useUniqueId('formField');
36
36
  const generatedControlId = controlId || instanceUniqueId;
37
37
  const formFieldId = controlId || generatedControlId;
38
- const { funnelInteractionId, stepNumber, stepNameSelector, subStepSelector, subStepNameSelector } = useFunnelSubStep();
38
+ const { funnelInteractionId, submissionAttempt } = useFunnel();
39
+ const { stepNumber, stepNameSelector, subStepSelector, subStepNameSelector } = useFunnelSubStep();
39
40
  const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);
40
41
  const ariaDescribedBy = getAriaDescribedBy(slotIds);
41
42
  const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);
@@ -67,7 +68,7 @@ export default function InternalFormField(_a) {
67
68
  });
68
69
  }
69
70
  // eslint-disable-next-line react-hooks/exhaustive-deps
70
- }, [funnelInteractionId, errorText]);
71
+ }, [funnelInteractionId, errorText, submissionAttempt]);
71
72
  return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: __internalRootRef }, analyticsAttributes),
72
73
  React.createElement("div", { className: clsx(__hideLabel && styles['visually-hidden']) },
73
74
  label && (React.createElement("label", { className: styles.label, id: slotIds.label, htmlFor: generatedControlId }, label)),
package/form-field/internal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["form-field/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 } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { joinStrings } from '../internal/utils/strings';\nimport { useInternalI18n } from '../internal/i18n/context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FIELD_ERROR,\n DATA_ATTR_FIELD_LABEL,\n getFieldSlotSeletor,\n getNameFromSelector,\n getSubStepAllSelector,\n} from '../internal/analytics/selectors';\n\ninterface FormFieldErrorProps {\n id?: string;\n children?: React.ReactNode;\n errorIconAriaLabel?: string;\n}\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n const i18n = useInternalI18n('form-field');\n\n return (\n <div id={id} className={styles.error}>\n <div className={styles['error-icon-shake-wrapper']}>\n <div\n role=\"img\"\n aria-label={i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel)}\n className={styles['error-icon-scale-wrapper']}\n >\n <InternalIcon name=\"status-warning\" size=\"small\" />\n </div>\n </div>\n <span className={styles.error__message}>{children}</span>\n </div>\n );\n}\n\nexport function ConstraintText({\n id,\n hasError,\n children,\n}: {\n id?: string;\n hasError: boolean;\n children: React.ReactNode;\n}) {\n return (\n <div id={id} className={clsx(styles.constraint, hasError && styles['constraint-has-error'])}>\n {children}\n </div>\n );\n}\n\nexport default function InternalFormField({\n controlId,\n stretch = false,\n label,\n info,\n i18nStrings,\n children,\n secondaryControl,\n description,\n constraintText,\n errorText,\n __hideLabel,\n __internalRootRef = null,\n __disableGutters = false,\n ...rest\n}: InternalFormFieldProps) {\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n\n const instanceUniqueId = useUniqueId('formField');\n const generatedControlId = controlId || instanceUniqueId;\n const formFieldId = controlId || generatedControlId;\n\n const { funnelInteractionId, stepNumber, stepNameSelector, subStepSelector, subStepNameSelector } =\n useFunnelSubStep();\n\n const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);\n\n const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n const {\n ariaLabelledby: parentAriaLabelledby,\n ariaDescribedby: parentAriaDescribedby,\n invalid: parentInvalid,\n } = useFormFieldContext({});\n\n const contextValuesWithoutControlId = {\n ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n invalid: !!errorText || !!parentInvalid,\n };\n\n const analyticsAttributes = {\n [DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,\n [DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,\n };\n\n useEffect(() => {\n if (funnelInteractionId && errorText) {\n const stepName = getNameFromSelector(stepNameSelector);\n const subStepName = getNameFromSelector(subStepNameSelector);\n\n FunnelMetrics.funnelSubStepError({\n funnelInteractionId,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n stepNumber,\n stepName,\n stepNameSelector,\n fieldErrorSelector: getFieldSlotSeletor(slotIds.error),\n fieldLabelSelector: getFieldSlotSeletor(slotIds.label),\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, errorText]);\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={__internalRootRef}\n {...analyticsAttributes}\n >\n <div className={clsx(__hideLabel && styles['visually-hidden'])}>\n {label && (\n <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n {label}\n </label>\n )}\n <InfoLinkLabelContext.Provider value={slotIds.label}>\n {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n </InfoLinkLabelContext.Provider>\n </div>\n\n {description && (\n <div className={styles.description} id={slotIds.description}>\n {description}\n </div>\n )}\n\n <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n <FormFieldContext.Provider\n value={{\n controlId: generatedControlId,\n ...contextValuesWithoutControlId,\n }}\n >\n {children && <div className={styles.control}>{children}</div>}\n </FormFieldContext.Provider>\n\n {secondaryControl && (\n <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n <div className={styles['secondary-control']}>{secondaryControl}</div>\n </FormFieldContext.Provider>\n )}\n </InternalGrid>\n </div>\n\n {(constraintText || errorText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {constraintText && (\n <ConstraintText id={slotIds.constraint} hasError={!!errorText}>\n {constraintText}\n </ConstraintText>\n )}\n </div>\n )}\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["form-field/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 } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { joinStrings } from '../internal/utils/strings';\nimport { useInternalI18n } from '../internal/i18n/context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FIELD_ERROR,\n DATA_ATTR_FIELD_LABEL,\n getFieldSlotSeletor,\n getNameFromSelector,\n getSubStepAllSelector,\n} from '../internal/analytics/selectors';\n\ninterface FormFieldErrorProps {\n id?: string;\n children?: React.ReactNode;\n errorIconAriaLabel?: string;\n}\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n const i18n = useInternalI18n('form-field');\n\n return (\n <div id={id} className={styles.error}>\n <div className={styles['error-icon-shake-wrapper']}>\n <div\n role=\"img\"\n aria-label={i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel)}\n className={styles['error-icon-scale-wrapper']}\n >\n <InternalIcon name=\"status-warning\" size=\"small\" />\n </div>\n </div>\n <span className={styles.error__message}>{children}</span>\n </div>\n );\n}\n\nexport function ConstraintText({\n id,\n hasError,\n children,\n}: {\n id?: string;\n hasError: boolean;\n children: React.ReactNode;\n}) {\n return (\n <div id={id} className={clsx(styles.constraint, hasError && styles['constraint-has-error'])}>\n {children}\n </div>\n );\n}\n\nexport default function InternalFormField({\n controlId,\n stretch = false,\n label,\n info,\n i18nStrings,\n children,\n secondaryControl,\n description,\n constraintText,\n errorText,\n __hideLabel,\n __internalRootRef = null,\n __disableGutters = false,\n ...rest\n}: InternalFormFieldProps) {\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n\n const instanceUniqueId = useUniqueId('formField');\n const generatedControlId = controlId || instanceUniqueId;\n const formFieldId = controlId || generatedControlId;\n\n const { funnelInteractionId, submissionAttempt } = useFunnel();\n\n const { stepNumber, stepNameSelector, subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);\n\n const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n const {\n ariaLabelledby: parentAriaLabelledby,\n ariaDescribedby: parentAriaDescribedby,\n invalid: parentInvalid,\n } = useFormFieldContext({});\n\n const contextValuesWithoutControlId = {\n ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n invalid: !!errorText || !!parentInvalid,\n };\n\n const analyticsAttributes = {\n [DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,\n [DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,\n };\n\n useEffect(() => {\n if (funnelInteractionId && errorText) {\n const stepName = getNameFromSelector(stepNameSelector);\n const subStepName = getNameFromSelector(subStepNameSelector);\n\n FunnelMetrics.funnelSubStepError({\n funnelInteractionId,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n stepNumber,\n stepName,\n stepNameSelector,\n fieldErrorSelector: getFieldSlotSeletor(slotIds.error),\n fieldLabelSelector: getFieldSlotSeletor(slotIds.label),\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, errorText, submissionAttempt]);\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={__internalRootRef}\n {...analyticsAttributes}\n >\n <div className={clsx(__hideLabel && styles['visually-hidden'])}>\n {label && (\n <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n {label}\n </label>\n )}\n <InfoLinkLabelContext.Provider value={slotIds.label}>\n {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n </InfoLinkLabelContext.Provider>\n </div>\n\n {description && (\n <div className={styles.description} id={slotIds.description}>\n {description}\n </div>\n )}\n\n <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n <FormFieldContext.Provider\n value={{\n controlId: generatedControlId,\n ...contextValuesWithoutControlId,\n }}\n >\n {children && <div className={styles.control}>{children}</div>}\n </FormFieldContext.Provider>\n\n {secondaryControl && (\n <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n <div className={styles['secondary-control']}>{secondaryControl}</div>\n </FormFieldContext.Provider>\n )}\n </InternalGrid>\n </div>\n\n {(constraintText || errorText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {constraintText && (\n <ConstraintText id={slotIds.constraint} hasError={!!errorText}>\n {constraintText}\n </ConstraintText>\n )}\n </div>\n )}\n </div>\n );\n}\n"]}