emoji-picker-react 4.6.6-rc.4 → 4.6.6

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.6.6-rc.4",
+  "version": "4.6.6",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -96,10 +96,9 @@
     "tiny-invariant": "^1.2.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.4",
-    "rollup-plugin-svg": "^2.0.0"
+    "typescript": "^4.7.4"
   },
   "dependencies": {
-    "flairup": "0.0.24"
+    "flairup": "0.0.16"
   }
 }

package/src/EmojiPickerReact.css

@@ -28,3 +28,10 @@ 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,8 +1,6 @@
 import { cx } from 'flairup';
 import * as React from 'react';
 
-import { stylesheet } from '../../Stylesheet/stylesheet';
-
 interface Props
   extends React.DetailedHTMLProps<
     React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -13,22 +11,8 @@ interface Props
 
 export function Button(props: Props) {
   return (
-    <button
-      type="button"
-      {...props}
-      className={cx(styles.button, props.className)}
-    >
+    <button type="button" {...props} className={cx('epr-btn', 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,3 +1,54 @@
+.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 {
@@ -13,6 +64,10 @@ 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

@@ -4,7 +4,6 @@ import { useState } from 'react';
 import './CategoryNavigation.css';
 
 import { ClassNames } from '../../DomUtils/classNames';
-import { stylesheet } from '../../Stylesheet/stylesheet';
 import {
   categoryFromCategoryConfig,
   categoryNameFromCategoryConfig
@@ -18,8 +17,6 @@ import { isCustomCategory } from '../../typeRefinements/typeRefinements';
 import { Button } from '../atoms/Button';
 import { useCategoryNavigationRef } from '../context/ElementRefContext';
 
-import IcnNav from './svg/CategoryNav.svg';
-
 export function CategoryNavigation() {
   const [activeCategory, setActiveCategory] = useState<string | null>(null);
   const scrollCategoryIntoView = useScrollCategoryIntoView();
@@ -32,7 +29,7 @@ export function CategoryNavigation() {
 
   return (
     <div
-      className={cx(styles.nav)}
+      className="epr-category-nav"
       role="tablist"
       aria-label="Category navigation"
       id="epr-category-nav-id"
@@ -49,7 +46,7 @@ export function CategoryNavigation() {
         return (
           <Button
             tabIndex={isSearchMode || isActiveCategory ? -1 : 0}
-            className={cx(styles.catBtn, `epr-icn-${category}`, {
+            className={cx('epr-cat-btn', `epr-icn-${category}`, {
               [ClassNames.active]: isActiveCategory
             })}
             key={category}
@@ -67,49 +64,3 @@ 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(data:image/svg+xml;utf8,${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

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