@atlaskit/editor-plugin-type-ahead 0.7.6 → 0.7.7
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 +6 -0
- package/dist/cjs/ui/AssistiveText.js +4 -4
- package/dist/cjs/ui/InputQuery.js +4 -6
- package/dist/cjs/ui/TypeAheadList.js +9 -10
- package/dist/cjs/ui/TypeAheadListItem.js +17 -18
- package/dist/cjs/ui/TypeAheadPopup.js +4 -5
- package/dist/es2019/ui/AssistiveText.js +4 -6
- package/dist/es2019/ui/InputQuery.js +5 -6
- package/dist/es2019/ui/TypeAheadList.js +10 -12
- package/dist/es2019/ui/TypeAheadListItem.js +18 -19
- package/dist/es2019/ui/TypeAheadPopup.js +5 -6
- package/dist/esm/ui/AssistiveText.js +4 -6
- package/dist/esm/ui/InputQuery.js +5 -6
- package/dist/esm/ui/TypeAheadList.js +10 -12
- package/dist/esm/ui/TypeAheadListItem.js +18 -19
- package/dist/esm/ui/TypeAheadPopup.js +5 -6
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-type-ahead
|
|
2
2
|
|
|
3
|
+
## 0.7.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#58763](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58763) [`0fdbd64522bf`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0fdbd64522bf) - update ADF schema
|
|
8
|
+
|
|
3
9
|
## 0.7.6
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -16,7 +16,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
16
16
|
var _react2 = require("@emotion/react");
|
|
17
17
|
var _debounce = _interopRequireDefault(require("lodash/debounce"));
|
|
18
18
|
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); }; }
|
|
19
|
-
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; } }
|
|
19
|
+
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; } }
|
|
20
20
|
var statusDebounceMillis = 1400;
|
|
21
21
|
var assitiveTextStyles = (0, _react2.css)({
|
|
22
22
|
border: 0,
|
|
@@ -93,14 +93,14 @@ var AssistveTextComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
93
93
|
debounced = _this$state.debounced,
|
|
94
94
|
silenced = _this$state.silenced;
|
|
95
95
|
this.debounceStatusUpdate();
|
|
96
|
-
return
|
|
96
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
97
97
|
css: assitiveTextStyles
|
|
98
|
-
},
|
|
98
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
99
99
|
id: id + '__status--A',
|
|
100
100
|
role: "status",
|
|
101
101
|
"aria-atomic": "true",
|
|
102
102
|
"aria-live": "polite"
|
|
103
|
-
}, "".concat(!silenced && debounced && bump ? assistiveText : '')),
|
|
103
|
+
}, "".concat(!silenced && debounced && bump ? assistiveText : '')), /*#__PURE__*/_react.default.createElement("div", {
|
|
104
104
|
id: id + '__status--B',
|
|
105
105
|
role: "status",
|
|
106
106
|
"aria-atomic": "true",
|
|
@@ -20,8 +20,6 @@ var _utils2 = require("../utils");
|
|
|
20
20
|
var _AssistiveText = require("./AssistiveText");
|
|
21
21
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
22
22
|
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; }
|
|
23
|
-
/** @jsx jsx */
|
|
24
|
-
|
|
25
23
|
var querySpanStyles = (0, _react2.css)({
|
|
26
24
|
outline: 'none',
|
|
27
25
|
'& input': {
|
|
@@ -368,7 +366,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
|
|
|
368
366
|
jsx-a11y/interactive-supports-focus
|
|
369
367
|
Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
|
|
370
368
|
*/
|
|
371
|
-
return
|
|
369
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, triggerQueryPrefix, /*#__PURE__*/_react.default.createElement("span", {
|
|
372
370
|
css: querySpanStyles,
|
|
373
371
|
contentEditable: true,
|
|
374
372
|
ref: ref,
|
|
@@ -381,15 +379,15 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
|
|
|
381
379
|
"aria-labelledby": assistiveHintID,
|
|
382
380
|
suppressContentEditableWarning: true,
|
|
383
381
|
"data-query-prefix": triggerQueryPrefix
|
|
384
|
-
}, query === null ?
|
|
382
|
+
}, query === null ? /*#__PURE__*/_react.default.createElement("input", {
|
|
385
383
|
ref: inputRef,
|
|
386
384
|
type: "text"
|
|
387
|
-
}) : query),
|
|
385
|
+
}) : query), /*#__PURE__*/_react.default.createElement("span", {
|
|
388
386
|
id: assistiveHintID,
|
|
389
387
|
style: {
|
|
390
388
|
display: 'none'
|
|
391
389
|
}
|
|
392
|
-
}, intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl)), ",", intl.formatMessage(_messages.typeAheadListMessages.inputQueryAssistiveLabel)),
|
|
390
|
+
}, intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl)), ",", intl.formatMessage(_messages.typeAheadListMessages.inputQueryAssistiveLabel)), /*#__PURE__*/_react.default.createElement(_AssistiveText.AssistiveText, {
|
|
393
391
|
assistiveText: items.length === 0 ? intl.formatMessage(_messages.typeAheadListMessages.noSearchResultsLabel, {
|
|
394
392
|
itemsLength: items.length
|
|
395
393
|
}) : '',
|
|
@@ -22,7 +22,6 @@ var _utils = require("../utils");
|
|
|
22
22
|
var _AssistiveText = require("./AssistiveText");
|
|
23
23
|
var _TypeAheadListItem = require("./TypeAheadListItem");
|
|
24
24
|
var _templateObject;
|
|
25
|
-
/** @jsx jsx */
|
|
26
25
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
26
|
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; }
|
|
28
27
|
var LIST_ITEM_ESTIMATED_HEIGHT = _TypeAheadListItem.ICON_HEIGHT + _TypeAheadListItem.ITEM_PADDING * 2;
|
|
@@ -30,7 +29,7 @@ var LIST_WIDTH = 320;
|
|
|
30
29
|
var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
|
|
31
30
|
var numberOfResults = _ref.numberOfResults;
|
|
32
31
|
var intl = (0, _reactIntlNext.useIntl)();
|
|
33
|
-
return
|
|
32
|
+
return /*#__PURE__*/_react.default.createElement(_AssistiveText.AssistiveText, {
|
|
34
33
|
assistiveText: intl.formatMessage(_messages.typeAheadListMessages.searchResultsLabel, {
|
|
35
34
|
itemsLength: numberOfResults
|
|
36
35
|
})
|
|
@@ -229,21 +228,21 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
|
|
|
229
228
|
style = _ref4.style,
|
|
230
229
|
parent = _ref4.parent;
|
|
231
230
|
var currentItem = items[index];
|
|
232
|
-
return
|
|
231
|
+
return /*#__PURE__*/_react.default.createElement(_CellMeasurer.CellMeasurer, {
|
|
233
232
|
key: key,
|
|
234
233
|
cache: cache,
|
|
235
234
|
parent: parent,
|
|
236
235
|
columnIndex: 0,
|
|
237
236
|
rowIndex: index
|
|
238
|
-
},
|
|
237
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
239
238
|
style: style,
|
|
240
239
|
"data-index": index
|
|
241
|
-
},
|
|
240
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
242
241
|
"data-testid": "list-item-height-observed-".concat(index),
|
|
243
242
|
onMouseMove: function onMouseMove(e) {
|
|
244
243
|
return _onMouseMove(e, index);
|
|
245
244
|
}
|
|
246
|
-
},
|
|
245
|
+
}, /*#__PURE__*/_react.default.createElement(_TypeAheadListItem.TypeAheadListItem, {
|
|
247
246
|
key: items[index].title,
|
|
248
247
|
item: currentItem,
|
|
249
248
|
itemsLength: items.length,
|
|
@@ -258,13 +257,13 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
|
|
|
258
257
|
return null;
|
|
259
258
|
}
|
|
260
259
|
var menuGroupId = ((_decorationElement$qu2 = decorationElement.querySelector("[role='combobox']")) === null || _decorationElement$qu2 === void 0 ? void 0 : _decorationElement$qu2.getAttribute('aria-controls')) || _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID;
|
|
261
|
-
return
|
|
260
|
+
return /*#__PURE__*/_react.default.createElement(_menu.MenuGroup, {
|
|
262
261
|
"aria-label": popupAriaLabel,
|
|
263
262
|
"aria-relevant": "additions removals"
|
|
264
|
-
},
|
|
263
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
265
264
|
id: menuGroupId,
|
|
266
265
|
ref: listContainerRef
|
|
267
|
-
},
|
|
266
|
+
}, /*#__PURE__*/_react.default.createElement(_List.List, {
|
|
268
267
|
rowRenderer: renderRow,
|
|
269
268
|
ref: listRef,
|
|
270
269
|
rowCount: items.length,
|
|
@@ -277,7 +276,7 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
|
|
|
277
276
|
containerRole: "presentation",
|
|
278
277
|
role: "listbox",
|
|
279
278
|
css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n button {\n padding: ", "\n ", " 11px;\n span:last-child span:last-child {\n white-space: normal;\n }\n }\n "])), "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)")
|
|
280
|
-
}),
|
|
279
|
+
}), /*#__PURE__*/_react.default.createElement(TypeaheadAssistiveTextPureComponent, {
|
|
281
280
|
numberOfResults: items.length.toString()
|
|
282
281
|
})));
|
|
283
282
|
});
|
|
@@ -19,7 +19,6 @@ var _colors = require("@atlaskit/theme/colors");
|
|
|
19
19
|
var _constants = require("@atlaskit/theme/constants");
|
|
20
20
|
var _messages = require("../messages");
|
|
21
21
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
22
|
-
/** @jsx jsx */
|
|
23
22
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
24
23
|
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; }
|
|
25
24
|
var ICON_HEIGHT = exports.ICON_HEIGHT = 40;
|
|
@@ -53,7 +52,7 @@ var selectionFrame = {
|
|
|
53
52
|
var selectedStyle = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n box-shadow: inset 2px 0px 0px ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"), "var(--ds-border-focused, ".concat(_colors.B400, ")"));
|
|
54
53
|
var FallbackIcon = /*#__PURE__*/_react.default.memo(function (_ref) {
|
|
55
54
|
var label = _ref.label;
|
|
56
|
-
return
|
|
55
|
+
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconFallback, null);
|
|
57
56
|
});
|
|
58
57
|
var noop = function noop() {};
|
|
59
58
|
var AssistiveText = function AssistiveText(_ref2) {
|
|
@@ -63,7 +62,7 @@ var AssistiveText = function AssistiveText(_ref2) {
|
|
|
63
62
|
var intl = (0, _reactIntlNext.useIntl)();
|
|
64
63
|
var descriptionText = description ? " ".concat(intl.formatMessage(_messages.typeAheadListMessages.descriptionLabel), " ").concat(description, ".") : '';
|
|
65
64
|
var shortcutText = shortcut ? " ".concat(intl.formatMessage(_messages.typeAheadListMessages.shortcutLabel), " ").concat(shortcut, ".") : '';
|
|
66
|
-
return
|
|
65
|
+
return /*#__PURE__*/_react.default.createElement("span", {
|
|
67
66
|
className: "assistive"
|
|
68
67
|
}, "".concat(title, ". ").concat(descriptionText, " ").concat(shortcutText));
|
|
69
68
|
};
|
|
@@ -83,9 +82,9 @@ var TypeAheadListItem = exports.TypeAheadListItem = function TypeAheadListItem(_
|
|
|
83
82
|
title = item.title,
|
|
84
83
|
customRenderItem = item.render;
|
|
85
84
|
var elementIcon = (0, _react.useMemo)(function () {
|
|
86
|
-
return
|
|
85
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
87
86
|
css: itemIcon
|
|
88
|
-
}, icon ? icon() :
|
|
87
|
+
}, icon ? icon() : /*#__PURE__*/_react.default.createElement(FallbackIcon, {
|
|
89
88
|
label: title
|
|
90
89
|
}));
|
|
91
90
|
}, [icon, title]);
|
|
@@ -113,7 +112,7 @@ var TypeAheadListItem = exports.TypeAheadListItem = function TypeAheadListItem(_
|
|
|
113
112
|
}
|
|
114
113
|
var Comp = customRenderItem;
|
|
115
114
|
var listItemClasses = [customRenderItemDivStyle, isSelected && selectedStyle];
|
|
116
|
-
return
|
|
115
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
117
116
|
"aria-selected": isSelected,
|
|
118
117
|
role: "option",
|
|
119
118
|
"aria-label": ariaLabel,
|
|
@@ -125,9 +124,9 @@ var TypeAheadListItem = exports.TypeAheadListItem = function TypeAheadListItem(_
|
|
|
125
124
|
//CSS classes added for test cases purpose
|
|
126
125
|
,
|
|
127
126
|
ref: customItemRef
|
|
128
|
-
},
|
|
127
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
129
128
|
"aria-hidden": true
|
|
130
|
-
},
|
|
129
|
+
}, /*#__PURE__*/_react.default.createElement(Comp, {
|
|
131
130
|
onClick: insertSelectedItem,
|
|
132
131
|
isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
|
|
133
132
|
,
|
|
@@ -138,9 +137,9 @@ var TypeAheadListItem = exports.TypeAheadListItem = function TypeAheadListItem(_
|
|
|
138
137
|
return customItem;
|
|
139
138
|
}
|
|
140
139
|
var listItemClasses = [selectionFrame, isSelected && selectedStyle];
|
|
141
|
-
return
|
|
140
|
+
return /*#__PURE__*/_react.default.createElement("span", {
|
|
142
141
|
css: listItemClasses
|
|
143
|
-
},
|
|
142
|
+
}, /*#__PURE__*/_react.default.createElement(_menu.ButtonItem, {
|
|
144
143
|
onClick: insertSelectedItem,
|
|
145
144
|
iconBefore: elementIcon,
|
|
146
145
|
isSelected: isSelected,
|
|
@@ -153,21 +152,21 @@ var TypeAheadListItem = exports.TypeAheadListItem = function TypeAheadListItem(_
|
|
|
153
152
|
// @ts-ignore
|
|
154
153
|
,
|
|
155
154
|
css: listItemClasses
|
|
156
|
-
},
|
|
155
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
157
156
|
"aria-hidden": true
|
|
158
|
-
},
|
|
157
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
159
158
|
css: itemText
|
|
160
|
-
},
|
|
159
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
161
160
|
css: itemBody
|
|
162
|
-
},
|
|
161
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
163
162
|
className: "item-title"
|
|
164
|
-
}, item.title),
|
|
163
|
+
}, item.title), /*#__PURE__*/_react.default.createElement("div", {
|
|
165
164
|
css: itemAfter
|
|
166
|
-
}, item.keyshortcut &&
|
|
165
|
+
}, item.keyshortcut && /*#__PURE__*/_react.default.createElement("div", {
|
|
167
166
|
css: _shortcut.shortcutStyle
|
|
168
|
-
}, item.keyshortcut))),
|
|
167
|
+
}, item.keyshortcut))), /*#__PURE__*/_react.default.createElement("div", {
|
|
169
168
|
className: "item-description"
|
|
170
|
-
}, item.description))),
|
|
169
|
+
}, item.description))), /*#__PURE__*/_react.default.createElement(AssistiveText, {
|
|
171
170
|
title: item.title,
|
|
172
171
|
description: item.description,
|
|
173
172
|
shortcut: item.keyshortcut
|
|
@@ -20,7 +20,6 @@ var _constants2 = require("../constants");
|
|
|
20
20
|
var _TypeAheadList = require("./TypeAheadList");
|
|
21
21
|
var _TypeAheadListItem = require("./TypeAheadListItem");
|
|
22
22
|
var _templateObject;
|
|
23
|
-
/** @jsx jsx */
|
|
24
23
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
25
24
|
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; }
|
|
26
25
|
var DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
|
|
@@ -200,7 +199,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
|
|
|
200
199
|
element === null || element === void 0 || element.removeEventListener('keydown', escape);
|
|
201
200
|
};
|
|
202
201
|
}, [ref, cancel]);
|
|
203
|
-
return
|
|
202
|
+
return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
|
|
204
203
|
zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
|
|
205
204
|
target: anchorElement,
|
|
206
205
|
mountTo: popupsMountPoint,
|
|
@@ -209,15 +208,15 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
|
|
|
209
208
|
fitHeight: fitHeight,
|
|
210
209
|
fitWidth: 340,
|
|
211
210
|
offset: OFFSET
|
|
212
|
-
},
|
|
211
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
213
212
|
css: typeAheadContent,
|
|
214
213
|
tabIndex: 0,
|
|
215
214
|
className: _constants2.TYPE_AHEAD_POPUP_CONTENT_CLASS,
|
|
216
215
|
ref: ref
|
|
217
|
-
},
|
|
216
|
+
}, /*#__PURE__*/_react.default.createElement(Highlight, {
|
|
218
217
|
state: editorView.state,
|
|
219
218
|
triggerHandler: triggerHandler
|
|
220
|
-
}),
|
|
219
|
+
}), /*#__PURE__*/_react.default.createElement(_TypeAheadList.TypeAheadList, {
|
|
221
220
|
items: items,
|
|
222
221
|
selectedIndex: selectedIndex,
|
|
223
222
|
onItemClick: onItemInsert,
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
/** @jsx jsx */
|
|
3
|
-
|
|
4
2
|
import React from 'react';
|
|
5
|
-
import { css
|
|
3
|
+
import { css } from '@emotion/react';
|
|
6
4
|
import debounce from 'lodash/debounce';
|
|
7
5
|
const statusDebounceMillis = 1400;
|
|
8
6
|
const assitiveTextStyles = css({
|
|
@@ -63,14 +61,14 @@ class AssistveTextComponent extends React.Component {
|
|
|
63
61
|
silenced
|
|
64
62
|
} = this.state;
|
|
65
63
|
this.debounceStatusUpdate();
|
|
66
|
-
return
|
|
64
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
67
65
|
css: assitiveTextStyles
|
|
68
|
-
},
|
|
66
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
69
67
|
id: id + '__status--A',
|
|
70
68
|
role: "status",
|
|
71
69
|
"aria-atomic": "true",
|
|
72
70
|
"aria-live": "polite"
|
|
73
|
-
}, `${!silenced && debounced && bump ? assistiveText : ''}`),
|
|
71
|
+
}, `${!silenced && debounced && bump ? assistiveText : ''}`), /*#__PURE__*/React.createElement("div", {
|
|
74
72
|
id: id + '__status--B',
|
|
75
73
|
role: "status",
|
|
76
74
|
"aria-atomic": "true",
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
1
|
import React, { Fragment, useCallback, useLayoutEffect, useRef, useState } from 'react';
|
|
3
|
-
import { css
|
|
2
|
+
import { css } from '@emotion/react';
|
|
4
3
|
import { useIntl } from 'react-intl-next';
|
|
5
4
|
import { keyName as keyNameNormalized } from 'w3c-keyname';
|
|
6
5
|
import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
|
|
@@ -360,7 +359,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
|
|
|
360
359
|
jsx-a11y/interactive-supports-focus
|
|
361
360
|
Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
|
|
362
361
|
*/
|
|
363
|
-
return
|
|
362
|
+
return /*#__PURE__*/React.createElement(Fragment, null, triggerQueryPrefix, /*#__PURE__*/React.createElement("span", {
|
|
364
363
|
css: querySpanStyles,
|
|
365
364
|
contentEditable: true,
|
|
366
365
|
ref: ref,
|
|
@@ -373,15 +372,15 @@ export const InputQuery = /*#__PURE__*/React.memo(({
|
|
|
373
372
|
"aria-labelledby": assistiveHintID,
|
|
374
373
|
suppressContentEditableWarning: true,
|
|
375
374
|
"data-query-prefix": triggerQueryPrefix
|
|
376
|
-
}, query === null ?
|
|
375
|
+
}, query === null ? /*#__PURE__*/React.createElement("input", {
|
|
377
376
|
ref: inputRef,
|
|
378
377
|
type: "text"
|
|
379
|
-
}) : query),
|
|
378
|
+
}) : query), /*#__PURE__*/React.createElement("span", {
|
|
380
379
|
id: assistiveHintID,
|
|
381
380
|
style: {
|
|
382
381
|
display: 'none'
|
|
383
382
|
}
|
|
384
|
-
}, intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl)), ",", intl.formatMessage(typeAheadListMessages.inputQueryAssistiveLabel)),
|
|
383
|
+
}, intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl)), ",", intl.formatMessage(typeAheadListMessages.inputQueryAssistiveLabel)), /*#__PURE__*/React.createElement(AssistiveText, {
|
|
385
384
|
assistiveText: items.length === 0 ? intl.formatMessage(typeAheadListMessages.noSearchResultsLabel, {
|
|
386
385
|
itemsLength: items.length
|
|
387
386
|
}) : '',
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
|
|
3
1
|
import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
4
|
-
import { css
|
|
2
|
+
import { css } from '@emotion/react';
|
|
5
3
|
import { injectIntl, useIntl } from 'react-intl-next';
|
|
6
4
|
import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
|
|
7
5
|
import { List } from 'react-virtualized/dist/commonjs/List';
|
|
@@ -19,7 +17,7 @@ const TypeaheadAssistiveTextPureComponent = /*#__PURE__*/React.memo(({
|
|
|
19
17
|
numberOfResults
|
|
20
18
|
}) => {
|
|
21
19
|
const intl = useIntl();
|
|
22
|
-
return
|
|
20
|
+
return /*#__PURE__*/React.createElement(AssistiveText, {
|
|
23
21
|
assistiveText: intl.formatMessage(typeAheadListMessages.searchResultsLabel, {
|
|
24
22
|
itemsLength: numberOfResults
|
|
25
23
|
})
|
|
@@ -211,19 +209,19 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
|
|
|
211
209
|
parent
|
|
212
210
|
}) => {
|
|
213
211
|
const currentItem = items[index];
|
|
214
|
-
return
|
|
212
|
+
return /*#__PURE__*/React.createElement(CellMeasurer, {
|
|
215
213
|
key: key,
|
|
216
214
|
cache: cache,
|
|
217
215
|
parent: parent,
|
|
218
216
|
columnIndex: 0,
|
|
219
217
|
rowIndex: index
|
|
220
|
-
},
|
|
218
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
221
219
|
style: style,
|
|
222
220
|
"data-index": index
|
|
223
|
-
},
|
|
221
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
224
222
|
"data-testid": `list-item-height-observed-${index}`,
|
|
225
223
|
onMouseMove: e => onMouseMove(e, index)
|
|
226
|
-
},
|
|
224
|
+
}, /*#__PURE__*/React.createElement(TypeAheadListItem, {
|
|
227
225
|
key: items[index].title,
|
|
228
226
|
item: currentItem,
|
|
229
227
|
itemsLength: items.length,
|
|
@@ -238,13 +236,13 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
|
|
|
238
236
|
return null;
|
|
239
237
|
}
|
|
240
238
|
const menuGroupId = ((_decorationElement$qu2 = decorationElement.querySelector(`[role='combobox']`)) === null || _decorationElement$qu2 === void 0 ? void 0 : _decorationElement$qu2.getAttribute('aria-controls')) || TYPE_AHEAD_DECORATION_ELEMENT_ID;
|
|
241
|
-
return
|
|
239
|
+
return /*#__PURE__*/React.createElement(MenuGroup, {
|
|
242
240
|
"aria-label": popupAriaLabel,
|
|
243
241
|
"aria-relevant": "additions removals"
|
|
244
|
-
},
|
|
242
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
245
243
|
id: menuGroupId,
|
|
246
244
|
ref: listContainerRef
|
|
247
|
-
},
|
|
245
|
+
}, /*#__PURE__*/React.createElement(List, {
|
|
248
246
|
rowRenderer: renderRow,
|
|
249
247
|
ref: listRef,
|
|
250
248
|
rowCount: items.length,
|
|
@@ -265,7 +263,7 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
|
|
|
265
263
|
}
|
|
266
264
|
}
|
|
267
265
|
`
|
|
268
|
-
}),
|
|
266
|
+
}), /*#__PURE__*/React.createElement(TypeaheadAssistiveTextPureComponent, {
|
|
269
267
|
numberOfResults: items.length.toString()
|
|
270
268
|
})));
|
|
271
269
|
});
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
1
|
import React, { useCallback, useLayoutEffect, useMemo } from 'react';
|
|
3
|
-
import { css
|
|
2
|
+
import { css } from '@emotion/react';
|
|
4
3
|
import { useIntl } from 'react-intl-next';
|
|
5
4
|
import { IconFallback } from '@atlaskit/editor-common/quick-insert';
|
|
6
5
|
import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
|
|
@@ -86,7 +85,7 @@ const selectedStyle = css`
|
|
|
86
85
|
const FallbackIcon = /*#__PURE__*/React.memo(({
|
|
87
86
|
label
|
|
88
87
|
}) => {
|
|
89
|
-
return
|
|
88
|
+
return /*#__PURE__*/React.createElement(IconFallback, null);
|
|
90
89
|
});
|
|
91
90
|
const noop = () => {};
|
|
92
91
|
const AssistiveText = ({
|
|
@@ -97,7 +96,7 @@ const AssistiveText = ({
|
|
|
97
96
|
const intl = useIntl();
|
|
98
97
|
const descriptionText = description ? ` ${intl.formatMessage(typeAheadListMessages.descriptionLabel)} ${description}.` : '';
|
|
99
98
|
const shortcutText = shortcut ? ` ${intl.formatMessage(typeAheadListMessages.shortcutLabel)} ${shortcut}.` : '';
|
|
100
|
-
return
|
|
99
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
101
100
|
className: "assistive"
|
|
102
101
|
}, `${title}. ${descriptionText} ${shortcutText}`);
|
|
103
102
|
};
|
|
@@ -120,9 +119,9 @@ export const TypeAheadListItem = ({
|
|
|
120
119
|
render: customRenderItem
|
|
121
120
|
} = item;
|
|
122
121
|
const elementIcon = useMemo(() => {
|
|
123
|
-
return
|
|
122
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
124
123
|
css: itemIcon
|
|
125
|
-
}, icon ? icon() :
|
|
124
|
+
}, icon ? icon() : /*#__PURE__*/React.createElement(FallbackIcon, {
|
|
126
125
|
label: title
|
|
127
126
|
}));
|
|
128
127
|
}, [icon, title]);
|
|
@@ -150,7 +149,7 @@ export const TypeAheadListItem = ({
|
|
|
150
149
|
}
|
|
151
150
|
const Comp = customRenderItem;
|
|
152
151
|
const listItemClasses = [customRenderItemDivStyle, isSelected && selectedStyle];
|
|
153
|
-
return
|
|
152
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
154
153
|
"aria-selected": isSelected,
|
|
155
154
|
role: "option",
|
|
156
155
|
"aria-label": ariaLabel,
|
|
@@ -162,9 +161,9 @@ export const TypeAheadListItem = ({
|
|
|
162
161
|
//CSS classes added for test cases purpose
|
|
163
162
|
,
|
|
164
163
|
ref: customItemRef
|
|
165
|
-
},
|
|
164
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
166
165
|
"aria-hidden": true
|
|
167
|
-
},
|
|
166
|
+
}, /*#__PURE__*/React.createElement(Comp, {
|
|
168
167
|
onClick: insertSelectedItem,
|
|
169
168
|
isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
|
|
170
169
|
,
|
|
@@ -175,9 +174,9 @@ export const TypeAheadListItem = ({
|
|
|
175
174
|
return customItem;
|
|
176
175
|
}
|
|
177
176
|
const listItemClasses = [selectionFrame, isSelected && selectedStyle];
|
|
178
|
-
return
|
|
177
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
179
178
|
css: listItemClasses
|
|
180
|
-
},
|
|
179
|
+
}, /*#__PURE__*/React.createElement(ButtonItem, {
|
|
181
180
|
onClick: insertSelectedItem,
|
|
182
181
|
iconBefore: elementIcon,
|
|
183
182
|
isSelected: isSelected,
|
|
@@ -190,21 +189,21 @@ export const TypeAheadListItem = ({
|
|
|
190
189
|
// @ts-ignore
|
|
191
190
|
,
|
|
192
191
|
css: listItemClasses
|
|
193
|
-
},
|
|
192
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
194
193
|
"aria-hidden": true
|
|
195
|
-
},
|
|
194
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
196
195
|
css: itemText
|
|
197
|
-
},
|
|
196
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
198
197
|
css: itemBody
|
|
199
|
-
},
|
|
198
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
200
199
|
className: "item-title"
|
|
201
|
-
}, item.title),
|
|
200
|
+
}, item.title), /*#__PURE__*/React.createElement("div", {
|
|
202
201
|
css: itemAfter
|
|
203
|
-
}, item.keyshortcut &&
|
|
202
|
+
}, item.keyshortcut && /*#__PURE__*/React.createElement("div", {
|
|
204
203
|
css: shortcutStyle
|
|
205
|
-
}, item.keyshortcut))),
|
|
204
|
+
}, item.keyshortcut))), /*#__PURE__*/React.createElement("div", {
|
|
206
205
|
className: "item-description"
|
|
207
|
-
}, item.description))),
|
|
206
|
+
}, item.description))), /*#__PURE__*/React.createElement(AssistiveText, {
|
|
208
207
|
title: item.title,
|
|
209
208
|
description: item.description,
|
|
210
209
|
shortcut: item.keyshortcut
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
1
|
import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
3
|
-
import { css
|
|
2
|
+
import { css } from '@emotion/react';
|
|
4
3
|
import rafSchedule from 'raf-schd';
|
|
5
4
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
6
5
|
import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
|
|
@@ -203,7 +202,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
|
|
|
203
202
|
element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', escape);
|
|
204
203
|
};
|
|
205
204
|
}, [ref, cancel]);
|
|
206
|
-
return
|
|
205
|
+
return /*#__PURE__*/React.createElement(Popup, {
|
|
207
206
|
zIndex: akEditorFloatingDialogZIndex,
|
|
208
207
|
target: anchorElement,
|
|
209
208
|
mountTo: popupsMountPoint,
|
|
@@ -212,15 +211,15 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
|
|
|
212
211
|
fitHeight: fitHeight,
|
|
213
212
|
fitWidth: 340,
|
|
214
213
|
offset: OFFSET
|
|
215
|
-
},
|
|
214
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
216
215
|
css: typeAheadContent,
|
|
217
216
|
tabIndex: 0,
|
|
218
217
|
className: TYPE_AHEAD_POPUP_CONTENT_CLASS,
|
|
219
218
|
ref: ref
|
|
220
|
-
},
|
|
219
|
+
}, /*#__PURE__*/React.createElement(Highlight, {
|
|
221
220
|
state: editorView.state,
|
|
222
221
|
triggerHandler: triggerHandler
|
|
223
|
-
}),
|
|
222
|
+
}), /*#__PURE__*/React.createElement(TypeAheadList, {
|
|
224
223
|
items: items,
|
|
225
224
|
selectedIndex: selectedIndex,
|
|
226
225
|
onItemClick: onItemInsert,
|
|
@@ -7,10 +7,8 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
|
7
7
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
8
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
9
9
|
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; } }
|
|
10
|
-
/** @jsx jsx */
|
|
11
|
-
|
|
12
10
|
import React from 'react';
|
|
13
|
-
import { css
|
|
11
|
+
import { css } from '@emotion/react';
|
|
14
12
|
import debounce from 'lodash/debounce';
|
|
15
13
|
var statusDebounceMillis = 1400;
|
|
16
14
|
var assitiveTextStyles = css({
|
|
@@ -88,14 +86,14 @@ var AssistveTextComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
88
86
|
debounced = _this$state.debounced,
|
|
89
87
|
silenced = _this$state.silenced;
|
|
90
88
|
this.debounceStatusUpdate();
|
|
91
|
-
return
|
|
89
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
92
90
|
css: assitiveTextStyles
|
|
93
|
-
},
|
|
91
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
94
92
|
id: id + '__status--A',
|
|
95
93
|
role: "status",
|
|
96
94
|
"aria-atomic": "true",
|
|
97
95
|
"aria-live": "polite"
|
|
98
|
-
}, "".concat(!silenced && debounced && bump ? assistiveText : '')),
|
|
96
|
+
}, "".concat(!silenced && debounced && bump ? assistiveText : '')), /*#__PURE__*/React.createElement("div", {
|
|
99
97
|
id: id + '__status--B',
|
|
100
98
|
role: "status",
|
|
101
99
|
"aria-atomic": "true",
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
-
/** @jsx jsx */
|
|
3
2
|
import React, { Fragment, useCallback, useLayoutEffect, useRef, useState } from 'react';
|
|
4
|
-
import { css
|
|
3
|
+
import { css } from '@emotion/react';
|
|
5
4
|
import { useIntl } from 'react-intl-next';
|
|
6
5
|
import { keyName as keyNameNormalized } from 'w3c-keyname';
|
|
7
6
|
import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
|
|
@@ -357,7 +356,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
357
356
|
jsx-a11y/interactive-supports-focus
|
|
358
357
|
Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
|
|
359
358
|
*/
|
|
360
|
-
return
|
|
359
|
+
return /*#__PURE__*/React.createElement(Fragment, null, triggerQueryPrefix, /*#__PURE__*/React.createElement("span", {
|
|
361
360
|
css: querySpanStyles,
|
|
362
361
|
contentEditable: true,
|
|
363
362
|
ref: ref,
|
|
@@ -370,15 +369,15 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
370
369
|
"aria-labelledby": assistiveHintID,
|
|
371
370
|
suppressContentEditableWarning: true,
|
|
372
371
|
"data-query-prefix": triggerQueryPrefix
|
|
373
|
-
}, query === null ?
|
|
372
|
+
}, query === null ? /*#__PURE__*/React.createElement("input", {
|
|
374
373
|
ref: inputRef,
|
|
375
374
|
type: "text"
|
|
376
|
-
}) : query),
|
|
375
|
+
}) : query), /*#__PURE__*/React.createElement("span", {
|
|
377
376
|
id: assistiveHintID,
|
|
378
377
|
style: {
|
|
379
378
|
display: 'none'
|
|
380
379
|
}
|
|
381
|
-
}, intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl)), ",", intl.formatMessage(typeAheadListMessages.inputQueryAssistiveLabel)),
|
|
380
|
+
}, intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl)), ",", intl.formatMessage(typeAheadListMessages.inputQueryAssistiveLabel)), /*#__PURE__*/React.createElement(AssistiveText, {
|
|
382
381
|
assistiveText: items.length === 0 ? intl.formatMessage(typeAheadListMessages.noSearchResultsLabel, {
|
|
383
382
|
itemsLength: items.length
|
|
384
383
|
}) : '',
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
var _templateObject;
|
|
4
|
-
/** @jsx jsx */
|
|
5
|
-
|
|
6
4
|
import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
7
|
-
import { css
|
|
5
|
+
import { css } from '@emotion/react';
|
|
8
6
|
import { injectIntl, useIntl } from 'react-intl-next';
|
|
9
7
|
import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
|
|
10
8
|
import { List } from 'react-virtualized/dist/commonjs/List';
|
|
@@ -21,7 +19,7 @@ var LIST_WIDTH = 320;
|
|
|
21
19
|
var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/React.memo(function (_ref) {
|
|
22
20
|
var numberOfResults = _ref.numberOfResults;
|
|
23
21
|
var intl = useIntl();
|
|
24
|
-
return
|
|
22
|
+
return /*#__PURE__*/React.createElement(AssistiveText, {
|
|
25
23
|
assistiveText: intl.formatMessage(typeAheadListMessages.searchResultsLabel, {
|
|
26
24
|
itemsLength: numberOfResults
|
|
27
25
|
})
|
|
@@ -220,21 +218,21 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
|
|
|
220
218
|
style = _ref4.style,
|
|
221
219
|
parent = _ref4.parent;
|
|
222
220
|
var currentItem = items[index];
|
|
223
|
-
return
|
|
221
|
+
return /*#__PURE__*/React.createElement(CellMeasurer, {
|
|
224
222
|
key: key,
|
|
225
223
|
cache: cache,
|
|
226
224
|
parent: parent,
|
|
227
225
|
columnIndex: 0,
|
|
228
226
|
rowIndex: index
|
|
229
|
-
},
|
|
227
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
230
228
|
style: style,
|
|
231
229
|
"data-index": index
|
|
232
|
-
},
|
|
230
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
233
231
|
"data-testid": "list-item-height-observed-".concat(index),
|
|
234
232
|
onMouseMove: function onMouseMove(e) {
|
|
235
233
|
return _onMouseMove(e, index);
|
|
236
234
|
}
|
|
237
|
-
},
|
|
235
|
+
}, /*#__PURE__*/React.createElement(TypeAheadListItem, {
|
|
238
236
|
key: items[index].title,
|
|
239
237
|
item: currentItem,
|
|
240
238
|
itemsLength: items.length,
|
|
@@ -249,13 +247,13 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
|
|
|
249
247
|
return null;
|
|
250
248
|
}
|
|
251
249
|
var menuGroupId = ((_decorationElement$qu2 = decorationElement.querySelector("[role='combobox']")) === null || _decorationElement$qu2 === void 0 ? void 0 : _decorationElement$qu2.getAttribute('aria-controls')) || TYPE_AHEAD_DECORATION_ELEMENT_ID;
|
|
252
|
-
return
|
|
250
|
+
return /*#__PURE__*/React.createElement(MenuGroup, {
|
|
253
251
|
"aria-label": popupAriaLabel,
|
|
254
252
|
"aria-relevant": "additions removals"
|
|
255
|
-
},
|
|
253
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
256
254
|
id: menuGroupId,
|
|
257
255
|
ref: listContainerRef
|
|
258
|
-
},
|
|
256
|
+
}, /*#__PURE__*/React.createElement(List, {
|
|
259
257
|
rowRenderer: renderRow,
|
|
260
258
|
ref: listRef,
|
|
261
259
|
rowCount: items.length,
|
|
@@ -268,7 +266,7 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
|
|
|
268
266
|
containerRole: "presentation",
|
|
269
267
|
role: "listbox",
|
|
270
268
|
css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n button {\n padding: ", "\n ", " 11px;\n span:last-child span:last-child {\n white-space: normal;\n }\n }\n "])), "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)")
|
|
271
|
-
}),
|
|
269
|
+
}), /*#__PURE__*/React.createElement(TypeaheadAssistiveTextPureComponent, {
|
|
272
270
|
numberOfResults: items.length.toString()
|
|
273
271
|
})));
|
|
274
272
|
});
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
2
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
3
|
-
/** @jsx jsx */
|
|
4
3
|
import React, { useCallback, useLayoutEffect, useMemo } from 'react';
|
|
5
|
-
import { css
|
|
4
|
+
import { css } from '@emotion/react';
|
|
6
5
|
import { useIntl } from 'react-intl-next';
|
|
7
6
|
import { IconFallback } from '@atlaskit/editor-common/quick-insert';
|
|
8
7
|
import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
|
|
@@ -43,7 +42,7 @@ var selectionFrame = {
|
|
|
43
42
|
var selectedStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n background-color: ", ";\n box-shadow: inset 2px 0px 0px ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"), "var(--ds-border-focused, ".concat(B400, ")"));
|
|
44
43
|
var FallbackIcon = /*#__PURE__*/React.memo(function (_ref) {
|
|
45
44
|
var label = _ref.label;
|
|
46
|
-
return
|
|
45
|
+
return /*#__PURE__*/React.createElement(IconFallback, null);
|
|
47
46
|
});
|
|
48
47
|
var noop = function noop() {};
|
|
49
48
|
var AssistiveText = function AssistiveText(_ref2) {
|
|
@@ -53,7 +52,7 @@ var AssistiveText = function AssistiveText(_ref2) {
|
|
|
53
52
|
var intl = useIntl();
|
|
54
53
|
var descriptionText = description ? " ".concat(intl.formatMessage(typeAheadListMessages.descriptionLabel), " ").concat(description, ".") : '';
|
|
55
54
|
var shortcutText = shortcut ? " ".concat(intl.formatMessage(typeAheadListMessages.shortcutLabel), " ").concat(shortcut, ".") : '';
|
|
56
|
-
return
|
|
55
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
57
56
|
className: "assistive"
|
|
58
57
|
}, "".concat(title, ". ").concat(descriptionText, " ").concat(shortcutText));
|
|
59
58
|
};
|
|
@@ -73,9 +72,9 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref3) {
|
|
|
73
72
|
title = item.title,
|
|
74
73
|
customRenderItem = item.render;
|
|
75
74
|
var elementIcon = useMemo(function () {
|
|
76
|
-
return
|
|
75
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
77
76
|
css: itemIcon
|
|
78
|
-
}, icon ? icon() :
|
|
77
|
+
}, icon ? icon() : /*#__PURE__*/React.createElement(FallbackIcon, {
|
|
79
78
|
label: title
|
|
80
79
|
}));
|
|
81
80
|
}, [icon, title]);
|
|
@@ -103,7 +102,7 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref3) {
|
|
|
103
102
|
}
|
|
104
103
|
var Comp = customRenderItem;
|
|
105
104
|
var listItemClasses = [customRenderItemDivStyle, isSelected && selectedStyle];
|
|
106
|
-
return
|
|
105
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
107
106
|
"aria-selected": isSelected,
|
|
108
107
|
role: "option",
|
|
109
108
|
"aria-label": ariaLabel,
|
|
@@ -115,9 +114,9 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref3) {
|
|
|
115
114
|
//CSS classes added for test cases purpose
|
|
116
115
|
,
|
|
117
116
|
ref: customItemRef
|
|
118
|
-
},
|
|
117
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
119
118
|
"aria-hidden": true
|
|
120
|
-
},
|
|
119
|
+
}, /*#__PURE__*/React.createElement(Comp, {
|
|
121
120
|
onClick: insertSelectedItem,
|
|
122
121
|
isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
|
|
123
122
|
,
|
|
@@ -128,9 +127,9 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref3) {
|
|
|
128
127
|
return customItem;
|
|
129
128
|
}
|
|
130
129
|
var listItemClasses = [selectionFrame, isSelected && selectedStyle];
|
|
131
|
-
return
|
|
130
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
132
131
|
css: listItemClasses
|
|
133
|
-
},
|
|
132
|
+
}, /*#__PURE__*/React.createElement(ButtonItem, {
|
|
134
133
|
onClick: insertSelectedItem,
|
|
135
134
|
iconBefore: elementIcon,
|
|
136
135
|
isSelected: isSelected,
|
|
@@ -143,21 +142,21 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref3) {
|
|
|
143
142
|
// @ts-ignore
|
|
144
143
|
,
|
|
145
144
|
css: listItemClasses
|
|
146
|
-
},
|
|
145
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
147
146
|
"aria-hidden": true
|
|
148
|
-
},
|
|
147
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
149
148
|
css: itemText
|
|
150
|
-
},
|
|
149
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
151
150
|
css: itemBody
|
|
152
|
-
},
|
|
151
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
153
152
|
className: "item-title"
|
|
154
|
-
}, item.title),
|
|
153
|
+
}, item.title), /*#__PURE__*/React.createElement("div", {
|
|
155
154
|
css: itemAfter
|
|
156
|
-
}, item.keyshortcut &&
|
|
155
|
+
}, item.keyshortcut && /*#__PURE__*/React.createElement("div", {
|
|
157
156
|
css: shortcutStyle
|
|
158
|
-
}, item.keyshortcut))),
|
|
157
|
+
}, item.keyshortcut))), /*#__PURE__*/React.createElement("div", {
|
|
159
158
|
className: "item-description"
|
|
160
|
-
}, item.description))),
|
|
159
|
+
}, item.description))), /*#__PURE__*/React.createElement(AssistiveText, {
|
|
161
160
|
title: item.title,
|
|
162
161
|
description: item.description,
|
|
163
162
|
shortcut: item.keyshortcut
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
3
3
|
var _templateObject;
|
|
4
|
-
/** @jsx jsx */
|
|
5
4
|
import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
6
|
-
import { css
|
|
5
|
+
import { css } from '@emotion/react';
|
|
7
6
|
import rafSchedule from 'raf-schd';
|
|
8
7
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
9
8
|
import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
|
|
@@ -190,7 +189,7 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
|
|
|
190
189
|
element === null || element === void 0 || element.removeEventListener('keydown', escape);
|
|
191
190
|
};
|
|
192
191
|
}, [ref, cancel]);
|
|
193
|
-
return
|
|
192
|
+
return /*#__PURE__*/React.createElement(Popup, {
|
|
194
193
|
zIndex: akEditorFloatingDialogZIndex,
|
|
195
194
|
target: anchorElement,
|
|
196
195
|
mountTo: popupsMountPoint,
|
|
@@ -199,15 +198,15 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
|
|
|
199
198
|
fitHeight: fitHeight,
|
|
200
199
|
fitWidth: 340,
|
|
201
200
|
offset: OFFSET
|
|
202
|
-
},
|
|
201
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
203
202
|
css: typeAheadContent,
|
|
204
203
|
tabIndex: 0,
|
|
205
204
|
className: TYPE_AHEAD_POPUP_CONTENT_CLASS,
|
|
206
205
|
ref: ref
|
|
207
|
-
},
|
|
206
|
+
}, /*#__PURE__*/React.createElement(Highlight, {
|
|
208
207
|
state: editorView.state,
|
|
209
208
|
triggerHandler: triggerHandler
|
|
210
|
-
}),
|
|
209
|
+
}), /*#__PURE__*/React.createElement(TypeAheadList, {
|
|
211
210
|
items: items,
|
|
212
211
|
selectedIndex: selectedIndex,
|
|
213
212
|
onItemClick: onItemInsert,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-type-ahead",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.7",
|
|
4
4
|
"description": "Type-ahead plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
".": "./src/index.ts"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@atlaskit/adf-schema": "^
|
|
34
|
+
"@atlaskit/adf-schema": "^35.0.0",
|
|
35
35
|
"@atlaskit/analytics-next": "^9.1.0",
|
|
36
|
-
"@atlaskit/editor-common": "^76.
|
|
36
|
+
"@atlaskit/editor-common": "^76.24.0",
|
|
37
37
|
"@atlaskit/editor-plugin-analytics": "^0.3.0",
|
|
38
38
|
"@atlaskit/editor-prosemirror": "1.1.0",
|
|
39
39
|
"@atlaskit/editor-shared-styles": "^2.8.0",
|