emoji-picker-react 4.5.15 → 4.6.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.15",
+  "version": "4.6.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/EmojiPickerReact.tsx

@@ -39,8 +39,10 @@ export default React.memo(EmojiPicker, (prev, next) => {
     prev.theme === next.theme &&
     prev.suggestedEmojisMode === next.suggestedEmojisMode &&
     prev.lazyLoadEmojis === next.lazyLoadEmojis &&
+    prev.className === next.className &&
     prev.height === next.height &&
     prev.width === next.width &&
+    prev.style === next.style &&
     prev.searchDisabled === next.searchDisabled &&
     prev.skinTonePickerLocation === next.skinTonePickerLocation &&
     prevCustomEmojis.length === nextCustomEmojis.length

package/src/components/header/CssSearch.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+import { ClassNames, asSelectors } from '../../DomUtils/classNames';
+import { getNormalizedSearchTerm } from '../../hooks/useFilter';
+
+const SCOPE = `${asSelectors(ClassNames.emojiPicker)} ${asSelectors(
+  ClassNames.emojiList
+)}`;
+
+const EMOJI_BUTTON = ['button', asSelectors(ClassNames.emoji)].join('');
+const CATEGORY = asSelectors(ClassNames.category);
+
+export function CssSearch({ value }: { value: undefined | string }) {
+  if (!value) {
+    return null;
+  }
+
+  const q = genQuery(value);
+
+  return (
+    <style>{`
+    ${SCOPE} ${EMOJI_BUTTON} {
+      display: none;
+    }
+
+
+    ${SCOPE} ${q} {
+      display: flex;
+    }
+
+    ${SCOPE} ${CATEGORY}:not(:has(${q})) {
+      display: none;
+    }
+  `}</style>
+  );
+}
+
+function genQuery(value: string): string {
+  return [
+    EMOJI_BUTTON,
+    '[data-full-name*="',
+    getNormalizedSearchTerm(value),
+    '"]'
+  ].join('');
+}

package/src/components/header/Search.tsx

@@ -1,18 +1,14 @@
 import * as React from 'react';
 import { useState } from 'react';
 
-import { asSelectors, ClassNames, clsx } from '../../DomUtils/classNames';
+import { clsx } from '../../DomUtils/classNames';
 import {
   useAutoFocusSearchConfig,
   useSearchDisabledConfig,
   useSearchPlaceHolderConfig
 } from '../../config/useConfig';
 import { useCloseAllOpenToggles } from '../../hooks/useCloseAllOpenToggles';
-import {
-  getNormalizedSearchTerm,
-  useClearSearch,
-  useFilter
-} from '../../hooks/useFilter';
+import { useClearSearch, useFilter } from '../../hooks/useFilter';
 import { useIsSkinToneInSearch } from '../../hooks/useShouldShowSkinTonePicker';
 import Flex from '../Layout/Flex';
 import Relative from '../Layout/Relative';
@@ -20,6 +16,7 @@ import { Button } from '../atoms/Button';
 import { useSearchInputRef } from '../context/ElementRefContext';
 
 import './Search.css';
+import { CssSearch } from './CssSearch';
 import { SkinTonePicker } from './SkinTonePicker';
 
 export function SearchContainer() {
@@ -62,7 +59,7 @@ export function Search() {
         onFocus={closeAllOpenToggles}
         className="epr-search"
         type="text"
-        aria-controls='epr-search-id'
+        aria-controls="epr-search-id"
         placeholder={placeholder}
         onChange={event => {
           setInc(inc + 1);
@@ -74,11 +71,14 @@ export function Search() {
       />
       {searchTerm ? (
         <div
-          role='status'
-          className={clsx('epr-status-search-results', 'epr-status-visually-hidden')}
-          aria-live='polite'
-          id='epr-search-id'
-          aria-atomic='true'
+          role="status"
+          className={clsx(
+            'epr-status-search-results',
+            'epr-status-visually-hidden'
+          )}
+          aria-live="polite"
+          id="epr-search-id"
+          aria-atomic="true"
         >
           {statusSearchResults}
         </div>
@@ -93,33 +93,3 @@ export function Search() {
     </Relative>
   );
 }
-
-const CSS_SEARCH_SELECTOR = `${asSelectors(
-  ClassNames.emojiPicker
-)} ${asSelectors(ClassNames.emojiList)}`;
-
-function CssSearch({ value }: { value: undefined | string }) {
-  if (!value) {
-    return null;
-  }
-
-  const searchQuery = `button[data-full-name*="${getNormalizedSearchTerm(
-    value
-  )}"]`;
-
-  return (
-    <style>{`
-        ${CSS_SEARCH_SELECTOR} ${asSelectors(
-      ClassNames.category
-    )}:not(:has(${searchQuery})) {
-        display: none;
-      }
-
-        ${CSS_SEARCH_SELECTOR} button${asSelectors(
-      ClassNames.emoji
-    )}:not(${searchQuery}) {
-        display: none;
-      }
-  `}</style>
-  );
-}

package/src/components/main/PickerMain.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { ClassNames, clsx } from '../../DomUtils/classNames';
-import { usePickerSizeConfig, useThemeConfig } from '../../config/useConfig';
+import { useClassNameConfig, useStyleConfig, useThemeConfig } from '../../config/useConfig';
 import useIsSearchMode from '../../hooks/useIsSearchMode';
 import { useKeyboardNavigation } from '../../hooks/useKeyboardNavigation';
 import { useOnFocus } from '../../hooks/useOnFocus';
@@ -23,6 +23,8 @@ export default function PickerMain({ children }: Props) {
 }
 
 type RootProps = Readonly<{
+  className?: string;
+  style?: React.CSSProperties;
   children: React.ReactNode;
 }>;
 
@@ -30,25 +32,19 @@ function PickerRootElement({ children }: RootProps) {
   const theme = useThemeConfig();
   const searchModeActive = useIsSearchMode();
   const PickerMainRef = usePickerMainRef();
-  const { height, width } = usePickerSizeConfig();
+  const className = useClassNameConfig();
+  const style = useStyleConfig();
 
   useKeyboardNavigation();
   useOnFocus();
 
-  const style = {
-    height,
-    width
-  };
-
-  
-
   return (
     <aside
       className={clsx(ClassNames.emojiPicker, 'epr-main', {
         [ClassNames.searchActive]: searchModeActive,
         [ClassNames.darkTheme]: theme === Theme.DARK,
         [ClassNames.autoTheme]: theme === Theme.AUTO
-      })}
+      }, className)}
       ref={PickerMainRef}
       style={style}
     >

package/src/config/config.ts

@@ -1,3 +1,5 @@
+import * as React from 'react'
+
 import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
 import {
   setCustomEmojis,
@@ -63,6 +65,7 @@ export function basePickerConfig(): PickerConfigInternal {
   return {
     autoFocusSearch: true,
     categories: baseCategoriesConfig(),
+    className: '',
     customEmojis: [],
     defaultSkinTone: SkinTones.NEUTRAL,
     emojiStyle: EmojiStyle.APPLE,
@@ -78,6 +81,7 @@ export function basePickerConfig(): PickerConfigInternal {
     searchPlaceholder: DEFAULT_SEARCH_PLACEHOLDER,
     skinTonePickerLocation: SkinTonePickerLocation.SEARCH,
     skinTonesDisabled: false,
+    style: {},
     suggestedEmojisMode: SuggestionMode.FREQUENT,
     theme: Theme.LIGHT,
     unicodeToHide: new Set<string>(KNOWN_FAILING_EMOJIS),
@@ -98,8 +102,10 @@ export type PickerConfigInternal = {
   suggestedEmojisMode: SuggestionMode;
   lazyLoadEmojis: boolean;
   previewConfig: PreviewConfig;
+  className: string;
   height: PickerDimensions;
   width: PickerDimensions;
+  style: React.CSSProperties;
   getEmojiUrl: GetEmojiUrl;
   searchDisabled: boolean;
   skinTonePickerLocation: SkinTonePickerLocation;

package/src/config/useConfig.ts

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 import { usePickerConfig } from '../components/context/PickerConfigContext';
 import {
   EmojiClickData,
@@ -88,12 +90,14 @@ export function useLazyLoadEmojisConfig(): boolean {
   return lazyLoadEmojis;
 }
 
-export function usePickerSizeConfig(): {
-  height: PickerDimensions;
-  width: PickerDimensions;
-} {
-  const { height, width } = usePickerConfig();
-  return { height: getDimension(height), width: getDimension(width) };
+export function useClassNameConfig(): string {
+  const { className } = usePickerConfig();
+  return className;
+}
+
+export function useStyleConfig(): React.CSSProperties {
+  const { height, width, style } = usePickerConfig();
+  return { height: getDimension(height), width: getDimension(width), ...style };
 }
 
 export function useEmojiVersionConfig(): string | null {