hotwire_combobox 0.1.32 → 0.1.33

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eb06e6c688920de5447b5fbea7fd20c242e228a7d335b8e9841cd07c7df03cb0
-  data.tar.gz: 338aad9ff496b0449e509543698c45b7581cbe9d6c13e869b25a86fa8819b726
+  metadata.gz: 415f50ba9630121312ea65c8f04435ff57ba386ffb9851dc9e09da8a6dc68352
+  data.tar.gz: de3d2d2bfb9d9f9e21292acf49152484ad05317b16daade967ea695afbf3bc87
 SHA512:
-  metadata.gz: 84e88c954657e5f527ac5b564ff210ddeb42cd8e9dcb33a5ef40a9882d6edabbbe40fd53211a95b46056336399babf728bb11c7e5993dd845e2a8cbc86fe7b47
-  data.tar.gz: 9803e31d7244ec3b87d6a6e0dc3532db155f206a540c69d4ee07d586e5e781da0dc5a267e5fa9c8bd4394b006272cfa361d511fb48c29c4d37d7c9a03627107b
+  metadata.gz: aab8d6575ec896e26035b5040afa0765b3dacd92d101589b20f305840a5831174cad852325bc64971e83f182260454d2d836be665f19a33cf845d972d90b8134
+  data.tar.gz: 5f4393d0d3dbf29c9bf194210cf7d845c35062a7fd4d952e6acafae2c407ce158d63735f703419311c15ab3996002fa573617cbff26b98406d7e98bdf0e85e9f

data/README.md

@@ -18,6 +18,8 @@ Add this line to your application's Gemfile and run `bundle install`:
 gem "hotwire_combobox"
 ```
 
+Only apps that use importmaps are currently supported. Suport for other JS solutions is in progress.
+
 ## Docs
 
 <p align="center">

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

@@ -1,5 +1,5 @@
-import Combobox from "models/combobox"
-import { Concerns } from "helpers"
+import Combobox from "hw_combobox/models/combobox"
+import { Concerns } from "hw_combobox/helpers"
 import { Controller } from "@hotwired/stimulus"
 
 const concerns = [
@@ -10,6 +10,7 @@ const concerns = [
   Combobox.Dialog,
   Combobox.Filtering,
   Combobox.Navigation,
+  Combobox.NewOptions,
   Combobox.Options,
   Combobox.Selection,
   Combobox.Toggle,

data/app/assets/javascripts/{helpers.js → hw_combobox/helpers.js}

@@ -1,3 +1,5 @@
+export const nullEvent = new Event("NULL")
+
 export function Concerns(Base, ...mixins) {
   return mixins.reduce((accumulator, current) => current(accumulator), Base)
 }
@@ -50,3 +52,7 @@ export function debounce(fn, delay = 150) {
     timeoutId = setTimeout(callback, delay)
   }
 }
+
+export function isDeleteEvent(event) {
+  return event.inputType === "deleteContentBackward" || event.inputType === "deleteWordBackward"
+}

data/app/assets/javascripts/{models → hw_combobox/models}/combobox/actors.js

@@ -1,4 +1,4 @@
-import Combobox from "models/combobox/base"
+import Combobox from "hw_combobox/models/combobox/base"
 
 Combobox.Actors = Base => class extends Base {
   _initializeActors() {

data/app/assets/javascripts/{models → hw_combobox/models}/combobox/async_loading.js

@@ -1,4 +1,4 @@
-import Combobox from "models/combobox/base"
+import Combobox from "hw_combobox/models/combobox/base"
 
 Combobox.AsyncLoading = Base => class extends Base {
   get _isAsync() {

data/app/assets/javascripts/{models → hw_combobox/models}/combobox/autocomplete.js

@@ -1,5 +1,5 @@
-import Combobox from "models/combobox/base"
-import { startsWith } from "helpers"
+import Combobox from "hw_combobox/models/combobox/base"
+import { startsWith } from "hw_combobox/helpers"
 
 Combobox.Autocomplete = Base => class extends Base {
   _connectListAutocomplete() {
@@ -29,6 +29,17 @@ Combobox.Autocomplete = Base => class extends Base {
     this.listboxTarget.style.display = "none"
   }
 
+  get _isExactAutocompleteMatch() {
+    return this._immediatelyAutocompletableValue === this._actingCombobox.value
+  }
+
+  // All `_isExactAutocompleteMatch` matches are `_isPartialAutocompleteMatch` matches
+  // but not all `_isPartialAutocompleteMatch` matches are `_isExactAutocompleteMatch` matches.
+  get _isPartialAutocompleteMatch() {
+    return !!this._immediatelyAutocompletableValue &&
+      startsWith(this._immediatelyAutocompletableValue, this._actingCombobox.value)
+  }
+
   get _autocompletesList() {
     return this.autocompleteValue === "both" || this.autocompleteValue === "list"
   }
@@ -36,4 +47,8 @@ Combobox.Autocomplete = Base => class extends Base {
   get _autocompletesInline() {
     return this.autocompleteValue === "both" || this.autocompleteValue === "inline"
   }
+
+  get _immediatelyAutocompletableValue() {
+    return this._visibleOptionElements[0]?.getAttribute(this.autocompletableAttributeValue)
+  }
 }

data/app/assets/javascripts/{models → hw_combobox/models}/combobox/dialog.js

@@ -1,4 +1,4 @@
-import Combobox from "models/combobox/base"
+import Combobox from "hw_combobox/models/combobox/base"
 
 Combobox.Dialog = Base => class extends Base {
   _connectDialog() {

data/app/assets/javascripts/{models → hw_combobox/models}/combobox/filtering.js

@@ -1,7 +1,7 @@
 
-import Combobox from "models/combobox/base"
-import { applyFilter, nextFrame, debounce } from "helpers"
-import { get } from "vendor/requestjs"
+import Combobox from "hw_combobox/models/combobox/base"
+import { applyFilter, nextFrame, debounce, isDeleteEvent } from "hw_combobox/helpers"
+import { get } from "hw_combobox/vendor/requestjs"
 
 Combobox.Filtering = Base => class extends Base {
   filter(event) {
@@ -25,7 +25,7 @@ Combobox.Filtering = Base => class extends Base {
 
     await get(this.asyncSrcValue, { responseKind: "turbo-stream", query: { q } })
 
-    this._afterTurboStreamRender(() => this._commitFilter(q, event))
+    this._afterTurboStreamRender(() => this._commitFilter(event))
   }
 
   _filterSync(event) {
@@ -35,15 +35,13 @@ Combobox.Filtering = Base => class extends Base {
 
     this._allOptionElements.forEach(applyFilter(query, { matching: this.filterableAttributeValue }))
 
-    this._commitFilter(query, event)
+    this._commitFilter(event)
   }
 
-  _commitFilter(query, event) {
-    const isDeleting = event.inputType === "deleteContentBackward"
-
-    if (this._isValidNewOption(query, { ignoreAutocomplete: isDeleting })) {
-      this._selectNew(query)
-    } else if (isDeleting) {
+  _commitFilter(event) {
+    if (this._shouldTreatAsNewOptionForFiltering(!isDeleteEvent(event))) {
+      this._selectNew()
+    } else if (isDeleteEvent(event)) {
       this._deselect()
     } else {
       this._select(this._visibleOptionElements[0])
@@ -54,4 +52,8 @@ Combobox.Filtering = Base => class extends Base {
     await nextFrame()
     callback()
   }
+
+  get _isQueried() {
+    return this._actingCombobox.value.length > 0
+  }
 }

data/app/assets/javascripts/{models → hw_combobox/models}/combobox/navigation.js

@@ -1,5 +1,5 @@
-import Combobox from "models/combobox/base"
-import { cancel } from "helpers"
+import Combobox from "hw_combobox/models/combobox/base"
+import { cancel } from "hw_combobox/helpers"
 
 Combobox.Navigation = Base => class extends Base {
   navigate(event) {

data/app/assets/javascripts/hw_combobox/models/combobox/new_options.js

@@ -0,0 +1,37 @@
+import Combobox from "hw_combobox/models/combobox/base"
+
+Combobox.NewOptions = Base => class extends Base {
+  _shouldTreatAsNewOptionForFiltering(queryIsBeingRefined) {
+    if (queryIsBeingRefined) {
+      return this._isNewOptionWithNoPotentialMatches
+    } else {
+      return this._isNewOptionWithPotentialMatches
+    }
+  }
+
+  // If the user is going to keep refining the query, we can't be sure whether
+  // the option will end up being new or not unless there are no potential matches.
+  // +_isNewOptionWithNoPotentialMatches+ allows us to make our best guess
+  // while the state of the combobox is still in flux.
+  //
+  // It's okay for the combobox to say it's not new even if it will be eventually,
+  // as only the final state matters for submission purposes. This method exists
+  // as a best effort to keep the state accurate as often as we can.
+  //
+  // Note that the first visible option is automatically selected as you type.
+  // So if there's a partial match, it's not a new option at this point.
+  //
+  // The final state is locked-in upon closing the combobox via `_isNewOptionWithPotentialMatches`.
+  get _isNewOptionWithNoPotentialMatches() {
+    return this._isNewOptionWithPotentialMatches && !this._isPartialAutocompleteMatch
+  }
+
+  // If the query is finalized, we don't care that there are potential matches
+  // because new options can be substrings of existing options.
+  //
+  // We can't use `_isNewOptionWithNoPotentialMatches` because that would
+  // rule out new options that are partial matches.
+  get _isNewOptionWithPotentialMatches() {
+    return this._isQueried && this._allowNew && !this._isExactAutocompleteMatch
+  }
+}

data/app/assets/javascripts/{models → hw_combobox/models}/combobox/options.js

@@ -1,5 +1,5 @@
-import Combobox from "models/combobox/base"
-import { visible, startsWith } from "helpers"
+import Combobox from "hw_combobox/models/combobox/base"
+import { visible } from "hw_combobox/helpers"
 
 Combobox.Options = Base => class extends Base {
   _resetOptions() {
@@ -7,14 +7,6 @@ Combobox.Options = Base => class extends Base {
     this.hiddenFieldTarget.name = this.originalNameValue
   }
 
-  _isValidNewOption(query, { ignoreAutocomplete = false } = {}) {
-    const typedValue = this._actingCombobox.value
-    const autocompletedValue = this._visibleOptionElements[0]?.getAttribute(this.autocompletableAttributeValue)
-    const insufficientAutocomplete = !autocompletedValue || !startsWith(autocompletedValue, typedValue)
-
-    return query.length > 0 && this._allowNew && (ignoreAutocomplete || insufficientAutocomplete)
-  }
-
   get _allowNew() {
     return !!this.nameWhenNewValue
   }

data/app/assets/javascripts/{models → hw_combobox/models}/combobox/selection.js

@@ -1,9 +1,10 @@
-import Combobox from "models/combobox/base"
-import { wrapAroundAccess } from "helpers"
+import Combobox from "hw_combobox/models/combobox/base"
+import { wrapAroundAccess, nullEvent } from "hw_combobox/helpers"
 
 Combobox.Selection = Base => class extends Base {
   selectOption(event) {
     this._select(event.currentTarget)
+    this.filter(event)
     this.close()
   }
 
@@ -49,9 +50,9 @@ Combobox.Selection = Base => class extends Base {
     if (option) this._commitSelection(option, { selected: false })
   }
 
-  _selectNew(query) {
+  _selectNew() {
     this._resetOptions()
-    this.hiddenFieldTarget.value = query
+    this.hiddenFieldTarget.value = this._actingCombobox.value
     this.hiddenFieldTarget.name = this.nameWhenNewValue
   }
 
@@ -70,7 +71,18 @@ Combobox.Selection = Base => class extends Base {
     }
   }
 
+  _selectFuzzyMatch() {
+    if (this._isFuzzyMatch) {
+      this._select(this._visibleOptionElements[0], { force: true })
+      this.filter(nullEvent)
+    }
+  }
+
   get _hasValueButNoSelection() {
     return this.hiddenFieldTarget.value && !this._selectedOptionElement
   }
+
+  get _isFuzzyMatch() {
+    return this._isQueried && !!this._visibleOptionElements[0] && !this._isNewOptionWithPotentialMatches
+  }
 }

data/app/assets/javascripts/{models → hw_combobox/models}/combobox/toggle.js

@@ -1,5 +1,5 @@
-import Combobox from "models/combobox/base"
-import { disableBodyScroll, enableBodyScroll } from "vendor/bodyScrollLock"
+import Combobox from "hw_combobox/models/combobox/base"
+import { disableBodyScroll, enableBodyScroll } from "hw_combobox/vendor/bodyScrollLock"
 
 Combobox.Toggle = Base => class extends Base {
   open() {
@@ -51,9 +51,7 @@ Combobox.Toggle = Base => class extends Base {
   }
 
   _ensureSelection() {
-    if (!this._isValidNewOption(this._actingCombobox.value, { ignoreAutocomplete: true })) {
-      this._select(this._selectedOptionElement, { force: true })
-    }
+    this._selectFuzzyMatch()
   }
 
   _openByFocusing() {

data/app/assets/javascripts/{models → hw_combobox/models}/combobox/validity.js

@@ -1,4 +1,4 @@
-import Combobox from "models/combobox/base"
+import Combobox from "hw_combobox/models/combobox/base"
 
 Combobox.Validity = Base => class extends Base {
   _markValid() {

data/app/assets/javascripts/hw_combobox/models/combobox.js

@@ -0,0 +1,15 @@
+import Combobox from "hw_combobox/models/combobox/base"
+
+import "hw_combobox/models/combobox/actors"
+import "hw_combobox/models/combobox/async_loading"
+import "hw_combobox/models/combobox/autocomplete"
+import "hw_combobox/models/combobox/dialog"
+import "hw_combobox/models/combobox/filtering"
+import "hw_combobox/models/combobox/navigation"
+import "hw_combobox/models/combobox/new_options"
+import "hw_combobox/models/combobox/options"
+import "hw_combobox/models/combobox/selection"
+import "hw_combobox/models/combobox/toggle"
+import "hw_combobox/models/combobox/validity"
+
+export default Combobox

data/app/assets/stylesheets/hotwire_combobox.css

@@ -47,7 +47,6 @@
   margin: 0;
   padding: 0;
   position: relative;
-  isolation: isolate;
 
   &, * {
     box-sizing: border-box;

data/app/presenters/hotwire_combobox/component.rb

@@ -19,7 +19,7 @@ class HotwireCombobox::Component
       **rest
     @view, @autocomplete, @id, @name, @value, @form, @async_src,
     @name_when_new, @open, @data, @mobile_at, @options, @dialog_label =
-      view, autocomplete, id, name, value, form, async_src,
+      view, autocomplete, id, name.to_s, value, form, async_src,
       name_when_new, open, data, mobile_at, options, dialog_label
 
     @combobox_attrs = input.reverse_merge(rest).with_indifferent_access
@@ -146,8 +146,8 @@ class HotwireCombobox::Component
       :association_name
 
     def infer_association_name
-      if name.to_s.include?("_id")
-        name.to_s.sub(/_id\z/, "")
+      if name.include?("_id")
+        name.sub(/_id\z/, "")
       end
     end
 
@@ -204,7 +204,13 @@ class HotwireCombobox::Component
     end
 
     def hidden_field_value
-      form&.object&.public_send(name) || value
+      return value if value
+
+      if form&.object&.defined_enums&.try :[], name
+        form.object.public_send "#{name}_before_type_cast"
+      else
+        form&.object&.try name
+      end
     end
 
 

data/lib/hotwire_combobox/engine.rb

@@ -21,7 +21,7 @@ module HotwireCombobox
 
     initializer "hotwire_combobox.importmap", before: "importmap" do |app|
       if Rails.application.respond_to?(:importmap)
-        app.config.importmap.paths << Engine.root.join("config/importmap.rb")
+        app.config.importmap.paths << Engine.root.join("config/hw_importmap.rb")
       end
     end
 

data/lib/hotwire_combobox/helper.rb

@@ -27,13 +27,8 @@ module HotwireCombobox
       if options.first.is_a? HotwireCombobox::Listbox::Option
         options
       else
-        content = if render_in.present?
-          ->(object) { render(**render_in.merge(object: object)) }
-        else
-          methods[:content]
-        end
-
-        hw_parse_combobox_options options, **methods.merge(display: display, content: content)
+        render_in_proc = ->(object) { render(**render_in.merge(object: object)) } if render_in.present?
+        hw_parse_combobox_options options, render_in: render_in_proc, **methods.merge(display: display)
       end
     end
     hw_alias :hw_combobox_options
@@ -86,19 +81,36 @@ module HotwireCombobox
         url_or_path
       end
 
-      def hw_parse_combobox_options(options, **methods)
+      def hw_parse_combobox_options(options, render_in: nil, **methods)
         options.map do |option|
-          attrs = option.is_a?(Hash) ? option : hw_option_attrs_for_obj(option, **methods)
-          HotwireCombobox::Listbox::Option.new **attrs
+          HotwireCombobox::Listbox::Option.new **hw_option_attrs_for(option, render_in: render_in, **methods)
         end
       end
 
-      def hw_option_attrs_for_obj(option, **methods)
-        {}.tap do |attrs|
-          attrs[:id] = hw_call_method_or_proc(option, methods[:id]) if methods[:id]
-          attrs[:value] = hw_call_method_or_proc(option, methods[:value] || :id)
-          attrs[:display] = hw_call_method_or_proc(option, methods[:display]) if methods[:display]
-          attrs[:content] = hw_call_method_or_proc(option, methods[:content]) if methods[:content]
+      def hw_option_attrs_for(option, render_in: nil, **methods)
+        case option
+        when Hash
+          option
+        when String
+          {}.tap do |attrs|
+            attrs[:display] = option
+            attrs[:value] = option
+            attrs[:content] = render_in.(option) if render_in
+          end
+        when Array
+          {}.tap do |attrs|
+            attrs[:display] = option.first
+            attrs[:value] = option.last
+            attrs[:content] = render_in.(option.first) if render_in
+          end
+        else
+          {}.tap do |attrs|
+            attrs[:value] = hw_call_method_or_proc(option, methods[:value] || :id)
+
+            attrs[:id] = hw_call_method_or_proc(option, methods[:id]) if methods[:id]
+            attrs[:display] = hw_call_method_or_proc(option, methods[:display]) if methods[:display]
+            attrs[:content] = hw_call_method_or_proc(option, render_in || methods[:content]) if render_in || methods[:content]
+          end
         end
       end
 

data/lib/hotwire_combobox/version.rb

@@ -1,3 +1,3 @@
 module HotwireCombobox
-  VERSION = "0.1.32"
+  VERSION = "0.1.33"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hotwire_combobox
 version: !ruby/object:Gem::Version
-  version: 0.1.32
+  version: 0.1.33
 platform: ruby
 authors:
 - Jose Farias
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-02-08 00:00:00.000000000 Z
+date: 2024-02-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -63,25 +63,23 @@ files:
 - README.md
 - Rakefile
 - app/assets/config/hw_combobox_manifest.js
-- app/assets/javascripts/controllers/application.js
 - app/assets/javascripts/controllers/hw_combobox_controller.js
-- app/assets/javascripts/controllers/index.js
-- app/assets/javascripts/helpers.js
-- app/assets/javascripts/hotwire_combobox_application.js
-- app/assets/javascripts/models/combobox.js
-- app/assets/javascripts/models/combobox/actors.js
-- app/assets/javascripts/models/combobox/async_loading.js
-- app/assets/javascripts/models/combobox/autocomplete.js
-- app/assets/javascripts/models/combobox/base.js
-- app/assets/javascripts/models/combobox/dialog.js
-- app/assets/javascripts/models/combobox/filtering.js
-- app/assets/javascripts/models/combobox/navigation.js
-- app/assets/javascripts/models/combobox/options.js
-- app/assets/javascripts/models/combobox/selection.js
-- app/assets/javascripts/models/combobox/toggle.js
-- app/assets/javascripts/models/combobox/validity.js
-- app/assets/javascripts/vendor/bodyScrollLock.js
-- app/assets/javascripts/vendor/requestjs.js
+- app/assets/javascripts/hw_combobox/helpers.js
+- app/assets/javascripts/hw_combobox/models/combobox.js
+- app/assets/javascripts/hw_combobox/models/combobox/actors.js
+- app/assets/javascripts/hw_combobox/models/combobox/async_loading.js
+- app/assets/javascripts/hw_combobox/models/combobox/autocomplete.js
+- app/assets/javascripts/hw_combobox/models/combobox/base.js
+- app/assets/javascripts/hw_combobox/models/combobox/dialog.js
+- app/assets/javascripts/hw_combobox/models/combobox/filtering.js
+- app/assets/javascripts/hw_combobox/models/combobox/navigation.js
+- app/assets/javascripts/hw_combobox/models/combobox/new_options.js
+- app/assets/javascripts/hw_combobox/models/combobox/options.js
+- app/assets/javascripts/hw_combobox/models/combobox/selection.js
+- app/assets/javascripts/hw_combobox/models/combobox/toggle.js
+- app/assets/javascripts/hw_combobox/models/combobox/validity.js
+- app/assets/javascripts/hw_combobox/vendor/bodyScrollLock.js
+- app/assets/javascripts/hw_combobox/vendor/requestjs.js
 - app/assets/stylesheets/hotwire_combobox.css
 - app/presenters/hotwire_combobox/component.rb
 - app/presenters/hotwire_combobox/listbox/option.rb
@@ -93,7 +91,7 @@ files:
 - app/views/hotwire_combobox/combobox/_hidden_field.html.erb
 - app/views/hotwire_combobox/combobox/_input.html.erb
 - app/views/hotwire_combobox/combobox/_paginated_listbox.html.erb
-- config/importmap.rb
+- config/hw_importmap.rb
 - lib/hotwire_combobox.rb
 - lib/hotwire_combobox/engine.rb
 - lib/hotwire_combobox/helper.rb
@@ -120,7 +118,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.18
+rubygems_version: 3.5.6
 signing_key:
 specification_version: 4
 summary: Autocomplete for Rails apps using Hotwire

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

@@ -1,9 +0,0 @@
-import { Application } from "@hotwired/stimulus"
-
-const application = Application.start()
-
-// Configure Stimulus development experience
-application.debug = false
-window.Stimulus   = application
-
-export { application }

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

@@ -1,3 +0,0 @@
-import { application } from "controllers/application"
-import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
-eagerLoadControllersFrom("controllers", application)

data/app/assets/javascripts/hotwire_combobox_application.js

@@ -1 +0,0 @@
-import "controllers"

data/app/assets/javascripts/models/combobox.js

@@ -1,14 +0,0 @@
-import Combobox from "models/combobox/base"
-
-import "models/combobox/actors"
-import "models/combobox/async_loading"
-import "models/combobox/autocomplete"
-import "models/combobox/dialog"
-import "models/combobox/filtering"
-import "models/combobox/navigation"
-import "models/combobox/options"
-import "models/combobox/selection"
-import "models/combobox/toggle"
-import "models/combobox/validity"
-
-export default Combobox