@atlaskit/reactions 30.0.7 → 31.0.0

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

@@ -1,120 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-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';
-var emojiStyle = xcss({
-  transformOrigin: 'center center 0',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '12px'
-});
-var buttonStyle = xcss({
-  paddingTop: 'space.050',
-  paddingRight: 'space.050',
-  paddingBottom: 'space.050',
-  paddingLeft: 'space.100'
-});
-var compactButtonStyle = xcss({
-  height: '20px',
-  alignItems: 'center',
-  marginTop: 'space.075'
-});
-var compactPaddingStyles = xcss({
-  paddingTop: 'space.025'
-});
-var opaqueBackgroundStyles = xcss({
-  backgroundColor: 'elevation.surface',
-  ':hover': {
-    backgroundColor: 'elevation.surface.hovered'
-  },
-  ':active': {
-    backgroundColor: 'elevation.surface.pressed'
-  }
-});
-var containerStyle = xcss({
-  position: 'relative'
-});
-var hideBorderStyle = xcss({
-  border: 'none'
-});
-/**
- * Test id for summary reaction wrapper button
- */
-export var 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 var RENDER_SUMMARY_EMOJI_TESTID = 'summary-emoji-display';
-
-// forwardRef is used here so that the parent popup component can properly interact with the button
-export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var emojiProvider = _ref.emojiProvider,
-    _ref$reactions = _ref.reactions,
-    reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
-    _ref$emojisToShow = _ref.emojisToShow,
-    emojisToShow = _ref$emojisToShow === void 0 ? 3 : _ref$emojisToShow,
-    onClick = _ref.onClick,
-    _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
-    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
-    _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
-    subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
-    _ref$useCompactStyles = _ref.useCompactStyles,
-    useCompactStyles = _ref$useCompactStyles === void 0 ? false : _ref$useCompactStyles,
-    _ref$useButtonAlignme = _ref.useButtonAlignmentStyling,
-    useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme;
-  var intl = useIntl();
-
-  // Helper function to sort reactions by count and return top N
-  var getTopReactions = function getTopReactions(reactions, topN) {
-    return _toConsumableArray(reactions).sort(function (a, b) {
-      return b.count - a.count;
-    }).slice(0, topN);
-  };
-  var totalReactionsCount = useMemo(function () {
-    return reactions.reduce(function (accum, current) {
-      return accum += (current === null || current === void 0 ? void 0 : current.count) || 0;
-    }, 0);
-  }, [reactions]);
-  var topReactions = useMemo(function () {
-    return getTopReactions(reactions, emojisToShow);
-  }, [emojisToShow, reactions]);
-  var buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
-  var subtleSummaryStyles = subtleReactionsSummaryAndPicker ? [hideBorderStyle] : [];
-  var 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: [].concat(buttonStyles, subtleSummaryStyles, compactButtonStyles)
-  }, /*#__PURE__*/React.createElement(Inline, {
-    space: "space.050",
-    xcss: useCompactStyles ? [buttonStyle, compactPaddingStyles] : buttonStyle,
-    testId: "reaction-summary-wrapper"
-  }, topReactions.map(function (reaction) {
-    return /*#__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
-  })));
-});

package/dist/esm/components/ReactionSummary/ReactionSummaryView.js

@@ -1,105 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useState } from 'react';
-import Popup from '@atlaskit/popup';
-import { Inline, xcss } from '@atlaskit/primitives';
-import { Reaction } from '../Reaction';
-import { ReactionSummaryViewEmojiPicker } from './ReactionSummaryViewEmojiPicker';
-import { ReactionSummaryButton } from './ReactionSummaryButton';
-var summaryPopupStyles = xcss({
-  padding: 'space.100',
-  paddingTop: 'space.050',
-  maxWidth: '325px'
-});
-
-/**
- * Test id for the Reactions summary view popup
- */
-export var RENDER_SUMMARY_VIEW_POPUP_TESTID = 'render-summary-view-popup';
-export var ReactionSummaryView = function ReactionSummaryView(_ref) {
-  var emojiProvider = _ref.emojiProvider,
-    _ref$reactions = _ref.reactions,
-    reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
-    _ref$flash = _ref.flash,
-    flash = _ref$flash === void 0 ? {} : _ref$flash,
-    _ref$particleEffectBy = _ref.particleEffectByEmoji,
-    particleEffectByEmoji = _ref$particleEffectBy === void 0 ? {} : _ref$particleEffectBy,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'auto-start' : _ref$placement,
-    onReactionClick = _ref.onReactionClick,
-    onReactionFocused = _ref.onReactionFocused,
-    onReactionMouseEnter = _ref.onReactionMouseEnter,
-    _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
-    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
-    _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
-    subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
-    allowUserDialog = _ref.allowUserDialog,
-    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
-    _ref$isViewOnly = _ref.isViewOnly,
-    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly,
-    allowSelectFromSummaryView = _ref.allowSelectFromSummaryView,
-    disabled = _ref.disabled,
-    emojiPickerSize = _ref.emojiPickerSize,
-    onSelection = _ref.onSelection,
-    tooltipContent = _ref.tooltipContent,
-    reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
-    onOpen = _ref.onOpen,
-    useButtonAlignmentStyling = _ref.useButtonAlignmentStyling;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isSummaryPopupOpen = _useState2[0],
-    setSummaryPopupOpen = _useState2[1];
-  var handlePopupClose = useCallback(function () {
-    return setSummaryPopupOpen(false);
-  }, []);
-  var handleSummaryClick = useCallback(function () {
-    return setSummaryPopupOpen(!isSummaryPopupOpen);
-  }, [isSummaryPopupOpen]);
-  return /*#__PURE__*/React.createElement(Popup, {
-    placement: placement,
-    content: function content() {
-      return /*#__PURE__*/React.createElement(Inline, {
-        xcss: summaryPopupStyles,
-        testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
-        space: "space.025",
-        shouldWrap: true,
-        alignBlock: "center"
-      }, reactions.map(function (reaction) {
-        return /*#__PURE__*/React.createElement(Reaction, {
-          key: reaction.emojiId,
-          reaction: reaction,
-          emojiProvider: emojiProvider,
-          onClick: onReactionClick,
-          onFocused: onReactionFocused,
-          onMouseEnter: onReactionMouseEnter,
-          flash: flash[reaction.emojiId],
-          showParticleEffect: particleEffectByEmoji[reaction.emojiId],
-          allowUserDialog: allowUserDialog,
-          handleOpenReactionsDialog: handleOpenReactionsDialog,
-          isViewOnly: isViewOnly
-        });
-      }), allowSelectFromSummaryView && /*#__PURE__*/React.createElement(ReactionSummaryViewEmojiPicker, {
-        emojiProvider: emojiProvider,
-        disabled: disabled,
-        onSelection: onSelection,
-        emojiPickerSize: emojiPickerSize,
-        tooltipContent: tooltipContent,
-        reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-        onOpen: onOpen
-      }));
-    },
-    isOpen: isSummaryPopupOpen,
-    onClose: handlePopupClose,
-    trigger: function trigger(triggerProps) {
-      return /*#__PURE__*/React.createElement(ReactionSummaryButton, _extends({}, triggerProps, {
-        emojiProvider: emojiProvider,
-        reactions: reactions,
-        onClick: handleSummaryClick,
-        showOpaqueBackground: showOpaqueBackground,
-        subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-        useCompactStyles: allowSelectFromSummaryView,
-        useButtonAlignmentStyling: useButtonAlignmentStyling
-      }));
-    }
-  });
-};

package/dist/esm/components/ReactionSummary/index.js

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

package/dist/esm/components/ReactionTooltip/ReactionTooltip.js

@@ -1,62 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import Tooltip from '@atlaskit/tooltip';
-import { FormattedMessage } from 'react-intl-next';
-import { TOOLTIP_USERS_LIMIT } from '../../shared/constants';
-import { messages } from '../../shared/i18n';
-import { emojiNameStyle, footerStyle, tooltipStyle, underlineStyle } from './styles';
-/**
- * Test id for wrapper ReactionTooltip div
- */
-export var RENDER_REACTIONTOOLTIP_TESTID = 'render-reactionTooltip';
-export var ReactionTooltip = function ReactionTooltip(_ref) {
-  var children = _ref.children,
-    emojiName = _ref.emojiName,
-    _ref$reaction$users = _ref.reaction.users,
-    users = _ref$reaction$users === void 0 ? [] : _ref$reaction$users,
-    _ref$maxReactions = _ref.maxReactions,
-    maxReactions = _ref$maxReactions === void 0 ? TOOLTIP_USERS_LIMIT : _ref$maxReactions,
-    _ref$isEnabled = _ref.isEnabled,
-    isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
-    allowUserDialog = _ref.allowUserDialog,
-    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
-    dismissTooltip = _ref.dismissTooltip;
-  var handleClick = function handleClick() {
-    if (allowUserDialog && handleOpenReactionsDialog) {
-      dismissTooltip();
-      handleOpenReactionsDialog();
-    }
-  };
-  var content = !users || users.length === 0 || !isEnabled ? null :
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, jsx-a11y/no-noninteractive-tabindex -- Ignored via go/DSP-18766
-  jsx("div", {
-    css: tooltipStyle,
-    tabIndex: 0
-  }, jsx("ul", null, emojiName ? jsx("li", {
-    css: emojiNameStyle
-  }, emojiName) : null, users.slice(0, maxReactions).map(function (user) {
-    return jsx("li", {
-      key: user.id
-    }, user.displayName);
-  }), jsx("li", {
-    // 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: allowUserDialog ? [footerStyle, underlineStyle] : footerStyle,
-    onMouseDown: handleClick,
-    onClick: handleClick
-  }, users.length > maxReactions && jsx(FormattedMessage, _extends({}, messages.otherUsers, {
-    values: {
-      count: users.length - maxReactions
-    }
-  })))));
-  return jsx(Tooltip, {
-    content: content,
-    position: "bottom",
-    testId: RENDER_REACTIONTOOLTIP_TESTID
-  }, React.Children.only(children));
-};

package/dist/esm/components/ReactionTooltip/index.js

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

package/dist/esm/components/ReactionTooltip/styles.js

@@ -1,53 +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 { N90, N800, N0 } from '@atlaskit/theme/colors';
-export var verticalMargin = 5;
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var tooltipStyle = css({
-  maxWidth: '150px',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  marginBottom: verticalMargin,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  ul: {
-    listStyle: 'none',
-    margin: 0,
-    padding: 0,
-    textAlign: 'left'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  li: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    marginTop: verticalMargin
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var emojiNameStyle = css({
-  textTransform: 'capitalize',
-  color: "var(--ds-text-inverse, ".concat(N90, ")"),
-  fontWeight: "var(--ds-font-weight-semibold, 600)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var footerStyle = css({
-  color: "var(--ds-text-inverse, ".concat(N90, ")")
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var underlineStyle = css({
-  cursor: 'pointer',
-  textDecoration: 'underline',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':hover': {
-    backgroundColor: "var(--ds-background-neutral-bold, ".concat(N800, ")"),
-    color: "var(--ds-text-inverse, ".concat(N0, ")")
-  }
-});