Untitled

<%= tag.div do %>
  <%= @form.label @field, class: "font-medium mb-2 block" %>

  <%= render Shared::Dropdown::Component.new(
    id: dropdown_id,
    positioning: "left-0 w-full",
    prevent_hide_on_click: true,
    data: {
      controller: "components--dropdown",
      action: "click@document->components--dropdown#hideOnOutsideClick"
    }
  ) do |dropdown| %>
    <% dropdown.with_trigger do %>
      <div class="w-full border border-gray-300 rounded-md px-3 py-2 bg-white cursor-pointer flex items-center justify-between hover:border-gray-400 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
        <span class="text-sm text-gray-700 flex-1 truncate"><%= display_text %></span>

      </div>
    <% end %>

    <% dropdown.with_body do %>
      <div class="max-h-64 overflow-y-auto p-2">
        <div class="space-y-2">
          <% @collection.each do |item| %>
            <%= tag.label for: field_id_for(item), class: "cursor-pointer flex items-center px-2 py-1 hover:bg-gray-50 rounded" do %>
              <%= check_box_tag(
                field_name,
                item.id,
                checked?(item),
                id: field_id_for(item),
                class: "mr-2",
                data: {
                  action: "change->components--dropdown#preventHide"
                }
              ) %>

              <%= tag.div(
                item.send(@text_method),
                title: item.send(@text_method),
                class: "pr-2 text-sm flex-1"
              ) %>
            <% end %>
          <% end %>
        </div>
      </div>
    <% end %>
  <% end %>
<% end %>