@mantine/emoji 0.0.0-stage → 9.8.1

package/lib/utils/flatten-emoji-data.d.ts

@@ -0,0 +1,2 @@
+import type { EmojiPickerData, FlattenedRowItem } from '../types';
+export declare function flattenEmojiData(data: EmojiPickerData, columns: number, categoryLabels?: Record<string, string>): FlattenedRowItem[];

package/lib/utils/index.d.ts

@@ -0,0 +1,5 @@
+export { searchEmojis } from './search-emojis';
+export { flattenEmojiData } from './flatten-emoji-data';
+export { isEmojiSupported, filterSupportedEmojis } from './is-emoji-supported';
+export { createEmojiGridModel, getNextEmojiIndex, getEmojiItemIndex, applySkinTone, } from './emoji-grid-utils';
+export type { EmojiGridModel, EmojiGridDirection } from './emoji-grid-utils';

package/lib/utils/is-emoji-supported.d.ts

@@ -0,0 +1,4 @@
+export declare function isEmojiSupported(emoji: string): boolean;
+export declare function filterSupportedEmojis(emojis: Record<string, {
+    emoji: string;
+}>, emojiIds: string[]): string[];

package/lib/utils/search-emojis.d.ts

@@ -0,0 +1,2 @@
+import type { EmojiPickerData, EmojiPickerEmoji } from '../types';
+export declare function searchEmojis(data: EmojiPickerData, query: string): EmojiPickerEmoji[];

package/package.json

@@ -1,6 +1,56 @@
 {
   "name": "@mantine/emoji",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "9.8.1",
+  "description": "Emoji picker components for Mantine",
+  "homepage": "https://mantine.dev",
+  "license": "MIT",
+  "author": "Vitaly Rtishchev <rtivital@gmail.com>",
+  "keywords": [
+    "emoji",
+    "emoji-picker",
+    "mantine",
+    "react"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "cjs/index.cjs",
+  "module": "esm/index.mjs",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/index.d.mts",
+        "default": "./esm/index.mjs"
+      },
+      "require": {
+        "types": "./lib/index.d.ts",
+        "default": "./cjs/index.cjs"
+      }
+    },
+    "./styles.css": "./styles.css",
+    "./styles.layer.css": "./styles.layer.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mantinedev/mantine.git",
+    "directory": "packages/@mantine/emoji"
+  },
+  "peerDependencies": {
+    "@mantine/core": "9.8.1",
+    "@mantine/hooks": "9.8.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "dependencies": {
+    "@tanstack/react-virtual": "^3.14.22"
+  },
+  "devDependencies": {
+    "@emoji-mart/data": "^1.2.1",
+    "@mantine-tests/core": "workspace:*",
+    "@mantine/core": "workspace:*",
+    "@mantine/hooks": "workspace:*",
+    "react": "19.3.1",
+    "react-dom": "19.3.1"
+  }
+}

package/styles.css

@@ -0,0 +1,228 @@
+.m_873e66bb {
+  --ep-columns: 9;
+  --ep-emoji-size: calc(2rem * var(--mantine-scale));
+  --ep-emoji-fz: calc(1.125rem * var(--mantine-scale));
+  --ep-preview-py: calc(0.3125rem * var(--mantine-scale));
+  --ep-skin-tone-size: calc(1.375rem * var(--mantine-scale));
+  --ep-skin-tone-fz: calc(0.875rem * var(--mantine-scale));
+
+  display: flex;
+  flex-direction: column;
+  width: calc(var(--ep-columns) * var(--ep-emoji-size) + var(--mantine-spacing-xs) * 2 + 2px);
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-default);
+  background-color: var(--mantine-color-body);
+}
+
+.m_b2613941 {
+  padding: var(--mantine-spacing-xs);
+  padding-bottom: 0;
+}
+
+.m_d6a2ef4c {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 4px var(--mantine-spacing-xs);
+  border-bottom: 1px solid var(--mantine-color-default-border);
+}
+
+.m_f214599e {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 calc(var(--ep-emoji-fz) + 4px);
+  max-width: var(--ep-emoji-size);
+  height: var(--ep-emoji-size);
+  font-size: var(--ep-emoji-fz);
+  border-radius: var(--mantine-radius-sm);
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+
+  .m_f214599e:hover {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+@media (hover: none) {
+
+  .m_f214599e:active {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+.m_5d2ad400 {
+  padding: 0 var(--mantine-spacing-xs);
+}
+
+.m_5d2ad400 [role='grid']:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(-0.125rem * var(--mantine-scale));
+  }
+
+.m_5fd65a94 {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mantine-spacing-xs);
+  text-align: center;
+}
+
+.m_b987dedd {
+  display: flex;
+  align-items: center;
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 600;
+  color: var(--mantine-color-dimmed);
+  padding: var(--mantine-spacing-xs) 0;
+  background-color: var(--mantine-color-body);
+}
+
+.m_8739711f {
+  display: grid;
+  grid-template-columns: repeat(var(--ep-columns), var(--ep-emoji-size));
+}
+
+.m_5fd6558d {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ep-emoji-size);
+  height: var(--ep-emoji-size);
+  font-size: var(--ep-emoji-fz);
+  border-radius: var(--mantine-radius-sm);
+  cursor: pointer;
+  line-height: 1;
+  padding: 0;
+  border: none;
+  background: none;
+}
+
+.m_5fd6558d:focus,
+  .m_5fd6558d:focus-visible {
+    outline: none;
+    background: none;
+  }
+
+.m_5fd6558d[data-focused] {
+    background-color: var(--mantine-color-default-hover);
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(-0.125rem * var(--mantine-scale));
+  }
+
+@media (hover: hover) {
+
+  .m_5fd6558d:hover {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+@media (hover: none) {
+
+  .m_5fd6558d:active {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+.mantine-focus-auto.m_5fd6558d:focus-visible {
+  outline: none;
+}
+
+.m_117c834f {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--mantine-spacing-xs);
+  padding: var(--ep-preview-py) var(--mantine-spacing-xs);
+  border-top: 1px solid var(--mantine-color-default-border);
+}
+
+.m_91abc637 {
+  font-size: var(--ep-emoji-fz);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.m_2e01327a {
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-dimmed);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  flex: 1;
+}
+
+.m_16864e19 {
+  padding: calc(0.25rem * var(--mantine-scale));
+}
+
+.m_774cfde7 {
+  display: flex;
+  gap: calc(0.125rem * var(--mantine-scale));
+}
+
+.m_daf4133a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ep-skin-tone-size);
+  height: var(--ep-skin-tone-size);
+  font-size: var(--ep-skin-tone-fz);
+  border-radius: var(--mantine-radius-sm);
+  cursor: pointer;
+  line-height: 1;
+}
+
+@media (hover: hover) {
+
+  .m_daf4133a:hover {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+@media (hover: none) {
+
+  .m_daf4133a:active {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+.m_774cfde7 .m_daf4133a[data-active] {
+  background-color: var(--mantine-color-default-hover);
+}
+
+.m_c47f7ead {
+  padding: 0;
+  border: none;
+  background: none;
+}
+
+.m_c78924f3 {
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.m_e3dc621e {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.m_e8c48c28 {
+  padding: 0;
+  border: none;
+  background: none;
+}
+
+.m_c873361e {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  overflow: hidden;
+}

package/styles.layer.css

@@ -0,0 +1,229 @@
+@layer mantine {.m_873e66bb {
+  --ep-columns: 9;
+  --ep-emoji-size: calc(2rem * var(--mantine-scale));
+  --ep-emoji-fz: calc(1.125rem * var(--mantine-scale));
+  --ep-preview-py: calc(0.3125rem * var(--mantine-scale));
+  --ep-skin-tone-size: calc(1.375rem * var(--mantine-scale));
+  --ep-skin-tone-fz: calc(0.875rem * var(--mantine-scale));
+
+  display: flex;
+  flex-direction: column;
+  width: calc(var(--ep-columns) * var(--ep-emoji-size) + var(--mantine-spacing-xs) * 2 + 2px);
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-default);
+  background-color: var(--mantine-color-body);
+}
+
+.m_b2613941 {
+  padding: var(--mantine-spacing-xs);
+  padding-bottom: 0;
+}
+
+.m_d6a2ef4c {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 4px var(--mantine-spacing-xs);
+  border-bottom: 1px solid var(--mantine-color-default-border);
+}
+
+.m_f214599e {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 calc(var(--ep-emoji-fz) + 4px);
+  max-width: var(--ep-emoji-size);
+  height: var(--ep-emoji-size);
+  font-size: var(--ep-emoji-fz);
+  border-radius: var(--mantine-radius-sm);
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+
+  .m_f214599e:hover {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+@media (hover: none) {
+
+  .m_f214599e:active {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+.m_5d2ad400 {
+  padding: 0 var(--mantine-spacing-xs);
+}
+
+.m_5d2ad400 [role='grid']:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(-0.125rem * var(--mantine-scale));
+  }
+
+.m_5fd65a94 {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mantine-spacing-xs);
+  text-align: center;
+}
+
+.m_b987dedd {
+  display: flex;
+  align-items: center;
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 600;
+  color: var(--mantine-color-dimmed);
+  padding: var(--mantine-spacing-xs) 0;
+  background-color: var(--mantine-color-body);
+}
+
+.m_8739711f {
+  display: grid;
+  grid-template-columns: repeat(var(--ep-columns), var(--ep-emoji-size));
+}
+
+.m_5fd6558d {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ep-emoji-size);
+  height: var(--ep-emoji-size);
+  font-size: var(--ep-emoji-fz);
+  border-radius: var(--mantine-radius-sm);
+  cursor: pointer;
+  line-height: 1;
+  padding: 0;
+  border: none;
+  background: none;
+}
+
+.m_5fd6558d:focus,
+  .m_5fd6558d:focus-visible {
+    outline: none;
+    background: none;
+  }
+
+.m_5fd6558d[data-focused] {
+    background-color: var(--mantine-color-default-hover);
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(-0.125rem * var(--mantine-scale));
+  }
+
+@media (hover: hover) {
+
+  .m_5fd6558d:hover {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+@media (hover: none) {
+
+  .m_5fd6558d:active {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+.mantine-focus-auto.m_5fd6558d:focus-visible {
+  outline: none;
+}
+
+.m_117c834f {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--mantine-spacing-xs);
+  padding: var(--ep-preview-py) var(--mantine-spacing-xs);
+  border-top: 1px solid var(--mantine-color-default-border);
+}
+
+.m_91abc637 {
+  font-size: var(--ep-emoji-fz);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.m_2e01327a {
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-dimmed);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  flex: 1;
+}
+
+.m_16864e19 {
+  padding: calc(0.25rem * var(--mantine-scale));
+}
+
+.m_774cfde7 {
+  display: flex;
+  gap: calc(0.125rem * var(--mantine-scale));
+}
+
+.m_daf4133a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ep-skin-tone-size);
+  height: var(--ep-skin-tone-size);
+  font-size: var(--ep-skin-tone-fz);
+  border-radius: var(--mantine-radius-sm);
+  cursor: pointer;
+  line-height: 1;
+}
+
+@media (hover: hover) {
+
+  .m_daf4133a:hover {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+@media (hover: none) {
+
+  .m_daf4133a:active {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+.m_774cfde7 .m_daf4133a[data-active] {
+  background-color: var(--mantine-color-default-hover);
+}
+
+.m_c47f7ead {
+  padding: 0;
+  border: none;
+  background: none;
+}
+
+.m_c78924f3 {
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.m_e3dc621e {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.m_e8c48c28 {
+  padding: 0;
+  border: none;
+  background: none;
+}
+
+.m_c873361e {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  overflow: hidden;
+}
+}