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

package/es/index.js

@@ -2885,7 +2885,7 @@ var getPinInputTheme = function getPinInputTheme(theme) {
   var space = {
     spacer: theme.space.medium,
     errorMessagePadding: theme.space.xsmall,
-    hiddenInputText: theme.space.xlarge,
+    hiddenInputText: theme.space.xsmall,
     hiddenInputHorrizontalPadding: theme.space.small
   };
   var radii = {
@@ -15526,6 +15526,7 @@ var StyledHiddenInput = index$9(TextInput$1)(function (_ref6) {
     top: 0,
     right: 0,
     width: themePinLength * cellWidth + (themePinLength - 1) * spacerWidth,
+    overflow: 'hidden',
     height: '100%',
     fontSize: theme.__hd__.pinInput.fontSizes.hiddenInputText,
     letterSpacing: theme.__hd__.pinInput.space.hiddenInputText,
@@ -15615,7 +15616,6 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     error: error
   });
   var trimmedValue = normalizeValue(value, length);
-  var maskedValueWithExtraSpace = Platform.OS === 'android' && !trimmedValue ? '*' : trimmedValue;
   var focus = useCallback(function () {
     if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
       inputRef.current.focus();
@@ -15629,13 +15629,20 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     }
   }, []);
   var changeText = useCallback(function (text) {
-    // Prevent user from entering more than the length
     var trimmedPin = normalizeValue(text, length);
-    onChangeText === null || onChangeText === void 0 || onChangeText(trimmedPin);
+    // If current value is already the length, 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
+      var slicedText = text.slice(length);
+      onChangeText === null || onChangeText === void 0 || onChangeText(normalizeValue(slicedText, length));
+    } else {
+      // Prevent user from entering more than the length
+      onChangeText === null || onChangeText === void 0 || onChangeText(trimmedPin);
+    }
     if (trimmedPin.length === length) {
       onFulfill === null || onFulfill === void 0 || onFulfill(trimmedPin);
     }
-  }, [length, onChangeText, onFulfill]);
+  }, [length, onChangeText, onFulfill, trimmedValue.length]);
   useEffect(function () {
     // Must run after animations for keyboard to automatically open
     if (autoFocus) {
@@ -15668,7 +15675,7 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }), /*#__PURE__*/React__default.createElement(StyledErrorMessage, null, error)), /*#__PURE__*/React__default.createElement(StyledHiddenInput, {
     themePinLength: length,
     ref: inputRef,
-    value: maskedValueWithExtraSpace,
+    value: trimmedValue,
     onChangeText: changeText,
     secureTextEntry: secure,
     editable: !disabled,
@@ -15680,7 +15687,11 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     testID: "pin-hidden-input",
     textContentType: textContentType,
     autoComplete: autoComplete,
-    selectTextOnFocus: false
+    selectTextOnFocus: false,
+    selection: {
+      start: trimmedValue.length,
+      end: trimmedValue.length + 1
+    }
   }));
 });
 PinInput.displayName = 'PinInput';

package/lib/index.js

@@ -2915,7 +2915,7 @@ var getPinInputTheme = function getPinInputTheme(theme) {
   var space = {
     spacer: theme.space.medium,
     errorMessagePadding: theme.space.xsmall,
-    hiddenInputText: theme.space.xlarge,
+    hiddenInputText: theme.space.xsmall,
     hiddenInputHorrizontalPadding: theme.space.small
   };
   var radii = {
@@ -15556,6 +15556,7 @@ var StyledHiddenInput = index$9(reactNative.TextInput)(function (_ref6) {
     top: 0,
     right: 0,
     width: themePinLength * cellWidth + (themePinLength - 1) * spacerWidth,
+    overflow: 'hidden',
     height: '100%',
     fontSize: theme.__hd__.pinInput.fontSizes.hiddenInputText,
     letterSpacing: theme.__hd__.pinInput.space.hiddenInputText,
@@ -15645,7 +15646,6 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     error: error
   });
   var trimmedValue = normalizeValue(value, length);
-  var maskedValueWithExtraSpace = reactNative.Platform.OS === 'android' && !trimmedValue ? '*' : trimmedValue;
   var focus = React.useCallback(function () {
     if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
       inputRef.current.focus();
@@ -15659,13 +15659,20 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     }
   }, []);
   var changeText = React.useCallback(function (text) {
-    // Prevent user from entering more than the length
     var trimmedPin = normalizeValue(text, length);
-    onChangeText === null || onChangeText === void 0 || onChangeText(trimmedPin);
+    // If current value is already the length, 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
+      var slicedText = text.slice(length);
+      onChangeText === null || onChangeText === void 0 || onChangeText(normalizeValue(slicedText, length));
+    } else {
+      // Prevent user from entering more than the length
+      onChangeText === null || onChangeText === void 0 || onChangeText(trimmedPin);
+    }
     if (trimmedPin.length === length) {
       onFulfill === null || onFulfill === void 0 || onFulfill(trimmedPin);
     }
-  }, [length, onChangeText, onFulfill]);
+  }, [length, onChangeText, onFulfill, trimmedValue.length]);
   React.useEffect(function () {
     // Must run after animations for keyboard to automatically open
     if (autoFocus) {
@@ -15698,7 +15705,7 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   }), /*#__PURE__*/React__default["default"].createElement(StyledErrorMessage, null, error)), /*#__PURE__*/React__default["default"].createElement(StyledHiddenInput, {
     themePinLength: length,
     ref: inputRef,
-    value: maskedValueWithExtraSpace,
+    value: trimmedValue,
     onChangeText: changeText,
     secureTextEntry: secure,
     editable: !disabled,
@@ -15710,7 +15717,11 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     testID: "pin-hidden-input",
     textContentType: textContentType,
     autoComplete: autoComplete,
-    selectTextOnFocus: false
+    selectTextOnFocus: false,
+    selection: {
+      start: trimmedValue.length,
+      end: trimmedValue.length + 1
+    }
   }));
 });
 PinInput.displayName = 'PinInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.64.8",
+  "version": "8.64.9-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -93,5 +93,6 @@
     "ts-jest": "^29.1.1",
     "typescript": "4.8.4"
   },
-  "prettier": "prettier-config-hd"
+  "prettier": "prettier-config-hd",
+  "react-native": "src/index.ts"
 }

package/src/components/PinInput/StyledPinInput.tsx

@@ -70,6 +70,7 @@ export const StyledHiddenInput = styled(TextInput)<{ themePinLength: number }>(
       top: 0,
       right: 0,
       width: themePinLength * cellWidth + (themePinLength - 1) * spacerWidth,
+      overflow: 'hidden',
       height: '100%',
       fontSize: theme.__hd__.pinInput.fontSizes.hiddenInputText,
       letterSpacing: theme.__hd__.pinInput.space.hiddenInputText,

package/src/components/PinInput/index.tsx

@@ -7,7 +7,7 @@ import React, {
   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 +127,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 +140,29 @@ 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, 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(() => {
@@ -199,7 +206,7 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
         <StyledHiddenInput
           themePinLength={length}
           ref={inputRef}
-          value={maskedValueWithExtraSpace}
+          value={trimmedValue}
           onChangeText={changeText}
           secureTextEntry={secure}
           editable={!disabled}
@@ -212,6 +219,10 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
           textContentType={textContentType}
           autoComplete={autoComplete}
           selectTextOnFocus={false}
+          selection={{
+            start: trimmedValue.length,
+            end: trimmedValue.length + 1,
+          }}
         />
       </StyledWrapper>
     );

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>
 
+>
+

package/.turbo/turbo-build.log

@@ -1,5 +0,0 @@
-
-src/index.ts → lib/index.js, es/index.js...
-(!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
-(!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-created lib/index.js, es/index.js in 1m 2.7s