emoji-picker-react 4.22.3 → 5.0.0

package/src/hooks/useSearchResults.ts

@@ -0,0 +1,51 @@
+import {
+  useFilterRef,
+  useSearchTermState,
+} from '../components/context/PickerContext';
+import { useGetEmojisByCategory } from '../components/context/PickerDataContext';
+import {
+  categoryFromCategoryConfig,
+  customGroupFromCategoryConfig,
+} from '../config/categoryConfig';
+import { useCategoriesConfig } from '../config/useConfig';
+import {
+  emojiUnified,
+  unifiedWithoutSkinTone,
+} from '../dataUtils/emojiUtils';
+
+import { useIsEmojiDisallowed } from './useDisallowedEmojis';
+import { useIsEmojiHidden } from './useIsEmojiHidden';
+
+/**
+ * Number of distinct emojis the list actually shows for the active search,
+ * or null while no search is applied (or its results are not computed
+ * yet). Uses the same predicates as the list itself, so configured
+ * categories, emojiVersion, hiddenEmojis, platform support and failed
+ * images are all accounted for — the raw match dictionary is not.
+ */
+export function useVisibleSearchResultCount(): number | null {
+  const [searchTerm] = useSearchTermState();
+  const filterRef = useFilterRef();
+  const categories = useCategoriesConfig();
+  const getEmojisByCategory = useGetEmojisByCategory();
+  const isEmojiDisallowed = useIsEmojiDisallowed();
+  const isEmojiHidden = useIsEmojiHidden();
+
+  if (!searchTerm || !filterRef.current[searchTerm]) {
+    return null;
+  }
+
+  const visible = new Set<string>();
+  for (const categoryConfig of categories) {
+    const emojis = getEmojisByCategory(
+      categoryFromCategoryConfig(categoryConfig),
+      customGroupFromCategoryConfig(categoryConfig),
+    );
+    for (const emoji of emojis) {
+      if (!isEmojiDisallowed(emoji) && !isEmojiHidden(emoji).hidden) {
+        visible.add(unifiedWithoutSkinTone(emojiUnified(emoji)));
+      }
+    }
+  }
+  return visible.size;
+}

package/src/hooks/useSetVariationPicker.ts

@@ -1,5 +1,6 @@
 import {
   allUnifiedFromEmojiElement,
+  buttonFromTarget,
   NullableElement,
 } from '../DomUtils/selectors';
 import { useSetAnchoredEmojiRef } from '../components/context/ElementRefContext';
@@ -25,7 +26,9 @@ export default function useSetVariationPicker() {
     const emoji = emojiByUnified(resolvedUnified);
 
     if (emoji) {
-      setAnchoredEmojiRef(element);
+      // Anchor to the emoji button, not the event target: the target may
+      // be a nested child (an image, or custom cell markup).
+      setAnchoredEmojiRef(buttonFromTarget(element) ?? element);
       setEmojiVariationPicker(emoji);
     }
   };

package/src/index.tsx

@@ -1,12 +1,19 @@
+// The batteries-included entry promises synchronous access to the English
+// dataset. The primitives entry intentionally leaves this unregistered so
+// compositions can load it on demand.
+import './data/registerDefaultEmojiData';
+
 import * as React from 'react';
 
 import EmojiPickerReact from './EmojiPickerReact';
 import ErrorBoundary from './components/ErrorBoundary';
 import { PickerConfig } from './config/config';
 import {
-  MutableConfigContext,
+  MutableConfigProvider,
   useDefineMutableConfig,
 } from './config/mutableConfig';
+import type { PickerComponents } from './primitives/components';
+import type { ThemeValue } from './types/exposedTypes';
 
 export { ExportedEmoji as Emoji } from './components/emoji/ExportedEmoji';
 
@@ -15,16 +22,63 @@ export {
   SkinTones,
   Theme,
   Categories,
-  EmojiClickData,
   SuggestionMode,
   SkinTonePickerLocation,
+} from './types/exposedTypes';
+export type {
+  EmojiStyleValue,
+  ThemeValue,
+  SkinTonesValue,
+  EmojiClickData,
+  SuggestionModeValue,
   CategoryIcons,
   CategoryConfig,
+  EmojiData,
 } from './types/exposedTypes';
+export type {
+  PickerLabels,
+  PreviewConfig,
+  EmojiClickHandler,
+  SkinToneChangeHandler,
+  OnEmojiClickApi,
+} from './config/config';
+export type { CustomEmoji } from './config/customEmojiConfig';
+export type {
+  EmojiDataInput,
+  EmojiDataLoader,
+  EmojiDataLoaderOptions,
+} from './hooks/useResolvedEmojiData';
+export type {
+  CategoryHeaderRenderProps,
+  EmojiRenderProps,
+  ListComponents,
+  ListEmoji,
+} from './components/body/listComponents';
 
 export { emojiByUnified } from './dataUtils/emojiSelectors';
 
-export interface PickerProps extends PickerConfig {}
+// The default picker forwards identifying attributes, but leaves event handlers
+// and library-owned roles to the primitives or a consumer wrapper.
+export interface PickerProps
+  extends
+    PickerConfig,
+    React.AriaAttributes,
+    Pick<React.HTMLAttributes<HTMLElement>, 'id' | 'title' | 'lang' | 'dir'> {
+  /**
+   * Color scheme: 'light' | 'dark' | 'auto'. Preferred over `theme`, which
+   * Emotion, styled-components and MUI reserve on components they wrap
+   * (a styled(EmojiPicker) would swallow it). `theme` remains supported.
+   */
+  colorScheme?: ThemeValue;
+  /**
+   * Render without decorative styling on every managed part.
+   * Geometry, presence and navigation remain managed. Style it with `className`,
+   * `--epr-*` variables and `[data-epr-part]` selectors.
+   */
+  unstyled?: boolean;
+  /** Shared replacements for interactive controls and category headers. */
+  components?: PickerComponents;
+}
 export type Props = PickerProps;
 
 export default function EmojiPicker(props: PickerProps) {
@@ -32,13 +86,21 @@ export default function EmojiPicker(props: PickerProps) {
     onEmojiClick: props.onEmojiClick,
     onReactionClick: props.onReactionClick,
     onSkinToneChange: props.onSkinToneChange,
+    onSearchChange: props.onSearchChange,
+    onReactionsModeChange: props.onReactionsModeChange,
   });
 
   return (
     <ErrorBoundary>
-      <MutableConfigContext.Provider value={MutableConfigRef}>
+      <MutableConfigProvider value={MutableConfigRef} inheritToRoot>
         <EmojiPickerReact {...props} />
-      </MutableConfigContext.Provider>
+      </MutableConfigProvider>
     </ErrorBoundary>
   );
 }
+
+export type {
+  PickerComponents,
+  CategoryButtonRenderProps,
+  SkinToneButtonRenderProps,
+} from './primitives/components';

package/src/primitives/CategoryNav.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+import {
+  CategoryNavigation,
+  useVisibleCategoryConfigs,
+} from '../components/navigation/CategoryNavigation';
+
+import { filterPrimitiveProps } from './nativeProps';
+import { useRootScope } from './scope';
+import type { CategoryNavProps } from './types';
+
+// Public CategoryNav primitive.
+//
+// Managed tablist region. Renders nothing when fewer than two tabs would
+// be visible (mirroring the internal single-tab rule).
+export const CategoryNav = /* @__PURE__ */ React.forwardRef<
+  HTMLDivElement,
+  CategoryNavProps
+>(function CategoryNav(props, forwardedRef) {
+  const inScope = useRootScope('CategoryNav');
+  const visibleCategories = useVisibleCategoryConfigs();
+  const { orientation = 'horizontal', ...rest } = props;
+  const nativeProps = filterPrimitiveProps(rest as Record<string, unknown>, [
+    'role',
+  ]);
+
+  if (!inScope || visibleCategories.length <= 1) {
+    return null;
+  }
+
+  return (
+    <div
+      {...(nativeProps as React.HTMLAttributes<HTMLDivElement>)}
+      ref={forwardedRef}
+      data-epr-part="category-nav"
+    >
+      <CategoryNavigation orientation={orientation} />
+    </div>
+  );
+});

package/src/primitives/Empty.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { cx } from 'shipstyles';
+
+import { stylesheet } from '../Stylesheet/stylesheet';
+import { useLabels } from '../config/useConfig';
+import { useEmojiDataState } from '../hooks/useResolvedEmojiData';
+import { useAcceptedSearchValue } from '../hooks/useSearchController';
+import { useVisibleSearchResultCount } from '../hooks/useSearchResults';
+
+import { useDefaultAppearance } from './appearance';
+import { filterPrimitiveProps } from './nativeProps';
+import { useRootScope } from './scope';
+import type { EmptyProps } from './types';
+
+// Public Empty primitive: renders only while an applied search shows no
+// emojis. Children may be content or a render function receiving the
+// search text; without children it shows `labels.searchResultsNone`.
+// It is purely visual — the Search live region already announces the
+// result count, so Empty carries no live-region role of its own.
+export const Empty = /* @__PURE__ */ React.forwardRef<
+  HTMLDivElement,
+  EmptyProps
+>(function Empty(props, forwardedRef) {
+  const appearance = useDefaultAppearance();
+  const inScope = useRootScope('Empty');
+  const { children, className, ...rest } = props;
+  const nativeProps = filterPrimitiveProps(rest as Record<string, unknown>, [
+    'role',
+  ]);
+  const resultCount = useVisibleSearchResultCount();
+  const search = useAcceptedSearchValue();
+  const labels = useLabels();
+  const { loading, error } = useEmojiDataState();
+
+  if (!inScope || loading || error || resultCount !== 0) {
+    return null;
+  }
+
+  return (
+    <div
+      {...(nativeProps as React.HTMLAttributes<HTMLDivElement>)}
+      ref={forwardedRef}
+      data-epr-part="empty"
+      className={cx(styles.geometry, appearance && styles.empty, className)}
+    >
+      {typeof children === 'function'
+        ? children({ search })
+        : (children ?? labels.searchResultsNone)}
+    </div>
+  );
+});
+
+const styles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    geometry: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 'var(--epr-horizontal-padding)',
+      minHeight: 'var(--epr-emoji-fullsize)',
+    },
+    empty: {
+      '.': 'epr-empty',
+      color: 'var(--epr-text-color)',
+      fontSize: 'var(--epr-preview-text-size)',
+      textAlign: 'center',
+    },
+  }))();

package/src/primitives/List.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { cx } from 'shipstyles';
+
+import { EmojiList } from '../components/body/EmojiList';
+import { ListComponentsContext } from '../components/body/listComponents';
+import { useEmojiListRef } from '../components/context/ElementRefContext';
+
+import { usePickerComponents } from './components';
+import { filterPrimitiveProps, useMergedRefs } from './nativeProps';
+import { useRootScope, useViewportScope, useViewportScrollTop } from './scope';
+import type { ListProps } from './types';
+
+// Public List primitive.
+//
+// Managed grid region: owns category rows/groups, managed emoji buttons
+// and virtualization. Accepts no consumer children; when rendered it must
+// be the single List child of Viewport. `components` swaps the markup of
+// emoji cells and category headers while the library keeps owning their
+// behavior (consumers spread the provided props).
+export const List = /* @__PURE__ */ React.forwardRef<
+  HTMLUListElement,
+  ListProps
+>(function List(props, forwardedRef) {
+  const inRoot = useRootScope('List');
+  const { components, ...rest } = props;
+  const inheritedComponents = usePickerComponents();
+  const resolvedComponents = React.useMemo(
+    () => ({ ...inheritedComponents, ...components }),
+    [inheritedComponents, components],
+  );
+  const inViewport = useViewportScope('List');
+  const nativeProps = filterPrimitiveProps(rest as Record<string, unknown>, [
+    'role',
+  ]);
+  const { className, ...restNative } = nativeProps as Omit<
+    React.HTMLAttributes<HTMLUListElement>,
+    'role' | 'children'
+  >;
+
+  const EmojiListRef = useEmojiListRef();
+  const mergedRef = useMergedRefs(EmojiListRef, forwardedRef);
+  const scrollTop = useViewportScrollTop();
+
+  if (!inRoot || !inViewport) {
+    return null;
+  }
+
+  const list = (
+    <EmojiList
+      scrollTop={scrollTop}
+      outerRef={mergedRef}
+      className={cx(className)}
+      nativeProps={restNative}
+    />
+  );
+  return (
+    <ListComponentsContext.Provider value={resolvedComponents}>
+      {list}
+    </ListComponentsContext.Provider>
+  );
+});

package/src/primitives/LoadError.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import { useLabels } from '../config/useConfig';
+import { useEmojiDataState } from '../hooks/useResolvedEmojiData';
+
+import { filterPrimitiveProps } from './nativeProps';
+import { useRootScope } from './scope';
+import type { LoadErrorProps } from './types';
+
+/** Recoverable dataset failure; custom children receive error and retry. */
+export const LoadError = /* @__PURE__ */ React.forwardRef<
+  HTMLDivElement,
+  LoadErrorProps
+>(function LoadError({ children, ...props }, ref) {
+  const inScope = useRootScope('LoadError');
+  const { error, retry } = useEmojiDataState();
+  const labels = useLabels();
+  if (!inScope || !error) return null;
+  return (
+    <div
+      {...filterPrimitiveProps(props, ['role'])}
+      ref={ref}
+      role="alert"
+      data-epr-part="load-error"
+    >
+      {typeof children === 'function'
+        ? children({ error, retry })
+        : (children ?? (
+            <>
+              <p>{labels.loadingError}</p>
+              <button type="button" onClick={retry}>
+                {labels.retryLoading}
+              </button>
+            </>
+          ))}
+    </div>
+  );
+});

package/src/primitives/Loading.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { cx } from 'shipstyles';
+
+import { stylesheet } from '../Stylesheet/stylesheet';
+import { useLabels } from '../config/useConfig';
+import { useIsEmojiDataLoading } from '../hooks/useResolvedEmojiData';
+
+import { useDefaultAppearance } from './appearance';
+import { filterPrimitiveProps } from './nativeProps';
+import { useRootScope } from './scope';
+import type { LoadingProps } from './types';
+
+// Public Loading primitive: renders only while Root's emoji dataset is
+// loading (an `emojiData` loader, or the lazily loaded default dataset in
+// a primitives-only bundle). Without children it shows `labels.loading`.
+export const Loading = /* @__PURE__ */ React.forwardRef<
+  HTMLDivElement,
+  LoadingProps
+>(function Loading(props, forwardedRef) {
+  const appearance = useDefaultAppearance();
+  const inScope = useRootScope('Loading');
+  const { children, className, ...rest } = props;
+  const nativeProps = filterPrimitiveProps(rest as Record<string, unknown>, [
+    'role',
+  ]);
+  const loading = useIsEmojiDataLoading();
+  const labels = useLabels();
+
+  if (!inScope || !loading) {
+    return null;
+  }
+
+  return (
+    <div
+      {...(nativeProps as React.HTMLAttributes<HTMLDivElement>)}
+      ref={forwardedRef}
+      role="status"
+      data-epr-part="loading"
+      className={cx(styles.geometry, appearance && styles.loading, className)}
+    >
+      {children ?? labels.loading}
+    </div>
+  );
+});
+
+const styles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    geometry: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 'var(--epr-horizontal-padding)',
+      minHeight: 'var(--epr-emoji-fullsize)',
+    },
+    loading: {
+      '.': 'epr-loading',
+      color: 'var(--epr-text-color)',
+      fontSize: 'var(--epr-preview-text-size)',
+    },
+  }))();

package/src/primitives/Panel.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { cx } from 'shipstyles';
+
+import { useReactionsModeState } from '../components/context/PickerContext';
+import { useSingletonClaim } from '../hooks/useRegisterRegion';
+
+import { filterPrimitiveProps, useMergedRefs } from './nativeProps';
+import { useRootScope } from './scope';
+import { structuralStyles } from './structuralStyles';
+
+export type PanelProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'role' | 'hidden' | 'inert' | 'dangerouslySetInnerHTML'
+>;
+
+/** One full-picker panel; Root owns hidden/inert presence in reactions mode. */
+const PanelImpl = /* @__PURE__ */ React.forwardRef<HTMLDivElement, PanelProps>(
+  function Panel(allProps: PanelProps, ref) {
+    const { children, className, style, ...props } = allProps;
+    const inScope = useRootScope('Panel');
+    useSingletonClaim('panel');
+    const [hidden] = useReactionsModeState();
+    const setInert = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        if (!node) return;
+        if (hidden) node.setAttribute('inert', '');
+        else node.removeAttribute('inert');
+      },
+      [hidden],
+    );
+    const mergedRef = useMergedRefs(ref, setInert);
+    if (!inScope) return null;
+    return (
+      <div
+        {...filterPrimitiveProps(props, ['role', 'hidden', 'inert'])}
+        ref={mergedRef}
+        data-epr-part="panel"
+        hidden={hidden}
+        className={cx(structuralStyles.panel, className)}
+        style={{ ...style, ...(hidden && { display: 'none' }) }}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+export const Panel = /* @__PURE__ */ React.memo(PanelImpl);

package/src/primitives/Preview.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import { Preview as PreviewView } from '../components/footer/Preview';
+import { useSingletonClaim } from '../hooks/useRegisterRegion';
+
+import { filterPrimitiveProps } from './nativeProps';
+import { useRootScope } from './scope';
+import type { PreviewProps } from './types';
+
+// Public Preview primitive.
+//
+// Managed preview region. Additional controls are supplied as children;
+// omit Preview itself to omit the preview region.
+export const Preview = /* @__PURE__ */ React.forwardRef<
+  HTMLDivElement,
+  PreviewProps
+>(function Preview(props, forwardedRef) {
+  const inScope = useRootScope('Preview');
+  useSingletonClaim('preview');
+  const { children, ...rest } = props;
+  const nativeProps = filterPrimitiveProps(rest as Record<string, unknown>, [
+    'role',
+  ]);
+
+  if (!inScope) {
+    return null;
+  }
+
+  return (
+    <div
+      {...(nativeProps as React.HTMLAttributes<HTMLDivElement>)}
+      ref={forwardedRef}
+      data-epr-part="preview"
+    >
+      <PreviewView>{children}</PreviewView>
+    </div>
+  );
+});

package/src/primitives/Reactions.tsx

@@ -0,0 +1,2 @@
+export { Reactions } from '../components/Reactions/Reactions';
+export type { ReactionsProps } from '../components/Reactions/Reactions';