@atlaskit/reactions 30.0.7 → 31.0.0

package/dist/es2019/components/ReactionDialog/styles.js

@@ -1,77 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-import { N500 } from '@atlaskit/theme/colors';
-/*Reactions Container. Using pseudo Element :after to set border since with onClick of Reaction to higlight the
-border blue below the reaction. Setting Border Width based on number of reactions to make sure it shows up
-in case the container overflows */
-export const containerStyle = reactionsBorderWidth => css({
-  overflow: 'hidden',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: '100%',
-  display: 'flex',
-  justifyContent: 'start',
-  position: 'relative',
-  scrollBehavior: 'smooth',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '&:after': {
-    content: '""',
-    zIndex: 0,
-    display: 'block',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    minWidth: `${reactionsBorderWidth}%`,
-    bottom: '0px',
-    position: 'absolute'
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const navigationContainerStyle = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '> button': {
-    cursor: 'pointer'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  'button:last-child': {
-    marginLeft: "var(--ds-space-200, 16px)"
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const userListStyle = css({
-  listStyle: 'none',
-  marginTop: "var(--ds-space-200, 16px)",
-  padding: 0,
-  textAlign: 'left',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  li: {
-    color: `${`var(--ds-text, ${N500})`}`,
-    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const userStyle = css({
-  display: 'flex',
-  alignItems: 'center',
-  padding: `${"var(--ds-space-050, 4px)"} 0px ${"var(--ds-space-050, 4px)"} 0px`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '> span': {
-    marginLeft: "var(--ds-space-200, 16px)"
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const customTabListStyles = css({
-  overflow: 'auto',
-  display: 'flex',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  'div[role=tablist]': {
-    flexGrow: 1,
-    // paddingInline exists to maintain styling prior to @atlaskit/tabs update that removed baked in horizontal padding
-    paddingInline: "var(--ds-space-100, 8px)"
-  }
-});

package/dist/es2019/components/ReactionParticleEffect/ReactionParticleEffect.js

@@ -1,29 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { ResourcedEmoji } from '@atlaskit/emoji';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { containerStyle, reactionParticleStyle } from './styles';
-export const PARTICLE_COUNT = 4;
-export const ReactionParticleEffect = ({
-  emojiProvider,
-  emojiId
-}) =>
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-jsx("div", {
-  css: containerStyle
-}, [...Array(PARTICLE_COUNT)].map((_, index) => {
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    jsx("div", {
-      key: index,
-      css: reactionParticleStyle
-    }, jsx(ResourcedEmoji, {
-      emojiProvider: emojiProvider,
-      emojiId: emojiId,
-      fitToHeight: 16
-    }))
-  );
-}));

package/dist/es2019/components/ReactionParticleEffect/index.js

@@ -1 +0,0 @@
-export { ReactionParticleEffect } from './ReactionParticleEffect';

package/dist/es2019/components/ReactionParticleEffect/styles.js

@@ -1,64 +0,0 @@
-import { layers } from '@atlaskit/theme/constants';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, keyframes } from '@emotion/react';
-const fade = keyframes({
-  '0%': {
-    opacity: 0
-  },
-  '20%': {
-    opacity: 1
-  },
-  '60%': {
-    opacity: 1
-  },
-  '100%': {
-    opacity: 0
-  }
-});
-const float = keyframes({
-  '0%': {
-    transform: 'translateY(0) scale(1)'
-  },
-  '100%': {
-    transform: 'translateY(-120px) scale(1.7)'
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const containerStyle = css({
-  position: 'relative',
-  left: 8,
-  // Ensure the effect displays above tooltips
-  zIndex: layers.tooltip() + 1,
-  '@media (prefers-reduced-motion: reduce)': {
-    opacity: 0
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const reactionParticleStyle = css({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  pointerEvents: 'none',
-  opacity: 0,
-  animation: `${fade} ease-in-out, ${float} ease`,
-  animationDuration: '700ms',
-  // Override position and delay for each particle
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':nth-child(2)': {
-    left: -5,
-    animationDelay: '0.15s'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':nth-child(3)': {
-    left: 8,
-    animationDelay: '0.3s'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':nth-child(4)': {
-    left: -1,
-    animationDelay: '0.45s'
-  }
-});

package/dist/es2019/components/ReactionPicker/ReactionPicker.js

@@ -1,298 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { FormattedMessage } from 'react-intl-next';
-import { EmojiPicker } from '@atlaskit/emoji/picker';
-import { Manager, Popper, Reference } from '@atlaskit/popper';
-import { layers } from '@atlaskit/theme/constants';
-import { useCloseManager } from '../../hooks/useCloseManager';
-import { useFocusTrap } from '../../hooks/useFocusTrap';
-import { messages } from '../../shared/i18n';
-import { PickerRender } from '../../ufo';
-import { Selector } from '../Selector';
-import { Trigger } from '../Trigger';
-import { contentStyle, pickerStyle, popupStyle, popupWrapperStyle } from './styles';
-import { RepositionOnUpdate } from './RepositionOnUpdate';
-
-/**
- * Test id for wrapper ReactionPicker div
- */
-export const RENDER_REACTIONPICKER_TESTID = 'reactionPicker-testid';
-
-/**
- * Test id for ReactionPicker panel div
- */
-export const RENDER_REACTIONPICKERPANEL_TESTID = 'reactionPickerPanel-testid';
-
-/**
- * Emoji Picker Controller Id for Accessibility Labels
- */
-const PICKER_CONTROL_ID = 'emoji-picker';
-/**
- * Picker component for adding reactions
- */
-export const ReactionPicker = /*#__PURE__*/React.memo(props => {
-  const {
-    miniMode,
-    className,
-    emojiProvider,
-    onSelection,
-    allowAllEmojis,
-    disabled,
-    pickerQuickReactionEmojiIds,
-    onShowMore = () => {},
-    onOpen = () => {},
-    onCancel = () => {},
-    tooltipContent = jsx(FormattedMessage, messages.addReaction),
-    emojiPickerSize,
-    showOpaqueBackground = false,
-    subtleReactionsSummaryAndPicker = false,
-    showAddReactionText = false,
-    reactionPickerTriggerIcon,
-    reactionPickerPlacement,
-    reactionsPickerPreventOverflowOptions
-  } = props;
-  const [triggerRef, setTriggerRef] = useState(null);
-
-  /**
-   * Container <div /> reference (used by custom hook to detect click outside)
-   */
-  const wrapperRef = useRef(null);
-  const updatePopper = useRef();
-  const popperPlacement = reactionPickerPlacement || 'bottom-start';
-  const popperModifiers = [
-  /**
-    Removing this applyStyle modifier as it throws client errors ref:
-   https://popper.js.org/docs/v1/#modifiers
-   https://popper.js.org/docs/v1/#modifiers..applyStyle
-   { name: 'applyStyle', enabled: false },
-    */
-  {
-    name: 'hide',
-    enabled: false
-  }, {
-    name: 'offset',
-    enabled: true,
-    options: {
-      offset: [0, 0]
-    }
-  }, {
-    name: 'flip',
-    enabled: true,
-    options: {
-      flipVariations: true,
-      boundariesElement: 'scrollParent'
-    }
-  }, {
-    name: 'preventOverflow',
-    enabled: true,
-    ...(reactionsPickerPreventOverflowOptions && {
-      options: reactionsPickerPreventOverflowOptions
-    })
-  }];
-  const [settings, setSettings] = useState({
-    /**
-     * Show the picker floating panel
-     */
-    isOpen: false,
-    /**
-     * Show the full custom emoji list picker or the default list of emojis
-     */
-    showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
-    /**
-     * Placement for popper
-     */
-    popperPlacement
-  });
-
-  /**
-   * Custom hook triggers when user clicks outside the reactions picker
-   */
-  useCloseManager(wrapperRef, callbackType => {
-    close();
-    onCancel();
-    if (triggerRef && callbackType === 'ESCAPE') {
-      requestAnimationFrame(() => triggerRef.focus());
-    }
-  }, true, settings.isOpen);
-
-  /**
-   * Event callback when the picker is closed
-   * @param _id Optional id if an emoji button was selected or undefineed if was clicked outside the picker
-   */
-  const close = useCallback(_id => {
-    setSettings({
-      ...settings,
-      isOpen: false
-    });
-    // ufo abort reaction experience
-    PickerRender.abort({
-      metadata: {
-        emojiId: _id,
-        source: 'ReactionPicker',
-        reason: 'close dialog'
-      }
-    });
-  }, [settings]);
-
-  /**
-   * Event handle rwhen selecting to show the custom emoji icons picker
-   * @param e event param
-   */
-  const onSelectMoreClick = useCallback(e => {
-    e.preventDefault();
-    setSettings({
-      isOpen: true,
-      showFullPicker: true,
-      popperPlacement
-    });
-    onShowMore();
-  }, [onShowMore, popperPlacement]);
-
-  /**
-   * Event callback when an emoji icon is selected
-   * @param item selected item
-   */
-  const onEmojiSelected = useCallback(item => {
-    // no emoji was selected
-    if (!item.id) {
-      return;
-    }
-    onSelection(item.id, settings.showFullPicker ? 'emojiPicker' : 'quickSelector');
-    close(item.id);
-  }, [close, onSelection, settings.showFullPicker]);
-
-  /**
-   * Event handler when the emoji icon to open the custom picker is selected
-   */
-  const onTriggerClick = () => {
-    // ufo start reactions picker open experience
-    PickerRender.start();
-    setSettings({
-      isOpen: !settings.isOpen,
-      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
-      popperPlacement
-    });
-    onOpen();
-    // ufo reactions picker opened success
-    PickerRender.success();
-  };
-  const wrapperClassName = ` ${settings.isOpen ? 'isOpen' : ''} ${miniMode ? 'miniMode' : ''} ${className}`;
-  useLayoutEffect(() => {
-    var _updatePopper$current;
-    (_updatePopper$current = updatePopper.current) === null || _updatePopper$current === void 0 ? void 0 : _updatePopper$current.call(updatePopper);
-  }, [settings]);
-  return jsx("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: wrapperClassName
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: pickerStyle,
-    "data-testid": RENDER_REACTIONPICKER_TESTID,
-    ref: wrapperRef
-  }, jsx(Manager, null, jsx(Reference, null, ({
-    ref
-  }) =>
-  // Render a button to open the <Selector /> panel
-  jsx(Trigger, {
-    ariaAttributes: {
-      'aria-expanded': settings.isOpen,
-      'aria-controls': PICKER_CONTROL_ID
-    },
-    ref: node => {
-      if (node && settings.isOpen) {
-        if (typeof ref === 'function') {
-          ref(node);
-        } else {
-          ref.current = node;
-        }
-        setTriggerRef(node);
-      }
-    },
-    onClick: onTriggerClick,
-    miniMode: miniMode,
-    disabled: disabled,
-    tooltipContent: settings.isOpen ? null : tooltipContent,
-    showOpaqueBackground: showOpaqueBackground,
-    showAddReactionText: showAddReactionText,
-    subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-    reactionPickerTriggerIcon: reactionPickerTriggerIcon
-  })), settings.isOpen && jsx(PopperWrapper, {
-    settings: settings,
-    popperModifiers: popperModifiers
-  }, settings.showFullPicker ? jsx(EmojiPicker, {
-    emojiProvider: emojiProvider,
-    onSelection: onEmojiSelected,
-    size: emojiPickerSize
-  }) :
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  jsx("div", {
-    css: contentStyle
-  }, jsx(Selector, {
-    emojiProvider: emojiProvider,
-    onSelection: onEmojiSelected,
-    showMore: allowAllEmojis,
-    onMoreClick: onSelectMoreClick,
-    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds
-  })))));
-});
-export const PopperWrapper = props => {
-  const {
-    settings,
-    children,
-    popperModifiers
-  } = props;
-  const [popupRef, setPopupRef] = useState(null);
-  /**
-   * add focus lock to popup
-   */
-  useFocusTrap({
-    initialFocusRef: null,
-    targetRef: popupRef
-  });
-  return jsx(Popper, {
-    placement: settings.popperPlacement,
-    modifiers: popperModifiers,
-    strategy: "absolute"
-  }, ({
-    ref,
-    style,
-    update
-  }) => {
-    return jsx("div", {
-      id: PICKER_CONTROL_ID,
-      "data-testid": RENDER_REACTIONPICKERPANEL_TESTID
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      ,
-      style: {
-        zIndex: layers.layer(),
-        ...style
-      },
-      ref: node => {
-        if (node) {
-          if (typeof ref === 'function') {
-            ref(node);
-          } else {
-            ref.current = node;
-          }
-          setPopupRef(node);
-        }
-      }
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      ,
-      css: popupWrapperStyle
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      ,
-      tabIndex: 0
-    }, jsx(RepositionOnUpdate, {
-      update: update,
-      settings: settings
-    }, jsx("div", {
-      css: popupStyle
-    }, children)));
-  });
-};

package/dist/es2019/components/ReactionPicker/index.js

@@ -1 +0,0 @@
-export { ReactionPicker, RENDER_REACTIONPICKER_TESTID } from './ReactionPicker';

package/dist/es2019/components/ReactionPicker/styles.js

@@ -1,44 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { N0, N50A, N60A } from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const pickerStyle = css({
-  verticalAlign: 'middle',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&.miniMode': {
-    display: 'inline-block'
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const contentStyle = css({
-  display: 'flex'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const popupWrapperStyle = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':focus': {
-    outline: 'none'
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const popupStyle = css({
-  background: `var(--ds-surface-overlay, ${N0})`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: `${borderRadius()}px`,
-  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&> div': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    boxShadow: undefined,
-    marginTop: "var(--ds-space-050, 4px)",
-    marginBottom: "var(--ds-space-050, 4px)"
-  }
-});

package/dist/es2019/components/ReactionSummary/ReactionSummaryButton.js

@@ -1,108 +0,0 @@
-import React, { forwardRef, useMemo } from 'react';
-import { useIntl } from 'react-intl-next';
-import { ResourcedEmoji } from '@atlaskit/emoji';
-import { Inline, xcss, Box, Flex } from '@atlaskit/primitives';
-import { messages } from '../../shared/i18n';
-import { Counter } from '../Counter';
-import { ReactionButton } from '../Reaction';
-const emojiStyle = xcss({
-  transformOrigin: 'center center 0',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '12px'
-});
-const buttonStyle = xcss({
-  paddingTop: 'space.050',
-  paddingRight: 'space.050',
-  paddingBottom: 'space.050',
-  paddingLeft: 'space.100'
-});
-const compactButtonStyle = xcss({
-  height: '20px',
-  alignItems: 'center',
-  marginTop: 'space.075'
-});
-const compactPaddingStyles = xcss({
-  paddingTop: 'space.025'
-});
-const opaqueBackgroundStyles = xcss({
-  backgroundColor: 'elevation.surface',
-  ':hover': {
-    backgroundColor: 'elevation.surface.hovered'
-  },
-  ':active': {
-    backgroundColor: 'elevation.surface.pressed'
-  }
-});
-const containerStyle = xcss({
-  position: 'relative'
-});
-const hideBorderStyle = xcss({
-  border: 'none'
-});
-/**
- * Test id for summary reaction wrapper button
- */
-export const RENDER_SUMMARY_BUTTON_TESTID = 'reaction-summary-button';
-
-/**
- * Test id for emojis displayed inside summary button. All emoji's in the summary button will have this test id
- */
-export const RENDER_SUMMARY_EMOJI_TESTID = 'summary-emoji-display';
-
-// forwardRef is used here so that the parent popup component can properly interact with the button
-export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
-  emojiProvider,
-  reactions = [],
-  emojisToShow = 3,
-  onClick,
-  showOpaqueBackground = false,
-  subtleReactionsSummaryAndPicker = false,
-  useCompactStyles = false,
-  useButtonAlignmentStyling = false
-}, ref) => {
-  const intl = useIntl();
-
-  // Helper function to sort reactions by count and return top N
-  const getTopReactions = (reactions, topN) => {
-    return [...reactions].sort((a, b) => b.count - a.count).slice(0, topN);
-  };
-  const totalReactionsCount = useMemo(() => {
-    return reactions.reduce((accum, current) => {
-      return accum += (current === null || current === void 0 ? void 0 : current.count) || 0;
-    }, 0);
-  }, [reactions]);
-  const topReactions = useMemo(() => getTopReactions(reactions, emojisToShow), [emojisToShow, reactions]);
-  const buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
-  const subtleSummaryStyles = subtleReactionsSummaryAndPicker ? [hideBorderStyle] : [];
-  const compactButtonStyles = useCompactStyles ? [compactButtonStyle] : [];
-  return /*#__PURE__*/React.createElement(Flex, {
-    xcss: containerStyle,
-    ref: ref,
-    alignItems: "center",
-    justifyContent: "center"
-  }, /*#__PURE__*/React.createElement(ReactionButton, {
-    onClick: onClick,
-    testId: RENDER_SUMMARY_BUTTON_TESTID,
-    ariaLabel: intl.formatMessage(messages.summary),
-    additionalStyles: [...buttonStyles, ...subtleSummaryStyles, ...compactButtonStyles]
-  }, /*#__PURE__*/React.createElement(Inline, {
-    space: "space.050",
-    xcss: useCompactStyles ? [buttonStyle, compactPaddingStyles] : buttonStyle,
-    testId: "reaction-summary-wrapper"
-  }, topReactions.map(reaction => /*#__PURE__*/React.createElement(Box, {
-    xcss: emojiStyle,
-    testId: RENDER_SUMMARY_EMOJI_TESTID
-  }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
-    key: reaction.emojiId,
-    emojiProvider: emojiProvider,
-    emojiId: {
-      id: reaction.emojiId,
-      shortName: ''
-    },
-    fitToHeight: useCompactStyles ? 12 : 16
-  })))), /*#__PURE__*/React.createElement(Counter, {
-    value: totalReactionsCount,
-    useDarkerFont: useCompactStyles || useButtonAlignmentStyling,
-    useUpdatedStyles: !useCompactStyles && useButtonAlignmentStyling
-  })));
-});