@hero-design/rn 8.64.8 → 8.65.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.64.8",
+  "version": "8.65.0-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -32,7 +32,7 @@
     "@react-native-community/datetimepicker": "^3.5.2 || ^7.6.1",
     "@react-native-community/slider": "^4.5.1",
     "react": "18.2.0",
-    "react-native": "^0.73.8",
+    "react-native": "^0.74.5",
     "react-native-gesture-handler": "^2.15.0",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-pager-view": "^6.2.1",
@@ -41,7 +41,7 @@
     "react-native-webview": "^13.10.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.24.0",
     "@babel/preset-env": "^7.20.0",
     "@babel/preset-react": "^7.20.0",
     "@babel/preset-typescript": "^7.20.0",
@@ -54,12 +54,12 @@
     "@hero-design/react-native-month-year-picker": "^8.42.10",
     "@react-native-community/datetimepicker": "7.6.1",
     "@react-native-community/slider": "^4.5.1",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@rollup/plugin-replace": "^4.0.0",
-    "@rollup/plugin-typescript": "^8.3.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-replace": "^6.0.1",
+    "@rollup/plugin-typescript": "^12.1.1",
     "@testing-library/jest-native": "^5.4.2",
     "@testing-library/react-native": "^9.1.0",
     "@types/events": "^3.0.3",
@@ -67,7 +67,7 @@
     "@types/react": "^18.2.0",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "babel-preset-expo": "9.5.2",
+    "babel-preset-expo": "^11.0.15",
     "core-js": "^3.33.0",
     "eslint": "^8.56.0",
     "eslint-config-hd": "8.42.4",
@@ -78,7 +78,6 @@
     "prettier-config-hd": "8.42.4",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
-    "react-native": "0.73.8",
     "react-native-gesture-handler": "^2.15.0",
     "react-native-linear-gradient": "2.8.3",
     "react-native-pager-view": "^6.2.1",
@@ -86,8 +85,8 @@
     "react-native-vector-icons": "^9.1.0",
     "react-native-webview": "13.10.3",
     "react-test-renderer": "18.2.0",
-    "rollup": "^2.70.1",
-    "rollup-plugin-copy": "^3.4.0",
+    "rollup": "^4.24.3",
+    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-flow": "^1.1.1",
     "rollup-plugin-visualizer": "^5.12.0",
     "ts-jest": "^29.1.1",

package/{rollup.config.js → rollup.config.mjs}

@@ -8,7 +8,7 @@ import copy from 'rollup-plugin-copy';
 import flow from 'rollup-plugin-flow';
 import { visualizer } from 'rollup-plugin-visualizer';
 
-import pkg from './package.json';
+import pkg from './package.json' assert { type: 'json' };
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
 
@@ -22,10 +22,12 @@ export default {
     {
       file: pkg.main,
       format: 'cjs',
+      interop: 'compat',
     },
     {
       file: pkg.module,
-      format: 'esm',
+      format: 'es',
+      interop: 'compat',
     },
   ],
   external: [
@@ -49,7 +51,7 @@ export default {
     flow(),
     commonjs(),
     json(),
-    typescript(),
+    typescript({ tsconfig: './tsconfig.rollup.json' }),
     babel({ extensions, babelHelpers: 'bundled' }),
     copy({
       targets: [

package/src/components/BottomNavigation/index.tsx

@@ -16,7 +16,6 @@ import {
 } from './StyledBottomNavigation';
 import { isIOS } from '../../utils/helpers';
 import type { IconName } from '../Icon';
-import { useDeprecation } from '../../utils/hooks';
 
 export type BottomNavigationTabType = {
   key: string;
@@ -72,9 +71,6 @@ const BottomNavigation = ({
   tabs,
   ...nativeProps
 }: BottomNavigationProps): JSX.Element => {
-  useDeprecation(
-    'BottomNavigation is deprecated and will be removed in the next major release. Please remove it.'
-  );
   const insets = useSafeAreaInsets();
 
   /**

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

@@ -211,13 +211,18 @@ exports[`rendering renders correctly 1`] = `
       pointerEvents="box-none"
       secureTextEntry={true}
       selectTextOnFocus={false}
+      selection={
+        {
+          "start": 2,
+        }
+      }
       style={
         [
           {
             "fontSize": 42,
             "height": "100%",
             "left": 0,
-            "letterSpacing": 32,
+            "letterSpacing": 4,
             "opacity": 0,
             "paddingHorizontal": 8,
             "position": "absolute",
@@ -467,13 +472,18 @@ exports[`rendering renders correctly when disabled 1`] = `
       pointerEvents="box-none"
       secureTextEntry={true}
       selectTextOnFocus={false}
+      selection={
+        {
+          "start": 2,
+        }
+      }
       style={
         [
           {
             "fontSize": 42,
             "height": "100%",
             "left": 0,
-            "letterSpacing": 32,
+            "letterSpacing": 4,
             "opacity": 0,
             "paddingHorizontal": 8,
             "position": "absolute",
@@ -841,13 +851,18 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
       pointerEvents="box-none"
       secureTextEntry={false}
       selectTextOnFocus={false}
+      selection={
+        {
+          "start": 3,
+        }
+      }
       style={
         [
           {
             "fontSize": 42,
             "height": "100%",
             "left": 0,
-            "letterSpacing": 32,
+            "letterSpacing": 4,
             "opacity": 0,
             "paddingHorizontal": 8,
             "position": "absolute",
@@ -1150,13 +1165,18 @@ exports[`rendering renders correctly when there is error 1`] = `
       pointerEvents="box-none"
       secureTextEntry={true}
       selectTextOnFocus={false}
+      selection={
+        {
+          "start": 2,
+        }
+      }
       style={
         [
           {
             "fontSize": 42,
             "height": "100%",
             "left": 0,
-            "letterSpacing": 32,
+            "letterSpacing": 4,
             "opacity": 0,
             "paddingHorizontal": 8,
             "position": "absolute",
@@ -1407,13 +1427,18 @@ exports[`rendering renders correctly with textContentType and autoComplete 1`] =
       pointerEvents="box-none"
       secureTextEntry={true}
       selectTextOnFocus={false}
+      selection={
+        {
+          "start": 2,
+        }
+      }
       style={
         [
           {
             "fontSize": 42,
             "height": "100%",
             "left": 0,
-            "letterSpacing": 32,
+            "letterSpacing": 4,
             "opacity": 0,
             "paddingHorizontal": 8,
             "position": "absolute",

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
-import { Platform } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import PinInput, { getState, normalizeValue } from '..';
 
@@ -68,16 +67,6 @@ describe('rendering', () => {
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
-
-  it('renders a placeholder if the value is empty on android', () => {
-    Platform.OS = 'android';
-
-    const wrapper = renderWithTheme(
-      <PinInput value="" onChangeText={jest.fn()} />
-    );
-
-    expect(wrapper.getByDisplayValue('*')).toBeTruthy();
-  });
 });
 
 describe('behaviors', () => {
@@ -150,6 +139,29 @@ describe('behaviors', () => {
       }
     }
   );
+
+  it('slice text when the text is already at the length', () => {
+    const onFulfill = jest.fn();
+    const SamplePinInput = () => {
+      const [pin, setPin] = React.useState('1234');
+
+      return (
+        <PinInput value={pin} onChangeText={setPin} onFulfill={onFulfill} />
+      );
+    };
+    const { getByTestId, getByDisplayValue, queryByDisplayValue } =
+      renderWithTheme(<SamplePinInput />);
+
+    // Fill with full length
+    const pinInput = getByTestId('pin-hidden-input');
+    fireEvent.changeText(pinInput, '12349');
+    expect(getByDisplayValue('9')).toBeTruthy();
+
+    // Add more text
+    fireEvent.changeText(pinInput, '581');
+    expect(queryByDisplayValue('4567')).toBeNull();
+    expect(getByDisplayValue('581')).toBeTruthy();
+  });
 });
 
 describe('getState', () => {

package/src/components/PinInput/index.tsx

@@ -4,10 +4,11 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from 'react';
-import { InteractionManager, Platform, TextInput } from 'react-native';
+import { InteractionManager, TextInput } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 import Icon from '../Icon';
 import PinCell from './PinCell';
@@ -127,9 +128,6 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
     const state = getState({ disabled, error });
     const trimmedValue = normalizeValue(value, length);
 
-    const maskedValueWithExtraSpace =
-      Platform.OS === 'android' && !trimmedValue ? '*' : trimmedValue;
-
     const focus = useCallback(() => {
       if (inputRef?.current) {
         inputRef.current.focus();
@@ -143,19 +141,30 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
         setFocused(false);
       }
     }, []);
-
     const changeText = useCallback(
       (text: string) => {
-        // Prevent user from entering more than the length
         const trimmedPin = normalizeValue(text, length);
 
-        onChangeText?.(trimmedPin);
+        // If current value is already the length, and user is not deleting,
+        // replace it with the new text, starting from the length
+        if (
+          trimmedValue.length === length &&
+          trimmedValue.length <= text.length
+        ) {
+          // Slice the text, starting from the length position
+          const slicedText = text.slice(length);
+
+          onChangeText?.(normalizeValue(slicedText, length));
+        } else {
+          // Prevent user from entering more than the length
+          onChangeText?.(trimmedPin);
+        }
 
         if (trimmedPin.length === length) {
           onFulfill?.(trimmedPin);
         }
       },
-      [length, onChangeText, onFulfill]
+      [length, onChangeText, onFulfill, trimmedValue.length]
     );
 
     useEffect(() => {
@@ -170,6 +179,13 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
       blur,
     }));
 
+    const selection = useMemo(
+      () => ({
+        start: trimmedValue.length,
+      }),
+      [trimmedValue]
+    );
+
     return (
       <StyledWrapper style={style} testID={testID}>
         <StyledPinWrapper>
@@ -199,7 +215,7 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
         <StyledHiddenInput
           themePinLength={length}
           ref={inputRef}
-          value={maskedValueWithExtraSpace}
+          value={trimmedValue}
           onChangeText={changeText}
           secureTextEntry={secure}
           editable={!disabled}
@@ -212,6 +228,7 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
           textContentType={textContentType}
           autoComplete={autoComplete}
           selectTextOnFocus={false}
+          selection={selection}
         />
       </StyledWrapper>
     );

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

@@ -667,7 +667,7 @@ exports[`theme returns correct theme object 1`] = `
       "space": {
         "errorMessagePadding": 4,
         "hiddenInputHorrizontalPadding": 8,
-        "hiddenInputText": 32,
+        "hiddenInputText": 4,
         "spacer": 16,
       },
     },

package/src/theme/components/pinInput.ts

@@ -37,7 +37,7 @@ const getPinInputTheme = (theme: GlobalTheme) => {
   const space = {
     spacer: theme.space.medium,
     errorMessagePadding: theme.space.xsmall,
-    hiddenInputText: theme.space.xlarge,
+    hiddenInputText: theme.space.xsmall,
     hiddenInputHorrizontalPadding: theme.space.small,
   };
 

package/stats/8.64.8/rn-stats.html

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