@hh.ru/magritte-ui-chips-trigger 4.0.8 → 4.0.10

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/ChipsTrigger.js +1 -1
  2. package/index.css +182 -180
  3. package/package.json +7 -7
package/ChipsTrigger.js CHANGED
@@ -10,7 +10,7 @@ import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
10
10
  import { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
11
11
  import { useFocus } from '@hh.ru/magritte-ui-input/useFocus';
12
12
 
13
- var styles = {"root":"magritte-root___-zVdz_4-0-8","focused":"magritte-focused___0Uzyu_4-0-8","invalid":"magritte-invalid___tVzQV_4-0-8","disabled":"magritte-disabled___UeqcV_4-0-8","label":"magritte-label___j7Trt_4-0-8","focus-visible":"magritte-focus-visible___ifvAP_4-0-8","focusVisible":"magritte-focus-visible___ifvAP_4-0-8","large":"magritte-large___JIrIy_4-0-8","field":"magritte-field___rlEmn_4-0-8","icon":"magritte-icon___fDMiz_4-0-8","scrollable-area":"magritte-scrollable-area___-xMF2_4-0-8","scrollableArea":"magritte-scrollable-area___-xMF2_4-0-8","medium":"magritte-medium___Xk-XB_4-0-8","chips-and-input":"magritte-chips-and-input___qg-Ba_4-0-8","chipsAndInput":"magritte-chips-and-input___qg-Ba_4-0-8","field-input":"magritte-field-input___04Cag_4-0-8","fieldInput":"magritte-field-input___04Cag_4-0-8","label-wrapper":"magritte-label-wrapper___De7Bm_4-0-8","labelWrapper":"magritte-label-wrapper___De7Bm_4-0-8","icon_expanded":"magritte-icon_expanded___RaOT-_4-0-8","iconExpanded":"magritte-icon_expanded___RaOT-_4-0-8","custom-chip-wrapper":"magritte-custom-chip-wrapper___a9kJ6_4-0-8","customChipWrapper":"magritte-custom-chip-wrapper___a9kJ6_4-0-8"};
13
+ var styles = {"root":"magritte-root___-zVdz_4-0-10","focused":"magritte-focused___0Uzyu_4-0-10","invalid":"magritte-invalid___tVzQV_4-0-10","disabled":"magritte-disabled___UeqcV_4-0-10","label":"magritte-label___j7Trt_4-0-10","focus-visible":"magritte-focus-visible___ifvAP_4-0-10","focusVisible":"magritte-focus-visible___ifvAP_4-0-10","large":"magritte-large___JIrIy_4-0-10","field":"magritte-field___rlEmn_4-0-10","icon":"magritte-icon___fDMiz_4-0-10","scrollable-area":"magritte-scrollable-area___-xMF2_4-0-10","scrollableArea":"magritte-scrollable-area___-xMF2_4-0-10","medium":"magritte-medium___Xk-XB_4-0-10","chips-and-input":"magritte-chips-and-input___qg-Ba_4-0-10","chipsAndInput":"magritte-chips-and-input___qg-Ba_4-0-10","field-input":"magritte-field-input___04Cag_4-0-10","fieldInput":"magritte-field-input___04Cag_4-0-10","label-wrapper":"magritte-label-wrapper___De7Bm_4-0-10","labelWrapper":"magritte-label-wrapper___De7Bm_4-0-10","icon_expanded":"magritte-icon_expanded___RaOT-_4-0-10","iconExpanded":"magritte-icon_expanded___RaOT-_4-0-10","custom-chip-wrapper":"magritte-custom-chip-wrapper___a9kJ6_4-0-10","customChipWrapper":"magritte-custom-chip-wrapper___a9kJ6_4-0-10"};
14
14
 
15
15
  const focusOnLastChip = (event, chipsContainer, input) => {
16
16
  if (!chipsContainer || !input) {
package/index.css CHANGED
@@ -1,105 +1,105 @@
1
1
  :root{
2
- --magritte-color-component-input-stroke-state-field-hovered-v23-1-0:#CCD5DF;
3
- --magritte-color-component-input-stroke-state-field-focused-v23-1-0:#0070ff;
4
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v23-1-0:#0070ff7a;
5
- --magritte-color-component-input-stroke-state-field-invalid-v23-1-0:#ff4d3a;
6
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v23-1-0:#ff4d3a7a;
7
- --magritte-color-component-input-stroke-state-field-disabled-v23-1-0:#EEF1F7;
8
- --magritte-color-component-input-background-field-v23-1-0:#ffffff;
9
- --magritte-color-component-input-background-state-field-hovered-v23-1-0:#ffffff;
10
- --magritte-color-component-input-background-state-field-focused-v23-1-0:#ffffff;
11
- --magritte-color-component-input-background-state-field-invalid-v23-1-0:#ffffff;
12
- --magritte-color-component-input-background-state-field-disabled-v23-1-0:#F4F6FB;
13
- --magritte-color-component-input-stroke-field-v23-1-0:#DCE3EB;
14
- --magritte-color-component-input-text-state-placeholder-disabled-v23-1-0:#AABBCA;
15
- --magritte-color-component-input-text-state-placeholder-hovered-v23-1-0:#768694;
16
- --magritte-color-component-input-text-state-placeholder-focused-v23-1-0:#AABBCA;
17
- --magritte-color-component-input-text-state-placeholder-invalid-v23-1-0:#AABBCA;
18
- --magritte-color-component-input-icon-chevron-v23-1-0:#AABBCA;
19
- --magritte-color-component-input-icon-state-chevron-focused-v23-1-0:#000000;
20
- --magritte-color-component-input-icon-state-chevron-hovered-v23-1-0:#6a7885;
21
- --magritte-color-component-input-icon-state-chevron-disabled-v23-1-0:#AABBCA;
22
- --magritte-color-component-input-icon-state-chevron-invalid-v23-1-0:#AABBCA;
23
- --magritte-color-component-input-text-placeholder-v23-1-0:#AABBCA;
24
- --magritte-color-component-input-chips-background-state-neutral-disable-v23-1-0:#DCE3EB;
25
- --magritte-color-component-input-chips-text-state-neutral-disable-v23-1-0:#96aabb;
2
+ --magritte-color-component-input-stroke-state-field-hovered-v23-2-0:#CCD5DF;
3
+ --magritte-color-component-input-stroke-state-field-focused-v23-2-0:#0070ff;
4
+ --magritte-color-component-input-stroke-state-accent-focused-accessible-v23-2-0:#0070ff7a;
5
+ --magritte-color-component-input-stroke-state-field-invalid-v23-2-0:#ff4d3a;
6
+ --magritte-color-component-input-stroke-state-negative-focused-accessible-v23-2-0:#ff4d3a7a;
7
+ --magritte-color-component-input-stroke-state-field-disabled-v23-2-0:#EEF1F7;
8
+ --magritte-color-component-input-background-field-v23-2-0:#ffffff;
9
+ --magritte-color-component-input-background-state-field-hovered-v23-2-0:#ffffff;
10
+ --magritte-color-component-input-background-state-field-focused-v23-2-0:#ffffff;
11
+ --magritte-color-component-input-background-state-field-invalid-v23-2-0:#ffffff;
12
+ --magritte-color-component-input-background-state-field-disabled-v23-2-0:#F4F6FB;
13
+ --magritte-color-component-input-stroke-field-v23-2-0:#DCE3EB;
14
+ --magritte-color-component-input-text-state-placeholder-disabled-v23-2-0:#AABBCA;
15
+ --magritte-color-component-input-text-state-placeholder-hovered-v23-2-0:#768694;
16
+ --magritte-color-component-input-text-state-placeholder-focused-v23-2-0:#AABBCA;
17
+ --magritte-color-component-input-text-state-placeholder-invalid-v23-2-0:#AABBCA;
18
+ --magritte-color-component-input-icon-chevron-v23-2-0:#AABBCA;
19
+ --magritte-color-component-input-icon-state-chevron-focused-v23-2-0:#000000;
20
+ --magritte-color-component-input-icon-state-chevron-hovered-v23-2-0:#6a7885;
21
+ --magritte-color-component-input-icon-state-chevron-disabled-v23-2-0:#AABBCA;
22
+ --magritte-color-component-input-icon-state-chevron-invalid-v23-2-0:#AABBCA;
23
+ --magritte-color-component-input-text-placeholder-v23-2-0:#AABBCA;
24
+ --magritte-color-component-input-chips-background-state-neutral-disable-v23-2-0:#DCE3EB;
25
+ --magritte-color-component-input-chips-text-state-neutral-disable-v23-2-0:#96aabb;
26
26
  }
27
27
 
28
28
  :root{
29
- --magritte-typography-label-2-regular-font-family-v23-1-0:"hh sans";
30
- --magritte-typography-label-2-regular-font-weight-v23-1-0:400;
31
- --magritte-typography-label-2-regular-line-height-v23-1-0:22px;
32
- --magritte-typography-label-2-regular-font-size-v23-1-0:16px;
33
- --magritte-typography-label-2-regular-letter-spacing-v23-1-0:0em;
34
- --magritte-typography-label-2-regular-text-indent-v23-1-0:0px;
35
- --magritte-typography-label-2-regular-text-transform-v23-1-0:none;
36
- --magritte-typography-label-2-regular-text-decoration-v23-1-0:none;
37
- --magritte-semantic-animation-ease-in-out-100-timing-function-v23-1-0:cubic-bezier(0.25, 0.1, 0.25, 1);
38
- --magritte-semantic-animation-ease-in-out-100-duration-v23-1-0:100ms;
39
- --magritte-static-space-50-v23-1-0:2px;
40
- --magritte-static-space-100-v23-1-0:4px;
41
- --magritte-static-space-150-v23-1-0:6px;
42
- --magritte-static-space-200-v23-1-0:8px;
43
- --magritte-static-space-250-v23-1-0:10px;
44
- --magritte-static-space-300-v23-1-0:12px;
45
- --magritte-static-space-400-v23-1-0:16px;
46
- --magritte-core-border-radius-3-x-v23-1-0:12px;
29
+ --magritte-typography-label-2-regular-font-family-v23-2-0:"hh sans";
30
+ --magritte-typography-label-2-regular-font-weight-v23-2-0:400;
31
+ --magritte-typography-label-2-regular-line-height-v23-2-0:22px;
32
+ --magritte-typography-label-2-regular-font-size-v23-2-0:16px;
33
+ --magritte-typography-label-2-regular-letter-spacing-v23-2-0:0em;
34
+ --magritte-typography-label-2-regular-text-indent-v23-2-0:0px;
35
+ --magritte-typography-label-2-regular-text-transform-v23-2-0:none;
36
+ --magritte-typography-label-2-regular-text-decoration-v23-2-0:none;
37
+ --magritte-semantic-animation-ease-in-out-100-timing-function-v23-2-0:cubic-bezier(0.25, 0.1, 0.25, 1);
38
+ --magritte-semantic-animation-ease-in-out-100-duration-v23-2-0:100ms;
39
+ --magritte-static-space-50-v23-2-0:2px;
40
+ --magritte-static-space-100-v23-2-0:4px;
41
+ --magritte-static-space-150-v23-2-0:6px;
42
+ --magritte-static-space-200-v23-2-0:8px;
43
+ --magritte-static-space-250-v23-2-0:10px;
44
+ --magritte-static-space-300-v23-2-0:12px;
45
+ --magritte-static-space-400-v23-2-0:16px;
46
+ --magritte-core-border-radius-3-x-v23-2-0:12px;
47
47
  }
48
48
 
49
49
  .magritte-night-theme{
50
- --magritte-color-component-input-stroke-state-field-hovered-v23-1-0:#3B3B3B;
51
- --magritte-color-component-input-stroke-state-field-focused-v23-1-0:#0070ff;
52
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v23-1-0:#0070ff7a;
53
- --magritte-color-component-input-stroke-state-field-invalid-v23-1-0:#ff4d3a;
54
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v23-1-0:#ff4d3a7a;
55
- --magritte-color-component-input-stroke-state-field-disabled-v23-1-0:#111;
56
- --magritte-color-component-input-background-field-v23-1-0:#111;
57
- --magritte-color-component-input-background-state-field-hovered-v23-1-0:#111;
58
- --magritte-color-component-input-background-state-field-focused-v23-1-0:#111;
59
- --magritte-color-component-input-background-state-field-invalid-v23-1-0:#111;
60
- --magritte-color-component-input-background-state-field-disabled-v23-1-0:#111;
61
- --magritte-color-component-input-stroke-field-v23-1-0:#303030;
62
- --magritte-color-component-input-text-placeholder-v23-1-0:#535353;
63
- --magritte-color-component-input-text-state-placeholder-disabled-v23-1-0:#474747;
64
- --magritte-color-component-input-text-state-placeholder-hovered-v23-1-0:#5E5E5E;
65
- --magritte-color-component-input-text-state-placeholder-focused-v23-1-0:#535353;
66
- --magritte-color-component-input-text-state-placeholder-invalid-v23-1-0:#535353;
67
- --magritte-color-component-input-icon-state-chevron-disabled-v23-1-0:#474747;
68
- --magritte-color-component-input-icon-state-chevron-hovered-v23-1-0:#848484;
69
- --magritte-color-component-input-icon-state-chevron-focused-v23-1-0:#ffffff;
70
- --magritte-color-component-input-icon-state-chevron-invalid-v23-1-0:#474747;
71
- --magritte-color-component-input-icon-chevron-v23-1-0:#5E5E5E;
72
- --magritte-color-component-input-chips-background-state-neutral-disable-v23-1-0:#1B1B1B;
73
- --magritte-color-component-input-chips-text-state-neutral-disable-v23-1-0:#474747;
50
+ --magritte-color-component-input-stroke-state-field-hovered-v23-2-0:#3B3B3B;
51
+ --magritte-color-component-input-stroke-state-field-focused-v23-2-0:#0070ff;
52
+ --magritte-color-component-input-stroke-state-accent-focused-accessible-v23-2-0:#0070ff7a;
53
+ --magritte-color-component-input-stroke-state-field-invalid-v23-2-0:#ff4d3a;
54
+ --magritte-color-component-input-stroke-state-negative-focused-accessible-v23-2-0:#ff4d3a7a;
55
+ --magritte-color-component-input-stroke-state-field-disabled-v23-2-0:#111;
56
+ --magritte-color-component-input-background-field-v23-2-0:#111;
57
+ --magritte-color-component-input-background-state-field-hovered-v23-2-0:#111;
58
+ --magritte-color-component-input-background-state-field-focused-v23-2-0:#111;
59
+ --magritte-color-component-input-background-state-field-invalid-v23-2-0:#111;
60
+ --magritte-color-component-input-background-state-field-disabled-v23-2-0:#111;
61
+ --magritte-color-component-input-stroke-field-v23-2-0:#303030;
62
+ --magritte-color-component-input-text-placeholder-v23-2-0:#535353;
63
+ --magritte-color-component-input-text-state-placeholder-disabled-v23-2-0:#474747;
64
+ --magritte-color-component-input-text-state-placeholder-hovered-v23-2-0:#5E5E5E;
65
+ --magritte-color-component-input-text-state-placeholder-focused-v23-2-0:#535353;
66
+ --magritte-color-component-input-text-state-placeholder-invalid-v23-2-0:#535353;
67
+ --magritte-color-component-input-icon-state-chevron-disabled-v23-2-0:#474747;
68
+ --magritte-color-component-input-icon-state-chevron-hovered-v23-2-0:#848484;
69
+ --magritte-color-component-input-icon-state-chevron-focused-v23-2-0:#ffffff;
70
+ --magritte-color-component-input-icon-state-chevron-invalid-v23-2-0:#474747;
71
+ --magritte-color-component-input-icon-chevron-v23-2-0:#5E5E5E;
72
+ --magritte-color-component-input-chips-background-state-neutral-disable-v23-2-0:#1B1B1B;
73
+ --magritte-color-component-input-chips-text-state-neutral-disable-v23-2-0:#474747;
74
74
  }
75
75
 
76
76
  .magritte-zp-day-theme{
77
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v23-1-0:#0070ff7a;
78
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v23-1-0:#ff4d3a7a;
79
- --magritte-color-component-input-stroke-state-field-hovered-v23-1-0:#CCD5DF;
80
- --magritte-color-component-input-stroke-state-field-focused-v23-1-0:#7195AF;
81
- --magritte-color-component-input-stroke-state-field-invalid-v23-1-0:#ff4d3a;
82
- --magritte-color-component-input-stroke-state-field-disabled-v23-1-0:#EEF1F7;
83
- --magritte-color-component-input-background-field-v23-1-0:#ffffff;
84
- --magritte-color-component-input-background-state-field-hovered-v23-1-0:#ffffff;
85
- --magritte-color-component-input-background-state-field-focused-v23-1-0:#ffffff;
86
- --magritte-color-component-input-background-state-field-invalid-v23-1-0:#ffffff;
87
- --magritte-color-component-input-background-state-field-disabled-v23-1-0:#F4F6FB;
88
- --magritte-color-component-input-stroke-field-v23-1-0:#DCE3EB;
89
- --magritte-color-component-input-text-placeholder-v23-1-0:#AABBCA;
90
- --magritte-color-component-input-text-state-placeholder-disabled-v23-1-0:#AABBCA;
91
- --magritte-color-component-input-text-state-placeholder-hovered-v23-1-0:#768694;
92
- --magritte-color-component-input-text-state-placeholder-focused-v23-1-0:#AABBCA;
93
- --magritte-color-component-input-text-state-placeholder-invalid-v23-1-0:#AABBCA;
94
- --magritte-color-component-input-icon-chevron-v23-1-0:#AABBCA;
95
- --magritte-color-component-input-icon-state-chevron-hovered-v23-1-0:#8293a2;
96
- --magritte-color-component-input-icon-state-chevron-disabled-v23-1-0:#96aabb;
97
- --magritte-color-component-input-icon-state-chevron-focused-v23-1-0:#000000;
98
- --magritte-color-component-input-icon-state-chevron-invalid-v23-1-0:#AABBCA;
99
- --magritte-color-component-input-chips-background-state-neutral-disable-v23-1-0:#DCE3EB;
100
- --magritte-color-component-input-chips-text-state-neutral-disable-v23-1-0:#96aabb;
101
- }
102
- .magritte-root___-zVdz_4-0-8{
77
+ --magritte-color-component-input-stroke-state-accent-focused-accessible-v23-2-0:#0070ff7a;
78
+ --magritte-color-component-input-stroke-state-negative-focused-accessible-v23-2-0:#ff4d3a7a;
79
+ --magritte-color-component-input-stroke-state-field-hovered-v23-2-0:#CCD5DF;
80
+ --magritte-color-component-input-stroke-state-field-focused-v23-2-0:#7195AF;
81
+ --magritte-color-component-input-stroke-state-field-invalid-v23-2-0:#ff4d3a;
82
+ --magritte-color-component-input-stroke-state-field-disabled-v23-2-0:#EEF1F7;
83
+ --magritte-color-component-input-background-field-v23-2-0:#ffffff;
84
+ --magritte-color-component-input-background-state-field-hovered-v23-2-0:#ffffff;
85
+ --magritte-color-component-input-background-state-field-focused-v23-2-0:#ffffff;
86
+ --magritte-color-component-input-background-state-field-invalid-v23-2-0:#ffffff;
87
+ --magritte-color-component-input-background-state-field-disabled-v23-2-0:#F4F6FB;
88
+ --magritte-color-component-input-stroke-field-v23-2-0:#DCE3EB;
89
+ --magritte-color-component-input-text-placeholder-v23-2-0:#AABBCA;
90
+ --magritte-color-component-input-text-state-placeholder-disabled-v23-2-0:#AABBCA;
91
+ --magritte-color-component-input-text-state-placeholder-hovered-v23-2-0:#768694;
92
+ --magritte-color-component-input-text-state-placeholder-focused-v23-2-0:#AABBCA;
93
+ --magritte-color-component-input-text-state-placeholder-invalid-v23-2-0:#AABBCA;
94
+ --magritte-color-component-input-icon-chevron-v23-2-0:#AABBCA;
95
+ --magritte-color-component-input-icon-state-chevron-hovered-v23-2-0:#8293a2;
96
+ --magritte-color-component-input-icon-state-chevron-disabled-v23-2-0:#96aabb;
97
+ --magritte-color-component-input-icon-state-chevron-focused-v23-2-0:#000000;
98
+ --magritte-color-component-input-icon-state-chevron-invalid-v23-2-0:#AABBCA;
99
+ --magritte-color-component-input-chips-background-state-neutral-disable-v23-2-0:#DCE3EB;
100
+ --magritte-color-component-input-chips-text-state-neutral-disable-v23-2-0:#96aabb;
101
+ }
102
+ .magritte-root___-zVdz_4-0-10{
103
103
  display:inline-flex;
104
104
  position:relative;
105
105
  width:100%;
@@ -108,159 +108,161 @@
108
108
  white-space:nowrap;
109
109
  appearance:none;
110
110
  overflow-y:auto;
111
- background-color:var(--magritte-color-component-input-background-field-v23-1-0);
112
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v23-1-0);
113
- border-radius:var(--magritte-core-border-radius-3-x-v23-1-0);
114
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-chevron-v23-1-0);
111
+ background-color:var(--magritte-color-component-input-background-field-v23-2-0);
112
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v23-2-0);
113
+ border-radius:var(--magritte-core-border-radius-3-x-v23-2-0);
114
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-chevron-v23-2-0);
115
115
  }
116
116
  @media (min-width: 1020px){
117
- body.magritte-old-layout .magritte-root___-zVdz_4-0-8:not(.magritte-focused___0Uzyu_4-0-8):not(.magritte-invalid___tVzQV_4-0-8):not(.magritte-disabled___UeqcV_4-0-8):hover{
118
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v23-1-0);
119
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v23-1-0);
120
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v23-1-0);
117
+ body.magritte-old-layout .magritte-root___-zVdz_4-0-10:not(.magritte-focused___0Uzyu_4-0-10):not(.magritte-invalid___tVzQV_4-0-10):not(.magritte-disabled___UeqcV_4-0-10):hover{
118
+ background-color:var(--magritte-color-component-input-background-state-field-hovered-v23-2-0);
119
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v23-2-0);
120
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v23-2-0);
121
121
  }
122
- body.magritte-old-layout .magritte-root___-zVdz_4-0-8:not(.magritte-focused___0Uzyu_4-0-8):not(.magritte-invalid___tVzQV_4-0-8):not(.magritte-disabled___UeqcV_4-0-8):hover .magritte-label___j7Trt_4-0-8{
123
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v23-1-0);
122
+ body.magritte-old-layout .magritte-root___-zVdz_4-0-10:not(.magritte-focused___0Uzyu_4-0-10):not(.magritte-invalid___tVzQV_4-0-10):not(.magritte-disabled___UeqcV_4-0-10):hover .magritte-label___j7Trt_4-0-10{
123
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v23-2-0);
124
124
  }
125
125
  }
126
126
  @media (min-width: 1024px){
127
- body:not(.magritte-old-layout) .magritte-root___-zVdz_4-0-8:not(.magritte-focused___0Uzyu_4-0-8):not(.magritte-invalid___tVzQV_4-0-8):not(.magritte-disabled___UeqcV_4-0-8):hover{
128
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v23-1-0);
129
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v23-1-0);
130
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v23-1-0);
127
+ body:not(.magritte-old-layout) .magritte-root___-zVdz_4-0-10:not(.magritte-focused___0Uzyu_4-0-10):not(.magritte-invalid___tVzQV_4-0-10):not(.magritte-disabled___UeqcV_4-0-10):hover{
128
+ background-color:var(--magritte-color-component-input-background-state-field-hovered-v23-2-0);
129
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v23-2-0);
130
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v23-2-0);
131
131
  }
132
- body:not(.magritte-old-layout) .magritte-root___-zVdz_4-0-8:not(.magritte-focused___0Uzyu_4-0-8):not(.magritte-invalid___tVzQV_4-0-8):not(.magritte-disabled___UeqcV_4-0-8):hover .magritte-label___j7Trt_4-0-8{
133
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v23-1-0);
132
+ body:not(.magritte-old-layout) .magritte-root___-zVdz_4-0-10:not(.magritte-focused___0Uzyu_4-0-10):not(.magritte-invalid___tVzQV_4-0-10):not(.magritte-disabled___UeqcV_4-0-10):hover .magritte-label___j7Trt_4-0-10{
133
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v23-2-0);
134
134
  }
135
135
  }
136
- .magritte-root___-zVdz_4-0-8:not(.magritte-disabled___UeqcV_4-0-8){
136
+ .magritte-root___-zVdz_4-0-10:not(.magritte-disabled___UeqcV_4-0-10){
137
137
  cursor:text;
138
138
  }
139
- .magritte-root___-zVdz_4-0-8.magritte-focused___0Uzyu_4-0-8{
140
- background-color:var(--magritte-color-component-input-background-state-field-focused-v23-1-0);
141
- box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v23-1-0);
142
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v23-1-0);
139
+ .magritte-root___-zVdz_4-0-10.magritte-focused___0Uzyu_4-0-10{
140
+ background-color:var(--magritte-color-component-input-background-state-field-focused-v23-2-0);
141
+ box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v23-2-0);
142
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v23-2-0);
143
143
  }
144
- .magritte-root___-zVdz_4-0-8.magritte-focused___0Uzyu_4-0-8 .magritte-label___j7Trt_4-0-8{
145
- color:var(--magritte-color-component-input-text-state-placeholder-focused-v23-1-0);
144
+ .magritte-root___-zVdz_4-0-10.magritte-focused___0Uzyu_4-0-10 .magritte-label___j7Trt_4-0-10{
145
+ color:var(--magritte-color-component-input-text-state-placeholder-focused-v23-2-0);
146
146
  }
147
- .magritte-root___-zVdz_4-0-8.magritte-invalid___tVzQV_4-0-8{
148
- background-color:var(--magritte-color-component-input-background-state-field-invalid-v23-1-0);
149
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v23-1-0);
150
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-invalid-v23-1-0);
147
+ .magritte-root___-zVdz_4-0-10.magritte-invalid___tVzQV_4-0-10{
148
+ background-color:var(--magritte-color-component-input-background-state-field-invalid-v23-2-0);
149
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v23-2-0);
150
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-invalid-v23-2-0);
151
151
  }
152
- .magritte-root___-zVdz_4-0-8.magritte-invalid___tVzQV_4-0-8 .magritte-label___j7Trt_4-0-8{
153
- color:var(--magritte-color-component-input-text-state-placeholder-invalid-v23-1-0);
152
+ .magritte-root___-zVdz_4-0-10.magritte-invalid___tVzQV_4-0-10 .magritte-label___j7Trt_4-0-10{
153
+ color:var(--magritte-color-component-input-text-state-placeholder-invalid-v23-2-0);
154
154
  }
155
- .magritte-root___-zVdz_4-0-8.magritte-disabled___UeqcV_4-0-8{
156
- background-color:var(--magritte-color-component-input-background-state-field-disabled-v23-1-0);
157
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v23-1-0);
158
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-disabled-v23-1-0);
159
- --magritte-ui-chip-text-color-override:var(--magritte-color-component-input-chips-text-state-neutral-disable-v23-1-0);
160
- --magritte-ui-chip-background-color-override:var(--magritte-color-component-input-chips-background-state-neutral-disable-v23-1-0);
155
+ .magritte-root___-zVdz_4-0-10.magritte-disabled___UeqcV_4-0-10{
156
+ background-color:var(--magritte-color-component-input-background-state-field-disabled-v23-2-0);
157
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v23-2-0);
158
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-disabled-v23-2-0);
159
+ --magritte-ui-chip-text-color-override:var(--magritte-color-component-input-chips-text-state-neutral-disable-v23-2-0);
160
+ --magritte-ui-chip-background-color-override:var(--magritte-color-component-input-chips-background-state-neutral-disable-v23-2-0);
161
161
  }
162
- .magritte-root___-zVdz_4-0-8.magritte-disabled___UeqcV_4-0-8 .magritte-label___j7Trt_4-0-8{
163
- color:var(--magritte-color-component-input-text-state-placeholder-disabled-v23-1-0);
162
+ .magritte-root___-zVdz_4-0-10.magritte-disabled___UeqcV_4-0-10 .magritte-label___j7Trt_4-0-10{
163
+ color:var(--magritte-color-component-input-text-state-placeholder-disabled-v23-2-0);
164
164
  }
165
- .magritte-root___-zVdz_4-0-8.magritte-focus-visible___ifvAP_4-0-8{
166
- outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v23-1-0) solid 4px;
165
+ .magritte-root___-zVdz_4-0-10.magritte-focus-visible___ifvAP_4-0-10{
166
+ outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v23-2-0) solid 4px;
167
167
  }
168
- .magritte-root___-zVdz_4-0-8.magritte-focus-visible___ifvAP_4-0-8.magritte-invalid___tVzQV_4-0-8{
169
- outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v23-1-0);
168
+ .magritte-root___-zVdz_4-0-10.magritte-focus-visible___ifvAP_4-0-10.magritte-invalid___tVzQV_4-0-10{
169
+ outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v23-2-0);
170
170
  }
171
- .magritte-large___JIrIy_4-0-8{
172
- padding-left:var(--magritte-static-space-300-v23-1-0);
173
- padding-top:var(--magritte-static-space-300-v23-1-0);
174
- padding-bottom:var(--magritte-static-space-300-v23-1-0);
175
- padding-right:var(--magritte-static-space-50-v23-1-0);
171
+ .magritte-large___JIrIy_4-0-10{
172
+ padding-left:var(--magritte-static-space-300-v23-2-0);
173
+ padding-top:var(--magritte-static-space-300-v23-2-0);
174
+ padding-bottom:var(--magritte-static-space-300-v23-2-0);
175
+ padding-right:var(--magritte-static-space-50-v23-2-0);
176
176
  }
177
- .magritte-large___JIrIy_4-0-8 .magritte-field___rlEmn_4-0-8{
178
- margin-left:var(--magritte-static-space-100-v23-1-0);
177
+ .magritte-large___JIrIy_4-0-10 .magritte-field___rlEmn_4-0-10{
178
+ margin-left:var(--magritte-static-space-100-v23-2-0);
179
179
  }
180
- .magritte-large___JIrIy_4-0-8 .magritte-icon___fDMiz_4-0-8{
181
- top:var(--magritte-static-space-300-v23-1-0);
182
- right:var(--magritte-static-space-400-v23-1-0);
180
+ .magritte-large___JIrIy_4-0-10 .magritte-icon___fDMiz_4-0-10{
181
+ top:var(--magritte-static-space-300-v23-2-0);
182
+ right:var(--magritte-static-space-400-v23-2-0);
183
183
  }
184
- .magritte-large___JIrIy_4-0-8 .magritte-scrollable-area___-xMF2_4-0-8{
185
- padding-right:calc(24px + var(--magritte-static-space-250-v23-1-0) + var(--magritte-static-space-300-v23-1-0));
184
+ .magritte-large___JIrIy_4-0-10 .magritte-scrollable-area___-xMF2_4-0-10{
185
+ padding-right:calc(24px + var(--magritte-static-space-250-v23-2-0) + var(--magritte-static-space-300-v23-2-0));
186
186
  }
187
- .magritte-medium___Xk-XB_4-0-8{
188
- padding-left:var(--magritte-static-space-200-v23-1-0);
189
- padding-top:var(--magritte-static-space-200-v23-1-0);
190
- padding-bottom:var(--magritte-static-space-200-v23-1-0);
191
- padding-right:var(--magritte-static-space-50-v23-1-0);
187
+ .magritte-medium___Xk-XB_4-0-10{
188
+ padding-left:var(--magritte-static-space-200-v23-2-0);
189
+ padding-top:var(--magritte-static-space-200-v23-2-0);
190
+ padding-bottom:var(--magritte-static-space-200-v23-2-0);
191
+ padding-right:var(--magritte-static-space-50-v23-2-0);
192
192
  }
193
- .magritte-medium___Xk-XB_4-0-8 .magritte-field___rlEmn_4-0-8{
194
- margin-left:var(--magritte-static-space-200-v23-1-0);
193
+ .magritte-medium___Xk-XB_4-0-10 .magritte-field___rlEmn_4-0-10{
194
+ margin-left:var(--magritte-static-space-200-v23-2-0);
195
195
  }
196
- .magritte-medium___Xk-XB_4-0-8 .magritte-icon___fDMiz_4-0-8{
197
- top:var(--magritte-static-space-200-v23-1-0);
198
- right:var(--magritte-static-space-300-v23-1-0);
196
+ .magritte-medium___Xk-XB_4-0-10 .magritte-icon___fDMiz_4-0-10{
197
+ top:var(--magritte-static-space-200-v23-2-0);
198
+ right:var(--magritte-static-space-300-v23-2-0);
199
199
  }
200
- .magritte-medium___Xk-XB_4-0-8 .magritte-scrollable-area___-xMF2_4-0-8{
201
- padding-right:calc(24px + var(--magritte-static-space-150-v23-1-0) + var(--magritte-static-space-300-v23-1-0));
200
+ .magritte-medium___Xk-XB_4-0-10 .magritte-scrollable-area___-xMF2_4-0-10{
201
+ padding-right:calc(24px + var(--magritte-static-space-150-v23-2-0) + var(--magritte-static-space-300-v23-2-0));
202
202
  }
203
- .magritte-scrollable-area___-xMF2_4-0-8{
203
+ .magritte-scrollable-area___-xMF2_4-0-10{
204
204
  display:flex;
205
205
  align-items:flex-start;
206
206
  overflow-y:auto;
207
207
  width:100%;
208
208
  }
209
- .magritte-chips-and-input___qg-Ba_4-0-8{
209
+ .magritte-chips-and-input___qg-Ba_4-0-10{
210
210
  display:flex;
211
211
  gap:6px;
212
212
  flex-wrap:wrap;
213
213
  align-items:center;
214
214
  width:100%;
215
215
  }
216
- .magritte-field___rlEmn_4-0-8{
216
+ .magritte-field___rlEmn_4-0-10{
217
217
  display:flex;
218
218
  align-items:center;
219
219
  position:relative;
220
220
  flex-grow:1;
221
221
  height:32px;
222
222
  width:50px;
223
- font-family:var(--magritte-typography-label-2-regular-font-family-v23-1-0);
224
- font-weight:var(--magritte-typography-label-2-regular-font-weight-v23-1-0);
225
- line-height:var(--magritte-typography-label-2-regular-line-height-v23-1-0);
226
- font-size:var(--magritte-typography-label-2-regular-font-size-v23-1-0);
227
- letter-spacing:var(--magritte-typography-label-2-regular-letter-spacing-v23-1-0);
228
- text-indent:var(--magritte-typography-label-2-regular-text-indent-v23-1-0);
229
- text-transform:var(--magritte-typography-label-2-regular-text-transform-v23-1-0);
230
- text-decoration:var(--magritte-typography-label-2-regular-text-decoration-v23-1-0);
231
- }
232
- .magritte-field-input___04Cag_4-0-8{
223
+ font-family:var(--magritte-typography-label-2-regular-font-family-v23-2-0);
224
+ font-weight:var(--magritte-typography-label-2-regular-font-weight-v23-2-0);
225
+ line-height:var(--magritte-typography-label-2-regular-line-height-v23-2-0);
226
+ font-size:var(--magritte-typography-label-2-regular-font-size-v23-2-0);
227
+ letter-spacing:var(--magritte-typography-label-2-regular-letter-spacing-v23-2-0);
228
+ text-indent:var(--magritte-typography-label-2-regular-text-indent-v23-2-0);
229
+ text-transform:var(--magritte-typography-label-2-regular-text-transform-v23-2-0);
230
+ text-decoration:var(--magritte-typography-label-2-regular-text-decoration-v23-2-0);
231
+ }
232
+ .magritte-field-input___04Cag_4-0-10{
233
233
  border:0;
234
234
  padding:0;
235
235
  background:none;
236
236
  outline:none;
237
237
  width:100%;
238
+ z-index:1;
238
239
  }
239
- .magritte-label-wrapper___De7Bm_4-0-8{
240
+ .magritte-label-wrapper___De7Bm_4-0-10{
240
241
  display:flex;
241
242
  align-items:center;
242
243
  position:absolute;
243
244
  height:100%;
244
245
  inset:0;
245
246
  }
246
- .magritte-label___j7Trt_4-0-8{
247
- color:var(--magritte-color-component-input-text-placeholder-v23-1-0);
247
+ .magritte-label___j7Trt_4-0-10{
248
+ color:var(--magritte-color-component-input-text-placeholder-v23-2-0);
248
249
  overflow:hidden;
249
250
  text-overflow:ellipsis;
250
251
  }
251
- .magritte-icon___fDMiz_4-0-8{
252
+ .magritte-icon___fDMiz_4-0-10{
252
253
  display:inline-flex;
253
254
  margin-left:auto;
254
- padding:var(--magritte-static-space-100-v23-1-0) 0;
255
+ padding:var(--magritte-static-space-100-v23-2-0) 0;
255
256
  position:absolute;
256
257
  transition-property:transform;
257
- transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v23-1-0);
258
- transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v23-1-0);
258
+ transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v23-2-0);
259
+ transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v23-2-0);
259
260
  }
260
- .magritte-icon_expanded___RaOT-_4-0-8{
261
+ .magritte-icon_expanded___RaOT-_4-0-10{
261
262
  transform:rotate(-180deg);
262
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v23-1-0);
263
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v23-2-0);
263
264
  }
264
- .magritte-custom-chip-wrapper___a9kJ6_4-0-8{
265
+ .magritte-custom-chip-wrapper___a9kJ6_4-0-10{
265
266
  display:inline-flex;
267
+ min-width:0;
266
268
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-chips-trigger",
3
- "version": "4.0.8",
3
+ "version": "4.0.10",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -28,13 +28,13 @@
28
28
  "dependencies": {
29
29
  "@hh.ru/magritte-common-keyboard": "4.1.2",
30
30
  "@hh.ru/magritte-common-use-multiple-refs": "1.1.8",
31
- "@hh.ru/magritte-design-tokens": "23.1.0",
31
+ "@hh.ru/magritte-design-tokens": "23.2.0",
32
32
  "@hh.ru/magritte-ui-breakpoint": "6.0.0",
33
- "@hh.ru/magritte-ui-chips": "6.0.8",
34
- "@hh.ru/magritte-ui-form-helper": "2.0.4",
35
- "@hh.ru/magritte-ui-icon": "12.3.0",
36
- "@hh.ru/magritte-ui-input": "9.0.8",
33
+ "@hh.ru/magritte-ui-chips": "6.0.9",
34
+ "@hh.ru/magritte-ui-form-helper": "2.0.5",
35
+ "@hh.ru/magritte-ui-icon": "12.3.1",
36
+ "@hh.ru/magritte-ui-input": "9.0.9",
37
37
  "@hh.ru/magritte-ui-mock-component": "1.1.4"
38
38
  },
39
- "gitHead": "8394869b0fcf1a65e854af99d8f614a67f0cea7d"
39
+ "gitHead": "fb6e7a383f8c329c0b5bc46df4d4bb11e44d9d24"
40
40
  }