@cloudscape-design/components 3.0.87 → 3.0.89

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 (71) hide show
  1. package/checkbox/internal.d.ts +0 -1
  2. package/checkbox/internal.d.ts.map +1 -1
  3. package/checkbox/internal.js +9 -11
  4. package/checkbox/internal.js.map +1 -1
  5. package/date-picker/index.js +1 -1
  6. package/date-picker/index.js.map +1 -1
  7. package/date-picker/styles.css.js +7 -6
  8. package/date-picker/styles.scoped.css +14 -7
  9. package/date-picker/styles.selectors.js +7 -6
  10. package/date-range-picker/dropdown.js +1 -1
  11. package/date-range-picker/dropdown.js.map +1 -1
  12. package/date-range-picker/styles.css.js +37 -36
  13. package/date-range-picker/styles.scoped.css +48 -44
  14. package/date-range-picker/styles.selectors.js +37 -36
  15. package/header/styles.css.js +40 -40
  16. package/header/styles.scoped.css +45 -43
  17. package/header/styles.selectors.js +40 -40
  18. package/hotspot/index.d.ts.map +1 -1
  19. package/hotspot/index.js +2 -2
  20. package/hotspot/index.js.map +1 -1
  21. package/internal/components/abstract-switch/index.d.ts +2 -2
  22. package/internal/components/abstract-switch/index.d.ts.map +1 -1
  23. package/internal/components/abstract-switch/index.js +2 -9
  24. package/internal/components/abstract-switch/index.js.map +1 -1
  25. package/internal/components/abstract-switch/styles.css.js +12 -12
  26. package/internal/components/abstract-switch/styles.scoped.css +20 -19
  27. package/internal/components/abstract-switch/styles.selectors.js +12 -12
  28. package/internal/components/focus-lock/index.d.ts +2 -1
  29. package/internal/components/focus-lock/index.d.ts.map +1 -1
  30. package/internal/components/focus-lock/index.js +2 -2
  31. package/internal/components/focus-lock/index.js.map +1 -1
  32. package/internal/components/screenreader-only/index.js +1 -1
  33. package/internal/components/screenreader-only/index.js.map +1 -1
  34. package/internal/environment.js +1 -1
  35. package/package.json +1 -1
  36. package/property-filter/controller.d.ts +4 -7
  37. package/property-filter/controller.d.ts.map +1 -1
  38. package/property-filter/controller.js +3 -2
  39. package/property-filter/controller.js.map +1 -1
  40. package/property-filter/filter-options.d.ts +3 -0
  41. package/property-filter/filter-options.d.ts.map +1 -0
  42. package/property-filter/filter-options.js +31 -0
  43. package/property-filter/filter-options.js.map +1 -0
  44. package/property-filter/index.d.ts.map +1 -1
  45. package/property-filter/index.js +0 -5
  46. package/property-filter/index.js.map +1 -1
  47. package/property-filter/property-filter-autosuggest.d.ts.map +1 -1
  48. package/property-filter/property-filter-autosuggest.js +9 -7
  49. package/property-filter/property-filter-autosuggest.js.map +1 -1
  50. package/property-filter/styles.css.js +33 -32
  51. package/property-filter/styles.scoped.css +38 -34
  52. package/property-filter/styles.selectors.js +33 -32
  53. package/radio-group/radio-button.d.ts +3 -3
  54. package/radio-group/radio-button.d.ts.map +1 -1
  55. package/radio-group/radio-button.js +18 -6
  56. package/radio-group/radio-button.js.map +1 -1
  57. package/select/parts/trigger.d.ts.map +1 -1
  58. package/select/parts/trigger.js +8 -2
  59. package/select/parts/trigger.js.map +1 -1
  60. package/table/selection-control/index.js +1 -1
  61. package/table/selection-control/index.js.map +1 -1
  62. package/tiles/internal.d.ts.map +1 -1
  63. package/tiles/internal.js +2 -9
  64. package/tiles/internal.js.map +1 -1
  65. package/tiles/tile.d.ts +12 -0
  66. package/tiles/tile.d.ts.map +1 -0
  67. package/tiles/tile.js +27 -0
  68. package/tiles/tile.js.map +1 -0
  69. package/toggle/internal.d.ts.map +1 -1
  70. package/toggle/internal.js +7 -1
  71. package/toggle/internal.js.map +1 -1
package/property-filter/styles.scoped.css CHANGED
@@ -90,7 +90,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
90
90
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
91
91
  SPDX-License-Identifier: Apache-2.0
92
92
  */
93
- .awsui_root_1wzqe_b1qbn_93:not(#\9) {
93
+ .awsui_root_1wzqe_13cnv_93:not(#\9) {
94
94
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
95
95
  border-collapse: separate;
96
96
  border-spacing: 0;
@@ -127,118 +127,122 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
127
127
  font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
128
128
  }
129
129
 
130
- .awsui_search-field_1wzqe_b1qbn_104:not(#\9) {
130
+ .awsui_search-field_1wzqe_13cnv_104:not(#\9) {
131
131
  display: flex;
132
132
  align-items: center;
133
133
  max-width: calc(688px - 2 * var(--space-l-4vl6xu, 20px));
134
134
  }
135
135
 
136
- .awsui_input-wrapper_1wzqe_b1qbn_110:not(#\9) {
136
+ .awsui_input-wrapper_1wzqe_13cnv_110:not(#\9) {
137
137
  flex-grow: 1;
138
138
  }
139
139
 
140
- .awsui_add-token_1wzqe_b1qbn_114:not(#\9) {
140
+ .awsui_add-token_1wzqe_13cnv_114:not(#\9) {
141
141
  border-left: 1px solid var(--color-border-divider-default-7s2wjw, #e9ebed);
142
142
  box-sizing: border-box;
143
143
  margin-left: var(--space-m-17eucw, 16px);
144
144
  padding-left: var(--space-m-17eucw, 16px);
145
145
  }
146
146
 
147
- .awsui_tokens_1wzqe_b1qbn_121:not(#\9) {
147
+ .awsui_tokens_1wzqe_13cnv_121:not(#\9) {
148
148
  margin-top: var(--space-xs-rsr2qu, 8px);
149
149
  }
150
150
 
151
- .awsui_token-operator_1wzqe_b1qbn_125:not(#\9) {
151
+ .awsui_token-operator_1wzqe_13cnv_125:not(#\9) {
152
152
  font-weight: bold;
153
153
  }
154
154
 
155
- .awsui_property-editor_1wzqe_b1qbn_129:not(#\9),
156
- .awsui_token-editor_1wzqe_b1qbn_130:not(#\9) {
155
+ .awsui_property-editor_1wzqe_13cnv_129:not(#\9),
156
+ .awsui_token-editor_1wzqe_13cnv_130:not(#\9) {
157
157
  -webkit-user-select: text;
158
158
  user-select: text;
159
159
  margin: var(--space-xxs-ynfts5, 4px);
160
160
  }
161
- .awsui_property-editor-form_1wzqe_b1qbn_134:not(#\9),
162
- .awsui_token-editor-form_1wzqe_b1qbn_135:not(#\9) {
161
+ .awsui_property-editor-form_1wzqe_13cnv_134:not(#\9),
162
+ .awsui_token-editor-form_1wzqe_13cnv_135:not(#\9) {
163
163
  margin-bottom: var(--space-scaled-l-t03y3z, 20px);
164
164
  }
165
- .awsui_property-editor-field-property_1wzqe_b1qbn_138:not(#\9),
166
- .awsui_token-editor-field-property_1wzqe_b1qbn_139:not(#\9) {
165
+ .awsui_property-editor-field-property_1wzqe_13cnv_138:not(#\9),
166
+ .awsui_token-editor-field-property_1wzqe_13cnv_139:not(#\9) {
167
167
  /* used in test-utils */
168
168
  }
169
- .awsui_property-editor-field-operator_1wzqe_b1qbn_142:not(#\9),
170
- .awsui_token-editor-field-operator_1wzqe_b1qbn_143:not(#\9) {
169
+ .awsui_property-editor-field-operator_1wzqe_13cnv_142:not(#\9),
170
+ .awsui_token-editor-field-operator_1wzqe_13cnv_143:not(#\9) {
171
171
  margin-top: var(--space-scaled-l-t03y3z, 20px);
172
172
  }
173
- .awsui_property-editor-field-value_1wzqe_b1qbn_146:not(#\9),
174
- .awsui_token-editor-field-value_1wzqe_b1qbn_147:not(#\9) {
173
+ .awsui_property-editor-field-value_1wzqe_13cnv_146:not(#\9),
174
+ .awsui_token-editor-field-value_1wzqe_13cnv_147:not(#\9) {
175
175
  margin-top: var(--space-scaled-l-t03y3z, 20px);
176
176
  }
177
- .awsui_property-editor-cancel_1wzqe_b1qbn_150:not(#\9),
178
- .awsui_token-editor-cancel_1wzqe_b1qbn_151:not(#\9) {
177
+ .awsui_property-editor-cancel_1wzqe_13cnv_150:not(#\9),
178
+ .awsui_token-editor-cancel_1wzqe_13cnv_151:not(#\9) {
179
179
  margin-right: var(--space-xs-rsr2qu, 8px);
180
180
  }
181
- .awsui_property-editor-submit_1wzqe_b1qbn_154:not(#\9),
182
- .awsui_token-editor-submit_1wzqe_b1qbn_155:not(#\9) {
181
+ .awsui_property-editor-submit_1wzqe_13cnv_154:not(#\9),
182
+ .awsui_token-editor-submit_1wzqe_13cnv_155:not(#\9) {
183
183
  /* used in test-utils */
184
184
  }
185
- .awsui_property-editor-actions_1wzqe_b1qbn_158:not(#\9),
186
- .awsui_token-editor-actions_1wzqe_b1qbn_159:not(#\9) {
185
+ .awsui_property-editor-actions_1wzqe_13cnv_158:not(#\9),
186
+ .awsui_token-editor-actions_1wzqe_13cnv_159:not(#\9) {
187
187
  display: flex;
188
188
  justify-content: flex-end;
189
189
  padding-top: var(--space-s-hv8c1d, 12px);
190
190
  border-top: 1px solid var(--color-border-dropdown-item-default-faosd8, #e9ebed);
191
191
  }
192
192
 
193
- .awsui_token-editor-actions_1wzqe_b1qbn_159:not(#\9) {
193
+ .awsui_token-editor-actions_1wzqe_13cnv_159:not(#\9) {
194
194
  padding-right: calc(var(--space-m-17eucw, 16px) + var(--space-xxs-ynfts5, 4px));
195
195
  margin-left: calc(-1 * var(--space-m-17eucw, 16px) + -1 * var(--space-xxs-ynfts5, 4px));
196
196
  margin-right: calc(-1 * var(--space-m-17eucw, 16px) + -1 * var(--space-xxs-ynfts5, 4px));
197
197
  }
198
198
 
199
- .awsui_property-editor_1wzqe_b1qbn_129:not(#\9) {
199
+ .awsui_property-editor_1wzqe_13cnv_129:not(#\9) {
200
200
  padding: var(--space-m-17eucw, 16px);
201
201
  overflow-y: auto;
202
202
  }
203
203
 
204
- .awsui_custom-control_1wzqe_b1qbn_177:not(#\9) {
204
+ .awsui_custom-content-wrapper_1wzqe_13cnv_177:not(#\9) {
205
+ display: contents;
206
+ }
207
+
208
+ .awsui_custom-control_1wzqe_13cnv_181:not(#\9) {
205
209
  margin-right: var(--space-s-hv8c1d, 12px);
206
210
  }
207
211
 
208
- .awsui_input_1wzqe_b1qbn_110:not(#\9) {
212
+ .awsui_input_1wzqe_13cnv_110:not(#\9) {
209
213
  flex: 1;
210
214
  }
211
215
 
212
- .awsui_results_1wzqe_b1qbn_185:not(#\9) {
216
+ .awsui_results_1wzqe_13cnv_189:not(#\9) {
213
217
  color: var(--color-text-form-label-k3j0b4, #000716);
214
218
  display: inline-block;
215
219
  box-sizing: border-box;
216
220
  white-space: nowrap;
217
221
  }
218
- .awsui_results-visible_1wzqe_b1qbn_191:not(#\9) {
222
+ .awsui_results-visible_1wzqe_13cnv_195:not(#\9) {
219
223
  padding-left: var(--space-s-hv8c1d, 12px);
220
224
  }
221
225
 
222
- .awsui_separator_1wzqe_b1qbn_195:not(#\9) {
226
+ .awsui_separator_1wzqe_13cnv_199:not(#\9) {
223
227
  margin: 0px var(--space-scaled-m-pv0fmt, 16px);
224
228
  height: 100%;
225
229
  width: var(--border-divider-section-width-4wm2it, 2px);
226
230
  background-color: var(--color-border-divider-default-7s2wjw, #e9ebed);
227
231
  }
228
232
 
229
- .awsui_toggle-collapsed_1wzqe_b1qbn_202:not(#\9) {
233
+ .awsui_toggle-collapsed_1wzqe_13cnv_206:not(#\9) {
230
234
  margin-top: calc(-1 * var(--space-scaled-xxs-95dhkm, 4px));
231
235
  margin-left: var(--space-xs-rsr2qu, 8px);
232
236
  }
233
237
 
234
- .awsui_token-trigger_1wzqe_b1qbn_207:not(#\9) {
238
+ .awsui_token-trigger_1wzqe_13cnv_211:not(#\9) {
235
239
  min-width: 0;
236
240
  -ms-word-break: break-all;
237
241
  word-break: break-word;
238
242
  }
239
243
 
240
- .awsui_remove-all_1wzqe_b1qbn_213:not(#\9),
241
- .awsui_token-label_1wzqe_b1qbn_214:not(#\9),
242
- .awsui_join-operation_1wzqe_b1qbn_215:not(#\9) {
244
+ .awsui_remove-all_1wzqe_13cnv_217:not(#\9),
245
+ .awsui_token-label_1wzqe_13cnv_218:not(#\9),
246
+ .awsui_join-operation_1wzqe_13cnv_219:not(#\9) {
243
247
  /* used in test-utils */
244
248
  }
package/property-filter/styles.selectors.js CHANGED
@@ -2,37 +2,38 @@
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_1wzqe_b1qbn_93",
6
- "search-field": "awsui_search-field_1wzqe_b1qbn_104",
7
- "input-wrapper": "awsui_input-wrapper_1wzqe_b1qbn_110",
8
- "add-token": "awsui_add-token_1wzqe_b1qbn_114",
9
- "tokens": "awsui_tokens_1wzqe_b1qbn_121",
10
- "token-operator": "awsui_token-operator_1wzqe_b1qbn_125",
11
- "property-editor": "awsui_property-editor_1wzqe_b1qbn_129",
12
- "token-editor": "awsui_token-editor_1wzqe_b1qbn_130",
13
- "property-editor-form": "awsui_property-editor-form_1wzqe_b1qbn_134",
14
- "token-editor-form": "awsui_token-editor-form_1wzqe_b1qbn_135",
15
- "property-editor-field-property": "awsui_property-editor-field-property_1wzqe_b1qbn_138",
16
- "token-editor-field-property": "awsui_token-editor-field-property_1wzqe_b1qbn_139",
17
- "property-editor-field-operator": "awsui_property-editor-field-operator_1wzqe_b1qbn_142",
18
- "token-editor-field-operator": "awsui_token-editor-field-operator_1wzqe_b1qbn_143",
19
- "property-editor-field-value": "awsui_property-editor-field-value_1wzqe_b1qbn_146",
20
- "token-editor-field-value": "awsui_token-editor-field-value_1wzqe_b1qbn_147",
21
- "property-editor-cancel": "awsui_property-editor-cancel_1wzqe_b1qbn_150",
22
- "token-editor-cancel": "awsui_token-editor-cancel_1wzqe_b1qbn_151",
23
- "property-editor-submit": "awsui_property-editor-submit_1wzqe_b1qbn_154",
24
- "token-editor-submit": "awsui_token-editor-submit_1wzqe_b1qbn_155",
25
- "property-editor-actions": "awsui_property-editor-actions_1wzqe_b1qbn_158",
26
- "token-editor-actions": "awsui_token-editor-actions_1wzqe_b1qbn_159",
27
- "custom-control": "awsui_custom-control_1wzqe_b1qbn_177",
28
- "input": "awsui_input_1wzqe_b1qbn_110",
29
- "results": "awsui_results_1wzqe_b1qbn_185",
30
- "results-visible": "awsui_results-visible_1wzqe_b1qbn_191",
31
- "separator": "awsui_separator_1wzqe_b1qbn_195",
32
- "toggle-collapsed": "awsui_toggle-collapsed_1wzqe_b1qbn_202",
33
- "token-trigger": "awsui_token-trigger_1wzqe_b1qbn_207",
34
- "remove-all": "awsui_remove-all_1wzqe_b1qbn_213",
35
- "token-label": "awsui_token-label_1wzqe_b1qbn_214",
36
- "join-operation": "awsui_join-operation_1wzqe_b1qbn_215"
5
+ "root": "awsui_root_1wzqe_13cnv_93",
6
+ "search-field": "awsui_search-field_1wzqe_13cnv_104",
7
+ "input-wrapper": "awsui_input-wrapper_1wzqe_13cnv_110",
8
+ "add-token": "awsui_add-token_1wzqe_13cnv_114",
9
+ "tokens": "awsui_tokens_1wzqe_13cnv_121",
10
+ "token-operator": "awsui_token-operator_1wzqe_13cnv_125",
11
+ "property-editor": "awsui_property-editor_1wzqe_13cnv_129",
12
+ "token-editor": "awsui_token-editor_1wzqe_13cnv_130",
13
+ "property-editor-form": "awsui_property-editor-form_1wzqe_13cnv_134",
14
+ "token-editor-form": "awsui_token-editor-form_1wzqe_13cnv_135",
15
+ "property-editor-field-property": "awsui_property-editor-field-property_1wzqe_13cnv_138",
16
+ "token-editor-field-property": "awsui_token-editor-field-property_1wzqe_13cnv_139",
17
+ "property-editor-field-operator": "awsui_property-editor-field-operator_1wzqe_13cnv_142",
18
+ "token-editor-field-operator": "awsui_token-editor-field-operator_1wzqe_13cnv_143",
19
+ "property-editor-field-value": "awsui_property-editor-field-value_1wzqe_13cnv_146",
20
+ "token-editor-field-value": "awsui_token-editor-field-value_1wzqe_13cnv_147",
21
+ "property-editor-cancel": "awsui_property-editor-cancel_1wzqe_13cnv_150",
22
+ "token-editor-cancel": "awsui_token-editor-cancel_1wzqe_13cnv_151",
23
+ "property-editor-submit": "awsui_property-editor-submit_1wzqe_13cnv_154",
24
+ "token-editor-submit": "awsui_token-editor-submit_1wzqe_13cnv_155",
25
+ "property-editor-actions": "awsui_property-editor-actions_1wzqe_13cnv_158",
26
+ "token-editor-actions": "awsui_token-editor-actions_1wzqe_13cnv_159",
27
+ "custom-content-wrapper": "awsui_custom-content-wrapper_1wzqe_13cnv_177",
28
+ "custom-control": "awsui_custom-control_1wzqe_13cnv_181",
29
+ "input": "awsui_input_1wzqe_13cnv_110",
30
+ "results": "awsui_results_1wzqe_13cnv_189",
31
+ "results-visible": "awsui_results-visible_1wzqe_13cnv_195",
32
+ "separator": "awsui_separator_1wzqe_13cnv_199",
33
+ "toggle-collapsed": "awsui_toggle-collapsed_1wzqe_13cnv_206",
34
+ "token-trigger": "awsui_token-trigger_1wzqe_13cnv_211",
35
+ "remove-all": "awsui_remove-all_1wzqe_13cnv_217",
36
+ "token-label": "awsui_token-label_1wzqe_13cnv_218",
37
+ "join-operation": "awsui_join-operation_1wzqe_13cnv_219"
37
38
  };
38
39
 
package/radio-group/radio-button.d.ts CHANGED
@@ -1,11 +1,11 @@
1
+ import React from 'react';
1
2
  import { NonCancelableEventHandler } from '../internal/events';
2
3
  import { RadioGroupProps } from './interfaces';
3
4
  interface RadioButtonProps extends RadioGroupProps.RadioButtonDefinition {
4
5
  name: string;
5
6
  checked: boolean;
6
- withoutLabel?: boolean;
7
7
  onChange?: NonCancelableEventHandler<RadioGroupProps.ChangeDetail>;
8
8
  }
9
- export default function RadioButton({ name, label, value, checked, withoutLabel, description, disabled, controlId, onChange, }: RadioButtonProps): JSX.Element;
10
- export {};
9
+ declare const _default: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
10
+ export default _default;
11
11
  //# sourceMappingURL=radio-button.d.ts.map
package/radio-group/radio-button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../../src/radio-group/radio-button.tsx"],"names":[],"mappings":"AAKA,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAEvF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,UAAU,gBAAiB,SAAQ,eAAe,CAAC,qBAAqB;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;CACpE;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,eA6ClB"}
1
+ {"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../../src/radio-group/radio-button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAGvF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,UAAU,gBAAiB,SAAQ,eAAe,CAAC,qBAAqB;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;CACpE;;AAED,wBA2DG"}
package/radio-group/radio-button.js CHANGED
@@ -2,20 +2,32 @@ import { __assign } from "tslib";
2
2
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3
3
  // SPDX-License-Identifier: Apache-2.0
4
4
  import clsx from 'clsx';
5
- import React from 'react';
5
+ import React, { useRef } from 'react';
6
6
  import AbstractSwitch from '../internal/components/abstract-switch';
7
7
  import { fireNonCancelableEvent } from '../internal/events';
8
+ import { useMergeRefs } from '../internal/hooks/use-merge-refs';
8
9
  import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
9
10
  import styles from './styles.css.js';
10
- export default function RadioButton(_a) {
11
+ export default React.forwardRef(function RadioButton(_a, ref) {
11
12
  var _b, _c;
12
- var name = _a.name, label = _a.label, value = _a.value, checked = _a.checked, withoutLabel = _a.withoutLabel, description = _a.description, disabled = _a.disabled, controlId = _a.controlId, onChange = _a.onChange;
13
+ var name = _a.name, label = _a.label, value = _a.value, checked = _a.checked, description = _a.description, disabled = _a.disabled, controlId = _a.controlId, onChange = _a.onChange;
13
14
  var isVisualRefresh = useVisualRefresh();
14
- return (React.createElement(AbstractSwitch, { className: clsx(styles.radio, description && styles['radio--has-description']), controlClassName: styles['radio-control'], outlineClassName: styles.outline, label: label, description: description, disabled: disabled, controlId: controlId, nativeControl: function (nativeControlProps) { return (React.createElement("input", __assign({}, nativeControlProps, { type: "radio", name: name, value: value, checked: checked, onChange: onChange && (function () { return fireNonCancelableEvent(onChange, { value: value }); }) }))); }, styledControl: React.createElement("svg", { viewBox: "0 0 100 100", focusable: "false", "aria-hidden": "true" },
15
+ var radioButtonRef = useRef(null);
16
+ var mergedRefs = useMergeRefs(radioButtonRef, ref);
17
+ return (React.createElement(AbstractSwitch, { className: clsx(styles.radio, description && styles['radio--has-description']), controlClassName: styles['radio-control'], outlineClassName: styles.outline, label: label, description: description, disabled: disabled, controlId: controlId, nativeControl: function (nativeControlProps) { return (React.createElement("input", __assign({}, nativeControlProps, { type: "radio", ref: mergedRefs, name: name, value: value, checked: checked,
18
+ // empty handler to suppress React controllability warning
19
+ onChange: function () { } }))); }, onClick: function () {
20
+ var _a;
21
+ (_a = radioButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
22
+ if (checked) {
23
+ return;
24
+ }
25
+ fireNonCancelableEvent(onChange, { value: value });
26
+ }, styledControl: React.createElement("svg", { viewBox: "0 0 100 100", focusable: "false", "aria-hidden": "true" },
15
27
  React.createElement("circle", { className: clsx(styles['styled-circle-border'], (_b = {}, _b[styles['styled-circle-disabled']] = disabled, _b)), strokeWidth: isVisualRefresh ? 12 : 8, cx: 50, cy: 50, r: isVisualRefresh ? 44 : 46 }),
16
28
  React.createElement("circle", { className: clsx(styles['styled-circle-fill'], (_c = {},
17
29
  _c[styles['styled-circle-disabled']] = disabled,
18
30
  _c[styles['styled-circle-checked']] = checked,
19
- _c)), strokeWidth: 30, cx: 50, cy: 50, r: 35 })), withoutLabel: withoutLabel }));
20
- }
31
+ _c)), strokeWidth: 30, cx: 50, cy: 50, r: 35 })) }));
32
+ });
21
33
  //# sourceMappingURL=radio-button.js.map
package/radio-group/radio-button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/radio-group/radio-button.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,MAAM,wCAAwC,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAA6B,MAAM,oBAAoB,CAAC;AACvF,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAUjB;;QATjB,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,KAAK,WAAA,EACL,OAAO,aAAA,EACP,YAAY,kBAAA,EACZ,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA;IAER,IAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAC3C,OAAO,CACL,oBAAC,cAAc,IACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,IAAI,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAC9E,gBAAgB,EAAE,MAAM,CAAC,eAAe,CAAC,EACzC,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAChC,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,UAAA,kBAAkB,IAAI,OAAA,CACnC,0CACM,kBAAkB,IACtB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAAI,CAAC,cAAM,OAAA,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,OAAA,EAAE,CAAC,EAA3C,CAA2C,CAAC,IACzE,CACH,EAToC,CASpC,EACD,aAAa,EACX,6BAAK,OAAO,EAAC,aAAa,EAAC,SAAS,EAAC,OAAO,iBAAa,MAAM;YAC7D,gCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,YAAI,GAAC,MAAM,CAAC,wBAAwB,CAAC,IAAG,QAAQ,MAAG,EACjG,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EACrC,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAC5B;YACF,gCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC;oBAC1C,GAAC,MAAM,CAAC,wBAAwB,CAAC,IAAG,QAAQ;oBAC5C,GAAC,MAAM,CAAC,uBAAuB,CAAC,IAAG,OAAO;wBAC1C,EACF,WAAW,EAAE,EAAE,EACf,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,EAAE,GACL,CACE,EAER,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { RadioGroupProps } from './interfaces';\nimport styles from './styles.css.js';\n\ninterface RadioButtonProps extends RadioGroupProps.RadioButtonDefinition {\n name: string;\n checked: boolean;\n withoutLabel?: boolean;\n onChange?: NonCancelableEventHandler<RadioGroupProps.ChangeDetail>;\n}\n\nexport default function RadioButton({\n name,\n label,\n value,\n checked,\n withoutLabel,\n description,\n disabled,\n controlId,\n onChange,\n}: RadioButtonProps) {\n const isVisualRefresh = useVisualRefresh();\n return (\n <AbstractSwitch\n className={clsx(styles.radio, description && styles['radio--has-description'])}\n controlClassName={styles['radio-control']}\n outlineClassName={styles.outline}\n label={label}\n description={description}\n disabled={disabled}\n controlId={controlId}\n nativeControl={nativeControlProps => (\n <input\n {...nativeControlProps}\n type=\"radio\"\n name={name}\n value={value}\n checked={checked}\n onChange={onChange && (() => fireNonCancelableEvent(onChange, { value }))}\n />\n )}\n styledControl={\n <svg viewBox=\"0 0 100 100\" focusable=\"false\" aria-hidden=\"true\">\n <circle\n className={clsx(styles['styled-circle-border'], { [styles['styled-circle-disabled']]: disabled })}\n strokeWidth={isVisualRefresh ? 12 : 8}\n cx={50}\n cy={50}\n r={isVisualRefresh ? 44 : 46}\n />\n <circle\n className={clsx(styles['styled-circle-fill'], {\n [styles['styled-circle-disabled']]: disabled,\n [styles['styled-circle-checked']]: checked,\n })}\n strokeWidth={30}\n cx={50}\n cy={50}\n r={35}\n />\n </svg>\n }\n withoutLabel={withoutLabel}\n />\n );\n}\n"]}
1
+ {"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/radio-group/radio-button.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,cAAc,MAAM,wCAAwC,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAA6B,MAAM,oBAAoB,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,eAAe,KAAK,CAAC,UAAU,CAAC,SAAS,WAAW,CAClD,EAA6F,EAC7F,GAAgC;;QAD9B,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,OAAO,aAAA,EAAE,WAAW,iBAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA;IAGzE,IAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAC3C,IAAM,cAAc,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACtD,IAAM,UAAU,GAAG,YAAY,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC;IAErD,OAAO,CACL,oBAAC,cAAc,IACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,IAAI,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAC9E,gBAAgB,EAAE,MAAM,CAAC,eAAe,CAAC,EACzC,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAChC,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,UAAA,kBAAkB,IAAI,OAAA,CACnC,0CACM,kBAAkB,IACtB,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,UAAU,EACf,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO;YAChB,0DAA0D;YAC1D,QAAQ,EAAE,cAAO,CAAC,IAClB,CACH,EAXoC,CAWpC,EACD,OAAO,EAAE;;YACP,MAAA,cAAc,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAChC,IAAI,OAAO,EAAE;gBACX,OAAO;aACR;YACD,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;QAC9C,CAAC,EACD,aAAa,EACX,6BAAK,OAAO,EAAC,aAAa,EAAC,SAAS,EAAC,OAAO,iBAAa,MAAM;YAC7D,gCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,YAAI,GAAC,MAAM,CAAC,wBAAwB,CAAC,IAAG,QAAQ,MAAG,EACjG,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EACrC,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAC5B;YACF,gCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC;oBAC1C,GAAC,MAAM,CAAC,wBAAwB,CAAC,IAAG,QAAQ;oBAC5C,GAAC,MAAM,CAAC,uBAAuB,CAAC,IAAG,OAAO;wBAC1C,EACF,WAAW,EAAE,EAAE,EACf,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,EAAE,GACL,CACE,GAER,CACH,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { RadioGroupProps } from './interfaces';\nimport styles from './styles.css.js';\n\ninterface RadioButtonProps extends RadioGroupProps.RadioButtonDefinition {\n name: string;\n checked: boolean;\n onChange?: NonCancelableEventHandler<RadioGroupProps.ChangeDetail>;\n}\n\nexport default React.forwardRef(function RadioButton(\n { name, label, value, checked, description, disabled, controlId, onChange }: RadioButtonProps,\n ref: React.Ref<HTMLInputElement>\n) {\n const isVisualRefresh = useVisualRefresh();\n const radioButtonRef = useRef<HTMLInputElement>(null);\n const mergedRefs = useMergeRefs(radioButtonRef, ref);\n\n return (\n <AbstractSwitch\n className={clsx(styles.radio, description && styles['radio--has-description'])}\n controlClassName={styles['radio-control']}\n outlineClassName={styles.outline}\n label={label}\n description={description}\n disabled={disabled}\n controlId={controlId}\n nativeControl={nativeControlProps => (\n <input\n {...nativeControlProps}\n type=\"radio\"\n ref={mergedRefs}\n name={name}\n value={value}\n checked={checked}\n // empty handler to suppress React controllability warning\n onChange={() => {}}\n />\n )}\n onClick={() => {\n radioButtonRef.current?.focus();\n if (checked) {\n return;\n }\n fireNonCancelableEvent(onChange, { value });\n }}\n styledControl={\n <svg viewBox=\"0 0 100 100\" focusable=\"false\" aria-hidden=\"true\">\n <circle\n className={clsx(styles['styled-circle-border'], { [styles['styled-circle-disabled']]: disabled })}\n strokeWidth={isVisualRefresh ? 12 : 8}\n cx={50}\n cy={50}\n r={isVisualRefresh ? 44 : 46}\n />\n <circle\n className={clsx(styles['styled-circle-fill'], {\n [styles['styled-circle-disabled']]: disabled,\n [styles['styled-circle-checked']]: checked,\n })}\n strokeWidth={30}\n cx={50}\n cy={50}\n r={35}\n />\n </svg>\n }\n />\n );\n});\n"]}
package/select/parts/trigger.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"trigger.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,+BAA+B,EAAE,MAAM,2CAA2C,CAAC;AAG5F,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,MAAM,WAAW,YAAa,SAAQ,+BAA+B;IACnE,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,kBAAkB,CAAC;IACjC,cAAc,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,OAAO,wFA8DZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"trigger.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,+BAA+B,EAAE,MAAM,2CAA2C,CAAC;AAG5F,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzD,MAAM,WAAW,YAAa,SAAQ,+BAA+B;IACnE,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,kBAAkB,CAAC;IACjC,cAAc,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,OAAO,wFAiEZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
package/select/parts/trigger.js CHANGED
@@ -7,7 +7,8 @@ import clsx from 'clsx';
7
7
  import ButtonTrigger from '../../internal/components/button-trigger';
8
8
  import styles from './styles.css.js';
9
9
  import Option from '../../internal/components/option';
10
- import { generateUniqueId } from '../../internal/hooks/use-unique-id';
10
+ import { generateUniqueId, useUniqueId } from '../../internal/hooks/use-unique-id';
11
+ import ScreenreaderOnly from '../../internal/components/screenreader-only';
11
12
  var Trigger = React.forwardRef(function (_a, ref) {
12
13
  var ariaLabelledby = _a.ariaLabelledby, ariaDescribedby = _a.ariaDescribedby, controlId = _a.controlId, invalid = _a.invalid, triggerProps = _a.triggerProps, selectedOption = _a.selectedOption, triggerVariant = _a.triggerVariant, inFilteringToken = _a.inFilteringToken, isOpen = _a.isOpen, placeholder = _a.placeholder, disabled = _a.disabled, ariaLabel = _a.ariaLabel;
13
14
  var id = useMemo(function () { return controlId !== null && controlId !== void 0 ? controlId : generateUniqueId(); }, [controlId]);
@@ -22,7 +23,12 @@ var Trigger = React.forwardRef(function (_a, ref) {
22
23
  triggerContent = (React.createElement("span", { id: triggerProps.ariaLabelledby, className: styles.trigger }, selectedOption.label || selectedOption.value));
23
24
  }
24
25
  var mergedRef = useMergeRefs(triggerProps.ref, ref);
25
- return (React.createElement(ButtonTrigger, __assign({}, triggerProps, { id: id, ref: mergedRef, pressed: isOpen, disabled: disabled, invalid: invalid, inFilteringToken: inFilteringToken, ariaLabel: ariaLabel, ariaDescribedby: ariaDescribedby, ariaLabelledby: [ariaLabelledby, triggerProps.ariaLabelledby].filter(function (label) { return !!label; }).join(' ') }), triggerContent));
26
+ var calendarDescriptionId = useUniqueId('select-arialabel-');
27
+ return (React.createElement(ButtonTrigger, __assign({}, triggerProps, { id: id, ref: mergedRef, pressed: isOpen, disabled: disabled, invalid: invalid, inFilteringToken: inFilteringToken, ariaDescribedby: ariaDescribedby, ariaLabelledby: [ariaLabelledby, calendarDescriptionId, triggerProps.ariaLabelledby]
28
+ .filter(function (label) { return !!label; })
29
+ .join(' ') }),
30
+ triggerContent,
31
+ React.createElement(ScreenreaderOnly, { id: calendarDescriptionId }, ariaLabel)));
26
32
  });
27
33
  export default Trigger;
28
34
  //# sourceMappingURL=trigger.js.map
package/select/parts/trigger.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"trigger.js","sourceRoot":"","sources":["../../../../src/select/parts/trigger.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,aAAa,MAAM,0CAA0C,CAAC;AAErE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AActE,IAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAC9B,UACE,EAae,EACf,GAAiC;QAb/B,cAAc,oBAAA,EACd,eAAe,qBAAA,EACf,SAAS,eAAA,EACT,OAAO,aAAA,EACP,YAAY,kBAAA,EACZ,cAAc,oBAAA,EACd,cAAc,oBAAA,EACd,gBAAgB,sBAAA,EAChB,MAAM,YAAA,EACN,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,SAAS,eAAA;IAIX,IAAM,EAAE,GAAG,OAAO,CAAC,cAAM,OAAA,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,gBAAgB,EAAE,EAA/B,CAA+B,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEvE,IAAI,cAAc,GAAG,IAAI,CAAC;IAC1B,IAAI,CAAC,cAAc,EAAE;QACnB,cAAc,GAAG,CACf,+CACgB,MAAM,EACpB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,EACnD,EAAE,EAAE,YAAY,CAAC,cAAc,IAE9B,WAAW,CACP,CACR,CAAC;KACH;SAAM,IAAI,cAAc,KAAK,QAAQ,EAAE;QACtC,cAAc,GAAG,CACf,oBAAC,MAAM,IAAC,EAAE,EAAE,YAAY,CAAC,cAAc,EAAE,MAAM,wBAAO,cAAc,KAAE,QAAQ,UAAA,KAAI,cAAc,EAAE,IAAI,GAAI,CAC3G,CAAC;KACH;SAAM;QACL,cAAc,GAAG,CACf,8BAAM,EAAE,EAAE,YAAY,CAAC,cAAc,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,IAC7D,cAAc,CAAC,KAAK,IAAI,cAAc,CAAC,KAAK,CACxC,CACR,CAAC;KACH;IAED,IAAM,SAAS,GAAG,YAAY,CAAC,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IAEtD,OAAO,CACL,oBAAC,aAAa,eACR,YAAY,IAChB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,cAAc,EAAE,CAAC,cAAc,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,UAAA,KAAK,IAAI,OAAA,CAAC,CAAC,KAAK,EAAP,CAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAE/F,cAAc,CACD,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useMemo } from 'react';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs';\nimport clsx from 'clsx';\nimport ButtonTrigger from '../../internal/components/button-trigger';\nimport { SelectProps } from '../interfaces';\nimport styles from './styles.css.js';\nimport { OptionDefinition } from '../../internal/components/option/interfaces';\nimport { FormFieldValidationControlProps } from '../../internal/context/form-field-context';\nimport Option from '../../internal/components/option';\nimport { generateUniqueId } from '../../internal/hooks/use-unique-id';\nimport { SelectTriggerProps } from '../utils/use-select';\n\nexport interface TriggerProps extends FormFieldValidationControlProps {\n placeholder: string | undefined;\n disabled: boolean | undefined;\n ariaLabel: string | undefined;\n triggerProps: SelectTriggerProps;\n selectedOption: OptionDefinition | null;\n isOpen?: boolean;\n triggerVariant?: SelectProps.TriggerVariant;\n inFilteringToken?: boolean;\n}\n\nconst Trigger = React.forwardRef(\n (\n {\n ariaLabelledby,\n ariaDescribedby,\n controlId,\n invalid,\n triggerProps,\n selectedOption,\n triggerVariant,\n inFilteringToken,\n isOpen,\n placeholder,\n disabled,\n ariaLabel,\n }: TriggerProps,\n ref: React.Ref<HTMLButtonElement>\n ) => {\n const id = useMemo(() => controlId ?? generateUniqueId(), [controlId]);\n\n let triggerContent = null;\n if (!selectedOption) {\n triggerContent = (\n <span\n aria-disabled=\"true\"\n className={clsx(styles.placeholder, styles.trigger)}\n id={triggerProps.ariaLabelledby}\n >\n {placeholder}\n </span>\n );\n } else if (triggerVariant === 'option') {\n triggerContent = (\n <Option id={triggerProps.ariaLabelledby} option={{ ...selectedOption, disabled }} triggerVariant={true} />\n );\n } else {\n triggerContent = (\n <span id={triggerProps.ariaLabelledby} className={styles.trigger}>\n {selectedOption.label || selectedOption.value}\n </span>\n );\n }\n\n const mergedRef = useMergeRefs(triggerProps.ref, ref);\n\n return (\n <ButtonTrigger\n {...triggerProps}\n id={id}\n ref={mergedRef}\n pressed={isOpen}\n disabled={disabled}\n invalid={invalid}\n inFilteringToken={inFilteringToken}\n ariaLabel={ariaLabel}\n ariaDescribedby={ariaDescribedby}\n ariaLabelledby={[ariaLabelledby, triggerProps.ariaLabelledby].filter(label => !!label).join(' ')}\n >\n {triggerContent}\n </ButtonTrigger>\n );\n }\n);\n\nexport default Trigger;\n"]}
1
+ {"version":3,"file":"trigger.js","sourceRoot":"","sources":["../../../../src/select/parts/trigger.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,aAAa,MAAM,0CAA0C,CAAC;AAErE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEnF,OAAO,gBAAgB,MAAM,6CAA6C,CAAC;AAa3E,IAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAC9B,UACE,EAae,EACf,GAAiC;QAb/B,cAAc,oBAAA,EACd,eAAe,qBAAA,EACf,SAAS,eAAA,EACT,OAAO,aAAA,EACP,YAAY,kBAAA,EACZ,cAAc,oBAAA,EACd,cAAc,oBAAA,EACd,gBAAgB,sBAAA,EAChB,MAAM,YAAA,EACN,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,SAAS,eAAA;IAIX,IAAM,EAAE,GAAG,OAAO,CAAC,cAAM,OAAA,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,gBAAgB,EAAE,EAA/B,CAA+B,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEvE,IAAI,cAAc,GAAG,IAAI,CAAC;IAC1B,IAAI,CAAC,cAAc,EAAE;QACnB,cAAc,GAAG,CACf,+CACgB,MAAM,EACpB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,EACnD,EAAE,EAAE,YAAY,CAAC,cAAc,IAE9B,WAAW,CACP,CACR,CAAC;KACH;SAAM,IAAI,cAAc,KAAK,QAAQ,EAAE;QACtC,cAAc,GAAG,CACf,oBAAC,MAAM,IAAC,EAAE,EAAE,YAAY,CAAC,cAAc,EAAE,MAAM,wBAAO,cAAc,KAAE,QAAQ,UAAA,KAAI,cAAc,EAAE,IAAI,GAAI,CAC3G,CAAC;KACH;SAAM;QACL,cAAc,GAAG,CACf,8BAAM,EAAE,EAAE,YAAY,CAAC,cAAc,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,IAC7D,cAAc,CAAC,KAAK,IAAI,cAAc,CAAC,KAAK,CACxC,CACR,CAAC;KACH;IAED,IAAM,SAAS,GAAG,YAAY,CAAC,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IACtD,IAAM,qBAAqB,GAAG,WAAW,CAAC,mBAAmB,CAAC,CAAC;IAE/D,OAAO,CACL,oBAAC,aAAa,eACR,YAAY,IAChB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,eAAe,EAAE,eAAe,EAChC,cAAc,EAAE,CAAC,cAAc,EAAE,qBAAqB,EAAE,YAAY,CAAC,cAAc,CAAC;aACjF,MAAM,CAAC,UAAA,KAAK,IAAI,OAAA,CAAC,CAAC,KAAK,EAAP,CAAO,CAAC;aACxB,IAAI,CAAC,GAAG,CAAC;QAEX,cAAc;QACf,oBAAC,gBAAgB,IAAC,EAAE,EAAE,qBAAqB,IAAG,SAAS,CAAoB,CAC7D,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useMemo } from 'react';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs';\nimport clsx from 'clsx';\nimport ButtonTrigger from '../../internal/components/button-trigger';\nimport { SelectProps } from '../interfaces';\nimport styles from './styles.css.js';\nimport { OptionDefinition } from '../../internal/components/option/interfaces';\nimport { FormFieldValidationControlProps } from '../../internal/context/form-field-context';\nimport Option from '../../internal/components/option';\nimport { generateUniqueId, useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { SelectTriggerProps } from '../utils/use-select';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only';\n\nexport interface TriggerProps extends FormFieldValidationControlProps {\n placeholder: string | undefined;\n disabled: boolean | undefined;\n ariaLabel: string | undefined;\n triggerProps: SelectTriggerProps;\n selectedOption: OptionDefinition | null;\n isOpen?: boolean;\n triggerVariant?: SelectProps.TriggerVariant;\n inFilteringToken?: boolean;\n}\n\nconst Trigger = React.forwardRef(\n (\n {\n ariaLabelledby,\n ariaDescribedby,\n controlId,\n invalid,\n triggerProps,\n selectedOption,\n triggerVariant,\n inFilteringToken,\n isOpen,\n placeholder,\n disabled,\n ariaLabel,\n }: TriggerProps,\n ref: React.Ref<HTMLButtonElement>\n ) => {\n const id = useMemo(() => controlId ?? generateUniqueId(), [controlId]);\n\n let triggerContent = null;\n if (!selectedOption) {\n triggerContent = (\n <span\n aria-disabled=\"true\"\n className={clsx(styles.placeholder, styles.trigger)}\n id={triggerProps.ariaLabelledby}\n >\n {placeholder}\n </span>\n );\n } else if (triggerVariant === 'option') {\n triggerContent = (\n <Option id={triggerProps.ariaLabelledby} option={{ ...selectedOption, disabled }} triggerVariant={true} />\n );\n } else {\n triggerContent = (\n <span id={triggerProps.ariaLabelledby} className={styles.trigger}>\n {selectedOption.label || selectedOption.value}\n </span>\n );\n }\n\n const mergedRef = useMergeRefs(triggerProps.ref, ref);\n const calendarDescriptionId = useUniqueId('select-arialabel-');\n\n return (\n <ButtonTrigger\n {...triggerProps}\n id={id}\n ref={mergedRef}\n pressed={isOpen}\n disabled={disabled}\n invalid={invalid}\n inFilteringToken={inFilteringToken}\n ariaDescribedby={ariaDescribedby}\n ariaLabelledby={[ariaLabelledby, calendarDescriptionId, triggerProps.ariaLabelledby]\n .filter(label => !!label)\n .join(' ')}\n >\n {triggerContent}\n <ScreenreaderOnly id={calendarDescriptionId}>{ariaLabel}</ScreenreaderOnly>\n </ButtonTrigger>\n );\n }\n);\n\nexport default Trigger;\n"]}
package/table/selection-control/index.js CHANGED
@@ -46,7 +46,7 @@ export default function SelectionControl(_a) {
46
46
  // Clicking on input, does not focus it on Firefox (AWSUI-11345)
47
47
  nativeInput === null || nativeInput === void 0 ? void 0 : nativeInput.focus();
48
48
  };
49
- var selector = isMultiSelection ? (React.createElement(InternalCheckbox, __assign({}, sharedProps, { controlId: controlId, withoutLabel: true, indeterminate: indeterminate }))) : (React.createElement(RadioButton, __assign({}, sharedProps, { controlId: controlId, withoutLabel: true, name: name, value: '', label: '' })));
49
+ var selector = isMultiSelection ? (React.createElement(InternalCheckbox, __assign({}, sharedProps, { controlId: controlId, indeterminate: indeterminate }))) : (React.createElement(RadioButton, __assign({}, sharedProps, { controlId: controlId, name: name, value: '', label: '' })));
50
50
  return (React.createElement(React.Fragment, null,
51
51
  React.createElement("label", { onKeyDown: handleKeyDown, onKeyUp: setShiftState, onMouseDown: onMouseDownHandler, onMouseUp: setShiftState, onClick: handleClick, htmlFor: controlId, className: clsx(styles.label, styles.root), "aria-label": ariaLabel }, selector),
52
52
  React.createElement("span", { className: clsx(styles.stud), "aria-hidden": true }, "\u00A0")));
package/table/selection-control/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/selection-control/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { KeyboardEvent, KeyboardEventHandler, MouseEvent } from 'react';\nimport { KeyCode } from '../../internal/keycode';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport InternalCheckbox from '../../checkbox/internal';\nimport RadioButton from '../../radio-group/radio-button';\n\nimport { TableProps } from '../interfaces';\nimport styles from './styles.css.js';\n\nexport interface SelectionControlProps {\n selectionType: TableProps['selectionType'];\n checked: boolean;\n disabled: boolean;\n name: string;\n indeterminate?: boolean;\n onChange?: () => void;\n onShiftToggle?(shiftPressed: boolean): void;\n onFocusUp?: KeyboardEventHandler;\n onFocusDown?: KeyboardEventHandler;\n ariaLabel?: string;\n tabIndex?: -1;\n}\n\nexport default function SelectionControl({\n selectionType,\n indeterminate = false,\n onShiftToggle,\n onFocusUp,\n onFocusDown,\n name,\n ariaLabel,\n ...sharedProps\n}: SelectionControlProps) {\n const controlId = useUniqueId();\n const isMultiSelection = selectionType === 'multi';\n\n const setShiftState = (event: KeyboardEvent | MouseEvent) => {\n if (isMultiSelection) {\n onShiftToggle && onShiftToggle(event.shiftKey);\n }\n };\n\n const onMouseDownHandler = (event: MouseEvent) => {\n setShiftState(event);\n if (isMultiSelection) {\n // To overcome an issue\n // If you shift+click or ctrl+click on a label for a checkbox, checkbox is not checked.\n // https://bugzilla.mozilla.org/show_bug.cgi?id=559506\n event.preventDefault();\n }\n };\n\n // native checkboxes do not have focus move via keyboard, we implement it here programmatically\n const handleKeyDown = (event: KeyboardEvent) => {\n setShiftState(event);\n if (isMultiSelection) {\n if (event.keyCode === KeyCode.up) {\n event.preventDefault();\n onFocusUp && onFocusUp(event);\n }\n if (event.keyCode === KeyCode.down) {\n event.preventDefault();\n onFocusDown && onFocusDown(event);\n }\n }\n };\n\n const handleClick = (event: MouseEvent) => {\n const target = event.currentTarget;\n const nativeInput = (target.tagName === 'INPUT' ? target : target.querySelector('input')) as HTMLInputElement;\n // Clicking on input, does not focus it on Firefox (AWSUI-11345)\n nativeInput?.focus();\n };\n\n const selector = isMultiSelection ? (\n <InternalCheckbox {...sharedProps} controlId={controlId} withoutLabel={true} indeterminate={indeterminate} />\n ) : (\n <RadioButton {...sharedProps} controlId={controlId} withoutLabel={true} name={name} value={''} label={''} />\n );\n\n return (\n <>\n <label\n onKeyDown={handleKeyDown}\n onKeyUp={setShiftState}\n onMouseDown={onMouseDownHandler}\n onMouseUp={setShiftState}\n onClick={handleClick}\n htmlFor={controlId}\n className={clsx(styles.label, styles.root)}\n aria-label={ariaLabel}\n >\n {selector}\n </label>\n {/* HACK: IE11 collapses td's height to 0, if it contains only an absouletely positioned label */}\n <span className={clsx(styles.stud)} aria-hidden={true}>\n &nbsp;\n </span>\n </>\n );\n}\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/selection-control/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { KeyboardEvent, KeyboardEventHandler, MouseEvent } from 'react';\nimport { KeyCode } from '../../internal/keycode';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport InternalCheckbox from '../../checkbox/internal';\nimport RadioButton from '../../radio-group/radio-button';\n\nimport { TableProps } from '../interfaces';\nimport styles from './styles.css.js';\n\nexport interface SelectionControlProps {\n selectionType: TableProps['selectionType'];\n checked: boolean;\n disabled: boolean;\n name: string;\n indeterminate?: boolean;\n onChange?: () => void;\n onShiftToggle?(shiftPressed: boolean): void;\n onFocusUp?: KeyboardEventHandler;\n onFocusDown?: KeyboardEventHandler;\n ariaLabel?: string;\n tabIndex?: -1;\n}\n\nexport default function SelectionControl({\n selectionType,\n indeterminate = false,\n onShiftToggle,\n onFocusUp,\n onFocusDown,\n name,\n ariaLabel,\n ...sharedProps\n}: SelectionControlProps) {\n const controlId = useUniqueId();\n const isMultiSelection = selectionType === 'multi';\n\n const setShiftState = (event: KeyboardEvent | MouseEvent) => {\n if (isMultiSelection) {\n onShiftToggle && onShiftToggle(event.shiftKey);\n }\n };\n\n const onMouseDownHandler = (event: MouseEvent) => {\n setShiftState(event);\n if (isMultiSelection) {\n // To overcome an issue\n // If you shift+click or ctrl+click on a label for a checkbox, checkbox is not checked.\n // https://bugzilla.mozilla.org/show_bug.cgi?id=559506\n event.preventDefault();\n }\n };\n\n // native checkboxes do not have focus move via keyboard, we implement it here programmatically\n const handleKeyDown = (event: KeyboardEvent) => {\n setShiftState(event);\n if (isMultiSelection) {\n if (event.keyCode === KeyCode.up) {\n event.preventDefault();\n onFocusUp && onFocusUp(event);\n }\n if (event.keyCode === KeyCode.down) {\n event.preventDefault();\n onFocusDown && onFocusDown(event);\n }\n }\n };\n\n const handleClick = (event: MouseEvent) => {\n const target = event.currentTarget;\n const nativeInput = (target.tagName === 'INPUT' ? target : target.querySelector('input')) as HTMLInputElement;\n // Clicking on input, does not focus it on Firefox (AWSUI-11345)\n nativeInput?.focus();\n };\n\n const selector = isMultiSelection ? (\n <InternalCheckbox {...sharedProps} controlId={controlId} indeterminate={indeterminate} />\n ) : (\n <RadioButton {...sharedProps} controlId={controlId} name={name} value={''} label={''} />\n );\n\n return (\n <>\n <label\n onKeyDown={handleKeyDown}\n onKeyUp={setShiftState}\n onMouseDown={onMouseDownHandler}\n onMouseUp={setShiftState}\n onClick={handleClick}\n htmlFor={controlId}\n className={clsx(styles.label, styles.root)}\n aria-label={ariaLabel}\n >\n {selector}\n </label>\n {/* HACK: IE11 collapses td's height to 0, if it contains only an absouletely positioned label */}\n <span className={clsx(styles.stud)} aria-hidden={true}>\n &nbsp;\n </span>\n </>\n );\n}\n"]}
package/tiles/internal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/tiles/internal.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAO1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAKlF,aAAK,kBAAkB,GAAG,UAAU,GAAG,0BAA0B,CAAC;AAElE,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,KAAK,EACL,SAAS,EACT,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,iBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,kBAAkB,eA0EpB"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/tiles/internal.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAMlF,aAAK,kBAAkB,GAAG,UAAU,GAAG,0BAA0B,CAAC;AAElE,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,KAAK,EACL,SAAS,EACT,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,iBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,kBAAkB,eAiDpB"}
package/tiles/internal.js CHANGED
@@ -4,12 +4,12 @@ import { __assign, __rest } from "tslib";
4
4
  import clsx from 'clsx';
5
5
  import React from 'react';
6
6
  import { getBaseProps } from '../internal/base-component';
7
- import RadioButton from '../radio-group/radio-button';
8
7
  import styles from './styles.css.js';
9
8
  import { useFormFieldContext } from '../internal/context/form-field-context';
10
9
  import { useUniqueId } from '../internal/hooks/use-unique-id';
11
10
  import { useContainerBreakpoints } from '../internal/hooks/container-queries';
12
11
  import { useMergeRefs } from '../internal/hooks/use-merge-refs';
12
+ import { Tile } from './tile';
13
13
  var COLUMN_TRIGGERS = ['default', 'xxs', 'xs'];
14
14
  export default function InternalTiles(_a) {
15
15
  var value = _a.value, items = _a.items, ariaLabel = _a.ariaLabel, ariaRequired = _a.ariaRequired, columns = _a.columns, onChange = _a.onChange, _b = _a.__internalRootRef, __internalRootRef = _b === void 0 ? null : _b, rest = __rest(_a, ["value", "items", "ariaLabel", "ariaRequired", "columns", "onChange", "__internalRootRef"]);
@@ -35,13 +35,6 @@ export default function InternalTiles(_a) {
35
35
  var mergedRef = useMergeRefs(ref, __internalRootRef);
36
36
  return (React.createElement("div", __assign({ role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired }, baseProps, { className: clsx(baseProps.className, styles.root), ref: mergedRef }),
37
37
  React.createElement("div", { className: clsx(styles.columns, styles["column-".concat(nColumns)]) }, items &&
38
- items.map(function (item) {
39
- var _a, _b, _c, _d, _e;
40
- var controlId = item.controlId || "".concat(generatedName, "-value-").concat(item.value);
41
- return (React.createElement("label", { className: clsx(styles['tile-container'], (_a = {}, _a[styles['has-metadata']] = item.description || item.image, _a), (_b = {}, _b[styles.selected] = item.value === value, _b), (_c = {}, _c[styles.disabled] = !!item.disabled, _c), styles["breakpoint-".concat(breakpoint)]), key: item.value, "data-value": item.value, htmlFor: controlId, id: "".concat(controlId, "-wrapper") },
42
- React.createElement("div", { className: clsx(styles.control, (_d = {}, _d[styles['no-image']] = !item.image, _d)) },
43
- React.createElement(RadioButton, { checked: item.value === value, name: generatedName, withoutLabel: true, value: item.value, label: item.label, description: item.description, disabled: item.disabled, onChange: onChange, controlId: controlId })),
44
- item.image && (React.createElement("div", { className: clsx(styles.image, (_e = {}, _e[styles.disabled] = !!item.disabled, _e)) }, item.image))));
45
- }))));
38
+ items.map(function (item) { return (React.createElement(Tile, { key: item.value, item: item, selected: item.value === value, name: generatedName, breakpoint: breakpoint, onChange: onChange })); }))));
46
39
  }
47
40
  //# sourceMappingURL=internal.js.map
package/tiles/internal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/tiles/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 clsx from 'clsx';\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { TilesProps } from './interfaces';\nimport RadioButton from '../radio-group/radio-button';\nimport styles from './styles.css.js';\n\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nconst COLUMN_TRIGGERS: TilesProps.Breakpoint[] = ['default', 'xxs', 'xs'];\n\ntype InternalTilesProps = TilesProps & InternalBaseComponentProps;\n\nexport default function InternalTiles({\n value,\n items,\n ariaLabel,\n ariaRequired,\n columns,\n onChange,\n __internalRootRef = null,\n ...rest\n}: InternalTilesProps) {\n const getColumns = () => {\n if (columns) {\n return columns;\n }\n\n const nItems = items ? items.length : 0;\n const columnsLookup: Record<number, number> = {\n 0: 1,\n 1: 1,\n 2: 2,\n 4: 2,\n 8: 2,\n };\n return columnsLookup[nItems] || 3;\n };\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n const baseProps = getBaseProps(rest);\n const generatedName = useUniqueId('awsui-tiles-');\n const nColumns = getColumns();\n const [breakpoint, ref] = useContainerBreakpoints(COLUMN_TRIGGERS);\n const mergedRef = useMergeRefs(ref, __internalRootRef);\n\n return (\n <div\n role=\"radiogroup\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n aria-required={ariaRequired}\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={mergedRef}\n >\n <div className={clsx(styles.columns, styles[`column-${nColumns}`])}>\n {items &&\n items.map(item => {\n const controlId = item.controlId || `${generatedName}-value-${item.value}`;\n return (\n <label\n className={clsx(\n styles['tile-container'],\n { [styles['has-metadata']]: item.description || item.image },\n { [styles.selected]: item.value === value },\n { [styles.disabled]: !!item.disabled },\n styles[`breakpoint-${breakpoint}`]\n )}\n key={item.value}\n data-value={item.value}\n htmlFor={controlId}\n id={`${controlId}-wrapper`}\n >\n <div className={clsx(styles.control, { [styles['no-image']]: !item.image })}>\n <RadioButton\n checked={item.value === value}\n name={generatedName}\n withoutLabel={true}\n value={item.value}\n label={item.label}\n description={item.description}\n disabled={item.disabled}\n onChange={onChange}\n controlId={controlId}\n />\n </div>\n {item.image && (\n <div className={clsx(styles.image, { [styles.disabled]: !!item.disabled })}>{item.image}</div>\n )}\n </label>\n );\n })}\n </div>\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/tiles/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,IAAM,eAAe,GAA4B,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;AAI1E,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EASjB;IARnB,IAAA,KAAK,WAAA,EACL,KAAK,WAAA,EACL,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,yBAAwB,EAAxB,iBAAiB,mBAAG,IAAI,KAAA,EACrB,IAAI,cAR6B,2FASrC,CADQ;IAEP,IAAM,UAAU,GAAG;QACjB,IAAI,OAAO,EAAE;YACX,OAAO,OAAO,CAAC;SAChB;QAED,IAAM,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QACxC,IAAM,aAAa,GAA2B;YAC5C,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;SACL,CAAC;QACF,OAAO,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC,CAAC;IACI,IAAA,KAAsC,mBAAmB,CAAC,IAAI,CAAC,EAA7D,eAAe,qBAAA,EAAE,cAAc,oBAA8B,CAAC;IACtE,IAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,IAAM,aAAa,GAAG,WAAW,CAAC,cAAc,CAAC,CAAC;IAClD,IAAM,QAAQ,GAAG,UAAU,EAAE,CAAC;IACxB,IAAA,KAAoB,uBAAuB,CAAC,eAAe,CAAC,EAA3D,UAAU,QAAA,EAAE,GAAG,QAA4C,CAAC;IACnE,IAAM,SAAS,GAAG,YAAY,CAAC,GAAG,EAAE,iBAAiB,CAAC,CAAC;IAEvD,OAAO,CACL,sCACE,IAAI,EAAC,YAAY,gBACL,SAAS,qBACJ,cAAc,sBACb,eAAe,mBAClB,YAAY,IACvB,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EACjD,GAAG,EAAE,SAAS;QAEd,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,iBAAU,QAAQ,CAAE,CAAC,CAAC,IAC/D,KAAK;YACJ,KAAK,CAAC,GAAG,CAAC,UAAA,IAAI,IAAI,OAAA,CAChB,oBAAC,IAAI,IACH,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,KAAK,EAC9B,IAAI,EAAE,aAAa,EACnB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,GAClB,CACH,EATiB,CASjB,CAAC,CACA,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { TilesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { Tile } from './tile';\n\nconst COLUMN_TRIGGERS: TilesProps.Breakpoint[] = ['default', 'xxs', 'xs'];\n\ntype InternalTilesProps = TilesProps & InternalBaseComponentProps;\n\nexport default function InternalTiles({\n value,\n items,\n ariaLabel,\n ariaRequired,\n columns,\n onChange,\n __internalRootRef = null,\n ...rest\n}: InternalTilesProps) {\n const getColumns = () => {\n if (columns) {\n return columns;\n }\n\n const nItems = items ? items.length : 0;\n const columnsLookup: Record<number, number> = {\n 0: 1,\n 1: 1,\n 2: 2,\n 4: 2,\n 8: 2,\n };\n return columnsLookup[nItems] || 3;\n };\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n const baseProps = getBaseProps(rest);\n const generatedName = useUniqueId('awsui-tiles-');\n const nColumns = getColumns();\n const [breakpoint, ref] = useContainerBreakpoints(COLUMN_TRIGGERS);\n const mergedRef = useMergeRefs(ref, __internalRootRef);\n\n return (\n <div\n role=\"radiogroup\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n aria-required={ariaRequired}\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={mergedRef}\n >\n <div className={clsx(styles.columns, styles[`column-${nColumns}`])}>\n {items &&\n items.map(item => (\n <Tile\n key={item.value}\n item={item}\n selected={item.value === value}\n name={generatedName}\n breakpoint={breakpoint}\n onChange={onChange}\n />\n ))}\n </div>\n </div>\n );\n}\n"]}
package/tiles/tile.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { TilesProps } from './interfaces';
2
+ import { useContainerBreakpoints } from '../internal/hooks/container-queries';
3
+ interface TileProps {
4
+ item: TilesProps.TilesDefinition;
5
+ selected: boolean;
6
+ name: string;
7
+ breakpoint: ReturnType<typeof useContainerBreakpoints>[0];
8
+ onChange: TilesProps['onChange'];
9
+ }
10
+ export declare function Tile({ item, selected, name, breakpoint, onChange }: TileProps): JSX.Element;
11
+ export {};
12
+ //# sourceMappingURL=tile.d.ts.map
package/tiles/tile.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAG9E,UAAU,SAAS;IACjB,IAAI,EAAE,UAAU,CAAC,eAAe,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;CAClC;AAED,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,SAAS,eAuC7E"}
package/tiles/tile.js ADDED
@@ -0,0 +1,27 @@
1
+ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
+ // SPDX-License-Identifier: Apache-2.0
3
+ import clsx from 'clsx';
4
+ import React, { useRef } from 'react';
5
+ import RadioButton from '../radio-group/radio-button';
6
+ import styles from './styles.css.js';
7
+ import { fireNonCancelableEvent } from '../internal/events';
8
+ export function Tile(_a) {
9
+ var _b, _c, _d, _e, _f;
10
+ var item = _a.item, selected = _a.selected, name = _a.name, breakpoint = _a.breakpoint, onChange = _a.onChange;
11
+ var radioButtonRef = useRef(null);
12
+ var controlId = item.controlId || "".concat(name, "-value-").concat(item.value);
13
+ return (React.createElement("div", { className: clsx(styles['tile-container'], (_b = {}, _b[styles['has-metadata']] = item.description || item.image, _b), (_c = {}, _c[styles.selected] = selected, _c), (_d = {}, _d[styles.disabled] = !!item.disabled, _d), styles["breakpoint-".concat(breakpoint)]), "data-value": item.value, onClick: function () {
14
+ var _a;
15
+ if (item.disabled) {
16
+ return;
17
+ }
18
+ (_a = radioButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
19
+ if (!selected) {
20
+ fireNonCancelableEvent(onChange, { value: item.value });
21
+ }
22
+ } },
23
+ React.createElement("div", { className: clsx(styles.control, (_e = {}, _e[styles['no-image']] = !item.image, _e)) },
24
+ React.createElement(RadioButton, { checked: selected, ref: radioButtonRef, name: name, value: item.value, label: item.label, description: item.description, disabled: item.disabled, controlId: controlId })),
25
+ item.image && React.createElement("div", { className: clsx(styles.image, (_f = {}, _f[styles.disabled] = !!item.disabled, _f)) }, item.image)));
26
+ }
27
+ //# sourceMappingURL=tile.js.map
package/tiles/tile.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAU5D,MAAM,UAAU,IAAI,CAAC,EAAyD;;QAAvD,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,IAAI,UAAA,EAAE,UAAU,gBAAA,EAAE,QAAQ,cAAA;IAC/D,IAAM,cAAc,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACtD,IAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,UAAG,IAAI,oBAAU,IAAI,CAAC,KAAK,CAAE,CAAC;IAElE,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,gBAAgB,CAAC,YACtB,GAAC,MAAM,CAAC,cAAc,CAAC,IAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,iBACxD,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ,iBAC3B,GAAC,MAAM,CAAC,QAAQ,IAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,OACpC,MAAM,CAAC,qBAAc,UAAU,CAAE,CAAC,CACnC,gBACW,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE;;YACP,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YACD,MAAA,cAAc,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAChC,IAAI,CAAC,QAAQ,EAAE;gBACb,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;aACzD;QACH,CAAC;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,YAAI,GAAC,MAAM,CAAC,UAAU,CAAC,IAAG,CAAC,IAAI,CAAC,KAAK,MAAG;YACzE,oBAAC,WAAW,IACV,OAAO,EAAE,QAAQ,EACjB,GAAG,EAAE,cAAc,EACnB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,SAAS,GACpB,CACE;QACL,IAAI,CAAC,KAAK,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,YAAI,GAAC,MAAM,CAAC,QAAQ,IAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,MAAG,IAAG,IAAI,CAAC,KAAK,CAAO,CACzG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\n\nimport { TilesProps } from './interfaces';\nimport RadioButton from '../radio-group/radio-button';\nimport styles from './styles.css.js';\n\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { fireNonCancelableEvent } from '../internal/events';\n\ninterface TileProps {\n item: TilesProps.TilesDefinition;\n selected: boolean;\n name: string;\n breakpoint: ReturnType<typeof useContainerBreakpoints>[0];\n onChange: TilesProps['onChange'];\n}\n\nexport function Tile({ item, selected, name, breakpoint, onChange }: TileProps) {\n const radioButtonRef = useRef<HTMLInputElement>(null);\n const controlId = item.controlId || `${name}-value-${item.value}`;\n\n return (\n <div\n className={clsx(\n styles['tile-container'],\n { [styles['has-metadata']]: item.description || item.image },\n { [styles.selected]: selected },\n { [styles.disabled]: !!item.disabled },\n styles[`breakpoint-${breakpoint}`]\n )}\n data-value={item.value}\n onClick={() => {\n if (item.disabled) {\n return;\n }\n radioButtonRef.current?.focus();\n if (!selected) {\n fireNonCancelableEvent(onChange, { value: item.value });\n }\n }}\n >\n <div className={clsx(styles.control, { [styles['no-image']]: !item.image })}>\n <RadioButton\n checked={selected}\n ref={radioButtonRef}\n name={name}\n value={item.value}\n label={item.label}\n description={item.description}\n disabled={item.disabled}\n controlId={controlId}\n />\n </div>\n {item.image && <div className={clsx(styles.image, { [styles.disabled]: !!item.disabled })}>{item.image}</div>}\n </div>\n );\n}\n"]}
package/toggle/internal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,QAAA,MAAM,cAAc,kHAgEnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,QAAA,MAAM,cAAc,kHAsEnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
package/toggle/internal.js CHANGED
@@ -19,7 +19,13 @@ var InternalToggle = React.forwardRef(function (_a, ref) {
19
19
  return (React.createElement(AbstractSwitch, __assign({}, baseProps, { className: clsx(styles.root, baseProps.className), controlClassName: clsx(styles['toggle-control'], (_b = {},
20
20
  _b[styles['toggle-control-checked']] = checked,
21
21
  _b[styles['toggle-control-disabled']] = disabled,
22
- _b)), outlineClassName: styles.outline, controlId: controlId, disabled: disabled, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, nativeControl: function (nativeControlProps) { return (React.createElement("input", __assign({}, nativeControlProps, { ref: checkboxRef, type: "checkbox", checked: checked, name: name, onFocus: onFocus && (function () { return fireNonCancelableEvent(onFocus); }), onBlur: onBlur && (function () { return fireNonCancelableEvent(onBlur); }), onChange: onChange && (function (event) { return fireNonCancelableEvent(onChange, { checked: event.target.checked }); }) }))); }, styledControl:
22
+ _b)), outlineClassName: styles.outline, controlId: controlId, disabled: disabled, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, nativeControl: function (nativeControlProps) { return (React.createElement("input", __assign({}, nativeControlProps, { ref: checkboxRef, type: "checkbox", checked: checked, name: name, onFocus: function () { return fireNonCancelableEvent(onFocus); }, onBlur: function () { return fireNonCancelableEvent(onBlur); },
23
+ // empty handler to suppress React controllability warning
24
+ onChange: function () { } }))); }, onClick: function () {
25
+ var _a;
26
+ (_a = checkboxRef.current) === null || _a === void 0 ? void 0 : _a.focus();
27
+ fireNonCancelableEvent(onChange, { checked: !checked });
28
+ }, styledControl:
23
29
  /*Using span, not div for HTML validity*/
24
30
  React.createElement("span", { className: clsx(styles['toggle-handle'], (_c = {},
25
31
  _c[styles['toggle-handle-checked']] = checked,