emoji-picker-react 4.7.17 → 4.8.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.7.17",
+  "version": "4.8.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/EmojiPickerReact.tsx

@@ -10,7 +10,7 @@ import { Preview } from './components/footer/Preview';
 import { Header } from './components/header/Header';
 import PickerMain from './components/main/PickerMain';
 import { compareConfig } from './config/compareConfig';
-import { useOpenConfig } from './config/useConfig';
+import { useAllowExpandReactions, useOpenConfig } from './config/useConfig';
 
 import { PickerProps } from './index';
 
@@ -27,14 +27,20 @@ function EmojiPicker(props: PickerProps) {
 
 function ContentControl() {
   const [reactionsDefaultOpen] = useReactionsModeState();
+  const allowExpandReactions = useAllowExpandReactions();
+
   const [renderAll, setRenderAll] = React.useState(!reactionsDefaultOpen);
   const isOpen = useOpenConfig();
 
   React.useEffect(() => {
+    if (reactionsDefaultOpen && !allowExpandReactions) {
+      return;
+    }
+
     if (!renderAll) {
       setRenderAll(true);
     }
-  }, [renderAll]);
+  }, [renderAll, allowExpandReactions, reactionsDefaultOpen]);
 
   if (!isOpen) {
     return null;
@@ -43,16 +49,24 @@ function ContentControl() {
   return (
     <PickerMain>
       <Reactions />
-      {renderAll ? (
-        <>
-          <Header />
-          <Body />
-          <Preview />
-        </>
-      ) : null}
+      <ExpandedPickerContent renderAll={renderAll} />
     </PickerMain>
   );
 }
 
+function ExpandedPickerContent({ renderAll }: { renderAll: boolean }) {
+  if (!renderAll) {
+    return null;
+  }
+
+  return (
+    <>
+      <Header />
+      <Body />
+      <Preview />
+    </>
+  );
+}
+
 // eslint-disable-next-line complexity
 export default React.memo(EmojiPicker, compareConfig);

package/src/components/Reactions/Reactions.tsx

@@ -5,7 +5,8 @@ import { commonStyles, stylesheet } from '../../Stylesheet/stylesheet';
 import {
   MOUSE_EVENT_SOURCE,
   useEmojiStyleConfig,
-  useReactionsConfig
+  useReactionsConfig,
+  useAllowExpandReactions
 } from '../../config/useConfig';
 import { DataEmoji } from '../../dataUtils/DataTypes';
 import { emojiByUnified } from '../../dataUtils/emojiSelectors';
@@ -22,6 +23,7 @@ export function Reactions() {
   const reactions = useReactionsConfig();
   useMouseDownHandlers(ReactionsRef, MOUSE_EVENT_SOURCE.REACTIONS);
   const emojiStyle = useEmojiStyleConfig();
+  const allowExpandReactions = useAllowExpandReactions();
 
   if (!reactionsOpen) {
     return null;
@@ -44,9 +46,11 @@ export function Reactions() {
           />
         </li>
       ))}
-      <li>
-        <BtnPlus />
-      </li>
+      {allowExpandReactions ? (
+        <li>
+          <BtnPlus />
+        </li>
+      ) : null}
     </ul>
   );
 }

package/src/components/context/PickerConfigContext.tsx

@@ -57,7 +57,8 @@ export function useSetConfig(config: PickerConfig) {
     config.height,
     config.width,
     config.searchDisabled,
-    config.skinTonePickerLocation
+    config.skinTonePickerLocation,
+    config.allowExpandReactions
   ]);
 
   return mergedConfig;

package/src/config/config.ts

@@ -89,7 +89,8 @@ export function basePickerConfig(): PickerConfigInternal {
     width: 350,
     reactionsDefaultOpen: false,
     reactions: DEFAULT_REACTIONS,
-    open: true
+    open: true,
+    allowExpandReactions: true
   };
 }
 
@@ -118,6 +119,7 @@ export type PickerConfigInternal = {
   reactionsDefaultOpen: boolean;
   reactions: string[];
   open: boolean;
+  allowExpandReactions: boolean;
 };
 
 export type PreviewConfig = {

package/src/config/useConfig.ts

@@ -41,6 +41,11 @@ export function useDefaultSkinToneConfig(): SkinTones {
   return defaultSkinTone;
 }
 
+export function useAllowExpandReactions(): boolean {
+  const { allowExpandReactions } = usePickerConfig();
+  return allowExpandReactions;
+}
+
 export function useSkinTonesDisabledConfig(): boolean {
   const { skinTonesDisabled } = usePickerConfig();
   return skinTonesDisabled;

package/src/hooks/useEmojiPreviewEvents.ts

@@ -87,12 +87,8 @@ export function useEmojiPreviewEvents(
       if (button) {
         const belowFoldByPx = detectEmojyPartiallyBelowFold(button, bodyRef);
         const buttonHeight = button.getBoundingClientRect().height;
-        if (belowFoldByPx < buttonHeight / 2) {
-          return handlePartiallyVisibleElementFocus(button, setPreviewEmoji);
-        }
         if (belowFoldByPx < buttonHeight) {
-          button.scrollIntoView({ behavior: 'smooth', block: 'end' });
-          return;
+          return handlePartiallyVisibleElementFocus(button, setPreviewEmoji);
         }
 
         focusElement(button);