@atlaskit/mention 26.1.0 → 26.2.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.
- package/CHANGELOG.md +71 -0
- package/dist/cjs/api/ContextMentionResource.js +14 -0
- package/dist/cjs/api/MentionResource.js +6 -0
- package/dist/cjs/components/DisabledMentionTooltip/index.js +20 -0
- package/dist/cjs/components/DisabledMentionTooltip/main.js +24 -0
- package/dist/cjs/components/Mention/PrimitiveMention.js +8 -1
- package/dist/cjs/components/Mention/index.js +51 -12
- package/dist/cjs/types.js +10 -0
- package/dist/cjs/util/analytics.js +1 -1
- package/dist/es2019/api/ContextMentionResource.js +12 -0
- package/dist/es2019/api/MentionResource.js +4 -0
- package/dist/es2019/components/DisabledMentionTooltip/index.js +7 -0
- package/dist/es2019/components/DisabledMentionTooltip/main.js +14 -0
- package/dist/es2019/components/Mention/PrimitiveMention.js +8 -0
- package/dist/es2019/components/Mention/index.js +50 -12
- package/dist/es2019/types.js +12 -0
- package/dist/es2019/util/analytics.js +1 -1
- package/dist/esm/api/ContextMentionResource.js +14 -0
- package/dist/esm/api/MentionResource.js +6 -0
- package/dist/esm/components/DisabledMentionTooltip/index.js +9 -0
- package/dist/esm/components/DisabledMentionTooltip/main.js +17 -0
- package/dist/esm/components/Mention/PrimitiveMention.js +8 -1
- package/dist/esm/components/Mention/index.js +51 -12
- package/dist/esm/types.js +12 -0
- package/dist/esm/util/analytics.js +1 -1
- package/dist/types/api/ContextMentionResource.d.ts +6 -1
- package/dist/types/api/MentionResource.d.ts +2 -1
- package/dist/types/components/DisabledMentionTooltip/index.d.ts +6 -0
- package/dist/types/components/DisabledMentionTooltip/main.d.ts +12 -0
- package/dist/types/components/Mention/index.d.ts +12 -0
- package/dist/types/types.d.ts +67 -1
- package/dist/types-ts4.5/api/ContextMentionResource.d.ts +6 -1
- package/dist/types-ts4.5/api/MentionResource.d.ts +2 -1
- package/dist/types-ts4.5/components/DisabledMentionTooltip/index.d.ts +6 -0
- package/dist/types-ts4.5/components/DisabledMentionTooltip/main.d.ts +12 -0
- package/dist/types-ts4.5/components/Mention/index.d.ts +12 -0
- package/dist/types-ts4.5/types.d.ts +67 -1
- package/docs/0-intro.tsx +21 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,76 @@
|
|
|
1
1
|
# @atlaskit/mention
|
|
2
2
|
|
|
3
|
+
## 26.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`971e92e232624`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/971e92e232624) -
|
|
8
|
+
Added a new `DISABLED` visual variant for mention chips so rendering surfaces (such as the editor
|
|
9
|
+
mentions plugin) can render a chip in a non-interactive disabled state with an explanatory
|
|
10
|
+
tooltip. Includes optional `MentionProvider` hooks that let consumers drive the disabled state
|
|
11
|
+
reactively and observe mention deletions.
|
|
12
|
+
|
|
13
|
+
**`@atlaskit/mention`**
|
|
14
|
+
- New `MentionType.DISABLED` enum value and matching style on `PrimitiveMention`.
|
|
15
|
+
- New optional `isDisabled` and `disabledTooltip` props on the React `<Mention>` component. When
|
|
16
|
+
`isDisabled` is set the chip becomes non-clickable, exposes `aria-disabled="true"`, remains
|
|
17
|
+
keyboard-focusable (`tabindex="0"`), and — when `disabledTooltip` is also set — is wrapped in an
|
|
18
|
+
ADS `<Tooltip>` whose content is mirrored into `aria-label` for screen readers.
|
|
19
|
+
- New `MentionDisabledState` (`{ disabled: boolean; tooltip?: string }`) and
|
|
20
|
+
`MentionDisabledStateInput` (`{ id: string }`) types, re-exported from `@atlaskit/mention` and
|
|
21
|
+
`@atlaskit/mention/resource`.
|
|
22
|
+
- New optional `MentionResource` config option `getMentionDisabledState` (forwarded by
|
|
23
|
+
`ContextMentionResource`) that surfaces through three new optional methods on the
|
|
24
|
+
`MentionProvider` interface:
|
|
25
|
+
- `getMentionDisabledState?(mention)` — predicate the editor calls to determine whether a chip
|
|
26
|
+
should render disabled.
|
|
27
|
+
- `subscribeToDisabledStateChanges?(listener)` — lets the editor re-evaluate the predicate when
|
|
28
|
+
the consumer's inputs change.
|
|
29
|
+
- `notifyMentionDestroyed?(mention)` — lets the consumer observe chip removals (e.g. to update
|
|
30
|
+
its source of truth).
|
|
31
|
+
|
|
32
|
+
All three methods are optional so existing `MentionProvider` implementations continue to compile
|
|
33
|
+
and behave identically.
|
|
34
|
+
|
|
35
|
+
**`@atlaskit/editor-plugin-mentions` + `@atlaskit/editor-core`**
|
|
36
|
+
- The mention `NodeView` now reads `MentionProvider.getMentionDisabledState?.({ id })` on every
|
|
37
|
+
state update and re-evaluates whenever `subscribeToDisabledStateChanges` notifies. When the
|
|
38
|
+
predicate returns `{ disabled: true }` the chip gets a new `.mention-disabled` class,
|
|
39
|
+
`aria-disabled="true"`, and an ADS `<Tooltip>` (anchored to the chip via `portalProviderAPI`)
|
|
40
|
+
carrying the `tooltip` text. The chip remains keyboard-focusable.
|
|
41
|
+
- The mention `NodeView.destroy()` calls `notifyMentionDestroyed?.({ id })` on the subscribed
|
|
42
|
+
provider so consumers can react to chip removals without depending on the editor's `onChange`.
|
|
43
|
+
- Added a matching `.editor-mention-primitive.mention-disabled` style in `@atlaskit/editor-core`
|
|
44
|
+
so the new class renders correctly inside the editor content container.
|
|
45
|
+
- Providers that don't implement the new optional methods are entirely unaffected.
|
|
46
|
+
|
|
47
|
+
**`@atlassian/conversation-assistant`, `@atlassian/conversation-assistant-widget` (chat store)**
|
|
48
|
+
- New `addSelectedAgentId({ conversationId, agentId })` action — append-only, no-dedup push onto
|
|
49
|
+
the conversation's `selectedAgentIds` history. Each call adds exactly one entry; duplicates are
|
|
50
|
+
preserved so the history is a 1-to-1 log of every agent chip currently in the editor.
|
|
51
|
+
- New `removeSelectedAgentId({ conversationId, agentId })` action — removes the **rightmost**
|
|
52
|
+
occurrence of an id (preserving order of other entries) for use when a single agent chip is
|
|
53
|
+
deleted from the editor.
|
|
54
|
+
- `setSelectedAgentIds` retains its wholesale-replace semantics (unchanged externally).
|
|
55
|
+
- The picker callback in `chat-input-refresh` is now wired to `addSelectedAgentId`; chip-deletion
|
|
56
|
+
is wired to `removeSelectedAgentId`. The active agent is always `selectedAgentIds.at(-1)`.
|
|
57
|
+
|
|
58
|
+
**`@atlassian/conversation-assistant-chat-prompt-input`**
|
|
59
|
+
- `useChatMentionResource` accepts new options `getSelectedAgentIds`, `disabledAgentTooltip`, and
|
|
60
|
+
`onAgentMentionDestroyed` that wire the new `MentionProvider` capabilities described above.
|
|
61
|
+
- `withAgentSupport` extended with the same options, plus a `notifyMentionDestroyed`
|
|
62
|
+
implementation that forwards to the consumer when a known agent chip is destroyed (sourced from
|
|
63
|
+
the editor `NodeView` rather than from `onChange`, which is not reliably called on every chat
|
|
64
|
+
surface).
|
|
65
|
+
- `<RovoChatPromptInput>` exposes new optional `selectedAgentIds`, `disabledAgentTooltip`, and
|
|
66
|
+
`onAgentMentionDeleted` props for consumers that want to drive the disabled-agent chip state
|
|
67
|
+
from their own store.
|
|
68
|
+
|
|
69
|
+
**`@atlassian/conversation-assistant-store`**
|
|
70
|
+
- JSDoc on the `selectedAgentIds` conversation field updated to document the new append-only /
|
|
71
|
+
rightmost-remove semantics and the canonical read pattern (`.at(-1)` for the active agent). No
|
|
72
|
+
runtime or type-shape change.
|
|
73
|
+
|
|
3
74
|
## 26.1.0
|
|
4
75
|
|
|
5
76
|
### Minor Changes
|
|
@@ -42,6 +42,20 @@ var ContextMentionResource = exports.default = /*#__PURE__*/function () {
|
|
|
42
42
|
(0, _defineProperty2.default)(this, "filter", this.callWithContextIds('filter', 1));
|
|
43
43
|
(0, _defineProperty2.default)(this, "recordMentionSelection", this.callWithContextIds('recordMentionSelection', 1));
|
|
44
44
|
(0, _defineProperty2.default)(this, "shouldHighlightMention", this.callDefault('shouldHighlightMention'));
|
|
45
|
+
(0, _defineProperty2.default)(this, "getMentionDisabledState", function (mention) {
|
|
46
|
+
var _this$mentionProvider3, _this$mentionProvider4;
|
|
47
|
+
return (_this$mentionProvider3 = (_this$mentionProvider4 = _this.mentionProvider).getMentionDisabledState) === null || _this$mentionProvider3 === void 0 ? void 0 : _this$mentionProvider3.call(_this$mentionProvider4, mention);
|
|
48
|
+
});
|
|
49
|
+
(0, _defineProperty2.default)(this, "subscribeToDisabledStateChanges", function (listener) {
|
|
50
|
+
var _this$mentionProvider5, _this$mentionProvider6, _this$mentionProvider7;
|
|
51
|
+
return (_this$mentionProvider5 = (_this$mentionProvider6 = (_this$mentionProvider7 = _this.mentionProvider).subscribeToDisabledStateChanges) === null || _this$mentionProvider6 === void 0 ? void 0 : _this$mentionProvider6.call(_this$mentionProvider7, listener)) !== null && _this$mentionProvider5 !== void 0 ? _this$mentionProvider5 : function () {
|
|
52
|
+
return undefined;
|
|
53
|
+
};
|
|
54
|
+
});
|
|
55
|
+
(0, _defineProperty2.default)(this, "notifyMentionDestroyed", function (mention) {
|
|
56
|
+
var _this$mentionProvider8, _this$mentionProvider9;
|
|
57
|
+
return (_this$mentionProvider8 = (_this$mentionProvider9 = _this.mentionProvider).notifyMentionDestroyed) === null || _this$mentionProvider8 === void 0 ? void 0 : _this$mentionProvider8.call(_this$mentionProvider9, mention);
|
|
58
|
+
});
|
|
45
59
|
(0, _defineProperty2.default)(this, "isFiltering", this.callDefault('isFiltering'));
|
|
46
60
|
this.mentionProvider = mentionProvider;
|
|
47
61
|
this.contextIdentifier = contextIdentifier;
|
|
@@ -210,6 +210,12 @@ var MentionResource = exports.MentionResource = /*#__PURE__*/function (_Abstract
|
|
|
210
210
|
}
|
|
211
211
|
return false;
|
|
212
212
|
}
|
|
213
|
+
}, {
|
|
214
|
+
key: "getMentionDisabledState",
|
|
215
|
+
value: function getMentionDisabledState(mention) {
|
|
216
|
+
var _this$config$getMenti, _this$config;
|
|
217
|
+
return (_this$config$getMenti = (_this$config = this.config).getMentionDisabledState) === null || _this$config$getMenti === void 0 ? void 0 : _this$config$getMenti.call(_this$config, mention);
|
|
218
|
+
}
|
|
213
219
|
}, {
|
|
214
220
|
key: "notify",
|
|
215
221
|
value: function notify(searchTime, mentionResult, query) {
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
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" != (0, _typeof2.default)(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); }
|
|
11
|
+
var AsyncDisabledMentionTooltip = /*#__PURE__*/_react.default.lazy(function () {
|
|
12
|
+
return Promise.resolve().then(function () {
|
|
13
|
+
return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_@atlaskit/mention/disabled-mention-tooltip" */'./main'));
|
|
14
|
+
}).then(function (module) {
|
|
15
|
+
return {
|
|
16
|
+
default: module.DisabledMentionTooltip
|
|
17
|
+
};
|
|
18
|
+
});
|
|
19
|
+
});
|
|
20
|
+
var _default = exports.default = AsyncDisabledMentionTooltip;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.DisabledMentionTooltip = void 0;
|
|
8
|
+
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
/**
|
|
11
|
+
* Wraps a disabled `<Mention>` chip with a tooltip explaining why the chip
|
|
12
|
+
* is disabled. The chip itself remains non-interactive; the tooltip is the
|
|
13
|
+
* sole hover affordance.
|
|
14
|
+
*/
|
|
15
|
+
var DisabledMentionTooltip = exports.DisabledMentionTooltip = function DisabledMentionTooltip(_ref) {
|
|
16
|
+
var tooltip = _ref.tooltip,
|
|
17
|
+
children = _ref.children;
|
|
18
|
+
return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
19
|
+
content: tooltip,
|
|
20
|
+
position: "top"
|
|
21
|
+
}, function (triggerProps) {
|
|
22
|
+
return /*#__PURE__*/_react.default.createElement("span", triggerProps, children);
|
|
23
|
+
});
|
|
24
|
+
};
|
|
@@ -20,7 +20,7 @@ var _excluded = ["mentionType"];
|
|
|
20
20
|
* @jsx jsx
|
|
21
21
|
*/
|
|
22
22
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
23
|
-
var mentionStyle = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.MentionType.SELF, {
|
|
23
|
+
var mentionStyle = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.MentionType.SELF, {
|
|
24
24
|
background: "var(--ds-background-brand-bold, #1868DB)",
|
|
25
25
|
borderColor: 'transparent',
|
|
26
26
|
text: "var(--ds-text-inverse, #FFFFFF)",
|
|
@@ -38,6 +38,13 @@ var mentionStyle = (0, _defineProperty2.default)((0, _defineProperty2.default)((
|
|
|
38
38
|
text: "var(--ds-text-subtle, #505258)",
|
|
39
39
|
hoveredBackground: "var(--ds-background-neutral-hovered, #0B120E24)",
|
|
40
40
|
pressedBackground: "var(--ds-background-neutral-pressed, #080F214A)"
|
|
41
|
+
}), _types.MentionType.DISABLED, {
|
|
42
|
+
background: "var(--ds-background-disabled, #0515240F)",
|
|
43
|
+
borderColor: 'transparent',
|
|
44
|
+
text: "var(--ds-text-disabled, #080F214A)",
|
|
45
|
+
// Disabled chips do not change on hover / press.
|
|
46
|
+
hoveredBackground: "var(--ds-background-disabled, #0515240F)",
|
|
47
|
+
pressedBackground: "var(--ds-background-disabled, #0515240F)"
|
|
41
48
|
});
|
|
42
49
|
var getStyle = function getStyle(_ref, property) {
|
|
43
50
|
var mentionType = _ref.mentionType;
|
|
@@ -17,12 +17,15 @@ var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
|
|
|
17
17
|
var _MessagesIntlProvider = _interopRequireDefault(require("../MessagesIntlProvider"));
|
|
18
18
|
var _PrimitiveMention = _interopRequireDefault(require("./PrimitiveMention"));
|
|
19
19
|
var _NoAccessTooltip = _interopRequireDefault(require("../NoAccessTooltip"));
|
|
20
|
+
var _DisabledMentionTooltip = _interopRequireDefault(require("../DisabledMentionTooltip"));
|
|
20
21
|
var _types = require("../../types");
|
|
21
22
|
var _analytics = require("../../util/analytics");
|
|
22
23
|
var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
|
|
23
24
|
var _ufo = require("@atlaskit/ufo");
|
|
24
25
|
var _i18n = require("../../util/i18n");
|
|
25
26
|
var _ufoExperiences = require("./ufoExperiences");
|
|
27
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
28
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
26
29
|
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
|
|
27
30
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
28
31
|
var ANALYTICS_HOVER_DELAY = exports.ANALYTICS_HOVER_DELAY = 1000;
|
|
@@ -36,7 +39,12 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
|
|
|
36
39
|
var _this$props = _this.props,
|
|
37
40
|
id = _this$props.id,
|
|
38
41
|
text = _this$props.text,
|
|
39
|
-
onClick = _this$props.onClick
|
|
42
|
+
onClick = _this$props.onClick,
|
|
43
|
+
isDisabled = _this$props.isDisabled;
|
|
44
|
+
if (isDisabled) {
|
|
45
|
+
// Disabled chips do not invoke their click handler.
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
40
48
|
if (onClick) {
|
|
41
49
|
onClick(id, text, e);
|
|
42
50
|
}
|
|
@@ -72,7 +80,11 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
|
|
|
72
80
|
(0, _defineProperty2.default)(_this, "getMentionType", function () {
|
|
73
81
|
var _this$props4 = _this.props,
|
|
74
82
|
accessLevel = _this$props4.accessLevel,
|
|
75
|
-
isHighlighted = _this$props4.isHighlighted
|
|
83
|
+
isHighlighted = _this$props4.isHighlighted,
|
|
84
|
+
isDisabled = _this$props4.isDisabled;
|
|
85
|
+
if (isDisabled) {
|
|
86
|
+
return _types.MentionType.DISABLED;
|
|
87
|
+
}
|
|
76
88
|
if (isHighlighted) {
|
|
77
89
|
return _types.MentionType.SELF;
|
|
78
90
|
}
|
|
@@ -122,11 +134,25 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
|
|
|
122
134
|
var text = props.text,
|
|
123
135
|
id = props.id,
|
|
124
136
|
accessLevel = props.accessLevel,
|
|
125
|
-
localId = props.localId
|
|
137
|
+
localId = props.localId,
|
|
138
|
+
disabledTooltip = props.disabledTooltip;
|
|
126
139
|
var mentionType = this.getMentionType();
|
|
127
140
|
var failedMention = text === "@".concat(UNKNOWN_USER_ID);
|
|
128
|
-
var
|
|
129
|
-
var
|
|
141
|
+
var showRestrictedTooltip = mentionType === _types.MentionType.RESTRICTED;
|
|
142
|
+
var showDisabledTooltip = mentionType === _types.MentionType.DISABLED && !!disabledTooltip;
|
|
143
|
+
|
|
144
|
+
// A11y: when the chip is in the disabled visual state, expose
|
|
145
|
+
// `aria-disabled` so assistive tech announces it as such. The
|
|
146
|
+
// disabled-tooltip text is mirrored into `aria-label` so the
|
|
147
|
+
// announcement carries the reason even without portal-id wiring for
|
|
148
|
+
// `aria-describedby`.
|
|
149
|
+
var isDisabledChip = mentionType === _types.MentionType.DISABLED;
|
|
150
|
+
var disabledA11yProps = isDisabledChip ? _objectSpread({
|
|
151
|
+
'aria-disabled': true
|
|
152
|
+
}, disabledTooltip ? {
|
|
153
|
+
'aria-label': "".concat(text || '@...', " \u2014 ").concat(disabledTooltip)
|
|
154
|
+
} : {}) : {};
|
|
155
|
+
var mentionComponent = /*#__PURE__*/_react.default.createElement(_focusRing.default, null, /*#__PURE__*/_react.default.createElement(_PrimitiveMention.default, (0, _extends2.default)({
|
|
130
156
|
mentionType: mentionType,
|
|
131
157
|
onClick: handleOnClick,
|
|
132
158
|
onMouseEnter: handleOnMouseEnter,
|
|
@@ -134,11 +160,28 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
|
|
|
134
160
|
spellCheck: false,
|
|
135
161
|
"data-testid": "mention-".concat(id),
|
|
136
162
|
"data-mention-type": mentionType,
|
|
137
|
-
"data-mention-tooltip":
|
|
138
|
-
}, failedMention ? this.renderUnknownUserError(id) : text || '@...'));
|
|
163
|
+
"data-mention-tooltip": showRestrictedTooltip || showDisabledTooltip
|
|
164
|
+
}, disabledA11yProps), failedMention ? this.renderUnknownUserError(id) : text || '@...'));
|
|
139
165
|
var ssrPlaceholderProp = props.ssrPlaceholderId ? {
|
|
140
166
|
'data-ssr-placeholder': props.ssrPlaceholderId
|
|
141
167
|
} : {};
|
|
168
|
+
var wrappedMention = function () {
|
|
169
|
+
if (showRestrictedTooltip) {
|
|
170
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
|
|
171
|
+
fallback: mentionComponent
|
|
172
|
+
}, /*#__PURE__*/_react.default.createElement(_NoAccessTooltip.default, {
|
|
173
|
+
name: text
|
|
174
|
+
}, mentionComponent));
|
|
175
|
+
}
|
|
176
|
+
if (showDisabledTooltip) {
|
|
177
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
|
|
178
|
+
fallback: mentionComponent
|
|
179
|
+
}, /*#__PURE__*/_react.default.createElement(_DisabledMentionTooltip.default, {
|
|
180
|
+
tooltip: disabledTooltip
|
|
181
|
+
}, mentionComponent));
|
|
182
|
+
}
|
|
183
|
+
return mentionComponent;
|
|
184
|
+
}();
|
|
142
185
|
return /*#__PURE__*/_react.default.createElement(_ufoExperiences.UfoErrorBoundary, {
|
|
143
186
|
id: id
|
|
144
187
|
}, /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
|
|
@@ -147,11 +190,7 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
|
|
|
147
190
|
"data-local-id": localId,
|
|
148
191
|
"data-access-level": accessLevel,
|
|
149
192
|
spellCheck: false
|
|
150
|
-
}, ssrPlaceholderProp), /*#__PURE__*/_react.default.createElement(_MessagesIntlProvider.default, null,
|
|
151
|
-
fallback: mentionComponent
|
|
152
|
-
}, /*#__PURE__*/_react.default.createElement(_NoAccessTooltip.default, {
|
|
153
|
-
name: text
|
|
154
|
-
}, mentionComponent)) : mentionComponent)));
|
|
193
|
+
}, ssrPlaceholderProp), /*#__PURE__*/_react.default.createElement(_MessagesIntlProvider.default, null, wrappedMention)));
|
|
155
194
|
}
|
|
156
195
|
}]);
|
|
157
196
|
}(_react.default.PureComponent);
|
package/dist/cjs/types.js
CHANGED
|
@@ -17,11 +17,21 @@ exports.isTeamMention = isTeamMention;
|
|
|
17
17
|
* Extends {@link ServiceConfig} which provides the base `url`, `securityProvider`,
|
|
18
18
|
* and `refreshedSecurityProvider` fields.
|
|
19
19
|
*/
|
|
20
|
+
/**
|
|
21
|
+
* Describes whether a mention should be rendered in its disabled visual
|
|
22
|
+
* state and what tooltip (if any) should be shown on hover.
|
|
23
|
+
*/
|
|
24
|
+
/**
|
|
25
|
+
* The minimal input shape used by `getMentionDisabledState`. Kept as a named
|
|
26
|
+
* type so the config callback and the provider method share the same input
|
|
27
|
+
* surface, and so callers do not have to fabricate fields they do not have.
|
|
28
|
+
*/
|
|
20
29
|
// data is returned from team search service
|
|
21
30
|
var MentionType = exports.MentionType = /*#__PURE__*/function (MentionType) {
|
|
22
31
|
MentionType[MentionType["SELF"] = 0] = "SELF";
|
|
23
32
|
MentionType[MentionType["RESTRICTED"] = 1] = "RESTRICTED";
|
|
24
33
|
MentionType[MentionType["DEFAULT"] = 2] = "DEFAULT";
|
|
34
|
+
MentionType[MentionType["DISABLED"] = 3] = "DISABLED";
|
|
25
35
|
return MentionType;
|
|
26
36
|
}({});
|
|
27
37
|
var UserAccessLevel = exports.UserAccessLevel = /*#__PURE__*/function (UserAccessLevel) {
|
|
@@ -12,7 +12,7 @@ var _types = require("../types");
|
|
|
12
12
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
13
13
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
14
14
|
var packageName = "@atlaskit/mention";
|
|
15
|
-
var packageVersion = "26.0
|
|
15
|
+
var packageVersion = "26.1.0";
|
|
16
16
|
var SLI_EVENT_TYPE = exports.SLI_EVENT_TYPE = 'sli';
|
|
17
17
|
var SMART_EVENT_TYPE = exports.SMART_EVENT_TYPE = 'smart';
|
|
18
18
|
var fireAnalyticsMentionTypeaheadEvent = exports.fireAnalyticsMentionTypeaheadEvent = function fireAnalyticsMentionTypeaheadEvent(props) {
|
|
@@ -20,6 +20,18 @@ export default class ContextMentionResource {
|
|
|
20
20
|
_defineProperty(this, "filter", this.callWithContextIds('filter', 1));
|
|
21
21
|
_defineProperty(this, "recordMentionSelection", this.callWithContextIds('recordMentionSelection', 1));
|
|
22
22
|
_defineProperty(this, "shouldHighlightMention", this.callDefault('shouldHighlightMention'));
|
|
23
|
+
_defineProperty(this, "getMentionDisabledState", mention => {
|
|
24
|
+
var _this$mentionProvider, _this$mentionProvider2;
|
|
25
|
+
return (_this$mentionProvider = (_this$mentionProvider2 = this.mentionProvider).getMentionDisabledState) === null || _this$mentionProvider === void 0 ? void 0 : _this$mentionProvider.call(_this$mentionProvider2, mention);
|
|
26
|
+
});
|
|
27
|
+
_defineProperty(this, "subscribeToDisabledStateChanges", listener => {
|
|
28
|
+
var _this$mentionProvider3, _this$mentionProvider4, _this$mentionProvider5;
|
|
29
|
+
return (_this$mentionProvider3 = (_this$mentionProvider4 = (_this$mentionProvider5 = this.mentionProvider).subscribeToDisabledStateChanges) === null || _this$mentionProvider4 === void 0 ? void 0 : _this$mentionProvider4.call(_this$mentionProvider5, listener)) !== null && _this$mentionProvider3 !== void 0 ? _this$mentionProvider3 : () => undefined;
|
|
30
|
+
});
|
|
31
|
+
_defineProperty(this, "notifyMentionDestroyed", mention => {
|
|
32
|
+
var _this$mentionProvider6, _this$mentionProvider7;
|
|
33
|
+
return (_this$mentionProvider6 = (_this$mentionProvider7 = this.mentionProvider).notifyMentionDestroyed) === null || _this$mentionProvider6 === void 0 ? void 0 : _this$mentionProvider6.call(_this$mentionProvider7, mention);
|
|
34
|
+
});
|
|
23
35
|
_defineProperty(this, "isFiltering", this.callDefault('isFiltering'));
|
|
24
36
|
this.mentionProvider = mentionProvider;
|
|
25
37
|
this.contextIdentifier = contextIdentifier;
|
|
@@ -156,6 +156,10 @@ export class MentionResource extends AbstractMentionResource {
|
|
|
156
156
|
}
|
|
157
157
|
return false;
|
|
158
158
|
}
|
|
159
|
+
getMentionDisabledState(mention) {
|
|
160
|
+
var _this$config$getMenti, _this$config;
|
|
161
|
+
return (_this$config$getMenti = (_this$config = this.config).getMentionDisabledState) === null || _this$config$getMenti === void 0 ? void 0 : _this$config$getMenti.call(_this$config, mention);
|
|
162
|
+
}
|
|
159
163
|
notify(searchTime, mentionResult, query) {
|
|
160
164
|
if (searchTime > this.lastReturnedSearch) {
|
|
161
165
|
this.lastReturnedSearch = searchTime;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
const AsyncDisabledMentionTooltip = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "@atlaskit-internal_@atlaskit/mention/disabled-mention-tooltip" */'./main').then(module => {
|
|
3
|
+
return {
|
|
4
|
+
default: module.DisabledMentionTooltip
|
|
5
|
+
};
|
|
6
|
+
}));
|
|
7
|
+
export default AsyncDisabledMentionTooltip;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import Tooltip from '@atlaskit/tooltip';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* Wraps a disabled `<Mention>` chip with a tooltip explaining why the chip
|
|
5
|
+
* is disabled. The chip itself remains non-interactive; the tooltip is the
|
|
6
|
+
* sole hover affordance.
|
|
7
|
+
*/
|
|
8
|
+
export const DisabledMentionTooltip = ({
|
|
9
|
+
tooltip,
|
|
10
|
+
children
|
|
11
|
+
}) => /*#__PURE__*/React.createElement(Tooltip, {
|
|
12
|
+
content: tooltip,
|
|
13
|
+
position: "top"
|
|
14
|
+
}, triggerProps => /*#__PURE__*/React.createElement("span", triggerProps, children));
|
|
@@ -29,6 +29,14 @@ const mentionStyle = {
|
|
|
29
29
|
text: "var(--ds-text-subtle, #505258)",
|
|
30
30
|
hoveredBackground: "var(--ds-background-neutral-hovered, #0B120E24)",
|
|
31
31
|
pressedBackground: "var(--ds-background-neutral-pressed, #080F214A)"
|
|
32
|
+
},
|
|
33
|
+
[MentionType.DISABLED]: {
|
|
34
|
+
background: "var(--ds-background-disabled, #0515240F)",
|
|
35
|
+
borderColor: 'transparent',
|
|
36
|
+
text: "var(--ds-text-disabled, #080F214A)",
|
|
37
|
+
// Disabled chips do not change on hover / press.
|
|
38
|
+
hoveredBackground: "var(--ds-background-disabled, #0515240F)",
|
|
39
|
+
pressedBackground: "var(--ds-background-disabled, #0515240F)"
|
|
32
40
|
}
|
|
33
41
|
};
|
|
34
42
|
const getStyle = ({
|
|
@@ -5,6 +5,7 @@ import FocusRing from '@atlaskit/focus-ring';
|
|
|
5
5
|
import MessagesIntlProvider from '../MessagesIntlProvider';
|
|
6
6
|
import PrimitiveMention from './PrimitiveMention';
|
|
7
7
|
import AsyncNoAccessTooltip from '../NoAccessTooltip';
|
|
8
|
+
import AsyncDisabledMentionTooltip from '../DisabledMentionTooltip';
|
|
8
9
|
import { isRestricted, MentionType } from '../../types';
|
|
9
10
|
import { fireAnalyticsMentionEvent } from '../../util/analytics';
|
|
10
11
|
import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
@@ -20,8 +21,13 @@ export class MentionInternal extends React.PureComponent {
|
|
|
20
21
|
const {
|
|
21
22
|
id,
|
|
22
23
|
text,
|
|
23
|
-
onClick
|
|
24
|
+
onClick,
|
|
25
|
+
isDisabled
|
|
24
26
|
} = this.props;
|
|
27
|
+
if (isDisabled) {
|
|
28
|
+
// Disabled chips do not invoke their click handler.
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
25
31
|
if (onClick) {
|
|
26
32
|
onClick(id, text, e);
|
|
27
33
|
}
|
|
@@ -59,8 +65,12 @@ export class MentionInternal extends React.PureComponent {
|
|
|
59
65
|
_defineProperty(this, "getMentionType", () => {
|
|
60
66
|
const {
|
|
61
67
|
accessLevel,
|
|
62
|
-
isHighlighted
|
|
68
|
+
isHighlighted,
|
|
69
|
+
isDisabled
|
|
63
70
|
} = this.props;
|
|
71
|
+
if (isDisabled) {
|
|
72
|
+
return MentionType.DISABLED;
|
|
73
|
+
}
|
|
64
74
|
if (isHighlighted) {
|
|
65
75
|
return MentionType.SELF;
|
|
66
76
|
}
|
|
@@ -101,12 +111,27 @@ export class MentionInternal extends React.PureComponent {
|
|
|
101
111
|
text,
|
|
102
112
|
id,
|
|
103
113
|
accessLevel,
|
|
104
|
-
localId
|
|
114
|
+
localId,
|
|
115
|
+
disabledTooltip
|
|
105
116
|
} = props;
|
|
106
117
|
const mentionType = this.getMentionType();
|
|
107
118
|
const failedMention = text === `@${UNKNOWN_USER_ID}`;
|
|
108
|
-
const
|
|
109
|
-
const
|
|
119
|
+
const showRestrictedTooltip = mentionType === MentionType.RESTRICTED;
|
|
120
|
+
const showDisabledTooltip = mentionType === MentionType.DISABLED && !!disabledTooltip;
|
|
121
|
+
|
|
122
|
+
// A11y: when the chip is in the disabled visual state, expose
|
|
123
|
+
// `aria-disabled` so assistive tech announces it as such. The
|
|
124
|
+
// disabled-tooltip text is mirrored into `aria-label` so the
|
|
125
|
+
// announcement carries the reason even without portal-id wiring for
|
|
126
|
+
// `aria-describedby`.
|
|
127
|
+
const isDisabledChip = mentionType === MentionType.DISABLED;
|
|
128
|
+
const disabledA11yProps = isDisabledChip ? {
|
|
129
|
+
'aria-disabled': true,
|
|
130
|
+
...(disabledTooltip ? {
|
|
131
|
+
'aria-label': `${text || '@...'} — ${disabledTooltip}`
|
|
132
|
+
} : {})
|
|
133
|
+
} : {};
|
|
134
|
+
const mentionComponent = /*#__PURE__*/React.createElement(FocusRing, null, /*#__PURE__*/React.createElement(PrimitiveMention, _extends({
|
|
110
135
|
mentionType: mentionType,
|
|
111
136
|
onClick: handleOnClick,
|
|
112
137
|
onMouseEnter: handleOnMouseEnter,
|
|
@@ -114,11 +139,28 @@ export class MentionInternal extends React.PureComponent {
|
|
|
114
139
|
spellCheck: false,
|
|
115
140
|
"data-testid": `mention-${id}`,
|
|
116
141
|
"data-mention-type": mentionType,
|
|
117
|
-
"data-mention-tooltip":
|
|
118
|
-
}, failedMention ? this.renderUnknownUserError(id) : text || '@...'));
|
|
142
|
+
"data-mention-tooltip": showRestrictedTooltip || showDisabledTooltip
|
|
143
|
+
}, disabledA11yProps), failedMention ? this.renderUnknownUserError(id) : text || '@...'));
|
|
119
144
|
const ssrPlaceholderProp = props.ssrPlaceholderId ? {
|
|
120
145
|
'data-ssr-placeholder': props.ssrPlaceholderId
|
|
121
146
|
} : {};
|
|
147
|
+
const wrappedMention = (() => {
|
|
148
|
+
if (showRestrictedTooltip) {
|
|
149
|
+
return /*#__PURE__*/React.createElement(React.Suspense, {
|
|
150
|
+
fallback: mentionComponent
|
|
151
|
+
}, /*#__PURE__*/React.createElement(AsyncNoAccessTooltip, {
|
|
152
|
+
name: text
|
|
153
|
+
}, mentionComponent));
|
|
154
|
+
}
|
|
155
|
+
if (showDisabledTooltip) {
|
|
156
|
+
return /*#__PURE__*/React.createElement(React.Suspense, {
|
|
157
|
+
fallback: mentionComponent
|
|
158
|
+
}, /*#__PURE__*/React.createElement(AsyncDisabledMentionTooltip, {
|
|
159
|
+
tooltip: disabledTooltip
|
|
160
|
+
}, mentionComponent));
|
|
161
|
+
}
|
|
162
|
+
return mentionComponent;
|
|
163
|
+
})();
|
|
122
164
|
return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
|
|
123
165
|
id: id
|
|
124
166
|
}, /*#__PURE__*/React.createElement("span", _extends({
|
|
@@ -127,11 +169,7 @@ export class MentionInternal extends React.PureComponent {
|
|
|
127
169
|
"data-local-id": localId,
|
|
128
170
|
"data-access-level": accessLevel,
|
|
129
171
|
spellCheck: false
|
|
130
|
-
}, ssrPlaceholderProp), /*#__PURE__*/React.createElement(MessagesIntlProvider, null,
|
|
131
|
-
fallback: mentionComponent
|
|
132
|
-
}, /*#__PURE__*/React.createElement(AsyncNoAccessTooltip, {
|
|
133
|
-
name: text
|
|
134
|
-
}, mentionComponent)) : mentionComponent)));
|
|
172
|
+
}, ssrPlaceholderProp), /*#__PURE__*/React.createElement(MessagesIntlProvider, null, wrappedMention)));
|
|
135
173
|
}
|
|
136
174
|
}
|
|
137
175
|
const MentionWithAnalytics = withAnalyticsEvents({
|
package/dist/es2019/types.js
CHANGED
|
@@ -6,12 +6,24 @@
|
|
|
6
6
|
* and `refreshedSecurityProvider` fields.
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
+
/**
|
|
10
|
+
* Describes whether a mention should be rendered in its disabled visual
|
|
11
|
+
* state and what tooltip (if any) should be shown on hover.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* The minimal input shape used by `getMentionDisabledState`. Kept as a named
|
|
16
|
+
* type so the config callback and the provider method share the same input
|
|
17
|
+
* surface, and so callers do not have to fabricate fields they do not have.
|
|
18
|
+
*/
|
|
19
|
+
|
|
9
20
|
// data is returned from team search service
|
|
10
21
|
|
|
11
22
|
export let MentionType = /*#__PURE__*/function (MentionType) {
|
|
12
23
|
MentionType[MentionType["SELF"] = 0] = "SELF";
|
|
13
24
|
MentionType[MentionType["RESTRICTED"] = 1] = "RESTRICTED";
|
|
14
25
|
MentionType[MentionType["DEFAULT"] = 2] = "DEFAULT";
|
|
26
|
+
MentionType[MentionType["DISABLED"] = 3] = "DISABLED";
|
|
15
27
|
return MentionType;
|
|
16
28
|
}({});
|
|
17
29
|
export let UserAccessLevel = /*#__PURE__*/function (UserAccessLevel) {
|
|
@@ -2,7 +2,7 @@ import { OPERATIONAL_EVENT_TYPE, UI_EVENT_TYPE } from '@atlaskit/analytics-gas-t
|
|
|
2
2
|
import { ELEMENTS_CHANNEL } from '../_constants';
|
|
3
3
|
import { ComponentNames, isSpecialMentionText } from '../types';
|
|
4
4
|
const packageName = "@atlaskit/mention";
|
|
5
|
-
const packageVersion = "26.0
|
|
5
|
+
const packageVersion = "26.1.0";
|
|
6
6
|
export const SLI_EVENT_TYPE = 'sli';
|
|
7
7
|
export const SMART_EVENT_TYPE = 'smart';
|
|
8
8
|
export const fireAnalyticsMentionTypeaheadEvent = props => (action, duration, userIds = [], query) => {
|
|
@@ -36,6 +36,20 @@ var ContextMentionResource = /*#__PURE__*/function () {
|
|
|
36
36
|
_defineProperty(this, "filter", this.callWithContextIds('filter', 1));
|
|
37
37
|
_defineProperty(this, "recordMentionSelection", this.callWithContextIds('recordMentionSelection', 1));
|
|
38
38
|
_defineProperty(this, "shouldHighlightMention", this.callDefault('shouldHighlightMention'));
|
|
39
|
+
_defineProperty(this, "getMentionDisabledState", function (mention) {
|
|
40
|
+
var _this$mentionProvider3, _this$mentionProvider4;
|
|
41
|
+
return (_this$mentionProvider3 = (_this$mentionProvider4 = _this.mentionProvider).getMentionDisabledState) === null || _this$mentionProvider3 === void 0 ? void 0 : _this$mentionProvider3.call(_this$mentionProvider4, mention);
|
|
42
|
+
});
|
|
43
|
+
_defineProperty(this, "subscribeToDisabledStateChanges", function (listener) {
|
|
44
|
+
var _this$mentionProvider5, _this$mentionProvider6, _this$mentionProvider7;
|
|
45
|
+
return (_this$mentionProvider5 = (_this$mentionProvider6 = (_this$mentionProvider7 = _this.mentionProvider).subscribeToDisabledStateChanges) === null || _this$mentionProvider6 === void 0 ? void 0 : _this$mentionProvider6.call(_this$mentionProvider7, listener)) !== null && _this$mentionProvider5 !== void 0 ? _this$mentionProvider5 : function () {
|
|
46
|
+
return undefined;
|
|
47
|
+
};
|
|
48
|
+
});
|
|
49
|
+
_defineProperty(this, "notifyMentionDestroyed", function (mention) {
|
|
50
|
+
var _this$mentionProvider8, _this$mentionProvider9;
|
|
51
|
+
return (_this$mentionProvider8 = (_this$mentionProvider9 = _this.mentionProvider).notifyMentionDestroyed) === null || _this$mentionProvider8 === void 0 ? void 0 : _this$mentionProvider8.call(_this$mentionProvider9, mention);
|
|
52
|
+
});
|
|
39
53
|
_defineProperty(this, "isFiltering", this.callDefault('isFiltering'));
|
|
40
54
|
this.mentionProvider = mentionProvider;
|
|
41
55
|
this.contextIdentifier = contextIdentifier;
|
|
@@ -203,6 +203,12 @@ export var MentionResource = /*#__PURE__*/function (_AbstractMentionResou) {
|
|
|
203
203
|
}
|
|
204
204
|
return false;
|
|
205
205
|
}
|
|
206
|
+
}, {
|
|
207
|
+
key: "getMentionDisabledState",
|
|
208
|
+
value: function getMentionDisabledState(mention) {
|
|
209
|
+
var _this$config$getMenti, _this$config;
|
|
210
|
+
return (_this$config$getMenti = (_this$config = this.config).getMentionDisabledState) === null || _this$config$getMenti === void 0 ? void 0 : _this$config$getMenti.call(_this$config, mention);
|
|
211
|
+
}
|
|
206
212
|
}, {
|
|
207
213
|
key: "notify",
|
|
208
214
|
value: function notify(searchTime, mentionResult, query) {
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
var AsyncDisabledMentionTooltip = /*#__PURE__*/React.lazy(function () {
|
|
3
|
+
return import( /* webpackChunkName: "@atlaskit-internal_@atlaskit/mention/disabled-mention-tooltip" */'./main').then(function (module) {
|
|
4
|
+
return {
|
|
5
|
+
default: module.DisabledMentionTooltip
|
|
6
|
+
};
|
|
7
|
+
});
|
|
8
|
+
});
|
|
9
|
+
export default AsyncDisabledMentionTooltip;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import Tooltip from '@atlaskit/tooltip';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* Wraps a disabled `<Mention>` chip with a tooltip explaining why the chip
|
|
5
|
+
* is disabled. The chip itself remains non-interactive; the tooltip is the
|
|
6
|
+
* sole hover affordance.
|
|
7
|
+
*/
|
|
8
|
+
export var DisabledMentionTooltip = function DisabledMentionTooltip(_ref) {
|
|
9
|
+
var tooltip = _ref.tooltip,
|
|
10
|
+
children = _ref.children;
|
|
11
|
+
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
12
|
+
content: tooltip,
|
|
13
|
+
position: "top"
|
|
14
|
+
}, function (triggerProps) {
|
|
15
|
+
return /*#__PURE__*/React.createElement("span", triggerProps, children);
|
|
16
|
+
});
|
|
17
|
+
};
|
|
@@ -13,7 +13,7 @@ var _excluded = ["mentionType"];
|
|
|
13
13
|
import { jsx, css } from '@emotion/react';
|
|
14
14
|
import { MentionType } from '../../types';
|
|
15
15
|
import { forwardRef } from 'react';
|
|
16
|
-
var mentionStyle = _defineProperty(_defineProperty(_defineProperty({}, MentionType.SELF, {
|
|
16
|
+
var mentionStyle = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, MentionType.SELF, {
|
|
17
17
|
background: "var(--ds-background-brand-bold, #1868DB)",
|
|
18
18
|
borderColor: 'transparent',
|
|
19
19
|
text: "var(--ds-text-inverse, #FFFFFF)",
|
|
@@ -31,6 +31,13 @@ var mentionStyle = _defineProperty(_defineProperty(_defineProperty({}, MentionTy
|
|
|
31
31
|
text: "var(--ds-text-subtle, #505258)",
|
|
32
32
|
hoveredBackground: "var(--ds-background-neutral-hovered, #0B120E24)",
|
|
33
33
|
pressedBackground: "var(--ds-background-neutral-pressed, #080F214A)"
|
|
34
|
+
}), MentionType.DISABLED, {
|
|
35
|
+
background: "var(--ds-background-disabled, #0515240F)",
|
|
36
|
+
borderColor: 'transparent',
|
|
37
|
+
text: "var(--ds-text-disabled, #080F214A)",
|
|
38
|
+
// Disabled chips do not change on hover / press.
|
|
39
|
+
hoveredBackground: "var(--ds-background-disabled, #0515240F)",
|
|
40
|
+
pressedBackground: "var(--ds-background-disabled, #0515240F)"
|
|
34
41
|
});
|
|
35
42
|
var getStyle = function getStyle(_ref, property) {
|
|
36
43
|
var mentionType = _ref.mentionType;
|
|
@@ -5,6 +5,8 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
|
|
|
5
5
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
6
6
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
7
7
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
9
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
8
10
|
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
9
11
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
10
12
|
import React from 'react';
|
|
@@ -12,6 +14,7 @@ import FocusRing from '@atlaskit/focus-ring';
|
|
|
12
14
|
import MessagesIntlProvider from '../MessagesIntlProvider';
|
|
13
15
|
import PrimitiveMention from './PrimitiveMention';
|
|
14
16
|
import AsyncNoAccessTooltip from '../NoAccessTooltip';
|
|
17
|
+
import AsyncDisabledMentionTooltip from '../DisabledMentionTooltip';
|
|
15
18
|
import { isRestricted, MentionType } from '../../types';
|
|
16
19
|
import { fireAnalyticsMentionEvent } from '../../util/analytics';
|
|
17
20
|
import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
@@ -29,7 +32,12 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
29
32
|
var _this$props = _this.props,
|
|
30
33
|
id = _this$props.id,
|
|
31
34
|
text = _this$props.text,
|
|
32
|
-
onClick = _this$props.onClick
|
|
35
|
+
onClick = _this$props.onClick,
|
|
36
|
+
isDisabled = _this$props.isDisabled;
|
|
37
|
+
if (isDisabled) {
|
|
38
|
+
// Disabled chips do not invoke their click handler.
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
33
41
|
if (onClick) {
|
|
34
42
|
onClick(id, text, e);
|
|
35
43
|
}
|
|
@@ -65,7 +73,11 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
65
73
|
_defineProperty(_this, "getMentionType", function () {
|
|
66
74
|
var _this$props4 = _this.props,
|
|
67
75
|
accessLevel = _this$props4.accessLevel,
|
|
68
|
-
isHighlighted = _this$props4.isHighlighted
|
|
76
|
+
isHighlighted = _this$props4.isHighlighted,
|
|
77
|
+
isDisabled = _this$props4.isDisabled;
|
|
78
|
+
if (isDisabled) {
|
|
79
|
+
return MentionType.DISABLED;
|
|
80
|
+
}
|
|
69
81
|
if (isHighlighted) {
|
|
70
82
|
return MentionType.SELF;
|
|
71
83
|
}
|
|
@@ -115,11 +127,25 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
115
127
|
var text = props.text,
|
|
116
128
|
id = props.id,
|
|
117
129
|
accessLevel = props.accessLevel,
|
|
118
|
-
localId = props.localId
|
|
130
|
+
localId = props.localId,
|
|
131
|
+
disabledTooltip = props.disabledTooltip;
|
|
119
132
|
var mentionType = this.getMentionType();
|
|
120
133
|
var failedMention = text === "@".concat(UNKNOWN_USER_ID);
|
|
121
|
-
var
|
|
122
|
-
var
|
|
134
|
+
var showRestrictedTooltip = mentionType === MentionType.RESTRICTED;
|
|
135
|
+
var showDisabledTooltip = mentionType === MentionType.DISABLED && !!disabledTooltip;
|
|
136
|
+
|
|
137
|
+
// A11y: when the chip is in the disabled visual state, expose
|
|
138
|
+
// `aria-disabled` so assistive tech announces it as such. The
|
|
139
|
+
// disabled-tooltip text is mirrored into `aria-label` so the
|
|
140
|
+
// announcement carries the reason even without portal-id wiring for
|
|
141
|
+
// `aria-describedby`.
|
|
142
|
+
var isDisabledChip = mentionType === MentionType.DISABLED;
|
|
143
|
+
var disabledA11yProps = isDisabledChip ? _objectSpread({
|
|
144
|
+
'aria-disabled': true
|
|
145
|
+
}, disabledTooltip ? {
|
|
146
|
+
'aria-label': "".concat(text || '@...', " \u2014 ").concat(disabledTooltip)
|
|
147
|
+
} : {}) : {};
|
|
148
|
+
var mentionComponent = /*#__PURE__*/React.createElement(FocusRing, null, /*#__PURE__*/React.createElement(PrimitiveMention, _extends({
|
|
123
149
|
mentionType: mentionType,
|
|
124
150
|
onClick: handleOnClick,
|
|
125
151
|
onMouseEnter: handleOnMouseEnter,
|
|
@@ -127,11 +153,28 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
127
153
|
spellCheck: false,
|
|
128
154
|
"data-testid": "mention-".concat(id),
|
|
129
155
|
"data-mention-type": mentionType,
|
|
130
|
-
"data-mention-tooltip":
|
|
131
|
-
}, failedMention ? this.renderUnknownUserError(id) : text || '@...'));
|
|
156
|
+
"data-mention-tooltip": showRestrictedTooltip || showDisabledTooltip
|
|
157
|
+
}, disabledA11yProps), failedMention ? this.renderUnknownUserError(id) : text || '@...'));
|
|
132
158
|
var ssrPlaceholderProp = props.ssrPlaceholderId ? {
|
|
133
159
|
'data-ssr-placeholder': props.ssrPlaceholderId
|
|
134
160
|
} : {};
|
|
161
|
+
var wrappedMention = function () {
|
|
162
|
+
if (showRestrictedTooltip) {
|
|
163
|
+
return /*#__PURE__*/React.createElement(React.Suspense, {
|
|
164
|
+
fallback: mentionComponent
|
|
165
|
+
}, /*#__PURE__*/React.createElement(AsyncNoAccessTooltip, {
|
|
166
|
+
name: text
|
|
167
|
+
}, mentionComponent));
|
|
168
|
+
}
|
|
169
|
+
if (showDisabledTooltip) {
|
|
170
|
+
return /*#__PURE__*/React.createElement(React.Suspense, {
|
|
171
|
+
fallback: mentionComponent
|
|
172
|
+
}, /*#__PURE__*/React.createElement(AsyncDisabledMentionTooltip, {
|
|
173
|
+
tooltip: disabledTooltip
|
|
174
|
+
}, mentionComponent));
|
|
175
|
+
}
|
|
176
|
+
return mentionComponent;
|
|
177
|
+
}();
|
|
135
178
|
return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
|
|
136
179
|
id: id
|
|
137
180
|
}, /*#__PURE__*/React.createElement("span", _extends({
|
|
@@ -140,11 +183,7 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
140
183
|
"data-local-id": localId,
|
|
141
184
|
"data-access-level": accessLevel,
|
|
142
185
|
spellCheck: false
|
|
143
|
-
}, ssrPlaceholderProp), /*#__PURE__*/React.createElement(MessagesIntlProvider, null,
|
|
144
|
-
fallback: mentionComponent
|
|
145
|
-
}, /*#__PURE__*/React.createElement(AsyncNoAccessTooltip, {
|
|
146
|
-
name: text
|
|
147
|
-
}, mentionComponent)) : mentionComponent)));
|
|
186
|
+
}, ssrPlaceholderProp), /*#__PURE__*/React.createElement(MessagesIntlProvider, null, wrappedMention)));
|
|
148
187
|
}
|
|
149
188
|
}]);
|
|
150
189
|
}(React.PureComponent);
|
package/dist/esm/types.js
CHANGED
|
@@ -6,12 +6,24 @@
|
|
|
6
6
|
* and `refreshedSecurityProvider` fields.
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
+
/**
|
|
10
|
+
* Describes whether a mention should be rendered in its disabled visual
|
|
11
|
+
* state and what tooltip (if any) should be shown on hover.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* The minimal input shape used by `getMentionDisabledState`. Kept as a named
|
|
16
|
+
* type so the config callback and the provider method share the same input
|
|
17
|
+
* surface, and so callers do not have to fabricate fields they do not have.
|
|
18
|
+
*/
|
|
19
|
+
|
|
9
20
|
// data is returned from team search service
|
|
10
21
|
|
|
11
22
|
export var MentionType = /*#__PURE__*/function (MentionType) {
|
|
12
23
|
MentionType[MentionType["SELF"] = 0] = "SELF";
|
|
13
24
|
MentionType[MentionType["RESTRICTED"] = 1] = "RESTRICTED";
|
|
14
25
|
MentionType[MentionType["DEFAULT"] = 2] = "DEFAULT";
|
|
26
|
+
MentionType[MentionType["DISABLED"] = 3] = "DISABLED";
|
|
15
27
|
return MentionType;
|
|
16
28
|
}({});
|
|
17
29
|
export var UserAccessLevel = /*#__PURE__*/function (UserAccessLevel) {
|
|
@@ -5,7 +5,7 @@ import { OPERATIONAL_EVENT_TYPE, UI_EVENT_TYPE } from '@atlaskit/analytics-gas-t
|
|
|
5
5
|
import { ELEMENTS_CHANNEL } from '../_constants';
|
|
6
6
|
import { ComponentNames, isSpecialMentionText } from '../types';
|
|
7
7
|
var packageName = "@atlaskit/mention";
|
|
8
|
-
var packageVersion = "26.0
|
|
8
|
+
var packageVersion = "26.1.0";
|
|
9
9
|
export var SLI_EVENT_TYPE = 'sli';
|
|
10
10
|
export var SMART_EVENT_TYPE = 'smart';
|
|
11
11
|
export var fireAnalyticsMentionTypeaheadEvent = function fireAnalyticsMentionTypeaheadEvent(props) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type MentionProvider, type MentionContextIdentifier, ErrorCallback, InfoCallback, ResultCallback } from './MentionResource';
|
|
2
|
-
import { type MentionDescription, type InviteFromMentionProvider, type XProductInviteMentionProvider, type AnalyticsCallback } from '../types';
|
|
2
|
+
import { type MentionDescription, type MentionDisabledState, type MentionDisabledStateInput, type InviteFromMentionProvider, type XProductInviteMentionProvider, type AnalyticsCallback } from '../types';
|
|
3
3
|
export type { MentionDescription };
|
|
4
4
|
export type MentionProviderFunctions = Omit<{
|
|
5
5
|
[Key in keyof MentionProvider]: MentionProvider[Key] extends Function ? MentionProvider[Key] : never;
|
|
@@ -19,5 +19,10 @@ export default class ContextMentionResource implements MentionProvider {
|
|
|
19
19
|
filter: (query?: string, contextIdentifier?: MentionContextIdentifier) => void;
|
|
20
20
|
recordMentionSelection: (mention: MentionDescription, contextIdentifier?: MentionContextIdentifier) => void;
|
|
21
21
|
shouldHighlightMention: (mention: MentionDescription) => boolean;
|
|
22
|
+
getMentionDisabledState: (mention: MentionDisabledStateInput) => MentionDisabledState | undefined;
|
|
23
|
+
subscribeToDisabledStateChanges: (listener: () => void) => (() => void);
|
|
24
|
+
notifyMentionDestroyed: (mention: {
|
|
25
|
+
id: string;
|
|
26
|
+
}) => void;
|
|
22
27
|
isFiltering: (query: string) => boolean;
|
|
23
28
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type AnalyticsCallback, type ErrorCallback, type InfoCallback, type InviteFlow, type MentionContextIdentifier, type MentionDescription, type MentionNameDetails, type MentionProvider, type MentionResourceConfig, type MentionsResult, type MentionStats, type ResourceProvider, type ResultCallback, type UserRole } from '../types';
|
|
1
|
+
import { type AnalyticsCallback, type ErrorCallback, type InfoCallback, type InviteFlow, type MentionContextIdentifier, type MentionDescription, type MentionDisabledState, type MentionDisabledStateInput, type MentionNameDetails, type MentionProvider, type MentionResourceConfig, type MentionsResult, type MentionStats, type ResourceProvider, type ResultCallback, type UserRole } from '../types';
|
|
2
2
|
export type { MentionStats, ResultCallback, ErrorCallback, InfoCallback, MentionResourceConfig, ResourceProvider, MentionContextIdentifier, MentionProvider, } from '../types';
|
|
3
3
|
/**
|
|
4
4
|
* Configuration for the TeamMentionResource, which extends {@link MentionResourceConfig}
|
|
@@ -62,6 +62,7 @@ export declare class MentionResource extends AbstractMentionResource implements
|
|
|
62
62
|
inviteXProductUser?: (userId: string, mentionName: string) => Promise<void>;
|
|
63
63
|
constructor(config: MentionResourceConfig);
|
|
64
64
|
shouldHighlightMention(mention: MentionDescription): boolean;
|
|
65
|
+
getMentionDisabledState(mention: MentionDisabledStateInput): MentionDisabledState | undefined;
|
|
65
66
|
notify(searchTime: number, mentionResult: MentionsResult, query?: string): void;
|
|
66
67
|
notifyError(error: Error, query?: string): void;
|
|
67
68
|
filter(query?: string, contextIdentifier?: MentionContextIdentifier): Promise<void>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
type Props = {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
tooltip: string;
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* Wraps a disabled `<Mention>` chip with a tooltip explaining why the chip
|
|
8
|
+
* is disabled. The chip itself remains non-interactive; the tooltip is the
|
|
9
|
+
* sole hover affordance.
|
|
10
|
+
*/
|
|
11
|
+
export declare const DisabledMentionTooltip: ({ tooltip, children }: Props) => React.JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -5,7 +5,19 @@ export declare const ANALYTICS_HOVER_DELAY = 1000;
|
|
|
5
5
|
export declare const UNKNOWN_USER_ID = "_|unknown|_";
|
|
6
6
|
export type OwnProps = {
|
|
7
7
|
accessLevel?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Tooltip text shown on hover when the chip is disabled. Ignored when
|
|
10
|
+
* `isDisabled` is false. When omitted, no tooltip is rendered even if
|
|
11
|
+
* `isDisabled` is true.
|
|
12
|
+
*/
|
|
13
|
+
disabledTooltip?: string;
|
|
8
14
|
id: string;
|
|
15
|
+
/**
|
|
16
|
+
* When true, the mention chip is rendered in its disabled visual state
|
|
17
|
+
* (`MentionType.DISABLED`) and click handlers are not invoked. Takes
|
|
18
|
+
* precedence over `isHighlighted` and the restricted state.
|
|
19
|
+
*/
|
|
20
|
+
isDisabled?: boolean;
|
|
9
21
|
isHighlighted?: boolean;
|
|
10
22
|
localId?: string;
|
|
11
23
|
onClick?: MentionEventHandler;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -39,6 +39,24 @@ export interface MentionResourceConfig extends ServiceConfig {
|
|
|
39
39
|
* calls to `filter` will be debounced to reduce the number of network requests.
|
|
40
40
|
*/
|
|
41
41
|
debounceTime?: number;
|
|
42
|
+
/**
|
|
43
|
+
* A function to determine whether a given mention should be rendered in
|
|
44
|
+
* its disabled visual state (`MentionType.DISABLED`), and what tooltip
|
|
45
|
+
* (if any) to display when the disabled chip is hovered.
|
|
46
|
+
*
|
|
47
|
+
* Returning `{ disabled: false }` (or `undefined`) leaves the mention in
|
|
48
|
+
* whatever state the other predicates resolve to.
|
|
49
|
+
*
|
|
50
|
+
* The input deliberately exposes only the mention's `id` because the
|
|
51
|
+
* canonical caller (the editor mentions `NodeView`) does not have the
|
|
52
|
+
* full `MentionDescription` in scope. Implementations should look the
|
|
53
|
+
* additional context they need (e.g. agent metadata) up via the `id`.
|
|
54
|
+
*
|
|
55
|
+
* @param mention - The minimal mention identifier to evaluate.
|
|
56
|
+
* @returns `{ disabled, tooltip? }` describing the disabled visual state,
|
|
57
|
+
* or `undefined` to leave it unchanged.
|
|
58
|
+
*/
|
|
59
|
+
getMentionDisabledState?: (mention: MentionDisabledStateInput) => MentionDisabledState | undefined;
|
|
42
60
|
/**
|
|
43
61
|
* Custom HTTP headers to include in mention service requests.
|
|
44
62
|
*/
|
|
@@ -94,6 +112,22 @@ export interface MentionResourceConfig extends ServiceConfig {
|
|
|
94
112
|
*/
|
|
95
113
|
userRole?: UserRole;
|
|
96
114
|
}
|
|
115
|
+
/**
|
|
116
|
+
* Describes whether a mention should be rendered in its disabled visual
|
|
117
|
+
* state and what tooltip (if any) should be shown on hover.
|
|
118
|
+
*/
|
|
119
|
+
export interface MentionDisabledState {
|
|
120
|
+
disabled: boolean;
|
|
121
|
+
tooltip?: string;
|
|
122
|
+
}
|
|
123
|
+
/**
|
|
124
|
+
* The minimal input shape used by `getMentionDisabledState`. Kept as a named
|
|
125
|
+
* type so the config callback and the provider method share the same input
|
|
126
|
+
* surface, and so callers do not have to fabricate fields they do not have.
|
|
127
|
+
*/
|
|
128
|
+
export interface MentionDisabledStateInput {
|
|
129
|
+
id: string;
|
|
130
|
+
}
|
|
97
131
|
export interface ResourceProvider<Result> {
|
|
98
132
|
/**
|
|
99
133
|
* Subscribe to ResourceProvider results
|
|
@@ -119,9 +153,40 @@ export type MentionContextIdentifier = {
|
|
|
119
153
|
};
|
|
120
154
|
export interface MentionProvider extends ResourceProvider<MentionDescription[]>, InviteFromMentionProvider, XProductInviteMentionProvider {
|
|
121
155
|
filter(query?: string, contextIdentifier?: MentionContextIdentifier): void;
|
|
156
|
+
/**
|
|
157
|
+
* Optional. When implemented, lets the rendering surface ask whether a
|
|
158
|
+
* mention should be displayed in its disabled visual state, and what
|
|
159
|
+
* tooltip to surface on hover. Returning `undefined` (or omitting the
|
|
160
|
+
* method entirely) is equivalent to "not disabled".
|
|
161
|
+
*/
|
|
162
|
+
getMentionDisabledState?(mention: MentionDisabledStateInput): MentionDisabledState | undefined;
|
|
122
163
|
isFiltering(query: string): boolean;
|
|
164
|
+
/**
|
|
165
|
+
* Optional. Called by the rendering surface (e.g. the editor NodeView)
|
|
166
|
+
* when a mention chip is destroyed (removed from the doc). This is the
|
|
167
|
+
* lowest-level deletion signal — it fires regardless of how the chip was
|
|
168
|
+
* removed (backspace, select-and-delete, programmatic replace, …) and
|
|
169
|
+
* does not depend on the editor's debounced `onChange` callback.
|
|
170
|
+
*
|
|
171
|
+
* Implementations typically forward the call to consumers via the chat
|
|
172
|
+
* layer so they can react (e.g. update `selectedAgentIds`).
|
|
173
|
+
*/
|
|
174
|
+
notifyMentionDestroyed?(mention: {
|
|
175
|
+
id: string;
|
|
176
|
+
}): void;
|
|
123
177
|
recordMentionSelection(mention: MentionDescription, contextIdentifier?: MentionContextIdentifier): void;
|
|
124
178
|
shouldHighlightMention(mention: MentionDescription): boolean;
|
|
179
|
+
/**
|
|
180
|
+
* Optional. When implemented, lets the rendering surface subscribe to
|
|
181
|
+
* changes in the disabled-state predicate so already-rendered chips can
|
|
182
|
+
* re-evaluate themselves when the external state that drives
|
|
183
|
+
* `getMentionDisabledState` changes (e.g. the active agent selection in
|
|
184
|
+
* Rovo Chat). Implementations should invoke the listener after their
|
|
185
|
+
* own state changes.
|
|
186
|
+
*
|
|
187
|
+
* Returns an unsubscribe function. Callers MUST invoke it on teardown.
|
|
188
|
+
*/
|
|
189
|
+
subscribeToDisabledStateChanges?(listener: () => void): () => void;
|
|
125
190
|
}
|
|
126
191
|
export interface HighlightDetail {
|
|
127
192
|
end: number;
|
|
@@ -188,7 +253,8 @@ export interface OnMentionEvent {
|
|
|
188
253
|
export declare enum MentionType {
|
|
189
254
|
SELF = 0,
|
|
190
255
|
RESTRICTED = 1,
|
|
191
|
-
DEFAULT = 2
|
|
256
|
+
DEFAULT = 2,
|
|
257
|
+
DISABLED = 3
|
|
192
258
|
}
|
|
193
259
|
export declare enum UserAccessLevel {
|
|
194
260
|
NONE = 0,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type MentionProvider, type MentionContextIdentifier, ErrorCallback, InfoCallback, ResultCallback } from './MentionResource';
|
|
2
|
-
import { type MentionDescription, type InviteFromMentionProvider, type XProductInviteMentionProvider, type AnalyticsCallback } from '../types';
|
|
2
|
+
import { type MentionDescription, type MentionDisabledState, type MentionDisabledStateInput, type InviteFromMentionProvider, type XProductInviteMentionProvider, type AnalyticsCallback } from '../types';
|
|
3
3
|
export type { MentionDescription };
|
|
4
4
|
export type MentionProviderFunctions = Omit<{
|
|
5
5
|
[Key in keyof MentionProvider]: MentionProvider[Key] extends Function ? MentionProvider[Key] : never;
|
|
@@ -19,5 +19,10 @@ export default class ContextMentionResource implements MentionProvider {
|
|
|
19
19
|
filter: (query?: string, contextIdentifier?: MentionContextIdentifier) => void;
|
|
20
20
|
recordMentionSelection: (mention: MentionDescription, contextIdentifier?: MentionContextIdentifier) => void;
|
|
21
21
|
shouldHighlightMention: (mention: MentionDescription) => boolean;
|
|
22
|
+
getMentionDisabledState: (mention: MentionDisabledStateInput) => MentionDisabledState | undefined;
|
|
23
|
+
subscribeToDisabledStateChanges: (listener: () => void) => (() => void);
|
|
24
|
+
notifyMentionDestroyed: (mention: {
|
|
25
|
+
id: string;
|
|
26
|
+
}) => void;
|
|
22
27
|
isFiltering: (query: string) => boolean;
|
|
23
28
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type AnalyticsCallback, type ErrorCallback, type InfoCallback, type InviteFlow, type MentionContextIdentifier, type MentionDescription, type MentionNameDetails, type MentionProvider, type MentionResourceConfig, type MentionsResult, type MentionStats, type ResourceProvider, type ResultCallback, type UserRole } from '../types';
|
|
1
|
+
import { type AnalyticsCallback, type ErrorCallback, type InfoCallback, type InviteFlow, type MentionContextIdentifier, type MentionDescription, type MentionDisabledState, type MentionDisabledStateInput, type MentionNameDetails, type MentionProvider, type MentionResourceConfig, type MentionsResult, type MentionStats, type ResourceProvider, type ResultCallback, type UserRole } from '../types';
|
|
2
2
|
export type { MentionStats, ResultCallback, ErrorCallback, InfoCallback, MentionResourceConfig, ResourceProvider, MentionContextIdentifier, MentionProvider, } from '../types';
|
|
3
3
|
/**
|
|
4
4
|
* Configuration for the TeamMentionResource, which extends {@link MentionResourceConfig}
|
|
@@ -62,6 +62,7 @@ export declare class MentionResource extends AbstractMentionResource implements
|
|
|
62
62
|
inviteXProductUser?: (userId: string, mentionName: string) => Promise<void>;
|
|
63
63
|
constructor(config: MentionResourceConfig);
|
|
64
64
|
shouldHighlightMention(mention: MentionDescription): boolean;
|
|
65
|
+
getMentionDisabledState(mention: MentionDisabledStateInput): MentionDisabledState | undefined;
|
|
65
66
|
notify(searchTime: number, mentionResult: MentionsResult, query?: string): void;
|
|
66
67
|
notifyError(error: Error, query?: string): void;
|
|
67
68
|
filter(query?: string, contextIdentifier?: MentionContextIdentifier): Promise<void>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
type Props = {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
tooltip: string;
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* Wraps a disabled `<Mention>` chip with a tooltip explaining why the chip
|
|
8
|
+
* is disabled. The chip itself remains non-interactive; the tooltip is the
|
|
9
|
+
* sole hover affordance.
|
|
10
|
+
*/
|
|
11
|
+
export declare const DisabledMentionTooltip: ({ tooltip, children }: Props) => React.JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -5,7 +5,19 @@ export declare const ANALYTICS_HOVER_DELAY = 1000;
|
|
|
5
5
|
export declare const UNKNOWN_USER_ID = "_|unknown|_";
|
|
6
6
|
export type OwnProps = {
|
|
7
7
|
accessLevel?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Tooltip text shown on hover when the chip is disabled. Ignored when
|
|
10
|
+
* `isDisabled` is false. When omitted, no tooltip is rendered even if
|
|
11
|
+
* `isDisabled` is true.
|
|
12
|
+
*/
|
|
13
|
+
disabledTooltip?: string;
|
|
8
14
|
id: string;
|
|
15
|
+
/**
|
|
16
|
+
* When true, the mention chip is rendered in its disabled visual state
|
|
17
|
+
* (`MentionType.DISABLED`) and click handlers are not invoked. Takes
|
|
18
|
+
* precedence over `isHighlighted` and the restricted state.
|
|
19
|
+
*/
|
|
20
|
+
isDisabled?: boolean;
|
|
9
21
|
isHighlighted?: boolean;
|
|
10
22
|
localId?: string;
|
|
11
23
|
onClick?: MentionEventHandler;
|
|
@@ -39,6 +39,24 @@ export interface MentionResourceConfig extends ServiceConfig {
|
|
|
39
39
|
* calls to `filter` will be debounced to reduce the number of network requests.
|
|
40
40
|
*/
|
|
41
41
|
debounceTime?: number;
|
|
42
|
+
/**
|
|
43
|
+
* A function to determine whether a given mention should be rendered in
|
|
44
|
+
* its disabled visual state (`MentionType.DISABLED`), and what tooltip
|
|
45
|
+
* (if any) to display when the disabled chip is hovered.
|
|
46
|
+
*
|
|
47
|
+
* Returning `{ disabled: false }` (or `undefined`) leaves the mention in
|
|
48
|
+
* whatever state the other predicates resolve to.
|
|
49
|
+
*
|
|
50
|
+
* The input deliberately exposes only the mention's `id` because the
|
|
51
|
+
* canonical caller (the editor mentions `NodeView`) does not have the
|
|
52
|
+
* full `MentionDescription` in scope. Implementations should look the
|
|
53
|
+
* additional context they need (e.g. agent metadata) up via the `id`.
|
|
54
|
+
*
|
|
55
|
+
* @param mention - The minimal mention identifier to evaluate.
|
|
56
|
+
* @returns `{ disabled, tooltip? }` describing the disabled visual state,
|
|
57
|
+
* or `undefined` to leave it unchanged.
|
|
58
|
+
*/
|
|
59
|
+
getMentionDisabledState?: (mention: MentionDisabledStateInput) => MentionDisabledState | undefined;
|
|
42
60
|
/**
|
|
43
61
|
* Custom HTTP headers to include in mention service requests.
|
|
44
62
|
*/
|
|
@@ -94,6 +112,22 @@ export interface MentionResourceConfig extends ServiceConfig {
|
|
|
94
112
|
*/
|
|
95
113
|
userRole?: UserRole;
|
|
96
114
|
}
|
|
115
|
+
/**
|
|
116
|
+
* Describes whether a mention should be rendered in its disabled visual
|
|
117
|
+
* state and what tooltip (if any) should be shown on hover.
|
|
118
|
+
*/
|
|
119
|
+
export interface MentionDisabledState {
|
|
120
|
+
disabled: boolean;
|
|
121
|
+
tooltip?: string;
|
|
122
|
+
}
|
|
123
|
+
/**
|
|
124
|
+
* The minimal input shape used by `getMentionDisabledState`. Kept as a named
|
|
125
|
+
* type so the config callback and the provider method share the same input
|
|
126
|
+
* surface, and so callers do not have to fabricate fields they do not have.
|
|
127
|
+
*/
|
|
128
|
+
export interface MentionDisabledStateInput {
|
|
129
|
+
id: string;
|
|
130
|
+
}
|
|
97
131
|
export interface ResourceProvider<Result> {
|
|
98
132
|
/**
|
|
99
133
|
* Subscribe to ResourceProvider results
|
|
@@ -119,9 +153,40 @@ export type MentionContextIdentifier = {
|
|
|
119
153
|
};
|
|
120
154
|
export interface MentionProvider extends ResourceProvider<MentionDescription[]>, InviteFromMentionProvider, XProductInviteMentionProvider {
|
|
121
155
|
filter(query?: string, contextIdentifier?: MentionContextIdentifier): void;
|
|
156
|
+
/**
|
|
157
|
+
* Optional. When implemented, lets the rendering surface ask whether a
|
|
158
|
+
* mention should be displayed in its disabled visual state, and what
|
|
159
|
+
* tooltip to surface on hover. Returning `undefined` (or omitting the
|
|
160
|
+
* method entirely) is equivalent to "not disabled".
|
|
161
|
+
*/
|
|
162
|
+
getMentionDisabledState?(mention: MentionDisabledStateInput): MentionDisabledState | undefined;
|
|
122
163
|
isFiltering(query: string): boolean;
|
|
164
|
+
/**
|
|
165
|
+
* Optional. Called by the rendering surface (e.g. the editor NodeView)
|
|
166
|
+
* when a mention chip is destroyed (removed from the doc). This is the
|
|
167
|
+
* lowest-level deletion signal — it fires regardless of how the chip was
|
|
168
|
+
* removed (backspace, select-and-delete, programmatic replace, …) and
|
|
169
|
+
* does not depend on the editor's debounced `onChange` callback.
|
|
170
|
+
*
|
|
171
|
+
* Implementations typically forward the call to consumers via the chat
|
|
172
|
+
* layer so they can react (e.g. update `selectedAgentIds`).
|
|
173
|
+
*/
|
|
174
|
+
notifyMentionDestroyed?(mention: {
|
|
175
|
+
id: string;
|
|
176
|
+
}): void;
|
|
123
177
|
recordMentionSelection(mention: MentionDescription, contextIdentifier?: MentionContextIdentifier): void;
|
|
124
178
|
shouldHighlightMention(mention: MentionDescription): boolean;
|
|
179
|
+
/**
|
|
180
|
+
* Optional. When implemented, lets the rendering surface subscribe to
|
|
181
|
+
* changes in the disabled-state predicate so already-rendered chips can
|
|
182
|
+
* re-evaluate themselves when the external state that drives
|
|
183
|
+
* `getMentionDisabledState` changes (e.g. the active agent selection in
|
|
184
|
+
* Rovo Chat). Implementations should invoke the listener after their
|
|
185
|
+
* own state changes.
|
|
186
|
+
*
|
|
187
|
+
* Returns an unsubscribe function. Callers MUST invoke it on teardown.
|
|
188
|
+
*/
|
|
189
|
+
subscribeToDisabledStateChanges?(listener: () => void): () => void;
|
|
125
190
|
}
|
|
126
191
|
export interface HighlightDetail {
|
|
127
192
|
end: number;
|
|
@@ -188,7 +253,8 @@ export interface OnMentionEvent {
|
|
|
188
253
|
export declare enum MentionType {
|
|
189
254
|
SELF = 0,
|
|
190
255
|
RESTRICTED = 1,
|
|
191
|
-
DEFAULT = 2
|
|
256
|
+
DEFAULT = 2,
|
|
257
|
+
DISABLED = 3
|
|
192
258
|
}
|
|
193
259
|
export declare enum UserAccessLevel {
|
|
194
260
|
NONE = 0,
|
package/docs/0-intro.tsx
CHANGED
|
@@ -79,6 +79,27 @@ const _default_1: any = md`
|
|
|
79
79
|
/>
|
|
80
80
|
)}
|
|
81
81
|
|
|
82
|
+
## Mention chip variants
|
|
83
|
+
|
|
84
|
+
The \`<Mention>\` chip has four visual variants:
|
|
85
|
+
|
|
86
|
+
- **Default** — a neutral chip rendered for any in-scope mention.
|
|
87
|
+
- **Self** — emphasised brand-coloured chip rendered when \`isHighlighted\`
|
|
88
|
+
is set, typically used to highlight a mention of the current user.
|
|
89
|
+
- **Restricted** — outlined chip rendered when the mention's
|
|
90
|
+
\`accessLevel\` indicates the referenced user does not have access; on
|
|
91
|
+
hover the chip surfaces a "no access" tooltip.
|
|
92
|
+
- **Disabled** — muted grey chip rendered when \`isDisabled\` is set.
|
|
93
|
+
Click handlers are suppressed, the chip exposes
|
|
94
|
+
\`aria-disabled="true"\`, and (with a \`disabledTooltip\` set) hover or
|
|
95
|
+
keyboard focus surfaces an ADS tooltip explaining why the chip is
|
|
96
|
+
disabled. The disabled chip remains keyboard-focusable so screen-reader
|
|
97
|
+
users encounter it and hear the reason.
|
|
98
|
+
|
|
99
|
+
Inside the editor, the disabled state is driven by
|
|
100
|
+
\`MentionProvider.getMentionDisabledState({ id })\` so rendering surfaces
|
|
101
|
+
don't need to thread per-chip props through ProseMirror node views.
|
|
102
|
+
|
|
82
103
|
${(<Props props={MentionProps} />)}
|
|
83
104
|
|
|
84
105
|
`;
|
package/package.json
CHANGED