basecoat-css/dist/js/select.min.js

Tailwind CSS for Basecoat components

(()=>{const e=e=>{const t=e.querySelector(":scope > button"),i=t.querySelector(":scope > span"),a=e.querySelector(":scope > [data-popover]"),r=a.querySelector('[role="listbox"]'),n=e.querySelector(':scope > input[type="hidden"]'),s=e.querySelector('header input[type="text"]');if(!(t&&a&&r&&n)){const i=[];return t||i.push("trigger"),a||i.push("popover"),r||i.push("listbox"),n||i.push("input"),void console.error(`Select component initialisation failed. Missing element(s): ${i.join(", ")}`,e)}const o=Array.from(r.querySelectorAll('[role="option"]')),d=o.filter((e=>"true"!==e.getAttribute("aria-disabled")));let c=[...d],l=-1;const u=e=>{if(l>-1&&d[l]&&d[l].classList.remove("active"),l=e,l>-1){const e=d[l];e.classList.add("active"),e.id?t.setAttribute("aria-activedescendant",e.id):t.removeAttribute("aria-activedescendant")}else t.removeAttribute("aria-activedescendant")},v=()=>{const e=getComputedStyle(a);return parseFloat(e.transitionDuration)>0||parseFloat(e.transitionDelay)>0},p=(t,a=!0)=>{if(t&&(i.innerHTML=t.innerHTML,n.value=t.dataset.value,r.querySelector('[role="option"][aria-selected="true"]')?.removeAttribute("aria-selected"),t.setAttribute("aria-selected","true"),a)){const i=new CustomEvent("change",{detail:{value:t.dataset.value},bubbles:!0});e.dispatchEvent(i)}},f=(e=!0)=>{if("true"!==a.getAttribute("aria-hidden")){if(s){const e=()=>{s.value="",c=[...d],o.forEach((e=>e.setAttribute("aria-hidden","false")))};v()?a.addEventListener("transitionend",e,{once:!0}):e()}e&&t.focus(),a.setAttribute("aria-hidden","true"),t.setAttribute("aria-expanded","false"),u(-1)}},b=e=>{if(!e)return;const t=n.value,i=e.dataset.value;null!=i&&i!==t&&p(e),f()};if(s){const e=()=>{const e=s.value.trim().toLowerCase();u(-1),c=[],o.forEach((t=>{if(t.hasAttribute("data-force"))return t.setAttribute("aria-hidden","false"),void(d.includes(t)&&c.push(t));const i=(t.dataset.filter||t.textContent).trim().toLowerCase(),a=(t.dataset.keywords||"").toLowerCase().split(/[\s,]+/).filter(Boolean).some((t=>t.includes(e))),r=i.includes(e)||a;t.setAttribute("aria-hidden",String(!r)),r&&d.includes(t)&&c.push(t)}))};s.addEventListener("input",e)}let h=d.find((e=>e.dataset.value===n.value));h||(h=d.find((e=>void 0!==e.dataset.value))??d[0]),p(h,!1);const E=e=>{const i="false"===a.getAttribute("aria-hidden");if(!["ArrowDown","ArrowUp","Enter","Home","End","Escape"].includes(e.key))return;if(!i)return void("Enter"!==e.key&&"Escape"!==e.key&&(e.preventDefault(),t.click()));if(e.preventDefault(),"Escape"===e.key)return void f();if("Enter"===e.key)return void(l>-1&&b(d[l]));if(0===c.length)return;const r=l>-1?c.indexOf(d[l]):-1;let n=r;switch(e.key){case"ArrowDown":r<c.length-1&&(n=r+1);break;case"ArrowUp":r>0?n=r-1:-1===r&&(n=0);break;case"Home":n=0;break;case"End":n=c.length-1}if(n!==r){const e=c[n];u(d.indexOf(e)),e.scrollIntoView({block:"nearest",behavior:"smooth"})}};r.addEventListener("mousemove",(e=>{const t=e.target.closest('[role="option"]');if(t&&c.includes(t)){const e=d.indexOf(t);e!==l&&u(e)}})),r.addEventListener("mouseleave",(()=>{const e=r.querySelector('[role="option"][aria-selected="true"]');u(e?d.indexOf(e):-1)})),t.addEventListener("keydown",E),s&&s.addEventListener("keydown",E);t.addEventListener("click",(()=>{"true"===t.getAttribute("aria-expanded")?f():(()=>{document.dispatchEvent(new CustomEvent("basecoat:popover",{detail:{source:e}})),s&&(v()?a.addEventListener("transitionend",(()=>{s.focus()}),{once:!0}):s.focus()),a.setAttribute("aria-hidden","false"),t.setAttribute("aria-expanded","true");const i=r.querySelector('[role="option"][aria-selected="true"]');i&&(u(d.indexOf(i)),i.scrollIntoView({block:"nearest"}))})()})),r.addEventListener("click",(e=>{const t=e.target.closest('[role="option"]');t&&b(t)})),document.addEventListener("click",(t=>{e.contains(t.target)||f(!1)})),document.addEventListener("basecoat:popover",(t=>{t.detail.source!==e&&f(!1)})),a.setAttribute("aria-hidden","true"),e.selectByValue=e=>{const t=d.find((t=>t.dataset.value===e));b(t)},e.dataset.selectInitialized=!0,e.dispatchEvent(new CustomEvent("basecoat:initialized"))};window.basecoat&&window.basecoat.register("select","div.select:not([data-select-initialized])",e)})();