emoji-picker-react 4.0.5 → 4.0.7

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

@@ -7,6 +7,33 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React = require('react');
 var clsx = _interopDefault(require('clsx'));
 
+var ClassNames;
+
+(function (ClassNames) {
+  ClassNames["hiddenOnSearch"] = "epr-hidden-on-search";
+  ClassNames["searchActive"] = "epr-search-active";
+  ClassNames["hidden"] = "epr-hidden";
+  ClassNames["visible"] = "epr-visible";
+  ClassNames["active"] = "epr-active";
+  ClassNames["emoji"] = "epr-emoji";
+  ClassNames["category"] = "epr-emoji-category";
+  ClassNames["label"] = "epr-emoji-category-label";
+  ClassNames["categoryContent"] = "epr-emoji-category-content";
+  ClassNames["emojiHasVariatios"] = "epr-emoji-has-variations";
+  ClassNames["scrollBody"] = "epr-body";
+  ClassNames["external"] = "__EmojiPicker__";
+})(ClassNames || (ClassNames = {}));
+
+function asSelectors() {
+  for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
+    classNames[_key] = arguments[_key];
+  }
+
+  return classNames.map(function (c) {
+    return "." + c;
+  }).join('');
+}
+
 function ElementRefContextProvider(_ref) {
   var children = _ref.children;
   var PickerMainRef = React.useRef(null);
@@ -163,12 +190,10 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-var SuggestionMode;
-
 (function (SuggestionMode) {
   SuggestionMode["RECENT"] = "recent";
   SuggestionMode["FREQUENT"] = "frequent";
-})(SuggestionMode || (SuggestionMode = {}));
+})(exports.SuggestionMode || (exports.SuggestionMode = {}));
 
 (function (EmojiStyle) {
   EmojiStyle["NATIVE"] = "native";
@@ -263,7 +288,7 @@ function mergeCategoriesConfig(userCategoriesConfig, modifiers) {
 
   var extra = {};
 
-  if (modifiers.suggestionMode === SuggestionMode.RECENT) {
+  if (modifiers.suggestionMode === exports.SuggestionMode.RECENT) {
     extra[exports.Categories.SUGGESTED] = SuggestedRecent;
   }
 
@@ -314,19 +339,19 @@ function basePickerConfig() {
     categories: baseCategoriesConfig(),
     defaultSkinTone: exports.SkinTones.NEUTRAL,
     emojiStyle: exports.EmojiStyle.APPLE,
+    height: 450,
     lazyLoadEmojis: false,
     onEmojiClick: function defaultOnClickHandler( // @ts-ignore
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     emoji, // @ts-ignore
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     event) {},
-    height: 450,
-    width: 350,
     previewConfig: _extends({}, basePreviewConfig),
     searchPlaceHolder: 'Search',
     skinTonesDisabled: false,
-    suggestedEmojisMode: SuggestionMode.FREQUENT,
-    theme: exports.Theme.LIGHT
+    suggestedEmojisMode: exports.SuggestionMode.FREQUENT,
+    theme: exports.Theme.LIGHT,
+    width: 350
   };
 }
 var basePreviewConfig = {
@@ -15236,32 +15261,6 @@ function useOnMouseMove() {
   }, [BodyRef, allowMouseMove, isMouseDisallowed]);
 }
 
-var ClassNames;
-
-(function (ClassNames) {
-  ClassNames["hiddenOnSearch"] = "epr-hidden-on-search";
-  ClassNames["searchActive"] = "epr-search-active";
-  ClassNames["hidden"] = "epr-hidden";
-  ClassNames["visible"] = "epr-visible";
-  ClassNames["active"] = "epr-active";
-  ClassNames["emoji"] = "epr-emoji";
-  ClassNames["category"] = "epr-emoji-category";
-  ClassNames["label"] = "epr-emoji-category-label";
-  ClassNames["categoryContent"] = "epr-emoji-category-content";
-  ClassNames["emojiHasVariatios"] = "epr-emoji-has-variations";
-  ClassNames["external"] = "__EmojiPicker__";
-})(ClassNames || (ClassNames = {}));
-
-function asSelectors() {
-  for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
-    classNames[_key] = arguments[_key];
-  }
-
-  return classNames.map(function (c) {
-    return "." + c;
-  }).join('');
-}
-
 function elementCountInRow(parent, element) {
   if (!parent || !element) {
     return 0;
@@ -15391,19 +15390,54 @@ function elementHeight(element) {
   return (_element$clientHeight = element == null ? void 0 : element.clientHeight) != null ? _element$clientHeight : 0;
 }
 function emojiTrueOffsetTop(element) {
-  var _category$clientHeigh, _categoryWithoutLabel;
-
   if (!element) {
     return 0;
   }
 
   var button = buttonFromTarget(element);
-  var categoryWithoutLabel = closestCategoryContent(button);
-  var category = closestCategory(categoryWithoutLabel); // compensate for the label height
+  var category = closestCategory(button); // compensate for the label height
 
-  var labelHeight = ((_category$clientHeigh = category == null ? void 0 : category.clientHeight) != null ? _category$clientHeigh : 0) - ((_categoryWithoutLabel = categoryWithoutLabel == null ? void 0 : categoryWithoutLabel.clientHeight) != null ? _categoryWithoutLabel : 0);
+  var labelHeight = categoryLabelHeight(category);
   return elementOffsetTop(button) + elementOffsetTop(category) + labelHeight;
 }
+function categoryLabelHeight(category) {
+  var _category$clientHeigh, _categoryWithoutLabel;
+
+  if (!category) {
+    return 0;
+  }
+
+  var categoryWithoutLabel = category.querySelector(asSelectors(ClassNames.categoryContent));
+  return ((_category$clientHeigh = category == null ? void 0 : category.clientHeight) != null ? _category$clientHeigh : 0) - ((_categoryWithoutLabel = categoryWithoutLabel == null ? void 0 : categoryWithoutLabel.clientHeight) != null ? _categoryWithoutLabel : 0);
+}
+function isEmojiBehindLabel(emoji) {
+  if (!emoji) {
+    return false;
+  }
+
+  return emojiDistanceFromScrollTop(emoji) < categoryLabelHeight(closestCategory(emoji));
+}
+function queryScrollBody(root) {
+  return root ? root.matches(asSelectors(ClassNames.scrollBody)) ? root : root.querySelector(ClassNames.scrollBody) : null;
+}
+function emojiDistanceFromScrollTop(emoji) {
+  var _closestScrollBody$sc, _closestScrollBody;
+
+  if (!emoji) {
+    return 0;
+  }
+
+  return emojiTrueOffsetTop(emoji) - ((_closestScrollBody$sc = (_closestScrollBody = closestScrollBody(emoji)) == null ? void 0 : _closestScrollBody.scrollTop) != null ? _closestScrollBody$sc : 0);
+}
+function closestScrollBody(element) {
+  var _element$closest;
+
+  if (!element) {
+    return null;
+  }
+
+  return (_element$closest = element.closest(asSelectors(ClassNames.scrollBody))) != null ? _element$closest : null;
+}
 function emojiTruOffsetLeft(element) {
   var button = buttonFromTarget(element);
   var category = closestCategory(button);
@@ -15575,18 +15609,16 @@ function parseNativeEmoji(unified) {
 
 var SUGGESTED_LS_KEY = 'epr_suggested';
 function getsuggested(mode) {
-  var _window;
-
-  if (!((_window = window) != null && _window.localStorage)) {
-    return [];
-  }
-
   try {
-    var _window$localStorage$, _window2;
+    var _window, _window$localStorage$, _window2;
+
+    if (!((_window = window) != null && _window.localStorage)) {
+      return [];
+    }
 
     var recent = JSON.parse((_window$localStorage$ = (_window2 = window) == null ? void 0 : _window2.localStorage.getItem(SUGGESTED_LS_KEY)) != null ? _window$localStorage$ : '[]');
 
-    if (mode === SuggestionMode.FREQUENT) {
+    if (mode === exports.SuggestionMode.FREQUENT) {
       return recent.sort(function (a, b) {
         return b.count - a.count;
       });
@@ -15688,8 +15720,56 @@ function focusFirstElementChild(element) {
   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) {
-  focusElement(firstVisibleEmoji(parent));
+  var emoji = firstVisibleEmoji(parent);
+  focusElement(emoji);
+  scrollEmojiAboveLabel(emoji);
 }
 function focusAndClickFirstVisibleEmoji(parent) {
   var firstEmoji = firstVisibleEmoji(parent);
@@ -15711,6 +15791,7 @@ function focusNextVisibleEmoji(element) {
   }
 
   focusElement(next);
+  scrollEmojiAboveLabel(next);
 }
 function focusPrevVisibleEmoji(element) {
   if (!element) {
@@ -15724,6 +15805,7 @@ function focusPrevVisibleEmoji(element) {
   }
 
   focusElement(prev);
+  scrollEmojiAboveLabel(prev);
 }
 function focusVisibleEmojiOneRowUp(element, exitUp) {
   if (!element) {
@@ -15737,6 +15819,7 @@ function focusVisibleEmojiOneRowUp(element, exitUp) {
   }
 
   focusElement(prev);
+  scrollEmojiAboveLabel(prev);
 }
 function focusVisibleEmojiOneRowDown(element) {
   if (!element) {
@@ -15965,30 +16048,31 @@ function useOnScroll(BodyRef) {
   }, [BodyRef, closeAllOpenToggles]);
 }
 
-function scrollTo(root, top) {
-  if (top === void 0) {
-    top = 0;
-  }
-
-  var $eprBody = root ? root.querySelector('.epr-body') : null;
-
-  if (!root || !$eprBody) {
-    return;
-  }
+function useFocusSearchInput() {
+  var SearchInputRef = useSearchInputRef();
+  return React.useCallback(function () {
+    focusElement(SearchInputRef.current);
+  }, [SearchInputRef]);
+}
+function useFocusSkinTonePicker() {
+  var SkinTonePickerRef = useSkinTonePickerRef();
+  return React.useCallback(function () {
+    if (!SkinTonePickerRef.current) {
+      return;
+    }
 
-  requestAnimationFrame(function () {
-    $eprBody.scrollTop = top + 1;
-  });
+    focusFirstElementChild(SkinTonePickerRef.current);
+  }, [SkinTonePickerRef]);
 }
-function useScrollTo() {
-  var BodyRef = useBodyRef();
-  return React.useCallback(function (top) {
-    requestAnimationFrame(function () {
-      if (BodyRef.current) {
-        BodyRef.current.scrollTop = top;
-      }
-    });
-  }, [BodyRef]);
+function useFocusCategoryNavigation() {
+  var CategoryNavigationRef = useCategoryNavigationRef();
+  return React.useCallback(function () {
+    if (!CategoryNavigationRef.current) {
+      return;
+    }
+
+    focusFirstElementChild(CategoryNavigationRef.current);
+  }, [CategoryNavigationRef]);
 }
 
 function useSetFilterRef() {
@@ -16005,12 +16089,14 @@ function useSetFilterRef() {
 function useClearSearch() {
   var applySearch = useApplySearch();
   var SearchInputRef = useSearchInputRef();
+  var focusSearchInput = useFocusSearchInput();
   return function clearSearch() {
     if (SearchInputRef.current) {
       SearchInputRef.current.value = '';
     }
 
     applySearch('');
+    focusSearchInput();
   };
 }
 function useAppendSearch() {
@@ -16018,10 +16104,10 @@ function useAppendSearch() {
   var applySearch = useApplySearch();
   return function appendSearch(str) {
     if (SearchInputRef.current) {
-      SearchInputRef.current.value = SearchInputRef.current.value + str;
-      applySearch(SearchInputRef.current.value);
+      SearchInputRef.current.value = "" + SearchInputRef.current.value + str;
+      applySearch(getNormalizedSearchTerm(SearchInputRef.current.value));
     } else {
-      applySearch(str);
+      applySearch(getNormalizedSearchTerm(str));
     }
   };
 }
@@ -16040,8 +16126,9 @@ function useFilter() {
     SearchInputRef: SearchInputRef
   };
 
-  function onChange(nextValue) {
+  function onChange(inputValue) {
     var filter = filterRef.current;
+    var nextValue = inputValue.toLowerCase();
 
     if (filter != null && filter[nextValue] || nextValue.length <= 1) {
       return applySearch(nextValue);
@@ -16071,7 +16158,7 @@ function useApplySearch() {
   var PickerMainRef = usePickerMainRef();
   return function applySearch(searchTerm) {
     requestAnimationFrame(function () {
-      setSearchTerm(searchTerm.toLowerCase()).then(function () {
+      setSearchTerm(searchTerm ? searchTerm == null ? void 0 : searchTerm.toLowerCase() : searchTerm).then(function () {
         scrollTo(PickerMainRef.current, 0);
       });
     });
@@ -16106,7 +16193,7 @@ function useIsEmojiFiltered() {
       searchTerm = _useSearchTermState3[0];
 
   return function (unified) {
-    return isEmojiFilteredBySearchTerm(unified, filter, searchTerm.toLowerCase());
+    return isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
   };
 }
 
@@ -16142,6 +16229,14 @@ function findLongestMatch(keyword, dict) {
   return null;
 }
 
+function getNormalizedSearchTerm(str) {
+  if (!str || typeof str !== 'string') {
+    return '';
+  }
+
+  return str.trim().toLowerCase();
+}
+
 function useIsEmojiHidden() {
   var _useEmojisThatFailedT = useEmojisThatFailedToLoadState(),
       emojisThatFailedToLoad = _useEmojisThatFailedT[0];
@@ -16163,6 +16258,14 @@ function asEmoji(emoji) {
   return emoji;
 }
 
+function Button(props) {
+  return React.createElement("button", Object.assign({
+    type: "button"
+  }, props, {
+    className: clsx('epr-btn', props.className)
+  }), props.children);
+}
+
 function ClickableEmoji(_ref) {
   var _clsx;
 
@@ -16176,12 +16279,11 @@ function ClickableEmoji(_ref) {
       size = _ref.size,
       lazyLoad = _ref.lazyLoad;
   var hasVariations = emojiHasVariations(emoji);
-  return React.createElement("button", {
+  return React.createElement(Button, {
     className: clsx(ClassNames.emoji, (_clsx = {}, _clsx[ClassNames.hidden] = hidden, _clsx[ClassNames.hiddenOnSearch] = hiddenOnSearch, _clsx[ClassNames.visible] = !hidden && !hiddenOnSearch, _clsx[ClassNames.emojiHasVariatios] = hasVariations && showVariations, _clsx)),
     "data-unified": unified,
     "aria-label": emojiName(emoji),
-    "data-full-name": emojiNames(emoji),
-    type: "button"
+    "data-full-name": emojiNames(emoji)
   }, React.createElement(ViewOnlyEmoji, {
     unified: unified,
     emoji: emoji,
@@ -16507,7 +16609,7 @@ function Body() {
   useMouseDownHandlers(BodyRef);
   useOnMouseMove();
   return React.createElement("div", {
-    className: "epr-body",
+    className: ClassNames.scrollBody,
     ref: BodyRef
   }, React.createElement(EmojiVariationPicker, null), React.createElement(EmojiList, null));
 }
@@ -16718,6 +16820,13 @@ function useActiveCategoryScrollDetection(setActiveCategory) {
   }, [BodyRef, setActiveCategory]);
 }
 
+function useIsSearchMode() {
+  var _useSearchTermState = useSearchTermState(),
+      searchTerm = _useSearchTermState[0];
+
+  return !!searchTerm;
+}
+
 function useScrollCategoryIntoView() {
   var BodyRef = useBodyRef();
   var PickerMainRef = usePickerMainRef();
@@ -16746,6 +16855,7 @@ function CategoryNavigation() {
 
   var scrollCategoryIntoView = useScrollCategoryIntoView();
   useActiveCategoryScrollDetection(setActiveCategory);
+  var isSearchMode = useIsSearchMode();
   var categoriesConfig = useCategoriesConfig();
   var CategoryNavigationRef = useCategoryNavigationRef();
   return React.createElement("div", {
@@ -16755,8 +16865,8 @@ function CategoryNavigation() {
     var _clsx;
 
     var category = categoryFromCategoryConfig(categoryConfig);
-    return React.createElement("button", {
-      type: "button",
+    return React.createElement(Button, {
+      tabIndex: isSearchMode ? -1 : 0,
       className: clsx('epr-cat-btn', "epr-icn-" + category, (_clsx = {}, _clsx[ClassNames.active] = category === activeCategory, _clsx)),
       key: category,
       onClick: function onClick() {
@@ -16807,43 +16917,17 @@ function Search() {
     ref: SearchInputRef
   }), React.createElement("div", {
     className: "epr-icn-search"
-  }), React.createElement("button", {
+  }), React.createElement(Button, {
     className: clsx('epr-btn-clear-search', 'epr-visible-on-search-only'),
-    onClick: clearSearch,
-    type: "button"
-  }));
+    onClick: clearSearch
+  }, React.createElement("div", {
+    className: "epr-icn-clear-search"
+  })));
 }
 
 function CssSearch(_ref) {
   var value = _ref.value;
-  return value ? React.createElement("style", null, "\n        .EmojiPickerReact button.epr-emoji:not([data-full-name*=\"" + value.toLowerCase() + "\"]) {\n          display: none;\n        }\n  ") : null;
-}
-
-function useFocusSearchInput() {
-  var SearchInputRef = useSearchInputRef();
-  return React.useCallback(function () {
-    focusElement(SearchInputRef.current);
-  }, [SearchInputRef]);
-}
-function useFocusSkinTonePicker() {
-  var SkinTonePickerRef = useSkinTonePickerRef();
-  return React.useCallback(function () {
-    if (!SkinTonePickerRef.current) {
-      return;
-    }
-
-    focusFirstElementChild(SkinTonePickerRef.current);
-  }, [SkinTonePickerRef]);
-}
-function useFocusCategoryNavigation() {
-  var CategoryNavigationRef = useCategoryNavigationRef();
-  return React.useCallback(function () {
-    if (!CategoryNavigationRef.current) {
-      return;
-    }
-
-    focusFirstElementChild(CategoryNavigationRef.current);
-  }, [CategoryNavigationRef]);
+  return value ? React.createElement("style", null, "\n        .EmojiPickerReact button.epr-emoji:not([data-full-name*=\"" + getNormalizedSearchTerm(value) + "\"]) {\n          display: none;\n        }\n  ") : null;
 }
 
 function SkinTonePicker() {
@@ -16876,8 +16960,7 @@ function SkinTonePicker() {
     var _clsx;
 
     var active = skinToneVariation === activeSkinTone;
-    return React.createElement("button", {
-      type: "button",
+    return React.createElement(Button, {
       style: {
         transform: clsx("translateX(-" + i * (isOpen ? 28 : 0) + "px)", isOpen && active && 'scale(1.3)')
       },
@@ -16908,13 +16991,6 @@ function Header() {
   }, React.createElement(Search, null), React.createElement(SkinTonePicker, null)), React.createElement(CategoryNavigation, null));
 }
 
-function useIsSearchMode() {
-  var _useSearchTermState = useSearchTermState(),
-      searchTerm = _useSearchTermState[0];
-
-  return !!searchTerm;
-}
-
 function getActiveElement() {
   return document.activeElement;
 }
@@ -16951,16 +17027,10 @@ function usePickerMainKeyboardEvents() {
   var onKeyDown = React.useMemo(function () {
     return function onKeyDown(event) {
       var key = event.key;
+      disallowMouseMove();
 
       switch (key) {
-        case KeyboardEvents.ArrowDown:
-        case KeyboardEvents.ArrowUp:
-        case KeyboardEvents.ArrowLeft:
-        case KeyboardEvents.ArrowRight:
-          disallowMouseMove();
-          break;
         // eslint-disable-next-line no-fallthrough
-
         case KeyboardEvents.Escape:
           event.preventDefault();