emoji-picker-react 4.5.15 → 4.6.0

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

@@ -16921,6 +16921,7 @@ function basePickerConfig() {
   return {
     autoFocusSearch: true,
     categories: baseCategoriesConfig(),
+    className: '',
     customEmojis: [],
     defaultSkinTone: SkinTones.NEUTRAL,
     emojiStyle: EmojiStyle.APPLE,
@@ -16934,6 +16935,7 @@ function basePickerConfig() {
     searchPlaceholder: DEFAULT_SEARCH_PLACEHOLDER,
     skinTonePickerLocation: SkinTonePickerLocation.SEARCH,
     skinTonesDisabled: false,
+    style: {},
     suggestedEmojisMode: SuggestionMode.FREQUENT,
     theme: Theme.LIGHT,
     unicodeToHide: new Set(KNOWN_FAILING_EMOJIS),
@@ -17075,43 +17077,50 @@ function useLazyLoadEmojisConfig() {
 
   return lazyLoadEmojis;
 }
-function usePickerSizeConfig() {
+function useClassNameConfig() {
   var _usePickerConfig12 = usePickerConfig(),
-      height = _usePickerConfig12.height,
-      width = _usePickerConfig12.width;
+      className = _usePickerConfig12.className;
 
-  return {
+  return className;
+}
+function useStyleConfig() {
+  var _usePickerConfig13 = usePickerConfig(),
+      height = _usePickerConfig13.height,
+      width = _usePickerConfig13.width,
+      style = _usePickerConfig13.style;
+
+  return _extends({
     height: getDimension(height),
     width: getDimension(width)
-  };
+  }, style);
 }
 function useEmojiVersionConfig() {
-  var _usePickerConfig13 = usePickerConfig(),
-      emojiVersion = _usePickerConfig13.emojiVersion;
+  var _usePickerConfig14 = usePickerConfig(),
+      emojiVersion = _usePickerConfig14.emojiVersion;
 
   return emojiVersion;
 }
 function useSearchDisabledConfig() {
-  var _usePickerConfig14 = usePickerConfig(),
-      searchDisabled = _usePickerConfig14.searchDisabled;
+  var _usePickerConfig15 = usePickerConfig(),
+      searchDisabled = _usePickerConfig15.searchDisabled;
 
   return searchDisabled;
 }
 function useSkinTonePickerLocationConfig() {
-  var _usePickerConfig15 = usePickerConfig(),
-      skinTonePickerLocation = _usePickerConfig15.skinTonePickerLocation;
+  var _usePickerConfig16 = usePickerConfig(),
+      skinTonePickerLocation = _usePickerConfig16.skinTonePickerLocation;
 
   return skinTonePickerLocation;
 }
 function useUnicodeToHide() {
-  var _usePickerConfig16 = usePickerConfig(),
-      unicodeToHide = _usePickerConfig16.unicodeToHide;
+  var _usePickerConfig17 = usePickerConfig(),
+      unicodeToHide = _usePickerConfig17.unicodeToHide;
 
   return unicodeToHide;
 }
 function useGetEmojiUrlConfig() {
-  var _usePickerConfig17 = usePickerConfig(),
-      getEmojiUrl = _usePickerConfig17.getEmojiUrl;
+  var _usePickerConfig18 = usePickerConfig(),
+      getEmojiUrl = _usePickerConfig18.getEmojiUrl;
 
   return getEmojiUrl;
 }
@@ -19290,6 +19299,24 @@ styleInject(css_248z$9);
 var css_248z$a = ".EmojiPickerReact .epr-search-container{display:block;flex:1;min-width:0}.EmojiPickerReact .epr-search-container .epr-status-visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.EmojiPickerReact .epr-search-container input.epr-search{background-color:var(--epr-search-input-bg-color);border:1px solid var(--epr-search-input-bg-color);border-radius:var(--epr-search-input-border-radius);color:var(--epr-search-input-text-color);height:var(--epr-search-input-height);outline:none;padding:var(--epr-search-input-padding);transition:all .2s ease-in-out;width:100%}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search .epr-icn-clear-search{background-color:transparent;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' xml:space='preserve'%3E%3Cpath fill='%23868686' d='M6.98 13.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 8c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.4a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.2-.21.54 0 .74z'/%3E%3Cpath fill='%23868686' d='M10.15 18.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3Cpath fill='%233371B7' d='M6.98 33.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 28c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.41a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.21-.21.55 0 .75z'/%3E%3Cpath fill='%233371B7' d='M10.15 38.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3Cpath fill='%23C0C0BF' d='M6.98 53.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 48c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.41a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.21-.21.55 0 .75z'/%3E%3Cpath fill='%23C0C0BF' d='M10.15 58.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3Cpath fill='%236AA9DD' d='M6.98 73.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 68c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.41a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.21-.21.55 0 .75z'/%3E%3Cpath fill='%236AA9DD' d='M10.15 78.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-size:20px;height:20px;width:20px}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search{align-items:center;border-radius:50%;display:flex;height:30px;justify-content:center;padding:0;position:absolute;right:var(--epr-search-bar-inner-padding);top:50%;transform:translateY(-50%);width:30px}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:focus .epr-icn-clear-search,.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:hover .epr-icn-clear-search{background-position-y:-20px}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:focus,.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:hover{background:var(--epr-hover-bg-color)}.EmojiPickerReact.epr-dark-theme .epr-search-container button.epr-btn-clear-search .epr-icn-clear-search{background-position-y:-40px}.EmojiPickerReact.epr-dark-theme .epr-search-container button.epr-btn-clear-search:hover .epr-icn-clear-search{background-position-y:-60px}@media (prefers-color-scheme:dark){.EmojiPickerReact.epr-auto-theme .epr-search-container button.epr-btn-clear-search .epr-icn-clear-search{background-position-y:-40px}.EmojiPickerReact.epr-auto-theme .epr-search-container button.epr-btn-clear-search:hover .epr-icn-clear-search{background-position-y:-60px}}.EmojiPickerReact .epr-search-container .epr-icn-search{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='40' xml:space='preserve'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23868686' d='M12 8.81c0 2.08-1.68 3.76-3.76 3.76s-3.76-1.68-3.76-3.76 1.68-3.76 3.76-3.76S12 6.73 12 8.81zm-.77 3.91c-.83.64-1.87 1.01-2.99 1.01-2.72 0-4.92-2.2-4.92-4.92 0-2.72 2.2-4.92 4.92-4.92 2.72 0 4.92 2.2 4.92 4.92 0 1.13-.38 2.16-1.01 2.99l3.94 3.93c.25.25.25.66 0 .92-.25.25-.66.25-.92 0l-3.94-3.93z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23C0C0BF' d='M12 28.81c0 2.08-1.68 3.76-3.76 3.76s-3.76-1.68-3.76-3.76 1.68-3.76 3.76-3.76S12 26.73 12 28.81zm-.77 3.91c-.83.64-1.87 1.01-2.99 1.01-2.72 0-4.92-2.2-4.92-4.92 0-2.72 2.2-4.92 4.92-4.92 2.72 0 4.92 2.2 4.92 4.92 0 1.13-.38 2.16-1.01 2.99l3.94 3.93c.25.25.25.66 0 .92-.25.25-.66.25-.92 0l-3.94-3.93z'/%3E%3C/svg%3E\");background-position:0 0;background-repeat:no-repeat;background-size:20px;content:\"\";height:20px;left:var(--epr-search-bar-inner-padding);position:absolute;top:50%;transform:translateY(-50%);width:20px}.EmojiPickerReact.epr-dark-theme .epr-search-container .epr-icn-search{background-position-y:-20px}@media (prefers-color-scheme:dark){.EmojiPickerReact.epr-auto-theme .epr-search-container .epr-icn-search{background-position-y:-20px}}.EmojiPickerReact .epr-search-container input.epr-search::-moz-placeholder{color:var(--epr-search-input-placeholder-color)}.EmojiPickerReact .epr-search-container input.epr-search::placeholder{color:var(--epr-search-input-placeholder-color)}.EmojiPickerReact .epr-search-container input.epr-search:focus{background-color:var(--epr-search-input-bg-color-active);border:1px solid var(--epr-search-border-color)}";
 styleInject(css_248z$a);
 
+var SCOPE = /*#__PURE__*/asSelectors(ClassNames.emojiPicker) + " " + /*#__PURE__*/asSelectors(ClassNames.emojiList);
+var EMOJI_BUTTON = /*#__PURE__*/['button', asSelectors(ClassNames.emoji)].join('');
+var CATEGORY = /*#__PURE__*/asSelectors(ClassNames.category);
+function CssSearch(_ref) {
+  var value = _ref.value;
+
+  if (!value) {
+    return null;
+  }
+
+  var q = genQuery(value);
+  return createElement("style", null, "\n    " + SCOPE + " " + EMOJI_BUTTON + " {\n      display: none;\n    }\n\n\n    " + SCOPE + " " + q + " {\n      display: flex;\n    }\n\n    " + SCOPE + " " + CATEGORY + ":not(:has(" + q + ")) {\n      display: none;\n    }\n  ");
+}
+
+function genQuery(value) {
+  return [EMOJI_BUTTON, '[data-full-name*="', getNormalizedSearchTerm(value), '"]'].join('');
+}
+
 function SearchContainer() {
   var searchDisabled = useSearchDisabledConfig();
   var isSkinToneInSearch = useIsSkinToneInSearch();
@@ -19331,7 +19358,7 @@ function Search() {
     onFocus: closeAllOpenToggles,
     className: "epr-search",
     type: "text",
-    "aria-controls": 'epr-search-id',
+    "aria-controls": "epr-search-id",
     placeholder: placeholder,
     onChange: function onChange(event) {
       setInc(inc + 1);
@@ -19343,11 +19370,11 @@ function Search() {
     },
     ref: SearchInputRef
   }), searchTerm ? createElement("div", {
-    role: 'status',
+    role: "status",
     className: clsx('epr-status-search-results', 'epr-status-visually-hidden'),
-    "aria-live": 'polite',
-    id: 'epr-search-id',
-    "aria-atomic": 'true'
+    "aria-live": "polite",
+    id: "epr-search-id",
+    "aria-atomic": "true"
   }, statusSearchResults) : null, createElement("div", {
     className: "epr-icn-search"
   }), createElement(Button, {
@@ -19357,18 +19384,6 @@ function Search() {
     className: "epr-icn-clear-search"
   })));
 }
-var CSS_SEARCH_SELECTOR = /*#__PURE__*/asSelectors(ClassNames.emojiPicker) + " " + /*#__PURE__*/asSelectors(ClassNames.emojiList);
-
-function CssSearch(_ref) {
-  var value = _ref.value;
-
-  if (!value) {
-    return null;
-  }
-
-  var searchQuery = "button[data-full-name*=\"" + getNormalizedSearchTerm(value) + "\"]";
-  return createElement("style", null, "\n        " + CSS_SEARCH_SELECTOR + " " + asSelectors(ClassNames.category) + ":not(:has(" + searchQuery + ")) {\n        display: none;\n      }\n\n        " + CSS_SEARCH_SELECTOR + " button" + asSelectors(ClassNames.emoji) + ":not(" + searchQuery + ") {\n        display: none;\n      }\n  ");
-}
 
 function Header() {
   return createElement(Relative, {
@@ -19876,19 +19891,12 @@ function PickerRootElement(_ref2) {
   var theme = useThemeConfig();
   var searchModeActive = useIsSearchMode();
   var PickerMainRef = usePickerMainRef();
-
-  var _usePickerSizeConfig = usePickerSizeConfig(),
-      height = _usePickerSizeConfig.height,
-      width = _usePickerSizeConfig.width;
-
+  var className = useClassNameConfig();
+  var style = useStyleConfig();
   useKeyboardNavigation();
   useOnFocus();
-  var style = {
-    height: height,
-    width: width
-  };
   return createElement("aside", {
-    className: clsx(ClassNames.emojiPicker, 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx[ClassNames.darkTheme] = theme === Theme.DARK, _clsx[ClassNames.autoTheme] = theme === Theme.AUTO, _clsx)),
+    className: clsx(ClassNames.emojiPicker, 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx[ClassNames.darkTheme] = theme === Theme.DARK, _clsx[ClassNames.autoTheme] = theme === Theme.AUTO, _clsx), className),
     ref: PickerMainRef,
     style: style
   }, children);
@@ -19907,7 +19915,7 @@ var EmojiPickerReact = /*#__PURE__*/memo(EmojiPicker, function (prev, next) {
 
   var prevCustomEmojis = (_prev$customEmojis = prev.customEmojis) != null ? _prev$customEmojis : [];
   var nextCustomEmojis = (_next$customEmojis = next.customEmojis) != null ? _next$customEmojis : [];
-  return prev.emojiVersion === next.emojiVersion && prev.searchPlaceHolder === next.searchPlaceHolder && prev.searchPlaceholder === next.searchPlaceholder && prev.defaultSkinTone === next.defaultSkinTone && prev.skinTonesDisabled === next.skinTonesDisabled && prev.autoFocusSearch === next.autoFocusSearch && prev.emojiStyle === next.emojiStyle && prev.theme === next.theme && prev.suggestedEmojisMode === next.suggestedEmojisMode && prev.lazyLoadEmojis === next.lazyLoadEmojis && prev.height === next.height && prev.width === next.width && prev.searchDisabled === next.searchDisabled && prev.skinTonePickerLocation === next.skinTonePickerLocation && prevCustomEmojis.length === nextCustomEmojis.length;
+  return prev.emojiVersion === next.emojiVersion && prev.searchPlaceHolder === next.searchPlaceHolder && prev.searchPlaceholder === next.searchPlaceholder && prev.defaultSkinTone === next.defaultSkinTone && prev.skinTonesDisabled === next.skinTonesDisabled && prev.autoFocusSearch === next.autoFocusSearch && prev.emojiStyle === next.emojiStyle && prev.theme === next.theme && prev.suggestedEmojisMode === next.suggestedEmojisMode && prev.lazyLoadEmojis === next.lazyLoadEmojis && prev.className === next.className && prev.height === next.height && prev.width === next.width && prev.style === next.style && prev.searchDisabled === next.searchDisabled && prev.skinTonePickerLocation === next.skinTonePickerLocation && prevCustomEmojis.length === nextCustomEmojis.length;
 });
 
 var ErrorBoundary = /*#__PURE__*/function (_React$Component) {