emoji-picker-react 4.22.3 → 5.0.0

package/src/components/main/PickerMainBehaviors.tsx

@@ -0,0 +1,163 @@
+import * as React from 'react';
+
+/* global process: readonly */
+
+import { categoryIdFromCategoryConfig } from '../../config/categoryConfig';
+import { useMutableConfig } from '../../config/mutableConfig';
+import {
+  useCategoriesConfig,
+  useDefaultSearchValueConfig,
+  useEmojiVersionConfig,
+  useSearchValueConfig,
+} from '../../config/useConfig';
+import { useFilter } from '../../hooks/useFilter';
+import {
+  useActiveSkinToneState,
+  useEmojiSizeState,
+  useNavigationRegistry,
+  useReactionsModeState,
+} from '../context/PickerContext';
+import { usePickerDataContext } from '../context/PickerDataContext';
+
+// Root-scoped behavior companions shared by the default picker and the
+// public Root primitive (single implementation).
+
+// Accepted-search synchronization.
+//
+// Controlled mode: filtering is scheduled only when a new accepted
+// `searchValue` prop is observed — a rejected `onSearchChange` proposal
+// schedules nothing. A newer accepted query cancels the pending one via
+// the shared debounced transition. Parent-driven changes never re-emit.
+// Uncontrolled mode: the initial `defaultSearchValue` commits once on
+// mount (filtering applies, but no callback fires for a non-user edit);
+// later edits schedule through the input transition itself.
+export function SearchSync() {
+  const searchValue = useSearchValueConfig();
+  const defaultSearchValue = useDefaultSearchValueConfig();
+  const { onChange: commitFilter } = useFilter();
+
+  const mode = searchValue !== undefined ? 'controlled' : 'uncontrolled';
+  useSearchModeSwitchWarning(mode);
+
+  // Initial commit only. The stamp (not a first-run flag) makes this
+  // StrictMode-safe: the double-invoked mount effect commits once, since
+  // the second run observes the stamp. A genuine remount creates a new
+  // ref and commits its own initial value again, as it should.
+  // commitFilter closes over stable refs/setters only, so the captured
+  // first-render instance stays valid for this mount-only effect.
+  const initialStamp = React.useRef<string | null | undefined>(undefined);
+  React.useEffect(() => {
+    if (initialStamp.current !== undefined) {
+      return;
+    }
+    const initial = mode === 'controlled' ? searchValue : defaultSearchValue;
+    initialStamp.current = initial ?? null;
+    if (initial) {
+      commitFilter(initial);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Controlled updates only. Previous-value comparison keeps the mount
+  // (and the StrictMode double-invoke) silent; uncontrolled commits
+  // schedule through the input transition, and the default value is read
+  // once, so later prop changes are ignored here.
+  const prevAccepted = React.useRef(searchValue);
+  React.useEffect(() => {
+    if (
+      mode === 'controlled' &&
+      searchValue !== undefined &&
+      searchValue !== prevAccepted.current
+    ) {
+      prevAccepted.current = searchValue;
+      commitFilter(searchValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mode, searchValue]);
+
+  return null;
+}
+
+const useSearchModeSwitchWarning: (mode: string) => void =
+  process.env.NODE_ENV === 'production'
+    ? () => undefined
+    : useDevSearchModeSwitchWarning;
+
+function useDevSearchModeSwitchWarning(mode: string): void {
+  const prevMode = React.useRef<string | null>(null);
+  React.useEffect(() => {
+    if (prevMode.current !== null && prevMode.current !== mode) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        '[emoji-picker-react] Switching between controlled and uncontrolled ' +
+          'search during one mounted lifetime is unsupported.',
+      );
+    }
+    prevMode.current = mode;
+  }, [mode]);
+}
+
+// Reaction-mode observation. Emits only after an
+// actual state change; initial mount never emits. A previous-value ref
+// (not a first-run flag) makes this StrictMode-safe: the double-invoked
+// mount effect observes an unchanged value both times and stays silent.
+export const ReactionsModeObserver = /* @__PURE__ */ React.memo(
+  function ReactionsModeObserver() {
+    const [reactionsOpen] = useReactionsModeState();
+    const { current } = useMutableConfig();
+    const prevReactionsOpen = React.useRef(reactionsOpen);
+
+    React.useEffect(() => {
+      if (prevReactionsOpen.current === reactionsOpen) {
+        return;
+      }
+      prevReactionsOpen.current = reactionsOpen;
+      current.onReactionsModeChange?.(reactionsOpen);
+    }, [reactionsOpen, current]);
+
+    return null;
+  },
+);
+
+// Root-scoped navigation generation.
+// Reactions transitions, dataset identity changes (custom emojis included),
+// category order/membership changes, and measured geometry changes each
+// obsolete pending materialize/scroll/focus completions. Column-count
+// changes invalidate from useCategoryHeight, search intent from
+// useApplySearch, unmount from registry disposal. Native glyph support is
+// deliberately absent: its background check can finish at any moment
+// after the first paint, and a category jump that it cancelled would
+// never arrive. Jumps read their target's offset when they scroll.
+export const NavigationInvalidation = /* @__PURE__ */ React.memo(
+  function NavigationInvalidation() {
+    const registry = useNavigationRegistry();
+    const [reactionsMode] = useReactionsModeState();
+    const { emojiData } = usePickerDataContext();
+    const [emojiSize] = useEmojiSizeState();
+    const emojiVersion = useEmojiVersionConfig();
+    const [skinTone] = useActiveSkinToneState();
+    // Keyed by order/membership, not identity: the merged config is rebuilt
+    // for unrelated prop changes, which must not cancel navigation.
+    const inventoryKey = JSON.stringify([
+      useCategoriesConfig().map(categoryIdFromCategoryConfig),
+      emojiVersion,
+      skinTone,
+    ]);
+    const prevSnapshot = React.useRef<unknown[]>([
+      reactionsMode,
+      emojiData,
+      emojiSize,
+      inventoryKey,
+    ]);
+
+    React.useEffect(() => {
+      const next = [reactionsMode, emojiData, emojiSize, inventoryKey];
+      if (next.every((value, index) => value === prevSnapshot.current[index]))
+        return;
+      prevSnapshot.current = next;
+      registry.invalidate();
+    }, [registry, reactionsMode, emojiData, emojiSize, inventoryKey]);
+
+    return null;
+  },
+);

package/src/components/main/defaultAppearance.tsx

@@ -0,0 +1,188 @@
+import * as React from 'react';
+import { cx } from 'shipstyles';
+
+import { ClassNames } from '../../DomUtils/classNames';
+import { stylesheet } from '../../Stylesheet/stylesheet';
+import {
+  DEFAULT_PICKER_HEIGHT,
+  DEFAULT_PICKER_WIDTH,
+} from '../../config/config';
+import { defaultPickerTokens } from '../../primitives/tokens';
+import { Theme, ThemeValue } from '../../types/exposedTypes';
+
+// Official default appearance. Private and DOM-less: classes are merged
+// onto the actual Root `aside` via its native `className` prop, so consumer
+// `className`/`style`/`width`/`height` keep v4 root ownership. The component
+// itself renders no DOM wrapper.
+export function DefaultAppearance({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}
+
+// Official default appearance for the picker root. Private and DOM-less:
+// these classes are merged onto the actual Root `aside` via its native `className` prop, so
+// consumer `className`/`style`/`width`/`height` keep v4 root ownership.
+// Selector names are unchanged from v4, keeping pixel compatibility.
+export function defaultRootClassName(
+  theme: ThemeValue | undefined,
+  className?: string,
+  unstyled?: boolean,
+): string {
+  // `unstyled` drops the branded chrome and color tokens entirely. Layout,
+  // geometry and behavior come from Root's structural sheet, so the picker
+  // stays fully functional while every color, border and font is the
+  // consumer's (style it through className and [data-epr-part] selectors).
+  if (unstyled) {
+    return cx(className);
+  }
+  return cx(
+    styles.main,
+    styles.baseVariables,
+    theme === Theme.DARK && styles.darkTheme,
+    theme === Theme.AUTO && styles.autoThemeDark,
+    className,
+  );
+}
+
+export function defaultRootStyle({
+  width,
+  height,
+  style,
+  columns,
+}: {
+  width: string | number | undefined;
+  height: string | number | undefined;
+  style: React.CSSProperties | undefined;
+  columns?: number;
+}): React.CSSProperties {
+  return {
+    // v4-compatible default dimensions; consumer style and explicit
+    // width/height props both override them. With `columns`, the width
+    // fits the columns instead.
+    ...(columns === undefined && { width: getDimension(DEFAULT_PICKER_WIDTH) }),
+    height: getDimension(DEFAULT_PICKER_HEIGHT),
+    ...style,
+    ...(width !== undefined ? { width: getDimension(width) } : {}),
+    ...(height !== undefined ? { height: getDimension(height) } : {}),
+  };
+}
+
+function getDimension(dimension: string | number): string | number {
+  return typeof dimension === 'number' ? `${dimension}px` : dimension;
+}
+
+// Dark-theme value definitions referenced by the DarkTheme overrides.
+// Private to the default tree (see the token preset note): the packed
+// package check scans the primitives bundle for their absence.
+const darkThemeBaseVariables: Record<string, string> = {
+  '--epr-dark': '#000',
+  '--epr-dark-emoji-variation-picker-bg-color': 'var(--epr-dark)',
+  '--epr-dark-highlight-color': '#c0c0c0',
+  '--epr-dark-text-color': 'var(--epr-highlight-color)',
+  '--epr-dark-hover-bg-color': '#363636f6',
+  '--epr-dark-hover-bg-color-reduced-opacity': '#36363680',
+  '--epr-dark-focus-bg-color': '#474747',
+  '--epr-dark-search-input-bg-color': '#333333',
+  '--epr-dark-category-label-bg-color': '#222222e6',
+  '--epr-dark-picker-border-color': '#151617',
+  '--epr-dark-bg-color': '#222222',
+  '--epr-dark-reactions-bg-color': '#22222290',
+  '--epr-dark-search-input-bg-color-active': 'var(--epr-dark)',
+  '--epr-dark-emoji-variation-indicator-color': '#444',
+  '--epr-dark-category-icon-active-color': '#6AA9DD',
+  '--epr-dark-category-icon-inactive-color': '#C0C0BF',
+  '--epr-dark-skin-tone-picker-menu-color': '#22222295',
+  '--epr-dark-skin-tone-outer-border-color':
+    'var(--epr-dark-picker-border-color)',
+  '--epr-dark-skin-tone-inner-border-color': '#00000000',
+};
+
+const DarkTheme = {
+  '--epr-emoji-variation-picker-bg-color':
+    'var(--epr-dark-emoji-variation-picker-bg-color)',
+  '--epr-hover-bg-color-reduced-opacity':
+    'var(--epr-dark-hover-bg-color-reduced-opacity)',
+  '--epr-highlight-color': 'var(--epr-dark-highlight-color)',
+  '--epr-text-color': 'var(--epr-dark-text-color)',
+  '--epr-hover-bg-color': 'var(--epr-dark-hover-bg-color)',
+  '--epr-focus-bg-color': 'var(--epr-dark-focus-bg-color)',
+  '--epr-search-input-bg-color': 'var(--epr-dark-search-input-bg-color)',
+  '--epr-category-label-bg-color': 'var(--epr-dark-category-label-bg-color)',
+  '--epr-picker-border-color': 'var(--epr-dark-picker-border-color)',
+  '--epr-bg-color': 'var(--epr-dark-bg-color)',
+  '--epr-reactions-bg-color': 'var(--epr-dark-reactions-bg-color)',
+  '--epr-search-input-bg-color-active':
+    'var(--epr-dark-search-input-bg-color-active)',
+  '--epr-emoji-variation-indicator-color':
+    'var(--epr-dark-emoji-variation-indicator-color)',
+  '--epr-category-icon-active-color':
+    'var(--epr-dark-category-icon-active-color)',
+  '--epr-category-icon-inactive-color':
+    'var(--epr-dark-category-icon-inactive-color)',
+  '--epr-skin-tone-picker-menu-color':
+    'var(--epr-dark-skin-tone-picker-menu-color)',
+  '--epr-skin-tone-outer-border-color':
+    'var(--epr-dark-skin-tone-outer-border-color)',
+  '--epr-skin-tone-inner-border-color':
+    'var(--epr-dark-skin-tone-inner-border-color)',
+  '--epr-dark-text-color': 'var(--epr-highlight-color)',
+  '--epr-dark-hover-bg-color': '#363636f6',
+  '--epr-dark-hover-bg-color-reduced-opacity': '#36363680',
+  '--epr-dark-focus-bg-color': '#474747',
+  '--epr-dark-search-input-bg-color': '#333333',
+  '--epr-dark-category-label-bg-color': '#222222e6',
+  '--epr-dark-picker-border-color': '#151617',
+  '--epr-dark-bg-color': '#222222',
+  '--epr-dark-reactions-bg-color': '#22222290',
+  '--epr-dark-search-input-bg-color-active': 'var(--epr-dark)',
+  '--epr-dark-emoji-variation-indicator-color': '#444',
+  '--epr-dark-category-icon-active-color': '#6AA9DD',
+  '--epr-dark-category-icon-inactive-color': '#C0C0BF',
+  '--epr-dark-skin-tone-picker-menu-color': '#22222295',
+  '--epr-dark-skin-tone-outer-border-color':
+    'var(--epr-dark-picker-border-color)',
+  '--epr-dark-skin-tone-inner-border-color': '#00000000',
+};
+
+const styles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    main: {
+      '.': ['epr-main', ClassNames.emojiPicker],
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderRadius: 'var(--epr-picker-border-radius)',
+      borderColor: 'var(--epr-picker-border-color)',
+      backgroundColor: 'var(--epr-bg-color)',
+      overflow: 'hidden',
+      transition: 'height 0.3s ease-in-out, background-color 0.1s ease-in-out',
+      '*': {
+        boxSizing: 'border-box',
+        // Overridable without a specificity fight (v4 hard-coded sans-serif).
+        fontFamily: 'var(--epr-font-family, sans-serif)',
+      },
+    },
+    baseVariables: {
+      // Single-sourced from the public token preset: the default tree and
+      // bare-Root consumers share the same documented defaults. The private
+      // dark-theme values ride along (referenced only by the DarkTheme
+      // overrides below); they stay out of the shared preset so the
+      // primitives bundle keeps its separation marker scan clean.
+      '--': { ...defaultPickerTokens, ...darkThemeBaseVariables },
+    },
+    // color-scheme makes native parts (scrollbars, the search field's
+    // controls) render dark too; without it they stay light on a dark picker.
+    autoThemeDark: {
+      '.': ClassNames.autoTheme,
+      '@media (prefers-color-scheme: dark)': {
+        '--': DarkTheme,
+        colorScheme: 'dark',
+      },
+    },
+    darkTheme: {
+      '.': ClassNames.darkTheme,
+      '--': DarkTheme,
+      colorScheme: 'dark',
+    },
+  }))();

package/src/components/main/labelHeight.ts

@@ -0,0 +1,5 @@
+// Shared label-height fallback (pixels). Lives in its own side-effect-free
+// module so measurement code in the primitives closure never imports the
+// default-appearance stylesheet (which would drag branded CSS into the
+// primitives bundle).
+export const DEFAULT_LABEL_HEIGHT = 40;

package/src/components/navigation/CategoryButton.tsx

@@ -7,7 +7,12 @@ import {
   darkMode,
   stylesheet,
 } from '../../Stylesheet/stylesheet';
-import { categoryNameFromCategoryConfig } from '../../config/categoryConfig';
+import {
+  categoryIdFromCategoryConfig,
+  categoryNameFromCategoryConfig,
+} from '../../config/categoryConfig';
+import { useDefaultAppearance } from '../../primitives/appearance';
+import { usePickerComponents } from '../../primitives/components';
 import { CategoryConfig } from '../../types/exposedTypes';
 import { Button } from '../atoms/Button';
 
@@ -30,29 +35,47 @@ export function CategoryButton({
   onClick,
   customIcon,
 }: Props) {
+  const appearance = useDefaultAppearance();
+  const { CategoryButton: Custom } = usePickerComponents();
+  const decorated = appearance && !Custom;
   // Priority: categoryConfig.icon > customIcon prop (from categoryIcons)
   const icon = categoryConfig.icon ?? customIcon;
   const hasCustomIcon = icon != null;
 
-  return (
-    <Button
-      tabIndex={allowNavigation ? 0 : -1}
-      className={cx(
-        styles.catBtn,
-        commonInteractionStyles.categoryBtn,
-        hasCustomIcon ? styles.customIcon : `epr-icn-${category}`,
-        {
-          [ClassNames.active]: isActiveCategory,
-        },
-      )}
-      onClick={onClick}
-      aria-label={categoryNameFromCategoryConfig(categoryConfig)}
-      aria-selected={isActiveCategory}
-      role="tab"
-      aria-controls="epr-category-nav-id"
-    >
-      {hasCustomIcon ? icon : <CategoryNavIcon category={category} />}
-    </Button>
+  const props: React.ButtonHTMLAttributes<HTMLButtonElement> = {
+    type: 'button',
+    tabIndex: allowNavigation ? 0 : -1,
+    className: cx(
+      styles.geometry,
+      decorated && styles.catBtn,
+      decorated && commonInteractionStyles.categoryBtn,
+      hasCustomIcon ? styles.customIcon : `epr-icn-${category}`,
+      { [ClassNames.active]: isActiveCategory },
+    ),
+    onClick: (event) => {
+      if (!event.defaultPrevented) onClick();
+    },
+    'aria-label': categoryNameFromCategoryConfig(categoryConfig),
+    'aria-selected': isActiveCategory,
+    role: 'tab',
+    children: hasCustomIcon ? icon : <CategoryNavIcon category={category} />,
+  };
+  const managed = {
+    ...props,
+    'data-epr-part': 'category-tab',
+    'data-epr-active': isActiveCategory ? '' : undefined,
+  };
+  return Custom ? (
+    <Custom
+      {...managed}
+      category={{
+        id: categoryIdFromCategoryConfig(categoryConfig),
+        name: categoryNameFromCategoryConfig(categoryConfig),
+        isActive: isActiveCategory,
+      }}
+    />
+  ) : (
+    <Button {...managed} />
   );
 }
 
@@ -72,41 +95,44 @@ const DarkInactivePosition = {
   },
 };
 
-const styles = stylesheet.create({
-  catBtn: {
-    '.': 'epr-cat-btn',
-    display: 'inline-block',
-    transition: 'opacity 0.2s ease-in-out',
-    position: 'relative',
-    height: 'var(--epr-category-navigation-button-size)',
-    width: 'var(--epr-category-navigation-button-size)',
-    outline: 'none',
-    // Icon glyphs are inline SVGs painted with currentColor, so the fill
-    // follows the --epr-category-icon-*-color variables.
-    // https://github.com/ealush/emoji-picker-react/issues/399
-    color: 'var(--epr-category-icon-inactive-color, #868686)',
-    ':focus:before': {
-      content: '',
-      position: 'absolute',
-      top: '-2px',
-      left: '-2px',
-      right: '-2px',
-      bottom: '-2px',
-      border: '2px solid var(--epr-category-icon-active-color)',
-      borderRadius: '50%',
+const styles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    geometry: {
+      display: 'inline-block',
+      position: 'relative',
+      height: 'var(--epr-category-navigation-button-size)',
+      width: 'var(--epr-category-navigation-button-size)',
     },
-  },
-  customIcon: {
-    '.': 'epr-cat-btn-custom-icon',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  ...darkMode('catBtn', DarkInactiveColor),
-  '.epr-dark-theme': {
-    ...DarkInactivePosition,
-  },
-  '.epr-auto-theme': {
-    ...DarkInactivePosition,
-  },
-});
+    catBtn: {
+      '.': 'epr-cat-btn',
+      transition: 'opacity 0.2s ease-in-out',
+      outline: 'none',
+      // Icon glyphs are inline SVGs painted with currentColor, so the fill
+      // follows the --epr-category-icon-*-color variables.
+      // https://github.com/ealush/emoji-picker-react/issues/399
+      color: 'var(--epr-category-icon-inactive-color, #868686)',
+      ':focus:before': {
+        content: '',
+        position: 'absolute',
+        top: '-2px',
+        left: '-2px',
+        right: '-2px',
+        bottom: '-2px',
+        border: '2px solid var(--epr-category-icon-active-color)',
+        borderRadius: '50%',
+      },
+    },
+    customIcon: {
+      '.': 'epr-cat-btn-custom-icon',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    ...darkMode('catBtn', DarkInactiveColor),
+    '.epr-dark-theme': {
+      ...DarkInactivePosition,
+    },
+    '.epr-auto-theme': {
+      ...DarkInactivePosition,
+    },
+  }))();