hotwire_combobox 0.1.42 → 0.2.0

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

@@ -1,104 +1,156 @@
 import Combobox from "hw_combobox/models/combobox/base"
-import { wrapAroundAccess } from "hw_combobox/helpers"
+import { wrapAroundAccess, isDeleteEvent } from "hw_combobox/helpers"
 
 Combobox.Selection = Base => class extends Base {
-  selectOptionOnClick(event) {
-    this.filter(event)
-    this._select(event.currentTarget, { forceAutocomplete: true })
-    this.close()
+  selectOnClick({ currentTarget, inputType }) {
+    this._forceSelectionAndFilter(currentTarget, inputType)
+    this._closeAndBlur("hw:optionRoleClick")
   }
 
   _connectSelection() {
     if (this.hasPrefilledDisplayValue) {
       this._fullQuery = this.prefilledDisplayValue
+      this._markQueried()
     }
   }
 
-  _select(option, { forceAutocomplete = false } = {}) {
-    this._resetOptions()
-
-    if (option) {
-      this._autocompleteWith(option, { force: forceAutocomplete })
-      this._commitSelection(option, { selected: true })
-      this._markValid()
-    } else {
+  _selectOnQuery(inputType) {
+    if (this._shouldTreatAsNewOptionForFiltering(!isDeleteEvent({ inputType: inputType }))) {
+      this._selectNew()
+    } else if (isDeleteEvent({ inputType: inputType })) {
+      this._deselect()
+    } else if (inputType === "hw:lockInSelection" && this._ensurableOption) {
+      this._selectAndAutocompleteMissingPortion(this._ensurableOption)
+    } else if (this._isOpen && this._visibleOptionElements[0]) {
+      this._selectAndAutocompleteMissingPortion(this._visibleOptionElements[0])
+    } else if (this._isOpen) {
+      this._resetOptionsAndNotify()
       this._markInvalid()
+    } else {
+      // When selecting from an async dialog listbox: selection is forced, the listbox is filtered,
+      // and the dialog is closed. Filtering ends with an `endOfOptionsStream` target connected
+      // to the now invisible combobox, which is now closed because Turbo waits for "nextRepaint"
+      // before rendering turbo streams. This ultimately calls +_selectOnQuery+. We do want
+      // to call +_selectOnQuery+ in this case to account for e.g. selection of
+      // new options. But we will noop here if it's none of the cases checked above.
     }
   }
 
-  _commitSelection(option, { selected }) {
-    this._markSelected(option, { selected })
+  _select(option, autocompleteStrategy) {
+    const previousValue = this._fieldValueString
 
-    if (selected) {
-      this.hiddenFieldTarget.value = option.dataset.value
-      option.scrollIntoView({ block: "nearest" })
-    }
+    this._resetOptionsSilently()
 
-    this._dispatchSelectionEvent({ isNew: false })
+    autocompleteStrategy(option)
+
+    this._fieldValue = option.dataset.value
+    this._markSelected(option)
+    this._markValid()
+    this._dispatchPreselectionEvent({ isNewAndAllowed: false, previousValue: previousValue })
+
+    option.scrollIntoView({ block: "nearest" })
   }
 
-  _markSelected(option, { selected }) {
-    if (this.hasSelectedClass) {
-      option.classList.toggle(this.selectedClass, selected)
-    }
+  _selectNew() {
+    const previousValue = this._fieldValueString
 
-    option.setAttribute("aria-selected", selected)
-    this._setActiveDescendant(selected ? option.id : "")
+    this._resetOptionsSilently()
+    this._fieldValue = this._fullQuery
+    this._fieldName = this.nameWhenNewValue
+    this._markValid()
+    this._dispatchPreselectionEvent({ isNewAndAllowed: true, previousValue: previousValue })
   }
 
   _deselect() {
-    const option = this._selectedOptionElement
+    const previousValue = this._fieldValueString
 
-    if (option) this._commitSelection(option, { selected: false })
+    if (this._selectedOptionElement) {
+      this._markNotSelected(this._selectedOptionElement)
+    }
 
-    this.hiddenFieldTarget.value = null
+    this._fieldValue = ""
     this._setActiveDescendant("")
 
-    if (!option) this._dispatchSelectionEvent({ isNew: false })
+    return previousValue
   }
 
-  _selectNew() {
-    this._resetOptions()
-    this.hiddenFieldTarget.value = this._fullQuery
-    this.hiddenFieldTarget.name = this.nameWhenNewValue
-    this._markValid()
-
-    this._dispatchSelectionEvent({ isNew: true })
+  _deselectAndNotify() {
+    const previousValue = this._deselect()
+    this._dispatchPreselectionEvent({ isNewAndAllowed: false, previousValue: previousValue })
   }
 
   _selectIndex(index) {
     const option = wrapAroundAccess(this._visibleOptionElements, index)
-    this._select(option, { forceAutocomplete: true })
+    this._forceSelectionWithoutFiltering(option)
   }
 
-  _preselectOption() {
-    if (this._hasValueButNoSelection && this._allOptions.length < 100) {
-      const option = this._allOptions.find(option => {
-        return option.dataset.value === this.hiddenFieldTarget.value
-      })
+  _preselectSingle() {
+    if (this._isSingleSelect && this._hasValueButNoSelection && this._allOptions.length < 100) {
+      const option = this._optionElementWithValue(this._fieldValue)
+      if (option) this._markSelected(option)
+    }
+  }
 
-      if (option) this._markSelected(option, { selected: true })
+  _preselectMultiple() {
+    if (this._isMultiselect && this._hasValueButNoSelection) {
+      this._requestChips(this._fieldValueString)
+      this._resetMultiselectionMarks()
     }
   }
 
+  _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)
+  }
+
   _lockInSelection() {
     if (this._shouldLockInSelection) {
-      this._select(this._ensurableOption, { forceAutocomplete: true })
-      this.filter({ inputType: "hw:lockInSelection" })
+      this._forceSelectionAndFilter(this._ensurableOption, "hw:lockInSelection")
     }
+  }
 
-    if (this._isUnjustifiablyBlank) {
-      this._deselect()
-      this._clearQuery()
-    }
+  _markSelected(option) {
+    if (this.hasSelectedClass) option.classList.add(this.selectedClass)
+    option.setAttribute("aria-selected", true)
+    this._setActiveDescendant(option.id)
+  }
+
+  _markNotSelected(option) {
+    if (this.hasSelectedClass) option.classList.remove(this.selectedClass)
+    option.removeAttribute("aria-selected")
+    this._removeActiveDescendant()
   }
 
   _setActiveDescendant(id) {
     this._forAllComboboxes(el => el.setAttribute("aria-activedescendant", id))
   }
 
+  _removeActiveDescendant() {
+    this._setActiveDescendant("")
+  }
+
   get _hasValueButNoSelection() {
-    return this.hiddenFieldTarget.value && !this._selectedOptionElement
+    return this._hasFieldValue && !this._hasSelection
+  }
+
+  get _hasSelection() {
+    if (this._isSingleSelect) {
+      this._selectedOptionElement
+    } else {
+      this._multiselectedOptionElements.length > 0
+    }
   }
 
   get _shouldLockInSelection() {

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

@@ -6,19 +6,40 @@ Combobox.Toggle = Base => class extends Base {
     this.expandedValue = true
   }
 
-  close() {
+  openByFocusing() {
+    this._actingCombobox.focus()
+  }
+
+  close(inputType) {
     if (this._isOpen) {
+      const shouldReopen = this._isMultiselect &&
+        this._isSync &&
+        !this._isSmallViewport &&
+        inputType != "hw:clickOutside" &&
+        inputType != "hw:focusOutside"
+
       this._lockInSelection()
+      this._clearInvalidQuery()
+
       this.expandedValue = false
-      this._dispatchClosedEvent()
+
+      this._dispatchSelectionEvent()
+
+      if (inputType != "hw:keyHandler:escape") {
+        this._createChip(shouldReopen)
+      }
+
+      if (this._isSingleSelect && this._selectedOptionElement) {
+        this._announceToScreenReader(this._displayForOptionElement(this._selectedOptionElement), "selected")
+      }
     }
   }
 
   toggle() {
     if (this.expandedValue) {
-      this.close()
+      this._closeAndBlur("hw:toggle")
     } else {
-      this._openByFocusing()
+      this.openByFocusing()
     }
   }
 
@@ -29,14 +50,14 @@ Combobox.Toggle = Base => class extends Base {
     if (this.mainWrapperTarget.contains(target) && !this._isDialogDismisser(target)) return
     if (this._withinElementBounds(event)) return
 
-    this.close()
+    this._closeAndBlur("hw:clickOutside")
   }
 
   closeOnFocusOutside({ target }) {
     if (!this._isOpen) return
     if (this.element.contains(target)) return
 
-    this.close()
+    this._closeAndBlur("hw:focusOutside")
   }
 
   clearOrToggleOnHandleClick() {
@@ -48,6 +69,11 @@ Combobox.Toggle = Base => class extends Base {
     }
   }
 
+  _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`
@@ -59,18 +85,16 @@ Combobox.Toggle = Base => class extends Base {
     return clientX >= left && clientX <= right && clientY >= top && clientY <= bottom
   }
 
-  _openByFocusing() {
-    this._actingCombobox.focus()
-  }
-
   _isDialogDismisser(target) {
     return target.closest("dialog") && target.role != "combobox"
   }
 
   _expand() {
-    if (this._preselectOnExpansion) this._preselectOption()
+    if (this._isSync) {
+      this._preselectSingle()
+    }
 
-    if (this._autocompletesList && this._smallViewport) {
+    if (this._autocompletesList && this._isSmallViewport) {
       this._openInDialog()
     } else {
       this._openInline()
@@ -79,6 +103,8 @@ Combobox.Toggle = Base => class extends Base {
     this._actingCombobox.setAttribute("aria-expanded", true) // needs to happen after setting acting combobox
   }
 
+  // +._collapse()+ differs from `.close()` in that it might be called by stimulus on connect because
+  // it interprets a change in `expandedValue` — whereas `.close()` is only called internally by us.
   _collapse() {
     this._actingCombobox.setAttribute("aria-expanded", false) // needs to happen before resetting acting combobox
 
@@ -119,11 +145,14 @@ Combobox.Toggle = Base => class extends Base {
     enableBodyScroll(this.dialogListboxTarget)
   }
 
-  get _isOpen() {
-    return this.expandedValue
+  _clearInvalidQuery() {
+    if (this._isUnjustifiablyBlank) {
+      this._deselect()
+      this._clearQuery()
+    }
   }
 
-  get _preselectOnExpansion() {
-    return !this._isAsync // async comboboxes preselect based on callbacks
+  get _isOpen() {
+    return this.expandedValue
   }
 }

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

@@ -34,7 +34,7 @@ Combobox.Validity = Base => class extends Base {
   // +_valueIsInvalid+ only checks if `comboboxTarget` (and not `_actingCombobox`) is required
   // because the `required` attribute is only forwarded to the `comboboxTarget` element
   get _valueIsInvalid() {
-    const isRequiredAndEmpty = this.comboboxTarget.required && !this.hiddenFieldTarget.value
+    const isRequiredAndEmpty = this.comboboxTarget.required && this._hasEmptyFieldValue
     return isRequiredAndEmpty
   }
 }

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

@@ -1,11 +1,14 @@
 import Combobox from "hw_combobox/models/combobox/base"
 
 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/dialog"
 import "hw_combobox/models/combobox/events"
 import "hw_combobox/models/combobox/filtering"
+import "hw_combobox/models/combobox/form_field"
+import "hw_combobox/models/combobox/multiselect"
 import "hw_combobox/models/combobox/navigation"
 import "hw_combobox/models/combobox/new_options"
 import "hw_combobox/models/combobox/options"

data/app/assets/stylesheets/hotwire_combobox.css

@@ -1,6 +1,7 @@
 :root {
   --hw-active-bg-color: #F3F4F6;
   --hw-border-color: #D1D5DB;
+  --hw-group-color: #57595C;
   --hw-invalid-color: #EF4444;
   --hw-dialog-label-color: #1D1D1D;
   --hw-focus-color: #2563EB;
@@ -10,6 +11,9 @@
   --hw-border-width--slim: 1px;
   --hw-border-width--thick: 2px;
 
+  --hw-combobox-width: 10rem;
+  --hw-combobox-width--multiple: 30rem;
+
   --hw-dialog-font-size: 1.25rem;
   --hw-dialog-input-height: 2.5rem;
   --hw-dialog-label-alignment: center;
@@ -24,20 +28,21 @@
   --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-handle-width: 1.5rem;
+  --hw-handle-width--queried: 1rem;
 
   --hw-line-height: 1.5rem;
+  --hw-line-height--multiple: 2.125rem;
 
   --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-padding--slimmer: 0.25rem;
   --hw-padding--slim: 0.375rem;
   --hw-padding--thick: 0.75rem;
 
+  --hw-selection-chip-font-size: 0.875rem;
+
   --hw-visual-viewport-height: 100vh;
 }
 
@@ -57,30 +62,35 @@
 }
 
 .hw-combobox__main__wrapper {
+  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);
   position: relative;
-  width: min-content;
+  width: var(--hw-combobox-width);
+
+  &:focus-within {
+    box-shadow: 0 0 0 var(--hw-border-width--thick) var(--hw-focus-color);
+  }
+
+  &:has(.hw-combobox__input--invalid) {
+    box-shadow: 0 0 0 var(--hw-border-width--thick) var(--hw-invalid-color);
+  }
 }
 
 .hw-combobox__input {
-  border: var(--hw-border-width--slim) solid var(--hw-border-color);
-  border-radius: var(--hw-border-radius);
+  border: 0;
   font-size: inherit;
   line-height: var(--hw-line-height);
-  padding: var(--hw-padding--slim) var(--hw-handle-width) var(--hw-padding--slim) var(--hw-padding--thick);
-  position: relative;
-  width: var(--hw-combobox-width);
+  min-width: 0;
+  padding: 0;
   text-overflow: ellipsis;
+  width: 100%;
 }
 
 .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;
@@ -105,7 +115,6 @@
 .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 {
@@ -121,7 +130,7 @@
   overflow: auto;
   padding: 0;
   position: absolute;
-  top: var(--hw-listbox-offset-top);
+  top: calc(100% + 0.2rem);
   width: 100%;
   z-index: var(--hw-listbox-z-index);
 
@@ -130,6 +139,20 @@
   }
 }
 
+.hw-combobox__group {
+  display: none;
+  padding: 0;
+}
+
+.hw-combobox__group__label {
+  color: var(--hw-group-color);
+  padding: var(--hw-padding--slim);
+}
+
+.hw-combobox__group:has(.hw-combobox__option:not([hidden])) {
+  display: block;
+}
+
 .hw-combobox__option {
   background-color: var(--hw-option-bg-color);
   padding: var(--hw-padding--slim) var(--hw-padding--thick);
@@ -144,6 +167,7 @@
 }
 
 .hw-combobox__option:hover,
+.hw-combobox__option--navigated,
 .hw-combobox__option--selected {
   background-color: var(--hw-active-bg-color);
 }
@@ -217,3 +241,45 @@
     padding: var(--hw-padding--thick);
   }
 }
+
+.hw-combobox__chip {
+  align-items: center;
+  border: var(--hw-border-width--slim) solid var(--hw-border-color);
+  border-radius: var(--hw-border-radius);
+  display: flex;
+  font-size: var(--hw-selection-chip-font-size);
+  line-height: var(--hw-line-height);
+  padding: var(--hw-padding--slimmer);
+  padding-left: var(--hw-padding--slim);
+}
+
+.hw-combobox__chip__remover {
+  background-image: var(--hw-handle-image--queried);
+  background-size: var(--hw-handle-width--queried);
+  background-repeat: no-repeat;
+  margin-left: var(--hw-padding--slimmer);
+  min-height: var(--hw-handle-width--queried);
+  min-width: var(--hw-handle-width--queried);
+}
+
+.hw-combobox--multiple {
+  .hw-combobox__main__wrapper {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--hw-padding--slimmer);
+    width: var(--hw-combobox-width--multiple);
+
+    &:has([data-hw-combobox-chip]) .hw-combobox__input::placeholder {
+      color: transparent;
+    }
+  }
+
+  .hw-combobox__input {
+    min-width: calc(var(--hw-combobox-width) / 2);
+    flex-grow: 1;
+    line-height: var(--hw-line-height--multiple);
+    max-width: 100%;
+    width: 1rem;
+  }
+}

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

@@ -44,7 +44,15 @@ module HotwireCombobox::Component::Customizable
 
     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 }
+
+      coalesce = ->(key, value) do
+        if value.is_a?(String) || value.is_a?(Array)
+          view.token_list(value, custom.delete(key))
+        else
+          value
+        end
+      end
+
       default = base.map { |k, v| [ k, coalesce.(k, v) ] }.to_h
 
       custom.deep_merge default