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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("@emotion/react");
var _colors = require("@atlaskit/theme/colors");
var _types = require("../../types");
var _react2 = require("react");
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
var mentionStyle = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.MentionType.SELF, {
  background: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
  borderColor: 'transparent',
  text: "var(--ds-text-inverse, ".concat(_colors.N20, ")"),
  hoveredBackground: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B400, ")"),
  pressedBackground: "var(--ds-background-brand-bold-pressed, ".concat(_colors.B400, ")")
}), _types.MentionType.RESTRICTED, {
  background: 'transparent',
  borderColor: "var(--ds-border-bold, ".concat(_colors.N500, ")"),
  text: "var(--ds-text, ".concat(_colors.N500, ")"),
  hoveredBackground: 'transparent',
  pressedBackground: 'transparent'
}), _types.MentionType.DEFAULT, {
  background: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
  borderColor: 'transparent',
  text: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
  hoveredBackground: "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")"),
  pressedBackground: "var(--ds-background-neutral-pressed, ".concat(_colors.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__*/(0, _react2.forwardRef)(function (_ref2, ref) {
  var mentionType = _ref2.mentionType,
    other = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
  return (0, _react.jsx)("span", (0, _extends2.default)({
    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: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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));
});
var _default = exports.default = PrimitiveMention;