emoji-picker-react 4.6.2 → 4.6.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.6.2",
+  "version": "4.6.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -98,6 +98,6 @@
     "typescript": "^4.7.4"
   },
   "dependencies": {
-    "flairup": "0.0.7"
+    "flairup": "0.0.12"
   }
 }

package/src/components/body/Body.tsx

@@ -28,7 +28,7 @@ export function Body() {
 const styles = stylesheet.create({
   body: {
     '.': ClassNames.scrollBody,
-    flex: 1,
+    flex: '1',
     overflowY: 'scroll',
     overflowX: 'hidden',
     position: 'relative'

package/src/components/body/EmojiList.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 {
   Categories,
   CategoryConfig,
@@ -25,14 +27,12 @@ import { ClickableEmoji } from '../emoji/Emoji';
 import { EmojiCategory } from './EmojiCategory';
 import { Suggested } from './Suggested';
 
-import './EmojiList.css';
-
 export function EmojiList() {
   const categories = useCategoriesConfig();
   const renderdCategoriesCountRef = React.useRef(0);
 
   return (
-    <ul className={ClassNames.emojiList}>
+    <ul className={cx(styles.emojiList)}>
       {categories.map(categoryConfig => {
         const category = categoryFromCategoryConfig(categoryConfig);
 
@@ -124,3 +124,12 @@ function RenderCategory({
     </EmojiCategory>
   );
 }
+
+const styles = stylesheet.create({
+  emojiList: {
+    '.': ClassNames.emojiList,
+    listStyle: 'none',
+    margin: '0',
+    padding: '0'
+  }
+});

package/src/components/main/PickerMain.tsx

@@ -2,6 +2,7 @@ import { cx } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../../DomUtils/classNames';
+import { stylesheet } from '../../Stylesheet/stylesheet';
 import {
   useClassNameConfig,
   useStyleConfig,
@@ -14,8 +15,6 @@ import { Theme } from '../../types/exposedTypes';
 import { usePickerMainRef } from '../context/ElementRefContext';
 import { PickerContextProvider } from '../context/PickerContext';
 
-import './PickerMain.css';
-
 type Props = Readonly<{
   children: React.ReactNode;
 }>;
@@ -47,8 +46,7 @@ function PickerRootElement({ children }: RootProps) {
   return (
     <aside
       className={cx(
-        ClassNames.emojiPicker,
-        'epr-main',
+        styles.main,
         {
           [ClassNames.searchActive]: searchModeActive,
           [ClassNames.darkTheme]: theme === Theme.DARK,
@@ -63,3 +61,16 @@ function PickerRootElement({ children }: RootProps) {
     </aside>
   );
 }
+
+const styles = stylesheet.create({
+  main: {
+    '.': ['epr-main', ClassNames.emojiPicker],
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderRadius: 'var(--epr-picker-border-radius)',
+    borderColor: 'var(--epr-picker-border-color)'
+  }
+});

package/src/components/body/EmojiList.css

@@ -1,5 +0,0 @@
-.EmojiPickerReact ul.epr-emoji-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}

package/src/components/main/PickerMain.css

@@ -1,9 +0,0 @@
-aside.EmojiPickerReact.epr-main {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: var(--epr-picker-border-radius);
-  border-color: var(--epr-picker-border-color);
-}