hotwire_combobox 0.1.40 → 0.1.42

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e3b6e7d5c71ba2836a388709890b4402ab2b3ff4ab194a2d1ce75928d96b3886
-  data.tar.gz: 78a2543c2354e7dccfe0477288144845b6d06a7611c01204612fd24b53cb6bc9
+  metadata.gz: 1fc3750ecb7bd58bd28e13d0cc2d543ae4c614535c927c9483e504b643171a8d
+  data.tar.gz: dc6482de8a4344a6d801797d497f6adec8afcc0357e821e1dff8188ecf4c2f68
 SHA512:
-  metadata.gz: d1e72f48fb5b0387b454afe6cfa7484b0e5c84dfe18000d025005558fc2e29232047f5179e82dbc41b7b48147f3b76d66ae72ff2d0f8c777340a1ab06a3ab9d8
-  data.tar.gz: 840447f162fba6892a920e74ddde5b862bb9ac4deac7d56948e62998470d19e9747112a066dfbd45db476c628d1910442d33b7f28b2fed242bc1de698a4a8a12
+  metadata.gz: 8884e9e8295b73d37d15762f08c1a69452a7117f99af09dba4369aedea9af2116bc9683127f6f29535813fa5182b21969eb35e4d077edee1f94ce1a6808aadfe
+  data.tar.gz: b58dd5870a0508912c910b387f7970ffc4a08a16e40612b448e7c35ae244d0f8e02f9dd9356e5cdd8ae7f0c45c1bd65513ece94fcbeba38818c39d39c9ecd870

data/README.md

@@ -80,6 +80,9 @@ import HwComboboxController from "@josefarias/hotwire_combobox"
 application.register("hw-combobox", HwComboboxController)
 ```
 
+> [!WARNING]
+> Keep in mind you need to update both the npm package and the gem every time there's a new version of HotwireCombobox. You should always run the same version number on both sides.
+
 ### Configuring CSS
 
 This library comes with optional default styles. Follow the instructions below to include them in your app.
@@ -109,6 +112,19 @@ Require the styles in `app/assets/stylesheets/application.css`:
 Visit [the docs site](https://hotwirecombobox.com/) for a demo and detailed documentation.
 If the site is down, you can run the docs locally by cloning [the docs repo](https://github.com/josefarias/hotwire_combobox_docs).
 
+## Notes about accessibility
+
+This gem follows the [APG combobox pattern guidelines](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) with some exceptions we feel increase the usefulness of the component without much detriment to the overall accessible experience.
+
+These are the exceptions:
+
+1. Users cannot manipulate the combobox while it's closed. As long as the combobox is focused, the listbox is shown.
+2. The escape key closes the listbox and blurs the combobox. It does not clear the combobox.
+3. The listbox has wrap-around selection. That is, pressing `Up Arrow` when the user is on the first option will select the last option. And pressing `Down Arrow` when on the last option will select the first option. In paginated comboboxes, the first and last options refer to the currently available options. More options may be loaded after navigating to the last currently available option.
+4. It is possible to have an unlabled combobox, as that responsibility is delegated to the implementing user.
+
+It should be noted none of the maintainers use assistive technologies in their daily lives. If you do, and you feel these exceptions are detrimental to your ability to use the component, or if you find an undocumented exception, please [open a GitHub issue](https://github.com/josefarias/hotwire_combobox/issues). We'll get it sorted.
+
 ## Contributing
 
 Please read [CONTRIBUTING.md](./CONTRIBUTING.md).

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

@@ -35,7 +35,8 @@ export default class HwComboboxController extends Concerns(...concerns) {
     "endOfOptionsStream",
     "handle",
     "hiddenField",
-    "listbox"
+    "listbox",
+    "mainWrapper"
   ]
 
   static values = {

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

@@ -237,16 +237,21 @@ Combobox.Dialog = Base => class extends Base {
 
 Combobox.Events = Base => class extends Base {
   _dispatchSelectionEvent({ isNew }) {
-    const detail = {
+    dispatch("hw-combobox:selection", { target: this.element, detail: { ...this._eventableDetails, isNew } });
+  }
+
+  _dispatchClosedEvent() {
+    dispatch("hw-combobox:closed", { target: this.element, detail: this._eventableDetails });
+  }
+
+  get _eventableDetails() {
+    return {
       value: this.hiddenFieldTarget.value,
       display: this._fullQuery,
       query: this._typedQuery,
       fieldName: this.hiddenFieldTarget.name,
-      isValid: this._valueIsValid,
-      isNew: isNew
-    };
-
-    dispatch("hw-combobox:selection", { target: this.element, detail });
+      isValid: this._valueIsValid
+    }
   }
 };
 
@@ -534,6 +539,8 @@ Combobox.Filtering = Base => class extends Base {
     } else {
       this._filterSync(event);
     }
+
+    this._actingCombobox.toggleAttribute("data-queried", this._isQueried);
   }
 
   _initializeFiltering() {
@@ -565,6 +572,8 @@ Combobox.Filtering = Base => class extends Base {
       this._selectNew();
     } else if (isDeleteEvent(event)) {
       this._deselect();
+    } else if (event.inputType === "hw:lockInSelection") {
+      this._select(this._ensurableOption);
     } else if (this._isOpen) {
       this._select(this._visibleOptionElements[0]);
     }
@@ -706,7 +715,7 @@ Combobox.Options = Base => class extends Base {
 Combobox.Selection = Base => class extends Base {
   selectOptionOnClick(event) {
     this.filter(event);
-    this._select(event.currentTarget);
+    this._select(event.currentTarget, { forceAutocomplete: true });
     this.close();
   }
 
@@ -1095,6 +1104,7 @@ Combobox.Toggle = Base => class extends Base {
     if (this._isOpen) {
       this._lockInSelection();
       this.expandedValue = false;
+      this._dispatchClosedEvent();
     }
   }
 
@@ -1110,7 +1120,7 @@ Combobox.Toggle = Base => class extends Base {
     const target = event.target;
 
     if (!this._isOpen) return
-    if (this.element.contains(target) && !this._isDialogDismisser(target)) return
+    if (this.mainWrapperTarget.contains(target) && !this._isDialogDismisser(target)) return
     if (this._withinElementBounds(event)) return
 
     this.close();
@@ -1123,12 +1133,21 @@ Combobox.Toggle = Base => class extends Base {
     this.close();
   }
 
+  clearOrToggleOnHandleClick() {
+    if (this._isQueried) {
+      this._clearQuery();
+      this._actingCombobox.focus();
+    } else {
+      this.toggle();
+    }
+  }
+
   // 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`
   // as an alternative to check whether the click is legitimate.
   _withinElementBounds(event) {
-    const { left, right, top, bottom } = this.element.getBoundingClientRect();
+    const { left, right, top, bottom } = this.mainWrapperTarget.getBoundingClientRect();
     const { clientX, clientY } = event;
 
     return clientX >= left && clientX <= right && clientY >= top && clientY <= bottom
@@ -1275,7 +1294,8 @@ class HwComboboxController extends Concerns(...concerns) {
     "endOfOptionsStream",
     "handle",
     "hiddenField",
-    "listbox"
+    "listbox",
+    "mainWrapper"
   ]
 
   static values = {

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

@@ -241,16 +241,21 @@
 
   Combobox.Events = Base => class extends Base {
     _dispatchSelectionEvent({ isNew }) {
-      const detail = {
+      dispatch("hw-combobox:selection", { target: this.element, detail: { ...this._eventableDetails, isNew } });
+    }
+
+    _dispatchClosedEvent() {
+      dispatch("hw-combobox:closed", { target: this.element, detail: this._eventableDetails });
+    }
+
+    get _eventableDetails() {
+      return {
         value: this.hiddenFieldTarget.value,
         display: this._fullQuery,
         query: this._typedQuery,
         fieldName: this.hiddenFieldTarget.name,
-        isValid: this._valueIsValid,
-        isNew: isNew
-      };
-
-      dispatch("hw-combobox:selection", { target: this.element, detail });
+        isValid: this._valueIsValid
+      }
     }
   };
 
@@ -538,6 +543,8 @@
       } else {
         this._filterSync(event);
       }
+
+      this._actingCombobox.toggleAttribute("data-queried", this._isQueried);
     }
 
     _initializeFiltering() {
@@ -569,6 +576,8 @@
         this._selectNew();
       } else if (isDeleteEvent(event)) {
         this._deselect();
+      } else if (event.inputType === "hw:lockInSelection") {
+        this._select(this._ensurableOption);
       } else if (this._isOpen) {
         this._select(this._visibleOptionElements[0]);
       }
@@ -710,7 +719,7 @@
   Combobox.Selection = Base => class extends Base {
     selectOptionOnClick(event) {
       this.filter(event);
-      this._select(event.currentTarget);
+      this._select(event.currentTarget, { forceAutocomplete: true });
       this.close();
     }
 
@@ -1099,6 +1108,7 @@
       if (this._isOpen) {
         this._lockInSelection();
         this.expandedValue = false;
+        this._dispatchClosedEvent();
       }
     }
 
@@ -1114,7 +1124,7 @@
       const target = event.target;
 
       if (!this._isOpen) return
-      if (this.element.contains(target) && !this._isDialogDismisser(target)) return
+      if (this.mainWrapperTarget.contains(target) && !this._isDialogDismisser(target)) return
       if (this._withinElementBounds(event)) return
 
       this.close();
@@ -1127,12 +1137,21 @@
       this.close();
     }
 
+    clearOrToggleOnHandleClick() {
+      if (this._isQueried) {
+        this._clearQuery();
+        this._actingCombobox.focus();
+      } else {
+        this.toggle();
+      }
+    }
+
     // 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`
     // as an alternative to check whether the click is legitimate.
     _withinElementBounds(event) {
-      const { left, right, top, bottom } = this.element.getBoundingClientRect();
+      const { left, right, top, bottom } = this.mainWrapperTarget.getBoundingClientRect();
       const { clientX, clientY } = event;
 
       return clientX >= left && clientX <= right && clientY >= top && clientY <= bottom
@@ -1279,7 +1298,8 @@
       "endOfOptionsStream",
       "handle",
       "hiddenField",
-      "listbox"
+      "listbox",
+      "mainWrapper"
     ]
 
     static values = {

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

@@ -3,15 +3,20 @@ import { dispatch } from "hw_combobox/helpers"
 
 Combobox.Events = Base => class extends Base {
   _dispatchSelectionEvent({ isNew }) {
-    const detail = {
+    dispatch("hw-combobox:selection", { target: this.element, detail: { ...this._eventableDetails, isNew } })
+  }
+
+  _dispatchClosedEvent() {
+    dispatch("hw-combobox:closed", { target: this.element, detail: this._eventableDetails })
+  }
+
+  get _eventableDetails() {
+    return {
       value: this.hiddenFieldTarget.value,
       display: this._fullQuery,
       query: this._typedQuery,
       fieldName: this.hiddenFieldTarget.name,
-      isValid: this._valueIsValid,
-      isNew: isNew
+      isValid: this._valueIsValid
     }
-
-    dispatch("hw-combobox:selection", { target: this.element, detail })
   }
 }

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

@@ -10,6 +10,8 @@ Combobox.Filtering = Base => class extends Base {
     } else {
       this._filterSync(event)
     }
+
+    this._actingCombobox.toggleAttribute("data-queried", this._isQueried)
   }
 
   _initializeFiltering() {
@@ -41,6 +43,8 @@ Combobox.Filtering = Base => class extends Base {
       this._selectNew()
     } else if (isDeleteEvent(event)) {
       this._deselect()
+    } else if (event.inputType === "hw:lockInSelection") {
+      this._select(this._ensurableOption)
     } else if (this._isOpen) {
       this._select(this._visibleOptionElements[0])
     }

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

@@ -4,7 +4,7 @@ import { wrapAroundAccess } from "hw_combobox/helpers"
 Combobox.Selection = Base => class extends Base {
   selectOptionOnClick(event) {
     this.filter(event)
-    this._select(event.currentTarget)
+    this._select(event.currentTarget, { forceAutocomplete: true })
     this.close()
   }
 

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

@@ -10,6 +10,7 @@ Combobox.Toggle = Base => class extends Base {
     if (this._isOpen) {
       this._lockInSelection()
       this.expandedValue = false
+      this._dispatchClosedEvent()
     }
   }
 
@@ -25,7 +26,7 @@ Combobox.Toggle = Base => class extends Base {
     const target = event.target
 
     if (!this._isOpen) return
-    if (this.element.contains(target) && !this._isDialogDismisser(target)) return
+    if (this.mainWrapperTarget.contains(target) && !this._isDialogDismisser(target)) return
     if (this._withinElementBounds(event)) return
 
     this.close()
@@ -38,12 +39,21 @@ Combobox.Toggle = Base => class extends Base {
     this.close()
   }
 
+  clearOrToggleOnHandleClick() {
+    if (this._isQueried) {
+      this._clearQuery()
+      this._actingCombobox.focus()
+    } else {
+      this.toggle()
+    }
+  }
+
   // 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`
   // as an alternative to check whether the click is legitimate.
   _withinElementBounds(event) {
-    const { left, right, top, bottom } = this.element.getBoundingClientRect()
+    const { left, right, top, bottom } = this.mainWrapperTarget.getBoundingClientRect()
     const { clientX, clientY } = event
 
     return clientX >= left && clientX <= right && clientY >= top && clientY <= bottom

data/app/assets/stylesheets/hotwire_combobox.css

@@ -1,7 +1,11 @@
 :root {
   --hw-active-bg-color: #F3F4F6;
-
   --hw-border-color: #D1D5DB;
+  --hw-invalid-color: #EF4444;
+  --hw-dialog-label-color: #1D1D1D;
+  --hw-focus-color: #2563EB;
+  --hw-option-bg-color: #FFFFFF;
+
   --hw-border-radius: 0.375rem;
   --hw-border-width--slim: 1px;
   --hw-border-width--thick: 2px;
@@ -9,7 +13,6 @@
   --hw-dialog-font-size: 1.25rem;
   --hw-dialog-input-height: 2.5rem;
   --hw-dialog-label-alignment: center;
-  --hw-dialog-label-color: #1D1D1D;
   --hw-dialog-label-padding: 0.5rem 0 0.375rem;
   --hw-dialog-label-size: 1.05rem;
   --hw-dialog-listbox-margin: 1.25rem 0 0;
@@ -19,21 +22,19 @@
   --hw-font-size: 1rem;
 
   --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-focus-color: #2563EB;
-
   --hw-line-height: 1.5rem;
 
   --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-option-bg-color: #FFFFFF;
-
   --hw-padding--slim: 0.375rem;
   --hw-padding--thick: 0.75rem;
 
@@ -42,8 +43,10 @@
 
 .hw-combobox {
   border-width: 0;
-  display: inline-block;
+  display: inline-flex;
+  flex-direction: column;
   font-size: var(--hw-font-size);
+  gap: var(--hw-padding--slim);
   margin: 0;
   padding: 0;
   position: relative;
@@ -53,6 +56,11 @@
   }
 }
 
+.hw-combobox__main__wrapper {
+  position: relative;
+  width: min-content;
+}
+
 .hw-combobox__input {
   border: var(--hw-border-width--slim) solid var(--hw-border-color);
   border-radius: var(--hw-border-radius);
@@ -64,6 +72,15 @@
   text-overflow: ellipsis;
 }
 
+.hw-combobox__input:focus-visible {
+  box-shadow: 0 0 0 var(--hw-border-width--thick) var(--hw-focus-color);
+  outline: none;
+}
+
+.hw-combobox__input--invalid {
+  border: var(--hw-border-width--slim) solid var(--hw-invalid-color);
+}
+
 .hw-combobox__handle {
   height: 100%;
   position: absolute;
@@ -85,9 +102,10 @@
   top: 0;
 }
 
-.hw-combobox__input:focus-visible {
-  box-shadow: 0 0 0 var(--hw-border-width--thick) var(--hw-focus-color);
-  outline: none;
+.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 {

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

@@ -0,0 +1,52 @@
+module HotwireCombobox::Component::Customizable
+  CUSTOMIZABLE_ELEMENTS = %i[
+    fieldset
+    label
+    hidden_field
+    main_wrapper
+    input
+    handle
+    listbox
+    dialog
+    dialog_wrapper
+    dialog_label
+    dialog_input
+    dialog_listbox
+  ].freeze
+
+  PROTECTED_ATTRS = %i[
+    id
+    name
+    value
+    open
+    role
+    hidden
+    for
+  ].freeze
+
+  CUSTOMIZABLE_ELEMENTS.each do |element|
+    define_method "customize_#{element}" do |**attrs|
+      customize element, **attrs
+    end
+  end
+
+  private
+    def custom_attrs
+      @custom_attrs ||= Hash.new { |h, k| h[k] = {} }
+    end
+
+    def customize(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: {})
+      custom = custom_attrs[element]
+      coalesce = ->(k, v) { v.is_a?(String) ? view.token_list(v, custom.delete(k)) : v }
+      default = base.map { |k, v| [ k, coalesce.(k, v) ] }.to_h
+
+      custom.deep_merge default
+    end
+end

data/app/presenters/hotwire_combobox/component.rb

@@ -1,7 +1,9 @@
 require "securerandom"
 
 class HotwireCombobox::Component
-  attr_reader :options, :dialog_label
+  include Customizable
+
+  attr_reader :options, :label
 
   def initialize \
       view, name,
@@ -13,31 +15,47 @@ class HotwireCombobox::Component
       form:             nil,
       id:               nil,
       input:            {},
+      label:            nil,
       mobile_at:        "640px",
       name_when_new:    nil,
       open:             false,
       options:          [],
       value:            nil,
       **rest
-    @view, @autocomplete, @id, @name, @value, @form, @async_src,
+    @view, @autocomplete, @id, @name, @value, @form, @async_src, @label,
     @name_when_new, @open, @data, @mobile_at, @options, @dialog_label =
-      view, autocomplete, id, name.to_s, value, form, async_src,
+      view, autocomplete, id, name.to_s, value, form, async_src, label,
       name_when_new, open, data, mobile_at, options, dialog_label
 
-    @combobox_attrs = input.reverse_merge(rest).with_indifferent_access
+    @combobox_attrs = input.reverse_merge(rest).deep_symbolize_keys
     @association_name = association_name || infer_association_name
   end
 
+  def render_in(view_context, &block)
+    block.call(self) if block_given?
+    view_context.render partial: "hotwire_combobox/component", locals: { component: self }
+  end
+
+
   def fieldset_attrs
-    {
+    apply_customizations_to :fieldset, base: {
       class: "hw-combobox",
       data: fieldset_data
     }
   end
 
 
+  def label_attrs
+    apply_customizations_to :label, base: {
+      class: "hw-combobox__label",
+      for: input_id,
+      hidden: label.blank?
+    }
+  end
+
+
   def hidden_field_attrs
-    {
+    apply_customizations_to :hidden_field, base: {
       id: hidden_field_id,
       name: hidden_field_name,
       data: hidden_field_data,
@@ -46,10 +64,18 @@ class HotwireCombobox::Component
   end
 
 
+  def main_wrapper_attrs
+    apply_customizations_to :main_wrapper, base: {
+      class: "hw-combobox__main__wrapper",
+      data: main_wrapper_data
+    }
+  end
+
+
   def input_attrs
     nested_attrs = %i[ data aria ]
 
-    {
+    base = {
       id: input_id,
       role: :combobox,
       class: "hw-combobox__input",
@@ -57,12 +83,14 @@ class HotwireCombobox::Component
       data: input_data,
       aria: input_aria,
       autocomplete: :off
-    }.with_indifferent_access.merge combobox_attrs.except(*nested_attrs)
+    }.merge combobox_attrs.except(*nested_attrs)
+
+    apply_customizations_to :input, base: base
   end
 
 
   def handle_attrs
-    {
+    apply_customizations_to :handle, base: {
       class: "hw-combobox__handle",
       data: handle_data
     }
@@ -70,7 +98,7 @@ class HotwireCombobox::Component
 
 
   def listbox_attrs
-    {
+    apply_customizations_to :listbox, base: {
       id: listbox_id,
       role: :listbox,
       class: "hw-combobox__listbox",
@@ -81,28 +109,32 @@ class HotwireCombobox::Component
 
 
   def dialog_wrapper_attrs
-    {
+    apply_customizations_to :dialog_wrapper, base: {
       class: "hw-combobox__dialog__wrapper"
     }
   end
 
   def dialog_attrs
-    {
+    apply_customizations_to :dialog, base: {
       class: "hw-combobox__dialog",
       role: :dialog,
       data: dialog_data
     }
   end
 
+  def dialog_label
+    @dialog_label || label
+  end
+
   def dialog_label_attrs
-    {
+    apply_customizations_to :dialog_label, base: {
       class: "hw-combobox__dialog__label",
       for: dialog_input_id
     }
   end
 
   def dialog_input_attrs
-    {
+    apply_customizations_to :dialog_input, base: {
       id: dialog_input_id,
       role: :combobox,
       class: "hw-combobox__dialog__input",
@@ -114,7 +146,7 @@ class HotwireCombobox::Component
   end
 
   def dialog_listbox_attrs
-    {
+    apply_customizations_to :dialog_listbox, base: {
       id: dialog_listbox_id,
       class: "hw-combobox__dialog__listbox",
       role: :listbox,
@@ -194,6 +226,11 @@ class HotwireCombobox::Component
     end
 
 
+    def main_wrapper_data
+      { hw_combobox_target: "mainWrapper" }
+    end
+
+
     def hidden_field_id
       "#{canonical_id}-hw-hidden-field"
     end
@@ -250,7 +287,7 @@ class HotwireCombobox::Component
 
     def handle_data
       {
-        action: "click->hw-combobox#toggle",
+        action: "click->hw-combobox#clearOrToggleOnHandleClick",
         hw_combobox_target: "handle"
       }
     end

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

@@ -0,0 +1,11 @@
+<%= tag.fieldset **component.fieldset_attrs do %>
+  <%= tag.label component.label, **component.label_attrs %>
+
+  <%= render "hotwire_combobox/combobox/hidden_field", component: component %>
+
+  <%= tag.div **component.main_wrapper_attrs do %>
+    <%= render "hotwire_combobox/combobox/input", component: component %>
+    <%= render "hotwire_combobox/combobox/paginated_listbox", component: component %>
+    <%= render "hotwire_combobox/combobox/dialog", component: component %>
+  <% end %>
+<% end %>

data/lib/hotwire_combobox/engine.rb

@@ -9,8 +9,8 @@ module HotwireCombobox
 
         unless HotwireCombobox.bypass_convenience_methods?
           module FormBuilderExtensions
-            def combobox(*args, **kwargs)
-              @template.hw_combobox_tag(*args, **kwargs.merge(form: self))
+            def combobox(*args, **kwargs, &block)
+              @template.hw_combobox_tag(*args, **kwargs.merge(form: self), &block)
             end
           end
 

data/lib/hotwire_combobox/helper.rb

@@ -15,11 +15,10 @@ module HotwireCombobox
     end
     hw_alias :hw_combobox_style_tag
 
-    def hw_combobox_tag(name, options_or_src = [], render_in: {}, include_blank: nil, **kwargs)
+    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)
       component = HotwireCombobox::Component.new self, name, options: options, async_src: src, **kwargs
-
-      render "hotwire_combobox/combobox", component: component
+      render component, &block
     end
     hw_alias :hw_combobox_tag
 
@@ -27,11 +26,9 @@ module HotwireCombobox
       if options.first.is_a? HotwireCombobox::Listbox::Option
         options
       else
-        render_in_proc = hw_render_in_proc(render_in) if render_in.present?
-
-        hw_parse_combobox_options(options, render_in: render_in_proc, **methods.merge(display: display)).tap do |options|
-          options.unshift(hw_blank_option(include_blank)) if include_blank.present?
-        end
+        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
       end
     end
     hw_alias :hw_combobox_options
@@ -86,7 +83,7 @@ module HotwireCombobox
         if include_blank.is_a? Hash
           text = include_blank.delete(:text)
 
-          [ text, hw_render_in_proc(include_blank).(text) ]
+          [ text, hw_call_render_in_proc(hw_render_in_proc(include_blank), text, display: text, value: "") ]
         else
           [ include_blank, include_blank ]
         end
@@ -103,7 +100,9 @@ module HotwireCombobox
 
     private
       def hw_render_in_proc(render_in)
-        ->(object) { render(**render_in.reverse_merge(object: object)) }
+        if render_in.present?
+          ->(object, locals) { render(**render_in.reverse_merge(object: object, locals: locals)) }
+        end
       end
 
       def hw_extract_options_and_src(options_or_src, render_in, include_blank)
@@ -114,40 +113,50 @@ module HotwireCombobox
         end
       end
 
-      def hw_parse_combobox_options(options, render_in: nil, **methods)
+      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: render_in, **methods)
+            **hw_option_attrs_for(option, render_in_proc: render_in_proc, **methods)
         end
       end
 
-      def hw_option_attrs_for(option, render_in: nil, **methods)
+      def hw_option_attrs_for(option, render_in_proc: nil, **methods)
         case option
         when Hash
-          option
+          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] = render_in.(option) if render_in
+            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] = render_in.(option.first) if render_in
+            attrs[:content] = hw_call_render_in_proc(render_in_proc, attrs[:display], attrs) if render_in_proc
           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]
+            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

data/lib/hotwire_combobox/version.rb

@@ -1,3 +1,3 @@
 module HotwireCombobox
-  VERSION = "0.1.40"
+  VERSION = "0.1.42"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hotwire_combobox
 version: !ruby/object:Gem::Version
-  version: 0.1.40
+  version: 0.1.42
 platform: ruby
 authors:
 - Jose Farias
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-03-07 00:00:00.000000000 Z
+date: 2024-03-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -85,8 +85,9 @@ files:
 - app/assets/javascripts/hw_combobox/vendor/requestjs.js
 - app/assets/stylesheets/hotwire_combobox.css
 - app/presenters/hotwire_combobox/component.rb
+- app/presenters/hotwire_combobox/component/customizable.rb
 - app/presenters/hotwire_combobox/listbox/option.rb
-- app/views/hotwire_combobox/_combobox.html.erb
+- app/views/hotwire_combobox/_component.html.erb
 - app/views/hotwire_combobox/_next_page.turbo_stream.erb
 - app/views/hotwire_combobox/_paginated_options.turbo_stream.erb
 - app/views/hotwire_combobox/_pagination.html.erb

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

@@ -1,6 +0,0 @@
-<%= tag.fieldset **component.fieldset_attrs do %>
-  <%= render "hotwire_combobox/combobox/hidden_field", component: component %>
-  <%= render "hotwire_combobox/combobox/input", component: component %>
-  <%= render "hotwire_combobox/combobox/paginated_listbox", component: component %>
-  <%= render "hotwire_combobox/combobox/dialog", component: component %>
-<% end %>