tea dropdown

tea-dropdown.erb

<div 
     class="space-y-1" 
     x-data="Components.select({links: [<%= all_items_links %>], value: <%= selected_index %>, selected: <%= selected_index %> %>)" 
     x-init="init()">
  <% if hide_label %>
    <label 
           class="sr-only" 
           id="<%= random_id_prefix %>-listbox-label">
      <%= label %>
    </label>
  <% else %>
    <label 
           class="block text-base leading-5 font-medium text-gray-700 whitespace-no-wrap" 
           id="<%= random_id_prefix %>-listbox-label">
      <%= label %>
    </label>
  <% end %>
  <div class="relative">
    <span class="inline-block w-full rounded-md shadow-sm">
      <button 
              :aria-expanded="open.toString()" 
              @click="onButtonClick()" 
              @keydown.arrow-down.stop.prevent="onButtonClick()" 
              @keydown.arrow-up.stop.prevent="onButtonClick()" 
              aria-haspopup="listbox" 
              aria-labelledby="<%= random_id_prefix %>-listbox-label" 
              class="cursor-default relative w-full rounded-md border border-gray-300 bg-white pl-3 pr-10 py-3 text-base text-left text-black focus:shadow-outline-blue focus:border-blue-300 focus:bg-white transition ease-in-out duration-150 sm:text-base sm:leading-5 hover:bg-white" 
              data-hotkey="<%= hotkey %>" 
              type="button" 
              x-ref="button">
        <div class="flex items-center space-x-3">
          <span 
                class="block truncate" 
                style="max-width: 150px;" 
                x-text="[<%= all_items_texts %>][value]"></span>
        </div>
        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
          <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewbox="0 0 20 20">
            <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
          </svg>
        </span>
      </button>
    </span>
    <div 
         @click.away="open = false" 
         class="<%= width %> <%= alignment_x %>-0 absolute z-20 mt-1 rounded-md bg-white shadow-lg" 
         style="<%= alignment_y %>: 40px;" 
         x-cloak="<%= true %>" 
         x-show="open" x-transition:leave="transition ease-in duration-100" 
         x-transition:leave-end="opacity-0" 
         x-transition:leave-start="opacity-100">
      <ul 
          :aria-activedescendant="activeDescendant" 
          @keydown.arrow-down.prevent="onArrowDown()" 
          @keydown.arrow-up.prevent="onArrowUp()" 
          @keydown.enter.stop.prevent="onOptionSelect()" 
          @keydown.escape="onEscape()" 
          @keydown.j.prevent="onArrowDown()" 
          @keydown.k.prevent="onArrowUp()" 
          @keydown.space.stop.prevent="onOptionSelect()" 
          aria-labelledby="listbox-label" class="max-h-56 rounded-md m-0 py-1 text-base leading-6 shadow-xs overflow-auto focus:outline-none sm:text-base sm:leading-5" 
          role="listbox" 
          style="max-height: 420px;" 
          tabindex="-1" 
          x-ref="listbox">
        <% items.each_with_index do |item, index| %>
          <% if item[:type] == 'item' %>
            <li 
                :class="{ 'text-purple-700 bg-purple-100': selected === <%= index %>, 'text-gray-900': !(selected === <%= index %>)  %>" 
                @click="choose(<%= index %>)"
                @mouseenter="selected = <%= index %>" 
                @mouseleave="selected = null" 
                class="cursor-default select-none relative py-3 pl-4 pr-10 text-gray-900" 
                id="<%= random_id_prefix %>-listbox-item-<%= index %>" 
                role="option">
              <div class="flex items-center space-x-3">
                <span 
                      :class="{ 'font-semibold': value === <%= index %>, 'text-purple-700': value === <%= index %>, 'font-normal': !(value === <%= index %>)  %>" 
                      class="block truncate font-normal ml-6" 
                      x-state:off="Not Selected" 
                      x-state:on="Selected">
                  <%= item[:text] %>
                </span>
              </div>
            </li>
          <% end %>
        <% end %>
      </ul>
    </div>
  </div>
</div>