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

<div align="center"> <img height="108" width="116" src="https://legion.digitaltelkom.id/favicon.svg?v=4643a71fb65fa61a5f2b266b769ea7b1" /> <h1 align="center">Legion UI Kit - React Core</h1> </div>

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