emoji-picker-react 4.22.2 → 5.0.0

package/src/primitives/Root.tsx

@@ -0,0 +1,398 @@
+/* global process: readonly */
+import * as React from 'react';
+import { cx } from 'shipstyles';
+
+import { ClassNames } from '../DomUtils/classNames';
+import { PickerStyleTag } from '../Stylesheet/stylesheet';
+import {
+  ElementRefContextProvider,
+  usePickerMainRef,
+} from '../components/context/ElementRefContext';
+import { PickerConfigProvider } from '../components/context/PickerConfigContext';
+import {
+  PickerContextProvider,
+  useReactionsModeState,
+} from '../components/context/PickerContext';
+import { PickerDataProvider } from '../components/context/PickerDataContext';
+import {
+  NavigationInvalidation,
+  ReactionsModeObserver,
+  SearchSync,
+} from '../components/main/PickerMainBehaviors';
+import { ActiveCategoryProvider } from '../components/navigation/CategoryNavigation';
+import { basePickerConfig } from '../config/config';
+import { DefaultPickerConfiguration } from '../config/defaultPickerConfiguration';
+import {
+  MutableConfigProvider,
+  NO_MUTABLE_PROVIDER,
+  useDefineMutableConfig,
+  useInheritedMutableConfig,
+} from '../config/mutableConfig';
+import { useColumnsConfig } from '../config/useConfig';
+import useIsSearchMode from '../hooks/useIsSearchMode';
+import { useKeyboardNavigation } from '../hooks/useKeyboardNavigation';
+import { useOnFocus } from '../hooks/useOnFocus';
+import { useReactionsFocusManager } from '../hooks/useReactionsFocus';
+import {
+  DataLoadingProvider,
+  EmojiDataInput,
+  useResolvedEmojiData,
+} from '../hooks/useResolvedEmojiData';
+import {
+  SkinTonePickerLocation,
+  Theme,
+  ThemeValue,
+} from '../types/exposedTypes';
+
+import { AppearanceContext } from './appearance';
+import { PickerComponentsContext, EMPTY_COMPONENTS } from './components';
+import { useMergedRefs } from './nativeProps';
+import { RootScopeProvider } from './scope';
+import { StructuralStyleTag, structuralStyles } from './structuralStyles';
+import type { RootProps } from './types';
+
+// Public Root primitive.
+//
+// Root owns behavior/configuration and renders the actual `aside`. It does
+// not own the branded default appearance: theme/width/height stay with the
+// default wrapper, while `className`/`style`/other native `aside`
+// attributes land on the real element. `role` is library-owned and
+// `data-epr-*` is reserved, so both are stripped from consumer props.
+//
+// Caller JSX owns every part's presence and placement. Root installs no
+// ErrorBoundary; consumer render errors propagate to the application's
+// own boundary.
+
+const APPEARANCE_ONLY_PROPS = new Set([
+  'theme',
+  'width',
+  'height',
+  'className',
+  'style',
+]);
+
+const BEHAVIOR_KEYS: ReadonlySet<string> = new Set(
+  Object.keys(basePickerConfig()),
+);
+
+// Event callbacks live outside the base config shape (they are Partial-only
+// inputs), but they are behavior: they feed the mutable config, never the
+// DOM element.
+const CALLBACK_KEYS = new Set([
+  'onEmojiClick',
+  'onReactionClick',
+  'onSkinToneChange',
+]);
+
+/**
+ * Whether `key` is a picker configuration prop or callback (as opposed to
+ * a native attribute). The default picker forwards only these to Root, so
+ * unknown props never reach the DOM, as in v4.
+ */
+export function isPickerBehaviorProp(key: string): boolean {
+  return CALLBACK_KEYS.has(key) || BEHAVIOR_KEYS.has(key);
+}
+
+let warnedTheme = false;
+function warnThemeOnRoot(): void {
+  if (warnedTheme || process.env.NODE_ENV === 'production') return;
+  warnedTheme = true;
+  // eslint-disable-next-line no-console
+  console.warn(
+    '[emoji-picker-react] Root ignores `theme`; use colorScheme="light" | "dark" | "auto".',
+  );
+}
+
+/** Test-only: allow the one-time warning to fire again. */
+export function __resetRootWarningsForTest(): void {
+  warnedTheme = false;
+}
+
+function splitRootProps(props: Omit<RootProps, 'children'>): {
+  behaviorProps: Record<string, unknown>;
+  asideProps: Record<string, unknown>;
+} {
+  const behaviorProps: Record<string, unknown> = {};
+  const asideProps: Record<string, unknown> = {};
+  for (const key of Object.keys(props)) {
+    assignRootProp(
+      key,
+      (props as Record<string, unknown>)[key],
+      behaviorProps,
+      asideProps,
+    );
+  }
+  return { behaviorProps, asideProps };
+}
+
+const COMPOSITION_PROPS = new Set([
+  'open',
+  'searchDisabled',
+  'skinTonesDisabled',
+  'skinTonePickerLocation',
+  'composition',
+  'panelProps',
+]);
+
+const NON_BEHAVIOR_PROPS = new Set([
+  ...COMPOSITION_PROPS,
+  'role',
+  'width',
+  'height',
+  'dangerouslySetInnerHTML',
+]);
+
+function assignRootProp(
+  key: string,
+  value: unknown,
+  behaviorProps: Record<string, unknown>,
+  asideProps: Record<string, unknown>,
+): void {
+  if (NON_BEHAVIOR_PROPS.has(key) || key.startsWith('data-epr-')) {
+    return;
+  }
+  // `colorScheme` is a Root appearance prop (color tokens), consumed by
+  // the aside; it never reaches behavior config. It is not named `theme`:
+  // Emotion, styled-components and MUI reserve that prop on components
+  // they wrap, so a styled(Root) would swallow (or crash on) it.
+  if (key === 'colorScheme') {
+    asideProps[key] = value;
+    return;
+  }
+  // `theme` is the default picker's v4 name; it is not a Root prop and
+  // must not leak onto the DOM element. Development says so once, since
+  // a silently ignored prop reads like a broken dark mode.
+  if (key === 'theme') {
+    warnThemeOnRoot();
+    return;
+  }
+  if (isRootBehaviorProp(key)) {
+    behaviorProps[key] =
+      key === 'previewConfig' ? omitPreviewPresence(value) : value;
+    return;
+  }
+  asideProps[key] = value;
+}
+
+const useIgnoredCompositionWarning: (
+  props: Omit<RootProps, 'children'>,
+) => void =
+  process.env.NODE_ENV === 'production'
+    ? () => undefined
+    : useDevIgnoredCompositionWarning;
+
+function useDevIgnoredCompositionWarning(
+  props: Omit<RootProps, 'children'>,
+): void {
+  const ignoredProps =
+    Object.keys(props).some((key) => COMPOSITION_PROPS.has(key)) ||
+    'showPreview' in ((props.previewConfig ?? {}) as object);
+  React.useEffect(() => {
+    if (ignoredProps) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        '[emoji-picker-react] Root ignores composition props. Compose parts instead.',
+      );
+    }
+  }, [ignoredProps]);
+}
+
+function isRootBehaviorProp(key: string): boolean {
+  return (
+    CALLBACK_KEYS.has(key) ||
+    (BEHAVIOR_KEYS.has(key) && !APPEARANCE_ONLY_PROPS.has(key))
+  );
+}
+
+function omitPreviewPresence(value: unknown): unknown {
+  if (!value || typeof value !== 'object') return value;
+  const preview = { ...(value as Record<string, unknown>) };
+  delete preview.showPreview;
+  return preview;
+}
+
+export const Root = /* @__PURE__ */ React.forwardRef<HTMLElement, RootProps>(
+  function Root(props, forwardedRef) {
+    const { children, appearance = 'none', components, ...rest } = props;
+    const { behaviorProps: rawBehaviorProps, asideProps } =
+      splitRootProps(rest);
+    const defaultConfiguration = React.useContext(DefaultPickerConfiguration);
+    useIgnoredCompositionWarning(rest);
+    // emojiData may be an object, a loader, or absent; everything below
+    // Root only ever sees a synchronous dataset.
+    const dataState = useResolvedEmojiData(
+      rawBehaviorProps.emojiData as EmojiDataInput | undefined,
+    );
+    const resolvedEmojiData = dataState.data;
+    const behaviorProps = {
+      ...rawBehaviorProps,
+      emojiData: resolvedEmojiData,
+      // Mounted primitives are always available. Legacy engine behavior
+      // (e.g. suppressing variations) is supplied by the default wrapper.
+      searchDisabled: false,
+      skinTonesDisabled: false,
+      skinTonePickerLocation: SkinTonePickerLocation.NONE,
+      ...defaultConfiguration,
+    };
+    const parentMutableRef = useInheritedMutableConfig();
+    const ownedMutableRef = useDefineMutableConfig({
+      onEmojiClick: behaviorProps.onEmojiClick as never,
+      onReactionClick: behaviorProps.onReactionClick as never,
+      onSkinToneChange: behaviorProps.onSkinToneChange as never,
+      onSearchChange: behaviorProps.onSearchChange as never,
+      onReactionsModeChange: behaviorProps.onReactionsModeChange as never,
+    });
+    // Adopt callbacks supplied by the default wrapper across its memo
+    // boundary, so callback-only parent updates stay fresh. Root's
+    // provider does not pass ownership to nested Roots: each bare Root
+    // owns its callbacks. Hooks stay unconditional when closed.
+    const mutableRef =
+      parentMutableRef !== NO_MUTABLE_PROVIDER
+        ? parentMutableRef
+        : ownedMutableRef;
+
+    return (
+      <DefaultPickerConfiguration.Provider value={null}>
+        <ElementRefContextProvider>
+          <DataLoadingProvider value={dataState}>
+            <PickerConfigProvider {...behaviorProps}>
+              <MutableConfigProvider value={mutableRef}>
+                <PickerDataProvider>
+                  <PickerContextProvider>
+                    <RootScopeProvider>
+                      <AppearanceContext.Provider
+                        value={appearance === 'default'}
+                      >
+                        <PickerComponentsContext.Provider
+                          value={components ?? EMPTY_COMPONENTS}
+                        >
+                          <ActiveCategoryProvider>
+                            {defaultConfiguration?.open === false ? null : (
+                              <RootAside
+                                defaultLayout={defaultConfiguration !== null}
+                                appearance={appearance}
+                                ref={forwardedRef}
+                                asideProps={asideProps}
+                                behaviorNonce={
+                                  behaviorProps.nonce as string | undefined
+                                }
+                                cssLayer={
+                                  behaviorProps.cssLayer as string | undefined
+                                }
+                              >
+                                {children}
+                              </RootAside>
+                            )}
+                          </ActiveCategoryProvider>
+                        </PickerComponentsContext.Provider>
+                      </AppearanceContext.Provider>
+                    </RootScopeProvider>
+                  </PickerContextProvider>
+                </PickerDataProvider>
+              </MutableConfigProvider>
+            </PickerConfigProvider>
+          </DataLoadingProvider>
+        </ElementRefContextProvider>
+      </DefaultPickerConfiguration.Provider>
+    );
+  },
+);
+
+const RootAside = /* @__PURE__ */ React.forwardRef<
+  HTMLElement,
+  {
+    asideProps: Record<string, unknown>;
+    behaviorNonce: string | undefined;
+    cssLayer: string | undefined;
+    children: React.ReactNode;
+    defaultLayout: boolean;
+    appearance: 'none' | 'default';
+  }
+>(function RootAside(
+  { asideProps, behaviorNonce, cssLayer, children, defaultLayout, appearance },
+  forwardedRef,
+) {
+  const columns = useColumnsConfig();
+  const PickerMainRef = usePickerMainRef();
+  const mergedRef = useMergedRefs<HTMLElement>(forwardedRef, PickerMainRef);
+  const [reactionsOpen] = useReactionsModeState();
+  const searchModeActive = useIsSearchMode();
+  useKeyboardNavigation();
+  useOnFocus();
+  useReactionsFocusManager();
+
+  const {
+    className,
+    style,
+    colorScheme: theme,
+    ...nativeAside
+  } = asideProps as {
+    className?: string;
+    style?: React.CSSProperties;
+    colorScheme?: ThemeValue;
+    [key: string]: unknown;
+  };
+  const rootStyle: React.CSSProperties = {
+    ...(columns && ({ '--epr-columns': columns } as React.CSSProperties)),
+    ...style,
+  };
+  // The default assembly owns compact sizing; caller compositions keep theirs.
+  if (reactionsOpen && defaultLayout) {
+    delete rootStyle.height;
+    delete rootStyle.width;
+  }
+
+  return (
+    <>
+      {/*
+        Managed components (search/grid/tabs/…) carry their styles on the
+        shared component sheet; measurement, virtualization and keyboard
+        navigation depend on those rules, so every Root emits them. The
+        branded layer (theme classes, transitions, default tokens via the
+        default tree's className) is what bare compositions opt out of —
+        never the functional component styles. Bundle separation (no
+        default-appearance module in this closure) is asserted separately.
+      */}
+      <PickerStyleTag nonce={behaviorNonce} cssLayer={cssLayer} />
+      <StructuralStyleTag nonce={behaviorNonce} cssLayer={cssLayer} />
+      <aside
+        {...(nativeAside as React.HTMLAttributes<HTMLElement>)}
+        ref={mergedRef}
+        data-epr-part="root"
+        data-epr-columns={columns}
+        className={cx(
+          structuralStyles.root,
+          theme === Theme.LIGHT && structuralStyles.themeLight,
+          theme === Theme.DARK && structuralStyles.themeDark,
+          theme === Theme.AUTO && structuralStyles.themeAuto,
+          appearance === 'default' && 'epr-appearance-default',
+          {
+            [ClassNames.searchActive]: searchModeActive,
+            [ClassNames.reactions]: reactionsOpen,
+          },
+          className,
+          collapsedClassName(defaultLayout, appearance, reactionsOpen),
+        )}
+        style={rootStyle}
+      >
+        {children}
+        <SearchSync />
+        <ReactionsModeObserver />
+        <NavigationInvalidation />
+      </aside>
+    </>
+  );
+});
+
+function collapsedClassName(
+  defaultLayout: boolean,
+  appearance: 'none' | 'default',
+  reactionsOpen: boolean,
+) {
+  return cx(
+    defaultLayout && reactionsOpen && structuralStyles.collapsed,
+    appearance === 'default' &&
+      reactionsOpen &&
+      structuralStyles.collapsedAppearance,
+  );
+}

package/src/primitives/Search.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+import { SearchContainer } from '../components/header/Search/Search';
+
+import { filterPrimitiveProps } from './nativeProps';
+import { useRootScope } from './scope';
+import type { SearchProps } from './types';
+
+// Public Search primitive.
+//
+// Managed search region: input, status live region, clear control and icon.
+// Additional controls are supplied as children. Ref addresses the region
+// wrapper; `inputRef` addresses the input itself.
+export const Search = /* @__PURE__ */ React.forwardRef<
+  HTMLDivElement,
+  SearchProps
+>(function Search(props, forwardedRef) {
+  const inScope = useRootScope('Search');
+  const { children, inputProps, inputRef, ...rest } = props;
+  const nativeProps = filterPrimitiveProps(rest as Record<string, unknown>, [
+    'role',
+  ]);
+
+  // Out-of-scope (production only; development throws above) renders
+  // null after a warn-once: continuing would crash with a TypeError.
+  if (!inScope) {
+    return null;
+  }
+
+  return (
+    <div
+      {...(nativeProps as React.HTMLAttributes<HTMLDivElement>)}
+      ref={forwardedRef}
+      data-epr-part="search"
+    >
+      <SearchContainer inputProps={inputProps} inputRef={inputRef}>
+        {children}
+      </SearchContainer>
+    </div>
+  );
+});

package/src/primitives/SearchInput.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+
+import { useSearchInputRef } from '../components/context/ElementRefContext';
+import {
+  formatSearchResultsLabel,
+  useLabels,
+  useAutoFocusSearchConfig,
+  useSearchLabelConfig,
+  useSearchPlaceHolderConfig,
+} from '../config/useConfig';
+import { useCloseAllOpenToggles } from '../hooks/useCloseAllOpenToggles';
+import { useRegisterRegion } from '../hooks/useRegisterRegion';
+import { useEmojiDataState } from '../hooks/useResolvedEmojiData';
+import { useSearchInputController } from '../hooks/useSearchController';
+import { useVisibleSearchResultCount } from '../hooks/useSearchResults';
+
+import {
+  composeHandlers,
+  filterPrimitiveProps,
+  useMergedRefs,
+} from './nativeProps';
+import { useRootScope } from './scope';
+import type {
+  SearchInputComponent,
+  SearchInputElement,
+  SearchInputProps,
+} from './types';
+
+const hiddenStatus: React.CSSProperties = {
+  clip: 'rect(0 0 0 0)',
+  clipPath: 'inset(50%)',
+  height: 1,
+  overflow: 'hidden',
+  position: 'absolute',
+  whiteSpace: 'nowrap',
+  width: 1,
+};
+
+/** Native input, or a ref-forwarding design-system input. Root owns its value. */
+export const SearchInput = /* @__PURE__ */ React.forwardRef<
+  HTMLInputElement,
+  SearchInputProps<SearchInputElement>
+>(function SearchInput(props, ref) {
+  const inScope = useRootScope('SearchInput');
+  const inputRef = useSearchInputRef();
+  const mergedRef = useMergedRefs(inputRef, ref);
+  const closeToggles = useCloseAllOpenToggles();
+  const labels = useLabels();
+  const label = useSearchLabelConfig();
+  const placeholder = useSearchPlaceHolderConfig();
+  const autoFocus = useAutoFocusSearchConfig();
+  const resultCount = useVisibleSearchResultCount();
+  const { loading, error } = useEmojiDataState();
+  const controller = useSearchInputController();
+  useRegisterRegion('search', inputRef);
+  const {
+    as: Input = 'input',
+    onChange,
+    onFocus,
+    onCompositionStart,
+    onCompositionEnd,
+    ...rest
+  } = props;
+  const nativeProps = filterPrimitiveProps(rest, [
+    'role',
+    'type',
+    'value',
+    'defaultValue',
+    'aria-controls',
+    'children',
+    'dangerouslySetInnerHTML',
+  ]);
+  if (!inScope) return null;
+  return (
+    <>
+      <Input
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        autoFocus={autoFocus}
+        placeholder={placeholder}
+        aria-label={label}
+        {...nativeProps}
+        type="text"
+        value={controller.value}
+        data-epr-part="search-input"
+        ref={mergedRef}
+        onChange={composeHandlers(controller.handleChange, onChange)}
+        onFocus={composeHandlers(closeToggles, onFocus)}
+        onCompositionStart={composeHandlers(
+          controller.handleCompositionStart,
+          onCompositionStart,
+        )}
+        onCompositionEnd={composeHandlers(
+          controller.handleCompositionEnd,
+          onCompositionEnd,
+        )}
+      />
+      {!loading && !error && resultCount !== null && (
+        <span
+          className="epr-status-search-results"
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
+          style={hiddenStatus}
+        >
+          {formatSearchResultsLabel(labels, resultCount)}
+        </span>
+      )}
+    </>
+  );
+}) as SearchInputComponent;

package/src/primitives/SkinTone.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { cx } from 'shipstyles';
+
+import { stylesheet } from '../Stylesheet/stylesheet';
+import { useSkinTonePickerRef } from '../components/context/ElementRefContext';
+import {
+  SkinTonePicker,
+  SkinTonePickerDirection,
+} from '../components/header/SkinTonePicker/SkinTonePicker';
+import { useRegisterRegion } from '../hooks/useRegisterRegion';
+
+import { filterPrimitiveProps } from './nativeProps';
+import { useRootScope } from './scope';
+import type { SkinToneProps } from './types';
+
+// Place the shared skin-tone control anywhere inside Root. Presence and
+// orientation belong to this part; Search and Preview never insert it.
+export const SkinTone = /* @__PURE__ */ React.forwardRef<
+  HTMLDivElement,
+  SkinToneProps
+>(function SkinTone(props, forwardedRef) {
+  const inScope = useRootScope('SkinTone');
+  const { orientation = 'horizontal', className, ...rest } = props;
+  const nativeProps = filterPrimitiveProps(rest as Record<string, unknown>, [
+    'role',
+  ]);
+  const SkinTonePickerRef = useSkinTonePickerRef();
+  useRegisterRegion('preview-skin-tone', SkinTonePickerRef);
+
+  if (!inScope) return null;
+
+  const vertical = orientation === 'vertical';
+
+  return (
+    <div
+      {...(nativeProps as React.HTMLAttributes<HTMLDivElement>)}
+      ref={forwardedRef}
+      className={cx(
+        vertical ? styles.verticalHost : styles.horizontalHost,
+        className,
+      )}
+    >
+      {vertical ? (
+        <div className={cx(styles.verticalAnchor)}>
+          <SkinTonePicker direction={SkinTonePickerDirection.VERTICAL} />
+        </div>
+      ) : (
+        <SkinTonePicker direction={SkinTonePickerDirection.HORIZONTAL} />
+      )}
+    </div>
+  );
+});
+
+const ITEM_SIZE = 28;
+
+const styles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    horizontalHost: {
+      '.': 'epr-skin-tone-host',
+      display: 'flex',
+      justifyContent: 'flex-end',
+      alignItems: 'center',
+      position: 'relative',
+    },
+    verticalHost: {
+      '.': 'epr-skin-tone-host-vertical',
+      position: 'relative',
+      height: `${ITEM_SIZE}px`,
+      width: `${ITEM_SIZE}px`,
+    },
+    verticalAnchor: {
+      position: 'absolute',
+      bottom: '0',
+      insetInlineEnd: '0',
+    },
+  }))();