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