@pagopa/io-app-design-system 1.36.0 → 1.36.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/lib/commonjs/components/otpInput/OTPInput.js +14 -11
  2. package/lib/commonjs/components/otpInput/OTPInput.js.map +1 -1
  3. package/lib/module/components/otpInput/OTPInput.js +14 -11
  4. package/lib/module/components/otpInput/OTPInput.js.map +1 -1
  5. package/lib/typescript/components/otpInput/OTPInput.d.ts +5 -1
  6. package/lib/typescript/components/otpInput/OTPInput.d.ts.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/otpInput/OTPInput.tsx +105 -93
package/lib/commonjs/components/otpInput/OTPInput.js CHANGED
@@ -29,19 +29,21 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
29
29
  * @param errorMessage - The error message to display
30
30
  * @returns
31
31
  */
32
- const OTPInput = _ref => {
32
+ const OTPInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
33
33
  let {
34
34
  value,
35
35
  onValueChange,
36
36
  length,
37
+ accessibilityLabel,
38
+ accessibilityHint,
37
39
  onValidate,
38
40
  errorMessage = "",
39
41
  secret = false,
40
- autocomplete = false
42
+ autocomplete = false,
43
+ inputAccessoryViewID
41
44
  } = _ref;
42
45
  const [hasFocus, setHasFocus] = React.useState(false);
43
46
  const [hasError, setHasError] = React.useState(false);
44
- const [inputValue, setInputValue] = React.useState(value);
45
47
  const {
46
48
  translate,
47
49
  animatedStyle,
@@ -65,7 +67,6 @@ const OTPInput = _ref => {
65
67
  // eslint-disable-next-line functional/immutable-data
66
68
  timerRef.current = setTimeout(() => {
67
69
  setHasError(false);
68
- setInputValue("");
69
70
  onValueChange("");
70
71
  }, 500);
71
72
  }
@@ -75,7 +76,6 @@ const OTPInput = _ref => {
75
76
  if (value.length > length) {
76
77
  return;
77
78
  }
78
- setInputValue(value);
79
79
  onValueChange(value);
80
80
  handleValidate(value);
81
81
  };
@@ -89,16 +89,18 @@ const OTPInput = _ref => {
89
89
  (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
90
90
  setHasFocus(true);
91
91
  },
92
+ ref: ref,
92
93
  style: [_IOStyles.IOStyles.row, {
93
94
  justifyContent: "space-around"
94
95
  }],
95
96
  accessible: true,
96
- accessibilityLabel: "OTP Input",
97
+ accessibilityLabel: accessibilityLabel,
98
+ accessibilityHint: accessibilityHint,
97
99
  accessibilityValue: {
98
- text: inputValue
100
+ text: value
99
101
  }
100
102
  }, /*#__PURE__*/React.createElement(_reactNative.TextInput, {
101
- value: inputValue,
103
+ value: value,
102
104
  onChangeText: handleChange,
103
105
  style: {
104
106
  position: "absolute",
@@ -112,12 +114,13 @@ const OTPInput = _ref => {
112
114
  returnKeyType: "done",
113
115
  textContentType: "oneTimeCode",
114
116
  autoComplete: autocomplete ? "sms-otp" : undefined,
117
+ inputAccessoryViewID: inputAccessoryViewID,
115
118
  accessible: true
116
119
  }), [...Array(length)].map((_, i) => /*#__PURE__*/React.createElement(_BoxedInput.BoxedInput, {
117
120
  key: i,
118
- status: hasError ? "error" : hasFocus && inputValue.length === i ? "focus" : "default",
121
+ status: hasError ? "error" : hasFocus && value.length === i ? "focus" : "default",
119
122
  secret: secret,
120
- value: inputValue[i]
123
+ value: value[i]
121
124
  }))), /*#__PURE__*/React.createElement(_spacer.VSpacer, {
122
125
  size: 4
123
126
  }), hasError && errorMessage && /*#__PURE__*/React.createElement(_typography.LabelSmall, {
@@ -126,6 +129,6 @@ const OTPInput = _ref => {
126
129
  textAlign: "center"
127
130
  }
128
131
  }, errorMessage));
129
- };
132
+ });
130
133
  exports.OTPInput = OTPInput;
131
134
  //# sourceMappingURL=OTPInput.js.map
package/lib/commonjs/components/otpInput/OTPInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_interopRequireDefault","_IOStyles","_typography","_functions","_spacer","_useErrorShakeAnimation","_BoxedInput","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","OTPInput","_ref","value","onValueChange","length","onValidate","errorMessage","secret","autocomplete","hasFocus","setHasFocus","useState","hasError","setHasError","inputValue","setInputValue","translate","animatedStyle","shakeAnimation","useErrorShakeAnimation","inputRef","createRef","timerRef","useRef","handleValidate","val","isValid","triggerHaptic","current","clearTimeout","setTimeout","useEffect","handleChange","createElement","View","style","flexGrow","Pressable","onPress","_inputRef$current","focus","IOStyles","row","justifyContent","accessible","accessibilityLabel","accessibilityValue","text","TextInput","onChangeText","position","opacity","maxLength","ref","onBlur","keyboardType","inputMode","returnKeyType","textContentType","autoComplete","undefined","Array","map","_","i","BoxedInput","status","VSpacer","size","LabelSmall","color","textAlign","exports"],"sourceRoot":"../../../../src","sources":["components/otpInput/OTPInput.tsx"],"mappings":"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"}
1
+ {"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_interopRequireDefault","_IOStyles","_typography","_functions","_spacer","_useErrorShakeAnimation","_BoxedInput","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","OTPInput","forwardRef","_ref","ref","value","onValueChange","length","accessibilityLabel","accessibilityHint","onValidate","errorMessage","secret","autocomplete","inputAccessoryViewID","hasFocus","setHasFocus","useState","hasError","setHasError","translate","animatedStyle","shakeAnimation","useErrorShakeAnimation","inputRef","createRef","timerRef","useRef","handleValidate","val","isValid","triggerHaptic","current","clearTimeout","setTimeout","useEffect","handleChange","createElement","View","style","flexGrow","Pressable","onPress","_inputRef$current","focus","IOStyles","row","justifyContent","accessible","accessibilityValue","text","TextInput","onChangeText","position","opacity","maxLength","onBlur","keyboardType","inputMode","returnKeyType","textContentType","autoComplete","undefined","Array","map","_","i","BoxedInput","status","VSpacer","size","LabelSmall","color","textAlign","exports"],"sourceRoot":"../../../../src","sources":["components/otpInput/OTPInput.tsx"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,sBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,WAAA,GAAAL,OAAA;AACA,IAAAM,UAAA,GAAAN,OAAA;AACA,IAAAO,OAAA,GAAAP,OAAA;AACA,IAAAQ,uBAAA,GAAAR,OAAA;AACA,IAAAS,WAAA,GAAAT,OAAA;AAA0C,SAAAG,uBAAAO,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAf,wBAAAW,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAQ,KAAA,GAAAL,wBAAA,CAAAC,WAAA,OAAAI,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,CAAAT,OAAA,GAAAF,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AAe1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMW,QAAQ,gBAAGlC,KAAK,CAACmC,UAAU,CACtC,CAAAC,IAAA,EAaEC,GAAG,KACA;EAAA,IAbH;IACEC,KAAK;IACLC,aAAa;IACbC,MAAM;IACNC,kBAAkB;IAClBC,iBAAiB;IACjBC,UAAU;IACVC,YAAY,GAAG,EAAE;IACjBC,MAAM,GAAG,KAAK;IACdC,YAAY,GAAG,KAAK;IACpBC;EACF,CAAC,GAAAX,IAAA;EAGD,MAAM,CAACY,QAAQ,EAAEC,WAAW,CAAC,GAAGjD,KAAK,CAACkD,QAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGpD,KAAK,CAACkD,QAAQ,CAAC,KAAK,CAAC;EAErD,MAAM;IAAEG,SAAS;IAAEC,aAAa;IAAEC;EAAe,CAAC,GAChD,IAAAC,8CAAsB,EAAC,CAAC;EAE1B,MAAMC,QAAQ,gBAAGzD,KAAK,CAAC0D,SAAS,CAAY,CAAC;EAC7C,MAAMC,QAAQ,GAAG3D,KAAK,CAAC4D,MAAM,CAAiB,CAAC;EAE/C,MAAMC,cAAc,GAAIC,GAAW,IAAK;IACtC,IAAI,CAACnB,UAAU,IAAImB,GAAG,CAACtB,MAAM,GAAGA,MAAM,EAAE;MACtC;IACF;IACA,MAAMuB,OAAO,GAAGpB,UAAU,CAACmB,GAAG,CAAC;IAC/B,IAAI,CAACC,OAAO,EAAE;MACZX,WAAW,CAAC,IAAI,CAAC;MACjB,IAAAY,wBAAa,EAAC,mBAAmB,CAAC;MAClC;MACAX,SAAS,CAACf,KAAK,GAAGiB,cAAc,CAAC,CAAC;MAElC,IAAII,QAAQ,CAACM,OAAO,EAAE;QACpBC,YAAY,CAACP,QAAQ,CAACM,OAAO,CAAC;MAChC;MACA;MACAN,QAAQ,CAACM,OAAO,GAAGE,UAAU,CAAC,MAAM;QAClCf,WAAW,CAAC,KAAK,CAAC;QAClBb,aAAa,CAAC,EAAE,CAAC;MACnB,CAAC,EAAE,GAAG,CAAC;IACT;EACF,CAAC;EAEDvC,KAAK,CAACoE,SAAS,CAAC,MAAM,MAAMF,YAAY,CAACP,QAAQ,CAACM,OAAO,CAAC,EAAE,EAAE,CAAC;EAE/D,MAAMI,YAAY,GAAI/B,KAAa,IAAK;IACtC,IAAIA,KAAK,CAACE,MAAM,GAAGA,MAAM,EAAE;MACzB;IACF;IACAD,aAAa,CAACD,KAAK,CAAC;IACpBuB,cAAc,CAACvB,KAAK,CAAC;EACvB,CAAC;EAED,oBACEtC,KAAA,CAAAsE,aAAA,CAAClE,sBAAA,CAAAU,OAAQ,CAACyD,IAAI;IAACC,KAAK,EAAE,CAAC;MAAEC,QAAQ,EAAE;IAAE,CAAC,EAAEnB,aAAa;EAAE,gBACrDtD,KAAA,CAAAsE,aAAA,CAACnE,YAAA,CAAAuE,SAAS;IACRC,OAAO,EAAEA,CAAA,KAAM;MAAA,IAAAC,iBAAA;MACb,CAAAA,iBAAA,GAAAnB,QAAQ,CAACQ,OAAO,cAAAW,iBAAA,eAAhBA,iBAAA,CAAkBC,KAAK,CAAC,CAAC;MACzB5B,WAAW,CAAC,IAAI,CAAC;IACnB,CAAE;IACFZ,GAAG,EAAEA,GAAI;IACTmC,KAAK,EAAE,CAACM,kBAAQ,CAACC,GAAG,EAAE;MAAEC,cAAc,EAAE;IAAe,CAAC,CAAE;IAC1DC,UAAU,EAAE,IAAK;IACjBxC,kBAAkB,EAAEA,kBAAmB;IACvCC,iBAAiB,EAAEA,iBAAkB;IACrCwC,kBAAkB,EAAE;MAAEC,IAAI,EAAE7C;IAAM;EAAE,gBAEpCtC,KAAA,CAAAsE,aAAA,CAACnE,YAAA,CAAAiF,SAAS;IACR9C,KAAK,EAAEA,KAAM;IACb+C,YAAY,EAAEhB,YAAa;IAC3BG,KAAK,EAAE;MAAEc,QAAQ,EAAE,UAAU;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC5CC,SAAS,EAAEhD,MAAO;IAClBH,GAAG,EAAEoB,QAAS;IACdgC,MAAM,EAAEA,CAAA,KAAMxC,WAAW,CAAC,KAAK,CAAE;IACjCyC,YAAY,EAAC,SAAS;IACtBC,SAAS,EAAC,SAAS;IACnBC,aAAa,EAAC,MAAM;IACpBC,eAAe,EAAC,aAAa;IAC7BC,YAAY,EAAEhD,YAAY,GAAG,SAAS,GAAGiD,SAAU;IACnDhD,oBAAoB,EAAEA,oBAAqB;IAC3CkC,UAAU,EAAE;EAAK,CAClB,CAAC,EACD,CAAC,GAAGe,KAAK,CAACxD,MAAM,CAAC,CAAC,CAACyD,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,kBAC3BnG,KAAA,CAAAsE,aAAA,CAAC3D,WAAA,CAAAyF,UAAU;IACTxE,GAAG,EAAEuE,CAAE;IACPE,MAAM,EACJlD,QAAQ,GACJ,OAAO,GACPH,QAAQ,IAAIV,KAAK,CAACE,MAAM,KAAK2D,CAAC,GAC9B,OAAO,GACP,SACL;IACDtD,MAAM,EAAEA,MAAO;IACfP,KAAK,EAAEA,KAAK,CAAC6D,CAAC;EAAE,CACjB,CACF,CACQ,CAAC,eACZnG,KAAA,CAAAsE,aAAA,CAAC7D,OAAA,CAAA6F,OAAO;IAACC,IAAI,EAAE;EAAE,CAAE,CAAC,EACnBpD,QAAQ,IAAIP,YAAY,iBACvB5C,KAAA,CAAAsE,aAAA,CAAC/D,WAAA,CAAAiG,UAAU;IAACC,KAAK,EAAC,WAAW;IAACjC,KAAK,EAAE;MAAEkC,SAAS,EAAE;IAAS;EAAE,GAC1D9D,YACS,CAED,CAAC;AAEpB,CACF,CAAC;AAAC+D,OAAA,CAAAzE,QAAA,GAAAA,QAAA"}
package/lib/module/components/otpInput/OTPInput.js CHANGED
@@ -20,19 +20,21 @@ import { BoxedInput } from "./BoxedInput";
20
20
  * @param errorMessage - The error message to display
21
21
  * @returns
22
22
  */
23
- export const OTPInput = _ref => {
23
+ export const OTPInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
24
24
  let {
25
25
  value,
26
26
  onValueChange,
27
27
  length,
28
+ accessibilityLabel,
29
+ accessibilityHint,
28
30
  onValidate,
29
31
  errorMessage = "",
30
32
  secret = false,
31
- autocomplete = false
33
+ autocomplete = false,
34
+ inputAccessoryViewID
32
35
  } = _ref;
33
36
  const [hasFocus, setHasFocus] = React.useState(false);
34
37
  const [hasError, setHasError] = React.useState(false);
35
- const [inputValue, setInputValue] = React.useState(value);
36
38
  const {
37
39
  translate,
38
40
  animatedStyle,
@@ -56,7 +58,6 @@ export const OTPInput = _ref => {
56
58
  // eslint-disable-next-line functional/immutable-data
57
59
  timerRef.current = setTimeout(() => {
58
60
  setHasError(false);
59
- setInputValue("");
60
61
  onValueChange("");
61
62
  }, 500);
62
63
  }
@@ -66,7 +67,6 @@ export const OTPInput = _ref => {
66
67
  if (value.length > length) {
67
68
  return;
68
69
  }
69
- setInputValue(value);
70
70
  onValueChange(value);
71
71
  handleValidate(value);
72
72
  };
@@ -80,16 +80,18 @@ export const OTPInput = _ref => {
80
80
  (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
81
81
  setHasFocus(true);
82
82
  },
83
+ ref: ref,
83
84
  style: [IOStyles.row, {
84
85
  justifyContent: "space-around"
85
86
  }],
86
87
  accessible: true,
87
- accessibilityLabel: "OTP Input",
88
+ accessibilityLabel: accessibilityLabel,
89
+ accessibilityHint: accessibilityHint,
88
90
  accessibilityValue: {
89
- text: inputValue
91
+ text: value
90
92
  }
91
93
  }, /*#__PURE__*/React.createElement(TextInput, {
92
- value: inputValue,
94
+ value: value,
93
95
  onChangeText: handleChange,
94
96
  style: {
95
97
  position: "absolute",
@@ -103,12 +105,13 @@ export const OTPInput = _ref => {
103
105
  returnKeyType: "done",
104
106
  textContentType: "oneTimeCode",
105
107
  autoComplete: autocomplete ? "sms-otp" : undefined,
108
+ inputAccessoryViewID: inputAccessoryViewID,
106
109
  accessible: true
107
110
  }), [...Array(length)].map((_, i) => /*#__PURE__*/React.createElement(BoxedInput, {
108
111
  key: i,
109
- status: hasError ? "error" : hasFocus && inputValue.length === i ? "focus" : "default",
112
+ status: hasError ? "error" : hasFocus && value.length === i ? "focus" : "default",
110
113
  secret: secret,
111
- value: inputValue[i]
114
+ value: value[i]
112
115
  }))), /*#__PURE__*/React.createElement(VSpacer, {
113
116
  size: 4
114
117
  }), hasError && errorMessage && /*#__PURE__*/React.createElement(LabelSmall, {
@@ -117,5 +120,5 @@ export const OTPInput = _ref => {
117
120
  textAlign: "center"
118
121
  }
119
122
  }, errorMessage));
120
- };
123
+ });
121
124
  //# sourceMappingURL=OTPInput.js.map
package/lib/module/components/otpInput/OTPInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","Pressable","TextInput","Animated","IOStyles","LabelSmall","triggerHaptic","VSpacer","useErrorShakeAnimation","BoxedInput","OTPInput","_ref","value","onValueChange","length","onValidate","errorMessage","secret","autocomplete","hasFocus","setHasFocus","useState","hasError","setHasError","inputValue","setInputValue","translate","animatedStyle","shakeAnimation","inputRef","createRef","timerRef","useRef","handleValidate","val","isValid","current","clearTimeout","setTimeout","useEffect","handleChange","createElement","View","style","flexGrow","onPress","_inputRef$current","focus","row","justifyContent","accessible","accessibilityLabel","accessibilityValue","text","onChangeText","position","opacity","maxLength","ref","onBlur","keyboardType","inputMode","returnKeyType","textContentType","autoComplete","undefined","Array","map","_","i","key","status","size","color","textAlign"],"sourceRoot":"../../../../src","sources":["components/otpInput/OTPInput.tsx"],"mappings":"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"}
1
+ {"version":3,"names":["React","Pressable","TextInput","Animated","IOStyles","LabelSmall","triggerHaptic","VSpacer","useErrorShakeAnimation","BoxedInput","OTPInput","forwardRef","_ref","ref","value","onValueChange","length","accessibilityLabel","accessibilityHint","onValidate","errorMessage","secret","autocomplete","inputAccessoryViewID","hasFocus","setHasFocus","useState","hasError","setHasError","translate","animatedStyle","shakeAnimation","inputRef","createRef","timerRef","useRef","handleValidate","val","isValid","current","clearTimeout","setTimeout","useEffect","handleChange","createElement","View","style","flexGrow","onPress","_inputRef$current","focus","row","justifyContent","accessible","accessibilityValue","text","onChangeText","position","opacity","maxLength","onBlur","keyboardType","inputMode","returnKeyType","textContentType","autoComplete","undefined","Array","map","_","i","key","status","size","color","textAlign"],"sourceRoot":"../../../../src","sources":["components/otpInput/OTPInput.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,EAAEC,SAAS,QAAc,cAAc;AACzD,OAAOC,QAAQ,MAAM,yBAAyB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,OAAO,QAAQ,WAAW;AACnC,SAASC,sBAAsB,QAAQ,0CAA0C;AACjF,SAASC,UAAU,QAAQ,cAAc;AAezC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAQ,gBAAGV,KAAK,CAACW,UAAU,CACtC,CAAAC,IAAA,EAaEC,GAAG,KACA;EAAA,IAbH;IACEC,KAAK;IACLC,aAAa;IACbC,MAAM;IACNC,kBAAkB;IAClBC,iBAAiB;IACjBC,UAAU;IACVC,YAAY,GAAG,EAAE;IACjBC,MAAM,GAAG,KAAK;IACdC,YAAY,GAAG,KAAK;IACpBC;EACF,CAAC,GAAAX,IAAA;EAGD,MAAM,CAACY,QAAQ,EAAEC,WAAW,CAAC,GAAGzB,KAAK,CAAC0B,QAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG5B,KAAK,CAAC0B,QAAQ,CAAC,KAAK,CAAC;EAErD,MAAM;IAAEG,SAAS;IAAEC,aAAa;IAAEC;EAAe,CAAC,GAChDvB,sBAAsB,CAAC,CAAC;EAE1B,MAAMwB,QAAQ,gBAAGhC,KAAK,CAACiC,SAAS,CAAY,CAAC;EAC7C,MAAMC,QAAQ,GAAGlC,KAAK,CAACmC,MAAM,CAAiB,CAAC;EAE/C,MAAMC,cAAc,GAAIC,GAAW,IAAK;IACtC,IAAI,CAAClB,UAAU,IAAIkB,GAAG,CAACrB,MAAM,GAAGA,MAAM,EAAE;MACtC;IACF;IACA,MAAMsB,OAAO,GAAGnB,UAAU,CAACkB,GAAG,CAAC;IAC/B,IAAI,CAACC,OAAO,EAAE;MACZV,WAAW,CAAC,IAAI,CAAC;MACjBtB,aAAa,CAAC,mBAAmB,CAAC;MAClC;MACAuB,SAAS,CAACf,KAAK,GAAGiB,cAAc,CAAC,CAAC;MAElC,IAAIG,QAAQ,CAACK,OAAO,EAAE;QACpBC,YAAY,CAACN,QAAQ,CAACK,OAAO,CAAC;MAChC;MACA;MACAL,QAAQ,CAACK,OAAO,GAAGE,UAAU,CAAC,MAAM;QAClCb,WAAW,CAAC,KAAK,CAAC;QAClBb,aAAa,CAAC,EAAE,CAAC;MACnB,CAAC,EAAE,GAAG,CAAC;IACT;EACF,CAAC;EAEDf,KAAK,CAAC0C,SAAS,CAAC,MAAM,MAAMF,YAAY,CAACN,QAAQ,CAACK,OAAO,CAAC,EAAE,EAAE,CAAC;EAE/D,MAAMI,YAAY,GAAI7B,KAAa,IAAK;IACtC,IAAIA,KAAK,CAACE,MAAM,GAAGA,MAAM,EAAE;MACzB;IACF;IACAD,aAAa,CAACD,KAAK,CAAC;IACpBsB,cAAc,CAACtB,KAAK,CAAC;EACvB,CAAC;EAED,oBACEd,KAAA,CAAA4C,aAAA,CAACzC,QAAQ,CAAC0C,IAAI;IAACC,KAAK,EAAE,CAAC;MAAEC,QAAQ,EAAE;IAAE,CAAC,EAAEjB,aAAa;EAAE,gBACrD9B,KAAA,CAAA4C,aAAA,CAAC3C,SAAS;IACR+C,OAAO,EAAEA,CAAA,KAAM;MAAA,IAAAC,iBAAA;MACb,CAAAA,iBAAA,GAAAjB,QAAQ,CAACO,OAAO,cAAAU,iBAAA,eAAhBA,iBAAA,CAAkBC,KAAK,CAAC,CAAC;MACzBzB,WAAW,CAAC,IAAI,CAAC;IACnB,CAAE;IACFZ,GAAG,EAAEA,GAAI;IACTiC,KAAK,EAAE,CAAC1C,QAAQ,CAAC+C,GAAG,EAAE;MAAEC,cAAc,EAAE;IAAe,CAAC,CAAE;IAC1DC,UAAU,EAAE,IAAK;IACjBpC,kBAAkB,EAAEA,kBAAmB;IACvCC,iBAAiB,EAAEA,iBAAkB;IACrCoC,kBAAkB,EAAE;MAAEC,IAAI,EAAEzC;IAAM;EAAE,gBAEpCd,KAAA,CAAA4C,aAAA,CAAC1C,SAAS;IACRY,KAAK,EAAEA,KAAM;IACb0C,YAAY,EAAEb,YAAa;IAC3BG,KAAK,EAAE;MAAEW,QAAQ,EAAE,UAAU;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC5CC,SAAS,EAAE3C,MAAO;IAClBH,GAAG,EAAEmB,QAAS;IACd4B,MAAM,EAAEA,CAAA,KAAMnC,WAAW,CAAC,KAAK,CAAE;IACjCoC,YAAY,EAAC,SAAS;IACtBC,SAAS,EAAC,SAAS;IACnBC,aAAa,EAAC,MAAM;IACpBC,eAAe,EAAC,aAAa;IAC7BC,YAAY,EAAE3C,YAAY,GAAG,SAAS,GAAG4C,SAAU;IACnD3C,oBAAoB,EAAEA,oBAAqB;IAC3C8B,UAAU,EAAE;EAAK,CAClB,CAAC,EACD,CAAC,GAAGc,KAAK,CAACnD,MAAM,CAAC,CAAC,CAACoD,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,kBAC3BtE,KAAA,CAAA4C,aAAA,CAACnC,UAAU;IACT8D,GAAG,EAAED,CAAE;IACPE,MAAM,EACJ7C,QAAQ,GACJ,OAAO,GACPH,QAAQ,IAAIV,KAAK,CAACE,MAAM,KAAKsD,CAAC,GAC9B,OAAO,GACP,SACL;IACDjD,MAAM,EAAEA,MAAO;IACfP,KAAK,EAAEA,KAAK,CAACwD,CAAC;EAAE,CACjB,CACF,CACQ,CAAC,eACZtE,KAAA,CAAA4C,aAAA,CAACrC,OAAO;IAACkE,IAAI,EAAE;EAAE,CAAE,CAAC,EACnB9C,QAAQ,IAAIP,YAAY,iBACvBpB,KAAA,CAAA4C,aAAA,CAACvC,UAAU;IAACqE,KAAK,EAAC,WAAW;IAAC5B,KAAK,EAAE;MAAE6B,SAAS,EAAE;IAAS;EAAE,GAC1DvD,YACS,CAED,CAAC;AAEpB,CACF,CAAC"}
package/lib/typescript/components/otpInput/OTPInput.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from "react";
2
+ import { View } from "react-native";
2
3
  type Props = {
3
4
  value: string;
4
5
  onValueChange: (value: string) => void;
@@ -7,6 +8,9 @@ type Props = {
7
8
  autocomplete?: boolean;
8
9
  onValidate?: (value: string) => boolean;
9
10
  errorMessage?: string;
11
+ accessibilityLabel?: string;
12
+ accessibilityHint?: string;
13
+ inputAccessoryViewID?: string;
10
14
  };
11
15
  /**
12
16
  * `OTPInput` is a component that allows the user to enter a one-time password.
@@ -21,6 +25,6 @@ type Props = {
21
25
  * @param errorMessage - The error message to display
22
26
  * @returns
23
27
  */
24
- export declare const OTPInput: ({ value, onValueChange, length, onValidate, errorMessage, secret, autocomplete }: Props) => React.JSX.Element;
28
+ export declare const OTPInput: React.ForwardRefExoticComponent<Props & React.RefAttributes<View>>;
25
29
  export {};
26
30
  //# sourceMappingURL=OTPInput.d.ts.map
package/lib/typescript/components/otpInput/OTPInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"OTPInput.d.ts","sourceRoot":"","sources":["../../../../src/components/otpInput/OTPInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,qFAQlB,KAAK,sBA6FP,CAAC"}
1
+ {"version":3,"file":"OTPInput.d.ts","sourceRoot":"","sources":["../../../../src/components/otpInput/OTPInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAwB,IAAI,EAAE,MAAM,cAAc,CAAC;AAS1D,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,oEA8GpB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pagopa/io-app-design-system",
3
- "version": "1.36.0",
3
+ "version": "1.36.1",
4
4
  "description": "The library defining the core components of the design system of @pagopa/io-app",
5
5
  "main": "lib/commonjs/index",
6
6
  "module": "lib/module/index",
package/src/components/otpInput/OTPInput.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import { Pressable, TextInput } from "react-native";
2
+ import { Pressable, TextInput, View } from "react-native";
3
3
  import Animated from "react-native-reanimated";
4
4
  import { IOStyles } from "../../core/IOStyles";
5
5
  import { LabelSmall } from "../typography";
@@ -16,6 +16,9 @@ type Props = {
16
16
  autocomplete?: boolean;
17
17
  onValidate?: (value: string) => boolean;
18
18
  errorMessage?: string;
19
+ accessibilityLabel?: string;
20
+ accessibilityHint?: string;
21
+ inputAccessoryViewID?: string;
19
22
  };
20
23
 
21
24
  /**
@@ -31,105 +34,114 @@ type Props = {
31
34
  * @param errorMessage - The error message to display
32
35
  * @returns
33
36
  */
34
- export const OTPInput = ({
35
- value,
36
- onValueChange,
37
- length,
38
- onValidate,
39
- errorMessage = "",
40
- secret = false,
41
- autocomplete = false
42
- }: Props) => {
43
- const [hasFocus, setHasFocus] = React.useState(false);
44
- const [hasError, setHasError] = React.useState(false);
45
- const [inputValue, setInputValue] = React.useState(value);
37
+ export const OTPInput = React.forwardRef<View, Props>(
38
+ (
39
+ {
40
+ value,
41
+ onValueChange,
42
+ length,
43
+ accessibilityLabel,
44
+ accessibilityHint,
45
+ onValidate,
46
+ errorMessage = "",
47
+ secret = false,
48
+ autocomplete = false,
49
+ inputAccessoryViewID
50
+ },
51
+ ref
52
+ ) => {
53
+ const [hasFocus, setHasFocus] = React.useState(false);
54
+ const [hasError, setHasError] = React.useState(false);
46
55
 
47
- const { translate, animatedStyle, shakeAnimation } = useErrorShakeAnimation();
56
+ const { translate, animatedStyle, shakeAnimation } =
57
+ useErrorShakeAnimation();
48
58
 
49
- const inputRef = React.createRef<TextInput>();
50
- const timerRef = React.useRef<NodeJS.Timeout>();
59
+ const inputRef = React.createRef<TextInput>();
60
+ const timerRef = React.useRef<NodeJS.Timeout>();
51
61
 
52
- const handleValidate = (val: string) => {
53
- if (!onValidate || val.length < length) {
54
- return;
55
- }
56
- const isValid = onValidate(val);
57
- if (!isValid) {
58
- setHasError(true);
59
- triggerHaptic("notificationError");
60
- // eslint-disable-next-line functional/immutable-data
61
- translate.value = shakeAnimation();
62
+ const handleValidate = (val: string) => {
63
+ if (!onValidate || val.length < length) {
64
+ return;
65
+ }
66
+ const isValid = onValidate(val);
67
+ if (!isValid) {
68
+ setHasError(true);
69
+ triggerHaptic("notificationError");
70
+ // eslint-disable-next-line functional/immutable-data
71
+ translate.value = shakeAnimation();
62
72
 
63
- if (timerRef.current) {
64
- clearTimeout(timerRef.current);
73
+ if (timerRef.current) {
74
+ clearTimeout(timerRef.current);
75
+ }
76
+ // eslint-disable-next-line functional/immutable-data
77
+ timerRef.current = setTimeout(() => {
78
+ setHasError(false);
79
+ onValueChange("");
80
+ }, 500);
65
81
  }
66
- // eslint-disable-next-line functional/immutable-data
67
- timerRef.current = setTimeout(() => {
68
- setHasError(false);
69
- setInputValue("");
70
- onValueChange("");
71
- }, 500);
72
- }
73
- };
82
+ };
74
83
 
75
- React.useEffect(() => () => clearTimeout(timerRef.current), []);
84
+ React.useEffect(() => () => clearTimeout(timerRef.current), []);
76
85
 
77
- const handleChange = (value: string) => {
78
- if (value.length > length) {
79
- return;
80
- }
81
- setInputValue(value);
82
- onValueChange(value);
83
- handleValidate(value);
84
- };
86
+ const handleChange = (value: string) => {
87
+ if (value.length > length) {
88
+ return;
89
+ }
90
+ onValueChange(value);
91
+ handleValidate(value);
92
+ };
85
93
 
86
- return (
87
- <Animated.View style={[{ flexGrow: 1 }, animatedStyle]}>
88
- <Pressable
89
- onPress={() => {
90
- inputRef.current?.focus();
91
- setHasFocus(true);
92
- }}
93
- style={[IOStyles.row, { justifyContent: "space-around" }]}
94
- accessible={true}
95
- accessibilityLabel="OTP Input"
96
- accessibilityValue={{ text: inputValue }}
97
- >
98
- <TextInput
99
- value={inputValue}
100
- onChangeText={handleChange}
101
- style={{ position: "absolute", opacity: 0 }}
102
- maxLength={length}
103
- ref={inputRef}
104
- onBlur={() => setHasFocus(false)}
105
- keyboardType="numeric"
106
- inputMode="numeric"
107
- returnKeyType="done"
108
- textContentType="oneTimeCode"
109
- autoComplete={autocomplete ? "sms-otp" : undefined}
94
+ return (
95
+ <Animated.View style={[{ flexGrow: 1 }, animatedStyle]}>
96
+ <Pressable
97
+ onPress={() => {
98
+ inputRef.current?.focus();
99
+ setHasFocus(true);
100
+ }}
101
+ ref={ref}
102
+ style={[IOStyles.row, { justifyContent: "space-around" }]}
110
103
  accessible={true}
111
- />
112
- {[...Array(length)].map((_, i) => (
113
- <BoxedInput
114
- key={i}
115
- status={
116
- hasError
117
- ? "error"
118
- : hasFocus && inputValue.length === i
119
- ? "focus"
120
- : "default"
121
- }
122
- secret={secret}
123
- value={inputValue[i]}
104
+ accessibilityLabel={accessibilityLabel}
105
+ accessibilityHint={accessibilityHint}
106
+ accessibilityValue={{ text: value }}
107
+ >
108
+ <TextInput
109
+ value={value}
110
+ onChangeText={handleChange}
111
+ style={{ position: "absolute", opacity: 0 }}
112
+ maxLength={length}
113
+ ref={inputRef}
114
+ onBlur={() => setHasFocus(false)}
115
+ keyboardType="numeric"
116
+ inputMode="numeric"
117
+ returnKeyType="done"
118
+ textContentType="oneTimeCode"
119
+ autoComplete={autocomplete ? "sms-otp" : undefined}
120
+ inputAccessoryViewID={inputAccessoryViewID}
121
+ accessible={true}
124
122
  />
125
- ))}
126
- </Pressable>
127
- <VSpacer size={4} />
128
- {hasError && errorMessage && (
129
- <LabelSmall color="error-850" style={{ textAlign: "center" }}>
130
- {errorMessage}
131
- </LabelSmall>
132
- )}
133
- </Animated.View>
134
- );
135
- };
123
+ {[...Array(length)].map((_, i) => (
124
+ <BoxedInput
125
+ key={i}
126
+ status={
127
+ hasError
128
+ ? "error"
129
+ : hasFocus && value.length === i
130
+ ? "focus"
131
+ : "default"
132
+ }
133
+ secret={secret}
134
+ value={value[i]}
135
+ />
136
+ ))}
137
+ </Pressable>
138
+ <VSpacer size={4} />
139
+ {hasError && errorMessage && (
140
+ <LabelSmall color="error-850" style={{ textAlign: "center" }}>
141
+ {errorMessage}
142
+ </LabelSmall>
143
+ )}
144
+ </Animated.View>
145
+ );
146
+ }
147
+ );