emoji-picker-react 4.5.3 → 4.5.5

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.3",
+  "version": "4.5.5",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -96,8 +96,5 @@
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4"
-  },
-  "dependencies": {
-    "clsx": "^1.2.1"
   }
 }

package/src/DomUtils/classNames.ts

@@ -22,3 +22,27 @@ export enum ClassNames {
 export function asSelectors(...classNames: ClassNames[]): string {
   return classNames.map(c => `.${c}`).join('');
 }
+
+export function clsx(...args: any[]): string {
+  const classes = args.reduce((classes, arg) => {
+    if (typeof arg === 'string') {
+      classes.push(arg);
+    }
+
+    if (Array.isArray(arg)) {
+      classes.push(clsx(...arg));
+    }
+
+    if (typeof arg === 'object') {
+      Object.entries(arg).forEach(([key, value]) => {
+        if (value) {
+          classes.push(key);
+        }
+      });
+    }
+
+    return classes;
+  }, []);
+
+  return classes.filter(Boolean).join(' ');
+}

package/src/components/Layout/Flex.tsx

@@ -1,6 +1,7 @@
-import clsx from 'clsx';
 import * as React from 'react';
+
 import './Flex.css';
+import { clsx } from '../../DomUtils/classNames';
 
 export enum FlexDirection {
   ROW = 'FlexRow',

package/src/components/Layout/Space.tsx

@@ -1,6 +1,7 @@
-import clsx from 'clsx';
 import * as React from 'react';
 
+import { clsx } from '../../DomUtils/classNames';
+
 type Props = Readonly<{
   className?: string;
   style?: React.CSSProperties;

package/src/components/atoms/Button.tsx

@@ -1,6 +1,7 @@
-import clsx from 'clsx';
 import * as React from 'react';
 
+import { clsx } from '../../DomUtils/classNames';
+
 interface Props
   extends React.DetailedHTMLProps<
     React.ButtonHTMLAttributes<HTMLButtonElement>,

package/src/components/body/EmojiCategory.tsx

@@ -1,7 +1,6 @@
-import clsx from 'clsx';
 import * as React from 'react';
 
-import { ClassNames } from '../../DomUtils/classNames';
+import { ClassNames, clsx } from '../../DomUtils/classNames';
 import {
   CategoryConfig,
   categoryFromCategoryConfig,

package/src/components/body/EmojiList.tsx

@@ -29,10 +29,11 @@ import './EmojiList.css';
 
 export function EmojiList() {
   const categories = useCategoriesConfig();
+  const renderdCategoriesCountRef = React.useRef(0);
 
   return (
     <ul className={ClassNames.emojiList}>
-      {categories.map((categoryConfig, index) => {
+      {categories.map(categoryConfig => {
         const category = categoryFromCategoryConfig(categoryConfig);
 
         if (category === Categories.SUGGESTED) {
@@ -42,9 +43,9 @@ export function EmojiList() {
         return (
           <RenderCategory
             key={category}
-            index={index}
             category={category}
             categoryConfig={categoryConfig}
+            renderdCategoriesCountRef={renderdCategoriesCountRef}
           />
         );
       })}
@@ -53,13 +54,13 @@ export function EmojiList() {
 }
 
 function RenderCategory({
-  index,
   category,
-  categoryConfig
+  categoryConfig,
+  renderdCategoriesCountRef
 }: {
-  index: number;
   category: Categories;
   categoryConfig: CategoryConfig;
+  renderdCategoriesCountRef: React.MutableRefObject<number>;
 }) {
   const isEmojiHidden = useIsEmojiHidden();
   const lazyLoadEmojis = useLazyLoadEmojisConfig();
@@ -73,7 +74,13 @@ function RenderCategory({
   // Small trick to defer the rendering of all emoji categories until the first category is visible
   // This way the user gets to actually see something and not wait for the whole picker to render.
   const emojisToPush =
-    !isPastInitialLoad && index > 1 ? [] : emojisByCategory(category);
+    !isPastInitialLoad && renderdCategoriesCountRef.current > 0
+      ? []
+      : emojisByCategory(category);
+
+  if (emojisToPush.length > 0) {
+    renderdCategoriesCountRef.current++;
+  }
 
   let hiddenCounter = 0;
 

package/src/components/body/EmojiVariationPicker.tsx

@@ -1,8 +1,7 @@
-import clsx from 'clsx';
 import * as React from 'react';
 import { useEffect } from 'react';
 
-import { ClassNames } from '../../DomUtils/classNames';
+import { ClassNames, clsx } from '../../DomUtils/classNames';
 import { focusFirstVisibleEmoji } from '../../DomUtils/keyboardNavigation';
 import {
   buttonFromTarget,

package/src/components/emoji/ClickableEmojiButton.tsx

@@ -1,7 +1,6 @@
-import clsx from 'clsx';
 import * as React from 'react';
 
-import { ClassNames } from '../../DomUtils/classNames';
+import { ClassNames, clsx } from '../../DomUtils/classNames';
 import { Button } from '../atoms/Button';
 import './Emoji.css';
 

package/src/components/emoji/EmojiImg.tsx

@@ -1,7 +1,6 @@
-import clsx from 'clsx';
 import * as React from 'react';
 
-import { ClassNames } from '../../DomUtils/classNames';
+import { ClassNames, clsx } from '../../DomUtils/classNames';
 import { EmojiStyle } from '../../types/exposedTypes';
 
 export function EmojiImg({

package/src/components/emoji/NativeEmoji.tsx

@@ -1,7 +1,6 @@
-import clsx from 'clsx';
 import * as React from 'react';
 
-import { ClassNames } from '../../DomUtils/classNames';
+import { ClassNames, clsx } from '../../DomUtils/classNames';
 import { parseNativeEmoji } from '../../dataUtils/parseNativeEmoji';
 
 export function NativeEmoji({

package/src/components/header/Search.tsx

@@ -1,8 +1,7 @@
-import clsx from 'clsx';
 import * as React from 'react';
 import { useState } from 'react';
 
-import { asSelectors, ClassNames } from '../../DomUtils/classNames';
+import { asSelectors, ClassNames, clsx } from '../../DomUtils/classNames';
 import {
   useAutoFocusSearchConfig,
   useSearchDisabledConfig,

package/src/components/header/SkinTonePicker.tsx

@@ -1,7 +1,6 @@
-import clsx from 'clsx';
 import * as React from 'react';
 
-import { ClassNames } from '../../DomUtils/classNames';
+import { ClassNames, clsx } from '../../DomUtils/classNames';
 import { useSkinTonesDisabledConfig } from '../../config/useConfig';
 import skinToneVariations, {
   skinTonesNamed

package/src/components/main/PickerMain.tsx

@@ -1,7 +1,6 @@
-import clsx from 'clsx';
 import * as React from 'react';
 
-import { ClassNames } from '../../DomUtils/classNames';
+import { ClassNames, clsx } from '../../DomUtils/classNames';
 import { usePickerSizeConfig, useThemeConfig } from '../../config/useConfig';
 import useIsSearchMode from '../../hooks/useIsSearchMode';
 import { useKeyboardNavigation } from '../../hooks/useKeyboardNavigation';

package/src/components/navigation/CategoryNavigation.tsx

@@ -1,9 +1,8 @@
-import clsx from 'clsx';
 import * as React from 'react';
 import { useState } from 'react';
 import './CategoryNavigation.css';
 
-import { ClassNames } from '../../DomUtils/classNames';
+import { ClassNames, clsx } from '../../DomUtils/classNames';
 import {
   categoryFromCategoryConfig,
   categoryNameFromCategoryConfig