@aws-amplify/ui-react-native 1.2.27 → 2.0.0

package/src/primitives/Carousel/Carousel.tsx

@@ -7,7 +7,6 @@ import {
   View,
   ViewToken,
 } from 'react-native';
-import { isFunction } from '@aws-amplify/ui';
 
 import CarouselPageIndicator from './CarouselPageIndicator';
 import { VIEWABILITY_CONFIG } from './constants';
@@ -65,15 +64,7 @@ export default function Carousel<T>(
       orientationHandler
     );
 
-    // Clean up listener. Dimensions.removeEventListener is deprecated as of React Native 0.65 but it is technically
-    // available so try to remove via a `EmitterSubscription` first before falling back to `removeEventListener`
-    return () => {
-      if (isFunction(subscription?.remove)) {
-        subscription.remove();
-      } else {
-        Dimensions.removeEventListener('change', orientationHandler);
-      }
-    };
+    return subscription.remove;
   }, [updateOrientation]);
 
   const carouselRenderItem = (renderInfo: ListRenderItemInfo<T>) => (

package/src/primitives/Divider/styles.ts

@@ -5,7 +5,7 @@ import { DividerStyles } from './types';
 
 export const getThemedStyles = (theme: StrictTheme): DividerStyles => {
   const { tokens, components } = theme;
-  const { colors, fontSizes, space } = tokens;
+  const { colors, fontSizes, space, borderWidths } = tokens;
 
   return StyleSheet.create({
     container: {
@@ -17,12 +17,13 @@ export const getThemedStyles = (theme: StrictTheme): DividerStyles => {
       fontSize: fontSizes.medium,
       margin: space.medium,
       textAlign: 'center',
+      color: colors.font.tertiary,
       ...components?.divider?.label,
     },
     line: {
-      backgroundColor: colors.black,
+      backgroundColor: colors.border.secondary,
       flex: 1,
-      height: StyleSheet.hairlineWidth,
+      height: borderWidths.small,
       ...components?.divider?.line,
     },
   });

package/src/primitives/ErrorMessage/ErrorMessage.tsx

@@ -13,6 +13,8 @@ export const CLOSE_BUTTON_TEST_ID =
   'authenticator--error-message--close-button';
 
 export default function ErrorMessage({
+  accessible = true,
+  accessibilityRole = 'alert',
   children,
   iconStyle,
   labelStyle,
@@ -26,7 +28,8 @@ export default function ErrorMessage({
   return (
     <View
       {...rest}
-      accessibilityRole="alert"
+      accessible={accessible}
+      accessibilityRole={accessibilityRole}
       style={[themedStyle.container, style]}
     >
       <Icon

package/src/primitives/Icon/Icon.tsx

@@ -6,6 +6,7 @@ import { getThemedStyles } from './styles';
 import { IconProps } from './types';
 
 export default function Icon({
+  accessible = true,
   accessibilityRole = 'image',
   animated,
   color,
@@ -21,6 +22,7 @@ export default function Icon({
 
   const imageProps: IconProps = {
     ...rest,
+    accessible,
     accessibilityRole,
     style: [themedStyle.icon, style],
   };

package/src/primitives/Icon/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { ConsoleLogger as Logger } from '@aws-amplify/core';
+import { ConsoleLogger as Logger } from 'aws-amplify/utils';
 
 import { StrictTheme } from '../../theme';
 import { IconProps, IconStyles } from './types';

package/src/primitives/Radio/styles.ts

@@ -35,7 +35,7 @@ export const getThemedStyles = (theme: StrictTheme): Required<RadioStyles> => {
       ...components?.radio?.radioContainer,
     },
     radioDot: {
-      backgroundColor: colors.brand.primary[80],
+      backgroundColor: colors.primary[80],
       borderRadius: ROUNDED_BORDER_RADIUS,
       ...components?.radio?.radioDot,
     },

package/src/primitives/RadioGroup/RadioGroup.tsx

@@ -20,6 +20,7 @@ import { getThemedStyles } from './styles';
 import { RadioGroupProps } from './types';
 
 export default function RadioGroup<T>({
+  accessible = true,
   accessibilityRole = 'radiogroup',
   children,
   direction = 'vertical',
@@ -73,7 +74,11 @@ export default function RadioGroup<T>({
 
   return (
     <View {...rest} style={[themedStyle.container, containerStyle, style]}>
-      <View accessibilityRole={accessibilityRole} style={childContainerStyle}>
+      <View
+        accessible={accessible}
+        accessibilityRole={accessibilityRole}
+        style={childContainerStyle}
+      >
         {Children.map(children, (child) => {
           if (isValidElement<RadioProps<T>>(child)) {
             const {

package/src/primitives/Tabs/Tabs.tsx

@@ -6,6 +6,8 @@ import { getThemedStyles } from './styles';
 import { TabProps, TabsProps } from './types';
 
 export default function Tabs({
+  accessible = true,
+  accessibilityRole = 'tablist',
   children,
   indicatorPosition = 'bottom',
   onChange,
@@ -23,7 +25,8 @@ export default function Tabs({
   return (
     <View
       {...rest}
-      accessibilityRole="tablist"
+      accessible={accessible}
+      accessibilityRole={accessibilityRole}
       style={[themedStyle.tabList, style]}
     >
       {Children.map(children, (child, index) => {

package/src/primitives/Tabs/styles.ts

@@ -16,11 +16,11 @@ export const getThemedStyles = (
   const tabBorderStyles: ViewStyle = {};
 
   if (indicatorPosition && indicatorPosition === 'top') {
-    selectedTabBorderStyles.borderTopColor = colors.brand.primary[80];
+    selectedTabBorderStyles.borderTopColor = colors.primary[80];
     tabBorderStyles.borderTopWidth = borderWidths.medium;
     tabBorderStyles.borderTopColor = colors.border.secondary;
   } else {
-    selectedTabBorderStyles.borderBottomColor = colors.brand.primary[80];
+    selectedTabBorderStyles.borderBottomColor = colors.primary[80];
     tabBorderStyles.borderBottomWidth = borderWidths.medium;
     tabBorderStyles.borderBottomColor = colors.border.secondary;
   }
@@ -58,7 +58,7 @@ export const getThemedStyles = (
     },
     selected: {
       backgroundColor: colors.background.primary,
-      color: colors.brand.primary[80],
+      color: colors.primary[80],
       ...selectedTabBorderStyles,
       ...components?.tabs?.selected,
     },

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = '1.2.27';
+export const VERSION = '1.2.28';

package/dist/Authenticator/Defaults/ResetPassword/index.d.ts

@@ -1 +0,0 @@
-export { default as ResetPassword } from './ResetPassword';

package/dist/Authenticator/Defaults/ResetPassword/index.js

@@ -1 +0,0 @@
-export { default as ResetPassword } from './ResetPassword';

package/dist/Authenticator/Defaults/SetupTOTP/index.d.ts

@@ -1 +0,0 @@
-export { default as SetupTOTP } from './SetupTOTP';

package/dist/Authenticator/Defaults/SetupTOTP/index.js

@@ -1 +0,0 @@
-export { default as SetupTOTP } from './SetupTOTP';

package/dist/Authenticator/Defaults/SetupTOTP/styles.d.ts

@@ -1,5 +0,0 @@
-import { TextStyle } from 'react-native';
-export interface SetupTOTPStyle {
-    secretKeyText: TextStyle;
-}
-export declare const styles: SetupTOTPStyle;

package/dist/Authenticator/common/FederatedProviderButton/styles.d.ts

@@ -1,2 +0,0 @@
-import { FederatedProviderButtonStyles } from './types';
-export declare const styles: FederatedProviderButtonStyles;

package/dist/Authenticator/common/FederatedProviderButton/styles.js

@@ -1,18 +0,0 @@
-import { StyleSheet } from 'react-native';
-export const styles = StyleSheet.create({
-    container: {
-        alignItems: 'center',
-        borderRadius: 4,
-        borderWidth: StyleSheet.hairlineWidth,
-        flexDirection: 'row',
-        justifyContent: 'center',
-        paddingVertical: 8,
-        width: '100%',
-    },
-    icon: {
-        paddingHorizontal: 16,
-    },
-    label: {
-        fontWeight: '400',
-    },
-});

package/lib/Authenticator/Defaults/ResetPassword/index.js

@@ -1,8 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResetPassword = void 0;
-var ResetPassword_1 = require("./ResetPassword");
-Object.defineProperty(exports, "ResetPassword", { enumerable: true, get: function () { return __importDefault(ResetPassword_1).default; } });

package/lib/Authenticator/common/FederatedProviderButton/styles.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.styles = void 0;
-const react_native_1 = require("react-native");
-exports.styles = react_native_1.StyleSheet.create({
-    container: {
-        alignItems: 'center',
-        borderRadius: 4,
-        borderWidth: react_native_1.StyleSheet.hairlineWidth,
-        flexDirection: 'row',
-        justifyContent: 'center',
-        paddingVertical: 8,
-        width: '100%',
-    },
-    icon: {
-        paddingHorizontal: 16,
-    },
-    label: {
-        fontWeight: '400',
-    },
-});

package/src/Authenticator/Defaults/ResetPassword/index.ts

@@ -1 +0,0 @@
-export { default as ResetPassword } from './ResetPassword';

package/src/Authenticator/Defaults/SetupTOTP/index.ts

@@ -1 +0,0 @@
-export { default as SetupTOTP } from './SetupTOTP';

package/src/Authenticator/common/FederatedProviderButton/styles.ts

@@ -1,21 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-import { FederatedProviderButtonStyles } from './types';
-
-export const styles: FederatedProviderButtonStyles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    borderRadius: 4,
-    borderWidth: StyleSheet.hairlineWidth,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    paddingVertical: 8,
-    width: '100%',
-  },
-  icon: {
-    paddingHorizontal: 16,
-  },
-  label: {
-    fontWeight: '400',
-  },
-});