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

package/es/index.js

@@ -15582,6 +15582,11 @@ function getState(_ref) {
   }
   return 'default';
 }
+// Normalize the value to only contain numbers and limit the length
+var normalizeValue = function normalizeValue(value) {
+  var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 4;
+  return ((value === null || value === void 0 ? void 0 : value.match(/\d/g)) || []).join('').slice(0, length);
+};
 var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var _ref2$value = _ref2.value,
     value = _ref2$value === void 0 ? '' : _ref2$value,
@@ -15609,7 +15614,12 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     disabled: disabled,
     error: error
   });
-  var maskedValueWithExtraSpace = Platform.OS === 'android' && !value ? '*' : value;
+  var trimmedValue = normalizeValue(value, length);
+  var maskedValueWithExtraSpace = Platform.OS === 'android' && !trimmedValue ? '*' : trimmedValue;
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hasFulfilled = _useState4[0],
+    setHasFulfilled = _useState4[1];
   var focus = useCallback(function () {
     if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
       inputRef.current.focus();
@@ -15623,12 +15633,22 @@ 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);
+    // If the input is already fulfilled and the user tries to remove characters
+    if (hasFulfilled && text.length < length) {
+      setHasFulfilled(false);
+    }
+    // If the input is already fulfilled and the user tries to add more characters
+    if (hasFulfilled && ((text === null || text === void 0 ? void 0 : text.match(/\d/g)) || []).join('').length > length) {
+      return;
+    }
+    // Prevent user from entering more than the length
+    var trimmedPin = normalizeValue(text, length);
+    onChangeText === null || onChangeText === void 0 || onChangeText(trimmedPin);
+    if (trimmedPin.length === length) {
+      onFulfill === null || onFulfill === void 0 || onFulfill(trimmedPin);
+      setHasFulfilled(true);
     }
-  }, [length, onChangeText, onFulfill]);
+  }, [length, onChangeText, onFulfill, hasFulfilled]);
   useEffect(function () {
     // Must run after animations for keyboard to automatically open
     if (autoFocus) {
@@ -15648,9 +15668,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 +15688,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

@@ -15612,6 +15612,11 @@ function getState(_ref) {
   }
   return 'default';
 }
+// Normalize the value to only contain numbers and limit the length
+var normalizeValue = function normalizeValue(value) {
+  var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 4;
+  return ((value === null || value === void 0 ? void 0 : value.match(/\d/g)) || []).join('').slice(0, length);
+};
 var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var _ref2$value = _ref2.value,
     value = _ref2$value === void 0 ? '' : _ref2$value,
@@ -15639,7 +15644,12 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     disabled: disabled,
     error: error
   });
-  var maskedValueWithExtraSpace = reactNative.Platform.OS === 'android' && !value ? '*' : value;
+  var trimmedValue = normalizeValue(value, length);
+  var maskedValueWithExtraSpace = reactNative.Platform.OS === 'android' && !trimmedValue ? '*' : trimmedValue;
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hasFulfilled = _useState4[0],
+    setHasFulfilled = _useState4[1];
   var focus = React.useCallback(function () {
     if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
       inputRef.current.focus();
@@ -15653,12 +15663,22 @@ 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);
+    // If the input is already fulfilled and the user tries to remove characters
+    if (hasFulfilled && text.length < length) {
+      setHasFulfilled(false);
+    }
+    // If the input is already fulfilled and the user tries to add more characters
+    if (hasFulfilled && ((text === null || text === void 0 ? void 0 : text.match(/\d/g)) || []).join('').length > length) {
+      return;
+    }
+    // Prevent user from entering more than the length
+    var trimmedPin = normalizeValue(text, length);
+    onChangeText === null || onChangeText === void 0 || onChangeText(trimmedPin);
+    if (trimmedPin.length === length) {
+      onFulfill === null || onFulfill === void 0 || onFulfill(trimmedPin);
+      setHasFulfilled(true);
     }
-  }, [length, onChangeText, onFulfill]);
+  }, [length, onChangeText, onFulfill, hasFulfilled]);
   React.useEffect(function () {
     // Must run after animations for keyboard to automatically open
     if (autoFocus) {
@@ -15678,9 +15698,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 +15718,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.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

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

@@ -205,7 +205,6 @@ exports[`rendering renders correctly 1`] = `
       autoFocus={false}
       editable={true}
       keyboardType="numeric"
-      maxLength={4}
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
@@ -462,7 +461,6 @@ exports[`rendering renders correctly when disabled 1`] = `
       autoFocus={false}
       editable={false}
       keyboardType="numeric"
-      maxLength={4}
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
@@ -837,7 +835,6 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
       autoFocus={false}
       editable={true}
       keyboardType="numeric"
-      maxLength={6}
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
@@ -1147,7 +1144,6 @@ exports[`rendering renders correctly when there is error 1`] = `
       autoFocus={false}
       editable={true}
       keyboardType="numeric"
-      maxLength={4}
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
@@ -1405,7 +1401,6 @@ exports[`rendering renders correctly with textContentType and autoComplete 1`] =
       autoFocus={false}
       editable={true}
       keyboardType="numeric"
-      maxLength={4}
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
 import { Platform } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import PinInput, { getState } from '..';
+import PinInput, { getState, normalizeValue } from '..';
 
 describe('rendering', () => {
   it('renders correctly', () => {
@@ -94,6 +94,62 @@ describe('behaviors', () => {
     expect(onChangeText).toHaveBeenCalledWith('1234');
     expect(onFulfill).toHaveBeenCalledWith('1234');
   });
+
+  it.each`
+    value          | expected
+    ${'12 34'}     | ${'1234'}
+    ${'1 2 3 4'}   | ${'1234'}
+    ${' 1 2 3 4 '} | ${'1234'}
+  `(
+    'automatically trims whitespace characters when value is $value',
+    ({ value, expected }) => {
+      const onChangeText = jest.fn();
+      const onFulfill = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <PinInput
+          secure={false}
+          value=""
+          onChangeText={onChangeText}
+          onFulfill={onFulfill}
+        />
+      );
+
+      const pinInput = getByTestId('pin-hidden-input');
+      fireEvent.changeText(pinInput, value);
+
+      expect(onChangeText).toHaveBeenCalledWith(expected);
+      expect(onFulfill).toHaveBeenCalledWith(expected);
+    }
+  );
+
+  it.each`
+    value      | length | expected
+    ${'1234'}  | ${4}   | ${'1234'}
+    ${'12345'} | ${4}   | ${'1234'}
+    ${'1234'}  | ${6}   | ${'1234'}
+  `(
+    'limits the value when value is $value and length is $length',
+    ({ value, length, expected }) => {
+      const onChangeText = jest.fn();
+      const onFulfill = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <PinInput
+          value=""
+          length={length}
+          onChangeText={onChangeText}
+          onFulfill={onFulfill}
+        />
+      );
+
+      const pinInput = getByTestId('pin-hidden-input');
+      fireEvent.changeText(pinInput, value);
+
+      expect(onChangeText).toHaveBeenCalledWith(expected);
+      if (length === expected.legth) {
+        expect(onFulfill).toHaveBeenCalledWith(expected);
+      }
+    }
+  );
 });
 
 describe('getState', () => {
@@ -115,3 +171,30 @@ describe('getState', () => {
     }
   );
 });
+
+describe('normalizeValue', () => {
+  it.each`
+    value        | expected
+    ${''}        | ${''}
+    ${'1'}       | ${'1'}
+    ${'1234 '}   | ${'1234'}
+    ${' 1234'}   | ${'1234'}
+    ${'1 2 3 4'} | ${'1234'}
+  `('returns correct value without any whitespace', ({ value, expected }) => {
+    expect(normalizeValue(value)).toBe(expected);
+  });
+
+  it.each`
+    value      | length       | expected
+    ${'1234'}  | ${undefined} | ${'1234'}
+    ${'1234'}  | ${4}         | ${'1234'}
+    ${'12345'} | ${4}         | ${'1234'}
+    ${'1234'}  | ${6}         | ${'1234'}
+    ${'12345'} | ${6}         | ${'12345'}
+  `(
+    'returns correct value when length is $length',
+    ({ value, length, expected }) => {
+      expect(normalizeValue(value, length)).toBe(expected);
+    }
+  );
+});

package/src/components/PinInput/index.tsx

@@ -99,6 +99,10 @@ export interface PinInputHandler {
    */
   blur: () => void;
 }
+// Normalize the value to only contain numbers and limit the length
+export const normalizeValue = (value?: string, length = 4) => {
+  return (value?.match(/\d/g) || []).join('').slice(0, length);
+};
 
 const PinInput = forwardRef<PinInputHandler, PinInputProps>(
   (
@@ -121,8 +125,12 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
     const inputRef = useRef<TextInput>(null);
     const [focused, setFocused] = useState(autoFocus);
     const state = getState({ disabled, error });
+    const trimmedValue = normalizeValue(value, length);
+
     const maskedValueWithExtraSpace =
-      Platform.OS === 'android' && !value ? '*' : value;
+      Platform.OS === 'android' && !trimmedValue ? '*' : trimmedValue;
+
+    const [hasFulfilled, setHasFulfilled] = useState(false);
 
     const focus = useCallback(() => {
       if (inputRef?.current) {
@@ -140,15 +148,30 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
 
     const changeText = useCallback(
       (text: string) => {
-        const pin = (text.match(/\d/g) || []).join('');
+        // If the input is already fulfilled and the user tries to remove characters
+        if (hasFulfilled && text.length < length) {
+          setHasFulfilled(false);
+        }
+
+        // If the input is already fulfilled and the user tries to add more characters
+        if (
+          hasFulfilled &&
+          (text?.match(/\d/g) || []).join('').length > length
+        ) {
+          return;
+        }
+
+        // Prevent user from entering more than the length
+        const trimmedPin = normalizeValue(text, length);
 
-        onChangeText?.(pin);
+        onChangeText?.(trimmedPin);
 
-        if (pin.length === length) {
-          onFulfill?.(pin);
+        if (trimmedPin.length === length) {
+          onFulfill?.(trimmedPin);
+          setHasFulfilled(true);
         }
       },
-      [length, onChangeText, onFulfill]
+      [length, onChangeText, onFulfill, hasFulfilled]
     );
 
     useEffect(() => {
@@ -170,9 +193,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 +222,6 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
           autoFocus={autoFocus}
           onFocus={focus}
           onBlur={blur}
-          maxLength={length}
           pointerEvents="box-none"
           keyboardType="numeric"
           testID="pin-hidden-input"

package/types/components/PinInput/index.d.ts

@@ -64,5 +64,6 @@ export interface PinInputHandler {
      */
     blur: () => void;
 }
+export declare const normalizeValue: (value?: string, length?: number) => string;
 declare const PinInput: React.ForwardRefExoticComponent<PinInputProps & React.RefAttributes<PinInputHandler>>;
 export default PinInput;

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