@hero-design/rn 8.2.2 → 8.2.3

package/src/components/Card/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1,5 +1,79 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Card renders correctly when intent is archived 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#abacaf",
+        "borderRadius": 12,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  themeIntent="archived"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
+  >
+    Card Content
+  </Text>
+</View>
+`;
+
+exports[`Card renders correctly when intent is danger 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#f46363",
+        "borderRadius": 12,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  themeIntent="danger"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
+  >
+    Card Content
+  </Text>
+</View>
+`;
+
 exports[`Card renders correctly when intent is info 1`] = `
 <View
   style={

package/src/components/Card/__tests__/index.spec.tsx

@@ -23,6 +23,8 @@ describe('Card', () => {
     ${'primary'}
     ${'success'}
     ${'info'}
+    ${'danger'}
+    ${'archived'}
   `('renders correctly when intent is $intent', ({ intent }) => {
     const { toJSON, getByText } = renderWithTheme(
       <Card intent={intent}>

package/src/components/Card/index.tsx

@@ -12,7 +12,7 @@ interface CardProps extends ViewProps {
   /**
    * Visual intent color to apply to card.
    */
-  intent?: 'primary' | 'success' | 'warning';
+  intent?: 'primary' | 'success' | 'warning' | 'danger' | 'archived';
   /**
    * Additional style.
    */

package/src/components/Icon/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { StyleProp, TextStyle } from 'react-native';
+import type { AccessibilityProps, StyleProp, TextStyle } from 'react-native';
 import IconList from './IconList';
 import HeroIcon from './HeroIcon';
 import AnimatedIcon from './AnimatedIcon';
@@ -7,7 +7,7 @@ import { useDeprecation } from '../../utils/hooks';
 
 export type IconName = typeof IconList[number];
 
-export interface IconProps {
+export interface IconProps extends AccessibilityProps {
   /**
    * Name of the Icon.
    */
@@ -50,6 +50,17 @@ const Icon = ({
   intent = 'text',
   testID,
   spin = false,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole,
+  accessibilityState,
+  accessibilityValue,
+  accessibilityLiveRegion,
+  accessibilityElementsHidden,
+  accessible,
+  accessibilityIgnoresInvertColors,
+  accessibilityViewIsModal,
+  accessibilityActions,
 }: IconProps) => {
   useDeprecation(
     `${icon} icon is deprecated and will be removed in the next major release, please use ${icon.replace(
@@ -58,6 +69,19 @@ const Icon = ({
     )} instead.`,
     icon.startsWith('carat')
   );
+  const accessibilityProps = {
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityRole,
+    accessibilityState,
+    accessibilityValue,
+    accessibilityLiveRegion,
+    accessibilityElementsHidden,
+    accessible,
+    accessibilityIgnoresInvertColors,
+    accessibilityViewIsModal,
+    accessibilityActions,
+  };
 
   return spin ? (
     <AnimatedIcon
@@ -66,6 +90,7 @@ const Icon = ({
       themeSize={size}
       style={style}
       testID={testID}
+      {...accessibilityProps}
     />
   ) : (
     <HeroIcon
@@ -74,6 +99,7 @@ const Icon = ({
       themeSize={size}
       style={style}
       testID={testID}
+      {...accessibilityProps}
     />
   );
 };

package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap

@@ -2708,6 +2708,166 @@ exports[`TextInput readonly renders correctly 1`] = `
 </View>
 `;
 
+exports[`TextInput ref ref methods work correctly 1`] = `
+<View
+  pointerEvents="auto"
+  style={
+    Array [
+      Object {
+        "marginVertical": 8,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeVariant="filled"
+    />
+    <View
+      pointerEvents="none"
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "flexDirection": "row",
+            "left": 16,
+            "paddingHorizontal": 4,
+            "position": "absolute",
+            "top": -10,
+            "zIndex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 20,
+            },
+            Array [
+              Object {
+                "color": "#001f23",
+              },
+              undefined,
+            ],
+          ]
+        }
+        testID="input-label"
+        themeFontSize="small"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+        themeVariant="filled"
+      >
+        Amount (AUD)
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "alignSelf": "stretch",
+            "flexDirection": "row",
+            "flexGrow": 2,
+            "flexShrink": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <TextInput
+        accessibilityState={
+          Object {
+            "disabled": false,
+          }
+        }
+        editable={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        placeholder=" "
+        style={
+          Array [
+            Object {
+              "alignSelf": "stretch",
+              "flexGrow": 2,
+              "fontSize": 14,
+              "lineHeight": 18,
+              "marginHorizontal": 8,
+              "paddingVertical": 0,
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#001f23",
+            },
+          ]
+        }
+        testID="text-input"
+        value="2000"
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "paddingLeft": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+    />
+  </View>
+</View>
+`;
+
 exports[`TextInput required renders correctly 1`] = `
 <View
   pointerEvents="auto"

package/src/components/TextInput/__tests__/index.spec.tsx

@@ -1,9 +1,10 @@
-import { fireEvent, within } from '@testing-library/react-native';
+import { act, fireEvent, within } from '@testing-library/react-native';
 import React from 'react';
+import { TextInput as RNTextInput } from 'react-native';
 import { theme } from '../../..';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Icon from '../../Icon';
-import TextInput, { getVariant } from '../index';
+import TextInput, { getVariant, TextInputHandles } from '../index';
 
 describe('getVariant', () => {
   it.each`
@@ -268,7 +269,10 @@ describe('TextInput', () => {
       expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
       expect(queryAllByTestId('input-label')).toHaveLength(1);
       expect(queryAllByTestId('text-input')).toHaveLength(1);
-      expect(getByTestId('disabled-text-input')).toBeDisabled();
+      expect(getByTestId('disabled-text-input')).toHaveProp(
+        'pointerEvents',
+        'none'
+      );
 
       expect(getByTestId('text-input')).not.toHaveProp('multiline', 'true');
     });
@@ -375,4 +379,47 @@ describe('TextInput', () => {
       });
     });
   });
+
+  describe('ref', () => {
+    it('ref methods work correctly', () => {
+      const mockChildMethod = jest.fn();
+      jest.spyOn(React, 'useRef').mockReturnValue({
+        current: {
+          clear: mockChildMethod,
+        },
+      });
+      const ref = React.createRef<
+        TextInputHandles & {
+          getNativeTextInputRef(): RNTextInput;
+        }
+      >();
+      const wrapper = renderWithTheme(
+        <TextInput label="Amount (AUD)" value="2000" ref={ref} />
+      );
+
+      expect(wrapper.toJSON()).toMatchSnapshot();
+      expect(wrapper.queryByDisplayValue('2000')).toBeTruthy();
+      expect(wrapper.queryByDisplayValue('1000')).toBeFalsy();
+
+      const nativeTextInputRef = ref.current!.getNativeTextInputRef();
+      const focusSpy = jest.spyOn(nativeTextInputRef, 'focus');
+      const clearSpy = jest.spyOn(nativeTextInputRef, 'clear');
+      const blurSpy = jest.spyOn(nativeTextInputRef, 'blur');
+      const setNativePropsSpy = jest.spyOn(
+        nativeTextInputRef,
+        'setNativeProps'
+      );
+      act(() => {
+        ref.current?.focus();
+        ref.current?.clear();
+        ref.current?.setNativeProps({ text: '1000' });
+        ref.current?.blur();
+      });
+      expect(focusSpy).toHaveBeenCalledTimes(1);
+
+      expect(clearSpy).toHaveBeenCalledTimes(1);
+      expect(setNativePropsSpy).toHaveBeenCalledTimes(1);
+      expect(blurSpy).toHaveBeenCalledTimes(1);
+    });
+  });
 });

package/src/components/TextInput/index.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, TextInput as RNTextInput } from 'react-native';
 import type {
   TextInputProps as NativeTextInputProps,
   StyleProp,
@@ -31,6 +31,11 @@ import type { Variant } from './StyledTextInput';
 import type { IconName } from '../Icon';
 import { omit, pick } from '../../utils/helpers';
 
+export type TextInputHandles = Pick<
+  RNTextInput,
+  'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'
+>;
+
 export interface TextInputProps extends NativeTextInputProps {
   /**
    * Field label.
@@ -66,7 +71,7 @@ export interface TextInputProps extends NativeTextInputProps {
   error?: string;
   /**
    *  Whether the input is required, if true, an asterisk will be appended to the label.
-   * */
+   */
   required?: boolean;
   /**
    *  Placeholder text to display.
@@ -76,27 +81,31 @@ export interface TextInputProps extends NativeTextInputProps {
    * Whether the input is editable.
    * */
   editable?: boolean;
-  /*
+  /**
    * Whether the input is disabled.
    */
   disabled?: boolean;
-  /*
+  /**
    * Whether the input is loading.
    */
   loading?: boolean;
-  /*
+  /**
    * The max length of the input.
    * If the max length is set, the input will display the current length and the max length.
    * */
   maxLength?: number;
-  /*
+  /**
    * The helper text to display.
    */
   helpText?: string;
-  /*
+  /**
    * Customise input value renderer
    */
   renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+  /**
+   * Component ref.
+   */
+  ref?: React.Ref<TextInputHandles>;
 }
 
 export const getVariant = ({
@@ -132,26 +141,29 @@ export const getVariant = ({
 // https://github.com/callstack/react-native-paper/pull/3331
 const EMPTY_PLACEHOLDER_VALUE = ' ';
 
-const TextInput = ({
-  label,
-  prefix,
-  suffix,
-  style,
-  textStyle,
-  testID,
-  accessibilityLabelledBy,
-  error,
-  required,
-  editable = true,
-  disabled = false,
-  loading = false,
-  maxLength,
-  helpText,
-  value,
-  defaultValue,
-  renderInputValue,
-  ...nativeProps
-}: TextInputProps): JSX.Element => {
+const TextInput = (
+  {
+    label,
+    prefix,
+    suffix,
+    style,
+    textStyle,
+    testID,
+    accessibilityLabelledBy,
+    error,
+    required,
+    editable = true,
+    disabled = false,
+    loading = false,
+    maxLength,
+    helpText,
+    value,
+    defaultValue,
+    renderInputValue,
+    ...nativeProps
+  }: TextInputProps,
+  ref?: React.Ref<TextInputHandles>
+) => {
   const displayText = (value !== undefined ? value : defaultValue) ?? '';
   const isEmptyValue = displayText.length === 0;
   const actualSuffix = loading ? 'loading' : suffix;
@@ -171,6 +183,24 @@ const TextInput = ({
 
   const theme = useTheme();
 
+  const innerTextInput = React.useRef<RNTextInput | undefined | null>();
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      // we don't expose this method, it's for testing https://medium.com/developer-rants/how-to-test-useref-without-mocking-useref-699165f4994e
+      getNativeTextInputRef: () => innerTextInput.current,
+      focus: () => {
+        innerTextInput.current?.focus();
+      },
+      clear: () => innerTextInput.current?.clear(),
+      setNativeProps: (args: NativeTextInputProps) =>
+        innerTextInput.current?.setNativeProps(args),
+      isFocused: () => innerTextInput.current?.isFocused() || false,
+      blur: () => innerTextInput.current?.blur(),
+    }),
+    [innerTextInput]
+  );
+
   const { borderStyle, textStyleWithoutBorderStyle } = useMemo(() => {
     if (!textStyle) {
       return {};
@@ -179,7 +209,7 @@ const TextInput = ({
     const flattenTextStyle = StyleSheet.flatten(textStyle);
     const borderKeys = Object.keys(flattenTextStyle).filter((key) => {
       return key.startsWith('border');
-    });
+    }) as Array<keyof TextStyle>;
     return {
       borderStyle: pick(borderKeys, flattenTextStyle),
       textStyleWithoutBorderStyle: omit(borderKeys, flattenTextStyle),
@@ -286,7 +316,12 @@ const TextInput = ({
           {renderInputValue ? (
             renderInputValue(nativeInputProps)
           ) : (
-            <StyledTextInput {...nativeInputProps} />
+            <StyledTextInput
+              {...nativeInputProps}
+              ref={(reference) => {
+                innerTextInput.current = reference;
+              }}
+            />
           )}
         </StyledTextInputAndLabelContainer>
         {typeof actualSuffix === 'string' ? (
@@ -327,4 +362,4 @@ const TextInput = ({
   );
 };
 
-export default TextInput;
+export default React.forwardRef<TextInputHandles, TextInputProps>(TextInput);

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -14,19 +14,25 @@ export interface ToolbarGroupProps {
   align: 'left' | 'center' | 'right';
 }
 
-const ToolbarGroup = ({ align = 'right', items = [] }: ToolbarGroupProps) => (
-  <ToolbarGroupWrapper align={align}>
-    {items.map(({ label, icon, onPress, disabled, intent }) => (
-      <ToolbarItem
-        key={`${label}-${icon}`}
-        label={label}
-        icon={icon}
-        intent={intent}
-        onPress={onPress}
-        disabled={disabled}
-      />
-    ))}
-  </ToolbarGroupWrapper>
-);
+const ToolbarGroup = ({ align = 'right', items = [] }: ToolbarGroupProps) => {
+  // set maxWidth prevents overflow of items
+  // issue: https://github.com/Thinkei/hero-design/issues/1619
+  const maxWidth = items.length > 0 ? `${100 / items.length}%` : undefined;
+  return (
+    <ToolbarGroupWrapper align={align}>
+      {items.map(({ label, icon, onPress, disabled, intent }) => (
+        <ToolbarItem
+          key={`${label}-${icon}`}
+          label={label}
+          icon={icon}
+          intent={intent}
+          onPress={onPress}
+          disabled={disabled}
+          style={{ maxWidth }}
+        />
+      ))}
+    </ToolbarGroupWrapper>
+  );
+};
 
 export default ToolbarGroup;

package/src/components/Toolbar/ToolbarItem.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
 import Icon from '../Icon';
 import Typography from '../Typography';
 import { ToolbarItemWrapper } from './StyledToolbar';
@@ -25,6 +26,11 @@ export interface ToolbarItemProps {
    * Whether the toolbar item is disabled.
    */
   disabled?: boolean;
+
+  /**
+   * Addtitional style.
+   */
+  style?: StyleProp<ViewStyle>;
 }
 
 const ToolbarItem = ({
@@ -33,8 +39,9 @@ const ToolbarItem = ({
   onPress,
   intent = 'primary',
   disabled = false,
+  style,
 }: ToolbarItemProps) => (
-  <ToolbarItemWrapper onPress={onPress} disabled={disabled}>
+  <ToolbarItemWrapper onPress={onPress} disabled={disabled} style={style}>
     {icon ? (
       <Icon
         icon={icon}
@@ -48,6 +55,7 @@ const ToolbarItem = ({
         fontSize={icon ? 'small' : 'large'}
         fontWeight="semi-bold"
         intent={disabled ? 'subdued' : intent}
+        maxFontSizeMultiplier={2}
       >
         {label}
       </Typography.Text>