radix_leptos_primitives/components/

multi_select.rs

use leptos::callback::Callback;
use leptos::children::Children;
use leptos::prelude::*;

/// Multi-Select component for selecting multiple options with search functionality
#[component]
pub fn MultiSelect(
    /// Selected values
    #[prop(optional)]
    value: Option<Vec<String>>,
    /// Available options
    #[prop(optional)]
    options: Option<Vec<MultiSelectOption>>,
    /// Placeholder text
    #[prop(optional)]
    placeholder: Option<String>,
    /// Whether the component is disabled
    #[prop(optional)]
    disabled: Option<bool>,
    /// Whether the component is required
    #[prop(optional)]
    required: Option<bool>,
    /// Maximum number of selections allowed
    #[prop(optional)]
    max_selections: Option<usize>,
    /// Whether to show search functionality
    #[prop(optional)]
    searchable: Option<bool>,
    /// Callback when selection changes
    #[prop(optional)]
    on_change: Option<Callback<Vec<String>>>,
    /// Callback when search query changes
    #[prop(optional)]
    on_search: Option<Callback<String>>,
    /// Callback when option is selected
    #[prop(optional)]
    on_option_select: Option<Callback<MultiSelectOption>>,
    /// Callback when option is deselected
    #[prop(optional)]
    on_option_deselect: Option<Callback<MultiSelectOption>>,
    /// Additional CSS classes
    #[prop(optional)]
    class: Option<String>,
    /// Inline styles
    #[prop(optional)]
    style: Option<String>,
    /// Children content
    children: Option<Children>,
) -> impl IntoView {
    let _value = value.unwrap_or_default();
    let _options = options.unwrap_or_default();
    let _placeholder = placeholder.unwrap_or_else(|| "Select options...".to_string());
    let _disabled = disabled.unwrap_or(false);
    let _required = required.unwrap_or(false);
    let _max_selections = max_selections.unwrap_or(usize::MAX);
    let _searchable = searchable.unwrap_or(true);

    let _class = format!(
        "multi-select {} {}",
        class.as_deref().unwrap_or(""),
        style.as_deref().unwrap_or("")
    );

    view! {
        <div
            class=_class
            role="combobox"
            aria-multiselectable=true
        >
            {children.map(|c| c())}
        </div>
    }
}

/// Multi-Select option structure
#[derive(Debug, Clone, PartialEq, Default)]
pub struct MultiSelectOption {
    pub value: String,
    pub label: String,
    pub _disabled: bool,
    pub description: Option<String>,
    pub group: Option<String>,
}

/// Multi-Select trigger component
#[component]
pub fn MultiSelectTrigger(
    /// Whether the dropdown is open
    #[prop(optional)]
    open: Option<bool>,
    /// Callback when trigger is clicked
    #[prop(optional)]
    on_click: Option<Callback<()>>,
    /// Additional CSS classes
    #[prop(optional)]
    class: Option<String>,
    /// Inline styles
    #[prop(optional)]
    style: Option<String>,
    /// Children content
    children: Option<Children>,
) -> impl IntoView {
    let _open = open.unwrap_or(false);
    let _class = format!(
        "multi-select-trigger {} {}",
        class.as_deref().unwrap_or(""),
        style.as_deref().unwrap_or("")
    );

    view! {
        <button
            class=_class
            role="button"
            aria-expanded=_open
            on:click=move |_| {
                if let Some(callback) = on_click {
                    callback.run(());
                }
            }
        >
            {children.map(|c| c())}
        </button>
    }
}

/// Multi-Select content component
#[component]
pub fn MultiSelectContent(
    /// Whether the content is visible
    #[prop(optional)]
    visible: Option<bool>,
    /// Additional CSS classes
    #[prop(optional)]
    class: Option<String>,
    /// Inline styles
    #[prop(optional)]
    style: Option<String>,
    /// Children content
    children: Option<Children>,
) -> impl IntoView {
    let _visible = visible.unwrap_or(false);
    let _class = format!(
        "multi-select-content {} {}",
        class.as_deref().unwrap_or(""),
        style.as_deref().unwrap_or("")
    );

    view! {
        <div
            class=_class
            role="listbox"
            aria-hidden=!_visible
        >
            {children.map(|c| c())}
        </div>
    }
}

/// Multi-Select option component
#[component]
pub fn MultiSelectOption(
    /// Option data
    option: MultiSelectOption,
    /// Whether the option is selected
    #[prop(optional)]
    selected: Option<bool>,
    /// Whether the option is disabled
    #[prop(optional)]
    disabled: Option<bool>,
    /// Callback when option is clicked
    #[prop(optional)]
    on_click: Option<Callback<MultiSelectOption>>,
    /// Additional CSS classes
    #[prop(optional)]
    class: Option<String>,
    /// Inline styles
    #[prop(optional)]
    style: Option<String>,
    /// Children content
    children: Option<Children>,
) -> impl IntoView {
    let selected = selected.unwrap_or(false);
    let disabled = disabled.unwrap_or(option._disabled);
    let class = format!("multi-select-option {}", class.unwrap_or_default());

    let style = style.unwrap_or_default();

    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
            on:click=handle_click
        >
            {children.map(|c| c())}
        </div>
    }
}

/// Multi-Select search component
#[component]
pub fn MultiSelectSearch(
    /// Search query value
    #[prop(optional)]
    value: Option<String>,
    /// Placeholder text
    #[prop(optional)]
    placeholder: Option<String>,
    /// Whether the search is disabled
    #[prop(optional)]
    disabled: Option<bool>,
    /// Callback when search query changes
    #[prop(optional)]
    on_change: Option<Callback<String>>,
    /// Callback when search is cleared
    #[prop(optional)]
    on_clear: Option<Callback<()>>,
    /// Additional CSS classes
    #[prop(optional)]
    class: Option<String>,
    /// Inline styles
    #[prop(optional)]
    style: Option<String>,
) -> impl IntoView {
    let value = value.unwrap_or_default();
    let placeholder = placeholder.unwrap_or_else(|| "Search options...".to_string());
    let disabled = disabled.unwrap_or(false);
    let class = format!(
        "multi-select-search {} {}",
        class.as_deref().unwrap_or(""),
        style.as_deref().unwrap_or("")
    );

    view! {
        <input
            class=class
            style=style
            type="text"
            placeholder=placeholder
            value=value
            disabled=disabled
            on:input=move |ev| {
                if let Some(callback) = on_change {
                    callback.run(event_target_value(&ev));
                }
            }
        />
    }
}

/// Multi-Select tag component for selected items
#[component]
pub fn MultiSelectTag(
    /// Option data
    option: MultiSelectOption,
    /// Callback when tag is removed
    #[prop(optional)]
    on_remove: Option<Callback<MultiSelectOption>>,
    /// Additional CSS classes
    #[prop(optional)]
    class: Option<String>,
    /// Inline styles
    #[prop(optional)]
    style: Option<String>,
) -> impl IntoView {
    let class = format!("multi-select-tag {}", class.unwrap_or_default());
    let style = style.unwrap_or_default();

    let option_clone = option.clone();
    let handle_remove = move |_: web_sys::MouseEvent| {
        if let Some(callback) = on_remove {
            callback.run(option_clone.clone());
        }
    };

    view! {
        <span class=class style=style>
            <span class="tag-label">{option.label.clone()}</span>
            <button
                class="tag-remove"
                type="button"
                aria-label=format!("Remove {}", option.label)
                on:click=handle_remove
            >
                "×"
            </button>
        </span>
    }
}

#[cfg(test)]
mod tests {
    use crate::MultiSelectOption;
use crate::utils::{merge_optional_classes, generate_id};

    // Component structure tests
    #[test]
    fn test_multiselect_component_creation() {}

    #[test]
    fn test_multiselect_trigger_component_creation() {}

    #[test]
    fn test_multiselect_content_component_creation() {}

    #[test]
    fn test_multiselect_option_component_creation() {}

    #[test]
    fn test_multiselect_search_component_creation() {}

    #[test]
    fn test_multiselect_tag_component_creation() {}

    // Data structure tests
    #[test]
    fn test_multiselect_option_struct() {
        let option = MultiSelectOption {
            value: "test".to_string(),
            label: "Test Option".to_string(),
            _disabled: false,
            description: Some("Test description".to_string()),
            group: Some("test-group".to_string()),
        };
        assert_eq!(option.value, "test");
        assert_eq!(option.label, "Test Option");
        assert!(!option._disabled);
        assert!(option.description.is_some());
        assert!(option.group.is_some());
    }

    #[test]
    fn test_multiselect_option_default() {
        let option = MultiSelectOption::default();
        assert_eq!(option.value, "");
        assert_eq!(option.label, "");
        assert!(!option._disabled);
        assert!(option.description.is_none());
        assert!(option.group.is_none());
    }

    // Props and state tests
    #[test]
    fn test_multiselect_props_handling() {}

    #[test]
    fn test_multiselect_value_handling() {}

    #[test]
    fn test_multiselect_options_handling() {}

    #[test]
    fn test_multiselectdisabled_state() {}

    #[test]
    fn test_multiselectrequired_state() {}

    #[test]
    fn test_multiselect_max_selections() {}

    #[test]
    fn test_multiselect_searchable_prop() {}

    // Event handling tests
    #[test]
    fn test_multiselect_change_callback() {}

    #[test]
    fn test_multiselect_search_callback() {}

    #[test]
    fn test_multiselect_option_select_callback() {}

    #[test]
    fn test_multiselect_option_deselect_callback() {}

    #[test]
    fn test_multiselect_trigger_click() {}

    #[test]
    fn test_multiselect_option_click() {}

    #[test]
    fn test_multiselect_search_input() {}

    #[test]
    fn test_multiselect_tag_remove() {}

    // Accessibility tests
    #[test]
    fn test_multiselect_aria_attributes() {}

    #[test]
    fn test_multiselect_keyboard_navigation() {}

    #[test]
    fn test_multiselect_screen_reader_support() {}

    #[test]
    fn test_multiselect_focus_management() {}

    // Search functionality tests
    #[test]
    fn test_multiselect_search_filtering() {}

    #[test]
    fn test_multiselect_search_clear() {}

    #[test]
    fn test_multiselect_search_placeholder() {}

    // Selection management tests
    #[test]
    fn test_multiselect_multiple_selection() {}

    #[test]
    fn test_multiselect_selection_limit() {}

    #[test]
    fn test_multiselect_selection_validation() {}

    #[test]
    fn test_multiselect_deselection() {}

    // Grouping tests
    #[test]
    fn test_multiselect_option_grouping() {}

    #[test]
    fn test_multiselect_group_display() {}

    // Performance tests
    #[test]
    fn test_multiselect_large_option_list() {}

    #[test]
    fn test_multiselect_search_performance() {}

    // Integration tests
    #[test]
    fn test_multiselect_full_workflow() {}

    #[test]
    fn test_multiselect_with_form_integration() {}

    // Edge case tests
    #[test]
    fn test_multiselect_empty_options() {}

    #[test]
    fn test_multiselect_all_optionsdisabled() {}

    #[test]
    fn test_multiselect_duplicate_values() {}

    // Styling tests
    #[test]
    fn test_multiselect_custom_classes() {}

    #[test]
    fn test_multiselect_custom_styles() {}

    #[test]
    fn test_multiselect_responsive_design() {}
}