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

package/README.md

@@ -55,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
 
@@ -155,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.
 

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/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/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/';
@@ -15293,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);
@@ -15753,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) {
@@ -15953,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;
@@ -16087,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);
@@ -16098,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 = {};
 
@@ -16131,8 +16086,6 @@ function filterEmojiObjectByKeyword(emojis, keyword) {
 
     if (hasMatch(emoji, keyword)) {
       filtered[unified] = emoji;
-    } else {
-      hideEmojiOnSearch(unified);
     }
   }
 
@@ -16221,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,
@@ -16402,8 +16353,6 @@ function RenderCategory(_ref) {
         filteredOut = _isEmojiHidden.filteredOut,
         hidden = _isEmojiHidden.hidden;
 
-    var emojiRef = getEmojiRef(emojiUnified(emoji));
-
     if (hidden) {
       hiddenCounter++;
     }
@@ -16415,7 +16364,6 @@ function RenderCategory(_ref) {
       hidden: failedToLoad,
       hiddenOnSearch: filteredOut,
       emojiStyle: emojiStyle,
-      emojiRef: emojiRef,
       lazyLoad: lazyLoadEmojis
     });
   });
@@ -16863,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() {
@@ -17423,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);
 }