@aws-amplify/ui 6.0.2 → 6.0.4

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 (24) hide show
  1. package/dist/esm/machines/authenticator/actors/signUp.mjs +2 -2
  2. package/dist/esm/machines/authenticator/index.mjs +17 -6
  3. package/dist/esm/machines/authenticator/utils.mjs +2 -1
  4. package/dist/esm/theme/tokens/components/button.mjs +15 -105
  5. package/dist/esm/theme/tokens/components/checkbox.mjs +4 -18
  6. package/dist/esm/theme/tokens/components/fieldControl.mjs +63 -20
  7. package/dist/esm/theme/tokens/components/sliderField.mjs +1 -9
  8. package/dist/esm/theme/tokens/components/switchField.mjs +1 -7
  9. package/dist/index.js +105 -168
  10. package/dist/styles/base.css +31 -26
  11. package/dist/styles/base.layer.css +31 -26
  12. package/dist/styles/input.css +1 -0
  13. package/dist/styles/input.layer.css +1 -0
  14. package/dist/styles/liveness.css +1 -1
  15. package/dist/styles/liveness.layer.css +1 -1
  16. package/dist/styles/select.css +1 -0
  17. package/dist/styles/select.layer.css +1 -0
  18. package/dist/styles/textArea.css +1 -0
  19. package/dist/styles/textArea.layer.css +1 -0
  20. package/dist/styles.css +35 -27
  21. package/dist/styles.layer.css +35 -27
  22. package/dist/theme.css +31 -26
  23. package/dist/types/theme/tokens/components/fieldControl.d.ts +13 -1
  24. package/package.json +3 -2
package/dist/esm/machines/authenticator/actors/signUp.mjs CHANGED
@@ -270,13 +270,13 @@ function signUpActor({ services }) {
270
270
  async federatedSignIn(_, { data }) {
271
271
  return signInWithRedirect(data);
272
272
  },
273
- async handleSignUp(context, _event) {
273
+ async handleSignUp(context) {
274
274
  const { formValues, loginMechanisms, username } = context;
275
275
  const loginMechanism = loginMechanisms[0];
276
276
  const input = getSignUpInput(username, formValues, loginMechanism);
277
277
  return services.handleSignUp(input);
278
278
  },
279
- async validateSignUp(context, _event) {
279
+ async validateSignUp(context) {
280
280
  // This needs to exist in the machine to reference new `services`
281
281
  return runValidators(context.formValues, context.touched, context.passwordSettings, [
282
282
  // Validation of password
package/dist/esm/machines/authenticator/index.mjs CHANGED
@@ -34,6 +34,7 @@ const LEGACY_WAIT_CONFIG = {
34
34
  actions: ['configure'],
35
35
  target: 'getConfig',
36
36
  },
37
+ SIGN_OUT: '#authenticator.signOut',
37
38
  },
38
39
  };
39
40
  // setup step proceeds directly to configure
@@ -59,7 +60,7 @@ function createAuthenticatorMachine(options) {
59
60
  idle: {
60
61
  invoke: {
61
62
  src: 'handleGetCurrentUser',
62
- onDone: { actions: 'setUser', target: 'authenticated' },
63
+ onDone: { actions: 'setUser', target: 'setup' },
63
64
  onError: { target: 'setup' },
64
65
  },
65
66
  },
@@ -70,10 +71,17 @@ function createAuthenticatorMachine(options) {
70
71
  getConfig: {
71
72
  invoke: {
72
73
  src: 'getAmplifyConfig',
73
- onDone: {
74
- actions: ['applyAmplifyConfig', 'setHasSetup'],
75
- target: 'goToInitialState',
76
- },
74
+ onDone: [
75
+ {
76
+ actions: ['applyAmplifyConfig', 'setHasSetup'],
77
+ cond: 'hasUser',
78
+ target: '#authenticator.authenticated',
79
+ },
80
+ {
81
+ actions: ['applyAmplifyConfig', 'setHasSetup'],
82
+ target: 'goToInitialState',
83
+ },
84
+ ],
77
85
  },
78
86
  },
79
87
  goToInitialState: {
@@ -332,7 +340,7 @@ function createAuthenticatorMachine(options) {
332
340
  configure: assign((_, event) => {
333
341
  const { services: customServices, ...config } = !isEmptyObject(overrideConfigServices)
334
342
  ? overrideConfigServices
335
- : event.data;
343
+ : event.data ?? {};
336
344
  return {
337
345
  services: { ...defaultServices, ...customServices },
338
346
  config,
@@ -346,6 +354,9 @@ function createAuthenticatorMachine(options) {
346
354
  isInitialStateSignUp: ({ config }) => config.initialState === 'signUp',
347
355
  isInitialStateResetPassword: ({ config }) => config.initialState === 'forgotPassword',
348
356
  shouldSetup: ({ hasSetup }) => !hasSetup,
357
+ hasUser: ({ user }) => {
358
+ return !!user;
359
+ },
349
360
  },
350
361
  services: {
351
362
  getAmplifyConfig: ({ services }) => services.getAmplifyConfig(),
package/dist/esm/machines/authenticator/utils.mjs CHANGED
@@ -5,6 +5,7 @@ import { isString } from '../../utils/utils.mjs';
5
5
 
6
6
  // default `autoSignIn` flag is `true`
7
7
  const DEFAULT_AUTO_SIGN_IN = true;
8
+ const EMPTY_STRING = '';
8
9
  const sanitizePhoneNumber = (dialCode, phoneNumber) => `${dialCode}${phoneNumber}`.replace(/[^A-Z0-9+]/gi, '');
9
10
  const selectUserAttributes = (_, key) => {
10
11
  // Allowlist of Cognito User Pool Attributes (from OpenID Connect specification)
@@ -36,7 +37,7 @@ const selectUserAttributes = (_, key) => {
36
37
  const getUserAttributes = (formValues) => {
37
38
  const { phone_number, ...userAttributes } = pickBy(formValues, selectUserAttributes);
38
39
  // only include `phone_number` attribute in `userAttributes` if it has a value
39
- if (isString(phone_number)) {
40
+ if (isString(phone_number) && phone_number !== EMPTY_STRING) {
40
41
  const { country_code } = formValues;
41
42
  return {
42
43
  ...userAttributes,
package/dist/esm/theme/tokens/components/button.mjs CHANGED
@@ -66,13 +66,7 @@ const button = {
66
66
  backgroundColor: { value: '{colors.blue.10.value}' },
67
67
  color: { value: '{colors.blue.100.value}' },
68
68
  boxShadow: {
69
- value: {
70
- offsetX: '0px',
71
- offsetY: '0px',
72
- blurRadius: '0px',
73
- spreadRadius: '1px',
74
- color: '{colors.blue.100.value}',
75
- },
69
+ value: '{components.fieldcontrol.info._focus.boxShadow.value}',
76
70
  },
77
71
  },
78
72
  _active: {
@@ -95,13 +89,7 @@ const button = {
95
89
  backgroundColor: { value: '{colors.orange.10.value}' },
96
90
  color: { value: '{colors.orange.100.value}' },
97
91
  boxShadow: {
98
- value: {
99
- offsetX: '0px',
100
- offsetY: '0px',
101
- blurRadius: '0px',
102
- spreadRadius: '1px',
103
- color: '{colors.orange.100.value}',
104
- },
92
+ value: '{components.fieldcontrol.warning._focus.boxShadow.value}',
105
93
  },
106
94
  },
107
95
  _active: {
@@ -124,13 +112,7 @@ const button = {
124
112
  backgroundColor: { value: '{colors.green.10.value}' },
125
113
  color: { value: '{colors.green.100.value}' },
126
114
  boxShadow: {
127
- value: {
128
- offsetX: '0px',
129
- offsetY: '0px',
130
- blurRadius: '0px',
131
- spreadRadius: '1px',
132
- color: '{colors.green.100.value}',
133
- },
115
+ value: '{components.fieldcontrol.success._focus.boxShadow.value}',
134
116
  },
135
117
  },
136
118
  _active: {
@@ -153,13 +135,7 @@ const button = {
153
135
  backgroundColor: { value: '{colors.red.10.value}' },
154
136
  color: { value: '{colors.red.100.value}' },
155
137
  boxShadow: {
156
- value: {
157
- offsetX: '0px',
158
- offsetY: '0px',
159
- blurRadius: '0px',
160
- spreadRadius: '1px',
161
- color: '{colors.red.100.value}',
162
- },
138
+ value: '{components.fieldcontrol._error._focus.boxShadow.value}',
163
139
  },
164
140
  },
165
141
  _active: {
@@ -182,13 +158,7 @@ const button = {
182
158
  backgroundColor: { value: '{colors.overlay.5.value}' },
183
159
  color: { value: '{colors.neutral.90.value}' },
184
160
  boxShadow: {
185
- value: {
186
- offsetX: '0px',
187
- offsetY: '0px',
188
- blurRadius: '0px',
189
- spreadRadius: '1px',
190
- color: '{colors.overlay.90.value}',
191
- },
161
+ value: '{components.fieldcontrol.overlay._focus.boxShadow.value}',
192
162
  },
193
163
  },
194
164
  _active: {
@@ -244,13 +214,7 @@ const button = {
244
214
  backgroundColor: { value: '{colors.blue.90.value}' },
245
215
  color: { value: '{colors.font.inverse.value}' },
246
216
  boxShadow: {
247
- value: {
248
- offsetX: '0px',
249
- offsetY: '0px',
250
- blurRadius: '0px',
251
- spreadRadius: '1px',
252
- color: '{colors.blue.100.value}',
253
- },
217
+ value: '{components.fieldcontrol.info._focus.boxShadow.value}',
254
218
  },
255
219
  },
256
220
  _active: {
@@ -273,13 +237,7 @@ const button = {
273
237
  backgroundColor: { value: '{colors.orange.90.value}' },
274
238
  color: { value: '{colors.font.inverse.value}' },
275
239
  boxShadow: {
276
- value: {
277
- offsetX: '0px',
278
- offsetY: '0px',
279
- blurRadius: '0px',
280
- spreadRadius: '1px',
281
- color: '{colors.orange.100.value}',
282
- },
240
+ value: '{components.fieldcontrol.overlay._focus.boxShadow.value}',
283
241
  },
284
242
  },
285
243
  _active: {
@@ -302,13 +260,7 @@ const button = {
302
260
  backgroundColor: { value: '{colors.red.90.value}' },
303
261
  color: { value: '{colors.font.inverse.value}' },
304
262
  boxShadow: {
305
- value: {
306
- offsetX: '0px',
307
- offsetY: '0px',
308
- blurRadius: '0px',
309
- spreadRadius: '1px',
310
- color: '{colors.red.100.value}',
311
- },
263
+ value: '{components.fieldcontrol._error._focus.boxShadow.value}',
312
264
  },
313
265
  },
314
266
  _active: {
@@ -331,13 +283,7 @@ const button = {
331
283
  backgroundColor: { value: '{colors.green.90.value}' },
332
284
  color: { value: '{colors.font.inverse.value}' },
333
285
  boxShadow: {
334
- value: {
335
- offsetX: '0px',
336
- offsetY: '0px',
337
- blurRadius: '0px',
338
- spreadRadius: '1px',
339
- color: '{colors.green.100.value}',
340
- },
286
+ value: '{components.fieldcontrol.success._focus.boxShadow.value}',
341
287
  },
342
288
  },
343
289
  _active: {
@@ -360,13 +306,7 @@ const button = {
360
306
  backgroundColor: { value: '{colors.overlay.90.value}' },
361
307
  color: { value: '{colors.font.inverse.value}' },
362
308
  boxShadow: {
363
- value: {
364
- offsetX: '0px',
365
- offsetY: '0px',
366
- blurRadius: '0px',
367
- spreadRadius: '1px',
368
- color: '{colors.overlay.90.value}',
369
- },
309
+ value: '{components.fieldcontrol.overlay._focus.boxShadow.value}',
370
310
  },
371
311
  },
372
312
  _active: {
@@ -444,13 +384,7 @@ const button = {
444
384
  backgroundColor: { value: '{colors.blue.10.value}' },
445
385
  color: { value: '{colors.blue.100.value}' },
446
386
  boxShadow: {
447
- value: {
448
- offsetX: '0px',
449
- offsetY: '0px',
450
- blurRadius: '0px',
451
- spreadRadius: '1px',
452
- color: '{colors.blue.100.value}',
453
- },
387
+ value: '{components.fieldcontrol.info._focus.boxShadow.value}',
454
388
  },
455
389
  },
456
390
  _active: {
@@ -473,13 +407,7 @@ const button = {
473
407
  backgroundColor: { value: '{colors.orange.10.value}' },
474
408
  color: { value: '{colors.orange.100.value}' },
475
409
  boxShadow: {
476
- value: {
477
- offsetX: '0px',
478
- offsetY: '0px',
479
- blurRadius: '0px',
480
- spreadRadius: '1px',
481
- color: '{colors.orange.100.value}',
482
- },
410
+ value: '{components.fieldcontrol.warning._focus.boxShadow.value}',
483
411
  },
484
412
  },
485
413
  _active: {
@@ -502,13 +430,7 @@ const button = {
502
430
  backgroundColor: { value: '{colors.green.10.value}' },
503
431
  color: { value: '{colors.green.100.value}' },
504
432
  boxShadow: {
505
- value: {
506
- offsetX: '0px',
507
- offsetY: '0px',
508
- blurRadius: '0px',
509
- spreadRadius: '1px',
510
- color: '{colors.green.100.value}',
511
- },
433
+ value: '{components.fieldcontrol.success._focus.boxShadow.value}',
512
434
  },
513
435
  },
514
436
  _active: {
@@ -531,13 +453,7 @@ const button = {
531
453
  backgroundColor: { value: '{colors.red.10.value}' },
532
454
  color: { value: '{colors.red.100.value}' },
533
455
  boxShadow: {
534
- value: {
535
- offsetX: '0px',
536
- offsetY: '0px',
537
- blurRadius: '0px',
538
- spreadRadius: '1px',
539
- color: '{colors.red.100.value}',
540
- },
456
+ value: '{components.fieldcontrol._error._focus.boxShadow.value}',
541
457
  },
542
458
  },
543
459
  _active: {
@@ -560,13 +476,7 @@ const button = {
560
476
  backgroundColor: { value: '{colors.overlay.5.value}' },
561
477
  color: { value: '{colors.overlay.90.value}' },
562
478
  boxShadow: {
563
- value: {
564
- offsetX: '0px',
565
- offsetY: '0px',
566
- blurRadius: '0px',
567
- spreadRadius: '1px',
568
- color: '{colors.overlay.90.value}',
569
- },
479
+ value: '{components.fieldcontrol.overlay._focus.boxShadow.value}',
570
480
  },
571
481
  },
572
482
  _active: {
package/dist/esm/theme/tokens/components/checkbox.mjs CHANGED
@@ -24,16 +24,8 @@ const checkbox = {
24
24
  outlineStyle: { value: 'solid' },
25
25
  outlineWidth: { value: '{outlineWidths.medium.value}' },
26
26
  outlineOffset: { value: '{outlineOffsets.medium.value}' },
27
- borderColor: { value: '{colors.transparent.value}' },
28
- boxShadow: {
29
- value: {
30
- offsetX: '0px',
31
- offsetY: '0px',
32
- blurRadius: '0px',
33
- spreadRadius: '2px',
34
- color: '{colors.border.focus.value}',
35
- },
36
- },
27
+ borderColor: { value: '{colors.border.focus.value}' },
28
+ boxShadow: { value: '{components.fieldcontrol._focus.boxShadow.value}' },
37
29
  },
38
30
  _disabled: {
39
31
  borderColor: { value: '{colors.border.disabled.value}' },
@@ -41,15 +33,9 @@ const checkbox = {
41
33
  _error: {
42
34
  borderColor: { value: '{colors.border.error.value}' },
43
35
  _focus: {
44
- borderColor: { value: '{colors.transparent.value}' },
36
+ borderColor: { value: '{colors.border.error.value}' },
45
37
  boxShadow: {
46
- value: {
47
- offsetX: '0px',
48
- offsetY: '0px',
49
- blurRadius: '0px',
50
- spreadRadius: '2px',
51
- color: '{colors.border.error.value}',
52
- },
38
+ value: '{components.fieldcontrol._error._focus.boxShadow.value}',
53
39
  },
54
40
  },
55
41
  },
package/dist/esm/theme/tokens/components/fieldControl.mjs CHANGED
@@ -60,47 +60,38 @@ const fieldcontrol = {
60
60
  borderBlockStart: { value: 'none' },
61
61
  borderRadius: { value: '0' },
62
62
  _focus: {
63
- borderBlockEndColor: { value: '{colors.border.focus.value}' },
63
+ borderBlockEndColor: { value: 'transparent' },
64
64
  boxShadow: {
65
- value: {
66
- offsetX: '0px',
67
- offsetY: '1px',
68
- color: '{colors.border.focus.value}',
69
- blurRadius: '0px',
70
- },
65
+ value: '{components.fieldcontrol._focus.boxShadow.value}',
71
66
  },
72
67
  },
73
68
  _error: {
74
69
  borderBlockEndColor: { value: '{colors.border.error.value}' },
75
70
  _focus: {
71
+ borderBlockEndColor: { value: 'transparent' },
76
72
  boxShadow: {
77
- value: {
78
- offsetX: '0px',
79
- offsetY: '1px',
80
- color: '{colors.border.error.value}',
81
- blurRadius: '0px',
82
- },
73
+ value: '{components.fieldcontrol._error._focus.boxShadow.value}',
83
74
  },
84
75
  },
85
76
  },
86
77
  },
87
78
  _focus: {
88
79
  // These focus styles have been calibrated to create
89
- // a highly visible focus indicator per WCAG 2.1 guidliness:
90
- // See: https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html
80
+ // a highly visible focus indicator per WCAG 2.2 guidlines:
81
+ // See: https://www.w3.org/TR/WCAG22/#focus-appearance
91
82
  //
92
83
  // Key features:
93
- // * Focus indicator area is at least the 1 CSS px border around the component.
94
- // * Contrast between focused and unfocused states has a ratio of 3:1
84
+ // * Focus indicator area is at least the 2 CSS px perimeter around the component.
85
+ // * Contrast between focused and unfocused area of contrast has a ratio of 3:1
95
86
  //
96
- // IMPORTANT: Must recalibrate if `colors.border.primary` or `colors.focus` are changed
87
+ // IMPORTANT: Must recalibrate if `colors.border.focus` are changed
97
88
  borderColor: { value: '{colors.border.focus.value}' },
98
89
  boxShadow: {
99
90
  value: {
100
91
  offsetX: '0px',
101
92
  offsetY: '0px',
102
93
  blurRadius: '0px',
103
- spreadRadius: '1px',
94
+ spreadRadius: '2px',
104
95
  color: '{colors.border.focus.value}',
105
96
  },
106
97
  },
@@ -120,12 +111,64 @@ const fieldcontrol = {
120
111
  offsetX: '0px',
121
112
  offsetY: '0px',
122
113
  blurRadius: '0px',
123
- spreadRadius: '1px',
114
+ spreadRadius: '2px',
124
115
  color: '{colors.border.error.value}',
125
116
  },
126
117
  },
127
118
  },
128
119
  },
120
+ info: {
121
+ _focus: {
122
+ boxShadow: {
123
+ value: {
124
+ offsetX: '0px',
125
+ offsetY: '0px',
126
+ blurRadius: '0px',
127
+ spreadRadius: '2px',
128
+ color: '{colors.blue.100.value}',
129
+ },
130
+ },
131
+ },
132
+ },
133
+ warning: {
134
+ _focus: {
135
+ boxShadow: {
136
+ value: {
137
+ offsetX: '0px',
138
+ offsetY: '0px',
139
+ blurRadius: '0px',
140
+ spreadRadius: '2px',
141
+ color: '{colors.orange.100.value}',
142
+ },
143
+ },
144
+ },
145
+ },
146
+ success: {
147
+ _focus: {
148
+ boxShadow: {
149
+ value: {
150
+ offsetX: '0px',
151
+ offsetY: '0px',
152
+ blurRadius: '0px',
153
+ spreadRadius: '2px',
154
+ color: '{colors.green.100.value}',
155
+ },
156
+ },
157
+ },
158
+ },
159
+ overlay: {
160
+ _focus: {
161
+ boxShadow: {
162
+ value: {
163
+ offsetX: '0px',
164
+ offsetY: '0px',
165
+ blurRadius: '0px',
166
+ spreadRadius: '2px',
167
+ color: '{colors.overlay.90.value}',
168
+ },
169
+ },
170
+ },
171
+ },
129
172
  };
130
173
 
131
174
  export { fieldcontrol };
package/dist/esm/theme/tokens/components/sliderField.mjs CHANGED
@@ -36,15 +36,7 @@ const sliderfield = {
36
36
  },
37
37
  _focus: {
38
38
  borderColor: { value: '{colors.border.focus.value}' },
39
- boxShadow: {
40
- value: {
41
- offsetX: '0',
42
- offsetY: '0',
43
- blurRadius: '0',
44
- spreadRadius: '2px',
45
- color: '{colors.border.focus.value}',
46
- },
47
- },
39
+ boxShadow: { value: '{components.fieldcontrol._focus.boxShadow.value}' },
48
40
  },
49
41
  },
50
42
  small: {
package/dist/esm/theme/tokens/components/switchField.mjs CHANGED
@@ -5,13 +5,7 @@ const switchfield = {
5
5
  },
6
6
  _focused: {
7
7
  shadow: {
8
- value: {
9
- offsetX: '0px',
10
- offsetY: '0px',
11
- blurRadius: '0px',
12
- spreadRadius: '2px',
13
- color: '{colors.border.focus.value}',
14
- },
8
+ value: '{components.fieldcontrol._focus.boxShadow.value}',
15
9
  },
16
10
  },
17
11
  // Sizes