@dialpad/dialtone/dist/vue3/lib/emoji-picker/emoji-picker.cjs

Dialpad's Dialtone design system monorepo

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),w=require("@dialpad/dialtone-icons/vue3"),x=require("../input/input.cjs"),J=require("../button/button.cjs"),ee=require("../../common/utils/index.cjs"),a=require("./emoji-picker-constants.cjs"),te=require("../tab/tab-group.cjs"),oe=require("../tab/tab.cjs"),O=require("@dialpad/dialtone-emojis"),le=require("../tooltip/tooltip.cjs"),ne={class:"d-emoji-picker__search d-emoji-picker__alignment"},se={__name:"emoji_search",props:{searchPlaceholderLabel:{type:String,required:!0},modelValue:{type:String,default:""}},emits:["update:modelValue","focus-emoji-selector","focus-tabset","select-first-emoji"],setup(l,{expose:k,emit:_}){const r=_,f=e.ref(null);function I(){r("update:modelValue",""),p()}function p(){f.value.focus()}return e.onMounted(()=>{p()}),k({focusSearchInput:p}),(S,m)=>(e.openBlock(),e.createElementBlock("div",ne,[e.createVNode(e.unref(x.default),{id:"searchInput",ref_key:"searchInput",ref:f,placeholder:l.searchPlaceholderLabel,"model-value":l.modelValue,"onUpdate:modelValue":m[0]||(m[0]=i=>S.$emit("update:modelValue",i)),onKeydown:[m[1]||(m[1]=e.withKeys(i=>S.$emit("focus-tabset"),["up"])),m[2]||(m[2]=e.withKeys(e.withModifiers(i=>S.$emit("focus-emoji-selector"),["prevent"]),["down"])),m[3]||(m[3]=e.withKeys(i=>S.$emit("select-first-emoji"),["enter"]))]},e.createSlots({leftIcon:e.withCtx(()=>[e.createVNode(e.unref(w.DtIconSearch),{size:"200"})]),_:2},[l.modelValue.length>0?{name:"rightIcon",fn:e.withCtx(()=>[e.createVNode(e.unref(J.default),{importance:"clear",size:"xs",class:"d-emoji-picker__search-x-button",circle:"",kind:"muted",onClick:I},{icon:e.withCtx(()=>[e.createVNode(e.unref(w.DtIconClose),{size:"200"})]),_:1})]),key:"0"}:void 0]),1032,["placeholder","model-value"])]))}},re={class:"d-emoji-picker__tabset"},ie={__name:"emoji_tabset",props:{showRecentlyUsedTab:{type:Boolean,default:!1},showCustomEmojisTab:{type:Boolean,default:!1},scrollIntoTab:{type:Number,required:!0},emojiFilter:{type:String,default:""},tabsetLabels:{type:Array,required:!0}},emits:["selected-tabset","focus-search-input","focus-skin-selector"],setup(l,{expose:k,emit:_}){const r=l,f=_,I=[{label:a.EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED,icon:w.DtIconClock},{label:a.EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE,icon:w.DtIconSatisfied},{label:a.EMOJI_PICKER_CATEGORIES.NATURE,icon:w.DtIconLivingThing},{label:a.EMOJI_PICKER_CATEGORIES.FOOD,icon:w.DtIconFood},{label:a.EMOJI_PICKER_CATEGORIES.ACTIVITY,icon:w.DtIconObject},{label:a.EMOJI_PICKER_CATEGORIES.TRAVEL,icon:w.DtIconTransportation},{label:a.EMOJI_PICKER_CATEGORIES.OBJECTS,icon:w.DtIconLightbulb},{label:a.EMOJI_PICKER_CATEGORIES.SYMBOLS,icon:w.DtIconHeart},{label:a.EMOJI_PICKER_CATEGORIES.FLAGS,icon:w.DtIconFlag},{label:a.EMOJI_PICKER_CATEGORIES.CUSTOM,icon:w.DtIconTiktok}],p=e.computed(()=>{const t=r.showRecentlyUsedTab?I:I.slice(1);return r.showCustomEmojisTab||t.pop(),t.map((o,s)=>({...o,label:r.tabsetLabels[s],id:(s+1).toString(),panelId:(s+1).toString()}))}),S=e.computed(()=>r.emojiFilter.length>0),m=e.ref("1"),i=e.ref([]);e.watch(()=>r.scrollIntoTab,()=>{S.value||(m.value=(r.scrollIntoTab+1).toString())}),e.watch(S,()=>{S.value&&(m.value=null)});function R(t){const o=parseInt(t);m.value=t,f("selected-tabset",o)}function L(t){i.value.push(ee.returnFirstEl(t.$el))}function T(){i.value[0].focus()}function u(t,o){t.key==="Enter"&&(R(o),i.value[o-1].blur()),t.key==="Tab"&&(t.preventDefault(),t.shiftKey?f("focus-skin-selector"):f("focus-search-input")),t.key==="ArrowDown"&&f("focus-search-input")}return k({focusTabset:T}),(t,o)=>(e.openBlock(),e.createElementBlock("div",re,[e.createVNode(e.unref(te.default),{size:"sm","tab-list-class":"d-emoji-picker__tabset-list",selected:m.value},{tabs:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,(s,b)=>(e.openBlock(),e.createBlock(e.unref(oe.default),{id:s.id,ref_for:!0,ref:d=>{d&&L(d)},key:s.id,"panel-id":s.panelId,label:s.label,"aria-controls":"d-emoji-picker-list",tabindex:b+1,onClickCapture:e.withModifiers(d=>R(s.id),["stop"]),onKeydown:d=>u(d,s.id)},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(s.icon),{size:"400"}))]),_:2},1032,["id","panel-id","label","tabindex","onClickCapture","onKeydown"]))),128))]),_:1},8,["selected"])]))}};function ae(){const l=e.ref([]),k=e.ref([]),_=e.ref(!1),r=e.ref(!0);function f(t,o){i(t,o-1)||(l.value[t-1]?i(t-1,l.value[t-1].length-1):i(l.value.length-1,l.value[l.value.length-1].length-1))}function I(t,o){i(t,o+1)||i(t+1,0)||i(0,0)}function p(t,o){i(0,o-1)||i(0,k.value.length-1)}function S(t,o){i(0,o+1)||i(0,0)}function m(t,o,s){_.value?t==="left"?p(o,s):t==="right"&&S(o,s):t==="left"?f(o,s):t==="right"&&I(o,s)}function i(t,o){var b,d,g;const s=_.value?(b=k.value)==null?void 0:b[o]:(g=(d=l.value)==null?void 0:d[t])==null?void 0:g[o];return s?(s.focus(),!0):!1}function R(t,o,s){l.value[o]||(l.value[o]=[]),l.value[o][s]=t}function L(t,o){k.value[o]=t}function T(t,o){var s;if(r.value=!1,t===a.ARROW_KEYS.ARROW_UP){const b=o%a.EMOJIS_PER_ROW;if(!i(0,o-a.EMOJIS_PER_ROW)){const d=k.value.length-k.value.length%a.EMOJIS_PER_ROW+b;i(0,d),i(0,d)||i(0,k.value.length-1)}}if(t===a.ARROW_KEYS.ARROW_DOWN&&!i(0,o+a.EMOJIS_PER_ROW)){const b=o%a.EMOJIS_PER_ROW;(s=k.value)!=null&&s[o+(a.EMOJIS_PER_ROW-b)]?i(0,k.value.length-1):i(0,b)}t===a.ARROW_KEYS.ARROW_LEFT&&m("left",0,o),t===a.ARROW_KEYS.ARROW_RIGHT&&m("right",0,o)}function u(t,o,s){var b,d;if(t==="ArrowUp"){const g=s%a.EMOJIS_PER_ROW;if(o===0){const y=a.EMOJIS_PER_ROW-l.value[l.value.length-1].length%a.EMOJIS_PER_ROW,C=l.value[l.value.length-1].length+y-(a.EMOJIS_PER_ROW-g);i(l.value.length-1,C)||i(l.value.length-1,l.value[l.value.length-1].length-1);return}if(!i(o,s-a.EMOJIS_PER_ROW)){const y=o-1<0?0:o-1,C=l.value[y].length,K=C-C%a.EMOJIS_PER_ROW+g;i(y,K)||i(o-1,l.value[o-1].length-1)}}if(t==="ArrowDown"&&!i(o,s+a.EMOJIS_PER_ROW)){const g=s%a.EMOJIS_PER_ROW;(d=(b=l.value)==null?void 0:b[o])!=null&&d[s+(a.EMOJIS_PER_ROW-g)]?i(o,l.value[o].length-1):i(o+1,g)||i(0,g)||i(0,l.value[0].length-1)}t==="ArrowLeft"&&m("left",o,s),t==="ArrowRight"&&m("right",o,s)}return{emojiFilteredRefs:k,isFiltering:_,hoverFirstEmoji:r,setEmojiRef:R,setFilteredRef:L,focusEmoji:i,handleArrowNavigationFiltered:T,handleArrowNavigation:u}}const ce={class:"d-emoji-picker__selector"},ue={key:0,class:"d-emoji-picker__search-label d-emoji-picker__alignment"},fe={key:0},de={class:"d-emoji-picker__tab"},me=["aria-label","onClick","onFocusin","onMouseover","onKeydown"],ve=["alt","aria-label","title","src"],be={key:2,class:"d-emoji-picker__alignment"},Ee={class:"d-emoji-picker__tab","data-qa":"filtered-emojis"},he=["aria-label","onClick","onFocusin","onMouseover","onKeydown"],pe=["alt","aria-label","title","src"],ke={__name:"emoji_selector",props:{emojiFilter:{type:String,default:""},skinTone:{type:String,required:!0},tabsetLabels:{type:Array,required:!0},selectedTabset:{type:Object,required:!0},searchResultsLabel:{type:String,required:!0},searchNoResultsLabel:{type:String,required:!0},recentlyUsedEmojis:{type:Array,default:()=>[]},customEmojis:{type:Array,default:()=>[]}},emits:["highlighted-emoji","selected-emoji","scroll-into-tab","scroll-bottom-reached","focus-skin-selector","focus-search-input"],setup(l,{expose:k,emit:_}){const r=l,f=_,{emojiFilteredRefs:I,isFiltering:p,hoverFirstEmoji:S,setEmojiRef:m,setFilteredRef:i,focusEmoji:R,handleArrowNavigationFiltered:L,handleArrowNavigation:T}=ae(),u=e.ref(null),t=e.ref(null),o=e.ref(null),s=["Recently used","People","Nature","Food","Activity","Travel","Objects","Symbols","Flags","Custom"],b=e.computed(()=>{let n=r.tabsetLabels.map(c=>({label:c,ref:e.ref(null)}));return r.recentlyUsedEmojis&&!r.recentlyUsedEmojis.length&&(n=r.tabsetLabels.slice(1).map(c=>({label:c,ref:e.ref(null)}))),r.customEmojis&&!r.customEmojis.length&&n.pop(),n}),d=e.ref(b.value[0].label),g=e.computed(()=>{const n=r.recentlyUsedEmojis.length?s.slice():s.slice(1);return r.customEmojis&&!r.customEmojis.length&&n.pop(),n}),y=e.ref([]),C=e.computed(()=>[...O.emojisGrouped[`People${r.skinTone}`],...O.emojisGrouped.Nature,...O.emojisGrouped.Food,...O.emojisGrouped[`Activity${r.skinTone}`],...O.emojisGrouped.Travel,...O.emojisGrouped[`Objects${r.skinTone}`],...O.emojisGrouped.Symbols,...O.emojisGrouped.Flags]),K=U(()=>{I.value=[],D()}),F=()=>{const n=t.value;n.scrollTop+n.clientHeight>=n.scrollHeight&&f("scroll-bottom-reached")};e.watch(C,()=>{D()},{immediate:!0}),e.watch(()=>r.recentlyUsedEmojis,()=>{O.emojisGrouped["Recently used"]=r.recentlyUsedEmojis},{immediate:!0}),e.watch(()=>r.customEmojis,()=>{O.emojisGrouped.Custom=r.customEmojis},{immediate:!0}),e.watch(()=>r.emojiFilter,()=>{W(),r.emojiFilter?p.value=!0:(p.value=!1,$(null)),K()}),e.watch(()=>r.selectedTabset,n=>{B(n.tabId)},{deep:!0});function M(n,c=!1){S.value=c,f("highlighted-emoji",n)}function D(){const n=r.emojiFilter.toLowerCase();y.value=C.value.filter(c=>{const E=c.name.toLowerCase().includes(n),h=c.keywords.some(v=>v.toLowerCase().includes(n));return E||h}),e.nextTick(()=>{n&&M(y.value[0],!0)})}function U(n,c=300){let E;return(...h)=>{clearTimeout(E),E=setTimeout(()=>n(...h),c)}}function q(n){return n.date_added?n.image:a.CDN_URL+n.unicode_character+".png"}function G(n){n.target.parentNode.style.display="none"}function B(n,c=!0){const h=b.value[n-1].ref.value[0];e.nextTick(()=>{const v=t.value,N=n===1?0:h.offsetTop-15;v.scrollTop=N,c&&R(n-1,0)})}function W(){const n=t.value;n.scrollTop=0}function z(){t.value.addEventListener("scroll",F)}function H(){o.value=new IntersectionObserver(async n=>{n.forEach(c=>{var v,N,j,P,V;const{target:E}=c,h=parseInt(E.dataset.index);c.isIntersecting&&E.offsetTop<=u.value.offsetTop+50?(d.value=((v=b.value[h-1])==null?void 0:v.label)??((N=b.value[0])==null?void 0:N.label),f("scroll-into-tab",h-1)):c.boundingClientRect.bottom<=((j=u.value)==null?void 0:j.getBoundingClientRect().bottom)?(f("scroll-into-tab",h),d.value=(P=b.value[h])==null?void 0:P.label):h===1&&(f("scroll-into-tab",h),d.value=(V=b.value[0])==null?void 0:V.label)})}),o.value.observe(u.value),Array.from(t.value.children).forEach((n,c)=>{o.value.observe(n),n.dataset.index=c})}const Y=(n,c,E)=>{if(n.preventDefault(),Object.values(a.ARROW_KEYS).includes(n.key)){L(n.key,c);return}switch(n.key){case"Tab":f("focus-skin-selector");break;case"Enter":A(E,n);break}},Q=(n,c,E,h)=>{if(n.preventDefault(),Object.values(a.ARROW_KEYS).includes(n.key)){T(n.key,c,E);return}switch(n.key){case"Tab":n.shiftKey?R(c,0)&&c>0?B(c,!0):(B(1,!1),f("focus-search-input")):R(c+1,0)?B(c+1+1,!1):f("focus-skin-selector");break;case"Enter":A(h,n);break}};function A(n,c){f("selected-emoji",{...n,shift_key:c.shiftKey})}function $(n){f("highlighted-emoji",n)}function X(){R(0,0)}function Z(){B(g.value.length,!0)}return e.onMounted(()=>{H(),z()}),e.onBeforeUnmount(()=>{o.value.disconnect(),t.value.removeEventListener("scroll",F)}),k({focusEmojiSelector:X,focusLastEmoji:Z}),(n,c)=>(e.openBlock(),e.createElementBlock("div",ce,[e.createElementVNode("div",{id:"d-emoji-picker-list",ref_key:"listRef",ref:t,class:"d-emoji-picker__list"},[l.emojiFilter?(e.openBlock(),e.createElementBlock("p",ue,e.toDisplayString(y.value.length>0?l.searchResultsLabel:l.searchNoResultsLabel),1)):(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"tabCategoryRef",ref:u,class:"d-emoji-picker__category d-emoji-picker__alignment"},[e.createElementVNode("p",null,e.toDisplayString(d.value),1)],512)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.value,(E,h)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:h,ref_for:!0,ref:E.ref,class:"d-emoji-picker__alignment"},[h?(e.openBlock(),e.createElementBlock("p",fe,e.toDisplayString(E.label),1)):e.createCommentVNode("",!0),e.createElementVNode("div",de,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(O.emojisGrouped)[g.value[h]+l.skinTone]?e.unref(O.emojisGrouped)[g.value[h]+l.skinTone]:e.unref(O.emojisGrouped)[g.value[h]],(v,N)=>(e.openBlock(),e.createElementBlock("button",{key:v.shortname,ref_for:!0,ref:j=>{j&&e.unref(m)(j,h,N)},type:"button","aria-label":v.name,onClick:j=>A(v,j),onFocusin:j=>$(v),onFocusout:c[0]||(c[0]=j=>$(null)),onMouseover:j=>$(v),onMouseleave:c[1]||(c[1]=j=>$(null)),onKeydown:j=>Q(j,h,N,v)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:v.name,"aria-label":v.name,title:v.name,src:q(v),onError:G},null,40,ve)],40,me))),128))])])),[[e.vShow,!l.emojiFilter]])),128)),l.emojiFilter?(e.openBlock(),e.createElementBlock("div",be,[e.createElementVNode("div",Ee,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.value,(E,h)=>(e.openBlock(),e.createElementBlock("button",{key:E.shortname,ref_for:!0,ref:v=>{v&&e.unref(i)(v,h)},type:"button","aria-label":E.name,class:e.normalizeClass({"hover-emoji":h===0&&e.unref(S)}),onClick:v=>A(E,v),onFocusin:v=>$(E),onFocusout:c[2]||(c[2]=v=>$(null)),onMouseover:v=>M(E),onMouseleave:c[3]||(c[3]=v=>M(null)),onKeydown:v=>Y(v,h,E)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:E.name,"aria-label":E.name,title:E.name,src:`${e.unref(a.CDN_URL)+E.unicode_character}.png`},null,8,pe)],42,he))),128))])])):e.createCommentVNode("",!0)],512)]))}},_e={"data-qa":"skin-selector"},Se={class:"d-emoji-picker__skin-list"},Re=["onKeydown","onClick"],ge=["alt","aria-label","title","src"],ye={class:"d-emoji-picker__skin-selected"},Ie=["aria-label"],je=["alt","aria-label","title","src"],Oe={__name:"emoji_skin_selector",props:{skinTone:{type:String,required:!0},isHovering:{type:Boolean,default:!1},skinSelectorButtonTooltipLabel:{type:String,required:!0}},emits:["skin-tone","focus-tabset","focus-last-emoji"],setup(l,{expose:k,emit:_}){const r=l,f=_,I=[{name:":wave_tone1:",unicode_output:"1f44b-1f3fb",skinTone:a.EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,skinCode:"_tone1"},{name:":wave_tone2:",unicode_output:"1f44b-1f3fc",skinTone:a.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,skinCode:"_tone2"},{name:":wave_tone3:",unicode_output:"1f44b-1f3fd",skinTone:a.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,skinCode:"_tone3"},{name:":wave_tone4:",unicode_output:"1f44b-1f3fe",skinTone:a.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,skinCode:"_tone4"},{name:":wave_tone5:",unicode_output:"1f44b-1f3ff",skinTone:a.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,skinCode:"_tone5"},{name:":wave:",unicode_output:"1f44b",skinTone:a.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,skinCode:""}],p=e.ref(!1),S=e.ref(null),m=e.ref([]);e.watchEffect(()=>r.isHovering&&(p.value=!1));const i=e.computed(()=>I.find(s=>s.skinTone===r.skinTone)),R=e.ref(i.value);e.watchEffect(()=>i.value&&(R.value=i.value));function L(s){m.value.push(s)}function T(){S.value.focus()}function u(s){R.value=s,p.value=!1,f("skin-tone",s.skinTone),e.nextTick(()=>T())}const t=(s,b,d)=>{var g,y,C;s.preventDefault(),s.key==="ArrowLeft"&&(d===0&&((g=m.value[m.value.length-1])==null||g.focus()),(y=m.value[d-1])==null||y.focus()),s.key==="ArrowRight"&&((C=m.value[d+1])==null||C.focus()),s.key==="Enter"&&(b?u(b):o()),s.key==="Tab"&&(s.shiftKey?f("focus-last-emoji"):f("focus-tabset"))};function o(){p.value=!p.value,e.nextTick(()=>m.value[0].focus())}return k({focusSkinSelector:T}),(s,b)=>(e.openBlock(),e.createElementBlock("div",_e,[e.withDirectives(e.createElementVNode("div",Se,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(I,(d,g)=>e.createElementVNode("button",{ref_for:!0,ref:y=>{y&&L(y)},key:d.name,class:e.normalizeClass({selected:R.value.skinCode===d.skinCode}),onKeydown:y=>t(y,d,g),onClick:y=>u(d)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:d.name,"aria-label":d.name,title:d.name,src:`${e.unref(a.CDN_URL)+d.unicode_output}.png`},null,8,ge)],42,Re)),64))],512),[[e.vShow,p.value]]),e.withDirectives(e.createElementVNode("div",ye,[e.createVNode(e.unref(le.default),{placement:"top-end"},{anchor:e.withCtx(()=>[e.createElementVNode("button",{ref_key:"skinSelectorRef",ref:S,"aria-label":l.skinSelectorButtonTooltipLabel,tabindex:"-1",onClick:o,onKeydown:b[0]||(b[0]=d=>t(d))},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:R.value.name,"aria-label":R.value.name,title:R.value.name,src:`${e.unref(a.CDN_URL)+R.value.unicode_output}.png`},null,8,je)],40,Ie)]),default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.skinSelectorButtonTooltipLabel)+" ",1)]),_:1})],512),[[e.vShow,!p.value]])]))}},we={class:"d-emoji-picker__data"},Te=["alt","aria-label","title","src"],Ce={__name:"emoji_description",props:{emoji:{type:Object,default:null}},setup(l){function k(_){return _.date_added?_.image:`${a.CDN_URL+_.unicode_character}.png`}return(_,r)=>{var f;return e.openBlock(),e.createElementBlock("div",we,[l.emoji?(e.openBlock(),e.createElementBlock("img",{key:0,class:"d-icon d-icon--size-500",alt:l.emoji.name,"aria-label":l.emoji.name,title:l.emoji.name,src:k(l.emoji)},null,8,Te)):e.createCommentVNode("",!0),e.createElementVNode("div",null,e.toDisplayString((f=l.emoji)==null?void 0:f.name),1)])}}},Le={class:"d-emoji-picker"},$e={class:"d-emoji-picker--header"},Ne={class:"d-emoji-picker--body"},Be={class:"d-emoji-picker--footer"},Ae={__name:"emoji_picker",props:{recentlyUsedEmojis:{type:Array,default:()=>[]},customEmojis:{type:Array},addEmojiLabel:{type:String,required:!1,default:"Add emoji"},searchPlaceholderLabel:{type:String,required:!0},searchResultsLabel:{type:String,required:!0},searchNoResultsLabel:{type:String,required:!0},tabSetLabels:{type:Array,required:!0},skinTone:{type:String,default:"Default"},skinSelectorButtonTooltipLabel:{type:String,required:!0},searchQuery:{type:String,default:""},showSearch:{type:Boolean,default:!0}},emits:["selected-emoji","scroll-bottom-reached","skin-tone","close","add-emoji"],setup(l,{emit:k}){const _=l,r=k,f=e.ref(_.searchQuery.value),I=e.ref(null),p=e.ref({}),S=e.ref(0),m=e.computed(()=>{var u;return((u=_.recentlyUsedEmojis)==null?void 0:u.length)>0}),i=e.computed(()=>{var u;return((u=_.customEmojis)==null?void 0:u.length)>0});e.watch(()=>_.searchQuery,u=>{f.value=u});function R(u){f.value="",p.value=u,p.value={...p.value,tabId:u}}function L(u){S.value=u}function T(u){I.value=u}return(u,t)=>(e.openBlock(),e.createElementBlock("div",Le,[e.createElementVNode("div",$e,[e.createVNode(ie,{ref:"tabsetRef","emoji-filter":f.value,"show-custom-emojis-tab":i.value,"show-recently-used-tab":m.value,"scroll-into-tab":S.value,"tabset-labels":l.tabSetLabels,onFocusSkinSelector:t[0]||(t[0]=o=>u.$refs.skinSelectorRef.focusSkinSelector()),onFocusSearchInput:t[1]||(t[1]=o=>l.showSearch?u.$refs.searchInputRef.focusSearchInput():u.$refs.emojiSelectorRef.focusEmojiSelector()),onSelectedTabset:R,onKeydown:t[2]||(t[2]=e.withKeys(o=>r("close"),["esc"]))},null,8,["emoji-filter","show-custom-emojis-tab","show-recently-used-tab","scroll-into-tab","tabset-labels"])]),e.createElementVNode("div",Ne,[l.showSearch?(e.openBlock(),e.createBlock(se,{key:0,ref:"searchInputRef",modelValue:f.value,"onUpdate:modelValue":t[3]||(t[3]=o=>f.value=o),"search-placeholder-label":l.searchPlaceholderLabel,onSelectFirstEmoji:t[4]||(t[4]=o=>r("selected-emoji",I.value)),onFocusTabset:t[5]||(t[5]=o=>u.$refs.tabsetRef.focusTabset()),onFocusEmojiSelector:t[6]||(t[6]=o=>u.$refs.emojiSelectorRef.focusEmojiSelector()),onKeydown:t[7]||(t[7]=e.withKeys(o=>r("close"),["esc"]))},null,8,["modelValue","search-placeholder-label"])):e.createCommentVNode("",!0),e.createVNode(ke,{ref:"emojiSelectorRef","emoji-filter":f.value,"skin-tone":l.skinTone,"tabset-labels":l.tabSetLabels,"search-results-label":l.searchResultsLabel,"search-no-results-label":l.searchNoResultsLabel,"recently-used-emojis":l.recentlyUsedEmojis,"custom-emojis":l.customEmojis,"selected-tabset":p.value,onScrollIntoTab:L,onHighlightedEmoji:T,onSelectedEmoji:t[8]||(t[8]=o=>r("selected-emoji",o)),onFocusSkinSelector:t[9]||(t[9]=o=>u.$refs.skinSelectorRef.focusSkinSelector()),onFocusSearchInput:t[10]||(t[10]=o=>l.showSearch?u.$refs.searchInputRef.focusSearchInput():u.$refs.tabsetRef.focusTabset()),onKeydown:t[11]||(t[11]=e.withKeys(o=>r("close"),["esc"])),onScrollBottomReached:t[12]||(t[12]=o=>r("scroll-bottom-reached"))},null,8,["emoji-filter","skin-tone","tabset-labels","search-results-label","search-no-results-label","recently-used-emojis","custom-emojis","selected-tabset"])]),e.createElementVNode("div",Be,[i.value&&!I.value?(e.openBlock(),e.createBlock(e.unref(J.default),{key:0,importance:"outlined","aria-label":l.addEmojiLabel,class:"d-emoji-picker__add-emoji",onClick:t[13]||(t[13]=o=>r("add-emoji"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.addEmojiLabel),1)]),_:1},8,["aria-label"])):e.createCommentVNode("",!0),e.createVNode(Ce,{emoji:I.value},null,8,["emoji"]),e.createVNode(Oe,{ref:"skinSelectorRef","is-hovering":!!I.value,"skin-selector-button-tooltip-label":l.skinSelectorButtonTooltipLabel,"skin-tone":l.skinTone,onSkinTone:t[14]||(t[14]=o=>r("skin-tone",o)),onFocusTabset:t[15]||(t[15]=o=>u.$refs.tabsetRef.focusTabset()),onFocusLastEmoji:t[16]||(t[16]=o=>u.$refs.emojiSelectorRef.focusLastEmoji()),onKeydown:t[17]||(t[17]=e.withKeys(o=>r("close"),["esc"]))},null,8,["is-hovering","skin-selector-button-tooltip-label","skin-tone"])])]))}};exports.default=Ae;
//# sourceMappingURL=emoji-picker.cjs.map