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