frimousse/dist/index.js

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

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