hotwire_combobox 0.1.43 → 0.2.1

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

@@ -6,22 +6,40 @@ Combobox.Toggle = Base => class extends Base {
     this.expandedValue = true
   }
 
-  close() {
+  openByFocusing() {
+    this._actingCombobox.focus()
+  }
+
+  close(inputType) {
     if (this._isOpen) {
+      const shouldReopen = this._isMultiselect &&
+        this._isSync &&
+        !this._isSmallViewport &&
+        inputType != "hw:clickOutside" &&
+        inputType != "hw:focusOutside"
+
       this._lockInSelection()
       this._clearInvalidQuery()
 
       this.expandedValue = false
 
-      this._dispatchClosedEvent()
+      this._dispatchSelectionEvent()
+
+      if (inputType != "hw:keyHandler:escape") {
+        this._createChip(shouldReopen)
+      }
+
+      if (this._isSingleSelect && this._selectedOptionElement) {
+        this._announceToScreenReader(this._displayForOptionElement(this._selectedOptionElement), "selected")
+      }
     }
   }
 
   toggle() {
     if (this.expandedValue) {
-      this.close()
+      this._closeAndBlur("hw:toggle")
     } else {
-      this._openByFocusing()
+      this.openByFocusing()
     }
   }
 
@@ -32,14 +50,14 @@ Combobox.Toggle = Base => class extends Base {
     if (this.mainWrapperTarget.contains(target) && !this._isDialogDismisser(target)) return
     if (this._withinElementBounds(event)) return
 
-    this.close()
+    this._closeAndBlur("hw:clickOutside")
   }
 
   closeOnFocusOutside({ target }) {
     if (!this._isOpen) return
     if (this.element.contains(target)) return
 
-    this.close()
+    this._closeAndBlur("hw:focusOutside")
   }
 
   clearOrToggleOnHandleClick() {
@@ -51,6 +69,11 @@ Combobox.Toggle = Base => class extends Base {
     }
   }
 
+  _closeAndBlur(inputType) {
+    this.close(inputType)
+    this._actingCombobox.blur()
+  }
+
   // Some browser extensions like 1Password overlay elements on top of the combobox.
   // Hovering over these elements emits a click event for some reason.
   // These events don't contain any telling information, so we use `_withinElementBounds`
@@ -62,18 +85,16 @@ Combobox.Toggle = Base => class extends Base {
     return clientX >= left && clientX <= right && clientY >= top && clientY <= bottom
   }
 
-  _openByFocusing() {
-    this._actingCombobox.focus()
-  }
-
   _isDialogDismisser(target) {
     return target.closest("dialog") && target.role != "combobox"
   }
 
   _expand() {
-    if (this._preselectOnExpansion) this._preselectOption()
+    if (this._isSync) {
+      this._preselectSingle()
+    }
 
-    if (this._autocompletesList && this._smallViewport) {
+    if (this._autocompletesList && this._isSmallViewport) {
       this._openInDialog()
     } else {
       this._openInline()
@@ -134,8 +155,4 @@ Combobox.Toggle = Base => class extends Base {
   get _isOpen() {
     return this.expandedValue
   }
-
-  get _preselectOnExpansion() {
-    return !this._isAsync // async comboboxes preselect based on callbacks
-  }
 }

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

@@ -34,7 +34,7 @@ Combobox.Validity = Base => class extends Base {
   // +_valueIsInvalid+ only checks if `comboboxTarget` (and not `_actingCombobox`) is required
   // because the `required` attribute is only forwarded to the `comboboxTarget` element
   get _valueIsInvalid() {
-    const isRequiredAndEmpty = this.comboboxTarget.required && !this._value
+    const isRequiredAndEmpty = this.comboboxTarget.required && this._hasEmptyFieldValue
     return isRequiredAndEmpty
   }
 }

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

@@ -1,11 +1,14 @@
 import Combobox from "hw_combobox/models/combobox/base"
 
 import "hw_combobox/models/combobox/actors"
+import "hw_combobox/models/combobox/announcements"
 import "hw_combobox/models/combobox/async_loading"
 import "hw_combobox/models/combobox/autocomplete"
 import "hw_combobox/models/combobox/dialog"
 import "hw_combobox/models/combobox/events"
 import "hw_combobox/models/combobox/filtering"
+import "hw_combobox/models/combobox/form_field"
+import "hw_combobox/models/combobox/multiselect"
 import "hw_combobox/models/combobox/navigation"
 import "hw_combobox/models/combobox/new_options"
 import "hw_combobox/models/combobox/options"

data/app/assets/stylesheets/hotwire_combobox.css

@@ -1,6 +1,8 @@
 :root {
   --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;
@@ -10,6 +12,9 @@
   --hw-border-width--slim: 1px;
   --hw-border-width--thick: 2px;
 
+  --hw-combobox-width: 10rem;
+  --hw-combobox-width--multiple: 30rem;
+
   --hw-dialog-font-size: 1.25rem;
   --hw-dialog-input-height: 2.5rem;
   --hw-dialog-label-alignment: center;
@@ -24,20 +29,21 @@
   --hw-handle-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
   --hw-handle-image--queried: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E");
   --hw-handle-offset-right: 0.375rem;
-  --hw-handle-width: 1.5em;
-  --hw-handle-width--queried: 1em;
-
-  --hw-combobox-width: 10rem;
+  --hw-handle-width: 1.5rem;
+  --hw-handle-width--queried: 1rem;
 
   --hw-line-height: 1.5rem;
+  --hw-line-height--multiple: 2.125rem;
 
   --hw-listbox-height: calc(var(--hw-line-height) * 10);
-  --hw-listbox-offset-top: calc(var(--hw-line-height) * 1.625);
   --hw-listbox-z-index: 10;
 
+  --hw-padding--slimmer: 0.25rem;
   --hw-padding--slim: 0.375rem;
   --hw-padding--thick: 0.75rem;
 
+  --hw-selection-chip-font-size: 0.875rem;
+
   --hw-visual-viewport-height: 100vh;
 }
 
@@ -57,30 +63,38 @@
 }
 
 .hw-combobox__main__wrapper {
+  border: var(--hw-border-width--slim) solid var(--hw-border-color);
+  border-radius: var(--hw-border-radius);
+  padding: var(--hw-padding--slim) calc(var(--hw-handle-width) + var(--hw-padding--slimmer)) var(--hw-padding--slim) var(--hw-padding--thick);
   position: relative;
-  width: min-content;
+  width: var(--hw-combobox-width);
+
+  &:focus-within {
+    box-shadow: 0 0 0 var(--hw-border-width--thick) var(--hw-focus-color);
+  }
+
+  &:has(.hw-combobox__input--invalid) {
+    box-shadow: 0 0 0 var(--hw-border-width--thick) var(--hw-invalid-color);
+  }
 }
 
 .hw-combobox__input {
-  border: var(--hw-border-width--slim) solid var(--hw-border-color);
-  border-radius: var(--hw-border-radius);
+  border: none;
   font-size: inherit;
   line-height: var(--hw-line-height);
-  padding: var(--hw-padding--slim) var(--hw-handle-width) var(--hw-padding--slim) var(--hw-padding--thick);
-  position: relative;
-  width: var(--hw-combobox-width);
+  min-width: 0;
+  padding: 0;
   text-overflow: ellipsis;
+  width: 100%;
 }
 
-.hw-combobox__input:focus-visible {
-  box-shadow: 0 0 0 var(--hw-border-width--thick) var(--hw-focus-color);
+.hw-combobox__input:focus,
+.hw-combobox__input:focus-visible,
+.hw-combobox__input:focus-within {
+  box-shadow: none;
   outline: none;
 }
 
-.hw-combobox__input--invalid {
-  border: var(--hw-border-width--slim) solid var(--hw-invalid-color);
-}
-
 .hw-combobox__handle {
   height: 100%;
   position: absolute;
@@ -105,7 +119,6 @@
 .hw-combobox__input[data-queried] + .hw-combobox__handle::before {
   background-image: var(--hw-handle-image--queried);
   background-size: var(--hw-handle-width--queried);
-  cursor: pointer;
 }
 
 .hw-combobox__listbox {
@@ -121,7 +134,7 @@
   overflow: auto;
   padding: 0;
   position: absolute;
-  top: var(--hw-listbox-offset-top);
+  top: calc(100% + 0.2rem);
   width: 100%;
   z-index: var(--hw-listbox-z-index);
 
@@ -130,6 +143,21 @@
   }
 }
 
+.hw-combobox__group {
+  display: none;
+  padding: 0;
+}
+
+.hw-combobox__group__label {
+  background-color: var(--hw-group-bg-color);
+  color: var(--hw-group-color);
+  padding: var(--hw-padding--slim);
+}
+
+.hw-combobox__group:has(.hw-combobox__option:not([hidden])) {
+  display: block;
+}
+
 .hw-combobox__option {
   background-color: var(--hw-option-bg-color);
   padding: var(--hw-padding--slim) var(--hw-padding--thick);
@@ -144,6 +172,7 @@
 }
 
 .hw-combobox__option:hover,
+.hw-combobox__option--navigated,
 .hw-combobox__option--selected {
   background-color: var(--hw-active-bg-color);
 }
@@ -217,3 +246,45 @@
     padding: var(--hw-padding--thick);
   }
 }
+
+.hw-combobox__chip {
+  align-items: center;
+  border: var(--hw-border-width--slim) solid var(--hw-border-color);
+  border-radius: var(--hw-border-radius);
+  display: flex;
+  font-size: var(--hw-selection-chip-font-size);
+  line-height: var(--hw-line-height);
+  padding: var(--hw-padding--slimmer);
+  padding-left: var(--hw-padding--slim);
+}
+
+.hw-combobox__chip__remover {
+  background-image: var(--hw-handle-image--queried);
+  background-size: var(--hw-handle-width--queried);
+  background-repeat: no-repeat;
+  margin-left: var(--hw-padding--slimmer);
+  min-height: var(--hw-handle-width--queried);
+  min-width: var(--hw-handle-width--queried);
+}
+
+.hw-combobox--multiple {
+  .hw-combobox__main__wrapper {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--hw-padding--slimmer);
+    width: var(--hw-combobox-width--multiple);
+
+    &:has([data-hw-combobox-chip]) .hw-combobox__input::placeholder {
+      color: transparent;
+    }
+  }
+
+  .hw-combobox__input {
+    min-width: calc(var(--hw-combobox-width) / 2);
+    flex-grow: 1;
+    line-height: var(--hw-line-height--multiple);
+    max-width: 100%;
+    width: 1rem;
+  }
+}

data/app/presenters/hotwire_combobox/component/customizable.rb

@@ -44,7 +44,15 @@ module HotwireCombobox::Component::Customizable
 
     def apply_customizations_to(element, base: {})
       custom = custom_attrs[element]
-      coalesce = ->(k, v) { v.is_a?(String) ? view.token_list(v, custom.delete(k)) : v }
+
+      coalesce = ->(key, value) do
+        if value.is_a?(String) || value.is_a?(Array)
+          view.token_list(value, custom.delete(key))
+        else
+          value
+        end
+      end
+
       default = base.map { |k, v| [ k, coalesce.(k, v) ] }.to_h
 
       custom.deep_merge default

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,21 +238,29 @@ class HotwireCombobox::Component
     end
 
     def prefilled_display
+      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
@@ -227,7 +274,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
 
 
@@ -246,10 +308,12 @@ 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
+        form_object&.try(name).then do |value|
+          value.respond_to?(:map) ? value.join(",") : value
+        end
       end
     end
 
@@ -270,7 +334,9 @@ class HotwireCombobox::Component
           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
+          turbo:morph-element->hw-combobox#idempotentConnect".squish,
         hw_combobox_target: "combobox",
         async_id: canonical_id
     end
@@ -301,6 +367,10 @@ class HotwireCombobox::Component
       { hw_combobox_target: "listbox" }
     end
 
+    def listbox_aria
+      { multiselectable: multiselect? }
+    end
+
 
     def dialog_data
       {
@@ -340,6 +410,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,47 @@
+require "securerandom"
+
+class HotwireCombobox::Listbox::Group
+  attr_reader :options
+
+  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
+
+    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/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