hotwire_combobox 0.1.10 → 0.1.12

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

@@ -0,0 +1,62 @@
+import Combobox from "models/combobox/base"
+import { wrapAroundAccess } from "helpers"
+
+Combobox.Selection = Base => class extends Base {
+  selectOption(event) {
+    this._select(event.currentTarget)
+    this.close()
+  }
+
+  _connectSelection() {
+    if (this.hiddenFieldTarget.value) {
+      this._selectOptionByValue(this.hiddenFieldTarget.value)
+    }
+  }
+
+  _select(option, { force = false } = {}) {
+    this._resetOptions()
+
+    if (option) {
+      if (this.hasSelectedClass) option.classList.add(this.selectedClass)
+
+      this._markValid()
+      this._maybeAutocompleteWith(option, { force })
+      this._commitSelection(option, { selected: true })
+    } else {
+      this._markInvalid()
+    }
+  }
+
+  _commitSelection(option, { selected }) {
+    option?.setAttribute("aria-selected", selected)
+    option?.scrollIntoView({ block: "nearest" })
+
+    if (selected) {
+      this.hiddenFieldTarget.value = option?.dataset.value
+    } else {
+      this.hiddenFieldTarget.value = null
+    }
+  }
+
+  _deselect() {
+    const option = this._selectedOptionElement
+
+    if (this.hasSelectedClass) option?.classList.remove(this.selectedClass)
+    this._commitSelection(option, { selected: false })
+  }
+
+  _selectNew(query) {
+    this._resetOptions()
+    this.hiddenFieldTarget.value = query
+    this.hiddenFieldTarget.name = this.nameWhenNewValue
+  }
+
+  _selectIndex(index) {
+    const option = wrapAroundAccess(this._visibleOptionElements, index)
+    this._select(option, { force: true })
+  }
+
+  _selectOptionByValue(value) {
+    this._allOptions.find(option => option.dataset.value === value)?.click()
+  }
+}

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

@@ -0,0 +1,104 @@
+import Combobox from "models/combobox/base"
+import { disableBodyScroll, enableBodyScroll } from "vendor/bodyScrollLock"
+
+Combobox.Toggle = Base => class extends Base {
+  open() {
+    this.expandedValue = true
+  }
+
+  close() {
+    if (this._isOpen) {
+      this._ensureSelection()
+      this.expandedValue = false
+    }
+  }
+
+  toggle() {
+    if (this.expandedValue) {
+      this.close()
+    } else {
+      this._openByFocusing()
+    }
+  }
+
+  closeOnClickOutside({ target }) {
+    if (this.element.contains(target) && !this._isDialogDismisser(target)) return
+
+    this.close()
+  }
+
+  closeOnFocusOutside({ target }) {
+    if (!this._isOpen) return
+    if (this.element.contains(target)) return
+    if (target.matches("main")) return
+
+    this.close()
+  }
+
+  _ensureSelection() {
+    if (!this._isValidNewOption(this._actingCombobox.value, { ignoreAutocomplete: true })) {
+      this._select(this._selectedOptionElement, { force: true })
+    }
+  }
+
+  _openByFocusing() {
+    this._actingCombobox.focus()
+  }
+
+  _isDialogDismisser(target) {
+    return target.closest("dialog") && target.role != "combobox"
+  }
+
+  async _expand() {
+    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.dialogTarget.open) {
+      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()
+  }
+
+  _closeInline() {
+    this.listboxTarget.hidden = true
+  }
+
+  _preventBodyScroll() {
+    disableBodyScroll(this.dialogListboxTarget)
+  }
+
+  _restoreBodyScroll() {
+    enableBodyScroll(this.dialogListboxTarget)
+  }
+
+  get _isOpen() {
+    return this.expandedValue
+  }
+}

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

@@ -0,0 +1,34 @@
+import Combobox from "models/combobox/base"
+
+Combobox.Validity = Base => class extends Base {
+  _markValid() {
+    if (this._valueIsInvalid) return
+
+    if (this.hasInvalidClass) {
+      this.comboboxTarget.classList.remove(this.invalidClass)
+    }
+
+    this.comboboxTarget.removeAttribute("aria-invalid")
+    this.comboboxTarget.removeAttribute("aria-errormessage")
+  }
+
+  _markInvalid() {
+    if (this._valueIsValid) return
+
+    if (this.hasInvalidClass) {
+      this.comboboxTarget.classList.add(this.invalidClass)
+    }
+
+    this.comboboxTarget.setAttribute("aria-invalid", true)
+    this.comboboxTarget.setAttribute("aria-errormessage", `Please select a valid option for ${this.comboboxTarget.name}`)
+  }
+
+  get _valueIsValid() {
+    return !this._valueIsInvalid
+  }
+
+  get _valueIsInvalid() {
+    const isRequiredAndEmpty = this.comboboxTarget.required && !this.hiddenFieldTarget.value
+    return isRequiredAndEmpty
+  }
+}

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

@@ -0,0 +1,14 @@
+import Combobox from "models/combobox/base"
+
+import "models/combobox/actors"
+import "models/combobox/async_loading"
+import "models/combobox/autocomplete"
+import "models/combobox/dialog"
+import "models/combobox/filtering"
+import "models/combobox/navigation"
+import "models/combobox/options"
+import "models/combobox/selection"
+import "models/combobox/toggle"
+import "models/combobox/validity"
+
+export default Combobox

data/app/assets/javascripts/vendor/bodyScrollLock.js

@@ -0,0 +1,299 @@
+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;
+};
+
+export 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;
+    }
+  }
+};
+
+export var clearAllBodyScrollLocks = function clearAllBodyScrollLocks() {
+  if (isIosDevice) {
+    // Clear all locks ontouchstart/ontouchmove handlers, and the references.
+    locks.forEach(function (lock) {
+      lock.targetElement.ontouchstart = null;
+      lock.targetElement.ontouchmove = null;
+    });
+
+    if (documentListenerAdded) {
+      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+      documentListenerAdded = false;
+    }
+
+    // Reset initial clientY.
+    initialClientY = -1;
+  }
+
+  if (isIosDevice) {
+    restorePositionSetting();
+  } else {
+    restoreOverflowSetting();
+  }
+
+  locks = [];
+};
+
+export 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.

data/app/assets/stylesheets/hotwire_combobox.css

@@ -0,0 +1,181 @@
+:root {
+  --hw-active-bg-color: #F3F4F6;
+
+  --hw-border-color: #D1D5DB;
+  --hw-border-radius: 0.375rem;
+  --hw-border-width--slim: 1px;
+  --hw-border-width--thick: 2px;
+
+  --hw-dialog-bottom-padding: 0;
+  --hw-dialog-font-size: 1.25rem;
+  --hw-dialog-input-height: 2.5rem;
+  --hw-dialog-label-alignment: center;
+  --hw-dialog-label-color: #1D1D1D;
+  --hw-dialog-label-padding: 0.5rem 0 0.375rem;
+  --hw-dialog-label-size: 1.05rem;
+  --hw-dialog-listbox-margin: 1.25rem 0 0;
+  --hw-dialog-padding: 1rem 1rem 0;
+  --hw-dialog-top-offset: 4rem;
+
+  --hw-font-size: 1rem;
+
+  --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-offset-right: 0.375rem;
+  --hw-handle-width: 1.5em;
+
+  --hw-combobox-width: 10rem;
+
+  --hw-focus-color: #2563EB;
+
+  --hw-line-height: 1.5rem;
+
+  --hw-listbox-height: calc(var(--hw-line-height) * 10);
+  --hw-listbox-offset-top: var(--hw-line-height);
+  --hw-listbox-z-index: 10;
+
+  --hw-option-bg-color: #FFFFFF;
+
+  --hw-padding--slim: 0.375rem;
+  --hw-padding--thick: 0.75rem;
+}
+
+.hw-combobox {
+  border-width: 0;
+  display: inline-block;
+  font-size: var(--hw-font-size);
+  margin: 0;
+  padding: 0;
+  position: relative;
+  isolation: isolate;
+
+  &, * {
+    box-sizing: border-box;
+  }
+}
+
+.hw-combobox__input {
+  border: var(--hw-border-width--slim) solid var(--hw-border-color);
+  border-radius: var(--hw-border-radius);
+  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);
+  text-overflow: ellipsis;
+}
+
+.hw-combobox__handle {
+  height: 100%;
+  position: absolute;
+  right: var(--hw-handle-offset-right);
+  top: 0;
+  width: var(--hw-handle-width);
+}
+
+.hw-combobox__handle::before {
+  background-image: var(--hw-handle-image);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: var(--hw-handle-width);
+  bottom: 0;
+  content: '';
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.hw-combobox__input:focus-visible {
+  box-shadow: 0 0 0 var(--hw-border-width--thick) var(--hw-focus-color);
+  outline: none;
+}
+
+.hw-combobox__listbox {
+  border-color: transparent;
+  border-radius: var(--hw-border-radius);
+  border-style: solid;
+  border-width: var(--hw-border-width--slim);
+  left: 0;
+  line-height: var(--hw-line-height);
+  list-style: none;
+  max-height: var(--hw-listbox-height);
+  overflow: auto;
+  padding: 0;
+  position: absolute;
+  top: var(--hw-listbox-offset-top);
+  width: 100%;
+  z-index: var(--hw-listbox-z-index);
+
+  &:has([role="option"]:not([hidden])) {
+    border-color: var(--hw-border-color);
+  }
+}
+
+.hw-combobox__option {
+  background-color: var(--hw-option-bg-color);
+  padding: var(--hw-padding--slim) var(--hw-padding--thick);
+  user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hw-combobox__option:hover,
+.hw-combobox__option--selected {
+  background-color: var(--hw-active-bg-color);
+}
+
+.hw-combobox__dialog {
+  border: 0;
+  font-size: var(--hw-dialog-font-size);
+  height: auto;
+  margin: 0;
+  max-height: none;
+  max-width: none;
+  overflow: hidden;
+  padding: var(--hw-dialog-padding) var(--hw-dialog-padding) var(--hw-dialog-bottom-padding) var(--hw-dialog-padding);
+  position: fixed;
+  top: var(--hw-dialog-top-offset);
+  width: auto;
+
+  &[open] {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+  }
+
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+}
+
+.hw-combobox__dialog__label {
+  align-self: var(--hw-dialog-label-alignment);
+  color: var(--hw-dialog-label-color);
+  font-size: var(--hw-dialog-label-size);
+  padding: var(--hw-dialog-label-padding);
+}
+
+.hw-combobox__dialog__input {
+  border: var(--hw-border-width--slim) solid var(--hw-border-color);
+  border-radius: var(--hw-border-radius);
+  font-size: inherit;
+  height: var(--hw-dialog-input-height);
+  line-height: var(--hw-dialog-input-height);
+  padding: var(--hw-padding--slim) var(--hw-padding--thick);
+  text-overflow: ellipsis;
+  width: 90%;
+}
+
+.hw-combobox__dialog__listbox {
+  margin: var(--hw-dialog-listbox-margin);
+  overflow: auto;
+  padding: 0;
+  width: 100%;
+
+  [role="option"] {
+    border-radius: var(--hw-border-radius);
+    padding: var(--hw-padding--thick);
+  }
+}