emoji-picker-react 4.20.4 → 4.20.6

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

@@ -27899,6 +27899,7 @@ function useKeyboardNavigation() {
   useSearchInputKeyboardEvents();
   useSkinTonePickerKeyboardEvents();
   useCategoryNavigationKeyboardEvents();
+  useReactionsKeyboardEvents();
   useBodyKeyboardEvents();
 }
 function usePickerMainKeyboardEvents() {
@@ -28104,6 +28105,65 @@ function useCategoryNavigationKeyboardEvents() {
     };
   }, [CategoryNavigationRef, BodyRef, onKeyDown]);
 }
+// Arrow keys move between reaction buttons (and the expand button)
+// while the reactions bar has focus. The bar lives outside the scroll
+// body, so the body handler never sees these events.
+// https://github.com/ealush/emoji-picker-react/issues/411
+function useReactionsKeyboardEvents() {
+  var ReactionsRef = useReactionsRef();
+  // The reactions bar mounts late when the user collapses the full
+  // picker, so the listener effect must rerun when it opens.
+  var _useReactionsModeStat = useReactionsModeState(),
+    reactionsOpen = _useReactionsModeStat[0];
+  var onKeyDown = useMemo(function () {
+    return function onKeyDown(event) {
+      var key = event.key;
+      var current = ReactionsRef.current;
+      if (!current) {
+        return;
+      }
+      var delta = reactionFocusDelta(key);
+      if (delta !== 0 && focusReactionSibling(current, delta)) {
+        event.preventDefault();
+      }
+    };
+  },
+  // reactionsOpen: the bar mounts late on collapse, and the new
+  // callback identity reinstalls the listener effect below.
+  [ReactionsRef, reactionsOpen]);
+  useEffect(function () {
+    var current = ReactionsRef.current;
+    if (!current) {
+      return;
+    }
+    current.addEventListener('keydown', onKeyDown);
+    return function () {
+      current.removeEventListener('keydown', onKeyDown);
+    };
+  }, [ReactionsRef, onKeyDown]);
+}
+function reactionFocusDelta(key) {
+  switch (key) {
+    case KeyboardEvents.ArrowRight:
+    case KeyboardEvents.ArrowDown:
+      return 1;
+    case KeyboardEvents.ArrowLeft:
+    case KeyboardEvents.ArrowUp:
+      return -1;
+    default:
+      return 0;
+  }
+}
+function focusReactionSibling(root, delta) {
+  var buttons = Array.from(root.querySelectorAll('button'));
+  var activeIndex = buttons.indexOf(getActiveElement());
+  var sibling = activeIndex === -1 ? null : buttons[activeIndex + delta];
+  if (!sibling) {
+    return false;
+  }
+  focusElement(sibling);
+  return true;
+}
 function useBodyKeyboardEvents() {
   var BodyRef = useBodyRef();
   var goUpFromBody = useGoUpFromBody();
@@ -28479,9 +28539,20 @@ var styles = /*#__PURE__*/stylesheet.create({
 });
 
 function elementCountInRow(parent, element) {
+  var _parent$dataset;
   if (!parent || !element) {
     return 0;
   }
+  // The virtualized layout positions emojis with a fixed per-row count that
+  // is rendered onto the category content element. That count is the single
+  // source of truth: deriving it again from fractional rect widths can be
+  // off by one (e.g. category padding shrinking the content box), which
+  // makes arrow-up/arrow-down drift sideways by a column.
+  // https://github.com/ealush/emoji-picker-react/issues/502
+  var declared = Number((_parent$dataset = parent.dataset) == null ? void 0 : _parent$dataset.emojisPerRow);
+  if (Number.isInteger(declared) && declared > 0) {
+    return declared;
+  }
   var parentWidth = parent.getBoundingClientRect().width;
   var elementWidth = element.getBoundingClientRect().width;
   return Math.floor(parentWidth / elementWidth);
@@ -29119,6 +29190,7 @@ function ClickableEmoji(_ref) {
     lazyLoad = _ref.lazyLoad,
     getEmojiUrl = _ref.getEmojiUrl,
     className = _ref.className,
+    buttonClassName = _ref.buttonClassName,
     _ref$noBackground = _ref.noBackground,
     noBackground = _ref$noBackground === void 0 ? false : _ref$noBackground,
     style = _ref.style;
@@ -29131,7 +29203,8 @@ function ClickableEmoji(_ref) {
     emojiNames: emojiNames(emoji),
     unified: unified,
     noBackground: noBackground,
-    style: style
+    style: style,
+    className: buttonClassName
   }, createElement(ViewOnlyEmoji, {
     unified: unified,
     emoji: emoji,
@@ -29235,6 +29308,7 @@ function Reactions() {
       unified: reaction,
       showVariations: false,
       className: cx(styles$6.emojiButton),
+      buttonClassName: cx(styles$6.reactionButton),
       noBackground: true,
       getEmojiUrl: getEmojiUrl
     }));
@@ -29250,6 +29324,24 @@ var styles$6 = /*#__PURE__*/stylesheet.create({
     alignItems: 'center',
     height: '100%'
   },
+  reactionButton: {
+    // Every picker button sets outline: none, and reaction buttons also
+    // suppress the focus background, so keyboard focus was invisible.
+    // Focus mirrors the hover treatment (scale plus a soft circular
+    // wash, no outline ring): the scale transform on the inner image
+    // alone is clipped by the button's overflow: hidden, and does
+    // nothing on inline native emoji, so the button itself carries the
+    // effect. Scoped to the reactions bar so grid focus treatment is
+    // untouched.
+    // https://github.com/ealush/emoji-picker-react/issues/473
+    ':focus-visible': {
+      transform: 'scale(1.2)',
+      transition: 'background-color 0.2s, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5)',
+      backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
+      borderRadius: '50%',
+      outline: 'none'
+    }
+  },
   emojiButton: {
     ':hover': {
       transform: 'scale(1.2)'
@@ -29473,12 +29565,14 @@ function EmojiCategory(_ref) {
     children = _ref.children,
     hidden = _ref.hidden,
     hiddenOnSearch = _ref.hiddenOnSearch,
-    height = _ref.height;
+    height = _ref.height,
+    emojisPerRow = _ref.emojisPerRow;
   var category = categoryFromCategoryConfig(categoryConfig);
   var categoryName = categoryNameFromCategoryConfig(categoryConfig);
   return createElement("li", {
     className: cx(styles$7.category, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch),
     "data-name": category,
+    role: "rowgroup",
     "aria-label": categoryName
   }, createElement("h2", {
     className: cx(styles$7.label)
@@ -29486,7 +29580,9 @@ function EmojiCategory(_ref) {
     className: cx(styles$7.categoryContent),
     style: {
       height: height
-    }
+    },
+    role: "row",
+    "data-emojis-per-row": emojisPerRow
   }, children));
 }
 var styles$7 = /*#__PURE__*/stylesheet.create({
@@ -29588,47 +29684,68 @@ function EmojiList(_ref) {
   var getEmojisByCategory = useGetEmojisByCategory();
   var labelHeight = getLabelHeight(EmojiListRef.current);
   var topOffset = 0;
-  return createElement("ul", {
-    className: cx(styles$8.emojiList),
-    ref: EmojiListRef
-  }, createElement(MeasureEmoji, null), categories.map(function (categoryConfig) {
-    var category = categoryFromCategoryConfig(categoryConfig);
-    var currentOffset = topOffset;
-    var categoryHeight = categoryHeights[category];
-    if (categoryHeight) {
-      topOffset += categoryHeight + labelHeight;
-    }
-    return createElement(RenderCategory, {
-      key: category,
-      categoryEmojis: getEmojisByCategory(category),
-      categoryConfig: categoryConfig,
-      topOffset: currentOffset,
-      onHeightReady: function onHeightReady(height) {
-        if (categoryHeights[category] !== height) {
-          setCategoryHeights(function (prev) {
-            var _extends2;
-            return _extends({}, prev, (_extends2 = {}, _extends2[category] = height, _extends2));
-          });
-        }
-      },
-      scrollTop: scrollTop
-    });
-  }));
+  // role="grid" makes screen readers switch out of virtual-cursor mode so
+  // arrow keys reach the picker's keyboard handler. Each category is one
+  // rowgroup: visual rows shift under virtualization, so the category is
+  // the only stable row unit. Emoji buttons intentionally keep their
+  // native button role for activation semantics.
+  // https://github.com/ealush/emoji-picker-react/issues/508
+  // The list markup is kept for a backwards-compatible DOM structure;
+  // the grid role override is intentional.
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+    createElement("ul", {
+      className: cx(styles$8.emojiList),
+      ref: EmojiListRef,
+      role: "grid"
+    }, createElement(MeasureEmoji, null), categories.map(function (categoryConfig, index) {
+      var category = categoryFromCategoryConfig(categoryConfig);
+      var currentOffset = topOffset;
+      var categoryHeight = categoryHeights[category];
+      if (categoryHeight) {
+        topOffset += categoryHeight + labelHeight;
+      }
+      return createElement(RenderCategory, {
+        key: category,
+        categoryEmojis: getEmojisByCategory(category),
+        categoryConfig: categoryConfig,
+        topOffset: currentOffset,
+        isFirstCategory: index === 0,
+        onHeightReady: function onHeightReady(height) {
+          if (categoryHeights[category] !== height) {
+            setCategoryHeights(function (prev) {
+              var _extends2;
+              return _extends({}, prev, (_extends2 = {}, _extends2[category] = height, _extends2));
+            });
+          }
+        },
+        scrollTop: scrollTop
+      });
+    }))
+  );
 }
 function RenderCategory(_ref2) {
   var categoryEmojis = _ref2.categoryEmojis,
     categoryConfig = _ref2.categoryConfig,
     topOffset = _ref2.topOffset,
     onHeightReady = _ref2.onHeightReady,
-    scrollTop = _ref2.scrollTop;
+    scrollTop = _ref2.scrollTop,
+    isFirstCategory = _ref2.isFirstCategory;
   var _useVisibleCategories = useVisibleCategoriesState(),
     visibleCategories = _useVisibleCategories[0];
+  // The observer is the only writer of visibleCategories. When it never
+  // fires (zero-height container at mount, hidden modal), no category
+  // would ever render. The first category paints optimistically to break
+  // the deadlock; the observer takes over from there.
+  // https://github.com/ealush/emoji-picker-react/issues/469
+  // https://github.com/ealush/emoji-picker-react/issues/475
+  var isCategoryVisible = isFirstCategory || visibleCategories.includes(categoryConfig.category);
   var _useEmojiVirtualizati = useEmojiVirtualization({
       categoryEmojis: categoryEmojis,
       topOffset: topOffset,
       onHeightReady: onHeightReady,
       scrollTop: scrollTop,
-      isCategoryVisible: visibleCategories.includes(categoryConfig.category)
+      isCategoryVisible: isCategoryVisible
     }),
     virtualizedCounter = _useEmojiVirtualizati.virtualizedCounter,
     emojis = _useEmojiVirtualizati.emojis,
@@ -29636,6 +29753,7 @@ function RenderCategory(_ref2) {
   return createElement(EmojiCategory, {
     categoryConfig: categoryConfig,
     height: dimensions == null ? void 0 : dimensions.categoryHeight,
+    emojisPerRow: dimensions == null ? void 0 : dimensions.emojisPerRow,
     // Indicates that there are no visible emojis
     // Hence, the category should be hidden
     hidden: !emojis.length && virtualizedCounter === 0
@@ -30002,10 +30120,12 @@ function BtnSkinToneVariation(_ref) {
     onClick = _ref.onClick,
     isActive = _ref.isActive,
     skinToneVariation = _ref.skinToneVariation,
-    style = _ref.style;
+    style = _ref.style,
+    tabIndex = _ref.tabIndex;
   return createElement(Button, {
     style: style,
     onClick: onClick,
+    tabIndex: tabIndex,
     className: cx("epr-tone-" + skinToneVariation, styles$c.tone, !isOpen && styles$c.closedTone, isActive && styles$c.active),
     "aria-pressed": isActive,
     "aria-label": "Skin tone " + skinTonesNamed[skinToneVariation]
@@ -30114,6 +30234,12 @@ function SkinTonePicker(_ref) {
       key: skinToneVariation,
       skinToneVariation: skinToneVariation,
       isOpen: isOpen,
+      // Roving tabindex: when the fan is closed the inactive tones
+      // are invisible (opacity: 0, stacked), so they must not be
+      // reachable via Tab. The active tone stays tabbable to open
+      // the fan from the keyboard.
+      // https://github.com/ealush/emoji-picker-react/issues/492
+      tabIndex: isOpen || active ? 0 : -1,
       style: {
         transform: cx(vertical ? "translateY(-" + i * (isOpen ? ITEM_SIZE : 0) + "px)" : "translateX(-" + i * (isOpen ? ITEM_SIZE : 0) + "px)", isOpen && active && 'scale(1.3)')
       },