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

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