@hero-design/rn 8.64.4 → 8.64.5

package/src/components/PinInput/index.tsx

@@ -1,4 +1,5 @@
 import React, {
+  ComponentProps,
   forwardRef,
   useCallback,
   useEffect,
@@ -6,7 +7,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { InteractionManager, TextInput } from 'react-native';
+import { InteractionManager, Platform, TextInput } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 import Icon from '../Icon';
 import PinCell from './PinCell';
@@ -62,6 +63,14 @@ interface PinInputProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * The text content type of the input.
+   */
+  textContentType?: ComponentProps<typeof TextInput>['textContentType'];
+  /**
+   * The autofill type of the input.
+   */
+  autoComplete?: ComponentProps<typeof TextInput>['autoComplete'];
 }
 
 export function getState({
@@ -104,12 +113,16 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
       error,
       style,
       testID,
+      textContentType,
+      autoComplete,
     },
     ref
   ) => {
     const inputRef = useRef<TextInput>(null);
     const [focused, setFocused] = useState(autoFocus);
     const state = getState({ disabled, error });
+    const maskedValueWithExtraSpace =
+      Platform.OS === 'android' && !value ? '*' : value;
 
     const focus = useCallback(() => {
       if (inputRef?.current) {
@@ -179,7 +192,7 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
         <StyledHiddenInput
           themePinLength={length}
           ref={inputRef}
-          value={value}
+          value={maskedValueWithExtraSpace}
           onChangeText={changeText}
           secureTextEntry={secure}
           editable={!disabled}
@@ -187,11 +200,13 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
           onFocus={focus}
           onBlur={blur}
           maxLength={length}
-          keyboardType="numeric"
-          contextMenuHidden
           caretHidden
-          pointerEvents="box-only"
+          pointerEvents="box-none"
+          keyboardType="numeric"
           testID="pin-hidden-input"
+          textContentType={textContentType}
+          autoComplete={autoComplete}
+          selectTextOnFocus={false}
         />
       </StyledWrapper>
     );

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -645,6 +645,7 @@ exports[`theme returns correct theme object 1`] = `
       "fontSizes": {
         "cellText": 28,
         "errorMessage": 12,
+        "hiddenInputText": 42,
       },
       "fonts": {
         "cellText": "BeVietnamPro-SemiBold",
@@ -665,6 +666,8 @@ exports[`theme returns correct theme object 1`] = `
       },
       "space": {
         "errorMessagePadding": 4,
+        "hiddenInputHorrizontalPadding": 8,
+        "hiddenInputText": 32,
         "spacer": 16,
       },
     },

package/src/theme/components/pinInput.ts

@@ -21,6 +21,7 @@ const getPinInputTheme = (theme: GlobalTheme) => {
   const fontSizes = {
     cellText: theme.fontSizes.xxxxlarge,
     errorMessage: theme.fontSizes.small,
+    hiddenInputText: theme.fontSizes['7xlarge'],
   };
   const lineHeights = {
     cellText: theme.lineHeights.xxxxlarge,
@@ -36,6 +37,8 @@ const getPinInputTheme = (theme: GlobalTheme) => {
   const space = {
     spacer: theme.space.medium,
     errorMessagePadding: theme.space.xsmall,
+    hiddenInputText: theme.space.xlarge,
+    hiddenInputHorrizontalPadding: theme.space.small,
   };
 
   const radii = {

package/stats/8.64.4/rn-stats.html

@@ -4840,3 +4840,5 @@ var drawChart = (function (exports) {
 </body>
 </html>
 
+>
+