@atlaskit/editor-plugin-type-ahead 20.0.3 → 20.0.5
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 +28 -0
- package/dist/cjs/ui/registered-menu/RegisteredTypeAheadMenu.js +4 -2
- package/dist/cjs/ui/registered-menu/TypeAheadMenuRenderer.js +16 -12
- package/dist/es2019/ui/registered-menu/RegisteredTypeAheadMenu.js +4 -1
- package/dist/es2019/ui/registered-menu/TypeAheadMenuRenderer.js +16 -11
- package/dist/esm/ui/registered-menu/RegisteredTypeAheadMenu.js +4 -2
- package/dist/esm/ui/registered-menu/TypeAheadMenuRenderer.js +16 -12
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,33 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-type-ahead
|
|
2
2
|
|
|
3
|
+
## 20.0.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 20.0.4
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`a1df9dd2d8f02`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a1df9dd2d8f02) -
|
|
14
|
+
Add the optional `showNoResultsMessage` empty-state handler parameter and
|
|
15
|
+
`platform_editor_slash_command`-gated Ask Rovo and View more recovery for registered quick insert
|
|
16
|
+
searches with no matches. Respect registry visibility and keep Marketplace content separate from
|
|
17
|
+
listbox navigation while preserving its native keyboard controls.
|
|
18
|
+
|
|
19
|
+
Show the registered Ask Rovo action alongside Marketplace suggestions in the element browser's
|
|
20
|
+
no-match state, with a divider separating the fallback action from Marketplace content. Keep the
|
|
21
|
+
toolbar's View more footer visible while Marketplace content scrolls and preserve native Tab
|
|
22
|
+
navigation.
|
|
23
|
+
|
|
24
|
+
Respect `data-keyboard-navigation-independent` containers in both toolbar keyboard navigation
|
|
25
|
+
providers. Apply the attribute to the registered insert menu, whose rendering is gated by
|
|
26
|
+
`platform_editor_slash_command`, so its controls retain their own key handling and native tab
|
|
27
|
+
stops.
|
|
28
|
+
|
|
29
|
+
- Updated dependencies
|
|
30
|
+
|
|
3
31
|
## 20.0.3
|
|
4
32
|
|
|
5
33
|
### Patch Changes
|
|
@@ -9,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
9
9
|
exports.RegisteredTypeAheadMenu = void 0;
|
|
10
10
|
require("./RegisteredTypeAheadMenu.compiled.css");
|
|
11
11
|
var _runtime = require("@compiled/react/runtime");
|
|
12
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
12
13
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
14
|
var _react = _interopRequireWildcard(require("react"));
|
|
14
15
|
var _reactIntl = require("react-intl");
|
|
@@ -91,8 +92,9 @@ var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function Registe
|
|
|
91
92
|
});
|
|
92
93
|
}, [components, formatMessage, hasSectionOverflowItems, isSlashCommandEnabled, query, surfaceContext, surface.root]);
|
|
93
94
|
var rows = (0, _react.useMemo)(function () {
|
|
94
|
-
|
|
95
|
-
|
|
95
|
+
var _menuModel$fallbackIt;
|
|
96
|
+
return [].concat((0, _toConsumableArray2.default)(menuModel.sections.flat()), (0, _toConsumableArray2.default)((_menuModel$fallbackIt = menuModel.fallbackItems) !== null && _menuModel$fallbackIt !== void 0 ? _menuModel$fallbackIt : []));
|
|
97
|
+
}, [menuModel.fallbackItems, menuModel.sections]);
|
|
96
98
|
var selectableRowIndexes = (0, _react.useMemo)(function () {
|
|
97
99
|
return rows.flatMap(function (registration, rowIndex) {
|
|
98
100
|
return registration.type === 'menu-item' ? [rowIndex] : [];
|
|
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.TypeAheadMenuRenderer = void 0;
|
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
10
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
12
|
var _reactIntl = require("react-intl");
|
|
12
13
|
var _CellMeasurer = require("react-virtualized/dist/commonjs/CellMeasurer");
|
|
@@ -36,8 +37,9 @@ var TypeAheadMenuRenderer = exports.TypeAheadMenuRenderer = function TypeAheadMe
|
|
|
36
37
|
var intl = (0, _reactIntl.useIntl)();
|
|
37
38
|
var listRef = (0, _react.useRef)(null);
|
|
38
39
|
var rows = (0, _react.useMemo)(function () {
|
|
39
|
-
|
|
40
|
-
|
|
40
|
+
var _model$fallbackItems;
|
|
41
|
+
return [].concat((0, _toConsumableArray2.default)(model.sections.flat()), (0, _toConsumableArray2.default)((_model$fallbackItems = model.fallbackItems) !== null && _model$fallbackItems !== void 0 ? _model$fallbackItems : []));
|
|
42
|
+
}, [model.fallbackItems, model.sections]);
|
|
41
43
|
var cache = (0, _react.useMemo)(function () {
|
|
42
44
|
return new _CellMeasurer.CellMeasurerCache({
|
|
43
45
|
defaultHeight: ESTIMATED_ROW_HEIGHT,
|
|
@@ -110,17 +112,12 @@ var TypeAheadMenuRenderer = exports.TypeAheadMenuRenderer = function TypeAheadMe
|
|
|
110
112
|
}
|
|
111
113
|
var RootComponent = (_model$root$component = model.root.component) !== null && _model$root$component !== void 0 ? _model$root$component : _PassThrough.PassThrough;
|
|
112
114
|
var listMaxHeight = Math.max(0, maxHeight - (model.footer ? MENU_FOOTER_HEIGHT : 0));
|
|
115
|
+
var hasListboxContent = rows.length > 0 || model.footer !== undefined;
|
|
113
116
|
return /*#__PURE__*/_react.default.createElement(RootComponent, null, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
114
|
-
"aria-label": intl.formatMessage(listLabel),
|
|
117
|
+
"aria-label": hasListboxContent ? intl.formatMessage(listLabel) : undefined,
|
|
115
118
|
id: listId,
|
|
116
|
-
role:
|
|
117
|
-
}, rows.length
|
|
118
|
-
paddingBlock: "space.150",
|
|
119
|
-
paddingInline: "space.250"
|
|
120
|
-
}, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
|
|
121
|
-
align: "center",
|
|
122
|
-
as: "p"
|
|
123
|
-
}, intl.formatMessage(_typeAhead.typeAheadListMessages.emptySearchResults))) : /*#__PURE__*/_react.default.createElement(_List.List, {
|
|
119
|
+
role: hasListboxContent ? 'listbox' : undefined
|
|
120
|
+
}, rows.length > 0 ? /*#__PURE__*/_react.default.createElement(_List.List, {
|
|
124
121
|
containerRole: "presentation",
|
|
125
122
|
height: Math.min(rows.length * ESTIMATED_ROW_HEIGHT, listMaxHeight),
|
|
126
123
|
overscanRowCount: 3,
|
|
@@ -131,7 +128,14 @@ var TypeAheadMenuRenderer = exports.TypeAheadMenuRenderer = function TypeAheadMe
|
|
|
131
128
|
rowRenderer: renderRow,
|
|
132
129
|
scrollToAlignment: "auto",
|
|
133
130
|
width: LIST_WIDTH
|
|
134
|
-
})
|
|
131
|
+
}) : model.fallbackItems === undefined ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
132
|
+
paddingBlock: "space.150",
|
|
133
|
+
paddingInline: "space.250",
|
|
134
|
+
role: "group"
|
|
135
|
+
}, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
|
|
136
|
+
align: "center",
|
|
137
|
+
as: "p"
|
|
138
|
+
}, intl.formatMessage(_typeAhead.typeAheadListMessages.emptySearchResults))) : null, model.footer && /*#__PURE__*/_react.default.createElement(_TypeAheadMenuFooter.TypeAheadMenuFooter, {
|
|
135
139
|
id: (0, _getTypeAheadGlobalViewMoreId.getTypeAheadGlobalViewMoreId)(listId),
|
|
136
140
|
isSelected: selectedItemIndex === footerItemIndex,
|
|
137
141
|
Item: Item,
|
|
@@ -67,7 +67,10 @@ export const RegisteredTypeAheadMenu = ({
|
|
|
67
67
|
formatMessage,
|
|
68
68
|
surfaceContext
|
|
69
69
|
}), [components, formatMessage, hasSectionOverflowItems, isSlashCommandEnabled, query, surfaceContext, surface.root]);
|
|
70
|
-
const rows = useMemo(() =>
|
|
70
|
+
const rows = useMemo(() => {
|
|
71
|
+
var _menuModel$fallbackIt;
|
|
72
|
+
return [...menuModel.sections.flat(), ...((_menuModel$fallbackIt = menuModel.fallbackItems) !== null && _menuModel$fallbackIt !== void 0 ? _menuModel$fallbackIt : [])];
|
|
73
|
+
}, [menuModel.fallbackItems, menuModel.sections]);
|
|
71
74
|
const selectableRowIndexes = useMemo(() => rows.flatMap((registration, rowIndex) => registration.type === 'menu-item' ? [rowIndex] : []), [rows]);
|
|
72
75
|
const selectableRowKeys = selectableRowIndexes.map(index => {
|
|
73
76
|
var _rows$index;
|
|
@@ -23,7 +23,10 @@ export const TypeAheadMenuRenderer = ({
|
|
|
23
23
|
var _model$root$component;
|
|
24
24
|
const intl = useIntl();
|
|
25
25
|
const listRef = useRef(null);
|
|
26
|
-
const rows = useMemo(() =>
|
|
26
|
+
const rows = useMemo(() => {
|
|
27
|
+
var _model$fallbackItems;
|
|
28
|
+
return [...model.sections.flat(), ...((_model$fallbackItems = model.fallbackItems) !== null && _model$fallbackItems !== void 0 ? _model$fallbackItems : [])];
|
|
29
|
+
}, [model.fallbackItems, model.sections]);
|
|
27
30
|
const cache = useMemo(() => new CellMeasurerCache({
|
|
28
31
|
defaultHeight: ESTIMATED_ROW_HEIGHT,
|
|
29
32
|
fixedWidth: true
|
|
@@ -78,17 +81,12 @@ export const TypeAheadMenuRenderer = ({
|
|
|
78
81
|
}
|
|
79
82
|
const RootComponent = (_model$root$component = model.root.component) !== null && _model$root$component !== void 0 ? _model$root$component : PassThrough;
|
|
80
83
|
const listMaxHeight = Math.max(0, maxHeight - (model.footer ? MENU_FOOTER_HEIGHT : 0));
|
|
84
|
+
const hasListboxContent = rows.length > 0 || model.footer !== undefined;
|
|
81
85
|
return /*#__PURE__*/React.createElement(RootComponent, null, /*#__PURE__*/React.createElement(Box, {
|
|
82
|
-
"aria-label": intl.formatMessage(listLabel),
|
|
86
|
+
"aria-label": hasListboxContent ? intl.formatMessage(listLabel) : undefined,
|
|
83
87
|
id: listId,
|
|
84
|
-
role:
|
|
85
|
-
}, rows.length
|
|
86
|
-
paddingBlock: "space.150",
|
|
87
|
-
paddingInline: "space.250"
|
|
88
|
-
}, /*#__PURE__*/React.createElement(Text, {
|
|
89
|
-
align: "center",
|
|
90
|
-
as: "p"
|
|
91
|
-
}, intl.formatMessage(typeAheadListMessages.emptySearchResults))) : /*#__PURE__*/React.createElement(List, {
|
|
88
|
+
role: hasListboxContent ? 'listbox' : undefined
|
|
89
|
+
}, rows.length > 0 ? /*#__PURE__*/React.createElement(List, {
|
|
92
90
|
containerRole: "presentation",
|
|
93
91
|
height: Math.min(rows.length * ESTIMATED_ROW_HEIGHT, listMaxHeight),
|
|
94
92
|
overscanRowCount: 3,
|
|
@@ -99,7 +97,14 @@ export const TypeAheadMenuRenderer = ({
|
|
|
99
97
|
rowRenderer: renderRow,
|
|
100
98
|
scrollToAlignment: "auto",
|
|
101
99
|
width: LIST_WIDTH
|
|
102
|
-
})
|
|
100
|
+
}) : model.fallbackItems === undefined ? /*#__PURE__*/React.createElement(Box, {
|
|
101
|
+
paddingBlock: "space.150",
|
|
102
|
+
paddingInline: "space.250",
|
|
103
|
+
role: "group"
|
|
104
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
105
|
+
align: "center",
|
|
106
|
+
as: "p"
|
|
107
|
+
}, intl.formatMessage(typeAheadListMessages.emptySearchResults))) : null, model.footer && /*#__PURE__*/React.createElement(TypeAheadMenuFooter, {
|
|
103
108
|
id: getTypeAheadGlobalViewMoreId(listId),
|
|
104
109
|
isSelected: selectedItemIndex === footerItemIndex,
|
|
105
110
|
Item: Item,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/* RegisteredTypeAheadMenu.tsx generated by @compiled/babel-plugin v3.0.2 */
|
|
2
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
4
|
import "./RegisteredTypeAheadMenu.compiled.css";
|
|
4
5
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -82,8 +83,9 @@ export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
|
|
|
82
83
|
});
|
|
83
84
|
}, [components, formatMessage, hasSectionOverflowItems, isSlashCommandEnabled, query, surfaceContext, surface.root]);
|
|
84
85
|
var rows = useMemo(function () {
|
|
85
|
-
|
|
86
|
-
|
|
86
|
+
var _menuModel$fallbackIt;
|
|
87
|
+
return [].concat(_toConsumableArray(menuModel.sections.flat()), _toConsumableArray((_menuModel$fallbackIt = menuModel.fallbackItems) !== null && _menuModel$fallbackIt !== void 0 ? _menuModel$fallbackIt : []));
|
|
88
|
+
}, [menuModel.fallbackItems, menuModel.sections]);
|
|
87
89
|
var selectableRowIndexes = useMemo(function () {
|
|
88
90
|
return rows.flatMap(function (registration, rowIndex) {
|
|
89
91
|
return registration.type === 'menu-item' ? [rowIndex] : [];
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
3
|
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
|
|
3
4
|
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
4
5
|
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
@@ -27,8 +28,9 @@ export var TypeAheadMenuRenderer = function TypeAheadMenuRenderer(_ref) {
|
|
|
27
28
|
var intl = useIntl();
|
|
28
29
|
var listRef = useRef(null);
|
|
29
30
|
var rows = useMemo(function () {
|
|
30
|
-
|
|
31
|
-
|
|
31
|
+
var _model$fallbackItems;
|
|
32
|
+
return [].concat(_toConsumableArray(model.sections.flat()), _toConsumableArray((_model$fallbackItems = model.fallbackItems) !== null && _model$fallbackItems !== void 0 ? _model$fallbackItems : []));
|
|
33
|
+
}, [model.fallbackItems, model.sections]);
|
|
32
34
|
var cache = useMemo(function () {
|
|
33
35
|
return new CellMeasurerCache({
|
|
34
36
|
defaultHeight: ESTIMATED_ROW_HEIGHT,
|
|
@@ -101,17 +103,12 @@ export var TypeAheadMenuRenderer = function TypeAheadMenuRenderer(_ref) {
|
|
|
101
103
|
}
|
|
102
104
|
var RootComponent = (_model$root$component = model.root.component) !== null && _model$root$component !== void 0 ? _model$root$component : PassThrough;
|
|
103
105
|
var listMaxHeight = Math.max(0, maxHeight - (model.footer ? MENU_FOOTER_HEIGHT : 0));
|
|
106
|
+
var hasListboxContent = rows.length > 0 || model.footer !== undefined;
|
|
104
107
|
return /*#__PURE__*/React.createElement(RootComponent, null, /*#__PURE__*/React.createElement(Box, {
|
|
105
|
-
"aria-label": intl.formatMessage(listLabel),
|
|
108
|
+
"aria-label": hasListboxContent ? intl.formatMessage(listLabel) : undefined,
|
|
106
109
|
id: listId,
|
|
107
|
-
role:
|
|
108
|
-
}, rows.length
|
|
109
|
-
paddingBlock: "space.150",
|
|
110
|
-
paddingInline: "space.250"
|
|
111
|
-
}, /*#__PURE__*/React.createElement(Text, {
|
|
112
|
-
align: "center",
|
|
113
|
-
as: "p"
|
|
114
|
-
}, intl.formatMessage(typeAheadListMessages.emptySearchResults))) : /*#__PURE__*/React.createElement(List, {
|
|
110
|
+
role: hasListboxContent ? 'listbox' : undefined
|
|
111
|
+
}, rows.length > 0 ? /*#__PURE__*/React.createElement(List, {
|
|
115
112
|
containerRole: "presentation",
|
|
116
113
|
height: Math.min(rows.length * ESTIMATED_ROW_HEIGHT, listMaxHeight),
|
|
117
114
|
overscanRowCount: 3,
|
|
@@ -122,7 +119,14 @@ export var TypeAheadMenuRenderer = function TypeAheadMenuRenderer(_ref) {
|
|
|
122
119
|
rowRenderer: renderRow,
|
|
123
120
|
scrollToAlignment: "auto",
|
|
124
121
|
width: LIST_WIDTH
|
|
125
|
-
})
|
|
122
|
+
}) : model.fallbackItems === undefined ? /*#__PURE__*/React.createElement(Box, {
|
|
123
|
+
paddingBlock: "space.150",
|
|
124
|
+
paddingInline: "space.250",
|
|
125
|
+
role: "group"
|
|
126
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
127
|
+
align: "center",
|
|
128
|
+
as: "p"
|
|
129
|
+
}, intl.formatMessage(typeAheadListMessages.emptySearchResults))) : null, model.footer && /*#__PURE__*/React.createElement(TypeAheadMenuFooter, {
|
|
126
130
|
id: getTypeAheadGlobalViewMoreId(listId),
|
|
127
131
|
isSelected: selectedItemIndex === footerItemIndex,
|
|
128
132
|
Item: Item,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-type-ahead",
|
|
3
|
-
"version": "20.0.
|
|
3
|
+
"version": "20.0.5",
|
|
4
4
|
"description": "Type-ahead plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"@atlaskit/prosemirror-history": "^1.2.0",
|
|
44
44
|
"@atlaskit/prosemirror-input-rules": "^4.1.0",
|
|
45
45
|
"@atlaskit/tmp-editor-statsig": "^202.0.0",
|
|
46
|
-
"@atlaskit/tokens": "^
|
|
46
|
+
"@atlaskit/tokens": "^19.0.0",
|
|
47
47
|
"@atlaskit/visually-hidden": "^4.4.0",
|
|
48
48
|
"@babel/runtime": "^7.0.0",
|
|
49
49
|
"@emotion/react": "^11.7.1",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"w3c-keyname": "^2.1.8"
|
|
55
55
|
},
|
|
56
56
|
"peerDependencies": {
|
|
57
|
-
"@atlaskit/editor-common": "^123.
|
|
57
|
+
"@atlaskit/editor-common": "^123.7.0",
|
|
58
58
|
"react": "^18.2.0 || ^19.2.0",
|
|
59
59
|
"react-dom": "^18.2.0 || ^19.2.0",
|
|
60
60
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|