@rescui/menu 0.4.0 → 0.6.0

package/lib/index.css

@@ -1,49 +1,79 @@
-._menuItem_1mmvlwv_9{
+._wrapper_1598w8h_8{
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
+}
+._menuItem_1598w8h_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_1mmvlwv_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_1598w8h_12:focus{
+    outline:none;
+  }
+._content_1598w8h_40{
   -webkit-box-flex:1;
       -ms-flex-positive:1;
           flex-grow:1;
+
   font-size:inherit;
 }
-._placementRight_1mmvlwv_20{
+._placementRight_1598w8h_46{
   -webkit-box-pack:justify;
       -ms-flex-pack:justify;
           justify-content:space-between;
 }
-._sizeS_1mmvlwv_25{
+._sizeS_1598w8h_51{
   padding: 6px 8px;
 }
-._sizeM_1mmvlwv_29{
+._sizeM_1598w8h_55{
   padding: 8px 16px;
 }
-._sizeL_1mmvlwv_33{
+._sizeL_1598w8h_59{
   padding: 12px 16px;
 }
-._modeClear_1mmvlwv_37._sizeS_1mmvlwv_25,
-._modeClear_1mmvlwv_37._sizeM_1mmvlwv_29,
-._modeClear_1mmvlwv_37._sizeL_1mmvlwv_33{
-  padding-left:0;
+._modeClear_1598w8h_63._sizeS_1598w8h_51,
+._modeClear_1598w8h_63._sizeM_1598w8h_55,
+._modeClear_1598w8h_63._sizeL_1598w8h_59{
   padding-right:0;
+  padding-left:0;
 }
-._themeLight_1mmvlwv_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_1598w8h_71 ._themeLight_1598w8h_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_1mmvlwv_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_1598w8h_71 ._themeDark_1598w8h_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_1mmvlwv_25{
+._sizeS_1598w8h_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_1mmvlwv_1 ._sizeS_1mmvlwv_25{
+._rs-reset-letter-spacing_1598w8h_1 ._sizeS_1598w8h_51{
     letter-spacing:normal;
   }
-._sizeM_1mmvlwv_29{
+._sizeM_1598w8h_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_1mmvlwv_1 ._sizeM_1mmvlwv_29{
+._rs-reset-letter-spacing_1598w8h_1 ._sizeM_1598w8h_55{
     letter-spacing:normal;
   }
-._sizeL_1mmvlwv_33{
+._sizeL_1598w8h_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,118 +107,136 @@
   line-height:28px;
   line-height:var(--rs-text-1-line-height, 28px);
 }
-._themeLight_1mmvlwv_45{
+._themeLight_1598w8h_71{
   color:rgba(25,25,28,0.7);
   color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
 }
-._themeDark_1mmvlwv_51{
+._themeDark_1598w8h_78{
   color:rgba(255,255,255,0.7);
   color:var(--rs-typography-color-average, rgba(255,255,255,0.7));
 }
-._modeClassic_1mmvlwv_79._themeLight_1mmvlwv_45:active{
+._modeClassic_1598w8h_107._themeLight_1598w8h_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_1mmvlwv_79._themeDark_1mmvlwv_51:active{
+._modeClassic_1598w8h_107._themeDark_1598w8h_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_1mmvlwv_79._themeLight_1mmvlwv_45._selected_1mmvlwv_91{
+._modeClassic_1598w8h_107._themeLight_1598w8h_71._selected_1598w8h_119{
   color:#FFFFFF;
+  color:var(--rs-typography-color-hard, #FFFFFF);
   background-color:#19191C;
 }
-._modeClassic_1mmvlwv_79._themeDark_1mmvlwv_51._selected_1mmvlwv_91{
+._modeClassic_1598w8h_107._themeDark_1598w8h_78._selected_1598w8h_119{
   color:#19191C;
+  color:var(--rs-typography-color-hard, #19191C);
   background-color:#FFFFFF;
 }
-._modeRock_1mmvlwv_101._themeLight_1mmvlwv_45._selected_1mmvlwv_91{
+._modeRock_1598w8h_129._themeLight_1598w8h_71._selected_1598w8h_119{
   color:#FFFFFF;
+  color:var(--rs-typography-color-hard, #FFFFFF);
   background-color:#19191C;
 }
-._modeRock_1mmvlwv_101._themeDark_1mmvlwv_51._selected_1mmvlwv_91{
+._modeRock_1598w8h_129._themeDark_1598w8h_78._selected_1598w8h_119{
   color:#19191C;
+  color:var(--rs-typography-color-hard, #19191C);
   background-color:#FFFFFF;
 }
-._modeClear_1mmvlwv_37._themeLight_1mmvlwv_45._selected_1mmvlwv_91{
+._modeClear_1598w8h_63._themeLight_1598w8h_71._selected_1598w8h_119{
   color:#6B57FF;
   color:var(--rs-color-primary-light-theme, #6B57FF);
 }
-._modeClear_1mmvlwv_37._themeDark_1mmvlwv_51._selected_1mmvlwv_91{
+._modeClear_1598w8h_63._themeDark_1598w8h_78._selected_1598w8h_119{
   color:#8473FF;
   color:var(--rs-color-primary-dark-theme, #8473FF);
 }
-._disableCursor_1mmvlwv_121{
+._disableCursor_1598w8h_149{
   pointer-events:none;
 }
-._modeClassic_1mmvlwv_79._themeLight_1mmvlwv_45._highlighted_1mmvlwv_125,
-._modeClassic_1mmvlwv_79._themeLight_1mmvlwv_45:not(._disableCursor_1mmvlwv_121):hover{
+._modeClassic_1598w8h_107._themeLight_1598w8h_71._highlighted_1598w8h_154,
+._modeClassic_1598w8h_107._themeLight_1598w8h_71:not(._disableCursor_1598w8h_149):hover{
   color:#19191C;
+  color:var(--rs-typography-color-hard, #19191C);
   background-color:rgba(25,25,28,0.1);
 }
-._modeRock_1mmvlwv_101._themeLight_1mmvlwv_45._highlighted_1mmvlwv_125,
-._modeRock_1mmvlwv_101._themeLight_1mmvlwv_45:not(._disableCursor_1mmvlwv_121):hover{
+._modeRock_1598w8h_129._themeLight_1598w8h_71._highlighted_1598w8h_154,
+._modeRock_1598w8h_129._themeLight_1598w8h_71:not(._disableCursor_1598w8h_149):hover{
   color:#FFFFFF;
+  color:var(--rs-typography-color-hard, #FFFFFF);
   background-color:#6B57FF;
   background-color:var(--rs-color-primary-light-theme, #6B57FF);
 }
-._modeClassic_1mmvlwv_79._themeDark_1mmvlwv_51._highlighted_1mmvlwv_125,
-._modeClassic_1mmvlwv_79._themeDark_1mmvlwv_51:not(._disableCursor_1mmvlwv_121):hover{
+._modeClassic_1598w8h_107._themeDark_1598w8h_78._highlighted_1598w8h_154,
+._modeClassic_1598w8h_107._themeDark_1598w8h_78:not(._disableCursor_1598w8h_149):hover{
   color:#FFFFFF;
+  color:var(--rs-typography-color-hard, #FFFFFF);
   background-color:rgba(255,255,255,0.1);
 }
-._modeRock_1mmvlwv_101._themeDark_1mmvlwv_51._highlighted_1mmvlwv_125,
-._modeRock_1mmvlwv_101._themeDark_1mmvlwv_51:not(._disableCursor_1mmvlwv_121):hover{
+._modeRock_1598w8h_129._themeDark_1598w8h_78._highlighted_1598w8h_154,
+._modeRock_1598w8h_129._themeDark_1598w8h_78:not(._disableCursor_1598w8h_149):hover{
   color:#FFFFFF;
+  color:var(--rs-typography-color-hard, #FFFFFF);
   background-color:#8473FF;
   background-color:var(--rs-color-primary-dark-theme, #8473FF);
 }
-._modeClear_1mmvlwv_37._themeLight_1mmvlwv_45._highlighted_1mmvlwv_125,
-._modeClear_1mmvlwv_37._themeLight_1mmvlwv_45:not(._disableCursor_1mmvlwv_121):hover{
+._modeClear_1598w8h_63._themeLight_1598w8h_71._highlighted_1598w8h_154,
+._modeClear_1598w8h_63._themeLight_1598w8h_71:not(._disableCursor_1598w8h_149):hover{
   color:#19191C;
+  color:var(--rs-typography-color-hard, #19191C);
 }
-._modeClear_1mmvlwv_37._themeDark_1mmvlwv_51._highlighted_1mmvlwv_125,
-._modeClear_1mmvlwv_37._themeDark_1mmvlwv_51:not(._disableCursor_1mmvlwv_121):hover{
+._modeClear_1598w8h_63._themeDark_1598w8h_78._highlighted_1598w8h_154,
+._modeClear_1598w8h_63._themeDark_1598w8h_78:not(._disableCursor_1598w8h_149):hover{
   color:#FFFFFF;
+  color:var(--rs-typography-color-hard, #FFFFFF);
 }
-._modeClassic_1mmvlwv_79._themeLight_1mmvlwv_45._highlighted_1mmvlwv_125._selected_1mmvlwv_91,
-._modeClassic_1mmvlwv_79._themeLight_1mmvlwv_45._selected_1mmvlwv_91:not(._disableCursor_1mmvlwv_121):hover{
+._modeClassic_1598w8h_107._themeLight_1598w8h_71._highlighted_1598w8h_154._selected_1598w8h_119,
+._modeClassic_1598w8h_107._themeLight_1598w8h_71._selected_1598w8h_119:not(._disableCursor_1598w8h_149):hover{
   background-color:#303033;
   color:#FFFFFF;
+  color:var(--rs-typography-color-hard, #FFFFFF);
 }
-._modeRock_1mmvlwv_101._themeLight_1mmvlwv_45._highlighted_1mmvlwv_125._selected_1mmvlwv_91,
-._modeRock_1mmvlwv_101._themeLight_1mmvlwv_45._selected_1mmvlwv_91:not(._disableCursor_1mmvlwv_121):hover{
+._modeRock_1598w8h_129._themeLight_1598w8h_71._highlighted_1598w8h_154._selected_1598w8h_119,
+._modeRock_1598w8h_129._themeLight_1598w8h_71._selected_1598w8h_119:not(._disableCursor_1598w8h_149):hover{
   background-color:#303033;
   color:#FFFFFF;
+  color:var(--rs-typography-color-hard, #FFFFFF);
 }
-._modeClassic_1mmvlwv_79._themeDark_1mmvlwv_51._highlighted_1mmvlwv_125._selected_1mmvlwv_91,
-._modeClassic_1mmvlwv_79._themeDark_1mmvlwv_51._selected_1mmvlwv_91:not(._disableCursor_1mmvlwv_121):hover{
+._modeClassic_1598w8h_107._themeDark_1598w8h_78._highlighted_1598w8h_154._selected_1598w8h_119,
+._modeClassic_1598w8h_107._themeDark_1598w8h_78._selected_1598w8h_119:not(._disableCursor_1598w8h_149):hover{
   background-color:#E8E8E8;
   color:#19191C;
+  color:var(--rs-typography-color-hard, #19191C);
 }
-._modeRock_1mmvlwv_101._themeDark_1mmvlwv_51._highlighted_1mmvlwv_125._selected_1mmvlwv_91,
-._modeRock_1mmvlwv_101._themeDark_1mmvlwv_51._selected_1mmvlwv_91:not(._disableCursor_1mmvlwv_121):hover{
+._modeRock_1598w8h_129._themeDark_1598w8h_78._highlighted_1598w8h_154._selected_1598w8h_119,
+._modeRock_1598w8h_129._themeDark_1598w8h_78._selected_1598w8h_119:not(._disableCursor_1598w8h_149):hover{
   background-color:#E8E8E8;
   color:#19191C;
+  color:var(--rs-typography-color-hard, #19191C);
 }
-._modeClear_1mmvlwv_37._themeLight_1mmvlwv_45._highlighted_1mmvlwv_125._selected_1mmvlwv_91,
-._modeClear_1mmvlwv_37._themeLight_1mmvlwv_45._selected_1mmvlwv_91:not(._disableCursor_1mmvlwv_121):hover{
+._modeClear_1598w8h_63._themeLight_1598w8h_71._highlighted_1598w8h_154._selected_1598w8h_119,
+._modeClear_1598w8h_63._themeLight_1598w8h_71._selected_1598w8h_119:not(._disableCursor_1598w8h_149):hover{
   background-color:rgba(25,25,28,0.1);
 }
-._modeClear_1mmvlwv_37._themeDark_1mmvlwv_51._highlighted_1mmvlwv_125._selected_1mmvlwv_91,
-._modeClear_1mmvlwv_37._themeDark_1mmvlwv_51._selected_1mmvlwv_91:not(._disableCursor_1mmvlwv_121):hover{
+._modeClear_1598w8h_63._themeDark_1598w8h_78._highlighted_1598w8h_154._selected_1598w8h_119,
+._modeClear_1598w8h_63._themeDark_1598w8h_78._selected_1598w8h_119:not(._disableCursor_1598w8h_149):hover{
   background-color:rgba(255,255,255,0.1);
 }
-._menuItem_1mmvlwv_9._themeLight_1mmvlwv_45._disabled_1mmvlwv_197{
+._menuItem_1598w8h_12._themeLight_1598w8h_71._disabled_1598w8h_237{
   pointer-events:none;
-  color:rgba(25,25,28,0.4);
+  color:rgba(25,25,28,0.5);
+  color:var(--rs-typography-color-pale, rgba(25,25,28,0.5));
 }
-._menuItem_1mmvlwv_9._themeDark_1mmvlwv_51._disabled_1mmvlwv_197{
+._menuItem_1598w8h_12._themeDark_1598w8h_78._disabled_1598w8h_237{
   pointer-events:none;
-  color:rgba(255,255,255,0.3);
+  color:rgba(255,255,255,0.5);
+  color:var(--rs-typography-color-pale, rgba(255,255,255,0.5));
 }
-._icon_1mmvlwv_208{
+._icon_1598w8h_248{
   -webkit-box-flex:0;
       -ms-flex:0 0;
           flex:0 0;
@@ -196,42 +244,44 @@
       flex-basis:auto;
 
 }
-._sizeS_1mmvlwv_25._placementLeft_1mmvlwv_212 ._icon_1mmvlwv_208{
+._sizeS_1598w8h_51._placementLeft_1598w8h_252 ._icon_1598w8h_248{
     margin-right:8px;
   }
-._sizeS_1mmvlwv_25._placementRight_1mmvlwv_20 ._icon_1mmvlwv_208{
+._sizeS_1598w8h_51._placementRight_1598w8h_46 ._icon_1598w8h_248{
     margin-left:8px;
   }
-._sizeM_1mmvlwv_29._placementLeft_1mmvlwv_212 ._icon_1mmvlwv_208{
+._sizeM_1598w8h_55._placementLeft_1598w8h_252 ._icon_1598w8h_248{
     margin-right:8px;
   }
-._sizeM_1mmvlwv_29._placementRight_1mmvlwv_20 ._icon_1mmvlwv_208{
+._sizeM_1598w8h_55._placementRight_1598w8h_46 ._icon_1598w8h_248{
     margin-left:8px;
   }
-._sizeL_1mmvlwv_33._placementLeft_1mmvlwv_212 ._icon_1mmvlwv_208{
+._sizeL_1598w8h_59._placementLeft_1598w8h_252 ._icon_1598w8h_248{
     margin-right:16px;
   }
-._sizeL_1mmvlwv_33._placementRight_1mmvlwv_20 ._icon_1mmvlwv_208{
+._sizeL_1598w8h_59._placementRight_1598w8h_46 ._icon_1598w8h_248{
     margin-left:16px;
   }
-._divider_1mmvlwv_238{
+._divider_1598w8h_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_1mmvlwv_238._themeLight_1mmvlwv_45{
+._divider_1598w8h_278._themeLight_1598w8h_71{
     background-color:rgba(25,25,28,0.2);
   }
-._divider_1mmvlwv_238._themeDark_1mmvlwv_51{
+._divider_1598w8h_278._themeDark_1598w8h_78{
     background-color:rgba(255,255,255,0.2);
   }
-._groupHeader_1mmvlwv_254{
+._groupHeader_1598w8h_296{
   border:none;
 }
-._groupHeaderSizeL_1mmvlwv_258{
+._groupHeaderSizeL_1598w8h_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;
@@ -243,7 +293,7 @@
   line-height:28px;
   line-height:var(--rs-h3-line-height, 28px);
 }
-._groupHeaderSizeM_1mmvlwv_263{
+._groupHeaderSizeM_1598w8h_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));
@@ -254,7 +304,7 @@
   line-height:24px;
   line-height:var(--rs-h4-line-height, 24px);
 }
-._groupHeaderSizeS_1mmvlwv_268{
+._groupHeaderSizeS_1598w8h_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));
@@ -265,11 +315,11 @@
   line-height:20px;
   line-height:var(--rs-h5-line-height, 20px);
 }
-._themeLight_1mmvlwv_45{
+._themeLight_1598w8h_71{
   color:#19191C;
   color:var(--rs-typography-color-hard, #19191C);
 }
-._themeDark_1mmvlwv_51{
+._themeDark_1598w8h_78{
   color:#FFFFFF;
   color:var(--rs-typography-color-hard, #FFFFFF);
 }

package/lib/index.module.pcss.js

@@ -1,26 +1,28 @@
 var styles = {
-  "menuItem": "_menuItem_1mmvlwv_9",
-  "content": "_content_1mmvlwv_15",
-  "placementRight": "_placementRight_1mmvlwv_20",
-  "sizeS": "_sizeS_1mmvlwv_25",
-  "sizeM": "_sizeM_1mmvlwv_29",
-  "sizeL": "_sizeL_1mmvlwv_33",
-  "modeClear": "_modeClear_1mmvlwv_37",
-  "themeLight": "_themeLight_1mmvlwv_45",
-  "themeDark": "_themeDark_1mmvlwv_51",
-  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_1mmvlwv_1",
-  "modeClassic": "_modeClassic_1mmvlwv_79",
-  "selected": "_selected_1mmvlwv_91",
-  "modeRock": "_modeRock_1mmvlwv_101",
-  "disableCursor": "_disableCursor_1mmvlwv_121",
-  "highlighted": "_highlighted_1mmvlwv_125",
-  "disabled": "_disabled_1mmvlwv_197",
-  "icon": "_icon_1mmvlwv_208",
-  "placementLeft": "_placementLeft_1mmvlwv_212",
-  "divider": "_divider_1mmvlwv_238",
-  "groupHeader": "_groupHeader_1mmvlwv_254",
-  "groupHeaderSizeL": "_groupHeaderSizeL_1mmvlwv_258",
-  "groupHeaderSizeM": "_groupHeaderSizeM_1mmvlwv_263",
-  "groupHeaderSizeS": "_groupHeaderSizeS_1mmvlwv_268"
+  "wrapper": "_wrapper_1598w8h_8",
+  "menuItem": "_menuItem_1598w8h_12",
+  "content": "_content_1598w8h_40",
+  "placementRight": "_placementRight_1598w8h_46",
+  "sizeS": "_sizeS_1598w8h_51",
+  "sizeM": "_sizeM_1598w8h_55",
+  "sizeL": "_sizeL_1598w8h_59",
+  "modeClear": "_modeClear_1598w8h_63",
+  "keyboardNavigationDisabled": "_keyboardNavigationDisabled_1598w8h_71",
+  "themeLight": "_themeLight_1598w8h_71",
+  "themeDark": "_themeDark_1598w8h_78",
+  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_1598w8h_1",
+  "modeClassic": "_modeClassic_1598w8h_107",
+  "selected": "_selected_1598w8h_119",
+  "modeRock": "_modeRock_1598w8h_129",
+  "disableCursor": "_disableCursor_1598w8h_149",
+  "highlighted": "_highlighted_1598w8h_154",
+  "disabled": "_disabled_1598w8h_237",
+  "icon": "_icon_1598w8h_248",
+  "placementLeft": "_placementLeft_1598w8h_252",
+  "divider": "_divider_1598w8h_278",
+  "groupHeader": "_groupHeader_1598w8h_296",
+  "groupHeaderSizeL": "_groupHeaderSizeL_1598w8h_300",
+  "groupHeaderSizeM": "_groupHeaderSizeM_1598w8h_305",
+  "groupHeaderSizeS": "_groupHeaderSizeS_1598w8h_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.4.0",
+  "version": "0.6.0",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -17,7 +17,8 @@
   "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",
@@ -25,15 +26,15 @@
     "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.2",
     "@rescui/visual-regression": "^0.0.1",
     "postcss": "^8.3.0"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
-  "gitHead": "90715a8ea8c558b23c243bc092be4ded23e4192c"
+  "gitHead": "67f695b72d13fd8445542c48f096b65656fdd7d9"
 }