@legion-ui-kit/react-core/dist/cjs/components/Select/index.cjs

To install the package into your project:

"use client";
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("react-dom"),s=require("classnames"),a=require("./styles/styles.module.scss.cjs"),r=require("../Icon/index.cjs"),c=require("./SelectOption.cjs"),n=require("../../hooks/useMounted.cjs"),i=require("../../helpers/typography.cjs"),u=require("../../helpers/common.cjs"),o=require("../../helpers/typeChecker.cjs"),d=require("./Select.constant.cjs"),f=require("../Icon/Icon.constant.cjs");function p(e){return e&&e.__esModule?e:{default:e}}var h=p(s);exports.default=s=>{const{block:p,caption:m,captionClassName:E,captionStyle:_,disabled:T,hint:C,hintClassName:S,hintStyle:N,id:O,label:y,labelClassName:I,labelStyle:b,multiple:j,onChange:v,onChangeSearch:g,onClearSearch:A,optionClassName:L,options:x,optionsWrapperClassName:P,placeholder:R,ref:q,searchClassName:k,searchPlaceholder:w,searchStyle:D,searchValue:M,searchable:F,size:U=d.SELECT_DEFAULT_PROPS.size,status:B=d.SELECT_DEFAULT_PROPS.status,value:V,variant:z=d.SELECT_DEFAULT_PROPS.variant,...H}=s,W=t.useId(),$=O||`legion_select_${i.kebabCase(W)}`,K=z===d.SELECT_VARIANT.outline,Y=t.useRef(null),G=t.useRef(null),J=q||G,Q=t.useRef(null),X=n.default(),[Z,ee]=t.useState(!1),[te,le]=t.useState(!1),[se,ae]=t.useState(),[re,ce]=t.useState({top:0,left:0,width:0}),ne=h.default(a.default.legion_select,a.default[U],a.default[B],{[a.default.block]:p,[a.default.disabled]:T,[a.default[z]]:z,[a.default.open]:Z}),ie=h.default(a.default.select_label,I),ue=h.default(a.default.select_option,P),oe=h.default(a.default.select_caption,E),de=(e=>{switch(e){case d.SELECT_STATUS.error:return f.ICON_NAME["error-triangle"];case d.SELECT_STATUS.success:return f.ICON_NAME["success-circle"];default:return f.ICON_NAME["info-circle"]}})(B),fe=h.default(a.default.select_hint,S),pe=()=>{g?.(""),A?.()},he=(e=!Z)=>{T||ee(e)};return t.useEffect(()=>{const e=document.getElementById(d.SELECT_OPTION_ROOT_ID)??document.createElement("div");let t;return e.id=d.SELECT_OPTION_ROOT_ID,document.body.appendChild(e),t=j&&Array.isArray(V)?x.filter(e=>V.includes(e.value)).map(e=>e.label).join(", "):x.find(e=>e.value===V)?.label||"",ae(t),()=>{document.getElementById(d.SELECT_OPTION_ROOT_ID)&&document.body.removeChild(e)}},[]),t.useEffect(()=>{const e=e=>{const t=e.target;Y?.current&&!Y?.current.contains(t)&&Q?.current&&!Q?.current.contains(t)&&t.id!==d.SELECT_CLEAR_SEARCH_ID&&he(!1)},t=setTimeout(()=>{le(!1)},d.SELECT_OPTION_ANIMATION_DURATION+d.SELECT_OPTION_ANIMATION_DELAY);return Z?(pe(),le(!0),clearTimeout(t),document.addEventListener("click",e)):document.removeEventListener("click",e),()=>{clearTimeout(t),document.removeEventListener("click",e)}},[Z]),t.useEffect(()=>{const e=Y?.current.getBoundingClientRect();ce({top:e.top+e.height||0,left:e.left||0,width:e.width||0})},[Y.current?.offsetTop,Y.current?.offsetLeft,Y.current?.offsetWidth,Y.current?.offsetHeight]),e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:ne,children:[y&&e.jsx("label",{htmlFor:$,className:ie,style:b,children:y}),e.jsxs("div",{tabIndex:0,ref:Y,className:a.default.input_wrapper,onKeyDown:e=>{"Enter"===e.key?he():"Tab"===e.key&&Z&&(ee(!1),Y?.current.focus())},onClick:()=>{he()},children:[e.jsx("input",{ref:J,className:a.default.select_input,id:$,placeholder:R,defaultValue:se,disabled:T,readOnly:!0,...H}),K&&e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",children:e.jsx("rect",{height:"100%",width:"100%",fill:"none"})}),e.jsx("i",{className:a.default.input_icon})]}),m&&e.jsxs("p",{className:oe,style:_,children:[e.jsx(r.default,{className:a.default.caption_icon,icon:de}),m]}),C&&e.jsx("p",{className:fe,style:N,children:C})]}),X&&te&&l.createPortal(e.jsx(c.default,{ref:Q,className:ue,optionClassName:L,style:{...re,top:`calc(${re.top}px + var(--select-padding-modal-gap))`},isOpen:Z,activeOption:V,options:x,size:U,searchable:F,searchClassName:k,searchStyle:D,searchPlaceholder:w,searchValue:M,onClick:e=>{if(j&&Array.isArray(V)){let t=u.isEmpty(V)?[]:[...V],l=u.isEmpty(se)?[]:se.split(", ");t.includes(e.value)?(t=t.filter(t=>t!==e.value),l=l.filter(t=>t!==e.label)):(t=[...t,e.value],l=[...l,e.label]),ae(u.isEmpty(l)?"":l.join(", ")),o.isFunction(v)&&v(t)}else{he(!1);const{label:t,value:l}=e;ae(t),o.isFunction(v)&&v(l)}},onChangeSearch:e=>{g?.(e)},onClearSearch:pe}),document.getElementById(d.SELECT_OPTION_ROOT_ID)||document.body)]})};
//# sourceMappingURL=index.cjs.map