@hero-design/rn 8.64.6 → 8.64.7-alpha.0

package/es/index.js

@@ -15609,7 +15609,8 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     disabled: disabled,
     error: error
   });
-  var maskedValueWithExtraSpace = Platform.OS === 'android' && !value ? '*' : value;
+  var trimmedValue = ((value === null || value === void 0 ? void 0 : value.match(/\d/g)) || []).join('').slice(0, length);
+  var maskedValueWithExtraSpace = Platform.OS === 'android' && !trimmedValue ? '*' : trimmedValue;
   var focus = useCallback(function () {
     if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
       inputRef.current.focus();
@@ -15624,9 +15625,11 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }, []);
   var changeText = useCallback(function (text) {
     var pin = (text.match(/\d/g) || []).join('');
-    onChangeText === null || onChangeText === void 0 || onChangeText(pin);
-    if (pin.length === length) {
-      onFulfill === null || onFulfill === void 0 || onFulfill(pin);
+    // Prevent user from entering more than the length
+    var trimmedPin = pin.slice(0, length);
+    onChangeText === null || onChangeText === void 0 || onChangeText(trimmedPin);
+    if (trimmedPin.length === length) {
+      onFulfill === null || onFulfill === void 0 || onFulfill(trimmedPin);
     }
   }, [length, onChangeText, onFulfill]);
   useEffect(function () {
@@ -15648,9 +15651,9 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: index
     }, index !== 0 && /*#__PURE__*/React__default.createElement(StyledSpacer, null), /*#__PURE__*/React__default.createElement(PinCell, {
-      value: value.charAt(index),
+      value: trimmedValue.charAt(index),
       secure: secure,
-      focused: focused && index === value.length,
+      focused: focused && index === trimmedValue.length,
       state: state
     }));
   })), state === 'error' && /*#__PURE__*/React__default.createElement(StyledErrorContainer, null, /*#__PURE__*/React__default.createElement(Icon, {
@@ -15668,7 +15671,6 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     autoFocus: autoFocus,
     onFocus: focus,
     onBlur: blur,
-    maxLength: length,
     pointerEvents: "box-none",
     keyboardType: "numeric",
     testID: "pin-hidden-input",

package/lib/index.js

@@ -15639,7 +15639,8 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     disabled: disabled,
     error: error
   });
-  var maskedValueWithExtraSpace = reactNative.Platform.OS === 'android' && !value ? '*' : value;
+  var trimmedValue = ((value === null || value === void 0 ? void 0 : value.match(/\d/g)) || []).join('').slice(0, 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();
@@ -15654,9 +15655,11 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   }, []);
   var changeText = React.useCallback(function (text) {
     var pin = (text.match(/\d/g) || []).join('');
-    onChangeText === null || onChangeText === void 0 || onChangeText(pin);
-    if (pin.length === length) {
-      onFulfill === null || onFulfill === void 0 || onFulfill(pin);
+    // Prevent user from entering more than the length
+    var trimmedPin = pin.slice(0, length);
+    onChangeText === null || onChangeText === void 0 || onChangeText(trimmedPin);
+    if (trimmedPin.length === length) {
+      onFulfill === null || onFulfill === void 0 || onFulfill(trimmedPin);
     }
   }, [length, onChangeText, onFulfill]);
   React.useEffect(function () {
@@ -15678,9 +15681,9 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: index
     }, index !== 0 && /*#__PURE__*/React__default["default"].createElement(StyledSpacer, null), /*#__PURE__*/React__default["default"].createElement(PinCell, {
-      value: value.charAt(index),
+      value: trimmedValue.charAt(index),
       secure: secure,
-      focused: focused && index === value.length,
+      focused: focused && index === trimmedValue.length,
       state: state
     }));
   })), state === 'error' && /*#__PURE__*/React__default["default"].createElement(StyledErrorContainer, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
@@ -15698,7 +15701,6 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     autoFocus: autoFocus,
     onFocus: focus,
     onBlur: blur,
-    maxLength: length,
     pointerEvents: "box-none",
     keyboardType: "numeric",
     testID: "pin-hidden-input",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.64.6",
+  "version": "8.64.7-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/index.tsx

@@ -121,8 +121,10 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
     const inputRef = useRef<TextInput>(null);
     const [focused, setFocused] = useState(autoFocus);
     const state = getState({ disabled, error });
+    const trimmedValue = (value?.match(/\d/g) || []).join('').slice(0, length);
+
     const maskedValueWithExtraSpace =
-      Platform.OS === 'android' && !value ? '*' : value;
+      Platform.OS === 'android' && !trimmedValue ? '*' : trimmedValue;
 
     const focus = useCallback(() => {
       if (inputRef?.current) {
@@ -141,11 +143,13 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
     const changeText = useCallback(
       (text: string) => {
         const pin = (text.match(/\d/g) || []).join('');
+        // Prevent user from entering more than the length
+        const trimmedPin = pin.slice(0, length);
 
-        onChangeText?.(pin);
+        onChangeText?.(trimmedPin);
 
-        if (pin.length === length) {
-          onFulfill?.(pin);
+        if (trimmedPin.length === length) {
+          onFulfill?.(trimmedPin);
         }
       },
       [length, onChangeText, onFulfill]
@@ -170,9 +174,9 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
             <React.Fragment key={index}>
               {index !== 0 && <StyledSpacer />}
               <PinCell
-                value={value.charAt(index)}
+                value={trimmedValue.charAt(index)}
                 secure={secure}
-                focused={focused && index === value.length}
+                focused={focused && index === trimmedValue.length}
                 state={state}
               />
             </React.Fragment>
@@ -199,7 +203,6 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
           autoFocus={autoFocus}
           onFocus={focus}
           onBlur={blur}
-          maxLength={length}
           pointerEvents="box-none"
           keyboardType="numeric"
           testID="pin-hidden-input"

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 1.2s