emoji-picker-react 4.6.0 → 4.6.1-rc.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.6.0",
+  "version": "4.6.1-rc.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -96,5 +96,8 @@
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4"
+  },
+  "dependencies": {
+    "flairup": "^0.0.7-rc"
   }
 }

package/src/Stylesheet/stylesheet.ts

@@ -0,0 +1,3 @@
+import { createSheet } from 'flairup';
+
+export const stylesheet = createSheet('epr');

package/src/components/body/Body.tsx

@@ -1,6 +1,8 @@
+import { cx } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../../DomUtils/classNames';
+import { stylesheet } from '../../Stylesheet/stylesheet';
 import { useOnMouseMove } from '../../hooks/useDisallowMouseMove';
 import { useMouseDownHandlers } from '../../hooks/useMouseDownHandlers';
 import { useOnScroll } from '../../hooks/useOnScroll';
@@ -9,8 +11,6 @@ import { useBodyRef } from '../context/ElementRefContext';
 import { EmojiList } from './EmojiList';
 import { EmojiVariationPicker } from './EmojiVariationPicker';
 
-import './Body.css';
-
 export function Body() {
   const BodyRef = useBodyRef();
   useOnScroll(BodyRef);
@@ -18,9 +18,19 @@ export function Body() {
   useOnMouseMove();
 
   return (
-    <div className={ClassNames.scrollBody} ref={BodyRef}>
+    <div className={cx(styles.body)} ref={BodyRef}>
       <EmojiVariationPicker />
       <EmojiList />
     </div>
   );
 }
+
+const styles = stylesheet.create({
+  body: {
+    '.': ClassNames.scrollBody,
+    flex: 1,
+    overflowY: 'scroll',
+    overflowX: 'hidden',
+    position: 'relative'
+  }
+});

package/src/components/header/Search.tsx

@@ -87,6 +87,8 @@ export function Search() {
       <Button
         className={clsx('epr-btn-clear-search', 'epr-visible-on-search-only')}
         onClick={clearSearch}
+        aria-label="Clear"
+        title="Clear"
       >
         <div className="epr-icn-clear-search" />
       </Button>

package/src/components/body/Body.css

@@ -1,6 +0,0 @@
-.EmojiPickerReact .epr-body {
-  position: relative;
-  flex: 1;
-  overflow-y: scroll;
-  overflow-x: hidden;
-}