hotwire_combobox 0.1.40 → 0.1.41

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e3b6e7d5c71ba2836a388709890b4402ab2b3ff4ab194a2d1ce75928d96b3886
-  data.tar.gz: 78a2543c2354e7dccfe0477288144845b6d06a7611c01204612fd24b53cb6bc9
+  metadata.gz: 1fc70c854bf6cdceda08dd727b854a63b7deb0703d9a8dafcab0bd74ca3e73d0
+  data.tar.gz: ec4ad558a47dcdb94e68d360671a89f3d9147a7a2a172a741f06f59dfbfd096a
 SHA512:
-  metadata.gz: d1e72f48fb5b0387b454afe6cfa7484b0e5c84dfe18000d025005558fc2e29232047f5179e82dbc41b7b48147f3b76d66ae72ff2d0f8c777340a1ab06a3ab9d8
-  data.tar.gz: 840447f162fba6892a920e74ddde5b862bb9ac4deac7d56948e62998470d19e9747112a066dfbd45db476c628d1910442d33b7f28b2fed242bc1de698a4a8a12
+  metadata.gz: 1cb4ab65ec2312a055400870a1c2e91a11e598c389daf96f1f3f079627fac208fbaad73bad1a957db1a5eff33eaaba7c7d2c7eccc7aa389bdcdf9c51e26832b6
+  data.tar.gz: fbb2db40e5b529084c5c65ab644c3af9c0f5721741f2692dcc85e76362f82ebdddf94f979d02b80328b8b39828468e591d6d61faeec3ecff7f262c327bb78a6b

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

@@ -534,6 +534,8 @@ Combobox.Filtering = Base => class extends Base {
     } else {
       this._filterSync(event);
     }
+
+    this._actingCombobox.toggleAttribute("data-queried", this._isQueried);
   }
 
   _initializeFiltering() {
@@ -565,6 +567,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 +710,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();
   }
 
@@ -1110,7 +1114,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 +1127,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 +1288,8 @@ class HwComboboxController extends Concerns(...concerns) {
     "endOfOptionsStream",
     "handle",
     "hiddenField",
-    "listbox"
+    "listbox",
+    "mainWrapper"
   ]
 
   static values = {

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

@@ -538,6 +538,8 @@
       } else {
         this._filterSync(event);
       }
+
+      this._actingCombobox.toggleAttribute("data-queried", this._isQueried);
     }
 
     _initializeFiltering() {
@@ -569,6 +571,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 +714,7 @@
   Combobox.Selection = Base => class extends Base {
     selectOptionOnClick(event) {
       this.filter(event);
-      this._select(event.currentTarget);
+      this._select(event.currentTarget, { forceAutocomplete: true });
       this.close();
     }
 
@@ -1114,7 +1118,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 +1131,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 +1292,8 @@
       "endOfOptionsStream",
       "handle",
       "hiddenField",
-      "listbox"
+      "listbox",
+      "mainWrapper"
     ]
 
     static values = {

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

@@ -25,7 +25,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 +38,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/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
 

data/lib/hotwire_combobox/version.rb

@@ -1,3 +1,3 @@
 module HotwireCombobox
-  VERSION = "0.1.40"
+  VERSION = "0.1.41"
 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.41
 platform: ruby
 authors:
 - Jose Farias
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-03-07 00:00:00.000000000 Z
+date: 2024-03-12 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 %>