@ministryofjustice/hmpps-connect-dps-shared-items 5.1.0 → 5.2.0

package/dist/assets/dps/components/address-autosuggest/autosuggest-ui.js

@@ -1,6 +1,7 @@
 import { abortError, abortTimeout } from './abortable-fetch.js';
 
 // Based on ONSDigital's https://github.com/ONSdigital/design-system/blob/main/src/components/autosuggest/autosuggest.ui.js
+/* eslint-disable no-param-reassign, @stylistic/lines-between-class-members */
 const jsBaseClass = 'hmpps-js-autosuggest';
 const classSuffixInitialised = '--initialised';
 const classSuffixOption = '__option';
@@ -13,6 +14,38 @@ const NoResults = {
     server_error: 'SERVER_ERROR',
 };
 class AutosuggestUi {
+    context;
+    input;
+    resultsContainer;
+    resultsTitleContainer;
+    listbox;
+    instructions;
+    errorContainer;
+    errorTextContainer;
+    ariaStatus;
+    minChars;
+    ariaYouHaveSelected;
+    ariaMinChars;
+    ariaOneResult;
+    ariaNResults;
+    noResults;
+    typeMore;
+    listboxId;
+    errorMessage;
+    stylingBaseClass;
+    fetchSuggestions;
+    onSelect;
+    query;
+    sanitisedQuery;
+    results;
+    resultOptions;
+    numberOfResults;
+    blurring;
+    blurTimeout;
+    scrolling;
+    scrollTimeout;
+    inputTimeout;
+    highlightedResultIndex;
     constructor({ context, onSelect, suggestionFunction }) {
         // DOM Elements
         this.context = context;
@@ -26,15 +59,15 @@ class AutosuggestUi {
         this.ariaStatus = context.querySelector(`.${jsBaseClass}-aria-status`);
         // Settings
         this.minChars = 3;
-        this.ariaYouHaveSelected = context.getAttribute('data-aria-you-have-selected');
-        this.ariaMinChars = context.getAttribute('data-aria-min-chars');
-        this.ariaOneResult = context.getAttribute('data-aria-one-result');
-        this.ariaNResults = context.getAttribute('data-aria-n-results');
-        this.noResults = context.getAttribute('data-no-results');
-        this.typeMore = context.getAttribute('data-type-more');
-        this.listboxId = this.listbox.getAttribute('id');
-        this.errorMessage = context.getAttribute('data-error-api');
-        this.stylingBaseClass = context.getAttribute('data-styling-base-class');
+        this.ariaYouHaveSelected = context.dataset.ariaYouHaveSelected;
+        this.ariaMinChars = context.dataset.ariaMinChars;
+        this.ariaOneResult = context.dataset.ariaOneResult;
+        this.ariaNResults = context.dataset.ariaNResults;
+        this.noResults = context.dataset.noResults;
+        this.typeMore = context.dataset.typeMore;
+        this.errorMessage = context.dataset.errorApi;
+        this.stylingBaseClass = context.dataset.stylingBaseClass;
+        this.listboxId = this.listbox.id;
         // Callbacks
         this.onSelect = onSelect;
         this.fetchSuggestions = suggestionFunction;
@@ -43,22 +76,22 @@ class AutosuggestUi {
         this.sanitisedQuery = '';
         this.results = [];
         this.resultOptions = [];
-        this.data = [];
         this.numberOfResults = 0;
         this.highlightedResultIndex = null;
         this.blurring = false;
-        this.blurTimeout = null;
+        this.blurTimeout = 0;
         this.scrolling = false;
-        this.scrollTimeout = null;
+        this.scrollTimeout = 0;
+        this.inputTimeout = 0;
         this.initialiseUI();
     }
     initialiseUI() {
         this.input.setAttribute('aria-autocomplete', 'list');
-        this.input.setAttribute('aria-controls', this.listbox.getAttribute('id'));
-        this.input.setAttribute('aria-describedby', this.instructions.getAttribute('id'));
-        this.input.setAttribute('aria-haspopup', true);
-        this.input.setAttribute('aria-owns', this.listbox.getAttribute('id'));
-        this.input.setAttribute('aria-expanded', false);
+        this.input.setAttribute('aria-controls', this.listbox.id);
+        this.input.setAttribute('aria-describedby', this.instructions.id);
+        this.input.setAttribute('aria-haspopup', 'true');
+        this.input.setAttribute('aria-owns', this.listbox.id);
+        this.input.setAttribute('aria-expanded', 'false');
         this.input.setAttribute('autocomplete', 'off');
         this.input.setAttribute('role', 'combobox');
         this.context.classList.add(`${this.stylingBaseClass}${classSuffixInitialised}`);
@@ -72,26 +105,23 @@ class AutosuggestUi {
         this.input.addEventListener('focus', this.handleFocus.bind(this));
     }
     handleKeydown(event) {
-        switch (event.keyCode) {
-            case 38: {
-                // Up
+        // eslint-disable-next-line default-case
+        switch (event.key) {
+            case 'ArrowUp': {
                 event.preventDefault();
                 this.navigateResults(-1);
                 break;
             }
-            case 40: {
-                // Down
+            case 'ArrowDown': {
                 event.preventDefault();
                 this.navigateResults(1);
                 break;
             }
-            case 27: {
-                // Escape
+            case 'Escape': {
                 this.clearListbox();
                 break;
             }
-            case 13: {
-                // Enter
+            case 'Enter': {
                 if (this.highlightedResultIndex !== null) {
                     event.preventDefault();
                 }
@@ -100,15 +130,14 @@ class AutosuggestUi {
         }
     }
     handleKeyup(event) {
-        switch (event.keyCode) {
-            // Up and down
-            case 40:
-            case 38: {
+        // eslint-disable-next-line default-case
+        switch (event.key) {
+            case 'ArrowUp':
+            case 'ArrowDown': {
                 event.preventDefault();
                 break;
             }
-            case 13: {
-                // Enter
+            case 'Enter': {
                 if (this.highlightedResultIndex !== null) {
                     this.selectResult();
                 }
@@ -116,7 +145,7 @@ class AutosuggestUi {
             }
         }
     }
-    handleChange() {
+    handleChange(_event) {
         if (!this.blurring && this.input.value.trim()) {
             this.getSuggestions();
         }
@@ -124,21 +153,21 @@ class AutosuggestUi {
             this.clearListbox();
         }
     }
-    handleBlur() {
+    handleBlur(_event) {
         clearTimeout(this.blurTimeout);
         this.blurring = true;
         // Timeout required to allow user to click an option before clearing the listbox:
         this.blurTimeout = setTimeout(() => {
             this.blurring = false;
             this.context.classList.remove(`${this.stylingBaseClass}${classSuffixHasResults}`);
-            this.input.setAttribute('aria-expanded', false);
+            this.input.setAttribute('aria-expanded', 'false');
             this.setAriaStatus();
         }, 300);
     }
-    handleFocus() {
+    handleFocus(_event) {
         if (this.listbox.innerHTML) {
             this.context.classList.add(`${this.stylingBaseClass}${classSuffixHasResults}`);
-            this.input.setAttribute('aria-expanded', true);
+            this.input.setAttribute('aria-expanded', 'true');
             this.setAriaStatus();
         }
     }
@@ -178,7 +207,7 @@ class AutosuggestUi {
         sanitisedString = sanitisedString.trim();
         sanitisedString = sanitisedString.replace(/,/g, '');
         sanitisedString = sanitisedString.replace(/\s\s+/g, ' ');
-        sanitisedString = sanitisedString.replace(/[&]/g, '%26');
+        sanitisedString = sanitisedString.replace(/&/g, '%26');
         sanitisedString = sanitisedString.replace(/\d(?=[a-z]{3,})/gi, '$& ');
         return sanitisedString;
     }
@@ -190,10 +219,11 @@ class AutosuggestUi {
             this.unsetResults();
             this.checkCharCount();
             if (this.sanitisedQuery.length >= this.minChars) {
-                this.fetchSuggestions(this.sanitisedQuery, this.data)
+                this.fetchSuggestions(this.sanitisedQuery)
                     .then(this.handleResults.bind(this))
                     .catch(error => {
                     if (error.name !== abortError && error.reason !== abortTimeout) {
+                        // eslint-disable-next-line no-console
                         console.log('error:', error);
                         this.handleNoResults(NoResults.server_error);
                     }
@@ -212,12 +242,12 @@ class AutosuggestUi {
         this.listbox.innerHTML = '';
         this.context.classList.remove(`${this.stylingBaseClass}${classSuffixHasResults}`);
         this.input.removeAttribute('aria-activedescendant');
-        this.input.setAttribute('aria-expanded', false);
+        this.input.setAttribute('aria-expanded', 'false');
         this.setHighlightedResult(null);
         this.setAriaStatus();
     }
-    handleResults(result) {
-        this.results = result.results;
+    handleResults(response) {
+        this.results = response?.results;
         this.numberOfResults = this.results?.length || 0;
         this.setAriaStatus();
         this.listbox.innerHTML = '';
@@ -242,7 +272,7 @@ class AutosuggestUi {
         }
     }
     createListElement(result, index) {
-        const innerHTML = this.emboldenMatch(result.displayText, this.query);
+        const innerHTML = this.emboldenMatch(result.displayText ?? '', this.query);
         const listElement = document.createElement('li');
         listElement.className = `${this.stylingBaseClass}${classSuffixOption}`;
         listElement.setAttribute('id', `${this.listboxId}__option--${index}`);
@@ -255,10 +285,10 @@ class AutosuggestUi {
         return listElement;
     }
     handleNoResults(reason) {
-        if ([NoResults.type_more, NoResults.no_match].includes(reason)) {
+        if (reason === NoResults.type_more || reason === NoResults.no_match) {
             this.context.classList.add(`${this.stylingBaseClass}${classSuffixHasResults}`);
             this.resultsTitleContainer?.classList?.add('hmpps-display-none');
-            this.input.setAttribute('aria-expanded', true);
+            this.input.setAttribute('aria-expanded', 'true');
             const message = reason === NoResults.type_more ? this.typeMore : this.noResults;
             this.setAriaStatus(message);
             this.listbox.innerHTML = '';
@@ -273,7 +303,7 @@ class AutosuggestUi {
     }
     displayAPIError() {
         this.input.value = '';
-        this.input.setAttribute('disabled', true);
+        this.input.setAttribute('disabled', 'true');
         this.clearListbox();
         this.errorContainer.classList.remove('hmpps-display-none');
         this.errorTextContainer.textContent = this.errorMessage;
@@ -295,8 +325,8 @@ class AutosuggestUi {
                         this.handleScroll(option, false);
                     }
                     option.classList.add(`${this.stylingBaseClass}${classSuffixOptionFocused}`);
-                    option.setAttribute('aria-selected', true);
-                    this.input.setAttribute('aria-activedescendant', option.getAttribute('id'));
+                    option.setAttribute('aria-selected', 'true');
+                    this.input.setAttribute('aria-activedescendant', option.id);
                     const optionText = option.innerHTML.replace('<b>', '').replace('</b>', '');
                     this.setAriaStatus(optionText);
                 }
@@ -308,12 +338,12 @@ class AutosuggestUi {
         }
     }
     selectResult(index) {
-        if (!this.results.length)
+        if (!this.results?.length)
             return;
         const selectedIndex = typeof index === 'number' ? index : this.highlightedResultIndex;
         if (selectedIndex === null || selectedIndex === undefined)
             return;
-        const result = this.results[selectedIndex];
+        const result = this.results?.[selectedIndex];
         if (!result)
             return;
         this.onSelect(result);
@@ -334,7 +364,7 @@ class AutosuggestUi {
                 content = this.ariaOneResult;
             }
             else {
-                content = this.ariaNResults.replace('{n}', this.numberOfResults);
+                content = this.ariaNResults.replace('{n}', `${this.numberOfResults}`);
             }
         }
         this.ariaStatus.textContent = content;
@@ -345,7 +375,7 @@ class AutosuggestUi {
             .replace(/\s\s+/g, ' ')
             .split(' ')
             .reduce((accumulator, currentValue) => {
-            let reg = new RegExp(`(?<!<)${currentValue}(?![\\w\\s]*>)`, 'gi');
+            const reg = new RegExp(`(?<!<)${currentValue}(?![\\w\\s]*>)`, 'gi');
             return accumulator.replace(reg, '<b>$&</b>');
         }, string);
     }
@@ -360,4 +390,4 @@ class AutosuggestUi {
     }
 }
 
-export { AutosuggestUi, NoResults };
+export { NoResults, AutosuggestUi as default };