emoji-picker-react 4.17.5 → 4.18.0

package/src/components/body/EmojiVariationPicker.tsx

@@ -8,23 +8,23 @@ import {
   buttonFromTarget,
   elementHeight,
   emojiTrueOffsetTop,
-  emojiTruOffsetLeft
+  emojiTruOffsetLeft,
 } from '../../DomUtils/selectors';
 import { darkMode, stylesheet } from '../../Stylesheet/stylesheet';
 import {
   useEmojiStyleConfig,
-  useGetEmojiUrlConfig
+  useGetEmojiUrlConfig,
 } from '../../config/useConfig';
 import {
   emojiHasVariations,
   emojiUnified,
-  emojiVariations
+  emojiVariations,
 } from '../../dataUtils/emojiSelectors';
 import {
   useAnchoredEmojiRef,
   useBodyRef,
   useSetAnchoredEmojiRef,
-  useVariationPickerRef
+  useVariationPickerRef,
 } from '../context/ElementRefContext';
 import { useEmojiVariationPickerState } from '../context/PickerContext';
 import { ClickableEmoji } from '../emoji/Emoji';
@@ -33,7 +33,7 @@ import SVGTriangle from './svg/triangle.svg';
 
 enum Direction {
   Up,
-  Down
+  Down,
 }
 
 // eslint-disable-next-line complexity
@@ -43,9 +43,8 @@ export function EmojiVariationPicker() {
   const [emoji] = useEmojiVariationPickerState();
   const emojiStyle = useEmojiStyleConfig();
 
-  const { getTop, getMenuDirection } = useVariationPickerTop(
-    VariationPickerRef
-  );
+  const { getTop, getMenuDirection } =
+    useVariationPickerTop(VariationPickerRef);
   const setAnchoredEmojiRef = useSetAnchoredEmojiRef();
   const getPointerStyle = usePointerStyle(VariationPickerRef);
   const getEmojiUrl = useGetEmojiUrlConfig();
@@ -54,9 +53,9 @@ export function EmojiVariationPicker() {
 
   const visible = Boolean(
     emoji &&
-      button &&
-      emojiHasVariations(emoji) &&
-      button.classList.contains(ClassNames.emojiHasVariations)
+    button &&
+    emojiHasVariations(emoji) &&
+    button.classList.contains(ClassNames.emojiHasVariations),
   );
 
   useEffect(() => {
@@ -82,7 +81,7 @@ export function EmojiVariationPicker() {
       className={cx(
         styles.variationPicker,
         getMenuDirection() === Direction.Down && styles.pointingUp,
-        visible && styles.visible
+        visible && styles.visible,
       )}
       style={{ top }}
     >
@@ -90,7 +89,7 @@ export function EmojiVariationPicker() {
         ? [emojiUnified(emoji)]
             .concat(emojiVariations(emoji))
             .slice(0, 6)
-            .map(unified => (
+            .map((unified) => (
               <ClickableEmoji
                 key={unified}
                 emoji={emoji}
@@ -132,7 +131,7 @@ function usePointerStyle(VariationPickerRef: React.RefObject<HTMLElement>) {
 }
 
 function useVariationPickerTop(
-  VariationPickerRef: React.RefObject<HTMLElement>
+  VariationPickerRef: React.RefObject<HTMLElement>,
 ) {
   const AnchoredEmojiRef = useAnchoredEmojiRef();
   const BodyRef = useBodyRef();
@@ -140,7 +139,7 @@ function useVariationPickerTop(
 
   return {
     getMenuDirection,
-    getTop
+    getTop,
   };
 
   function getMenuDirection() {
@@ -198,24 +197,24 @@ const styles = stylesheet.create({
     zIndex: 'var(--epr-skin-variation-picker-z-index)',
     background: 'var(--epr-emoji-variation-picker-bg-color)',
     transform: 'scale(0.9)',
-    transition: 'transform 0.1s ease-out, opacity 0.2s ease-out'
+    transition: 'transform 0.1s ease-out, opacity 0.2s ease-out',
   },
   visible: {
     opacity: '1',
     visibility: 'visible',
     pointerEvents: 'all',
-    transform: 'scale(1)'
+    transform: 'scale(1)',
   },
   pointingUp: {
     '.': 'pointing-up',
     transformOrigin: 'center 0%',
-    transform: 'scale(0.9)'
+    transform: 'scale(0.9)',
   },
   '.pointing-up': {
     pointer: {
       top: '0',
-      transform: 'rotate(180deg) translateY(100%) translateX(18px)'
-    }
+      transform: 'rotate(180deg) translateY(100%) translateX(18px)',
+    },
   },
   pointer: {
     '.': 'epr-emoji-pointer',
@@ -228,9 +227,9 @@ const styles = stylesheet.create({
     backgroundSize: '50px 15px',
     top: '100%',
     transform: 'translateX(-18px)',
-    backgroundImage: `url(${SVGTriangle})`
+    backgroundImage: `url(${SVGTriangle})`,
   },
   ...darkMode('pointer', {
-    backgroundPosition: '-25px 0'
-  })
+    backgroundPosition: '-25px 0',
+  }),
 });

package/src/components/body/MeasureEmoji.tsx

@@ -1,19 +1,20 @@
 import * as React from 'react';
 
-import {
-  categoryFromCategoryConfig
-} from '../../config/categoryConfig';
+import { categoryFromCategoryConfig } from '../../config/categoryConfig';
 import {
   useCategoriesConfig,
   useEmojiStyleConfig,
   useGetEmojiUrlConfig,
-  useLazyLoadEmojisConfig
+  useLazyLoadEmojisConfig,
 } from '../../config/useConfig';
 import {
   useGetEmojisByCategory,
-  emojiUnified
+  emojiUnified,
 } from '../../dataUtils/emojiSelectors';
-import { useActiveSkinToneState, useEmojiSizeState } from '../context/PickerContext';
+import {
+  useActiveSkinToneState,
+  useEmojiSizeState,
+} from '../context/PickerContext';
 import { ClickableEmoji } from '../emoji/Emoji';
 
 export function MeasureEmoji() {
@@ -38,11 +39,9 @@ export function MeasureEmoji() {
 
   const firstCategory = categories[0];
   const dummyEmoji = getEmojisByCategory(
-    categoryFromCategoryConfig(firstCategory)
+    categoryFromCategoryConfig(firstCategory),
   )[0];
-  const unified = dummyEmoji
-    ? emojiUnified(dummyEmoji, activeSkinTone)
-    : '';
+  const unified = dummyEmoji ? emojiUnified(dummyEmoji, activeSkinTone) : '';
 
   if (!dummyEmoji) {
     return null;
@@ -66,7 +65,7 @@ export function MeasureEmoji() {
           left: 0,
           zIndex: -1,
           height: 'var(--epr-emoji-fullsize)',
-          width: 'var(--epr-emoji-fullsize)'
+          width: 'var(--epr-emoji-fullsize)',
         }}
       />
     </div>

package/src/components/context/ElementRefContext.tsx

@@ -4,7 +4,7 @@ import { focusElement } from '../../DomUtils/focusElement';
 import { NullableElement } from '../../DomUtils/selectors';
 
 export function ElementRefContextProvider({
-  children
+  children,
 }: {
   children: React.ReactNode;
 }) {
@@ -29,7 +29,7 @@ export function ElementRefContextProvider({
         SearchInputRef,
         SkinTonePickerRef,
         VariationPickerRef,
-        ReactionsRef
+        ReactionsRef,
       }}
     >
       {children}
@@ -37,9 +37,8 @@ export function ElementRefContextProvider({
   );
 }
 
-export type ElementRef<
-  E extends HTMLElement = HTMLElement
-> = React.MutableRefObject<E | null>;
+export type ElementRef<E extends HTMLElement = HTMLElement> =
+  React.MutableRefObject<E | null>;
 
 type ElementRefs = {
   PickerMainRef: ElementRef;
@@ -62,7 +61,7 @@ const ElementRefContext = React.createContext<ElementRefs>({
   SearchInputRef: React.createRef(),
   SkinTonePickerRef: React.createRef(),
   VariationPickerRef: React.createRef(),
-  ReactionsRef: React.createRef()
+  ReactionsRef: React.createRef(),
 });
 
 function useElementRef() {

package/src/components/context/PickerConfigContext.tsx

@@ -5,7 +5,7 @@ import {
   basePickerConfig,
   mergeConfig,
   PickerConfig,
-  PickerConfigInternal
+  PickerConfigInternal,
 } from '../../config/config';
 
 type Props = PickerConfig &
@@ -13,9 +13,8 @@ type Props = PickerConfig &
     children: React.ReactNode;
   }>;
 
-const ConfigContext = React.createContext<PickerConfigInternal>(
-  basePickerConfig()
-);
+const ConfigContext =
+  React.createContext<PickerConfigInternal>(basePickerConfig());
 
 export function PickerConfigProvider({ children, ...config }: Props) {
   const mergedConfig = useSetConfig(config);
@@ -29,7 +28,7 @@ export function PickerConfigProvider({ children, ...config }: Props) {
 
 export function useSetConfig(config: PickerConfig) {
   const [mergedConfig, setMergedConfig] = React.useState(() =>
-    mergeConfig(config)
+    mergeConfig(config),
   );
 
   React.useEffect(() => {
@@ -60,7 +59,7 @@ export function useSetConfig(config: PickerConfig) {
     config.searchDisabled,
     config.skinTonePickerLocation,
     config.allowExpandReactions,
-    config.emojiData
+    config.emojiData,
   ]);
 
   return mergedConfig;

package/src/components/context/PickerContext.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 
 import {
   useDefaultSkinToneConfig,
-  useReactionsOpenConfig
+  useReactionsOpenConfig,
 } from '../../config/useConfig';
 import { DataEmoji } from '../../dataUtils/DataTypes';
 import { useDebouncedState } from '../../hooks/useDebouncedState';
@@ -11,6 +11,7 @@ import { useDisallowedEmojis } from '../../hooks/useDisallowedEmojis';
 import { FilterDict } from '../../hooks/useFilter';
 import { useMarkInitialLoad } from '../../hooks/useInitialLoad';
 import { SkinTones } from '../../types/exposedTypes';
+
 import { usePickerDataContext } from './PickerDataContext';
 
 export function PickerContextProvider({ children }: Props) {
@@ -27,9 +28,8 @@ export function PickerContextProvider({ children }: Props) {
   }, [searchIndex]);
   const disallowClickRef = React.useRef<boolean>(false);
   const disallowMouseRef = React.useRef<boolean>(false);
-  const disallowedEmojisRef = React.useRef<Record<string, boolean>>(
-    disallowedEmojis
-  );
+  const disallowedEmojisRef =
+    React.useRef<Record<string, boolean>>(disallowedEmojis);
 
   const suggestedUpdateState = useDebouncedState(Date.now(), 200);
   const searchTerm = useDebouncedState('', 100);
@@ -62,7 +62,7 @@ export function PickerContextProvider({ children }: Props) {
         suggestedUpdateState,
         reactionsModeState,
         visibleCategoriesState,
-        emojiSizeState
+        emojiSizeState,
       }}
     >
       {children}
@@ -103,7 +103,7 @@ const PickerContext = React.createContext<{
   suggestedUpdateState: [Date.now(), () => {}],
   reactionsModeState: [false, () => {}],
   visibleCategoriesState: [[], () => []],
-  emojiSizeState: [null, () => {}]
+  emojiSizeState: [null, () => {}],
 });
 
 type Props = Readonly<{
@@ -137,7 +137,7 @@ export function useSearchTermState() {
 
 export function useActiveSkinToneState(): [
   SkinTones,
-  (skinTone: SkinTones) => void
+  (skinTone: SkinTones) => void,
 ] {
   const { activeSkinTone } = React.useContext(PickerContext);
   return activeSkinTone;
@@ -186,7 +186,7 @@ export function useUpdateSuggested(): [number, () => void] {
     suggestedUpdated,
     function updateSuggested() {
       setsuggestedUpdate(Date.now());
-    }
+    },
   ];
 }
 

package/src/components/context/PickerDataContext.tsx

@@ -3,13 +3,13 @@ import React from 'react';
 import { CustomEmoji } from '../../config/customEmojiConfig';
 import { useSuggestedEmojisModeConfig } from '../../config/useConfig';
 import defaultEmojiData from '../../data/emojis';
-
 import {
   DataEmoji,
   DataEmojis,
   EmojiProperties,
   EmojiProperties as Keys,
 } from '../../dataUtils/DataTypes';
+import { emojiByUnified } from '../../dataUtils/emojiSelectors';
 import {
   activeVariationFromUnified,
   unifiedWithoutSkinTone,
@@ -19,7 +19,6 @@ import { Categories, EmojiData, SkinTones } from '../../types/exposedTypes';
 
 import { usePickerConfig } from './PickerConfigContext';
 import { useUpdateSuggested } from './PickerContext';
-import { emojiByUnified } from '../../dataUtils/emojiSelectors';
 
 export interface PickerDataContextValue {
   emojiData: EmojiData;
@@ -35,7 +34,7 @@ const PickerDataContext = React.createContext<PickerDataContextValue>({
   allEmojis: [],
   allEmojisByUnified: {},
   searchIndex: {},
-  emojiByUnified: emojiByUnified,
+  emojiByUnified,
   activeVariationFromUnified: () => null,
 });
 

package/src/components/emoji/ClickableEmojiButton.tsx

@@ -5,7 +5,7 @@ import { ClassNames } from '../../DomUtils/classNames';
 import {
   commonInteractionStyles,
   commonStyles,
-  stylesheet
+  stylesheet,
 } from '../../Stylesheet/stylesheet';
 import { Button } from '../atoms/Button';
 
@@ -32,7 +32,7 @@ export function ClickableEmojiButton({
   children,
   className,
   noBackground = false,
-  style
+  style,
 }: ClickableEmojiButtonProps) {
   return (
     <Button
@@ -41,11 +41,11 @@ export function ClickableEmojiButton({
         hidden && commonStyles.hidden,
         hiddenOnSearch && commonInteractionStyles.hiddenOnSearch,
         {
-          [ClassNames.visible]: !hidden && !hiddenOnSearch
+          [ClassNames.visible]: !hidden && !hiddenOnSearch,
         },
         !!(hasVariations && showVariations) && styles.hasVariations,
         noBackground && styles.noBackground,
-        className
+        className,
       )}
       data-unified={unified}
       aria-label={getAriaLabel(emojiNames)}
@@ -77,22 +77,22 @@ const styles = stylesheet.create({
     overflow: 'hidden',
     transition: 'background-color 0.2s',
     ':hover': {
-      backgroundColor: 'var(--epr-emoji-hover-color)'
+      backgroundColor: 'var(--epr-emoji-hover-color)',
     },
     ':focus': {
-      backgroundColor: 'var(--epr-focus-bg-color)'
-    }
+      backgroundColor: 'var(--epr-focus-bg-color)',
+    },
   },
   noBackground: {
     background: 'none',
     ':hover': {
       backgroundColor: 'transparent',
-      background: 'none'
+      background: 'none',
     },
     ':focus': {
       backgroundColor: 'transparent',
-      background: 'none'
-    }
+      background: 'none',
+    },
   },
   hasVariations: {
     '.': ClassNames.emojiHasVariations,
@@ -108,10 +108,11 @@ const styles = stylesheet.create({
       borderRight: '4px solid transparent',
       transform: 'rotate(135deg)',
       borderBottom: '4px solid var(--epr-emoji-variation-indicator-color)',
-      zIndex: 'var(--epr-emoji-variations-indictator-z-index)'
+      zIndex: 'var(--epr-emoji-variations-indictator-z-index)',
     },
     ':hover:after': {
-      borderBottom: '4px solid var(--epr-emoji-variation-indicator-color-hover)'
-    }
-  }
+      borderBottom:
+        '4px solid var(--epr-emoji-variation-indicator-color-hover)',
+    },
+  },
 });

package/src/components/emoji/Emoji.tsx

@@ -31,7 +31,7 @@ export function ClickableEmoji({
   getEmojiUrl,
   className,
   noBackground = false,
-  style
+  style,
 }: ClickableEmojiProps) {
   const hasVariations = emojiHasVariations(emoji);
 

package/src/components/emoji/EmojiImg.tsx

@@ -12,21 +12,26 @@ export function EmojiImg({
   lazyLoad = false,
   imgUrl,
   onError,
-  className
+  className,
 }: {
   emojiName: string;
   emojiStyle: EmojiStyle;
   style: React.CSSProperties;
   lazyLoad?: boolean;
   imgUrl: string;
-    onError: () => void;
+  onError: () => void;
   className?: string;
 }) {
   return (
     <img
       src={imgUrl}
       alt={emojiName}
-      className={cx(styles.emojiImag, emojiStyles.external, emojiStyles.common, className)}
+      className={cx(
+        styles.emojiImag,
+        emojiStyles.external,
+        emojiStyles.common,
+        className,
+      )}
       loading={lazyLoad ? 'lazy' : 'eager'}
       onError={onError}
       style={style}
@@ -41,6 +46,6 @@ const styles = stylesheet.create({
     maxHeight: 'var(--epr-emoji-fullsize)',
     minWidth: 'var(--epr-emoji-fullsize)',
     minHeight: 'var(--epr-emoji-fullsize)',
-    padding: 'var(--epr-emoji-padding)'
-  }
+    padding: 'var(--epr-emoji-padding)',
+  },
 });

package/src/components/emoji/ExportedEmoji.tsx

@@ -11,7 +11,7 @@ export function ExportedEmoji({
   emojiStyle = EmojiStyle.APPLE,
   lazyLoad = false,
   getEmojiUrl,
-  emojiUrl
+  emojiUrl,
 }: {
   unified: string;
   emojiStyle?: EmojiStyle;

package/src/components/emoji/NativeEmoji.tsx

@@ -9,7 +9,7 @@ import { emojiStyles } from './emojiStyles';
 export function NativeEmoji({
   unified,
   style,
-  className
+  className,
 }: {
   unified: string;
   style: React.CSSProperties;
@@ -21,7 +21,7 @@ export function NativeEmoji({
         styles.nativeEmoji,
         emojiStyles.common,
         emojiStyles.external,
-        className
+        className,
       )}
       data-unified={unified}
       style={style}
@@ -43,6 +43,6 @@ const styles = stylesheet.create({
     alignSelf: 'center',
     justifySelf: 'center',
     letterSpacing: '0',
-    padding: 'var(--epr-emoji-padding)'
-  }
+    padding: 'var(--epr-emoji-padding)',
+  },
 });

package/src/components/emoji/ViewOnlyEmoji.tsx

@@ -4,7 +4,6 @@ import { emojiName, emojiUrlByUnified } from '../../dataUtils/emojiUtils';
 import { isCustomEmoji } from '../../typeRefinements/typeRefinements';
 import { EmojiStyle } from '../../types/exposedTypes';
 import { useEmojisThatFailedToLoadState } from '../context/PickerContext';
-
 import { usePickerDataContext } from '../context/PickerDataContext';
 
 import { BaseEmojiProps } from './BaseEmojiProps';
@@ -18,7 +17,7 @@ export function ViewOnlyEmoji({
   size,
   lazyLoad,
   getEmojiUrl = emojiUrlByUnified,
-  className
+  className,
 }: BaseEmojiProps) {
   const [, setEmojisThatFailedToLoad] = useEmojisThatFailedToLoadState();
   const { emojiByUnified } = usePickerDataContext();
@@ -67,6 +66,6 @@ export function ViewOnlyEmoji({
   );
 
   function onError() {
-    setEmojisThatFailedToLoad(prev => new Set(prev).add(unified));
+    setEmojisThatFailedToLoad((prev) => new Set(prev).add(unified));
   }
 }

package/src/components/emoji/emojiStyles.ts

@@ -4,11 +4,11 @@ import { stylesheet } from '../../Stylesheet/stylesheet';
 export const emojiStyles = stylesheet.create({
   external: {
     '.': ClassNames.external,
-    fontSize: '0'
+    fontSize: '0',
   },
   common: {
     alignSelf: 'center',
     justifySelf: 'center',
-    display: 'block'
-  }
+    display: 'block',
+  },
 });

package/src/components/footer/Preview.tsx

@@ -4,12 +4,12 @@ import { useState } from 'react';
 
 import {
   commonInteractionStyles,
-  stylesheet
+  stylesheet,
 } from '../../Stylesheet/stylesheet';
 import {
   useEmojiStyleConfig,
   useGetEmojiUrlConfig,
-  usePreviewConfig
+  usePreviewConfig,
 } from '../../config/useConfig';
 import { emojiName, emojiUnified } from '../../dataUtils/emojiSelectors';
 import { useEmojiPreviewEvents } from '../../hooks/useEmojiPreviewEvents';
@@ -18,7 +18,7 @@ import Flex from '../Layout/Flex';
 import Space from '../Layout/Space';
 import {
   useEmojiVariationPickerState,
-  useReactionsModeState
+  useReactionsModeState,
 } from '../context/PickerContext';
 import { usePickerDataContext } from '../context/PickerDataContext';
 import { ViewOnlyEmoji } from '../emoji/ViewOnlyEmoji';
@@ -38,7 +38,7 @@ export function Preview() {
       className={cx(
         styles.preview,
         commonInteractionStyles.hiddenOnReactions,
-        reactionsOpen && styles.hideOnReactions
+        reactionsOpen && styles.hideOnReactions,
       )}
     >
       <PreviewBody />
@@ -61,7 +61,7 @@ export function PreviewBody() {
   const emoji = emojiByUnified(
     (previewEmoji?.unified ?? previewEmoji?.originalUnified) as
       | string
-      | undefined
+      | undefined,
   );
 
   const show = emoji != null && previewEmoji != null;
@@ -121,19 +121,19 @@ const styles = stylesheet.create({
     height: 'var(--epr-preview-height)',
     padding: '0 var(--epr-horizontal-padding)',
     position: 'relative',
-    zIndex: 'var(--epr-preview-z-index)'
+    zIndex: 'var(--epr-preview-z-index)',
   },
   label: {
     color: 'var(--epr-preview-text-color)',
     fontSize: 'var(--epr-preview-text-size)',
     padding: 'var(--epr-preview-text-padding)',
-    textTransform: 'capitalize'
+    textTransform: 'capitalize',
   },
   emoji: {
-    padding: '0'
+    padding: '0',
   },
   hideOnReactions: {
     opacity: '0',
-    transition: 'opacity 0.5s ease-in-out'
-  }
+    transition: 'opacity 0.5s ease-in-out',
+  },
 });