@n8d/htwoo-core/dist/js/umd/htwoo.select.min.js

hTWOo is a Fluent Design Framework purely in HTML and CSS

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).htwoo=e.htwoo||{},e.htwoo.select={}))}(this,(function(e){"use strict";function t(){document.querySelectorAll(".hoo-optgroup").forEach((e=>{const t=e.querySelectorAll(".hoo-option"),o=Array.from(t).some((e=>"none"!==e.style.display));e.style.display=o?"":"none"}))}t();const o=document.querySelector(".hoo-select-dropdown");if(o){new MutationObserver((()=>{t()})).observe(o,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]})}e.ariaSelect=e=>{console.debug("ariaSelect",e);const t=e;console.log("csSelector",t);const o=t.querySelector("input");if(!o)return void console.error("Input element not found within select component");const n=t.querySelector("ul");if(!n)return void console.error("List element not found within select component");const s=n.querySelectorAll("li.hoo-option");s&&0!==s.length||console.warn("No options found within select component"),t.querySelectorAll("svg");const i=document.querySelector("#custom-select-status");i||console.warn("Status element #custom-select-status not found");const l=Array.from(s);let c="initial";function r(e){"Open"===e?(n.classList.remove("hidden-all"),t.setAttribute("aria-expanded","true")):(n.classList.add("hidden-all"),t.setAttribute("aria-expanded","false"))}function a(){return document.activeElement}function u(e,t){const n=l.filter((e=>""===e.style.display));if(0!==n.length)if("input"!==t)switch(e){case o:"forward"===t?n[0].focus():"back"===t&&n[n.length-1].focus();break;case s[0]:"forward"===t?n[1]?.focus():"back"===t&&o.focus();break;case s[s.length-1]:"forward"===t?n[0].focus():"back"===t&&n[n.length-2]?.focus();break;default:const e=a(),i=n.indexOf(e);if("forward"===t){const e=n[i+1];e&&e.focus()}else if("back"===t&&i>0){const e=n[i-1];e&&e.focus()}else o.focus()}else o.focus()}function d(){const e=o.value,t=l.filter((t=>t.innerText.toUpperCase().startsWith(e.toUpperCase())));var n;console.debug(t),s.forEach((e=>e.style.display="none")),t.forEach((e=>{e.style.display=""})),p("filtered"),n=t.length,i&&(i.textContent=n+" options available.")}function f(e){const t=e.dataset.value;t&&(o.value=t),u(document.activeElement,"input")}function p(e){c=e}t.setAttribute("role","combobox"),t.setAttribute("aria-haspopup","listbox"),t.setAttribute("aria-owns","custom-select-list"),o.setAttribute("aria-autocomplete","both"),o.setAttribute("aria-controls","custom-select-list"),n.setAttribute("role","listbox"),s.forEach((e=>{e.setAttribute("role","option"),e.setAttribute("tabindex","-1")})),i&&(i.textContent=s.length+" options available. Arrow down to browse or start typing to filter."),r("Shut"),t.addEventListener("click",(function(e){const t=a();switch(c){case"initial":r("Open"),p("opened");break;case"opened":t===o?(r("Shut"),p("initial")):"LI"===t.tagName&&(f(t),r("Shut"),p("closed"));break;case"filtered":"LI"===t.tagName&&(f(t),r("Shut"),p("closed"));break;case"closed":r("Open"),p("filtered")}})),t.addEventListener("keyup",(function(e){!function(e){const t=a();switch(e){case"Enter":"initial"===c?(r("Open"),p("opened")):"opened"===c&&"LI"===t.tagName?(f(t),r("Shut"),p("closed")):"opened"===c&&t===o?(r("Shut"),p("closed")):"filtered"===c&&"LI"===t.tagName?(f(t),r("Shut"),p("closed")):"filtered"===c&&t===o?(r("Open"),p("opened")):(r("Open"),p("filtered"));break;case"Escape":"opened"!==c&&"filtered"!==c||(r("Shut"),p("initial"));break;case"ArrowDown":"initial"===c||"closed"===c?(r("Open"),u(o,"forward"),p("opened")):(r("Open"),u(t,"forward"));break;case"ArrowUp":"initial"===c||"closed"===c?(r("Open"),u(o,"back"),p("opened")):u(t,"back");break;default:"initial"===c?(r("Open"),d(),p("filtered")):"opened"===c||"closed"===c?(d(),p("filtered")):d()}}(e.key)})),document.addEventListener("click",(function(e){e.target.closest(".hoo-select")||(r("Shut"),p("initial"))}))}}));