quicksilver_ui 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 98070a613f6cd27f56a14c30d26f7a769f92e3434dcb38ec980d6af9f99ead6b
-  data.tar.gz: b54c5beab648c18a73c6a916bacf70c5391c88ec0c1cd483ca84f8ea431b82c8
+  metadata.gz: dd50a32b96fa881fd2feedfb1ecfa23e696c69647c03ba16ab4a43a97a87aa3e
+  data.tar.gz: b288dd0d7c928899779d461654ea5b8fef74429b92c7cc095ab3e98c4b7bf0b1
 SHA512:
-  metadata.gz: 634ea19a66852a9bd502eaeaea72edf39fab4c6c1d6b989b51e32d56e0562b8ebfc92dd8d7b226760556730c0c9788b5d290cf1764383f02fdb3c5528fc4cd89
-  data.tar.gz: a7ae72ff22c80a1ce740901c6accbe471e05ed59e15cc469ea60b6208d7ad30aed554a246fbc8cc2af3eaa5419f3ee9a80a6fe3782d9d4a188aac47604ae66a5
+  metadata.gz: 37aeef541b3edd00ad012bac5a8a63f4c4550101dfdfa181e4dc8b9974b82302f3e7530e0d9f3c23170f41c93e34c8421d1146105485d25afefeea56a8f20290
+  data.tar.gz: cacdd0405dd303b4bd492f0551dc7fe763605171c280f96c3ae4998f3249ac509d5f3e6b303f23c36374640c8e30411cc3e473bcb7de68ded04fe80d941198f0

data/app/helpers/app_form_builder.rb

@@ -91,4 +91,8 @@ class AppFormBuilder < ActionView::Helpers::FormBuilder
   def radio_button(method, tag_value, options = {})
     render Form::RadioButton.new(form: self, tag_value:, method:, **options)
   end
+
+  def combobox(method, choices, options = {})
+    render Form::Combobox.new(form: self, method:, choices:, **options)
+  end
 end

data/app/javascript/controllers/combobox_controller.js

@@ -0,0 +1,467 @@
+import { Controller } from "@hotwired/stimulus"
+import { useDebounce } from "stimulus-use"
+import { useTransition } from "stimulus-use"
+import { useKeyboardNavigation } from "mixins/use_keyboard_navigation"
+import { useFloatingUI } from "mixins/use_floating_ui"
+import { offset, flip, shift } from "@floating-ui/dom"
+
+export default class extends Controller {
+  static targets = ["input", "menu", "choice", "selectedItem", "hiddenInput",
+    "selectedItemsContainer", "tagTemplate", "choicesContainer", "helpText",
+    "searching", "noResults", "allChoicesSelected", "turboFrame"]
+  static debounces = ["search"]
+  static values = {
+    placement: { type: String, default: "bottom-start" },
+    shiftPadding: { type: Number, default: 8 },
+    offset: { type: Number, default: 4 },
+    multiple: { type: Boolean, default: false },
+    busy: { type: Boolean, default: false },
+    open: { type: Boolean, default: false },
+    inputName: String,
+    searchUrl: String
+  }
+
+  initialize() {
+    useDebounce(this)
+    useTransition(this, {
+      element: this.menuTarget,
+      hiddenClass: "hidden",
+    })
+    useKeyboardNavigation(this, this.inputTarget)
+    useFloatingUI(this, this.inputTarget, this.menuTarget, this.positioningOptions)
+  }
+
+  connect() {
+    this.hideAlreadySelectedChoices()
+  }
+
+  disconnect() {
+    this.teardown()
+  }
+
+  teardown() {
+    if (this.autoUpdateCleanup) {
+      this.autoUpdateCleanup()
+      this.autoUpdateCleanup = null
+    }
+  }
+
+  async search() {
+    const searchValue = this.inputTarget.value.trim()
+
+    if (this.searchUrlValue) {
+      await this.performAsyncSearch(searchValue)
+    } else {
+      this.performClientSearch(searchValue)
+    }
+  }
+
+  async performAsyncSearch(searchValue) {
+    if (searchValue.length === 0) {
+      this.handleEmptySearch()
+      return
+    }
+
+    this.prepareAsyncSearch()
+
+    const response = await this.makeSearchRequest(searchValue)
+    await this.handleSearchResponse(response)
+    this.finalizeAsyncSearch()
+  }
+
+  performClientSearch(searchValue) {
+    const hits = this.findMatchingChoices(searchValue)
+    this.updateChoiceVisibility(hits)
+    this.updateMenuAfterClientSearch()
+  }
+
+  handleEmptySearch() {
+    this.showHelpText()
+    this.hideTurboFrame()
+    this.actuallyShowMenu()
+  }
+
+  prepareAsyncSearch() {
+    this.hideTurboFrame()
+    this.showSearchingMessage()
+    this.actuallyShowMenu()
+    this.setBusyState(true)
+  }
+
+  async makeSearchRequest(searchValue) {
+    const url = this.buildSearchUrl(searchValue)
+
+    return await fetch(url, {
+      headers: {
+        'Accept': 'text/vnd.turbo-stream.html',
+        'X-Requested-With': 'XMLHttpRequest'
+      }
+    })
+  }
+
+  buildSearchUrl(searchValue) {
+    const url = new URL(this.searchUrlValue, window.location.origin)
+    url.searchParams.set('q', searchValue)
+
+    if (this.turboFrameTarget) {
+      url.searchParams.set('frame_id', this.turboFrameTarget.id)
+    }
+
+    if (this.multipleValue && this.selectedItemValues.length > 0) {
+      this.selectedItemValues.forEach(value => {
+        url.searchParams.append('selected[]', value)
+      })
+    }
+
+    return url
+  }
+
+  async handleSearchResponse(response) {
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    const turboStreamResponse = await response.text()
+
+    this.hideMessages()
+    this.showTurboFrame()
+    Turbo.renderStreamMessage(turboStreamResponse)
+  }
+
+  showNoResults() {
+    this.showNoResultsMessage()
+    this.actuallyShowMenu()
+  }
+
+  finalizeAsyncSearch() {
+    this.setBusyState(false)
+  }
+
+  findMatchingChoices(searchValue) {
+    if (searchValue === "") {
+      return this.choiceTargets
+    }
+
+    const searchTerms = this.getSearchTerms(searchValue)
+    return this.choiceTargets.filter(choice =>
+      this.choiceMatchesSearch(choice, searchTerms)
+    )
+  }
+
+  getSearchTerms(searchValue) {
+    return searchValue.toLowerCase().split(" ").filter(term => term.length > 0)
+  }
+
+  choiceMatchesSearch(choice, searchTerms) {
+    const choiceText = choice.textContent.trim().toLowerCase()
+    return searchTerms.some(term => choiceText.includes(term))
+  }
+
+  updateChoiceVisibility(matchingChoices) {
+    this.choiceTargets.forEach(choice => {
+      const isMatch = matchingChoices.includes(choice)
+      const isSelected = this.isChoiceSelected(choice)
+
+      if (isMatch && !isSelected) {
+        choice.classList.remove("hidden")
+      } else {
+        choice.classList.add("hidden")
+      }
+    })
+  }
+
+  updateMenuAfterClientSearch() {
+    if (this.visibleChoices.length > 0 && this.isInputFocused()) {
+      this.showMenu()
+    } else if (this.visibleChoices.length === 0) {
+      this.showNoResultsMessage()
+      this.actuallyShowMenu()
+    }
+  }
+
+  showMenu() {
+    this.openValue = true
+  }
+
+  actuallyShowMenu() {
+    this.clearHideTimeout()
+    this.enter()
+    this.showWithPositioning()
+  }
+
+  hideMenu() {
+    this.openValue = false
+  }
+
+  hideMenuWithDelay() {
+    this.hideTimeout = setTimeout(() => this.hideMenu(), 150)
+  }
+
+  shouldShowHelpText() {
+    return this.searchUrlValue && this.inputTarget.value.trim() === ""
+  }
+
+  shouldTriggerAsyncSearch() {
+    return this.searchUrlValue &&
+      this.visibleChoices.length === 0
+  }
+
+  clearHideTimeout() {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout)
+      this.hideTimeout = null
+    }
+  }
+
+  selectChoice(event) {
+    const choice = event.currentTarget
+    const value = choice.dataset.value
+    const displayValue = choice.textContent.trim()
+
+    if (this.multipleValue) {
+      this.handleMultipleSelection(value, displayValue)
+    } else {
+      this.handleSingleSelection(value, displayValue)
+    }
+  }
+
+  selectHighlighted() {
+    const visibleChoices = this.visibleChoices
+    if (!this.isValidHighlightIndex(visibleChoices)) return
+
+    const choice = visibleChoices[this.highlightedIndex]
+    const value = choice.dataset.value
+    const displayValue = choice.textContent.trim()
+
+    if (this.multipleValue) {
+      this.handleMultipleSelection(value, displayValue)
+    } else {
+      this.handleSingleSelection(value, displayValue)
+    }
+  }
+
+  handleMultipleSelection(value, displayValue) {
+    this.addSelection(value, displayValue)
+    this.hideSelectedChoiceFromResults(value)
+    this.inputTarget.focus()
+  }
+
+  handleSingleSelection(value, displayValue) {
+    this.inputTarget.value = displayValue
+    this.hiddenInputTarget.value = value
+    this.hideMenu()
+    this.inputTarget.focus()
+  }
+
+  addSelection(value, displayValue) {
+    if (this.isSelectionUnique(value)) {
+      let tag = this.createTagElement(value, displayValue)
+      this.selectedItemsContainerTarget.appendChild(tag)
+    }
+  }
+
+  hideAlreadySelectedChoices() {
+    if (!this.multipleValue) return
+
+    this.selectedItemValues.forEach(value => {
+      this.hideSelectedChoiceFromResults(value)
+    })
+  }
+
+  hideSelectedChoiceFromResults(value) {
+    const choice = this.choiceTargets.find(choice => choice.dataset.value === value)
+    if (choice) {
+      choice.classList.add("hidden")
+    }
+    if (this.choiceTargets.every(choice => choice.classList.contains("hidden"))) {
+      this.showAllChoicesSelectedMessage()
+    }
+  }
+
+  showChoiceInResults(value) {
+    const choice = this.choiceTargets.find(choice => choice.dataset.value === value)
+    if (choice && this.choiceMatchesCurrentSearch(choice)) {
+      choice.classList.remove("hidden")
+    }
+  }
+
+  choiceMatchesCurrentSearch(choice) {
+    const searchValue = this.inputTarget.value.trim()
+    if (!searchValue) return true
+
+    const searchTerms = this.getSearchTerms(searchValue)
+    return this.choiceMatchesSearch(choice, searchTerms)
+  }
+
+  isSelectionUnique(value) {
+    return !this.selectedItemValues.find(selectedValue => selectedValue === value)
+  }
+
+  isChoiceSelected(choice) {
+    return this.multipleValue &&
+      this.selectedItemValues.find(selectedValue => selectedValue === choice.dataset.value)
+  }
+
+  clearInput() {
+    this.inputTarget.value = ""
+  }
+
+  refocusAndSearch() {
+    setTimeout(() => {
+      this.search()
+      if (this.visibleChoices.length > 0) {
+        this.showMenu()
+      }
+    }, 10)
+    this.inputTarget.focus()
+  }
+
+  createTagElement(value, displayValue) {
+    if (!this.hasTagTemplateTarget) return null
+
+    const tag = this.cloneTagTemplate()
+    this.populateTagContent(tag, value, displayValue)
+    this.addHiddenInput(tag, value)
+
+    return tag
+  }
+
+  cloneTagTemplate() {
+    const tag = this.tagTemplateTarget.content.cloneNode(true).firstElementChild
+    tag.removeAttribute("data-combobox-target")
+    return tag
+  }
+
+  populateTagContent(tag, value, displayValue) {
+    const textSpan = tag.querySelector("span")
+    if (textSpan) {
+      textSpan.textContent = displayValue
+    }
+  }
+
+  addHiddenInput(tag, value) {
+    const hiddenInput = document.createElement("input")
+    hiddenInput.type = "hidden"
+    hiddenInput.name = this.inputNameValue
+    hiddenInput.value = value
+    tag.appendChild(hiddenInput)
+  }
+
+  preventBlur(event) {
+    event.preventDefault()
+  }
+
+  showHelpText() {
+    this.showMessage(this.helpTextTarget)
+  }
+
+  showSearchingMessage() {
+    this.showMessage(this.searchingTarget)
+  }
+
+  showNoResultsMessage() {
+    this.showMessage(this.noResultsTarget)
+  }
+
+  showAllChoicesSelectedMessage() {
+    this.showMessage(this.allChoicesSelectedTarget)
+  }
+
+  hideTurboFrame() {
+    if (this.hasTurboFrameTarget) {
+      this.turboFrameTarget.classList.add("hidden")
+    }
+  }
+
+  showTurboFrame() {
+    if (this.hasTurboFrameTarget) {
+      this.turboFrameTarget.classList.remove("hidden")
+    }
+  }
+
+  setBusyState(busy) {
+    if (busy) {
+      this.busyValue = true
+      this.inputTarget.setAttribute("aria-busy", "true")
+    } else {
+      this.busyValue = false
+      this.inputTarget.removeAttribute("aria-busy")
+    }
+  }
+
+  showMessage(target) {
+    this.hideMessages()
+    target.classList.remove("hidden")
+  }
+
+  hideMessages() {
+    this.messageTargets.forEach((messageTarget) => {
+      messageTarget.classList.add("hidden")
+    })
+  }
+
+  isInputFocused() {
+    return document.activeElement === this.inputTarget
+  }
+
+  openValueChanged(value) {
+    this.clearHideTimeout()
+
+    if (value) {
+      this.inputTarget.setAttribute("aria-expanded", "true")
+
+      if (this.shouldShowHelpText()) {
+        this.showHelpText()
+        this.actuallyShowMenu()
+        return
+      }
+
+      if (this.shouldTriggerAsyncSearch()) {
+        this.search()
+        return
+      }
+
+      if (this.visibleChoices.length === 0) {
+        return
+      }
+
+      this.actuallyShowMenu()
+    } else {
+      this.inputTarget.setAttribute("aria-expanded", "false")
+      this.leave()
+      this.hideWithPositioning()
+    }
+  }
+
+  get visibleChoices() {
+    return this.choiceTargets.filter(choice => !choice.classList.contains("hidden"))
+  }
+
+  get isMenuVisible() {
+    return !this.menuTarget.classList.contains("hidden")
+  }
+
+  get positioningOptions() {
+    return {
+      placement: this.placementValue,
+      middleware: [
+        offset(this.offsetValue),
+        flip(),
+        shift({ padding: this.shiftPaddingValue })
+      ]
+    }
+  }
+
+  get messageTargets() {
+    return [
+      this.helpTextTarget,
+      this.noResultsTarget,
+      this.searchingTarget,
+      this.allChoicesSelectedTarget
+    ]
+  }
+
+  get selectedItemValues() {
+    return this.selectedItemTargets.map(item => item.querySelector("input").value)
+  }
+}

data/app/javascript/mixins/use_keyboard_navigation.js

@@ -0,0 +1,142 @@
+/**
+ * useKeyboardNavigation stimulus mixin
+ *
+ * Adds keyboard navigation capabilities to a Stimulus controller for navigating through choices
+ * Requires the controller to have:
+ * - choiceTargets (array of selectable elements)
+ * - menuTarget (container to check visibility)
+ * - visibleChoices getter (filtered choices that are currently visible)
+ * - isMenuVisible getter (boolean for menu visibility)
+ * - showMenu() method
+ * - selectHighlighted() method (callback for selection)
+ * - hideMenu() method (callback for hiding menu)
+ */
+
+export const useKeyboardNavigation = (controller, input, options = {}) => {
+  const {
+    highlightClass = ["tw:bg-gray-200", "tw:text-gray-900"],
+    ariaSelected = "aria-selected",
+    scrollBehavior = { block: "nearest" }
+  } = options
+
+  controller.highlightedIndex = -1
+
+  const isValidHighlightIndex = (visibleChoices) => {
+    return controller.highlightedIndex >= 0 &&
+      controller.highlightedIndex < visibleChoices.length
+  }
+
+  const clearAllHighlights = () => {
+    controller.choiceTargets.forEach(choice => {
+      choice.classList.remove(...highlightClass)
+      choice.removeAttribute(ariaSelected)
+    })
+  }
+
+  const highlightCurrentChoice = () => {
+    const visibleChoices = controller.visibleChoices
+    if (isValidHighlightIndex(visibleChoices)) {
+      const choice = visibleChoices[controller.highlightedIndex]
+      choice.classList.add(...highlightClass)
+      choice.setAttribute(ariaSelected, "true")
+      choice.scrollIntoView(scrollBehavior)
+    }
+  }
+
+  const updateHighlight = () => {
+    clearAllHighlights()
+    highlightCurrentChoice()
+  }
+
+  const resetHighlightedIndex = () => {
+    controller.highlightedIndex = -1
+    updateHighlight()
+  }
+
+  const highlightNext = () => {
+    const visibleChoices = controller.visibleChoices
+    if (visibleChoices.length === 0) return
+
+    controller.highlightedIndex = Math.min(
+      controller.highlightedIndex + 1,
+      visibleChoices.length - 1
+    )
+    updateHighlight()
+  }
+
+  const highlightPrevious = () => {
+    const visibleChoices = controller.visibleChoices
+    if (visibleChoices.length === 0) return
+
+    controller.highlightedIndex = Math.max(controller.highlightedIndex - 1, 0)
+    updateHighlight()
+  }
+
+  const selectAndHighlighNext = () => {
+    controller.selectHighlighted()
+    highlightNext()
+  }
+
+  const highlightFirst = () => {
+    const visibleChoices = controller.visibleChoices
+    if (visibleChoices.length === 0) return
+
+    controller.highlightedIndex = 0
+    updateHighlight()
+  }
+
+  const highlightLast = () => {
+    const visibleChoices = controller.visibleChoices
+    if (visibleChoices.length === 0) return
+
+    controller.highlightedIndex = visibleChoices.length - 1
+    updateHighlight()
+  }
+
+  const hideAndBlur = () => {
+    controller.hideMenu()
+    input.blur()
+  }
+
+  const handleKeydownWhenMenuHidden = (event) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault()
+      controller.showMenu()
+    }
+  }
+
+  const keydown = (event) => {
+    if (!controller.isMenuVisible) {
+      return handleKeydownWhenMenuHidden(event)
+    }
+
+    const keyHandlers = {
+      "ArrowDown": () => highlightNext(),
+      "ArrowUp": () => highlightPrevious(),
+      "Enter": () => selectAndHighlighNext(),
+      "Escape": () => hideAndBlur(),
+      "Tab": () => hideAndBlur(),
+      "Home": () => highlightFirst(),
+      "End": () => highlightLast()
+    }
+
+    const handler = keyHandlers[event.key]
+    if (handler) {
+      event.preventDefault()
+      handler()
+    }
+  }
+
+  Object.assign(controller, {
+    keydown,
+    highlightNext,
+    highlightPrevious,
+    highlightFirst,
+    highlightLast,
+    resetHighlightedIndex,
+    updateHighlight,
+    clearAllHighlights,
+    highlightCurrentChoice,
+    isValidHighlightIndex: (visibleChoices) => isValidHighlightIndex(visibleChoices)
+  })
+}

data/app/views/form/combobox/async_search_result.rb

@@ -0,0 +1,17 @@
+class Form::Combobox::AsyncSearchResult < UI::Base
+  prop :results, _Union(Array), reader: :private
+  prop :text_method, _Union(String, Symbol, _Lambda), default: :name, reader: :private
+  prop :value_method, _Union(String, Symbol), default: :to_param, reader: :private
+
+  def view_template
+    if results.any?
+      results.each do |result|
+        render Form::Combobox::Choice.new(choice: result, text_method:, value_method:)
+      end
+    else
+      li(class: "tw:px-4 tw:py-2 tw:text-gray-500 tw:text-sm tw:italic") do
+        "No results"
+      end
+    end
+  end
+end

data/app/views/form/combobox/choice.rb

@@ -0,0 +1,36 @@
+class Form::Combobox::Choice < UI::Base
+  prop :choice, _Any, reader: :private
+  prop :text_method, _Union(String, Symbol, _Lambda), default: :name, reader: :private
+  prop :value_method, _Union(String, Symbol), default: :to_param, reader: :private
+
+  def view_template
+    li role: "option",
+      class: choice_classes,
+      data: {
+        combobox_target: "choice",
+        value: choice.public_send(value_method),
+        action: "mousedown->combobox#preventBlur click->combobox#selectChoice"
+      } do
+      if text_method.respond_to?(:call)
+        text_method.call(choice)
+      else
+        choice.public_send(text_method)
+      end
+    end
+  end
+
+  private
+
+  def choice_classes
+    class_names(
+      "w-full px-3 py-2 gap-1 cursor-pointer",
+      "hover:bg-gray-100 focus:bg-gray-100 active:bg-gray-200",
+      "transition-colors duration-150",
+      text_classes
+    )
+  end
+
+  def text_classes
+    "text-brand-turqoise-900 text-sm font-normal leading-5"
+  end
+end

data/app/views/form/combobox/selected_item.rb

@@ -0,0 +1,25 @@
+class Form::Combobox::SelectedItem < Form::BaseTag
+  prop :item, _Any, reader: :private
+  prop :text_method, _Union(String, Symbol), default: :name, reader: :private
+  prop :value_method, _Union(String, Symbol), default: :to_param, reader: :private
+
+  def view_template
+    render UI::Tag.new(text:, size: :sm, data: {combobox_target: "selectedItem"}) do
+      input(
+        type: "hidden",
+        name: "#{name}[]",
+        value:
+      )
+    end
+  end
+
+  private
+
+  def text
+    item.public_send(text_method)
+  end
+
+  def value
+    item.public_send(value_method)
+  end
+end

data/app/views/form/combobox.rb

@@ -0,0 +1,214 @@
+# frozen_string_literal: true
+
+class Form::Combobox < Form::BaseTag
+  ALLOWED_OPTIONS = [
+    :choices,
+    :text_method,
+    :value_method,
+    :multiple,
+    :selected,
+    :help_text,
+    :searching_text,
+    :no_results_text,
+    :all_choices_selected_text
+  ].freeze
+
+  class << self
+    def allowed_options
+      super + ALLOWED_OPTIONS
+    end
+  end
+
+  prop :choices, _Union(Array, String), reader: :private
+  prop :text_method, _Union(String, Symbol), default: :name, reader: :private
+  prop :value_method, _Union(String, Symbol), default: :to_param, reader: :private
+  prop :multiple, _Boolean?, default: false, reader: :private
+  prop :selected, _Any?, predicate: :private, reader: :private
+  prop :help_text, _String?, default: -> { "Start typing to search" }, reader: :private
+  prop :searching_text, _String?, default: -> { "Searching" }, reader: :private
+  prop :no_results_text, _String?, default: -> { "No results" }, reader: :private
+  prop :all_choices_selected_text, _String?, default: -> { "All choices selected" }, reader: :private
+
+  def view_template
+    div data: {
+      controller: "combobox",
+      combobox_multiple_value: multiple,
+      combobox_search_url_value: choices.is_a?(String) ? choices : nil,
+      combobox_help_text_value: help_text,
+      combobox_searching_text_value: searching_text,
+      combobox_no_results_text_value: no_results_text,
+      combobox_all_choices_selected_text_value: all_choices_selected_text,
+      combobox_input_name_value: name,
+      has_choices: multiple && existing_selections.any?
+    }, class: "relative group" do
+      fieldset(class: classes, data:) do
+        input(
+          id: input_id,
+          type: :search,
+          role: "combobox",
+          "aria-expanded": "false",
+          "aria-autocomplete": "list",
+          "aria-haspopup": "listbox",
+          data: {
+            combobox_target: "input",
+            action: "keydown->combobox#keydown input->combobox#search focus->combobox#showMenu blur->combobox#hideMenuWithDelay"
+          },
+          value: input_value,
+          class: input_classes,
+          placeholder: options[:placeholder] || ""
+        )
+
+        render_selected
+      end
+
+      div data: {
+        combobox_target: "menu",
+        transition_enter_from: "opacity-0 scale-95",
+        transition_enter_to: "opacity-100 scale-100",
+        transition_leave_from: "opacity-100 scale-100",
+        transition_leave_to: "opacity-0 scale-95"
+      }, class: "hidden w-full transition transform origin-top-left absolute left-0 top-0 z-50" do
+        menu role: "listbox", class: "w-full bg-white rounded-lg shadow-lg outline -outline-offset-1
+        outline-gray-300 inline-flex flex-col justify-start items-start overflow-hidden max-h-60 overflow-y-auto" do
+          render_choices_container
+        end
+      end
+    end
+  end
+
+  private
+
+  def default_classes
+    "flex flex-col-reverse overflow-hidden relative rounded outline outline-gray-400 bg-white hover:outline-gray-900 focus-within:outline-gray-900 has-disabled:hover:outline-gray-400 focus-within:outline-2 data-invalid:outline-red-600 data-invalid:focus-within:outline-gray-900 data-invalid:hover:outline-gray-900"
+  end
+
+  def input_id = @input_id ||= "#{name}_#{Random.uuid}"
+
+  def default_options
+    {id:, name:, data: {controller: "combobox"}}
+  end
+
+  def render_selected
+    if multiple?
+      render_selected_items_container
+      render_tag_template
+    else
+      input(type: "hidden", name:, data: {combobox_target: "hiddenInput"}, value: selected&.public_send(value_method))
+    end
+  end
+
+  def render_selected_items_container
+    div(
+      data: {combobox_target: "selectedItemsContainer"},
+      class: selected_items_classes
+    ) do
+      selected&.each do |item|
+        render Form::Combobox::SelectedItem.new(form:, method:, item:)
+      end
+    end
+  end
+
+  def render_tag_template
+    template(
+      data: {combobox_target: "tagTemplate"}
+    ) do
+      render UI::Tag.new(text: "", size: :sm)
+    end
+  end
+
+  def input_classes
+    class_names(
+      "peer border-0 group-data-[combobox-busy-value=true]:animate-pulse"
+    )
+  end
+
+  def existing_selections
+    existing_values = if selected?
+      selected
+    elsif form&.object&.respond_to?(method)
+      form.object.public_send(method)
+    else
+      return []
+    end
+
+    values = Array(existing_values)
+
+    values = [values.first] if single?
+
+    values.compact.map do |value|
+      {
+        value: value.public_send(value_method),
+        displayValue: value.public_send(text_method)
+      }
+    end
+  end
+
+  def input_value
+    return unless single?
+    return unless existing_selections.any?
+
+    existing_selections.first[:displayValue]
+  end
+
+  def single?
+    !multiple
+  end
+
+  def render_choices_container
+    div(
+      data: {combobox_target: "choicesContainer"},
+      class: "w-full"
+    ) do
+      render_messages
+      if choices_is_a_url?
+        turbo_frame_tag turbo_frame_id, data: {combobox_target: "turboFrame"}, class: "w-full"
+      else
+        choices.each do |choice|
+          render Form::Combobox::Choice.new(choice:, text_method:)
+        end
+      end
+    end
+  end
+
+  def choices_is_a_url?
+    choices.is_a? String
+  end
+
+  def render_messages
+    div(data: {combobox_target: "helpText"},
+      class: "hidden px-4 py-2 text-gray-500 text-sm italic") { help_text }
+
+    div(data: {combobox_target: "noResults"},
+      class: "hidden px-4 py-2 text-gray-500 text-sm italic") { no_results_text }
+
+    div(data: {combobox_target: "searching"},
+      class: "hidden px-4 py-2 text-gray-500 text-sm italic animate-pulse") { searching_text }
+
+    div(data: {combobox_target: "allChoicesSelected"},
+      class: "hidden px-4 py-2 text-gray-500 text-sm italic") { all_choices_selected_text }
+  end
+
+  def selected_items_classes
+    class_names(
+      "peer/selected-items flex flex-wrap gap-1 p-1 bg-gray-100 border-b border-gray-200 empty:hidden"
+    )
+  end
+
+  def name
+    multiple? ? "#{super}[]" : super
+  end
+
+  def turbo_frame_id
+    "combobox_choices_#{input_id}".parameterize
+  end
+
+  def multiple?
+    multiple
+  end
+
+  def errors
+    return [] unless error?
+
+    form.object.errors.where(method).map(&:full_message)
+  end
+end

data/app/views/ui/tag.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+class UI::Tag < UI::Base
+  prop :text, String, reader: :private
+  prop :size, _Union("sm", "md"),
+    default: :md, reader: :private do |value|
+    value.to_s.inquiry
+  end
+  prop :button_data, Hash, default: {}.freeze, reader: :private
+
+  def view_template
+    div data:, class: classes do
+      span(class: text_classes) { text }
+      button type: :button, data: button_data_with_defaults, class: button_classes do
+        render UI::Icon.new(name: :x_mark, class: icon_classes)
+      end
+
+      yield if block_given?
+    end
+  end
+
+  private
+
+  def data
+    mix default_data, super
+  end
+
+  def default_classes
+    class_names(
+      "inline-flex items-center gap-1
+      text-gray-950 border border-gray-400 bg-white",
+      "py-1 pl-3 pr-2": size.md?,
+      "py-0.5 pl-1.5 pr-1": size.sm?
+    )
+  end
+
+  def text_classes
+    return "ui-text-xs" if size.sm?
+
+    "ui-text-sm" if size.md?
+  end
+
+  def button_data_with_defaults
+    mix default_button_data, button_data
+  end
+
+  def button_classes
+    "pl-0.5 text-primary-900 hover:text-primary-800
+    cursor-pointer"
+  end
+
+  def icon_classes
+    return "size-2.5" if size.sm?
+
+    "size-3" if size.md?
+  end
+
+  def default_data
+    {
+      controller: "dismissable",
+      transition_enter_active: "transition ease-out duration-300",
+      transition_enter_from: "transform opacity-0 scale-10",
+      transition_enter_to: "transform opacity-10 0 scale-100",
+      transition_leave_active: "transition ease-in duration-300",
+      transition_leave_from: "transform opacity-100 scale-100",
+      transition_leave_to: "transform opacity-0 scale-10"
+    }
+  end
+
+  def default_button_data
+    {action: "dismissable#dismiss"}
+  end
+end

data/lib/quicksilver_ui/dependencies.rb

@@ -51,6 +51,13 @@ module QuicksilverUI
       mixins: [],
       gems: []
     },
+    "tag" => {
+      components: %w[icon],
+      stylesheets: [],
+      controllers: %w[dismissable],
+      mixins: [],
+      gems: []
+    },
     "toast" => {
       components: %w[icon],
       stylesheets: [],
@@ -152,6 +159,14 @@ module QuicksilverUI
       stylesheets: %w[form],
       components: %w[icon],
       gems: []
+    },
+    "combobox" => {
+      form_components: %w[base_tag],
+      stylesheets: %w[form],
+      components: %w[tag],
+      controllers: %w[combobox],
+      mixins: %w[use_floating_ui use_keyboard_navigation],
+      gems: []
     }
   }.freeze
 

data/lib/quicksilver_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module QuicksilverUI
-  VERSION = "0.1.0"
+  VERSION = "0.1.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: quicksilver_ui
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - Evovia
@@ -26,13 +26,19 @@ files:
 - app/helpers/app_form_builder.rb
 - app/helpers/app_form_helper.rb
 - app/javascript/controllers/autogrow_controller.js
+- app/javascript/controllers/combobox_controller.js
 - app/javascript/controllers/dismissable_controller.js
 - app/javascript/controllers/dropdown_controller.js
 - app/javascript/controllers/modal_controller.js
 - app/javascript/controllers/tabs_controller.js
 - app/javascript/mixins/use_floating_ui.js
+- app/javascript/mixins/use_keyboard_navigation.js
 - app/views/form/base_tag.rb
 - app/views/form/checkbox.rb
+- app/views/form/combobox.rb
+- app/views/form/combobox/async_search_result.rb
+- app/views/form/combobox/choice.rb
+- app/views/form/combobox/selected_item.rb
 - app/views/form/date_field.rb
 - app/views/form/email_field.rb
 - app/views/form/error.rb
@@ -58,6 +64,7 @@ files:
 - app/views/ui/dropdown/item.rb
 - app/views/ui/icon.rb
 - app/views/ui/modal.rb
+- app/views/ui/tag.rb
 - app/views/ui/toast.rb
 - lib/generators/quicksilver_ui/affordance/affordance_generator.rb
 - lib/generators/quicksilver_ui/component/all_generator.rb