@ministryofjustice/hmpps-digital-prison-reporting-frontend 9.2.3 → 9.3.1

package/_networkMocks/dashboard/definitions/visualisations/complete-dataset/scorecardGroup/definiton-no-ts.d.ts

@@ -0,0 +1,2 @@
+import { components } from '../../../../../../src/dpr/types/api';
+export declare const definition: components['schemas']['DashboardDefinition'];

package/_networkMocks/dashboard/definitions/visualisations/mocks.d.ts

@@ -11,6 +11,7 @@ export declare const scorecardsInvalidVisDefinitionsMock: import("@networkMocks/
 export declare const scorecardsCompletebadDatasetMock: import("@networkMocks/generateNetworkMock").CompleteMockRequest;
 export declare const scorecardGroupCompleteDatasetMock: import("@networkMocks/generateNetworkMock").CompleteMockRequest;
 export declare const scorecardGroupCompleteDatasetInvalidMock: import("@networkMocks/generateNetworkMock").CompleteMockRequest;
+export declare const scorecardGroupCompleteDatasetNoTsMock: import("@networkMocks/generateNetworkMock").CompleteMockRequest;
 export declare const matrixCompleteDatasetMock: import("@networkMocks/generateNetworkMock").CompleteMockRequest;
 export declare const barCompleteDatasetMock: import("@networkMocks/generateNetworkMock").CompleteMockRequest;
 export declare const barPartialDatasetMock: import("@networkMocks/generateNetworkMock").CompleteMockRequest;

package/all.bundle.js

@@ -780,8 +780,8 @@ class DprFiltersFormClass extends DprClientClass {
     updateSingle(params, input) {
         const name = this.normaliseFilterName(input.name);
         let value = input.value;
-        if (input instanceof HTMLInputElement && input.dataset['staticOptionNameValue']) {
-            value = input.dataset['staticOptionNameValue'];
+        if (input instanceof HTMLInputElement && input.dataset['selectedValue']) {
+            value = input.dataset['selectedValue'];
         }
         const isDateInput = input instanceof HTMLInputElement && input.classList.contains('moj-js-datepicker-input');
         if (isDateInput) {
@@ -1118,183 +1118,223 @@ class AutoCompleteMulti extends DprClientClass {
     }
 }
 
-/* eslint-disable class-methods-use-this */
 class Autocomplete extends DprClientClass {
-    listItemsSelector;
-    listParentSelector;
+    activeIndex = -1;
     static getModuleName() {
         return 'autocomplete-text-input';
     }
-    constructor(element) {
-        super(element);
-        const listId = this.getTextInput()?.getAttribute('aria-owns');
-        this.listItemsSelector = `#${listId} li`;
-        this.listParentSelector = `#${listId} ul`;
-    }
     initialise() {
         const textInput = this.getTextInput();
-        textInput?.addEventListener('keyup', event => {
-            this.onTextInput(event, textInput);
+        if (!textInput) {
+            return;
+        }
+        this.initialiseDefaultValue();
+        textInput.addEventListener('input', () => {
+            this.onInput();
         });
-        textInput?.addEventListener('keypress', e => {
-            if (e.key === 'Enter') {
-                e.stopPropagation();
-                e.preventDefault();
-            }
+        textInput.addEventListener('keydown', event => {
+            this.onKeyDown(event);
         });
-        textInput?.addEventListener('input', () => {
-            if (textInput.value !== '') {
-                return;
-            }
-            const hiddenInput = this.getHiddenInput();
-            if (hiddenInput) {
-                hiddenInput.value = '';
-                hiddenInput.disabled = true;
-            }
-            delete textInput.dataset['staticOptionNameValue'];
-            textInput.dispatchEvent(new Event('change', { bubbles: true }));
+        textInput.addEventListener('blur', () => {
+            window.setTimeout(() => {
+                this.closeList();
+            }, 100);
         });
-        this.getElement()
-            .querySelectorAll('.autocomplete-text-input-list-button')
-            .forEach(button => {
-            button.addEventListener('mousedown', event => {
-                this.onOptionClick(event, textInput, this.getElement());
+        this.getAllOptions().forEach(option => {
+            option.addEventListener('mousedown', event => {
+                event.preventDefault();
+                this.selectOption(option);
             });
         });
-        this.initialiseDefaultValue(textInput);
+        textInput.addEventListener('focus', () => {
+            const minimumLength = Number(textInput.dataset['minimumLength'] || 0);
+            if (minimumLength === 0) {
+                this.filterOptions('');
+            }
+        });
+    }
+    getTextInput() {
+        return this.getElement().querySelector('.autocomplete-text-input-box');
     }
-    initialiseDefaultValue(textInput) {
+    getHiddenInput() {
+        return this.getElement().querySelector('[data-autocomplete-hidden]');
+    }
+    getAllOptions() {
+        return Array.from(this.getElement().querySelectorAll('.autocomplete-option'));
+    }
+    getVisibleOptions() {
+        return this.getAllOptions().filter(option => !option.classList.contains('autocomplete-text-input-item-hide'));
+    }
+    initialiseDefaultValue() {
         const hiddenInput = this.getHiddenInput();
-        if (hiddenInput?.value) {
-            hiddenInput.disabled = false;
+        const textInput = this.getTextInput();
+        if (!hiddenInput || !textInput) {
             return;
         }
-        if (textInput) {
-            textInput.value = '';
-        }
-        delete textInput?.dataset['staticOptionNameValue'];
-        if (hiddenInput) {
-            hiddenInput.value = '';
+        const selectedValue = hiddenInput.value;
+        if (!selectedValue) {
             hiddenInput.disabled = true;
+            return;
         }
+        hiddenInput.disabled = false;
+        const matchingOption = this.getAllOptions().find(option => option.dataset['value'] === selectedValue);
+        if (!matchingOption) {
+            return;
+        }
+        textInput.value = matchingOption.dataset['display'] ?? matchingOption.textContent?.trim() ?? '';
+        textInput.dataset['selectedValue'] = selectedValue;
     }
-    getTextInput() {
-        return this.getElement().querySelector('.autocomplete-text-input-box');
-    }
-    onTextInput(event, textInput) {
-        const minLength = Number(textInput.dataset['minimumLength']);
-        const { resourceEndpoint } = textInput.dataset;
-        const searchValue = event.target.value.toLowerCase();
-        if (resourceEndpoint) {
-            if (searchValue.length >= minLength) {
-                this.addItem(this.clearListAndRecreateTemplate(), '<i>Searching...</i>');
-                this.populateOptionsDynamically(resourceEndpoint, searchValue, textInput, () => this.clearListAndRecreateTemplate());
-            }
-            else {
-                this.clearListAndRecreateTemplate();
+    onInput() {
+        const textInput = this.getTextInput();
+        if (!textInput) {
+            return;
+        }
+        this.clearSelection();
+        const searchValue = textInput.value.trim().toLowerCase();
+        if (!searchValue) {
+            this.closeList();
+            return;
+        }
+        this.filterOptions(searchValue);
+    }
+    filterOptions(searchValue) {
+        const minimumLength = Number(this.getTextInput()?.dataset['minimumLength'] || 0);
+        let visibleCount = 0;
+        this.getAllOptions().forEach(option => {
+            const display = option.dataset['display']?.toLowerCase() ?? '';
+            const value = option.dataset['value']?.toLowerCase() ?? '';
+            const matches = searchValue.length === 0
+                ? true
+                : searchValue.length >= minimumLength && (display.includes(searchValue) || value.includes(searchValue));
+            option.classList.toggle('autocomplete-text-input-item-hide', !matches);
+            option.classList.remove('autocomplete-option-selected');
+            option.setAttribute('aria-selected', 'false');
+            if (matches) {
+                visibleCount += 1;
             }
+        });
+        this.activeIndex = -1;
+        if (visibleCount > 0) {
+            this.openList();
         }
         else {
-            this.getElement()
-                .querySelectorAll(this.listItemsSelector)
-                .forEach(item => {
-                if (searchValue.length >= minLength &&
-                    this.isMatchingStaticOptionNameOrDisplayPrefix(this.getInputListButton(item), searchValue, item)) {
-                    item.classList.remove('autocomplete-text-input-item-hide');
-                }
-                else {
-                    item.classList.add('autocomplete-text-input-item-hide');
-                }
-            });
+            this.closeList();
         }
-        if (searchValue.length === 0) {
-            const changeEvent = new Event('change');
-            textInput.dispatchEvent(changeEvent);
-        }
-    }
-    getInputListButton(item) {
-        return item.querySelector('.autocomplete-text-input-list-button');
     }
-    isMatchingStaticOptionNameOrDisplayPrefix(inputListButton, searchValue, item) {
-        return (this.isStaticOptionsNamePrefix(inputListButton?.dataset['staticOptionNameValue'], searchValue) ||
-            item.innerText.trim().toLowerCase().startsWith(searchValue));
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.moveNext();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.movePrevious();
+                break;
+            case 'Enter':
+                this.selectActiveOption(event);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.closeList();
+                break;
+        }
     }
-    isStaticOptionsNamePrefix(staticOptionNameValue, searchValue) {
-        return staticOptionNameValue && staticOptionNameValue.trim().toLowerCase().startsWith(searchValue);
+    moveNext() {
+        const options = this.getVisibleOptions();
+        if (!options.length) {
+            return;
+        }
+        const nextIndex = this.activeIndex < options.length - 1 ? this.activeIndex + 1 : 0;
+        this.highlightOption(nextIndex);
     }
-    async populateOptionsDynamically(resourceEndpoint, searchValue, textInput, templateProvider) {
-        try {
-            const response = await fetch(resourceEndpoint.replace('{prefix}', encodeURI(searchValue)));
-            const results = await response.json();
-            if (searchValue === textInput?.value.toLowerCase()) {
-                const template = templateProvider();
-                results.forEach((result) => {
-                    this.addItem(template, result, event => {
-                        this.onOptionClick(event, textInput, this.getElement());
-                    });
-                });
-            }
+    movePrevious() {
+        const options = this.getVisibleOptions();
+        if (!options.length) {
+            return;
         }
-        catch (error) {
-            this.addItem(templateProvider(), `Failed to retrieve results: ${error}`);
+        const previousIndex = this.activeIndex > 0 ? this.activeIndex - 1 : options.length - 1;
+        this.highlightOption(previousIndex);
+    }
+    highlightOption(index) {
+        const textInput = this.getTextInput();
+        const options = this.getVisibleOptions();
+        if (!textInput || !options.length) {
+            return;
         }
+        this.activeIndex = index;
+        options.forEach((option, optionIndex) => {
+            const selected = optionIndex === index;
+            option.classList.toggle('autocomplete-option-selected', selected);
+            option.setAttribute('aria-selected', String(selected));
+        });
+        const activeOption = options[index];
+        textInput.setAttribute('aria-activedescendant', activeOption.id);
+        activeOption.scrollIntoView({
+            block: 'nearest',
+        });
     }
-    onOptionClick(event, textInput, topLevelElement) {
+    selectActiveOption(event) {
+        const options = this.getVisibleOptions();
+        if (this.activeIndex < 0 || !options[this.activeIndex]) {
+            return;
+        }
         event.preventDefault();
-        const button = event.currentTarget?.closest('button');
+        this.selectOption(options[this.activeIndex]);
+    }
+    selectOption(option) {
+        const textInput = this.getTextInput();
         const hiddenInput = this.getHiddenInput();
-        const displayValue = button?.innerText.trim();
-        const actualValue = button?.dataset['staticOptionNameValue'] || '';
-        // UI Display Value
+        const display = option.dataset['display'] ?? option.textContent?.trim() ?? '';
+        const value = option.dataset['value'] ?? '';
         if (textInput) {
-            this.setValue(textInput, displayValue);
-            textInput.dataset['staticOptionNameValue'] = actualValue;
+            textInput.value = display;
+            textInput.dataset['selectedValue'] = value;
         }
-        // submission value
         if (hiddenInput) {
-            hiddenInput.value = actualValue;
+            hiddenInput.value = value;
             hiddenInput.disabled = false;
         }
-        topLevelElement.querySelectorAll('li').forEach(item => {
-            item.classList.add('autocomplete-text-input-item-hide');
-        });
+        this.closeList();
+        textInput?.dispatchEvent(new Event('change', {
+            bubbles: true,
+        }));
     }
-    setValue(textInput, displayValue) {
-        if (displayValue) {
-            textInput.value = displayValue;
-        }
-        textInput.focus();
-        textInput.dispatchEvent(new Event('change', { bubbles: true }));
+    openList() {
+        const textInput = this.getTextInput();
+        textInput?.setAttribute('aria-expanded', 'true');
+        this.getListbox()?.classList.remove('autocomplete-text-input-list--hidden');
     }
-    addItem(template, content, clickEvent) {
-        const item = template?.cloneNode(true);
-        const button = item?.querySelector('button');
-        if (button) {
-            button.innerHTML = content;
+    closeList() {
+        const textInput = this.getTextInput();
+        textInput?.setAttribute('aria-expanded', 'false');
+        textInput?.removeAttribute('aria-activedescendant');
+        this.activeIndex = -1;
+        this.getAllOptions().forEach(option => {
+            option.classList.add('autocomplete-text-input-item-hide');
+            option.classList.remove('autocomplete-option-selected');
+            option.setAttribute('aria-selected', 'false');
+        });
+        this.getListbox()?.classList.add('autocomplete-text-input-list--hidden');
+    }
+    clearSelection() {
+        const hiddenInput = this.getHiddenInput();
+        const textInput = this.getTextInput();
+        if (hiddenInput) {
+            hiddenInput.value = '';
+            hiddenInput.disabled = true;
         }
-        item.classList.remove('autocomplete-text-input-item-hide');
-        this.getElement().querySelector(this.listParentSelector)?.appendChild(item);
-        if (clickEvent) {
-            item.addEventListener('mousedown', (event) => {
-                clickEvent(event);
-            });
+        if (textInput) {
+            delete textInput.dataset['selectedValue'];
         }
     }
-    clearListAndRecreateTemplate() {
-        const template = this.getElement()
-            .querySelector(this.listItemsSelector)
-            ?.cloneNode(true);
-        template?.classList.add('autocomplete-text-input-item-hide');
-        this.getElement()
-            .querySelectorAll(this.listItemsSelector)
-            .forEach(e => e.remove());
-        if (template) {
-            this.getElement().querySelector(this.listParentSelector)?.append(template);
+    getListbox() {
+        const textInput = this.getTextInput();
+        if (!textInput) {
+            return null;
         }
-        return template;
-    }
-    getHiddenInput() {
-        return this.getElement().querySelector('[data-autocomplete-hidden]');
+        const listId = textInput.getAttribute('aria-controls');
+        return listId ? document.getElementById(listId) : null;
     }
 }