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 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});var _react = require('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 (e2){}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 (e3){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 (e4){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:_nullishCoalesce(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=_nullishCoalesce(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 (e5){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)=>(_nullishCoalesce(r.get(s), () => (0)))-(_nullishCoalesce(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}}var _jsxruntime = require('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=()=>_nullishCoalesce(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]=_react.useState.call(void 0, e);return t}function Ce(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:s})=>_jsxruntime.jsx.call(void 0, t.Provider,{value:n,children:s})}}function L(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 s=t(e.get());n(a=>o(a,s)?a:s)}),[e,t,o]),_react.useDebugValue.call(void 0, r),r}function M(e,t,o){let r=_react.useCallback.call(void 0, 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=_nullishCoalesce(_optionalChain([i, 'optionalAccess', _2 => _2.data]), () => (m.data)),f=_nullishCoalesce(_optionalChain([i, 'optionalAccess', _3 => _3.categoryHeaderHeight]), () => (m.categoryHeaderHeight)),u=_nullishCoalesce(_optionalChain([i, 'optionalAccess', _4 => _4.rowHeight]), () => (m.rowHeight)),h=_nullishCoalesce(_optionalChain([i, 'optionalAccess', _5 => _5.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=_optionalChain([c, 'access', _6 => _6.rows, 'access', _7 => _7[p], 'optionalAccess', _8 => _8.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=_optionalChain([f, 'optionalAccess', _9 => _9.current]),g=_optionalChain([u, 'optionalAccess', _10 => _10.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:_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 De(e){return e.data===void 0||typeof _optionalChain([e, 'access', _16 => _16.data, 'optionalAccess', _17 => _17.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 _optionalChain([e, 'access', _18 => _18.data, 'optionalAccess', _19 => _19.rows, 'access', _20 => _20.length])}function $e(e){return _optionalChain([e, 'access', _21 => _21.data, 'optionalAccess', _22 => _22.categories, 'access', _23 => _23.length])}function Me(e){return _optionalChain([e, 'access', _24 => _24.data, 'optionalAccess', _25 => _25.categoriesStartRowIndices])}function Fe(e){return _optionalChain([e, 'access', _26 => _26.data, 'optionalAccess', _27 => _27.skinTones])}function ge(e,t){return _optionalChain([e, 'optionalAccess', _28 => _28.emoji])===_optionalChain([t, 'optionalAccess', _29 => _29.emoji])}function Ve(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)=>ge(o,_optionalChain([t, 'optionalAccess', _39 => _39.emojis, 'access', _40 => _40[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 _react.useDeferredValue.call(void 0, t)}function Q(e="\u270B"){let t=C(),o=M(t,"skinTone"),r=_react.useMemo.call(void 0, ()=>_e(e),[e]),n=_react.useCallback.call(void 0, 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,(_nullishCoalesce(_optionalChain([t, 'optionalAccess', _41 => _41.timeout]), () => (50)))-(Date.now()-r))})},10)}return()=>{typeof window.cancelIdleCallback=="function"?window.cancelIdleCallback(o):window.clearTimeout(o)}}var I=typeof window<"u"?_react.useLayoutEffect:_react.useEffect;function Be(e){let t=_react.useRef.call(void 0, e);return I(()=>{t.current=e}),_react.useCallback.call(void 0, (...o)=>t.current(...o),[])}function Ft({emojiVersion:e,emojibaseUrl:t}){let[o,r]=_react.useState.call(void 0, void 0),n=C(),s=M(n,"locale"),a=M(n,"columns"),i=M(n,"skinTone"),m=M(n,"search");return _react.useEffect.call(void 0, ()=>{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]),_react.useEffect.call(void 0, ()=>{if(o)return We(()=>{n.get().onDataChange(Pe(o,a,i,m))},{timeout:100})},[o,a,i,m]),null}var Je=_react.forwardRef.call(void 0, ({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]=_react.useState.call(void 0, !1),g=_react.useRef.call(void 0, null),w=_react.useCallback.call(void 0, 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=_react.useCallback.call(void 0, p=>{_optionalChain([a, 'optionalCall', _42 => _42(p)]);let{searchRef:y,viewportRef:S}=d.get(),R=p.target===_optionalChain([y, 'optionalAccess', _43 => _43.current])||p.target.hasAttribute("frimousse-search"),A=p.target===_optionalChain([S, 'optionalAccess', _44 => _44.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=_react.useCallback.call(void 0, p=>{_optionalChain([i, 'optionalCall', _45 => _45(p)]),!p.isDefaultPrevented()&&!p.currentTarget.contains(p.relatedTarget)&&j(!1)},[i]);return I(()=>{l||d.get().onActiveEmojiReset()},[l]),_react.useImperativeHandle.call(void 0, u,()=>g.current),_react.useEffect.call(void 0, ()=>{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(_optionalChain([S, 'optionalAccess', _46 => _46.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},[]),_jsxruntime.jsx.call(void 0, "div",{"data-focused":l?"":void 0,"frimousse-root":"",onBlurCapture:T,onFocusCapture:P,...f,ref:w,style:{"--frimousse-emoji-font":q,...c},children:_jsxruntime.jsxs.call(void 0, He,{store:d,children:[_jsxruntime.jsx.call(void 0, Ft,{emojiVersion:n,emojibaseUrl:s}),m]})})}),qe=_react.forwardRef.call(void 0, ({value:e,defaultValue:t,onChange:o,...r},n)=>{let s=C(),a=_react.useRef.call(void 0, null),i=_react.useCallback.call(void 0, u=>{u&&(a.current=u,s.set({searchRef:a}))},[]),m=typeof e=="string",c=_react.useRef.call(void 0, m);_react.useEffect.call(void 0, ()=>{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=_react.useCallback.call(void 0, u=>{_optionalChain([o, 'optionalCall', _47 => _47(u)]),u.isDefaultPrevented()||s.get().onSearchChange(u.target.value)},[o]);return _react.useImperativeHandle.call(void 0, n,()=>a.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:f,ref:i,value:e})}),Vt=_react.memo.call(void 0, ()=>{let e=X();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}),Ge=_react.forwardRef.call(void 0, ({children:e,onScroll:t,onKeyDown:o,style:r,...n},s)=>{let a=C(),i=_react.useRef.call(void 0, null),m=_react.useCallback.call(void 0, h=>{h&&(i.current=h,a.set({viewportRef:i}))},[]),c=L(a,fe),f=L(a,$e),u=_react.useCallback.call(void 0, h=>{_optionalChain([t, 'optionalCall', _48 => _48(h)]),a.get().onViewportScroll(h.currentTarget.scrollTop)},[t]);return I(()=>{if(!i.current)return;let h=new ResizeObserver(([d])=>{let l=_nullishCoalesce(_optionalChain([d, 'optionalAccess', _49 => _49.borderBoxSize, 'access', _50 => _50[0], 'optionalAccess', _51 => _51.inlineSize]), () => (0)),j=_nullishCoalesce(_optionalChain([d, 'optionalAccess', _52 => _52.borderBoxSize, 'access', _53 => _53[0], 'optionalAccess', _54 => _54.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()}},[]),_react.useImperativeHandle.call(void 0, s,()=>i.current),_jsxruntime.jsxs.call(void 0, "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:[_jsxruntime.jsx.call(void 0, 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=_react.memo.call(void 0, ({Emoji:e,emoji:t,columnIndex:o,rowIndex:r})=>{let n=C(),s=L(n,c=>_optionalChain([N, 'call', _55 => _55(c), 'optionalAccess', _56 => _56.emoji])===t.emoji),a=_react.useCallback.call(void 0, ()=>{n.get().onEmojiSelect(t)},[t]),i=_react.useCallback.call(void 0, ()=>{n.get().onActiveEmojiChange("pointer",o,r)},[o,r]),m=_react.useCallback.call(void 0, ()=>{n.get().onActiveEmojiReset()},[]);return _jsxruntime.jsx.call(void 0, e,{...Ze(t,o,s),onClick:a,onPointerDown:Ot,onPointerEnter:i,onPointerLeave:m})}),Nt=_react.memo.call(void 0, ({Row:e,Emoji:t,rowIndex:o})=>{let r=C(),n=L(r,s=>_optionalChain([s, 'access', _57 => _57.data, 'optionalAccess', _58 => _58.rows, 'access', _59 => _59[o]]),Ve);return n?_jsxruntime.jsx.call(void 0, e,{...Xe(o),children:n.emojis.map((s,a)=>_jsxruntime.jsx.call(void 0, _t,{Emoji:t,columnIndex:a,emoji:s,rowIndex:o},s.label))}):null}),Wt=_react.memo.call(void 0, ({CategoryHeader:e,categoryIndex:t})=>{let o=C(),r=L(o,n=>_optionalChain([n, 'access', _60 => _60.data, 'optionalAccess', _61 => _61.categories, 'access', _62 => _62[t]]),ee);return r?_jsxruntime.jsx.call(void 0, "div",{...Qe(t,r),children:_jsxruntime.jsx.call(void 0, e,{...et({label:r.label})})}):null}),Ue=_react.memo.call(void 0, ({CategoryHeader:e,Row:t,Emoji:o})=>{let r=_react.useRef.call(void 0, null),n=C(),s=M(n,"columns"),a=_react.useMemo.call(void 0, ()=>Array(s).fill({emoji:"\u{1F642}",label:""}),[s]),i=_react.useMemo.call(void 0, ()=>({label:"Category"}),[]),m=_react.useRef.call(void 0, null),c=_react.useRef.call(void 0, null);return I(()=>{let f=_optionalChain([r, 'access', _63 => _63.current, 'optionalAccess', _64 => _64.parentElement, 'optionalAccess', _65 => _65.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()}},[]),_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:m,children:_jsxruntime.jsx.call(void 0, t,{...Xe(-1,!0),children:a.map((f,u)=>_jsxruntime.jsx.call(void 0, o,{...Ze(f,u,!1)},u))})}),_jsxruntime.jsx.call(void 0, "div",{...Qe(-1),children:_jsxruntime.jsx.call(void 0, "div",{"frimousse-category-header-sizer":"",ref:c,children:_jsxruntime.jsx.call(void 0, e,{...et(i,!0)})})})]})});function Bt({category:e,...t}){return _jsxruntime.jsx.call(void 0, "div",{...t,children:e.label})}function zt({emoji:e,...t}){return _jsxruntime.jsx.call(void 0, "button",{type:"button",...t,children:e.emoji})}function Kt({...e}){return _jsxruntime.jsx.call(void 0, "div",{...e})}var tt=_react.forwardRef.call(void 0, ({style:e,components:t,...o},r)=>{let n=C(),s=_react.useRef.call(void 0, null),a=_react.useCallback.call(void 0, w=>{w&&(s.current=w,n.set({listRef:s}))},[]),i=_nullishCoalesce(_optionalChain([t, 'optionalAccess', _66 => _66.CategoryHeader]), () => (Bt)),m=_nullishCoalesce(_optionalChain([t, 'optionalAccess', _67 => _67.Emoji]), () => (zt)),c=_nullishCoalesce(_optionalChain([t, 'optionalAccess', _68 => _68.Row]), () => (Kt)),f=M(n,"columns"),u=M(n,"viewportStartRowIndex"),h=M(n,"viewportEndRowIndex"),d=L(n,fe),l=L(n,Me,ee),j=_react.useMemo.call(void 0, ()=>_nullishCoalesce(_optionalChain([l, 'optionalAccess', _69 => _69.filter, 'call', _70 => _70(w=>w<u), 'access', _71 => _71.length]), () => (0)),[l,u]),g=_nullishCoalesce(_optionalChain([l, 'optionalAccess', _72 => _72.length]), () => (0));return _react.useImperativeHandle.call(void 0, r,()=>s.current),!d||!l||g===0?_jsxruntime.jsx.call(void 0, "div",{...Ke(f,0,e),...o,children:_jsxruntime.jsx.call(void 0, "div",{...ze(0,0,0,0),children:_jsxruntime.jsx.call(void 0, Ue,{CategoryHeader:i,Emoji:m,Row:c})})}):_jsxruntime.jsx.call(void 0, "div",{...Ke(f,d,e),...o,ref:a,children:_jsxruntime.jsxs.call(void 0, "div",{...ze(d,g,u,j),children:[_jsxruntime.jsx.call(void 0, Ue,{CategoryHeader:i,Emoji:m,Row:c}),Array.from({length:h-u+1},(w,P)=>{let T=u+P,p=l.indexOf(T);return _jsxruntime.jsxs.call(void 0, _react.Fragment,{children:[p>=0&&_jsxruntime.jsx.call(void 0, "div",{style:{height:"var(--frimousse-category-header-height)"}}),_jsxruntime.jsx.call(void 0, Nt,{Emoji:m,Row:c,rowIndex:T})]},T)}),Array.from({length:g},(w,P)=>_jsxruntime.jsx.call(void 0, Wt,{CategoryHeader:i,categoryIndex:P},P))]})})}),ot=_react.forwardRef.call(void 0, ({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=_react.useMemo.call(void 0, ()=>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:_optionalChain([a, 'optionalAccess', _73 => _73[i]]),j=d==="none"?void 0:_optionalChain([a, 'optionalAccess', _74 => _74[d]]),g=_react.useCallback.call(void 0, w=>{_optionalChain([t, 'optionalCall', _75 => _75(w)]),w.isDefaultPrevented()||m(d)},[t,m,d]);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:g,ref:n,children:u.emoji})});function rt({children:e,...t}){let o=C();return L(o,Ae)?_jsxruntime.jsx.call(void 0, "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)?_jsxruntime.jsx.call(void 0, "span",{"frimousse-empty":"",...t,children:typeof e=="function"?_jsxruntime.jsx.call(void 0, 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";exports.EmojiPicker = at; exports.useActiveEmoji = X; exports.useSkinTone = Q;
//# sourceMappingURL=index.cjs.map