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

To install the package into your project:

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