emoji-picker-react 4.4.4 → 4.4.6

package/dist/emoji-picker-react.esm.js

@@ -34,6 +34,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 = useRef(null);
@@ -78,6 +103,10 @@ function useAnchoredEmojiRef() {
 function useSetAnchoredEmojiRef() {
   var AnchoredEmojiRef = useAnchoredEmojiRef();
   return function (target) {
+    if (target === null && AnchoredEmojiRef.current !== null) {
+      focusElement(AnchoredEmojiRef.current);
+    }
+
     AnchoredEmojiRef.current = target;
   };
 }
@@ -16619,6 +16648,10 @@ function addedIn(emoji) {
   return parseFloat(emoji[EmojiProperties.added_in]);
 }
 function emojiName(emoji) {
+  if (!emoji) {
+    return '';
+  }
+
   return emojiNames(emoji)[0];
 }
 function unifiedWithoutSkinTone(unified) {
@@ -17852,31 +17885,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 useCallback(function () {
@@ -18083,10 +18091,6 @@ function useIsEmojiHidden() {
   };
 }
 
-function asEmoji(emoji) {
-  return emoji;
-}
-
 function Button(props) {
   return createElement("button", Object.assign({
     type: "button"
@@ -18168,13 +18172,18 @@ function ViewOnlyEmoji(_ref2) {
   }
 
   var emojiToRender = emoji ? emoji : emojiByUnified(unified);
+
+  if (!emojiToRender) {
+    return null;
+  }
+
   return createElement(Fragment, null, emojiStyle === EmojiStyle.NATIVE ? createElement(NativeEmoji, {
     unified: unified,
     style: style
   }) : createElement(EmojiImg, {
     unified: unified,
     style: style,
-    emoji: asEmoji(emojiToRender),
+    emoji: emojiToRender,
     emojiStyle: emojiStyle,
     lazyLoad: lazyLoad,
     getEmojiUrl: getEmojiUrl
@@ -18504,7 +18513,6 @@ function EmojiVariationPicker() {
   var visible = emoji && button && emojiHasVariations(emoji) && button.classList.contains(ClassNames.emojiHasVariatios);
   useEffect(function () {
     if (!visible) {
-      focusElement(AnchoredEmojiRef.current);
       return;
     }
 
@@ -18519,7 +18527,10 @@ function EmojiVariationPicker() {
     pointerStyle = getPointerStyle();
   }
 
-  var safeEmoji = asEmoji(emoji);
+  if (!emoji) {
+    return null;
+  }
+
   return createElement("div", {
     ref: VariationPickerRef,
     className: clsx(ClassNames.variationPicker, {
@@ -18529,10 +18540,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 createElement(ClickableEmoji, {
       key: unified,
-      emoji: safeEmoji,
+      emoji: emoji,
       unified: unified,
       emojiStyle: emojiStyle,
       showVariations: false,
@@ -18895,11 +18906,16 @@ function PreviewBody() {
   return 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 createElement(Fragment, null, createElement("div", null, show ? createElement(ViewOnlyEmoji, {
       unified: previewEmoji == null ? void 0 : previewEmoji.unified,
-      emoji: asEmoji(emoji),
+      emoji: emoji,
       emojiStyle: emojiStyle,
       size: 45,
       getEmojiUrl: getEmojiUrl
@@ -18911,7 +18927,7 @@ function PreviewBody() {
       getEmojiUrl: getEmojiUrl
     }) : null), show ? createElement("div", {
       className: "epr-preview-emoji-label"
-    }, emojiName(asEmoji(emoji))) : createElement("div", {
+    }, emojiName(emoji)) : createElement("div", {
       className: "epr-preview-emoji-label"
     }, defaultText));
   }