@rescui/menu 0.13.8-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14 → 0.14.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 (23) hide show
  1. package/lib/_virtual/check-outline.js +106 -0
  2. package/lib/_virtual/index.css.js +15 -0
  3. package/lib/index.css +191 -76
  4. package/lib/index.d.ts +1 -5
  5. package/lib/menu.d.ts +17 -11
  6. package/lib/menu.js +108 -24
  7. package/lib/menu.p.module.css.js +34 -27
  8. package/lib/parts/divider.d.ts +3 -6
  9. package/lib/parts/divider.js +1 -0
  10. package/lib/parts/group-header.d.ts +2 -8
  11. package/lib/parts/group-header.js +2 -1
  12. package/lib/parts/menu-context.d.ts +2 -19
  13. package/lib/parts/menu-context.js +7 -8
  14. package/lib/parts/menu-item.d.ts +25 -13
  15. package/lib/parts/menu-item.js +98 -34
  16. package/lib/parts/navigation-utils.d.ts +2 -2
  17. package/lib/parts/use-menu-keyboard-navigation.d.ts +7 -5
  18. package/lib/parts/use-menu-keyboard-navigation.js +98 -99
  19. package/lib/public-api.p.css +52 -76
  20. package/lib/public-api.pcss +52 -76
  21. package/lib/types.d.ts +87 -0
  22. package/llm/components/menu.md +79 -8
  23. package/package.json +8 -8
package/lib/parts/use-menu-keyboard-navigation.js CHANGED
@@ -1,19 +1,7 @@
1
1
  "use client";
2
- import { useRef, useState, useCallback, useEffect } from 'react';
3
- import { getLastItem, getFirstItem, getPrevItem, getNextItem, htmlElementsComparator } from './navigation-utils.js';
4
-
5
- function debounce(callback, timeout) {
6
- let id;
7
- return function () {
8
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
9
- args[_key] = arguments[_key];
10
- }
11
-
12
- clearTimeout(id);
13
- id = setTimeout(() => callback(...args), timeout);
14
- return id;
15
- };
16
- }
2
+ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
3
+ import { useState, useCallback, useRef, useEffect } from 'react';
4
+ import { getFirstItem, getLastItem, getPrevItem, getNextItem, htmlElementsComparator } from './navigation-utils.js';
17
5
 
18
6
  function getSortedItems(itemsSet) {
19
7
  return Array.from(itemsSet.values()).sort(htmlElementsComparator);
@@ -21,112 +9,123 @@ function getSortedItems(itemsSet) {
21
9
 
22
10
  function useMenuKeyboardNavigation(_ref) {
23
11
  let {
24
- enableKeyboardNavigation,
25
- activateFirstItem,
26
- returnFocusOnUnmount
12
+ activateFirstItem
27
13
  } = _ref;
28
- const activeItemRef = useRef(null);
29
- const [, setDummyState] = useState(false);
30
- const setActiveItemRef = useCallback(ref => {
31
- activeItemRef.current = ref;
32
-
33
- if (ref) {
34
- ref.focus();
14
+ const [currentActiveItemEl, setCurrentActiveItemEl] = useState(null);
15
+ const setCurrentActiveItemAndFocus = useCallback(function (el) {
16
+ let {
17
+ scroll = false
18
+ } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
19
+ setCurrentActiveItemEl(el ?? null);
20
+
21
+ if (el) {
22
+ el.focus({
23
+ preventScroll: !scroll
24
+ });
35
25
  }
36
-
37
- setDummyState(t => !t);
38
- }, [setDummyState]);
26
+ }, []);
39
27
  const menuItemsSet = useRef(new Set());
40
- useEffect(() => {
41
- if (!enableKeyboardNavigation || !activateFirstItem || !returnFocusOnUnmount) {
42
- return;
28
+ const activateFirstItemTimeoutIdRef = useRef(null);
29
+ const scheduleActivateFirstItem = useCallback(() => {
30
+ if (activateFirstItemTimeoutIdRef.current) {
31
+ clearTimeout(activateFirstItemTimeoutIdRef.current);
43
32
  }
44
33
 
45
- const lastFocusedEl = document.activeElement; // eslint-disable-next-line consistent-return
46
-
47
- return () => {
48
- if (lastFocusedEl) {
49
- lastFocusedEl.focus({
50
- preventScroll: true
51
- });
52
- }
53
- };
54
- }, []);
55
- const debouncedActivateFirstItem = debounce(() => {
56
- const items = getSortedItems(menuItemsSet.current);
57
- setActiveItemRef(getFirstItem(items));
58
- }, 50);
34
+ activateFirstItemTimeoutIdRef.current = setTimeout(() => {
35
+ setCurrentActiveItemAndFocus(getFirstItem(getSortedItems(menuItemsSet.current)));
36
+ }, 50);
37
+ }, [setCurrentActiveItemAndFocus]);
59
38
  const registerItem = useCallback(ref => {
60
- if (ref && !menuItemsSet.current.has(ref)) {
61
- menuItemsSet.current.add(ref);
39
+ if (!ref || menuItemsSet.current.has(ref)) {
40
+ return;
41
+ }
62
42
 
63
- if (activateFirstItem) {
64
- debouncedActivateFirstItem();
65
- }
43
+ menuItemsSet.current.add(ref);
44
+
45
+ if (activateFirstItem) {
46
+ scheduleActivateFirstItem();
66
47
  }
67
- }, []);
48
+ }, [activateFirstItem, scheduleActivateFirstItem]);
68
49
  const unregisterItem = useCallback(ref => {
69
50
  menuItemsSet.current.delete(ref);
70
51
  }, []);
71
- const [isKeyboardNavigating, setIsKeyboardNavigating] = useState(true);
72
- const handleMouseMove = useCallback(() => {
73
- if (menuItemsSet.current.has(document.activeElement) && document.activeElement.blur) {
74
- document.activeElement.blur();
52
+ useEffect(() => {
53
+ return () => {
54
+ if (activateFirstItemTimeoutIdRef.current) {
55
+ clearTimeout(activateFirstItemTimeoutIdRef.current);
56
+ }
57
+
58
+ menuItemsSet.current.clear();
59
+ };
60
+ }, []);
61
+ const handleItemFocus = useCallback(ref => {
62
+ if (!ref) {
63
+ return;
75
64
  }
76
65
 
77
- setActiveItemRef(null);
78
- setIsKeyboardNavigating(false);
79
- }, []); // eslint-disable-next-line consistent-return
66
+ setCurrentActiveItemEl(ref);
67
+ }, [setCurrentActiveItemEl]);
68
+ const handleItemKeyDown = useCallback( // eslint-disable-next-line complexity
69
+ (e, ref) => {
70
+ var _context;
80
71
 
81
- useEffect(() => {
82
- if (isKeyboardNavigating) {
83
- document.addEventListener('mousemove', handleMouseMove);
84
- return () => document.removeEventListener('mousemove', handleMouseMove);
85
- }
86
- }, [handleMouseMove, isKeyboardNavigating]);
87
- useEffect(() => {
88
- if (!enableKeyboardNavigation) {
72
+ if (!_includesInstanceProperty(_context = ['ArrowDown', 'ArrowUp', 'Home', 'End', ' ', 'Enter']).call(_context, e.key)) {
89
73
  return;
90
74
  }
91
75
 
92
- const handler = e => {
93
- setIsKeyboardNavigating(true);
94
- const items = getSortedItems(menuItemsSet.current);
95
-
96
- switch (e.key) {
97
- case 'ArrowDown':
98
- e.preventDefault();
99
- setActiveItemRef(getNextItem(items, activeItemRef.current));
100
- break;
101
-
102
- case 'ArrowUp':
103
- e.preventDefault();
104
- setActiveItemRef(getPrevItem(items, activeItemRef.current));
105
- break;
106
-
107
- case 'Home':
108
- e.preventDefault();
109
- setActiveItemRef(getFirstItem(items));
110
- break;
111
-
112
- case 'End':
113
- e.preventDefault();
114
- setActiveItemRef(getLastItem(items));
115
- break;
116
- }
117
- };
76
+ const items = getSortedItems(menuItemsSet.current);
118
77
 
119
- document.addEventListener('keydown', handler, true); // eslint-disable-next-line consistent-return
78
+ switch (e.key) {
79
+ case 'ArrowDown':
80
+ e.preventDefault();
81
+ setCurrentActiveItemAndFocus(getNextItem(items, ref), {
82
+ scroll: true
83
+ });
84
+ break;
120
85
 
121
- return () => {
122
- document.removeEventListener('keydown', handler, true);
123
- };
124
- }, [enableKeyboardNavigation]);
86
+ case 'ArrowUp':
87
+ e.preventDefault();
88
+ setCurrentActiveItemAndFocus(getPrevItem(items, ref), {
89
+ scroll: true
90
+ });
91
+ break;
92
+
93
+ case 'Home':
94
+ e.preventDefault();
95
+ setCurrentActiveItemAndFocus(getFirstItem(items), {
96
+ scroll: true
97
+ });
98
+ break;
99
+
100
+ case 'End':
101
+ e.preventDefault();
102
+ setCurrentActiveItemAndFocus(getLastItem(items), {
103
+ scroll: true
104
+ });
105
+ break;
106
+
107
+ case ' ':
108
+ case 'Enter':
109
+ e.preventDefault();
110
+ ref?.click?.();
111
+ break;
112
+ }
113
+ }, [setCurrentActiveItemAndFocus]);
114
+ const handleItemMouseEnter = useCallback(ref => {
115
+ if (!ref) {
116
+ return;
117
+ }
118
+
119
+ setCurrentActiveItemAndFocus(ref);
120
+ }, [setCurrentActiveItemAndFocus]);
125
121
  return {
126
- activeItemRef,
122
+ currentActiveItemEl,
123
+ setCurrentActiveItemEl,
127
124
  registerItem,
128
125
  unregisterItem,
129
- isKeyboardNavigating
126
+ handleItemFocus,
127
+ handleItemKeyDown,
128
+ handleItemMouseEnter
130
129
  };
131
130
  }
132
131
 
package/lib/public-api.p.css CHANGED
@@ -244,58 +244,46 @@
244
244
  --_rs-menu-mi-horizontal-padding-with-mode:var(
245
245
  --_rs-menu-mi-horizontal-padding
246
246
  );
247
+ }
248
+ & [data-rs-internal="menu__menu-item"] [data-rs-internal="menu__menu-item__inner"]{
249
+ --_rs-menu-mi-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.7);
247
250
  --_rs-menu-mi-active-background:var(--_rs-color-primary-t-fog);
248
- --_rs-menu-mi-selected-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
249
- --_rs-menu-mi-selected-background: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));
250
- --_rs-menu-mi-hover-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));
251
- --_rs-menu-mi-hover-background: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.1);
252
- --_rs-menu-mi-selected-hover-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
253
- --_rs-menu-mi-selected-hover-background:rgb(
254
- 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)
255
- );
251
+ --_rs-menu-mi-selected-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));
252
+ --_rs-menu-mi-selected-background: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.1);
253
+ --_rs-menu-mi-hover-color:rgb(
254
+ calc(255 - var(--rs-menu-contrast-primary, 0)*230),
255
+ calc(255 - var(--rs-menu-contrast-primary, 0)*230),
256
+ calc(255 - var(--rs-menu-contrast-primary, 0)*227)
257
+ );
258
+ --_rs-menu-mi-hover-background:var(--_rs-color-primary);
256
259
  }
257
260
  }
258
261
  @define-mixin rs-menu-mode-rock{
259
262
  & [data-rs-internal="menu__menu-item"]{
260
263
  --_rs-menu-mi-horizontal-padding-with-mode:var(
261
264
  --_rs-menu-mi-horizontal-padding
262
- );
263
- --_rs-menu-mi-active-background:none;
264
- --_rs-menu-mi-selected-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
265
- --_rs-menu-mi-selected-background: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
- --_rs-menu-mi-hover-color:#FFFFFF;
267
- --_rs-menu-mi-hover-background:var(--_rs-color-primary);
268
- --_rs-menu-mi-selected-hover-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
269
- --_rs-menu-mi-selected-hover-background:rgb(
270
- 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)
271
265
  );
272
266
  }
267
+ & [data-rs-internal="menu__menu-item"] [data-rs-internal="menu__menu-item__inner"]{
268
+ --_rs-menu-mi-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.7);
269
+ --_rs-menu-mi-active-background:transparent;
270
+ --_rs-menu-mi-selected-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));
271
+ --_rs-menu-mi-selected-background:rgb(calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181));
272
+ --_rs-menu-mi-hover-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
273
+ --_rs-menu-mi-hover-background: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));
274
+ }
273
275
  }
274
276
  @define-mixin rs-menu-mode-clear{
275
277
  & [data-rs-internal="menu__menu-item"]{
276
278
  --_rs-menu-mi-horizontal-padding-with-mode:0;
277
- --_rs-menu-mi-active-background:none;
278
- --_rs-menu-mi-selected-color:var(--_rs-color-primary);
279
- --_rs-menu-mi-selected-background:none;
280
- --_rs-menu-mi-hover-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));
281
- --_rs-menu-mi-hover-background:none;
282
- --_rs-menu-mi-selected-hover-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));
283
- --_rs-menu-mi-selected-hover-background:rgba(
284
- 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),
285
- 0.1
286
- );
287
- }
288
- }
289
- @define-mixin rs-menu-icon-placement-left{
290
- & [data-rs-internal="menu__menu-item"]{
291
- --_rs-menu-mi-flex-direction:row;
292
- --_rs-menu-mi-justify-content:initial;
293
279
  }
294
- }
295
- @define-mixin rs-menu-icon-placement-right{
296
- & [data-rs-internal="menu__menu-item"]{
297
- --_rs-menu-mi-flex-direction:row-reverse;
298
- --_rs-menu-mi-justify-content:space-between;
280
+ & [data-rs-internal="menu__menu-item"] [data-rs-internal="menu__menu-item__inner"]{
281
+ --_rs-menu-mi-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));
282
+ --_rs-menu-mi-active-background:transparent;
283
+ --_rs-menu-mi-selected-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));
284
+ --_rs-menu-mi-selected-background: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.1);
285
+ --_rs-menu-mi-hover-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));
286
+ --_rs-menu-mi-hover-background:transparent;
299
287
  }
300
288
  }
301
289
  @define-mixin rs-menu-item-size-s{
@@ -442,58 +430,46 @@
442
430
  --_rs-menu-mi-horizontal-padding-with-mode:var(
443
431
  --_rs-menu-mi-horizontal-padding
444
432
  );
433
+ }
434
+ &[class] [data-rs-internal="menu__menu-item__inner"]{
435
+ --_rs-menu-mi-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.7);
445
436
  --_rs-menu-mi-active-background:var(--_rs-color-primary-t-fog);
446
- --_rs-menu-mi-selected-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
447
- --_rs-menu-mi-selected-background: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));
448
- --_rs-menu-mi-hover-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));
449
- --_rs-menu-mi-hover-background: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.1);
450
- --_rs-menu-mi-selected-hover-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
451
- --_rs-menu-mi-selected-hover-background:rgb(
452
- 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)
453
- );
437
+ --_rs-menu-mi-selected-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));
438
+ --_rs-menu-mi-selected-background: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.1);
439
+ --_rs-menu-mi-hover-color:rgb(
440
+ calc(255 - var(--rs-menu-contrast-primary, 0)*230),
441
+ calc(255 - var(--rs-menu-contrast-primary, 0)*230),
442
+ calc(255 - var(--rs-menu-contrast-primary, 0)*227)
443
+ );
444
+ --_rs-menu-mi-hover-background:var(--_rs-color-primary);
454
445
  }
455
446
  }
456
447
  @define-mixin rs-menu-item-mode-rock{
457
448
  &[class]{
458
449
  --_rs-menu-mi-horizontal-padding-with-mode:var(
459
450
  --_rs-menu-mi-horizontal-padding
460
- );
461
- --_rs-menu-mi-active-background:none;
462
- --_rs-menu-mi-selected-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
463
- --_rs-menu-mi-selected-background: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));
464
- --_rs-menu-mi-hover-color:#FFFFFF;
465
- --_rs-menu-mi-hover-background:var(--_rs-color-primary);
466
- --_rs-menu-mi-selected-hover-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
467
- --_rs-menu-mi-selected-hover-background:rgb(
468
- 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)
469
451
  );
470
452
  }
453
+ &[class] [data-rs-internal="menu__menu-item__inner"]{
454
+ --_rs-menu-mi-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.7);
455
+ --_rs-menu-mi-active-background:transparent;
456
+ --_rs-menu-mi-selected-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));
457
+ --_rs-menu-mi-selected-background:rgb(calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181));
458
+ --_rs-menu-mi-hover-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
459
+ --_rs-menu-mi-hover-background: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));
460
+ }
471
461
  }
472
462
  @define-mixin rs-menu-item-mode-clear{
473
463
  &[class]{
474
464
  --_rs-menu-mi-horizontal-padding-with-mode:0;
475
- --_rs-menu-mi-active-background:none;
476
- --_rs-menu-mi-selected-color:var(--_rs-color-primary);
477
- --_rs-menu-mi-selected-background:none;
478
- --_rs-menu-mi-hover-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));
479
- --_rs-menu-mi-hover-background:none;
480
- --_rs-menu-mi-selected-hover-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));
481
- --_rs-menu-mi-selected-hover-background:rgba(
482
- 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),
483
- 0.1
484
- );
485
- }
486
- }
487
- @define-mixin rs-menu-item-icon-placement-left{
488
- &[class]{
489
- --_rs-menu-mi-flex-direction:row;
490
- --_rs-menu-mi-justify-content:initial;
491
465
  }
492
- }
493
- @define-mixin rs-menu-item-icon-placement-right{
494
- &[class]{
495
- --_rs-menu-mi-flex-direction:row-reverse;
496
- --_rs-menu-mi-justify-content:space-between;
466
+ &[class] [data-rs-internal="menu__menu-item__inner"]{
467
+ --_rs-menu-mi-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));
468
+ --_rs-menu-mi-active-background:transparent;
469
+ --_rs-menu-mi-selected-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));
470
+ --_rs-menu-mi-selected-background: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.1);
471
+ --_rs-menu-mi-hover-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));
472
+ --_rs-menu-mi-hover-background:transparent;
497
473
  }
498
474
  }
499
475
  @define-mixin rs-group-header-size-s{
package/lib/public-api.pcss CHANGED
@@ -244,58 +244,46 @@
244
244
  --_rs-menu-mi-horizontal-padding-with-mode:var(
245
245
  --_rs-menu-mi-horizontal-padding
246
246
  );
247
+ }
248
+ & [data-rs-internal="menu__menu-item"] [data-rs-internal="menu__menu-item__inner"]{
249
+ --_rs-menu-mi-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.7);
247
250
  --_rs-menu-mi-active-background:var(--_rs-color-primary-t-fog);
248
- --_rs-menu-mi-selected-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
249
- --_rs-menu-mi-selected-background: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));
250
- --_rs-menu-mi-hover-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));
251
- --_rs-menu-mi-hover-background: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.1);
252
- --_rs-menu-mi-selected-hover-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
253
- --_rs-menu-mi-selected-hover-background:rgb(
254
- 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)
255
- );
251
+ --_rs-menu-mi-selected-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));
252
+ --_rs-menu-mi-selected-background: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.1);
253
+ --_rs-menu-mi-hover-color:rgb(
254
+ calc(255 - var(--rs-menu-contrast-primary, 0)*230),
255
+ calc(255 - var(--rs-menu-contrast-primary, 0)*230),
256
+ calc(255 - var(--rs-menu-contrast-primary, 0)*227)
257
+ );
258
+ --_rs-menu-mi-hover-background:var(--_rs-color-primary);
256
259
  }
257
260
  }
258
261
  @define-mixin rs-menu-mode-rock{
259
262
  & [data-rs-internal="menu__menu-item"]{
260
263
  --_rs-menu-mi-horizontal-padding-with-mode:var(
261
264
  --_rs-menu-mi-horizontal-padding
262
- );
263
- --_rs-menu-mi-active-background:none;
264
- --_rs-menu-mi-selected-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
265
- --_rs-menu-mi-selected-background: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
- --_rs-menu-mi-hover-color:#FFFFFF;
267
- --_rs-menu-mi-hover-background:var(--_rs-color-primary);
268
- --_rs-menu-mi-selected-hover-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
269
- --_rs-menu-mi-selected-hover-background:rgb(
270
- 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)
271
265
  );
272
266
  }
267
+ & [data-rs-internal="menu__menu-item"] [data-rs-internal="menu__menu-item__inner"]{
268
+ --_rs-menu-mi-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.7);
269
+ --_rs-menu-mi-active-background:transparent;
270
+ --_rs-menu-mi-selected-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));
271
+ --_rs-menu-mi-selected-background:rgb(calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181));
272
+ --_rs-menu-mi-hover-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
273
+ --_rs-menu-mi-hover-background: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));
274
+ }
273
275
  }
274
276
  @define-mixin rs-menu-mode-clear{
275
277
  & [data-rs-internal="menu__menu-item"]{
276
278
  --_rs-menu-mi-horizontal-padding-with-mode:0;
277
- --_rs-menu-mi-active-background:none;
278
- --_rs-menu-mi-selected-color:var(--_rs-color-primary);
279
- --_rs-menu-mi-selected-background:none;
280
- --_rs-menu-mi-hover-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));
281
- --_rs-menu-mi-hover-background:none;
282
- --_rs-menu-mi-selected-hover-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));
283
- --_rs-menu-mi-selected-hover-background:rgba(
284
- 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),
285
- 0.1
286
- );
287
- }
288
- }
289
- @define-mixin rs-menu-icon-placement-left{
290
- & [data-rs-internal="menu__menu-item"]{
291
- --_rs-menu-mi-flex-direction:row;
292
- --_rs-menu-mi-justify-content:initial;
293
279
  }
294
- }
295
- @define-mixin rs-menu-icon-placement-right{
296
- & [data-rs-internal="menu__menu-item"]{
297
- --_rs-menu-mi-flex-direction:row-reverse;
298
- --_rs-menu-mi-justify-content:space-between;
280
+ & [data-rs-internal="menu__menu-item"] [data-rs-internal="menu__menu-item__inner"]{
281
+ --_rs-menu-mi-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));
282
+ --_rs-menu-mi-active-background:transparent;
283
+ --_rs-menu-mi-selected-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));
284
+ --_rs-menu-mi-selected-background: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.1);
285
+ --_rs-menu-mi-hover-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));
286
+ --_rs-menu-mi-hover-background:transparent;
299
287
  }
300
288
  }
301
289
  @define-mixin rs-menu-item-size-s{
@@ -442,58 +430,46 @@
442
430
  --_rs-menu-mi-horizontal-padding-with-mode:var(
443
431
  --_rs-menu-mi-horizontal-padding
444
432
  );
433
+ }
434
+ &[class] [data-rs-internal="menu__menu-item__inner"]{
435
+ --_rs-menu-mi-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.7);
445
436
  --_rs-menu-mi-active-background:var(--_rs-color-primary-t-fog);
446
- --_rs-menu-mi-selected-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
447
- --_rs-menu-mi-selected-background: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));
448
- --_rs-menu-mi-hover-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));
449
- --_rs-menu-mi-hover-background: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.1);
450
- --_rs-menu-mi-selected-hover-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
451
- --_rs-menu-mi-selected-hover-background:rgb(
452
- 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)
453
- );
437
+ --_rs-menu-mi-selected-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));
438
+ --_rs-menu-mi-selected-background: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.1);
439
+ --_rs-menu-mi-hover-color:rgb(
440
+ calc(255 - var(--rs-menu-contrast-primary, 0)*230),
441
+ calc(255 - var(--rs-menu-contrast-primary, 0)*230),
442
+ calc(255 - var(--rs-menu-contrast-primary, 0)*227)
443
+ );
444
+ --_rs-menu-mi-hover-background:var(--_rs-color-primary);
454
445
  }
455
446
  }
456
447
  @define-mixin rs-menu-item-mode-rock{
457
448
  &[class]{
458
449
  --_rs-menu-mi-horizontal-padding-with-mode:var(
459
450
  --_rs-menu-mi-horizontal-padding
460
- );
461
- --_rs-menu-mi-active-background:none;
462
- --_rs-menu-mi-selected-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
463
- --_rs-menu-mi-selected-background: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));
464
- --_rs-menu-mi-hover-color:#FFFFFF;
465
- --_rs-menu-mi-hover-background:var(--_rs-color-primary);
466
- --_rs-menu-mi-selected-hover-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
467
- --_rs-menu-mi-selected-hover-background:rgb(
468
- 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)
469
451
  );
470
452
  }
453
+ &[class] [data-rs-internal="menu__menu-item__inner"]{
454
+ --_rs-menu-mi-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.7);
455
+ --_rs-menu-mi-active-background:transparent;
456
+ --_rs-menu-mi-selected-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));
457
+ --_rs-menu-mi-selected-background:rgb(calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181));
458
+ --_rs-menu-mi-hover-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
459
+ --_rs-menu-mi-hover-background: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));
460
+ }
471
461
  }
472
462
  @define-mixin rs-menu-item-mode-clear{
473
463
  &[class]{
474
464
  --_rs-menu-mi-horizontal-padding-with-mode:0;
475
- --_rs-menu-mi-active-background:none;
476
- --_rs-menu-mi-selected-color:var(--_rs-color-primary);
477
- --_rs-menu-mi-selected-background:none;
478
- --_rs-menu-mi-hover-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));
479
- --_rs-menu-mi-hover-background:none;
480
- --_rs-menu-mi-selected-hover-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));
481
- --_rs-menu-mi-selected-hover-background:rgba(
482
- 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),
483
- 0.1
484
- );
485
- }
486
- }
487
- @define-mixin rs-menu-item-icon-placement-left{
488
- &[class]{
489
- --_rs-menu-mi-flex-direction:row;
490
- --_rs-menu-mi-justify-content:initial;
491
465
  }
492
- }
493
- @define-mixin rs-menu-item-icon-placement-right{
494
- &[class]{
495
- --_rs-menu-mi-flex-direction:row-reverse;
496
- --_rs-menu-mi-justify-content:space-between;
466
+ &[class] [data-rs-internal="menu__menu-item__inner"]{
467
+ --_rs-menu-mi-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));
468
+ --_rs-menu-mi-active-background:transparent;
469
+ --_rs-menu-mi-selected-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));
470
+ --_rs-menu-mi-selected-background: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.1);
471
+ --_rs-menu-mi-hover-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));
472
+ --_rs-menu-mi-hover-background:transparent;
497
473
  }
498
474
  }
499
475
  @define-mixin rs-group-header-size-s{