frimousse/dist/index.cjs

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

"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }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});var _react = require('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 (e2){}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 (e3){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 (e4){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:_nullishCoalesce(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=_nullishCoalesce(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 (e5){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)=>(_nullishCoalesce(r.get(i), () => (0)))-(_nullishCoalesce(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}}var _jsxruntime = require('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=()=>_nullishCoalesce(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]=_react.useState.call(void 0, e);return t}function Re(e){let t=_react.createContext.call(void 0, null);return{useStore:()=>{let n=_react.useContext.call(void 0, t);if(!n)throw new Error(e);return n},Provider:({store:n,children:i})=>_jsxruntime.jsx.call(void 0, t.Provider,{value:n,children:i})}}function C(e,t,o=Object.is){let[r,n]=_react.useState.call(void 0, ()=>t(e.get()));return _react.useEffect.call(void 0, ()=>e.subscribe(()=>{let i=t(e.get());n(s=>o(s,i)?s:i)}),[e,t,o]),_react.useDebugValue.call(void 0, r),r}function A(e,t,o){let r=_react.useCallback.call(void 0, 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=_nullishCoalesce(_optionalChain([c, 'optionalAccess', _2 => _2.data]), () => (u.data)),m=_nullishCoalesce(_optionalChain([c, 'optionalAccess', _3 => _3.categoryHeaderHeight]), () => (u.categoryHeaderHeight)),g=_nullishCoalesce(_optionalChain([c, 'optionalAccess', _4 => _4.rowHeight]), () => (u.rowHeight)),h=_nullishCoalesce(_optionalChain([c, 'optionalAccess', _5 => _5.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=_optionalChain([d, 'access', _6 => _6.rows, 'access', _7 => _7[p], 'optionalAccess', _8 => _8.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=_optionalChain([m, 'optionalAccess', _9 => _9.current]),b=_optionalChain([g, 'optionalAccess', _10 => _10.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:_optionalChain([e, 'access', _11 => _11.data, 'optionalAccess', _12 => _12.rows, 'access', _13 => _13[e.activeRowIndex], 'optionalAccess', _14 => _14.emojis, 'access', _15 => _15[e.activeColumnIndex]])}function Ae(e){return e.data===void 0||typeof _optionalChain([e, 'access', _16 => _16.data, 'optionalAccess', _17 => _17.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 _optionalChain([e, 'access', _18 => _18.data, 'optionalAccess', _19 => _19.rows, 'access', _20 => _20.length])}function Me(e){return _optionalChain([e, 'access', _21 => _21.data, 'optionalAccess', _22 => _22.categories, 'access', _23 => _23.length])}function Fe(e){return _optionalChain([e, 'access', _24 => _24.data, 'optionalAccess', _25 => _25.categoriesStartRowIndices])}function Ve(e){return _optionalChain([e, 'access', _26 => _26.data, 'optionalAccess', _27 => _27.skinTones])}function pe(e,t){return _optionalChain([e, 'optionalAccess', _28 => _28.emoji])===_optionalChain([t, 'optionalAccess', _29 => _29.emoji])}function Oe(e,t){return _optionalChain([e, 'optionalAccess', _30 => _30.categoryIndex])!==_optionalChain([t, 'optionalAccess', _31 => _31.categoryIndex])||_optionalChain([e, 'optionalAccess', _32 => _32.emojis, 'access', _33 => _33.length])!==_optionalChain([t, 'optionalAccess', _34 => _34.emojis, 'access', _35 => _35.length])?!1:!!_optionalChain([e, 'optionalAccess', _36 => _36.emojis, 'access', _37 => _37.every, 'call', _38 => _38((o,r)=>pe(o,_optionalChain([t, 'optionalAccess', _39 => _39.emojis, 'access', _40 => _40[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 _react.useDeferredValue.call(void 0, t)}function ee(e="\u270B"){let t=x(),o=A(t,"skinTone"),r=_react.useMemo.call(void 0, ()=>Ne(e),[e]),n=_react.useCallback.call(void 0, 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,(_nullishCoalesce(_optionalChain([t, 'optionalAccess', _41 => _41.timeout]), () => (50)))-(Date.now()-r))})},10)}return()=>{typeof window.cancelIdleCallback=="function"?window.cancelIdleCallback(o):window.clearTimeout(o)}}var D=typeof window<"u"?_react.useLayoutEffect:_react.useEffect;function ze(e){let t=_react.useRef.call(void 0, e);return D(()=>{t.current=e}),_react.useCallback.call(void 0, (...o)=>t.current(...o),[])}function Vt({emojiVersion:e,emojibaseUrl:t}){let[o,r]=_react.useState.call(void 0, void 0),n=x(),i=A(n,"locale"),s=A(n,"columns"),a=A(n,"skinTone"),c=A(n,"search");return _react.useEffect.call(void 0, ()=>{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]),_react.useEffect.call(void 0, ()=>{if(o)return Be(()=>{n.get().onDataChange(be(o,s,a,c))},{timeout:100})},[o,s,a,c]),null}var qe=_react.forwardRef.call(void 0, ({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]=_react.useState.call(void 0, !1),f=_react.useRef.call(void 0, null),b=_react.useCallback.call(void 0, 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=_react.useCallback.call(void 0, p=>{_optionalChain([s, 'optionalCall', _42 => _42(p)]);let{searchRef:y,viewportRef:S}=l.get(),H=p.target===_optionalChain([y, 'optionalAccess', _43 => _43.current])||p.target.hasAttribute("frimousse-search"),R=p.target===_optionalChain([S, 'optionalAccess', _44 => _44.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=_react.useCallback.call(void 0, p=>{_optionalChain([a, 'optionalCall', _45 => _45(p)]),!p.isDefaultPrevented()&&!p.currentTarget.contains(p.relatedTarget)&&k(!1)},[a]);return D(()=>{j||l.get().onActiveEmojiReset()},[j]),_react.useImperativeHandle.call(void 0, g,()=>f.current),_react.useEffect.call(void 0, ()=>{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(_optionalChain([S, 'optionalAccess', _46 => _46.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},[]),_jsxruntime.jsx.call(void 0, "div",{"data-focused":j?"":void 0,"frimousse-root":"",onBlurCapture:M,onFocusCapture:L,...m,ref:b,style:{"--frimousse-emoji-font":G,...u},children:_jsxruntime.jsxs.call(void 0, Ie,{store:l,children:[_jsxruntime.jsx.call(void 0, Vt,{emojiVersion:n,emojibaseUrl:i}),c]})})}),Ge=_react.forwardRef.call(void 0, ({value:e,defaultValue:t,onChange:o,...r},n)=>{let i=x(),s=_react.useRef.call(void 0, null),a=_react.useCallback.call(void 0, m=>{m&&(s.current=m,i.set({searchRef:s}))},[]),c=typeof e=="string",u=_react.useRef.call(void 0, c);_react.useEffect.call(void 0, ()=>{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=_react.useCallback.call(void 0, m=>{_optionalChain([o, 'optionalCall', _47 => _47(m)]),m.isDefaultPrevented()||i.get().onSearchChange(m.target.value)},[o]);return _react.useImperativeHandle.call(void 0, n,()=>s.current),_jsxruntime.jsx.call(void 0, "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=_react.memo.call(void 0, ()=>{let e=Q();return e?_jsxruntime.jsx.call(void 0, "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=_react.forwardRef.call(void 0, ({children:e,onScroll:t,onKeyDown:o,style:r,...n},i)=>{let s=x(),a=_react.useRef.call(void 0, null),c=_react.useCallback.call(void 0, g=>{g&&(a.current=g,s.set({viewportRef:a}))},[]),u=C(s,ge),d=C(s,Me),m=_react.useCallback.call(void 0, g=>{_optionalChain([t, 'optionalCall', _48 => _48(g)]),s.get().onViewportScroll(g.currentTarget.scrollTop)},[t]);return D(()=>{if(!a.current)return;let g=new ResizeObserver(([h])=>{let l=_nullishCoalesce(_optionalChain([h, 'optionalAccess', _49 => _49.borderBoxSize, 'access', _50 => _50[0], 'optionalAccess', _51 => _51.inlineSize]), () => (0)),j=_nullishCoalesce(_optionalChain([h, 'optionalAccess', _52 => _52.borderBoxSize, 'access', _53 => _53[0], 'optionalAccess', _54 => _54.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()}},[]),_react.useImperativeHandle.call(void 0, i,()=>a.current),_jsxruntime.jsxs.call(void 0, "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:[_jsxruntime.jsx.call(void 0, 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=_react.memo.call(void 0, ({Emoji:e,emoji:t,columnIndex:o,rowIndex:r})=>{let n=x(),i=C(n,u=>_optionalChain([B, 'call', _55 => _55(u), 'optionalAccess', _56 => _56.emoji])===t.emoji),s=_react.useCallback.call(void 0, ()=>{n.get().onEmojiSelect(t)},[t]),a=_react.useCallback.call(void 0, ()=>{n.get().onActiveEmojiChange("pointer",o,r)},[o,r]),c=_react.useCallback.call(void 0, ()=>{n.get().onActiveEmojiReset()},[]);return _jsxruntime.jsx.call(void 0, e,{...Xe(t,o,i),onClick:s,onPointerDown:_t,onPointerEnter:a,onPointerLeave:c})}),Wt=_react.memo.call(void 0, ({Row:e,Emoji:t,rowIndex:o})=>{let r=x(),n=C(r,i=>_optionalChain([i, 'access', _57 => _57.data, 'optionalAccess', _58 => _58.rows, 'access', _59 => _59[o]]),Oe);return n?_jsxruntime.jsx.call(void 0, e,{...Qe(o),children:n.emojis.map((i,s)=>_jsxruntime.jsx.call(void 0, Nt,{Emoji:t,columnIndex:s,emoji:i,rowIndex:o},i.label))}):null}),Bt=_react.memo.call(void 0, ({CategoryHeader:e,categoryIndex:t})=>{let o=x(),r=C(o,i=>_optionalChain([i, 'access', _60 => _60.data, 'optionalAccess', _61 => _61.categories, 'access', _62 => _62[t]]),te),n=A(o,"sticky");return r?_jsxruntime.jsx.call(void 0, "div",{...et(t,r),children:_jsxruntime.jsx.call(void 0, e,{...tt({label:r.label},!1,n)})}):null}),Ye=_react.memo.call(void 0, ({CategoryHeader:e,Row:t,Emoji:o})=>{let r=_react.useRef.call(void 0, null),n=x(),i=A(n,"columns"),s=_react.useMemo.call(void 0, ()=>Array(i).fill({emoji:"\u{1F642}",label:""}),[i]),a=_react.useMemo.call(void 0, ()=>({label:"Category"}),[]),c=_react.useRef.call(void 0, null),u=_react.useRef.call(void 0, null);return D(()=>{let d=_optionalChain([r, 'access', _63 => _63.current, 'optionalAccess', _64 => _64.parentElement, 'optionalAccess', _65 => _65.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()}},[]),_jsxruntime.jsxs.call(void 0, "div",{"aria-hidden":!0,ref:r,style:{height:0,visibility:"hidden"},children:[_jsxruntime.jsx.call(void 0, "div",{"frimousse-row-sizer":"",ref:c,children:_jsxruntime.jsx.call(void 0, t,{...Qe(-1,!0),children:s.map((d,m)=>_jsxruntime.jsx.call(void 0, o,{...Xe(d,m,!1)},m))})}),_jsxruntime.jsx.call(void 0, "div",{...et(-1),children:_jsxruntime.jsx.call(void 0, "div",{"frimousse-category-header-sizer":"",ref:u,children:_jsxruntime.jsx.call(void 0, e,{...tt(a,!0)})})})]})});function zt({category:e,...t}){return _jsxruntime.jsx.call(void 0, "div",{...t,children:e.label})}function Kt({emoji:e,...t}){return _jsxruntime.jsx.call(void 0, "button",{type:"button",...t,children:e.emoji})}function Ut({...e}){return _jsxruntime.jsx.call(void 0, "div",{...e})}var ot=_react.forwardRef.call(void 0, ({style:e,components:t,...o},r)=>{let n=x(),i=_react.useRef.call(void 0, null),s=_react.useCallback.call(void 0, f=>{f&&(i.current=f,n.set({listRef:i}))},[]),a=_nullishCoalesce(_optionalChain([t, 'optionalAccess', _66 => _66.CategoryHeader]), () => (zt)),c=_nullishCoalesce(_optionalChain([t, 'optionalAccess', _67 => _67.Emoji]), () => (Kt)),u=_nullishCoalesce(_optionalChain([t, 'optionalAccess', _68 => _68.Row]), () => (Ut)),d=A(n,"columns"),m=A(n,"viewportStartRowIndex"),g=A(n,"viewportEndRowIndex"),h=C(n,ge),l=C(n,Fe,te),j=_react.useMemo.call(void 0, ()=>_nullishCoalesce(_optionalChain([l, 'optionalAccess', _69 => _69.filter, 'call', _70 => _70(f=>f<m), 'access', _71 => _71.length]), () => (0)),[l,m]),k=_nullishCoalesce(_optionalChain([l, 'optionalAccess', _72 => _72.length]), () => (0));return _react.useImperativeHandle.call(void 0, r,()=>i.current),!h||!l||k===0?_jsxruntime.jsx.call(void 0, "div",{...Ue(d,0,e),...o,children:_jsxruntime.jsx.call(void 0, "div",{...Ke(0,0,0,0),children:_jsxruntime.jsx.call(void 0, Ye,{CategoryHeader:a,Emoji:c,Row:u})})}):_jsxruntime.jsx.call(void 0, "div",{...Ue(d,h,e),...o,ref:s,children:_jsxruntime.jsxs.call(void 0, "div",{...Ke(h,k,m,j),children:[_jsxruntime.jsx.call(void 0, Ye,{CategoryHeader:a,Emoji:c,Row:u}),Array.from({length:g-m+1},(f,b)=>{let L=m+b,M=l.indexOf(L);return _jsxruntime.jsxs.call(void 0, _react.Fragment,{children:[M>=0&&_jsxruntime.jsx.call(void 0, "div",{style:{height:"var(--frimousse-category-header-height)"}}),_jsxruntime.jsx.call(void 0, Wt,{Emoji:c,Row:u,rowIndex:L})]},L)}),Array.from({length:k},(f,b)=>_jsxruntime.jsx.call(void 0, Bt,{CategoryHeader:a,categoryIndex:b},b))]})})}),rt=_react.forwardRef.call(void 0, ({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=_react.useMemo.call(void 0, ()=>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:_optionalChain([s, 'optionalAccess', _73 => _73[a]]),j=h==="none"?void 0:_optionalChain([s, 'optionalAccess', _74 => _74[h]]),k=_react.useCallback.call(void 0, f=>{_optionalChain([t, 'optionalCall', _75 => _75(f)]),f.isDefaultPrevented()||c(h)},[t,c,h]);return _jsxruntime.jsx.call(void 0, "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)?_jsxruntime.jsx.call(void 0, "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)?_jsxruntime.jsx.call(void 0, "span",{"frimousse-empty":"",...t,children:typeof e=="function"?_jsxruntime.jsx.call(void 0, 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";exports.EmojiPicker = ct; exports.useActiveEmoji = Q; exports.useSkinTone = ee;
//# sourceMappingURL=index.cjs.map