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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.6.0",
+  "version": "4.6.1-rc.2",
   "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.4"
   }
 }

package/src/DomUtils/classNames.ts

@@ -24,27 +24,3 @@ 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/Stylesheet/stylesheet.ts

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

package/src/components/Layout/Flex.tsx

@@ -1,7 +1,7 @@
+import { cx } from 'flairup';
 import * as React from 'react';
 
 import './Flex.css';
-import { clsx } from '../../DomUtils/classNames';
 
 export enum FlexDirection {
   ROW = 'FlexRow',
@@ -22,7 +22,7 @@ export default function Flex({
   direction = FlexDirection.ROW
 }: Props) {
   return (
-    <div style={{ ...style }} className={clsx('Flex', className, direction)}>
+    <div style={{ ...style }} className={cx('Flex', className, direction)}>
       {children}
     </div>
   );

package/src/components/Layout/Space.tsx

@@ -1,6 +1,6 @@
+import { cx } from 'flairup';
 import * as React from 'react';
 
-import { clsx } from '../../DomUtils/classNames';
 
 type Props = Readonly<{
   className?: string;
@@ -8,5 +8,5 @@ type Props = Readonly<{
 }>;
 
 export default function Space({ className, style = {} }: Props) {
-  return <div style={{ flex: 1, ...style }} className={clsx(className)} />;
+  return <div style={{ flex: 1, ...style }} className={cx(className)} />;
 }

package/src/components/atoms/Button.tsx

@@ -1,7 +1,6 @@
+import { cx } from 'flairup';
 import * as React from 'react';
 
-import { clsx } from '../../DomUtils/classNames';
-
 interface Props
   extends React.DetailedHTMLProps<
     React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -12,11 +11,7 @@ interface Props
 
 export function Button(props: Props) {
   return (
-    <button
-      type="button"
-      {...props}
-      className={clsx('epr-btn', props.className)}
-    >
+    <button type="button" {...props} className={cx('epr-btn', props.className)}>
       {props.children}
     </button>
   );

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/body/EmojiCategory.tsx

@@ -1,11 +1,13 @@
+import { cx } from 'flairup';
 import * as React from 'react';
 
-import { ClassNames, clsx } from '../../DomUtils/classNames';
+import { ClassNames } from '../../DomUtils/classNames';
 import {
   CategoryConfig,
   categoryFromCategoryConfig,
   categoryNameFromCategoryConfig
 } from '../../config/categoryConfig';
+
 import './EmojiCategory.css';
 
 type Props = Readonly<{
@@ -26,7 +28,7 @@ export function EmojiCategory({
 
   return (
     <li
-      className={clsx(ClassNames.category, {
+      className={cx(ClassNames.category, {
         [ClassNames.hidden]: hidden,
         [ClassNames.hiddenOnSearch]: hiddenOnSearch
       })}

package/src/components/body/EmojiVariationPicker.tsx

@@ -1,7 +1,8 @@
+import { cx } from 'flairup';
 import * as React from 'react';
 import { useEffect } from 'react';
 
-import { ClassNames, clsx } from '../../DomUtils/classNames';
+import { ClassNames } from '../../DomUtils/classNames';
 import { focusFirstVisibleEmoji } from '../../DomUtils/keyboardNavigation';
 import {
   buttonFromTarget,
@@ -26,6 +27,7 @@ import {
 } from '../context/ElementRefContext';
 import { useEmojiVariationPickerState } from '../context/PickerContext';
 import { ClickableEmoji } from '../emoji/Emoji';
+
 import './EmojiVariationPicker.css';
 
 enum Direction {
@@ -74,7 +76,7 @@ export function EmojiVariationPicker() {
   return (
     <div
       ref={VariationPickerRef}
-      className={clsx(ClassNames.variationPicker, {
+      className={cx(ClassNames.variationPicker, {
         visible,
         'pointing-up': getMenuDirection() === Direction.Down
       })}

package/src/components/emoji/ClickableEmojiButton.tsx

@@ -1,7 +1,9 @@
+import { cx } from 'flairup';
 import * as React from 'react';
 
-import { ClassNames, clsx } from '../../DomUtils/classNames';
+import { ClassNames } from '../../DomUtils/classNames';
 import { Button } from '../atoms/Button';
+
 import './Emoji.css';
 
 type ClickableEmojiButtonProps = Readonly<{
@@ -25,7 +27,7 @@ export function ClickableEmojiButton({
 }: ClickableEmojiButtonProps) {
   return (
     <Button
-      className={clsx(ClassNames.emoji, {
+      className={cx(ClassNames.emoji, {
         [ClassNames.hidden]: hidden,
         [ClassNames.hiddenOnSearch]: hiddenOnSearch,
         [ClassNames.visible]: !hidden && !hiddenOnSearch,

package/src/components/emoji/EmojiImg.tsx

@@ -1,6 +1,7 @@
+import { cx } from 'flairup';
 import * as React from 'react';
 
-import { ClassNames, clsx } from '../../DomUtils/classNames';
+import { ClassNames } from '../../DomUtils/classNames';
 import { EmojiStyle } from '../../types/exposedTypes';
 
 export function EmojiImg({
@@ -21,7 +22,7 @@ export function EmojiImg({
     <img
       src={imgUrl}
       alt={emojiName}
-      className={clsx(ClassNames.external, 'epr-emoji-img')}
+      className={cx(ClassNames.external, 'epr-emoji-img')}
       loading={lazyLoad ? 'lazy' : 'eager'}
       onError={onError}
       style={style}

package/src/components/emoji/NativeEmoji.tsx

@@ -1,6 +1,7 @@
+import { cx } from 'flairup';
 import * as React from 'react';
 
-import { ClassNames, clsx } from '../../DomUtils/classNames';
+import { ClassNames } from '../../DomUtils/classNames';
 import { parseNativeEmoji } from '../../dataUtils/parseNativeEmoji';
 
 export function NativeEmoji({
@@ -12,7 +13,7 @@ export function NativeEmoji({
 }) {
   return (
     <span
-      className={clsx(ClassNames.external, 'epr-emoji-native')}
+      className={cx(ClassNames.external, 'epr-emoji-native')}
       data-unified={unified}
       style={style}
     >

package/src/components/header/Search.tsx

@@ -1,7 +1,7 @@
+import { cx } from 'flairup';
 import * as React from 'react';
 import { useState } from 'react';
 
-import { clsx } from '../../DomUtils/classNames';
 import {
   useAutoFocusSearchConfig,
   useSearchDisabledConfig,
@@ -72,7 +72,7 @@ export function Search() {
       {searchTerm ? (
         <div
           role="status"
-          className={clsx(
+          className={cx(
             'epr-status-search-results',
             'epr-status-visually-hidden'
           )}
@@ -85,8 +85,10 @@ export function Search() {
       ) : null}
       <div className="epr-icn-search" />
       <Button
-        className={clsx('epr-btn-clear-search', 'epr-visible-on-search-only')}
+        className={cx('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/header/SkinTonePicker.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { ClassNames, clsx } from '../../DomUtils/classNames';
+import { ClassNames } from '../../DomUtils/classNames';
 import { useSkinTonesDisabledConfig } from '../../config/useConfig';
 import skinToneVariations, {
   skinTonesNamed
@@ -16,7 +16,9 @@ import {
   useActiveSkinToneState,
   useSkinToneFanOpenState
 } from '../context/PickerContext';
+
 import './SkinTonePicker.css';
+import { cx } from 'flairup';
 
 const ITEM_SIZE = 28;
 
@@ -56,7 +58,7 @@ export function SkinTonePicker({
 
   return (
     <Relative
-      className={clsx('epr-skin-tones', direction, {
+      className={cx('epr-skin-tones', direction, {
         [ClassNames.open]: isOpen
       })}
       style={
@@ -71,7 +73,7 @@ export function SkinTonePicker({
           return (
             <Button
               style={{
-                transform: clsx(
+                transform: cx(
                   vertical
                     ? `translateY(-${i * (isOpen ? ITEM_SIZE : 0)}px)`
                     : `translateX(-${i * (isOpen ? ITEM_SIZE : 0)}px)`,
@@ -88,7 +90,7 @@ export function SkinTonePicker({
                 closeAllOpenToggles();
               }}
               key={skinToneVariation}
-              className={clsx(`epr-tone-${skinToneVariation}`, 'epr-tone', {
+              className={cx(`epr-tone-${skinToneVariation}`, 'epr-tone', {
                 [ClassNames.active]: active
               })}
               tabIndex={isOpen ? 0 : -1}

package/src/components/main/PickerMain.tsx

@@ -1,13 +1,19 @@
+import { cx } from 'flairup';
 import * as React from 'react';
 
-import { ClassNames, clsx } from '../../DomUtils/classNames';
-import { useClassNameConfig, useStyleConfig, useThemeConfig } from '../../config/useConfig';
+import { ClassNames } from '../../DomUtils/classNames';
+import {
+  useClassNameConfig,
+  useStyleConfig,
+  useThemeConfig
+} from '../../config/useConfig';
 import useIsSearchMode from '../../hooks/useIsSearchMode';
 import { useKeyboardNavigation } from '../../hooks/useKeyboardNavigation';
 import { useOnFocus } from '../../hooks/useOnFocus';
 import { Theme } from '../../types/exposedTypes';
 import { usePickerMainRef } from '../context/ElementRefContext';
 import { PickerContextProvider } from '../context/PickerContext';
+
 import './PickerMain.css';
 
 type Props = Readonly<{
@@ -40,11 +46,16 @@ function PickerRootElement({ children }: RootProps) {
 
   return (
     <aside
-      className={clsx(ClassNames.emojiPicker, 'epr-main', {
-        [ClassNames.searchActive]: searchModeActive,
-        [ClassNames.darkTheme]: theme === Theme.DARK,
-        [ClassNames.autoTheme]: theme === Theme.AUTO
-      }, className)}
+      className={cx(
+        ClassNames.emojiPicker,
+        'epr-main',
+        {
+          [ClassNames.searchActive]: searchModeActive,
+          [ClassNames.darkTheme]: theme === Theme.DARK,
+          [ClassNames.autoTheme]: theme === Theme.AUTO
+        },
+        className
+      )}
       ref={PickerMainRef}
       style={style}
     >

package/src/components/navigation/CategoryNavigation.tsx

@@ -1,8 +1,9 @@
+import { cx } from 'flairup';
 import * as React from 'react';
 import { useState } from 'react';
 import './CategoryNavigation.css';
 
-import { ClassNames, clsx } from '../../DomUtils/classNames';
+import { ClassNames } from '../../DomUtils/classNames';
 import {
   categoryFromCategoryConfig,
   categoryNameFromCategoryConfig
@@ -27,13 +28,13 @@ export function CategoryNavigation() {
   const hideCustomCategory = useShouldHideCustomEmojis();
 
   return (
-      <div
-        className='epr-category-nav'
-        role='tablist'
-        aria-label='Category navigation'
-        id='epr-category-nav-id'
-        ref={CategoryNavigationRef}
-      >
+    <div
+      className="epr-category-nav"
+      role="tablist"
+      aria-label="Category navigation"
+      id="epr-category-nav-id"
+      ref={CategoryNavigationRef}
+    >
       {categoriesConfig.map(categoryConfig => {
         const category = categoryFromCategoryConfig(categoryConfig);
         const isActiveCategory = category === activeCategory;
@@ -44,8 +45,8 @@ export function CategoryNavigation() {
 
         return (
           <Button
-            tabIndex={(isSearchMode || isActiveCategory) ? -1 : 0}
-            className={clsx('epr-cat-btn', `epr-icn-${category}`, {
+            tabIndex={isSearchMode || isActiveCategory ? -1 : 0}
+            className={cx('epr-cat-btn', `epr-icn-${category}`, {
               [ClassNames.active]: isActiveCategory
             })}
             key={category}
@@ -55,8 +56,8 @@ export function CategoryNavigation() {
             }}
             aria-label={categoryNameFromCategoryConfig(categoryConfig)}
             aria-selected={isActiveCategory}
-            role='tab'
-            aria-controls='epr-category-nav-id'
+            role="tab"
+            aria-controls="epr-category-nav-id"
           />
         );
       })}

package/src/hooks/useFilter.ts

@@ -1,18 +1,18 @@
 import { scrollTo } from '../DomUtils/scrollTo';
 import {
   usePickerMainRef,
-  useSearchInputRef,
+  useSearchInputRef
 } from '../components/context/ElementRefContext';
 import {
   FilterState,
   useFilterRef,
-  useSearchTermState,
+  useSearchTermState
 } from '../components/context/PickerContext';
+import { useSearchResultsConfig } from '../config/useConfig';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { emojiNames } from '../dataUtils/emojiSelectors';
 
 import { useFocusSearchInput } from './useFocus';
-import { useSearchResultsConfig } from '../config/useConfig';
 
 function useSetFilterRef() {
   const filterRef = useFilterRef();
@@ -64,13 +64,16 @@ export function useFilter() {
   const applySearch = useApplySearch();
 
   const [searchTerm] = useSearchTermState();
-  const statusSearchResults = getStatusSearchResults(filterRef.current, searchTerm);
+  const statusSearchResults = getStatusSearchResults(
+    filterRef.current,
+    searchTerm
+  );
 
   return {
     onChange,
     searchTerm,
     SearchInputRef,
-    statusSearchResults,
+    statusSearchResults
   };
 
   function onChange(inputValue: string) {
@@ -90,9 +93,9 @@ export function useFilter() {
       return applySearch(nextValue);
     }
 
-    setFilterRef((current) =>
+    setFilterRef(current =>
       Object.assign(current, {
-        [nextValue]: filterEmojiObjectByKeyword(longestMatch, nextValue),
+        [nextValue]: filterEmojiObjectByKeyword(longestMatch, nextValue)
       })
     );
     applySearch(nextValue);
@@ -132,14 +135,14 @@ function filterEmojiObjectByKeyword(
 }
 
 function hasMatch(emoji: DataEmoji, keyword: string): boolean {
-  return emojiNames(emoji).some((name) => name.includes(keyword));
+  return emojiNames(emoji).some(name => name.includes(keyword));
 }
 
 export function useIsEmojiFiltered(): (unified: string) => boolean {
   const { current: filter } = useFilterRef();
   const [searchTerm] = useSearchTermState();
 
-  return (unified) => isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
+  return unified => isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
 }
 
 function isEmojiFilteredBySearchTerm(
@@ -170,7 +173,7 @@ function findLongestMatch(
 
   const longestMatchingKey = Object.keys(dict)
     .sort((a, b) => b.length - a.length)
-    .find((key) => keyword.includes(key));
+    .find(key => keyword.includes(key));
 
   if (longestMatchingKey) {
     return dict[longestMatchingKey];
@@ -187,9 +190,14 @@ export function getNormalizedSearchTerm(str: string): string {
   return str.trim().toLowerCase();
 }
 
-function getStatusSearchResults(filterState: FilterState, searchTerm: string): string {
+function getStatusSearchResults(
+  filterState: FilterState,
+  searchTerm: string
+): string {
   if (!filterState?.[searchTerm]) return '';
 
-  const searchResultsCount = Object.entries(filterState?.[searchTerm])?.length || 0;
+  const searchResultsCount =
+    Object.entries(filterState?.[searchTerm])?.length || 0;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   return useSearchResultsConfig(searchResultsCount);
 }

package/src/hooks/useKeyboardNavigation.ts

@@ -24,6 +24,7 @@ import {
   useSkinTonePickerRef
 } from '../components/context/ElementRefContext';
 import { useSkinToneFanOpenState } from '../components/context/PickerContext';
+import { useSearchDisabledConfig } from '../config/useConfig';
 
 import {
   useCloseAllOpenToggles,
@@ -42,7 +43,6 @@ import {
   useIsSkinToneInPreview,
   useIsSkinToneInSearch
 } from './useShouldShowSkinTonePicker';
-import { useSearchDisabledConfig } from '../config/useConfig';
 
 enum KeyboardEvents {
   ArrowDown = 'ArrowDown',

package/src/components/body/Body.css

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