@legion-ui-kit/react-core/dist/esm/components/Select/SelectOption.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,jsx as r}from"react/jsx-runtime";import{useRef as s,useEffect as a}from"react";import o from"classnames";import c from"./styles/SelectOption.module.scss.js";import l from"../Icon/index.js";import{isEmpty as n}from"../../helpers/common.js";import{SELECT_OPTION_DEFAULT_PROPS as t,SELECT_OPTION_ANIMATION_DURATION as i,SELECT_CLEAR_SEARCH_ID as m}from"./Select.constant.js";const p=p=>{const{activeOption:h,className:u,isOpen:d,onChangeSearch:f,onClearSearch:v,onClick:g,optionClassName:C,options:N,ref:y,searchClassName:w,searchPlaceholder:j,searchStyle:x,searchValue:S,searchable:_,size:b=t.size,style:k,...O}=p,z=s(null),A=y||z,I=o(c.legion_select_option,u,c[b],{[c.open]:d,[c.close]:!d}),T=o(c.search_wrapper,w),D=o(c.search_input);a(()=>{d&&A?.current&&A.current.scrollTo(0,0)},[d]);return e("div",{ref:A,className:I,style:{...k,animationDuration:`${i}ms`},...O,children:[_&&e("div",{className:T,style:x,children:[r("input",{tabIndex:-1,className:D,placeholder:j,value:S,onChange:e=>{f?.(e.currentTarget.value,e)}}),r("svg",{xmlns:"http://www.w3.org/2000/svg",children:r("rect",{height:"100%",width:"100%",fill:"none"})}),!n(S)&&r(l,{id:m,className:c.search_icon,icon:"close-circle",onClick:()=>{f?.(""),v?.("")}})]}),N.map((e,s)=>{const{value:a,label:l}=e,n=o(c.option,C,{[c.active]:Array.isArray(h)?h.includes(a):h===a});return r("div",{className:n,onClick:(t=e,()=>{g?.(t)}),children:l},s);var t})]})};export{p as default};
//# sourceMappingURL=SelectOption.js.map