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