emoji-picker-react 4.7.2 → 4.7.4

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

@@ -7,8 +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, className, 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, className, 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

@@ -17851,10 +17851,10 @@ function ClickableEmojiButton(_ref) {
     hasVariations = _ref.hasVariations,
     children = _ref.children,
     className = _ref.className,
-    _ref$round = _ref.round,
-    round = _ref$round === void 0 ? false : _ref$round;
+    _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),
+    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
@@ -17882,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,
@@ -18034,8 +18042,8 @@ function ClickableEmoji(_ref) {
     lazyLoad = _ref.lazyLoad,
     getEmojiUrl = _ref.getEmojiUrl,
     className = _ref.className,
-    _ref$round = _ref.round,
-    round = _ref$round === void 0 ? false : _ref$round;
+    _ref$noBackground = _ref.noBackground,
+    noBackground = _ref$noBackground === void 0 ? false : _ref$noBackground;
   var hasVariations = emojiHasVariations(emoji);
   return React.createElement(ClickableEmojiButton, {
     hasVariations: hasVariations,
@@ -18044,7 +18052,7 @@ function ClickableEmoji(_ref) {
     hiddenOnSearch: hiddenOnSearch,
     emojiNames: emojiNames(emoji),
     unified: unified,
-    round: round
+    noBackground: noBackground
   }, React.createElement(ViewOnlyEmoji, {
     unified: unified,
     emoji: emoji,
@@ -18100,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': {
@@ -18158,7 +18167,7 @@ function Reactions() {
       unified: reaction,
       showVariations: false,
       className: flairup.cx(styles$5.emojiButton),
-      round: true
+      noBackground: true
     }));
   }), React.createElement("li", null, React.createElement(BtnPlus, null)));
 }
@@ -18176,6 +18185,12 @@ var styles$5 = /*#__PURE__*/stylesheet.create({
     ':hover': {
       transform: 'scale(1.2)'
     },
+    ':focus': {
+      transform: 'scale(1.2)'
+    },
+    ':active': {
+      transform: 'scale(1.1)'
+    },
     transition: 'transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5)'
   }
 });