emoji-picker-react 4.4.4 → 4.4.6

package/dist/components/body/EmojiVariationPicker.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import './EmojiVariationPicker.css';
-export declare function EmojiVariationPicker(): JSX.Element;
+export declare function EmojiVariationPicker(): JSX.Element | null;

package/dist/components/emoji/Emoji.d.ts

@@ -17,6 +17,6 @@ declare type BaseProps = {
     getEmojiUrl?: GetEmojiUrl;
 };
 export declare function ClickableEmoji({ emoji, unified, hidden, hiddenOnSearch, emojiStyle, showVariations, size, lazyLoad, getEmojiUrl, }: ClickableEmojiProps): JSX.Element;
-export declare function ViewOnlyEmoji({ emoji, unified, emojiStyle, size, lazyLoad, getEmojiUrl, }: BaseProps): JSX.Element;
+export declare function ViewOnlyEmoji({ emoji, unified, emojiStyle, size, lazyLoad, getEmojiUrl, }: BaseProps): JSX.Element | null;
 export declare type GetEmojiUrl = (unified: string, style: EmojiStyle) => string;
 export {};

package/dist/dataUtils/emojiSelectors.d.ts

@@ -3,7 +3,7 @@ import { EmojiStyle, SkinTones } from '../types/exposedTypes';
 import { DataEmoji, DataEmojis } from './DataTypes';
 export declare function emojiNames(emoji: DataEmoji): string[];
 export declare function addedIn(emoji: DataEmoji): number;
-export declare function emojiName(emoji: DataEmoji): string;
+export declare function emojiName(emoji?: DataEmoji): string;
 export declare function unifiedWithoutSkinTone(unified: string): string;
 export declare function emojiUnified(emoji: DataEmoji, skinTone?: string): string;
 export declare function emojisByCategory(category: Categories): DataEmojis;

package/dist/emoji-picker-react.cjs.development.js

@@ -40,6 +40,31 @@ function asSelectors() {
   }).join('');
 }
 
+function focusElement(element) {
+  if (!element) {
+    return;
+  }
+
+  requestAnimationFrame(function () {
+    element.focus();
+  });
+}
+function focusPrevElementSibling(element) {
+  if (!element) return;
+  var prev = element.previousElementSibling;
+  focusElement(prev);
+}
+function focusNextElementSibling(element) {
+  if (!element) return;
+  var next = element.nextElementSibling;
+  focusElement(next);
+}
+function focusFirstElementChild(element) {
+  if (!element) return;
+  var first = element.firstElementChild;
+  focusElement(first);
+}
+
 function ElementRefContextProvider(_ref) {
   var children = _ref.children;
   var PickerMainRef = React.useRef(null);
@@ -84,6 +109,10 @@ function useAnchoredEmojiRef() {
 function useSetAnchoredEmojiRef() {
   var AnchoredEmojiRef = useAnchoredEmojiRef();
   return function (target) {
+    if (target === null && AnchoredEmojiRef.current !== null) {
+      focusElement(AnchoredEmojiRef.current);
+    }
+
     AnchoredEmojiRef.current = target;
   };
 }
@@ -16613,6 +16642,10 @@ function addedIn(emoji) {
   return parseFloat(emoji[EmojiProperties.added_in]);
 }
 function emojiName(emoji) {
+  if (!emoji) {
+    return '';
+  }
+
   return emojiNames(emoji)[0];
 }
 function unifiedWithoutSkinTone(unified) {
@@ -17846,31 +17879,6 @@ function scrollEmojiAboveLabel(emoji) {
   scrollBy(scrollBody, -(categoryLabelHeight(closestCategory(emoji)) - by));
 }
 
-function focusElement(element) {
-  if (!element) {
-    return;
-  }
-
-  requestAnimationFrame(function () {
-    element.focus();
-  });
-}
-function focusPrevElementSibling(element) {
-  if (!element) return;
-  var prev = element.previousElementSibling;
-  focusElement(prev);
-}
-function focusNextElementSibling(element) {
-  if (!element) return;
-  var next = element.nextElementSibling;
-  focusElement(next);
-}
-function focusFirstElementChild(element) {
-  if (!element) return;
-  var first = element.firstElementChild;
-  focusElement(first);
-}
-
 function useFocusSearchInput() {
   var SearchInputRef = useSearchInputRef();
   return React.useCallback(function () {
@@ -18077,10 +18085,6 @@ function useIsEmojiHidden() {
   };
 }
 
-function asEmoji(emoji) {
-  return emoji;
-}
-
 function Button(props) {
   return React.createElement("button", Object.assign({
     type: "button"
@@ -18132,13 +18136,18 @@ function ViewOnlyEmoji(_ref2) {
   }
 
   var emojiToRender = emoji ? emoji : emojiByUnified(unified);
+
+  if (!emojiToRender) {
+    return null;
+  }
+
   return React.createElement(React.Fragment, null, emojiStyle === exports.EmojiStyle.NATIVE ? React.createElement(NativeEmoji, {
     unified: unified,
     style: style
   }) : React.createElement(EmojiImg, {
     unified: unified,
     style: style,
-    emoji: asEmoji(emojiToRender),
+    emoji: emojiToRender,
     emojiStyle: emojiStyle,
     lazyLoad: lazyLoad,
     getEmojiUrl: getEmojiUrl
@@ -18459,7 +18468,6 @@ function EmojiVariationPicker() {
   var visible = emoji && button && emojiHasVariations(emoji) && button.classList.contains(ClassNames.emojiHasVariatios);
   React.useEffect(function () {
     if (!visible) {
-      focusElement(AnchoredEmojiRef.current);
       return;
     }
 
@@ -18474,7 +18482,10 @@ function EmojiVariationPicker() {
     pointerStyle = getPointerStyle();
   }
 
-  var safeEmoji = asEmoji(emoji);
+  if (!emoji) {
+    return null;
+  }
+
   return React.createElement("div", {
     ref: VariationPickerRef,
     className: clsx(ClassNames.variationPicker, {
@@ -18484,10 +18495,10 @@ function EmojiVariationPicker() {
     style: {
       top: top
     }
-  }, visible ? [emojiUnified(safeEmoji)].concat(emojiVariations(safeEmoji)).slice(0, 6).map(function (unified) {
+  }, visible ? [emojiUnified(emoji)].concat(emojiVariations(emoji)).slice(0, 6).map(function (unified) {
     return React.createElement(ClickableEmoji, {
       key: unified,
-      emoji: safeEmoji,
+      emoji: emoji,
       unified: unified,
       emojiStyle: emojiStyle,
       showVariations: false,
@@ -18838,11 +18849,16 @@ function PreviewBody() {
   return React.createElement(PreviewContent, null);
 
   function PreviewContent() {
-    var defaultEmoji = asEmoji(variationPickerEmoji != null ? variationPickerEmoji : emojiByUnified(previewConfig.defaultEmoji));
+    var defaultEmoji = variationPickerEmoji != null ? variationPickerEmoji : emojiByUnified(previewConfig.defaultEmoji);
+
+    if (!defaultEmoji) {
+      return null;
+    }
+
     var defaultText = variationPickerEmoji ? emojiName(variationPickerEmoji) : previewConfig.defaultCaption;
     return React.createElement(React.Fragment, null, React.createElement("div", null, show ? React.createElement(ViewOnlyEmoji, {
       unified: previewEmoji == null ? void 0 : previewEmoji.unified,
-      emoji: asEmoji(emoji),
+      emoji: emoji,
       emojiStyle: emojiStyle,
       size: 45,
       getEmojiUrl: getEmojiUrl
@@ -18854,7 +18870,7 @@ function PreviewBody() {
       getEmojiUrl: getEmojiUrl
     }) : null), show ? React.createElement("div", {
       className: "epr-preview-emoji-label"
-    }, emojiName(asEmoji(emoji))) : React.createElement("div", {
+    }, emojiName(emoji)) : React.createElement("div", {
       className: "epr-preview-emoji-label"
     }, defaultText));
   }