@aws-amplify/ui-react-native 1.2.28 → 2.0.1

package/src/InAppMessaging/hooks/useMessageImage/utils.ts

@@ -1,6 +1,6 @@
 import { Image } from 'react-native';
-import { ConsoleLogger as Logger } from '@aws-amplify/core';
-import { MessageLayout } from '@aws-amplify/ui-react-core-notifications';
+import { ConsoleLogger as Logger } from 'aws-amplify/utils';
+import { InAppMessageLayout } from '@aws-amplify/ui-react-core-notifications';
 
 import {
   BANNER_IMAGE_SCREEN_SIZE,
@@ -10,9 +10,9 @@ import {
 } from './constants';
 import { ImageDimensions, ImageLoadingState } from './types';
 
-const logger = new Logger('Notifications.InAppMessaging');
+const logger = new Logger('InAppMessaging');
 
-const inAppMessageImageSizes: Record<MessageLayout, number> = {
+const inAppMessageImageSizes: Record<InAppMessageLayout, number> = {
   BOTTOM_BANNER: BANNER_IMAGE_SCREEN_SIZE,
   MIDDLE_BANNER: BANNER_IMAGE_SCREEN_SIZE,
   TOP_BANNER: BANNER_IMAGE_SCREEN_SIZE,
@@ -41,7 +41,7 @@ export const prefetchNetworkImage = async (
 export const getLayoutImageDimensions = (
   imageHeight: number,
   imageWidth: number,
-  layout: MessageLayout
+  layout: InAppMessageLayout
 ): ImageDimensions => {
   // determine aspect ratio for scaling rendered image
   const aspectRatio = imageWidth / imageHeight;

package/src/InAppMessaging/hooks/useMessageProps/types.ts

@@ -6,7 +6,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import {
-  MessageLayout,
+  InAppMessageLayout,
   MessagePayloadStyle,
 } from '@aws-amplify/ui-react-core-notifications';
 
@@ -50,7 +50,7 @@ export interface MessageStyleParams {
   /**
    * message specific layout
    */
-  layout: MessageLayout;
+  layout: InAppMessageLayout;
 
   /**
    * style params to derive resolved style from
@@ -114,7 +114,7 @@ export interface MessageContainerAndWrapperStyle {
   container: [
     defaultStyle: StyleProp<ViewStyle>,
     messageStyle: StyleProp<ViewStyle>,
-    overrideStyle: StyleProp<ViewStyle>
+    overrideStyle: StyleProp<ViewStyle>,
   ];
   wrapper: StyleProp<ViewStyle>;
 }

package/src/InAppMessaging/hooks/useMessageProps/utils.ts

@@ -1,8 +1,8 @@
 import { StyleSheet } from 'react-native';
 import { isFunction } from '@aws-amplify/ui';
 import {
+  InAppMessageLayout,
   MessageComponentBaseProps,
-  MessageLayout,
   MessagePayloadStyle,
 } from '@aws-amplify/ui-react-core-notifications';
 
@@ -87,7 +87,7 @@ export const getComponentButtonStyle = ({
  * @returns {Boolean} boolean indicating whether entire screen should be filled
  */
 
-export const shouldFillDeviceScreen = (layout: MessageLayout): boolean => {
+export const shouldFillDeviceScreen = (layout: InAppMessageLayout): boolean => {
   switch (layout) {
     case 'CAROUSEL':
     case 'FULL_SCREEN': {

package/src/InAppMessaging/index.ts

@@ -1,5 +1,14 @@
+// re-export in-app types from '@aws-amplify/ui-react-core-notifications'
 export {
+  InAppMessage,
+  InAppMessageAction,
+  InAppMessageButton,
+  InAppMessageContent,
+  InAppMessageImage,
+  InAppMessageLayout,
   InAppMessagingProvider,
+  InAppMessageStyle,
+  InAppMessageTextAlign,
   useInAppMessaging,
 } from '@aws-amplify/ui-react-core-notifications';
 

package/src/assets/icons/icons.ts

@@ -1,3 +1,6 @@
+// disable `@typescript-eslint/no-var-requires` for this file
+// .png icons will be removed in favor of .svg icons
+/* eslint-disable @typescript-eslint/no-var-requires */
 import { ImageSourcePropType } from 'react-native';
 
 const icons = {

package/src/hooks/useDeviceOrientation/useDeviceOrientation.ts

@@ -40,7 +40,12 @@ export default function useDeviceOrientation(): {
       if (isFunction(subscription?.remove)) {
         subscription.remove();
       } else {
-        Dimensions.removeEventListener('change', handler);
+        (
+          Dimensions as unknown as {
+            // @todo-migration remove below, no longer needed
+            removeEventListener: (event: 'change', handler: () => void) => void;
+          }
+        ).removeEventListener('change', handler);
       }
     };
   }, []);

package/src/primitives/Button/styles.ts

@@ -18,8 +18,10 @@ export const getThemedStyles = (theme: StrictTheme): ButtonStyles => {
   return StyleSheet.create({
     container: {
       alignItems: 'center',
-      backgroundColor: colors.transparent,
       justifyContent: 'center',
+      flexDirection: 'row',
+      gap: space.small,
+      backgroundColor: colors.transparent,
       paddingVertical: space.small,
       paddingHorizontal: space.medium,
       borderRadius: radii.small,
@@ -31,7 +33,7 @@ export const getThemedStyles = (theme: StrictTheme): ButtonStyles => {
       ...components?.button?.containerDefault,
     },
     containerPrimary: {
-      backgroundColor: colors.brand.primary[80],
+      backgroundColor: colors.primary[80],
       ...components?.button?.containerPrimary,
     },
     containerLink: {

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.28';
+export const VERSION = '2.0.1';

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',
-  },
-});