basecoat/src/nunjucks/select.njk

{#
  Renders a select or combobox component.

  @param id {string} [optional] - Unique identifier for the select component.
  @param selected {string} [optional] - The initially selected value.
  @param name {string} [optional] - The name attribute for the hidden input storing the selected value.
  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
  @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
  @param popover_attrs {object} [optional] - Additional HTML attributes for the popover content div.
  @param listbox_attrs {object} [optional] - Additional HTML attributes for the listbox div.
  @param input_attrs {object} [optional] - Additional HTML attributes for the hidden input.
  @param search_placeholder {string} [optional] [default="Search entries..."] - Placeholder text for the search input (combobox only).
  @param is_combobox {boolean} [optional] [default=false] - Renders a combobox with search functionality if true.
#}
{% macro select(
  id=None,
  selected=None,
  name=None,
  items=None,
  main_attrs={},
  trigger_attrs={},
  popover_attrs={},
  listbox_attrs={},
  input_attrs={},
  search_placeholder="Search entries...",
  is_combobox=false
) %}
{% set id = id or ("select-" + (range(100000, 999999) | random | string)) %}

{% set first_option = [] %}
{% set selected_option = [] %}

{% if items %}
  {% for item in items %}
    {% if item.type == "group" %}
      {% for sub_item in item.items %}
        {% if not first_option[0] %}
          {% set first_option = (first_option.push(sub_item), first_option) %}
        {% endif %}
        {% if selected and sub_item.value == selected and not selected_option[0] %}
          {% set selected_option = (selected_option.push(sub_item), selected_option) %}
        {% endif %}
      {% endfor %}
    {% else %}
      {% if not first_option[0] %}
        {% set first_option = (first_option.push(item), first_option) %}
      {% endif %}
      {% if selected and item.value == selected and not selected_option[0] %}
        {% set selected_option = (selected_option.push(item), selected_option) %}
      {% endif %}
    {% endif %}
  {% endfor %}
{% endif %}

{% set default_option = selected_option[0] or first_option[0] or None %}

<div
  id="{{ id }}"
  class="select {{ main_attrs.class }}"
  {% for key, value in main_attrs %}
    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
  {% endfor %}
>
  <button
    type="button"
    class="btn-outline justify-between font-normal {{ trigger_attrs.class }}"
    id="{{ id }}-trigger"
    aria-haspopup="listbox"
    aria-expanded="false"
    aria-controls="{{ id }}-listbox"
    {% for key, value in trigger_attrs %}
      {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
    {% endfor %}
  >
    <span class="truncate">{{ default_option.label }}</span>
    {% if is_combobox %}
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down text-muted-foreground opacity-50 shrink-0"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
    {% else %}
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down text-muted-foreground opacity-50 shrink-0"><path d="m6 9 6 6 6-6"/></svg>
    {% endif %}
  </button>
  <div
    id="{{ id }}-popover"
    data-popover
    aria-hidden="true"
    {% for key, value in popover_attrs %}
      {{ key }}="{{ value }}"
    {% endfor %}
  >
    {% if is_combobox %}
    <header>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
      <input
        type="text"
        value=""
        placeholder="{{ search_placeholder }}"
        autocomplete="off"
        autocorrect="off"
        spellcheck="false"
        aria-autocomplete="list"
        role="combobox"
        aria-expanded="false"
        aria-controls="{{ id }}-listbox"
        aria-labelledby="{{ id }}-trigger"
      >
    </header>
    {% endif %}
    <div
      role="listbox"
      id="{{ id }}-listbox"
      aria-orientation="vertical"
      aria-labelledby="{{ id }}-trigger"
      {% for key, value in listbox_attrs %}
        {{ key }}="{{ value }}"
      {% endfor %}
    >
      {% if items and items.length > 0 %}
        {{ render_select_items(items, default_option.value, id ~ "-items" if id else "items") }}
      {% else %}
        {{ caller() if caller }}
      {% endif %}
    </div>
  </div>
  <input
    type="hidden"
    name="{{ name or id ~ '-value' }}"
    value="{{ (default_option.value if default_option) or '' }}"
    {% for key, value in input_attrs %}
      {% if key != 'name' and key != 'value' %}{{ key }}="{{ value }}"{% endif %}
    {% endfor %}
  >
</div>
{% endmacro %}

{# 
  Renders a list of items for the select component.

  @param items {array} - The array of items to render.
  @param parent_id_prefix {string} [optional] - The prefix for the item id.
#}
{% macro render_select_items(items, selected, parent_id_prefix="items") %}
  {% for item in items %}
    {% set item_id = parent_id_prefix ~ "-" ~ loop.index %}
    {% if item.type == "group" %}
      {% set group_label_id = item.id if item.id else "group-label-" + item_id %}
      <div
        role="group"
        aria-labelledby="{{ group_label_id }}"
        {% if item.attrs %}
          {% for key, value in item.attrs %}
            {{ key }}="{{ value }}"
          {% endfor %}
        {% endif %}
      >
        <div role="heading" id="{{ group_label_id }}">{{ item.label }}</div>
        {{ render_select_items(item.items, selected, item_id) if item.items }}
      </div>
    {% elif item.type == "separator" %}
      <hr role="separator" />
    {% elif item.type == "item" or not item.type %}
      <div
        id="{{ item_id }}"
        role="option"
        data-value="{{ item.value }}"
        {% if selected == item.value %}aria-selected="true"{% endif %}
        {% if item.attrs %}
          {% for key, value in item.attrs %}
            {{ key }}="{{ value }}"
          {% endfor %}
        {% endif %}
      >
        {{ item.label | safe }}
      </div>
    {% endif %}
  {% endfor %}
{% endmacro %}