emoji-picker-react 4.6.9 → 4.6.10

package/dist/emoji-picker-react.esm.js

@@ -33,29 +33,103 @@ function asSelectors() {
   }).join('');
 }
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
 var stylesheet = /*#__PURE__*/createSheet('epr');
+var hidden = {
+  display: 'none',
+  opacity: '0',
+  pointerEvents: 'none',
+  visibility: 'hidden'
+};
 var commonStyles = /*#__PURE__*/stylesheet.create({
-  hidden: {
-    '.': ClassNames.hidden,
-    display: 'none',
-    opacity: '0',
-    pointerEvents: 'none',
-    visibility: 'hidden'
-  },
-  hiddenOnSearch: {
-    display: 'none',
-    opacity: '0',
-    pointerEvents: 'none',
-    visibility: 'hidden'
-  }
+  hidden: /*#__PURE__*/_extends({
+    '.': ClassNames.hidden
+  }, hidden)
 });
 var commonInteractionStyles = /*#__PURE__*/stylesheet.create({
-  '.epr-main:has(input:not(:placeholder-shown))': {
-    categoryBtn: {
-      ':hover': {
-        opacity: '1',
-        backgroundPositionY: 'var(--epr-category-navigation-button-size)'
-      }
+  '.epr-main': {
+    ':has(input:not(:placeholder-shown))': {
+      categoryBtn: {
+        ':hover': {
+          opacity: '1',
+          backgroundPositionY: 'var(--epr-category-navigation-button-size)'
+        }
+      },
+      hiddenOnSearch: /*#__PURE__*/_extends({
+        '.': ClassNames.hiddenOnSearch
+      }, hidden)
+    },
+    ':has(input(:placeholder-shown))': {
+      visibleOnSearchOnly: hidden
     }
   },
   '.EmojiPickerReact:not(.epr-search-active)': {
@@ -69,7 +143,10 @@ var commonInteractionStyles = /*#__PURE__*/stylesheet.create({
         opacity: '1',
         backgroundPositionY: 'var(--epr-category-navigation-button-size)'
       }
-    }
+    },
+    visibleOnSearchOnly: /*#__PURE__*/_extends({
+      '.': 'epr-visible-on-search-only'
+    }, hidden)
   }
 });
 
@@ -161,76 +238,6 @@ function useVariationPickerRef() {
   return useElementRef()['VariationPickerRef'];
 }
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
-}
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it) o = it;
-    var i = 0;
-    return function () {
-      if (i >= o.length) return {
-        done: true
-      };
-      return {
-        done: false,
-        value: o[i++]
-      };
-    };
-  }
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
 var SuggestionMode;
 (function (SuggestionMode) {
   SuggestionMode["RECENT"] = "recent";
@@ -18051,7 +18058,7 @@ function ClickableEmojiButton(_ref) {
     hasVariations = _ref.hasVariations,
     children = _ref.children;
   return createElement(Button, {
-    className: cx(styles$1.emoji, hidden && commonStyles.hidden, hiddenOnSearch && commonStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx), !!(hasVariations && showVariations) && styles$1.hasVariations),
+    className: cx(styles$1.emoji, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx), !!(hasVariations && showVariations) && styles$1.hasVariations),
     "data-unified": unified,
     "aria-label": emojiNames[0],
     "data-full-name": emojiNames
@@ -18119,11 +18126,12 @@ function EmojiImg(_ref) {
     _ref$lazyLoad = _ref.lazyLoad,
     lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad,
     imgUrl = _ref.imgUrl,
-    onError = _ref.onError;
+    onError = _ref.onError,
+    className = _ref.className;
   return createElement("img", {
     src: imgUrl,
     alt: emojiName,
-    className: cx(styles$2.emojiImag, emojiStyles.external, emojiStyles.common),
+    className: cx(styles$2.emojiImag, emojiStyles.external, emojiStyles.common, className),
     loading: lazyLoad ? 'lazy' : 'eager',
     onError: onError,
     style: style
@@ -18142,9 +18150,10 @@ var styles$2 = /*#__PURE__*/stylesheet.create({
 
 function NativeEmoji(_ref) {
   var unified = _ref.unified,
-    style = _ref.style;
+    style = _ref.style,
+    className = _ref.className;
   return createElement("span", {
-    className: cx(styles$3.nativeEmoji, emojiStyles.common, emojiStyles.external),
+    className: cx(styles$3.nativeEmoji, emojiStyles.common, emojiStyles.external, className),
     "data-unified": unified,
     style: style
   }, parseNativeEmoji(unified));
@@ -18171,7 +18180,8 @@ function ViewOnlyEmoji(_ref) {
     size = _ref.size,
     lazyLoad = _ref.lazyLoad,
     _ref$getEmojiUrl = _ref.getEmojiUrl,
-    getEmojiUrl = _ref$getEmojiUrl === void 0 ? emojiUrlByUnified : _ref$getEmojiUrl;
+    getEmojiUrl = _ref$getEmojiUrl === void 0 ? emojiUrlByUnified : _ref$getEmojiUrl,
+    className = _ref.className;
   var _useEmojisThatFailedT = useEmojisThatFailedToLoadState(),
     setEmojisThatFailedToLoad = _useEmojisThatFailedT[1];
   var style = {};
@@ -18189,19 +18199,22 @@ function ViewOnlyEmoji(_ref) {
       emojiStyle: EmojiStyle.NATIVE,
       lazyLoad: lazyLoad,
       imgUrl: emojiToRender.imgUrl,
-      onError: onError
+      onError: onError,
+      className: className
     });
   }
   return createElement(Fragment, null, emojiStyle === EmojiStyle.NATIVE ? createElement(NativeEmoji, {
     unified: unified,
-    style: style
+    style: style,
+    className: className
   }) : createElement(EmojiImg, {
     style: style,
     emojiName: emojiName(emojiToRender),
     emojiStyle: emojiStyle,
     lazyLoad: lazyLoad,
     imgUrl: getEmojiUrl(unified, emojiStyle),
-    onError: onError
+    onError: onError,
+    className: className
   }));
   function onError() {
     setEmojisThatFailedToLoad(function (prev) {
@@ -18247,7 +18260,7 @@ function EmojiCategory(_ref) {
   var category = categoryFromCategoryConfig(categoryConfig);
   var categoryName = categoryNameFromCategoryConfig(categoryConfig);
   return createElement("li", {
-    className: cx(styles$4.category, hidden && commonStyles.hidden, hiddenOnSearch && commonStyles.hiddenOnSearch),
+    className: cx(styles$4.category, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch),
     "data-name": category,
     "aria-label": categoryName
   }, createElement("h2", {
@@ -18960,7 +18973,7 @@ var styles$9 = /*#__PURE__*/stylesheet.create({
     backdropFilter: 'blur(5px)',
     background: 'var(--epr-skin-tone-picker-menu-color)',
     // @ts-ignore
-    '&.epr-active:after': {
+    '.epr-active:after': {
       content: '',
       position: 'absolute',
       top: '-2px',
@@ -19064,13 +19077,15 @@ function PreviewBody() {
       emoji: emoji,
       emojiStyle: emojiStyle,
       size: 45,
-      getEmojiUrl: getEmojiUrl
+      getEmojiUrl: getEmojiUrl,
+      className: cx(styles$a.emoji)
     }) : defaultEmoji ? createElement(ViewOnlyEmoji, {
       unified: emojiUnified(defaultEmoji),
       emoji: defaultEmoji,
       emojiStyle: emojiStyle,
       size: 45,
-      getEmojiUrl: getEmojiUrl
+      getEmojiUrl: getEmojiUrl,
+      className: cx(styles$a.emoji)
     }) : null), show ? createElement("div", {
       className: cx(styles$a.label)
     }, emojiName(emoji)) : createElement("div", {
@@ -19092,6 +19107,9 @@ var styles$a = /*#__PURE__*/stylesheet.create({
     fontSize: 'var(--epr-preview-text-size)',
     padding: 'var(--epr-preview-text-padding)',
     textTransform: 'capitalize'
+  },
+  emoji: {
+    padding: '0'
   }
 });
 
@@ -19286,36 +19304,36 @@ var styles$b = /*#__PURE__*/stylesheet.create({
   '.epr-dark-theme': {
     catBtn: {
       backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 2)'
-    }
-  },
-  '.epr-auto-theme': {
-    catBtn: {
-      '@media (prefers-color-scheme: dark)': {
-        backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 2)'
-      }
-    }
-  },
-  '.epr-auto-theme:not(.epr-search-active)': {
-    catBtn: {
-      '@media (prefers-color-scheme: dark)': {
+    },
+    ':not(.epr-search-active)': {
+      // @ts-expect-error - need to fix this
+      catBtn: {
         ':hover': {
           backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 3)'
         },
-        // @ts-ignore
         '&.epr-active': {
           backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 3)'
         }
       }
     }
   },
-  '.epr-dark-theme:not(.epr-search-active)': {
+  '.epr-auto-theme': {
     catBtn: {
-      ':hover': {
-        backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 3)'
-      },
-      // @ts-ignore
-      '&.epr-active': {
-        backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 3)'
+      '@media (prefers-color-scheme: dark)': {
+        backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 2)'
+      }
+    },
+    ':not(.epr-search-active)': {
+      catBtn: {
+        '@media (prefers-color-scheme: dark)': {
+          ':hover': {
+            backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 3)'
+          },
+          // @ts-ignore
+          '&.epr-active': {
+            backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 3)'
+          }
+        }
       }
     }
   }
@@ -19394,7 +19412,7 @@ function Search() {
   }, statusSearchResults) : null, createElement("div", {
     className: cx(styles$c.icnSearch)
   }), createElement(Button, {
-    className: cx(styles$c.btnClearSearch, 'epr-visible-on-search-only'),
+    className: cx(styles$c.btnClearSearch, commonInteractionStyles.visibleOnSearchOnly),
     onClick: clearSearch,
     "aria-label": "Clear",
     title: "Clear"
@@ -19975,7 +19993,12 @@ var styles$d = /*#__PURE__*/stylesheet.create({
     borderRadius: 'var(--epr-picker-border-radius)',
     borderColor: 'var(--epr-picker-border-color)',
     backgroundColor: 'var(--epr-bg-color)',
-    overflow: 'hidden'
+    overflow: 'hidden',
+    // @ts-expect-error - need to work on this
+    '*': {
+      boxSizing: 'border-box',
+      fontFamily: 'sans-serif'
+    }
   },
   baseVariables: {
     '--': {
@@ -20064,9 +20087,6 @@ var styles$d = /*#__PURE__*/stylesheet.create({
   }
 });
 
-var css_248z$3 = ".EmojiPickerReact:not(.epr-search-active) .epr-visible-on-search-only{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:not(:-moz-placeholder-shown)) .epr-hidden-on-search{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:not(:placeholder-shown)) .epr-hidden-on-search{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:-moz-placeholder-shown) .epr-visible-on-search-only{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:placeholder-shown) .epr-visible-on-search-only{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}.EmojiPickerReact *{box-sizing:border-box;font-family:sans-serif}";
-styleInject(css_248z$3);
-
 function EmojiPicker(props) {
   return createElement(ElementRefContextProvider, null, createElement(PickerConfigProvider, Object.assign({}, props), createElement(PickerMain, null, createElement(Header, null), createElement(Body, null), createElement(Preview, null))));
 }