emoji-picker-react 4.0.0-rc.29 → 4.0.0-rc.30

package/dist/DomUtils/selectors.d.ts

@@ -22,3 +22,4 @@ export declare function firstVisibleEmoji(parent: NullableElement): NullableElem
 export declare function prevCategory(element: NullableElement): NullableElement;
 export declare function nextCategory(element: NullableElement): NullableElement;
 export declare function closestCategory(element: NullableElement): NullableElement;
+export declare function closestCategoryContent(element: NullableElement): NullableElement;

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

@@ -1,5 +1,5 @@
-.EmojiPickerReact button.epr-emoji{border-radius:8px;height:var(--epr-emoji-fullsize);padding:var(--epr-emoji-padding);position:relative;width:var(--epr-emoji-fullsize)}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color);border-left:4px solid transparent;border-right:4px solid transparent;bottom:0;content:"";display:block;height:0;position:absolute;right:-2px;transform:rotate(135deg);width:0;z-index:var(--epr-emoji-variations-indictator-z-index)}.EmojiPickerReact button.epr-emoji>*{display:block;height:var(--epr-emoji-size);width:var(--epr-emoji-size)}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:hover:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color-hover)}.EmojiPickerReact .epr-emoji-img{font-size:0}.EmojiPickerReact .epr-emoji-native{font-family:Noto Color Emoji,Apple Color Emoji,Segoe UI Emoji,Times,Symbola,Aegyptus,Code2000,Code2001,Code2002,Musica,serif,LastResort;font-size:var(--epr-emoji-size);line-height:100%}.EmojiPickerReact button.epr-emoji:hover{background-color:var(--epr-emoji-hover-color)}.EmojiPickerReact button.epr-emoji:focus{background-color:var(--epr-focus-bg-color)}
-.EmojiPickerReact li.epr-emoji-category>.epr-emoji-category-content{grid-gap:0;display:grid;grid-template-columns:repeat(auto-fill,var(--epr-emoji-fullsize));justify-content:space-between;padding:var(--epr-category-padding);position:relative}.EmojiPickerReact li.epr-emoji-category:not(:has(.epr-visible)){display:none}.EmojiPickerReact li.epr-emoji-category>.epr-emoji-category-label{align-items:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:var(--epr-category-label-bg-color);color:var(--epr-category-label-text-color);display:flex;font-weight:700;height:var(--epr-category-label-height);padding:var(--epr-category-label-padding);position:-webkit-sticky;position:sticky;text-transform:capitalize;top:0;width:100%;z-index:var(--epr-category-label-z-index)}
+.EmojiPickerReact button.epr-emoji{align-items:center;border-radius:8px;box-sizing:border-box;display:flex;height:var(--epr-emoji-fullsize);justify-content:center;max-height:var(--epr-emoji-fullsize);max-width:var(--epr-emoji-fullsize);overflow:hidden;position:relative;width:var(--epr-emoji-fullsize)}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color);border-left:4px solid transparent;border-right:4px solid transparent;bottom:1px;content:"";display:block;height:0;position:absolute;right:0;transform:rotate(135deg);width:0;z-index:var(--epr-emoji-variations-indictator-z-index)}.EmojiPickerReact button.epr-emoji>*{align-self:center;display:block;justify-self:center;padding:var(--epr-emoji-padding)}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:hover:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color-hover)}.EmojiPickerReact .epr-emoji-img{font-size:0}.EmojiPickerReact .epr-emoji-native{align-self:center;font-family:Segoe UI Emoji,Segoe UI Symbol,Segoe UI,Apple Color Emoji,Twemoji Mozilla,Noto Color Emoji,Android Emoji,Times,Symbola,Aegyptus,Code2000,Code2001,Code2002,Musica,serif,LastResort;font-size:var(--epr-emoji-size);justify-self:center;letter-spacing:0;line-height:100%;position:relative;text-align:center}.EmojiPickerReact button.epr-emoji:hover>*{background-color:var(--epr-emoji-hover-color)}.EmojiPickerReact button.epr-emoji:focus>*{background-color:var(--epr-focus-bg-color)}
+.EmojiPickerReact li.epr-emoji-category>.epr-emoji-category-content{grid-gap:0;display:grid;grid-template-columns:repeat(auto-fill,var(--epr-emoji-fullsize));justify-content:space-between;margin:var(--epr-category-padding);position:relative}.EmojiPickerReact li.epr-emoji-category:not(:has(.epr-visible)){display:none}.EmojiPickerReact li.epr-emoji-category>.epr-emoji-category-label{align-items:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:var(--epr-category-label-bg-color);color:var(--epr-category-label-text-color);display:flex;font-weight:700;height:var(--epr-category-label-height);padding:var(--epr-category-label-padding);position:-webkit-sticky;position:sticky;text-transform:capitalize;top:0;width:100%;z-index:var(--epr-category-label-z-index)}
 .EmojiPickerReact ul.epr-emoji-list{list-style:none;margin:0;padding:0}
 .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:5px;opacity:0;padding:5px;pointer-events:none;position:absolute;right:5px;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(-7px)}.EmojiPickerReact .epr-emoji-variation-picker.pointing-up .epr-emoji-pointer{top:0;transform:rotate(180deg) translateY(100%) translateX(7px)}
 .EmojiPickerReact .epr-body{flex:1;overflow-x:hidden;overflow-y:scroll;position:relative}

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

@@ -15381,7 +15381,7 @@ function rowNumber(parent, element) {
   var elementHeight = element.getBoundingClientRect().height;
   var elementTop = element.getBoundingClientRect().top;
   var parentTop = parent.getBoundingClientRect().top;
-  return Math.round((elementTop - parentTop) / elementHeight) - 1;
+  return Math.round((elementTop - parentTop) / elementHeight);
 }
 function hasNextRow(parent, element) {
   if (!parent || !element) {
@@ -15651,7 +15651,6 @@ function closestCategory(element) {
 
   return element.closest(asSelectors(ClassNames.category));
 }
-
 function closestCategoryContent(element) {
   if (!element) {
     return null;
@@ -15865,10 +15864,11 @@ function visibleEmojiOneRowUp(element) {
     return null;
   }
 
-  var category = closestCategory(element);
-  var indexInRow = elementIndexInRow(category, element);
-  var row = rowNumber(category, element);
-  var countInRow = elementCountInRow(category, element);
+  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);
@@ -15877,7 +15877,7 @@ function visibleEmojiOneRowUp(element) {
       return null;
     }
 
-    return getElementInRow(allVisibleEmojis(prevVisibleCategory), -1, // last row
+    return getElementInRow(allVisibleEmojis(categoryContent), -1, // last row
     countInRow, indexInRow);
   }
 
@@ -15889,12 +15889,13 @@ function visibleEmojiOneRowDown(element) {
     return null;
   }
 
-  var category = closestCategory(element);
-  var indexInRow = elementIndexInRow(category, element);
-  var row = rowNumber(category, element);
-  var countInRow = elementCountInRow(category, element);
+  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(category, element)) {
+  if (!hasNextRow(categoryContent, element)) {
     var nextVisibleCategory = nextCategory(category);
 
     if (!nextVisibleCategory) {
@@ -15904,7 +15905,7 @@ function visibleEmojiOneRowDown(element) {
     return getElementInRow(allVisibleEmojis(nextVisibleCategory), 0, countInRow, indexInRow);
   }
 
-  var itemInNextRow = getElementInNextRow(allVisibleEmojis(category), row, countInRow, indexInRow);
+  var itemInNextRow = getElementInNextRow(allVisibleEmojis(categoryContent), row, countInRow, indexInRow);
   return itemInNextRow;
 }