hotwire_combobox 0.1.37 → 0.1.39

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

@@ -0,0 +1,1329 @@
+import { Controller } from '@hotwired/stimulus';
+
+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 = [
+  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();
+    }
+  }
+}
+
+export { HwComboboxController as default };