emoji-picker-react 4.22.3 → 5.0.1

package/src/components/emoji/ExportedEmoji.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
-import { EmojiStyle } from '../../types/exposedTypes';
+import { resolveEmojiStyle } from '../../config/config';
+import { EmojiStyleValue } from '../../types/exposedTypes';
 
 import { GetEmojiUrl } from './BaseEmojiProps';
 import { ViewOnlyEmoji } from './ViewOnlyEmoji';
@@ -8,13 +9,13 @@ import { ViewOnlyEmoji } from './ViewOnlyEmoji';
 export function ExportedEmoji({
   unified,
   size = 32,
-  emojiStyle = EmojiStyle.APPLE,
+  emojiStyle,
   lazyLoad = false,
   getEmojiUrl,
   emojiUrl,
 }: {
   unified: string;
-  emojiStyle?: EmojiStyle;
+  emojiStyle?: EmojiStyleValue;
   size?: number;
   lazyLoad?: boolean;
   getEmojiUrl?: GetEmojiUrl;
@@ -28,7 +29,7 @@ export function ExportedEmoji({
     <ViewOnlyEmoji
       unified={unified}
       size={size}
-      emojiStyle={emojiStyle}
+      emojiStyle={resolveEmojiStyle(emojiStyle, emojiUrl || getEmojiUrl)}
       lazyLoad={lazyLoad}
       getEmojiUrl={emojiUrl ? () => emojiUrl : getEmojiUrl}
     />

package/src/components/emoji/NativeEmoji.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { cx } from 'shipstyles';
 
 import { stylesheet } from '../../Stylesheet/stylesheet';
+import { DEFAULT_NATIVE_EMOJI_FONT } from '../../dataUtils/nativeEmojiSupport';
 import { parseNativeEmoji } from '../../dataUtils/parseNativeEmoji';
 
 import { emojiStyles } from './emojiStyles';
@@ -26,7 +27,7 @@ export function NativeEmoji({
         styles.nativeEmoji,
         className,
       )}
-      data-unified={unified}
+      data-epr-unified={unified}
       style={style}
     >
       {parseNativeEmoji(unified)}
@@ -34,18 +35,20 @@ export function NativeEmoji({
   );
 }
 
-const styles = stylesheet.create({
-  nativeEmoji: {
-    '.': 'epr-emoji-native',
-    fontFamily:
-      '"Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "EmojiOne Color", "Android Emoji"!important',
-    position: 'relative',
-    lineHeight: '100%',
-    fontSize: 'var(--epr-emoji-size)',
-    textAlign: 'center',
-    alignSelf: 'center',
-    justifySelf: 'center',
-    letterSpacing: '0',
-    padding: 'var(--epr-emoji-padding)',
-  },
-});
+const styles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    nativeEmoji: {
+      '.': 'epr-emoji-native',
+      // Overridable (e.g. with a country-flag polyfill font); native support
+      // detection probes the same variable.
+      fontFamily: `var(--epr-emoji-font-family, ${DEFAULT_NATIVE_EMOJI_FONT})!important`,
+      position: 'relative',
+      lineHeight: '100%',
+      fontSize: 'var(--epr-emoji-size)',
+      textAlign: 'center',
+      alignSelf: 'center',
+      justifySelf: 'center',
+      letterSpacing: '0',
+      padding: 'var(--epr-emoji-padding)',
+    },
+  }))();

package/src/components/emoji/ViewOnlyEmoji.tsx

@@ -1,9 +1,19 @@
 import * as React from 'react';
 
-import { emojiName, emojiUrlByUnified } from '../../dataUtils/emojiUtils';
+import { CustomEmoji } from '../../config/customEmojiConfig';
+import { DataEmoji, EmojiProperties } from '../../dataUtils/DataTypes';
+import {
+  addedIn,
+  emojiName,
+  emojiUrlByUnified,
+} from '../../dataUtils/emojiUtils';
+import { isNativeEmojiSupported } from '../../dataUtils/nativeEmojiSupport';
 import { isCustomEmoji } from '../../typeRefinements/typeRefinements';
 import { EmojiStyle } from '../../types/exposedTypes';
-import { useEmojisThatFailedToLoadState } from '../context/PickerContext';
+import {
+  useEmojisThatFailedToLoadState,
+  useNativeEmojiSupport,
+} from '../context/PickerContext';
 import { usePickerDataContext } from '../context/PickerDataContext';
 
 import { BaseEmojiProps } from './BaseEmojiProps';
@@ -21,10 +31,14 @@ export function ViewOnlyEmoji({
 }: BaseEmojiProps) {
   const [, setEmojisThatFailedToLoad] = useEmojisThatFailedToLoadState();
   const { emojiByUnified } = usePickerDataContext();
+  const nativeSupport = useNativeEmojiSupport();
 
   const style = {} as React.CSSProperties;
   if (size) {
-    style.width = style.height = style.fontSize = `${size}px`;
+    style.width =
+      style.height =
+      style.fontSize =
+        typeof size === 'number' ? `${size}px` : size;
   }
 
   const emojiToRender = emoji ? emoji : emojiByUnified(unified);
@@ -33,39 +47,50 @@ export function ViewOnlyEmoji({
     return null;
   }
 
+  let imageUrl: string;
+  let imageName: string;
+  let imageStyle = emojiStyle;
   if (isCustomEmoji(emojiToRender)) {
-    return (
-      <EmojiImg
-        style={style}
-        emojiName={unified}
-        emojiStyle={EmojiStyle.NATIVE}
-        lazyLoad={lazyLoad}
-        imgUrl={emojiToRender.imgUrl}
-        onError={onError}
-        className={className}
-      />
-    );
+    imageUrl = emojiToRender.imgUrl;
+    // Alternative text is the custom emoji's name, not its id.
+    imageName = customEmojiName(emojiToRender) || unified;
+    imageStyle = EmojiStyle.NATIVE;
+  } else if (emojiStyle === EmojiStyle.NATIVE) {
+    // Also covers managed preview/default glyphs outside the grid.
+    return isNativeEmojiSupported(
+      nativeSupport,
+      unified,
+      addedIn(emojiToRender),
+    ) ? (
+      <NativeEmoji unified={unified} style={style} className={className} />
+    ) : null;
+  } else {
+    imageUrl = getEmojiUrl(unified, emojiStyle);
+    imageName = emojiName(emojiToRender);
   }
 
   return (
-    <>
-      {emojiStyle === EmojiStyle.NATIVE ? (
-        <NativeEmoji unified={unified} style={style} className={className} />
-      ) : (
-        <EmojiImg
-          style={style}
-          emojiName={emojiName(emojiToRender)}
-          emojiStyle={emojiStyle}
-          lazyLoad={lazyLoad}
-          imgUrl={getEmojiUrl(unified, emojiStyle)}
-          onError={onError}
-          className={className}
-        />
-      )}
-    </>
+    <EmojiImg
+      style={style}
+      emojiName={imageName}
+      emojiStyle={imageStyle}
+      lazyLoad={lazyLoad}
+      imgUrl={imageUrl}
+      onError={onError}
+      className={className}
+    />
   );
 
   function onError() {
-    setEmojisThatFailedToLoad((prev) => new Set(prev).add(unified));
+    setEmojisThatFailedToLoad(unified);
   }
 }
+
+// A custom emoji reaches the renderer either as the consumer's `CustomEmoji`
+// (`names`) or as the dataset entry it was converted into (`n`).
+function customEmojiName(emoji: CustomEmoji | DataEmoji): string {
+  return (
+    emojiName(emoji as DataEmoji) ||
+    emojiName({ [EmojiProperties.name]: (emoji as CustomEmoji).names })
+  );
+}

package/src/components/emoji/emojiStyles.ts

@@ -1,14 +1,15 @@
 import { ClassNames } from '../../DomUtils/classNames';
 import { stylesheet } from '../../Stylesheet/stylesheet';
 
-export const emojiStyles = stylesheet.create({
-  external: {
-    '.': ClassNames.external,
-    fontSize: '0',
-  },
-  common: {
-    alignSelf: 'center',
-    justifySelf: 'center',
-    display: 'block',
-  },
-});
+export const emojiStyles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    external: {
+      '.': ClassNames.external,
+      fontSize: '0',
+    },
+    common: {
+      alignSelf: 'center',
+      justifySelf: 'center',
+      display: 'block',
+    },
+  }))();

package/src/components/footer/Preview.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useState } from 'react';
 import { cx } from 'shipstyles';
 
 import {
@@ -12,128 +11,124 @@ import {
   usePreviewConfig,
 } from '../../config/useConfig';
 import { emojiName, emojiUnified } from '../../dataUtils/emojiUtils';
-import { useEmojiPreviewEvents } from '../../hooks/useEmojiPreviewEvents';
-import { useIsSkinToneInPreview } from '../../hooks/useShouldShowSkinTonePicker';
+import { useDefaultAppearance } from '../../primitives/appearance';
 import Flex from '../Layout/Flex';
 import Space from '../Layout/Space';
 import {
+  ActiveEmojiState,
+  useActiveEmojiState,
   useEmojiVariationPickerState,
   useReactionsModeState,
 } from '../context/PickerContext';
 import { usePickerDataContext } from '../context/PickerDataContext';
 import { ViewOnlyEmoji } from '../emoji/ViewOnlyEmoji';
-import { SkinTonePickerMenu } from '../header/SkinTonePicker/SkinTonePicker';
 
-export function Preview() {
-  const previewConfig = usePreviewConfig();
-  const isSkinToneInPreview = useIsSkinToneInPreview();
+export function Preview({ children }: { children?: React.ReactNode }) {
+  const appearance = useDefaultAppearance();
   const [reactionsOpen] = useReactionsModeState();
 
-  if (!previewConfig.showPreview) {
-    return null;
-  }
-
   return (
     <Flex
       className={cx(
-        styles.preview,
-        commonInteractionStyles.hiddenOnReactions,
-        reactionsOpen && styles.hideOnReactions,
+        styles.previewGeometry,
+        appearance && styles.preview,
+        appearance && commonInteractionStyles.hiddenOnReactions,
+        appearance && reactionsOpen && styles.hideOnReactions,
       )}
     >
       <PreviewBody />
       <Space />
-      {isSkinToneInPreview ? <SkinTonePickerMenu /> : null}
+      {children}
     </Flex>
   );
 }
 
 export function PreviewBody() {
+  const appearance = useDefaultAppearance();
   const previewConfig = usePreviewConfig();
-  const [previewEmoji, setPreviewEmoji] = useState<PreviewEmoji>(null);
+  const [previewEmoji] = useActiveEmojiState();
   const emojiStyle = useEmojiStyleConfig();
   const [variationPickerEmoji] = useEmojiVariationPickerState();
   const getEmojiUrl = useGetEmojiUrlConfig();
   const { emojiByUnified } = usePickerDataContext();
 
-  useEmojiPreviewEvents(previewConfig.showPreview, setPreviewEmoji);
-
-  const emoji = emojiByUnified(
-    (previewEmoji?.unified ?? previewEmoji?.originalUnified) as
-      | string
-      | undefined,
-  );
-
-  const show = emoji != null && previewEmoji != null;
+  const emoji = previewEmoji
+    ? emojiByUnified(previewEmoji.unified || previewEmoji.originalUnified)
+    : undefined;
 
-  return <PreviewContent />;
+  const show = emoji != null;
 
-  function PreviewContent() {
-    const defaultEmoji =
-      variationPickerEmoji ?? emojiByUnified(previewConfig.defaultEmoji);
-    if (!defaultEmoji) {
-      return null;
-    }
-    const defaultText = variationPickerEmoji
-      ? emojiName(variationPickerEmoji)
-      : previewConfig.defaultCaption;
-
-    return (
-      <>
-        <div>
-          {show ? (
-            <ViewOnlyEmoji
-              unified={previewEmoji?.unified as string}
-              emoji={emoji}
-              emojiStyle={emojiStyle}
-              size={45}
-              getEmojiUrl={getEmojiUrl}
-              className={cx(styles.emoji)}
-            />
-          ) : defaultEmoji ? (
-            <ViewOnlyEmoji
-              unified={emojiUnified(defaultEmoji)}
-              emoji={defaultEmoji}
-              emojiStyle={emojiStyle}
-              size={45}
-              getEmojiUrl={getEmojiUrl}
-              className={cx(styles.emoji)}
-            />
-          ) : null}
-        </div>
-        <div className={cx(styles.label)}>
-          {show ? emojiName(emoji) : defaultText}
-        </div>
-      </>
-    );
+  // Rendered inline rather than as a nested component: a component defined
+  // inside render gets a new identity every render, which remounted the
+  // preview (and reloaded its image) on every hover.
+  const defaultEmoji =
+    variationPickerEmoji ?? emojiByUnified(previewConfig.defaultEmoji);
+  if (!defaultEmoji) {
+    return null;
   }
+  const defaultText = variationPickerEmoji
+    ? emojiName(variationPickerEmoji)
+    : previewConfig.defaultCaption;
+
+  return (
+    <>
+      <div>
+        {show ? (
+          <ViewOnlyEmoji
+            unified={previewEmoji?.unified as string}
+            emoji={emoji}
+            emojiStyle={emojiStyle}
+            size={PREVIEW_EMOJI_SIZE}
+            getEmojiUrl={getEmojiUrl}
+            className={cx(styles.emoji)}
+          />
+        ) : (
+          <ViewOnlyEmoji
+            unified={emojiUnified(defaultEmoji)}
+            emoji={defaultEmoji}
+            emojiStyle={emojiStyle}
+            size={PREVIEW_EMOJI_SIZE}
+            getEmojiUrl={getEmojiUrl}
+            className={cx(styles.emoji)}
+          />
+        )}
+      </div>
+      <div className={cx(styles.labelGeometry, appearance && styles.label)}>
+        {show ? emojiName(emoji) : defaultText}
+      </div>
+    </>
+  );
 }
 
-export type PreviewEmoji = null | {
-  unified: string;
-  originalUnified: string;
-};
+export type PreviewEmoji = ActiveEmojiState;
+
+// Tokenized so compact previews can shrink the emoji (default 45px).
+const PREVIEW_EMOJI_SIZE = 'var(--epr-preview-emoji-size)';
 
-const styles = stylesheet.create({
-  preview: {
-    alignItems: 'center',
-    borderTop: '1px solid var(--epr-preview-border-color)',
-    height: 'var(--epr-preview-height)',
-    padding: '0 var(--epr-horizontal-padding)',
-    position: 'relative',
-    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',
-  },
-  emoji: {
-    padding: '0',
-  },
-  hideOnReactions: {
-    opacity: '0',
-    transition: 'opacity 0.5s ease-in-out',
-  },
-});
+const styles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    previewGeometry: {
+      alignItems: 'center',
+      height: 'var(--epr-preview-height)',
+      padding: '0 var(--epr-horizontal-padding)',
+      position: 'relative',
+      zIndex: 'var(--epr-preview-z-index)',
+    },
+    labelGeometry: { padding: 'var(--epr-preview-text-padding)' },
+    preview: {
+      borderTop: '1px solid var(--epr-preview-border-color)',
+      zIndex: 'var(--epr-preview-z-index)',
+    },
+    label: {
+      color: 'var(--epr-preview-text-color)',
+      fontSize: 'var(--epr-preview-text-size)',
+      textTransform: 'capitalize',
+    },
+    emoji: {
+      padding: '0',
+    },
+    hideOnReactions: {
+      opacity: '0',
+      transition: 'opacity 0.5s ease-in-out',
+    },
+  }))();

package/src/components/header/Header.tsx

@@ -2,18 +2,33 @@ import * as React from 'react';
 import { cx } from 'shipstyles';
 
 import { commonInteractionStyles } from '../../Stylesheet/stylesheet';
+import {
+  useSearchDisabledConfig,
+  useSkinTonesDisabledConfig,
+} from '../../config/useConfig';
+import { useIsSkinToneInSearch } from '../../hooks/useShouldShowSkinTonePicker';
+import { CategoryNav, Search, SkinTone } from '../../primitives';
+import { useDefaultAppearance } from '../../primitives/appearance';
 import Relative from '../Layout/Relative';
-import { CategoryNavigation } from '../navigation/CategoryNavigation';
-
-import { SearchContainer } from './Search/Search';
 
+// Default header layout: private appearance/layout wrapper around the
+// public Search and CategoryNav primitives.
 export function Header() {
+  const appearance = useDefaultAppearance();
+  const searchDisabled = useSearchDisabledConfig();
+  const skinTonesDisabled = useSkinTonesDisabledConfig();
+  const toneInSearch = useIsSkinToneInSearch();
   return (
     <Relative
-      className={cx('epr-header', commonInteractionStyles.hiddenOnReactions)}
+      className={cx(
+        'epr-header',
+        appearance && commonInteractionStyles.hiddenOnReactions,
+      )}
     >
-      <SearchContainer />
-      <CategoryNavigation />
+      {!searchDisabled && (
+        <Search>{!skinTonesDisabled && toneInSearch && <SkinTone />}</Search>
+      )}
+      <CategoryNav />
     </Relative>
   );
 }

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

@@ -7,28 +7,39 @@ import {
   stylesheet,
 } from '../../../Stylesheet/stylesheet';
 import { useSearchClearButtonLabelConfig } from '../../../config/useConfig';
-import { useClearSearch } from '../../../hooks/useFilter';
+import { useClearSearchValue } from '../../../hooks/useSearchController';
+import { useDefaultAppearance } from '../../../primitives/appearance';
+import { usePickerComponents } from '../../../primitives/components';
 import { Button } from '../../atoms/Button';
-
-import SVGTimes from './svg/times.svg';
+import { TIMES_ICON as SVGTimes } from '../../icons/svgIcons';
 
 export function BtnClearSearch() {
-  const clearSearch = useClearSearch();
+  const clearSearch = useClearSearchValue();
   const searchClearButtonLabel = useSearchClearButtonLabelConfig();
 
-  return (
-    <Button
-      className={cx(
-        styles.btnClearSearch,
-        commonInteractionStyles.visibleOnSearchOnly,
-      )}
-      onClick={clearSearch}
-      aria-label={searchClearButtonLabel}
-      title={searchClearButtonLabel}
-    >
-      <div className={cx(styles.icnClearnSearch)} />
-    </Button>
-  );
+  const appearance = useDefaultAppearance();
+  const { ClearButton: Custom } = usePickerComponents();
+  const props = {
+    type: 'button' as const,
+    className: cx(
+      styles.geometry,
+      appearance && !Custom && styles.btnClearSearch,
+      commonInteractionStyles.visibleOnSearchOnly,
+    ),
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (!event.defaultPrevented) clearSearch();
+    },
+    'data-epr-part': 'search-clear',
+    'aria-label': searchClearButtonLabel,
+    title: searchClearButtonLabel,
+    children:
+      appearance && !Custom ? (
+        <div className={cx(styles.icnClearnSearch)} />
+      ) : (
+        '×'
+      ),
+  };
+  return Custom ? <Custom {...props} /> : <Button {...props} />;
 }
 
 const HoverDark = {
@@ -39,44 +50,47 @@ const HoverDark = {
   },
 };
 
-const styles = stylesheet.create({
-  btnClearSearch: {
-    '.': 'epr-btn-clear-search',
-    position: 'absolute',
-    right: 'var(--epr-search-bar-inner-padding)',
-    height: '30px',
-    width: '30px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    top: '50%',
-    transform: 'translateY(-50%)',
-    padding: '0',
-    borderRadius: '50%',
-    ':hover': {
-      background: 'var(--epr-hover-bg-color)',
+const styles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    geometry: {
+      position: 'absolute',
+      insetInlineEnd: 'var(--epr-search-bar-inner-padding)',
+      height: '30px',
+      width: '30px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      padding: '0',
     },
-    ':focus': {
-      background: 'var(--epr-hover-bg-color)',
+    btnClearSearch: {
+      '.': 'epr-btn-clear-search',
+      borderRadius: '50%',
+      ':hover': {
+        background: 'var(--epr-hover-bg-color)',
+      },
+      ':focus': {
+        background: 'var(--epr-hover-bg-color)',
+      },
     },
-  },
-  icnClearnSearch: {
-    '.': 'epr-icn-clear-search',
-    backgroundColor: 'transparent',
-    backgroundRepeat: 'no-repeat',
-    backgroundSize: '20px',
-    height: '20px',
-    width: '20px',
-    backgroundImage: `url(${SVGTimes})`,
-    ':hover': {
-      backgroundPositionY: '-20px',
+    icnClearnSearch: {
+      '.': 'epr-icn-clear-search',
+      backgroundColor: 'transparent',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: '20px',
+      height: '20px',
+      width: '20px',
+      backgroundImage: `url("${SVGTimes}")`,
+      ':hover': {
+        backgroundPositionY: '-20px',
+      },
+      ':focus': {
+        backgroundPositionY: '-20px',
+      },
     },
-    ':focus': {
-      backgroundPositionY: '-20px',
-    },
-  },
-  ...darkMode('icnClearnSearch', {
-    backgroundPositionY: '-40px',
-  }),
-  ...darkMode('btnClearSearch', HoverDark),
-});
+    ...darkMode('icnClearnSearch', {
+      backgroundPositionY: '-40px',
+    }),
+    ...darkMode('btnClearSearch', HoverDark),
+  }))();