emoji-picker-react 4.4.3 → 4.4.5

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

@@ -21,6 +21,7 @@ var ClassNames;
   ClassNames["open"] = "epr-open";
   ClassNames["vertical"] = "epr-vertical";
   ClassNames["horizontal"] = "epr-horizontal";
+  ClassNames["variationPicker"] = "epr-emoji-variation-picker";
 })(ClassNames || (ClassNames = {}));
 
 function asSelectors() {
@@ -33,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);
@@ -77,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;
   };
 }
@@ -17636,198 +17666,12 @@ function useHasOpenToggles() {
   };
 }
 
-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 scrollTo(root, top) {
-  if (top === void 0) {
-    top = 0;
-  }
-
-  var $eprBody = queryScrollBody(root);
-
-  if (!$eprBody) {
-    return;
-  }
-
-  requestAnimationFrame(function () {
-    $eprBody.scrollTop = top + 1;
-  });
-}
-function scrollBy(root, by) {
-  var $eprBody = queryScrollBody(root);
-
-  if (!$eprBody) {
-    return;
-  }
-
-  requestAnimationFrame(function () {
-    $eprBody.scrollTop = $eprBody.scrollTop + by;
-  });
-}
-function useScrollTo() {
-  var BodyRef = useBodyRef();
-  return useCallback(function (top) {
-    requestAnimationFrame(function () {
-      if (BodyRef.current) {
-        BodyRef.current.scrollTop = top;
-      }
-    });
-  }, [BodyRef]);
-}
-function scrollEmojiAboveLabel(emoji) {
-  if (!isEmojiBehindLabel(emoji)) {
-    return;
-  }
-
-  var scrollBody = closestScrollBody(emoji);
-  var by = emojiDistanceFromScrollTop(emoji);
-  scrollBy(scrollBody, -(categoryLabelHeight(closestCategory(emoji)) - by));
-}
-
-function focusFirstVisibleEmoji(parent) {
-  var emoji = firstVisibleEmoji(parent);
-  focusElement(emoji);
-  scrollEmojiAboveLabel(emoji);
-}
-function focusAndClickFirstVisibleEmoji(parent) {
-  var firstEmoji = firstVisibleEmoji(parent);
-  focusElement(firstEmoji);
-  firstEmoji == null ? void 0 : firstEmoji.click();
-}
-function focusLastVisibleEmoji(parent) {
-  focusElement(lastVisibleEmoji(parent));
-}
-function focusNextVisibleEmoji(element) {
-  if (!element) {
-    return;
-  }
-
-  var next = nextVisibleEmoji(element);
-
-  if (!next) {
-    return focusFirstVisibleEmoji(nextCategory(element));
-  }
-
-  focusElement(next);
-  scrollEmojiAboveLabel(next);
-}
-function focusPrevVisibleEmoji(element) {
-  if (!element) {
-    return;
-  }
-
-  var prev = prevVisibleEmoji(element);
-
-  if (!prev) {
-    return focusLastVisibleEmoji(prevCategory(element));
-  }
-
-  focusElement(prev);
-  scrollEmojiAboveLabel(prev);
-}
-function focusVisibleEmojiOneRowUp(element, exitUp) {
-  if (!element) {
-    return;
-  }
-
-  var prev = visibleEmojiOneRowUp(element);
-
-  if (!prev) {
-    return exitUp();
-  }
-
-  focusElement(prev);
-  scrollEmojiAboveLabel(prev);
-}
-function focusVisibleEmojiOneRowDown(element) {
-  if (!element) {
-    return;
-  }
-
-  var next = visibleEmojiOneRowDown(element);
-  return focusElement(next);
-}
-
-function visibleEmojiOneRowUp(element) {
-  if (!element) {
-    return null;
-  }
-
-  var categoryContent = closestCategoryContent(element);
-  var category = closestCategory(categoryContent);
-  var indexInRow = elementIndexInRow(categoryContent, element);
-  var row = rowNumber(categoryContent, element);
-  var countInRow = elementCountInRow(categoryContent, element);
-
-  if (row === 0) {
-    var prevVisibleCategory = prevCategory(category);
-
-    if (!prevVisibleCategory) {
-      return null;
-    }
-
-    return getElementInRow(allVisibleEmojis(prevVisibleCategory), -1, // last row
-    countInRow, indexInRow);
-  }
-
-  return getElementInPrevRow(allVisibleEmojis(categoryContent), row, countInRow, indexInRow);
-}
-
-function visibleEmojiOneRowDown(element) {
-  if (!element) {
-    return null;
-  }
-
-  var categoryContent = closestCategoryContent(element);
-  var category = closestCategory(categoryContent);
-  var indexInRow = elementIndexInRow(categoryContent, element);
-  var row = rowNumber(categoryContent, element);
-  var countInRow = elementCountInRow(categoryContent, element);
-
-  if (!hasNextRow(categoryContent, element)) {
-    var nextVisibleCategory = nextCategory(category);
-
-    if (!nextVisibleCategory) {
-      return null;
-    }
-
-    return getElementInRow(allVisibleEmojis(nextVisibleCategory), 0, countInRow, indexInRow);
-  }
-
-  var itemInNextRow = getElementInNextRow(allVisibleEmojis(categoryContent), row, countInRow, indexInRow);
-  return itemInNextRow;
-}
-
 function useSetVariationPicker() {
   var setAnchoredEmojiRef = useSetAnchoredEmojiRef();
 
   var _useEmojiVariationPic = useEmojiVariationPickerState(),
       setEmojiVariationPicker = _useEmojiVariationPic[1];
 
-  var VariationPickerRef = useVariationPickerRef();
   return function setVariationPicker(element) {
     var _emojiFromElement = emojiFromElement(element),
         emoji = _emojiFromElement[0];
@@ -17838,9 +17682,6 @@ function useSetVariationPicker() {
 
     setAnchoredEmojiRef(element);
     setEmojiVariationPicker(emoji);
-    requestAnimationFrame(function () {
-      focusFirstVisibleEmoji(VariationPickerRef.current);
-    });
   };
 }
 
@@ -17990,6 +17831,56 @@ function useOnScroll(BodyRef) {
   }, [BodyRef, closeAllOpenToggles]);
 }
 
+function scrollTo(root, top) {
+  if (top === void 0) {
+    top = 0;
+  }
+
+  var $eprBody = queryScrollBody(root);
+
+  if (!$eprBody) {
+    return;
+  }
+
+  requestAnimationFrame(function () {
+    $eprBody.scrollTop = top + 1;
+  });
+}
+function scrollBy(root, by) {
+  var $eprBody = queryScrollBody(root);
+
+  if (!$eprBody) {
+    return;
+  }
+
+  requestAnimationFrame(function () {
+    $eprBody.scrollTop = $eprBody.scrollTop + by;
+  });
+}
+function useScrollTo() {
+  var BodyRef = useBodyRef();
+  return useCallback(function (top) {
+    requestAnimationFrame(function () {
+      if (BodyRef.current) {
+        BodyRef.current.scrollTop = top;
+      }
+    });
+  }, [BodyRef]);
+}
+function scrollEmojiAboveLabel(emoji) {
+  if (!emoji || !isEmojiBehindLabel(emoji)) {
+    return;
+  }
+
+  if (emoji.closest(asSelectors(ClassNames.variationPicker))) {
+    return;
+  }
+
+  var scrollBody = closestScrollBody(emoji);
+  var by = emojiDistanceFromScrollTop(emoji);
+  scrollBy(scrollBody, -(categoryLabelHeight(closestCategory(emoji)) - by));
+}
+
 function useFocusSearchInput() {
   var SearchInputRef = useSearchInputRef();
   return useCallback(function () {
@@ -18473,6 +18364,120 @@ function RenderCategory(_ref) {
   }, emojis);
 }
 
+function focusFirstVisibleEmoji(parent) {
+  var emoji = firstVisibleEmoji(parent);
+  focusElement(emoji);
+  scrollEmojiAboveLabel(emoji);
+}
+function focusAndClickFirstVisibleEmoji(parent) {
+  var firstEmoji = firstVisibleEmoji(parent);
+  focusElement(firstEmoji);
+  firstEmoji == null ? void 0 : firstEmoji.click();
+}
+function focusLastVisibleEmoji(parent) {
+  focusElement(lastVisibleEmoji(parent));
+}
+function focusNextVisibleEmoji(element) {
+  if (!element) {
+    return;
+  }
+
+  var next = nextVisibleEmoji(element);
+
+  if (!next) {
+    return focusFirstVisibleEmoji(nextCategory(element));
+  }
+
+  focusElement(next);
+  scrollEmojiAboveLabel(next);
+}
+function focusPrevVisibleEmoji(element) {
+  if (!element) {
+    return;
+  }
+
+  var prev = prevVisibleEmoji(element);
+
+  if (!prev) {
+    return focusLastVisibleEmoji(prevCategory(element));
+  }
+
+  focusElement(prev);
+  scrollEmojiAboveLabel(prev);
+}
+function focusVisibleEmojiOneRowUp(element, exitUp) {
+  if (!element) {
+    return;
+  }
+
+  var prev = visibleEmojiOneRowUp(element);
+
+  if (!prev) {
+    return exitUp();
+  }
+
+  focusElement(prev);
+  scrollEmojiAboveLabel(prev);
+}
+function focusVisibleEmojiOneRowDown(element) {
+  if (!element) {
+    return;
+  }
+
+  var next = visibleEmojiOneRowDown(element);
+  return focusElement(next);
+}
+
+function visibleEmojiOneRowUp(element) {
+  if (!element) {
+    return null;
+  }
+
+  var categoryContent = closestCategoryContent(element);
+  var category = closestCategory(categoryContent);
+  var indexInRow = elementIndexInRow(categoryContent, element);
+  var row = rowNumber(categoryContent, element);
+  var countInRow = elementCountInRow(categoryContent, element);
+
+  if (row === 0) {
+    var prevVisibleCategory = prevCategory(category);
+
+    if (!prevVisibleCategory) {
+      return null;
+    }
+
+    return getElementInRow(allVisibleEmojis(prevVisibleCategory), -1, // last row
+    countInRow, indexInRow);
+  }
+
+  return getElementInPrevRow(allVisibleEmojis(categoryContent), row, countInRow, indexInRow);
+}
+
+function visibleEmojiOneRowDown(element) {
+  if (!element) {
+    return null;
+  }
+
+  var categoryContent = closestCategoryContent(element);
+  var category = closestCategory(categoryContent);
+  var indexInRow = elementIndexInRow(categoryContent, element);
+  var row = rowNumber(categoryContent, element);
+  var countInRow = elementCountInRow(categoryContent, element);
+
+  if (!hasNextRow(categoryContent, element)) {
+    var nextVisibleCategory = nextCategory(category);
+
+    if (!nextVisibleCategory) {
+      return null;
+    }
+
+    return getElementInRow(allVisibleEmojis(nextVisibleCategory), 0, countInRow, indexInRow);
+  }
+
+  var itemInNextRow = getElementInNextRow(allVisibleEmojis(categoryContent), row, countInRow, indexInRow);
+  return itemInNextRow;
+}
+
 var css_248z$3 = ".EmojiPickerReact .epr-emoji-variation-picker{align-items:center;background:var(--epr-emoji-variation-picker-bg-color);border:1px solid var(--epr-picker-border-color);border-radius:3px;box-shadow:0 2px 5px rgba(0,0,0,.2);display:flex;height:0;height:var(--epr-emoji-variation-picker-height);justify-content:space-around;left:15px;opacity:0;padding:5px;pointer-events:none;position:absolute;right:15px;top:0;top:-100%;transform:scale(.9);transition:transform .1s ease-out,opacity .2s ease-out;visibility:hidden;z-index:var(--epr-skin-variation-picker-z-index)}.EmojiPickerReact .epr-emoji-variation-picker.pointing-up{transform:scale(.9);transform-origin:center 0}.EmojiPickerReact .epr-emoji-variation-picker.visible{opacity:1;pointer-events:all;transform:scale(1);visibility:visible}.EmojiPickerReact .epr-emoji-variation-picker .EmojiPickerReact .epr-emoji-variation-picker button.epr-emoji:hover{background:none}.EmojiPickerReact .epr-emoji-variation-picker .epr-emoji-pointer{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='15' xml:space='preserve'%3E%3Cg stroke-miterlimit='10'%3E%3Cpath fill='%23FFF' stroke='%23E8E7E7' d='m1.86-.43 9.83 11.53c.59.69 1.56.69 2.14 0L23.66-.43'/%3E%3Cpath fill='%23010202' stroke='%23151617' d='m26.86-.43 9.83 11.53c.59.69 1.56.69 2.14 0L48.66-.43'/%3E%3C/g%3E%3C/svg%3E\");background-position:0 0;background-repeat:no-repeat;background-size:50px 15px;content:\"\";height:15px;position:absolute;top:-10px;width:25px}.EmojiPickerReact.epr-dark-theme .epr-emoji-variation-picker .epr-emoji-pointer{background-position:-25px 0}.EmojiPickerReact .epr-emoji-variation-picker .epr-emoji-pointer{top:100%;transform:translateX(-18px)}.EmojiPickerReact .epr-emoji-variation-picker.pointing-up .epr-emoji-pointer{top:0;transform:rotate(180deg) translateY(100%) translateX(18px)}";
 styleInject(css_248z$3);
 
@@ -18501,10 +18506,16 @@ function EmojiVariationPicker() {
   var getEmojiUrl = useGetEmojiUrlConfig();
   var button = buttonFromTarget(AnchoredEmojiRef.current);
   var visible = emoji && button && emojiHasVariations(emoji) && button.classList.contains(ClassNames.emojiHasVariatios);
+  useEffect(function () {
+    if (!visible) {
+      return;
+    }
+
+    focusFirstVisibleEmoji(VariationPickerRef.current);
+  }, [VariationPickerRef, visible, AnchoredEmojiRef]);
   var top, pointerStyle;
 
   if (!visible && AnchoredEmojiRef.current) {
-    focusElement(AnchoredEmojiRef.current);
     setAnchoredEmojiRef(null);
   } else {
     top = getTop();
@@ -18514,7 +18525,7 @@ function EmojiVariationPicker() {
   var safeEmoji = asEmoji(emoji);
   return createElement("div", {
     ref: VariationPickerRef,
-    className: clsx('epr-emoji-variation-picker', {
+    className: clsx(ClassNames.variationPicker, {
       visible: visible,
       'pointing-up': getMenuDirection() === Direction.Down
     }),
@@ -19209,7 +19220,7 @@ function useSearchInputKeyboardEvents() {
           break;
       }
     };
-  }, [focusSkinTonePicker, goDownFromSearchInput, setSkinToneFanOpenState, BodyRef]);
+  }, [focusSkinTonePicker, goDownFromSearchInput, setSkinToneFanOpenState, BodyRef, isSkinToneInSearch]);
   useEffect(function () {
     var current = SearchInputRef.current;