emoji-picker-react 4.22.3 → 5.0.0

package/src/components/body/EmojiVariationPicker.tsx

@@ -5,6 +5,7 @@ import { cx } from 'shipstyles';
 import { ClassNames } from '../../DomUtils/classNames';
 import { focusFirstVisibleEmoji } from '../../DomUtils/keyboardNavigation';
 import {
+  allUnifiedFromEmojiElement,
   buttonFromTarget,
   elementHeight,
   emojiTrueOffsetTop,
@@ -20,16 +21,21 @@ import {
   emojiUnified,
   emojiVariations,
 } from '../../dataUtils/emojiUtils';
+import { useIsEmojiDisallowed } from '../../hooks/useDisallowedEmojis';
+import { useDefaultAppearance } from '../../primitives/appearance';
+import { EmojiStyle } from '../../types/exposedTypes';
 import {
   useAnchoredEmojiRef,
   useBodyRef,
   useSetAnchoredEmojiRef,
   useVariationPickerRef,
 } from '../context/ElementRefContext';
-import { useEmojiVariationPickerState } from '../context/PickerContext';
+import {
+  useEmojiVariationPickerState,
+  useRequestNativeProbe,
+} from '../context/PickerContext';
 import { ClickableEmoji } from '../emoji/Emoji';
-
-import SVGTriangle from './svg/triangle.svg';
+import { TRIANGLE_ICON as SVGTriangle } from '../icons/svgIcons';
 
 enum Direction {
   Up,
@@ -38,10 +44,12 @@ enum Direction {
 
 // eslint-disable-next-line complexity
 export function EmojiVariationPicker() {
+  const appearance = useDefaultAppearance();
   const AnchoredEmojiRef = useAnchoredEmojiRef();
   const VariationPickerRef = useVariationPickerRef();
   const [emoji] = useEmojiVariationPickerState();
   const emojiStyle = useEmojiStyleConfig();
+  const isEmojiDisallowed = useIsEmojiDisallowed();
 
   const { getTop, getMenuDirection } =
     useVariationPickerTop(VariationPickerRef);
@@ -54,6 +62,11 @@ export function EmojiVariationPicker() {
   const visible = Boolean(
     emoji &&
     button &&
+    (emojiStyle !== EmojiStyle.NATIVE ||
+      !isEmojiDisallowed(
+        emoji,
+        allUnifiedFromEmojiElement(button).unified ?? undefined,
+      )) &&
     emojiHasVariations(emoji) &&
     button.classList.contains(ClassNames.emojiHasVariations),
   );
@@ -66,6 +79,14 @@ export function EmojiVariationPicker() {
     focusFirstVisibleEmoji(VariationPickerRef.current);
   }, [VariationPickerRef, visible, AnchoredEmojiRef]);
 
+  // Tones are checked when the menu opens, not for every grid cell.
+  const requestNativeProbe = useRequestNativeProbe();
+  useEffect(() => {
+    if (visible && emoji) {
+      requestNativeProbe([emojiUnified(emoji)].concat(emojiVariations(emoji)));
+    }
+  }, [requestNativeProbe, visible, emoji]);
+
   let top, pointerStyle;
 
   if (!visible && AnchoredEmojiRef.current) {
@@ -78,17 +99,19 @@ export function EmojiVariationPicker() {
   return (
     <div
       ref={VariationPickerRef}
-      className={cx(
-        styles.variationPicker,
-        getMenuDirection() === Direction.Down && styles.pointingUp,
-        visible && styles.visible,
-      )}
+      data-epr-part="variation-picker"
+      className={variationClassName(appearance, visible, getMenuDirection())}
       style={{ top }}
     >
       {visible && emoji
         ? [emojiUnified(emoji)]
             .concat(emojiVariations(emoji))
             .slice(0, 6)
+            .filter(
+              (unified) =>
+                emojiStyle !== EmojiStyle.NATIVE ||
+                !isEmojiDisallowed(emoji, unified),
+            )
             .map((unified) => (
               <ClickableEmoji
                 key={unified}
@@ -100,12 +123,30 @@ export function EmojiVariationPicker() {
               />
             ))
         : null}
-      <div className={cx(styles.pointer)} style={pointerStyle} />
+      {appearance && (
+        <div className={cx(styles.pointer)} style={pointerStyle} />
+      )}
     </div>
   );
 }
 
-function usePointerStyle(VariationPickerRef: React.RefObject<HTMLElement>) {
+function variationClassName(
+  appearance: boolean,
+  visible: boolean,
+  direction: Direction,
+) {
+  return cx(
+    styles.geometry,
+    appearance && styles.variationPicker,
+    appearance && direction === Direction.Down && styles.pointingUp,
+    visible && styles.visibleGeometry,
+    appearance && visible && styles.visible,
+  );
+}
+
+function usePointerStyle(
+  VariationPickerRef: React.RefObject<HTMLElement | null>,
+) {
   const AnchoredEmojiRef = useAnchoredEmojiRef();
   return function getPointerStyle() {
     const style: React.CSSProperties = {};
@@ -131,7 +172,7 @@ function usePointerStyle(VariationPickerRef: React.RefObject<HTMLElement>) {
 }
 
 function useVariationPickerTop(
-  VariationPickerRef: React.RefObject<HTMLElement>,
+  VariationPickerRef: React.RefObject<HTMLElement | null>,
 ) {
   const AnchoredEmojiRef = useAnchoredEmojiRef();
   const BodyRef = useBodyRef();
@@ -176,60 +217,66 @@ function useVariationPickerTop(
   }
 }
 
-const styles = stylesheet.create({
-  variationPicker: {
-    '.': ClassNames.variationPicker,
-    position: 'absolute',
-    right: '15px',
-    left: '15px',
-    padding: '5px',
-    boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.2)',
-    borderRadius: '3px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-around',
-    opacity: '0',
-    visibility: 'hidden',
-    pointerEvents: 'none',
-    top: '-100%',
-    border: '1px solid var(--epr-picker-border-color)',
-    height: 'var(--epr-emoji-variation-picker-height)',
-    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',
-  },
-  visible: {
-    opacity: '1',
-    visibility: 'visible',
-    pointerEvents: 'all',
-    transform: 'scale(1)',
-  },
-  pointingUp: {
-    '.': 'pointing-up',
-    transformOrigin: 'center 0%',
-    transform: 'scale(0.9)',
-  },
-  '.pointing-up': {
+const styles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    geometry: {
+      '.': ClassNames.variationPicker,
+      position: 'absolute',
+      right: '15px',
+      left: '15px',
+      padding: '5px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-around',
+      opacity: '0',
+      visibility: 'hidden',
+      pointerEvents: 'none',
+      top: '-100%',
+      height: 'var(--epr-emoji-variation-picker-height)',
+      zIndex: 'var(--epr-skin-variation-picker-z-index)',
+    },
+    variationPicker: {
+      '.': ClassNames.variationPicker,
+      boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.2)',
+      borderRadius: '3px',
+      border: '1px solid var(--epr-picker-border-color)',
+      background: 'var(--epr-emoji-variation-picker-bg-color)',
+      transform: 'scale(0.9)',
+      transition: 'transform 0.1s ease-out, opacity 0.2s ease-out',
+    },
+    visibleGeometry: {
+      opacity: '1',
+      visibility: 'visible',
+      pointerEvents: 'all',
+    },
+    visible: {
+      transform: 'scale(1)',
+    },
+    pointingUp: {
+      '.': 'pointing-up',
+      transformOrigin: 'center 0%',
+      transform: 'scale(0.9)',
+    },
+    '.pointing-up': {
+      pointer: {
+        top: '0',
+        transform: 'rotate(180deg) translateY(100%) translateX(18px)',
+      },
+    },
     pointer: {
-      top: '0',
-      transform: 'rotate(180deg) translateY(100%) translateX(18px)',
+      '.': 'epr-emoji-pointer',
+      content: '',
+      position: 'absolute',
+      width: '25px',
+      height: '15px',
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: '0 0',
+      backgroundSize: '50px 15px',
+      top: '100%',
+      transform: 'translateX(-18px)',
+      backgroundImage: `url("${SVGTriangle}")`,
     },
-  },
-  pointer: {
-    '.': 'epr-emoji-pointer',
-    content: '',
-    position: 'absolute',
-    width: '25px',
-    height: '15px',
-    backgroundRepeat: 'no-repeat',
-    backgroundPosition: '0 0',
-    backgroundSize: '50px 15px',
-    top: '100%',
-    transform: 'translateX(-18px)',
-    backgroundImage: `url(${SVGTriangle})`,
-  },
-  ...darkMode('pointer', {
-    backgroundPosition: '-25px 0',
-  }),
-});
+    ...darkMode('pointer', {
+      backgroundPosition: '-25px 0',
+    }),
+  }))();

package/src/components/body/MeasureEmoji.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { elementBorderBoxHeight } from '../../DomUtils/selectors';
 import {
   categoryFromCategoryConfig,
   customGroupFromCategoryConfig,
@@ -31,7 +32,12 @@ export function MeasureEmoji() {
 
   useIsomorphicLayoutEffect(() => {
     if (ref.current) {
-      setEmojiSize(ref.current.clientHeight);
+      // Measure the button itself: the wrapper collapses to zero height
+      // because its only child is absolutely positioned, which would
+      // report 0 forever and keep this measurer mounted (navigation
+      // invalidation and stray-node costs on every render).
+      const button = ref.current.querySelector('button');
+      setEmojiSize(elementBorderBoxHeight(button) || ref.current.clientHeight);
     }
   });
 
@@ -53,7 +59,7 @@ export function MeasureEmoji() {
   }
 
   return (
-    <div ref={ref}>
+    <div ref={ref} aria-hidden="true">
       <ClickableEmoji
         emoji={dummyEmoji}
         unified={unified}
@@ -62,6 +68,7 @@ export function MeasureEmoji() {
         lazyLoad={lazyLoadEmojis}
         showVariations={false}
         hidden={false}
+        tabIndex={-1}
         style={{
           opacity: 0,
           pointerEvents: 'none',

package/src/components/body/listComponents.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+
+import { DataEmoji } from '../../dataUtils/DataTypes';
+import { emojiNames, emojiHasVariations } from '../../dataUtils/emojiUtils';
+import { parseNativeEmoji } from '../../dataUtils/parseNativeEmoji';
+import { isCustomEmoji } from '../../typeRefinements/typeRefinements';
+import { EmojiStyle, EmojiStyleValue } from '../../types/exposedTypes';
+
+/** The emoji a custom `Emoji` cell renders. */
+export type ListEmoji = {
+  /** True while hovered or keyboard-focused. */
+  isActive: boolean;
+  /** Unified code including the active skin tone, e.g. `1f44d-1f3fd`. */
+  unified: string;
+  names: string[];
+  /** Native emoji text (custom emojis: their id). */
+  emoji: string;
+  isCustom: boolean;
+  /** Active image style URL, or undefined for standard native emojis. */
+  imageUrl?: string;
+  /** Whether a long press opens skin tone variations. */
+  hasVariations: boolean;
+};
+
+/**
+ * Props for a custom emoji cell. Spread everything except `emoji` onto a
+ * `<button>`: the library-owned attributes (type, class, position style,
+ * tabIndex, aria-label, data-epr-*) carry selection, keyboard navigation,
+ * virtualization and accessibility. `children` is the default glyph/image;
+ * render it or your own content.
+ */
+export type EmojiRenderProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  emoji: ListEmoji;
+  children: React.ReactNode;
+};
+
+/**
+ * Props for a custom category header. Spread everything except `category`
+ * onto the header element; it stays sticky and measured.
+ */
+export type CategoryHeaderRenderProps = React.HTMLAttributes<HTMLElement> & {
+  category: { id: string; name: string };
+  children: React.ReactNode;
+};
+
+export type ListComponents = {
+  Emoji?: React.ComponentType<EmojiRenderProps>;
+  CategoryHeader?: React.ComponentType<CategoryHeaderRenderProps>;
+};
+
+const NO_COMPONENTS: ListComponents = {};
+
+export const ListComponentsContext =
+  /* @__PURE__ */ React.createContext<ListComponents>(NO_COMPONENTS);
+
+export function useListComponents(): ListComponents {
+  return React.useContext(ListComponentsContext);
+}
+
+export function emojiRenderInfo(
+  emoji: DataEmoji,
+  unified: string,
+  emojiStyle: EmojiStyleValue,
+  getEmojiUrl: (unified: string, style: EmojiStyleValue) => string,
+): Omit<ListEmoji, 'isActive'> {
+  const isCustom = isCustomEmoji(emoji);
+  return {
+    unified,
+    names: emojiNames(emoji),
+    emoji: isCustom ? unified : parseNativeEmoji(unified),
+    isCustom,
+    imageUrl: isCustom
+      ? emoji.imgUrl
+      : emojiStyle === EmojiStyle.NATIVE
+        ? undefined
+        : getEmojiUrl(unified, emojiStyle),
+    hasVariations: emojiHasVariations(emoji),
+  };
+}

package/src/components/context/ElementRefContext.tsx

@@ -8,37 +8,43 @@ export function ElementRefContextProvider({
 }: {
   children: React.ReactNode;
 }) {
-  const PickerMainRef = React.useRef<HTMLElement>(null);
-  const AnchoredEmojiRef = React.useRef<HTMLElement>(null);
-  const BodyRef = React.useRef<HTMLDivElement>(null);
-  const EmojiListRef = React.useRef<HTMLUListElement>(null);
-  const SearchInputRef = React.useRef<HTMLInputElement>(null);
-  const SkinTonePickerRef = React.useRef<HTMLDivElement>(null);
-  const CategoryNavigationRef = React.useRef<HTMLDivElement>(null);
-  const VariationPickerRef = React.useRef<HTMLDivElement>(null);
-  const ReactionsRef = React.useRef<HTMLUListElement>(null);
-
+  const [refs] = React.useState(createElementRefs);
   return (
-    <ElementRefContext.Provider
-      value={{
-        AnchoredEmojiRef,
-        BodyRef,
-        EmojiListRef,
-        CategoryNavigationRef,
-        PickerMainRef,
-        SearchInputRef,
-        SkinTonePickerRef,
-        VariationPickerRef,
-        ReactionsRef,
-      }}
-    >
+    <ElementRefContext.Provider value={refs}>
       {children}
     </ElementRefContext.Provider>
   );
 }
 
 export type ElementRef<E extends HTMLElement = HTMLElement> =
-  React.MutableRefObject<E | null>;
+  React.MutableRefObject<E | null> & {
+    subscribe?: (listener: () => void) => () => void;
+  };
+
+// Observe attachment without rerendering ref consumers. Root services follow
+// conditional parts, native element replacements and remounts.
+function createElementRef<E extends HTMLElement>(): ElementRef<E> {
+  let current: E | null = null;
+  const listeners = new Set<() => void>();
+  const ref = {} as ElementRef<E>;
+  Object.defineProperty(ref, 'current', {
+    configurable: false,
+    enumerable: true,
+    get: () => current,
+    set: (element: E | null) => {
+      if (element === current) return;
+      current = element;
+      listeners.forEach((listener) => listener());
+    },
+  });
+  ref.subscribe = (listener: () => void) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+  };
+  return ref;
+}
 
 type ElementRefs = {
   PickerMainRef: ElementRef;
@@ -52,17 +58,22 @@ type ElementRefs = {
   ReactionsRef: ElementRef<HTMLUListElement>;
 };
 
-const ElementRefContext = React.createContext<ElementRefs>({
-  AnchoredEmojiRef: React.createRef(),
-  BodyRef: React.createRef(),
-  CategoryNavigationRef: React.createRef(),
-  EmojiListRef: React.createRef(),
-  PickerMainRef: React.createRef(),
-  SearchInputRef: React.createRef(),
-  SkinTonePickerRef: React.createRef(),
-  VariationPickerRef: React.createRef(),
-  ReactionsRef: React.createRef(),
-});
+function createElementRefs(): ElementRefs {
+  return {
+    PickerMainRef: createElementRef(),
+    AnchoredEmojiRef: createElementRef(),
+    BodyRef: createElementRef<HTMLDivElement>(),
+    EmojiListRef: createElementRef<HTMLUListElement>(),
+    SearchInputRef: createElementRef<HTMLInputElement>(),
+    SkinTonePickerRef: createElementRef<HTMLDivElement>(),
+    CategoryNavigationRef: createElementRef<HTMLDivElement>(),
+    VariationPickerRef: createElementRef<HTMLDivElement>(),
+    ReactionsRef: createElementRef<HTMLUListElement>(),
+  };
+}
+
+const ElementRefContext =
+  /* @__PURE__ */ React.createContext<ElementRefs>(createElementRefs());
 
 function useElementRef() {
   return React.useContext(ElementRefContext);

package/src/components/context/PickerConfigContext.tsx

@@ -14,59 +14,74 @@ type Props = PickerConfig &
   }>;
 
 const ConfigContext =
-  React.createContext<PickerConfigInternal>(basePickerConfig());
+  /* @__PURE__ */ React.createContext<PickerConfigInternal>(basePickerConfig());
+
+type SearchSlice = {
+  searchValue: string | undefined;
+  defaultSearchValue: string | undefined;
+};
+
+const SearchConfigContext = /* @__PURE__ */ React.createContext<SearchSlice>({
+  searchValue: undefined,
+  defaultSearchValue: undefined,
+});
 
 export function PickerConfigProvider({ children, ...config }: Props) {
   const mergedConfig = useSetConfig(config);
+  // Hot per-keystroke values bypass the merged config: their identity
+  // changes only when the values change, so typing never rebuilds or
+  // rebroadcasts the merged configuration.
+  const searchSlice = React.useMemo<SearchSlice>(
+    () => ({
+      searchValue: config.searchValue,
+      defaultSearchValue: config.defaultSearchValue,
+    }),
+    [config.searchValue, config.defaultSearchValue],
+  );
 
   return (
     <ConfigContext.Provider value={mergedConfig}>
-      {children}
+      <SearchConfigContext.Provider value={searchSlice}>
+        {children}
+      </SearchConfigContext.Provider>
     </ConfigContext.Provider>
   );
 }
 
+export function useSearchSliceConfig(): SearchSlice {
+  return React.useContext(SearchConfigContext);
+}
+
 export function useSetConfig(config: PickerConfig) {
-  const [mergedConfig, setMergedConfig] = React.useState(() =>
-    mergeConfig(config),
-  );
+  const cache = React.useRef<{
+    inputs: PickerConfig;
+    merged: PickerConfigInternal;
+  } | null>(null);
 
-  React.useEffect(() => {
-    if (compareConfig(mergedConfig, config)) {
-      return;
-    }
-    setMergedConfig(mergeConfig(config));
-    // not gonna...
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    // New references rebuild merged categories and data even at equal
-    // length; compareConfig above still gates no-op updates so inline
-    // literals don't loop.
-    config.categories,
-    config.customEmojis,
-    config.open,
-    config.emojiVersion,
-    config.reactionsDefaultOpen,
-    config.searchPlaceHolder,
-    config.searchPlaceholder,
-    config.searchClearButtonLabel,
-    config.defaultSkinTone,
-    config.skinTonesDisabled,
-    config.autoFocusSearch,
-    config.emojiStyle,
-    config.theme,
-    config.suggestedEmojisMode,
-    config.lazyLoadEmojis,
-    config.className,
-    config.height,
-    config.width,
-    config.searchDisabled,
-    config.skinTonePickerLocation,
-    config.allowExpandReactions,
-    config.emojiData,
-  ]);
+  // The search slice travels separately (see above); the merged config
+  // must not rebuild when only it changes.
+  const {
+    searchValue: _searchValue,
+    defaultSearchValue: _defaultSearchValue,
+    ...mainInputs
+  } = config;
+  void _searchValue;
+  void _defaultSearchValue;
 
-  return mergedConfig;
+  // Derived during render with a content comparison, not settled in a
+  // trailing effect: consumers observe prop changes in the same commit,
+  // with no extra render pass and no cycle of lag. The derivation is
+  // idempotent (same inputs always rebuild identically), so a discarded
+  // concurrent render simply recomputes on the next pass. Inline
+  // literals with equal contents still reuse the cached merge via the
+  // structural comparison, as before.
+  const cached = cache.current;
+  if (!cached || !compareConfig(cached.inputs, mainInputs)) {
+    const merged = mergeConfig(mainInputs);
+    cache.current = { inputs: mainInputs, merged };
+    return merged;
+  }
+  return cached.merged;
 }
 
 export function usePickerConfig() {