@aws-amplify/ui-react 6.1.4 → 6.1.6

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 (15) hide show
  1. package/dist/esm/components/Authenticator/VerifyUser/VerifyUser.mjs +9 -15
  2. package/dist/esm/components/Authenticator/shared/FormField.mjs +2 -2
  3. package/dist/esm/primitives/Checkbox/Checkbox.mjs +1 -1
  4. package/dist/esm/version.mjs +1 -1
  5. package/dist/index.js +12 -18
  6. package/dist/styles/base.css +1 -0
  7. package/dist/styles/base.layer.css +1 -0
  8. package/dist/styles/checkbox.css +4 -1
  9. package/dist/styles/checkbox.layer.css +4 -1
  10. package/dist/styles/liveness.css +1 -1
  11. package/dist/styles/liveness.layer.css +1 -1
  12. package/dist/styles.css +6 -2
  13. package/dist/styles.layer.css +6 -2
  14. package/dist/types/version.d.ts +1 -1
  15. package/package.json +3 -3
package/dist/esm/components/Authenticator/VerifyUser/VerifyUser.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import React__default from 'react';
2
- import { authenticatorTextUtil, defaultFormFieldOptions, translate, censorPhoneNumber, censorAllButFirstAndLast } from '@aws-amplify/ui';
2
+ import { authenticatorTextUtil, defaultFormFieldOptions, translate, censorContactMethod } from '@aws-amplify/ui';
3
3
  import { Flex } from '../../../primitives/Flex/Flex.mjs';
4
4
  import { Heading } from '../../../primitives/Heading/Heading.mjs';
5
5
  import { Radio } from '../../../primitives/Radio/Radio.mjs';
@@ -12,21 +12,15 @@ import { TwoButtonSubmitFooter } from '../shared/TwoButtonSubmitFooter.mjs';
12
12
  import { RouteContainer } from '../RouteContainer/RouteContainer.mjs';
13
13
 
14
14
  const { getSkipText, getVerifyText, getVerifyContactText, getAccountRecoveryInfoText, } = authenticatorTextUtil;
15
- const censorContactInformation = (type, value) => {
16
- const translated = translate(type);
17
- let newVal = value;
18
- if (type === 'Phone Number') {
19
- newVal = censorPhoneNumber(value);
20
- }
21
- else if (type === 'Email') {
22
- const splitEmail = value.split('@');
23
- const censoredName = censorAllButFirstAndLast(splitEmail[0]);
24
- newVal = `${censoredName}@${splitEmail[1]}`;
25
- }
26
- return `${translated}: ${newVal}`;
27
- };
28
15
  const generateRadioGroup = (attributes) => {
29
- return Object.entries(attributes).map(([key, value]) => (React__default.createElement(Radio, { name: "unverifiedAttr", value: key, key: key }, censorContactInformation(defaultFormFieldOptions[key].label, value))));
16
+ return Object.entries(attributes).map(([key, value]) => {
17
+ const verificationType = defaultFormFieldOptions[key].label;
18
+ return (React__default.createElement(Radio, { name: "unverifiedAttr", value: key, key: key },
19
+ translate(verificationType),
20
+ ":",
21
+ ' ',
22
+ censorContactMethod(verificationType, value)));
23
+ });
30
24
  };
31
25
  const VerifyUser = ({ className, variation, }) => {
32
26
  const { components: {
package/dist/esm/components/Authenticator/shared/FormField.mjs CHANGED
@@ -22,12 +22,12 @@ function FormField({ autocomplete: autoComplete, dialCode, name, type, ...props
22
22
  }
23
23
  else if (type === 'password') {
24
24
  return (React.createElement(React.Fragment, null,
25
- React.createElement(PasswordField, { ...props, name: name, autoComplete: autoComplete, hasError: hasError, "aria-describedby": ariaDescribedBy }),
25
+ React.createElement(PasswordField, { ...props, name: name, autoCapitalize: "off", autoComplete: autoComplete, hasError: hasError, "aria-describedby": ariaDescribedBy }),
26
26
  React.createElement(ValidationErrors, { dataAttr: "data-amplify-sign-up-errors", errors: errors, id: errorId })));
27
27
  }
28
28
  else {
29
29
  return (React.createElement(React.Fragment, null,
30
- React.createElement(TextField, { ...props, name: name, autoComplete: autoComplete, hasError: hasError, type: type, "aria-describedby": ariaDescribedBy }),
30
+ React.createElement(TextField, { ...props, name: name, autoCapitalize: "off", autoComplete: autoComplete, hasError: hasError, type: type, "aria-describedby": ariaDescribedBy }),
31
31
  React.createElement(ValidationErrors, { dataAttr: "data-amplify-sign-up-errors", errors: errors, id: errorId })));
32
32
  }
33
33
  }
package/dist/esm/primitives/Checkbox/Checkbox.mjs CHANGED
@@ -73,7 +73,7 @@ const CheckboxPrimitive = ({ checked: controlledChecked, className, defaultCheck
73
73
  return (React.createElement(Flex, { as: "label", className: classNames(ComponentClassName.Checkbox, classNameModifierByFlag(ComponentClassName.Checkbox, 'disabled', shouldBeDisabled), labelPosition ? `amplify-label-${labelPosition}` : null, className), testId: testId, ...styleProps },
74
74
  React.createElement(VisuallyHidden, null,
75
75
  React.createElement(Input, { checked: controlledChecked, className: ComponentClassName.CheckboxInput, "data-id": dataId, defaultChecked: defaultChecked, isDisabled: shouldBeDisabled, onBlur: onBlur, onChange: onChange, onFocus: onFocus, ref: ref, type: "checkbox", ...rest })),
76
- label && (React.createElement(Text, { as: "span", className: classNames(ComponentClassName.CheckboxLabel, {
76
+ label && (React.createElement(Text, { as: "span", className: classNames(ComponentClassName.CheckboxLabel, classNameModifierByFlag(ComponentClassName.CheckboxLabel, `disabled`, shouldBeDisabled), {
77
77
  [ComponentClassName.VisuallyHidden]: labelHidden,
78
78
  }), "data-disabled": shouldBeDisabled, testId: labelTestId }, label)),
79
79
  React.createElement(Flex, { "aria-hidden": "true", as: "span", className: flexClasses, "data-checked": checked, "data-disabled": shouldBeDisabled, "data-focus": focused, "data-error": hasError, testId: buttonTestId, ...inputStyles }, isIndeterminate ? indeterminateIcon : checkedIcon)));
package/dist/esm/version.mjs CHANGED
@@ -1,3 +1,3 @@
1
- const VERSION = '6.1.4';
1
+ const VERSION = '6.1.6';
2
2
 
3
3
  export { VERSION };
package/dist/index.js CHANGED
@@ -791,7 +791,7 @@ const CheckboxPrimitive = ({ checked: controlledChecked, className, defaultCheck
791
791
  return (React__namespace.createElement(Field.Flex, { as: "label", className: ui.classNames(ui.ComponentClassName.Checkbox, ui.classNameModifierByFlag(ui.ComponentClassName.Checkbox, 'disabled', shouldBeDisabled), labelPosition ? `amplify-label-${labelPosition}` : null, className), testId: testId, ...styleProps },
792
792
  React__namespace.createElement(VisuallyHidden, null,
793
793
  React__namespace.createElement(Input, { checked: controlledChecked, className: ui.ComponentClassName.CheckboxInput, "data-id": dataId, defaultChecked: defaultChecked, isDisabled: shouldBeDisabled, onBlur: onBlur, onChange: onChange, onFocus: onFocus, ref: ref, type: "checkbox", ...rest })),
794
- label && (React__namespace.createElement(Field.Text, { as: "span", className: ui.classNames(ui.ComponentClassName.CheckboxLabel, {
794
+ label && (React__namespace.createElement(Field.Text, { as: "span", className: ui.classNames(ui.ComponentClassName.CheckboxLabel, ui.classNameModifierByFlag(ui.ComponentClassName.CheckboxLabel, `disabled`, shouldBeDisabled), {
795
795
  [ui.ComponentClassName.VisuallyHidden]: labelHidden,
796
796
  }), "data-disabled": shouldBeDisabled, testId: labelTestId }, label)),
797
797
  React__namespace.createElement(Field.Flex, { "aria-hidden": "true", as: "span", className: flexClasses, "data-checked": checked, "data-disabled": shouldBeDisabled, "data-focus": focused, "data-error": hasError, testId: buttonTestId, ...inputStyles }, isIndeterminate ? indeterminateIcon : checkedIcon)));
@@ -2383,7 +2383,7 @@ const defaultDeleteUserDisplayText = {
2383
2383
  warningText: 'Deleting your account is not reversible. You will lose access to your account and all data associated with it.',
2384
2384
  };
2385
2385
 
2386
- const VERSION = '6.1.4';
2386
+ const VERSION = '6.1.6';
2387
2387
 
2388
2388
  const logger$2 = ui.getLogger('AccountSettings');
2389
2389
  const getIsDisabled = (formValues, validationError) => {
@@ -2715,12 +2715,12 @@ function FormField({ autocomplete: autoComplete, dialCode, name, type, ...props
2715
2715
  }
2716
2716
  else if (type === 'password') {
2717
2717
  return (React__namespace.createElement(React__namespace.Fragment, null,
2718
- React__namespace.createElement(PasswordField, { ...props, name: name, autoComplete: autoComplete, hasError: hasError, "aria-describedby": ariaDescribedBy }),
2718
+ React__namespace.createElement(PasswordField, { ...props, name: name, autoCapitalize: "off", autoComplete: autoComplete, hasError: hasError, "aria-describedby": ariaDescribedBy }),
2719
2719
  React__namespace.createElement(ValidationErrors, { dataAttr: "data-amplify-sign-up-errors", errors: errors, id: errorId })));
2720
2720
  }
2721
2721
  else {
2722
2722
  return (React__namespace.createElement(React__namespace.Fragment, null,
2723
- React__namespace.createElement(TextField, { ...props, name: name, autoComplete: autoComplete, hasError: hasError, type: type, "aria-describedby": ariaDescribedBy }),
2723
+ React__namespace.createElement(TextField, { ...props, name: name, autoCapitalize: "off", autoComplete: autoComplete, hasError: hasError, type: type, "aria-describedby": ariaDescribedBy }),
2724
2724
  React__namespace.createElement(ValidationErrors, { dataAttr: "data-amplify-sign-up-errors", errors: errors, id: errorId })));
2725
2725
  }
2726
2726
  }
@@ -3080,21 +3080,15 @@ ConfirmVerifyUser.Footer = function Footer() {
3080
3080
  };
3081
3081
 
3082
3082
  const { getSkipText, getVerifyText, getVerifyContactText, getAccountRecoveryInfoText, } = ui.authenticatorTextUtil;
3083
- const censorContactInformation = (type, value) => {
3084
- const translated = ui.translate(type);
3085
- let newVal = value;
3086
- if (type === 'Phone Number') {
3087
- newVal = ui.censorPhoneNumber(value);
3088
- }
3089
- else if (type === 'Email') {
3090
- const splitEmail = value.split('@');
3091
- const censoredName = ui.censorAllButFirstAndLast(splitEmail[0]);
3092
- newVal = `${censoredName}@${splitEmail[1]}`;
3093
- }
3094
- return `${translated}: ${newVal}`;
3095
- };
3096
3083
  const generateRadioGroup = (attributes) => {
3097
- return Object.entries(attributes).map(([key, value]) => (React__default["default"].createElement(Radio, { name: "unverifiedAttr", value: key, key: key }, censorContactInformation(ui.defaultFormFieldOptions[key].label, value))));
3084
+ return Object.entries(attributes).map(([key, value]) => {
3085
+ const verificationType = ui.defaultFormFieldOptions[key].label;
3086
+ return (React__default["default"].createElement(Radio, { name: "unverifiedAttr", value: key, key: key },
3087
+ ui.translate(verificationType),
3088
+ ":",
3089
+ ' ',
3090
+ ui.censorContactMethod(verificationType, value)));
3091
+ });
3098
3092
  };
3099
3093
  const VerifyUser = ({ className, variation, }) => {
3100
3094
  const { components: {
package/dist/styles/base.css CHANGED
@@ -512,6 +512,7 @@
512
512
  --amplify-components-checkbox-icon-indeterminate-opacity: var(--amplify-opacities-100);
513
513
  --amplify-components-checkbox-icon-indeterminate-transform: scale(1);
514
514
  --amplify-components-checkbox-icon-indeterminate-disabled-background-color: var(--amplify-colors-background-disabled);
515
+ --amplify-components-checkbox-label-color: var(--amplify-components-text-color);
515
516
  --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
516
517
  --amplify-components-checkboxfield-align-items: flex-start;
517
518
  --amplify-components-checkboxfield-align-content: center;
package/dist/styles/base.layer.css CHANGED
@@ -513,6 +513,7 @@
513
513
  --amplify-components-checkbox-icon-indeterminate-opacity: var(--amplify-opacities-100);
514
514
  --amplify-components-checkbox-icon-indeterminate-transform: scale(1);
515
515
  --amplify-components-checkbox-icon-indeterminate-disabled-background-color: var(--amplify-colors-background-disabled);
516
+ --amplify-components-checkbox-label-color: var(--amplify-components-text-color);
516
517
  --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
517
518
  --amplify-components-checkboxfield-align-items: flex-start;
518
519
  --amplify-components-checkboxfield-align-content: center;
package/dist/styles/checkbox.css CHANGED
@@ -91,5 +91,8 @@
91
91
  }
92
92
 
93
93
  .amplify-checkbox__label {
94
- color: inherit;
94
+ color: var(--amplify-components-checkbox-label-color);
95
+ }
96
+ .amplify-checkbox__label--disabled {
97
+ color: var(--amplify-components-checkbox-label-disabled-color);
95
98
  }
package/dist/styles/checkbox.layer.css CHANGED
@@ -92,6 +92,9 @@
92
92
  }
93
93
 
94
94
  .amplify-checkbox__label {
95
- color: inherit;
95
+ color: var(--amplify-components-checkbox-label-color);
96
+ }
97
+ .amplify-checkbox__label--disabled {
98
+ color: var(--amplify-components-checkbox-label-disabled-color);
96
99
  }
97
100
  }
package/dist/styles/liveness.css CHANGED
@@ -282,7 +282,7 @@
282
282
 
283
283
  .amplify-liveness-landscape-error-modal {
284
284
  background-color: var(--amplify-colors-background-primary);
285
- direction: column;
285
+ flex-direction: column;
286
286
  text-align: center;
287
287
  align-items: center;
288
288
  justify-content: center;
package/dist/styles/liveness.layer.css CHANGED
@@ -283,7 +283,7 @@
283
283
 
284
284
  .amplify-liveness-landscape-error-modal {
285
285
  background-color: var(--amplify-colors-background-primary);
286
- direction: column;
286
+ flex-direction: column;
287
287
  text-align: center;
288
288
  align-items: center;
289
289
  justify-content: center;
package/dist/styles.css CHANGED
@@ -512,6 +512,7 @@
512
512
  --amplify-components-checkbox-icon-indeterminate-opacity: var(--amplify-opacities-100);
513
513
  --amplify-components-checkbox-icon-indeterminate-transform: scale(1);
514
514
  --amplify-components-checkbox-icon-indeterminate-disabled-background-color: var(--amplify-colors-background-disabled);
515
+ --amplify-components-checkbox-label-color: var(--amplify-components-text-color);
515
516
  --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
516
517
  --amplify-components-checkboxfield-align-items: flex-start;
517
518
  --amplify-components-checkboxfield-align-content: center;
@@ -3668,7 +3669,10 @@ strong.amplify-text {
3668
3669
  }
3669
3670
 
3670
3671
  .amplify-checkbox__label {
3671
- color: inherit;
3672
+ color: var(--amplify-components-checkbox-label-color);
3673
+ }
3674
+ .amplify-checkbox__label--disabled {
3675
+ color: var(--amplify-components-checkbox-label-disabled-color);
3672
3676
  }
3673
3677
 
3674
3678
  .amplify-checkboxfield {
@@ -4201,7 +4205,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4201
4205
 
4202
4206
  .amplify-liveness-landscape-error-modal {
4203
4207
  background-color: var(--amplify-colors-background-primary);
4204
- direction: column;
4208
+ flex-direction: column;
4205
4209
  text-align: center;
4206
4210
  align-items: center;
4207
4211
  justify-content: center;
package/dist/styles.layer.css CHANGED
@@ -513,6 +513,7 @@
513
513
  --amplify-components-checkbox-icon-indeterminate-opacity: var(--amplify-opacities-100);
514
514
  --amplify-components-checkbox-icon-indeterminate-transform: scale(1);
515
515
  --amplify-components-checkbox-icon-indeterminate-disabled-background-color: var(--amplify-colors-background-disabled);
516
+ --amplify-components-checkbox-label-color: var(--amplify-components-text-color);
516
517
  --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
517
518
  --amplify-components-checkboxfield-align-items: flex-start;
518
519
  --amplify-components-checkboxfield-align-content: center;
@@ -3669,7 +3670,10 @@ strong.amplify-text {
3669
3670
  }
3670
3671
 
3671
3672
  .amplify-checkbox__label {
3672
- color: inherit;
3673
+ color: var(--amplify-components-checkbox-label-color);
3674
+ }
3675
+ .amplify-checkbox__label--disabled {
3676
+ color: var(--amplify-components-checkbox-label-disabled-color);
3673
3677
  }
3674
3678
 
3675
3679
  .amplify-checkboxfield {
@@ -4202,7 +4206,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4202
4206
 
4203
4207
  .amplify-liveness-landscape-error-modal {
4204
4208
  background-color: var(--amplify-colors-background-primary);
4205
- direction: column;
4209
+ flex-direction: column;
4206
4210
  text-align: center;
4207
4211
  align-items: center;
4208
4212
  justify-content: center;
package/dist/types/version.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const VERSION = "6.1.4";
1
+ export declare const VERSION = "6.1.6";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui-react",
3
- "version": "6.1.4",
3
+ "version": "6.1.6",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {
@@ -49,8 +49,8 @@
49
49
  "typecheck": "tsc --noEmit"
50
50
  },
51
51
  "dependencies": {
52
- "@aws-amplify/ui": "6.0.10",
53
- "@aws-amplify/ui-react-core": "3.0.10",
52
+ "@aws-amplify/ui": "6.0.12",
53
+ "@aws-amplify/ui-react-core": "3.0.12",
54
54
  "@radix-ui/react-direction": "1.0.0",
55
55
  "@radix-ui/react-dropdown-menu": "1.0.0",
56
56
  "@radix-ui/react-slider": "1.0.0",