@cloudscape-design/components 3.0.247 → 3.0.249

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 (160) hide show
  1. package/app-layout/visual-refresh/app-bar.js +1 -1
  2. package/app-layout/visual-refresh/app-bar.js.map +1 -1
  3. package/app-layout/visual-refresh/context.d.ts +0 -1
  4. package/app-layout/visual-refresh/context.d.ts.map +1 -1
  5. package/app-layout/visual-refresh/context.js +3 -3
  6. package/app-layout/visual-refresh/context.js.map +1 -1
  7. package/autosuggest/internal.d.ts.map +1 -1
  8. package/autosuggest/internal.js +2 -1
  9. package/autosuggest/internal.js.map +1 -1
  10. package/autosuggest/options-list.d.ts +2 -1
  11. package/autosuggest/options-list.d.ts.map +1 -1
  12. package/autosuggest/options-list.js +8 -2
  13. package/autosuggest/options-list.js.map +1 -1
  14. package/button/internal.d.ts +1 -1
  15. package/button/internal.d.ts.map +1 -1
  16. package/button/internal.js +3 -2
  17. package/button/internal.js.map +1 -1
  18. package/button/styles.css.js +20 -19
  19. package/button/styles.scoped.css +298 -136
  20. package/button/styles.selectors.js +20 -19
  21. package/file-upload/default-formatters.d.ts +3 -0
  22. package/file-upload/default-formatters.d.ts.map +1 -0
  23. package/file-upload/default-formatters.js +23 -0
  24. package/file-upload/default-formatters.js.map +1 -0
  25. package/file-upload/dropzone/index.d.ts +9 -0
  26. package/file-upload/dropzone/index.d.ts.map +1 -0
  27. package/file-upload/dropzone/index.js +69 -0
  28. package/file-upload/dropzone/index.js.map +1 -0
  29. package/file-upload/dropzone/styles.css.js +7 -0
  30. package/file-upload/dropzone/styles.scoped.css +108 -0
  31. package/file-upload/dropzone/styles.selectors.js +8 -0
  32. package/file-upload/file-input/index.d.ts +14 -0
  33. package/file-upload/file-input/index.d.ts.map +1 -0
  34. package/file-upload/file-input/index.js +55 -0
  35. package/file-upload/file-input/index.js.map +1 -0
  36. package/file-upload/file-input/styles.css.js +8 -0
  37. package/file-upload/file-input/styles.scoped.css +21 -0
  38. package/file-upload/file-input/styles.selectors.js +9 -0
  39. package/file-upload/file-option/index.d.ts +10 -0
  40. package/file-upload/file-option/index.d.ts.map +1 -0
  41. package/file-upload/file-option/index.js +22 -0
  42. package/file-upload/file-option/index.js.map +1 -0
  43. package/file-upload/file-option/styles.css.js +12 -0
  44. package/file-upload/file-option/styles.scoped.css +35 -0
  45. package/file-upload/file-option/styles.selectors.js +13 -0
  46. package/file-upload/file-option/thumbnail.d.ts +7 -0
  47. package/file-upload/file-option/thumbnail.d.ts.map +1 -0
  48. package/file-upload/file-option/thumbnail.js +20 -0
  49. package/file-upload/file-option/thumbnail.js.map +1 -0
  50. package/file-upload/index.d.ts +6 -0
  51. package/file-upload/index.d.ts.map +1 -0
  52. package/file-upload/index.js +17 -0
  53. package/file-upload/index.js.map +1 -0
  54. package/file-upload/interfaces.d.ts +99 -0
  55. package/file-upload/interfaces.d.ts.map +1 -0
  56. package/file-upload/interfaces.js +4 -0
  57. package/file-upload/interfaces.js.map +1 -0
  58. package/file-upload/internal.d.ts +7 -0
  59. package/file-upload/internal.d.ts.map +1 -0
  60. package/file-upload/internal.js +72 -0
  61. package/file-upload/internal.js.map +1 -0
  62. package/file-upload/styles.css.js +7 -0
  63. package/file-upload/styles.scoped.css +16 -0
  64. package/file-upload/styles.selectors.js +8 -0
  65. package/form-field/internal.d.ts +6 -1
  66. package/form-field/internal.d.ts.map +1 -1
  67. package/form-field/internal.js +6 -3
  68. package/form-field/internal.js.map +1 -1
  69. package/index.d.ts +1 -0
  70. package/index.d.ts.map +1 -1
  71. package/index.js +1 -0
  72. package/index.js.map +1 -1
  73. package/internal/base-component/styles.scoped.css +17 -0
  74. package/internal/components/dropdown-footer/index.d.ts +1 -0
  75. package/internal/components/dropdown-footer/index.d.ts.map +1 -1
  76. package/internal/components/dropdown-footer/index.js +2 -2
  77. package/internal/components/dropdown-footer/index.js.map +1 -1
  78. package/internal/components/live-region/index.d.ts +2 -1
  79. package/internal/components/live-region/index.d.ts.map +1 -1
  80. package/internal/components/live-region/index.js +2 -2
  81. package/internal/components/live-region/index.js.map +1 -1
  82. package/internal/components/options-list/index.d.ts +1 -0
  83. package/internal/components/options-list/index.d.ts.map +1 -1
  84. package/internal/components/options-list/index.js +2 -2
  85. package/internal/components/options-list/index.js.map +1 -1
  86. package/internal/context/app-layout-context.d.ts +0 -1
  87. package/internal/context/app-layout-context.d.ts.map +1 -1
  88. package/internal/context/app-layout-context.js.map +1 -1
  89. package/internal/context/dynamic-overlap-context.d.ts +3 -0
  90. package/internal/context/dynamic-overlap-context.d.ts.map +1 -0
  91. package/internal/context/dynamic-overlap-context.js +5 -0
  92. package/internal/context/dynamic-overlap-context.js.map +1 -0
  93. package/internal/environment.js +1 -1
  94. package/internal/generated/theming/index.cjs +95 -0
  95. package/internal/generated/theming/index.js +95 -0
  96. package/internal/hooks/use-dynamic-overlap/index.js +7 -7
  97. package/internal/hooks/use-dynamic-overlap/index.js.map +1 -1
  98. package/internal/manifest.json +1 -1
  99. package/multiselect/internal.d.ts.map +1 -1
  100. package/multiselect/internal.js +4 -3
  101. package/multiselect/internal.js.map +1 -1
  102. package/package.json +2 -1
  103. package/property-filter/index.d.ts.map +1 -1
  104. package/property-filter/index.js +1 -1
  105. package/property-filter/index.js.map +1 -1
  106. package/property-filter/interfaces.d.ts +2 -1
  107. package/property-filter/interfaces.d.ts.map +1 -1
  108. package/property-filter/interfaces.js.map +1 -1
  109. package/property-filter/property-filter-autosuggest.d.ts.map +1 -1
  110. package/property-filter/property-filter-autosuggest.js +4 -2
  111. package/property-filter/property-filter-autosuggest.js.map +1 -1
  112. package/select/internal.d.ts.map +1 -1
  113. package/select/internal.js +4 -3
  114. package/select/internal.js.map +1 -1
  115. package/split-panel/interfaces.d.ts +8 -8
  116. package/split-panel/interfaces.d.ts.map +1 -1
  117. package/split-panel/interfaces.js.map +1 -1
  118. package/split-panel/preferences-modal.d.ts +7 -7
  119. package/split-panel/preferences-modal.d.ts.map +1 -1
  120. package/split-panel/preferences-modal.js.map +1 -1
  121. package/table/body-cell/index.js +1 -1
  122. package/table/body-cell/index.js.map +1 -1
  123. package/test-utils/dom/button/index.js +1 -6
  124. package/test-utils/dom/button/index.js.map +1 -1
  125. package/test-utils/dom/file-upload/index.d.ts +29 -0
  126. package/test-utils/dom/file-upload/index.js +66 -0
  127. package/test-utils/dom/file-upload/index.js.map +1 -0
  128. package/test-utils/dom/flashbar/index.d.ts +5 -1
  129. package/test-utils/dom/flashbar/index.js +7 -0
  130. package/test-utils/dom/flashbar/index.js.map +1 -1
  131. package/test-utils/dom/index.d.ts +3 -0
  132. package/test-utils/dom/index.js +10 -2
  133. package/test-utils/dom/index.js.map +1 -1
  134. package/test-utils/selectors/file-upload/index.d.ts +29 -0
  135. package/test-utils/selectors/file-upload/index.js +66 -0
  136. package/test-utils/selectors/file-upload/index.js.map +1 -0
  137. package/test-utils/selectors/flashbar/index.d.ts +5 -1
  138. package/test-utils/selectors/flashbar/index.js +7 -0
  139. package/test-utils/selectors/flashbar/index.js.map +1 -1
  140. package/test-utils/selectors/index.d.ts +3 -0
  141. package/test-utils/selectors/index.js +10 -2
  142. package/test-utils/selectors/index.js.map +1 -1
  143. package/test-utils/tsconfig.tsbuildinfo +1 -1
  144. package/token-group/styles.css.js +7 -5
  145. package/token-group/styles.scoped.css +41 -23
  146. package/token-group/styles.selectors.js +7 -5
  147. package/token-group/token.d.ts +4 -1
  148. package/token-group/token.d.ts.map +1 -1
  149. package/token-group/token.js +13 -4
  150. package/token-group/token.js.map +1 -1
  151. package/wizard/interfaces.d.ts +4 -0
  152. package/wizard/interfaces.d.ts.map +1 -1
  153. package/wizard/interfaces.js.map +1 -1
  154. package/wizard/wizard-actions.d.ts +2 -1
  155. package/wizard/wizard-actions.d.ts.map +1 -1
  156. package/wizard/wizard-actions.js +2 -2
  157. package/wizard/wizard-actions.js.map +1 -1
  158. package/wizard/wizard-form.d.ts.map +1 -1
  159. package/wizard/wizard-form.js +1 -1
  160. package/wizard/wizard-form.js.map +1 -1
@@ -94,7 +94,7 @@ 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_root_dm8gx_on6jb_97:not(#\9) {
97
+ .awsui_root_dm8gx_o4sq7_97:not(#\9) {
98
98
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
99
99
  border-collapse: separate;
100
100
  border-spacing: 0;
@@ -132,37 +132,25 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
132
132
  -webkit-font-smoothing: auto;
133
133
  -moz-osx-font-smoothing: auto;
134
134
  }
135
- .awsui_root_dm8gx_on6jb_97.awsui_has-items_dm8gx_on6jb_109:not(#\9) {
135
+ .awsui_root_dm8gx_o4sq7_97.awsui_has-items_dm8gx_o4sq7_109:not(#\9) {
136
136
  padding-top: var(--space-xs-rsr2qu, 8px);
137
137
  }
138
138
 
139
- .awsui_token_dm8gx_on6jb_113:not(#\9) {
140
- height: 100%;
141
- border: var(--border-field-width-idlekx, 2px) solid var(--color-border-item-selected-ppkssz, #0972d3);
142
- padding: var(--space-scaled-xxs-95dhkm, 4px) var(--space-xxs-ynfts5, 4px) var(--space-scaled-xxs-95dhkm, 4px) var(--space-field-horizontal-89h2yr, 12px);
143
- display: flex;
144
- align-items: flex-start;
145
- background: var(--color-background-item-selected-ebt4bi, #f2f8fd);
146
- border-radius: var(--border-radius-token-wohc9e, 8px);
147
- color: var(--color-text-body-default-ajf1h5, #000716);
148
- box-sizing: border-box;
149
- }
150
-
151
- .awsui_dismiss-button_dm8gx_on6jb_125:not(#\9) {
139
+ .awsui_dismiss-button_dm8gx_o4sq7_113:not(#\9) {
152
140
  margin: -1px -1px 0 var(--space-xxs-ynfts5, 4px);
153
141
  border: 1px solid transparent;
154
142
  padding: 0 var(--space-xxs-ynfts5, 4px);
155
143
  color: var(--color-text-button-inline-icon-default-w65lqn, #0972d3);
156
144
  background-color: transparent;
157
145
  }
158
- body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_on6jb_125:not(#\9):focus {
146
+ body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_o4sq7_113:not(#\9):focus {
159
147
  position: relative;
160
148
  }
161
- body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_on6jb_125:not(#\9):focus {
149
+ body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_o4sq7_113:not(#\9):focus {
162
150
  outline: 2px dotted transparent;
163
151
  outline-offset: calc(0px - 1px);
164
152
  }
165
- body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_on6jb_125:not(#\9):focus::before {
153
+ body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_o4sq7_113:not(#\9):focus::before {
166
154
  content: " ";
167
155
  display: block;
168
156
  position: absolute;
@@ -173,25 +161,55 @@ body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_on6jb_125:not(#\
173
161
  border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
174
162
  box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
175
163
  }
176
- .awsui_dismiss-button_dm8gx_on6jb_125:not(#\9):focus {
164
+ .awsui_dismiss-button_dm8gx_o4sq7_113:not(#\9):focus {
177
165
  outline: none;
178
166
  text-decoration: none;
179
167
  }
180
- .awsui_dismiss-button_dm8gx_on6jb_125:not(#\9):hover {
168
+ .awsui_dismiss-button_dm8gx_o4sq7_113:not(#\9):hover {
181
169
  cursor: pointer;
182
170
  color: var(--color-text-button-inline-icon-hover-wd5icp, #033160);
183
171
  }
184
172
 
185
- .awsui_token-disabled_dm8gx_on6jb_159:not(#\9) {
173
+ .awsui_token_dm8gx_o4sq7_147:not(#\9) {
174
+ height: 100%;
175
+ display: flex;
176
+ flex-direction: column;
177
+ gap: var(--space-xxs-ynfts5, 4px);
178
+ }
179
+
180
+ .awsui_token-box_dm8gx_o4sq7_154:not(#\9) {
181
+ height: 100%;
182
+ border: var(--border-field-width-idlekx, 2px) solid var(--color-border-item-selected-ppkssz, #0972d3);
183
+ padding: var(--space-scaled-xxs-95dhkm, 4px) var(--space-xxs-ynfts5, 4px) var(--space-scaled-xxs-95dhkm, 4px) var(--space-field-horizontal-89h2yr, 12px);
184
+ display: flex;
185
+ align-items: flex-start;
186
+ background: var(--color-background-item-selected-ebt4bi, #f2f8fd);
187
+ border-radius: var(--border-radius-token-wohc9e, 8px);
188
+ color: var(--color-text-body-default-ajf1h5, #000716);
189
+ box-sizing: border-box;
190
+ }
191
+
192
+ .awsui_token-box-error_dm8gx_o4sq7_166:not(#\9) {
193
+ border-color: var(--color-border-status-error-mfrddc, #d91515);
194
+ border-left-width: var(--border-invalid-width-5jpdqn, 8px);
195
+ }
196
+ .awsui_token-box-error_dm8gx_o4sq7_166 > .awsui_dismiss-button_dm8gx_o4sq7_113:not(#\9) {
197
+ color: var(--color-text-interactive-default-eg5fsa, #414d5c);
198
+ }
199
+ .awsui_token-box-error_dm8gx_o4sq7_166 > .awsui_dismiss-button_dm8gx_o4sq7_113:not(#\9):hover {
200
+ color: var(--color-text-interactive-hover-v3lasm, #000716);
201
+ }
202
+
203
+ .awsui_token-box-disabled_dm8gx_o4sq7_177.awsui_token-box-disabled_dm8gx_o4sq7_177:not(#\9) {
186
204
  border-color: var(--color-border-control-disabled-vx8bco, #d1d5db);
187
205
  background-color: var(--color-background-container-content-i8i4a0, #ffffff);
188
206
  color: var(--color-text-disabled-a2nkh4, #9ba7b6);
189
207
  pointer-events: none;
190
208
  }
191
- .awsui_token-disabled_dm8gx_on6jb_159 > .awsui_dismiss-button_dm8gx_on6jb_125:not(#\9) {
209
+ .awsui_token-box-disabled_dm8gx_o4sq7_177.awsui_token-box-disabled_dm8gx_o4sq7_177 > .awsui_dismiss-button_dm8gx_o4sq7_113:not(#\9) {
192
210
  color: var(--color-text-button-inline-icon-disabled-gfhvz7, #9ba7b6);
193
211
  }
194
- .awsui_token-disabled_dm8gx_on6jb_159 > .awsui_dismiss-button_dm8gx_on6jb_125:not(#\9):hover {
212
+ .awsui_token-box-disabled_dm8gx_o4sq7_177.awsui_token-box-disabled_dm8gx_o4sq7_177 > .awsui_dismiss-button_dm8gx_o4sq7_113:not(#\9):hover {
195
213
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
196
214
  cursor: auto;
197
215
  color: var(--color-text-button-inline-icon-disabled-gfhvz7, #9ba7b6);
@@ -2,10 +2,12 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "root": "awsui_root_dm8gx_on6jb_97",
6
- "has-items": "awsui_has-items_dm8gx_on6jb_109",
7
- "token": "awsui_token_dm8gx_on6jb_113",
8
- "dismiss-button": "awsui_dismiss-button_dm8gx_on6jb_125",
9
- "token-disabled": "awsui_token-disabled_dm8gx_on6jb_159"
5
+ "root": "awsui_root_dm8gx_o4sq7_97",
6
+ "has-items": "awsui_has-items_dm8gx_o4sq7_109",
7
+ "dismiss-button": "awsui_dismiss-button_dm8gx_o4sq7_113",
8
+ "token": "awsui_token_dm8gx_o4sq7_147",
9
+ "token-box": "awsui_token-box_dm8gx_o4sq7_154",
10
+ "token-box-error": "awsui_token-box-error_dm8gx_o4sq7_166",
11
+ "token-box-disabled": "awsui_token-box-disabled_dm8gx_o4sq7_177"
10
12
  };
11
13
 
@@ -5,7 +5,10 @@ interface TokenProps {
5
5
  dismissLabel?: string;
6
6
  onDismiss?: () => void;
7
7
  disabled?: boolean;
8
+ errorText?: React.ReactNode;
9
+ errorIconAriaLabel?: string;
10
+ className?: string;
8
11
  }
9
- export declare function Token({ ariaLabel, disabled, dismissLabel, onDismiss, children }: TokenProps): JSX.Element;
12
+ export declare function Token({ ariaLabel, disabled, dismissLabel, onDismiss, children, errorText, errorIconAriaLabel, ...restProps }: TokenProps): JSX.Element;
10
13
  export {};
11
14
  //# sourceMappingURL=token.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"token.d.ts","sourceRoot":"lib/default/","sources":["token-group/token.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,UAAU;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,UAAU,eAY3F"}
1
+ {"version":3,"file":"token.d.ts","sourceRoot":"lib/default/","sources":["token-group/token.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,UAAU,UAAU;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,GAAG,SAAS,EACb,EAAE,UAAU,eA6BZ"}
@@ -1,12 +1,21 @@
1
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
2
  // SPDX-License-Identifier: Apache-2.0
3
+ import { __rest } from "tslib";
3
4
  import React from 'react';
4
5
  import clsx from 'clsx';
5
6
  import DismissButton from './dismiss-button';
6
7
  import styles from './styles.css.js';
7
- export function Token({ ariaLabel, disabled, dismissLabel, onDismiss, children }) {
8
- return (React.createElement("div", { className: clsx(styles.token, disabled && styles['token-disabled']), role: "group", "aria-label": ariaLabel, "aria-disabled": disabled },
9
- children,
10
- onDismiss && React.createElement(DismissButton, { disabled: disabled, dismissLabel: dismissLabel, onDismiss: onDismiss })));
8
+ import { FormFieldError } from '../form-field/internal';
9
+ import { useUniqueId } from '../internal/hooks/use-unique-id';
10
+ import { getBaseProps } from '../internal/base-component';
11
+ export function Token(_a) {
12
+ var { ariaLabel, disabled, dismissLabel, onDismiss, children, errorText, errorIconAriaLabel } = _a, restProps = __rest(_a, ["ariaLabel", "disabled", "dismissLabel", "onDismiss", "children", "errorText", "errorIconAriaLabel"]);
13
+ const errorId = useUniqueId('error');
14
+ const baseProps = getBaseProps(restProps);
15
+ return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(styles.token, baseProps.className), role: "group", "aria-label": ariaLabel, "aria-describedby": errorText ? errorId : undefined, "aria-disabled": disabled }),
16
+ React.createElement("div", { className: clsx(styles['token-box'], disabled && styles['token-box-disabled'], errorText && styles['token-box-error']) },
17
+ children,
18
+ onDismiss && React.createElement(DismissButton, { disabled: disabled, dismissLabel: dismissLabel, onDismiss: onDismiss })),
19
+ errorText && (React.createElement(FormFieldError, { id: errorId, errorIconAriaLabel: errorIconAriaLabel }, errorText))));
11
20
  }
12
21
  //# sourceMappingURL=token.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"token.js","sourceRoot":"lib/default/","sources":["token-group/token.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAUrC,MAAM,UAAU,KAAK,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAc;IAC1F,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,IAAI,MAAM,CAAC,gBAAgB,CAAC,CAAC,EACnE,IAAI,EAAC,OAAO,gBACA,SAAS,mBACN,QAAQ;QAEtB,QAAQ;QACR,SAAS,IAAI,oBAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,GAAI,CACjG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport DismissButton from './dismiss-button';\nimport styles from './styles.css.js';\n\ninterface TokenProps {\n children: React.ReactNode;\n ariaLabel?: string;\n dismissLabel?: string;\n onDismiss?: () => void;\n disabled?: boolean;\n}\n\nexport function Token({ ariaLabel, disabled, dismissLabel, onDismiss, children }: TokenProps) {\n return (\n <div\n className={clsx(styles.token, disabled && styles['token-disabled'])}\n role=\"group\"\n aria-label={ariaLabel}\n aria-disabled={disabled}\n >\n {children}\n {onDismiss && <DismissButton disabled={disabled} dismissLabel={dismissLabel} onDismiss={onDismiss} />}\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"token.js","sourceRoot":"lib/default/","sources":["token-group/token.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAa1D,MAAM,UAAU,KAAK,CAAC,EAST;QATS,EACpB,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,SAAS,EACT,kBAAkB,OAEP,EADR,SAAS,cARQ,qGASrB,CADa;IAEZ,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,EAClD,IAAI,EAAC,OAAO,gBACA,SAAS,sBACH,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,mBAClC,QAAQ;QAEvB,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,WAAW,CAAC,EACnB,QAAQ,IAAI,MAAM,CAAC,oBAAoB,CAAC,EACxC,SAAS,IAAI,MAAM,CAAC,iBAAiB,CAAC,CACvC;YAEA,QAAQ;YACR,SAAS,IAAI,oBAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,GAAI,CACjG;QACL,SAAS,IAAI,CACZ,oBAAC,cAAc,IAAC,EAAE,EAAE,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,IAChE,SAAS,CACK,CAClB,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport DismissButton from './dismiss-button';\nimport styles from './styles.css.js';\nimport { FormFieldError } from '../form-field/internal';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { getBaseProps } from '../internal/base-component';\n\ninterface TokenProps {\n children: React.ReactNode;\n ariaLabel?: string;\n dismissLabel?: string;\n onDismiss?: () => void;\n disabled?: boolean;\n errorText?: React.ReactNode;\n errorIconAriaLabel?: string;\n className?: string;\n}\n\nexport function Token({\n ariaLabel,\n disabled,\n dismissLabel,\n onDismiss,\n children,\n errorText,\n errorIconAriaLabel,\n ...restProps\n}: TokenProps) {\n const errorId = useUniqueId('error');\n const baseProps = getBaseProps(restProps);\n return (\n <div\n {...baseProps}\n className={clsx(styles.token, baseProps.className)}\n role=\"group\"\n aria-label={ariaLabel}\n aria-describedby={errorText ? errorId : undefined}\n aria-disabled={disabled}\n >\n <div\n className={clsx(\n styles['token-box'],\n disabled && styles['token-box-disabled'],\n errorText && styles['token-box-error']\n )}\n >\n {children}\n {onDismiss && <DismissButton disabled={disabled} dismissLabel={dismissLabel} onDismiss={onDismiss} />}\n </div>\n {errorText && (\n <FormFieldError id={errorId} errorIconAriaLabel={errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n </div>\n );\n}\n"]}
@@ -45,6 +45,8 @@ export interface WizardProps extends BaseComponentProps {
45
45
  * - `nextButton` (string) - The text of the button that enables the user to move to the next step.
46
46
  * - `submitButton` (string) - The text of the button that enables the user to submit the form.
47
47
  * - `optional` (string) - The text displayed next to the step title and form header title when a step is declared optional.
48
+ * - `nextButtonLoadingAnnouncement` (string) - The text that a screen reader announces when the *next* button is in a loading state.
49
+ * - `submitButtonLoadingAnnouncement` (string) - The text that a screen reader announces when the *submit* button is in a loading state.
48
50
  */
49
51
  i18nStrings: WizardProps.I18nStrings;
50
52
  /**
@@ -109,6 +111,8 @@ export declare namespace WizardProps {
109
111
  nextButton?: string;
110
112
  submitButton: string;
111
113
  optional?: string;
114
+ nextButtonLoadingAnnouncement?: string;
115
+ submitButtonLoadingAnnouncement?: string;
112
116
  }
113
117
  interface NavigateDetail {
114
118
  requestedStepIndex: number;
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["wizard/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD;;;;;;;;;;;;OAYG;IACH,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAEvC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;OAiBG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC;IAErC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;CACpE;AAED,yBAAiB,WAAW,CAAC;IAC3B,UAAiB,IAAI;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC9B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;KACtB;IAED,UAAiB,WAAW;QAC1B,eAAe,CAAC,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;QAC7C,mBAAmB,CAAC,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;QACrE,iBAAiB,CAAC,CAAC,UAAU,EAAE,WAAW,CAAC,IAAI,EAAE,gBAAgB,EAAE,MAAM,GAAG,MAAM,CAAC;QACnF,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,YAAY,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;IAED,UAAiB,cAAc;QAC7B,kBAAkB,EAAE,MAAM,CAAC;QAC3B,MAAM,EAAE,WAAW,CAAC,gBAAgB,CAAC;KACtC;IAED,KAAY,gBAAgB,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;CACtE"}
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["wizard/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD;;;;;;;;;;;;OAYG;IACH,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAEvC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC;IAErC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;CACpE;AAED,yBAAiB,WAAW,CAAC;IAC3B,UAAiB,IAAI;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC9B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;KACtB;IAED,UAAiB,WAAW;QAC1B,eAAe,CAAC,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;QAC7C,mBAAmB,CAAC,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;QACrE,iBAAiB,CAAC,CAAC,UAAU,EAAE,WAAW,CAAC,IAAI,EAAE,gBAAgB,EAAE,MAAM,GAAG,MAAM,CAAC;QACnF,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,YAAY,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,6BAA6B,CAAC,EAAE,MAAM,CAAC;QACvC,+BAA+B,CAAC,EAAE,MAAM,CAAC;KAC1C;IAED,UAAiB,cAAc;QAC7B,kBAAkB,EAAE,MAAM,CAAC;QAC3B,MAAM,EAAE,WAAW,CAAC,gBAAgB,CAAC;KACtC;IAED,KAAY,gBAAgB,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;CACtE"}
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["wizard/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface WizardProps extends BaseComponentProps {\n /**\n * Array of step objects. Each object represents a step in the wizard with the following properties:\n *\n * - `title` (string) - Text that's displayed as the title in the navigation pane and form header.\n * - `info` (ReactNode) - (Optional) Area for a page level info link that's displayed in the form header.\n * The page level info link should trigger the default help panel content for the step. Use the [link component](/components/link/) to display the link.\n * - `description` (ReactNode) - (Optional) Area below the form header for a page level description text to further explain the purpose, goal, or main actions of the step.\n * - `content` (ReactNode) - Main content area to display form sections, form fields, and controls.\n * - `errorText` (ReactNode) - (Optional) Error text that's displayed in a page level error alert.\n * Use this for rendering actionable server-side validation failure messages.\n * - `isOptional` (boolean) - Specifies whether the step is optional or required. If set to `true`, the text from `i18nStrings.optional`\n * is rendered next to the `title` in the navigation step label and the form header title.\n */\n steps: ReadonlyArray<WizardProps.Step>;\n\n /**\n * Index of the step that's currently displayed. The first step has an index of zero (0).\n *\n * If you don't set this property, the component starts on the first step and switches step automatically\n * when a user navigates using the buttons or an enabled step link in the navigation pane (that is, uncontrolled behavior).\n *\n * If you provide a value for this property, you must also set an `onNavigate` listener to update the property when\n * a user navigates (that is, controlled behavior).\n *\n * If you set it to a value that exceeds the maximum value (that is, the number of steps minus 1), its value is ignored and the component uses the maximum value.\n */\n activeStepIndex?: number;\n\n /**\n * An object containing all the necessary localized strings required by the component.\n *\n * - `stepNumberLabel` ((stepNumber: number) => string) - A function that accepts a number (1-based indexing),\n * and returns a human-readable, localized string displaying the step number in the navigation pane. For example, \"Step 1\" or \"Step 2\".\n * - `collapsedStepsLabel` ((stepNumber: number, stepsCount: number) => string) - A function that accepts two number parameters (1-based indexing),\n * and returns a string responsible for the navigation summary on smaller screens. For example, \"Step 1 of 3\". The parameters are as follows:\n * - `stepNumber` (number) - The step number that the user is currently on.\n * - `stepsCount` (number) - The total number of steps in the wizard.\n * - `skipToButtonLabel`: ((targetStep: WizardProps.Step, targetStepNumber: number) => string) - An optional function that accepts the target step object\n * and the target step number (1-based indexing), and returns a string to be used as the *skip-to* button label. For example, \"Skip to Step 2\" or \"Skip to end\".\n * - `navigationAriaLabel` (string) - The aria label for the navigation pane.\n * - `cancelButton` (string) - The text of the button that enables the user to exit the flow.\n * - `previousButton` (string) - The text of the button that enables the user to return to the previous step.\n * - `nextButton` (string) - The text of the button that enables the user to move to the next step.\n * - `submitButton` (string) - The text of the button that enables the user to submit the form.\n * - `optional` (string) - The text displayed next to the step title and form header title when a step is declared optional.\n */\n i18nStrings: WizardProps.I18nStrings;\n\n /**\n * Renders the *next* or *submit* button in a loading state.\n *\n * Use this if you need to wait for a response from the server before the user can proceed to the next step, such as during server-side validation or retrieving the next step's information.\n */\n isLoadingNextStep?: boolean;\n\n /**\n * When set to `false`, the *skip-to* button is never shown.\n * When set to `true`, the *skip-to* button may appear to offer faster navigation for the user.\n *\n * The *skip-to* button only allows to skip optional steps. It is shown when there is one or more optional\n * steps ahead having no required steps in-between.\n *\n * Note: the *skip-to* button requires the function i18nStrings.skipToButtonLabel to be defined.\n *\n * Defaults to `false`.\n */\n allowSkipTo?: boolean;\n\n /**\n * Specifies left-aligned secondary actions for the wizard. Use a button dropdown if multiple actions are required.\n */\n secondaryActions?: React.ReactNode;\n\n /**\n * Called when a user clicks the *cancel* button.\n * If a user has entered data in the form, you should prompt the user with a modal before exiting the wizard flow.\n */\n onCancel?: NonCancelableEventHandler;\n\n /**\n * Called when a user clicks the *submit* button.\n */\n onSubmit?: NonCancelableEventHandler;\n\n /**\n * Called when a user clicks the *next* button, the *previous* button, or an enabled step link in the navigation pane.\n *\n * The event `detail` includes the following:\n * - `requestedStepIndex` - The index of the requested step.\n * - `reason` - The user action that triggered the navigation event. It can be `next` (when the user clicks the *next* button),\n * `previous` (when the user clicks the *previous* button), `step` (an enabled step link in the navigation pane),\n * or `skip` (when navigated using navigation pane or the *skip-to* button to the previously unvisited step).\n */\n onNavigate?: NonCancelableEventHandler<WizardProps.NavigateDetail>;\n}\n\nexport namespace WizardProps {\n export interface Step {\n title: string;\n info?: React.ReactNode;\n description?: React.ReactNode;\n content: React.ReactNode;\n errorText?: React.ReactNode;\n isOptional?: boolean;\n }\n\n export interface I18nStrings {\n stepNumberLabel?(stepNumber: number): string;\n collapsedStepsLabel?(stepNumber: number, stepsCount: number): string;\n skipToButtonLabel?(targetStep: WizardProps.Step, targetStepNumber: number): string;\n navigationAriaLabel?: string;\n errorIconAriaLabel?: string;\n cancelButton?: string;\n previousButton?: string;\n nextButton?: string;\n submitButton: string;\n optional?: string;\n }\n\n export interface NavigateDetail {\n requestedStepIndex: number;\n reason: WizardProps.NavigationReason;\n }\n\n export type NavigationReason = 'next' | 'previous' | 'step' | 'skip';\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["wizard/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface WizardProps extends BaseComponentProps {\n /**\n * Array of step objects. Each object represents a step in the wizard with the following properties:\n *\n * - `title` (string) - Text that's displayed as the title in the navigation pane and form header.\n * - `info` (ReactNode) - (Optional) Area for a page level info link that's displayed in the form header.\n * The page level info link should trigger the default help panel content for the step. Use the [link component](/components/link/) to display the link.\n * - `description` (ReactNode) - (Optional) Area below the form header for a page level description text to further explain the purpose, goal, or main actions of the step.\n * - `content` (ReactNode) - Main content area to display form sections, form fields, and controls.\n * - `errorText` (ReactNode) - (Optional) Error text that's displayed in a page level error alert.\n * Use this for rendering actionable server-side validation failure messages.\n * - `isOptional` (boolean) - Specifies whether the step is optional or required. If set to `true`, the text from `i18nStrings.optional`\n * is rendered next to the `title` in the navigation step label and the form header title.\n */\n steps: ReadonlyArray<WizardProps.Step>;\n\n /**\n * Index of the step that's currently displayed. The first step has an index of zero (0).\n *\n * If you don't set this property, the component starts on the first step and switches step automatically\n * when a user navigates using the buttons or an enabled step link in the navigation pane (that is, uncontrolled behavior).\n *\n * If you provide a value for this property, you must also set an `onNavigate` listener to update the property when\n * a user navigates (that is, controlled behavior).\n *\n * If you set it to a value that exceeds the maximum value (that is, the number of steps minus 1), its value is ignored and the component uses the maximum value.\n */\n activeStepIndex?: number;\n\n /**\n * An object containing all the necessary localized strings required by the component.\n *\n * - `stepNumberLabel` ((stepNumber: number) => string) - A function that accepts a number (1-based indexing),\n * and returns a human-readable, localized string displaying the step number in the navigation pane. For example, \"Step 1\" or \"Step 2\".\n * - `collapsedStepsLabel` ((stepNumber: number, stepsCount: number) => string) - A function that accepts two number parameters (1-based indexing),\n * and returns a string responsible for the navigation summary on smaller screens. For example, \"Step 1 of 3\". The parameters are as follows:\n * - `stepNumber` (number) - The step number that the user is currently on.\n * - `stepsCount` (number) - The total number of steps in the wizard.\n * - `skipToButtonLabel`: ((targetStep: WizardProps.Step, targetStepNumber: number) => string) - An optional function that accepts the target step object\n * and the target step number (1-based indexing), and returns a string to be used as the *skip-to* button label. For example, \"Skip to Step 2\" or \"Skip to end\".\n * - `navigationAriaLabel` (string) - The aria label for the navigation pane.\n * - `cancelButton` (string) - The text of the button that enables the user to exit the flow.\n * - `previousButton` (string) - The text of the button that enables the user to return to the previous step.\n * - `nextButton` (string) - The text of the button that enables the user to move to the next step.\n * - `submitButton` (string) - The text of the button that enables the user to submit the form.\n * - `optional` (string) - The text displayed next to the step title and form header title when a step is declared optional.\n * - `nextButtonLoadingAnnouncement` (string) - The text that a screen reader announces when the *next* button is in a loading state.\n * - `submitButtonLoadingAnnouncement` (string) - The text that a screen reader announces when the *submit* button is in a loading state.\n */\n i18nStrings: WizardProps.I18nStrings;\n\n /**\n * Renders the *next* or *submit* button in a loading state.\n *\n * Use this if you need to wait for a response from the server before the user can proceed to the next step, such as during server-side validation or retrieving the next step's information.\n */\n isLoadingNextStep?: boolean;\n\n /**\n * When set to `false`, the *skip-to* button is never shown.\n * When set to `true`, the *skip-to* button may appear to offer faster navigation for the user.\n *\n * The *skip-to* button only allows to skip optional steps. It is shown when there is one or more optional\n * steps ahead having no required steps in-between.\n *\n * Note: the *skip-to* button requires the function i18nStrings.skipToButtonLabel to be defined.\n *\n * Defaults to `false`.\n */\n allowSkipTo?: boolean;\n\n /**\n * Specifies left-aligned secondary actions for the wizard. Use a button dropdown if multiple actions are required.\n */\n secondaryActions?: React.ReactNode;\n\n /**\n * Called when a user clicks the *cancel* button.\n * If a user has entered data in the form, you should prompt the user with a modal before exiting the wizard flow.\n */\n onCancel?: NonCancelableEventHandler;\n\n /**\n * Called when a user clicks the *submit* button.\n */\n onSubmit?: NonCancelableEventHandler;\n\n /**\n * Called when a user clicks the *next* button, the *previous* button, or an enabled step link in the navigation pane.\n *\n * The event `detail` includes the following:\n * - `requestedStepIndex` - The index of the requested step.\n * - `reason` - The user action that triggered the navigation event. It can be `next` (when the user clicks the *next* button),\n * `previous` (when the user clicks the *previous* button), `step` (an enabled step link in the navigation pane),\n * or `skip` (when navigated using navigation pane or the *skip-to* button to the previously unvisited step).\n */\n onNavigate?: NonCancelableEventHandler<WizardProps.NavigateDetail>;\n}\n\nexport namespace WizardProps {\n export interface Step {\n title: string;\n info?: React.ReactNode;\n description?: React.ReactNode;\n content: React.ReactNode;\n errorText?: React.ReactNode;\n isOptional?: boolean;\n }\n\n export interface I18nStrings {\n stepNumberLabel?(stepNumber: number): string;\n collapsedStepsLabel?(stepNumber: number, stepsCount: number): string;\n skipToButtonLabel?(targetStep: WizardProps.Step, targetStepNumber: number): string;\n navigationAriaLabel?: string;\n errorIconAriaLabel?: string;\n cancelButton?: string;\n previousButton?: string;\n nextButton?: string;\n submitButton: string;\n optional?: string;\n nextButtonLoadingAnnouncement?: string;\n submitButtonLoadingAnnouncement?: string;\n }\n\n export interface NavigateDetail {\n requestedStepIndex: number;\n reason: WizardProps.NavigationReason;\n }\n\n export type NavigationReason = 'next' | 'previous' | 'step' | 'skip';\n}\n"]}
@@ -4,6 +4,7 @@ interface WizardActionsProps {
4
4
  onCancelClick: () => void;
5
5
  isPrimaryLoading: boolean;
6
6
  primaryButtonText?: string;
7
+ primaryButtonLoadingText?: string;
7
8
  onPrimaryClick: () => void;
8
9
  showPrevious: boolean;
9
10
  previousButtonText?: string;
@@ -12,6 +13,6 @@ interface WizardActionsProps {
12
13
  skipToButtonText?: string;
13
14
  onSkipToClick: () => void;
14
15
  }
15
- export default function WizardActions({ cancelButtonText, onCancelClick, isPrimaryLoading, primaryButtonText, onPrimaryClick, showPrevious, previousButtonText, onPreviousClick, showSkipTo, skipToButtonText, onSkipToClick, }: WizardActionsProps): JSX.Element;
16
+ export default function WizardActions({ cancelButtonText, onCancelClick, isPrimaryLoading, primaryButtonText, primaryButtonLoadingText, onPrimaryClick, showPrevious, previousButtonText, onPreviousClick, showSkipTo, skipToButtonText, onSkipToClick, }: WizardActionsProps): JSX.Element;
16
17
  export {};
17
18
  //# sourceMappingURL=wizard-actions.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"wizard-actions.d.ts","sourceRoot":"lib/default/","sources":["wizard/wizard-actions.tsx"],"names":[],"mappings":";AASA,UAAU,kBAAkB;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,aAAa,GACd,EAAE,kBAAkB,eA2DpB"}
1
+ {"version":3,"file":"wizard-actions.d.ts","sourceRoot":"lib/default/","sources":["wizard/wizard-actions.tsx"],"names":[],"mappings":";AASA,UAAU,kBAAkB;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,wBAAwB,EACxB,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,aAAa,GACd,EAAE,kBAAkB,eA4DpB"}
@@ -5,7 +5,7 @@ import { InternalButton } from '../button/internal';
5
5
  import InternalSpaceBetween from '../space-between/internal';
6
6
  import styles from './styles.css.js';
7
7
  import Unmount from './unmount';
8
- export default function WizardActions({ cancelButtonText, onCancelClick, isPrimaryLoading, primaryButtonText, onPrimaryClick, showPrevious, previousButtonText, onPreviousClick, showSkipTo, skipToButtonText, onSkipToClick, }) {
8
+ export default function WizardActions({ cancelButtonText, onCancelClick, isPrimaryLoading, primaryButtonText, primaryButtonLoadingText, onPrimaryClick, showPrevious, previousButtonText, onPreviousClick, showSkipTo, skipToButtonText, onSkipToClick, }) {
9
9
  const containerRef = useRef(null);
10
10
  const primaryButtonRef = useRef(null);
11
11
  const onPreviousUnmount = () => {
@@ -27,6 +27,6 @@ export default function WizardActions({ cancelButtonText, onCancelClick, isPrima
27
27
  React.createElement(InternalButton, { className: styles['skip-to-button'], onClick: onSkipToClick, formAction: "none", disabled: isPrimaryLoading }, skipToButtonText))),
28
28
  showPrevious && (React.createElement(Unmount, { onUnmount: onPreviousUnmount },
29
29
  React.createElement(InternalButton, { className: styles['previous-button'], onClick: onPreviousClick, formAction: "none", disabled: isPrimaryLoading }, previousButtonText))),
30
- React.createElement(InternalButton, { ref: primaryButtonRef, className: styles['primary-button'], variant: "primary", formAction: "none", onClick: onPrimaryClick, loading: isPrimaryLoading }, primaryButtonText))));
30
+ React.createElement(InternalButton, { ref: primaryButtonRef, className: styles['primary-button'], variant: "primary", formAction: "none", onClick: onPrimaryClick, loading: isPrimaryLoading, loadingText: primaryButtonLoadingText }, primaryButtonText))));
31
31
  }
32
32
  //# sourceMappingURL=wizard-actions.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"wizard-actions.js","sourceRoot":"lib/default/","sources":["wizard/wizard-actions.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAC7D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,OAAO,MAAM,WAAW,CAAC;AAgBhC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,aAAa,GACM;IACnB,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,gBAAgB,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAEvD,MAAM,iBAAiB,GAAG,GAAG,EAAE;;QAC7B,IAAI,CAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,aAAa,CAAC,IAAI,MAAM,CAAC,iBAAiB,CAAC,EAAE,CAAC,MAAK,QAAQ,CAAC,aAAa,EAAE;YACnG,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SACnC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;;QACzB,IAAI,CAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,aAAa,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,MAAK,QAAQ,CAAC,aAAa,EAAE;YAClG,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SACnC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY;QACpB,oBAAC,oBAAoB,IAAC,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;YACxF,oBAAC,cAAc,IAAC,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,OAAO,EAAE,aAAa,IACxG,gBAAgB,CACF;YAChB,UAAU,IAAI,gBAAgB,IAAI,CACjC,oBAAC,OAAO,IAAC,SAAS,EAAE,aAAa;gBAC/B,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,EACnC,OAAO,EAAE,aAAa,EACtB,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAE,gBAAgB,IAEzB,gBAAgB,CACF,CACT,CACX;YACA,YAAY,IAAI,CACf,oBAAC,OAAO,IAAC,SAAS,EAAE,iBAAiB;gBACnC,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,EACpC,OAAO,EAAE,eAAe,EACxB,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAE,gBAAgB,IAEzB,kBAAkB,CACJ,CACT,CACX;YACD,oBAAC,cAAc,IACb,GAAG,EAAE,gBAAgB,EACrB,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,EACnC,OAAO,EAAC,SAAS,EACjB,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE,gBAAgB,IAExB,iBAAiB,CACH,CACI,CACnB,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport { InternalButton } from '../button/internal';\nimport InternalSpaceBetween from '../space-between/internal';\nimport styles from './styles.css.js';\nimport { ButtonProps } from '../button/interfaces';\nimport Unmount from './unmount';\n\ninterface WizardActionsProps {\n cancelButtonText?: string;\n onCancelClick: () => void;\n isPrimaryLoading: boolean;\n primaryButtonText?: string;\n onPrimaryClick: () => void;\n showPrevious: boolean;\n previousButtonText?: string;\n onPreviousClick: () => void;\n showSkipTo: boolean;\n skipToButtonText?: string;\n onSkipToClick: () => void;\n}\n\nexport default function WizardActions({\n cancelButtonText,\n onCancelClick,\n isPrimaryLoading,\n primaryButtonText,\n onPrimaryClick,\n showPrevious,\n previousButtonText,\n onPreviousClick,\n showSkipTo,\n skipToButtonText,\n onSkipToClick,\n}: WizardActionsProps) {\n const containerRef = useRef<HTMLDivElement>(null);\n const primaryButtonRef = useRef<ButtonProps.Ref>(null);\n\n const onPreviousUnmount = () => {\n if (containerRef.current?.querySelector(`.${styles['previous-button']}`) === document.activeElement) {\n primaryButtonRef.current?.focus();\n }\n };\n\n const onSkipUnmount = () => {\n if (containerRef.current?.querySelector(`.${styles['skip-to-button']}`) === document.activeElement) {\n primaryButtonRef.current?.focus();\n }\n };\n\n return (\n <div ref={containerRef}>\n <InternalSpaceBetween direction=\"horizontal\" size=\"xs\" className={styles['action-buttons']}>\n <InternalButton className={styles['cancel-button']} variant=\"link\" formAction=\"none\" onClick={onCancelClick}>\n {cancelButtonText}\n </InternalButton>\n {showSkipTo && skipToButtonText && (\n <Unmount onUnmount={onSkipUnmount}>\n <InternalButton\n className={styles['skip-to-button']}\n onClick={onSkipToClick}\n formAction=\"none\"\n disabled={isPrimaryLoading}\n >\n {skipToButtonText}\n </InternalButton>\n </Unmount>\n )}\n {showPrevious && (\n <Unmount onUnmount={onPreviousUnmount}>\n <InternalButton\n className={styles['previous-button']}\n onClick={onPreviousClick}\n formAction=\"none\"\n disabled={isPrimaryLoading}\n >\n {previousButtonText}\n </InternalButton>\n </Unmount>\n )}\n <InternalButton\n ref={primaryButtonRef}\n className={styles['primary-button']}\n variant=\"primary\"\n formAction=\"none\"\n onClick={onPrimaryClick}\n loading={isPrimaryLoading}\n >\n {primaryButtonText}\n </InternalButton>\n </InternalSpaceBetween>\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"wizard-actions.js","sourceRoot":"lib/default/","sources":["wizard/wizard-actions.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAC7D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,OAAO,MAAM,WAAW,CAAC;AAiBhC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,wBAAwB,EACxB,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,aAAa,GACM;IACnB,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,gBAAgB,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAEvD,MAAM,iBAAiB,GAAG,GAAG,EAAE;;QAC7B,IAAI,CAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,aAAa,CAAC,IAAI,MAAM,CAAC,iBAAiB,CAAC,EAAE,CAAC,MAAK,QAAQ,CAAC,aAAa,EAAE;YACnG,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SACnC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;;QACzB,IAAI,CAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,aAAa,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,MAAK,QAAQ,CAAC,aAAa,EAAE;YAClG,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SACnC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY;QACpB,oBAAC,oBAAoB,IAAC,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;YACxF,oBAAC,cAAc,IAAC,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,OAAO,EAAE,aAAa,IACxG,gBAAgB,CACF;YAChB,UAAU,IAAI,gBAAgB,IAAI,CACjC,oBAAC,OAAO,IAAC,SAAS,EAAE,aAAa;gBAC/B,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,EACnC,OAAO,EAAE,aAAa,EACtB,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAE,gBAAgB,IAEzB,gBAAgB,CACF,CACT,CACX;YACA,YAAY,IAAI,CACf,oBAAC,OAAO,IAAC,SAAS,EAAE,iBAAiB;gBACnC,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,EACpC,OAAO,EAAE,eAAe,EACxB,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAE,gBAAgB,IAEzB,kBAAkB,CACJ,CACT,CACX;YACD,oBAAC,cAAc,IACb,GAAG,EAAE,gBAAgB,EACrB,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,EACnC,OAAO,EAAC,SAAS,EACjB,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE,gBAAgB,EACzB,WAAW,EAAE,wBAAwB,IAEpC,iBAAiB,CACH,CACI,CACnB,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport { InternalButton } from '../button/internal';\nimport InternalSpaceBetween from '../space-between/internal';\nimport styles from './styles.css.js';\nimport { ButtonProps } from '../button/interfaces';\nimport Unmount from './unmount';\n\ninterface WizardActionsProps {\n cancelButtonText?: string;\n onCancelClick: () => void;\n isPrimaryLoading: boolean;\n primaryButtonText?: string;\n primaryButtonLoadingText?: string;\n onPrimaryClick: () => void;\n showPrevious: boolean;\n previousButtonText?: string;\n onPreviousClick: () => void;\n showSkipTo: boolean;\n skipToButtonText?: string;\n onSkipToClick: () => void;\n}\n\nexport default function WizardActions({\n cancelButtonText,\n onCancelClick,\n isPrimaryLoading,\n primaryButtonText,\n primaryButtonLoadingText,\n onPrimaryClick,\n showPrevious,\n previousButtonText,\n onPreviousClick,\n showSkipTo,\n skipToButtonText,\n onSkipToClick,\n}: WizardActionsProps) {\n const containerRef = useRef<HTMLDivElement>(null);\n const primaryButtonRef = useRef<ButtonProps.Ref>(null);\n\n const onPreviousUnmount = () => {\n if (containerRef.current?.querySelector(`.${styles['previous-button']}`) === document.activeElement) {\n primaryButtonRef.current?.focus();\n }\n };\n\n const onSkipUnmount = () => {\n if (containerRef.current?.querySelector(`.${styles['skip-to-button']}`) === document.activeElement) {\n primaryButtonRef.current?.focus();\n }\n };\n\n return (\n <div ref={containerRef}>\n <InternalSpaceBetween direction=\"horizontal\" size=\"xs\" className={styles['action-buttons']}>\n <InternalButton className={styles['cancel-button']} variant=\"link\" formAction=\"none\" onClick={onCancelClick}>\n {cancelButtonText}\n </InternalButton>\n {showSkipTo && skipToButtonText && (\n <Unmount onUnmount={onSkipUnmount}>\n <InternalButton\n className={styles['skip-to-button']}\n onClick={onSkipToClick}\n formAction=\"none\"\n disabled={isPrimaryLoading}\n >\n {skipToButtonText}\n </InternalButton>\n </Unmount>\n )}\n {showPrevious && (\n <Unmount onUnmount={onPreviousUnmount}>\n <InternalButton\n className={styles['previous-button']}\n onClick={onPreviousClick}\n formAction=\"none\"\n disabled={isPrimaryLoading}\n >\n {previousButtonText}\n </InternalButton>\n </Unmount>\n )}\n <InternalButton\n ref={primaryButtonRef}\n className={styles['primary-button']}\n variant=\"primary\"\n formAction=\"none\"\n onClick={onPrimaryClick}\n loading={isPrimaryLoading}\n loadingText={primaryButtonLoadingText}\n >\n {primaryButtonText}\n </InternalButton>\n </InternalSpaceBetween>\n </div>\n );\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"wizard-form.d.ts","sourceRoot":"lib/default/","sources":["wizard/wizard-form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,UAAU,eAAe;IACvB,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,cAAc,EACd,aAAa,GACd,EAAE,eAAe,eA+DjB"}
1
+ {"version":3,"file":"wizard-form.d.ts","sourceRoot":"lib/default/","sources":["wizard/wizard-form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,UAAU,eAAe;IACvB,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,cAAc,EACd,aAAa,GACd,EAAE,eAAe,eAkEjB"}
@@ -33,7 +33,7 @@ export default function WizardForm({ steps, activeStepIndex, isVisualRefresh, sh
33
33
  React.createElement("span", { className: styles['form-header-component-wrapper'], tabIndex: -1, ref: stepHeaderRef },
34
34
  title,
35
35
  isOptional && React.createElement("i", null, ` - ${i18nStrings.optional}`)))),
36
- React.createElement(InternalForm, { className: clsx(styles['form-component']), actions: React.createElement(WizardActions, { cancelButtonText: i18nStrings.cancelButton, primaryButtonText: isLastStep ? i18nStrings.submitButton : i18nStrings.nextButton, previousButtonText: i18nStrings.previousButton, onCancelClick: onCancelClick, onPreviousClick: onPreviousClick, onPrimaryClick: onPrimaryClick, onSkipToClick: () => onSkipToClick(skipToTargetIndex), showPrevious: activeStepIndex !== 0, isPrimaryLoading: isPrimaryLoading, showSkipTo: showSkipTo, skipToButtonText: skipToButtonText }), secondaryActions: secondaryActions, errorText: errorText, errorIconAriaLabel: i18nStrings.errorIconAriaLabel }, content)));
36
+ React.createElement(InternalForm, { className: clsx(styles['form-component']), actions: React.createElement(WizardActions, { cancelButtonText: i18nStrings.cancelButton, primaryButtonText: isLastStep ? i18nStrings.submitButton : i18nStrings.nextButton, primaryButtonLoadingText: isLastStep ? i18nStrings.submitButtonLoadingAnnouncement : i18nStrings.nextButtonLoadingAnnouncement, previousButtonText: i18nStrings.previousButton, onCancelClick: onCancelClick, onPreviousClick: onPreviousClick, onPrimaryClick: onPrimaryClick, onSkipToClick: () => onSkipToClick(skipToTargetIndex), showPrevious: activeStepIndex !== 0, isPrimaryLoading: isPrimaryLoading, showSkipTo: showSkipTo, skipToButtonText: skipToButtonText }), secondaryActions: secondaryActions, errorText: errorText, errorIconAriaLabel: i18nStrings.errorIconAriaLabel }, content)));
37
37
  }
38
38
  function findSkipToTargetIndex(steps, activeStepIndex) {
39
39
  let nextRequiredStepIndex = activeStepIndex;
@@ -1 +1 @@
1
- {"version":3,"file":"wizard-form.js","sourceRoot":"lib/default/","sources":["wizard/wizard-form.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, { useRef } from 'react';\nimport clsx from 'clsx';\nimport InternalForm from '../form/internal';\nimport InternalHeader from '../header/internal';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport WizardActions from './wizard-actions';\nimport { WizardProps } from './interfaces';\nimport WizardFormHeader from './wizard-form-header';\nimport styles from './styles.css.js';\nimport { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';\n\ninterface WizardFormProps {\n steps: ReadonlyArray<WizardProps.Step>;\n activeStepIndex: number;\n isVisualRefresh: boolean;\n showCollapsedSteps: boolean;\n i18nStrings: WizardProps.I18nStrings;\n isPrimaryLoading: boolean;\n allowSkipTo: boolean;\n secondaryActions?: React.ReactNode;\n onCancelClick: () => void;\n onPreviousClick: () => void;\n onPrimaryClick: () => void;\n onSkipToClick: (stepIndex: number) => void;\n}\n\nexport default function WizardForm({\n steps,\n activeStepIndex,\n isVisualRefresh,\n showCollapsedSteps,\n i18nStrings,\n isPrimaryLoading,\n allowSkipTo,\n secondaryActions,\n onCancelClick,\n onPreviousClick,\n onPrimaryClick,\n onSkipToClick,\n}: WizardFormProps) {\n const { title, info, description, content, errorText, isOptional } = steps[activeStepIndex] || {};\n const isLastStep = activeStepIndex >= steps.length - 1;\n const skipToTargetIndex = findSkipToTargetIndex(steps, activeStepIndex);\n const isMobile = useMobile();\n const stepHeaderRef = useRef<HTMLDivElement | null>(null);\n\n useEffectOnUpdate(() => {\n if (stepHeaderRef && stepHeaderRef.current) {\n stepHeaderRef.current?.focus();\n }\n }, [activeStepIndex]);\n\n const showSkipTo = allowSkipTo && skipToTargetIndex !== -1;\n const skipToButtonText =\n skipToTargetIndex !== -1 && i18nStrings.skipToButtonLabel\n ? i18nStrings.skipToButtonLabel(steps[skipToTargetIndex], skipToTargetIndex + 1)\n : undefined;\n\n return (\n <>\n <WizardFormHeader isMobile={isMobile || showCollapsedSteps} isVisualRefresh={isVisualRefresh}>\n <div\n className={clsx(\n styles['collapsed-steps'],\n !showCollapsedSteps && styles['collapsed-steps-hidden'],\n isVisualRefresh && isMobile && styles['collapsed-steps-extra-padding']\n )}\n >\n {i18nStrings.collapsedStepsLabel?.(activeStepIndex + 1, steps.length)}\n </div>\n <InternalHeader className={styles['form-header-component']} variant=\"h1\" description={description} info={info}>\n <span className={styles['form-header-component-wrapper']} tabIndex={-1} ref={stepHeaderRef}>\n {title}\n {isOptional && <i>{` - ${i18nStrings.optional}`}</i>}\n </span>\n </InternalHeader>\n </WizardFormHeader>\n <InternalForm\n className={clsx(styles['form-component'])}\n actions={\n <WizardActions\n cancelButtonText={i18nStrings.cancelButton}\n primaryButtonText={isLastStep ? i18nStrings.submitButton : i18nStrings.nextButton}\n previousButtonText={i18nStrings.previousButton}\n onCancelClick={onCancelClick}\n onPreviousClick={onPreviousClick}\n onPrimaryClick={onPrimaryClick}\n onSkipToClick={() => onSkipToClick(skipToTargetIndex)}\n showPrevious={activeStepIndex !== 0}\n isPrimaryLoading={isPrimaryLoading}\n showSkipTo={showSkipTo}\n skipToButtonText={skipToButtonText}\n />\n }\n secondaryActions={secondaryActions}\n errorText={errorText}\n errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n >\n {content}\n </InternalForm>\n </>\n );\n}\n\nfunction findSkipToTargetIndex(steps: ReadonlyArray<WizardProps.Step>, activeStepIndex: number): number {\n let nextRequiredStepIndex = activeStepIndex;\n do {\n nextRequiredStepIndex++;\n } while (nextRequiredStepIndex < steps.length - 1 && steps[nextRequiredStepIndex].isOptional);\n\n return nextRequiredStepIndex > activeStepIndex + 1 ? nextRequiredStepIndex : -1;\n}\n"]}
1
+ {"version":3,"file":"wizard-form.js","sourceRoot":"lib/default/","sources":["wizard/wizard-form.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, { useRef } from 'react';\nimport clsx from 'clsx';\nimport InternalForm from '../form/internal';\nimport InternalHeader from '../header/internal';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport WizardActions from './wizard-actions';\nimport { WizardProps } from './interfaces';\nimport WizardFormHeader from './wizard-form-header';\nimport styles from './styles.css.js';\nimport { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';\n\ninterface WizardFormProps {\n steps: ReadonlyArray<WizardProps.Step>;\n activeStepIndex: number;\n isVisualRefresh: boolean;\n showCollapsedSteps: boolean;\n i18nStrings: WizardProps.I18nStrings;\n isPrimaryLoading: boolean;\n allowSkipTo: boolean;\n secondaryActions?: React.ReactNode;\n onCancelClick: () => void;\n onPreviousClick: () => void;\n onPrimaryClick: () => void;\n onSkipToClick: (stepIndex: number) => void;\n}\n\nexport default function WizardForm({\n steps,\n activeStepIndex,\n isVisualRefresh,\n showCollapsedSteps,\n i18nStrings,\n isPrimaryLoading,\n allowSkipTo,\n secondaryActions,\n onCancelClick,\n onPreviousClick,\n onPrimaryClick,\n onSkipToClick,\n}: WizardFormProps) {\n const { title, info, description, content, errorText, isOptional } = steps[activeStepIndex] || {};\n const isLastStep = activeStepIndex >= steps.length - 1;\n const skipToTargetIndex = findSkipToTargetIndex(steps, activeStepIndex);\n const isMobile = useMobile();\n const stepHeaderRef = useRef<HTMLDivElement | null>(null);\n\n useEffectOnUpdate(() => {\n if (stepHeaderRef && stepHeaderRef.current) {\n stepHeaderRef.current?.focus();\n }\n }, [activeStepIndex]);\n\n const showSkipTo = allowSkipTo && skipToTargetIndex !== -1;\n const skipToButtonText =\n skipToTargetIndex !== -1 && i18nStrings.skipToButtonLabel\n ? i18nStrings.skipToButtonLabel(steps[skipToTargetIndex], skipToTargetIndex + 1)\n : undefined;\n\n return (\n <>\n <WizardFormHeader isMobile={isMobile || showCollapsedSteps} isVisualRefresh={isVisualRefresh}>\n <div\n className={clsx(\n styles['collapsed-steps'],\n !showCollapsedSteps && styles['collapsed-steps-hidden'],\n isVisualRefresh && isMobile && styles['collapsed-steps-extra-padding']\n )}\n >\n {i18nStrings.collapsedStepsLabel?.(activeStepIndex + 1, steps.length)}\n </div>\n <InternalHeader className={styles['form-header-component']} variant=\"h1\" description={description} info={info}>\n <span className={styles['form-header-component-wrapper']} tabIndex={-1} ref={stepHeaderRef}>\n {title}\n {isOptional && <i>{` - ${i18nStrings.optional}`}</i>}\n </span>\n </InternalHeader>\n </WizardFormHeader>\n <InternalForm\n className={clsx(styles['form-component'])}\n actions={\n <WizardActions\n cancelButtonText={i18nStrings.cancelButton}\n primaryButtonText={isLastStep ? i18nStrings.submitButton : i18nStrings.nextButton}\n primaryButtonLoadingText={\n isLastStep ? i18nStrings.submitButtonLoadingAnnouncement : i18nStrings.nextButtonLoadingAnnouncement\n }\n previousButtonText={i18nStrings.previousButton}\n onCancelClick={onCancelClick}\n onPreviousClick={onPreviousClick}\n onPrimaryClick={onPrimaryClick}\n onSkipToClick={() => onSkipToClick(skipToTargetIndex)}\n showPrevious={activeStepIndex !== 0}\n isPrimaryLoading={isPrimaryLoading}\n showSkipTo={showSkipTo}\n skipToButtonText={skipToButtonText}\n />\n }\n secondaryActions={secondaryActions}\n errorText={errorText}\n errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n >\n {content}\n </InternalForm>\n </>\n );\n}\n\nfunction findSkipToTargetIndex(steps: ReadonlyArray<WizardProps.Step>, activeStepIndex: number): number {\n let nextRequiredStepIndex = activeStepIndex;\n do {\n nextRequiredStepIndex++;\n } while (nextRequiredStepIndex < steps.length - 1 && steps[nextRequiredStepIndex].isOptional);\n\n return nextRequiredStepIndex > activeStepIndex + 1 ? nextRequiredStepIndex : -1;\n}\n"]}