emoji-picker-react 4.22.3 → 5.0.1

package/src/components/context/PickerDataContext.tsx

@@ -1,20 +1,27 @@
 import React from 'react';
 
-import { CustomEmoji } from '../../config/customEmojiConfig';
-import { useSuggestedEmojisModeConfig } from '../../config/useConfig';
-import defaultEmojiData from '../../data/emojis';
+import {
+  useSuggestedEmojisConfig,
+  useSuggestedEmojisModeConfig,
+} from '../../config/useConfig';
+import { getPickerDataSnapshot } from '../../data-core/pickerData';
+import { normalizeQuery } from '../../data-core/prepare';
+import { searchEmojis } from '../../data-core/search';
 import {
   DataEmoji,
   DataEmojis,
-  EmojiProperties,
   EmojiProperties as Keys,
 } from '../../dataUtils/DataTypes';
 import { emojiByUnified } from '../../dataUtils/emojiSelectors';
 import {
   activeVariationFromUnified,
+  emojiNames,
   unifiedWithoutSkinTone,
 } from '../../dataUtils/emojiUtils';
 import { getSuggested } from '../../dataUtils/suggested';
+import { resolveSuggestedRenderIds } from '../../dataUtils/suggestedEmojis';
+import { useDataIdentityStabilityWarning } from '../../hooks/useDataIdentityStabilityWarning';
+import type { FilterDict } from '../../hooks/useFilter';
 import { useIsMounted } from '../../hooks/useIsMounted';
 import { Categories, EmojiData, SkinTones } from '../../types/exposedTypes';
 
@@ -25,21 +32,27 @@ export interface PickerDataContextValue {
   emojiData: EmojiData;
   allEmojis: DataEmojis;
   allEmojisByUnified: Record<string, DataEmoji>;
-  searchIndex: Record<string, Record<string, DataEmoji>>;
   customGroups: Record<string, DataEmojis>;
   emojiByUnified: (unified?: string) => DataEmoji | undefined;
   activeVariationFromUnified: (unified: string) => SkinTones | null;
+  /**
+   * Query-to-filter-dict through the single shared prepared core: core
+   * dataset matches mapped back to source records, unioned with the
+   * Root-local custom emojis the core never sees.
+   */
+  queryFilterDict: (query: string) => FilterDict;
 }
 
-const PickerDataContext = React.createContext<PickerDataContextValue>({
-  emojiData: {} as EmojiData,
-  allEmojis: [],
-  allEmojisByUnified: Object.create(null),
-  searchIndex: Object.create(null),
-  customGroups: Object.create(null),
-  emojiByUnified,
-  activeVariationFromUnified: () => null,
-});
+const PickerDataContext =
+  /* @__PURE__ */ React.createContext<PickerDataContextValue>({
+    emojiData: {} as EmojiData,
+    allEmojis: [],
+    allEmojisByUnified: Object.create(null),
+    customGroups: Object.create(null),
+    emojiByUnified,
+    activeVariationFromUnified: () => null,
+    queryFilterDict: () => ({}),
+  });
 
 export function PickerDataProvider({
   children,
@@ -48,72 +61,17 @@ export function PickerDataProvider({
 }) {
   const { customEmojis, emojiData: genericEmojiData } = usePickerConfig();
 
-  const data = React.useMemo(() => {
-    const emojiData = genericEmojiData || (defaultEmojiData as EmojiData);
-
-    // Clone to avoid mutation of shared source
-    const newData: EmojiData = JSON.parse(JSON.stringify(emojiData));
-
-    // Group names and emoji ids are user-controlled strings: use
-    // null-prototype dictionaries so names like `__proto__` behave as
-    // ordinary data instead of resolving Object.prototype members.
-    const customGroups: Record<string, DataEmojis> = Object.create(null);
-
-    if (customEmojis && customEmojis.length > 0) {
-      for (const emoji of customEmojis) {
-        if (!emoji.group) {
-          continue;
-        }
-        customGroups[emoji.group] = customGroups[emoji.group] ?? [];
-        customGroups[emoji.group].push(customToRegularEmoji(emoji));
-      }
-
-      newData.emojis[Categories.CUSTOM] = customEmojis
-        .filter(emoji => !emoji.group)
-        .map(customToRegularEmoji);
-    }
-
-    const emojis = newData.emojis || {};
-
-    const allEmojis: DataEmojis = Object.values(emojis)
-      .concat(Object.values(customGroups))
-      .flat();
-    const allEmojisByUnified: Record<string, DataEmoji> =
-      Object.create(null);
-    const searchIndex: Record<string, Record<string, DataEmoji>> =
-      Object.create(null);
-
-    allEmojis.forEach((emoji) => {
-      const unified = emoji[Keys.unified];
-      allEmojisByUnified[unified] = emoji;
-
-      if (emoji[Keys.variations]) {
-        emoji[Keys.variations]?.forEach((variation) => {
-          allEmojisByUnified[variation] = emoji;
-        });
-      }
+  useDataIdentityStabilityWarning(genericEmojiData, customEmojis);
 
-      // Index for search
-      // Re-implement indexEmoji logic here to be local
-      const joinedNameString = (emoji[Keys.name] || [])
-        .join('')
-        .toLowerCase()
-        .split('');
-
-      joinedNameString.forEach((char: string) => {
-        searchIndex[char] = searchIndex[char] ?? Object.create(null);
-        searchIndex[char][unified] = emoji;
-      });
-    });
-
-    return {
-      emojiData: newData,
-      allEmojis,
-      allEmojisByUnified,
-      searchIndex,
-      customGroups,
-    };
-  }, [genericEmojiData, customEmojis]);
+  // Shared derivation: no per-Root JSON clone of the full dataset,
+  // caller data never mutated, base index shared by dataset identity, custom
+  // derivation cached separately by customEmojis identity. emojiVersion /
+  // hiddenEmojis remain per-Root filtering layers elsewhere and never force
+  // a base-index rebuild.
+  const data = React.useMemo(
+    () => getPickerDataSnapshot(genericEmojiData, customEmojis),
+    [genericEmojiData, customEmojis],
+  );
 
   const emojiByUnified = React.useCallback(
     (unified?: string): DataEmoji | undefined => {
@@ -127,14 +85,57 @@ export function PickerDataProvider({
     [data.allEmojisByUnified],
   );
 
+  const allCustomEmojis = React.useMemo(
+    () => [
+      ...(data.emojiData.emojis?.[Categories.CUSTOM] ?? []),
+      ...Object.values(data.customGroups).flat(),
+    ],
+    [data.emojiData, data.customGroups],
+  );
+
+  const queryFilterDict = React.useCallback(
+    (query: string): FilterDict => {
+      const normalized = normalizeQuery(query);
+      const dict: FilterDict = Object.create(null);
+      if (!normalized) {
+        return dict;
+      }
+      for (const info of searchEmojis(normalized, {
+        emojiData: genericEmojiData,
+      })) {
+        const emoji = data.allEmojisByUnified[info.unified];
+        if (emoji) {
+          dict[info.unified] = emoji;
+        }
+      }
+      for (const custom of allCustomEmojis) {
+        if (
+          emojiNames(custom).some((name) =>
+            name.toLowerCase().includes(normalized),
+          )
+        ) {
+          dict[custom[Keys.unified]] = custom;
+        }
+      }
+      return dict;
+    },
+    [genericEmojiData, data.allEmojisByUnified, allCustomEmojis],
+  );
+
+  // Stable value identity: provider rerenders must not rerender data
+  // consumers while the dataset itself is unchanged.
+  const value = React.useMemo(
+    () => ({
+      ...data,
+      emojiByUnified,
+      activeVariationFromUnified,
+      queryFilterDict,
+    }),
+    [data, emojiByUnified, queryFilterDict],
+  );
+
   return (
-    <PickerDataContext.Provider
-      value={{
-        ...data,
-        emojiByUnified,
-        activeVariationFromUnified,
-      }}
-    >
+    <PickerDataContext.Provider value={value}>
       {children}
     </PickerDataContext.Provider>
   );
@@ -147,6 +148,7 @@ export function usePickerDataContext() {
 export function useGetEmojisByCategory() {
   const { emojiData, emojiByUnified, customGroups } = usePickerDataContext();
   const suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
+  const callerSuggestedEmojis = useSuggestedEmojisConfig();
   const [suggestedUpdated] = useUpdateSuggested();
   // Suggestions come from localStorage, which doesn't exist during SSR.
   // Read them only after mount so the first client render matches the server.
@@ -157,6 +159,24 @@ export function useGetEmojisByCategory() {
       return [] as DataEmojis;
     }
 
+    // Caller-defined suggestions fully determine contents/order while the
+    // prop is present; persistence mode is ignored and nothing is written
+    // to localStorage by this path.
+    if (callerSuggestedEmojis !== undefined) {
+      return resolveSuggestedRenderIds(callerSuggestedEmojis, (id) =>
+        emojiByUnified(id),
+      )
+        .map((identity) => {
+          const emoji = emojiByUnified(identity);
+          if (!emoji) return undefined;
+          return {
+            ...emoji,
+            renderUnified: identity,
+          };
+        })
+        .filter(Boolean) as DataEmojis;
+    }
+
     const suggested = getSuggested(suggestedEmojisModeConfig) ?? [];
 
     return suggested
@@ -165,12 +185,18 @@ export function useGetEmojisByCategory() {
         if (!emoji) return undefined;
         return {
           ...emoji,
-          [Keys.unified]: s.unified,
+          fallbackUnified: s.unified,
         };
       })
       .filter(Boolean) as DataEmojis;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isMounted, suggestedUpdated, suggestedEmojisModeConfig, emojiByUnified]);
+  }, [
+    isMounted,
+    suggestedUpdated,
+    suggestedEmojisModeConfig,
+    callerSuggestedEmojis,
+    emojiByUnified,
+  ]);
 
   return function getEmojisByCategory(
     category: Categories,
@@ -187,14 +213,3 @@ export function useGetEmojisByCategory() {
     return emojiData.emojis?.[category] ?? [];
   };
 }
-
-function customToRegularEmoji(emoji: CustomEmoji): DataEmoji {
-  return {
-    [EmojiProperties.name]: emoji.names.map((name: string) =>
-      name.toLowerCase(),
-    ),
-    [EmojiProperties.unified]: emoji.id.toLowerCase(),
-    [EmojiProperties.added_in]: '0',
-    [EmojiProperties.imgUrl]: emoji.imgUrl,
-  };
-}

package/src/components/emoji/BaseEmojiProps.ts

@@ -1,14 +1,15 @@
 import { CustomEmoji } from '../../config/customEmojiConfig';
 import { DataEmoji } from '../../dataUtils/DataTypes';
-import { EmojiStyle } from '../../types/exposedTypes';
+import { EmojiStyleValue } from '../../types/exposedTypes';
 
 export type BaseEmojiProps = {
   emoji?: DataEmoji | CustomEmoji;
-  emojiStyle: EmojiStyle;
+  emojiStyle: EmojiStyleValue;
   unified: string;
-  size?: number;
+  /** Pixels, or any CSS length (e.g. a `var(--epr-*)` token). */
+  size?: number | string;
   lazyLoad?: boolean;
   getEmojiUrl?: GetEmojiUrl;
   className?: string;
 };
-export type GetEmojiUrl = (unified: string, style: EmojiStyle) => string;
+export type GetEmojiUrl = (unified: string, style: EmojiStyleValue) => string;

package/src/components/emoji/ClickableEmojiButton.tsx

@@ -7,7 +7,10 @@ import {
   commonStyles,
   stylesheet,
 } from '../../Stylesheet/stylesheet';
+import { useDefaultAppearance } from '../../primitives/appearance';
 import { Button } from '../atoms/Button';
+import { EmojiRenderProps, ListEmoji } from '../body/listComponents';
+import { useIsActiveEmoji } from '../context/PickerContext';
 
 type ClickableEmojiButtonProps = Readonly<{
   hidden?: boolean;
@@ -20,6 +23,13 @@ type ClickableEmojiButtonProps = Readonly<{
   noBackground?: boolean;
   className?: string;
   style?: React.CSSProperties;
+  tabIndex?: number;
+  /** Consumer cell (List `components.Emoji`) replacing the default button. */
+  as?: React.ComponentType<EmojiRenderProps>;
+  emojiInfo?: Omit<ListEmoji, 'isActive'>;
+  /** `gridcell` inside the emoji grid; native button role elsewhere. */
+  role?: 'gridcell';
+  index?: number;
 }>;
 
 export function ClickableEmojiButton({
@@ -33,23 +43,56 @@ export function ClickableEmojiButton({
   className,
   noBackground = false,
   style,
+  tabIndex,
+  as: Custom,
+  emojiInfo,
+  role,
+  index,
 }: ClickableEmojiButtonProps) {
+  const isActive = useIsActiveEmoji(unified);
+  const appearance = useDefaultAppearance();
+  const cellClassName = emojiCellClassName({
+    hidden,
+    hiddenOnSearch,
+    hasVariations,
+    showVariations,
+    noBackground,
+    className,
+    custom: !!Custom || !appearance,
+  });
+
+  if (Custom && emojiInfo) {
+    const managedProps = {
+      type: 'button' as const,
+      role,
+      tabIndex,
+      className: cellClassName,
+      'data-epr-part': 'emoji',
+      'data-epr-active': isActive ? '' : undefined,
+      'data-epr-unified': unified,
+      'data-epr-index': index,
+      'aria-label': getAriaLabel(emojiNames),
+      'data-epr-full-name': emojiNames.join(','),
+      style,
+    };
+    return (
+      <Custom {...managedProps} emoji={{ ...emojiInfo, isActive }}>
+        {children}
+      </Custom>
+    );
+  }
+
   return (
     <Button
-      className={cx(
-        styles.emoji,
-        hidden && commonStyles.hidden,
-        hiddenOnSearch && commonInteractionStyles.hiddenOnSearch,
-        {
-          [ClassNames.visible]: !hidden && !hiddenOnSearch,
-        },
-        !!(hasVariations && showVariations) && styles.hasVariations,
-        noBackground && styles.noBackground,
-        className,
-      )}
-      data-unified={unified}
+      tabIndex={tabIndex}
+      role={role}
+      className={cellClassName}
+      data-epr-part="emoji"
+      data-epr-active={isActive ? '' : undefined}
+      data-epr-unified={unified}
+      data-epr-index={index}
       aria-label={getAriaLabel(emojiNames)}
-      data-full-name={emojiNames}
+      data-epr-full-name={emojiNames}
       style={style}
     >
       {children}
@@ -57,62 +100,104 @@ export function ClickableEmojiButton({
   );
 }
 
+function emojiCellClassName({
+  hidden,
+  hiddenOnSearch,
+  hasVariations,
+  showVariations,
+  noBackground,
+  className,
+  custom,
+}: {
+  hidden?: boolean;
+  hiddenOnSearch?: boolean;
+  hasVariations: boolean;
+  showVariations: boolean;
+  noBackground: boolean;
+  className?: string;
+  custom: boolean;
+}): string {
+  return cx(
+    styles.emoji,
+    !custom && styles.appearance,
+    hidden && commonStyles.hidden,
+    hiddenOnSearch && commonInteractionStyles.hiddenOnSearch,
+    {
+      [ClassNames.visible]: !hidden && !hiddenOnSearch,
+    },
+    variationClassName(hasVariations && showVariations, custom),
+    !custom && noBackground && styles.noBackground,
+    className,
+  );
+}
+
+function variationClassName(show: boolean, custom: boolean): string {
+  return cx(
+    show && ClassNames.emojiHasVariations,
+    show && !custom && styles.hasVariations,
+  );
+}
+
 function getAriaLabel(emojiNames: string[]) {
   return emojiNames[emojiNames.length - 1];
 }
 
-const styles = stylesheet.create({
-  emoji: {
-    '.': ClassNames.emoji,
-    position: 'relative',
-    width: 'var(--epr-emoji-fullsize)',
-    height: 'var(--epr-emoji-fullsize)',
-    boxSizing: 'border-box',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    maxWidth: 'var(--epr-emoji-fullsize)',
-    maxHeight: 'var(--epr-emoji-fullsize)',
-    borderRadius: '8px',
-    overflow: 'hidden',
-    transition: 'background-color 0.2s',
-    ':hover': {
-      backgroundColor: 'var(--epr-emoji-hover-color)',
+const styles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    emoji: {
+      '.': ClassNames.emoji,
+      position: 'relative',
+      width: 'var(--epr-emoji-fullsize)',
+      height: 'var(--epr-emoji-fullsize)',
+      boxSizing: 'border-box',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      maxWidth: 'var(--epr-emoji-fullsize)',
+      maxHeight: 'var(--epr-emoji-fullsize)',
+      overflow: 'hidden',
     },
-    ':focus': {
-      backgroundColor: 'var(--epr-focus-bg-color)',
+    appearance: {
+      '.': 'epr-emoji-appearance',
+      borderRadius: '8px',
+      transition: 'background-color 0.2s',
+      ':hover': {
+        backgroundColor: 'var(--epr-emoji-hover-color)',
+      },
+      ':focus': {
+        backgroundColor: 'var(--epr-focus-bg-color)',
+      },
     },
-  },
-  noBackground: {
-    background: 'none',
-    ':hover': {
-      backgroundColor: 'transparent',
+    noBackground: {
       background: 'none',
+      ':hover': {
+        backgroundColor: 'transparent',
+        background: 'none',
+      },
+      ':focus': {
+        backgroundColor: 'transparent',
+        background: 'none',
+      },
     },
-    ':focus': {
-      backgroundColor: 'transparent',
-      background: 'none',
-    },
-  },
-  hasVariations: {
-    '.': ClassNames.emojiHasVariations,
-    ':after': {
-      content: '',
-      display: 'block',
-      width: '0',
-      height: '0',
-      right: '0px',
-      bottom: '1px',
-      position: 'absolute',
-      borderLeft: '4px solid transparent',
-      borderRight: '4px solid transparent',
-      transform: 'rotate(135deg)',
-      borderBottom: '4px solid var(--epr-emoji-variation-indicator-color)',
-      zIndex: 'var(--epr-emoji-variations-indictator-z-index)',
-    },
-    ':hover:after': {
-      borderBottom:
-        '4px solid var(--epr-emoji-variation-indicator-color-hover)',
+    hasVariations: {
+      '.': 'epr-emoji-variation-indicator',
+      ':after': {
+        content: '',
+        display: 'block',
+        width: '0',
+        height: '0',
+        right: '0px',
+        bottom: '1px',
+        position: 'absolute',
+        borderLeft: '4px solid transparent',
+        borderRight: '4px solid transparent',
+        transform: 'rotate(135deg)',
+        borderBottom: '4px solid var(--epr-emoji-variation-indicator-color)',
+        zIndex: 'var(--epr-emoji-variations-indictator-z-index)',
+      },
+      ':hover:after': {
+        borderBottom:
+          '4px solid var(--epr-emoji-variation-indicator-color-hover)',
+      },
     },
-  },
-});
+  }))();

package/src/components/emoji/Emoji.tsx

@@ -1,7 +1,13 @@
 import * as React from 'react';
 
 import { DataEmoji } from '../../dataUtils/DataTypes';
-import { emojiHasVariations, emojiNames } from '../../dataUtils/emojiUtils';
+import {
+  emojiHasVariations,
+  emojiNames,
+  emojiUrlByUnified,
+} from '../../dataUtils/emojiUtils';
+import { usePickerComponents } from '../../primitives/components';
+import { emojiRenderInfo, useListComponents } from '../body/listComponents';
 
 import { BaseEmojiProps } from './BaseEmojiProps';
 import { ClickableEmojiButton } from './ClickableEmojiButton';
@@ -17,6 +23,9 @@ type ClickableEmojiProps = Readonly<
     buttonClassName?: string;
     noBackground?: boolean;
     style?: React.CSSProperties;
+    tabIndex?: number;
+    role?: 'gridcell';
+    index?: number;
   }
 >;
 
@@ -29,16 +38,25 @@ export function ClickableEmoji({
   showVariations = true,
   size,
   lazyLoad,
-  getEmojiUrl,
+  getEmojiUrl = emojiUrlByUnified,
   className,
   buttonClassName,
   noBackground = false,
   style,
+  tabIndex,
+  role,
+  index,
 }: ClickableEmojiProps) {
   const hasVariations = emojiHasVariations(emoji);
+  const { Emoji: SharedEmoji } = usePickerComponents();
+  const Custom = useListComponents().Emoji ?? SharedEmoji;
+  const info = Custom
+    ? emojiRenderInfo(emoji, unified, emojiStyle, getEmojiUrl)
+    : undefined;
 
   return (
     <ClickableEmojiButton
+      tabIndex={tabIndex}
       hasVariations={hasVariations}
       showVariations={showVariations}
       hidden={hidden}
@@ -48,6 +66,10 @@ export function ClickableEmoji({
       noBackground={noBackground}
       style={style}
       className={buttonClassName}
+      as={Custom}
+      emojiInfo={info}
+      role={role}
+      index={index}
     >
       <ViewOnlyEmoji
         unified={unified}

package/src/components/emoji/EmojiImg.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { cx } from 'shipstyles';
 
 import { stylesheet } from '../../Stylesheet/stylesheet';
-import { EmojiStyle } from '../../types/exposedTypes';
+import { EmojiStyleValue } from '../../types/exposedTypes';
 
 import { emojiStyles } from './emojiStyles';
 
@@ -15,7 +15,7 @@ export function EmojiImg({
   className,
 }: {
   emojiName: string;
-  emojiStyle: EmojiStyle;
+  emojiStyle: EmojiStyleValue;
   style: React.CSSProperties;
   lazyLoad?: boolean;
   imgUrl: string;
@@ -39,13 +39,14 @@ export function EmojiImg({
   );
 }
 
-const styles = stylesheet.create({
-  emojiImag: {
-    '.': 'epr-emoji-img',
-    maxWidth: 'var(--epr-emoji-fullsize)',
-    maxHeight: 'var(--epr-emoji-fullsize)',
-    minWidth: 'var(--epr-emoji-fullsize)',
-    minHeight: 'var(--epr-emoji-fullsize)',
-    padding: 'var(--epr-emoji-padding)',
-  },
-});
+const styles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    emojiImag: {
+      '.': 'epr-emoji-img',
+      maxWidth: 'var(--epr-emoji-fullsize)',
+      maxHeight: 'var(--epr-emoji-fullsize)',
+      minWidth: 'var(--epr-emoji-fullsize)',
+      minHeight: 'var(--epr-emoji-fullsize)',
+      padding: 'var(--epr-emoji-padding)',
+    },
+  }))();