@skbkontur/side-menu 0.14.8 → 1.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.
Files changed (27) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/README.md +240 -230
  3. package/internal/themes/SideMenuTheme.d.ts +12 -5
  4. package/internal/themes/SideMenuTheme.js +36 -11
  5. package/package.json +1 -1
  6. package/src/SideMenuBody/SideMenuBody.js +4 -2
  7. package/src/SideMenuDivider/SideMenuDivider.js +5 -2
  8. package/src/SideMenuDivider/SideMenuDivider.md +1 -0
  9. package/src/SideMenuDivider/SideMenuDivider.styles.d.ts +2 -1
  10. package/src/SideMenuDivider/SideMenuDivider.styles.js +2 -2
  11. package/src/SideMenuFooter/SideMenuFooter.styles.js +1 -1
  12. package/src/SideMenuHeader/SideMenuHeader.styles.js +2 -2
  13. package/src/SideMenuItem/SideMenuItem.md +8 -1
  14. package/src/internal/InnerBody.js +0 -10
  15. package/src/internal/ItemContent/Caption.js +1 -1
  16. package/src/internal/ItemContent/Icon.js +0 -1
  17. package/src/internal/ItemContent/Icon.styles.d.ts +0 -1
  18. package/src/internal/ItemContent/Icon.styles.js +3 -6
  19. package/src/internal/ItemContent/ItemContent.js +4 -3
  20. package/src/internal/ItemContent/ItemContent.styles.d.ts +1 -0
  21. package/src/internal/ItemContent/ItemContent.styles.js +11 -8
  22. package/src/internal/ItemContent/Marker.d.ts +2 -2
  23. package/src/internal/ItemContent/Marker.js +2 -1
  24. package/src/internal/ItemContent/Marker.styles.d.ts +1 -0
  25. package/src/internal/ItemContent/Marker.styles.js +5 -2
  26. package/src/internal/InnerBody.styles.d.ts +0 -4
  27. package/src/internal/InnerBody.styles.js +0 -10
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [1.0.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.14.8...@skbkontur/side-menu@1.0.0) (2023-08-02)
7
+
8
+
9
+ ### Features
10
+
11
+ * **SideMenu:** appearance ([e39d8a5](https://git.skbkontur.ru/ui/ui-parking/commits/e39d8a59c266e9f41468a51377bb34055956ab8d))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [0.14.8](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.14.7...@skbkontur/side-menu@0.14.8) (2023-07-25)
7
18
 
8
19
  **Note:** Version bump only for package @skbkontur/side-menu
package/README.md CHANGED
@@ -2,10 +2,12 @@
2
2
 
3
3
  SideMenu в фирменном стиле (макеты живут [здесь](https://www.figma.com/file/XA8Ytcx8bxemYAkF7eGVSv/%D0%9A%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82-%D0%BB%D0%B5%D0%B2%D0%BE%D0%B3%D0%BE-%D0%BC%D0%B5%D0%BD%D1%8E?node-id=0%3A1)).
4
4
 
5
+ [Пример в песочнице](https://codesandbox.io/s/competent-wiles-k85wlm)
6
+
5
7
  ```jsx harmony
6
8
  import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
7
9
  import { Kontur, Ofd } from '@skbkontur/logos';
8
- import { MenuItem } from '@skbkontur/react-ui';
10
+ import { ThemeContext, ThemeFactory, MenuItem, MenuSeparator, THEME_2022 } from '@skbkontur/react-ui';
9
11
  import { SideMenu } from './index';
10
12
  import {
11
13
  DocTextIcon24Regular,
@@ -20,62 +22,64 @@ import {
20
22
  } from '@skbkontur/icons';
21
23
 
22
24
  <div style={{height: '600px', position: 'relative'}}>
25
+ <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' }, THEME_2022)}>
23
26
  <SideMenu disableSwipe={false}>
24
- <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>}/>
25
- <SideMenu.Body>
26
- <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию'} marker={'новое'}>
27
- <SideMenu.SubItem caption={'Входящие'}/>
28
- <SideMenu.SubItem caption={'Исходящие'} marker={'2'}>
29
- <SideMenu.SubItem caption={'Исходящие1'}/>
30
- <SideMenu.SubItem caption={'Исходящие2'}/>
31
- </SideMenu.SubItem>
32
- <SideMenu.SubItem caption={'Внутренние'}/>
33
- <SideMenu.SubItem caption={'Черновики'}/>
34
- <SideMenu.SubItem caption={'Удаленные'}/>
35
- <SideMenu.SubLink caption={'Cсылка в подменю'} href={'https://www.google.com/search?q=test'} target={'_blank'}/>
36
- <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
37
- <SideMenu.SubItem caption={'Требуют обработки'}/>
38
- <SideMenu.SubItem caption={'Обработанные'}/>
39
- </SideMenu.Item>
40
- <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
41
- <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
42
- <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
43
- <SideMenu.SubItem caption={'Исходящие'}/>
44
- <SideMenu.SubItem caption={'Внутренние'}/>
45
- <SideMenu.SubItem caption={'Черновики'}/>
46
- <SideMenu.SubItem caption={'Удаленные'}/>
47
- </SideMenu.Item>
48
- <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
27
+ <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>}/>
28
+ <SideMenu.Body>
29
+ <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию'} marker={'2'}>
30
+ <SideMenu.SubItem caption={'Входящие'}/>
31
+ <SideMenu.SubItem caption={'Исходящие'} marker={'2'}>
32
+ <SideMenu.SubItem caption={'Исходящие1'}/>
33
+ <SideMenu.SubItem caption={'Исходящие2'}/>
34
+ </SideMenu.SubItem>
35
+ <SideMenu.SubItem caption={'Внутренние'}/>
36
+ <SideMenu.SubItem caption={'Черновики'}/>
37
+ <SideMenu.SubItem caption={'Удаленные'}/>
38
+ <SideMenu.SubLink caption={'Cсылка в подменю'} href={'https://www.google.com/search?q=test'} target={'_blank'}/>
39
+ <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
40
+ <SideMenu.SubItem caption={'Требуют обработки'}/>
41
+ <SideMenu.SubItem caption={'Обработанные'}/>
42
+ </SideMenu.Item>
43
+ <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
44
+ <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
45
+ <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
46
+ <SideMenu.SubItem caption={'Исходящие'}/>
47
+ <SideMenu.SubItem caption={'Внутренние'}/>
48
+ <SideMenu.SubItem caption={'Черновики'}/>
49
+ <SideMenu.SubItem caption={'Удаленные'}/>
50
+ </SideMenu.Item>
51
+ <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
49
52
  <SideMenu.Divider/>
50
- <SideMenu.Link href={'https://google.com'} icon={<AttachLinkIcon />} caption={'Ссылка'} target={'_blank'}/>
51
- <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел'}/>
52
- <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'}/>
53
- </SideMenu.Body>
54
- <SideMenu.Footer>
55
- <SideMenu.Organisations icon={<StackHDownIcon24Regular/>}>
56
- <MenuItem>СКБ Контур</MenuItem>
57
- <MenuItem>Сириус Базинес</MenuItem>
58
- <MenuItem>Контур НТТ</MenuItem>
59
- <MenuItem>Промэлектроника</MenuItem>
60
- <SideMenu.Divider/>
61
- <MenuItem>Список организаций</MenuItem>
62
- </SideMenu.Organisations>
63
- <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
64
- <SideMenu.Avatar
65
- userName={'Ишматова Елена'}
66
- avatarUrl={getKonturAvatarUrl({
67
- userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
68
- })}
69
- >
70
- <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
71
- Личный кабинет
72
- </MenuItem>
73
- <MenuItem >Безопасность</MenuItem>
74
- <SideMenu.Divider />
75
- <MenuItem >Выйти</MenuItem>
76
- </SideMenu.Avatar>
77
- </SideMenu.Footer>
78
- </SideMenu>
53
+ <SideMenu.Link href={'https://google.com'} icon={<AttachLinkIcon />} caption={'Ссылка'} target={'_blank'}/>
54
+ <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел'}/>
55
+ <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'}/>
56
+ </SideMenu.Body>
57
+ <SideMenu.Footer>
58
+ <SideMenu.Organisations icon={<StackHDownIcon24Regular/>}>
59
+ <MenuItem>СКБ Контур</MenuItem>
60
+ <MenuItem>Сириус Базинес</MenuItem>
61
+ <MenuItem>Контур НТТ</MenuItem>
62
+ <MenuItem>Промэлектроника</MenuItem>
63
+ <MenuSeparator />
64
+ <MenuItem>Список организаций</MenuItem>
65
+ </SideMenu.Organisations>
66
+ <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
67
+ <SideMenu.Avatar
68
+ userName={'Ишматова Елена'}
69
+ avatarUrl={getKonturAvatarUrl({
70
+ userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
71
+ })}
72
+ >
73
+ <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
74
+ Личный кабинет
75
+ </MenuItem>
76
+ <MenuItem >Безопасность</MenuItem>
77
+ <MenuSeparator />
78
+ <MenuItem >Выйти</MenuItem>
79
+ </SideMenu.Avatar>
80
+ </SideMenu.Footer>
81
+ </SideMenu>
82
+ </ThemeContext.Provider>
79
83
  </div>
80
84
  ```
81
85
 
@@ -84,7 +88,7 @@ SideMenu с меню второго уровня в отдельной коло
84
88
  ```jsx harmony
85
89
  import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
86
90
  import { Buhgalteria, Kontur } from '@skbkontur/logos';
87
- import { MenuItem, Modal, Input } from '@skbkontur/react-ui';
91
+ import { ThemeContext, ThemeFactory, MenuItem, Modal, Input, MenuSeparator, THEME_2022 } from '@skbkontur/react-ui';
88
92
  import { SideMenu } from './index';
89
93
  import {
90
94
  DocTextIcon24Regular,
@@ -129,73 +133,75 @@ const renderModal = () => {
129
133
  }
130
134
 
131
135
  <div style={{height: '600px', width: '100%', position: 'relative', display: 'flex'}}>
132
- <SideMenu isSeparatedMenu={true}>
133
- <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Buhgalteria/>} withWidget={false}/>
134
- <SideMenu.Body>
135
- <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы'} marker={'новое'}>
136
- <SideMenu.SubItem caption={'Входящие'} marker={'5'}>
137
- <SideMenu.SubItem caption={'Входящие 1'}>
138
- <SideMenu.SubItem caption={'Входящие11'}>
139
- <SideMenu.SubItem caption={'Входящие111'}/>
140
- <SideMenu.SubItem caption={'Входящие112'}/>
141
- <SideMenu.SubItem caption={'Входящие113'}/>
136
+ <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#b750d1' }, THEME_2022)}>
137
+ <SideMenu isSeparatedMenu={true}>
138
+ <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Buhgalteria/>} withWidget={false}/>
139
+ <SideMenu.Body>
140
+ <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы'} marker={'2'}>
141
+ <SideMenu.SubItem caption={'Входящие'} marker={'5'}>
142
+ <SideMenu.SubItem caption={'Входящие 1'}>
143
+ <SideMenu.SubItem caption={'Входящие11'}>
144
+ <SideMenu.SubItem caption={'Входящие111'}/>
145
+ <SideMenu.SubItem caption={'Входящие112'}/>
146
+ <SideMenu.SubItem caption={'Входящие113'}/>
147
+ </SideMenu.SubItem>
148
+ <SideMenu.SubItem caption={'Входящие12'}/>
149
+ <SideMenu.SubItem caption={'Входящие13'}/>
142
150
  </SideMenu.SubItem>
143
- <SideMenu.SubItem caption={'Входящие12'}/>
144
- <SideMenu.SubItem caption={'Входящие13'}/>
145
- </SideMenu.SubItem>
146
- <SideMenu.SubItem caption={'Входящие2'}>
147
- <SideMenu.SubItem caption={'Входящие21'}>
148
- <SideMenu.SubItem caption={'Входящие211'}/>
149
- <SideMenu.SubItem caption={'Входящие212'}/>
150
- <SideMenu.SubItem caption={'Входящие213'}/>
151
+ <SideMenu.SubItem caption={'Входящие2'}>
152
+ <SideMenu.SubItem caption={'Входящие21'}>
153
+ <SideMenu.SubItem caption={'Входящие211'}/>
154
+ <SideMenu.SubItem caption={'Входящие212'}/>
155
+ <SideMenu.SubItem caption={'Входящие213'}/>
156
+ </SideMenu.SubItem>
157
+ <SideMenu.SubItem caption={'Входящие22'}/>
158
+ <SideMenu.SubItem caption={'Входящие23'}/>
151
159
  </SideMenu.SubItem>
152
- <SideMenu.SubItem caption={'Входящие22'}/>
153
- <SideMenu.SubItem caption={'Входящие23'}/>
160
+ <SideMenu.SubItem caption={'Входящие3'}/>
154
161
  </SideMenu.SubItem>
155
- <SideMenu.SubItem caption={'Входящие3'}/>
156
- </SideMenu.SubItem>
157
- <SideMenu.SubItem caption={'Исходящие'}/>
158
- <SideMenu.SubItem caption={'Внутренние'}/>
159
- <SideMenu.SubItem caption={'Черновики'}/>
160
- <SideMenu.SubItem caption={'Удаленные'}/>
161
- <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
162
- <SideMenu.SubItem caption={'Требуют обработки'}/>
163
- <SideMenu.SubItem caption={'Обработанные'}/>
164
- </SideMenu.Item>
165
- <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
166
- <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
167
- <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
168
- <SideMenu.SubItem caption={'Исходящие'}/>
169
- <SideMenu.SubItem caption={'Внутренние'}/>
170
- <SideMenu.SubItem caption={'Черновики'}/>
171
- <SideMenu.SubItem caption={'Удаленные'}/>
172
- </SideMenu.Item>
173
- <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
174
- <SideMenu.Divider />
175
- <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел'}/>
176
- <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'}/>
177
- </SideMenu.Body>
178
- <SideMenu.Footer>
179
- <div>
180
- {opened && renderModal()}
181
- <SideMenu.Item icon={<StackHDownIcon24Regular/>} caption={'СКБ Контур'} onClick={open}/>
182
- </div>
183
- <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
184
- <SideMenu.Avatar
185
- userName={'Ишматова Елена'}
186
- avatarUrl={getKonturAvatarUrl({
187
- userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
188
- })}
189
- >
190
- <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
191
- Личный кабинет
192
- </MenuItem>
193
- <MenuItem >Безопасность</MenuItem>
162
+ <SideMenu.SubItem caption={'Исходящие'}/>
163
+ <SideMenu.SubItem caption={'Внутренние'}/>
164
+ <SideMenu.SubItem caption={'Черновики'}/>
165
+ <SideMenu.SubItem caption={'Удаленные'}/>
166
+ <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
167
+ <SideMenu.SubItem caption={'Требуют обработки'}/>
168
+ <SideMenu.SubItem caption={'Обработанные'}/>
169
+ </SideMenu.Item>
170
+ <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
171
+ <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
172
+ <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
173
+ <SideMenu.SubItem caption={'Исходящие'}/>
174
+ <SideMenu.SubItem caption={'Внутренние'}/>
175
+ <SideMenu.SubItem caption={'Черновики'}/>
176
+ <SideMenu.SubItem caption={'Удаленные'}/>
177
+ </SideMenu.Item>
178
+ <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
194
179
  <SideMenu.Divider />
195
- <MenuItem >Выйти</MenuItem>
196
- </SideMenu.Avatar>
197
- </SideMenu.Footer>
198
- </SideMenu>
180
+ <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел'}/>
181
+ <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'}/>
182
+ </SideMenu.Body>
183
+ <SideMenu.Footer>
184
+ <div>
185
+ {opened && renderModal()}
186
+ <SideMenu.Item icon={<StackHDownIcon24Regular/>} caption={'СКБ Контур'} onClick={open}/>
187
+ </div>
188
+ <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
189
+ <SideMenu.Avatar
190
+ userName={'Ишматова Елена'}
191
+ avatarUrl={getKonturAvatarUrl({
192
+ userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
193
+ })}
194
+ >
195
+ <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
196
+ Личный кабинет
197
+ </MenuItem>
198
+ <MenuItem >Безопасность</MenuItem>
199
+ <MenuSeparator />
200
+ <MenuItem >Выйти</MenuItem>
201
+ </SideMenu.Avatar>
202
+ </SideMenu.Footer>
203
+ </SideMenu>
204
+ </ThemeContext.Provider>
199
205
  <div style={{ background: linearLightGradient, width: '100%', height: '100%' }}>
200
206
  {'Content '.repeat(100)}
201
207
  </div>
@@ -209,7 +215,7 @@ SideMenu с ручным управлением.
209
215
  import { useState } from 'react';
210
216
  import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
211
217
  import { Kontur, Ofd } from '@skbkontur/logos';
212
- import { MenuItem, Select, Switcher } from '@skbkontur/react-ui';
218
+ import { ThemeContext, ThemeFactory, MenuItem, Select, Switcher, MenuSeparator, THEME_2022 } from '@skbkontur/react-ui';
213
219
  import { SideMenu } from './index';
214
220
  import {
215
221
  DocTextIcon24Regular,
@@ -251,61 +257,63 @@ const items = [
251
257
  ];
252
258
 
253
259
  <div style={{height: '600px', display: 'flex', position: 'relative'}}>
260
+ <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' }, THEME_2022)}>
254
261
  <SideMenu value={activeItem} onValueChange={setActiveItem} isSeparatedMenu={isSeparatedMenu}>
255
- <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>} withWidget={false}/>
256
- <SideMenu.Body>
257
- <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию id=100'} marker={'новое'} id={'100'}>
258
- <SideMenu.SubItem caption={'Входящие id=110'} id={'110'}/>
259
- <SideMenu.SubItem caption={'Исходящие id=120'} marker={'2'} id={'120'}>
260
- <SideMenu.SubItem caption={'Исходящие1 id=121'} id={'121'}/>
261
- <SideMenu.SubItem caption={'Исходящие2 id=122'} id={'122'}/>
262
- </SideMenu.SubItem>
263
- <SideMenu.SubItem caption={'Внутренние id=130'} id={'130'}/>
264
- <SideMenu.SubItem caption={'Черновики id=140'} id={'140'}/>
265
- <SideMenu.SubItem caption={'Удаленные id=150'} id={'150'}/>
266
- <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
267
- <SideMenu.SubItem caption={'Требуют обработки id=160'} id={'160'}/>
268
- <SideMenu.SubItem caption={'Обработанные id=170'} id={'170'}/>
269
- </SideMenu.Item>
270
- <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты id=200'} id={'200'}/>
271
- <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения id=300'} marker={'5'} id={'300'}>
272
- <SideMenu.SubItem caption={'Входящие id=310'} marker={'5'} id={'310'}/>
273
- <SideMenu.SubItem caption={'Исходящие id=320'} id={'320'}/>
274
- <SideMenu.SubItem caption={'Внутренние id=330'} id={'330'}/>
275
- <SideMenu.SubItem caption={'Черновики id=340'} id={'340'}/>
276
- <SideMenu.SubItem caption={'Удаленные id=350'} id={'350'}/>
277
- </SideMenu.Item>
278
- <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная id=400'} id={'400'}/>
279
- <SideMenu.Divider/>
280
- <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел id=500'} id={'500'}/>
281
- <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность id=600'} id={'600'}/>
282
- <SideMenu.Link href={'https://google.com'} icon={<AttachLinkIcon24Regular />} caption={'Ссылка'} target={'_blank'} />
283
- </SideMenu.Body>
284
- <SideMenu.Footer>
285
- <SideMenu.Dropdown icon={<StackHDownIcon24Regular/>}>
286
- <MenuItem>СКБ Контур</MenuItem>
287
- <MenuItem>Сириус Базинес</MenuItem>
288
- <MenuItem>Контур НТТ</MenuItem>
289
- <MenuItem>Промэлектроника</MenuItem>
290
- <SideMenu.Divider/>
291
- <MenuItem>Список организаций</MenuItem>
292
- </SideMenu.Dropdown>
293
- <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
294
- <SideMenu.Avatar
295
- userName={'Ишматова Елена'}
296
- avatarUrl={getKonturAvatarUrl({
297
- userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
298
- })}
299
- >
300
- <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
301
- Личный кабинет
302
- </MenuItem>
303
- <MenuItem >Безопасность</MenuItem>
262
+ <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>} withWidget={false}/>
263
+ <SideMenu.Body>
264
+ <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию id=100'} marker={'2'} id={'100'}>
265
+ <SideMenu.SubItem caption={'Входящие id=110'} id={'110'}/>
266
+ <SideMenu.SubItem caption={'Исходящие id=120'} marker={'2'} id={'120'}>
267
+ <SideMenu.SubItem caption={'Исходящие1 id=121'} id={'121'}/>
268
+ <SideMenu.SubItem caption={'Исходящие2 id=122'} id={'122'}/>
269
+ </SideMenu.SubItem>
270
+ <SideMenu.SubItem caption={'Внутренние id=130'} id={'130'}/>
271
+ <SideMenu.SubItem caption={'Черновики id=140'} id={'140'}/>
272
+ <SideMenu.SubItem caption={'Удаленные id=150'} id={'150'}/>
273
+ <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
274
+ <SideMenu.SubItem caption={'Требуют обработки id=160'} id={'160'}/>
275
+ <SideMenu.SubItem caption={'Обработанные id=170'} id={'170'}/>
276
+ </SideMenu.Item>
277
+ <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты id=200'} id={'200'}/>
278
+ <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения id=300'} marker={'5'} id={'300'}>
279
+ <SideMenu.SubItem caption={'Входящие id=310'} marker={'5'} id={'310'}/>
280
+ <SideMenu.SubItem caption={'Исходящие id=320'} id={'320'}/>
281
+ <SideMenu.SubItem caption={'Внутренние id=330'} id={'330'}/>
282
+ <SideMenu.SubItem caption={'Черновики id=340'} id={'340'}/>
283
+ <SideMenu.SubItem caption={'Удаленные id=350'} id={'350'}/>
284
+ </SideMenu.Item>
285
+ <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная id=400'} id={'400'}/>
304
286
  <SideMenu.Divider />
305
- <MenuItem >Выйти</MenuItem>
306
- </SideMenu.Avatar>
307
- </SideMenu.Footer>
308
- </SideMenu>
287
+ <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел id=500'} id={'500'}/>
288
+ <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность id=600'} id={'600'}/>
289
+ <SideMenu.Link href={'https://google.com'} icon={<AttachLinkIcon24Regular />} caption={'Ссылка'} target={'_blank'} />
290
+ </SideMenu.Body>
291
+ <SideMenu.Footer>
292
+ <SideMenu.Dropdown icon={<StackHDownIcon24Regular/>}>
293
+ <MenuItem>СКБ Контур</MenuItem>
294
+ <MenuItem>Сириус Базинес</MenuItem>
295
+ <MenuItem>Контур НТТ</MenuItem>
296
+ <MenuItem>Промэлектроника</MenuItem>
297
+ <MenuSeparator />
298
+ <MenuItem>Список организаций</MenuItem>
299
+ </SideMenu.Dropdown>
300
+ <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
301
+ <SideMenu.Avatar
302
+ userName={'Ишматова Елена'}
303
+ avatarUrl={getKonturAvatarUrl({
304
+ userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
305
+ })}
306
+ >
307
+ <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
308
+ Личный кабинет
309
+ </MenuItem>
310
+ <MenuItem >Безопасность</MenuItem>
311
+ <MenuSeparator />
312
+ <MenuItem >Выйти</MenuItem>
313
+ </SideMenu.Avatar>
314
+ </SideMenu.Footer>
315
+ </SideMenu>
316
+ </ThemeContext.Provider>
309
317
  <div style={isSeparatedMenu? {position: 'absolute', left: '464px'}:{}}>
310
318
  <p>Active Item: {activeItem}</p>
311
319
  <Select items={items} value={activeItem} onValueChange={setActiveItem} />
@@ -342,7 +350,7 @@ const items = [
342
350
  import { useState } from 'react';
343
351
  import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
344
352
  import { Kontur, Ofd } from '@skbkontur/logos';
345
- import { MenuItem, Select, Switcher } from '@skbkontur/react-ui';
353
+ import { ThemeContext, ThemeFactory, MenuItem, Select, Switcher, MenuSeparator, THEME_2022 } from '@skbkontur/react-ui';
346
354
  import { SideMenu } from './index';
347
355
  import {
348
356
  DocTextIcon24Regular,
@@ -389,60 +397,62 @@ const items = [
389
397
  ];
390
398
 
391
399
  <div style={{height: '600px', display: 'flex', position: 'relative'}}>
400
+ <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' }, THEME_2022)}>
392
401
  <SideMenu value={activeItem} onValueChange={setActiveItem} isSeparatedMenu={isSeparatedMenu}>
393
- <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>} withWidget={false}/>
394
- <SideMenu.Body>
395
- <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию'} marker={'новое'} id={'documents'}>
396
- <SideMenu.SubItem caption={'Входящие'} id={'my-id-for-incoming-documents'}/>
397
- <SideMenu.SubItem caption={'Исходящие'} marker={'2'}>
398
- <SideMenu.SubItem caption={'Исходящие1'}/>
399
- <SideMenu.SubItem caption={'Исходящие2'}/>
400
- </SideMenu.SubItem>
401
- <SideMenu.SubItem caption={'Внутренние'}/>
402
- <SideMenu.SubItem caption={'Черновики'}/>
403
- <SideMenu.SubItem caption={'Удаленные'}/>
404
- <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
405
- <SideMenu.SubItem caption={'Требуют обработки'}/>
406
- <SideMenu.SubItem caption={'Обработанные'}/>
407
- </SideMenu.Item>
408
- <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
409
- <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
410
- <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
411
- <SideMenu.SubItem caption={'Исходящие'}/>
412
- <SideMenu.SubItem caption={'Внутренние'}/>
413
- <SideMenu.SubItem caption={'Черновики'}/>
414
- <SideMenu.SubItem caption={'Удаленные'}/>
415
- </SideMenu.Item>
416
- <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
417
- <SideMenu.Divider/>
418
- <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел'}/>
419
- <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'} id={'600'}/>
420
- </SideMenu.Body>
421
- <SideMenu.Footer>
422
- <SideMenu.Organisations icon={<StackHDownIcon24Regular/>}>
423
- <MenuItem>СКБ Контур</MenuItem>
424
- <MenuItem>Сириус Базинес</MenuItem>
425
- <MenuItem>Контур НТТ</MenuItem>
426
- <MenuItem>Промэлектроника</MenuItem>
427
- <SideMenu.Divider/>
428
- <MenuItem>Список организаций</MenuItem>
429
- </SideMenu.Organisations>
430
- <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
431
- <SideMenu.Avatar
432
- userName={'Ишматова Елена'}
433
- avatarUrl={getKonturAvatarUrl({
434
- userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
435
- })}
436
- >
437
- <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
438
- Личный кабинет
439
- </MenuItem>
440
- <MenuItem >Безопасность</MenuItem>
402
+ <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>} withWidget={false}/>
403
+ <SideMenu.Body>
404
+ <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию'} marker={'2'} id={'documents'}>
405
+ <SideMenu.SubItem caption={'Входящие'} id={'my-id-for-incoming-documents'}/>
406
+ <SideMenu.SubItem caption={'Исходящие'} marker={'2'}>
407
+ <SideMenu.SubItem caption={'Исходящие1'}/>
408
+ <SideMenu.SubItem caption={'Исходящие2'}/>
409
+ </SideMenu.SubItem>
410
+ <SideMenu.SubItem caption={'Внутренние'}/>
411
+ <SideMenu.SubItem caption={'Черновики'}/>
412
+ <SideMenu.SubItem caption={'Удаленные'}/>
413
+ <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
414
+ <SideMenu.SubItem caption={'Требуют обработки'}/>
415
+ <SideMenu.SubItem caption={'Обработанные'}/>
416
+ </SideMenu.Item>
417
+ <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
418
+ <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
419
+ <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
420
+ <SideMenu.SubItem caption={'Исходящие'}/>
421
+ <SideMenu.SubItem caption={'Внутренние'}/>
422
+ <SideMenu.SubItem caption={'Черновики'}/>
423
+ <SideMenu.SubItem caption={'Удаленные'}/>
424
+ </SideMenu.Item>
425
+ <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
441
426
  <SideMenu.Divider />
442
- <MenuItem >Выйти</MenuItem>
443
- </SideMenu.Avatar>
444
- </SideMenu.Footer>
445
- </SideMenu>
427
+ <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел'}/>
428
+ <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'} id={'600'}/>
429
+ </SideMenu.Body>
430
+ <SideMenu.Footer>
431
+ <SideMenu.Organisations icon={<StackHDownIcon24Regular/>}>
432
+ <MenuItem>СКБ Контур</MenuItem>
433
+ <MenuItem>Сириус Базинес</MenuItem>
434
+ <MenuItem>Контур НТТ</MenuItem>
435
+ <MenuItem>Промэлектроника</MenuItem>
436
+ <MenuSeparator />
437
+ <MenuItem>Список организаций</MenuItem>
438
+ </SideMenu.Organisations>
439
+ <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
440
+ <SideMenu.Avatar
441
+ userName={'Ишматова Елена'}
442
+ avatarUrl={getKonturAvatarUrl({
443
+ userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
444
+ })}
445
+ >
446
+ <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
447
+ Личный кабинет
448
+ </MenuItem>
449
+ <MenuItem >Безопасность</MenuItem>
450
+ <MenuSeparator />
451
+ <MenuItem >Выйти</MenuItem>
452
+ </SideMenu.Avatar>
453
+ </SideMenu.Footer>
454
+ </SideMenu>
455
+ </ThemeContext.Provider>
446
456
  <div style={isSeparatedMenu? {position: 'absolute', left: '464px'}:{}}>
447
457
  <p>Active Item: {activeItem}</p>
448
458
  <Select items={items} value={activeItem} onValueChange={setActiveItem} />
@@ -590,14 +600,14 @@ import {
590
600
  DocTextIcon24Regular,
591
601
  SettingsGearIcon24Regular,
592
602
  } from '@skbkontur/icons';
593
- import { ThemeContext, ThemeFactory } from "@skbkontur/react-ui";
603
+ import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
594
604
 
595
605
  <div style={{ height: '200px', position: 'relative' }}>
596
- <ThemeContext.Provider value={ThemeFactory.create({ sideMenuWidth: '300px', sideMenuIconSize: '32px' })}>
606
+ <ThemeContext.Provider value={ThemeFactory.create({ sideMenuWidth: '300px', sideMenuIconSize: '32px', sideMenuProductColor: '#64b419' })}>
597
607
  <SideMenu disableSwipe={false}>
598
608
  <SideMenu.Header konturLogo={<Kontur />} productLogo={<Ofd />} />
599
609
  <SideMenu.Body>
600
- <SideMenu.Item icon={<DocTextIcon24Regular />} caption={'Документы к подписанию'} marker={'новое'} />
610
+ <SideMenu.Item icon={<DocTextIcon24Regular />} caption={'Документы к подписанию'} marker={'2'} />
601
611
  </SideMenu.Body>
602
612
  <SideMenu.Footer>
603
613
  <SideMenu.Item icon={<SettingsGearIcon24Regular />} caption={'Реквизиты и настройки'} />
@@ -625,7 +635,7 @@ import { ThemeContext, ThemeFactory } from "@skbkontur/react-ui";
625
635
  sideMenuLineHeight: string;
626
636
  sideMenuLargeLineHeight: string;
627
637
  sideMenuProductColor: string;
628
- sideMenuFixedSeparatorColor: string;
638
+ sideMenuDividerBgColor: string;
629
639
  sideMenuDesktopMediaQuery: string;
630
640
  sideMenuNarrowDesktopMediaQuery: string;
631
641
  sideMenuTabletMediaQuery: string;
package/internal/themes/SideMenuTheme.d.ts CHANGED
@@ -14,7 +14,6 @@ export declare class SideMenuTheme extends SideMenuTheme_base {
14
14
  static sideMenuLineHeight: string;
15
15
  static sideMenuLargeLineHeight: string;
16
16
  static sideMenuProductColor: string;
17
- static sideMenuFixedSeparatorColor: string;
18
17
  static sideMenuDesktopMediaQuery: string;
19
18
  static sideMenuNarrowDesktopMediaQuery: string;
20
19
  static sideMenuTabletMediaQuery: string;
@@ -62,21 +61,28 @@ export declare class SideMenuTheme extends SideMenuTheme_base {
62
61
  static sideMenuItemContentLargePaddingY: string;
63
62
  static sideMenuSubItemContentPaddingY: string;
64
63
  static sideMenuSubItemContentLargePaddingY: string;
65
- static sideMenuItemContentLargeMultilinePaddingY: string;
64
+ static sideMenuItemContentLargeMultilinePaddingTop: string;
65
+ static sideMenuItemContentLargeMultilinePaddingBottom: string;
66
+ static sideMenuItemContentMultilinePaddingTop: string;
67
+ static sideMenuItemContentMultilinePaddingBottom: string;
66
68
  static sideMenuItemContentPaddingYForTouchScreens: string;
67
69
  static sideMenuSubItemContentPaddingYForTouchScreens: string;
68
70
  static sideMenuMarkerPaddingX: string;
71
+ static sideMenuMarkerPaddingY: string;
69
72
  static get sideMenuMarkerBg(): string;
70
73
  static sideMenuMarkerColor: string;
74
+ static get sideMenuMarkerSubItemColor(): string;
71
75
  static sideMenuMarkerMarginRight: string;
72
76
  static sideMenuMarkerFontWeight: string;
77
+ static sideMenuSubItemMarkerFontWeight: string;
73
78
  static sideMenuMarkerMultilineMarginTop: string;
79
+ static sideMenuMarkerLineHeight: string;
74
80
  static sideMenuBurgerMarginRight: string;
75
81
  static sideMenuItemBorderRadius: string;
76
82
  static sideMenuItemHoverBg: string;
77
83
  static sideMenuItemActiveBg: string;
78
- static sideMenuSubItemWithSeparatedSubMenuHoverBg: string;
79
- static sideMenuSubItemWithSeparatedSubMenuActiveBg: string;
84
+ static get sideMenuSubItemWithSeparatedSubMenuHoverBg(): string;
85
+ static get sideMenuSubItemWithSeparatedSubMenuActiveBg(): string;
80
86
  static sideMenuFocusedItemBoxShadowInset: string;
81
87
  static sideMenuFocusedItemBoxShadowOffsetX: string;
82
88
  static sideMenuFocusedItemBoxShadowOffsetY: string;
@@ -84,8 +90,9 @@ export declare class SideMenuTheme extends SideMenuTheme_base {
84
90
  static sideMenuFocusedItemBoxShadowSpreadRadius: string;
85
91
  static sideMenuFocusedItemBoxShadowColor: string;
86
92
  static get sideMenuFocusedItemBoxShadow(): string;
87
- static sideMenuDividerBgColor: string;
88
93
  static sideMenuDividerMarginX: string;
94
+ static sideMenuDividerMarginY: string;
95
+ static sideMenuDividerBgColor: string;
89
96
  static sideMenuNestedMenuPaddingLeft: string;
90
97
  static sideMenuRightBorderWidth: string;
91
98
  static get sideMenuRightBorderColor(): string;
package/internal/themes/SideMenuTheme.js CHANGED
@@ -56,6 +56,27 @@ var SideMenuTheme = /** @class */ (function (_super) {
56
56
  enumerable: false,
57
57
  configurable: true
58
58
  });
59
+ Object.defineProperty(SideMenuTheme, "sideMenuMarkerSubItemColor", {
60
+ get: function () {
61
+ return this.sideMenuIconSubItemColor;
62
+ },
63
+ enumerable: false,
64
+ configurable: true
65
+ });
66
+ Object.defineProperty(SideMenuTheme, "sideMenuSubItemWithSeparatedSubMenuHoverBg", {
67
+ get: function () {
68
+ return this.sideMenuBgColor;
69
+ },
70
+ enumerable: false,
71
+ configurable: true
72
+ });
73
+ Object.defineProperty(SideMenuTheme, "sideMenuSubItemWithSeparatedSubMenuActiveBg", {
74
+ get: function () {
75
+ return this.sideMenuBgColor;
76
+ },
77
+ enumerable: false,
78
+ configurable: true
79
+ });
59
80
  Object.defineProperty(SideMenuTheme, "sideMenuFocusedItemBoxShadow", {
60
81
  get: function () {
61
82
  return this.sideMenuFocusedItemBoxShadowInset + " " + this.sideMenuFocusedItemBoxShadowOffsetX + " " + this.sideMenuFocusedItemBoxShadowOffsetY + " " + this.sideMenuFocusedItemBoxShadowBlurRadius + " " + this.sideMenuFocusedItemBoxShadowSpreadRadius + " " + this.sideMenuFocusedItemBoxShadowColor;
@@ -72,14 +93,14 @@ var SideMenuTheme = /** @class */ (function (_super) {
72
93
  });
73
94
  Object.defineProperty(SideMenuTheme, "sideMenuFooterDividerColor", {
74
95
  get: function () {
75
- return this.sideMenuFixedSeparatorColor;
96
+ return this.sideMenuDividerBgColor;
76
97
  },
77
98
  enumerable: false,
78
99
  configurable: true
79
100
  });
80
101
  Object.defineProperty(SideMenuTheme, "sideMenuHeaderDividerColor", {
81
102
  get: function () {
82
- return this.sideMenuFixedSeparatorColor;
103
+ return this.sideMenuDividerBgColor;
83
104
  },
84
105
  enumerable: false,
85
106
  configurable: true
@@ -89,7 +110,7 @@ var SideMenuTheme = /** @class */ (function (_super) {
89
110
  SideMenuTheme.sideMenuWidthForTouchScreens = '328px';
90
111
  SideMenuTheme.sideMenuMinimizedWidth = '72px';
91
112
  SideMenuTheme.sideMenuMarginX = '16px';
92
- SideMenuTheme.sideMenuBgColor = '#f6f6f6';
113
+ SideMenuTheme.sideMenuBgColor = '#f0f0f0';
93
114
  SideMenuTheme.sideMenuBoxShadowOffsetX = '4px';
94
115
  SideMenuTheme.sideMenuBoxShadowOffsetY = '4px';
95
116
  SideMenuTheme.sideMenuBoxShadowBlurRadius = '24px';
@@ -97,7 +118,6 @@ var SideMenuTheme = /** @class */ (function (_super) {
97
118
  SideMenuTheme.sideMenuLineHeight = '20px';
98
119
  SideMenuTheme.sideMenuLargeLineHeight = '22px';
99
120
  SideMenuTheme.sideMenuProductColor = '#2291ff';
100
- SideMenuTheme.sideMenuFixedSeparatorColor = '#e6e6e6';
101
121
  SideMenuTheme.sideMenuDesktopMediaQuery = '(min-width: 1200px)';
102
122
  SideMenuTheme.sideMenuNarrowDesktopMediaQuery = '(min-width: 992px)';
103
123
  SideMenuTheme.sideMenuTabletMediaQuery = '(min-width: 768px)';
@@ -145,7 +165,7 @@ var SideMenuTheme = /** @class */ (function (_super) {
145
165
  SideMenuTheme.sideMenuIconSubItemPaddingRight = '0';
146
166
  SideMenuTheme.sideMenuIconSubItemMinHeight = '20px';
147
167
  SideMenuTheme.sideMenuIconSubItemLineHeight = '16px';
148
- SideMenuTheme.sideMenuIconSubItemColor = '#858585';
168
+ SideMenuTheme.sideMenuIconSubItemColor = '#757575';
149
169
  SideMenuTheme.sideMenuIconLargeSubItemMinHeight = '22px';
150
170
  SideMenuTheme.sideMenuIconWithSeparatedSubMenuSubItemPaddingLeft = '4px';
151
171
  //#endregion
@@ -154,26 +174,30 @@ var SideMenuTheme = /** @class */ (function (_super) {
154
174
  SideMenuTheme.sideMenuItemContentLargePaddingY = '9px';
155
175
  SideMenuTheme.sideMenuSubItemContentPaddingY = '4px';
156
176
  SideMenuTheme.sideMenuSubItemContentLargePaddingY = '5px';
157
- SideMenuTheme.sideMenuItemContentLargeMultilinePaddingY = '5px';
177
+ SideMenuTheme.sideMenuItemContentLargeMultilinePaddingTop = '9px';
178
+ SideMenuTheme.sideMenuItemContentLargeMultilinePaddingBottom = '13px';
179
+ SideMenuTheme.sideMenuItemContentMultilinePaddingTop = '6px';
180
+ SideMenuTheme.sideMenuItemContentMultilinePaddingBottom = '10px';
158
181
  SideMenuTheme.sideMenuItemContentPaddingYForTouchScreens = '8px';
159
182
  SideMenuTheme.sideMenuSubItemContentPaddingYForTouchScreens = '9px';
160
183
  //#endregion
161
184
  // #region Marker
162
185
  SideMenuTheme.sideMenuMarkerPaddingX = '6px';
186
+ SideMenuTheme.sideMenuMarkerPaddingY = '0px';
163
187
  SideMenuTheme.sideMenuMarkerColor = '#fff';
164
188
  SideMenuTheme.sideMenuMarkerMarginRight = '8px';
165
- SideMenuTheme.sideMenuMarkerFontWeight = '700';
189
+ SideMenuTheme.sideMenuMarkerFontWeight = '600';
190
+ SideMenuTheme.sideMenuSubItemMarkerFontWeight = '400';
166
191
  SideMenuTheme.sideMenuMarkerMultilineMarginTop = '4px';
192
+ SideMenuTheme.sideMenuMarkerLineHeight = '20px';
167
193
  //#endregion
168
194
  // #region Burger
169
195
  SideMenuTheme.sideMenuBurgerMarginRight = '8px';
170
196
  //#endregion
171
197
  // #region MenuItem
172
198
  SideMenuTheme.sideMenuItemBorderRadius = '8px';
173
- SideMenuTheme.sideMenuItemHoverBg = 'rgba(255, 255, 255, 0.48)';
199
+ SideMenuTheme.sideMenuItemHoverBg = '#E6E6E6';
174
200
  SideMenuTheme.sideMenuItemActiveBg = '#fff';
175
- SideMenuTheme.sideMenuSubItemWithSeparatedSubMenuHoverBg = '#f6f6f6';
176
- SideMenuTheme.sideMenuSubItemWithSeparatedSubMenuActiveBg = '#f2f2f2';
177
201
  SideMenuTheme.sideMenuFocusedItemBoxShadowInset = 'inset';
178
202
  SideMenuTheme.sideMenuFocusedItemBoxShadowOffsetX = '0';
179
203
  SideMenuTheme.sideMenuFocusedItemBoxShadowOffsetY = '0';
@@ -182,8 +206,9 @@ var SideMenuTheme = /** @class */ (function (_super) {
182
206
  SideMenuTheme.sideMenuFocusedItemBoxShadowColor = '#1c7edf';
183
207
  //#endregion
184
208
  //#region Divider
185
- SideMenuTheme.sideMenuDividerBgColor = '#d6d6d6';
186
209
  SideMenuTheme.sideMenuDividerMarginX = '8px';
210
+ SideMenuTheme.sideMenuDividerMarginY = '4px';
211
+ SideMenuTheme.sideMenuDividerBgColor = 'rgba(0,0,0, 0.1)';
187
212
  //#endregion
188
213
  //#region NestedMenu
189
214
  SideMenuTheme.sideMenuNestedMenuPaddingLeft = '16px';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/side-menu",
3
- "version": "0.14.8",
3
+ "version": "1.0.0",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "registry": "https://registry.npmjs.org/"
package/src/SideMenuBody/SideMenuBody.js CHANGED
@@ -9,6 +9,7 @@ import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
9
9
  import { ScrollContainer, ScrollContainerDataTids } from '@skbkontur/react-ui';
10
10
  import { mergeRefs } from '@skbkontur/react-ui/lib/utils';
11
11
  import { jsStylesForSideMenu } from '../SideMenu/SideMenu.styles';
12
+ import { burgerTransitionDuration } from '../SideMenu/SideMenu';
12
13
  var SideMenuBodyInner = forwardRef(function (_a, ref) {
13
14
  var _b, _c;
14
15
  var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
@@ -24,13 +25,14 @@ var SideMenuBodyInner = forwardRef(function (_a, ref) {
24
25
  }
25
26
  };
26
27
  useEffect(function () {
28
+ var delay = context.isMobile ? burgerTransitionDuration : 50;
27
29
  setTimeout(function () {
28
30
  var _a, _b;
29
31
  // @ts-expect-error: accessing private method
30
32
  (_a = context.setHasScrollBar) === null || _a === void 0 ? void 0 : _a.call(context, (_b = scrollContainerRef.current) === null || _b === void 0 ? void 0 : _b.hasScrollBar('y'));
31
- }, 50);
33
+ }, delay);
32
34
  setScrollContainerInnerPosition();
33
- }, [context.activeMenuItem, context.isShown]);
35
+ }, [context.activeMenuItem, context.isShown, context.isBeingTransitioned && context.isMobile]);
34
36
  var theme = getSideMenuTheme(useContext(ThemeContext));
35
37
  if (context.isShown) {
36
38
  return (React.createElement("div", { ref: mergeRefs([ref, sideMenuBodyRef]), className: cx((_b = {}, _b[jsStyles.root(theme)] = true, _b), className) },
package/src/SideMenuDivider/SideMenuDivider.js CHANGED
@@ -1,11 +1,14 @@
1
1
  import { __assign, __rest } from "tslib";
2
- import React, { forwardRef } from 'react';
2
+ import React, { forwardRef, useContext } from 'react';
3
3
  import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
4
4
  import { jsStyles } from './SideMenuDivider.styles';
5
+ import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
6
+ import { ThemeContext } from '@skbkontur/react-ui';
5
7
  var SideMenuDividerInner = forwardRef(function (_a, ref) {
6
8
  var _b;
7
9
  var className = _a.className, rest = __rest(_a, ["className"]);
8
- return React.createElement("hr", __assign({ className: cx((_b = {}, _b[jsStyles.root()] = true, _b), className), ref: ref }, rest));
10
+ var theme = getSideMenuTheme(useContext(ThemeContext));
11
+ return React.createElement("hr", __assign({ className: cx((_b = {}, _b[jsStyles.root(theme)] = true, _b), className), ref: ref }, rest));
9
12
  });
10
13
  SideMenuDividerInner.displayName = 'SideMenuDivider';
11
14
  /**
package/src/SideMenuDivider/SideMenuDivider.md CHANGED
@@ -4,4 +4,5 @@
4
4
  {
5
5
  sideMenuDividerBgColor: string;
6
6
  sideMenuDividerMarginX: string;
7
+ sideMenuDividerMarginY: string;
7
8
  }
package/src/SideMenuDivider/SideMenuDivider.styles.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
1
2
  export declare const jsStyles: {
2
- root(): string;
3
+ root(t: SideMenuTheme): string;
3
4
  };
package/src/SideMenuDivider/SideMenuDivider.styles.js CHANGED
@@ -2,8 +2,8 @@ import { __makeTemplateObject } from "tslib";
2
2
  import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
3
3
  import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
4
4
  var styles = {
5
- root: function () {
6
- return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: #ebebeb;\n height: 1px;\n border: none;\n margin: 4px 12px 4px 32px;\n "], ["\n background: #ebebeb;\n height: 1px;\n border: none;\n margin: 4px 12px 4px 32px;\n "])));
5
+ root: function (t) {
6
+ return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 1px;\n border: none;\n background: ", ";\n margin: ", " ", ";\n "], ["\n height: 1px;\n border: none;\n background: ", ";\n margin: ", " ", ";\n "])), t.sideMenuDividerBgColor, t.sideMenuDividerMarginY, t.sideMenuDividerMarginX);
7
7
  },
8
8
  };
9
9
  export var jsStyles = memoizeStyle(styles);
package/src/SideMenuFooter/SideMenuFooter.styles.js CHANGED
@@ -6,7 +6,7 @@ var styles = {
6
6
  return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex-grow: 0;\n position: sticky;\n bottom: 0;\n padding-bottom: ", ";\n padding-top: ", ";\n margin: 0 ", ";\n "], ["\n flex-grow: 0;\n position: sticky;\n bottom: 0;\n padding-bottom: ", ";\n padding-top: ", ";\n margin: 0 ", ";\n "])), t.sideMenuFooterPaddingBottom, t.sideMenuFooterPaddingTop, t.sideMenuMarginX);
7
7
  },
8
8
  rootFixed: function (t) {
9
- return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-shadow: inset 0 1px 0 ", ";\n "], ["\n box-shadow: inset 0 1px 0 ", ";\n "])), t.sideMenuFooterDividerColor);
9
+ return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-shadow: 0 -1px 0 ", ";\n "], ["\n box-shadow: 0 -1px 0 ", ";\n "])), t.sideMenuFooterDividerColor);
10
10
  },
11
11
  rootTransitioned: function () {
12
12
  return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: static;\n "], ["\n position: static;\n "])));
package/src/SideMenuHeader/SideMenuHeader.styles.js CHANGED
@@ -12,10 +12,10 @@ var styles = {
12
12
  return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: transparent;\n "], ["\n background: transparent;\n "])));
13
13
  },
14
14
  rootWithSeparatedMenuShown: function (t) {
15
- return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), t.sideMenuSeparatedSubMenuBgColor);
15
+ return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background: ", ";\n z-index: 9000;\n "], ["\n background: ", ";\n z-index: 9000;\n "])), t.sideMenuSeparatedSubMenuBgColor);
16
16
  },
17
17
  fixedRoot: function (t) {
18
- return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-shadow: inset 0 -1px 0 ", ";\n "], ["\n box-shadow: inset 0 -1px 0 ", ";\n "])), t.sideMenuHeaderDividerColor);
18
+ return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-shadow: 0 1px 0 ", ";\n "], ["\n box-shadow: 0 1px 0 ", ";\n "])), t.sideMenuHeaderDividerColor);
19
19
  },
20
20
  };
21
21
  export var jsStyles = memoizeStyle(styles);
package/src/SideMenuItem/SideMenuItem.md CHANGED
@@ -19,7 +19,10 @@
19
19
  sideMenuItemContentLargePaddingY: string;
20
20
  sideMenuSubItemContentPaddingY: string;
21
21
  sideMenuSubItemContentLargePaddingY: string;
22
- sideMenuItemContentLargeMultilinePaddingY: string;
22
+ sideMenuItemContentLargeMultilinePaddingTop: string;
23
+ sideMenuItemContentLargeMultilinePaddingBottom: string;
24
+ sideMenuItemContentMultilinePaddingTop: string;
25
+ sideMenuItemContentMultilinePaddingBottom: string;
23
26
  sideMenuItemContentPaddingYForTouchScreens: string;
24
27
  sideMenuSubItemContentPaddingYForTouchScreens: string;
25
28
  //#endregion
@@ -53,11 +56,15 @@
53
56
  //#endregion
54
57
  // #region Marker
55
58
  sideMenuMarkerPaddingX: string;
59
+ sideMenuMarkerPaddingY: string;
56
60
  sideMenuMarkerBg: string;
57
61
  sideMenuMarkerColor: string;
62
+ sideMenuMarkerSubItemColor: string;
58
63
  sideMenuMarkerMarginRight: string;
59
64
  sideMenuMarkerFontWeight: string;
65
+ sideMenuSubItemMarkerFontWeight: string;
60
66
  sideMenuMarkerMultilineMarginTop: string;
67
+ sideMenuMarkerLineHeight: string;
61
68
  //#endregion
62
69
  }
63
70
  ```
package/src/internal/InnerBody.js CHANGED
@@ -1,10 +1,7 @@
1
1
  import { __assign } from "tslib";
2
2
  import React, { isValidElement, useContext, useEffect, useRef, useState } from 'react';
3
- import { jsStyles } from './InnerBody.styles';
4
3
  import { SideMenuContext } from '../SideMenuContext';
5
4
  import { getAllParents, getChildrenIdArray, getElementsChildren, getItemId, isClickableElement, } from '../../lib/utils/scripts';
6
- import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
7
- import { ThemeContext } from '@skbkontur/react-ui';
8
5
  /**
9
6
  * Внутренняя часть SideMenuBody
10
7
  *
@@ -15,7 +12,6 @@ var InnerBody = function (_a) {
15
12
  var context = useContext(SideMenuContext);
16
13
  var _b = useState([]), parents = _b[0], setParents = _b[1];
17
14
  var flattedArrayOfAllElements = useRef([]);
18
- var theme = getSideMenuTheme(useContext(ThemeContext));
19
15
  var getFlattedArrayOfAllElements = function () {
20
16
  var levelIndex = 0;
21
17
  React.Children.map(children, function (child) {
@@ -52,12 +48,6 @@ var InnerBody = function (_a) {
52
48
  var levelIndex = 0;
53
49
  return (React.createElement(SideMenuContext.Provider, { value: __assign({ openedParents: parents, flattedArrayOfAllElements: flattedArrayOfAllElements.current }, context) }, React.Children.map(children, function (child) {
54
50
  if (React.isValidElement(child)) {
55
- // @ts-expect-error: accessing private property
56
- if ((child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'SideMenuDivider') {
57
- return React.cloneElement(child, {
58
- className: jsStyles.divider(theme),
59
- });
60
- }
61
51
  if (
62
52
  // @ts-expect-error: accessing private property
63
53
  isClickableElement(child.type.__KONTUR_REACT_UI__)) {
package/src/internal/ItemContent/Caption.js CHANGED
@@ -56,7 +56,7 @@ export var Caption = forwardRef(function (_a, ref) {
56
56
  _c[jsStyles.captionDropdown()] = _isDropdown,
57
57
  _c[jsStyles.captionTruncated()] = _isDropdown && (!_isAvatar || isAvatarCaptionSingleWord(caption, _isAvatar)),
58
58
  _c[jsStyles.captionSubItem(theme)] = _isSubMenu,
59
- _c[jsStyles.captionSubItemSeparatedMenuTopLevel()] = isSeparatedMenu && !_isNestedSubMenu && _isSubMenu,
59
+ _c[jsStyles.captionSubItemSeparatedMenuTopLevel()] = isSeparatedMenu && !_isNestedSubMenu && _isSubMenu && !hasIcon,
60
60
  _c[jsStyles.captionNestedItemSeparatedMenu()] = isSeparatedMenu && _isNestedSubMenu && !hasIcon,
61
61
  _c[jsStyles.captionWithoutItemIcon()] = !hasIcon && !isSeparatedMenu,
62
62
  _c[jsStyles.captionSubItemWithoutColumnIcons()] = _isSubMenu && isSeparatedMenu && !hasSubIcons,
package/src/internal/ItemContent/Icon.js CHANGED
@@ -37,6 +37,5 @@ export var Icon = function (_a) {
37
37
  _b[jsStyles.rootSubItemSeparatedMenu(theme)] = isSeparatedMenu && _isSubMenu,
38
38
  _b[jsStyles.rootSubItemLarge(theme)] = _isSubMenu && size === 'large',
39
39
  _b[jsStyles.rootBackButton(theme)] = _isBackButton,
40
- _b[jsStyles.rootAvatar()] = _isAvatar,
41
40
  _b)) }, renderIcon()));
42
41
  };
package/src/internal/ItemContent/Icon.styles.d.ts CHANGED
@@ -7,5 +7,4 @@ export declare const jsStyles: {
7
7
  rootSubItem(t: SideMenuTheme): string;
8
8
  rootSubItemSeparatedMenu(t: SideMenuTheme): string;
9
9
  rootBackButton(t: SideMenuTheme): string;
10
- rootAvatar(): string;
11
10
  };
package/src/internal/ItemContent/Icon.styles.js CHANGED
@@ -6,10 +6,10 @@ var styles = {
6
6
  return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin: ", " ", ";\n min-height: ", ";\n line-height: ", ";\n flex-shrink: 0;\n box-sizing: content-box;\n "], ["\n display: flex;\n align-items: center;\n margin: ", " ", ";\n min-height: ", ";\n line-height: ", ";\n flex-shrink: 0;\n box-sizing: content-box;\n "])), t.sideMenuIconMarginY, t.sideMenuIconMarginX, t.sideMenuIconMinHeight, t.sideMenuIconLineHeight);
7
7
  },
8
8
  rootMultiline: function () {
9
- return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-self: flex-start;\n "], ["\n align-self: flex-start;\n "])));
9
+ return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-self: flex-start;\n margin-top: -2px;\n "], ["\n align-self: flex-start;\n margin-top: -2px;\n "])));
10
10
  },
11
11
  rootLarge: function (t) {
12
- return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n min-height: ", ";\n line-height: ", ";\n "], ["\n min-height: ", ";\n line-height: ", ";\n "])), t.sideMenuIconLargeMinHeight, t.sideMenuIconLargeLineHeight);
12
+ return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n min-height: ", ";\n line-height: ", ";\n margin-top: 0;\n "], ["\n min-height: ", ";\n line-height: ", ";\n margin-top: 0;\n "])), t.sideMenuIconLargeMinHeight, t.sideMenuIconLargeLineHeight);
13
13
  },
14
14
  rootSubItemLarge: function (t) {
15
15
  return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n min-height: ", ";\n "], ["\n min-height: ", ";\n "])), t.sideMenuIconLargeSubItemMinHeight);
@@ -23,9 +23,6 @@ var styles = {
23
23
  rootBackButton: function (t) {
24
24
  return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n "], ["\n padding-left: ", ";\n padding-right: ", ";\n "])), t.sideMenuBackButtonIconPaddingLeft, t.sideMenuBackButtonIconPaddingRight);
25
25
  },
26
- rootAvatar: function () {
27
- return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n min-height: unset;\n "], ["\n min-height: unset;\n "])));
28
- },
29
26
  };
30
27
  export var jsStyles = memoizeStyle(styles);
31
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
28
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
package/src/internal/ItemContent/ItemContent.js CHANGED
@@ -42,7 +42,7 @@ var ItemContent = forwardRef(function (_a, ref) {
42
42
  if (!_isBackButton && _isSubMenu) {
43
43
  useNumberOfTextLinesInSubItem(textRef, setMultilineSubItem, size, theme);
44
44
  }
45
- }, []);
45
+ }, [caption]);
46
46
  useEffect(function () {
47
47
  if (!_isBackButton && !_isDropdown) {
48
48
  useNumberOfTextLinesInItem({
@@ -60,8 +60,9 @@ var ItemContent = forwardRef(function (_a, ref) {
60
60
  return (React.createElement("div", { className: cx((_b = {},
61
61
  _b[jsStyles.root(theme)] = true,
62
62
  _b[jsStyles.subItemRoot(theme)] = _isSubMenu,
63
- _b[jsStyles.largeRoot(theme)] = size === 'large',
63
+ _b[jsStyles.largeRoot(theme)] = size === 'large' && !_isSubMenu,
64
64
  _b[jsStyles.subItemLargeRoot(theme)] = size === 'large' && _isSubMenu,
65
+ _b[jsStyles.multilineRoot(theme)] = isMultiline && !_isSubMenu,
65
66
  _b[jsStyles.largeMultilineRoot(theme)] = isMultiline && size === 'large',
66
67
  _b[jsStyles.rootForTouchScreens(theme)] = isTouchScreen,
67
68
  _b[jsStyles.subItemRootForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
@@ -73,7 +74,7 @@ var ItemContent = forwardRef(function (_a, ref) {
73
74
  _c[customStyles.textAndMarkerWrapperMultiline(getItemContentHeight(theme, linesNumber, size))] = isMultiline && !_isSubMenu,
74
75
  _c)) },
75
76
  React.createElement(Caption, { _isSubMenu: _isSubMenu, _isNestedSubMenu: _isNestedSubMenu, hasIcon: !!icon, isMultiline: isMultiline, caption: caption, subCaption: subCaption, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, ref: textRef }),
76
- marker && (!context.isMinimized || isSeparatedSubMenuInNarrowDesktop) && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker }))))));
77
+ marker && (!context.isMinimized || isSeparatedSubMenuInNarrowDesktop) && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker, _isSubMenu: _isSubMenu }))))));
77
78
  });
78
79
  ItemContent.displayName = 'ItemContent';
79
80
  var ItemContentWithStaticFields = Object.assign(ItemContent, { __KONTUR_REACT_UI__: 'ItemContent' });
package/src/internal/ItemContent/ItemContent.styles.d.ts CHANGED
@@ -6,6 +6,7 @@ export declare const jsStyles: {
6
6
  root(t: SideMenuTheme): string;
7
7
  largeRoot(t: SideMenuTheme): string;
8
8
  subItemLargeRoot(t: SideMenuTheme): string;
9
+ multilineRoot(t: SideMenuTheme): string;
9
10
  largeMultilineRoot(t: SideMenuTheme): string;
10
11
  rootForTouchScreens(t: SideMenuTheme): string;
11
12
  subItemRootForTouchScreens(t: SideMenuTheme): string;
package/src/internal/ItemContent/ItemContent.styles.js CHANGED
@@ -11,29 +11,32 @@ var styles = {
11
11
  subItemLargeRoot: function (t) {
12
12
  return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding-top: ", " !important;\n padding-bottom: ", " !important;\n "], ["\n padding-top: ", " !important;\n padding-bottom: ", " !important;\n "])), t.sideMenuSubItemContentLargePaddingY, t.sideMenuSubItemContentLargePaddingY);
13
13
  },
14
+ multilineRoot: function (t) {
15
+ return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding-top: ", " !important;\n padding-bottom: ", " !important;\n "], ["\n padding-top: ", " !important;\n padding-bottom: ", " !important;\n "])), t.sideMenuItemContentMultilinePaddingTop, t.sideMenuItemContentMultilinePaddingBottom);
16
+ },
14
17
  largeMultilineRoot: function (t) {
15
- return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding-top: ", ";\n padding-bottom: ", ";\n "], ["\n padding-top: ", ";\n padding-bottom: ", ";\n "])), t.sideMenuItemContentLargeMultilinePaddingY, t.sideMenuItemContentLargeMultilinePaddingY);
18
+ return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding-top: ", " !important;\n padding-bottom: ", " !important;\n "], ["\n padding-top: ", " !important;\n padding-bottom: ", " !important;\n "])), t.sideMenuItemContentLargeMultilinePaddingTop, t.sideMenuItemContentLargeMultilinePaddingBottom);
16
19
  },
17
20
  rootForTouchScreens: function (t) {
18
- return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding-top: ", ";\n padding-bottom: ", ";\n "], ["\n padding-top: ", ";\n padding-bottom: ", ";\n "])), t.sideMenuItemContentPaddingYForTouchScreens, t.sideMenuItemContentPaddingYForTouchScreens);
21
+ return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding-top: ", ";\n padding-bottom: ", ";\n "], ["\n padding-top: ", ";\n padding-bottom: ", ";\n "])), t.sideMenuItemContentPaddingYForTouchScreens, t.sideMenuItemContentPaddingYForTouchScreens);
19
22
  },
20
23
  subItemRootForTouchScreens: function (t) {
21
- return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding-top: ", ";\n padding-bottom: ", ";\n "], ["\n padding-top: ", ";\n padding-bottom: ", ";\n "])), t.sideMenuSubItemContentPaddingYForTouchScreens, t.sideMenuSubItemContentPaddingYForTouchScreens);
24
+ return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding-top: ", ";\n padding-bottom: ", ";\n "], ["\n padding-top: ", ";\n padding-bottom: ", ";\n "])), t.sideMenuSubItemContentPaddingYForTouchScreens, t.sideMenuSubItemContentPaddingYForTouchScreens);
22
25
  },
23
26
  subItemRoot: function (t) {
24
- return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding-top: ", ";\n padding-bottom: ", ";\n "], ["\n padding-top: ", ";\n padding-bottom: ", ";\n "])), t.sideMenuSubItemContentPaddingY, t.sideMenuSubItemContentPaddingY);
27
+ return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding-top: ", ";\n padding-bottom: ", ";\n "], ["\n padding-top: ", ";\n padding-bottom: ", ";\n "])), t.sideMenuSubItemContentPaddingY, t.sideMenuSubItemContentPaddingY);
25
28
  },
26
29
  textAndMarkerWrapper: function () {
27
- return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n align-items: center;\n min-width: 0;\n "], ["\n display: flex;\n flex-grow: 1;\n align-items: center;\n min-width: 0;\n "])));
30
+ return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n align-items: center;\n min-width: 0;\n "], ["\n display: flex;\n flex-grow: 1;\n align-items: center;\n min-width: 0;\n "])));
28
31
  },
29
32
  textAndMarkerWrapperDropdown: function () {
30
- return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n overflow: hidden;\n "], ["\n overflow: hidden;\n "])));
33
+ return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n overflow: hidden;\n "], ["\n overflow: hidden;\n "])));
31
34
  },
32
35
  };
33
36
  export var customStyles = {
34
37
  textAndMarkerWrapperMultiline: function (height) {
35
- return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n min-height: ", "px;\n "], ["\n min-height: ", "px;\n "])), height);
38
+ return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n min-height: ", "px;\n "], ["\n min-height: ", "px;\n "])), height);
36
39
  },
37
40
  };
38
41
  export var jsStyles = memoizeStyle(styles);
39
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
42
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
package/src/internal/ItemContent/Marker.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
2
- interface MarkerProps extends Pick<SideMenuItemProps, 'marker'> {
2
+ interface MarkerProps extends Pick<SideMenuItemProps, 'marker' | '_isSubMenu'> {
3
3
  isMultiline: boolean;
4
4
  }
5
- export declare const Marker: ({ isMultiline, marker }: MarkerProps) => JSX.Element;
5
+ export declare const Marker: ({ isMultiline, marker, _isSubMenu }: MarkerProps) => JSX.Element;
6
6
  export {};
package/src/internal/ItemContent/Marker.js CHANGED
@@ -5,10 +5,11 @@ import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
5
5
  import { ThemeContext } from '@skbkontur/react-ui';
6
6
  export var Marker = function (_a) {
7
7
  var _b;
8
- var isMultiline = _a.isMultiline, marker = _a.marker;
8
+ var isMultiline = _a.isMultiline, marker = _a.marker, _isSubMenu = _a._isSubMenu;
9
9
  var theme = getSideMenuTheme(useContext(ThemeContext));
10
10
  return (React.createElement("span", { className: cx((_b = {},
11
11
  _b[jsStyles.root(theme)] = true,
12
12
  _b[jsStyles.rootMultiline(theme)] = isMultiline,
13
+ _b[jsStyles.rootSubMenu(theme)] = _isSubMenu,
13
14
  _b)) }, marker));
14
15
  };
package/src/internal/ItemContent/Marker.styles.d.ts CHANGED
@@ -2,4 +2,5 @@ import { SideMenuTheme } from '../../../lib/theming/ThemeTypes';
2
2
  export declare const jsStyles: {
3
3
  root(t: SideMenuTheme): string;
4
4
  rootMultiline(t: SideMenuTheme): string;
5
+ rootSubMenu(t: SideMenuTheme): string;
5
6
  };
package/src/internal/ItemContent/Marker.styles.js CHANGED
@@ -3,11 +3,14 @@ import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
3
3
  import { memoizeStyle } from '../../../lib/theming/ThemeHelpers';
4
4
  var styles = {
5
5
  root: function (t) {
6
- return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding-right: ", ";\n padding-left: ", ";\n background: ", ";\n border-radius: 9999px;\n margin-left: auto;\n margin-right: ", ";\n color: ", ";\n line-height: ", ";\n font-weight: ", ";\n "], ["\n padding-right: ", ";\n padding-left: ", ";\n background: ", ";\n border-radius: 9999px;\n margin-left: auto;\n margin-right: ", ";\n color: ", ";\n line-height: ", ";\n font-weight: ", ";\n "])), t.sideMenuMarkerPaddingX, t.sideMenuMarkerPaddingX, t.sideMenuMarkerBg, t.sideMenuMarkerMarginRight, t.sideMenuMarkerColor, t.sideMenuLineHeight, t.sideMenuMarkerFontWeight);
6
+ return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: ", " ", ";\n background: ", ";\n border-radius: 9999px;\n margin-left: auto;\n margin-right: ", ";\n color: ", ";\n font-size: 14px;\n line-height: ", ";\n font-weight: ", ";\n min-width: 8px;\n text-align: center;\n flex-shrink: 0;\n "], ["\n padding: ", " ", ";\n background: ", ";\n border-radius: 9999px;\n margin-left: auto;\n margin-right: ", ";\n color: ", ";\n font-size: 14px;\n line-height: ", ";\n font-weight: ", ";\n min-width: 8px;\n text-align: center;\n flex-shrink: 0;\n "])), t.sideMenuMarkerPaddingY, t.sideMenuMarkerPaddingX, t.sideMenuMarkerBg, t.sideMenuMarkerMarginRight, t.sideMenuMarkerColor, t.sideMenuMarkerLineHeight, t.sideMenuMarkerFontWeight);
7
7
  },
8
8
  rootMultiline: function (t) {
9
9
  return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-self: flex-start;\n margin-top: ", ";\n "], ["\n align-self: flex-start;\n margin-top: ", ";\n "])), t.sideMenuMarkerMultilineMarginTop);
10
10
  },
11
+ rootSubMenu: function (t) {
12
+ return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: transparent;\n color: ", ";\n font-weight: ", ";\n "], ["\n background: transparent;\n color: ", ";\n font-weight: ", ";\n "])), t.sideMenuMarkerSubItemColor, t.sideMenuSubItemMarkerFontWeight);
13
+ },
11
14
  };
12
15
  export var jsStyles = memoizeStyle(styles);
13
- var templateObject_1, templateObject_2;
16
+ var templateObject_1, templateObject_2, templateObject_3;
package/src/internal/InnerBody.styles.d.ts DELETED
@@ -1,4 +0,0 @@
1
- import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
2
- export declare const jsStyles: {
3
- divider(t: SideMenuTheme): string;
4
- };
package/src/internal/InnerBody.styles.js DELETED
@@ -1,10 +0,0 @@
1
- import { __makeTemplateObject } from "tslib";
2
- import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
3
- import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
4
- var styles = {
5
- divider: function (t) {
6
- return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n margin-left: ", ";\n margin-right: ", ";\n "], ["\n background: ", ";\n margin-left: ", ";\n margin-right: ", ";\n "])), t.sideMenuDividerBgColor, t.sideMenuDividerMarginX, t.sideMenuDividerMarginX);
7
- },
8
- };
9
- export var jsStyles = memoizeStyle(styles);
10
- var templateObject_1;