emoji-picker-react 4.14.2 → 4.15.1

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

@@ -18866,7 +18866,6 @@ var styles = /*#__PURE__*/stylesheet.create({
       '--epr-horizontal-padding': '10px',
       '--epr-picker-border-radius': '8px',
       /* Header */
-      '--epr-search-border-color': 'var(--epr-highlight-color)',
       '--epr-header-padding': '15px var(--epr-horizontal-padding)',
       /* Skin Tone Picker */
       '--epr-active-skin-tone-indicator-border-color': 'var(--epr-highlight-color)',
@@ -18879,6 +18878,8 @@ var styles = /*#__PURE__*/stylesheet.create({
       '--epr-search-input-text-color': 'var(--epr-text-color)',
       '--epr-search-input-placeholder-color': 'var(--epr-text-color)',
       '--epr-search-bar-inner-padding': 'var(--epr-horizontal-padding)',
+      '--epr-search-border-color': 'var(--epr-search-input-bg-color)',
+      '--epr-search-border-color-active': 'var(--epr-highlight-color)',
       /*  Category Navigation */
       '--epr-category-navigation-button-size': '30px',
       /* Variation Picker */
@@ -20650,6 +20651,7 @@ function useActiveCategoryScrollDetection(_ref) {
   var BodyRef = useBodyRef();
   React.useEffect(function () {
     var visibleCategories = new Map();
+    var intersectingCategories = new Map();
     var bodyRef = BodyRef.current;
     var observer = new IntersectionObserver(function (entries) {
       if (!bodyRef) {
@@ -20662,17 +20664,20 @@ function useActiveCategoryScrollDetection(_ref) {
           continue;
         }
         visibleCategories.set(_id, entry.intersectionRatio);
+        intersectingCategories.set(_id, entry.isIntersecting);
       }
       var ratios = Array.from(visibleCategories);
-      setVisibleCategories(ratios.filter(function (_ref2) {
-        var ratio = _ref2[1];
-        return ratio > 0;
+      var visibleCats = ratios.filter(function (_ref2) {
+        var id = _ref2[0],
+          ratio = _ref2[1];
+        return ratio > 0 || intersectingCategories.get(id);
       }).map(function (_ref3) {
         var id = _ref3[0];
         return id;
-      }));
+      });
+      setVisibleCategories(visibleCats);
       var lastCategory = ratios[ratios.length - 1];
-      if (lastCategory[1] == 1) {
+      if ((lastCategory == null ? void 0 : lastCategory[1]) == 1) {
         return setActiveCategory(lastCategory[0]);
       }
       for (var _i = 0, _ratios = ratios; _i < _ratios.length; _i++) {
@@ -20685,11 +20690,15 @@ function useActiveCategoryScrollDetection(_ref) {
         }
       }
     }, {
+      root: bodyRef,
       threshold: [0, 1]
     });
     bodyRef == null ? void 0 : bodyRef.querySelectorAll(asSelectors(ClassNames.category)).forEach(function (el) {
       observer.observe(el);
     });
+    return function () {
+      observer.disconnect();
+    };
   }, [BodyRef, setActiveCategory, setVisibleCategories]);
 }
 
@@ -21035,11 +21044,11 @@ var styles$j = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
     padding: 'var(--epr-search-input-padding)',
     height: 'var(--epr-search-input-height)',
     backgroundColor: 'var(--epr-search-input-bg-color)',
-    border: '1px solid var(--epr-search-input-bg-color)',
+    border: '1px solid var(--epr-search-border-color)',
     width: '100%',
     ':focus': {
       backgroundColor: 'var(--epr-search-input-bg-color-active)',
-      border: '1px solid var(--epr-search-border-color)'
+      border: '1px solid var(--epr-search-border-color-active)'
     },
     '::placeholder': {
       color: 'var(--epr-search-input-placeholder-color)'
@@ -21196,4 +21205,5 @@ function EmojiPicker$1(props) {
 
 exports.Emoji = ExportedEmoji;
 exports.default = EmojiPicker$1;
+exports.emojiByUnified = emojiByUnified;
 //# sourceMappingURL=emoji-picker-react.cjs.development.js.map