@atlaskit/editor-plugin-avatar-group/dist/esm/ui/AvatarGroupPluginWrapper.js

Avatar Group plugin for @atlaskit/editor-core.

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { useEffect } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import { useIntl } from 'react-intl';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
import { avatarGroupMessages } from '@atlaskit/editor-common/messages';
import AvatarsWithPluginState from './avatars-with-plugin-state';

// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
var toolbarButtonWrapper = css({
  display: 'flex',
  justifyContent: 'flex-end',
  flexGrow: 0,
  alignItems: 'center',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '& > div': {
    marginRight: 0
  }
});

// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
var toolbarButtonWrapperFullWidth = css(toolbarButtonWrapper, {
  flexGrow: 1
});
var AvatarGroupPluginWrapper = function AvatarGroupPluginWrapper(props) {
  var dispatchAnalyticsEvent = props.dispatchAnalyticsEvent,
    featureFlags = props.featureFlags;
  var intl = useIntl();
  useEffect(function () {
    if (!dispatchAnalyticsEvent) {
      return;
    }
    dispatchAnalyticsEvent({
      action: ACTION.VIEWED,
      actionSubject: ACTION_SUBJECT.BUTTON,
      actionSubjectId: ACTION_SUBJECT_ID.AVATAR_GROUP_PLUGIN,
      eventType: EVENT_TYPE.UI
    });
  }, [dispatchAnalyticsEvent]);
  return jsx("div", {
    "aria-label": intl.formatMessage(avatarGroupMessages.editors),
    "data-testid": 'avatar-group-in-plugin',
    css: props.takeFullWidth ? toolbarButtonWrapperFullWidth : toolbarButtonWrapper
  }, jsx(AvatarsWithPluginState, {
    editorView: props.editorView,
    eventDispatcher: props.eventDispatcher,
    inviteToEditComponent: props.collabEdit && props.collabEdit.inviteToEditComponent,
    inviteToEditHandler: props.collabEdit && props.collabEdit.inviteToEditHandler,
    isInviteToEditButtonSelected: props.collabEdit && props.collabEdit.isInviteToEditButtonSelected,
    featureFlags: featureFlags,
    editorAnalyticsAPI: props.editorAnalyticsAPI,
    editorAPI: props.editorAPI
  }));
};
export default AvatarGroupPluginWrapper;