@aws-amplify/ui-react-native 1.1.2 → 1.1.4

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @aws-amplify/ui-react-native
 
+## 1.1.4
+
+### Patch Changes
+
+- [#3164](https://github.com/aws-amplify/amplify-ui/pull/3164) [`7f99d8b1a`](https://github.com/aws-amplify/amplify-ui/commit/7f99d8b1a16b23c180c42a11a9bc992b5c4f2861) Thanks [@calebpollman](https://github.com/calebpollman)! - fix(ui-react-native): update ErrorMessage style
+
+- [#2921](https://github.com/aws-amplify/amplify-ui/pull/2921) [`2d0799002`](https://github.com/aws-amplify/amplify-ui/commit/2d0799002dbfa843a1720c2384eadba942333f76) Thanks [@ioanabrooks](https://github.com/ioanabrooks)! - chore(ui-react-native): Add utility hook for pressable styles
+
+- Updated dependencies [[`c31a9bf69`](https://github.com/aws-amplify/amplify-ui/commit/c31a9bf693b3507e8a2b9d0790423a9f64e533cf), [`1847840c0`](https://github.com/aws-amplify/amplify-ui/commit/1847840c00c0f9f7be31e9735c31bd596f4056e9)]:
+  - @aws-amplify/ui@5.3.1
+  - @aws-amplify/ui-react-core@2.1.4
+
+## 1.1.3
+
+### Patch Changes
+
+- Updated dependencies [[`3653c8f39`](https://github.com/aws-amplify/amplify-ui/commit/3653c8f3914e3dc51fbcc328e59326afb422aa68), [`145d0b5f5`](https://github.com/aws-amplify/amplify-ui/commit/145d0b5f596ff7c9f623898af0bb3836516c51fe), [`e3867e369`](https://github.com/aws-amplify/amplify-ui/commit/e3867e369b4aeb5b240916cb88105353483b9b7c), [`4b2dbeb18`](https://github.com/aws-amplify/amplify-ui/commit/4b2dbeb18c79175bc0bfe0cf50a0e9d0429544d6), [`0377bccfb`](https://github.com/aws-amplify/amplify-ui/commit/0377bccfbea55606d007ae914a5d7f202bf87478)]:
+  - @aws-amplify/ui@5.3.0
+  - @aws-amplify/ui-react-core@2.1.3
+
 ## 1.1.2
 
 ### Patch Changes

package/dist/Authenticator/common/DefaultContent/DefaultContent.js

@@ -18,7 +18,7 @@ export default function DefaultContent({ body, buttons: { primary, links, second
       <Header style={themedStyles.header}>{headerText}</Header>
       {body ? (typeof body === 'string' ? (<Label style={themedStyles.body}>{body}</Label>) : (body)) : null}
       <FormFields fieldContainerStyle={themedStyles.fieldContainer} fieldErrorsContainer={themedStyles.fieldErrorsContainer} fieldErrorStyle={themedStyles.fieldError} fieldLabelStyle={themedStyles.fieldLabel} fieldStyle={themedStyles.fieldStyle} fields={fields} isPending={isPending} validationErrors={validationErrors} style={themedStyles.formFields}/>
-      {error ? (<ErrorMessage style={themedStyles.errorMessage} labelStyle={themedStyles.errorMessageLabel}>
+      {error ? (<ErrorMessage iconStyle={themedStyles.errorMessageIcon} labelStyle={themedStyles.errorMessageLabel} style={themedStyles.errorMessage}>
           {error}
         </ErrorMessage>) : null}
       <Button {...primary} variant="primary" textStyle={themedStyles.buttonPrimaryLabel} style={themedStyles.buttonPrimary}/>

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

@@ -14,8 +14,9 @@ export const getDefaultStyle = ({ tokens: { colors, fontSizes, space }, }) => St
     },
     buttonSecondaryLabel: {},
     errorMessage: {
-        marginVertical: space.small,
+        marginHorizontal: space.small,
     },
+    errorMessageIcon: {},
     errorMessageLabel: {},
     fieldContainer: {
         paddingHorizontal: space.small,

package/dist/Authenticator/common/DefaultContent/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { AuthenticatorComponentDefaultProps, AuthenticatorHeaderComponent, AuthenticatorFooterComponent, AuthenticatorMachineContext, AuthenticatorRouteComponentName } from '@aws-amplify/ui-react-core';
 import { ButtonProps } from '../../../primitives';
 import { DefaultFormFieldsComponent, DefaultFormFieldsStyle } from '../../common';
@@ -11,6 +11,7 @@ export interface DefaultContentStyle {
     buttonSecondary?: ViewStyle;
     buttonSecondaryLabel?: TextStyle;
     errorMessage?: ViewStyle;
+    errorMessageIcon?: ImageStyle;
     errorMessageLabel?: TextStyle;
     fieldErrorsContainer?: ViewStyle;
     fieldContainer?: ViewStyle;

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

@@ -1,13 +1,14 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { Button, Icon, Label } from '../../../primitives';
+import { usePressableContainerStyles } from '../../../hooks';
 import { styles } from './styles';
 export default function FederatedProviderButton({ children, source, style, textStyle, ...rest }) {
-    const containerStyle = useCallback(({ pressed }) => {
-        const pressedStateStyle = typeof style === 'function' ? style({ pressed }) : style;
-        return [styles.container, pressedStateStyle];
-    }, [style]);
-    return (<Button {...rest} style={containerStyle}>
-      {source ? <Icon source={source} style={styles.icon} size={20}/> : null}
+    const pressableStyle = usePressableContainerStyles({
+        containerStyle: styles.container,
+        overrideStyle: style,
+    });
+    return (<Button {...rest} style={pressableStyle}>
+      <Icon source={source} style={styles.icon} size={20}/>
       <Label style={[styles.label, textStyle]}>{children}</Label>
     </Button>);
 }

package/dist/hooks/index.d.ts

@@ -1 +1,2 @@
 export { DeviceOrientation, useDeviceOrientation, } from './useDeviceOrientation';
+export { usePressableContainerStyles } from './usePressableContainerStyles';

package/dist/hooks/index.js

@@ -1 +1,2 @@
 export { useDeviceOrientation, } from './useDeviceOrientation';
+export { usePressableContainerStyles } from './usePressableContainerStyles';

package/dist/hooks/usePressableContainerStyles/index.d.ts

@@ -0,0 +1 @@
+export { usePressableContainerStyles } from './usePressableContainerStyles';

package/dist/hooks/usePressableContainerStyles/index.js

@@ -0,0 +1 @@
+export { usePressableContainerStyles } from './usePressableContainerStyles';

package/dist/hooks/usePressableContainerStyles/usePressableContainerStyles.d.ts

@@ -0,0 +1,19 @@
+import { PressableProps, PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native';
+export interface UsePressableContainerStyleProps {
+    /**
+     * @description
+     * Either view styles or a function representing override styles for the pressed state
+     */
+    overrideStyle: PressableProps['style'];
+    /**
+     * @description
+     * Pass-through view styles, typically includes theme, disabled, variant styles
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * @description
+     * Pass-through view styles for the pressed state applied before the override styles
+     */
+    pressedStyle?: StyleProp<ViewStyle>;
+}
+export declare const usePressableContainerStyles: ({ overrideStyle, containerStyle, pressedStyle, }: UsePressableContainerStyleProps) => ({ pressed, }: PressableStateCallbackType) => StyleProp<ViewStyle>;

package/dist/hooks/usePressableContainerStyles/usePressableContainerStyles.js

@@ -0,0 +1,14 @@
+import { useCallback } from 'react';
+export const usePressableContainerStyles = ({ overrideStyle, containerStyle, pressedStyle, }) => {
+    return useCallback(({ pressed }) => {
+        const pressedOverrideStyle = typeof overrideStyle === 'function'
+            ? overrideStyle({ pressed })
+            : overrideStyle;
+        return [
+            containerStyle,
+            pressed ? pressedStyle : undefined,
+            // include last to override other styles
+            pressedOverrideStyle,
+        ];
+    }, [containerStyle, overrideStyle, pressedStyle]);
+};

package/dist/primitives/Button/Button.js

@@ -1,21 +1,22 @@
-import React, { useCallback, useMemo } from 'react';
-import { Pressable, Text, } from 'react-native';
+import React, { useMemo } from 'react';
+import { Pressable, Text } from 'react-native';
+import { usePressableContainerStyles } from '../../hooks';
 import { useTheme } from '../../theme';
 import { capitalize } from '../../utils';
 import { getThemedStyles } from './styles';
 export default function Button({ accessibilityRole = 'button', children, disabled, style, textStyle, variant = 'default', ...rest }) {
     const theme = useTheme();
     const themedStyle = getThemedStyles(theme);
-    const pressableStyle = useCallback(({ pressed }) => {
-        const pressedStateStyle = typeof style === 'function' ? style({ pressed }) : style;
-        return [
-            themedStyle.container,
-            themedStyle[`container${capitalize(variant)}`],
-            disabled ? themedStyle.disabled : null,
-            pressed ? themedStyle.pressed : null,
-            pressedStateStyle,
-        ];
-    }, [disabled, style, themedStyle, variant]);
+    const containerStyle = useMemo(() => ({
+        ...themedStyle.container,
+        ...themedStyle[`container${capitalize(variant)}`],
+        ...(disabled && themedStyle.disabled),
+    }), [disabled, themedStyle, variant]);
+    const pressableStyle = usePressableContainerStyles({
+        overrideStyle: style,
+        containerStyle,
+        pressedStyle: themedStyle.pressed,
+    });
     const buttonTextStyle = useMemo(() => ({
         ...themedStyle.text,
         ...themedStyle[`text${capitalize(variant)}`],

package/dist/primitives/ErrorMessage/ErrorMessage.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ErrorMessageProps } from './types';
 export declare const CLOSE_BUTTON_TEST_ID = "authenticator--error-message--close-button";
-export default function ErrorMessage({ children, labelStyle, onDismiss, style, ...rest }: ErrorMessageProps): JSX.Element;
+export default function ErrorMessage({ children, iconStyle, labelStyle, onDismiss, style, ...rest }: ErrorMessageProps): JSX.Element;

package/dist/primitives/ErrorMessage/ErrorMessage.js

@@ -6,11 +6,11 @@ import { IconButton } from '../IconButton';
 import { useTheme } from '../../theme';
 import { getThemedStyles } from './styles';
 export const CLOSE_BUTTON_TEST_ID = 'authenticator--error-message--close-button';
-export default function ErrorMessage({ children, labelStyle, onDismiss, style, ...rest }) {
+export default function ErrorMessage({ children, iconStyle, labelStyle, onDismiss, style, ...rest }) {
     const theme = useTheme();
     const themedStyle = getThemedStyles(theme);
     return (<View {...rest} accessibilityRole="alert" style={[themedStyle.container, style]}>
-      <Icon size={20} source={icons.error} style={themedStyle.icon}/>
+      <Icon size={20} source={icons.error} style={[themedStyle.icon, iconStyle]}/>
       <Text style={[themedStyle.label, labelStyle]}>{children}</Text>
       {onDismiss ? (<IconButton onPress={onDismiss} size={20} source={icons.close} style={themedStyle.icon} testID={CLOSE_BUTTON_TEST_ID}/>) : null}
     </View>);

package/dist/primitives/ErrorMessage/styles.js

@@ -1,22 +1,24 @@
 import { StyleSheet } from 'react-native';
 export const getThemedStyles = (theme) => {
-    const { tokens: { colors, space }, components, } = theme;
+    const { tokens: { colors, fontSizes, space }, components, } = theme;
     return StyleSheet.create({
         container: {
             alignItems: 'center',
             backgroundColor: colors.background.error,
             flexDirection: 'row',
             paddingHorizontal: space.xs,
-            paddingVertical: space.xl,
+            paddingVertical: space.small,
             ...components?.errorMessage?.container,
         },
         icon: {
             margin: space.xs,
+            tintColor: colors.font.error,
             ...components?.errorMessage?.icon,
         },
         label: {
             color: colors.font.error,
             flex: 1,
+            fontSize: fontSizes.medium,
             paddingHorizontal: space.xs,
             ...components?.errorMessage?.label,
         },

package/dist/primitives/ErrorMessage/types.d.ts

@@ -1,5 +1,7 @@
 import { ImageStyle, StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import { IconProps } from '../Icon';
 export interface ErrorMessageProps extends ViewProps {
+    iconStyle?: IconProps['style'];
     labelStyle?: StyleProp<TextStyle>;
     onDismiss?: () => void;
 }

package/dist/primitives/IconButton/IconButton.js

@@ -1,20 +1,21 @@
-import React, { useCallback } from 'react';
-import { Pressable, } from 'react-native';
+import React, { useMemo } from 'react';
+import { Pressable } from 'react-native';
 import { useTheme } from '../../theme';
+import { usePressableContainerStyles } from '../../hooks';
 import { getThemedStyles } from './styles';
 import { Icon, iconSizes } from '../Icon';
 export default function IconButton({ accessibilityRole = 'button', color, disabled, iconStyle, size = iconSizes.medium, source, style, ...rest }) {
     const theme = useTheme();
     const themedStyle = getThemedStyles(theme);
-    const pressableStyle = useCallback(({ pressed }) => {
-        const pressedStateStyle = typeof style === 'function' ? style({ pressed }) : style;
-        return [
-            themedStyle.container,
-            disabled ? themedStyle.disabled : null,
-            pressed ? themedStyle.pressed : null,
-            pressedStateStyle,
-        ];
-    }, [disabled, style, themedStyle]);
+    const containerStyle = useMemo(() => ({
+        ...themedStyle.container,
+        ...(disabled && themedStyle.disabled),
+    }), [disabled, themedStyle]);
+    const pressableStyle = usePressableContainerStyles({
+        overrideStyle: style,
+        containerStyle,
+        pressedStyle: themedStyle.pressed,
+    });
     return (<Pressable {...rest} accessibilityRole={accessibilityRole} disabled={disabled} style={pressableStyle}>
       <Icon color={color} size={size} source={source} style={iconStyle}/>
     </Pressable>);

package/dist/primitives/Radio/Radio.js

@@ -3,6 +3,7 @@ import { Pressable, View, } from 'react-native';
 import { useTheme } from '../../theme';
 import { Label } from '../Label';
 import { getFlexDirectionFromLabelPosition } from '../Label/utils';
+import { usePressableContainerStyles } from '../../hooks';
 import { getThemedStyles } from './styles';
 import { getRadioDimensions } from './getRadioDimensions';
 export const CONTAINER_TEST_ID = 'amplify__radio-button__container';
@@ -16,17 +17,18 @@ export default function Radio({ accessibilityRole = 'radio', disabled, label, la
             onPress?.(event);
         }
     }, [disabled, onChange, onPress, value]);
-    const containerStyle = useCallback(({ pressed }) => {
-        const containerStyle = {
-            ...themedStyle.container,
-            flexDirection: getFlexDirectionFromLabelPosition(labelPosition),
-            ...(disabled && themedStyle.disabled),
-        };
-        const pressedStateStyle = typeof style === 'function' ? style({ pressed }) : style;
-        return [containerStyle, pressedStateStyle];
-    }, [disabled, labelPosition, style, themedStyle]);
+    const containerStyle = useMemo(() => ({
+        ...themedStyle.container,
+        flexDirection: getFlexDirectionFromLabelPosition(labelPosition),
+        ...(disabled && themedStyle.disabled),
+    }), [disabled, labelPosition, themedStyle]);
+    const pressableStyle = usePressableContainerStyles({
+        overrideStyle: style,
+        containerStyle,
+        pressedStyle: themedStyle.pressed,
+    });
     const { radioContainerDimensions, radioDotDimensions } = useMemo(() => getRadioDimensions(size, themedStyle), [size, themedStyle]);
-    return (<Pressable {...rest} accessibilityRole={accessibilityRole} onPress={handleOnChange} style={containerStyle}>
+    return (<Pressable {...rest} accessibilityRole={accessibilityRole} onPress={handleOnChange} style={pressableStyle}>
       <View style={[
             themedStyle.radioContainer,
             radioContainerDimensions,

package/dist/primitives/Radio/styles.js

@@ -12,6 +12,10 @@ export const getThemedStyles = (theme) => {
             opacity: opacities[60],
             ...components?.radio?.disabled,
         },
+        pressed: {
+            opacity: opacities[60],
+            ...components?.radio?.pressed,
+        },
         radioContainer: {
             alignItems: 'center',
             borderColor: colors.border.primary,

package/dist/primitives/Radio/types.d.ts

@@ -17,6 +17,7 @@ export declare type RadioDimensions = Pick<ViewStyle, 'height' | 'width'>;
 export interface RadioStyles {
     container?: ViewStyle;
     disabled?: ViewStyle;
+    pressed?: ViewStyle;
     radioContainer?: ViewStyle;
     radioContainerLarge?: RadioDimensions;
     radioContainerMedium?: RadioDimensions;

package/dist/primitives/Tabs/Tab.js

@@ -1,23 +1,23 @@
-import React, { useCallback } from 'react';
+import React, { useMemo } from 'react';
 import { useTheme } from '../../theme';
+import { usePressableContainerStyles } from '../../hooks';
 import { Button } from '../Button';
 import { getThemedStyles } from './styles';
 export default function Tab({ children, selected, style, textStyle, indicatorPosition, ...rest }) {
     const theme = useTheme();
     const themedStyle = getThemedStyles(theme, indicatorPosition);
     const selectedStyles = selected ? themedStyle.selected : null;
-    const containerStyle = useCallback(({ pressed }) => {
-        const readonlyStyle = selected ? themedStyle.readonly : null;
-        const pressedStateStyle = (typeof style === 'function' ? style({ pressed }) : style) ?? null;
-        // include `pressedStateStyle` last to override other styles
-        return [
-            themedStyle.tab,
-            readonlyStyle,
-            selectedStyles,
-            pressedStateStyle,
-        ];
-    }, [selected, selectedStyles, style, themedStyle]);
-    return (<Button {...rest} accessibilityRole="tab" style={containerStyle} textStyle={[themedStyle.tabText, textStyle, selectedStyles]}>
+    const containerStyle = useMemo(() => ({
+        ...themedStyle.tab,
+        ...(selected && themedStyle.readonly),
+        ...selectedStyles,
+    }), [selected, selectedStyles, themedStyle]);
+    const pressableStyle = usePressableContainerStyles({
+        overrideStyle: style,
+        containerStyle,
+        pressedStyle: themedStyle.pressed,
+    });
+    return (<Button {...rest} accessibilityRole="tab" style={pressableStyle} textStyle={[themedStyle.tabText, textStyle, selectedStyles]}>
       {children}
     </Button>);
 }

package/dist/primitives/Tabs/styles.js

@@ -18,6 +18,10 @@ export const getThemedStyles = (theme, indicatorPosition) => {
             opacity: opacities[100],
             ...components?.tabs?.readonly,
         },
+        pressed: {
+            opacity: opacities[60],
+            ...components?.tabs?.pressed,
+        },
         tabList: {
             flexDirection: 'row',
             width: '100%',

package/dist/primitives/Tabs/types.d.ts

@@ -36,6 +36,7 @@ export interface TabProps extends ButtonProps {
     indicatorPosition?: IndicatorPosition;
 }
 export interface TabsStyles {
+    pressed?: ViewStyle;
     readonly?: ViewStyle;
     selected?: ViewStyle;
     tabList?: ViewStyle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-native",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -43,8 +43,8 @@
     "type-fest": "^2.3.4"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.2.0",
-    "@aws-amplify/ui-react-core": "2.1.2"
+    "@aws-amplify/ui": "5.3.1",
+    "@aws-amplify/ui-react-core": "2.1.4"
   },
   "peerDependencies": {
     "aws-amplify": ">= 5.0.1",

package/src/Authenticator/Defaults/ConfirmResetPassword/__tests__/__snapshots__/ConfirmResetPassword.spec.tsx.snap

@@ -217,8 +217,7 @@ Array [
           style={
             Array [
               Object {},
-              null,
-              null,
+              undefined,
               undefined,
             ]
           }
@@ -356,8 +355,7 @@ Array [
           style={
             Array [
               Object {},
-              null,
-              null,
+              undefined,
               undefined,
             ]
           }
@@ -399,10 +397,10 @@ Array [
           "backgroundColor": "hsl(0, 75%, 85%)",
           "flexDirection": "row",
           "paddingHorizontal": 8,
-          "paddingVertical": 32,
+          "paddingVertical": 12,
         },
         Object {
-          "marginVertical": 12,
+          "marginHorizontal": 12,
         },
       ]
     }
@@ -422,9 +420,13 @@ Array [
             "tintColor": undefined,
             "width": 20,
           },
-          Object {
-            "margin": 8,
-          },
+          Array [
+            Object {
+              "margin": 8,
+              "tintColor": "hsl(0, 100%, 20%)",
+            },
+            Object {},
+          ],
         ]
       }
     />
@@ -434,6 +436,7 @@ Array [
           Object {
             "color": "hsl(0, 100%, 20%)",
             "flex": 1,
+            "fontSize": 16,
             "paddingHorizontal": 8,
           },
           Object {},
@@ -461,17 +464,13 @@ Array [
       Array [
         Object {
           "alignItems": "center",
-          "backgroundColor": "transparent",
+          "backgroundColor": "hsl(190, 95%, 30%)",
           "borderRadius": 4,
           "justifyContent": "center",
           "paddingHorizontal": 16,
           "paddingVertical": 12,
         },
-        Object {
-          "backgroundColor": "hsl(190, 95%, 30%)",
-        },
-        null,
-        null,
+        undefined,
         Object {
           "marginHorizontal": 16,
           "marginVertical": 12,
@@ -514,17 +513,14 @@ Array [
         Object {
           "alignItems": "center",
           "backgroundColor": "transparent",
+          "borderColor": "hsl(210, 10%, 58%)",
           "borderRadius": 4,
+          "borderWidth": 1,
           "justifyContent": "center",
           "paddingHorizontal": 16,
           "paddingVertical": 12,
         },
-        Object {
-          "borderColor": "hsl(210, 10%, 58%)",
-          "borderWidth": 1,
-        },
-        null,
-        null,
+        undefined,
         Object {
           "marginHorizontal": 16,
         },
@@ -767,8 +763,7 @@ Array [
           style={
             Array [
               Object {},
-              null,
-              null,
+              undefined,
               undefined,
             ]
           }
@@ -906,8 +901,7 @@ Array [
           style={
             Array [
               Object {},
-              null,
-              null,
+              undefined,
               undefined,
             ]
           }
@@ -958,17 +952,13 @@ Array [
       Array [
         Object {
           "alignItems": "center",
-          "backgroundColor": "transparent",
+          "backgroundColor": "hsl(190, 95%, 30%)",
           "borderRadius": 4,
           "justifyContent": "center",
           "paddingHorizontal": 16,
           "paddingVertical": 12,
         },
-        Object {
-          "backgroundColor": "hsl(190, 95%, 30%)",
-        },
-        null,
-        null,
+        undefined,
         Object {
           "marginHorizontal": 16,
           "marginVertical": 12,
@@ -1011,17 +1001,14 @@ Array [
         Object {
           "alignItems": "center",
           "backgroundColor": "transparent",
+          "borderColor": "hsl(210, 10%, 58%)",
           "borderRadius": 4,
+          "borderWidth": 1,
           "justifyContent": "center",
           "paddingHorizontal": 16,
           "paddingVertical": 12,
         },
-        Object {
-          "borderColor": "hsl(210, 10%, 58%)",
-          "borderWidth": 1,
-        },
-        null,
-        null,
+        undefined,
         Object {
           "marginHorizontal": 16,
         },