hotwire_combobox 0.3.1 → 0.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fb0eaf3c6593f518473d24ffdb931dc2519adc97c74eb4539055920c3ffd5ef9
-  data.tar.gz: 888c826e85dc6e77b601c89fc4a573a3f45706e51203aadc7edc14b431a50245
+  metadata.gz: 5bdfc61a78393aa3f25828d5a09b0146038b1e4c74aeeb1189eb3d9cb3da1bc4
+  data.tar.gz: be98cd6da831d77f7401127bfc6409cd93a07dbe13d57b4198427ca0d662e146
 SHA512:
-  metadata.gz: 5c2725f7a89aff33a4fa649e37f03f363c28fab51ca930337593897068c5c60732568f8fb6b43e8c7f9cdc9309fdea9dd55298baed2774c50dc0e6041c59b989
-  data.tar.gz: b63c3b6031f3d74190115f5f01152085491125bc5ee0a721c3c1cb0be493993f3dec83b8132424bd471b93ff36f6b248f7f27d0abb34a3821959b6b9a2900fe7
+  metadata.gz: 9a6556e4c39ae6b6ae721e1e0fc587c5c1224365ca5e1feffdf32750b1a69085e3ec531ea8eafc3857cbc841d12c2a361321a295bbf90197ce3054547fe1abed
+  data.tar.gz: e4d81183deceede7b786abe9732d12c1ce76c2399ae8e44d4f3c4ebfa6822fef041b661358ea0ce254200985dd3643a056b50fa992e7ad94f3e5d6522ceaa7f4

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

@@ -1,5 +1,6 @@
 import Combobox from "hw_combobox/models/combobox"
 import { Concerns, sleep } from "hw_combobox/helpers"
+import { nextRepaint } from "hw_combobox/helpers"
 import { Controller } from "@hotwired/stimulus"
 
 window.HOTWIRE_COMBOBOX_STREAM_DELAY = 0 // ms, for testing purposes
@@ -10,6 +11,7 @@ const concerns = [
   Combobox.Announcements,
   Combobox.AsyncLoading,
   Combobox.Autocomplete,
+  Combobox.Callbacks,
   Combobox.Dialog,
   Combobox.Events,
   Combobox.Filtering,
@@ -61,6 +63,7 @@ export default class HwComboboxController extends Concerns(...concerns) {
   initialize() {
     this._initializeActors()
     this._initializeFiltering()
+    this._initializeCallbacks()
   }
 
   connect() {
@@ -87,18 +90,39 @@ export default class HwComboboxController extends Concerns(...concerns) {
   }
 
   async endOfOptionsStreamTargetConnected(element) {
-    const inputType = element.dataset.inputType
-    const delay = window.HOTWIRE_COMBOBOX_STREAM_DELAY
+    if (element.dataset.callbackId) {
+      this._runCallback(element)
+    } else {
+      this._preselectSingle()
+    }
+  }
+
+  async _runCallback(element) {
+    const callbackId = element.dataset.callbackId
 
-    this._resetMultiselectionMarks()
+    if (this._callbackAttemptsExceeded(callbackId)) {
+      this._dequeueCallback(callbackId)
+      return
+    } else {
+      this._recordCallbackAttempt(callbackId)
+    }
+
+    if (this._isNextCallback(callbackId)) {
+      const inputType = element.dataset.inputType
+      const delay = window.HOTWIRE_COMBOBOX_STREAM_DELAY
 
-    if (inputType === "hw:multiselectSync") {
-      this.openByFocusing()
-    } else if (inputType && inputType !== "hw:lockInSelection") {
       if (delay) await sleep(delay)
-      this._selectOnQuery(inputType)
+      this._dequeueCallback(callbackId)
+      this._resetMultiselectionMarks()
+
+      if (inputType === "hw:multiselectSync") {
+        this.openByFocusing()
+      } else if (inputType !== "hw:lockInSelection") {
+        this._selectOnQuery(inputType)
+      }
     } else {
-      this._preselectSingle()
+      await nextRepaint()
+      this._runCallback(element)
     }
   }
 

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

@@ -1,5 +1,5 @@
 /*!
-HotwireCombobox 0.3.1
+HotwireCombobox 0.3.2
 */
 import { Controller } from '@hotwired/stimulus';
 
@@ -204,6 +204,50 @@ Combobox.Autocomplete = Base => class extends Base {
   }
 };
 
+const MAX_CALLBACK_ATTEMPTS = 3;
+
+Combobox.Callbacks = Base => class extends Base {
+  _initializeCallbacks() {
+    this.callbackQueue = [];
+    this.callbackExecutionAttempts = {};
+  }
+
+  _enqueueCallback() {
+    const callbackId = crypto.randomUUID();
+    this.callbackQueue.push(callbackId);
+    return callbackId
+  }
+
+  _isNextCallback(callbackId) {
+    return this._nextCallback === callbackId
+  }
+
+  _callbackAttemptsExceeded(callbackId) {
+    return this._callbackAttempts(callbackId) > MAX_CALLBACK_ATTEMPTS
+  }
+
+  _callbackAttempts(callbackId) {
+    return this.callbackExecutionAttempts[callbackId] || 0
+  }
+
+  _recordCallbackAttempt(callbackId) {
+    this.callbackExecutionAttempts[callbackId] = this._callbackAttempts(callbackId) + 1;
+  }
+
+  _dequeueCallback(callbackId) {
+    this.callbackQueue = this.callbackQueue.filter(id => id !== callbackId);
+    this._forgetCallbackExecutionAttempts(callbackId);
+  }
+
+  _forgetCallbackExecutionAttempts(callbackId) {
+    delete this.callbackExecutionAttempts[callbackId];
+  }
+
+  get _nextCallback() {
+    return this.callbackQueue[0]
+  }
+};
+
 Combobox.Dialog = Base => class extends Base {
   rerouteListboxStreamToDialog({ detail: { newStream } }) {
     if (newStream.target == this.listboxTarget.id && this._dialogIsOpen) {
@@ -592,6 +636,12 @@ Combobox.Filtering = Base => class extends Base {
     }
   }
 
+  clear(event) {
+    this._clearQuery();
+    this.chipDismisserTargets.forEach(el => el.click());
+    if (event && !event.defaultPrevented) event.target.focus();
+  }
+
   _initializeFiltering() {
     this._debouncedFilterAsync = debounce(this._debouncedFilterAsync.bind(this));
   }
@@ -614,7 +664,8 @@ Combobox.Filtering = Base => class extends Base {
     const query = {
       q: this._fullQuery,
       input_type: inputType,
-      for_id: this.element.dataset.asyncId
+      for_id: this.element.dataset.asyncId,
+      callback_id: this._enqueueCallback()
     };
 
     await get(this.asyncSrcValue, { responseKind: "turbo-stream", query });
@@ -635,7 +686,7 @@ Combobox.Filtering = Base => class extends Base {
   }
 
   _markQueried() {
-    this._actingCombobox.toggleAttribute("data-queried", this._isQueried);
+    this._forAllComboboxes(el => el.toggleAttribute("data-queried", this._isQueried));
   }
 
   get _isQueried() {
@@ -1657,6 +1708,7 @@ const concerns = [
   Combobox.Announcements,
   Combobox.AsyncLoading,
   Combobox.Autocomplete,
+  Combobox.Callbacks,
   Combobox.Dialog,
   Combobox.Events,
   Combobox.Filtering,
@@ -1708,6 +1760,7 @@ class HwComboboxController extends Concerns(...concerns) {
   initialize() {
     this._initializeActors();
     this._initializeFiltering();
+    this._initializeCallbacks();
   }
 
   connect() {
@@ -1734,18 +1787,39 @@ class HwComboboxController extends Concerns(...concerns) {
   }
 
   async endOfOptionsStreamTargetConnected(element) {
-    const inputType = element.dataset.inputType;
-    const delay = window.HOTWIRE_COMBOBOX_STREAM_DELAY;
+    if (element.dataset.callbackId) {
+      this._runCallback(element);
+    } else {
+      this._preselectSingle();
+    }
+  }
 
-    this._resetMultiselectionMarks();
+  async _runCallback(element) {
+    const callbackId = element.dataset.callbackId;
+
+    if (this._callbackAttemptsExceeded(callbackId)) {
+      this._dequeueCallback(callbackId);
+      return
+    } else {
+      this._recordCallbackAttempt(callbackId);
+    }
+
+    if (this._isNextCallback(callbackId)) {
+      const inputType = element.dataset.inputType;
+      const delay = window.HOTWIRE_COMBOBOX_STREAM_DELAY;
 
-    if (inputType === "hw:multiselectSync") {
-      this.openByFocusing();
-    } else if (inputType && inputType !== "hw:lockInSelection") {
       if (delay) await sleep(delay);
-      this._selectOnQuery(inputType);
+      this._dequeueCallback(callbackId);
+      this._resetMultiselectionMarks();
+
+      if (inputType === "hw:multiselectSync") {
+        this.openByFocusing();
+      } else if (inputType !== "hw:lockInSelection") {
+        this._selectOnQuery(inputType);
+      }
     } else {
-      this._preselectSingle();
+      await nextRepaint();
+      this._runCallback(element);
     }
   }
 

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

@@ -1,5 +1,5 @@
 /*!
-HotwireCombobox 0.3.1
+HotwireCombobox 0.3.2
 */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@hotwired/stimulus')) :
@@ -208,6 +208,50 @@ HotwireCombobox 0.3.1
     }
   };
 
+  const MAX_CALLBACK_ATTEMPTS = 3;
+
+  Combobox.Callbacks = Base => class extends Base {
+    _initializeCallbacks() {
+      this.callbackQueue = [];
+      this.callbackExecutionAttempts = {};
+    }
+
+    _enqueueCallback() {
+      const callbackId = crypto.randomUUID();
+      this.callbackQueue.push(callbackId);
+      return callbackId
+    }
+
+    _isNextCallback(callbackId) {
+      return this._nextCallback === callbackId
+    }
+
+    _callbackAttemptsExceeded(callbackId) {
+      return this._callbackAttempts(callbackId) > MAX_CALLBACK_ATTEMPTS
+    }
+
+    _callbackAttempts(callbackId) {
+      return this.callbackExecutionAttempts[callbackId] || 0
+    }
+
+    _recordCallbackAttempt(callbackId) {
+      this.callbackExecutionAttempts[callbackId] = this._callbackAttempts(callbackId) + 1;
+    }
+
+    _dequeueCallback(callbackId) {
+      this.callbackQueue = this.callbackQueue.filter(id => id !== callbackId);
+      this._forgetCallbackExecutionAttempts(callbackId);
+    }
+
+    _forgetCallbackExecutionAttempts(callbackId) {
+      delete this.callbackExecutionAttempts[callbackId];
+    }
+
+    get _nextCallback() {
+      return this.callbackQueue[0]
+    }
+  };
+
   Combobox.Dialog = Base => class extends Base {
     rerouteListboxStreamToDialog({ detail: { newStream } }) {
       if (newStream.target == this.listboxTarget.id && this._dialogIsOpen) {
@@ -596,6 +640,12 @@ HotwireCombobox 0.3.1
       }
     }
 
+    clear(event) {
+      this._clearQuery();
+      this.chipDismisserTargets.forEach(el => el.click());
+      if (event && !event.defaultPrevented) event.target.focus();
+    }
+
     _initializeFiltering() {
       this._debouncedFilterAsync = debounce(this._debouncedFilterAsync.bind(this));
     }
@@ -618,7 +668,8 @@ HotwireCombobox 0.3.1
       const query = {
         q: this._fullQuery,
         input_type: inputType,
-        for_id: this.element.dataset.asyncId
+        for_id: this.element.dataset.asyncId,
+        callback_id: this._enqueueCallback()
       };
 
       await get(this.asyncSrcValue, { responseKind: "turbo-stream", query });
@@ -639,7 +690,7 @@ HotwireCombobox 0.3.1
     }
 
     _markQueried() {
-      this._actingCombobox.toggleAttribute("data-queried", this._isQueried);
+      this._forAllComboboxes(el => el.toggleAttribute("data-queried", this._isQueried));
     }
 
     get _isQueried() {
@@ -1661,6 +1712,7 @@ HotwireCombobox 0.3.1
     Combobox.Announcements,
     Combobox.AsyncLoading,
     Combobox.Autocomplete,
+    Combobox.Callbacks,
     Combobox.Dialog,
     Combobox.Events,
     Combobox.Filtering,
@@ -1712,6 +1764,7 @@ HotwireCombobox 0.3.1
     initialize() {
       this._initializeActors();
       this._initializeFiltering();
+      this._initializeCallbacks();
     }
 
     connect() {
@@ -1738,18 +1791,39 @@ HotwireCombobox 0.3.1
     }
 
     async endOfOptionsStreamTargetConnected(element) {
-      const inputType = element.dataset.inputType;
-      const delay = window.HOTWIRE_COMBOBOX_STREAM_DELAY;
+      if (element.dataset.callbackId) {
+        this._runCallback(element);
+      } else {
+        this._preselectSingle();
+      }
+    }
 
-      this._resetMultiselectionMarks();
+    async _runCallback(element) {
+      const callbackId = element.dataset.callbackId;
+
+      if (this._callbackAttemptsExceeded(callbackId)) {
+        this._dequeueCallback(callbackId);
+        return
+      } else {
+        this._recordCallbackAttempt(callbackId);
+      }
+
+      if (this._isNextCallback(callbackId)) {
+        const inputType = element.dataset.inputType;
+        const delay = window.HOTWIRE_COMBOBOX_STREAM_DELAY;
 
-      if (inputType === "hw:multiselectSync") {
-        this.openByFocusing();
-      } else if (inputType && inputType !== "hw:lockInSelection") {
         if (delay) await sleep(delay);
-        this._selectOnQuery(inputType);
+        this._dequeueCallback(callbackId);
+        this._resetMultiselectionMarks();
+
+        if (inputType === "hw:multiselectSync") {
+          this.openByFocusing();
+        } else if (inputType !== "hw:lockInSelection") {
+          this._selectOnQuery(inputType);
+        }
       } else {
-        this._preselectSingle();
+        await nextRepaint();
+        this._runCallback(element);
       }
     }
 

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

@@ -0,0 +1,45 @@
+import Combobox from "hw_combobox/models/combobox/base"
+
+const MAX_CALLBACK_ATTEMPTS = 3
+
+Combobox.Callbacks = Base => class extends Base {
+  _initializeCallbacks() {
+    this.callbackQueue = []
+    this.callbackExecutionAttempts = {}
+  }
+
+  _enqueueCallback() {
+    const callbackId = crypto.randomUUID()
+    this.callbackQueue.push(callbackId)
+    return callbackId
+  }
+
+  _isNextCallback(callbackId) {
+    return this._nextCallback === callbackId
+  }
+
+  _callbackAttemptsExceeded(callbackId) {
+    return this._callbackAttempts(callbackId) > MAX_CALLBACK_ATTEMPTS
+  }
+
+  _callbackAttempts(callbackId) {
+    return this.callbackExecutionAttempts[callbackId] || 0
+  }
+
+  _recordCallbackAttempt(callbackId) {
+    this.callbackExecutionAttempts[callbackId] = this._callbackAttempts(callbackId) + 1
+  }
+
+  _dequeueCallback(callbackId) {
+    this.callbackQueue = this.callbackQueue.filter(id => id !== callbackId)
+    this._forgetCallbackExecutionAttempts(callbackId)
+  }
+
+  _forgetCallbackExecutionAttempts(callbackId) {
+    delete this.callbackExecutionAttempts[callbackId]
+  }
+
+  get _nextCallback() {
+    return this.callbackQueue[0]
+  }
+}

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

@@ -14,6 +14,12 @@ Combobox.Filtering = Base => class extends Base {
     }
   }
 
+  clear(event) {
+    this._clearQuery()
+    this.chipDismisserTargets.forEach(el => el.click())
+    if (event && !event.defaultPrevented) event.target.focus()
+  }
+
   _initializeFiltering() {
     this._debouncedFilterAsync = debounce(this._debouncedFilterAsync.bind(this))
   }
@@ -36,7 +42,8 @@ Combobox.Filtering = Base => class extends Base {
     const query = {
       q: this._fullQuery,
       input_type: inputType,
-      for_id: this.element.dataset.asyncId
+      for_id: this.element.dataset.asyncId,
+      callback_id: this._enqueueCallback()
     }
 
     await get(this.asyncSrcValue, { responseKind: "turbo-stream", query })
@@ -57,7 +64,7 @@ Combobox.Filtering = Base => class extends Base {
   }
 
   _markQueried() {
-    this._actingCombobox.toggleAttribute("data-queried", this._isQueried)
+    this._forAllComboboxes(el => el.toggleAttribute("data-queried", this._isQueried))
   }
 
   get _isQueried() {

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

@@ -4,6 +4,7 @@ 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/callbacks"
 import "hw_combobox/models/combobox/dialog"
 import "hw_combobox/models/combobox/events"
 import "hw_combobox/models/combobox/filtering"

data/app/assets/stylesheets/hotwire_combobox.css

@@ -209,7 +209,7 @@
     align-items: center;
     display: flex;
     flex-direction: column;
-    justify-content: start;
+    justify-content: flex-start;
   }
 
   &::backdrop {

data/app/presenters/hotwire_combobox/component.rb

@@ -246,7 +246,7 @@ class HotwireCombobox::Component
       elsif async_src && form_object&.respond_to?(name)
         form_object.public_send name
       else
-        options.find_by_value(hidden_field_value)&.autocompletable_as
+        options.find_by_value(hidden_field_value)&.autocompletable_as || hidden_field_value
       end
     end
 

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

@@ -26,6 +26,7 @@ class HotwireCombobox::Listbox::Option
       {
         id: id,
         role: :option,
+        tabindex: "-1",
         class: [ "hw-combobox__option", { "hw-combobox__option--blank": blank? } ],
         data: data,
         aria: aria

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

@@ -1,7 +1,7 @@
 <%# locals: (for_id:, src:) -%>
 
 <%= tag.li id: hw_pagination_frame_wrapper_id(for_id), class: "hw_combobox__pagination__wrapper",
-      data: { hw_combobox_target: "endOfOptionsStream", input_type: params[:input_type] },
+      data: { hw_combobox_target: "endOfOptionsStream", input_type: params[:input_type], callback_id: params[:callback_id] },
       aria: { hidden: true } do %>
   <%= turbo_frame_tag hw_pagination_frame_id(for_id), src: src, loading: :lazy %>
 <% end %>

data/lib/hotwire_combobox/version.rb

@@ -1,3 +1,3 @@
 module HotwireCombobox
-  VERSION = "0.3.1"
+  VERSION = "0.3.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hotwire_combobox
 version: !ruby/object:Gem::Version
-  version: 0.3.1
+  version: 0.3.2
 platform: ruby
 authors:
 - Jose Farias
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-05-31 00:00:00.000000000 Z
+date: 2024-08-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -87,6 +87,7 @@ files:
 - app/assets/javascripts/hw_combobox/models/combobox/async_loading.js
 - app/assets/javascripts/hw_combobox/models/combobox/autocomplete.js
 - app/assets/javascripts/hw_combobox/models/combobox/base.js
+- app/assets/javascripts/hw_combobox/models/combobox/callbacks.js
 - app/assets/javascripts/hw_combobox/models/combobox/dialog.js
 - app/assets/javascripts/hw_combobox/models/combobox/events.js
 - app/assets/javascripts/hw_combobox/models/combobox/filtering.js
@@ -144,7 +145,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.10
+rubygems_version: 3.5.11
 signing_key:
 specification_version: 4
 summary: Accessible Autocomplete for Rails apps