@hh.ru/magritte-ui-chat-input 1.2.2 → 1.2.3

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 (66) hide show
  1. package/index.css +117 -117
  2. package/index.d.ts +10 -10
  3. package/index.js +1 -1
  4. package/index.mock.d.ts +9 -9
  5. package/index.mock.js +37 -36
  6. package/index.mock.js.map +1 -1
  7. package/internal/ChatInputContext.d.ts +1 -1
  8. package/internal/ChatInputContext.js.map +1 -1
  9. package/internal/ChatInputSlotButton.js +13 -13
  10. package/internal/ChatInputSlotButton.js.map +1 -1
  11. package/internal/FocusTarget.js +3 -10
  12. package/internal/FocusTarget.js.map +1 -1
  13. package/internal/ModeTransition.js +41 -11
  14. package/internal/ModeTransition.js.map +1 -1
  15. package/internal/TextInput.d.ts +1 -1
  16. package/internal/TextInput.js +146 -126
  17. package/internal/TextInput.js.map +1 -1
  18. package/internal/VoiceRecord.d.ts +1 -1
  19. package/internal/VoiceRecord.js +66 -24
  20. package/internal/VoiceRecord.js.map +1 -1
  21. package/internal/VoiceRecordIndicator.js +22 -9
  22. package/internal/VoiceRecordIndicator.js.map +1 -1
  23. package/internal/flattenFragments.js +9 -13
  24. package/internal/flattenFragments.js.map +1 -1
  25. package/internal/focusGroup.js +18 -28
  26. package/internal/focusGroup.js.map +1 -1
  27. package/internal/useHasSound.js +49 -64
  28. package/internal/useHasSound.js.map +1 -1
  29. package/internal/useObjectUrl.js +15 -21
  30. package/internal/useObjectUrl.js.map +1 -1
  31. package/internal/useRovingFocusGroup.js +102 -137
  32. package/internal/useRovingFocusGroup.js.map +1 -1
  33. package/internal/useSendOnEnter.js +44 -46
  34. package/internal/useSendOnEnter.js.map +1 -1
  35. package/internal/useVoiceRecordSession.d.ts +1 -1
  36. package/internal/useVoiceRecordSession.js +185 -219
  37. package/internal/useVoiceRecordSession.js.map +1 -1
  38. package/internal/voiceSlotRegistry.d.ts +1 -1
  39. package/internal/voiceSlotRegistry.js +3 -3
  40. package/internal/voiceSlotRegistry.js.map +1 -1
  41. package/package.json +11 -11
  42. package/public/ChatInput.d.ts +6 -6
  43. package/public/ChatInput.js +129 -73
  44. package/public/ChatInput.js.map +1 -1
  45. package/public/ChatInputChips.js +4 -4
  46. package/public/ChatInputChips.js.map +1 -1
  47. package/public/ChatInputFile.d.ts +1 -1
  48. package/public/ChatInputFile.js +107 -47
  49. package/public/ChatInputFile.js.map +1 -1
  50. package/public/ChatInputFiles.js +10 -3
  51. package/public/ChatInputFiles.js.map +1 -1
  52. package/public/ChatInputPreview.js +14 -9
  53. package/public/ChatInputPreview.js.map +1 -1
  54. package/public/ChatInputSendButton.d.ts +1 -1
  55. package/public/ChatInputSendButton.js +34 -23
  56. package/public/ChatInputSendButton.js.map +1 -1
  57. package/public/ChatInputVoiceButton.d.ts +1 -1
  58. package/public/ChatInputVoiceButton.js +87 -91
  59. package/public/ChatInputVoiceButton.js.map +1 -1
  60. package/public/getChatInputFileType.d.ts +1 -1
  61. package/public/getChatInputFileType.js +7 -10
  62. package/public/getChatInputFileType.js.map +1 -1
  63. package/styles-hEUo5BXU.js +5 -0
  64. package/styles-hEUo5BXU.js.map +1 -0
  65. package/styles-CHMi0EYL.js +0 -5
  66. package/styles-CHMi0EYL.js.map +0 -1
package/index.css CHANGED
@@ -1,42 +1,42 @@
1
1
  :root{
2
- --magritte-color-background-primary-v26-0-0:#ffffff;
3
- --magritte-color-background-secondary-v26-0-0:#F1F4F9;
4
- --magritte-color-stroke-neutral-v26-0-0:#DCE3EB;
5
- --magritte-color-stroke-phantom-v26-0-0:#DCE3EB;
6
- --magritte-color-stroke-state-focused-accessible-v26-0-0:#0070ff7a;
7
- --magritte-color-stroke-state-neutral-hovered-v26-0-0:#DCE3EB;
8
- --magritte-color-text-primary-v26-0-0:#000000;
9
- --magritte-color-text-secondary-v26-0-0:#768694;
10
- --magritte-color-text-tertiary-v26-0-0:#AABBCA;
11
- --magritte-color-icon-tertiary-v26-0-0:#AABBCA;
12
- --magritte-gradient-component-chat-input-background-fade-v26-0-0:#ffffff00 0%, #ffffff 100%;
13
- --magritte-shadow-level-1-color-v26-0-0:#7090b029;
14
- --magritte-shadow-level-1-x-v26-0-0:0px;
15
- --magritte-shadow-level-1-y-v26-0-0:4px;
16
- --magritte-shadow-level-1-blur-v26-0-0:12px;
17
- --magritte-shadow-level-1-spread-v26-0-0:0px;
2
+ --magritte-color-background-primary-v26-0-1:#ffffff;
3
+ --magritte-color-background-secondary-v26-0-1:#F1F4F9;
4
+ --magritte-color-stroke-neutral-v26-0-1:#DCE3EB;
5
+ --magritte-color-stroke-phantom-v26-0-1:#DCE3EB;
6
+ --magritte-color-stroke-state-focused-accessible-v26-0-1:#0070ff7a;
7
+ --magritte-color-stroke-state-neutral-hovered-v26-0-1:#DCE3EB;
8
+ --magritte-color-text-primary-v26-0-1:#000000;
9
+ --magritte-color-text-secondary-v26-0-1:#768694;
10
+ --magritte-color-text-tertiary-v26-0-1:#AABBCA;
11
+ --magritte-color-icon-tertiary-v26-0-1:#AABBCA;
12
+ --magritte-gradient-component-chat-input-background-fade-v26-0-1:#ffffff00 0%, #ffffff 100%;
13
+ --magritte-shadow-level-1-color-v26-0-1:#7090b029;
14
+ --magritte-shadow-level-1-x-v26-0-1:0px;
15
+ --magritte-shadow-level-1-y-v26-0-1:4px;
16
+ --magritte-shadow-level-1-blur-v26-0-1:12px;
17
+ --magritte-shadow-level-1-spread-v26-0-1:0px;
18
18
  }
19
19
 
20
20
  :root{
21
- --magritte-semantic-animation-time-s-duration-v26-0-0:200ms;
22
- --magritte-semantic-animation-ease-base-timing-function-v26-0-0:cubic-bezier(0.4, 0.24, 0, 1);
21
+ --magritte-semantic-animation-time-s-duration-v26-0-1:200ms;
22
+ --magritte-semantic-animation-ease-base-timing-function-v26-0-1:cubic-bezier(0.4, 0.24, 0, 1);
23
23
  }
24
24
 
25
25
  .magritte-night-theme{
26
- --magritte-color-background-primary-v26-0-0:#1B1B1B;
27
- --magritte-color-background-secondary-v26-0-0:#303030;
28
- --magritte-color-stroke-neutral-v26-0-0:#303030;
29
- --magritte-color-stroke-phantom-v26-0-0:#30303000;
30
- --magritte-color-stroke-state-neutral-hovered-v26-0-0:#303030;
31
- --magritte-color-text-primary-v26-0-0:#ffffff;
32
- --magritte-color-text-secondary-v26-0-0:#ABABAB;
33
- --magritte-color-text-tertiary-v26-0-0:#767676;
34
- --magritte-color-icon-tertiary-v26-0-0:#767676;
35
- --magritte-gradient-component-chat-input-background-fade-v26-0-0:#1b1b1b00 0%, #1b1b1b 100%;
36
- --magritte-shadow-level-1-color-v26-0-0:#00000029;
37
- }
38
- .magritte-chat-input___P69oN_1-2-2{
39
- --chat-input-stroke-color:var(--magritte-color-stroke-neutral-v26-0-0);
26
+ --magritte-color-background-primary-v26-0-1:#1B1B1B;
27
+ --magritte-color-background-secondary-v26-0-1:#303030;
28
+ --magritte-color-stroke-neutral-v26-0-1:#303030;
29
+ --magritte-color-stroke-phantom-v26-0-1:#30303000;
30
+ --magritte-color-stroke-state-neutral-hovered-v26-0-1:#303030;
31
+ --magritte-color-text-primary-v26-0-1:#ffffff;
32
+ --magritte-color-text-secondary-v26-0-1:#ABABAB;
33
+ --magritte-color-text-tertiary-v26-0-1:#767676;
34
+ --magritte-color-icon-tertiary-v26-0-1:#767676;
35
+ --magritte-gradient-component-chat-input-background-fade-v26-0-1:#1b1b1b00 0%, #1b1b1b 100%;
36
+ --magritte-shadow-level-1-color-v26-0-1:#00000029;
37
+ }
38
+ .magritte-chat-input___P69oN_1-2-3{
39
+ --chat-input-stroke-color:var(--magritte-color-stroke-neutral-v26-0-1);
40
40
  --chat-input-focus-shadow:0 0 0 transparent;
41
41
  position:relative;
42
42
  isolation:isolate;
@@ -44,10 +44,10 @@
44
44
  border-radius:24px;
45
45
  padding:12px;
46
46
  overflow:hidden;
47
- background-color:var(--magritte-color-background-primary-v26-0-0);
47
+ background-color:var(--magritte-color-background-primary-v26-0-1);
48
48
  --magritte-ui-scrollbar-offset-right:-12px;
49
49
  }
50
- .magritte-chat-input___P69oN_1-2-2::after{
50
+ .magritte-chat-input___P69oN_1-2-3::after{
51
51
  content:'';
52
52
  position:absolute;
53
53
  z-index:1;
@@ -56,106 +56,106 @@
56
56
  box-shadow:inset 0 0 0 1px var(--chat-input-stroke-color);
57
57
  pointer-events:none;
58
58
  }
59
- .magritte-chat-input___P69oN_1-2-2.magritte-no-background___eiIY1_1-2-2{
59
+ .magritte-chat-input___P69oN_1-2-3.magritte-no-background___eiIY1_1-2-3{
60
60
  background:none;
61
61
  --chat-input-stroke-color:transparent !important;
62
62
  }
63
- .magritte-chat-input___P69oN_1-2-2:has(*:focus){
64
- --chat-input-focus-shadow:var(--magritte-shadow-level-1-x-v26-0-0) var(--magritte-shadow-level-1-y-v26-0-0) var(--magritte-shadow-level-1-blur-v26-0-0) var(--magritte-shadow-level-1-spread-v26-0-0) var(--magritte-shadow-level-1-color-v26-0-0);
63
+ .magritte-chat-input___P69oN_1-2-3:has(*:focus){
64
+ --chat-input-focus-shadow:var(--magritte-shadow-level-1-x-v26-0-1) var(--magritte-shadow-level-1-y-v26-0-1) var(--magritte-shadow-level-1-blur-v26-0-1) var(--magritte-shadow-level-1-spread-v26-0-1) var(--magritte-shadow-level-1-color-v26-0-1);
65
65
  }
66
- .magritte-chat-input___P69oN_1-2-2:has(.magritte-text-input-focused___TfyLu_1-2-2){
67
- outline:4px solid var(--magritte-color-stroke-state-focused-accessible-v26-0-0);
66
+ .magritte-chat-input___P69oN_1-2-3:has(.magritte-text-input-focused___TfyLu_1-2-3){
67
+ outline:4px solid var(--magritte-color-stroke-state-focused-accessible-v26-0-1);
68
68
  }
69
69
  @media (min-width: 1020px){
70
- body.magritte-old-layout .magritte-chat-input___P69oN_1-2-2:hover{
71
- --chat-input-stroke-color:var(--magritte-color-stroke-state-neutral-hovered-v26-0-0);
70
+ body.magritte-old-layout .magritte-chat-input___P69oN_1-2-3:hover{
71
+ --chat-input-stroke-color:var(--magritte-color-stroke-state-neutral-hovered-v26-0-1);
72
72
  }
73
73
  }
74
74
  @media (min-width: 1024px){
75
- body:not(.magritte-old-layout) .magritte-chat-input___P69oN_1-2-2:hover{
76
- --chat-input-stroke-color:var(--magritte-color-stroke-state-neutral-hovered-v26-0-0);
75
+ body:not(.magritte-old-layout) .magritte-chat-input___P69oN_1-2-3:hover{
76
+ --chat-input-stroke-color:var(--magritte-color-stroke-state-neutral-hovered-v26-0-1);
77
77
  }
78
78
  }
79
- .magritte-content-grid___g03sT_1-2-2{
79
+ .magritte-content-grid___g03sT_1-2-3{
80
80
  display:grid;
81
81
  grid-template-columns:auto minmax(0, 1fr) auto;
82
82
  }
83
- .magritte-content-grid___g03sT_1-2-2 .magritte-preview___baXKi_1-2-2{
83
+ .magritte-content-grid___g03sT_1-2-3 .magritte-preview___baXKi_1-2-3{
84
84
  grid-area:1 / 1 / 2 / -1;
85
85
  }
86
- .magritte-content-grid___g03sT_1-2-2 .magritte-left___7JZYp_1-2-2{
86
+ .magritte-content-grid___g03sT_1-2-3 .magritte-left___7JZYp_1-2-3{
87
87
  grid-area:3 / 1;
88
88
  align-self:end;
89
89
  }
90
- .magritte-content-grid___g03sT_1-2-2 .magritte-central___zkguj_1-2-2{
90
+ .magritte-content-grid___g03sT_1-2-3 .magritte-central___zkguj_1-2-3{
91
91
  grid-area:3 / 2;
92
92
  align-self:center;
93
93
  }
94
- .magritte-content-grid___g03sT_1-2-2 .magritte-right___-tGcO_1-2-2{
94
+ .magritte-content-grid___g03sT_1-2-3 .magritte-right___-tGcO_1-2-3{
95
95
  grid-area:3 / 3;
96
96
  align-self:end;
97
97
  }
98
- .magritte-content-grid___g03sT_1-2-2 .magritte-scrollbar-cell___--M2x_1-2-2{
98
+ .magritte-content-grid___g03sT_1-2-3 .magritte-scrollbar-cell___--M2x_1-2-3{
99
99
  grid-area:2 / 1 / 3 / -1;
100
100
  position:relative;
101
101
  pointer-events:none;
102
102
  }
103
- .magritte-content-grid___g03sT_1-2-2 .magritte-scrollbar-cell___--M2x_1-2-2 > div{
103
+ .magritte-content-grid___g03sT_1-2-3 .magritte-scrollbar-cell___--M2x_1-2-3 > div{
104
104
  pointer-events:auto;
105
105
  }
106
- .magritte-content-grid___g03sT_1-2-2 .magritte-text-input___3AFO4_1-2-2{
106
+ .magritte-content-grid___g03sT_1-2-3 .magritte-text-input___3AFO4_1-2-3{
107
107
  grid-area:3 / 2;
108
108
  }
109
- .magritte-content-grid___g03sT_1-2-2 .magritte-text-input___3AFO4_1-2-2.magritte-layout-vertical___mVTr-_1-2-2,
110
- .magritte-content-grid___g03sT_1-2-2.magritte-has-central___VRZik_1-2-2 .magritte-text-input___3AFO4_1-2-2{
109
+ .magritte-content-grid___g03sT_1-2-3 .magritte-text-input___3AFO4_1-2-3.magritte-layout-vertical___mVTr-_1-2-3,
110
+ .magritte-content-grid___g03sT_1-2-3.magritte-has-central___VRZik_1-2-3 .magritte-text-input___3AFO4_1-2-3{
111
111
  grid-area:2 / 1 / 3 / -1;
112
112
  }
113
- .magritte-content-grid___g03sT_1-2-2.magritte-no-left-controls___7r6yy_1-2-2:not(.magritte-has-central___VRZik_1-2-2) .magritte-text-input___3AFO4_1-2-2{
113
+ .magritte-content-grid___g03sT_1-2-3.magritte-no-left-controls___7r6yy_1-2-3:not(.magritte-has-central___VRZik_1-2-3) .magritte-text-input___3AFO4_1-2-3{
114
114
  grid-area:2 / 1 / 4 / 3;
115
115
  }
116
- .magritte-content-grid___g03sT_1-2-2.magritte-no-right-controls___HBSag_1-2-2:not(.magritte-has-central___VRZik_1-2-2) .magritte-text-input___3AFO4_1-2-2{
116
+ .magritte-content-grid___g03sT_1-2-3.magritte-no-right-controls___HBSag_1-2-3:not(.magritte-has-central___VRZik_1-2-3) .magritte-text-input___3AFO4_1-2-3{
117
117
  grid-area:2 / 2 / 4 / -1;
118
118
  }
119
- .magritte-content-grid___g03sT_1-2-2.magritte-no-left-controls___7r6yy_1-2-2:not(.magritte-has-central___VRZik_1-2-2){
119
+ .magritte-content-grid___g03sT_1-2-3.magritte-no-left-controls___7r6yy_1-2-3:not(.magritte-has-central___VRZik_1-2-3){
120
120
  grid-template-rows:auto minmax(0, 1fr) auto;
121
121
  }
122
- .magritte-right___-tGcO_1-2-2,
123
- .magritte-left___7JZYp_1-2-2{
122
+ .magritte-right___-tGcO_1-2-3,
123
+ .magritte-left___7JZYp_1-2-3{
124
124
  display:flex;
125
125
  gap:8px;
126
126
  }
127
- .magritte-chips___gLao5_1-2-2{
127
+ .magritte-chips___gLao5_1-2-3{
128
128
  display:flex;
129
129
  flex-wrap:nowrap;
130
130
  width:max-content;
131
131
  gap:8px;
132
132
  }
133
- .magritte-chips-container___-bS5O_1-2-2{
133
+ .magritte-chips-container___-bS5O_1-2-3{
134
134
  padding:0 12px;
135
135
  }
136
- .magritte-no-left-controls___7r6yy_1-2-2 .magritte-chips-container___-bS5O_1-2-2{
136
+ .magritte-no-left-controls___7r6yy_1-2-3 .magritte-chips-container___-bS5O_1-2-3{
137
137
  padding-left:0;
138
138
  }
139
- .magritte-no-right-controls___HBSag_1-2-2 .magritte-chips-container___-bS5O_1-2-2{
139
+ .magritte-no-right-controls___HBSag_1-2-3 .magritte-chips-container___-bS5O_1-2-3{
140
140
  padding-right:0;
141
141
  }
142
- .magritte-preview-block___iiPdS_1-2-2{
142
+ .magritte-preview-block___iiPdS_1-2-3{
143
143
  display:flex;
144
144
  align-items:center;
145
145
  gap:12px;
146
146
  padding-bottom:8px;
147
147
  }
148
- .magritte-preview-side___ymR-u_1-2-2{
148
+ .magritte-preview-side___ymR-u_1-2-3{
149
149
  display:flex;
150
150
  flex-shrink:0;
151
151
  }
152
- .magritte-preview-content___ZgyBD_1-2-2{
152
+ .magritte-preview-content___ZgyBD_1-2-3{
153
153
  display:flex;
154
154
  flex:1;
155
155
  flex-direction:column;
156
156
  min-width:0;
157
157
  }
158
- .magritte-preview-title___SkFeZ_1-2-2{
158
+ .magritte-preview-title___SkFeZ_1-2-3{
159
159
  font-family:"hh sans";
160
160
  font-weight:500;
161
161
  line-height:18px;
@@ -164,9 +164,9 @@
164
164
  text-indent:0px;
165
165
  text-transform:none;
166
166
  text-decoration:none;
167
- color:var(--magritte-color-text-primary-v26-0-0);
167
+ color:var(--magritte-color-text-primary-v26-0-1);
168
168
  }
169
- .magritte-preview-subtitle___58qfR_1-2-2{
169
+ .magritte-preview-subtitle___58qfR_1-2-3{
170
170
  font-family:"hh sans";
171
171
  font-weight:400;
172
172
  line-height:20px;
@@ -176,25 +176,25 @@
176
176
  text-transform:none;
177
177
  text-decoration:none;
178
178
  overflow:hidden;
179
- color:var(--magritte-color-text-secondary-v26-0-0);
179
+ color:var(--magritte-color-text-secondary-v26-0-1);
180
180
  white-space:nowrap;
181
181
  text-overflow:ellipsis;
182
182
  }
183
- .magritte-files-container___zOkRK_1-2-2{
183
+ .magritte-files-container___zOkRK_1-2-3{
184
184
  padding-bottom:8px;
185
185
  }
186
- .magritte-files___j2q5K_1-2-2{
186
+ .magritte-files___j2q5K_1-2-3{
187
187
  display:flex;
188
188
  flex-wrap:nowrap;
189
189
  align-items:flex-start;
190
190
  width:max-content;
191
191
  gap:8px;
192
192
  }
193
- .magritte-file___lz9Ll_1-2-2{
193
+ .magritte-file___lz9Ll_1-2-3{
194
194
  position:relative;
195
195
  }
196
- .magritte-file-card___hn5C9_1-2-2::after,
197
- .magritte-file-tile___OVlh3_1-2-2::after{
196
+ .magritte-file-card___hn5C9_1-2-3::after,
197
+ .magritte-file-tile___OVlh3_1-2-3::after{
198
198
  content:'';
199
199
  position:absolute;
200
200
  inset:0;
@@ -202,21 +202,21 @@
202
202
  border-radius:inherit;
203
203
  pointer-events:none;
204
204
  }
205
- .magritte-file-card___hn5C9_1-2-2{
205
+ .magritte-file-card___hn5C9_1-2-3{
206
206
  position:relative;
207
207
  box-sizing:border-box;
208
208
  width:280px;
209
209
  padding:8px;
210
210
  border-radius:12px;
211
- background-color:var(--magritte-color-background-primary-v26-0-0);
211
+ background-color:var(--magritte-color-background-primary-v26-0-1);
212
212
  }
213
- .magritte-file-card___hn5C9_1-2-2::after{
214
- border-color:var(--magritte-color-stroke-neutral-v26-0-0);
213
+ .magritte-file-card___hn5C9_1-2-3::after{
214
+ border-color:var(--magritte-color-stroke-neutral-v26-0-1);
215
215
  }
216
- .magritte-file-card-removable___GkxUe_1-2-2{
216
+ .magritte-file-card-removable___GkxUe_1-2-3{
217
217
  padding-right:32px;
218
218
  }
219
- .magritte-file-tile___OVlh3_1-2-2{
219
+ .magritte-file-tile___OVlh3_1-2-3{
220
220
  position:relative;
221
221
  display:flex;
222
222
  align-items:center;
@@ -226,41 +226,41 @@
226
226
  overflow:hidden;
227
227
  border-radius:12px;
228
228
  }
229
- .magritte-file-tile___OVlh3_1-2-2::after{
230
- border-color:var(--magritte-color-stroke-phantom-v26-0-0);
229
+ .magritte-file-tile___OVlh3_1-2-3::after{
230
+ border-color:var(--magritte-color-stroke-phantom-v26-0-1);
231
231
  }
232
- .magritte-file-tile-placeholder___yxLuR_1-2-2{
233
- background-color:var(--magritte-color-background-secondary-v26-0-0);
232
+ .magritte-file-tile-placeholder___yxLuR_1-2-3{
233
+ background-color:var(--magritte-color-background-secondary-v26-0-1);
234
234
  }
235
- .magritte-file-tile-image___cZFgL_1-2-2{
235
+ .magritte-file-tile-image___cZFgL_1-2-3{
236
236
  display:block;
237
237
  width:100%;
238
238
  height:100%;
239
239
  object-fit:cover;
240
240
  }
241
- .magritte-file-remove___S0WB9_1-2-2{
241
+ .magritte-file-remove___S0WB9_1-2-3{
242
242
  position:absolute;
243
243
  top:4px;
244
244
  right:4px;
245
245
  display:flex;
246
246
  }
247
- .magritte-file-name___L03-O_1-2-2{
247
+ .magritte-file-name___L03-O_1-2-3{
248
248
  display:flex;
249
249
  min-width:0;
250
250
  }
251
- .magritte-file-name-base___ojdp6_1-2-2{
251
+ .magritte-file-name-base___ojdp6_1-2-3{
252
252
  overflow:hidden;
253
253
  white-space:nowrap;
254
254
  text-overflow:ellipsis;
255
255
  }
256
- .magritte-file-name-extension___3QZtS_1-2-2{
256
+ .magritte-file-name-extension___3QZtS_1-2-3{
257
257
  flex-shrink:0;
258
258
  white-space:nowrap;
259
259
  }
260
- .magritte-text-input-wrapper___TPbwC_1-2-2{
260
+ .magritte-text-input-wrapper___TPbwC_1-2-3{
261
261
  display:contents;
262
262
  }
263
- .magritte-text-input___3AFO4_1-2-2{
263
+ .magritte-text-input___3AFO4_1-2-3{
264
264
  box-sizing:content-box;
265
265
  padding:0 12px;
266
266
  border:none;
@@ -282,34 +282,34 @@
282
282
  text-indent:0px;
283
283
  text-transform:none;
284
284
  text-decoration:none;
285
- color:var(--magritte-color-text-primary-v26-0-0);
285
+ color:var(--magritte-color-text-primary-v26-0-1);
286
286
  }
287
- .magritte-text-input___3AFO4_1-2-2::placeholder{
288
- color:var(--magritte-color-text-tertiary-v26-0-0);
287
+ .magritte-text-input___3AFO4_1-2-3::placeholder{
288
+ color:var(--magritte-color-text-tertiary-v26-0-1);
289
289
  opacity:1;
290
290
  }
291
- .magritte-text-input___3AFO4_1-2-2:focus,
292
- .magritte-text-input___3AFO4_1-2-2:focus-visible{
291
+ .magritte-text-input___3AFO4_1-2-3:focus,
292
+ .magritte-text-input___3AFO4_1-2-3:focus-visible{
293
293
  border:none;
294
294
  outline:none;
295
295
  }
296
- .magritte-text-input___3AFO4_1-2-2.magritte-with-top-fade___okgqo_1-2-2,
297
- .magritte-text-input___3AFO4_1-2-2.magritte-with-bottom-fade___82gr8_1-2-2{
296
+ .magritte-text-input___3AFO4_1-2-3.magritte-with-top-fade___okgqo_1-2-3,
297
+ .magritte-text-input___3AFO4_1-2-3.magritte-with-bottom-fade___82gr8_1-2-3{
298
298
  -webkit-mask:var(--fade-top) top / 100% 16px no-repeat, linear-gradient(#000, #000) center / 100% calc(100% - 32px) no-repeat, var(--fade-bottom) bottom / 100% 16px no-repeat;
299
299
  mask:var(--fade-top) top / 100% 16px no-repeat, linear-gradient(#000, #000) center / 100% calc(100% - 32px) no-repeat, var(--fade-bottom) bottom / 100% 16px no-repeat;
300
300
  }
301
- .magritte-text-input___3AFO4_1-2-2.magritte-with-top-fade___okgqo_1-2-2{
302
- --fade-top:linear-gradient(180deg, var(--magritte-gradient-component-chat-input-background-fade-v26-0-0));
301
+ .magritte-text-input___3AFO4_1-2-3.magritte-with-top-fade___okgqo_1-2-3{
302
+ --fade-top:linear-gradient(180deg, var(--magritte-gradient-component-chat-input-background-fade-v26-0-1));
303
303
  }
304
- .magritte-text-input___3AFO4_1-2-2.magritte-with-bottom-fade___82gr8_1-2-2{
305
- --fade-bottom:linear-gradient(0deg, var(--magritte-gradient-component-chat-input-background-fade-v26-0-0));
304
+ .magritte-text-input___3AFO4_1-2-3.magritte-with-bottom-fade___82gr8_1-2-3{
305
+ --fade-bottom:linear-gradient(0deg, var(--magritte-gradient-component-chat-input-background-fade-v26-0-1));
306
306
  }
307
- .magritte-text-input___3AFO4_1-2-2.magritte-measure___xNKc0_1-2-2{
307
+ .magritte-text-input___3AFO4_1-2-3.magritte-measure___xNKc0_1-2-3{
308
308
  height:20px !important;
309
309
  padding:0 !important;
310
310
  margin:0 !important;
311
311
  }
312
- .magritte-voice-record___p64PV_1-2-2{
312
+ .magritte-voice-record___p64PV_1-2-3{
313
313
  display:flex;
314
314
  align-items:center;
315
315
  justify-content:space-between;
@@ -319,45 +319,45 @@
319
319
  min-height:40px;
320
320
  gap:8px;
321
321
  }
322
- .magritte-voice-record-left___njEt-_1-2-2{
322
+ .magritte-voice-record-left___njEt-_1-2-3{
323
323
  display:flex;
324
324
  align-items:center;
325
325
  gap:8px;
326
326
  min-width:0;
327
327
  }
328
- .magritte-voice-record-right___UTv-U_1-2-2{
328
+ .magritte-voice-record-right___UTv-U_1-2-3{
329
329
  display:flex;
330
330
  align-items:center;
331
331
  gap:8px;
332
332
  }
333
- .magritte-voice-record-right___UTv-U_1-2-2.magritte-voice-processing___C0xnX_1-2-2{
333
+ .magritte-voice-record-right___UTv-U_1-2-3.magritte-voice-processing___C0xnX_1-2-3{
334
334
  padding:8px;
335
335
  }
336
- .magritte-voice-record-indicator___V8ybb_1-2-2{
336
+ .magritte-voice-record-indicator___V8ybb_1-2-3{
337
337
  display:flex;
338
338
  flex-shrink:0;
339
339
  align-items:center;
340
340
  gap:2px;
341
341
  }
342
- .magritte-voice-record-indicator-bar___jgyqz_1-2-2{
342
+ .magritte-voice-record-indicator-bar___jgyqz_1-2-3{
343
343
  width:2px;
344
344
  min-height:2px;
345
345
  max-height:2px;
346
346
  border-radius:1000px;
347
- background-color:var(--magritte-color-icon-tertiary-v26-0-0);
348
- transition:max-height var(--magritte-semantic-animation-time-s-duration-v26-0-0) var(--magritte-semantic-animation-ease-base-timing-function-v26-0-0);
349
- animation:magritte-voice-record-indicator-wave___4VsyE_1-2-2 400ms linear infinite alternate paused;
347
+ background-color:var(--magritte-color-icon-tertiary-v26-0-1);
348
+ transition:max-height var(--magritte-semantic-animation-time-s-duration-v26-0-1) var(--magritte-semantic-animation-ease-base-timing-function-v26-0-1);
349
+ animation:magritte-voice-record-indicator-wave___4VsyE_1-2-3 400ms linear infinite alternate paused;
350
350
  }
351
- .magritte-voice-record-indicator-has-sound___67t5g_1-2-2 .magritte-voice-record-indicator-bar___jgyqz_1-2-2{
351
+ .magritte-voice-record-indicator-has-sound___67t5g_1-2-3 .magritte-voice-record-indicator-bar___jgyqz_1-2-3{
352
352
  max-height:27px;
353
353
  animation-play-state:running;
354
354
  }
355
355
  @media (prefers-reduced-motion: reduce){
356
- .magritte-voice-record-indicator-has-sound___67t5g_1-2-2 .magritte-voice-record-indicator-bar___jgyqz_1-2-2{
356
+ .magritte-voice-record-indicator-has-sound___67t5g_1-2-3 .magritte-voice-record-indicator-bar___jgyqz_1-2-3{
357
357
  animation-play-state:paused;
358
358
  }
359
359
  }
360
- @keyframes magritte-voice-record-indicator-wave___4VsyE_1-2-2{
360
+ @keyframes magritte-voice-record-indicator-wave___4VsyE_1-2-3{
361
361
  from{
362
362
  height:calc(var(--target-height) * 0.62px);
363
363
  }
@@ -365,12 +365,12 @@
365
365
  height:calc(var(--target-height) * 1.22px);
366
366
  }
367
367
  }
368
- .magritte-mode-container___nATVD_1-2-2{
368
+ .magritte-mode-container___nATVD_1-2-3{
369
369
  position:relative;
370
370
  display:grid;
371
371
  align-content:end;
372
372
  }
373
- .magritte-voice-overlay___LbxAI_1-2-2{
373
+ .magritte-voice-overlay___LbxAI_1-2-3{
374
374
  position:absolute;
375
375
  right:0;
376
376
  bottom:0;
package/index.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- export { ChatInput } from '@hh.ru/magritte-ui-chat-input/public/ChatInput';
2
- export { type ChatInputProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInput';
3
- export { type ChatInputVoiceRecordConfig } from '@hh.ru/magritte-ui-chat-input/types';
4
- export { type ChatInputChipsProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputChips';
5
- export { type ChatInputFileProps, type ChatInputFileState, type ChatInputFileType, } from '@hh.ru/magritte-ui-chat-input/public/ChatInputFile';
6
- export { getChatInputFileType } from '@hh.ru/magritte-ui-chat-input/public/getChatInputFileType';
7
- export { type ChatInputFilesProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputFiles';
8
- export { type ChatInputPreviewProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputPreview';
9
- export { type ChatInputSendButtonProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputSendButton';
10
- export { type ChatInputVoiceButtonProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputVoiceButton';
1
+ export { ChatInput } from './public/ChatInput';
2
+ export { type ChatInputProps } from './public/ChatInput';
3
+ export { type ChatInputVoiceRecordConfig } from './types';
4
+ export { type ChatInputChipsProps } from './public/ChatInputChips';
5
+ export { type ChatInputFileProps, type ChatInputFileState, type ChatInputFileType, } from './public/ChatInputFile';
6
+ export { getChatInputFileType } from './public/getChatInputFileType';
7
+ export { type ChatInputFilesProps } from './public/ChatInputFiles';
8
+ export { type ChatInputPreviewProps } from './public/ChatInputPreview';
9
+ export { type ChatInputSendButtonProps } from './public/ChatInputSendButton';
10
+ export { type ChatInputVoiceButtonProps } from './public/ChatInputVoiceButton';
package/index.js CHANGED
@@ -10,7 +10,7 @@ import './internal/ChatInputContext.js';
10
10
  import './internal/ModeTransition.js';
11
11
  import 'motion/react';
12
12
  import '@hh.ru/magritte-design-tokens/core-tokens';
13
- import './styles-CHMi0EYL.js';
13
+ import './styles-hEUo5BXU.js';
14
14
  import './internal/TextInput.js';
15
15
  import './internal/useSendOnEnter.js';
16
16
  import '@hh.ru/magritte-common-keyboard';
package/index.mock.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- export { type ChatInputProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInput';
2
- export { type ChatInputVoiceRecordConfig } from '@hh.ru/magritte-ui-chat-input/types';
3
- export { type ChatInputChipsProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputChips';
4
- export { type ChatInputFileProps, type ChatInputFileState, type ChatInputFileType, } from '@hh.ru/magritte-ui-chat-input/public/ChatInputFile';
5
- export { getChatInputFileType } from '@hh.ru/magritte-ui-chat-input/public/getChatInputFileType';
6
- export { type ChatInputFilesProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputFiles';
7
- export { type ChatInputPreviewProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputPreview';
8
- export { type ChatInputSendButtonProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputSendButton';
9
- export { type ChatInputVoiceButtonProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputVoiceButton';
1
+ export { type ChatInputProps } from './public/ChatInput';
2
+ export { type ChatInputVoiceRecordConfig } from './types';
3
+ export { type ChatInputChipsProps } from './public/ChatInputChips';
4
+ export { type ChatInputFileProps, type ChatInputFileState, type ChatInputFileType, } from './public/ChatInputFile';
5
+ export { getChatInputFileType } from './public/getChatInputFileType';
6
+ export { type ChatInputFilesProps } from './public/ChatInputFiles';
7
+ export { type ChatInputPreviewProps } from './public/ChatInputPreview';
8
+ export { type ChatInputSendButtonProps } from './public/ChatInputSendButton';
9
+ export { type ChatInputVoiceButtonProps } from './public/ChatInputVoiceButton';
10
10
  export declare const ChatInput: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
package/index.mock.js CHANGED
@@ -3,49 +3,50 @@ export { getChatInputFileType } from './public/getChatInputFileType.js';
3
3
  import { jsxs, jsx } from 'react/jsx-runtime';
4
4
  import { forwardRef } from 'react';
5
5
 
6
- function enhance(mockComponent, staticProps) {
7
- // удаляем внутренний свойства реакта, чтобы не перезаписать ими mockComponent
8
- delete staticProps.type;
9
- delete staticProps.$$typeof;
10
- delete staticProps.render;
11
- for (const prop in staticProps) {
12
- mockComponent[prop] = staticProps[prop];
13
- }
6
+ function enhance(mockComponent2, staticProps) {
7
+ delete staticProps.type;
8
+ delete staticProps.$$typeof;
9
+ delete staticProps.render;
10
+ for (const prop in staticProps) {
11
+ mockComponent2[prop] = staticProps[prop];
12
+ }
14
13
  }
15
14
  const MockComponent = ({ style, ...props }) => (
16
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
17
- // @ts-ignore
18
- // eslint-disable-next-line react/jsx-no-undef
19
- jsx("magritte-component-mock", { "style-data": style, ...props }));
20
- /**
21
- * Возвращает mock React компонента
22
- */
15
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
16
+ // @ts-ignore
17
+ // eslint-disable-next-line react/jsx-no-undef
18
+ /* @__PURE__ */ jsx("magritte-component-mock", { "style-data": style, ...props })
19
+ );
23
20
  const mockComponent = (componentName, staticProps = {}, { withChildren, innerDependence, WrapperComponent } = {}) => {
24
- const mockWrapper = forwardRef(({ children, ...props }, ref) => {
25
- const mock = (
26
- // eslint-disable-next-line react/jsx-no-undef
27
- jsxs(MockComponent, { ...props, _component: componentName, children: [innerDependence ? innerDependence(props, ref) : null, withChildren ? children : null] }));
28
- return WrapperComponent ? jsx(WrapperComponent, { ...props, children: mock }) : mock;
29
- });
30
- staticProps && enhance(mockWrapper, staticProps);
31
- mockWrapper.displayName = 'magritte-ref';
32
- return mockWrapper;
21
+ const mockWrapper = forwardRef(({ children, ...props }, ref) => {
22
+ const mock = (
23
+ // eslint-disable-next-line react/jsx-no-undef
24
+ /* @__PURE__ */ jsxs(MockComponent, { ...props, _component: componentName, children: [
25
+ innerDependence ? innerDependence(props, ref) : null,
26
+ withChildren ? children : null
27
+ ] })
28
+ );
29
+ return WrapperComponent ? /* @__PURE__ */ jsx(WrapperComponent, { ...props, children: mock }) : mock;
30
+ });
31
+ staticProps && enhance(mockWrapper, staticProps);
32
+ mockWrapper.displayName = "magritte-ref";
33
+ return mockWrapper;
33
34
  };
34
35
 
35
36
  const staticProps = {
36
- Chips: mockComponent('Chips', undefined, {
37
- withChildren: true,
38
- }),
39
- File: mockComponent('File'),
40
- Files: mockComponent('Files', undefined, {
41
- withChildren: true,
42
- }),
43
- Preview: mockComponent('Preview'),
44
- SendButton: mockComponent('SendButton'),
45
- VoiceButton: mockComponent('VoiceButton'),
37
+ Chips: mockComponent("Chips", void 0, {
38
+ withChildren: true
39
+ }),
40
+ File: mockComponent("File"),
41
+ Files: mockComponent("Files", void 0, {
42
+ withChildren: true
43
+ }),
44
+ Preview: mockComponent("Preview"),
45
+ SendButton: mockComponent("SendButton"),
46
+ VoiceButton: mockComponent("VoiceButton")
46
47
  };
47
- const ChatInput = mockComponent('ChatInput', staticProps, {
48
- withChildren: true,
48
+ const ChatInput = mockComponent("ChatInput", staticProps, {
49
+ withChildren: true
49
50
  });
50
51
 
51
52
  export { ChatInput };