Focusout for Dropdown, Menubar and ContextMenu (#22)

* Maybe dropdown fix?

* on focus out try

* this way might work

* item selection should work now

* adding type

* Focus out try for menubar

* Using data state instead of hidden and basic animations

* Adding inert to context_menu, dropdown menu and menubar

* Revert "Adding inert to context_menu, dropdown menu and menubar"

This reverts commit a8e41a2.

* Just comment inert for now

* handle menubar navigation

* merge styles

* simplify menubar logic

* implement similar keyboard navigation logic for the dropdown menu component

* Keyboard navigation for the context menu component

---------

Co-authored-by: Evan Almloff <evanalmloff@gmail.com>

Author: wheregmis

preview/src/components/context_menu/mod.rs

@@ -25,25 +25,37 @@ pub(super) fn Demo() -> Element {
                     class: "context-menu-item",
                     value: "edit".to_string(),
                     index: 0usize,
+                    on_select: move |value| {
+                        tracing::info!("Selected item: {}", value);
+                    },
                     "Edit"
                 }
                 ContextMenuItem {
                     class: "context-menu-item",
                     value: "undo".to_string(),
                     index: 1usize,
                     disabled: true,
+                    on_select: move |value| {
+                        tracing::info!("Selected item: {}", value);
+                    },
                     "Undo"
                 }
                 ContextMenuItem {
                     class: "context-menu-item",
                     value: "duplicate".to_string(),
-                    index: 1usize,
+                    index: 2usize,
+                    on_select: move |value| {
+                        tracing::info!("Selected item: {}", value);
+                    },
                     "Duplicate"
                 }
                 ContextMenuItem {
                     class: "context-menu-item",
                     value: "delete".to_string(),
-                    index: 2usize,
+                    index: 3usize,
+                    on_select: move |value| {
+                        tracing::info!("Selected item: {}", value);
+                    },
                     "Delete"
                 }
             }

preview/src/components/context_menu/style.css

@@ -4,7 +4,9 @@
   border-radius: 0.5rem;
   padding: 0.25rem;
   box-shadow: 0 0 0 1px var(--dim-border-color);
-  animation: slideIn 0.1s ease-out;
+  z-index: 1000;
+  transform-origin: var(--radix-context-menu-content-transform-origin);
+  will-change: transform, opacity;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -14,8 +16,18 @@
   }
 }
 
-.context-menu-content[hidden] {
-  display: none;
+.context-menu-content[data-state="closed"] {
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.95) translateY(-2px);
+  transition: opacity 150ms ease-in, transform 150ms ease-in;
+}
+
+.context-menu-content[data-state="open"] {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  transition: opacity 200ms ease-out,
+    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .context-menu-item {
@@ -28,6 +40,7 @@
   color: var(--text-color);
   display: flex;
   align-items: center;
+  transition: background-color 100ms ease-out;
 }
 
 .context-menu-item[data-disabled="true"] {
@@ -47,15 +60,3 @@
     background: var(--hover-border-color);
   }
 }
-
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}

preview/src/components/dropdown_menu/style.css

@@ -42,6 +42,11 @@
   padding: 0.25rem;
   box-shadow: inset 0 0 0 1px var(--dim-border-color);
   animation: slideIn 0.1s ease-out;
+  z-index: 1000;
+  /* Animation properties */
+  opacity: 0;
+  transform: translateY(-8px) scale(0.95);
+  transition: all 0.2s ease;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -51,8 +56,17 @@
   }
 }
 
-.dropdown-menu-content[hidden] {
-  display: none;
+/* Open state animations */
+.dropdown-menu-content[data-state="open"] {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+/* Closed state animations */
+.dropdown-menu-content[data-state="closed"] {
+  opacity: 0;
+  transform: translateY(-8px) scale(0.95);
+  pointer-events: none;
 }
 
 .dropdown-menu-item {
@@ -84,15 +98,3 @@
     background: var(--hover-border-color);
   }
 }
-
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}

preview/src/components/menubar/mod.rs

@@ -15,26 +15,29 @@ pub(super) fn Demo() -> Element {
                     MenubarTrigger { class: "menubar-trigger", "File" }
                     MenubarContent { class: "menubar-content",
                         MenubarItem {
+                            index: 0usize,
                             class: "menubar-item",
                             value: "new".to_string(),
                             on_select: move |value| {
-                                tracing::info!("Selected: {value}");
+                                tracing::info!("Selected value: {}", value);
                             },
                             "New"
                         }
                         MenubarItem {
+                            index: 1usize,
                             class: "menubar-item",
                             value: "open".to_string(),
                             on_select: move |value| {
-                                tracing::info!("Selected: {value}");
+                                tracing::info!("Selected value: {}", value);
                             },
                             "Open"
                         }
                         MenubarItem {
+                            index: 2usize,
                             class: "menubar-item",
                             value: "save".to_string(),
                             on_select: move |value| {
-                                tracing::info!("Selected: {value}");
+                                tracing::info!("Selected value: {}", value);
                             },
                             "Save"
                         }
@@ -44,26 +47,29 @@ pub(super) fn Demo() -> Element {
                     MenubarTrigger { class: "menubar-trigger", "Edit" }
                     MenubarContent { class: "menubar-content",
                         MenubarItem {
+                            index: 0usize,
                             class: "menubar-item",
                             value: "cut".to_string(),
                             on_select: move |value| {
-                                tracing::info!("Selected: {value}");
+                                tracing::info!("Selected value: {}", value);
                             },
                             "Cut"
                         }
                         MenubarItem {
+                            index: 1usize,
                             class: "menubar-item",
                             value: "copy".to_string(),
                             on_select: move |value| {
-                                tracing::info!("Selected: {value}");
+                                tracing::info!("Selected value: {}", value);
                             },
                             "Copy"
                         }
                         MenubarItem {
+                            index: 2usize,
                             class: "menubar-item",
                             value: "paste".to_string(),
                             on_select: move |value| {
-                                tracing::info!("Selected: {value}");
+                                tracing::info!("Selected value: {}", value);
                             },
                             "Paste"
                         }

preview/src/components/menubar/style.css

@@ -20,6 +20,7 @@
     cursor: pointer;
     color: var(--text-color);
     border-radius: calc(.5rem - .25rem);
+    transition: background-color 100ms ease-out;
 }
 
 .menubar-menu[data-state="open"] .menubar-trigger {
@@ -41,6 +42,7 @@
 .menubar-trigger:focus-visible {
     color: var(--bright-text-color);
     background: var(--hover-background-color);
+    outline: none;
 }
 @media (prefers-color-scheme: dark) {
     .menubar-trigger:hover:not([data-disabled="true"]),
@@ -50,7 +52,6 @@
 }
 
 .menubar-content {
-    display: none;
     position: absolute;
     top: 100%;
     left: 0;
@@ -61,7 +62,9 @@
     border-radius: .5rem;
     padding: .25rem;
     box-shadow: inset 0 0 0 1px var(--dim-border-color);
-    animation: menubarSlideIn 0.1s ease-out;
+    z-index: 1000;
+    transform-origin: top;
+    will-change: transform, opacity;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -71,8 +74,17 @@
     }
 }
 
-.menubar-menu[data-state="open"] .menubar-content {
-    display: block;
+.menubar-content[data-state="closed"] {
+    pointer-events: none;
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+    transition: opacity 150ms ease-in, transform 150ms ease-in;
+}
+
+.menubar-content[data-state="open"] {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    transition: opacity 200ms ease-out, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .menubar-item {
@@ -92,6 +104,7 @@
 .menubar-item:focus-visible {
     color: var(--bright-text-color);
     background: var(--hover-background-color);
+    outline: none;
 }
 @media (prefers-color-scheme: dark) {
     .menubar-item:hover:not([data-disabled="true"]),
@@ -104,15 +117,3 @@
     opacity: 0.5;
     cursor: not-allowed;
 }
-
-@keyframes menubarSlideIn {
-    from {
-        opacity: 0;
-        transform: scale(0.95);
-    }
-
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}