1use crate::{
2 IconButtonShape, KeyBinding, List, ListItem, ListSeparator, ListSubHeader, Tooltip, prelude::*,
3 utils::WithRemSize,
4};
5use gpui::{
6 Action, AnyElement, App, Bounds, Corner, DismissEvent, Entity, EventEmitter, FocusHandle,
7 Focusable, MouseButton, MouseDownEvent, MouseMoveEvent, MouseUpEvent, Pixels, Point, Size,
8 Subscription, anchored, canvas, prelude::*, px,
9};
10use menu::{SelectChild, SelectFirst, SelectLast, SelectNext, SelectParent, SelectPrevious};
11use settings::Settings;
12use std::{
13 cell::{Cell, RefCell},
14 collections::HashMap,
15 rc::Rc,
16 time::{Duration, Instant},
17};
18use theme::ThemeSettings;
19
20#[derive(Copy, Clone, Debug, PartialEq, Eq)]
21enum SubmenuOpenTrigger {
22 Pointer,
23 Keyboard,
24}
25
26struct OpenSubmenu {
27 item_index: usize,
28 entity: Entity<ContextMenu>,
29 trigger_bounds: Option<Bounds<Pixels>>,
30 offset: Option<Pixels>,
31 _dismiss_subscription: Subscription,
32}
33
34enum SubmenuState {
35 Closed,
36 Open(OpenSubmenu),
37}
38
39#[derive(Clone, Copy, PartialEq, Eq, Default)]
40enum HoverTarget {
41 #[default]
42 None,
43 MainMenu,
44 Submenu,
45}
46
47pub enum ContextMenuItem {
48 Separator,
49 Header(SharedString),
50 /// title, link_label, link_url
51 HeaderWithLink(SharedString, SharedString, SharedString), // This could be folded into header
52 Label(SharedString),
53 Entry(ContextMenuEntry),
54 CustomEntry {
55 entry_render: Box<dyn Fn(&mut Window, &mut App) -> AnyElement>,
56 handler: Rc<dyn Fn(Option<&FocusHandle>, &mut Window, &mut App)>,
57 selectable: bool,
58 documentation_aside: Option<DocumentationAside>,
59 },
60 Submenu {
61 label: SharedString,
62 icon: Option<IconName>,
63 icon_color: Option<Color>,
64 builder: Rc<dyn Fn(ContextMenu, &mut Window, &mut Context<ContextMenu>) -> ContextMenu>,
65 },
66}
67
68impl ContextMenuItem {
69 pub fn custom_entry(
70 entry_render: impl Fn(&mut Window, &mut App) -> AnyElement + 'static,
71 handler: impl Fn(&mut Window, &mut App) + 'static,
72 documentation_aside: Option<DocumentationAside>,
73 ) -> Self {
74 Self::CustomEntry {
75 entry_render: Box::new(entry_render),
76 handler: Rc::new(move |_, window, cx| handler(window, cx)),
77 selectable: true,
78 documentation_aside,
79 }
80 }
81}
82
83pub struct ContextMenuEntry {
84 toggle: Option<(IconPosition, bool)>,
85 label: SharedString,
86 icon: Option<IconName>,
87 custom_icon_path: Option<SharedString>,
88 custom_icon_svg: Option<SharedString>,
89 icon_position: IconPosition,
90 icon_size: IconSize,
91 icon_color: Option<Color>,
92 handler: Rc<dyn Fn(Option<&FocusHandle>, &mut Window, &mut App)>,
93 action: Option<Box<dyn Action>>,
94 disabled: bool,
95 documentation_aside: Option<DocumentationAside>,
96 end_slot_icon: Option<IconName>,
97 end_slot_title: Option<SharedString>,
98 end_slot_handler: Option<Rc<dyn Fn(Option<&FocusHandle>, &mut Window, &mut App)>>,
99 show_end_slot_on_hover: bool,
100}
101
102impl ContextMenuEntry {
103 pub fn new(label: impl Into<SharedString>) -> Self {
104 ContextMenuEntry {
105 toggle: None,
106 label: label.into(),
107 icon: None,
108 custom_icon_path: None,
109 custom_icon_svg: None,
110 icon_position: IconPosition::Start,
111 icon_size: IconSize::Small,
112 icon_color: None,
113 handler: Rc::new(|_, _, _| {}),
114 action: None,
115 disabled: false,
116 documentation_aside: None,
117 end_slot_icon: None,
118 end_slot_title: None,
119 end_slot_handler: None,
120 show_end_slot_on_hover: false,
121 }
122 }
123
124 pub fn toggleable(mut self, toggle_position: IconPosition, toggled: bool) -> Self {
125 self.toggle = Some((toggle_position, toggled));
126 self
127 }
128
129 pub fn icon(mut self, icon: IconName) -> Self {
130 self.icon = Some(icon);
131 self
132 }
133
134 pub fn custom_icon_path(mut self, path: impl Into<SharedString>) -> Self {
135 self.custom_icon_path = Some(path.into());
136 self.custom_icon_svg = None; // Clear other icon sources if custom path is set
137 self.icon = None;
138 self
139 }
140
141 pub fn custom_icon_svg(mut self, svg: impl Into<SharedString>) -> Self {
142 self.custom_icon_svg = Some(svg.into());
143 self.custom_icon_path = None; // Clear other icon sources if custom path is set
144 self.icon = None;
145 self
146 }
147
148 pub fn icon_position(mut self, position: IconPosition) -> Self {
149 self.icon_position = position;
150 self
151 }
152
153 pub fn icon_size(mut self, icon_size: IconSize) -> Self {
154 self.icon_size = icon_size;
155 self
156 }
157
158 pub fn icon_color(mut self, icon_color: Color) -> Self {
159 self.icon_color = Some(icon_color);
160 self
161 }
162
163 pub fn toggle(mut self, toggle_position: IconPosition, toggled: bool) -> Self {
164 self.toggle = Some((toggle_position, toggled));
165 self
166 }
167
168 pub fn action(mut self, action: Box<dyn Action>) -> Self {
169 self.action = Some(action);
170 self
171 }
172
173 pub fn handler(mut self, handler: impl Fn(&mut Window, &mut App) + 'static) -> Self {
174 self.handler = Rc::new(move |_, window, cx| handler(window, cx));
175 self
176 }
177
178 pub fn disabled(mut self, disabled: bool) -> Self {
179 self.disabled = disabled;
180 self
181 }
182
183 pub fn documentation_aside(
184 mut self,
185 side: DocumentationSide,
186 render: impl Fn(&mut App) -> AnyElement + 'static,
187 ) -> Self {
188 self.documentation_aside = Some(DocumentationAside {
189 side,
190 render: Rc::new(render),
191 });
192
193 self
194 }
195}
196
197impl FluentBuilder for ContextMenuEntry {}
198
199impl From<ContextMenuEntry> for ContextMenuItem {
200 fn from(entry: ContextMenuEntry) -> Self {
201 ContextMenuItem::Entry(entry)
202 }
203}
204
205pub struct ContextMenu {
206 builder: Option<Rc<dyn Fn(Self, &mut Window, &mut Context<Self>) -> Self>>,
207 items: Vec<ContextMenuItem>,
208 focus_handle: FocusHandle,
209 action_context: Option<FocusHandle>,
210 selected_index: Option<usize>,
211 delayed: bool,
212 clicked: bool,
213 end_slot_action: Option<Box<dyn Action>>,
214 key_context: SharedString,
215 _on_blur_subscription: Subscription,
216 keep_open_on_confirm: bool,
217 fixed_width: Option<DefiniteLength>,
218 main_menu: Option<Entity<ContextMenu>>,
219 main_menu_observed_bounds: Rc<Cell<Option<Bounds<Pixels>>>>,
220 // Docs aide-related fields
221 documentation_aside: Option<(usize, DocumentationAside)>,
222 aside_trigger_bounds: Rc<RefCell<HashMap<usize, Bounds<Pixels>>>>,
223 // Submenu-related fields
224 submenu_state: SubmenuState,
225 hover_target: HoverTarget,
226 submenu_safety_threshold_x: Option<Pixels>,
227 submenu_trigger_bounds: Rc<Cell<Option<Bounds<Pixels>>>>,
228 submenu_trigger_mouse_down: bool,
229 ignore_blur_until: Option<Instant>,
230}
231
232#[derive(Copy, Clone, PartialEq, Eq)]
233pub enum DocumentationSide {
234 Left,
235 Right,
236}
237
238#[derive(Clone)]
239pub struct DocumentationAside {
240 pub side: DocumentationSide,
241 pub render: Rc<dyn Fn(&mut App) -> AnyElement>,
242}
243
244impl DocumentationAside {
245 pub fn new(side: DocumentationSide, render: Rc<dyn Fn(&mut App) -> AnyElement>) -> Self {
246 Self { side, render }
247 }
248}
249
250impl Focusable for ContextMenu {
251 fn focus_handle(&self, _cx: &App) -> FocusHandle {
252 self.focus_handle.clone()
253 }
254}
255
256impl EventEmitter<DismissEvent> for ContextMenu {}
257
258impl FluentBuilder for ContextMenu {}
259
260impl ContextMenu {
261 pub fn new(
262 window: &mut Window,
263 cx: &mut Context<Self>,
264 f: impl FnOnce(Self, &mut Window, &mut Context<Self>) -> Self,
265 ) -> Self {
266 let focus_handle = cx.focus_handle();
267 let _on_blur_subscription = cx.on_blur(
268 &focus_handle,
269 window,
270 |this: &mut ContextMenu, window, cx| {
271 if let Some(ignore_until) = this.ignore_blur_until {
272 if Instant::now() < ignore_until {
273 return;
274 } else {
275 this.ignore_blur_until = None;
276 }
277 }
278
279 if this.main_menu.is_none() {
280 if let SubmenuState::Open(open_submenu) = &this.submenu_state {
281 let submenu_focus = open_submenu.entity.read(cx).focus_handle.clone();
282 if submenu_focus.contains_focused(window, cx) {
283 return;
284 }
285 }
286 }
287
288 this.cancel(&menu::Cancel, window, cx)
289 },
290 );
291 window.refresh();
292
293 f(
294 Self {
295 builder: None,
296 items: Default::default(),
297 focus_handle,
298 action_context: None,
299 selected_index: None,
300 delayed: false,
301 clicked: false,
302 end_slot_action: None,
303 key_context: "menu".into(),
304 _on_blur_subscription,
305 keep_open_on_confirm: false,
306 fixed_width: None,
307 main_menu: None,
308 main_menu_observed_bounds: Rc::new(Cell::new(None)),
309 documentation_aside: None,
310 aside_trigger_bounds: Rc::new(RefCell::new(HashMap::default())),
311 submenu_state: SubmenuState::Closed,
312 hover_target: HoverTarget::MainMenu,
313 submenu_safety_threshold_x: None,
314 submenu_trigger_bounds: Rc::new(Cell::new(None)),
315 submenu_trigger_mouse_down: false,
316 ignore_blur_until: None,
317 },
318 window,
319 cx,
320 )
321 }
322
323 pub fn build(
324 window: &mut Window,
325 cx: &mut App,
326 f: impl FnOnce(Self, &mut Window, &mut Context<Self>) -> Self,
327 ) -> Entity<Self> {
328 cx.new(|cx| Self::new(window, cx, f))
329 }
330
331 /// Builds a [`ContextMenu`] that will stay open when making changes instead of closing after each confirmation.
332 ///
333 /// The main difference from [`ContextMenu::build`] is the type of the `builder`, as we need to be able to hold onto
334 /// it to call it again.
335 pub fn build_persistent(
336 window: &mut Window,
337 cx: &mut App,
338 builder: impl Fn(Self, &mut Window, &mut Context<Self>) -> Self + 'static,
339 ) -> Entity<Self> {
340 cx.new(|cx| {
341 let builder = Rc::new(builder);
342
343 let focus_handle = cx.focus_handle();
344 let _on_blur_subscription = cx.on_blur(
345 &focus_handle,
346 window,
347 |this: &mut ContextMenu, window, cx| {
348 if let Some(ignore_until) = this.ignore_blur_until {
349 if Instant::now() < ignore_until {
350 return;
351 } else {
352 this.ignore_blur_until = None;
353 }
354 }
355
356 if this.main_menu.is_none() {
357 if let SubmenuState::Open(open_submenu) = &this.submenu_state {
358 let submenu_focus = open_submenu.entity.read(cx).focus_handle.clone();
359 if submenu_focus.contains_focused(window, cx) {
360 return;
361 }
362 }
363 }
364
365 this.cancel(&menu::Cancel, window, cx)
366 },
367 );
368 window.refresh();
369
370 (builder.clone())(
371 Self {
372 builder: Some(builder),
373 items: Default::default(),
374 focus_handle,
375 action_context: None,
376 selected_index: None,
377 delayed: false,
378 clicked: false,
379 end_slot_action: None,
380 key_context: "menu".into(),
381 _on_blur_subscription,
382 keep_open_on_confirm: true,
383 fixed_width: None,
384 main_menu: None,
385 main_menu_observed_bounds: Rc::new(Cell::new(None)),
386 documentation_aside: None,
387 aside_trigger_bounds: Rc::new(RefCell::new(HashMap::default())),
388 submenu_state: SubmenuState::Closed,
389 hover_target: HoverTarget::MainMenu,
390 submenu_safety_threshold_x: None,
391 submenu_trigger_bounds: Rc::new(Cell::new(None)),
392 submenu_trigger_mouse_down: false,
393 ignore_blur_until: None,
394 },
395 window,
396 cx,
397 )
398 })
399 }
400
401 /// Rebuilds the menu.
402 ///
403 /// This is used to refresh the menu entries when entries are toggled when the menu is configured with
404 /// `keep_open_on_confirm = true`.
405 ///
406 /// This only works if the [`ContextMenu`] was constructed using [`ContextMenu::build_persistent`]. Otherwise it is
407 /// a no-op.
408 pub fn rebuild(&mut self, window: &mut Window, cx: &mut Context<Self>) {
409 let Some(builder) = self.builder.clone() else {
410 return;
411 };
412
413 // The way we rebuild the menu is a bit of a hack.
414 let focus_handle = cx.focus_handle();
415 let new_menu = (builder.clone())(
416 Self {
417 builder: Some(builder),
418 items: Default::default(),
419 focus_handle: focus_handle.clone(),
420 action_context: None,
421 selected_index: None,
422 delayed: false,
423 clicked: false,
424 end_slot_action: None,
425 key_context: "menu".into(),
426 _on_blur_subscription: cx.on_blur(
427 &focus_handle,
428 window,
429 |this: &mut ContextMenu, window, cx| {
430 if let Some(ignore_until) = this.ignore_blur_until {
431 if Instant::now() < ignore_until {
432 return;
433 } else {
434 this.ignore_blur_until = None;
435 }
436 }
437
438 if this.main_menu.is_none() {
439 if let SubmenuState::Open(open_submenu) = &this.submenu_state {
440 let submenu_focus =
441 open_submenu.entity.read(cx).focus_handle.clone();
442 if submenu_focus.contains_focused(window, cx) {
443 return;
444 }
445 }
446 }
447
448 this.cancel(&menu::Cancel, window, cx)
449 },
450 ),
451 keep_open_on_confirm: false,
452 fixed_width: None,
453 main_menu: None,
454 main_menu_observed_bounds: Rc::new(Cell::new(None)),
455 documentation_aside: None,
456 aside_trigger_bounds: Rc::new(RefCell::new(HashMap::default())),
457 submenu_state: SubmenuState::Closed,
458 hover_target: HoverTarget::MainMenu,
459 submenu_safety_threshold_x: None,
460 submenu_trigger_bounds: Rc::new(Cell::new(None)),
461 submenu_trigger_mouse_down: false,
462 ignore_blur_until: None,
463 },
464 window,
465 cx,
466 );
467
468 self.items = new_menu.items;
469
470 cx.notify();
471 }
472
473 pub fn context(mut self, focus: FocusHandle) -> Self {
474 self.action_context = Some(focus);
475 self
476 }
477
478 pub fn header(mut self, title: impl Into<SharedString>) -> Self {
479 self.items.push(ContextMenuItem::Header(title.into()));
480 self
481 }
482
483 pub fn header_with_link(
484 mut self,
485 title: impl Into<SharedString>,
486 link_label: impl Into<SharedString>,
487 link_url: impl Into<SharedString>,
488 ) -> Self {
489 self.items.push(ContextMenuItem::HeaderWithLink(
490 title.into(),
491 link_label.into(),
492 link_url.into(),
493 ));
494 self
495 }
496
497 pub fn separator(mut self) -> Self {
498 self.items.push(ContextMenuItem::Separator);
499 self
500 }
501
502 pub fn extend<I: Into<ContextMenuItem>>(mut self, items: impl IntoIterator<Item = I>) -> Self {
503 self.items.extend(items.into_iter().map(Into::into));
504 self
505 }
506
507 pub fn item(mut self, item: impl Into<ContextMenuItem>) -> Self {
508 self.items.push(item.into());
509 self
510 }
511
512 pub fn push_item(&mut self, item: impl Into<ContextMenuItem>) {
513 self.items.push(item.into());
514 }
515
516 pub fn entry(
517 mut self,
518 label: impl Into<SharedString>,
519 action: Option<Box<dyn Action>>,
520 handler: impl Fn(&mut Window, &mut App) + 'static,
521 ) -> Self {
522 self.items.push(ContextMenuItem::Entry(ContextMenuEntry {
523 toggle: None,
524 label: label.into(),
525 handler: Rc::new(move |_, window, cx| handler(window, cx)),
526 icon: None,
527 custom_icon_path: None,
528 custom_icon_svg: None,
529 icon_position: IconPosition::End,
530 icon_size: IconSize::Small,
531 icon_color: None,
532 action,
533 disabled: false,
534 documentation_aside: None,
535 end_slot_icon: None,
536 end_slot_title: None,
537 end_slot_handler: None,
538 show_end_slot_on_hover: false,
539 }));
540 self
541 }
542
543 pub fn entry_with_end_slot(
544 mut self,
545 label: impl Into<SharedString>,
546 action: Option<Box<dyn Action>>,
547 handler: impl Fn(&mut Window, &mut App) + 'static,
548 end_slot_icon: IconName,
549 end_slot_title: SharedString,
550 end_slot_handler: impl Fn(&mut Window, &mut App) + 'static,
551 ) -> Self {
552 self.items.push(ContextMenuItem::Entry(ContextMenuEntry {
553 toggle: None,
554 label: label.into(),
555 handler: Rc::new(move |_, window, cx| handler(window, cx)),
556 icon: None,
557 custom_icon_path: None,
558 custom_icon_svg: None,
559 icon_position: IconPosition::End,
560 icon_size: IconSize::Small,
561 icon_color: None,
562 action,
563 disabled: false,
564 documentation_aside: None,
565 end_slot_icon: Some(end_slot_icon),
566 end_slot_title: Some(end_slot_title),
567 end_slot_handler: Some(Rc::new(move |_, window, cx| end_slot_handler(window, cx))),
568 show_end_slot_on_hover: false,
569 }));
570 self
571 }
572
573 pub fn entry_with_end_slot_on_hover(
574 mut self,
575 label: impl Into<SharedString>,
576 action: Option<Box<dyn Action>>,
577 handler: impl Fn(&mut Window, &mut App) + 'static,
578 end_slot_icon: IconName,
579 end_slot_title: SharedString,
580 end_slot_handler: impl Fn(&mut Window, &mut App) + 'static,
581 ) -> Self {
582 self.items.push(ContextMenuItem::Entry(ContextMenuEntry {
583 toggle: None,
584 label: label.into(),
585 handler: Rc::new(move |_, window, cx| handler(window, cx)),
586 icon: None,
587 custom_icon_path: None,
588 custom_icon_svg: None,
589 icon_position: IconPosition::End,
590 icon_size: IconSize::Small,
591 icon_color: None,
592 action,
593 disabled: false,
594 documentation_aside: None,
595 end_slot_icon: Some(end_slot_icon),
596 end_slot_title: Some(end_slot_title),
597 end_slot_handler: Some(Rc::new(move |_, window, cx| end_slot_handler(window, cx))),
598 show_end_slot_on_hover: true,
599 }));
600 self
601 }
602
603 pub fn toggleable_entry(
604 mut self,
605 label: impl Into<SharedString>,
606 toggled: bool,
607 position: IconPosition,
608 action: Option<Box<dyn Action>>,
609 handler: impl Fn(&mut Window, &mut App) + 'static,
610 ) -> Self {
611 self.items.push(ContextMenuItem::Entry(ContextMenuEntry {
612 toggle: Some((position, toggled)),
613 label: label.into(),
614 handler: Rc::new(move |_, window, cx| handler(window, cx)),
615 icon: None,
616 custom_icon_path: None,
617 custom_icon_svg: None,
618 icon_position: position,
619 icon_size: IconSize::Small,
620 icon_color: None,
621 action,
622 disabled: false,
623 documentation_aside: None,
624 end_slot_icon: None,
625 end_slot_title: None,
626 end_slot_handler: None,
627 show_end_slot_on_hover: false,
628 }));
629 self
630 }
631
632 pub fn custom_row(
633 mut self,
634 entry_render: impl Fn(&mut Window, &mut App) -> AnyElement + 'static,
635 ) -> Self {
636 self.items.push(ContextMenuItem::CustomEntry {
637 entry_render: Box::new(entry_render),
638 handler: Rc::new(|_, _, _| {}),
639 selectable: false,
640 documentation_aside: None,
641 });
642 self
643 }
644
645 pub fn custom_entry(
646 mut self,
647 entry_render: impl Fn(&mut Window, &mut App) -> AnyElement + 'static,
648 handler: impl Fn(&mut Window, &mut App) + 'static,
649 ) -> Self {
650 self.items.push(ContextMenuItem::CustomEntry {
651 entry_render: Box::new(entry_render),
652 handler: Rc::new(move |_, window, cx| handler(window, cx)),
653 selectable: true,
654 documentation_aside: None,
655 });
656 self
657 }
658
659 pub fn label(mut self, label: impl Into<SharedString>) -> Self {
660 self.items.push(ContextMenuItem::Label(label.into()));
661 self
662 }
663
664 pub fn action(self, label: impl Into<SharedString>, action: Box<dyn Action>) -> Self {
665 self.action_checked(label, action, false)
666 }
667
668 pub fn action_checked(
669 mut self,
670 label: impl Into<SharedString>,
671 action: Box<dyn Action>,
672 checked: bool,
673 ) -> Self {
674 self.items.push(ContextMenuItem::Entry(ContextMenuEntry {
675 toggle: if checked {
676 Some((IconPosition::Start, true))
677 } else {
678 None
679 },
680 label: label.into(),
681 action: Some(action.boxed_clone()),
682 handler: Rc::new(move |context, window, cx| {
683 if let Some(context) = &context {
684 window.focus(context, cx);
685 }
686 window.dispatch_action(action.boxed_clone(), cx);
687 }),
688 icon: None,
689 custom_icon_path: None,
690 custom_icon_svg: None,
691 icon_position: IconPosition::End,
692 icon_size: IconSize::Small,
693 icon_color: None,
694 disabled: false,
695 documentation_aside: None,
696 end_slot_icon: None,
697 end_slot_title: None,
698 end_slot_handler: None,
699 show_end_slot_on_hover: false,
700 }));
701 self
702 }
703
704 pub fn action_disabled_when(
705 mut self,
706 disabled: bool,
707 label: impl Into<SharedString>,
708 action: Box<dyn Action>,
709 ) -> Self {
710 self.items.push(ContextMenuItem::Entry(ContextMenuEntry {
711 toggle: None,
712 label: label.into(),
713 action: Some(action.boxed_clone()),
714 handler: Rc::new(move |context, window, cx| {
715 if let Some(context) = &context {
716 window.focus(context, cx);
717 }
718 window.dispatch_action(action.boxed_clone(), cx);
719 }),
720 icon: None,
721 custom_icon_path: None,
722 custom_icon_svg: None,
723 icon_size: IconSize::Small,
724 icon_position: IconPosition::End,
725 icon_color: None,
726 disabled,
727 documentation_aside: None,
728 end_slot_icon: None,
729 end_slot_title: None,
730 end_slot_handler: None,
731 show_end_slot_on_hover: false,
732 }));
733 self
734 }
735
736 pub fn link(mut self, label: impl Into<SharedString>, action: Box<dyn Action>) -> Self {
737 self.items.push(ContextMenuItem::Entry(ContextMenuEntry {
738 toggle: None,
739 label: label.into(),
740 action: Some(action.boxed_clone()),
741 handler: Rc::new(move |_, window, cx| window.dispatch_action(action.boxed_clone(), cx)),
742 icon: Some(IconName::ArrowUpRight),
743 custom_icon_path: None,
744 custom_icon_svg: None,
745 icon_size: IconSize::XSmall,
746 icon_position: IconPosition::End,
747 icon_color: None,
748 disabled: false,
749 documentation_aside: None,
750 end_slot_icon: None,
751 end_slot_title: None,
752 end_slot_handler: None,
753 show_end_slot_on_hover: false,
754 }));
755 self
756 }
757
758 pub fn submenu(
759 mut self,
760 label: impl Into<SharedString>,
761 builder: impl Fn(ContextMenu, &mut Window, &mut Context<ContextMenu>) -> ContextMenu + 'static,
762 ) -> Self {
763 self.items.push(ContextMenuItem::Submenu {
764 label: label.into(),
765 icon: None,
766 icon_color: None,
767 builder: Rc::new(builder),
768 });
769 self
770 }
771
772 pub fn submenu_with_icon(
773 mut self,
774 label: impl Into<SharedString>,
775 icon: IconName,
776 builder: impl Fn(ContextMenu, &mut Window, &mut Context<ContextMenu>) -> ContextMenu + 'static,
777 ) -> Self {
778 self.items.push(ContextMenuItem::Submenu {
779 label: label.into(),
780 icon: Some(icon),
781 icon_color: None,
782 builder: Rc::new(builder),
783 });
784 self
785 }
786
787 pub fn submenu_with_colored_icon(
788 mut self,
789 label: impl Into<SharedString>,
790 icon: IconName,
791 icon_color: Color,
792 builder: impl Fn(ContextMenu, &mut Window, &mut Context<ContextMenu>) -> ContextMenu + 'static,
793 ) -> Self {
794 self.items.push(ContextMenuItem::Submenu {
795 label: label.into(),
796 icon: Some(icon),
797 icon_color: Some(icon_color),
798 builder: Rc::new(builder),
799 });
800 self
801 }
802
803 pub fn keep_open_on_confirm(mut self, keep_open: bool) -> Self {
804 self.keep_open_on_confirm = keep_open;
805 self
806 }
807
808 pub fn trigger_end_slot_handler(&mut self, window: &mut Window, cx: &mut Context<Self>) {
809 let Some(entry) = self.selected_index.and_then(|ix| self.items.get(ix)) else {
810 return;
811 };
812 let ContextMenuItem::Entry(entry) = entry else {
813 return;
814 };
815 let Some(handler) = entry.end_slot_handler.as_ref() else {
816 return;
817 };
818 handler(None, window, cx);
819 }
820
821 pub fn fixed_width(mut self, width: DefiniteLength) -> Self {
822 self.fixed_width = Some(width);
823 self
824 }
825
826 pub fn end_slot_action(mut self, action: Box<dyn Action>) -> Self {
827 self.end_slot_action = Some(action);
828 self
829 }
830
831 pub fn key_context(mut self, context: impl Into<SharedString>) -> Self {
832 self.key_context = context.into();
833 self
834 }
835
836 pub fn confirm(&mut self, _: &menu::Confirm, window: &mut Window, cx: &mut Context<Self>) {
837 let context = self.action_context.as_ref();
838 if let Some(
839 ContextMenuItem::Entry(ContextMenuEntry {
840 handler,
841 disabled: false,
842 ..
843 })
844 | ContextMenuItem::CustomEntry { handler, .. },
845 ) = self.selected_index.and_then(|ix| self.items.get(ix))
846 {
847 (handler)(context, window, cx)
848 }
849
850 if self.main_menu.is_some() && !self.keep_open_on_confirm {
851 self.clicked = true;
852 }
853
854 if self.keep_open_on_confirm {
855 self.rebuild(window, cx);
856 } else {
857 cx.emit(DismissEvent);
858 }
859 }
860
861 pub fn cancel(&mut self, _: &menu::Cancel, window: &mut Window, cx: &mut Context<Self>) {
862 if self.main_menu.is_some() {
863 cx.emit(DismissEvent);
864
865 // Restore keyboard focus to the parent menu so arrow keys / Escape / Enter work again.
866 if let Some(parent) = &self.main_menu {
867 let parent_focus = parent.read(cx).focus_handle.clone();
868
869 parent.update(cx, |parent, _cx| {
870 parent.ignore_blur_until = Some(Instant::now() + Duration::from_millis(200));
871 });
872
873 window.focus(&parent_focus, cx);
874 }
875
876 return;
877 }
878
879 cx.emit(DismissEvent);
880 }
881
882 pub fn end_slot(&mut self, _: &dyn Action, window: &mut Window, cx: &mut Context<Self>) {
883 let Some(item) = self.selected_index.and_then(|ix| self.items.get(ix)) else {
884 return;
885 };
886 let ContextMenuItem::Entry(entry) = item else {
887 return;
888 };
889 let Some(handler) = entry.end_slot_handler.as_ref() else {
890 return;
891 };
892 handler(None, window, cx);
893 self.rebuild(window, cx);
894 cx.notify();
895 }
896
897 pub fn clear_selected(&mut self) {
898 self.selected_index = None;
899 }
900
901 pub fn select_first(&mut self, _: &SelectFirst, window: &mut Window, cx: &mut Context<Self>) {
902 if let Some(ix) = self.items.iter().position(|item| item.is_selectable()) {
903 self.select_index(ix, window, cx);
904 }
905 cx.notify();
906 }
907
908 pub fn select_last(&mut self, window: &mut Window, cx: &mut Context<Self>) -> Option<usize> {
909 for (ix, item) in self.items.iter().enumerate().rev() {
910 if item.is_selectable() {
911 return self.select_index(ix, window, cx);
912 }
913 }
914 None
915 }
916
917 fn handle_select_last(&mut self, _: &SelectLast, window: &mut Window, cx: &mut Context<Self>) {
918 if self.select_last(window, cx).is_some() {
919 cx.notify();
920 }
921 }
922
923 pub fn select_next(&mut self, _: &SelectNext, window: &mut Window, cx: &mut Context<Self>) {
924 if let Some(ix) = self.selected_index {
925 let next_index = ix + 1;
926 if self.items.len() <= next_index {
927 self.select_first(&SelectFirst, window, cx);
928 return;
929 } else {
930 for (ix, item) in self.items.iter().enumerate().skip(next_index) {
931 if item.is_selectable() {
932 self.select_index(ix, window, cx);
933 cx.notify();
934 return;
935 }
936 }
937 }
938 }
939 self.select_first(&SelectFirst, window, cx);
940 }
941
942 pub fn select_previous(
943 &mut self,
944 _: &SelectPrevious,
945 window: &mut Window,
946 cx: &mut Context<Self>,
947 ) {
948 if let Some(ix) = self.selected_index {
949 for (ix, item) in self.items.iter().enumerate().take(ix).rev() {
950 if item.is_selectable() {
951 self.select_index(ix, window, cx);
952 cx.notify();
953 return;
954 }
955 }
956 }
957 self.handle_select_last(&SelectLast, window, cx);
958 }
959
960 pub fn select_submenu_child(
961 &mut self,
962 _: &SelectChild,
963 window: &mut Window,
964 cx: &mut Context<Self>,
965 ) {
966 let Some(ix) = self.selected_index else {
967 return;
968 };
969
970 let Some(ContextMenuItem::Submenu { builder, .. }) = self.items.get(ix) else {
971 return;
972 };
973
974 self.open_submenu(
975 ix,
976 builder.clone(),
977 SubmenuOpenTrigger::Keyboard,
978 window,
979 cx,
980 );
981
982 if let SubmenuState::Open(open_submenu) = &self.submenu_state {
983 let focus_handle = open_submenu.entity.read(cx).focus_handle.clone();
984 window.focus(&focus_handle, cx);
985 open_submenu.entity.update(cx, |submenu, cx| {
986 submenu.select_first(&SelectFirst, window, cx);
987 });
988 }
989
990 cx.notify();
991 }
992
993 pub fn select_submenu_parent(
994 &mut self,
995 _: &SelectParent,
996 window: &mut Window,
997 cx: &mut Context<Self>,
998 ) {
999 if self.main_menu.is_none() {
1000 return;
1001 }
1002
1003 if let Some(parent) = &self.main_menu {
1004 let parent_clone = parent.clone();
1005
1006 let parent_focus = parent.read(cx).focus_handle.clone();
1007 window.focus(&parent_focus, cx);
1008
1009 cx.emit(DismissEvent);
1010
1011 parent_clone.update(cx, |parent, cx| {
1012 if let SubmenuState::Open(open_submenu) = &parent.submenu_state {
1013 let trigger_index = open_submenu.item_index;
1014 parent.close_submenu(false, cx);
1015 let _ = parent.select_index(trigger_index, window, cx);
1016 cx.notify();
1017 }
1018 });
1019
1020 return;
1021 }
1022
1023 cx.emit(DismissEvent);
1024 }
1025
1026 fn select_index(
1027 &mut self,
1028 ix: usize,
1029 _window: &mut Window,
1030 _cx: &mut Context<Self>,
1031 ) -> Option<usize> {
1032 self.documentation_aside = None;
1033 let item = self.items.get(ix)?;
1034 if item.is_selectable() {
1035 self.selected_index = Some(ix);
1036 match item {
1037 ContextMenuItem::Entry(entry) => {
1038 if let Some(callback) = &entry.documentation_aside {
1039 self.documentation_aside = Some((ix, callback.clone()));
1040 }
1041 }
1042 ContextMenuItem::CustomEntry {
1043 documentation_aside: Some(callback),
1044 ..
1045 } => {
1046 self.documentation_aside = Some((ix, callback.clone()));
1047 }
1048 ContextMenuItem::Submenu { .. } => {}
1049 _ => (),
1050 }
1051 }
1052 Some(ix)
1053 }
1054
1055 fn create_submenu(
1056 builder: Rc<dyn Fn(ContextMenu, &mut Window, &mut Context<ContextMenu>) -> ContextMenu>,
1057 parent_entity: Entity<ContextMenu>,
1058 window: &mut Window,
1059 cx: &mut Context<Self>,
1060 ) -> (Entity<ContextMenu>, Subscription) {
1061 let submenu = Self::build_submenu(builder, parent_entity, window, cx);
1062
1063 let dismiss_subscription = cx.subscribe(&submenu, |this, submenu, _: &DismissEvent, cx| {
1064 let should_dismiss_parent = submenu.read(cx).clicked;
1065
1066 this.close_submenu(false, cx);
1067
1068 if should_dismiss_parent {
1069 cx.emit(DismissEvent);
1070 }
1071 });
1072
1073 (submenu, dismiss_subscription)
1074 }
1075
1076 fn build_submenu(
1077 builder: Rc<dyn Fn(ContextMenu, &mut Window, &mut Context<ContextMenu>) -> ContextMenu>,
1078 parent_entity: Entity<ContextMenu>,
1079 window: &mut Window,
1080 cx: &mut App,
1081 ) -> Entity<ContextMenu> {
1082 cx.new(|cx| {
1083 let focus_handle = cx.focus_handle();
1084
1085 let _on_blur_subscription = cx.on_blur(
1086 &focus_handle,
1087 window,
1088 |_this: &mut ContextMenu, _window, _cx| {},
1089 );
1090
1091 let mut menu = ContextMenu {
1092 builder: None,
1093 items: Default::default(),
1094 focus_handle,
1095 action_context: None,
1096 selected_index: None,
1097 delayed: false,
1098 clicked: false,
1099 end_slot_action: None,
1100 key_context: "menu".into(),
1101 _on_blur_subscription,
1102 keep_open_on_confirm: false,
1103 fixed_width: None,
1104 documentation_aside: None,
1105 aside_trigger_bounds: Rc::new(RefCell::new(HashMap::default())),
1106 main_menu: Some(parent_entity),
1107 main_menu_observed_bounds: Rc::new(Cell::new(None)),
1108 submenu_state: SubmenuState::Closed,
1109 hover_target: HoverTarget::MainMenu,
1110 submenu_safety_threshold_x: None,
1111 submenu_trigger_bounds: Rc::new(Cell::new(None)),
1112 submenu_trigger_mouse_down: false,
1113 ignore_blur_until: None,
1114 };
1115
1116 menu = (builder)(menu, window, cx);
1117 menu
1118 })
1119 }
1120
1121 fn close_submenu(&mut self, clear_selection: bool, cx: &mut Context<Self>) {
1122 self.submenu_state = SubmenuState::Closed;
1123 self.hover_target = HoverTarget::MainMenu;
1124 self.submenu_safety_threshold_x = None;
1125 self.main_menu_observed_bounds.set(None);
1126 self.submenu_trigger_bounds.set(None);
1127
1128 if clear_selection {
1129 self.selected_index = None;
1130 }
1131
1132 cx.notify();
1133 }
1134
1135 fn open_submenu(
1136 &mut self,
1137 item_index: usize,
1138 builder: Rc<dyn Fn(ContextMenu, &mut Window, &mut Context<ContextMenu>) -> ContextMenu>,
1139 reason: SubmenuOpenTrigger,
1140 window: &mut Window,
1141 cx: &mut Context<Self>,
1142 ) {
1143 // If the submenu is already open for this item, don't recreate it.
1144 if matches!(
1145 &self.submenu_state,
1146 SubmenuState::Open(open_submenu) if open_submenu.item_index == item_index
1147 ) {
1148 return;
1149 }
1150
1151 let (submenu, dismiss_subscription) =
1152 Self::create_submenu(builder, cx.entity(), window, cx);
1153
1154 // If we're switching from one submenu item to another, throw away any previously-captured
1155 // offset so we don't reuse a stale position.
1156 self.main_menu_observed_bounds.set(None);
1157 self.submenu_trigger_bounds.set(None);
1158
1159 self.submenu_safety_threshold_x = None;
1160 self.hover_target = HoverTarget::MainMenu;
1161
1162 // When opening a submenu via keyboard, there is a brief moment where focus/hover can
1163 // transition in a way that triggers the parent menu's `on_blur` dismissal.
1164 if matches!(reason, SubmenuOpenTrigger::Keyboard) {
1165 self.ignore_blur_until = Some(Instant::now() + Duration::from_millis(150));
1166 }
1167
1168 let trigger_bounds = self.submenu_trigger_bounds.get();
1169
1170 self.submenu_state = SubmenuState::Open(OpenSubmenu {
1171 item_index,
1172 entity: submenu,
1173 trigger_bounds,
1174 offset: None,
1175 _dismiss_subscription: dismiss_subscription,
1176 });
1177
1178 cx.notify();
1179 }
1180
1181 pub fn on_action_dispatch(
1182 &mut self,
1183 dispatched: &dyn Action,
1184 window: &mut Window,
1185 cx: &mut Context<Self>,
1186 ) {
1187 if self.clicked {
1188 cx.propagate();
1189 return;
1190 }
1191
1192 if let Some(ix) = self.items.iter().position(|item| {
1193 if let ContextMenuItem::Entry(ContextMenuEntry {
1194 action: Some(action),
1195 disabled: false,
1196 ..
1197 }) = item
1198 {
1199 action.partial_eq(dispatched)
1200 } else {
1201 false
1202 }
1203 }) {
1204 self.select_index(ix, window, cx);
1205 self.delayed = true;
1206 cx.notify();
1207 let action = dispatched.boxed_clone();
1208 cx.spawn_in(window, async move |this, cx| {
1209 cx.background_executor()
1210 .timer(Duration::from_millis(50))
1211 .await;
1212 cx.update(|window, cx| {
1213 this.update(cx, |this, cx| {
1214 this.cancel(&menu::Cancel, window, cx);
1215 window.dispatch_action(action, cx);
1216 })
1217 })
1218 })
1219 .detach_and_log_err(cx);
1220 } else {
1221 cx.propagate()
1222 }
1223 }
1224
1225 pub fn on_blur_subscription(mut self, new_subscription: Subscription) -> Self {
1226 self._on_blur_subscription = new_subscription;
1227 self
1228 }
1229
1230 fn render_menu_item(
1231 &self,
1232 ix: usize,
1233 item: &ContextMenuItem,
1234 window: &mut Window,
1235 cx: &mut Context<Self>,
1236 ) -> impl IntoElement + use<> {
1237 match item {
1238 ContextMenuItem::Separator => ListSeparator.into_any_element(),
1239 ContextMenuItem::Header(header) => ListSubHeader::new(header.clone())
1240 .inset(true)
1241 .into_any_element(),
1242 ContextMenuItem::HeaderWithLink(header, label, url) => {
1243 let url = url.clone();
1244 let link_id = ElementId::Name(format!("link-{}", url).into());
1245 ListSubHeader::new(header.clone())
1246 .inset(true)
1247 .end_slot(
1248 Button::new(link_id, label.clone())
1249 .color(Color::Muted)
1250 .label_size(LabelSize::Small)
1251 .size(ButtonSize::None)
1252 .style(ButtonStyle::Transparent)
1253 .on_click(move |_, _, cx| {
1254 let url = url.clone();
1255 cx.open_url(&url);
1256 })
1257 .into_any_element(),
1258 )
1259 .into_any_element()
1260 }
1261 ContextMenuItem::Label(label) => ListItem::new(ix)
1262 .inset(true)
1263 .disabled(true)
1264 .child(Label::new(label.clone()))
1265 .into_any_element(),
1266 ContextMenuItem::Entry(entry) => {
1267 self.render_menu_entry(ix, entry, cx).into_any_element()
1268 }
1269 ContextMenuItem::CustomEntry {
1270 entry_render,
1271 handler,
1272 selectable,
1273 documentation_aside,
1274 ..
1275 } => {
1276 let handler = handler.clone();
1277 let menu = cx.entity().downgrade();
1278 let selectable = *selectable;
1279 let aside_trigger_bounds = self.aside_trigger_bounds.clone();
1280
1281 div()
1282 .id(("context-menu-child", ix))
1283 .when_some(documentation_aside.clone(), |this, documentation_aside| {
1284 this.occlude()
1285 .on_hover(cx.listener(move |menu, hovered, _, cx| {
1286 if *hovered {
1287 menu.documentation_aside = Some((ix, documentation_aside.clone()));
1288 } else if matches!(menu.documentation_aside, Some((id, _)) if id == ix)
1289 {
1290 menu.documentation_aside = None;
1291 }
1292 cx.notify();
1293 }))
1294 })
1295 .when(documentation_aside.is_some(), |this| {
1296 this.child(
1297 canvas(
1298 {
1299 let aside_trigger_bounds = aside_trigger_bounds.clone();
1300 move |bounds, _window, _cx| {
1301 aside_trigger_bounds.borrow_mut().insert(ix, bounds);
1302 }
1303 },
1304 |_bounds, _state, _window, _cx| {},
1305 )
1306 .size_full()
1307 .absolute()
1308 .top_0()
1309 .left_0(),
1310 )
1311 })
1312 .child(
1313 ListItem::new(ix)
1314 .inset(true)
1315 .toggle_state(Some(ix) == self.selected_index)
1316 .selectable(selectable)
1317 .when(selectable, |item| {
1318 item.on_click({
1319 let context = self.action_context.clone();
1320 let keep_open_on_confirm = self.keep_open_on_confirm;
1321 move |_, window, cx| {
1322 handler(context.as_ref(), window, cx);
1323 menu.update(cx, |menu, cx| {
1324 menu.clicked = true;
1325
1326 if keep_open_on_confirm {
1327 menu.rebuild(window, cx);
1328 } else {
1329 cx.emit(DismissEvent);
1330 }
1331 })
1332 .ok();
1333 }
1334 })
1335 })
1336 .child(entry_render(window, cx)),
1337 )
1338 .into_any_element()
1339 }
1340 ContextMenuItem::Submenu {
1341 label,
1342 icon,
1343 icon_color,
1344 ..
1345 } => self
1346 .render_submenu_item_trigger(ix, label.clone(), *icon, *icon_color, cx)
1347 .into_any_element(),
1348 }
1349 }
1350
1351 fn render_submenu_item_trigger(
1352 &self,
1353 ix: usize,
1354 label: SharedString,
1355 icon: Option<IconName>,
1356 icon_color: Option<Color>,
1357 cx: &mut Context<Self>,
1358 ) -> impl IntoElement {
1359 let toggle_state = Some(ix) == self.selected_index
1360 || matches!(
1361 &self.submenu_state,
1362 SubmenuState::Open(open_submenu) if open_submenu.item_index == ix
1363 );
1364
1365 div()
1366 .id(("context-menu-submenu-trigger", ix))
1367 .capture_any_mouse_down(cx.listener(move |this, event: &MouseDownEvent, _, _| {
1368 // This prevents on_hover(false) from closing the submenu during a click.
1369 if event.button == MouseButton::Left {
1370 this.submenu_trigger_mouse_down = true;
1371 }
1372 }))
1373 .capture_any_mouse_up(cx.listener(move |this, event: &MouseUpEvent, _, _| {
1374 if event.button == MouseButton::Left {
1375 this.submenu_trigger_mouse_down = false;
1376 }
1377 }))
1378 .on_mouse_move(cx.listener(move |this, event: &MouseMoveEvent, _, cx| {
1379 if matches!(&this.submenu_state, SubmenuState::Open(_))
1380 || this.selected_index == Some(ix)
1381 {
1382 this.submenu_safety_threshold_x = Some(event.position.x - px(100.0));
1383 }
1384
1385 cx.notify();
1386 }))
1387 .child(
1388 ListItem::new(ix)
1389 .inset(true)
1390 .toggle_state(toggle_state)
1391 .child(
1392 canvas(
1393 {
1394 let trigger_bounds_cell = self.submenu_trigger_bounds.clone();
1395 move |bounds, _window, _cx| {
1396 if toggle_state {
1397 trigger_bounds_cell.set(Some(bounds));
1398 }
1399 }
1400 },
1401 |_bounds, _state, _window, _cx| {},
1402 )
1403 .size_full()
1404 .absolute()
1405 .top_0()
1406 .left_0(),
1407 )
1408 .on_hover(cx.listener(move |this, hovered, window, cx| {
1409 let mouse_pos = window.mouse_position();
1410
1411 if *hovered {
1412 this.clear_selected();
1413 window.focus(&this.focus_handle.clone(), cx);
1414 this.hover_target = HoverTarget::MainMenu;
1415 this.submenu_safety_threshold_x = Some(mouse_pos.x - px(50.0));
1416
1417 if let Some(ContextMenuItem::Submenu { builder, .. }) =
1418 this.items.get(ix)
1419 {
1420 this.open_submenu(
1421 ix,
1422 builder.clone(),
1423 SubmenuOpenTrigger::Pointer,
1424 window,
1425 cx,
1426 );
1427 }
1428
1429 cx.notify();
1430 } else {
1431 if this.submenu_trigger_mouse_down {
1432 return;
1433 }
1434
1435 let is_open_for_this_item = matches!(
1436 &this.submenu_state,
1437 SubmenuState::Open(open_submenu) if open_submenu.item_index == ix
1438 );
1439
1440 let mouse_in_submenu_zone = this
1441 .padded_submenu_bounds()
1442 .is_some_and(|bounds| bounds.contains(&window.mouse_position()));
1443
1444 if is_open_for_this_item
1445 && this.hover_target != HoverTarget::Submenu
1446 && !mouse_in_submenu_zone
1447 {
1448 this.close_submenu(false, cx);
1449 this.clear_selected();
1450 window.focus(&this.focus_handle.clone(), cx);
1451 cx.notify();
1452 }
1453 }
1454 }))
1455 .on_click(cx.listener(move |this, _, window, cx| {
1456 if matches!(
1457 &this.submenu_state,
1458 SubmenuState::Open(open_submenu) if open_submenu.item_index == ix
1459 ) {
1460 return;
1461 }
1462
1463 if let Some(ContextMenuItem::Submenu { builder, .. }) = this.items.get(ix) {
1464 this.open_submenu(
1465 ix,
1466 builder.clone(),
1467 SubmenuOpenTrigger::Pointer,
1468 window,
1469 cx,
1470 );
1471 }
1472 }))
1473 .child(
1474 h_flex()
1475 .w_full()
1476 .gap_2()
1477 .justify_between()
1478 .child(
1479 h_flex()
1480 .gap_1p5()
1481 .when_some(icon, |this, icon_name| {
1482 this.child(
1483 Icon::new(icon_name)
1484 .size(IconSize::Small)
1485 .color(icon_color.unwrap_or(Color::Muted)),
1486 )
1487 })
1488 .child(Label::new(label).color(Color::Default)),
1489 )
1490 .child(
1491 Icon::new(IconName::ChevronRight)
1492 .size(IconSize::Small)
1493 .color(Color::Muted),
1494 ),
1495 ),
1496 )
1497 }
1498
1499 fn padded_submenu_bounds(&self) -> Option<Bounds<Pixels>> {
1500 let bounds = self.main_menu_observed_bounds.get()?;
1501 Some(Bounds {
1502 origin: Point {
1503 x: bounds.origin.x - px(50.0),
1504 y: bounds.origin.y - px(50.0),
1505 },
1506 size: Size {
1507 width: bounds.size.width + px(100.0),
1508 height: bounds.size.height + px(100.0),
1509 },
1510 })
1511 }
1512
1513 fn render_submenu_container(
1514 &self,
1515 ix: usize,
1516 submenu: Entity<ContextMenu>,
1517 offset: Pixels,
1518 cx: &mut Context<Self>,
1519 ) -> impl IntoElement {
1520 let bounds_cell = self.main_menu_observed_bounds.clone();
1521 let canvas = canvas(
1522 {
1523 move |bounds, _window, _cx| {
1524 bounds_cell.set(Some(bounds));
1525 }
1526 },
1527 |_bounds, _state, _window, _cx| {},
1528 )
1529 .size_full()
1530 .absolute()
1531 .top_0()
1532 .left_0();
1533
1534 div()
1535 .id(("submenu-container", ix))
1536 .absolute()
1537 .left_full()
1538 .ml_neg_0p5()
1539 .top(offset)
1540 .on_hover(cx.listener(|this, hovered, _, _| {
1541 if *hovered {
1542 this.hover_target = HoverTarget::Submenu;
1543 }
1544 }))
1545 .child(
1546 anchored()
1547 .anchor(Corner::TopLeft)
1548 .snap_to_window_with_margin(px(8.0))
1549 .child(
1550 div()
1551 .id(("submenu-hover-zone", ix))
1552 .occlude()
1553 .child(canvas)
1554 .child(submenu),
1555 ),
1556 )
1557 }
1558
1559 fn render_menu_entry(
1560 &self,
1561 ix: usize,
1562 entry: &ContextMenuEntry,
1563 cx: &mut Context<Self>,
1564 ) -> impl IntoElement {
1565 let ContextMenuEntry {
1566 toggle,
1567 label,
1568 handler,
1569 icon,
1570 custom_icon_path,
1571 custom_icon_svg,
1572 icon_position,
1573 icon_size,
1574 icon_color,
1575 action,
1576 disabled,
1577 documentation_aside,
1578 end_slot_icon,
1579 end_slot_title,
1580 end_slot_handler,
1581 show_end_slot_on_hover,
1582 } = entry;
1583 let this = cx.weak_entity();
1584
1585 let handler = handler.clone();
1586 let menu = cx.entity().downgrade();
1587
1588 let icon_color = if *disabled {
1589 Color::Muted
1590 } else if toggle.is_some() {
1591 icon_color.unwrap_or(Color::Accent)
1592 } else {
1593 icon_color.unwrap_or(Color::Default)
1594 };
1595
1596 let label_color = if *disabled {
1597 Color::Disabled
1598 } else {
1599 Color::Default
1600 };
1601
1602 let label_element = if let Some(custom_path) = custom_icon_path {
1603 h_flex()
1604 .gap_1p5()
1605 .when(
1606 *icon_position == IconPosition::Start && toggle.is_none(),
1607 |flex| {
1608 flex.child(
1609 Icon::from_path(custom_path.clone())
1610 .size(*icon_size)
1611 .color(icon_color),
1612 )
1613 },
1614 )
1615 .child(Label::new(label.clone()).color(label_color).truncate())
1616 .when(*icon_position == IconPosition::End, |flex| {
1617 flex.child(
1618 Icon::from_path(custom_path.clone())
1619 .size(*icon_size)
1620 .color(icon_color),
1621 )
1622 })
1623 .into_any_element()
1624 } else if let Some(custom_icon_svg) = custom_icon_svg {
1625 h_flex()
1626 .gap_1p5()
1627 .when(
1628 *icon_position == IconPosition::Start && toggle.is_none(),
1629 |flex| {
1630 flex.child(
1631 Icon::from_external_svg(custom_icon_svg.clone())
1632 .size(*icon_size)
1633 .color(icon_color),
1634 )
1635 },
1636 )
1637 .child(Label::new(label.clone()).color(label_color).truncate())
1638 .when(*icon_position == IconPosition::End, |flex| {
1639 flex.child(
1640 Icon::from_external_svg(custom_icon_svg.clone())
1641 .size(*icon_size)
1642 .color(icon_color),
1643 )
1644 })
1645 .into_any_element()
1646 } else if let Some(icon_name) = icon {
1647 h_flex()
1648 .gap_1p5()
1649 .when(
1650 *icon_position == IconPosition::Start && toggle.is_none(),
1651 |flex| flex.child(Icon::new(*icon_name).size(*icon_size).color(icon_color)),
1652 )
1653 .child(Label::new(label.clone()).color(label_color).truncate())
1654 .when(*icon_position == IconPosition::End, |flex| {
1655 flex.child(Icon::new(*icon_name).size(*icon_size).color(icon_color))
1656 })
1657 .into_any_element()
1658 } else {
1659 Label::new(label.clone())
1660 .color(label_color)
1661 .truncate()
1662 .into_any_element()
1663 };
1664
1665 let aside_trigger_bounds = self.aside_trigger_bounds.clone();
1666
1667 div()
1668 .id(("context-menu-child", ix))
1669 .when_some(documentation_aside.clone(), |this, documentation_aside| {
1670 this.occlude()
1671 .on_hover(cx.listener(move |menu, hovered, _, cx| {
1672 if *hovered {
1673 menu.documentation_aside = Some((ix, documentation_aside.clone()));
1674 } else if matches!(menu.documentation_aside, Some((id, _)) if id == ix) {
1675 menu.documentation_aside = None;
1676 }
1677 cx.notify();
1678 }))
1679 })
1680 .when(documentation_aside.is_some(), |this| {
1681 this.child(
1682 canvas(
1683 {
1684 let aside_trigger_bounds = aside_trigger_bounds.clone();
1685 move |bounds, _window, _cx| {
1686 aside_trigger_bounds.borrow_mut().insert(ix, bounds);
1687 }
1688 },
1689 |_bounds, _state, _window, _cx| {},
1690 )
1691 .size_full()
1692 .absolute()
1693 .top_0()
1694 .left_0(),
1695 )
1696 })
1697 .child(
1698 ListItem::new(ix)
1699 .group_name("label_container")
1700 .inset(true)
1701 .disabled(*disabled)
1702 .toggle_state(Some(ix) == self.selected_index)
1703 .when(self.main_menu.is_none() && !*disabled, |item| {
1704 item.on_hover(cx.listener(move |this, hovered, window, cx| {
1705 if *hovered {
1706 this.clear_selected();
1707 window.focus(&this.focus_handle.clone(), cx);
1708
1709 if let SubmenuState::Open(open_submenu) = &this.submenu_state {
1710 if open_submenu.item_index != ix {
1711 this.close_submenu(false, cx);
1712 cx.notify();
1713 }
1714 }
1715 }
1716 }))
1717 })
1718 .when(self.main_menu.is_some(), |item| {
1719 item.on_click(cx.listener(move |this, _, window, cx| {
1720 if matches!(
1721 &this.submenu_state,
1722 SubmenuState::Open(open_submenu) if open_submenu.item_index == ix
1723 ) {
1724 return;
1725 }
1726
1727 if let Some(ContextMenuItem::Submenu { builder, .. }) =
1728 this.items.get(ix)
1729 {
1730 this.open_submenu(
1731 ix,
1732 builder.clone(),
1733 SubmenuOpenTrigger::Pointer,
1734 window,
1735 cx,
1736 );
1737 }
1738 }))
1739 .on_hover(cx.listener(
1740 move |this, hovered, window, cx| {
1741 if *hovered {
1742 this.clear_selected();
1743 cx.notify();
1744 }
1745
1746 if let Some(parent) = &this.main_menu {
1747 let mouse_pos = window.mouse_position();
1748 let parent_clone = parent.clone();
1749
1750 if *hovered {
1751 parent.update(cx, |parent, _| {
1752 parent.clear_selected();
1753 parent.hover_target = HoverTarget::Submenu;
1754 });
1755 } else {
1756 parent_clone.update(cx, |parent, cx| {
1757 if matches!(
1758 &parent.submenu_state,
1759 SubmenuState::Open(_)
1760 ) {
1761 // Only close if mouse is to the left of the safety threshold
1762 // (prevents accidental close when moving diagonally toward submenu)
1763 let should_close = parent
1764 .submenu_safety_threshold_x
1765 .map(|threshold_x| mouse_pos.x < threshold_x)
1766 .unwrap_or(true);
1767
1768 if should_close {
1769 parent.close_submenu(true, cx);
1770 }
1771 }
1772 });
1773 }
1774 }
1775 },
1776 ))
1777 })
1778 .when_some(*toggle, |list_item, (position, toggled)| {
1779 let contents = div()
1780 .flex_none()
1781 .child(
1782 Icon::new(icon.unwrap_or(IconName::Check))
1783 .color(icon_color)
1784 .size(*icon_size),
1785 )
1786 .when(!toggled, |contents| contents.invisible());
1787
1788 match position {
1789 IconPosition::Start => list_item.start_slot(contents),
1790 IconPosition::End => list_item.end_slot(contents),
1791 }
1792 })
1793 .child(
1794 h_flex()
1795 .w_full()
1796 .justify_between()
1797 .child(label_element)
1798 .debug_selector(|| format!("MENU_ITEM-{}", label))
1799 .children(action.as_ref().map(|action| {
1800 let binding = self
1801 .action_context
1802 .as_ref()
1803 .map(|focus| KeyBinding::for_action_in(&**action, focus, cx))
1804 .unwrap_or_else(|| KeyBinding::for_action(&**action, cx));
1805
1806 div()
1807 .ml_4()
1808 .child(binding.disabled(*disabled))
1809 .when(*disabled && documentation_aside.is_some(), |parent| {
1810 parent.invisible()
1811 })
1812 }))
1813 .when(*disabled && documentation_aside.is_some(), |parent| {
1814 parent.child(
1815 Icon::new(IconName::Info)
1816 .size(IconSize::XSmall)
1817 .color(Color::Muted),
1818 )
1819 }),
1820 )
1821 .when_some(
1822 end_slot_icon
1823 .as_ref()
1824 .zip(self.end_slot_action.as_ref())
1825 .zip(end_slot_title.as_ref())
1826 .zip(end_slot_handler.as_ref()),
1827 |el, (((icon, action), title), handler)| {
1828 el.end_slot({
1829 let icon_button = IconButton::new("end-slot-icon", *icon)
1830 .shape(IconButtonShape::Square)
1831 .tooltip({
1832 let action_context = self.action_context.clone();
1833 let title = title.clone();
1834 let action = action.boxed_clone();
1835 move |_window, cx| {
1836 action_context
1837 .as_ref()
1838 .map(|focus| {
1839 Tooltip::for_action_in(
1840 title.clone(),
1841 &*action,
1842 focus,
1843 cx,
1844 )
1845 })
1846 .unwrap_or_else(|| {
1847 Tooltip::for_action(title.clone(), &*action, cx)
1848 })
1849 }
1850 })
1851 .on_click({
1852 let handler = handler.clone();
1853 move |_, window, cx| {
1854 handler(None, window, cx);
1855 this.update(cx, |this, cx| {
1856 this.rebuild(window, cx);
1857 cx.notify();
1858 })
1859 .ok();
1860 }
1861 });
1862
1863 if *show_end_slot_on_hover {
1864 div()
1865 .visible_on_hover("label_container")
1866 .child(icon_button)
1867 .into_any_element()
1868 } else {
1869 icon_button.into_any_element()
1870 }
1871 })
1872 },
1873 )
1874 .on_click({
1875 let context = self.action_context.clone();
1876 let keep_open_on_confirm = self.keep_open_on_confirm;
1877 move |_, window, cx| {
1878 handler(context.as_ref(), window, cx);
1879 menu.update(cx, |menu, cx| {
1880 menu.clicked = true;
1881 if keep_open_on_confirm {
1882 menu.rebuild(window, cx);
1883 } else {
1884 cx.emit(DismissEvent);
1885 }
1886 })
1887 .ok();
1888 }
1889 }),
1890 )
1891 .into_any_element()
1892 }
1893}
1894
1895impl ContextMenuItem {
1896 fn is_selectable(&self) -> bool {
1897 match self {
1898 ContextMenuItem::Header(_)
1899 | ContextMenuItem::HeaderWithLink(_, _, _)
1900 | ContextMenuItem::Separator
1901 | ContextMenuItem::Label { .. } => false,
1902 ContextMenuItem::Entry(ContextMenuEntry { disabled, .. }) => !disabled,
1903 ContextMenuItem::CustomEntry { selectable, .. } => *selectable,
1904 ContextMenuItem::Submenu { .. } => true,
1905 }
1906 }
1907}
1908
1909impl Render for ContextMenu {
1910 fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
1911 let ui_font_size = ThemeSettings::get_global(cx).ui_font_size(cx);
1912 let window_size = window.viewport_size();
1913 let rem_size = window.rem_size();
1914 let is_wide_window = window_size.width / rem_size > rems_from_px(800.).0;
1915
1916 let mut focus_submenu: Option<FocusHandle> = None;
1917
1918 let submenu_container = match &mut self.submenu_state {
1919 SubmenuState::Open(open_submenu) => {
1920 let is_initializing = open_submenu.offset.is_none();
1921
1922 let computed_offset = if is_initializing {
1923 let menu_bounds = self.main_menu_observed_bounds.get();
1924 let trigger_bounds = open_submenu
1925 .trigger_bounds
1926 .or_else(|| self.submenu_trigger_bounds.get());
1927
1928 match (menu_bounds, trigger_bounds) {
1929 (Some(menu_bounds), Some(trigger_bounds)) => {
1930 Some(trigger_bounds.origin.y - menu_bounds.origin.y)
1931 }
1932 _ => None,
1933 }
1934 } else {
1935 None
1936 };
1937
1938 if let Some(offset) = open_submenu.offset.or(computed_offset) {
1939 if open_submenu.offset.is_none() {
1940 open_submenu.offset = Some(offset);
1941 }
1942
1943 focus_submenu = Some(open_submenu.entity.read(cx).focus_handle.clone());
1944 Some((open_submenu.item_index, open_submenu.entity.clone(), offset))
1945 } else {
1946 None
1947 }
1948 }
1949 _ => None,
1950 };
1951
1952 let aside = self.documentation_aside.clone();
1953 let render_aside = |aside: DocumentationAside, cx: &mut Context<Self>| {
1954 WithRemSize::new(ui_font_size)
1955 .occlude()
1956 .elevation_2(cx)
1957 .w_full()
1958 .p_2()
1959 .overflow_hidden()
1960 .when(is_wide_window, |this| this.max_w_96())
1961 .when(!is_wide_window, |this| this.max_w_48())
1962 .child((aside.render)(cx))
1963 };
1964
1965 let render_menu = |cx: &mut Context<Self>, window: &mut Window| {
1966 let bounds_cell = self.main_menu_observed_bounds.clone();
1967 let menu_bounds_measure = canvas(
1968 {
1969 move |bounds, _window, _cx| {
1970 bounds_cell.set(Some(bounds));
1971 }
1972 },
1973 |_bounds, _state, _window, _cx| {},
1974 )
1975 .size_full()
1976 .absolute()
1977 .top_0()
1978 .left_0();
1979
1980 WithRemSize::new(ui_font_size)
1981 .occlude()
1982 .elevation_2(cx)
1983 .flex()
1984 .flex_row()
1985 .flex_shrink_0()
1986 .child(
1987 v_flex()
1988 .id("context-menu")
1989 .max_h(vh(0.75, window))
1990 .flex_shrink_0()
1991 .child(menu_bounds_measure)
1992 .when_some(self.fixed_width, |this, width| {
1993 this.w(width).overflow_x_hidden()
1994 })
1995 .when(self.fixed_width.is_none(), |this| {
1996 this.min_w(px(200.)).flex_1()
1997 })
1998 .overflow_y_scroll()
1999 .track_focus(&self.focus_handle(cx))
2000 .key_context(self.key_context.as_ref())
2001 .on_action(cx.listener(ContextMenu::select_first))
2002 .on_action(cx.listener(ContextMenu::handle_select_last))
2003 .on_action(cx.listener(ContextMenu::select_next))
2004 .on_action(cx.listener(ContextMenu::select_previous))
2005 .on_action(cx.listener(ContextMenu::select_submenu_child))
2006 .on_action(cx.listener(ContextMenu::select_submenu_parent))
2007 .on_action(cx.listener(ContextMenu::confirm))
2008 .on_action(cx.listener(ContextMenu::cancel))
2009 .on_hover(cx.listener(|this, hovered: &bool, _, cx| {
2010 if *hovered {
2011 this.hover_target = HoverTarget::MainMenu;
2012 if let Some(parent) = &this.main_menu {
2013 parent.update(cx, |parent, _| {
2014 parent.hover_target = HoverTarget::Submenu;
2015 });
2016 }
2017 }
2018 }))
2019 .on_mouse_down_out(cx.listener(
2020 |this, event: &MouseDownEvent, window, cx| {
2021 if matches!(&this.submenu_state, SubmenuState::Open(_)) {
2022 if let Some(padded_bounds) = this.padded_submenu_bounds() {
2023 if padded_bounds.contains(&event.position) {
2024 return;
2025 }
2026 }
2027 }
2028
2029 if let Some(parent) = &this.main_menu {
2030 let overridden_by_parent_trigger = parent
2031 .read(cx)
2032 .submenu_trigger_bounds
2033 .get()
2034 .is_some_and(|bounds| bounds.contains(&event.position));
2035 if overridden_by_parent_trigger {
2036 return;
2037 }
2038 }
2039
2040 this.cancel(&menu::Cancel, window, cx)
2041 },
2042 ))
2043 .when_some(self.end_slot_action.as_ref(), |el, action| {
2044 el.on_boxed_action(&**action, cx.listener(ContextMenu::end_slot))
2045 })
2046 .when(!self.delayed, |mut el| {
2047 for item in self.items.iter() {
2048 if let ContextMenuItem::Entry(ContextMenuEntry {
2049 action: Some(action),
2050 disabled: false,
2051 ..
2052 }) = item
2053 {
2054 el = el.on_boxed_action(
2055 &**action,
2056 cx.listener(ContextMenu::on_action_dispatch),
2057 );
2058 }
2059 }
2060 el
2061 })
2062 .child(
2063 List::new().children(
2064 self.items
2065 .iter()
2066 .enumerate()
2067 .map(|(ix, item)| self.render_menu_item(ix, item, window, cx)),
2068 ),
2069 ),
2070 )
2071 };
2072
2073 if let Some(focus_handle) = focus_submenu.as_ref() {
2074 window.focus(focus_handle, cx);
2075 }
2076
2077 if is_wide_window {
2078 let menu_bounds = self.main_menu_observed_bounds.get();
2079 let trigger_bounds = self
2080 .documentation_aside
2081 .as_ref()
2082 .and_then(|(ix, _)| self.aside_trigger_bounds.borrow().get(ix).copied());
2083
2084 let trigger_position = match (menu_bounds, trigger_bounds) {
2085 (Some(menu_bounds), Some(trigger_bounds)) => {
2086 let relative_top = trigger_bounds.origin.y - menu_bounds.origin.y;
2087 let height = trigger_bounds.size.height;
2088 Some((relative_top, height))
2089 }
2090 _ => None,
2091 };
2092
2093 div()
2094 .relative()
2095 .child(render_menu(cx, window))
2096 // Only render the aside once we have trigger bounds to avoid flicker.
2097 .when_some(trigger_position, |this, (top, height)| {
2098 this.children(aside.map(|(_, aside)| {
2099 h_flex()
2100 .absolute()
2101 .when(aside.side == DocumentationSide::Left, |el| {
2102 el.right_full().mr_1()
2103 })
2104 .when(aside.side == DocumentationSide::Right, |el| {
2105 el.left_full().ml_1()
2106 })
2107 .top(top)
2108 .h(height)
2109 .child(render_aside(aside, cx))
2110 }))
2111 })
2112 .when_some(submenu_container, |this, (ix, submenu, offset)| {
2113 this.child(self.render_submenu_container(ix, submenu, offset, cx))
2114 })
2115 } else {
2116 v_flex()
2117 .w_full()
2118 .relative()
2119 .gap_1()
2120 .justify_end()
2121 .children(aside.map(|(_, aside)| render_aside(aside, cx)))
2122 .child(render_menu(cx, window))
2123 .when_some(submenu_container, |this, (ix, submenu, offset)| {
2124 this.child(self.render_submenu_container(ix, submenu, offset, cx))
2125 })
2126 }
2127 }
2128}
2129
2130#[cfg(test)]
2131mod tests {
2132 use gpui::TestAppContext;
2133
2134 use super::*;
2135
2136 #[gpui::test]
2137 fn can_navigate_back_over_headers(cx: &mut TestAppContext) {
2138 let cx = cx.add_empty_window();
2139 let context_menu = cx.update(|window, cx| {
2140 ContextMenu::build(window, cx, |menu, _, _| {
2141 menu.header("First header")
2142 .separator()
2143 .entry("First entry", None, |_, _| {})
2144 .separator()
2145 .separator()
2146 .entry("Last entry", None, |_, _| {})
2147 .header("Last header")
2148 })
2149 });
2150
2151 context_menu.update_in(cx, |context_menu, window, cx| {
2152 assert_eq!(
2153 None, context_menu.selected_index,
2154 "No selection is in the menu initially"
2155 );
2156
2157 context_menu.select_first(&SelectFirst, window, cx);
2158 assert_eq!(
2159 Some(2),
2160 context_menu.selected_index,
2161 "Should select first selectable entry, skipping the header and the separator"
2162 );
2163
2164 context_menu.select_next(&SelectNext, window, cx);
2165 assert_eq!(
2166 Some(5),
2167 context_menu.selected_index,
2168 "Should select next selectable entry, skipping 2 separators along the way"
2169 );
2170
2171 context_menu.select_next(&SelectNext, window, cx);
2172 assert_eq!(
2173 Some(2),
2174 context_menu.selected_index,
2175 "Should wrap around to first selectable entry"
2176 );
2177 });
2178
2179 context_menu.update_in(cx, |context_menu, window, cx| {
2180 assert_eq!(
2181 Some(2),
2182 context_menu.selected_index,
2183 "Should start from the first selectable entry"
2184 );
2185
2186 context_menu.select_previous(&SelectPrevious, window, cx);
2187 assert_eq!(
2188 Some(5),
2189 context_menu.selected_index,
2190 "Should wrap around to previous selectable entry (last)"
2191 );
2192
2193 context_menu.select_previous(&SelectPrevious, window, cx);
2194 assert_eq!(
2195 Some(2),
2196 context_menu.selected_index,
2197 "Should go back to previous selectable entry (first)"
2198 );
2199 });
2200
2201 context_menu.update_in(cx, |context_menu, window, cx| {
2202 context_menu.select_first(&SelectFirst, window, cx);
2203 assert_eq!(
2204 Some(2),
2205 context_menu.selected_index,
2206 "Should start from the first selectable entry"
2207 );
2208
2209 context_menu.select_previous(&SelectPrevious, window, cx);
2210 assert_eq!(
2211 Some(5),
2212 context_menu.selected_index,
2213 "Should wrap around to last selectable entry"
2214 );
2215 context_menu.select_next(&SelectNext, window, cx);
2216 assert_eq!(
2217 Some(2),
2218 context_menu.selected_index,
2219 "Should wrap around to first selectable entry"
2220 );
2221 });
2222 }
2223}