@fibery/ui-kit 1.17.0 → 1.17.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.17.0",
+  "version": "1.17.1",
   "main": "index.ts",
   "private": false,
   "files": [

package/src/emoji-picker/primitives/category.tsx

@@ -74,7 +74,7 @@ const CategoryItem: React.FC<CategoryItemProps> = ({id, renderEmoji}) => {
   const emojiPickerCtx = useEmojiPickerCtx();
   const emojiContentSettings = useEmojiPickerContentSettings();
 
-  const emoji = useEmojiDataStoreSelector((store) => store.get(id));
+  const emoji = useEmojiDataStoreSelector((store) => store.get(id, {skin}));
 
   if (!emoji) {
     return null;

package/src/emoji-picker/primitives/emoji.tsx

@@ -1,3 +1,4 @@
+import {FC} from "react";
 import {EmojiItem, EmojiSkin} from "@fibery/emoji-data";
 import {css, cx} from "@linaria/core";
 import {themeVars} from "../../designSystem";
@@ -41,12 +42,14 @@ export type EmojiProps = {
   skin?: EmojiSkin;
   /** render emoji as native unicode if possible */
   native?: boolean;
+  fallback?: "shortcode" | "hidden";
 };
-export const Emoji: React.FC<EmojiProps> = ({emoji: idOrColons, size, version = 14, skin, native}) => {
+
+export const Emoji: FC<EmojiProps> = ({emoji: idOrColons, size, version = 14, fallback = "hidden", skin, native}) => {
   const emoji = useEmojiDataStoreSelector((store) => store.get(idOrColons, {skin}));
 
   if (!emoji) {
-    return null;
+    return fallback === "shortcode" ? <>{idOrColons}</> : null;
   }
 
   let emojiNode: React.ReactNode;