@aws-amplify/ui-react 6.1.4 → 6.1.5

package/dist/esm/components/Authenticator/VerifyUser/VerifyUser.mjs

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { authenticatorTextUtil, defaultFormFieldOptions, translate, censorPhoneNumber, censorAllButFirstAndLast } from '@aws-amplify/ui';
+import { authenticatorTextUtil, defaultFormFieldOptions, translate, censorContactMethod } from '@aws-amplify/ui';
 import { Flex } from '../../../primitives/Flex/Flex.mjs';
 import { Heading } from '../../../primitives/Heading/Heading.mjs';
 import { Radio } from '../../../primitives/Radio/Radio.mjs';
@@ -12,21 +12,15 @@ import { TwoButtonSubmitFooter } from '../shared/TwoButtonSubmitFooter.mjs';
 import { RouteContainer } from '../RouteContainer/RouteContainer.mjs';
 
 const { getSkipText, getVerifyText, getVerifyContactText, getAccountRecoveryInfoText, } = authenticatorTextUtil;
-const censorContactInformation = (type, value) => {
-    const translated = translate(type);
-    let newVal = value;
-    if (type === 'Phone Number') {
-        newVal = censorPhoneNumber(value);
-    }
-    else if (type === 'Email') {
-        const splitEmail = value.split('@');
-        const censoredName = censorAllButFirstAndLast(splitEmail[0]);
-        newVal = `${censoredName}@${splitEmail[1]}`;
-    }
-    return `${translated}: ${newVal}`;
-};
 const generateRadioGroup = (attributes) => {
-    return Object.entries(attributes).map(([key, value]) => (React__default.createElement(Radio, { name: "unverifiedAttr", value: key, key: key }, censorContactInformation(defaultFormFieldOptions[key].label, value))));
+    return Object.entries(attributes).map(([key, value]) => {
+        const verificationType = defaultFormFieldOptions[key].label;
+        return (React__default.createElement(Radio, { name: "unverifiedAttr", value: key, key: key },
+            translate(verificationType),
+            ":",
+            ' ',
+            censorContactMethod(verificationType, value)));
+    });
 };
 const VerifyUser = ({ className, variation, }) => {
     const { components: { 

package/dist/esm/primitives/Checkbox/Checkbox.mjs

@@ -73,7 +73,7 @@ const CheckboxPrimitive = ({ checked: controlledChecked, className, defaultCheck
     return (React.createElement(Flex, { as: "label", className: classNames(ComponentClassName.Checkbox, classNameModifierByFlag(ComponentClassName.Checkbox, 'disabled', shouldBeDisabled), labelPosition ? `amplify-label-${labelPosition}` : null, className), testId: testId, ...styleProps },
         React.createElement(VisuallyHidden, null,
             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 })),
-        label && (React.createElement(Text, { as: "span", className: classNames(ComponentClassName.CheckboxLabel, {
+        label && (React.createElement(Text, { as: "span", className: classNames(ComponentClassName.CheckboxLabel, classNameModifierByFlag(ComponentClassName.CheckboxLabel, `disabled`, shouldBeDisabled), {
                 [ComponentClassName.VisuallyHidden]: labelHidden,
             }), "data-disabled": shouldBeDisabled, testId: labelTestId }, label)),
         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

@@ -1,3 +1,3 @@
-const VERSION = '6.1.4';
+const VERSION = '6.1.5';
 
 export { VERSION };

package/dist/index.js

@@ -791,7 +791,7 @@ const CheckboxPrimitive = ({ checked: controlledChecked, className, defaultCheck
     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 },
         React__namespace.createElement(VisuallyHidden, null,
             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 })),
-        label && (React__namespace.createElement(Field.Text, { as: "span", className: ui.classNames(ui.ComponentClassName.CheckboxLabel, {
+        label && (React__namespace.createElement(Field.Text, { as: "span", className: ui.classNames(ui.ComponentClassName.CheckboxLabel, ui.classNameModifierByFlag(ui.ComponentClassName.CheckboxLabel, `disabled`, shouldBeDisabled), {
                 [ui.ComponentClassName.VisuallyHidden]: labelHidden,
             }), "data-disabled": shouldBeDisabled, testId: labelTestId }, label)),
         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 = {
     warningText: 'Deleting your account is not reversible. You will lose access to your account and all data associated with it.',
 };
 
-const VERSION = '6.1.4';
+const VERSION = '6.1.5';
 
 const logger$2 = ui.getLogger('AccountSettings');
 const getIsDisabled = (formValues, validationError) => {
@@ -3080,21 +3080,15 @@ ConfirmVerifyUser.Footer = function Footer() {
 };
 
 const { getSkipText, getVerifyText, getVerifyContactText, getAccountRecoveryInfoText, } = ui.authenticatorTextUtil;
-const censorContactInformation = (type, value) => {
-    const translated = ui.translate(type);
-    let newVal = value;
-    if (type === 'Phone Number') {
-        newVal = ui.censorPhoneNumber(value);
-    }
-    else if (type === 'Email') {
-        const splitEmail = value.split('@');
-        const censoredName = ui.censorAllButFirstAndLast(splitEmail[0]);
-        newVal = `${censoredName}@${splitEmail[1]}`;
-    }
-    return `${translated}: ${newVal}`;
-};
 const generateRadioGroup = (attributes) => {
-    return Object.entries(attributes).map(([key, value]) => (React__default["default"].createElement(Radio, { name: "unverifiedAttr", value: key, key: key }, censorContactInformation(ui.defaultFormFieldOptions[key].label, value))));
+    return Object.entries(attributes).map(([key, value]) => {
+        const verificationType = ui.defaultFormFieldOptions[key].label;
+        return (React__default["default"].createElement(Radio, { name: "unverifiedAttr", value: key, key: key },
+            ui.translate(verificationType),
+            ":",
+            ' ',
+            ui.censorContactMethod(verificationType, value)));
+    });
 };
 const VerifyUser = ({ className, variation, }) => {
     const { components: { 

package/dist/styles/base.css

@@ -512,6 +512,7 @@
   --amplify-components-checkbox-icon-indeterminate-opacity: var(--amplify-opacities-100);
   --amplify-components-checkbox-icon-indeterminate-transform: scale(1);
   --amplify-components-checkbox-icon-indeterminate-disabled-background-color: var(--amplify-colors-background-disabled);
+  --amplify-components-checkbox-label-color: var(--amplify-components-text-color);
   --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-checkboxfield-align-items: flex-start;
   --amplify-components-checkboxfield-align-content: center;

package/dist/styles/base.layer.css

@@ -513,6 +513,7 @@
   --amplify-components-checkbox-icon-indeterminate-opacity: var(--amplify-opacities-100);
   --amplify-components-checkbox-icon-indeterminate-transform: scale(1);
   --amplify-components-checkbox-icon-indeterminate-disabled-background-color: var(--amplify-colors-background-disabled);
+  --amplify-components-checkbox-label-color: var(--amplify-components-text-color);
   --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-checkboxfield-align-items: flex-start;
   --amplify-components-checkboxfield-align-content: center;

package/dist/styles/checkbox.css

@@ -91,5 +91,8 @@
 }
 
 .amplify-checkbox__label {
-  color: inherit;
+  color: var(--amplify-components-checkbox-label-color);
+}
+.amplify-checkbox__label--disabled {
+  color: var(--amplify-components-checkbox-label-disabled-color);
 }

package/dist/styles/checkbox.layer.css

@@ -92,6 +92,9 @@
 }
 
 .amplify-checkbox__label {
-  color: inherit;
+  color: var(--amplify-components-checkbox-label-color);
+}
+.amplify-checkbox__label--disabled {
+  color: var(--amplify-components-checkbox-label-disabled-color);
 }
 }

package/dist/styles.css

@@ -512,6 +512,7 @@
   --amplify-components-checkbox-icon-indeterminate-opacity: var(--amplify-opacities-100);
   --amplify-components-checkbox-icon-indeterminate-transform: scale(1);
   --amplify-components-checkbox-icon-indeterminate-disabled-background-color: var(--amplify-colors-background-disabled);
+  --amplify-components-checkbox-label-color: var(--amplify-components-text-color);
   --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-checkboxfield-align-items: flex-start;
   --amplify-components-checkboxfield-align-content: center;
@@ -3668,7 +3669,10 @@ strong.amplify-text {
 }
 
 .amplify-checkbox__label {
-  color: inherit;
+  color: var(--amplify-components-checkbox-label-color);
+}
+.amplify-checkbox__label--disabled {
+  color: var(--amplify-components-checkbox-label-disabled-color);
 }
 
 .amplify-checkboxfield {

package/dist/styles.layer.css

@@ -513,6 +513,7 @@
   --amplify-components-checkbox-icon-indeterminate-opacity: var(--amplify-opacities-100);
   --amplify-components-checkbox-icon-indeterminate-transform: scale(1);
   --amplify-components-checkbox-icon-indeterminate-disabled-background-color: var(--amplify-colors-background-disabled);
+  --amplify-components-checkbox-label-color: var(--amplify-components-text-color);
   --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-checkboxfield-align-items: flex-start;
   --amplify-components-checkboxfield-align-content: center;
@@ -3669,7 +3670,10 @@ strong.amplify-text {
 }
 
 .amplify-checkbox__label {
-  color: inherit;
+  color: var(--amplify-components-checkbox-label-color);
+}
+.amplify-checkbox__label--disabled {
+  color: var(--amplify-components-checkbox-label-disabled-color);
 }
 
 .amplify-checkboxfield {

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "6.1.4";
+export declare const VERSION = "6.1.5";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react",
-  "version": "6.1.4",
+  "version": "6.1.5",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -49,8 +49,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.0.10",
-    "@aws-amplify/ui-react-core": "3.0.10",
+    "@aws-amplify/ui": "6.0.11",
+    "@aws-amplify/ui-react-core": "3.0.11",
     "@radix-ui/react-direction": "1.0.0",
     "@radix-ui/react-dropdown-menu": "1.0.0",
     "@radix-ui/react-slider": "1.0.0",