aetna-core 0.3.3

Aetna — backend-agnostic UI library core
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
//! Select / dropdown menu — a trigger surface that displays the
//! currently chosen value paired with a dropdown popover of options.
//! Authored as two compositional pieces (trigger + menu) so apps place
//! the trigger inline in their layout and compose the menu at the root
//! of the El tree (the popover paradigm — see `widgets/popover.rs`).
//!
//! This is the **value picker** sibling of
//! [`crate::widgets::dropdown_menu`]: items here carry a value the app
//! binds via [`apply_event`] (`(value, open)` state shape, same as
//! `tabs` / `text_input` / `switch`). Reach for `dropdown_menu` when
//! items perform side-effects instead of selecting a value.
//!
//! # Shape
//!
//! ```ignore
//! use aetna_core::prelude::*;
//!
//! struct Picker {
//!     color: String,
//!     color_open: bool,
//! }
//!
//! impl App for Picker {
//!     fn build(&self, _cx: &BuildCx) -> El {
//!         let trigger = select_trigger("color", &self.color);
//!         let main = column([row([text("Color"), trigger])]);
//!
//!         let mut layers: Vec<El> = vec![main];
//!         if self.color_open {
//!             layers.push(select_menu("color", [
//!                 ("red", "Red"),
//!                 ("blue", "Blue"),
//!                 ("green", "Green"),
//!             ]));
//!         }
//!         stack(layers)
//!     }
//!
//!     fn on_event(&mut self, event: UiEvent) {
//!         if event.is_click_or_activate("color") {
//!             self.color_open = !self.color_open;
//!         } else if event.is_click_or_activate("color:dismiss") {
//!             self.color_open = false;
//!         } else if let Some(value) = event.route().and_then(|r| r.strip_prefix("color:option:")) {
//!             self.color = value.to_string();
//!             self.color_open = false;
//!         }
//!     }
//! }
//! ```
//!
//! # Routed keys
//!
//! - `{key}` — `Click` on the trigger; the app toggles its open flag.
//! - `{key}:dismiss` — `Click` outside the menu (the popover scrim);
//!   the app clears its open flag.
//! - `{key}:option:{value}` — `Click` on an option; the app sets the
//!   selected value and clears its open flag.
//!
//! Apps that share one open slot across several selects can match the
//! `:option:` and `:dismiss` suffixes back to the active select's key.
//!
//! # Dogfood note
//!
//! Composes only the public widget-kit surface — `Kind::Custom` for
//! the inspector tag, `.focusable()` + `.paint_overflow()` for the
//! focus ring, `.key()` for hit-test routing, and the existing
//! [`crate::widgets::popover`] composition for the dropdown body. An
//! app crate can write an equivalent select against the same public
//! API. See `widget_kit.md`.

use std::panic::Location;

use crate::event::{UiEvent, UiEventKind};
use crate::metrics::MetricsRole;
use crate::style::StyleProfile;
use crate::tokens;
use crate::tree::*;
use crate::widgets::popover::{Anchor, menu_item, popover, popover_panel};
use crate::{icon, text};

/// What a routed [`UiEvent`] means for a controlled select keyed `key`.
///
/// Returned by [`classify_event`]; [`apply_event`] is the convenience
/// wrapper that folds the action straight into `(value, open)` state.
///
/// The action variants cover the three routed keys [`select_trigger`]
/// + [`select_menu`] emit:
///
/// - `{key}` — toggle (trigger click / activate).
/// - `{key}:dismiss` — dismiss (scrim click).
/// - `{key}:option:{value}` — pick an option; the carried `String` is
///   the same `{value}` token passed to [`select_option_key`]. Apps
///   move it into their value type (identity for `String`, `s.parse()`
///   for numbers, a lookup for enums, …).
#[derive(Clone, Debug, PartialEq, Eq)]
#[non_exhaustive]
pub enum SelectAction {
    /// The trigger was clicked or activated. Toggle the open flag.
    Toggle,
    /// The dismiss scrim was clicked. Close the menu.
    Dismiss,
    /// An option was picked. The string is the raw value token from
    /// the option key.
    Pick(String),
}

/// Classify a routed [`UiEvent`] against a controlled select keyed
/// `key`. Returns `None` for events that aren't for this select.
///
/// Only `Click` / `Activate` event kinds qualify — pointer-move,
/// hover, and other non-activating events return `None` even when
/// they target a select sub-key. That means an app can call
/// [`classify_event`] unconditionally inside its event handler
/// without filtering on `event.kind` first.
pub fn classify_event(event: &UiEvent, key: &str) -> Option<SelectAction> {
    if !matches!(event.kind, UiEventKind::Click | UiEventKind::Activate) {
        return None;
    }
    let routed = event.route()?;
    if routed == key {
        return Some(SelectAction::Toggle);
    }
    let rest = routed.strip_prefix(key)?.strip_prefix(':')?;
    if rest == "dismiss" {
        return Some(SelectAction::Dismiss);
    }
    if let Some(value) = rest.strip_prefix("option:") {
        return Some(SelectAction::Pick(value.to_string()));
    }
    None
}

/// Fold a routed [`UiEvent`] into `(value, open)` state for a
/// controlled select keyed `key`. Returns `true` if the event was a
/// select event for this `key` (so the caller can short-circuit
/// further dispatch), `false` otherwise.
///
/// `parse` converts the raw option-value token back to the app's
/// value type, taking ownership of the picked `String`. Returning
/// `None` ignores the option pick silently (useful when the option
/// list and the value type can drift — e.g. a stale event arriving
/// after the underlying data changed).
///
/// For a `String` value field, pass `Some` directly — the picked
/// string moves straight into the destination. For typed values use
/// `s.parse().ok()` or a lookup closure.
///
/// ```ignore
/// use aetna_core::prelude::*;
///
/// // App owns (value, open) per select.
/// struct Picker { color: String, color_open: bool }
///
/// impl App for Picker {
///     fn on_event(&mut self, event: UiEvent) {
///         widgets::select::apply_event(
///             &mut self.color,
///             &mut self.color_open,
///             &event,
///             "color",
///             Some,
///         );
///     }
///     // ...
/// }
/// ```
pub fn apply_event<V>(
    value: &mut V,
    open: &mut bool,
    event: &UiEvent,
    key: &str,
    parse: impl FnOnce(String) -> Option<V>,
) -> bool {
    let Some(action) = classify_event(event, key) else {
        return false;
    };
    match action {
        SelectAction::Toggle => *open = !*open,
        SelectAction::Dismiss => *open = false,
        SelectAction::Pick(s) => {
            if let Some(v) = parse(s) {
                *value = v;
                *open = false;
            }
        }
    }
    true
}

/// Format the routed key emitted when an option is clicked. Apps that
/// match against the `:option:` suffix can use this helper to produce
/// the same string the widget produces, but the convention is also
/// stable enough to format inline.
pub fn select_option_key(key: &str, value: &impl std::fmt::Display) -> String {
    format!("{key}:option:{value}")
}

/// The trigger surface for a `select`. Visually a button-shaped row
/// of `[ current_label ▼ ]` keyed by `key`. Click emits `Click` on
/// `key`; the app toggles its open flag in `on_event`.
///
/// Default height is [`tokens::CONTROL_HEIGHT`] — use that constant
/// when sizing a parent row that has to fit the trigger.
///
/// The trigger is also the anchor key for [`select_menu`] — keep them
/// identical so the menu drops below the trigger.
#[track_caller]
pub fn select_trigger(key: impl Into<String>, current_label: impl Into<String>) -> El {
    let label = text(current_label)
        .label()
        .ellipsis()
        .width(Size::Fill(1.0));
    let chevron = icon("chevron-down")
        .icon_size(tokens::ICON_SM)
        .text_color(tokens::MUTED_FOREGROUND);
    El::new(Kind::Custom("select_trigger"))
        .at_loc(Location::caller())
        .style_profile(StyleProfile::Surface)
        .metrics_role(MetricsRole::Input)
        .surface_role(SurfaceRole::Input)
        .focusable()
        .paint_overflow(Sides::all(tokens::RING_WIDTH))
        .hit_overflow(Sides::all(tokens::HIT_OVERFLOW))
        .key(key)
        .axis(Axis::Row)
        .default_gap(tokens::SPACE_2)
        .align(Align::Center)
        .child(label)
        .child(chevron)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .text_color(tokens::FOREGROUND)
        .default_radius(tokens::RADIUS_MD)
        .default_width(Size::Fill(1.0))
        .default_height(Size::Fixed(tokens::CONTROL_HEIGHT))
        .default_padding(Sides::xy(tokens::SPACE_3, 0.0))
}

/// The dropdown popover for a `select`. Render this only while the
/// menu is open; place it at the root of the El tree (e.g. inside a
/// `stack`) so it paints over content and intercepts clicks above
/// siblings.
///
/// `options` is an iterable of `(value, label)` pairs. Each becomes a
/// [`menu_item`] keyed `{key}:option:{value}`. The dismiss scrim
/// emits `{key}:dismiss` (per the popover convention) on click
/// outside.
///
/// The menu anchors below the trigger keyed `key`; if that placement
/// would clip the viewport bottom the popover flips above
/// automatically (see [`crate::anchor_rect`]).
#[track_caller]
pub fn select_menu<I, V, L>(key: impl Into<String>, options: I) -> El
where
    I: IntoIterator<Item = (V, L)>,
    V: std::fmt::Display,
    L: Into<String>,
{
    // Capture once so the user's call site flows through to each
    // `menu_item`. `#[track_caller]` doesn't propagate through
    // `.map(...)` closures, so the items would otherwise record the
    // closure's source — see `tabs_list` for the same pattern and
    // motivation.
    let caller = Location::caller();
    let key = key.into();
    let items: Vec<El> = options
        .into_iter()
        .map(|(value, label)| {
            menu_item(label)
                .at_loc(caller)
                .key(select_option_key(&key, &value))
        })
        .collect();
    popover(key.clone(), Anchor::below_key(key), popover_panel(items))
}

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

    #[test]
    fn select_trigger_keys_root_and_carries_chevron() {
        let t = select_trigger("color", "Red");
        assert_eq!(t.key.as_deref(), Some("color"));
        // Trigger is a row of [label, chevron]. The chevron is the
        // last child and carries the chevron-down icon name so visual
        // affordance is unambiguous.
        let chevron = t.children.last().expect("trigger has chevron child");
        assert_eq!(
            chevron.icon,
            Some(crate::IconSource::Builtin(IconName::ChevronDown))
        );
        // Trigger opts into focus + ring overhead so keyboard users
        // can tab through selects like any other interactive surface.
        assert!(t.focusable, "select_trigger must be focusable");
    }

    #[test]
    fn select_menu_routes_dismiss_and_option_keys() {
        let menu = select_menu("color", [("red", "Red"), ("blue", "Blue")]);
        // Dismiss scrim follows the popover convention: `{key}:dismiss`.
        let scrim = &menu.children[0];
        assert_eq!(scrim.kind, Kind::Scrim);
        assert_eq!(scrim.key.as_deref(), Some("color:dismiss"));
        // Layer wraps the panel; panel children are the menu_items
        // keyed `{key}:option:{value}`.
        let layer = &menu.children[1];
        let panel = &layer.children[0];
        assert_eq!(panel.children.len(), 2);
        assert_eq!(panel.children[0].key.as_deref(), Some("color:option:red"));
        assert_eq!(panel.children[1].key.as_deref(), Some("color:option:blue"));
    }

    #[test]
    fn select_option_key_matches_widget_format() {
        // Apps decoding routed events should use the same helper to
        // avoid format drift.
        assert_eq!(select_option_key("color", &"red"), "color:option:red");
        assert_eq!(
            select_option_key("profile:7", &42u32),
            "profile:7:option:42"
        );
    }

    fn click_event(key: &str) -> UiEvent {
        UiEvent {
            path: None,
            kind: UiEventKind::Click,
            key: Some(key.to_string()),
            target: None,
            pointer: None,
            key_press: None,
            text: None,
            selection: None,
            modifiers: Default::default(),
            click_count: 1,
        }
    }

    #[test]
    fn classify_event_routes_trigger_dismiss_and_option() {
        // The same three keys `parse_profile_event` used to decode in
        // the volume app. classify_event collapses that boilerplate.
        assert_eq!(
            classify_event(&click_event("color"), "color"),
            Some(SelectAction::Toggle),
        );
        assert_eq!(
            classify_event(&click_event("color:dismiss"), "color"),
            Some(SelectAction::Dismiss),
        );
        assert_eq!(
            classify_event(&click_event("color:option:red"), "color"),
            Some(SelectAction::Pick("red".to_string())),
        );

        // Compound keys (the volume app uses `profile:{card_id}` as the
        // select key) work the same way — the helper compares against
        // the full select key, not just a prefix.
        assert_eq!(
            classify_event(&click_event("profile:7"), "profile:7"),
            Some(SelectAction::Toggle),
        );
        assert_eq!(
            classify_event(&click_event("profile:7:dismiss"), "profile:7"),
            Some(SelectAction::Dismiss),
        );
        assert_eq!(
            classify_event(&click_event("profile:7:option:42"), "profile:7"),
            Some(SelectAction::Pick("42".to_string())),
        );

        // Non-matching keys fall through.
        assert_eq!(classify_event(&click_event("mute:7"), "profile:7"), None);
        // Even when a key shares a prefix with the select key, the
        // separator-after-prefix check rejects events that aren't this
        // select's own children.
        assert_eq!(
            classify_event(&click_event("profile:7-other"), "profile:7"),
            None,
        );
        // Malformed option suffix isn't a Pick.
        assert_eq!(
            classify_event(&click_event("profile:7:option"), "profile:7"),
            None,
        );
    }

    #[test]
    fn classify_event_ignores_non_activating_kinds() {
        // Pointer-down / drag / hotkey events that target the same key
        // shouldn't toggle the menu — only Click and Activate qualify.
        let mut ev = click_event("color");
        ev.kind = UiEventKind::PointerDown;
        assert_eq!(classify_event(&ev, "color"), None);
        ev.kind = UiEventKind::Drag;
        assert_eq!(classify_event(&ev, "color"), None);
        ev.kind = UiEventKind::Activate;
        assert_eq!(
            classify_event(&ev, "color"),
            Some(SelectAction::Toggle),
            "keyboard activation should toggle like a click",
        );
    }

    #[test]
    fn apply_event_folds_actions_into_value_and_open() {
        let mut value = String::from("red");
        let mut open = false;

        // Trigger click flips open.
        assert!(apply_event(
            &mut value,
            &mut open,
            &click_event("color"),
            "color",
            Some,
        ));
        assert!(open);
        assert_eq!(value, "red");

        // Pick replaces value and closes the menu.
        assert!(apply_event(
            &mut value,
            &mut open,
            &click_event("color:option:blue"),
            "color",
            Some,
        ));
        assert_eq!(value, "blue");
        assert!(!open);

        // Reopen, then dismiss.
        apply_event(&mut value, &mut open, &click_event("color"), "color", Some);
        assert!(open);
        assert!(apply_event(
            &mut value,
            &mut open,
            &click_event("color:dismiss"),
            "color",
            Some,
        ));
        assert!(!open);
        assert_eq!(value, "blue", "dismiss must not alter the value");

        // Non-select event returns false; state unchanged.
        let mut value = String::from("v");
        let mut open = true;
        assert!(!apply_event(
            &mut value,
            &mut open,
            &click_event("unrelated"),
            "color",
            Some,
        ));
        assert_eq!((value.as_str(), open), ("v", true));
    }

    #[test]
    fn apply_event_silently_ignores_unparseable_picks() {
        // The volume app uses u32 profile indices; a stale option key
        // that doesn't parse should leave state untouched rather than
        // panic.
        let mut value: u32 = 3;
        let mut open = true;
        assert!(apply_event(
            &mut value,
            &mut open,
            &click_event("profile:7:option:not-a-number"),
            "profile:7",
            |s| s.parse::<u32>().ok(),
        ));
        assert_eq!(value, 3, "value preserved when parse returns None");
        assert!(open, "open preserved when parse returns None");
    }

    #[test]
    fn select_menu_anchors_below_trigger_key() {
        // End-to-end layout regression: the menu must look up the
        // trigger's rect via `rect_of_key(key)`, so when the trigger
        // is laid out at (x, y, w, h), the panel lands directly below.
        use crate::layout::layout;
        use crate::state::UiState;
        use crate::tree::stack;
        let trigger = select_trigger("sel", "A");
        let menu = select_menu("sel", [("a", "A"), ("b", "B")]);
        let mut tree = stack([trigger, menu]);
        let mut state = UiState::new();
        layout(&mut tree, &mut state, Rect::new(0.0, 0.0, 400.0, 300.0));
        // Trigger laid out by stack at parent origin, height 36.
        let trig_rect = state
            .rect_of_key(&tree, "sel")
            .expect("trigger key resolves");
        // The popover panel sits below the trigger with the standard
        // anchor gap. It's the popover layer's first child.
        let layer = &tree.children[1].children[1];
        let panel = &layer.children[0];
        let panel_rect = state.rect(&panel.computed_id);
        assert!(
            panel_rect.y >= trig_rect.bottom(),
            "panel should sit below trigger; trig.bottom={}, panel.y={}",
            trig_rect.bottom(),
            panel_rect.y,
        );
    }
}