emoji-picker-react 4.6.8 → 4.6.9

package/package.json

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

package/src/Stylesheet/stylesheet.ts

@@ -19,3 +19,27 @@ export const commonStyles = stylesheet.create({
     visibility: 'hidden'
   }
 });
+
+export const commonInteractionStyles = stylesheet.create({
+  '.epr-main:has(input:not(:placeholder-shown))': {
+    categoryBtn: {
+      ':hover': {
+        opacity: '1',
+        backgroundPositionY: 'var(--epr-category-navigation-button-size)'
+      }
+    }
+  },
+  '.EmojiPickerReact:not(.epr-search-active)': {
+    categoryBtn: {
+      ':hover': {
+        opacity: '1',
+        backgroundPositionY: 'var(--epr-category-navigation-button-size)'
+      },
+      // @ts-ignore
+      '&.epr-active': {
+        opacity: '1',
+        backgroundPositionY: 'var(--epr-category-navigation-button-size)'
+      }
+    }
+  }
+});

package/src/components/header/Search.tsx

@@ -194,19 +194,16 @@ const styles = stylesheet.create({
   },
   '.epr-auto-theme': {
     icnSearch: {
-      // @ts-ignore
       '@media (prefers-color-scheme: dark)': {
         backgroundPositionY: '-20px'
       }
     },
     icnClearnSearch: {
-      // @ts-ignore
       '@media (prefers-color-scheme: dark)': {
         backgroundPositionY: '-40px'
       }
     },
     btnClearSearch: {
-      // @ts-ignore
       '@media (prefers-color-scheme: dark)': {
         // @ts-ignore
         ':hover > .epr-icn-clear-search': {

package/src/components/header/SkinTonePicker.tsx

@@ -1,6 +1,9 @@
+/* eslint-disable complexity */
+import { cx } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../../DomUtils/classNames';
+import { stylesheet } from '../../Stylesheet/stylesheet';
 import { useSkinTonesDisabledConfig } from '../../config/useConfig';
 import skinToneVariations, {
   skinTonesNamed
@@ -17,9 +20,6 @@ import {
   useSkinToneFanOpenState
 } from '../context/PickerContext';
 
-import './SkinTonePicker.css';
-import { cx } from 'flairup';
-
 const ITEM_SIZE = 28;
 
 type Props = {
@@ -58,16 +58,18 @@ export function SkinTonePicker({
 
   return (
     <Relative
-      className={cx('epr-skin-tones', direction, {
-        [ClassNames.open]: isOpen
-      })}
+      className={cx(
+        styles.skinTones,
+        vertical && styles.vertical,
+        isOpen && styles.open
+      )}
       style={
         vertical
           ? { flexBasis: expandedSize, height: expandedSize }
           : { flexBasis: expandedSize }
       }
     >
-      <div className="epr-skin-tone-select" ref={SkinTonePickerRef}>
+      <div className={cx(styles.select)} ref={SkinTonePickerRef}>
         {skinToneVariations.map((skinToneVariation, i) => {
           const active = skinToneVariation === activeSkinTone;
           return (
@@ -90,9 +92,12 @@ export function SkinTonePicker({
                 closeAllOpenToggles();
               }}
               key={skinToneVariation}
-              className={cx(`epr-tone-${skinToneVariation}`, 'epr-tone', {
-                [ClassNames.active]: active
-              })}
+              className={cx(
+                `epr-tone-${skinToneVariation}`,
+                styles.tone,
+                !isOpen && styles.closedTone,
+                active && styles.active
+              )}
               tabIndex={isOpen ? 0 : -1}
               aria-pressed={active}
               aria-label={`Skin tone ${
@@ -110,3 +115,96 @@ export enum SkinTonePickerDirection {
   VERTICAL = ClassNames.vertical,
   HORIZONTAL = ClassNames.horizontal
 }
+
+const styles = stylesheet.create({
+  skinTones: {
+    '.': 'epr-skin-tones',
+    '--': {
+      '--epr-skin-tone-size': '15px'
+    },
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    transition: 'all 0.3s ease-in-out',
+    padding: '10px 0'
+  },
+  vertical: {
+    padding: '5px',
+    alignItems: 'flex-end',
+    flexDirection: 'column',
+    borderRadius: '6px',
+    border: '1px solid var(--epr-bg-color)'
+  },
+  open: {
+    // @ts-ignore
+    backdropFilter: 'blur(5px)',
+    background: 'var(--epr-skin-tone-picker-menu-color)',
+    // @ts-ignore
+    '&.epr-active:after': {
+      content: '',
+      position: 'absolute',
+      top: '-2px',
+      left: '-2px',
+      right: '-2px',
+      bottom: '-2px',
+      borderRadius: '5px',
+      border: '1px solid var(--epr-active-skin-tone-indicator-border-color)'
+    }
+  },
+  select: {
+    '.': 'epr-skin-tone-select',
+    position: 'relative',
+    width: 'var(--epr-skin-tone-size)',
+    height: 'var(--epr-skin-tone-size)',
+    // @ts-ignore
+    '> button': {
+      width: 'var(--epr-skin-tone-size)',
+      display: 'block',
+      cursor: 'pointer',
+      borderRadius: '4px',
+      height: 'var(--epr-skin-tone-size)',
+      position: 'absolute',
+      right: '0',
+      transition: 'transform 0.3s ease-in-out, opacity 0.35s ease-in-out',
+      zIndex: '0',
+      boxShadow: '0 0 0 0px var(--epr-active-skin-hover-color)'
+    }
+  },
+  closedTone: {
+    opacity: '0',
+    zIndex: '0'
+  },
+  active: {
+    '.': 'epr-active',
+    zIndex: '1',
+    opacity: '1'
+  },
+  tone: {
+    '.': 'epr-tone',
+    ':hover': {
+      boxShadow: '0 0 0 3px var(--epr-active-skin-hover-color)'
+    },
+    ':focus': {
+      boxShadow: '0 0 0 3px var(--epr-focus-bg-color)'
+    },
+    // @ts-ignore
+    '&.epr-tone-neutral': {
+      backgroundColor: '#ffd225'
+    },
+    '&.epr-tone-1f3fb': {
+      backgroundColor: '#ffdfbd'
+    },
+    '&.epr-tone-1f3fc': {
+      backgroundColor: '#e9c197'
+    },
+    '&.epr-tone-1f3fd': {
+      backgroundColor: '#c88e62'
+    },
+    '&.epr-tone-1f3fe': {
+      backgroundColor: '#a86637'
+    },
+    '&.epr-tone-1f3ff': {
+      backgroundColor: '#60463a'
+    }
+  }
+});

package/src/components/navigation/CategoryNavigation.css

@@ -1,80 +1,3 @@
 aside.EmojiPickerReact .epr-cat-btn {
   background-image: svg-load(./svg/CategoryNav.svg);
 }
-
-aside.EmojiPickerReact.epr-main:has(input:not(:placeholder-shown))
-  .epr-category-nav
-  > button.epr-cat-btn:hover {
-  opacity: 1;
-  background-position-y: var(--epr-category-navigation-button-size);
-}
-.EmojiPickerReact:not(.epr-search-active)
-  .epr-category-nav
-  > button.epr-cat-btn:hover,
-.EmojiPickerReact:not(.epr-search-active)
-  .epr-category-nav
-  > button.epr-cat-btn.epr-active {
-  opacity: 1;
-  background-position-y: var(--epr-category-navigation-button-size);
-}
-
-.EmojiPickerReact.epr-dark-theme .epr-category-nav > button.epr-cat-btn {
-  background-position-y: calc(var(--epr-category-navigation-button-size) * 2);
-}
-
-aside.EmojiPickerReact.epr-main:has(input:placeholder-shown) .epr-category-nav {
-  background-position-y: calc(var(--epr-category-navigation-button-size) * 3);
-}
-.EmojiPickerReact.epr-dark-theme:not(.epr-search-active)
-  .epr-category-nav
-  > button.epr-cat-btn:hover,
-.EmojiPickerReact.epr-dark-theme:not(.epr-search-active)
-  .epr-category-nav
-  > button.epr-cat-btn.epr-active {
-  background-position-y: calc(var(--epr-category-navigation-button-size) * 3);
-}
-
-@media (prefers-color-scheme: dark) {
-  .EmojiPickerReact.epr-auto-theme .epr-category-nav > button.epr-cat-btn {
-    background-position-y: calc(var(--epr-category-navigation-button-size) * 2);
-  }
-  .EmojiPickerReact.epr-auto-theme:not(.epr-search-active)
-    .epr-category-nav
-    > button.epr-cat-btn:hover,
-  .EmojiPickerReact.epr-auto-theme:not(.epr-search-active)
-    .epr-category-nav
-    > button.epr-cat-btn.epr-active {
-    background-position-y: calc(var(--epr-category-navigation-button-size) * 3);
-  }
-}
-
-.EmojiPickerReact button.epr-cat-btn.epr-icn-suggested {
-  background-position-x: calc(var(--epr-category-navigation-button-size) * -8);
-}
-.EmojiPickerReact button.epr-cat-btn.epr-icn-custom {
-  background-position-x: calc(var(--epr-category-navigation-button-size) * -9);
-}
-.EmojiPickerReact button.epr-cat-btn.epr-icn-activities {
-  background-position-x: calc(var(--epr-category-navigation-button-size) * -4);
-}
-.EmojiPickerReact button.epr-cat-btn.epr-icn-animals_nature {
-  background-position-x: calc(var(--epr-category-navigation-button-size) * -1);
-}
-.EmojiPickerReact button.epr-cat-btn.epr-icn-flags {
-  background-position-x: calc(var(--epr-category-navigation-button-size) * -7);
-}
-.EmojiPickerReact button.epr-cat-btn.epr-icn-food_drink {
-  background-position-x: calc(var(--epr-category-navigation-button-size) * -2);
-}
-.EmojiPickerReact button.epr-cat-btn.epr-icn-objects {
-  background-position-x: calc(var(--epr-category-navigation-button-size) * -5);
-}
-.EmojiPickerReact button.epr-cat-btn.epr-icn-smileys_people {
-  background-position-x: 0px;
-}
-.EmojiPickerReact button.epr-cat-btn.epr-icn-symbols {
-  background-position-x: calc(var(--epr-category-navigation-button-size) * -6);
-}
-.EmojiPickerReact button.epr-cat-btn.epr-icn-travel_places {
-  background-position-x: calc(var(--epr-category-navigation-button-size) * -3);
-}

package/src/components/navigation/CategoryNavigation.tsx

@@ -4,7 +4,10 @@ import { useState } from 'react';
 import './CategoryNavigation.css';
 
 import { ClassNames } from '../../DomUtils/classNames';
-import { stylesheet } from '../../Stylesheet/stylesheet';
+import {
+  commonInteractionStyles,
+  stylesheet
+} from '../../Stylesheet/stylesheet';
 import {
   categoryFromCategoryConfig,
   categoryNameFromCategoryConfig
@@ -47,9 +50,14 @@ export function CategoryNavigation() {
         return (
           <Button
             tabIndex={isSearchMode || isActiveCategory ? -1 : 0}
-            className={cx(styles.catBtn, `epr-icn-${category}`, {
-              [ClassNames.active]: isActiveCategory
-            })}
+            className={cx(
+              styles.catBtn,
+              commonInteractionStyles.categoryBtn,
+              `epr-icn-${category}`,
+              {
+                [ClassNames.active]: isActiveCategory
+              }
+            )}
             key={category}
             onClick={() => {
               setActiveCategory(category);
@@ -107,6 +115,88 @@ const styles = stylesheet.create({
       bottom: '-2px',
       border: '2px solid var(--epr-category-icon-active-color)',
       borderRadius: '50%'
+    },
+    // @ts-ignore
+    '&.epr-icn-suggested': {
+      backgroundPositionX:
+        'calc(var(--epr-category-navigation-button-size) * -8)'
+    },
+    '&.epr-icn-custom': {
+      backgroundPositionX:
+        'calc(var(--epr-category-navigation-button-size) * -9)'
+    },
+    '&.epr-icn-activities': {
+      backgroundPositionX:
+        'calc(var(--epr-category-navigation-button-size) * -4)'
+    },
+    '&.epr-icn-animals_nature': {
+      backgroundPositionX:
+        'calc(var(--epr-category-navigation-button-size) * -1)'
+    },
+    '&.epr-icn-flags': {
+      backgroundPositionX:
+        'calc(var(--epr-category-navigation-button-size) * -7)'
+    },
+    '&.epr-icn-food_drink': {
+      backgroundPositionX:
+        'calc(var(--epr-category-navigation-button-size) * -2)'
+    },
+    '&.epr-icn-objects': {
+      backgroundPositionX:
+        'calc(var(--epr-category-navigation-button-size) * -5)'
+    },
+    '&.epr-icn-smileys_people': {
+      backgroundPositionX: '0px'
+    },
+    '&.epr-icn-symbols': {
+      backgroundPositionX:
+        'calc(var(--epr-category-navigation-button-size) * -6)'
+    },
+    '&.epr-icn-travel_places': {
+      backgroundPositionX:
+        'calc(var(--epr-category-navigation-button-size) * -3)'
+    }
+  },
+  '.epr-dark-theme': {
+    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)': {
+        ':hover': {
+          backgroundPositionY:
+            'calc(var(--epr-category-navigation-button-size) * 3)'
+        },
+        // @ts-ignore
+        '&.epr-active': {
+          backgroundPositionY:
+            'calc(var(--epr-category-navigation-button-size) * 3)'
+        }
+      }
+    }
+  },
+  '.epr-dark-theme:not(.epr-search-active)': {
+    catBtn: {
+      ':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/components/header/SkinTonePicker.css

@@ -1,103 +0,0 @@
-.EmojiPickerReact .epr-skin-tones {
-  --epr-skin-tone-size: 15px;
-}
-
-.EmojiPickerReact .epr-skin-tones {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  transition: all 0.3s ease-in-out;
-  padding: 10px 0;
-}
-
-.EmojiPickerReact .epr-skin-tones.epr-vertical {
-  padding: 5px;
-  align-items: flex-end;
-  flex-direction: column;
-  border-radius: 6px;
-  border: 1px solid var(--epr-bg-color);
-}
-
-.EmojiPickerReact .epr-skin-tones.epr-vertical.epr-open {
-  border: 1px solid var(--epr-picker-border-color);
-  backdrop-filter: blur(5px);
-  background: var(--epr-skin-tone-picker-menu-color);
-}
-
-.EmojiPickerReact .epr-skin-tone-select {
-  position: relative;
-  width: var(--epr-skin-tone-size);
-  height: var(--epr-skin-tone-size);
-}
-
-.EmojiPickerReact .epr-skin-tones.epr-open .epr-tone {
-  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
-}
-
-.EmojiPickerReact .epr-skin-tones:not(.epr-open) .epr-tone {
-  z-index: 0;
-  opacity: 0;
-}
-
-.EmojiPickerReact .epr-skin-tones .epr-tone.epr-active {
-  z-index: 1;
-}
-
-.EmojiPickerReact .epr-skin-tones .epr-tone {
-  display: block;
-  cursor: pointer;
-  border-radius: 4px;
-  height: var(--epr-skin-tone-size);
-  width: var(--epr-skin-tone-size);
-  position: absolute;
-  right: 0;
-  transition: transform 0.3s ease-in-out, opacity 0.5s ease-in-out;
-  z-index: 1;
-  box-shadow: 0 0 0 0px var(--epr-active-skin-hover-color);
-}
-
-.EmojiPickerReact .epr-skin-tones .epr-tone:hover {
-  box-shadow: 0 0 0 3px var(--epr-active-skin-hover-color);
-}
-
-.EmojiPickerReact .epr-skin-tones .epr-tone:focus {
-  box-shadow: 0 0 0 3px var(--epr-focus-bg-color);
-}
-
-.EmojiPickerReact
-  .epr-skin-tones.epr-open
-  .epr-skin-tone-select
-  .epr-tone.epr-active:after {
-  content: '';
-  position: absolute;
-  top: -2px;
-  left: -2px;
-  right: -2px;
-  bottom: -2px;
-  border-radius: 5px;
-  border: 1px solid var(--epr-active-skin-tone-indicator-border-color);
-}
-
-.EmojiPickerReact .epr-skin-tones .epr-tone.epr-active {
-  opacity: 1;
-  z-index: 1;
-}
-
-.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-neutral {
-  background-color: #ffd225;
-}
-.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fb {
-  background-color: #ffdfbd;
-}
-.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fc {
-  background-color: #e9c197;
-}
-.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fd {
-  background-color: #c88e62;
-}
-.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fe {
-  background-color: #a86637;
-}
-.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3ff {
-  background-color: #60463a;
-}