@atlaskit/reactions 30.0.7 → 30.0.8

package/dist/es2019/components/Reaction/Reaction.js

@@ -1,173 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useIntl } from 'react-intl-next';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import { ResourcedEmoji } from '@atlaskit/emoji';
-import { Box, Inline, xcss } from '@atlaskit/primitives';
-import { createAndFireSafe, createReactionClickedEvent, createReactionFocusedEvent, createReactionHoveredEvent } from '../../analytics';
-import { Counter } from '../Counter';
-import { ReactionParticleEffect } from '../ReactionParticleEffect';
-import { ReactionTooltip } from '../ReactionTooltip';
-import { messages } from '../../shared/i18n';
-import { isLeftClick } from '../../shared/utils';
-import { emojiStyle, emojiNoReactionStyle } from './styles';
-import { ReactionButton } from './ReactionButton';
-import { StaticReaction } from './StaticReaction';
-/**
- * Test id for Reaction item wrapper div
- */
-export const RENDER_REACTION_TESTID = 'render_reaction_wrapper';
-const containerStyles = xcss({
-  position: 'relative'
-});
-const borderlessStyle = xcss({
-  border: 'none'
-});
-const reactedStyles = xcss({
-  backgroundColor: 'color.background.selected',
-  borderColor: 'color.border.selected',
-  ':hover': {
-    backgroundColor: 'color.background.selected.hovered'
-  },
-  ':active': {
-    backgroundColor: 'color.background.selected.pressed'
-  }
-});
-const opaqueBackgroundStyles = xcss({
-  backgroundColor: 'elevation.surface',
-  ':hover': {
-    backgroundColor: 'elevation.surface.hovered'
-  },
-  ':active': {
-    backgroundColor: 'elevation.surface.pressed'
-  }
-});
-
-/**
- * Render an emoji reaction button
- */
-export const Reaction = ({
-  emojiProvider,
-  onClick,
-  reaction,
-  onMouseEnter = () => {},
-  onFocused = () => {},
-  flash = false,
-  showParticleEffect = false,
-  showOpaqueBackground = false,
-  allowUserDialog,
-  handleOpenReactionsDialog,
-  isViewOnly = false,
-  showSubtleStyle
-}) => {
-  const intl = useIntl();
-  const hoverStart = useRef();
-  const focusStart = useRef();
-  const {
-    createAnalyticsEvent
-  } = useAnalyticsEvents();
-  const [emojiName, setEmojiName] = useState();
-  const [isTooltipEnabled, setIsTooltipEnabled] = useState(true);
-  const {
-    reacted
-  } = reaction;
-  const emojiId = {
-    id: reaction.emojiId,
-    shortName: ''
-  };
-
-  // TODO: Extract the flow to a custom hook to retrieve emoji detailed description from an id using a custom hook. This will benefit a better optimization instead of the emojiProvider resolving everytime.
-  // Also optimize in future version to fetch in batch several emojiIds
-  useEffect(() => {
-    (async () => {
-      const emojiResource = await Promise.resolve(emojiProvider);
-      const foundEmoji = await emojiResource.findById(reaction.emojiId);
-      if (foundEmoji) {
-        setEmojiName(foundEmoji.name);
-      }
-    })();
-  }, [emojiProvider, reaction.emojiId]);
-  const handleClick = useCallback(event => {
-    event.preventDefault();
-    if (isLeftClick(event)) {
-      const {
-        reacted,
-        emojiId
-      } = reaction;
-      createAndFireSafe(createAnalyticsEvent, createReactionClickedEvent, !reacted, emojiId);
-      onClick(reaction.emojiId, event);
-    }
-  }, [createAnalyticsEvent, reaction, onClick]);
-  const handleMouseEnter = useCallback(event => {
-    event.preventDefault();
-    setIsTooltipEnabled(true);
-    if (!reaction.users || !reaction.users.length) {
-      focusStart.current = Date.now();
-    }
-    createAndFireSafe(createAnalyticsEvent, createReactionHoveredEvent, focusStart.current);
-    onMouseEnter(reaction.emojiId, event);
-  }, [createAnalyticsEvent, reaction, onMouseEnter]);
-  const handleFocused = useCallback(event => {
-    event.preventDefault();
-    setIsTooltipEnabled(true);
-    if (!reaction.users || !reaction.users.length) {
-      hoverStart.current = Date.now();
-    }
-    createAndFireSafe(createAnalyticsEvent, createReactionFocusedEvent, hoverStart.current);
-    onFocused(reaction.emojiId, event);
-  }, [createAnalyticsEvent, reaction, onFocused]);
-  const dismissTooltip = () => {
-    setIsTooltipEnabled(false);
-  };
-  const buttonStyles = [...(showOpaqueBackground ? [opaqueBackgroundStyles] : []), ...(showSubtleStyle ? [borderlessStyle] : [])];
-  const emojiAndCount = jsx(Inline, null, jsx("div", {
-    css: [emojiStyle, reaction.count === 0 && emojiNoReactionStyle]
-  }, jsx(ResourcedEmoji, {
-    emojiProvider: emojiProvider,
-    emojiId: emojiId,
-    fitToHeight: 16
-  })), jsx(Counter, {
-    value: reaction.count,
-    highlight: !isViewOnly && reaction.reacted
-  }));
-  return jsx(Box, {
-    xcss: containerStyles
-  }, showParticleEffect && jsx(ReactionParticleEffect, {
-    emojiId: emojiId,
-    emojiProvider: emojiProvider
-  }), jsx(ReactionTooltip, {
-    emojiName: emojiName,
-    reaction: reaction,
-    isEnabled: isTooltipEnabled,
-    allowUserDialog: allowUserDialog,
-    handleOpenReactionsDialog: handleOpenReactionsDialog,
-    dismissTooltip: dismissTooltip
-  }, isViewOnly ? jsx(StaticReaction, {
-    onMouseEnter: handleMouseEnter,
-    onFocus: handleFocused,
-    testId: RENDER_REACTION_TESTID,
-    dataAttributes: {
-      'data-emoji-id': reaction.emojiId
-    }
-  }, emojiAndCount) : jsx(ReactionButton, {
-    onClick: handleClick,
-    flash: flash,
-    additionalStyles: reaction.reacted ? [reactedStyles] : buttonStyles,
-    ariaLabel: intl.formatMessage(messages.reactWithEmoji, {
-      emoji: emojiName
-    }),
-    ariaPressed: reacted,
-    onMouseEnter: handleMouseEnter,
-    onFocus: handleFocused,
-    testId: RENDER_REACTION_TESTID,
-    dataAttributes: {
-      'data-emoji-id': reaction.emojiId,
-      'data-emoji-button-id': reaction.emojiId
-    }
-  }, emojiAndCount)));
-};

package/dist/es2019/components/Reaction/ReactionButton.js

@@ -1,69 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-import { Pressable, xcss } from '@atlaskit/primitives';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { FlashAnimation } from '../FlashAnimation';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-import { flashStyle, flashStyleOld } from './styles';
-import { fg } from '@atlaskit/platform-feature-flags';
-
-// please sync reaction styles that are not button-specific with StaticReaction.tsx
-const reactionButtonStyles = xcss({
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'flex-start',
-  minWidth: '36px',
-  height: '24px',
-  backgroundColor: 'color.background.neutral.subtle',
-  borderWidth: 'border.width',
-  borderStyle: 'solid',
-  borderColor: 'color.border',
-  borderRadius: 'border.radius.circle',
-  color: 'color.text.subtle',
-  marginBlockStart: 'space.050',
-  marginInlineEnd: 'space.050',
-  padding: 'space.0',
-  overflow: 'hidden',
-  ':hover': {
-    backgroundColor: 'color.background.neutral.subtle.hovered'
-  },
-  ':active': {
-    backgroundColor: 'color.background.neutral.subtle.pressed'
-  }
-});
-const reactionStylesRefresh = xcss({
-  borderRadius: 'border.radius'
-});
-export const ReactionButton = ({
-  onClick,
-  flash = false,
-  additionalStyles = [],
-  ariaLabel,
-  ariaPressed,
-  onMouseEnter,
-  onFocus,
-  children,
-  dataAttributes = {},
-  testId
-}) => {
-  return jsx(Pressable, _extends({
-    onClick: onClick,
-    onMouseEnter: onMouseEnter,
-    onFocus: onFocus,
-    "aria-label": ariaLabel,
-    "aria-pressed": ariaPressed,
-    testId: testId,
-    xcss: [reactionButtonStyles, ...additionalStyles,
-    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-    fg('platform-component-visual-refresh') && reactionStylesRefresh]
-  }, dataAttributes), jsx(FlashAnimation, {
-    flash: flash
-    /* eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */,
-    css: fg('platform-component-visual-refresh') ? flashStyle : flashStyleOld
-  }, children));
-};

package/dist/es2019/components/Reaction/StaticReaction.js

@@ -1,44 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-import { Box, xcss } from '@atlaskit/primitives';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-
-// please sync reaction styles that are not button-specific with ReactionButton.tsx
-const staticReactionStyles = xcss({
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'flex-start',
-  minWidth: '36px',
-  height: '24px',
-  backgroundColor: 'color.background.neutral.subtle',
-  color: 'color.text.subtle',
-  marginBlockStart: 'space.050',
-  marginInlineEnd: 'space.050',
-  padding: 'space.0',
-  overflow: 'hidden',
-  border: 'none',
-  borderRadius: 'border.radius',
-  ':hover': {
-    backgroundColor: 'color.background.neutral.subtle.hovered',
-    cursor: 'default'
-  }
-});
-export const StaticReaction = ({
-  onMouseEnter,
-  onFocus,
-  children,
-  testId,
-  dataAttributes = {}
-}) => {
-  return jsx(Box, _extends({
-    onMouseEnter: onMouseEnter,
-    onFocus: onFocus,
-    testId: testId,
-    xcss: staticReactionStyles
-  }, dataAttributes), children);
-};

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

@@ -1,2 +0,0 @@
-export { Reaction, RENDER_REACTION_TESTID } from './Reaction';
-export { ReactionButton } from './ReactionButton';

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

@@ -1,93 +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 { B50, B75, B300, N20, N40, N400, B100 } from '@atlaskit/theme/colors';
-/**
- * Default styling px height for an emoji reaction
- */
-const akHeight = 24;
-
-/**
- * Styling Note:
- * Padding and line height are set within the child components
- * of FlashAnimation b/c it otherwise throws off the flash styling
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const containerStyle = css({
-  position: 'relative'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const emojiStyle = css({
-  transformOrigin: 'center center 0',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '12px',
-  padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const reactionStyle = css({
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'flex-start',
-  minWidth: '36px',
-  height: `${akHeight}px`,
-  background: 'transparent',
-  border: `1px solid ${`var(--ds-border, ${N40})`}`,
-  boxSizing: 'border-box',
-  borderRadius: '20px',
-  color: `${`var(--ds-text-subtle, ${N400})`}`,
-  cursor: 'pointer',
-  margin: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} 0 0`,
-  padding: 0,
-  transition: '200ms ease-in-out',
-  '&:hover': {
-    background: `${`var(--ds-background-neutral-subtle-hovered, ${N20})`}`
-  },
-  '&:focus': {
-    boxShadow: `0 0 0 2px ${`var(--ds-border-focused, ${B100})`}`,
-    // background, box-shadow
-    transitionDuration: '0s, 0.2s',
-    // disabling browser focus outline
-    outline: 'none'
-  },
-  overflow: 'hidden'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const reactedStyle = css({
-  backgroundColor: `var(--ds-background-selected, ${B50})`,
-  borderColor: `var(--ds-border-selected, ${B300})`,
-  '&:hover': {
-    background: `${`var(--ds-background-selected-hovered, ${B75})`}`
-  }
-});
-export const flashHeight = akHeight - 2; // height without the 1px border
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const flashStyleOld = css({
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-  borderRadius: '10px',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: `${flashHeight}px`
-});
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const flashStyle = css({
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-  borderRadius: "var(--ds-border-radius-050, 2px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: `${flashHeight}px`
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const emojiNoReactionStyle = css({
-  padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"} 10px`
-});

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

@@ -1,80 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useMemo } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import Avatar from '@atlaskit/avatar/Avatar';
-import Spinner from '@atlaskit/spinner';
-import { TabPanel } from '@atlaskit/tabs';
-import { Box, Flex, xcss } from '@atlaskit/primitives';
-import { userListStyle, userStyle } from './styles';
-const userDescriptionStyle = xcss({
-  marginLeft: 'space.150'
-});
-const profileWrapperStyle = xcss({
-  marginLeft: 'space.0'
-});
-const reactionViewStyle = xcss({
-  marginTop: 'space.150',
-  minHeight: '300px',
-  minWidth: '550px'
-});
-const centerSpinnerStyle = xcss({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  height: '100%',
-  marginTop: 'space.300'
-});
-export const ReactionView = ({
-  reaction,
-  ProfileCardWrapper
-}) => {
-  const alphabeticalNames = useMemo(() => {
-    var _reactionObj$users;
-    const reactionObj = reaction;
-    return ((_reactionObj$users = reactionObj.users) === null || _reactionObj$users === void 0 ? void 0 : _reactionObj$users.sort((a, b) => a.displayName.localeCompare(b.displayName))) || [];
-  }, [reaction]);
-  return jsx(TabPanel, null, jsx(Flex, {
-    direction: "column",
-    xcss: reactionViewStyle
-  }, alphabeticalNames.length === 0 ? jsx(Box, {
-    xcss: centerSpinnerStyle
-  }, jsx(Spinner, {
-    size: "large",
-    interactionName: "reactions-spinner"
-  })) :
-  // 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("ul", {
-    css: userListStyle
-  }, alphabeticalNames.map(user => {
-    var _user$profilePicture;
-    const profile = (_user$profilePicture = user.profilePicture) === null || _user$profilePicture === void 0 ? void 0 : _user$profilePicture.path;
-    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("li", {
-        css: userStyle,
-        key: user.id
-      }, ProfileCardWrapper && user.accountId ? jsx(Box, {
-        xcss: profileWrapperStyle
-      }, jsx(ProfileCardWrapper, {
-        userId: user.accountId,
-        isAnonymous: false,
-        canViewProfile: true,
-        position: "left-start"
-      }, jsx(Avatar, {
-        size: "medium",
-        src: profile,
-        testId: "profile"
-      }))) : jsx(Avatar, {
-        size: "medium",
-        src: profile,
-        testId: "profile"
-      }), jsx(Flex, {
-        xcss: userDescriptionStyle
-      }, jsx("div", null, user.displayName)))
-    );
-  }))));
-};

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

@@ -1,103 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useEffect, useState, useCallback, useMemo } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import Tabs from '@atlaskit/tabs';
-import Modal, { ModalBody } from '@atlaskit/modal-dialog';
-import { Box, xcss } from '@atlaskit/primitives';
-import { NUMBER_OF_REACTIONS_TO_DISPLAY } from '../../shared/constants';
-import { ReactionsList } from './ReactionsList';
-import { ReactionsDialogHeader } from './ReactionsDialogHeader';
-import { containerStyle } from './styles';
-
-/**
- * Test id for the Reactions modal dialog
- */
-export const RENDER_MODAL_TESTID = 'render-reactions-modal';
-const modalBodyStyle = xcss({
-  marginBottom: 'space.300'
-});
-export const ReactionsDialog = ({
-  reactions = [],
-  handleCloseReactionsDialog = () => {},
-  emojiProvider,
-  selectedEmojiId,
-  handleSelectReaction = () => {},
-  handlePaginationChange = () => {},
-  ProfileCardWrapper
-}) => {
-  var _currentReactions$;
-  const [hasNavigatedPages, setHasNavigatedPages] = useState(false);
-  const [currentPage, setCurrentPage] = useState(1);
-  const totalReactionsCount = useMemo(() => {
-    return reactions.reduce((accum, current) => {
-      return accum += current === null || current === void 0 ? void 0 : current.count;
-    }, 0);
-  }, [reactions]);
-  const maxPages = Math.max(1, Math.ceil(reactions.length / NUMBER_OF_REACTIONS_TO_DISPLAY));
-  const currentReactions = useMemo(() => {
-    const start = (currentPage - 1) * NUMBER_OF_REACTIONS_TO_DISPLAY;
-    const end = start + NUMBER_OF_REACTIONS_TO_DISPLAY;
-    return reactions.slice(start, end);
-  }, [reactions, currentPage]);
-  const handleNextPage = () => {
-    setCurrentPage(prevPage => Math.min(prevPage + 1, maxPages));
-    setHasNavigatedPages(true);
-  };
-  const handlePreviousPage = () => {
-    setCurrentPage(prevPage => Math.max(prevPage - 1, 1));
-    setHasNavigatedPages(true);
-  };
-  const firstEmojiOnPage = (_currentReactions$ = currentReactions[0]) === null || _currentReactions$ === void 0 ? void 0 : _currentReactions$.emojiId;
-  useEffect(() => {
-    // trigger the handler with the first emoji when the page changes
-    if (hasNavigatedPages && firstEmojiOnPage) {
-      handlePaginationChange(firstEmojiOnPage, currentPage, maxPages);
-    }
-  }, [hasNavigatedPages, currentPage, maxPages, firstEmojiOnPage, handlePaginationChange]);
-
-  /* set Reactions Border Width , 8 Number of reactions to display*/
-  const reactionsBorderWidth = useMemo(() => {
-    return Math.ceil(reactions.length / NUMBER_OF_REACTIONS_TO_DISPLAY) * 100;
-  }, [reactions]);
-  const selectedIndex = currentReactions.findIndex(reaction => reaction.emojiId === selectedEmojiId);
-  const onTabChange = useCallback(index => {
-    if (index === selectedIndex) {
-      return;
-    }
-    const emojiId = currentReactions[index].emojiId;
-    handleSelectReaction(emojiId);
-  }, [selectedIndex, currentReactions, handleSelectReaction]);
-  return jsx(Modal, {
-    onClose: handleCloseReactionsDialog,
-    height: 600,
-    testId: RENDER_MODAL_TESTID
-    // eslint-disable-next-line jsx-a11y/no-autofocus
-    ,
-    autoFocus: false
-  }, jsx(Tabs, {
-    id: "reactions-dialog-tabs",
-    onChange: onTabChange,
-    selected: selectedIndex
-  }, jsx(ReactionsDialogHeader, {
-    totalReactionsCount: totalReactionsCount,
-    maxPages: maxPages,
-    handlePreviousPage: handlePreviousPage,
-    handleNextPage: handleNextPage,
-    currentPage: currentPage,
-    emojiProvider: emojiProvider,
-    currentReactions: currentReactions,
-    handleCloseReactionsDialog: handleCloseReactionsDialog
-  }), jsx(ModalBody, null, jsx(Box, {
-    xcss: modalBodyStyle
-  }, jsx("div", {
-    css: containerStyle(reactionsBorderWidth)
-  }, jsx(ReactionsList, {
-    selectedEmojiId: selectedEmojiId,
-    reactions: currentReactions,
-    ProfileCardWrapper: ProfileCardWrapper
-  }))))));
-};