Raxol.UI.Components.Input.SelectList (Raxol v0.3.0)

View Source

A component that allows users to select an option from a list.

Features:

  • Single or multiple selections
  • Robust keyboard navigation with stateful scrolling
  • Search/filtering capabilities
  • Accessibility support
  • Custom styling and theming
  • Pagination for very large lists

Summary

Types

option()

@type option() :: {String.t(), any()}

options()

@type options() :: [option()]

props()

@type props() :: %{
  optional(:id) => String.t(),
  :options => options(),
  optional(:label) => String.t(),
  optional(:on_select) => (any() -> any()),
  optional(:on_cancel) => (-> any()) | nil,
  optional(:on_change) => (any() -> any()) | nil,
  optional(:on_focus) => (integer() -> any()) | nil,
  optional(:theme) => map(),
  optional(:style) => map(),
  optional(:max_height) => integer() | nil,
  optional(:enable_search) => boolean(),
  optional(:multiple) => boolean(),
  optional(:searchable_fields) => [atom()] | nil,
  optional(:placeholder) => String.t(),
  optional(:empty_message) => String.t(),
  optional(:show_pagination) => boolean()
}

state()

@type state() :: %{
  id: String.t() | nil,
  options: options(),
  label: String.t() | nil,
  on_select: (any() -> any()) | nil,
  on_cancel: (-> any()) | nil,
  on_change: (any() -> any()) | nil,
  on_focus: (integer() -> any()) | nil,
  theme: map() | nil,
  style: map() | nil,
  max_height: integer() | nil,
  enable_search: boolean(),
  multiple: boolean(),
  searchable_fields: [atom()] | nil,
  placeholder: String.t(),
  empty_message: String.t(),
  show_pagination: boolean(),
  focused_index: integer(),
  scroll_offset: integer(),
  search_text: String.t(),
  filtered_options: options() | nil,
  is_filtering: boolean(),
  selected_indices: MapSet.t(),
  is_search_focused: boolean(),
  page_size: integer(),
  current_page: integer(),
  has_focus: boolean(),
  visible_height: integer() | nil,
  last_key_time: integer() | nil,
  search_buffer: String.t(),
  search_timer: reference() | nil
}