@atlaskit/editor-common 78.2.0 → 78.3.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 +17 -0
- package/dist/cjs/element-browser/components/ElementList/ElementList.js +2 -1
- package/dist/cjs/element-browser/components/ElementSearch.js +28 -7
- package/dist/cjs/element-browser/components/StatelessElementBrowser.js +4 -2
- package/dist/cjs/element-browser/messages.js +3 -3
- package/dist/cjs/messages/list.js +5 -0
- package/dist/cjs/messages/toolbar.js +5 -0
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/es2019/element-browser/components/ElementList/ElementList.js +2 -1
- package/dist/es2019/element-browser/components/ElementSearch.js +25 -8
- package/dist/es2019/element-browser/components/StatelessElementBrowser.js +4 -2
- package/dist/es2019/element-browser/messages.js +3 -3
- package/dist/es2019/messages/list.js +5 -0
- package/dist/es2019/messages/toolbar.js +5 -0
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/esm/element-browser/components/ElementList/ElementList.js +2 -1
- package/dist/esm/element-browser/components/ElementSearch.js +29 -8
- package/dist/esm/element-browser/components/StatelessElementBrowser.js +4 -2
- package/dist/esm/element-browser/messages.js +3 -3
- package/dist/esm/messages/list.js +5 -0
- package/dist/esm/messages/toolbar.js +5 -0
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/types/element-browser/components/ElementSearch.d.ts +1 -0
- package/dist/types/messages/list.d.ts +5 -0
- package/dist/types/messages/toolbar.d.ts +5 -0
- package/dist/types-ts4.5/element-browser/components/ElementSearch.d.ts +1 -0
- package/dist/types-ts4.5/messages/list.d.ts +5 -0
- package/dist/types-ts4.5/messages/toolbar.d.ts +5 -0
- package/package.json +4 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/editor-common
|
|
2
2
|
|
|
3
|
+
## 78.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#68408](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68408) [`ab8f885fd0a5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ab8f885fd0a5) - ECA11Y-180: Updated announce translates structure, added required attributes
|
|
8
|
+
- [#73123](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/73123) [`7b46579bdbd6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7b46579bdbd6) - ECA11Y-206: updated unit tests
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
|
|
14
|
+
## 78.2.1
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
3
20
|
## 78.2.0
|
|
4
21
|
|
|
5
22
|
### Minor Changes
|
|
@@ -187,7 +187,8 @@ function ElementItem(_ref4) {
|
|
|
187
187
|
isSelected: selected,
|
|
188
188
|
"aria-describedby": title,
|
|
189
189
|
ref: ref,
|
|
190
|
-
testId: "element-item-".concat(index)
|
|
190
|
+
testId: "element-item-".concat(index),
|
|
191
|
+
id: "searched-item-".concat(index)
|
|
191
192
|
}, (0, _react2.jsx)(ItemContent, {
|
|
192
193
|
style: inlineMode ? null : itemStyleOverrides,
|
|
193
194
|
tabIndex: 0,
|
|
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
10
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
12
|
var _react2 = require("@emotion/react");
|
|
12
13
|
var _reactIntlNext = require("react-intl-next");
|
|
@@ -32,9 +33,14 @@ function ElementSearch(_ref) {
|
|
|
32
33
|
onClick = _ref.onClick,
|
|
33
34
|
onKeyDown = _ref.onKeyDown,
|
|
34
35
|
searchTerm = _ref.searchTerm,
|
|
35
|
-
items = _ref.items
|
|
36
|
+
items = _ref.items,
|
|
37
|
+
selectedItemIndex = _ref.selectedItemIndex;
|
|
36
38
|
var ref = (0, _useFocus.default)(focus);
|
|
37
39
|
var assistiveTextRef = (0, _react.useRef)(null);
|
|
40
|
+
var _useState = (0, _react.useState)(false),
|
|
41
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
42
|
+
inputFocused = _useState2[0],
|
|
43
|
+
setInputFocused = _useState2[1];
|
|
38
44
|
(0, _react.useLayoutEffect)(function () {
|
|
39
45
|
if (assistiveTextRef) {
|
|
40
46
|
var assistiveDiv = assistiveTextRef.current;
|
|
@@ -49,21 +55,33 @@ function ElementSearch(_ref) {
|
|
|
49
55
|
var value = _ref2.target.value;
|
|
50
56
|
onSearch(value);
|
|
51
57
|
};
|
|
52
|
-
var onFocus = function onFocus(e) {
|
|
53
|
-
|
|
58
|
+
var onFocus = function onFocus(e) {
|
|
59
|
+
setInputFocused(true);
|
|
60
|
+
};
|
|
61
|
+
var onBlur = function onBlur(e) {
|
|
62
|
+
setInputFocused(false);
|
|
63
|
+
};
|
|
54
64
|
var getFormattedMessage = function getFormattedMessage(itemsCount) {
|
|
55
65
|
if (searchTerm === '') {
|
|
56
|
-
return "".concat(
|
|
66
|
+
return "".concat(formatMessage(_messages.default.assistiveTextSuggestionsDefault, {
|
|
67
|
+
count: itemsCount
|
|
68
|
+
}));
|
|
57
69
|
}
|
|
58
70
|
if (itemsCount > 1) {
|
|
59
|
-
return "".concat(
|
|
71
|
+
return "".concat(formatMessage(_messages.default.assistiveTextSuggestions, {
|
|
72
|
+
count: itemsCount
|
|
73
|
+
}));
|
|
60
74
|
}
|
|
61
75
|
if (itemsCount === 1) {
|
|
62
|
-
return "".concat(
|
|
76
|
+
return "".concat(formatMessage(_messages.default.assistiveTextSuggestion, {
|
|
77
|
+
count: itemsCount
|
|
78
|
+
}));
|
|
63
79
|
}
|
|
64
80
|
return formatMessage(_messages.default.assistiveTextSuggestionNothing);
|
|
65
81
|
};
|
|
66
82
|
var assistiveMessage = getFormattedMessage(items === null || items === void 0 ? void 0 : items.length);
|
|
83
|
+
var isInputNotFocusedAndItemSelected = !inputFocused && selectedItemIndex !== undefined;
|
|
84
|
+
var ariaActiveDescendant = isInputNotFocusedAndItemSelected ? "searched-item-".concat(selectedItemIndex) : undefined;
|
|
67
85
|
return (0, _react2.jsx)("div", {
|
|
68
86
|
css: [wrapper, mode === _types.Modes.inline && wrapperInline]
|
|
69
87
|
}, (0, _react2.jsx)(_textfield.default, {
|
|
@@ -75,7 +93,8 @@ function ElementSearch(_ref) {
|
|
|
75
93
|
onBlur: onBlur,
|
|
76
94
|
elemBeforeInput: (0, _react2.jsx)("div", {
|
|
77
95
|
css: elementBeforeInput,
|
|
78
|
-
"data-testid": "element_search__element_before_input"
|
|
96
|
+
"data-testid": "element_search__element_before_input",
|
|
97
|
+
"aria-hidden": "true"
|
|
79
98
|
}, (0, _react2.jsx)(_search.default, {
|
|
80
99
|
size: "medium",
|
|
81
100
|
label: "Advanced search",
|
|
@@ -91,6 +110,8 @@ function ElementSearch(_ref) {
|
|
|
91
110
|
"aria-label": "search",
|
|
92
111
|
"aria-labelledby": "search-assistive",
|
|
93
112
|
className: "js-search-input",
|
|
113
|
+
role: "combobox",
|
|
114
|
+
"aria-activedescendant": ariaActiveDescendant,
|
|
94
115
|
value: searchTerm
|
|
95
116
|
}), (0, _react2.jsx)("span", {
|
|
96
117
|
id: "search-assistive",
|
|
@@ -169,7 +169,8 @@ function MobileBrowser(_ref) {
|
|
|
169
169
|
focus: focusOnSearch,
|
|
170
170
|
onClick: setFocusOnSearch,
|
|
171
171
|
searchTerm: searchTerm,
|
|
172
|
-
items: items
|
|
172
|
+
items: items,
|
|
173
|
+
selectedItemIndex: selectedItemIndex
|
|
173
174
|
}), showCategories && (0, _react2.jsx)("nav", {
|
|
174
175
|
css: mobileCategoryListWrapper,
|
|
175
176
|
tabIndex: -1
|
|
@@ -249,7 +250,8 @@ function DesktopBrowser(_ref2) {
|
|
|
249
250
|
focus: focusOnSearch,
|
|
250
251
|
onClick: setFocusOnSearch,
|
|
251
252
|
searchTerm: searchTerm,
|
|
252
|
-
items: items
|
|
253
|
+
items: items,
|
|
254
|
+
selectedItemIndex: selectedItemIndex
|
|
253
255
|
})), (0, _react2.jsx)(_ElementList.default, {
|
|
254
256
|
items: items,
|
|
255
257
|
mode: mode,
|
|
@@ -18,17 +18,17 @@ var _default = exports.default = (0, _reactIntlNext.defineMessages)({
|
|
|
18
18
|
},
|
|
19
19
|
assistiveTextSuggestionsDefault: {
|
|
20
20
|
id: 'fabric.editor.elementbrowser.searchbar.assistive.text.suggestions',
|
|
21
|
-
defaultMessage: 'suggestions available by default.',
|
|
21
|
+
defaultMessage: '{count} suggestions available by default.',
|
|
22
22
|
description: 'Assistive text to describe the default list of suggestions'
|
|
23
23
|
},
|
|
24
24
|
assistiveTextSuggestions: {
|
|
25
25
|
id: 'fabric.editor.elementbrowser.searchbar.assistive.text.suggestions',
|
|
26
|
-
defaultMessage: 'suggestions available for typed text.',
|
|
26
|
+
defaultMessage: '{count} suggestions available for typed text.',
|
|
27
27
|
description: 'Assistive text to describe the list of suggestions filtered by typed user input, plural of fabric.editor.elementbrowser.searchbar.assistive.text.suggestion'
|
|
28
28
|
},
|
|
29
29
|
assistiveTextSuggestion: {
|
|
30
30
|
id: 'fabric.editor.elementbrowser.searchbar.assistive.text.suggestion',
|
|
31
|
-
defaultMessage: 'suggestion available for typed text.',
|
|
31
|
+
defaultMessage: '{count} suggestion available for typed text.',
|
|
32
32
|
description: 'Assistive text to describe the that there is one suggestion for the users typed input'
|
|
33
33
|
},
|
|
34
34
|
assistiveTextSuggestionNothing: {
|
|
@@ -32,5 +32,10 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
|
|
|
32
32
|
id: 'fabric.editor.lists',
|
|
33
33
|
defaultMessage: 'Lists',
|
|
34
34
|
description: 'Menu shows ordered/bullet list and unordered/numbered lists'
|
|
35
|
+
},
|
|
36
|
+
listsFormat: {
|
|
37
|
+
id: 'fabric.editor.listsFormat',
|
|
38
|
+
defaultMessage: 'List formating',
|
|
39
|
+
description: 'Aria label for the wrapper of list buttons'
|
|
35
40
|
}
|
|
36
41
|
});
|
|
@@ -56,6 +56,11 @@ var toolbarMessages = exports.toolbarMessages = (0, _reactIntlNext.defineMessage
|
|
|
56
56
|
defaultMessage: 'More formatting',
|
|
57
57
|
description: 'Clicking this will show a menu with additional formatting options'
|
|
58
58
|
},
|
|
59
|
+
textFormatting: {
|
|
60
|
+
id: 'fabric.editor.textFormatting',
|
|
61
|
+
defaultMessage: 'Text formatting',
|
|
62
|
+
description: 'Aria label for the wrapper of text format buttons'
|
|
63
|
+
},
|
|
59
64
|
bold: {
|
|
60
65
|
id: 'fabric.editor.bold',
|
|
61
66
|
defaultMessage: 'Bold',
|
|
@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
16
16
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
17
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
18
18
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
19
|
-
var packageVersion = "78.
|
|
19
|
+
var packageVersion = "78.3.0";
|
|
20
20
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
21
21
|
// Remove URL as it has UGC
|
|
22
22
|
// TODO: Sanitise the URL instead of just removing it
|
|
@@ -22,7 +22,7 @@ var _templateObject, _templateObject2, _templateObject3;
|
|
|
22
22
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
23
23
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
|
|
24
24
|
var packageName = "@atlaskit/editor-common";
|
|
25
|
-
var packageVersion = "78.
|
|
25
|
+
var packageVersion = "78.3.0";
|
|
26
26
|
var halfFocusRing = 1;
|
|
27
27
|
var dropOffset = '0, 8';
|
|
28
28
|
var DropList = /*#__PURE__*/function (_Component) {
|
|
@@ -187,7 +187,8 @@ export function ElementItem({
|
|
|
187
187
|
isSelected: selected,
|
|
188
188
|
"aria-describedby": title,
|
|
189
189
|
ref: ref,
|
|
190
|
-
testId: `element-item-${index}
|
|
190
|
+
testId: `element-item-${index}`,
|
|
191
|
+
id: `searched-item-${index}`
|
|
191
192
|
}, jsx(ItemContent, {
|
|
192
193
|
style: inlineMode ? null : itemStyleOverrides,
|
|
193
194
|
tabIndex: 0,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
|
-
import React, { memo, useLayoutEffect, useRef } from 'react';
|
|
2
|
+
import React, { memo, useLayoutEffect, useRef, useState } from 'react';
|
|
3
3
|
import { css, jsx } from '@emotion/react';
|
|
4
4
|
import { injectIntl } from 'react-intl-next';
|
|
5
5
|
import { withAnalyticsContext } from '@atlaskit/analytics-next';
|
|
@@ -22,10 +22,12 @@ function ElementSearch({
|
|
|
22
22
|
onClick,
|
|
23
23
|
onKeyDown,
|
|
24
24
|
searchTerm,
|
|
25
|
-
items
|
|
25
|
+
items,
|
|
26
|
+
selectedItemIndex
|
|
26
27
|
}) {
|
|
27
28
|
const ref = useFocus(focus);
|
|
28
29
|
const assistiveTextRef = useRef(null);
|
|
30
|
+
const [inputFocused, setInputFocused] = useState(false);
|
|
29
31
|
useLayoutEffect(() => {
|
|
30
32
|
if (assistiveTextRef) {
|
|
31
33
|
const assistiveDiv = assistiveTextRef.current;
|
|
@@ -43,21 +45,33 @@ function ElementSearch({
|
|
|
43
45
|
}) => {
|
|
44
46
|
onSearch(value);
|
|
45
47
|
};
|
|
46
|
-
const onFocus = e => {
|
|
47
|
-
|
|
48
|
+
const onFocus = e => {
|
|
49
|
+
setInputFocused(true);
|
|
50
|
+
};
|
|
51
|
+
const onBlur = e => {
|
|
52
|
+
setInputFocused(false);
|
|
53
|
+
};
|
|
48
54
|
const getFormattedMessage = itemsCount => {
|
|
49
55
|
if (searchTerm === '') {
|
|
50
|
-
return `${
|
|
56
|
+
return `${formatMessage(commonMessages.assistiveTextSuggestionsDefault, {
|
|
57
|
+
count: itemsCount
|
|
58
|
+
})}`;
|
|
51
59
|
}
|
|
52
60
|
if (itemsCount > 1) {
|
|
53
|
-
return `${
|
|
61
|
+
return `${formatMessage(commonMessages.assistiveTextSuggestions, {
|
|
62
|
+
count: itemsCount
|
|
63
|
+
})}`;
|
|
54
64
|
}
|
|
55
65
|
if (itemsCount === 1) {
|
|
56
|
-
return `${
|
|
66
|
+
return `${formatMessage(commonMessages.assistiveTextSuggestion, {
|
|
67
|
+
count: itemsCount
|
|
68
|
+
})}`;
|
|
57
69
|
}
|
|
58
70
|
return formatMessage(commonMessages.assistiveTextSuggestionNothing);
|
|
59
71
|
};
|
|
60
72
|
const assistiveMessage = getFormattedMessage(items === null || items === void 0 ? void 0 : items.length);
|
|
73
|
+
const isInputNotFocusedAndItemSelected = !inputFocused && selectedItemIndex !== undefined;
|
|
74
|
+
const ariaActiveDescendant = isInputNotFocusedAndItemSelected ? `searched-item-${selectedItemIndex}` : undefined;
|
|
61
75
|
return jsx("div", {
|
|
62
76
|
css: [wrapper, mode === Modes.inline && wrapperInline]
|
|
63
77
|
}, jsx(Textfield, {
|
|
@@ -69,7 +83,8 @@ function ElementSearch({
|
|
|
69
83
|
onBlur: onBlur,
|
|
70
84
|
elemBeforeInput: jsx("div", {
|
|
71
85
|
css: elementBeforeInput,
|
|
72
|
-
"data-testid": "element_search__element_before_input"
|
|
86
|
+
"data-testid": "element_search__element_before_input",
|
|
87
|
+
"aria-hidden": "true"
|
|
73
88
|
}, jsx(SearchIcon, {
|
|
74
89
|
size: "medium",
|
|
75
90
|
label: "Advanced search",
|
|
@@ -85,6 +100,8 @@ function ElementSearch({
|
|
|
85
100
|
"aria-label": "search",
|
|
86
101
|
"aria-labelledby": "search-assistive",
|
|
87
102
|
className: "js-search-input",
|
|
103
|
+
role: "combobox",
|
|
104
|
+
"aria-activedescendant": ariaActiveDescendant,
|
|
88
105
|
value: searchTerm
|
|
89
106
|
}), jsx("span", {
|
|
90
107
|
id: "search-assistive",
|
|
@@ -239,7 +239,8 @@ function MobileBrowser({
|
|
|
239
239
|
focus: focusOnSearch,
|
|
240
240
|
onClick: setFocusOnSearch,
|
|
241
241
|
searchTerm: searchTerm,
|
|
242
|
-
items: items
|
|
242
|
+
items: items,
|
|
243
|
+
selectedItemIndex: selectedItemIndex
|
|
243
244
|
}), showCategories && jsx("nav", {
|
|
244
245
|
css: mobileCategoryListWrapper,
|
|
245
246
|
tabIndex: -1
|
|
@@ -320,7 +321,8 @@ function DesktopBrowser({
|
|
|
320
321
|
focus: focusOnSearch,
|
|
321
322
|
onClick: setFocusOnSearch,
|
|
322
323
|
searchTerm: searchTerm,
|
|
323
|
-
items: items
|
|
324
|
+
items: items,
|
|
325
|
+
selectedItemIndex: selectedItemIndex
|
|
324
326
|
})), jsx(ElementList, {
|
|
325
327
|
items: items,
|
|
326
328
|
mode: mode,
|
|
@@ -12,17 +12,17 @@ export default defineMessages({
|
|
|
12
12
|
},
|
|
13
13
|
assistiveTextSuggestionsDefault: {
|
|
14
14
|
id: 'fabric.editor.elementbrowser.searchbar.assistive.text.suggestions',
|
|
15
|
-
defaultMessage: 'suggestions available by default.',
|
|
15
|
+
defaultMessage: '{count} suggestions available by default.',
|
|
16
16
|
description: 'Assistive text to describe the default list of suggestions'
|
|
17
17
|
},
|
|
18
18
|
assistiveTextSuggestions: {
|
|
19
19
|
id: 'fabric.editor.elementbrowser.searchbar.assistive.text.suggestions',
|
|
20
|
-
defaultMessage: 'suggestions available for typed text.',
|
|
20
|
+
defaultMessage: '{count} suggestions available for typed text.',
|
|
21
21
|
description: 'Assistive text to describe the list of suggestions filtered by typed user input, plural of fabric.editor.elementbrowser.searchbar.assistive.text.suggestion'
|
|
22
22
|
},
|
|
23
23
|
assistiveTextSuggestion: {
|
|
24
24
|
id: 'fabric.editor.elementbrowser.searchbar.assistive.text.suggestion',
|
|
25
|
-
defaultMessage: 'suggestion available for typed text.',
|
|
25
|
+
defaultMessage: '{count} suggestion available for typed text.',
|
|
26
26
|
description: 'Assistive text to describe the that there is one suggestion for the users typed input'
|
|
27
27
|
},
|
|
28
28
|
assistiveTextSuggestionNothing: {
|
|
@@ -25,5 +25,10 @@ export const messages = defineMessages({
|
|
|
25
25
|
id: 'fabric.editor.lists',
|
|
26
26
|
defaultMessage: 'Lists',
|
|
27
27
|
description: 'Menu shows ordered/bullet list and unordered/numbered lists'
|
|
28
|
+
},
|
|
29
|
+
listsFormat: {
|
|
30
|
+
id: 'fabric.editor.listsFormat',
|
|
31
|
+
defaultMessage: 'List formating',
|
|
32
|
+
description: 'Aria label for the wrapper of list buttons'
|
|
28
33
|
}
|
|
29
34
|
});
|
|
@@ -50,6 +50,11 @@ export const toolbarMessages = defineMessages({
|
|
|
50
50
|
defaultMessage: 'More formatting',
|
|
51
51
|
description: 'Clicking this will show a menu with additional formatting options'
|
|
52
52
|
},
|
|
53
|
+
textFormatting: {
|
|
54
|
+
id: 'fabric.editor.textFormatting',
|
|
55
|
+
defaultMessage: 'Text formatting',
|
|
56
|
+
description: 'Aria label for the wrapper of text format buttons'
|
|
57
|
+
},
|
|
53
58
|
bold: {
|
|
54
59
|
id: 'fabric.editor.bold',
|
|
55
60
|
defaultMessage: 'Bold',
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
2
2
|
const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
3
|
-
const packageVersion = "78.
|
|
3
|
+
const packageVersion = "78.3.0";
|
|
4
4
|
const sanitiseSentryEvents = (data, _hint) => {
|
|
5
5
|
// Remove URL as it has UGC
|
|
6
6
|
// TODO: Sanitise the URL instead of just removing it
|
|
@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
|
|
|
7
7
|
import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
|
|
8
8
|
import Layer from '../Layer';
|
|
9
9
|
const packageName = "@atlaskit/editor-common";
|
|
10
|
-
const packageVersion = "78.
|
|
10
|
+
const packageVersion = "78.3.0";
|
|
11
11
|
const halfFocusRing = 1;
|
|
12
12
|
const dropOffset = '0, 8';
|
|
13
13
|
class DropList extends Component {
|
|
@@ -176,7 +176,8 @@ export function ElementItem(_ref4) {
|
|
|
176
176
|
isSelected: selected,
|
|
177
177
|
"aria-describedby": title,
|
|
178
178
|
ref: ref,
|
|
179
|
-
testId: "element-item-".concat(index)
|
|
179
|
+
testId: "element-item-".concat(index),
|
|
180
|
+
id: "searched-item-".concat(index)
|
|
180
181
|
}, jsx(ItemContent, {
|
|
181
182
|
style: inlineMode ? null : itemStyleOverrides,
|
|
182
183
|
tabIndex: 0,
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
3
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
3
4
|
/** @jsx jsx */
|
|
4
|
-
import React, { memo, useLayoutEffect, useRef } from 'react';
|
|
5
|
+
import React, { memo, useLayoutEffect, useRef, useState } from 'react';
|
|
5
6
|
import { css, jsx } from '@emotion/react';
|
|
6
7
|
import { injectIntl } from 'react-intl-next';
|
|
7
8
|
import { withAnalyticsContext } from '@atlaskit/analytics-next';
|
|
@@ -22,9 +23,14 @@ function ElementSearch(_ref) {
|
|
|
22
23
|
onClick = _ref.onClick,
|
|
23
24
|
onKeyDown = _ref.onKeyDown,
|
|
24
25
|
searchTerm = _ref.searchTerm,
|
|
25
|
-
items = _ref.items
|
|
26
|
+
items = _ref.items,
|
|
27
|
+
selectedItemIndex = _ref.selectedItemIndex;
|
|
26
28
|
var ref = useFocus(focus);
|
|
27
29
|
var assistiveTextRef = useRef(null);
|
|
30
|
+
var _useState = useState(false),
|
|
31
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
32
|
+
inputFocused = _useState2[0],
|
|
33
|
+
setInputFocused = _useState2[1];
|
|
28
34
|
useLayoutEffect(function () {
|
|
29
35
|
if (assistiveTextRef) {
|
|
30
36
|
var assistiveDiv = assistiveTextRef.current;
|
|
@@ -39,21 +45,33 @@ function ElementSearch(_ref) {
|
|
|
39
45
|
var value = _ref2.target.value;
|
|
40
46
|
onSearch(value);
|
|
41
47
|
};
|
|
42
|
-
var onFocus = function onFocus(e) {
|
|
43
|
-
|
|
48
|
+
var onFocus = function onFocus(e) {
|
|
49
|
+
setInputFocused(true);
|
|
50
|
+
};
|
|
51
|
+
var onBlur = function onBlur(e) {
|
|
52
|
+
setInputFocused(false);
|
|
53
|
+
};
|
|
44
54
|
var getFormattedMessage = function getFormattedMessage(itemsCount) {
|
|
45
55
|
if (searchTerm === '') {
|
|
46
|
-
return "".concat(
|
|
56
|
+
return "".concat(formatMessage(commonMessages.assistiveTextSuggestionsDefault, {
|
|
57
|
+
count: itemsCount
|
|
58
|
+
}));
|
|
47
59
|
}
|
|
48
60
|
if (itemsCount > 1) {
|
|
49
|
-
return "".concat(
|
|
61
|
+
return "".concat(formatMessage(commonMessages.assistiveTextSuggestions, {
|
|
62
|
+
count: itemsCount
|
|
63
|
+
}));
|
|
50
64
|
}
|
|
51
65
|
if (itemsCount === 1) {
|
|
52
|
-
return "".concat(
|
|
66
|
+
return "".concat(formatMessage(commonMessages.assistiveTextSuggestion, {
|
|
67
|
+
count: itemsCount
|
|
68
|
+
}));
|
|
53
69
|
}
|
|
54
70
|
return formatMessage(commonMessages.assistiveTextSuggestionNothing);
|
|
55
71
|
};
|
|
56
72
|
var assistiveMessage = getFormattedMessage(items === null || items === void 0 ? void 0 : items.length);
|
|
73
|
+
var isInputNotFocusedAndItemSelected = !inputFocused && selectedItemIndex !== undefined;
|
|
74
|
+
var ariaActiveDescendant = isInputNotFocusedAndItemSelected ? "searched-item-".concat(selectedItemIndex) : undefined;
|
|
57
75
|
return jsx("div", {
|
|
58
76
|
css: [wrapper, mode === Modes.inline && wrapperInline]
|
|
59
77
|
}, jsx(Textfield, {
|
|
@@ -65,7 +83,8 @@ function ElementSearch(_ref) {
|
|
|
65
83
|
onBlur: onBlur,
|
|
66
84
|
elemBeforeInput: jsx("div", {
|
|
67
85
|
css: elementBeforeInput,
|
|
68
|
-
"data-testid": "element_search__element_before_input"
|
|
86
|
+
"data-testid": "element_search__element_before_input",
|
|
87
|
+
"aria-hidden": "true"
|
|
69
88
|
}, jsx(SearchIcon, {
|
|
70
89
|
size: "medium",
|
|
71
90
|
label: "Advanced search",
|
|
@@ -81,6 +100,8 @@ function ElementSearch(_ref) {
|
|
|
81
100
|
"aria-label": "search",
|
|
82
101
|
"aria-labelledby": "search-assistive",
|
|
83
102
|
className: "js-search-input",
|
|
103
|
+
role: "combobox",
|
|
104
|
+
"aria-activedescendant": ariaActiveDescendant,
|
|
84
105
|
value: searchTerm
|
|
85
106
|
}), jsx("span", {
|
|
86
107
|
id: "search-assistive",
|
|
@@ -159,7 +159,8 @@ function MobileBrowser(_ref) {
|
|
|
159
159
|
focus: focusOnSearch,
|
|
160
160
|
onClick: setFocusOnSearch,
|
|
161
161
|
searchTerm: searchTerm,
|
|
162
|
-
items: items
|
|
162
|
+
items: items,
|
|
163
|
+
selectedItemIndex: selectedItemIndex
|
|
163
164
|
}), showCategories && jsx("nav", {
|
|
164
165
|
css: mobileCategoryListWrapper,
|
|
165
166
|
tabIndex: -1
|
|
@@ -239,7 +240,8 @@ function DesktopBrowser(_ref2) {
|
|
|
239
240
|
focus: focusOnSearch,
|
|
240
241
|
onClick: setFocusOnSearch,
|
|
241
242
|
searchTerm: searchTerm,
|
|
242
|
-
items: items
|
|
243
|
+
items: items,
|
|
244
|
+
selectedItemIndex: selectedItemIndex
|
|
243
245
|
})), jsx(ElementList, {
|
|
244
246
|
items: items,
|
|
245
247
|
mode: mode,
|
|
@@ -12,17 +12,17 @@ export default defineMessages({
|
|
|
12
12
|
},
|
|
13
13
|
assistiveTextSuggestionsDefault: {
|
|
14
14
|
id: 'fabric.editor.elementbrowser.searchbar.assistive.text.suggestions',
|
|
15
|
-
defaultMessage: 'suggestions available by default.',
|
|
15
|
+
defaultMessage: '{count} suggestions available by default.',
|
|
16
16
|
description: 'Assistive text to describe the default list of suggestions'
|
|
17
17
|
},
|
|
18
18
|
assistiveTextSuggestions: {
|
|
19
19
|
id: 'fabric.editor.elementbrowser.searchbar.assistive.text.suggestions',
|
|
20
|
-
defaultMessage: 'suggestions available for typed text.',
|
|
20
|
+
defaultMessage: '{count} suggestions available for typed text.',
|
|
21
21
|
description: 'Assistive text to describe the list of suggestions filtered by typed user input, plural of fabric.editor.elementbrowser.searchbar.assistive.text.suggestion'
|
|
22
22
|
},
|
|
23
23
|
assistiveTextSuggestion: {
|
|
24
24
|
id: 'fabric.editor.elementbrowser.searchbar.assistive.text.suggestion',
|
|
25
|
-
defaultMessage: 'suggestion available for typed text.',
|
|
25
|
+
defaultMessage: '{count} suggestion available for typed text.',
|
|
26
26
|
description: 'Assistive text to describe the that there is one suggestion for the users typed input'
|
|
27
27
|
},
|
|
28
28
|
assistiveTextSuggestionNothing: {
|
|
@@ -25,5 +25,10 @@ export var messages = defineMessages({
|
|
|
25
25
|
id: 'fabric.editor.lists',
|
|
26
26
|
defaultMessage: 'Lists',
|
|
27
27
|
description: 'Menu shows ordered/bullet list and unordered/numbered lists'
|
|
28
|
+
},
|
|
29
|
+
listsFormat: {
|
|
30
|
+
id: 'fabric.editor.listsFormat',
|
|
31
|
+
defaultMessage: 'List formating',
|
|
32
|
+
description: 'Aria label for the wrapper of list buttons'
|
|
28
33
|
}
|
|
29
34
|
});
|
|
@@ -50,6 +50,11 @@ export var toolbarMessages = defineMessages({
|
|
|
50
50
|
defaultMessage: 'More formatting',
|
|
51
51
|
description: 'Clicking this will show a menu with additional formatting options'
|
|
52
52
|
},
|
|
53
|
+
textFormatting: {
|
|
54
|
+
id: 'fabric.editor.textFormatting',
|
|
55
|
+
defaultMessage: 'Text formatting',
|
|
56
|
+
description: 'Aria label for the wrapper of text format buttons'
|
|
57
|
+
},
|
|
53
58
|
bold: {
|
|
54
59
|
id: 'fabric.editor.bold',
|
|
55
60
|
defaultMessage: 'Bold',
|
|
@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
6
6
|
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; }
|
|
7
7
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
8
8
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
9
|
-
var packageVersion = "78.
|
|
9
|
+
var packageVersion = "78.3.0";
|
|
10
10
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
11
11
|
// Remove URL as it has UGC
|
|
12
12
|
// TODO: Sanitise the URL instead of just removing it
|
|
@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
|
|
|
17
17
|
import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
|
|
18
18
|
import Layer from '../Layer';
|
|
19
19
|
var packageName = "@atlaskit/editor-common";
|
|
20
|
-
var packageVersion = "78.
|
|
20
|
+
var packageVersion = "78.3.0";
|
|
21
21
|
var halfFocusRing = 1;
|
|
22
22
|
var dropOffset = '0, 8';
|
|
23
23
|
var DropList = /*#__PURE__*/function (_Component) {
|
|
@@ -11,6 +11,7 @@ interface Props {
|
|
|
11
11
|
onKeyDown: (e: React.KeyboardEvent) => void;
|
|
12
12
|
searchTerm?: string;
|
|
13
13
|
items: QuickInsertItem[];
|
|
14
|
+
selectedItemIndex?: number;
|
|
14
15
|
}
|
|
15
16
|
declare const MemoizedElementSearchWithAnalytics: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<Props & WrappedComponentProps<"intl">, "intl"> & {
|
|
16
17
|
forwardedRef?: React.Ref<any> | undefined;
|
|
@@ -11,6 +11,7 @@ interface Props {
|
|
|
11
11
|
onKeyDown: (e: React.KeyboardEvent) => void;
|
|
12
12
|
searchTerm?: string;
|
|
13
13
|
items: QuickInsertItem[];
|
|
14
|
+
selectedItemIndex?: number;
|
|
14
15
|
}
|
|
15
16
|
declare const MemoizedElementSearchWithAnalytics: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<Props & WrappedComponentProps<"intl">, "intl"> & {
|
|
16
17
|
forwardedRef?: React.Ref<any> | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-common",
|
|
3
|
-
"version": "78.
|
|
3
|
+
"version": "78.3.0",
|
|
4
4
|
"description": "A package that contains common classes and components for editor and renderer",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -117,10 +117,10 @@
|
|
|
117
117
|
"@atlaskit/media-client": "^26.2.0",
|
|
118
118
|
"@atlaskit/media-client-react": "^2.0.0",
|
|
119
119
|
"@atlaskit/media-common": "^11.0.0",
|
|
120
|
-
"@atlaskit/media-file-preview": "^0.
|
|
120
|
+
"@atlaskit/media-file-preview": "^0.5.0",
|
|
121
121
|
"@atlaskit/media-picker": "^66.3.0",
|
|
122
122
|
"@atlaskit/media-ui": "^25.0.0",
|
|
123
|
-
"@atlaskit/mention": "^
|
|
123
|
+
"@atlaskit/mention": "^23.0.0",
|
|
124
124
|
"@atlaskit/menu": "^2.1.0",
|
|
125
125
|
"@atlaskit/platform-feature-flags": "^0.2.0",
|
|
126
126
|
"@atlaskit/profilecard": "^19.11.0",
|
|
@@ -165,6 +165,7 @@
|
|
|
165
165
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
166
166
|
},
|
|
167
167
|
"devDependencies": {
|
|
168
|
+
"@af/visual-regression": "*",
|
|
168
169
|
"@atlaskit/media-core": "^34.2.0",
|
|
169
170
|
"@atlaskit/media-test-helpers": "^33.0.0",
|
|
170
171
|
"@atlaskit/util-data-test": "^17.9.0",
|