@atlaskit/mention/dist/esm/components/Mention/PrimitiveMention.js

A React component used to display user profiles in a list for 'Mention' functionality

import _extends from "@babel/runtime/helpers/extends";
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _templateObject;
var _excluded = ["mentionType"];
/* eslint-disable @atlaskit/design-system/no-html-button */
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx, css } from '@emotion/react';
import { B400, N500, N30A, N20 } from '@atlaskit/theme/colors';
import { MentionType } from '../../types';
import { forwardRef } from 'react';
var mentionStyle = _defineProperty(_defineProperty(_defineProperty({}, MentionType.SELF, {
  background: "var(--ds-background-brand-bold, ".concat(B400, ")"),
  borderColor: 'transparent',
  text: "var(--ds-text-inverse, ".concat(N20, ")"),
  hoveredBackground: "var(--ds-background-brand-bold-hovered, ".concat(B400, ")"),
  pressedBackground: "var(--ds-background-brand-bold-pressed, ".concat(B400, ")")
}), MentionType.RESTRICTED, {
  background: 'transparent',
  borderColor: "var(--ds-border-bold, ".concat(N500, ")"),
  text: "var(--ds-text, ".concat(N500, ")"),
  hoveredBackground: 'transparent',
  pressedBackground: 'transparent'
}), MentionType.DEFAULT, {
  background: "var(--ds-background-neutral, ".concat(N30A, ")"),
  borderColor: 'transparent',
  text: "var(--ds-text-subtle, ".concat(N500, ")"),
  hoveredBackground: "var(--ds-background-neutral-hovered, ".concat(N30A, ")"),
  pressedBackground: "var(--ds-background-neutral-pressed, ".concat(N30A, ")")
});
var getStyle = function getStyle(_ref, property) {
  var mentionType = _ref.mentionType;
  var obj = mentionStyle[mentionType][property];
  return typeof obj === 'string' ? obj : obj;
};
var PrimitiveMention = /*#__PURE__*/forwardRef(function (_ref2, ref) {
  var mentionType = _ref2.mentionType,
    other = _objectWithoutProperties(_ref2, _excluded);
  return jsx("span", _extends({
    ref: ref
    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
    ,
    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t\t\tdisplay: inline;\n\t\t\t\t\tborder: 1px solid ", ";\n\t\t\t\t\tbackground: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tborder-radius: 20px;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tpadding: 0 0.3em 2px 0.23em;\n\t\t\t\t\tline-height: 1.714;\n\t\t\t\t\tfont-size: 1em;\n\t\t\t\t\tfont-weight: ", ";\n\t\t\t\t\tword-break: break-word;\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t}\n\t\t\t\t\t&:active {\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t}\n\t\t\t\t"])), getStyle({
      mentionType: mentionType
    }, 'borderColor'), getStyle({
      mentionType: mentionType
    }, 'background'), getStyle({
      mentionType: mentionType
    }, 'text'), "var(--ds-font-weight-regular, 400)", getStyle({
      mentionType: mentionType
    }, 'hoveredBackground'), getStyle({
      mentionType: mentionType
    }, 'pressedBackground'))
  }, other));
});
export default PrimitiveMention;