@rescui/menu 0.13.8-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14 → 0.13.8-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43

package/lib/parts/use-menu-keyboard-navigation.d.ts

@@ -1,12 +1,14 @@
+import React from 'react';
 interface UseMenuKeyboardNavigationParams {
-    enableKeyboardNavigation: boolean;
     activateFirstItem: boolean;
-    returnFocusOnUnmount: boolean;
 }
-export declare function useMenuKeyboardNavigation({ enableKeyboardNavigation, activateFirstItem, returnFocusOnUnmount }: UseMenuKeyboardNavigationParams): {
-    activeItemRef: import("react").RefObject<any>;
+export declare function useMenuKeyboardNavigation({ activateFirstItem }: UseMenuKeyboardNavigationParams): {
+    currentActiveItemEl: HTMLElement;
+    setCurrentActiveItemEl: React.Dispatch<React.SetStateAction<HTMLElement>>;
     registerItem: (ref: HTMLElement) => void;
     unregisterItem: (ref: HTMLElement) => void;
-    isKeyboardNavigating: boolean;
+    handleItemFocus: (ref: HTMLElement) => void;
+    handleItemKeyDown: (e: React.KeyboardEvent<HTMLElement>, ref?: HTMLElement) => void;
+    handleItemMouseEnter: (ref: HTMLElement) => void;
 };
 export {};

package/lib/parts/use-menu-keyboard-navigation.js

@@ -1,133 +1,247 @@
 "use client";
-import { useRef, useState, useCallback, useEffect } from 'react';
-import { getLastItem, getFirstItem, getPrevItem, getNextItem, htmlElementsComparator } from './navigation-utils.js';
-
-function debounce(callback, timeout) {
-  let id;
-  return function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    clearTimeout(id);
-    id = setTimeout(() => callback(...args), timeout);
-    return id;
-  };
-}
+import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
+import { c } from 'react-compiler-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { getFirstItem, getLastItem, getPrevItem, getNextItem, htmlElementsComparator } from './navigation-utils.js';
 
 function getSortedItems(itemsSet) {
   return Array.from(itemsSet.values()).sort(htmlElementsComparator);
 }
 
-function useMenuKeyboardNavigation(_ref) {
-  let {
-    enableKeyboardNavigation,
-    activateFirstItem,
-    returnFocusOnUnmount
-  } = _ref;
-  const activeItemRef = useRef(null);
-  const [, setDummyState] = useState(false);
-  const setActiveItemRef = useCallback(ref => {
-    activeItemRef.current = ref;
-
-    if (ref) {
-      ref.focus();
-    }
-
-    setDummyState(t => !t);
-  }, [setDummyState]);
-  const menuItemsSet = useRef(new Set());
-  useEffect(() => {
-    if (!enableKeyboardNavigation || !activateFirstItem || !returnFocusOnUnmount) {
-      return;
-    }
-
-    const lastFocusedEl = document.activeElement; // eslint-disable-next-line consistent-return
-
-    return () => {
-      if (lastFocusedEl) {
-        lastFocusedEl.focus({
-          preventScroll: true
+function useMenuKeyboardNavigation(t0) {
+  const $ = c(14);
+  const {
+    activateFirstItem
+  } = t0;
+  const [currentActiveItemEl, setCurrentActiveItemEl] = useState(null);
+  let t1;
+
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (el, t2) => {
+      const {
+        scroll: t3
+      } = t2 === undefined ? {} : t2;
+      const scroll = t3 === undefined ? false : t3;
+      setCurrentActiveItemEl(el ?? null);
+
+      if (el) {
+        el.focus({
+          preventScroll: !scroll
         });
       }
     };
-  }, []);
-  const debouncedActivateFirstItem = debounce(() => {
-    const items = getSortedItems(menuItemsSet.current);
-    setActiveItemRef(getFirstItem(items));
-  }, 50);
-  const registerItem = useCallback(ref => {
-    if (ref && !menuItemsSet.current.has(ref)) {
+
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+
+  const setCurrentActiveItemAndFocus = t1;
+  let t2;
+
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = new Set();
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+
+  const menuItemsSet = useRef(t2);
+  const activateFirstItemTimeoutIdRef = useRef(null);
+  let t3;
+
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = () => {
+      if (activateFirstItemTimeoutIdRef.current) {
+        clearTimeout(activateFirstItemTimeoutIdRef.current);
+      }
+
+      activateFirstItemTimeoutIdRef.current = setTimeout(() => {
+        setCurrentActiveItemAndFocus(getFirstItem(getSortedItems(menuItemsSet.current)));
+      }, 50);
+    };
+
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+
+  const scheduleActivateFirstItem = t3;
+  let t4;
+
+  if ($[3] !== activateFirstItem) {
+    t4 = ref => {
+      if (!ref || menuItemsSet.current.has(ref)) {
+        return;
+      }
+
       menuItemsSet.current.add(ref);
 
       if (activateFirstItem) {
-        debouncedActivateFirstItem();
+        scheduleActivateFirstItem();
+      }
+    };
+
+    $[3] = activateFirstItem;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+
+  const registerItem = t4;
+  let t5;
+
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = ref_0 => {
+      menuItemsSet.current.delete(ref_0);
+    };
+
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+
+  const unregisterItem = t5;
+  let t6;
+  let t7;
+
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = () => () => {
+      if (activateFirstItemTimeoutIdRef.current) {
+        clearTimeout(activateFirstItemTimeoutIdRef.current);
+      }
+
+      menuItemsSet.current.clear();
+    };
+
+    t7 = [];
+    $[6] = t6;
+    $[7] = t7;
+  } else {
+    t6 = $[6];
+    t7 = $[7];
+  }
+
+  useEffect(t6, t7);
+  let t8;
+
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = ref_1 => {
+      if (!ref_1) {
+        return;
+      }
+
+      setCurrentActiveItemEl(ref_1);
+    };
+
+    $[8] = t8;
+  } else {
+    t8 = $[8];
+  }
+
+  const handleItemFocus = t8;
+  let t9;
+
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = (e, ref_2) => {
+      var _context;
+
+      if (!_includesInstanceProperty(_context = ["ArrowDown", "ArrowUp", "Home", "End", " ", "Enter"]).call(_context, e.key)) {
+        return;
       }
-    }
-  }, []);
-  const unregisterItem = useCallback(ref => {
-    menuItemsSet.current.delete(ref);
-  }, []);
-  const [isKeyboardNavigating, setIsKeyboardNavigating] = useState(true);
-  const handleMouseMove = useCallback(() => {
-    if (menuItemsSet.current.has(document.activeElement) && document.activeElement.blur) {
-      document.activeElement.blur();
-    }
-
-    setActiveItemRef(null);
-    setIsKeyboardNavigating(false);
-  }, []); // eslint-disable-next-line consistent-return
-
-  useEffect(() => {
-    if (isKeyboardNavigating) {
-      document.addEventListener('mousemove', handleMouseMove);
-      return () => document.removeEventListener('mousemove', handleMouseMove);
-    }
-  }, [handleMouseMove, isKeyboardNavigating]);
-  useEffect(() => {
-    if (!enableKeyboardNavigation) {
-      return;
-    }
-
-    const handler = e => {
-      setIsKeyboardNavigating(true);
+
       const items = getSortedItems(menuItemsSet.current);
 
-      switch (e.key) {
-        case 'ArrowDown':
-          e.preventDefault();
-          setActiveItemRef(getNextItem(items, activeItemRef.current));
-          break;
-
-        case 'ArrowUp':
-          e.preventDefault();
-          setActiveItemRef(getPrevItem(items, activeItemRef.current));
-          break;
-
-        case 'Home':
-          e.preventDefault();
-          setActiveItemRef(getFirstItem(items));
-          break;
-
-        case 'End':
-          e.preventDefault();
-          setActiveItemRef(getLastItem(items));
-          break;
+      bb44: switch (e.key) {
+        case "ArrowDown":
+          {
+            e.preventDefault();
+            setCurrentActiveItemAndFocus(getNextItem(items, ref_2), {
+              scroll: true
+            });
+            break bb44;
+          }
+
+        case "ArrowUp":
+          {
+            e.preventDefault();
+            setCurrentActiveItemAndFocus(getPrevItem(items, ref_2), {
+              scroll: true
+            });
+            break bb44;
+          }
+
+        case "Home":
+          {
+            e.preventDefault();
+            setCurrentActiveItemAndFocus(getFirstItem(items), {
+              scroll: true
+            });
+            break bb44;
+          }
+
+        case "End":
+          {
+            e.preventDefault();
+            setCurrentActiveItemAndFocus(getLastItem(items), {
+              scroll: true
+            });
+            break bb44;
+          }
+
+        case " ":
+        case "Enter":
+          {
+            e.preventDefault();
+            ref_2?.click?.();
+            break bb44;
+          }
       }
     };
 
-    document.addEventListener('keydown', handler, true); // eslint-disable-next-line consistent-return
+    $[9] = t9;
+  } else {
+    t9 = $[9];
+  }
+
+  const handleItemKeyDown = t9;
+  let t10;
+
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = ref_3 => {
+      if (!ref_3) {
+        return;
+      }
+
+      setCurrentActiveItemAndFocus(ref_3);
+    };
 
-    return () => {
-      document.removeEventListener('keydown', handler, true);
+    $[10] = t10;
+  } else {
+    t10 = $[10];
+  }
+
+  const handleItemMouseEnter = t10;
+  let t11;
+
+  if ($[11] !== currentActiveItemEl || $[12] !== registerItem) {
+    t11 = {
+      currentActiveItemEl,
+      setCurrentActiveItemEl,
+      registerItem,
+      unregisterItem,
+      handleItemFocus,
+      handleItemKeyDown,
+      handleItemMouseEnter
     };
-  }, [enableKeyboardNavigation]);
-  return {
-    activeItemRef,
-    registerItem,
-    unregisterItem,
-    isKeyboardNavigating
-  };
+    $[11] = currentActiveItemEl;
+    $[12] = registerItem;
+    $[13] = t11;
+  } else {
+    t11 = $[13];
+  }
+
+  return t11;
 }
 
 export { useMenuKeyboardNavigation };

package/lib/public-api.p.css

@@ -1,3 +1,8 @@
+@property --_rs-theme-dark-coefficient{
+  syntax:'<number>';
+  inherits:true;
+  initial-value:0;
+}
 @define-mixin rs-menu-size-s{
   & [data-rs-internal="menu__menu-item"]{
     --_rs-menu-mi-icon-offset:8px;
@@ -244,15 +249,18 @@
     --_rs-menu-mi-horizontal-padding-with-mode:var(
     --_rs-menu-mi-horizontal-padding
   );
+  }
+    & [data-rs-internal="menu__menu-item"] [data-rs-internal="menu__menu-item__inner"]{
+    --_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);
     --_rs-menu-mi-active-background:var(--_rs-color-primary-t-fog);
-    --_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));
-    --_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));
-    --_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));
-    --_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);
-    --_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));
-    --_rs-menu-mi-selected-hover-background:rgb(
-    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)
-  );
+    --_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));
+    --_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);
+    --_rs-menu-mi-hover-color:rgb(
+  calc(255 - var(--rs-menu-contrast-primary, 0)*230),
+  calc(255 - var(--rs-menu-contrast-primary, 0)*230),
+  calc(255 - var(--rs-menu-contrast-primary, 0)*227)
+);
+    --_rs-menu-mi-hover-background:var(--_rs-color-primary);
   }
 }
 @define-mixin rs-menu-mode-rock{
@@ -260,42 +268,27 @@
     --_rs-menu-mi-horizontal-padding-with-mode:var(
     --_rs-menu-mi-horizontal-padding
   );
-    --_rs-menu-mi-active-background:none;
-    --_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));
-    --_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));
-    --_rs-menu-mi-hover-color:#FFFFFF;
-    --_rs-menu-mi-hover-background:var(--_rs-color-primary);
-    --_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));
-    --_rs-menu-mi-selected-hover-background:rgb(
-    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)
-  );
+  }
+    & [data-rs-internal="menu__menu-item"] [data-rs-internal="menu__menu-item__inner"]{
+    --_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);
+    --_rs-menu-mi-active-background:transparent;
+    --_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));
+    --_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));
+    --_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));
+    --_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));
   }
 }
 @define-mixin rs-menu-mode-clear{
   & [data-rs-internal="menu__menu-item"]{
     --_rs-menu-mi-horizontal-padding-with-mode:0;
-    --_rs-menu-mi-active-background:none;
-    --_rs-menu-mi-selected-color:var(--_rs-color-primary);
-    --_rs-menu-mi-selected-background:none;
-    --_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));
-    --_rs-menu-mi-hover-background:none;
-    --_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));
-    --_rs-menu-mi-selected-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
-  );
-  }
-}
-@define-mixin rs-menu-icon-placement-left{
-  & [data-rs-internal="menu__menu-item"]{
-    --_rs-menu-mi-flex-direction:row;
-    --_rs-menu-mi-justify-content:initial;
   }
-}
-@define-mixin rs-menu-icon-placement-right{
-  & [data-rs-internal="menu__menu-item"]{
-    --_rs-menu-mi-flex-direction:row-reverse;
-    --_rs-menu-mi-justify-content:space-between;
+    & [data-rs-internal="menu__menu-item"] [data-rs-internal="menu__menu-item__inner"]{
+    --_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));
+    --_rs-menu-mi-active-background:transparent;
+    --_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));
+    --_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);
+    --_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));
+    --_rs-menu-mi-hover-background:transparent;
   }
 }
 @define-mixin rs-menu-item-size-s{
@@ -442,58 +435,46 @@
     --_rs-menu-mi-horizontal-padding-with-mode:var(
     --_rs-menu-mi-horizontal-padding
   );
+  }
+    &[class] [data-rs-internal="menu__menu-item__inner"]{
+    --_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);
     --_rs-menu-mi-active-background:var(--_rs-color-primary-t-fog);
-    --_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));
-    --_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));
-    --_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));
-    --_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);
-    --_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));
-    --_rs-menu-mi-selected-hover-background:rgb(
-    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)
-  );
+    --_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));
+    --_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);
+    --_rs-menu-mi-hover-color:rgb(
+  calc(255 - var(--rs-menu-contrast-primary, 0)*230),
+  calc(255 - var(--rs-menu-contrast-primary, 0)*230),
+  calc(255 - var(--rs-menu-contrast-primary, 0)*227)
+);
+    --_rs-menu-mi-hover-background:var(--_rs-color-primary);
   }
 }
 @define-mixin rs-menu-item-mode-rock{
   &[class]{
     --_rs-menu-mi-horizontal-padding-with-mode:var(
     --_rs-menu-mi-horizontal-padding
-  );
-    --_rs-menu-mi-active-background:none;
-    --_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));
-    --_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));
-    --_rs-menu-mi-hover-color:#FFFFFF;
-    --_rs-menu-mi-hover-background:var(--_rs-color-primary);
-    --_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));
-    --_rs-menu-mi-selected-hover-background:rgb(
-    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)
   );
   }
+    &[class] [data-rs-internal="menu__menu-item__inner"]{
+    --_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);
+    --_rs-menu-mi-active-background:transparent;
+    --_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));
+    --_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));
+    --_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));
+    --_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));
+  }
 }
 @define-mixin rs-menu-item-mode-clear{
   &[class]{
     --_rs-menu-mi-horizontal-padding-with-mode:0;
-    --_rs-menu-mi-active-background:none;
-    --_rs-menu-mi-selected-color:var(--_rs-color-primary);
-    --_rs-menu-mi-selected-background:none;
-    --_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));
-    --_rs-menu-mi-hover-background:none;
-    --_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));
-    --_rs-menu-mi-selected-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
-  );
-  }
-}
-@define-mixin rs-menu-item-icon-placement-left{
-  &[class]{
-    --_rs-menu-mi-flex-direction:row;
-    --_rs-menu-mi-justify-content:initial;
   }
-}
-@define-mixin rs-menu-item-icon-placement-right{
-  &[class]{
-    --_rs-menu-mi-flex-direction:row-reverse;
-    --_rs-menu-mi-justify-content:space-between;
+    &[class] [data-rs-internal="menu__menu-item__inner"]{
+    --_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));
+    --_rs-menu-mi-active-background:transparent;
+    --_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));
+    --_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);
+    --_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));
+    --_rs-menu-mi-hover-background:transparent;
   }
 }
 @define-mixin rs-group-header-size-s{