kwant-ui 3.51.0-dev.12 → 3.51.0-dev.13

package/dist/index.es.js

@@ -1420,7 +1420,7 @@ import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import n,{css as
   position: absolute;
   bottom: ${e=>e.bottomOffset};
   right: ${e=>e.rightOffset};
-`,nr={xxs:{avatarSize:24,fontSize:10},xs:{avatarSize:32,fontSize:14},sm:{avatarSize:48,fontSize:18},md:{avatarSize:64,fontSize:22},lg:{avatarSize:88,fontSize:26},xl:{avatarSize:128,fontSize:30},xxl:{avatarSize:180,fontSize:60}},ar=r=>{const{src:n,alt:a,size:c="md",fontSize:i,backgroundColor:o="random",fontColor:s="white",objectFit:h="cover",avatarButton:v,avatarButtonBottomOffset:u=0,avatarButtonRightOffset:g=0,onClick:m}=r,[d,f]=p(null),[_,w]=p(!1),b=((e="")=>{const t=e?.trim()?.split(" ");if(t.length>1){const[e,...r]=t;return`${e[0]}${r?.pop()?.[0]}`.toUpperCase()}const r=t[0];return r[0]?.toUpperCase()||""})(a),y="random"!==o?o:function(e){let t=0;for(let r=0;r<e.length;r++)t=e.charCodeAt(r)+((t<<5)-t);let r="#";for(let e=0;e<3;e++)r+=("00"+(t>>8*e&255).toString(16)).substr(-2);return r}(a),x=c in nr?nr[c]:{avatarSize:c,fontSize:i},Z=()=>w(!0),O=()=>w(!1);return l((()=>{if(n){const e=new Image;e.src=n,e.onload=Z,e.onerror=O,f(e)}else O()}),[n]),t(Gt,{children:[e(Jt,{background:y,size:ke(x.avatarSize),onClick:()=>{m?.(r)},children:_?e(er,{src:d?.currentSrc,alt:a,objectFit:h,loading:"lazy"}):e(tr,{fontSize:ke(i||x.fontSize),fontColor:s,children:b})}),e(rr,{rightOffset:ke(g,"0px"),bottomOffset:ke(u,"0px"),children:v})]})},cr=r=>{const{label:n="",image:a="",selected:c,avatarProps:i}=r;return t(Kt,{selected:c,children:[e(ar,{src:a,alt:n,size:"xs",...i}),e(qt,{category:"body2",weight:"medium",color:A.grey.grey900,children:r.label}),c&&e(nt,{icon:"check",width:20,height:20,fill:A.green.green400})]})},ir=r=>{const{maxHeight:n=297.5,width:a=350,offsetTop:c="60px",offsetLeft:i,offsetRight:o,offsetBottom:s="0px",zIndex:h,opened:v,onChange:g,onDropdownVisibilityChange:m,data:d=[],onSelect:w,itemComponent:b,showSeparator:y=!0,collapseOnSelect:x=!0,inputLeftSection:Z,inputRightSection:O,searchPlaceholder:M="Search",searchable:E=!0,showScrollbar:P=!0,targetRef:j,onMouseEnter:V,onMouseLeave:C,onClose:A,searchAutofocus:L=!0,addable:z,selectInputValue:B,avatarProps:k,selectedValue:S,withInput:R,isDynamicOptionPosition:D=!1}=r,[I,T]=p(""),[N,F]=p([]),Q=u(null),$=u(null),Y=u(null),U=u([]),W=Vt(I,400),X=I?N:d,K=I&&0===N.length,q=X.some((e=>"image"in e)),{currentOffsets:G,isOpeningUpward:J}=(({isDynamicOptionPosition:e=!1,targetRef:t,opened:r,maxHeight:n=297.5,offsetTop:a="60px",offsetBottom:c="0px",searchable:i=!0,dataLength:o=0,itemHeight:s=50})=>{const[h,v]=p({offsetTop:a,offsetBottom:c,maxHeight:n}),u=f((()=>{if(!e||!t?.current||!r)return;const c=window.innerHeight,l=t.current.getBoundingClientRect(),h=c-l.bottom,p=l.top,u=Math.min(n+(i?60:0),o*s+(i?60:0)),g=Math.min(200,u);let m;m=l.top>c/2?{offsetTop:"",offsetBottom:l.height-10+"px",maxHeight:Math.min(n,p-0)}:h>=g+0?{offsetTop:a,offsetBottom:"",maxHeight:Math.min(n,h-0)}:{offsetTop:"",offsetBottom:`${l.height+10}px`,maxHeight:Math.min(n,p-0)},v(m)}),[e,t,r,n,a,i,o,s]);l((()=>{if(r&&u(),!r||!e)return;const t=()=>{u()},n=()=>{u()};return window.addEventListener("resize",t,{passive:!0}),window.addEventListener("scroll",n,{passive:!0}),()=>{window.removeEventListener("resize",t),window.removeEventListener("scroll",n)}}),[r,e,o,n,t,i,s,u]);const g=e?h:{offsetTop:a,offsetBottom:c,maxHeight:n};return{currentOffsets:g,isOpeningUpward:e&&g.offsetBottom&&!g.offsetTop,calculateDropdownPosition:u}})({isDynamicOptionPosition:D,targetRef:j,opened:v,maxHeight:n,offsetTop:c,offsetBottom:s,searchable:E,dataLength:X.length,itemHeight:50}),ee=e=>{T(e.target.value)},te=(e,t)=>r=>{r?.preventDefault(),r?.stopPropagation(),w?.(e,t),x&&A?.()},re=(e,t)=>r=>{"Enter"===r.key&&te(e,t)(r)},ne=(e,t)=>{const r={onKeyDown:re(e,t)};return E||R?{...r,onMouseDown:te(e,t)}:{...r,onClick:te(e,t)}};return l((()=>{const e=I.replace(/[.*+\-?^${}()|[\]\\]/g,"\\$&");const t=new RegExp(e,"ig"),r=d?.filter((({label:e,value:r})=>e?.match(t)||r?.match(t)));F(r)}),[W,d]),l((()=>{g?.(v),m?.(),T(""),v&&E&&$.current&&setTimeout((()=>$.current?.focus()),10)}),[v]),e(Nt,{opened:v,onClose:A,width:ke(a),offsetTop:G.offsetTop,offsetLeft:i,offsetRight:o,offsetBottom:G.offsetBottom,zIndex:h,targetRef:j,onMouseEnter:V,onMouseLeave:C,children:t(Ft,{expandedHeight:G.maxHeight,children:[E&&!J&&e(Qt,{children:e(at,{ref:$,placeholder:M,value:I,onChange:ee,leftSection:Z,rightSection:O,autoFocus:L})}),K?e(Wt,{children:e(Oe,{category:"body1",children:"Sorry, no results were found matching your search criteria."})}):t($t,{className:"select_item_container",separator:y,showScrollbar:P,ref:Q,children:[e(H,{viewportRef:Q,items:X,itemMargin:10,itemSize:X.length,overscan:6,ref:Y,children:(t,r)=>{if(t?.isSelected)return null;const n=e=>{U.current[r]=e};return b?e(Ut,{isSelected:t?.isSelected,ref:n,...ne(t,r),children:_(b,{...t,label:t.label,value:t.value,index:r,key:`${t.label}${t.value}`})},`${t.label}${t.value}+${r}`):q?e(Ut,{ref:n,...ne(t,r),children:e(cr,{...t,avatarProps:k,selected:t.value===S})},`${t.label}${t.value}+${r}`):e(Yt,{ref:n,...ne(t,r),role:"button",isSelected:t?.isSelected,children:t.label},`${t.label}${t.value}+${r}`)}}),z&&0===X.length&&e(Yt,{...E||R?{onMouseDown:te({label:B,value:null},0),onKeyDown:re({label:B,value:null},0)}:{onClick:te({label:B,value:null},0),onKeyDown:re({label:B,value:null},0)},role:"button",children:t(Xt,{children:[e(Oe,{category:"body1",weight:"semiBold",children:"Add:"}),t(Oe,{children:[" ",B]})]})})]}),E&&J&&e(Qt,{children:e(at,{ref:$,placeholder:M,value:I,onChange:ee,leftSection:Z,rightSection:O,autoFocus:L})})]})})},or=n.div`
+`,nr={xxs:{avatarSize:24,fontSize:10},xs:{avatarSize:32,fontSize:14},sm:{avatarSize:48,fontSize:18},md:{avatarSize:64,fontSize:22},lg:{avatarSize:88,fontSize:26},xl:{avatarSize:128,fontSize:30},xxl:{avatarSize:180,fontSize:60}},ar=r=>{const{src:n,alt:a,size:c="md",fontSize:i,backgroundColor:o="random",fontColor:s="white",objectFit:h="cover",avatarButton:v,avatarButtonBottomOffset:u=0,avatarButtonRightOffset:g=0,onClick:m}=r,[d,f]=p(null),[_,w]=p(!1),b=((e="")=>{const t=e?.trim()?.split(" ");if(t.length>1){const[e,...r]=t;return`${e[0]}${r?.pop()?.[0]}`.toUpperCase()}const r=t[0];return r[0]?.toUpperCase()||""})(a),y="random"!==o?o:function(e){let t=0;for(let r=0;r<e.length;r++)t=e.charCodeAt(r)+((t<<5)-t);let r="#";for(let e=0;e<3;e++)r+=("00"+(t>>8*e&255).toString(16)).substr(-2);return r}(a),x=c in nr?nr[c]:{avatarSize:c,fontSize:i},Z=()=>w(!0),O=()=>w(!1);return l((()=>{if(n){const e=new Image;e.src=n,e.onload=Z,e.onerror=O,f(e)}else O()}),[n]),t(Gt,{children:[e(Jt,{background:y,size:ke(x.avatarSize),onClick:()=>{m?.(r)},children:_?e(er,{src:d?.currentSrc,alt:a,objectFit:h,loading:"lazy"}):e(tr,{fontSize:ke(i||x.fontSize),fontColor:s,children:b})}),e(rr,{rightOffset:ke(g,"0px"),bottomOffset:ke(u,"0px"),children:v})]})},cr=r=>{const{label:n="",image:a="",selected:c,avatarProps:i}=r;return t(Kt,{selected:c,children:[e(ar,{src:a,alt:n,size:"xs",...i}),e(qt,{category:"body2",weight:"medium",color:A.grey.grey900,children:r.label}),c&&e(nt,{icon:"check",width:20,height:20,fill:A.green.green400})]})},ir=r=>{const{maxHeight:n=297.5,width:a=350,offsetTop:c="60px",offsetLeft:i,offsetRight:o,offsetBottom:s="0px",zIndex:h,opened:v,onChange:g,onDropdownVisibilityChange:m,data:d=[],onSelect:w,itemComponent:b,showSeparator:y=!0,collapseOnSelect:x=!0,inputLeftSection:Z,inputRightSection:O,searchPlaceholder:M="Search",searchable:E=!0,showScrollbar:P=!0,targetRef:j,onMouseEnter:V,onMouseLeave:C,onClose:A,searchAutofocus:L=!0,addable:z,selectInputValue:B,avatarProps:k,selectedValue:S,withInput:R,isDynamicOptionPosition:D=!1}=r,[I,T]=p(""),[N,F]=p([]),Q=u(null),$=u(null),Y=u(null),U=u([]),W=Vt(I,400),X=I?N:d,K=I&&0===N.length||0===d.length&&!z,q=X.some((e=>"image"in e)),{currentOffsets:G,isOpeningUpward:J}=(({isDynamicOptionPosition:e=!1,targetRef:t,opened:r,maxHeight:n=297.5,offsetTop:a="60px",offsetBottom:c="0px",searchable:i=!0,dataLength:o=0,itemHeight:s=50})=>{const[h,v]=p({offsetTop:a,offsetBottom:c,maxHeight:n}),u=f((()=>{if(!e||!t?.current||!r)return;const c=window.innerHeight,l=t.current.getBoundingClientRect(),h=c-l.bottom,p=l.top,u=Math.min(n+(i?60:0),o*s+(i?60:0)),g=Math.min(200,u);let m;m=l.top>c/2?{offsetTop:"",offsetBottom:l.height-10+"px",maxHeight:Math.min(n,p-0)}:h>=g+0?{offsetTop:a,offsetBottom:"",maxHeight:Math.min(n,h-0)}:{offsetTop:"",offsetBottom:`${l.height+10}px`,maxHeight:Math.min(n,p-0)},v(m)}),[e,t,r,n,a,i,o,s]);l((()=>{if(r&&u(),!r||!e)return;const t=()=>{u()},n=()=>{u()};return window.addEventListener("resize",t,{passive:!0}),window.addEventListener("scroll",n,{passive:!0}),()=>{window.removeEventListener("resize",t),window.removeEventListener("scroll",n)}}),[r,e,o,n,t,i,s,u]);const g=e?h:{offsetTop:a,offsetBottom:c,maxHeight:n};return{currentOffsets:g,isOpeningUpward:e&&g.offsetBottom&&!g.offsetTop,calculateDropdownPosition:u}})({isDynamicOptionPosition:D,targetRef:j,opened:v,maxHeight:n,offsetTop:c,offsetBottom:s,searchable:E,dataLength:X.length,itemHeight:50}),ee=e=>{T(e.target.value)},te=(e,t)=>r=>{r?.preventDefault(),r?.stopPropagation(),w?.(e,t),x&&A?.()},re=(e,t)=>r=>{"Enter"===r.key&&te(e,t)(r)},ne=(e,t)=>{const r={onKeyDown:re(e,t)};return E||R?{...r,onMouseDown:te(e,t)}:{...r,onClick:te(e,t)}};return l((()=>{const e=I.replace(/[.*+\-?^${}()|[\]\\]/g,"\\$&");const t=new RegExp(e,"ig"),r=d?.filter((({label:e,value:r})=>e?.match(t)||r?.match(t)));F(r)}),[W,d]),l((()=>{g?.(v),m?.(),T(""),v&&E&&$.current&&setTimeout((()=>$.current?.focus()),10)}),[v]),e(Nt,{opened:v,onClose:A,width:ke(a),offsetTop:G.offsetTop,offsetLeft:i,offsetRight:o,offsetBottom:G.offsetBottom,zIndex:h,targetRef:j,onMouseEnter:V,onMouseLeave:C,children:t(Ft,{expandedHeight:G.maxHeight,children:[E&&!J&&e(Qt,{children:e(at,{ref:$,placeholder:M,value:I,onChange:ee,leftSection:Z,rightSection:O,autoFocus:L})}),K?e(Wt,{children:e(Oe,{category:"body1",children:"Sorry, no results were found matching your search criteria."})}):t($t,{className:"select_item_container",separator:y,showScrollbar:P,ref:Q,children:[e(H,{viewportRef:Q,items:X,itemMargin:10,itemSize:X.length,overscan:6,ref:Y,children:(t,r)=>{if(t?.isSelected)return null;const n=e=>{U.current[r]=e};return b?e(Ut,{isSelected:t?.isSelected,ref:n,...ne(t,r),children:_(b,{...t,label:t.label,value:t.value,index:r,key:`${t.label}${t.value}`})},`${t.label}${t.value}+${r}`):q?e(Ut,{ref:n,...ne(t,r),children:e(cr,{...t,avatarProps:k,selected:t.value===S})},`${t.label}${t.value}+${r}`):e(Yt,{ref:n,...ne(t,r),role:"button",isSelected:t?.isSelected,children:t.label},`${t.label}${t.value}+${r}`)}}),z&&0===X.length&&e(Yt,{...E||R?{onMouseDown:te({label:B,value:null},0),onKeyDown:re({label:B,value:null},0)}:{onClick:te({label:B,value:null},0),onKeyDown:re({label:B,value:null},0)},role:"button",children:t(Xt,{children:[e(Oe,{category:"body1",weight:"semiBold",children:"Add:"}),t(Oe,{children:[" ",B]})]})})]}),E&&J&&e(Qt,{children:e(at,{ref:$,placeholder:M,value:I,onChange:ee,leftSection:Z,rightSection:O,autoFocus:L})})]})})},or=n.div`
   position: relative;
   pointer-events: ${e=>e.disabled?"none":"auto"};
 `,sr=n.div`

package/dist/index.js

@@ -1420,7 +1420,7 @@
   position: absolute;
   bottom: ${e=>e.bottomOffset};
   right: ${e=>e.rightOffset};
-`,Pt={xxs:{avatarSize:24,fontSize:10},xs:{avatarSize:32,fontSize:14},sm:{avatarSize:48,fontSize:18},md:{avatarSize:64,fontSize:22},lg:{avatarSize:88,fontSize:26},xl:{avatarSize:128,fontSize:30},xxl:{avatarSize:180,fontSize:60}},jt=t=>{const{src:n,alt:a,size:c="md",fontSize:i,backgroundColor:o="random",fontColor:s="white",objectFit:l="cover",avatarButton:h,avatarButtonBottomOffset:v=0,avatarButtonRightOffset:p=0,onClick:u}=t,[g,m]=r.useState(null),[d,f]=r.useState(!1),_=((e="")=>{const t=e?.trim()?.split(" ");if(t.length>1){const[e,...r]=t;return`${e[0]}${r?.pop()?.[0]}`.toUpperCase()}const r=t[0];return r[0]?.toUpperCase()||""})(a),w="random"!==o?o:function(e){let t=0;for(let r=0;r<e.length;r++)t=e.charCodeAt(r)+((t<<5)-t);let r="#";for(let e=0;e<3;e++)r+=("00"+(t>>8*e&255).toString(16)).substr(-2);return r}(a),b=c in Pt?Pt[c]:{avatarSize:c,fontSize:i},y=()=>f(!0),x=()=>f(!1);return r.useEffect((()=>{if(n){const e=new Image;e.src=n,e.onload=y,e.onerror=x,m(e)}else x()}),[n]),e.jsxs(Zt,{children:[e.jsx(Ot,{background:w,size:ue(b.avatarSize),onClick:()=>{u?.(t)},children:d?e.jsx(Mt,{src:g?.currentSrc,alt:a,objectFit:l,loading:"lazy"}):e.jsx(Et,{fontSize:ue(i||b.fontSize),fontColor:s,children:_})}),e.jsx(Ht,{rightOffset:ue(p,"0px"),bottomOffset:ue(v,"0px"),children:h})]})},Vt=t=>{const{label:r="",image:n="",selected:a,avatarProps:c}=t;return e.jsxs(yt,{selected:a,children:[e.jsx(jt,{src:n,alt:r,size:"xs",...c}),e.jsx(xt,{category:"body2",weight:"medium",color:v.grey.grey900,children:t.label}),a&&e.jsx(Le,{icon:"check",width:20,height:20,fill:v.green.green400})]})},Ct=t=>{const{maxHeight:n=297.5,width:c=350,offsetTop:i="60px",offsetLeft:o,offsetRight:s,offsetBottom:l="0px",zIndex:h,opened:v,onChange:p,onDropdownVisibilityChange:u,data:g=[],onSelect:m,itemComponent:d,showSeparator:f=!0,collapseOnSelect:_=!0,inputLeftSection:w,inputRightSection:b,searchPlaceholder:y="Search",searchable:x=!0,showScrollbar:Z=!0,targetRef:O,onMouseEnter:M,onMouseLeave:E,onClose:H,searchAutofocus:P=!0,addable:j,selectInputValue:V,avatarProps:C,selectedValue:A,withInput:L,isDynamicOptionPosition:z=!1}=t,[B,k]=r.useState(""),[S,R]=r.useState([]),D=r.useRef(null),I=r.useRef(null),T=r.useRef(null),N=r.useRef([]),F=rt(B,400),Q=B?S:g,$=B&&0===S.length,Y=Q.some((e=>"image"in e)),{currentOffsets:U,isOpeningUpward:W}=(({isDynamicOptionPosition:e=!1,targetRef:t,opened:n,maxHeight:a=297.5,offsetTop:c="60px",offsetBottom:i="0px",searchable:o=!0,dataLength:s=0,itemHeight:l=50})=>{const[h,v]=r.useState({offsetTop:c,offsetBottom:i,maxHeight:a}),p=r.useCallback((()=>{if(!e||!t?.current||!n)return;const r=window.innerHeight,i=t.current.getBoundingClientRect(),h=r-i.bottom,p=i.top,u=Math.min(a+(o?60:0),s*l+(o?60:0)),g=Math.min(200,u);let m;m=i.top>r/2?{offsetTop:"",offsetBottom:i.height-10+"px",maxHeight:Math.min(a,p-0)}:h>=g+0?{offsetTop:c,offsetBottom:"",maxHeight:Math.min(a,h-0)}:{offsetTop:"",offsetBottom:`${i.height+10}px`,maxHeight:Math.min(a,p-0)},v(m)}),[e,t,n,a,c,o,s,l]);r.useEffect((()=>{if(n&&p(),!n||!e)return;const t=()=>{p()},r=()=>{p()};return window.addEventListener("resize",t,{passive:!0}),window.addEventListener("scroll",r,{passive:!0}),()=>{window.removeEventListener("resize",t),window.removeEventListener("scroll",r)}}),[n,e,s,a,t,o,l,p]);const u=e?h:{offsetTop:c,offsetBottom:i,maxHeight:a};return{currentOffsets:u,isOpeningUpward:e&&u.offsetBottom&&!u.offsetTop,calculateDropdownPosition:p}})({isDynamicOptionPosition:z,targetRef:O,opened:v,maxHeight:n,offsetTop:i,offsetBottom:l,searchable:x,dataLength:Q.length,itemHeight:50}),X=e=>{k(e.target.value)},K=(e,t)=>r=>{r?.preventDefault(),r?.stopPropagation(),m?.(e,t),_&&H?.()},q=(e,t)=>r=>{"Enter"===r.key&&K(e,t)(r)},G=(e,t)=>{const r={onKeyDown:q(e,t)};return x||L?{...r,onMouseDown:K(e,t)}:{...r,onClick:K(e,t)}};return r.useEffect((()=>{const e=B.replace(/[.*+\-?^${}()|[\]\\]/g,"\\$&");const t=new RegExp(e,"ig"),r=g?.filter((({label:e,value:r})=>e?.match(t)||r?.match(t)));R(r)}),[F,g]),r.useEffect((()=>{p?.(v),u?.(),k(""),v&&x&&I.current&&setTimeout((()=>I.current?.focus()),10)}),[v]),e.jsx(ut,{opened:v,onClose:H,width:ue(c),offsetTop:U.offsetTop,offsetLeft:o,offsetRight:s,offsetBottom:U.offsetBottom,zIndex:h,targetRef:O,onMouseEnter:M,onMouseLeave:E,children:e.jsxs(gt,{expandedHeight:U.maxHeight,children:[x&&!W&&e.jsx(mt,{children:e.jsx(ze,{ref:I,placeholder:y,value:B,onChange:X,leftSection:w,rightSection:b,autoFocus:P})}),$?e.jsx(wt,{children:e.jsx(re,{category:"body1",children:"Sorry, no results were found matching your search criteria."})}):e.jsxs(dt,{className:"select_item_container",separator:f,showScrollbar:Z,ref:D,children:[e.jsx(a.ViewportList,{viewportRef:D,items:Q,itemMargin:10,itemSize:Q.length,overscan:6,ref:T,children:(t,n)=>{if(t?.isSelected)return null;const a=e=>{N.current[n]=e};return d?e.jsx(_t,{isSelected:t?.isSelected,ref:a,...G(t,n),children:r.createElement(d,{...t,label:t.label,value:t.value,index:n,key:`${t.label}${t.value}`})},`${t.label}${t.value}+${n}`):Y?e.jsx(_t,{ref:a,...G(t,n),children:e.jsx(Vt,{...t,avatarProps:C,selected:t.value===A})},`${t.label}${t.value}+${n}`):e.jsx(ft,{ref:a,...G(t,n),role:"button",isSelected:t?.isSelected,children:t.label},`${t.label}${t.value}+${n}`)}}),j&&0===Q.length&&e.jsx(ft,{...x||L?{onMouseDown:K({label:V,value:null},0),onKeyDown:q({label:V,value:null},0)}:{onClick:K({label:V,value:null},0),onKeyDown:q({label:V,value:null},0)},role:"button",children:e.jsxs(bt,{children:[e.jsx(re,{category:"body1",weight:"semiBold",children:"Add:"}),e.jsxs(re,{children:[" ",V]})]})})]}),x&&W&&e.jsx(mt,{children:e.jsx(ze,{ref:I,placeholder:y,value:B,onChange:X,leftSection:w,rightSection:b,autoFocus:P})})]})})},At=t.div`
+`,Pt={xxs:{avatarSize:24,fontSize:10},xs:{avatarSize:32,fontSize:14},sm:{avatarSize:48,fontSize:18},md:{avatarSize:64,fontSize:22},lg:{avatarSize:88,fontSize:26},xl:{avatarSize:128,fontSize:30},xxl:{avatarSize:180,fontSize:60}},jt=t=>{const{src:n,alt:a,size:c="md",fontSize:i,backgroundColor:o="random",fontColor:s="white",objectFit:l="cover",avatarButton:h,avatarButtonBottomOffset:v=0,avatarButtonRightOffset:p=0,onClick:u}=t,[g,m]=r.useState(null),[d,f]=r.useState(!1),_=((e="")=>{const t=e?.trim()?.split(" ");if(t.length>1){const[e,...r]=t;return`${e[0]}${r?.pop()?.[0]}`.toUpperCase()}const r=t[0];return r[0]?.toUpperCase()||""})(a),w="random"!==o?o:function(e){let t=0;for(let r=0;r<e.length;r++)t=e.charCodeAt(r)+((t<<5)-t);let r="#";for(let e=0;e<3;e++)r+=("00"+(t>>8*e&255).toString(16)).substr(-2);return r}(a),b=c in Pt?Pt[c]:{avatarSize:c,fontSize:i},y=()=>f(!0),x=()=>f(!1);return r.useEffect((()=>{if(n){const e=new Image;e.src=n,e.onload=y,e.onerror=x,m(e)}else x()}),[n]),e.jsxs(Zt,{children:[e.jsx(Ot,{background:w,size:ue(b.avatarSize),onClick:()=>{u?.(t)},children:d?e.jsx(Mt,{src:g?.currentSrc,alt:a,objectFit:l,loading:"lazy"}):e.jsx(Et,{fontSize:ue(i||b.fontSize),fontColor:s,children:_})}),e.jsx(Ht,{rightOffset:ue(p,"0px"),bottomOffset:ue(v,"0px"),children:h})]})},Vt=t=>{const{label:r="",image:n="",selected:a,avatarProps:c}=t;return e.jsxs(yt,{selected:a,children:[e.jsx(jt,{src:n,alt:r,size:"xs",...c}),e.jsx(xt,{category:"body2",weight:"medium",color:v.grey.grey900,children:t.label}),a&&e.jsx(Le,{icon:"check",width:20,height:20,fill:v.green.green400})]})},Ct=t=>{const{maxHeight:n=297.5,width:c=350,offsetTop:i="60px",offsetLeft:o,offsetRight:s,offsetBottom:l="0px",zIndex:h,opened:v,onChange:p,onDropdownVisibilityChange:u,data:g=[],onSelect:m,itemComponent:d,showSeparator:f=!0,collapseOnSelect:_=!0,inputLeftSection:w,inputRightSection:b,searchPlaceholder:y="Search",searchable:x=!0,showScrollbar:Z=!0,targetRef:O,onMouseEnter:M,onMouseLeave:E,onClose:H,searchAutofocus:P=!0,addable:j,selectInputValue:V,avatarProps:C,selectedValue:A,withInput:L,isDynamicOptionPosition:z=!1}=t,[B,k]=r.useState(""),[S,R]=r.useState([]),D=r.useRef(null),I=r.useRef(null),T=r.useRef(null),N=r.useRef([]),F=rt(B,400),Q=B?S:g,$=B&&0===S.length||0===g.length&&!j,Y=Q.some((e=>"image"in e)),{currentOffsets:U,isOpeningUpward:W}=(({isDynamicOptionPosition:e=!1,targetRef:t,opened:n,maxHeight:a=297.5,offsetTop:c="60px",offsetBottom:i="0px",searchable:o=!0,dataLength:s=0,itemHeight:l=50})=>{const[h,v]=r.useState({offsetTop:c,offsetBottom:i,maxHeight:a}),p=r.useCallback((()=>{if(!e||!t?.current||!n)return;const r=window.innerHeight,i=t.current.getBoundingClientRect(),h=r-i.bottom,p=i.top,u=Math.min(a+(o?60:0),s*l+(o?60:0)),g=Math.min(200,u);let m;m=i.top>r/2?{offsetTop:"",offsetBottom:i.height-10+"px",maxHeight:Math.min(a,p-0)}:h>=g+0?{offsetTop:c,offsetBottom:"",maxHeight:Math.min(a,h-0)}:{offsetTop:"",offsetBottom:`${i.height+10}px`,maxHeight:Math.min(a,p-0)},v(m)}),[e,t,n,a,c,o,s,l]);r.useEffect((()=>{if(n&&p(),!n||!e)return;const t=()=>{p()},r=()=>{p()};return window.addEventListener("resize",t,{passive:!0}),window.addEventListener("scroll",r,{passive:!0}),()=>{window.removeEventListener("resize",t),window.removeEventListener("scroll",r)}}),[n,e,s,a,t,o,l,p]);const u=e?h:{offsetTop:c,offsetBottom:i,maxHeight:a};return{currentOffsets:u,isOpeningUpward:e&&u.offsetBottom&&!u.offsetTop,calculateDropdownPosition:p}})({isDynamicOptionPosition:z,targetRef:O,opened:v,maxHeight:n,offsetTop:i,offsetBottom:l,searchable:x,dataLength:Q.length,itemHeight:50}),X=e=>{k(e.target.value)},K=(e,t)=>r=>{r?.preventDefault(),r?.stopPropagation(),m?.(e,t),_&&H?.()},q=(e,t)=>r=>{"Enter"===r.key&&K(e,t)(r)},G=(e,t)=>{const r={onKeyDown:q(e,t)};return x||L?{...r,onMouseDown:K(e,t)}:{...r,onClick:K(e,t)}};return r.useEffect((()=>{const e=B.replace(/[.*+\-?^${}()|[\]\\]/g,"\\$&");const t=new RegExp(e,"ig"),r=g?.filter((({label:e,value:r})=>e?.match(t)||r?.match(t)));R(r)}),[F,g]),r.useEffect((()=>{p?.(v),u?.(),k(""),v&&x&&I.current&&setTimeout((()=>I.current?.focus()),10)}),[v]),e.jsx(ut,{opened:v,onClose:H,width:ue(c),offsetTop:U.offsetTop,offsetLeft:o,offsetRight:s,offsetBottom:U.offsetBottom,zIndex:h,targetRef:O,onMouseEnter:M,onMouseLeave:E,children:e.jsxs(gt,{expandedHeight:U.maxHeight,children:[x&&!W&&e.jsx(mt,{children:e.jsx(ze,{ref:I,placeholder:y,value:B,onChange:X,leftSection:w,rightSection:b,autoFocus:P})}),$?e.jsx(wt,{children:e.jsx(re,{category:"body1",children:"Sorry, no results were found matching your search criteria."})}):e.jsxs(dt,{className:"select_item_container",separator:f,showScrollbar:Z,ref:D,children:[e.jsx(a.ViewportList,{viewportRef:D,items:Q,itemMargin:10,itemSize:Q.length,overscan:6,ref:T,children:(t,n)=>{if(t?.isSelected)return null;const a=e=>{N.current[n]=e};return d?e.jsx(_t,{isSelected:t?.isSelected,ref:a,...G(t,n),children:r.createElement(d,{...t,label:t.label,value:t.value,index:n,key:`${t.label}${t.value}`})},`${t.label}${t.value}+${n}`):Y?e.jsx(_t,{ref:a,...G(t,n),children:e.jsx(Vt,{...t,avatarProps:C,selected:t.value===A})},`${t.label}${t.value}+${n}`):e.jsx(ft,{ref:a,...G(t,n),role:"button",isSelected:t?.isSelected,children:t.label},`${t.label}${t.value}+${n}`)}}),j&&0===Q.length&&e.jsx(ft,{...x||L?{onMouseDown:K({label:V,value:null},0),onKeyDown:q({label:V,value:null},0)}:{onClick:K({label:V,value:null},0),onKeyDown:q({label:V,value:null},0)},role:"button",children:e.jsxs(bt,{children:[e.jsx(re,{category:"body1",weight:"semiBold",children:"Add:"}),e.jsxs(re,{children:[" ",V]})]})})]}),x&&W&&e.jsx(mt,{children:e.jsx(ze,{ref:I,placeholder:y,value:B,onChange:X,leftSection:w,rightSection:b,autoFocus:P})})]})})},At=t.div`
   position: relative;
   pointer-events: ${e=>e.disabled?"none":"auto"};
 `,Lt=t.div`

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kwant-ui",
-  "version": "3.51.0-dev.12",
+  "version": "3.51.0-dev.13",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kwant-ui",
-  "version": "3.51.0-dev.12",
+  "version": "3.51.0-dev.13",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",