hotwire_combobox 0.2.0 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ddf9dd6a046c3871c1b3935a8a2e9e899a88787ba6d39e673ec8eee792c920dc
-  data.tar.gz: f6d207f71a8ce4779df0cc12cd4264106b1fb086319bc8ad4c303a22604f2f1c
+  metadata.gz: fbd0907dd22a30683ba48f331a588c125f47ad6ad05d3bd613b5fc44047ed153
+  data.tar.gz: 330118f1c3cf332a93fe29f3ccf25b4a287362047d1301608c838d601d2f920c
 SHA512:
-  metadata.gz: 5cb541bd15115ee71ed82dea3d2c922abcd9c8279f835b7d6074fd825cbd08e6ac40d1b181b398ee6d00a1e4c7d7fc3f18892134cc362aa98640519ee27b9030
-  data.tar.gz: a6adeb3593a0f25d9a726be101c52c00488d367592d134c089d520cc6a087eff67f00b5f965fcc8b1c09e6c1f6f96e955815d234cdc19162a1dc657a83271183
+  metadata.gz: 5cb2373c38c8f9bbe0d7d0276183e516100effd4973c87a9587d2d45dc854cb54dbb0fa55eef0db8eac2226399878c3d02f0868ae1ae6ca45185db0f5b15739d
+  data.tar.gz: eca06ee9703ec8929bede6a1b706a86e76905c7cd7be23233c2fe997c47db67d412ea5ea437c67416fe43aeb07679074b3f5d493ce491308f99edf78c1df664b

data/README.md

@@ -4,7 +4,7 @@
 
 # Easy and Accessible Autocomplete for Ruby on Rails
 
-[![CI Tests](https://github.com/josefarias/hotwire_combobox/actions/workflows/ci_tests.yml/badge.svg)](https://github.com/josefarias/hotwire_combobox/actions/workflows/ci_tests.yml) [![Gem Version](https://badge.fury.io/rb/hotwire_combobox.svg)](https://badge.fury.io/rb/hotwire_combobox)
+[![CI](https://github.com/josefarias/hotwire_combobox/actions/workflows/ci.yml/badge.svg)](https://github.com/josefarias/hotwire_combobox/actions/workflows/ci.yml) [![Gem Version](https://badge.fury.io/rb/hotwire_combobox.svg)](https://badge.fury.io/rb/hotwire_combobox)
 
 
 > [!IMPORTANT]

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

@@ -61,11 +61,15 @@ export default class HwComboboxController extends Concerns(...concerns) {
   initialize() {
     this._initializeActors()
     this._initializeFiltering()
-    this._initializeMultiselect()
   }
 
   connect() {
+    this.idempotentConnect()
+  }
+
+  idempotentConnect() {
     this._connectSelection()
+    this._connectMultiselect()
     this._connectListAutocomplete()
     this._connectDialog()
   }

data/app/assets/javascripts/hotwire_combobox.esm.js

@@ -1,5 +1,5 @@
 /*!
-HotwireCombobox 0.2.0
+HotwireCombobox 0.2.2
 */
 import { Controller } from '@hotwired/stimulus';
 
@@ -776,7 +776,7 @@ Combobox.Multiselect = Base => class extends Base {
     }
   }
 
-  _initializeMultiselect() {
+  _connectMultiselect() {
     if (!this._isMultiPreselected) {
       this._preselectMultiple();
       this._markMultiPreselected();
@@ -1702,11 +1702,15 @@ class HwComboboxController extends Concerns(...concerns) {
   initialize() {
     this._initializeActors();
     this._initializeFiltering();
-    this._initializeMultiselect();
   }
 
   connect() {
+    this.idempotentConnect();
+  }
+
+  idempotentConnect() {
     this._connectSelection();
+    this._connectMultiselect();
     this._connectListAutocomplete();
     this._connectDialog();
   }

data/app/assets/javascripts/hotwire_combobox.umd.js

@@ -1,5 +1,5 @@
 /*!
-HotwireCombobox 0.2.0
+HotwireCombobox 0.2.2
 */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@hotwired/stimulus')) :
@@ -780,7 +780,7 @@ HotwireCombobox 0.2.0
       }
     }
 
-    _initializeMultiselect() {
+    _connectMultiselect() {
       if (!this._isMultiPreselected) {
         this._preselectMultiple();
         this._markMultiPreselected();
@@ -1706,11 +1706,15 @@ HotwireCombobox 0.2.0
     initialize() {
       this._initializeActors();
       this._initializeFiltering();
-      this._initializeMultiselect();
     }
 
     connect() {
+      this.idempotentConnect();
+    }
+
+    idempotentConnect() {
       this._connectSelection();
+      this._connectMultiselect();
       this._connectListAutocomplete();
       this._connectDialog();
     }

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

@@ -55,7 +55,7 @@ Combobox.Multiselect = Base => class extends Base {
     }
   }
 
-  _initializeMultiselect() {
+  _connectMultiselect() {
     if (!this._isMultiPreselected) {
       this._preselectMultiple()
       this._markMultiPreselected()

data/app/assets/stylesheets/hotwire_combobox.css

@@ -2,6 +2,7 @@
   --hw-active-bg-color: #F3F4F6;
   --hw-border-color: #D1D5DB;
   --hw-group-color: #57595C;
+  --hw-group-bg-color: #FFFFFF;
   --hw-invalid-color: #EF4444;
   --hw-dialog-label-color: #1D1D1D;
   --hw-focus-color: #2563EB;
@@ -78,7 +79,7 @@
 }
 
 .hw-combobox__input {
-  border: 0;
+  border: none;
   font-size: inherit;
   line-height: var(--hw-line-height);
   min-width: 0;
@@ -87,7 +88,10 @@
   width: 100%;
 }
 
-.hw-combobox__input:focus-visible {
+.hw-combobox__input:focus,
+.hw-combobox__input:focus-visible,
+.hw-combobox__input:focus-within {
+  box-shadow: none;
   outline: none;
 }
 
@@ -145,6 +149,7 @@
 }
 
 .hw-combobox__group__label {
+  background-color: var(--hw-group-bg-color);
   color: var(--hw-group-color);
   padding: var(--hw-padding--slim);
 }

data/app/presenters/hotwire_combobox/component.rb

@@ -80,15 +80,7 @@ class HotwireCombobox::Component
 
   def announcer_attrs
     {
-      style: "
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        margin: -1px;
-        padding: 0;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        border: 0;".squish,
+      class: "hw-combobox__announcer",
       aria: announcer_aria,
       data: announcer_data
     }
@@ -238,23 +230,29 @@ class HotwireCombobox::Component
     end
 
     def prefilled_display
-      return if multiselect?
+      return if multiselect? || !hidden_field_value
 
       if async_src && associated_object
         associated_object.to_combobox_display
-      elsif hidden_field_value
-        options.find { |option| option.value == hidden_field_value }&.autocompletable_as
+      elsif async_src && form_object&.respond_to?(name)
+        form_object.public_send name
+      else
+        options.find_by_value(hidden_field_value)&.autocompletable_as
       end
     end
 
     def associated_object
       @associated_object ||= if association_exists?
-        form.object.public_send association_name
+        form_object&.public_send association_name
       end
     end
 
     def association_exists?
-      form&.object&.class&.reflect_on_association(association_name).present?
+      form_object&.class&.reflect_on_association(association_name).present?
+    end
+
+    def form_object
+      form&.object
     end
 
     def async_src
@@ -302,10 +300,10 @@ class HotwireCombobox::Component
     def hidden_field_value
       return value if value
 
-      if form&.object&.defined_enums&.try :[], name
-        form.object.public_send "#{name}_before_type_cast"
+      if form_object&.defined_enums&.try :[], name
+        form_object.public_send "#{name}_before_type_cast"
       else
-        form&.object&.try(name).then do |value|
+        form_object&.try(name).then do |value|
           value.respond_to?(:map) ? value.join(",") : value
         end
       end
@@ -329,7 +327,8 @@ class HotwireCombobox::Component
           click@window->hw-combobox#closeOnClickOutside
           focusin@window->hw-combobox#closeOnFocusOutside
           turbo:before-stream-render@document->hw-combobox#rerouteListboxStreamToDialog
-          turbo:before-cache@document->hw-combobox#hideChipsForCache".squish,
+          turbo:before-cache@document->hw-combobox#hideChipsForCache
+          turbo:morph-element->hw-combobox#idempotentConnect".squish,
         hw_combobox_target: "combobox",
         async_id: canonical_id
     end

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

@@ -1,6 +1,8 @@
 require "securerandom"
 
 class HotwireCombobox::Listbox::Group
+  attr_reader :options
+
   def initialize(name, options:)
     @name = name
     @options = options
@@ -17,7 +19,7 @@ class HotwireCombobox::Listbox::Group
   end
 
   private
-    attr_reader :name, :options
+    attr_reader :name
 
     def id
       @id ||= SecureRandom.uuid

data/app/presenters/hotwire_combobox/listbox/item/collection.rb

@@ -0,0 +1,14 @@
+class HotwireCombobox::Listbox::Item::Collection < Array
+  def find_by_value(value)
+    if grouped?
+      flat_map { |item| item.options }.find { |option| option.value == value }
+    else
+      find { |option| option.value == value }
+    end
+  end
+
+  private
+    def grouped?
+      first.is_a? HotwireCombobox::Listbox::Group
+    end
+end

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

@@ -1,7 +1,7 @@
 class HotwireCombobox::Listbox::Item
   class << self
     def collection_for(view, options, render_in:, include_blank:, **custom_methods)
-      new(view, options, render_in: render_in, include_blank: include_blank, **custom_methods).items
+      new(view, options, render_in: render_in, include_blank: include_blank, **custom_methods).collection
     end
   end
 
@@ -13,10 +13,10 @@ class HotwireCombobox::Listbox::Item
     @custom_methods = custom_methods
   end
 
-  def items
+  def collection
     items = groups_or_options
     items.unshift(blank_option) if include_blank.present?
-    items
+    Collection.new items
   end
 
   private
@@ -31,7 +31,7 @@ class HotwireCombobox::Listbox::Item
     end
 
     def grouped?
-      key, value = options.to_a.first
+      _key, value = options.to_a.first
       value.is_a? Array
     end
 
@@ -43,8 +43,12 @@ class HotwireCombobox::Listbox::Item
     end
 
     def create_listbox_options(options)
-      options.map do |option|
-        HotwireCombobox::Listbox::Option.new **option_attrs(option)
+      if options.first.is_a? HotwireCombobox::Listbox::Option
+        options
+      else
+        options.map do |option|
+          HotwireCombobox::Listbox::Option.new **option_attrs(option)
+        end
       end
     end
 
@@ -93,12 +97,15 @@ class HotwireCombobox::Listbox::Item
     end
 
     def extract_blank_display_and_content
-      if include_blank.is_a? Hash
+      case include_blank
+      when Hash
         text = include_blank.delete(:text)
 
         [ text, render_content(render_opts: include_blank, object: text, attrs: { display: text, value: "" }) ]
-      else
+      when String
         [ include_blank, include_blank ]
+      else
+        [ "", "&nbsp;".html_safe ]
       end
     end
 end

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

@@ -17,10 +17,6 @@ class HotwireCombobox::Listbox::Option
     option.try(:autocompletable_as) || option.try(:display)
   end
 
-  def content
-    option.try(:content) || option.try(:display)
-  end
-
   private
     Data = Struct.new :id, :value, :display, :content, :blank, :filterable_as, :autocompletable_as, keyword_init: true
 
@@ -57,6 +53,10 @@ class HotwireCombobox::Listbox::Option
       option.try(:filterable_as) || option.try(:display)
     end
 
+    def content
+      option.try(:content) || option.try(:display)
+    end
+
     def blank?
       option.try(:blank).present?
     end

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

@@ -4,6 +4,19 @@
   <%= render "hotwire_combobox/combobox/hidden_field", component: component %>
 
   <%= tag.div **component.main_wrapper_attrs do %>
+    <%# Announcer styles defined here because they're not optional %>
+    <%= tag.style nonce: content_security_policy_nonce do %>
+      .hw-combobox__announcer {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+    <% end %>
     <%= tag.div **component.announcer_attrs %>
     <%= render "hotwire_combobox/combobox/input", component: component %>
     <%= render "hotwire_combobox/combobox/paginated_listbox", component: component %>

data/app/views/hotwire_combobox/_next_page.turbo_stream.erb

@@ -1,6 +1,6 @@
-<%# locals: (for_id:, next_page:, src:) -%>
+<%# locals: (for_id:, src:) -%>
 
 <%= turbo_stream.remove hw_pagination_frame_wrapper_id(for_id) %>
 <%= turbo_stream.append hw_listbox_id(for_id) do %>
-  <%= render "hotwire_combobox/pagination", for_id: for_id, src: hw_combobox_next_page_uri(src, next_page, for_id) %>
+  <%= render "hotwire_combobox/pagination", for_id: for_id, src: src %>
 <% end %>

data/lib/hotwire_combobox/helper.rb

@@ -26,22 +26,18 @@ module HotwireCombobox
           include_blank: nil,
           display: :to_combobox_display,
           **custom_methods)
-      if options.first.is_a? HotwireCombobox::Listbox::Option
-        options
-      else
-        HotwireCombobox::Listbox::Item.collection_for \
-          self,
-          options,
-          render_in: render_in,
-          include_blank: include_blank,
-          **custom_methods.merge(display: display)
-      end
+      HotwireCombobox::Listbox::Item.collection_for \
+        self,
+        options,
+        render_in: render_in,
+        include_blank: include_blank,
+        **custom_methods.merge(display: display)
     end
 
     def hw_paginated_combobox_options(
           options,
           for_id: params[:for_id],
-          src: request.path,
+          src: request.fullpath,
           next_page: nil,
           render_in: {},
           include_blank: {},
@@ -49,7 +45,7 @@ module HotwireCombobox
       include_blank = params[:page].to_i > 0 ? nil : include_blank
       options = hw_combobox_options options, render_in: render_in, include_blank: include_blank, **custom_methods
       this_page = render "hotwire_combobox/paginated_options", for_id: for_id, options: options
-      next_page = render "hotwire_combobox/next_page", for_id: for_id, src: src, next_page: next_page
+      next_page = render "hotwire_combobox/next_page", for_id: for_id, src: hw_combobox_next_page_uri(src, next_page, for_id)
 
       safe_join [ this_page, next_page ]
     end
@@ -150,23 +146,13 @@ module HotwireCombobox
         "#{id}__hw_combobox_pagination"
       end
 
-      def hw_combobox_next_page_uri(uri, next_page, for_id)
-        if next_page
-          hw_uri_with_params uri,
-            page: next_page,
-            q: params[:q],
-            for_id: for_id,
-            format: :turbo_stream
-        end
-      end
-
       def hw_combobox_page_stream_action
         params[:page].to_i > 0 ? :append : :update
       end
 
       def hw_uri_with_params(url_or_path, **params)
         URI.parse(url_or_path).tap do |url_or_path|
-          query = URI.decode_www_form(url_or_path.query || "").to_h.merge(params)
+          query = URI.decode_www_form(url_or_path.query || "").to_h.merge(params.compact_blank.stringify_keys)
           url_or_path.query = URI.encode_www_form query
         end.to_s
       rescue URI::InvalidURIError
@@ -182,9 +168,19 @@ module HotwireCombobox
       end
 
     private
+      def hw_combobox_next_page_uri(uri, next_page, for_id)
+        return unless next_page
+
+        hw_uri_with_params uri,
+          page: next_page,
+          q: params[:q],
+          for_id: for_id,
+          format: :turbo_stream
+      end
+
       def hw_extract_options_and_src(options_or_src, render_in, include_blank)
         if options_or_src.is_a? String
-          [ [], options_or_src ]
+          [ hw_combobox_options([]), options_or_src ]
         else
           [ hw_combobox_options(options_or_src, render_in: render_in, include_blank: include_blank), nil ]
         end

data/lib/hotwire_combobox/version.rb

@@ -1,3 +1,3 @@
 module HotwireCombobox
-  VERSION = "0.2.0"
+  VERSION = "0.2.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hotwire_combobox
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.2
 platform: ruby
 authors:
 - Jose Farias
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-03-22 00:00:00.000000000 Z
+date: 2024-04-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -52,6 +52,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '1.2'
+- !ruby/object:Gem::Dependency
+  name: mocha
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.1'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.1'
 description: An accessible autocomplete for Ruby on Rails apps using Hotwire.
 email:
 - jose@farias.mx
@@ -91,6 +105,7 @@ files:
 - app/presenters/hotwire_combobox/component/customizable.rb
 - app/presenters/hotwire_combobox/listbox/group.rb
 - app/presenters/hotwire_combobox/listbox/item.rb
+- app/presenters/hotwire_combobox/listbox/item/collection.rb
 - app/presenters/hotwire_combobox/listbox/option.rb
 - app/views/hotwire_combobox/_component.html.erb
 - app/views/hotwire_combobox/_next_page.turbo_stream.erb
@@ -129,7 +144,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.6
+rubygems_version: 3.5.7
 signing_key:
 specification_version: 4
 summary: Accessible Autocomplete for Rails apps