@mantine/emoji 0.0.0-stage → 9.8.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Vitaly Rtishchev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,21 @@
-# Temporary Holding Version
+# @mantine/emoji
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![npm](https://img.shields.io/npm/dm/@mantine/emoji)](https://www.npmjs.com/package/@mantine/emoji)
+
+Emoji picker components for Mantine
+
+[View documentation](https://mantine.dev/)
+
+## Installation
+
+```bash
+# With yarn
+yarn add @mantine/emoji
+
+# With npm
+npm install @mantine/emoji
+```
+
+## License
+
+MIT

package/cjs/adapters/emoji-mart-adapter.cjs

@@ -0,0 +1,30 @@
+"use client";
+const require_categories = require("../categories.cjs");
+// packages/@mantine/emoji/src/adapters/emoji-mart-adapter.ts
+function emojiMartAdapter(input) {
+	const data = input;
+	const emojis = {};
+	for (const [id, emojiMartEmoji] of Object.entries(data.emojis)) {
+		const defaultSkin = emojiMartEmoji.skins[0];
+		const skinVariants = emojiMartEmoji.skins.length === 6 ? emojiMartEmoji.skins.slice(1).map((s) => s.native) : void 0;
+		emojis[id] = {
+			id,
+			name: emojiMartEmoji.name,
+			keywords: emojiMartEmoji.keywords,
+			emoji: defaultSkin.native,
+			skins: skinVariants,
+			version: emojiMartEmoji.version
+		};
+	}
+	return {
+		categories: data.categories.map((cat) => ({
+			id: cat.id,
+			label: require_categories.getCanonicalCategoryLabel(cat.id) || cat.id,
+			emojis: cat.emojis
+		})),
+		emojis
+	};
+}
+exports.emojiMartAdapter = emojiMartAdapter;
+
+//# sourceMappingURL=emoji-mart-adapter.cjs.map

package/cjs/adapters/emoji-mart-adapter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-mart-adapter.cjs","names":["getCanonicalCategoryLabel"],"sources":["../../src/adapters/emoji-mart-adapter.ts"],"sourcesContent":["import { getCanonicalCategoryLabel } from '../categories';\nimport type { EmojiPickerCategory, EmojiPickerData, EmojiPickerEmoji } from '../types';\n\ninterface EmojiMartSkin {\n  unified: string;\n  native: string;\n}\n\ninterface EmojiMartEmoji {\n  id: string;\n  name: string;\n  keywords: string[];\n  skins: EmojiMartSkin[];\n  version: number;\n}\n\ninterface EmojiMartCategory {\n  id: string;\n  emojis: string[];\n}\n\ninterface EmojiMartData {\n  categories: EmojiMartCategory[];\n  emojis: Record<string, EmojiMartEmoji>;\n}\n\nexport function emojiMartAdapter(data: EmojiMartData): EmojiPickerData;\nexport function emojiMartAdapter(data: object): EmojiPickerData;\nexport function emojiMartAdapter(input: object): EmojiPickerData {\n  const data = input as EmojiMartData;\n  const emojis: Record<string, EmojiPickerEmoji> = {};\n\n  for (const [id, emojiMartEmoji] of Object.entries(data.emojis)) {\n    const defaultSkin = emojiMartEmoji.skins[0];\n    const skinVariants =\n      emojiMartEmoji.skins.length === 6\n        ? emojiMartEmoji.skins.slice(1).map((s) => s.native)\n        : undefined;\n\n    emojis[id] = {\n      id,\n      name: emojiMartEmoji.name,\n      keywords: emojiMartEmoji.keywords,\n      emoji: defaultSkin.native,\n      skins: skinVariants,\n      version: emojiMartEmoji.version,\n    };\n  }\n\n  const categories: EmojiPickerCategory[] = data.categories.map((cat) => ({\n    id: cat.id,\n    label: getCanonicalCategoryLabel(cat.id) || cat.id,\n    emojis: cat.emojis,\n  }));\n\n  return { categories, emojis };\n}\n"],"mappings":";;;AA4BA,SAAgB,iBAAiB,OAAgC;CAC/D,MAAM,OAAO;CACb,MAAM,SAA2C,CAAC;CAElD,KAAK,MAAM,CAAC,IAAI,mBAAmB,OAAO,QAAQ,KAAK,MAAM,GAAG;EAC9D,MAAM,cAAc,eAAe,MAAM;EACzC,MAAM,eACJ,eAAe,MAAM,WAAW,IAC5B,eAAe,MAAM,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,EAAE,MAAM,IACjD,KAAA;EAEN,OAAO,MAAM;GACX;GACA,MAAM,eAAe;GACrB,UAAU,eAAe;GACzB,OAAO,YAAY;GACnB,OAAO;GACP,SAAS,eAAe;EAC1B;CACF;CAQA,OAAO;EAAE,YANiC,KAAK,WAAW,KAAK,SAAS;GACtE,IAAI,IAAI;GACR,OAAOA,mBAAAA,0BAA0B,IAAI,EAAE,KAAK,IAAI;GAChD,QAAQ,IAAI;EACd,EAEkB;EAAG;CAAO;AAC9B"}

package/cjs/adapters/emojibase-adapter.cjs

@@ -0,0 +1,76 @@
+"use client";
+const require_categories = require("../categories.cjs");
+// packages/@mantine/emoji/src/adapters/emojibase-adapter.ts
+const GROUP_TO_CANONICAL = {
+	0: "people",
+	1: "people",
+	3: "nature",
+	4: "foods",
+	5: "places",
+	6: "activity",
+	7: "objects",
+	8: "symbols",
+	9: "flags"
+};
+const CATEGORY_ORDER = require_categories.CANONICAL_CATEGORY_IDS.filter((id) => id !== "frequent");
+function getUniformTone(tone) {
+	if (typeof tone === "number") return tone;
+	if (Array.isArray(tone) && tone.length > 0 && tone.every((t) => t === tone[0])) return tone[0];
+	return null;
+}
+function getSkinVariants(skins) {
+	if (!skins || skins.length === 0) return;
+	const byTone = /* @__PURE__ */ new Map();
+	for (const skin of skins) {
+		const tone = getUniformTone(skin.tone);
+		if (tone !== null && !byTone.has(tone)) byTone.set(tone, skin.emoji);
+	}
+	const variants = [
+		1,
+		2,
+		3,
+		4,
+		5
+	].map((tone) => byTone.get(tone));
+	return variants.every((variant) => variant !== void 0) ? variants : void 0;
+}
+function emojibaseAdapter(data, messages) {
+	const emojis = {};
+	const categoryEmojis = /* @__PURE__ */ new Map();
+	const groupLabels = /* @__PURE__ */ new Map();
+	for (const group of messages.groups) groupLabels.set(group.order, group.message);
+	for (const emojibaseEmoji of data) {
+		if (emojibaseEmoji.group === void 0) continue;
+		const canonicalId = GROUP_TO_CANONICAL[emojibaseEmoji.group];
+		if (!canonicalId) continue;
+		const id = emojibaseEmoji.hexcode;
+		emojis[id] = {
+			id,
+			name: emojibaseEmoji.label,
+			keywords: emojibaseEmoji.tags || [],
+			emoji: emojibaseEmoji.emoji,
+			skins: getSkinVariants(emojibaseEmoji.skins),
+			version: emojibaseEmoji.version
+		};
+		if (!categoryEmojis.has(canonicalId)) categoryEmojis.set(canonicalId, []);
+		categoryEmojis.get(canonicalId).push(emojibaseEmoji);
+	}
+	const categories = [];
+	for (const canonicalId of CATEGORY_ORDER) {
+		const items = categoryEmojis.get(canonicalId);
+		if (!items) continue;
+		items.sort((a, b) => (a.order ?? Number.MAX_SAFE_INTEGER) - (b.order ?? Number.MAX_SAFE_INTEGER));
+		categories.push({
+			id: canonicalId,
+			label: require_categories.CANONICAL_CATEGORY_LABELS[canonicalId] || groupLabels.get(items[0].group) || canonicalId,
+			emojis: items.map((item) => item.hexcode)
+		});
+	}
+	return {
+		categories,
+		emojis
+	};
+}
+exports.emojibaseAdapter = emojibaseAdapter;
+
+//# sourceMappingURL=emojibase-adapter.cjs.map

package/cjs/adapters/emojibase-adapter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"emojibase-adapter.cjs","names":["CANONICAL_CATEGORY_IDS","CANONICAL_CATEGORY_LABELS"],"sources":["../../src/adapters/emojibase-adapter.ts"],"sourcesContent":["import {\n  CANONICAL_CATEGORY_IDS,\n  CANONICAL_CATEGORY_LABELS,\n  type CanonicalCategoryId,\n} from '../categories';\nimport type { EmojiPickerCategory, EmojiPickerData, EmojiPickerEmoji } from '../types';\n\ninterface EmojibaseSkin {\n  emoji: string;\n  tone?: number | number[];\n}\n\ninterface EmojibaseEmoji {\n  label: string;\n  hexcode: string;\n  emoji: string;\n  tags?: string[];\n  group?: number;\n  order?: number;\n  version: number;\n  skins?: EmojibaseSkin[];\n}\n\ninterface EmojibaseGroupMessage {\n  key: string;\n  message: string;\n  order: number;\n}\n\ninterface EmojibaseMessages {\n  groups: EmojibaseGroupMessage[];\n}\n\nconst GROUP_TO_CANONICAL: Record<number, Exclude<CanonicalCategoryId, 'frequent'>> = {\n  0: 'people',\n  1: 'people',\n  3: 'nature',\n  4: 'foods',\n  5: 'places',\n  6: 'activity',\n  7: 'objects',\n  8: 'symbols',\n  9: 'flags',\n};\n\nconst CATEGORY_ORDER = CANONICAL_CATEGORY_IDS.filter(\n  (id): id is Exclude<CanonicalCategoryId, 'frequent'> => id !== 'frequent'\n);\n\nfunction getUniformTone(tone: EmojibaseSkin['tone']) {\n  if (typeof tone === 'number') {\n    return tone;\n  }\n\n  if (Array.isArray(tone) && tone.length > 0 && tone.every((t) => t === tone[0])) {\n    return tone[0];\n  }\n\n  return null;\n}\n\nfunction getSkinVariants(skins: EmojibaseSkin[] | undefined) {\n  if (!skins || skins.length === 0) {\n    return undefined;\n  }\n\n  const byTone = new Map<number, string>();\n  for (const skin of skins) {\n    const tone = getUniformTone(skin.tone);\n    if (tone !== null && !byTone.has(tone)) {\n      byTone.set(tone, skin.emoji);\n    }\n  }\n\n  const variants = [1, 2, 3, 4, 5].map((tone) => byTone.get(tone));\n  return variants.every((variant) => variant !== undefined) ? (variants as string[]) : undefined;\n}\n\nexport function emojibaseAdapter(\n  data: EmojibaseEmoji[],\n  messages: EmojibaseMessages\n): EmojiPickerData {\n  const emojis: Record<string, EmojiPickerEmoji> = {};\n  const categoryEmojis = new Map<string, EmojibaseEmoji[]>();\n\n  const groupLabels = new Map<number, string>();\n  for (const group of messages.groups) {\n    groupLabels.set(group.order, group.message);\n  }\n\n  for (const emojibaseEmoji of data) {\n    if (emojibaseEmoji.group === undefined) {\n      continue;\n    }\n\n    const canonicalId = GROUP_TO_CANONICAL[emojibaseEmoji.group];\n    if (!canonicalId) {\n      continue;\n    }\n\n    const id = emojibaseEmoji.hexcode;\n    emojis[id] = {\n      id,\n      name: emojibaseEmoji.label,\n      keywords: emojibaseEmoji.tags || [],\n      emoji: emojibaseEmoji.emoji,\n      skins: getSkinVariants(emojibaseEmoji.skins),\n      version: emojibaseEmoji.version,\n    };\n\n    if (!categoryEmojis.has(canonicalId)) {\n      categoryEmojis.set(canonicalId, []);\n    }\n    categoryEmojis.get(canonicalId)!.push(emojibaseEmoji);\n  }\n\n  const categories: EmojiPickerCategory[] = [];\n  for (const canonicalId of CATEGORY_ORDER) {\n    const items = categoryEmojis.get(canonicalId);\n    if (!items) {\n      continue;\n    }\n\n    items.sort(\n      (a, b) => (a.order ?? Number.MAX_SAFE_INTEGER) - (b.order ?? Number.MAX_SAFE_INTEGER)\n    );\n    categories.push({\n      id: canonicalId,\n      label:\n        CANONICAL_CATEGORY_LABELS[canonicalId] || groupLabels.get(items[0].group!) || canonicalId,\n      emojis: items.map((item) => item.hexcode),\n    });\n  }\n\n  return { categories, emojis };\n}\n"],"mappings":";;;AAiCA,MAAM,qBAA+E;CACnF,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL;AAEA,MAAM,iBAAiBA,mBAAAA,uBAAuB,QAC3C,OAAuD,OAAO,UACjE;AAEA,SAAS,eAAe,MAA6B;CACnD,IAAI,OAAO,SAAS,UAClB,OAAO;CAGT,IAAI,MAAM,QAAQ,IAAI,KAAK,KAAK,SAAS,KAAK,KAAK,OAAO,MAAM,MAAM,KAAK,EAAE,GAC3E,OAAO,KAAK;CAGd,OAAO;AACT;AAEA,SAAS,gBAAgB,OAAoC;CAC3D,IAAI,CAAC,SAAS,MAAM,WAAW,GAC7B;CAGF,MAAM,yBAAS,IAAI,IAAoB;CACvC,KAAK,MAAM,QAAQ,OAAO;EACxB,MAAM,OAAO,eAAe,KAAK,IAAI;EACrC,IAAI,SAAS,QAAQ,CAAC,OAAO,IAAI,IAAI,GACnC,OAAO,IAAI,MAAM,KAAK,KAAK;CAE/B;CAEA,MAAM,WAAW;EAAC;EAAG;EAAG;EAAG;EAAG;CAAC,CAAC,CAAC,KAAK,SAAS,OAAO,IAAI,IAAI,CAAC;CAC/D,OAAO,SAAS,OAAO,YAAY,YAAY,KAAA,CAAS,IAAK,WAAwB,KAAA;AACvF;AAEA,SAAgB,iBACd,MACA,UACiB;CACjB,MAAM,SAA2C,CAAC;CAClD,MAAM,iCAAiB,IAAI,IAA8B;CAEzD,MAAM,8BAAc,IAAI,IAAoB;CAC5C,KAAK,MAAM,SAAS,SAAS,QAC3B,YAAY,IAAI,MAAM,OAAO,MAAM,OAAO;CAG5C,KAAK,MAAM,kBAAkB,MAAM;EACjC,IAAI,eAAe,UAAU,KAAA,GAC3B;EAGF,MAAM,cAAc,mBAAmB,eAAe;EACtD,IAAI,CAAC,aACH;EAGF,MAAM,KAAK,eAAe;EAC1B,OAAO,MAAM;GACX;GACA,MAAM,eAAe;GACrB,UAAU,eAAe,QAAQ,CAAC;GAClC,OAAO,eAAe;GACtB,OAAO,gBAAgB,eAAe,KAAK;GAC3C,SAAS,eAAe;EAC1B;EAEA,IAAI,CAAC,eAAe,IAAI,WAAW,GACjC,eAAe,IAAI,aAAa,CAAC,CAAC;EAEpC,eAAe,IAAI,WAAW,CAAC,CAAE,KAAK,cAAc;CACtD;CAEA,MAAM,aAAoC,CAAC;CAC3C,KAAK,MAAM,eAAe,gBAAgB;EACxC,MAAM,QAAQ,eAAe,IAAI,WAAW;EAC5C,IAAI,CAAC,OACH;EAGF,MAAM,MACH,GAAG,OAAO,EAAE,SAAS,OAAO,qBAAqB,EAAE,SAAS,OAAO,iBACtE;EACA,WAAW,KAAK;GACd,IAAI;GACJ,OACEC,mBAAAA,0BAA0B,gBAAgB,YAAY,IAAI,MAAM,EAAE,CAAC,KAAM,KAAK;GAChF,QAAQ,MAAM,KAAK,SAAS,KAAK,OAAO;EAC1C,CAAC;CACH;CAEA,OAAO;EAAE;EAAY;CAAO;AAC9B"}

package/cjs/categories.cjs

@@ -0,0 +1,52 @@
+"use client";
+// packages/@mantine/emoji/src/categories.ts
+const CANONICAL_CATEGORY_IDS = [
+	"frequent",
+	"people",
+	"nature",
+	"foods",
+	"activity",
+	"places",
+	"objects",
+	"symbols",
+	"flags"
+];
+const CANONICAL_CATEGORY_LABELS = {
+	frequent: "Frequently Used",
+	people: "Smileys & People",
+	nature: "Animals & Nature",
+	foods: "Food & Drink",
+	activity: "Activity",
+	places: "Travel & Places",
+	objects: "Objects",
+	symbols: "Symbols",
+	flags: "Flags"
+};
+const CANONICAL_CATEGORY_ICONS = {
+	frequent: "🕐",
+	people: "😀",
+	nature: "🐻",
+	foods: "🍔",
+	activity: "⚽",
+	places: "🚗",
+	objects: "💡",
+	symbols: "♻️",
+	flags: "🏳️"
+};
+function isCanonicalCategoryId(id) {
+	return CANONICAL_CATEGORY_IDS.includes(id);
+}
+function getCanonicalCategoryLabel(id) {
+	return isCanonicalCategoryId(id) ? CANONICAL_CATEGORY_LABELS[id] : void 0;
+}
+function getCanonicalCategoryIcon(id) {
+	return isCanonicalCategoryId(id) ? CANONICAL_CATEGORY_ICONS[id] : void 0;
+}
+exports.CANONICAL_CATEGORY_ICONS = CANONICAL_CATEGORY_ICONS;
+exports.CANONICAL_CATEGORY_IDS = CANONICAL_CATEGORY_IDS;
+exports.CANONICAL_CATEGORY_LABELS = CANONICAL_CATEGORY_LABELS;
+exports.getCanonicalCategoryIcon = getCanonicalCategoryIcon;
+exports.getCanonicalCategoryLabel = getCanonicalCategoryLabel;
+exports.isCanonicalCategoryId = isCanonicalCategoryId;
+
+//# sourceMappingURL=categories.cjs.map

package/cjs/categories.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"categories.cjs","names":[],"sources":["../src/categories.ts"],"sourcesContent":["export const CANONICAL_CATEGORY_IDS = [\n  'frequent',\n  'people',\n  'nature',\n  'foods',\n  'activity',\n  'places',\n  'objects',\n  'symbols',\n  'flags',\n] as const;\n\nexport type CanonicalCategoryId = (typeof CANONICAL_CATEGORY_IDS)[number];\n\nexport const CANONICAL_CATEGORY_LABELS: Record<CanonicalCategoryId, string> = {\n  frequent: 'Frequently Used',\n  people: 'Smileys & People',\n  nature: 'Animals & Nature',\n  foods: 'Food & Drink',\n  activity: 'Activity',\n  places: 'Travel & Places',\n  objects: 'Objects',\n  symbols: 'Symbols',\n  flags: 'Flags',\n};\n\nexport const CANONICAL_CATEGORY_ICONS: Record<CanonicalCategoryId, string> = {\n  frequent: '🕐',\n  people: '😀',\n  nature: '🐻',\n  foods: '🍔',\n  activity: '⚽',\n  places: '🚗',\n  objects: '💡',\n  symbols: '♻️',\n  flags: '🏳️',\n};\n\nexport function isCanonicalCategoryId(id: string): id is CanonicalCategoryId {\n  return (CANONICAL_CATEGORY_IDS as readonly string[]).includes(id);\n}\n\nexport function getCanonicalCategoryLabel(id: string) {\n  return isCanonicalCategoryId(id) ? CANONICAL_CATEGORY_LABELS[id] : undefined;\n}\n\nexport function getCanonicalCategoryIcon(id: string) {\n  return isCanonicalCategoryId(id) ? CANONICAL_CATEGORY_ICONS[id] : undefined;\n}\n"],"mappings":";;AAAA,MAAa,yBAAyB;CACpC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAIA,MAAa,4BAAiE;CAC5E,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,UAAU;CACV,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;AACT;AAEA,MAAa,2BAAgE;CAC3E,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,UAAU;CACV,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;AACT;AAEA,SAAgB,sBAAsB,IAAuC;CAC3E,OAAQ,uBAA6C,SAAS,EAAE;AAClE;AAEA,SAAgB,0BAA0B,IAAY;CACpD,OAAO,sBAAsB,EAAE,IAAI,0BAA0B,MAAM,KAAA;AACrE;AAEA,SAAgB,yBAAyB,IAAY;CACnD,OAAO,sBAAsB,EAAE,IAAI,yBAAyB,MAAM,KAAA;AACpE"}

package/cjs/components/EmojiPicker/EmojiButton.cjs

@@ -0,0 +1,24 @@
+"use client";
+const require_emoji_grid_utils = require("../../utils/emoji-grid-utils.cjs");
+const require_EmojiPicker_context = require("./EmojiPicker.context.cjs");
+let react = require("react");
+let _mantine_core = require("@mantine/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+// packages/@mantine/emoji/src/components/EmojiPicker/EmojiButton.tsx
+const EmojiButton = (0, react.memo)(function EmojiButton({ emoji, skinTone, emojiIndex, focused, id }) {
+	const ctx = require_EmojiPicker_context.useEmojiPickerContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, {
+		...ctx.getStyles("emoji"),
+		role: "gridcell",
+		"aria-label": emoji.name,
+		title: emoji.name,
+		id,
+		tabIndex: -1,
+		"data-focused": focused || void 0,
+		"data-emoji-index": emojiIndex,
+		children: require_emoji_grid_utils.applySkinTone(emoji, skinTone).emoji
+	});
+});
+exports.EmojiButton = EmojiButton;
+
+//# sourceMappingURL=EmojiButton.cjs.map

package/cjs/components/EmojiPicker/EmojiButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiButton.cjs","names":["memo","useEmojiPickerContext","UnstyledButton","applySkinTone"],"sources":["../../../src/components/EmojiPicker/EmojiButton.tsx"],"sourcesContent":["import { memo } from 'react';\nimport { UnstyledButton } from '@mantine/core';\nimport type { EmojiPickerEmoji } from '../../types';\nimport { applySkinTone } from '../../utils';\nimport { useEmojiPickerContext } from './EmojiPicker.context';\n\ninterface EmojiButtonProps {\n  emoji: EmojiPickerEmoji;\n  skinTone: number;\n  emojiIndex: number;\n  focused: boolean;\n  id: string;\n}\n\nexport const EmojiButton = memo(function EmojiButton({\n  emoji,\n  skinTone,\n  emojiIndex,\n  focused,\n  id,\n}: EmojiButtonProps) {\n  const ctx = useEmojiPickerContext();\n\n  return (\n    <UnstyledButton\n      {...ctx.getStyles('emoji')}\n      role=\"gridcell\"\n      aria-label={emoji.name}\n      title={emoji.name}\n      id={id}\n      tabIndex={-1}\n      data-focused={focused || undefined}\n      data-emoji-index={emojiIndex}\n    >\n      {applySkinTone(emoji, skinTone).emoji}\n    </UnstyledButton>\n  );\n});\n"],"mappings":";;;;;;;AAcA,MAAa,eAAA,GAAcA,MAAAA,KAAAA,CAAK,SAAS,YAAY,EACnD,OACA,UACA,YACA,SACA,MACmB;CACnB,MAAM,MAAMC,4BAAAA,sBAAsB;CAElC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,gBAAD;EACE,GAAI,IAAI,UAAU,OAAO;EACzB,MAAK;EACL,cAAY,MAAM;EAClB,OAAO,MAAM;EACT;EACJ,UAAU;EACV,gBAAc,WAAW,KAAA;EACzB,oBAAkB;EAEjBC,UAAAA,yBAAAA,cAAc,OAAO,QAAQ,CAAC,CAAC;CAClB,CAAA;AAEpB,CAAC"}

package/cjs/components/EmojiPicker/EmojiPicker.cjs

@@ -0,0 +1,289 @@
+"use client";
+const require_types = require("../../types.cjs");
+const require_flatten_emoji_data = require("../../utils/flatten-emoji-data.cjs");
+const require_is_emoji_supported = require("../../utils/is-emoji-supported.cjs");
+const require_emoji_grid_utils = require("../../utils/emoji-grid-utils.cjs");
+const require_use_emoji_grid_navigation = require("../../hooks/use-emoji-grid-navigation.cjs");
+const require_use_emoji_search = require("../../hooks/use-emoji-search.cjs");
+const require_EmojiPicker_context = require("./EmojiPicker.context.cjs");
+const require_EmojiPickerCategoryNav = require("./EmojiPickerCategoryNav.cjs");
+const require_EmojiPickerGrid = require("./EmojiPickerGrid.cjs");
+const require_EmojiPickerPreview = require("./EmojiPickerPreview.cjs");
+const require_EmojiPickerSearch = require("./EmojiPickerSearch.cjs");
+const require_EmojiPickerSkinTone = require("./EmojiPickerSkinTone.cjs");
+const require_EmojiPicker_module = require("./EmojiPicker.module.cjs");
+let react = require("react");
+let _mantine_core = require("@mantine/core");
+let _mantine_hooks = require("@mantine/hooks");
+let react_jsx_runtime = require("react/jsx-runtime");
+// packages/@mantine/emoji/src/components/EmojiPicker/EmojiPicker.tsx
+const defaultProps = {
+	columns: 9,
+	withSearch: true,
+	withCategoryNav: true,
+	withPreview: true,
+	withSkinToneSelector: true,
+	withUnsupportedDetection: false,
+	autoFocus: false,
+	size: "sm"
+};
+const EMOJI_SIZES = {
+	xs: {
+		emojiSize: 28,
+		emojiFz: (0, _mantine_core.rem)(16),
+		previewPy: (0, _mantine_core.rem)(4),
+		skinToneSize: (0, _mantine_core.rem)(20),
+		skinToneFz: (0, _mantine_core.rem)(13)
+	},
+	sm: {
+		emojiSize: 32,
+		emojiFz: (0, _mantine_core.rem)(18),
+		previewPy: (0, _mantine_core.rem)(5),
+		skinToneSize: (0, _mantine_core.rem)(22),
+		skinToneFz: (0, _mantine_core.rem)(14)
+	},
+	md: {
+		emojiSize: 36,
+		emojiFz: (0, _mantine_core.rem)(22),
+		previewPy: (0, _mantine_core.rem)(7),
+		skinToneSize: (0, _mantine_core.rem)(24),
+		skinToneFz: (0, _mantine_core.rem)(16)
+	},
+	lg: {
+		emojiSize: 42,
+		emojiFz: (0, _mantine_core.rem)(26),
+		previewPy: (0, _mantine_core.rem)(8),
+		skinToneSize: (0, _mantine_core.rem)(28),
+		skinToneFz: (0, _mantine_core.rem)(18)
+	},
+	xl: {
+		emojiSize: 48,
+		emojiFz: (0, _mantine_core.rem)(30),
+		previewPy: (0, _mantine_core.rem)(10),
+		skinToneSize: (0, _mantine_core.rem)(32),
+		skinToneFz: (0, _mantine_core.rem)(20)
+	}
+};
+const EMOJI_FONT_SIZE_RATIO = .6;
+function getSizeValues(size) {
+	return EMOJI_SIZES[size || "sm"] || EMOJI_SIZES.sm;
+}
+const varsResolver = (0, _mantine_core.createVarsResolver)((_, { columns, emojiSize, size }) => {
+	const sizeValues = getSizeValues(size);
+	return { root: {
+		"--ep-columns": columns?.toString() ?? "9",
+		"--ep-emoji-size": emojiSize ? (0, _mantine_core.rem)(emojiSize) : (0, _mantine_core.rem)(sizeValues.emojiSize),
+		"--ep-emoji-fz": emojiSize ? (0, _mantine_core.rem)(Math.round(emojiSize * EMOJI_FONT_SIZE_RATIO)) : sizeValues.emojiFz,
+		"--ep-preview-py": sizeValues.previewPy,
+		"--ep-skin-tone-size": sizeValues.skinToneSize,
+		"--ep-skin-tone-fz": sizeValues.skinToneFz
+	} };
+});
+const EmojiPicker = (0, _mantine_core.factory)((_props) => {
+	const props = (0, _mantine_core.useProps)("EmojiPicker", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, data, onEmojiSelect, columns, emojiSize, withSearch, withCategoryNav, withPreview, withSkinToneSelector, skinTone: skinToneProp, defaultSkinTone, onSkinToneChange, searchValue, onSearchChange, searchPlaceholder, emptySearchContent, withUnsupportedDetection, autoFocus, scrollAreaProps, categoryLabels, labels: labelsProp, size, searchInputProps, ...others } = props;
+	const getStyles = (0, _mantine_core.useStyles)({
+		name: "EmojiPicker",
+		classes: require_EmojiPicker_module.default,
+		props,
+		classNames,
+		styles,
+		unstyled,
+		vars,
+		varsResolver,
+		stable: true
+	});
+	const [skinTone, setSkinTone] = (0, _mantine_hooks.useUncontrolled)({
+		value: skinToneProp,
+		defaultValue: defaultSkinTone ?? 0,
+		onChange: onSkinToneChange
+	});
+	const cols = Math.max(columns ?? 9, 1);
+	const baseId = (0, react.useId)();
+	const idPrefix = `${baseId}-emoji`;
+	const gridId = `${baseId}-grid`;
+	const [activeDescendant, setActiveDescendant] = (0, react.useState)(void 0);
+	const filteredData = (0, react.useMemo)(() => {
+		if (!withUnsupportedDetection) return data;
+		return {
+			emojis: data.emojis,
+			categories: data.categories.map((cat) => ({
+				...cat,
+				emojis: require_is_emoji_supported.filterSupportedEmojis(data.emojis, cat.emojis)
+			}))
+		};
+	}, [data, withUnsupportedDetection]);
+	const { query, setQuery, results, isSearching } = require_use_emoji_search.useEmojiSearch({
+		data: filteredData,
+		searchValue,
+		onSearchChange
+	});
+	const searchInputRef = (0, react.useRef)(null);
+	const scrollToItemRef = (0, react.useRef)(null);
+	const mergedLabels = (0, react.useMemo)(() => ({
+		...require_types.DEFAULT_LABELS,
+		...labelsProp
+	}), [labelsProp]);
+	const ctxValue = (0, react.useMemo)(() => ({
+		getStyles,
+		labels: mergedLabels,
+		size
+	}), [
+		getStyles,
+		mergedLabels,
+		size
+	]);
+	const categoryItems = (0, react.useMemo)(() => require_flatten_emoji_data.flattenEmojiData(filteredData, cols, categoryLabels), [
+		filteredData,
+		cols,
+		categoryLabels
+	]);
+	const searchItems = (0, react.useMemo)(() => require_flatten_emoji_data.flattenEmojiData({
+		emojis: filteredData.emojis,
+		categories: [{
+			id: "search",
+			label: mergedLabels.searchResults,
+			emojis: results.map((emoji) => emoji.id)
+		}]
+	}, cols), [
+		filteredData.emojis,
+		cols,
+		results,
+		mergedLabels.searchResults
+	]);
+	const flattenedItems = isSearching ? searchItems : categoryItems;
+	const navCategories = (0, react.useMemo)(() => categoryItems.reduce((acc, item) => {
+		if (item.type === "header") acc.push({
+			id: item.categoryId,
+			label: item.label
+		});
+		return acc;
+	}, []), [categoryItems]);
+	const scrollToItem = (0, react.useCallback)((itemIndex) => {
+		scrollToItemRef.current?.(itemIndex, "auto");
+	}, []);
+	const handleEmojiSelect = (0, react.useCallback)((emoji) => {
+		onEmojiSelect?.(emoji);
+	}, [onEmojiSelect]);
+	const { model, activeIndex, activeEmoji, keyboardActive, handleKeyDown, setPointerIndex, setAnchorIndex } = require_use_emoji_grid_navigation.useEmojiGridNavigation({
+		items: flattenedItems,
+		resetKey: query,
+		skinTone,
+		onEmojiSelect: handleEmojiSelect,
+		scrollToItem
+	});
+	const handleGridKeyDown = (0, react.useCallback)((event) => {
+		if (event.key === "Escape") {
+			const focusStayedInGrid = event.currentTarget.contains(document.activeElement);
+			if (withSearch && focusStayedInGrid && searchInputRef.current) {
+				event.preventDefault();
+				searchInputRef.current.focus();
+			}
+			return;
+		}
+		handleKeyDown(event);
+	}, [handleKeyDown, withSearch]);
+	const handleSearchKeyDown = (0, react.useCallback)((event) => {
+		if (event.nativeEvent.isComposing) return;
+		if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter") handleKeyDown(event);
+	}, [handleKeyDown]);
+	const handleEmojiClick = (0, react.useCallback)((index) => {
+		const emoji = model.emojis[index];
+		if (emoji) {
+			setPointerIndex(index);
+			handleEmojiSelect(require_emoji_grid_utils.applySkinTone(emoji, skinTone));
+		}
+	}, [
+		model,
+		setPointerIndex,
+		handleEmojiSelect,
+		skinTone
+	]);
+	const scrollToCategory = (0, react.useCallback)((categoryId) => {
+		const itemIndex = flattenedItems.findIndex((item) => item.type === "header" && item.categoryId === categoryId);
+		if (itemIndex !== -1) {
+			setAnchorIndex(model.itemOffsets[itemIndex]);
+			scrollToItemRef.current?.(itemIndex, "start");
+		}
+	}, [
+		flattenedItems,
+		model,
+		setAnchorIndex
+	]);
+	const pendingCategoryRef = (0, react.useRef)(null);
+	const handleCategoryClick = (0, react.useCallback)((categoryId) => {
+		if (isSearching) {
+			pendingCategoryRef.current = categoryId;
+			setQuery("");
+			return;
+		}
+		scrollToCategory(categoryId);
+	}, [
+		isSearching,
+		setQuery,
+		scrollToCategory
+	]);
+	(0, react.useEffect)(() => {
+		if (!isSearching && pendingCategoryRef.current !== null) {
+			const categoryId = pendingCategoryRef.current;
+			pendingCategoryRef.current = null;
+			scrollToCategory(categoryId);
+		}
+	}, [isSearching, scrollToCategory]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmojiPicker_context.EmojiPickerProvider, {
+		value: ctxValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
+			...getStyles("root"),
+			...others,
+			children: [
+				withSearch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmojiPickerSearch.EmojiPickerSearch, {
+					query,
+					onQueryChange: setQuery,
+					placeholder: searchPlaceholder,
+					autoFocus,
+					inputRef: searchInputRef,
+					onKeyDown: handleSearchKeyDown,
+					controls: flattenedItems.length > 0 ? gridId : void 0,
+					activeDescendant,
+					searchInputProps
+				}),
+				withCategoryNav && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmojiPickerCategoryNav.EmojiPickerCategoryNav, {
+					categories: navCategories,
+					onCategoryClick: handleCategoryClick
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmojiPickerGrid.EmojiPickerGrid, {
+					items: flattenedItems,
+					itemOffsets: model.itemOffsets,
+					columns: cols,
+					skinTone,
+					focusedIndex: keyboardActive ? activeIndex : -1,
+					focusedItemIndex: keyboardActive ? require_emoji_grid_utils.getEmojiItemIndex(model, activeIndex) : -1,
+					idPrefix,
+					gridId,
+					onActiveDescendantChange: setActiveDescendant,
+					emojiSize: emojiSize ?? getSizeValues(size).emojiSize,
+					emptyContent: emptySearchContent || mergedLabels.noResults,
+					onKeyDown: handleGridKeyDown,
+					onPointerIndex: setPointerIndex,
+					onEmojiClick: handleEmojiClick,
+					scrollToItemRef,
+					scrollAreaProps
+				}),
+				(withPreview || withSkinToneSelector) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmojiPickerPreview.EmojiPickerPreview, {
+					emoji: activeEmoji,
+					skinTone,
+					withPreview: !!withPreview,
+					children: withSkinToneSelector && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmojiPickerSkinTone.EmojiPickerSkinTone, {
+						skinTone,
+						onSkinToneChange: setSkinTone
+					})
+				})
+			]
+		})
+	});
+});
+EmojiPicker.classes = require_EmojiPicker_module.default;
+EmojiPicker.displayName = "@mantine/emoji/EmojiPicker";
+exports.EmojiPicker = EmojiPicker;
+
+//# sourceMappingURL=EmojiPicker.cjs.map

package/cjs/components/EmojiPicker/EmojiPicker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.cjs","names":["rem","createVarsResolver","factory","useProps","useStyles","useUncontrolled","useId","useState","useMemo","filterSupportedEmojis","useEmojiSearch","useRef","DEFAULT_LABELS","flattenEmojiData","useCallback","useEmojiGridNavigation","applySkinTone","EmojiPickerProvider","Box","EmojiPickerSearch","EmojiPickerCategoryNav","EmojiPickerGrid","getEmojiItemIndex","EmojiPickerPreview","EmojiPickerSkinTone","classes"],"sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  InputProps,\n  MantineSize,\n  rem,\n  ScrollAreaProps,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { useEmojiGridNavigation } from '../../hooks/use-emoji-grid-navigation';\nimport { useEmojiSearch } from '../../hooks/use-emoji-search';\nimport {\n  DEFAULT_LABELS,\n  EmojiPickerData,\n  EmojiPickerEmoji,\n  EmojiPickerLabels,\n  FlattenedRowItem,\n} from '../../types';\nimport {\n  applySkinTone,\n  filterSupportedEmojis,\n  flattenEmojiData,\n  getEmojiItemIndex,\n} from '../../utils';\nimport { EmojiPickerProvider } from './EmojiPicker.context';\nimport { EmojiPickerCategoryNav, EmojiPickerNavCategory } from './EmojiPickerCategoryNav';\nimport { EmojiPickerGrid, EmojiPickerScrollToItem } from './EmojiPickerGrid';\nimport { EmojiPickerPreview } from './EmojiPickerPreview';\nimport { EmojiPickerSearch } from './EmojiPickerSearch';\nimport { EmojiPickerSkinTone } from './EmojiPickerSkinTone';\nimport classes from './EmojiPicker.module.css';\n\nexport type EmojiPickerStylesNames =\n  | 'root'\n  | 'search'\n  | 'searchInput'\n  | 'categoryNav'\n  | 'categoryNavButton'\n  | 'content'\n  | 'empty'\n  | 'categoryLabel'\n  | 'grid'\n  | 'emoji'\n  | 'preview'\n  | 'previewEmoji'\n  | 'previewName'\n  | 'skinToneSelector'\n  | 'skinToneDropdown'\n  | 'skinToneButton';\n\nexport type EmojiPickerCssVariables = {\n  root:\n    | '--ep-columns'\n    | '--ep-emoji-size'\n    | '--ep-emoji-fz'\n    | '--ep-preview-py'\n    | '--ep-skin-tone-size'\n    | '--ep-skin-tone-fz';\n};\n\nexport interface EmojiPickerProps\n  extends BoxProps, StylesApiProps<EmojiPickerFactory>, ElementProps<'div'> {\n  /** Emoji data object, use `emojiMartAdapter` or `emojibaseAdapter` to convert data */\n  data: EmojiPickerData;\n\n  /** Called when an emoji is selected */\n  onEmojiSelect?: (emoji: EmojiPickerEmoji) => void;\n\n  /** Number of emoji columns @default 9 */\n  columns?: number;\n\n  /** Custom emoji button size in px, overrides size-based value */\n  emojiSize?: number;\n\n  /** Determines whether the search input is displayed @default true */\n  withSearch?: boolean;\n\n  /** Determines whether the category navigation bar is displayed @default true */\n  withCategoryNav?: boolean;\n\n  /** Determines whether the emoji preview area is displayed @default true */\n  withPreview?: boolean;\n\n  /** Determines whether the skin tone selector is displayed @default true */\n  withSkinToneSelector?: boolean;\n\n  /** Controlled skin tone value (0–5) */\n  skinTone?: number;\n\n  /** Default skin tone value for uncontrolled state @default 0 */\n  defaultSkinTone?: number;\n\n  /** Called when skin tone changes */\n  onSkinToneChange?: (skinTone: number) => void;\n\n  /** Controlled search input value */\n  searchValue?: string;\n\n  /** Called when search value changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Search input placeholder */\n  searchPlaceholder?: string;\n\n  /** Content displayed when search yields no results */\n  emptySearchContent?: React.ReactNode;\n\n  /** Determines whether unsupported emojis are filtered out @default false */\n  withUnsupportedDetection?: boolean;\n\n  /** Determines whether the search input is focused on mount @default false */\n  autoFocus?: boolean;\n\n  /** Props passed to the internal `ScrollArea` component */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Override category labels by category id */\n  categoryLabels?: Record<string, string>;\n\n  /** Override UI labels (search placeholder, no results text, etc.) */\n  labels?: EmojiPickerLabels;\n\n  /** Controls size of all inner elements @default 'sm' */\n  size?: MantineSize;\n\n  /** Props passed to the search `Input` component */\n  searchInputProps?: InputProps;\n}\n\nexport type EmojiPickerFactory = Factory<{\n  props: EmojiPickerProps;\n  ref: HTMLDivElement;\n  stylesNames: EmojiPickerStylesNames;\n  vars: EmojiPickerCssVariables;\n}>;\n\nconst defaultProps = {\n  columns: 9,\n  withSearch: true,\n  withCategoryNav: true,\n  withPreview: true,\n  withSkinToneSelector: true,\n  withUnsupportedDetection: false,\n  autoFocus: false,\n  size: 'sm',\n} satisfies Partial<EmojiPickerProps>;\n\nconst EMOJI_SIZES: Record<\n  string,\n  {\n    emojiSize: number;\n    emojiFz: string;\n    previewPy: string;\n    skinToneSize: string;\n    skinToneFz: string;\n  }\n> = {\n  xs: {\n    emojiSize: 28,\n    emojiFz: rem(16),\n    previewPy: rem(4),\n    skinToneSize: rem(20),\n    skinToneFz: rem(13),\n  },\n  sm: {\n    emojiSize: 32,\n    emojiFz: rem(18),\n    previewPy: rem(5),\n    skinToneSize: rem(22),\n    skinToneFz: rem(14),\n  },\n  md: {\n    emojiSize: 36,\n    emojiFz: rem(22),\n    previewPy: rem(7),\n    skinToneSize: rem(24),\n    skinToneFz: rem(16),\n  },\n  lg: {\n    emojiSize: 42,\n    emojiFz: rem(26),\n    previewPy: rem(8),\n    skinToneSize: rem(28),\n    skinToneFz: rem(18),\n  },\n  xl: {\n    emojiSize: 48,\n    emojiFz: rem(30),\n    previewPy: rem(10),\n    skinToneSize: rem(32),\n    skinToneFz: rem(20),\n  },\n};\n\nconst EMOJI_FONT_SIZE_RATIO = 0.6;\n\nfunction getSizeValues(size: MantineSize | undefined) {\n  return EMOJI_SIZES[size || 'sm'] || EMOJI_SIZES.sm;\n}\n\nconst varsResolver = createVarsResolver<EmojiPickerFactory>((_, { columns, emojiSize, size }) => {\n  const sizeValues = getSizeValues(size);\n  return {\n    root: {\n      '--ep-columns': columns?.toString() ?? '9',\n      '--ep-emoji-size': emojiSize ? rem(emojiSize) : rem(sizeValues.emojiSize),\n      '--ep-emoji-fz': emojiSize\n        ? rem(Math.round(emojiSize * EMOJI_FONT_SIZE_RATIO))\n        : sizeValues.emojiFz,\n      '--ep-preview-py': sizeValues.previewPy,\n      '--ep-skin-tone-size': sizeValues.skinToneSize,\n      '--ep-skin-tone-fz': sizeValues.skinToneFz,\n    },\n  };\n});\n\nexport const EmojiPicker = factory<EmojiPickerFactory>((_props) => {\n  const props = useProps('EmojiPicker', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    onEmojiSelect,\n    columns,\n    emojiSize,\n    withSearch,\n    withCategoryNav,\n    withPreview,\n    withSkinToneSelector,\n    skinTone: skinToneProp,\n    defaultSkinTone,\n    onSkinToneChange,\n    searchValue,\n    onSearchChange,\n    searchPlaceholder,\n    emptySearchContent,\n    withUnsupportedDetection,\n    autoFocus,\n    scrollAreaProps,\n    categoryLabels,\n    labels: labelsProp,\n    size,\n    searchInputProps,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<EmojiPickerFactory>({\n    name: 'EmojiPicker',\n    classes,\n    props,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n    stable: true,\n  });\n\n  const [skinTone, setSkinTone] = useUncontrolled({\n    value: skinToneProp,\n    defaultValue: defaultSkinTone ?? 0,\n    onChange: onSkinToneChange,\n  });\n\n  const cols = Math.max(columns ?? 9, 1);\n  const baseId = useId();\n  const idPrefix = `${baseId}-emoji`;\n  const gridId = `${baseId}-grid`;\n  const [activeDescendant, setActiveDescendant] = useState<string | undefined>(undefined);\n\n  const filteredData = useMemo(() => {\n    if (!withUnsupportedDetection) {\n      return data;\n    }\n    return {\n      emojis: data.emojis,\n      categories: data.categories.map((cat) => ({\n        ...cat,\n        emojis: filterSupportedEmojis(data.emojis, cat.emojis),\n      })),\n    };\n  }, [data, withUnsupportedDetection]);\n\n  const { query, setQuery, results, isSearching } = useEmojiSearch({\n    data: filteredData,\n    searchValue,\n    onSearchChange,\n  });\n\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const scrollToItemRef = useRef<EmojiPickerScrollToItem | null>(null);\n\n  const mergedLabels: Required<EmojiPickerLabels> = useMemo(\n    () => ({ ...DEFAULT_LABELS, ...labelsProp }),\n    [labelsProp]\n  );\n\n  const ctxValue = useMemo(\n    () => ({ getStyles, labels: mergedLabels, size }),\n    [getStyles, mergedLabels, size]\n  );\n\n  const categoryItems = useMemo<FlattenedRowItem[]>(\n    () => flattenEmojiData(filteredData, cols, categoryLabels),\n    [filteredData, cols, categoryLabels]\n  );\n\n  const searchItems = useMemo<FlattenedRowItem[]>(\n    () =>\n      flattenEmojiData(\n        {\n          emojis: filteredData.emojis,\n          categories: [\n            {\n              id: 'search',\n              label: mergedLabels.searchResults,\n              emojis: results.map((emoji) => emoji.id),\n            },\n          ],\n        },\n        cols\n      ),\n    [filteredData.emojis, cols, results, mergedLabels.searchResults]\n  );\n\n  const flattenedItems = isSearching ? searchItems : categoryItems;\n\n  const navCategories = useMemo(\n    () =>\n      categoryItems.reduce<EmojiPickerNavCategory[]>((acc, item) => {\n        if (item.type === 'header') {\n          acc.push({ id: item.categoryId, label: item.label });\n        }\n        return acc;\n      }, []),\n    [categoryItems]\n  );\n\n  const scrollToItem = useCallback((itemIndex: number) => {\n    scrollToItemRef.current?.(itemIndex, 'auto');\n  }, []);\n\n  const handleEmojiSelect = useCallback(\n    (emoji: EmojiPickerEmoji) => {\n      onEmojiSelect?.(emoji);\n    },\n    [onEmojiSelect]\n  );\n\n  const {\n    model,\n    activeIndex,\n    activeEmoji,\n    keyboardActive,\n    handleKeyDown,\n    setPointerIndex,\n    setAnchorIndex,\n  } = useEmojiGridNavigation({\n    items: flattenedItems,\n    resetKey: query,\n    skinTone,\n    onEmojiSelect: handleEmojiSelect,\n    scrollToItem,\n  });\n\n  const handleGridKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === 'Escape') {\n        const focusStayedInGrid = event.currentTarget.contains(document.activeElement);\n        if (withSearch && focusStayedInGrid && searchInputRef.current) {\n          event.preventDefault();\n          searchInputRef.current.focus();\n        }\n        return;\n      }\n      handleKeyDown(event);\n    },\n    [handleKeyDown, withSearch]\n  );\n\n  const handleSearchKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.nativeEvent.isComposing) {\n        return;\n      }\n      if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {\n        handleKeyDown(event);\n      }\n    },\n    [handleKeyDown]\n  );\n\n  const handleEmojiClick = useCallback(\n    (index: number) => {\n      const emoji = model.emojis[index];\n      if (emoji) {\n        setPointerIndex(index);\n        handleEmojiSelect(applySkinTone(emoji, skinTone));\n      }\n    },\n    [model, setPointerIndex, handleEmojiSelect, skinTone]\n  );\n\n  const scrollToCategory = useCallback(\n    (categoryId: string) => {\n      const itemIndex = flattenedItems.findIndex(\n        (item) => item.type === 'header' && item.categoryId === categoryId\n      );\n      if (itemIndex !== -1) {\n        setAnchorIndex(model.itemOffsets[itemIndex]);\n        scrollToItemRef.current?.(itemIndex, 'start');\n      }\n    },\n    [flattenedItems, model, setAnchorIndex]\n  );\n\n  const pendingCategoryRef = useRef<string | null>(null);\n\n  const handleCategoryClick = useCallback(\n    (categoryId: string) => {\n      if (isSearching) {\n        pendingCategoryRef.current = categoryId;\n        setQuery('');\n        return;\n      }\n      scrollToCategory(categoryId);\n    },\n    [isSearching, setQuery, scrollToCategory]\n  );\n\n  useEffect(() => {\n    if (!isSearching && pendingCategoryRef.current !== null) {\n      const categoryId = pendingCategoryRef.current;\n      pendingCategoryRef.current = null;\n      scrollToCategory(categoryId);\n    }\n  }, [isSearching, scrollToCategory]);\n\n  return (\n    <EmojiPickerProvider value={ctxValue}>\n      <Box {...getStyles('root')} {...others}>\n        {withSearch && (\n          <EmojiPickerSearch\n            query={query}\n            onQueryChange={setQuery}\n            placeholder={searchPlaceholder}\n            autoFocus={autoFocus}\n            inputRef={searchInputRef}\n            onKeyDown={handleSearchKeyDown}\n            controls={flattenedItems.length > 0 ? gridId : undefined}\n            activeDescendant={activeDescendant}\n            searchInputProps={searchInputProps}\n          />\n        )}\n\n        {withCategoryNav && (\n          <EmojiPickerCategoryNav\n            categories={navCategories}\n            onCategoryClick={handleCategoryClick}\n          />\n        )}\n\n        <EmojiPickerGrid\n          items={flattenedItems}\n          itemOffsets={model.itemOffsets}\n          columns={cols}\n          skinTone={skinTone}\n          focusedIndex={keyboardActive ? activeIndex : -1}\n          focusedItemIndex={keyboardActive ? getEmojiItemIndex(model, activeIndex) : -1}\n          idPrefix={idPrefix}\n          gridId={gridId}\n          onActiveDescendantChange={setActiveDescendant}\n          emojiSize={emojiSize ?? getSizeValues(size).emojiSize}\n          emptyContent={emptySearchContent || mergedLabels.noResults}\n          onKeyDown={handleGridKeyDown}\n          onPointerIndex={setPointerIndex}\n          onEmojiClick={handleEmojiClick}\n          scrollToItemRef={scrollToItemRef}\n          scrollAreaProps={scrollAreaProps}\n        />\n\n        {(withPreview || withSkinToneSelector) && (\n          <EmojiPickerPreview emoji={activeEmoji} skinTone={skinTone} withPreview={!!withPreview}>\n            {withSkinToneSelector && (\n              <EmojiPickerSkinTone skinTone={skinTone} onSkinToneChange={setSkinTone} />\n            )}\n          </EmojiPickerPreview>\n        )}\n      </Box>\n    </EmojiPickerProvider>\n  );\n});\n\nEmojiPicker.classes = classes;\nEmojiPicker.displayName = '@mantine/emoji/EmojiPicker';\n"],"mappings":"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"}

package/cjs/components/EmojiPicker/EmojiPicker.context.cjs

@@ -0,0 +1,7 @@
+"use client";
+// packages/@mantine/emoji/src/components/EmojiPicker/EmojiPicker.context.ts
+const [EmojiPickerProvider, useEmojiPickerContext] = (0, require("@mantine/core").createSafeContext)("EmojiPicker components must be used within EmojiPicker");
+exports.EmojiPickerProvider = EmojiPickerProvider;
+exports.useEmojiPickerContext = useEmojiPickerContext;
+
+//# sourceMappingURL=EmojiPicker.context.cjs.map

package/cjs/components/EmojiPicker/EmojiPicker.context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.context.cjs","names":["createSafeContext"],"sources":["../../../src/components/EmojiPicker/EmojiPicker.context.ts"],"sourcesContent":["import { createSafeContext, type GetStylesApi, type MantineSize } from '@mantine/core';\nimport type { EmojiPickerLabels } from '../../types';\nimport type { EmojiPickerFactory } from './EmojiPicker';\n\nexport interface EmojiPickerContextValue {\n  getStyles: GetStylesApi<EmojiPickerFactory>;\n  labels: Required<EmojiPickerLabels>;\n  size: MantineSize | undefined;\n}\n\nexport const [EmojiPickerProvider, useEmojiPickerContext] =\n  createSafeContext<EmojiPickerContextValue>(\n    'EmojiPicker components must be used within EmojiPicker'\n  );\n"],"mappings":";;AAUA,MAAa,CAAC,qBAAqB,0BAAA,G,uBACjCA,CAAAA,CAAAA,kBAAAA,CACE,wDACF"}

package/cjs/components/EmojiPicker/EmojiPicker.module.cjs

@@ -0,0 +1,22 @@
+"use client";
+// packages/@mantine/emoji/src/components/EmojiPicker/EmojiPicker.module.css
+var EmojiPicker_module_default = {
+	"root": "m_873e66bb",
+	"search": "m_b2613941",
+	"categoryNav": "m_d6a2ef4c",
+	"categoryNavButton": "m_f214599e",
+	"content": "m_5d2ad400",
+	"empty": "m_5fd65a94",
+	"categoryLabel": "m_b987dedd",
+	"grid": "m_8739711f",
+	"emoji": "m_5fd6558d",
+	"preview": "m_117c834f",
+	"previewEmoji": "m_91abc637",
+	"previewName": "m_2e01327a",
+	"skinToneDropdown": "m_16864e19",
+	"skinToneSelector": "m_774cfde7",
+	"skinToneButton": "m_daf4133a"
+};
+exports.default = EmojiPicker_module_default;
+
+//# sourceMappingURL=EmojiPicker.module.cjs.map

package/cjs/components/EmojiPicker/EmojiPicker.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.module.cjs","names":[],"sources":["../../../src/components/EmojiPicker/EmojiPicker.module.css"],"sourcesContent":[".root {\n  --ep-columns: 9;\n  --ep-emoji-size: 32px;\n  --ep-emoji-fz: 18px;\n  --ep-preview-py: 5px;\n  --ep-skin-tone-size: 22px;\n  --ep-skin-tone-fz: 14px;\n\n  display: flex;\n  flex-direction: column;\n  width: calc(var(--ep-columns) * var(--ep-emoji-size) + var(--mantine-spacing-xs) * 2 + 2px);\n  border: 1px solid var(--mantine-color-default-border);\n  border-radius: var(--mantine-radius-default);\n  background-color: var(--mantine-color-body);\n}\n\n.search {\n  padding: var(--mantine-spacing-xs);\n  padding-bottom: 0;\n}\n\n.categoryNav {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  padding: 4px var(--mantine-spacing-xs);\n  border-bottom: 1px solid var(--mantine-color-default-border);\n}\n\n.categoryNavButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1 1 calc(var(--ep-emoji-fz) + 4px);\n  max-width: var(--ep-emoji-size);\n  height: var(--ep-emoji-size);\n  font-size: var(--ep-emoji-fz);\n  border-radius: var(--mantine-radius-sm);\n  cursor: pointer;\n\n  @mixin hover {\n    background-color: var(--mantine-color-default-hover);\n  }\n}\n\n.content {\n  padding: 0 var(--mantine-spacing-xs);\n\n  & [role='grid']:focus-visible {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: -2px;\n  }\n}\n\n.empty {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--mantine-spacing-xs);\n  text-align: center;\n}\n\n.categoryLabel {\n  display: flex;\n  align-items: center;\n  font-size: var(--mantine-font-size-xs);\n  font-weight: 600;\n  color: var(--mantine-color-dimmed);\n  padding: var(--mantine-spacing-xs) 0;\n  background-color: var(--mantine-color-body);\n}\n\n.grid {\n  display: grid;\n  grid-template-columns: repeat(var(--ep-columns), var(--ep-emoji-size));\n}\n\n.emoji {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--ep-emoji-size);\n  height: var(--ep-emoji-size);\n  font-size: var(--ep-emoji-fz);\n  border-radius: var(--mantine-radius-sm);\n  cursor: pointer;\n  line-height: 1;\n  padding: 0;\n  border: none;\n  background: none;\n\n  &:focus,\n  &:focus-visible {\n    outline: none;\n    background: none;\n  }\n\n  &[data-focused] {\n    background-color: var(--mantine-color-default-hover);\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: -2px;\n  }\n\n  @mixin hover {\n    background-color: var(--mantine-color-default-hover);\n  }\n}\n\n:global(.mantine-focus-auto).emoji:focus-visible {\n  outline: none;\n}\n\n.preview {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--mantine-spacing-xs);\n  padding: var(--ep-preview-py) var(--mantine-spacing-xs);\n  border-top: 1px solid var(--mantine-color-default-border);\n}\n\n.previewEmoji {\n  font-size: var(--ep-emoji-fz);\n  line-height: 1;\n  flex-shrink: 0;\n}\n\n.previewName {\n  font-size: var(--mantine-font-size-sm);\n  color: var(--mantine-color-dimmed);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n  flex: 1;\n}\n\n.skinToneDropdown {\n  padding: 4px;\n}\n\n.skinToneSelector {\n  display: flex;\n  gap: 2px;\n}\n\n.skinToneButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--ep-skin-tone-size);\n  height: var(--ep-skin-tone-size);\n  font-size: var(--ep-skin-tone-fz);\n  border-radius: var(--mantine-radius-sm);\n  cursor: pointer;\n  line-height: 1;\n\n  @mixin hover {\n    background-color: var(--mantine-color-default-hover);\n  }\n}\n\n.skinToneSelector .skinToneButton[data-active] {\n  background-color: var(--mantine-color-default-hover);\n}\n"],"mappings":""}