emoji-picker-react 4.0.0-rc.33 → 4.0.0-rc.35

package/README.md

@@ -37,6 +37,7 @@ function App() {
 - Skin tone change
 - Different emoji sets (Google, Apple, Facebook, Twitter)
 - Native Emoji support
+- Emoji Component To Render Emojis in your app
 
 # Props
 
@@ -54,6 +55,8 @@ The following props are accepted by them picker:
 | searchPlaceholder   | string   | `Search`   | Controls the placeholder of the search input.                                                                     |
 | suggestedEmojisMode | string   | `frequent` | Controls the suggested emojis mode. Possible values are `frequent` and `recent`.                                  |
 | skinTonesDisabled   | boolean  | `false`    | Controls whether the skin tones are disabled or not.                                                              |
+| `width`             | number   | `350`      | Controls the width of the picker.                                                                                 |
+| `height`            | number   | `450`      | Controls the height of the picker.                                                                                |
 
 ## Full details
 
@@ -154,14 +157,22 @@ import { SkinTones } from 'emoji-picker-react';
 
 # Customization
 
+## Custom Picker Width and Height
+
+To customize the dimensions of the picker, use the `height` and `width` props:
+
+```jsx
+<EmojiPicker height={500} width={400} />
+```
+
+## CSS Variables
+
 The picker can be customized via css variables. The root selector for the picker is `.EmojiPickerReact`, when overriding, make sure to provide a more specific selector.
 
 In dark mode, the specific selector is `.EmojiPickerReact.epr-dark-theme`.
 
 The list of possible variables is quite extensive, but the main ones you may want to override are:
 
-- `--epr-picker-width`: The width of the picker.
-- `--epr-picker-height`: The height of the picker.
 - `--epr-emoji-size`: The size of the emojis.
 - `--epr-emoji-gap`: The space between emojis.
 
@@ -169,6 +180,32 @@ The list of possible variables is quite extensive, but the main ones you may wan
 - `--epr-bg-color`: The background color of the picker. When changing it, you should also change `--epr-category-label-bg-color` as they are usually the same color.
 - `--epr-text-color`: The text color in the picker.
 
+# Rendering Output Emojis in Your App
+
+The picker exports an `Emoji` component. The emoji component is the same used within the picker, so it will render the same way as the emojis in the picker. You can choose to render emojis either as native, or as images.
+
+## Props
+
+| Name         | Type         | Default            | Description                                                                                 |
+| ------------ | ------------ | ------------------ | ------------------------------------------------------------------------------------------- |
+| `unified`    | string       | ""                 | The unified code of the emoji.                                                              |
+| `size`       | number       | 32                 | The size of the emoji.                                                                      |
+| `emojiStyle` | `EmojiStyle` | `EmojiStyle.APPLE` | The emoji style to use. Can be either `apple`, `google`, `facebook`, `twitter` or `native`. |
+| `lazyLoad`   | boolean      | `false`            | Whether to lazy load the emoji. image                                                       |
+
+```js
+import { Emoji, EmojiStyle } from 'emoji-picker-react';
+
+export function MyApp() {
+  return (
+    <p>
+      My Favorite emoji is:
+      <Emoji unified="1f423" size="25" />
+    </p>
+  );
+}
+```
+
 # Troubleshooting
 
 ## Error Boundary

package/dist/components/emoji/Emoji.d.ts

@@ -1,12 +1,10 @@
 /// <reference types="react" />
-import { EmojiRef } from '../../DomUtils/emojiElementRef';
 import { DataEmoji } from '../../dataUtils/DataTypes';
 import { EmojiStyle } from '../../types/exposedTypes';
 import './Emoji.css';
 declare type ClickableEmojiProps = Readonly<BaseProps & {
     hidden?: boolean;
     showVariations?: boolean;
-    emojiRef?: EmojiRef;
     hiddenOnSearch?: boolean;
     emoji: DataEmoji;
 }>;
@@ -17,6 +15,6 @@ declare type BaseProps = {
     size?: number;
     lazyLoad?: boolean;
 };
-export declare function ClickableEmoji({ emoji, unified, hidden, hiddenOnSearch, emojiStyle, showVariations, size, emojiRef, lazyLoad }: ClickableEmojiProps): JSX.Element;
+export declare function ClickableEmoji({ emoji, unified, hidden, hiddenOnSearch, emojiStyle, showVariations, size, lazyLoad }: ClickableEmojiProps): JSX.Element;
 export declare function ViewOnlyEmoji({ emoji, unified, emojiStyle, size, lazyLoad }: BaseProps): JSX.Element;
 export {};

package/dist/components/emoji/ExportedEmoji.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { EmojiStyle } from '../../types/exposedTypes';
+export declare function ExportedEmoji({ unified, size, emojiStyle, lazyLoad }: {
+    unified: string;
+    emojiStyle?: EmojiStyle;
+    size?: number;
+    lazyLoad?: boolean;
+}): JSX.Element | null;

package/dist/config/config.d.ts

@@ -14,6 +14,8 @@ export declare type PickerConfigInternal = {
     suggestedEmojisMode: SuggestionMode;
     lazyLoadEmojis: boolean;
     previewConfig: PreviewConfig;
+    height: number;
+    width: number;
 };
 export declare type PreviewConfig = {
     defaultEmoji: string;

package/dist/config/useConfig.d.ts

@@ -12,3 +12,7 @@ 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: number;
+    width: number;
+};

package/dist/dataUtils/emojiSelectors.d.ts

@@ -1,4 +1,4 @@
-import { Categories } from "../config/categoryConfig";
+import { Categories } from '../config/categoryConfig';
 import { EmojiStyle, SkinTones } from '../types/exposedTypes';
 import { DataEmoji, DataEmojis } from './DataTypes';
 export declare function emojiNames(emoji: DataEmoji): string[];

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

@@ -9,5 +9,5 @@
 .EmojiPickerReact .epr-search-container{display:block;flex:1;min-width:0}.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{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;position:absolute;right:var(--epr-search-bar-inner-padding);top:50%;transform:translateY(-50%);width:20px}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:hover{background-position-y:-20px}.EmojiPickerReact..epr-dark-theme .epr-search-container button.epr-btn-clear-search{background-position-y:-40px}.EmojiPickerReact..epr-dark-theme .epr-search-container button.epr-btn-clear-search:hover{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}.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)}
 .EmojiPickerReact .epr-skin-tones{--epr-skin-tone-size:16px;align-items:center;display:flex;flex-basis:30px;justify-content:flex-end;transition:all .3s ease-in-out}.EmojiPickerReact .epr-skin-tones.open{flex-basis:170px}.EmojiPickerReact .epr-skin-tone-select{height:var(--epr-skin-tone-size);position:relative;width:var(--epr-skin-tone-size)}.EmojiPickerReact .epr-skin-tones.open .epr-tone{transition:transform .3s ease-in-out,opacity .3s ease-in-out}.EmojiPickerReact .epr-skin-tones:not(.open) .epr-tone{opacity:0;z-index:0}.EmojiPickerReact .epr-skin-tones .epr-tone{border-radius:4px;box-shadow:0 0 0 0 var(--epr-active-skin-hover-color);cursor:pointer;display:block;height:var(--epr-skin-tone-size);position:absolute;right:0;transition:transform .3s ease-in-out,opacity .5s ease-in-out;width:var(--epr-skin-tone-size);z-index:1}.EmojiPickerReact .epr-skin-tones .epr-tone:hover{box-shadow:0 0 0 5px var(--epr-active-skin-hover-color)}.EmojiPickerReact .epr-skin-tones .epr-tone:focus{box-shadow:0 0 0 5px var(--epr-focus-bg-color)}.EmojiPickerReact .epr-skin-tones.open .epr-skin-tone-select .epr-tone.epr-active:after{border:1px solid var(--epr-active-skin-tone-indicator-border-color);border-radius:5px;bottom:-2px;content:"";left:-2px;position:absolute;right:-2px;top:-2px}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-active{opacity:1;z-index:1}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-neutral{background-color:#ffd225}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fb{background-color:#ffdfbd}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fc{background-color:#e9c197}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fd{background-color:#c88e62}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fe{background-color:#a86637}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3ff{background-color:#60463a}
 .EmojiPickerReact .epr-header .epr-header-overlay{padding:var(--epr-header-padding);z-index:var(--epr-header-overlay-z-index)}
-aside.EmojiPickerReact.epr-main{border-color:var(--epr-picker-border-color);border-radius:var(--epr-picker-border-radius);border-style:solid;border-width:1px;display:flex;flex-direction:column;height:var(--epr-picker-height);position:relative;width:var(--epr-picker-width)}
-.EmojiPickerReact{--epr-highlight-color:#007aeb;--epr-hover-bg-color:#f1f8ff;--epr-focus-bg-color:#e0f0ff;--epr-text-color:#858585;--epr-search-input-bg-color:#f6f6f6;--epr-picker-border-color:#e7e7e7;--epr-bg-color:#fff;--epr-category-icon-active-color:#6aa8de;--epr-horizontal-padding:10px;--epr-picker-width:350px;--epr-picker-height:450px;--epr-picker-border-radius:8px;--epr-search-border-color:var(--epr-highlight-color);--epr-header-padding:15px var(--epr-horizontal-padding);--epr-active-skin-tone-indicator-border-color:var(--epr-highlight-color);--epr-active-skin-hover-color:var(--epr-hover-bg-color);--epr-search-input-bg-color-active:var(--epr-search-input-bg-color);--epr-search-input-padding:0 30px;--epr-search-input-border-radius:8px;--epr-search-input-height:40px;--epr-search-input-text-color:var(--epr-text-color);--epr-search-input-placeholder-color:var(--epr-text-color);--epr-search-bar-inner-padding:var(--epr-horizontal-padding);--epr-category-navigation-button-size:30px;--epr-emoji-variation-picker-height:45px;--epr-emoji-variation-picker-bg-color:var(--epr-bg-color);--epr-preview-height:70px;--epr-preview-text-size:14px;--epr-preview-text-padding:0 var(--epr-horizontal-padding);--epr-preview-border-color:var(--epr-picker-border-color);--epr-preview-text-color:var(--epr-text-color);--epr-category-padding:0 var(--epr-horizontal-padding);--epr-category-label-bg-color:#ffffffe6;--epr-category-label-text-color:var(--epr-text-color);--epr-category-label-padding:0 var(--epr-horizontal-padding);--epr-category-label-height:40px;--epr-emoji-size:30px;--epr-emoji-padding:5px;--epr-emoji-fullsize:calc(var(--epr-emoji-size) + var(--epr-emoji-padding)*2);--epr-emoji-hover-color:var(--epr-hover-bg-color);--epr-emoji-variation-indicator-color:var(--epr-picker-border-color);--epr-emoji-variation-indicator-color-hover:var(--epr-text-color);--epr-header-overlay-z-index:3;--epr-emoji-variations-indictator-z-index:1;--epr-category-label-z-index:2;--epr-skin-variation-picker-z-index:5}.EmojiPickerReact.epr-dark-theme{--epr-dark:#000;--epr-emoji-variation-picker-bg-color:var(--epr-dark);--epr-highlight-color:silver;--epr-text-color:var(--epr-highlight-color);--epr-hover-bg-color:#363636f6;--epr-focus-bg-color:#474747;--epr-search-input-bg-color:#333;--epr-category-label-bg-color:#222222e6;--epr-picker-border-color:#151617;--epr-bg-color:#222;--epr-search-input-bg-color-active:var(--epr-dark);--epr-emoji-variation-indicator-color:#444;--epr-category-icon-active-color:#3271b7}.EmojiPickerReact{background-color:var(--epr-bg-color);overflow:hidden}.EmojiPickerReact .epr-hidden,.EmojiPickerReact.epr-search-active .epr-hidden-on-search,.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}.EmojiPickerReact button{background:none;border:0;cursor:pointer;outline:none}
+aside.EmojiPickerReact.epr-main{border-color:var(--epr-picker-border-color);border-radius:var(--epr-picker-border-radius);border-style:solid;border-width:1px;display:flex;flex-direction:column;position:relative}
+.EmojiPickerReact{--epr-highlight-color:#007aeb;--epr-hover-bg-color:#f1f8ff;--epr-focus-bg-color:#e0f0ff;--epr-text-color:#858585;--epr-search-input-bg-color:#f6f6f6;--epr-picker-border-color:#e7e7e7;--epr-bg-color:#fff;--epr-category-icon-active-color:#6aa8de;--epr-horizontal-padding:10px;--epr-picker-border-radius:8px;--epr-search-border-color:var(--epr-highlight-color);--epr-header-padding:15px var(--epr-horizontal-padding);--epr-active-skin-tone-indicator-border-color:var(--epr-highlight-color);--epr-active-skin-hover-color:var(--epr-hover-bg-color);--epr-search-input-bg-color-active:var(--epr-search-input-bg-color);--epr-search-input-padding:0 30px;--epr-search-input-border-radius:8px;--epr-search-input-height:40px;--epr-search-input-text-color:var(--epr-text-color);--epr-search-input-placeholder-color:var(--epr-text-color);--epr-search-bar-inner-padding:var(--epr-horizontal-padding);--epr-category-navigation-button-size:30px;--epr-emoji-variation-picker-height:45px;--epr-emoji-variation-picker-bg-color:var(--epr-bg-color);--epr-preview-height:70px;--epr-preview-text-size:14px;--epr-preview-text-padding:0 var(--epr-horizontal-padding);--epr-preview-border-color:var(--epr-picker-border-color);--epr-preview-text-color:var(--epr-text-color);--epr-category-padding:0 var(--epr-horizontal-padding);--epr-category-label-bg-color:#ffffffe6;--epr-category-label-text-color:var(--epr-text-color);--epr-category-label-padding:0 var(--epr-horizontal-padding);--epr-category-label-height:40px;--epr-emoji-size:30px;--epr-emoji-padding:5px;--epr-emoji-fullsize:calc(var(--epr-emoji-size) + var(--epr-emoji-padding)*2);--epr-emoji-hover-color:var(--epr-hover-bg-color);--epr-emoji-variation-indicator-color:var(--epr-picker-border-color);--epr-emoji-variation-indicator-color-hover:var(--epr-text-color);--epr-header-overlay-z-index:3;--epr-emoji-variations-indictator-z-index:1;--epr-category-label-z-index:2;--epr-skin-variation-picker-z-index:5}.EmojiPickerReact.epr-dark-theme{--epr-dark:#000;--epr-emoji-variation-picker-bg-color:var(--epr-dark);--epr-highlight-color:silver;--epr-text-color:var(--epr-highlight-color);--epr-hover-bg-color:#363636f6;--epr-focus-bg-color:#474747;--epr-search-input-bg-color:#333;--epr-category-label-bg-color:#222222e6;--epr-picker-border-color:#151617;--epr-bg-color:#222;--epr-search-input-bg-color-active:var(--epr-dark);--epr-emoji-variation-indicator-color:#444;--epr-category-icon-active-color:#3271b7}.EmojiPickerReact{background-color:var(--epr-bg-color);overflow:hidden}.EmojiPickerReact .epr-hidden,.EmojiPickerReact.epr-search-active .epr-hidden-on-search,.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}.EmojiPickerReact button{background:none;border:0;cursor:pointer;outline:none}

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

@@ -320,6 +320,8 @@ function basePickerConfig() {
     emoji, // @ts-ignore
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     event) {},
+    height: 450,
+    width: 350,
     previewConfig: _extends({}, basePreviewConfig),
     searchPlaceHolder: 'Search',
     skinTonesDisabled: false,
@@ -417,6 +419,16 @@ function useLazyLoadEmojisConfig() {
 
   return lazyLoadEmojis;
 }
+function usePickerSizeConfig() {
+  var _usePickerConfig12 = usePickerConfig(),
+      height = _usePickerConfig12.height,
+      width = _usePickerConfig12.width;
+
+  return {
+    height: height,
+    width: width
+  };
+}
 
 var CDN_URL_APPLE = 'https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/';
 var CDN_URL_FACEBOOK = 'https://cdn.jsdelivr.net/npm/emoji-datasource-facebook/img/facebook/64/';
@@ -14989,7 +15001,12 @@ function emojiByUnified(unified) {
     return;
   }
 
-  return allEmojisByUnified[unified];
+  if (allEmojisByUnified[unified]) {
+    return allEmojisByUnified[unified];
+  }
+
+  var withoutSkinTone = unifiedWithoutSkinTone(unified);
+  return allEmojisByUnified[withoutSkinTone];
 }
 var allEmojis = /*#__PURE__*/Object.values(emojis).flat();
 var allEmojisByUnified = {};
@@ -15288,7 +15305,7 @@ function hasNextRow(parent, element) {
 
 function getRowElements(elements, row, elementsInRow) {
   if (row === -1) {
-    var lastRow = Math.floor(elements.length / elementsInRow);
+    var lastRow = Math.floor((elements.length - 1) / elementsInRow);
     var firstElementIndex = lastRow * elementsInRow;
     var lastElementIndex = elements.length - 1;
     return elements.slice(firstElementIndex, lastElementIndex + 1);
@@ -15748,11 +15765,11 @@ function visibleEmojiOneRowUp(element) {
       return null;
     }
 
-    return getElementInRow(allVisibleEmojis(categoryContent), -1, // last row
+    return getElementInRow(allVisibleEmojis(prevVisibleCategory), -1, // last row
     countInRow, indexInRow);
   }
 
-  return getElementInPrevRow(allVisibleEmojis(category), row, countInRow, indexInRow);
+  return getElementInPrevRow(allVisibleEmojis(categoryContent), row, countInRow, indexInRow);
 }
 
 function visibleEmojiOneRowDown(element) {
@@ -15948,36 +15965,6 @@ function useOnScroll(BodyRef) {
   }, [BodyRef, closeAllOpenToggles]);
 }
 
-var emojiRef = {};
-function getEmojiRef(unified) {
-  emojiRef[unified] = emojiRef[unified] || {
-    current: null
-  };
-  return emojiRef[unified];
-}
-function iterateEmojiRef(callback) {
-  for (var unified in emojiRef) {
-    if (!emojiRef[unified] || emojiRef[unified].current === null) {
-      continue;
-    }
-
-    callback(emojiRef[unified].current, unified);
-  }
-}
-function hideEmojiOnSearch(unified) {
-  hideElementOnSearch(getEmojiRef(unified).current);
-}
-function hideElementOnSearch(element) {
-  if (!element) return;
-  element.classList.add(ClassNames.hiddenOnSearch);
-  element.classList.remove(ClassNames.visible);
-}
-function showElementOnSearch(element) {
-  if (!element) return;
-  element.classList.remove(ClassNames.hiddenOnSearch);
-  element.classList.add(ClassNames.visible);
-}
-
 function scrollTo(root, top) {
   if (top === void 0) {
     top = 0;
@@ -16082,9 +16069,7 @@ function useApplySearch() {
       setSearchTerm = _useSearchTermState2[1];
 
   var PickerMainRef = usePickerMainRef();
-  var applyFilterToDom = useApplyFilterToDom();
   return function applySearch(searchTerm) {
-    applyFilterToDom(searchTerm);
     requestAnimationFrame(function () {
       setSearchTerm(searchTerm).then(function () {
         scrollTo(PickerMainRef.current, 0);
@@ -16093,31 +16078,6 @@ function useApplySearch() {
   };
 }
 
-function useApplyFilterToDom() {
-  // This function is the farthest from being "React" as it can be
-  // It performs DOM manipulation and is not a pure function
-  // But it is the most performant way to do it, at least 5 times faster than
-  // react re-rendering. The reason I trust it to work correctly is because we
-  // eventually do update the state, which keeps the DOM in sync - after the fact
-  var PickerMainRef = usePickerMainRef();
-  var filterRef = useFilterRef();
-  return function applyFilterToDom(searchTerm) {
-    requestAnimationFrame(function () {
-      var _PickerMainRef$curren;
-
-      (_PickerMainRef$curren = PickerMainRef.current) == null ? void 0 : _PickerMainRef$curren.classList.toggle(ClassNames.searchActive, !!searchTerm);
-      iterateEmojiRef(function (element, unified) {
-        if (isEmojiFilteredBySearchTerm(unified, filterRef.current, searchTerm)) {
-          hideElementOnSearch(element);
-          return;
-        }
-
-        showElementOnSearch(element);
-      });
-    });
-  };
-}
-
 function filterEmojiObjectByKeyword(emojis, keyword) {
   var filtered = {};
 
@@ -16126,8 +16086,6 @@ function filterEmojiObjectByKeyword(emojis, keyword) {
 
     if (hasMatch(emoji, keyword)) {
       filtered[unified] = emoji;
-    } else {
-      hideEmojiOnSearch(unified);
     }
   }
 
@@ -16216,15 +16174,13 @@ function ClickableEmoji(_ref) {
       _ref$showVariations = _ref.showVariations,
       showVariations = _ref$showVariations === void 0 ? true : _ref$showVariations,
       size = _ref.size,
-      emojiRef = _ref.emojiRef,
       lazyLoad = _ref.lazyLoad;
   var hasVariations = emojiHasVariations(emoji);
   return React.createElement("button", {
-    className: clsx(ClassNames.emoji, (_clsx = {}, _clsx[ClassNames.hidden] = hidden, _clsx[ClassNames.hiddenOnSearch] = hiddenOnSearch, _clsx[ClassNames.visible] = !hidden, _clsx[ClassNames.emojiHasVariatios] = hasVariations && showVariations, _clsx)),
+    className: clsx(ClassNames.emoji, (_clsx = {}, _clsx[ClassNames.hidden] = hidden, _clsx[ClassNames.hiddenOnSearch] = hiddenOnSearch, _clsx[ClassNames.visible] = !hidden && !hiddenOnSearch, _clsx[ClassNames.emojiHasVariatios] = hasVariations && showVariations, _clsx)),
     "data-unified": unified,
-    // @ts-ignore - let's ignore the fact this is not a real react ref, ok?
-    ref: emojiRef,
-    "aria-label": emojiName(emoji)
+    "aria-label": emojiName(emoji),
+    "data-full-name": emojiNames(emoji)
   }, React.createElement(ViewOnlyEmoji, {
     unified: unified,
     emoji: emoji,
@@ -16397,8 +16353,6 @@ function RenderCategory(_ref) {
         filteredOut = _isEmojiHidden.filteredOut,
         hidden = _isEmojiHidden.hidden;
 
-    var emojiRef = getEmojiRef(emojiUnified(emoji));
-
     if (hidden) {
       hiddenCounter++;
     }
@@ -16410,7 +16364,6 @@ function RenderCategory(_ref) {
       hidden: failedToLoad,
       hiddenOnSearch: filteredOut,
       emojiStyle: emojiStyle,
-      emojiRef: emojiRef,
       lazyLoad: lazyLoadEmojis
     });
   });
@@ -16858,7 +16811,7 @@ function Search() {
 
 function CssSearch(_ref) {
   var value = _ref.value;
-  return value ? React.createElement("style", null, "\n        .EmojiPickerReact button.epr-emoji:not([aria-label*=\"" + value + "\"]) {\n          display: none;\n        }\n  ") : null;
+  return value ? React.createElement("style", null, "\n        .EmojiPickerReact button.epr-emoji:not([data-full-name*=\"" + value + "\"]) {\n          display: none;\n        }\n  ") : null;
 }
 
 function useFocusSearchInput() {
@@ -17418,11 +17371,21 @@ function PickerRootElement(_ref2) {
   var theme = useThemeConfig();
   var searchModeActive = useIsSearchMode();
   var PickerMainRef = usePickerMainRef();
+
+  var _usePickerSizeConfig = usePickerSizeConfig(),
+      height = _usePickerSizeConfig.height,
+      width = _usePickerSizeConfig.width;
+
   useKeyboardNavigation();
   useOnFocus();
+  var style = {
+    height: height + "px",
+    width: width + "px"
+  };
   return React.createElement("aside", {
     className: clsx('EmojiPickerReact', 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx['epr-dark-theme'] = theme === exports.Theme.DARK, _clsx)),
-    ref: PickerMainRef
+    ref: PickerMainRef,
+    style: style
   }, children);
 }
 
@@ -17467,10 +17430,31 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
   return ErrorBoundary;
 }(React.Component);
 
+function ExportedEmoji(_ref) {
+  var unified = _ref.unified,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 32 : _ref$size,
+      _ref$emojiStyle = _ref.emojiStyle,
+      emojiStyle = _ref$emojiStyle === void 0 ? exports.EmojiStyle.APPLE : _ref$emojiStyle,
+      _ref$lazyLoad = _ref.lazyLoad,
+      lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad;
+
+  if (!unified) {
+    return null;
+  }
+
+  return React.createElement(ViewOnlyEmoji, {
+    unified: unified,
+    size: size,
+    emojiStyle: emojiStyle,
+    lazyLoad: lazyLoad
+  });
+}
+
 function EmojiPicker$1(props) {
   return React.createElement(ErrorBoundary, null, React.createElement(EmojiPicker, Object.assign({}, props)));
 }
 
-exports.Emoji = ViewOnlyEmoji;
+exports.Emoji = ExportedEmoji;
 exports.default = EmojiPicker$1;
 //# sourceMappingURL=emoji-picker-react.cjs.development.js.map