@atlaskit/editor-plugin-mentions 12.1.9 → 12.1.11

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 (13) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/pm-plugins/main.js +1 -1
  3. package/dist/cjs/ui/InviteItem/InviteItemWithEmailDomain.compiled.css +16 -2
  4. package/dist/cjs/ui/InviteItem/InviteItemWithEmailDomain.js +84 -41
  5. package/dist/es2019/pm-plugins/main.js +1 -1
  6. package/dist/es2019/ui/InviteItem/InviteItemWithEmailDomain.compiled.css +16 -2
  7. package/dist/es2019/ui/InviteItem/InviteItemWithEmailDomain.js +72 -29
  8. package/dist/esm/pm-plugins/main.js +1 -1
  9. package/dist/esm/ui/InviteItem/InviteItemWithEmailDomain.compiled.css +16 -2
  10. package/dist/esm/ui/InviteItem/InviteItemWithEmailDomain.js +83 -40
  11. package/dist/types/ui/InviteItem/InviteItemWithEmailDomain.d.ts +8 -0
  12. package/dist/types-ts4.5/ui/InviteItem/InviteItemWithEmailDomain.d.ts +8 -0
  13. package/package.json +6 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-plugin-mentions
2
2
 
3
+ ## 12.1.11
4
+
5
+ ### Patch Changes
6
+
7
+ - [`7043ace1c45f2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7043ace1c45f2) -
8
+ [ux] reduces slipperiness and improves clarity of inline invites for editor mentions
9
+ - Updated dependencies
10
+
11
+ ## 12.1.10
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 12.1.9
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -23,7 +23,7 @@ var ACTIONS = exports.ACTIONS = {
23
23
  SET_PROVIDER: 'SET_PROVIDER'
24
24
  };
25
25
  var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
26
- var PACKAGE_VERSION = "12.1.8";
26
+ var PACKAGE_VERSION = "12.1.10";
27
27
  var setProvider = function setProvider(provider) {
28
28
  return function (state, dispatch) {
29
29
  if (dispatch) {
package/dist/cjs/ui/InviteItem/InviteItemWithEmailDomain.compiled.css CHANGED
@@ -1,3 +1,8 @@
1
+ ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
3
+ ._189ee4h9{border-width:var(--ds-border-width,1px)}
4
+ ._1dqonqa1{border-style:solid}
5
+ ._1h6d1l7x{border-color:var(--ds-border,#0b120e24)}
1
6
  ._16jlidpf{flex-grow:0}
2
7
  ._16jlkb7n{flex-grow:1}
3
8
  ._18m915vq{overflow-y:hidden}
@@ -7,25 +12,34 @@
7
12
  ._1bah1h6o{justify-content:center}
8
13
  ._1bsb14no{width:36px}
9
14
  ._1bto1l2s{text-overflow:ellipsis}
15
+ ._1e0c116y{display:inline-flex}
16
+ ._1e0c1o8l{display:inline-block}
10
17
  ._1e0c1txw{display:flex}
11
18
  ._1e0c1ule{display:block}
19
+ ._1i4q1hna{overflow-wrap:break-word}
12
20
  ._1n261g80{flex-wrap:wrap}
13
21
  ._1o9zkb7n{flex-shrink:1}
14
22
  ._1p1d1dk0{text-transform:capitalize}
15
23
  ._1reo15vq{overflow-x:hidden}
16
24
  ._1ul9idpf{min-width:0}
25
+ ._2hwxu2gc{margin-right:var(--ds-space-100,8px)}
17
26
  ._2lx2vrvc{flex-direction:row}
18
27
  ._2mzuglyw{list-style-type:none}
19
28
  ._4cvr1h6o{align-items:center}
20
29
  ._4t3i14no{height:36px}
21
- ._80omtlke{cursor:pointer}
30
+ ._4t3iviql{height:2rem}
22
31
  ._bfhk1dpa{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
23
32
  ._bfhk1j28{background-color:transparent}
33
+ ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
24
34
  ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
35
+ ._cun9by5v:disabled{background-color:var(--ds-background-disabled,#17171708)}
25
36
  ._i0dl1wug{flex-basis:auto}
26
37
  ._i0dlf1ug{flex-basis:0%}
38
+ ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
27
39
  ._kqswh2mm{position:relative}
28
40
  ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
41
+ ._p12f1osq{max-width:100%}
29
42
  ._s7n4nkob{vertical-align:middle}
30
43
  ._syazazsu{color:var(--ds-text-subtle,#505258)}
31
- ._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
44
+ ._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
45
+ ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
package/dist/cjs/ui/InviteItem/InviteItemWithEmailDomain.js CHANGED
@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
6
6
  Object.defineProperty(exports, "__esModule", {
7
7
  value: true
8
8
  });
9
- exports.default = exports.INVITE_ITEM_DESCRIPTION = void 0;
9
+ exports.truncateInviteOption = exports.default = exports.INVITE_ITEM_DESCRIPTION = void 0;
10
10
  require("./InviteItemWithEmailDomain.compiled.css");
11
11
  var _runtime = require("@compiled/react/runtime");
12
12
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -16,31 +16,85 @@ var _reactIntl = require("react-intl");
16
16
  var _messages = require("@atlaskit/editor-common/messages");
17
17
  var _email = _interopRequireDefault(require("@atlaskit/icon/core/email"));
18
18
  var _statusError = _interopRequireDefault(require("@atlaskit/icon/core/status-error"));
19
+ var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
19
20
  var _userPicker = require("@atlaskit/user-picker");
20
21
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
21
22
  var mentionItemStyle = null;
22
23
  var mentionItemSelectedStyle = null;
24
+ var displayNameStyles = {
25
+ localPart: "_1i4q1hna",
26
+ domainPart: "_1e0c1o8l _p12f1osq _1i4q1hna"
27
+ };
28
+ var DisplayName = function DisplayName(_ref) {
29
+ var name = _ref.name;
30
+ var atIndex = name.indexOf('@');
31
+ if (atIndex === -1) {
32
+ return /*#__PURE__*/_react.default.createElement("span", {
33
+ className: (0, _runtime.ax)([displayNameStyles.localPart])
34
+ }, name);
35
+ }
36
+ var localPart = name.slice(0, atIndex);
37
+ var domainPart = name.slice(atIndex); // includes the @
38
+ return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
39
+ className: (0, _runtime.ax)([displayNameStyles.localPart])
40
+ }, localPart), /*#__PURE__*/_react.default.createElement("span", {
41
+ className: (0, _runtime.ax)([displayNameStyles.domainPart])
42
+ }, domainPart));
43
+ };
23
44
  var style = {
24
45
  byline: "_19pkv77o",
25
46
  rowStyle: "_1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _2lx2vrvc _1n261g80 _ca0q12x7 _n3td12x7 _19bvutpp _u5f3utpp _1bto1l2s _s7n4nkob",
26
47
  avatar: "_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _4cvr1h6o _1bah1h6o _kqswh2mm _1bsb14no _4t3i14no",
27
- nameSection: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1ul9idpf _18u0utpp _syazazsu",
28
- capitalize: "_1p1d1dk0"
48
+ nameSection: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1ul9idpf _18u0utpp _2hwxu2gc _syazazsu",
49
+ capitalize: "_1p1d1dk0",
50
+ inviteButton: "_2rko12b0 _11c8fhey _1h6d1l7x _1dqonqa1 _189ee4h9 _1e0c116y _4cvr1h6o _1bah1h6o _ca0q12x7 _u5f3utpp _n3td12x7 _19bvutpp _syazazsu _k48p1wq8 _4t3iviql _bfhksm61 _cun9by5v _irr31dpa"
29
51
  };
30
52
  var VALID_OPTION = 'VALID';
31
53
  var POTENTIAL_OPTION = 'POTENTIAL';
32
54
  // eslint-disable-next-line require-unicode-regexp
33
55
  var COMPLETE_EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/i;
34
56
  var ERROR_DELAY_MS = 750;
57
+
58
+ /**
59
+ * Truncates an email-like string to fit within a max length by inserting an
60
+ * ellipsis into the middle of the local part (before the @).
61
+ *
62
+ * Preserves the full `@domain` suffix so users can always see
63
+ * which domain the invite targets.
64
+ */
65
+ var truncateInviteOption = exports.truncateInviteOption = function truncateInviteOption(value) {
66
+ var maxLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 34;
67
+ if (value.length <= maxLength) {
68
+ return value;
69
+ }
70
+ var atIndex = value.lastIndexOf('@');
71
+ if (atIndex === -1) {
72
+ // No @ — truncate to maxLength and append ellipsis
73
+ var _ellipsis = "\u2026";
74
+ return "".concat(value.slice(0, maxLength - 1)).concat(_ellipsis);
75
+ }
76
+ var domain = value.slice(atIndex); // includes @
77
+ var local = value.slice(0, atIndex);
78
+ var ellipsis = "\u2026";
79
+ var available = maxLength - domain.length - ellipsis.length;
80
+ if (available <= 0) {
81
+ // Domain alone exceeds budget — show as much as we can
82
+ return "".concat(ellipsis).concat(domain.slice(-(maxLength - ellipsis.length)));
83
+ }
84
+ var leading = Math.ceil(available / 2);
85
+ var trailing = Math.floor(available / 2);
86
+ var truncatedLocal = trailing > 0 ? "".concat(local.slice(0, leading)).concat(ellipsis).concat(local.slice(local.length - trailing)) : "".concat(local.slice(0, leading)).concat(ellipsis);
87
+ return "".concat(truncatedLocal).concat(domain);
88
+ };
35
89
  var getInviteOption = function getInviteOption(inputValue, suggestedEmailDomain) {
36
90
  if (inputValue.includes(' ') && inputValue.includes('@')) {
37
- return inputValue;
91
+ return truncateInviteOption(inputValue);
38
92
  }
39
93
  var isEmail = inputValue && [VALID_OPTION, POTENTIAL_OPTION].includes((0, _userPicker.isValidEmail)(inputValue));
40
94
  if (isEmail || !suggestedEmailDomain) {
41
- return inputValue;
95
+ return truncateInviteOption(inputValue);
42
96
  }
43
- return "".concat(inputValue.toLocaleLowerCase(), "@").concat(suggestedEmailDomain);
97
+ return truncateInviteOption("".concat(inputValue.toLocaleLowerCase(), "@").concat(suggestedEmailDomain));
44
98
  };
45
99
  var getIsEmailValid = function getIsEmailValid(inputValue) {
46
100
  if (!inputValue || inputValue.length === 0) {
@@ -57,31 +111,26 @@ var getIsEmailValid = function getIsEmailValid(inputValue) {
57
111
  var INVITE_ITEM_DESCRIPTION = exports.INVITE_ITEM_DESCRIPTION = {
58
112
  id: 'invite-teammate'
59
113
  };
60
- var InviteItemWithEmailDomain = function InviteItemWithEmailDomain(_ref) {
61
- var productName = _ref.productName,
62
- onMount = _ref.onMount,
63
- onMouseEnter = _ref.onMouseEnter,
64
- onSelection = _ref.onSelection,
65
- selected = _ref.selected,
66
- userRole = _ref.userRole,
67
- _ref$query = _ref.query,
68
- query = _ref$query === void 0 ? '' : _ref$query,
69
- emailDomain = _ref.emailDomain,
70
- intl = _ref.intl;
71
- var _useState = (0, _react.useState)(false),
114
+ var InviteItemWithEmailDomain = function InviteItemWithEmailDomain(_ref2) {
115
+ var productName = _ref2.productName,
116
+ onMount = _ref2.onMount,
117
+ onMouseEnter = _ref2.onMouseEnter,
118
+ onSelection = _ref2.onSelection,
119
+ selected = _ref2.selected,
120
+ userRole = _ref2.userRole,
121
+ _ref2$query = _ref2.query,
122
+ query = _ref2$query === void 0 ? '' : _ref2$query,
123
+ emailDomain = _ref2.emailDomain,
124
+ intl = _ref2.intl;
125
+ var _useState = (0, _react.useState)(query.length !== 0 && !getIsEmailValid(query)),
72
126
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
73
127
  showErrorIcon = _useState2[0],
74
128
  setShowErrorIcon = _useState2[1];
75
129
  var timeoutRef = (0, _react.useRef)();
76
130
  var possibleEmail = getInviteOption(query, emailDomain);
77
131
  var isEmailValid = getIsEmailValid(query);
78
-
79
- // Use debounced error state for icon and byline display
80
- var shouldShowError = !isEmailValid && showErrorIcon;
81
- // Use debounced error state for byline: show invalid message only after delay
82
- var isValidForByline = isEmailValid || !shouldShowError;
83
132
  var getByline = function getByline() {
84
- if (!isValidForByline) {
133
+ if (showErrorIcon) {
85
134
  return intl.formatMessage(_messages.mentionMessages.inviteTeammateInvalidEmail);
86
135
  }
87
136
  if (userRole === 'admin') {
@@ -101,19 +150,11 @@ var InviteItemWithEmailDomain = function InviteItemWithEmailDomain(_ref) {
101
150
  }
102
151
  return intl.formatMessage(_messages.mentionMessages.sendInvite);
103
152
  };
104
- var onSelected = (0, _react.useCallback)(
153
+ var onInviteButtonClick = (0, _react.useCallback)(
105
154
  // Ignored via go/ees005
106
155
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
107
156
  function (event) {
108
157
  if (onSelection) {
109
- // For mouse events, only handle left click
110
- if ('button' in event && event.button !== 0) {
111
- return;
112
- }
113
- // For keyboard events, only handle Enter and Space
114
- if ('key' in event && event.key !== 'Enter' && event.key !== ' ') {
115
- return;
116
- }
117
158
  event.preventDefault();
118
159
  onSelection(INVITE_ITEM_DESCRIPTION, event);
119
160
  }
@@ -167,19 +208,15 @@ var InviteItemWithEmailDomain = function InviteItemWithEmailDomain(_ref) {
167
208
  }, [query, isEmailValid]);
168
209
  var displayName = query && emailDomain ? possibleEmail : undefined;
169
210
  return displayName && /*#__PURE__*/_react.default.createElement("div", {
170
- role: "button",
171
- tabIndex: 0,
172
- onMouseDown: onSelected,
173
- onKeyDown: onSelected,
174
211
  onMouseEnter: onItemMouseEnter,
175
212
  onFocus: onItemFocus,
176
213
  "data-id": INVITE_ITEM_DESCRIPTION.id,
177
- className: (0, _runtime.ax)(["_1reo15vq _18m915vq _bfhk1j28 _1e0c1ule _2mzuglyw _80omtlke", selected && "_bfhk1dpa"])
214
+ className: (0, _runtime.ax)(["_1reo15vq _18m915vq _bfhk1j28 _1e0c1ule _2mzuglyw", selected && "_bfhk1dpa"])
178
215
  }, /*#__PURE__*/_react.default.createElement("div", {
179
216
  className: (0, _runtime.ax)([style.rowStyle])
180
217
  }, /*#__PURE__*/_react.default.createElement("span", {
181
218
  className: (0, _runtime.ax)([style.avatar])
182
- }, shouldShowError ? /*#__PURE__*/_react.default.createElement(_statusError.default, {
219
+ }, showErrorIcon ? /*#__PURE__*/_react.default.createElement(_statusError.default, {
183
220
  label: "Error",
184
221
  color: "var(--ds-icon-danger, #C9372C)"
185
222
  }) : /*#__PURE__*/_react.default.createElement(_email.default, {
@@ -188,9 +225,15 @@ var InviteItemWithEmailDomain = function InviteItemWithEmailDomain(_ref) {
188
225
  })), /*#__PURE__*/_react.default.createElement("div", {
189
226
  "data-testid": "name-section",
190
227
  className: (0, _runtime.ax)([style.nameSection])
191
- }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, displayName), /*#__PURE__*/_react.default.createElement("div", {
228
+ }, /*#__PURE__*/_react.default.createElement(DisplayName, {
229
+ name: displayName
230
+ }), /*#__PURE__*/_react.default.createElement("div", {
192
231
  className: (0, _runtime.ax)([style.byline])
193
- }, getByline())))));
232
+ }, getByline())), /*#__PURE__*/_react.default.createElement(_pressable.default, {
233
+ onClick: onInviteButtonClick,
234
+ xcss: style.inviteButton,
235
+ isDisabled: showErrorIcon
236
+ }, intl.formatMessage(_messages.mentionMessages.inviteButton))));
194
237
  };
195
238
 
196
239
  // eslint-disable-next-line @typescript-eslint/ban-types
package/dist/es2019/pm-plugins/main.js CHANGED
@@ -12,7 +12,7 @@ export const ACTIONS = {
12
12
  SET_PROVIDER: 'SET_PROVIDER'
13
13
  };
14
14
  const PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
15
- const PACKAGE_VERSION = "12.1.8";
15
+ const PACKAGE_VERSION = "12.1.10";
16
16
  const setProvider = provider => (state, dispatch) => {
17
17
  if (dispatch) {
18
18
  dispatch(state.tr.setMeta(mentionPluginKey, {
package/dist/es2019/ui/InviteItem/InviteItemWithEmailDomain.compiled.css CHANGED
@@ -1,3 +1,8 @@
1
+ ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
3
+ ._189ee4h9{border-width:var(--ds-border-width,1px)}
4
+ ._1dqonqa1{border-style:solid}
5
+ ._1h6d1l7x{border-color:var(--ds-border,#0b120e24)}
1
6
  ._16jlidpf{flex-grow:0}
2
7
  ._16jlkb7n{flex-grow:1}
3
8
  ._18m915vq{overflow-y:hidden}
@@ -7,25 +12,34 @@
7
12
  ._1bah1h6o{justify-content:center}
8
13
  ._1bsb14no{width:36px}
9
14
  ._1bto1l2s{text-overflow:ellipsis}
15
+ ._1e0c116y{display:inline-flex}
16
+ ._1e0c1o8l{display:inline-block}
10
17
  ._1e0c1txw{display:flex}
11
18
  ._1e0c1ule{display:block}
19
+ ._1i4q1hna{overflow-wrap:break-word}
12
20
  ._1n261g80{flex-wrap:wrap}
13
21
  ._1o9zkb7n{flex-shrink:1}
14
22
  ._1p1d1dk0{text-transform:capitalize}
15
23
  ._1reo15vq{overflow-x:hidden}
16
24
  ._1ul9idpf{min-width:0}
25
+ ._2hwxu2gc{margin-right:var(--ds-space-100,8px)}
17
26
  ._2lx2vrvc{flex-direction:row}
18
27
  ._2mzuglyw{list-style-type:none}
19
28
  ._4cvr1h6o{align-items:center}
20
29
  ._4t3i14no{height:36px}
21
- ._80omtlke{cursor:pointer}
30
+ ._4t3iviql{height:2rem}
22
31
  ._bfhk1dpa{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
23
32
  ._bfhk1j28{background-color:transparent}
33
+ ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
24
34
  ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
35
+ ._cun9by5v:disabled{background-color:var(--ds-background-disabled,#17171708)}
25
36
  ._i0dl1wug{flex-basis:auto}
26
37
  ._i0dlf1ug{flex-basis:0%}
38
+ ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
27
39
  ._kqswh2mm{position:relative}
28
40
  ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
41
+ ._p12f1osq{max-width:100%}
29
42
  ._s7n4nkob{vertical-align:middle}
30
43
  ._syazazsu{color:var(--ds-text-subtle,#505258)}
31
- ._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
44
+ ._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
45
+ ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
package/dist/es2019/ui/InviteItem/InviteItemWithEmailDomain.js CHANGED
@@ -7,30 +7,84 @@ import { FormattedMessage, injectIntl } from 'react-intl';
7
7
  import { mentionMessages as messages } from '@atlaskit/editor-common/messages';
8
8
  import EmailIcon from '@atlaskit/icon/core/email';
9
9
  import StatusErrorIcon from '@atlaskit/icon/core/status-error';
10
+ import Pressable from '@atlaskit/primitives/pressable';
10
11
  import { isValidEmail } from '@atlaskit/user-picker';
11
12
  const mentionItemStyle = null;
12
13
  const mentionItemSelectedStyle = null;
14
+ const displayNameStyles = {
15
+ localPart: "_1i4q1hna",
16
+ domainPart: "_1e0c1o8l _p12f1osq _1i4q1hna"
17
+ };
18
+ const DisplayName = ({
19
+ name
20
+ }) => {
21
+ const atIndex = name.indexOf('@');
22
+ if (atIndex === -1) {
23
+ return /*#__PURE__*/React.createElement("span", {
24
+ className: ax([displayNameStyles.localPart])
25
+ }, name);
26
+ }
27
+ const localPart = name.slice(0, atIndex);
28
+ const domainPart = name.slice(atIndex); // includes the @
29
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
30
+ className: ax([displayNameStyles.localPart])
31
+ }, localPart), /*#__PURE__*/React.createElement("span", {
32
+ className: ax([displayNameStyles.domainPart])
33
+ }, domainPart));
34
+ };
13
35
  const style = {
14
36
  byline: "_19pkv77o",
15
37
  rowStyle: "_1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _2lx2vrvc _1n261g80 _ca0q12x7 _n3td12x7 _19bvutpp _u5f3utpp _1bto1l2s _s7n4nkob",
16
38
  avatar: "_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _4cvr1h6o _1bah1h6o _kqswh2mm _1bsb14no _4t3i14no",
17
- nameSection: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1ul9idpf _18u0utpp _syazazsu",
18
- capitalize: "_1p1d1dk0"
39
+ nameSection: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1ul9idpf _18u0utpp _2hwxu2gc _syazazsu",
40
+ capitalize: "_1p1d1dk0",
41
+ inviteButton: "_2rko12b0 _11c8fhey _1h6d1l7x _1dqonqa1 _189ee4h9 _1e0c116y _4cvr1h6o _1bah1h6o _ca0q12x7 _u5f3utpp _n3td12x7 _19bvutpp _syazazsu _k48p1wq8 _4t3iviql _bfhksm61 _cun9by5v _irr31dpa"
19
42
  };
20
43
  const VALID_OPTION = 'VALID';
21
44
  const POTENTIAL_OPTION = 'POTENTIAL';
22
45
  // eslint-disable-next-line require-unicode-regexp
23
46
  const COMPLETE_EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/i;
24
47
  const ERROR_DELAY_MS = 750;
48
+
49
+ /**
50
+ * Truncates an email-like string to fit within a max length by inserting an
51
+ * ellipsis into the middle of the local part (before the @).
52
+ *
53
+ * Preserves the full `@domain` suffix so users can always see
54
+ * which domain the invite targets.
55
+ */
56
+ export const truncateInviteOption = (value, maxLength = 34) => {
57
+ if (value.length <= maxLength) {
58
+ return value;
59
+ }
60
+ const atIndex = value.lastIndexOf('@');
61
+ if (atIndex === -1) {
62
+ // No @ — truncate to maxLength and append ellipsis
63
+ const ellipsis = '\u2026';
64
+ return `${value.slice(0, maxLength - 1)}${ellipsis}`;
65
+ }
66
+ const domain = value.slice(atIndex); // includes @
67
+ const local = value.slice(0, atIndex);
68
+ const ellipsis = '\u2026';
69
+ const available = maxLength - domain.length - ellipsis.length;
70
+ if (available <= 0) {
71
+ // Domain alone exceeds budget — show as much as we can
72
+ return `${ellipsis}${domain.slice(-(maxLength - ellipsis.length))}`;
73
+ }
74
+ const leading = Math.ceil(available / 2);
75
+ const trailing = Math.floor(available / 2);
76
+ const truncatedLocal = trailing > 0 ? `${local.slice(0, leading)}${ellipsis}${local.slice(local.length - trailing)}` : `${local.slice(0, leading)}${ellipsis}`;
77
+ return `${truncatedLocal}${domain}`;
78
+ };
25
79
  const getInviteOption = (inputValue, suggestedEmailDomain) => {
26
80
  if (inputValue.includes(' ') && inputValue.includes('@')) {
27
- return inputValue;
81
+ return truncateInviteOption(inputValue);
28
82
  }
29
83
  const isEmail = inputValue && [VALID_OPTION, POTENTIAL_OPTION].includes(isValidEmail(inputValue));
30
84
  if (isEmail || !suggestedEmailDomain) {
31
- return inputValue;
85
+ return truncateInviteOption(inputValue);
32
86
  }
33
- return `${inputValue.toLocaleLowerCase()}@${suggestedEmailDomain}`;
87
+ return truncateInviteOption(`${inputValue.toLocaleLowerCase()}@${suggestedEmailDomain}`);
34
88
  };
35
89
  const getIsEmailValid = inputValue => {
36
90
  if (!inputValue || inputValue.length === 0) {
@@ -58,17 +112,12 @@ const InviteItemWithEmailDomain = ({
58
112
  emailDomain,
59
113
  intl
60
114
  }) => {
61
- const [showErrorIcon, setShowErrorIcon] = useState(false);
115
+ const [showErrorIcon, setShowErrorIcon] = useState(query.length !== 0 && !getIsEmailValid(query));
62
116
  const timeoutRef = useRef();
63
117
  const possibleEmail = getInviteOption(query, emailDomain);
64
118
  const isEmailValid = getIsEmailValid(query);
65
-
66
- // Use debounced error state for icon and byline display
67
- const shouldShowError = !isEmailValid && showErrorIcon;
68
- // Use debounced error state for byline: show invalid message only after delay
69
- const isValidForByline = isEmailValid || !shouldShowError;
70
119
  const getByline = () => {
71
- if (!isValidForByline) {
120
+ if (showErrorIcon) {
72
121
  return intl.formatMessage(messages.inviteTeammateInvalidEmail);
73
122
  }
74
123
  if (userRole === 'admin') {
@@ -88,19 +137,11 @@ const InviteItemWithEmailDomain = ({
88
137
  }
89
138
  return intl.formatMessage(messages.sendInvite);
90
139
  };
91
- const onSelected = useCallback(
140
+ const onInviteButtonClick = useCallback(
92
141
  // Ignored via go/ees005
93
142
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
94
143
  event => {
95
144
  if (onSelection) {
96
- // For mouse events, only handle left click
97
- if ('button' in event && event.button !== 0) {
98
- return;
99
- }
100
- // For keyboard events, only handle Enter and Space
101
- if ('key' in event && event.key !== 'Enter' && event.key !== ' ') {
102
- return;
103
- }
104
145
  event.preventDefault();
105
146
  onSelection(INVITE_ITEM_DESCRIPTION, event);
106
147
  }
@@ -154,19 +195,15 @@ const InviteItemWithEmailDomain = ({
154
195
  }, [query, isEmailValid]);
155
196
  const displayName = query && emailDomain ? possibleEmail : undefined;
156
197
  return displayName && /*#__PURE__*/React.createElement("div", {
157
- role: "button",
158
- tabIndex: 0,
159
- onMouseDown: onSelected,
160
- onKeyDown: onSelected,
161
198
  onMouseEnter: onItemMouseEnter,
162
199
  onFocus: onItemFocus,
163
200
  "data-id": INVITE_ITEM_DESCRIPTION.id,
164
- className: ax(["_1reo15vq _18m915vq _bfhk1j28 _1e0c1ule _2mzuglyw _80omtlke", selected && "_bfhk1dpa"])
201
+ className: ax(["_1reo15vq _18m915vq _bfhk1j28 _1e0c1ule _2mzuglyw", selected && "_bfhk1dpa"])
165
202
  }, /*#__PURE__*/React.createElement("div", {
166
203
  className: ax([style.rowStyle])
167
204
  }, /*#__PURE__*/React.createElement("span", {
168
205
  className: ax([style.avatar])
169
- }, shouldShowError ? /*#__PURE__*/React.createElement(StatusErrorIcon, {
206
+ }, showErrorIcon ? /*#__PURE__*/React.createElement(StatusErrorIcon, {
170
207
  label: "Error",
171
208
  color: "var(--ds-icon-danger, #C9372C)"
172
209
  }) : /*#__PURE__*/React.createElement(EmailIcon, {
@@ -175,9 +212,15 @@ const InviteItemWithEmailDomain = ({
175
212
  })), /*#__PURE__*/React.createElement("div", {
176
213
  "data-testid": "name-section",
177
214
  className: ax([style.nameSection])
178
- }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, displayName), /*#__PURE__*/React.createElement("div", {
215
+ }, /*#__PURE__*/React.createElement(DisplayName, {
216
+ name: displayName
217
+ }), /*#__PURE__*/React.createElement("div", {
179
218
  className: ax([style.byline])
180
- }, getByline())))));
219
+ }, getByline())), /*#__PURE__*/React.createElement(Pressable, {
220
+ onClick: onInviteButtonClick,
221
+ xcss: style.inviteButton,
222
+ isDisabled: showErrorIcon
223
+ }, intl.formatMessage(messages.inviteButton))));
181
224
  };
182
225
 
183
226
  // eslint-disable-next-line @typescript-eslint/ban-types
package/dist/esm/pm-plugins/main.js CHANGED
@@ -15,7 +15,7 @@ export var ACTIONS = {
15
15
  SET_PROVIDER: 'SET_PROVIDER'
16
16
  };
17
17
  var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
18
- var PACKAGE_VERSION = "12.1.8";
18
+ var PACKAGE_VERSION = "12.1.10";
19
19
  var setProvider = function setProvider(provider) {
20
20
  return function (state, dispatch) {
21
21
  if (dispatch) {
package/dist/esm/ui/InviteItem/InviteItemWithEmailDomain.compiled.css CHANGED
@@ -1,3 +1,8 @@
1
+ ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
3
+ ._189ee4h9{border-width:var(--ds-border-width,1px)}
4
+ ._1dqonqa1{border-style:solid}
5
+ ._1h6d1l7x{border-color:var(--ds-border,#0b120e24)}
1
6
  ._16jlidpf{flex-grow:0}
2
7
  ._16jlkb7n{flex-grow:1}
3
8
  ._18m915vq{overflow-y:hidden}
@@ -7,25 +12,34 @@
7
12
  ._1bah1h6o{justify-content:center}
8
13
  ._1bsb14no{width:36px}
9
14
  ._1bto1l2s{text-overflow:ellipsis}
15
+ ._1e0c116y{display:inline-flex}
16
+ ._1e0c1o8l{display:inline-block}
10
17
  ._1e0c1txw{display:flex}
11
18
  ._1e0c1ule{display:block}
19
+ ._1i4q1hna{overflow-wrap:break-word}
12
20
  ._1n261g80{flex-wrap:wrap}
13
21
  ._1o9zkb7n{flex-shrink:1}
14
22
  ._1p1d1dk0{text-transform:capitalize}
15
23
  ._1reo15vq{overflow-x:hidden}
16
24
  ._1ul9idpf{min-width:0}
25
+ ._2hwxu2gc{margin-right:var(--ds-space-100,8px)}
17
26
  ._2lx2vrvc{flex-direction:row}
18
27
  ._2mzuglyw{list-style-type:none}
19
28
  ._4cvr1h6o{align-items:center}
20
29
  ._4t3i14no{height:36px}
21
- ._80omtlke{cursor:pointer}
30
+ ._4t3iviql{height:2rem}
22
31
  ._bfhk1dpa{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
23
32
  ._bfhk1j28{background-color:transparent}
33
+ ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
24
34
  ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
35
+ ._cun9by5v:disabled{background-color:var(--ds-background-disabled,#17171708)}
25
36
  ._i0dl1wug{flex-basis:auto}
26
37
  ._i0dlf1ug{flex-basis:0%}
38
+ ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
27
39
  ._kqswh2mm{position:relative}
28
40
  ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
41
+ ._p12f1osq{max-width:100%}
29
42
  ._s7n4nkob{vertical-align:middle}
30
43
  ._syazazsu{color:var(--ds-text-subtle,#505258)}
31
- ._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
44
+ ._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
45
+ ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
package/dist/esm/ui/InviteItem/InviteItemWithEmailDomain.js CHANGED
@@ -8,30 +8,84 @@ import { FormattedMessage, injectIntl } from 'react-intl';
8
8
  import { mentionMessages as messages } from '@atlaskit/editor-common/messages';
9
9
  import EmailIcon from '@atlaskit/icon/core/email';
10
10
  import StatusErrorIcon from '@atlaskit/icon/core/status-error';
11
+ import Pressable from '@atlaskit/primitives/pressable';
11
12
  import { isValidEmail } from '@atlaskit/user-picker';
12
13
  var mentionItemStyle = null;
13
14
  var mentionItemSelectedStyle = null;
15
+ var displayNameStyles = {
16
+ localPart: "_1i4q1hna",
17
+ domainPart: "_1e0c1o8l _p12f1osq _1i4q1hna"
18
+ };
19
+ var DisplayName = function DisplayName(_ref) {
20
+ var name = _ref.name;
21
+ var atIndex = name.indexOf('@');
22
+ if (atIndex === -1) {
23
+ return /*#__PURE__*/React.createElement("span", {
24
+ className: ax([displayNameStyles.localPart])
25
+ }, name);
26
+ }
27
+ var localPart = name.slice(0, atIndex);
28
+ var domainPart = name.slice(atIndex); // includes the @
29
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
30
+ className: ax([displayNameStyles.localPart])
31
+ }, localPart), /*#__PURE__*/React.createElement("span", {
32
+ className: ax([displayNameStyles.domainPart])
33
+ }, domainPart));
34
+ };
14
35
  var style = {
15
36
  byline: "_19pkv77o",
16
37
  rowStyle: "_1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _2lx2vrvc _1n261g80 _ca0q12x7 _n3td12x7 _19bvutpp _u5f3utpp _1bto1l2s _s7n4nkob",
17
38
  avatar: "_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _4cvr1h6o _1bah1h6o _kqswh2mm _1bsb14no _4t3i14no",
18
- nameSection: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1ul9idpf _18u0utpp _syazazsu",
19
- capitalize: "_1p1d1dk0"
39
+ nameSection: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1ul9idpf _18u0utpp _2hwxu2gc _syazazsu",
40
+ capitalize: "_1p1d1dk0",
41
+ inviteButton: "_2rko12b0 _11c8fhey _1h6d1l7x _1dqonqa1 _189ee4h9 _1e0c116y _4cvr1h6o _1bah1h6o _ca0q12x7 _u5f3utpp _n3td12x7 _19bvutpp _syazazsu _k48p1wq8 _4t3iviql _bfhksm61 _cun9by5v _irr31dpa"
20
42
  };
21
43
  var VALID_OPTION = 'VALID';
22
44
  var POTENTIAL_OPTION = 'POTENTIAL';
23
45
  // eslint-disable-next-line require-unicode-regexp
24
46
  var COMPLETE_EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/i;
25
47
  var ERROR_DELAY_MS = 750;
48
+
49
+ /**
50
+ * Truncates an email-like string to fit within a max length by inserting an
51
+ * ellipsis into the middle of the local part (before the @).
52
+ *
53
+ * Preserves the full `@domain` suffix so users can always see
54
+ * which domain the invite targets.
55
+ */
56
+ export var truncateInviteOption = function truncateInviteOption(value) {
57
+ var maxLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 34;
58
+ if (value.length <= maxLength) {
59
+ return value;
60
+ }
61
+ var atIndex = value.lastIndexOf('@');
62
+ if (atIndex === -1) {
63
+ // No @ — truncate to maxLength and append ellipsis
64
+ var _ellipsis = "\u2026";
65
+ return "".concat(value.slice(0, maxLength - 1)).concat(_ellipsis);
66
+ }
67
+ var domain = value.slice(atIndex); // includes @
68
+ var local = value.slice(0, atIndex);
69
+ var ellipsis = "\u2026";
70
+ var available = maxLength - domain.length - ellipsis.length;
71
+ if (available <= 0) {
72
+ // Domain alone exceeds budget — show as much as we can
73
+ return "".concat(ellipsis).concat(domain.slice(-(maxLength - ellipsis.length)));
74
+ }
75
+ var leading = Math.ceil(available / 2);
76
+ var trailing = Math.floor(available / 2);
77
+ var truncatedLocal = trailing > 0 ? "".concat(local.slice(0, leading)).concat(ellipsis).concat(local.slice(local.length - trailing)) : "".concat(local.slice(0, leading)).concat(ellipsis);
78
+ return "".concat(truncatedLocal).concat(domain);
79
+ };
26
80
  var getInviteOption = function getInviteOption(inputValue, suggestedEmailDomain) {
27
81
  if (inputValue.includes(' ') && inputValue.includes('@')) {
28
- return inputValue;
82
+ return truncateInviteOption(inputValue);
29
83
  }
30
84
  var isEmail = inputValue && [VALID_OPTION, POTENTIAL_OPTION].includes(isValidEmail(inputValue));
31
85
  if (isEmail || !suggestedEmailDomain) {
32
- return inputValue;
86
+ return truncateInviteOption(inputValue);
33
87
  }
34
- return "".concat(inputValue.toLocaleLowerCase(), "@").concat(suggestedEmailDomain);
88
+ return truncateInviteOption("".concat(inputValue.toLocaleLowerCase(), "@").concat(suggestedEmailDomain));
35
89
  };
36
90
  var getIsEmailValid = function getIsEmailValid(inputValue) {
37
91
  if (!inputValue || inputValue.length === 0) {
@@ -48,31 +102,26 @@ var getIsEmailValid = function getIsEmailValid(inputValue) {
48
102
  export var INVITE_ITEM_DESCRIPTION = {
49
103
  id: 'invite-teammate'
50
104
  };
51
- var InviteItemWithEmailDomain = function InviteItemWithEmailDomain(_ref) {
52
- var productName = _ref.productName,
53
- onMount = _ref.onMount,
54
- onMouseEnter = _ref.onMouseEnter,
55
- onSelection = _ref.onSelection,
56
- selected = _ref.selected,
57
- userRole = _ref.userRole,
58
- _ref$query = _ref.query,
59
- query = _ref$query === void 0 ? '' : _ref$query,
60
- emailDomain = _ref.emailDomain,
61
- intl = _ref.intl;
62
- var _useState = useState(false),
105
+ var InviteItemWithEmailDomain = function InviteItemWithEmailDomain(_ref2) {
106
+ var productName = _ref2.productName,
107
+ onMount = _ref2.onMount,
108
+ onMouseEnter = _ref2.onMouseEnter,
109
+ onSelection = _ref2.onSelection,
110
+ selected = _ref2.selected,
111
+ userRole = _ref2.userRole,
112
+ _ref2$query = _ref2.query,
113
+ query = _ref2$query === void 0 ? '' : _ref2$query,
114
+ emailDomain = _ref2.emailDomain,
115
+ intl = _ref2.intl;
116
+ var _useState = useState(query.length !== 0 && !getIsEmailValid(query)),
63
117
  _useState2 = _slicedToArray(_useState, 2),
64
118
  showErrorIcon = _useState2[0],
65
119
  setShowErrorIcon = _useState2[1];
66
120
  var timeoutRef = useRef();
67
121
  var possibleEmail = getInviteOption(query, emailDomain);
68
122
  var isEmailValid = getIsEmailValid(query);
69
-
70
- // Use debounced error state for icon and byline display
71
- var shouldShowError = !isEmailValid && showErrorIcon;
72
- // Use debounced error state for byline: show invalid message only after delay
73
- var isValidForByline = isEmailValid || !shouldShowError;
74
123
  var getByline = function getByline() {
75
- if (!isValidForByline) {
124
+ if (showErrorIcon) {
76
125
  return intl.formatMessage(messages.inviteTeammateInvalidEmail);
77
126
  }
78
127
  if (userRole === 'admin') {
@@ -92,19 +141,11 @@ var InviteItemWithEmailDomain = function InviteItemWithEmailDomain(_ref) {
92
141
  }
93
142
  return intl.formatMessage(messages.sendInvite);
94
143
  };
95
- var onSelected = useCallback(
144
+ var onInviteButtonClick = useCallback(
96
145
  // Ignored via go/ees005
97
146
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
98
147
  function (event) {
99
148
  if (onSelection) {
100
- // For mouse events, only handle left click
101
- if ('button' in event && event.button !== 0) {
102
- return;
103
- }
104
- // For keyboard events, only handle Enter and Space
105
- if ('key' in event && event.key !== 'Enter' && event.key !== ' ') {
106
- return;
107
- }
108
149
  event.preventDefault();
109
150
  onSelection(INVITE_ITEM_DESCRIPTION, event);
110
151
  }
@@ -158,19 +199,15 @@ var InviteItemWithEmailDomain = function InviteItemWithEmailDomain(_ref) {
158
199
  }, [query, isEmailValid]);
159
200
  var displayName = query && emailDomain ? possibleEmail : undefined;
160
201
  return displayName && /*#__PURE__*/React.createElement("div", {
161
- role: "button",
162
- tabIndex: 0,
163
- onMouseDown: onSelected,
164
- onKeyDown: onSelected,
165
202
  onMouseEnter: onItemMouseEnter,
166
203
  onFocus: onItemFocus,
167
204
  "data-id": INVITE_ITEM_DESCRIPTION.id,
168
- className: ax(["_1reo15vq _18m915vq _bfhk1j28 _1e0c1ule _2mzuglyw _80omtlke", selected && "_bfhk1dpa"])
205
+ className: ax(["_1reo15vq _18m915vq _bfhk1j28 _1e0c1ule _2mzuglyw", selected && "_bfhk1dpa"])
169
206
  }, /*#__PURE__*/React.createElement("div", {
170
207
  className: ax([style.rowStyle])
171
208
  }, /*#__PURE__*/React.createElement("span", {
172
209
  className: ax([style.avatar])
173
- }, shouldShowError ? /*#__PURE__*/React.createElement(StatusErrorIcon, {
210
+ }, showErrorIcon ? /*#__PURE__*/React.createElement(StatusErrorIcon, {
174
211
  label: "Error",
175
212
  color: "var(--ds-icon-danger, #C9372C)"
176
213
  }) : /*#__PURE__*/React.createElement(EmailIcon, {
@@ -179,9 +216,15 @@ var InviteItemWithEmailDomain = function InviteItemWithEmailDomain(_ref) {
179
216
  })), /*#__PURE__*/React.createElement("div", {
180
217
  "data-testid": "name-section",
181
218
  className: ax([style.nameSection])
182
- }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, displayName), /*#__PURE__*/React.createElement("div", {
219
+ }, /*#__PURE__*/React.createElement(DisplayName, {
220
+ name: displayName
221
+ }), /*#__PURE__*/React.createElement("div", {
183
222
  className: ax([style.byline])
184
- }, getByline())))));
223
+ }, getByline())), /*#__PURE__*/React.createElement(Pressable, {
224
+ onClick: onInviteButtonClick,
225
+ xcss: style.inviteButton,
226
+ isDisabled: showErrorIcon
227
+ }, intl.formatMessage(messages.inviteButton))));
185
228
  };
186
229
 
187
230
  // eslint-disable-next-line @typescript-eslint/ban-types
package/dist/types/ui/InviteItem/InviteItemWithEmailDomain.d.ts CHANGED
@@ -8,6 +8,14 @@ import React from 'react';
8
8
  import type { WithIntlProps, WrappedComponentProps } from 'react-intl';
9
9
  import type { UserRole } from '@atlaskit/mention';
10
10
  import type { MentionDescription } from '@atlaskit/mention/resource';
11
+ /**
12
+ * Truncates an email-like string to fit within a max length by inserting an
13
+ * ellipsis into the middle of the local part (before the @).
14
+ *
15
+ * Preserves the full `@domain` suffix so users can always see
16
+ * which domain the invite targets.
17
+ */
18
+ export declare const truncateInviteOption: (value: string, maxLength?: number) => string;
11
19
  interface OnMentionEvent {
12
20
  (mention: MentionDescription, event?: SyntheticEvent<any>): void;
13
21
  }
package/dist/types-ts4.5/ui/InviteItem/InviteItemWithEmailDomain.d.ts CHANGED
@@ -8,6 +8,14 @@ import React from 'react';
8
8
  import type { WithIntlProps, WrappedComponentProps } from 'react-intl';
9
9
  import type { UserRole } from '@atlaskit/mention';
10
10
  import type { MentionDescription } from '@atlaskit/mention/resource';
11
+ /**
12
+ * Truncates an email-like string to fit within a max length by inserting an
13
+ * ellipsis into the middle of the local part (before the @).
14
+ *
15
+ * Preserves the full `@domain` suffix so users can always see
16
+ * which domain the invite targets.
17
+ */
18
+ export declare const truncateInviteOption: (value: string, maxLength?: number) => string;
11
19
  interface OnMentionEvent {
12
20
  (mention: MentionDescription, event?: SyntheticEvent<any>): void;
13
21
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-mentions",
3
- "version": "12.1.9",
3
+ "version": "12.1.11",
4
4
  "description": "Mentions plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -29,7 +29,7 @@
29
29
  ],
30
30
  "atlaskit:src": "src/index.ts",
31
31
  "dependencies": {
32
- "@atlaskit/adf-schema": "^52.6.0",
32
+ "@atlaskit/adf-schema": "^52.7.0",
33
33
  "@atlaskit/css": "^0.19.0",
34
34
  "@atlaskit/editor-plugin-analytics": "^10.0.0",
35
35
  "@atlaskit/editor-plugin-base": "^11.0.0",
@@ -43,10 +43,11 @@
43
43
  "@atlaskit/mention": "^25.0.0",
44
44
  "@atlaskit/platform-feature-flags": "^1.1.0",
45
45
  "@atlaskit/popper": "^7.2.0",
46
- "@atlaskit/portal": "^5.4.0",
46
+ "@atlaskit/portal": "^5.5.0",
47
+ "@atlaskit/primitives": "^19.0.0",
47
48
  "@atlaskit/profilecard": "^25.1.0",
48
49
  "@atlaskit/theme": "^23.2.0",
49
- "@atlaskit/tmp-editor-statsig": "^73.0.0",
50
+ "@atlaskit/tmp-editor-statsig": "^74.1.0",
50
51
  "@atlaskit/tokens": "^13.0.0",
51
52
  "@atlaskit/user-picker": "^12.0.0",
52
53
  "@babel/runtime": "^7.0.0",
@@ -56,7 +57,7 @@
56
57
  "uuid": "^3.1.0"
57
58
  },
58
59
  "peerDependencies": {
59
- "@atlaskit/editor-common": "^114.13.0",
60
+ "@atlaskit/editor-common": "^114.18.0",
60
61
  "react": "^18.2.0",
61
62
  "react-dom": "^18.2.0",
62
63
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"