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