emoji-picker-react 4.6.14 → 4.7.0

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'
-    },
   }
 });

package/src/components/main/PickerMain.tsx

@@ -13,7 +13,10 @@ import { useKeyboardNavigation } from '../../hooks/useKeyboardNavigation';
 import { useOnFocus } from '../../hooks/useOnFocus';
 import { Theme } from '../../types/exposedTypes';
 import { usePickerMainRef } from '../context/ElementRefContext';
-import { PickerContextProvider } from '../context/PickerContext';
+import {
+  PickerContextProvider,
+  useReactionsModeState
+} from '../context/PickerContext';
 
 type Props = Readonly<{
   children: React.ReactNode;
@@ -35,6 +38,7 @@ type RootProps = Readonly<{
 }>;
 
 function PickerRootElement({ children }: RootProps) {
+  const [reactionsMode] = useReactionsModeState();
   const theme = useThemeConfig();
   const searchModeActive = useIsSearchMode();
   const PickerMainRef = usePickerMainRef();
@@ -44,6 +48,8 @@ function PickerRootElement({ children }: RootProps) {
   useKeyboardNavigation();
   useOnFocus();
 
+  const { width, height, ...styleProps } = style || {};
+
   return (
     <aside
       className={cx(
@@ -54,10 +60,14 @@ function PickerRootElement({ children }: RootProps) {
         {
           [ClassNames.searchActive]: searchModeActive
         },
+        reactionsMode && styles.reactionsMenu,
         className
       )}
       ref={PickerMainRef}
-      style={style}
+      style={{
+        ...styleProps,
+        ...(!reactionsMode && { height, width })
+      }}
     >
       {children}
     </aside>
@@ -75,6 +85,7 @@ const DarkTheme = {
   '--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-reactions-bg-color': 'var(--epr-dark-reactions-bg-color)',
   '--epr-search-input-bg-color-active':
     'var(--epr-dark-search-input-bg-color-active)',
   '--epr-emoji-variation-indicator-color':
@@ -97,6 +108,7 @@ const styles = stylesheet.create({
     borderColor: 'var(--epr-picker-border-color)',
     backgroundColor: 'var(--epr-bg-color)',
     overflow: 'hidden',
+    transition: 'all 0.3s ease-in-out, background-color 0.1s ease-in-out',
     // @ts-expect-error - need to work on this
     '*': {
       boxSizing: 'border-box',
@@ -112,6 +124,7 @@ const styles = stylesheet.create({
       '--epr-search-input-bg-color': '#f6f6f6',
       '--epr-picker-border-color': '#e7e7e7',
       '--epr-bg-color': '#fff',
+      '--epr-reactions-bg-color': '#ffffff90',
       '--epr-category-icon-active-color': '#6aa8de',
       '--epr-skin-tone-picker-menu-color': '#ffffff95',
 
@@ -187,6 +200,7 @@ const styles = stylesheet.create({
       '--epr-dark-category-label-bg-color': '#222222e6',
       '--epr-dark-picker-border-color': '#151617',
       '--epr-dark-bg-color': '#222222',
+      '--epr-dark-reactions-bg-color': '#22222290',
       '--epr-dark-search-input-bg-color-active': 'var(--epr-dark)',
       '--epr-dark-emoji-variation-indicator-color': '#444',
       '--epr-dark-category-icon-active-color': '#3271b7',
@@ -202,5 +216,16 @@ const styles = stylesheet.create({
   darkTheme: {
     '.': ClassNames.darkTheme,
     '--': DarkTheme
+  },
+  reactionsMenu: {
+    '.': 'epr-reactions',
+    height: '50px',
+    display: 'inline-flex',
+    backgroundColor: 'var(--epr-reactions-bg-color)',
+    // @ts-expect-error - need to work on this
+    backdropFilter: 'blur(8px)',
+    '--': {
+      '--epr-picker-border-radius': '50px'
+    }
   }
 });

package/src/components/navigation/CategoryButton.tsx

@@ -0,0 +1,141 @@
+import { cx } from 'flairup';
+import * as React from 'react';
+
+import { ClassNames } from '../../DomUtils/classNames';
+import {
+  commonInteractionStyles,
+  stylesheet
+} from '../../Stylesheet/stylesheet';
+import {
+  CategoryConfig,
+  categoryNameFromCategoryConfig
+} from '../../config/categoryConfig';
+import { Button } from '../atoms/Button';
+
+import SVGNavigation from './svg/CategoryNav.svg';
+
+type Props = {
+  isActiveCategory: boolean;
+  category: string;
+  allowNavigation: boolean;
+  onClick: () => void;
+  categoryConfig: CategoryConfig;
+};
+
+export function CategoryButton({
+  isActiveCategory,
+  category,
+  allowNavigation,
+  categoryConfig,
+  onClick
+}: Props) {
+  return (
+    <Button
+      tabIndex={allowNavigation ? 0 : -1}
+      className={cx(
+        styles.catBtn,
+        commonInteractionStyles.categoryBtn,
+        `epr-icn-${category}`,
+        {
+          [ClassNames.active]: isActiveCategory
+        }
+      )}
+      onClick={onClick}
+      aria-label={categoryNameFromCategoryConfig(categoryConfig)}
+      aria-selected={isActiveCategory}
+      role="tab"
+      aria-controls="epr-category-nav-id"
+    />
+  );
+}
+
+const DarkActivePositionY = {
+  backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 3)'
+};
+const DarkPositionY = {
+  backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 2)'
+};
+
+const DarkInactivePosition = {
+  ':not(.epr-search-active)': {
+    catBtn: {
+      ':hover': DarkActivePositionY,
+      '&.epr-active': DarkActivePositionY
+    }
+  }
+};
+
+const styles = stylesheet.create({
+  catBtn: {
+    '.': 'epr-cat-btn',
+    display: 'inline-block',
+    transition: 'opacity 0.2s ease-in-out',
+    position: 'relative',
+    height: 'var(--epr-category-navigation-button-size)',
+    width: 'var(--epr-category-navigation-button-size)',
+    backgroundSize: 'calc(var(--epr-category-navigation-button-size) * 10)',
+    outline: 'none',
+    backgroundPosition: '0 0',
+    backgroundImage: `url(${SVGNavigation})`,
+    ':focus:before': {
+      content: '',
+      position: 'absolute',
+      top: '-2px',
+      left: '-2px',
+      right: '-2px',
+      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: DarkPositionY,
+    ...DarkInactivePosition
+  },
+  '.epr-auto-theme': {
+    catBtn: {
+      '@media (prefers-color-scheme: dark)': DarkPositionY
+    },
+    ...DarkInactivePosition
+  }
+});