hotwire_combobox 0.1.42 → 0.2.0

data/app/presenters/hotwire_combobox/component.rb

@@ -2,33 +2,39 @@ require "securerandom"
 
 class HotwireCombobox::Component
   include Customizable
+  include ActiveModel::Validations
 
   attr_reader :options, :label
 
+  validate :name_when_new_on_multiselect_must_match_original_name
+
   def initialize \
-      view, name,
-      association_name: nil,
-      async_src:        nil,
-      autocomplete:     :both,
-      data:             {},
-      dialog_label:     nil,
-      form:             nil,
-      id:               nil,
-      input:            {},
-      label:            nil,
-      mobile_at:        "640px",
-      name_when_new:    nil,
-      open:             false,
-      options:          [],
-      value:            nil,
-      **rest
+        view, name,
+        association_name:     nil,
+        async_src:            nil,
+        autocomplete:         :both,
+        data:                 {},
+        dialog_label:         nil,
+        form:                 nil,
+        id:                   nil,
+        input:                {},
+        label:                nil,
+        mobile_at:            "640px",
+        multiselect_chip_src: nil,
+        name_when_new:        nil,
+        open:                 false,
+        options:              [],
+        value:                nil,
+        **rest
     @view, @autocomplete, @id, @name, @value, @form, @async_src, @label,
-    @name_when_new, @open, @data, @mobile_at, @options, @dialog_label =
+    @name_when_new, @open, @data, @mobile_at, @multiselect_chip_src, @options, @dialog_label =
       view, autocomplete, id, name.to_s, value, form, async_src, label,
-      name_when_new, open, data, mobile_at, options, dialog_label
+      name_when_new, open, data, mobile_at, multiselect_chip_src, options, dialog_label
 
     @combobox_attrs = input.reverse_merge(rest).deep_symbolize_keys
     @association_name = association_name || infer_association_name
+
+    validate!
   end
 
   def render_in(view_context, &block)
@@ -39,7 +45,7 @@ class HotwireCombobox::Component
 
   def fieldset_attrs
     apply_customizations_to :fieldset, base: {
-      class: "hw-combobox",
+      class: [ "hw-combobox", { "hw-combobox--multiple": multiselect? } ],
       data: fieldset_data
     }
   end
@@ -72,6 +78,23 @@ class HotwireCombobox::Component
   end
 
 
+  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,
+      aria: announcer_aria,
+      data: announcer_data
+    }
+  end
+
+
   def input_attrs
     nested_attrs = %i[ data aria ]
 
@@ -103,7 +126,8 @@ class HotwireCombobox::Component
       role: :listbox,
       class: "hw-combobox__listbox",
       hidden: "",
-      data: listbox_data
+      data: listbox_data,
+      aria: listbox_aria
     }
   end
 
@@ -150,7 +174,8 @@ class HotwireCombobox::Component
       id: dialog_listbox_id,
       class: "hw-combobox__dialog__listbox",
       role: :listbox,
-      data: dialog_listbox_data
+      data: dialog_listbox_data,
+      aria: dialog_listbox_aria
     }
   end
 
@@ -173,10 +198,23 @@ class HotwireCombobox::Component
   private
     attr_reader :view, :autocomplete, :id, :name, :value, :form,
       :name_when_new, :open, :data, :combobox_attrs, :mobile_at,
-      :association_name
+      :association_name, :multiselect_chip_src
+
+    def name_when_new_on_multiselect_must_match_original_name
+      return unless multiselect? && name_when_new.present?
+
+      unless name_when_new.to_s == name
+        errors.add :name_when_new, :must_match_original_name,
+          message: "must match the regular name ('#{name}', in this case) on multiselect comboboxes."
+      end
+    end
+
+    def multiselect?
+      multiselect_chip_src.present?
+    end
 
     def infer_association_name
-      if name.include?("_id")
+      if name.end_with?("_id")
         name.sub(/_id\z/, "")
       end
     end
@@ -192,6 +230,7 @@ class HotwireCombobox::Component
         hw_combobox_small_viewport_max_width_value: mobile_at,
         hw_combobox_async_src_value: async_src,
         hw_combobox_prefilled_display_value: prefilled_display,
+        hw_combobox_selection_chip_src_value: multiselect_chip_src,
         hw_combobox_filterable_attribute_value: "data-filterable-as",
         hw_combobox_autocompletable_attribute_value: "data-autocompletable-as",
         hw_combobox_selected_class: "hw-combobox__option--selected",
@@ -199,6 +238,8 @@ class HotwireCombobox::Component
     end
 
     def prefilled_display
+      return if multiselect?
+
       if async_src && associated_object
         associated_object.to_combobox_display
       elsif hidden_field_value
@@ -227,7 +268,22 @@ class HotwireCombobox::Component
 
 
     def main_wrapper_data
-      { hw_combobox_target: "mainWrapper" }
+      {
+        action: ("click->hw-combobox#openByFocusing:self" if multiselect?),
+        hw_combobox_target: "mainWrapper"
+      }
+    end
+
+
+    def announcer_aria
+      {
+        live: :polite,
+        atomic: true
+      }
+    end
+
+    def announcer_data
+      { hw_combobox_target: "announcer" }
     end
 
 
@@ -249,7 +305,9 @@ class HotwireCombobox::Component
       if form&.object&.defined_enums&.try :[], name
         form.object.public_send "#{name}_before_type_cast"
       else
-        form&.object&.try name
+        form&.object&.try(name).then do |value|
+          value.respond_to?(:map) ? value.join(",") : value
+        end
       end
     end
 
@@ -266,11 +324,12 @@ class HotwireCombobox::Component
       combobox_attrs.fetch(:data, {}).merge \
         action: "
           focus->hw-combobox#open
-          input->hw-combobox#filter
+          input->hw-combobox#filterAndSelect
           keydown->hw-combobox#navigate
           click@window->hw-combobox#closeOnClickOutside
           focusin@window->hw-combobox#closeOnFocusOutside
-          turbo:before-stream-render@document->hw-combobox#rerouteListboxStreamToDialog".squish,
+          turbo:before-stream-render@document->hw-combobox#rerouteListboxStreamToDialog
+          turbo:before-cache@document->hw-combobox#hideChipsForCache".squish,
         hw_combobox_target: "combobox",
         async_id: canonical_id
     end
@@ -301,6 +360,10 @@ class HotwireCombobox::Component
       { hw_combobox_target: "listbox" }
     end
 
+    def listbox_aria
+      { multiselectable: multiselect? }
+    end
+
 
     def dialog_data
       {
@@ -316,7 +379,7 @@ class HotwireCombobox::Component
     def dialog_input_data
       {
         action: "
-          input->hw-combobox#filter
+          input->hw-combobox#filterAndSelect
           keydown->hw-combobox#navigate
           click@window->hw-combobox#closeOnClickOutside".squish,
         hw_combobox_target: "dialogCombobox"
@@ -340,6 +403,10 @@ class HotwireCombobox::Component
       { hw_combobox_target: "dialogListbox" }
     end
 
+    def dialog_listbox_aria
+      { multiselectable: multiselect? }
+    end
+
     def dialog_focus_trap_data
       { hw_combobox_target: "dialogFocusTrap" }
     end

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

@@ -0,0 +1,45 @@
+require "securerandom"
+
+class HotwireCombobox::Listbox::Group
+  def initialize(name, options:)
+    @name = name
+    @options = options
+  end
+
+  def render_in(view)
+    view.tag.ul **group_attrs do
+      view.concat view.tag.li(name, **label_attrs)
+
+      options.map do |option|
+        view.concat view.render(option)
+      end
+    end
+  end
+
+  private
+    attr_reader :name, :options
+
+    def id
+      @id ||= SecureRandom.uuid
+    end
+
+    def group_attrs
+      {
+        class: "hw-combobox__group",
+        role: :group,
+        aria: group_aria
+      }
+    end
+
+    def group_aria
+      { labelledby: id }
+    end
+
+    def label_attrs
+      {
+        id: id,
+        class: "hw-combobox__group__label",
+        role: :presentation
+      }
+    end
+end

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

@@ -0,0 +1,104 @@
+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
+    end
+  end
+
+  def initialize(view, options, render_in:, include_blank:, **custom_methods)
+    @view = view
+    @options = options
+    @render_in = render_in
+    @include_blank = include_blank
+    @custom_methods = custom_methods
+  end
+
+  def items
+    items = groups_or_options
+    items.unshift(blank_option) if include_blank.present?
+    items
+  end
+
+  private
+    attr_reader :view, :options, :render_in, :include_blank, :custom_methods
+
+    def groups_or_options
+      if grouped?
+        create_listbox_group options
+      else
+        create_listbox_options options
+      end
+    end
+
+    def grouped?
+      key, value = options.to_a.first
+      value.is_a? Array
+    end
+
+    def create_listbox_group(options)
+      options.map do |group_name, group_options|
+        HotwireCombobox::Listbox::Group.new group_name,
+          options: create_listbox_options(group_options)
+      end
+    end
+
+    def create_listbox_options(options)
+      options.map do |option|
+        HotwireCombobox::Listbox::Option.new **option_attrs(option)
+      end
+    end
+
+    def option_attrs(option)
+      case option
+      when Hash
+        option.tap do |attrs|
+          attrs[:content] = render_content(object: attrs[:display], attrs: attrs) if render_in.present?
+        end
+      when String
+        {}.tap do |attrs|
+          attrs[:display] = option
+          attrs[:value] = option
+          attrs[:content] = render_content(object: attrs[:display], attrs: attrs) if render_in.present?
+        end
+      when Array
+        {}.tap do |attrs|
+          attrs[:display] = option.first
+          attrs[:value] = option.last
+          attrs[:content] = render_content(object: attrs[:display], attrs: attrs) if render_in.present?
+        end
+      else
+        {}.tap do |attrs|
+          attrs[:id] = view.hw_call_method_or_proc(option, custom_methods[:id]) if custom_methods[:id]
+          attrs[:display] = view.hw_call_method_or_proc(option, custom_methods[:display]) if custom_methods[:display]
+          attrs[:value] = view.hw_call_method_or_proc(option, custom_methods[:value] || :id)
+
+          if render_in.present?
+            attrs[:content] = render_content(object: option, attrs: attrs)
+          elsif custom_methods[:content]
+            attrs[:content] = view.hw_call_method_or_proc(option, custom_methods[:content])
+          end
+        end
+      end
+    end
+
+    def render_content(render_opts: render_in, object:, attrs:)
+      view.render **render_opts.reverse_merge(
+        object: object,
+        locals: { combobox_display: attrs[:display], combobox_value: attrs[:value] })
+    end
+
+    def blank_option
+      display, content = extract_blank_display_and_content
+      HotwireCombobox::Listbox::Option.new display: display, content: content, value: "", blank: true
+    end
+
+    def extract_blank_display_and_content
+      if include_blank.is_a? Hash
+        text = include_blank.delete(:text)
+
+        [ text, render_content(render_opts: include_blank, object: text, attrs: { display: text, value: "" }) ]
+      else
+        [ include_blank, include_blank ]
+      end
+    end
+end

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

@@ -17,6 +17,10 @@ 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
 
@@ -27,7 +31,8 @@ class HotwireCombobox::Listbox::Option
         id: id,
         role: :option,
         class: [ "hw-combobox__option", { "hw-combobox__option--blank": blank? } ],
-        data: data
+        data: data,
+        aria: aria
       }
     end
 
@@ -37,15 +42,15 @@ class HotwireCombobox::Listbox::Option
 
     def data
       {
-        action: "click->hw-combobox#selectOptionOnClick",
+        action: "click->hw-combobox#selectOnClick",
         filterable_as: filterable_as,
         autocompletable_as: autocompletable_as,
         value: value
       }
     end
 
-    def content
-      option.try(:content) || option.try(:display)
+    def aria
+      { selected: false }
     end
 
     def filterable_as

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

@@ -4,6 +4,7 @@
   <%= render "hotwire_combobox/combobox/hidden_field", component: component %>
 
   <%= tag.div **component.main_wrapper_attrs do %>
+    <%= tag.div **component.announcer_attrs %>
     <%= render "hotwire_combobox/combobox/input", component: component %>
     <%= render "hotwire_combobox/combobox/paginated_listbox", component: component %>
     <%= render "hotwire_combobox/combobox/dialog", component: component %>

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

@@ -0,0 +1,8 @@
+<%# locals: (display:, value:, for_id:, remover_attrs:) -%>
+
+<%= within_combobox_selection_chip(for_id: for_id) do %>
+  <%= tag.div class: "hw-combobox__chip" do %>
+    <%= tag.span display %>
+    <%= tag.span **remover_attrs %>
+  <% end %>
+<% end %>

data/app/views/hotwire_combobox/layouts/_selection_chip.turbo_stream.erb

@@ -0,0 +1,7 @@
+<%# locals: (for_id:) -%>
+
+<%= turbo_stream.before for_id do %>
+  <%= tag.div data: { hw_combobox_chip: "" } do %>
+    <%= yield %>
+  <% end %>
+<% end %>

data/lib/hotwire_combobox/helper.rb

@@ -13,38 +13,129 @@ module HotwireCombobox
     def hw_combobox_style_tag(*args, **kwargs)
       stylesheet_link_tag HotwireCombobox.stylesheet_path, *args, **kwargs
     end
-    hw_alias :hw_combobox_style_tag
 
     def hw_combobox_tag(name, options_or_src = [], render_in: {}, include_blank: nil, **kwargs, &block)
-      options, src = hw_extract_options_and_src(options_or_src, render_in, include_blank)
+      options, src = hw_extract_options_and_src options_or_src, render_in, include_blank
       component = HotwireCombobox::Component.new self, name, options: options, async_src: src, **kwargs
       render component, &block
     end
-    hw_alias :hw_combobox_tag
 
-    def hw_combobox_options(options, render_in: {}, include_blank: nil, display: :to_combobox_display, **methods)
+    def hw_combobox_options(
+          options,
+          render_in: {},
+          include_blank: nil,
+          display: :to_combobox_display,
+          **custom_methods)
       if options.first.is_a? HotwireCombobox::Listbox::Option
         options
       else
-        opts = hw_parse_combobox_options options, render_in_proc: hw_render_in_proc(render_in), **methods.merge(display: display)
-        opts.unshift(hw_blank_option(include_blank)) if include_blank.present?
-        opts
+        HotwireCombobox::Listbox::Item.collection_for \
+          self,
+          options,
+          render_in: render_in,
+          include_blank: include_blank,
+          **custom_methods.merge(display: display)
       end
     end
-    hw_alias :hw_combobox_options
 
-    def hw_paginated_combobox_options(options, for_id: params[:for_id], src: request.path, next_page: nil, render_in: {}, include_blank: {}, **methods)
-      include_blank = params[:page] ? nil : include_blank
-      options = hw_combobox_options options, render_in: render_in, include_blank: include_blank, **methods
+    def hw_paginated_combobox_options(
+          options,
+          for_id: params[:for_id],
+          src: request.path,
+          next_page: nil,
+          render_in: {},
+          include_blank: {},
+          **custom_methods)
+      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
 
       safe_join [ this_page, next_page ]
     end
-    hw_alias :hw_paginated_combobox_options
-
     alias_method :hw_async_combobox_options, :hw_paginated_combobox_options
+
+    def hw_within_combobox_selection_chip(for_id: params[:for_id], &block)
+      render layout: "hotwire_combobox/layouts/selection_chip", locals: { for_id: for_id }, &block
+    end
+
+    def hw_combobox_selection_chip(
+          display:,
+          value:,
+          for_id: params[:for_id],
+          remover_attrs: hw_combobox_chip_remover_attrs(display: display, value: value))
+      render "hotwire_combobox/selection_chip",
+        display: display,
+        value: value,
+        for_id: for_id,
+        remover_attrs: remover_attrs
+    end
+
+    def hw_combobox_selection_chips_for(
+          objects,
+          display: :to_combobox_display,
+          value: :id,
+          for_id: params[:for_id])
+      objects.map do |object|
+        hw_combobox_selection_chip \
+          display: hw_call_method(object, display),
+          value: hw_call_method(object, value),
+          for_id: for_id
+      end.then { |chips| safe_join chips }
+    end
+
+    def hw_dismissing_combobox_selection_chip(display:, value:, for_id: params[:for_id])
+      hw_combobox_selection_chip \
+        display: display,
+        value: value,
+        for_id: for_id,
+        remover_attrs: hw_combobox_dismissing_chip_remover_attrs(display, value)
+    end
+
+    def hw_dismissing_combobox_selection_chips_for(
+          objects,
+          display: :to_combobox_display,
+          value: :id,
+          for_id: params[:for_id])
+      objects.map do |object|
+        hw_dismissing_combobox_selection_chip \
+          display: hw_call_method(object, display),
+          value: hw_call_method(object, value),
+          for_id: for_id
+      end.then { |chips| safe_join chips }
+    end
+
+    def hw_combobox_chip_remover_attrs(display:, value:, **kwargs)
+      {
+        tabindex: "0",
+        class: token_list("hw-combobox__chip__remover", kwargs[:class]),
+        aria: { label: "Remove #{display}" },
+        data: {
+          action: "click->hw-combobox#removeChip:stop keydown->hw-combobox#navigateChip",
+          hw_combobox_target: "chipDismisser",
+          hw_combobox_value_param: value
+        }
+      }
+    end
+
+    def hw_combobox_dismissing_chip_remover_attrs(display, value)
+      hw_combobox_chip_remover_attrs(display: display, value: value).tap do |attrs|
+        attrs[:data][:hw_combobox_target] = token_list(attrs[:data][:hw_combobox_target], "closer")
+      end
+    end
+
+    hw_alias :hw_combobox_style_tag
+    hw_alias :hw_combobox_tag
+    hw_alias :hw_combobox_options
+    hw_alias :hw_paginated_combobox_options
     hw_alias :hw_async_combobox_options
+    hw_alias :hw_within_combobox_selection_chip
+    hw_alias :hw_combobox_selection_chip
+    hw_alias :hw_combobox_selection_chips_for
+    hw_alias :hw_dismissing_combobox_selection_chip
+    hw_alias :hw_dismissing_combobox_selection_chips_for
+    hw_alias :hw_combobox_chip_remover_attrs
+    hw_alias :hw_combobox_dismissing_chip_remover_attrs
 
     # private library use only
       def hw_listbox_id(id)
@@ -70,23 +161,7 @@ module HotwireCombobox
       end
 
       def hw_combobox_page_stream_action
-        params[:page] ? :append : :update
-      end
-
-      def hw_blank_option(include_blank)
-        display, content = hw_extract_blank_display_and_content include_blank
-
-        HotwireCombobox::Listbox::Option.new display: display, content: content, value: "", blank: true
-      end
-
-      def hw_extract_blank_display_and_content(include_blank)
-        if include_blank.is_a? Hash
-          text = include_blank.delete(:text)
-
-          [ text, hw_call_render_in_proc(hw_render_in_proc(include_blank), text, display: text, value: "") ]
-        else
-          [ include_blank, include_blank ]
-        end
+        params[:page].to_i > 0 ? :append : :update
       end
 
       def hw_uri_with_params(url_or_path, **params)
@@ -98,13 +173,15 @@ module HotwireCombobox
         url_or_path
       end
 
-    private
-      def hw_render_in_proc(render_in)
-        if render_in.present?
-          ->(object, locals) { render(**render_in.reverse_merge(object: object, locals: locals)) }
+      def hw_call_method_or_proc(object, method_or_proc)
+        if method_or_proc.is_a? Proc
+          method_or_proc.call object
+        else
+          hw_call_method object, method_or_proc
         end
       end
 
+    private
       def hw_extract_options_and_src(options_or_src, render_in, include_blank)
         if options_or_src.is_a? String
           [ [], options_or_src ]
@@ -113,58 +190,6 @@ module HotwireCombobox
         end
       end
 
-      def hw_parse_combobox_options(options, render_in_proc: nil, **methods)
-        options.map do |option|
-          HotwireCombobox::Listbox::Option.new \
-            **hw_option_attrs_for(option, render_in_proc: render_in_proc, **methods)
-        end
-      end
-
-      def hw_option_attrs_for(option, render_in_proc: nil, **methods)
-        case option
-        when Hash
-          option.tap do |attrs|
-            attrs[:content] = hw_call_render_in_proc(render_in_proc, attrs[:display], attrs) if render_in_proc
-          end
-        when String
-          {}.tap do |attrs|
-            attrs[:display] = option
-            attrs[:value] = option
-            attrs[:content] = hw_call_render_in_proc(render_in_proc, attrs[:display], attrs) if render_in_proc
-          end
-        when Array
-          {}.tap do |attrs|
-            attrs[:display] = option.first
-            attrs[:value] = option.last
-            attrs[:content] = hw_call_render_in_proc(render_in_proc, attrs[:display], attrs) if render_in_proc
-          end
-        else
-          {}.tap do |attrs|
-            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[:value] = hw_call_method_or_proc(option, methods[:value] || :id)
-
-            if render_in_proc
-              attrs[:content] = hw_call_render_in_proc(render_in_proc, option, attrs)
-            elsif methods[:content]
-              attrs[:content] = hw_call_method_or_proc(option, methods[:content])
-            end
-          end
-        end
-      end
-
-      def hw_call_render_in_proc(render_in_proc, object, attrs)
-        render_in_proc.(object, combobox_display: attrs[:display], combobox_value: attrs[:value])
-      end
-
-      def hw_call_method_or_proc(object, method_or_proc)
-        if method_or_proc.is_a? Proc
-          method_or_proc.call object
-        else
-          hw_call_method object, method_or_proc
-        end
-      end
-
       def hw_call_method(object, method)
         if object.respond_to? method
           object.public_send method