radix_leptos_primitives/components/

combobox.rs

use crate::utils::{merge_classes, generate_id};
use leptos::callback::Callback;
use leptos::children::Children;
use leptos::prelude::*;
use wasm_bindgen::JsCast;

/// Combobox component - Searchable select component with autocomplete
#[component]
pub fn Combobox(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] value: Option<String>,
    #[prop(optional)] placeholder: Option<String>,
    #[prop(optional)] disabled: Option<bool>,
    #[prop(optional)] required: Option<bool>,
    #[prop(optional)] options: Option<Vec<ComboboxOption>>,
    #[prop(optional)] multiple: Option<bool>,
    #[prop(optional)] searchable: Option<bool>,
    #[prop(optional)] clearable: Option<bool>,
    #[prop(optional)] on_change: Option<Callback<Vec<String>>>,
    #[prop(optional)] on_search: Option<Callback<String>>,
) -> impl IntoView {
    let value = value.unwrap_or_default();
    let placeholder = placeholder.unwrap_or_else(|| "Select option...".to_string());
    let disabled = disabled.unwrap_or(false);
    let required = required.unwrap_or(false);
    let options = options.unwrap_or_default();
    let multiple = multiple.unwrap_or(false);
    let searchable = searchable.unwrap_or(true);
    let clearable = clearable.unwrap_or(true);

    let class = merge_classes(vec!["combobox", class.as_deref().unwrap_or("")]);

    view! {
        <div
            class=class
            style=style
            role="combobox"
        >
            {children.map(|c| c())}
        </div>
    }
}

/// Combobox Input component
#[component]
pub fn ComboboxInput(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] value: Option<String>,
    #[prop(optional)] placeholder: Option<String>,
    #[prop(optional)] disabled: Option<bool>,
    #[prop(optional)] required: Option<bool>,
    #[prop(optional)] on_input: Option<Callback<String>>,
    #[prop(optional)] on_focus: Option<Callback<()>>,
    #[prop(optional)] on_blur: Option<Callback<()>>,
    #[prop(optional)] on_keydown: Option<Callback<web_sys::KeyboardEvent>>,
) -> impl IntoView {
    let value = value.unwrap_or_default();
    let placeholder = placeholder.unwrap_or_else(|| "Select option...".to_string());
    let disabled = disabled.unwrap_or(false);
    let required = required.unwrap_or(false);

    let class = merge_classes(vec!["combobox-input", class.as_deref().unwrap_or("")]);

    let handle_input = move |event: web_sys::Event| {
        if let Some(input) = event
            .target()
            .and_then(|t| t.dyn_into::<web_sys::HtmlInputElement>().ok())
        {
            let new_value = input.value();
            if let Some(callback) = on_input {
                callback.run(new_value);
            }
        }
    };

    let handle_focus = move |_| {
        if let Some(callback) = on_focus {
            callback.run(());
        }
    };

    let handle_blur = move |_| {
        if let Some(callback) = on_blur {
            callback.run(());
        }
    };

    let handle_keydown = move |event: web_sys::KeyboardEvent| {
        if let Some(callback) = on_keydown {
            callback.run(event);
        }
    };

    view! {
        <input
            class=class
            style=style
            type="text"
            value=value
            placeholder=placeholder
            disabled=disabled
            required=required
            role="searchbox"
            aria-label="Combobox input"
            on:input=handle_input
            on:focus=handle_focus
            on:blur=handle_blur
            on:keydown=handle_keydown
        />
    }
}

/// Combobox Options component
#[component]
pub fn ComboboxOptions(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] options: Option<Vec<ComboboxOption>>,
    #[prop(optional)] visible: Option<bool>,
    #[prop(optional)] selected_index: Option<usize>,
    #[prop(optional)] on_option_select: Option<Callback<ComboboxOption>>,
) -> impl IntoView {
    let options = options.unwrap_or_default();
    let visible = visible.unwrap_or(false);
    let selected_index = selected_index.unwrap_or(0);

    let class = merge_classes(vec!["combobox-options", class.as_deref().unwrap_or("")]);

    if !visible {
        return {
            let _: () = view! { <></> };
            ().into_any()
        };
    }

    view! {
        <div
            class=class
            style=style
            role="listbox"
        >
            {children.map(|c| c())}
        </div>
    }
    .into_any()
}

/// Combobox Option component
#[component]
pub fn ComboboxOption(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] option: Option<ComboboxOption>,
    #[prop(optional)] selected: Option<bool>,
    #[prop(optional)] disabled: Option<bool>,
    #[prop(optional)] on_click: Option<Callback<ComboboxOption>>,
) -> impl IntoView {
    let option = option.unwrap_or_default();
    let selected = selected.unwrap_or(false);
    let disabled = disabled.unwrap_or(false);

    let class = merge_classes(vec!["combobox-option", class.as_deref().unwrap_or("")]);

    let option_clone = option.clone();
    let handle_click = move |_| {
        if !disabled {
            if let Some(callback) = on_click {
                callback.run(option_clone.clone());
            }
        }
    };

    view! {
        <div
            class=class
            style=style
            role="option"
            aria-selected=selected
            aria-disabled=disabled
            aria-label=option.label
            on:click=handle_click
        >
            {children.map(|c| c())}
        </div>
    }
}

/// Combobox Trigger component
#[component]
pub fn ComboboxTrigger(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] disabled: Option<bool>,
    #[prop(optional)] on_click: Option<Callback<()>>,
) -> impl IntoView {
    let disabled = disabled.unwrap_or(false);

    let class = merge_classes(vec!["combobox-trigger"]);

    view! {
        <button
            class=class
            style=style
            type="button"
            disabled=disabled
            aria-label="Open combobox"
            on:click=move |_| {
                if !disabled {
                    if let Some(callback) = on_click {
                        callback.run(());
                    }
                }
            }
        >
            {children.map(|c| c())}
        </button>
    }
}

/// Combobox Clear Button component
#[component]
pub fn ComboboxClearButton(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] visible: Option<bool>,
    #[prop(optional)] on_click: Option<Callback<()>>,
) -> impl IntoView {
    let visible = visible.unwrap_or(false);

    let class = merge_classes(vec!["combobox-clear-button"]);

    view! {
        <button
            class=class
            style=style
            type="button"
            aria-label="Clear selection"
            on:click=move |_| {
                if let Some(callback) = on_click {
                    callback.run(());
                }
            }
        >
            {children.map(|c| c())}
        </button>
    }
}

/// Combobox Option structure
#[derive(Debug, Clone, PartialEq)]
pub struct ComboboxOption {
    pub id: String,
    pub label: String,
    pub value: String,
    pub description: Option<String>,
    pub icon: Option<String>,
    pub disabled: bool,
    pub data: Option<String>,
}

impl Default for ComboboxOption {
    fn default() -> Self {
        Self {
            id: "option".to_string(),
            label: "Option".to_string(),
            value: "option".to_string(),
            description: None,
            icon: None,
            disabled: false,
            data: None,
        }
    }
}

/// Combobox Group component
#[component]
pub fn ComboboxGroup(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] label: Option<String>,
) -> impl IntoView {
    let label = label.unwrap_or_else(|| "Group".to_string());

    let class = merge_classes(vec!["combobox-group", class.as_deref().unwrap_or("")]);

    view! {
        <div
            class=class
            style=style
            role="group"
            aria-label=label
        >
            {children.map(|c| c())}
        </div>
    }
}

/// Combobox Separator component
#[component]
pub fn ComboboxSeparator(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
) -> impl IntoView {
    let class = merge_classes(vec!["combobox-separator", class.as_deref().unwrap_or("")]);

    view! {
        <div
            class=class
            style=style
            role="separator"
            aria-hidden="true"
        >
        </div>
    }
}

#[cfg(test)]
mod tests {
    use proptest::prelude::*;
    use wasm_bindgen_test::*;

    wasm_bindgen_test_configure!(run_in_browser);

    // Unit Tests
    #[test]
    fn test_combobox_creation() {}
    #[test]
    fn test_combobox_with_class() {}
    #[test]
    fn test_combobox_with_style() {}
    #[test]
    fn test_combobox_with_value() {}
    #[test]
    fn test_combobox_placeholder() {}
    #[test]
    fn test_comboboxdisabled() {}
    #[test]
    fn test_comboboxrequired() {}
    #[test]
    fn test_combobox_options() {}
    #[test]
    fn test_combobox_multiple() {}
    #[test]
    fn test_combobox_searchable() {}
    #[test]
    fn test_combobox_clearable() {}
    #[test]
    fn test_combobox_on_change() {}
    #[test]
    fn test_combobox_on_search() {}

    // Combobox Input tests
    #[test]
    fn test_combobox_input_creation() {}
    #[test]
    fn test_combobox_input_with_class() {}
    #[test]
    fn test_combobox_input_value() {}
    #[test]
    fn test_combobox_input_placeholder() {}
    #[test]
    fn test_combobox_inputdisabled() {}
    #[test]
    fn test_combobox_inputrequired() {}
    #[test]
    fn test_combobox_input_on_input() {}
    #[test]
    fn test_combobox_input_on_focus() {}
    #[test]
    fn test_combobox_input_on_blur() {}
    #[test]
    fn test_combobox_input_on_keydown() {}

    // Combobox Options tests
    #[test]
    fn test_combobox_options_creation() {}
    #[test]
    fn test_combobox_options_with_class() {}
    #[test]
    fn test_combobox_options_options() {}
    #[test]
    fn test_combobox_optionsvisible() {}
    #[test]
    fn test_combobox_optionsselected_index() {}
    #[test]
    fn test_combobox_options_on_option_select() {}

    // Combobox Option tests
    #[test]
    fn test_combobox_option_creation_2() {}
    #[test]
    fn test_combobox_option_with_class() {}
    #[test]
    fn test_combobox_option_option() {}
    #[test]
    fn test_combobox_optionselected() {}
    #[test]
    fn test_combobox_optiondisabled() {}
    #[test]
    fn test_combobox_option_on_click() {}

    // Combobox Trigger tests
    #[test]
    fn test_combobox_trigger_creation() {}
    #[test]
    fn test_combobox_trigger_with_class() {}
    #[test]
    fn test_combobox_triggerdisabled() {}
    #[test]
    fn test_combobox_trigger_on_click() {}

    // Combobox Clear Button tests
    #[test]
    fn test_combobox_clear_button_creation() {}
    #[test]
    fn test_combobox_clear_button_with_class() {}
    #[test]
    fn test_combobox_clear_buttonvisible() {}
    #[test]
    fn test_combobox_clear_button_on_click() {}

    // Combobox Option tests
    #[test]
    fn test_combobox_option_default() {}

    // Combobox Group tests
    #[test]
    fn test_combobox_group_creation() {}
    #[test]
    fn test_combobox_group_with_class() {}
    #[test]
    fn test_combobox_group_label() {}

    // Combobox Separator tests
    #[test]
    fn test_combobox_separator_creation() {}
    #[test]
    fn test_combobox_separator_with_class() {}

    // Helper function tests
    #[test]
    fn test_merge_classes_empty() {}
    #[test]
    fn test_merge_classes_single() {}
    #[test]
    fn test_merge_classes_multiple() {}
    #[test]
    fn test_merge_classes_with_empty() {}

    // Property-based Tests
    #[test]
    fn test_combobox_property_based() {
        proptest!(|(____class in ".*", __style in ".*")| {

        });
    }

    #[test]
    fn test_combobox_options_validation() {
        proptest!(|(______option_count in 0..50usize)| {

        });
    }

    #[test]
    fn test_combobox_multiple_selection() {
        proptest!(|(___selected_count in 0..10usize)| {

        });
    }

    // Integration Tests
    #[test]
    fn test_combobox_user_interaction() {}
    #[test]
    fn test_combobox_accessibility() {}
    #[test]
    fn test_combobox_keyboard_navigation() {}
    #[test]
    fn test_combobox_search_workflow() {}
    #[test]
    fn test_combobox_selection_workflow() {}

    // Performance Tests
    #[test]
    fn test_combobox_large_option_lists() {}
    #[test]
    fn test_combobox_render_performance() {}
    #[test]
    fn test_combobox_memory_usage() {}
    #[test]
    fn test_combobox_search_performance() {}
}