@hh.ru/magritte-ui-pincode-input 1.3.3 → 1.3.5

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 (3) hide show
  1. package/PincodeInput.js +1 -1
  2. package/index.css +81 -81
  3. package/package.json +4 -4
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-3-3","pincodeInput":"magritte-pincode-input___RpWyq_1-3-3","medium":"magritte-medium___wfRSc_1-3-3","placeholder":"magritte-placeholder___10kQ0_1-3-3","focus":"magritte-focus___IuhXb_1-3-3","invalid":"magritte-invalid___hB8h2_1-3-3","focus-visible":"magritte-focus-visible___BN1eD_1-3-3","focusVisible":"magritte-focus-visible___BN1eD_1-3-3","digit-box-container":"magritte-digit-box-container___BqMWw_1-3-3","digitBoxContainer":"magritte-digit-box-container___BqMWw_1-3-3","digit-box":"magritte-digit-box___6J0Q2_1-3-3","digitBox":"magritte-digit-box___6J0Q2_1-3-3","digits-input":"magritte-digits-input___4QeLj_1-3-3","digitsInput":"magritte-digits-input___4QeLj_1-3-3","caret-left":"magritte-caret-left___iZMuA_1-3-3","caretLeft":"magritte-caret-left___iZMuA_1-3-3","caret-right":"magritte-caret-right___u8wNk_1-3-3","caretRight":"magritte-caret-right___u8wNk_1-3-3","caret-blink":"magritte-caret-blink___-bhg7_1-3-3","caretBlink":"magritte-caret-blink___-bhg7_1-3-3","value-container":"magritte-value-container___9JR3e_1-3-3","valueContainer":"magritte-value-container___9JR3e_1-3-3","ghost-value":"magritte-ghost-value___jPQwY_1-3-3","ghostValue":"magritte-ghost-value___jPQwY_1-3-3"};
10
+ var styles = {"pincode-input":"magritte-pincode-input___RpWyq_1-3-5","pincodeInput":"magritte-pincode-input___RpWyq_1-3-5","medium":"magritte-medium___wfRSc_1-3-5","placeholder":"magritte-placeholder___10kQ0_1-3-5","focus":"magritte-focus___IuhXb_1-3-5","invalid":"magritte-invalid___hB8h2_1-3-5","focus-visible":"magritte-focus-visible___BN1eD_1-3-5","focusVisible":"magritte-focus-visible___BN1eD_1-3-5","digit-box-container":"magritte-digit-box-container___BqMWw_1-3-5","digitBoxContainer":"magritte-digit-box-container___BqMWw_1-3-5","digit-box":"magritte-digit-box___6J0Q2_1-3-5","digitBox":"magritte-digit-box___6J0Q2_1-3-5","digits-input":"magritte-digits-input___4QeLj_1-3-5","digitsInput":"magritte-digits-input___4QeLj_1-3-5","caret-left":"magritte-caret-left___iZMuA_1-3-5","caretLeft":"magritte-caret-left___iZMuA_1-3-5","caret-right":"magritte-caret-right___u8wNk_1-3-5","caretRight":"magritte-caret-right___u8wNk_1-3-5","caret-blink":"magritte-caret-blink___-bhg7_1-3-5","caretBlink":"magritte-caret-blink___-bhg7_1-3-5","value-container":"magritte-value-container___9JR3e_1-3-5","valueContainer":"magritte-value-container___9JR3e_1-3-5","ghost-value":"magritte-ghost-value___jPQwY_1-3-5","ghostValue":"magritte-ghost-value___jPQwY_1-3-5"};
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, onFocus, onBlur, onChange, description, errorMessage, credentialsRequestId = -1, onOTPCredentialsRequestFail, 'data-qa': dataQa = 'magritte-pincode-input', }, ref) => {
package/index.css CHANGED
@@ -1,102 +1,102 @@
1
1
  :root{
2
- --magritte-color-text-primary-v21-3-0:#000000;
3
- --magritte-color-component-input-stroke-state-field-hovered-v21-3-0:#CCD5DF;
4
- --magritte-color-component-input-stroke-state-field-focused-v21-3-0:#0070ff;
5
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v21-3-0:#0070ff7a;
6
- --magritte-color-component-input-stroke-state-field-invalid-v21-3-0:#ff4d3a;
7
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v21-3-0:#ff4d3a7a;
8
- --magritte-color-component-input-background-field-v21-3-0:#ffffff;
9
- --magritte-color-component-input-background-state-field-hovered-v21-3-0:#ffffff;
10
- --magritte-color-component-input-background-state-field-focused-v21-3-0:#ffffff;
11
- --magritte-color-component-input-background-state-field-invalid-v21-3-0:#ffffff;
12
- --magritte-color-component-input-stroke-field-v21-3-0:#DCE3EB;
13
- --magritte-color-component-input-text-state-content-focused-v21-3-0:#000000;
14
- --magritte-color-component-input-text-state-placeholder-hovered-v21-3-0:#768694;
15
- --magritte-color-component-input-text-state-placeholder-focused-v21-3-0:#AABBCA;
16
- --magritte-color-component-input-text-state-placeholder-invalid-v21-3-0:#AABBCA;
17
- --magritte-color-component-input-text-placeholder-v21-3-0:#AABBCA;
2
+ --magritte-color-text-primary-v21-3-2:#000000;
3
+ --magritte-color-component-input-stroke-state-field-hovered-v21-3-2:#CCD5DF;
4
+ --magritte-color-component-input-stroke-state-field-focused-v21-3-2:#0070ff;
5
+ --magritte-color-component-input-stroke-state-accent-focused-accessible-v21-3-2:#0070ff7a;
6
+ --magritte-color-component-input-stroke-state-field-invalid-v21-3-2:#ff4d3a;
7
+ --magritte-color-component-input-stroke-state-negative-focused-accessible-v21-3-2:#ff4d3a7a;
8
+ --magritte-color-component-input-background-field-v21-3-2:#ffffff;
9
+ --magritte-color-component-input-background-state-field-hovered-v21-3-2:#ffffff;
10
+ --magritte-color-component-input-background-state-field-focused-v21-3-2:#ffffff;
11
+ --magritte-color-component-input-background-state-field-invalid-v21-3-2:#ffffff;
12
+ --magritte-color-component-input-stroke-field-v21-3-2:#DCE3EB;
13
+ --magritte-color-component-input-text-state-content-focused-v21-3-2:#000000;
14
+ --magritte-color-component-input-text-state-placeholder-hovered-v21-3-2:#768694;
15
+ --magritte-color-component-input-text-state-placeholder-focused-v21-3-2:#AABBCA;
16
+ --magritte-color-component-input-text-state-placeholder-invalid-v21-3-2:#AABBCA;
17
+ --magritte-color-component-input-text-placeholder-v21-3-2:#AABBCA;
18
18
  }
19
19
  :root{
20
- --magritte-font-families-body-v21-3-0:hh sans;
21
- --magritte-semantic-border-width-default-v21-3-0:1px;
22
- --magritte-semantic-border-width-focused-v21-3-0:2px;
23
- --magritte-static-border-radius-300-v21-3-0:12px;
24
- --magritte-static-border-radius-450-v21-3-0:18px;
20
+ --magritte-font-families-body-v21-3-2:hh sans;
21
+ --magritte-semantic-border-width-default-v21-3-2:1px;
22
+ --magritte-semantic-border-width-focused-v21-3-2:2px;
23
+ --magritte-static-border-radius-300-v21-3-2:12px;
24
+ --magritte-static-border-radius-450-v21-3-2:18px;
25
25
  }
26
26
  .magritte-night-theme{
27
- --magritte-color-text-primary-v21-3-0:#ffffff;
28
- --magritte-color-component-input-stroke-state-field-hovered-v21-3-0:#3B3B3B;
29
- --magritte-color-component-input-stroke-state-field-focused-v21-3-0:#0070ff;
30
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v21-3-0:#0070ff7a;
31
- --magritte-color-component-input-stroke-state-field-invalid-v21-3-0:#ff4d3a;
32
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v21-3-0:#ff4d3a7a;
33
- --magritte-color-component-input-background-field-v21-3-0:#1B1B1B;
34
- --magritte-color-component-input-background-state-field-hovered-v21-3-0:#1B1B1B;
35
- --magritte-color-component-input-background-state-field-focused-v21-3-0:#1B1B1B;
36
- --magritte-color-component-input-background-state-field-invalid-v21-3-0:#1B1B1B;
37
- --magritte-color-component-input-stroke-field-v21-3-0:#303030;
38
- --magritte-color-component-input-text-placeholder-v21-3-0:#535353;
39
- --magritte-color-component-input-text-state-content-focused-v21-3-0:#ffffff;
40
- --magritte-color-component-input-text-state-placeholder-hovered-v21-3-0:#5E5E5E;
41
- --magritte-color-component-input-text-state-placeholder-focused-v21-3-0:#535353;
42
- --magritte-color-component-input-text-state-placeholder-invalid-v21-3-0:#535353;
43
- }
44
- .magritte-pincode-input___RpWyq_1-3-3{
27
+ --magritte-color-text-primary-v21-3-2:#ffffff;
28
+ --magritte-color-component-input-stroke-state-field-hovered-v21-3-2:#3B3B3B;
29
+ --magritte-color-component-input-stroke-state-field-focused-v21-3-2:#0070ff;
30
+ --magritte-color-component-input-stroke-state-accent-focused-accessible-v21-3-2:#0070ff7a;
31
+ --magritte-color-component-input-stroke-state-field-invalid-v21-3-2:#ff4d3a;
32
+ --magritte-color-component-input-stroke-state-negative-focused-accessible-v21-3-2:#ff4d3a7a;
33
+ --magritte-color-component-input-background-field-v21-3-2:#1B1B1B;
34
+ --magritte-color-component-input-background-state-field-hovered-v21-3-2:#1B1B1B;
35
+ --magritte-color-component-input-background-state-field-focused-v21-3-2:#1B1B1B;
36
+ --magritte-color-component-input-background-state-field-invalid-v21-3-2:#1B1B1B;
37
+ --magritte-color-component-input-stroke-field-v21-3-2:#303030;
38
+ --magritte-color-component-input-text-placeholder-v21-3-2:#535353;
39
+ --magritte-color-component-input-text-state-content-focused-v21-3-2:#ffffff;
40
+ --magritte-color-component-input-text-state-placeholder-hovered-v21-3-2:#5E5E5E;
41
+ --magritte-color-component-input-text-state-placeholder-focused-v21-3-2:#535353;
42
+ --magritte-color-component-input-text-state-placeholder-invalid-v21-3-2:#535353;
43
+ }
44
+ .magritte-pincode-input___RpWyq_1-3-5{
45
45
  --magritte-pincode-input-padding-horizontal:20px;
46
46
  --magritte-pincode-input-padding-vertical:8px;
47
47
  --magritte-pincode-input-gap:6px;
48
48
  --magritte-digit-box-width:calc((100% - (var(--magritte-pincode-input-gap) * (var(--magritte-pincode-digits-count) - 1)) - (var(--magritte-pincode-input-padding-horizontal) * 2)) / var(--magritte-pincode-digits-count));
49
49
  box-sizing:border-box;
50
50
  height:88px;
51
- box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v21-3-0) var(--magritte-color-component-input-stroke-field-v21-3-0);
52
- border-radius:var(--magritte-static-border-radius-450-v21-3-0);
53
- background-color:var(--magritte-color-component-input-background-field-v21-3-0);
51
+ box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v21-3-2) var(--magritte-color-component-input-stroke-field-v21-3-2);
52
+ border-radius:var(--magritte-static-border-radius-450-v21-3-2);
53
+ background-color:var(--magritte-color-component-input-background-field-v21-3-2);
54
54
  position:relative;
55
55
  overflow:clip;
56
56
  cursor:text;
57
- font-family:var(--magritte-font-families-body-v21-3-0);
57
+ font-family:var(--magritte-font-families-body-v21-3-2);
58
58
  font-size:32px;
59
59
  font-style:normal;
60
60
  font-weight:normal;
61
61
  line-height:40px;
62
- color:var(--magritte-color-component-input-text-state-content-focused-v21-3-0);
62
+ color:var(--magritte-color-component-input-text-state-content-focused-v21-3-2);
63
63
  }
64
- .magritte-pincode-input___RpWyq_1-3-3.magritte-medium___wfRSc_1-3-3{
64
+ .magritte-pincode-input___RpWyq_1-3-5.magritte-medium___wfRSc_1-3-5{
65
65
  font-size:28px;
66
66
  --magritte-pincode-input-padding-horizontal:16px;
67
67
  --magritte-pincode-input-padding-vertical:6px;
68
68
  --magritte-pincode-input-gap:4px;
69
- border-radius:var(--magritte-static-border-radius-300-v21-3-0);
69
+ border-radius:var(--magritte-static-border-radius-300-v21-3-2);
70
70
  height:76px;
71
71
  }
72
- .magritte-pincode-input___RpWyq_1-3-3:hover{
73
- box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v21-3-0) var(--magritte-color-component-input-stroke-state-field-hovered-v21-3-0);
74
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v21-3-0);
72
+ .magritte-pincode-input___RpWyq_1-3-5:hover{
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
+ background-color:var(--magritte-color-component-input-background-state-field-hovered-v21-3-2);
75
75
  }
76
- .magritte-pincode-input___RpWyq_1-3-3:hover .magritte-placeholder___10kQ0_1-3-3{
77
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v21-3-0);
76
+ .magritte-pincode-input___RpWyq_1-3-5:hover .magritte-placeholder___10kQ0_1-3-5{
77
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v21-3-2);
78
78
  }
79
- .magritte-pincode-input___RpWyq_1-3-3.magritte-focus___IuhXb_1-3-3{
80
- box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-focused-v21-3-0) var(--magritte-color-component-input-stroke-state-field-focused-v21-3-0);
81
- background-color:var(--magritte-color-component-input-background-state-field-focused-v21-3-0);
79
+ .magritte-pincode-input___RpWyq_1-3-5.magritte-focus___IuhXb_1-3-5{
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
+ background-color:var(--magritte-color-component-input-background-state-field-focused-v21-3-2);
82
82
  }
83
- .magritte-pincode-input___RpWyq_1-3-3.magritte-focus___IuhXb_1-3-3 .magritte-placeholder___10kQ0_1-3-3{
84
- color:var(--magritte-color-component-input-text-state-placeholder-focused-v21-3-0);
83
+ .magritte-pincode-input___RpWyq_1-3-5.magritte-focus___IuhXb_1-3-5 .magritte-placeholder___10kQ0_1-3-5{
84
+ color:var(--magritte-color-component-input-text-state-placeholder-focused-v21-3-2);
85
85
  }
86
- .magritte-pincode-input___RpWyq_1-3-3.magritte-invalid___hB8h2_1-3-3{
87
- box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v21-3-0) var(--magritte-color-component-input-stroke-state-field-invalid-v21-3-0);
88
- background-color:var(--magritte-color-component-input-background-state-field-invalid-v21-3-0);
86
+ .magritte-pincode-input___RpWyq_1-3-5.magritte-invalid___hB8h2_1-3-5{
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
+ background-color:var(--magritte-color-component-input-background-state-field-invalid-v21-3-2);
89
89
  }
90
- .magritte-pincode-input___RpWyq_1-3-3.magritte-invalid___hB8h2_1-3-3 .magritte-placeholder___10kQ0_1-3-3{
91
- color:var(--magritte-color-component-input-text-state-placeholder-invalid-v21-3-0);
90
+ .magritte-pincode-input___RpWyq_1-3-5.magritte-invalid___hB8h2_1-3-5 .magritte-placeholder___10kQ0_1-3-5{
91
+ color:var(--magritte-color-component-input-text-state-placeholder-invalid-v21-3-2);
92
92
  }
93
- .magritte-pincode-input___RpWyq_1-3-3.magritte-focus-visible___BN1eD_1-3-3{
94
- outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v21-3-0) solid 4px;
93
+ .magritte-pincode-input___RpWyq_1-3-5.magritte-focus-visible___BN1eD_1-3-5{
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-3-3.magritte-focus-visible___BN1eD_1-3-3.magritte-invalid___hB8h2_1-3-3{
97
- outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v21-3-0);
96
+ .magritte-pincode-input___RpWyq_1-3-5.magritte-focus-visible___BN1eD_1-3-5.magritte-invalid___hB8h2_1-3-5{
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-3-3{
99
+ .magritte-digit-box-container___BqMWw_1-3-5{
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-3-3{
110
+ .magritte-digit-box___6J0Q2_1-3-5{
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-3-3::selection{
118
+ .magritte-digit-box___6J0Q2_1-3-5::selection{
119
119
  background-color:transparent;
120
120
  }
121
- .magritte-digit-box___6J0Q2_1-3-3::-moz-selection{
121
+ .magritte-digit-box___6J0Q2_1-3-5::-moz-selection{
122
122
  background-color:transparent;
123
123
  }
124
- .magritte-digits-input___4QeLj_1-3-3{
124
+ .magritte-digits-input___4QeLj_1-3-5{
125
125
  display:block;
126
126
  position:absolute;
127
127
  top:0;
@@ -139,32 +139,32 @@
139
139
  appearance:none;
140
140
  caret-color:transparent;
141
141
  }
142
- .magritte-digits-input___4QeLj_1-3-3::selection{
142
+ .magritte-digits-input___4QeLj_1-3-5::selection{
143
143
  background-color:transparent;
144
144
  appearance:none;
145
145
  }
146
- .magritte-digits-input___4QeLj_1-3-3::-moz-selection{
146
+ .magritte-digits-input___4QeLj_1-3-5::-moz-selection{
147
147
  background-color:transparent;
148
148
  appearance:none;
149
149
  }
150
- .magritte-caret-left___iZMuA_1-3-3::before,
151
- .magritte-caret-right___u8wNk_1-3-3::after{
150
+ .magritte-caret-left___iZMuA_1-3-5::before,
151
+ .magritte-caret-right___u8wNk_1-3-5::after{
152
152
  content:'';
153
153
  block-size:1em;
154
- border-left:1px solid var(--magritte-color-text-primary-v21-3-0);
155
- animation:magritte-caret-blink___-bhg7_1-3-3 1s steps(1) infinite;
154
+ border-left:1px solid var(--magritte-color-text-primary-v21-3-2);
155
+ animation:magritte-caret-blink___-bhg7_1-3-5 1s steps(1) infinite;
156
156
  }
157
- .magritte-placeholder___10kQ0_1-3-3{
158
- color:var(--magritte-color-component-input-text-placeholder-v21-3-0);
157
+ .magritte-placeholder___10kQ0_1-3-5{
158
+ color:var(--magritte-color-component-input-text-placeholder-v21-3-2);
159
159
  }
160
- .magritte-value-container___9JR3e_1-3-3{
160
+ .magritte-value-container___9JR3e_1-3-5{
161
161
  pointer-events:none;
162
162
  }
163
- .magritte-ghost-value___jPQwY_1-3-3{
163
+ .magritte-ghost-value___jPQwY_1-3-5{
164
164
  display:inline-block;
165
165
  visibility:hidden;
166
166
  }
167
- @keyframes magritte-caret-blink___-bhg7_1-3-3{
167
+ @keyframes magritte-caret-blink___-bhg7_1-3-5{
168
168
  50%{
169
169
  opacity:0;
170
170
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-pincode-input",
3
- "version": "1.3.3",
3
+ "version": "1.3.5",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -25,13 +25,13 @@
25
25
  "dependencies": {
26
26
  "@hh.ru/magritte-common-keyboard": "4.1.0",
27
27
  "@hh.ru/magritte-common-use-multiple-refs": "1.1.5",
28
- "@hh.ru/magritte-ui-form-helper": "1.0.24",
28
+ "@hh.ru/magritte-ui-form-helper": "1.0.26",
29
29
  "@hh.ru/magritte-ui-mock-component": "1.0.12",
30
- "@hh.ru/magritte-ui-theme-provider": "1.1.39"
30
+ "@hh.ru/magritte-ui-theme-provider": "1.1.41"
31
31
  },
32
32
  "peerDependencies": {
33
33
  "classnames": ">=2.3.2",
34
34
  "react": ">=18.2.0"
35
35
  },
36
- "gitHead": "f34863ead2fa1b6fd393104b762f2ba9f3d5d907"
36
+ "gitHead": "ad407dbb1969ddad3cc5892db20455e7b0f00ccc"
37
37
  }