@hh.ru/magritte-ui-pincode-input 1.4.0 → 1.4.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 (5) hide show
  1. package/PincodeInput.js +1 -1
  2. package/index.css +26 -26
  3. package/package.json +2 -2
  4. package/useOTP.js +1 -1
  5. package/useOTP.js.map +1 -1
package/PincodeInput.js CHANGED
@@ -7,7 +7,7 @@ import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
7
7
  import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
8
8
  import { useOTP } from './useOTP.js';
9
9
 
10
- var styles = {"pincode-input":"magritte-pincode-input___RpWyq_1-4-0","pincodeInput":"magritte-pincode-input___RpWyq_1-4-0","medium":"magritte-medium___wfRSc_1-4-0","placeholder":"magritte-placeholder___10kQ0_1-4-0","focus":"magritte-focus___IuhXb_1-4-0","invalid":"magritte-invalid___hB8h2_1-4-0","focus-visible":"magritte-focus-visible___BN1eD_1-4-0","focusVisible":"magritte-focus-visible___BN1eD_1-4-0","digit-box-container":"magritte-digit-box-container___BqMWw_1-4-0","digitBoxContainer":"magritte-digit-box-container___BqMWw_1-4-0","digit-box":"magritte-digit-box___6J0Q2_1-4-0","digitBox":"magritte-digit-box___6J0Q2_1-4-0","digits-input":"magritte-digits-input___4QeLj_1-4-0","digitsInput":"magritte-digits-input___4QeLj_1-4-0","caret-left":"magritte-caret-left___iZMuA_1-4-0","caretLeft":"magritte-caret-left___iZMuA_1-4-0","caret-right":"magritte-caret-right___u8wNk_1-4-0","caretRight":"magritte-caret-right___u8wNk_1-4-0","caret-blink":"magritte-caret-blink___-bhg7_1-4-0","caretBlink":"magritte-caret-blink___-bhg7_1-4-0","value-container":"magritte-value-container___9JR3e_1-4-0","valueContainer":"magritte-value-container___9JR3e_1-4-0","ghost-value":"magritte-ghost-value___jPQwY_1-4-0","ghostValue":"magritte-ghost-value___jPQwY_1-4-0"};
10
+ var styles = {"pincode-input":"magritte-pincode-input___RpWyq_1-4-1","pincodeInput":"magritte-pincode-input___RpWyq_1-4-1","medium":"magritte-medium___wfRSc_1-4-1","placeholder":"magritte-placeholder___10kQ0_1-4-1","focus":"magritte-focus___IuhXb_1-4-1","invalid":"magritte-invalid___hB8h2_1-4-1","focus-visible":"magritte-focus-visible___BN1eD_1-4-1","focusVisible":"magritte-focus-visible___BN1eD_1-4-1","digit-box-container":"magritte-digit-box-container___BqMWw_1-4-1","digitBoxContainer":"magritte-digit-box-container___BqMWw_1-4-1","digit-box":"magritte-digit-box___6J0Q2_1-4-1","digitBox":"magritte-digit-box___6J0Q2_1-4-1","digits-input":"magritte-digits-input___4QeLj_1-4-1","digitsInput":"magritte-digits-input___4QeLj_1-4-1","caret-left":"magritte-caret-left___iZMuA_1-4-1","caretLeft":"magritte-caret-left___iZMuA_1-4-1","caret-right":"magritte-caret-right___u8wNk_1-4-1","caretRight":"magritte-caret-right___u8wNk_1-4-1","caret-blink":"magritte-caret-blink___-bhg7_1-4-1","caretBlink":"magritte-caret-blink___-bhg7_1-4-1","value-container":"magritte-value-container___9JR3e_1-4-1","valueContainer":"magritte-value-container___9JR3e_1-4-1","ghost-value":"magritte-ghost-value___jPQwY_1-4-1","ghostValue":"magritte-ghost-value___jPQwY_1-4-1"};
11
11
 
12
12
  const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
13
13
  const PincodeInput = forwardRef(({ digitsCount: _digitsCount = null, size = 'large', invalid = false, name, onFocus, onBlur, onChange, description, errorMessage, credentialsRequestId = -1, onOTPCredentialsRequestFail, 'data-qa': dataQa = 'magritte-pincode-input', }, ref) => {
package/index.css CHANGED
@@ -41,7 +41,7 @@
41
41
  --magritte-color-component-input-text-state-placeholder-focused-v21-3-2:#535353;
42
42
  --magritte-color-component-input-text-state-placeholder-invalid-v21-3-2:#535353;
43
43
  }
44
- .magritte-pincode-input___RpWyq_1-4-0{
44
+ .magritte-pincode-input___RpWyq_1-4-1{
45
45
  --magritte-pincode-input-padding-horizontal:20px;
46
46
  --magritte-pincode-input-padding-vertical:8px;
47
47
  --magritte-pincode-input-gap:6px;
@@ -61,7 +61,7 @@
61
61
  line-height:40px;
62
62
  color:var(--magritte-color-component-input-text-state-content-focused-v21-3-2);
63
63
  }
64
- .magritte-pincode-input___RpWyq_1-4-0.magritte-medium___wfRSc_1-4-0{
64
+ .magritte-pincode-input___RpWyq_1-4-1.magritte-medium___wfRSc_1-4-1{
65
65
  font-size:28px;
66
66
  --magritte-pincode-input-padding-horizontal:16px;
67
67
  --magritte-pincode-input-padding-vertical:6px;
@@ -69,34 +69,34 @@
69
69
  border-radius:var(--magritte-static-border-radius-300-v21-3-2);
70
70
  height:76px;
71
71
  }
72
- .magritte-pincode-input___RpWyq_1-4-0:hover{
72
+ .magritte-pincode-input___RpWyq_1-4-1:hover{
73
73
  box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v21-3-2) var(--magritte-color-component-input-stroke-state-field-hovered-v21-3-2);
74
74
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v21-3-2);
75
75
  }
76
- .magritte-pincode-input___RpWyq_1-4-0:hover .magritte-placeholder___10kQ0_1-4-0{
76
+ .magritte-pincode-input___RpWyq_1-4-1:hover .magritte-placeholder___10kQ0_1-4-1{
77
77
  color:var(--magritte-color-component-input-text-state-placeholder-hovered-v21-3-2);
78
78
  }
79
- .magritte-pincode-input___RpWyq_1-4-0.magritte-focus___IuhXb_1-4-0{
79
+ .magritte-pincode-input___RpWyq_1-4-1.magritte-focus___IuhXb_1-4-1{
80
80
  box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-focused-v21-3-2) var(--magritte-color-component-input-stroke-state-field-focused-v21-3-2);
81
81
  background-color:var(--magritte-color-component-input-background-state-field-focused-v21-3-2);
82
82
  }
83
- .magritte-pincode-input___RpWyq_1-4-0.magritte-focus___IuhXb_1-4-0 .magritte-placeholder___10kQ0_1-4-0{
83
+ .magritte-pincode-input___RpWyq_1-4-1.magritte-focus___IuhXb_1-4-1 .magritte-placeholder___10kQ0_1-4-1{
84
84
  color:var(--magritte-color-component-input-text-state-placeholder-focused-v21-3-2);
85
85
  }
86
- .magritte-pincode-input___RpWyq_1-4-0.magritte-invalid___hB8h2_1-4-0{
86
+ .magritte-pincode-input___RpWyq_1-4-1.magritte-invalid___hB8h2_1-4-1{
87
87
  box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v21-3-2) var(--magritte-color-component-input-stroke-state-field-invalid-v21-3-2);
88
88
  background-color:var(--magritte-color-component-input-background-state-field-invalid-v21-3-2);
89
89
  }
90
- .magritte-pincode-input___RpWyq_1-4-0.magritte-invalid___hB8h2_1-4-0 .magritte-placeholder___10kQ0_1-4-0{
90
+ .magritte-pincode-input___RpWyq_1-4-1.magritte-invalid___hB8h2_1-4-1 .magritte-placeholder___10kQ0_1-4-1{
91
91
  color:var(--magritte-color-component-input-text-state-placeholder-invalid-v21-3-2);
92
92
  }
93
- .magritte-pincode-input___RpWyq_1-4-0.magritte-focus-visible___BN1eD_1-4-0{
93
+ .magritte-pincode-input___RpWyq_1-4-1.magritte-focus-visible___BN1eD_1-4-1{
94
94
  outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v21-3-2) solid 4px;
95
95
  }
96
- .magritte-pincode-input___RpWyq_1-4-0.magritte-focus-visible___BN1eD_1-4-0.magritte-invalid___hB8h2_1-4-0{
96
+ .magritte-pincode-input___RpWyq_1-4-1.magritte-focus-visible___BN1eD_1-4-1.magritte-invalid___hB8h2_1-4-1{
97
97
  outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v21-3-2);
98
98
  }
99
- .magritte-digit-box-container___BqMWw_1-4-0{
99
+ .magritte-digit-box-container___BqMWw_1-4-1{
100
100
  display:flex;
101
101
  gap:var(--magritte-pincode-input-gap);
102
102
  position:absolute;
@@ -107,7 +107,7 @@
107
107
  pointer-events:none;
108
108
  z-index:0;
109
109
  }
110
- .magritte-digit-box___6J0Q2_1-4-0{
110
+ .magritte-digit-box___6J0Q2_1-4-1{
111
111
  flex:0 0 var(--magritte-digit-box-width);
112
112
  pointer-events:auto;
113
113
  display:flex;
@@ -115,13 +115,13 @@
115
115
  justify-content:center;
116
116
  user-select:none;
117
117
  }
118
- .magritte-digit-box___6J0Q2_1-4-0::selection{
118
+ .magritte-digit-box___6J0Q2_1-4-1::selection{
119
119
  background-color:transparent;
120
120
  }
121
- .magritte-digit-box___6J0Q2_1-4-0::-moz-selection{
121
+ .magritte-digit-box___6J0Q2_1-4-1::-moz-selection{
122
122
  background-color:transparent;
123
123
  }
124
- .magritte-digits-input___4QeLj_1-4-0{
124
+ .magritte-digits-input___4QeLj_1-4-1{
125
125
  display:block;
126
126
  position:absolute;
127
127
  top:0;
@@ -139,42 +139,42 @@
139
139
  appearance:none;
140
140
  caret-color:transparent;
141
141
  }
142
- .magritte-digits-input___4QeLj_1-4-0::selection{
142
+ .magritte-digits-input___4QeLj_1-4-1::selection{
143
143
  background-color:transparent;
144
144
  appearance:none;
145
145
  }
146
- .magritte-digits-input___4QeLj_1-4-0::-moz-selection{
146
+ .magritte-digits-input___4QeLj_1-4-1::-moz-selection{
147
147
  background-color:transparent;
148
148
  appearance:none;
149
149
  }
150
- .magritte-caret-left___iZMuA_1-4-0::before,
151
- .magritte-caret-right___u8wNk_1-4-0::after{
150
+ .magritte-caret-left___iZMuA_1-4-1::before,
151
+ .magritte-caret-right___u8wNk_1-4-1::after{
152
152
  content:'';
153
153
  position:absolute;
154
154
  top:50%;
155
155
  transform:translateY(-50%);
156
156
  block-size:1em;
157
157
  border-left:1px solid var(--magritte-color-text-primary-v21-3-2);
158
- animation:magritte-caret-blink___-bhg7_1-4-0 1s steps(1) infinite;
158
+ animation:magritte-caret-blink___-bhg7_1-4-1 1s steps(1) infinite;
159
159
  }
160
- .magritte-caret-left___iZMuA_1-4-0::before{
160
+ .magritte-caret-left___iZMuA_1-4-1::before{
161
161
  left:-1px;
162
162
  }
163
- .magritte-caret-right___u8wNk_1-4-0::after{
163
+ .magritte-caret-right___u8wNk_1-4-1::after{
164
164
  right:-1px;
165
165
  }
166
- .magritte-placeholder___10kQ0_1-4-0{
166
+ .magritte-placeholder___10kQ0_1-4-1{
167
167
  color:var(--magritte-color-component-input-text-placeholder-v21-3-2);
168
168
  }
169
- .magritte-value-container___9JR3e_1-4-0{
169
+ .magritte-value-container___9JR3e_1-4-1{
170
170
  pointer-events:none;
171
171
  position:relative;
172
172
  }
173
- .magritte-ghost-value___jPQwY_1-4-0{
173
+ .magritte-ghost-value___jPQwY_1-4-1{
174
174
  display:inline-block;
175
175
  visibility:hidden;
176
176
  }
177
- @keyframes magritte-caret-blink___-bhg7_1-4-0{
177
+ @keyframes magritte-caret-blink___-bhg7_1-4-1{
178
178
  50%{
179
179
  opacity:0;
180
180
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-pincode-input",
3
- "version": "1.4.0",
3
+ "version": "1.4.1",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -33,5 +33,5 @@
33
33
  "classnames": ">=2.3.2",
34
34
  "react": ">=18.2.0"
35
35
  },
36
- "gitHead": "2160e00c55fc0118da55262fd3f89dd915696a77"
36
+ "gitHead": "23739d2ce995018e9f9336db0d48355e823feea9"
37
37
  }
package/useOTP.js CHANGED
@@ -7,7 +7,7 @@ const useOTP = (callback, credentialsRequestId, onCredetialsRequestFail) => {
7
7
  callbackRef.current = callback;
8
8
  onFailCallbackRef.current = onCredetialsRequestFail;
9
9
  useEffect(() => {
10
- if (!('OTPCredential' in window)) {
10
+ if (!('OTPCredential' in window) || !navigator?.credentials) {
11
11
  return undefined;
12
12
  }
13
13
  const ac = new AbortController();
package/useOTP.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useOTP.js","sources":["../src/useOTP.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport const useOTP = (\n callback: (OTPValue: string | null) => void,\n credentialsRequestId: number,\n onCredetialsRequestFail?: (error: Error) => void\n): void => {\n const callbackRef = useRef(callback);\n const onFailCallbackRef = useRef(onCredetialsRequestFail);\n callbackRef.current = callback;\n onFailCallbackRef.current = onCredetialsRequestFail;\n\n useEffect(() => {\n if (!('OTPCredential' in window)) {\n return undefined;\n }\n\n const ac = new AbortController();\n\n navigator.credentials\n .get({\n otp: { transport: ['sms'] },\n signal: ac.signal,\n } as CredentialRequestOptions)\n // ts не знает о типе OTPCredentials\n .then((otp) => callbackRef.current((otp as unknown as { code: string })?.code))\n .catch((error) => {\n onFailCallbackRef.current?.(error as Error);\n });\n\n return () => {\n ac.abort();\n };\n }, [credentialsRequestId]);\n};\n"],"names":[],"mappings":";;AAEa,MAAA,MAAM,GAAG,CAClB,QAA2C,EAC3C,oBAA4B,EAC5B,uBAAgD,KAC1C;AACN,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;AACrC,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,uBAAuB,CAAC,CAAC;AAC1D,IAAA,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;AAC/B,IAAA,iBAAiB,CAAC,OAAO,GAAG,uBAAuB,CAAC;IAEpD,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,EAAE,eAAe,IAAI,MAAM,CAAC,EAAE;AAC9B,YAAA,OAAO,SAAS,CAAC;SACpB;AAED,QAAA,MAAM,EAAE,GAAG,IAAI,eAAe,EAAE,CAAC;AAEjC,QAAA,SAAS,CAAC,WAAW;AAChB,aAAA,GAAG,CAAC;AACD,YAAA,GAAG,EAAE,EAAE,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE;YAC3B,MAAM,EAAE,EAAE,CAAC,MAAM;SACQ,CAAC;;AAE7B,aAAA,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,CAAC,OAAO,CAAE,GAAmC,EAAE,IAAI,CAAC,CAAC;AAC9E,aAAA,KAAK,CAAC,CAAC,KAAK,KAAI;AACb,YAAA,iBAAiB,CAAC,OAAO,GAAG,KAAc,CAAC,CAAC;AAChD,SAAC,CAAC,CAAC;AAEP,QAAA,OAAO,MAAK;YACR,EAAE,CAAC,KAAK,EAAE,CAAC;AACf,SAAC,CAAC;AACN,KAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;AAC/B;;;;"}
1
+ {"version":3,"file":"useOTP.js","sources":["../src/useOTP.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport const useOTP = (\n callback: (OTPValue: string | null) => void,\n credentialsRequestId: number,\n onCredetialsRequestFail?: (error: Error) => void\n): void => {\n const callbackRef = useRef(callback);\n const onFailCallbackRef = useRef(onCredetialsRequestFail);\n callbackRef.current = callback;\n onFailCallbackRef.current = onCredetialsRequestFail;\n\n useEffect(() => {\n if (!('OTPCredential' in window) || !navigator?.credentials) {\n return undefined;\n }\n\n const ac = new AbortController();\n\n navigator.credentials\n .get({\n otp: { transport: ['sms'] },\n signal: ac.signal,\n } as CredentialRequestOptions)\n // ts не знает о типе OTPCredentials\n .then((otp) => callbackRef.current((otp as unknown as { code: string })?.code))\n .catch((error) => {\n onFailCallbackRef.current?.(error as Error);\n });\n\n return () => {\n ac.abort();\n };\n }, [credentialsRequestId]);\n};\n"],"names":[],"mappings":";;AAEa,MAAA,MAAM,GAAG,CAClB,QAA2C,EAC3C,oBAA4B,EAC5B,uBAAgD,KAC1C;AACN,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;AACrC,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,uBAAuB,CAAC,CAAC;AAC1D,IAAA,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;AAC/B,IAAA,iBAAiB,CAAC,OAAO,GAAG,uBAAuB,CAAC;IAEpD,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,EAAE,eAAe,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE;AACzD,YAAA,OAAO,SAAS,CAAC;SACpB;AAED,QAAA,MAAM,EAAE,GAAG,IAAI,eAAe,EAAE,CAAC;AAEjC,QAAA,SAAS,CAAC,WAAW;AAChB,aAAA,GAAG,CAAC;AACD,YAAA,GAAG,EAAE,EAAE,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE;YAC3B,MAAM,EAAE,EAAE,CAAC,MAAM;SACQ,CAAC;;AAE7B,aAAA,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,CAAC,OAAO,CAAE,GAAmC,EAAE,IAAI,CAAC,CAAC;AAC9E,aAAA,KAAK,CAAC,CAAC,KAAK,KAAI;AACb,YAAA,iBAAiB,CAAC,OAAO,GAAG,KAAc,CAAC,CAAC;AAChD,SAAC,CAAC,CAAC;AAEP,QAAA,OAAO,MAAK;YACR,EAAE,CAAC,KAAK,EAAE,CAAC;AACf,SAAC,CAAC;AACN,KAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;AAC/B;;;;"}