emoji-picker-react 4.6.5 → 4.6.6-rc.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.6.5",
+  "version": "4.6.6-rc.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -99,6 +99,7 @@
     "typescript": "^4.7.4"
   },
   "dependencies": {
-    "flairup": "0.0.16"
+    "flairup": "0.0.24",
+    "rollup-plugin-svg": "^2.0.0"
   }
 }

package/src/EmojiPickerReact.css

@@ -28,10 +28,3 @@ aside.EmojiPickerReact.epr-main:has(input:placeholder-shown)
   box-sizing: border-box;
   font-family: sans-serif;
 }
-
-.EmojiPickerReact button.epr-btn {
-  cursor: pointer;
-  border: 0;
-  background: none;
-  outline: none;
-}

package/src/components/atoms/Button.tsx

@@ -1,6 +1,8 @@
 import { cx } from 'flairup';
 import * as React from 'react';
 
+import { stylesheet } from '../../Stylesheet/stylesheet';
+
 interface Props
   extends React.DetailedHTMLProps<
     React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -11,8 +13,22 @@ interface Props
 
 export function Button(props: Props) {
   return (
-    <button type="button" {...props} className={cx('epr-btn', props.className)}>
+    <button
+      type="button"
+      {...props}
+      className={cx(styles.button, props.className)}
+    >
       {props.children}
     </button>
   );
 }
+
+const styles = stylesheet.create({
+  button: {
+    '.': 'epr-btn',
+    cursor: 'pointer',
+    border: '0',
+    background: 'none',
+    outline: 'none'
+  }
+});

package/src/components/navigation/CategoryNavigation.css

@@ -1,54 +1,3 @@
-.EmojiPickerReact .epr-category-nav {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  padding: var(--epr-header-padding);
-}
-
-.EmojiPickerReact .epr-category-nav > button.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);
-  background-size: calc(var(--epr-category-navigation-button-size) * 10);
-  outline: none;
-}
-
-.EmojiPickerReact .epr-category-nav > button.epr-cat-btn:focus:before {
-  content: '';
-  position: absolute;
-  top: -2px;
-  left: -2px;
-  right: -2px;
-  bottom: -2px;
-  border: 2px solid var(--epr-category-icon-active-color);
-  border-radius: 50%;
-}
-
-aside.EmojiPickerReact.epr-main:has(input:not(:placeholder-shown))
-  .epr-category-nav {
-  opacity: 0.3;
-  cursor: default;
-  pointer-events: none;
-}
-
-.EmojiPickerReact.epr-search-active .epr-category-nav {
-  opacity: 0.3;
-  cursor: default;
-  pointer-events: none;
-}
-aside.EmojiPickerReact.epr-main:has(input:not(:placeholder-shown))
-  .epr-category-nav {
-  opacity: 0.3;
-  cursor: default;
-  pointer-events: none;
-}
-.EmojiPickerReact.epr-search-active .epr-category-nav {
-  opacity: 0.3;
-  cursor: default;
-  pointer-events: none;
-}
 aside.EmojiPickerReact.epr-main:has(input:not(:placeholder-shown))
   .epr-category-nav
   > button.epr-cat-btn:hover {
@@ -64,10 +13,6 @@ aside.EmojiPickerReact.epr-main:has(input:not(:placeholder-shown))
   opacity: 1;
   background-position-y: var(--epr-category-navigation-button-size);
 }
-.EmojiPickerReact .epr-category-nav > button.epr-cat-btn {
-  background-image: svg-load(./svg/CategoryNav.svg);
-  background-position: 0 0;
-}
 
 .EmojiPickerReact.epr-dark-theme .epr-category-nav > button.epr-cat-btn {
   background-position-y: calc(var(--epr-category-navigation-button-size) * 2);

package/src/components/navigation/CategoryNavigation.tsx

@@ -16,6 +16,9 @@ import { useShouldHideCustomEmojis } from '../../hooks/useShouldHideCustomEmojis
 import { isCustomCategory } from '../../typeRefinements/typeRefinements';
 import { Button } from '../atoms/Button';
 import { useCategoryNavigationRef } from '../context/ElementRefContext';
+import { stylesheet } from '../../Stylesheet/stylesheet';
+
+import IcnNav from './svg/CategoryNav.svg';
 
 export function CategoryNavigation() {
   const [activeCategory, setActiveCategory] = useState<string | null>(null);
@@ -29,7 +32,7 @@ export function CategoryNavigation() {
 
   return (
     <div
-      className="epr-category-nav"
+      className={cx(styles.nav)}
       role="tablist"
       aria-label="Category navigation"
       id="epr-category-nav-id"
@@ -46,7 +49,7 @@ export function CategoryNavigation() {
         return (
           <Button
             tabIndex={isSearchMode || isActiveCategory ? -1 : 0}
-            className={cx('epr-cat-btn', `epr-icn-${category}`, {
+            className={cx(styles.catBtn, `epr-icn-${category}`, {
               [ClassNames.active]: isActiveCategory
             })}
             key={category}
@@ -64,3 +67,49 @@ export function CategoryNavigation() {
     </div>
   );
 }
+
+const styles = stylesheet.create({
+  nav: {
+    '.': 'epr-category-nav',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    padding: 'var(--epr-header-padding)'
+  },
+  '.epr-search-active': {
+    nav: {
+      opacity: '0.3',
+      cursor: 'default',
+      pointerEvents: 'none'
+    }
+  },
+  '.epr-main:has(input:not(:placeholder-shown))': {
+    nav: {
+      opacity: '0.3',
+      cursor: 'default',
+      pointerEvents: 'none'
+    }
+  },
+  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',
+    backgroundImage: `url(${IcnNav})`,
+    backgroundPosition: '0 0',
+    ':focus:before': {
+      content: '',
+      position: 'absolute',
+      top: '-2px',
+      left: '-2px',
+      right: '-2px',
+      bottom: '-2px',
+      border: '2px solid var(--epr-category-icon-active-color)',
+      borderRadius: '50%'
+    }
+  }
+});

package/src/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}