@hero-design/rn 8.2.1 → 8.2.3

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/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -641,18 +641,6 @@ exports[`TimePickerIOS renders correctly 1`] = `
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "borderBottomColor": "#e8e9ea",
-                        "borderBottomWidth": 1,
-                        "maxWidth": "100%",
-                      },
-                      undefined,
-                    ]
-                  }
-                />
                 <View
                   style={
                     Array [
@@ -677,18 +665,6 @@ exports[`TimePickerIOS renders correctly 1`] = `
                   />
                 </View>
                 <View>
-                  <View
-                    style={
-                      Array [
-                        Object {
-                          "borderBottomColor": "#e8e9ea",
-                          "borderBottomWidth": 1,
-                          "maxWidth": "100%",
-                        },
-                        undefined,
-                      ]
-                    }
-                  />
                   <View
                     style={
                       Array [

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>

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarGroup.spec.tsx.snap

@@ -34,6 +34,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
     style={
       Object {
         "alignItems": "center",
+        "maxWidth": "50%",
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -56,6 +57,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       themeSize="medium"
     />
     <Text
+      maxFontSizeMultiplier={2}
       style={
         Array [
           Object {
@@ -95,6 +97,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
     style={
       Object {
         "alignItems": "center",
+        "maxWidth": "50%",
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -117,6 +120,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       themeSize="medium"
     />
     <Text
+      maxFontSizeMultiplier={2}
       style={
         Array [
           Object {
@@ -174,6 +178,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
     style={
       Object {
         "alignItems": "center",
+        "maxWidth": "50%",
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -196,6 +201,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       themeSize="medium"
     />
     <Text
+      maxFontSizeMultiplier={2}
       style={
         Array [
           Object {
@@ -235,6 +241,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
     style={
       Object {
         "alignItems": "center",
+        "maxWidth": "50%",
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -257,6 +264,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       themeSize="medium"
     />
     <Text
+      maxFontSizeMultiplier={2}
       style={
         Array [
           Object {
@@ -314,6 +322,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
     style={
       Object {
         "alignItems": "center",
+        "maxWidth": "50%",
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -336,6 +345,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       themeSize="medium"
     />
     <Text
+      maxFontSizeMultiplier={2}
       style={
         Array [
           Object {
@@ -375,6 +385,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
     style={
       Object {
         "alignItems": "center",
+        "maxWidth": "50%",
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -397,6 +408,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       themeSize="medium"
     />
     <Text
+      maxFontSizeMultiplier={2}
       style={
         Array [
           Object {

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.spec.tsx.snap

@@ -42,6 +42,7 @@ exports[`ToolbarItems renders correctly when disabled 1`] = `
     themeSize="medium"
   />
   <Text
+    maxFontSizeMultiplier={2}
     style={
       Array [
         Object {
@@ -106,6 +107,7 @@ exports[`ToolbarItems renders correctly when intent is danger 1`] = `
     themeSize="medium"
   />
   <Text
+    maxFontSizeMultiplier={2}
     style={
       Array [
         Object {
@@ -170,6 +172,7 @@ exports[`ToolbarItems renders correctly when intent is info 1`] = `
     themeSize="medium"
   />
   <Text
+    maxFontSizeMultiplier={2}
     style={
       Array [
         Object {
@@ -234,6 +237,7 @@ exports[`ToolbarItems renders correctly when intent is primary 1`] = `
     themeSize="medium"
   />
   <Text
+    maxFontSizeMultiplier={2}
     style={
       Array [
         Object {
@@ -298,6 +302,7 @@ exports[`ToolbarItems renders correctly when intent is success 1`] = `
     themeSize="medium"
   />
   <Text
+    maxFontSizeMultiplier={2}
     style={
       Array [
         Object {
@@ -362,6 +367,7 @@ exports[`ToolbarItems renders correctly when intent is warning 1`] = `
     themeSize="medium"
   />
   <Text
+    maxFontSizeMultiplier={2}
     style={
       Array [
         Object {

package/src/types.ts

@@ -2,7 +2,7 @@ import type { BottomNavigationTabType } from './components/BottomNavigation';
 import type { IconName } from './components/Icon';
 import type { SingleSelectProps, MultiSelectProps } from './components/Select';
 import type { TabType } from './components/Tabs';
-import type { TextInputProps } from './components/TextInput';
+import type { TextInputProps, TextInputHandles } from './components/TextInput';
 import type {
   RichTextEditorRef,
   RichTextEditorProps,
@@ -13,6 +13,7 @@ import type {
   SectionListRenderOptionInfo,
 } from './components/Select/types';
 import { SwipeableProps } from './components/Swipeable';
+import { TextProps } from './components/Typography/Text';
 
 export type {
   BottomNavigationTabType,
@@ -26,5 +27,7 @@ export type {
   RichTextEditorRef,
   TabType,
   TextInputProps,
+  TextProps,
+  TextInputHandles,
   Theme,
 };