@rescui/menu 0.5.1 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/lib/index.css +114 -82
  2. package/lib/index.module.pcss.js +26 -24
  3. package/lib/menu.d.ts +5 -1
  4. package/lib/menu.js +39 -12
  5. package/lib/parts/divider.js +4 -3
  6. package/lib/parts/group-header.js +1 -1
  7. package/lib/parts/menu-context.d.ts +5 -0
  8. package/lib/parts/menu-context.js +7 -1
  9. package/lib/parts/menu-item.d.ts +3 -2
  10. package/lib/parts/menu-item.js +71 -16
  11. package/lib/parts/navigation-utils.d.ts +5 -0
  12. package/lib/parts/navigation-utils.js +59 -0
  13. package/lib/parts/use-menu-keyboard-navigation.d.ts +13 -0
  14. package/lib/parts/use-menu-keyboard-navigation.js +152 -0
  15. package/package.json +5 -4
package/lib/index.css CHANGED
@@ -1,49 +1,79 @@
1
- ._menuItem_fhql85_9{
1
+ ._wrapper_1598w8h_8{
2
2
  display:-webkit-box;
3
3
  display:-ms-flexbox;
4
4
  display:flex;
5
+ }
6
+ ._menuItem_1598w8h_12{
7
+ display:-webkit-box;
8
+ display:-ms-flexbox;
9
+ display:flex;
10
+ overflow:auto;
11
+ -webkit-box-flex:1;
12
+ -ms-flex-positive:1;
13
+ flex-grow:1;
14
+
15
+ width:auto;
16
+
17
+ margin:0;
18
+
19
+ border:none;
20
+ border-radius:0;
5
21
  outline:none;
22
+
6
23
  cursor:pointer;
7
- }
8
- ._content_fhql85_15{
24
+ text-align:start;
25
+ text-decoration:none;
26
+
27
+ background:none;
28
+ -webkit-appearance:none;
29
+ -moz-appearance:none;
30
+ appearance:none;
31
+ -webkit-font-smoothing:inherit;
32
+ -moz-osx-font-smoothing:inherit;
33
+ }
34
+ ._menuItem_1598w8h_12:focus{
35
+ outline:none;
36
+ }
37
+ ._content_1598w8h_40{
9
38
  -webkit-box-flex:1;
10
39
  -ms-flex-positive:1;
11
40
  flex-grow:1;
41
+
12
42
  font-size:inherit;
13
43
  }
14
- ._placementRight_fhql85_20{
44
+ ._placementRight_1598w8h_46{
15
45
  -webkit-box-pack:justify;
16
46
  -ms-flex-pack:justify;
17
47
  justify-content:space-between;
18
48
  }
19
- ._sizeS_fhql85_25{
49
+ ._sizeS_1598w8h_51{
20
50
  padding: 6px 8px;
21
51
  }
22
- ._sizeM_fhql85_29{
52
+ ._sizeM_1598w8h_55{
23
53
  padding: 8px 16px;
24
54
  }
25
- ._sizeL_fhql85_33{
55
+ ._sizeL_1598w8h_59{
26
56
  padding: 12px 16px;
27
57
  }
28
- ._modeClear_fhql85_37._sizeS_fhql85_25,
29
- ._modeClear_fhql85_37._sizeM_fhql85_29,
30
- ._modeClear_fhql85_37._sizeL_fhql85_33{
31
- padding-left:0;
58
+ ._modeClear_1598w8h_63._sizeS_1598w8h_51,
59
+ ._modeClear_1598w8h_63._sizeM_1598w8h_55,
60
+ ._modeClear_1598w8h_63._sizeL_1598w8h_59{
32
61
  padding-right:0;
62
+ padding-left:0;
33
63
  }
34
- ._themeLight_fhql85_45:focus[data-focus-method='key']{
35
- -webkit-box-shadow:#8979ff 0 0 0 4px;
36
- -webkit-box-shadow:var(--rs-color-primary-dim-light-theme, #8979ff) 0 0 0 4px;
37
- box-shadow:#8979ff 0 0 0 4px;
38
- box-shadow:var(--rs-color-primary-dim-light-theme, #8979ff) 0 0 0 4px;
64
+ ._keyboardNavigationDisabled_1598w8h_71 ._themeLight_1598w8h_71:focus[data-focus-method='key']{
65
+ -webkit-box-shadow:0 0 0 2px #8979ff, inset 0 0 0 2px #8979ff;
66
+ -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);
67
+ box-shadow:0 0 0 2px #8979ff, inset 0 0 0 2px #8979ff;
68
+ 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);
39
69
  }
40
- ._themeDark_fhql85_51:focus[data-focus-method='key']{
41
- -webkit-box-shadow:#6f61d2 0 0 0 4px;
42
- -webkit-box-shadow:var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 0 0 4px;
43
- box-shadow:#6f61d2 0 0 0 4px;
44
- box-shadow:var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 0 0 4px;
70
+ ._keyboardNavigationDisabled_1598w8h_71 ._themeDark_1598w8h_78:focus[data-focus-method='key']{
71
+ -webkit-box-shadow:0 0 0 2px #6f61d2, inset 0 0 0 2px #6f61d2;
72
+ -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);
73
+ box-shadow:0 0 0 2px #6f61d2, inset 0 0 0 2px #6f61d2;
74
+ 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);
45
75
  }
46
- ._sizeS_fhql85_25{
76
+ ._sizeS_1598w8h_51{
47
77
  letter-spacing:0.0045em;
48
78
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
49
79
  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 @@
52
82
  line-height:20px;
53
83
  line-height:var(--rs-text-3-line-height, 20px);
54
84
  }
55
- ._rs-reset-letter-spacing_fhql85_1 ._sizeS_fhql85_25{
85
+ ._rs-reset-letter-spacing_1598w8h_1 ._sizeS_1598w8h_51{
56
86
  letter-spacing:normal;
57
87
  }
58
- ._sizeM_fhql85_29{
88
+ ._sizeM_1598w8h_55{
59
89
  letter-spacing:0.0015em;
60
90
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
61
91
  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 @@
65
95
  line-height:24px;
66
96
  line-height:var(--rs-text-2-line-height, 24px);
67
97
  }
68
- ._rs-reset-letter-spacing_fhql85_1 ._sizeM_fhql85_29{
98
+ ._rs-reset-letter-spacing_1598w8h_1 ._sizeM_1598w8h_55{
69
99
  letter-spacing:normal;
70
100
  }
71
- ._sizeL_fhql85_33{
101
+ ._sizeL_1598w8h_59{
72
102
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
73
103
  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));
74
104
  font-size:19px;
@@ -77,136 +107,136 @@
77
107
  line-height:28px;
78
108
  line-height:var(--rs-text-1-line-height, 28px);
79
109
  }
80
- ._themeLight_fhql85_45{
110
+ ._themeLight_1598w8h_71{
81
111
  color:rgba(25,25,28,0.7);
82
112
  color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
83
113
  }
84
- ._themeDark_fhql85_51{
114
+ ._themeDark_1598w8h_78{
85
115
  color:rgba(255,255,255,0.7);
86
116
  color:var(--rs-typography-color-average, rgba(255,255,255,0.7));
87
117
  }
88
- ._modeClassic_fhql85_79._themeLight_fhql85_45:active{
118
+ ._modeClassic_1598w8h_107._themeLight_1598w8h_71:active{
89
119
  color:#19191C;
90
120
  color:var(--rs-typography-color-hard, #19191C);
91
121
  background-color:rgba(107, 87, 255,0.2);
92
122
  background-color:var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2));
93
123
  }
94
- ._modeClassic_fhql85_79._themeDark_fhql85_51:active{
124
+ ._modeClassic_1598w8h_107._themeDark_1598w8h_78:active{
95
125
  color:#FFFFFF;
96
126
  color:var(--rs-typography-color-hard, #FFFFFF);
97
127
  background-color:rgba(132, 115, 255,0.3);
98
128
  background-color:var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3));
99
129
  }
100
- ._modeClassic_fhql85_79._themeLight_fhql85_45._selected_fhql85_91{
130
+ ._modeClassic_1598w8h_107._themeLight_1598w8h_71._selected_1598w8h_119{
101
131
  color:#FFFFFF;
102
132
  color:var(--rs-typography-color-hard, #FFFFFF);
103
133
  background-color:#19191C;
104
134
  }
105
- ._modeClassic_fhql85_79._themeDark_fhql85_51._selected_fhql85_91{
135
+ ._modeClassic_1598w8h_107._themeDark_1598w8h_78._selected_1598w8h_119{
106
136
  color:#19191C;
107
137
  color:var(--rs-typography-color-hard, #19191C);
108
138
  background-color:#FFFFFF;
109
139
  }
110
- ._modeRock_fhql85_101._themeLight_fhql85_45._selected_fhql85_91{
140
+ ._modeRock_1598w8h_129._themeLight_1598w8h_71._selected_1598w8h_119{
111
141
  color:#FFFFFF;
112
142
  color:var(--rs-typography-color-hard, #FFFFFF);
113
143
  background-color:#19191C;
114
144
  }
115
- ._modeRock_fhql85_101._themeDark_fhql85_51._selected_fhql85_91{
145
+ ._modeRock_1598w8h_129._themeDark_1598w8h_78._selected_1598w8h_119{
116
146
  color:#19191C;
117
147
  color:var(--rs-typography-color-hard, #19191C);
118
148
  background-color:#FFFFFF;
119
149
  }
120
- ._modeClear_fhql85_37._themeLight_fhql85_45._selected_fhql85_91{
150
+ ._modeClear_1598w8h_63._themeLight_1598w8h_71._selected_1598w8h_119{
121
151
  color:#6B57FF;
122
152
  color:var(--rs-color-primary-light-theme, #6B57FF);
123
153
  }
124
- ._modeClear_fhql85_37._themeDark_fhql85_51._selected_fhql85_91{
154
+ ._modeClear_1598w8h_63._themeDark_1598w8h_78._selected_1598w8h_119{
125
155
  color:#8473FF;
126
156
  color:var(--rs-color-primary-dark-theme, #8473FF);
127
157
  }
128
- ._disableCursor_fhql85_121{
158
+ ._disableCursor_1598w8h_149{
129
159
  pointer-events:none;
130
160
  }
131
- ._modeClassic_fhql85_79._themeLight_fhql85_45._highlighted_fhql85_125,
132
- ._modeClassic_fhql85_79._themeLight_fhql85_45:not(._disableCursor_fhql85_121):hover{
161
+ ._modeClassic_1598w8h_107._themeLight_1598w8h_71._highlighted_1598w8h_154,
162
+ ._modeClassic_1598w8h_107._themeLight_1598w8h_71:not(._disableCursor_1598w8h_149):hover{
133
163
  color:#19191C;
134
164
  color:var(--rs-typography-color-hard, #19191C);
135
165
  background-color:rgba(25,25,28,0.1);
136
166
  }
137
- ._modeRock_fhql85_101._themeLight_fhql85_45._highlighted_fhql85_125,
138
- ._modeRock_fhql85_101._themeLight_fhql85_45:not(._disableCursor_fhql85_121):hover{
167
+ ._modeRock_1598w8h_129._themeLight_1598w8h_71._highlighted_1598w8h_154,
168
+ ._modeRock_1598w8h_129._themeLight_1598w8h_71:not(._disableCursor_1598w8h_149):hover{
139
169
  color:#FFFFFF;
140
170
  color:var(--rs-typography-color-hard, #FFFFFF);
141
171
  background-color:#6B57FF;
142
172
  background-color:var(--rs-color-primary-light-theme, #6B57FF);
143
173
  }
144
- ._modeClassic_fhql85_79._themeDark_fhql85_51._highlighted_fhql85_125,
145
- ._modeClassic_fhql85_79._themeDark_fhql85_51:not(._disableCursor_fhql85_121):hover{
174
+ ._modeClassic_1598w8h_107._themeDark_1598w8h_78._highlighted_1598w8h_154,
175
+ ._modeClassic_1598w8h_107._themeDark_1598w8h_78:not(._disableCursor_1598w8h_149):hover{
146
176
  color:#FFFFFF;
147
177
  color:var(--rs-typography-color-hard, #FFFFFF);
148
178
  background-color:rgba(255,255,255,0.1);
149
179
  }
150
- ._modeRock_fhql85_101._themeDark_fhql85_51._highlighted_fhql85_125,
151
- ._modeRock_fhql85_101._themeDark_fhql85_51:not(._disableCursor_fhql85_121):hover{
180
+ ._modeRock_1598w8h_129._themeDark_1598w8h_78._highlighted_1598w8h_154,
181
+ ._modeRock_1598w8h_129._themeDark_1598w8h_78:not(._disableCursor_1598w8h_149):hover{
152
182
  color:#FFFFFF;
153
183
  color:var(--rs-typography-color-hard, #FFFFFF);
154
184
  background-color:#8473FF;
155
185
  background-color:var(--rs-color-primary-dark-theme, #8473FF);
156
186
  }
157
- ._modeClear_fhql85_37._themeLight_fhql85_45._highlighted_fhql85_125,
158
- ._modeClear_fhql85_37._themeLight_fhql85_45:not(._disableCursor_fhql85_121):hover{
187
+ ._modeClear_1598w8h_63._themeLight_1598w8h_71._highlighted_1598w8h_154,
188
+ ._modeClear_1598w8h_63._themeLight_1598w8h_71:not(._disableCursor_1598w8h_149):hover{
159
189
  color:#19191C;
160
190
  color:var(--rs-typography-color-hard, #19191C);
161
191
  }
162
- ._modeClear_fhql85_37._themeDark_fhql85_51._highlighted_fhql85_125,
163
- ._modeClear_fhql85_37._themeDark_fhql85_51:not(._disableCursor_fhql85_121):hover{
192
+ ._modeClear_1598w8h_63._themeDark_1598w8h_78._highlighted_1598w8h_154,
193
+ ._modeClear_1598w8h_63._themeDark_1598w8h_78:not(._disableCursor_1598w8h_149):hover{
164
194
  color:#FFFFFF;
165
195
  color:var(--rs-typography-color-hard, #FFFFFF);
166
196
  }
167
- ._modeClassic_fhql85_79._themeLight_fhql85_45._highlighted_fhql85_125._selected_fhql85_91,
168
- ._modeClassic_fhql85_79._themeLight_fhql85_45._selected_fhql85_91:not(._disableCursor_fhql85_121):hover{
197
+ ._modeClassic_1598w8h_107._themeLight_1598w8h_71._highlighted_1598w8h_154._selected_1598w8h_119,
198
+ ._modeClassic_1598w8h_107._themeLight_1598w8h_71._selected_1598w8h_119:not(._disableCursor_1598w8h_149):hover{
169
199
  background-color:#303033;
170
200
  color:#FFFFFF;
171
201
  color:var(--rs-typography-color-hard, #FFFFFF);
172
202
  }
173
- ._modeRock_fhql85_101._themeLight_fhql85_45._highlighted_fhql85_125._selected_fhql85_91,
174
- ._modeRock_fhql85_101._themeLight_fhql85_45._selected_fhql85_91:not(._disableCursor_fhql85_121):hover{
203
+ ._modeRock_1598w8h_129._themeLight_1598w8h_71._highlighted_1598w8h_154._selected_1598w8h_119,
204
+ ._modeRock_1598w8h_129._themeLight_1598w8h_71._selected_1598w8h_119:not(._disableCursor_1598w8h_149):hover{
175
205
  background-color:#303033;
176
206
  color:#FFFFFF;
177
207
  color:var(--rs-typography-color-hard, #FFFFFF);
178
208
  }
179
- ._modeClassic_fhql85_79._themeDark_fhql85_51._highlighted_fhql85_125._selected_fhql85_91,
180
- ._modeClassic_fhql85_79._themeDark_fhql85_51._selected_fhql85_91:not(._disableCursor_fhql85_121):hover{
209
+ ._modeClassic_1598w8h_107._themeDark_1598w8h_78._highlighted_1598w8h_154._selected_1598w8h_119,
210
+ ._modeClassic_1598w8h_107._themeDark_1598w8h_78._selected_1598w8h_119:not(._disableCursor_1598w8h_149):hover{
181
211
  background-color:#E8E8E8;
182
212
  color:#19191C;
183
213
  color:var(--rs-typography-color-hard, #19191C);
184
214
  }
185
- ._modeRock_fhql85_101._themeDark_fhql85_51._highlighted_fhql85_125._selected_fhql85_91,
186
- ._modeRock_fhql85_101._themeDark_fhql85_51._selected_fhql85_91:not(._disableCursor_fhql85_121):hover{
215
+ ._modeRock_1598w8h_129._themeDark_1598w8h_78._highlighted_1598w8h_154._selected_1598w8h_119,
216
+ ._modeRock_1598w8h_129._themeDark_1598w8h_78._selected_1598w8h_119:not(._disableCursor_1598w8h_149):hover{
187
217
  background-color:#E8E8E8;
188
218
  color:#19191C;
189
219
  color:var(--rs-typography-color-hard, #19191C);
190
220
  }
191
- ._modeClear_fhql85_37._themeLight_fhql85_45._highlighted_fhql85_125._selected_fhql85_91,
192
- ._modeClear_fhql85_37._themeLight_fhql85_45._selected_fhql85_91:not(._disableCursor_fhql85_121):hover{
221
+ ._modeClear_1598w8h_63._themeLight_1598w8h_71._highlighted_1598w8h_154._selected_1598w8h_119,
222
+ ._modeClear_1598w8h_63._themeLight_1598w8h_71._selected_1598w8h_119:not(._disableCursor_1598w8h_149):hover{
193
223
  background-color:rgba(25,25,28,0.1);
194
224
  }
195
- ._modeClear_fhql85_37._themeDark_fhql85_51._highlighted_fhql85_125._selected_fhql85_91,
196
- ._modeClear_fhql85_37._themeDark_fhql85_51._selected_fhql85_91:not(._disableCursor_fhql85_121):hover{
225
+ ._modeClear_1598w8h_63._themeDark_1598w8h_78._highlighted_1598w8h_154._selected_1598w8h_119,
226
+ ._modeClear_1598w8h_63._themeDark_1598w8h_78._selected_1598w8h_119:not(._disableCursor_1598w8h_149):hover{
197
227
  background-color:rgba(255,255,255,0.1);
198
228
  }
199
- ._menuItem_fhql85_9._themeLight_fhql85_45._disabled_fhql85_197{
229
+ ._menuItem_1598w8h_12._themeLight_1598w8h_71._disabled_1598w8h_237{
200
230
  pointer-events:none;
201
231
  color:rgba(25,25,28,0.5);
202
232
  color:var(--rs-typography-color-pale, rgba(25,25,28,0.5));
203
233
  }
204
- ._menuItem_fhql85_9._themeDark_fhql85_51._disabled_fhql85_197{
234
+ ._menuItem_1598w8h_12._themeDark_1598w8h_78._disabled_1598w8h_237{
205
235
  pointer-events:none;
206
236
  color:rgba(255,255,255,0.5);
207
237
  color:var(--rs-typography-color-pale, rgba(255,255,255,0.5));
208
238
  }
209
- ._icon_fhql85_208{
239
+ ._icon_1598w8h_248{
210
240
  -webkit-box-flex:0;
211
241
  -ms-flex:0 0;
212
242
  flex:0 0;
@@ -214,42 +244,44 @@
214
244
  flex-basis:auto;
215
245
 
216
246
  }
217
- ._sizeS_fhql85_25._placementLeft_fhql85_212 ._icon_fhql85_208{
247
+ ._sizeS_1598w8h_51._placementLeft_1598w8h_252 ._icon_1598w8h_248{
218
248
  margin-right:8px;
219
249
  }
220
- ._sizeS_fhql85_25._placementRight_fhql85_20 ._icon_fhql85_208{
250
+ ._sizeS_1598w8h_51._placementRight_1598w8h_46 ._icon_1598w8h_248{
221
251
  margin-left:8px;
222
252
  }
223
- ._sizeM_fhql85_29._placementLeft_fhql85_212 ._icon_fhql85_208{
253
+ ._sizeM_1598w8h_55._placementLeft_1598w8h_252 ._icon_1598w8h_248{
224
254
  margin-right:8px;
225
255
  }
226
- ._sizeM_fhql85_29._placementRight_fhql85_20 ._icon_fhql85_208{
256
+ ._sizeM_1598w8h_55._placementRight_1598w8h_46 ._icon_1598w8h_248{
227
257
  margin-left:8px;
228
258
  }
229
- ._sizeL_fhql85_33._placementLeft_fhql85_212 ._icon_fhql85_208{
259
+ ._sizeL_1598w8h_59._placementLeft_1598w8h_252 ._icon_1598w8h_248{
230
260
  margin-right:16px;
231
261
  }
232
- ._sizeL_fhql85_33._placementRight_fhql85_20 ._icon_fhql85_208{
262
+ ._sizeL_1598w8h_59._placementRight_1598w8h_46 ._icon_1598w8h_248{
233
263
  margin-left:16px;
234
264
  }
235
- ._divider_fhql85_238{
265
+ ._divider_1598w8h_278{
266
+ -ms-flex-negative:0;
267
+ flex-shrink:0;
268
+
236
269
  width:100%;
237
- border:none;
238
270
  height:1px;
239
271
  margin:0;
240
- -ms-flex-negative:0;
241
- flex-shrink:0;
272
+
273
+ border:none;
242
274
  }
243
- ._divider_fhql85_238._themeLight_fhql85_45{
275
+ ._divider_1598w8h_278._themeLight_1598w8h_71{
244
276
  background-color:rgba(25,25,28,0.2);
245
277
  }
246
- ._divider_fhql85_238._themeDark_fhql85_51{
278
+ ._divider_1598w8h_278._themeDark_1598w8h_78{
247
279
  background-color:rgba(255,255,255,0.2);
248
280
  }
249
- ._groupHeader_fhql85_254{
281
+ ._groupHeader_1598w8h_296{
250
282
  border:none;
251
283
  }
252
- ._groupHeaderSizeL_fhql85_258{
284
+ ._groupHeaderSizeL_1598w8h_300{
253
285
  padding: 12px 16px;
254
286
  letter-spacing:normal;
255
287
  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 @@
261
293
  line-height:28px;
262
294
  line-height:var(--rs-h3-line-height, 28px);
263
295
  }
264
- ._groupHeaderSizeM_fhql85_263{
296
+ ._groupHeaderSizeM_1598w8h_305{
265
297
  padding: 8px 16px;
266
298
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
267
299
  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 @@
272
304
  line-height:24px;
273
305
  line-height:var(--rs-h4-line-height, 24px);
274
306
  }
275
- ._groupHeaderSizeS_fhql85_268{
307
+ ._groupHeaderSizeS_1598w8h_310{
276
308
  padding: 6px 8px;
277
309
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
278
310
  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 @@
283
315
  line-height:20px;
284
316
  line-height:var(--rs-h5-line-height, 20px);
285
317
  }
286
- ._themeLight_fhql85_45{
318
+ ._themeLight_1598w8h_71{
287
319
  color:#19191C;
288
320
  color:var(--rs-typography-color-hard, #19191C);
289
321
  }
290
- ._themeDark_fhql85_51{
322
+ ._themeDark_1598w8h_78{
291
323
  color:#FFFFFF;
292
324
  color:var(--rs-typography-color-hard, #FFFFFF);
293
325
  }
package/lib/index.module.pcss.js CHANGED
@@ -1,26 +1,28 @@
1
1
  var styles = {
2
- "menuItem": "_menuItem_fhql85_9",
3
- "content": "_content_fhql85_15",
4
- "placementRight": "_placementRight_fhql85_20",
5
- "sizeS": "_sizeS_fhql85_25",
6
- "sizeM": "_sizeM_fhql85_29",
7
- "sizeL": "_sizeL_fhql85_33",
8
- "modeClear": "_modeClear_fhql85_37",
9
- "themeLight": "_themeLight_fhql85_45",
10
- "themeDark": "_themeDark_fhql85_51",
11
- "rs-reset-letter-spacing": "_rs-reset-letter-spacing_fhql85_1",
12
- "modeClassic": "_modeClassic_fhql85_79",
13
- "selected": "_selected_fhql85_91",
14
- "modeRock": "_modeRock_fhql85_101",
15
- "disableCursor": "_disableCursor_fhql85_121",
16
- "highlighted": "_highlighted_fhql85_125",
17
- "disabled": "_disabled_fhql85_197",
18
- "icon": "_icon_fhql85_208",
19
- "placementLeft": "_placementLeft_fhql85_212",
20
- "divider": "_divider_fhql85_238",
21
- "groupHeader": "_groupHeader_fhql85_254",
22
- "groupHeaderSizeL": "_groupHeaderSizeL_fhql85_258",
23
- "groupHeaderSizeM": "_groupHeaderSizeM_fhql85_263",
24
- "groupHeaderSizeS": "_groupHeaderSizeS_fhql85_268"
2
+ "wrapper": "_wrapper_1598w8h_8",
3
+ "menuItem": "_menuItem_1598w8h_12",
4
+ "content": "_content_1598w8h_40",
5
+ "placementRight": "_placementRight_1598w8h_46",
6
+ "sizeS": "_sizeS_1598w8h_51",
7
+ "sizeM": "_sizeM_1598w8h_55",
8
+ "sizeL": "_sizeL_1598w8h_59",
9
+ "modeClear": "_modeClear_1598w8h_63",
10
+ "keyboardNavigationDisabled": "_keyboardNavigationDisabled_1598w8h_71",
11
+ "themeLight": "_themeLight_1598w8h_71",
12
+ "themeDark": "_themeDark_1598w8h_78",
13
+ "rs-reset-letter-spacing": "_rs-reset-letter-spacing_1598w8h_1",
14
+ "modeClassic": "_modeClassic_1598w8h_107",
15
+ "selected": "_selected_1598w8h_119",
16
+ "modeRock": "_modeRock_1598w8h_129",
17
+ "disableCursor": "_disableCursor_1598w8h_149",
18
+ "highlighted": "_highlighted_1598w8h_154",
19
+ "disabled": "_disabled_1598w8h_237",
20
+ "icon": "_icon_1598w8h_248",
21
+ "placementLeft": "_placementLeft_1598w8h_252",
22
+ "divider": "_divider_1598w8h_278",
23
+ "groupHeader": "_groupHeader_1598w8h_296",
24
+ "groupHeaderSizeL": "_groupHeaderSizeL_1598w8h_300",
25
+ "groupHeaderSizeM": "_groupHeaderSizeM_1598w8h_305",
26
+ "groupHeaderSizeS": "_groupHeaderSizeS_1598w8h_310"
25
27
  };
26
- export default styles;
28
+ export { styles as default };
package/lib/menu.d.ts CHANGED
@@ -1,8 +1,12 @@
1
1
  import React, { HTMLAttributes, ReactNode } from 'react';
2
2
  import { MenuContextValue } from './parts/menu-context';
3
- interface MenuProps extends HTMLAttributes<HTMLElement>, MenuContextValue {
3
+ export interface MenuProps extends HTMLAttributes<HTMLElement>, Omit<MenuContextValue, 'isKeyboardNavigating' | 'activeItemRef' | 'wrapWithLi'> {
4
4
  children?: ReactNode;
5
5
  tag?: React.ElementType;
6
+ enableKeyboardNavigation?: boolean;
7
+ activateFirstItem?: boolean;
8
+ returnFocusOnUnmount?: boolean;
9
+ wrapItemsWithLi?: boolean;
6
10
  }
7
11
  export declare const Menu: React.FC<MenuProps>;
8
12
  export default Menu;
package/lib/menu.js CHANGED
@@ -1,3 +1,4 @@
1
+ import "core-js/modules/es.object.to-string.js";
1
2
  import "core-js/modules/web.dom-collections.for-each.js";
2
3
  import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
3
4
  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
6
7
  import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
7
8
  import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
8
9
  import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
9
- var _excluded = ["tag", "itemTag", "iconPlacement", "disabled", "size", "mode", "disableCursor", "theme"];
10
+ var _excluded = ["tag", "itemTag", "iconPlacement", "disabled", "size", "mode", "disableCursor", "theme", "enableKeyboardNavigation", "activateFirstItem", "className", "wrapItemsWithLi", "returnFocusOnUnmount"];
10
11
 
11
- 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; }
12
+ 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; }
12
13
 
13
- 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; }
14
+ 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; }
14
15
 
15
16
  import React from 'react';
16
17
  import PropTypes from 'prop-types';
18
+ import cn from 'classnames';
17
19
  import { MenuProvider } from './parts/menu-context.js';
20
+ import styles from './index.module.pcss.js';
21
+ import { useMenuKeyboardNavigation } from './parts/use-menu-keyboard-navigation.js';
18
22
 
19
23
  var Menu = function Menu(_ref) {
20
24
  var _ref$tag = _ref.tag,
21
25
  tag = _ref$tag === void 0 ? 'ul' : _ref$tag,
22
- _ref$itemTag = _ref.itemTag,
23
- itemTag = _ref$itemTag === void 0 ? 'li' : _ref$itemTag,
24
- _ref$iconPlacement = _ref.iconPlacement,
25
- iconPlacement = _ref$iconPlacement === void 0 ? 'left' : _ref$iconPlacement,
26
+ itemTag = _ref.itemTag,
27
+ iconPlacement = _ref.iconPlacement,
26
28
  disabled = _ref.disabled,
27
29
  _ref$size = _ref.size,
28
30
  size = _ref$size === void 0 ? 'm' : _ref$size,
@@ -30,18 +32,44 @@ var Menu = function Menu(_ref) {
30
32
  _ref$disableCursor = _ref.disableCursor,
31
33
  disableCursor = _ref$disableCursor === void 0 ? false : _ref$disableCursor,
32
34
  theme = _ref.theme,
35
+ _ref$enableKeyboardNa = _ref.enableKeyboardNavigation,
36
+ enableKeyboardNavigation = _ref$enableKeyboardNa === void 0 ? false : _ref$enableKeyboardNa,
37
+ _ref$activateFirstIte = _ref.activateFirstItem,
38
+ activateFirstItem = _ref$activateFirstIte === void 0 ? false : _ref$activateFirstIte,
39
+ className = _ref.className,
40
+ wrapItemsWithLi = _ref.wrapItemsWithLi,
41
+ _ref$returnFocusOnUnm = _ref.returnFocusOnUnmount,
42
+ returnFocusOnUnmount = _ref$returnFocusOnUnm === void 0 ? false : _ref$returnFocusOnUnm,
33
43
  restProps = _objectWithoutProperties(_ref, _excluded);
34
44
 
35
45
  var Tag = tag;
46
+
47
+ var _useMenuKeyboardNavig = useMenuKeyboardNavigation({
48
+ enableKeyboardNavigation: enableKeyboardNavigation,
49
+ activateFirstItem: activateFirstItem,
50
+ returnFocusOnUnmount: returnFocusOnUnmount
51
+ }),
52
+ activeItemRef = _useMenuKeyboardNavig.activeItemRef,
53
+ registerItem = _useMenuKeyboardNavig.registerItem,
54
+ unregisterItem = _useMenuKeyboardNavig.unregisterItem,
55
+ isKeyboardNavigating = _useMenuKeyboardNavig.isKeyboardNavigating;
56
+
36
57
  return /*#__PURE__*/React.createElement(MenuProvider, {
37
58
  itemTag: itemTag,
38
59
  iconPlacement: iconPlacement,
39
60
  disabled: disabled,
40
61
  size: size,
41
- disableCursor: disableCursor,
62
+ disableCursor: disableCursor || isKeyboardNavigating,
42
63
  mode: mode,
43
- theme: theme
44
- }, /*#__PURE__*/React.createElement(Tag, _objectSpread({}, restProps)));
64
+ theme: theme,
65
+ registerItem: registerItem,
66
+ unregisterItem: unregisterItem,
67
+ activeItemRef: activeItemRef.current,
68
+ isKeyboardNavigating: isKeyboardNavigating,
69
+ wrapWithLi: wrapItemsWithLi !== null && wrapItemsWithLi !== void 0 ? wrapItemsWithLi : tag === 'ul'
70
+ }, /*#__PURE__*/React.createElement(Tag, _objectSpread({
71
+ className: cn(!enableKeyboardNavigation && styles.keyboardNavigationDisabled, className)
72
+ }, restProps)));
45
73
  };
46
74
 
47
75
  Menu.propTypes = {
@@ -54,5 +82,4 @@ Menu.propTypes = {
54
82
  itemTag: PropTypes.elementType,
55
83
  tag: PropTypes.elementType
56
84
  };
57
- export default Menu;
58
- export { Menu };
85
+ export { Menu, Menu as default };
package/lib/parts/divider.js CHANGED
@@ -1,3 +1,4 @@
1
+ import "core-js/modules/es.object.to-string.js";
1
2
  import "core-js/modules/web.dom-collections.for-each.js";
2
3
  import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
3
4
  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";
8
9
  import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
9
10
  var _excluded = ["className", "theme"];
10
11
 
11
- 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; }
12
+ 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; }
12
13
 
13
- 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; }
14
+ 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; }
14
15
 
15
16
  import React from 'react';
16
17
  import cn from 'classnames';
@@ -41,4 +42,4 @@ Divider.propTypes = {
41
42
  className: PropTypes.string,
42
43
  theme: PropTypes.oneOf(['light', 'dark'])
43
44
  };
44
- export default Divider;
45
+ export { Divider as default };
package/lib/parts/group-header.js CHANGED
@@ -37,4 +37,4 @@ GroupHeader.propTypes = {
37
37
  theme: PropTypes.oneOf(['light', 'dark']),
38
38
  text: PropTypes.string
39
39
  };
40
- export default GroupHeader;
40
+ export { GroupHeader as default };
package/lib/parts/menu-context.d.ts CHANGED
@@ -11,6 +11,11 @@ export interface MenuContextValue {
11
11
  mode?: MenuItemMode;
12
12
  theme?: Theme;
13
13
  itemTag?: React.ElementType;
14
+ wrapWithLi: boolean;
15
+ registerItem?: (ref: HTMLElement) => void;
16
+ unregisterItem?: (ref: HTMLElement) => void;
17
+ activeItemRef?: HTMLElement;
18
+ isKeyboardNavigating: boolean;
14
19
  }
15
20
  export declare const DEFAULT_MENU_CONTEXT: MenuContextValue;
16
21
  export declare const MenuContext: React.Context<MenuContextValue>;
package/lib/parts/menu-context.js CHANGED
@@ -3,7 +3,13 @@ var _excluded = ["children"];
3
3
  import React, { useContext } from 'react';
4
4
  import PropTypes from 'prop-types';
5
5
  var DEFAULT_MENU_CONTEXT = {
6
- disabled: false
6
+ disabled: false,
7
+ isKeyboardNavigating: false,
8
+ wrapWithLi: false,
9
+ // eslint-disable-next-line @typescript-eslint/no-empty-function
10
+ registerItem: function registerItem() {},
11
+ // eslint-disable-next-line @typescript-eslint/no-empty-function
12
+ unregisterItem: function unregisterItem() {}
7
13
  };
8
14
  var MenuContext = /*#__PURE__*/React.createContext(DEFAULT_MENU_CONTEXT);
9
15
 
package/lib/parts/menu-item.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import React, { HTMLAttributes, ReactNode } from 'react';
1
+ import React, { AllHTMLAttributes, ReactNode } from 'react';
2
2
  import { Theme } from '@rescui/ui-contexts';
3
3
  import { MenuItemSize, MenuItemMode, MenuItemIconPlacement } from './menu-context';
4
- interface MenuItemProps extends HTMLAttributes<Element> {
4
+ interface MenuItemProps extends Omit<AllHTMLAttributes<Element>, 'size'> {
5
5
  className?: string;
6
6
  tag?: React.ElementType;
7
7
  icon?: JSX.Element;
@@ -14,6 +14,7 @@ interface MenuItemProps extends HTMLAttributes<Element> {
14
14
  highlighted?: boolean;
15
15
  iconPlacement?: MenuItemIconPlacement;
16
16
  children?: ReactNode;
17
+ key?: string;
17
18
  }
18
19
  export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLElement>>;
19
20
  export default MenuItem;
package/lib/parts/menu-item.js CHANGED
@@ -1,3 +1,4 @@
1
+ import "core-js/modules/es.object.to-string.js";
1
2
  import "core-js/modules/web.dom-collections.for-each.js";
2
3
  import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
3
4
  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
5
6
  import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
6
7
  import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
7
8
  import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
9
+ import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
10
+ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
8
11
  import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
9
- var _excluded = ["className", "tag", "children", "icon", "size", "mode", "theme", "disabled", "disableCursor", "selected", "highlighted", "iconPlacement"];
12
+ var _excluded = ["className", "tag", "children", "icon", "size", "mode", "theme", "disabled", "disableCursor", "selected", "highlighted", "iconPlacement"],
13
+ _excluded2 = ["unregisterItem", "registerItem", "activeItemRef", "isKeyboardNavigating", "wrapWithLi"];
10
14
 
11
- 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; }
15
+ 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; }
12
16
 
13
- 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; }
17
+ 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; }
14
18
 
15
- import React, { cloneElement } from 'react';
19
+ import React, { useState, useEffect, cloneElement, Fragment } from 'react';
16
20
  import cn from 'classnames';
17
21
  import PropTypes from 'prop-types';
18
22
  import { useTheme } from '@rescui/ui-contexts';
@@ -38,11 +42,10 @@ var THEME_STYLES = {
38
42
  }; // eslint-disable-next-line complexity
39
43
 
40
44
  var MenuItemInner = function MenuItemInner(_ref, ref) {
41
- var _menuContext$theme, _menuContext$itemTag, _menuContext$iconPlac, _menuContext$mode, _menuContext$size, _menuContext$disableC;
45
+ var _menuContext$theme, _ref2, _menuContext$itemTag, _ref3, _menuContext$iconPlac, _menuContext$mode, _menuContext$size, _menuContext$disableC;
42
46
 
43
47
  var className = _ref.className,
44
- _ref$tag = _ref.tag,
45
- tag = _ref$tag === void 0 ? 'span' : _ref$tag,
48
+ tag = _ref.tag,
46
49
  children = _ref.children,
47
50
  icon = _ref.icon,
48
51
  _ref$size = _ref.size,
@@ -58,24 +61,77 @@ var MenuItemInner = function MenuItemInner(_ref, ref) {
58
61
  iconPlacement = _ref$iconPlacement === void 0 ? 'left' : _ref$iconPlacement,
59
62
  restProps = _objectWithoutProperties(_ref, _excluded);
60
63
 
61
- var menuContext = useMenuContext();
64
+ var _useMenuContext = useMenuContext(),
65
+ unregisterItem = _useMenuContext.unregisterItem,
66
+ registerItem = _useMenuContext.registerItem,
67
+ activeItemRef = _useMenuContext.activeItemRef,
68
+ isKeyboardNavigating = _useMenuContext.isKeyboardNavigating,
69
+ wrapWithLi = _useMenuContext.wrapWithLi,
70
+ menuContext = _objectWithoutProperties(_useMenuContext, _excluded2);
71
+
62
72
  var actualTheme = useTheme((_menuContext$theme = menuContext.theme) !== null && _menuContext$theme !== void 0 ? _menuContext$theme : theme);
63
- var Tag = (_menuContext$itemTag = menuContext.itemTag) !== null && _menuContext$itemTag !== void 0 ? _menuContext$itemTag : tag;
64
- var actualIconPlacement = (_menuContext$iconPlac = menuContext.iconPlacement) !== null && _menuContext$iconPlac !== void 0 ? _menuContext$iconPlac : iconPlacement;
73
+
74
+ var _useState = useState(null),
75
+ _useState2 = _slicedToArray(_useState, 2),
76
+ thisRef = _useState2[0],
77
+ setThisRef = _useState2[1];
78
+
79
+ useEffect(function () {
80
+ return function () {
81
+ return unregisterItem(thisRef);
82
+ };
83
+ }, [unregisterItem, thisRef]);
84
+ var autoTag = 'span';
85
+
86
+ if (restProps.href) {
87
+ autoTag = 'a';
88
+ } else if (restProps.onClick) {
89
+ autoTag = 'button';
90
+ }
91
+
92
+ var Tag = (_ref2 = (_menuContext$itemTag = menuContext.itemTag) !== null && _menuContext$itemTag !== void 0 ? _menuContext$itemTag : tag) !== null && _ref2 !== void 0 ? _ref2 : autoTag;
93
+ var actualIconPlacement = (_ref3 = (_menuContext$iconPlac = menuContext.iconPlacement) !== null && _menuContext$iconPlac !== void 0 ? _menuContext$iconPlac : iconPlacement) !== null && _ref3 !== void 0 ? _ref3 : 'left';
65
94
  var actualMode = (_menuContext$mode = menuContext.mode) !== null && _menuContext$mode !== void 0 ? _menuContext$mode : mode;
66
95
  var actualSize = (_menuContext$size = menuContext.size) !== null && _menuContext$size !== void 0 ? _menuContext$size : size;
67
96
  var actualDisableCursor = (_menuContext$disableC = menuContext.disableCursor) !== null && _menuContext$disableC !== void 0 ? _menuContext$disableC : disableCursor;
68
97
  var iconElement = icon ? /*#__PURE__*/cloneElement(icon, {
69
98
  className: cn(icon.props.className, styles.icon)
70
99
  }) : null;
71
- return /*#__PURE__*/React.createElement(Tag, _objectSpread({
72
- ref: ref,
73
- 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),
100
+ var actualHighlighted = highlighted || activeItemRef === thisRef && isKeyboardNavigating;
101
+
102
+ var handleRef = function handleRef(r) {
103
+ registerItem(r);
104
+ setThisRef(r);
105
+
106
+ if (typeof ref === 'function') {
107
+ ref(r);
108
+ } else if (ref != null && _typeof(ref) === 'object') {
109
+ ref.current = r;
110
+ }
111
+ };
112
+
113
+ var handleKeyDown = function handleKeyDown(e) {
114
+ if (isKeyboardNavigating && (e.key === ' ' || e.key === 'Enter')) {
115
+ e.preventDefault();
116
+
117
+ if (e.target && e.target.click) {
118
+ e.target.click();
119
+ }
120
+ }
121
+ };
122
+
123
+ var Wrapper = wrapWithLi ? 'li' : Fragment;
124
+ return /*#__PURE__*/React.createElement(Wrapper, {
125
+ className: styles.wrapper
126
+ }, /*#__PURE__*/React.createElement(Tag, _objectSpread({
127
+ onKeyDown: handleKeyDown,
128
+ ref: handleRef,
129
+ 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),
74
130
  "data-test": 'menu-item',
75
131
  tabIndex: 0
76
132
  }, restProps), actualIconPlacement === 'left' && iconElement, /*#__PURE__*/React.createElement("span", {
77
133
  className: styles.content
78
- }, children), actualIconPlacement === 'right' && iconElement);
134
+ }, children), actualIconPlacement === 'right' && iconElement));
79
135
  };
80
136
 
81
137
  var MenuItem = /*#__PURE__*/React.forwardRef(MenuItemInner);
@@ -94,5 +150,4 @@ MenuItem.propTypes = {
94
150
  iconPlacement: PropTypes.oneOf(['left', 'right']),
95
151
  tag: PropTypes.elementType
96
152
  };
97
- export default MenuItem;
98
- export { MenuItem };
153
+ export { MenuItem, MenuItem as default };
package/lib/parts/navigation-utils.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare function getFirstItem(sortedItems: HTMLElement[]): HTMLElement;
2
+ export declare function getLastItem(sortedItems: HTMLElement[]): HTMLElement;
3
+ export declare function getNextItem(sortedItems: HTMLElement[], activeItem: HTMLElement): HTMLElement;
4
+ export declare function getPrevItem(sortedItems: HTMLElement[], activeItem: HTMLElement): HTMLElement;
5
+ export declare function htmlElementsComparator(a: HTMLElement, b: HTMLElement): 0 | 1 | -1;
package/lib/parts/navigation-utils.js ADDED
@@ -0,0 +1,59 @@
1
+ import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
2
+
3
+ function getFirstItem(sortedItems) {
4
+ return sortedItems[0];
5
+ }
6
+
7
+ function getLastItem(sortedItems) {
8
+ return sortedItems[sortedItems.length - 1];
9
+ }
10
+
11
+ function getNextItem(sortedItems, activeItem) {
12
+ var focusedIndex = _findIndexInstanceProperty(sortedItems).call(sortedItems, function (el) {
13
+ return el === activeItem;
14
+ });
15
+
16
+ var indexToFocus = focusedIndex + 1;
17
+
18
+ if (indexToFocus < sortedItems.length) {
19
+ return sortedItems[indexToFocus];
20
+ } else {
21
+ return getFirstItem(sortedItems);
22
+ }
23
+ }
24
+
25
+ function getPrevItem(sortedItems, activeItem) {
26
+ var focusedIndex = _findIndexInstanceProperty(sortedItems).call(sortedItems, function (el) {
27
+ return el === activeItem;
28
+ });
29
+
30
+ var indexToFocus = focusedIndex - 1;
31
+
32
+ if (indexToFocus >= 0) {
33
+ return sortedItems[indexToFocus];
34
+ } else {
35
+ return getLastItem(sortedItems);
36
+ }
37
+ }
38
+
39
+ function htmlElementsComparator(a, b) {
40
+ if (a.offsetTop > b.offsetTop) {
41
+ return 1;
42
+ }
43
+
44
+ if (a.offsetTop < b.offsetTop) {
45
+ return -1;
46
+ }
47
+
48
+ if (a.offsetLeft > b.offsetLeft) {
49
+ return 1;
50
+ }
51
+
52
+ if (a.offsetLeft < b.offsetLeft) {
53
+ return -1;
54
+ }
55
+
56
+ return 0;
57
+ }
58
+
59
+ export { getFirstItem, getLastItem, getNextItem, getPrevItem, htmlElementsComparator };
package/lib/parts/use-menu-keyboard-navigation.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ /// <reference types="react" />
2
+ interface UseMenuKeyboardNavigationParams {
3
+ enableKeyboardNavigation: boolean;
4
+ activateFirstItem: boolean;
5
+ returnFocusOnUnmount: boolean;
6
+ }
7
+ export declare function useMenuKeyboardNavigation({ enableKeyboardNavigation, activateFirstItem, returnFocusOnUnmount }: UseMenuKeyboardNavigationParams): {
8
+ activeItemRef: import("react").MutableRefObject<any>;
9
+ registerItem: (ref: HTMLElement) => void;
10
+ unregisterItem: (ref: HTMLElement) => void;
11
+ isKeyboardNavigating: boolean;
12
+ };
13
+ export {};
package/lib/parts/use-menu-keyboard-navigation.js ADDED
@@ -0,0 +1,152 @@
1
+ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
2
+ import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
3
+ import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
4
+ import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/values";
5
+ import _Set from "@babel/runtime-corejs3/core-js-stable/set";
6
+ import { useRef, useState, useCallback, useEffect } from 'react';
7
+ import { htmlElementsComparator, getFirstItem, getLastItem, getPrevItem, getNextItem } from './navigation-utils.js';
8
+
9
+ function debounce(callback, timeout) {
10
+ var id;
11
+ return function () {
12
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
13
+ args[_key] = arguments[_key];
14
+ }
15
+
16
+ clearTimeout(id);
17
+ id = setTimeout(function () {
18
+ return callback.apply(void 0, args);
19
+ }, timeout);
20
+ return id;
21
+ };
22
+ }
23
+
24
+ function getSortedItems(itemsSet) {
25
+ var _context;
26
+
27
+ return _sortInstanceProperty(_context = _Array$from(_valuesInstanceProperty(itemsSet).call(itemsSet))).call(_context, htmlElementsComparator);
28
+ }
29
+
30
+ function useMenuKeyboardNavigation(_ref) {
31
+ var enableKeyboardNavigation = _ref.enableKeyboardNavigation,
32
+ activateFirstItem = _ref.activateFirstItem,
33
+ returnFocusOnUnmount = _ref.returnFocusOnUnmount;
34
+ var activeItemRef = useRef(null);
35
+
36
+ var _useState = useState(false),
37
+ _useState2 = _slicedToArray(_useState, 2),
38
+ setDummyState = _useState2[1];
39
+
40
+ var setActiveItemRef = useCallback(function (ref) {
41
+ activeItemRef.current = ref;
42
+
43
+ if (ref) {
44
+ ref.focus();
45
+ }
46
+
47
+ setDummyState(function (t) {
48
+ return !t;
49
+ });
50
+ }, [setDummyState]);
51
+ var menuItemsSet = useRef(new _Set());
52
+ useEffect(function () {
53
+ if (!enableKeyboardNavigation || !activateFirstItem || !returnFocusOnUnmount) {
54
+ return;
55
+ }
56
+
57
+ var lastFocusedEl = document.activeElement; // eslint-disable-next-line consistent-return
58
+
59
+ return function () {
60
+ if (lastFocusedEl) {
61
+ lastFocusedEl.focus({
62
+ preventScroll: true
63
+ });
64
+ }
65
+ };
66
+ }, []);
67
+ var debouncedActivateFirstItem = debounce(function () {
68
+ var items = getSortedItems(menuItemsSet.current);
69
+ setActiveItemRef(getFirstItem(items));
70
+ }, 50);
71
+ var registerItem = useCallback(function (ref) {
72
+ if (ref && !menuItemsSet.current.has(ref)) {
73
+ menuItemsSet.current.add(ref);
74
+
75
+ if (activateFirstItem) {
76
+ debouncedActivateFirstItem();
77
+ }
78
+ }
79
+ }, []);
80
+ var unregisterItem = useCallback(function (ref) {
81
+ menuItemsSet.current.delete(ref);
82
+ }, []);
83
+
84
+ var _useState3 = useState(true),
85
+ _useState4 = _slicedToArray(_useState3, 2),
86
+ isKeyboardNavigating = _useState4[0],
87
+ setIsKeyboardNavigating = _useState4[1];
88
+
89
+ var handleMouseMove = useCallback(function () {
90
+ if (menuItemsSet.current.has(document.activeElement) && document.activeElement.blur) {
91
+ document.activeElement.blur();
92
+ }
93
+
94
+ setActiveItemRef(null);
95
+ setIsKeyboardNavigating(false);
96
+ }, []); // eslint-disable-next-line consistent-return
97
+
98
+ useEffect(function () {
99
+ if (isKeyboardNavigating) {
100
+ document.addEventListener('mousemove', handleMouseMove);
101
+ return function () {
102
+ return document.removeEventListener('mousemove', handleMouseMove);
103
+ };
104
+ }
105
+ }, [handleMouseMove, isKeyboardNavigating]);
106
+ useEffect(function () {
107
+ if (!enableKeyboardNavigation) {
108
+ return;
109
+ }
110
+
111
+ var handler = function handler(e) {
112
+ setIsKeyboardNavigating(true);
113
+ var items = getSortedItems(menuItemsSet.current);
114
+
115
+ switch (e.key) {
116
+ case 'ArrowDown':
117
+ e.preventDefault();
118
+ setActiveItemRef(getNextItem(items, activeItemRef.current));
119
+ break;
120
+
121
+ case 'ArrowUp':
122
+ e.preventDefault();
123
+ setActiveItemRef(getPrevItem(items, activeItemRef.current));
124
+ break;
125
+
126
+ case 'Home':
127
+ e.preventDefault();
128
+ setActiveItemRef(getFirstItem(items));
129
+ break;
130
+
131
+ case 'End':
132
+ e.preventDefault();
133
+ setActiveItemRef(getLastItem(items));
134
+ break;
135
+ }
136
+ };
137
+
138
+ document.addEventListener('keydown', handler, true); // eslint-disable-next-line consistent-return
139
+
140
+ return function () {
141
+ document.removeEventListener('keydown', handler, true);
142
+ };
143
+ }, [enableKeyboardNavigation]);
144
+ return {
145
+ activeItemRef: activeItemRef,
146
+ registerItem: registerItem,
147
+ unregisterItem: unregisterItem,
148
+ isKeyboardNavigating: isKeyboardNavigating
149
+ };
150
+ }
151
+
152
+ export { useMenuKeyboardNavigation };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/menu",
3
- "version": "0.5.1",
3
+ "version": "0.6.0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -17,7 +17,8 @@
17
17
  "dependencies": {
18
18
  "@babel/runtime-corejs3": "^7.11.0",
19
19
  "classnames": "^2.2.6",
20
- "core-js": "^3"
20
+ "core-js": "^3",
21
+ "nanoid": "^3.3.3"
21
22
  },
22
23
  "peerDependencies": {
23
24
  "@rescui/ui-contexts": "<0.3.0",
@@ -28,12 +29,12 @@
28
29
  "@rescui/colors": "^0.1.1",
29
30
  "@rescui/postcss-preset-library": "^0.0.5",
30
31
  "@rescui/scripts": "^0.1.5",
31
- "@rescui/typography": "^0.7.1",
32
+ "@rescui/typography": "^0.7.2",
32
33
  "@rescui/visual-regression": "^0.0.1",
33
34
  "postcss": "^8.3.0"
34
35
  },
35
36
  "scripts": {
36
37
  "build": "rescui-scripts build"
37
38
  },
38
- "gitHead": "10cf86a6c4c4b678c0b94c03c56c6d33214f03e8"
39
+ "gitHead": "67f695b72d13fd8445542c48f096b65656fdd7d9"
39
40
  }