hotwire_combobox 0.1.42 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -0
  3. data/app/assets/javascripts/controllers/hw_combobox_controller.js +25 -3
  4. data/app/assets/javascripts/hotwire_combobox.esm.js +531 -127
  5. data/app/assets/javascripts/hotwire_combobox.umd.js +531 -127
  6. data/app/assets/javascripts/hw_combobox/helpers.js +16 -0
  7. data/app/assets/javascripts/hw_combobox/models/combobox/announcements.js +7 -0
  8. data/app/assets/javascripts/hw_combobox/models/combobox/async_loading.js +4 -0
  9. data/app/assets/javascripts/hw_combobox/models/combobox/autocomplete.js +8 -6
  10. data/app/assets/javascripts/hw_combobox/models/combobox/dialog.js +1 -1
  11. data/app/assets/javascripts/hw_combobox/models/combobox/events.js +21 -6
  12. data/app/assets/javascripts/hw_combobox/models/combobox/filtering.js +33 -28
  13. data/app/assets/javascripts/hw_combobox/models/combobox/form_field.js +74 -0
  14. data/app/assets/javascripts/hw_combobox/models/combobox/multiselect.js +160 -0
  15. data/app/assets/javascripts/hw_combobox/models/combobox/navigation.js +15 -6
  16. data/app/assets/javascripts/hw_combobox/models/combobox/options.js +29 -9
  17. data/app/assets/javascripts/hw_combobox/models/combobox/selection.js +103 -51
  18. data/app/assets/javascripts/hw_combobox/models/combobox/toggle.js +45 -16
  19. data/app/assets/javascripts/hw_combobox/models/combobox/validity.js +1 -1
  20. data/app/assets/javascripts/hw_combobox/models/combobox.js +3 -0
  21. data/app/assets/stylesheets/hotwire_combobox.css +84 -18
  22. data/app/presenters/hotwire_combobox/component/customizable.rb +9 -1
  23. data/app/presenters/hotwire_combobox/component.rb +95 -28
  24. data/app/presenters/hotwire_combobox/listbox/group.rb +45 -0
  25. data/app/presenters/hotwire_combobox/listbox/item.rb +104 -0
  26. data/app/presenters/hotwire_combobox/listbox/option.rb +9 -4
  27. data/app/views/hotwire_combobox/_component.html.erb +1 -0
  28. data/app/views/hotwire_combobox/_selection_chip.turbo_stream.erb +8 -0
  29. data/app/views/hotwire_combobox/layouts/_selection_chip.turbo_stream.erb +7 -0
  30. data/lib/hotwire_combobox/helper.rb +111 -86
  31. data/lib/hotwire_combobox/version.rb +1 -1
  32. metadata +9 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1fc3750ecb7bd58bd28e13d0cc2d543ae4c614535c927c9483e504b643171a8d
4
- data.tar.gz: dc6482de8a4344a6d801797d497f6adec8afcc0357e821e1dff8188ecf4c2f68
3
+ metadata.gz: ddf9dd6a046c3871c1b3935a8a2e9e899a88787ba6d39e673ec8eee792c920dc
4
+ data.tar.gz: f6d207f71a8ce4779df0cc12cd4264106b1fb086319bc8ad4c303a22604f2f1c
5
5
  SHA512:
6
- metadata.gz: 8884e9e8295b73d37d15762f08c1a69452a7117f99af09dba4369aedea9af2116bc9683127f6f29535813fa5182b21969eb35e4d077edee1f94ce1a6808aadfe
7
- data.tar.gz: b58dd5870a0508912c910b387f7970ffc4a08a16e40612b448e7c35ae244d0f8e02f9dd9356e5cdd8ae7f0c45c1bd65513ece94fcbeba38818c39d39c9ecd870
6
+ metadata.gz: 5cb541bd15115ee71ed82dea3d2c922abcd9c8279f835b7d6074fd825cbd08e6ac40d1b181b398ee6d00a1e4c7d7fc3f18892134cc362aa98640519ee27b9030
7
+ data.tar.gz: a6adeb3593a0f25d9a726be101c52c00488d367592d134c089d520cc6a087eff67f00b5f965fcc8b1c09e6c1f6f96e955815d234cdc19162a1dc657a83271183
data/README.md CHANGED
@@ -122,6 +122,7 @@ These are the exceptions:
122
122
  2. The escape key closes the listbox and blurs the combobox. It does not clear the combobox.
123
123
  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.
124
124
  4. It is possible to have an unlabled combobox, as that responsibility is delegated to the implementing user.
125
+ 5. There are currently [no APG guidelines](https://github.com/w3c/aria-practices/issues/1512) for a multiselect combobox. We've introduced some mechanisms to make the experience accessible, like announcing multi-selections via a live region. But we'd welcome feedback on how to make it better until official guidelines are available.
125
126
 
126
127
  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.
127
128
 
@@ -7,11 +7,14 @@ window.HOTWIRE_COMBOBOX_STREAM_DELAY = 0 // ms, for testing purposes
7
7
  const concerns = [
8
8
  Controller,
9
9
  Combobox.Actors,
10
+ Combobox.Announcements,
10
11
  Combobox.AsyncLoading,
11
12
  Combobox.Autocomplete,
12
13
  Combobox.Dialog,
13
14
  Combobox.Events,
14
15
  Combobox.Filtering,
16
+ Combobox.FormField,
17
+ Combobox.Multiselect,
15
18
  Combobox.Navigation,
16
19
  Combobox.NewOptions,
17
20
  Combobox.Options,
@@ -27,7 +30,10 @@ export default class HwComboboxController extends Concerns(...concerns) {
27
30
  ]
28
31
 
29
32
  static targets = [
33
+ "announcer",
30
34
  "combobox",
35
+ "chipDismisser",
36
+ "closer",
31
37
  "dialog",
32
38
  "dialogCombobox",
33
39
  "dialogFocusTrap",
@@ -48,12 +54,14 @@ export default class HwComboboxController extends Concerns(...concerns) {
48
54
  nameWhenNew: String,
49
55
  originalName: String,
50
56
  prefilledDisplay: String,
57
+ selectionChipSrc: String,
51
58
  smallViewportMaxWidth: String
52
59
  }
53
60
 
54
61
  initialize() {
55
62
  this._initializeActors()
56
63
  this._initializeFiltering()
64
+ this._initializeMultiselect()
57
65
  }
58
66
 
59
67
  connect() {
@@ -78,11 +86,25 @@ export default class HwComboboxController extends Concerns(...concerns) {
78
86
  const inputType = element.dataset.inputType
79
87
  const delay = window.HOTWIRE_COMBOBOX_STREAM_DELAY
80
88
 
81
- if (inputType && inputType !== "hw:lockInSelection") {
89
+ this._resetMultiselectionMarks()
90
+
91
+ if (inputType === "hw:multiselectSync") {
92
+ this.openByFocusing()
93
+ } else if (inputType && inputType !== "hw:lockInSelection") {
82
94
  if (delay) await sleep(delay)
83
- this._commitFilter({ inputType })
95
+ this._selectOnQuery(inputType)
84
96
  } else {
85
- this._preselectOption()
97
+ this._preselectSingle()
86
98
  }
87
99
  }
100
+
101
+ closerTargetConnected() {
102
+ this._closeAndBlur("hw:asyncCloser")
103
+ }
104
+
105
+ // Use +_printStack+ for debugging purposes
106
+ _printStack() {
107
+ const err = new Error()
108
+ console.log(err.stack || err.stacktrace)
109
+ }
88
110
  }