@rescui/menu 0.5.0 → 0.6.1

package/lib/index.css

@@ -1,49 +1,79 @@
-._menuItem_mt4uu8_9{
+._wrapper_u9pxmr_8{
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
+}
+._menuItem_u9pxmr_12{
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  overflow:auto;
+  -webkit-box-flex:1;
+      -ms-flex-positive:1;
+          flex-grow:1;
+
+  width:auto;
+
+  margin:0;
+
+  border:none;
+  border-radius:0;
   outline:none;
+
   cursor:pointer;
-}
-._content_mt4uu8_15{
+  text-align:start;
+  text-decoration:none;
+
+  background:none;
+  -webkit-appearance:none;
+  -moz-appearance:none;
+       appearance:none;
+  -webkit-font-smoothing:inherit;
+  -moz-osx-font-smoothing:inherit;
+}
+._menuItem_u9pxmr_12:focus{
+    outline:none;
+  }
+._content_u9pxmr_40{
   -webkit-box-flex:1;
       -ms-flex-positive:1;
           flex-grow:1;
+
   font-size:inherit;
 }
-._placementRight_mt4uu8_20{
+._placementRight_u9pxmr_46{
   -webkit-box-pack:justify;
       -ms-flex-pack:justify;
           justify-content:space-between;
 }
-._sizeS_mt4uu8_25{
+._sizeS_u9pxmr_51{
   padding: 6px 8px;
 }
-._sizeM_mt4uu8_29{
+._sizeM_u9pxmr_55{
   padding: 8px 16px;
 }
-._sizeL_mt4uu8_33{
+._sizeL_u9pxmr_59{
   padding: 12px 16px;
 }
-._modeClear_mt4uu8_37._sizeS_mt4uu8_25,
-._modeClear_mt4uu8_37._sizeM_mt4uu8_29,
-._modeClear_mt4uu8_37._sizeL_mt4uu8_33{
-  padding-left:0;
+._modeClear_u9pxmr_63._sizeS_u9pxmr_51,
+._modeClear_u9pxmr_63._sizeM_u9pxmr_55,
+._modeClear_u9pxmr_63._sizeL_u9pxmr_59{
   padding-right:0;
+  padding-left:0;
 }
-._themeLight_mt4uu8_45:focus[data-focus-method='key']{
-    -webkit-box-shadow:#8979ff 0 0 0 4px;
-    -webkit-box-shadow:var(--rs-color-primary-dim-light-theme, #8979ff) 0 0 0 4px;
-            box-shadow:#8979ff 0 0 0 4px;
-            box-shadow:var(--rs-color-primary-dim-light-theme, #8979ff) 0 0 0 4px;
+._keyboardNavigationDisabled_u9pxmr_71 ._themeLight_u9pxmr_71:focus[data-focus-method='key']{
+    -webkit-box-shadow:0 0 0 2px #8979ff, inset 0 0 0 2px #8979ff;
+    -webkit-box-shadow:0 0 0 2px var(--rs-color-primary-dim-light-theme, #8979ff), inset 0 0 0 2px var(--rs-color-primary-dim-light-theme, #8979ff);
+            box-shadow:0 0 0 2px #8979ff, inset 0 0 0 2px #8979ff;
+            box-shadow:0 0 0 2px var(--rs-color-primary-dim-light-theme, #8979ff), inset 0 0 0 2px var(--rs-color-primary-dim-light-theme, #8979ff);
   }
-._themeDark_mt4uu8_51:focus[data-focus-method='key']{
-    -webkit-box-shadow:#6f61d2 0 0 0 4px;
-    -webkit-box-shadow:var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 0 0 4px;
-            box-shadow:#6f61d2 0 0 0 4px;
-            box-shadow:var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 0 0 4px;
+._keyboardNavigationDisabled_u9pxmr_71 ._themeDark_u9pxmr_78:focus[data-focus-method='key']{
+    -webkit-box-shadow:0 0 0 2px #6f61d2, inset 0 0 0 2px #6f61d2;
+    -webkit-box-shadow:0 0 0 2px var(--rs-color-primary-dim-dark-theme, #6f61d2), inset 0 0 0 2px var(--rs-color-primary-dim-dark-theme, #6f61d2);
+            box-shadow:0 0 0 2px #6f61d2, inset 0 0 0 2px #6f61d2;
+            box-shadow:0 0 0 2px var(--rs-color-primary-dim-dark-theme, #6f61d2), inset 0 0 0 2px var(--rs-color-primary-dim-dark-theme, #6f61d2);
   }
-._sizeS_mt4uu8_25{
+._sizeS_u9pxmr_51{
   letter-spacing:0.0045em;
   font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
@@ -52,10 +82,10 @@
   line-height:20px;
   line-height:var(--rs-text-3-line-height, 20px);
 }
-._rs-reset-letter-spacing_mt4uu8_1 ._sizeS_mt4uu8_25{
+._rs-reset-letter-spacing_u9pxmr_1 ._sizeS_u9pxmr_51{
     letter-spacing:normal;
   }
-._sizeM_mt4uu8_29{
+._sizeM_u9pxmr_55{
   letter-spacing:0.0015em;
   font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
@@ -65,10 +95,10 @@
   line-height:24px;
   line-height:var(--rs-text-2-line-height, 24px);
 }
-._rs-reset-letter-spacing_mt4uu8_1 ._sizeM_mt4uu8_29{
+._rs-reset-letter-spacing_u9pxmr_1 ._sizeM_u9pxmr_55{
     letter-spacing:normal;
   }
-._sizeL_mt4uu8_33{
+._sizeL_u9pxmr_59{
   font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
   font-size:19px;
@@ -77,136 +107,136 @@
   line-height:28px;
   line-height:var(--rs-text-1-line-height, 28px);
 }
-._themeLight_mt4uu8_45{
+._themeLight_u9pxmr_71{
   color:rgba(25,25,28,0.7);
   color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
 }
-._themeDark_mt4uu8_51{
+._themeDark_u9pxmr_78{
   color:rgba(255,255,255,0.7);
   color:var(--rs-typography-color-average, rgba(255,255,255,0.7));
 }
-._modeClassic_mt4uu8_79._themeLight_mt4uu8_45:active{
+._modeClassic_u9pxmr_107._themeLight_u9pxmr_71:active{
   color:#19191C;
   color:var(--rs-typography-color-hard, #19191C);
   background-color:rgba(107, 87, 255,0.2);
   background-color:var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2));
 }
-._modeClassic_mt4uu8_79._themeDark_mt4uu8_51:active{
+._modeClassic_u9pxmr_107._themeDark_u9pxmr_78:active{
   color:#FFFFFF;
   color:var(--rs-typography-color-hard, #FFFFFF);
   background-color:rgba(132, 115, 255,0.3);
   background-color:var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3));
 }
-._modeClassic_mt4uu8_79._themeLight_mt4uu8_45._selected_mt4uu8_91{
+._modeClassic_u9pxmr_107._themeLight_u9pxmr_71._selected_u9pxmr_119{
   color:#FFFFFF;
   color:var(--rs-typography-color-hard, #FFFFFF);
   background-color:#19191C;
 }
-._modeClassic_mt4uu8_79._themeDark_mt4uu8_51._selected_mt4uu8_91{
+._modeClassic_u9pxmr_107._themeDark_u9pxmr_78._selected_u9pxmr_119{
   color:#19191C;
   color:var(--rs-typography-color-hard, #19191C);
   background-color:#FFFFFF;
 }
-._modeRock_mt4uu8_101._themeLight_mt4uu8_45._selected_mt4uu8_91{
+._modeRock_u9pxmr_129._themeLight_u9pxmr_71._selected_u9pxmr_119{
   color:#FFFFFF;
   color:var(--rs-typography-color-hard, #FFFFFF);
   background-color:#19191C;
 }
-._modeRock_mt4uu8_101._themeDark_mt4uu8_51._selected_mt4uu8_91{
+._modeRock_u9pxmr_129._themeDark_u9pxmr_78._selected_u9pxmr_119{
   color:#19191C;
   color:var(--rs-typography-color-hard, #19191C);
   background-color:#FFFFFF;
 }
-._modeClear_mt4uu8_37._themeLight_mt4uu8_45._selected_mt4uu8_91{
+._modeClear_u9pxmr_63._themeLight_u9pxmr_71._selected_u9pxmr_119{
   color:#6B57FF;
   color:var(--rs-color-primary-light-theme, #6B57FF);
 }
-._modeClear_mt4uu8_37._themeDark_mt4uu8_51._selected_mt4uu8_91{
+._modeClear_u9pxmr_63._themeDark_u9pxmr_78._selected_u9pxmr_119{
   color:#8473FF;
   color:var(--rs-color-primary-dark-theme, #8473FF);
 }
-._disableCursor_mt4uu8_121{
+._disableCursor_u9pxmr_149{
   pointer-events:none;
 }
-._modeClassic_mt4uu8_79._themeLight_mt4uu8_45._highlighted_mt4uu8_125,
-._modeClassic_mt4uu8_79._themeLight_mt4uu8_45:not(._disableCursor_mt4uu8_121):hover{
+._modeClassic_u9pxmr_107._themeLight_u9pxmr_71._highlighted_u9pxmr_154,
+._modeClassic_u9pxmr_107._themeLight_u9pxmr_71:not(._disableCursor_u9pxmr_149):hover{
   color:#19191C;
   color:var(--rs-typography-color-hard, #19191C);
   background-color:rgba(25,25,28,0.1);
 }
-._modeRock_mt4uu8_101._themeLight_mt4uu8_45._highlighted_mt4uu8_125,
-._modeRock_mt4uu8_101._themeLight_mt4uu8_45:not(._disableCursor_mt4uu8_121):hover{
+._modeRock_u9pxmr_129._themeLight_u9pxmr_71._highlighted_u9pxmr_154,
+._modeRock_u9pxmr_129._themeLight_u9pxmr_71:not(._disableCursor_u9pxmr_149):hover{
   color:#FFFFFF;
   color:var(--rs-typography-color-hard, #FFFFFF);
   background-color:#6B57FF;
   background-color:var(--rs-color-primary-light-theme, #6B57FF);
 }
-._modeClassic_mt4uu8_79._themeDark_mt4uu8_51._highlighted_mt4uu8_125,
-._modeClassic_mt4uu8_79._themeDark_mt4uu8_51:not(._disableCursor_mt4uu8_121):hover{
+._modeClassic_u9pxmr_107._themeDark_u9pxmr_78._highlighted_u9pxmr_154,
+._modeClassic_u9pxmr_107._themeDark_u9pxmr_78:not(._disableCursor_u9pxmr_149):hover{
   color:#FFFFFF;
   color:var(--rs-typography-color-hard, #FFFFFF);
   background-color:rgba(255,255,255,0.1);
 }
-._modeRock_mt4uu8_101._themeDark_mt4uu8_51._highlighted_mt4uu8_125,
-._modeRock_mt4uu8_101._themeDark_mt4uu8_51:not(._disableCursor_mt4uu8_121):hover{
+._modeRock_u9pxmr_129._themeDark_u9pxmr_78._highlighted_u9pxmr_154,
+._modeRock_u9pxmr_129._themeDark_u9pxmr_78:not(._disableCursor_u9pxmr_149):hover{
   color:#FFFFFF;
   color:var(--rs-typography-color-hard, #FFFFFF);
   background-color:#8473FF;
   background-color:var(--rs-color-primary-dark-theme, #8473FF);
 }
-._modeClear_mt4uu8_37._themeLight_mt4uu8_45._highlighted_mt4uu8_125,
-._modeClear_mt4uu8_37._themeLight_mt4uu8_45:not(._disableCursor_mt4uu8_121):hover{
+._modeClear_u9pxmr_63._themeLight_u9pxmr_71._highlighted_u9pxmr_154,
+._modeClear_u9pxmr_63._themeLight_u9pxmr_71:not(._disableCursor_u9pxmr_149):hover{
   color:#19191C;
   color:var(--rs-typography-color-hard, #19191C);
 }
-._modeClear_mt4uu8_37._themeDark_mt4uu8_51._highlighted_mt4uu8_125,
-._modeClear_mt4uu8_37._themeDark_mt4uu8_51:not(._disableCursor_mt4uu8_121):hover{
+._modeClear_u9pxmr_63._themeDark_u9pxmr_78._highlighted_u9pxmr_154,
+._modeClear_u9pxmr_63._themeDark_u9pxmr_78:not(._disableCursor_u9pxmr_149):hover{
   color:#FFFFFF;
   color:var(--rs-typography-color-hard, #FFFFFF);
 }
-._modeClassic_mt4uu8_79._themeLight_mt4uu8_45._highlighted_mt4uu8_125._selected_mt4uu8_91,
-._modeClassic_mt4uu8_79._themeLight_mt4uu8_45._selected_mt4uu8_91:not(._disableCursor_mt4uu8_121):hover{
+._modeClassic_u9pxmr_107._themeLight_u9pxmr_71._highlighted_u9pxmr_154._selected_u9pxmr_119,
+._modeClassic_u9pxmr_107._themeLight_u9pxmr_71._selected_u9pxmr_119:not(._disableCursor_u9pxmr_149):hover{
   background-color:#303033;
   color:#FFFFFF;
   color:var(--rs-typography-color-hard, #FFFFFF);
 }
-._modeRock_mt4uu8_101._themeLight_mt4uu8_45._highlighted_mt4uu8_125._selected_mt4uu8_91,
-._modeRock_mt4uu8_101._themeLight_mt4uu8_45._selected_mt4uu8_91:not(._disableCursor_mt4uu8_121):hover{
+._modeRock_u9pxmr_129._themeLight_u9pxmr_71._highlighted_u9pxmr_154._selected_u9pxmr_119,
+._modeRock_u9pxmr_129._themeLight_u9pxmr_71._selected_u9pxmr_119:not(._disableCursor_u9pxmr_149):hover{
   background-color:#303033;
   color:#FFFFFF;
   color:var(--rs-typography-color-hard, #FFFFFF);
 }
-._modeClassic_mt4uu8_79._themeDark_mt4uu8_51._highlighted_mt4uu8_125._selected_mt4uu8_91,
-._modeClassic_mt4uu8_79._themeDark_mt4uu8_51._selected_mt4uu8_91:not(._disableCursor_mt4uu8_121):hover{
+._modeClassic_u9pxmr_107._themeDark_u9pxmr_78._highlighted_u9pxmr_154._selected_u9pxmr_119,
+._modeClassic_u9pxmr_107._themeDark_u9pxmr_78._selected_u9pxmr_119:not(._disableCursor_u9pxmr_149):hover{
   background-color:#E8E8E8;
   color:#19191C;
   color:var(--rs-typography-color-hard, #19191C);
 }
-._modeRock_mt4uu8_101._themeDark_mt4uu8_51._highlighted_mt4uu8_125._selected_mt4uu8_91,
-._modeRock_mt4uu8_101._themeDark_mt4uu8_51._selected_mt4uu8_91:not(._disableCursor_mt4uu8_121):hover{
+._modeRock_u9pxmr_129._themeDark_u9pxmr_78._highlighted_u9pxmr_154._selected_u9pxmr_119,
+._modeRock_u9pxmr_129._themeDark_u9pxmr_78._selected_u9pxmr_119:not(._disableCursor_u9pxmr_149):hover{
   background-color:#E8E8E8;
   color:#19191C;
   color:var(--rs-typography-color-hard, #19191C);
 }
-._modeClear_mt4uu8_37._themeLight_mt4uu8_45._highlighted_mt4uu8_125._selected_mt4uu8_91,
-._modeClear_mt4uu8_37._themeLight_mt4uu8_45._selected_mt4uu8_91:not(._disableCursor_mt4uu8_121):hover{
+._modeClear_u9pxmr_63._themeLight_u9pxmr_71._highlighted_u9pxmr_154._selected_u9pxmr_119,
+._modeClear_u9pxmr_63._themeLight_u9pxmr_71._selected_u9pxmr_119:not(._disableCursor_u9pxmr_149):hover{
   background-color:rgba(25,25,28,0.1);
 }
-._modeClear_mt4uu8_37._themeDark_mt4uu8_51._highlighted_mt4uu8_125._selected_mt4uu8_91,
-._modeClear_mt4uu8_37._themeDark_mt4uu8_51._selected_mt4uu8_91:not(._disableCursor_mt4uu8_121):hover{
+._modeClear_u9pxmr_63._themeDark_u9pxmr_78._highlighted_u9pxmr_154._selected_u9pxmr_119,
+._modeClear_u9pxmr_63._themeDark_u9pxmr_78._selected_u9pxmr_119:not(._disableCursor_u9pxmr_149):hover{
   background-color:rgba(255,255,255,0.1);
 }
-._menuItem_mt4uu8_9._themeLight_mt4uu8_45._disabled_mt4uu8_197{
+._menuItem_u9pxmr_12._themeLight_u9pxmr_71._disabled_u9pxmr_237{
   pointer-events:none;
   color:rgba(25,25,28,0.5);
   color:var(--rs-typography-color-pale, rgba(25,25,28,0.5));
 }
-._menuItem_mt4uu8_9._themeDark_mt4uu8_51._disabled_mt4uu8_197{
+._menuItem_u9pxmr_12._themeDark_u9pxmr_78._disabled_u9pxmr_237{
   pointer-events:none;
   color:rgba(255,255,255,0.5);
   color:var(--rs-typography-color-pale, rgba(255,255,255,0.5));
 }
-._icon_mt4uu8_208{
+._icon_u9pxmr_248{
   -webkit-box-flex:0;
       -ms-flex:0 0;
           flex:0 0;
@@ -214,42 +244,44 @@
       flex-basis:auto;
 
 }
-._sizeS_mt4uu8_25._placementLeft_mt4uu8_212 ._icon_mt4uu8_208{
+._sizeS_u9pxmr_51._placementLeft_u9pxmr_252 ._icon_u9pxmr_248{
     margin-right:8px;
   }
-._sizeS_mt4uu8_25._placementRight_mt4uu8_20 ._icon_mt4uu8_208{
+._sizeS_u9pxmr_51._placementRight_u9pxmr_46 ._icon_u9pxmr_248{
     margin-left:8px;
   }
-._sizeM_mt4uu8_29._placementLeft_mt4uu8_212 ._icon_mt4uu8_208{
+._sizeM_u9pxmr_55._placementLeft_u9pxmr_252 ._icon_u9pxmr_248{
     margin-right:8px;
   }
-._sizeM_mt4uu8_29._placementRight_mt4uu8_20 ._icon_mt4uu8_208{
+._sizeM_u9pxmr_55._placementRight_u9pxmr_46 ._icon_u9pxmr_248{
     margin-left:8px;
   }
-._sizeL_mt4uu8_33._placementLeft_mt4uu8_212 ._icon_mt4uu8_208{
+._sizeL_u9pxmr_59._placementLeft_u9pxmr_252 ._icon_u9pxmr_248{
     margin-right:16px;
   }
-._sizeL_mt4uu8_33._placementRight_mt4uu8_20 ._icon_mt4uu8_208{
+._sizeL_u9pxmr_59._placementRight_u9pxmr_46 ._icon_u9pxmr_248{
     margin-left:16px;
   }
-._divider_mt4uu8_238{
+._divider_u9pxmr_278{
+  -ms-flex-negative:0;
+      flex-shrink:0;
+
   width:100%;
-  border:none;
   height:1px;
   margin:0;
-  -ms-flex-negative:0;
-      flex-shrink:0;
+
+  border:none;
 }
-._divider_mt4uu8_238._themeLight_mt4uu8_45{
+._divider_u9pxmr_278._themeLight_u9pxmr_71{
     background-color:rgba(25,25,28,0.2);
   }
-._divider_mt4uu8_238._themeDark_mt4uu8_51{
+._divider_u9pxmr_278._themeDark_u9pxmr_78{
     background-color:rgba(255,255,255,0.2);
   }
-._groupHeader_mt4uu8_254{
+._groupHeader_u9pxmr_296{
   border:none;
 }
-._groupHeaderSizeL_mt4uu8_258{
+._groupHeaderSizeL_u9pxmr_300{
   padding: 12px 16px;
   letter-spacing:normal;
   font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
@@ -261,7 +293,7 @@
   line-height:28px;
   line-height:var(--rs-h3-line-height, 28px);
 }
-._groupHeaderSizeM_mt4uu8_263{
+._groupHeaderSizeM_u9pxmr_305{
   padding: 8px 16px;
   font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
@@ -272,7 +304,7 @@
   line-height:24px;
   line-height:var(--rs-h4-line-height, 24px);
 }
-._groupHeaderSizeS_mt4uu8_268{
+._groupHeaderSizeS_u9pxmr_310{
   padding: 6px 8px;
   font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
@@ -283,11 +315,11 @@
   line-height:20px;
   line-height:var(--rs-h5-line-height, 20px);
 }
-._themeLight_mt4uu8_45{
+._themeLight_u9pxmr_71{
   color:#19191C;
   color:var(--rs-typography-color-hard, #19191C);
 }
-._themeDark_mt4uu8_51{
+._themeDark_u9pxmr_78{
   color:#FFFFFF;
   color:var(--rs-typography-color-hard, #FFFFFF);
 }

package/lib/index.module.pcss.js

@@ -1,26 +1,28 @@
 var styles = {
-  "menuItem": "_menuItem_mt4uu8_9",
-  "content": "_content_mt4uu8_15",
-  "placementRight": "_placementRight_mt4uu8_20",
-  "sizeS": "_sizeS_mt4uu8_25",
-  "sizeM": "_sizeM_mt4uu8_29",
-  "sizeL": "_sizeL_mt4uu8_33",
-  "modeClear": "_modeClear_mt4uu8_37",
-  "themeLight": "_themeLight_mt4uu8_45",
-  "themeDark": "_themeDark_mt4uu8_51",
-  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_mt4uu8_1",
-  "modeClassic": "_modeClassic_mt4uu8_79",
-  "selected": "_selected_mt4uu8_91",
-  "modeRock": "_modeRock_mt4uu8_101",
-  "disableCursor": "_disableCursor_mt4uu8_121",
-  "highlighted": "_highlighted_mt4uu8_125",
-  "disabled": "_disabled_mt4uu8_197",
-  "icon": "_icon_mt4uu8_208",
-  "placementLeft": "_placementLeft_mt4uu8_212",
-  "divider": "_divider_mt4uu8_238",
-  "groupHeader": "_groupHeader_mt4uu8_254",
-  "groupHeaderSizeL": "_groupHeaderSizeL_mt4uu8_258",
-  "groupHeaderSizeM": "_groupHeaderSizeM_mt4uu8_263",
-  "groupHeaderSizeS": "_groupHeaderSizeS_mt4uu8_268"
+  "wrapper": "_wrapper_u9pxmr_8",
+  "menuItem": "_menuItem_u9pxmr_12",
+  "content": "_content_u9pxmr_40",
+  "placementRight": "_placementRight_u9pxmr_46",
+  "sizeS": "_sizeS_u9pxmr_51",
+  "sizeM": "_sizeM_u9pxmr_55",
+  "sizeL": "_sizeL_u9pxmr_59",
+  "modeClear": "_modeClear_u9pxmr_63",
+  "keyboardNavigationDisabled": "_keyboardNavigationDisabled_u9pxmr_71",
+  "themeLight": "_themeLight_u9pxmr_71",
+  "themeDark": "_themeDark_u9pxmr_78",
+  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_u9pxmr_1",
+  "modeClassic": "_modeClassic_u9pxmr_107",
+  "selected": "_selected_u9pxmr_119",
+  "modeRock": "_modeRock_u9pxmr_129",
+  "disableCursor": "_disableCursor_u9pxmr_149",
+  "highlighted": "_highlighted_u9pxmr_154",
+  "disabled": "_disabled_u9pxmr_237",
+  "icon": "_icon_u9pxmr_248",
+  "placementLeft": "_placementLeft_u9pxmr_252",
+  "divider": "_divider_u9pxmr_278",
+  "groupHeader": "_groupHeader_u9pxmr_296",
+  "groupHeaderSizeL": "_groupHeaderSizeL_u9pxmr_300",
+  "groupHeaderSizeM": "_groupHeaderSizeM_u9pxmr_305",
+  "groupHeaderSizeS": "_groupHeaderSizeS_u9pxmr_310"
 };
-export default styles;
+export { styles as default };

package/lib/menu.d.ts

@@ -1,8 +1,12 @@
 import React, { HTMLAttributes, ReactNode } from 'react';
 import { MenuContextValue } from './parts/menu-context';
-interface MenuProps extends HTMLAttributes<HTMLElement>, MenuContextValue {
+export interface MenuProps extends HTMLAttributes<HTMLElement>, Omit<MenuContextValue, 'isKeyboardNavigating' | 'activeItemRef' | 'wrapWithLi'> {
     children?: ReactNode;
     tag?: React.ElementType;
+    enableKeyboardNavigation?: boolean;
+    activateFirstItem?: boolean;
+    returnFocusOnUnmount?: boolean;
+    wrapItemsWithLi?: boolean;
 }
 export declare const Menu: React.FC<MenuProps>;
 export default Menu;

package/lib/menu.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/web.dom-collections.for-each.js";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
@@ -6,23 +7,24 @@ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-sta
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["tag", "itemTag", "iconPlacement", "disabled", "size", "mode", "disableCursor", "theme"];
+var _excluded = ["tag", "itemTag", "iconPlacement", "disabled", "size", "mode", "disableCursor", "theme", "enableKeyboardNavigation", "activateFirstItem", "className", "wrapItemsWithLi", "returnFocusOnUnmount"];
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import cn from 'classnames';
 import { MenuProvider } from './parts/menu-context.js';
+import styles from './index.module.pcss.js';
+import { useMenuKeyboardNavigation } from './parts/use-menu-keyboard-navigation.js';
 
 var Menu = function Menu(_ref) {
   var _ref$tag = _ref.tag,
       tag = _ref$tag === void 0 ? 'ul' : _ref$tag,
-      _ref$itemTag = _ref.itemTag,
-      itemTag = _ref$itemTag === void 0 ? 'li' : _ref$itemTag,
-      _ref$iconPlacement = _ref.iconPlacement,
-      iconPlacement = _ref$iconPlacement === void 0 ? 'left' : _ref$iconPlacement,
+      itemTag = _ref.itemTag,
+      iconPlacement = _ref.iconPlacement,
       disabled = _ref.disabled,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'm' : _ref$size,
@@ -30,18 +32,44 @@ var Menu = function Menu(_ref) {
       _ref$disableCursor = _ref.disableCursor,
       disableCursor = _ref$disableCursor === void 0 ? false : _ref$disableCursor,
       theme = _ref.theme,
+      _ref$enableKeyboardNa = _ref.enableKeyboardNavigation,
+      enableKeyboardNavigation = _ref$enableKeyboardNa === void 0 ? false : _ref$enableKeyboardNa,
+      _ref$activateFirstIte = _ref.activateFirstItem,
+      activateFirstItem = _ref$activateFirstIte === void 0 ? false : _ref$activateFirstIte,
+      className = _ref.className,
+      wrapItemsWithLi = _ref.wrapItemsWithLi,
+      _ref$returnFocusOnUnm = _ref.returnFocusOnUnmount,
+      returnFocusOnUnmount = _ref$returnFocusOnUnm === void 0 ? false : _ref$returnFocusOnUnm,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
   var Tag = tag;
+
+  var _useMenuKeyboardNavig = useMenuKeyboardNavigation({
+    enableKeyboardNavigation: enableKeyboardNavigation,
+    activateFirstItem: activateFirstItem,
+    returnFocusOnUnmount: returnFocusOnUnmount
+  }),
+      activeItemRef = _useMenuKeyboardNavig.activeItemRef,
+      registerItem = _useMenuKeyboardNavig.registerItem,
+      unregisterItem = _useMenuKeyboardNavig.unregisterItem,
+      isKeyboardNavigating = _useMenuKeyboardNavig.isKeyboardNavigating;
+
   return /*#__PURE__*/React.createElement(MenuProvider, {
     itemTag: itemTag,
     iconPlacement: iconPlacement,
     disabled: disabled,
     size: size,
-    disableCursor: disableCursor,
+    disableCursor: disableCursor || isKeyboardNavigating,
     mode: mode,
-    theme: theme
-  }, /*#__PURE__*/React.createElement(Tag, _objectSpread({}, restProps)));
+    theme: theme,
+    registerItem: registerItem,
+    unregisterItem: unregisterItem,
+    activeItemRef: activeItemRef.current,
+    isKeyboardNavigating: isKeyboardNavigating,
+    wrapWithLi: wrapItemsWithLi !== null && wrapItemsWithLi !== void 0 ? wrapItemsWithLi : tag === 'ul'
+  }, /*#__PURE__*/React.createElement(Tag, _objectSpread({
+    className: cn(!enableKeyboardNavigation && styles.keyboardNavigationDisabled, className)
+  }, restProps)));
 };
 
 Menu.propTypes = {
@@ -54,5 +82,4 @@ Menu.propTypes = {
   itemTag: PropTypes.elementType,
   tag: PropTypes.elementType
 };
-export default Menu;
-export { Menu };
+export { Menu, Menu as default };

package/lib/parts/divider.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/web.dom-collections.for-each.js";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
@@ -8,9 +9,9 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "theme"];
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React from 'react';
 import cn from 'classnames';
@@ -41,4 +42,4 @@ Divider.propTypes = {
   className: PropTypes.string,
   theme: PropTypes.oneOf(['light', 'dark'])
 };
-export default Divider;
+export { Divider as default };

package/lib/parts/group-header.js

@@ -37,4 +37,4 @@ GroupHeader.propTypes = {
   theme: PropTypes.oneOf(['light', 'dark']),
   text: PropTypes.string
 };
-export default GroupHeader;
+export { GroupHeader as default };

package/lib/parts/menu-context.d.ts

@@ -11,6 +11,11 @@ export interface MenuContextValue {
     mode?: MenuItemMode;
     theme?: Theme;
     itemTag?: React.ElementType;
+    wrapWithLi: boolean;
+    registerItem?: (ref: HTMLElement) => void;
+    unregisterItem?: (ref: HTMLElement) => void;
+    activeItemRef?: HTMLElement;
+    isKeyboardNavigating: boolean;
 }
 export declare const DEFAULT_MENU_CONTEXT: MenuContextValue;
 export declare const MenuContext: React.Context<MenuContextValue>;

package/lib/parts/menu-context.js

@@ -3,7 +3,13 @@ var _excluded = ["children"];
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 var DEFAULT_MENU_CONTEXT = {
-  disabled: false
+  disabled: false,
+  isKeyboardNavigating: false,
+  wrapWithLi: false,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  registerItem: function registerItem() {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  unregisterItem: function unregisterItem() {}
 };
 var MenuContext = /*#__PURE__*/React.createContext(DEFAULT_MENU_CONTEXT);
 

package/lib/parts/menu-item.d.ts

@@ -1,7 +1,7 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
+import React, { AllHTMLAttributes, ReactNode } from 'react';
 import { Theme } from '@rescui/ui-contexts';
 import { MenuItemSize, MenuItemMode, MenuItemIconPlacement } from './menu-context';
-interface MenuItemProps extends HTMLAttributes<Element> {
+interface MenuItemProps extends Omit<AllHTMLAttributes<Element>, 'size'> {
     className?: string;
     tag?: React.ElementType;
     icon?: JSX.Element;
@@ -14,6 +14,7 @@ interface MenuItemProps extends HTMLAttributes<Element> {
     highlighted?: boolean;
     iconPlacement?: MenuItemIconPlacement;
     children?: ReactNode;
+    key?: string;
 }
 export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLElement>>;
 export default MenuItem;

package/lib/parts/menu-item.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/web.dom-collections.for-each.js";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
@@ -5,14 +6,17 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "tag", "children", "icon", "size", "mode", "theme", "disabled", "disableCursor", "selected", "highlighted", "iconPlacement"];
+var _excluded = ["className", "tag", "children", "icon", "size", "mode", "theme", "disabled", "disableCursor", "selected", "highlighted", "iconPlacement"],
+    _excluded2 = ["unregisterItem", "registerItem", "activeItemRef", "isKeyboardNavigating", "wrapWithLi"];
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import React, { cloneElement } from 'react';
+import React, { useState, useEffect, cloneElement, Fragment } from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 import { useTheme } from '@rescui/ui-contexts';
@@ -38,11 +42,10 @@ var THEME_STYLES = {
 }; // eslint-disable-next-line complexity
 
 var MenuItemInner = function MenuItemInner(_ref, ref) {
-  var _menuContext$theme, _menuContext$itemTag, _menuContext$iconPlac, _menuContext$mode, _menuContext$size, _menuContext$disableC;
+  var _menuContext$theme, _ref2, _menuContext$itemTag, _ref3, _menuContext$iconPlac, _menuContext$mode, _menuContext$size, _menuContext$disableC;
 
   var className = _ref.className,
-      _ref$tag = _ref.tag,
-      tag = _ref$tag === void 0 ? 'span' : _ref$tag,
+      tag = _ref.tag,
       children = _ref.children,
       icon = _ref.icon,
       _ref$size = _ref.size,
@@ -58,24 +61,77 @@ var MenuItemInner = function MenuItemInner(_ref, ref) {
       iconPlacement = _ref$iconPlacement === void 0 ? 'left' : _ref$iconPlacement,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var menuContext = useMenuContext();
+  var _useMenuContext = useMenuContext(),
+      unregisterItem = _useMenuContext.unregisterItem,
+      registerItem = _useMenuContext.registerItem,
+      activeItemRef = _useMenuContext.activeItemRef,
+      isKeyboardNavigating = _useMenuContext.isKeyboardNavigating,
+      wrapWithLi = _useMenuContext.wrapWithLi,
+      menuContext = _objectWithoutProperties(_useMenuContext, _excluded2);
+
   var actualTheme = useTheme((_menuContext$theme = menuContext.theme) !== null && _menuContext$theme !== void 0 ? _menuContext$theme : theme);
-  var Tag = (_menuContext$itemTag = menuContext.itemTag) !== null && _menuContext$itemTag !== void 0 ? _menuContext$itemTag : tag;
-  var actualIconPlacement = (_menuContext$iconPlac = menuContext.iconPlacement) !== null && _menuContext$iconPlac !== void 0 ? _menuContext$iconPlac : iconPlacement;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      thisRef = _useState2[0],
+      setThisRef = _useState2[1];
+
+  useEffect(function () {
+    return function () {
+      return unregisterItem(thisRef);
+    };
+  }, [unregisterItem, thisRef]);
+  var autoTag = 'span';
+
+  if (restProps.href) {
+    autoTag = 'a';
+  } else if (restProps.onClick) {
+    autoTag = 'button';
+  }
+
+  var Tag = (_ref2 = (_menuContext$itemTag = menuContext.itemTag) !== null && _menuContext$itemTag !== void 0 ? _menuContext$itemTag : tag) !== null && _ref2 !== void 0 ? _ref2 : autoTag;
+  var actualIconPlacement = (_ref3 = (_menuContext$iconPlac = menuContext.iconPlacement) !== null && _menuContext$iconPlac !== void 0 ? _menuContext$iconPlac : iconPlacement) !== null && _ref3 !== void 0 ? _ref3 : 'left';
   var actualMode = (_menuContext$mode = menuContext.mode) !== null && _menuContext$mode !== void 0 ? _menuContext$mode : mode;
   var actualSize = (_menuContext$size = menuContext.size) !== null && _menuContext$size !== void 0 ? _menuContext$size : size;
   var actualDisableCursor = (_menuContext$disableC = menuContext.disableCursor) !== null && _menuContext$disableC !== void 0 ? _menuContext$disableC : disableCursor;
   var iconElement = icon ? /*#__PURE__*/cloneElement(icon, {
     className: cn(icon.props.className, styles.icon)
   }) : null;
-  return /*#__PURE__*/React.createElement(Tag, _objectSpread({
-    ref: ref,
-    className: cn(styles.menuItem, ICON_PLACEMENT_STYLES[actualIconPlacement], MODE_STYLES[actualMode], SIZE_STYLES[actualSize], THEME_STYLES[actualTheme], (menuContext.disabled || disabled) && styles.disabled, selected && styles.selected, highlighted && styles.highlighted, actualDisableCursor && styles.disableCursor, className),
+  var actualHighlighted = highlighted || activeItemRef === thisRef && isKeyboardNavigating;
+
+  var handleRef = function handleRef(r) {
+    registerItem(r);
+    setThisRef(r);
+
+    if (typeof ref === 'function') {
+      ref(r);
+    } else if (ref != null && _typeof(ref) === 'object') {
+      ref.current = r;
+    }
+  };
+
+  var handleKeyDown = function handleKeyDown(e) {
+    if (isKeyboardNavigating && (e.key === ' ' || e.key === 'Enter')) {
+      e.preventDefault();
+
+      if (e.target && e.target.click) {
+        e.target.click();
+      }
+    }
+  };
+
+  var Wrapper = wrapWithLi ? 'li' : Fragment;
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    className: styles.wrapper
+  }, /*#__PURE__*/React.createElement(Tag, _objectSpread({
+    onKeyDown: handleKeyDown,
+    ref: handleRef,
+    className: cn(styles.menuItem, ICON_PLACEMENT_STYLES[actualIconPlacement], MODE_STYLES[actualMode], SIZE_STYLES[actualSize], THEME_STYLES[actualTheme], (menuContext.disabled || disabled) && styles.disabled, selected && styles.selected, actualHighlighted && styles.highlighted, actualDisableCursor && styles.disableCursor, className),
     "data-test": 'menu-item',
     tabIndex: 0
   }, restProps), actualIconPlacement === 'left' && iconElement, /*#__PURE__*/React.createElement("span", {
     className: styles.content
-  }, children), actualIconPlacement === 'right' && iconElement);
+  }, children), actualIconPlacement === 'right' && iconElement));
 };
 
 var MenuItem = /*#__PURE__*/React.forwardRef(MenuItemInner);
@@ -94,5 +150,4 @@ MenuItem.propTypes = {
   iconPlacement: PropTypes.oneOf(['left', 'right']),
   tag: PropTypes.elementType
 };
-export default MenuItem;
-export { MenuItem };
+export { MenuItem, MenuItem as default };

package/lib/parts/navigation-utils.d.ts

@@ -0,0 +1,5 @@
+export declare function getFirstItem(sortedItems: HTMLElement[]): HTMLElement;
+export declare function getLastItem(sortedItems: HTMLElement[]): HTMLElement;
+export declare function getNextItem(sortedItems: HTMLElement[], activeItem: HTMLElement): HTMLElement;
+export declare function getPrevItem(sortedItems: HTMLElement[], activeItem: HTMLElement): HTMLElement;
+export declare function htmlElementsComparator(a: HTMLElement, b: HTMLElement): 0 | 1 | -1;

package/lib/parts/navigation-utils.js

@@ -0,0 +1,59 @@
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
+
+function getFirstItem(sortedItems) {
+  return sortedItems[0];
+}
+
+function getLastItem(sortedItems) {
+  return sortedItems[sortedItems.length - 1];
+}
+
+function getNextItem(sortedItems, activeItem) {
+  var focusedIndex = _findIndexInstanceProperty(sortedItems).call(sortedItems, function (el) {
+    return el === activeItem;
+  });
+
+  var indexToFocus = focusedIndex + 1;
+
+  if (indexToFocus < sortedItems.length) {
+    return sortedItems[indexToFocus];
+  } else {
+    return getFirstItem(sortedItems);
+  }
+}
+
+function getPrevItem(sortedItems, activeItem) {
+  var focusedIndex = _findIndexInstanceProperty(sortedItems).call(sortedItems, function (el) {
+    return el === activeItem;
+  });
+
+  var indexToFocus = focusedIndex - 1;
+
+  if (indexToFocus >= 0) {
+    return sortedItems[indexToFocus];
+  } else {
+    return getLastItem(sortedItems);
+  }
+}
+
+function htmlElementsComparator(a, b) {
+  if (a.offsetTop > b.offsetTop) {
+    return 1;
+  }
+
+  if (a.offsetTop < b.offsetTop) {
+    return -1;
+  }
+
+  if (a.offsetLeft > b.offsetLeft) {
+    return 1;
+  }
+
+  if (a.offsetLeft < b.offsetLeft) {
+    return -1;
+  }
+
+  return 0;
+}
+
+export { getFirstItem, getLastItem, getNextItem, getPrevItem, htmlElementsComparator };

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+interface UseMenuKeyboardNavigationParams {
+    enableKeyboardNavigation: boolean;
+    activateFirstItem: boolean;
+    returnFocusOnUnmount: boolean;
+}
+export declare function useMenuKeyboardNavigation({ enableKeyboardNavigation, activateFirstItem, returnFocusOnUnmount }: UseMenuKeyboardNavigationParams): {
+    activeItemRef: import("react").MutableRefObject<any>;
+    registerItem: (ref: HTMLElement) => void;
+    unregisterItem: (ref: HTMLElement) => void;
+    isKeyboardNavigating: boolean;
+};
+export {};

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

@@ -0,0 +1,152 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/values";
+import _Set from "@babel/runtime-corejs3/core-js-stable/set";
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { htmlElementsComparator, getFirstItem, getLastItem, getPrevItem, getNextItem } from './navigation-utils.js';
+
+function debounce(callback, timeout) {
+  var 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(function () {
+      return callback.apply(void 0, args);
+    }, timeout);
+    return id;
+  };
+}
+
+function getSortedItems(itemsSet) {
+  var _context;
+
+  return _sortInstanceProperty(_context = _Array$from(_valuesInstanceProperty(itemsSet).call(itemsSet))).call(_context, htmlElementsComparator);
+}
+
+function useMenuKeyboardNavigation(_ref) {
+  var enableKeyboardNavigation = _ref.enableKeyboardNavigation,
+      activateFirstItem = _ref.activateFirstItem,
+      returnFocusOnUnmount = _ref.returnFocusOnUnmount;
+  var activeItemRef = useRef(null);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      setDummyState = _useState2[1];
+
+  var setActiveItemRef = useCallback(function (ref) {
+    activeItemRef.current = ref;
+
+    if (ref) {
+      ref.focus();
+    }
+
+    setDummyState(function (t) {
+      return !t;
+    });
+  }, [setDummyState]);
+  var menuItemsSet = useRef(new _Set());
+  useEffect(function () {
+    if (!enableKeyboardNavigation || !activateFirstItem || !returnFocusOnUnmount) {
+      return;
+    }
+
+    var lastFocusedEl = document.activeElement; // eslint-disable-next-line consistent-return
+
+    return function () {
+      if (lastFocusedEl) {
+        lastFocusedEl.focus({
+          preventScroll: true
+        });
+      }
+    };
+  }, []);
+  var debouncedActivateFirstItem = debounce(function () {
+    var items = getSortedItems(menuItemsSet.current);
+    setActiveItemRef(getFirstItem(items));
+  }, 50);
+  var registerItem = useCallback(function (ref) {
+    if (ref && !menuItemsSet.current.has(ref)) {
+      menuItemsSet.current.add(ref);
+
+      if (activateFirstItem) {
+        debouncedActivateFirstItem();
+      }
+    }
+  }, []);
+  var unregisterItem = useCallback(function (ref) {
+    menuItemsSet.current.delete(ref);
+  }, []);
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isKeyboardNavigating = _useState4[0],
+      setIsKeyboardNavigating = _useState4[1];
+
+  var handleMouseMove = useCallback(function () {
+    if (menuItemsSet.current.has(document.activeElement) && document.activeElement.blur) {
+      document.activeElement.blur();
+    }
+
+    setActiveItemRef(null);
+    setIsKeyboardNavigating(false);
+  }, []); // eslint-disable-next-line consistent-return
+
+  useEffect(function () {
+    if (isKeyboardNavigating) {
+      document.addEventListener('mousemove', handleMouseMove);
+      return function () {
+        return document.removeEventListener('mousemove', handleMouseMove);
+      };
+    }
+  }, [handleMouseMove, isKeyboardNavigating]);
+  useEffect(function () {
+    if (!enableKeyboardNavigation) {
+      return;
+    }
+
+    var handler = function handler(e) {
+      setIsKeyboardNavigating(true);
+      var 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;
+      }
+    };
+
+    document.addEventListener('keydown', handler, true); // eslint-disable-next-line consistent-return
+
+    return function () {
+      document.removeEventListener('keydown', handler, true);
+    };
+  }, [enableKeyboardNavigation]);
+  return {
+    activeItemRef: activeItemRef,
+    registerItem: registerItem,
+    unregisterItem: unregisterItem,
+    isKeyboardNavigating: isKeyboardNavigating
+  };
+}
+
+export { useMenuKeyboardNavigation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/menu",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -17,23 +17,24 @@
   "dependencies": {
     "@babel/runtime-corejs3": "^7.11.0",
     "classnames": "^2.2.6",
-    "core-js": "^3"
+    "core-js": "^3",
+    "nanoid": "^3.3.3"
   },
   "peerDependencies": {
-    "@rescui/ui-contexts": "<0.3.0",
+    "@rescui/ui-contexts": "<0.4.0",
     "prop-types": "^15.7.2",
     "react": ">=16.8.0 <18"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.1.0",
-    "@rescui/postcss-preset-library": "^0.0.4",
-    "@rescui/scripts": "^0.1.4",
-    "@rescui/typography": "^0.7.0",
+    "@rescui/colors": "^0.1.1",
+    "@rescui/postcss-preset-library": "^0.0.5",
+    "@rescui/scripts": "^0.1.5",
+    "@rescui/typography": "^0.7.3",
     "@rescui/visual-regression": "^0.0.1",
     "postcss": "^8.3.0"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
-  "gitHead": "b9d865165f162732befa0868ea1325d064313d9e"
+  "gitHead": "0747cafd54c577bb1658dce2ab5e6900ff0854b6"
 }