hotwire_combobox 0.1.37 → 0.1.39

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

@@ -0,0 +1,1335 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@hotwired/stimulus')) :
+  typeof define === 'function' && define.amd ? define(['@hotwired/stimulus'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.HotwireCombobox = factory(global.Stimulus));
+})(this, (function (stimulus) { 'use strict';
+
+  const Combobox = {};
+
+  Combobox.Actors = Base => class extends Base {
+    _initializeActors() {
+      this._actingListbox = this.listboxTarget;
+      this._actingCombobox = this.comboboxTarget;
+    }
+
+    _forAllComboboxes(callback) {
+      this._allComboboxes.forEach(callback);
+    }
+
+    get _actingListbox() {
+      return this.actingListbox
+    }
+
+    set _actingListbox(listbox) {
+      this.actingListbox = listbox;
+    }
+
+    get _actingCombobox() {
+      return this.actingCombobox
+    }
+
+    set _actingCombobox(combobox) {
+      this.actingCombobox = combobox;
+    }
+
+    get _allComboboxes() {
+      return [ this.comboboxTarget, this.dialogComboboxTarget ]
+    }
+  };
+
+  Combobox.AsyncLoading = Base => class extends Base {
+    get _isAsync() {
+      return this.hasAsyncSrcValue
+    }
+  };
+
+  function Concerns(Base, ...mixins) {
+    return mixins.reduce((accumulator, current) => current(accumulator), Base)
+  }
+
+  function visible(target) {
+    return !(target.hidden || target.closest("[hidden]"))
+  }
+
+  function wrapAroundAccess(array, index) {
+    const first = 0;
+    const last = array.length - 1;
+
+    if (index < first) return array[last]
+    if (index > last) return array[first]
+    return array[index]
+  }
+
+  function applyFilter(query, { matching }) {
+    return (target) => {
+      if (query) {
+        const value = target.getAttribute(matching) || "";
+        const match = value.toLowerCase().includes(query.toLowerCase());
+
+        target.hidden = !match;
+      } else {
+        target.hidden = false;
+      }
+    }
+  }
+
+  function cancel(event) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+  function startsWith(string, substring) {
+    return string.toLowerCase().startsWith(substring.toLowerCase())
+  }
+
+  function debounce(fn, delay = 150) {
+    let timeoutId = null;
+
+    return (...args) => {
+      const callback = () => fn.apply(this, args);
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(callback, delay);
+    }
+  }
+
+  function isDeleteEvent(event) {
+    return event.inputType === "deleteContentBackward" || event.inputType === "deleteWordBackward"
+  }
+
+  function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms))
+  }
+
+  function unselectedPortion(element) {
+    if (element.selectionStart === element.selectionEnd) {
+      return element.value
+    } else {
+      return element.value.substring(0, element.selectionStart)
+    }
+  }
+
+  function dispatch(eventName, { target, cancelable, detail } = {}) {
+    const event = new CustomEvent(eventName, {
+      cancelable,
+      bubbles: true,
+      composed: true,
+      detail
+    });
+
+    if (target && target.isConnected) {
+      target.dispatchEvent(event);
+    } else {
+      document.documentElement.dispatchEvent(event);
+    }
+
+    return event
+  }
+
+  Combobox.Autocomplete = Base => class extends Base {
+    _connectListAutocomplete() {
+      if (!this._autocompletesList) {
+        this._visuallyHideListbox();
+      }
+    }
+
+    _autocompleteWith(option, { force }) {
+      if (!this._autocompletesInline && !force) return
+
+      const typedValue = this._typedQuery;
+      const autocompletedValue = option.getAttribute(this.autocompletableAttributeValue);
+
+      if (force) {
+        this._fullQuery = autocompletedValue;
+        this._actingCombobox.setSelectionRange(autocompletedValue.length, autocompletedValue.length);
+      } else if (startsWith(autocompletedValue, typedValue)) {
+        this._fullQuery = autocompletedValue;
+        this._actingCombobox.setSelectionRange(typedValue.length, autocompletedValue.length);
+      }
+    }
+
+    // +visuallyHideListbox+ hides the listbox from the user,
+    // but makes it still searchable by JS.
+    _visuallyHideListbox() {
+      this.listboxTarget.style.display = "none";
+    }
+
+    get _isExactAutocompleteMatch() {
+      return this._immediatelyAutocompletableValue === this._fullQuery
+    }
+
+    // All `_isExactAutocompleteMatch` matches are `_isPartialAutocompleteMatch` matches
+    // but not all `_isPartialAutocompleteMatch` matches are `_isExactAutocompleteMatch` matches.
+    get _isPartialAutocompleteMatch() {
+      return !!this._immediatelyAutocompletableValue &&
+        startsWith(this._immediatelyAutocompletableValue, this._fullQuery)
+    }
+
+    get _autocompletesList() {
+      return this.autocompleteValue === "both" || this.autocompleteValue === "list"
+    }
+
+    get _autocompletesInline() {
+      return this.autocompleteValue === "both" || this.autocompleteValue === "inline"
+    }
+
+    get _immediatelyAutocompletableValue() {
+      return this._ensurableOption?.getAttribute(this.autocompletableAttributeValue)
+    }
+  };
+
+  Combobox.Dialog = Base => class extends Base {
+    rerouteListboxStreamToDialog({ detail: { newStream } }) {
+      if (newStream.target == this.listboxTarget.id && this._dialogIsOpen) {
+        newStream.setAttribute("target", this.dialogListboxTarget.id);
+      }
+    }
+
+    _connectDialog() {
+      if (window.visualViewport) {
+        window.visualViewport.addEventListener("resize", this._resizeDialog);
+      }
+    }
+
+    _disconnectDialog() {
+      if (window.visualViewport) {
+        window.visualViewport.removeEventListener("resize", this._resizeDialog);
+      }
+    }
+
+    _moveArtifactsToDialog() {
+      this.dialogComboboxTarget.value = this._fullQuery;
+
+      this._actingCombobox = this.dialogComboboxTarget;
+      this._actingListbox = this.dialogListboxTarget;
+
+      this.dialogListboxTarget.append(...this.listboxTarget.children);
+    }
+
+    _moveArtifactsInline() {
+      this.comboboxTarget.value = this._fullQuery;
+
+      this._actingCombobox = this.comboboxTarget;
+      this._actingListbox = this.listboxTarget;
+
+      this.listboxTarget.append(...this.dialogListboxTarget.children);
+    }
+
+    _resizeDialog = () => {
+      if (window.visualViewport) {
+        this.dialogTarget.style.setProperty(
+          "--hw-visual-viewport-height",
+          `${window.visualViewport.height}px`
+        );
+      }
+    }
+
+    // After closing a dialog, focus returns to the last focused element.
+    // +preventFocusingComboboxAfterClosingDialog+ focuses a placeholder element before opening
+    // the dialog, so that the combobox is not focused again after closing, which would reopen.
+    _preventFocusingComboboxAfterClosingDialog() {
+      this.dialogFocusTrapTarget.focus();
+    }
+
+    get _smallViewport() {
+      return window.matchMedia(`(max-width: ${this.smallViewportMaxWidthValue})`).matches
+    }
+
+    get _dialogIsOpen() {
+      return this.dialogTarget.open
+    }
+  };
+
+  Combobox.Events = Base => class extends Base {
+    _dispatchSelectionEvent({ isNew }) {
+      const detail = {
+        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 });
+    }
+  };
+
+  class FetchResponse {
+    constructor(response) {
+      this.response = response;
+    }
+    get statusCode() {
+      return this.response.status;
+    }
+    get redirected() {
+      return this.response.redirected;
+    }
+    get ok() {
+      return this.response.ok;
+    }
+    get unauthenticated() {
+      return this.statusCode === 401;
+    }
+    get unprocessableEntity() {
+      return this.statusCode === 422;
+    }
+    get authenticationURL() {
+      return this.response.headers.get("WWW-Authenticate");
+    }
+    get contentType() {
+      const contentType = this.response.headers.get("Content-Type") || "";
+      return contentType.replace(/;.*$/, "");
+    }
+    get headers() {
+      return this.response.headers;
+    }
+    get html() {
+      if (this.contentType.match(/^(application|text)\/(html|xhtml\+xml)$/)) {
+        return this.text;
+      }
+      return Promise.reject(new Error(`Expected an HTML response but got "${this.contentType}" instead`));
+    }
+    get json() {
+      if (this.contentType.match(/^application\/.*json$/)) {
+        return this.responseJson || (this.responseJson = this.response.json());
+      }
+      return Promise.reject(new Error(`Expected a JSON response but got "${this.contentType}" instead`));
+    }
+    get text() {
+      return this.responseText || (this.responseText = this.response.text());
+    }
+    get isTurboStream() {
+      return this.contentType.match(/^text\/vnd\.turbo-stream\.html/);
+    }
+    async renderTurboStream() {
+      if (this.isTurboStream) {
+        if (window.Turbo) {
+          await window.Turbo.renderStreamMessage(await this.text);
+        } else {
+          console.warn("You must set `window.Turbo = Turbo` to automatically process Turbo Stream events with request.js");
+        }
+      } else {
+        return Promise.reject(new Error(`Expected a Turbo Stream response but got "${this.contentType}" instead`));
+      }
+    }
+  }
+
+  class RequestInterceptor {
+    static register(interceptor) {
+      this.interceptor = interceptor;
+    }
+    static get() {
+      return this.interceptor;
+    }
+    static reset() {
+      this.interceptor = undefined;
+    }
+  }
+
+  function getCookie(name) {
+    const cookies = document.cookie ? document.cookie.split("; ") : [];
+    const prefix = `${encodeURIComponent(name)}=`;
+    const cookie = cookies.find((cookie => cookie.startsWith(prefix)));
+    if (cookie) {
+      const value = cookie.split("=").slice(1).join("=");
+      if (value) {
+        return decodeURIComponent(value);
+      }
+    }
+  }
+
+  function compact(object) {
+    const result = {};
+    for (const key in object) {
+      const value = object[key];
+      if (value !== undefined) {
+        result[key] = value;
+      }
+    }
+    return result;
+  }
+
+  function metaContent(name) {
+    const element = document.head.querySelector(`meta[name="${name}"]`);
+    return element && element.content;
+  }
+
+  function stringEntriesFromFormData(formData) {
+    return [ ...formData ].reduce(((entries, [name, value]) => entries.concat(typeof value === "string" ? [ [ name, value ] ] : [])), []);
+  }
+
+  function mergeEntries(searchParams, entries) {
+    for (const [name, value] of entries) {
+      if (value instanceof window.File) continue;
+      if (searchParams.has(name) && !name.includes("[]")) {
+        searchParams.delete(name);
+        searchParams.set(name, value);
+      } else {
+        searchParams.append(name, value);
+      }
+    }
+  }
+
+  class FetchRequest {
+    constructor(method, url, options = {}) {
+      this.method = method;
+      this.options = options;
+      this.originalUrl = url.toString();
+    }
+    async perform() {
+      try {
+        const requestInterceptor = RequestInterceptor.get();
+        if (requestInterceptor) {
+          await requestInterceptor(this);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+      const response = new FetchResponse(await window.fetch(this.url, this.fetchOptions));
+      if (response.unauthenticated && response.authenticationURL) {
+        return Promise.reject(window.location.href = response.authenticationURL);
+      }
+      const responseStatusIsTurboStreamable = response.ok || response.unprocessableEntity;
+      if (responseStatusIsTurboStreamable && response.isTurboStream) {
+        await response.renderTurboStream();
+      }
+      return response;
+    }
+    addHeader(key, value) {
+      const headers = this.additionalHeaders;
+      headers[key] = value;
+      this.options.headers = headers;
+    }
+    sameHostname() {
+      if (!this.originalUrl.startsWith("http:")) {
+        return true;
+      }
+      try {
+        return new URL(this.originalUrl).hostname === window.location.hostname;
+      } catch (_) {
+        return true;
+      }
+    }
+    get fetchOptions() {
+      return {
+        method: this.method.toUpperCase(),
+        headers: this.headers,
+        body: this.formattedBody,
+        signal: this.signal,
+        credentials: this.credentials,
+        redirect: this.redirect
+      };
+    }
+    get headers() {
+      const baseHeaders = {
+        "X-Requested-With": "XMLHttpRequest",
+        "Content-Type": this.contentType,
+        Accept: this.accept
+      };
+      if (this.sameHostname()) {
+        baseHeaders["X-CSRF-Token"] = this.csrfToken;
+      }
+      return compact(Object.assign(baseHeaders, this.additionalHeaders));
+    }
+    get csrfToken() {
+      return getCookie(metaContent("csrf-param")) || metaContent("csrf-token");
+    }
+    get contentType() {
+      if (this.options.contentType) {
+        return this.options.contentType;
+      } else if (this.body == null || this.body instanceof window.FormData) {
+        return undefined;
+      } else if (this.body instanceof window.File) {
+        return this.body.type;
+      }
+      return "application/json";
+    }
+    get accept() {
+      switch (this.responseKind) {
+       case "html":
+        return "text/html, application/xhtml+xml";
+
+       case "turbo-stream":
+        return "text/vnd.turbo-stream.html, text/html, application/xhtml+xml";
+
+       case "json":
+        return "application/json, application/vnd.api+json";
+
+       default:
+        return "*/*";
+      }
+    }
+    get body() {
+      return this.options.body;
+    }
+    get query() {
+      const originalQuery = (this.originalUrl.split("?")[1] || "").split("#")[0];
+      const params = new URLSearchParams(originalQuery);
+      let requestQuery = this.options.query;
+      if (requestQuery instanceof window.FormData) {
+        requestQuery = stringEntriesFromFormData(requestQuery);
+      } else if (requestQuery instanceof window.URLSearchParams) {
+        requestQuery = requestQuery.entries();
+      } else {
+        requestQuery = Object.entries(requestQuery || {});
+      }
+      mergeEntries(params, requestQuery);
+      const query = params.toString();
+      return query.length > 0 ? `?${query}` : "";
+    }
+    get url() {
+      return this.originalUrl.split("?")[0].split("#")[0] + this.query;
+    }
+    get responseKind() {
+      return this.options.responseKind || "html";
+    }
+    get signal() {
+      return this.options.signal;
+    }
+    get redirect() {
+      return this.options.redirect || "follow";
+    }
+    get credentials() {
+      return this.options.credentials || "same-origin";
+    }
+    get additionalHeaders() {
+      return this.options.headers || {};
+    }
+    get formattedBody() {
+      const bodyIsAString = Object.prototype.toString.call(this.body) === "[object String]";
+      const contentTypeIsJson = this.headers["Content-Type"] === "application/json";
+      if (contentTypeIsJson && !bodyIsAString) {
+        return JSON.stringify(this.body);
+      }
+      return this.body;
+    }
+  }
+
+  async function get(url, options) {
+    const request = new FetchRequest("get", url, options);
+    return request.perform();
+  }
+
+  // Copyright (c) 2021 Marcelo Lauxen
+
+  // Permission is hereby granted, free of charge, to any person obtaining
+  // a copy of this software and associated documentation files (the
+  // "Software"), to deal in the Software without restriction, including
+  // without limitation the rights to use, copy, modify, merge, publish,
+  // distribute, sublicense, and/or sell copies of the Software, and to
+  // permit persons to whom the Software is furnished to do so, subject to
+  // the following conditions:
+
+  // The above copyright notice and this permission notice shall be
+  // included in all copies or substantial portions of the Software.
+
+  // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+  // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+  // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+  // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+  // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+  // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+  // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+  Combobox.Filtering = Base => class extends Base {
+    filter(event) {
+      if (this._isAsync) {
+        this._debouncedFilterAsync(event);
+      } else {
+        this._filterSync(event);
+      }
+    }
+
+    _initializeFiltering() {
+      this._debouncedFilterAsync = debounce(this._debouncedFilterAsync.bind(this));
+    }
+
+    _debouncedFilterAsync(event) {
+      this._filterAsync(event);
+    }
+
+    async _filterAsync(event) {
+      const query = {
+        q: this._fullQuery,
+        input_type: event.inputType,
+        for_id: this.element.dataset.asyncId
+      };
+
+      await get(this.asyncSrcValue, { responseKind: "turbo-stream", query });
+    }
+
+    _filterSync(event) {
+      this.open();
+      this._allOptionElements.forEach(applyFilter(this._fullQuery, { matching: this.filterableAttributeValue }));
+      this._commitFilter(event);
+    }
+
+    _commitFilter(event) {
+      if (this._shouldTreatAsNewOptionForFiltering(!isDeleteEvent(event))) {
+        this._selectNew();
+      } else if (isDeleteEvent(event)) {
+        this._deselect();
+      } else if (this._isOpen) {
+        this._select(this._visibleOptionElements[0]);
+      }
+    }
+
+    _clearQuery() {
+      this._fullQuery = "";
+      this.filter({ inputType: "deleteContentBackward" });
+    }
+
+    get _isQueried() {
+      return this._fullQuery.length > 0
+    }
+
+    get _fullQuery() {
+      return this._actingCombobox.value
+    }
+
+    set _fullQuery(value) {
+      this._actingCombobox.value = value;
+    }
+
+    get _typedQuery() {
+      return unselectedPortion(this._actingCombobox)
+    }
+  };
+
+  Combobox.Navigation = Base => class extends Base {
+    navigate(event) {
+      if (this._autocompletesList) {
+        this._keyHandlers[event.key]?.call(this, event);
+      }
+    }
+
+    _keyHandlers = {
+      ArrowUp: (event) => {
+        this._selectIndex(this._selectedOptionIndex - 1);
+        cancel(event);
+      },
+      ArrowDown: (event) => {
+        this._selectIndex(this._selectedOptionIndex + 1);
+        cancel(event);
+      },
+      Home: (event) => {
+        this._selectIndex(0);
+        cancel(event);
+      },
+      End: (event) => {
+        this._selectIndex(this._visibleOptionElements.length - 1);
+        cancel(event);
+      },
+      Enter: (event) => {
+        this.close();
+        this._actingCombobox.blur();
+        cancel(event);
+      },
+      Escape: (event) => {
+        this.close();
+        this._actingCombobox.blur();
+        cancel(event);
+      }
+    }
+  };
+
+  Combobox.NewOptions = Base => class extends Base {
+    _shouldTreatAsNewOptionForFiltering(queryIsBeingRefined) {
+      if (queryIsBeingRefined) {
+        return this._isNewOptionWithNoPotentialMatches
+      } else {
+        return this._isNewOptionWithPotentialMatches
+      }
+    }
+
+    // If the user is going to keep refining the query, we can't be sure whether
+    // the option will end up being new or not unless there are no potential matches.
+    // +_isNewOptionWithNoPotentialMatches+ allows us to make our best guess
+    // while the state of the combobox is still in flux.
+    //
+    // It's okay for the combobox to say it's not new even if it will be eventually,
+    // as only the final state matters for submission purposes. This method exists
+    // as a best effort to keep the state accurate as often as we can.
+    //
+    // Note that the first visible option is automatically selected as you type.
+    // So if there's a partial match, it's not a new option at this point.
+    //
+    // The final state is locked-in upon closing the combobox via `_isNewOptionWithPotentialMatches`.
+    get _isNewOptionWithNoPotentialMatches() {
+      return this._isNewOptionWithPotentialMatches && !this._isPartialAutocompleteMatch
+    }
+
+    // If the query is finalized, we don't care that there are potential matches
+    // because new options can be substrings of existing options.
+    //
+    // We can't use `_isNewOptionWithNoPotentialMatches` because that would
+    // rule out new options that are partial matches.
+    get _isNewOptionWithPotentialMatches() {
+      return this._isQueried && this._allowNew && !this._isExactAutocompleteMatch
+    }
+  };
+
+  Combobox.Options = Base => class extends Base {
+    _resetOptions() {
+      this._deselect();
+      this.hiddenFieldTarget.name = this.originalNameValue;
+    }
+
+    get _allowNew() {
+      return !!this.nameWhenNewValue
+    }
+
+    get _allOptions() {
+      return Array.from(this._allOptionElements)
+    }
+
+    get _allOptionElements() {
+      return this._actingListbox.querySelectorAll(`[${this.filterableAttributeValue}]`)
+    }
+
+    get _visibleOptionElements() {
+      return [ ...this._allOptionElements ].filter(visible)
+    }
+
+    get _selectedOptionElement() {
+      return this._actingListbox.querySelector("[role=option][aria-selected=true]")
+    }
+
+    get _selectedOptionIndex() {
+      return [ ...this._visibleOptionElements ].indexOf(this._selectedOptionElement)
+    }
+
+    get _isUnjustifiablyBlank() {
+      const valueIsMissing = !this.hiddenFieldTarget.value;
+      const noBlankOptionSelected = !this._selectedOptionElement;
+
+      return valueIsMissing && noBlankOptionSelected
+    }
+  };
+
+  Combobox.Selection = Base => class extends Base {
+    selectOption(event) {
+      this._select(event.currentTarget);
+      this.filter(event);
+      this.close();
+    }
+
+    _connectSelection() {
+      if (this.hasPrefilledDisplayValue) {
+        this._fullQuery = this.prefilledDisplayValue;
+      }
+    }
+
+    _select(option, { forceAutocomplete = false } = {}) {
+      this._resetOptions();
+
+      if (option) {
+        this._autocompleteWith(option, { force: forceAutocomplete });
+        this._commitSelection(option, { selected: true });
+        this._markValid();
+      } else {
+        this._markInvalid();
+      }
+    }
+
+    _commitSelection(option, { selected }) {
+      this._markSelected(option, { selected });
+
+      if (selected) {
+        this.hiddenFieldTarget.value = option.dataset.value;
+        option.scrollIntoView({ block: "nearest" });
+      }
+
+      this._dispatchSelectionEvent({ isNew: false });
+    }
+
+    _markSelected(option, { selected }) {
+      if (this.hasSelectedClass) {
+        option.classList.toggle(this.selectedClass, selected);
+      }
+
+      option.setAttribute("aria-selected", selected);
+      this._setActiveDescendant(selected ? option.id : "");
+    }
+
+    _deselect() {
+      const option = this._selectedOptionElement;
+
+      if (option) this._commitSelection(option, { selected: false });
+
+      this.hiddenFieldTarget.value = null;
+      this._setActiveDescendant("");
+
+      if (!option) this._dispatchSelectionEvent({ isNew: false });
+    }
+
+    _selectNew() {
+      this._resetOptions();
+      this.hiddenFieldTarget.value = this._fullQuery;
+      this.hiddenFieldTarget.name = this.nameWhenNewValue;
+      this._markValid();
+
+      this._dispatchSelectionEvent({ isNew: true });
+    }
+
+    _selectIndex(index) {
+      const option = wrapAroundAccess(this._visibleOptionElements, index);
+      this._select(option, { forceAutocomplete: true });
+    }
+
+    _preselectOption() {
+      if (this._hasValueButNoSelection && this._allOptions.length < 100) {
+        const option = this._allOptions.find(option => {
+          return option.dataset.value === this.hiddenFieldTarget.value
+        });
+
+        if (option) this._markSelected(option, { selected: true });
+      }
+    }
+
+    _lockInSelection() {
+      if (this._shouldLockInSelection) {
+        this._select(this._ensurableOption, { forceAutocomplete: true });
+        this.filter({ inputType: "hw:lockInSelection" });
+      }
+
+      if (this._isUnjustifiablyBlank) {
+        this._deselect();
+        this._clearQuery();
+      }
+    }
+
+    _setActiveDescendant(id) {
+      this._forAllComboboxes(el => el.setAttribute("aria-activedescendant", id));
+    }
+
+    get _hasValueButNoSelection() {
+      return this.hiddenFieldTarget.value && !this._selectedOptionElement
+    }
+
+    get _shouldLockInSelection() {
+      return this._isQueried && !!this._ensurableOption && !this._isNewOptionWithPotentialMatches
+    }
+
+    get _ensurableOption() {
+      return this._selectedOptionElement || this._visibleOptionElements[0]
+    }
+  };
+
+  function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+  // Older browsers don't support event options, feature detect it.
+
+  // Adopted and modified solution from Bohdan Didukh (2017)
+  // https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi
+
+  var hasPassiveEvents = false;
+  if (typeof window !== 'undefined') {
+    var passiveTestOptions = {
+      get passive() {
+        hasPassiveEvents = true;
+        return undefined;
+      }
+    };
+    window.addEventListener('testPassive', null, passiveTestOptions);
+    window.removeEventListener('testPassive', null, passiveTestOptions);
+  }
+
+  var isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1);
+
+
+  var locks = [];
+  var documentListenerAdded = false;
+  var initialClientY = -1;
+  var previousBodyOverflowSetting = void 0;
+  var previousBodyPosition = void 0;
+  var previousBodyPaddingRight = void 0;
+
+  // returns true if `el` should be allowed to receive touchmove events.
+  var allowTouchMove = function allowTouchMove(el) {
+    return locks.some(function (lock) {
+      if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
+        return true;
+      }
+
+      return false;
+    });
+  };
+
+  var preventDefault = function preventDefault(rawEvent) {
+    var e = rawEvent || window.event;
+
+    // For the case whereby consumers adds a touchmove event listener to document.
+    // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })
+    // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then
+    // the touchmove event on document will break.
+    if (allowTouchMove(e.target)) {
+      return true;
+    }
+
+    // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).
+    if (e.touches.length > 1) return true;
+
+    if (e.preventDefault) e.preventDefault();
+
+    return false;
+  };
+
+  var setOverflowHidden = function setOverflowHidden(options) {
+    // If previousBodyPaddingRight is already set, don't set it again.
+    if (previousBodyPaddingRight === undefined) {
+      var _reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;
+      var scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
+
+      if (_reserveScrollBarGap && scrollBarGap > 0) {
+        var computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);
+        previousBodyPaddingRight = document.body.style.paddingRight;
+        document.body.style.paddingRight = computedBodyPaddingRight + scrollBarGap + 'px';
+      }
+    }
+
+    // If previousBodyOverflowSetting is already set, don't set it again.
+    if (previousBodyOverflowSetting === undefined) {
+      previousBodyOverflowSetting = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+    }
+  };
+
+  var restoreOverflowSetting = function restoreOverflowSetting() {
+    if (previousBodyPaddingRight !== undefined) {
+      document.body.style.paddingRight = previousBodyPaddingRight;
+
+      // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it
+      // can be set again.
+      previousBodyPaddingRight = undefined;
+    }
+
+    if (previousBodyOverflowSetting !== undefined) {
+      document.body.style.overflow = previousBodyOverflowSetting;
+
+      // Restore previousBodyOverflowSetting to undefined
+      // so setOverflowHidden knows it can be set again.
+      previousBodyOverflowSetting = undefined;
+    }
+  };
+
+  var setPositionFixed = function setPositionFixed() {
+    return window.requestAnimationFrame(function () {
+      // If previousBodyPosition is already set, don't set it again.
+      if (previousBodyPosition === undefined) {
+        previousBodyPosition = {
+          position: document.body.style.position,
+          top: document.body.style.top,
+          left: document.body.style.left
+        };
+
+        // Update the dom inside an animation frame
+        var _window = window,
+            scrollY = _window.scrollY,
+            scrollX = _window.scrollX,
+            innerHeight = _window.innerHeight;
+
+        document.body.style.position = 'fixed';
+        document.body.style.top = -scrollY + 'px';
+        document.body.style.left = -scrollX + 'px';
+
+        setTimeout(function () {
+          return window.requestAnimationFrame(function () {
+            // Attempt to check if the bottom bar appeared due to the position change
+            var bottomBarHeight = innerHeight - window.innerHeight;
+            if (bottomBarHeight && scrollY >= innerHeight) {
+              // Move the content further up so that the bottom bar doesn't hide it
+              document.body.style.top = -(scrollY + bottomBarHeight);
+            }
+          });
+        }, 300);
+      }
+    });
+  };
+
+  var restorePositionSetting = function restorePositionSetting() {
+    if (previousBodyPosition !== undefined) {
+      // Convert the position from "px" to Int
+      var y = -parseInt(document.body.style.top, 10);
+      var x = -parseInt(document.body.style.left, 10);
+
+      // Restore styles
+      document.body.style.position = previousBodyPosition.position;
+      document.body.style.top = previousBodyPosition.top;
+      document.body.style.left = previousBodyPosition.left;
+
+      // Restore scroll
+      window.scrollTo(x, y);
+
+      previousBodyPosition = undefined;
+    }
+  };
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
+  var isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) {
+    return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
+  };
+
+  var handleScroll = function handleScroll(event, targetElement) {
+    var clientY = event.targetTouches[0].clientY - initialClientY;
+
+    if (allowTouchMove(event.target)) {
+      return false;
+    }
+
+    if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {
+      // element is at the top of its scroll.
+      return preventDefault(event);
+    }
+
+    if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {
+      // element is at the bottom of its scroll.
+      return preventDefault(event);
+    }
+
+    event.stopPropagation();
+    return true;
+  };
+
+  var disableBodyScroll = function disableBodyScroll(targetElement, options) {
+    // targetElement must be provided
+    if (!targetElement) {
+      // eslint-disable-next-line no-console
+      console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.');
+      return;
+    }
+
+    // disableBodyScroll must not have been called on this targetElement before
+    if (locks.some(function (lock) {
+      return lock.targetElement === targetElement;
+    })) {
+      return;
+    }
+
+    var lock = {
+      targetElement: targetElement,
+      options: options || {}
+    };
+
+    locks = [].concat(_toConsumableArray(locks), [lock]);
+
+    if (isIosDevice) {
+      setPositionFixed();
+    } else {
+      setOverflowHidden(options);
+    }
+
+    if (isIosDevice) {
+      targetElement.ontouchstart = function (event) {
+        if (event.targetTouches.length === 1) {
+          // detect single touch.
+          initialClientY = event.targetTouches[0].clientY;
+        }
+      };
+      targetElement.ontouchmove = function (event) {
+        if (event.targetTouches.length === 1) {
+          // detect single touch.
+          handleScroll(event, targetElement);
+        }
+      };
+
+      if (!documentListenerAdded) {
+        document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+        documentListenerAdded = true;
+      }
+    }
+  };
+
+  var enableBodyScroll = function enableBodyScroll(targetElement) {
+    if (!targetElement) {
+      // eslint-disable-next-line no-console
+      console.error('enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.');
+      return;
+    }
+
+    locks = locks.filter(function (lock) {
+      return lock.targetElement !== targetElement;
+    });
+
+    if (isIosDevice) {
+      targetElement.ontouchstart = null;
+      targetElement.ontouchmove = null;
+
+      if (documentListenerAdded && locks.length === 0) {
+        document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+        documentListenerAdded = false;
+      }
+    }
+
+    if (isIosDevice) {
+      restorePositionSetting();
+    } else {
+      restoreOverflowSetting();
+    }
+  };
+
+  // MIT License
+
+  // Copyright (c) 2018 Will Po
+
+  // Permission is hereby granted, free of charge, to any person obtaining a copy
+  // of this software and associated documentation files (the "Software"), to deal
+  // in the Software without restriction, including without limitation the rights
+  // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  // copies of the Software, and to permit persons to whom the Software is
+  // furnished to do so, subject to the following conditions:
+
+  // The above copyright notice and this permission notice shall be included in all
+  // copies or substantial portions of the Software.
+
+  // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  // SOFTWARE.
+
+  Combobox.Toggle = Base => class extends Base {
+    open() {
+      this.expandedValue = true;
+    }
+
+    close() {
+      if (this._isOpen) {
+        this._lockInSelection();
+        this.expandedValue = false;
+      }
+    }
+
+    toggle() {
+      if (this.expandedValue) {
+        this.close();
+      } else {
+        this._openByFocusing();
+      }
+    }
+
+    closeOnClickOutside(event) {
+      const target = event.target;
+
+      if (!this._isOpen) return
+      if (this.element.contains(target) && !this._isDialogDismisser(target)) return
+      if (this._withinElementBounds(event)) return
+
+      this.close();
+    }
+
+    closeOnFocusOutside({ target }) {
+      if (!this._isOpen) return
+      if (this.element.contains(target)) return
+
+      this.close();
+    }
+
+    // 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 { clientX, clientY } = event;
+
+      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._autocompletesList && this._smallViewport) {
+        this._openInDialog();
+      } else {
+        this._openInline();
+      }
+
+      this._actingCombobox.setAttribute("aria-expanded", true); // needs to happen after setting acting combobox
+    }
+
+    _collapse() {
+      this._actingCombobox.setAttribute("aria-expanded", false); // needs to happen before resetting acting combobox
+
+      if (this._dialogIsOpen) {
+        this._closeInDialog();
+      } else {
+        this._closeInline();
+      }
+    }
+
+    _openInDialog() {
+      this._moveArtifactsToDialog();
+      this._preventFocusingComboboxAfterClosingDialog();
+      this._preventBodyScroll();
+      this.dialogTarget.showModal();
+    }
+
+    _openInline() {
+      this.listboxTarget.hidden = false;
+    }
+
+    _closeInDialog() {
+      this._moveArtifactsInline();
+      this.dialogTarget.close();
+      this._restoreBodyScroll();
+      this._actingCombobox.scrollIntoView({ block: "center" });
+    }
+
+    _closeInline() {
+      this.listboxTarget.hidden = true;
+    }
+
+    _preventBodyScroll() {
+      disableBodyScroll(this.dialogListboxTarget);
+    }
+
+    _restoreBodyScroll() {
+      enableBodyScroll(this.dialogListboxTarget);
+    }
+
+    get _isOpen() {
+      return this.expandedValue
+    }
+
+    get _preselectOnExpansion() {
+      return !this._isAsync // async comboboxes preselect based on callbacks
+    }
+  };
+
+  Combobox.Validity = Base => class extends Base {
+    _markValid() {
+      if (this._valueIsInvalid) return
+
+      this._forAllComboboxes(combobox => {
+        if (this.hasInvalidClass) {
+          combobox.classList.remove(this.invalidClass);
+        }
+
+        combobox.removeAttribute("aria-invalid");
+        combobox.removeAttribute("aria-errormessage");
+      });
+    }
+
+    _markInvalid() {
+      if (this._valueIsValid) return
+
+      this._forAllComboboxes(combobox => {
+        if (this.hasInvalidClass) {
+          combobox.classList.add(this.invalidClass);
+        }
+
+        combobox.setAttribute("aria-invalid", true);
+        combobox.setAttribute("aria-errormessage", `Please select a valid option for ${combobox.name}`);
+      });
+    }
+
+    get _valueIsValid() {
+      return !this._valueIsInvalid
+    }
+
+    // +_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;
+      return isRequiredAndEmpty
+    }
+  };
+
+  window.HOTWIRE_COMBOBOX_STREAM_DELAY = 0; // ms, for testing purposes
+
+  const concerns = [
+    stimulus.Controller,
+    Combobox.Actors,
+    Combobox.AsyncLoading,
+    Combobox.Autocomplete,
+    Combobox.Dialog,
+    Combobox.Events,
+    Combobox.Filtering,
+    Combobox.Navigation,
+    Combobox.NewOptions,
+    Combobox.Options,
+    Combobox.Selection,
+    Combobox.Toggle,
+    Combobox.Validity
+  ];
+
+  class HwComboboxController extends Concerns(...concerns) {
+    static classes = [
+      "invalid",
+      "selected"
+    ]
+
+    static targets = [
+      "combobox",
+      "dialog",
+      "dialogCombobox",
+      "dialogFocusTrap",
+      "dialogListbox",
+      "endOfOptionsStream",
+      "handle",
+      "hiddenField",
+      "listbox"
+    ]
+
+    static values = {
+      asyncSrc: String,
+      autocompletableAttribute: String,
+      autocomplete: String,
+      expanded: Boolean,
+      filterableAttribute: String,
+      nameWhenNew: String,
+      originalName: String,
+      prefilledDisplay: String,
+      smallViewportMaxWidth: String
+    }
+
+    initialize() {
+      this._initializeActors();
+      this._initializeFiltering();
+    }
+
+    connect() {
+      this._connectSelection();
+      this._connectListAutocomplete();
+      this._connectDialog();
+    }
+
+    disconnect() {
+      this._disconnectDialog();
+    }
+
+    expandedValueChanged() {
+      if (this.expandedValue) {
+        this._expand();
+      } else {
+        this._collapse();
+      }
+    }
+
+    async endOfOptionsStreamTargetConnected(element) {
+      const inputType = element.dataset.inputType;
+      const delay = window.HOTWIRE_COMBOBOX_STREAM_DELAY;
+
+      if (inputType && inputType !== "hw:lockInSelection") {
+        if (delay) await sleep(delay);
+        this._commitFilter({ inputType });
+      } else {
+        this._preselectOption();
+      }
+    }
+  }
+
+  return HwComboboxController;
+
+}));