emoji-picker-react 4.6.9 → 4.6.10

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.6.9",
+  "version": "4.6.10",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -99,6 +99,6 @@
     "typescript": "^4.7.4"
   },
   "dependencies": {
-    "flairup": "0.0.28"
+    "flairup": "0.0.31"
   }
 }

package/src/EmojiPickerReact.tsx

@@ -7,7 +7,6 @@ import { Preview } from './components/footer/Preview';
 import { Header } from './components/header/Header';
 import PickerMain from './components/main/PickerMain';
 
-import './EmojiPickerReact.css';
 import { PickerProps } from './index';
 
 function EmojiPicker(props: PickerProps) {

package/src/Stylesheet/stylesheet.ts

@@ -4,31 +4,39 @@ import { ClassNames } from '../DomUtils/classNames';
 
 export const stylesheet = createSheet('epr');
 
+const hidden = {
+  display: 'none',
+  opacity: '0',
+  pointerEvents: 'none',
+  visibility: 'hidden'
+};
+
 export const commonStyles = stylesheet.create({
   hidden: {
     '.': ClassNames.hidden,
-    display: 'none',
-    opacity: '0',
-    pointerEvents: 'none',
-    visibility: 'hidden'
-  },
-  hiddenOnSearch: {
-    display: 'none',
-    opacity: '0',
-    pointerEvents: 'none',
-    visibility: 'hidden'
+    ...hidden
   }
 });
 
 export const commonInteractionStyles = stylesheet.create({
-  '.epr-main:has(input:not(:placeholder-shown))': {
-    categoryBtn: {
-      ':hover': {
-        opacity: '1',
-        backgroundPositionY: 'var(--epr-category-navigation-button-size)'
+  '.epr-main': {
+    ':has(input:not(:placeholder-shown))': {
+      categoryBtn: {
+        ':hover': {
+          opacity: '1',
+          backgroundPositionY: 'var(--epr-category-navigation-button-size)'
+        }
+      },
+      hiddenOnSearch: {
+        '.': ClassNames.hiddenOnSearch,
+        ...hidden
       }
+    },
+    ':has(input(:placeholder-shown))': {
+      visibleOnSearchOnly: hidden
     }
   },
+
   '.EmojiPickerReact:not(.epr-search-active)': {
     categoryBtn: {
       ':hover': {
@@ -40,6 +48,10 @@ export const commonInteractionStyles = stylesheet.create({
         opacity: '1',
         backgroundPositionY: 'var(--epr-category-navigation-button-size)'
       }
+    },
+    visibleOnSearchOnly: {
+      '.': 'epr-visible-on-search-only',
+      ...hidden
     }
   }
 });

package/src/components/body/EmojiCategory.tsx

@@ -2,7 +2,11 @@ import { cx } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../../DomUtils/classNames';
-import { commonStyles, stylesheet } from '../../Stylesheet/stylesheet';
+import {
+  commonInteractionStyles,
+  commonStyles,
+  stylesheet
+} from '../../Stylesheet/stylesheet';
 import {
   CategoryConfig,
   categoryFromCategoryConfig,
@@ -30,7 +34,7 @@ export function EmojiCategory({
       className={cx(
         styles.category,
         hidden && commonStyles.hidden,
-        hiddenOnSearch && commonStyles.hiddenOnSearch
+        hiddenOnSearch && commonInteractionStyles.hiddenOnSearch
       )}
       data-name={category}
       aria-label={categoryName}

package/src/components/emoji/BaseEmojiProps.ts

@@ -9,5 +9,6 @@ export type BaseEmojiProps = {
   size?: number;
   lazyLoad?: boolean;
   getEmojiUrl?: GetEmojiUrl;
+  className?: string;
 };
 export type GetEmojiUrl = (unified: string, style: EmojiStyle) => string;

package/src/components/emoji/ClickableEmojiButton.tsx

@@ -2,7 +2,7 @@ import { cx } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../../DomUtils/classNames';
-import { commonStyles, stylesheet } from '../../Stylesheet/stylesheet';
+import { commonInteractionStyles, commonStyles, stylesheet } from '../../Stylesheet/stylesheet';
 import { Button } from '../atoms/Button';
 
 type ClickableEmojiButtonProps = Readonly<{
@@ -29,7 +29,7 @@ export function ClickableEmojiButton({
       className={cx(
         styles.emoji,
         hidden && commonStyles.hidden,
-        hiddenOnSearch && commonStyles.hiddenOnSearch,
+        hiddenOnSearch && commonInteractionStyles.hiddenOnSearch,
         {
           [ClassNames.visible]: !hidden && !hiddenOnSearch
         },

package/src/components/emoji/EmojiImg.tsx

@@ -11,20 +11,22 @@ export function EmojiImg({
   style,
   lazyLoad = false,
   imgUrl,
-  onError
+  onError,
+  className
 }: {
   emojiName: string;
   emojiStyle: EmojiStyle;
   style: React.CSSProperties;
   lazyLoad?: boolean;
   imgUrl: string;
-  onError: () => void;
+    onError: () => void;
+  className?: string;
 }) {
   return (
     <img
       src={imgUrl}
       alt={emojiName}
-      className={cx(styles.emojiImag, emojiStyles.external, emojiStyles.common)}
+      className={cx(styles.emojiImag, emojiStyles.external, emojiStyles.common, className)}
       loading={lazyLoad ? 'lazy' : 'eager'}
       onError={onError}
       style={style}

package/src/components/emoji/NativeEmoji.tsx

@@ -8,17 +8,20 @@ import { emojiStyles } from './emojiStyles';
 
 export function NativeEmoji({
   unified,
-  style
+  style,
+  className
 }: {
   unified: string;
   style: React.CSSProperties;
+  className?: string;
 }) {
   return (
     <span
       className={cx(
         styles.nativeEmoji,
         emojiStyles.common,
-        emojiStyles.external
+        emojiStyles.external,
+        className
       )}
       data-unified={unified}
       style={style}

package/src/components/emoji/ViewOnlyEmoji.tsx

@@ -19,7 +19,8 @@ export function ViewOnlyEmoji({
   emojiStyle,
   size,
   lazyLoad,
-  getEmojiUrl = emojiUrlByUnified
+  getEmojiUrl = emojiUrlByUnified,
+  className
 }: BaseEmojiProps) {
   const [, setEmojisThatFailedToLoad] = useEmojisThatFailedToLoadState();
 
@@ -43,6 +44,7 @@ export function ViewOnlyEmoji({
         lazyLoad={lazyLoad}
         imgUrl={emojiToRender.imgUrl}
         onError={onError}
+        className={className}
       />
     );
   }
@@ -50,7 +52,7 @@ export function ViewOnlyEmoji({
   return (
     <>
       {emojiStyle === EmojiStyle.NATIVE ? (
-        <NativeEmoji unified={unified} style={style} />
+        <NativeEmoji unified={unified} style={style} className={className} />
       ) : (
         <EmojiImg
           style={style}
@@ -59,6 +61,7 @@ export function ViewOnlyEmoji({
           lazyLoad={lazyLoad}
           imgUrl={getEmojiUrl(unified, emojiStyle)}
           onError={onError}
+          className={className}
         />
       )}
     </>

package/src/components/footer/Preview.tsx

@@ -75,6 +75,7 @@ export function PreviewBody() {
               emojiStyle={emojiStyle}
               size={45}
               getEmojiUrl={getEmojiUrl}
+              className={cx(styles.emoji)}
             />
           ) : defaultEmoji ? (
             <ViewOnlyEmoji
@@ -83,6 +84,7 @@ export function PreviewBody() {
               emojiStyle={emojiStyle}
               size={45}
               getEmojiUrl={getEmojiUrl}
+              className={cx(styles.emoji)}
             />
           ) : null}
         </div>
@@ -115,5 +117,8 @@ const styles = stylesheet.create({
     fontSize: 'var(--epr-preview-text-size)',
     padding: 'var(--epr-preview-text-padding)',
     textTransform: 'capitalize'
+  },
+  emoji: {
+    padding: '0'
   }
 });

package/src/components/header/Search.tsx

@@ -2,7 +2,10 @@ import { cx } from 'flairup';
 import * as React from 'react';
 import { useState } from 'react';
 
-import { stylesheet } from '../../Stylesheet/stylesheet';
+import {
+  commonInteractionStyles,
+  stylesheet
+} from '../../Stylesheet/stylesheet';
 import {
   useAutoFocusSearchConfig,
   useSearchDisabledConfig,
@@ -83,7 +86,10 @@ export function Search() {
       ) : null}
       <div className={cx(styles.icnSearch)} />
       <Button
-        className={cx(styles.btnClearSearch, 'epr-visible-on-search-only')}
+        className={cx(
+          styles.btnClearSearch,
+          commonInteractionStyles.visibleOnSearchOnly
+        )}
         onClick={clearSearch}
         aria-label="Clear"
         title="Clear"

package/src/components/header/SkinTonePicker.tsx

@@ -140,7 +140,7 @@ const styles = stylesheet.create({
     backdropFilter: 'blur(5px)',
     background: 'var(--epr-skin-tone-picker-menu-color)',
     // @ts-ignore
-    '&.epr-active:after': {
+    '.epr-active:after': {
       content: '',
       position: 'absolute',
       top: '-2px',

package/src/components/main/PickerMain.tsx

@@ -95,7 +95,12 @@ const styles = stylesheet.create({
     borderRadius: 'var(--epr-picker-border-radius)',
     borderColor: 'var(--epr-picker-border-color)',
     backgroundColor: 'var(--epr-bg-color)',
-    overflow: 'hidden'
+    overflow: 'hidden',
+    // @ts-expect-error - need to work on this
+    '*': {
+      boxSizing: 'border-box',
+      fontFamily: 'sans-serif'
+    }
   },
   baseVariables: {
     '--': {

package/src/components/navigation/CategoryNavigation.tsx

@@ -161,24 +161,14 @@ const styles = stylesheet.create({
     catBtn: {
       backgroundPositionY:
         'calc(var(--epr-category-navigation-button-size) * 2)'
-    }
-  },
-  '.epr-auto-theme': {
-    catBtn: {
-      '@media (prefers-color-scheme: dark)': {
-        backgroundPositionY:
-          'calc(var(--epr-category-navigation-button-size) * 2)'
-      }
-    }
-  },
-  '.epr-auto-theme:not(.epr-search-active)': {
-    catBtn: {
-      '@media (prefers-color-scheme: dark)': {
+    },
+    ':not(.epr-search-active)': {
+      // @ts-expect-error - need to fix this
+      catBtn: {
         ':hover': {
           backgroundPositionY:
             'calc(var(--epr-category-navigation-button-size) * 3)'
         },
-        // @ts-ignore
         '&.epr-active': {
           backgroundPositionY:
             'calc(var(--epr-category-navigation-button-size) * 3)'
@@ -186,16 +176,26 @@ const styles = stylesheet.create({
       }
     }
   },
-  '.epr-dark-theme:not(.epr-search-active)': {
+  '.epr-auto-theme': {
     catBtn: {
-      ':hover': {
-        backgroundPositionY:
-          'calc(var(--epr-category-navigation-button-size) * 3)'
-      },
-      // @ts-ignore
-      '&.epr-active': {
+      '@media (prefers-color-scheme: dark)': {
         backgroundPositionY:
-          'calc(var(--epr-category-navigation-button-size) * 3)'
+          'calc(var(--epr-category-navigation-button-size) * 2)'
+      }
+    },
+    ':not(.epr-search-active)': {
+      catBtn: {
+        '@media (prefers-color-scheme: dark)': {
+          ':hover': {
+            backgroundPositionY:
+              'calc(var(--epr-category-navigation-button-size) * 3)'
+          },
+          // @ts-ignore
+          '&.epr-active': {
+            backgroundPositionY:
+              'calc(var(--epr-category-navigation-button-size) * 3)'
+          }
+        }
       }
     }
   }

package/src/EmojiPickerReact.css

@@ -1,30 +0,0 @@
-.EmojiPickerReact:not(.epr-search-active) .epr-visible-on-search-only {
-  display: none !important;
-  opacity: 0 !important;
-  pointer-events: none !important;
-  visibility: hidden !important;
-}
-
-/*  This is the same as .search-active, only without any js behind it
-    Should switch to it full time when :has() gets better adoption
-*/
-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: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;
-}