@rescui/menu 0.10.17-RUI-239-Allow-collapse-text-inside-button-hotfix-e80fa639.0 → 0.10.17-RUI-243-Rework-Menu-component-06a5b34e.21

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 (11) hide show
  1. package/lib/index.css +46 -39
  2. package/lib/menu.js +5 -2
  3. package/lib/menu.p.module.css.js +30 -0
  4. package/lib/parts/divider.js +1 -1
  5. package/lib/parts/group-header.js +1 -1
  6. package/lib/parts/menu-context.d.ts +1 -0
  7. package/lib/parts/menu-item.js +3 -2
  8. package/lib/public-api.p.css +6 -0
  9. package/lib/public-api.pcss +6 -0
  10. package/package.json +5 -5
  11. package/lib/index.p.module.css.js +0 -29
package/lib/index.css CHANGED
@@ -1,11 +1,12 @@
1
- ._themeLight_wy7ino_8{
1
+ ._themeLight_1qq84u8_8{
2
2
  --rs-theme-dark:0;
3
3
  }
4
- ._themeDark_wy7ino_11{
4
+ ._themeDark_1qq84u8_11{
5
5
  --rs-theme-dark:1;
6
6
  }
7
- ._sizeS_wy7ino_15{
7
+ ._sizeS_1qq84u8_15{
8
8
  --_rs-menu-mi-icon-offset:8px;
9
+ --_rs-menu-mi-icon-size:20px;
9
10
  --_rs-menu-mi-vertical-padding:6px;
10
11
  --_rs-menu-mi-horizontal-padding:8px;
11
12
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
@@ -41,8 +42,9 @@
41
42
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
42
43
  --_rs-typography-link-border-bottom-width-from-text:1px;
43
44
  }
44
- ._sizeM_wy7ino_18{
45
+ ._sizeM_1qq84u8_18{
45
46
  --_rs-menu-mi-icon-offset:8px;
47
+ --_rs-menu-mi-icon-size:24px;
46
48
  --_rs-menu-mi-vertical-padding:8px;
47
49
  --_rs-menu-mi-horizontal-padding:16px;
48
50
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
@@ -82,12 +84,13 @@
82
84
  --_rs-typography-link-border-bottom-width-from-text:1px;
83
85
  }
84
86
  @media screen and (max-width: 640px){
85
- ._sizeM_wy7ino_18{
87
+ ._sizeM_1qq84u8_18{
86
88
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
87
89
  }
88
90
  }
89
- ._sizeL_wy7ino_21{
91
+ ._sizeL_1qq84u8_21{
90
92
  --_rs-menu-mi-icon-offset:16px;
93
+ --_rs-menu-mi-icon-size:28px;
91
94
  --_rs-menu-mi-vertical-padding:12px;
92
95
  --_rs-menu-mi-horizontal-padding:16px;
93
96
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
@@ -127,11 +130,11 @@
127
130
  --_rs-typography-link-border-bottom-width-from-text:1px;
128
131
  }
129
132
  @media screen and (max-width: 640px){
130
- ._sizeL_wy7ino_21{
133
+ ._sizeL_1qq84u8_21{
131
134
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
132
135
  }
133
136
  }
134
- ._modeClassic_wy7ino_25{
137
+ ._modeClassic_1qq84u8_25{
135
138
  --_rs-menu-mi-horizontal-padding-with-mode:var(
136
139
  --_rs-menu-mi-horizontal-padding
137
140
  );
@@ -145,7 +148,7 @@
145
148
  calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(51 + var(--_rs-theme-dark-coefficient, 0)*181)
146
149
  );
147
150
  }
148
- ._modeRock_wy7ino_28{
151
+ ._modeRock_1qq84u8_28{
149
152
  --_rs-menu-mi-horizontal-padding-with-mode:var(
150
153
  --_rs-menu-mi-horizontal-padding
151
154
  );
@@ -159,7 +162,7 @@
159
162
  calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(51 + var(--_rs-theme-dark-coefficient, 0)*181)
160
163
  );
161
164
  }
162
- ._modeClear_wy7ino_31{
165
+ ._modeClear_1qq84u8_31{
163
166
  --_rs-menu-mi-horizontal-padding-with-mode:0;
164
167
  --_rs-menu-mi-active-background:none;
165
168
  --_rs-menu-mi-selected-color:var(--_rs-color-primary);
@@ -172,15 +175,15 @@
172
175
  0.1
173
176
  );
174
177
  }
175
- ._iconPlacementLeft_wy7ino_35{
178
+ ._iconPlacementLeft_1qq84u8_35{
176
179
  --_rs-menu-mi-flex-direction:row;
177
180
  --_rs-menu-mi-justify-content:initial;
178
181
  }
179
- ._iconPlacementRight_wy7ino_39{
182
+ ._iconPlacementRight_1qq84u8_39{
180
183
  --_rs-menu-mi-flex-direction:row-reverse;
181
184
  --_rs-menu-mi-justify-content:space-between;
182
185
  }
183
- ._wrapper_wy7ino_43{
186
+ ._wrapper_1qq84u8_43{
184
187
  --_rs-theme-dark:var(
185
188
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
186
189
  var(--rs-theme-dark, 0)
@@ -190,7 +193,7 @@
190
193
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
191
194
  }
192
195
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
193
- ._wrapper_wy7ino_43{
196
+ ._wrapper_1qq84u8_43{
194
197
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
195
198
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
196
199
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -199,7 +202,7 @@
199
202
  }
200
203
  }
201
204
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
202
- ._wrapper_wy7ino_43{
205
+ ._wrapper_1qq84u8_43{
203
206
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
204
207
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
205
208
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -207,11 +210,11 @@
207
210
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
208
211
  }
209
212
  }
210
- ._wrapper_wy7ino_43 {
213
+ ._wrapper_1qq84u8_43 {
211
214
 
212
215
  display:flex;
213
216
  }
214
- ._menuItem_wy7ino_50{
217
+ ._menuItem_1qq84u8_50{
215
218
  letter-spacing:var(
216
219
  --rs-text-base-letter-spacing,
217
220
  var(--_rs-typography-letter-spacing)
@@ -252,48 +255,52 @@
252
255
  -webkit-font-smoothing:inherit;
253
256
  -moz-osx-font-smoothing:inherit;
254
257
  }
255
- ._menuItem_wy7ino_50:focus{
258
+ ._menuItem_1qq84u8_50:focus{
256
259
  outline:none;
257
260
  }
258
- ._keyboardNavigationDisabled_wy7ino_85 ._menuItem_wy7ino_50:focus[data-focus-method='key']{
261
+ ._keyboardNavigationDisabled_1qq84u8_85 ._menuItem_1qq84u8_50:focus[data-focus-method='key']{
259
262
  box-shadow:0 0 0 2px var(--_rs-color-primary-dim), inset 0 0 0 2px var(--_rs-color-primary-dim);
260
263
  }
261
- ._menuItem_wy7ino_50:active{
264
+ ._menuItem_1qq84u8_50:active{
262
265
  color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
263
266
  background:var(--_rs-menu-mi-active-background);
264
267
  }
265
- ._menuItem_wy7ino_50._selected_wy7ino_99{
268
+ ._menuItem_1qq84u8_50._selected_1qq84u8_99{
266
269
  color:var(--_rs-menu-mi-selected-color);
267
270
  background:var(--_rs-menu-mi-selected-background);
268
271
  }
269
- ._menuItem_wy7ino_50._highlighted_wy7ino_106,
270
- ._menuItem_wy7ino_50:not(._disableCursor_wy7ino_107):hover{
272
+ ._menuItem_1qq84u8_50._highlighted_1qq84u8_106,
273
+ ._menuItem_1qq84u8_50:not(._disableCursor_1qq84u8_107):hover{
271
274
  color:var(--_rs-menu-mi-hover-color);
272
275
  background:var(--_rs-menu-mi-hover-background);
273
276
  }
274
- ._menuItem_wy7ino_50._highlighted_wy7ino_106._selected_wy7ino_99,
275
- ._menuItem_wy7ino_50._selected_wy7ino_99:not(._disableCursor_wy7ino_107):hover{
277
+ ._menuItem_1qq84u8_50._highlighted_1qq84u8_106._selected_1qq84u8_99,
278
+ ._menuItem_1qq84u8_50._selected_1qq84u8_99:not(._disableCursor_1qq84u8_107):hover{
276
279
  color:var(--_rs-menu-mi-selected-hover-color);
277
280
  background-color:var(--_rs-menu-mi-selected-hover-background);
278
281
  }
279
- ._menuItem_wy7ino_50._disabled_wy7ino_120{
282
+ ._menuItem_1qq84u8_50._disabled_1qq84u8_120{
280
283
  pointer-events:none;
281
284
 
282
285
  color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
283
286
  }
284
- ._disableCursor_wy7ino_107{
287
+ ._disableCursor_1qq84u8_107{
285
288
  pointer-events:none;
286
289
  }
287
- ._content_wy7ino_131{
290
+ ._content_1qq84u8_131{
288
291
  flex-grow:1;
289
292
 
290
293
  font-size:inherit;
291
294
  }
292
- ._icon_wy7ino_35{
295
+ ._icon_1qq84u8_35{
293
296
  flex:0 0;
294
297
  flex-basis:auto;
295
298
  }
296
- ._divider_wy7ino_144{
299
+ ._icon_1qq84u8_35._resizedIcon_1qq84u8_141{
300
+ width:auto;
301
+ height:var(--_rs-menu-mi-icon-size);
302
+ }
303
+ ._divider_1qq84u8_149{
297
304
  flex-shrink:0;
298
305
 
299
306
  width:100%;
@@ -304,13 +311,13 @@
304
311
 
305
312
  background-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
306
313
  }
307
- ._groupHeaderThemeLight_wy7ino_158{
314
+ ._groupHeaderThemeLight_1qq84u8_163{
308
315
  --rs-theme-dark:0;
309
316
  }
310
- ._groupHeaderThemeDark_wy7ino_161{
317
+ ._groupHeaderThemeDark_1qq84u8_166{
311
318
  --rs-theme-dark:1;
312
319
  }
313
- ._groupHeaderSizeL_wy7ino_165{
320
+ ._groupHeaderSizeL_1qq84u8_170{
314
321
  --_rs-menu-gh-vertical-padding:12px;
315
322
  --_rs-menu-gh-horizontal-padding:16px;
316
323
  --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
@@ -343,7 +350,7 @@
343
350
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
344
351
  --_rs-typography-link-border-bottom-width-from-text:2px;
345
352
  }
346
- ._groupHeaderSizeM_wy7ino_168{
353
+ ._groupHeaderSizeM_1qq84u8_173{
347
354
  --_rs-menu-gh-vertical-padding:8px;
348
355
  --_rs-menu-gh-horizontal-padding:16px;
349
356
  --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
@@ -376,7 +383,7 @@
376
383
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
377
384
  --_rs-typography-link-border-bottom-width-from-text:2px;
378
385
  }
379
- ._groupHeaderSizeS_wy7ino_171{
386
+ ._groupHeaderSizeS_1qq84u8_176{
380
387
  --_rs-menu-gh-vertical-padding:6px;
381
388
  --_rs-menu-gh-horizontal-padding:8px;
382
389
  --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
@@ -409,7 +416,7 @@
409
416
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
410
417
  --_rs-typography-link-border-bottom-width-from-text:2px;
411
418
  }
412
- ._groupHeader_wy7ino_158{
419
+ ._groupHeader_1qq84u8_163{
413
420
  --_rs-theme-dark:var(
414
421
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
415
422
  var(--rs-theme-dark, 0)
@@ -419,7 +426,7 @@
419
426
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
420
427
  }
421
428
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
422
- ._groupHeader_wy7ino_158{
429
+ ._groupHeader_1qq84u8_163{
423
430
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
424
431
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
425
432
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -428,7 +435,7 @@
428
435
  }
429
436
  }
430
437
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
431
- ._groupHeader_wy7ino_158{
438
+ ._groupHeader_1qq84u8_163{
432
439
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
433
440
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
434
441
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -436,7 +443,7 @@
436
443
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
437
444
  }
438
445
  }
439
- ._groupHeader_wy7ino_158 {
446
+ ._groupHeader_1qq84u8_163 {
440
447
  letter-spacing:var(
441
448
  --rs-text-base-letter-spacing,
442
449
  var(--_rs-typography-letter-spacing)
package/lib/menu.js CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import cn from 'classnames';
4
4
  import { MenuProvider } from './parts/menu-context.js';
5
- import styles from './index.p.module.css.js';
5
+ import styles from './menu.p.module.css.js';
6
6
  import { useMenuKeyboardNavigation } from './parts/use-menu-keyboard-navigation.js';
7
7
 
8
8
  const Menu = _ref => {
@@ -20,6 +20,7 @@ const Menu = _ref => {
20
20
  className,
21
21
  wrapItemsWithLi,
22
22
  returnFocusOnUnmount = false,
23
+ resizeIcons = false,
23
24
  ...restProps
24
25
  } = _ref;
25
26
  const Tag = tag;
@@ -45,7 +46,8 @@ const Menu = _ref => {
45
46
  unregisterItem: unregisterItem,
46
47
  activeItemRef: activeItemRef.current,
47
48
  isKeyboardNavigating: isKeyboardNavigating,
48
- wrapWithLi: wrapItemsWithLi ?? tag === 'ul'
49
+ wrapWithLi: wrapItemsWithLi ?? tag === 'ul',
50
+ resizeIcons: resizeIcons
49
51
  }, /*#__PURE__*/React.createElement(Tag, {
50
52
  className: cn(!enableKeyboardNavigation && styles.keyboardNavigationDisabled, className),
51
53
  ...restProps
@@ -58,6 +60,7 @@ Menu.propTypes = {
58
60
  theme: PropTypes.oneOf(['light', 'dark']),
59
61
  disableCursor: PropTypes.bool,
60
62
  disabled: PropTypes.bool,
63
+ resizeIcons: PropTypes.bool,
61
64
  iconPlacement: PropTypes.oneOf(['left', 'right']),
62
65
  itemTag: PropTypes.elementType,
63
66
  tag: PropTypes.elementType
package/lib/menu.p.module.css.js ADDED
@@ -0,0 +1,30 @@
1
+ var styles = {
2
+ "themeLight": "_themeLight_1qq84u8_8",
3
+ "themeDark": "_themeDark_1qq84u8_11",
4
+ "sizeS": "_sizeS_1qq84u8_15",
5
+ "sizeM": "_sizeM_1qq84u8_18",
6
+ "sizeL": "_sizeL_1qq84u8_21",
7
+ "modeClassic": "_modeClassic_1qq84u8_25",
8
+ "modeRock": "_modeRock_1qq84u8_28",
9
+ "modeClear": "_modeClear_1qq84u8_31",
10
+ "iconPlacementLeft": "_iconPlacementLeft_1qq84u8_35",
11
+ "iconPlacementRight": "_iconPlacementRight_1qq84u8_39",
12
+ "wrapper": "_wrapper_1qq84u8_43",
13
+ "menuItem": "_menuItem_1qq84u8_50",
14
+ "keyboardNavigationDisabled": "_keyboardNavigationDisabled_1qq84u8_85",
15
+ "selected": "_selected_1qq84u8_99",
16
+ "highlighted": "_highlighted_1qq84u8_106",
17
+ "disableCursor": "_disableCursor_1qq84u8_107",
18
+ "disabled": "_disabled_1qq84u8_120",
19
+ "content": "_content_1qq84u8_131",
20
+ "icon": "_icon_1qq84u8_35",
21
+ "resizedIcon": "_resizedIcon_1qq84u8_141",
22
+ "divider": "_divider_1qq84u8_149",
23
+ "groupHeaderThemeLight": "_groupHeaderThemeLight_1qq84u8_163",
24
+ "groupHeaderThemeDark": "_groupHeaderThemeDark_1qq84u8_166",
25
+ "groupHeaderSizeL": "_groupHeaderSizeL_1qq84u8_170",
26
+ "groupHeaderSizeM": "_groupHeaderSizeM_1qq84u8_173",
27
+ "groupHeaderSizeS": "_groupHeaderSizeS_1qq84u8_176",
28
+ "groupHeader": "_groupHeader_1qq84u8_163"
29
+ };
30
+ export { styles as default };
package/lib/parts/divider.js CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import cn from 'classnames';
3
3
  import PropTypes from 'prop-types';
4
4
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
5
- import styles from '../index.p.module.css.js';
5
+ import styles from '../menu.p.module.css.js';
6
6
  import { useMenuContext } from './menu-context.js';
7
7
  const THEME_CLASS = {
8
8
  light: styles.themeLight,
package/lib/parts/group-header.js CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import cn from 'classnames';
3
3
  import PropTypes from 'prop-types';
4
4
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
5
- import styles from '../index.p.module.css.js';
5
+ import styles from '../menu.p.module.css.js';
6
6
  import { useMenuContext } from './menu-context.js';
7
7
  const SIZE_CLASS = {
8
8
  s: styles.groupHeaderSizeS,
package/lib/parts/menu-context.d.ts CHANGED
@@ -16,6 +16,7 @@ export interface MenuContextValue {
16
16
  unregisterItem?: (ref: HTMLElement) => void;
17
17
  activeItemRef?: HTMLElement;
18
18
  isKeyboardNavigating: boolean;
19
+ resizeIcons?: boolean;
19
20
  }
20
21
  export declare const DEFAULT_MENU_CONTEXT: MenuContextValue;
21
22
  export declare const MenuContext: React.Context<MenuContextValue>;
package/lib/parts/menu-item.js CHANGED
@@ -2,7 +2,7 @@ import React, { useState, useEffect, cloneElement } from 'react';
2
2
  import cn from 'classnames';
3
3
  import PropTypes from 'prop-types';
4
4
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
5
- import styles from '../index.p.module.css.js';
5
+ import styles from '../menu.p.module.css.js';
6
6
  import { useMenuContext } from './menu-context.js';
7
7
  const ICON_PLACEMENT_STYLES = {
8
8
  left: styles.iconPlacementLeft,
@@ -67,8 +67,9 @@ const MenuItemInner = (_ref, ref) => {
67
67
  const actualMode = menuContext.mode ?? mode;
68
68
  const actualSize = menuContext.size ?? size;
69
69
  const actualDisableCursor = menuContext.disableCursor ?? disableCursor;
70
+ const resizeIcons = menuContext.resizeIcons ?? false;
70
71
  const iconElement = icon ? /*#__PURE__*/cloneElement(icon, {
71
- className: cn(icon.props.className, styles.icon),
72
+ className: cn(icon.props.className, styles.icon, resizeIcons && styles.resizedIcon),
72
73
  'data-render-all-sizes': true
73
74
  }) : null;
74
75
  const actualHighlighted = highlighted || activeItemRef === thisRef && isKeyboardNavigating;
package/lib/public-api.p.css CHANGED
@@ -1,6 +1,7 @@
1
1
  @define-mixin rs-menu-size-s{
2
2
  & [data-rs-internal="menu__menu-item"]{
3
3
  --_rs-menu-mi-icon-offset:8px;
4
+ --_rs-menu-mi-icon-size:20px;
4
5
  --_rs-menu-mi-vertical-padding:6px;
5
6
  --_rs-menu-mi-horizontal-padding:8px;
6
7
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
@@ -73,6 +74,7 @@
73
74
  @define-mixin rs-menu-size-m{
74
75
  & [data-rs-internal="menu__menu-item"]{
75
76
  --_rs-menu-mi-icon-offset:8px;
77
+ --_rs-menu-mi-icon-size:24px;
76
78
  --_rs-menu-mi-vertical-padding:8px;
77
79
  --_rs-menu-mi-horizontal-padding:16px;
78
80
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
@@ -153,6 +155,7 @@
153
155
  @define-mixin rs-menu-size-l{
154
156
  & [data-rs-internal="menu__menu-item"]{
155
157
  --_rs-menu-mi-icon-offset:16px;
158
+ --_rs-menu-mi-icon-size:28px;
156
159
  --_rs-menu-mi-vertical-padding:12px;
157
160
  --_rs-menu-mi-horizontal-padding:16px;
158
161
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
@@ -292,6 +295,7 @@
292
295
  @define-mixin rs-menu-item-size-s{
293
296
  &[class]{
294
297
  --_rs-menu-mi-icon-offset:8px;
298
+ --_rs-menu-mi-icon-size:20px;
295
299
  --_rs-menu-mi-vertical-padding:6px;
296
300
  --_rs-menu-mi-horizontal-padding:8px;
297
301
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
@@ -331,6 +335,7 @@
331
335
  @define-mixin rs-menu-item-size-m{
332
336
  &[class]{
333
337
  --_rs-menu-mi-icon-offset:8px;
338
+ --_rs-menu-mi-icon-size:24px;
334
339
  --_rs-menu-mi-vertical-padding:8px;
335
340
  --_rs-menu-mi-horizontal-padding:16px;
336
341
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
@@ -378,6 +383,7 @@
378
383
  @define-mixin rs-menu-item-size-l{
379
384
  &[class]{
380
385
  --_rs-menu-mi-icon-offset:16px;
386
+ --_rs-menu-mi-icon-size:28px;
381
387
  --_rs-menu-mi-vertical-padding:12px;
382
388
  --_rs-menu-mi-horizontal-padding:16px;
383
389
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
package/lib/public-api.pcss CHANGED
@@ -1,6 +1,7 @@
1
1
  @define-mixin rs-menu-size-s{
2
2
  & [data-rs-internal="menu__menu-item"]{
3
3
  --_rs-menu-mi-icon-offset:8px;
4
+ --_rs-menu-mi-icon-size:20px;
4
5
  --_rs-menu-mi-vertical-padding:6px;
5
6
  --_rs-menu-mi-horizontal-padding:8px;
6
7
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
@@ -73,6 +74,7 @@
73
74
  @define-mixin rs-menu-size-m{
74
75
  & [data-rs-internal="menu__menu-item"]{
75
76
  --_rs-menu-mi-icon-offset:8px;
77
+ --_rs-menu-mi-icon-size:24px;
76
78
  --_rs-menu-mi-vertical-padding:8px;
77
79
  --_rs-menu-mi-horizontal-padding:16px;
78
80
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
@@ -153,6 +155,7 @@
153
155
  @define-mixin rs-menu-size-l{
154
156
  & [data-rs-internal="menu__menu-item"]{
155
157
  --_rs-menu-mi-icon-offset:16px;
158
+ --_rs-menu-mi-icon-size:28px;
156
159
  --_rs-menu-mi-vertical-padding:12px;
157
160
  --_rs-menu-mi-horizontal-padding:16px;
158
161
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
@@ -292,6 +295,7 @@
292
295
  @define-mixin rs-menu-item-size-s{
293
296
  &[class]{
294
297
  --_rs-menu-mi-icon-offset:8px;
298
+ --_rs-menu-mi-icon-size:20px;
295
299
  --_rs-menu-mi-vertical-padding:6px;
296
300
  --_rs-menu-mi-horizontal-padding:8px;
297
301
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
@@ -331,6 +335,7 @@
331
335
  @define-mixin rs-menu-item-size-m{
332
336
  &[class]{
333
337
  --_rs-menu-mi-icon-offset:8px;
338
+ --_rs-menu-mi-icon-size:24px;
334
339
  --_rs-menu-mi-vertical-padding:8px;
335
340
  --_rs-menu-mi-horizontal-padding:16px;
336
341
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
@@ -378,6 +383,7 @@
378
383
  @define-mixin rs-menu-item-size-l{
379
384
  &[class]{
380
385
  --_rs-menu-mi-icon-offset:16px;
386
+ --_rs-menu-mi-icon-size:28px;
381
387
  --_rs-menu-mi-vertical-padding:12px;
382
388
  --_rs-menu-mi-horizontal-padding:16px;
383
389
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/menu",
3
- "version": "0.10.17-RUI-239-Allow-collapse-text-inside-button-hotfix-e80fa639.0+e80fa639",
3
+ "version": "0.10.17-RUI-243-Rework-Menu-component-06a5b34e.21+06a5b34e",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -25,10 +25,10 @@
25
25
  "react": ">=16.8.0 <19"
26
26
  },
27
27
  "devDependencies": {
28
- "@rescui/colors": "0.2.9-RUI-239-Allow-collapse-text-inside-button-hotfix-e80fa639.0+e80fa639",
28
+ "@rescui/colors": "0.2.9-RUI-243-Rework-Menu-component-06a5b34e.21+06a5b34e",
29
29
  "@rescui/postcss-preset-library": "0.2.2",
30
- "@rescui/scripts": "0.4.0",
31
- "@rescui/typography": "0.23.2-RUI-239-Allow-collapse-text-inside-button-hotfix-e80fa639.0+e80fa639",
30
+ "@rescui/scripts": "0.5.0",
31
+ "@rescui/typography": "0.23.2-RUI-243-Rework-Menu-component-06a5b34e.21+06a5b34e",
32
32
  "@rescui/visual-regression": "0.1.2",
33
33
  "postcss": "^8.3.0"
34
34
  },
@@ -37,5 +37,5 @@
37
37
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
38
38
  },
39
39
  "nx": {},
40
- "gitHead": "e80fa639f0ea170d275b177a2c3ba68fb6d7cf06"
40
+ "gitHead": "06a5b34eea77e8cf6c64434cef3d37382a027ac7"
41
41
  }
package/lib/index.p.module.css.js DELETED
@@ -1,29 +0,0 @@
1
- var styles = {
2
- "themeLight": "_themeLight_wy7ino_8",
3
- "themeDark": "_themeDark_wy7ino_11",
4
- "sizeS": "_sizeS_wy7ino_15",
5
- "sizeM": "_sizeM_wy7ino_18",
6
- "sizeL": "_sizeL_wy7ino_21",
7
- "modeClassic": "_modeClassic_wy7ino_25",
8
- "modeRock": "_modeRock_wy7ino_28",
9
- "modeClear": "_modeClear_wy7ino_31",
10
- "iconPlacementLeft": "_iconPlacementLeft_wy7ino_35",
11
- "iconPlacementRight": "_iconPlacementRight_wy7ino_39",
12
- "wrapper": "_wrapper_wy7ino_43",
13
- "menuItem": "_menuItem_wy7ino_50",
14
- "keyboardNavigationDisabled": "_keyboardNavigationDisabled_wy7ino_85",
15
- "selected": "_selected_wy7ino_99",
16
- "highlighted": "_highlighted_wy7ino_106",
17
- "disableCursor": "_disableCursor_wy7ino_107",
18
- "disabled": "_disabled_wy7ino_120",
19
- "content": "_content_wy7ino_131",
20
- "icon": "_icon_wy7ino_35",
21
- "divider": "_divider_wy7ino_144",
22
- "groupHeaderThemeLight": "_groupHeaderThemeLight_wy7ino_158",
23
- "groupHeaderThemeDark": "_groupHeaderThemeDark_wy7ino_161",
24
- "groupHeaderSizeL": "_groupHeaderSizeL_wy7ino_165",
25
- "groupHeaderSizeM": "_groupHeaderSizeM_wy7ino_168",
26
- "groupHeaderSizeS": "_groupHeaderSizeS_wy7ino_171",
27
- "groupHeader": "_groupHeader_wy7ino_158"
28
- };
29
- export { styles as default };