lightning_ui_kit 0.2.5 → 0.3.0

data/app/javascript/lightning_ui_kit/controllers/combobox_controller.js

@@ -1,704 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-import { computePosition, autoUpdate, offset, flip, shift, size } from "@floating-ui/dom"
-
-export default class extends Controller {
-  static targets = [
-    "input",
-    "inputWrapper",
-    "listbox",
-    "optionsContainer",
-    "optionTemplate",
-    "option",
-    "selectedTags",
-    "hiddenField",
-    "hiddenFields",
-    "loading",
-    "noResults",
-    "createOption",
-    "createOptionText"
-  ]
-
-  static values = {
-    multiple: { type: Boolean, default: false },
-    allowCustom: { type: Boolean, default: false },
-    url: String,
-    minChars: { type: Number, default: 0 },
-    debounce: { type: Number, default: 300 },
-    options: { type: Array, default: [] },
-    selected: { type: Array, default: [] },
-    foreignKey: String,
-    nestedModel: String
-  }
-
-  connect() {
-    this.isOpen = false
-    this.highlightedIndex = -1
-    this.filteredOptions = []
-    this.cleanup = null
-    this.debounceTimer = null
-
-    // Store original selected for detecting removals in association mode
-    this.originalSelected = this.deepClone(this.selectedValue)
-
-    this.initializeSelected()
-    this.setupHoverHandlers()
-
-    if (!this.hasUrlValue) {
-      this.filteredOptions = this.optionsValue
-    }
-  }
-
-  setupHoverHandlers() {
-    // For single mode, add hover to input
-    if (this.hasInputTarget) {
-      this.inputTarget.addEventListener("mouseenter", this.handleMouseEnter)
-      this.inputTarget.addEventListener("mouseleave", this.handleMouseLeave)
-    }
-    // For multiple mode, add hover to inputWrapper
-    if (this.hasInputWrapperTarget) {
-      this.inputWrapperTarget.addEventListener("mouseenter", this.handleWrapperMouseEnter)
-      this.inputWrapperTarget.addEventListener("mouseleave", this.handleWrapperMouseLeave)
-    }
-  }
-
-  handleMouseEnter = (event) => {
-    event.target.dataset.hover = ""
-  }
-
-  handleMouseLeave = (event) => {
-    delete event.target.dataset.hover
-  }
-
-  handleWrapperMouseEnter = (event) => {
-    event.currentTarget.dataset.hover = ""
-  }
-
-  handleWrapperMouseLeave = (event) => {
-    delete event.currentTarget.dataset.hover
-  }
-
-  get isAssociationMode() {
-    return this.hasForeignKeyValue
-  }
-
-  disconnect() {
-    this.destroyFloating()
-    this.clearDebounce()
-    this.cleanupHoverHandlers()
-  }
-
-  cleanupHoverHandlers() {
-    if (this.hasInputTarget) {
-      this.inputTarget.removeEventListener("mouseenter", this.handleMouseEnter)
-      this.inputTarget.removeEventListener("mouseleave", this.handleMouseLeave)
-    }
-    if (this.hasInputWrapperTarget) {
-      this.inputWrapperTarget.removeEventListener("mouseenter", this.handleWrapperMouseEnter)
-      this.inputWrapperTarget.removeEventListener("mouseleave", this.handleWrapperMouseLeave)
-    }
-  }
-
-  // Event Handlers
-
-  onInput(event) {
-    const query = event.target.value.trim()
-
-    if (this.hasUrlValue) {
-      this.clearDebounce()
-      if (query.length >= this.minCharsValue) {
-        this.debounceTimer = setTimeout(() => {
-          this.fetchOptions(query)
-        }, this.debounceValue)
-      } else {
-        this.filteredOptions = []
-        this.renderOptions()
-      }
-    } else {
-      this.filterClientSide(query)
-    }
-
-    this.open()
-    this.updateCreateOption(query)
-  }
-
-  onFocus() {
-    if (!this.hasUrlValue || this.inputTarget.value.length >= this.minCharsValue) {
-      if (!this.hasUrlValue) {
-        this.filteredOptions = this.optionsValue
-        this.filterClientSide(this.inputTarget.value.trim())
-      }
-      this.open()
-    }
-  }
-
-  onKeydown(event) {
-    // Handle Ctrl+N and Ctrl+P for navigation
-    if (event.ctrlKey) {
-      if (event.key === "n") {
-        event.preventDefault()
-        if (!this.isOpen) {
-          this.open()
-        } else {
-          this.highlightNext()
-        }
-        return
-      }
-      if (event.key === "p") {
-        event.preventDefault()
-        if (!this.isOpen) {
-          this.open()
-        } else {
-          this.highlightPrevious()
-        }
-        return
-      }
-    }
-
-    switch (event.key) {
-      case "ArrowDown":
-        event.preventDefault()
-        if (!this.isOpen) {
-          this.open()
-        } else {
-          this.highlightNext()
-        }
-        break
-      case "ArrowUp":
-        event.preventDefault()
-        if (!this.isOpen) {
-          this.open()
-        } else {
-          this.highlightPrevious()
-        }
-        break
-      case "Enter":
-        event.preventDefault()
-        this.selectHighlighted()
-        break
-      case "Escape":
-        this.close()
-        this.inputTarget.value = ""
-        break
-      case "Backspace":
-        if (this.multipleValue && this.inputTarget.value === "") {
-          this.removeLastSelected()
-        }
-        break
-      case "Tab":
-        this.close()
-        break
-    }
-  }
-
-  clickOutside(event) {
-    if (!this.element.contains(event.target)) {
-      this.close()
-    }
-  }
-
-  // Selection Management
-
-  selectOption(event) {
-    event.stopPropagation() // Prevent clickOutside from firing
-
-    const optionEl = event.currentTarget
-    if (optionEl.dataset.disabled === "true") return
-
-    const value = optionEl.dataset.value
-    const label = optionEl.dataset.label
-
-    if (this.multipleValue) {
-      this.toggleSelection(value, label)
-    } else {
-      this.setSingleSelection(value, label)
-      this.close()
-    }
-  }
-
-  toggleSelection(value, _label, isCustom = false) {
-    const selectedIdx = this.findSelectedIndex(value)
-
-    if (selectedIdx > -1) {
-      // Remove from selection
-      this.selectedValue = this.selectedValue.filter((_, i) => i !== selectedIdx)
-    } else {
-      // Add to selection
-      if (this.isAssociationMode) {
-        // In association mode, store as object
-        const newItem = { value: value }
-        if (isCustom) {
-          newItem.custom = true
-        }
-        this.selectedValue = [...this.selectedValue, newItem]
-      } else {
-        this.selectedValue = [...this.selectedValue, value]
-      }
-    }
-
-    this.updateSelectedTags()
-    this.updateHiddenFields()
-    this.renderOptions()
-    this.inputTarget.value = ""
-    this.inputTarget.focus()
-  }
-
-  findSelectedIndex(value) {
-    return this.selectedValue.findIndex(item => {
-      const itemValue = typeof item === 'object' ? item.value : item
-      return String(itemValue) === String(value)
-    })
-  }
-
-  setSingleSelection(value, label) {
-    this.selectedValue = [value]
-    this.inputTarget.value = label
-    this.updateHiddenField(value)
-  }
-
-  removeLastSelected() {
-    if (this.selectedValue.length > 0) {
-      this.selectedValue = this.selectedValue.slice(0, -1)
-      this.updateSelectedTags()
-      this.updateHiddenFields()
-      this.renderOptions()
-    }
-  }
-
-  removeTag(event) {
-    event.preventDefault()
-    event.stopPropagation()
-    const value = event.currentTarget.dataset.value
-    const selectedIdx = this.findSelectedIndex(value)
-    if (selectedIdx > -1) {
-      this.selectedValue = this.selectedValue.filter((_, i) => i !== selectedIdx)
-    }
-    this.updateSelectedTags()
-    this.updateHiddenFields()
-    this.renderOptions()
-    this.inputTarget.focus()
-  }
-
-  createCustomOption() {
-    const value = this.inputTarget.value.trim()
-    if (value && this.allowCustomValue) {
-      if (this.multipleValue) {
-        this.toggleSelection(value, value, true) // isCustom = true
-      } else {
-        this.setSingleSelection(value, value)
-      }
-      this.close()
-    }
-  }
-
-  // Filtering
-
-  filterClientSide(query) {
-    if (!query) {
-      this.filteredOptions = this.optionsValue
-    } else {
-      const lowerQuery = query.toLowerCase()
-      this.filteredOptions = this.optionsValue.filter(opt =>
-        opt.label.toLowerCase().includes(lowerQuery)
-      )
-    }
-    this.highlightedIndex = this.filteredOptions.length > 0 ? 0 : -1
-    this.renderOptions()
-  }
-
-  async fetchOptions(query) {
-    this.showLoading()
-
-    try {
-      const url = new URL(this.urlValue, window.location.origin)
-      url.searchParams.set("q", query)
-
-      const response = await fetch(url, {
-        headers: {
-          "Accept": "application/json",
-          "X-Requested-With": "XMLHttpRequest"
-        }
-      })
-
-      if (!response.ok) throw new Error("Network error")
-
-      const data = await response.json()
-      this.filteredOptions = data
-      this.highlightedIndex = data.length > 0 ? 0 : -1
-      this.renderOptions()
-    } catch (error) {
-      console.error("Combobox fetch error:", error)
-      this.filteredOptions = []
-      this.renderOptions()
-    } finally {
-      this.hideLoading()
-    }
-  }
-
-  // Rendering
-
-  renderOptions() {
-    const container = this.optionsContainerTarget
-    container.innerHTML = ""
-
-    if (this.filteredOptions.length === 0) {
-      this.showNoResults()
-      return
-    }
-
-    this.hideNoResults()
-
-    this.filteredOptions.forEach((opt, index) => {
-      const template = this.optionTemplateTarget.content.cloneNode(true)
-      const optionEl = template.querySelector("[role='option']")
-
-      optionEl.dataset.value = opt.value
-      optionEl.dataset.label = opt.label
-      optionEl.dataset.index = index
-      optionEl.querySelector("[data-label]").textContent = opt.label
-
-      const isSelected = this.isValueSelected(opt.value)
-      if (isSelected) {
-        optionEl.dataset.selected = "true"
-        optionEl.setAttribute("aria-selected", "true")
-        optionEl.querySelector("[data-checkmark]").classList.remove("lui:hidden")
-      }
-
-      if (index === this.highlightedIndex) {
-        optionEl.dataset.highlighted = "true"
-      }
-
-      if (opt.disabled) {
-        optionEl.dataset.disabled = "true"
-        optionEl.setAttribute("aria-disabled", "true")
-      }
-
-      container.appendChild(template)
-    })
-  }
-
-  updateSelectedTags() {
-    if (!this.multipleValue || !this.hasSelectedTagsTarget) return
-
-    // Remove existing tags (but keep input and chevron)
-    const existingTags = this.selectedTagsTarget.querySelectorAll("[data-combobox-tag]")
-    existingTags.forEach(tag => tag.remove())
-
-    // Insert new tags before the input
-    this.selectedValue.forEach(item => {
-      const value = this.getItemValue(item)
-      const opt = this.findOptionByValue(value)
-      const label = opt ? opt.label : value
-
-      const tag = document.createElement("span")
-      tag.setAttribute("data-combobox-tag", "true")
-      tag.className = "lui:inline-flex lui:items-center lui:gap-1 lui:rounded-md lui:bg-zinc-100 lui:px-2 lui:py-0.5 lui:text-sm lui:text-zinc-700"
-      tag.innerHTML = `
-        <span class="lui:truncate lui:max-w-[150px]">${this.escapeHtml(label)}</span>
-        <button type="button" data-value="${this.escapeHtml(String(value))}" data-action="click->lui-combobox#removeTag" class="lui:text-zinc-500 lui:hover:text-zinc-700 lui:flex-shrink-0 lui:ml-0.5">
-          <svg class="lui:h-3.5 lui:w-3.5" viewBox="0 0 16 16" fill="currentColor">
-            <path d="M5.28 4.22a.75.75 0 00-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 101.06 1.06L8 9.06l2.72 2.72a.75.75 0 101.06-1.06L9.06 8l2.72-2.72a.75.75 0 00-1.06-1.06L8 6.94 5.28 4.22z"/>
-          </svg>
-        </button>
-      `
-      this.inputTarget.insertAdjacentElement("beforebegin", tag)
-    })
-  }
-
-  // Hidden Field Management
-
-  updateHiddenField(value) {
-    if (this.hasHiddenFieldTarget) {
-      this.hiddenFieldTarget.value = value
-    }
-  }
-
-  updateHiddenFields() {
-    if (!this.hasHiddenFieldsTarget) return
-
-    if (this.isAssociationMode) {
-      this.updateNestedHiddenFields()
-    } else {
-      this.updateSimpleHiddenFields()
-    }
-  }
-
-  updateSimpleHiddenFields() {
-    const container = this.hiddenFieldsTarget
-    const name = container.dataset.name
-
-    container.innerHTML = ""
-
-    this.selectedValue.forEach(item => {
-      const value = this.getItemValue(item)
-      const input = document.createElement("input")
-      input.type = "hidden"
-      input.name = name
-      input.value = value
-      container.appendChild(input)
-    })
-  }
-
-  updateNestedHiddenFields() {
-    const container = this.hiddenFieldsTarget
-    const baseName = container.dataset.name
-    const fk = this.foreignKeyValue
-    const nestedModel = this.hasNestedModelValue ? this.nestedModelValue : null
-
-    container.innerHTML = ""
-    let idx = 0
-
-    // Current selections (preserved existing + new)
-    this.selectedValue.forEach(item => {
-      const isObject = typeof item === 'object'
-      const joinId = isObject ? item.join_id : null
-      const value = isObject ? item.value : item
-      const isCustom = isObject ? item.custom : !this.isExistingOption(value)
-
-      if (joinId) {
-        // Existing record - include join table id
-        this.addHiddenInput(container, `${baseName}[${idx}][id]`, joinId)
-      }
-
-      if (isCustom && nestedModel) {
-        // New record via nested attributes (e.g., tag_attributes[name])
-        this.addHiddenInput(container, `${baseName}[${idx}][${nestedModel}_attributes][name]`, value)
-      } else {
-        // Existing record by foreign key (e.g., tag_id)
-        this.addHiddenInput(container, `${baseName}[${idx}][${fk}]`, value)
-      }
-      idx++
-    })
-
-    // Removed records - mark for destruction
-    this.originalSelected.forEach(orig => {
-      const origValue = typeof orig === 'object' ? orig.value : orig
-      const origJoinId = typeof orig === 'object' ? orig.join_id : null
-
-      const stillSelected = this.selectedValue.some(sel => {
-        const selValue = typeof sel === 'object' ? sel.value : sel
-        return String(selValue) === String(origValue)
-      })
-
-      if (!stillSelected && origJoinId) {
-        this.addHiddenInput(container, `${baseName}[${idx}][id]`, origJoinId)
-        this.addHiddenInput(container, `${baseName}[${idx}][_destroy]`, 'true')
-        idx++
-      }
-    })
-  }
-
-  addHiddenInput(container, name, value) {
-    const input = document.createElement("input")
-    input.type = "hidden"
-    input.name = name
-    input.value = value
-    container.appendChild(input)
-  }
-
-  // Dropdown Positioning (Floating UI)
-
-  open() {
-    if (this.isOpen) return
-
-    this.isOpen = true
-    this.listboxTarget.classList.remove("lui:hidden")
-    this.inputTarget.setAttribute("aria-expanded", "true")
-
-    // Use inputWrapper for positioning in multiple mode, otherwise use input
-    const referenceEl = this.hasInputWrapperTarget ? this.inputWrapperTarget : this.inputTarget
-
-    this.cleanup = autoUpdate(
-      referenceEl,
-      this.listboxTarget,
-      () => this.updatePosition()
-    )
-  }
-
-  close() {
-    if (!this.isOpen) return
-
-    this.isOpen = false
-    this.listboxTarget.classList.add("lui:hidden")
-    this.inputTarget.setAttribute("aria-expanded", "false")
-    this.highlightedIndex = -1
-    this.destroyFloating()
-  }
-
-  updatePosition() {
-    const referenceEl = this.hasInputWrapperTarget ? this.inputWrapperTarget : this.inputTarget
-
-    computePosition(referenceEl, this.listboxTarget, {
-      placement: "bottom-start",
-      middleware: [
-        offset(4),
-        flip({ padding: 8 }),
-        shift({ padding: 8 }),
-        size({
-          apply({ availableHeight, rects, elements }) {
-            elements.floating.style.maxHeight = `${Math.min(240, availableHeight)}px`
-            elements.floating.style.width = `${rects.reference.width}px`
-          }
-        })
-      ]
-    }).then(({ x, y }) => {
-      Object.assign(this.listboxTarget.style, {
-        position: "absolute",
-        left: `${x}px`,
-        top: `${y}px`
-      })
-    })
-  }
-
-  destroyFloating() {
-    if (this.cleanup) {
-      this.cleanup()
-      this.cleanup = null
-    }
-  }
-
-  // Keyboard Navigation
-
-  highlightNext() {
-    if (this.filteredOptions.length === 0) return
-    this.highlightedIndex = (this.highlightedIndex + 1) % this.filteredOptions.length
-    this.updateHighlight()
-  }
-
-  highlightPrevious() {
-    if (this.filteredOptions.length === 0) return
-    this.highlightedIndex = this.highlightedIndex <= 0
-      ? this.filteredOptions.length - 1
-      : this.highlightedIndex - 1
-    this.updateHighlight()
-  }
-
-  updateHighlight() {
-    this.optionTargets.forEach((el, index) => {
-      if (index === this.highlightedIndex) {
-        el.dataset.highlighted = "true"
-        el.scrollIntoView({ block: "nearest" })
-      } else {
-        delete el.dataset.highlighted
-      }
-    })
-  }
-
-  selectHighlighted() {
-    if (this.highlightedIndex >= 0 && this.highlightedIndex < this.filteredOptions.length) {
-      const opt = this.filteredOptions[this.highlightedIndex]
-      if (opt.disabled) return
-
-      if (this.multipleValue) {
-        this.toggleSelection(String(opt.value), opt.label)
-      } else {
-        this.setSingleSelection(String(opt.value), opt.label)
-        this.close()
-      }
-    } else if (this.allowCustomValue && this.inputTarget.value.trim()) {
-      this.createCustomOption()
-    }
-  }
-
-  highlightOption(event) {
-    const index = parseInt(event.currentTarget.dataset.index, 10)
-    if (!isNaN(index)) {
-      this.highlightedIndex = index
-      this.updateHighlight()
-    }
-  }
-
-  // Utility Methods
-
-  findOptionByValue(value) {
-    return this.optionsValue.find(opt => String(opt.value) === String(value)) ||
-           this.filteredOptions.find(opt => String(opt.value) === String(value))
-  }
-
-  initializeSelected() {
-    if (this.multipleValue) {
-      this.updateSelectedTags()
-      this.updateHiddenFields()
-    } else if (this.selectedValue.length > 0) {
-      const opt = this.findOptionByValue(this.selectedValue[0])
-      if (opt) {
-        this.inputTarget.value = opt.label
-      } else {
-        this.inputTarget.value = this.selectedValue[0]
-      }
-    }
-  }
-
-  updateCreateOption(query) {
-    if (!this.allowCustomValue || !this.hasCreateOptionTarget) return
-
-    const valueExists = this.filteredOptions.some(opt =>
-      String(opt.value).toLowerCase() === query.toLowerCase() ||
-      opt.label.toLowerCase() === query.toLowerCase()
-    )
-
-    if (query && !valueExists) {
-      this.createOptionTarget.classList.remove("lui:hidden")
-      this.createOptionTextTarget.textContent = query
-    } else {
-      this.createOptionTarget.classList.add("lui:hidden")
-    }
-  }
-
-  showLoading() {
-    if (this.hasLoadingTarget) {
-      this.loadingTarget.classList.remove("lui:hidden")
-      this.hideNoResults()
-    }
-  }
-
-  hideLoading() {
-    if (this.hasLoadingTarget) {
-      this.loadingTarget.classList.add("lui:hidden")
-    }
-  }
-
-  showNoResults() {
-    if (this.hasNoResultsTarget) {
-      this.noResultsTarget.classList.remove("lui:hidden")
-    }
-  }
-
-  hideNoResults() {
-    if (this.hasNoResultsTarget) {
-      this.noResultsTarget.classList.add("lui:hidden")
-    }
-  }
-
-  clearDebounce() {
-    if (this.debounceTimer) {
-      clearTimeout(this.debounceTimer)
-      this.debounceTimer = null
-    }
-  }
-
-  escapeHtml(text) {
-    const div = document.createElement("div")
-    div.textContent = text
-    return div.innerHTML
-  }
-
-  // Helper to get the value from an item (handles both simple values and objects)
-  getItemValue(item) {
-    return typeof item === 'object' ? item.value : item
-  }
-
-  // Check if a value is currently selected
-  isValueSelected(value) {
-    return this.findSelectedIndex(value) > -1
-  }
-
-  // Check if a value exists in the options (not a custom value)
-  isExistingOption(value) {
-    return this.optionsValue.some(opt => String(opt.value) === String(value))
-  }
-
-  // Deep clone for storing original selected state
-  deepClone(obj) {
-    return JSON.parse(JSON.stringify(obj))
-  }
-}