feat(widget): add dropdown widget as pick_list replacement

The Dropdown widget is based on the PickList widget from iced.

src/widget/dropdown/menu/appearance.rs

@@ -0,0 +1,38 @@
+// Copyright 2023 System76 <info@system76.com>
+// Copyright 2019 Héctor Ramón, Iced contributors
+// SPDX-License-Identifier: MPL-2.0 AND MIT
+
+//! Change the appearance of menus.
+use iced_core::{Background, BorderRadius, Color};
+
+/// The appearance of a menu.
+#[derive(Debug, Clone, Copy)]
+pub struct Appearance {
+    /// Menu text color
+    pub text_color: Color,
+    /// Menu background
+    pub background: Background,
+    /// Menu border width
+    pub border_width: f32,
+    /// Menu border radius
+    pub border_radius: BorderRadius,
+    /// Menu border color
+    pub border_color: Color,
+    /// Text color when hovered
+    pub hovered_text_color: Color,
+    /// Background when hovered
+    pub hovered_background: Background,
+    /// Text color when selected
+    pub selected_text_color: Color,
+    /// Background when selected
+    pub selected_background: Background,
+}
+
+/// The style sheet of a menu.
+pub trait StyleSheet {
+    /// The supported style of the [`StyleSheet`].
+    type Style: Default + Clone;
+
+    /// Produces the [`Appearance`] of a menu.
+    fn appearance(&self, style: &Self::Style) -> Appearance;
+}

src/widget/dropdown/menu/mod.rs

@@ -0,0 +1,516 @@
+// Copyright 2023 System76 <info@system76.com>
+// Copyright 2019 Héctor Ramón, Iced contributors
+// SPDX-License-Identifier: MPL-2.0 AND MIT
+
+mod appearance;
+pub use appearance::{Appearance, StyleSheet};
+
+use std::ffi::OsStr;
+
+use crate::widget::{icon, Container};
+use iced_core::event::{self, Event};
+use iced_core::layout::{self, Layout};
+use iced_core::text::{self, Text};
+use iced_core::widget::Tree;
+use iced_core::{
+    alignment, mouse, overlay, renderer, svg, touch, Clipboard, Color, Element, Length, Padding,
+    Pixels, Point, Rectangle, Renderer, Shell, Size, Vector, Widget,
+};
+use iced_widget::scrollable::Scrollable;
+
+/// A list of selectable options.
+#[must_use]
+pub struct Menu<'a, S, Message>
+where
+    S: AsRef<str>,
+{
+    state: &'a mut State,
+    options: &'a [S],
+    hovered_option: &'a mut Option<usize>,
+    selected_option: Option<usize>,
+    on_selected: Box<dyn FnMut(usize) -> Message + 'a>,
+    on_option_hovered: Option<&'a dyn Fn(usize) -> Message>,
+    width: f32,
+    padding: Padding,
+    text_size: Option<f32>,
+    text_line_height: text::LineHeight,
+    style: (),
+}
+
+impl<'a, S: AsRef<str>, Message: 'a> Menu<'a, S, Message> {
+    /// Creates a new [`Menu`] with the given [`State`], a list of options, and
+    /// the message to produced when an option is selected.
+    pub fn new(
+        state: &'a mut State,
+        options: &'a [S],
+        hovered_option: &'a mut Option<usize>,
+        selected_option: Option<usize>,
+        on_selected: impl FnMut(usize) -> Message + 'a,
+        on_option_hovered: Option<&'a dyn Fn(usize) -> Message>,
+    ) -> Self {
+        Menu {
+            state,
+            options,
+            hovered_option,
+            selected_option,
+            on_selected: Box::new(on_selected),
+            on_option_hovered,
+            width: 0.0,
+            padding: Padding::ZERO,
+            text_size: None,
+            text_line_height: text::LineHeight::default(),
+            style: Default::default(),
+        }
+    }
+
+    /// Sets the width of the [`Menu`].
+    pub fn width(mut self, width: f32) -> Self {
+        self.width = width;
+        self
+    }
+
+    /// Sets the [`Padding`] of the [`Menu`].
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
+        self
+    }
+
+    /// Sets the text size of the [`Menu`].
+    pub fn text_size(mut self, text_size: impl Into<Pixels>) -> Self {
+        self.text_size = Some(text_size.into().0);
+        self
+    }
+
+    /// Sets the text [`LineHeight`] of the [`Menu`].
+    pub fn text_line_height(mut self, line_height: impl Into<text::LineHeight>) -> Self {
+        self.text_line_height = line_height.into();
+        self
+    }
+
+    /// Turns the [`Menu`] into an overlay [`Element`] at the given target
+    /// position.
+    ///
+    /// The `target_height` will be used to display the menu either on top
+    /// of the target or under it, depending on the screen position and the
+    /// dimensions of the [`Menu`].
+    #[must_use]
+    pub fn overlay(
+        self,
+        position: Point,
+        target_height: f32,
+    ) -> overlay::Element<'a, Message, crate::Renderer> {
+        overlay::Element::new(position, Box::new(Overlay::new(self, target_height)))
+    }
+}
+
+/// The local state of a [`Menu`].
+#[must_use]
+#[derive(Debug)]
+pub struct State {
+    tree: Tree,
+}
+
+impl State {
+    /// Creates a new [`State`] for a [`Menu`].
+    pub fn new() -> Self {
+        Self {
+            tree: Tree::empty(),
+        }
+    }
+}
+
+impl Default for State {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+struct Overlay<'a, Message> {
+    state: &'a mut Tree,
+    container: Container<'a, Message, crate::Renderer>,
+    width: f32,
+    target_height: f32,
+    style: (),
+}
+
+impl<'a, Message: 'a> Overlay<'a, Message> {
+    pub fn new<S: AsRef<str>>(menu: Menu<'a, S, Message>, target_height: f32) -> Self {
+        let Menu {
+            state,
+            options,
+            hovered_option,
+            selected_option,
+            on_selected,
+            on_option_hovered,
+            width,
+            padding,
+            text_size,
+            text_line_height,
+            style,
+        } = menu;
+
+        let selected_icon = icon::from_name("object-select-symbolic").size(16).handle();
+
+        let mut container = Container::new(Scrollable::new(List {
+            options,
+            hovered_option,
+            selected_option,
+            on_selected,
+            on_option_hovered,
+            text_size,
+            text_line_height,
+            padding,
+            selected_icon: match selected_icon.data {
+                icon::Data::Name(named) => named
+                    .path()
+                    .filter(|path| path.extension().is_some_and(|ext| ext == OsStr::new("svg")))
+                    .map(iced_core::svg::Handle::from_path),
+                icon::Data::Svg(handle) => Some(handle),
+                icon::Data::Image(_) => None,
+            },
+        }));
+
+        container = container
+            .padding(padding)
+            .style(crate::style::Container::Dropdown);
+
+        state.tree.diff(&mut container as &mut dyn Widget<_, _>);
+
+        Self {
+            state: &mut state.tree,
+            container,
+            width,
+            target_height,
+            style,
+        }
+    }
+}
+
+impl<'a, Message> iced_core::Overlay<Message, crate::Renderer> for Overlay<'a, Message> {
+    fn layout(&self, renderer: &crate::Renderer, bounds: Size, position: Point) -> layout::Node {
+        let space_below = bounds.height - (position.y + self.target_height);
+        let space_above = position.y;
+
+        let limits = layout::Limits::new(
+            Size::ZERO,
+            Size::new(
+                bounds.width - position.x,
+                if space_below > space_above {
+                    space_below
+                } else {
+                    space_above
+                },
+            ),
+        )
+        .width(self.width);
+
+        let mut node = self.container.layout(renderer, &limits);
+
+        node.move_to(if space_below > space_above {
+            position + Vector::new(0.0, self.target_height)
+        } else {
+            position - Vector::new(0.0, node.size().height)
+        });
+
+        node
+    }
+
+    fn on_event(
+        &mut self,
+        event: Event,
+        layout: Layout<'_>,
+        cursor: mouse::Cursor,
+        renderer: &crate::Renderer,
+        clipboard: &mut dyn Clipboard,
+        shell: &mut Shell<'_, Message>,
+    ) -> event::Status {
+        let bounds = layout.bounds();
+
+        self.container.on_event(
+            self.state, event, layout, cursor, renderer, clipboard, shell, &bounds,
+        )
+    }
+
+    fn mouse_interaction(
+        &self,
+        layout: Layout<'_>,
+        cursor: mouse::Cursor,
+        viewport: &Rectangle,
+        renderer: &crate::Renderer,
+    ) -> mouse::Interaction {
+        self.container
+            .mouse_interaction(self.state, layout, cursor, viewport, renderer)
+    }
+
+    fn draw(
+        &self,
+        renderer: &mut crate::Renderer,
+        theme: &crate::Theme,
+        style: &renderer::Style,
+        layout: Layout<'_>,
+        cursor: mouse::Cursor,
+    ) {
+        let appearance = theme.appearance(&self.style);
+        let bounds = layout.bounds();
+
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds,
+                border_color: appearance.border_color,
+                border_width: appearance.border_width,
+                border_radius: appearance.border_radius,
+            },
+            appearance.background,
+        );
+
+        self.container
+            .draw(self.state, renderer, theme, style, layout, cursor, &bounds);
+    }
+}
+
+struct List<'a, S: AsRef<str>, Message> {
+    options: &'a [S],
+    hovered_option: &'a mut Option<usize>,
+    selected_option: Option<usize>,
+    on_selected: Box<dyn FnMut(usize) -> Message + 'a>,
+    on_option_hovered: Option<&'a dyn Fn(usize) -> Message>,
+    padding: Padding,
+    text_size: Option<f32>,
+    text_line_height: text::LineHeight,
+    selected_icon: Option<svg::Handle>,
+}
+
+impl<'a, S: AsRef<str>, Message> Widget<Message, crate::Renderer> for List<'a, S, Message> {
+    fn width(&self) -> Length {
+        Length::Fill
+    }
+
+    fn height(&self) -> Length {
+        Length::Shrink
+    }
+
+    fn layout(&self, renderer: &crate::Renderer, limits: &layout::Limits) -> layout::Node {
+        use std::f32;
+
+        let limits = limits.width(Length::Fill).height(Length::Shrink);
+        let text_size = self
+            .text_size
+            .unwrap_or_else(|| text::Renderer::default_size(renderer));
+
+        let text_line_height = self.text_line_height.to_absolute(Pixels(text_size));
+
+        let size = {
+            let intrinsic = Size::new(
+                0.0,
+                (f32::from(text_line_height) + self.padding.vertical()) * self.options.len() as f32,
+            );
+
+            limits.resolve(intrinsic)
+        };
+
+        layout::Node::new(size)
+    }
+
+    fn on_event(
+        &mut self,
+        _state: &mut Tree,
+        event: Event,
+        layout: Layout<'_>,
+        cursor: mouse::Cursor,
+        renderer: &crate::Renderer,
+        _clipboard: &mut dyn Clipboard,
+        shell: &mut Shell<'_, Message>,
+        _viewport: &Rectangle,
+    ) -> event::Status {
+        match event {
+            Event::Mouse(mouse::Event::ButtonPressed(mouse::Button::Left)) => {
+                if cursor.is_over(layout.bounds()) {
+                    if let Some(index) = *self.hovered_option {
+                        shell.publish((self.on_selected)(index));
+                        return event::Status::Captured;
+                    }
+                }
+            }
+            Event::Mouse(mouse::Event::CursorMoved { .. }) => {
+                if let Some(cursor_position) = cursor.position_in(layout.bounds()) {
+                    let text_size = self
+                        .text_size
+                        .unwrap_or_else(|| text::Renderer::default_size(renderer));
+
+                    let option_height =
+                        f32::from(self.text_line_height.to_absolute(Pixels(text_size)))
+                            + self.padding.vertical();
+
+                    let new_hovered_option = (cursor_position.y / option_height) as usize;
+
+                    if let Some(on_option_hovered) = self.on_option_hovered {
+                        if *self.hovered_option != Some(new_hovered_option) {
+                            shell.publish(on_option_hovered(new_hovered_option));
+                        }
+                    }
+
+                    *self.hovered_option = Some(new_hovered_option);
+                }
+            }
+            Event::Touch(touch::Event::FingerPressed { .. }) => {
+                if let Some(cursor_position) = cursor.position_in(layout.bounds()) {
+                    let text_size = self
+                        .text_size
+                        .unwrap_or_else(|| text::Renderer::default_size(renderer));
+
+                    let option_height =
+                        f32::from(self.text_line_height.to_absolute(Pixels(text_size)))
+                            + self.padding.vertical();
+
+                    *self.hovered_option = Some((cursor_position.y / option_height) as usize);
+
+                    if let Some(index) = *self.hovered_option {
+                        shell.publish((self.on_selected)(index));
+                        return event::Status::Captured;
+                    }
+                }
+            }
+            _ => {}
+        }
+
+        event::Status::Ignored
+    }
+
+    fn mouse_interaction(
+        &self,
+        _state: &Tree,
+        layout: Layout<'_>,
+        cursor: mouse::Cursor,
+        _viewport: &Rectangle,
+        _renderer: &crate::Renderer,
+    ) -> mouse::Interaction {
+        let is_mouse_over = cursor.is_over(layout.bounds());
+
+        if is_mouse_over {
+            mouse::Interaction::Pointer
+        } else {
+            mouse::Interaction::default()
+        }
+    }
+
+    fn draw(
+        &self,
+        _state: &Tree,
+        renderer: &mut crate::Renderer,
+        theme: &crate::Theme,
+        _style: &renderer::Style,
+        layout: Layout<'_>,
+        _cursor: mouse::Cursor,
+        viewport: &Rectangle,
+    ) {
+        let appearance = theme.appearance(&());
+        let bounds = layout.bounds();
+
+        let text_size = self
+            .text_size
+            .unwrap_or_else(|| text::Renderer::default_size(renderer));
+        let option_height = f32::from(self.text_line_height.to_absolute(Pixels(text_size)))
+            + self.padding.vertical();
+
+        let offset = viewport.y - bounds.y;
+        let start = (offset / option_height) as usize;
+        let end = ((offset + viewport.height) / option_height).ceil() as usize;
+
+        let visible_options = &self.options[start..end.min(self.options.len())];
+
+        for (i, option) in visible_options.iter().enumerate() {
+            let i = start + i;
+
+            let bounds = Rectangle {
+                x: bounds.x,
+                y: bounds.y + (option_height * i as f32),
+                width: bounds.width,
+                height: option_height,
+            };
+
+            let (color, font) = if self.selected_option == Some(i) {
+                let item_x = bounds.x + appearance.border_width;
+                let item_width = bounds.width - appearance.border_width * 2.0;
+
+                renderer.fill_quad(
+                    renderer::Quad {
+                        bounds: Rectangle {
+                            x: item_x,
+                            width: item_width,
+                            ..bounds
+                        },
+                        border_color: Color::TRANSPARENT,
+                        border_width: 0.0,
+                        border_radius: appearance.border_radius,
+                    },
+                    appearance.selected_background,
+                );
+
+                if let Some(handle) = self.selected_icon.clone() {
+                    svg::Renderer::draw(
+                        renderer,
+                        handle,
+                        Some(appearance.selected_text_color),
+                        Rectangle {
+                            x: item_x + item_width - 16.0 - 8.0,
+                            y: bounds.y + (bounds.height / 2.0 - 8.0),
+                            width: 16.0,
+                            height: 16.0,
+                        },
+                    );
+                }
+
+                (appearance.selected_text_color, crate::font::FONT_SEMIBOLD)
+            } else if *self.hovered_option == Some(i) {
+                let item_x = bounds.x + appearance.border_width;
+                let item_width = bounds.width - appearance.border_width * 2.0;
+
+                renderer.fill_quad(
+                    renderer::Quad {
+                        bounds: Rectangle {
+                            x: item_x,
+                            width: item_width,
+                            ..bounds
+                        },
+                        border_color: Color::TRANSPARENT,
+                        border_width: 0.0,
+                        border_radius: appearance.border_radius,
+                    },
+                    appearance.hovered_background,
+                );
+
+                (appearance.hovered_text_color, crate::font::FONT)
+            } else {
+                (appearance.text_color, crate::font::FONT)
+            };
+
+            text::Renderer::fill_text(
+                renderer,
+                Text {
+                    content: option.as_ref(),
+                    bounds: Rectangle {
+                        x: bounds.x + self.padding.left,
+                        y: bounds.center_y(),
+                        width: f32::INFINITY,
+                        ..bounds
+                    },
+                    size: text_size,
+                    line_height: self.text_line_height,
+                    font,
+                    color,
+                    horizontal_alignment: alignment::Horizontal::Left,
+                    vertical_alignment: alignment::Vertical::Center,
+                    shaping: text::Shaping::Advanced,
+                },
+            );
+        }
+    }
+}
+
+impl<'a, S: AsRef<str>, Message: 'a> From<List<'a, S, Message>>
+    for Element<'a, Message, crate::Renderer>
+{
+    fn from(list: List<'a, S, Message>) -> Self {
+        Element::new(list)
+    }
+}

src/widget/dropdown/mod.rs

@@ -0,0 +1,17 @@
+// Copyright 2023 System76 <info@system76.com>
+// Copyright 2019 Héctor Ramón, Iced contributors
+// SPDX-License-Identifier: MPL-2.0 AND MIT
+
+pub mod menu;
+pub use menu::Menu;
+
+mod widget;
+pub use widget::*;
+
+pub fn dropdown<'a, S: AsRef<str>, Message: 'a>(
+    selections: &'a [S],
+    selected: Option<usize>,
+    on_selected: impl Fn(usize) -> Message + 'a,
+) -> Dropdown<'a, S, Message> {
+    Dropdown::new(selections, selected, on_selected)
+}

src/widget/dropdown/widget.rs

@@ -0,0 +1,490 @@
+// Copyright 2023 System76 <info@system76.com>
+// Copyright 2019 Héctor Ramón, Iced contributors
+// SPDX-License-Identifier: MPL-2.0 AND MIT
+
+use super::menu::{self, Menu};
+use crate::widget::icon;
+use derive_setters::Setters;
+use iced_core::event::{self, Event};
+use iced_core::text::{self, Text};
+use iced_core::widget::tree::{self, Tree};
+use iced_core::{alignment, keyboard, layout, mouse, overlay, renderer, svg, touch};
+use iced_core::{Clipboard, Layout, Length, Padding, Pixels, Rectangle, Shell, Size, Widget};
+use std::ffi::OsStr;
+
+pub use iced_widget::style::pick_list::{Appearance, StyleSheet};
+
+/// A widget for selecting a single value from a list of selections.
+#[derive(Setters)]
+pub struct Dropdown<'a, S: AsRef<str>, Message> {
+    #[setters(skip)]
+    on_selected: Box<dyn Fn(usize) -> Message + 'a>,
+    #[setters(skip)]
+    selections: &'a [S],
+    #[setters(skip)]
+    selected: Option<usize>,
+    #[setters(into)]
+    width: Length,
+    gap: f32,
+    #[setters(into)]
+    padding: Padding,
+    #[setters(strip_option)]
+    text_size: Option<f32>,
+    text_line_height: text::LineHeight,
+    #[setters(strip_option)]
+    font: Option<crate::font::Font>,
+}
+
+impl<'a, S: AsRef<str>, Message> Dropdown<'a, S, Message> {
+    /// The default gap.
+    pub const DEFAULT_GAP: f32 = 4.0;
+
+    /// The default padding.
+    pub const DEFAULT_PADDING: Padding = Padding::new(8.0);
+
+    /// Creates a new [`Dropdown`] with the given list of selections, the current
+    /// selected value, and the message to produce when an option is selected.
+    pub fn new(
+        selections: &'a [S],
+        selected: Option<usize>,
+        on_selected: impl Fn(usize) -> Message + 'a,
+    ) -> Self {
+        Self {
+            on_selected: Box::new(on_selected),
+            selections,
+            selected,
+            width: Length::Shrink,
+            gap: Self::DEFAULT_GAP,
+            padding: Self::DEFAULT_PADDING,
+            text_size: None,
+            text_line_height: text::LineHeight::Relative(1.2),
+            font: None,
+        }
+    }
+}
+
+impl<'a, S: AsRef<str>, Message: 'a> Widget<Message, crate::Renderer> for Dropdown<'a, S, Message> {
+    fn tag(&self) -> tree::Tag {
+        tree::Tag::of::<State>()
+    }
+
+    fn state(&self) -> tree::State {
+        tree::State::new(State::new())
+    }
+
+    fn width(&self) -> Length {
+        self.width
+    }
+
+    fn height(&self) -> Length {
+        Length::Shrink
+    }
+
+    fn layout(&self, renderer: &crate::Renderer, limits: &layout::Limits) -> layout::Node {
+        layout(
+            renderer,
+            limits,
+            self.width,
+            self.gap,
+            self.padding,
+            self.text_size.unwrap_or(14.0),
+            self.text_line_height,
+            self.font,
+            self.selected
+                .and_then(|id| self.selections.get(id))
+                .map(AsRef::as_ref),
+        )
+    }
+
+    fn on_event(
+        &mut self,
+        tree: &mut Tree,
+        event: Event,
+        layout: Layout<'_>,
+        cursor: mouse::Cursor,
+        _renderer: &crate::Renderer,
+        _clipboard: &mut dyn Clipboard,
+        shell: &mut Shell<'_, Message>,
+        _viewport: &Rectangle,
+    ) -> event::Status {
+        update(
+            &event,
+            layout,
+            cursor,
+            shell,
+            self.on_selected.as_ref(),
+            self.selected,
+            self.selections,
+            || tree.state.downcast_mut::<State>(),
+        )
+    }
+
+    fn mouse_interaction(
+        &self,
+        _tree: &Tree,
+        layout: Layout<'_>,
+        cursor: mouse::Cursor,
+        _viewport: &Rectangle,
+        _renderer: &crate::Renderer,
+    ) -> mouse::Interaction {
+        mouse_interaction(layout, cursor)
+    }
+
+    fn draw(
+        &self,
+        tree: &Tree,
+        renderer: &mut crate::Renderer,
+        theme: &crate::Theme,
+        _style: &iced_core::renderer::Style,
+        layout: Layout<'_>,
+        cursor: mouse::Cursor,
+        _viewport: &Rectangle,
+    ) {
+        let font = self
+            .font
+            .unwrap_or_else(|| text::Renderer::default_font(renderer));
+        draw(
+            renderer,
+            theme,
+            layout,
+            cursor,
+            self.gap,
+            self.padding,
+            self.text_size,
+            self.text_line_height,
+            font,
+            self.selected.and_then(|id| self.selections.get(id)),
+            tree.state.downcast_ref::<State>(),
+        );
+    }
+
+    fn overlay<'b>(
+        &'b mut self,
+        tree: &'b mut Tree,
+        layout: Layout<'_>,
+        renderer: &crate::Renderer,
+    ) -> Option<overlay::Element<'b, Message, crate::Renderer>> {
+        let state = tree.state.downcast_mut::<State>();
+
+        overlay(
+            layout,
+            renderer,
+            state,
+            self.gap,
+            self.padding,
+            self.text_size.unwrap_or(14.0),
+            self.font,
+            self.selections,
+            self.selected,
+            &self.on_selected,
+        )
+    }
+}
+
+impl<'a, S: AsRef<str>, Message: 'a> From<Dropdown<'a, S, Message>>
+    for crate::Element<'a, Message>
+{
+    fn from(pick_list: Dropdown<'a, S, Message>) -> Self {
+        Self::new(pick_list)
+    }
+}
+
+/// The local state of a [`Dropdown`].
+#[derive(Debug)]
+pub struct State {
+    icon: Option<svg::Handle>,
+    menu: menu::State,
+    keyboard_modifiers: keyboard::Modifiers,
+    is_open: bool,
+    hovered_option: Option<usize>,
+}
+
+impl State {
+    /// Creates a new [`State`] for a [`Dropdown`].
+    pub fn new() -> Self {
+        Self {
+            icon: match icon::from_name("pan-down-symbolic").size(16).handle().data {
+                icon::Data::Name(named) => named
+                    .path()
+                    .filter(|path| path.extension().is_some_and(|ext| ext == OsStr::new("svg")))
+                    .map(iced_core::svg::Handle::from_path),
+                icon::Data::Svg(handle) => Some(handle),
+                icon::Data::Image(_) => None,
+            },
+            menu: menu::State::default(),
+            keyboard_modifiers: keyboard::Modifiers::default(),
+            is_open: false,
+            hovered_option: None,
+        }
+    }
+}
+
+impl Default for State {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+/// Computes the layout of a [`Dropdown`].
+#[allow(clippy::too_many_arguments)]
+pub fn layout(
+    renderer: &crate::Renderer,
+    limits: &layout::Limits,
+    width: Length,
+    gap: f32,
+    padding: Padding,
+    text_size: f32,
+    text_line_height: text::LineHeight,
+    font: Option<crate::font::Font>,
+    selection: Option<&str>,
+) -> layout::Node {
+    use std::f32;
+
+    let limits = limits.width(width).height(Length::Shrink).pad(padding);
+
+    let max_width = match width {
+        Length::Shrink => {
+            let measure = |label: &str| -> f32 {
+                let width = text::Renderer::measure_width(
+                    renderer,
+                    label,
+                    text_size,
+                    font.unwrap_or_else(|| text::Renderer::default_font(renderer)),
+                    text::Shaping::Advanced,
+                );
+
+                width.round()
+            };
+
+            selection.map(measure).unwrap_or_default()
+        }
+        _ => 0.0,
+    };
+
+    let size = {
+        let intrinsic = Size::new(
+            max_width + gap + 16.0,
+            f32::from(text_line_height.to_absolute(Pixels(text_size))),
+        );
+
+        limits.resolve(intrinsic).pad(padding)
+    };
+
+    layout::Node::new(size)
+}
+
+/// Processes an [`Event`] and updates the [`State`] of a [`Dropdown`]
+/// accordingly.
+#[allow(clippy::too_many_arguments)]
+pub fn update<'a, S: AsRef<str>, Message>(
+    event: &Event,
+    layout: Layout<'_>,
+    cursor: mouse::Cursor,
+    shell: &mut Shell<'_, Message>,
+    on_selected: &dyn Fn(usize) -> Message,
+    selected: Option<usize>,
+    selections: &[S],
+    state: impl FnOnce() -> &'a mut State,
+) -> event::Status {
+    match event {
+        Event::Mouse(mouse::Event::ButtonPressed(mouse::Button::Left))
+        | Event::Touch(touch::Event::FingerPressed { .. }) => {
+            let state = state();
+
+            if state.is_open {
+                // Event wasn't processed by overlay, so cursor was clicked either outside it's
+                // bounds or on the drop-down, either way we close the overlay.
+                state.is_open = false;
+
+                event::Status::Captured
+            } else if cursor.is_over(layout.bounds()) {
+                state.is_open = true;
+                state.hovered_option = selected;
+
+                event::Status::Captured
+            } else {
+                event::Status::Ignored
+            }
+        }
+        Event::Mouse(mouse::Event::WheelScrolled {
+            delta: mouse::ScrollDelta::Lines { .. },
+        }) => {
+            let state = state();
+
+            if state.keyboard_modifiers.command()
+                && cursor.is_over(layout.bounds())
+                && !state.is_open
+            {
+                let next_index = selected.map(|index| index + 1).unwrap_or_default();
+
+                if selections.len() < next_index {
+                    shell.publish((on_selected)(next_index));
+                }
+
+                event::Status::Captured
+            } else {
+                event::Status::Ignored
+            }
+        }
+        Event::Keyboard(keyboard::Event::ModifiersChanged(modifiers)) => {
+            let state = state();
+
+            state.keyboard_modifiers = *modifiers;
+
+            event::Status::Ignored
+        }
+        _ => event::Status::Ignored,
+    }
+}
+
+/// Returns the current [`mouse::Interaction`] of a [`Dropdown`].
+#[must_use]
+pub fn mouse_interaction(layout: Layout<'_>, cursor: mouse::Cursor) -> mouse::Interaction {
+    let bounds = layout.bounds();
+    let is_mouse_over = cursor.is_over(bounds);
+
+    if is_mouse_over {
+        mouse::Interaction::Pointer
+    } else {
+        mouse::Interaction::default()
+    }
+}
+
+/// Returns the current overlay of a [`Dropdown`].
+#[allow(clippy::too_many_arguments)]
+pub fn overlay<'a, S: AsRef<str>, Message: 'a>(
+    layout: Layout<'_>,
+    renderer: &crate::Renderer,
+    state: &'a mut State,
+    gap: f32,
+    padding: Padding,
+    text_size: f32,
+    font: Option<crate::font::Font>,
+    selections: &'a [S],
+    selected_option: Option<usize>,
+    on_selected: &'a dyn Fn(usize) -> Message,
+) -> Option<overlay::Element<'a, Message, crate::Renderer>> {
+    if state.is_open {
+        let bounds = layout.bounds();
+
+        let menu = Menu::new(
+            &mut state.menu,
+            selections,
+            &mut state.hovered_option,
+            selected_option,
+            |option| {
+                state.is_open = false;
+
+                (on_selected)(option)
+            },
+            None,
+        )
+        .width({
+            let measure = |label: &str| -> f32 {
+                let width = text::Renderer::measure_width(
+                    renderer,
+                    label,
+                    text_size,
+                    crate::font::FONT,
+                    text::Shaping::Advanced,
+                );
+
+                width.round()
+            };
+
+            selections
+                .iter()
+                .map(|label| measure(label.as_ref()))
+                .fold(0.0, |next, current| current.max(next))
+                + gap
+                + 16.0
+                + padding.horizontal()
+                + padding.horizontal()
+        })
+        .padding(padding)
+        .text_size(text_size);
+
+        let mut position = layout.position();
+        position.x -= padding.left;
+
+        Some(menu.overlay(position, bounds.height))
+    } else {
+        None
+    }
+}
+
+/// Draws a [`Dropdown`].
+#[allow(clippy::too_many_arguments)]
+pub fn draw<'a, S>(
+    renderer: &mut crate::Renderer,
+    theme: &crate::Theme,
+    layout: Layout<'_>,
+    cursor: mouse::Cursor,
+    gap: f32,
+    padding: Padding,
+    text_size: Option<f32>,
+    text_line_height: text::LineHeight,
+    font: crate::font::Font,
+    selected: Option<&'a S>,
+    state: &'a State,
+) where
+    S: AsRef<str> + 'a,
+{
+    let bounds = layout.bounds();
+    let is_mouse_over = cursor.is_over(bounds);
+
+    let style = if is_mouse_over {
+        theme.hovered(&())
+    } else {
+        theme.active(&())
+    };
+
+    iced_core::Renderer::fill_quad(
+        renderer,
+        renderer::Quad {
+            bounds,
+            border_color: style.border_color,
+            border_width: style.border_width,
+            border_radius: style.border_radius,
+        },
+        style.background,
+    );
+
+    if let Some(handle) = state.icon.clone() {
+        svg::Renderer::draw(
+            renderer,
+            handle,
+            Some(style.text_color),
+            Rectangle {
+                x: bounds.x + bounds.width - gap - 16.0,
+                y: bounds.center_y() - 8.0,
+                width: 16.0,
+                height: 16.0,
+            },
+        );
+    }
+
+    if let Some(content) = selected.map(AsRef::as_ref) {
+        let text_size = text_size.unwrap_or_else(|| text::Renderer::default_size(renderer));
+
+        text::Renderer::fill_text(
+            renderer,
+            Text {
+                content,
+                size: text_size,
+                line_height: text_line_height,
+                font,
+                color: style.text_color,
+                bounds: Rectangle {
+                    x: bounds.x + padding.left,
+                    y: bounds.center_y(),
+                    width: bounds.width - padding.horizontal(),
+                    height: f32::from(text_line_height.to_absolute(Pixels(text_size))),
+                },
+                horizontal_alignment: alignment::Horizontal::Left,
+                vertical_alignment: alignment::Vertical::Center,
+                shaping: text::Shaping::Advanced,
+            },
+        );
+    }
+}

src/widget/mod.rs

@@ -12,7 +12,6 @@ pub use iced::widget::{image, Image};
 pub use iced::widget::{lazy, Lazy};
 pub use iced::widget::{mouse_area, MouseArea};
 pub use iced::widget::{pane_grid, PaneGrid};
-pub use iced::widget::{pick_list, PickList};
 pub use iced::widget::{progress_bar, ProgressBar};
 pub use iced::widget::{radio, Radio};
 pub use iced::widget::{responsive, Responsive};
@@ -106,6 +105,9 @@ pub mod divider {
     }
 }
 
+pub mod dropdown;
+pub use dropdown::{dropdown, Dropdown};
+
 pub mod flex_row;
 pub use flex_row::{flex_row, FlexRow};