@szum-tech/design-system/dist/components/badge-overflow/index.js

Szum-Tech design system with tailwindcss support

"use client";

import {c}from'../../chunk-KK77ZUTM.js';import'../../chunk-4HJVF7MU.js';import {a}from'../../chunk-JUNHRB4B.js';import*as e from'react';import {Slot}from'radix-ui';import {jsxs,jsx}from'react/jsx-runtime';function ne(I){let{items:n,getBadgeLabel:m,lineCount:s=1,renderBadge:L,renderOverflow:p,asChild:z,className:W,style:F,ref:j,...O}=I,i=e.useCallback(t=>{if(typeof t=="object"&&!m)throw new Error("`getBadgeLabel` is required when using array of objects");return m?m(t):t},[m]),d=e.useRef(null),S=c(j,d),h=e.useRef(null),[b,q]=e.useState(0),[o,D]=e.useState(4),[H,V]=e.useState(20),[E,A]=e.useState(40),[J,K]=e.useState(false),[x,Q]=e.useState(new Map);e.useLayoutEffect(()=>{if(!d.current||!h.current)return;function t(){if(!d.current||!h.current)return;let r=getComputedStyle(d.current),l=r.gap,c=l?parseFloat(l):4;D(c);let y=parseFloat(r.paddingLeft)||0,R=parseFloat(r.paddingRight)||0,g=y+R,v=new Map,f=h.current.children;for(let B=0;B<n.length;B++){let k=f[B];if(k){let Z=i(n[B]);v.set(Z,k.offsetWidth);}}Q(v);let w=f[0];w&&V(w.offsetHeight||20);let P=f[n.length];P&&A(P.offsetWidth||40);let Y=d.current.clientWidth-g;q(Y),K(true);}t();let a=new ResizeObserver(t);return a.observe(d.current),()=>{a.disconnect();}},[n,i]);let U=e.useMemo(()=>H*s+o*(s-1),[H,o,s]),{visibleItems:X,hiddenCount:T}=e.useMemo(()=>{if(!b||n.length===0||x.size===0)return {visibleItems:n,hiddenCount:0};let t=0,a=1,r=[];for(let l=0;l<n.length;l++){let c=n[l];if(!c)continue;let y=i(c),R=x.get(y);if(!R)continue;let g=R+o,v=a===s,f=l<n.length-1,w=v&&f?b-E-o:b;if(t+g<=w)t+=g,r.push(c);else if(a<s)a++,t=g,r.push(c);else break}return {visibleItems:r,hiddenCount:Math.max(0,n.length-r.length)}},[n,i,b,s,o,E,x]),N=z?Slot.Slot:"div";return jsxs(e.Fragment,{children:[jsxs("div",{ref:h,className:"pointer-events-none invisible absolute flex flex-wrap",style:{gap:o},children:[n.map((t,a)=>jsx(e.Fragment,{children:L(t,i(t))},a)),p?p(99):jsx("div",{className:"inline-flex h-5 shrink-0 items-center rounded-md border px-1.5 text-xs font-semibold",children:"+99"})]}),J?jsxs(N,{"data-slot":"badge-overflow",...O,ref:S,className:a("flex flex-wrap",W),style:{gap:o,...F},children:[X.map((t,a)=>jsx(e.Fragment,{children:L(t,i(t))},a)),T>0&&(p?p(T):jsxs("div",{className:"inline-flex h-5 shrink-0 items-center rounded-md border px-1.5 text-xs font-semibold",children:["+",T]}))]}):jsx(N,{"data-slot":"badge-overflow",...O,ref:S,className:a("flex flex-wrap",W),style:{gap:o,minHeight:U,...F},children:n.slice(0,Math.min(n.length,s*3-(s>1?1:0))).map((t,a)=>jsx(e.Fragment,{children:L(t,i(t))},a))})]})}export{ne as BadgeOverflow};