emoji-picker-react 4.6.8-rc.3 → 4.6.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.6.8-rc.3",
+  "version": "4.6.8",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -92,7 +92,6 @@
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "@rollup/plugin-image": "^3.0.3",
     "size-limit": "^8.0.1",
     "tiny-invariant": "^1.2.0",
     "tsdx": "^0.14.1",
@@ -100,6 +99,6 @@
     "typescript": "^4.7.4"
   },
   "dependencies": {
-    "flairup": "0.0.24"
+    "flairup": "^0.0.25"
   }
 }

package/src/components/body/EmojiVariationPicker.css

@@ -1,81 +1,3 @@
-.EmojiPickerReact .epr-emoji-variation-picker {
-  position: absolute;
-  top: 0;
-  right: 15px;
-  left: 15px;
-  padding: 5px;
-  height: 0;
-  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
-  border-radius: 3px;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  top: -100%;
-  border: 1px solid var(--epr-picker-border-color);
-  height: var(--epr-emoji-variation-picker-height);
-  z-index: var(--epr-skin-variation-picker-z-index);
-  background: var(--epr-emoji-variation-picker-bg-color);
-  transform: scale(0.9);
-  transition: transform 0.1s ease-out, opacity 0.2s ease-out;
-}
-
-.EmojiPickerReact .epr-emoji-variation-picker.pointing-up {
-  transform-origin: center 0%;
-  transform: scale(0.9);
-}
-
-.EmojiPickerReact .epr-emoji-variation-picker.visible {
-  opacity: 1;
-  visibility: visible;
-  pointer-events: all;
-  transform: scale(1);
-}
-.EmojiPickerReact
-  .epr-emoji-variation-picker
-  .EmojiPickerReact
-  .epr-emoji-variation-picker
-  button.epr-emoji:hover {
-  background: none;
-}
-
-.EmojiPickerReact .epr-emoji-variation-picker .epr-emoji-pointer {
-  content: '';
-  position: absolute;
-  top: -10px;
-  width: 25px;
-  height: 15px;
-}
-
 .EmojiPickerReact .epr-emoji-variation-picker .epr-emoji-pointer {
   background-image: svg-load(./svg/triangle.svg);
-  background-repeat: no-repeat;
-  background-position: 0 0;
-  background-size: 50px 15px;
-}
-
-.EmojiPickerReact.epr-dark-theme
-  .epr-emoji-variation-picker
-  .epr-emoji-pointer {
-  background-position: -25px 0;
-}
-
-@media (prefers-color-scheme: dark) {
-  .EmojiPickerReact.epr-auto-theme
-    .epr-emoji-variation-picker
-    .epr-emoji-pointer {
-    background-position: -25px 0;
-  }
-}
-
-.EmojiPickerReact .epr-emoji-variation-picker .epr-emoji-pointer {
-  top: 100%;
-  transform: translateX(-18px);
-}
-
-.EmojiPickerReact .epr-emoji-variation-picker.pointing-up .epr-emoji-pointer {
-  top: 0;
-  transform: rotate(180deg) translateY(100%) translateX(18px);
 }

package/src/components/body/EmojiVariationPicker.tsx

@@ -10,6 +10,7 @@ import {
   emojiTrueOffsetTop,
   emojiTruOffsetLeft
 } from '../../DomUtils/selectors';
+import { stylesheet } from '../../Stylesheet/stylesheet';
 import {
   useEmojiStyleConfig,
   useGetEmojiUrlConfig
@@ -35,6 +36,7 @@ enum Direction {
   Down
 }
 
+// eslint-disable-next-line complexity
 export function EmojiVariationPicker() {
   const AnchoredEmojiRef = useAnchoredEmojiRef();
   const VariationPickerRef = useVariationPickerRef();
@@ -50,11 +52,12 @@ export function EmojiVariationPicker() {
 
   const button = buttonFromTarget(AnchoredEmojiRef.current);
 
-  const visible =
+  const visible = Boolean(
     emoji &&
-    button &&
-    emojiHasVariations(emoji) &&
-    button.classList.contains(ClassNames.emojiHasVariations);
+      button &&
+      emojiHasVariations(emoji) &&
+      button.classList.contains(ClassNames.emojiHasVariations)
+  );
 
   useEffect(() => {
     if (!visible) {
@@ -76,10 +79,11 @@ export function EmojiVariationPicker() {
   return (
     <div
       ref={VariationPickerRef}
-      className={cx(ClassNames.variationPicker, {
-        visible,
-        'pointing-up': getMenuDirection() === Direction.Down
-      })}
+      className={cx(
+        styles.variationPicker,
+        getMenuDirection() === Direction.Down && styles.pointingUp,
+        visible && styles.visible
+      )}
       style={{ top }}
     >
       {visible && emoji
@@ -97,7 +101,7 @@ export function EmojiVariationPicker() {
               />
             ))
         : null}
-      <div className="epr-emoji-pointer" style={pointerStyle} />
+      <div className={cx(styles.pointer)} style={pointerStyle} />
     </div>
   );
 }
@@ -172,3 +176,70 @@ function useVariationPickerTop(
     return emojiOffsetTop - height;
   }
 }
+
+const styles = stylesheet.create({
+  variationPicker: {
+    '.': ClassNames.variationPicker,
+    position: 'absolute',
+    right: '15px',
+    left: '15px',
+    padding: '5px',
+    boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.2)',
+    borderRadius: '3px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    opacity: '0',
+    visibility: 'hidden',
+    pointerEvents: 'none',
+    top: '-100%',
+    border: '1px solid var(--epr-picker-border-color)',
+    height: 'var(--epr-emoji-variation-picker-height)',
+    zIndex: 'var(--epr-skin-variation-picker-z-index)',
+    background: 'var(--epr-emoji-variation-picker-bg-color)',
+    transform: 'scale(0.9)',
+    transition: 'transform 0.1s ease-out, opacity 0.2s ease-out'
+  },
+  pointingUp: {
+    '.': 'pointing-up',
+    transformOrigin: 'center 0%',
+    transform: 'scale(0.9)'
+  },
+  '.pointing-up': {
+    pointer: {
+      top: '0',
+      transform: 'rotate(180deg) translateY(100%) translateX(18px)'
+    }
+  },
+  visible: {
+    opacity: '1',
+    visibility: 'visible',
+    pointerEvents: 'all',
+    transform: 'scale(1)'
+  },
+  pointer: {
+    '.': 'epr-emoji-pointer',
+    content: '',
+    position: 'absolute',
+    width: '25px',
+    height: '15px',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: '0 0',
+    backgroundSize: '50px 15px',
+    top: '100%',
+    transform: 'translateX(-18px)'
+  },
+  '.epr-dark-theme': {
+    pointer: {
+      backgroundPosition: '-25px 0'
+    }
+  },
+  '.epr-auto-theme': {
+    pointer: {
+      // @ts-ignore
+      '@media (prefers-color-scheme: dark)': {
+        backgroundPosition: '-25px 0'
+      }
+    }
+  }
+});

package/src/components/emoji/ClickableEmojiButton.tsx

@@ -2,11 +2,9 @@ import { cx } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../../DomUtils/classNames';
-import { commonStyles } from '../../Stylesheet/stylesheet';
+import { commonStyles, stylesheet } from '../../Stylesheet/stylesheet';
 import { Button } from '../atoms/Button';
 
-import './Emoji.css';
-
 type ClickableEmojiButtonProps = Readonly<{
   hidden?: boolean;
   showVariations?: boolean;
@@ -29,13 +27,13 @@ export function ClickableEmojiButton({
   return (
     <Button
       className={cx(
-        ClassNames.emoji,
+        styles.emoji,
         hidden && commonStyles.hidden,
         hiddenOnSearch && commonStyles.hiddenOnSearch,
         {
-          [ClassNames.visible]: !hidden && !hiddenOnSearch,
-          [ClassNames.emojiHasVariations]: hasVariations && showVariations
-        }
+          [ClassNames.visible]: !hidden && !hiddenOnSearch
+        },
+        !!(hasVariations && showVariations) && styles.hasVariations
       )}
       data-unified={unified}
       aria-label={emojiNames[0]}
@@ -45,3 +43,47 @@ export function ClickableEmojiButton({
     </Button>
   );
 }
+
+const styles = stylesheet.create({
+  emoji: {
+    '.': ClassNames.emoji,
+    position: 'relative',
+    width: 'var(--epr-emoji-fullsize)',
+    height: 'var(--epr-emoji-fullsize)',
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    maxWidth: 'var(--epr-emoji-fullsize)',
+    maxHeight: 'var(--epr-emoji-fullsize)',
+    borderRadius: '8px',
+    overflow: 'hidden',
+    transition: 'background-color 0.2s',
+    ':hover': {
+      backgroundColor: 'var(--epr-emoji-hover-color)'
+    },
+    ':focus': {
+      backgroundColor: 'var(--epr-focus-bg-color)'
+    }
+  },
+  hasVariations: {
+    '.': ClassNames.emojiHasVariations,
+    ':after': {
+      content: '',
+      display: 'block',
+      width: '0',
+      height: '0',
+      right: '0px',
+      bottom: '1px',
+      position: 'absolute',
+      borderLeft: '4px solid transparent',
+      borderRight: '4px solid transparent',
+      transform: 'rotate(135deg)',
+      borderBottom: '4px solid var(--epr-emoji-variation-indicator-color)',
+      zIndex: 'var(--epr-emoji-variations-indictator-z-index)'
+    },
+    ':hover:after': {
+      borderBottom: '4px solid var(--epr-emoji-variation-indicator-color-hover)'
+    }
+  }
+});

package/src/components/emoji/Emoji.tsx

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { DataEmoji } from '../../dataUtils/DataTypes';
 import { emojiHasVariations, emojiNames } from '../../dataUtils/emojiSelectors';
 
-import './Emoji.css';
 import { BaseEmojiProps } from './BaseEmojiProps';
 import { ClickableEmojiButton } from './ClickableEmojiButton';
 import { ViewOnlyEmoji } from './ViewOnlyEmoji';
@@ -14,6 +13,7 @@ type ClickableEmojiProps = Readonly<
     showVariations?: boolean;
     hiddenOnSearch?: boolean;
     emoji: DataEmoji;
+    className?: string;
   }
 >;
 

package/src/components/emoji/EmojiImg.tsx

@@ -1,9 +1,11 @@
 import { cx } from 'flairup';
 import * as React from 'react';
 
-import { ClassNames } from '../../DomUtils/classNames';
+import { stylesheet } from '../../Stylesheet/stylesheet';
 import { EmojiStyle } from '../../types/exposedTypes';
 
+import { emojiStyles } from './emojiStyles';
+
 export function EmojiImg({
   emojiName,
   style,
@@ -22,10 +24,21 @@ export function EmojiImg({
     <img
       src={imgUrl}
       alt={emojiName}
-      className={cx(ClassNames.external, 'epr-emoji-img')}
+      className={cx(styles.emojiImag, emojiStyles.external, emojiStyles.common)}
       loading={lazyLoad ? 'lazy' : 'eager'}
       onError={onError}
       style={style}
     />
   );
 }
+
+const styles = stylesheet.create({
+  emojiImag: {
+    '.': 'epr-emoji-img',
+    maxWidth: 'var(--epr-emoji-fullsize)',
+    maxHeight: 'var(--epr-emoji-fullsize)',
+    minWidth: 'var(--epr-emoji-fullsize)',
+    minHeight: 'var(--epr-emoji-fullsize)',
+    padding: 'var(--epr-emoji-padding)'
+  }
+});

package/src/components/emoji/NativeEmoji.tsx

@@ -1,9 +1,11 @@
 import { cx } from 'flairup';
 import * as React from 'react';
 
-import { ClassNames } from '../../DomUtils/classNames';
+import { stylesheet } from '../../Stylesheet/stylesheet';
 import { parseNativeEmoji } from '../../dataUtils/parseNativeEmoji';
 
+import { emojiStyles } from './emojiStyles';
+
 export function NativeEmoji({
   unified,
   style
@@ -13,7 +15,11 @@ export function NativeEmoji({
 }) {
   return (
     <span
-      className={cx(ClassNames.external, 'epr-emoji-native')}
+      className={cx(
+        styles.nativeEmoji,
+        emojiStyles.common,
+        emojiStyles.external
+      )}
       data-unified={unified}
       style={style}
     >
@@ -21,3 +27,19 @@ export function NativeEmoji({
     </span>
   );
 }
+
+const styles = stylesheet.create({
+  nativeEmoji: {
+    '.': 'epr-emoji-native',
+    fontFamily:
+      '"Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "EmojiOne Color", "Android Emoji"!important',
+    position: 'relative',
+    lineHeight: '100%',
+    fontSize: 'var(--epr-emoji-size)',
+    textAlign: 'center',
+    alignSelf: 'center',
+    justifySelf: 'center',
+    letterSpacing: '0',
+    padding: 'var(--epr-emoji-padding)'
+  }
+});

package/src/components/emoji/emojiStyles.ts

@@ -0,0 +1,14 @@
+import { ClassNames } from '../../DomUtils/classNames';
+import { stylesheet } from '../../Stylesheet/stylesheet';
+
+export const emojiStyles = stylesheet.create({
+  external: {
+    '.': ClassNames.external,
+    fontSize: '0'
+  },
+  common: {
+    alignSelf: 'center',
+    justifySelf: 'center',
+    display: 'block'
+  }
+});

package/src/components/header/Search.css

@@ -1,132 +1,10 @@
-.EmojiPickerReact .epr-search-container {
-  flex: 1;
-  display: block;
-  min-width: 0;
-}
-
-.EmojiPickerReact .epr-search-container .epr-status-visually-hidden {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-.EmojiPickerReact .epr-search-container input.epr-search {
-  outline: none;
-  transition: all 0.2s ease-in-out;
-  color: var(--epr-search-input-text-color);
-  border-radius: var(--epr-search-input-border-radius);
-  padding: var(--epr-search-input-padding);
-  height: var(--epr-search-input-height);
-  background-color: var(--epr-search-input-bg-color);
-  border: 1px solid var(--epr-search-input-bg-color);
-  width: 100%;
-}
-
 .EmojiPickerReact
   .epr-search-container
   button.epr-btn-clear-search
   .epr-icn-clear-search {
   background-image: svg-load(./svg/times.svg);
-  background-color: transparent;
-  background-repeat: no-repeat;
-  background-size: 20px;
-  height: 20px;
-  width: 20px;
-}
-
-.EmojiPickerReact .epr-search-container button.epr-btn-clear-search {
-  position: absolute;
-  right: var(--epr-search-bar-inner-padding);
-  height: 30px;
-  width: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  top: 50%;
-  transform: translateY(-50%);
-  padding: 0;
-  border-radius: 50%;
-}
-
-.EmojiPickerReact
-  .epr-search-container
-  button.epr-btn-clear-search:hover
-  .epr-icn-clear-search,
-.EmojiPickerReact
-  .epr-search-container
-  button.epr-btn-clear-search:focus
-  .epr-icn-clear-search {
-  background-position-y: -20px;
-}
-
-.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:hover,
-.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:focus {
-  background: var(--epr-hover-bg-color);
-}
-
-.EmojiPickerReact.epr-dark-theme
-  .epr-search-container
-  button.epr-btn-clear-search
-  .epr-icn-clear-search {
-  background-position-y: -40px;
-}
-
-.EmojiPickerReact.epr-dark-theme
-  .epr-search-container
-  button.epr-btn-clear-search:hover
-  .epr-icn-clear-search {
-  background-position-y: -60px;
-}
-
-@media (prefers-color-scheme: dark) {
-  .EmojiPickerReact.epr-auto-theme
-    .epr-search-container
-    button.epr-btn-clear-search
-    .epr-icn-clear-search {
-    background-position-y: -40px;
-  }
-
-  .EmojiPickerReact.epr-auto-theme
-    .epr-search-container
-    button.epr-btn-clear-search:hover
-    .epr-icn-clear-search {
-    background-position-y: -60px;
-  }
 }
 
 .EmojiPickerReact .epr-search-container .epr-icn-search {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: var(--epr-search-bar-inner-padding);
-  transform: translateY(-50%);
-  width: 20px;
-  height: 20px;
   background-image: svg-load(./svg/magnifier.svg);
-  background-repeat: no-repeat;
-  background-position: 0 0;
-  background-size: 20px;
-}
-
-.EmojiPickerReact.epr-dark-theme .epr-search-container .epr-icn-search {
-  background-position-y: -20px;
-}
-
-@media (prefers-color-scheme: dark) {
-  .EmojiPickerReact.epr-auto-theme .epr-search-container .epr-icn-search {
-    background-position-y: -20px;
-  }
-}
-
-.EmojiPickerReact .epr-search-container input.epr-search::placeholder {
-  color: var(--epr-search-input-placeholder-color);
-}
-
-.EmojiPickerReact .epr-search-container input.epr-search:focus {
-  background-color: var(--epr-search-input-bg-color-active);
-  border: 1px solid var(--epr-search-border-color);
 }