advanced_select 0.1.0

data/Rakefile

@@ -0,0 +1,4 @@
+require "bundler/setup"
+
+require "bundler/gem_tasks"
+load "lib/tasks/advanced_select/tasks.rake"

data/app/assets/config/manifest.js

@@ -0,0 +1,2 @@
+//= link_tree ../images
+//= link_directory ../stylesheets .css

data/app/assets/stylesheets/advanced_select/advanced_select.css

@@ -0,0 +1,220 @@
+.ui-advanced-select {
+  box-sizing: border-box;
+  position: relative;
+}
+
+.ui-advanced-select * {
+  box-sizing: border-box;
+}
+
+.ui-advanced-select .hidden {
+  display: none !important;
+}
+
+.ui-advanced-select-trigger {
+  align-items: center;
+  background: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 0.75rem;
+  color: #374151;
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-size: 0.875rem;
+  gap: 0.5rem;
+  justify-content: space-between;
+  line-height: 1.25rem;
+  min-height: 2.5rem;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  width: 100%;
+}
+
+.ui-advanced-select-trigger:focus {
+  outline: 2px solid #4f46e5;
+  outline-offset: 2px;
+}
+
+.ui-advanced-select-summary {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  min-width: 0;
+}
+
+.ui-advanced-select-placeholder {
+  color: #6b7280;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-advanced-select-value {
+  color: #374151;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-advanced-select-token {
+  background: #eef2ff;
+  border: 1px solid #e0e7ff;
+  border-radius: 0.5rem;
+  color: #4338ca;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1rem;
+  max-width: 100%;
+  overflow: hidden;
+  padding: 0.25rem 0.5rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-advanced-select-caret,
+.ui-advanced-select-clear {
+  color: #9ca3af;
+  flex-shrink: 0;
+}
+
+.ui-advanced-select-clear {
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+}
+
+.ui-advanced-select-dropdown {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.75rem;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  box-sizing: border-box;
+  color: #374151;
+  font-size: 0.875rem;
+  left: 0;
+  line-height: 1.25rem;
+  margin-top: 0.25rem;
+  padding: 0.5rem;
+  position: absolute;
+  right: 0;
+  width: 100%;
+  z-index: 20;
+}
+
+.ui-advanced-select-search {
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  box-sizing: border-box;
+  color: #374151;
+  font: inherit;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin-bottom: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  width: 100%;
+}
+
+.ui-advanced-select-search:focus {
+  outline: 2px solid #4f46e5;
+  outline-offset: 1px;
+}
+
+.ui-advanced-select-options {
+  max-height: 14rem;
+  overflow-y: auto;
+}
+
+.ui-advanced-select-option {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 0.5rem;
+  color: #374151;
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  width: 100%;
+}
+
+.ui-advanced-select-option:hover,
+.ui-advanced-select-option-active {
+  background: #f9fafb;
+  color: #111827;
+}
+
+.ui-advanced-select-option[aria-selected="true"],
+.ui-advanced-select-option-active[aria-selected="true"] {
+  background: #eef2ff;
+  color: #4338ca;
+}
+
+.ui-advanced-select-option-check {
+  color: #4f46e5;
+  flex-shrink: 0;
+  width: 1rem;
+}
+
+.ui-advanced-select-option-content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.ui-advanced-select-option-description {
+  color: #9ca3af;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-advanced-select-group-label {
+  color: #9ca3af;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  padding: 0.5rem 0.75rem 0.25rem;
+  text-transform: uppercase;
+}
+
+.ui-advanced-select-add-option {
+  align-items: center;
+  background: transparent;
+  border: 1px dashed #c7d2fe;
+  border-radius: 0.5rem;
+  color: #4338ca;
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  margin-top: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  width: 100%;
+}
+
+.ui-advanced-select-add-option:hover,
+.ui-advanced-select-add-option.ui-advanced-select-option-active {
+  background: #eef2ff;
+}
+
+.ui-advanced-select-empty,
+.ui-advanced-select-loading {
+  color: #9ca3af;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.ui-advanced-select-error {
+  color: #ef4444;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding: 0.5rem 0.75rem;
+}

data/app/javascript/advanced_select/advanced_select_controller.js

@@ -0,0 +1,379 @@
+import { Controller } from "@hotwired/stimulus"
+import { Turbo } from "@hotwired/turbo-rails"
+
+export default class extends Controller {
+  static targets = ["hiddenFields", "trigger", "summary", "dropdown", "search", "options", "caret", "clear"]
+  static values = {
+    addMode: Boolean,
+    delay: { type: Number, default: 200 },
+    dependentFields: Object,
+    errorText: String,
+    inputId: String,
+    loadingText: String,
+    multiple: Boolean,
+    name: String,
+    placeholder: String,
+    searchable: Boolean,
+    selected: Array,
+    targetId: String,
+    url: String
+  }
+
+  connect() {
+    this.timer = null
+    this.requestSequence = 0
+    this.activeIndex = -1
+    this.placeholderClass = this.element.dataset.advancedSelectPlaceholderClass || "ui-advanced-select-placeholder"
+    this.valueClass = this.element.dataset.advancedSelectValueClass || "ui-advanced-select-value"
+    this.tokenClass = this.element.dataset.advancedSelectTokenClass || "ui-advanced-select-token"
+    this.loadingClass = this.element.dataset.advancedSelectLoadingClass || "ui-advanced-select-loading"
+    this.errorClass = this.element.dataset.advancedSelectErrorClass || "ui-advanced-select-error"
+    this.optionActiveClasses = this.classList(this.element.dataset.advancedSelectOptionActiveClass || "ui-advanced-select-option-active")
+    this.addOptionActiveClasses = this.classList(this.element.dataset.advancedSelectAddOptionActiveClass || "")
+    this.optionSelectedClasses = this.classList(this.element.dataset.advancedSelectOptionSelectedClass || "")
+    this.selectedValue = this.selectedValue.map((option) => ({
+      ...option,
+      id: option.id.toString(),
+      displayLabel: option.displayLabel || option.label
+    }))
+    this.close = this.close.bind(this)
+  }
+
+  disconnect() {
+    window.clearTimeout(this.timer)
+    document.removeEventListener("click", this.close)
+  }
+
+  toggle(event) {
+    event.preventDefault()
+
+    if (event.target === this.clearTarget) {
+      return
+    }
+
+    this.expanded ? this.close() : this.open()
+  }
+
+  open() {
+    this.dropdownTarget.classList.remove("hidden")
+    this.triggerTarget.setAttribute("aria-expanded", "true")
+    document.addEventListener("click", this.close)
+    this.activate(-1)
+    this.fetchOptions({ selected: true })
+
+    if (this.searchableValue) {
+      requestAnimationFrame(() => this.searchTarget.focus())
+    }
+  }
+
+  close(event) {
+    if (event && this.element.contains(event.target)) {
+      return
+    }
+
+    this.dropdownTarget.classList.add("hidden")
+    this.triggerTarget.setAttribute("aria-expanded", "false")
+    document.removeEventListener("click", this.close)
+    this.clearSearch()
+    this.activate(-1)
+  }
+
+  search() {
+    window.clearTimeout(this.timer)
+    this.renderLoading()
+    this.activate(-1)
+    this.timer = window.setTimeout(() => this.fetchOptions(), this.delayValue)
+  }
+
+  choose(event) {
+    event.preventDefault()
+    this.selectOption(event.params.value, event.params.label, event.params.submitValue, { displayLabel: event.params.displayLabel })
+  }
+
+  add(event) {
+    event.preventDefault()
+    this.addOption(event.params.value, event.params.label, event.params.submitValue, event.params.displayLabel)
+  }
+
+  activateOption(event) {
+    this.activate(this.optionElements.indexOf(event.currentTarget))
+  }
+
+  clear(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    this.selectedValue = []
+    this.renderSelection()
+    this.close()
+  }
+
+  keydown(event) {
+    if (event.key === "ArrowDown") {
+      event.preventDefault()
+      this.activate(this.activeIndex + 1)
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault()
+      this.activate(this.activeIndex < 0 ? this.optionElements.length - 1 : this.activeIndex - 1)
+    } else if (event.key === "Enter" && this.activeOption) {
+      event.preventDefault()
+      this.chooseActiveOption()
+    } else if (event.key === "Escape") {
+      this.close()
+    }
+  }
+
+  clearSearch() {
+    if (this.searchableValue) {
+      this.searchTarget.value = ""
+    }
+  }
+
+  fetchOptions({ selected = false } = {}) {
+    if (!this.urlValue) {
+      return
+    }
+
+    const requestSequence = this.requestSequence + 1
+    this.requestSequence = requestSequence
+    const url = new URL(this.urlValue, window.location.origin)
+    url.searchParams.set("target", this.targetIdValue)
+    url.searchParams.set("add_mode", this.addModeValue ? "1" : "0")
+    this.selectedValue.forEach((option) => url.searchParams.append("selected_ids[]", option.id))
+
+    if (selected && !this.multipleValue && this.selectedValue[0]) {
+      url.searchParams.set("selected_id", this.selectedValue[0].id)
+    } else if (this.searchableValue) {
+      url.searchParams.set("query", this.searchTarget.value)
+    }
+
+    Object.entries(this.dependentFieldsValue).forEach(([name, selector]) => {
+      const field = document.querySelector(selector)
+
+      if (field) {
+        url.searchParams.set(name, field.value)
+      }
+    })
+
+    fetch(url, { headers: { Accept: "text/vnd.turbo-stream.html" } })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Advanced select options request failed")
+        }
+
+        return response.text()
+      })
+      .then((html) => {
+        if (!this.expanded || requestSequence !== this.requestSequence) {
+          return
+        }
+
+        Turbo.renderStreamMessage(html)
+        requestAnimationFrame(() => {
+          if (!this.expanded || requestSequence !== this.requestSequence) {
+            return
+          }
+
+          this.currentOptionsTarget.setAttribute("aria-busy", "false")
+          this.renderOptionsState()
+          this.activate(-1)
+        })
+      })
+      .catch(() => {
+        if (!this.expanded || requestSequence !== this.requestSequence) {
+          return
+        }
+
+        this.renderError()
+      })
+  }
+
+  renderLoading() {
+    this.currentOptionsTarget.setAttribute("aria-busy", "true")
+    this.currentOptionsTarget.replaceChildren(this.textElement("div", this.loadingClass, this.loadingTextValue))
+  }
+
+  renderError() {
+    this.currentOptionsTarget.setAttribute("aria-busy", "false")
+    this.currentOptionsTarget.replaceChildren(this.textElement("div", this.errorClass, this.errorTextValue))
+  }
+
+  addOption(value, label, submitValue = value, displayLabel = label) {
+    this.selectOption(value, label, submitValue, { displayLabel, refreshOptions: false })
+
+    if (this.multipleValue) {
+      this.clearSearch()
+      this.fetchOptions()
+    }
+  }
+
+  selectOption(value, label, submitValue = value, { displayLabel = label, refreshOptions = this.multipleValue } = {}) {
+    value = value.toString()
+    submitValue = submitValue.toString()
+
+    if (this.multipleValue) {
+      if (this.selectedValue.some((option) => option.id === value)) {
+        this.selectedValue = this.selectedValue.filter((option) => option.id !== value)
+      } else {
+        this.selectedValue = this.selectedValue.concat({ id: value, value: submitValue, label, displayLabel })
+      }
+    } else {
+      this.selectedValue = [{ id: value, value: submitValue, label, displayLabel }]
+    }
+
+    this.renderSelection()
+    if (refreshOptions) {
+      this.fetchOptions()
+    }
+
+    if (!this.multipleValue) {
+      this.close()
+    }
+  }
+
+  renderSelection() {
+    this.hiddenFieldsTarget.replaceChildren(...this.hiddenFieldElements)
+    this.summaryTarget.replaceChildren(...this.selectionElements)
+    this.renderOptionsState()
+    this.caretTarget.classList.toggle("hidden", this.selectedValue.length > 0)
+    this.clearTarget.classList.toggle("hidden", this.selectedValue.length === 0)
+  }
+
+  renderOptionsState() {
+    const selectedIds = new Set(this.selectedValue.map((option) => option.id))
+
+    this.optionElements.forEach((option) => {
+      const selected = selectedIds.has(option.dataset.advancedSelectValueParam)
+      option.setAttribute("aria-selected", selected.toString())
+      this.toggleClasses(option, this.optionSelectedClasses, selected)
+
+      const check = option.querySelector("[data-advanced-select-option-check]")
+      if (check) {
+        check.textContent = selected ? "\u2713" : ""
+      }
+    })
+  }
+
+  chooseActiveOption() {
+    if (this.activeOption.hasAttribute("data-advanced-select-add-option")) {
+      this.addOption(
+        this.activeOption.dataset.advancedSelectValueParam,
+        this.activeOption.dataset.advancedSelectLabelParam,
+        this.activeOption.dataset.advancedSelectSubmitValueParam,
+        this.activeOption.dataset.advancedSelectDisplayLabelParam
+      )
+    } else {
+      this.selectOption(
+        this.activeOption.dataset.advancedSelectValueParam,
+        this.activeOption.dataset.advancedSelectLabelParam,
+        this.activeOption.dataset.advancedSelectSubmitValueParam || this.activeOption.dataset.advancedSelectValueParam,
+        { displayLabel: this.activeOption.dataset.advancedSelectDisplayLabelParam }
+      )
+    }
+  }
+
+  activate(index) {
+    this.optionElements.forEach((option) => {
+      this.removeClasses(option, this.optionActiveClasses)
+      this.removeClasses(option, this.addOptionActiveClasses)
+    })
+
+    if (index < 0 || this.optionElements.length === 0) {
+      this.activeIndex = -1
+      return
+    }
+
+    this.activeIndex = (index + this.optionElements.length) % this.optionElements.length
+    this.addClasses(this.activeOption, this.optionActiveClasses)
+    if (this.activeOption.hasAttribute("data-advanced-select-add-option")) {
+      this.addClasses(this.activeOption, this.addOptionActiveClasses)
+    }
+    this.activeOption.scrollIntoView({ block: "nearest" })
+  }
+
+  get optionElements() {
+    return Array.from(this.currentOptionsTarget.querySelectorAll("[data-advanced-select-option], [data-advanced-select-add-option]")).filter((option) => !option.classList.contains("hidden"))
+  }
+
+  get activeOption() {
+    return this.optionElements[this.activeIndex]
+  }
+
+  get currentOptionsTarget() {
+    return document.getElementById(this.targetIdValue) || this.optionsTarget
+  }
+
+  get hiddenFieldElements() {
+    const options = this.multipleValue ? this.selectedValue : [this.selectedValue[0]]
+
+    return options.map((option) => {
+      const input = document.createElement("input")
+      input.type = "hidden"
+      input.name = this.nameValue
+      input.value = option ? option.value || option.id : ""
+
+      if (!this.multipleValue) {
+        input.id = this.inputIdValue
+      }
+
+      return input
+    })
+  }
+
+  get selectionElements() {
+    if (this.selectedValue.length === 0) {
+      return [this.textElement("span", this.placeholderClass, this.placeholderValue)]
+    }
+
+    if (!this.multipleValue) {
+      return [this.textElement("span", this.valueClass, this.displayLabel(this.selectedValue[0]))]
+    }
+
+    const tokens = this.selectedValue.slice(0, 2).map((option) => this.textElement("span", this.tokenClass, this.displayLabel(option)))
+
+    if (this.selectedValue.length > 2) {
+      tokens.push(this.textElement("span", this.tokenClass, `& +${this.selectedValue.length - 2}`))
+    }
+
+    return tokens
+  }
+
+  displayLabel(option) {
+    return option.displayLabel || option.label
+  }
+
+  textElement(tagName, className, text) {
+    const element = document.createElement(tagName)
+    element.className = className
+    element.textContent = text
+
+    return element
+  }
+
+  classList(className) {
+    return className.trim().split(/\s+/).filter(Boolean)
+  }
+
+  addClasses(element, classNames) {
+    if (classNames.length > 0) {
+      element.classList.add(...classNames)
+    }
+  }
+
+  removeClasses(element, classNames) {
+    if (classNames.length > 0) {
+      element.classList.remove(...classNames)
+    }
+  }
+
+  toggleClasses(element, classNames, force) {
+    if (force) {
+      this.addClasses(element, classNames)
+    } else {
+      this.removeClasses(element, classNames)
+    }
+  }
+
+  get expanded() {
+    return this.triggerTarget.getAttribute("aria-expanded") === "true"
+  }
+}

data/app/javascript/advanced_select/index.js

@@ -0,0 +1 @@
+export { default as AdvancedSelectController } from "./advanced_select_controller"

data/app/views/advanced_select/_default_option_content.html.erb

@@ -0,0 +1,6 @@
+<span class="<%= advanced_select_class(class_map, :option_content) %>">
+  <span><%= advanced_select_option_label(option) %></span>
+  <% if advanced_select_option_description(option).present? %>
+    <span class="<%= advanced_select_class(class_map, :option_description) %>"><%= advanced_select_option_description(option) %></span>
+  <% end %>
+</span>

data/app/views/advanced_select/_option.html.erb

@@ -0,0 +1,18 @@
+<% selected = advanced_select_option_selected?(option, selected_options) %>
+<button type="button"
+        class="<%= advanced_select_class(class_map, :option, (:option_selected if selected)) %>"
+        role="option"
+        aria-selected="<%= selected %>"
+        data-advanced-select-option
+        data-action="mouseenter->advanced-select#activateOption mousedown->advanced-select#choose"
+        data-advanced-select-value-param="<%= option.fetch(:id) %>"
+        data-advanced-select-submit-value-param="<%= advanced_select_option_value(option) %>"
+        data-advanced-select-label-param="<%= advanced_select_option_label(option) %>"
+        data-advanced-select-display-label-param="<%= advanced_select_option_display_label(option) %>">
+  <span class="<%= advanced_select_class(class_map, :option_check) %>" data-advanced-select-option-check><% if selected %>&#10003;<% end %></span>
+  <% if option_content_partial.present? %>
+    <%= render partial: option_content_partial, locals: { option: option } %>
+  <% else %>
+    <%= render partial: "advanced_select/default_option_content", locals: { option: option, class_map: class_map } %>
+  <% end %>
+</button>

data/app/views/advanced_select/_options.html.erb

@@ -0,0 +1,31 @@
+<div id="<%= target_id %>"
+     class="<%= advanced_select_class(class_map, :options) %>"
+     data-advanced-select-target="options"
+     aria-busy="false"
+     <% if local_assigns[:multiple] %>aria-multiselectable="true"<% end %>
+     role="listbox">
+  <% advanced_select_option_groups(options).each do |group| %>
+    <% if group[:label].present? %>
+      <div class="<%= advanced_select_class(class_map, :group_label) %>"><%= group.fetch(:label) %></div>
+    <% end %>
+
+    <% group.fetch(:options).each do |option| %>
+      <%= render partial: "advanced_select/option", locals: { option: option, selected_options: selected_options, option_content_partial: option_content_partial, class_map: class_map } %>
+    <% end %>
+  <% end %>
+
+  <% if advanced_select_add_option?(options, selected_options, add_mode, query) %>
+    <button type="button"
+            class="<%= advanced_select_class(class_map, :add_option) %>"
+            data-advanced-select-add-option
+            data-action="mouseenter->advanced-select#activateOption mousedown->advanced-select#add"
+            data-advanced-select-value-param="<%= "__new__:#{query}" %>"
+            data-advanced-select-submit-value-param="<%= "__new__:#{query}" %>"
+            data-advanced-select-label-param="<%= query %>"
+            data-advanced-select-display-label-param="<%= query %>">
+      <%= t("shared.advanced_select.add_option", query: query) %>
+    </button>
+  <% elsif advanced_select_options_empty?(options) %>
+    <div class="<%= advanced_select_class(class_map, :empty) %>"><%= t("shared.advanced_select.empty") %></div>
+  <% end %>
+</div>