component-library-mustafa-akagunduz/dist/components/ComboBox.js

Air Command System projesi için geliştirilmiş React component kütüphanesi

import{jsxs as e,jsx as o}from"react/jsx-runtime";import{clsx as a}from"../node_modules/clsx/dist/clsx.js";import{useState as n,useRef as r,useEffect as c}from"react";import{FaChevronDown as l}from"../node_modules/react-icons/fa/index.js";const s=({options:s,value:t,onChange:i,placeholder:m="Select option...",disabled:b=!1,className:d})=>{const[u,p]=n(!1),[x,_]=n(-1),v=r(null),h=s.find(e=>e.value===t);c(()=>{const e=e=>{v.current&&!v.current.contains(e.target)&&(p(!1),_(-1))};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]);const f=e=>{null==i||i(e.value),p(!1),_(-1)};return e("div",{ref:v,className:a("combobox",d,{"combobox--open":u,"combobox--disabled":b}),children:[e("div",{className:"combobox__trigger",onClick:()=>{b||p(!u)},onKeyDown:e=>{if(!b)switch(e.key){case"Enter":case" ":e.preventDefault(),u&&x>=0?f(s[x]):p(!u);break;case"Escape":p(!1),_(-1);break;case"ArrowDown":e.preventDefault(),u?_(e=>e<s.length-1?e+1:0):p(!0);break;case"ArrowUp":e.preventDefault(),u&&_(e=>e>0?e-1:s.length-1)}},tabIndex:b?-1:0,role:"combobox","aria-expanded":u,"aria-haspopup":"listbox",children:[o("span",{className:"combobox__value",children:h?h.label:m}),o(l,{className:a("combobox__arrow",{"combobox__arrow--open":u})})]}),u&&o("div",{className:"combobox__dropdown",children:o("ul",{className:"combobox__list",role:"listbox",children:s.map((e,n)=>o("li",{className:a("combobox__option",{"combobox__option--selected":e.value===t,"combobox__option--hovered":n===x}),onClick:()=>f(e),onMouseEnter:()=>_(n),onMouseLeave:()=>_(-1),role:"option","aria-selected":e.value===t,children:e.label},e.value))})})]})};export{s as ComboBox};
//# sourceMappingURL=ComboBox.js.map