emoji-picker-react 4.7.1 → 4.7.3

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

@@ -7,7 +7,8 @@ declare type ClickableEmojiButtonProps = Readonly<{
     children: React.ReactNode;
     hasVariations: boolean;
     unified?: string;
-    round?: boolean;
+    noBackground?: boolean;
+    className?: string;
 }>;
-export declare function ClickableEmojiButton({ emojiNames, unified, hidden, hiddenOnSearch, showVariations, hasVariations, children, round }: ClickableEmojiButtonProps): JSX.Element;
+export declare function ClickableEmojiButton({ emojiNames, unified, hidden, hiddenOnSearch, showVariations, hasVariations, children, className, noBackground }: ClickableEmojiButtonProps): JSX.Element;
 export {};

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

@@ -7,7 +7,7 @@ declare type ClickableEmojiProps = Readonly<BaseEmojiProps & {
     hiddenOnSearch?: boolean;
     emoji: DataEmoji;
     className?: string;
-    round?: boolean;
+    noBackground?: boolean;
 }>;
-export declare function ClickableEmoji({ emoji, unified, hidden, hiddenOnSearch, emojiStyle, showVariations, size, lazyLoad, getEmojiUrl, round }: ClickableEmojiProps): JSX.Element;
+export declare function ClickableEmoji({ emoji, unified, hidden, hiddenOnSearch, emojiStyle, showVariations, size, lazyLoad, getEmojiUrl, className, noBackground }: ClickableEmojiProps): JSX.Element;
 export {};

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

@@ -17850,10 +17850,11 @@ function ClickableEmojiButton(_ref) {
     showVariations = _ref$showVariations === void 0 ? true : _ref$showVariations,
     hasVariations = _ref.hasVariations,
     children = _ref.children,
-    _ref$round = _ref.round,
-    round = _ref$round === void 0 ? false : _ref$round;
+    className = _ref.className,
+    _ref$noBackground = _ref.noBackground,
+    noBackground = _ref$noBackground === void 0 ? false : _ref$noBackground;
   return React.createElement(Button, {
-    className: flairup.cx(styles$1.emoji, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx), !!(hasVariations && showVariations) && styles$1.hasVariations, round && styles$1.round),
+    className: flairup.cx(styles$1.emoji, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx), !!(hasVariations && showVariations) && styles$1.hasVariations, noBackground && styles$1.noBackground, className),
     "data-unified": unified,
     "aria-label": emojiNames[0],
     "data-full-name": emojiNames
@@ -17881,8 +17882,16 @@ var styles$1 = /*#__PURE__*/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,
@@ -18032,8 +18041,9 @@ function ClickableEmoji(_ref) {
     size = _ref.size,
     lazyLoad = _ref.lazyLoad,
     getEmojiUrl = _ref.getEmojiUrl,
-    _ref$round = _ref.round,
-    round = _ref$round === void 0 ? false : _ref$round;
+    className = _ref.className,
+    _ref$noBackground = _ref.noBackground,
+    noBackground = _ref$noBackground === void 0 ? false : _ref$noBackground;
   var hasVariations = emojiHasVariations(emoji);
   return React.createElement(ClickableEmojiButton, {
     hasVariations: hasVariations,
@@ -18042,14 +18052,15 @@ function ClickableEmoji(_ref) {
     hiddenOnSearch: hiddenOnSearch,
     emojiNames: emojiNames(emoji),
     unified: unified,
-    round: round
+    noBackground: noBackground
   }, React.createElement(ViewOnlyEmoji, {
     unified: unified,
     emoji: emoji,
     size: size,
     emojiStyle: emojiStyle,
     lazyLoad: lazyLoad,
-    getEmojiUrl: getEmojiUrl
+    getEmojiUrl: getEmojiUrl,
+    className: className
   }));
 }
 
@@ -18097,7 +18108,8 @@ var styles$4 = /*#__PURE__*/stylesheet.create({
       backgroundColor: 'var(--epr-hover-bg-color)',
       // @ts-ignore
       ':after': {
-        backgroundPositionY: '-20px'
+        backgroundPositionY: '-20px',
+        transform: 'scale(1.2)'
       }
     },
     ':focus': {
@@ -18154,7 +18166,8 @@ function Reactions() {
       emojiStyle: emojiStyle,
       unified: reaction,
       showVariations: false,
-      round: true
+      className: flairup.cx(styles$5.emojiButton),
+      noBackground: true
     }));
   }), React.createElement("li", null, React.createElement(BtnPlus, null)));
 }
@@ -18167,6 +18180,12 @@ var styles$5 = /*#__PURE__*/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)'
   }
 });