frimousse/dist/index.js

A lightweight, unstyled, and composable emoji picker for React.

var ct=Object.defineProperty;var ut=(e,t)=>{for(var o in t)ct(e,o,{get:t[o],enumerable:!0})};var at={};ut(at,{ActiveEmoji:()=>it,Empty:()=>nt,List:()=>tt,Loading:()=>rt,Root:()=>Je,Search:()=>qe,SkinTone:()=>st,SkinToneSelector:()=>ot,Viewport:()=>Ge});import{Fragment as Mt,forwardRef as z,memo as K,useCallback as D,useEffect as te,useImperativeHandle as re,useMemo as oe,useRef as V,useState as Ye}from"react";var q="'Apple Color Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', 'Android Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', EmojiSymbols, sans-serif",O=["none","light","medium-light","medium","medium-dark","dark"];function G(e){return e.charAt(0).toUpperCase()+e.slice(1)}var $=2,x=null;function ie(e){try{x??=document.createElement("canvas").getContext("2d",{willReadFrequently:!0})}catch{}if(!x||(queueMicrotask(()=>{x&&(x=null)}),x.canvas.width=$,x.canvas.height=$,x.font=`2px ${q}`,x.textBaseline="middle",x.measureText(e).width>=$*2))return!1;x.fillStyle="#00f",x.fillText(e,0,0);let t=x.getImageData(0,0,$,$).data;x.clearRect(0,0,$,$),x.fillStyle="#f00",x.fillText(e,0,0);let o=x.getImageData(0,0,$,$).data;for(let r=0;r<$*$*4;r+=4)if(t[r]!==o[r]||t[r+1]!==o[r+1]||t[r+2]!==o[r+2])return!1;return!0}function se(e,t,o){try{let r=e.getItem(t);if(!r)throw new Error(`No value found for "${t}".`);let n=JSON.parse(r);return o(n)}catch{return null}}function ae(e,t,o){e.setItem(t,JSON.stringify(o))}function ce(e){return t=>t===void 0?void 0:e(t)}function ue(e){return t=>t===null?null:e(t)}function v(e){if(typeof e!="string")throw new Error;return e}function _(e){if(typeof e!="number")throw new Error;return e}function le(e){if(typeof e!="boolean")throw new Error;return e}function F(e){return t=>{if(typeof t!="object"||t===null)throw new Error;let o={};for(let r in e){let n=t[r];n===void 0&&e[r](void 0),o[r]=e[r](n)}return o}}function Z(e){return t=>{if(!Array.isArray(t))throw new Error;return t.length>0&&e(t[0]),t}}var ke=(e,t)=>`${e}/${t}/data.json`,we=(e,t)=>`${e}/${t}/messages.json`,mt=["bn","da","de","en-gb","en","es-mx","es","et","fi","fr","hi","hu","it","ja","ko","lt","ms","nb","nl","pl","pt","ru","sv","th","uk","vi","zh-hant","zh"],pe="en",ye=e=>`frimousse/data/${e}`,Ee="frimousse/metadata";async function he(e,t){try{return(await fetch(e,{method:"HEAD",signal:t})).headers.get("etag")}catch{return null}}async function dt(e,t,o){let[{emojis:r,emojisEtag:n},{messages:s,messagesEtag:a}]=await Promise.all([fetch(ke(e,t),{signal:o}).then(async i=>({emojis:await i.json(),emojisEtag:i.headers.get("etag")})),fetch(we(e,t),{signal:o}).then(async i=>({messages:await i.json(),messagesEtag:i.headers.get("etag")}))]);return{emojis:r,messages:s,emojisEtag:n,messagesEtag:a}}async function ft(e,t,o){let[r,n]=await Promise.all([he(ke(e,t),o),he(we(e,t),o)]);return{emojisEtag:r,messagesEtag:n}}function gt(e){return e.skins?e.skins.filter(o=>typeof o.tone=="number").reduce((o,r)=>{let n=O[r.tone];return o[n]=r.emoji,o},{}):void 0}async function je(e,t,o){let{emojis:r,emojisEtag:n,messages:s,messagesEtag:a}=await dt(e,t,o),i=s.subgroups.find(l=>l.key==="country-flag"||l.key==="subdivision-flag"),m=s.groups.filter(l=>l.key!=="component"),c=r.filter(l=>"group"in l),f=m.map(l=>({index:l.order,label:G(l.message)})),u=s.skinTones.reduce((l,j)=>(l[j.key]=G(j.message),l),{}),h=c.map(l=>({emoji:l.emoji,category:l.group,version:l.version,label:G(l.label),tags:l.tags??[],countryFlag:i&&l.subgroup===i.order||void 0,skins:gt(l)})),d={locale:t,emojis:h,categories:f,skinTones:u};return ae(localStorage,ye(t),{data:d,metadata:{emojisEtag:n,messagesEtag:a}}),d}function pt(e,t){let o=new Map;for(let a of e)o.has(a.version)||o.set(a.version,a.emoji);let r=[...o.keys()].sort((a,i)=>i-a),n=r[0]??0,s=ie("\u{1F1EA}\u{1F1FA}");if(typeof t=="number")return{emojiVersion:t,countryFlags:s};for(let a of r){let i=o.get(a);if(ie(i))return{emojiVersion:a,countryFlags:s}}return{emojiVersion:n,countryFlags:s}}var Et=F({emojiVersion:_,countryFlags:le}),ht=F({data:F({locale:v,emojis:Z(F({emoji:v,category:_,label:v,version:_,tags:Z(v),countryFlag:ce(le),skins:ce(F({light:v,"medium-light":v,medium:v,"medium-dark":v,dark:v}))})),categories:Z(F({index:_,label:v})),skinTones:F({light:v,"medium-light":v,medium:v,"medium-dark":v,dark:v})}),metadata:F({emojisEtag:ue(v),messagesEtag:ue(v)})});async function Se({locale:e,emojiVersion:t,emojibaseUrl:o,signal:r}){let n=typeof o=="string"?o:`https://cdn.jsdelivr.net/npm/emojibase-data@${typeof t=="number"?Math.floor(t):"latest"}`,s=se(sessionStorage,Ee,Et),a=se(localStorage,ye(e),ht),i;if(!a)i=await je(n,e,r);else if(s)i=a.data;else try{let{emojisEtag:c,messagesEtag:f}=await ft(n,e,r);i=!c||!f||c!==a.metadata.emojisEtag||f!==a.metadata.messagesEtag?await je(n,e,r):a.data}catch{i=a.data}s??=pt(i.emojis,t),ae(sessionStorage,Ee,s);let m=i.emojis.filter(c=>{let f=c.version<=s.emojiVersion;return c.countryFlag?f&&s.countryFlags:f});return{locale:e,emojis:m,categories:i.categories,skinTones:i.skinTones}}function me(e){return mt.includes(e)?e:(console.warn(`Locale "${e}" is not supported, using "${pe}" instead.`),pe)}function de(e){return O.includes(e)?e:(console.warn(`Skin tone "${e}" is not valid, using "none" instead.`),"none")}function ve(e,t){let o=[];if(t<=0)return o;for(let r=0,n=e.length;r<n;r+=t)o.push(e.slice(r,r+t));return o}function jt(e,t){if(!t)return e;let o=t.toLowerCase().trim(),r=new WeakMap;return e.filter(n=>{let s=0;n.label.toLowerCase().includes(o)&&(s+=10);for(let a of n.tags)a.toLowerCase().includes(o)&&(s+=1);return s>0?(r.set(n,s),!0):!1}).sort((n,s)=>(r.get(s)??0)-(r.get(n)??0))}function Pe(e,t,o,r){let n=jt(e.emojis,r),s=[],a=[],i=[],m={},c=0,f=0;for(let u of n)m[u.category]||(m[u.category]=[]),m[u.category].push({emoji:o&&o!=="none"&&u.skins?u.skins[o]:u.emoji,label:u.label});for(let u of e.categories){let h=m[u.index];if(!h||h.length===0)continue;let d=ve(Array.from(h),t).map(l=>({categoryIndex:c,emojis:l}));s.push(...d),a.push({label:u.label,rowsCount:d.length,startRowIndex:f}),i.push(f),c++,f+=d.length}return{count:n.length,categories:a,categoriesStartRowIndices:i,rows:s,skinTones:e.skinTones}}import{useCallback as Rt,useDeferredValue as Lt,useMemo as Ht}from"react";import{createContext as kt,useCallback as wt,useContext as yt,useDebugValue as St,useEffect as vt,useState as be}from"react";import{jsx as Pt}from"react/jsx-runtime";function Te(e){let t={},o=null,r=null,n=new Set,s=()=>{if(o){t=o,o=null;for(let c of n)c(t)}r=null},a=()=>o??t,i=c=>{o??=t,Object.assign(o,typeof c=="function"?c(a()):c),r||(r=requestAnimationFrame(s))},m=c=>(n.add(c),()=>n.delete(c));return t=e(i,a),{get:a,set:i,subscribe:m}}function xe(e){let[t]=be(e);return t}function Ce(e){let t=kt(null);return{useStore:()=>{let n=yt(t);if(!n)throw new Error(e);return n},Provider:({store:n,children:s})=>Pt(t.Provider,{value:n,children:s})}}function L(e,t,o=Object.is){let[r,n]=be(()=>t(e.get()));return vt(()=>e.subscribe(()=>{let s=t(e.get());n(a=>o(a,s)?a:s)}),[e,t,o]),St(r),r}function M(e,t,o){let r=wt(n=>n[t],[t]);return L(e,r,o)}var Re=2;function Le(e,t,o,r){let n=0;return Te((s,a)=>({locale:t,columns:o,skinTone:r,onEmojiSelect:e,data:null,search:"",interaction:"none",activeColumnIndex:0,activeRowIndex:0,rowHeight:null,categoryHeaderHeight:null,viewportWidth:null,viewportHeight:null,viewportCurrentCategoryIndex:null,viewportStartCategoryIndex:0,viewportStartRowIndex:0,viewportEndRowIndex:0,rootRef:null,searchRef:null,viewportRef:null,listRef:null,updateViewportState:i=>{let m=a(),c=i?.data??m.data,f=i?.categoryHeaderHeight??m.categoryHeaderHeight,u=i?.rowHeight??m.rowHeight,h=i?.viewportHeight??m.viewportHeight;if(!c||c.rows.length===0||!f||!u||!h)return s({...i,viewportStartCategoryIndex:0,viewportStartRowIndex:0,viewportEndRowIndex:0});let d=0,l=0;for(let R of c.categories)if(l++*f+R.startRowIndex*u<n)d+=f;else break;let j=c.categories.length*f+c.rows.length*u,g=Math.floor(Re*u/2),w=Math.ceil(Re*u/2),P=Math.min(n-d-g,j-h),T=P+h+w,p=Math.max(0,Math.floor(P/u)),y=Math.min(c.rows.length-1,Math.ceil(T/u)),S=c.rows[p]?.categoryIndex;return s(S===void 0&&i?i:{...i,viewportStartCategoryIndex:S,viewportStartRowIndex:p,viewportEndRowIndex:y})},onDataChange:i=>{a().updateViewportState({data:i,activeColumnIndex:0,activeRowIndex:0})},onSearchChange:i=>{s({search:i,interaction:i?"keyboard":"none"})},onActiveEmojiChange:(i,m,c)=>{if(s({interaction:i,activeColumnIndex:m,activeRowIndex:c}),i!=="keyboard")return;let{listRef:f,viewportRef:u,rowHeight:h,viewportHeight:d,categoryHeaderHeight:l}=a(),j=f?.current,g=u?.current;if(!j||!g||!h||!l||!d)return;let w=c;w===0&&g.scrollTo({top:0,behavior:"instant"});let P=j.querySelector(`[aria-rowindex="${w}"]`);if(!(P instanceof HTMLElement))return;let T=P.offsetTop,p=getComputedStyle(P),y=Number.parseFloat(p.scrollMarginTop),S=Number.parseFloat(p.scrollMarginBottom),R=n+y;T<n+d/2&&(R+=l);let A=R+d-S;(T<R||T+h>A)&&g.scrollTo({top:Math.max(T<R+l?T-Math.max(l,y):T-d+h+S,0),behavior:"instant"})},onActiveEmojiReset:()=>{s({interaction:"none",activeColumnIndex:0,activeRowIndex:0})},onRowHeightChange:i=>{a().updateViewportState({rowHeight:i})},onCategoryHeaderHeightChange:i=>{a().updateViewportState({categoryHeaderHeight:i})},onViewportSizeChange:(i,m)=>{a().updateViewportState({viewportWidth:i,viewportHeight:m})},onViewportScroll:i=>{n=i,a().updateViewportState()}}))}var{useStore:C,Provider:He}=Ce("EmojiPicker.Root is missing.");function Ie(e){return e.search}function N(e){return e.interaction==="none"?void 0:e.data?.rows[e.activeRowIndex]?.emojis[e.activeColumnIndex]}function De(e){return e.data===void 0||typeof e.data?.count=="number"&&e.data.count===0}function Ae(e){return e.data===null||e.viewportHeight===null||e.rowHeight===null||e.categoryHeaderHeight===null}function fe(e){return e.data?.rows.length}function $e(e){return e.data?.categories.length}function Me(e){return e.data?.categoriesStartRowIndices}function Fe(e){return e.data?.skinTones}function ge(e,t){return e?.emoji===t?.emoji}function Ve(e,t){return e?.categoryIndex!==t?.categoryIndex||e?.emojis.length!==t?.emojis.length?!1:!!e?.emojis.every((o,r)=>ge(o,t?.emojis[r]))}var W="\u200D",Oe=/\p{Emoji_Modifier_Base}/u,bt=/\uFE0F$/,Tt=/\u{1F3FB}|\u{1F3FC}|\u{1F3FD}|\u{1F3FE}|\u{1F3FF}/gu,xt={light:"\u{1F3FB}","medium-light":"\u{1F3FC}",medium:"\u{1F3FD}","medium-dark":"\u{1F3FE}",dark:"\u{1F3FF}"};function Ct(e,t){if(!e.split(W).some(r=>Oe.test(r)))return e;let o=e.split(W).map(r=>r.replace(Tt,"")).join(W);return t==="none"?o:o.split(W).map((r,n,s)=>{let a=s.length>1;return!Oe.test(r)||a&&r==="\u{1F91D}"?r:r.replace(bt,"")+xt[t]}).join(W)}function _e(e){return O.map(t=>({skinTone:t,emoji:Ct(e,t)}))}function X(){let e=C(),t=L(e,N,ge);return Lt(t)}function Q(e="\u270B"){let t=C(),o=M(t,"skinTone"),r=Ht(()=>_e(e),[e]),n=Rt(s=>{t.set({skinTone:s})},[]);return[o,n,r]}function ee(e,t){if(Object.is(e,t))return!0;if(typeof e!="object"||typeof t!="object"||e===null||t===null||Array.isArray(e)!==Array.isArray(t))return!1;let o=Object.keys(e),r=Object.keys(t);return o.length!==r.length?!1:o.every(n=>n in t&&e[n]===t[n])}function Ne(...e){}function We(e,t){let o=null;if(typeof window.requestIdleCallback=="function")o=window.requestIdleCallback(e,t);else{let r=Date.now();o=window.setTimeout(()=>{e({didTimeout:!1,timeRemaining:()=>Math.max(0,(t?.timeout??50)-(Date.now()-r))})},10)}return()=>{typeof window.cancelIdleCallback=="function"?window.cancelIdleCallback(o):window.clearTimeout(o)}}import{useEffect as It,useLayoutEffect as Dt}from"react";var I=typeof window<"u"?Dt:It;import{useCallback as At,useRef as $t}from"react";function Be(e){let t=$t(e);return I(()=>{t.current=e}),At((...o)=>t.current(...o),[])}import{jsx as E,jsxs as B}from"react/jsx-runtime";function Ft({emojiVersion:e,emojibaseUrl:t}){let[o,r]=Ye(void 0),n=C(),s=M(n,"locale"),a=M(n,"columns"),i=M(n,"skinTone"),m=M(n,"search");return te(()=>{let c=new AbortController,f=c.signal;return Se({locale:s,emojiVersion:e,emojibaseUrl:t,signal:f}).then(u=>{r(u)}).catch(u=>{f.aborted||console.error(u)}),()=>{c.abort()}},[e,t,s]),te(()=>{if(o)return We(()=>{n.get().onDataChange(Pe(o,a,i,m))},{timeout:100})},[o,a,i,m]),null}var Je=z(({locale:e="en",columns:t=9,skinTone:o="none",onEmojiSelect:r=Ne,emojiVersion:n,emojibaseUrl:s,onFocusCapture:a,onBlurCapture:i,children:m,style:c,...f},u)=>{let h=Be(r),d=xe(()=>Le(h,me(e),t,de(o))),[l,j]=Ye(!1),g=V(null),w=D(p=>{p&&(g.current=p,d.set({rootRef:g}))},[]);I(()=>{d.set({locale:me(e)})},[e]),I(()=>{d.set({columns:t})},[t]),I(()=>{d.set({skinTone:de(o)})},[o]);let P=D(p=>{a?.(p);let{searchRef:y,viewportRef:S}=d.get(),R=p.target===y?.current||p.target.hasAttribute("frimousse-search"),A=p.target===S?.current||p.target.hasAttribute("frimousse-viewport");p.isDefaultPrevented()||(j(R||A),p.isDefaultPrevented()||(j(R||A),A?d.get().onActiveEmojiChange("keyboard",0,0):R&&d.get().search===""&&d.set({interaction:"none"})))},[a]),T=D(p=>{i?.(p),!p.isDefaultPrevented()&&!p.currentTarget.contains(p.relatedTarget)&&j(!1)},[i]);return I(()=>{l||d.get().onActiveEmojiReset()},[l]),re(u,()=>g.current),te(()=>{if(!l)return;function p(y){if(y.defaultPrevented||!y.key.startsWith("Arrow")&&y.key!=="Enter")return;let{data:S,onEmojiSelect:R,onActiveEmojiChange:A,interaction:U,activeColumnIndex:Y,activeRowIndex:J}=d.get();if(y.key==="Enter"){let b=N(d.get());b&&(y.preventDefault(),R(b))}if(y.key.startsWith("Arrow")){let b=Y,k=J;if(y.preventDefault(),U!=="none"){if(S?.rows&&S.rows.length>0)switch(y.key){case"ArrowLeft":{if(b===0){let H=k-1,ne=S.rows[H];ne&&(k=H,b=ne.emojis.length-1)}else b-=1;break}case"ArrowRight":{if(b===S.rows[k].emojis.length-1){let H=k+1;S.rows[H]&&(k=H,b=0)}else b+=1;break}case"ArrowUp":{let H=S.rows[k-1];H&&(k-=1,H.emojis[b]||(b=H.emojis.length-1));break}case"ArrowDown":{let H=S.rows[k+1];H&&(k+=1,H.emojis[b]||(b=H.emojis.length-1));break}}A("keyboard",b,k)}else A("keyboard",0,0)}}return document.addEventListener("keydown",p),()=>{document.removeEventListener("keydown",p)}},[l]),I(()=>{let p=null,y=null,S=null,R=null,A=d.subscribe(k=>{g.current&&(p!==k.viewportWidth&&(p=k.viewportWidth,g.current.style.setProperty("--frimousse-viewport-width",`${k.viewportWidth}px`)),y!==k.viewportHeight&&(y=k.viewportHeight,g.current.style.setProperty("--frimousse-viewport-height",`${k.viewportHeight}px`)),S!==k.rowHeight&&(S=k.rowHeight,g.current.style.setProperty("--frimousse-row-height",`${k.rowHeight}px`)),R!==k.categoryHeaderHeight&&(R=k.categoryHeaderHeight,g.current.style.setProperty("--frimousse-category-header-height",`${k.categoryHeaderHeight}px`)))}),{viewportWidth:U,viewportHeight:Y,rowHeight:J,categoryHeaderHeight:b}=d.get();return U&&g.current.style.setProperty("--frimousse-viewport-width",`${U}px`),Y&&g.current.style.setProperty("--frimousse-viewport-height",`${Y}px`),J&&g.current.style.setProperty("--frimousse-row-height",`${J}px`),b&&g.current.style.setProperty("--frimousse-category-header-height",`${b}px`),A},[]),E("div",{"data-focused":l?"":void 0,"frimousse-root":"",onBlurCapture:T,onFocusCapture:P,...f,ref:w,style:{"--frimousse-emoji-font":q,...c},children:B(He,{store:d,children:[E(Ft,{emojiVersion:n,emojibaseUrl:s}),m]})})}),qe=z(({value:e,defaultValue:t,onChange:o,...r},n)=>{let s=C(),a=V(null),i=D(u=>{u&&(a.current=u,s.set({searchRef:a}))},[]),m=typeof e=="string",c=V(m);te(()=>{process.env.NODE_ENV!=="production"&&c.current!==m&&console.warn(`EmojiPicker.Search is changing from ${c?"controlled":"uncontrolled"} to ${m?"controlled":"uncontrolled"}.`),c.current=m},[m]),I(()=>{s.set({search:typeof e=="string"?e:typeof t=="string"?t:""})},[]),I(()=>{typeof e=="string"&&s.get().onSearchChange(e)},[e]);let f=D(u=>{o?.(u),u.isDefaultPrevented()||s.get().onSearchChange(u.target.value)},[o]);return re(n,()=>a.current),E("input",{autoCapitalize:"off",autoComplete:"off",autoCorrect:"off",enterKeyHint:"done","frimousse-search":"",placeholder:"Search\u2026",spellCheck:!1,type:"search",...r,defaultValue:t,onChange:f,ref:i,value:e})}),Vt=K(()=>{let e=X();return e?E("div",{"aria-live":"polite",style:{border:0,clip:"rect(0, 0, 0, 0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",whiteSpace:"nowrap",width:1,wordWrap:"normal"},children:e.label}):null}),Ge=z(({children:e,onScroll:t,onKeyDown:o,style:r,...n},s)=>{let a=C(),i=V(null),m=D(h=>{h&&(i.current=h,a.set({viewportRef:i}))},[]),c=L(a,fe),f=L(a,$e),u=D(h=>{t?.(h),a.get().onViewportScroll(h.currentTarget.scrollTop)},[t]);return I(()=>{if(!i.current)return;let h=new ResizeObserver(([d])=>{let l=d?.borderBoxSize[0]?.inlineSize??0,j=d?.borderBoxSize[0]?.blockSize??0,{onViewportSizeChange:g,viewportHeight:w,viewportWidth:P}=a.get();(w!==j||P!==l)&&g(l,j)});return h.observe(i.current),a.get().onViewportSizeChange(i.current.offsetWidth,i.current.clientHeight),()=>{h.disconnect()}},[]),re(s,()=>i.current),B("div",{"frimousse-viewport":"",...n,onScroll:u,ref:m,style:{position:"relative",boxSizing:"border-box",contain:"layout paint",containIntrinsicSize:typeof c=="number"&&typeof f=="number"?`var(--frimousse-viewport-width, auto) calc(${c} * var(--frimousse-row-height) + ${f} * var(--frimousse-category-header-height))`:void 0,overflowY:"auto",overscrollBehavior:"contain",scrollbarGutter:"stable",willChange:"scroll-position",...r},children:[E(Vt,{}),e]})});function Ze(e,t,o){return{emoji:{...e,isActive:o},role:"gridcell","aria-colindex":t,"aria-selected":o||void 0,"aria-label":e.label,"data-active":o?"":void 0,"frimousse-emoji":"",style:{fontFamily:"var(--frimousse-emoji-font)"},tabIndex:-1}}function Xe(e,t=!1){return{role:t?void 0:"row","aria-rowindex":t?void 0:e,"frimousse-row":"",style:{contain:t?void 0:"content",height:t?void 0:"var(--frimousse-row-height)",display:"flex"}}}function Qe(e,t){return{"frimousse-category":"",style:{contain:"content",top:t?`calc(${e} * var(--frimousse-category-header-height) + ${t.startRowIndex} * var(--frimousse-row-height))`:void 0,height:t?`calc(var(--frimousse-category-header-height) + ${t.rowsCount} * var(--frimousse-row-height))`:void 0,width:"100%",pointerEvents:"none",position:"absolute"}}}function et(e,t=!1){return{category:e,"frimousse-category-header":"",style:{contain:t?void 0:"layout paint",height:t?void 0:"var(--frimousse-category-header-height)",pointerEvents:"auto",position:"sticky",top:0}}}function ze(e,t,o,r){return{"frimousse-list-sizer":"",style:{position:"relative",boxSizing:"border-box",height:`calc(${e} * var(--frimousse-row-height) + ${t} * var(--frimousse-category-header-height))`,paddingTop:`calc(${o} * var(--frimousse-row-height) + ${r} * var(--frimousse-category-header-height))`}}}function Ke(e,t,o){return{"aria-colcount":e,"aria-rowcount":t,"frimousse-list":"",style:{"--frimousse-list-columns":e,...o},role:"grid"}}function Ot(e){e.preventDefault()}var _t=K(({Emoji:e,emoji:t,columnIndex:o,rowIndex:r})=>{let n=C(),s=L(n,c=>N(c)?.emoji===t.emoji),a=D(()=>{n.get().onEmojiSelect(t)},[t]),i=D(()=>{n.get().onActiveEmojiChange("pointer",o,r)},[o,r]),m=D(()=>{n.get().onActiveEmojiReset()},[]);return E(e,{...Ze(t,o,s),onClick:a,onPointerDown:Ot,onPointerEnter:i,onPointerLeave:m})}),Nt=K(({Row:e,Emoji:t,rowIndex:o})=>{let r=C(),n=L(r,s=>s.data?.rows[o],Ve);return n?E(e,{...Xe(o),children:n.emojis.map((s,a)=>E(_t,{Emoji:t,columnIndex:a,emoji:s,rowIndex:o},s.label))}):null}),Wt=K(({CategoryHeader:e,categoryIndex:t})=>{let o=C(),r=L(o,n=>n.data?.categories[t],ee);return r?E("div",{...Qe(t,r),children:E(e,{...et({label:r.label})})}):null}),Ue=K(({CategoryHeader:e,Row:t,Emoji:o})=>{let r=V(null),n=C(),s=M(n,"columns"),a=oe(()=>Array(s).fill({emoji:"\u{1F642}",label:""}),[s]),i=oe(()=>({label:"Category"}),[]),m=V(null),c=V(null);return I(()=>{let f=r.current?.parentElement?.parentElement;if(!f||!m.current||!c.current)return;let u=new ResizeObserver(l=>{for(let j of l){let g=j.contentRect.height,{onRowHeightChange:w,onCategoryHeaderHeightChange:P,rowHeight:T,categoryHeaderHeight:p}=n.get();j.target===m.current&&T!==g&&w(g),j.target===c.current&&p!==g&&P(g)}});u.observe(f),u.observe(m.current),u.observe(c.current);let{onRowHeightChange:h,onCategoryHeaderHeightChange:d}=n.get();return h(m.current.clientHeight),d(c.current.clientHeight),()=>{u.disconnect()}},[]),B("div",{"aria-hidden":!0,ref:r,style:{height:0,visibility:"hidden"},children:[E("div",{"frimousse-row-sizer":"",ref:m,children:E(t,{...Xe(-1,!0),children:a.map((f,u)=>E(o,{...Ze(f,u,!1)},u))})}),E("div",{...Qe(-1),children:E("div",{"frimousse-category-header-sizer":"",ref:c,children:E(e,{...et(i,!0)})})})]})});function Bt({category:e,...t}){return E("div",{...t,children:e.label})}function zt({emoji:e,...t}){return E("button",{type:"button",...t,children:e.emoji})}function Kt({...e}){return E("div",{...e})}var tt=z(({style:e,components:t,...o},r)=>{let n=C(),s=V(null),a=D(w=>{w&&(s.current=w,n.set({listRef:s}))},[]),i=t?.CategoryHeader??Bt,m=t?.Emoji??zt,c=t?.Row??Kt,f=M(n,"columns"),u=M(n,"viewportStartRowIndex"),h=M(n,"viewportEndRowIndex"),d=L(n,fe),l=L(n,Me,ee),j=oe(()=>l?.filter(w=>w<u).length??0,[l,u]),g=l?.length??0;return re(r,()=>s.current),!d||!l||g===0?E("div",{...Ke(f,0,e),...o,children:E("div",{...ze(0,0,0,0),children:E(Ue,{CategoryHeader:i,Emoji:m,Row:c})})}):E("div",{...Ke(f,d,e),...o,ref:a,children:B("div",{...ze(d,g,u,j),children:[E(Ue,{CategoryHeader:i,Emoji:m,Row:c}),Array.from({length:h-u+1},(w,P)=>{let T=u+P,p=l.indexOf(T);return B(Mt,{children:[p>=0&&E("div",{style:{height:"var(--frimousse-category-header-height)"}}),E(Nt,{Emoji:m,Row:c,rowIndex:T})]},T)}),Array.from({length:g},(w,P)=>E(Wt,{CategoryHeader:i,categoryIndex:P},P))]})})}),ot=z(({emoji:e,onClick:t,"aria-label":o="Change skin tone",...r},n)=>{let s=C(),a=L(s,Fe,ee),[i,m,c]=Q(e),f=oe(()=>Math.max(0,c.findIndex(w=>w.skinTone===i)),[i,c]),u=c[f],d=c[(f+1)%c.length].skinTone,l=i==="none"?void 0:a?.[i],j=d==="none"?void 0:a?.[d],g=D(w=>{t?.(w),w.isDefaultPrevented()||m(d)},[t,m,d]);return E("button",{type:"button",...r,"aria-label":o+(j?` (${j})`:""),"aria-live":"polite","aria-valuetext":l,"frimousse-skin-tone-selector":"",onClick:g,ref:n,children:u.emoji})});function rt({children:e,...t}){let o=C();return L(o,Ae)?E("span",{"frimousse-loading":"",...t,children:e}):null}function Ut({children:e}){let t=C(),o=L(t,Ie);return e({search:o})}function nt({children:e,...t}){let o=C();return L(o,De)?E("span",{"frimousse-empty":"",...t,children:typeof e=="function"?E(Ut,{children:e}):e}):null}function it({children:e}){let t=X();return e({emoji:t})}function st({children:e,emoji:t}){let[o,r,n]=Q(t);return e({skinTone:o,setSkinTone:r,skinToneVariations:n})}Je.displayName="EmojiPicker.Root";qe.displayName="EmojiPicker.Search";Ge.displayName="EmojiPicker.Viewport";tt.displayName="EmojiPicker.List";rt.displayName="EmojiPicker.Loading";nt.displayName="EmojiPicker.Empty";ot.displayName="EmojiPicker.SkinToneSelector";it.displayName="EmojiPicker.ActiveEmoji";st.displayName="EmojiPicker.SkinTone";export{at as EmojiPicker,X as useActiveEmoji,Q as useSkinTone};
//# sourceMappingURL=index.js.map