emoji-picker-react 4.22.3 → 5.0.0

package/package.json

@@ -1,15 +1,76 @@
 {
-  "version": "4.22.3",
+  "version": "5.0.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/esm/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "default": "./dist/index.js"
+    },
+    "./primitives": {
+      "import": {
+        "types": "./dist/primitives/index.d.mts",
+        "default": "./dist/esm/primitives/index.mjs"
+      },
+      "require": {
+        "types": "./dist/primitives/index.d.ts",
+        "default": "./dist/primitives/index.js"
+      },
+      "default": "./dist/primitives/index.js"
+    },
+    "./data": {
+      "import": {
+        "types": "./dist/data.d.mts",
+        "default": "./dist/esm/data.mjs"
+      },
+      "require": {
+        "types": "./dist/data.d.ts",
+        "default": "./dist/data/index.js"
+      },
+      "default": "./dist/data/index.js"
+    },
+    "./data/emojis-*": {
+      "import": {
+        "types": "./dist/data/emojis-*.d.mts",
+        "default": "./dist/data/emojis-*.mjs"
+      },
+      "require": {
+        "types": "./dist/data/emojis-*.d.ts",
+        "default": "./dist/data/emojis-*.js"
+      },
+      "default": "./dist/data/emojis-*.js"
+    },
+    "./dist/data/emojis-*.json": "./dist/data/emojis-*.json",
+    "./dist/data/emojis-*": {
+      "import": {
+        "types": "./dist/data/emojis-*.d.mts",
+        "default": "./dist/data/emojis-*.mjs"
+      },
+      "require": {
+        "types": "./dist/data/emojis-*.d.ts",
+        "default": "./dist/data/emojis-*.js"
+      },
+      "default": "./dist/data/emojis-*.js"
+    },
+    "./src/data/*.json": "./src/data/*.json",
+    "./package.json": "./package.json"
+  },
   "homepage": "https://ealush.com/emoji-picker-react",
   "files": [
     "dist",
     "src",
-    "llms.txt"
+    "llms.txt",
+    "llms-full.txt"
   ],
-  "description": "Emoji Picker component for React Applications on the web",
+  "description": "React emoji picker: batteries included, or BYOD (bring your own design, design language and design library). Shared keyboard navigation, localization and virtualization across styled, unstyled and composed UIs.",
   "keywords": [
     "emoji-picker",
     "react-emoji-picker",
@@ -17,14 +78,33 @@
     "emojis",
     "reactions",
     "reactions-picker",
-    "emoji-reactions"
+    "emoji-reactions",
+    "emoji picker",
+    "react emoji picker",
+    "design-system",
+    "bring-your-own-styles",
+    "plug-and-play",
+    "unstyled",
+    "headless",
+    "composable",
+    "tailwind",
+    "shadcn",
+    "accessible",
+    "a11y",
+    "typescript",
+    "nextjs",
+    "react-19",
+    "skin-tones",
+    "emoji-search",
+    "i18n",
+    "llms.txt"
   ],
   "engines": {
-    "node": ">=10"
+    "node": ">=18"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/ealush/emoji-picker-react.git"
+    "url": "git+https://github.com/ealush/emoji-picker-react.git"
   },
   "funding": [
     {
@@ -51,32 +131,43 @@
     }
   },
   "scripts": {
-    "start": "tsdx watch",
-    "build": "npm run build:data:src && npm run type-check && tsdx build --transpileOnly && npm run build:data:dist && npm run docs:llms",
+    "start": "npm run storybook",
+    "build": "npm run check:scripts && npm run clean && npm run build:data:src && npm run type-check && npm run build:data:dist && tsx ./scripts/build.ts && npm run docs:llms",
     "type-check": "tsc --noEmit --incremental --pretty --project tsconfig.json",
+    "check:contracts": "tsc --project test/v5-contract/tsconfig.json --noEmit && tsx ./scripts/checkApiDocs.ts",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:visual": "playwright test",
-    "lint": "eslint ./src --ext .ts,.tsx",
-    "prepare": "npm run build",
+    "lint": "eslint src",
+    "prepare": "husky && npm run build",
     "size": "size-limit",
     "analyze": "size-limit --why",
     "build:data:src": "tsc --project ./scripts/tsconfig.build.json && node ./scripts/dist/prepare.js",
-    "build:data:dist": "tsc --project tsconfig.data.json && node ./scripts/copyData.js",
+    "build:data:dist": "tsc --project tsconfig.data.json && tsx ./scripts/copyData.ts && tsx ./scripts/buildDataTwins.ts",
     "build:data": "npm run build:data:src && npm run build:data:dist",
-    "storybook": "npm run build:data && storybook dev -p 6006",
+    "storybook": "npm run build:data && storybook dev --host 0.0.0.0 -p 6006",
     "build-storybook": "storybook build",
-    "docs:llms": "node ./scripts/generateLlmsTxt.js",
-    "check:react-floor": "node ./scripts/checkReactApiFloor.js"
+    "docs:llms": "tsx ./scripts/generateLlmsTxt.ts",
+    "check:react-floor": "tsx ./scripts/checkReactApiFloor.ts",
+    "check:react16": "tsx ./scripts/react16-fixture/run.ts",
+    "check:package": "tsx ./scripts/package-check/run.ts",
+    "check:compat": "tsc --project ./compat/v4-usage/tsconfig.json --noEmit && tsc --project ./test/v5-contract/tsconfig.json --noEmit && tsc --project ./compat/exports-map/tsconfig.json --noEmit",
+    "check:perf": "tsx ./bench/run.ts",
+    "clean": "tsx ./scripts/clean.ts",
+    "recipes": "tsx ./scripts/generateRecipes.mts",
+    "designs": "tsx ./scripts/portDesigns.mts",
+    "registry": "tsx ./scripts/generateRegistry.mts",
+    "check:scripts": "tsc --project scripts/tsconfig.json",
+    "icons": "tsx ./scripts/buildIcons.ts",
+    "check:data-package": "tsx ./scripts/checkDataPackage.ts",
+    "check:tooling": "tsc --project tsconfig.tooling.json --noEmit",
+    "check:docs": "tsx ./scripts/checkDocsLinks.ts",
+    "check:storybook-hosts": "tsx ./scripts/checkStorybookHosts.ts",
+    "check:node18": "tsx ./scripts/node18-fixture/run.ts"
   },
   "peerDependencies": {
     "react": ">=16.8"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
-  },
   "prettier": {
     "printWidth": 80,
     "semi": true,
@@ -84,71 +175,94 @@
   },
   "name": "emoji-picker-react",
   "author": "ealush",
-  "module": "dist/emoji-picker-react.esm.js",
+  "module": "dist/esm/index.mjs",
   "size-limit": [
     {
-      "path": "dist/emoji-picker-react.cjs.production.min.js",
-      "limit": "95 KB"
+      "path": "dist/index.js",
+      "limit": "76 KB"
+    },
+    {
+      "path": "dist/esm/index.mjs",
+      "limit": "75 KB"
     },
     {
-      "path": "dist/emoji-picker-react.esm.js",
-      "limit": "95 KB"
+      "path": "dist/esm/primitives/index.mjs",
+      "limit": "75 KB"
+    },
+    {
+      "path": "dist/esm/data.mjs",
+      "limit": "42 KB"
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.18.10",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
-    "@playwright/test": "^1.46.1",
+    "@axe-core/playwright": "^4.13.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@eslint/js": "^9.39.5",
+    "@mui/material": "^9.4.0",
+    "@playwright/test": "^1.63.0",
+    "@radix-ui/react-popover": "^1.1.23",
     "@semantic-release/changelog": "^7.0.0",
     "@semantic-release/git": "^11.0.1",
     "@semantic-release/github": "^12.0.9",
     "@semantic-release/npm": "^13.1.5",
-    "@size-limit/preset-small-lib": "^8.0.1",
-    "@storybook/addon-essentials": "^8.6.15",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^8.6.15",
-    "@storybook/addon-webpack5-compiler-swc": "1.0.5",
-    "@storybook/react": "^8.6.15",
-    "@storybook/react-webpack5": "8.6.15",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.4.8",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.36.2",
-    "@typescript-eslint/parser": "^5.36.2",
-    "autoprefixer": "^10.4.8",
-    "babel-loader": "^8.2.5",
+    "@size-limit/preset-small-lib": "^14.1.0",
+    "@storybook/addon-docs": "^10.6.1",
+    "@storybook/addon-links": "^10.6.1",
+    "@storybook/react-vite": "^10.6.1",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^24.19.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "clsx": "^2.1.1",
     "conventional-changelog-conventionalcommits": "^9.3.1",
-    "cssnano": "^5.1.13",
     "emoji-datasource": "^16.0.0",
     "emojibase-data": "^17.0.0",
-    "eslint-import-resolver-typescript": "^3.3.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.31.8",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "fs-extra": "^10.1.0",
-    "glob": "^8.0.3",
-    "husky": "^8.0.1",
-    "jsdom": "^24.1.0",
-    "lodash": "^4.17.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-is": "^18.2.0",
-    "rollup-plugin-svg": "^2.0.0",
+    "esbuild": "^0.28.2",
+    "eslint": "^9.39.5",
+    "eslint-import-resolver-typescript": "^4.4.5",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "globals": "^17.13.0",
+    "husky": "^9.1.7",
+    "jsdom": "^30.1.1",
+    "postcss": "^8.5.28",
+    "prettier": "^3.9.9",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "rollup": "^4.64.0",
+    "rollup-plugin-dts": "^6.5.1",
     "semantic-release": "^25.0.9",
-    "size-limit": "^8.0.1",
-    "storybook": "8.6.15",
-    "tiny-invariant": "^1.2.0",
-    "tsdx": "^0.14.1",
+    "size-limit": "^14.1.0",
+    "storybook": "^10.6.1",
+    "styled-components": "^6.5.3",
+    "tailwind-merge": "^3.7.0",
+    "tailwindcss": "^4.3.3",
+    "terser": "5.31.0",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.4",
-    "vitest": "^4.1.11"
+    "tsx": "^4.23.15",
+    "typescript": "5.9",
+    "typescript-eslint": "^8.71.0",
+    "vite": "^8.3.2",
+    "vitest": "^5.0.3"
   },
   "dependencies": {
     "shipstyles": "1.0.0"
+  },
+  "directories": {
+    "doc": "docs",
+    "example": "example",
+    "test": "test"
+  },
+  "type": "commonjs",
+  "bugs": {
+    "url": "https://github.com/ealush/emoji-picker-react/issues"
   }
 }

package/src/DomUtils/categoryNameFromDom.ts

@@ -1,3 +1,3 @@
 export function categoryNameFromDom($category: Element | null): string | null {
-  return $category?.getAttribute('data-name') ?? null;
+  return $category?.getAttribute('data-epr-category') ?? null;
 }

package/src/DomUtils/classNames.ts

@@ -13,6 +13,7 @@ export enum ClassNames {
   emojiList = 'epr-emoji-list',
   external = '__EmojiPicker__',
   emojiPicker = 'EmojiPickerReact',
+  reactions = 'epr-reactions',
   open = 'epr-open',
   vertical = 'epr-vertical',
   horizontal = 'epr-horizontal',

package/src/DomUtils/elementPositionInRow.ts

@@ -1,4 +1,4 @@
-import { DEFAULT_LABEL_HEIGHT } from '../components/main/PickerMain';
+import { DEFAULT_LABEL_HEIGHT } from '../components/main/labelHeight';
 
 import { ClassNames, asSelectors } from './classNames';
 import { NullableElement } from './selectors';
@@ -17,7 +17,7 @@ export function elementCountInRow(
   // off by one (e.g. category padding shrinking the content box), which
   // makes arrow-up/arrow-down drift sideways by a column.
   // https://github.com/ealush/emoji-picker-react/issues/502
-  const declared = Number(parent.dataset?.emojisPerRow);
+  const declared = Number(parent.dataset?.eprEmojisPerRow);
   if (Number.isInteger(declared) && declared > 0) {
     return declared;
   }
@@ -81,8 +81,30 @@ export function getLabelHeight(parentNode: NullableElement) {
     if (height > 0) {
       return height;
     }
+    // A design that hides category titles takes no label space; falling
+    // back to the default here would offset every virtualization window
+    // by a phantom label per category.
+    if (isDisplayNone(label)) {
+      return 0;
+    }
   }
 
-  // fallback to default
-  return DEFAULT_LABEL_HEIGHT;
+  // Not laid out yet: use the documented token, then the default.
+  const token = readPxToken(parentNode, '--epr-category-label-height');
+  return token ?? DEFAULT_LABEL_HEIGHT;
+}
+
+function isDisplayNone(element: Element): boolean {
+  return (
+    typeof getComputedStyle === 'function' &&
+    getComputedStyle(element).display === 'none'
+  );
+}
+
+function readPxToken(element: Element, name: string): number | null {
+  if (typeof getComputedStyle !== 'function') {
+    return null;
+  }
+  const value = parseFloat(getComputedStyle(element).getPropertyValue(name));
+  return Number.isFinite(value) ? value : null;
 }

package/src/DomUtils/eventBelongsToPicker.ts

@@ -0,0 +1,17 @@
+/** Ignore delegated events from a picker nested inside this picker. */
+export function eventBelongsToPicker(
+  event: Event,
+  container: Element | null,
+): boolean {
+  // At window/document capture the browser retargets a shadow-root event
+  // to its host. The original composed target still identifies the picker.
+  const target = (event.composedPath?.()[0] ?? event.target) as Element | null;
+  // Inspect the target rather than a global Element constructor: realms
+  // (iframes) and DOM test environments may have different constructors.
+  return (
+    typeof target?.closest === 'function' &&
+    !!container &&
+    target.closest('[data-epr-part="root"]') ===
+      container.closest('[data-epr-part="root"]')
+  );
+}

package/src/DomUtils/getActiveElement.ts

@@ -1,5 +1,11 @@
 import { NullableElement } from './selectors';
 
 export function getActiveElement() {
-  return document.activeElement as NullableElement;
+  // document.activeElement is the host when a consumer renders the picker
+  // inside an open shadow root. Grid movement needs the focused input/cell.
+  let active = document.activeElement;
+  while (active?.shadowRoot?.activeElement) {
+    active = active.shadowRoot.activeElement;
+  }
+  return active as NullableElement;
 }

package/src/DomUtils/isJsdom.ts

@@ -0,0 +1,12 @@
+// jsdom lacks parts of the platform the picker relies on (canvas, CSS
+// cascade layers). Read the user agent from the document's window: on
+// Node >= 21 the global `navigator` is Node's own, not jsdom's.
+export function isJsdom(): boolean {
+  if (typeof document === 'undefined') {
+    return false;
+  }
+  const userAgent =
+    document.defaultView?.navigator?.userAgent ??
+    (typeof navigator !== 'undefined' ? navigator.userAgent : '');
+  return /jsdom/i.test(userAgent);
+}

package/src/DomUtils/isRtl.ts

@@ -0,0 +1,5 @@
+// Computed direction, so `dir` on any ancestor (or CSS) applies. Client
+// only: called from event handlers and an opened tone fan.
+export function isRtl(element: Element | null): boolean {
+  return !!element && getComputedStyle(element).direction === 'rtl';
+}