radix_leptos_primitives/components/

dropdown_menu.rs

use leptos::*;
use leptos::prelude::*;
use web_sys::{MouseEvent, KeyboardEvent};
use wasm_bindgen::JsCast;

#[derive(Clone, Debug, PartialEq)]
pub enum DropdownMenuSize {
    Small,
    Medium,
    Large,
}

impl Default for DropdownMenuSize {
    fn default() -> Self {
        DropdownMenuSize::Medium
    }
}

#[derive(Clone, Debug, PartialEq)]
pub enum DropdownMenuItemVariant {
    Default,
    Destructive,
    Disabled,
}

impl Default for DropdownMenuItemVariant {
    fn default() -> Self {
        DropdownMenuItemVariant::Default
    }
}

fn merge_classes(classes: Vec<&str>) -> String {
    classes.into_iter().filter(|s| !s.is_empty()).collect::<Vec<_>>().join(" ")
}

#[component]
pub fn DropdownMenu(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    children: Children,
) -> impl IntoView {
    let (_is_open, set_is_open) = signal(false);
    let trigger_ref = NodeRef::<html::Div>::new();
    let content_ref = NodeRef::<html::Div>::new();

    let handle_click_outside = move |e: MouseEvent| {
        if let (Some(trigger_el), Some(content_el)) = (trigger_ref.get(), content_ref.get()) {
            let target = e.target().unwrap();
            let target_element = target.dyn_ref::<web_sys::Element>().unwrap();
            
            if !trigger_el.contains(Some(target_element)) && !content_el.contains(Some(target_element)) {
                set_is_open.set(false);
            }
        }
    };

    let handle_keydown = move |e: KeyboardEvent| {
        match e.key().as_str() {
            "Escape" => {
                set_is_open.set(false);
            }
            "Enter" | " " => {
                e.prevent_default();
                set_is_open.update(|open| *open = !*open);
            }
            _ => {}
        }
    };

    let base_classes = vec![
        "radix-dropdown-menu",
        "relative",
        "inline-block",
    ];

    let class_value = class.unwrap_or_default();
    let classes = merge_classes(base_classes);
    let final_class = format!("{} {}", classes, class_value);

    view! {
        <div
            class=final_class
            style=style
            data-radix-dropdown-menu=""
            on:click=handle_click_outside
            on:keydown=handle_keydown
        >
            {children()}
        </div>
    }
}

#[component]
pub fn DropdownMenuTrigger(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] disabled: Option<bool>,
    children: Children,
) -> impl IntoView {
    let handle_click = move |e: MouseEvent| {
        e.prevent_default();
        e.stop_propagation();
        if !disabled.unwrap_or(false) {
            // This would need to be connected to the parent DropdownMenu
            // For now, we'll just log the action
            web_sys::console::log_1(&"DropdownMenu trigger clicked".into());
        }
    };

    let handle_keydown = move |e: KeyboardEvent| {
        if !disabled.unwrap_or(false) {
            match e.key().as_str() {
                "Enter" | " " => {
                    e.prevent_default();
                    web_sys::console::log_1(&"DropdownMenu trigger activated".into());
                }
                "ArrowDown" => {
                    e.prevent_default();
                    web_sys::console::log_1(&"DropdownMenu trigger arrow down".into());
                }
                _ => {}
            }
        }
    };

    let base_classes = vec![
        "radix-dropdown-menu-trigger",
        "inline-flex",
        "items-center",
        "justify-center",
        "rounded-md",
        "text-sm",
        "font-medium",
        "transition-colors",
        "focus-visible:outline-none",
        "focus-visible:ring-2",
        "focus-visible:ring-ring",
        "focus-visible:ring-offset-2",
        "disabled:pointer-events-none",
        "disabled:opacity-50",
    ];

    let class_value = class.unwrap_or_default();
    let classes = merge_classes(base_classes);
    let final_class = format!("{} {}", classes, class_value);

    view! {
        <div
            class=final_class
            style=style
            role="button"
            tabindex="0"
            aria-haspopup="true"
            aria-expanded="false"
            data-radix-dropdown-menu-trigger=""
            on:click=handle_click
            on:keydown=handle_keydown
        >
            {children()}
        </div>
    }
}

#[component]
pub fn DropdownMenuContent(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] align: Option<&'static str>,
    #[prop(optional)] side: Option<&'static str>,
    children: Children,
) -> impl IntoView {
    let align_class = align.unwrap_or("start");
    let side_class = side.unwrap_or("bottom");

    let base_classes = vec![
        "radix-dropdown-menu-content",
        "z-50",
        "min-w-[8rem]",
        "overflow-hidden",
        "rounded-md",
        "border",
        "bg-popover",
        "p-1",
        "text-popover-foreground",
        "shadow-md",
        "animate-in",
        "data-[side=bottom]:slide-in-from-top-2",
        "data-[side=left]:slide-in-from-right-2",
        "data-[side=right]:slide-in-from-left-2",
        "data-[side=top]:slide-in-from-bottom-2",
    ];

    let class_value = class.unwrap_or_default();
    let classes = merge_classes(base_classes);
    let final_class = format!("{} {}", classes, class_value);

    view! {
        <div
            class=final_class
            style=style
            data-side=side_class
            data-align=align_class
            data-radix-dropdown-menu-content=""
            role="menu"
            aria-orientation="vertical"
        >
            {children()}
        </div>
    }
}

#[component]
pub fn DropdownMenuItem(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] variant: Option<DropdownMenuItemVariant>,
    #[prop(optional)] disabled: Option<bool>,
    #[prop(optional)] on_click: Option<Callback<()>>,
    children: Children,
) -> impl IntoView {
    let handle_click = move |e: MouseEvent| {
        e.prevent_default();
        e.stop_propagation();
        if !disabled.unwrap_or(false) {
            if let Some(callback) = on_click {
                callback.run(());
            }
        }
    };

    let handle_keydown = move |e: KeyboardEvent| {
        if !disabled.unwrap_or(false) {
            match e.key().as_str() {
                "Enter" | " " => {
                    e.prevent_default();
                    if let Some(callback) = on_click {
                        callback.run(());
                    }
                }
                "Escape" => {
                    web_sys::console::log_1(&"DropdownMenu item escape".into());
                }
                _ => {}
            }
        }
    };

    let variant = variant.unwrap_or_default();
    let variant_classes = match variant {
        DropdownMenuItemVariant::Default => vec!["hover:bg-accent", "hover:text-accent-foreground"],
        DropdownMenuItemVariant::Destructive => vec!["text-destructive", "focus:text-destructive"],
        DropdownMenuItemVariant::Disabled => vec!["opacity-50", "pointer-events-none"],
    };

    let base_classes = vec![
        "radix-dropdown-menu-item",
        "relative",
        "flex",
        "cursor-default",
        "select-none",
        "items-center",
        "rounded-sm",
        "px-2",
        "py-1.5",
        "text-sm",
        "outline-none",
        "transition-colors",
        "focus:bg-accent",
        "focus:text-accent-foreground",
        "disabled:pointer-events-none",
        "disabled:opacity-50",
    ];

    let mut all_classes = base_classes;
    all_classes.extend(variant_classes);

    let class_value = class.unwrap_or_default();
    let classes = merge_classes(all_classes);
    let final_class = format!("{} {}", classes, class_value);

    view! {
        <div
            class=final_class
            style=style
            role="menuitem"
            tabindex="-1"
            data-radix-dropdown-menu-item=""
            on:click=handle_click
            on:keydown=handle_keydown
        >
            {children()}
        </div>
    }
}

#[component]
pub fn DropdownMenuSeparator(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
) -> impl IntoView {
    let base_classes = vec![
        "radix-dropdown-menu-separator",
        "-mx-1",
        "my-1",
        "h-px",
        "bg-muted",
    ];

    let class_value = class.unwrap_or_default();
    let classes = merge_classes(base_classes);
    let final_class = format!("{} {}", classes, class_value);

    view! {
        <div
            class=final_class
            style=style
            role="separator"
        />
    }
}

#[component]
pub fn DropdownMenuLabel(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    children: Children,
) -> impl IntoView {
    let base_classes = vec![
        "radix-dropdown-menu-label",
        "px-2",
        "py-1.5",
        "text-sm",
        "font-semibold",
    ];

    let class_value = class.unwrap_or_default();
    let classes = merge_classes(base_classes);
    let final_class = format!("{} {}", classes, class_value);

    view! {
        <div
            class=final_class
            style=style
        >
            {children()}
        </div>
    }
}

#[component]
pub fn DropdownMenuCheckboxItem(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] checked: Option<bool>,
    #[prop(optional)] disabled: Option<bool>,
    #[prop(optional)] on_checked_change: Option<Callback<bool>>,
    children: Children,
) -> impl IntoView {
    let (is_checked, set_is_checked) = signal(checked.unwrap_or(false));

    let handle_click = move |e: MouseEvent| {
        e.prevent_default();
        e.stop_propagation();
        if !disabled.unwrap_or(false) {
            let new_checked = !is_checked.get();
            set_is_checked.set(new_checked);
            if let Some(callback) = on_checked_change {
                callback.run(new_checked);
            }
        }
    };

    let handle_keydown = move |e: KeyboardEvent| {
        if !disabled.unwrap_or(false) {
            match e.key().as_str() {
                "Enter" | " " => {
                    e.prevent_default();
                    let new_checked = !is_checked.get();
                    set_is_checked.set(new_checked);
                    if let Some(callback) = on_checked_change {
                        callback.run(new_checked);
                    }
                }
                "Escape" => {
                    web_sys::console::log_1(&"DropdownMenu checkbox escape".into());
                }
                _ => {}
            }
        }
    };

    let base_classes = vec![
        "radix-dropdown-menu-checkbox-item",
        "relative",
        "flex",
        "cursor-default",
        "select-none",
        "items-center",
        "rounded-sm",
        "px-2",
        "py-1.5",
        "text-sm",
        "outline-none",
        "transition-colors",
        "focus:bg-accent",
        "focus:text-accent-foreground",
        "disabled:pointer-events-none",
        "disabled:opacity-50",
    ];

    let class_value = class.unwrap_or_default();
    let classes = merge_classes(base_classes);
    let final_class = format!("{} {}", classes, class_value);

    view! {
        <div
            class=final_class
            style=style
            role="menuitemcheckbox"
            tabindex="-1"
            aria-checked=move || is_checked.get()
            on:click=handle_click
            on:keydown=handle_keydown
        >
            <div class="flex items-center gap-2">
                <div class="flex h-4 w-4 items-center justify-center">
                    <div
                        class=move || {
                            if is_checked.get() {
                                "h-2 w-2 bg-current"
                            } else {
                                "h-2 w-2"
                            }
                        }
                        style=move || {
                            if is_checked.get() {
                                "background-color: currentColor;"
                            } else {
                                "background-color: transparent;"
                            }
                        }
                    />
                </div>
                {children()}
            </div>
        </div>
    }
}

#[component]
pub fn DropdownMenuRadioItem(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] value: Option<String>,
    #[prop(optional)] checked: Option<bool>,
    #[prop(optional)] disabled: Option<bool>,
    #[prop(optional)] on_value_change: Option<Callback<String>>,
    children: Children,
) -> impl IntoView {
    let (is_checked, set_is_checked) = signal(checked.unwrap_or(false));
    let value = value.unwrap_or_default();

    let handle_click = {
        let value = value.clone();
        move |e: MouseEvent| {
            e.prevent_default();
            e.stop_propagation();
            if !disabled.unwrap_or(false) {
                set_is_checked.set(true);
                if let Some(callback) = on_value_change {
                    let value_clone = value.clone();
                    callback.run(value_clone);
                }
            }
        }
    };

    let handle_keydown = {
        let value = value.clone();
        move |e: KeyboardEvent| {
            if !disabled.unwrap_or(false) {
                match e.key().as_str() {
                    "Enter" | " " => {
                        e.prevent_default();
                        set_is_checked.set(true);
                        if let Some(callback) = on_value_change {
                            let value_clone = value.clone();
                            callback.run(value_clone);
                        }
                    }
                    "Escape" => {
                        web_sys::console::log_1(&"DropdownMenu radio escape".into());
                    }
                    _ => {}
                }
            }
        }
    };

    let base_classes = vec![
        "radix-dropdown-menu-radio-item",
        "relative",
        "flex",
        "cursor-default",
        "select-none",
        "items-center",
        "rounded-sm",
        "px-2",
        "py-1.5",
        "text-sm",
        "outline-none",
        "transition-colors",
        "focus:bg-accent",
        "focus:text-accent-foreground",
        "disabled:pointer-events-none",
        "disabled:opacity-50",
    ];

    let class_value = class.unwrap_or_default();
    let classes = merge_classes(base_classes);
    let final_class = format!("{} {}", classes, class_value);

    view! {
        <div
            class=final_class
            style=style
            role="menuitemradio"
            tabindex="-1"
            aria-checked=move || is_checked.get()
            on:click=handle_click
            on:keydown=handle_keydown
        >
            <div class="flex items-center gap-2">
                <div class="flex h-4 w-4 items-center justify-center">
                    <div
                        class=move || {
                            if is_checked.get() {
                                "h-2 w-2 rounded-full bg-current"
                            } else {
                                "h-2 w-2 rounded-full border border-current"
                            }
                        }
                        style=move || {
                            if is_checked.get() {
                                "background-color: currentColor;"
                            } else {
                                "background-color: transparent;"
                            }
                        }
                    />
                </div>
                {children()}
            </div>
        </div>
    }
}