emoji-picker-react 4.6.4 → 4.6.5

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.6.4",
+  "version": "4.6.5",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -99,6 +99,6 @@
     "typescript": "^4.7.4"
   },
   "dependencies": {
-    "flairup": "0.0.15"
+    "flairup": "0.0.16"
   }
 }

package/src/EmojiPickerReact.css

@@ -1,165 +1,3 @@
-.EmojiPickerReact {
-  --epr-highlight-color: #007aeb;
-  --epr-hover-bg-color: #f1f8ff;
-  --epr-focus-bg-color: #e0f0ff;
-  --epr-text-color: #858585;
-  --epr-search-input-bg-color: #f6f6f6;
-  --epr-picker-border-color: #e7e7e7;
-  --epr-bg-color: #fff;
-  --epr-category-icon-active-color: #6aa8de;
-  --epr-skin-tone-picker-menu-color: #ffffff95;
-
-  --epr-horizontal-padding: 10px;
-
-  --epr-picker-border-radius: 8px;
-
-  /* Header */
-  --epr-search-border-color: var(--epr-highlight-color);
-  --epr-header-padding: 15px var(--epr-horizontal-padding);
-
-  /* Skin Tone Picker */
-  --epr-active-skin-tone-indicator-border-color: var(--epr-highlight-color);
-  --epr-active-skin-hover-color: var(--epr-hover-bg-color);
-
-  /* Search */
-  --epr-search-input-bg-color-active: var(--epr-search-input-bg-color);
-  --epr-search-input-padding: 0 30px;
-  --epr-search-input-border-radius: 8px;
-  --epr-search-input-height: 40px;
-  --epr-search-input-text-color: var(--epr-text-color);
-  --epr-search-input-placeholder-color: var(--epr-text-color);
-  --epr-search-bar-inner-padding: var(--epr-horizontal-padding);
-
-  /*  Category Navigation */
-  --epr-category-navigation-button-size: 30px;
-
-  /* Variation Picker */
-  --epr-emoji-variation-picker-height: 45px;
-  --epr-emoji-variation-picker-bg-color: var(--epr-bg-color);
-
-  /*  Preview */
-  --epr-preview-height: 70px;
-  --epr-preview-text-size: 14px;
-  --epr-preview-text-padding: 0 var(--epr-horizontal-padding);
-  --epr-preview-border-color: var(--epr-picker-border-color);
-  --epr-preview-text-color: var(--epr-text-color);
-
-  /* Category */
-  --epr-category-padding: 0 var(--epr-horizontal-padding);
-
-  /*  Category Label */
-  --epr-category-label-bg-color: #ffffffe6;
-  --epr-category-label-text-color: var(--epr-text-color);
-  --epr-category-label-padding: 0 var(--epr-horizontal-padding);
-  --epr-category-label-height: 40px;
-
-  /*  Emoji */
-  --epr-emoji-size: 30px;
-  --epr-emoji-padding: 5px;
-  --epr-emoji-fullsize: calc(
-    var(--epr-emoji-size) + var(--epr-emoji-padding) * 2
-  );
-  --epr-emoji-hover-color: var(--epr-hover-bg-color);
-  --epr-emoji-variation-indicator-color: var(--epr-picker-border-color);
-  --epr-emoji-variation-indicator-color-hover: var(--epr-text-color);
-
-  /* Z-Index */
-  --epr-header-overlay-z-index: 3;
-  --epr-emoji-variations-indictator-z-index: 1;
-  --epr-category-label-z-index: 2;
-  --epr-skin-variation-picker-z-index: 5;
-  --epr-preview-z-index: 6;
-
-  /* Dark Theme Variables */
-  --epr-dark: #000;
-  --epr-dark-emoji-variation-picker-bg-color: var(--epr-dark);
-  --epr-dark-highlight-color: #c0c0c0;
-  --epr-dark-text-color: var(--epr-highlight-color);
-  --epr-dark-hover-bg-color: #363636f6;
-  --epr-dark-focus-bg-color: #474747;
-  --epr-dark-search-input-bg-color: #333333;
-  --epr-dark-category-label-bg-color: #222222e6;
-  --epr-dark-picker-border-color: #151617;
-  --epr-dark-bg-color: #222222;
-  --epr-dark-search-input-bg-color-active: var(--epr-dark);
-  --epr-dark-emoji-variation-indicator-color: #444;
-  --epr-dark-category-icon-active-color: #3271b7;
-  --epr-dark-skin-tone-picker-menu-color: #22222295;
-}
-
-@media (prefers-color-scheme: dark) {
-  /* Keep in sync with the section below */
-  .EmojiPickerReact.epr-auto-theme {
-    --epr-emoji-variation-picker-bg-color: var(
-      --epr-dark-emoji-variation-picker-bg-color
-    );
-    --epr-highlight-color: var(--epr-dark-highlight-color);
-    --epr-text-color: var(--epr-dark-text-color);
-    --epr-hover-bg-color: var(--epr-dark-hover-bg-color);
-    --epr-focus-bg-color: var(--epr-dark-focus-bg-color);
-    --epr-search-input-bg-color: var(--epr-dark-search-input-bg-color);
-    --epr-category-label-bg-color: var(--epr-dark-category-label-bg-color);
-    --epr-picker-border-color: var(--epr-dark-picker-border-color);
-    --epr-bg-color: var(--epr-dark-bg-color);
-    --epr-search-input-bg-color-active: var(
-      --epr-dark-search-input-bg-color-active
-    );
-    --epr-emoji-variation-indicator-color: var(
-      --epr-dark-emoji-variation-indicator-color
-    );
-    --epr-category-icon-active-color: var(
-      --epr-dark-category-icon-active-color
-    );
-    --epr-skin-tone-picker-menu-color: var(
-      --epr-dark-skin-tone-picker-menu-color
-    );
-  }
-}
-
-.EmojiPickerReact.epr-dark-theme {
-  /* Keep in sync with the section above */
-  --epr-emoji-variation-picker-bg-color: var(
-    --epr-dark-emoji-variation-picker-bg-color
-  );
-  --epr-highlight-color: var(--epr-dark-highlight-color);
-  --epr-text-color: var(--epr-dark-text-color);
-  --epr-hover-bg-color: var(--epr-dark-hover-bg-color);
-  --epr-focus-bg-color: var(--epr-dark-focus-bg-color);
-  --epr-search-input-bg-color: var(--epr-dark-search-input-bg-color);
-  --epr-category-label-bg-color: var(--epr-dark-category-label-bg-color);
-  --epr-picker-border-color: var(--epr-dark-picker-border-color);
-  --epr-bg-color: var(--epr-dark-bg-color);
-  --epr-search-input-bg-color-active: var(
-    --epr-dark-search-input-bg-color-active
-  );
-  --epr-emoji-variation-indicator-color: var(
-    --epr-dark-emoji-variation-indicator-color
-  );
-  --epr-category-icon-active-color: var(--epr-dark-category-icon-active-color);
-  --epr-skin-tone-picker-menu-color: var(
-    --epr-dark-skin-tone-picker-menu-color
-  );
-}
-
-.EmojiPickerReact {
-  background-color: var(--epr-bg-color);
-  overflow: hidden;
-}
-
-.EmojiPickerReact .epr-hidden {
-  display: none !important;
-  opacity: 0 !important;
-  pointer-events: none !important;
-  visibility: hidden !important;
-}
-
-.EmojiPickerReact.epr-search-active .epr-hidden-on-search {
-  display: none !important;
-  opacity: 0 !important;
-  pointer-events: none !important;
-  visibility: hidden !important;
-}
-
 .EmojiPickerReact:not(.epr-search-active) .epr-visible-on-search-only {
   display: none !important;
   opacity: 0 !important;

package/src/Stylesheet/stylesheet.ts

@@ -1,3 +1,21 @@
 import { createSheet } from 'flairup';
 
+import { ClassNames } from '../DomUtils/classNames';
+
 export const stylesheet = createSheet('epr');
+
+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'
+  }
+});

package/src/components/Layout/Flex.tsx

@@ -1,7 +1,7 @@
 import { cx } from 'flairup';
 import * as React from 'react';
 
-import './Flex.css';
+import { stylesheet } from '../../Stylesheet/stylesheet';
 
 export enum FlexDirection {
   ROW = 'FlexRow',
@@ -22,8 +22,23 @@ export default function Flex({
   direction = FlexDirection.ROW
 }: Props) {
   return (
-    <div style={{ ...style }} className={cx('Flex', className, direction)}>
+    <div
+      style={{ ...style }}
+      className={cx(styles.flex, className, styles[direction])}
+    >
       {children}
     </div>
   );
 }
+
+const styles = stylesheet.create({
+  flex: {
+    display: 'flex'
+  },
+  [FlexDirection.ROW]: {
+    flexDirection: 'row'
+  },
+  [FlexDirection.COLUMN]: {
+    flexDirection: 'column'
+  }
+});

package/src/components/body/EmojiCategory.tsx

@@ -2,14 +2,13 @@ import { cx } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../../DomUtils/classNames';
+import { commonStyles, stylesheet } from '../../Stylesheet/stylesheet';
 import {
   CategoryConfig,
   categoryFromCategoryConfig,
   categoryNameFromCategoryConfig
 } from '../../config/categoryConfig';
 
-import './EmojiCategory.css';
-
 type Props = Readonly<{
   categoryConfig: CategoryConfig;
   children?: React.ReactNode;
@@ -28,15 +27,53 @@ export function EmojiCategory({
 
   return (
     <li
-      className={cx(ClassNames.category, {
-        [ClassNames.hidden]: hidden,
-        [ClassNames.hiddenOnSearch]: hiddenOnSearch
-      })}
+      className={cx(
+        styles.category,
+        hidden && commonStyles.hidden,
+        hiddenOnSearch && commonStyles.hiddenOnSearch
+      )}
       data-name={category}
       aria-label={categoryName}
     >
-      <h2 className={ClassNames.label}>{categoryName}</h2>
-      <div className={ClassNames.categoryContent}>{children}</div>
+      <h2 className={cx(styles.label)}>{categoryName}</h2>
+      <div className={cx(styles.categoryContent)}>{children}</div>
     </li>
   );
 }
+
+const styles = stylesheet.create({
+  category: {
+    '.': ClassNames.category,
+    ':not(:has(.epr-visible))': {
+      display: 'none'
+    }
+  },
+  categoryContent: {
+    '.': ClassNames.categoryContent,
+    display: 'grid',
+    gridGap: '0',
+    gridTemplateColumns: 'repeat(auto-fill, var(--epr-emoji-fullsize))',
+    justifyContent: 'space-between',
+    margin: 'var(--epr-category-padding)',
+    position: 'relative'
+  },
+  label: {
+    '.': ClassNames.label,
+    alignItems: 'center',
+    // @ts-expect-error - backdropFilter is a valid CSS property
+    backdropFilter: 'blur(3px)',
+    backgroundColor: 'var(--epr-category-label-bg-color)',
+    color: 'var(--epr-category-label-text-color)',
+    display: 'flex',
+    fontSize: '16px',
+    fontWeight: 'bold',
+    height: 'var(--epr-category-label-height)',
+    margin: '0',
+    padding: 'var(--epr-category-label-padding)',
+    position: 'sticky',
+    textTransform: 'capitalize',
+    top: '0',
+    width: '100%',
+    zIndex: 'var(--epr-category-label-z-index)'
+  }
+});

package/src/components/emoji/ClickableEmojiButton.tsx

@@ -2,6 +2,7 @@ import { cx } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../../DomUtils/classNames';
+import { commonStyles } from '../../Stylesheet/stylesheet';
 import { Button } from '../atoms/Button';
 
 import './Emoji.css';
@@ -27,12 +28,15 @@ export function ClickableEmojiButton({
 }: ClickableEmojiButtonProps) {
   return (
     <Button
-      className={cx(ClassNames.emoji, {
-        [ClassNames.hidden]: hidden,
-        [ClassNames.hiddenOnSearch]: hiddenOnSearch,
-        [ClassNames.visible]: !hidden && !hiddenOnSearch,
-        [ClassNames.emojiHasVariations]: hasVariations && showVariations
-      })}
+      className={cx(
+        ClassNames.emoji,
+        hidden && commonStyles.hidden,
+        hiddenOnSearch && commonStyles.hiddenOnSearch,
+        {
+          [ClassNames.visible]: !hidden && !hiddenOnSearch,
+          [ClassNames.emojiHasVariations]: hasVariations && showVariations
+        }
+      )}
       data-unified={unified}
       aria-label={emojiNames[0]}
       data-full-name={emojiNames}

package/src/components/footer/Preview.tsx

@@ -1,6 +1,8 @@
+import { cx } from 'flairup';
 import * as React from 'react';
 import { useState } from 'react';
 
+import { stylesheet } from '../../Stylesheet/stylesheet';
 import {
   useEmojiStyleConfig,
   useGetEmojiUrlConfig,
@@ -16,7 +18,6 @@ import { useIsSkinToneInPreview } from '../../hooks/useShouldShowSkinTonePicker'
 import Flex from '../Layout/Flex';
 import Space from '../Layout/Space';
 import { useEmojiVariationPickerState } from '../context/PickerContext';
-import './Preview.css';
 import { ViewOnlyEmoji } from '../emoji/ViewOnlyEmoji';
 import { SkinTonePickerMenu } from '../header/SkinTonePicker';
 
@@ -29,7 +30,7 @@ export function Preview() {
   }
 
   return (
-    <Flex className="epr-preview">
+    <Flex className={cx(styles.preview)}>
       <PreviewBody />
       <Space />
       {isSkinToneInPreview ? <SkinTonePickerMenu /> : null}
@@ -86,9 +87,9 @@ export function PreviewBody() {
           ) : null}
         </div>
         {show ? (
-          <div className="epr-preview-emoji-label">{emojiName(emoji)}</div>
+          <div className={cx(styles.label)}>{emojiName(emoji)}</div>
         ) : (
-          <div className="epr-preview-emoji-label">{defaultText}</div>
+          <div className={cx(styles.label)}>{defaultText}</div>
         )}
       </>
     );
@@ -99,3 +100,20 @@ export type PreviewEmoji = null | {
   unified: string;
   originalUnified: string;
 };
+
+const styles = stylesheet.create({
+  preview: {
+    alignItems: 'center',
+    borderTop: '1px solid var(--epr-preview-border-color)',
+    height: 'var(--epr-preview-height)',
+    padding: '0 var(--epr-horizontal-padding)',
+    position: 'relative',
+    zIndex: 'var(--epr-preview-z-index)'
+  },
+  label: {
+    color: 'var(--epr-preview-text-color)',
+    fontSize: 'var(--epr-preview-text-size)',
+    padding: 'var(--epr-preview-text-padding)',
+    textTransform: 'capitalize'
+  }
+});

package/src/components/main/PickerMain.tsx

@@ -47,10 +47,11 @@ function PickerRootElement({ children }: RootProps) {
     <aside
       className={cx(
         styles.main,
+        styles.baseVariables,
+        theme === Theme.DARK && styles.darkTheme,
+        theme === Theme.AUTO && styles.autoThemeDark,
         {
-          [ClassNames.searchActive]: searchModeActive,
-          [ClassNames.darkTheme]: theme === Theme.DARK,
-          [ClassNames.autoTheme]: theme === Theme.AUTO
+          [ClassNames.searchActive]: searchModeActive
         },
         className
       )}
@@ -62,6 +63,27 @@ function PickerRootElement({ children }: RootProps) {
   );
 }
 
+const DarkTheme = {
+  '--epr-emoji-variation-picker-bg-color':
+    'var(--epr-dark-emoji-variation-picker-bg-color)',
+  '--epr-highlight-color': 'var(--epr-dark-highlight-color)',
+  '--epr-text-color': 'var(--epr-dark-text-color)',
+  '--epr-hover-bg-color': 'var(--epr-dark-hover-bg-color)',
+  '--epr-focus-bg-color': 'var(--epr-dark-focus-bg-color)',
+  '--epr-search-input-bg-color': 'var(--epr-dark-search-input-bg-color)',
+  '--epr-category-label-bg-color': 'var(--epr-dark-category-label-bg-color)',
+  '--epr-picker-border-color': 'var(--epr-dark-picker-border-color)',
+  '--epr-bg-color': 'var(--epr-dark-bg-color)',
+  '--epr-search-input-bg-color-active':
+    'var(--epr-dark-search-input-bg-color-active)',
+  '--epr-emoji-variation-indicator-color':
+    'var(--epr-dark-emoji-variation-indicator-color)',
+  '--epr-category-icon-active-color':
+    'var(--epr-dark-category-icon-active-color)',
+  '--epr-skin-tone-picker-menu-color':
+    'var(--epr-dark-skin-tone-picker-menu-color)'
+};
+
 const styles = stylesheet.create({
   main: {
     '.': ['epr-main', ClassNames.emojiPicker],
@@ -71,6 +93,108 @@ const styles = stylesheet.create({
     borderWidth: '1px',
     borderStyle: 'solid',
     borderRadius: 'var(--epr-picker-border-radius)',
-    borderColor: 'var(--epr-picker-border-color)'
+    borderColor: 'var(--epr-picker-border-color)',
+    backgroundColor: 'var(--epr-bg-color)',
+    overflow: 'hidden'
+  },
+  baseVariables: {
+    '--': {
+      '--epr-highlight-color': '#007aeb',
+      '--epr-hover-bg-color': '#f1f8ff',
+      '--epr-focus-bg-color': '#e0f0ff',
+      '--epr-text-color': '#858585',
+      '--epr-search-input-bg-color': '#f6f6f6',
+      '--epr-picker-border-color': '#e7e7e7',
+      '--epr-bg-color': '#fff',
+      '--epr-category-icon-active-color': '#6aa8de',
+      '--epr-skin-tone-picker-menu-color': '#ffffff95',
+
+      '--epr-horizontal-padding': '10px',
+
+      '--epr-picker-border-radius': '8px',
+
+      /* Header */
+      '--epr-search-border-color': 'var(--epr-highlight-color)',
+      '--epr-header-padding': '15px var(--epr-horizontal-padding)',
+
+      /* Skin Tone Picker */
+      '--epr-active-skin-tone-indicator-border-color':
+        'var(--epr-highlight-color)',
+      '--epr-active-skin-hover-color': 'var(--epr-hover-bg-color)',
+
+      /* Search */
+      '--epr-search-input-bg-color-active': 'var(--epr-search-input-bg-color)',
+      '--epr-search-input-padding': '0 30px',
+      '--epr-search-input-border-radius': '8px',
+      '--epr-search-input-height': '40px',
+      '--epr-search-input-text-color': 'var(--epr-text-color)',
+      '--epr-search-input-placeholder-color': 'var(--epr-text-color)',
+      '--epr-search-bar-inner-padding': 'var(--epr-horizontal-padding)',
+
+      /*  Category Navigation */
+      '--epr-category-navigation-button-size': '30px',
+
+      /* Variation Picker */
+      '--epr-emoji-variation-picker-height': '45px',
+      '--epr-emoji-variation-picker-bg-color': 'var(--epr-bg-color)',
+
+      /*  Preview */
+      '--epr-preview-height': '70px',
+      '--epr-preview-text-size': '14px',
+      '--epr-preview-text-padding': '0 var(--epr-horizontal-padding)',
+      '--epr-preview-border-color': 'var(--epr-picker-border-color)',
+      '--epr-preview-text-color': 'var(--epr-text-color)',
+
+      /* Category */
+      '--epr-category-padding': '0 var(--epr-horizontal-padding)',
+
+      /*  Category Label */
+      '--epr-category-label-bg-color': '#ffffffe6',
+      '--epr-category-label-text-color': 'var(--epr-text-color)',
+      '--epr-category-label-padding': '0 var(--epr-horizontal-padding)',
+      '--epr-category-label-height': '40px',
+
+      /*  Emoji */
+      '--epr-emoji-size': '30px',
+      '--epr-emoji-padding': '5px',
+      '--epr-emoji-fullsize':
+        'calc(var(--epr-emoji-size) + var(--epr-emoji-padding) * 2)',
+      '--epr-emoji-hover-color': 'var(--epr-hover-bg-color)',
+      '--epr-emoji-variation-indicator-color': 'var(--epr-picker-border-color)',
+      '--epr-emoji-variation-indicator-color-hover': 'var(--epr-text-color)',
+
+      /* Z-Index */
+      '--epr-header-overlay-z-index': '3',
+      '--epr-emoji-variations-indictator-z-index': '1',
+      '--epr-category-label-z-index': '2',
+      '--epr-skin-variation-picker-z-index': '5',
+      '--epr-preview-z-index': '6',
+
+      /* Dark Theme Variables */
+      '--epr-dark': '#000',
+      '--epr-dark-emoji-variation-picker-bg-color': 'var(--epr-dark)',
+      '--epr-dark-highlight-color': '#c0c0c0',
+      '--epr-dark-text-color': 'var(--epr-highlight-color)',
+      '--epr-dark-hover-bg-color': '#363636f6',
+      '--epr-dark-focus-bg-color': '#474747',
+      '--epr-dark-search-input-bg-color': '#333333',
+      '--epr-dark-category-label-bg-color': '#222222e6',
+      '--epr-dark-picker-border-color': '#151617',
+      '--epr-dark-bg-color': '#222222',
+      '--epr-dark-search-input-bg-color-active': 'var(--epr-dark)',
+      '--epr-dark-emoji-variation-indicator-color': '#444',
+      '--epr-dark-category-icon-active-color': '#3271b7',
+      '--epr-dark-skin-tone-picker-menu-color': '#22222295'
+    }
+  },
+  autoThemeDark: {
+    '.': ClassNames.autoTheme,
+    '@media (prefers-color-scheme: dark)': {
+      '--': DarkTheme
+    }
+  },
+  darkTheme: {
+    '.': ClassNames.darkTheme,
+    '--': DarkTheme
   }
 });

package/src/components/Layout/Flex.css

@@ -1,11 +0,0 @@
-.EmojiPickerReact .Flex {
-  display: flex;
-}
-
-.EmojiPickerReact .Flex.FlexRow {
-  flex-direction: row;
-}
-
-.EmojiPickerReact .Flex.FlexColumn {
-  flex-direction: column;
-}

package/src/components/body/EmojiCategory.css

@@ -1,30 +0,0 @@
-.EmojiPickerReact li.epr-emoji-category > .epr-emoji-category-content {
-  position: relative;
-  margin: var(--epr-category-padding);
-  display: grid;
-  grid-template-columns: repeat(auto-fill, var(--epr-emoji-fullsize));
-  grid-gap: 0;
-  justify-content: space-between;
-}
-
-.EmojiPickerReact li.epr-emoji-category:not(:has(.epr-visible)) {
-  display: none;
-}
-
-.EmojiPickerReact li.epr-emoji-category > .epr-emoji-category-label {
-  position: sticky;
-  top: 0;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  font-weight: bold;
-  font-size: 16px;
-  margin: 0;
-  text-transform: capitalize;
-  backdrop-filter: blur(3px);
-  padding: var(--epr-category-label-padding);
-  background-color: var(--epr-category-label-bg-color);
-  color: var(--epr-category-label-text-color);
-  z-index: var(--epr-category-label-z-index);
-  height: var(--epr-category-label-height);
-}

package/src/components/footer/Preview.css

@@ -1,16 +0,0 @@
-.EmojiPickerReact .epr-preview {
-  padding: 0 var(--epr-horizontal-padding);
-  z-index: 1;
-  align-items: center;
-  border-top: 1px solid var(--epr-preview-border-color);
-  height: var(--epr-preview-height);
-  position: relative;
-  z-index: var(--epr-preview-z-index);
-}
-
-.EmojiPickerReact .epr-preview .epr-preview-emoji-label {
-  text-transform: capitalize;
-  color: var(--epr-preview-text-color);
-  font-size: var(--epr-preview-text-size);
-  padding: var(--epr-preview-text-padding);
-}