emoji-picker-react 4.4.3 → 4.4.5

package/dist/DomUtils/classNames.d.ts

@@ -15,6 +15,7 @@ export declare enum ClassNames {
     emojiPicker = "EmojiPickerReact",
     open = "epr-open",
     vertical = "epr-vertical",
-    horizontal = "epr-horizontal"
+    horizontal = "epr-horizontal",
+    variationPicker = "epr-emoji-variation-picker"
 }
 export declare function asSelectors(...classNames: ClassNames[]): string;

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

@@ -27,6 +27,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() {
@@ -39,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);
@@ -83,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;
   };
 }
@@ -17630,198 +17660,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 React.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];
@@ -17832,9 +17676,6 @@ function useSetVariationPicker() {
 
     setAnchoredEmojiRef(element);
     setEmojiVariationPicker(emoji);
-    requestAnimationFrame(function () {
-      focusFirstVisibleEmoji(VariationPickerRef.current);
-    });
   };
 }
 
@@ -17984,6 +17825,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 React.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 React.useCallback(function () {
@@ -18431,6 +18322,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 Direction;
 
 (function (Direction) {
@@ -18456,10 +18461,16 @@ function EmojiVariationPicker() {
   var getEmojiUrl = useGetEmojiUrlConfig();
   var button = buttonFromTarget(AnchoredEmojiRef.current);
   var visible = emoji && button && emojiHasVariations(emoji) && button.classList.contains(ClassNames.emojiHasVariatios);
+  React.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();
@@ -18469,7 +18480,7 @@ function EmojiVariationPicker() {
   var safeEmoji = asEmoji(emoji);
   return React.createElement("div", {
     ref: VariationPickerRef,
-    className: clsx('epr-emoji-variation-picker', {
+    className: clsx(ClassNames.variationPicker, {
       visible: visible,
       'pointing-up': getMenuDirection() === Direction.Down
     }),
@@ -19143,7 +19154,7 @@ function useSearchInputKeyboardEvents() {
           break;
       }
     };
-  }, [focusSkinTonePicker, goDownFromSearchInput, setSkinToneFanOpenState, BodyRef]);
+  }, [focusSkinTonePicker, goDownFromSearchInput, setSkinToneFanOpenState, BodyRef, isSkinToneInSearch]);
   React.useEffect(function () {
     var current = SearchInputRef.current;