emoji-picker-react 4.6.14 → 4.6.15

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.6.14",
+  "version": "4.6.15",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/body/EmojiVariationPicker.tsx

@@ -200,6 +200,12 @@ const styles = stylesheet.create({
     transform: 'scale(0.9)',
     transition: 'transform 0.1s ease-out, opacity 0.2s ease-out'
   },
+  visible: {
+    opacity: '1',
+    visibility: 'visible',
+    pointerEvents: 'all',
+    transform: 'scale(1)'
+  },
   pointingUp: {
     '.': 'pointing-up',
     transformOrigin: 'center 0%',
@@ -211,12 +217,6 @@ const styles = stylesheet.create({
       transform: 'rotate(180deg) translateY(100%) translateX(18px)'
     }
   },
-  visible: {
-    opacity: '1',
-    visibility: 'visible',
-    pointerEvents: 'all',
-    transform: 'scale(1)'
-  },
   pointer: {
     '.': 'epr-emoji-pointer',
     content: '',
@@ -237,7 +237,6 @@ const styles = stylesheet.create({
   },
   '.epr-auto-theme': {
     pointer: {
-      // @ts-ignore
       '@media (prefers-color-scheme: dark)': {
         backgroundPosition: '-25px 0'
       }

package/src/components/emoji/ClickableEmojiButton.tsx

@@ -2,7 +2,11 @@ import { cx } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../../DomUtils/classNames';
-import { commonInteractionStyles, commonStyles, stylesheet } from '../../Stylesheet/stylesheet';
+import {
+  commonInteractionStyles,
+  commonStyles,
+  stylesheet
+} from '../../Stylesheet/stylesheet';
 import { Button } from '../atoms/Button';
 
 type ClickableEmojiButtonProps = Readonly<{

package/src/components/footer/Preview.tsx

@@ -19,7 +19,7 @@ import Flex from '../Layout/Flex';
 import Space from '../Layout/Space';
 import { useEmojiVariationPickerState } from '../context/PickerContext';
 import { ViewOnlyEmoji } from '../emoji/ViewOnlyEmoji';
-import { SkinTonePickerMenu } from '../header/SkinTonePicker';
+import { SkinTonePickerMenu } from '../header/SkinTonePicker/SkinTonePicker';
 
 export function Preview() {
   const previewConfig = usePreviewConfig();
@@ -88,11 +88,9 @@ export function PreviewBody() {
             />
           ) : null}
         </div>
-        {show ? (
-          <div className={cx(styles.label)}>{emojiName(emoji)}</div>
-        ) : (
-          <div className={cx(styles.label)}>{defaultText}</div>
-        )}
+        <div className={cx(styles.label)}>
+          {show ? emojiName(emoji) : defaultText}
+        </div>
       </>
     );
   }

package/src/components/header/Header.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import Relative from '../Layout/Relative';
 import { CategoryNavigation } from '../navigation/CategoryNavigation';
 
-import { SearchContainer } from './Search';
+import { SearchContainer } from './Search/Search';
 
 export function Header() {
   return (

package/src/components/header/Search/BtnClearSearch.tsx

@@ -0,0 +1,91 @@
+import { cx } from 'flairup';
+import * as React from 'react';
+
+import {
+  commonInteractionStyles,
+  stylesheet
+} from '../../../Stylesheet/stylesheet';
+import { useClearSearch } from '../../../hooks/useFilter';
+import { Button } from '../../atoms/Button';
+
+import SVGTimes from './svg/times.svg';
+
+export function BtnClearSearch() {
+  const clearSearch = useClearSearch();
+
+  return (
+    <Button
+      className={cx(
+        styles.btnClearSearch,
+        commonInteractionStyles.visibleOnSearchOnly
+      )}
+      onClick={clearSearch}
+      aria-label="Clear"
+      title="Clear"
+    >
+      <div className={cx(styles.icnClearnSearch)} />
+    </Button>
+  );
+}
+
+const HoverDark = {
+  ':hover': {
+    '> .epr-icn-clear-search': {
+      backgroundPositionY: '-60px'
+    }
+  }
+};
+
+const styles = stylesheet.create({
+  btnClearSearch: {
+    '.': 'epr-btn-clear-search',
+    position: 'absolute',
+    right: 'var(--epr-search-bar-inner-padding)',
+    height: '30px',
+    width: '30px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    padding: '0',
+    borderRadius: '50%',
+    ':hover': {
+      background: 'var(--epr-hover-bg-color)'
+    },
+    ':focus': {
+      background: 'var(--epr-hover-bg-color)'
+    }
+  },
+  icnClearnSearch: {
+    '.': 'epr-icn-clear-search',
+    backgroundColor: 'transparent',
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: '20px',
+    height: '20px',
+    width: '20px',
+    backgroundImage: `url(${SVGTimes})`,
+    ':hover': {
+      backgroundPositionY: '-20px'
+    },
+    ':focus': {
+      backgroundPositionY: '-20px'
+    }
+  },
+  '.epr-dark-theme': {
+    icnClearnSearch: {
+      backgroundPositionY: '-40px'
+    },
+    btnClearSearch: HoverDark
+  },
+  '.epr-auto-theme': {
+    icnClearnSearch: {
+      '@media (prefers-color-scheme: dark)': {
+        backgroundPositionY: '-40px'
+      }
+    },
+    btnClearSearch: {
+      '@media (prefers-color-scheme: dark)': HoverDark
+    }
+  }
+});

package/src/components/header/{CssSearch.tsx → Search/CssSearch.tsx}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
-import { ClassNames, asSelectors } from '../../DomUtils/classNames';
-import { getNormalizedSearchTerm } from '../../hooks/useFilter';
+import { ClassNames, asSelectors } from '../../../DomUtils/classNames';
+import { getNormalizedSearchTerm } from '../../../hooks/useFilter';
 
 const SCOPE = `${asSelectors(ClassNames.emojiPicker)} ${asSelectors(
   ClassNames.emojiList

package/src/components/header/Search/IcnSearch.tsx

@@ -0,0 +1,39 @@
+import { cx } from 'flairup';
+import * as React from 'react';
+
+import { stylesheet } from '../../../Stylesheet/stylesheet';
+
+import SVGMagnifier from './svg/magnifier.svg';
+
+export function IcnSearch() {
+  return <div className={cx(styles.icnSearch)} />;
+}
+
+const styles = stylesheet.create({
+  icnSearch: {
+    '.': 'epr-icn-search',
+    content: '',
+    position: 'absolute',
+    top: '50%',
+    left: 'var(--epr-search-bar-inner-padding)',
+    transform: 'translateY(-50%)',
+    width: '20px',
+    height: '20px',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: '0 0',
+    backgroundSize: '20px',
+    backgroundImage: `url(${SVGMagnifier})`
+  },
+  '.epr-dark-theme': {
+    icnSearch: {
+      backgroundPositionY: '-20px'
+    }
+  },
+  '.epr-auto-theme': {
+    icnSearch: {
+      '@media (prefers-color-scheme: dark)': {
+        backgroundPositionY: '-20px'
+      }
+    }
+  }
+});

package/src/components/header/{Search.tsx → Search/Search.tsx}

@@ -2,26 +2,23 @@ import { cx } from 'flairup';
 import * as React from 'react';
 import { useState } from 'react';
 
-import {
-  commonInteractionStyles,
-  stylesheet
-} from '../../Stylesheet/stylesheet';
+import { stylesheet } from '../../../Stylesheet/stylesheet';
 import {
   useAutoFocusSearchConfig,
   useSearchDisabledConfig,
   useSearchPlaceHolderConfig
-} from '../../config/useConfig';
-import { useCloseAllOpenToggles } from '../../hooks/useCloseAllOpenToggles';
-import { useClearSearch, useFilter } from '../../hooks/useFilter';
-import { useIsSkinToneInSearch } from '../../hooks/useShouldShowSkinTonePicker';
-import Flex from '../Layout/Flex';
-import Relative from '../Layout/Relative';
-import { Button } from '../atoms/Button';
-import { useSearchInputRef } from '../context/ElementRefContext';
+} from '../../../config/useConfig';
+import { useCloseAllOpenToggles } from '../../../hooks/useCloseAllOpenToggles';
+import { useFilter } from '../../../hooks/useFilter';
+import { useIsSkinToneInSearch } from '../../../hooks/useShouldShowSkinTonePicker';
+import Flex from '../../Layout/Flex';
+import Relative from '../../Layout/Relative';
+import { useSearchInputRef } from '../../context/ElementRefContext';
+import { SkinTonePicker } from '../SkinTonePicker/SkinTonePicker';
 
+import { BtnClearSearch } from './BtnClearSearch';
 import { CssSearch } from './CssSearch';
-import { SkinTonePicker } from './SkinTonePicker';
-import SVGMagnifier from './svg/magnifier.svg';
+import { IcnSearch } from './IcnSearch';
 import SVGTimes from './svg/times.svg';
 
 export function SearchContainer() {
@@ -46,7 +43,6 @@ export function Search() {
   const [inc, setInc] = useState(0);
   const closeAllOpenToggles = useCloseAllOpenToggles();
   const SearchInputRef = useSearchInputRef();
-  const clearSearch = useClearSearch();
   const placeholder = useSearchPlaceHolderConfig();
   const autoFocus = useAutoFocusSearchConfig();
   const { statusSearchResults, searchTerm, onChange } = useFilter();
@@ -85,18 +81,8 @@ export function Search() {
           {statusSearchResults}
         </div>
       ) : null}
-      <div className={cx(styles.icnSearch)} />
-      <Button
-        className={cx(
-          styles.btnClearSearch,
-          commonInteractionStyles.visibleOnSearchOnly
-        )}
-        onClick={clearSearch}
-        aria-label="Clear"
-        title="Clear"
-      >
-        <div className={cx(styles.icnClearnSearch)} />
-      </Button>
+      <IcnSearch />
+      <BtnClearSearch />
     </Relative>
   );
 }
@@ -139,20 +125,7 @@ const styles = stylesheet.create({
       color: 'var(--epr-search-input-placeholder-color)'
     }
   },
-  icnSearch: {
-    '.': 'epr-icn-search',
-    content: '',
-    position: 'absolute',
-    top: '50%',
-    left: 'var(--epr-search-bar-inner-padding)',
-    transform: 'translateY(-50%)',
-    width: '20px',
-    height: '20px',
-    backgroundRepeat: 'no-repeat',
-    backgroundPosition: '0 0',
-    backgroundSize: '20px',
-    backgroundImage: `url(${SVGMagnifier})`
-  },
+
   btnClearSearch: {
     '.': 'epr-btn-clear-search',
     position: 'absolute',
@@ -189,9 +162,6 @@ const styles = stylesheet.create({
     }
   },
   '.epr-dark-theme': {
-    icnSearch: {
-      backgroundPositionY: '-20px'
-    },
     icnClearnSearch: {
       backgroundPositionY: '-40px'
     },
@@ -202,11 +172,6 @@ const styles = stylesheet.create({
     }
   },
   '.epr-auto-theme': {
-    icnSearch: {
-      '@media (prefers-color-scheme: dark)': {
-        backgroundPositionY: '-20px'
-      }
-    },
     icnClearnSearch: {
       '@media (prefers-color-scheme: dark)': {
         backgroundPositionY: '-40px'

package/src/components/header/SkinTonePicker/BtnSkinToneVariation.tsx

@@ -0,0 +1,80 @@
+import { cx } from 'flairup';
+import * as React from 'react';
+
+import { stylesheet } from '../../../Stylesheet/stylesheet';
+import { skinTonesNamed } from '../../../data/skinToneVariations';
+import { SkinTones } from '../../../types/exposedTypes';
+import { Button } from '../../atoms/Button';
+
+type Props = {
+  isOpen: boolean;
+  onClick: () => void;
+  isActive: boolean;
+  skinToneVariation: SkinTones;
+  style?: React.CSSProperties;
+};
+
+// eslint-disable-next-line complexity
+export function BtnSkinToneVariation({
+  isOpen,
+  onClick,
+  isActive,
+  skinToneVariation,
+  style
+}: Props) {
+  return (
+    <Button
+      style={style}
+      onClick={onClick}
+      className={cx(
+        `epr-tone-${skinToneVariation}`,
+        styles.tone,
+        !isOpen && styles.closedTone,
+        isActive && styles.active
+      )}
+      tabIndex={isOpen ? 0 : -1}
+      aria-pressed={isActive}
+      aria-label={`Skin tone ${skinTonesNamed[skinToneVariation as SkinTones]}`}
+    ></Button>
+  );
+}
+
+const styles = stylesheet.create({
+  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/header/{SkinTonePicker.tsx → SkinTonePicker/SkinTonePicker.tsx}

@@ -2,23 +2,21 @@
 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
-} from '../../data/skinToneVariations';
-import { useCloseAllOpenToggles } from '../../hooks/useCloseAllOpenToggles';
-import { useFocusSearchInput } from '../../hooks/useFocus';
-import { SkinTones } from '../../types/exposedTypes';
-import Absolute from '../Layout/Absolute';
-import Relative from '../Layout/Relative';
-import { Button } from '../atoms/Button';
-import { useSkinTonePickerRef } from '../context/ElementRefContext';
+import { ClassNames } from '../../../DomUtils/classNames';
+import { stylesheet } from '../../../Stylesheet/stylesheet';
+import { useSkinTonesDisabledConfig } from '../../../config/useConfig';
+import skinToneVariations from '../../../data/skinToneVariations';
+import { useCloseAllOpenToggles } from '../../../hooks/useCloseAllOpenToggles';
+import { useFocusSearchInput } from '../../../hooks/useFocus';
+import Absolute from '../../Layout/Absolute';
+import Relative from '../../Layout/Relative';
+import { useSkinTonePickerRef } from '../../context/ElementRefContext';
 import {
   useActiveSkinToneState,
   useSkinToneFanOpenState
-} from '../context/PickerContext';
+} from '../../context/PickerContext';
+
+import { BtnSkinToneVariation } from './BtnSkinToneVariation';
 
 const ITEM_SIZE = 28;
 
@@ -61,7 +59,8 @@ export function SkinTonePicker({
       className={cx(
         styles.skinTones,
         vertical && styles.vertical,
-        isOpen && styles.open
+        isOpen && styles.open,
+        vertical && isOpen && styles.verticalShadow
       )}
       style={
         vertical
@@ -72,8 +71,12 @@ export function SkinTonePicker({
       <div className={cx(styles.select)} ref={SkinTonePickerRef}>
         {skinToneVariations.map((skinToneVariation, i) => {
           const active = skinToneVariation === activeSkinTone;
+
           return (
-            <Button
+            <BtnSkinToneVariation
+              key={skinToneVariation}
+              skinToneVariation={skinToneVariation}
+              isOpen={isOpen}
               style={{
                 transform: cx(
                   vertical
@@ -82,6 +85,7 @@ export function SkinTonePicker({
                   isOpen && active && 'scale(1.3)'
                 )
               }}
+              isActive={active}
               onClick={() => {
                 if (isOpen) {
                   setActiveSkinTone(skinToneVariation);
@@ -91,19 +95,7 @@ export function SkinTonePicker({
                 }
                 closeAllOpenToggles();
               }}
-              key={skinToneVariation}
-              className={cx(
-                `epr-tone-${skinToneVariation}`,
-                styles.tone,
-                !isOpen && styles.closedTone,
-                active && styles.active
-              )}
-              tabIndex={isOpen ? 0 : -1}
-              aria-pressed={active}
-              aria-label={`Skin tone ${
-                skinTonesNamed[skinToneVariation as SkinTones]
-              }`}
-            ></Button>
+            />
           );
         })}
       </div>
@@ -129,12 +121,15 @@ const styles = stylesheet.create({
     padding: '10px 0'
   },
   vertical: {
-    padding: '5px',
+    padding: '9px',
     alignItems: 'flex-end',
     flexDirection: 'column',
     borderRadius: '6px',
     border: '1px solid var(--epr-bg-color)'
   },
+  verticalShadow: {
+    boxShadow: '0px 0 7px var(--epr-picker-border-color)'
+  },
   open: {
     // @ts-ignore
     backdropFilter: 'blur(5px)',
@@ -169,42 +164,5 @@ const styles = stylesheet.create({
       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'
-    },
   }
 });