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

package/src/components/header/Search.tsx

@@ -38,13 +38,6 @@ export function SearchContainer() {
   );
 }
 
-const styles = stylesheet.create({
-  overlay: {
-    padding: 'var(--epr-header-padding)',
-    zIndex: 'var(--epr-header-overlay-z-index)'
-  }
-});
-
 export function Search() {
   const [inc, setInc] = useState(0);
   const closeAllOpenToggles = useCloseAllOpenToggles();
@@ -58,14 +51,14 @@ export function Search() {
   const value = input?.value;
 
   return (
-    <Relative className="epr-search-container">
+    <Relative className={cx(styles.searchContainer)}>
       <CssSearch value={value} />
       <input
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus={autoFocus}
         aria-label={'Type to search for an emoji'}
         onFocus={closeAllOpenToggles}
-        className="epr-search"
+        className={cx(styles.search)}
         type="text"
         aria-controls="epr-search-id"
         placeholder={placeholder}
@@ -80,10 +73,7 @@ export function Search() {
       {searchTerm ? (
         <div
           role="status"
-          className={cx(
-            'epr-status-search-results',
-            'epr-status-visually-hidden'
-          )}
+          className={cx('epr-status-search-results', styles.visuallyHidden)}
           aria-live="polite"
           id="epr-search-id"
           aria-atomic="true"
@@ -91,15 +81,138 @@ export function Search() {
           {statusSearchResults}
         </div>
       ) : null}
-      <div className="epr-icn-search" />
+      <div className={cx(styles.icnSearch)} />
       <Button
-        className={cx('epr-btn-clear-search', 'epr-visible-on-search-only')}
+        className={cx(styles.btnClearSearch, 'epr-visible-on-search-only')}
         onClick={clearSearch}
         aria-label="Clear"
         title="Clear"
       >
-        <div className="epr-icn-clear-search" />
+        <div className={cx(styles.icnClearnSearch)} />
       </Button>
     </Relative>
   );
 }
+
+const styles = stylesheet.create({
+  overlay: {
+    padding: 'var(--epr-header-padding)',
+    zIndex: 'var(--epr-header-overlay-z-index)'
+  },
+  searchContainer: {
+    '.': 'epr-search-container',
+    flex: '1',
+    display: 'block',
+    minWidth: '0'
+  },
+  visuallyHidden: {
+    clip: 'rect(0 0 0 0)',
+    clipPath: 'inset(50%)',
+    height: '1px',
+    overflow: 'hidden',
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1px'
+  },
+  search: {
+    outline: 'none',
+    transition: 'all 0.2s ease-in-out',
+    color: 'var(--epr-search-input-text-color)',
+    borderRadius: 'var(--epr-search-input-border-radius)',
+    padding: 'var(--epr-search-input-padding)',
+    height: 'var(--epr-search-input-height)',
+    backgroundColor: 'var(--epr-search-input-bg-color)',
+    border: '1px solid var(--epr-search-input-bg-color)',
+    width: '100%',
+    ':focus': {
+      backgroundColor: 'var(--epr-search-input-bg-color-active)',
+      border: '1px solid var(--epr-search-border-color)'
+    },
+    '::placeholder': {
+      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'
+  },
+  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',
+    ':hover': {
+      backgroundPositionY: '-20px'
+    },
+    ':focus': {
+      backgroundPositionY: '-20px'
+    }
+  },
+  '.epr-dark-theme': {
+    icnSearch: {
+      backgroundPositionY: '-20px'
+    },
+    icnClearnSearch: {
+      backgroundPositionY: '-40px'
+    },
+    btnClearSearch: {
+      ':hover > .epr-icn-clear-search': {
+        backgroundPositionY: '-60px'
+      }
+    }
+  },
+  '.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': {
+          backgroundPositionY: '-60px'
+        }
+      }
+    }
+  }
+});

package/src/components/navigation/CategoryNavigation.css

@@ -1,3 +1,7 @@
+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 {

package/src/components/navigation/CategoryNavigation.tsx

@@ -18,8 +18,6 @@ import { isCustomCategory } from '../../typeRefinements/typeRefinements';
 import { Button } from '../atoms/Button';
 import { useCategoryNavigationRef } from '../context/ElementRefContext';
 
-import CatNavBtn from './svg/CategoryNav.svg';
-
 export function CategoryNavigation() {
   const [activeCategory, setActiveCategory] = useState<string | null>(null);
   const scrollCategoryIntoView = useScrollCategoryIntoView();
@@ -98,7 +96,6 @@ const styles = stylesheet.create({
     height: 'var(--epr-category-navigation-button-size)',
     width: 'var(--epr-category-navigation-button-size)',
     backgroundSize: 'calc(var(--epr-category-navigation-button-size) * 10)',
-    backgroundImage: `url(${CatNavBtn})`,
     outline: 'none',
     backgroundPosition: '0 0',
     ':focus:before': {

package/src/components/emoji/Emoji.css

@@ -1,80 +0,0 @@
-.EmojiPickerReact button.epr-emoji {
-  position: relative;
-  width: var(--epr-emoji-fullsize);
-  height: var(--epr-emoji-fullsize);
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  max-width: var(--epr-emoji-fullsize);
-  max-height: var(--epr-emoji-fullsize);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:after {
-  content: '';
-  display: block;
-  width: 0;
-  height: 0;
-  right: 0px;
-  bottom: 1px;
-  position: absolute;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  transform: rotate(135deg);
-  border-bottom: 4px solid var(--epr-emoji-variation-indicator-color);
-  z-index: var(--epr-emoji-variations-indictator-z-index);
-}
-
-.EmojiPickerReact button.epr-emoji .epr-emoji-img {
-  max-width: var(--epr-emoji-fullsize);
-  max-height: var(--epr-emoji-fullsize);
-  min-width: var(--epr-emoji-fullsize);
-  min-height: var(--epr-emoji-fullsize);
-  padding: var(--epr-emoji-padding);
-}
-
-.EmojiPickerReact button.epr-emoji .epr-emoji-native {
-  padding: var(--epr-emoji-padding);
-}
-
-.EmojiPickerReact button.epr-emoji > * {
-  align-self: center;
-  justify-self: center;
-  display: block;
-}
-
-.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:hover:after {
-  border-bottom: 4px solid var(--epr-emoji-variation-indicator-color-hover);
-}
-
-.__EmojiPicker__.epr-emoji-img {
-  font-size: 0;
-}
-
-.__EmojiPicker__.epr-emoji-native {
-  font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI',
-    'Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji',
-    Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif,
-    LastResort;
-  position: relative;
-  line-height: 100%;
-  font-size: var(--epr-emoji-size);
-  text-align: center;
-  align-self: center;
-  justify-self: center;
-  letter-spacing: 0;
-}
-
-.EmojiPickerReact button.epr-emoji > * {
-  transition: background-color 0.2s;
-}
-
-.EmojiPickerReact button.epr-emoji:hover > * {
-  background-color: var(--epr-emoji-hover-color);
-}
-
-.EmojiPickerReact button.epr-emoji:focus > * {
-  background-color: var(--epr-focus-bg-color);
-}