emoji-picker-react 4.5.3 → 4.5.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.3",
+  "version": "4.5.4",
   "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/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