@rescui/menu 0.10.17-RUI-243-Rework-Menu-component-06a5b34e.21 → 0.10.18-RUI-247-Make-packets-react-19-ready-c06b3c96.4

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