emoji-picker-react 4.7.1 → 4.7.3

package/package.json

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

package/src/components/Reactions/BtnPlus.tsx

@@ -49,7 +49,8 @@ const styles = stylesheet.create({
       backgroundColor: 'var(--epr-hover-bg-color)',
       // @ts-ignore
       ':after': {
-        backgroundPositionY: '-20px'
+        backgroundPositionY: '-20px',
+        transform: 'scale(1.2)'
       }
     },
     ':focus': {

package/src/components/Reactions/Reactions.tsx

@@ -39,7 +39,8 @@ export function Reactions() {
             emojiStyle={emojiStyle}
             unified={reaction}
             showVariations={false}
-            round
+            className={cx(styles.emojiButton)}
+            noBackground
           />
         </li>
       ))}
@@ -59,5 +60,12 @@ const styles = stylesheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     height: '100%'
+  },
+  emojiButton: {
+    ':hover': {
+      transform: 'scale(1.2)'
+    },
+
+    transition: 'transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5)'
   }
 });

package/src/components/emoji/ClickableEmojiButton.tsx

@@ -17,7 +17,8 @@ type ClickableEmojiButtonProps = Readonly<{
   children: React.ReactNode;
   hasVariations: boolean;
   unified?: string;
-  round?: boolean;
+  noBackground?: boolean;
+  className?: string;
 }>;
 
 export function ClickableEmojiButton({
@@ -28,7 +29,8 @@ export function ClickableEmojiButton({
   showVariations = true,
   hasVariations,
   children,
-  round = false
+  className,
+  noBackground = false
 }: ClickableEmojiButtonProps) {
   return (
     <Button
@@ -40,7 +42,8 @@ export function ClickableEmojiButton({
           [ClassNames.visible]: !hidden && !hiddenOnSearch
         },
         !!(hasVariations && showVariations) && styles.hasVariations,
-        round && styles.round
+        noBackground && styles.noBackground,
+        className
       )}
       data-unified={unified}
       aria-label={emojiNames[0]}
@@ -73,8 +76,16 @@ const styles = stylesheet.create({
       backgroundColor: 'var(--epr-focus-bg-color)'
     }
   },
-  round: {
-    borderRadius: '50%'
+  noBackground: {
+    background: 'none',
+    ':hover': {
+      backgroundColor: 'transparent',
+      background: 'none'
+    },
+    ':focus': {
+      backgroundColor: 'transparent',
+      background: 'none'
+    }
   },
   hasVariations: {
     '.': ClassNames.emojiHasVariations,

package/src/components/emoji/Emoji.tsx

@@ -14,7 +14,7 @@ type ClickableEmojiProps = Readonly<
     hiddenOnSearch?: boolean;
     emoji: DataEmoji;
     className?: string;
-    round?: boolean;
+    noBackground?: boolean;
   }
 >;
 
@@ -28,7 +28,8 @@ export function ClickableEmoji({
   size,
   lazyLoad,
   getEmojiUrl,
-  round = false
+  className,
+  noBackground = false
 }: ClickableEmojiProps) {
   const hasVariations = emojiHasVariations(emoji);
 
@@ -40,7 +41,7 @@ export function ClickableEmoji({
       hiddenOnSearch={hiddenOnSearch}
       emojiNames={emojiNames(emoji)}
       unified={unified}
-      round={round}
+      noBackground={noBackground}
     >
       <ViewOnlyEmoji
         unified={unified}
@@ -49,6 +50,7 @@ export function ClickableEmoji({
         emojiStyle={emojiStyle}
         lazyLoad={lazyLoad}
         getEmojiUrl={getEmojiUrl}
+        className={className}
       />
     </ClickableEmojiButton>
   );