@starasia/dropdown 2.0.1 → 2.0.2

package/dist/dropdown.es.js

@@ -12,17 +12,17 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
   --sa-dropdown-brand-subtle:  var(--sa-color-brand-50, #e6edf6);
   --sa-dropdown-brand-secondary: var(--sa-color-brand-200, #99b3db);
   --sa-dropdown-bg:            var(--sa-background-primary, #ffffff);
-  --sa-dropdown-bg-disabled:   rgba(242, 243, 242, 1);
+  --sa-dropdown-bg-disabled:   var(--sa-background-neutral, #f0f1f2);
   --sa-dropdown-border:        var(--sa-border, 1px);
-  --sa-dropdown-border-color:  rgba(120, 134, 127, 0.2);
+  --sa-dropdown-border-color:  var(--sa-color-gray-alpha-a20, #78867f33);
   --sa-dropdown-border-active: var(--sa-background-brand, #04254f);
   --sa-dropdown-border-search: var(--sa-color-gray-300, #dddee1);
   --sa-dropdown-border-error:  var(--sa-color-error-500, #ff4d6d);
   --sa-dropdown-color-disable: var(--sa-color-gray-300, #dddee1);
   --sa-dropdown-placeholder:   var(--sa-color-gray-400, #b7b9be);
-  --sa-dropdown-text-primary:  rgba(24, 26, 25, 1);
-  --sa-dropdown-text-secondary: rgba(120, 134, 127, 1);
-  --sa-dropdown-shadow-list:   rgba(0, 0, 0, 0.08);
+  --sa-dropdown-text-primary:  var(--sa-text-primary, #292a2e);
+  --sa-dropdown-text-secondary: var(--sa-text-subtle, #8c8f97);
+  --sa-dropdown-shadow-list:   var(--sa-color-black-alpha-a8, #00000014);
   --sa-dropdown-shadow-focus:  0px 0px 0px 2px var(--sa-color-brand-200, #99b3db);
   --sa-dropdown-radius:        var(--sa-radii-md, 0.5rem);
   --sa-dropdown-radius-lg:     var(--sa-radii-lg, 0.75rem);

package/dist/dropdown.umd.js

@@ -10,17 +10,17 @@
   --sa-dropdown-brand-subtle:  var(--sa-color-brand-50, #e6edf6);
   --sa-dropdown-brand-secondary: var(--sa-color-brand-200, #99b3db);
   --sa-dropdown-bg:            var(--sa-background-primary, #ffffff);
-  --sa-dropdown-bg-disabled:   rgba(242, 243, 242, 1);
+  --sa-dropdown-bg-disabled:   var(--sa-background-neutral, #f0f1f2);
   --sa-dropdown-border:        var(--sa-border, 1px);
-  --sa-dropdown-border-color:  rgba(120, 134, 127, 0.2);
+  --sa-dropdown-border-color:  var(--sa-color-gray-alpha-a20, #78867f33);
   --sa-dropdown-border-active: var(--sa-background-brand, #04254f);
   --sa-dropdown-border-search: var(--sa-color-gray-300, #dddee1);
   --sa-dropdown-border-error:  var(--sa-color-error-500, #ff4d6d);
   --sa-dropdown-color-disable: var(--sa-color-gray-300, #dddee1);
   --sa-dropdown-placeholder:   var(--sa-color-gray-400, #b7b9be);
-  --sa-dropdown-text-primary:  rgba(24, 26, 25, 1);
-  --sa-dropdown-text-secondary: rgba(120, 134, 127, 1);
-  --sa-dropdown-shadow-list:   rgba(0, 0, 0, 0.08);
+  --sa-dropdown-text-primary:  var(--sa-text-primary, #292a2e);
+  --sa-dropdown-text-secondary: var(--sa-text-subtle, #8c8f97);
+  --sa-dropdown-shadow-list:   var(--sa-color-black-alpha-a8, #00000014);
   --sa-dropdown-shadow-focus:  0px 0px 0px 2px var(--sa-color-brand-200, #99b3db);
   --sa-dropdown-radius:        var(--sa-radii-md, 0.5rem);
   --sa-dropdown-radius-lg:     var(--sa-radii-lg, 0.75rem);
@@ -311,4 +311,4 @@
   height: 100%;
   width: 100%;
 }
-`;function H(e){const[p,d]=t.useState(e),c=t.useRef(null),a=o=>{c.current&&!c.current.contains(o.target)&&d(!1)};return t.useEffect(()=>(document.addEventListener("click",a,!0),()=>{document.removeEventListener("click",a,!0)}),[]),{ref:c,isComponentVisible:p,setIsComponentVisible:d}}const V=({...e})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",...e,viewBox:"0 0 24 24",fill:"none",color:"var(--sa-color-gray-500, #8c8f97)",children:n.jsx("path",{d:"M4 9L12 17L20 9",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5})}),M=({...e})=>n.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",...e,viewBox:"0 0 20 20",fill:"none",children:[n.jsx("circle",{cx:"9.80547",cy:"9.8055",r:"7.49047",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"}),n.jsx("path",{d:"M15.0153 15.4043L17.9519 18.3333",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"})]}),P=({isChecked:e})=>n.jsxs("div",{className:"checkbox-wrapper-30",children:[n.jsxs("span",{className:"checkbox",children:[n.jsx("input",{type:"checkbox",style:{pointerEvents:"none"},checked:e}),n.jsx("svg",{children:n.jsx("use",{xlinkHref:"#checkbox-30",className:"checkbox"})})]}),n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",style:{display:"none"},children:n.jsx("symbol",{id:"checkbox-30",viewBox:"0 0 22 22",children:n.jsx("path",{fill:"none",stroke:"currentColor",d:"M5.5,11.3L9,14.8L20.2,3.3l0,0c-0.5-1-1.5-1.8-2.7-1.8h-13c-1.7,0-3,1.3-3,3v13c0,1.7,1.3,3,3,3h13 c1.7,0,3-1.3,3-3v-13c0-0.4-0.1-0.8-0.3-1.2"})})})]}),q=t.forwardRef(({positionDropdown:e,dropdownLists:p,isComponentVisible:d,searchAble:c,onSearch:a,value:o,handleChangeValue:v,multiSelect:l,searchValue:B,highlightedIndex:f},$)=>{const[z,N]=t.useState(0),k=t.useRef(null),g=t.useRef([]);return t.useEffect(()=>{if(k.current){const r=k.current.getBoundingClientRect();N(r.width)}},[k,d]),t.useEffect(()=>{var r;f>=0&&g.current[f]&&((r=g.current[f])==null||r.scrollIntoView({block:"nearest"}))},[f]),n.jsx(n.Fragment,{children:d?n.jsxs("div",{className:"starasia-input-dropdown-lists-container",onClick:r=>r.stopPropagation(),ref:$,children:[c?n.jsxs("div",{className:"starasia-input-dropdown-container-dropdown-search",style:{order:e=="bottom"?0:2,position:"sticky",top:0,bottom:0,zIndex:1},children:[n.jsx("div",{style:{display:"flex"},children:n.jsx(M,{strokeWidth:2,width:20})}),n.jsx("input",{onChange:r=>{a&&a(r.target.value)},value:B,autoFocus:!0,style:{width:"100%"}})]}):null,n.jsx("div",{className:`starasia-input-dropdwon-item-container ${l?"multi":""}`,ref:k,children:p.map((r,b)=>{const m=!!(o!=null&&o.find(y=>y.value===r.value));return n.jsxs("div",{className:`starasia-input-dropdwon-item ${m?"active":""} ${b===f?"highlight":""} ${r.disable?"starasia-input-dropdwon-item-disable":""}`,ref:y=>{g.current[b]=y},onClick:()=>v(r.label,r.value),children:[l?n.jsx("div",{style:{marginRight:"8px"},children:n.jsx(P,{isChecked:m})}):null,r.icon?n.jsx("div",{children:t.cloneElement(r.icon,{width:16})}):null,n.jsxs("div",{children:[n.jsx("p",{className:`starasia-input-dropdwon-item-text ${m?"active":null} ${r.disable?"starasia-input-dropdwon-item-disable":null}`,style:{textWrap:"nowrap",width:`${z-12}px`,overflow:"hidden",textOverflow:"ellipsis"},children:r.label}),r.description?n.jsx("p",{className:`starasia-input-dropdwon-item-text-description ${m?"active":null} ${r.disable?"starasia-input-dropdwon-item-disable":null}`,style:{textWrap:"nowrap",width:`${z-12}px`,overflow:"hidden",textOverflow:"ellipsis"},children:r.description}):null]})]},b)})})]}):null})}),T=({children:e,handleChangePosition:p})=>{const d=t.useRef(null);t.useEffect(()=>{var v;const a=()=>{if(d.current){let l=d.current.parentElement;for(;l&&!c(l);)l=l.parentElement;l&&p()}};let o=(v=d.current)==null?void 0:v.parentElement;for(;o&&!c(o);)o=o.parentElement;return o&&o.addEventListener("scroll",a),a(),()=>{o&&o.removeEventListener("scroll",a)}},[]);const c=a=>a&&(a.scrollHeight>a.clientHeight||a.scrollWidth>a.clientWidth);return n.jsx("div",{ref:d,children:e})},S="starasia-input-dropdown-styles";(e=>{if(!document.getElementById(S)){const p=document.createElement("style");p.id=S,p.textContent=e,document.head.appendChild(p)}})(O);const J=({dropdownLists:e,onChange:p,defaultValue:d,size:c="md",multiSelect:a,searchAble:o,iconLeft:v,placeholder:l,onSearch:B,error:f,onBlur:$,onFocus:z,disable:N,searchValue:k})=>{const g=t.useRef(),[r,b]=t.useState([]),[m,y]=t.useState(""),[u,D]=t.useState(-1),x=t.useRef(null),{isComponentVisible:C,ref:L,setIsComponentVisible:I}=H(!1),U=()=>{I(s=>!s)},W=(s,i)=>{if(!a)b([{label:s,value:i}]),p([{label:s,value:i}]),I(!1);else if(r==null?void 0:r.find(w=>w.value===i)){const w=[...r?r.filter(X=>X.value!==i):[]];b(w),p(w)}else{const w=[...r||[],{label:s,value:i}];b(w),p(w)}};t.useEffect(()=>{JSON.stringify(g.current)===JSON.stringify(d)||(g.current=d,b(g.current||[]))},[d]);const G=()=>r.length?a?r==null?void 0:r.map((s,i)=>n.jsxs("div",{className:"starasia-input-dropdown-preview-item",children:[n.jsx("p",{style:{minWidth:"max-content"},children:s==null?void 0:s.label},i),n.jsx(K,{onClick:()=>W(s.label,s.value)})]})):n.jsx("p",{style:{minWidth:"max-content"},children:r==null?void 0:r[0].label}):n.jsx("p",{className:"starasia-input-dropdown-placeholder",children:l}),E=()=>{if(L.current&&x.current){const s=window.innerHeight,i=L.current.getBoundingClientRect(),j=x.current.getBoundingClientRect(),w=i.bottom+j.height;x.current.style.left=`${i.left}px`,x.current.style.width=`${i.width}px`,w>=s-10?(x.current.style.top=`${i.top-j.height-5}px`,y("top")):(x.current.style.top=`${i.top+i.height}px`,y("bottom"))}};t.useEffect(()=>(window.addEventListener("scroll",E),window.addEventListener("resize",E),()=>{window.removeEventListener("scroll",E),window.removeEventListener("resize",E)}),[]),t.useEffect(()=>{E()},[C]),t.useEffect(()=>{C||D(-1)},[C]);const Q=s=>{if(!C){(s.key==="ArrowDown"||s.key==="Enter")&&(s.preventDefault(),I(!0));return}switch(s.key){case"ArrowDown":{s.preventDefault();const i=A(e,u,1);i!==-1&&D(i);break}case"ArrowUp":{s.preventDefault();const i=A(e,u,-1);i!==-1&&D(i);break}case"Enter":{s.preventDefault(),u>=0&&e[u]&&!e[u].disable&&W(e[u].label,e[u].value);break}case"Escape":{I(!1);break}}};return n.jsx(T,{handleChangePosition:E,children:n.jsxs("div",{className:`starasia-input-dropdown-container ${N?"disable":""} starasia-input-dropdown-size-${c} ${C?"active":""} ${f?"error":""}`,ref:L,onClick:U,onKeyDown:Q,tabIndex:0,onBlur:$,onFocus:z,children:[n.jsxs("div",{className:"starasia-input-dropdown-preview-container",children:[v?n.jsx(n.Fragment,{children:t.cloneElement(v,{width:F(c),color:"var(--sa-color-gray-500, #8c8f97)",style:{color:"var(--sa-color-gray-500, #8c8f97)"}})}):null,n.jsx("div",{className:"starasia-input-dropdown-container-preview-item",children:G()}),n.jsx(V,{strokeWidth:2,width:F(c),style:{color:"var(--sa-color-gray-500, #8c8f97)"}})]}),n.jsx(q,{dropdownLists:e,handleChangeValue:W,isComponentVisible:C,positionDropdown:m,searchAble:!!o,value:r,onSearch:B,ref:x,multiSelect:a,searchValue:k,highlightedIndex:u})]})})},A=(e,p,d)=>{const c=e.length;let a=p+d;for(;a>=0&&a<c;){if(!e[a].disable)return a;a+=d}if(d===1){for(let o=0;o<c;o++)if(!e[o].disable)return o}else for(let o=c-1;o>=0;o--)if(!e[o].disable)return o;return-1},F=e=>{if(e==="sm")return 16;if(e==="md")return 16;if(e==="lg")return 20},K=e=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",...e,children:n.jsx("path",{d:"M12 6L6 12M6.00001 6L12 12",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})});h.Dropdown=J,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
+`;function H(e){const[l,d]=t.useState(e),c=t.useRef(null),a=o=>{c.current&&!c.current.contains(o.target)&&d(!1)};return t.useEffect(()=>(document.addEventListener("click",a,!0),()=>{document.removeEventListener("click",a,!0)}),[]),{ref:c,isComponentVisible:l,setIsComponentVisible:d}}const V=({...e})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",...e,viewBox:"0 0 24 24",fill:"none",color:"var(--sa-color-gray-500, #8c8f97)",children:n.jsx("path",{d:"M4 9L12 17L20 9",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5})}),M=({...e})=>n.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",...e,viewBox:"0 0 20 20",fill:"none",children:[n.jsx("circle",{cx:"9.80547",cy:"9.8055",r:"7.49047",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"}),n.jsx("path",{d:"M15.0153 15.4043L17.9519 18.3333",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"})]}),P=({isChecked:e})=>n.jsxs("div",{className:"checkbox-wrapper-30",children:[n.jsxs("span",{className:"checkbox",children:[n.jsx("input",{type:"checkbox",style:{pointerEvents:"none"},checked:e}),n.jsx("svg",{children:n.jsx("use",{xlinkHref:"#checkbox-30",className:"checkbox"})})]}),n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",style:{display:"none"},children:n.jsx("symbol",{id:"checkbox-30",viewBox:"0 0 22 22",children:n.jsx("path",{fill:"none",stroke:"currentColor",d:"M5.5,11.3L9,14.8L20.2,3.3l0,0c-0.5-1-1.5-1.8-2.7-1.8h-13c-1.7,0-3,1.3-3,3v13c0,1.7,1.3,3,3,3h13 c1.7,0,3-1.3,3-3v-13c0-0.4-0.1-0.8-0.3-1.2"})})})]}),q=t.forwardRef(({positionDropdown:e,dropdownLists:l,isComponentVisible:d,searchAble:c,onSearch:a,value:o,handleChangeValue:u,multiSelect:p,searchValue:B,highlightedIndex:f},$)=>{const[z,N]=t.useState(0),k=t.useRef(null),g=t.useRef([]);return t.useEffect(()=>{if(k.current){const r=k.current.getBoundingClientRect();N(r.width)}},[k,d]),t.useEffect(()=>{var r;f>=0&&g.current[f]&&((r=g.current[f])==null||r.scrollIntoView({block:"nearest"}))},[f]),n.jsx(n.Fragment,{children:d?n.jsxs("div",{className:"starasia-input-dropdown-lists-container",onClick:r=>r.stopPropagation(),ref:$,children:[c?n.jsxs("div",{className:"starasia-input-dropdown-container-dropdown-search",style:{order:e=="bottom"?0:2,position:"sticky",top:0,bottom:0,zIndex:1},children:[n.jsx("div",{style:{display:"flex"},children:n.jsx(M,{strokeWidth:2,width:20})}),n.jsx("input",{onChange:r=>{a&&a(r.target.value)},value:B,autoFocus:!0,style:{width:"100%"}})]}):null,n.jsx("div",{className:`starasia-input-dropdwon-item-container ${p?"multi":""}`,ref:k,children:l.map((r,b)=>{const y=!!(o!=null&&o.find(m=>m.value===r.value));return n.jsxs("div",{className:`starasia-input-dropdwon-item ${y?"active":""} ${b===f?"highlight":""} ${r.disable?"starasia-input-dropdwon-item-disable":""}`,ref:m=>{g.current[b]=m},onClick:()=>u(r.label,r.value),children:[p?n.jsx("div",{style:{marginRight:"8px"},children:n.jsx(P,{isChecked:y})}):null,r.icon?n.jsx("div",{children:t.cloneElement(r.icon,{width:16})}):null,n.jsxs("div",{children:[n.jsx("p",{className:`starasia-input-dropdwon-item-text ${y?"active":null} ${r.disable?"starasia-input-dropdwon-item-disable":null}`,style:{textWrap:"nowrap",width:`${z-12}px`,overflow:"hidden",textOverflow:"ellipsis"},children:r.label}),r.description?n.jsx("p",{className:`starasia-input-dropdwon-item-text-description ${y?"active":null} ${r.disable?"starasia-input-dropdwon-item-disable":null}`,style:{textWrap:"nowrap",width:`${z-12}px`,overflow:"hidden",textOverflow:"ellipsis"},children:r.description}):null]})]},b)})})]}):null})}),T=({children:e,handleChangePosition:l})=>{const d=t.useRef(null);t.useEffect(()=>{var u;const a=()=>{if(d.current){let p=d.current.parentElement;for(;p&&!c(p);)p=p.parentElement;p&&l()}};let o=(u=d.current)==null?void 0:u.parentElement;for(;o&&!c(o);)o=o.parentElement;return o&&o.addEventListener("scroll",a),a(),()=>{o&&o.removeEventListener("scroll",a)}},[]);const c=a=>a&&(a.scrollHeight>a.clientHeight||a.scrollWidth>a.clientWidth);return n.jsx("div",{ref:d,children:e})},S="starasia-input-dropdown-styles";(e=>{if(!document.getElementById(S)){const l=document.createElement("style");l.id=S,l.textContent=e,document.head.appendChild(l)}})(O);const J=({dropdownLists:e,onChange:l,defaultValue:d,size:c="md",multiSelect:a,searchAble:o,iconLeft:u,placeholder:p,onSearch:B,error:f,onBlur:$,onFocus:z,disable:N,searchValue:k})=>{const g=t.useRef(),[r,b]=t.useState([]),[y,m]=t.useState(""),[v,D]=t.useState(-1),x=t.useRef(null),{isComponentVisible:C,ref:L,setIsComponentVisible:I}=H(!1),U=()=>{I(s=>!s)},W=(s,i)=>{if(!a)b([{label:s,value:i}]),l([{label:s,value:i}]),I(!1);else if(r==null?void 0:r.find(w=>w.value===i)){const w=[...r?r.filter(X=>X.value!==i):[]];b(w),l(w)}else{const w=[...r||[],{label:s,value:i}];b(w),l(w)}};t.useEffect(()=>{JSON.stringify(g.current)===JSON.stringify(d)||(g.current=d,b(g.current||[]))},[d]);const G=()=>r.length?a?r==null?void 0:r.map((s,i)=>n.jsxs("div",{className:"starasia-input-dropdown-preview-item",children:[n.jsx("p",{style:{minWidth:"max-content"},children:s==null?void 0:s.label},i),n.jsx(K,{onClick:()=>W(s.label,s.value)})]})):n.jsx("p",{style:{minWidth:"max-content"},children:r==null?void 0:r[0].label}):n.jsx("p",{className:"starasia-input-dropdown-placeholder",children:p}),E=()=>{if(L.current&&x.current){const s=window.innerHeight,i=L.current.getBoundingClientRect(),j=x.current.getBoundingClientRect(),w=i.bottom+j.height;x.current.style.left=`${i.left}px`,x.current.style.width=`${i.width}px`,w>=s-10?(x.current.style.top=`${i.top-j.height-5}px`,m("top")):(x.current.style.top=`${i.top+i.height}px`,m("bottom"))}};t.useEffect(()=>(window.addEventListener("scroll",E),window.addEventListener("resize",E),()=>{window.removeEventListener("scroll",E),window.removeEventListener("resize",E)}),[]),t.useEffect(()=>{E()},[C]),t.useEffect(()=>{C||D(-1)},[C]);const Q=s=>{if(!C){(s.key==="ArrowDown"||s.key==="Enter")&&(s.preventDefault(),I(!0));return}switch(s.key){case"ArrowDown":{s.preventDefault();const i=A(e,v,1);i!==-1&&D(i);break}case"ArrowUp":{s.preventDefault();const i=A(e,v,-1);i!==-1&&D(i);break}case"Enter":{s.preventDefault(),v>=0&&e[v]&&!e[v].disable&&W(e[v].label,e[v].value);break}case"Escape":{I(!1);break}}};return n.jsx(T,{handleChangePosition:E,children:n.jsxs("div",{className:`starasia-input-dropdown-container ${N?"disable":""} starasia-input-dropdown-size-${c} ${C?"active":""} ${f?"error":""}`,ref:L,onClick:U,onKeyDown:Q,tabIndex:0,onBlur:$,onFocus:z,children:[n.jsxs("div",{className:"starasia-input-dropdown-preview-container",children:[u?n.jsx(n.Fragment,{children:t.cloneElement(u,{width:F(c),color:"var(--sa-color-gray-500, #8c8f97)",style:{color:"var(--sa-color-gray-500, #8c8f97)"}})}):null,n.jsx("div",{className:"starasia-input-dropdown-container-preview-item",children:G()}),n.jsx(V,{strokeWidth:2,width:F(c),style:{color:"var(--sa-color-gray-500, #8c8f97)"}})]}),n.jsx(q,{dropdownLists:e,handleChangeValue:W,isComponentVisible:C,positionDropdown:y,searchAble:!!o,value:r,onSearch:B,ref:x,multiSelect:a,searchValue:k,highlightedIndex:v})]})})},A=(e,l,d)=>{const c=e.length;let a=l+d;for(;a>=0&&a<c;){if(!e[a].disable)return a;a+=d}if(d===1){for(let o=0;o<c;o++)if(!e[o].disable)return o}else for(let o=c-1;o>=0;o--)if(!e[o].disable)return o;return-1},F=e=>{if(e==="sm")return 16;if(e==="md")return 16;if(e==="lg")return 20},K=e=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",...e,children:n.jsx("path",{d:"M12 6L6 12M6.00001 6L12 12",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})});h.Dropdown=J,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starasia/dropdown",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "dropdown component for starasia UI",
   "author": "Prawito Hudoro",
   "main": "dist/dropdown.umd.js",
@@ -12,10 +12,6 @@
     "dist/*.map",
     "dist/*.css"
   ],
-  "scripts": {
-    "dev": "vite --config vite.config.ts --port 3000",
-    "build": "vite build --config vite.config.ts"
-  },
   "keywords": [],
   "license": "ISC",
   "type": "module",
@@ -37,5 +33,9 @@
     "react-dom": "^18.2.0",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19"
+  },
+  "scripts": {
+    "dev": "vite --config vite.config.ts --port 3000",
+    "build": "vite build --config vite.config.ts"
   }
-}
+}