hotwire_combobox 0.3.2 → 0.4.0

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

@@ -31,11 +31,11 @@ Combobox.Navigation = Base => class extends Base {
       cancel(event)
     },
     Enter: (event) => {
-      this._closeAndBlur("hw:keyHandler:enter")
+      this.close("hw:keyHandler:enter")
       cancel(event)
     },
     Escape: (event) => {
-      this._closeAndBlur("hw:keyHandler:escape")
+      this._isOpen ? this.close("hw:keyHandler:escape") : this._clearQuery()
       cancel(event)
     },
     Backspace: (event) => {

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

@@ -4,7 +4,7 @@ import { wrapAroundAccess, isDeleteEvent } from "hw_combobox/helpers"
 Combobox.Selection = Base => class extends Base {
   selectOnClick({ currentTarget, inputType }) {
     this._forceSelectionAndFilter(currentTarget, inputType)
-    this._closeAndBlur("hw:optionRoleClick")
+    this.close("hw:optionRoleClick")
   }
 
   _connectSelection() {
@@ -20,9 +20,9 @@ Combobox.Selection = Base => class extends Base {
     } else if (isDeleteEvent({ inputType: inputType })) {
       this._deselect()
     } else if (inputType === "hw:lockInSelection" && this._ensurableOption) {
-      this._selectAndAutocompleteMissingPortion(this._ensurableOption)
+      this._select(this._ensurableOption, this._softAutocomplete.bind(this))
     } else if (this._isOpen && this._visibleOptionElements[0]) {
-      this._selectAndAutocompleteMissingPortion(this._visibleOptionElements[0])
+      this._select(this._visibleOptionElements[0], this._softAutocomplete.bind(this))
     } else if (this._isOpen) {
       this._resetOptionsAndNotify()
       this._markInvalid()
@@ -98,21 +98,13 @@ Combobox.Selection = Base => class extends Base {
     }
   }
 
-  _selectAndAutocompleteMissingPortion(option) {
-    this._select(option, this._autocompleteMissingPortion.bind(this))
-  }
-
-  _selectAndAutocompleteFullQuery(option) {
-    this._select(option, this._replaceFullQueryWithAutocompletedValue.bind(this))
-  }
-
   _forceSelectionAndFilter(option, inputType) {
     this._forceSelectionWithoutFiltering(option)
     this._filter(inputType)
   }
 
   _forceSelectionWithoutFiltering(option) {
-    this._selectAndAutocompleteFullQuery(option)
+    this._select(option, this._hardAutocomplete.bind(this))
   }
 
   _lockInSelection() {

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

@@ -6,10 +6,6 @@ Combobox.Toggle = Base => class extends Base {
     this.expandedValue = true
   }
 
-  openByFocusing() {
-    this._actingCombobox.focus()
-  }
-
   close(inputType) {
     if (this._isOpen) {
       const shouldReopen = this._isMultiselect &&
@@ -24,9 +20,8 @@ Combobox.Toggle = Base => class extends Base {
 
       this.expandedValue = false
 
-      this._dispatchSelectionEvent()
-
       if (inputType != "hw:keyHandler:escape") {
+        this._dispatchSelectionEvent()
         this._createChip(shouldReopen)
       }
 
@@ -38,43 +33,38 @@ Combobox.Toggle = Base => class extends Base {
 
   toggle() {
     if (this.expandedValue) {
-      this._closeAndBlur("hw:toggle")
+      this.close("hw:toggle")
     } else {
-      this.openByFocusing()
+      this.open()
     }
   }
 
   closeOnClickOutside(event) {
     const target = event.target
 
-    if (!this._isOpen) return
+    if (this._isClosed) return
     if (this.mainWrapperTarget.contains(target) && !this._isDialogDismisser(target)) return
     if (this._withinElementBounds(event)) return
 
-    this._closeAndBlur("hw:clickOutside")
+    this.close("hw:clickOutside")
   }
 
   closeOnFocusOutside({ target }) {
-    if (!this._isOpen) return
+    if (this._isClosed) return
     if (this.element.contains(target)) return
 
-    this._closeAndBlur("hw:focusOutside")
+    this.close("hw:focusOutside")
   }
 
   clearOrToggleOnHandleClick() {
     if (this._isQueried) {
       this._clearQuery()
-      this._actingCombobox.focus()
+      this.open()
     } else {
       this.toggle()
     }
   }
 
-  _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`
@@ -121,6 +111,7 @@ Combobox.Toggle = Base => class extends Base {
     this._preventFocusingComboboxAfterClosingDialog()
     this._preventBodyScroll()
     this.dialogTarget.showModal()
+    this._resizeDialog()
   }
 
   _openInline() {
@@ -156,4 +147,8 @@ Combobox.Toggle = Base => class extends Base {
   get _isOpen() {
     return this.expandedValue
   }
+
+  get _isClosed() {
+    return !this._isOpen
+  }
 }

data/app/assets/stylesheets/hotwire_combobox.css

@@ -1,6 +1,7 @@
 :root {
   --hw-active-bg-color: #F3F4F6;
   --hw-border-color: #D1D5DB;
+  --hw-component-bg-color: #FFFFFF;
   --hw-group-color: #57595C;
   --hw-group-bg-color: #FFFFFF;
   --hw-invalid-color: #EF4444;
@@ -22,7 +23,7 @@
   --hw-dialog-label-size: 1.05rem;
   --hw-dialog-listbox-margin: 1.25rem 0 0;
   --hw-dialog-padding: 1rem 1rem 0;
-  --hw-dialog-top-offset: 4rem;
+  --hw-dialog-top-offset: 18vh;
 
   --hw-font-size: 1rem;
 
@@ -63,6 +64,7 @@
 }
 
 .hw-combobox__main__wrapper {
+  background-color: var(--hw-component-bg-color);
   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);
@@ -201,7 +203,7 @@
   overflow: hidden;
   padding: var(--hw-dialog-padding);
   pointer-events: auto;
-  position: absolute;
+  position: fixed;
   top: var(--hw-dialog-top-offset);
   width: auto;
 
@@ -215,6 +217,10 @@
   &::backdrop {
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 50%, white 50%);
   }
+
+  .hw-combobox--ios & {
+    position: absolute;
+  }
 }
 
 .hw-combobox__dialog__label {
@@ -291,4 +297,8 @@
 
 .hw_combobox__pagination__wrapper {
   background-color: var(--hw-option-bg-color);
+
+  &:only-child {
+    background-color: transparent;
+  }
 }

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

@@ -0,0 +1,5 @@
+module HotwireCombobox::Component::Announced
+  def announcer_attrs
+    { class: "hw-combobox__announcer", data: { hw_combobox_target: "announcer" }, aria: { live: :polite, atomic: true } }
+  end
+end

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

@@ -0,0 +1,18 @@
+module HotwireCombobox::Component::Associations
+  private
+    def infer_association_name
+      if name.end_with?("_id")
+        name.sub(/_id\z/, "")
+      end
+    end
+
+    def associated_object
+      @associated_object ||= if association_exists?
+        form_object&.public_send association_name
+      end
+    end
+
+    def association_exists?
+      association_name && form_object&.respond_to?(association_name)
+    end
+end

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

@@ -0,0 +1,6 @@
+module HotwireCombobox::Component::Async
+  private
+    def async_src
+      view.hw_uri_with_params @async_src, for_id: canonical_id, format: :turbo_stream
+    end
+end

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

@@ -1,32 +1,20 @@
 module HotwireCombobox::Component::Customizable
   CUSTOMIZABLE_ELEMENTS = %i[
+    dialog dialog_input dialog_label dialog_listbox dialog_wrapper
     fieldset
-    label
+    handle
     hidden_field
-    main_wrapper
     input
-    handle
+    label
     listbox
-    dialog
-    dialog_wrapper
-    dialog_label
-    dialog_input
-    dialog_listbox
+    main_wrapper
   ].freeze
 
-  PROTECTED_ATTRS = %i[
-    id
-    name
-    value
-    open
-    role
-    hidden
-    for
-  ].freeze
+  PROTECTED_ATTRS = %i[ for hidden id name open role value ].freeze
 
   CUSTOMIZABLE_ELEMENTS.each do |element|
     define_method "customize_#{element}" do |**attrs|
-      customize element, **attrs
+      store_customizations element, **attrs
     end
   end
 
@@ -35,14 +23,14 @@ module HotwireCombobox::Component::Customizable
       @custom_attrs ||= Hash.new { |h, k| h[k] = {} }
     end
 
-    def customize(element, **attrs)
+    def store_customizations(element, **attrs)
       element = element.to_sym.presence_in(CUSTOMIZABLE_ELEMENTS)
       sanitized_attrs = attrs.deep_symbolize_keys.except(*PROTECTED_ATTRS)
 
       custom_attrs.store element, sanitized_attrs
     end
 
-    def apply_customizations_to(element, base: {})
+    def customize(element, base: {})
       custom = custom_attrs[element]
 
       coalesce = ->(key, value) do

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

@@ -0,0 +1,26 @@
+module HotwireCombobox::Component::Freetext
+  extend ActiveSupport::Concern
+
+  included do
+    include ActiveModel::Validations
+    validate :name_when_new_on_multiselect_must_match_original_name
+  end
+
+  private
+    def name_when_new
+      if free_text && @name_when_new.blank?
+        hidden_field_name
+      else
+        @name_when_new
+      end
+    end
+
+    def name_when_new_on_multiselect_must_match_original_name
+      return unless multiselect? && name_when_new.present?
+
+      unless name_when_new.to_s == hidden_field_name
+        errors.add :name_when_new, :must_match_original_name,
+          message: "must match the regular name ('#{hidden_field_name}', in this case) on multiselect comboboxes."
+      end
+    end
+end

data/app/presenters/hotwire_combobox/component/markup/dialog.rb

@@ -0,0 +1,57 @@
+module HotwireCombobox::Component::Markup::Dialog
+  def dialog_wrapper_attrs
+    customize :dialog_wrapper, base: { class: "hw-combobox__dialog__wrapper" }
+  end
+
+  def dialog_attrs
+    customize :dialog, base: {
+      class: "hw-combobox__dialog", role: :dialog, data: {
+      action: "keydown->hw-combobox#navigate", hw_combobox_target: "dialog" } }
+  end
+
+  def dialog_label
+    @dialog_label || label
+  end
+
+  def dialog_label_attrs
+    customize :dialog_label, base: { class: "hw-combobox__dialog__label", for: dialog_input_id }
+  end
+
+  def dialog_input_attrs
+    customize :dialog_input, base: {
+      id: dialog_input_id, role: :combobox, autofocus: "", type: input_type,
+      class: "hw-combobox__dialog__input", data: dialog_input_data, aria: dialog_input_aria }
+  end
+
+  def dialog_listbox_attrs
+    customize :dialog_listbox, base: {
+      id: dialog_listbox_id, role: :listbox, class: "hw-combobox__dialog__listbox",
+      data: { hw_combobox_target: "dialogListbox" }, aria: { multiselectable: multiselect? } }
+  end
+
+  def dialog_focus_trap_attrs
+    { tabindex: "-1", data: { hw_combobox_target: "dialogFocusTrap" } }
+  end
+
+  private
+    def dialog_input_id
+      "#{canonical_id}-hw-dialog-combobox"
+    end
+
+    def dialog_input_data
+      { action: "
+          keydown->hw-combobox#prepareToFilter
+          input->hw-combobox#filterAndSelect
+          keydown->hw-combobox#navigate
+          click@window->hw-combobox#closeOnClickOutside".squish,
+        hw_combobox_target: "dialogCombobox" }
+    end
+
+    def dialog_input_aria
+      { controls: dialog_listbox_id, owns: dialog_listbox_id, autocomplete: autocomplete, activedescendant: "" }
+    end
+
+    def dialog_listbox_id
+      "#{canonical_id}-hw-dialog-listbox"
+    end
+end

data/app/presenters/hotwire_combobox/component/markup/fieldset.rb

@@ -0,0 +1,46 @@
+module HotwireCombobox::Component::Markup::Fieldset
+  def fieldset_attrs
+    customize :fieldset, base: {
+      class: [ "hw-combobox", platform_classes, { "hw-combobox--multiple": multiselect? } ], data: fieldset_data }
+  end
+
+  private
+    def platform_classes
+      platform = HotwireCombobox::Platform.new request&.user_agent
+
+      view.token_list \
+        "hw-combobox--ios": platform.ios?,
+        "hw-combobox--android": platform.android?,
+        "hw-combobox--mobile-webkit": platform.mobile_webkit?
+    end
+
+    def fieldset_data
+      data.merge \
+        async_id: canonical_id,
+        controller: view.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_autocomplete_value: autocomplete,
+        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",
+        hw_combobox_invalid_class: "hw-combobox__input--invalid"
+    end
+
+    def prefilled_display
+      return if multiselect? || !hidden_field_value
+
+      if async_src && associated_object
+        associated_object.to_combobox_display
+      elsif async_src && form_object&.respond_to?(name)
+        form_object.public_send name
+      else
+        options.find_by_value(hidden_field_value)&.autocompletable_as || hidden_field_value
+      end
+    end
+end

data/app/presenters/hotwire_combobox/component/markup/form.rb

@@ -0,0 +1,6 @@
+module HotwireCombobox::Component::Markup::Form
+  private
+    def form_object
+      form&.object
+    end
+end

data/app/presenters/hotwire_combobox/component/markup/handle.rb

@@ -0,0 +1,7 @@
+module HotwireCombobox::Component::Markup::Handle
+  def handle_attrs
+    customize :handle, base: {
+      class: "hw-combobox__handle",
+      data: { action: "click->hw-combobox#clearOrToggleOnHandleClick", hw_combobox_target: "handle" } }
+  end
+end

data/app/presenters/hotwire_combobox/component/markup/hidden_field.rb

@@ -0,0 +1,28 @@
+module HotwireCombobox::Component::Markup::HiddenField
+  def hidden_field_attrs
+    customize :hidden_field, base: {
+      id: hidden_field_id, name: hidden_field_name, value: hidden_field_value,
+      data: { hw_combobox_target: "hiddenField" } }
+  end
+
+  private
+    def hidden_field_id
+      "#{canonical_id}-hw-hidden-field"
+    end
+
+    def hidden_field_name
+      form&.field_name(name) || name
+    end
+
+    def hidden_field_value
+      return value if value
+
+      if form_object&.try(:defined_enums)&.try(:[], name)
+        form_object.public_send "#{name}_before_type_cast"
+      else
+        form_object&.try(name).then do |value|
+          value.respond_to?(:map) ? value.join(",") : value
+        end
+      end
+    end
+end

data/app/presenters/hotwire_combobox/component/markup/input.rb

@@ -0,0 +1,44 @@
+module HotwireCombobox::Component::Markup::Input
+  def input_attrs
+    customize :input, base: {
+      id: input_id, role: :combobox, type: input_type,
+      class: "hw-combobox__input", autocomplete: :off,
+      data: input_data, aria: input_aria
+    }.merge(combobox_attrs.except(:data, :aria))
+  end
+
+  private
+    def input_id
+      canonical_id
+    end
+
+    def input_type
+      combobox_attrs[:type].to_s.presence_in(%w[ text search ]) || "text"
+    end
+
+    def input_data
+      data = combobox_attrs.fetch(:data, {}).dup
+      action = %w[
+        click->hw-combobox#toggle
+        keydown->hw-combobox#prepareToFilter
+        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
+        turbo:before-cache@document->hw-combobox#hideChipsForCache
+        turbo:morph-element->hw-combobox#idempotentConnect
+      ].append(data.delete(:action)).compact.join(" ")
+
+      data.merge action: action, hw_combobox_target: "combobox", async_id: canonical_id
+    end
+
+    def input_aria
+      combobox_attrs.fetch(:aria, {}).merge \
+        controls: listbox_id,
+        owns: listbox_id,
+        haspopup: "listbox",
+        autocomplete: autocomplete,
+        activedescendant: ""
+    end
+end

data/app/presenters/hotwire_combobox/component/markup/label.rb

@@ -0,0 +1,5 @@
+module HotwireCombobox::Component::Markup::Label
+  def label_attrs
+    customize :label, base: { class: "hw-combobox__label", for: input_id, hidden: label.blank? }
+  end
+end

data/app/presenters/hotwire_combobox/component/markup/listbox.rb

@@ -0,0 +1,14 @@
+module HotwireCombobox::Component::Markup::Listbox
+  def listbox_attrs
+    customize :listbox, base: {
+      id: listbox_id, role: :listbox, hidden: "",
+      class: "hw-combobox__listbox",
+      data: { hw_combobox_target: "listbox" },
+      aria: { multiselectable: multiselect? } }
+  end
+
+  private
+    def listbox_id
+      "#{canonical_id}-hw-listbox"
+    end
+end

data/app/presenters/hotwire_combobox/component/markup/wrapper.rb

@@ -0,0 +1,7 @@
+module HotwireCombobox::Component::Markup::Wrapper
+  def main_wrapper_attrs
+    customize :main_wrapper, base: {
+      class: "hw-combobox__main__wrapper",
+      data: { action: ("click->hw-combobox#open:self" if multiselect?), hw_combobox_target: "mainWrapper" } }
+  end
+end

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

@@ -0,0 +1,6 @@
+module HotwireCombobox::Component::Multiselect
+  private
+    def multiselect?
+      multiselect_chip_src.present?
+    end
+end

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

@@ -0,0 +1,18 @@
+module HotwireCombobox::Component::Paginated
+  def paginated?
+    async_src.present?
+  end
+
+  def pagination_attrs
+    { for_id: canonical_id, src: async_src, loading: preload_next_page? ? :eager : :lazy }
+  end
+
+  private
+    def preload_next_page?
+      view.hw_first_page? && preload?
+    end
+
+    def preload?
+      preload.present?
+    end
+end