react-emoji-toggle-button
Version:
A flexible and reusable React package to use an emoji picker and connect it with a text input using Ref. Toggle emoji button for React apps.
172 lines (147 loc) • 36.3 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react");var re={exports:{}},ee={};/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/var he;function Le(){if(he)return ee;he=1;var t=Symbol.for("react.transitional.element"),e=Symbol.for("react.fragment");function r(i,s,d){var u=null;if(d!==void 0&&(u=""+d),s.key!==void 0&&(u=""+s.key),"key"in s){d={};for(var c in s)c!=="key"&&(d[c]=s[c])}else d=s;return s=d.ref,{$$typeof:t,type:i,key:u,ref:s!==void 0?s:null,props:d}}return ee.Fragment=e,ee.jsx=r,ee.jsxs=r,ee}var te={};/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/var pe;function $e(){return pe||(pe=1,process.env.NODE_ENV!=="production"&&function(){function t(n){if(n==null)return null;if(typeof n=="function")return n.$$typeof===L?null:n.displayName||n.name||null;if(typeof n=="string")return n;switch(n){case o:return"Fragment";case l:return"Profiler";case a:return"StrictMode";case S:return"Suspense";case w:return"SuspenseList";case A:return"Activity"}if(typeof n=="object")switch(typeof n.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),n.$$typeof){case g:return"Portal";case k:return(n.displayName||"Context")+".Provider";case b:return(n._context.displayName||"Context")+".Consumer";case x:var p=n.render;return n=n.displayName,n||(n=p.displayName||p.name||"",n=n!==""?"ForwardRef("+n+")":"ForwardRef"),n;case O:return p=n.displayName||null,p!==null?p:t(n.type)||"Memo";case _:p=n._payload,n=n._init;try{return t(n(p))}catch{}}return null}function e(n){return""+n}function r(n){try{e(n);var p=!1}catch{p=!0}if(p){p=console;var C=p.error,I=typeof Symbol=="function"&&Symbol.toStringTag&&n[Symbol.toStringTag]||n.constructor.name||"Object";return C.call(p,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",I),e(n)}}function i(n){if(n===o)return"<>";if(typeof n=="object"&&n!==null&&n.$$typeof===_)return"<...>";try{var p=t(n);return p?"<"+p+">":"<...>"}catch{return"<...>"}}function s(){var n=F.A;return n===null?null:n.getOwner()}function d(){return Error("react-stack-top-frame")}function u(n){if(W.call(n,"key")){var p=Object.getOwnPropertyDescriptor(n,"key").get;if(p&&p.isReactWarning)return!1}return n.key!==void 0}function c(n,p){function C(){$||($=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",p))}C.isReactWarning=!0,Object.defineProperty(n,"key",{get:C,configurable:!0})}function f(){var n=t(this.type);return Y[n]||(Y[n]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),n=this.props.ref,n!==void 0?n:null}function h(n,p,C,I,z,N,q,X){return C=N.ref,n={$$typeof:E,type:n,key:p,props:N,_owner:z},(C!==void 0?C:null)!==null?Object.defineProperty(n,"ref",{enumerable:!1,get:f}):Object.defineProperty(n,"ref",{enumerable:!1,value:null}),n._store={},Object.defineProperty(n._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(n,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(n,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:q}),Object.defineProperty(n,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.freeze&&(Object.freeze(n.props),Object.freeze(n)),n}function m(n,p,C,I,z,N,q,X){var P=p.children;if(P!==void 0)if(I)if(G(P)){for(I=0;I<P.length;I++)j(P[I]);Object.freeze&&Object.freeze(P)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else j(P);if(W.call(p,"key")){P=t(n);var D=Object.keys(p).filter(function(K){return K!=="key"});I=0<D.length?"{key: someKey, "+D.join(": ..., ")+": ...}":"{key: someKey}",J[P+I]||(D=0<D.length?"{"+D.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,I,P,D,P),J[P+I]=!0)}if(P=null,C!==void 0&&(r(C),P=""+C),u(p)&&(r(p.key),P=""+p.key),"key"in p){C={};for(var Q in p)Q!=="key"&&(C[Q]=p[Q])}else C=p;return P&&c(C,typeof n=="function"?n.displayName||n.name||"Unknown":n),h(n,P,N,z,s(),C,q,X)}function j(n){typeof n=="object"&&n!==null&&n.$$typeof===E&&n._store&&(n._store.validated=1)}var T=v,E=Symbol.for("react.transitional.element"),g=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),l=Symbol.for("react.profiler"),b=Symbol.for("react.consumer"),k=Symbol.for("react.context"),x=Symbol.for("react.forward_ref"),S=Symbol.for("react.suspense"),w=Symbol.for("react.suspense_list"),O=Symbol.for("react.memo"),_=Symbol.for("react.lazy"),A=Symbol.for("react.activity"),L=Symbol.for("react.client.reference"),F=T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,W=Object.prototype.hasOwnProperty,G=Array.isArray,V=console.createTask?console.createTask:function(){return null};T={"react-stack-bottom-frame":function(n){return n()}};var $,Y={},U=T["react-stack-bottom-frame"].bind(T,d)(),B=V(i(d)),J={};te.Fragment=o,te.jsx=function(n,p,C,I,z){var N=1e4>F.recentlyCreatedOwnerStacks++;return m(n,p,C,!1,I,z,N?Error("react-stack-top-frame"):U,N?V(i(n)):B)},te.jsxs=function(n,p,C,I,z){var N=1e4>F.recentlyCreatedOwnerStacks++;return m(n,p,C,!0,I,z,N?Error("react-stack-top-frame"):U,N?V(i(n)):B)}}()),te}var ge;function De(){return ge||(ge=1,process.env.NODE_ENV==="production"?re.exports=Le():re.exports=$e()),re.exports}var R=De();function le(){return le=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var i in r)({}).hasOwnProperty.call(r,i)&&(t[i]=r[i])}return t},le.apply(null,arguments)}function be(t){if(t===void 0)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function ce(t,e){return ce=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(r,i){return r.__proto__=i,r},ce(t,e)}function We(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,ce(t,e)}var ve=Number.isNaN||function(e){return typeof e=="number"&&e!==e};function Ue(t,e){return!!(t===e||ve(t)&&ve(e))}function Be(t,e){if(t.length!==e.length)return!1;for(var r=0;r<t.length;r++)if(!Ue(t[r],e[r]))return!1;return!0}function se(t,e){e===void 0&&(e=Be);var r,i=[],s,d=!1;function u(){for(var c=[],f=0;f<arguments.length;f++)c[f]=arguments[f];return d&&r===this&&e(c,i)||(s=t.apply(this,c),d=!0,r=this,i=c),s}return u}var He=typeof performance=="object"&&typeof performance.now=="function",Se=He?function(){return performance.now()}:function(){return Date.now()};function Ee(t){cancelAnimationFrame(t.id)}function Ve(t,e){var r=Se();function i(){Se()-r>=e?t.call(null):s.id=requestAnimationFrame(i)}var s={id:requestAnimationFrame(i)};return s}var ae=-1;function ke(t){if(t===void 0&&(t=!1),ae===-1||t){var e=document.createElement("div"),r=e.style;r.width="50px",r.height="50px",r.overflow="scroll",document.body.appendChild(e),ae=e.offsetWidth-e.clientWidth,document.body.removeChild(e)}return ae}var Z=null;function ye(t){if(t===void 0&&(t=!1),Z===null||t){var e=document.createElement("div"),r=e.style;r.width="50px",r.height="50px",r.overflow="scroll",r.direction="rtl";var i=document.createElement("div"),s=i.style;return s.width="100px",s.height="100px",e.appendChild(i),document.body.appendChild(e),e.scrollLeft>0?Z="positive-descending":(e.scrollLeft=1,e.scrollLeft===0?Z="negative":Z="positive-ascending"),document.body.removeChild(e),Z}return Z}process.env.NODE_ENV;var Ye=150,qe=function(e,r){return e},oe=null,ne=null;process.env.NODE_ENV!=="production"&&typeof window<"u"&&typeof window.WeakSet<"u"&&(oe=new WeakSet,ne=new WeakSet);function Ge(t){var e,r=t.getItemOffset,i=t.getEstimatedTotalSize,s=t.getItemSize,d=t.getOffsetForIndexAndAlignment,u=t.getStartIndexForOffset,c=t.getStopIndexForStartIndex,f=t.initInstanceProps,h=t.shouldResetStyleCacheOnItemSizeChange,m=t.validateProps;return e=function(j){We(T,j);function T(g){var o;return o=j.call(this,g)||this,o._instanceProps=f(o.props,be(o)),o._outerRef=void 0,o._resetIsScrollingTimeoutId=null,o.state={instance:be(o),isScrolling:!1,scrollDirection:"forward",scrollOffset:typeof o.props.initialScrollOffset=="number"?o.props.initialScrollOffset:0,scrollUpdateWasRequested:!1},o._callOnItemsRendered=void 0,o._callOnItemsRendered=se(function(a,l,b,k){return o.props.onItemsRendered({overscanStartIndex:a,overscanStopIndex:l,visibleStartIndex:b,visibleStopIndex:k})}),o._callOnScroll=void 0,o._callOnScroll=se(function(a,l,b){return o.props.onScroll({scrollDirection:a,scrollOffset:l,scrollUpdateWasRequested:b})}),o._getItemStyle=void 0,o._getItemStyle=function(a){var l=o.props,b=l.direction,k=l.itemSize,x=l.layout,S=o._getItemStyleCache(h&&k,h&&x,h&&b),w;if(S.hasOwnProperty(a))w=S[a];else{var O=r(o.props,a,o._instanceProps),_=s(o.props,a,o._instanceProps),A=b==="horizontal"||x==="horizontal",L=b==="rtl",F=A?O:0;S[a]=w={position:"absolute",left:L?void 0:F,right:L?F:void 0,top:A?0:O,height:A?"100%":_,width:A?_:"100%"}}return w},o._getItemStyleCache=void 0,o._getItemStyleCache=se(function(a,l,b){return{}}),o._onScrollHorizontal=function(a){var l=a.currentTarget,b=l.clientWidth,k=l.scrollLeft,x=l.scrollWidth;o.setState(function(S){if(S.scrollOffset===k)return null;var w=o.props.direction,O=k;if(w==="rtl")switch(ye()){case"negative":O=-k;break;case"positive-descending":O=x-b-k;break}return O=Math.max(0,Math.min(O,x-b)),{isScrolling:!0,scrollDirection:S.scrollOffset<O?"forward":"backward",scrollOffset:O,scrollUpdateWasRequested:!1}},o._resetIsScrollingDebounced)},o._onScrollVertical=function(a){var l=a.currentTarget,b=l.clientHeight,k=l.scrollHeight,x=l.scrollTop;o.setState(function(S){if(S.scrollOffset===x)return null;var w=Math.max(0,Math.min(x,k-b));return{isScrolling:!0,scrollDirection:S.scrollOffset<w?"forward":"backward",scrollOffset:w,scrollUpdateWasRequested:!1}},o._resetIsScrollingDebounced)},o._outerRefSetter=function(a){var l=o.props.outerRef;o._outerRef=a,typeof l=="function"?l(a):l!=null&&typeof l=="object"&&l.hasOwnProperty("current")&&(l.current=a)},o._resetIsScrollingDebounced=function(){o._resetIsScrollingTimeoutId!==null&&Ee(o._resetIsScrollingTimeoutId),o._resetIsScrollingTimeoutId=Ve(o._resetIsScrolling,Ye)},o._resetIsScrolling=function(){o._resetIsScrollingTimeoutId=null,o.setState({isScrolling:!1},function(){o._getItemStyleCache(-1,null)})},o}T.getDerivedStateFromProps=function(o,a){return Je(o,a),m(o),null};var E=T.prototype;return E.scrollTo=function(o){o=Math.max(0,o),this.setState(function(a){return a.scrollOffset===o?null:{scrollDirection:a.scrollOffset<o?"forward":"backward",scrollOffset:o,scrollUpdateWasRequested:!0}},this._resetIsScrollingDebounced)},E.scrollToItem=function(o,a){a===void 0&&(a="auto");var l=this.props,b=l.itemCount,k=l.layout,x=this.state.scrollOffset;o=Math.max(0,Math.min(o,b-1));var S=0;if(this._outerRef){var w=this._outerRef;k==="vertical"?S=w.scrollWidth>w.clientWidth?ke():0:S=w.scrollHeight>w.clientHeight?ke():0}this.scrollTo(d(this.props,o,a,x,this._instanceProps,S))},E.componentDidMount=function(){var o=this.props,a=o.direction,l=o.initialScrollOffset,b=o.layout;if(typeof l=="number"&&this._outerRef!=null){var k=this._outerRef;a==="horizontal"||b==="horizontal"?k.scrollLeft=l:k.scrollTop=l}this._callPropsCallbacks()},E.componentDidUpdate=function(){var o=this.props,a=o.direction,l=o.layout,b=this.state,k=b.scrollOffset,x=b.scrollUpdateWasRequested;if(x&&this._outerRef!=null){var S=this._outerRef;if(a==="horizontal"||l==="horizontal")if(a==="rtl")switch(ye()){case"negative":S.scrollLeft=-k;break;case"positive-ascending":S.scrollLeft=k;break;default:var w=S.clientWidth,O=S.scrollWidth;S.scrollLeft=O-w-k;break}else S.scrollLeft=k;else S.scrollTop=k}this._callPropsCallbacks()},E.componentWillUnmount=function(){this._resetIsScrollingTimeoutId!==null&&Ee(this._resetIsScrollingTimeoutId)},E.render=function(){var o=this.props,a=o.children,l=o.className,b=o.direction,k=o.height,x=o.innerRef,S=o.innerElementType,w=o.innerTagName,O=o.itemCount,_=o.itemData,A=o.itemKey,L=A===void 0?qe:A,F=o.layout,W=o.outerElementType,G=o.outerTagName,V=o.style,$=o.useIsScrolling,Y=o.width,U=this.state.isScrolling,B=b==="horizontal"||F==="horizontal",J=B?this._onScrollHorizontal:this._onScrollVertical,n=this._getRangeToRender(),p=n[0],C=n[1],I=[];if(O>0)for(var z=p;z<=C;z++)I.push(v.createElement(a,{data:_,key:L(z,_),index:z,isScrolling:$?U:void 0,style:this._getItemStyle(z)}));var N=i(this.props,this._instanceProps);return v.createElement(W||G||"div",{className:l,onScroll:J,ref:this._outerRefSetter,style:le({position:"relative",height:k,width:Y,overflow:"auto",WebkitOverflowScrolling:"touch",willChange:"transform",direction:b},V)},v.createElement(S||w||"div",{children:I,ref:x,style:{height:B?"100%":N,pointerEvents:U?"none":void 0,width:B?N:"100%"}}))},E._callPropsCallbacks=function(){if(typeof this.props.onItemsRendered=="function"){var o=this.props.itemCount;if(o>0){var a=this._getRangeToRender(),l=a[0],b=a[1],k=a[2],x=a[3];this._callOnItemsRendered(l,b,k,x)}}if(typeof this.props.onScroll=="function"){var S=this.state,w=S.scrollDirection,O=S.scrollOffset,_=S.scrollUpdateWasRequested;this._callOnScroll(w,O,_)}},E._getRangeToRender=function(){var o=this.props,a=o.itemCount,l=o.overscanCount,b=this.state,k=b.isScrolling,x=b.scrollDirection,S=b.scrollOffset;if(a===0)return[0,0,0,0];var w=u(this.props,S,this._instanceProps),O=c(this.props,w,S,this._instanceProps),_=!k||x==="backward"?Math.max(1,l):1,A=!k||x==="forward"?Math.max(1,l):1;return[Math.max(0,w-_),Math.max(0,Math.min(a-1,O+A)),w,O]},T}(v.PureComponent),e.defaultProps={direction:"ltr",itemData:void 0,layout:"vertical",overscanCount:2,useIsScrolling:!1},e}var Je=function(e,r){var i=e.children,s=e.direction,d=e.height,u=e.layout,c=e.innerTagName,f=e.outerTagName,h=e.width,m=r.instance;if(process.env.NODE_ENV!=="production"){(c!=null||f!=null)&&ne&&!ne.has(m)&&(ne.add(m),console.warn("The innerTagName and outerTagName props have been deprecated. Please use the innerElementType and outerElementType props instead."));var j=s==="horizontal"||u==="horizontal";switch(s){case"horizontal":case"vertical":oe&&!oe.has(m)&&(oe.add(m),console.warn('The direction prop should be either "ltr" (default) or "rtl". Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.'));break;case"ltr":case"rtl":break;default:throw Error('An invalid "direction" prop has been specified. Value should be either "ltr" or "rtl". '+('"'+s+'" was specified.'))}switch(u){case"horizontal":case"vertical":break;default:throw Error('An invalid "layout" prop has been specified. Value should be either "horizontal" or "vertical". '+('"'+u+'" was specified.'))}if(i==null)throw Error('An invalid "children" prop has been specified. Value should be a React component. '+('"'+(i===null?"null":typeof i)+'" was specified.'));if(j&&typeof h!="number")throw Error('An invalid "width" prop has been specified. Horizontal lists must specify a number for width. '+('"'+(h===null?"null":typeof h)+'" was specified.'));if(!j&&typeof d!="number")throw Error('An invalid "height" prop has been specified. Vertical lists must specify a number for height. '+('"'+(d===null?"null":typeof d)+'" was specified.'))}},Xe=Ge({getItemOffset:function(e,r){var i=e.itemSize;return r*i},getItemSize:function(e,r){var i=e.itemSize;return i},getEstimatedTotalSize:function(e){var r=e.itemCount,i=e.itemSize;return i*r},getOffsetForIndexAndAlignment:function(e,r,i,s,d,u){var c=e.direction,f=e.height,h=e.itemCount,m=e.itemSize,j=e.layout,T=e.width,E=c==="horizontal"||j==="horizontal",g=E?T:f,o=Math.max(0,h*m-g),a=Math.min(o,r*m),l=Math.max(0,r*m-g+m+u);switch(i==="smart"&&(s>=l-g&&s<=a+g?i="auto":i="center"),i){case"start":return a;case"end":return l;case"center":{var b=Math.round(l+(a-l)/2);return b<Math.ceil(g/2)?0:b>o+Math.floor(g/2)?o:b}case"auto":default:return s>=l&&s<=a?s:s<l?l:a}},getStartIndexForOffset:function(e,r){var i=e.itemCount,s=e.itemSize;return Math.max(0,Math.min(i-1,Math.floor(r/s)))},getStopIndexForStartIndex:function(e,r,i){var s=e.direction,d=e.height,u=e.itemCount,c=e.itemSize,f=e.layout,h=e.width,m=s==="horizontal"||f==="horizontal",j=r*c,T=m?h:d,E=Math.ceil((T+i-j)/c);return Math.max(0,Math.min(u-1,r+E-1))},initInstanceProps:function(e){},shouldResetStyleCacheOnItemSizeChange:!0,validateProps:function(e){var r=e.itemSize;if(process.env.NODE_ENV!=="production"&&typeof r!="number")throw Error('An invalid "itemSize" prop has been specified. Value should be a number. '+('"'+(r===null?"null":typeof r)+'" was specified.'))}});const Ke='"Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif';function Ze(){const t=document.createElement("canvas");t.width=t.height=1;const e=t.getContext("2d",{willReadFrequently:!0});return e.textBaseline="top",e.font=`100px ${Ke}`,e.scale(.01,.01),e}function xe(t,e,r){return t.clearRect(0,0,100,100),t.fillStyle=r,t.fillText(e,0,0),t.getImageData(0,0,1,1).data.join(",")}function je(t){const e=Ze(),r=xe(e,t,"#fff"),i=xe(e,t,"#000");return i===r&&!i.startsWith("0,0,0,")}function Qe(t="Twemoji Country Flags",e="https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2"){if(typeof window<"u"&&je("😊")&&!je("🇨🇭")){const r=document.createElement("style");return r.textContent=`@font-face {
font-family: "${t}";
unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067,
U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
src: url('${e}') format('woff2');
font-display: swap;
}`,document.head.appendChild(r),!0}return!1}const Re=()=>{v.useEffect(()=>{Qe()},[])},we=["😀","😎","🥳","😍","🤩","😐","😫","😓","🙂↔️","🙂↕️","🥹","😖","😞","😵","😰","😭","😂","🥰","😵💫","🤣","🤐","🤑","🥵","😡","🤯","😬"],et=({setCurrentEmoji:t,showEmojiPicker:e})=>{if(!e){const r=Math.floor(Math.random()*we.length);t(we[r])}},tt=({position:t,pickerWidth:e,pickerHeight:r})=>{switch(console.log(t,e,r),t){case"top-right":return{bottom:`calc(100% + ${r}px)`,right:`-calc(100% + ${e}px)`};case"top-left":return{bottom:`calc(100% + ${r}px)`,right:`calc(100% + ${e}px)`};case"bottom-right":return{top:"100%",right:`-calc(100% + ${e}px)`};case"bottom-left":return{top:"100%",right:`calc(100% + ${e}px)`};default:return{top:"100%",left:"50%",transform:"translateX(-50%)"}}},Oe={light:{backgroundColor:"#fff",textColor:"#222",borderColor:"#ccc",tabActiveBackgroundColor:"#eee",tabActiveBorderColor:"#ccc",tabHoverBackgroundColor:"#f5f5f5",scrollbarThumbColor:"#c1c1c1",scrollbarThumbHoverColor:"#a8a8a8",inputBorderColor:"#eee",boxShadowColor:"rgba(0,0,0,0.1)",noResultsTextColor:"#777"},dark:{backgroundColor:"#222",textColor:"#f5f5f5",borderColor:"#444",tabActiveBackgroundColor:"#444",tabActiveBorderColor:"#555",tabHoverBackgroundColor:"#333",scrollbarThumbColor:"#555",scrollbarThumbHoverColor:"#666",inputBorderColor:"#444",boxShadowColor:"rgba(0,0,0,0.3)",noResultsTextColor:"#aaa"}},rt=(t,e)=>{if(!t)return;const r=t.selectionStart||0,i=t.selectionEnd||0,s=t.value;t.value=s.substring(0,r)+e+s.substring(i),t.focus(),t.setSelectionRange(r+e.length,r+e.length);const d=new Event("input",{bubbles:!0,cancelable:!0});t.dispatchEvent(d)},ot='"Twemoji Country Flags", "Helvetica", "Comic Sans", serif',nt=6,it=40,st=320,at=420,lt=330,ct=["🖕","🖕🏻","🖕🏼","🖕🏽","🖕🏾","🖕🏿","🫃","🫃🏻","🫃🏼","🫃🏽","🫃🏾","🫃🏿","🫄","🫄🏻","🫄🏼","🫄🏽","🫄🏾","🫄🏿","✡️","⚧️","🇮🇱","🏳️🌈","🏳️⚧️"],ut={sm:{emojiItemSize:28,pickerWidth:260,pickerHeight:320,listHeight:220},md:{emojiItemSize:36,pickerWidth:320,pickerHeight:380,listHeight:280},lg:{emojiItemSize:44,pickerWidth:400,pickerHeight:480,listHeight:370}},Te={"Recent Emojis":"🕒","Smileys & Emotion":"😂","People & Body":"👋",Component:"🏽","Animals & Nature":"🐄","Food & Drink":"🍹","Travel & Places":"🚃",Activities:"⚽",Objects:"🛠️",Symbols:"🔅",Flags:"🚩"},dt=()=>R.jsx("svg",{className:"emoji-picker-spinner",viewBox:"25 25 50 50",children:R.jsx("circle",{className:"emoji-picker-spinner-path",r:"20",cy:"50",cx:"50"})}),ft=()=>{const t=v.useRef(null),e=v.useRef(!1),r=v.useRef(0),i=v.useRef(0),s=.1,d=v.useCallback(()=>{const u=t.current;u&&(Math.abs(i.current-r.current)>1?(i.current+=(r.current-i.current)*s,u.scrollLeft=i.current,requestAnimationFrame(d)):e.current=!1)},[]);return v.useEffect(()=>{const u=t.current;if(!u)return;const c=f=>{f.preventDefault(),r.current+=f.deltaY;const h=u.scrollWidth-u.clientWidth;r.current=Math.min(Math.max(r.current,0),h),e.current||(e.current=!0,d())};return u.addEventListener("wheel",c),()=>{u.removeEventListener("wheel",c)}},[d]),{containerRef:t}},mt=({activeCategory:t,emojiJsonData:e,emojisPerRow:r,searchTerm:i,recentEmojis:s=[],recentEmojisLabel:d="Recent"})=>{const u=v.useMemo(()=>{var j;if(t===d)return s;const f=(j=e.emojis)==null?void 0:j[t];if(!f)return[];const h=[];for(const T in f)h.push(...f[T]);if(!i.trim())return h;const m=i.toLowerCase();return h.filter(T=>T.name.toLowerCase().includes(m)||T.emoji.includes(m))},[e,t,i,s,d]),c=v.useMemo(()=>{const f=[];for(let h=0;h<u.length;h+=r)f.push({type:"emoji-row",emojis:u.slice(h,h+r)});return f},[u,r]);return{filteredEmojis:u,groupedAndFilteredEmojis:c}},ht=()=>{const[t,e]=v.useState(null),[r,i]=v.useState(!1),s=v.useRef(null),d=v.useRef(null);return{longPressEmoji:t,setLongPressEmoji:e,showSkinToneVariants:r,setShowSkinToneVariants:i,longPressTimeoutRef:s,skinToneVariantsRef:d,handleEmojiMouseDown:(h,m)=>{h.hasSkinTones&&h.skinToneVariants&&(m.preventDefault(),s.current=setTimeout(()=>{e(h),i(!0)},500))},handleEmojiMouseUp:()=>{s.current&&(clearTimeout(s.current),s.current=null)},handleEmojiMouseLeave:()=>{s.current&&(clearTimeout(s.current),s.current=null)}}},pt=({onClose:t,pickerRef:e,setLongPressEmoji:r,setShowSkinToneVariants:i,showSkinToneVariants:s,skinToneVariantsRef:d})=>{v.useEffect(()=>{const u=c=>{const f=e.current,h=d.current,m=c.target;if(!(h&&h.contains(m))){if(s&&f&&f.contains(m)){i(!1),r(null);return}f&&!f.contains(m)&&t&&t()}};return document.addEventListener("mousedown",u),()=>{document.removeEventListener("mousedown",u)}},[t,e,s,r,i,d])},gt=({onClose:t,pickerRef:e})=>{v.useEffect(()=>{const r=i=>{e.current&&!e.current.contains(i.target)&&t&&t()};return document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[t,e])},bt=({activeCategory:t,allCategories:e,setActiveCategory:r})=>{v.useEffect(()=>{e.length>0&&!t&&r(e[0])},[e,t,r])},vt=({pickerRef:t,setLongPressEmoji:e,showSkinToneVariants:r})=>{v.useEffect(()=>{t.current&&(r||e(null))},[r,t,e])},St=({classNames:t,emojiItemSize:e,fontFamily:r,handleEmojiClick:i,handleEmojiMouseDown:s,handleEmojiMouseLeave:d,handleEmojiMouseUp:u,onEmojiButtonLongPress:c,item:f,emojisPerRow:h,style:m,styles:j})=>{if(f.type!=="emoji-row")return null;const T=h-f.emojis.length;return R.jsxs("div",{style:{...m,display:"flex",height:e},className:t.emojiRow,children:[f.emojis.map(E=>{const g=v.createRef();return R.jsxs("button",{ref:g,onClick:()=>i(E.emoji,E),onMouseDown:o=>{s(E,o),E.hasSkinTones&&c&&setTimeout(()=>{g.current&&c(g.current.getBoundingClientRect())},500)},onMouseUp:u,onMouseLeave:d,title:E.name,style:{background:"none",border:"none",fontSize:"1.4rem",margin:"2px 2px",padding:"0px",cursor:"pointer",flex:1,textAlign:"center",position:"relative",fontFamily:r,...j.emojiButton},className:t.emojiButton,children:[E.emoji,E.hasSkinTones&&R.jsx("span",{style:{position:"absolute",bottom:"2px",right:"2px",width:"6px",height:"6px",backgroundColor:"#888",borderRadius:"50%"}})]},E.name+E.code.join(""))}),Array.from({length:T}).map((E,g)=>R.jsx("div",{className:t.emojiButton,style:{flex:1,margin:"2px 2px",padding:"0px"}},`empty-slot-${g}`))]})},Ce="recent-emojis",Et=36,kt=(t=!0)=>{const[e,r]=v.useState([]);return v.useEffect(()=>{if(t)try{const s=localStorage.getItem(Ce);s&&r(JSON.parse(s))}catch(s){console.error("Error loading recent emojis:",s)}},[t]),{recentEmojis:e,addRecentEmoji:s=>{t&&r(d=>{const u=d.filter(f=>f.emoji!==s.emoji),c=[s,...u].slice(0,Et);try{localStorage.setItem(Ce,JSON.stringify(c))}catch(f){console.error("Error saving recent emojis:",f)}return c})}}},yt=({inputRef:t,isLoading:e,pickerRef:r,emojiJsonData:i,onClose:s,onEmojiSelect:d,styles:u={},classNames:c={},config:f={},initialCategory:h,theme:m="light",lang:j="en",enableTabsTitleEmoji:T=!0,preventBadEmojis:E=!0,badEmojiList:g=[]})=>{var fe,me;const{emojisPerRow:o=nt,emojiItemSize:a=it,pickerWidth:l=st,pickerHeight:b=at,listHeight:k=lt,fontFamily:x=ot,searchPlaceholder:S=j==="en"?"Search emojis...":"إبحث عن ايموجي...",noResultsMessage:w=j==="en"?"No emojis found.":"لا يوجد ايموجي",applyEmojiFont:O=!0,themeConfig:_=Oe,enableRecentEmojis:A=!0,recentEmojisLabel:L=j==="en"?"Recent Emojis":"ايموجي حديثا"}=f,{addRecentEmoji:F,recentEmojis:W}=kt(A),[G,V]=v.useState(""),[$,Y]=v.useState(h||""),[U,B]=v.useState(null),J=y=>{B({top:y.top+window.scrollY,left:y.left+window.scrollX})},{handleEmojiMouseDown:n,handleEmojiMouseLeave:p,handleEmojiMouseUp:C,longPressEmoji:I,setLongPressEmoji:z,setShowSkinToneVariants:N,showSkinToneVariants:q,skinToneVariantsRef:X}=ht();pt({onClose:s,pickerRef:r,setLongPressEmoji:z,setShowSkinToneVariants:N,showSkinToneVariants:q,skinToneVariantsRef:X}),vt({pickerRef:r,setLongPressEmoji:z,showSkinToneVariants:q}),console.log("picker width: ",(fe=r.current)==null?void 0:fe.offsetWidth),console.log("picker height: ",(me=r.current)==null?void 0:me.offsetHeight);const P=v.useMemo(()=>{if(!E)return i;const y={...i};return y.emojis=Object.fromEntries(Object.entries(i.emojis||{}).map(([H,ie])=>[H,Object.fromEntries(Object.entries(ie).map(([Ne,Me])=>[Ne,Me.filter(Fe=>!g.includes(Fe.emoji))]))])),y},[i,E,g]),D=v.useMemo(()=>{const y=Object.keys(P.emojis||{});return A&&W.length>0?[L,...y]:y},[P,A,W.length,L]);Re();const{containerRef:Q}=ft();bt({activeCategory:$,allCategories:D,setActiveCategory:Y});const{groupedAndFilteredEmojis:K}=mt({activeCategory:$,emojiJsonData:E?P:i,emojisPerRow:o,searchTerm:G,recentEmojis:W,recentEmojisLabel:j==="en"?"Recent Emojis":"ايموجي حديثا"}),ue=(y,H)=>{d&&d(y),t.current&&(rt(t.current,y),O&&(t.current.style.fontFamily=x)),A&&H&&F(H)};gt({onClose:s,pickerRef:r});const Ie=({index:y,style:H})=>{const ie=K[y];return R.jsx(St,{classNames:c,emojiItemSize:a,emojisPerRow:o,fontFamily:x,handleEmojiClick:ue,handleEmojiMouseDown:n,handleEmojiMouseLeave:p,handleEmojiMouseUp:C,onEmojiButtonLongPress:J,item:ie,style:H,styles:u})},M=m==="light"||m==="dark"?_[m]:_.custom&&_.custom[m]?_.custom[m]:_.light,_e={border:"1px solid #ccc",borderRadius:"8px",padding:"10px",width:l,height:b,backgroundColor:M.backgroundColor,color:M.textColor,boxShadow:`0 4px 12px ${M.boxShadowColor}`,position:"absolute",zIndex:1e3,display:"flex",flexDirection:"column",fontFamily:x,...u.container},Pe={display:"flex",marginBottom:"8px",overflowX:"auto",fontFamily:x,...u.tabs},ze=y=>({flexShrink:0,padding:"6px 10px",marginRight:"4px",backgroundColor:y?M.tabActiveBackgroundColor:"transparent",color:M.textColor,border:`1px solid ${y?M.tabActiveBorderColor:M.borderColor}`,borderRadius:"6px",cursor:"pointer",fontWeight:y?"bold":"normal",fontSize:"1rem",whiteSpace:"nowrap",...y?u.activeTabButton:u.tabButton}),Ae={width:"90%",padding:"8px",marginBottom:"8px",border:`"1px solid ${M.inputBorderColor}`,borderRadius:"4px",backgroundColor:M.backgroundColor,color:M.textColor,...u.searchInput},de={textAlign:"center",color:M.noResultsTextColor,flexGrow:1,...u.noResultsMessage};return R.jsxs("div",{ref:r,style:_e,className:`${c.container||""} emoji-picker-theme-${m}`,"data-theme":m,"data-lang":j,dir:j==="en"?"ltr":"rtl",children:[R.jsx("div",{style:Pe,className:c.tabs,ref:Q,children:D.map(y=>R.jsx("button",{onClick:()=>Y(y),style:ze(y===$),className:y===$?c.activeTabButton:c.tabButton,children:T&&Te[y]?Te[y]:y},y))}),R.jsx("input",{type:"text",placeholder:S,value:G,onChange:y=>V(y.target.value),style:Ae,className:c.searchInput}),e==="pending"&&R.jsx("div",{style:de,children:R.jsx(dt,{})}),K.length===0&&e==="failed"&&R.jsx("div",{style:de,className:c.noResultsMessage,children:w}),q&&I&&I.skinToneVariants&&R.jsx("div",{ref:X,style:{position:"absolute",zIndex:1001,backgroundColor:M.backgroundColor,border:`1px solid ${M.borderColor}`,borderRadius:"8px",padding:"8px",boxShadow:`0 4px 12px ${M.boxShadowColor}`,display:"flex",flexDirection:"row",top:U?`${U.top}px`:"50%",left:"50%",transform:"translate(-50%, -190%)"},children:I.skinToneVariants.map((y,H)=>R.jsx("button",{onClick:()=>{ue(y.emoji),N(!1)},title:y.name,style:{background:"none",border:"none",fontSize:"1.4rem",margin:"2px 8px",padding:"8px",cursor:"pointer",textAlign:"center",fontFamily:x},children:y.emoji},`skin-tone-variant-${H}${y.name+y.code.join("-")}`))}),K.length!==0&&e==="success"&&R.jsx(Xe,{height:k,itemCount:K.length,itemSize:a,width:"100%",style:u.emojiList,className:c.emojiList,children:Ie})]})},xt=({pickerRef:t,showEmojiPicker:e})=>{const[r,i]=v.useState({width:0,height:0});return v.useLayoutEffect(()=>{if(e&&t.current){const{offsetWidth:s,offsetHeight:d}=t.current;i({width:s,height:d})}},[e,t]),{pickerSize:r}},jt=({currentEmoji:t,setCurrentEmoji:e,setShowEmojiPicker:r,showEmojiPicker:i,theme:s="light"})=>R.jsx("button",{"aria-label":i?"Close-Picker":"Open-Picker","aria-expanded":i,type:"button",className:`emoji-button ${i?"active":""} emoji-button-theme-${s}`,onClick:()=>r(!i),onMouseEnter:()=>et({setCurrentEmoji:e,showEmojiPicker:i}),"data-theme":s,children:t},i?"Close-Picker":"Open-Picker"),wt=({lang:t,showEmojiPicker:e})=>{const[r,i]=v.useState({emojis:{}}),[s,d]=v.useState("pending"),u=c=>{const f={...c};return Object.keys(f.emojis).forEach(h=>{const m=f.emojis[h];Object.keys(m).forEach(j=>{const T=m[j],E=[],g={};T.forEach(o=>{if(o.name.includes("skin tone")){const a=o.name.split(":")[0].trim();g[a]||(g[a]=[]),g[a].push(o)}else g[o.name]||(g[o.name]=[]),g[o.name].unshift(o)}),Object.keys(g).forEach(o=>{const a=g[o];if(a.length>1){const l={...a[0],skinToneVariants:a,hasSkinTones:!0};E.push(l)}else E.push(a[0])}),m[j]=E})}),f};return v.useEffect(()=>{if(!e)return;let c=!1;return(async()=>{d("pending");try{const m=await fetch(`https://cdn.jsdelivr.net/gh/Mahmoud-walid/react-emoji-toggle-button@emoji-lang-data/emoji-lang-data/categories.with.modifiers${t==="ar"?"-ar":""}.json`);if(!m.ok)throw new Error(`Failed to load emoji data: ${m.status}`);const j=await m.json(),T=u(j);c||(i(T),d("success"))}catch(h){console.error("Error loading emoji data:",h),c||d("failed")}})(),()=>{c=!0}},[t,e]),{emojiData:r,isLoading:s}},Tt=({lang:t,textInputRef:e})=>{v.useEffect(()=>{e.current&&(e.current.dir=t==="en"?"ltr":"rtl",e.current.placeholder=t==="en"?"Type a message...":"اكتب رسالة...")},[t,e])},Ct=()=>{const[t,e]=v.useState(!1),[r,i]=v.useState("😀"),s=v.useRef(null);return{showEmojiPicker:t,setShowEmojiPicker:e,currentEmoji:r,setCurrentEmoji:i,pickerRef:s}},Rt=()=>R.jsx("style",{children:`
.emoji-picker-container {
position: relative;
user-select: none;
}
.emoji-picker-container *::-webkit-scrollbar {
width: 6px;
height: 6px;
}
/* Light theme scrollbar */
.emoji-picker-theme-light *::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 10px;
}
.emoji-picker-theme-light *::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
/* Dark theme scrollbar */
.emoji-picker-theme-dark *::-webkit-scrollbar-thumb {
background: #555;
border-radius: 10px;
}
.emoji-picker-theme-dark *::-webkit-scrollbar-thumb:hover {
background: #666;
}
/* Hide scrollbar track for both themes */
.emoji-picker-theme-light *::-webkit-scrollbar-track,
.emoji-picker-theme-dark *::-webkit-scrollbar-track {
background: transparent;
border-radius: 0;
}
/* For Firefox */
.emoji-picker-container * {
scrollbar-width: thin;
}
.emoji-picker-theme-light * {
scrollbar-color: #c1c1c1 transparent;
}
.emoji-picker-theme-dark * {
scrollbar-color: #555 transparent;
}
/* ====================================== */
.emoji-button {
background-color: transparent;
border: 2px solid #e0e0e0;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Light theme button */
.emoji-button-theme-light {
border-color: #e0e0e0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Dark theme button */
.emoji-button-theme-dark {
border-color: #444;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.emoji-button:hover {
border-color: #ffcc00;
box-shadow: 0 5px 15px rgba(255, 204, 0, 0.3);
animation: pulse 1s infinite;
}
.emoji-button.active {
color: white;
transform: rotate(360deg);
transition: transform 0.5s ease-in-out, background-color 0.3s ease;
}
.emoji-picker-wrapper {
transform-origin: top center;
z-index: 1;
}
/* Add support for custom themes */
[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) {
/* Custom themes will be handled via inline styles */
}
/* Spinner styles for loading */
svg.emoji-picker-spinner {
width: 3.25em;
transform-origin: center;
animation: rotate4 2s linear infinite;
}
circle.emoji-picker-spinner-path {
fill: none;
stroke: hsl(214, 97%, 59%);
stroke-width: 2;
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
stroke-linecap: round;
animation: dash4 1.5s ease-in-out infinite;
}
@keyframes rotate4 {
100% {
transform: rotate(360deg);
}
}
@keyframes dash4 {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dashoffset: -125px;
}
}
`}),Ot=({textInputRef:t,classNames:e,config:r,initialCategory:i,onEmojiSelect:s,styles:d,position:u="top-left",theme:c="light",themeConfig:f=Oe,lang:h="en",enableRecentEmojis:m=!0,sizes:j={},size:T="md",enableTabsTitleEmoji:E=!0,preventBadEmojis:g=!0,badEmojiList:o=ct})=>{const{currentEmoji:a,pickerRef:l,setCurrentEmoji:b,setShowEmojiPicker:k,showEmojiPicker:x}=Ct();Re();const{pickerSize:S}=xt({pickerRef:l,showEmojiPicker:x}),w={...r,themeConfig:f,enableRecentEmojis:m,...j,...ut[T]},{emojiData:O,isLoading:_}=wt({lang:h,showEmojiPicker:x});return console.log("isLoading",_),Tt({lang:h,textInputRef:t}),R.jsxs(R.Fragment,{children:[R.jsx(Rt,{}),R.jsxs("div",{className:`emoji-picker-container emoji-picker-theme-${c}`,style:{fontFamily:'"Twemoji Country Flags", "Helvetica", "Comic Sans", serif'},"data-theme":c,children:[R.jsx(jt,{currentEmoji:a,setCurrentEmoji:b,setShowEmojiPicker:k,showEmojiPicker:x,theme:c}),x&&R.jsx("div",{className:`emoji-picker-wrapper emoji-picker-position-${u} emoji-picker-theme-${c}`,style:{position:"absolute",...tt({position:u,pickerHeight:S.height,pickerWidth:S.width})},"data-theme":c,children:R.jsx(yt,{isLoading:_,classNames:e,config:w,initialCategory:i,onEmojiSelect:s,styles:d,inputRef:t,emojiJsonData:O,onClose:()=>k(!1),pickerRef:l,theme:c,lang:h,enableTabsTitleEmoji:E,preventBadEmojis:g,badEmojiList:o})})]})]})};exports.EmojiPickerButton=Ot;