@hh.ru/magritte-ui-pincode-input 1.4.14 → 1.4.15

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 +83 -83
  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-4-14","pincodeInput":"magritte-pincode-input___RpWyq_1-4-14","medium":"magritte-medium___wfRSc_1-4-14","placeholder":"magritte-placeholder___10kQ0_1-4-14","focus":"magritte-focus___IuhXb_1-4-14","invalid":"magritte-invalid___hB8h2_1-4-14","focus-visible":"magritte-focus-visible___BN1eD_1-4-14","focusVisible":"magritte-focus-visible___BN1eD_1-4-14","digit-box-container":"magritte-digit-box-container___BqMWw_1-4-14","digitBoxContainer":"magritte-digit-box-container___BqMWw_1-4-14","digit-box":"magritte-digit-box___6J0Q2_1-4-14","digitBox":"magritte-digit-box___6J0Q2_1-4-14","digits-input":"magritte-digits-input___4QeLj_1-4-14","digitsInput":"magritte-digits-input___4QeLj_1-4-14","caret-left":"magritte-caret-left___iZMuA_1-4-14","caretLeft":"magritte-caret-left___iZMuA_1-4-14","caret-right":"magritte-caret-right___u8wNk_1-4-14","caretRight":"magritte-caret-right___u8wNk_1-4-14","caret-blink":"magritte-caret-blink___-bhg7_1-4-14","caretBlink":"magritte-caret-blink___-bhg7_1-4-14","value-container":"magritte-value-container___9JR3e_1-4-14","valueContainer":"magritte-value-container___9JR3e_1-4-14","ghost-value":"magritte-ghost-value___jPQwY_1-4-14","ghostValue":"magritte-ghost-value___jPQwY_1-4-14"};
10
+ var styles = {"pincode-input":"magritte-pincode-input___RpWyq_1-4-15","pincodeInput":"magritte-pincode-input___RpWyq_1-4-15","medium":"magritte-medium___wfRSc_1-4-15","placeholder":"magritte-placeholder___10kQ0_1-4-15","focus":"magritte-focus___IuhXb_1-4-15","invalid":"magritte-invalid___hB8h2_1-4-15","focus-visible":"magritte-focus-visible___BN1eD_1-4-15","focusVisible":"magritte-focus-visible___BN1eD_1-4-15","digit-box-container":"magritte-digit-box-container___BqMWw_1-4-15","digitBoxContainer":"magritte-digit-box-container___BqMWw_1-4-15","digit-box":"magritte-digit-box___6J0Q2_1-4-15","digitBox":"magritte-digit-box___6J0Q2_1-4-15","digits-input":"magritte-digits-input___4QeLj_1-4-15","digitsInput":"magritte-digits-input___4QeLj_1-4-15","caret-left":"magritte-caret-left___iZMuA_1-4-15","caretLeft":"magritte-caret-left___iZMuA_1-4-15","caret-right":"magritte-caret-right___u8wNk_1-4-15","caretRight":"magritte-caret-right___u8wNk_1-4-15","caret-blink":"magritte-caret-blink___-bhg7_1-4-15","caretBlink":"magritte-caret-blink___-bhg7_1-4-15","value-container":"magritte-value-container___9JR3e_1-4-15","valueContainer":"magritte-value-container___9JR3e_1-4-15","ghost-value":"magritte-ghost-value___jPQwY_1-4-15","ghostValue":"magritte-ghost-value___jPQwY_1-4-15"};
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
@@ -1,102 +1,102 @@
1
1
  :root{
2
- --magritte-color-text-primary-v21-4-6:#000000;
3
- --magritte-color-component-input-stroke-state-field-hovered-v21-4-6:#CCD5DF;
4
- --magritte-color-component-input-stroke-state-field-focused-v21-4-6:#0070ff;
5
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v21-4-6:#0070ff7a;
6
- --magritte-color-component-input-stroke-state-field-invalid-v21-4-6:#ff4d3a;
7
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v21-4-6:#ff4d3a7a;
8
- --magritte-color-component-input-background-field-v21-4-6:#ffffff;
9
- --magritte-color-component-input-background-state-field-hovered-v21-4-6:#ffffff;
10
- --magritte-color-component-input-background-state-field-focused-v21-4-6:#ffffff;
11
- --magritte-color-component-input-background-state-field-invalid-v21-4-6:#ffffff;
12
- --magritte-color-component-input-stroke-field-v21-4-6:#DCE3EB;
13
- --magritte-color-component-input-text-state-content-focused-v21-4-6:#000000;
14
- --magritte-color-component-input-text-state-placeholder-hovered-v21-4-6:#768694;
15
- --magritte-color-component-input-text-state-placeholder-focused-v21-4-6:#AABBCA;
16
- --magritte-color-component-input-text-state-placeholder-invalid-v21-4-6:#AABBCA;
17
- --magritte-color-component-input-text-placeholder-v21-4-6:#AABBCA;
2
+ --magritte-color-text-primary-v21-5-0:#000000;
3
+ --magritte-color-component-input-stroke-state-field-hovered-v21-5-0:#CCD5DF;
4
+ --magritte-color-component-input-stroke-state-field-focused-v21-5-0:#0070ff;
5
+ --magritte-color-component-input-stroke-state-accent-focused-accessible-v21-5-0:#0070ff7a;
6
+ --magritte-color-component-input-stroke-state-field-invalid-v21-5-0:#ff4d3a;
7
+ --magritte-color-component-input-stroke-state-negative-focused-accessible-v21-5-0:#ff4d3a7a;
8
+ --magritte-color-component-input-background-field-v21-5-0:#ffffff;
9
+ --magritte-color-component-input-background-state-field-hovered-v21-5-0:#ffffff;
10
+ --magritte-color-component-input-background-state-field-focused-v21-5-0:#ffffff;
11
+ --magritte-color-component-input-background-state-field-invalid-v21-5-0:#ffffff;
12
+ --magritte-color-component-input-stroke-field-v21-5-0:#DCE3EB;
13
+ --magritte-color-component-input-text-state-content-focused-v21-5-0:#000000;
14
+ --magritte-color-component-input-text-state-placeholder-hovered-v21-5-0:#768694;
15
+ --magritte-color-component-input-text-state-placeholder-focused-v21-5-0:#AABBCA;
16
+ --magritte-color-component-input-text-state-placeholder-invalid-v21-5-0:#AABBCA;
17
+ --magritte-color-component-input-text-placeholder-v21-5-0:#AABBCA;
18
18
  }
19
19
  :root{
20
- --magritte-font-families-body-v21-4-6:hh sans;
21
- --magritte-semantic-border-width-default-v21-4-6:1px;
22
- --magritte-semantic-border-width-focused-v21-4-6:2px;
23
- --magritte-static-border-radius-300-v21-4-6:12px;
24
- --magritte-static-border-radius-450-v21-4-6:18px;
20
+ --magritte-font-families-body-v21-5-0:hh sans;
21
+ --magritte-semantic-border-width-default-v21-5-0:1px;
22
+ --magritte-semantic-border-width-focused-v21-5-0:2px;
23
+ --magritte-static-border-radius-300-v21-5-0:12px;
24
+ --magritte-static-border-radius-450-v21-5-0:18px;
25
25
  }
26
26
  .magritte-night-theme{
27
- --magritte-color-text-primary-v21-4-6:#ffffff;
28
- --magritte-color-component-input-stroke-state-field-hovered-v21-4-6:#3B3B3B;
29
- --magritte-color-component-input-stroke-state-field-focused-v21-4-6:#0070ff;
30
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v21-4-6:#0070ff7a;
31
- --magritte-color-component-input-stroke-state-field-invalid-v21-4-6:#ff4d3a;
32
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v21-4-6:#ff4d3a7a;
33
- --magritte-color-component-input-background-field-v21-4-6:#1B1B1B;
34
- --magritte-color-component-input-background-state-field-hovered-v21-4-6:#1B1B1B;
35
- --magritte-color-component-input-background-state-field-focused-v21-4-6:#1B1B1B;
36
- --magritte-color-component-input-background-state-field-invalid-v21-4-6:#1B1B1B;
37
- --magritte-color-component-input-stroke-field-v21-4-6:#303030;
38
- --magritte-color-component-input-text-placeholder-v21-4-6:#535353;
39
- --magritte-color-component-input-text-state-content-focused-v21-4-6:#ffffff;
40
- --magritte-color-component-input-text-state-placeholder-hovered-v21-4-6:#5E5E5E;
41
- --magritte-color-component-input-text-state-placeholder-focused-v21-4-6:#535353;
42
- --magritte-color-component-input-text-state-placeholder-invalid-v21-4-6:#535353;
43
- }
44
- .magritte-pincode-input___RpWyq_1-4-14{
27
+ --magritte-color-text-primary-v21-5-0:#ffffff;
28
+ --magritte-color-component-input-stroke-state-field-hovered-v21-5-0:#3B3B3B;
29
+ --magritte-color-component-input-stroke-state-field-focused-v21-5-0:#0070ff;
30
+ --magritte-color-component-input-stroke-state-accent-focused-accessible-v21-5-0:#0070ff7a;
31
+ --magritte-color-component-input-stroke-state-field-invalid-v21-5-0:#ff4d3a;
32
+ --magritte-color-component-input-stroke-state-negative-focused-accessible-v21-5-0:#ff4d3a7a;
33
+ --magritte-color-component-input-background-field-v21-5-0:#111;
34
+ --magritte-color-component-input-background-state-field-hovered-v21-5-0:#111;
35
+ --magritte-color-component-input-background-state-field-focused-v21-5-0:#111;
36
+ --magritte-color-component-input-background-state-field-invalid-v21-5-0:#111;
37
+ --magritte-color-component-input-stroke-field-v21-5-0:#303030;
38
+ --magritte-color-component-input-text-placeholder-v21-5-0:#535353;
39
+ --magritte-color-component-input-text-state-content-focused-v21-5-0:#ffffff;
40
+ --magritte-color-component-input-text-state-placeholder-hovered-v21-5-0:#5E5E5E;
41
+ --magritte-color-component-input-text-state-placeholder-focused-v21-5-0:#535353;
42
+ --magritte-color-component-input-text-state-placeholder-invalid-v21-5-0:#535353;
43
+ }
44
+ .magritte-pincode-input___RpWyq_1-4-15{
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-4-6) var(--magritte-color-component-input-stroke-field-v21-4-6);
52
- border-radius:var(--magritte-static-border-radius-450-v21-4-6);
53
- background-color:var(--magritte-color-component-input-background-field-v21-4-6);
51
+ box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v21-5-0) var(--magritte-color-component-input-stroke-field-v21-5-0);
52
+ border-radius:var(--magritte-static-border-radius-450-v21-5-0);
53
+ background-color:var(--magritte-color-component-input-background-field-v21-5-0);
54
54
  position:relative;
55
55
  overflow:clip;
56
56
  cursor:text;
57
- font-family:var(--magritte-font-families-body-v21-4-6);
57
+ font-family:var(--magritte-font-families-body-v21-5-0);
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-4-6);
62
+ color:var(--magritte-color-component-input-text-state-content-focused-v21-5-0);
63
63
  }
64
- .magritte-pincode-input___RpWyq_1-4-14.magritte-medium___wfRSc_1-4-14{
64
+ .magritte-pincode-input___RpWyq_1-4-15.magritte-medium___wfRSc_1-4-15{
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-4-6);
69
+ border-radius:var(--magritte-static-border-radius-300-v21-5-0);
70
70
  height:76px;
71
71
  }
72
- .magritte-pincode-input___RpWyq_1-4-14:hover{
73
- box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v21-4-6) var(--magritte-color-component-input-stroke-state-field-hovered-v21-4-6);
74
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v21-4-6);
72
+ .magritte-pincode-input___RpWyq_1-4-15:hover{
73
+ box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v21-5-0) var(--magritte-color-component-input-stroke-state-field-hovered-v21-5-0);
74
+ background-color:var(--magritte-color-component-input-background-state-field-hovered-v21-5-0);
75
75
  }
76
- .magritte-pincode-input___RpWyq_1-4-14:hover .magritte-placeholder___10kQ0_1-4-14{
77
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v21-4-6);
76
+ .magritte-pincode-input___RpWyq_1-4-15:hover .magritte-placeholder___10kQ0_1-4-15{
77
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v21-5-0);
78
78
  }
79
- .magritte-pincode-input___RpWyq_1-4-14.magritte-focus___IuhXb_1-4-14{
80
- box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-focused-v21-4-6) var(--magritte-color-component-input-stroke-state-field-focused-v21-4-6);
81
- background-color:var(--magritte-color-component-input-background-state-field-focused-v21-4-6);
79
+ .magritte-pincode-input___RpWyq_1-4-15.magritte-focus___IuhXb_1-4-15{
80
+ box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-focused-v21-5-0) var(--magritte-color-component-input-stroke-state-field-focused-v21-5-0);
81
+ background-color:var(--magritte-color-component-input-background-state-field-focused-v21-5-0);
82
82
  }
83
- .magritte-pincode-input___RpWyq_1-4-14.magritte-focus___IuhXb_1-4-14 .magritte-placeholder___10kQ0_1-4-14{
84
- color:var(--magritte-color-component-input-text-state-placeholder-focused-v21-4-6);
83
+ .magritte-pincode-input___RpWyq_1-4-15.magritte-focus___IuhXb_1-4-15 .magritte-placeholder___10kQ0_1-4-15{
84
+ color:var(--magritte-color-component-input-text-state-placeholder-focused-v21-5-0);
85
85
  }
86
- .magritte-pincode-input___RpWyq_1-4-14.magritte-invalid___hB8h2_1-4-14{
87
- box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v21-4-6) var(--magritte-color-component-input-stroke-state-field-invalid-v21-4-6);
88
- background-color:var(--magritte-color-component-input-background-state-field-invalid-v21-4-6);
86
+ .magritte-pincode-input___RpWyq_1-4-15.magritte-invalid___hB8h2_1-4-15{
87
+ box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v21-5-0) var(--magritte-color-component-input-stroke-state-field-invalid-v21-5-0);
88
+ background-color:var(--magritte-color-component-input-background-state-field-invalid-v21-5-0);
89
89
  }
90
- .magritte-pincode-input___RpWyq_1-4-14.magritte-invalid___hB8h2_1-4-14 .magritte-placeholder___10kQ0_1-4-14{
91
- color:var(--magritte-color-component-input-text-state-placeholder-invalid-v21-4-6);
90
+ .magritte-pincode-input___RpWyq_1-4-15.magritte-invalid___hB8h2_1-4-15 .magritte-placeholder___10kQ0_1-4-15{
91
+ color:var(--magritte-color-component-input-text-state-placeholder-invalid-v21-5-0);
92
92
  }
93
- .magritte-pincode-input___RpWyq_1-4-14.magritte-focus-visible___BN1eD_1-4-14{
94
- outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v21-4-6) solid 4px;
93
+ .magritte-pincode-input___RpWyq_1-4-15.magritte-focus-visible___BN1eD_1-4-15{
94
+ outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v21-5-0) solid 4px;
95
95
  }
96
- .magritte-pincode-input___RpWyq_1-4-14.magritte-focus-visible___BN1eD_1-4-14.magritte-invalid___hB8h2_1-4-14{
97
- outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v21-4-6);
96
+ .magritte-pincode-input___RpWyq_1-4-15.magritte-focus-visible___BN1eD_1-4-15.magritte-invalid___hB8h2_1-4-15{
97
+ outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v21-5-0);
98
98
  }
99
- .magritte-digit-box-container___BqMWw_1-4-14{
99
+ .magritte-digit-box-container___BqMWw_1-4-15{
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-14{
110
+ .magritte-digit-box___6J0Q2_1-4-15{
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-14::selection{
118
+ .magritte-digit-box___6J0Q2_1-4-15::selection{
119
119
  background-color:transparent;
120
120
  }
121
- .magritte-digit-box___6J0Q2_1-4-14::-moz-selection{
121
+ .magritte-digit-box___6J0Q2_1-4-15::-moz-selection{
122
122
  background-color:transparent;
123
123
  }
124
- .magritte-digits-input___4QeLj_1-4-14{
124
+ .magritte-digits-input___4QeLj_1-4-15{
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-14::selection{
142
+ .magritte-digits-input___4QeLj_1-4-15::selection{
143
143
  background-color:transparent;
144
144
  appearance:none;
145
145
  }
146
- .magritte-digits-input___4QeLj_1-4-14::-moz-selection{
146
+ .magritte-digits-input___4QeLj_1-4-15::-moz-selection{
147
147
  background-color:transparent;
148
148
  appearance:none;
149
149
  }
150
- .magritte-caret-left___iZMuA_1-4-14::before,
151
- .magritte-caret-right___u8wNk_1-4-14::after{
150
+ .magritte-caret-left___iZMuA_1-4-15::before,
151
+ .magritte-caret-right___u8wNk_1-4-15::after{
152
152
  content:'';
153
153
  position:absolute;
154
154
  top:50%;
155
155
  transform:translateY(-50%);
156
156
  block-size:1em;
157
- border-left:1px solid var(--magritte-color-text-primary-v21-4-6);
158
- animation:magritte-caret-blink___-bhg7_1-4-14 1s steps(1) infinite;
157
+ border-left:1px solid var(--magritte-color-text-primary-v21-5-0);
158
+ animation:magritte-caret-blink___-bhg7_1-4-15 1s steps(1) infinite;
159
159
  }
160
- .magritte-caret-left___iZMuA_1-4-14::before{
160
+ .magritte-caret-left___iZMuA_1-4-15::before{
161
161
  left:-1px;
162
162
  }
163
- .magritte-caret-right___u8wNk_1-4-14::after{
163
+ .magritte-caret-right___u8wNk_1-4-15::after{
164
164
  right:-1px;
165
165
  }
166
- .magritte-placeholder___10kQ0_1-4-14{
167
- color:var(--magritte-color-component-input-text-placeholder-v21-4-6);
166
+ .magritte-placeholder___10kQ0_1-4-15{
167
+ color:var(--magritte-color-component-input-text-placeholder-v21-5-0);
168
168
  }
169
- .magritte-value-container___9JR3e_1-4-14{
169
+ .magritte-value-container___9JR3e_1-4-15{
170
170
  pointer-events:none;
171
171
  position:relative;
172
172
  }
173
- .magritte-ghost-value___jPQwY_1-4-14{
173
+ .magritte-ghost-value___jPQwY_1-4-15{
174
174
  display:inline-block;
175
175
  visibility:hidden;
176
176
  }
177
- @keyframes magritte-caret-blink___-bhg7_1-4-14{
177
+ @keyframes magritte-caret-blink___-bhg7_1-4-15{
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.14",
3
+ "version": "1.4.15",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -24,13 +24,13 @@
24
24
  "dependencies": {
25
25
  "@hh.ru/magritte-common-keyboard": "4.1.2",
26
26
  "@hh.ru/magritte-common-use-multiple-refs": "1.1.7",
27
- "@hh.ru/magritte-ui-form-helper": "1.0.39",
27
+ "@hh.ru/magritte-ui-form-helper": "1.0.40",
28
28
  "@hh.ru/magritte-ui-mock-component": "1.1.4",
29
- "@hh.ru/magritte-ui-theme-provider": "1.1.48"
29
+ "@hh.ru/magritte-ui-theme-provider": "1.1.49"
30
30
  },
31
31
  "peerDependencies": {
32
32
  "classnames": ">=2.3.2",
33
33
  "react": ">=18.2.0"
34
34
  },
35
- "gitHead": "b0297119391b8272115dedd5655a3c1fe14148a5"
35
+ "gitHead": "32b212447694d1d24e4f9453672dcaa63335c657"
36
36
  }