@hh.ru/magritte-ui-chips-trigger 3.4.1 → 4.0.0

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.
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_3-4-1","focused":"magritte-focused___0Uzyu_3-4-1","invalid":"magritte-invalid___tVzQV_3-4-1","disabled":"magritte-disabled___UeqcV_3-4-1","label":"magritte-label___j7Trt_3-4-1","focus-visible":"magritte-focus-visible___ifvAP_3-4-1","focusVisible":"magritte-focus-visible___ifvAP_3-4-1","large":"magritte-large___JIrIy_3-4-1","field":"magritte-field___rlEmn_3-4-1","icon":"magritte-icon___fDMiz_3-4-1","scrollable-area":"magritte-scrollable-area___-xMF2_3-4-1","scrollableArea":"magritte-scrollable-area___-xMF2_3-4-1","medium":"magritte-medium___Xk-XB_3-4-1","chips-and-input":"magritte-chips-and-input___qg-Ba_3-4-1","chipsAndInput":"magritte-chips-and-input___qg-Ba_3-4-1","field-input":"magritte-field-input___04Cag_3-4-1","fieldInput":"magritte-field-input___04Cag_3-4-1","label-wrapper":"magritte-label-wrapper___De7Bm_3-4-1","labelWrapper":"magritte-label-wrapper___De7Bm_3-4-1","icon_expanded":"magritte-icon_expanded___RaOT-_3-4-1","iconExpanded":"magritte-icon_expanded___RaOT-_3-4-1","custom-chip-wrapper":"magritte-custom-chip-wrapper___a9kJ6_3-4-1","customChipWrapper":"magritte-custom-chip-wrapper___a9kJ6_3-4-1"};
13
+ var styles = {"root":"magritte-root___-zVdz_4-0-0","focused":"magritte-focused___0Uzyu_4-0-0","invalid":"magritte-invalid___tVzQV_4-0-0","disabled":"magritte-disabled___UeqcV_4-0-0","label":"magritte-label___j7Trt_4-0-0","focus-visible":"magritte-focus-visible___ifvAP_4-0-0","focusVisible":"magritte-focus-visible___ifvAP_4-0-0","large":"magritte-large___JIrIy_4-0-0","field":"magritte-field___rlEmn_4-0-0","icon":"magritte-icon___fDMiz_4-0-0","scrollable-area":"magritte-scrollable-area___-xMF2_4-0-0","scrollableArea":"magritte-scrollable-area___-xMF2_4-0-0","medium":"magritte-medium___Xk-XB_4-0-0","chips-and-input":"magritte-chips-and-input___qg-Ba_4-0-0","chipsAndInput":"magritte-chips-and-input___qg-Ba_4-0-0","field-input":"magritte-field-input___04Cag_4-0-0","fieldInput":"magritte-field-input___04Cag_4-0-0","label-wrapper":"magritte-label-wrapper___De7Bm_4-0-0","labelWrapper":"magritte-label-wrapper___De7Bm_4-0-0","icon_expanded":"magritte-icon_expanded___RaOT-_4-0-0","iconExpanded":"magritte-icon_expanded___RaOT-_4-0-0","custom-chip-wrapper":"magritte-custom-chip-wrapper___a9kJ6_4-0-0","customChipWrapper":"magritte-custom-chip-wrapper___a9kJ6_4-0-0"};
14
14
 
15
15
  const focusOnLastChip = (event, chipsContainer, input) => {
16
16
  if (!chipsContainer || !input) {
package/index.css CHANGED
@@ -1,76 +1,102 @@
1
1
  :root{
2
- --magritte-color-component-input-stroke-state-field-hovered-v22-0-0:#CCD5DF;
3
- --magritte-color-component-input-stroke-state-field-focused-v22-0-0:#0070ff;
4
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v22-0-0:#0070ff7a;
5
- --magritte-color-component-input-stroke-state-field-invalid-v22-0-0:#ff4d3a;
6
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v22-0-0:#ff4d3a7a;
7
- --magritte-color-component-input-stroke-state-field-disabled-v22-0-0:#EEF1F7;
8
- --magritte-color-component-input-background-field-v22-0-0:#ffffff;
9
- --magritte-color-component-input-background-state-field-hovered-v22-0-0:#ffffff;
10
- --magritte-color-component-input-background-state-field-focused-v22-0-0:#ffffff;
11
- --magritte-color-component-input-background-state-field-invalid-v22-0-0:#ffffff;
12
- --magritte-color-component-input-background-state-field-disabled-v22-0-0:#F4F6FB;
13
- --magritte-color-component-input-stroke-field-v22-0-0:#DCE3EB;
14
- --magritte-color-component-input-text-state-placeholder-disabled-v22-0-0:#AABBCA;
15
- --magritte-color-component-input-text-state-placeholder-hovered-v22-0-0:#768694;
16
- --magritte-color-component-input-text-state-placeholder-focused-v22-0-0:#AABBCA;
17
- --magritte-color-component-input-text-state-placeholder-invalid-v22-0-0:#AABBCA;
18
- --magritte-color-component-input-icon-chevron-v22-0-0:#AABBCA;
19
- --magritte-color-component-input-icon-state-chevron-focused-v22-0-0:#000000;
20
- --magritte-color-component-input-icon-state-chevron-hovered-v22-0-0:#6a7885;
21
- --magritte-color-component-input-icon-state-chevron-disabled-v22-0-0:#AABBCA;
22
- --magritte-color-component-input-icon-state-chevron-invalid-v22-0-0:#AABBCA;
23
- --magritte-color-component-input-text-placeholder-v22-0-0:#AABBCA;
24
- --magritte-color-component-input-chips-background-state-neutral-disable-v22-0-0:#DCE3EB;
25
- --magritte-color-component-input-chips-text-state-neutral-disable-v22-0-0:#96aabb;
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
26
  }
27
27
  :root{
28
- --magritte-typography-label-2-regular-font-family-v22-0-0:"hh sans";
29
- --magritte-typography-label-2-regular-font-weight-v22-0-0:400;
30
- --magritte-typography-label-2-regular-line-height-v22-0-0:22px;
31
- --magritte-typography-label-2-regular-font-size-v22-0-0:16px;
32
- --magritte-typography-label-2-regular-letter-spacing-v22-0-0:0em;
33
- --magritte-typography-label-2-regular-text-indent-v22-0-0:0px;
34
- --magritte-typography-label-2-regular-text-transform-v22-0-0:none;
35
- --magritte-typography-label-2-regular-text-decoration-v22-0-0:none;
36
- --magritte-semantic-animation-ease-in-out-100-timing-function-v22-0-0:cubic-bezier(0.25, 0.1, 0.25, 1);
37
- --magritte-semantic-animation-ease-in-out-100-duration-v22-0-0:100ms;
38
- --magritte-static-space-50-v22-0-0:2px;
39
- --magritte-static-space-100-v22-0-0:4px;
40
- --magritte-static-space-150-v22-0-0:6px;
41
- --magritte-static-space-200-v22-0-0:8px;
42
- --magritte-static-space-250-v22-0-0:10px;
43
- --magritte-static-space-300-v22-0-0:12px;
44
- --magritte-static-space-400-v22-0-0:16px;
45
- --magritte-core-border-radius-3-x-v22-0-0:12px;
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
46
  }
47
47
  .magritte-night-theme{
48
- --magritte-color-component-input-stroke-state-field-hovered-v22-0-0:#3B3B3B;
49
- --magritte-color-component-input-stroke-state-field-focused-v22-0-0:#0070ff;
50
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v22-0-0:#0070ff7a;
51
- --magritte-color-component-input-stroke-state-field-invalid-v22-0-0:#ff4d3a;
52
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v22-0-0:#ff4d3a7a;
53
- --magritte-color-component-input-stroke-state-field-disabled-v22-0-0:#111;
54
- --magritte-color-component-input-background-field-v22-0-0:#111;
55
- --magritte-color-component-input-background-state-field-hovered-v22-0-0:#111;
56
- --magritte-color-component-input-background-state-field-focused-v22-0-0:#111;
57
- --magritte-color-component-input-background-state-field-invalid-v22-0-0:#111;
58
- --magritte-color-component-input-background-state-field-disabled-v22-0-0:#111;
59
- --magritte-color-component-input-stroke-field-v22-0-0:#303030;
60
- --magritte-color-component-input-text-placeholder-v22-0-0:#535353;
61
- --magritte-color-component-input-text-state-placeholder-disabled-v22-0-0:#474747;
62
- --magritte-color-component-input-text-state-placeholder-hovered-v22-0-0:#5E5E5E;
63
- --magritte-color-component-input-text-state-placeholder-focused-v22-0-0:#535353;
64
- --magritte-color-component-input-text-state-placeholder-invalid-v22-0-0:#535353;
65
- --magritte-color-component-input-icon-state-chevron-disabled-v22-0-0:#474747;
66
- --magritte-color-component-input-icon-state-chevron-hovered-v22-0-0:#848484;
67
- --magritte-color-component-input-icon-state-chevron-focused-v22-0-0:#ffffff;
68
- --magritte-color-component-input-icon-state-chevron-invalid-v22-0-0:#474747;
69
- --magritte-color-component-input-icon-chevron-v22-0-0:#5E5E5E;
70
- --magritte-color-component-input-chips-background-state-neutral-disable-v22-0-0:#1B1B1B;
71
- --magritte-color-component-input-chips-text-state-neutral-disable-v22-0-0:#474747;
72
- }
73
- .magritte-root___-zVdz_3-4-1{
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
+ }
73
+ .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-0{
74
100
  display:inline-flex;
75
101
  position:relative;
76
102
  width:100%;
@@ -79,159 +105,159 @@
79
105
  white-space:nowrap;
80
106
  appearance:none;
81
107
  overflow-y:auto;
82
- background-color:var(--magritte-color-component-input-background-field-v22-0-0);
83
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v22-0-0);
84
- border-radius:var(--magritte-core-border-radius-3-x-v22-0-0);
85
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-chevron-v22-0-0);
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);
86
112
  }
87
113
  @media (min-width: 1020px){
88
- body.magritte-old-layout .magritte-root___-zVdz_3-4-1:not(.magritte-focused___0Uzyu_3-4-1):not(.magritte-invalid___tVzQV_3-4-1):not(.magritte-disabled___UeqcV_3-4-1):hover{
89
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v22-0-0);
90
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v22-0-0);
91
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v22-0-0);
114
+ body.magritte-old-layout .magritte-root___-zVdz_4-0-0:not(.magritte-focused___0Uzyu_4-0-0):not(.magritte-invalid___tVzQV_4-0-0):not(.magritte-disabled___UeqcV_4-0-0):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);
92
118
  }
93
- body.magritte-old-layout .magritte-root___-zVdz_3-4-1:not(.magritte-focused___0Uzyu_3-4-1):not(.magritte-invalid___tVzQV_3-4-1):not(.magritte-disabled___UeqcV_3-4-1):hover .magritte-label___j7Trt_3-4-1{
94
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v22-0-0);
119
+ body.magritte-old-layout .magritte-root___-zVdz_4-0-0:not(.magritte-focused___0Uzyu_4-0-0):not(.magritte-invalid___tVzQV_4-0-0):not(.magritte-disabled___UeqcV_4-0-0):hover .magritte-label___j7Trt_4-0-0{
120
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v22-1-0);
95
121
  }
96
122
  }
97
123
  @media (min-width: 1024px){
98
- body:not(.magritte-old-layout) .magritte-root___-zVdz_3-4-1:not(.magritte-focused___0Uzyu_3-4-1):not(.magritte-invalid___tVzQV_3-4-1):not(.magritte-disabled___UeqcV_3-4-1):hover{
99
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v22-0-0);
100
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v22-0-0);
101
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v22-0-0);
124
+ body:not(.magritte-old-layout) .magritte-root___-zVdz_4-0-0:not(.magritte-focused___0Uzyu_4-0-0):not(.magritte-invalid___tVzQV_4-0-0):not(.magritte-disabled___UeqcV_4-0-0):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);
102
128
  }
103
- body:not(.magritte-old-layout) .magritte-root___-zVdz_3-4-1:not(.magritte-focused___0Uzyu_3-4-1):not(.magritte-invalid___tVzQV_3-4-1):not(.magritte-disabled___UeqcV_3-4-1):hover .magritte-label___j7Trt_3-4-1{
104
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v22-0-0);
129
+ body:not(.magritte-old-layout) .magritte-root___-zVdz_4-0-0:not(.magritte-focused___0Uzyu_4-0-0):not(.magritte-invalid___tVzQV_4-0-0):not(.magritte-disabled___UeqcV_4-0-0):hover .magritte-label___j7Trt_4-0-0{
130
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v22-1-0);
105
131
  }
106
132
  }
107
- .magritte-root___-zVdz_3-4-1:not(.magritte-disabled___UeqcV_3-4-1){
133
+ .magritte-root___-zVdz_4-0-0:not(.magritte-disabled___UeqcV_4-0-0){
108
134
  cursor:text;
109
135
  }
110
- .magritte-root___-zVdz_3-4-1.magritte-focused___0Uzyu_3-4-1{
111
- background-color:var(--magritte-color-component-input-background-state-field-focused-v22-0-0);
112
- box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v22-0-0);
113
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v22-0-0);
136
+ .magritte-root___-zVdz_4-0-0.magritte-focused___0Uzyu_4-0-0{
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);
114
140
  }
115
- .magritte-root___-zVdz_3-4-1.magritte-focused___0Uzyu_3-4-1 .magritte-label___j7Trt_3-4-1{
116
- color:var(--magritte-color-component-input-text-state-placeholder-focused-v22-0-0);
141
+ .magritte-root___-zVdz_4-0-0.magritte-focused___0Uzyu_4-0-0 .magritte-label___j7Trt_4-0-0{
142
+ color:var(--magritte-color-component-input-text-state-placeholder-focused-v22-1-0);
117
143
  }
118
- .magritte-root___-zVdz_3-4-1.magritte-invalid___tVzQV_3-4-1{
119
- background-color:var(--magritte-color-component-input-background-state-field-invalid-v22-0-0);
120
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v22-0-0);
121
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-invalid-v22-0-0);
144
+ .magritte-root___-zVdz_4-0-0.magritte-invalid___tVzQV_4-0-0{
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);
122
148
  }
123
- .magritte-root___-zVdz_3-4-1.magritte-invalid___tVzQV_3-4-1 .magritte-label___j7Trt_3-4-1{
124
- color:var(--magritte-color-component-input-text-state-placeholder-invalid-v22-0-0);
149
+ .magritte-root___-zVdz_4-0-0.magritte-invalid___tVzQV_4-0-0 .magritte-label___j7Trt_4-0-0{
150
+ color:var(--magritte-color-component-input-text-state-placeholder-invalid-v22-1-0);
125
151
  }
126
- .magritte-root___-zVdz_3-4-1.magritte-disabled___UeqcV_3-4-1{
127
- background-color:var(--magritte-color-component-input-background-state-field-disabled-v22-0-0);
128
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v22-0-0);
129
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-disabled-v22-0-0);
130
- --magritte-ui-chip-text-color-override:var(--magritte-color-component-input-chips-text-state-neutral-disable-v22-0-0);
131
- --magritte-ui-chip-background-color-override:var(--magritte-color-component-input-chips-background-state-neutral-disable-v22-0-0);
152
+ .magritte-root___-zVdz_4-0-0.magritte-disabled___UeqcV_4-0-0{
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);
132
158
  }
133
- .magritte-root___-zVdz_3-4-1.magritte-disabled___UeqcV_3-4-1 .magritte-label___j7Trt_3-4-1{
134
- color:var(--magritte-color-component-input-text-state-placeholder-disabled-v22-0-0);
159
+ .magritte-root___-zVdz_4-0-0.magritte-disabled___UeqcV_4-0-0 .magritte-label___j7Trt_4-0-0{
160
+ color:var(--magritte-color-component-input-text-state-placeholder-disabled-v22-1-0);
135
161
  }
136
- .magritte-root___-zVdz_3-4-1.magritte-focus-visible___ifvAP_3-4-1{
137
- outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v22-0-0) solid 4px;
162
+ .magritte-root___-zVdz_4-0-0.magritte-focus-visible___ifvAP_4-0-0{
163
+ outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v22-1-0) solid 4px;
138
164
  }
139
- .magritte-root___-zVdz_3-4-1.magritte-focus-visible___ifvAP_3-4-1.magritte-invalid___tVzQV_3-4-1{
140
- outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v22-0-0);
165
+ .magritte-root___-zVdz_4-0-0.magritte-focus-visible___ifvAP_4-0-0.magritte-invalid___tVzQV_4-0-0{
166
+ outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v22-1-0);
141
167
  }
142
- .magritte-large___JIrIy_3-4-1{
143
- padding-left:var(--magritte-static-space-300-v22-0-0);
144
- padding-top:var(--magritte-static-space-300-v22-0-0);
145
- padding-bottom:var(--magritte-static-space-300-v22-0-0);
146
- padding-right:var(--magritte-static-space-50-v22-0-0);
168
+ .magritte-large___JIrIy_4-0-0{
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);
147
173
  }
148
- .magritte-large___JIrIy_3-4-1 .magritte-field___rlEmn_3-4-1{
149
- margin-left:var(--magritte-static-space-100-v22-0-0);
174
+ .magritte-large___JIrIy_4-0-0 .magritte-field___rlEmn_4-0-0{
175
+ margin-left:var(--magritte-static-space-100-v22-1-0);
150
176
  }
151
- .magritte-large___JIrIy_3-4-1 .magritte-icon___fDMiz_3-4-1{
152
- top:var(--magritte-static-space-300-v22-0-0);
153
- right:var(--magritte-static-space-400-v22-0-0);
177
+ .magritte-large___JIrIy_4-0-0 .magritte-icon___fDMiz_4-0-0{
178
+ top:var(--magritte-static-space-300-v22-1-0);
179
+ right:var(--magritte-static-space-400-v22-1-0);
154
180
  }
155
- .magritte-large___JIrIy_3-4-1 .magritte-scrollable-area___-xMF2_3-4-1{
156
- padding-right:calc(24px + var(--magritte-static-space-250-v22-0-0) + var(--magritte-static-space-300-v22-0-0));
181
+ .magritte-large___JIrIy_4-0-0 .magritte-scrollable-area___-xMF2_4-0-0{
182
+ padding-right:calc(24px + var(--magritte-static-space-250-v22-1-0) + var(--magritte-static-space-300-v22-1-0));
157
183
  }
158
- .magritte-medium___Xk-XB_3-4-1{
159
- padding-left:var(--magritte-static-space-200-v22-0-0);
160
- padding-top:var(--magritte-static-space-200-v22-0-0);
161
- padding-bottom:var(--magritte-static-space-200-v22-0-0);
162
- padding-right:var(--magritte-static-space-50-v22-0-0);
184
+ .magritte-medium___Xk-XB_4-0-0{
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);
163
189
  }
164
- .magritte-medium___Xk-XB_3-4-1 .magritte-field___rlEmn_3-4-1{
165
- margin-left:var(--magritte-static-space-200-v22-0-0);
190
+ .magritte-medium___Xk-XB_4-0-0 .magritte-field___rlEmn_4-0-0{
191
+ margin-left:var(--magritte-static-space-200-v22-1-0);
166
192
  }
167
- .magritte-medium___Xk-XB_3-4-1 .magritte-icon___fDMiz_3-4-1{
168
- top:var(--magritte-static-space-200-v22-0-0);
169
- right:var(--magritte-static-space-300-v22-0-0);
193
+ .magritte-medium___Xk-XB_4-0-0 .magritte-icon___fDMiz_4-0-0{
194
+ top:var(--magritte-static-space-200-v22-1-0);
195
+ right:var(--magritte-static-space-300-v22-1-0);
170
196
  }
171
- .magritte-medium___Xk-XB_3-4-1 .magritte-scrollable-area___-xMF2_3-4-1{
172
- padding-right:calc(24px + var(--magritte-static-space-150-v22-0-0) + var(--magritte-static-space-300-v22-0-0));
197
+ .magritte-medium___Xk-XB_4-0-0 .magritte-scrollable-area___-xMF2_4-0-0{
198
+ padding-right:calc(24px + var(--magritte-static-space-150-v22-1-0) + var(--magritte-static-space-300-v22-1-0));
173
199
  }
174
- .magritte-scrollable-area___-xMF2_3-4-1{
200
+ .magritte-scrollable-area___-xMF2_4-0-0{
175
201
  display:flex;
176
202
  align-items:flex-start;
177
203
  overflow-y:auto;
178
204
  width:100%;
179
205
  }
180
- .magritte-chips-and-input___qg-Ba_3-4-1{
206
+ .magritte-chips-and-input___qg-Ba_4-0-0{
181
207
  display:flex;
182
208
  gap:6px;
183
209
  flex-wrap:wrap;
184
210
  align-items:center;
185
211
  width:100%;
186
212
  }
187
- .magritte-field___rlEmn_3-4-1{
213
+ .magritte-field___rlEmn_4-0-0{
188
214
  display:flex;
189
215
  align-items:center;
190
216
  position:relative;
191
217
  flex-grow:1;
192
218
  height:32px;
193
219
  width:50px;
194
- font-family:var(--magritte-typography-label-2-regular-font-family-v22-0-0);
195
- font-weight:var(--magritte-typography-label-2-regular-font-weight-v22-0-0);
196
- line-height:var(--magritte-typography-label-2-regular-line-height-v22-0-0);
197
- font-size:var(--magritte-typography-label-2-regular-font-size-v22-0-0);
198
- letter-spacing:var(--magritte-typography-label-2-regular-letter-spacing-v22-0-0);
199
- text-indent:var(--magritte-typography-label-2-regular-text-indent-v22-0-0);
200
- text-transform:var(--magritte-typography-label-2-regular-text-transform-v22-0-0);
201
- text-decoration:var(--magritte-typography-label-2-regular-text-decoration-v22-0-0);
202
- }
203
- .magritte-field-input___04Cag_3-4-1{
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-0{
204
230
  border:0;
205
231
  padding:0;
206
232
  background:none;
207
233
  outline:none;
208
234
  width:100%;
209
235
  }
210
- .magritte-label-wrapper___De7Bm_3-4-1{
236
+ .magritte-label-wrapper___De7Bm_4-0-0{
211
237
  display:flex;
212
238
  align-items:center;
213
239
  position:absolute;
214
240
  height:100%;
215
241
  inset:0;
216
242
  }
217
- .magritte-label___j7Trt_3-4-1{
218
- color:var(--magritte-color-component-input-text-placeholder-v22-0-0);
243
+ .magritte-label___j7Trt_4-0-0{
244
+ color:var(--magritte-color-component-input-text-placeholder-v22-1-0);
219
245
  overflow:hidden;
220
246
  text-overflow:ellipsis;
221
247
  }
222
- .magritte-icon___fDMiz_3-4-1{
248
+ .magritte-icon___fDMiz_4-0-0{
223
249
  display:inline-flex;
224
250
  margin-left:auto;
225
- padding:var(--magritte-static-space-100-v22-0-0) 0;
251
+ padding:var(--magritte-static-space-100-v22-1-0) 0;
226
252
  position:absolute;
227
253
  transition-property:transform;
228
- transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v22-0-0);
229
- transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v22-0-0);
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);
230
256
  }
231
- .magritte-icon_expanded___RaOT-_3-4-1{
257
+ .magritte-icon_expanded___RaOT-_4-0-0{
232
258
  transform:rotate(-180deg);
233
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v22-0-0);
259
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v22-1-0);
234
260
  }
235
- .magritte-custom-chip-wrapper___a9kJ6_3-4-1{
261
+ .magritte-custom-chip-wrapper___a9kJ6_4-0-0{
236
262
  display:inline-flex;
237
263
  }
package/index.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- export * from '@hh.ru/magritte-ui-theme-provider';
2
1
  export * from '@hh.ru/magritte-ui-chips-trigger/ChipsTrigger';
3
2
  export * from '@hh.ru/magritte-ui-chips-trigger/UncontrolledChipsTrigger';
4
3
  export * from '@hh.ru/magritte-ui-chips-trigger/types';
package/index.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import './index.css';
2
- export * from '@hh.ru/magritte-ui-theme-provider';
3
2
  export { ChipsTrigger } from './ChipsTrigger.js';
4
3
  export { UncontrolledChipsTrigger } from './UncontrolledChipsTrigger.js';
5
4
  import 'react/jsx-runtime';
package/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
package/index.mock.d.ts CHANGED
@@ -1,6 +1,4 @@
1
1
  import { ForwardRefExoticComponent } from 'react';
2
2
  export type * from '@hh.ru/magritte-ui-chips-trigger/types';
3
- declare const ThemeProvider: any;
4
- export { ThemeProvider };
5
3
  export declare const ChipsTrigger: ForwardRefExoticComponent<Record<string, unknown>>;
6
4
  export declare const UncontrolledChipsTrigger: ForwardRefExoticComponent<Record<string, unknown>>;
package/index.mock.js CHANGED
@@ -1,8 +1,6 @@
1
1
  import './index.css';
2
2
  import { mockComponent } from '@hh.ru/magritte-ui-mock-component';
3
3
 
4
- // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
5
- const { ThemeProvider } = jest.requireActual('@hh.ru/magritte-ui-theme-provider/index');
6
4
  const ChipsTrigger = mockComponent('ChipsTrigger', undefined, {
7
5
  withChildren: false,
8
6
  });
@@ -10,5 +8,5 @@ const UncontrolledChipsTrigger = mockComponent('UncontrolledChipsTrigger', undef
10
8
  withChildren: false,
11
9
  });
12
10
 
13
- export { ChipsTrigger, ThemeProvider, UncontrolledChipsTrigger };
11
+ export { ChipsTrigger, UncontrolledChipsTrigger };
14
12
  //# sourceMappingURL=index.mock.js.map
package/index.mock.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mock.js","sources":["../src/index.mock.ts"],"sourcesContent":["import { ForwardRefExoticComponent } from 'react';\n\nimport { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport type * from '@hh.ru/magritte-ui-chips-trigger/types';\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nconst { ThemeProvider } = jest.requireActual('@hh.ru/magritte-ui-theme-provider/index');\n\nexport { ThemeProvider };\n\nexport const ChipsTrigger: ForwardRefExoticComponent<Record<string, unknown>> = mockComponent(\n 'ChipsTrigger',\n undefined,\n {\n withChildren: false,\n }\n);\n\nexport const UncontrolledChipsTrigger: ForwardRefExoticComponent<Record<string, unknown>> = mockComponent(\n 'UncontrolledChipsTrigger',\n undefined,\n {\n withChildren: false,\n }\n);\n"],"names":[],"mappings":";;AAMA;AACM,MAAA,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,yCAAyC,EAAE;MAI3E,YAAY,GAAuD,aAAa,CACzF,cAAc,EACd,SAAS,EACT;AACI,IAAA,YAAY,EAAE,KAAK;AACtB,CAAA,EACH;MAEW,wBAAwB,GAAuD,aAAa,CACrG,0BAA0B,EAC1B,SAAS,EACT;AACI,IAAA,YAAY,EAAE,KAAK;AACtB,CAAA;;;;"}
1
+ {"version":3,"file":"index.mock.js","sources":["../src/index.mock.ts"],"sourcesContent":["import { ForwardRefExoticComponent } from 'react';\n\nimport { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport type * from '@hh.ru/magritte-ui-chips-trigger/types';\n\nexport const ChipsTrigger: ForwardRefExoticComponent<Record<string, unknown>> = mockComponent(\n 'ChipsTrigger',\n undefined,\n {\n withChildren: false,\n }\n);\n\nexport const UncontrolledChipsTrigger: ForwardRefExoticComponent<Record<string, unknown>> = mockComponent(\n 'UncontrolledChipsTrigger',\n undefined,\n {\n withChildren: false,\n }\n);\n"],"names":[],"mappings":";;MAMa,YAAY,GAAuD,aAAa,CACzF,cAAc,EACd,SAAS,EACT;AACI,IAAA,YAAY,EAAE,KAAK;AACtB,CAAA,EACH;MAEW,wBAAwB,GAAuD,aAAa,CACrG,0BAA0B,EAC1B,SAAS,EACT;AACI,IAAA,YAAY,EAAE,KAAK;AACtB,CAAA;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-chips-trigger",
3
- "version": "3.4.1",
3
+ "version": "4.0.0",
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.7",
31
+ "@hh.ru/magritte-design-tokens": "22.1.0",
31
32
  "@hh.ru/magritte-ui-breakpoint": "5.0.3",
32
- "@hh.ru/magritte-ui-chips": "5.4.24",
33
- "@hh.ru/magritte-ui-form-helper": "1.0.42",
34
- "@hh.ru/magritte-ui-icon": "11.0.14",
35
- "@hh.ru/magritte-ui-input": "8.0.0",
36
- "@hh.ru/magritte-ui-mock-component": "1.1.4",
37
- "@hh.ru/magritte-ui-theme-provider": "1.1.51"
33
+ "@hh.ru/magritte-ui-chips": "6.0.0",
34
+ "@hh.ru/magritte-ui-form-helper": "2.0.0",
35
+ "@hh.ru/magritte-ui-icon": "12.0.0",
36
+ "@hh.ru/magritte-ui-input": "9.0.0",
37
+ "@hh.ru/magritte-ui-mock-component": "1.1.4"
38
38
  },
39
- "gitHead": "52463f1d519348dca8eb38014a272f152a30b42e"
39
+ "gitHead": "a823b2d582e812bf99b5fdf32058a93eaa59076b"
40
40
  }