katalyst-tables 3.5.5 → 3.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b5b39c8b9f9bd09482c418688e2bc279c52107b21015979c3ced2a6b175e544d
-  data.tar.gz: 924bdf02fb5791051967b2ce39e59360c47398a518a53401747ee4e6f02ce728
+  metadata.gz: fe9631a56d02759f79b16bc7f4e84e8f6514eaaafdbe867edcf3141fe5747807
+  data.tar.gz: 4bbf49bcc6afbd93f52252f7d4ec5e8060e7fe807778627d5b5feec72e75dcd3
 SHA512:
-  metadata.gz: 2d809af4b9c2d75d14af780f2223450b852260e96dab3b2ab362d7d5ce4a15a67a1aafd38613da25262e6f7b63903fc1890f6e53bbb19034a17fbb0a72b33623
-  data.tar.gz: d7edbcc6ea97a412ec13a24084fe2d324d8643d7a4b7f8515d1b7d6e7656a12dd4efb7c0e96082eaa97491672fd3e5ada979eb9fde11da52ba6d31fdb574eb2e
+  metadata.gz: 250ec84f3123b2c36a98deb34fb7ee66adabf7cbbe38effb9516dee0d5f4249a338faf08b9af9f5fe6d6f8e5c0297e184ec39a18d8559472bcdc198c38b4253c
+  data.tar.gz: 0664eabd232457bb9e0145566680c78d6f33e5db8970c63ff34f64b2ead49874399bd11cd1d20ebb7156f9968b80efd7a3ab7cf5c750c9d7a6ba139e1adf678e

data/app/assets/builds/katalyst/tables.esm.js

@@ -725,6 +725,7 @@ class QueryController extends Controller {
 
   closeModal() {
     delete this.modalTarget.dataset.open;
+    this.query.setAttribute("aria-expanded", false);
 
     if (document.activeElement === this.query) document.activeElement.blur();
 
@@ -733,6 +734,7 @@ class QueryController extends Controller {
 
   openModal() {
     this.modalTarget.dataset.open = true;
+    this.query.setAttribute("aria-expanded", true);
 
     document.addEventListener("selectionchange", this.selection);
   }
@@ -761,25 +763,26 @@ class QueryController extends Controller {
       delete this.pending;
     }
 
-    // prevent an unnecessary `?q=` parameter from appearing in the URL
+    // add/remove current cursor position
+    if (hasFocus && this.query.value !== "") {
+      this.position.value = position;
+      this.position.disabled = false;
+    } else {
+      this.position.value = "";
+      this.position.disabled = true;
+    }
+
+    // prevent an unnecessary `?q=&p=0` parameter from appearing in the URL
     if (this.query.value === "") {
       this.query.disabled = true;
 
       // restore input and focus after form submission
       setTimeout(() => {
         this.query.disabled = false;
+        this.position.disabled = false;
         if (hasFocus) this.query.focus();
       }, 0);
     }
-
-    // add/remove current cursor position
-    if (hasFocus && position) {
-      this.position.value = position;
-      this.position.disabled = false;
-    } else {
-      this.position.value = "";
-      this.position.disabled = true;
-    }
   }
 
   update = () => {
@@ -801,8 +804,85 @@ class QueryController extends Controller {
     }
   }
 
+  moveToPreviousSuggestion() {
+    const prev = this.previousSuggestion || this.lastSuggestion;
+
+    if (prev) this.makeSuggestionActive(prev);
+  }
+
+  moveToNextSuggestion() {
+    const next = this.nextSuggestion || this.firstSuggestion;
+
+    if (next) this.makeSuggestionActive(next);
+  }
+
+  selectFirstSuggestion(e) {
+    // This is caused by pressing the tab key. We don't want to move focus.
+    // Ideally we don't want to always prevent the user from tabbing. We will address this later
+    e.preventDefault();
+
+    this.firstSuggestion?.dispatchEvent(new CustomEvent("query:select"));
+  }
+
+  selectActiveSuggestion() {
+    if (!this.activeSuggestion) {
+      this.closeModal();
+      return;
+    }
+
+    this.activeSuggestion.dispatchEvent(new CustomEvent("query:select"));
+  }
+
+  selectSuggestion(e) {
+    this.query.dispatchEvent(
+      new CustomEvent("replaceToken", {
+        detail: { token: e.params.value, position: this.query.selectionStart },
+      }),
+    );
+
+    this.clearActiveSuggestion();
+  }
+
+  makeSuggestionActive(node) {
+    if (this.activeSuggestion) {
+      this.activeSuggestion.setAttribute("aria-selected", "false");
+    }
+
+    this.query.setAttribute("aria-activedescendant", node.id);
+    node.setAttribute("aria-selected", "true");
+  }
+
+  clearActiveSuggestion() {
+    if (this.activeSuggestion) {
+      this.activeSuggestion.setAttribute("aria-selected", "false");
+      this.query.removeAttribute("aria-activedescendant");
+    }
+  }
+
+  get activeSuggestion() {
+    return this.modalTarget.querySelector(
+      `#${this.query.getAttribute("aria-activedescendant")}`,
+    );
+  }
+
+  get previousSuggestion() {
+    return this.activeSuggestion?.previousElementSibling;
+  }
+
+  get nextSuggestion() {
+    return this.activeSuggestion?.nextElementSibling;
+  }
+
+  get firstSuggestion() {
+    return this.modalTarget.querySelector("#suggestions li:first-of-type");
+  }
+
+  get lastSuggestion() {
+    return this.modalTarget.querySelector("#suggestions li:last-of-type");
+  }
+
   get query() {
-    return this.element.querySelector("[role=searchbox]");
+    return this.element.querySelector("[role=combobox]");
   }
 
   get position() {
@@ -838,6 +918,49 @@ class QueryInputController extends Controller {
       this.highlightTarget.appendChild(token.render());
     });
   }
+
+  replaceToken(e) {
+    let tokenToAdd = e.detail.token.toString();
+
+    // wrap in quotes if it contains a spaces or special characters
+    if (/\s/.exec(tokenToAdd)) {
+      tokenToAdd = `"${tokenToAdd}"`;
+    }
+
+    const indexPosition = e.detail.position;
+    let caretPosition = indexPosition + tokenToAdd.length;
+    let sliceStart = indexPosition;
+    let sliceEnd = indexPosition;
+
+    // detect if position has a token already, if so, replace it
+    const existingToken = new Parser()
+      .parse(this.queryValue)
+      .tokenAtPosition(indexPosition);
+    if (existingToken) {
+      // We don't want to include the trailing space as we are replacing an existing value
+      tokenToAdd = tokenToAdd.trim();
+
+      // Slice up to the beginning of the tokens value (not the initial caret position)
+      sliceStart = existingToken.startOfValue();
+
+      // Slice after the end of the tokens value
+      sliceEnd = existingToken.endOfValue();
+
+      // The end position of the newly added token
+      caretPosition = sliceStart + tokenToAdd.length;
+    }
+
+    // Replace any text within sliceStart and sliceEnd with tokenToAdd
+    this.inputTarget.value =
+      this.queryValue.slice(0, sliceStart) +
+      tokenToAdd +
+      this.queryValue.slice(sliceEnd);
+
+    // Re focus the input at the end of the newly added token
+    this.update();
+    this.inputTarget.focus();
+    this.inputTarget.setSelectionRange(caretPosition, caretPosition);
+  }
 }
 
 class Parser {
@@ -871,13 +994,13 @@ class Parser {
   skipWhitespace(query) {
     if (!query.scan(/\s+/)) return;
 
-    return new Token(query.matched());
+    return new Token(query.matched(), query.position);
   }
 
   takeUntagged(query) {
     if (!query.scan(/\S+/)) return;
 
-    return new Untagged(query.matched());
+    return new Untagged(query.matched(), query.position);
   }
 
   takeTagged(query) {
@@ -889,13 +1012,13 @@ class Parser {
     const value =
       this.takeArrayValue(query) || this.takeSingleValue(query) || new Token();
 
-    return new Tagged(key, separator, value);
+    return new Tagged(key, separator, value, query.position);
   }
 
   takeArrayValue(query) {
     if (!query.scan(/\[\s*/)) return;
 
-    const start = new Token(query.matched());
+    const start = new Token(query.matched(), query.position);
     const values = (this.values = []);
 
     while (!query.isEos()) {
@@ -904,17 +1027,17 @@ class Parser {
     }
 
     query.scan(/\s*]/);
-    const end = new Token(query.matched());
+    const end = new Token(query.matched(), query.position);
 
     this.values = null;
 
-    return new Array$1(start, values, end);
+    return new ArrayToken(start, values, end);
   }
 
   takeDelimiter(query) {
     if (!query.scan(/\s*,\s*/)) return;
 
-    return new Token(query.matched());
+    return new Token(query.matched(), query.position);
   }
 
   takeSingleValue(query) {
@@ -924,24 +1047,49 @@ class Parser {
   takeQuotedValue(query) {
     if (!query.scan(/"([^"]*)"/)) return;
 
-    return new Value(query.matched());
+    return new Value(query.matched(), query.position);
   }
 
   takeUnquotedValue(query) {
     if (!query.scan(/[^ \],]*/)) return;
 
-    return new Value(query.matched());
+    return new Value(query.matched(), query.position);
+  }
+
+  tokenAtPosition(position) {
+    return this.tokens
+      .filter((t) => t instanceof Tagged || t instanceof Untagged)
+      .find((t) => t.range.includes(position));
   }
 }
 
 class Token {
-  constructor(value = "") {
+  constructor(value = "", position) {
     this.value = value;
+    this.length = this.value.length;
+    this.start = position - this.length;
+    this.end = this.start + this.length;
+    this.range = this.arrayRange(this.start, this.end);
   }
 
   render() {
     return document.createTextNode(this.value);
   }
+
+  arrayRange(start, stop) {
+    return Array.from(
+      { length: stop - start + 1 },
+      (value, index) => start + index,
+    );
+  }
+
+  startOfValue() {
+    return this.start;
+  }
+
+  endOfValue() {
+    return this.end;
+  }
 }
 
 class Value extends Token {
@@ -955,12 +1103,16 @@ class Value extends Token {
 }
 
 class Tagged extends Token {
-  constructor(key, separator, value) {
+  constructor(key, separator, value, position) {
     super();
 
     this.key = key;
     this.separator = separator;
     this.value = value;
+    this.length = key.length + separator.length + value.value.length;
+    this.start = position - this.length;
+    this.end = this.start + this.length;
+    this.range = this.arrayRange(this.start, this.end);
   }
 
   render() {
@@ -977,6 +1129,14 @@ class Tagged extends Token {
 
     return span;
   }
+
+  startOfValue() {
+    return this.value.startOfValue();
+  }
+
+  endOfValue() {
+    return this.value.endOfValue();
+  }
 }
 
 class Untagged extends Token {
@@ -988,13 +1148,18 @@ class Untagged extends Token {
   }
 }
 
-let Array$1 = class Array extends Token {
+class ArrayToken extends Token {
   constructor(start, values, end) {
     super();
 
     this.start = start;
     this.values = values;
     this.end = end;
+    this.range = this.arrayRange(start.start, end.range[end.length]);
+    this.length =
+      start.length +
+      values.reduce((length, value) => length + value.length, 0) +
+      end.length;
   }
 
   render() {
@@ -1012,7 +1177,15 @@ let Array$1 = class Array extends Token {
 
     return array;
   }
-};
+
+  startOfValue() {
+    return this.start.start;
+  }
+
+  endOfValue() {
+    return this.end.end;
+  }
+}
 
 class StringScanner {
   constructor(input) {