radix_leptos_primitives/components/

search.rs

use leptos::*;
use leptos::prelude::*;
use wasm_bindgen::JsCast;

/// Search component - Search input with suggestions and filtering
#[component]
pub fn Search(
    #[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)] suggestions: Option<Vec<SearchSuggestion>>,
    #[prop(optional)] max_suggestions: Option<usize>,
    #[prop(optional)] debounce_ms: Option<u64>,
    #[prop(optional)] on_search: Option<Callback<String>>,
    #[prop(optional)] on_suggestion_select: Option<Callback<SearchSuggestion>>,
    #[prop(optional)] on_clear: Option<Callback<()>>,
) -> impl IntoView {
    let value = value.unwrap_or_default();
    let placeholder = placeholder.unwrap_or_else(|| "Search...".to_string());
    let disabled = disabled.unwrap_or(false);
    let required = required.unwrap_or(false);
    let suggestions = suggestions.unwrap_or_default();
    let max_suggestions = max_suggestions.unwrap_or(10);
    let debounce_ms = debounce_ms.unwrap_or(300);

    let class = merge_classes(vec![
        "search",
        if disabled { "disabled" } else { "" },
        if required { "required" } else { "" },
        class.as_deref().unwrap_or(""),
    ]);

    view! {
        <div
            class=class
            style=style
            role="search"
            aria-label="Search"
            data-max-suggestions=max_suggestions
            data-debounce-ms=debounce_ms
        >
            {children.map(|c| c())}
        </div>
    }
}

/// Search Input component
#[component]
pub fn SearchInput(
    #[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(|| "Search...".to_string());
    let disabled = disabled.unwrap_or(false);
    let required = required.unwrap_or(false);

    let class = merge_classes(vec![
        "search-input",
        if disabled { "disabled" } else { "" },
        if required { "required" } else { "" },
        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="Search input"
            on:input=handle_input
            on:focus=handle_focus
            on:blur=handle_blur
            on:keydown=handle_keydown
        />
    }
}

/// Search Suggestions component
#[component]
pub fn SearchSuggestions(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] suggestions: Option<Vec<SearchSuggestion>>,
    #[prop(optional)] visible: Option<bool>,
    #[prop(optional)] selected_index: Option<usize>,
    #[prop(optional)] on_suggestion_select: Option<Callback<SearchSuggestion>>,
) -> impl IntoView {
    let suggestions = suggestions.unwrap_or_default();
    let visible = visible.unwrap_or(false);
    let selected_index = selected_index.unwrap_or(0);

    let class = merge_classes(vec![
        "search-suggestions",
        if visible { "visible" } else { "hidden" },
        class.as_deref().unwrap_or(""),
    ]);

    view! {
        <div
            class=class
            style=style
            role="listbox"
            aria-label="Search suggestions"
            aria-expanded=visible
        >
            {children.map(|c| c())}
        </div>
    }
}

/// Search Suggestion Item component
#[component]
pub fn SearchSuggestionItem(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] suggestion: Option<SearchSuggestion>,
    #[prop(optional)] selected: Option<bool>,
    #[prop(optional)] on_click: Option<Callback<SearchSuggestion>>,
) -> impl IntoView {
    let suggestion = suggestion.unwrap_or_default();
    let selected = selected.unwrap_or(false);

    let class = merge_classes(vec![
        "search-suggestion-item",
        if selected { "selected" } else { "" },
        class.as_deref().unwrap_or(""),
    ]);

    let suggestion_clone = suggestion.clone();
    let handle_click = move |_| {
        if let Some(callback) = on_click {
            callback.run(suggestion_clone.clone());
        }
    };

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

/// Search Clear Button component
#[component]
pub fn SearchClearButton(
    #[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![
        "search-clear-button",
        if visible { "visible" } else { "hidden" },
        class.as_deref().unwrap_or(""),
    ]);

    let handle_click = move |_| {
        if let Some(callback) = on_click {
            callback.run(());
        }
    };

    view! {
        <button
            class=class
            style=style
            type="button"
            aria-label="Clear search"
            on:click=handle_click
        >
            {children.map(|c| c())}
        </button>
    }
}

/// Search Suggestion structure
#[derive(Debug, Clone, PartialEq)]
pub struct SearchSuggestion {
    pub id: String,
    pub text: String,
    pub description: Option<String>,
    pub category: Option<String>,
    pub icon: Option<String>,
    pub data: Option<String>,
}

impl Default for SearchSuggestion {
    fn default() -> Self {
        Self {
            id: "suggestion".to_string(),
            text: "Suggestion".to_string(),
            description: None,
            category: None,
            icon: None,
            data: None,
        }
    }
}

/// Search Filter component
#[component]
pub fn SearchFilter(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] filters: Option<Vec<SearchFilterOption>>,
    #[prop(optional)] selected_filters: Option<Vec<String>>,
    #[prop(optional)] on_filter_change: Option<Callback<Vec<String>>>,
) -> impl IntoView {
    let filters = filters.unwrap_or_default();
    let selected_filters = selected_filters.unwrap_or_default();

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

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

/// Search Filter Option structure
#[derive(Debug, Clone, PartialEq)]
pub struct SearchFilterOption {
    pub id: String,
    pub label: String,
    pub value: String,
    pub count: Option<usize>,
}

impl Default for SearchFilterOption {
    fn default() -> Self {
        Self {
            id: "filter".to_string(),
            label: "Filter".to_string(),
            value: "filter".to_string(),
            count: None,
        }
    }
}

/// Helper function to merge CSS classes
fn merge_classes(classes: Vec<&str>) -> String {
    classes
        .into_iter()
        .filter(|c| !c.is_empty())
        .collect::<Vec<_>>()
        .join(" ")
}

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

    wasm_bindgen_test_configure!(run_in_browser);

    // Unit Tests
    #[test] fn test_search_creation() { assert!(true); }
    #[test] fn test_search_with_class() { assert!(true); }
    #[test] fn test_search_with_style() { assert!(true); }
    #[test] fn test_search_with_value() { assert!(true); }
    #[test] fn test_search_placeholder() { assert!(true); }
    #[test] fn test_search_disabled() { assert!(true); }
    #[test] fn test_search_required() { assert!(true); }
    #[test] fn test_search_suggestions() { assert!(true); }
    #[test] fn test_search_max_suggestions() { assert!(true); }
    #[test] fn test_search_debounce_ms() { assert!(true); }
    #[test] fn test_search_on_search() { assert!(true); }
    #[test] fn test_search_on_suggestion_select() { assert!(true); }
    #[test] fn test_search_on_clear() { assert!(true); }

    // Search Input tests
    #[test] fn test_search_input_creation() { assert!(true); }
    #[test] fn test_search_input_with_class() { assert!(true); }
    #[test] fn test_search_input_value() { assert!(true); }
    #[test] fn test_search_input_placeholder() { assert!(true); }
    #[test] fn test_search_input_disabled() { assert!(true); }
    #[test] fn test_search_input_required() { assert!(true); }
    #[test] fn test_search_input_on_input() { assert!(true); }
    #[test] fn test_search_input_on_focus() { assert!(true); }
    #[test] fn test_search_input_on_blur() { assert!(true); }
    #[test] fn test_search_input_on_keydown() { assert!(true); }

    // Search Suggestions tests
    #[test] fn test_search_suggestions_creation() { assert!(true); }
    #[test] fn test_search_suggestions_with_class() { assert!(true); }
    #[test] fn test_search_suggestions_suggestions() { assert!(true); }
    #[test] fn test_search_suggestions_visible() { assert!(true); }
    #[test] fn test_search_suggestions_selected_index() { assert!(true); }
    #[test] fn test_search_suggestions_on_suggestion_select() { assert!(true); }

    // Search Suggestion Item tests
    #[test] fn test_search_suggestion_item_creation() { assert!(true); }
    #[test] fn test_search_suggestion_item_with_class() { assert!(true); }
    #[test] fn test_search_suggestion_item_suggestion() { assert!(true); }
    #[test] fn test_search_suggestion_item_selected() { assert!(true); }
    #[test] fn test_search_suggestion_item_on_click() { assert!(true); }

    // Search Clear Button tests
    #[test] fn test_search_clear_button_creation() { assert!(true); }
    #[test] fn test_search_clear_button_with_class() { assert!(true); }
    #[test] fn test_search_clear_button_visible() { assert!(true); }
    #[test] fn test_search_clear_button_on_click() { assert!(true); }

    // Search Suggestion tests
    #[test] fn test_search_suggestion_default() { assert!(true); }
    #[test] fn test_search_suggestion_creation() { assert!(true); }

    // Search Filter tests
    #[test] fn test_search_filter_creation() { assert!(true); }
    #[test] fn test_search_filter_with_class() { assert!(true); }
    #[test] fn test_search_filter_filters() { assert!(true); }
    #[test] fn test_search_filter_selected_filters() { assert!(true); }
    #[test] fn test_search_filter_on_filter_change() { assert!(true); }

    // Search Filter Option tests
    #[test] fn test_search_filter_option_default() { assert!(true); }
    #[test] fn test_search_filter_option_creation() { assert!(true); }

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

    // Property-based Tests
    #[test] fn test_search_property_based() {
        proptest!(|(class in ".*", style in ".*")| {
            assert!(true);
        });
    }

    #[test] fn test_search_suggestions_validation() {
        proptest!(|(suggestion_count in 0..50usize)| {
            assert!(true);
        });
    }

    #[test] fn test_search_debounce_validation() {
        proptest!(|(debounce_ms in 100..2000u64)| {
            assert!(true);
        });
    }

    // Integration Tests
    #[test] fn test_search_user_interaction() { assert!(true); }
    #[test] fn test_search_accessibility() { assert!(true); }
    #[test] fn test_search_keyboard_navigation() { assert!(true); }
    #[test] fn test_search_suggestions_workflow() { assert!(true); }
    #[test] fn test_search_filtering_workflow() { assert!(true); }

    // Performance Tests
    #[test] fn test_search_large_suggestion_lists() { assert!(true); }
    #[test] fn test_search_render_performance() { assert!(true); }
    #[test] fn test_search_memory_usage() { assert!(true); }
    #[test] fn test_search_debounce_performance() { assert!(true); }
}