kwant-ui 3.51.0-dev.20 → 3.51.0-dev.21

package/dist/components/Avatar/Avatar.types.d.ts

@@ -25,6 +25,8 @@ export declare namespace AvatarDeclarations {
     interface StyledAvatarContainer {
         background: string;
         size: Size;
+        fontColor: string;
+        hasOnlyText: boolean;
     }
     interface StyledAvatarImage {
         objectFit: 'cover' | 'contain';

package/dist/index.es.js

@@ -1401,6 +1401,7 @@ import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import n,{css as
   width: ${e=>e.size};
   height: ${e=>e.size};
   position: relative;
+  border: ${e=>e?.hasOnlyText?`1px solid ${L.grey.grey300}`:"none"};
 `,tr=n.img`
   width: 100%;
   border-radius: 50%;
@@ -1420,7 +1421,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};
-`,ar={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}},cr=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 ar?ar[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(Jt,{children:[e(er,{background:y,size:Se(x.avatarSize),onClick:()=>{m?.(r)},children:_?e(tr,{src:d?.currentSrc,alt:a,objectFit:h,loading:"lazy"}):e(rr,{fontSize:Se(i||x.fontSize),fontColor:s,children:b})}),e(nr,{rightOffset:Se(g,"0px"),bottomOffset:Se(u,"0px"),children:v})]})},ir=r=>{const{label:n="",image:a="",selected:c,avatarProps:i}=r;return t(qt,{selected:c,children:[e(cr,{src:a,alt:n,size:"xs",...i}),e(Gt,{category:"body2",weight:"medium",color:L.grey.grey900,children:r.label}),c&&e(at,{icon:"check",width:20,height:20,fill:L.green.green400})]})},or=r=>{const{maxHeight:n=298,width:a=350,offsetTop:c="60px",offsetLeft:i,offsetRight:o,offsetBottom:s="0px",zIndex:h,opened:v,onChange:g,onDropdownVisibilityChange:m,data:d=[],onSelect:y,itemComponent:x,showSeparator:Z=!0,collapseOnSelect:O=!0,inputLeftSection:M,inputRightSection:E,searchPlaceholder:H="Search",searchable:j=!0,showScrollbar:V=!0,targetRef:C,onMouseEnter:A,onMouseLeave:L,onClose:z,searchAutofocus:B=!0,addable:k,selectInputValue:S,avatarProps:R,selectedValue:D,withInput:I,isDynamicOptionPosition:T=!1,dropdownWidth:N}=r,[F,Q]=p(""),[$,Y]=p([]),U=u(null),W=u(null),X=u(null),K=u([]),q=Ct(F,400),G=F?$:d,J=w((()=>F&&0===$.length||!k&&!j&&0===d.length),[F,$,d,k,j]),ee=G.some((e=>"image"in e)),{currentOffsets:te,isOpeningUpward:re,renderDropDown:ne}=(({isDynamicOptionPosition:e=!1,targetRef:t,opened:r,maxHeight:n=297,offsetTop:a="60px",offsetBottom:c="0px",searchable:i=!0,dataLength:o=0,itemHeight:s=50})=>{const[l,h]=p(!1),[v,u]=p({offsetTop:a,offsetBottom:c,maxHeight:n}),g=f((()=>{if(!e||!t?.current||!r)return;const c=window.innerHeight,l=t.current.getBoundingClientRect(),v=l.y,p=c-v,g=Math.min(n+(i?60:0),o*s+(i?60:0)),m=Math.min(200,g);let d;d=v>c/2?{offsetTop:"",offsetBottom:l.height-(i?14:0)+"px",maxHeight:Math.min(n,v)}:p>=m?{offsetTop:a,offsetBottom:"",maxHeight:Math.min(n,p)}:{offsetTop:"",offsetBottom:`${l.height+10}px`,maxHeight:Math.min(n,v)},u(d),h(!0)}),[e,t,r,n,a,i,o,s]);_((()=>{if(!r||!e)return;r&&g();const t=()=>{g()},i=()=>{g()};return window.addEventListener("resize",t),window.addEventListener("scroll",i),()=>{window.removeEventListener("resize",t),window.removeEventListener("scroll",i),h(!1),u({offsetTop:a,offsetBottom:c,maxHeight:n})}}),[r,e,o,n,t,i,s,g]);const m=e?v:{offsetTop:a,offsetBottom:c,maxHeight:n};return{currentOffsets:m,isOpeningUpward:e&&m.offsetBottom&&!m.offsetTop,calculateDropdownPosition:g,renderDropDown:l}})({isDynamicOptionPosition:T,targetRef:C,opened:v,maxHeight:n,offsetTop:c,offsetBottom:s,searchable:j,dataLength:G.length,itemHeight:50}),ae=e=>{Q(e.target.value)},ce=(e,t)=>r=>{r?.preventDefault(),r?.stopPropagation(),y?.(e,t),O&&z?.()},ie=(e,t)=>r=>{"Enter"===r.key&&ce(e,t)(r)},oe=(e,t)=>{const r={onKeyDown:ie(e,t)};return j||I?{...r,onMouseDown:ce(e,t)}:{...r,onClick:ce(e,t)}};return l((()=>{const e=F.replace(/[.*+\-?^${}()|[\]\\]/g,"\\$&");const t=new RegExp(e,"ig");if(e.length){const e=d?.filter((({label:e,value:r})=>e?.match(t)||r?.match(t)));Y(e)}else Y(d)}),[q,F,d]),l((()=>{g?.(v),m?.(),Q(""),v&&j&&W.current&&setTimeout((()=>W.current?.focus()),10)}),[v]),e(Ft,{opened:v,onClose:z,width:N||Se(a),offsetTop:te.offsetTop,offsetLeft:i,offsetRight:o,offsetBottom:te.offsetBottom,zIndex:h,targetRef:C,onMouseEnter:A,onMouseLeave:L,children:(v&&ne||!T)&&t(Qt,{expandedHeight:te.maxHeight,children:[j&&!re&&e($t,{children:e(ct,{ref:W,placeholder:H,value:F,onChange:ae,leftSection:M,rightSection:E,autoFocus:B})}),J?e(Xt,{children:e(Me,{category:"body1",children:"Sorry, no results were found matching your search criteria."})}):t(Yt,{className:"select_item_container",separator:Z,showScrollbar:V,ref:U,children:[e(P,{viewportRef:U,items:G,itemMargin:10,itemSize:50,overscan:6,ref:X,children:(t,r)=>{if(t?.isSelected)return null;const n=e=>{K.current[r]=e};return x?e(Wt,{isSelected:t?.isSelected,ref:n,...oe(t,r),children:b(x,{...t,label:t.label,value:t.value,index:r,key:`${t.label}${t.value}`})},`${t.label}${t.value}+${r}`):ee?e(Wt,{ref:n,...oe(t,r),children:e(ir,{...t,avatarProps:R,selected:t.value===D})},`${t.label}${t.value}+${r}`):e(Ut,{ref:n,...oe(t,r),role:"button",isSelected:t?.isSelected,children:t.label},`${t.label}${t.value}+${r}`)}}),k&&0===G.length&&e(Ut,{...j||I?{onMouseDown:ce({label:S,value:null},0),onKeyDown:ie({label:S,value:null},0)}:{onClick:ce({label:S,value:null},0),onKeyDown:ie({label:S,value:null},0)},role:"button",children:t(Kt,{children:[e(Me,{category:"body1",weight:"semiBold",children:"Add:"}),t(Me,{children:[" ",S]})]})})]}),j&&re&&e($t,{children:e(ct,{ref:W,placeholder:H,value:F,onChange:ae,leftSection:M,rightSection:E,autoFocus:B})})]})})},sr=n.div`
+`,ar={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}},cr=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 ar?ar[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(Jt,{children:[e(er,{background:y,size:Se(x.avatarSize),onClick:()=>{m?.(r)},hasOnlyText:!_,fontColor:s,children:_?e(tr,{src:d?.currentSrc,alt:a,objectFit:h,loading:"lazy"}):e(rr,{fontSize:Se(i||x.fontSize),fontColor:s,children:b})}),e(nr,{rightOffset:Se(g,"0px"),bottomOffset:Se(u,"0px"),children:v})]})},ir=r=>{const{label:n="",image:a="",selected:c,avatarProps:i}=r;return t(qt,{selected:c,children:[e(cr,{src:a,alt:n,size:"xs",...i}),e(Gt,{category:"body2",weight:"medium",color:L.grey.grey900,children:r.label}),c&&e(at,{icon:"check",width:20,height:20,fill:L.green.green400})]})},or=r=>{const{maxHeight:n=298,width:a=350,offsetTop:c="60px",offsetLeft:i,offsetRight:o,offsetBottom:s="0px",zIndex:h,opened:v,onChange:g,onDropdownVisibilityChange:m,data:d=[],onSelect:y,itemComponent:x,showSeparator:Z=!0,collapseOnSelect:O=!0,inputLeftSection:M,inputRightSection:E,searchPlaceholder:H="Search",searchable:j=!0,showScrollbar:V=!0,targetRef:C,onMouseEnter:A,onMouseLeave:L,onClose:z,searchAutofocus:B=!0,addable:k,selectInputValue:S,avatarProps:R,selectedValue:D,withInput:I,isDynamicOptionPosition:T=!1,dropdownWidth:N}=r,[F,Q]=p(""),[$,Y]=p([]),U=u(null),W=u(null),X=u(null),K=u([]),q=Ct(F,400),G=F?$:d,J=w((()=>F&&0===$.length||!k&&!j&&0===d.length),[F,$,d,k,j]),ee=G.some((e=>"image"in e)),{currentOffsets:te,isOpeningUpward:re,renderDropDown:ne}=(({isDynamicOptionPosition:e=!1,targetRef:t,opened:r,maxHeight:n=297,offsetTop:a="60px",offsetBottom:c="0px",searchable:i=!0,dataLength:o=0,itemHeight:s=50})=>{const[l,h]=p(!1),[v,u]=p({offsetTop:a,offsetBottom:c,maxHeight:n}),g=f((()=>{if(!e||!t?.current||!r)return;const c=window.innerHeight,l=t.current.getBoundingClientRect(),v=l.y,p=c-v,g=Math.min(n+(i?60:0),o*s+(i?60:0)),m=Math.min(200,g);let d;d=v>c/2?{offsetTop:"",offsetBottom:l.height-(i?14:0)+"px",maxHeight:Math.min(n,v)}:p>=m?{offsetTop:a,offsetBottom:"",maxHeight:Math.min(n,p)}:{offsetTop:"",offsetBottom:`${l.height+10}px`,maxHeight:Math.min(n,v)},u(d),h(!0)}),[e,t,r,n,a,i,o,s]);_((()=>{if(!r||!e)return;r&&g();const t=()=>{g()},i=()=>{g()};return window.addEventListener("resize",t),window.addEventListener("scroll",i),()=>{window.removeEventListener("resize",t),window.removeEventListener("scroll",i),h(!1),u({offsetTop:a,offsetBottom:c,maxHeight:n})}}),[r,e,o,n,t,i,s,g]);const m=e?v:{offsetTop:a,offsetBottom:c,maxHeight:n};return{currentOffsets:m,isOpeningUpward:e&&m.offsetBottom&&!m.offsetTop,calculateDropdownPosition:g,renderDropDown:l}})({isDynamicOptionPosition:T,targetRef:C,opened:v,maxHeight:n,offsetTop:c,offsetBottom:s,searchable:j,dataLength:G.length,itemHeight:50}),ae=e=>{Q(e.target.value)},ce=(e,t)=>r=>{r?.preventDefault(),r?.stopPropagation(),y?.(e,t),O&&z?.()},ie=(e,t)=>r=>{"Enter"===r.key&&ce(e,t)(r)},oe=(e,t)=>{const r={onKeyDown:ie(e,t)};return j||I?{...r,onMouseDown:ce(e,t)}:{...r,onClick:ce(e,t)}};return l((()=>{const e=F.replace(/[.*+\-?^${}()|[\]\\]/g,"\\$&");const t=new RegExp(e,"ig");if(e.length){const e=d?.filter((({label:e,value:r})=>e?.match(t)||r?.match(t)));Y(e)}else Y(d)}),[q,F,d]),l((()=>{g?.(v),m?.(),Q(""),v&&j&&W.current&&setTimeout((()=>W.current?.focus()),10)}),[v]),e(Ft,{opened:v,onClose:z,width:N||Se(a),offsetTop:te.offsetTop,offsetLeft:i,offsetRight:o,offsetBottom:te.offsetBottom,zIndex:h,targetRef:C,onMouseEnter:A,onMouseLeave:L,children:(v&&ne||!T)&&t(Qt,{expandedHeight:te.maxHeight,children:[j&&!re&&e($t,{children:e(ct,{ref:W,placeholder:H,value:F,onChange:ae,leftSection:M,rightSection:E,autoFocus:B})}),J?e(Xt,{children:e(Me,{category:"body1",children:"Sorry, no results were found matching your search criteria."})}):t(Yt,{className:"select_item_container",separator:Z,showScrollbar:V,ref:U,children:[e(P,{viewportRef:U,items:G,itemMargin:10,itemSize:50,overscan:6,ref:X,children:(t,r)=>{if(t?.isSelected)return null;const n=e=>{K.current[r]=e};return x?e(Wt,{isSelected:t?.isSelected,ref:n,...oe(t,r),children:b(x,{...t,label:t.label,value:t.value,index:r,key:`${t.label}${t.value}`})},`${t.label}${t.value}+${r}`):ee?e(Wt,{ref:n,...oe(t,r),children:e(ir,{...t,avatarProps:R,selected:t.value===D})},`${t.label}${t.value}+${r}`):e(Ut,{ref:n,...oe(t,r),role:"button",isSelected:t?.isSelected,children:t.label},`${t.label}${t.value}+${r}`)}}),k&&0===G.length&&e(Ut,{...j||I?{onMouseDown:ce({label:S,value:null},0),onKeyDown:ie({label:S,value:null},0)}:{onClick:ce({label:S,value:null},0),onKeyDown:ie({label:S,value:null},0)},role:"button",children:t(Kt,{children:[e(Me,{category:"body1",weight:"semiBold",children:"Add:"}),t(Me,{children:[" ",S]})]})})]}),j&&re&&e($t,{children:e(ct,{ref:W,placeholder:H,value:F,onChange:ae,leftSection:M,rightSection:E,autoFocus:B})})]})})},sr=n.div`
   position: relative;
   pointer-events: ${e=>e.disabled?"none":"auto"};
 `,lr=n.div`

package/dist/index.js

@@ -1401,6 +1401,7 @@
   width: ${e=>e.size};
   height: ${e=>e.size};
   position: relative;
+  border: ${e=>e?.hasOnlyText?`1px solid ${v.grey.grey300}`:"none"};
 `,Mt=t.img`
   width: 100%;
   border-radius: 50%;
@@ -1420,7 +1421,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=298,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,dropdownWidth:B}=t,[k,S]=r.useState(""),[R,D]=r.useState([]),I=r.useRef(null),T=r.useRef(null),N=r.useRef(null),F=r.useRef([]),Q=rt(k,400),$=k?R:g,Y=r.useMemo((()=>k&&0===R.length||!j&&!x&&0===g.length),[k,R,g,j,x]),U=$.some((e=>"image"in e)),{currentOffsets:W,isOpeningUpward:X,renderDropDown:K}=(({isDynamicOptionPosition:e=!1,targetRef:t,opened:n,maxHeight:a=297,offsetTop:c="60px",offsetBottom:i="0px",searchable:o=!0,dataLength:s=0,itemHeight:l=50})=>{const[h,v]=r.useState(!1),[p,u]=r.useState({offsetTop:c,offsetBottom:i,maxHeight:a}),g=r.useCallback((()=>{if(!e||!t?.current||!n)return;const r=window.innerHeight,i=t.current.getBoundingClientRect(),h=i.y,p=r-h,g=Math.min(a+(o?60:0),s*l+(o?60:0)),m=Math.min(200,g);let d;d=h>r/2?{offsetTop:"",offsetBottom:i.height-(o?14:0)+"px",maxHeight:Math.min(a,h)}:p>=m?{offsetTop:c,offsetBottom:"",maxHeight:Math.min(a,p)}:{offsetTop:"",offsetBottom:`${i.height+10}px`,maxHeight:Math.min(a,h)},u(d),v(!0)}),[e,t,n,a,c,o,s,l]);r.useLayoutEffect((()=>{if(!n||!e)return;n&&g();const t=()=>{g()},r=()=>{g()};return window.addEventListener("resize",t),window.addEventListener("scroll",r),()=>{window.removeEventListener("resize",t),window.removeEventListener("scroll",r),v(!1),u({offsetTop:c,offsetBottom:i,maxHeight:a})}}),[n,e,s,a,t,o,l,g]);const m=e?p:{offsetTop:c,offsetBottom:i,maxHeight:a};return{currentOffsets:m,isOpeningUpward:e&&m.offsetBottom&&!m.offsetTop,calculateDropdownPosition:g,renderDropDown:h}})({isDynamicOptionPosition:z,targetRef:O,opened:v,maxHeight:n,offsetTop:i,offsetBottom:l,searchable:x,dataLength:$.length,itemHeight:50}),q=e=>{S(e.target.value)},G=(e,t)=>r=>{r?.preventDefault(),r?.stopPropagation(),m?.(e,t),_&&H?.()},J=(e,t)=>r=>{"Enter"===r.key&&G(e,t)(r)},ee=(e,t)=>{const r={onKeyDown:J(e,t)};return x||L?{...r,onMouseDown:G(e,t)}:{...r,onClick:G(e,t)}};return r.useEffect((()=>{const e=k.replace(/[.*+\-?^${}()|[\]\\]/g,"\\$&");const t=new RegExp(e,"ig");if(e.length){const e=g?.filter((({label:e,value:r})=>e?.match(t)||r?.match(t)));D(e)}else D(g)}),[Q,k,g]),r.useEffect((()=>{p?.(v),u?.(),S(""),v&&x&&T.current&&setTimeout((()=>T.current?.focus()),10)}),[v]),e.jsx(ut,{opened:v,onClose:H,width:B||ue(c),offsetTop:W.offsetTop,offsetLeft:o,offsetRight:s,offsetBottom:W.offsetBottom,zIndex:h,targetRef:O,onMouseEnter:M,onMouseLeave:E,children:(v&&K||!z)&&e.jsxs(gt,{expandedHeight:W.maxHeight,children:[x&&!X&&e.jsx(mt,{children:e.jsx(ze,{ref:T,placeholder:y,value:k,onChange:q,leftSection:w,rightSection:b,autoFocus:P})}),Y?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:I,children:[e.jsx(a.ViewportList,{viewportRef:I,items:$,itemMargin:10,itemSize:50,overscan:6,ref:N,children:(t,n)=>{if(t?.isSelected)return null;const a=e=>{F.current[n]=e};return d?e.jsx(_t,{isSelected:t?.isSelected,ref:a,...ee(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}`):U?e.jsx(_t,{ref:a,...ee(t,n),children:e.jsx(Vt,{...t,avatarProps:C,selected:t.value===A})},`${t.label}${t.value}+${n}`):e.jsx(ft,{ref:a,...ee(t,n),role:"button",isSelected:t?.isSelected,children:t.label},`${t.label}${t.value}+${n}`)}}),j&&0===$.length&&e.jsx(ft,{...x||L?{onMouseDown:G({label:V,value:null},0),onKeyDown:J({label:V,value:null},0)}:{onClick:G({label:V,value:null},0),onKeyDown:J({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&&X&&e.jsx(mt,{children:e.jsx(ze,{ref:T,placeholder:y,value:k,onChange:q,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)},hasOnlyText:!d,fontColor:s,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=298,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,dropdownWidth:B}=t,[k,S]=r.useState(""),[R,D]=r.useState([]),I=r.useRef(null),T=r.useRef(null),N=r.useRef(null),F=r.useRef([]),Q=rt(k,400),$=k?R:g,Y=r.useMemo((()=>k&&0===R.length||!j&&!x&&0===g.length),[k,R,g,j,x]),U=$.some((e=>"image"in e)),{currentOffsets:W,isOpeningUpward:X,renderDropDown:K}=(({isDynamicOptionPosition:e=!1,targetRef:t,opened:n,maxHeight:a=297,offsetTop:c="60px",offsetBottom:i="0px",searchable:o=!0,dataLength:s=0,itemHeight:l=50})=>{const[h,v]=r.useState(!1),[p,u]=r.useState({offsetTop:c,offsetBottom:i,maxHeight:a}),g=r.useCallback((()=>{if(!e||!t?.current||!n)return;const r=window.innerHeight,i=t.current.getBoundingClientRect(),h=i.y,p=r-h,g=Math.min(a+(o?60:0),s*l+(o?60:0)),m=Math.min(200,g);let d;d=h>r/2?{offsetTop:"",offsetBottom:i.height-(o?14:0)+"px",maxHeight:Math.min(a,h)}:p>=m?{offsetTop:c,offsetBottom:"",maxHeight:Math.min(a,p)}:{offsetTop:"",offsetBottom:`${i.height+10}px`,maxHeight:Math.min(a,h)},u(d),v(!0)}),[e,t,n,a,c,o,s,l]);r.useLayoutEffect((()=>{if(!n||!e)return;n&&g();const t=()=>{g()},r=()=>{g()};return window.addEventListener("resize",t),window.addEventListener("scroll",r),()=>{window.removeEventListener("resize",t),window.removeEventListener("scroll",r),v(!1),u({offsetTop:c,offsetBottom:i,maxHeight:a})}}),[n,e,s,a,t,o,l,g]);const m=e?p:{offsetTop:c,offsetBottom:i,maxHeight:a};return{currentOffsets:m,isOpeningUpward:e&&m.offsetBottom&&!m.offsetTop,calculateDropdownPosition:g,renderDropDown:h}})({isDynamicOptionPosition:z,targetRef:O,opened:v,maxHeight:n,offsetTop:i,offsetBottom:l,searchable:x,dataLength:$.length,itemHeight:50}),q=e=>{S(e.target.value)},G=(e,t)=>r=>{r?.preventDefault(),r?.stopPropagation(),m?.(e,t),_&&H?.()},J=(e,t)=>r=>{"Enter"===r.key&&G(e,t)(r)},ee=(e,t)=>{const r={onKeyDown:J(e,t)};return x||L?{...r,onMouseDown:G(e,t)}:{...r,onClick:G(e,t)}};return r.useEffect((()=>{const e=k.replace(/[.*+\-?^${}()|[\]\\]/g,"\\$&");const t=new RegExp(e,"ig");if(e.length){const e=g?.filter((({label:e,value:r})=>e?.match(t)||r?.match(t)));D(e)}else D(g)}),[Q,k,g]),r.useEffect((()=>{p?.(v),u?.(),S(""),v&&x&&T.current&&setTimeout((()=>T.current?.focus()),10)}),[v]),e.jsx(ut,{opened:v,onClose:H,width:B||ue(c),offsetTop:W.offsetTop,offsetLeft:o,offsetRight:s,offsetBottom:W.offsetBottom,zIndex:h,targetRef:O,onMouseEnter:M,onMouseLeave:E,children:(v&&K||!z)&&e.jsxs(gt,{expandedHeight:W.maxHeight,children:[x&&!X&&e.jsx(mt,{children:e.jsx(ze,{ref:T,placeholder:y,value:k,onChange:q,leftSection:w,rightSection:b,autoFocus:P})}),Y?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:I,children:[e.jsx(a.ViewportList,{viewportRef:I,items:$,itemMargin:10,itemSize:50,overscan:6,ref:N,children:(t,n)=>{if(t?.isSelected)return null;const a=e=>{F.current[n]=e};return d?e.jsx(_t,{isSelected:t?.isSelected,ref:a,...ee(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}`):U?e.jsx(_t,{ref:a,...ee(t,n),children:e.jsx(Vt,{...t,avatarProps:C,selected:t.value===A})},`${t.label}${t.value}+${n}`):e.jsx(ft,{ref:a,...ee(t,n),role:"button",isSelected:t?.isSelected,children:t.label},`${t.label}${t.value}+${n}`)}}),j&&0===$.length&&e.jsx(ft,{...x||L?{onMouseDown:G({label:V,value:null},0),onKeyDown:J({label:V,value:null},0)}:{onClick:G({label:V,value:null},0),onKeyDown:J({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&&X&&e.jsx(mt,{children:e.jsx(ze,{ref:T,placeholder:y,value:k,onChange:q,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.20",
+  "version": "3.51.0-dev.21",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -63,7 +63,8 @@
     "react-router-dom": "^6.14.2",
     "recharts": "^2.10.3",
     "styled-components": "^5.3.11",
-    "typescript": "^4.5.2"
+    "typescript": "^4.5.2",
+    "vite": "^7.3.1"
   },
   "peerDependencies": {
     "@types/react": "^18.2.7",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kwant-ui",
-  "version": "3.51.0-dev.20",
+  "version": "3.51.0-dev.21",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -63,7 +63,8 @@
     "react-router-dom": "^6.14.2",
     "recharts": "^2.10.3",
     "styled-components": "^5.3.11",
-    "typescript": "^4.5.2"
+    "typescript": "^4.5.2",
+    "vite": "^7.3.1"
   },
   "peerDependencies": {
     "@types/react": "^18.2.7",