@atlaskit/editor-plugin-mentions 3.0.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/pm-plugins/main.js +1 -1
  3. package/dist/cjs/ui/InviteItem/index.compiled.css +30 -0
  4. package/dist/cjs/ui/InviteItem/index.js +42 -42
  5. package/dist/es2019/pm-plugins/main.js +1 -1
  6. package/dist/es2019/ui/InviteItem/index.compiled.css +30 -0
  7. package/dist/es2019/ui/InviteItem/index.js +37 -43
  8. package/dist/esm/pm-plugins/main.js +1 -1
  9. package/dist/esm/ui/InviteItem/index.compiled.css +30 -0
  10. package/dist/esm/ui/InviteItem/index.js +43 -43
  11. package/package.json +10 -8
  12. package/dist/cjs/ui/InviteItem/styles.js +0 -66
  13. package/dist/es2019/ui/InviteItem/styles.js +0 -59
  14. package/dist/esm/ui/InviteItem/styles.js +0 -59
  15. package/dist/types/ui/InviteItem/styles.d.ts +0 -8
  16. package/dist/types-ts4.5/ui/InviteItem/styles.d.ts +0 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-mentions
2
2
 
3
+ ## 4.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#117947](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/117947)
8
+ [`2c672e958d395`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2c672e958d395) -
9
+ [ux] EDF-2346 - [MD] Remove emotion references
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 3.0.0
4
16
 
5
17
  ### Major Changes
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -24,7 +24,7 @@ var ACTIONS = exports.ACTIONS = {
24
24
  SET_PROVIDER: 'SET_PROVIDER'
25
25
  };
26
26
  var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
27
- var PACKAGE_VERSION = "3.0.0";
27
+ var PACKAGE_VERSION = "4.0.0";
28
28
  var setProvider = function setProvider(provider) {
29
29
  return function (state, dispatch) {
30
30
  if (dispatch) {
package/dist/cjs/ui/InviteItem/index.compiled.css ADDED
@@ -0,0 +1,30 @@
1
+ ._16jlidpf{flex-grow:0}
2
+ ._16jlkb7n{flex-grow:1}
3
+ ._18m915vq{overflow-y:hidden}
4
+ ._18u0dlk8{margin-left:14px}
5
+ ._19bvdlk8{padding-left:14px}
6
+ ._1bah1h6o{justify-content:center}
7
+ ._1bsb14no{width:36px}
8
+ ._1bto1l2s{text-overflow:ellipsis}
9
+ ._1e0c1txw{display:flex}
10
+ ._1e0c1ule{display:block}
11
+ ._1n261g80{flex-wrap:wrap}
12
+ ._1o9zkb7n{flex-shrink:1}
13
+ ._1p1d1dk0{text-transform:capitalize}
14
+ ._1reo15vq{overflow-x:hidden}
15
+ ._1ul9idpf{min-width:0}
16
+ ._2lx2vrvc{flex-direction:row}
17
+ ._2mzuglyw{list-style-type:none}
18
+ ._4cvr1h6o{align-items:center}
19
+ ._4t3i14no{height:36px}
20
+ ._80omtlke{cursor:pointer}
21
+ ._bfhk1j28{background-color:transparent}
22
+ ._bfhk2tgk{background-color:var(--_1y60f1n)}
23
+ ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
24
+ ._i0dl1wug{flex-basis:auto}
25
+ ._i0dlf1ug{flex-basis:0%}
26
+ ._kqswh2mm{position:relative}
27
+ ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
28
+ ._s7n4nkob{vertical-align:middle}
29
+ ._syaz1vvm{color:var(--_bbz764)}
30
+ ._u5f3dlk8{padding-right:14px}
package/dist/cjs/ui/InviteItem/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
1
2
  "use strict";
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,23 +7,22 @@ Object.defineProperty(exports, "__esModule", {
6
7
  value: true
7
8
  });
8
9
  exports.default = exports.INVITE_ITEM_DESCRIPTION = void 0;
10
+ require("./index.compiled.css");
11
+ var _runtime = require("@compiled/react/runtime");
9
12
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
13
  var _react = _interopRequireWildcard(require("react"));
11
- var _react2 = require("@emotion/react");
12
14
  var _reactIntlNext = require("react-intl-next");
13
15
  var _messages = require("@atlaskit/editor-common/messages");
14
16
  var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/add"));
15
17
  var _colors = require("@atlaskit/theme/colors");
16
- var _styles = require("./styles");
17
18
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
18
19
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
19
- /**
20
- * @jsxRuntime classic
21
- * @jsx jsx
22
- */
23
-
24
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
25
-
20
+ var mentionItemStyle = null;
21
+ var mentionItemSelectedStyle = null;
22
+ var rowStyle = null;
23
+ var avatarStyle = null;
24
+ var nameSectionStyle = null;
25
+ var capitalizedStyle = null;
26
26
  var INVITE_ITEM_DESCRIPTION = exports.INVITE_ITEM_DESCRIPTION = {
27
27
  id: 'invite-teammate'
28
28
  };
@@ -62,38 +62,38 @@ var InviteItem = function InviteItem(_ref) {
62
62
  onMount();
63
63
  }
64
64
  }, [onMount]);
65
- return (
66
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
67
- (0, _react2.jsx)("div", {
68
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
69
- css: [_styles.mentionItemStyle, selected && _styles.mentionItemSelectedStyle],
70
- onMouseDown: onSelected,
71
- onMouseEnter: onItemMouseEnter,
72
- "data-id": INVITE_ITEM_DESCRIPTION.id
73
- }, (0, _react2.jsx)("div", {
74
- css: _styles.rowStyle
75
- }, (0, _react2.jsx)("span", {
76
- css: _styles.avatarStyle
77
- }, (0, _react2.jsx)(_add.default, {
78
- label: intl.formatMessage(_messages.mentionMessages.mentionsAddLabel),
79
- primaryColor: "var(--ds-icon-subtle, ".concat(_colors.N300, ")")
80
- })), (0, _react2.jsx)("div", {
81
- css: _styles.nameSectionStyle,
82
- "data-testid": "name-section"
83
- }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage
84
- // Ignored via go/ees005
85
- // eslint-disable-next-line react/jsx-props-no-spreading
86
- , (0, _extends2.default)({}, _messages.mentionMessages.inviteItemTitle, {
87
- values: {
88
- userRole: userRole || 'basic',
89
- productName:
90
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
91
- (0, _react2.jsx)("span", {
92
- css: _styles.capitalizedStyle,
93
- "data-testid": "capitalized-message"
94
- }, productName)
95
- }
96
- })))))
97
- );
65
+ return /*#__PURE__*/_react.default.createElement("div", {
66
+ onMouseDown: onSelected,
67
+ onMouseEnter: onItemMouseEnter,
68
+ "data-id": INVITE_ITEM_DESCRIPTION.id,
69
+ className: (0, _runtime.ax)(["_1reo15vq _18m915vq _bfhk1j28 _1e0c1ule _2mzuglyw _80omtlke", selected && "_bfhk2tgk"]),
70
+ style: {
71
+ "--_1y60f1n": (0, _runtime.ix)("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"))
72
+ }
73
+ }, /*#__PURE__*/_react.default.createElement("div", {
74
+ className: (0, _runtime.ax)(["_1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _2lx2vrvc _1n261g80 _ca0q12x7 _n3td12x7 _19bvdlk8 _u5f3dlk8 _1bto1l2s _s7n4nkob"])
75
+ }, /*#__PURE__*/_react.default.createElement("span", {
76
+ className: (0, _runtime.ax)(["_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _4cvr1h6o _1bah1h6o _kqswh2mm _1bsb14no _4t3i14no"])
77
+ }, /*#__PURE__*/_react.default.createElement(_add.default, {
78
+ label: intl.formatMessage(_messages.mentionMessages.mentionsAddLabel),
79
+ primaryColor: "var(--ds-icon-subtle, ".concat(_colors.N300, ")")
80
+ })), /*#__PURE__*/_react.default.createElement("div", {
81
+ "data-testid": "name-section",
82
+ className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1ul9idpf _18u0dlk8 _syaz1vvm"]),
83
+ style: {
84
+ "--_bbz764": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N300, ")"))
85
+ }
86
+ }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage
87
+ // Ignored via go/ees005
88
+ // eslint-disable-next-line react/jsx-props-no-spreading
89
+ , (0, _extends2.default)({}, _messages.mentionMessages.inviteItemTitle, {
90
+ values: {
91
+ userRole: userRole || 'basic',
92
+ productName: /*#__PURE__*/_react.default.createElement("span", {
93
+ "data-testid": "capitalized-message",
94
+ className: (0, _runtime.ax)(["_1p1d1dk0"])
95
+ }, productName)
96
+ }
97
+ })))));
98
98
  };
99
99
  var _default = exports.default = (0, _reactIntlNext.injectIntl)(InviteItem);
package/dist/es2019/pm-plugins/main.js CHANGED
@@ -13,7 +13,7 @@ export const ACTIONS = {
13
13
  SET_PROVIDER: 'SET_PROVIDER'
14
14
  };
15
15
  const PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
16
- const PACKAGE_VERSION = "3.0.0";
16
+ const PACKAGE_VERSION = "4.0.0";
17
17
  const setProvider = provider => (state, dispatch) => {
18
18
  if (dispatch) {
19
19
  dispatch(state.tr.setMeta(mentionPluginKey, {
package/dist/es2019/ui/InviteItem/index.compiled.css ADDED
@@ -0,0 +1,30 @@
1
+ ._16jlidpf{flex-grow:0}
2
+ ._16jlkb7n{flex-grow:1}
3
+ ._18m915vq{overflow-y:hidden}
4
+ ._18u0dlk8{margin-left:14px}
5
+ ._19bvdlk8{padding-left:14px}
6
+ ._1bah1h6o{justify-content:center}
7
+ ._1bsb14no{width:36px}
8
+ ._1bto1l2s{text-overflow:ellipsis}
9
+ ._1e0c1txw{display:flex}
10
+ ._1e0c1ule{display:block}
11
+ ._1n261g80{flex-wrap:wrap}
12
+ ._1o9zkb7n{flex-shrink:1}
13
+ ._1p1d1dk0{text-transform:capitalize}
14
+ ._1reo15vq{overflow-x:hidden}
15
+ ._1ul9idpf{min-width:0}
16
+ ._2lx2vrvc{flex-direction:row}
17
+ ._2mzuglyw{list-style-type:none}
18
+ ._4cvr1h6o{align-items:center}
19
+ ._4t3i14no{height:36px}
20
+ ._80omtlke{cursor:pointer}
21
+ ._bfhk14ae{background-color:var(--ds-background-neutral-subtle-hovered,#ebecf0)}
22
+ ._bfhk1j28{background-color:transparent}
23
+ ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
24
+ ._i0dl1wug{flex-basis:auto}
25
+ ._i0dlf1ug{flex-basis:0%}
26
+ ._kqswh2mm{position:relative}
27
+ ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
28
+ ._s7n4nkob{vertical-align:middle}
29
+ ._syaz1n3s{color:var(--ds-text-subtle,#5e6c84)}
30
+ ._u5f3dlk8{padding-right:14px}
package/dist/es2019/ui/InviteItem/index.js CHANGED
@@ -1,18 +1,18 @@
1
+ /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
1
2
  import _extends from "@babel/runtime/helpers/extends";
2
- /**
3
- * @jsxRuntime classic
4
- * @jsx jsx
5
- */
6
-
3
+ import "./index.compiled.css";
4
+ import { ax, ix } from "@compiled/react/runtime";
7
5
  import React, { useCallback, useEffect } from 'react';
8
-
9
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
10
- import { jsx } from '@emotion/react';
11
6
  import { FormattedMessage, injectIntl } from 'react-intl-next';
12
7
  import { mentionMessages as messages } from '@atlaskit/editor-common/messages';
13
8
  import AddIcon from '@atlaskit/icon/glyph/add';
14
- import { N300 } from '@atlaskit/theme/colors';
15
- import { avatarStyle, capitalizedStyle, mentionItemSelectedStyle, mentionItemStyle, nameSectionStyle, rowStyle } from './styles';
9
+ import { N30, N300 } from '@atlaskit/theme/colors';
10
+ const mentionItemStyle = null;
11
+ const mentionItemSelectedStyle = null;
12
+ const rowStyle = null;
13
+ const avatarStyle = null;
14
+ const nameSectionStyle = null;
15
+ const capitalizedStyle = null;
16
16
  export const INVITE_ITEM_DESCRIPTION = {
17
17
  id: 'invite-teammate'
18
18
  };
@@ -53,38 +53,32 @@ const InviteItem = ({
53
53
  onMount();
54
54
  }
55
55
  }, [onMount]);
56
- return (
57
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
58
- jsx("div", {
59
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
60
- css: [mentionItemStyle, selected && mentionItemSelectedStyle],
61
- onMouseDown: onSelected,
62
- onMouseEnter: onItemMouseEnter,
63
- "data-id": INVITE_ITEM_DESCRIPTION.id
64
- }, jsx("div", {
65
- css: rowStyle
66
- }, jsx("span", {
67
- css: avatarStyle
68
- }, jsx(AddIcon, {
69
- label: intl.formatMessage(messages.mentionsAddLabel),
70
- primaryColor: `var(--ds-icon-subtle, ${N300})`
71
- })), jsx("div", {
72
- css: nameSectionStyle,
73
- "data-testid": "name-section"
74
- }, jsx(FormattedMessage
75
- // Ignored via go/ees005
76
- // eslint-disable-next-line react/jsx-props-no-spreading
77
- , _extends({}, messages.inviteItemTitle, {
78
- values: {
79
- userRole: userRole || 'basic',
80
- productName:
81
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
82
- jsx("span", {
83
- css: capitalizedStyle,
84
- "data-testid": "capitalized-message"
85
- }, productName)
86
- }
87
- })))))
88
- );
56
+ return /*#__PURE__*/React.createElement("div", {
57
+ onMouseDown: onSelected,
58
+ onMouseEnter: onItemMouseEnter,
59
+ "data-id": INVITE_ITEM_DESCRIPTION.id,
60
+ className: ax(["_1reo15vq _18m915vq _bfhk1j28 _1e0c1ule _2mzuglyw _80omtlke", selected && "_bfhk14ae"])
61
+ }, /*#__PURE__*/React.createElement("div", {
62
+ className: ax(["_1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _2lx2vrvc _1n261g80 _ca0q12x7 _n3td12x7 _19bvdlk8 _u5f3dlk8 _1bto1l2s _s7n4nkob"])
63
+ }, /*#__PURE__*/React.createElement("span", {
64
+ className: ax(["_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _4cvr1h6o _1bah1h6o _kqswh2mm _1bsb14no _4t3i14no"])
65
+ }, /*#__PURE__*/React.createElement(AddIcon, {
66
+ label: intl.formatMessage(messages.mentionsAddLabel),
67
+ primaryColor: `var(--ds-icon-subtle, ${N300})`
68
+ })), /*#__PURE__*/React.createElement("div", {
69
+ "data-testid": "name-section",
70
+ className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1ul9idpf _18u0dlk8 _syaz1n3s"])
71
+ }, /*#__PURE__*/React.createElement(FormattedMessage
72
+ // Ignored via go/ees005
73
+ // eslint-disable-next-line react/jsx-props-no-spreading
74
+ , _extends({}, messages.inviteItemTitle, {
75
+ values: {
76
+ userRole: userRole || 'basic',
77
+ productName: /*#__PURE__*/React.createElement("span", {
78
+ "data-testid": "capitalized-message",
79
+ className: ax(["_1p1d1dk0"])
80
+ }, productName)
81
+ }
82
+ })))));
89
83
  };
90
84
  export default injectIntl(InviteItem);
package/dist/esm/pm-plugins/main.js CHANGED
@@ -16,7 +16,7 @@ export var ACTIONS = {
16
16
  SET_PROVIDER: 'SET_PROVIDER'
17
17
  };
18
18
  var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
19
- var PACKAGE_VERSION = "3.0.0";
19
+ var PACKAGE_VERSION = "4.0.0";
20
20
  var setProvider = function setProvider(provider) {
21
21
  return function (state, dispatch) {
22
22
  if (dispatch) {
package/dist/esm/ui/InviteItem/index.compiled.css ADDED
@@ -0,0 +1,30 @@
1
+ ._16jlidpf{flex-grow:0}
2
+ ._16jlkb7n{flex-grow:1}
3
+ ._18m915vq{overflow-y:hidden}
4
+ ._18u0dlk8{margin-left:14px}
5
+ ._19bvdlk8{padding-left:14px}
6
+ ._1bah1h6o{justify-content:center}
7
+ ._1bsb14no{width:36px}
8
+ ._1bto1l2s{text-overflow:ellipsis}
9
+ ._1e0c1txw{display:flex}
10
+ ._1e0c1ule{display:block}
11
+ ._1n261g80{flex-wrap:wrap}
12
+ ._1o9zkb7n{flex-shrink:1}
13
+ ._1p1d1dk0{text-transform:capitalize}
14
+ ._1reo15vq{overflow-x:hidden}
15
+ ._1ul9idpf{min-width:0}
16
+ ._2lx2vrvc{flex-direction:row}
17
+ ._2mzuglyw{list-style-type:none}
18
+ ._4cvr1h6o{align-items:center}
19
+ ._4t3i14no{height:36px}
20
+ ._80omtlke{cursor:pointer}
21
+ ._bfhk1j28{background-color:transparent}
22
+ ._bfhk2tgk{background-color:var(--_1y60f1n)}
23
+ ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
24
+ ._i0dl1wug{flex-basis:auto}
25
+ ._i0dlf1ug{flex-basis:0%}
26
+ ._kqswh2mm{position:relative}
27
+ ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
28
+ ._s7n4nkob{vertical-align:middle}
29
+ ._syaz1vvm{color:var(--_bbz764)}
30
+ ._u5f3dlk8{padding-right:14px}
package/dist/esm/ui/InviteItem/index.js CHANGED
@@ -1,18 +1,18 @@
1
+ /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
1
2
  import _extends from "@babel/runtime/helpers/extends";
2
- /**
3
- * @jsxRuntime classic
4
- * @jsx jsx
5
- */
6
-
3
+ import "./index.compiled.css";
4
+ import { ax, ix } from "@compiled/react/runtime";
7
5
  import React, { useCallback, useEffect } from 'react';
8
-
9
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
10
- import { jsx } from '@emotion/react';
11
6
  import { FormattedMessage, injectIntl } from 'react-intl-next';
12
7
  import { mentionMessages as messages } from '@atlaskit/editor-common/messages';
13
8
  import AddIcon from '@atlaskit/icon/glyph/add';
14
- import { N300 } from '@atlaskit/theme/colors';
15
- import { avatarStyle, capitalizedStyle, mentionItemSelectedStyle, mentionItemStyle, nameSectionStyle, rowStyle } from './styles';
9
+ import { N30, N300 } from '@atlaskit/theme/colors';
10
+ var mentionItemStyle = null;
11
+ var mentionItemSelectedStyle = null;
12
+ var rowStyle = null;
13
+ var avatarStyle = null;
14
+ var nameSectionStyle = null;
15
+ var capitalizedStyle = null;
16
16
  export var INVITE_ITEM_DESCRIPTION = {
17
17
  id: 'invite-teammate'
18
18
  };
@@ -52,38 +52,38 @@ var InviteItem = function InviteItem(_ref) {
52
52
  onMount();
53
53
  }
54
54
  }, [onMount]);
55
- return (
56
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
57
- jsx("div", {
58
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
59
- css: [mentionItemStyle, selected && mentionItemSelectedStyle],
60
- onMouseDown: onSelected,
61
- onMouseEnter: onItemMouseEnter,
62
- "data-id": INVITE_ITEM_DESCRIPTION.id
63
- }, jsx("div", {
64
- css: rowStyle
65
- }, jsx("span", {
66
- css: avatarStyle
67
- }, jsx(AddIcon, {
68
- label: intl.formatMessage(messages.mentionsAddLabel),
69
- primaryColor: "var(--ds-icon-subtle, ".concat(N300, ")")
70
- })), jsx("div", {
71
- css: nameSectionStyle,
72
- "data-testid": "name-section"
73
- }, jsx(FormattedMessage
74
- // Ignored via go/ees005
75
- // eslint-disable-next-line react/jsx-props-no-spreading
76
- , _extends({}, messages.inviteItemTitle, {
77
- values: {
78
- userRole: userRole || 'basic',
79
- productName:
80
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
81
- jsx("span", {
82
- css: capitalizedStyle,
83
- "data-testid": "capitalized-message"
84
- }, productName)
85
- }
86
- })))))
87
- );
55
+ return /*#__PURE__*/React.createElement("div", {
56
+ onMouseDown: onSelected,
57
+ onMouseEnter: onItemMouseEnter,
58
+ "data-id": INVITE_ITEM_DESCRIPTION.id,
59
+ className: ax(["_1reo15vq _18m915vq _bfhk1j28 _1e0c1ule _2mzuglyw _80omtlke", selected && "_bfhk2tgk"]),
60
+ style: {
61
+ "--_1y60f1n": ix("var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"))
62
+ }
63
+ }, /*#__PURE__*/React.createElement("div", {
64
+ className: ax(["_1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _2lx2vrvc _1n261g80 _ca0q12x7 _n3td12x7 _19bvdlk8 _u5f3dlk8 _1bto1l2s _s7n4nkob"])
65
+ }, /*#__PURE__*/React.createElement("span", {
66
+ className: ax(["_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _4cvr1h6o _1bah1h6o _kqswh2mm _1bsb14no _4t3i14no"])
67
+ }, /*#__PURE__*/React.createElement(AddIcon, {
68
+ label: intl.formatMessage(messages.mentionsAddLabel),
69
+ primaryColor: "var(--ds-icon-subtle, ".concat(N300, ")")
70
+ })), /*#__PURE__*/React.createElement("div", {
71
+ "data-testid": "name-section",
72
+ className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1ul9idpf _18u0dlk8 _syaz1vvm"]),
73
+ style: {
74
+ "--_bbz764": ix("var(--ds-text-subtle, ".concat(N300, ")"))
75
+ }
76
+ }, /*#__PURE__*/React.createElement(FormattedMessage
77
+ // Ignored via go/ees005
78
+ // eslint-disable-next-line react/jsx-props-no-spreading
79
+ , _extends({}, messages.inviteItemTitle, {
80
+ values: {
81
+ userRole: userRole || 'basic',
82
+ productName: /*#__PURE__*/React.createElement("span", {
83
+ "data-testid": "capitalized-message",
84
+ className: ax(["_1p1d1dk0"])
85
+ }, productName)
86
+ }
87
+ })))));
88
88
  };
89
89
  export default injectIntl(InviteItem);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-mentions",
3
- "version": "3.0.0",
3
+ "version": "4.0.0",
4
4
  "description": "Mentions plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -25,26 +25,29 @@
25
25
  ]
26
26
  }
27
27
  },
28
- "sideEffects": false,
28
+ "sideEffects": [
29
+ "**/*.compiled.css"
30
+ ],
29
31
  "atlaskit:src": "src/index.ts",
30
32
  "af:exports": {
31
33
  ".": "./src/index.ts"
32
34
  },
33
35
  "dependencies": {
34
36
  "@atlaskit/adf-schema": "^47.2.1",
35
- "@atlaskit/editor-common": "^100.0.0",
37
+ "@atlaskit/css": "^0.10.0",
38
+ "@atlaskit/editor-common": "^100.2.0",
36
39
  "@atlaskit/editor-plugin-analytics": "^2.0.0",
37
40
  "@atlaskit/editor-plugin-base": "^2.2.0",
38
41
  "@atlaskit/editor-plugin-context-identifier": "^2.0.0",
39
42
  "@atlaskit/editor-plugin-type-ahead": "^2.0.0",
40
43
  "@atlaskit/editor-prosemirror": "7.0.0",
41
- "@atlaskit/icon": "^24.0.0",
44
+ "@atlaskit/icon": "^24.1.0",
42
45
  "@atlaskit/mention": "^24.0.0",
43
46
  "@atlaskit/platform-feature-flags": "^1.1.0",
44
47
  "@atlaskit/theme": "^17.0.0",
45
- "@atlaskit/tokens": "^4.0.0",
48
+ "@atlaskit/tokens": "^4.2.0",
46
49
  "@babel/runtime": "^7.0.0",
47
- "@emotion/react": "^11.7.1",
50
+ "@compiled/react": "^0.18.2",
48
51
  "uuid": "^3.1.0"
49
52
  },
50
53
  "peerDependencies": {
@@ -85,8 +88,7 @@
85
88
  ],
86
89
  "deprecation": "no-deprecated-imports",
87
90
  "styling": [
88
- "emotion",
89
- "emotion"
91
+ "compiled"
90
92
  ],
91
93
  "imports": [
92
94
  "import-no-extraneous-disable-for-examples-and-docs"
package/dist/cjs/ui/InviteItem/styles.js DELETED
@@ -1,66 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.rowStyle = exports.nameSectionStyle = exports.mentionItemStyle = exports.mentionItemSelectedStyle = exports.capitalizedStyle = exports.avatarStyle = exports.ROW_SIDE_PADDING = exports.AVATAR_HEIGHT = void 0;
7
- var _react = require("@emotion/react");
8
- var _colors = require("@atlaskit/theme/colors");
9
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
10
-
11
- var ROW_SIDE_PADDING = exports.ROW_SIDE_PADDING = 14;
12
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
13
- var rowStyle = exports.rowStyle = (0, _react.css)({
14
- alignItems: 'center',
15
- display: 'flex',
16
- flexDirection: 'row',
17
- flexWrap: 'wrap',
18
- overflow: 'hidden',
19
- padding: "var(--ds-space-075, 6px)".concat(" ", ROW_SIDE_PADDING, "px"),
20
- textOverflow: 'ellipsis',
21
- verticalAlign: 'middle'
22
- });
23
- var AVATAR_HEIGHT = exports.AVATAR_HEIGHT = 36;
24
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
25
- var avatarStyle = exports.avatarStyle = (0, _react.css)({
26
- position: 'relative',
27
- flex: 'initial',
28
- opacity: 'inherit',
29
- width: '36px',
30
- height: "".concat(AVATAR_HEIGHT, "px"),
31
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
32
- '> span': {
33
- width: '24px',
34
- height: '24px',
35
- padding: "var(--ds-space-075, 6px)"
36
- }
37
- });
38
-
39
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
40
- var nameSectionStyle = exports.nameSectionStyle = (0, _react.css)({
41
- flex: 1,
42
- minWidth: 0,
43
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
44
- marginLeft: '14px',
45
- color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
46
- opacity: 'inherit'
47
- });
48
-
49
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
50
- var mentionItemStyle = exports.mentionItemStyle = (0, _react.css)({
51
- backgroundColor: 'transparent',
52
- display: 'block',
53
- overflow: 'hidden',
54
- listStyleType: 'none',
55
- cursor: 'pointer'
56
- });
57
-
58
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
59
- var mentionItemSelectedStyle = exports.mentionItemSelectedStyle = (0, _react.css)({
60
- backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")")
61
- });
62
-
63
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
64
- var capitalizedStyle = exports.capitalizedStyle = (0, _react.css)({
65
- textTransform: 'capitalize'
66
- });
package/dist/es2019/ui/InviteItem/styles.js DELETED
@@ -1,59 +0,0 @@
1
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
2
- import { css } from '@emotion/react';
3
- import { N30, N300 } from '@atlaskit/theme/colors';
4
- export const ROW_SIDE_PADDING = 14;
5
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
6
- export const rowStyle = css({
7
- alignItems: 'center',
8
- display: 'flex',
9
- flexDirection: 'row',
10
- flexWrap: 'wrap',
11
- overflow: 'hidden',
12
- padding: `${"var(--ds-space-075, 6px)"} ${ROW_SIDE_PADDING}px`,
13
- textOverflow: 'ellipsis',
14
- verticalAlign: 'middle'
15
- });
16
- export const AVATAR_HEIGHT = 36;
17
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
18
- export const avatarStyle = css({
19
- position: 'relative',
20
- flex: 'initial',
21
- opacity: 'inherit',
22
- width: '36px',
23
- height: `${AVATAR_HEIGHT}px`,
24
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
25
- '> span': {
26
- width: '24px',
27
- height: '24px',
28
- padding: "var(--ds-space-075, 6px)"
29
- }
30
- });
31
-
32
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
33
- export const nameSectionStyle = css({
34
- flex: 1,
35
- minWidth: 0,
36
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
37
- marginLeft: '14px',
38
- color: `var(--ds-text-subtle, ${N300})`,
39
- opacity: 'inherit'
40
- });
41
-
42
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
43
- export const mentionItemStyle = css({
44
- backgroundColor: 'transparent',
45
- display: 'block',
46
- overflow: 'hidden',
47
- listStyleType: 'none',
48
- cursor: 'pointer'
49
- });
50
-
51
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
52
- export const mentionItemSelectedStyle = css({
53
- backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N30})`
54
- });
55
-
56
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
57
- export const capitalizedStyle = css({
58
- textTransform: 'capitalize'
59
- });
package/dist/esm/ui/InviteItem/styles.js DELETED
@@ -1,59 +0,0 @@
1
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
2
- import { css } from '@emotion/react';
3
- import { N30, N300 } from '@atlaskit/theme/colors';
4
- export var ROW_SIDE_PADDING = 14;
5
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
6
- export var rowStyle = css({
7
- alignItems: 'center',
8
- display: 'flex',
9
- flexDirection: 'row',
10
- flexWrap: 'wrap',
11
- overflow: 'hidden',
12
- padding: "var(--ds-space-075, 6px)".concat(" ", ROW_SIDE_PADDING, "px"),
13
- textOverflow: 'ellipsis',
14
- verticalAlign: 'middle'
15
- });
16
- export var AVATAR_HEIGHT = 36;
17
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
18
- export var avatarStyle = css({
19
- position: 'relative',
20
- flex: 'initial',
21
- opacity: 'inherit',
22
- width: '36px',
23
- height: "".concat(AVATAR_HEIGHT, "px"),
24
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
25
- '> span': {
26
- width: '24px',
27
- height: '24px',
28
- padding: "var(--ds-space-075, 6px)"
29
- }
30
- });
31
-
32
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
33
- export var nameSectionStyle = css({
34
- flex: 1,
35
- minWidth: 0,
36
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
37
- marginLeft: '14px',
38
- color: "var(--ds-text-subtle, ".concat(N300, ")"),
39
- opacity: 'inherit'
40
- });
41
-
42
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
43
- export var mentionItemStyle = css({
44
- backgroundColor: 'transparent',
45
- display: 'block',
46
- overflow: 'hidden',
47
- listStyleType: 'none',
48
- cursor: 'pointer'
49
- });
50
-
51
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
52
- export var mentionItemSelectedStyle = css({
53
- backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")")
54
- });
55
-
56
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
57
- export var capitalizedStyle = css({
58
- textTransform: 'capitalize'
59
- });
package/dist/types/ui/InviteItem/styles.d.ts DELETED
@@ -1,8 +0,0 @@
1
- export declare const ROW_SIDE_PADDING = 14;
2
- export declare const rowStyle: import("@emotion/react").SerializedStyles;
3
- export declare const AVATAR_HEIGHT = 36;
4
- export declare const avatarStyle: import("@emotion/react").SerializedStyles;
5
- export declare const nameSectionStyle: import("@emotion/react").SerializedStyles;
6
- export declare const mentionItemStyle: import("@emotion/react").SerializedStyles;
7
- export declare const mentionItemSelectedStyle: import("@emotion/react").SerializedStyles;
8
- export declare const capitalizedStyle: import("@emotion/react").SerializedStyles;
package/dist/types-ts4.5/ui/InviteItem/styles.d.ts DELETED
@@ -1,8 +0,0 @@
1
- export declare const ROW_SIDE_PADDING = 14;
2
- export declare const rowStyle: import("@emotion/react").SerializedStyles;
3
- export declare const AVATAR_HEIGHT = 36;
4
- export declare const avatarStyle: import("@emotion/react").SerializedStyles;
5
- export declare const nameSectionStyle: import("@emotion/react").SerializedStyles;
6
- export declare const mentionItemStyle: import("@emotion/react").SerializedStyles;
7
- export declare const mentionItemSelectedStyle: import("@emotion/react").SerializedStyles;
8
- export declare const capitalizedStyle: import("@emotion/react").SerializedStyles;