emoji-picker-react 4.22.3 → 5.0.1

package/src/components/Reactions/Reactions.tsx

@@ -1,58 +1,114 @@
 import * as React from 'react';
 import { cx } from 'shipstyles';
 
-import { commonStyles, stylesheet } from '../../Stylesheet/stylesheet';
+import { stylesheet } from '../../Stylesheet/stylesheet';
 import {
   MOUSE_EVENT_SOURCE,
   useEmojiStyleConfig,
   useReactionsConfig,
   useAllowExpandReactions,
   useGetEmojiUrlConfig,
+  useLabels,
 } from '../../config/useConfig';
 import { DataEmoji } from '../../dataUtils/DataTypes';
-import { emojiByUnified } from '../../dataUtils/emojiSelectors';
+import { resolveEntryId } from '../../dataUtils/suggestedEmojis';
+import { useIsEmojiDisallowed } from '../../hooks/useDisallowedEmojis';
 import { useMouseDownHandlers } from '../../hooks/useMouseDownHandlers';
+import { useRegisterRegion } from '../../hooks/useRegisterRegion';
+import { useDefaultAppearance } from '../../primitives/appearance';
+import { usePickerComponents } from '../../primitives/components';
+import {
+  filterPrimitiveProps,
+  useMergedRefs,
+} from '../../primitives/nativeProps';
+import { useRootScope } from '../../primitives/scope';
+import { EmojiStyle } from '../../types/exposedTypes';
 import { useReactionsRef } from '../context/ElementRefContext';
-import { useReactionsModeState } from '../context/PickerContext';
+import {
+  useReactionsModeState,
+  useRequestNativeProbe,
+} from '../context/PickerContext';
+import { usePickerDataContext } from '../context/PickerDataContext';
 import { ClickableEmoji } from '../emoji/Emoji';
 
 import { BtnPlus } from './BtnPlus';
 
-export function Reactions() {
+// Memoized: a direct child of the per-keystroke-rerendering Root aside.
+// Props never change (none); context slices resubscribe on real changes,
+// so typing never rerenders the bar while reactions state is untouched.
+export type ReactionsProps = Omit<
+  React.HTMLAttributes<HTMLUListElement>,
+  'role' | 'children' | 'dangerouslySetInnerHTML'
+>;
+const ReactionsImpl = /* @__PURE__ */ React.forwardRef<
+  HTMLUListElement,
+  ReactionsProps
+>(function Reactions(allProps: ReactionsProps, ref) {
+  const { className, ...props } = allProps;
+  const inScope = useRootScope('Reactions');
+  const appearance = useDefaultAppearance();
+  const { Emoji: CustomEmoji } = usePickerComponents();
+  const decorated = appearance && !CustomEmoji;
   const [reactionsOpen] = useReactionsModeState();
   const ReactionsRef = useReactionsRef();
+  const mergedRef = useMergedRefs(ref, ReactionsRef);
   const reactions = useReactionsConfig();
   useMouseDownHandlers(ReactionsRef, MOUSE_EVENT_SOURCE.REACTIONS);
   const emojiStyle = useEmojiStyleConfig();
   const allowExpandReactions = useAllowExpandReactions();
   const getEmojiUrl = useGetEmojiUrlConfig();
+  const { emojiByUnified } = usePickerDataContext();
+  const labels = useLabels();
+  const isEmojiDisallowed = useIsEmojiDisallowed();
+  const requestNativeProbe = useRequestNativeProbe();
+  // Filled while rendering: every reaction, including ones the version
+  // prediction hid, gets an exact native glyph check.
+  const shown: string[] = [];
+  React.useEffect(() => requestNativeProbe(shown));
+
+  // Registered before the closed-mode early return so collapsing the full
+  // picker registers the bar and expanding unregisters it.
+  useRegisterRegion('reactions', ReactionsRef, [reactionsOpen]);
 
-  if (!reactionsOpen) {
+  if (!inScope || !reactionsOpen) {
     return null;
   }
 
   return (
     <ul
-      className={cx(styles.list, !reactionsOpen && commonStyles.hidden)}
-      ref={ReactionsRef}
-      aria-label="Reactions"
+      {...filterPrimitiveProps(props, ['role'])}
+      className={cx(styles.list, className)}
+      ref={mergedRef}
+      aria-label={labels.reactions}
+      data-epr-part="reactions"
     >
-      {reactions.map((reaction) => {
-        const emoji = emojiByUnified(reaction);
+      {reactions.map((reaction, index) => {
+        // Reaction identifiers use the same shared Root lookup as the
+        // picker, normalized case-insensitively.
+        const raw =
+          typeof reaction === 'string' ? reaction.trim().toLowerCase() : '';
+        // Emoji characters resolve like suggestedEmojis entries.
+        const normalized = resolveEntryId(raw, emojiByUnified) || raw;
+        const emoji = normalized ? emojiByUnified(normalized) : undefined;
+        if (emoji) shown.push(normalized);
 
-        if (!emoji) {
+        if (
+          !emoji ||
+          (emojiStyle === EmojiStyle.NATIVE &&
+            isEmojiDisallowed(emoji, normalized))
+        ) {
           return null;
         }
 
         return (
-          <li key={reaction}>
+          <li key={`${index}:${normalized}`} data-epr-part="reaction">
             <ClickableEmoji
               emoji={emoji as DataEmoji}
               emojiStyle={emojiStyle}
-              unified={reaction}
+              unified={normalized}
               showVariations={false}
-              className={cx(styles.emojiButton)}
-              buttonClassName={cx(styles.reactionButton)}
+              className={cx(decorated && styles.emojiButton)}
+              buttonClassName={cx(decorated && styles.reactionButton)}
               noBackground
               getEmojiUrl={getEmojiUrl}
             />
@@ -66,47 +122,49 @@ export function Reactions() {
       ) : null}
     </ul>
   );
-}
+});
+export const Reactions = /* @__PURE__ */ React.memo(ReactionsImpl);
 
-const styles = stylesheet.create({
-  list: {
-    listStyle: 'none',
-    margin: '0',
-    padding: '0 5px',
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    height: '100%',
-  },
-  reactionButton: {
-    // Every picker button sets outline: none, and reaction buttons also
-    // suppress the focus background, so keyboard focus was invisible.
-    // Focus mirrors the hover treatment (scale plus a soft circular
-    // wash, no outline ring): the scale transform on the inner image
-    // alone is clipped by the button's overflow: hidden, and does
-    // nothing on inline native emoji, so the button itself carries the
-    // effect. Scoped to the reactions bar so grid focus treatment is
-    // untouched.
-    // https://github.com/ealush/emoji-picker-react/issues/473
-    ':focus-visible': {
-      transform: 'scale(1.2)',
-      transition:
-        'background-color 0.2s, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5)',
-      backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
-      borderRadius: '50%',
-      outline: 'none',
-    },
-  },
-  emojiButton: {
-    ':hover': {
-      transform: 'scale(1.2)',
+const styles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    list: {
+      listStyle: 'none',
+      margin: '0',
+      padding: '0 5px',
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      height: '100%',
     },
-    ':focus': {
-      transform: 'scale(1.2)',
+    reactionButton: {
+      // Every picker button sets outline: none, and reaction buttons also
+      // suppress the focus background, so keyboard focus was invisible.
+      // Focus mirrors the hover treatment (scale plus a soft circular
+      // wash, no outline ring): the scale transform on the inner image
+      // alone is clipped by the button's overflow: hidden, and does
+      // nothing on inline native emoji, so the button itself carries the
+      // effect. Scoped to the reactions bar so grid focus treatment is
+      // untouched.
+      // https://github.com/ealush/emoji-picker-react/issues/473
+      ':focus-visible': {
+        transform: 'scale(1.2)',
+        transition:
+          'background-color 0.2s, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5)',
+        backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
+        borderRadius: '50%',
+        outline: 'none',
+      },
     },
-    ':active': {
-      transform: 'scale(1.1)',
+    emojiButton: {
+      ':hover': {
+        transform: 'scale(1.2)',
+      },
+      ':focus': {
+        transform: 'scale(1.2)',
+      },
+      ':active': {
+        transform: 'scale(1.1)',
+      },
+      transition: 'transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5)',
     },
-    transition: 'transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5)',
-  },
-});
+  }))();

package/src/components/atoms/Button.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { cx } from 'shipstyles';
 
 import { stylesheet } from '../../Stylesheet/stylesheet';
+import { useDefaultAppearance } from '../../primitives/appearance';
 
 interface Props extends React.DetailedHTMLProps<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -11,28 +12,30 @@ interface Props extends React.DetailedHTMLProps<
 }
 
 export function Button(props: Props) {
+  const appearance = useDefaultAppearance();
   return (
     <button
       type="button"
       {...props}
-      className={cx(styles.button, props.className)}
+      className={cx(appearance && buttonStyles.button, props.className)}
     >
       {props.children}
     </button>
   );
 }
 
-const styles = stylesheet.create({
-  button: {
-    '.': 'epr-btn',
-    cursor: 'pointer',
-    border: '0',
-    // Longhand, not `background: 'none'`: a shorthand reset shares its
-    // conflict keys with every background longhand, so cx() would drop
-    // this whole class wherever a later class sets background-image
-    // (e.g. the category nav sprite) and the native button face would
-    // show through.
-    backgroundColor: 'transparent',
-    outline: 'none',
-  },
-});
+export const buttonStyles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    button: {
+      '.': 'epr-btn',
+      cursor: 'pointer',
+      border: '0',
+      // Longhand, not `background: 'none'`: a shorthand reset shares its
+      // conflict keys with every background longhand, so cx() would drop
+      // this whole class wherever a later class sets background-image
+      // (e.g. the category nav sprite) and the native button face would
+      // show through.
+      backgroundColor: 'transparent',
+      outline: 'none',
+    },
+  }))();

package/src/components/body/EmojiCategory.tsx

@@ -11,8 +11,11 @@ import {
   categoryIdFromCategoryConfig,
   categoryNameFromCategoryConfig,
 } from '../../config/categoryConfig';
+import { useDefaultAppearance } from '../../primitives/appearance';
 import { CategoryConfig } from '../../types/exposedTypes';
 
+import { useListComponents } from './listComponents';
+
 type Props = Readonly<{
   categoryConfig: CategoryConfig;
   children?: React.ReactNode;
@@ -20,6 +23,7 @@ type Props = Readonly<{
   hiddenOnSearch?: boolean;
   height?: number;
   emojisPerRow?: number;
+  emojiCount?: number;
 }>;
 
 export function EmojiCategory({
@@ -29,8 +33,13 @@ export function EmojiCategory({
   hiddenOnSearch,
   height,
   emojisPerRow,
+  emojiCount,
 }: Props) {
+  const appearance = useDefaultAppearance();
   const categoryName = categoryNameFromCategoryConfig(categoryConfig);
+  const categoryId = categoryIdFromCategoryConfig(categoryConfig);
+  const { CategoryHeader } = useListComponents();
+  const hasCells = React.Children.count(children) > 0;
 
   return (
     <li
@@ -39,16 +48,40 @@ export function EmojiCategory({
         hidden && commonStyles.hidden,
         hiddenOnSearch && commonInteractionStyles.hiddenOnSearch,
       )}
-      data-name={categoryIdFromCategoryConfig(categoryConfig)}
+      data-epr-part="category"
+      data-epr-category={categoryId}
       role="rowgroup"
       aria-label={categoryName}
     >
-      <h2 className={cx(styles.label)}>{categoryName}</h2>
+      {CategoryHeader ? (
+        <CategoryHeader
+          className={cx(styles.label, appearance && styles.labelAppearance)}
+          aria-hidden
+          data-epr-part="category-label"
+          category={{ id: categoryId, name: categoryName }}
+        >
+          {categoryName}
+        </CategoryHeader>
+      ) : (
+        // Visual only: the rowgroup already carries the category name, and
+        // a heading is not an allowed child of a grid rowgroup.
+        <h2
+          className={cx(styles.label, appearance && styles.labelAppearance)}
+          aria-hidden
+          data-epr-part="category-label"
+        >
+          {categoryName}
+        </h2>
+      )}
       <div
         className={cx(styles.categoryContent)}
         style={{ height }}
-        role="row"
-        data-emojis-per-row={emojisPerRow}
+        // A row must own cells: while virtualization renders none, the
+        // container is presentational.
+        role={hasCells ? 'row' : 'none'}
+        data-epr-part="category-content"
+        data-epr-emojis-per-row={emojisPerRow}
+        data-epr-emoji-count={emojiCount}
       >
         {children}
       </div>
@@ -56,39 +89,43 @@ export function EmojiCategory({
   );
 }
 
-const styles = stylesheet.create({
-  category: {
-    '.': ClassNames.category,
-    minHeight:
-      'calc(var(--epr-emoji-fullsize) + var(--epr-category-label-height))',
-    position: 'relative',
-  },
-  categoryContent: {
-    '.': ClassNames.categoryContent,
-    display: 'grid',
-    gridGap: '0',
-    gridTemplateColumns: 'repeat(auto-fill, var(--epr-emoji-fullsize))',
-    justifyContent: 'space-between',
-    margin: 'var(--epr-category-padding)',
-    position: 'relative',
-  },
-  label: {
-    '.': ClassNames.label,
-    alignItems: 'center',
-    // @ts-ignore - backdropFilter is not recognized.
-    backdropFilter: 'blur(3px)',
-    backgroundColor: 'var(--epr-category-label-bg-color)',
-    color: 'var(--epr-category-label-text-color)',
-    display: 'flex',
-    fontSize: '16px',
-    fontWeight: 'bold',
-    height: 'var(--epr-category-label-height)',
-    margin: '0',
-    padding: 'var(--epr-category-label-padding)',
-    position: 'sticky',
-    textTransform: 'capitalize',
-    top: '0',
-    width: '100%',
-    zIndex: 'var(--epr-category-label-z-index)',
-  },
-});
+const styles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    category: {
+      '.': ClassNames.category,
+      minHeight:
+        'calc(var(--epr-emoji-fullsize) + var(--epr-category-label-height))',
+      position: 'relative',
+    },
+    categoryContent: {
+      '.': ClassNames.categoryContent,
+      display: 'grid',
+      gridGap: '0',
+      gridTemplateColumns: 'repeat(auto-fill, var(--epr-emoji-fullsize))',
+      justifyContent: 'space-between',
+      margin: 'var(--epr-category-padding)',
+      position: 'relative',
+    },
+    label: {
+      '.': ClassNames.label,
+      alignItems: 'center',
+      display: 'flex',
+      height: 'var(--epr-category-label-height)',
+      margin: '0',
+      padding: 'var(--epr-category-label-padding)',
+      position: 'sticky',
+      top: '0',
+      width: '100%',
+      zIndex: 'var(--epr-category-label-z-index)',
+    },
+    labelAppearance: {
+      '.': 'epr-category-label-appearance',
+      // @ts-ignore - backdropFilter is not recognized.
+      backdropFilter: 'blur(3px)',
+      backgroundColor: 'var(--epr-category-label-bg-color)',
+      color: 'var(--epr-category-label-text-color)',
+      fontSize: '16px',
+      fontWeight: 'bold',
+      textTransform: 'capitalize',
+    },
+  }))();

package/src/components/body/EmojiList.tsx

@@ -12,36 +12,81 @@ import {
 import { useCategoriesConfig } from '../../config/useConfig';
 import { DataEmojis } from '../../dataUtils/DataTypes';
 import { useEmojiVirtualization } from '../../hooks/useEmojiVirtualization';
+import { useRegisterRegion } from '../../hooks/useRegisterRegion';
+import { useMergedRefs } from '../../primitives/nativeProps';
 import { CategoryConfig } from '../../types/exposedTypes';
-import { useEmojiListRef } from '../context/ElementRefContext';
-import { useVisibleCategoriesState } from '../context/PickerContext';
+import { OVERSCAN_ROWS } from '../../virtualization/virtualizationHelpers';
+import { useBodyRef, useEmojiListRef } from '../context/ElementRefContext';
+import {
+  useEmojiSizeState,
+  useVisibleCategoriesState,
+} from '../context/PickerContext';
 import { useGetEmojisByCategory } from '../context/PickerDataContext';
 
 import { EmojiCategory } from './EmojiCategory';
 import { MeasureEmoji } from './MeasureEmoji';
 
-export function EmojiList({ scrollTop }: { scrollTop: number }) {
+export function EmojiList({
+  scrollTop,
+  outerRef,
+  className,
+  nativeProps,
+}: {
+  scrollTop: number;
+  outerRef?: React.Ref<HTMLUListElement>;
+  className?: string;
+  nativeProps?: Omit<
+    React.HTMLAttributes<HTMLUListElement>,
+    'role' | 'children' | 'className' | 'ref'
+  >;
+}) {
   const categories = useCategoriesConfig();
   const [categoryHeights, setCategoryHeights] = React.useState<{
     [key: string]: number;
   }>({});
   const EmojiListRef = useEmojiListRef();
+  const BodyRef = useBodyRef();
+  const [emojiSize] = useEmojiSizeState();
+  const [visibleCategories] = useVisibleCategoriesState();
+  const onHeightReady = React.useCallback(
+    (categoryId: string, height: number) => {
+      setCategoryHeights((previous) =>
+        previous[categoryId] === height
+          ? previous
+          : {
+              ...previous,
+              [categoryId]: height,
+            },
+      );
+    },
+    [],
+  );
+  const mergedRef = useMergedRefs(EmojiListRef, outerRef);
   const getEmojisByCategory = useGetEmojisByCategory();
+  useRegisterRegion('grid', EmojiListRef);
 
   const labelHeight = getLabelHeight(EmojiListRef.current);
 
   let topOffset = 0;
+  // A section's offset is real once every section above it is measured.
+  let positioned = true;
   // role="grid" makes screen readers switch out of virtual-cursor mode so
   // arrow keys reach the picker's keyboard handler. Each category is one
   // rowgroup: visual rows shift under virtualization, so the category is
-  // the only stable row unit. Emoji buttons intentionally keep their
-  // native button role for activation semantics.
+  // the only stable row unit. Emoji buttons are gridcells; as native
+  // buttons they still activate with Enter and Space.
   // https://github.com/ealush/emoji-picker-react/issues/508
   // The list markup is kept for a backwards-compatible DOM structure;
   // the grid role override is intentional.
   return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
-    <ul className={cx(styles.emojiList)} ref={EmojiListRef} role="grid">
+    <ul
+      {...nativeProps}
+      className={cx(styles.emojiList, className)}
+      ref={mergedRef}
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+      role="grid"
+      data-epr-part="list"
+    >
       <MeasureEmoji />
       {categories.map((categoryConfig, index) => {
         const category = categoryFromCategoryConfig(categoryConfig);
@@ -49,6 +94,8 @@ export function EmojiList({ scrollTop }: { scrollTop: number }) {
         const group = customGroupFromCategoryConfig(categoryConfig);
 
         const currentOffset = topOffset;
+        const isPositioned = positioned;
+        positioned = positioned && categoryId in categoryHeights;
         const categoryHeight = categoryHeights[categoryId];
         if (categoryHeight) {
           topOffset += categoryHeight + labelHeight;
@@ -60,16 +107,28 @@ export function EmojiList({ scrollTop }: { scrollTop: number }) {
             categoryEmojis={getEmojisByCategory(category, group)}
             categoryConfig={categoryConfig}
             topOffset={currentOffset}
-            isFirstCategory={index === 0}
-            onHeightReady={(height) => {
-              if (categoryHeights[categoryId] !== height) {
-                setCategoryHeights((prev) => ({
-                  ...prev,
-                  [categoryId]: height,
-                }));
-              }
-            }}
-            scrollTop={scrollTop}
+            isCategoryVisible={
+              index === 0 || visibleCategories.includes(categoryId)
+            }
+            positioned={isPositioned}
+            onHeightReady={onHeightReady}
+            // Outside a section's rendering/preload margin, scrolling
+            // cannot change its cells. Keep its prop stable so it can bail.
+            scrollTop={
+              categoryHeight === undefined
+                ? scrollTop
+                : Math.max(
+                    currentOffset -
+                      (BodyRef.current?.clientHeight ?? 0) -
+                      (emojiSize || 40) * (OVERSCAN_ROWS + 1),
+                    Math.min(
+                      scrollTop,
+                      currentOffset +
+                        categoryHeight +
+                        (emojiSize || 40) * (OVERSCAN_ROWS + 1),
+                    ),
+                  )
+            }
           />
         );
       })}
@@ -77,22 +136,28 @@ export function EmojiList({ scrollTop }: { scrollTop: number }) {
   );
 }
 
-function RenderCategory({
+const RenderCategory = /* @__PURE__ */ React.memo(function RenderCategory({
   categoryEmojis,
   categoryConfig,
   topOffset,
   onHeightReady,
   scrollTop,
-  isFirstCategory,
+  isCategoryVisible,
+  positioned,
 }: {
   categoryEmojis: DataEmojis;
   categoryConfig: CategoryConfig;
   topOffset: number;
-  onHeightReady: (height: number) => void;
+  onHeightReady: (categoryId: string, height: number) => void;
   scrollTop: number;
-  isFirstCategory: boolean;
+  isCategoryVisible: boolean;
+  positioned: boolean;
 }) {
-  const [visibleCategories] = useVisibleCategoriesState();
+  const categoryId = categoryIdFromCategoryConfig(categoryConfig);
+  const reportHeight = React.useCallback(
+    (height: number) => onHeightReady(categoryId, height),
+    [categoryId, onHeightReady],
+  );
 
   // The observer is the only writer of visibleCategories. When it never
   // fires (zero-height container at mount, hidden modal), no category
@@ -100,25 +165,22 @@ function RenderCategory({
   // the deadlock; the observer takes over from there.
   // https://github.com/ealush/emoji-picker-react/issues/469
   // https://github.com/ealush/emoji-picker-react/issues/475
-  const isCategoryVisible =
-    isFirstCategory ||
-    visibleCategories.includes(
-      categoryIdFromCategoryConfig(categoryConfig),
-    );
-
-  const { virtualizedCounter, emojis, dimensions } = useEmojiVirtualization({
-    categoryEmojis,
-    topOffset,
-    onHeightReady,
-    scrollTop,
-    isCategoryVisible,
-  });
+  const { virtualizedCounter, emojis, dimensions, emojiCount } =
+    useEmojiVirtualization({
+      categoryEmojis,
+      topOffset,
+      onHeightReady: reportHeight,
+      scrollTop,
+      isCategoryVisible,
+      positioned,
+    });
 
   return (
     <EmojiCategory
       categoryConfig={categoryConfig}
       height={dimensions?.categoryHeight}
       emojisPerRow={dimensions?.emojisPerRow}
+      emojiCount={emojiCount}
       // Indicates that there are no visible emojis
       // Hence, the category should be hidden
       hidden={!emojis.length && virtualizedCounter === 0}
@@ -126,13 +188,14 @@ function RenderCategory({
       {emojis}
     </EmojiCategory>
   );
-}
-
-const styles = stylesheet.create({
-  emojiList: {
-    '.': ClassNames.emojiList,
-    listStyle: 'none',
-    margin: '0',
-    padding: '0',
-  },
 });
+
+const styles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    emojiList: {
+      '.': ClassNames.emojiList,
+      listStyle: 'none',
+      margin: '0',
+      padding: '0',
+    },
+  }))();