emoji-picker-react 4.22.2 → 5.0.0

package/src/EmojiPickerReact.tsx

@@ -1,75 +1,182 @@
 import * as React from 'react';
 
-import { PickerStyleTag } from './Stylesheet/stylesheet';
-import { Reactions } from './components/Reactions/Reactions';
-import { Body } from './components/body/Body';
-import { ElementRefContextProvider } from './components/context/ElementRefContext';
-import { PickerConfigProvider } from './components/context/PickerConfigContext';
-import { useReactionsModeState } from './components/context/PickerContext';
-import { PickerDataProvider } from './components/context/PickerDataContext';
-import { Preview } from './components/footer/Preview';
 import { Header } from './components/header/Header';
-import PickerMain from './components/main/PickerMain';
+import {
+  defaultRootClassName,
+  defaultRootStyle,
+} from './components/main/defaultAppearance';
 import { compareConfig } from './config/compareConfig';
-import { useAllowExpandReactions, useOpenConfig } from './config/useConfig';
+import { resolveSkinTonePickerLocation } from './config/config';
+import { DefaultPickerConfiguration } from './config/defaultPickerConfiguration';
+import {
+  validColumns,
+  usePreviewConfig,
+  useSkinTonesDisabledConfig,
+} from './config/useConfig';
+import { useIsSkinToneInPreview } from './hooks/useShouldShowSkinTonePicker';
+import {
+  Empty,
+  List,
+  Loading,
+  LoadError,
+  Preview,
+  SkinTone,
+  Panel,
+  Reactions,
+  Root,
+  Viewport,
+} from './primitives';
+import { isPickerBehaviorProp } from './primitives/Root';
+import type { RootBehaviorProps, RootProps } from './primitives/types';
+import { SkinTonePickerLocation } from './types/exposedTypes';
 
 import { PickerProps } from './index';
 
+// Canonical default composition: the
+// default picker is assembled from the same exported primitive modules
+// advanced consumers use. Private wrappers provide appearance/layout only;
+// all behavior lives in the shared primitives below.
 function EmojiPicker(props: PickerProps) {
+  const rootInput = props as PickerProps & {
+    colorScheme?: PickerProps['theme'];
+    unstyled?: boolean;
+    components?: RootProps['components'];
+  };
+  const {
+    theme: legacyTheme,
+    colorScheme,
+    width,
+    height,
+    className,
+    style,
+    unstyled,
+    components,
+    open,
+    searchDisabled = false,
+    skinTonesDisabled = false,
+    skinTonePickerLocation = SkinTonePickerLocation.SEARCH,
+    previewConfig,
+    ...rest
+  } = rootInput;
+  const theme = colorScheme ?? legacyTheme;
+  const showPreview = previewConfig?.showPreview ?? true;
+  const resolvedLocation = resolveSkinTonePickerLocation(
+    skinTonePickerLocation,
+    searchDisabled,
+    showPreview,
+  );
+  const defaultConfiguration = {
+    searchDisabled,
+    skinTonesDisabled,
+    skinTonePickerLocation: resolvedLocation,
+    previewConfig,
+    // Closed, as in v4, keeps the picker's state (skin tone, search,
+    // reactions mode) and renders nothing.
+    open: open !== false,
+  };
+  const { behaviorProps, unknownProps } = pickBehaviorProps(rest);
+  useUnknownPropsWarning(unknownProps);
+
   return (
-    <ElementRefContextProvider>
-      <PickerStyleTag nonce={props.nonce} />
-      <PickerConfigProvider {...props}>
-        <PickerDataProvider>
-          <ContentControl />
-        </PickerDataProvider>
-      </PickerConfigProvider>
-    </ElementRefContextProvider>
+    <DefaultPickerConfiguration.Provider value={defaultConfiguration}>
+      <Root
+        appearance={unstyled ? 'none' : 'default'}
+        components={components}
+        {...(behaviorProps as RootBehaviorProps)}
+        className={defaultRootClassName(theme, className, unstyled)}
+        style={defaultRootStyle({
+          width,
+          height,
+          style,
+          columns: validColumns(props.columns),
+        })}
+      >
+        <Reactions />
+        <Panel>{CONTENT}</Panel>
+      </Root>
+    </DefaultPickerConfiguration.Provider>
   );
 }
 
-function ContentControl() {
-  const [reactionsDefaultOpen] = useReactionsModeState();
-  const allowExpandReactions = useAllowExpandReactions();
+const NATIVE_ATTRIBUTES: ReadonlySet<string> = new Set([
+  'id',
+  'title',
+  'lang',
+  'dir',
+]);
 
-  const [renderAll, setRenderAll] = React.useState(!reactionsDefaultOpen);
-  const isOpen = useOpenConfig();
-
-  React.useEffect(() => {
-    if (reactionsDefaultOpen && !allowExpandReactions) {
-      return;
-    }
+function isNativeAttribute(key: string): boolean {
+  return (
+    NATIVE_ATTRIBUTES.has(key) ||
+    key.startsWith('aria-') ||
+    key.startsWith('data-')
+  );
+}
 
-    if (!renderAll) {
-      setRenderAll(true);
+// Picker props and plain identifying attributes (id, aria-*, data-*) reach
+// Root; anything else is dropped, as in v4. Forwarding every prop would
+// leak removed v3/v4 props such as `pickerStyle` onto the aside as invalid
+// attributes, or turn stray handlers live.
+function pickBehaviorProps(props: object): {
+  behaviorProps: Record<string, unknown>;
+  unknownProps: string;
+} {
+  const behaviorProps: Record<string, unknown> = {};
+  const unknown: string[] = [];
+  const values = props as Record<string, unknown>;
+  for (const key of Object.keys(values)) {
+    if (isPickerBehaviorProp(key) || isNativeAttribute(key)) {
+      behaviorProps[key] = values[key];
+    } else {
+      unknown.push(key);
     }
-  }, [renderAll, allowExpandReactions, reactionsDefaultOpen]);
-
-  if (!isOpen) {
-    return null;
   }
+  return { behaviorProps, unknownProps: unknown.join(', ') };
+}
 
-  return (
-    <PickerMain>
-      <Reactions />
-      <ExpandedPickerContent renderAll={renderAll} />
-    </PickerMain>
-  );
+const useUnknownPropsWarning: (unknownProps: string) => void =
+  process.env.NODE_ENV === 'production'
+    ? () => undefined
+    : useDevUnknownPropsWarning;
+
+function useDevUnknownPropsWarning(unknownProps: string) {
+  React.useEffect(() => {
+    if (unknownProps) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `[emoji-picker-react] Ignoring unknown prop(s): ${unknownProps}. ` +
+          'See docs/v5/MIGRATION.md for removed props.',
+      );
+    }
+  }, [unknownProps]);
 }
 
-function ExpandedPickerContent({ renderAll }: { renderAll: boolean }) {
-  if (!renderAll) {
-    return null;
-  }
+function ContentControl() {
+  const showPreview = usePreviewConfig().showPreview;
+  const skinTonesDisabled = useSkinTonesDisabledConfig();
+  const toneInPreview = useIsSkinToneInPreview();
 
   return (
     <>
       <Header />
-      <Body />
-      <Preview />
+      <Viewport>
+        <List />
+        <Empty />
+        <Loading />
+        <LoadError />
+      </Viewport>
+      {showPreview && (
+        <Preview>
+          {!skinTonesDisabled && toneInPreview && (
+            <SkinTone orientation="vertical" />
+          )}
+        </Preview>
+      )}
     </>
   );
 }
 
-// eslint-disable-next-line complexity
-export default React.memo(EmojiPicker, compareConfig);
+// One immutable composition element; state still belongs to each mounted Root.
+const CONTENT = /* @__PURE__ */ React.createElement(ContentControl);
+
+export default /* @__PURE__ */ React.memo(EmojiPicker, compareConfig);

package/src/Stylesheet/DedupedStyle.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+
+import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
+
+type Claim = { update: () => void; detached: () => boolean };
+
+// Root node (a document or shadow root) → nonce and CSS text → mounted
+// claims, in mount order. The first claim renders the style element; the
+// rest render nothing. A page with a picker per message otherwise repeats
+// the full library sheet once per picker.
+const claimsByRoot = new WeakMap<Node, Record<string, Claim[]>>();
+
+/**
+ * Renders `css` once per document or shadow root. Every instance renders
+ * the element during SSR and its first client render, so hydration matches
+ * the server markup; duplicates drop right after the first paint.
+ * When the owner unmounts, the next instance renders the element in the
+ * same commit. A different nonce or layer gets its own element: a style
+ * allowed by one nonce must not stand in for another under CSP.
+ */
+export function DedupedStyle({ css, nonce }: { css: string; nonce?: string }) {
+  const styleRef = React.useRef<HTMLStyleElement>(null);
+  const rootRef = React.useRef<Node | undefined>(undefined);
+  const [owner, setOwner] = React.useState(true);
+
+  const syncRef = React.useRef<(() => void) | undefined>(undefined);
+
+  // Register in the commit that mounts the element, so ownership is known
+  // before any later picker mounts. A sibling's ownership changes only on
+  // unmount (below) and after paint: a state update during layout effects
+  // would flush every pending passive effect into the mount, delaying the
+  // first paint of the whole picker.
+  useIsomorphicLayoutEffect(() => {
+    const style = styleRef.current;
+    const root = (rootRef.current =
+      rootRef.current || (style ? style.getRootNode() : undefined));
+    if (!root) {
+      return;
+    }
+    const byKey = claimsByRoot.get(root) || {};
+    claimsByRoot.set(root, byKey);
+    const key = nonce + css;
+    const claims = (byKey[key] = byKey[key] || []);
+    const claim: Claim = {
+      update: () => setOwner(claims[0] === claim),
+      detached: () => !!styleRef.current && !styleRef.current.isConnected,
+    };
+    // An owner whose element left the document without unmounting (its
+    // container was removed by hand) cannot style anything: it yields.
+    const sync = (syncRef.current = () => {
+      claims.sort((a, b) => +a.detached() - +b.detached());
+      claims.forEach((each) => each.update());
+    });
+    claims.push(claim);
+
+    return () => {
+      syncRef.current = undefined;
+      claims.splice(claims.indexOf(claim), 1);
+      // The next picker takes over in this same commit: no unstyled frame.
+      if (claims.length) {
+        sync();
+      } else {
+        delete byKey[key];
+      }
+    };
+  }, [css, nonce]);
+
+  React.useEffect(() => {
+    if (syncRef.current) syncRef.current();
+  }, [css, nonce]);
+
+  return owner ? (
+    <style
+      ref={styleRef}
+      nonce={nonce}
+      suppressHydrationWarning
+      dangerouslySetInnerHTML={{ __html: css }}
+    />
+  ) : null;
+}

package/src/Stylesheet/stylesheet.tsx

@@ -2,8 +2,55 @@ import * as React from 'react';
 import { Styles, createSheet } from 'shipstyles';
 
 import { ClassNames } from '../DomUtils/classNames';
+import { isJsdom } from '../DomUtils/isJsdom';
 
-export const stylesheet = createSheet('epr', null);
+import { DedupedStyle } from './DedupedStyle';
+
+// No DOM root: allocating this sheet has no observable effect when its
+// consumers are unused. Keep component style construction in annotated,
+// argument-free factories so bundlers can drop an unused part together
+// with its styles/icons (including darkMode argument construction).
+// A rendered part references its style handles and retains its factory.
+// Default emoji-data registration is intentionally NOT marked pure.
+export const stylesheet = /* @__PURE__ */ createSheet('epr', null);
+
+/**
+ * Library CSS is unlayered by default, like v4: library classes win over
+ * ordinary element/universal resets (`* { padding: 0 }`, `input { … }`),
+ * which unlayered app CSS would otherwise apply over a layered library.
+ *
+ * Design-token declarations (`--epr-*`) are emitted at zero specificity
+ * (`:where(…)`), so any consumer selector — one class, any load order —
+ * overrides them.
+ *
+ * `cssLayer` opts into a named cascade layer for layered frameworks
+ * (Tailwind v4 utilities cannot beat unlayered CSS): declare it first,
+ * e.g. `@layer epr, theme, base, components, utilities;`.
+ */
+const TOKEN_RULE = /^([^{}@][^{}]*?)\s*\{((?:\s*--[\w-]+\s*:[^;{}]*;?)+)\s*\}$/;
+const CSS_LAYER_NAME =
+  /^(?:[a-zA-Z_]|-[a-zA-Z_-])[a-zA-Z0-9_-]*(?:\.(?:[a-zA-Z_]|-[a-zA-Z_-])[a-zA-Z0-9_-]*)*$/;
+
+export function finalizeCss(css: string, cssLayer?: string): string {
+  if (!css) {
+    return css;
+  }
+  // jsdom supports neither @layer nor :where reliably; keep plain CSS
+  // there so jsdom suites keep computed styles.
+  if (isJsdom()) {
+    return css;
+  }
+  const out = css
+    .split('\n')
+    .map((line) => {
+      const match = TOKEN_RULE.exec(line.trim());
+      return match ? `:where(${match[1]}) {${match[2]}}` : line;
+    })
+    .join('\n');
+  return cssLayer && CSS_LAYER_NAME.test(cssLayer)
+    ? `@layer ${cssLayer}{${out}}`
+    : out;
+}
 
 const hidden = {
   display: 'none',
@@ -13,76 +60,98 @@ const hidden = {
   overflow: 'hidden',
 };
 
-export const commonStyles = stylesheet.create({
-  hidden: {
-    '.': ClassNames.hidden,
-    ...hidden,
-  },
-});
+export const commonStyles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    hidden: {
+      '.': ClassNames.hidden,
+      ...hidden,
+    },
+  }))();
 
-export const PickerStyleTag = React.memo(function PickerStyleTag({
-  nonce,
-}: {
-  nonce?: string;
-}) {
-  return (
-    <style
-      nonce={nonce}
-      suppressHydrationWarning
-      dangerouslySetInnerHTML={{ __html: stylesheet.getStyle() }}
-    />
-  );
-});
+export const PickerStyleTag = /* @__PURE__ */ React.memo(
+  function PickerStyleTag({
+    nonce,
+    cssLayer,
+  }: {
+    nonce?: string;
+    cssLayer?: string;
+  }) {
+    return (
+      <DedupedStyle
+        nonce={nonce}
+        css={finalizeCss(stylesheet.getStyle(), cssLayer)}
+      />
+    );
+  },
+);
 
-export const commonInteractionStyles = stylesheet.create({
-  '.epr-main': {
-    ':has(input:not(:placeholder-shown))': {
-      categoryBtn: {
-        ':hover': {
-          opacity: '1',
-          color: 'var(--epr-category-icon-active-color, #3371B7)',
+// Behavioral state selectors are scoped to the structural root class that
+// every Root carries (default picker and bare primitives alike). Scoping
+// them to the default appearance's classes (epr-main / EmojiPickerReact)
+// left bare compositions with an always-visible clear button, no active
+// category tab state, and search-hidden items that never hid.
+export const commonInteractionStyles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    '.epr-structural-root': {
+      ':has(input:not(:placeholder-shown))': {
+        categoryBtn: {
+          ':hover': {
+            opacity: '1',
+            color: 'var(--epr-category-icon-active-color, #3371B7)',
+          },
+        },
+        hiddenOnSearch: {
+          '.': ClassNames.hiddenOnSearch,
+          ...hidden,
         },
       },
-      hiddenOnSearch: {
-        '.': ClassNames.hiddenOnSearch,
-        ...hidden,
+      ':has(input:placeholder-shown)': {
+        visibleOnSearchOnly: hidden,
       },
     },
-    ':has(input:placeholder-shown)': {
-      visibleOnSearchOnly: hidden,
-    },
-  },
-  hiddenOnReactions: {
-    transition: 'all 0.5s ease-in-out',
-  },
-  '.epr-reactions': {
     hiddenOnReactions: {
-      height: '0px',
-      width: '0px',
-      opacity: '0',
-      pointerEvents: 'none',
-      overflow: 'hidden',
+      transition: 'all 0.5s ease-in-out',
     },
-  },
-  '.EmojiPickerReact:not(.epr-search-active)': {
-    categoryBtn: {
-      ':hover': {
-        opacity: '1',
-        color: 'var(--epr-category-icon-active-color, #3371B7)',
-      },
-      '&.epr-active': {
-        opacity: '1',
-        color: 'var(--epr-category-icon-active-color, #3371B7)',
+    '.epr-reactions': {
+      hiddenOnReactions: {
+        height: '0px',
+        width: '0px',
+        opacity: '0',
+        pointerEvents: 'none',
+        overflow: 'hidden',
       },
     },
-    visibleOnSearchOnly: {
-      '.': 'epr-visible-on-search-only',
-      ...hidden,
+    '.epr-structural-root:not(.epr-search-active)': {
+      categoryBtn: {
+        ':hover': {
+          opacity: '1',
+          color: 'var(--epr-category-icon-active-color, #3371B7)',
+        },
+        '&.epr-active': {
+          opacity: '1',
+          color: 'var(--epr-category-icon-active-color, #3371B7)',
+        },
+      },
+      visibleOnSearchOnly: {
+        '.': 'epr-visible-on-search-only',
+        ...hidden,
+      },
     },
-  },
-});
+  }))();
 
-export function darkMode(key: string, value: Styles) {
+// Explicit return type: the inferred shape references shipstyles'
+// private PostConditionStyles, which declaration emit cannot name
+// (TS4058). Spelling it with the exported Styles type keeps entry
+// declaration emit clean.
+export function darkMode(
+  key: string,
+  value: Styles,
+): {
+  '.epr-dark-theme': { [styleKey: string]: Styles };
+  '.epr-auto-theme': {
+    [styleKey: string]: { '@media (prefers-color-scheme: dark)': Styles };
+  };
+} {
   return {
     '.epr-dark-theme': {
       [key]: value,

package/src/components/Layout/Flex.tsx

@@ -31,14 +31,15 @@ export default function Flex({
   );
 }
 
-const styles = stylesheet.create({
-  flex: {
-    display: 'flex',
-  },
-  [FlexDirection.ROW]: {
-    flexDirection: 'row',
-  },
-  [FlexDirection.COLUMN]: {
-    flexDirection: 'column',
-  },
-});
+const styles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    flex: {
+      display: 'flex',
+    },
+    [FlexDirection.ROW]: {
+      flexDirection: 'row',
+    },
+    [FlexDirection.COLUMN]: {
+      flexDirection: 'column',
+    },
+  }))();

package/src/components/Reactions/BtnPlus.tsx

@@ -2,65 +2,75 @@ import * as React from 'react';
 import { cx } from 'shipstyles';
 
 import { darkMode, stylesheet } from '../../Stylesheet/stylesheet';
+import { useLabels } from '../../config/useConfig';
+import { useDefaultAppearance } from '../../primitives/appearance';
+import { usePickerComponents } from '../../primitives/components';
 import { Button } from '../atoms/Button';
 import { useReactionsModeState } from '../context/PickerContext';
-
-import Plus from './svg/plus.svg';
+import { PLUS_ICON as Plus } from '../icons/svgIcons';
 
 export function BtnPlus() {
   const [, setReactionsMode] = useReactionsModeState();
-  return (
-    <Button
-      aria-label="Show all Emojis"
-      title="Show all Emojis"
-      tabIndex={0}
-      className={cx(styles.plusSign)}
-      onClick={() => setReactionsMode(false)}
-    />
-  );
+  const labels = useLabels();
+  const appearance = useDefaultAppearance();
+  const { ExpandButton: Custom } = usePickerComponents();
+  const props = {
+    type: 'button' as const,
+    'aria-label': labels.expandReactions,
+    title: labels.expandReactions,
+    tabIndex: 0,
+    className: cx(appearance && !Custom && styles.plusSign),
+    'data-epr-part': 'expand-reactions',
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (!event.defaultPrevented) setReactionsMode(false);
+    },
+    children: appearance && !Custom ? undefined : '+',
+  };
+  return Custom ? <Custom {...props} /> : <Button {...props} />;
 }
 
-const styles = stylesheet.create({
-  plusSign: {
-    fontSize: '20px',
-    padding: '17px',
-    color: 'var(--epr-text-color)',
-    borderRadius: '50%',
-    textAlign: 'center',
-    lineHeight: '100%',
-    width: '20px',
-    height: '20px',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    transition: 'background-color 0.2s ease-in-out',
-    ':after': {
-      content: '',
-      minWidth: '20px',
-      minHeight: '20px',
-      backgroundImage: `url(${Plus})`,
-      backgroundColor: 'transparent',
-      backgroundRepeat: 'no-repeat',
-      backgroundSize: '20px',
-      backgroundPositionY: '0',
-    },
-    ':hover': {
-      color: 'var(--epr-highlight-color)',
-      backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
+const styles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    plusSign: {
+      fontSize: '20px',
+      padding: '17px',
+      color: 'var(--epr-text-color)',
+      borderRadius: '50%',
+      textAlign: 'center',
+      lineHeight: '100%',
+      width: '20px',
+      height: '20px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      transition: 'background-color 0.2s ease-in-out',
       ':after': {
-        backgroundPositionY: '-20px',
+        content: '',
+        minWidth: '20px',
+        minHeight: '20px',
+        backgroundImage: `url("${Plus}")`,
+        backgroundColor: 'transparent',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '20px',
+        backgroundPositionY: '0',
       },
-    },
-    ':focus': {
-      color: 'var(--epr-highlight-color)',
-      backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
-      ':after': {
-        backgroundPositionY: '-40px',
+      ':hover': {
+        color: 'var(--epr-highlight-color)',
+        backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
+        ':after': {
+          backgroundPositionY: '-20px',
+        },
+      },
+      ':focus': {
+        color: 'var(--epr-highlight-color)',
+        backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
+        ':after': {
+          backgroundPositionY: '-40px',
+        },
       },
     },
-  },
-  ...darkMode('plusSign', {
-    ':after': { backgroundPositionY: '-40px' },
-    ':hover:after': { backgroundPositionY: '-60px' },
-  }),
-});
+    ...darkMode('plusSign', {
+      ':after': { backgroundPositionY: '-40px' },
+      ':hover:after': { backgroundPositionY: '-60px' },
+    }),
+  }))();