Popover

use iced::widget::{column, row, text};
use iced::{Element, Length};
use iced_cube::button;
use iced_cube::overlay::popover::{Align, Side, popover};
use iced_cube::primitives::button::{Size, Variant};
use iced_cube::theme::text_size;

#[derive(Debug, Clone)]
pub enum Message {
    Toggle(Side),
    Align(Align),
    Dismiss,
}

#[derive(Debug)]
pub struct Example {
    open: Option<Side>,
    last: Side,
    align: Align,
}

impl Default for Example {
    fn default() -> Self {
        Self {
            open: Some(Side::Bottom),
            last: Side::Bottom,
            align: Align::Start,
        }
    }
}

impl Example {
    pub fn update(&mut self, message: Message) {
        match message {
            Message::Toggle(side) => {
                self.open = (self.open != Some(side)).then_some(side);
                self.last = side;
            }
            // A click on an alignment also dismisses the popover, so reopen it.
            Message::Align(align) => {
                self.align = align;
                self.open = Some(self.last);
            }
            Message::Dismiss => self.open = None,
        }
    }

    pub fn view(&self) -> Element<'_, Message> {
        let name = |align| match align {
            Align::Start => "Start",
            Align::Center => "Centre",
            Align::End => "End",
        };

        let alignments = row(Align::ALL.map(|align| {
            let variant = if align == self.align {
                Variant::Secondary
            } else {
                Variant::Ghost
            };
            button(name(align))
                .size(Size::Sm)
                .variant(variant)
                .on_press(Message::Align(align))
                .into()
        }))
        .spacing(4);

        let sides = row(Side::ALL.map(|side| {
            let label = text(format!(
                "{side:?}, aligned to {}",
                name(self.align).to_lowercase()
            ))
            .size(text_size::SM);
            popover(
                button(format!("{side:?}"))
                    .variant(Variant::Outline)
                    .on_press(Message::Toggle(side)),
                label,
            )
            .open(self.open == Some(side))
            .side(side)
            .align(self.align)
            .width(Length::Shrink)
            .padding(12.0)
            .on_dismiss(Message::Dismiss)
            .into()
        }))
        .spacing(8);

        column![alignments, sides].spacing(16).into()
    }
}

crates/gallery/src/stories/popover/placement.rs

use iced::widget::{column, container, text};
use iced::{Element, Subscription};
use iced_cube::button;
use iced_cube::keys::{self, Chord, Keymap};
use iced_cube::overlay::popover::{self, Action, popover};
use iced_cube::primitives::button::Variant;
use iced_cube::theme::{Tokens, semibold, text_size};

#[derive(Debug, Clone)]
pub enum Message {
    Toggle,
    Dismiss,
    Key(keys::Event),
}

#[derive(Debug)]
pub struct Example {
    open: bool,
    keymap: Keymap<Action>,
}

impl Default for Example {
    fn default() -> Self {
        Self {
            open: true,
            keymap: popover::default_keymap().bind(Chord::character('i'), Action::Toggle),
        }
    }
}

impl Example {
    pub fn update(&mut self, message: Message) {
        match message {
            Message::Toggle => self.open = !self.open,
            Message::Dismiss => self.open = false,
            Message::Key(key) => {
                let next = self
                    .keymap
                    .resolve_event(&key)
                    .and_then(|action| action.apply(self.open));
                if let Some(open) = next {
                    self.open = open;
                }
            }
        }
    }

    pub fn view(&self) -> Element<'_, Message> {
        let info = column![
            text("Release notes").size(text_size::SM).font(semibold()),
            text("Version 0.0.2 adds popovers and menus.")
                .size(text_size::SM)
                .style(|theme| text::Style {
                    color: Some(Tokens::of(theme).muted_foreground),
                }),
        ]
        .spacing(4);

        let trigger = button("What's new")
            .variant(Variant::Outline)
            .on_press(Message::Toggle);

        column![
            text("Press I to open or close the popover, or Escape to close it.").size(14),
            container(
                popover(trigger, info)
                    .open(self.open)
                    .width(240)
                    .keymap(self.keymap.clone())
                    .on_dismiss(Message::Dismiss),
            )
            .height(140),
        ]
        .spacing(16)
        .into()
    }

    pub fn subscription(&self) -> Subscription<Message> {
        keys::subscription().map(Message::Key)
    }
}

crates/gallery/src/stories/popover/keyboard.rs