emoji-picker-react 4.5.15 → 4.6.0

package/README.md

@@ -72,9 +72,11 @@ The following props are accepted by them picker:
 | skinTonesDisabled      | boolean                                                | `false`    | Controls whether the skin tones are disabled or not.                                                                                       |
 | searchDisabled         | boolean                                                | `false`    | Controls whether the search is disabled or not. When disabled, the skin tone picker will be shown in the preview component.                |
 | skinTonePickerLocation | string                                                 | `SEARCH`   | Controls the location of the skin tone picker. Possible values are `SEARCH` and `PREVIEW`.                                                 |
-| `width`                | `number`/`string`                                      | `350`      | Controls the width of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string.   |
 | emojiVersion           | `string`                                               | -          | Allows displaying emojis up to a certain version for compatibility.                                                                        |
+| `className`            | `string`                                               | -          | Adds a class name to the root element of the picker. |
+| `width`                | `number`/`string`                                      | `350`      | Controls the width of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string.   |
 | `height`               | `number`/`string`                                      | `450`      | Controls the height of the picker. You can provide a number that will be treated as pixel size, or your any accepted css height as string. |
+| `style`                | `React.CSSProperties`                                  | `{}`       | Adds inline style to the root element of the picker. |
 | getEmojiUrl            | `Function`                                             | -          | Allows to customize the emoji url and provide your own image host.                                                                         |
 | categories             | `Array`                                                | -          | Allows full config over ordering, naming and display of categories.                                                                        |
 | customEmojis           | `Array<{names: string[], imgUrl: string, id: string}>` | -          | Allows adding custom emojis to the picker.                                                                                                 |

package/dist/components/header/CssSearch.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function CssSearch({ value }: {
+    value: undefined | string;
+}): JSX.Element | null;

package/dist/config/config.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
 import { EmojiClickData, EmojiStyle, SkinTonePickerLocation, SkinTones, SuggestionMode, Theme } from '../types/exposedTypes';
 import { CategoriesConfig } from './categoryConfig';
@@ -22,8 +23,10 @@ export declare type PickerConfigInternal = {
     suggestedEmojisMode: SuggestionMode;
     lazyLoadEmojis: boolean;
     previewConfig: PreviewConfig;
+    className: string;
     height: PickerDimensions;
     width: PickerDimensions;
+    style: React.CSSProperties;
     getEmojiUrl: GetEmojiUrl;
     searchDisabled: boolean;
     skinTonePickerLocation: SkinTonePickerLocation;

package/dist/config/useConfig.d.ts

@@ -1,6 +1,7 @@
+import * as React from 'react';
 import { EmojiClickData, EmojiStyle, SkinTonePickerLocation, SkinTones, SuggestionMode, Theme } from '../types/exposedTypes';
 import { CategoriesConfig } from './categoryConfig';
-import { PickerDimensions, PreviewConfig } from './config';
+import { PreviewConfig } from './config';
 import { CustomEmoji } from './customEmojiConfig';
 export declare function useSearchPlaceHolderConfig(): string;
 export declare function useDefaultSkinToneConfig(): SkinTones;
@@ -14,10 +15,8 @@ export declare function usePreviewConfig(): PreviewConfig;
 export declare function useThemeConfig(): Theme;
 export declare function useSuggestedEmojisModeConfig(): SuggestionMode;
 export declare function useLazyLoadEmojisConfig(): boolean;
-export declare function usePickerSizeConfig(): {
-    height: PickerDimensions;
-    width: PickerDimensions;
-};
+export declare function useClassNameConfig(): string;
+export declare function useStyleConfig(): React.CSSProperties;
 export declare function useEmojiVersionConfig(): string | null;
 export declare function useSearchDisabledConfig(): boolean;
 export declare function useSkinTonePickerLocationConfig(): SkinTonePickerLocation;

package/dist/emoji-picker-react.cjs.development.js

@@ -16916,6 +16916,7 @@ function basePickerConfig() {
   return {
     autoFocusSearch: true,
     categories: baseCategoriesConfig(),
+    className: '',
     customEmojis: [],
     defaultSkinTone: exports.SkinTones.NEUTRAL,
     emojiStyle: exports.EmojiStyle.APPLE,
@@ -16929,6 +16930,7 @@ function basePickerConfig() {
     searchPlaceholder: DEFAULT_SEARCH_PLACEHOLDER,
     skinTonePickerLocation: exports.SkinTonePickerLocation.SEARCH,
     skinTonesDisabled: false,
+    style: {},
     suggestedEmojisMode: exports.SuggestionMode.FREQUENT,
     theme: exports.Theme.LIGHT,
     unicodeToHide: new Set(KNOWN_FAILING_EMOJIS),
@@ -17070,43 +17072,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;
 }
@@ -19225,6 +19234,24 @@ function CategoryNavigation() {
   }));
 }
 
+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 React.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();
@@ -19266,7 +19293,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);
@@ -19278,11 +19305,11 @@ function Search() {
     },
     ref: SearchInputRef
   }), searchTerm ? React.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, React.createElement("div", {
     className: "epr-icn-search"
   }), React.createElement(Button, {
@@ -19292,18 +19319,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 React.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 React.createElement(Relative, {
@@ -19808,19 +19823,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 React.createElement("aside", {
-    className: clsx(ClassNames.emojiPicker, 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx[ClassNames.darkTheme] = theme === exports.Theme.DARK, _clsx[ClassNames.autoTheme] = theme === exports.Theme.AUTO, _clsx)),
+    className: clsx(ClassNames.emojiPicker, 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx[ClassNames.darkTheme] = theme === exports.Theme.DARK, _clsx[ClassNames.autoTheme] = theme === exports.Theme.AUTO, _clsx), className),
     ref: PickerMainRef,
     style: style
   }, children);
@@ -19836,7 +19844,7 @@ var EmojiPickerReact = /*#__PURE__*/React.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) {