emoji-picker-react 4.7.16-rc.0 → 4.7.16

package/dist/hooks/useIsEverMounted.d.ts

@@ -0,0 +1 @@
+export declare function useIsEverMounted(): boolean;

package/dist/hooks/useMouseDownHandlers.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
 import { NullableElement } from '../DomUtils/selectors';
-export declare function useMouseDownHandlers(BodyRef: React.MutableRefObject<NullableElement>): void;
+import { MOUSE_EVENT_SOURCE } from '../config/useConfig';
+export declare function useMouseDownHandlers(ContainerRef: React.MutableRefObject<NullableElement>, mouseEventSource: MOUSE_EVENT_SOURCE): void;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.7.16-rc.0",
+  "version": "4.7.16",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -98,6 +98,6 @@
     "rollup-plugin-svg": "^2.0.0"
   },
   "dependencies": {
-    "flairup": "0.0.32"
+    "flairup": "0.0.38"
   }
 }

package/src/DomUtils/detectEmojyPartiallyBelowFold.ts

@@ -0,0 +1,16 @@
+import { NullableElement } from './selectors';
+
+export function detectEmojyPartiallyBelowFold(
+  button: HTMLButtonElement,
+  bodyRef: NullableElement
+): number {
+  if (!button || !bodyRef) {
+    return 0;
+  }
+
+  const buttonRect = button.getBoundingClientRect();
+  const bodyRect = bodyRef.getBoundingClientRect();
+
+  // If the element is obscured by at least half of its size
+  return bodyRect.height - (buttonRect.y - bodyRect.y);
+}

package/src/DomUtils/elementPositionInRow.ts

@@ -1,3 +1,6 @@
+import { DEFAULT_LABEL_HEIGHT } from '../components/main/PickerMain';
+
+import { ClassNames, asSelectors } from './classNames';
 import { NullableElement } from './selectors';
 
 export function elementCountInRow(
@@ -149,10 +152,16 @@ export function firstVisibleElementInContainer(
   const parentTop = parent.getBoundingClientRect().top;
   const parentBottom = parent.getBoundingClientRect().bottom;
 
+  const parentTopWithLabel = parentTop + getLabelHight(parent);
+
   const visibleElements = elements.find(element => {
     const elementTop = element.getBoundingClientRect().top;
     const elementBottom = element.getBoundingClientRect().bottom;
 
+    if (elementTop < parentTopWithLabel) {
+      return false;
+    }
+
     return (
       (elementTop >= parentTop && elementTop <= parentBottom) ||
       (elementBottom >= parentTop && elementBottom <= parentBottom)
@@ -165,3 +174,11 @@ export function firstVisibleElementInContainer(
 export function hasNextElementSibling(element: HTMLElement) {
   return !!element.nextElementSibling;
 }
+
+function getLabelHight(parentNode: HTMLElement) {
+  return (
+    parentNode
+      .querySelector(asSelectors(ClassNames.label))
+      ?.getBoundingClientRect().height ?? DEFAULT_LABEL_HEIGHT /* default */
+  );
+}

package/src/DomUtils/selectors.ts

@@ -166,6 +166,22 @@ export function originalUnifiedFromEmojiElement(
   return null;
 }
 
+export function allUnifiedFromEmojiElement(
+  emoji: NullableElement
+): { unified: string | null; originalUnified: string | null } {
+  if (!emoji) {
+    return {
+      unified: null,
+      originalUnified: null
+    };
+  }
+
+  return {
+    unified: unifiedFromEmojiElement(emoji),
+    originalUnified: originalUnifiedFromEmojiElement(emoji)
+  };
+}
+
 function elementDataSetKey(
   element: NullableElement,
   key: string

package/src/EmojiPickerReact.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { PickerStyleTag } from './Stylesheet/stylesheet';
 import { Reactions } from './components/Reactions/Reactions';
 import { Body } from './components/body/Body';
 import { ElementRefContextProvider } from './components/context/ElementRefContext';
@@ -8,16 +9,17 @@ import { useReactionsModeState } from './components/context/PickerContext';
 import { Preview } from './components/footer/Preview';
 import { Header } from './components/header/Header';
 import PickerMain from './components/main/PickerMain';
+import { compareConfig } from './config/compareConfig';
+import { useOpenConfig } from './config/useConfig';
 
 import { PickerProps } from './index';
 
 function EmojiPicker(props: PickerProps) {
   return (
     <ElementRefContextProvider>
+      <PickerStyleTag />
       <PickerConfigProvider {...props}>
-        <PickerMain>
-          <ContentControl />
-        </PickerMain>
+        <ContentControl />
       </PickerConfigProvider>
     </ElementRefContextProvider>
   );
@@ -26,15 +28,20 @@ function EmojiPicker(props: PickerProps) {
 function ContentControl() {
   const [reactionsDefaultOpen] = useReactionsModeState();
   const [renderAll, setRenderAll] = React.useState(!reactionsDefaultOpen);
+  const isOpen = useOpenConfig();
 
   React.useEffect(() => {
     if (!renderAll) {
       setRenderAll(true);
     }
-  }, []);
+  }, [renderAll]);
+
+  if (!isOpen) {
+    return null;
+  }
 
   return (
-    <>
+    <PickerMain>
       <Reactions />
       {renderAll ? (
         <>
@@ -43,32 +50,9 @@ function ContentControl() {
           <Preview />
         </>
       ) : null}
-    </>
+    </PickerMain>
   );
 }
 
 // eslint-disable-next-line complexity
-export default React.memo(EmojiPicker, (prev, next) => {
-  const prevCustomEmojis = prev.customEmojis ?? [];
-  const nextCustomEmojis = next.customEmojis ?? [];
-  return (
-    prev.emojiVersion === next.emojiVersion &&
-    prev.reactionsDefaultOpen === next.reactionsDefaultOpen &&
-    prev.searchPlaceHolder === next.searchPlaceHolder &&
-    prev.searchPlaceholder === next.searchPlaceholder &&
-    prev.defaultSkinTone === next.defaultSkinTone &&
-    prev.skinTonesDisabled === next.skinTonesDisabled &&
-    prev.autoFocusSearch === next.autoFocusSearch &&
-    prev.emojiStyle === next.emojiStyle &&
-    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
-  );
-});
+export default React.memo(EmojiPicker, compareConfig);

package/src/Stylesheet/stylesheet.tsx

@@ -1,10 +1,9 @@
-import { createSheet } from 'flairup';
+import { Styles, createSheet } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../DomUtils/classNames';
-import { useIsMounted } from '../hooks/useIsMounted';
 
-export const stylesheet = createSheet('epr');
+export const stylesheet = createSheet('epr', null);
 
 const hidden = {
   display: 'none',
@@ -21,20 +20,14 @@ export const commonStyles = stylesheet.create({
   }
 });
 
-export function PickerStyleTag() {
-  const isMounted = useIsMounted();
-
-  if (stylesheet.isApplied() && isMounted) {
-    return null;
-  }
-
+export const PickerStyleTag = React.memo(function PickerStyleTag() {
   return (
     <style
       suppressHydrationWarning
       dangerouslySetInnerHTML={{ __html: stylesheet.getStyle() }}
     />
   );
-}
+});
 
 export const commonInteractionStyles = stylesheet.create({
   '.epr-main': {
@@ -84,3 +77,16 @@ export const commonInteractionStyles = stylesheet.create({
     }
   }
 });
+
+export function darkMode(key: string, value: Styles) {
+  return {
+    '.epr-dark-theme': {
+      [key]: value
+    },
+    '.epr-auto-theme': {
+      [key]: {
+        '@media (prefers-color-scheme: dark)': value
+      }
+    }
+  };
+}

package/src/components/Reactions/BtnPlus.tsx

@@ -1,7 +1,7 @@
 import { cx } from 'flairup';
 import * as React from 'react';
 
-import { stylesheet } from '../../Stylesheet/stylesheet';
+import { darkMode, stylesheet } from '../../Stylesheet/stylesheet';
 import { Button } from '../atoms/Button';
 import { useReactionsModeState } from '../context/PickerContext';
 
@@ -11,6 +11,8 @@ export function BtnPlus() {
   const [, setReactionsMode] = useReactionsModeState();
   return (
     <Button
+      aria-label="Show all Emojis"
+      title="Show all Emojis"
       tabIndex={0}
       className={cx(styles.plusSign)}
       onClick={() => setReactionsMode(false)}
@@ -21,7 +23,7 @@ export function BtnPlus() {
 const styles = stylesheet.create({
   plusSign: {
     fontSize: '20px',
-    padding: '18px',
+    padding: '17px',
     color: 'var(--epr-text-color)',
     borderRadius: '50%',
     textAlign: 'center',
@@ -31,7 +33,7 @@ const styles = stylesheet.create({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    transition: 'background-color 0.1s ease-in-out',
+    transition: 'background-color 0.2s ease-in-out',
     ':after': {
       content: '',
       minWidth: '20px',
@@ -44,7 +46,7 @@ const styles = stylesheet.create({
     },
     ':hover': {
       color: 'var(--epr-highlight-color)',
-      backgroundColor: 'var(--epr-hover-bg-color)',
+      backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
       // @ts-ignore
       ':after': {
         backgroundPositionY: '-20px'
@@ -52,25 +54,15 @@ const styles = stylesheet.create({
     },
     ':focus': {
       color: 'var(--epr-highlight-color)',
-      backgroundColor: 'var(--epr-hover-bg-color)',
+      backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
       // @ts-ignore
       ':after': {
         backgroundPositionY: '-40px'
       }
     }
   },
-  '.epr-dark-theme': {
-    plusSign: {
-      ':after': { backgroundPositionY: '-40px' },
-      ':hover:after': { backgroundPositionY: '-60px' }
-    }
-  },
-  '.epr-auto-theme': {
-    plusSign: {
-      '@media (prefers-color-scheme: dark)': {
-        ':after': { backgroundPositionY: '-40px' },
-        ':hover:after': { backgroundPositionY: '-60px' }
-      }
-    }
-  }
+  ...darkMode('plusSign', {
+    ':after': { backgroundPositionY: '-40px' },
+    ':hover:after': { backgroundPositionY: '-60px' }
+  })
 });

package/src/components/Reactions/Reactions.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 
 import { commonStyles, stylesheet } from '../../Stylesheet/stylesheet';
 import {
+  MOUSE_EVENT_SOURCE,
   useEmojiStyleConfig,
   useReactionsConfig
 } from '../../config/useConfig';
@@ -19,7 +20,7 @@ export function Reactions() {
   const [reactionsOpen] = useReactionsModeState();
   const ReactionsRef = useReactionsRef();
   const reactions = useReactionsConfig();
-  useMouseDownHandlers(ReactionsRef);
+  useMouseDownHandlers(ReactionsRef, MOUSE_EVENT_SOURCE.REACTIONS);
   const emojiStyle = useEmojiStyleConfig();
 
   if (!reactionsOpen) {
@@ -38,7 +39,8 @@ export function Reactions() {
             emojiStyle={emojiStyle}
             unified={reaction}
             showVariations={false}
-            round
+            className={cx(styles.emojiButton)}
+            noBackground
           />
         </li>
       ))}
@@ -58,5 +60,17 @@ const styles = stylesheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     height: '100%'
+  },
+  emojiButton: {
+    ':hover': {
+      transform: 'scale(1.2)'
+    },
+    ':focus': {
+      transform: 'scale(1.2)'
+    },
+    ':active': {
+      transform: 'scale(1.1)'
+    },
+    transition: 'transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5)'
   }
 });

package/src/components/body/Body.tsx

@@ -6,6 +6,7 @@ import {
   commonInteractionStyles,
   stylesheet
 } from '../../Stylesheet/stylesheet';
+import { MOUSE_EVENT_SOURCE } from '../../config/useConfig';
 import { useOnMouseMove } from '../../hooks/useDisallowMouseMove';
 import { useMouseDownHandlers } from '../../hooks/useMouseDownHandlers';
 import { useOnScroll } from '../../hooks/useOnScroll';
@@ -17,7 +18,7 @@ import { EmojiVariationPicker } from './EmojiVariationPicker';
 export function Body() {
   const BodyRef = useBodyRef();
   useOnScroll(BodyRef);
-  useMouseDownHandlers(BodyRef);
+  useMouseDownHandlers(BodyRef, MOUSE_EVENT_SOURCE.PICKER);
   useOnMouseMove();
 
   return (

package/src/components/body/EmojiVariationPicker.tsx

@@ -10,7 +10,7 @@ import {
   emojiTrueOffsetTop,
   emojiTruOffsetLeft
 } from '../../DomUtils/selectors';
-import { stylesheet } from '../../Stylesheet/stylesheet';
+import { darkMode, stylesheet } from '../../Stylesheet/stylesheet';
 import {
   useEmojiStyleConfig,
   useGetEmojiUrlConfig
@@ -230,16 +230,7 @@ const styles = stylesheet.create({
     transform: 'translateX(-18px)',
     backgroundImage: `url(${SVGTriangle})`
   },
-  '.epr-dark-theme': {
-    pointer: {
-      backgroundPosition: '-25px 0'
-    }
-  },
-  '.epr-auto-theme': {
-    pointer: {
-      '@media (prefers-color-scheme: dark)': {
-        backgroundPosition: '-25px 0'
-      }
-    }
-  }
+  ...darkMode('pointer', {
+    backgroundPosition: '-25px 0'
+  })
 });

package/src/components/body/Suggested.tsx

@@ -8,7 +8,7 @@ import {
 } from '../../config/useConfig';
 import { emojiByUnified } from '../../dataUtils/emojiSelectors';
 import { getSuggested } from '../../dataUtils/suggested';
-import { useIsMounted } from '../../hooks/useIsMounted';
+import { useIsEverMounted } from '../../hooks/useIsEverMounted';
 import { useUpdateSuggested } from '../context/PickerContext';
 import { ClickableEmoji } from '../emoji/Emoji';
 
@@ -20,7 +20,7 @@ type Props = Readonly<{
 
 export function Suggested({ categoryConfig }: Props) {
   const [suggestedUpdated] = useUpdateSuggested();
-  const isMounted = useIsMounted();
+  const isMounted = useIsEverMounted();
   const suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
   const getEmojiUrl = useGetEmojiUrlConfig();
   const suggested = React.useMemo(

package/src/components/context/PickerConfigContext.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { compareConfig } from '../../config/compareConfig';
 import {
   basePickerConfig,
   mergeConfig,
@@ -32,12 +33,32 @@ export function useSetConfig(config: PickerConfig) {
   );
 
   React.useEffect(() => {
-    if (config.customEmojis?.length !== mergedConfig.customEmojis?.length) {
-      setMergedConfig(mergeConfig(config));
+    if (compareConfig(mergedConfig, config)) {
+      return;
     }
+    setMergedConfig(mergeConfig(config));
     // not gonna...
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [config.customEmojis?.length]);
+  }, [
+    config.customEmojis?.length,
+    config.open,
+    config.emojiVersion,
+    config.reactionsDefaultOpen,
+    config.searchPlaceHolder,
+    config.searchPlaceholder,
+    config.defaultSkinTone,
+    config.skinTonesDisabled,
+    config.autoFocusSearch,
+    config.emojiStyle,
+    config.theme,
+    config.suggestedEmojisMode,
+    config.lazyLoadEmojis,
+    config.className,
+    config.height,
+    config.width,
+    config.searchDisabled,
+    config.skinTonePickerLocation
+  ]);
 
   return mergedConfig;
 }

package/src/components/emoji/ClickableEmojiButton.tsx

@@ -17,7 +17,8 @@ type ClickableEmojiButtonProps = Readonly<{
   children: React.ReactNode;
   hasVariations: boolean;
   unified?: string;
-  round?: boolean;
+  noBackground?: boolean;
+  className?: string;
 }>;
 
 export function ClickableEmojiButton({
@@ -28,7 +29,8 @@ export function ClickableEmojiButton({
   showVariations = true,
   hasVariations,
   children,
-  round = false
+  className,
+  noBackground = false
 }: ClickableEmojiButtonProps) {
   return (
     <Button
@@ -40,7 +42,8 @@ export function ClickableEmojiButton({
           [ClassNames.visible]: !hidden && !hiddenOnSearch
         },
         !!(hasVariations && showVariations) && styles.hasVariations,
-        round && styles.round
+        noBackground && styles.noBackground,
+        className
       )}
       data-unified={unified}
       aria-label={emojiNames[0]}
@@ -73,8 +76,16 @@ const styles = stylesheet.create({
       backgroundColor: 'var(--epr-focus-bg-color)'
     }
   },
-  round: {
-    borderRadius: '50%'
+  noBackground: {
+    background: 'none',
+    ':hover': {
+      backgroundColor: 'transparent',
+      background: 'none'
+    },
+    ':focus': {
+      backgroundColor: 'transparent',
+      background: 'none'
+    }
   },
   hasVariations: {
     '.': ClassNames.emojiHasVariations,

package/src/components/emoji/Emoji.tsx

@@ -14,7 +14,7 @@ type ClickableEmojiProps = Readonly<
     hiddenOnSearch?: boolean;
     emoji: DataEmoji;
     className?: string;
-    round?: boolean;
+    noBackground?: boolean;
   }
 >;
 
@@ -28,7 +28,8 @@ export function ClickableEmoji({
   size,
   lazyLoad,
   getEmojiUrl,
-  round = false
+  className,
+  noBackground = false
 }: ClickableEmojiProps) {
   const hasVariations = emojiHasVariations(emoji);
 
@@ -40,7 +41,7 @@ export function ClickableEmoji({
       hiddenOnSearch={hiddenOnSearch}
       emojiNames={emojiNames(emoji)}
       unified={unified}
-      round={round}
+      noBackground={noBackground}
     >
       <ViewOnlyEmoji
         unified={unified}
@@ -49,6 +50,7 @@ export function ClickableEmoji({
         emojiStyle={emojiStyle}
         lazyLoad={lazyLoad}
         getEmojiUrl={getEmojiUrl}
+        className={className}
       />
     </ClickableEmojiButton>
   );

package/src/components/header/Search/BtnClearSearch.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 
 import {
   commonInteractionStyles,
+  darkMode,
   stylesheet
 } from '../../../Stylesheet/stylesheet';
 import { useClearSearch } from '../../../hooks/useFilter';
@@ -72,20 +73,8 @@ const styles = stylesheet.create({
       backgroundPositionY: '-20px'
     }
   },
-  '.epr-dark-theme': {
-    icnClearnSearch: {
-      backgroundPositionY: '-40px'
-    },
-    btnClearSearch: HoverDark
-  },
-  '.epr-auto-theme': {
-    icnClearnSearch: {
-      '@media (prefers-color-scheme: dark)': {
-        backgroundPositionY: '-40px'
-      }
-    },
-    btnClearSearch: {
-      '@media (prefers-color-scheme: dark)': HoverDark
-    }
-  }
+  ...darkMode('icnClearnSearch', {
+    backgroundPositionY: '-40px'
+  }),
+  ...darkMode('btnClearSearch', HoverDark)
 });

package/src/components/header/Search/IcnSearch.tsx

@@ -1,7 +1,7 @@
 import { cx } from 'flairup';
 import * as React from 'react';
 
-import { stylesheet } from '../../../Stylesheet/stylesheet';
+import { darkMode, stylesheet } from '../../../Stylesheet/stylesheet';
 
 import SVGMagnifier from './svg/magnifier.svg';
 
@@ -24,16 +24,7 @@ const styles = stylesheet.create({
     backgroundSize: '20px',
     backgroundImage: `url(${SVGMagnifier})`
   },
-  '.epr-dark-theme': {
-    icnSearch: {
-      backgroundPositionY: '-20px'
-    }
-  },
-  '.epr-auto-theme': {
-    icnSearch: {
-      '@media (prefers-color-scheme: dark)': {
-        backgroundPositionY: '-20px'
-      }
-    }
-  }
+  ...darkMode('icnSearch', {
+    backgroundPositionY: '-20px'
+  })
 });

package/src/components/header/Search/Search.tsx

@@ -2,7 +2,7 @@ import { cx } from 'flairup';
 import * as React from 'react';
 import { useState } from 'react';
 
-import { stylesheet } from '../../../Stylesheet/stylesheet';
+import { darkMode, stylesheet } from '../../../Stylesheet/stylesheet';
 import {
   useAutoFocusSearchConfig,
   useSearchDisabledConfig,
@@ -161,29 +161,12 @@ const styles = stylesheet.create({
       backgroundPositionY: '-20px'
     }
   },
-  '.epr-dark-theme': {
-    icnClearnSearch: {
-      backgroundPositionY: '-40px'
-    },
-    btnClearSearch: {
-      ':hover > .epr-icn-clear-search': {
-        backgroundPositionY: '-60px'
-      }
+  ...darkMode('icnClearnSearch', {
+    backgroundPositionY: '-40px'
+  }),
+  ...darkMode('btnClearSearch', {
+    ':hover > .epr-icn-clear-search': {
+      backgroundPositionY: '-60px'
     }
-  },
-  '.epr-auto-theme': {
-    icnClearnSearch: {
-      '@media (prefers-color-scheme: dark)': {
-        backgroundPositionY: '-40px'
-      }
-    },
-    btnClearSearch: {
-      '@media (prefers-color-scheme: dark)': {
-        // @ts-ignore
-        ':hover > .epr-icn-clear-search': {
-          backgroundPositionY: '-60px'
-        }
-      }
-    }
-  }
+  })
 });