hotwire_combobox 0.1.9 → 0.1.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 682b24c423ae14b503b0c018ef7299e89b25fb641057934a835bf615ffd9b999
-  data.tar.gz: d588e46d58c757534239d6ccbcd85165e6ba05bfab127a5e315c9f6eb96b5168
+  metadata.gz: 0fabe58275ffd3010bca3cc350f94ebd673af65d7411156998418b7cd09c262e
+  data.tar.gz: 223c6a8e14566bc49cc900732ca234f559741b06f07c3e5d4724d9bf78b33732
 SHA512:
-  metadata.gz: b6b954b089943a78f4cdf1a3cc4833e8ddafcf2fd5f697556c2c0cbd7ba89cf9425d065146b2046b34464c653ba9ba4bc793b349f97b17ef774aca718e721df7
-  data.tar.gz: 9499ab225eb5b668361003e3776fa5972d3cfd2ae138b42b51138e1e976863a3aac5921e0a4f91f21a03e897e8a82ae25d2e05cc916c1a7c3b7ae012b8a6b5d7
+  metadata.gz: 4165ae08d560f369125e5542e26619fd2ccaea559232670d4dd1511cbf8972d7068b560ada69abb2ee61c0fad22826040bb9ced88a791192f0442e049a7c2124
+  data.tar.gz: 004c8565c5c9ba15950bda9e242315d2ad21f7ee3e0a28fff5c6fe6ee0b54fd495b9caed719df2ee5714cea096362e129be6339e19dd74ec82d9baf91da54672

data/README.md

@@ -59,9 +59,6 @@ The `options` argument takes an array of any objects which respond to:
 | autocompletable_as | Used to autocomplete the input element when the user types into it. Falls back to calling `display` on the object if not provided.         |
 | display            | Used as a short-hand for other attributes. See the rest of the list for details.                                                           |
 
-> [!NOTE]
-> The `id` attribute is required only if `value` is not provided.
-
 You can use the `combobox_options` helper to create an array of option objects which respond to the above methods:
 
 ```ruby
@@ -89,7 +86,7 @@ Additionally, you can pass the following [Stimulus class values](https://stimulu
 
 ### Validity
 
-The hidden input can't have a value that's not in the list of options.
+Unless `name_when_new` is passed, the hidden input can't have a value that's not in the list of options.
 
 If a nonexistent value is typed into the combobox, the value of the hidden input will be set empty.
 

data/app/assets/javascripts/controllers/hw_combobox_controller.js

@@ -2,12 +2,17 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static classes = [ "selected", "invalid" ]
-  static targets = [ "combobox", "listbox", "valueField" ]
-  static values = { expanded: Boolean, filterableAttribute: String, autocompletableAttribute: String }
+  static targets = [ "combobox", "listbox", "hiddenField" ]
+  static values = {
+    expanded: Boolean,
+    nameWhenNew: String,
+    originalName: String,
+    filterableAttribute: String,
+    autocompletableAttribute: String }
 
   connect() {
-    if (this.valueFieldTarget.value) {
-      this.selectOptionByValue(this.valueFieldTarget.value)
+    if (this.hiddenFieldTarget.value) {
+      this.selectOptionByValue(this.hiddenFieldTarget.value)
     }
   }
 
@@ -16,6 +21,7 @@ export default class extends Controller {
   }
 
   close() {
+    if (!this.isOpen) return
     this.commitSelection()
     this.expandedValue = false
   }
@@ -26,13 +32,16 @@ export default class extends Controller {
   }
 
   filter(event) {
+    const isDeleting = event.inputType === "deleteContentBackward"
     const query = this.comboboxTarget.value.trim()
 
     this.open()
 
     this.allOptionElements.forEach(applyFilter(query, { matching: this.filterableAttributeValue }))
 
-    if (event.inputType === "deleteContentBackward") {
+    if (this.isValidNewOption(query, { ignoreAutocomplete: isDeleting })) {
+      this.selectNew(query)
+    } else if (isDeleting) {
       this.deselect(this.selectedOptionElement)
     } else {
       this.select(this.visibleOptionElements[0])
@@ -47,7 +56,6 @@ export default class extends Controller {
     if (this.element.contains(target)) return
 
     this.close()
-    target.focus()
   }
 
   closeOnFocusOutside({ target }) {
@@ -56,7 +64,6 @@ export default class extends Controller {
     if (target.matches("main")) return
 
     this.close()
-    target.focus()
   }
 
   // private
@@ -85,7 +92,9 @@ export default class extends Controller {
   }
 
   commitSelection() {
-    this.select(this.selectedOptionElement, { force: true })
+    if (!this.isValidNewOption(this.comboboxTarget.value, { ignoreAutocomplete: true })) {
+      this.select(this.selectedOptionElement, { force: true })
+    }
   }
 
   expandedValueChanged() {
@@ -107,7 +116,7 @@ export default class extends Controller {
   }
 
   select(option, { force = false } = {}) {
-    this.allOptionElements.forEach(option => this.deselect(option))
+    this.resetOptions()
 
     if (option) {
       if (this.hasSelectedClass) option.classList.add(this.selectedClass)
@@ -125,6 +134,17 @@ export default class extends Controller {
     }
   }
 
+  selectNew(query) {
+    this.resetOptions()
+    this.hiddenFieldTarget.value = query
+    this.hiddenFieldTarget.name = this.nameWhenNewValue
+  }
+
+  resetOptions() {
+    this.allOptionElements.forEach(option => this.deselect(option))
+    this.hiddenFieldTarget.name = this.originalNameValue
+  }
+
   selectIndex(index) {
     const option = wrapAroundAccess(this.visibleOptionElements, index)
     this.select(option, { force: true })
@@ -144,26 +164,34 @@ export default class extends Controller {
   executeSelect(option, { selected }) {
     if (selected) {
       option.setAttribute("aria-selected", true)
-      this.valueFieldTarget.value = option.dataset.value
+      this.hiddenFieldTarget.value = option.dataset.value
     } else {
       option.setAttribute("aria-selected", false)
-      this.valueFieldTarget.value = null
+      this.hiddenFieldTarget.value = null
     }
   }
 
   maybeAutocompleteWith(option, { force }) {
     const typedValue = this.comboboxTarget.value
-    const autocompletedValue = option.dataset.autocompletableAs
+    const autocompletedValue = option.getAttribute(this.autocompletableAttributeValue)
 
     if (force) {
       this.comboboxTarget.value = autocompletedValue
       this.comboboxTarget.setSelectionRange(autocompletedValue.length, autocompletedValue.length)
-    } else if (autocompletedValue.toLowerCase().startsWith(typedValue.toLowerCase())) {
+    } else if (startsWith(autocompletedValue, typedValue)) {
       this.comboboxTarget.value = autocompletedValue
       this.comboboxTarget.setSelectionRange(typedValue.length, autocompletedValue.length)
     }
   }
 
+  isValidNewOption(query, { ignoreAutocomplete = false } = {}) {
+    const typedValue = this.comboboxTarget.value
+    const autocompletedValue = this.visibleOptionElements[0]?.getAttribute(this.autocompletableAttributeValue)
+    const insufficentAutocomplete = !autocompletedValue || !startsWith(autocompletedValue, typedValue)
+
+    return query.length > 0 && this.allowNew && (ignoreAutocomplete || insufficentAutocomplete)
+  }
+
   get allOptions() {
     return Array.from(this.allOptionElements)
   }
@@ -189,9 +217,13 @@ export default class extends Controller {
   }
 
   get valueIsInvalid() {
-    const isRequiredAndEmpty = this.comboboxTarget.required && !this.valueFieldTarget.value
+    const isRequiredAndEmpty = this.comboboxTarget.required && !this.hiddenFieldTarget.value
     return isRequiredAndEmpty
   }
+
+  get allowNew() {
+    return !!this.nameWhenNewValue
+  }
 }
 
 function applyFilter(query, { matching }) {
@@ -224,3 +256,7 @@ function cancel(event) {
   event.stopPropagation()
   event.preventDefault()
 }
+
+function startsWith(string, substring) {
+  return string.toLowerCase().startsWith(substring.toLowerCase())
+}

data/app/helpers/hotwire_combobox/helper.rb

@@ -1,105 +1,44 @@
 module HotwireCombobox
   module Helper
+    NonCollectionOptions = Class.new StandardError
+
     class << self
       delegate :bypass_convenience_methods?, to: :HotwireCombobox
-    end
 
-    def hw_combobox_options(options)
-      options.map { |option| hw_combobox_option(**option) }
-    end
-    alias_method :combobox_options, :hw_combobox_options unless bypass_convenience_methods?
+      def hw_combobox_options(options, **methods)
+        unless options.respond_to?(:map)
+          raise NonCollectionOptions, "options must be an Array or an ActiveRecord::Relation"
+        end
 
-    def hw_combobox_tag(name, value = nil, form: nil, options: [], data: {}, input: {}, **attrs)
-      value_field_attrs = {}.tap do |h|
-        h[:id] = default_hw_combobox_value_field_id attrs, form, name
-        h[:name] = default_hw_combobox_value_field_name form, name
-        h[:data] = default_hw_combobox_value_field_data
-        h[:value] = form&.object&.public_send(name) || value
-      end
-
-      attrs[:type] ||= :text
-      attrs[:role] = :combobox
-      attrs[:id] = hw_combobox_id value_field_attrs[:id]
-      attrs[:data] = default_hw_combobox_data input.fetch(:data, {})
-      attrs[:aria] = default_hw_combobox_aria value_field_attrs, input.fetch(:aria, {})
-
-      render "hotwire_combobox/combobox", options: options,
-        attrs: attrs, value_field_attrs: value_field_attrs,
-        listbox_id: hw_combobox_listbox_id(value_field_attrs[:id]),
-        parent_data: default_hw_combobox_parent_data(attrs, data)
-    end
-    alias_method :combobox_tag, :hw_combobox_tag unless bypass_convenience_methods?
+        if ActiveRecord::Relation === options || ActiveRecord::Base === options.first
+          options.map do |option|
+            attrs = {}.tap do |attrs|
+              attrs[:id] = option.public_send(methods[:id]) if methods[:id]
+              attrs[:value] = option.public_send(methods[:value] || :id)
+              attrs[:display] = option.public_send(methods[:display]) if methods[:display]
+            end
 
-    def hw_listbox_option_id(option)
-      option.try(:id)
-    end
-
-    def hw_listbox_option_value(option)
-      option.try(:value) || option.id
-    end
+            hw_combobox_option(**attrs)
+          end
+        else
+          options.map { |option| hw_combobox_option(**option) }
+        end
+      end
 
-    def hw_listbox_option_content(option)
-      option.try(:content) || option.try(:display)
+      private
+        def hw_combobox_option(*args, **kwargs, &block)
+          HotwireCombobox::Option.new(*args, **kwargs, &block)
+        end
     end
 
-    def hw_listbox_option_filterable_as(option)
-      option.try(:filterable_as) || option.try(:display)
+    def hw_combobox_tag(*args, **kwargs, &block)
+      render "hotwire_combobox/combobox", component: HotwireCombobox::Component.new(*args, **kwargs, &block)
     end
+    alias_method :combobox_tag, :hw_combobox_tag unless bypass_convenience_methods?
 
-    def hw_listbox_option_autocompletable_as(option)
-      option.try(:autocompletable_as) || option.try(:display)
+    def hw_combobox_options(*args, **kwargs, &block)
+      HotwireCombobox::Helper.hw_combobox_options(*args, **kwargs, &block)
     end
-
-    private
-      def hw_combobox_option(...)
-        HotwireCombobox::Option.new(...)
-      end
-
-      def default_hw_combobox_value_field_id(attrs, form, name)
-        attrs.delete(:id) || form&.field_id(name)
-      end
-
-      def default_hw_combobox_value_field_name(form, name)
-        form&.field_name(name) || name
-      end
-
-      def default_hw_combobox_value_field_data
-        { "hw-combobox-target": "valueField" }
-      end
-
-      def default_hw_combobox_data(data)
-        data.reverse_merge! \
-          "action": "
-            focus->hw-combobox#open
-            input->hw-combobox#filter
-            keydown->hw-combobox#navigate
-            click@window->hw-combobox#closeOnClickOutside
-            focusin@window->hw-combobox#closeOnFocusOutside".squish,
-          "hw-combobox-target": "combobox"
-      end
-
-      def default_hw_combobox_aria(attrs, aria)
-        aria.reverse_merge! \
-          "controls": hw_combobox_listbox_id(attrs[:id]),
-          "owns": hw_combobox_listbox_id(attrs[:id]),
-          "haspopup": "listbox",
-          "autocomplete": "both"
-      end
-
-      def default_hw_combobox_parent_data(attrs, data)
-        data.reverse_merge! \
-          "controller": token_list("hw-combobox", data.delete(:controller)),
-          "hw-combobox-expanded-value": attrs.delete(:open),
-          "hw-combobox-filterable-attribute-value": "data-filterable-as",
-          "hw-combobox-autocompletable-attribute-value": "data-autocompletable-as"
-      end
-
-      def hw_combobox_id(id)
-        "#{id}-hw-combobox"
-      end
-
-      def hw_combobox_listbox_id(id)
-        "#{id}-hw-listbox"
-      end
+    alias_method :combobox_options, :hw_combobox_options unless bypass_convenience_methods?
   end
 end

data/app/presenters/hotwire_combobox/component.rb

@@ -0,0 +1,127 @@
+class HotwireCombobox::Component
+  include ActionView::Helpers::TagHelper
+
+  class << self
+    def options_from(options)
+      if HotwireCombobox::Option === options.first
+        options
+      else
+        HotwireCombobox::Helper.hw_combobox_options options, display: :to_combobox_display
+      end
+    end
+  end
+
+  def initialize(name, value = nil, id: nil, form: nil, name_when_new: nil, open: false, options: [], data: {}, input: {}, **rest)
+    @combobox_attrs = input.reverse_merge(rest).with_indifferent_access # input: {} allows for specifying e.g. data attributes on the input field
+    @options = self.class.options_from options
+    @id, @name, @value, @form, @name_when_new, @open, @data = id, name, value, form, name_when_new, open, data
+  end
+
+  def fieldset_attrs
+    {
+      class: "hw-combobox",
+      data: fieldset_data
+    }
+  end
+
+  def hidden_field_attrs
+    {
+      id: hidden_field_id,
+      name: hidden_field_name,
+      data: hidden_field_data,
+      value: hidden_field_value
+    }
+  end
+
+  def input_attrs
+    nested_attrs = %i[ data aria ]
+
+    {
+      id: input_id,
+      role: :combobox,
+      type: input_type,
+      data: input_data,
+      aria: input_aria
+    }.merge combobox_attrs.except(*nested_attrs)
+  end
+
+  def listbox_attrs
+    {
+      id: listbox_id,
+      role: :listbox,
+      hidden: "",
+      data: listbox_data
+    }
+  end
+
+  def listbox_options
+    options.map { |option| HotwireCombobox::Listbox::Option.new option }
+  end
+
+  private
+    attr_reader :id, :name, :value, :form, :name_when_new, :open, :options, :data, :combobox_attrs
+
+    def fieldset_data
+      data.reverse_merge \
+        controller: token_list("hw-combobox", data[:controller]),
+        hw_combobox_expanded_value: open,
+        hw_combobox_name_when_new_value: name_when_new,
+        hw_combobox_original_name_value: hidden_field_name,
+        hw_combobox_filterable_attribute_value: "data-filterable-as",
+        hw_combobox_autocompletable_attribute_value: "data-autocompletable-as"
+    end
+
+
+    def hidden_field_id
+      id || form&.field_id(name)
+    end
+
+    def hidden_field_name
+      form&.field_name(name) || name
+    end
+
+    def hidden_field_data
+      { hw_combobox_target: "hiddenField" }
+    end
+
+    def hidden_field_value
+      form&.object&.public_send(name) || value
+    end
+
+
+    def input_id
+      "#{hidden_field_id}-hw-combobox"
+    end
+
+    def input_type
+      combobox_attrs[:type].to_s.presence_in(%w[ text search ]) || "text"
+    end
+
+    def input_data
+      combobox_attrs.fetch(:data, {}).reverse_merge! \
+        action: "
+          focus->hw-combobox#open
+          input->hw-combobox#filter
+          keydown->hw-combobox#navigate
+          click@window->hw-combobox#closeOnClickOutside
+          focusin@window->hw-combobox#closeOnFocusOutside".squish,
+        hw_combobox_target: "combobox"
+    end
+
+    def input_aria
+      combobox_attrs.fetch(:aria, {}).reverse_merge! \
+        controls: listbox_id,
+        owns: listbox_id,
+        haspopup: "listbox",
+        autocomplete: "both"
+    end
+
+
+    def listbox_id
+      "#{hidden_field_id}-hw-listbox"
+    end
+
+    def listbox_data
+      { hw_combobox_target: "listbox" }
+    end
+end

data/app/presenters/hotwire_combobox/listbox/option.rb

@@ -0,0 +1,50 @@
+class HotwireCombobox::Listbox::Option
+  def initialize(option)
+    @option = option
+  end
+
+  def render_in(view_context)
+    view_context.tag.li content, **options
+  end
+
+  private
+    attr_reader :option
+
+    def content
+      option.try(:content) || option.try(:display)
+    end
+
+    def options
+      {
+        id: id,
+        role: :option,
+        style: "cursor: pointer;",
+        data: data
+      }
+    end
+
+    def id
+      option.try(:id)
+    end
+
+    def data
+      {
+        action: "click->hw-combobox#selectOption",
+        filterable_as: filterable_as,
+        autocompletable_as: autocompletable_as,
+        value: value
+      }
+    end
+
+    def filterable_as
+      option.try(:filterable_as) || option.try(:display)
+    end
+
+    def autocompletable_as
+      option.try(:autocompletable_as) || option.try(:display)
+    end
+
+    def value
+      option.try(:value) || option.id
+    end
+end

data/app/views/hotwire_combobox/_combobox.html.erb

@@ -1,21 +1,15 @@
-<%= tag.fieldset class: "hw-combobox", data: parent_data do %>
-  <%= hidden_field_tag value_field_attrs.delete(:name),
-        value_field_attrs.delete(:value), **value_field_attrs %>
+<%= tag.fieldset **component.fieldset_attrs do %>
+  <% hidden_field_attrs = component.hidden_field_attrs %>
+  <%= hidden_field_tag \
+        hidden_field_attrs.delete(:name),
+        hidden_field_attrs.delete(:value),
+        **hidden_field_attrs %>
 
-  <%= tag.input **attrs %>
+  <%= tag.input **component.input_attrs %>
 
-  <%= tag.ul id: listbox_id, hidden: "", role: :listbox,
-        data: { "hw-combobox-target": "listbox" } do |ul| %>
-    <% options.each do |option| %>
-      <%= tag.li hw_listbox_option_content(option),
-            id: hw_listbox_option_id(option),
-            role: :option,
-            style: "cursor: pointer;",
-            data: {
-              "action": "click->hw-combobox#selectOption",
-              "filterable-as": hw_listbox_option_filterable_as(option),
-              "autocompletable-as": hw_listbox_option_autocompletable_as(option),
-              "value": hw_listbox_option_value(option) } %>
+  <%= tag.ul **component.listbox_attrs do |ul| %>
+    <% component.listbox_options.each do |option| %>
+      <%= render option %>
     <% end %>
   <% end %>
 <% end %>

data/lib/hotwire_combobox/engine.rb

@@ -3,8 +3,18 @@ module HotwireCombobox
     isolate_namespace HotwireCombobox
 
     initializer "hotwire_combobox.view_helpers" do
-      ActiveSupport.on_load :action_controller do
-        helper HotwireCombobox::Helper
+      ActiveSupport.on_load :action_view do
+        include HotwireCombobox::Helper
+
+        unless HotwireCombobox.bypass_convenience_methods?
+          module FormBuilderExtensions
+            def combobox(*args, **kwargs, &block)
+              @template.hw_combobox_tag *args, **kwargs.merge(form: self), &block
+            end
+          end
+
+          ActionView::Helpers::FormBuilder.include FormBuilderExtensions
+        end
       end
     end
 

data/lib/hotwire_combobox/version.rb

@@ -1,3 +1,3 @@
 module HotwireCombobox
-  VERSION = "0.1.9"
+  VERSION = "0.1.11"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hotwire_combobox
 version: !ruby/object:Gem::Version
-  version: 0.1.9
+  version: 0.1.11
 platform: ruby
 authors:
 - Jose Farias
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-12-15 00:00:00.000000000 Z
+date: 2023-12-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -67,6 +67,8 @@ files:
 - app/assets/javascripts/controllers/index.js
 - app/assets/javascripts/hotwire_combobox_application.js
 - app/helpers/hotwire_combobox/helper.rb
+- app/presenters/hotwire_combobox/component.rb
+- app/presenters/hotwire_combobox/listbox/option.rb
 - app/views/hotwire_combobox/_combobox.html.erb
 - config/importmap.rb
 - lib/hotwire_combobox.rb