dioxus-nox-tag-input 0.13.2

Headless tag/multi-select input primitive for Dioxus
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

use crate::hook::TagInputState;
use crate::tag::TagLike;
use dioxus::prelude::*;

/// Props for [`Tag`].
#[derive(Props, Clone, PartialEq)]
pub struct TagProps<T: TagLike + 'static> {
    pub tag: T,
    pub index: usize,
    #[props(extends = GlobalAttributes)]
    pub attributes: Vec<Attribute>,
    pub children: Element,
}

/// Individual tag pill with focus management and keyboard handling.
///
/// Renders `<div role="listitem">` with pill-mode keyboard handler.
/// Emits `data-slot="tag"`, `data-state` ("active"/"inactive"),
/// `data-locked`, `data-editing`, `data-popover-open`, `data-disabled`.
pub fn Tag<T: TagLike>(props: TagProps<T>) -> Element {
    let mut ctx = use_context::<TagInputState<T>>();
    let index = props.index;
    let is_active = *ctx.active_pill.read() == Some(index);
    let is_locked = props.tag.is_locked();
    let is_editing = *ctx.editing_pill.read() == Some(index);
    let is_popover_open = *ctx.popover_pill.read() == Some(index);
    let is_disabled = *ctx.is_disabled.read();
    let tag_name = props.tag.name().to_string();
    let pill_id = ctx.pill_id(index);

    let mut mounted_el = use_signal(|| None::<MountedEvent>);

    // Focus management: focus this pill when it becomes active
    use_effect(move || {
        if is_active && let Some(ref el) = *mounted_el.read() {
            drop(el.set_focus(true));
        }
    });

    rsx! {
        div {
            role: "listitem",
            id: "{pill_id}",
            tabindex: if is_active { "0" } else { "-1" },
            aria_label: "{tag_name}",
            "data-slot": "tag",
            "data-state": if is_active { "active" } else { "inactive" },
            "data-locked": is_locked,
            "data-editing": is_editing,
            "data-popover-open": is_popover_open,
            "data-disabled": is_disabled,
            onmounted: move |evt: MountedEvent| mounted_el.set(Some(evt)),
            onfocus: move |_| { ctx.active_pill.set(Some(index)); },
            onkeydown: move |evt| ctx.handle_pill_keydown(evt, index),
            ..props.attributes,
            {props.children}
        }
    }
}